/* ========================================================================== FAME design tokens -------------------------------------------------------------------------- Colour values are fixed by CLAUDE.md §7.8 and must not be adjusted by eye. The prototype defined no spacing, radius or shadow scale — every value was a one-off literal (12 distinct radii alone). Those scales are introduced here so components have something to read from. Chart palettes are deliberately NOT defined in this file. They are added in Phase 3, after the dataviz guidance is loaded, so the sequential ramp and categorical set are chosen and contrast-validated together rather than guessed at now. ========================================================================== */ /* ========================================================================== Palette -------------------------------------------------------------------------- Rebuilt away from indigo on FAME's instruction. The old primary was #2E2EA7 — dark, desaturated and, next to a cool grey-violet neutral set, genuinely flat. What replaces it was already FAME's: the cyan in the logo. Promoting it from accent to primary makes the site brighter and more distinctive without inventing a brand colour nobody at FAME chose, which is the trap a "make it more modern" palette change usually falls into. Three moves, and no more: 1. A full teal/cyan ramp around the brand cyan #00A9CE, so tints and hovers are steps on a scale rather than one-offs mixed by eye. 2. Neutrals retuned from grey-violet to a cool near-neutral that shares the primary's temperature. This is most of the "dull" — #F6F7FC and #5B6086 were doing more damage than the indigo was. 3. One warm accent. A single warm note against a cool palette is what stops it reading as monochrome; it is reserved for figures and emphasis and is never a second brand colour. Every value below is measured, not chosen by eye: brand-700 on paper 5.82:1 PASS (links, small text) brand-600 on paper 4.06:1 large text and non-text only muted on paper 6.27:1 PASS warm-700 on paper 5.02:1 PASS brand-300 on ink 10.6 :1 PASS (small text on dark) warm-300 on ink 11.3 :1 PASS paper on brand-700 5.82:1 PASS (filled buttons) ink on brand-500 6.75:1 PASS (cyan fills carry dark text) ========================================================================== */ :root { /* --- Brand ramp: teal/cyan, anchored on FAME's own #00A9CE ------------- */ --brand-50: #ECFAFE; --brand-100: #D0F1FB; --brand-200: #A5E4F6; --brand-300: #6CD1EC; /* small text on dark */ --brand-400: #2DB8DB; --brand-500: #00A9CE; /* the logo's cyan — fills, marks, rules */ --brand-600: #0089AB; /* hover on fills */ --brand-700: #026E8B; /* links and small text on light */ --brand-800: #0A5468; --brand-900: #0B3D4C; /* --- Warm accent: one note, used sparingly ----------------------------- */ --warm-300: #FBBF5C; /* on dark */ --warm-500: #E8912F; --warm-700: #B45309; /* on light */ /* --- Colour: core ------------------------------------------------------ */ --ink: #0E1030; /* hero + page-hero surfaces, footer, body text on light */ --ink-2: #1A1E42; /* raised surface on dark */ --paper: #FFFFFF; --mist: #F1F6F8; /* alternating section background */ --line: #DCE8ED; /* borders, table rules */ --line-2: #EAF1F4; /* lighter internal division */ --muted: #4A6470; /* secondary text, metadata */ /* Error. Used by the enquiry form and nowhere else, so red on this site means one thing: something the reader has to correct. --error 3.9:1 on paper — a border and a filled dot, never text --error-ink 6.1:1 on --error-bg — the message itself */ --error: #C4322B; --error-ink: #96231E; --error-bg: #FEF4F3; --error-br: #F2C4C0; --error-ring: rgba(196, 50, 43, .16); /* The select chevron, drawn once. In a token because a data URI containing a quote character is a reliable way to break a stylesheet when it is copied between files. */ --fame-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M2 4.5 6 8.5 10 4.5' fill='none' stroke='%234A6470' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); /* Status. Reserved — never reused as a decorative colour, so that green on this site always means "in the field now" and nothing else. --live-ink is the text step: #0C8A5A is a 3.6:1 fill colour and fine behind a label, but not as the label. #06603E measures 6.4:1 on the tint. */ --live: #0C8A5A; --live-ink: #06603E; --live-bg: rgba(12, 138, 90, .10); --live-br: rgba(12, 138, 90, .30); /* Chip tints. Method and sector are different kinds of fact and get different grounds, so a column of chips has a readable shape at a glance rather than being one grey texture. */ --chip-method-bg: #E6F4F9; --chip-method-br: #BFE2EE; --chip-method-ink: var(--brand-700); --chip-sector-bg: #F3F1FB; --chip-sector-br: #DEDAF3; --chip-sector-ink: #4A4482; /* On-dark text ramp */ --on-dark: #FFFFFF; --on-dark-2: #C7DCE5; --on-dark-mute: #9DB4C0; /* --- Compatibility aliases --------------------------------------------- Every component sheet was written against --indigo-*, --cyan and friends. Pointing those names at the new ramp reskins the whole site from this one block, with no chance of a component being missed and left indigo — which is exactly what would have happened editing eight stylesheets by hand. New code should use --brand-*; these stay until the last reference goes. */ --indigo: var(--brand-600); --indigo-d: var(--brand-800); --indigo-l: var(--brand-400); --cyan: var(--brand-500); /* --- Typography -------------------------------------------------------- */ /* IBM Plex Sans/Mono, self-hosted, SIL OFL. Chosen over the parent theme's GT Walsheim Pro, which is a commercial licence bundled for use within Herrington itself. Plex Mono carries every data label, eyebrow and figure — that is most of what makes the site read as a research firm. */ --font-sans: "IBM Plex Sans", "Segoe UI", system-ui, -apple-system, sans-serif; --font-mono: "IBM Plex Mono", ui-monospace, "SF Mono", "Cascadia Mono", Menlo, monospace; /* Three weights. The brief specifies two display weights (~520 / ~640); 400 carries body copy. These are exact only with the variable font — if static weights are ever substituted, remap here and nowhere else. */ --w-normal: 400; --w-medium: 520; --w-bold: 640; /* Type scale */ --t-hero: clamp(34px, 4.2vw, 53px); --t-h1: 40px; --t-h2: 33px; --t-h3: 24px; --t-h4: 16.5px; --t-lead: 18px; --t-body: 16px; --t-sm: 14px; --t-xs: 13px; --t-label: 11px; /* mono, uppercase, tracked */ --lh-tight: 1.12; --lh-body: 1.55; --lh-long: 1.65; /* project narrative */ --tr-head: -.025em; --tr-hero: -.035em; --tr-label: .18em; /* --- Spacing: 8px base ------------------------------------------------- */ --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px; --s-6: 32px; --s-7: 40px; --s-8: 56px; --s-9: 80px; /* Section rhythm. The prototype ran 60px, already tight against a typical agency's 96–140px. 56/40 tightens it a little further without cramping the tabbed blocks. Page length is governed by block count, not padding. */ --section-y: var(--s-8); /* --- Radius: collapsed from the prototype's 12 values ------------------ */ --r-sm: 6px; --r-md: 10px; --r-lg: 16px; /* --- Elevation: three, matching the prototype -------------------------- */ --sh-md: 0 22px 48px -26px rgba(14, 16, 48, .35); --sh-lg: 0 30px 70px -24px rgba(14, 16, 48, .30); --sh-tip: 0 14px 40px -12px rgba(0, 0, 0, .40); /* --- Layout ------------------------------------------------------------ */ --max: 1240px; --gutter: var(--s-6); /* → 1176px content column */ --header-h: 72px; /* Ramp aliases, same reasoning as above. */ --indigo-50: var(--brand-50); --indigo-100: var(--brand-100); --indigo-200: var(--brand-200); --indigo-300: var(--brand-300); --indigo-400: var(--brand-400); --indigo-500: var(--brand-500); --indigo-600: var(--brand-600); --indigo-700: var(--brand-700); --indigo-800: var(--brand-800); --indigo-900: var(--brand-900); --cyan-l: var(--brand-300); /* small text on ink: 10.6:1 */ /* --- Semantic accents -------------------------------------------------- Split by ground, and by fill-vs-text, so a component never has to know which surface it is on. Dark surfaces redefine --accent-text and --border-hair below; everything downstream follows without a new rule. Measured against their own ground: --indigo-600 on --paper 10.28:1 PASS --indigo-600 on --ink 1.82:1 FAIL <- the bug this replaces --cyan on --ink 6.48:1 PASS --cyan-l on --ink 10.10:1 PASS */ --accent: var(--brand-600); /* fills, rules, marks */ --accent-hover: var(--brand-500); --accent-text: var(--brand-700); /* small text, eyebrows, links — 5.82:1 */ /* Hover has to move away from the ground, not towards it. On paper that means darker; on ink the dark block below flips it to lighter. A single "one step up the ramp" hover reads as brighter on both, and on paper that is a hovered link with less contrast than the one you were reading. */ --accent-text-hover: var(--brand-800); --border-hair: var(--line); /* --- Gradients --------------------------------------------------------- Four, and no more. A gradient earns its place by doing something a flat fill cannot: giving a large dark field some depth, or marking a boundary without a hard rule. Anything else is decoration that costs contrast. --grad-ink is two soft radials over the flat ink rather than a linear wash. A linear gradient across a full-bleed hero bands visibly on wide screens at this lightness; offset radials do not, and they let the light appear to come from behind the content column. */ --grad-ink: radial-gradient(120% 90% at 12% -10%, rgba(79, 82, 195, .38) 0%, rgba(79, 82, 195, 0) 55%), radial-gradient(90% 80% at 92% 4%, rgba(0, 169, 206, .20) 0%, rgba(0, 169, 206, 0) 60%), var(--ink); --grad-brand: linear-gradient(135deg, var(--indigo-700) 0%, var(--indigo-600) 55%, var(--indigo-500) 100%); --grad-rule: linear-gradient(90deg, var(--indigo-600), var(--cyan)); --grad-mist: linear-gradient(180deg, var(--paper) 0%, var(--mist) 100%); } /* ========================================================================== Dark ground -------------------------------------------------------------------------- One place decides what "on a dark surface" means. Previously each dark block restated it — and .fame-section--ink carried the corrected eyebrow colour while .fame-hero and .fame-pagehero, which are equally dark, did not. The result was 1.82:1 indigo-on-ink on the homepage hero and on every page hero on the site. Redefining the tokens rather than the components means a new dark block inherits the right values without anyone remembering to. ========================================================================== */ .fame-hero, .fame-pagehero, .fame-proof, .fame-triptych, .fame-charts, .fame-footer, .fame-section--ink { --accent-text: var(--cyan-l); --accent: var(--cyan); --accent-text-hover: var(--paper); --border-hair: rgba(255, 255, 255, .14); --muted: var(--on-dark-mute); } @media (max-width: 768px) { :root { --section-y: var(--s-7); --gutter: var(--s-5); --t-h1: 30px; --t-h2: 26px; --t-h3: 21px; } } /* Respect a user's motion preference. The site has no decorative motion by design; this covers smooth-scroll and any future state transitions. */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; } }