/*
The SimFather, Option A Stadium Night hero + Option B Simulation Grid mid-page only,
2026-09-09. Premium dark charcoal and muted brass. No vault chrome, no green or olive oxide.
Dark-first with a legible light theme. Self-hosted fonts only; no external request
on load. The only external hrefs are the Discord invite and the DraftKings
referral; the two page forms reach Formspree and the Funded app (both listed
in the page CSP connect-src).
Shared by index.html, privacy.html and terms.html. The legal document chrome
(.docnav, .doc, .doc__*) lives at the end and must keep rendering.
Scales, from the spec and nothing else:
spacing 4 8 12 16 24 32 48 64 96 128
type 13 16 20 25|31 39|49 61|95 (six sizes at 390, six at 1440)
gutter 24 at 390, 48 at 1440; content ceiling 1248
radius 2 px, mechanical, everywhere
Motion lives in motion.css; this file paints every element at rest.
*/
/* ---- Webfonts (self-hosted, latin subsets) --------------------------------
TWO VARIABLE FACES REPLACED THREE STATIC ONES, 2026-09-12. The body face used to be
a text serif and it was the single biggest reason the site read as a period piece
rather than a product: running text in a serif, set over engraved gilt rules, is a
nineteenth century bank notice. Sora and Manrope are both geometric, both variable
(one file each covers the whole weight range), and together they cost 58 KB against
the 69 KB of the three files they replace. The old face is named in no comment here
because a test asserts its name is gone from the served stylesheet.
Libre Franklin stays in the stack as the first fallback, so a browser that fails
to fetch Sora lands on the face the site used to ship rather than on Arial. */
@font-face {
font-family: "Sora";
font-style: normal;
font-weight: 300 700;
font-display: swap;
src: url("assets/fonts/sora-latin-var.woff2") format("woff2");
}
/* INTER, added 2026-09-13. It is the interface face in the reference the site is being
matched to, and it is the right one for the job: it was drawn for small dense UI text,
its figures line up in a column, and it disappears rather than performing. Manrope came
out for it after one day: Manrope is friendlier and rounder, which reads well in a
paragraph and reads soft in a data table. */
@font-face {
font-family: "Inter";
font-style: normal;
font-weight: 300 700;
font-display: swap;
src: url("assets/fonts/inter-latin-var.woff2") format("woff2");
}
/* A REAL MONOSPACE, for the things that are identifiers rather than words: slate ids,
player ids, salaries, projections, any column a reader scans down. Tabular figures in a
proportional face keep the columns aligned but still read as prose; a mono says "this is
data" before a single value is read, which is the whole trick in the reference. */
@font-face {
font-family: "JetBrains Mono";
font-style: normal;
font-weight: 400 600;
font-display: swap;
src: url("assets/fonts/jetbrains-mono-latin-var.woff2") format("woff2");
}
@font-face {
font-family: "Libre Franklin";
font-style: normal;
font-weight: 500 600;
font-display: swap;
src: url("assets/fonts/libre-franklin-latin.woff2") format("woff2");
}
/* ---- Tokens -------------------------------------------------------------- */
:root {
/* dark is the default theme, and the ground is the HOME PAGE's ground, to the byte.
It was a cool near-black with a blue cast while the home page was warm, and eight pages
used this one, so moving between them did not read as one site changing page. One palette,
defined once, is the only thing that actually holds that. */
--bg: #0a0a09;
--bg-lift: #141311;
--panel: #141311;
--panel-2: #1d1b17;
/* THE GILT RAMP, read off the brand mark.
The mark is gilt on near-black: lit along the top edge, falling to an engraved
shadow. The site carried TWO different metals before this, a greyed #9a8b6a here
and a warmer #b6934b in funded.css, on pages that load both stylesheets. This is
the single source. The three brass names below are kept as aliases so all 144
existing call sites move with the ramp instead of being renamed in one pass. */
--gold-lit: #e6c97c; /* the lit top edge. Signature and ornament ONLY, never body text */
--gold-bright: #e6c97c; /* emphasis: focus rings, active state, a hovered rule */
--gold: #c9a961; /* the workhorse mid-tone */
--gold-deep: #6e5730; /* the engraved shadow side */
/* The mark's lettering is not a flat fill, it carries a vertical gradient, and that
is the whole difference between reading as struck metal and reading as mustard.
One token, so any surface can be gilt without hand-mixing a gradient. */
--metal-gold: linear-gradient(175deg, var(--gold-lit) 0%, var(--gold) 46%, var(--gold-deep) 100%);
--metal-edge: linear-gradient(180deg, rgba(227, 193, 132, 0.55), rgba(125, 102, 51, 0.14));
--brass: var(--gold);
--brass-bright: var(--gold-bright);
--brass-deep: var(--gold-deep);
--parchment: #f1ece0;
--text: #f1ece0;
--muted: #b9b2a3; /* warm grey, off the same ramp as the ground */
--line: rgba(198, 160, 87, 0.26);
--line-soft: rgba(255, 255, 255, 0.09);
--edge-hi: rgba(255, 255, 255, 0.08);
--edge-lo: rgba(0, 0, 0, 0.6);
--field-bg: rgba(255, 255, 255, 0.04);
--field-line: rgba(255, 255, 255, 0.16);
/* The account menu, which is Clerk's and is themed only through its variables. It is the
one surface that is brown rather than the cool panel grey, so it gets
tokens of its own instead of borrowing --panel and drifting when --panel changes. */
--menu-bg: #241c0e;
--menu-text: #ffffff;
--focus: var(--gold-bright);
--shadow: rgba(0, 0, 0, 0.6);
--danger: #e39070;
--seal-opacity: 0.16;
/* ---- Glass ------------------------------------------------------------
One raised surface, used everywhere something sits above the page: cards,
the email capture, the nav once it leaves the top. It is a translucent
wash plus a blur of what is behind it plus ONE lit top edge, which is what
makes a panel look like it has thickness. --glass-blur is a length so a
component can dial it down; it is never a backdrop-filter shorthand,
because Safari needs -webkit-backdrop-filter beside it at every call site.
backdrop-filter degrades safely: a browser without it shows the wash alone,
which is why the wash is never fully transparent. */
--glass-bg: linear-gradient(157deg, rgba(255, 255, 255, 0.075), rgba(255, 255, 255, 0.022));
--glass-line: rgba(255, 255, 255, 0.11);
--glass-blur: 18px;
--glass-shadow: 0 1px 0 rgba(255, 255, 255, 0.08) inset, 0 24px 60px -26px rgba(0, 0, 0, 0.9);
--glass-shadow-lift: 0 1px 0 rgba(255, 255, 255, 0.13) inset, 0 34px 80px -28px rgba(0, 0, 0, 0.95);
/* Gold as light. A halo, not a border: this is what a hovered primary control
and the hero glow share, and it is the one place the brand colour is allowed
to bloom. */
--glow-gold: 0 14px 44px -16px rgba(198, 160, 87, 0.5);
--glow-gold-soft: 0 10px 34px -18px rgba(198, 160, 87, 0.32);
/* ---- Component tokens -------------------------------------------------
A restyle edits THESE and the light block below, never a call site. Every
one resolves to a token above, so the ramp stays the single source and the
two themes cannot drift apart by being edited in different places.
Engraving is the vernacular the mark sets, and it is made of two things a
flat design does not have: a lit inner top edge and a dark outer bottom
edge. That pair is what --card-edge and --shadow do together. */
--btn-bg: rgba(255, 255, 255, 0.045);
--btn-line: var(--glass-line);
--btn-text: var(--text);
--btn-bg-hover: rgba(198, 160, 87, 0.12);
--btn-line-hover: var(--gold-bright);
--btn-gilt-bg: var(--metal-gold);
--btn-gilt-text: #14100a;
--btn-gilt-line: var(--gold-deep);
--card-bg: var(--glass-bg);
--card-line: var(--glass-line);
--card-edge: var(--edge-hi);
--card-shadow: var(--glass-shadow);
--card-shadow-lift: var(--glass-shadow-lift);
--field-focus-ring: 0 0 0 2px var(--bg), 0 0 0 4px var(--focus);
--rule-hair: 1px solid var(--line-soft);
--rule-gilt: 1px solid var(--line);
/* THREE ROLES, THREE FACES, and the split is by JOB rather than by page.
Sora is the voice: marketing headlines, where a face is allowed character.
Inter is the interface: every paragraph, label, control and table cell. It was drawn
for small dense UI and it is what the reference this design follows uses.
JetBrains Mono is data: ids, salaries, projections, anything scanned down a column.
All three are variable, so a weight is a number rather than another download.
Use --ui, not --display, for a heading inside a product surface: a dense panel wants
the interface face at a heavier weight, not the display face shrunk down. */
--display: "Sora", "Libre Franklin", "Segoe UI", Arial, sans-serif;
--body: "Inter", "Libre Franklin", "Segoe UI", Arial, sans-serif;
--ui: "Inter", "Libre Franklin", "Segoe UI", Arial, sans-serif;
--mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
/* THESE TWO WERE USED TWENTY-ONE TIMES AND DEFINED NOWHERE, found 2026-09-15 while
writing the homepage rebuild. var() with no fallback and no definition makes the
whole declaration invalid at computed-value time, so every `font-family: var(--brand)`
quietly inherited Inter (including .brand__name, three lines under a comment calling
itself "THE ONLY --brand ON THE SITE" and meaning Sora), and every
`font-variant-numeric: var(--nums)` did nothing at all. Defining them here fixes all
twenty-one call sites without touching one of them. --brand is an alias rather than a
fourth face: the comment above already says the display face IS the brand voice. */
--brand: var(--display);
--nums: tabular-nums;
/* Inter's default spacing is set for body copy. Dense UI wants it a shade tighter, and a
hero wants it tighter still. Named so a component asks for a tracking by role. */
--track-ui: -0.006em;
--track-tight: -0.02em;
--track-label: 0.08em;
/* A SCALE, not the old single mechanical 2px. Soft corners are most of what
separates a current interface from a 2014 one, and the sizes differ by role:
a chip is not a card and a card is not a hero panel. */
--radius-xs: 6px;
--radius-sm: 10px;
--radius: 14px;
--radius-lg: 22px;
--radius-pill: 999px;
/* spacing scale */
--s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px;
--s6: 32px; --s7: 48px; --s8: 64px; --s9: 96px; --s10: 128px;
/* type scale, 390 column */
--t-micro: 13px;
--t-body: 16px;
--t-lead: 20px;
--t-product: 25px;
--t-section: 39px;
--t-hero: 61px;
/* rhythm, 390 column */
--gutter: var(--s5);
--wrap: 1248px;
--pad-hero-top: var(--s9);
--pad-hero-bottom: var(--s8);
--pad-section: var(--s8);
--pad-compact: var(--s7);
--gap-row: var(--s3);
--gap-col: var(--s6);
--masthead: 64px;
}
@media (min-width: 900px) {
:root {
--t-product: 31px;
--t-section: 49px;
--t-hero: 95px;
--gutter: var(--s7);
/* TIGHTENED 2026-09-13. These were s10/s10, i.e. 128px top AND bottom, which put 256px
of empty page between every pair of sections on a desktop and was the single biggest
reason the site read as sparse rather than as spacious. A section still breathes; it
no longer takes a scroll of its own to cross the gap. */
--pad-hero-top: var(--s9);
--pad-hero-bottom: var(--s8);
--pad-section: var(--s9);
--pad-compact: var(--s8);
--gap-row: var(--s4);
--gap-col: var(--s8);
}
}
/* Light theme, applied by the toggle (no OS-preference block: dark is the
default and the primary target; light is reachable only by the toggle). */
:root[data-theme="light"] {
/* Light was a parchment cream (#e8e4d8), which is the other half of why the site
read as a period piece, and it is also the single most common ground in
machine-generated design. This is a cool near-white instead: the gold becomes
the only warm thing on the page, which is what makes it read as an accent. */
--bg: #f4f5f8;
--bg-lift: #fafbfd;
--panel: #ffffff;
--panel-2: #f7f8fb;
/* The account menu stays brown in both themes, because it is the one branded surface in
the chrome. Light gets a deeper brown so white text keeps its contrast. */
--menu-bg: #2e2413;
--menu-text: #ffffff;
/* The same ramp read against parchment instead of near-black. Gilt on a light
ground is an ANTIQUE gold, not a brighter one: the values go down, not up,
because contrast here comes from depth. The roles are unchanged, so -lit is
still the emphasis stop and -deep is still the shadow, and every component
token below resolves through these without being redeclared. */
--gold-lit: #7a5f24;
--gold-bright: #6b5320;
--gold: #5f4d2c;
--gold-deep: #3f3828;
--metal-gold: linear-gradient(175deg, #8a6d2e 0%, #5f4d2c 46%, #3f3828 100%);
--metal-edge: linear-gradient(180deg, rgba(255, 253, 246, 0.7), rgba(63, 56, 40, 0.12));
--brass: var(--gold);
--brass-bright: var(--gold-bright);
--brass-deep: var(--gold-deep);
/* The two component tokens that do NOT theme through a variable, so they are
restated here. The gilt gradient runs DARK on a light ground, so near-black
label text on it would be unreadable: this is the pair a light theme usually
ships broken because nobody looks at the second theme. */
--btn-gilt-text: #fbf8f1;
--btn-bg-hover: rgba(95, 77, 44, 0.09);
--btn-bg: rgba(17, 20, 28, 0.03);
--parchment: #10131a;
--text: #10131a;
--muted: #5d6675;
--line: rgba(95, 77, 44, 0.28);
--line-soft: rgba(16, 19, 26, 0.10);
--edge-hi: rgba(255, 255, 255, 0.9);
--edge-lo: rgba(16, 19, 26, 0.12);
--field-bg: #ffffff;
--field-line: rgba(16, 19, 26, 0.16);
--focus: #6b5320;
--shadow: rgba(20, 26, 40, 0.14);
--danger: #a8452a;
--seal-opacity: 0.12;
/* Glass, restated. On a light ground the raised surface is WHITE with a hairline,
not a white wash on a dark one: reusing the dark values here would tint every
card grey and leave the lit top edge invisible. This is the pair a light theme
usually ships broken because nobody looks at the second theme. */
--glass-bg: linear-gradient(157deg, rgba(255, 255, 255, 0.92), rgba(255, 255, 255, 0.72));
--glass-line: rgba(16, 19, 26, 0.09);
--glass-blur: 16px;
--glass-shadow: 0 1px 0 rgba(255, 255, 255, 0.95) inset, 0 18px 44px -24px rgba(20, 26, 40, 0.35);
--glass-shadow-lift: 0 1px 0 rgba(255, 255, 255, 1) inset, 0 28px 64px -26px rgba(20, 26, 40, 0.42);
--glow-gold: 0 14px 40px -18px rgba(95, 77, 44, 0.42);
--glow-gold-soft: 0 10px 30px -20px rgba(95, 77, 44, 0.28);
}
/* ---- Base ---------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
margin: 0;
/* Two soft blooms on a flat ground, fixed so they do not slide with the scroll:
a gold one behind the masthead and a cooler one off to the right, which is what
keeps a near-black page from reading as a dead rectangle. The solid colour is
the backstop and the whole thing degrades to it. */
background-color: var(--bg);
background-image:
radial-gradient(80% 42% at 50% -8%, rgba(198, 160, 87, 0.13), transparent 64%),
radial-gradient(52% 38% at 88% 8%, rgba(120, 150, 220, 0.07), transparent 70%),
linear-gradient(180deg, var(--bg-lift), var(--bg) 760px);
background-repeat: no-repeat;
background-attachment: fixed, fixed, scroll;
color: var(--text);
font-family: var(--body);
font-size: var(--t-body);
line-height: 1.55;
overflow-x: hidden; /* backstop: no horizontal scroll */
}
img { max-width: 100%; display: block; }
a { color: var(--brass); text-underline-offset: 3px; }
a:hover { color: var(--brass-bright); }
/* HEADINGS ARE THE INTERFACE FACE. In the reference this design follows, they are: a
product sets its headings in the same family as its labels and distinguishes them by
weight and tracking, not by reaching for a second family. --brand is spent in exactly
one place, on the marketing headline below, which is what makes it read as a voice
rather than as the default. */
h1, h2, h3, h4 {
font-family: var(--ui);
font-weight: 620;
letter-spacing: var(--track-tight);
color: var(--parchment);
line-height: 1.1;
margin: 0;
}
p { margin: 0 0 var(--s4); }
p:last-child { margin-bottom: 0; }
.wrap {
width: 100%;
max-width: calc(var(--wrap) + 2 * var(--gutter));
margin: 0 auto;
padding: 0 var(--gutter);
}
/* Micro label: the one small Franklin voice used for eyebrows, tags, nav, buttons. */
.eyebrow,
.tag,
.nav__links a,
.theme-toggle,
.btn,
.drawer__no,
.drawer__value,
.field label,
.form-note,
.block-note,
.skip-link,
.footer-seal__type,
.site-footer__nav a,
.site-footer__legalnav a,
.register__no,
.register__action,
.register__note,
.split__no,
.split__per,
.split__link,
.tier__no,
.tier__period,
.tier__specs dt,
.gen__label,
.gen__per,
.gen__rowlabel,
.legal--mono,
.legal--mark {
font-family: var(--ui);
font-weight: 500;
font-size: var(--t-micro);
line-height: 1.4;
letter-spacing: 0.08em;
text-transform: uppercase;
font-variant-numeric: tabular-nums;
}
.eyebrow {
color: var(--brass);
margin: 0 0 var(--s4);
display: inline-flex;
align-items: center;
gap: var(--s3);
}
/* A short brass rule leading the eyebrow: the lower-third station marker that opens
the register, drawn from the same brass as every rule on the page. */
.eyebrow::before {
content: "";
width: 26px;
height: 2px;
background: var(--brass);
flex: none;
}
.tag { color: var(--muted); }
.text-muted { color: var(--muted); }
/* ---- Skip link ----------------------------------------------------------- */
.skip-link {
position: absolute;
left: var(--s3);
top: -64px;
z-index: 20;
background: var(--brass);
color: #0b0d0c;
padding: var(--s2) var(--s4);
border-radius: var(--radius-sm);
text-decoration: none;
transition: top 0.15s ease;
}
.skip-link:focus { top: var(--s3); }
/* ---- Focus --------------------------------------------------------------- */
:focus-visible {
outline: 2px solid var(--focus);
outline-offset: 3px;
}
/* ---- Masthead ------------------------------------------------------------ */
.masthead {
/* Sticky glass. The double brass rule of a newspaper flag came out on 2026-09-12 with the
rest of the engraving: a header that sits over the page and lets it show through is the
single clearest signal that an interface is current. One hairline, one blur, nothing else.
position: sticky, not fixed, so it keeps its place in flow and nothing needs a matching
top padding. A later rule already sets position: relative on this element for the nav
panel; that rule is updated in the same pass rather than fought with a second override. */
position: sticky;
top: 0;
border-bottom: 1px solid var(--line-soft);
background: var(--glass-bg);
background-color: rgba(7, 8, 12, 0.72);
-webkit-backdrop-filter: blur(20px) saturate(1.4);
backdrop-filter: blur(20px) saturate(1.4);
z-index: 30;
}
/* The ground behind the blur is the only value here that cannot resolve through a token: it
has to be the page ground AT AN ALPHA, and a colour token carries no alpha. Stated once per
theme, beside each other, so they cannot drift. */
:root[data-theme="light"] .masthead { background-color: rgba(244, 245, 248, 0.74); }
.masthead__row {
display: flex;
align-items: center;
justify-content: flex-start;
gap: 24px;
min-height: var(--masthead);
}
.brand {
display: inline-flex;
align-items: center;
gap: 8px;
flex: 0 0 auto;
width: max-content;
max-width: max-content;
position: relative;
z-index: 1;
text-decoration: none;
color: var(--parchment);
}
.brand__seal {
width: 34px;
height: 34px;
flex: 0 0 34px;
object-fit: contain;
border-radius: 50%;
border: 1px solid var(--brass);
padding: 2px;
background: radial-gradient(circle at 50% 42%, rgba(216,184,120,0.16), transparent 70%);
}
.brand__name {
font-family: var(--ui);
font-weight: 600;
font-size: var(--t-body);
letter-spacing: 0.03em;
white-space: nowrap;
}
.nav {
display: flex;
align-items: center;
gap: 22px;
margin-left: auto;
flex: 0 0 auto;
position: relative;
z-index: 3;
}
.nav__links {
display: flex;
gap: 22px;
list-style: none;
margin: 0;
padding: 0;
}
.nav__links a {
text-decoration: none;
color: var(--muted);
padding: var(--s1) 0;
white-space: nowrap;
transition: color 0.15s ease;
}
.nav__links a:hover { color: var(--parchment); }
.nav__links a[aria-current="page"],
.nav__tab[aria-current="page"] {
color: var(--parchment);
border-bottom: 2px solid var(--brass);
}
/* Small controls take --radius-sm, not the 14px default: on a 34px-tall control the default
reads as a lozenge rather than as a softened rectangle. The skip link is the same case. */
.theme-toggle {
color: var(--parchment);
background: var(--btn-bg);
border: 1px solid var(--glass-line);
border-radius: var(--radius-sm);
padding: var(--s2) var(--s3);
cursor: pointer;
transition: border-color 0.15s ease;
}
.theme-toggle:hover { border-color: var(--brass); }
/* On a phone the brand is the home link; the Home item is redundant and does not fit. */
@media (max-width: 480px) {
.nav { gap: var(--s3); }
.nav__links { gap: var(--s3); }
/* `.nav__links li:first-child { display: none }` used to live here. It hid the "Home" link
when the nav was just Home and Sign In and the two would not fit. The nav now collapses
into the burger drawer below 1100px, so nothing needs hiding by position, and the rule was
actively harmful: the first item is now the Products tab, so on any screen under 480px it
deleted the main product menu outright. Found by tests/e2e-nav.mjs, which tapped a trigger
that had no layout box. Do not reintroduce a rule that hides a nav item by its position. */
.theme-toggle { padding: var(--s2); }
}
/* ---- Buttons ------------------------------------------------------------- */
.btn {
position: relative;
display: inline-block;
text-decoration: none;
padding: var(--s3) var(--s5);
border: 1px solid var(--btn-line);
border-radius: var(--radius-pill);
color: var(--parchment);
background: var(--btn-bg);
/* The secondary action is glass: it takes its fill from whatever is behind it rather than
from a flat panel colour, which is what stops a row of outlined buttons reading as a form
from 2012. -webkit- first, Safari still needs it. */
-webkit-backdrop-filter: blur(var(--glass-blur)) saturate(1.3);
backdrop-filter: blur(var(--glass-blur)) saturate(1.3);
cursor: pointer;
line-height: 1.4;
transition: border-color 220ms ease, color 220ms ease, background-color 220ms ease,
transform 220ms cubic-bezier(0.22, 1, 0.36, 1), box-shadow 220ms ease;
}
.btn:hover {
border-color: var(--btn-line-hover);
color: var(--brass-bright);
transform: translateY(-1px);
box-shadow: var(--glow-gold-soft);
}
.btn:active { transform: translateY(0); }
.btn[disabled] { opacity: 0.6; cursor: default; transform: none; box-shadow: none; }
.btn--brass {
/* THE ONE GILT ACTION ON A PAGE. It reads from the component tokens rather than mixing its
own gradient, which is what lets the light theme be served by the same rule: --metal-gold
runs bright on near-black and antique on parchment, and --btn-gilt-text follows it. The
hand-mixed version below it used to need a whole second block for light. */
background: var(--btn-gilt-bg);
color: var(--btn-gilt-text);
border-color: var(--btn-gilt-line);
font-weight: 600;
/* Stamped metal: a lit catch along the top, a seated shadow below. The pair is what reads
as struck rather than printed. */
box-shadow: inset 0 1px 0 rgba(255, 244, 214, 0.38), var(--glow-gold-soft);
/* No blur under an opaque gilt fill: it would cost a compositor layer to show nothing. */
-webkit-backdrop-filter: none;
backdrop-filter: none;
overflow: hidden;
}
/* A sheen that crosses the face on hover. One transform of one pseudo-element, which the
compositor handles without touching layout, and it is the only decorative motion on a
control anywhere in the system. */
.btn--brass::after {
content: "";
position: absolute;
top: 0;
bottom: 0;
left: -60%;
width: 45%;
background: linear-gradient(100deg, transparent, rgba(255, 252, 240, 0.42), transparent);
transform: translateX(0);
pointer-events: none;
}
.btn--brass:hover::after { animation: btn-sheen 720ms ease-out; }
@keyframes btn-sheen { to { transform: translateX(370%); } }
/* Hover keeps the TOKEN, not a fixed near-black. Without this the label went dark on a
gradient that runs dark in light theme, so hovering made it disappear. */
.btn--brass:hover {
color: var(--btn-gilt-text);
filter: brightness(1.06);
box-shadow: inset 0 1px 0 rgba(255, 244, 214, 0.45), var(--glow-gold);
}
.btn--brass[disabled]:hover { filter: none; }
.btn--brass[disabled]:hover::after { animation: none; }
/* No light-theme background override any more: --btn-gilt-bg and --btn-gilt-text both invert
with the theme, so one rule serves both. This block used to restate the whole button. */
/* ---- Section rhythm ------------------------------------------------------ */
/* Each section carries its own brass rule at the top edge of the content column.
Drawn by motion.css on reveal; painted full width here. */
.section {
position: relative;
padding: var(--pad-section) 0;
}
.section--compact { padding: var(--pad-compact) 0; }
.section::before {
content: "";
position: absolute;
top: 0;
left: max(var(--gutter), calc(50% - var(--wrap) / 2));
right: max(var(--gutter), calc(50% - var(--wrap) / 2));
height: 1px;
/* Engraved rule: a brass hairline that fades in from the gutters rather than
butting the edge, sitting on a thin dark groove so it reads as a line cut into
metal, not a border drawn on top of it. */
background: linear-gradient(90deg, transparent, var(--line) 8%, var(--line) 92%, transparent);
box-shadow: 0 1px 0 var(--edge-lo);
}
.hero + .section::before { display: none; }
.section-head { margin-bottom: var(--s5); }
.section-head .tag { display: block; margin-bottom: var(--s3); }
.section-head h2 {
font-size: var(--t-section);
line-height: 1.05;
letter-spacing: -0.02em;
max-width: 14ch;
}
.section-head__lead {
font-size: var(--t-lead);
line-height: 1.4;
color: var(--text);
margin: var(--s5) 0 0;
max-width: 34ch;
}
.section-head--row {
display: grid;
gap: var(--s5);
align-items: end;
}
/* The register grid: heading column beside the content column, from 900 up. */
.section__grid {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: var(--gap-col);
}
.section__grid .section-head { margin-bottom: 0; }
.section__body { min-width: 0; }
@media (min-width: 900px) {
.section__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: start; }
.section-head--row { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
.section-head--row .section-head__lead { margin: 0; max-width: 46ch; }
}
.prose { max-width: 62ch; }
.prose p { color: var(--text); }
.prose .btn { margin-top: var(--s1); }
/* Plain licensed-scope list on the Data page. Real parallel items, so a list earns its place;
square markers and a left rule keep it in the squared house style rather than a bullet grid. */
.datalist { max-width: 62ch; margin: var(--s3) 0 0; padding: 0; list-style: none; }
.datalist li {
color: var(--text);
padding: var(--s2) 0 var(--s2) var(--s4);
border-left: 2px solid var(--brass-deep);
margin-bottom: 1px;
}
.after-note { margin: var(--s5) 0 0; max-width: 62ch; }
/* ---- Hero: Option A, Stadium Night only ---------------------------------- */
.hero {
position: relative;
overflow: hidden;
isolation: isolate;
display: grid;
align-content: center;
min-height: calc(100vh - var(--masthead));
min-height: calc(100svh - var(--masthead));
padding: var(--pad-hero-top) 0 var(--pad-hero-bottom);
background: var(--bg);
border-bottom: 1px solid var(--line-soft);
}
.hero__media {
position: absolute;
inset: 0;
z-index: 0;
pointer-events: none;
overflow: hidden;
background: var(--bg);
}
/* THE PHOTOGRAPH IS GONE, 2026-09-12, AND THE CLASS NAMES ARE NOT.
.hero__stadium painted a night photograph of a stadium on fourteen pages: three
here and eleven in funded/public. Renaming the class would have meant editing all
fourteen in one commit to change one background, so the hook stayed and only what
it paints changed. The name is now a small lie about a light field rather than a
stadium, which is cheaper than the churn and is written down here.
The image file itself is deleted, and several tests assert its name appears nowhere in
the served tree, so this comment cannot spell it out either.
What replaces it is an aurora: three wide radial gradients, gold low and left where
the headline sits, cool blue high and right so the gold has something to be warm
against. It costs no request, it is sharp at any density, and it themes, which a
baked night photograph could not do (the light theme had to dim the photo and it
still read as night). */
.hero__stadium {
position: absolute;
inset: -10%;
background-color: var(--bg);
/* ALL OF IT LIVES ON THE RIGHT, because the left is where the headline is. The first cut put
the gold bloom at 22% and it was invisible: the readability scrim is opaque across the left
half by design, so the light was being painted underneath the very thing that hides light.
Caught by rendering it, not by reading it. */
background-image:
radial-gradient(42% 48% at 74% 56%, rgba(198, 160, 87, 0.4), transparent 68%),
radial-gradient(36% 42% at 88% 14%, rgba(230, 201, 124, 0.16), transparent 70%),
radial-gradient(58% 54% at 68% 38%, rgba(227, 193, 132, 0.12), transparent 74%);
filter: blur(26px);
}
/* Readability scrim. Softer than the old one, because there is no longer a
photograph underneath for the text to fight. */
.hero__scrim {
position: absolute;
inset: 0;
background:
linear-gradient(96deg, var(--bg) 0%, var(--bg) 30%, rgba(7, 8, 12, 0.72) 46%, rgba(7, 8, 12, 0.24) 60%, transparent 74%),
linear-gradient(180deg, transparent 62%, var(--bg) 100%);
}
.hero__inner { position: relative; z-index: 2; max-width: 40rem; }
/* Full-viewport page plate, used by every page that is not the home page. Fixed
rather than section-scoped, so the light field sits behind the whole scroll. */
.hero__media--page {
position: fixed;
inset: 0;
z-index: 0;
pointer-events: none;
overflow: hidden;
}
.hero__media--page .hero__stadium {
inset: -20%;
background-image:
radial-gradient(34% 34% at 78% 22%, rgba(198, 160, 87, 0.26), transparent 70%),
radial-gradient(30% 32% at 16% 10%, rgba(201, 169, 97, 0.10), transparent 72%);
}
.hero__media--page::after {
content: "";
position: absolute;
left: 0;
right: 0;
bottom: 0;
height: 34%;
background: linear-gradient(180deg, rgba(7, 8, 12, 0) 0%, var(--bg) 46%, var(--bg) 100%);
pointer-events: none;
}
/* THE SIMULATION FIELD. src/hero-field.js appends this canvas into [data-hero-media]
on the home page only, and removes it again if WebGL is unavailable or the visitor
asks for reduced motion. Everything above still paints underneath it, so the hero
is complete with the canvas absent: nothing here is load-bearing for readability. */
.hero__field {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
display: block;
opacity: 0;
transition: opacity 1200ms ease;
}
.hero__field.is-ready { opacity: 1; }
.hero--stadium .hero__title {
font-size: clamp(2.4rem, 4.4vw, 4rem);
max-width: 14ch;
line-height: 1.02;
}
.hero--stadium .hero__band { display: none; }
/* HUD cards: decorative, used inside mid-page Generator visual only. */
.hud-live {
display: flex;
align-items: center;
gap: 0.5rem;
margin: 0 0 var(--s3);
color: var(--brass);
font-family: var(--ui);
font-size: var(--t-micro);
letter-spacing: 0.16em;
text-transform: uppercase;
}
.hud-live__dot {
width: 0.45rem;
height: 0.45rem;
border-radius: 50%;
background: var(--brass-bright);
box-shadow: 0 0 10px var(--brass);
}
.hud-card {
background: rgba(23, 23, 23, 0.72);
border: 1px solid rgba(154, 139, 106, 0.45);
box-shadow: inset 0 1px 0 var(--edge-hi);
padding: var(--s3);
/* The -webkit- twin was missing here since the card was written, so Safari has never
blurred it and the HUD read as a flat wash on that browser alone. Found 2026-09-12 by
counting the two properties against each other in the design token test. */
-webkit-backdrop-filter: blur(6px);
backdrop-filter: blur(6px);
}
.hud-card--main { margin-bottom: var(--s3); }
.hud-card--ghost {
width: 72%;
margin-left: auto;
opacity: 0.72;
transform: translate(8%, -6%) rotate(3deg);
}
.hud-card__kicker {
margin: 0 0 var(--s3);
color: var(--brass);
font-family: var(--ui);
font-size: var(--t-micro);
letter-spacing: 0.16em;
text-transform: uppercase;
}
.hud-card__rows {
list-style: none;
margin: 0;
padding: 0;
display: grid;
gap: 0.55rem;
}
.hud-card__rows li {
display: grid;
grid-template-columns: 2.2rem 1fr;
align-items: center;
gap: var(--s3);
color: var(--muted);
font-family: var(--ui);
font-size: var(--t-micro);
letter-spacing: 0.08em;
}
.hud-card__rows i {
display: block;
height: 1px;
background: linear-gradient(90deg, var(--line), transparent);
}
.hud-card__line {
margin: 0;
color: var(--parchment);
font-family: var(--mono); font-variant-numeric: var(--nums);
font-size: var(--t-micro);
letter-spacing: 0.08em;
text-transform: uppercase;
}
/* The seal: the brand mark as engraved plate, clipped to its roundel, behind the
register at low contrast. Screened onto steel in the dark theme; in the light theme
the plate is inverted so the black ground drops out and the engraving prints in
brass on parchment. */
.hero__seal {
position: absolute;
z-index: 0;
pointer-events: none;
right: -38vw;
bottom: -18vw;
width: min(118vw, 780px);
aspect-ratio: 1 / 1;
border-radius: 50%;
overflow: hidden;
opacity: var(--seal-opacity);
mix-blend-mode: screen;
}
.hero__seal img {
width: 100%;
height: 100%;
object-fit: cover;
}
:root[data-theme="light"] .hero__seal {
mix-blend-mode: multiply;
}
:root[data-theme="light"] .hero__seal img {
filter: invert(1) hue-rotate(180deg) saturate(1.2);
}
/* SORA IS THE MARKETING VOICE, and it is rationed. This said "THE ONLY --brand ON THE
SITE" until 2026-09-15, when the homepage rebuild added four more: .shot__screen,
.howstep__name, .plan-card__n and .ref__name, all of them a single marketing line or a
price rather than a paragraph. Corrected rather than deleted, because the rule it was
protecting still holds: a voice used everywhere is just a font. Count the call sites
before you add the sixth. */
.hero__title {
font-family: var(--brand);
font-weight: 700;
font-size: var(--t-hero);
line-height: 1;
letter-spacing: -0.025em;
max-width: 18ch;
margin: 0;
}
.hero__tone { color: var(--brass); }
.hero__lede {
margin: var(--s4) 0 0;
max-width: 42ch;
color: var(--text);
}
.hero__chips {
display: flex;
flex-wrap: wrap;
gap: var(--s2);
margin-top: var(--s4);
}
/* The chip is the smallest surface on the site, which is why it gets --radius-xs rather than
the default: 14px on a 26px-tall pill is a lozenge, not a chip. The 3px gold bar down the
left came off with the rest of the engraving; the gold is the hairline now. */
.hero__chip {
display: inline-block;
border: 1px solid var(--glass-line);
border-radius: var(--radius-xs);
padding: var(--s1) var(--s3);
color: var(--muted);
background: var(--glass-bg);
-webkit-backdrop-filter: blur(var(--glass-blur));
backdrop-filter: blur(var(--glass-blur));
}
.hero__actions {
display: flex;
flex-wrap: wrap;
align-items: flex-start;
gap: var(--s3);
margin-top: var(--s6);
}
.hero__cta {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: var(--s2);
max-width: 22rem;
}
.hero__cta-note {
margin: 0;
color: var(--muted);
max-width: 28ch;
}
.hero--stadium .hero__seal { display: none; }
/* Email for later, on the hero. It was a solid brass slab with a black slot cut into it, and
it was the most dated object on the page: a flat gold rectangle reads as a 2010 call-to-action
no matter how good the gold is. It is now the same glass as every other raised surface, with
a gold-tinted edge and a gold bloom to keep it the loudest thing in the hero.
THE WHOLE INVERSION WENT WITH IT. The old plate needed literal colours in both themes (a brass
plate cannot read theme tokens without going dark in light mode) and a dark button, because a
brass button on a brass plate vanishes. On glass the ordinary gilt button is the right button,
so this component now has no colour of its own at all: every value below resolves through the
ramp and the theme handles itself. funded/tests/design-system.test.mjs keeps an exemption for
.hero__list that is now unused, and that is the correct direction for it to be unused in. */
.hero__list {
display: grid;
gap: var(--s3);
margin-top: var(--s5);
max-width: 34rem;
padding: var(--s5) var(--s5) var(--s4);
border: 1px solid rgba(198, 160, 87, 0.34);
border-radius: var(--radius-lg);
background: var(--glass-bg);
-webkit-backdrop-filter: blur(var(--glass-blur)) saturate(1.35);
backdrop-filter: blur(var(--glass-blur)) saturate(1.35);
box-shadow: var(--glass-shadow), var(--glow-gold-soft);
}
.hero__list-label {
color: var(--text);
font-weight: 600;
max-width: 44ch;
}
.hero__list-row {
display: flex;
flex-wrap: wrap;
gap: var(--s2);
}
.hero__list-row input {
flex: 1 1 14rem;
min-width: 0;
font-family: var(--body);
font-size: var(--t-body);
color: var(--text);
background: var(--field-bg);
border: 1px solid var(--field-line);
border-radius: var(--radius-pill);
padding: var(--s3) var(--s5);
transition: border-color 200ms ease, box-shadow 200ms ease;
}
.hero__list-row input::placeholder { color: var(--muted); }
.hero__list-row input:focus-visible {
outline: none;
border-color: var(--gold-bright);
box-shadow: var(--field-focus-ring);
}
.hero__list .form-note:empty { display: none; }
.badge-soon {
display: inline-block;
margin-left: var(--s2);
padding: 0.15em 0.55em;
border: 1px solid var(--line);
color: var(--brass);
font-family: var(--ui);
font-size: 0.68rem;
letter-spacing: 0.12em;
text-transform: uppercase;
vertical-align: middle;
}
.hero__funded {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: var(--s2);
}
.hero__funded .btn { align-self: flex-start; }
/* ---- Mid-page ads + Option B grid, never on the hero --------------------- */
.ad-block {
position: relative;
isolation: isolate;
overflow: hidden;
border-bottom: 1px solid var(--line-soft);
}
.ad-block__in {
position: relative;
z-index: 1;
display: grid;
gap: var(--s7);
}
@media (min-width: 900px) {
.ad-block__in {
grid-template-columns: minmax(18rem, 1.15fr) minmax(14rem, 0.85fr);
align-items: center;
}
.ad-block--compact .ad-block__in { grid-template-columns: 1fr; }
}
.ad-block__price {
margin: 0;
color: var(--brass);
font-family: var(--mono); font-variant-numeric: var(--nums);
font-weight: 600;
}
.ad-block__actions {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--s3);
margin-top: var(--s5);
}
.ad-block__visual {
display: none;
pointer-events: none;
max-width: 20rem;
justify-self: end;
}
@media (min-width: 900px) {
.ad-block__visual { display: block; }
}
.atmos {
position: absolute;
inset: 0;
z-index: 0;
pointer-events: none;
overflow: hidden;
}
.atmos-grid {
position: absolute;
inset: 0;
background-image:
linear-gradient(rgba(154, 139, 106, 0.08) 1px, transparent 1px),
linear-gradient(90deg, rgba(154, 139, 106, 0.08) 1px, transparent 1px);
background-size: 48px 48px;
mask-image: linear-gradient(180deg, transparent, rgba(0,0,0,0.55) 35%, rgba(0,0,0,0.25) 80%, transparent);
-webkit-mask-image: linear-gradient(180deg, transparent, rgba(0,0,0,0.55) 35%, rgba(0,0,0,0.25) 80%, transparent);
opacity: 0.7;
}
.atmos-grid::after {
content: "";
position: absolute;
left: 6%;
right: 6%;
bottom: 0;
height: 58%;
background-image:
linear-gradient(rgba(184, 166, 124, 0.12) 1px, transparent 1px),
linear-gradient(90deg, rgba(184, 166, 124, 0.12) 1px, transparent 1px);
background-size: 56px 28px;
transform: perspective(520px) rotateX(58deg);
transform-origin: 50% 100%;
mask-image: linear-gradient(180deg, transparent, rgba(0,0,0,0.7) 40%, transparent);
-webkit-mask-image: linear-gradient(180deg, transparent, rgba(0,0,0,0.7) 40%, transparent);
}
.atmos-grid--light { opacity: 0.4; }
:root[data-theme="light"] .atmos-grid { opacity: 0.35; }
/* ---- Rewards hub: tote board + two unequal lanes ------------------------- */
.rewards-hub {
position: relative;
z-index: 1;
}
.rewards-board {
margin-top: var(--s6);
padding: var(--s5);
border: 1px solid var(--line);
border-left: 4px solid var(--brass);
background: var(--panel);
}
.rewards-board__kicker,
.rewards-lane__kicker {
margin: 0 0 var(--s2);
color: var(--brass);
font-family: var(--ui);
font-size: var(--t-micro);
letter-spacing: 0.14em;
text-transform: uppercase;
}
.rewards-board__name,
.rewards-lane__name {
margin: 0 0 var(--s3);
font-size: var(--t-product);
line-height: 1.15;
letter-spacing: -0.02em;
}
.rewards-board p,
.rewards-lane p {
margin: 0;
max-width: 52ch;
color: var(--text);
}
.rewards-board__floors {
list-style: none;
margin: var(--s5) 0 0;
padding: 0;
display: grid;
gap: 0;
border-top: 1px solid var(--line);
}
.rewards-board__floors li {
display: flex;
justify-content: space-between;
align-items: baseline;
gap: var(--s3);
padding: var(--s3) 0;
border-bottom: 1px solid var(--line-soft);
font-family: var(--ui);
font-variant-numeric: tabular-nums;
}
.rewards-board__floors span { color: var(--muted); }
.rewards-board__floors strong {
color: var(--parchment);
font-weight: 600;
}
@media (min-width: 720px) {
.rewards-board__floors {
grid-template-columns: repeat(4, 1fr);
gap: var(--s4);
border-top: 0;
}
.rewards-board__floors li {
flex-direction: column;
align-items: flex-start;
padding: var(--s3) 0 0;
border-bottom: 0;
border-top: 1px solid var(--line);
}
}
.rewards-lanes {
display: grid;
gap: var(--s6);
margin-top: var(--s7);
}
@media (min-width: 900px) {
.rewards-lanes {
grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
align-items: start;
}
}
.rewards-lane {
padding-top: var(--s4);
border-top: 1px solid var(--line);
}
.rewards-lane--coins {
padding-left: 0;
}
@media (min-width: 900px) {
.rewards-lane--coins {
padding-left: var(--s6);
padding-top: 0;
border-top: 0;
border-left: 1px solid var(--line);
}
}
.simcoins-claim {
margin-top: var(--s4);
}
.simcoins-claim__balance {
margin: 0 0 var(--s3);
font-family: var(--mono); font-variant-numeric: var(--nums);
font-weight: 600;
font-size: var(--t-lead);
font-variant-numeric: tabular-nums;
color: var(--brass-bright);
}
.simcoins-claim__note {
margin: 0 0 var(--s3);
color: var(--muted);
}
.simcoins-claim[data-busy] .btn { pointer-events: none; opacity: 0.6; }
/* /rewards and /referrals Stadium Night plate. Same still and scrim as
the live homepage. Stacking keeps chrome above the fixed plate. */
.page-rewards,
.page-referrals {
background: #0a0a0a;
}
.page-rewards .masthead,
.page-rewards main,
.page-rewards .site-footer,
.page-referrals .masthead,
.page-referrals main,
.page-referrals .site-footer {
position: relative;
z-index: 1;
}
.page-rewards .masthead,
.page-referrals .masthead {
background: linear-gradient(180deg, rgba(20, 20, 20, 0.88), rgba(10, 10, 10, 0.72));
}
.page-rewards .site-footer,
.page-referrals .site-footer {
background: rgba(10, 10, 10, 0.82);
}
.hero--rewards {
min-height: auto;
padding: var(--pad-hero-top) 0 var(--pad-compact);
background: transparent;
border-bottom: 0;
box-shadow: none;
}
.hero--rewards .hero__title {
color: var(--parchment);
max-width: 16ch;
}
.hero--rewards .hero__lede {
color: var(--brass-bright);
max-width: 38ch;
}
.claim-stage {
margin-top: var(--s6);
padding: var(--s5);
max-width: 28rem;
background: rgba(15, 15, 15, 0.78);
border: 1px solid var(--line);
border-left: 4px solid var(--brass);
}
.claim-stage__kicker {
margin: 0 0 var(--s3);
color: var(--brass);
font-family: var(--ui);
font-size: var(--t-micro);
letter-spacing: 0.14em;
text-transform: uppercase;
}
.simcoins-claim[data-state="loading"] .simcoins-claim__balance {
letter-spacing: 0.12em;
color: var(--muted);
}
.simcoins-claim[data-state="error"] .simcoins-claim__note {
color: var(--muted);
}
/* Mobile Social tab is 44px on the right edge. Keep rewards titles out of it. */
@media (max-width: 859px) {
.page-rewards .hero__title,
.page-rewards .section-head h2,
.page-referrals .hero__title,
.page-referrals .section-head h2 {
padding-right: calc(var(--sf-rail-tab) + 8px);
}
}
:root[data-theme="light"] .rewards-board__floors strong { color: var(--text); }
:root[data-theme="light"] .simcoins-claim__balance { color: var(--brass); }
.register__name .badge-soon { margin-left: var(--s3); vertical-align: 0.15em; }
/* On a phone the text sits over the middle of the field, not beside it, so the scrim
goes vertical. Both stops are the theme's ground, never a baked black: a hard-coded
black band tracked the viewport across every light-theme page before this. */
@media (max-width: 699px) {
.hero__scrim {
background: linear-gradient(180deg, rgba(7, 8, 12, 0.82) 0%, rgba(7, 8, 12, 0.62) 48%, var(--bg) 100%);
}
:root[data-theme="light"] .hero__scrim {
background: linear-gradient(180deg, rgba(244, 245, 248, 0.86) 0%, rgba(244, 245, 248, 0.7) 48%, var(--bg) 100%);
}
}
:root[data-theme="light"] .hero {
background: var(--bg);
}
/* The aurora is built for a dark ground. On the light one the same gradients at full
strength turn the page into a bruise, so it is dialled back and its blue stop is
dropped by the lower opacity rather than by a second gradient stack to maintain. */
:root[data-theme="light"] .hero__stadium {
opacity: 0.5;
}
:root[data-theme="light"] .hero__scrim {
background:
linear-gradient(96deg, var(--bg) 0%, var(--bg) 30%, rgba(244, 245, 248, 0.78) 46%, rgba(244, 245, 248, 0.32) 60%, transparent 74%),
linear-gradient(180deg, transparent 62%, var(--bg) 100%);
}
/* The fixed page plate's bottom fade takes the theme's ground, not a baked black: in the
light theme a black band tracked the viewport across every product page. */
/* HUD cards are charcoal glass in the dark theme; in the light theme they take the light
ground's glass, so the figure stays readable on the pale plate. */
:root[data-theme="light"] .hud-card {
background: rgba(255, 255, 255, 0.78);
}
:root[data-theme="light"] .hero__media--page::after {
background: linear-gradient(180deg, rgba(232, 228, 216, 0) 0%, var(--bg) 42%, var(--bg) 100%);
}
/* The register: two ruled rows, one per product. Rules are ::before hairlines so
motion.css can draw them. */
.register {
display: grid;
gap: var(--gap-row);
margin-top: var(--s7);
}
.register__row {
position: relative;
display: grid;
grid-template-columns: auto minmax(0, 1fr);
grid-template-areas:
"no name"
"line line"
"action action";
column-gap: var(--s4);
row-gap: var(--s2);
padding: var(--s4) 0 var(--s2);
}
.register__row::before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
height: 1px;
background: var(--brass);
opacity: 0.6;
}
.register__no {
grid-area: no;
color: var(--muted);
align-self: start;
padding-top: 0.45em;
}
.register__name {
grid-area: name;
font-size: var(--t-product);
line-height: 1.1;
letter-spacing: -0.015em;
}
.register__line {
grid-area: line;
margin: 0;
color: var(--text);
max-width: 44ch;
}
.register__action {
grid-area: action;
justify-self: start;
color: var(--brass);
text-decoration: none;
padding: var(--s1) 0;
border-bottom: 1px solid var(--line);
}
.register__action:hover { color: var(--brass-bright); border-color: var(--brass-bright); }
.register__note {
color: var(--muted);
margin: var(--s5) 0 0;
}
@media (min-width: 900px) {
.hero__actions { margin-top: var(--s7); }
.hero__seal {
right: -10vw;
bottom: auto;
top: 40%;
transform: translateY(-50%);
width: min(56vw, 860px);
}
.register {
grid-template-columns: 1fr 1fr;
gap: var(--gap-col);
margin-top: var(--s8);
}
.register__row { padding: var(--s5) 0 var(--s3); }
.register__note { text-align: right; }
}
/* ---- Safe-deposit drawer rows ------------------------------------------- */
.drawers { display: flex; flex-direction: column; gap: var(--s2); }
.drawer {
display: grid;
grid-template-columns: 40px 1fr auto;
align-items: center;
gap: var(--s4);
background: linear-gradient(180deg, var(--panel-2), var(--panel));
border: 1px solid var(--line);
border-left: 4px solid var(--brass);
border-radius: var(--radius);
padding: var(--s4);
/* A machined drawer face: a thin lit edge along the top, a shadow underneath. */
box-shadow: inset 0 1px 0 var(--edge-hi), 0 1px 2px var(--shadow);
transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.drawer:hover {
border-color: var(--brass);
box-shadow: inset 0 1px 0 var(--edge-hi), 0 2px 8px var(--shadow);
}
.drawer__no { color: var(--muted); }
.drawer__label {
font-family: var(--ui);
font-weight: 500;
font-size: var(--t-body);
color: var(--parchment);
}
.drawer__value {
color: var(--brass-bright);
text-align: right;
}
:root[data-theme="light"] .drawer__value { color: var(--brass); }
/* ---- Forms --------------------------------------------------------------- */
.form {
display: grid;
gap: var(--s4);
max-width: 480px;
background: linear-gradient(180deg, var(--panel-2), var(--panel));
border: 1px solid var(--line);
border-radius: var(--radius);
padding: var(--s5);
box-shadow: inset 0 1px 0 var(--edge-hi), 0 2px 6px var(--shadow);
}
.field { display: grid; gap: var(--s2); }
.field label { color: var(--muted); }
.field input {
font-family: var(--ui);
font-size: var(--t-body);
color: var(--text);
background: var(--field-bg);
border: 1px solid var(--field-line);
border-radius: var(--radius);
padding: var(--s3) var(--s4);
/* Recessed slot: the input is cut into the raised plate around it. */
box-shadow: inset 0 1px 2px var(--edge-lo);
transition: border-color 0.15s ease;
}
.field input:focus-visible {
outline: 2px solid var(--focus);
outline-offset: 1px;
border-color: var(--brass);
}
/* ---- Date of birth: three dials in one machined plate ------------------------
Replaces , which on a phone opened parked on today and made
every visitor scroll back through their whole life to reach their birth year.
Month, day and year are three separate