/* ============================================================================ Learn Design System — tokens v0.2 (frozen 2026-08-13/14) SSOT: product/design-system.md (derivation log + scores). Every value here was frozen through operator 0–3 judgement on rendered variants, or engineered to meet the WCAG AA floor (product/ux-navigation-model.md — the floor BINDS: tokens may not regress it). Changing a token = a new judged decision. Identity: dense pixel-terminal on paper. ========================================================================== */ :root { /* ---- type (D-TYPE: pixel-as-voice; D-PIXEL-DEPTH: to section level) ---- */ --font-display: 'JetBrains Mono', 'Fira Code', monospace; /* H1, section headers, eyebrows, brand — ExtraBold (800). D-TYPE-2 (2026-10-19) replaced Press Start 2P, which is retired. NEVER for body/paragraph text. */ --weight-display: 800; --font-body: 'Inter', system-ui, -apple-system, sans-serif; /* card titles, nav links, UI copy */ --font-mono: 'JetBrains Mono', 'Fira Code', monospace; /* code, data, labels, numbers */ --size-h1: 15px; /* judged with Press Start 2P (optically large); unchanged until D-TYPE-SIZE re-judges the display sizes for JBM */ --size-section: 10px; /* pixel section headers, `// СЕКЦИЯ` style */ --size-eyebrow: 8px; --size-body: 14.5px; --size-card-title: 14px; /* Inter 700 (D-DENSITY compact) */ --size-table: 13px; --size-label: 11px; /* mono, uppercase, letter-spacing ~0.1em */ --leading-body: 1.6; --leading-display: 1.7; /* PSP needs generous leading */ /* ---- color (D-PALETTE: P1 direction, AA-engineered) ---- */ --ground: #FFFFFF; --ink: #1B1B2F; /* 16.88:1 on ground */ --muted: #6B7280; /* 4.83:1 — smallest text color allowed */ --hairline: #E5E7EB; --code-bg: #F7F7F8; --accent: #2563EB; /* THE interactive color: links, buttons, current-nav. 5.17:1 as text; white label on it 5.17:1. The ONLY color that means "you can act". */ --accent-vivid: #3B82F6; /* NON-TEXT ONLY (3.68:1): focus ring, active borders, large display numerals. Never body-size text. */ --success-text: #0A7B54; /* 5.28:1 — "passed" as text */ --success-mark: #0E9F6E; /* 3.39:1 — ✓ marks, progress fill (non-text ≥3:1); always paired with ink text, never color-alone */ --danger-text: #C0333B; /* 5.56:1 — "failed" as text */ /* RETIRED from state-carrying roles: #10B981 (2.54:1) — decorative only. */ /* ---- space & shape (D-DENSITY: D2 compact, one density system-wide) ---- */ --space-gap: 10px; /* grid gaps */ --space-card: 12px; /* card padding */ --pad-cell: 6px 10px; /* table cells */ --radius: 3px; /* small elements: chips, inputs, code blocks */ /* ---- elevated components (D-TREATMENT: C2 pixel-shadow) ---- */ --card-border: 1.5px solid var(--ink); --card-shadow: 4px 4px 0 var(--ink); --card-radius: 0; /* pixel-shadow cards are square; --radius is for small flat elements only (kb synthesis of D2+C2 — verify in first application, refine by judgement) */ /* ---- accessibility (the floor, ux-navigation-model) ---- */ --focus-ring: 2px solid var(--accent-vivid); /* visible focus is MANDATORY (A2) */ } /* ============================================================================ Landing tier (D-LANDING, judged 2026-10-20 on «03 Сравнение с ДС»): the public site nsalab.ru. A SEPARATE LAYER, scoped — the product tokens above are not changed by it. Values are the site's own (learn-website site/index.html, the rendered variant the operator judged), except text colour roles, which keep the AA floor. Nothing here applies to the platform UI. ========================================================================== */ [data-tier="landing"] { /* ---- type: the same three faces, a landing scale ---- */ --landing-size-h1: clamp(56px, 9vw, 120px); /* display 800, lh 1, ls 1px */ --landing-size-h2: clamp(28px, 4vw, 46px); /* display 800, lh 1.2, ls 0.5px */ --landing-size-headline: clamp(34px, 6vw, 72px); /* display 800, lh 1.15 (contact) */ --landing-size-numeral: clamp(34px, 4vw, 50px); /* display 800, lh 1 (stats) */ --landing-size-numeral-sm: 36px; /* display 800 (institution index) */ --landing-size-brand: 22px; /* display 800, ls 2px; 16px in the footer */ --landing-size-eyebrow: 15px; /* display 800, ls 3px, uppercase, `_` cursor */ --landing-size-label: 14px; /* mono 700, ls 1px, uppercase (card label) */ --landing-size-nav: 14px; /* mono 500, ls 0.3px */ --landing-size-mono-sm: 14px; /* mono 400: region, footer line */ --landing-size-subtitle: clamp(20px, 2.6vw, 30px); /* body 600 (hero subtitle) */ --landing-size-callout: clamp(20px, 2.4vw, 28px); /* body 600, lh 1.4 */ --landing-size-lead: clamp(18px, 2vw, 22px); /* body 400, muted, lh 1.6 */ --landing-size-list: clamp(18px, 2vw, 21px); /* body 400, lh 1.5 */ --landing-size-card-title: 22px; /* body 700, lh 1.3 */ --landing-size-body: 18px; /* body 400, lh 1.7 */ --landing-size-card-body: 17px; /* body 400, muted, lh 1.55 */ --landing-size-institution: 18px; /* body 700, lh 1.3 */ --landing-size-small: 15px; /* tags, stat labels, muted */ /* ---- colour: the product palette; text roles keep the AA floor ---- accent (#2563EB) is text/interactive, incl. eyebrows and card labels; accent-vivid (#3B82F6) is allowed as LARGE text only (≥24px, or ≥19px bold: H1/H2 highlights, numerals, the brand dot) and for borders and shadows; success-text for green words, success-mark for green numerals ≥24px bold; #10B981 stays decorative (timeline dot, list marks beside ink text). */ --landing-highlight: var(--accent-vivid); /* large display text only */ --landing-decor-green: #10B981; /* never carries meaning alone */ /* ---- surface: 3px ink borders, deeper pixel shadows ---- */ --landing-border: 3px solid var(--ink); --landing-shadow-card: 8px 8px 0 var(--ink); /* hover: 12px, lift -2/-2 */ --landing-shadow-institution: 6px 6px 0 var(--ink); --landing-shadow-block: 10px 10px 0 var(--ink); /* stats block */ --landing-shadow-callout: 10px 10px 0 var(--accent-vivid); /* ink callout */ --landing-shadow-button: 5px 5px 0 var(--ink); /* press: 3px + translate 2/2 */ --landing-shadow-button-sm: 3px 3px 0 var(--ink); --landing-hairline: 2px solid var(--hairline); /* header, alt sections, footer, tags */ --landing-header-bg: rgba(255, 255, 255, 0.9); /* sticky, backdrop-filter: blur(10px) */ --landing-grid: rgba(27, 27, 47, 0.022); /* 28px pixel grid over the page */ --landing-grid-step: 28px; /* ---- button: the pixel button ---- */ --landing-button-font: var(--font-mono); /* 700, 14px, ls 0.5px, uppercase */ --landing-button-pad: 15px 26px; --landing-button-pad-sm: 10px 18px; /* 12px label */ --landing-button-primary-bg: var(--accent); /* ground label (5.17:1) */ --landing-button-ghost-bg: transparent; /* ink label; hover: code-bg */ /* ---- space ---- */ --landing-container: 1180px; --landing-pad-section: 112px; /* phone (≤900px): 72px */ --landing-pad-hero: 96px 0 92px; --landing-gap: 28px; --landing-pad-card: 32px 30px; --landing-pad-institution: 26px 24px; --landing-pad-callout: 38px 40px; --landing-pad-stat: 32px 28px; --landing-header-h: 72px; --landing-sec-head-mb: 52px; --landing-breakpoint: 900px; /* one column, burger nav below */ /* ---- motion (D-MOTION is unlocked for this tier only) ---- */ --landing-blink: blink 1s step-end infinite; /* the eyebrow `_` cursor */ --landing-reveal: 0.6s cubic-bezier(0.16, 1, 0.3, 1); /* opacity + 24px rise on scroll */ --landing-lift: transform 0.15s, box-shadow 0.15s; /* cards */ --landing-press: transform 0.1s, box-shadow 0.1s; /* buttons */ /* prefers-reduced-motion: reveal is shown at once, no rise. */ } /* Deferred (new judged decisions required): dark theme (D-DARK), motion outside the landing tier (D-MOTION). */