/* ============================================================================ BERIDZE DESIGN TOKENS, v1 Single source of truth for colour, type, spacing and motion. THIS FILE IS COPIED, NEVER FORKED. Four build targets read it: 1. the site (this deploy) 2. the club demo (/club, this deploy) 3. the quiz (/quiz, this deploy) 4. the cockpit (local only, copy at cockpit/assets/tokens.css) Plus a fifth: pasted as custom CSS on the hosted link tree. If you need a new value, ADD IT HERE and use the variable. Never hard code a colour or a font size in a component. Four builds that look like four products is the failure this file exists to prevent. Voice it encodes: premium in the glass, joyful at the table. The Beridzes take the wine seriously and themselves not at all. ============================================================================ */ :root { /* -------------------------------------------------------------------- 1. COLOUR Saperavi is the grape that paints: red flesh, red juice, dyes everything it touches. The palette is that stain on bone paper, with the burnt orange of the 1954 bus as the joy. Contrast ratios below are measured against --paper unless stated. WCAG 2.2 AA needs 4.5:1 for body text, 3:1 for large text and UI. -------------------------------------------------------------------- */ /* Surfaces */ --paper: #F7F1E7; /* warm bone, the default page */ --paper-raised: #FFFBF4; /* cards, panels, anything lifted */ --paper-sunk: #EFE6D8; /* wells, inactive tracks, table stripes */ --qvevri: #14090C; /* the buried dark. Full bleed film sections */ --qvevri-soft: #1F1216; /* raised surface on a dark section */ /* Ink */ --ink: #1C1013; /* body text on paper. 16.5:1 */ --ink-soft: #4A3A3C; /* secondary text on paper. 8.0:1 */ --ink-faint: #7A6A6B; /* captions, meta. 4.5:1 AA min */ --ink-hairline: #D9CDBC; /* borders and rules. NOT for text */ --ink-inverse: #F7F1E7; /* text on --qvevri. 16.5:1 */ /* Saperavi, the primary */ --saperavi: #7A0D24; /* primary text and fills. 9.8:1 */ --saperavi-deep: #4E0716; /* pressed states, deep fills */ --saperavi-glow: #C21E3E; /* the heart in the film. On --qvevri 3.1:1 LARGE TEXT AND GRAPHICS ONLY. Never body */ --saperavi-wash: #F0E0E1; /* tinted backgrounds on paper */ /* The bus, the joy accent */ --bus: #D4622A; /* on --qvevri 4.9:1 AA. On paper 3.35:1, LARGE TEXT AND GRAPHICS ONLY, never body */ --bus-ink: #A8431A; /* the paper-safe bus orange. 5.4:1 AA */ /* Filled controls. These deliberately do NOT flip on .on-dark, because a saperavi pill with cream text carries its own contrast on any surface and the button should read as the same object everywhere. */ --brand-fill: #7A0D24; --brand-fill-hover: #4E0716; --brand-on-fill: #FFFBF4; /* 10.0:1 on --brand-fill */ /* Supporting, decorative only unless a ratio is stated */ --amber: #C98A2B; /* Marani Amber, Rkatsiteli skin contact */ --soil: #8C4A2F; /* 500 million year old Cambrian red dirt */ --vine: #3F6B4A; /* Sandra's mural green. Use sparingly */ --rose: #E39BA4; /* Sandra's Rose */ /* Semantic */ --ok: #2E6B45; --warn: #A8431A; --danger: #8B1220; /* Per wine, for the box builder and the fulfilment views */ --wine-levan: #4E0716; --wine-amber: #C98A2B; --wine-shiraz: #6B1526; --wine-viognier: #D9B45B; --wine-rose: #E39BA4; /* -------------------------------------------------------------------- 2. TYPE THE REQUIREMENT CHANGED ON 5 AUGUST 2026, MID BUILD. Read this before "fixing" the numbers below back to something bigger. Grant is presenting on a 3440 wide ultrawide monitor with two windows side by side, so the real viewport is about 1720, read at arm's length. He is NOT presenting on a television, and neither room is: Hickinbotham on 5 August and Carlei on 6 August are both on the screen. The old scale below was built for a 55 inch set at three metres and was deliberately about 2x laptop normal. On a monitor that is exactly twice too big, and the space scale was worse than the type: 240px between sections meant everything became scrolling. The scale has been retuned for a screen. Body is now 17 to 19px rather than 17 to 40. Step ratios are preserved, so the design keeps its proportions and only absolute size moved. TO GO BACK TO A TELEVISION: this file is the only place to change, and git history has the exact television values. Do not reintroduce both by adding a mode switch unless a room actually needs one. The original television derivation, kept because the arithmetic is sound and will be needed again the day somebody presents on a set: Sizing is fluid between a 375px phone and a 1920px viewport, because the same pages are read on attendee handsets AND thrown on a television. The curve was derived, not guessed. Working: Mirrored MacBook to Apple TV renders at the LAPTOP viewport (about 1512 CSS px), scaled to fill the screen. On a 55 inch set that is 1217mm of picture width, so 1 CSS px is 0.805mm. Human factors: a capital subtends 16 arcminutes to be readable, 20 to 22 to be comfortable. At 3m, 20 arcminutes is 17.5mm. 17.5mm / 0.805 = 21.7px cap height, and cap height is about 0.7 of font size, so body must be about 31px MINIMUM at a 1512 viewport, target 34px. --text-body resolves to 33.9px at 1512. Comfortable, not minimum. Direct HDMI at 1920 on the same set: 1 CSS px is 0.634mm. --text-body resolves to 40px, cap 28px, 17.7mm, 20.3 arcminutes. Comfortable on both paths. That is the whole reason for the clamp. Vera confirms this physically on an actual television in Track C. The arithmetic gets you to the QA gate, it does not replace it. Roughly 2x laptop-normal, which matches the brief's estimate. -------------------------------------------------------------------- */ /* Families. Deliberately system fonts: zero network requests, so nothing on stage can be broken by a phone hotspot. To swap in a self hosted display face later, change ONE line here and nothing else moves. */ --font-display: ui-serif, "New York", "Iowan Old Style", Georgia, "Times New Roman", serif; --font-body: ui-serif, "New York", "Iowan Old Style", Georgia, "Times New Roman", serif; --font-ui: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif; --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace; /* RETUNED 5 Aug 2026 FOR A SCREEN, NOT A TELEVISION. See the note above. Each step is min at 375px, max at 1920px, linear between. The MINIMA are unchanged, because they were always correct for a phone and the link tree and the quiz are still read on handsets. Only the maxima moved. */ --text-2xs: clamp(0.7969rem, 0.0485vw + 0.7855rem, 0.84375rem); /* 12.75 to 13.5 */ --text-xs: clamp(0.9375rem, 0.0324vw + 0.9299rem, 0.96875rem); /* 15 to 15.5 */ --text-sm: clamp(1.0625rem, 0.1294vw + 1.0322rem, 1.1875rem); /* 17 to 19 */ --text-body:clamp(1.0625rem, 0.1294vw + 1.0322rem, 1.1875rem); /* 17 to 19 BODY */ --text-md: clamp(1.25rem, 0.1942vw + 1.2045rem, 1.4375rem); /* 20 to 23 */ --text-lg: clamp(1.5rem, 0.3236vw + 1.4242rem, 1.8125rem); /* 24 to 29 */ --text-xl: clamp(1.8125rem, 0.4531vw + 1.7063rem, 2.25rem); /* 29 to 36 */ --text-2xl: clamp(2.1875rem, 0.6473vw + 2.0358rem, 2.8125rem); /* 35 to 45 */ --text-3xl: clamp(2.625rem, 0.9709vw + 2.3975rem, 3.5625rem); /* 42 to 57 */ /* ------------------------------------------------------------------ MEASURED, not assumed. Open /_qa/type/ and read the table. At a 1512px viewport on a 55 inch set at 3 metres: --text-2xs 22.5px 12.7mm cap 14.5' FAILS --text-xs 27.5px 15.5mm cap 17.8' readable, not comfortable --text-sm 33.9px 19.1mm cap 21.9' comfortable --text-body 33.9px 19.1mm cap 21.9' comfortable --text-md 42.1px 23.7mm cap 27.2' comfortable ...and every step above is comfortable. THE FLOOR RULE, now history rather than law: While the television was the target, --text-sm was the hard floor on any surface thrown on the set, and --text-xs and --text-2xs were for phone surfaces only. That rule is why the cockpit, the fulfilment dashboard and the quiz reveal are all sparse. On a monitor at arm's length the floor no longer binds, and the small steps are ordinary small text again. Keep the sparseness anyway. It was the right design before it was a constraint, and a projected screen still wants less on it than a page does. ------------------------------------------------------------------ */ --leading-tight: 1.06; /* display, 2xl and up */ --leading-snug: 1.18; /* headings */ --leading-body: 1.55; /* prose */ --leading-loose: 1.7; /* long form story sections */ --tracking-tight: -0.022em; /* large display serif */ --tracking-snug: -0.01em; --tracking-normal: 0; --tracking-wide: 0.08em; /* small caps eyebrows */ --tracking-wider: 0.16em; --weight-regular: 400; --weight-medium: 500; --weight-bold: 700; /* NOTE, 5 Aug: these are in ch, so they shrank with the type at the screen retune. Widening them was tried and reverted: the hero's narrowness comes from an h1 max-width in the page's own CSS, not from here, so widening these changed prose columns site wide for no benefit. If the sparse look on an ultrawide is worth fixing, fix it per page, not here. */ --measure: 62ch; /* max prose line length */ --measure-tight: 44ch; /* pull quotes, hero subheads */ /* -------------------------------------------------------------------- 3. SPACE Fluid on the same 375 to 1920 curve, so gutters grow with the type. -------------------------------------------------------------------- */ /* RETUNED 5 Aug 2026 with the type. Minima unchanged, maxima roughly halved. This is where most of the scrolling came from: at 1720 the old --space-3xl was 240px of air between sections, which is right on a television read from three metres and absurd on a monitor at arm's length. */ --space-3xs: clamp(0.25rem, 0.1294vw + 0.2197rem, 0.375rem); /* 4 to 6 */ --space-2xs: clamp(0.5rem, 0.2589vw + 0.4393rem, 0.75rem); /* 8 to 12 */ --space-xs: clamp(0.75rem, 0.3883vw + 0.659rem, 1.125rem); /* 12 to 18 */ --space-sm: clamp(1rem, 0.5178vw + 0.8786rem, 1.5rem); /* 16 to 24 */ --space-md: clamp(1.5rem, 0.6473vw + 1.3483rem, 2.125rem); /* 24 to 34 */ --space-lg: clamp(2rem, 1.0356vw + 1.7573rem, 3rem); /* 32 to 48 */ --space-xl: clamp(3rem, 1.5534vw + 2.6359rem, 4.5rem); /* 48 to 72 */ --space-2xl: clamp(4rem, 2.3301vw + 3.4539rem, 6.25rem); /* 64 to100 */ --space-3xl: clamp(5rem, 3.3657vw + 4.2112rem, 8.25rem); /* 80 to132 */ --gutter: var(--space-md); --page-max: 88rem; --page-narrow: 52rem; /* Touch targets. Beat 8 is six thumbs in bad light. */ --tap-min: 3rem; /* 48px absolute floor, WCAG 2.2 target size */ --tap: 3.5rem; /* -------------------------------------------------------------------- 4. FORM -------------------------------------------------------------------- */ --radius-xs: 0.25rem; --radius-sm: 0.5rem; --radius-md: 0.875rem; --radius-lg: 1.5rem; --radius-full: 999rem; --border-hair: 1px solid var(--ink-hairline); --border-strong: 2px solid var(--ink); --shadow-sm: 0 1px 2px rgba(28,16,19,0.06), 0 2px 6px rgba(28,16,19,0.05); --shadow-md: 0 2px 6px rgba(28,16,19,0.07), 0 10px 24px rgba(28,16,19,0.08); --shadow-lg: 0 4px 12px rgba(28,16,19,0.08), 0 24px 56px rgba(28,16,19,0.13); --shadow-lift: 0 8px 20px rgba(78,7,22,0.18), 0 32px 64px rgba(78,7,22,0.16); --focus-ring: 3px solid var(--bus-ink); --focus-offset: 3px; /* -------------------------------------------------------------------- 5. MOTION Joyful means things arrive with weight, not that things bounce. -------------------------------------------------------------------- */ --dur-fast: 160ms; --dur-base: 320ms; --dur-slow: 640ms; --dur-film: 1200ms; --ease-out: cubic-bezier(0.16, 1, 0.30, 1); --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); --ease-pour: cubic-bezier(0.34, 0.01, 0.20, 1); /* liquid, film only */ --z-base: 0; --z-sticky: 100; --z-overlay: 500; --z-modal: 900; --z-toast: 1000; } /* Dark sections invert the ink tokens so components can be dropped into a qvevri section without rewriting a single rule. */ .on-dark, [data-surface="dark"] { --paper: var(--qvevri); /* These three were measured by the quality gate and all three failed. A dark surface on a television in a dimmed room is unforgiving: a card fill at 1.08:1 against the page is not a card, it is text floating on black, and a bar track at 1.03:1 is not a shape at all. --paper-raised was #1F1216 1.08:1 vs page, now 1.16:1 --paper-sunk was #0D0507 1.03:1 vs page, now 1.07:1 --ink-hairline was #3A2A2E 1.24:1 vs a card, now 3.01:1 The fill lift is deliberately modest and the BORDER does the real work, because six heavy plum rectangles would look worse than the problem. The cards are clickable, so their boundary is a UI component under WCAG 1.4.11 and genuinely owes 3:1. The new hairline clears it against a raised card (3.01), against the page (3.50) and against a sunk track (3.26). Light text on the new fill is unaffected: 14.99, 8.89, 5.18. */ --paper-raised: #2A181D; --paper-sunk: #201116; --ink: #F7F1E7; --ink-soft: #C9B9B4; --ink-faint: #9C8B87; --ink-hairline: #835E66; /* TRAP, READ THIS BEFORE YOU USE IT. At :root --ink-inverse means "light text, for use on --qvevri". Here it means the inverse of the CURRENT ink, so it goes DARK, for a light chip sitting inside a dark page. Both are internally consistent and the name invites exactly the wrong reading. Two separate builders reached for it on a dark page expecting light text. One caught it; the other shipped a reveal screen whose question and every bar label rendered at 1.05:1, near-black on near-black, invisible. That was beat 8, the close of the meeting. ON A DARK SURFACE YOU ALMOST ALWAYS WANT --ink. Use --ink-inverse only for text sitting on a LIGHT element inside a dark page. */ --ink-inverse: #1C1013; --saperavi: #E8A0AC; /* readable saperavi on dark, 8.2:1 */ --bus-ink: var(--bus); /* the paper-safe orange is unreadable here */ --focus-ring: 3px solid var(--bus); } @media (prefers-reduced-motion: reduce) { :root { --dur-fast: 1ms; --dur-base: 1ms; --dur-slow: 1ms; --dur-film: 1ms; } }