/* ========================================================= COLOR TOKENS ----------------------------------------------------------- Two-tier system: 1. Primitives - raw palette hex values, named descriptively. 2. Semantic roles - what the site actually uses in markup, each pointing at a primitive above it. Roles: --color-background page background (between hero & footer) --color-headline heading text --color-body paragraph / body text --color-highlight buttons, links, accents --color-border dividers, hairlines --color-hero-background full-bleed hero section background --color-hero-headline headline text in the hero --color-hero-body body/eyebrow text in the hero --color-what-we-do-background background for the "what we do" / pillars scroll-pin section --color-what-we-do-headline headline text in that section --color-what-we-do-body body text in that section --color-footer-background footer background --color-footer-text all text in the footer --color-hero-gradient-start hero background gradient, top stop --color-hero-gradient-end hero background gradient, bottom stop (used by .bg-hero-gradient in input.css — an alternate to the flat --color-hero-background, opted into per-page, not swapped in globally) To preview a palette, set data-palette="" on . No attribute = default palette (first block below). Add a new palette by copying a block, changing the primitives, and re-pointing the semantic roles. ========================================================= */ /* ---------- Palette: Icy Blue (default) ---------- https://coolors.co/6c756b-93acb5-96c5f7-a9d3ff-f2f4ff */ :root, [data-palette="coolors"] { --cool-steel: #93acb5; --baby-blue-ice: #96c5f7; --icy-blue: #a9d3ff; --ghost-white: #f2f4ff; --black: #000000; --color-background: var(--icy-blue); --color-headline: var(--black); --color-body: var(--black); --color-highlight: var(--baby-blue-ice); --color-border: var(--cool-steel); --color-hero-background: var(--baby-blue-ice); --color-hero-headline: var(--black); --color-hero-body: var(--black); --color-what-we-do-background: var(--ghost-white); --color-what-we-do-headline: var(--black); --color-what-we-do-body: var(--black); --color-footer-background: var(--black); --color-footer-text: var(--icy-blue); --color-hero-gradient-start: var(--ghost-white); --color-hero-gradient-end: var(--icy-blue); } /* ---------- Palette: Navy & Blue ---------- */ [data-palette="navy-blue"] { --navy: #10284d; --blue: #24539a; --blue-light: #eaf2ff; --ink: #172235; --line: #dce3ec; --white: #ffffff; --ghost-white: #f2f4ff; --icy-blue: #a9d3ff; --color-background: var(--white); --color-headline: var(--ink); --color-body: var(--ink); --color-highlight: var(--blue); --color-border: var(--line); --color-hero-background: var(--blue-light); --color-hero-headline: var(--ink); --color-hero-body: var(--ink); --color-hero-gradient-start: var(--ghost-white); --color-hero-gradient-end: var(--icy-blue); --color-what-we-do-background: var(--blue-light); --color-what-we-do-headline: var(--ink); --color-what-we-do-body: var(--ink); --color-footer-background: var(--navy); --color-footer-text: var(--white); } /* ---------- Palette: Current Site ---------- Pulled directly from the live site's assets/css/style.css (:root variables + the actual color values used per element). */ [data-palette="current-site"] { --gold: #ffd23f; --ink: #1a1400; --ink-soft: #4a3d0a; --accent: #2b2100; --line: rgba(26, 20, 0, 0.16); --white: #ffffff; --black: #000000; --color-background: var(--white); --color-headline: var(--ink); --color-body: var(--ink-soft); --color-highlight: var(--accent); --color-border: var(--line); --color-hero-background: var(--gold); --color-hero-headline: var(--ink); --color-hero-body: var(--ink-soft); --color-what-we-do-background: rgba(255, 210, 63, 0.12); --color-what-we-do-headline: var(--ink); --color-what-we-do-body: var(--ink-soft); --color-footer-background: var(--black); --color-footer-text: var(--white); --color-hero-gradient-start: var(--white); --color-hero-gradient-end: rgba(255, 210, 63, 0.16); } /* ---------- Palette: Happy Hues #3 ---------- https://www.happyhues.co/palettes/3 Source site uses two background tones (white + a pale sky-blue) and a dark navy "inverted" section (their card/footer treatment) — mapped the same way our other palettes split sitewide vs. hero/what-we-do vs. footer. Their tertiary coral (#ef4565) isn't used here — no tertiary role exists in this token system yet; it's a natural fit if we ever add one (e.g. an alert/badge accent). */ [data-palette="happy-hues"] { --hh-white: #fffffe; --hh-navy: #094067; --hh-slate: #5f6c7b; --hh-blue: #3da9fc; --hh-blue-pale: #d8eefe; --hh-blue-secondary: #90b4ce; --color-background: var(--hh-white); --color-headline: var(--hh-navy); --color-body: var(--hh-slate); --color-highlight: var(--hh-blue); --color-border: var(--hh-blue-secondary); --color-hero-background: var(--hh-blue-pale); --color-hero-headline: var(--hh-navy); --color-hero-body: var(--hh-slate); --color-hero-gradient-start: var(--hh-white); --color-hero-gradient-end: var(--hh-blue-pale); --color-what-we-do-background: var(--hh-blue-pale); --color-what-we-do-headline: var(--hh-navy); --color-what-we-do-body: var(--hh-slate); --color-footer-background: var(--hh-navy); --color-footer-text: var(--hh-white); } /* ---------- Palette: Brandfolder ---------- */ [data-palette="brandfolder"] { --navy: #2b2e76; --purple: #7908f8; --blue: #41d1f7; --blue-light: #eafaff; --ink: #201f25; --line: #e3e3e8; --white: #fdfdfe; --color-background: var(--white); --color-headline: var(--ink); --color-body: var(--ink); --color-highlight: var(--purple); --color-border: var(--line); --color-hero-background: var(--blue); --color-hero-headline: var(--ink); --color-hero-body: var(--ink); --color-what-we-do-background: var(--blue-light); --color-what-we-do-headline: var(--ink); --color-what-we-do-body: var(--ink); --color-footer-background: var(--navy); --color-footer-text: var(--white); --color-hero-gradient-start: var(--white); --color-hero-gradient-end: var(--blue-light); }