/* ============================================================================ REOCORP — Color tokens (S1a). Доступная палитра: устраняет провалы WCAG color-contrast из docs/BASELINE.md (#3), НЕ трогая декоративный бренд-sage. Контраст посчитан по WCAG 2.x (sRGB -> linearize -> L=0.2126R+0.7152G+0.0722B; CR=(L1+.05)/(L2+.05)). Цели AA: >=4.5:1 обычный текст, >=3:1 крупный/UI. Подключается ПЕРЕД reocorp.css в layouts/{frontend,auth,master}. ============================================================================ */ :root { /* Бренд-sage: ТОЛЬКО декор/крупные элементы (не для мелкого текста) */ --reo-sage: #5ea485; /* белый-на-нём 2.95:1 — декор, НЕ body-текст */ --reo-sage-light: #7fd4af; /* акцент на тёмном UI */ --reo-sage-deep: #4d8a6e; /* sage-2: иконки/градиенты (декор), значение из reocorp.css ×44 */ --reo-sage-on-dark: #6fb595; /* sage-акцент на тёмном UI, значение из reocorp.css ×28 */ /* Доступный sage для ТЕКСТА и ССЫЛОК на светлом фоне */ --reo-sage-text: #2e7359; /* на #fff = 5.66:1 AA обычный текст */ /* Доступный sage для ФОНА кнопок с БЕЛЫМ текстом */ --reo-sage-cta-bg: #357a5f; /* белый-на-нём = 5.12:1 AA */ --reo-sage-cta-hover: #2c6e52; /* белый-на-нём = 6.07:1 AA (hover, темнее) */ /* Нейтральный приглушённый текст на светлом */ --reo-ink-muted: #666666; /* на #fff = 5.74:1 AA (замена #7a7a7a = 4.29 fail) */ /* Доступный amber для ТЕКСТА предупреждений на светлом (verify-badge fair / warning badge) */ --reo-warning-text: #8a5a12; /* на #fff = 6.08:1 AA (замена #b8721d = 3.65 fail) */ /* Тёмные UI-тона (CLAUDE.md) — белый текст проходит с запасом */ --reo-ink: #1f1f1f; /* белый-на-нём 16.48:1 */ --reo-ui-900: #1a1f25; /* белый-на-нём 16.58:1 */ --reo-ui-950: #0f1216; /* белый-на-нём 18.78:1 */ /* Текст на тёмном фоне (тёмные секции/блоки) — добавлено в S2a */ --reo-on-dark: #eaf2ee; /* на #0f1216 = 16.48:1 AA (src: reopc-title) */ --reo-on-dark-muted: #9fb2a9; /* на #0f1216 = 8.42:1 AA (src: reopc-sub) */ /* Семантика на ТЁМНОМ (L100 SL1): danger-on-dark токенизирован (был хардкод #ff8888 ×3 в reocorp.css) */ --reo-danger-on-dark: #ff8888; /* на #1f1f1f ≈ 4.9 AA (negative/red на тёмных картах) */ /* ── S11 design contract (Phase 11): нейтральная лесенка near-black + CTA-иерархия. ADDITIVE — ещё НЕ применено ни к одному элементу (применение в S11a-d). Глубина через ЗНАЧЕНИЕ, не оттенок → блоки разделяются на истинном near-black, где blue-tint и тяжёлые тени не работают. ── */ --reo-surface-0: #1f1f1f; /* dark section pole — Gerik color-swap: was #0e0e0e near-black -> softer #1f1f1f (white-on 16.48 AA). Ladder shifted (Variant A) to keep depth-by-value. */ --reo-surface-1: #2a2a2a; /* elevated card — was #1c1c1c; bumped lighter than #1f1f1f sections so cards still pop (white-on ~14 AA) */ --reo-surface-2: #353535; /* raised / modal — was #262626; above card (white-on ~11.7 AA) */ --reo-hairline: #3a3a3a; /* 1px border — was #2e2e2e; lightened to stay visible on #1f1f1f sections */ --reo-cta-primary: #357a5f; /* primary CTA bg — white-текст = 5.12:1 AA (= --reo-sage-cta-bg) */ --reo-cta-primary-hover: #2c6e52; /* hover — white-текст = 6.07:1 AA */ --reo-cta-on-primary: #ffffff; /* текст на primary */ /* ── S14 LIGHT ладдер (Phase 14): воздух/чтение секции (livestats/how/faq/testimonials). sage-text #2e7359 (стр.16) и cta #357a5f (выше) уже двухфонные — НЕ дублируем. ── */ --reo-surface-light-0: #d3e0f9; /* BLUE section pole (was #fff) — dark↔blue rhythm. title #1a1a1a = 13.09 AA */ --reo-surface-light-1: #ffffff; /* WHITE card on blue (was #f7f9f8) — depth via shadow/hairline (luminance 1.33) */ --reo-surface-light-2: #eef2f0; /* raised — on-light-muted = 4.95:1 AA */ --reo-on-light: #1a1a1a; /* на #fff = 17.9:1 AA (текст на светлом) */ --reo-on-light-muted: #5a6b63; /* на #fff = 5.65:1 AA (приглушённый на БЕЛОЙ карте) */ /* on-blue text — for text directly on the #d3e0f9 pole (old muted/sage-text drop to ~4.25 there). AA on blue AND white. */ --reo-muted-on-blue: #4f5f57; /* muted on #d3e0f9 = 5.09 AA (on #fff = 6.76) */ --reo-sage-on-blue: #245c47; /* sage eyebrow/icon on #d3e0f9 = 5.86 AA (on #fff = 7.79) */ --reo-hairline-light: #e3e8e6; /* 1px граница на светлом (декор) */ /* ── Brand-system 2A (feat/brand-system-design): 3-фоновая МЕХАНИКА — заполняет реальные пробелы матрицы (focus-on-dark / depth-on-dark / danger-name). ADDITIVE: существующие токены НЕ тронуты, значения не сдвинуты. CDP-выверено на #1f1f1f. ── */ --reo-focus-on-dark: #7fd4af; /* focus-ring на тёмной карте: глобальный #357a5f = 3.22 (ПРОВАЛ WCAG 2.4.11) → #7fd4af = 9.37 на #1f1f1f */ --reo-glow-sage: 0 0 0 1px rgba(94,164,133,.45), 0 10px 30px rgba(94,164,133,.12); /* глубина/hover на тёмном — чёрная тень невидима → sage-glow substitute */ --reo-danger: #c53030; /* промоут raw-hex (дублируется ×N в reocorp.css) в имя; значение НЕ менялось — on-#fff = 4.67 AA. Про запас (raw-hex оставлен как есть) */ --reo-disabled-light: #9aa8a1; /* disabled на светлом (на будущее) */ --reo-disabled-dark: #5a6660; /* disabled на тёмном (на будущее) */ } /* ============================================================================ S1b — типографика / отступы / радиусы / тени / motion (ТОЛЬКО токены). Значения ОТРАЖАЮТ текущий дизайн reocorp.css; в комментарии "×N" = частота фактического значения. Визуал не меняется — токены ещё нигде не применяются. Имена не пересекаются с reocorp.css (--reo-g.., --reo-sh-.., --reo-t..). ============================================================================ */ :root { /* ── Типографика ─────────────────────────────── */ --reo-font-sans: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; /* src: 'Inter' ×18 */ --reo-fs-xs: 14px; /* MEGA-UI C1 +2px: 12 -> 14 (readability floor) */ --reo-fs-sm: 16px; /* MEGA-UI C1 +2px: 14 -> 16 */ --reo-fs-md: 16px; /* src: 15px ×94 / 16px ×33 / 17px ×62 */ --reo-fs-lg: 18px; /* src: 18px ×25 / 19px ×27 */ --reo-fs-xl: 22px; /* src: 22px ×22 / 20–21px */ --reo-fs-2xl: 26px; /* src: 24px ×17 / 26px ×8 / 28px ×6 */ --reo-fs-3xl: 32px; /* src: 32px ×6 / 34px ×4 / 36–38px */ --reo-lh-tight: 1.2; /* src: 1.2 ×16 / 1.1 ×11 */ --reo-lh-normal: 1.5; /* src: 1.5 ×14 */ --reo-lh-loose: 1.6; /* src: 1.6 ×10 */ --reo-fw-regular: 400; /* src: 400 ×1 */ --reo-fw-medium: 500; /* src: 500 ×48 */ --reo-fw-semibold: 600; /* src: 600 ×64 */ --reo-fw-bold: 700; /* src: 700 ×276 */ --reo-fw-extra: 800; /* L100: display/большие числа (был off-scale ×38) */ /* ── L100 МОДУЛЬНАЯ ТИПО-ШКАЛА (база 17px, ~1.25). Семантические ступени; применяется на публике через scoped-классы + guest body base. Legacy --reo-fs-xs..3xl сохранены (reo_trust_block). ── */ --reo-fs-display: clamp(36px, 5.2vw, 53px); /* hero h1 */ --reo-fs-h1: clamp(32px, 4.2vw, 42px); /* page title */ --reo-fs-h2: 34px; /* section title */ --reo-fs-h3: 27px; /* card/group head */ --reo-fs-h4: 21px; /* sub-head */ --reo-fs-h5: 18px; /* minor head */ --reo-fs-body-lg: 18px; /* lead */ --reo-fs-body: 17px; /* default body (+2px) */ --reo-fs-body-sm: 15px; /* secondary */ --reo-fs-caption: 16px; /* MEGA-UI C1 +2px: label/meta 14 -> 16 */ --reo-fs-eyebrow: 14px; /* MEGA-UI C1 +2px: overline caps 12 -> 14 */ --reo-lh-heading: 1.15; /* L100: заголовки */ --reo-lh-body: 1.55; /* L100: body */ /* ── Отступы (база 4px) ────────────────────────── */ --reo-space-1: 4px; /* src: 4px ×74 */ --reo-space-2: 8px; /* src: 8px ×134 (off-grid рядом: 6 ×89, 10 ×107) */ --reo-space-3: 12px; /* src: 12px ×136 (off-grid рядом: 14 ×180) */ --reo-space-4: 16px; /* src: 16px ×108 (off-grid рядом: 18 ×126) */ --reo-space-5: 24px; /* src: 24px ×63 (off-grid рядом: 20 ×71, 22 ×135) */ --reo-space-6: 32px; /* src: 32px ×9 (рядом: 28 ×12, 30 ×26) */ --reo-space-7: 48px; /* src: ~50px ×7 (≈48) */ --reo-space-8: 64px; /* src: 60px ×5 / 70–80px (≈64) */ /* ── Радиусы (L100 SL1: card=16 закрывает дыру 12→18 → дрейф 14/16 сходится сюда) ── */ --reo-radius-sm: 8px; /* инпуты/чипы; src: 8px ×23 */ --reo-radius-md: 12px; /* мелкие контролы/кнопки; src: 12px ×43 / 10 ×46 / 11 ×37 */ --reo-radius-card: 16px; /* L100: КАНОН карточек (свернуть 14/18/20/22/25) */ --reo-radius-lg: 18px; /* legacy/крупные; src: 18px ×15 / 14 ×33 */ --reo-radius-pill: 100px; /* src: 100px ×67 */ --reo-radius-circle: 50%; /* src: 50% ×50 (бонус — реальный примитив) */ /* ── Тени (ГЛОБАЛЬНАЯ elevation — грузится на ВСЕХ лейаутах, incl. гостевые где reocorp.css нет. Зеркалит --reo-sh-1/2/3 из reocorp.css; L100 SL1 +xl для модалок/оверлеев) ── */ --reo-shadow-sm: 0 2px 8px rgba(31,31,31,0.05), 0 1px 3px rgba(31,31,31,0.03); /* resting card; = --reo-sh-1 */ --reo-shadow-md: 0 8px 24px rgba(31,31,31,0.08), 0 2px 6px rgba(31,31,31,0.04); /* hover/raised; = --reo-sh-2 */ --reo-shadow-lg: 0 16px 40px rgba(31,31,31,0.12), 0 4px 12px rgba(31,31,31,0.06); /* popover/calc; = --reo-sh-3 */ --reo-shadow-xl: 0 24px 60px rgba(0,0,0,0.30), 0 8px 24px rgba(0,0,0,0.18); /* modal/overlay (L100 SL1) */ /* ── Fixed-header height (frontend `.header.fixed-header`; measured live via Playwright). Used as the sticky offset for sub-bars (catalog sort toolbar) so they tuck UNDER the header instead of hiding behind it. Desktop nav row ≈92px, collapsed mobile bar ≈64px → +small gap. */ --reo-header-h: 96px; /* ≥992 (full nav row) */ --reo-header-h-mobile: 68px; /* ≤991 (collapsed bar) */ /* ── Контейнер / gutters (L100 SL1: единый примитив — было 10 разных max-width 1280..820) ── */ --reo-container: 1140px; /* канон ширины контента */ --reo-container-narrow: 760px; /* узкий (текст/legal/measure ≤70ch) */ --reo-gutter: 24px; /* боковые отступы секций */ /* ── Motion ────────────────────────────────────── */ --reo-dur-fast: 0.15s; /* src: 0.15s ×40 */ --reo-dur-base: 0.2s; /* src: 0.2s ×49 (рядом: 0.18s ×34) */ --reo-dur-slow: 0.3s; /* src: 0.3s ×13 / 0.25s ×10 */ --reo-ease-standard: cubic-bezier(0.4, 0, 0.2, 1); /* src: ×27 */ --reo-ease-out: ease-out; /* src: ease-out ×9 */ /* ── Z-INDEX SCALE (unified layering — single source, loaded on ALL layouts). Higher rung = closer to the user. Rungs are spaced so a new element slots BETWEEN two without renumbering neighbours. Map of what lives on each rung: 1–99 in-flow / in-card card scrims, gradient overlays, badges, in-flow tooltips 20 sticky sub-bar catalog sort toolbar — BELOW the header so it tucks under it 200 cabinet topbar .reo-tb (sticky; own stacking context, no header there) 800–900 floating chrome cookie-reset (800), mobile bottom-nav (850), FAB / speed-dial (900) 1000 dropdown / popover notif panel, menus 1030 site header (fixed) .header.fixed-header on scroll — above the sort toolbar 1200 sticky CTA bar .reo-acta--sticky (bottom docked) 9000–9989 dimmer / backdrop product tour, keyboard-hint overlay 9990 banner / consent callback FAB (.reo-cb), cookie banner 9995–9997 blocking modal cookie-settings (9995), invest-confirm dialog (9996) 9998 command palette .reo-cmdk-overlay 9999 toast / notify toasts, confetti — always above modals 100000 skip-link (a11y) keyboard skip — must top everything Only the two rungs that actually collided were retargeted (header 11→1030, invest-confirm 1000→9996); every other element already sat on its correct rung. Use these vars for any NEW fixed / sticky / overlay element. */ --reo-z-sticky-bar: 20; --reo-z-topbar: 200; --reo-z-dropdown: 1000; --reo-z-header: 1030; --reo-z-sticky-cta: 1200; --reo-z-overlay: 9990; --reo-z-modal: 9996; /* blocking dialog: above FAB/cookie/backdrops, below cmdk/toast */ --reo-z-cmdk: 9998; --reo-z-toast: 9999; --reo-z-skip: 100000; } /* prefers-reduced-motion — глобальное гашение. reocorp.css имеет свой блок, но НЕ грузится на публичных страницах (layouts/frontend) → этот закрывает их. Паттерн 0.01ms (a11y-project): доводит до конечного состояния мгновенно, не оставляя элементы «застрявшими». Дефолтный визуал не затрагивает. */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } /* Global keyboard focus ring — reo-tokens.css грузится на ВСЕХ лейаутах, поэтому закрывает и публичные страницы (frontend), где reocorp.css НЕ грузится. outline (без сдвига раскладки); цвет --reo-sage-cta-bg (#357a5f) даёт >=3:1 на белом (WCAG 2.4.11). */ a:focus-visible, button:focus-visible, [role="button"]:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, [tabindex]:not([tabindex="-1"]):focus-visible { outline: 2px solid var(--reo-sage-cta-bg, #357a5f); outline-offset: 2px; border-radius: 4px; } /* ============================================================================ L100 · Unified section eyebrow — .reo-sec-head (site-wide, single source) Loaded on frontend + master + auth. Replaces the 28 ad-hoc per-section eyebrow classes with ONE pill chip (icon + caps label), sage accent, AA in three contexts. The context modifier picks the colour for the pole it sits on: --dark on #1f1f1f/#0f1216 dark sections (sage-light #7fd4af) --blue on #d3e0f9 blue pole (sage-on-blue #245c47, 5.86 AA) --white on #fff cards (sage-text #2e7359, 5.66 AA) NB migration deletes each old inline eyebrow rule so this wins with 0 !important. ============================================================================ */ .reo-sec-head { display: inline-flex; align-items: center; gap: 7px; margin-bottom: 16px; padding: 5px 12px; font-family: var(--reo-font-sans, 'Inter', system-ui, sans-serif); font-size: var(--reo-fs-eyebrow, 12px); font-weight: 800; line-height: 1; letter-spacing: 1.6px; text-transform: uppercase; border: 1px solid transparent; border-radius: var(--reo-radius-pill, 100px); white-space: nowrap; vertical-align: middle; } .reo-sec-head i, .reo-sec-head svg { font-size: 14px; line-height: 1; } .reo-sec-head--dark { background: rgba(94,164,133,.12); border-color: rgba(94,164,133,.40); color: var(--reo-sage-light, #7fd4af); } .reo-sec-head--blue { background: rgba(46,115,89,.10); border-color: rgba(46,115,89,.34); color: var(--reo-sage-on-blue, #245c47); } .reo-sec-head--white { background: rgba(46,115,89,.07); border-color: rgba(46,115,89,.24); color: var(--reo-sage-text, #2e7359); } /* muted overline (stat labels that must not shout) — no pill fill */ .reo-sec-head--muted { padding: 0; border: 0; background: none; letter-spacing: 1.4px; color: var(--reo-muted-on-blue, #4f5f57); } /* Unified section CTA pill — ONE primary focus per section (sage #357a5f + white + arrow) */ .reo-sec-cta { display: inline-flex; align-items: center; gap: 8px; padding: 12px 22px; font-family: var(--reo-font-sans, 'Inter', system-ui, sans-serif); font-size: 15px; font-weight: 800; letter-spacing: .4px; color: var(--reo-cta-on-primary, #fff); background: var(--reo-cta-primary, #357a5f); border: 0; border-radius: var(--reo-radius-pill, 100px); text-decoration: none; cursor: pointer; transition: background var(--reo-dur-base, .2s) var(--reo-ease-standard, ease), transform var(--reo-dur-base, .2s); } .reo-sec-cta:hover { background: var(--reo-cta-primary-hover, #2c6e52); color: #fff; transform: translateY(-1px); } .reo-sec-cta i { font-size: 15px; } @media (prefers-reduced-motion: reduce) { .reo-sec-cta { transition: none; } .reo-sec-cta:hover { transform: none; } } /* ============================================================================ L100 · Unified trust-cell — .reo-tcell (site-wide, single source) ONE credential cell (icon-chip + value + label) shared by the investment credentials bar (reo_trust, light) and the case/dashboard trust band (reo_trust_block, dark). Replaces the divergent .reo-trust-* / .reo-trust__* cell CSS with one component; the animated stat counters stay separate. ============================================================================ */ .reo-tcell-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 16px 18px; } .reo-tcell { display: flex; align-items: center; justify-content: center; gap: 13px; min-width: 0; text-decoration: none; } .reo-tcell__ic { width: 44px; height: 44px; flex-shrink: 0; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 17px; } .reo-tcell__txt { min-width: 0; display: flex; flex-direction: column; gap: 4px; line-height: 1.2; } .reo-tcell__txt b, .reo-tcell__txt strong { font-size: 15px; font-weight: 800; line-height: 1.15; letter-spacing: -.1px; } .reo-tcell__txt small, .reo-tcell__txt span { font-size: 14px; line-height: 1.2; } /* light context (on #fff / #d3e0f9) */ .reo-tcell--light .reo-tcell__ic { background: #e8f1ec; color: var(--reo-sage-text, #2e7359); } .reo-tcell--light .reo-tcell__txt b, .reo-tcell--light .reo-tcell__txt strong { color: #1f1f1f; } .reo-tcell--light .reo-tcell__txt small, .reo-tcell--light .reo-tcell__txt span { color: var(--reo-muted-on-blue, #4f5f57); } /* dark context (on #0f1216 / #1f1f1f) */ .reo-tcell--dark .reo-tcell__ic { background: rgba(94,164,133,.14); color: var(--reo-sage-light, #7fd4af); } .reo-tcell--dark .reo-tcell__txt b, .reo-tcell--dark .reo-tcell__txt strong { color: var(--reo-on-dark, #eaf2ee); } .reo-tcell--dark .reo-tcell__txt small, .reo-tcell--dark .reo-tcell__txt span { color: var(--reo-on-dark-muted, #9fb2a9); } a.reo-tcell:hover .reo-tcell__ic { filter: brightness(1.08); } @media (max-width: 480px) { .reo-tcell__ic { width: 40px; height: 40px; font-size: 15px; } } /* Brand-system 2A — тёмные поверхности: светлое кольцо фокуса (a11y, WCAG 2.4.11). Глобальное правило выше даёт #357a5f = 3.22 на #1f1f1f (провал). Этот скоуп поднимает до 9.37. .reo-surface-0 = системный маркер тёмной поверхности (forward-looking, класса пока нет — задел); .reo-acta = компонент auth-CTA (тёмная карта). Цвет кольца по фону, язык фокуса единый. */ .reo-surface-0 :focus-visible, .reo-acta :focus-visible { outline-color: var(--reo-focus-on-dark, #7fd4af); } /* L100: explicit tabular-nums utility (replaces fragile substring sweep; apply to money/figures that aren't matched by the [class*=amount/balance/-value/figure/price] rule, e.g. portfolio donut). */ .reo-num { font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; } /* MEGA-UI D (CC mobile-first): comfortable-touch floor (44px) for the small secondary tap targets the phone audit flagged — deposit quick-amount chips, small buttons, and icon-only share/invite buttons. reo-tokens.css loads on ALL layouts, so this covers guest + cabinet. Phones only (<=480px); desktop sizing and the sacred calculator chips are untouched. */ @media (max-width: 480px) { .reo-quick-amt, .reo-btn-sm { min-height: 44px; } .reo-ref-share-btn, .reo-invite__btn { min-width: 44px; min-height: 44px; } } /* ============================================================================ S12 viz primitives (Phase 12 reuse layer) — CSS-var-driven, on Phase-11 surface/sage tokens. Single-source atoms: progress bar, ring/gauge, stat card. Static (no JS) — fill via inline --reo-bar-pct / --reo-ring-pct. Ring value sits in CENTER (visible on touch/keyboard, NOT hover-only). Counter-up + scroll-reveal utils already live in partials/reo_interactions.blade.php (data-count / .reo-reveal). ============================================================================ */ .reo-bar { position: relative; height: 8px; background: var(--reo-surface-2, #262626); border: 1px solid var(--reo-hairline, #2e2e2e); border-radius: var(--reo-radius-pill, 100px); overflow: hidden; } .reo-bar__fill { display: block; height: 100%; width: var(--reo-bar-pct, 0%); max-width: 100%; background: var(--reo-cta-primary, #357a5f); border-radius: inherit; transition: width var(--reo-dur-slow, 0.3s) var(--reo-ease-out, ease-out); } .reo-bar--anchor .reo-bar__fill { background: var(--reo-sage-light, #7fd4af); } .reo-ring { position: relative; width: var(--reo-ring-size, 96px); height: var(--reo-ring-size, 96px); border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; text-align: center; background: conic-gradient(var(--reo-sage-light, #7fd4af) calc(var(--reo-ring-pct, 0) * 1%), var(--reo-surface-2, #262626) 0); transition: background var(--reo-dur-slow, 0.3s) var(--reo-ease-out, ease-out); } .reo-ring::before { content: ""; position: absolute; inset: var(--reo-ring-thick, 10px); border-radius: 50%; background: var(--reo-surface-1, #1c1c1c); } .reo-ring__inner { position: relative; z-index: 1; } .reo-ring__value { font-weight: 800; font-size: 22px; line-height: 1; color: var(--reo-sage-light, #7fd4af); font-variant-numeric: tabular-nums; } .reo-ring__label { display: block; margin-top: 3px; font-size: 11px; font-weight: 700; letter-spacing: .4px; text-transform: uppercase; color: var(--reo-on-dark-muted, #9fb2a9); } .reo-stat { background: var(--reo-surface-1, #1c1c1c); border: 1px solid var(--reo-hairline, #2e2e2e); border-radius: var(--reo-radius-lg, 18px); padding: var(--reo-space-5, 24px); } .reo-stat__value { font-weight: 800; font-size: clamp(22px, 3vw, 30px); line-height: 1; color: var(--reo-on-dark, #eaf2ee); font-variant-numeric: tabular-nums; } .reo-stat__value--anchor { color: var(--reo-sage-light, #7fd4af); } .reo-stat__label { margin-top: 8px; font-size: 15px; font-weight: 600; letter-spacing: .4px; text-transform: uppercase; color: var(--reo-on-dark-muted, #9fb2a9); } /* ============================================================================ TODO consolidate (фиксация рассинхронов; НЕ рефакторить сейчас): - font-size: 62 значения; near-dups 15/16/17px (×94/33/62) → один "md"; ~10 "Npx !important" дублей; одиночный clamp(20px,5vw,32px). - font-weight: 800 ×38 используется, но вне шкалы (extrabold); 900 ×2 one-off. - line-height: 1.55 ×23 (между normal 1.5 и loose 1.6); 1.45/1.65 one-off. - spacing: много off-grid — 14×180, 22×135, 18×126, 10×107, 6×89 не на сетке 4/8/12/16/24 → крупнейший рассинхрон. - radius: near-dups 10/11/12px (×46/37/43) и 14/16/18px → к md/lg. - shadow: --reo-sh-1 и --reo-sh-2 определены ДВАЖДЫ по-разному (root#0 vs root#9) — рассинхрон внутри reocorp.css. - :root переопределён 12× в reocorp.css (дубли цвет-токенов по компонентам). - duration/easing: 0.18s ×34 между fast/base; 'ease' ×32 vs cubic-bezier(0.4,0,0.2,1) ×27 vs ease-in-out ×18; cubic-bezier пишется со/без пробелов = две разные строки. ============================================================================ */