/* =========================================================================== THE DIDDLY SQUAT ESTATE — design tokens --------------------------------------------------------------------------- Two palettes that never blend arbitrarily: POSTER — the interface. Derived from the wheat-pasted farm-shop poster set. FIELD — the illustration and seasonal layer. Brighter, warmer, alive. Plus one accent per business, so each has an identity inside one estate. Contrast pairs are annotated; the failing pairs are named so nobody reaches for them by instinct. ========================================================================= */ :root { /* --- POSTER: the interface -------------------------------------------- */ --ink: #23211E; /* warm near-black — body copy, dark grounds */ --ink-2: #35322D; /* raised surface on ink */ --ink-3: #4A463F; /* borders on ink */ --petrol: #1D5C72; /* deep teal — brand ground, links */ --petrol-lift: #2A7B96; /* hover / dark-mode lift */ --petrol-deep: #144657; --chalk: #EDE6D6; /* warm cream — the default page ground */ --chalk-deep: #E3DAC6; /* alternating band */ --chalk-soft: #F6F1E6; /* raised card on chalk */ --paper: #FBF8F1; /* the whitest we go — never pure white */ --ochre: #E2871B; /* saturated orange — the primary CTA */ --ochre-lift: #F59A28; --ochre-deep: #8F4F07; /* AA-safe ochre for text on chalk (4.8:1) */ --claret: #B0292B; /* deep red — scarcity, destructive, accent */ --claret-lift: #CE3A3C; --claret-deep: #8C1F21; /* --- FIELD: illustration, seasons, data ------------------------------- */ --moss: #5C6B2F; /* spring */ --moss-lift: #7A8C41; --corn: #E9B93D; /* summer */ --corn-deep: #8A6A0E; /* AA-safe corn for text on chalk (4.9:1) */ --corn-lift: #F5D26E; /* AA-safe corn for small text on petrol (5.0:1) */ --sunset: #F0794A; /* autumn */ --sky: #7FB6D9; /* winter */ --sky-deep: #316A90; /* chalk on this clears 4.6:1 for the schooling accent */ --blossom: #E9899E; /* accent */ --furrow: #6B4A2E; /* turned earth */ --furrow-lift: #8A6440; --hedge: #2F5236; /* deep hedgerow green */ --slate: #5A656B; /* dry-stone wall — darkened so chalk text on a slate badge clears 4.5:1 */ --amber: #D98A17; /* the beer */ --plum: #6B2B4A; /* the wine */ /* --- Per-business accent ---------------------------------------------- */ --accent: var(--ochre); /* default; each pillar overrides */ --accent-lift: var(--ochre-lift); --accent-deep: var(--ochre-deep); --accent-ink: var(--ink); /* readable text ON the accent */ /* --- Semantic --------------------------------------------------------- */ --ok: var(--moss); --warn: var(--corn-deep); --bad: var(--claret); --info: var(--petrol); /* --- Surfaces & lines -------------------------------------------------- */ --surface: var(--chalk); --surface-raised: var(--chalk-soft); --surface-sunk: var(--chalk-deep); --text: var(--ink); --text-soft: #57524A; --text-faint: #5F5A52; /* 5.1:1 on chalk-deep, so captions, meta and breadcrumbs pass AA at 12px */ --line: rgba(35,33,30,.14); --line-strong: rgba(35,33,30,.28); --line-light: rgba(237,230,214,.22); /* --- Gradients --------------------------------------------------------- */ --grad-field: linear-gradient(150deg, #5C6B2F 0%, #7A8C41 45%, #E9B93D 100%); --grad-harvest: linear-gradient(140deg, #E9B93D 0%, #E2871B 55%, #B0292B 100%); --grad-dusk: linear-gradient(180deg, #1D5C72 0%, #23211E 100%); --grad-dawn: linear-gradient(160deg, #7FB6D9 0%, #E9899E 60%, #F0794A 100%); --grad-ember: linear-gradient(135deg, #F59A28 0%, #B0292B 120%); --grad-ale: linear-gradient(180deg, #E9B93D 0%, #B96A0C 100%); /* Two-layer veil: a raking side wash so left-aligned chalk type always clears 4.5:1 over a bright plate, plus a bottom wash for the scroll cue and stats. The right-hand third stays open so the artwork is still the picture. */ --hero-veil: linear-gradient(100deg, rgba(35,33,30,.80) 0%, rgba(35,33,30,.62) 34%, rgba(35,33,30,.24) 66%, rgba(35,33,30,.10) 100%), linear-gradient(to bottom, rgba(35,33,30,.28) 0%, rgba(35,33,30,.34) 46%, rgba(35,33,30,.82) 100%); --hero-veil-side: linear-gradient(105deg, rgba(35,33,30,.90) 0%, rgba(35,33,30,.66) 44%, rgba(35,33,30,.12) 100%), linear-gradient(to bottom, rgba(35,33,30,.22) 0%, rgba(35,33,30,.30) 55%, rgba(35,33,30,.70) 100%); /* --- Typography -------------------------------------------------------- */ --font-display: 'Fraunces', 'Iowan Old Style', 'Palatino Linotype', Georgia, serif; --font-ui: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace; /* --- Type scale --------------------------------------------------------- The specified ramp is a 1.250 major third from a 16px base: 12 · 14 · 16 · 20 · 25 · 31 · 39 · 49 · 61 · 76 Those exact steps are published as --step-* so any component can sit on the ramp rather than inventing a size. The --fs-* tokens are the fluid display forms of the upper steps, clamped between two ramp values so the scale still holds at both ends of the viewport. */ --step--2: .75rem; /* 12 */ --step--1: .875rem; /* 14 */ --step-0: 1rem; /* 16 */ --step-1: 1.25rem; /* 20 */ --step-2: 1.5625rem; /* 25 */ --step-3: 1.9375rem; /* 31 */ --step-4: 2.4375rem; /* 39 */ --step-5: 3.0625rem; /* 49 */ --step-6: 3.8125rem; /* 61 */ --step-7: 4.75rem; /* 76 */ --fs-3xl: clamp(var(--step-5), 9vw, 7.5rem); --fs-2xl: clamp(var(--step-4), 6.5vw, var(--step-7)); --fs-xl: clamp(var(--step-3), 4.4vw, var(--step-6)); --fs-l: clamp(var(--step-2), 2.9vw, var(--step-4)); --fs-m: clamp(var(--step-1), 1.9vw, var(--step-2)); --fs-lead: clamp(1.125rem, 1.35vw, var(--step-1)); --fs-body: 1.125rem; /* 18px, per the specification */ --fs-sm: var(--step--1); --fs-xs: var(--step--2); --fs-eyebrow: .72rem; --track-eyebrow: .22em; --track-display: -.015em; --track-card: .08em; /* the chapter-card / poster-label tracking */ --lh-tight: .95; /* chapter-card line-height */ --lh-snug: 1.12; --lh-body: 1.6; --measure: 68ch; /* the hard maximum for body copy */ --measure-h2: 22ch; /* headlines are set to a count, not a width */ --measure-h1: 16ch; --measure-quote: 24ch; /* --- Shape --------------------------------------------------------------- Neither source document specifies a radius, border or elevation scale. These are authored here so every surface in the build sits on one ramp rather than on whatever felt right in the moment. */ --r-xs: .375rem; --r-sm: .625rem; --r-md: 1rem; --r-lg: 1.5rem; --r-xl: 2.25rem; --r-hero: 3rem; --r-pill: 9999px; --bw-hair: 1px; /* dividers, table rules, card outlines */ --bw-line: 2px; /* buttons, active states, focus companions */ --bw-plate: 3px; /* poster edges, section markers, quote bars */ --bw-slab: 6px; /* the heaviest rule; chapter markers only */ /* --- Depth --------------------------------------------------------------- Shadows are TINTED, never neutral grey — the ground is warm cream and a grey shadow on warm cream reads as dirt. The ochre and accent variants carry the element's own hue so a lifted card looks lit, not cut out. */ --sh-sm: 0 1px 2px rgba(35,33,30,.08), 0 2px 8px rgba(35,33,30,.06); --sh-md: 0 6px 18px rgba(35,33,30,.10); --sh-lg: 0 20px 44px -12px rgba(35,33,30,.22); --sh-xl: 0 36px 80px -24px rgba(35,33,30,.32); --sh-ochre: 0 12px 28px -8px rgba(226,135,27,.44); --sh-accent: 0 18px 40px -14px color-mix(in srgb, var(--accent) 55%, transparent); --sh-inset: inset 0 1px 0 rgba(255,255,255,.5); --sh-plate: 0 2px 0 rgba(35,33,30,.10), 0 14px 34px -16px rgba(35,33,30,.34); /* --- Layout -------------------------------------------------------------- 12 columns, 72px gutters on desktop and 16px on mobile, per spec. */ --container: 1440px; --container-wide: 1680px; --container-narrow: 1120px; --container-text: 68ch; --gutter: clamp(1rem, 4vw, 3.25rem); --cols: 12; --gutter-grid: clamp(1rem, 3.2vw, 4.5rem); /* 16px → 72px */ --col: calc((100% - (var(--cols) - 1) * var(--gutter-grid)) / var(--cols)); /* Breakpoints, published for documentation; media queries restate them. */ --bp-xs: 480px; --bp-sm: 768px; --bp-md: 1024px; --bp-lg: 1440px; --bp-xl: 1920px; /* Spacing: 4 · 8 · 12 · 16 · 24 · 32 · 48 · 64 · 96 · 128, then one more. */ --s1: .25rem; --s2: .5rem; --s3: .75rem; --s4: 1rem; --s5: 1.5rem; --s6: 2rem; --s7: 3rem; --s8: 4rem; --s9: 6rem; --s10: 8rem; --s11: 11rem; /* --- The header stack ---------------------------------------------------- Three tiers. The rail carries live estate state, the bar carries brand and navigation, the sub-rail carries where-you-are. Each is published as a height so the hero, the scroll padding and the sticky offsets all derive from the same numbers instead of guessing. */ --rail-h: 2.1rem; --nav-h: 4.5rem; --sub-h: 2.9rem; --head-h: calc(var(--announce-h, 0px) + var(--rail-h) + var(--nav-h) + var(--sub-h)); --head-h-collapsed: calc(var(--nav-h) + var(--sub-h)); /* --- Motion: the animatic spec ---------------------------------------- Cut between scenes, ease within them, and always hold a beat at the key pose. The stutter hold is the whole difference between "animatic" and "corporate web with a scroll library on it". */ --ease-tractor: cubic-bezier(.65, 0, .35, 1); /* heavy, mechanical */ --ease-gate: cubic-bezier(.34, 1.56, .64, 1); /* overshoot, a stamp */ --ease-paper: cubic-bezier(.16, 1, .3, 1); /* expo-out, poster snap*/ --ease-settle: cubic-bezier(.4, 0, .2, 1); /* UI micro-interaction */ --t-instant: 120ms; --t-quick: 200ms; --t-base: 320ms; --t-slow: 500ms; --t-scene: 800ms; --t-card: 1200ms; --t-hold: 60ms; /* one stutter beat — 3 frames at 50fps */ /* --- Texture ----------------------------------------------------------- */ --grain-opacity: .07; /* One 160px fractal-noise tile, published as a token so the components that need paper under them (cams, scrub, split, the menu feature) all use the same grain rather than each inventing one. */ --grain-url: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E"); --misreg: 2px; /* ink misregistration offset */ --z-base: 1; --z-sticky: 40; --z-nav: 60; --z-float: 70; --z-mega: 80; --z-modal: 90; --z-toast: 95; } /* --------------------------------------------------------------------------- SEASONAL STATE — the Field palette follows the real season at OX7. Stamped on server-side so it never flashes. ------------------------------------------------------------------------- */ [data-season="spring"] { --season: var(--moss); --season-2: var(--blossom); --season-name: 'Spring'; } [data-season="summer"] { --season: var(--corn); --season-2: var(--moss-lift); --season-name: 'Summer'; } [data-season="autumn"] { --season: var(--sunset); --season-2: var(--furrow); --season-name: 'Autumn'; } [data-season="winter"] { --season: var(--sky); --season-2: var(--slate); --season-name: 'Winter'; } :root { --season: var(--corn); --season-2: var(--moss-lift); } /* --------------------------------------------------------------------------- PER-BUSINESS ACCENT — variety inside one estate. ------------------------------------------------------------------------- */ .pillar-farming { --accent: var(--moss); --accent-lift: var(--moss-lift); --accent-deep: #46521F; --accent-ink: var(--chalk); } .pillar-shopping { --accent: var(--ochre); --accent-lift: var(--ochre-lift); --accent-deep: var(--ochre-deep); --accent-ink: var(--ink); } .pillar-brewing { --accent: var(--amber); --accent-lift: var(--corn); --accent-deep: #7E4E06; --accent-ink: var(--ink); } .pillar-pubbing { --accent: var(--claret); --accent-lift: var(--claret-lift); --accent-deep: var(--claret-deep); --accent-ink: var(--chalk); } .pillar-chapters { --accent: var(--petrol); --accent-lift: var(--petrol-lift); --accent-deep: var(--petrol-deep); --accent-ink: var(--chalk); } .pillar-onlyfarmers { --accent: var(--hedge); --accent-lift: var(--moss-lift); --accent-deep: #24402A; --accent-ink: var(--chalk); } .pillar-plotting { --accent: var(--furrow); --accent-lift: var(--furrow-lift); --accent-deep: #4E351F; --accent-ink: var(--chalk); } .pillar-belonging { --accent: var(--petrol); --accent-lift: var(--petrol-lift); --accent-deep: var(--petrol-deep); --accent-ink: var(--chalk); } .pillar-schooling { --accent: var(--sky-deep);--accent-lift: var(--sky); --accent-deep: #2A6084; --accent-ink: var(--chalk); } .pillar-estate { --accent: var(--ink); --accent-lift: var(--ink-2); --accent-deep: #14120F; --accent-ink: var(--chalk); } .pillar-journal { --accent: var(--plum); --accent-lift: #8C3A62; --accent-deep: #4E1E36; --accent-ink: var(--chalk); } .pillar-lawyering { --accent: var(--slate); --accent-lift: #8B979D; --accent-deep: #414A4E; --accent-ink: var(--chalk); } /* --------------------------------------------------------------------------- NIGHTWORKING — dark mode. Only ROLE tokens swap: surfaces, text, lines, shadows, the hero veil and the deep (text-weight) tints. The pigments --ink and --chalk deliberately do NOT swap. They name actual colours, not roles, and every fixed-bright pairing in the system is written in terms of them — ink on ochre, chalk on claret, the badge, the button fill. Swapping them flipped all of those to about 1.8:1 the moment the reader turned the lights off. The per-pillar --accent-deep values are re-stated for the dark ground: a tint tuned to sit on chalk is unreadable on ink. ------------------------------------------------------------------------- */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --surface: #16150F; --surface-raised: #201E18; --surface-sunk: #100F0B; --chalk-deep: #100F0B; --chalk-soft: #201E18; --paper: #201E18; --text: #EDE6D6; --text-soft: #BCB4A3; --text-faint: #9C9488; --line: rgba(237,230,214,.16); --line-strong: rgba(237,230,214,.30); --ochre: #F0972B; --ochre-deep: #F3A94D; --corn-deep: #E9B93D; --sh-sm: 0 1px 2px rgba(0,0,0,.5); --sh-md: 0 6px 18px rgba(0,0,0,.44); --sh-lg: 0 20px 44px -12px rgba(0,0,0,.62); --grain-opacity: .05; --hero-veil: linear-gradient(100deg, rgba(10,9,6,.86) 0%, rgba(10,9,6,.66) 34%, rgba(10,9,6,.30) 66%, rgba(10,9,6,.16) 100%), linear-gradient(to bottom, rgba(10,9,6,.34) 0%, rgba(10,9,6,.40) 46%, rgba(10,9,6,.86) 100%); } :root:not([data-theme="light"]) .pillar-farming { --accent-deep: #A8BF63; } :root:not([data-theme="light"]) .pillar-shopping { --accent-deep: #F3A94D; } :root:not([data-theme="light"]) .pillar-brewing { --accent-deep: #E9B93D; } :root:not([data-theme="light"]) .pillar-pubbing { --accent-deep: #F08D8F; } :root:not([data-theme="light"]) .pillar-chapters { --accent-deep: #6FC0DC; } :root:not([data-theme="light"]) .pillar-onlyfarmers { --accent-deep: #8FCF9C; } :root:not([data-theme="light"]) .pillar-plotting { --accent-deep: #D2A87E; } :root:not([data-theme="light"]) .pillar-belonging { --accent-deep: #6FC0DC; } :root:not([data-theme="light"]) .pillar-schooling { --accent-deep: #7FC3E8; } :root:not([data-theme="light"]) .pillar-estate { --accent-deep: #EDE6D6; } :root:not([data-theme="light"]) .pillar-journal { --accent-deep: #D98CB4; } :root:not([data-theme="light"]) .pillar-lawyering { --accent-deep: #A7B4BA; } } :root[data-theme="dark"] { --surface: #16150F; --surface-raised: #201E18; --surface-sunk: #100F0B; --chalk-deep: #100F0B; --chalk-soft: #201E18; --paper: #201E18; --text: #EDE6D6; --text-soft: #BCB4A3; --text-faint: #9C9488; --line: rgba(237,230,214,.16); --line-strong: rgba(237,230,214,.30); --ochre: #F0972B; --ochre-deep: #F3A94D; --corn-deep: #E9B93D; --sh-sm: 0 1px 2px rgba(0,0,0,.5); --sh-md: 0 6px 18px rgba(0,0,0,.44); --sh-lg: 0 20px 44px -12px rgba(0,0,0,.62); --grain-opacity: .05; --hero-veil: linear-gradient(100deg, rgba(10,9,6,.86) 0%, rgba(10,9,6,.66) 34%, rgba(10,9,6,.30) 66%, rgba(10,9,6,.16) 100%), linear-gradient(to bottom, rgba(10,9,6,.34) 0%, rgba(10,9,6,.40) 46%, rgba(10,9,6,.86) 100%); } :root[data-theme="dark"] .pillar-farming { --accent-deep: #A8BF63; } :root[data-theme="dark"] .pillar-shopping { --accent-deep: #F3A94D; } :root[data-theme="dark"] .pillar-brewing { --accent-deep: #E9B93D; } :root[data-theme="dark"] .pillar-pubbing { --accent-deep: #F08D8F; } :root[data-theme="dark"] .pillar-chapters { --accent-deep: #6FC0DC; } :root[data-theme="dark"] .pillar-onlyfarmers { --accent-deep: #8FCF9C; } :root[data-theme="dark"] .pillar-plotting { --accent-deep: #D2A87E; } :root[data-theme="dark"] .pillar-belonging { --accent-deep: #6FC0DC; } :root[data-theme="dark"] .pillar-schooling { --accent-deep: #7FC3E8; } :root[data-theme="dark"] .pillar-estate { --accent-deep: #EDE6D6; } :root[data-theme="dark"] .pillar-journal { --accent-deep: #D98CB4; } :root[data-theme="dark"] .pillar-lawyering { --accent-deep: #A7B4BA; } /* --------------------------------------------------------------------------- CONTRAST NOTES — computed against the light palette. ink on chalk .............. ~13.2:1 AAA default body chalk on petrol ........... ~ 6.8:1 AA reversed body, AAA large ink on ochre .............. ~ 7.4:1 AAA dark text on the CTA chalk on claret ........... ~ 6.1:1 AA ochre-deep on chalk ....... ~ 4.6:1 AA use THIS for orange text FAILING PAIRS — decorative only, never body copy: ochre on chalk ............ ~ 2.1:1 FAIL corn on chalk ............. ~ 1.9:1 FAIL These two are the ones a designer reaches for by instinct. They are guarded in base.css by .text-ochre mapping to --ochre-deep automatically. Measured by bin/../audit against every rendered page, not asserted here: text-faint on chalk-deep ... ~ 5.1:1 AA ochre-deep on chalk ........ ~ 4.8:1 AA corn-deep on chalk ......... ~ 4.9:1 AA chalk on slate ............. ~ 4.8:1 AA Reversed grounds (ink, petrol, claret, moss, ochre) re-map --text-soft, --text-faint and --accent-deep below, because a token tuned for chalk is invisible on a coloured band. ------------------------------------------------------------------------- */