/* ============================================================================ SailorOS V2 — дизайн-система, слой основы (токены). Источник правды: SAILOROS_V2_SPECIFICATION/05_DESIGN_SYSTEM/01_FOUNDATIONS.md Значения перенесены дословно; правка идёт СНАЧАЛА в спеку, потом сюда. Слой изолирован: токены объявлены на [data-sailoros="v2"], а не на :root, — пока публичный портал живёт в тёмной теме «Deep Ocean», два языка обязаны сосуществовать без взаимного протекания. Страница V2 выставляет атрибут на , всё остальное продолжает работать по-старому. ВАЖНО (инцидент 10.07): внутри CSS-комментария не должно быть «звёздочка + слэш» — глоб вида btn-* со слэшем закрывает комментарий досрочно и съедает следующее правило целиком. ============================================================================ */ [data-sailoros="v2"] { /* --- 2.1 Основная палитра. Сапфирово-синий, один акцент на весь продукт --- */ --brand-900: #0A1F44; /* логотип, шапка тёмного варианта, заголовки первого экрана */ --brand-800: #0E2A5C; /* наведение на тёмных поверхностях */ --brand-700: #123A7A; /* второстепенные акценты */ --brand-600: #1A56B0; /* ОСНОВНОЙ акцент: кнопки, ссылки, активные состояния */ --brand-500: #2E6FD4; /* наведение на основной кнопке */ --brand-300: #8FB6EF; /* границы активных элементов, фокус */ --brand-100: #DCE8FB; /* подложка выделенных блоков */ --brand-50: #F0F5FE; /* подложка секций, полосы таблиц */ /* --- 2.2 Нейтральные --- */ --ink-900: #0F172A; /* основной текст, заголовки */ --ink-700: #334155; /* обычный текст */ --ink-500: #64748B; /* подписи полей, второстепенное */ --ink-400: #94A3B8; /* плейсхолдеры, отключённое — НИКОГДА не содержательный текст */ --line-300: #E2E8F0; /* границы, разделители */ --line-200: #EEF2F7; /* тонкие разделители внутри карточек */ --bg-100: #F6F8FB; /* фон страницы */ --bg-000: #FFFFFF; /* фон карточек и поверхностей */ /* --- 2.3 Семантические. Красный только для ошибок и удаления; «срочно» — оранжевый, потому что срочность это не ошибка --- */ --success-600: #0F7B4F; --success-50: #E7F5EE; --warning-600: #B25E00; --warning-50: #FDF3E7; --danger-600: #B3261E; --danger-50: #FCECEB; --info-600: #1A56B0; /* --- 3.1 Типографика. Inter, второго шрифта в продукте нет --- */ --font-body: "Inter", -apple-system, "Segoe UI", Roboto, sans-serif; /* --- 3.2 Шкала: размер / интерлиньяж / начертание --- */ --text-display: 40px; --leading-display: 48px; --weight-display: 700; --text-h1: 32px; --leading-h1: 40px; --weight-h1: 700; --text-h2: 24px; --leading-h2: 32px; --weight-h2: 600; --text-h3: 20px; --leading-h3: 28px; --weight-h3: 600; --text-body-lg: 17px; --leading-body-lg: 26px; --weight-body-lg: 400; --text-body: 15px; --leading-body: 22px; --weight-body: 400; --text-body-strong: 15px; --leading-body-strong: 22px; --weight-body-strong: 600; --text-caption: 13px; --leading-caption: 18px; --weight-caption: 400; --text-overline: 12px; --leading-overline: 16px; --weight-overline: 600; --tracking-overline: 0.04em; /* --- 4.1 Шаг сетки — база 4. Прочих значений не существует --- */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px; --space-12: 48px; --space-16: 64px; --space-20: 80px; /* --- 4.2 Контрольные ширины --- */ --content-max: 1280px; /* содержимое страницы */ --text-max: 720px; /* статья, юр-документ, ответ на форуме */ --filters-col: 280px; /* колонка фильтров каталога на десктопе */ --actions-col: 360px; /* правая колонка страницы вакансии */ --gutter-mobile: 16px; --gutter-tablet: 24px; --gutter-laptop: 32px; --gutter-desktop:40px; /* --- 5. Формы поверхностей --- */ --radius-sm: 6px; /* бейджи, метки */ --radius-md: 10px; /* кнопки, поля ввода */ --radius-lg: 14px; /* карточки */ --radius-xl: 20px; /* модальные окна, панели */ --radius-full: 999px; /* чипы фильтров, аватары */ /* Карточка в покое — БЕЗ тени, с границей line-300. Тень только при наведении */ --shadow-sm: 0 1px 2px rgba(15, 23, 42, .06); --shadow-md: 0 4px 12px rgba(15, 23, 42, .08); --shadow-lg: 0 12px 32px rgba(15, 23, 42, .12); /* --- 7. Движение. Ничего не длится дольше 300 мс --- */ --motion-hover: 120ms; --motion-panel: 200ms; --motion-modal: 240ms; --motion-toast: 180ms; --ease-out: ease-out; --ease-panel: cubic-bezier(.2, .8, .2, 1); /* --- 8. Фокус. Убирать нельзя: на судовом компьютере работают с клавиатуры --- */ --focus-ring: 2px solid var(--brand-300); --focus-offset: 2px; /* --- 9. Плотность и области нажатия --- */ --tap-min-mobile: 44px; --tap-min-desktop: 36px; --control-lg: 44px; /* крупная кнопка, поле ввода на мобильном */ --control-md: 40px; /* обычная кнопка, поле ввода на десктопе */ --control-sm: 32px; /* компактная кнопка */ --row-min: 48px; /* строка таблицы */ /* --- 10. Изображения --- */ --logo-sm: 40px; --logo-md: 56px; --logo-lg: 80px; --avatar-sm: 56px; --avatar-lg: 96px; } /* --- 2.4 Соответствие как отдельная шкала. Ниже 55% НЕ окрашивается в красный: это не брак кандидата, а неполное совпадение. Классы навешивает сервер, пороги живут в 01_FOUNDATIONS §2.4 --- */ [data-sailoros="v2"] .match--high { color: var(--success-600); background: var(--success-50); } [data-sailoros="v2"] .match--mid { color: var(--brand-600); background: var(--brand-50); } [data-sailoros="v2"] .match--low { color: var(--ink-500); background: var(--bg-100); } [data-sailoros="v2"] .match--no-cv { color: var(--ink-400); background: var(--bg-100); } /* --- 7. Системное уменьшение движения отключает переходы полностью --- */ @media (prefers-reduced-motion: reduce) { [data-sailoros="v2"] *, [data-sailoros="v2"] *::before, [data-sailoros="v2"] *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; } } /* --- 3.2 Мобильная шкала: меняются только три верхних размера --- */ @media (max-width: 640px) { [data-sailoros="v2"] { --text-display: 30px; --leading-display: 38px; --text-h1: 26px; --leading-h1: 34px; --text-h2: 20px; --leading-h2: 28px; } }