/* ============================================================ KidmaTech — Design Tokens Концепт «Синяя технологичность» (палитра нового логотипа, 08.2026). Единый источник правды для цвета, типографики, отступов, скруглений, теней, анимации. Подключать ПЕРВЫМ, до остальных стилей. Все компоненты ссылаются только на эти переменные — менять тему = менять значения здесь, а не в коде страниц. ============================================================ */ :root { /* Тёмной темы у сайта нет — палитра одна, светлая. Говорим это браузеру явно, иначе при системной тёмной теме он вправе сам перекрасить нативные элементы (поля формы, выпадающий список языка, чекбокс, полосу прокрутки) и текст в них может стать нечитаемым. */ color-scheme: light; /* ---------------------------------------------------------- ЦВЕТ Бренд = синий (королевский/кобальт логотипа). CTA = лазурный (только кнопки). Контраст выверен под WCAG 2.1 AA (см. DESIGN-SYSTEM.md §контраст). ---------------------------------------------------------- */ /* Фон и поверхности */ --color-bg: #F6F8FC; /* холодный светлый — основной фон */ --color-surface: #FFFFFF; /* карточки, поля формы */ --color-surface-alt: #F3F6FB; /* лёгкая холодная подложка секций */ /* Текст */ --color-ink: #0B1230; /* основной текст (тёмно-синий, высокий контраст) */ --color-ink-muted: #3F495A; /* подзаголовки, подписи (контраст ~6.4:1) */ /* 3.1:1 на белом — для текста это ниже нормы WCAG AA (нужно 4.5:1). Годится только для плейсхолдеров и декоративных элементов, для подписей брать ink-muted. Сейчас в стилях не используется — держим как резерв. */ --color-ink-faint: #8A93A5; --color-on-brand: #FFFFFF; /* текст на синем фоне */ --color-on-cta: #FFFFFF; /* текст на лазурном (только bold ≥1.0625rem) */ --color-on-dark: #EAF0FA; /* текст в тёмном футере */ /* Бренд (синий) */ --color-brand: #143A82; /* лого-акценты, иконки, крупные выделения */ --color-brand-strong: #0C2C63; /* синий текст body-размера на свету (AA ≥4.5) */ --color-brand-hover: #1D4A9E; /* ховер ссылок/иконок */ --color-brand-soft: #E8EFFB; /* подложки иконок, мягкие плашки */ /* CTA (лазурный) — ТОЛЬКО кнопки действия */ --color-cta: #2E6FD4; --color-cta-hover: #2560C0; --color-cta-active: #1E52A8; --color-cta-strong: #2560C0; /* если лазурный нужен мелким текстом (редко) */ /* Линии и границы */ --color-border: #E6EAF1; /* hairline, разделители, рамки полей */ --color-border-strong: #D3DAE8; /* Тёмный футер */ --color-dark-bg: #0E1424; --color-dark-surface: #171E30; /* Состояния формы */ --color-focus: var(--color-brand); /* кольцо фокуса */ --color-success: #2E7D5B; --color-error: #B23A2E; /* ---------------------------------------------------------- ТИПОГРАФИКА База 18px (1.125rem) — крупнее обычного, ради доступности. Шрифты переключаются через :lang() (см. ниже). Шкала ≈ мажорная терция (1.25). ---------------------------------------------------------- */ /* Семейства (self-host woff2, font-display:swap) */ /* Manrope вместо Inter/Geist: те примелькались до неразличимости — на них сходятся почти все сгенерированные интерфейсы. Manrope закрывает и латиницу, и кириллицу, поэтому RU и EN держит один шрифт. */ --font-en: "Manrope", system-ui, sans-serif; --font-ru: "Manrope", "Noto Sans", system-ui, sans-serif; --font-he: "Heebo", "Noto Sans Hebrew", system-ui, sans-serif; --font-ar: "Noto Sans Arabic", system-ui, sans-serif; --font-base: var(--font-ru); /* мастер-язык — русский */ /* Display-шрифт заголовков (тёплый премиум-serif с характером). Только RU/EN — для иврита/арабского переопределяется ниже на их sans (Playfair их письменности не покрывает). */ --font-display: "Playfair Display", Georgia, "Times New Roman", serif; /* Размеры */ --text-xs: 0.8125rem; /* 13px — служебное, не для body */ --text-sm: 0.9375rem; /* 15px — подписи */ --text-base: 1.125rem; /* 18px — основной текст */ --text-lg: 1.375rem; /* 22px — лид-абзац, крупные строки */ --text-xl: 1.75rem; /* 28px — H3 */ --text-2xl: 2.25rem; /* 36px — H2 */ --text-3xl: 3rem; /* 48px — крупные заголовки секций */ --text-4xl: 3.75rem; /* 60px — H1 hero (desktop) */ /* Высота строки */ --leading-tight: 1.15; /* заголовки */ --leading-snug: 1.35; /* подзаголовки */ --leading-normal: 1.6; /* основной текст */ /* Насыщенность */ --weight-regular: 400; --weight-medium: 500; --weight-semibold: 600; --weight-bold: 700; /* Межбуквенное */ --tracking-tight: -0.02em; /* крупные заголовки */ --tracking-normal: 0; --tracking-wide: 0.04em; /* надписи капсом (направления в hero) */ /* ---------------------------------------------------------- ОТСТУПЫ (шкала на базе 4px) ---------------------------------------------------------- */ --space-1: 0.25rem; /* 4 */ --space-2: 0.5rem; /* 8 */ --space-3: 0.75rem; /* 12 */ --space-4: 1rem; /* 16 */ --space-5: 1.5rem; /* 24 */ --space-6: 2rem; /* 32 */ --space-7: 3rem; /* 48 */ --space-8: 4rem; /* 64 */ --space-9: 6rem; /* 96 */ --space-10: 8rem; /* 128 — вертикальные интервалы между секциями */ /* ---------------------------------------------------------- РАСКЛАДКА ---------------------------------------------------------- */ --container-max: 1200px; --container-pad: var(--space-5); /* боковые поля контейнера (моб.) */ --content-measure: 65ch; /* макс. ширина абзаца для читабельности */ /* ---------------------------------------------------------- СКРУГЛЕНИЯ ---------------------------------------------------------- */ --radius-sm: 8px; --radius-md: 12px; /* кнопки, поля формы */ --radius-lg: 16px; /* карточки */ --radius-xl: 24px; /* крупные блоки */ --radius-pill: 999px; /* пилюли, чипы, круглые кнопки */ /* ---------------------------------------------------------- ТЕНИ (холодный синий оттенок, мягкие) ---------------------------------------------------------- */ --shadow-sm: 0 1px 2px rgba(11, 18, 48, 0.06); --shadow-md: 0 6px 20px rgba(11, 18, 48, 0.08); --shadow-lg: 0 16px 40px rgba(11, 18, 48, 0.12); /* подъём карточки на наведении: заметно, но без широкого размытия — хайрлайн + диффузная тень вместе читаются как ИИ-вёрстка */ --shadow-hover: 0 8px 20px rgba(11, 18, 48, 0.10); --shadow-focus: 0 0 0 3px rgba(20, 58, 130, 0.45); /* кольцо фокуса */ /* ---------------------------------------------------------- АНИМАЦИЯ ---------------------------------------------------------- */ --duration-fast: 150ms; --duration-base: 250ms; --duration-slow: 400ms; --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); /* ---------------------------------------------------------- Z-INDEX ---------------------------------------------------------- */ --z-base: 0; --z-sticky: 100; /* шапка */ --z-dropdown: 200; /* переключатель языка, меню */ --z-widget: 800; /* чат-виджет */ --z-overlay: 900; /* баннер куки, модалки */ --z-toast: 1000; } /* Переключение шрифта по языку контента. Применять lang="" на или на блоках перевода. */ :lang(en) { --font-base: var(--font-en); } :lang(ru) { --font-base: var(--font-ru); } :lang(he) { --font-base: var(--font-he); } :lang(ar) { --font-base: var(--font-ar); } /* Иврит/арабский: display-заголовки на их же sans (Playfair их не покрывает). */ :lang(he) { --font-display: var(--font-he); } :lang(ar) { --font-display: var(--font-ar); } /* Адаптив: на узких экранах ужать hero-заголовок и интервалы секций. */ @media (max-width: 768px) { :root { --text-4xl: 2.5rem; /* 40px — hero на мобильном */ --text-3xl: 2rem; /* 32px */ --text-2xl: 1.75rem; /* 28px */ --space-10: 4rem; /* меньше воздуха между секциями */ --space-9: 3rem; } } /* Доступность: уважать prefers-reduced-motion (требование спеки). */ @media (prefers-reduced-motion: reduce) { :root { --duration-fast: 0ms; --duration-base: 0ms; --duration-slow: 0ms; } }