/* ============================================================ TOKENS — tokens.css The single source of truth for design values across the site. Must be loaded BEFORE style.css / home.css / case-study*.css. Two design languages currently coexist: · "legacy" — Noto Serif headings, pill buttons, floating nav. Still used by bbc-iplayer / and-digital / ebay. · "v2" — JAF Lapture display, 8px outlined buttons, 24px radii. Used by index.html and bbc-sport.html. Legacy token names keep their original values byte-for-byte so the older pages don't shift. New work uses the *-soft / r-* / fs-* names below. ============================================================ */ /* ── The display face ──────────────────────────────────────── JAF Lapture, licensed from I Love Typography for raymosley.uk and self-hosted — the licence is tied to the domain, so it must not be re-served from a CDN or another site. Two weights are licensed, each declared at its true value so the browser never has to fake one from the other. Regular carries the headlines; Bold is here for emphasis and costs nothing until something actually asks for 700, since an unmatched @font-face is never fetched. Only Regular is preloaded, for that reason. */ @font-face { font-family: 'JAF Lapture'; src: url('/fonts/Lapture-Regular.woff2') format('woff2'), url('/fonts/Lapture-Regular.woff') format('woff'); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: 'JAF Lapture'; src: url('/fonts/Lapture-Bold.woff2') format('woff2'), url('/fonts/Lapture-Bold.woff') format('woff'); font-weight: 700; font-style: normal; font-display: swap; } :root { /* ── Colour ─────────────────────────────────────────────── */ --plum: #0E0907; /* page ground */ --plum-deep: #090503; /* recessed / footer */ --plum-soft: #200D09; /* legacy raised surface */ --surface: #1f1a18; /* v2 raised surface (cards) */ --gold: #E84010; /* accent */ --gold-hover: #FF5520; --deep-red: #6B1010; --cyan: #3BC9DB; --cream: #F4EEE6; /* body text */ --cream-dim: #B8B0A6; /* secondary text */ --ink: #15161D; --linkedin: #0A66C2; /* ── Rules / hairlines ──────────────────────────────────── */ --rule: rgba(255, 255, 255, 0.10); /* legacy */ --rule-soft: rgba(255, 255, 255, 0.08); /* v2 */ --rule-dark: rgba(21, 22, 29, 0.14); /* ── Layout ─────────────────────────────────────────────── */ --max: 1180px; --pad: clamp(1.25rem, 3vw, 2rem); --gutter: clamp(1.5rem, 4vw, 4rem); /* The drop from the site bar to the first line of a page header. One value for every page, so /work, /about, a case study and the sign-in panel all start at the same height — they were four different clamps, from 7rem to 11rem, before this existed. Pitched just above the homepage hero's own 6rem: an inner page shouldn't open lower than the front door, but it can breathe a little more than a headline that's carrying a background. */ --head-top: clamp(3rem, 8vw, 7rem); /* Top offset for sticky/anchored content. bbc-sport.html has no fixed header, so this only needs to clear the floating back button and give the eye some air. */ --sticky-top: clamp(4.5rem, 10vh, 7rem); /* ── Radii ──────────────────────────────────────────────── */ --r-sm: 8px; /* buttons, inputs */ --r-md: 16px; --r-lg: 24px; /* cards, media */ --r-pill: 999px; /* legacy pills */ /* Paper names these --radius-*. Aliased both ways so either spelling resolves — a mismatch here silently computes to 0 rather than erroring, which is how the case study shipped with square corners. */ --radius-sm: var(--r-sm); --radius-md: var(--r-md); --radius-lg: var(--r-lg); --radius-pill: var(--r-pill); /* ── Type ───────────────────────────────────────────────── */ --font-display: 'JAF Lapture', Georgia, serif; --font-body: 'Lexend', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --font-legacy-serif: 'Noto Serif', Georgia, serif; /* Display tracking as an em value, not px — the display size clamps from ~4.8rem down to ~2.4rem, and a fixed -3px that reads as elegant at the top end crushes words at the bottom. An em keeps the ratio constant. */ --track-display: -0.015em; /* ── TYPOGRAPHY ROLES ─────────────────────────────────────── Synced with the Paper file "Portfolio". Paper has no composite text-style token (its token types are all single-value primitives, Tailwind-v4 @theme style), so a "text style" here is a FAMILY of four tokens sharing a role name: --text-X / --leading-X / --tracking-X / --font-weight-X. Apply all four together. IMPORTANT — these will never be byte-identical to Paper: the site is fluid (clamp) and the Paper artboards are a fixed 1440px snapshot. Where a role is fluid, the Paper value is noted in the comment. Known deliberate drift: Paper rounds display to 77/80px where 1440px actually resolves to 76.8/82.94px. ─────────────────────────────────────────────────────────── */ /* Sizes — fluid where the site scales. Each clamp is tuned so it lands EXACTLY on the Paper value at 1440px and scales down from there. Check the cap, not just the vw: if the vw term is below the cap at 1440 the type comes out a shade small, which is how the case study first shipped half a pixel under across the board. */ --text-display: clamp(2.4rem, 5.4vw, 4.8125rem); /* Paper 77px */ --text-ch-title: clamp(1.7rem, 3.3vw, 2.875rem); /* Paper 46px */ --text-section-title: clamp(2rem, 4vw, 3rem); /* Paper 48px */ --text-lead: clamp(1.05rem, 1.6vw, 1.375rem); /* Paper 22px */ --text-eyebrow: clamp(1.05rem, 1.6vw, 1.375rem); /* Paper 22px */ --text-dek: clamp(1rem, 1.2vw, 1.0625rem); /* Paper 17px */ --text-label: clamp(1rem, 1.2vw, 1.0625rem); /* Paper 17px */ --text-wordmark: clamp(.85rem, 1.2vw, 1rem); /* Paper 16px */ --text-stat: clamp(1.75rem, 2.4vw, 2.125rem); /* Paper 34px */ /* Sizes — fixed */ --text-problem-num: 1.75rem; /* 28px */ --text-svc-title: 1.25rem; /* 20px */ --text-logos-label: 1.1rem; /* 17.6px */ --text-problem: 1rem; /* 16px */ --text-card-label: .95rem; /* 15.2px */ --text-svc-body: .9rem; /* 14.4px */ --text-btn: .875rem; /* 14px */ --text-svc-label: .85rem; /* 13.6px */ --text-svc-timing: .8rem; /* 12.8px */ --text-footer: .78rem; /* 12.48px */ --text-caps: .75rem; /* 12px */ --text-tag: .75rem; /* 12px */ --text-stat-label: .75rem; /* 12px */ --text-caption: .6875rem; /* 11px */ /* Line heights — unitless where the size is fluid, px where fixed */ --leading-display: 1.04; /* 80px on 77px — Paper */ --leading-ch-title: 1.065; /* 49px on 46px — Paper */ --leading-section-title: 1.1; --leading-lead: 1.5; /* 33px on 22px — Paper */ --leading-eyebrow: 20px; --leading-dek: 1.588; /* 27px on 17px — Paper */ --leading-label: 20px; --leading-wordmark: 20px; --leading-stat: 1.118; /* 38px on 34px — Paper */ --leading-problem-num: 28px; --leading-svc-title: 28px; --leading-logos-label: 24px; --leading-problem: 26.4px; --leading-card-label: 22.8px; --leading-svc-body: 23.76px; --leading-btn: 20px; --leading-svc-label: 20px; --leading-svc-timing: 18px; --leading-footer: 18px; --leading-caps: 20px; --leading-tag: 18px; --leading-stat-label: 18px; --leading-caption: 16px; /* Tracking. Note the small-label roles are deliberately tight and deliberately NOT aliased to --tracking-display, so the display scale can be retuned without dragging labels with it. */ --tracking-none: 0em; --tracking-display: -0.015em; --tracking-ch-title: -0.015em; /* The label roles are Lexend, not the display serif, so they keep their own tracking — the display value is set for Lapture's letterforms and doesn't transfer. */ --tracking-stat: -0.03em; --tracking-eyebrow: -0.055em; --tracking-label: -0.055em; --tracking-section-title: -0.02em; --tracking-card-label: -0.02em; --tracking-svc-title: -0.01em; --tracking-wordmark: 0.056em; --tracking-tag: 0.08em; --tracking-stat-label: 0.1em; --tracking-caption: 0.16em; --tracking-caps: 0.18em; /* Weights */ --font-weight-regular: 400; --font-weight-semibold: 600; --font-weight-bold: 700; /* The display roles were 500 when the serif was a variable Google face. Lapture is licensed as two discrete cuts, so they name the one they mean — 400 lands on Regular exactly, where 500 would leave the browser to resolve it. */ --font-weight-display: 400; --font-weight-ch-title: 400; --font-weight-section-title: 400; --font-weight-stat: 700; /* Lexend, big and chunky */ --font-weight-lead: 400; --font-weight-dek: 400; --font-weight-label: 400; --font-weight-problem-num: 400; --font-weight-problem-body: 400; --font-weight-svc-body: 400; --font-weight-svc-timing: 400; --font-weight-card-label: 400; --font-weight-stat-label: 400; --font-weight-tag: 400; --font-weight-footer: 400; --font-weight-eyebrow: 600; --font-weight-btn: 600; --font-weight-svc-label: 600; --font-weight-logos-label: 600; --font-weight-caption: 600; --font-weight-caps: 600; --font-weight-problem-title: 700; --font-weight-svc-title: 700; --font-weight-wordmark: 700; /* Legacy aliases — existing CSS still references these. Kept so the role rename is non-breaking. */ --fs-display: var(--text-display); --fs-h1: clamp(2.1rem, 4.6vw, 4rem); --fs-h2: var(--text-ch-title); --fs-lead: var(--text-lead); --fs-body: var(--text-dek); --fs-micro: var(--text-caps); /* ── Motion ─────────────────────────────────────────────── */ --dur-fast: .2s; --dur-slow: .45s; --ease: cubic-bezier(.22, .61, .36, 1); }