/* ============================================================ THAT HYPERACTIVE SARDAR — Design System Tokens colors_and_type.css · v2.1 · source of truth for every artifact ------------------------------------------------------------ Fonts: Fraunces (serif display/editorial) + Inter (body/utility) are loaded from Google Fonts. The Hyperactive-Mode loud condensed face is Tusker Grotesk — now SELF-HOSTED from fonts/ (woff2 + woff, full width-grade family 1500–9800). The hero wordmark may still ship as a PNG for pixel-locked lock-ups (assets/wordmark-sardar.png). Load order in HTML (Tusker comes from this stylesheet's @font-face — no CDN needed for it): ============================================================ */ /* ---------- SELF-HOSTED DISPLAY FONT — Tusker Grotesk ---------- The Hyperactive-Mode loud condensed face. Grade 4x00 (medium width). url() resolves relative to THIS stylesheet, so paths work from any consumer (preview cards, ui_kits, slides). woff2 + woff. */ @font-face { font-family: "Tusker Grotesk"; font-weight: 500; font-style: normal; font-display: swap; src: url("fonts/TuskerGrotesk-4500Medium.woff2") format("woff2"), url("fonts/TuskerGrotesk-4500Medium.woff") format("woff"); } @font-face { font-family: "Tusker Grotesk"; font-weight: 600; font-style: normal; font-display: swap; src: url("fonts/TuskerGrotesk-4600Semibold.woff2") format("woff2"), url("fonts/TuskerGrotesk-4600Semibold.woff") format("woff"); } @font-face { font-family: "Tusker Grotesk"; font-weight: 700; font-style: normal; font-display: swap; src: url("fonts/TuskerGrotesk-4700Bold.woff2") format("woff2"), url("fonts/TuskerGrotesk-4700Bold.woff") format("woff"); } @font-face { font-family: "Tusker Grotesk"; font-weight: 800; font-style: normal; font-display: swap; src: url("fonts/TuskerGrotesk-4800Super.woff2") format("woff2"), url("fonts/TuskerGrotesk-4800Super.woff") format("woff"); } /* Optional ultra-condensed grade for tighter lock-ups — "Tusker Grotesk Condensed" */ @font-face { font-family: "Tusker Grotesk Condensed"; font-weight: 800; font-style: normal; font-display: swap; src: url("fonts/TuskerGrotesk-1800Super.woff2") format("woff2"), url("fonts/TuskerGrotesk-1800Super.woff") format("woff"); } :root { /* ---------- PALETTE (7-colour system) ---------- */ --ink: #0E0E10; /* hero bg · type */ --bone: #ECE7DA; /* default reading surface */ --oxblood: #6E1E1E; /* accents · CTAs · pull quotes (Operator) */ --saffron: #D86000; /* Hyperactive-Mode trigger — deep Kesari (Nishan Sahib burnt-saffron, logo orange); fire/rootedness on Ink, pairs warm with Oxblood — 5-8% of surfaces only */ --saffron-deep: #B04D00; /* saffron on light surfaces, hover */ --brass: #B4884E; /* special-edition / "felt as ink" moments only */ --slate: #2C2E36; /* dark-mode secondary surface */ --smoke: #8A847A; /* captions · footers · NDA framing */ /* Tints derived from the palette (use sparingly, never invent new hues) */ --ink-04: rgba(14,14,16,.04); --ink-08: rgba(14,14,16,.08); --ink-15: rgba(14,14,16,.15); --oxblood-08:rgba(110,30,30,.08); --oxblood-15:rgba(110,30,30,.15); --bone-06: rgba(236,231,218,.06); --bone-12: rgba(236,231,218,.12); /* ---------- SEMANTIC (light / Bone default = Operator Mode) ---------- */ --bg: var(--bone); --fg: var(--ink); --accent: var(--oxblood); --muted: var(--smoke); --rule: 1px solid var(--oxblood); --hairline:1px solid var(--oxblood-15); /* ---------- TYPE STACKS ---------- */ --serif: "Fraunces", "Iowan Old Style", Georgia, "Times New Roman", serif; --sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif; --display-loud: "Tusker Grotesk", "Druk Wide", Impact, "Haettenschweiler", sans-serif; --display-loud-cond: "Tusker Grotesk Condensed", "Tusker Grotesk", Impact, "Haettenschweiler", sans-serif; --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace; /* ---------- TYPE SCALE (px / line-height) ---------- */ --display-xl: 96px; --display-xl-lh: 100px; /* Fraunces 400 — Operator hero */ --display-lg: 72px; --display-lg-lh: 80px; /* Fraunces 400 — section openers */ --display-md: 54px; --display-md-lh: 64px; /* Fraunces 400 — page titles */ --loud-xl: 120px; --loud-xl-lh: 110px; /* loud 900 cond — Hyperactive wordmark hero */ --loud-md: 72px; --loud-md-lh: 68px; /* loud 900 cond — tile / podcast */ --editorial-xl: 32px; --editorial-xl-lh: 44px; /* Fraunces 400 — newsletter headline */ --editorial-md: 24px; --editorial-md-lh: 36px; /* Fraunces italic — pull quotes */ --body-lg: 18px; --body-lg-lh: 28px; /* Inter 400 — long-form */ --body-md: 16px; --body-md-lh: 26px; /* Inter 400 — default */ --body-sm: 14px; --body-sm-lh: 22px; /* Inter 400 — captions */ --utility-md: 12px; --utility-md-lh: 18px; /* Inter 600 caps +0.12em — eyebrows */ --utility-sm: 10px; --utility-sm-lh: 16px; /* Inter 500 caps +0.18em — footers */ /* ---------- SPACING (8px base) ---------- */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px; --space-9: 96px; --space-10: 120px; --gutter: 24px; --grid-max: 1120px; /* ---------- RADII (near-square; editorial restraint) ---------- */ --r-none: 0px; /* default — cards, mocks, decks are square-cornered */ --r-sm: 2px; /* inputs, subtle softening */ --r-md: 4px; /* buttons */ --r-pill: 999px; /* mode toggles, tags, social chips */ /* ---------- ELEVATION (restrained; borders > shadows) ---------- */ --shadow-none: none; --shadow-sm: 0 1px 2px rgba(14,14,16,.06); --shadow-md: 0 8px 24px rgba(14,14,16,.10); --shadow-lift: 0 16px 48px rgba(14,14,16,.18); /* ---------- MOTION (cuts, not parallax) ---------- */ --ease-cut: cubic-bezier(0.22, 1, 0.36, 1); --dur-fast: 120ms; --dur-base: 200ms; } /* ---------- DARK / Ink surface (Operator-dark + Hyperactive Mode) ---------- */ [data-mode="dark"] { --bg: var(--ink); --fg: var(--bone); --accent: var(--saffron); --muted: var(--smoke); --rule: 1px solid var(--bone-12); } /* ============================================================ SEMANTIC TYPE CLASSES Use these instead of re-declaring font properties everywhere. ============================================================ */ .t-eyebrow { font-family: var(--sans); font-size: var(--utility-md); line-height: var(--utility-md-lh); letter-spacing: 0.18em; text-transform: uppercase; font-weight: 600; color: var(--smoke); } .t-eyebrow::before { content: "■"; color: var(--oxblood); margin-right: 8px; font-size: 0.85em; } [data-mode="dark"] .t-eyebrow::before { color: var(--saffron); } .t-display { font-family: var(--serif); font-weight: 400; font-size: var(--display-xl); line-height: var(--display-xl-lh); letter-spacing: -0.02em; } .t-h1 { font-family: var(--serif); font-weight: 400; font-size: var(--display-lg); line-height: var(--display-lg-lh); letter-spacing: -0.02em; } .t-h2 { font-family: var(--serif); font-weight: 400; font-size: var(--display-md); line-height: var(--display-md-lh); letter-spacing: -0.01em; } .t-editorial { font-family: var(--serif); font-weight: 400; font-size: var(--editorial-xl); line-height: var(--editorial-xl-lh); } .t-pull { font-family: var(--serif); font-style: italic; font-size: var(--editorial-md); line-height: var(--editorial-md-lh); color: var(--accent); } .t-loud { font-family: var(--display-loud); font-weight: 800; font-size: var(--loud-md); line-height: var(--loud-md-lh); letter-spacing: 0.01em; text-transform: uppercase; } .t-body-lg { font-family: var(--sans); font-weight: 400; font-size: var(--body-lg); line-height: var(--body-lg-lh); } .t-body { font-family: var(--sans); font-weight: 400; font-size: var(--body-md); line-height: var(--body-md-lh); } .t-body-sm { font-family: var(--sans); font-weight: 400; font-size: var(--body-sm); line-height: var(--body-sm-lh); } .t-utility { font-family: var(--sans); font-weight: 600; font-size: var(--utility-md); line-height: var(--utility-md-lh); text-transform: uppercase; letter-spacing: 0.12em; } .t-mono { font-family: var(--mono); font-size: 13px; } /* The mega-stat: a number that sits alone */ .t-mega { font-family: var(--serif); font-weight: 400; font-size: clamp(72px, 14vw, 180px); line-height: 0.9; letter-spacing: -0.03em; }