/* ========================================================= Design tokens The one place to retheme the site: colours, type, spacing, shapes, shadows and motion. Nothing here outputs any CSS on its own; the other stylesheets read these values. Contrast ratios are WCAG 2.x, measured on the named background. Tints, hairlines and shadows are mixed from the base colours with color-mix(), so changing a base colour updates them too. (The hairlines and header fill also have plain rgba fallbacks here; update those by hand if --ink or --paper changes.) ========================================================= */ :root { /* ---- Colour: paper and bands (logo family) ------------ */ --paper: #FBF5EA; /* page background */ --cream: #F4E6CF; /* About band, card icon tiles, email pill */ --sand: #ECDDBB; /* secondary button hover */ --surface: #FFFCF6; /* cards and raised controls */ /* ---- Colour: ink -------------------------------------- */ --ink: #3A2B24; /* cocoa: text, primary button, Work panel (12.5:1 on paper) */ --ink-deep: #2A1E19; /* primary button hover */ --ink-muted: #6B5444; /* secondary text, AA on every light band (>= 5.2:1) */ --gold-ink: #735830; /* small accent text, AA on every light band (>= 4.9:1) */ /* ---- Colour: gold (decoration on light backgrounds) --- */ --gold: #BEA16B; /* horn shade */ --gold-light: #D7BA81; /* horn gold */ /* ---- Colour: text on the cocoa "Work with us" panel --- */ --on-ink: var(--cream); /* 11.0:1 */ --on-ink-muted: #C9B595; /* 6.8:1 */ --on-ink-accent: var(--gold-light); /* 7.2:1 */ /* ---- Colour: hairlines and translucent fills ---------- */ /* Plain fallbacks for browsers without color-mix() (Safari before 16.2); the @supports block at the end of this file mixes them from the base colours. Keep the rgba values in step with --ink (58, 43, 36) and --paper (251, 245, 234). */ --line: rgba(58, 43, 36, 0.14); --line-strong: rgba(58, 43, 36, 0.28); --header-bg: rgba(251, 245, 234, 0.94); /* frosted by the header's blur */ --hero-dots: color-mix(in srgb, var(--ink) 9%, transparent); /* faint dot grid behind the hero */ /* ---- Shadows: brown-tinted, never grey ---------------- */ --shadow-sm: 0 1px 2px color-mix(in srgb, var(--ink) 6%, transparent), 0 4px 12px -4px color-mix(in srgb, var(--ink) 14%, transparent); --shadow: 0 1px 2px color-mix(in srgb, var(--ink) 5%, transparent), 0 18px 40px -18px color-mix(in srgb, var(--ink) 30%, transparent); --shadow-btn: 0 8px 18px -8px color-mix(in srgb, var(--ink) 55%, transparent); --shadow-btn-hover: 0 12px 22px -10px color-mix(in srgb, var(--ink) 60%, transparent); --shadow-panel: 0 1px 2px color-mix(in srgb, var(--ink) 6%, transparent), 0 30px 60px -32px color-mix(in srgb, var(--ink) 42%, transparent); --shadow-on-ink: 0 16px 30px -18px rgba(26, 18, 14, 0.8); /* cocoa-black (no base colour is this dark), for pills on the cocoa panel */ /* ---- Type: font stacks -------------------------------- */ --font-display: "Baloo 2", "Fredoka", system-ui, sans-serif; /* chunky, echoes the wordmark */ --font-body: "Outfit", system-ui, -apple-system, "Segoe UI", sans-serif; /* ---- Type: size scale --------------------------------- */ /* Fixed, except 2xs, base, body, md, lg and 3xl, which grow on wider screens */ --text-2xs: clamp(0.625rem, 0.43rem + 0.8vw, 0.75rem); /* 10-12px "Soon" tag */ --text-xs: 0.8125rem; /* 13px hero eyebrow */ --text-sm: 1rem; /* 16px section eyebrows, card numbers, footer small print */ --text-base: clamp(1rem, 0.9rem + 0.2vw, 1.125rem); /* 16-18px buttons; header brand and card text on phones */ --text-body: clamp(1.0625rem, 1rem + 0.15vw, 1.125rem); /* 17-18px page text */ --text-md: clamp(1rem, 0.85rem + 0.6vw, 1.1875rem); /* 16-19px nav link, Discord note */ --text-lg: clamp(1.0625rem, 0.875rem + 0.8vw, 1.25rem); /* 17-20px card text, Work lead */ --text-xl: 1.375rem; /* 22px footer brand */ --text-2xl: 1.5rem; /* 24px card titles on phones */ --text-3xl: clamp(1.375rem, 5vw - 0.625rem, 1.625rem); /* 22-26px header brand; grows from 640 to 720px wide, so the tablet header fits */ --text-4xl: 2rem; /* 32px card titles */ /* ---- Type: fluid sizes (phone min -> desktop max) ----- */ --text-lead: clamp(1.0625rem, 1rem + 0.4vw, 1.3125rem); /* hero support line */ --text-blurb: clamp(1.0625rem, 0.8rem + 1.2vw, 1.5rem); /* About blurb */ --text-email: clamp(1.25rem, 0.7rem + 2.75vw, 2.25rem); /* address in the email pill */ --text-tagline: clamp(2rem, 1.35rem + 2vw, 3.125rem); /* capped so the wordmark stays the hero */ --text-title: clamp(2.25rem, 1.55rem + 3.25vw, 4.125rem); /* section headings */ --text-title-sm: clamp(2.125rem, 1.225rem + 3.7vw, 3.75rem); /* heading inside the narrower Work panel */ --text-not-found: clamp(2.25rem, 1.5rem + 2.6vw, 3.625rem); /* 404 title, sized to sit with the hero type */ /* ---- Type: line heights and tracking ------------------ */ --leading-tight: 1.05; /* display headings */ --leading-snug: 1.6; /* small print, "Soon" tag */ --leading-body: 1.65; /* running text */ --tracking-display: -0.01em; /* display type sits a touch tighter */ /* ---- Spacing scale (4px base) ------------------------- */ --space-1: 0.25rem; /* 4 */ --space-2: 0.5rem; /* 8 */ --space-3: 0.75rem; /* 12 */ --space-4: 1rem; /* 16 */ --space-5: 1.5rem; /* 24 */ --space-6: 2rem; /* 32 */ --space-7: 3rem; /* 48 */ --space-8: 4rem; /* 64 */ /* ---- Layout ------------------------------------------- */ --container: 1360px; /* content width */ --gutter: clamp(20px, 4vw, 48px); /* side padding */ --section-y: clamp(4rem, 2.5rem + 4.5vw, 6.5rem); /* vertical section padding */ --divider-h: clamp(4rem, 7vw, 7.5rem); /* About wave height; the hero reserves this much room for it */ --header-h: 96px; /* sticky header height ... */ --header-h-sm: 72px; /* ... and on phones (640px and below) */ /* ---- Component sizes (-sm: phones, 640px and below) --- */ /* --mark is also sizes="46px" on the header logo in index.html and 404.html, and --mark-footer is sizes="34px" in index.html: change them together */ --mark: 46px; /* logo mark in the header ... */ --mark-sm: 36px; --mark-footer: 34px; /* ... and in the footer */ --icon-btn: 52px; /* round social buttons */ --icon-btn-sm: 44px; /* never below a 44px tap target */ --card-pad: clamp(2rem, 2.75vw, 2.5rem); /* value cards: 32-40px padding (slimmer on small laptops, so three fit in a row) ... */ --card-icon: 60px; /* ... and icon tile */ --card-icon-sm: 44px; --mail-icon: 64px; /* email pill: icon circle and arrow */ --mail-icon-sm: 48px; --mail-arrow: 24px; /* ---- Shape -------------------------------------------- */ --radius-focus: 6px; --radius-tile-sm: 12px; /* card icon tile on phones */ --radius-tile: 18px; /* card icon tile */ --radius-card: 20px; --radius-panel: 28px; --radius-pill: 999px; /* ---- Motion ------------------------------------------- */ --ease: cubic-bezier(0.4, 0, 0.2, 1); --speed: 200ms; } /* Browsers with color-mix(): mix the hairlines and header fill from the base colours, replacing the rgba fallbacks above */ @supports (color: color-mix(in srgb, red, blue)) { :root { --line: color-mix(in srgb, var(--ink) 14%, transparent); --line-strong: color-mix(in srgb, var(--ink) 28%, transparent); --header-bg: color-mix(in srgb, var(--paper) 94%, transparent); /* frosted by the header's blur */ } }