/* ========================================================================== DESIGN TOKENS -------------------------------------------------------------------------- Every colour, type size and spacing value on the site comes from here. Section stylesheets never introduce a raw number that belongs to the system — if a value is missing, it gets added here first, with a reason. Mobile-first: the defaults below are the mobile values (the 390 px Figma frame). Desktop values override them at the bottom of this file, so a role keeps ONE name on every screen and only its value changes. Units: font sizes, line heights and spacing are in rem (1rem = 16px at the browser default), so the whole layout honours a visitor's own font-size preference. The Figma pixel value is noted next to each one. ========================================================================== */ :root { /* ------------------------------------------------------------------------ COLOUR Five warm near-neutrals and one accent. The neutrals are pulled slightly warm on purpose: pure greys read as dirt next to the cream ground. Ratios are WCAG 2.x contrast against --color-bg. ------------------------------------------------------------------------ */ --color-bg: #f2f0ea; /* page ground */ --color-ink: #0e0d0a; /* 17.05:1 — text AND every dark band (Hero, divider). There is one dark on the site; pure #000 reads as a hole on screen and smears on OLED phones while scrolling. (Was #16150f until 26 Sep 2026: darkened a step for a deeper band, warmth kept.) */ --color-ink-soft: #6b6860; /* 4.88:1 — secondary text that is READ */ --color-ink-faint: #a9a599; /* 2.16:1 — markers that are only RECOGNISED. Fails AA for text on purpose; never use it for anything a visitor has to read. */ --color-bg-soft: #979590; /* 6.49:1 on ink — secondary text on the dark (Hero): the ground at 60 % */ --color-hairline: #d8d4c8; /* 1.30:1 — rules and dividers, never text */ --color-accent: #8a742e; /* 3.99:1 — large text and the focus ring; sampled from Alina's own iris */ /* ------------------------------------------------------------------------ TYPEFACES ------------------------------------------------------------------------ */ --font-display: 'Cormorant Garamond', 'Times New Roman', serif; --font-text: 'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif; /* ------------------------------------------------------------------------ TEXT ROLES — mirror the Figma text styles one-to-one. A role is named for what the text DOES, not for how big it is. ------------------------------------------------------------------------ */ /* Display — Cormorant Garamond Light, set in capitals, on every screen. Weight is a token so a role never needs a second class to change it. (Desktop was drawn Bold for a while; switched to Light on 24 Sept: the layout doesn't change between screens, so the hierarchy shouldn't either — and bigger type wants a lighter weight, not a heavier one. See chapter 02 of the design manual.) */ --display-weight: 300; --display-xl-size: 2.75rem; /* M/Display XL — 44 */ --display-xl-leading: 3rem; /* 48 */ --display-xl-tracking: -0.01em; --display-size: 2.125rem; /* M/Display — 34 */ --display-leading: 2.375rem; /* 38 */ --display-tracking: -0.01em; --display-s-size: 1.5rem; /* M/Display S — 24 */ --display-s-leading: 1.875rem; /* 30 */ --display-s-tracking: 0; /* Text — Manrope */ --evidence-size: 1rem; /* M/Evidence — 16 / 24, 700 */ --evidence-leading: 1.5rem; --body-size: 1rem; /* M/Body — 16 / 26, 400 */ --body-leading: 1.625rem; --caption-size: 0.875rem; /* M/Caption — 14 / 20, 400 */ --caption-leading: 1.25rem; --label-size: 0.6875rem; /* M/Label — 11 / 16, 700, +16 % */ --label-leading: 1rem; --label-tracking: 0.16em; /* Figma 16 % = 0.16em */ /* Paragraph spacing — added ON TOP of the leading between two paragraphs of the same running text. It belongs to the text, not to the rhythm: two paragraphs are one element, like the three lines of one heading (chapter 03), so it is NOT optically corrected. Corrected the way the rhythm is, 16 − 7 − 8 would leave 1, and paragraphs would sit as close as the lines inside them. Visible result: ~31 between paragraphs against ~14.5 between lines — the break reads as a break. */ --paragraph-spacing: 1rem; /* 16 — Figma: gap inside the text frame */ /* ------------------------------------------------------------------------ OPTICAL AIR — the empty space every line box carries around its letters. The rhythm (16 / 32 / 56 / 120) is measured between what the eye sees: from the baseline of one text to the cap height of the next, from the baseline to a ring's edge, and so on — not between the boxes. A box gap therefore = visible target − air of the box above − air of the box below (chapter 08 of the design manual). air-top — line-box top → cap height air-bottom — baseline → line-box bottom Measured from the font files themselves (OS/2 typo metrics, which both faces flag USE_TYPO_METRICS for, and the height of the Cyrillic Н), rounded to whole pixels. Cormorant 300 and 700 share the same metrics, so the desktop weight switch does not change these values; the desktop SIZES will, and get their own values in the desktop block. ------------------------------------------------------------------------ */ --display-xl-air-top: 0.6875rem; /* 11 (10.51) */ --display-xl-air-bottom: 0.625rem;/* 10 ( 9.99) */ --display-air-top: 0.5625rem; /* 9 ( 8.58) */ --display-air-bottom: 0.5rem; /* 8 ( 8.17) */ --display-s-air-top: 0.5rem; /* 8 ( 7.64) */ --display-s-air-bottom: 0.4375rem;/* 7 ( 7.36) */ --evidence-air-top: 0.4375rem; /* 7 ( 6.61) */ --evidence-air-bottom: 0.375rem; /* 6 ( 5.87) */ --body-air-top: 0.5rem; /* 8 ( 7.61) */ --body-air-bottom: 0.4375rem; /* 7 ( 6.87) */ --caption-air-top: 0.3125rem; /* 5 ( 5.28) */ --caption-air-bottom: 0.3125rem; /* 5 ( 4.64) */ --label-air-top: 0.25rem; /* 4 ( 4.29) */ --label-air-bottom: 0.25rem; /* 4 ( 3.79) */ /* ------------------------------------------------------------------------ SPACING — the four working steps of the vertical rhythm. Each number has ONE job; a gap is chosen by asking "which of the four", never "how much looks right". ------------------------------------------------------------------------ */ --space-pair: 1rem; /* 16 — inside a pair: caption ↔ image, paragraph ↔ paragraph */ --space-group: 2rem; /* 32 — inside a group: text ↔ media */ --space-between: 3.5rem; /* 56 — between groups */ --space-section: 7.5rem; /* 120 — between sections, cases, footer */ --list-gap: 0.625rem; /* 10 — a column head → its list of 44-tall rows (footer, menu) */ /* SOURCE OF TRUTH (since 25 Sep 2026): every vertical gap in the code is the number in the Figma auto-layout panel, box to box — Figma text boxes and CSS line boxes are the same height, so equal numbers give an equal picture. The optical-air tokens above are kept for reference (they explain what the eye sees) but no gap is computed from them. */ /* ------------------------------------------------------------------------ LAYOUT ------------------------------------------------------------------------ */ --page-margin: 1.25rem; /* 20 — left and right field on mobile */ --gutter: 1rem; /* 16 — gap between grid columns; horizontal only, vertical gaps come from the rhythm */ --tap: 2.75rem; /* 44 — minimum touch target, both axes */ } /* -------------------------------------------------------------------------- DESKTOP Values are filled in section by section, from the desktop Figma frame, as each block gets its desktop pass. Until a role is overridden here it deliberately keeps its mobile value. -------------------------------------------------------------------------- */ @media (min-width: 64em) { :root { /* Field: 79 px at 1920 (the Figma desktop frame), in proportion below that — 42 at 1024. Every desktop measure that follows the canvas is a share of the content width (--content = 1762 at 1920). */ --page-margin: 4.115vw; --content: calc(100vw - 2 * var(--page-margin)); /* Type: the same roles, larger sizes (agreed scale, 26 Sep 2026). The two display sizes follow the screen between 1024 and 1920 so a headline never outgrows its column on a small laptop. */ --display-xl-size: clamp(4.5rem, 5vw, 6rem); /* 72 → 96 */ --display-xl-leading: 1.04; /* 96 / 100 */ --display-size: clamp(3rem, 3.334vw, 4rem); /* 48 → 64 */ --display-leading: 1.0625; /* 64 / 68 */ /* Text roles grow on desktop (27 Sep 2026, Vadim: «текст надо больше»): next to a 96- and 240-px Cormorant, 16 / 11 read as footnotes. */ --evidence-size: 1.25rem; /* 20 */ --evidence-leading: 1.875rem; /* 30 */ --body-size: 1.125rem; /* 18 */ --body-leading: 1.875rem; /* 30 */ --label-size: 0.8125rem; /* 13 (Figma desktop) */ --label-leading: 1.25rem; /* 20 */ /* Label tracking stays +16 %. */ /* Hero — a role that exists only here: 240 at 1920, 12.5vw below. */ --hero-size: 12.5vw; --hero-leading: 0.875; /* 240 / 210 */ /* Spacing: the same scale, continued upward (16 / 32 / 56 / 120 / 160 / 200). One number keeps one meaning; what grows is the gap between sections, which is a role, not a number. */ --space-section: 10rem; /* 160 */ --dock-gap: 3.5rem; /* Hero → bar, 56 */ } } @media (min-width: 90em) { :root { --space-section: 12.5rem; /* 200 from 1440 */ } }