# Дизайн-код публичного сайта СКН

Версия 1.0. Область действия — читательские страницы `sakonews.ru`. Админка имеет собственный документ: `admin-design-code.md`.

Хостинг: [читательская версия](https://sakonews.ru/design/?doc=public), [исходный Markdown](https://sakonews.ru/docs/public-design-code.md).

## Характер и границы

«Редакционная полоса»: выразительная чёрно-белая типографика, спокойные поверхности, тонкие разделители и тёплый медный акцент. Основа — существующий СКН: PT Sans, компактная шапка, редакционная сетка главной, мозаики разделов, двухколоночная новость, маскот и яркая мемная лента.

Общий слой — `assets/css/public-design-system.css`, подключённый после `style.css`. Все правила ограничены `body.public-site`; токены имеют префикс `--pub-`. Подключение админских CSS, компонентов и токенов на паблике не допускается. Геометрия игр и анимация маскота регулируются их собственными компонентами.

Сетка главной, три карточки мемов в ряду с отдельной первой карточкой, aspect ratio видео и работа галерей сохраняют свои специальные правила. Объединяются повторяющиеся роли: отступ страницы, заголовок, подпись, ссылка, поле, кнопка, карточка, панель и состояние.

## Палитра и поверхности

- Основной фон/текст наследуются от текущей тёмной или светлой темы. В тёмной теме сохраняются чёрный фон и белый текст; в светлой — белый фон и тёмный текст.
- Тёплый акцент: действующие `--link-color` / `--accent-rgb` (тёмная тема `#f1a24a`, светлая `#b5651d`). Применяется к ссылкам, фокусу и выбору, а не к каждому контейнеру.
- Поверхность панели — `--pub-surface`, вложенного поля — `--pub-field`; рамка 1 px `--pub-line`. Текст второго уровня — `--pub-muted`, подписи — `--pub-caption`.
- У обычных карточек нет тяжёлых теней и постоянных градиентов. Тень `--pub-shadow` предназначена для меню, подсказок и диалогов.
- Красный используется для ошибки. Коралловый/жёлтый блок мемов и красные кнопки видеоплееров — сохранённые редакционные акценты своих форматов; они не распространяются на формы и поиск.

## Типографика и ритм

Шрифт — локальный PT Sans. Все поля и кнопки наследуют его. Нельзя добавлять отдельный шрифт для нового раздела без новой роли в дизайн-коде.

| Роль | Размер / интерлиньяж |
| --- | --- |
| Заголовок страницы | `clamp(30px, 3.6vw, 46px)` / 1.1, 700 |
| Заголовок новости | `clamp(32px, 3vw, 46px)` / 1.16, 700; телефон — 26–28 px |
| Заголовок раздела | `clamp(23px, 2.1vw, 30px)` / 1.15, 700 |
| Заголовок карточки | 20–24 px / 1.22, 700; компактные колонки — 17 px / 1.3 |
| Текст статьи | 18 px / 1.7, на телефоне 17 px / 1.65 |
| Описание / текст формы | 16 px / 1.55 |
| Кнопка / поле | 15 px / 1.3 |
| Метаданные / подпись | 12–13 px / 1.45 |

Длинные заголовки переносятся естественно; обрезка допускается только в специально компактном превью. Основной текст новости не обрезается и ограничен мерой 65ch в своей колонке. Начертание основного текста — 400; авторские `strong` и `b` сохраняются. Между абзацами — 1em; списки имеют отступ, цитата — медную вертикальную линию. Длинные ссылки переносятся, таблицы прокручиваются внутри своей колонки.

Базовый шаг — 4 px. Канонические интервалы — 4, 8, 12, 16, 24, 32, 48 px. Поля, подписи и кнопки одной формы используют один ритм. При адаптации уменьшается общий gutter, а не случайные отступы отдельных карточек.

## Контейнеры и карточки

- Общая внешняя ширина шапки, главной, новостей, листингов и футера — 1440 px с внутренним gutter 24 px (16 px до 760 px, 12 px до 400 px).
- Каталоги, мемы, поиск и тематические страницы — 1280 px с тем же gutter. Предложка — 920 px, информационная страница — 800 px, форма подписки — 620 px.
- Внешний радиус обычной карточки — 8 px, поля/кнопки — 5 px, диалога — 12 px. Мемный хиро сохраняет свой формат и цвет.
- Карточка раздела, справочника, связанного материала использует одинаковую рамку и состояние hover. Поверхность не приподнимается и не меняет размеры при наведении.
- Существующие разные композиции главной остаются композициями: общий дизайн-код не превращает их в одинаковые прямоугольники с рамками.
- Превью сохраняет заданное соотношение сторон; визуальные карточки используют `cover`, полноразмерный просмотр и изображение мема — `contain`. Пользовательский контент не обрезается ради внешнего единообразия.

## Контролы

- Поле и кнопка формы — минимум 44 px. Однострочные поля имеют одинаковые padding и радиус; textarea сохраняет изменение высоты и минимум 140 px.
- Подпись — обычный регистр, 13 px; инструкции располагаются под полем. Placeholder не заменяет подпись.
- Основная кнопка — светлый/тёмный контрастный фон в зависимости от темы. Вторичная — прозрачная с рамкой. В группе одинаковая высота, кроме явно обозначенного компактного управления.
- Компактная иконка шапки, «Поделиться» и пагинация — 40 px. У иконки без подписи обязательны `aria-label` и понятная подсказка.
- Select сохраняет нативное управление клавиатурой и проверку формы, но использует общую поверхность, типографику и контурную стрелку. Нельзя заменять его недоступным div-меню.
- Сохраняются `name`, `value`, `form`, `required`, `disabled` и существующие JS-обработчики. Скрипты форм и публикации не зависят от цвета/радиуса компонента.

## Состояния и слои

- Ссылка в тексте подчёркнута приглушённой линией; hover делает линию и цвет выразительнее. Заголовки и навигация получают подчёркивание при наведении; выбранный раздел подчёркнут постоянно.
- Hover карточки меняет рамку/тон поверхности. Размер, отступы и соседние элементы не двигаются.
- Focus-visible — 2 px медный контур с отступом 3 px. Поле дополнительно получает мягкое кольцо. Outline не скрывается без равноценной замены.
- Active кнопки — смещение вниз на 1 px. Disabled — приглушение, обычный курсор, без hover/active эффекта.
- Выбранная вкладка/страница — медный тон и видимая линия или поверхность; состояние не обозначается одним цветом.
- Меню и подсказки — общая поверхность, рамка и тень. Поиск — фиксированный диалог с затемнённым backdrop; медиалайтбокс сохраняет чёрную сцену и собственную геометрию плеера.
- Переходы — 160–180 ms. `prefers-reduced-motion` отключает декоративное движение контролов и превью. Маскот и игры используют свои существующие правила доступности.

## Адаптивность и развитие

На телефоне формы переходят в одну колонку, управляющие группы могут переноситься целыми кнопками. Хлебные крошки переносят длинный текст. Меню, галерея и всплывающие панели не должны создавать горизонтальную прокрутку страницы.

Новое правило сначала добавляется в этот документ и общий CSS, затем применяется к разделам. Вместо нового локального размера используется ближайшая существующая роль. Исключение оформляется семантическим классом с объяснением, а не inline-стилем. Исторические `!important` в новом слое допускаются только как адаптер к уже имеющимся фиксированным размерам в `style.css`; новые компоненты их не вводят.

## Доступ разработчикам

Канонические Markdown-документы хранятся в `docs/` проекта и развёртываются на том же хостинге. Читательская копия доступна через страницу «Дизайн-коды» в документации проекта; туда входят отдельные документы для админки, публичной части и набора админских иконок. При изменении компонента код и его правила обновляются в одном развёртывании.