popovskikandClaude Opus 4.8
0a1971efad
Deploy to Production on Develop Push / deploy (push) Successful in 22s
- Brand orange is now the official #FA7850 everywhere: folded the stray oranges (#F2762E, #E8833A, #ff6b2c) into it and kept a single darker shade (#E85D2A) for gradient depth + button hover. Added the official brand --yellow (#FFE16E) token. - Tablet header gap (769-1024px): the fixed header shrinks 80->60px there but first-section paddings kept their 80px clearance; pull the first section up by the 20px delta in that range only (phones untouched). Verified on interior pages and the full-bleed homepage hero — gap now matches desktop, no overlap. - Re-stamped cache-bust (v=f95de694). Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
50 lines
1.6 KiB
CSS
50 lines
1.6 KiB
CSS
/* ==========================================================================
|
||
Design tokens
|
||
--------------------------------------------------------------------------
|
||
Single source of truth for values previously hard-coded as literals across
|
||
the stylesheets (e.g. #2D738C ~98×, #101828 ~103×). New/refactored rules
|
||
should reference these instead of raw hex. Values match the existing
|
||
dominant usages, so introducing this file is visually neutral — migrating
|
||
older literals to var() can happen incrementally.
|
||
========================================================================== */
|
||
:root {
|
||
/* Brand — teal */
|
||
--teal: #2D738C;
|
||
--teal-600: #255E73; /* button hover */
|
||
--teal-800: #153C4E; /* deep accents */
|
||
|
||
/* Brand — orange (official: #FA7850, the single source of truth) */
|
||
--orange: #FA7850;
|
||
--orange-600: #E85D2A; /* darker shade — gradients & button hover */
|
||
--orange-text: #B4531A; /* AA-safe orange for text on white */
|
||
|
||
/* Brand — yellow (official) */
|
||
--yellow: #FFE16E;
|
||
|
||
/* Ink / text */
|
||
--ink: #101828;
|
||
--text: #344054;
|
||
--muted: #475467;
|
||
--muted-2: #667085; /* smallest muted text that still meets AA on white */
|
||
|
||
/* Surfaces / lines */
|
||
--bg: #F9FAFB;
|
||
--line: #EAECF0;
|
||
--line-2: #E4E7EC;
|
||
|
||
/* Radius scale */
|
||
--r-sm: 8px;
|
||
--r-md: 12px;
|
||
--r-lg: 16px;
|
||
--r-pill: 999px;
|
||
|
||
/* Type scale (available for future heading normalisation) */
|
||
--fs-h1: 60px;
|
||
--fs-h2: 36px;
|
||
--fs-h3: 22px;
|
||
--fs-body: 16px;
|
||
|
||
/* Section vertical rhythm */
|
||
--space-section: 112px;
|
||
}
|