Единый источник стилей, компонентов и шаблонов сайта

Просите изменить конкретный token или класс из этой страницы. Не разрешайте создавать локальный стиль внутри отдельного HTML-файла, если компонент уже существует.

Для слайдера подключите /scripts/site.js?v=20260928-card-stats-consistency-72. data-case-media-tab связывается со слайдом по порядку, а data-case-media-initial="last" сразу открывает последнюю версию. Галерея переключается табами, стрелками клавиатуры, перетаскиванием мышью и свайпом. Два таба автоматически получают компактную ширину и выравниваются по центру. Модификатор case-media--controls-safe резервирует боковые зоны под стрелки и zoom, когда важный контент макета расположен у краёв. Подпись необязательна; для длинных вертикальных макетов не добавляйте data-case-media-fixed-ratio.

tokens.css → global.css → typography.css → layout.css → animations.css → site.js. Для галерей мобильных приложений case-app-media.js подключается перед site.js.

Для подборки экранов на главной и в первом экране мобильного кейса используйте один модификатор case-cover-carousel: в ленту попадает первый макет каждого продукта без дополнительной рамки или подложки, а вторая идентичная группа обеспечивает бесшовный цикл. Движение запускается только при наведении или фокусе, использует общий токен --motion-marquee-duration и отключается через prefers-reduced-motion. Используйте адаптивные WebP-превью 320/640 px из /assets/images/cases/mobile-cover/, а не полноразмерные исходники кейса.

В компактном нумерованном списке case-story-list и в размеченном тексте altprof-labeled-copy смысловой заголовок всегда занимает отдельную строку, а пояснение начинается ниже.

altprof-journey-results показывает одинаковую пару «до → после» для каждого этапа пути. Компонент использует системные поверхности, accent, border, radius и тень; вывод отделяется общей поверхностью --color-surface-soft. Если данных пока недостаточно, статус прогноза объясняется отдельно от названия и значения метрики.

Названия в сетке используют единый семантический токен --font-size-logo-caption с адаптивным размером 11,5–12 px. Бренды не разрываются внутри слова; составные названия переносятся по пробелу. Не переопределяйте размер локально в кейсах.

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

Для абзацев и списков внутри altprof-insights используются общие отступы. У каждого раздела и data-gallery должен быть собственный идентификатор. Подпись можно не выводить в галереях версий; текст для лайтбокса задаётся через data-lightbox-caption. Русская версия задаёт структуру; EN и SR собираются из неё командой python tools/sync-portfolio.py --write.

Основные пункты используют токен --font-size-case-contents — 16 px. Связанные этапы сценария объединяйте через .case-contents__group: светлая подпись объясняет логику группы, линия остаётся фоном, а каждый пункт отмечается отдельной точкой. Активный этап отличается тёмным маркером и более контрастным текстом.

Используйте горизонтальный lockup из официального знака и полного названия. В спокойном состоянии весь элемент имеет --opacity-brand-muted; при наведении — --opacity-brand-active. Знак и название меняют тон одновременно, а длительность движения --motion-marquee-duration компенсирует увеличенную ширину элементов.