/* ============================================================ Светлая тема · Карта проектов изменений · ЕВМ Включается атрибутом на : Пока атрибута нет — файл ничего не меняет, тёмная тема работает как прежде. Как подобрана ------------- Все нейтрали построены в OKLab на оттенке Pantone 534 C (#1B365D, H = 258°): меняется только светлота и насыщенность, оттенок бренда — общий. Поэтому светлая тема ощущается тем же брендом, а не «другим сайтом». Цвета направлений не просто осветлены с тёмной темы: неон на белом разваливается (жёлтый #EAB308 давал 1.8:1 — не видно). Светлоты подобраны перебором так, чтобы одновременно выполнялось: · линия ≥ 3:1 к фону — WCAG 1.4.11 для графики; · подпись ≥ 4.5:1 — WCAG 1.4.3 AA для текста; · попарная различимость — не хуже нынешней тёмной темы, в том числе при дейтеранопии и протанопии (ΔE ≥ 6). Цифры контраста указаны рядом с каждым токеном. ============================================================ */ :root[data-theme="light"] { --brand: #1B365D; /* Pantone 534 C — не меняется между темами */ /* --- Поверхности --- */ --bg: #F2F6FD; /* фон страницы: белый с примесью бренда */ --bg-2: #E9EFF8; /* второй план, полосы */ --panel: rgba(255, 255, 255, .78); --panel-solid: #FFFFFF; /* --- Границы --- */ --border: #C3D0E3; --border-soft: #D8E0ED; /* --- Текст --- */ --text: #172B49; /* 13.1:1 — основной, это бренд, а не чёрный */ --text-dim: #3D516E; /* 7.5:1 — вторичный */ --muted: #607086; /* 4.7:1 — подписи, минимум для AA */ /* --- Акцент --- */ --accent: #205BAD; /* 6.1:1 к фону, белый текст на нём 6.6:1 */ --accent-2: #16478E; /* нижняя точка градиента кнопки */ --accent-soft: rgba(32, 91, 173, .10); /* заливка активных чипов */ /* --- Статусы --- */ --ok: #008339; /* 4.5:1 */ --err: #C64159; /* 4.5:1 */ --shadow: 0 18px 44px rgba(23, 43, 73, .13); } /* ============================================================ Цвета семи направлений ------------------------------------------------------------ --dir-N линия на карте, кружки станций, свотчи легенды --dir-N-ink тот же оттенок для текста (название направления) Там, где значения совпадают, цвет и так проходит порог для текста. ============================================================ */ :root[data-theme="light"] { --dir-1: #BB5200; --dir-1-ink: #B95100; /* 4.5:1 / 4.6:1 Работать эффективнее */ --dir-2: #00A449; --dir-2-ink: #008339; /* 3.0:1 / 4.5:1 Обеспечить нужными людьми */ --dir-3: #B28700; --dir-3-ink: #8E6B00; /* 3.1:1 / 4.6:1 Найти и развить потенциал */ --dir-4: #9537E4; --dir-4-ink: #9537E4; /* 4.9:1 / 4.9:1 Перестроить организацию */ --dir-5: #D41F82; --dir-5-ink: #D21C81; /* 4.5:1 / 4.6:1 Изменить опыт сотрудника */ --dir-6: #009CB1; --dir-6-ink: #007B8C; /* 3.1:1 / 4.6:1 Технологии и ИИ */ --dir-7: #BA001B; --dir-7-ink: #BA001B; /* 6.2:1 / 6.2:1 Изменить экосистему */ } /* ============================================================ Служебная графика карты Эти же переменные объявлены в style.css со значениями тёмной темы, поэтому переключение мгновенное — SVG не перерисовывается. ============================================================ */ :root[data-theme="light"] { --map-bg: #F2F6FD; /* заливка колец узлов, «маска» под линиями */ --map-guide: #D6DFEC; /* вертикальные направляющие дорожки */ --map-band-line: #C6D2E4; /* пунктир границы уровня сложности */ --map-band-fill: rgba(27, 54, 93, .035); /* подложка чётной полосы */ --map-hub-row-line: #DCE4F0; --map-hub-ring: #1C2E49; /* обводка кольца узла, 12.6:1 */ --map-cap: #607086; /* «СЛОЖНОСТЬ», номера станций, 4.7:1 */ --map-band-lvl: #172B49; --map-station-label: #2B3E5C; /* подпись обычной станции */ --map-hub-label: #172B49; /* подпись узла */ --map-halo: #3270C7; /* ореол «совпадает с фильтром», 4.5:1 */ --map-label-halo: #F2F6FD; /* обводка-подложка текста поверх линий */ } /* ------------------------------------------------------------ Цвета направлений на карте и в интерфейсе. В тёмной теме они приходят из data.js прямо в атрибуты SVG; здесь перекрываются по data-dir — правило CSS сильнее атрибута. ------------------------------------------------------------ */ :root[data-theme="light"] .line-path[data-dir="1"] { stroke: var(--dir-1); } :root[data-theme="light"] .line-path[data-dir="2"] { stroke: var(--dir-2); } :root[data-theme="light"] .line-path[data-dir="3"] { stroke: var(--dir-3); } :root[data-theme="light"] .line-path[data-dir="4"] { stroke: var(--dir-4); } :root[data-theme="light"] .line-path[data-dir="5"] { stroke: var(--dir-5); } :root[data-theme="light"] .line-path[data-dir="6"] { stroke: var(--dir-6); } :root[data-theme="light"] .line-path[data-dir="7"] { stroke: var(--dir-7); } :root[data-theme="light"] .station[data-dir="1"] .st-dot { stroke: var(--dir-1); } :root[data-theme="light"] .station[data-dir="2"] .st-dot { stroke: var(--dir-2); } :root[data-theme="light"] .station[data-dir="3"] .st-dot { stroke: var(--dir-3); } :root[data-theme="light"] .station[data-dir="4"] .st-dot { stroke: var(--dir-4); } :root[data-theme="light"] .station[data-dir="5"] .st-dot { stroke: var(--dir-5); } :root[data-theme="light"] .station[data-dir="6"] .st-dot { stroke: var(--dir-6); } :root[data-theme="light"] .station[data-dir="7"] .st-dot { stroke: var(--dir-7); } :root[data-theme="light"] .hub-dot[data-dir="1"] { fill: var(--dir-1); } :root[data-theme="light"] .hub-dot[data-dir="2"] { fill: var(--dir-2); } :root[data-theme="light"] .hub-dot[data-dir="3"] { fill: var(--dir-3); } :root[data-theme="light"] .hub-dot[data-dir="4"] { fill: var(--dir-4); } :root[data-theme="light"] .hub-dot[data-dir="5"] { fill: var(--dir-5); } :root[data-theme="light"] .hub-dot[data-dir="6"] { fill: var(--dir-6); } :root[data-theme="light"] .hub-dot[data-dir="7"] { fill: var(--dir-7); } /* названия линий — вариант потемнее, он проходит порог для текста */ :root[data-theme="light"] .line-title[data-dir="1"] text { fill: var(--dir-1-ink); } :root[data-theme="light"] .line-title[data-dir="2"] text { fill: var(--dir-2-ink); } :root[data-theme="light"] .line-title[data-dir="3"] text { fill: var(--dir-3-ink); } :root[data-theme="light"] .line-title[data-dir="4"] text { fill: var(--dir-4-ink); } :root[data-theme="light"] .line-title[data-dir="5"] text { fill: var(--dir-5-ink); } :root[data-theme="light"] .line-title[data-dir="6"] text { fill: var(--dir-6-ink); } :root[data-theme="light"] .line-title[data-dir="7"] text { fill: var(--dir-7-ink); } /* Свотчи легенды и точки направлений в карточке/подсказке. Здесь цвет приходит из data.js инлайновым стилем, а инлайн сильнее класса — поэтому единственное место во всей теме, где нужен !important. */ :root[data-theme="light"] .legend-swatch[data-dir="1"], :root[data-theme="light"] .dot[data-dir="1"] { background: var(--dir-1) !important; } :root[data-theme="light"] .legend-swatch[data-dir="2"], :root[data-theme="light"] .dot[data-dir="2"] { background: var(--dir-2) !important; } :root[data-theme="light"] .legend-swatch[data-dir="3"], :root[data-theme="light"] .dot[data-dir="3"] { background: var(--dir-3) !important; } :root[data-theme="light"] .legend-swatch[data-dir="4"], :root[data-theme="light"] .dot[data-dir="4"] { background: var(--dir-4) !important; } :root[data-theme="light"] .legend-swatch[data-dir="5"], :root[data-theme="light"] .dot[data-dir="5"] { background: var(--dir-5) !important; } :root[data-theme="light"] .legend-swatch[data-dir="6"], :root[data-theme="light"] .dot[data-dir="6"] { background: var(--dir-6) !important; } :root[data-theme="light"] .legend-swatch[data-dir="7"], :root[data-theme="light"] .dot[data-dir="7"] { background: var(--dir-7) !important; } /* ============================================================ Точечные правки под светлый фон Токенов недостаточно там, где в тёмной теме цвет был вписан прямо в правило (полупрозрачный белый, свечение кнопок и т. п.). ============================================================ */ :root[data-theme="light"] body { background-image: radial-gradient(1100px 640px at 45% 0%, #FFFFFF 0%, var(--bg) 55%, var(--bg-2) 100%); } :root[data-theme="light"] .site-header { background: rgba(242, 246, 253, .92); } :root[data-theme="light"] .filter-bar { background: rgba(233, 239, 248, .92); } /* кнопка: на светлом фоне нужен тёмный акцент и белый текст */ :root[data-theme="light"] .btn-primary { background: linear-gradient(180deg, var(--accent), var(--accent-2)); color: #FFFFFF; box-shadow: 0 2px 10px rgba(32, 91, 173, .22); } /* Заголовки и hover-состояния, у которых в тёмной теме цвет вписан явно (#F4F7FC, #fff) — на светлом фоне они были бы не видны. */ :root[data-theme="light"] .brand-title, :root[data-theme="light"] .modal-title, :root[data-theme="light"] .pc-title, :root[data-theme="light"] .map-tip .tip-title, :root[data-theme="light"] .about-wrap h1, :root[data-theme="light"] .about-wrap h2 { color: var(--text); } :root[data-theme="light"] .nav-link:hover, :root[data-theme="light"] .mc-btn:hover { color: var(--accent-2); } :root[data-theme="light"] .mc-btn:hover { background: var(--accent-soft); border-color: var(--accent); } /* мелкие подложки, которые в тёмной теме были «белым по прозрачному» */ :root[data-theme="light"] .theme-toggle, :root[data-theme="light"] .legend-toggle, :root[data-theme="light"] .pc-close, :root[data-theme="light"] .modal-close, :root[data-theme="light"] .cta-ico { background: rgba(27, 54, 93, .07); color: var(--muted); } :root[data-theme="light"] .theme-toggle:hover { background: var(--accent-soft); color: var(--accent-2); } :root[data-theme="light"] .legend-item:hover { background: rgba(27, 54, 93, .05); } :root[data-theme="light"] .legend-item.on, :root[data-theme="light"] .chip.on { background: var(--accent-soft); color: var(--accent-2); } :root[data-theme="light"] .pdf-item:hover { background: var(--accent-soft); } :root[data-theme="light"] .chip { background: #FFFFFF; } :root[data-theme="light"] .pc-block { background: #F7FAFE; } :root[data-theme="light"] .field input { background: #FFFFFF; } :root[data-theme="light"] .cta-inner { background: linear-gradient(180deg, #FFFFFF, #F5F8FD); } /* растушёвка под нижней панелью — в тёмной теме она задана явными цветами */ :root[data-theme="light"] .cta-bar { background: linear-gradient(180deg, rgba(242, 246, 253, 0) 0%, rgba(242, 246, 253, .86) 34%, rgba(233, 239, 248, .97) 100%); } :root[data-theme="light"] .pdf-ico.tg { background: rgba(42, 171, 238, .14); color: #1B87BC; } :root[data-theme="light"] .pdf-ico.vk { background: rgba(70, 128, 194, .16); color: #3D6FB0; } :root[data-theme="light"] .modal-backdrop { background: rgba(23, 43, 73, .38); } :root[data-theme="light"] .project-card, :root[data-theme="light"] .map-tip { background: rgba(255, 255, 255, .97); } /* линии на светлом фоне не светятся — свечение убираем, иначе грязь */ :root[data-theme="light"] .line-path { filter: none !important; } @media (max-width: 760px) { :root[data-theme="light"] .site-header { background: #F2F6FD; } :root[data-theme="light"] .filter-bar { background: #E9EFF8; } :root[data-theme="light"] .legend, :root[data-theme="light"] .project-card, :root[data-theme="light"] .map-tip { background: #FFFFFF; } :root[data-theme="light"] .cta-inner { background: #FFFFFF; } :root[data-theme="light"] .modal-backdrop { background: rgba(23, 43, 73, .5); } }