/* ===================================================================== THEME.CSS — the ONLY file you need to touch to change how the site looks. Every colour, font, size and spacing lives here as a variable. Change a value here and it updates everywhere on every page. Structure: 1. Brand / typography (fonts, weights) 2. Sizing & spacing (widths, radius, gaps) 3. LIGHT theme colours (:root) 4. DARK theme colours (system + manual override) 5. Motion HOW DARK MODE WORKS (read this): - Light is the default in :root. - Dark is applied two ways, both defined below: a) automatically when the visitor's OS is in dark mode (the @media prefers-color-scheme block) b) when the visitor clicks the theme toggle, which sets (the [data-theme="dark"] block) - The dark palette is designed on its own, NOT by inverting light. Warm charcoal + warm off-white so it feels intentional, not harsh. HOW TO CHANGE THE DEFAULT MODE: Default is "follow the system". To force a default instead, open the tag in the page files and set data-default-theme="light" or "dark" (it's currently "system"). See README.md. ===================================================================== */ :root { /* 1. TYPOGRAPHY ---------------------------------------------------- */ /* System fonts = zero external requests, fast + private. To use a web font instead, load it in the and swap the first name in here. */ --font-head: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, "Times New Roman", serif; --font-body: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arabic, sans-serif; --weight-body: 400; --weight-strong: 600; --weight-head: 600; /* Fluid type scale (min, preferred, max). Adjust the middle vw value to make headings grow faster/slower with screen size. */ --step-hero: clamp(2.4rem, 1.4rem + 4.4vw, 4.2rem); --step-h1: clamp(1.9rem, 1.3rem + 2.6vw, 3rem); --step-h2: clamp(1.4rem, 1.1rem + 1.4vw, 2rem); --step-h3: clamp(1.15rem, 1rem + 0.6vw, 1.4rem); --step-body: clamp(1rem, 0.97rem + 0.15vw, 1.12rem); --step-small: 0.9rem; --line-body: 1.7; --line-head: 1.15; --tracking-head: -0.01em; --tracking-eyebrow: 0.14em; /* 2. SIZING & SPACING --------------------------------------------- */ --measure: 68ch; /* max reading width for text blocks */ --container: 1140px; /* max width of the page */ --container-narrow: 780px; --radius: 14px; /* card / button corner rounding */ --radius-sm: 8px; --border: 1px; /* Spacing scale — use these instead of random pixel values */ --space-1: 0.5rem; --space-2: 1rem; --space-3: 1.5rem; --space-4: 2.5rem; --space-5: 4rem; --space-6: 6rem; --shadow: 0 1px 2px rgba(18, 28, 26, 0.05), 0 6px 24px -12px rgba(18, 28, 26, 0.14); /* 3. LIGHT THEME COLOURS ------------------------------------------ */ /* Cool, clean neutral base (no warm/brown cast) with a teal accent. */ --bg: #f1f5f4; /* page background — cool off-white */ --surface: #ffffff; /* cards, header — clean white */ --surface-2: #e6edeb; /* subtle panels, code, hovers */ --ink: #182220; /* main text — cool near-black */ --ink-soft: #52605d; /* secondary text */ --ink-faint: #7f8c89; /* captions, meta */ --line: #dbe4e2; /* hairlines, borders */ --accent: #1a5276; /* deep navy blue — links, buttons */ --accent-hover:#143f5a; --accent-ink: #17496a; /* accent text that must stay readable */ --accent-soft: #dde8f1; /* tinted backgrounds (badges, callouts) */ --on-accent: #f5f9fc; /* text on top of the accent colour */ --focus: #c07a1e; /* focus ring — warm amber, pops on navy */ /* Illustration colours — inline SVGs read these so art re-themes itself in dark mode instead of looking broken. */ --art-1: var(--accent); --art-2: #7aa6bf; /* lighter steel-blue secondary */ --art-3: var(--surface-2); --art-line: var(--ink); /* 5. MOTION ------------------------------------------------------- */ --ease: cubic-bezier(0.2, 0.7, 0.2, 1); --dur: 0.22s; } /* ===================================================================== 4. DARK THEME Two triggers, identical palette. Edit the colours in ONE place by changing the custom properties inside --dark-* below, then they feed both blocks. (Kept as a reusable block via a helper class pattern.) ===================================================================== */ /* The dark palette, defined once. */ :root { --dark-bg: #12181a; /* cool charcoal, not pure black */ --dark-surface: #1a2123; --dark-surface-2: #232c2e; --dark-ink: #e6eceb; /* cool off-white, not pure white */ --dark-ink-soft: #a4afac; --dark-ink-faint: #77827f; --dark-line: #2b3436; --dark-accent: #5aa0cc; /* navy lifted for dark bg so it reads */ --dark-accent-hover:#74b1d8; --dark-accent-ink:#8fc0e2; --dark-accent-soft:#16293a; --dark-on-accent: #08202c; --dark-focus: #d99a3f; --dark-art-2: #5f8aa6; /* steel-blue secondary */ --dark-shadow: 0 1px 2px rgba(0,0,0,0.3), 0 10px 30px -14px rgba(0,0,0,0.6); } /* Shared mapping: applied when OS = dark AND user hasn't chosen light, OR when user explicitly picks dark. */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --bg: var(--dark-bg); --surface: var(--dark-surface); --surface-2: var(--dark-surface-2); --ink: var(--dark-ink); --ink-soft: var(--dark-ink-soft); --ink-faint: var(--dark-ink-faint); --line: var(--dark-line); --accent: var(--dark-accent); --accent-hover: var(--dark-accent-hover); --accent-ink: var(--dark-accent-ink); --accent-soft: var(--dark-accent-soft); --on-accent: var(--dark-on-accent); --focus: var(--dark-focus); --art-2: var(--dark-art-2); --shadow: var(--dark-shadow); } } :root[data-theme="dark"] { --bg: var(--dark-bg); --surface: var(--dark-surface); --surface-2: var(--dark-surface-2); --ink: var(--dark-ink); --ink-soft: var(--dark-ink-soft); --ink-faint: var(--dark-ink-faint); --line: var(--dark-line); --accent: var(--dark-accent); --accent-hover: var(--dark-accent-hover); --accent-ink: var(--dark-accent-ink); --accent-soft: var(--dark-accent-soft); --on-accent: var(--dark-on-accent); --focus: var(--dark-focus); --art-2: var(--dark-art-2); --shadow: var(--dark-shadow); }