/* Stylesheet for statically generated content pages. Kept deliberately standalone: content pages must render fully without the React bundle so crawlers (and users with JS off) get the real page. SCOPING: every element-level rule and every custom property is scoped under .cp. This stylesheet is also linked from the SPA shell (index.html) for the site header and the homepage content block, and unscoped `body` / `a` / `h1` / `:root` rules would otherwise cascade into the React app and override src/styles/globals.css. Apply .cp to: - on generated content pages - #home-header, #home-content on the SPA homepage */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } .cp { --bg-primary: #09090b; --bg-secondary: #111115; --bg-card: #18181b; --bg-elevated: #222228; --text-primary: #fafafa; --text-secondary: #a1a1aa; --text-muted: #71717a; --text-dim: #52525b; --accent-gold: #d4a843; --accent-gold-dim: rgba(212, 168, 67, 0.14); --accent-green: #22c55e; --accent-red: #ef4444; --border-subtle: rgba(255, 255, 255, 0.06); --border-medium: rgba(255, 255, 255, 0.1); --radius-sm: 5px; --radius-md: 8px; --wrap: 880px; font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif; font-size: 16px; line-height: 1.65; color: var(--text-primary); } body.cp { background: var(--bg-primary); -webkit-font-smoothing: antialiased; } /* Default link colour for prose links. NOTE: `.cp a` has higher specificity than a bare `.classname`, so any component that is rendered as an (.brand, .card, .chip, .btn) must scope its colour under `.cp` too, otherwise this rule wins and the component renders gold. */ .cp a { color: var(--accent-gold); text-decoration: none; } .cp a:hover { text-decoration: underline; } /* ---------- Header / nav ---------- */ .site-header { border-bottom: 1px solid var(--border-subtle); background: rgba(9, 9, 11, 0.96); position: sticky; top: 0; z-index: 50; backdrop-filter: blur(8px); } .site-header-inner { max-width: 1140px; margin: 0 auto; padding: 0 20px; display: flex; align-items: center; gap: 20px; flex-wrap: wrap; min-height: 60px; } .cp .brand { display: flex; align-items: baseline; gap: 7px; font-weight: 900; letter-spacing: 0.02em; color: var(--text-primary); font-size: 15px; white-space: nowrap; } .cp .brand:hover { text-decoration: none; } .brand-mark { color: var(--accent-gold); } /* Year switcher. Palette matches the app-side YearPicker so the two read as one system: active is gold on near-black, inactive is muted grey. Real anchors, never JS, so it works in the static pages and for crawlers. */ .year-switcher { display: flex; align-items: center; gap: 4px; padding: 3px; border: 1px solid var(--border-subtle); border-radius: 999px; background: var(--bg-card); } .year-switcher-label { font-size: 9.5px; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-dim); padding: 0 7px 0 9px; } .cp .year-link { padding: 5px 12px; border-radius: 999px; font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--text-secondary); line-height: 1.2; } .cp .year-link:hover { color: var(--text-primary); text-decoration: none; } .cp .year-link-active { background: var(--accent-gold); color: #09090b; } .cp .year-link-active:hover { background: #e2ba55; color: #09090b; } .site-nav { display: flex; gap: 4px; flex-wrap: wrap; margin-left: auto; } .cp .site-nav a { color: var(--text-secondary); font-size: 13px; font-weight: 600; letter-spacing: 0.03em; padding: 7px 11px; border-radius: var(--radius-sm); white-space: nowrap; } .cp .site-nav a:hover { color: var(--text-primary); background: var(--bg-card); text-decoration: none; } .cp .site-nav a[aria-current="page"] { color: var(--accent-gold); background: var(--accent-gold-dim); } /* Outranks `.cp .site-nav a` (and its :hover) on class count, so no !important. */ .cp .site-nav .nav-cta { background: var(--accent-gold); color: #000; font-weight: 800; } .cp .site-nav .nav-cta:hover { background: #e2ba55; color: #000; } /* ---------- Layout ---------- */ .wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 20px; } .wrap-wide { max-width: 1140px; margin: 0 auto; padding: 0 20px; } .cp main { padding: 28px 0 64px; } .breadcrumbs { font-size: 12.5px; color: var(--text-dim); margin-bottom: 22px; letter-spacing: 0.02em; } .cp .breadcrumbs a { color: var(--text-muted); } .breadcrumbs span { margin: 0 7px; color: var(--text-dim); } .eyebrow { font-size: 11px; font-weight: 800; letter-spacing: 0.2em; color: var(--accent-gold); text-transform: uppercase; margin-bottom: 10px; } .cp h1 { font-size: 38px; line-height: 1.15; font-weight: 900; letter-spacing: -0.02em; margin-bottom: 14px; } .standfirst { font-size: 18px; color: var(--text-secondary); line-height: 1.6; margin-bottom: 10px; max-width: 68ch; } .byline { font-size: 12.5px; color: var(--text-dim); padding-bottom: 22px; margin-bottom: 26px; border-bottom: 1px solid var(--border-subtle); } .cp h2 { font-size: 25px; font-weight: 800; letter-spacing: -0.01em; margin: 40px 0 14px; padding-top: 6px; } .cp h3 { font-size: 18px; font-weight: 700; margin: 28px 0 10px; color: var(--text-primary); } .cp p { margin-bottom: 16px; max-width: 72ch; } .cp main ul, .cp main ol { margin: 0 0 18px 22px; max-width: 72ch; } .cp main li { margin-bottom: 8px; } .cp strong { color: var(--text-primary); font-weight: 700; } .cp blockquote { border-left: 3px solid var(--accent-gold); padding: 4px 0 4px 18px; margin: 0 0 18px; color: var(--text-secondary); font-style: italic; max-width: 70ch; } .cp hr { border: none; border-top: 1px solid var(--border-subtle); margin: 40px 0; } /* ---------- Tables ---------- */ .table-scroll { overflow-x: auto; margin-bottom: 22px; border: 1px solid var(--border-subtle); border-radius: var(--radius-md); } .cp table { border-collapse: collapse; width: 100%; font-size: 14px; min-width: 540px; } .cp thead th { background: var(--bg-secondary); text-align: left; padding: 10px 13px; font-size: 11px; font-weight: 800; letter-spacing: 0.09em; text-transform: uppercase; color: var(--text-muted); border-bottom: 1px solid var(--border-medium); white-space: nowrap; } .cp tbody td { padding: 9px 13px; border-bottom: 1px solid var(--border-subtle); vertical-align: top; } .cp tbody tr:last-child td { border-bottom: none; } .cp tbody tr:hover { background: var(--bg-card); } .cp td.num { font-variant-numeric: tabular-nums; color: var(--text-muted); white-space: nowrap; } .cp td.name { font-weight: 600; color: var(--text-primary); } .school { color: var(--text-dim); font-size: 13px; } .pos { display: inline-block; min-width: 40px; text-align: center; padding: 2px 7px; border-radius: 3px; font-size: 10.5px; font-weight: 800; letter-spacing: 0.04em; color: #fff; } .delta-pos { color: var(--accent-green); font-variant-numeric: tabular-nums; } .delta-neg { color: var(--accent-red); font-variant-numeric: tabular-nums; } /* ---------- Cards / grids ---------- */ .card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(215px, 1fr)); gap: 12px; margin-bottom: 26px; } .cp .card { display: block; background: var(--bg-card); border: 1px solid var(--border-subtle); border-radius: var(--radius-md); padding: 15px 16px; color: var(--text-primary); } .cp .card:hover { background: var(--bg-elevated); border-color: var(--border-medium); text-decoration: none; } .card-title { font-weight: 700; font-size: 15px; margin-bottom: 4px; } .card-meta { font-size: 12.5px; color: var(--text-muted); line-height: 1.5; } .stat-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 12px; margin: 24px 0 30px; } .stat { background: var(--bg-card); border: 1px solid var(--border-subtle); border-radius: var(--radius-md); padding: 14px 16px; } .stat-value { font-size: 27px; font-weight: 900; color: var(--accent-gold); line-height: 1.1; font-variant-numeric: tabular-nums; } .stat-label { font-size: 11px; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase; color: var(--text-muted); margin-top: 5px; } .callout { background: var(--bg-card); border: 1px solid var(--border-subtle); border-left: 3px solid var(--accent-gold); border-radius: var(--radius-sm); padding: 16px 18px; margin: 0 0 24px; } .cp .callout p:last-child { margin-bottom: 0; } .callout-title { font-weight: 800; font-size: 13px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--accent-gold); margin-bottom: 8px; } .chip-row { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 22px; } .cp .chip { display: inline-block; padding: 6px 12px; background: var(--bg-card); border: 1px solid var(--border-subtle); border-radius: 20px; font-size: 13px; font-weight: 600; color: var(--text-secondary); } .cp a.chip:hover { background: var(--bg-elevated); color: var(--text-primary); text-decoration: none; } /* ---------- Ads ---------- */ .ad-slot { margin: 34px auto; width: 100%; max-width: 728px; min-height: 100px; text-align: center; } .ad-label { font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-dim); margin-bottom: 6px; } /* AdSense measures the to pick a size; give it an unambiguous width so responsive units never resolve against an indeterminate box. */ .ad-slot .adsbygoogle { display: block; width: 100%; } /* ---------- CTA ---------- */ .cta-band { background: var(--bg-card); border: 1px solid var(--border-medium); border-radius: var(--radius-md); padding: 26px; margin: 40px 0; text-align: center; } .cp .cta-band h2 { margin: 0 0 8px; font-size: 21px; padding: 0; } .cp .cta-band p { margin: 0 auto 18px; color: var(--text-secondary); max-width: 54ch; font-size: 15px; } .cp .btn { display: inline-block; background: var(--accent-gold); color: #000; font-weight: 800; font-size: 13px; letter-spacing: 0.1em; text-transform: uppercase; padding: 13px 28px; border-radius: var(--radius-sm); } .cp .btn:hover { background: #e2ba55; text-decoration: none; } /* ---------- Footer ---------- */ .site-footer { border-top: 1px solid var(--border-subtle); background: var(--bg-secondary); padding: 36px 0 44px; font-size: 13.5px; color: var(--text-muted); } .footer-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 26px; margin-bottom: 30px; } .cp .footer-col h3 { font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-dim); margin: 0 0 10px; font-weight: 800; } .cp .footer-col a { display: block; color: var(--text-secondary); padding: 3px 0; font-size: 13.5px; } .cp .footer-col a:hover { color: var(--accent-gold); } .footer-legal { border-top: 1px solid var(--border-subtle); padding-top: 20px; color: var(--text-dim); font-size: 12.5px; line-height: 1.7; } .cp .footer-legal p { max-width: 90ch; margin-bottom: 8px; } /* ---------- Responsive ---------- */ @media (max-width: 720px) { .cp { font-size: 15.5px; } .cp h1 { font-size: 29px; } .cp h2 { font-size: 21px; margin-top: 32px; } .standfirst { font-size: 16.5px; } .site-header-inner { min-height: 54px; padding: 8px 16px; gap: 10px; } .site-nav { margin-left: 0; width: 100%; overflow-x: auto; padding-bottom: 4px; flex-wrap: nowrap; } .year-switcher { margin-left: auto; } .year-switcher-label { display: none; } .wrap, .wrap-wide { padding: 0 16px; } .stat-value { font-size: 23px; } }