/* ========================================================================== LITTLE DOVES — DESIGN TOKENS Aesthetic: Warm Editorial Nurture x High-Precision Modernist Educational UI -------------------------------------------------------------------------- Every text/surface pair declared here has been measured against WCAG 2.1. Measured ratios are recorded inline. Nothing below 4.5:1 is permitted to carry body copy; nothing below 3:1 is permitted to carry a UI boundary. ========================================================================== */ :root { /* --------------------------------------------------------------------- 1. OFFICIAL BRAND PALETTE (Feltonfleet / Little Doves brand guidelines) Raw brand values. Used as fills, graphic fields and large display accents. See §2 for the accessible ink shades derived from them. --------------------------------------------------------------------- */ --brand-sage: #84b167; /* PMS 377 — primary accent */ --brand-dark-blue: #004b77; /* PMS 295 — Feltonfleet heritage */ --brand-pale-blue: #5aadda; /* PMS 292 — supporting */ --brand-pale-green: #aed477; /* PMS 367 — supporting */ --brand-grass-green: #8dc63f; /* PMS 376 — supporting */ --brand-cool-grey: #58595b; /* PMS Cool Grey 11C — text / structure */ --brand-orange: #fbaf40; /* Tigers yellow — rules and markers ONLY. 1.82:1 on off-white, so it can never carry text and can never be a lone UI boundary. */ --brand-off-white: #fcfdfa; --brand-white: #ffffff; /* --------------------------------------------------------------------- 2. ACCESSIBLE INK RAMP Brand hues deepened to clear 4.5:1. These are shades of the brand colours, not new colours — they keep the palette compliant in text. --------------------------------------------------------------------- */ --ink-strong: #26312a; /* 13.23:1 on off-white — AAA — headings, figures */ --ink-body: #58595b; /* 6.87:1 on off-white — AA — body copy, PMS Cool Grey 11C */ --ink-muted: #58595b; /* 6.87:1 on off-white — AA — meta, captions */ --ink-blue: #004b77; /* 9.05:1 on off-white — AAA — links, headings */ --ink-sage: #3f5c2b; /* 7.41:1 on off-white — AAA — sage-family text */ /* Large display text only (>=24px). The logo green #84b167 is 2.43:1 and cannot carry text at any size; this is that green darkened just enough to clear the 3:1 large-text threshold, so it reads as the brand green. */ --ink-sage-display: #709f52; /* 3.04:1 on off-white — large display only */ --ink-on-dark: #ffffff; /* 9.24:1 on --surface-blue — AAA */ /* --------------------------------------------------------------------- 3. SURFACES Brand rule: white space is the dominant surface. Tints stay under 8% so the page keeps breathing. --------------------------------------------------------------------- */ --surface-page: #fcfdfa; --surface-raised: #ffffff; --surface-sage-tint: #eff4e8; /* sage @ ~8% — ink-strong 12.07:1 AAA */ --surface-blue-tint: #e7eef3; /* dark blue @ ~8% */ --surface-blue: #003a5c; /* deepened PMS 295 — white 11.93:1 AAA */ --surface-blue-mid: #004b77; /* PMS 295 exact — white 9.24:1 AAA */ --surface-sage: #84b167; /* PMS 377 exact — ink-strong 5.44:1 AA */ --surface-ink: #26312a; /* Brand transparency rule — ~70% opacity overlays on brand accents. Each verified to carry --ink-strong above 7:1. */ --overlay-sage-70: rgba(132, 177, 103, 0.70); /* 7.30:1 w/ ink-strong */ --overlay-pale-blue-70: rgba( 90, 173, 218, 0.70); /* 7.20:1 */ --overlay-pale-green-70: rgba(174, 212, 119, 0.70); /* 9.34:1 */ --overlay-grass-70: rgba(141, 198, 63, 0.70); /* 8.16:1 */ /* --------------------------------------------------------------------- 4. STRUCTURAL LINES Modernist precision comes from hairlines, not shadows. --------------------------------------------------------------------- */ /* Decorative dividers — no contrast requirement. */ --line-hairline: rgba(251, 175, 64, 0.55); --line-soft: rgba(251, 175, 64, 0.32); --line-neutral: rgba(88, 89, 91, 0.16); /* kept for anything that must stay grey */ --line-sage: rgba(132, 177, 103, 0.45); --line-on-dark: rgba(255, 255, 255, 0.28); /* Control boundaries — WCAG 1.4.11 requires 3:1 against the adjacent surface. Measured 3.42:1 on --surface-page. Use for anything the user can operate: inputs, radios, switches, segmented groups, toggles. */ --line-strong: rgba(38, 49, 42, 0.56); --line-on-dark-ctl: rgba(255, 255, 255, 0.42); /* 3.38:1 on --surface-blue */ /* Off-state switch track — 3.19:1 on --surface-page, 3.25:1 vs its knob. */ --control-off: #889189; --placeholder: #666e68; /* 5.15:1 on --surface-page */ /* --------------------------------------------------------------------- 5. TYPOGRAPHY — two families only Display : EB Garamond — stands in for Perpetua Body/UI : Jost — stands in for Futura (also carries figures, tags and fee tables, with tabular numerals) --------------------------------------------------------------------- */ --font-display: "EB Garamond", Perpetua, "Palatino Linotype", Georgia, serif; --font-body: "Jost", Futura, "Century Gothic", "Segoe UI", sans-serif; /* Kept as a variable so every former monospace rule still resolves, but it now points at the body face — Marketing asked for two typefaces, not three. Figures that need to line up use font-variant-numeric instead. */ --font-mono: "Jost", Futura, "Century Gothic", "Segoe UI", sans-serif; /* Type scale — high jump: H1 sits ~6x body, H2 ~3x body */ /* Sized so the two hero lines never wrap, from 320px to 1920px. Retuned for EB Garamond: its italic sets "Growing for life." at 6.93x the font size, against 5.6x for the previous face, so the old curve overflowed by 359px on a phone. Derived from shell width / 6.93 with ~8% headroom. */ --fs-hero: clamp(2rem, -0.1rem + 8.6vw, 5.75rem); --fs-h1: clamp(2.75rem, 1.5rem + 5.2vw, 5.5rem); --fs-h2: clamp(2rem, 1.3rem + 3.0vw, 3.5rem); --fs-h3: clamp(1.5rem, 1.2rem + 1.2vw, 2rem); --fs-h4: clamp(1.1875rem, 1.1rem + 0.4vw, 1.375rem); --fs-lead: clamp(1.1875rem, 1.09rem + 0.5vw, 1.4375rem); --fs-body: 1.0625rem; /* 17px */ --fs-small: 0.9375rem; /* 15px */ /* Raised from 13px / 12px on 22 Sep 2026 — Admissions reported the small mono headings were too small to read comfortably. */ --fs-micro: 0.875rem; /* 14px */ --fs-eyebrow: 0.8125rem; /* 13px — mono, tracked */ --lh-tight: 1.02; --lh-display: 1.06; --lh-heading: 1.14; --lh-body: 1.62; --lh-relaxed: 1.72; --tracking-display: -0.018em; --tracking-tight: -0.011em; --tracking-eyebrow: 0.16em; --tracking-mono: 0.02em; /* --------------------------------------------------------------------- 6. SPATIAL RHYTHM — rigid 8px grid --------------------------------------------------------------------- */ --s-1: 0.25rem; /* 4px */ --s-2: 0.5rem; /* 8px */ --s-3: 0.75rem; /* 12px */ --s-4: 1rem; /* 16px */ --s-5: 1.5rem; /* 24px */ --s-6: 2rem; /* 32px */ --s-7: 2.5rem; /* 40px */ --s-8: 3rem; /* 48px */ --s-9: 4rem; /* 64px */ --s-10: 5rem; /* 80px */ --s-11: 6rem; /* 96px */ --s-12: 8rem; /* 128px */ --s-13: 10rem; /* 160px */ --s-14: 12rem; /* 192px */ /* Section rhythm — generous white space is a brand requirement, but the caps are set so that section padding stacked on a component's own padding never opens a void at 1920px and beyond. */ --section-y: clamp(3.75rem, 2rem + 6.5vw, 8rem); --section-y-lg: clamp(4.5rem, 2rem + 8.5vw, 10rem); /* --------------------------------------------------------------------- 7. MEASURE & CONTAINERS --------------------------------------------------------------------- */ --shell-max: 82.5rem; /* 1320px */ --shell-pad: clamp(1.25rem, 0.5rem + 3.2vw, 4.5rem); --measure: 64ch; --measure-tight:52ch; --measure-wide: 76ch; /* --------------------------------------------------------------------- 8. FORM & CONTROL GEOMETRY Sharp for structure, pill for actions — the deliberate tension between modernist precision and nurturing warmth. --------------------------------------------------------------------- */ --radius-flat: 0px; --radius-control: 3px; --radius-pill: 999px; --control-h: 3.25rem; /* 52px — comfortable touch target */ --tap-min: 2.75rem; /* 44px — WCAG 2.5.5 minimum */ /* --------------------------------------------------------------------- 9. MOTION --------------------------------------------------------------------- */ --ease-out: cubic-bezier(0.22, 0.68, 0.28, 1); --ease-inout: cubic-bezier(0.62, 0.02, 0.22, 1); --dur-fast: 140ms; --dur-base: 260ms; --dur-slow: 520ms; --dur-reveal: 820ms; /* --------------------------------------------------------------------- 10. FOCUS — visible on every ground (min 3:1 vs every surface used) --------------------------------------------------------------------- */ --focus-ring: #004b77; --focus-ring-dark: #ffffff; --focus-width: 3px; --focus-offset: 3px; --header-h: 4.75rem; --z-header: 60; --z-overlay: 90; } @media (min-width: 60rem) { :root { --header-h: 5.5rem; } } /* Users who prefer reduced motion get the layout, never the movement. */ @media (prefers-reduced-motion: reduce) { :root { --dur-fast: 1ms; --dur-base: 1ms; --dur-slow: 1ms; --dur-reveal: 1ms; } }