/* ========================================================================== Workshop — global styles -------------------------------------------------------------------------- Visual system implementing the design direction in docs/design-direction.md and the component contract in docs/component-inventory.md. Metaphor: maker's notebook. Cream paper, ink text, multi-color category accents. Light-first; dark mode opt-in via [data-theme="dark"] on . ========================================================================== */ /* ========================================================================== 1. Fonts (self-hosted) ========================================================================== */ /* General Sans — display + UI face. Fontshare Free License. */ @font-face { font-family: "General Sans"; src: url("/fonts/general-sans/GeneralSans-Regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: "General Sans"; src: url("/fonts/general-sans/GeneralSans-Medium.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; } @font-face { font-family: "General Sans"; src: url("/fonts/general-sans/GeneralSans-Semibold.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; } @font-face { font-family: "General Sans"; src: url("/fonts/general-sans/GeneralSans-Bold.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; } /* JetBrains Mono — code + diagram labels + meta lines. OFL. */ @font-face { font-family: "JetBrains Mono"; src: url("/fonts/jetbrains-mono/JetBrainsMono-Regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: "JetBrains Mono"; src: url("/fonts/jetbrains-mono/JetBrainsMono-Medium.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; } @font-face { font-family: "JetBrains Mono"; src: url("/fonts/jetbrains-mono/JetBrainsMono-Bold.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; } /* ========================================================================== 2. Tokens -------------------------------------------------------------------------- Every visual choice expressed as a CSS custom property. Rewriting the theme is a matter of editing this block. ========================================================================== */ :root { /* Surface — cream paper aesthetic */ --paper: #fbf7f0; --paper-deep: #f4eee2; --paper-edge: #e8dfcc; --graph: #d9d0bc; /* Text — warm near-black */ --ink: #1a1814; --ink-muted: #5c564a; --ink-faint: #8c8576; /* Category accents */ --cat-compute: #2e5bff; --cat-storage: #e5447d; --cat-ai: #2f8a3f; /* slightly darkened from #3FA34D for AA contrast on cream */ --cat-media: #d97706; /* slightly darkened amber for AA contrast */ --cat-connectivity: #7a4fd8; /* Soft tints — used for hover backgrounds, derived via color-mix */ --cat-compute-soft: color-mix(in srgb, var(--cat-compute) 12%, transparent); --cat-storage-soft: color-mix(in srgb, var(--cat-storage) 12%, transparent); --cat-ai-soft: color-mix(in srgb, var(--cat-ai) 12%, transparent); --cat-media-soft: color-mix(in srgb, var(--cat-media) 12%, transparent); --cat-connectivity-soft: color-mix(in srgb, var(--cat-connectivity) 12%, transparent); /* Page-level "current" accent. Default to Storage (the homepage's house color). Pages and individual mega-menu columns override this via the .accent--* utility classes defined right after :root — NOT via inline style="..." attributes. Inline styles would require relaxing our strict CSP (style-src 'self' without 'unsafe-inline'), which we'd rather not do. */ --cat-current: var(--cat-storage); --cat-current-soft: var(--cat-storage-soft); /* Semantic */ --ok: var(--cat-ai); --soon: var(--ink-faint); --idea: var(--cat-connectivity); --note: #ffe9a8; /* Type */ --font-sans: "General Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --font-mono: "JetBrains Mono", "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace; /* Space — 4px base unit */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-12: 48px; --space-16: 64px; --space-24: 96px; /* Layout */ --container: 1200px; --container-article: 860px; /* Radius */ --radius: 10px; --radius-sm: 6px; --radius-tab: 8px; /* Motion */ --ease: cubic-bezier(0.4, 0, 0.2, 1); --dur-hover: 150ms; --dur-fade: 180ms; --dur-draw: 600ms; /* Shadows */ --shadow-card: 0 1px 2px rgba(26, 24, 20, 0.04), 0 4px 12px rgba(26, 24, 20, 0.04); --shadow-note: 2px 4px 12px rgba(26, 24, 20, 0.12); --shadow-menu: 0 8px 30px rgba(26, 24, 20, 0.12), 0 1px 2px rgba(26, 24, 20, 0.05); } /* ─── Accent utility classes ────────────────────────────────── Apply one of these to any element to redefine --cat-current (and its -soft variant) for that element and its descendants. Used in two places today: 1.
— sets the page accent so eyebrows, code-tab fills, buttons, diagram accents, and inline links pick up the right color. 2.
— sets a single mega-menu column's accent so its category heading + hover states + active outlines match its category. The roadmap dialog gets its accent via JS (element.style.setProperty), which CSP allows; only HTML style="" attributes are blocked. Keeping these as classes lets us hold the line on `style-src 'self'` (no 'unsafe-inline'). */ .accent--compute { --cat-current: var(--cat-compute); --cat-current-soft: var(--cat-compute-soft); } .accent--storage { --cat-current: var(--cat-storage); --cat-current-soft: var(--cat-storage-soft); } .accent--ai { --cat-current: var(--cat-ai); --cat-current-soft: var(--cat-ai-soft); } .accent--media { --cat-current: var(--cat-media); --cat-current-soft: var(--cat-media-soft); } .accent--connectivity { --cat-current: var(--cat-connectivity); --cat-current-soft: var(--cat-connectivity-soft); } /* Dark theme overrides — applied when . IMPORTANT: scoped to `html[...]` rather than the bare attribute selector. The KV theme-toggle