# Дизайн-система

## Toventra / визуальный проход 12.11
Toventra — программа, Ева — помощница. Wordmark набран Manrope; кольцо точно вырезается CSS-окном из исходного референса. SVG-иконки сведены к сетке 24×24 с одинаковыми оптическими полями и толщиной штриха; pause/play теперь тоже векторные.

Сцена работы открытая: предметный кадр + разговор + последовательно проявляющиеся размер/заказ/отправка. Пустая оболочка приложения и декоративное боковое меню удалены. Общий ритм, разделители, заголовки и вторичный текст согласованы между разделами. Преломляющий слой ограничен тонким периметром, чтобы не создавать эффект вложенного прямоугольника.

`src/refinement.css` — финальные композиционные и типографические уточнения поверх материала. Desktop: предметный кадр меняет наклон, положение и масштаб по шагам, получает лёгкий параллакс; mobile: отдельная компактная композиция. SVG/HTML-диалог и факты остаются доступны без WebGL и при reduced-motion.

## Материал
Фотогалерея: `src/gallery.js` и `src/gallery.css`. Три самостоятельные сгенерированные иллюстрации — худи, кроссовки, сумка — заменяют два кропа одной куртки. Кадр выбирается стрелками, нажатием соседнего изображения, полосой кадров, клавиатурой или свайпом. Фотографии перемещаются transform/opacity и получают локальный specular; активный кадр раскрывается в полноэкранную сцену с увеличением. Данные ассортимента и функция отправки покупателю не имитируются.

Переключение возможностей: одна стеклянная панель вместо шести отдельных прямоугольников. Движущийся сегмент показывает выбор; role=tablist, roving focus и клавиатурные стрелки сохранены. На телефоне панель листается горизонтально и сама показывает выбранный сегмент. Reduced-motion отключает перемещение. Промпты и происхождение иллюстраций описаны в `GALLERY_ASSETS.md`, размеры и хеши — в `gallery-assets.json`.

Предметные сцены: `src/product-scenes.js` и `src/product-scenes.css` заменяют упрощённые иллюстрации возможностей, панель с архивным изображением, пустую полосу цифр и закрытый ночной таймлайн. Сцена «Хороший ответ. И всё движется» сохранена без изменения разметки. Остальные возможности используют тот же предметный контекст и настоящие frontend-действия: смена примера вопроса, выбор M/L, этап заказа, просмотр фотографии. Интерфейс — отдельная интерактивная демонстрация с поиском, тремя разделами и связанными примерами. Архив production открывается отдельной подписанной кнопкой; демонстрация не выдаётся за реальный снимок.

Результаты: три значения прежнего подтверждённого снимка, выбор определения/источника и фактическое разделение каталога 751/1186 из `projectData`. Счётчики не накручиваются, конверсия и рост не выдумываются. Ночная сцена открытая: крупное время, тот же предмет, содержательное событие и четыре доступных шага. Изменения скролла и ручной выбор управляют одной сценой. Объекты проявляются с небольшими последовательными задержками; размерная сетка и результаты реагируют без отправки на сервер. Вращение часовой дуги за пределами viewport приостанавливается.

Общий оптический проход: `src/optical-finish.css` согласует грани, локальный блик и focus/press у кнопок, прозрачные поверхности и финальную композицию. Основной CTA — тёмная стеклянная линза; небольшие основные кнопки остаются светлыми. Две широкие SVG-ленты с отдельными объёмом, складкой, контуром и локальным источником света заменяют набор пересекающихся тонких линий. При чтении сценария фон затихает; около CTA возвращается. Свет движется только transform/opacity; pause, visibility и reduced-motion сохранены.

Кольцо: цветные отражения с узким белым ядром, прозрачное стекло и отдельная преломляющая оболочка. Цветная кромка и очень тонкий второй слой её свечения усиливают читаемость без full-screen bloom. Камера, отражения и свет продолжают реагировать на курсор; один рендерер используется также в подключении. Финальная сцена удерживает кольцо, пока читается CTA, затем оно уходит к футеру. WebGL не затрагивает текст или кнопки; CSS-кольцо остаётся запасным вариантом. Снимки и проверка материала: `tests/artifacts/optical-finish`.

Подключение: `src/connection.css` заменяет тесную форму на полноэкранную сцену. Единственный WebGL canvas временно переносится в native dialog и возвращается при закрытии; второй рендерер не создаётся. Слева кольцо, справа крупный заголовок, e-mail в прозрачной линзе и одна кнопка. На телефоне и планшете в портретной ориентации кольцо над формой. Имя и длинный комментарий удалены. Успех честно обозначает локальное сохранение, а не отправку или открытое подключение. При низкой высоте доступна только необходимая вертикальная прокрутка с тёмным scrollbar; горизонтального скролла нет. Escape, focus return, повторное открытие, уменьшение движения и CSS fallback проверяются в браузере.

Футер: отдельная широкая линза в `src/footer.css`, по пропорциям предоставленного владельцем референса. На большом экране: знак 116 px, wordmark до 62 px, основной текст 24 px; четыре открытые колонки и отдельная стеклянная ссылка на GitHub. Кромка освещена пятью локальными белыми, синими, фиолетовыми и персиковыми бликами. Прозрачное ядро, тонкое периферийное преломление, внутренние каустики и внешний мягкий свет остаются раздельными слоями; текст не фильтруется. Собственные SVG-ленты уходят за панель и дрейфуют только в видимой сцене. Общая сцена затихает к футеру. Контактные адреса и социальные сети без подтверждённых ссылок не добавляются. На mobile композиция перестраивается; локальный блик следует прокрутке. Pause и reduced-motion останавливают декоративную анимацию.

Графит #050a13; тёмно-синие глубины #0a1323; основной текст #eef3ff; вторичный #a1aec4; лёд #99d9ff; фиолет #b7a0ff; редкий персиковый блик #ffd0b4.
Никакой постоянной пульсации. Стекло читается отражением, кромкой и глубиной, а не тяжёлой размытой подложкой.

Оптический проход v3, 12.11: прозрачное ядро и отдельные слои толщины, отражения и кромки. Размытие уменьшено до 8 px на desktop и 6 px на mobile. Сплошная серая заливка убрана. Три панели hero и длинная нижняя полоса дополняют кольцо. Мягкие световые изгибы соединяют hero с большой сценой диалога, которая идёт сразу следующей.

Материал определяется в `src/glass-material.css`; композиция — в `src/glass-v2.css`; базовые компоненты — в `src/styles.css`. `src/glass.js` добавляет только декоративные слои. Production, контент и метрики этим проходом не изменяются.

## Типографика
Локальный Manrope (SIL OFL). Заголовки 72–88 desktop / 44–52 mobile, tracking -4…-6%; основной текст 17–19 / 15–16. Максимум короткий абзац на мысль.

## Композиция
Контейнер 1280 px; боковые поля 64/24/18; вертикальный ритм 8. Крупные сцены вместо сетки одинаковых карточек. Радиусы 28–40 для панелей, pill для кнопок.

Панель под hero: четыре равномерные группы, крупные цифры, белые контурные иконки и короткие подписи. Первые три значения берутся из того же подтверждённого снимка, что и секция результатов; четвёртая группа ведёт в рабочий магазин. Дата и методика доступны под панелью. Вместо тяжёлого многослойного борта — тонкая линза с тремя локальными бликами и лёгкими разделителями. На mobile группы складываются в сетку 2×2. SVG displacement в этой тонкой панели отключён, чтобы не дублировать контур.

## Стекло
| Слой | Назначение |
| --- | --- |
| Прозрачное ядро | Холодный слабый tint и умеренный backdrop blur; фон просвечивает |
| glass-optics | Статичная карта смещения слегка преломляет фон у периметра; текст не фильтруется |
| glass-depth | Утопленная внутренняя граница и отражение: ощущение толщины |
| glass-edge | Маска контура: локальные белые, голубые, фиолетовые и персиковые блики |
| glass-shimmer | Очень медленное перемещение отражения только по кромке |
| Локальный specular | Отдельное мягкое пятно диаметром 340 px под курсором |

`data-glass`: локальный specular и движение отражения. `data-tilt`: очень мягкая перспектива и spring-возврат. Декоративные слои не принимают клики и скрыты от screen reader.

SVG refraction — progressive enhancement для браузеров с поддержкой SVG backdrop filters. На mobile и при отсутствии поддержки остаются прозрачный материал, двойная кромка, внутреннее отражение и локальный свет; полное физическое трассирование преломления не заявляется. Кольцо использует отдельный WebGL-материал с отражением среды и спектральными каустиками; без WebGL виден CSS-вариант.

Фон — две тонкие световые дуги, напоминающие движение фирменного кольца. Ленты имеют отдельную едва заметную поверхность и светлую грань. Движение фона использует transform/opacity. Никаких полноэкранных шумовых фильтров или анимации turbulence.

Shimmer работает только у панелей вблизи viewport. При скрытии вкладки анимации и rAF останавливаются. Пауза и reduced-motion сохраняют статичную оптику.

## Знак
Точный знак и надпись из первого предоставленного референса («Стеклянный футер…»). Исходник сохранён без изменений; логотип показывается CSS-окном. Изображение не перерисовано и не подменено произвольным символом.

## Доступность
Видимый focus, нативные кнопки и dialog; 44 px touch targets; reduced-motion; читабельный интерфейс без WebGL и JS. Контраст фокусного текста важнее интенсивности эффекта.