/* ============================================================================ SmartRoots Design System — Tokens --------------------------------------------------------------------------- Aligned to the live SmartRoots brand at smartroots.us: brand blue with a pale-yellow accent, very generous radii, and the Bricolage Grotesque + Poppins pairing the product already ships. The logo still sets the two anchors — the wordmark blue, and the yellow→blue gradient of the infinity loop in the "oo" of Roots. The loop remains the organising idea; it is now drawn in the brand's own lighter yellow. ========================================================================= */ :root { /* --- Brand blue ------------------------------------------------------- */ --blue-50: #F2F7FF; --blue-100: #EBF4FF; /* panel tint */ --blue-200: #DAEAFF; /* chip tint */ --blue-300: #A9CBFB; --blue-400: #5A92E4; --blue-500: #2369D2; /* brand primary — sampled from the logo */ --blue-600: #1B54AE; --blue-700: #17458C; --blue-800: #123E86; --blue-900: #0E2F63; /* --- Signal yellow ----------------------------------------------------- The CTA colour. Bright and pale, so it always carries dark text — white on this yellow is unreadable and is never used. */ --yellow-100: #FEFEE8; --yellow-200: #FAFAC0; --yellow-300: #F5F572; /* brand accent — buttons, highlights */ --yellow-400: #E8E845; --yellow-500: #C9C915; --yellow-700: #6E6E0C; /* the only yellow safe as text on light */ /* --- Neutrals ----------------------------------------------------------- */ --ink-900: #101010; --ink-800: #1A1A1A; --ink-700: #333333; --ink-600: #4D4D4D; --ink-500: #6A6A6A; --ink-400: #9A9A9A; --ink-300: #C9CFD8; --ink-200: #DFE4EC; --ink-100: #EDF0F5; /* --- Banner mesh -------------------------------------------------------- The hero artwork's own palette: a desaturated slate blue, cooler and greyer than the brand blue, laid as soft radials over a near-white base. It is background only — never a fill, a border or a text colour, and the brand blue above is still the only blue the interface uses. Held as bare RGB triples because each hue is used at two alphas, once visible and once at zero. Fading to `transparent` instead would fade toward rgba(0,0,0,0) and grey the midpoint of every blob. */ --mesh-base: #EEF1F5; --mesh-deep: 126, 159, 201; /* #7E9FC9 */ --mesh-soft: 150, 178, 212; /* #96B2D4 */ /* --- Surfaces ----------------------------------------------------------- */ --page: #F0F3F8; --white: #FFFFFF; --tint: #EBF4FF; --tint-2: #F5F9FF; --bg: var(--page); --bg-sunken: #E9EEF6; --surface: var(--white); --surface-tint: var(--tint); --surface-ink: var(--blue-900); --surface-blue: var(--blue-800); /* --- Text --------------------------------------------------------------- */ --text: var(--ink-900); /* 18.9:1 on page */ --text-secondary: var(--ink-600); /* 7.9:1 on page */ --text-muted: var(--ink-500); /* 5.2:1 on page */ --text-on-ink: #FFFFFF; --text-on-ink-2: #C2D6F5; /* 8.9:1 on blue-900 */ --text-on-ink-3: #9DB8E6; /* 6.3:1 on blue-900 */ --link: var(--blue-600); /* --- Borders ------------------------------------------------------------ */ --border: #E2E8F1; --border-strong: #CBD5E3; --border-tint: #CFE1FB; --border-ink: rgba(255, 255, 255, 0.16); --border-ink-strong: rgba(255, 255, 255, 0.30); /* --- Status ------------------------------------------------------------- */ --success: #0F7B55; --warning: #8A5D06; --danger: #B4342A; /* --- Signature gradients (the loop) ------------------------------------- */ --loop-gradient: linear-gradient(100deg, var(--yellow-300) 0%, #A9D98C 34%, var(--blue-400) 68%, var(--blue-500) 100%); /* Same ramp turned vertical, for rails that fill downward. */ --loop-gradient-v: linear-gradient(180deg, var(--yellow-300) 0%, #A9D98C 34%, var(--blue-400) 68%, var(--blue-500) 100%); --loop-gradient-soft: linear-gradient(120deg, rgba(245,245,114,.35) 0%, rgba(35,105,210,.22) 100%); --page-wash: radial-gradient(58% 46% at 78% 22%, rgba(35,105,210,.13) 0%, transparent 68%), radial-gradient(40% 34% at 22% 8%, rgba(245,245,114,.22) 0%, transparent 70%); /* --- Type --------------------------------------------------------------- Bricolage Grotesque for headings, Poppins for UI and body — the pairing the live SmartRoots site already uses. */ --font-display: 'Bricolage Grotesque', 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --font-sans: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; /* The emphasised phrase inside a heading, and nothing else. Bricolage has no italic axis, so a real italic needs a real italic face — a synthetic slant on a grotesque at 3rem reads as a rendering fault. Loaded italic-only. The fallback chain is deliberately all serifs: if Playfair fails, the emphasis should still contrast with the grotesque around it. */ --font-emph: 'Playfair Display', Georgia, 'Times New Roman', serif; --fs-display-1: clamp(2.5rem, 1.5rem + 4.4vw, 4.5rem); /* The banner's own step, one below display-1. The hero headline is authored as two lines that are held on a single row each, so unlike every other display heading on the site it cannot reflow when it runs out of room — it overflows instead. This tops out lower and rises more slowly, which keeps a thirty-character line inside the container at every width where the no-wrap rule applies. Kept here rather than in hero.css so the ramp stays in one place. */ --fs-display-hero: clamp(2rem, 1.1rem + 3.1vw, 3.6rem); --fs-display-2: clamp(2.1rem, 1.4rem + 3vw, 3.5rem); --fs-h1: clamp(1.9rem, 1.3rem + 2.5vw, 3rem); --fs-h2: clamp(1.5rem, 1.2rem + 1.5vw, 2.15rem); --fs-h3: clamp(1.2rem, 1.08rem + 0.55vw, 1.5rem); --fs-h4: clamp(1.05rem, 1rem + 0.25vw, 1.2rem); --fs-lead: clamp(1rem, 0.95rem + 0.3vw, 1.15rem); --fs-body: 1rem; --fs-sm: 0.9375rem; --fs-xs: 0.8125rem; --fs-label: 0.8125rem; --lh-display: 1.1; --lh-heading: 1.18; --lh-snug: 1.4; --lh-body: 1.7; --lh-relaxed: 1.8; --tr-display: -0.02em; --tr-heading: -0.015em; --tr-body: 0em; --tr-label: 0.02em; /* --- Space (4px base) --------------------------------------------------- */ --s-1: 0.25rem; --s-2: 0.5rem; --s-3: 0.75rem; --s-4: 1rem; --s-5: 1.25rem; --s-6: 1.5rem; --s-8: 2rem; --s-10: 2.5rem; --s-12: 3rem; --s-16: 4rem; --s-20: 5rem; --s-24: 6rem; --s-32: 8rem; --s-40: 10rem; --section-y: clamp(4rem, 2.5rem + 5vw, 7.5rem); --section-y-tight: clamp(3rem, 2rem + 3.5vw, 5rem); --gutter: clamp(1.25rem, 0.6rem + 2.8vw, 3rem); /* --- Containers --------------------------------------------------------- */ --container: 1240px; --container-wide: 1400px; --container-narrow: 760px; /* --- Radius —------------------------------------------------------------ Deliberately large. The live brand runs on 20 / 40 / 50px, which is what gives it its soft, civic, approachable feel; anything tighter reads as a different company. */ --r-xs: 6px; --r-sm: 10px; --r-md: 14px; --r-lg: 20px; --r-xl: 28px; --r-2xl: 40px; --r-3xl: 52px; --r-pill: 999px; /* --- Elevation — soft, wide, low-opacity; never hard or tight ----------- */ --e-0: none; --e-1: 0 1px 2px rgba(16, 24, 40, .04), 0 0 0 1px rgba(16, 24, 40, .04); --e-2: 0 8px 24px -10px rgba(23, 56, 110, .16), 0 0 0 1px rgba(16, 24, 40, .04); --e-3: 0 22px 50px -22px rgba(23, 56, 110, .28); --e-4: 0 40px 84px -34px rgba(23, 56, 110, .34); --e-brand: 0 12px 28px -12px rgba(35, 105, 210, .5); --e-yellow: 0 12px 28px -14px rgba(201, 201, 21, .55); /* --- Motion ------------------------------------------------------------- */ --d-fast: 0.18s; --d-base: 0.32s; --d-slow: 0.62s; --d-epic: 1.1s; --ease-out-expo: cubic-bezier(.16, 1, .3, 1); --ease-out-soft: cubic-bezier(.22, .61, .36, 1); --ease-in-out: cubic-bezier(.65, 0, .35, 1); /* --- Layers ------------------------------------------------------------- */ --z-base: 0; --z-raised: 10; --z-sticky: 40; --z-header: 100; --z-menu: 110; --z-overlay: 200; } /* Breakpoints (documented; media queries use the literals) sm 480 · md 768 · lg 1024 · xl 1280 · 2xl 1536 */