/* ============================================================================ STYLE.css — Threeflows Solutions sitewide stylesheet ---------------------------------------------------------------------------- Single source of truth for visual/UX decisions is STYLE.md. This file is built in PHASES (see backlog BL-034): - v1 (this file): design tokens (:root) + the sitewide scrollbar-gutter rule. Nothing else — no component selectors, no page overrides. - later phases: components migrated per-family, then pages linked. Variable names follow STYLE.md → Design Tokens → "CSS custom-property naming" (the canonical naming convention). Every value traces to STYLE.md; target-state values only. Fonts are loaded per-page (Google Fonts ); this file only references the families. No page links to it yet. ============================================================================ */ :root { /* --- Raw colours (STYLE.md → Color palette) ------------------------------ */ /* Reds */ --red-brand: #C2291B; /* brand red (logo anchor) */ --red-interactive: #EF4444; /* interactive red */ --red-wash: #FDF0F0; /* red wash */ /* Neutrals (white + black fold into the N family) */ --black: #1A1A1A; --charcoal: #3A3A3A; --grey-mid: #5C5C5C; /* mid grey */ --grey-muted: #909090; /* muted grey */ --grey-light: #C8C8C8; /* light grey */ --grey-border: #E8E8E8; /* border grey */ --off-white: #F8F8F8; --white: #FFFFFF; /* Ambers */ --amber: #FACC15; --amber-wash: #FEF3C7; --amber-text: #854F0B; /* Greens */ --green: #00B050; --green-wash: #EAF3DE; --green-text: #3B6D11; /* Blues */ --blue: #185FA5; --blue-wash: #E6F1FB; /* --- Combos: bg + text pairs (STYLE.md → Color palette combos) ----------- Two variables per combo, ID verbatim; each points at a raw-colour variable above so a combo never re-hardcodes a hex. */ /* Combos with meaning (tag pills / wash, context-scoped) */ --combo-RR01-bg: var(--red-wash); --combo-RR01-text: var(--red-brand); --combo-NN01-bg: var(--grey-border); --combo-NN01-text: var(--charcoal); --combo-GG01-bg: var(--green-wash); --combo-GG01-text: var(--green-text); --combo-BB01-bg: var(--blue-wash); --combo-BB01-text: var(--blue); --combo-AA01-bg: var(--amber-wash); --combo-AA01-text: var(--amber-text); /* Combos commonly used (text on bg, buttons, links) */ --combo-NN02-bg: var(--white); --combo-NN02-text: var(--black); --combo-NN03-bg: var(--white); --combo-NN03-text: var(--grey-mid); --combo-NN04-bg: var(--white); --combo-NN04-text: var(--grey-muted); --combo-NN05-bg: var(--off-white); --combo-NN05-text: var(--black); --combo-NN06-bg: var(--black); --combo-NN06-text: var(--off-white); --combo-NN07-bg: var(--black); --combo-NN07-text: var(--grey-muted); --combo-NR01-bg: var(--white); --combo-NR01-text: var(--red-interactive); --combo-RN01-bg: var(--red-interactive); --combo-RN01-text: var(--white); --combo-NR02-bg: var(--black); --combo-NR02-text: var(--red-interactive); /* Combos viable but unassigned (reserved, no use yet) */ --combo-RN02-bg: var(--red-brand); --combo-RN02-text: var(--white); --combo-GN01-bg: var(--green); --combo-GN01-text: var(--white); --combo-BN01-bg: var(--blue); --combo-BN01-text: var(--white); --combo-AN01-bg: var(--amber); --combo-AN01-text: var(--black); --combo-NN08-bg: var(--grey-muted); --combo-NN08-text: var(--white); /* --- Typography (STYLE.md → Typography) ---------------------------------- */ /* Font families — referenced only; loaded per-page */ --font-serif: 'DM Serif Display', serif; /* h1, h2 */ --font-sans: 'DM Sans', sans-serif; /* h3, body, UI */ /* Type ramp — sizes */ --type-h1: 44px; /* hero */ --type-h2: 32px; /* section title */ --type-h3: 20px; /* subhead */ --type-body: 16px; /* body */ --type-dense-title: 13px; /* dense title / card name */ --type-dense-body: 12px; /* dense body / card description */ --type-dense-meta: 11px; /* dense meta / in-card link */ /* --- Spacing scale (STYLE.md → Spacing scale) ---------------------------- */ --space-4: 4px; --space-8: 8px; --space-12: 12px; --space-16: 16px; --space-24: 24px; --space-32: 32px; --space-48: 48px; --space-64: 64px; /* --- Border-radius scale (STYLE.md → Border-radius) ---------------------- */ --radius-6: 6px; /* buttons, chips */ --radius-10: 10px; /* cards */ --radius-20: 20px; /* large cards, callouts */ --radius-999: 999px; /* pills (fully round) */ --radius-circle: 50%; /* circles, avatars */ } /* --- Scrollbar gutter (STYLE.md → Section/layout → Scrollbar gutter) -------- Reserve the vertical scrollbar gutter sitewide so layout width stays constant between TALL and SHORT pages (prevents the ~15px nav shift). */ html { scrollbar-gutter: stable; } /* ========================================================================== COMPONENTS ========================================================================== */ /* --- Eyebrow (STYLE.md → Components → Eyebrows) ----------------------------- Small uppercase label above a section title or hero identifier. One pattern only — never page-specific eyebrow classes. Base = muted (default); .red for hero identifiers (a static brand-red accent, not interactive — two-reds rule). STYLE-IDs: CMP-EYEBROW-MUTED, CMP-EYEBROW-RED. Size = TY-EYEBROW (11px — the eyebrow's own governed use; shares the dense-meta value, no separate token). Font-family inherits DM Sans (body font), matching the prior inline rules. */ .eyebrow { font-size: var(--type-dense-meta); /* 11px (TY-EYEBROW) */ font-weight: 600; text-transform: uppercase; letter-spacing: 0.12em; margin-bottom: var(--space-12); color: var(--grey-muted); /* CMP-EYEBROW-MUTED (default) */ } .eyebrow.red { color: var(--red-brand); } /* CMP-EYEBROW-RED — #C2291B */ .eyebrow.muted { color: var(--grey-muted); } /* explicit alias for Shape-B markup */ /* --- In-page link (STYLE.md → Components → In-page links) ------------------- Inline red action link inside body content (e.g. "Contact us →", "Get it for free →"). One canonical class — never inline styles. Colour is interactive red #EF4444 (NR01 — these are clickable, so interactive red per the two-reds rule, NOT brand red). Size is the body ramp 16px (snapped from the old off-scale 15px). Hover underlines; no visited/focus/disabled states. Arrows (→ internal, ↗ external) live in the markup, per the Arrow rule. STYLE-ID CMP-CTALINK. */ .cta-link { color: var(--red-interactive); font-weight: 600; font-size: var(--type-body); text-decoration: none; } .cta-link:hover { text-decoration: underline; } /* --- Buttons (STYLE.md → Components → Buttons) ------------------------------ Filled action buttons. One canonical geometry — padding 12×24, radius 6, DM Sans 14px/600, line-height 1.1 — reconciling the prior live variants (13×28 / 12×26 padding, 15px/500 font, and the tool/survey :disabled tier) into a single component. Arrows (→) ride inside the label text, so the box stays inline-block (no flex/gap) — matching the prior rules. - btn-red = interactive red #EF4444 (RN01) — primary, sitewide. Migrated from live #D63B3B. STYLE-ID CMP-BTN-RED. - btn-dark = #1A1A1A (NN06) — index-only by design ("See how we work →"). STYLE-ID CMP-BTN-DARK. :disabled is baked in (was the tool/survey variant). btn-outline is DEFERRED (BL-017) and not defined here. The .btn-red.on-dark dark-band buttons keep their own page-local rule + inline styles for now (separate later cleanup). */ .btn-red { background: var(--red-interactive); color: var(--white); padding: var(--space-12) var(--space-24); border-radius: var(--radius-6); font-family: var(--font-sans); font-size: 14px; font-weight: 600; line-height: 1.1; border: none; cursor: pointer; text-decoration: none; display: inline-block; transition: opacity 0.2s, transform 0.15s; } .btn-red:hover:not(:disabled) { opacity: 0.88; transform: translateY(-1px); } .btn-red:disabled { opacity: 0.45; cursor: not-allowed; } .btn-dark { background: var(--black); color: var(--white); padding: var(--space-12) var(--space-24); border-radius: var(--radius-6); font-family: var(--font-sans); font-size: 14px; font-weight: 600; line-height: 1.1; border: none; cursor: pointer; text-decoration: none; display: inline-block; transition: opacity 0.2s; } .btn-dark:hover:not(:disabled) { opacity: 0.85; }