/* ========================================================================== Thread design tokens — extractable Include this file at the top of any Thread artifact (scrollytelling, presentation, document, dashboard) to inherit the look-and-feel. Provides: - TWK Everett + JetBrains Mono @font-face declarations, all self-hosted from the sibling fonts/ directory (no Google Fonts CDN dependency) - Light + dark theme tokens - 4 palettes (green default, cobalt, amber, slate) - Spacing, radius, motion tokens - A `data-theme` and `data-palette` attribute API on Usage: Or toggle at runtime: document.documentElement.setAttribute('data-theme', 'dark'); Persistence is up to the host artifact (we don't touch localStorage here so this file stays a pure stylesheet). ========================================================================== */ /* JetBrains Mono — self-hosted (was a remote Google Fonts @import). woff2 subsets vendored under fonts/ so shipped SPA users never hit a public CDN. */ @font-face { font-family: 'JetBrains Mono'; src: url('fonts/JetBrainsMono-latin.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'JetBrains Mono'; src: url('fonts/JetBrainsMono-latin-ext.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'JetBrains Mono'; src: url('fonts/JetBrainsMono-latin.woff2') format('woff2'); font-weight: 500; font-style: normal; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'JetBrains Mono'; src: url('fonts/JetBrainsMono-latin-ext.woff2') format('woff2'); font-weight: 500; font-style: normal; font-display: swap; unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'JetBrains Mono'; src: url('fonts/JetBrainsMono-latin.woff2') format('woff2'); font-weight: 600; font-style: normal; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'JetBrains Mono'; src: url('fonts/JetBrainsMono-latin-ext.woff2') format('woff2'); font-weight: 600; font-style: normal; font-display: swap; unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'TWK Everett'; src: url('fonts/TWKEverett-Light.otf') format('opentype'); font-weight: 300; font-style: normal; font-display: swap; } @font-face { font-family: 'TWK Everett'; src: url('fonts/TWKEverett-Regular.otf') format('opentype'); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: 'TWK Everett'; src: url('fonts/TWKEverett-Medium.otf') format('opentype'); font-weight: 500; font-style: normal; font-display: swap; } @font-face { font-family: 'TWK Everett'; src: url('fonts/TWKEverett-Bold.otf') format('opentype'); font-weight: 700; font-style: normal; font-display: swap; } :root { /* ─── Raw palette colors ─────────────────────────────────────── */ --p-green: #006d3c; --p-green-bright: #1aaf6b; --p-green-deep: #0a4d2e; --p-green-tint: #e6f0ec; --p-green-tint-2: #f1f7f3; --p-green-rgb: 0,109,60; --p-cobalt: #2a5fb8; --p-cobalt-bright: #4a8de0; --p-cobalt-deep: #1c3f7a; --p-cobalt-tint: #e4ecf6; --p-cobalt-tint-2: #eef3f9; --p-cobalt-rgb: 42,95,184; --p-amber: #b86b1a; --p-amber-bright: #d99748; --p-amber-deep: #7a4612; --p-amber-tint: #f4e8d8; --p-amber-tint-2: #faf2e5; --p-amber-rgb: 184,107,26; --p-slate: #3a4540; --p-slate-bright: #5b6660; --p-slate-deep: #1a1f1c; --p-slate-tint: #e8eae9; --p-slate-tint-2: #f1f3f2; --p-slate-rgb: 58,69,64; /* ─── Active palette (default: green) ───────────────────────── */ --fc-primary: var(--p-green); --fc-primary-bright: var(--p-green-bright); --fc-primary-deep: var(--p-green-deep); --fc-primary-tint: var(--p-green-tint); --fc-primary-tint-2: var(--p-green-tint-2); --fc-primary-rgb: var(--p-green-rgb); /* ─── Ink (light mode) ──────────────────────────────────────── */ --fc-ink: #0a0c0b; --fc-ink-2: #1a1f1c; --fc-ink-3: #3a4540; --fc-ink-4: #5b6660; --fc-ink-5: #7a8580; --fc-ink-6: #a3aca7; /* ─── Surfaces (light mode) ─────────────────────────────────── */ --fc-paper: #f8f8f6; --fc-surface: #ffffff; --fc-surface-2: #f3f3f1; --fc-surface-3: #ebebe7; /* ─── Borders ───────────────────────────────────────────────── */ --fc-border: #e6e6e1; --fc-border-strong: #d0d0c9; /* ─── Status ────────────────────────────────────────────────── */ --fc-success: #2c8a5a; --fc-warning: #c98f2c; --fc-danger: #b04156; --fc-info: #3974b8; /* ─── Type ──────────────────────────────────────────────────── */ --fc-font-sans: 'TWK Everett', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, sans-serif; --fc-font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace; /* ─── Spacing ───────────────────────────────────────────────── */ --fc-sp-2: 2px; --fc-sp-4: 4px; --fc-sp-6: 6px; --fc-sp-8: 8px; --fc-sp-12: 12px; --fc-sp-16: 16px; --fc-sp-24: 24px; --fc-sp-32: 32px; --fc-sp-48: 48px; --fc-sp-64: 64px; --fc-sp-96: 96px; /* ─── Radii ─────────────────────────────────────────────────── */ --fc-radius-xs: 2px; --fc-radius-sm: 4px; --fc-radius-md: 6px; --fc-radius-lg: 10px; --fc-radius-pill: 999px; /* ─── Motion ────────────────────────────────────────────────── */ --fc-ease-out: cubic-bezier(0.22, 1, 0.36, 1); --fc-ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); --fc-dur-fast: 150ms; --fc-dur-base: 220ms; --fc-dur-slow: 420ms; } /* ─── Palette overrides ─────────────────────────────────────────── */ :root[data-palette="cobalt"] { --fc-primary: var(--p-cobalt); --fc-primary-bright: var(--p-cobalt-bright); --fc-primary-deep: var(--p-cobalt-deep); --fc-primary-tint: var(--p-cobalt-tint); --fc-primary-tint-2: var(--p-cobalt-tint-2); --fc-primary-rgb: var(--p-cobalt-rgb); } :root[data-palette="amber"] { --fc-primary: var(--p-amber); --fc-primary-bright: var(--p-amber-bright); --fc-primary-deep: var(--p-amber-deep); --fc-primary-tint: var(--p-amber-tint); --fc-primary-tint-2: var(--p-amber-tint-2); --fc-primary-rgb: var(--p-amber-rgb); } :root[data-palette="slate"] { --fc-primary: var(--p-slate); --fc-primary-bright: var(--p-slate-bright); --fc-primary-deep: var(--p-slate-deep); --fc-primary-tint: var(--p-slate-tint); --fc-primary-tint-2: var(--p-slate-tint-2); --fc-primary-rgb: var(--p-slate-rgb); } /* ─── Dark theme overrides ──────────────────────────────────────── */ :root[data-theme="dark"] { --fc-ink: #f4f5f3; --fc-ink-2: #e2e6e3; --fc-ink-3: #b8c0bc; --fc-ink-4: #8a948f; --fc-ink-5: #6b7570; --fc-ink-6: #4a5450; --fc-paper: #0c1110; --fc-surface: #15191a; --fc-surface-2: #1a1f1e; --fc-surface-3: #232826; --fc-border: #2a3030; --fc-border-strong: #3a4140; --fc-success: #1aaf6b; --fc-warning: #d99748; --fc-danger: #d56680; --fc-info: #5d9bdc; --fc-primary: var(--p-green-bright); --fc-primary-deep: var(--p-green); --fc-primary-tint: #173021; --fc-primary-tint-2: #1f3a2a; } :root[data-theme="dark"][data-palette="cobalt"] { --fc-primary: var(--p-cobalt-bright); --fc-primary-deep: var(--p-cobalt); --fc-primary-tint: #1a2c4a; --fc-primary-tint-2: #213658; } :root[data-theme="dark"][data-palette="amber"] { --fc-primary: var(--p-amber-bright); --fc-primary-deep: var(--p-amber); --fc-primary-tint: #3a2a14; --fc-primary-tint-2: #4a3618; } :root[data-theme="dark"][data-palette="slate"] { --fc-primary: var(--p-slate-bright); --fc-primary-deep: var(--p-slate); --fc-primary-tint: #252b29; --fc-primary-tint-2: #2c3331; } /* ─── Base reset ────────────────────────────────────────────────── */ * { box-sizing: border-box; } html, body { margin: 0; } body { font-family: var(--fc-font-sans); font-size: 16px; line-height: 1.55; color: var(--fc-ink-2); background: var(--fc-paper); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } /* ─── Type scale (Thread house style) ───────────────────────────── */ .fc-eyebrow { font-size: 11px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--fc-primary); } .fc-display { font-family: var(--fc-font-sans); font-weight: 500; font-size: clamp(40px, 6vw, 84px); line-height: 1.05; letter-spacing: -0.02em; color: var(--fc-ink); } .fc-h1 { font-size: clamp(28px, 3.6vw, 44px); line-height: 1.15; letter-spacing: -0.012em; font-weight: 500; color: var(--fc-ink); } .fc-h2 { font-size: clamp(22px, 2.4vw, 30px); line-height: 1.2; letter-spacing: -0.008em; font-weight: 500; color: var(--fc-ink); } .fc-h3 { font-size: 18px; font-weight: 500; color: var(--fc-ink); } .fc-body { font-size: 17px; line-height: 1.62; color: var(--fc-ink-3); } .fc-mono { font-family: var(--fc-font-mono); } .fc-num { font-family: var(--fc-font-mono); font-variant-numeric: tabular-nums; } /* Buttons */ .fc-btn { display: inline-flex; align-items: center; gap: 8px; padding: 10px 18px; font-family: inherit; font-size: 14px; font-weight: 500; border-radius: var(--fc-radius-pill); border: 1px solid var(--fc-border-strong); background: var(--fc-surface); color: var(--fc-ink); cursor: pointer; transition: background var(--fc-dur-fast), border-color var(--fc-dur-fast), color var(--fc-dur-fast); } .fc-btn:hover { border-color: var(--fc-ink-4); } .fc-btn.primary { background: var(--fc-ink); color: var(--fc-paper); border-color: var(--fc-ink); } .fc-btn.primary:hover { background: var(--fc-primary-deep); border-color: var(--fc-primary-deep); } .fc-btn.accent { background: var(--fc-primary); color: white; border-color: var(--fc-primary); } .fc-btn.accent:hover { background: var(--fc-primary-deep); border-color: var(--fc-primary-deep); }