/* ── Fonts ───────────────────────────────────────────────── Display: Poppins (headings, numbers, eyebrow labels) Body: Inter (UI, captions, paragraphs) The actual @import is in each HTML (preconnect + stylesheet) so the font CSS is fetched in parallel with this file rather than blocking it. ────────────────────────────────────────────────────────── */ /* ── Tokens (superset across all pages) ────────────────── */ :root{ /* surfaces */ --void:#0E060C; --dark:#190B12; --surface:#2D1020; --surface2:#3D1830; /* accents */ --electric:#00C3FF; --fire:#FF6B1A; --amber:#FFAA00; --green:#22D46A; /* text — all white per new DS */ --fg1:#FFFFFF; --fg2:#FFFFFF; --fg3:#FFFFFF; --fg-dim:rgba(255,255,255,0.72); /* secondary body */ --fg-subtle:rgba(255,255,255,0.45); /* captions/labels */ /* glass */ --glass:rgba(0,0,0,0.45); --glass2:rgba(0,0,0,0.28); --border:rgba(255,255,255,0.10); --border-h:rgba(255,255,255,0.22); /* motion */ --ease:cubic-bezier(0.22,1,0.36,1); /* ── Typography system ────────────────────────────────── Two families: Poppins for display, Inter for body/UI. --fd / --fb are kept as the public tokens because every page references them inline. Repointing them rolls the new fonts out across the whole site. */ --fd:'Poppins',system-ui,-apple-system,Segoe UI,Roboto,sans-serif; --fb:'Inter',system-ui,-apple-system,Segoe UI,Roboto,sans-serif; /* Step scale — paired sizes / line-heights / tracking. Numbers match what pages already use inline (56, 38, 32, 24, 20, 17, 14 for display; 18, 15, 14, 13, 12, 11 for body) so the utilities can replace inline styles without visual drift. */ --t-display-size:56px; --t-display-lh:1.05; --t-display-ls:-0.03em; --t-h1-size:38px; --t-h1-lh:1.1; --t-h1-ls:-0.025em; --t-h2-size:32px; --t-h2-lh:1.12; --t-h2-ls:-0.02em; --t-h3-size:24px; --t-h3-lh:1.2; --t-h3-ls:-0.015em; --t-h4-size:20px; --t-h4-lh:1.25; --t-h4-ls:-0.01em; --t-h5-size:17px; --t-h5-lh:1.3; --t-h5-ls:-0.01em; --t-h6-size:14px; --t-h6-lh:1.35; --t-h6-ls:0.02em; --t-body-lg-size:18px; --t-body-lg-lh:1.6; --t-body-size:15px; --t-body-lh:1.6; --t-body-sm-size:14px; --t-body-sm-lh:1.55; --t-caption-size:13px; --t-caption-lh:1.5; --t-micro-size:12px; --t-micro-lh:1.5; --t-micro-ls:0.01em; --t-overline-size:11px; --t-overline-lh:1.4; --t-overline-ls:0.08em; } /* ── Resets ────────────────────────────────────────────── */ *,*::before,*::after{box-sizing:border-box;margin:0;padding:0} html{scroll-behavior:smooth} body{ background:var(--void); color:var(--fg1); font-family:var(--fb); font-size:15px; line-height:1.6; font-weight:400; /* Inter looks noticeably better with these features on: cv11 (single-storey a), ss01 (alt 1), ss03 (cleaner 6/9), and tabular numbers stop stat cards jittering. */ font-feature-settings:"cv11","ss01","ss03","tnum"; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; text-rendering:optimizeLegibility; overflow-x:hidden; } a{color:inherit} button{cursor:pointer;font-family:var(--fb)} /* Default heading family — even if a heading has no inline font, it should still pick up Poppins. Most existing headings set their own size/weight inline; we only assert the family here. */ h1,h2,h3,h4,h5,h6{font-family:var(--fd);letter-spacing:-0.01em} /* ── Scrollbar ─────────────────────────────────────────── */ ::-webkit-scrollbar{width:4px;height:4px} ::-webkit-scrollbar-track{background:var(--void)} ::-webkit-scrollbar-thumb{background:#2D1020;border-radius:2px} /* ── Form defaults ─────────────────────────────────────── */ input,textarea,select{font-family:var(--fb)} input::placeholder{color:rgba(255,255,255,0.6)} input:focus{border-color:rgba(255,255,255,0.4)!important} /* ── Shared keyframes ──────────────────────────────────── */ @keyframes pls{0%,100%{opacity:1}50%{opacity:0.2}} @keyframes heroFadeIn{from{opacity:0;transform:scale(1.03)}to{opacity:1;transform:scale(1)}} /* ── Layout utilities ──────────────────────────────────── */ /* Canonical: section = 72px 80px, hero inner = 52px 80px 48px, max content width = 1400px. Background utilities are decoupled from padding so a section can mix-and-match (e.g. a sticky filter bar uses .section-tight + .section-dark). */ .section{padding:72px 80px} .section-tight{padding:24px 80px} .section-dark{background:var(--dark)} .section-void{background:var(--void)} .container{max-width:1400px;margin:0 auto} /* ── Content width cap ────────────────────────────────── Backgrounds (sections, footer, fixed header) span the full viewport, but inner content is capped at 1600px. The horizontal padding stays at the 80px gutter until the viewport is wider than 1600 + 2×80px, then it grows so the 1600px content area stays centered. !important is needed because pages set inline `padding` shorthand on each section. */ :root{ --max-content:1600px; } .section, .section-tight, .section-dark, .section-void, footer{ padding-left: max(80px, calc((100% - var(--max-content)) / 2)) !important; padding-right: max(80px, calc((100% - var(--max-content)) / 2)) !important; } /* ── Typography utilities ──────────────────────────────── */ /* Use these for new markup. Existing inline styles already pick up Poppins / Inter via var(--fd) / var(--fb). */ .t-display{font-family:var(--fd);font-weight:700;font-size:var(--t-display-size);line-height:var(--t-display-lh);letter-spacing:var(--t-display-ls)} .t-h1{font-family:var(--fd);font-weight:700;font-size:var(--t-h1-size);line-height:var(--t-h1-lh);letter-spacing:var(--t-h1-ls)} .t-h2{font-family:var(--fd);font-weight:700;font-size:var(--t-h2-size);line-height:var(--t-h2-lh);letter-spacing:var(--t-h2-ls)} .t-h3{font-family:var(--fd);font-weight:700;font-size:var(--t-h3-size);line-height:var(--t-h3-lh);letter-spacing:var(--t-h3-ls)} .t-h4{font-family:var(--fd);font-weight:600;font-size:var(--t-h4-size);line-height:var(--t-h4-lh);letter-spacing:var(--t-h4-ls)} .t-h5{font-family:var(--fd);font-weight:600;font-size:var(--t-h5-size);line-height:var(--t-h5-lh);letter-spacing:var(--t-h5-ls)} .t-h6{font-family:var(--fd);font-weight:600;font-size:var(--t-h6-size);line-height:var(--t-h6-lh);letter-spacing:var(--t-h6-ls)} .t-body-lg{font-family:var(--fb);font-weight:400;font-size:var(--t-body-lg-size);line-height:var(--t-body-lg-lh)} .t-body{font-family:var(--fb);font-weight:400;font-size:var(--t-body-size);line-height:var(--t-body-lh)} .t-body-sm{font-family:var(--fb);font-weight:400;font-size:var(--t-body-sm-size);line-height:var(--t-body-sm-lh)} .t-caption{font-family:var(--fb);font-weight:500;font-size:var(--t-caption-size);line-height:var(--t-caption-lh)} .t-micro{font-family:var(--fb);font-weight:500;font-size:var(--t-micro-size);line-height:var(--t-micro-lh);letter-spacing:var(--t-micro-ls)} .t-overline{font-family:var(--fb);font-weight:600;font-size:var(--t-overline-size);line-height:var(--t-overline-lh);letter-spacing:var(--t-overline-ls);text-transform:uppercase} /* Numeric variant — stats, prices, leaderboards. Keeps the display family but locks tabular figures so columns line up. */ .t-num{font-feature-settings:"tnum","lnum"}