7e44748295
Nav sitewide: Litepaper, Miner, App, Wallet, Live devnet, Ledger and the Download button; the rest in the sheet and the footer. /miner is the product page for the installers: the shipped app in its frame, the card picker with the live time to a block, the downloads with sizes, HiveOS, the fee in full view, three real shots. /app is new: the Igneum Ember app page by page (Overview, Cards with Ember, the chain drawn live by the module the app ships, Earnings, Prove, Settings, phone width, what keeps it mining), light and dark, every shot a real capture or a render from the RTX 5090 Windows rig's live state with the hostname painted out. /live is redrawn to show the system working: the step scene, six live cells, finality in plain words, miner lanes, provers paid, recent blocks landing, the light client in one line, the DAG below. site.css carries the shared product components (frames, download list, lines, your-card line, phone download bar); yourcard.js reads the network rate. The ledger and wallet pages no longer overflow at 390 px. Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
290 lines
22 KiB
CSS
290 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);
|
|
/* 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}
|
|
|
|
/* 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)}
|