Project journal.
Live from the commit log.

Fix three visual regressions

— Adamant

1. Input text was invisible (black-on-black) on the AprDemo and other forms. Inputs inherit user-agent text colour by default; inside a dark surface that's black on black. Set color: var(--ink) on input/textarea/select, plus dark-surface background and a visible focus ring. 2. Role-tabs were rendering as pills. The mistake was the `.role-tabs > div` selector inherited pill styling intended for `.role-tabs button`. The operator page uses <div> children as flat tabs along a border-bottom; the developers/network demos use <button> children as pills. Selector now scopes pill styling to `.role-tabs button` only. 3. "specification" text in operator's rewards twin-cell (Pending Rewards / Lifetime claimed) was inline-styled at 36px and overflowed its 1fr column on every viewport, bleeding across both cells. Added a fluid `font-size: clamp(18px, 2.4vw, 26px)` override for `[data-spec="true"]` inside op-grid / w-grid / net-grid, so spec placeholders always fit their cell.

— Claude

Center mobile hero headline vertically

— Adamant

— Claude

Mobile hero: top dome of globe at stage bottom, compact height

— Adamant

Two follow-ups on the mobile hero: - Globe was either invisible or fully visible. Desktop shows just the top dome rising from the bottom of the stage; mobile should match. Fix: override the canvas size to 620px directly so the wrap's bounding box matches, then translate(-50%, 65%) puts the sphere centre below stage bottom — top dome inside the stage, the rest clipped. - The 85vh stage left a big black strip under the globe. Reduced to 64vh so the Property Matrix section is reachable on a single thumb-scroll.

— Claude

Fix mobile: text edge-to-edge, empty hero, hidden globe

— Adamant

Three regressions from the cinematic rewrite, all visible on mobile. 1. Text pushed to the screen edge on every section. `.section` and `.wrap` both used `padding:` shorthand. When a page combined the classes (e.g. `<section class="section wrap">` on the home PropertyMatrix / Mechanisms / etc.) the later declaration wiped out the other axis. `.section` won → horizontal gutter went to 0. Fix: use `padding-block` on every section-vertical rule and `padding-inline` on every container-horizontal rule so they compose. Audited every shorthand rule and converted. 2. Hero hidden the globe + left huge empty space below. At ≤760px the 2200px globe canvas at 1:1 scale read as scattered dots, not a sphere. The vignette overlay further darkened the bottom of the stage, masking what little was visible. Fix: scale the globe to 0.35 on mobile, soften the vignette, reduce dive-stage to 85vh. 3. Hero hero is now compact and globe is clearly visible behind the title.

— Claude

Fix "completely black" mobile home page

— Adamant

The cinematic dive section was set to height: 280vh — on a phone with a ~740px viewport that's ~2000px of sticky-globe scrolling before real content appeared. The user saw it as the screen being broken or just black. On viewports ≤ 760px: - dive-section + dive-stage collapse to a single 100vh hero - dive-headline is shown immediately (no scroll fade-in) - city skyline, horizon and fog overlays hidden (they're a desktop-only cinematic flourish) - globe scaled down (0.85) and positioned so the title is visible Result: hero text is on screen immediately, the Property Matrix section reaches the user on first scroll.

— Claude

Fix header dropdown overlap + unify pill/button system

— Adamant

Header dropdown overlap (the visible cause of "header is still overlapping text"): - `white-space: nowrap` on `.cmd-bar` was cascading into the dropdown, preventing description text from wrapping. Reset to `white-space: normal` on `.cmd-pop` so the description column wraps inside the panel. - Made the dropdown background fully opaque (`#0a0a0a`) so the status strip behind it no longer shows through. - Collapsed the dropdown to a single column with separator between primary / secondary groups. 2-column layout had unsolvable column collisions at the widths we render at; single column reads better, never overlaps adjacent content. Pill / button unification (the user's "make a css class and call it everywhere"): - One pill system: `.tag` / `.chip` / `.pill` all alias to the same visual — same border, radius, padding, hover. `.tag.solid`, `.tag.is-active`, `.tag.ok`, `.tag.warn`, `.tag.faint` cover the variants. - One button system: `.btn` (default outline), `.btn.primary` (solid mint), `.btn.ghost`, `.btn.sm` (compact mono variant used for the inline "Markdown source ↗", "RSS · atom", etc. links across license / press / spec / updates / wallet). - Replaced every inline `style="border: 1px solid var(--ink); padding: 8px 14px; …"` button-link with `class="btn sm"`. Legacy CSS variable aliases (`--rule`, `--paper`, `--paper-2`, `--mute`, `--spec-bg`, `--ok`, `--signal`, etc.) added in `:root` so 175+ inline references across pages resolve to the cinematic tokens. The "inconsistent styling" you saw was largely inline references to variables that no longer existed.

— Claude

Rewrite CSS as a single coherent stylesheet

— Adamant

Delete cinematic.css (1648 lines) and pages.css (1056 lines), replace both with src/styles/site.css. Same visual design, but: - One container primitive — .wrap and .container both resolve to max-width: var(--container) with var(--pad). Every section now uses one of them; nothing escapes the container by accident. - One coherent breakpoint ladder: 1200 / 980 / 760 / 540 / 400. Earlier files mixed 640, 720, 800, 900, 980, 1080, 1100 — that was the root cause of "half the page is stretched then a section is contained." - min-width: 0 globally on box-sizing children, so grid/flex items can shrink instead of pushing the page wide. overflow-x: clip on html and body as a final safety net. - Long mono / data strings break on mobile; short uppercase labels keep their tracking. - CmdBar dropdown panel is constrained with max-width: min(600px, calc(100vw - 32px)), so the menu can't extend past the viewport or overlap when triggered from a side-edge nav item. - About 7-col comparison table collapses cleanly at 980 (label + property + adb only); BTC/ETH/XMR/ZEC/MINA dot cells and the ADM dot cell are removed from layout flow on mobile. - Footer 5 → 3 → 2 columns as viewport narrows. Snapshot scripts added under scripts/ for future verification. Verified: zero document overflow at 320 / 375 / 414 / 768 / 1280 on home, about, genesis, network, operator, wallet, spec, developers, tokenomics, security, updates, roadmap, start, faq.

— Claude

Header polish + mobile pass over cinematic design

— Adamant

- Drop the warp-tunnel and editorial bridge between Mechanisms and TheatreTiers (no semantic tie-in to the participation copy, only a scroll gimmick). - Replace the top dive-letterbox solid black bar with a soft fade so the globe is visible behind the floating cmd-bar instead of a ribbon of black. - Add a comprehensive mobile pass in pages.css that overrides the inline grid-template-columns used across about / genesis / spec / tokenomics / operator / wallet / network / updates. Inline grids blocked the class-level @media stacking; rules now use !important to win against the inline cascade. Side-effect: zero horizontal document overflow at 320 / 375 / 414 / 768. - Add snap-mobile / snap-sections / snap-home scripts for verifying layout at every viewport.

— Claude

Remote commits 3daaa43 and 948ebbb modified HubFooter, HubLayout, and the old index.astro — all of which are deleted or fully replaced by the cinematic redesign. Keeping our version of every file.

— adamant-protocol

Full visual rebuild around an onyx + hairline + editorial-italic system. Home (src/pages/index.astro): - Cold-open title card → massive rotating Globe (canvas) → scroll-driven dive into a futuristic city skyline → glitch headline → warp tunnel → theatre tiers → genesis pool + burn calculator → capabilities → framings - All cinematic effects ship as @astrojs/react islands (Globe, WorldDive, WarpField, GlitchText, BurnCalculator, TheatreTier, TitleCard, AmbientNoise) Chrome (src/components/chrome/): - Floating glass command bar with categorized dropdowns (Start, Protocol, Network, Build, Use, Read) — hover/click/keyboard navigation, italic taglines per group, mobile drawer with grouped page listing - Footer fully wired: 5 link columns (Protocol/Network/Build/Use/Org) covering 27 routes + source-code repo chip rail - StatusStrip, PhaseSwitcher, Scanlines, AmbientNoise, TitleCard Design system (src/styles/): - cinematic.css — Geist + Geist Mono + Instrument Serif, onyx tokens - pages.css — cinematic-themed shells for legacy class names so every inner page picks up the new design without per-page rewrites - Old global.css (1,762 lines of "Public Record" academic light system) deleted entirely; no oklch/Newsreader/JetBrains+Mono refs left anywhere Layout (src/layouts/Layout.astro): - HubLayout + CinematicLayout merged into one with props for showTitleCard / showStatusStrip / showPhaseSwitcher / topPad Single source of truth for nav (src/data/nav.ts): - NAV_GROUPS drives the header dropdowns + mobile drawer - FOOTER_COLUMNS + FOOTER_REPOS drive the footer Directory cleanup: - src/components/cinematic/ split into chrome/, home/, ui/ by role - Top-level shared components moved into ui/ - Orphaned RepoPulse.astro deleted - Stale OG screenshots (home-og.png + 8 per-page) deleted — regenerate via npm run gen-og when ready - All import paths rewritten; tsconfig + astro.config simplified - @astrojs/react pinned to ^3.6.3 for Astro 4 compatibility (was incorrectly installed at v5 which broke dev-mode SSR) 154 pages build clean. Dev server hot-reloads. Whitepaper untouched. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

— adamant-protocol

— Claude

— Claude