igneum/site/site.css
igneum-labs b63be56016 Site UI 3: one design system, the live DAG module, the home page as one screen, the litepaper as a paper, every page on the shared tokens
site/site.css: the tokens of the miner app's third redesign in light and dark (a darker light-mode ember and molten for text
so every pair passes 4.5:1, checked by tools/ci/site-contrast-check.mjs), the type scale on Unbounded, Plex Sans and Plex
Mono, the nav with one primary, the footer with a System/Light/Dark control, cards, tiles, tables that scroll on a phone,
buttons, pills, notes, callouts, the state words, focus rings, reduced motion, print. Partials rebuilt; the head loads the
stylesheet and applies the stored theme before paint. Every page's own style block is reduced to its page rules.

site/live-dag.js: the shared DAG view for / and /live (docs/plans/site-ui-3.md section 6): blocks by header time and
miner lane, parent edges with the selected chain as one heavier path, blue lit, red dim, pending grey, proven filled,
checkpoint bands with their lock weight (locked solid, pending dashed), new blocks arriving with a glow, hover and tap
details in the ledger's words, wheel and pinch zoom of the window (30 to 300 s), a pause button, device-pixel sharpness,
a still frame under reduced motion; opts.mine marks the user's own blocks (the miner app embeds the same file),
opts.poll:false with dag.push(reply) lets a host feed it. Every pixel is a block the observer stored.

site/index.html: the one-screen story (what it is, the live scene with chain block, shards proven, last lock, vote keys and
hash rate as state words, three things a sceptic checks, the download, how it works, the wallet, the journey, economics),
every tick-list row kept, the chip model's numbers moved to the sceptic card, the testnet terms behind a chevron, the
scroll-reveal gone, the Open Graph set on the 1200 by 630 image, no horizontal overflow at 390.

site/litepaper.html: dark like the site with light on request, whole paper by default (the section mode kept, deep links
intact, print prints the paper), repository paths off the surface, the cover dated 6 October, the wallet at 0.1.4, the
roadmap's verifier figure aligned with the Mining section, the proof lag stated as measured (about 380 s against the 60 s
gate), the 0.3.6 plan dated with 0.3.14 stated, the two "tonight" placeholders said as not yet measured. Every ledger
sentence verbatim (tools/ci/ledger-text-check.mjs, 43 sentences).

site/live.html: the lane chart replaced by the module; "proven A/B in 10 min", "finality paused, last #N", "pending" for
"n/a"; the fee sentence true on both sides of DAA 210,000. site/metamask.html: its own canonical, the explorer linked, the
wallet's state said true. site/404.html: the page count and section count said true. site/build.mjs: the generated pages
on the system, each with its own eyebrow, the miners page's source notes as sentences. downloads.json refreshed from the
host (0.3.14). tools/ci/site-orphan-check.mjs: no site heading leaves one word alone at 390 px (log titles reported).

Checks: identity grep 0 hits, link check 854 links 0 broken, ledger text 43 of 43, contrast 32 pairs 0 under 4.5:1,
no horizontal overflow at 390 on 14 pages (the wallet page's timed table overflows by 5 px, for the wallet-ui-3 owner),
orphan check 0 site headings (the miner h1 at 96 characters is the site-miner agent's copy). After captures beside the
audit's: docs/plans/site-ui-3-shots/after/.

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
2026-10-06 19:27:47 +00:00

225 lines
16 KiB
CSS

/* Igneum site: one design system for every page (docs/plans/site-ui-3.md, 6 October 2026).
Tokens, type, the shared components (nav, footer, card, tile, table, button, pill, note, callout, code) and the
state words. Each page keeps a short block of its own after this file. Fonts are declared in partials/head.html. */
/* ---------- 1. tokens ---------- */
:root{
--obsidian:#0C0C0E;--graphite:#16161A;--row:#111114;--line:#2A2A30;--line-2:#3A3A42;
--ember:#F2541B;--ember-hi:#FF6A2B;--ember-text:#F2541B;--molten:#FFB35C;--molten-text:#FFB35C;
--bone:#F4F1EC;--ink-2:#C9C7C2;--ash:#9A9A9E;--ember-ink:#0C0C0E;--ok:#FFB35C;
--scrim:rgba(12,12,14,.72);--top-bg:rgba(12,12,14,.86);--shadow:rgba(0,0,0,.6);--hover:rgba(255,255,255,.04);
--ember-12:rgba(242,84,27,.12);--ember-40:rgba(242,84,27,.4);--molten-10:rgba(255,179,92,.1);
/* the chrome tokens older page blocks still read */
--ground:var(--obsidian);--surface:var(--graphite);--surface-2:var(--row);--ink:var(--bone);--quiet:var(--ash);
--ui-bg:var(--top-bg);--ui-menu:var(--obsidian);--ui-ink:var(--bone);--ui-ink-2:var(--ink-2);--ui-ash:var(--ash);--ui-line:var(--line);--ui-line-2:var(--line-2);
--ui-accent:var(--ember);--ui-accent-ink:var(--ember-ink);--ui-hot:var(--molten);--ui-hover:var(--ember-hi);--ui-tint:var(--ember-12);
--code:var(--row);--code-ink:var(--ink-2);
/* type */
--f-sans:'IBM Plex Sans','Plex Sans Fallback',system-ui,-apple-system,sans-serif;
--f-display:'Unbounded','Unbounded Fallback',sans-serif;
--f-mono:'IBM Plex Mono','Plex Mono Fallback',ui-monospace,Menlo,monospace;
--t-xs:11px;--t-sm:12px;--t-base:15px;--t-md:17px;--t-lg:19px;--t-h3:20px;
--t-h2:clamp(26px,3.2vw,36px);--t-h1:clamp(32px,5vw,56px);--t-hero:clamp(40px,7vw,76px);--t-num:clamp(26px,3vw,40px);
/* space, radius */
--s-1:4px;--s-2:8px;--s-3:12px;--s-4:16px;--s-5:24px;--s-6:32px;
--gutter:32px;--sec:96px;--max:1120px;--nav-h:64px;
--r-card:16px;--r-row:12px;--r-btn:10px;--r-pill:999px;
color-scheme:dark;
}
@media (prefers-color-scheme:light){:root:not([data-theme="dark"]){
--obsidian:#F4F1EC;--graphite:#FFFFFF;--row:#FAF8F5;--line:#E2DED8;--line-2:#CFCAC2;
--ember:#D0420D;--ember-hi:#E04A14;--ember-text:#B8390C;--molten:#B8731F;--molten-text:#8F5810;
--bone:#16161A;--ink-2:#3C3C42;--ash:#6B6B70;--ember-ink:#FFFFFF;--ok:#B8731F;
--scrim:rgba(244,241,236,.72);--top-bg:rgba(244,241,236,.88);--shadow:rgba(0,0,0,.18);--hover:rgba(0,0,0,.04);
--ember-12:rgba(224,74,20,.1);--ember-40:rgba(224,74,20,.4);--molten-10:rgba(184,115,31,.1);
color-scheme:light;
}}
:root[data-theme="light"]{
--obsidian:#F4F1EC;--graphite:#FFFFFF;--row:#FAF8F5;--line:#E2DED8;--line-2:#CFCAC2;
--ember:#D0420D;--ember-hi:#E04A14;--ember-text:#B8390C;--molten:#B8731F;--molten-text:#8F5810;
--bone:#16161A;--ink-2:#3C3C42;--ash:#6B6B70;--ember-ink:#FFFFFF;--ok:#B8731F;
--scrim:rgba(244,241,236,.72);--top-bg:rgba(244,241,236,.88);--shadow:rgba(0,0,0,.18);--hover:rgba(0,0,0,.04);
--ember-12:rgba(224,74,20,.1);--ember-40:rgba(224,74,20,.4);--molten-10:rgba(184,115,31,.1);
color-scheme:light;
}
@media (max-width:1000px){:root{--gutter:24px}}
@media (max-width:720px){:root{--gutter:16px;--sec:64px}}
/* ---------- 2. base ---------- */
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--nav-h) + 16px)}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--obsidian);color:var(--bone);font:400 var(--t-md)/1.6 var(--f-sans);-webkit-font-smoothing:antialiased;font-variant-numeric:tabular-nums;overflow-x:hidden}
h1,h2,h3,h4{font-family:var(--f-display);color:var(--bone);margin:0;text-wrap:balance;letter-spacing:-.01em}
h1{font-size:var(--t-h1);font-weight:900;line-height:1.05}
h2{font-size:var(--t-h2);font-weight:700;line-height:1.1}
h3{font-size:var(--t-h3);font-weight:700;line-height:1.25}
p,li,dd,figcaption,td{text-wrap:pretty}
p{margin:0 0 1em}
a{color:var(--ember-text);text-decoration:none}
a:hover{text-decoration:underline;text-underline-offset:3px}
a:focus-visible,button:focus-visible,summary:focus-visible,[tabindex]:focus-visible,input:focus-visible{outline:2px solid var(--ember);outline-offset:3px;border-radius:6px}
::selection{background:var(--ember-40)}
img,canvas,svg,video{max-width:100%;display:block}
code,kbd,.mono{font-family:var(--f-mono)}
hr{border:0;border-top:1px solid var(--line);margin:var(--s-6) 0}
.skip{position:absolute;left:12px;top:-80px;z-index:50;background:var(--ember);color:var(--ember-ink);padding:10px 14px;border-radius:var(--r-btn);font:600 15px/1.2 var(--f-sans);text-decoration:none}
.skip:focus{top:12px}
.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--gutter)}
.sec{padding:var(--sec) 0}
.sec+.sec{padding-top:0}
.sec-head{max-width:68ch;margin-bottom:var(--s-6)}
.sec-head p{color:var(--ink-2);font-size:var(--t-lg);line-height:1.5;margin:var(--s-3) 0 0}
.lead{font-size:var(--t-lg);line-height:1.55;color:var(--ink-2);max-width:62ch}
.eyebrow{font:500 var(--t-sm)/1.4 var(--f-mono);letter-spacing:.16em;text-transform:uppercase;color:var(--ash);margin-bottom:var(--s-3)}
.eyebrow.ember{color:var(--ember-text)}
.measure{max-width:68ch}
.muted{color:var(--ash)}
.right{text-align:right}
.visually-hidden{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
/* ---------- 3. nav ---------- */
.nav{position:sticky;top:0;z-index:40;background:var(--top-bg);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
.nav .wrap{display:flex;align-items:center;gap:var(--s-5);height:var(--nav-h)}
.brand{display:inline-flex;align-items:center;gap:10px;color:var(--bone);text-decoration:none}
.brand:hover{text-decoration:none}
.brand .mark{width:28px;height:28px;display:grid;place-items:center;border-radius:8px;background:var(--graphite);border:1px solid var(--line)}
.brand .word{font:900 20px/1 var(--f-display);letter-spacing:.06em}
.nav .links{display:flex;align-items:center;gap:var(--s-4);margin-left:auto}
.nav .links a{color:var(--ink-2);font-size:var(--t-base);font-weight:500;padding:8px 2px;border-bottom:2px solid transparent}
.nav .links a:hover{color:var(--bone);text-decoration:none}
.nav .links a[aria-current="page"]{color:var(--bone);border-bottom-color:var(--ember)}
.nav .cta{margin-left:var(--s-3)}
.burger{display:none;margin-left:auto;width:44px;height:44px;border-radius:var(--r-btn);border:1px solid var(--line);background:var(--graphite);color:var(--bone);cursor:pointer;align-items:center;justify-content:center}
.burger .bars{display:block;width:18px;height:2px;background:currentColor;position:relative}
.burger .bars::before,.burger .bars::after{content:"";position:absolute;left:0;width:18px;height:2px;background:currentColor}
.burger .bars::before{top:-6px}.burger .bars::after{top:6px}
.nav-sheet{display:none}
@media (max-width:900px){
.nav .links{display:none}
.nav .cta{display:none}
.burger{display:inline-flex}
.nav.open .nav-sheet{display:block;position:fixed;inset:var(--nav-h) 0 0 0;background:var(--obsidian);z-index:39;overflow:auto;padding:var(--s-5) var(--gutter)}
.nav-sheet a{display:block;padding:14px 0;border-bottom:1px solid var(--line);color:var(--bone);font-size:var(--t-lg);font-weight:500}
.nav-sheet a[aria-current="page"]{color:var(--ember-text)}
.nav-sheet .btn{margin-top:var(--s-5);width:100%}
}
/* ---------- 4. footer ---------- */
.foot{border-top:1px solid var(--line);padding:var(--s-6) 0 var(--s-5);margin-top:var(--sec);color:var(--ash);font-size:var(--t-base)}
.foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:var(--s-6)}
.foot-brand .brand{margin-bottom:var(--s-3)}
.foot-brand p{color:var(--ash);margin:0}
.foot-col .eyebrow{margin-bottom:var(--s-3)}
.foot-col a{display:block;color:var(--ink-2);padding:5px 0}
.foot-col a:hover{color:var(--bone)}
.foot-base{display:flex;flex-wrap:wrap;justify-content:space-between;gap:var(--s-3);border-top:1px solid var(--line);margin-top:var(--s-6);padding-top:var(--s-4);font-size:var(--t-sm)}
.foot-imprint{max-width:60ch;line-height:1.5}
.theme{display:inline-flex;border:1px solid var(--line);border-radius:var(--r-pill);overflow:hidden}
.theme button{background:transparent;border:0;color:var(--ash);font:500 var(--t-sm)/1 var(--f-mono);padding:8px 12px;cursor:pointer}
.theme button[aria-pressed="true"]{background:var(--graphite);color:var(--bone)}
@media (max-width:900px){.foot-grid{grid-template-columns:1fr 1fr}}
@media (max-width:500px){.foot-grid{grid-template-columns:1fr}}
/* ---------- 5. components ---------- */
.card{background:var(--graphite);border:1px solid var(--line);border-radius:var(--r-card);padding:var(--s-5)}
.card h3{margin-bottom:var(--s-2)}
.card p:last-child{margin-bottom:0}
.grid{display:grid;gap:var(--s-4)}
.grid.c2{grid-template-columns:repeat(2,minmax(0,1fr))}
.grid.c3{grid-template-columns:repeat(3,minmax(0,1fr))}
.grid.c4{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:900px){.grid.c3,.grid.c4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.grid.c2,.grid.c3,.grid.c4{grid-template-columns:minmax(0,1fr)}}
/* a grid track never grows past the viewport for a long line inside it (the 390 px overflow class, 6 Oct 2026) */
.grid>*,.tiles>*,.card,.two>*,.split>*,.split2>*,.hero-grid>*,.download>*,.layout>*,.pillars>*,.phases>*,.group>*,.feats>*,.fee>*,.steps>*,.states>*,.ol>*,.cells>*,.strip>*{min-width:0}
pre{max-width:100%}
@media (max-width:720px){main table{display:block;overflow-x:auto;max-width:100%;-webkit-overflow-scrolling:touch}.tbl table{display:table}}
.tiles{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--s-3)}
@media (max-width:700px){.tiles{grid-template-columns:repeat(2,minmax(0,1fr))}}
.tile{background:var(--row);border:1px solid var(--line);border-radius:var(--r-row);padding:var(--s-4) var(--s-4) var(--s-3);min-width:0}
.tile .v{font:700 var(--t-num)/1 var(--f-display);color:var(--bone);letter-spacing:-.02em;overflow-wrap:anywhere}
.tile .v.state{font:500 var(--t-base)/1.3 var(--f-mono);color:var(--ash);padding:6px 0}
.tile .k{font:400 var(--t-sm)/1.4 var(--f-mono);color:var(--ash);margin-top:var(--s-2)}
.tile.hot .v{color:var(--ember-text)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:10px 20px;border-radius:var(--r-btn);border:1px solid var(--line);background:transparent;color:var(--bone);font:600 var(--t-base)/1.2 var(--f-sans);text-decoration:none;cursor:pointer;white-space:nowrap}
.btn:hover{text-decoration:none;border-color:var(--line-2);background:var(--hover)}
.btn.primary{background:var(--ember);border-color:var(--ember);color:var(--ember-ink);font:700 15px/1.2 var(--f-display);letter-spacing:.01em}
.btn.primary:hover{background:var(--ember-hi);border-color:var(--ember-hi)}
.btn.small{min-height:36px;padding:6px 14px;font-size:14px}
.btn[aria-disabled="true"],.btn:disabled{opacity:.5;cursor:default}
@media (max-width:720px){.cta .btn{width:100%}}
.cta{display:flex;flex-wrap:wrap;gap:var(--s-3)}
.pill{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--line);border-radius:var(--r-pill);padding:5px 12px;font:500 var(--t-sm)/1.4 var(--f-mono);color:var(--ink-2);background:var(--row)}
.dot{width:8px;height:8px;border-radius:50%;background:var(--molten);display:inline-block;flex:none}
.dot.live{animation:pulse 2s ease-in-out infinite}
.dot.off{background:var(--ash);animation:none}
.dot.bad{background:var(--ember);animation:none}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.35}}
@media (prefers-reduced-motion:reduce){.dot.live{animation:none}}
.note{color:var(--ash);font-size:var(--t-base);line-height:1.55;max-width:80ch;margin:var(--s-4) 0 0}
.callout{border-left:2px solid var(--ember);background:var(--row);border-radius:0 var(--r-row) var(--r-row) 0;padding:var(--s-4) var(--s-5);margin:var(--s-5) 0;color:var(--ink-2)}
.callout p:last-child{margin:0}
pre,.code{background:var(--row);border:1px solid var(--line);border-radius:var(--r-row);padding:var(--s-4);font:400 14px/1.6 var(--f-mono);color:var(--ink-2);overflow:auto;margin:0}
code{font-size:.92em;background:var(--row);border:1px solid var(--line);border-radius:6px;padding:1px 6px;color:var(--ink-2)}
pre code{background:none;border:0;padding:0}
.tbl{overflow-x:auto;-webkit-overflow-scrolling:touch;border:1px solid var(--line);border-radius:var(--r-row);background:var(--graphite);min-width:0;max-width:100%}
table{border-collapse:collapse;width:100%;font-size:var(--t-base);line-height:1.45}
th,td{text-align:left;padding:10px 14px;vertical-align:top}
th{font:500 var(--t-sm)/1.4 var(--f-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--ash);border-bottom:1px solid var(--line);white-space:nowrap}
td{border-top:1px solid var(--line);color:var(--ink-2)}
tr:first-child td{border-top:0}
td.num,th.num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
td.id{font-family:var(--f-mono);font-size:14px;overflow-wrap:anywhere}
@media (max-width:720px){th,td{padding:8px 10px}}
.kv{display:grid;grid-template-columns:minmax(120px,30%) 1fr;gap:0 var(--s-4)}
.kv>div{padding:10px 0;border-top:1px solid var(--line);color:var(--ink-2)}
.kv>div:nth-child(-n+2){border-top:0}
.kv .k{font:500 var(--t-sm)/1.4 var(--f-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--ash);padding-top:12px}
details{border-top:1px solid var(--line)}
details:last-of-type{border-bottom:1px solid var(--line)}
summary{cursor:pointer;padding:14px 0;color:var(--bone);font-weight:500;list-style:none;display:flex;justify-content:space-between;gap:var(--s-3)}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";font-family:var(--f-mono);color:var(--ash)}
details[open] summary::after{content:"\2212"}
details>:not(summary){padding-bottom:var(--s-4);color:var(--ink-2)}
input,select,textarea{font:400 var(--t-md)/1.4 var(--f-sans);color:var(--bone);background:var(--row);border:1px solid var(--line);border-radius:var(--r-btn);padding:10px 12px;width:100%}
input:focus,select:focus,textarea:focus{border-color:var(--line-2)}
.field{display:grid;gap:6px;margin-bottom:var(--s-4)}
.field label{font:500 var(--t-sm)/1.4 var(--f-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--ash)}
/* ---------- 6. states ---------- */
.state{display:inline-flex;align-items:center;gap:8px;font:500 var(--t-sm)/1.4 var(--f-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--ash)}
.state.live{color:var(--molten-text)}
.state.bad{color:var(--ember-text)}
.empty{color:var(--ash);font-size:var(--t-base);padding:var(--s-5) 0}
.empty.err{color:var(--ember-text)}
.spinner{width:24px;height:24px;border-radius:50%;border:2px solid var(--line);border-top-color:var(--ember);animation:spin 1s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.spinner{animation:none}}
/* ---------- 7. scenes ---------- */
.viz{padding:var(--s-4)}
.viz-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:10px var(--s-5);margin-bottom:var(--s-3)}
.viz-stats{display:flex;flex-wrap:wrap;gap:var(--s-3) var(--s-4);font:400 var(--t-sm)/1.4 var(--f-mono);color:var(--ash)}
.viz-stats b{color:var(--bone);font-weight:500}
.viz canvas{width:100%;height:340px;border-radius:var(--r-row);background:var(--row);border:1px solid var(--line)}
@media (max-width:600px){.viz canvas{height:240px}}
.legend{display:flex;flex-wrap:wrap;gap:var(--s-3) var(--s-4);margin-top:var(--s-4);font-size:14px;color:var(--ink-2)}
.legend[hidden]{display:none}
.legend span{display:inline-flex;align-items:center;gap:8px}
.sw{width:12px;height:12px;border-radius:3px;display:inline-block;flex:none}
/* ---------- 8. print ---------- */
@media print{
:root{--obsidian:#fff;--graphite:#fff;--row:#f3f3f3;--line:#bbb;--line-2:#999;--bone:#000;--ink-2:#111;--ash:#444;--ember:#B8390C;--ember-text:#B8390C;--molten-text:#8F5810}
.nav,.foot,.burger,.skip,.cta,.theme,.no-print{display:none!important}
body{font-size:11pt;line-height:1.45;background:#fff;color:#000}
.wrap{max-width:none;padding:0}
a{color:#000;text-decoration:underline}
a[href^="http"]::after{content:" (" attr(href) ")";font-size:9pt;color:#444}
.card,.tbl,.callout,pre{break-inside:avoid;border-color:#bbb}
h1,h2,h3{break-after:avoid}
tr{break-inside:avoid}
canvas{display:none}
}