/* Ops Console. Тёмная — референсная, светлая — та же структура в холодной инверсии. Общий язык с ctf-catalog, но набор токенов свой: палитра переиспользуется по назначению, а не копируется файлом, иначе первая же правка в одном проекте разъедется с остальными. Редизайн 2026-10-09: главный акцент — холодный голубой, зелёный ушёл в микро-сигналы под именем --signal. Контракты считаются скриптом tools/verify.py, а не на глаз: проверяются обе темы. */ :root { /* Поверхности, от фона к вложенным блокам */ --bg: #0A0F14; --surface: #0F1620; --surface-2: #151E2A; /* Текст */ --text: #DCE6F0; --text-strong: #F2F7FC; --muted: #7D8FA6; /* Границы: --border декоративный. Несёт смысл только там, где рисует контур поля — фокус идёт цветом --accent (спека §7). */ --border: #1E2C3D; /* Акцент — холодный голубой из синевы фона, а не зелёный. Визитка эволюционирует, но не ломается: терминальный образ остаётся, просто главный цвет теперь холодный. Контраст: 8.98 на --bg, 8.48 на --surface, 7.84 на --surface-2 — текстовый порог 4.5 проходит с запасом в обеих темах. */ --accent: #38BDF8; --accent-soft: rgba(56, 189, 248, 0.14); /* Подложка страницы: тонкая инженерная сетка. Визитка читается как чертёж, а не как витрина. Альфа подобрана на глаз по трём ступеням: 0.005 не видно вовсе, 0.02 уже спорит с текстом и страница превращается в миллиметровку. 0.012 — фактура, которую не замечаешь, но с её исчезновением становится плоско. Два размытых пятна — голубое и фиолетовое — убраны 2026-10-28. Они давали мягкий свет в углах, но синий с фиолетовым радиальным градиентом — самый узнаваемый след нейросетевой сборки. Фон остался плоским: глубину держит сетка. Значение rgba(), а не hex: сетка не имеет непрозрачного цвета, за который можно было бы посчитать контраст. */ --grid-line: rgba(255, 255, 255, 0.012); /* Зелёный остался микро-сигналом: щит рядом с «Cybersecurity enthusiast» в шапке. Ховеры ушли в --accent 2026-10-28 — два акцента в интерактиве читались как два разных интерфейса на одной странице. Доминантой зелёный не был и раньше: 8.44 на --bg. */ --signal: #22C55E; /* Фирменные цвета знаков. Telegram уставного синего #229ED9 на светлой плитке даёт 2.68:1 — ниже порога 3:1 для графики (WCAG 1.4.11), поэтому в светлой теме он темнее: #157BAE даёт 4.17:1 там и 3.58:1 в тёмной, то есть проходит в обеих. */ --tg: #229ED9; /* GitHub и MAX одноцветные, а их логотипы белые, поэтому в тёмной теме это белый, а в светлой — чернильный: фирменный чёрный GitHub на тёмной плитке даёт 1.07:1 и просто пропадает. */ --brand-ink: #FFFFFF; /* Радиусы: карточки и панели крупнее плитки иконки, аватар между ними */ --radius: 10px; --radius-md: 12px; --radius-lg: 14px; /* Аватар в шапке. 96px — размер исходника static/exited3n.png, а не плитки: вокруг картинки 4px подложки с каждой стороны, поэтому сама плитка шире. Токен, а не литерал в правиле: от него же считается плитка, и замена картинки на другой размер — это правка одной строки. */ --avatar-size: 96px; --font: 'Ubuntu', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; --mono: 'JetBrains Mono', ui-monospace, 'SF Mono', 'Cascadia Code', Consolas, monospace; /* Шкала отступов — единственный источник. Магические rem запрещены. Ступени не обязаны быть все задействованы: убрать неиспользуемую — значит завтра возвращать, и шкала перестанет быть шкалой. */ --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-5: 1.5rem; --space-6: 2rem; --space-7: 3rem; --space-8: 4rem; /* Отступ между секциями. Главный рычаг ритма страницы. 2026-10-09 владелец посмотрел на собранную страницу и назвал 98px «очень много»: шкала clamp(4rem, 10vw, 7.5rem) давала на десктопе почти 100px между каждой секцией, и три больших шва съедали всю страницу. Сдвинуто на clamp(3rem, 6vw, 4.5rem): на 985px теперь 59px вместо 98px, на телефоне пол 48px вместо 64px, и потолок 72px вместо 120px на широком мониторе. Нижняя граница 3rem — это ровно ступень --space-7 шкалы: seam на телефоне не схлопывается в ничего, а остаётся тем же отступом, который уже есть на странице внутри блоков. Верхняя 4.5rem оставлена с запасом от --space-8 (4rem): на 1440px 6vw даёт 86px, и без потолка страница снова разошлась бы в больших мониторах, где её жаловались в первый раз. */ --space-section: clamp(3rem, 6vw, 4.5rem); /* --shadow удалён редизайном 2026-10-09: подъём на ховере ушёл вместе с круглыми карточками, а отклик дают рамка и цвет. На странице больше нет ни одного потребителя тени. */ /* Спека §2: колонки — 1fr и 1.25fr на ширине min(1040px, 100% - 2rem). Двум колонкам нужно больше, чем одной: в правой подписи проектов идут в две строки («Авторский канал об информационной безопасности»), и на 900px она бы сжималась в обрезку. Враппер — единственное место, где ширина ограничивается; margin-inline центрирует. */ --wrapper-max: 1040px; color-scheme: dark; } /* Страховка для состояния auto. В :root тёмная тема, а :root без атрибута — это ровно «выбор не сделан». Без этого правила пользователь со светлой ОС, не выбравший тему руками, получил бы тёмную страницу, и auto перестал бы означать «как в системе». :not([data-theme]) не задевает ни одну из явных тем — там атрибут стоит. */ @media (prefers-color-scheme: light) { :root:not([data-theme]) { --bg: #F4F7FA; --surface: #FFFFFF; --surface-2: #EDF2F7; --text: #16202B; --text-strong: #0A121C; --muted: #5A6B7E; --border: #D3DDE8; /* 5.52 на --bg, 5.93 на --surface, 5.27 на --surface-2 */ --accent: #0369A1; --accent-soft: rgba(3, 105, 161, 0.1); /* Подложка в светлой теме: линия сетки рисуется не белым, а чернильным — на светлом белым не видно вовсе. Значение то же по альфе, а не по цвету, поэтому интенсивность фактуры от темы не зависит. */ --grid-line: rgba(22, 32, 43, 0.012); /* 6.63 на --bg */ --signal: #166534; --tg: #157BAE; --brand-ink: #16202B; color-scheme: light; } } /* Явная светлая тема — тот же набор значений, что и в prefers-color-scheme выше. Дублируется намеренно: :not([data-theme]) не срабатывает, когда атрибут выставлен, а угадывать по нему CSS не умеет. Расхождение между блоками ловит verify.py — оно превратило бы страницу в наполовину светлую молча. */ [data-theme='light'] { --bg: #F4F7FA; --surface: #FFFFFF; --surface-2: #EDF2F7; --text: #16202B; --text-strong: #0A121C; --muted: #5A6B7E; --border: #D3DDE8; --accent: #0369A1; --accent-soft: rgba(3, 105, 161, 0.1); /* Дублируется намеренно: --grid-line должен совпадать с блоком выше побайтно, иначе светлая тема возьмёт тёмное значение подложки. Ловит check_light_palette_consistency. */ --grid-line: rgba(22, 32, 43, 0.012); --signal: #166534; --tg: #157BAE; --brand-ink: #16202B; color-scheme: light; }