/* ===================================================================== CALS — Design Tokens Source of truth: brandbook_cals_gost.docx + стиль (1) (3).pdf Направление: строгий корпоративный (дорогой, сдержанный, типографический). ===================================================================== */ :root { /* ── Палитра (из brandbook) ─────────────────────────────────────── */ --c-primary: #173B8C; /* основной тёмно-синий (brandbook) */ --c-primary-700: #123A6E; /* темнее — hover */ --c-primary-deep: #0B1F33; /* самый тёмный — hero-фон / футер */ --c-accent: #4D9FD8; /* акцент-синий (ссылки, актив) */ --c-accent-700: #2E83BE; --c-gold: #D99A1E; /* маркер / CTA-акцент (дозированно) */ --c-success: #3F7F5F; /* статус «ок» */ --c-danger: #B73535; /* ошибки / альерты */ --c-bg: #FFFFFF; --c-bg-soft: #EEF2F5; /* секции */ --c-bg-tint: #D8ECF8; /* светло-синий фон/плашки */ --c-bg-tint-2: #EAF2FA; --c-ink: #0B1F33; /* основной текст */ --c-ink-2: #2F343A; --c-muted: #6F7F91; /* подписи / вторичный текст */ --c-line: #DCE3EA; /* тонкие разделители */ --c-line-soft: #ECEFF3; --c-on-dark: #E2E8F0; /* текст на тёмном */ --c-on-dark-muted: #93A4B8; /* фон hero с лёгкой глубиной (без градиента-глянца — тон) */ --hero-overlay: rgba(11, 31, 51, 0.30); /* ── Типографика ────────────────────────────────────────────────── */ --font-sans: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif; --font-mono: "IBM Plex Mono", "SF Mono", ui-monospace, Menlo, Consolas, monospace; --fs-display: clamp(2.6rem, 5vw, 4rem); /* hero */ --fs-h1: clamp(2rem, 3.2vw, 2.75rem); --fs-h2: clamp(1.6rem, 2.4vw, 2.1rem); --fs-h3: 1.25rem; --fs-h4: 1.0625rem; --fs-body: 1rem; /* 16 */ --fs-sm: 0.9375rem; /* 15 */ --fs-xs: 0.8125rem; /* 13 */ --fs-mono: 0.8125rem; --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; --lh-tight: 1.12; --lh-snug: 1.3; --lh-body: 1.6; --ls-tight: -0.02em; --ls-wide: 0.08em; /* eyebrow / overline */ /* ── Пространство ───────────────────────────────────────────────── */ --s-1: 0.25rem; --s-2: 0.5rem; --s-3: 0.75rem; --s-4: 1rem; --s-5: 1.5rem; --s-6: 2rem; --s-7: 3rem; --s-8: 4rem; --s-9: 6rem; --s-10: 8rem; /* ── Layout ─────────────────────────────────────────────────────── */ --container: 1240px; --container-narrow: 880px; --header-h: 72px; /* строгие радиусы — корпоративный, почти прямой угол */ --r-xs: 2px; --r-sm: 4px; --r-md: 6px; --r-pill: 999px; /* тени — сдержанные, «бумажные» */ --sh-1: 0 1px 2px rgba(11, 31, 51, 0.06), 0 1px 1px rgba(11, 31, 51, 0.04); --sh-2: 0 6px 18px -8px rgba(11, 31, 51, 0.18), 0 2px 6px -2px rgba(11, 31, 51, 0.08); --sh-3: 0 24px 50px -24px rgba(11, 31, 51, 0.28); /* ── Движение ───────────────────────────────────────────────────── */ --ease: cubic-bezier(0.32, 0.72, 0, 1); --t-fast: 0.18s var(--ease); --t: 0.32s var(--ease); /* ── z-index ────────────────────────────────────────────────────── */ --z-header: 100; --z-hero: 1; --z-overlay: 900; } /* ── Версия для слабовидящих (только подсайт ОЦ) ──────────────────── Включается классом .a11y на (см. assets/js/a11y.js). */ html.a11y { --c-bg: #FFFFFF; --c-ink: #000000; --c-bg-soft: #FFFFFF; --c-line: #000000; --fs-body: 1.25rem; /* +25% база */ --fs-display: clamp(2.8rem, 6vw, 5rem); --sh-1: none; --sh-2: none; --sh-3: none; } html.a11y.high-contrast { --c-primary: #000000; --c-primary-deep: #000000; --c-on-dark: #FFFF00; --c-accent: #0000EE; }