/* ============================================================ WORLD CUP — A Visual History of Every Champion Design tokens. Inspired by The Pudding's editorial system. ============================================================ */ :root { /* ---- Canvas & ink — DARK "Observatory" night-sky system --- */ --paper: #121419; /* deep navy-black, page ground */ --paper-2: #181B22; /* sunken panel / strip / colophon */ --paper-3: #20242D; /* hairline fills, chip hover */ --ink: #EAE7DE; /* primary text — warm cream */ --ink-2: #A6ACB8; /* secondary text, cool */ --ink-3: #777D89; /* muted / metadata */ --rule: rgba(234,231,222,0.13); /* translucent rules */ /* ---- Brand: the trophy (the "golden sun") ---------------- */ --gold: #C9A24B; /* trophy gold — flagship accent */ --gold-deep: #D8B05C; /* brighter on dark — text/links */ --gold-soft: rgba(201,162,75,0.14); /* translucent wash */ --pitch: #2FA866; /* brighter pitch green for dark */ /* ---- Nation accents (flag-derived, tuned for dark) ------- */ --na-uruguay: #5BA0E0; --na-italy: #2E97E0; --na-germany: #B9BEC9; /* slate silver (black is invisible)*/ --na-brazil: #1B9E55; --na-england: #C8102E; --na-argentina: #6CA8DC; --na-france: #5B79D6; --na-spain: #C60B1E; /* ---- Type ------------------------------------------------- */ --font-cjk-serif: "Songti SC","STSong","Source Han Serif SC","Noto Serif SC",serif; --font-cjk-sans: "PingFang SC","Hiragino Sans GB","Source Han Sans SC","Noto Sans SC",sans-serif; --font-display: "Archivo", "Helvetica Neue", Arial, sans-serif, var(--font-cjk-sans); --font-serif: "Source Serif 4", Georgia, "Times New Roman", serif, var(--font-cjk-serif); --font-mono: "Space Mono", ui-monospace, "SFMono-Regular", monospace, var(--font-cjk-sans); /* fluid type scale */ --t-mega: clamp(4.5rem, 16vw, 15rem); /* giant year */ --t-h1: clamp(2.4rem, 6vw, 4.5rem); --t-h2: clamp(1.8rem, 4vw, 3rem); --t-h3: clamp(1.25rem, 2.4vw, 1.7rem); --t-lead: clamp(1.15rem, 1.6vw, 1.45rem); --t-body: clamp(1.02rem, 1.2vw, 1.18rem); --t-small: 0.82rem; --t-micro: 0.7rem; /* ---- Spacing & rhythm ------------------------------------ */ --sp-1: 0.5rem; --sp-2: 1rem; --sp-3: 1.5rem; --sp-4: 2.5rem; --sp-5: 4rem; --sp-6: 6rem; --sp-7: 9rem; --maxw: 1180px; --measure: 38rem; /* readable narrative width */ --radius: 3px; --ease: cubic-bezier(0.22, 0.61, 0.36, 1); /* current nation accent — set per-section by JS */ --accent: var(--gold-deep); } /* ---- Reset ------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } /* overflow-x:clip on prevents sideways scroll WITHOUT promoting to a phantom scroll container (which would break programmatic scrolling). */ html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; overflow-x: clip; } body { margin: 0; /* layered radial night-sky ground, matching home-stars */ background: radial-gradient(120% 90% at 50% 6%, #181a22 0%, var(--paper) 55%, #0c0e13 100%) fixed; color: var(--ink); font-family: var(--font-serif); font-size: var(--t-body); line-height: 1.6; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } /* Chinese reading: prefer the CJK serif, looser rhythm for legibility. */ html[lang="zh"] .narr, html[lang="zh"] .band p, html[lang="zh"] .dek, html[lang="zh"] .dna-blurb, html[lang="zh"] .r26-blurb, html[lang="zh"] .ask-ai-text { font-family: var(--font-cjk-serif); line-height: 1.85; letter-spacing: .01em; } img, svg { display: block; max-width: 100%; } a { color: inherit; } h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 700; line-height: 1.02; margin: 0; letter-spacing: -0.01em; } /* utility: the small mono "kicker" label used throughout */ .kicker { font-family: var(--font-mono); font-size: var(--t-micro); letter-spacing: 0.22em; text-transform: uppercase; color: var(--ink-3); } ::selection { background: rgba(201,162,75,0.30); color: var(--ink); } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } * { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; } }