/* * RoboPharma 2026, design tokens. * * Lifted from the approved homepage direction: "Direction 03" in the exec * review, which is the designer's original "Design 4" (navy and warm). That * renumbering is load-bearing: if you brief the designer, say Design 4. * * Source: /Users/bstewart/Sites/robopharma-review/designs/direction-3.html * The prototype is a flattened export with every style inline, so these values * were read back out of it rather than handed over as a palette. Treat this * file as the single place they live now: change a colour here, not in a * component. * * CONTRAST IS CHECKED. Ratios noted per token are against the surface each is * actually used on. The one trap worth knowing: amber on white is 2.0:1 and * fails WCAG AA for text at any size. Amber is a background, a rule, and an * accent. It is never body or link text on a light surface. Burnt orange is * the light-surface accent, at 5.9:1. */ /* ── Fonts ───────────────────────────────────────────────────────────────── The @font-face declarations live in assets/fonts/fonts.css, copied verbatim from the approved design's own font bundle and enqueued ahead of this file. Three families, and getting this wrong is most of why an early build of this theme did not look like the design: Archivo display headings, at font-stretch 112% and weight 400. The width axis matters: a weight-only Archivo renders at normal width and reads as a different typeface entirely. Funnel Sans body copy at weight 300, and the numerals in stat blocks at weight 650. Loaded as a VARIABLE font: 650 is not a standard weight and would snap silently to 700 if the fixed faces were used instead. IBM Plex Mono every uppercase micro-label: eyebrows, buttons, chips, card numbers, spec labels. This is what gives the design its technical character. Instrument Sans and Manrope were removed on 2026-08-13; neither name should reappear anywhere in the theme. Subsets and unicode-ranges are the design's, so glyph coverage matches. */ :root { /* ── Ink and navy ──────────────────────────────────────────────────────── Two navies, not one. --rp-navy is the page-level dark background; the deeper --rp-navy-deep is what the hero gradients resolve to at their dark end. Using one for both flattens the hero. */ --rp-navy: #12212e; /* white on this: 16.3:1 */ --rp-navy-deep: #0b1626; --rp-navy-alt: #11202f; /* ── Warm accents ──────────────────────────────────────────────────────── The amber to burnt-orange pair is the brand's signature in this direction; it appears as a 2px rule under stat blocks and across CTA edges. Keep them as a pair: the gradient is the recognisable element, not either colour alone. */ --rp-amber: #f8aa14; /* on navy 8.38:1. NEVER text on white (2.0:1) */ --rp-amber-soft: #f5c46b; /* eyebrow on navy, 10.13:1 */ /* TWO burnt oranges, and the split is a contrast requirement rather than a design flourish. The prototype's #c4530f measures 4.57:1 on white, 4.09:1 on --rp-sand and 3.57:1 on --rp-sand-deep. It therefore FAILS WCAG AA for normal text on the warm backgrounds this design uses constantly, and burnt orange is the colour of every link, eyebrow, and card label on a light section. Measured with the in-page audit harness, not by eye. --rp-burnt is the darkened, text-safe value: 6.36:1 on white, 5.69:1 on sand, 4.97:1 on sand-deep. Comfortably AA everywhere it is used. --rp-burnt-bright keeps the original hue for the accent GRADIENT, which is decorative and carries no text, so the brand's signature amber-to-burnt rule is unchanged. */ /* AA-SAFE TEXT SET. Every light-surface text colour in the design fails WCAG AA against the sand backgrounds it is used on: #c4530f 4.57 white / 4.09 sand / 3.57 sand-deep #f0902b 2.41 / 2.15 / 1.88 #2e8c99 3.94 / 3.52 / 3.08 These are the darkened equivalents, all clearing 4.5 on the darkest light surface. Same hues, same relationships, legible. Defined ONCE here so the site cannot end up with two sets of oranges. --rp-burnt 6.36 / 5.69 / 4.97 --rp-grad-warm 6.15 / 5.50 / 4.81 --rp-grad-teal 6.22 / 5.56 / 4.86 --rp-burnt-bright and the *-bright gradient stops keep the design's exact hues for DECORATION ONLY: rules, bars, borders. Never text. */ --rp-burnt: #a1420c; --rp-grad-warm: #94500c; --rp-grad-teal: #1f6a75; --rp-burnt-bright: #c4530f; /* DECORATION ONLY, fails AA as text */ /* The design uses TEN distinct accent gradients, one per context, not a single house rule. The three that appear on section rules: */ --rp-accent-gradient: linear-gradient(90deg, var(--rp-amber), var(--rp-burnt-bright)); --rp-rule-teal: linear-gradient(90deg, rgb(248, 170, 20), rgb(46, 140, 153)); --rp-rule-warm: linear-gradient(90deg, rgb(240, 144, 43), rgb(196, 83, 15)); /* The big stat numeral is gradient-CLIPPED text, so every stop has to be legible. At 120px weight 800 it is large text, so the AA floor is 3:1 rather than 4.5. The design's first two stops measure 1.75 and 2.15 on sand and fail even that. These are the darkened equivalents, all clearing 3:1, with the same amber-to-teal sweep. */ --rp-stat-gradient: linear-gradient(160deg, #bf7409, #bd6614 30%, #c4530f 58%, #2e8c99); /* ── Teals ─────────────────────────────────────────────────────────────── Secondary accent, used on the technical and product side of the page where amber would read as a call to action. */ --rp-teal: #2a818d; /* white on it 4.54:1. Was #2e8c99 at 3.94:1 */ --rp-teal-mid: #7fa9b2; --rp-teal-light: #9fd8e0; /* ── Warm neutrals ─────────────────────────────────────────────────────── The "warm" half of navy and warm. These are the light section backgrounds; plain #fff between navy sections is what made earlier drafts feel cold. */ /* The lightest surface, from the interior designs' --paper. Sits between white and --rp-sand: used where two light sections meet and need to read as distinct without either going white. */ --rp-paper: #fbfaf8; --rp-sand: #f4f2ed; --rp-sand-mid: #eae7e0; --rp-sand-deep: #e7e3da; /* ── Cool neutrals ─────────────────────────────────────────────────────── Rules, borders, and muted type. */ --rp-slate: #55636e; /* on white 5.9:1, body-safe */ --rp-slate-light: #8c9aa6; /* on navy 5.6:1, label-safe */ --rp-blue-pale: #b9cedd; /* on navy 10:1, body copy on dark */ --rp-blue-paler: #c3d4e2; --rp-blue-mid: #8fa6bc; --rp-heading-muted: #7a868f; /* the muted half of a two-tone heading */ --rp-body-2: #5f6b75; /* second-paragraph grey */ --rp-caption: #dce7ef; --rp-line: #e1e7f0; --rp-line-dark: rgb(255 255 255 / 0.18); --rp-white: #ffffff; /* ── Type ──────────────────────────────────────────────────────────────── */ --rp-font-display: "Archivo", system-ui, -apple-system, sans-serif; --rp-font-body: "Funnel Sans", system-ui, -apple-system, sans-serif; /* Body copy is set at 300, the lightest weight Funnel Sans has (its axis is 300-800). Chosen 2026-08-13 over Instrument Sans 400. Note that Funnel's zero is 55px at 100px against Instrument Sans's 66.6px, and the measure tokens below are in ch, so this face also narrows every prose column. */ --rp-body-weight: 300; /* Every uppercase column heading. Was a mix of 600 and 700. */ --rp-label-weight: 500; /* Every numeral: the big figure, stat values, feature stats, milestone and card numbers. Replaces a previous mix of 700 and 800. Needs the variable font — as a fixed weight this would snap silently to 700. */ --rp-numeral-weight: 650; --rp-font-mono: "IBM Plex Mono", ui-monospace, monospace; --rp-font-data: "Funnel Sans", ui-monospace, system-ui, sans-serif; /* Retained so older rules keep resolving; display is the safer alias. */ --rp-font-sans: var(--rp-font-display); /* Display headings are set at width 112 and weight 400, measured off the approved design. Weight 400 is deliberate and easy to get wrong: a bold heading at the same size reads as a completely different design. The extra width is what gives the type its presence at 400. */ --rp-display-width: 112; --rp-display-weight: 400; /* The eyebrow treatment recurs on nearly every section: IBM Plex Mono, uppercase, ~11.5px, tracked out hard. */ --rp-eyebrow-tracking: 0.22em; /* 2.53px at 11.5px, measured */ --rp-eyebrow-size: 0.8rem; /* 12.8px. Riley proposed 0.844rem (13.5px); split the difference on the 2026-08-13 call. Tracking is set in em so it scaled itself. */ /* Fluid type scale. clamp() means no breakpoint jumps, and the minimums are set so nothing drops below 16px on a phone, which is both a readability floor and what stops iOS zooming a form field on focus. */ /* THE DESIGN'S OWN clamp() EXPRESSIONS, lifted verbatim from direction-3.html rather than re-derived. Using my own scale left every heading a few pixels off at every viewport. */ --rp-text-sm: 0.875rem; --rp-text-base: 17.5px; --rp-text-lead: clamp(17px, 1.5vw, 21px); --rp-text-h3: 23px; --rp-text-h2: clamp(32px, 3.8vw, 54px); --rp-text-h1: clamp(48px, 6.6vw, 96px); /* Interior pages get a smaller hero than the homepage, and the difference is deliberate rather than an oversight. The homepage headline is a short brand statement — one idea, 17ch — so 96px reads as confidence. An interior headline is longer and more specific ("Maintenance fills and cold chain GLP-1s in one operation"), so at 96px it runs to three lines and 285px of stacked type before the reader reaches a single fact. The interior designs spec 78px over 19ch, which lands the same three lines in 239px. The measure is now 23ch (Ben, 2026-08-07); the size is unchanged. */ --rp-text-h1-sub: clamp(40px, 5.6vw, 78px); --rp-text-stat: clamp(34px, 3.4vw, 46px); --rp-text-statement: clamp(22px, 2.2vw, 30px); --rp-track-h1: -0.032em; --rp-track-h2: -0.028em; --rp-track-h3: -0.02em; --rp-lh-display: 1; --rp-lh-body: 1.62; /* ── Layout ────────────────────────────────────────────────────────────── The prototype's content column and its section rhythm. */ --rp-container: 1320px; /* measured off the design */ --rp-container-wide: 1440px; /* The prose measure. In CH, not px — this is a max-width for body copy, and the unit is what makes it a readability rule rather than an arbitrary box. 57ch sits inside the 45–75ch range where line length stops costing the reader; 68ch was at the loose end of it. */ --rp-container-text: 76ch; --rp-gutter: clamp(1.25rem, 3vw, 40px); /* 40px at design width */ --rp-section-y: clamp(3.5rem, 8vw, 7rem); --rp-gap: clamp(1.5rem, 3vw, 2.5rem); /* Four-across rows were 26px and nearly touching. Column and row gaps are separate so the stacked phone layout does not end up spread out. */ --rp-col-gap: 56px; --rp-col-row-gap: 36px; --rp-radius: 14px; --rp-radius-sm: 8px; /* Header height, published as a variable because scroll-margin-top on anchor targets has to match it or in-page links land underneath the sticky header. */ --rp-header-h: 79px; --rp-shadow: 0 1px 2px rgb(18 33 46 / 0.04), 0 8px 24px rgb(18 33 46 / 0.08); --rp-focus: 3px solid var(--rp-amber); }