/* ─────────────────────────────────────────────────────────────── Stet — colors_and_type.css · STET 2.0 Drop-in foundations: base tokens + four themes + semantic type vars. THEMES (each ships in light + dark mode): • Volt (default, signature chartreuse) • Ochre (umber gold on taupe) • Teal (verdigris) • Plum (aubergine) Switch with attributes on (or any container): data-theme defaults to volt; data-mode defaults to light. FONTS — Manuscript stack: display + body = Newsreader (one superfamily) labels / kickers / numbers = Fragment Mono These two are self-hosted from fonts/ via the @font-face rules below. ─────────────────────────────────────────────────────────────── */ /* ── Active stack — self-hosted (Newsreader variable + Fragment Mono) ── */ @font-face { font-family: 'Newsreader'; src: url('fonts/Newsreader-VariableFont_opsz_wght.ttf') format('truetype'); font-weight: 200 800; font-style: normal; font-display: swap; } @font-face { font-family: 'Newsreader'; src: url('fonts/Newsreader-Italic-VariableFont_opsz_wght.ttf') format('truetype'); font-weight: 200 800; font-style: italic; font-display: swap; } @font-face { font-family: 'Fragment Mono'; src: url('fonts/FragmentMono-Regular.ttf') format('truetype'); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: 'Fragment Mono'; src: url('fonts/FragmentMono-Italic.ttf') format('truetype'); font-weight: 400; font-style: italic; font-display: swap; } /* ── Legacy self-hosted families (kept available; not the active stack) ── */ @font-face { font-family: 'Fraunces'; src: url('fonts/Fraunces-VariableFont_SOFT_WONK_opsz_wght.ttf') format('truetype'); font-weight: 100 900; font-style: normal; font-display: swap; } @font-face { font-family: 'Fraunces'; src: url('fonts/Fraunces-Italic-VariableFont_SOFT_WONK_opsz_wght.ttf') format('truetype'); font-weight: 100 900; font-style: italic; font-display: swap; } @font-face { font-family: 'Inter'; src: url('fonts/Inter-VariableFont_opsz_wght.ttf') format('truetype'); font-weight: 100 900; font-style: normal; font-display: swap; } @font-face { font-family: 'Inter'; src: url('fonts/Inter-Italic-VariableFont_opsz_wght.ttf') format('truetype'); font-weight: 100 900; font-style: italic; font-display: swap; } @font-face { font-family: 'Archivo'; src: url('fonts/Archivo-VariableFont_wdth_wght.ttf') format('truetype'); font-weight: 100 900; font-style: normal; font-display: swap; } @font-face { font-family: 'JetBrains Mono'; src: url('fonts/JetBrainsMono-VariableFont_wght.ttf') format('truetype'); font-weight: 100 800; font-style: normal; font-display: swap; } :root { /* ── Neutral grounds (shared across themes) ── */ --stet-bone: #F2EFE7; /* primary paper (Volt light) */ --stet-paper: #E5E2D5; /* secondary paper */ --stet-stone: #CAC5B5; /* rules, dividers */ --stet-ink: #0F0E0C; /* primary ink (Volt dark ground) */ --stet-ink-2: #23211D; /* body / secondary text */ --stet-mute: #6F6B62; /* captions, kickers */ --stet-red: #B23A2A; /* errors, dele, hot — sparingly */ /* ── Theme accent pairs (deep = on light · bright = on dark) ── */ --stet-volt: #D8E04A; --stet-volt-deep: #A8B130; --stet-ochre: #D7A441; --stet-ochre-deep: #945F18; --stet-teal: #5FC9B4; --stet-teal-deep: #1E7A6B; --stet-plum: #C9A0DA; --stet-plum-deep: #7A4E86; /* ── Theme grounds — tinted papers (light) + dark surfaces ── */ --stet-ochre-paper: #E8DDC8; --stet-ochre-fg: #241B0E; --stet-ochre-dark: #15100A; --stet-ochre-dfg: #EFE5D0; --stet-teal-paper: #E6EEEC; --stet-teal-fg: #112019; --stet-teal-dark: #0A1311; --stet-teal-dfg: #DEEAE6; --stet-plum-paper: #F0EBF0; --stet-plum-fg: #1E1822; --stet-plum-dark: #161019; --stet-plum-dfg: #ECE3EF; /* ── Active primitives — DEFAULT = Volt, light. Themes override these. ── */ --bg: var(--stet-bone); --fg-1: var(--stet-ink); --accent: var(--stet-volt-deep); /* the focal colour, this surface */ --accent-soft: var(--stet-volt); /* the brighter sibling */ /* ── Derived roles (formula is theme-independent; re-resolves per theme) ── */ --fg-2: color-mix(in oklab, var(--fg-1) 84%, var(--bg)); --fg-3: color-mix(in oklab, var(--fg-1) 55%, var(--bg)); --fg-inverse: var(--bg); --bg-2: color-mix(in oklab, var(--bg) 92%, var(--fg-1)); --line: color-mix(in oklab, var(--bg) 78%, var(--fg-1)); --line-strong: var(--fg-1); --danger: var(--stet-red); /* ── Type families — Manuscript stack ── */ --font-display: 'Newsreader', Georgia, serif; /* headlines + body (one superfamily) */ --font-body: 'Newsreader', Georgia, serif; --font-mono: 'Fragment Mono', ui-monospace, monospace; /* labels, kickers, numbers */ --font-kicker: 'Fragment Mono', ui-monospace, monospace; /* legacy aliases (kept for older consumers) */ --stet-font-serif: var(--font-display); --stet-font-sans: var(--font-body); --stet-font-mono: var(--font-mono); --stet-font-display: var(--font-kicker); --serif-display: var(--font-display); --sans-body: var(--font-body); --mono-label: var(--font-mono); --sans-kicker: var(--font-kicker); /* ── 4-point spacing ── */ --stet-space-xxs: 4px; --stet-space-xs: 8px; --stet-space-s: 12px; --stet-space-m: 16px; --stet-space-l: 24px; --stet-space-xl: 32px; --stet-space-2xl: 48px; --stet-space-3xl: 64px; --stet-space-4xl: 96px; /* ── Type scale ── */ --stet-text-xs: 12px; --stet-text-sm: 14px; --stet-text-base: 16px; --stet-text-lg: 20px; --stet-text-xl: 24px; --stet-text-2xl: 32px; --stet-text-3xl: 48px; --stet-text-4xl: 72px; --stet-text-5xl: 120px; /* ── Borders / radii ── */ --stet-border: 1px solid var(--line); --stet-border-ink: 1px solid var(--fg-1); --stet-radius: 0; /* square corners. load-bearing. */ /* ── Elevation — the one allowed shadow ── */ --stet-shadow: 0 26px 70px rgba(15, 14, 12, 0.13); /* ── Motion ── */ --stet-dur-quick: 180ms; /* @kind other */ --stet-dur-base: 320ms; /* @kind other */ --stet-dur-slow: 480ms; /* @kind other */ --stet-ease: cubic-bezier(0.2, 0.8, 0.2, 1); /* @kind other */ } /* ───────────── Mode + theme overrides (only the primitives change) ───────────── */ /* Volt — dark */ [data-mode="dark"] { --bg: var(--stet-ink); --fg-1: var(--stet-bone); --accent: var(--stet-volt); --accent-soft: var(--stet-volt-deep); } /* Ochre */ [data-theme="ochre"] { --bg: var(--stet-ochre-paper); --fg-1: var(--stet-ochre-fg); --accent: var(--stet-ochre-deep); --accent-soft: var(--stet-ochre); } [data-theme="ochre"][data-mode="dark"] { --bg: var(--stet-ochre-dark); --fg-1: var(--stet-ochre-dfg); --accent: var(--stet-ochre); --accent-soft: var(--stet-ochre-deep); } /* Teal */ [data-theme="teal"] { --bg: var(--stet-teal-paper); --fg-1: var(--stet-teal-fg); --accent: var(--stet-teal-deep); --accent-soft: var(--stet-teal); } [data-theme="teal"][data-mode="dark"] { --bg: var(--stet-teal-dark); --fg-1: var(--stet-teal-dfg); --accent: var(--stet-teal); --accent-soft: var(--stet-teal-deep); } /* Plum */ [data-theme="plum"] { --bg: var(--stet-plum-paper); --fg-1: var(--stet-plum-fg); --accent: var(--stet-plum-deep); --accent-soft: var(--stet-plum); } [data-theme="plum"][data-mode="dark"] { --bg: var(--stet-plum-dark); --fg-1: var(--stet-plum-dfg); --accent: var(--stet-plum); --accent-soft: var(--stet-plum-deep); } @media (prefers-reduced-motion: reduce) { :root { --stet-dur-quick: 0ms; /* @kind other */ --stet-dur-base: 0ms; /* @kind other */ --stet-dur-slow: 0ms; /* @kind other */ } } /* ───────────────────────── Semantic type styles ───────────────────────── Newsreader display, set light; Fragment Mono for the small tracked-out labels. Apply directly or copy the declarations into your own selectors. */ .h-display { /* hero — Newsreader, enormous, light */ font-family: var(--font-display); font-weight: 300; font-size: clamp(60px, 11vw, 132px); line-height: 1.0; letter-spacing: -0.025em; text-wrap: balance; } .h1 { font-family: var(--font-display); font-weight: 300; font-size: clamp(40px, 7vw, 80px); line-height: 1.04; letter-spacing: -0.02em; text-wrap: balance; } .h2 { font-family: var(--font-display); font-weight: 300; font-size: clamp(30px, 5vw, 52px); line-height: 1.07; letter-spacing: -0.015em; text-wrap: balance; } .h3 { font-family: var(--font-display); font-weight: 400; font-size: 28px; line-height: 1.12; letter-spacing: -0.01em; } .lede { /* intro / deck paragraph — Book 350 */ font-family: var(--font-body); font-weight: 350; font-size: clamp(18px, 2vw, 22px); line-height: 1.5; color: var(--fg-2); } .p { font-family: var(--font-body); font-weight: 400; font-size: var(--stet-text-base); line-height: 1.55; color: var(--fg-2); } .small { font-size: var(--stet-text-sm); line-height: 1.5; } .kicker { /* small ALL-CAPS § label — Fragment Mono */ font-family: var(--font-kicker); font-weight: 400; font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--fg-3); } .meta, .mono { /* numbers, metadata, labels */ font-family: var(--font-mono); font-size: var(--stet-text-xs); letter-spacing: 0.04em; color: var(--fg-3); } .serif-italic { /* the "voice" italic */ font-family: var(--font-display); font-style: italic; font-weight: 400; } /* ── The focal — STET 2.0: colour, not a swipe ── Once per surface, on the noun that does the work. The word turns the active accent and tips into italic. No highlight, no underline. */ .stet-mark, .mark { font-style: italic; font-weight: 400; color: var(--accent); } /* ── The wordmark dot (internal brand use only) ── */ .stet-dot { color: var(--accent); }