/* ============================================================================ tokens.css — Sites by Bob design tokens ---------------------------------------------------------------------------- Single source of truth, extracted from the WINNING mockup: C:\Users\bobby\sbb-mockups\sitesbybob\direction-b.html ("Sun as Field") Canonical brand values (#1D2030 midnight / #FFD84D sun / #14161F deep) are authoritative and override the mockup wherever they disagree. In practice all three already matched Direction B exactly — see docs/reports/sbb-1-report.md. RULE: this is the ONLY file in src/styles that may contain a raw colour value. Everything downstream (base.css, components.css, page styles) references the semantic names below. src/styles/legacy/* is exempt — it is verbatim migrated CSS from the pre-build-system pages and is deleted as SBB-2 rethemes each page. ========================================================================== */ :root { /* ---------------------------------------------------------------- surfaces Direction B stacks three tiers: a cool midnight field, a WARM CHARCOAL reading tier for long-form sections, and the Sun used as a full field (not an accent dab) for the proof band, pricing and closing CTA. */ --surface-base: #1D2030; /* midnight — page field [canonical] */ --surface-deep: #14161F; /* deep — footer, mobile nav drawer [canonical] */ --surface-reading: #2A2724; /* warm charcoal — long-form reading tier */ --surface-card: #332F2B; /* lifted card on the reading tier */ --surface-nav: rgba(29, 32, 48, .92); /* sticky header over midnight */ /* Placeholder chrome carried over from the mockup's empty image slots. Mockup scaffolding — expected to disappear once real imagery lands. */ --surface-placeholder-from: #383D52; --surface-placeholder-to: #2E3346; /* ------------------------------------------------------------------ accent The Sun. Used as a FIELD (whole sections) as well as an accent. */ --accent: #FFD84D; /* sun [canonical] */ --accent-hover: #FFE27A; /* sun, lifted — button + CTA hover */ --accent-ink: #1D2030; /* text/iconography sitting ON the sun field */ --accent-line: rgba(255, 216, 77, .4); /* dashed sun hairline (quote cards) */ --accent-line-strong: rgba(255, 216, 77, .62); /* hero brand panel frame */ /* Sun bloom for the hero brand panel. Two stacked shadows, both spreadless: a tight one that seats the panel, and a wide low-alpha one that reads as light coming off the frame. Deliberately NOT a spread value — spread makes a hard second ring, which is the thing this must not look like. */ --glow-brand: 0 0 18px rgba(255, 216, 77, .22), 0 0 56px rgba(255, 216, 77, .11); --glow-brand-hover: 0 0 22px rgba(255, 216, 77, .30), 0 0 72px rgba(255, 216, 77, .16); /* -------------------------------------------------------------------- text */ --text-primary: #F0F1F6; /* cool off-white — headings on midnight */ --text-body: #EFEBE3; /* WARM off-white — body copy on the reading tier */ --text-muted: #A9AFC4; /* cool muted — sub-copy on midnight */ --text-muted-warm: #B5AC9F; /* warm muted — sub-copy on the reading tier */ --text-faint: rgba(240, 241, 246, .45); /* placeholder labels */ /* ---------------------------------------------------------- text on accent Midnight at varying opacity, for copy sitting on a Sun field. */ --text-on-accent: #1D2030; --text-on-accent-soft: rgba(29, 32, 48, .75); --text-on-accent-muted: rgba(29, 32, 48, .70); --text-on-accent-faint: rgba(29, 32, 48, .60); /* ------------------------------------------------------------------- lines */ --line: rgba(240, 241, 246, .10); /* hairline on midnight */ --line-warm: rgba(239, 235, 227, .12); /* hairline on the reading tier */ --line-on-accent: rgba(29, 32, 48, .18); /* hairline on a Sun field */ --line-on-accent-strong: rgba(29, 32, 48, .25); --fill-on-accent: rgba(29, 32, 48, .06); /* tinted card on a Sun field */ --border-hairline: 1px; --border-medium: 1.5px; --border-bar: 2.5px; /* mobile nav-toggle bars */ /* ==================================================================== TYPE Direction B is a single-family system: Manrope, 400–800. No display face — weight and size carry the hierarchy. */ --font-sans: 'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif; --font-body: var(--font-sans); --font-display: var(--font-sans); --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; --fw-black: 800; /* the workhorse weight — every heading, button and label */ /* Fluid display sizes (the only clamps in the system) */ --fs-display-hero: clamp(42px, 6.4vw, 84px); /* h1 */ --fs-display-closing: clamp(38px, 5.6vw, 72px); /* closing-CTA h2 */ --fs-display-section: clamp(32px, 4vw, 48px); /* section h2 */ /* Homepage h1 only. The hero shares its row with the brand panel, so the display size steps down at desktop to let both hold the fold. The 42px floor is identical to --fs-display-hero, so mobile is unchanged. */ --fs-display-hero-home: clamp(42px, 4.9vw, 62px); /* Fixed ramp. Value-keyed on purpose: Direction B's type is a hand-tuned set, not a modular scale, so rounding it into t-shirt sizes would lose the design. */ --fs-100: 11px; /* micro tags ("The common pick", placeholder flags) */ --fs-150: 12px; /* flag badge */ --fs-200: 13px; /* kickers, eyebrow pills, location labels, placeholder labels */ --fs-300: 14px; /* tier names, footer, secondary links */ --fs-350: 15px; /* nav links, CTA contact chips */ --fs-375: 15.5px; /* service-card body */ --fs-400: 16px; /* work-card body, buttons, case links, quote attribution */ --fs-450: 17px; /* BODY DEFAULT — also blockquotes */ --fs-500: 18px; /* closing-CTA sub-copy */ --fs-550: 19px; /* hero sub-copy, wordmark */ --fs-600: 21px; /* service-card heading */ --fs-650: 24px; /* ticker / proof-band copy */ --fs-700: 30px; /* work-card heading */ --fs-800: 38px; /* pricing tier price */ --fs-900: 56px; /* decorative quote mark */ /* Mobile overrides that the mockup steps down explicitly */ --fs-650-sm: 19px; /* ticker at ≤860px */ --fs-800-sm: 29px; /* tier price at ≤860px */ --lh-quote-mark: .5; --lh-hero: 1.04; --lh-closing: 1.05; --lh-section: 1.1; --lh-tier-price: 1.1; --lh-heading: 1.15; --lh-card-title: 1.2; --lh-body: 1.7; /* document default */ --lh-relaxed: 1.75; /* card body + blockquotes */ --ls-display: -.03em; /* hero + closing CTA */ --ls-heading: -.02em; /* section h2, work-card h3 */ --ls-tight: -.01em; /* wordmark, service h3, ticker */ --ls-wide: .06em; /* eyebrow pill */ --ls-wider: .08em; /* placeholder labels */ --ls-widest: .10em; /* location labels, tier names, badges */ --ls-ultra: .14em; /* section kickers */ /* ================================================================= SPACING Value-keyed ramp — Direction B's rhythm is hand-tuned, so every step below is a literal value from the mockup, nothing rounded and nothing dropped. Prefer the ROLE tokens further down for layout work. */ --space-2: 2px; --space-6: 6px; --space-8: 8px; --space-10: 10px; --space-12: 12px; --space-14: 14px; --space-16: 16px; --space-18: 18px; --space-20: 20px; --space-22: 22px; --space-24: 24px; --space-26: 26px; --space-28: 28px; --space-30: 30px; --space-32: 32px; --space-34: 34px; --space-36: 36px; --space-38: 38px; --space-40: 40px; --space-44: 44px; --space-48: 48px; --space-56: 56px; --space-64: 64px; --space-72: 72px; --space-76: 76px; --space-110: 110px; --space-130: 130px; /* ------------------------------------------------------------ layout roles */ --wrap-max: 1160px; --wrap-pad: var(--space-32); --wrap-pad-sm: var(--space-22); --section-y: var(--space-110); --section-y-sm: var(--space-72); --hero-y-top: var(--space-130); --hero-y-top-sm: var(--space-76); --hero-y-bottom: var(--space-110); --hero-y-bottom-sm: var(--space-72); /* Header lockup. Height is fixed and width is auto, so the mark can never be distorted. The vertical padding steps DOWN as the lockup steps up, so the taller mark does not turn the sticky header into a band: 85px desktop (16+52+16 plus the hairline). Mobile measures 69px, not 65 — below --bp-md the 44px touch target, not the 40px lockup, is the tallest thing in the row and sets the header height. */ --nav-logo-h: 52px; --nav-logo-h-sm: 40px; --nav-pad-y: var(--space-16); --nav-pad-y-sm: var(--space-12); --nav-gap: var(--space-34); --nav-drawer-pad-y: var(--space-18); --nav-toggle-size: 44px; /* minimum comfortable touch target */ /* Hero brand panel. The mark is square, so one max-width sizes the box at each breakpoint; the panel stacks above the headline below --bp-md. */ --hero-grid-gap: var(--space-56); --hero-grid-gap-sm: var(--space-40); /* The panel widths INCLUDE the border and padding (box-sizing:border-box is global), so they are set so the mark itself never shrinks below what it measured before the frame was restored: 320 - 2*(8+2) = 300px of image desktop, 186 - 2*(8+2) = 166px mobile. */ --brand-panel-max: 320px; --brand-panel-max-sm: 186px; /* App Store icon, masked to a real iOS superellipse in components.css. */ --app-icon-size: 112px; --app-icon-size-sm: 88px; --brand-panel-pad: var(--space-8); --brand-panel-border: 2px; --ticker-pad-y: var(--space-30); --ticker-item-gap: var(--space-34); --footer-pad-y: var(--space-34); --grid-gap: var(--space-26); /* service + quote grids */ --grid-gap-tight: var(--space-20); /* pricing tier grid */ --grid-gap-tight-sm: var(--space-14); --grid-gap-wide: var(--space-48); /* work card: media ↔ copy */ --stack-gap: var(--space-64); /* between work cards */ --stack-gap-sm: var(--space-56); --card-pad-y: var(--space-38); --card-pad-x: var(--space-32); --quote-pad-y: var(--space-40); --quote-pad-x: var(--space-36); --tier-pad-y: var(--space-32); --tier-pad-x: var(--space-26); --tier-pad-y-sm: var(--space-24); --tier-pad-x-sm: var(--space-20); --btn-pad-y: var(--space-16); --btn-pad-x: var(--space-34); --pill-pad-y: var(--space-8); --pill-pad-x: var(--space-18); --cta-pill-pad-y: var(--space-10); --cta-pill-pad-x: var(--space-22); --chip-pad-y: var(--space-12); --chip-pad-x: var(--space-26); --badge-pad-y: 7px; /* only odd value in the mockup */ --badge-pad-x: var(--space-14); /* ================================================================== RADIUS */ --radius-2xs: 1.5px; /* staircase squares inside the brand mark */ --radius-xs: 2px; /* ticker diamond separator, nav-toggle bars */ --radius-sm: 8px; /* brand mark tile */ --radius-md: 14px; /* service icon tile */ --radius-lg: 20px; /* cards: work media, service, tier, quote */ --radius-tier: 32px; /* reading-tier top corners */ --radius-tier-sm: 24px; --radius-pill: 100px; /* buttons, eyebrow pills, badges, contact chips */ --radius-round: 50%; /* the eyebrow-pill status dot */ /* ================================================================= EFFECTS */ --blur-nav: blur(10px); --lift-hover: -1px; /* buttons */ --lift-card-hover: -3px; /* pricing tiers */ --t-fast: .15s; --t-reveal: .7s; --ease: ease; --reveal-from: 22px; /* translateY before reveal */ --ticker-duration: 30s; /* --------------------------------------------------------------- z-index */ --z-header: 50; /* Breakpoints are documented here for reference only — custom properties cannot be used inside @media, so the literals live in base/components: --bp-md : 860px (nav collapses, grids stack) --bp-sm : 480px (pricing tiers go single-column) */ } /* Brand aliases. Provided so brand-literal references stay legible in review; every value is identical to its semantic counterpart above. Prefer the semantic names in new work. */ :root { --midnight: var(--surface-base); --deep: var(--surface-deep); --sun: var(--accent); }