a4fe3d8e08
renderer pack EMBER 02 supplied by the project lead, 7 Oct 2026: src/live-dag.js and src/proof-core.js adopted byte for byte (sha256 582f2e73... and c2a094a6...), reviewed as third-party code (one same-origin fetch of /api/live when poll is on, no eval, no CDN, no font download, tokens read from :root in both themes, checkpoints placed only on an exact blue score, proof never implies inclusion, a lock only when reported), its tests/verify.py run on this Mac (73 of 73) and the module mounted against the real observer feed (state live, only /api/live requested, zero records promoted). Home: the pack's full mode in the one-screen fold with the legend row and the newest block's caption, fed by the page's own reader. /live: the pack in the graph slot, the four miner stats (blocks in window, your blocks, proven, latest checkpoint), the All blocks / Selected chain / Your blocks tabs, Pause and Follow, the window stepper, the inspector column with IgneumProof's shard scene, the proof shards list, inclusion, miner key, blue score, DAA, parents, header time, checkpoint, finality, and the three-beat Motion, with meaning block; the observatory's six tiles, identities, event stream, block activity, light client and table stay. site.css gains --included and --excluded. The standalone demo is the pack's standalone.html; the 10-second recording is from this branch's /live. Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
293 lines
22 KiB
CSS
293 lines
22 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);
|
|
--included:#3B7DD8;--excluded:#B0362B;
|
|
/* 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);
|
|
--included:#2A62B8;--excluded:#B0362B;
|
|
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);
|
|
--included:#2A62B8;--excluded:#B0362B;
|
|
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}
|
|
|
|
/* the engaged scene: a chip in the corner while the wheel zooms */
|
|
.scene canvas.engaged{outline:2px solid var(--ember);outline-offset:-2px}
|
|
.chip-zoom{position:absolute;right:12px;top:12px;display:inline-flex;align-items:center;gap:8px;background:var(--graphite);border:1px solid var(--line-2);border-radius:var(--r-pill);padding:5px 12px;font:500 var(--t-sm)/1.4 var(--f-mono);color:var(--ink-2);pointer-events:none}
|
|
.chip-zoom[hidden]{display: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}
|
|
}
|
|
|
|
/* ---------- 9. product pages: miner, app, wallet, live (7 Oct 2026) ---------- */
|
|
.phero{position:relative;padding:calc(var(--s-6) + 16px) 0 var(--s-6);overflow:hidden}
|
|
.phero::before{content:"";position:absolute;inset:auto -10% -30% 40%;height:70%;background:radial-gradient(closest-side,var(--ember-12),transparent);pointer-events:none}
|
|
.phero .wrap{position:relative;display:grid;gap:var(--s-6);grid-template-columns:1fr;align-items:center}
|
|
@media (min-width:980px){.phero .wrap{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:var(--s-6) 56px}}
|
|
.phero h1{margin:0 0 var(--s-4)}
|
|
.phero .lead{margin:0 0 var(--s-5)}
|
|
.phero .os{display:flex;flex-wrap:wrap;gap:6px 16px;font:400 var(--t-sm)/1.4 var(--f-mono);color:var(--ash);margin-top:var(--s-4)}
|
|
.frame{position:relative;border:1px solid var(--line-2);border-radius:var(--r-card);background:var(--obsidian);box-shadow:0 30px 80px var(--shadow);overflow:hidden;margin:0;min-width:0}
|
|
.frame .bar{height:32px;display:flex;align-items:center;gap:7px;padding:0 14px;border-bottom:1px solid var(--line);background:var(--graphite)}
|
|
.frame .bar i{width:10px;height:10px;border-radius:50%;background:var(--line-2);display:block}
|
|
.frame .bar b{margin-left:auto;font:500 11px/1 var(--f-mono);letter-spacing:.12em;color:var(--ash);text-transform:uppercase}
|
|
.frame img{display:block;width:100%;height:auto}
|
|
.frame figcaption{padding:10px 14px;font:400 13px/1.5 var(--f-mono);color:var(--ash);border-top:1px solid var(--line)}
|
|
.frame.phone{max-width:300px;margin:0 auto}
|
|
.frame .img-light,.frame .cap-light{display:none}
|
|
@media (prefers-color-scheme:light){:root:not([data-theme="dark"]) .frame .img-dark,:root:not([data-theme="dark"]) .frame .cap-dark{display:none}:root:not([data-theme="dark"]) .frame .img-light{display:block}:root:not([data-theme="dark"]) .frame .cap-light{display:inline}}
|
|
:root[data-theme="light"] .frame .img-dark,:root[data-theme="light"] .frame .cap-dark{display:none}:root[data-theme="light"] .frame .img-light{display:block}:root[data-theme="light"] .frame .cap-light{display:inline}
|
|
.glow{position:relative}
|
|
.glow::before{content:"";position:absolute;inset:12% -6% -8% -6%;background:radial-gradient(closest-side,var(--ember-12),transparent);filter:blur(12px);pointer-events:none}
|
|
.shots3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s-4)}
|
|
@media (max-width:900px){.shots3{grid-template-columns:1fr}}
|
|
.dl-list{display:flex;flex-direction:column;gap:var(--s-2);margin:var(--s-4) 0}
|
|
.dl-list a{display:flex;justify-content:space-between;align-items:center;gap:var(--s-3);padding:12px 16px;border:1px solid var(--line);border-radius:var(--r-row);background:var(--graphite);color:var(--bone);font-weight:600;min-width:0}
|
|
.dl-list a:hover{text-decoration:none;border-color:var(--line-2);background:var(--hover)}
|
|
.dl-list a.primary{background:var(--ember);border-color:var(--ember);color:var(--ember-ink)}
|
|
.dl-list a.primary:hover{background:var(--ember-hi)}
|
|
.dl-list a span{font:400 var(--t-sm)/1.4 var(--f-mono);opacity:.85;text-align:right}
|
|
.dl-list a[data-dl-missing]{opacity:.55}
|
|
.notice{font-size:var(--t-base);color:var(--ink-2);margin:var(--s-3) 0 0}
|
|
.notice b{color:var(--bone);font-weight:600}
|
|
.lines{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s-3)}
|
|
.lines li{background:var(--row);border:1px solid var(--line);border-radius:var(--r-row);padding:var(--s-4);min-width:0;color:var(--ink-2);font-size:var(--t-base);line-height:1.5}
|
|
.lines strong{color:var(--bone);display:block;margin-bottom:4px}
|
|
.lines .src{display:block;font:400 var(--t-xs)/1.4 var(--f-mono);margin-top:6px}
|
|
.lines.c2{grid-template-columns:repeat(2,minmax(0,1fr))}
|
|
.lines.c4{grid-template-columns:repeat(4,minmax(0,1fr))}
|
|
@media (max-width:900px){.lines,.lines.c2,.lines.c4{grid-template-columns:1fr}}
|
|
.feature{display:grid;grid-template-columns:1fr;gap:var(--s-5);align-items:center}
|
|
@media (min-width:980px){.feature{grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr)}.feature.flip>.frame{order:2}}
|
|
.feature h2{margin-bottom:var(--s-3)}
|
|
.feature>div>p{color:var(--ink-2)}
|
|
.feature .lines{grid-template-columns:1fr;margin-top:var(--s-4)}
|
|
.yourcard{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-2) var(--s-3);background:var(--row);border:1px solid var(--line);border-radius:var(--r-row);padding:var(--s-3) var(--s-4);font-size:var(--t-base);color:var(--ink-2)}
|
|
.yourcard select{width:auto;padding:6px 10px;font:500 var(--t-base)/1.3 var(--f-sans)}
|
|
.yourcard b{color:var(--bone);font-weight:600}
|
|
.yourcard .eta{font-family:var(--f-mono);color:var(--molten-text)}
|
|
.tick{transition:color .5s ease}.tick.flash{color:var(--molten-text);transition:none}
|
|
.dl-bar{display:none}
|
|
@media (max-width:720px){.dl-bar{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:30;justify-content:space-between;align-items:center;gap:var(--s-3);padding:10px var(--gutter) calc(10px + env(safe-area-inset-bottom));background:var(--top-bg);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-top:1px solid var(--line)}.dl-bar span{font:400 var(--t-sm)/1.4 var(--f-mono);color:var(--ash);min-width:0}body.has-dl-bar{padding-bottom:72px}}
|
|
.band{background:var(--ember);color:var(--ember-ink)}
|
|
.band .wrap{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--s-5);padding-top:56px;padding-bottom:56px}
|
|
.band h2{color:var(--ember-ink);font-weight:900;margin-bottom:var(--s-2)}
|
|
.band p{margin:0;max-width:56ch}
|
|
.btn.dark{background:var(--obsidian);color:var(--bone);border-color:var(--obsidian)}
|
|
.btn.dark:hover{background:var(--graphite);border-color:var(--graphite)}
|
|
.switch{display:inline-flex;align-items:center;gap:12px;font-size:var(--t-base);color:var(--bone)}
|
|
.switch .track{width:44px;height:26px;border-radius:13px;background:var(--ember);position:relative;flex:0 0 44px}
|
|
.switch .track::after{content:"";position:absolute;top:3px;right:3px;width:20px;height:20px;border-radius:50%;background:var(--bone)}
|