/* assets/theme.css → /assets/theme.css БРЕНД-СЛОЙ «Signal»: типографика заголовков + СВЕТЛАЯ ТЕМА (follow-up к тёмной базе PR #583) + кнопка-тумблер темы. Линкуется ЕДИНЫМ источником lib/site-nav.mjs → `siteHeadHtml()` в КАЖДОЙ страницы (11ty-статика И worker-кабинеты). Раньше линковался из `siteNavHtml()`, т.е. из , — оттуда тема опаздывала и человек со светлой темой видел вспышку тёмного фона (FOUC, поймано прод-спеком BRAND.7). ─── БРЕНД-ТИПОГРАФИКА ─── Заголовки бренда — Space Grotesk. Раньше это правило копипастилось по страницам, и на `/apply`, `/org`, `/host`, `/discover`, `/h/` его просто не было: h1/h2 наследовали Inter от body, а веб-шрифт вообще не подключался (прод-спек BRAND.2 поймал обе половины дефекта на живом сайте — грепом исходников такое не ловится, объявление-то «где-то есть»). Правило глобальное и НИЗКОспецифичное (селектор элемента): страница, которой нужен свой шрифт заголовка, перебьёт его своим правилом без !important. */ h1, h2, h3 { font-family: "Space Grotesk", Inter, system-ui, -apple-system, "Segoe UI", sans-serif; } /* Вордмарк НИКОГДА не кричит «HACKONVIBE» (BRAND.9), даже внутри CSS-uppercase'нутого заголовка. Разметку ставит `brandifyHtml()` из lib/site-nav.mjs (вордмарк приезжает из ДАННЫХ — шаги таймлайна, имена редакций, — селектором его не выцепить). Правило ГЛОБАЛЬНОЕ: раньше `.brand-name{text-transform:none}` копипастился по страницам (index/winner/person-page) и на остальных не действовал. Класс (0,1,0) бьёт `h1,h2,h3` (0,0,1) в любом порядке. */ .brand-name { text-transform: none; } /* ─── СВЕТЛАЯ ТЕМА ─── Почему ОДИН оверрайд, а не правка 20 инлайн-`:root`: каждая страница инлайнит `:root{}` с ОДНИМИ И ТЕМИ ЖЕ брендовыми переменными (--night/--deep/--panel/--ink/--muted/--cyan/--pink/--violet/--sun/ --lime/--line). Селектор `html[data-theme="light"]` = специфичность (0,1,1) БЬЁТ `:root` = (0,1,0), поэтому перекрывает значения переменных на ВСЕХ страницах разом. CSS-кастом-проперти резолвятся в compute-time на и наследуются всем потомкам через var() — перекрасив переменные, перекрашиваем весь сайт. Тёмная тема = дефолт (переменные из :root страницы), НЕ трогается. Детали и границы — docs/behaviors/feature-light-theme-toggle.md. Эталон токенов — plan/design-ABC.html [variant a][light]. */ /* ─────────── СВЕТЛЫЕ ТОКЕНЫ (перемап тех же имён переменных) ─────────── */ html[data-theme="light"] { color-scheme: light; /* только светлая тема получает светлые UA-контролы/скроллбар; тёмная = как была */ --night: #f7f8fa; /* bg */ --deep: #ffffff; /* surface */ --panel: rgba(238, 241, 245, 0.92); /* полупрозрачная карточка (surface2) */ --ink: #0e1116; /* текст */ --muted: #5a6472; /* приглушённый текст */ --cyan: #2f4be0; /* primary (кобальт под светлое) */ --pink: #b8730a; /* accent (янтарь под светлое) */ --sun: #b8730a; --violet: #3a53d4; --lime: #2c8c3e; --line: rgba(14, 17, 22, 0.12); /* бордюр (был white-alpha → dark-alpha) */ /* Глоу тёмной темы (0 0 28px …) на светлом выглядит грязно — мягкая тень-подъём. */ --shadow-cyan: 0 8px 24px -12px rgba(47, 75, 224, 0.4); --shadow-pink: 0 8px 24px -12px rgba(184, 115, 10, 0.35); --shadow-discord: 0 8px 24px -12px rgba(88, 101, 242, 0.35); /* --discord (#5865f2) НЕ трогаем — фирменный blurple. */ } /* ─────────── ШАПКА / ФУТЕР под светлое (site-nav.css держит свои --sn-* + rgba-литералы под тёмное) ─────────── */ [data-theme="light"] .site-nav, [data-theme="light"] .site-foot { --sn-cyan: #2f4be0; --sn-pink: #b8730a; --sn-ink: #0e1116; --sn-bg: rgba(247, 248, 250, 0.9); } [data-theme="light"] .site-nav { border-bottom-color: rgba(14, 17, 22, 0.1); } [data-theme="light"] .site-nav .snav-links { color: rgba(14, 17, 22, 0.72); } [data-theme="light"] .site-nav .snav-links a:hover { color: #0e1116; text-shadow: 0 0 14px rgba(47, 75, 224, 0.35); } [data-theme="light"] .site-nav .snav-toggle { border-color: rgba(14, 17, 22, 0.2); background: rgba(14, 17, 22, 0.05); } [data-theme="light"] .site-nav .snav-burger, [data-theme="light"] .site-nav .snav-burger::before, [data-theme="light"] .site-nav .snav-burger::after { background: #0e1116; } [data-theme="light"] .site-nav[data-variant="full"] .snav-links { background: rgba(255, 255, 255, 0.98); border-color: rgba(14, 17, 22, 0.12); box-shadow: 0 14px 36px rgba(14, 17, 22, 0.16); } [data-theme="light"] .site-nav .snav-cd-label { color: rgba(14, 17, 22, 0.6); } [data-theme="light"] .site-foot { border-top-color: rgba(14, 17, 22, 0.1); color: rgba(14, 17, 22, 0.66); } [data-theme="light"] .site-foot .foot-links a { color: rgba(14, 17, 22, 0.72); } [data-theme="light"] .site-foot .foot-links a:hover { color: #0e1116; text-shadow: 0 0 14px rgba(47, 75, 224, 0.35); } @media (max-width: 600px) { [data-theme="light"] .site-nav[data-variant="full"] .snav-links { border-bottom-color: rgba(14, 17, 22, 0.1); } } /* ─────────── КНОПКА-ТУМБЛЕР ТЕМЫ (в .snav-actions, рядом с Discord/Login) ─────────── */ /* Иконка = ТЕКУЩАЯ тема (луна в тёмной, солнце в светлой). Клик → флип (site-nav.js). mask + currentColor → иконка всегда контрастна тексту в обеих темах. Дефолт (тёмная тема) — луна. */ .site-nav .snav-theme { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0; border: 1px solid rgba(255, 255, 255, 0.18); border-radius: 10px; background: rgba(255, 255, 255, 0.06); color: var(--sn-ink, #e6edf3); cursor: pointer; transition: background 160ms ease, border-color 160ms ease, transform 160ms ease; /* Луна (тёмная тема). fill внутри SVG не важен — mask берёт alpha, цвет даёт currentColor. */ --sn-theme-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M21 12.8A9 9 0 1 1 11.2 3a7 7 0 0 0 9.8 9.8Z' fill='black'/%3E%3C/svg%3E"); } .site-nav .snav-theme:hover { transform: translateY(-1px); background: rgba(255, 255, 255, 0.12); } [data-theme="light"] .site-nav .snav-theme { border-color: rgba(14, 17, 22, 0.18); background: rgba(14, 17, 22, 0.05); } [data-theme="light"] .site-nav .snav-theme:hover { background: rgba(14, 17, 22, 0.1); } /* Солнце (светлая тема). */ [data-theme="light"] .site-nav .snav-theme { --sn-theme-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='4'/%3E%3Cpath d='M12 2v2M12 20v2M4.9 4.9l1.4 1.4M17.7 17.7l1.4 1.4M2 12h2M20 12h2M4.9 19.1l1.4-1.4M17.7 6.3l1.4-1.4'/%3E%3C/g%3E%3C/svg%3E"); } .site-nav .snav-theme-ico { width: 20px; height: 20px; display: block; background: currentColor; -webkit-mask: var(--sn-theme-ico) center / contain no-repeat; mask: var(--sn-theme-ico) center / contain no-repeat; } @media (prefers-reduced-motion: reduce) { .site-nav .snav-theme { transition: none; } } /* ─── ПРИНЦИП P.2: НАЖАТИЕ ВИДНО ─── У кнопки обязано быть состояние «зажата». Без него нажатие проваливается: на медленной сети человек не понимает, что уже нажал, жмёт второй раз — и отправляет форму дважды. Приёмка на живом сайте поймала это у главной кнопки дверей («Continue»), у переключателя темы, кнопки меню и кнопки отчёта: наведение они отрабатывали, а нажатие — нет. Правило НИЗКОСПЕЦИФИЧНОЕ (селектор элемента): любая страница со своим `:active` перебьёт его без `!important`. Сдвиг крошечный — это подтверждение, а не анимация; при «уменьшить движение» он гасится полностью, оставляя изменение яркости как неподвижный признак нажатия. */ button:active:not([disabled]), [role="button"]:active:not([aria-disabled="true"]) { transform: translateY(1px); filter: brightness(0.94); } @media (prefers-reduced-motion: reduce) { button:active:not([disabled]), [role="button"]:active:not([aria-disabled="true"]) { transform: none; } } /* ─── ПРИНЦИП P.5: «УМЕНЬШИТЬ ДВИЖЕНИЕ» ГАСИТ ДВИЖЕНИЕ ВЕЗДЕ ─── Настройку включают не из вкусовых соображений: людям с вестибулярными расстройствами от движения на экране физически плохо — до тошноты и головокружения. Гасить его «по правилу на компонент» не работает: приёмка нашла 28 элементов (skip-link, карточки каталога, карточки таймлайна), которые продолжали ездить, потому что появились ПОЗЖЕ своих точечных правил. Каждый новый элемент возвращал движение обратно, и заметить это можно было только глазами с включённой настройкой. Поэтому правило одно и общее. Длительность не 0, а 0.01мс: нулевая местами отменяет событие transitionend, на котором висят обработчики, — компонент остался бы в промежуточном состоянии. */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } /* Исключение — индикаторы загрузки: замерший «крутится» индикатор читается как «зависло», и человек уходит со страницы, которая на самом деле работает. Им движение замедляют, а не отменяют. */ .dcp-spin, [data-motion="loading"] { animation-duration: 1.6s !important; animation-iteration-count: infinite !important; } }