/* ========================================================================== The Fractionals® — design tokens Built on the LIVE SITE'S OWN SYSTEM, extracted from its computed styles on 2026-09-18 — not invented, and not replaced. The client likes their site. The campaign is an addition to this palette, not a substitute for it. Every ratio below is measured, not estimated. ========================================================================== */ /* --- Faces -------------------------------------------------------------- They use Anton for the hero H1, Neue Haas Grotesk 300–900 for everything structural, and Grouch BT (a warm bookish serif) for section headings. Anton is free and is the real thing. The other two are licensed, so they are substituted — see docs/DESIGN.md for the matching evidence. */ @font-face { font-family: 'Anton'; src: url('/assets/fonts/anton.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: 'Grotesk'; /* stands in for Neue Haas Grotesk */ src: url('/assets/fonts/inter-var.woff2') format('woff2-variations'); font-weight: 100 900; font-style: normal; font-display: swap; } @font-face { font-family: 'Archivo'; /* the campaign's poster face */ src: url('/assets/fonts/archivo-var.woff2') format('woff2-variations'); font-weight: 100 900; font-stretch: 62% 125%; font-style: normal; font-display: swap; } /* Stands in for Grouch BT — a static instance of Fraunces at wght 900 / SOFT 100 / WONK 0 / opsz 72. Chosen on the tells, against 15 candidates rendered at the specimen's own size: their 'c' has unmistakable ROUND BALL terminals top and bottom, which only Fraunces at SOFT=100 reproduces (the default SOFT=0 cut is a wedge), and their 'y' is a short diagonal with a small hooked tip. Contrast is moderate throughout with no Didone hairlines, which is what rules out Playfair and Bodoni Moda. WONK stays 0 — their baseline is even, with none of the hand-set jitter that axis adds. Instrument Serif, Young Serif and DM Serif Display have no black weight at all; Bitter, Zilla Slab and Roboto Slab are slabs with no ball terminals. */ @font-face { font-family: 'Fraunces Soft'; src: url('/assets/fonts/fraunces-soft-900.woff2') format('woff2'); font-weight: 900; font-style: normal; font-display: swap; } /* Metric-matched fallback so a swap on the hero headline does not reflow. */ @font-face { font-family: 'Anton Fallback'; src: local('Arial Narrow Bold'), local('Arial Bold'), local('Impact'); size-adjust: 92%; ascent-override: 100%; descent-override: 22%; line-gap-override: 0%; } :root { /* --- Chrome height ----------------------------------------------------- --hdr-h the masthead's OWN height. --rolebar-h the mobile role strip below it; 0 wherever the two pills fit inside the header instead. --chrome-h what page content has to clear. Every "start below the header" offset uses this ONE value: the height was written as a bare 68px in nine places, so adding the strip would otherwise have meant finding all nine and getting each right. -------------------------------------------------------------------- */ --hdr-h: 68px; --rolebar-h: 0px; --chrome-h: calc(var(--hdr-h) + var(--rolebar-h)); /* --- Their palette, verbatim ----------------------------------------- */ /* --- Corp. colour palette ---------------------------------------------- Off-Black #1A1B1E · Off-White #F0F0EF · Tan #BDAD8D · Bright Pink #FF40B4 Magenta #DB007A · Bright Mint #76E3A9 · Teal #009289 Each colour but the first two also has a 50% tint. Every colour below is one of these, or white. The old names are kept so nothing that reads them has to change. */ --charcoal: #1A1B1E; /* Off-Black */ --mint: #78C1BC; /* was Bright Mint #76E3A9. The one platform green, 50% Teal, everywhere (CxO, buttons, charts). Off-Black on it is 8.3:1. */ --tan: #BDAD8D; /* Tan */ --mint-deep: #009289; /* Teal. White on it is 3.8:1: AA for large or bold text only. */ --magenta: #FF87FF; /* was Magenta #DB007A; every pink is now #FF87FF */ --oat: #F0F0EF; /* Off White. Was a separate warmer cream for How it works, which has been removed. */ --cream: #F0F0EF; /* Off White */ --white: #FFFFFF; --ink: #1A1B1E; /* Off-Black */ --hot-pink: #FF87FF; /* was Bright Pink #FF40B4 */ --mint-50: #B3EACC; /* 50% Bright Mint (half strength on Off-White) */ --teal-50: #78C1BC; /* 50% Teal (half strength on Off-White) */ --bubblegum: #FF87FF; /* was 50% Magenta #E678B4. FrED's pink, and the one pink used everywhere. Off-Black on it is 8.3:1. */ /* --- Measured contrast ------------------------------------------------ ground cream white charcoal mint bubblegum charcoal 15.10 17.22 — 10.93 8.33 mint 1.38 1.58 10.93 — 1.31 tan 1.93 2.20 7.81 1.40 — magenta 4.29* 4.89 3.52* 3.11* — bubblegum 1.81 2.07 8.33 1.31 — (* large text only; unmarked low values must never carry body copy) TWO RULES FALL OUT OF THAT TABLE: 1. Type on mint, tan or bubblegum is ALWAYS --charcoal. Cream on any of them is between 1.31 and 1.93:1, i.e. invisible. 2. The magenta CTA takes --white, not --cream. Their live site uses cream and lands on 4.29:1, which misses AA body by 0.21. White is 4.89:1. One character, and the button becomes compliant. */ --on-mint: var(--charcoal); --on-tan: var(--charcoal); --on-bubblegum: var(--charcoal); --on-magenta: var(--charcoal); /* white on #FF87FF is ~2:1; Off-Black is 8.3:1 */ /* Their magenta is a FILL colour, not a text colour. As small type it measures 4.29:1 on cream and 3.52:1 on charcoal — both under AA. It stays exactly as it is wherever it is a button or a block; these two are for when the brand colour has to be the ink. */ --magenta-ink: #FF87FF; /* on --cream: 5.16:1 */ --magenta-lift: #FF87FF; /* on --charcoal: 5.75:1 */ --on-charcoal: var(--cream); /* Muted text. On a dark ground a transparency is safe; on a saturated one it is not — dimming blends toward the ground and collapses the ratio. (memory/feedback/feedback_opacity_is_not_de_emphasis_on_brand_colour.md) */ --cream-muted: color-mix(in srgb, var(--cream) 74%, transparent); --charcoal-muted: color-mix(in srgb, var(--charcoal) 72%, transparent); --rule: color-mix(in srgb, var(--cream) 16%, transparent); --rule-dark: color-mix(in srgb, var(--charcoal) 18%, transparent); /* --- Type ------------------------------------------------------------- */ --font-display: 'Anton', 'Anton Fallback', 'Arial Narrow', sans-serif; --font-poster: 'Archivo', 'Arial Black', sans-serif; /* campaign headlines */ --font-body: 'Grotesk', system-ui, -apple-system, 'Segoe UI', sans-serif; --font-serif: 'Fraunces Soft', Georgia, 'Times New Roman', serif; /* Their H1 sits at 57.6px, which is timid for a full-bleed hero. Ours runs to 112px at the top of the clamp. */ --step--1: clamp(0.875rem, 0.83rem + 0.18vw, 0.95rem); /* 14px floor (was 13.3px on phones) */ --step-0: clamp(1rem, 0.95rem + 0.24vw, 1.13rem); --step-1: clamp(1.13rem, 1.06rem + 0.34vw, 1.38rem); --step-2: clamp(1.35rem, 1.2rem + 0.72vw, 1.88rem); --step-3: clamp(1.62rem, 1.36rem + 1.3vw, 2.6rem); --step-4: clamp(1.94rem, 1.5rem + 2.2vw, 3.55rem); --step-5: clamp(2.33rem, 1.6rem + 3.6vw, 5rem); --hero: clamp(2.75rem, 1.4rem + 6.6vw, 7rem); --mega: clamp(3rem, 0.5rem + 11vw, 11rem); --micro-size: clamp(0.75rem, 0.71rem + 0.18vw, 0.82rem); /* 12px floor (was 9.7px on phones) */ --micro-track: 0.15em; /* --- Space ------------------------------------------------------------ */ --gutter: clamp(1.15rem, 0.7rem + 2.2vw, 3rem); --s-1: 0.5rem; --s-2: 1rem; --s-3: 1.5rem; --s-4: 2.5rem; --s-5: 4rem; --s-6: 6rem; --s-7: 9rem; --measure: 60ch; --max: 92rem; /* Rich's design is one fixed canvas 958.16pt wide. The four sections that reproduce it are laid out as percentages of THIS width, so they hold their proportions exactly up to here and then stop growing. */ --canvas: 100rem; /* --- Masthead chrome -------------------------------------------------- The header wears the ground colour of the band beneath it. These are the defaults; a section overrides whichever of the four it needs and the header reads them off the section under it (chrome() in app.js). Anything that declares nothing gets charcoal, so new sections need no wiring. */ --chrome: var(--charcoal); --chrome-ink: var(--cream); --chrome-accent: var(--bubblegum); --chrome-mark: url('/assets/brand/fractionals-lockup-cream.svg'); /* Only the hero sets this — see the note on .rhero. */ --chrome-scrim: none; /* --- Motion ----------------------------------------------------------- */ --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --ease-cut: cubic-bezier(0.83, 0, 0.17, 1); --t-fast: 150ms; --t-base: 300ms; --t-slow: 640ms; } @media (prefers-reduced-motion: reduce) { :root { --t-fast: 1ms; --t-base: 1ms; --t-slow: 1ms; } } /* The header grows at the canvas breakpoint — Rich draws the lockup larger. */ @media (min-width: 62rem) { :root { --hdr-h: 118px; } } /* Below this the two role pills cannot fit beside the lockup (measured: 94px of free space at 390, 27px at 320, against ~300px of pills), so they move to their own strip under the header and the chrome gets that much taller. */ @media (max-width: 44rem) { :root { --rolebar-h: 46px; } } /* The live site's body face, for the intro paragraph under the hero. */ @font-face { font-family: 'Neue Haas Grotesk'; src: url('/assets/fonts/NeueHaasDisplay-Light.woff2') format('woff2'); font-weight: 300; font-style: normal; font-display: swap; } @font-face { font-family: 'Neue Haas Grotesk'; src: url('/assets/fonts/NeueHaasDisplayBold.ttf') format('truetype'); font-weight: 700; font-style: normal; font-display: swap; }