/* Page styles for build-a-theme.html, lifted out of the document 2026-08-31.
No inline CSS anywhere on this site: the owner's rule, and it is the
right one. An inline block cannot be cached, cannot be shared between
pages, and cannot be covered by a content-security policy. */
/* ---- ONTO THE IMPULSE CART SYSTEM ----------------------------------------
This page was built in the old Nova White system: white paper, Geist, and a
#2563eb blue. It now loads css/styles.css first and keeps only its own
page-specific layout below.
The old token NAMES are kept, pointed at the shared ones. That is deliberate:
re-pointing ten variables changes the whole page correctly in one place,
whereas find-and-replacing the names across two hundred rules is where the
misses happen. Nothing below this block had to be touched. */
:root{
--line:var(--hair);
--line-2:var(--hair);
--raise:var(--frost-tint);
--accent:var(--violet);
--accent-ink:var(--frost-em);
--accent-soft:var(--frost-wash);
--shadow:var(--shadow-sm);
--btn-hover-scale:1.02;
--ok:var(--green-ink); --ok-soft:var(--green-soft);
--err:#f08a8a; --err-soft:rgba(240,138,138,.10);
}
:root[data-theme="light"]{
--err:#b91c1c; --err-soft:#fef2f2;
}
/* ---- The code plate --------------------------------------------------------
--code-bg, --code-ink and --code-line lived in this page's own :root block,
which went when the page was rebased onto the shared stylesheet. Undefined,
var() falls back to nothing: the plate lost its dark background and went
white, while the syntax colours stayed the ones chosen for a dark plate.
Pale blue on white measured 1.86:1 and pale green 1.23:1 - the code was
effectively invisible, which is what the owner was looking at.
DELIBERATELY DARK IN BOTH THEMES. A code sample is a quotation from
somewhere else, and keeping the plate dark on a light page says so at a
glance. It is also what every developer already expects, and it means one
set of syntax colours is correct everywhere instead of two that can drift
apart. Every value below is measured against the plate: the lowest is the
comment grey at 5.5:1. */
:root, :root[data-theme="light"]{
--code-bg:#101010;
--code-ink:#e4e4e4;
--code-line:rgba(228,228,228,.20);
}
/* Bar controls: same 42px height and 12px radius as index.html. */
/* Mobile nav. Hamburger matches the theme button beside it. */
/* Fixed, not absolute: the bar's backdrop-filter makes a containing block,
so an absolute panel would be clipped by it. */
/* border:0 matters: the page-wide `a` rule underlines every link. */
/* The links above leave for the home page; the ones below are sibling pages.
A hairline keeps the two kinds from reading as one flat list. */
@media (prefers-reduced-motion: reduce) {
}
/* The bar CTA is dropped with the links: brand + theme + hamburger already
fill a 360px viewport. The same CTA sits at the foot of the menu. */
/* Hero */
.hero { max-width:1180px; margin:0 auto; padding:78px 26px 40px; }
.hero .kicker { display:inline-block; font-size:13px; font-weight:600; letter-spacing:.02em; color:var(--accent-ink); background:var(--accent-soft); padding:5px 13px; border-radius:999px; }
.hero h1 { font-size:clamp(2.3rem, 1.4rem + 3.6vw, 4rem); line-height:1.03; letter-spacing:-.035em; color:var(--ink); margin:20px 0 0; font-weight:750; max-width:16ch; text-wrap:balance; }
.hero p.lede { font-size:clamp(1.1rem, 1rem + .5vw, 1.35rem); color:var(--muted); margin:20px 0 0; max-width:62ch; }
.hero .facts { display:flex; flex-wrap:wrap; gap:10px 28px; margin-top:30px; }
.hero .facts .f { display:flex; align-items:baseline; gap:9px; }
.hero .facts .n { font-weight:750; color:var(--ink); font-size:1.15rem; letter-spacing:-.02em; }
.hero .facts .l { color:var(--muted); font-size:.95rem; }
/* Layout */
.layout { display:grid; grid-template-columns:236px minmax(0,1fr); gap:56px; align-items:start; }
@media (max-width:940px) { .layout { grid-template-columns:1fr; gap:0; } }
nav.toc { position:sticky; top:74px; align-self:start; max-height:calc(100vh - 96px); overflow:auto; padding:28px 0 40px; }
nav.toc .lbl { font-size:12px; letter-spacing:.07em; text-transform:uppercase; color:var(--muted); font-weight:650; margin:0 0 12px; }
nav.toc ol { list-style:none; margin:0; padding:0; counter-reset:t; }
nav.toc a { display:flex; gap:10px; padding:6px 11px; border-radius:8px; color:var(--muted); text-decoration:none; font-size:14px; line-height:1.4; transition:background .12s,color .12s; }
nav.toc a::before { counter-increment:t; content:counter(t,decimal-leading-zero); color:var(--faint); font-variant-numeric:tabular-nums; }
nav.toc a:hover { color:var(--ink); background:var(--surface); }
nav.toc a.on { color:var(--ink); background:var(--accent-soft); font-weight:600; }
nav.toc a.on::before { color:var(--accent); }
.tocm { display:none; }
@media (max-width:940px) {
nav.toc { display:none; }
.tocm { display:block; margin:20px 0 4px; border:1px solid var(--line); border-radius:12px; background:var(--raise); overflow:hidden; }
.tocm summary { cursor:pointer; padding:14px 17px; font-weight:600; color:var(--ink); list-style:none; }
.tocm summary::-webkit-details-marker { display:none; }
.tocm summary::after { content:"\25B8"; float:right; color:var(--muted); transition:transform .15s; }
.tocm[open] summary::after { transform:rotate(90deg); }
.tocm ol { list-style:none; margin:0; padding:4px 9px 12px; }
.tocm a { display:block; padding:8px 11px; color:var(--body); text-decoration:none; font-size:15px; border-radius:8px; }
}
main { padding:20px 0 100px; min-width:0; }
main section { max-width:78ch; padding-top:44px; margin-top:44px; border-top:1px solid var(--line-2); scroll-margin-top:82px; }
main section:first-of-type { border-top:0; margin-top:14px; padding-top:16px; }
main h2 { font-size:1.7rem; line-height:1.15; letter-spacing:-.028em; color:var(--ink); font-weight:700; margin:0 0 12px; text-wrap:balance; }
main h2 .n { color:var(--faint); font-weight:650; font-variant-numeric:tabular-nums; margin-right:14px; }
main h3 { font-size:1.12rem; letter-spacing:-.014em; color:var(--ink); font-weight:650; margin:34px 0 6px; }
main h3 code { font-size:.82em; }
main p { margin:0 0 15px; max-width:72ch; text-wrap:pretty; }
main ul { margin:0 0 16px; padding-left:22px; }
main li { margin:0 0 8px; max-width:70ch; }
main li::marker { color:var(--faint); }
main strong { color:var(--ink); font-weight:650; }
main a { color:var(--accent-ink); text-decoration:none; border-bottom:1px solid color-mix(in srgb, var(--accent) 32%, transparent); }
main a:hover { border-bottom-color:var(--accent); }
main code { font-family:'Geist Mono', ui-monospace, Consolas, monospace; font-size:.85em; background:var(--surface); border:1px solid var(--line-2); border-radius:6px; padding:1.5px 6px; color:var(--ink); }
main pre { margin:8px 0 22px; padding:18px 20px; background:var(--code-bg); border:1px solid var(--code-line); border-radius:14px; overflow-x:auto;
box-shadow:inset 0 0 0 1px rgba(228,228,228,.06), 0 2px 10px rgba(19,19,19,.10); }
main pre code { font-family:'Geist Mono', ui-monospace, Consolas, monospace; font-size:13.5px; line-height:1.7; background:none; border:0; padding:0; color:var(--code-ink); white-space:pre; }
main pre .c { color:#8a8a8a; } /* comment 5.5:1 */
main pre .k { color:#6FC3E8; } /* key/token 9.7:1 */
main pre .v { color:#8FE3C6; } /* value 12.7:1 */
.tablewrap { margin:8px 0 22px; border:1px solid var(--line); border-radius:14px; overflow-x:auto; box-shadow:var(--shadow); background:var(--raise); }
main table { border-collapse:collapse; width:100%; font-size:15px; min-width:560px; }
main th, main td { text-align:left; padding:11px 16px; vertical-align:top; border-bottom:1px solid var(--line-2); }
thead th { background:var(--surface); color:var(--ink); font-weight:650; font-size:13.5px; border-bottom:1px solid var(--line); }
tbody tr:last-child td { border-bottom:0; }
main td:first-child code, main td:first-child { white-space:nowrap; }
main td .role { color:var(--body); }
main td.val { color:var(--muted); }
main td.val code { color:var(--ink); }
main td.val .d { color:var(--accent-ink); font-weight:600; }
.grp { display:block; margin:22px 0 -4px; font-size:12px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); }
.note { max-width:78ch; margin:8px 0 22px; padding:17px 20px; border:1px solid var(--line); border-radius:14px; background:var(--surface); }
.note.accent { background:var(--accent-soft); border-color:color-mix(in srgb, var(--accent) 26%, var(--line)); }
.note p { margin:0; color:var(--ink); }
.note p + p { margin-top:8px; }
.note .tag { display:block; font-size:12px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:var(--muted); margin-bottom:6px; }
.note.accent .tag { color:var(--accent-ink); }
.cols { display:grid; grid-template-columns:1fr 1fr; gap:20px; margin:8px 0 8px; }
@media (max-width:620px) { .cols { grid-template-columns:1fr; } }
.cta { max-width:78ch; margin-top:52px; padding:32px 30px; border:1px solid var(--line); border-radius:18px; background:var(--surface); box-shadow:var(--shadow); }
.cta h2 { border:0; margin:0 0 8px; padding:0; }
.cta p { color:var(--muted); }
@media (prefers-reduced-motion: reduce) { .btn:hover { transform:none; } }
/* Only the gap above the footer is this page's business now; the footer
itself is the shared one. */
footer { margin-top:60px; }
@media print {
.nav, nav.toc, .tocm, .theme-btn, .cta, .nav-menu, .nav-scrim { display:none !important; }
body { background:#fff; color:#111; font-size:11pt; }
.layout { grid-template-columns:1fr; } pre { box-shadow:none; }
}
/* ---- WHERE THIS PAGE DIFFERS FROM THE HOME PAGE ------------------------
The home page owns .hero and centres it, because its hero is a single
statement addressed at everyone. This one is a reference document: it
is read left to right down a column, so a centred heading over
left-aligned prose would set the reader off at the wrong margin. Stated
explicitly rather than inherited by accident, because the shared rule is
right for the page it was written for. */
.hero { text-align:left; }
.hero h1 { max-width:20ch; }