/* ============================================================ Цвета «Биржи Труда». Две палитры и две темы, четыре сочетания: :root — «Свод», светлая (по умолчанию) [data-theme="dark"] — «Свод», тёмная [data-palette="legacy"] — прежняя, светлая [data-palette="legacy"][data-theme="dark"] — прежняя, тёмная Порядок блоков важен: у [data-palette="legacy"] и [data-theme="dark"] равная специфичность (0,1,0), поэтому побеждает тот, что ниже. Legacy обязан идти после тёмной темы, а пара селекторов — последней. ГЛАВНОЕ ПРАВИЛО, оно не менялось: primary ≠ cta. Оранжевый — атмосфера, акценты, hero; НИКОГДА не кнопка действия. Зелёный — ТОЛЬКО кнопка целевого действия. Синий — доверие: ссылки, фокус, легалка, статусы. Янтарный — деньги: суммы дохода. ЧТО ИЗМЕНИЛОСЬ В «СВОДЕ» И ПОЧЕМУ (все числа — контраст по WCAG 2.1): 1. Кнопка: белая подпись на зелёном #00843B — 4,81:1. Прежний #00C853 с белой подписью давал 2,24:1 при норме 4,5, то есть текст на самом важном элементе сайта был формально нечитаем. Сначала мы пробовали обратный ход — оставить яркий #00C853 и написать по нему тёмным (6,49:1); заказчик посмотрел на живой кнопке и попросил вернуть белый. Белый на зелёном возможен только на зелёном потемнее: чтобы белый набрал 4,5:1, светлота заливки обязана опуститься, вариантов тут нет. Что за это заплачено: кнопка перестала быть САМЫМ СВЕТЛЫМ пятном страницы. Против цвета текста рядом было 5,58:1, стало 2,59:1 — то есть она теперь выделяется не яркостью, а цветом, площадью и положением. Взамен вырос край кнопки относительно белого фона: 2,24 → 4,81, и на солнце её границу видно лучше, чем раньше. 2. Оранжевый как ТЕКСТ И КАК ИКОНКА затемнён до #B94A00 (5,19:1 на белом, 4,80:1 на своей же подложке). Прежний #E85D00 в активной вкладке 13px давал 3,50:1, а #FF6A00 в иконках шапки и в акцентном слове логотипа — 2,87:1 при норме 3,0 для графики. Как ЗАЛИВКА оранжевый остался прежним #FF6A00: там контраст меряется по подписи, а не по самому цвету. 3. Сумма дохода углублена до #B36800 (4,29:1 против прежних 3,46:1) — запас на выцветание дешёвой матрицы под солнцем. 4. Цвет текста — тёмно-синий #0B3658 вместо #14243D. Тот же уровень читаемости, но регистр «контора, а не объявление на столбе»; для аудитории, которая боится обмана, это работает на доверие. 5. Заливка синей кнопки вынесена в отдельный токен --trust-fill. В светлой теме она совпадает с --color-trust, а в тёмной обязана расходиться: ссылке нужен светлый тон на тёмном фоне, заливке под белой подписью — тёмный. Один токен на две задачи в тёмной теме давал 2,54:1. 6. Появились токены подписей на заливках: --cta-text, --trust-text, --primary-text, --badge-hot-text. Раньше во всех этих местах стоял жёстко зашитый #FFFFFF — 14 раз в четырёх css-файлах, и подменой палитры это не лечилось. ОТКАТ. Достаточно выставить SITE_PALETTE=legacy в .env и перезапустить api: на появится data-palette="legacy" и вернётся ровно прежний вид — вместе с его провалами контраста. Это аварийный выход, а не режим работы. Для разовой проверки в браузере есть ?palette=legacy (запоминается в cookie), вернуться — ?palette=svod. ============================================================ */ :root { /* --- База --- */ --color-primary: #FF6A00; /* заливки, иконки, атмосфера, hero */ --color-primary-600: #B94A00; /* оранжевый КАК ТЕКСТ: активный таб, выбранный чип, иконки-подсказки. Затемнён так, чтобы проходить не только на белом (5.19:1), но и на своих же подложках --color-primary-50 (4.80:1) и --color-amber-50 (4.86:1) — на них он и стоит чаще всего. */ --color-primary-100: #FFE3CC; --color-primary-50: #FFF4EB; /* оранжевая подложка (selected-чип, hero) */ --color-cta: #00843B; /* ТОЛЬКО кнопки целевого действия */ --color-cta-600: #006E31; /* нажатие cta */ --color-cta-700: #007033; /* текст на зелёной подложке (бейдж) */ --color-cta-50: #E9FAF0; /* зелёная подложка (бейджи успеха) */ --color-trust: #1A54B8; /* доверие: ссылки, фокус, легалка, статусы */ --color-trust-600: #14418F; --color-trust-50: #EBF1FB; --color-amber: #FFB300; /* заливки: бейджи «горячее» (текст тёмный!) */ --color-amber-50: #FFF7E0; --color-amber-text: #B36800; /* числа дохода НА СВЕТЛОМ ФОНЕ (4.29:1) */ --amber-ink: #9E5C00; /* мелкий текст НА янтарной подложке (4.93:1). Отдельно от --color-amber-text: тот подобран под белый фон и кегль 26px, где хватает 3:1, а на своей же подложке мелкой подписью он давал 4.01 при норме 4.5. */ --color-danger: #C42B30; --color-danger-50: #FDEDEE; --color-success: #007033; --color-bg: #FFFFFF; /* фон экрана */ --color-surface: #F2F6FA; /* карточки, секции, пузыри помощника */ --color-border: #D8E2EC; --color-text: #0B3658; --color-text-muted: #4A6480; /* вторичное, сноски, дисклеймеры */ --color-text-inverse: #FFFFFF; /* --- Подписи на заливках --- Каждая заливка знает, каким цветом на ней пишут. Раньше везде стоял жёстко зашитый белый, и на светлых заливках он не читался. */ --cta-text: #FFFFFF; /* на зелёной кнопке: 4.81:1 */ --trust-text: #FFFFFF; /* на синей кнопке: 6.99:1 */ --primary-text: #3D1800; /* на оранжевой заливке: 5.50:1 (белый давал 2.87) */ --badge-hot-text: #0B3658; /* на янтарном бейдже: 6.95:1 */ /* Заливка синей кнопки и её нажатое состояние. В светлой теме совпадают с цветом ссылок, в тёмной — намеренно расходятся, см. блок ниже. */ --trust-fill: var(--color-trust); --trust-fill-600: var(--color-trust-600); /* --- Плашка бренда работодателя --- Её фон приходит из базы (BrandColor) и от темы не зависит, поэтому и подпись обязана быть постоянной. Раньше здесь стоял var(--color-text), и в тёмной теме получался светлый текст на светлой плашке — 1.03:1, то есть название работодателя пропадало на каждой карточке. */ --brand-ink: #14243D; /* на светлой плашке: 13.73:1 */ --brand-ink-inverse: #FFFFFF; /* на тёмной плашке */ /* Подложка под логотип работодателя. Белая намеренно и в любой теме: сами логотипы бывают и тёмными, и светлыми, а шапка карточки красится произвольным brand_color. Отдельный токен — чтобы это читалось как решение, а не как забытый хардкод. */ --logo-plate: #FFFFFF; /* --- Семантика --- */ --surface-page: var(--color-bg); --surface-card: var(--color-bg); /* карточка на секции surface */ --surface-section: var(--color-surface); --text-body: var(--color-text); --text-muted: var(--color-text-muted); --text-income: var(--color-amber-text); /* якорь дохода */ --link: var(--color-trust); --link-hover: var(--color-trust-600); --focus-ring: var(--color-trust); --overlay: rgba(11, 54, 88, 0.48); --disabled-bg: #E6EBF2; /* WCAG отключённые элементы не проверяет, но заблокированная кнопка не должна выглядеть как рабочая: 3.97:1 читается и при этом заметно тише обычного текста (12:1). Прежние 2.04:1 на солнце выглядели просто как активная. */ --disabled-text: #64748B; } /* ============================================================ «Свод», тёмная тема. Внимание: этот блок сейчас НЕ включается — data-theme нигде не выставляется и медиазапроса prefers-color-scheme в проекте нет. Значения приведены в порядок, чтобы тему можно было включить одним движением и она сразу была корректной; до тех пор блок лежит мёртвым грузом и никому не показывается. ============================================================ */ [data-theme="dark"] { --color-primary: #FF8534; --color-primary-600: #FFA366; /* оранжевый как текст на тёмном: 7.57:1 */ --color-primary-100: #3A2415; --color-primary-50: #2A1A10; --color-cta: #0E8442; --color-cta-600: #0B6B36; --color-cta-700: #6EE7A0; --color-cta-50: #14301F; --color-trust: #7FB0FF; /* ссылки на тёмном: 6.77:1 */ --color-trust-600: #A9CCFF; --color-trust-50: #14263F; --color-amber: #F0A800; --color-amber-50: #33270A; --color-amber-text: #FBBF24; --amber-ink: #FBBF24; /* на тёмной подложке: 8.76:1 */ --color-danger: #FF8A8E; --color-danger-50: #3A1A1C; --color-success: #6EE7A0; --color-bg: #0B1524; --color-surface: #1B2740; --color-border: #33425C; --color-text: #F1F5F9; --color-text-muted: #A3B2C9; --color-text-inverse: #FFFFFF; --cta-text: #FFFFFF; /* 4.78:1 */ --trust-text: #FFFFFF; /* 5.97:1 на --trust-fill */ --primary-text: #3D1800; /* 6.51:1 */ --badge-hot-text: #33270A; /* 7.18:1 */ /* Здесь расхождение и происходит: ссылке нужен светлый тон, заливке под белой подписью — тёмный. Одним токеном это не покрыть. */ --trust-fill: #2F63AE; /* Нажатие обязано быть ТЕМНЕЕ заливки. --color-trust-600 в тёмной теме наоборот светлее (это ховер ссылки), и белым по нему было 1.64:1. */ --trust-fill-600: #24507F; --surface-card: var(--color-surface); --overlay: rgba(2, 6, 16, 0.6); --disabled-bg: #25314A; --disabled-text: #8494AC; /* 4.21:1 */ } /* ============================================================ ПРЕЖНЯЯ ПАЛИТРА — аварийный откат. Значения ровно те, что были до «Свода», включая их провалы контраста: подпись кнопки белым по #00C853 (2.24:1), активная вкладка #E85D00 (3.50:1), спокойный бейдж (4.45:1), счётчик скидок белым по оранжевому (2.87:1). Это сделано намеренно: откат должен возвращать ровно прежний вид, иначе он не откат. Держать сайт в этом режиме долго не следует. ============================================================ */ [data-palette="legacy"] { --color-primary: #FF6A00; --color-primary-600: #E85D00; --color-primary-100: #FFE3CC; --color-primary-50: #FFF4EB; --color-cta: #00C853; --color-cta-600: #00A846; --color-cta-700: #00843B; --color-cta-50: #E9FAF0; --color-trust: #1E5FCC; --color-trust-600: #174FAE; --color-trust-50: #EBF1FB; --color-amber: #FFB300; --color-amber-50: #FFF7E0; --color-amber-text: #C77700; --amber-ink: #C77700; --color-danger: #E5484D; --color-danger-50: #FDEDEE; --color-success: #00C853; --color-bg: #FFFFFF; --color-surface: #F7F9FC; --color-border: #E2E8F2; --color-text: #14243D; --color-text-muted: #5B6B82; --color-text-inverse: #FFFFFF; /* Прежний вид: везде был жёстко зашит белый. */ --cta-text: #FFFFFF; --trust-text: #FFFFFF; --primary-text: #FFFFFF; --badge-hot-text: var(--color-text); --trust-fill: var(--color-trust); --trust-fill-600: var(--color-trust-600); --surface-card: var(--color-bg); --overlay: rgba(20, 36, 61, 0.48); --disabled-bg: #E6EBF2; --disabled-text: #9AA7B8; } [data-palette="legacy"][data-theme="dark"] { --color-primary: #3D5AFE; --color-primary-600: #2A46E8; --color-primary-100: rgba(61, 90, 254, 0.28); --color-primary-50: rgba(61, 90, 254, 0.16); --color-cta: #22C55E; --color-cta-600: #16A34A; --color-cta-700: #4ADE80; --color-cta-50: rgba(34, 197, 94, 0.16); --color-trust: #60A5FA; --color-trust-600: #93C5FD; --color-trust-50: rgba(96, 165, 250, 0.16); --color-amber: #F59E0B; --color-amber-50: rgba(245, 158, 11, 0.16); --color-amber-text: #FBBF24; --amber-ink: #FBBF24; --color-danger: #F87171; --color-danger-50: rgba(248, 113, 113, 0.16); --color-success: #22C55E; --color-bg: #0F172A; --color-surface: #1E293B; --color-border: #31405A; --color-text: #F1F5F9; --color-text-muted: #9AA8BF; --color-text-inverse: #FFFFFF; --cta-text: #FFFFFF; --trust-text: #FFFFFF; --primary-text: #FFFFFF; --badge-hot-text: var(--color-text); --trust-fill: var(--color-trust); --trust-fill-600: var(--color-trust-600); --surface-card: var(--color-surface); --overlay: rgba(2, 6, 16, 0.6); --disabled-bg: #273349; --disabled-text: #64748B; }