/* ============================================================ Dr. Mark McKelvie — design tokens Values here are MEASURED off the two reference sites, not chosen by eye. Sources are named per block so the next person can re-verify. ============================================================ */ @font-face { font-family: "Cormorant Garamond"; src: url("../assets/fonts/CormorantGaramond-VF.ttf") format("truetype-variations"); font-weight: 300 700; font-style: normal; font-display: swap; } @font-face { font-family: "Jost"; src: url("../assets/fonts/Jost-VF.ttf") format("truetype-variations"); font-weight: 200 700; font-style: normal; font-display: swap; } :root { /* --- Warm neutral SCALE ------------------------------------------------ Floema names its neutrals in scales (brightIvory 25→400, stoneBrown 100→800) rather than three flat greys. The client-approved five colours are kept at their exact values and marked; the rest interpolate between them so the page has real tonal depth instead of two flat fills. */ --ivory-25: #FAF8F4; --ivory-50: #F5F1EA; /* CLIENT-APPROVED — background */ --ivory-100: #EDE7DC; --ivory-200: #E2D8C9; --ivory-300: #D8C9B8; /* CLIENT-APPROVED — secondary background */ --ivory-400: #C0B0A0; --stone-500: #9A8065; /* CLIENT-APPROVED — warm accent (bronze) */ --stone-600: #6B655F; /* CLIENT-APPROVED #746E68, darkened for AA */ --stone-700: #5A544E; --bronze-txt: #82684F; /* the accent, made safe to set type in */ /* TWO ACCESSIBILITY CORRECTIONS TO THE APPROVED PALETTE, 2026-09-06. Both are measured, both are small, and both are Zax's to veto. --stone-600 is the approved secondary text colour and it carried the nav, every dt, every .label and the footer — about thirty-five elements. At #746E68 it measured 4.47:1 on the ivory page and 4.09:1 on the hero scrim, against the 4.5:1 AA needs. Three hundredths short, on a registered doctor's site. #6B655F is 5.11:1 and 4.67:1 and is not a colour anybody will notice has moved. THE VALUE IS NOT NEWLY CHOSEN. The questionnaire at site/brief/ had already darkened this exact token to #6B655F, for this exact reason, with the measurements in its own comment — an earlier session found the same problem on the page the doctor actually types into and fixed it there only. This is the same number, so the two files cannot drift into two slightly different greys. --stone-500 is the approved ACCENT and stays exactly as approved — it is right for the italics in a 48px headline, where large-text AA is 3:1 and it measures 3.30:1. What it is not right for is 7-11px uppercase labels, where it measured 3.30-3.50:1 against a 4.5:1 requirement. Those use --bronze-txt instead: the same hue, dark enough to read at label size. The accent is not redefined, so nothing decorative changes. */ --ink-800: #3A3733; --ink-900: #22201E; /* CLIENT-APPROVED — text */ /* --- The cool counterpoint -------------------------------------------- Required: the approved palette is entirely warm, which is the single thing most likely to make it read flat and generated. Georgie's runs a teal SCALE (#006B70, #0B6A70, #0798A5) rather than one flat teal, so this does the same. Navy is lifted straight out of the approved logo (drmark-lockup-primary.svg), so it is not an invention. */ --teal-700: #14383B; --teal-600: #1C4A4D; --teal-500: #206468; --teal-400: #2E7F80; --navy-900: #0F1E2D; /* FROM THE APPROVED LOGO — ink navy */ --stone-logo: #C8B7A6; /* FROM THE APPROVED LOGO — warm stone */ /* Lightened ON-PHOTO variants, 2026-09-08. The existing teal/stone scales are all tuned for type on the ivory page background and are too dark to read as an accent on the hero's photograph — same failure mode as the AA correction above, one step further: not just under 4.5:1, but under 3:1 large-text AA too on a mid-tone photo. Same hue, lifted toward white so it survives sitting on a face instead of a page. */ --teal-onphoto: #8FC7C6; /* REMOVED --navy-onphoto (#A9B9CE), 2026-09-09. It was a lightened navy invented on the assumption that the hero's fact labels sat on a DARK ground and needed lifting. They do not — that corner of the studio backdrop is pale, so lightening the navy washed it out to almost nothing, which is exactly what Zax kept seeing. The labels now use the approved --navy-900 itself, dark on a light ground, with an ivory glow rather than a dark one behind it. Do not reintroduce a "lightened" navy without checking what is actually behind the text first. */ --bronze-onphoto: #D3B183; /* --- Fluid scale ------------------------------------------------------ Floema's exact clamp form: clamp(min, minPx + 100vw * slope, max). Linear interpolation written in px + vw, not a bare vw value — it keeps a real floor and ceiling instead of collapsing at the extremes. */ --fs-micro: clamp(10px, 9.41px + 100vw * .0015, 12px); --fs-small: clamp(12px, 10.83px + 100vw * .003, 16px); --fs-body: clamp(15px, 13.83px + 100vw * .003, 19px); --fs-lead: clamp(19px, 15.49px + 100vw * .009, 31px); --fs-h3: clamp(24px, 20.49px + 100vw * .009, 36px); --fs-h2: clamp(34px, 25.22px + 100vw * .0225, 64px); --fs-display: clamp(46px, 19.25px + 100vw * .0686, 118px); /* --- Tracking --------------------------------------------------------- Measured, both sites agree on the shape of the rule: Floema display 53px → -2.1344px = -0.0403em (constant -0.04em) Georgie display 217.6px → -17.408px = -0.080em display 112.6px → -5.069px = -0.045em Georgie micro-labels ~13px → +3.4px = +0.26em So: display goes TIGHT and gets tighter as it grows; small uppercase labels go WIDE. That contrast is the editorial engine. Generic AI pages leave both at 0 and that is exactly why they look inert. */ --track-display: -0.055em; --track-h2: -0.04em; --track-h3: -0.03em; --track-body: -0.011em; --track-label: 0.24em; /* --- Leading ---------------------------------------------------------- Georgie's display leading is SUB-1: 178.4/217.6 = 0.82, 170.5/230.4 = 0.74. Floema at mid sizes sits at ~1.06. Generic pages use 1.2+ on headings, which is the tell. */ --lh-display: 0.86; --lh-h2: 0.98; --lh-h3: 1.12; --lh-body: 1.62; --lh-lead: 1.42; /* --- 24-column grid --------------------------------------------------- Floema, read off its live custom properties: --grid-columns: 24 --grid-gap: clamp(14px, 9.71px + 100vw * .011, 28px) --grid-width: calc(100vw - clamp(16px,10.15px + 100vw*.015,36px)*2) 24 columns, not 12 — that is what makes 7/17 and 5/19 splits expressible. A 12-column grid can only really do halves, thirds and quarters, which is why 12-col pages drift toward symmetry. */ --grid-columns: 24; --grid-gap: clamp(14px, 9.71px + 100vw * .011, 28px); --grid-margin: clamp(20px, 10.15px + 100vw * .028, 72px); --grid-width: calc(100% - var(--grid-margin) * 2); /* --- Motion ----------------------------------------------------------- WAS Floema's own curves and durations, lifted verbatim: --ease-expo: cubic-bezier(.19, 1, .22, 1) --ease-circ: cubic-bezier(.075, .82, .165, 1) --dur-fast: .28s --dur-mid: .5s --dur-slow: .75s --dur-xslow: .8s Replaced 2026-09-09 on Zax's call after the scroll review, whose whole brief was "nothing should be rushing/really fast animate". These four lines are the single biggest lever on that: roughly twenty declarations across the page inherit them, so every hover, fade, chip and panel was rushing for the same reason. Both old curves are extreme ease-OUTs. Solved rather than eyeballed — the time each curve spends covering the FIRST HALF of its distance: old --ease-circ 7.0% new --ease-circ 39.8% old --ease-expo 10.5% new --ease-expo 41.5% (the browser's own `ease` is 29.3%, for scale) Seven per cent of .28s is 20ms. That is a cut with a long tail, not a fade, and no duration would have rescued it. The new pair are eased at BOTH ends — the same principle as smooth() in main.js, which replaced easeOut there in the same pass. Durations are up roughly 40%. .28s was short enough that even a perfect curve would not have read as motion. If a single element genuinely wants to decelerate only, write the curve at the call site and say why — do not soften these back. */ --ease-expo: cubic-bezier(.5, .02, .28, 1); --ease-circ: cubic-bezier(.45, .05, .3, 1); --dur-fast: .4s; --dur-mid: .62s; --dur-slow: .9s; --dur-xslow: 1s; /* --- Vertical rhythm --------------------------------------------------- */ --section-y: clamp(80px, 47.9px + 100vw * .0835, 190px); } @media (prefers-reduced-motion: reduce) { :root { --dur-fast: 1ms; --dur-mid: 1ms; --dur-slow: 1ms; --dur-xslow: 1ms; } }