/* ============================================================================ * Heliomath tokens — "Sunset" (CANONICAL, production). * * The real, going-forward Heliomath foundation, promoted from palette G * ("Sunset") in the throwaway style-guide explorer. SELF-CONTAINED: it holds the * COLOUR tokens (two tiers, below), the TYPOGRAPHY tokens (font, weights, type * scale) and the STRUCTURE tokens (radius, shadow, border) — no dependency on * any other file. Consume every value via var(--token) — never hard-code a hex. * * TWO TIERS * 1. PRIMITIVES — memorable names for the actual paints (--midnight, --coral, * --white …). This IS the palette: to rebrand, change values here. * 2. SEMANTIC — role names (--surface-*, --text-*, --accent-* …) that ALIAS * primitives. Components consume THESE, never the primitives, so a value or * a whole palette can change underneath without touching a single consumer * (and, later, a dark theme can re-point them without the names lying). * * Rule of thumb: primitives are the paint; semantics are where you point. If you * are writing a component, reach for a Tier-2 name. * * Cornflower-blue primary + coral/peach warm accent, on a soft beige with a deep * indigo night surface. * ========================================================================== */ :root { /* ======================================================================== * TIER 1 — PRIMITIVES (the paints). Hue-agnostic where a hue tweak shouldn't * make the name lie (a deep blue is "night", not "blue"). * ===================================================================== */ /* --- Neutrals & darks ------------------------------------------------ */ --white: #FFFFFF; --cream: #F9F4E4; /* warm off-white — light text on dark surfaces */ --beige: #F7F4F2; /* the default page surface */ --sand: #EDEAE0; /* deeper beige — the recessed "sunken" band */ --sand-deep: #DFDCD4; /* a touch darker than --sand — a subtle warm edge tone for where white or beige meets the sand surface */ --night: #0A1A52; /* deep indigo — dark, but not the darkest */ --midnight: #0B122C; /* the darkest colour */ /* --- Cornflower (the blue accent + its lighter on-dark link tints) ---- */ --cornflower: #5081F3; /* the primary accent */ --cornflower-deep: #3D70E3; /* + hover */ --cornflower-deeper: #2159DF; /* + active */ --cornflower-soft: #6C8CD7; /* lighter — links on the night surface */ --cornflower-softer: #85A0E0; /* + hover */ --cornflower-softest: #9FB6E8; /* + active */ --cornflower-pale: #B5BDDC; /* palest + desaturated — muted supporting text on dark surfaces (blue-grey, cooler than the grey --text-on-dark-muted) */ /* --- Azure (the link blue — brighter/more saturated than cornflower, so * links stay distinct from accent UI) --------------------------------- */ --azure: #255FE7; /* body links on light surfaces */ --azure-deep: #2E5ACA; /* + hover */ --azure-deeper: #284DAE; /* + active */ /* --- Warm & Intense (ember + its brighter on-dark marigold) ----------------------- */ --ember: #F86800; /* the ember accent */ --marigold: #FF8000; /* --- Warm (coral + its brighter on-dark peach) ----------------------- */ --coral: #D96D54; /* warm secondary accent, light surfaces */ --coral-deep: #C85F47; /* + hover */ --coral-deeper: #B7513A; /* + active */ --peach: #EF7C52; /* brighter warm for dark surfaces */ --peach-soft: #F59B70; /* + hover */ --peach-softer: #FBB489; /* + active (brighter still — the on-dark family brightens on interaction) */ /* --- Winter-green (the POSITIVE/value accent — the third accent beside cornflower * + coral, promoted from the pricing page: "you get this" / included / good). --- */ --winter-green: #009070; /* the positive accent */ --winter-green-deep: #007a5d; /* + hover, and the readable tier for small text on light */ --winter-green-deeper: #006b52; /* + active */ /* --- Neutral grays (cool blue undertone, hue ~207deg; saturation on a * U-curve so bluishness stays even and the darks never look muddy). A * numeric ramp is the one place we keep numbers, not names. ----------- */ --gray-50: #F5F7F9; --gray-100: #E9ECEF; --gray-200: #D4DBE0; --gray-300: #AEB9C2; --gray-400: #8896A2; --gray-500: #697885; --gray-600: #536371; --gray-700: #394855; --gray-800: #25313B; /* ======================================================================== * TIER 2 — SEMANTIC (the roles). Components consume these. Each aliases a * primitive; the few that hold a literal are one-off derived values noted * inline. Names & meanings are unchanged from the flat palette, so every * existing --surface-* / --text-* / --accent-* / --flare* / --link* consumer * keeps working untouched. * ===================================================================== */ /* --- Surfaces / backgrounds ------------------------------------------ */ --surface-default: var(--beige); /* default light surface/background */ --surface-sunken: var(--sand); /* recessed section band; makes white cards pop */ --surface-dark: var(--midnight); /* primary dark background */ --surface-dark-alt: var(--night); /* alt dark surface — the "secondary panel" */ --surface-elevated: var(--white); /* elevated cards/panels/inputs. Never a page bg. (Labels on fills are --text-on-dark-fill / --text-on-light-fill.) */ /* --- Accents (titles, buttons, highlights) --------------------------- */ --accent-primary: var(--cornflower); /* primary / positive / call-to-action */ --accent-primary-hover: var(--cornflower-deep); --accent-primary-active: var(--cornflower-deeper); --accent-primary-on-dark: var(--cornflower-soft); /* primary accent on dark surfaces (mirrors --link-on-dark / --text-on-dark) */ --accent-primary-on-dark-hover: var(--cornflower-softer); --accent-primary-on-dark-active: var(--cornflower-softest); --flare: var(--ember); /* warm secondary accent on LIGHT surfaces. Two uses: (1) a button/UI FILL — label colour is set by the consumer, not here: BUTTONS take a dark midnight label (--text-primary, ~5.5:1 on coral); a .fill-flare uses white (--text-on-dark-fill, which clears WCAG only as large/bold text); (2) large display text on beige — H1/H2/H3 (24px+) only; coral-on-beige fails WCAG at body/small sizes. */ --flare-hover: var(--coral-deep); /* + hover (fill) */ --flare-active: var(--coral-deeper); /* + active (fill) */ --flare-on-dark: var(--marigold); /* the same warm accent for DARK surfaces — brighter than --flare so it reads against night ("-on-dark" mirrors --link-on-dark / --text-on-dark). Used as a button FILL on dark surfaces; the button label is a dark midnight (--text-primary, ~6.7:1 on peach — white would only reach 2.7:1 and fail). A .fill-flare on dark instead pairs peach with a night label (--text-on-light-fill). */ --flare-on-dark-hover: var(--peach-soft); --flare-on-dark-active: var(--peach-softer); /* --- Accent SECONDARY (winter-green) — the POSITIVE / value / included role: the * 7-day-free-trial badge, the plan bonuses ("+"), the money-back guarantee callouts, * and ✓ "included" marks. A PEER of --flare, distinct by character: secondary = * positive-green, flare = warm-coral. Small text on a light surface should reach for * the -hover (deep) tier — the base green is a touch light for body-size contrast. */ --accent-secondary: var(--winter-green); --accent-secondary-hover: var(--winter-green-deep); --accent-secondary-active: var(--winter-green-deeper); /* --- Text ------------------------------------------------------------ */ --text-primary: var(--midnight); /* body text on light surfaces */ --text-lively: var(--night); /* alt primary ink — nearly as dark as --text-primary (marginally lighter, ~15:1 vs ~17:1 on beige) but with a touch of blue chroma. Both sit far above any threshold, so the eye can't rank them: it reads as a tonal shift, NOT a hierarchy step. Use sparingly to keep a large, flat block of text from feeling dead */ --text-muted: var(--gray-600); /* muted / de-emphasized body text on light */ --text-subtle: var(--gray-500); /* subtle / de-emphasized text on light */ --text-caption: var(--gray-500); /* captions / large-text on beige */ --text-disabled: var(--gray-300); /* placeholder + disabled text */ --text-on-dark-fill: var(--white); /* label on a DARK-enough fill — accent-primary/cornflower, and coral (where white clears WCAG only as large/bold text). Decoupled from --surface-elevated. NB: distinct from --text-on-dark, which is body text on a dark SURFACE, not a fill. */ --text-on-light-fill: var(--night); /* label on a LIGHT/bright fill too pale for white — e.g. peach (--flare-on-dark), where white fails 3:1. */ --text-on-dark: var(--cream); /* light text on dark surfaces */ --text-on-dark-muted: var(--gray-400); /* muted text on the night surface */ /* --- Links ----------------------------------------------------------- */ --link: var(--azure); /* body links on light surfaces; always underlined */ --link-hover: var(--azure-deep); --link-active: var(--azure-deeper); --link-on-dark: var(--cornflower-soft); /* links on the night surface */ --link-on-dark-hover: var(--cornflower-softer); --link-on-dark-active: var(--cornflower-softest); /* --- Borders / dividers ---------------------------------------------- */ --border: var(--gray-300); /* default hairline on light surfaces — borders (cards, inputs) and dividers */ --border-subtle: var(--gray-200); /* lighter hairline on light */ --border-on-dark: var(--gray-700); /* hairline on the night surface */ --border-on-sunken: var(--sand-deep); /* warm hairline where white/beige meets the sunken (sand) surface — darker & warmer than --border so the edge reads on sand */ --border-warm: var(--sand-deep); /* warm-toned hairline for elements on any light surface (beige, the sunken sand band, or white) — e.g. the .card edge. Names the TONE, not a surface, so it isn't coupled to --border-on-sunken (the sand/white seam): they share the paint today but can be retuned independently. */ /* --- Notifier / badge — the small inline status pill. bg + border are the * secondary surface flattened onto white (12% / 32% alpha) so the pill is * opaque and reads the same on any white surface. Kept literal: color-mix() * would derive them from --night, but it's above our browser floor (see the * focus-ring note below) and a dropped notifier fill is a visible break. */ --notifier-bg: #E2E4EA; /* = --night @ 12% on white, flattened */ --notifier-border: #B1B6C8; /* = --night @ 32% on white, flattened */ --notifier-text: var(--night); /* points at the primitive, not --surface-dark-alt, so notifier TEXT isn't coupled to a SURFACE role */ /* --- Focus rings (each is its source colour @ 45%) ------------------- * * NAMING: bare `--focus-ring` is the default; the rest are suffixed by the * control/accent they pair with, plus "-on-dark" / "-on-accent" for the * context they sit against (mirrors --link-on-dark / --text-on-dark): * --focus-ring default — any control on a light surface * --focus-ring-flare warm (flare) control, light * --focus-ring-flare-on-dark warm control / CTA, dark * --focus-ring-link inline link, light * --focus-ring-link-on-dark inline link, dark * --focus-ring-on-accent an accent-COLOURED element (e.g. an accent * link) — a darker accent tone so the ring * shows against it * Links use their *active* tone for extra salience; comments show the exact * primitive (and the semantic token it matches). * * Kept as literal rgba on purpose. color-mix() (or relative-colour syntax) * would derive these straight from the primitives, but BOTH are above our * browser floor: color-mix() needs Safari 16.2+ / Chrome 111+ / Firefox 113+, * we support Safari 14.1 / Chrome 84 / Firefox 63. On an older browser a * color-mix() value makes the whole box-shadow invalid — i.e. NO focus ring, * a WCAG 2.4.7 regression, not a cosmetic one — so don't gate it on a too-new * feature. If you retune an accent/link primitive, update its ring here too. */ --focus-ring: 0 0 0 3px rgba(80, 129, 243, 0.45); /* --cornflower (--accent-primary) */ --focus-ring-flare: 0 0 0 3px rgba(217, 109, 84, 0.45); /* --coral (--flare) */ --focus-ring-flare-on-dark: 0 0 0 3px rgba(239, 124, 82, 0.45); /* --peach (--flare-on-dark) */ /* Inline links use 0.30 (not 0.45) so the ring matches the soft PILL FILL below — * pressed/focused links get a filled pill, not just a ring. */ --focus-ring-link: 0 0 0 3px rgba(40, 77, 174, 0.30); /* --azure-deeper (--link-active) @ 30% */ --focus-ring-link-on-dark: 0 0 0 3px rgba(159, 182, 232, 0.30); /* --cornflower-softest (--link-on-dark-active) @ 30% */ --focus-ring-on-accent: 0 0 0 3px rgba(33, 89, 223, 0.45); /* --cornflower-deeper (--accent-primary-active) */ /* Inline-link pressed/focus PILL FILL — the link's own colour @ 30% behind the * label (same colour + opacity as the ring above, so ring and fill read as one). * a:focus (base.css) also drops the underline on press. Surface-overridable: the * on-dark contexts re-point --link-fill (and --focus-ring-link) to the on-dark pair * where they already re-point the link colour. */ --link-fill: rgba(40, 77, 174, 0.30); /* --azure-deeper (--link-active) @ 30% */ --link-fill-on-dark: rgba(159, 182, 232, 0.30); /* --cornflower-softest (--link-on-dark-active) @ 30% */ /* ======================================================================== * TYPOGRAPHY — font family, weights, and the type scale. * ===================================================================== */ /* Poppins for all UI/headings, with DM Sans then Open Sans as fallbacks (Open Sans * only renders if the visitor already has it — it is NOT web-loaded) and Arial as the * system fallback. Poppins + DM Sans are web-loaded in _foundation_head / _solid_nav_head. * Generous line-height and a 16px+ body floor for legibility. */ --font-family-base: 'Poppins', 'DM Sans', 'Open Sans', Arial, sans-serif; --font-family-decorative: 'quicksand', 'Nunito', 'Helvetica Neue', Arial, sans-serif; /* for the H1/H2/H3 hero display on the home page */ --font-weight-light: 200; --font-weight-regular: 300; --font-weight-medium: 400; --font-weight-semibold: 500; --font-weight-bold: 600; /* Type scale — FLUID size / fixed line-height pairs. * Each size is calc(rem floor + a small vw): text sits at its rem minimum on * the narrowest screens and grows gently toward desktop. The rem floor is * what keeps it accessible — it still scales with the user's font-size / zoom * (a pure-vw or px-based size would NOT, risking WCAG 1.4.4). Growth is capped * on very wide screens by the @media block after :root. Bigger elements carry * a bigger vw term, so the scale opens up on desktop. Comments show px at the * rem floor; the vw coefficients are the tuning knobs. */ --type-h1-size: calc(2.25rem + 0.65vw); /* floor 36px */ --type-h1-line: 1.15; --type-h2-size: calc(1.8rem + 0.5vw); /* floor ~29px */ --type-h2-line: 1.2; --type-h3-size: calc(1.4rem + 0.4vw); /* floor 24px */ --type-h3-line: 1.25; --type-h4-size: calc(1.15rem + 0.3vw); /* floor 20px */ --type-h4-line: 1.3; /* FAQ question — a REPEATED UI label, not a heading, so it must not ride the type scale's * growth + wide-screen bump (which pushed h4 to ~26px on desktop). NO clamp()/min()/max(): * unsupported below Firefox 75 (our floor is FF63) — it would fail on the low-end devices we * target. Instead: body's 1.05rem floor + a 0.1rem step up (1.15rem), and the SAME tiny * 0.25vw growth as body — so it stays a consistent notch above body copy at every width and * never balloons. Intentionally OMITTED from the ≥1600px @media bump below. */ --type-faq-question-size: calc(1.15rem + 0.25vw); --type-body-size: calc(1.05rem + 0.25vw); /* floor ~17px — comfortable default for the audience */ --type-body-line: 1.6; --type-body-small-size: calc(0.95rem + 0.15vw); /* floor ~15px */ --type-body-small-line: 1.5; --type-caption-size: calc(0.875rem + 0.15vw); /* floor 14px — captions/labels only, not body copy */ --type-caption-line: 1.4; /* Control label — buttons / inputs. Fluid, floor 18px, cap 24px (0.375vw; * cap = 1.125 + 0.375 = 1.5rem in the @media block below). * Contrast note: button fills carry a DARK (midnight) label. On coral (5.5:1) * and peach (6.7:1) that clears AA even at body size; cornflower (4.05:1) is * the tightest — comfortably above AA-large (3:1), just under the 4.5:1 body * threshold, so keeping the label large/bold still matters. The vw holds the * label >=19.2px from a 320px viewport up, so real devices are safe. Bump the * floor to 1.1875rem (19px) to lift the nominal floor above 18.66px too. */ --type-control-size: calc(1.125rem + 0.375vw); /* floor 18px */ /* ======================================================================== * STRUCTURE — radius, shadow, border, spacing. * ===================================================================== */ --radius-card: 16px; --radius-control: 10px; /* Pill: a radius larger than any control's half-height, so ends round fully * at any height. Buttons are pills by default. */ --radius-pill: 999px; --shadow-elevated: 0 1px 8px rgba(31, 22, 15, 0.05); --shadow-elevated-hover: 0 4px 22px rgba(31, 22, 15, 0.07); /* White surfaces on beige are only ~1.05:1 apart, so they ALWAYS need a * shadow and/or this gray-300 border to separate them from the field. */ --border-hairline: 1px solid var(--gray-300); /* --- Spacing scale — a 4px-grid ramp for padding, gaps, margins -------- * * rem so spacing scales with the user's font-size / zoom, like the type. * The small steps (2xs–sm, 4–12px) are FIXED — fluidising a tiny gap only * adds jitter. From md up they are FLUID (rem floor + a pronounced vw) so * layout spacing opens up with the viewport; the rem floor is the compact * mobile value and bigger steps carry a bigger vw. Growth is capped at 1200px * by the @media block below — spacing has no reason to keep growing once * content hits its max-width (hence 1200, not the type scale's 1600). * Cap identity at 1200: cap_rem = floor + 0.75 x vw (1vw = 12px there). */ --space-2xs: 0.25rem; /* 4px — fixed */ --space-xs: 0.5rem; /* 8px — fixed */ --space-sm: 0.75rem; /* 12px — fixed */ --space-md: calc(1rem + 0.5vw); /* floor 16px */ --space-lg: calc(1.5rem + 1vw); /* floor 24px */ --space-xl: calc(2rem + 1.5vw); /* floor 32px */ --space-2xl: calc(3rem + 2.5vw); /* floor 48px */ --space-3xl: calc(4rem + 3.5vw); /* floor 64px */ --space-4xl: calc(6rem + 5vw); /* floor 96px */ /* Horizontal page gutter — left/right padding on page-width containers. Its * own token (not a scale step): a small mobile floor with a big vw, so edges * stay tight on phones and open up generously on desktop. Capped at 1200. */ --space-gutter: calc(1rem + 6vw); /* floor 16px */ } /* ============================================================================ * FLUID TYPE CAP — freeze the type scale at fixed maxes on very wide screens so * calc(rem + vw) doesn't run away on 4K / ultrawide. Each value ≈ its fluid size * evaluated at 1600px, so the transition across the breakpoint is seamless. This * is the floor-safe stand-in for clamp()'s upper bound (clamp needs Firefox 75, * below our floor). Retune these together with the vw coefficients above. * ========================================================================== */ @media (min-width: 1600px) { :root { --type-h1-size: 3rem; /* 48px */ --type-h2-size: 2.35rem; /* ~38px */ --type-h3-size: 1.95rem; /* ~31px */ --type-h4-size: 1.65rem; /* ~26px */ --type-body-size: 1.3rem; /* ~21px */ --type-body-small-size: 1.1rem; /* ~18px */ --type-caption-size: 1.025rem; /* ~16px */ --type-control-size: 1.5rem; /* 24px */ } } /* ============================================================================ * FLUID SPACING CAP — freeze the fluid spacing steps at 1200px (earlier than the * type's 1600: once content reaches its max-width, spacing needn't keep growing). * Each value = its fluid size at 1200px, so the freeze is seamless. Because * 1vw = 12px = 0.75rem at 1200, each cap = floor + 0.75 x vw. Retune together * with the vw coefficients above. * ========================================================================== */ @media (min-width: 1200px) { :root { --space-md: 1.375rem; /* 22px */ --space-lg: 2.25rem; /* 36px */ --space-xl: 3.125rem; /* 50px */ --space-2xl: 4.875rem; /* 78px */ --space-3xl: 6.625rem; /* 106px */ --space-4xl: 9.75rem; /* 156px */ --space-gutter: 5.5rem; /* 88px */ } }