/* ============================================================ THEME.CSS — the color "control panel" for the site ============================================================ The palette here is the one from the Early Years Books house style guide, so the website and the books look like they come from the same practice. The guide's six colours are: Deep teal #164F4C the anchor — headings, buttons, links Teal #1F6F6B section headings, small accents Terracotta #C75B41 the highlight — used sparingly Ink #33383D all body text (warm near-black) Muted #77807F captions, labels, footer notes Hairline #D9E2E0 the thin rules between things Everything below comes from just SIX dials: - a HUE (what color) and CHROMA (how vivid) for each of: 1. Teal — the main accent; carries the structure 2. Terracotta — the highlight; does the pointing 3. Grey — the neutral used for backgrounds and text, very slightly teal-tinted so it sits with the accents instead of looking icy Turn any dial and the whole site shifts together, because every other color on this page is *calculated* from these six numbers — nothing else in this file is a "raw" color. To retune: change a --*-hue or --*-chroma value below and reload. Nothing else needs to change. The six guide colours land on named steps of the ramps, so each one is always available by name: Deep teal = --teal-700 Ink = --grey-900 Teal = --teal-500 Muted = --grey-500 Terracotta = --terracotta-500 Hairline = --grey-300 ============================================================ */ :root { /* ---- THE SIX DIALS ---- */ --teal-hue: 190; /* blue-green family */ --teal-chroma: 0.075; /* calm, not tropical */ --terracotta-hue: 35; /* warm clay / burnt-orange family */ --terracotta-chroma: 0.144; /* the one vivid colour in the set */ --grey-hue: 190; /* tied to the teal, so the greys read as part of the family, not as cold steel */ --grey-chroma: 0.011; /* just a whisper of colour */ /* ------------------------------------------------------------ TEAL RAMP — from almost-white teal tint to near-black teal. Chroma is pulled down near the ends on purpose: pure white and pure black don't hold color well, so pushing full chroma there just looks muddy or oversaturated. Step 500 is the guide's Teal, step 700 its Deep teal. ------------------------------------------------------------ */ --teal-50: oklch(97% 0.010 var(--teal-hue)); --teal-100: oklch(93% 0.020 var(--teal-hue)); --teal-200: oklch(87% 0.035 var(--teal-hue)); --teal-300: oklch(78% 0.050 var(--teal-hue)); --teal-400: oklch(63% 0.066 var(--teal-hue)); --teal-500: oklch(49.4% var(--teal-chroma) var(--teal-hue)); /* Teal #1F6F6B */ --teal-600: oklch(44% 0.068 var(--teal-hue)); --teal-700: oklch(39.1% 0.058 var(--teal-hue)); /* Deep teal #164F4C — the anchor */ --teal-800: oklch(30% 0.046 var(--teal-hue)); --teal-900: oklch(21% 0.033 var(--teal-hue)); /* ------------------------------------------------------------ TERRACOTTA RAMP — the highlight. Hover states, the current page in the nav, focus rings, and pale tinted panels — never big blocks of colour. The guide's rule holds on screen too: if more than about a tenth of the page is terracotta, it has stopped being a highlight. Step 500 is the guide's Terracotta. ------------------------------------------------------------ */ --terracotta-50: oklch(97% 0.012 var(--terracotta-hue)); --terracotta-100: oklch(94% 0.030 var(--terracotta-hue)); --terracotta-200: oklch(89% 0.055 var(--terracotta-hue)); --terracotta-300: oklch(80% 0.095 var(--terracotta-hue)); --terracotta-400: oklch(70% 0.125 var(--terracotta-hue)); --terracotta-500: oklch(60.05% var(--terracotta-chroma) var(--terracotta-hue)); /* Terracotta #C75B41 */ --terracotta-600: oklch(53% 0.135 var(--terracotta-hue)); --terracotta-700: oklch(45% 0.112 var(--terracotta-hue)); --terracotta-800: oklch(35% 0.086 var(--terracotta-hue)); --terracotta-900: oklch(26% 0.062 var(--terracotta-hue)); /* ------------------------------------------------------------ GREY RAMP — the neutral. This is every plain grey on the site: page background, card backgrounds, body text, rules. Its hue is the teal's at a seventh of the chroma, which is what stops the page reading as cold newsprint. Step 300 is the guide's Hairline, 500 its Muted, 900 its Ink. ------------------------------------------------------------ */ --grey-50: oklch(99% 0.003 var(--grey-hue)); /* page background */ --grey-100: oklch(97% 0.005 var(--grey-hue)); /* card background */ --grey-200: oklch(93.5% 0.008 var(--grey-hue)); /* subtle fills */ --grey-300: oklch(90.5% 0.010 var(--grey-hue)); /* Hairline #D9E2E0 — rules and dividers */ --grey-400: oklch(75% 0.011 var(--grey-hue)); --grey-500: oklch(59.2% var(--grey-chroma) var(--grey-hue)); /* Muted #77807F */ --grey-600: oklch(52% 0.011 var(--grey-hue)); --grey-700: oklch(46.5% 0.011 var(--grey-hue)); /* secondary text: Muted, darkened enough to clear the 4.5:1 web contrast floor */ --grey-800: oklch(40% 0.011 var(--grey-hue)); --grey-900: oklch(33.8% 0.011 var(--grey-hue)); /* Ink #33383D — body text */ /* ========================================================== THE FIVE MAIN COLORS — what style.css actually reaches for. Change the ramps above and these all move automatically. ========================================================== */ --color-primary: var(--teal-700); /* nav, headings, main buttons — Deep teal */ --color-primary-dark: var(--teal-800); /* footer, hover on primary */ --color-accent: var(--terracotta-600); /* highlights, link hover, small CTAs. One step darker than the book's Terracotta on purpose: at reading size on a lit screen the book colour sits just under the 4.5:1 contrast minimum, so coloured *text* uses 600, while the tints are built from the exact 500. */ --color-background: var(--grey-50); /* page background — off-white, not stark */ --color-text: var(--grey-900); /* body copy — Ink, easier on the eyes than pure black */ /* ========================================================== THE OLDER NAMES — pointed at the ramps above ---------------------------------------------------------- style.css was written against an earlier set of names. Rather than rename several hundred lines, those names are aliases now. Nothing below is a new colour: every line points back at a step of a ramp above. "accent" -> teal (the main accent) "accent-2" -> terracotta (the highlight) "neutral" -> grey (the neutrals) ========================================================== */ --color-bg: var(--grey-50); /* page background */ --color-surface: var(--grey-100); /* cards sitting on the background */ --color-divider: var(--grey-300); /* Hairline — every thin rule on the site */ /* The main accent, and its ramp */ --color-accent-100: var(--teal-100); --color-accent-200: var(--teal-200); --color-accent-300: var(--teal-300); --color-accent-400: var(--teal-400); --color-accent-500: var(--teal-500); --color-accent-600: var(--teal-600); --color-accent-700: var(--teal-700); --color-accent-800: var(--teal-800); --color-accent-900: var(--teal-900); /* The highlight, and its ramp */ --color-accent-2: var(--terracotta-500); --color-accent-2-100: var(--terracotta-100); --color-accent-2-200: var(--terracotta-200); --color-accent-2-300: var(--terracotta-300); --color-accent-2-400: var(--terracotta-400); --color-accent-2-500: var(--terracotta-500); --color-accent-2-600: var(--terracotta-600); --color-accent-2-700: var(--terracotta-700); --color-accent-2-800: var(--terracotta-800); --color-accent-2-900: var(--terracotta-900); /* The neutrals */ --color-neutral-100: var(--grey-100); --color-neutral-200: var(--grey-200); --color-neutral-300: var(--grey-300); --color-neutral-400: var(--grey-400); --color-neutral-500: var(--grey-500); --color-neutral-600: var(--grey-600); --color-neutral-700: var(--grey-700); --color-neutral-800: var(--grey-800); --color-neutral-900: var(--grey-900); /* ========================================================== TYPE, SPACING, CORNERS, SHADOWS Not colour, but the other knobs style.css reads. ========================================================== */ --font-heading: "Caprasimo", Georgia, serif; --font-heading-weight: 400; --font-body: "Figtree", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --space-1: 4.4px; --space-2: 8.8px; --space-3: 13.2px; --space-4: 17.6px; --space-6: 26.4px; --space-8: 35.2px; --radius-sm: 8px; --radius-md: 16px; --radius-lg: 28px; /* Ink is a soft near-black rather than a true one, so these percentages are a little higher than they used to be — otherwise the cards would float with nothing under them. */ --shadow-sm: 0 1px 2px color-mix(in srgb, var(--grey-900) 18%, transparent); --shadow-md: 0 3px 10px color-mix(in srgb, var(--grey-900) 20%, transparent); --shadow-lg: 0 12px 32px color-mix(in srgb, var(--grey-900) 28%, transparent); /* Widths */ --width-page: 1080px; /* the home page's wide sections */ --width-prose: 720px; /* the narrower text pages: about, contact */ }