/* ========================================================================== BOALD — Design tokens Single source of truth. Values transcribed from the Figma artboard (Boald Website v6), not the generic Variable scaffold. MIRRORED 2026-08-21 from Claude Design project fa26203b-d2e8-4aa8-b9d6-c464e5d02ed4 → boald/styles/tokens.css If this file and the Claude Design project disagree, the project wins. ========================================================================== */ :root { /* ---- Brand / neutral palette ---------------------------------------- */ --c-paper: #f5f5f5; /* light page background rgb(245,245,245) */ --c-paper-lift: #efede7; /* raised light panel rgb(239,237,231) */ --c-ink: #1e1c1d; /* dark page background rgb(30,28,29) */ --c-ink-deep: #191818; /* deepest panel / mask rgb(25,24,24) */ --c-ink-ghost: #292929; /* giant background wordmarks rgb(41,41,41) */ --c-cream: #f7f7f2; /* off-white text on dark rgb(247,247,242)*/ --c-white: #fefefe; /* pure-ish white text rgb(254,254,254)*/ --c-ink-panel: #272425; /* raised card panel on dark rgb(39,36,37) */ --c-hairline: rgba(150,150,150,0.07); /* global background lines */ --c-card-grey: #f2f2f2; /* cool-grey card fill, kept from PrimeFolio (CEO call) */ /* --c-coral REMOVED 2026-09-04: accent settled on ember #7C3B2B, coral dropped (CEO). Had zero consumers in code. Do not reintroduce. */ /* ---- Sand accent (single hue, 3 steps) ------------------------------ */ --c-sand: #d1c0a0; /* primary button fill rgb(209,192,160)*/ --c-sand-deep: #b4a687; /* underline / active accent rgb(180,166,135)*/ --c-sand-soft: #e1d9c7; /* eyebrow on dark rgb(225,217,199)*/ --c-sand-text: #8f7f5e; /* eyebrow + step numbers on light rgb(143,127,94) 3.6:1 on paper, 3.3:1 on paper-lift. Readability floor 3:1 for all visible text (CEO, 2026-10-08). sand-deep stays for links, focus, scribble, buttons. */ --c-sand-mute: #b2ad8f; /* testimonial panel rgb(178,173,143)*/ --c-ember: #7c3b2b; /* thin brand rule under the hero */ /* ---- Ink text steps (on light) -------------------------------------- */ --c-ink-100: #202020; /* headings */ --c-ink-88: rgba(30,28,29,0.88); --c-ink-64: rgba(30,28,29,0.64); --c-ink-40: rgba(30,28,29,0.40); --c-ink-16: rgba(30,28,29,0.16); /* ---- Cream text steps (on dark) ------------------------------------- */ --c-cream-100: #f7f7f2; --c-cream-88: rgba(247,247,242,0.88); --c-cream-64: rgba(247,247,242,0.64); --c-cream-40: rgba(247,247,242,0.40); --c-cream-16: rgba(247,247,242,0.16); /* Semantic pointers — flipped by [data-theme="dark"] below ------------ */ --bg: var(--c-paper); --bg-lift: var(--c-paper-lift); --text-strong: var(--c-ink-100); --text-body: var(--c-ink-88); --text-muted: var(--c-ink-64); --text-faint: var(--c-ink-40); --border-subtle: var(--c-ink-16); --eyebrow-color: var(--c-sand-text); --ghost-color: var(--c-ink-16); /* ---- Typography families -------------------------------------------- */ /* "Haffer VF" is the licensed brand face — drop the webfont in and it wins. Hanken Grotesk is the free fallback used for the prototype. */ --font-sans: "Haffer VF", "Hanken Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; /* mono text is Haffer's own SemiMono style (Mono axis at 60) from the same file (CEO, 2026-10-11): every rule that uses --font-mono also sets font-variation-settings: "MONO" var(--mono-axis). A plain number so it maps to a Webflow Number Variable on the Designer's Variations control (Rowan, 2026-10-11) */ --mono-axis: 60; --font-mono: "Haffer VF", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; /* ---- Fluid type scale (min @479px → max @1440px) ------------------ */ --fs-display-xl: clamp(4.5rem, 18vw, 18.75rem); /* 300px — "How we help" */ --fs-display-lg: clamp(3.75rem, 14vw, 14.375rem); /* 230px — "Where you are" */ --fs-h1: clamp(2.612rem, calc(0.924rem + 2.723vw), 3.375rem); /* 54px @1440 — hero (reduced from 66, 2026-10-21) */ --fs-h2: clamp(2.176rem, calc(0.0756rem + 3.388vw), 3.125rem); /* 50px @1440 — section titles (reduced from 56, 2026-10-21) */ --fs-h3-feature: clamp(1.75rem, 3.1vw, 2.75rem); /* 44px — feature title (one large item per row) */ --fs-h3: clamp(1.5rem, 2.4vw, 2rem); /* 32px — card title (cards, steps, form) */ --fs-quote: clamp(1.5rem, 2.3vw, 2rem); /* 32px — testimonial */ --fs-stat: clamp(3.5rem, 6.5vw, 5.625rem); /* 90px — stat number */ --fs-lead: clamp(1.625rem, calc(2vw + 0.25rem), 2rem); /* 32px — lead paragraph and hero subtitle */ --fs-body-lg: clamp(1.0625rem, 1.4vw, 1.25rem);/* 20px — hero sub */ --fs-body: clamp(1rem, 1.2vw, 1.125rem); /* 18px — body / italic */ --fs-ui: 1rem; /* 16px — nav / buttons */ --fs-caption: 0.875rem; /* 14px — captions */ --fs-eyebrow: 0.875rem; /* 14px — tracked label */ /* line-heights */ --lh-tight: 1.0; --lh-snug: 1.1; --lh-lead: 1.2; --lh-body: 1.4; --lh-ghost: 0.7; /* tracking */ --ls-tight: -0.02em; --ls-eyebrow: 0.2em; /* ---- Spacing scale --------------------------------------------------- Exponential (×√2 per step — doubles every two steps: 8–16–32–64–128) and fluid: every step scales with the viewport via clamp(). ---------- */ --sp-2xs: clamp(0.4375rem, 0.46vw, 0.5rem); /* 7 → 8 */ --sp-xs: clamp(0.625rem, 0.64vw, 0.6875rem); /* 10 → 11 */ --sp-sm: clamp(0.875rem, 0.93vw, 1rem); /* 14 → 16 */ --sp-md: clamp(1.25rem, 1.33vw, 1.4375rem); /* 20 → 23 */ --sp-lg: clamp(1.625rem, 1.85vw, 2rem); /* 26 → 32 */ --sp-xl: clamp(2.25rem, 2.6vw, 2.8125rem); /* 36 → 45 */ --sp-2xl: clamp(3rem, 3.7vw, 4rem); /* 48 → 64 */ --sp-3xl: clamp(4.25rem, 5.27vw, 5.6875rem); /* 68 → 91 */ --sp-4xl: clamp(5.5rem, 7.4vw, 8rem); /* 88 → 128 */ /* rhythm: section padding (fluid) */ --section-pad-block: clamp(6rem, 16vw, 15rem); /* 96 → 240 */ --section-pad-inline: max(1.25rem, 4.63vw); /* edge gutter: 20px floor, then proportional (80 @ 1728), never capped. Navbar, footer, mobile menu */ /* content gutter (--page-gutter): the fluid gutter until the content reaches --container-large (1760px, at about 1940px wide); wider than that, content stops and centres, so no column keeps drifting apart (CEO, 2026-10-11). Identical to --section-pad-inline up to about 1940px */ --page-gutter: max(var(--section-pad-inline), calc((100% - var(--container-large)) / 2)); --gap-columns: clamp(2rem, 5vw, 5rem); /* 32 → 80 */ /* column inset added to the gutter on every content section (.padding-global): 144px at 1728 and up, tapering to 0 by the 992px tablet breakpoint */ --inset-extra: clamp(0px, calc(19.57vw - 194.2px), 144px); --gap-card: clamp(1rem, 1.6vw, 1.5rem); /* 16 → 24 — gap between paired cards */ --pad-panel: clamp(1.75rem, 2.6vw, 2.75rem); /* 28 → 44 — inner padding of card panels */ /* ---- Layout widths --------------------------------------------------- */ --container-large: 1760px; /* widest content column, reached at about 1940px wide; 1568px at the 1728 artboard as before, raised 12% from 1568 for large screens (CEO, 2026-10-11) */ --container-text: min(1040px, 76vw); /* max width for long-form reading, viewport-proportional below desktop */ --measure: 32em; /* longest comfortable line for running text: about 70 characters at any size (em scales with the font). 2026-10-08 responsiveness review */ --measure-lead: 28em; /* the same line length for text-lead, whose larger size fits more characters into an em: about 72 characters (2026-10-11) */ /* ---- Radii / borders / shadows -------------------------------------- */ --radius-sm: 6px; --radius-md: 8px; --radius-lg: 12px; --shadow-pill: inset 0 1px 1px rgba(255,255,255,0.35), 0 1px 1px rgba(0,0,0,0.45), 0 12px 15px rgba(0,0,0,0.3); --shadow-soft: 0 2px 5.3px rgba(110,110,110,0.1), 0 20px 40px rgba(176,156,116,0.15); /* Pill shadow tuned for a light backdrop — softer, warmer, no harsh black drop */ --shadow-pill-light: inset 0 1px 1px rgba(255,255,255,0.6), 0 1px 2px rgba(30,28,29,0.12), 0 10px 22px rgba(30,28,29,0.14); /* ---- Motion ---------------------------------------------------------- */ --ease-out: cubic-bezier(0.22, 1, 0.36, 1); --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); --dur-fast: 0.25s; --dur-med: 0.5s; --dur-slow: 0.9s; } /* ---- Tablet type & layout tuning (768–991) ------------------------------ */ @media (max-width: 991px) { :root { /* tablet sizes rise from the phone size at 768px to the desktop size at 992px, so no text gets smaller as the screen gets wider (2026-10-08 responsiveness review) */ --fs-display-xl: clamp(4rem, 13vw, 8rem); --fs-display-lg: clamp(3.25rem, 11vw, 6.5rem); --fs-h1: clamp(2.2275rem, calc(0.8964rem + 2.77vw), 2.612rem); --fs-h2: clamp(2.025rem, calc(1.504rem + 1.085vw), 2.176rem); --fs-quote: clamp(1.25rem, calc(0.389rem + 1.794vw), 1.5rem); --fs-stat: clamp(3.25rem, calc(0.564rem + 5.596vw), 4.03rem); --fs-lead: clamp(1.4375rem, calc(0.792rem + 1.345vw), 1.625rem); /* readable measure still tracks the viewport on tablets */ --container-text: min(720px, 88vw); } } /* ---- Mobile type tuning (≤767) ------------------------------------------ */ @media (max-width: 767px) { :root { --fs-display-xl: clamp(3.25rem, 17vw, 5rem); --fs-display-lg: clamp(2.75rem, 15vw, 4.25rem); --fs-h1: clamp(1.8225rem, calc(6.156vw + 0.3038rem), 2.2275rem); --fs-h2: clamp(1.575rem, 6.48vw, 2.025rem); --fs-quote: 1.25rem; --fs-stat: clamp(2.5rem, 11vw, 3.25rem); --fs-lead: 1.25rem; --fs-h3-feature: 1.375rem; --fs-h3: 1.25rem; --fs-body-lg: 1.0625rem; --fs-ui: 0.9375rem; } } /* ========================================================================== Dark theme — set data-theme="dark" on any section wrapper ========================================================================== */ [data-theme="dark"] { --bg: var(--c-ink); --bg-lift: var(--c-ink-deep); --text-strong: var(--c-cream-100); --text-body: var(--c-cream-88); --text-muted: var(--c-cream-64); --text-faint: var(--c-cream-40); --border-subtle: var(--c-cream-16); --eyebrow-color: var(--c-sand-soft); --ghost-color: var(--c-ink-ghost); }