/* ========================================================================== Ag360 — design tokens Single source of truth for colour, type, spacing and motion. This file is the lift-and-shift surface for the WordPress theme: porting the site means porting this file plus the template parts, not restyling. ========================================================================== */ :root { /* ---- Brand palette (from the client brand doc / PRD section 2) --------- Usage lock, applied site-wide: green = ACTION. Every primary CTA, and emphasised words in headlines. blue = a panel fill and the ring mark. Never an action. No colour outside this palette appears on the site. */ --ag-blue: #1E40AF; /* Primary Blue - Deep sky blue */ --ag-green: #16A34A; /* Primary Green - Verdant green */ --ag-navy: #001887; /* Secondary blue - Navy field */ --ag-forest: #008540; /* Secondary green - Forest green */ --ag-blue-light: #5A7CEB; /* Tertiary blue - Cloud blue */ --ag-green-light: #48D586; /* Tertiary green - Mint green */ --ink: #0B1420; /* Body text */ --paper: #F3F6F4; /* Page ground */ /* ---- Support neutrals -------------------------------------------------- Green-grey darks for the page ground. The single warm value is --bone, declared further down; there is no terracotta, brass or ochre anywhere. */ --canopy: #0C2A1C; /* Deep green-black: dark bands, footer, scrims */ --canopy-soft: #14382A; /* One step up from canopy, for layering */ --field: #E4EAE4; /* One step under paper: quiet alternating bands */ --stone: #6B7A72; /* Muted green-grey: secondary text, hairlines */ --stone-dark: #4A574F; /* Secondary text that must pass AA on paper */ /* ---- Semantic assignments --------------------------------------------- */ --bg: var(--paper); --bg-alt: var(--field); --bg-invert: var(--canopy); --text: var(--ink); --text-muted: var(--stone-dark); --text-on-invert: #EAF1EC; --text-muted-invert: #A9BFB2; --rule: rgba(107, 122, 114, 0.22); --rule-invert: rgba(234, 241, 236, 0.18); --focus: var(--ag-blue); /* ---- Type ------------------------------------------------------------- Display and body are both Inter: display is Inter 800 set in caps, which is what carries the poster weight of this design. Data is IBM Plex Mono, reserved for dates, prices, seat counts and the countdown; never for decorative labels. --font-display is retained only so the Newsreader files stay wired up if the serif is ever reinstated. Nothing currently references it. */ --font-display: 'Newsreader', 'Iowan Old Style', Georgia, serif; --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --font-mono: 'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace; /* TYPE SCALE - one scale, defined here and nowhere else. Two tracks, and they are deliberately independent. DISPLAY is simple multiples of the h3: 24 / 48 / 72. This language is poster weight - the display sizes carry it, so they stay large. An earlier pass cut them to 54/36 and the page went flat. TEXT steps gently (13 / 15 / 16 / 18) because reading sizes want small increments. Shrinking the text track is what fixed oversized body copy; it is independent of the display track, so headings can be large without paragraphs following them up. Body is 16px and --t-lead is 18px. --t-lead used to reach 21px and is applied to most paragraphs on the site, which is what made body copy read oversized. Everything reaches its maximum by ~1200px; past that the page gets wider, not shouty. Do not hard-code a font-size on h1-h4 anywhere else - that is what produced two competing scales before. */ --t-h1: clamp(2.5rem, 1.5rem + 4.2vw, 4.5rem); /* 40 -> 72 */ --t-h2: clamp(1.875rem, 1.2rem + 2.8vw, 3rem); /* 30 -> 48 */ --t-h3: clamp(1.25rem, 1.1rem + 0.5vw, 1.5rem); /* 20 -> 24 */ --t-h4: 1rem; /* 16 */ --t-lead: clamp(1.0625rem, 1rem + 0.25vw, 1.125rem); /* 17 -> 18 */ --t-body: 1rem; /* 16 */ --t-small: 0.9375rem; /* 15 */ --t-micro: 0.8125rem; /* 13 */ --t-label: 0.6875rem; /* 11 */ /* Optical tracking: tighter as the size grows, never on small text. */ --ls-h1: -0.028em; --ls-h2: -0.022em; --ls-h3: -0.012em; --lh-display: 1.06; --lh-heading: 1.14; --lh-body: 1.65; /* ---- Space (4px base) -------------------------------------------------- */ --s-1: 0.25rem; --s-2: 0.5rem; --s-3: 0.75rem; --s-4: 1rem; --s-5: 1.5rem; --s-6: 2rem; --s-7: 2.5rem; --s-8: 3rem; --s-9: 4rem; --s-10: 5rem; --s-11: 6.5rem; --s-12: 8rem; --section-y: clamp(3.5rem, 2rem + 6vw, 7rem); --gutter: clamp(1.25rem, 0.5rem + 3vw, 3rem); --measure: 68ch; /* ---- Shape ------------------------------------------------------------ Panels are 20px, cards and images 16px, buttons and labels are full pills. --radius is the legacy 4px value, kept only for form inputs. */ --radius: 4px; /* ---- Layout ------------------------------------------------------------ */ --wrap: 1240px; --wrap-text: 760px; --nav-h: 72px; /* ---- Motion ----------------------------------------------------------- Motion is deliberately sparse: sections reveal once on scroll and the countdown counts. Nothing loops forever. */ --ease: cubic-bezier(0.22, 1, 0.36, 1); --dur-fast: 180ms; --dur: 420ms; --dur-slow: 900ms; /* ---- Layers ------------------------------------------------------------ */ --z-nav: 100; --z-menu: 110; /* ====================================================================== COLOUR-BLOCK LANGUAGE (every page) A deep green page ground carrying large flat panels of brand colour and a warm neutral, with photography in nearly every section. The brand hues are unchanged; what changes is how much surface they cover. ====================================================================== */ /* Warm neutral. The one warm value in the system: it exists so the blue and green panels have something to sit against without the page going cold. It is a neutral ground, never an accent. */ --bone: #F4F0E6; --bone-deep: #E8E2D2; /* Panel fills, rotated section by section. */ --panel-green: var(--ag-green); --panel-blue: var(--ag-blue); --panel-mint: var(--ag-green-light); --panel-navy: var(--ag-navy); --panel-bone: var(--bone); /* Larger, softer geometry than the editorial pages use. */ --radius-panel: 20px; --radius-card: 16px; --radius-pill: 999px; --shadow-panel: 0 18px 44px rgba(6, 26, 16, 0.28); /* Secondary Green is tuned to carry white button text; as small green TEXT on a light ground it only reaches 4.17:1. This darker cut is for that job, and clears AA at any size. */ --green-text: #006B34; /* Emphasis (.mark) on the mint CTA panel. Tertiary Green cannot be used: it IS the panel fill, so .mark's default renders the word invisible at 1:1. Secondary Green only reaches 2.51:1 there. This cut clears 5.19:1 on mint while staying visibly apart from the near-black heading beside it (1.74:1), so the emphasis still reads as emphasis. */ --green-on-mint: #004F26; } @media (prefers-reduced-motion: reduce) { :root { --dur-fast: 1ms; --dur: 1ms; --dur-slow: 1ms; } }