/* Контентная типографика WowVendor — ГЛОБАЛЬНЫЙ СЛОЙ (не компонент и не блок).
Подключается рядом с tokens.css:
ИСТОЧНИКИ (Figma «🚧 Design System 2.0», P6cIX4bYZRbWPcXtA2i2EQ):
┌───────────────┬────────────────────────────────────────────────────────┐
│ 7063:550 │ Hierarchy Text — desktop: шкала H1…H6 и отступы │
│ 7063:907 │ Hierarchy Page — mobile (384): та же иерархия, уже │
│ 11880:675 │ Bulleted List — маркированный, 3 уровня │
│ 11880:988 │ Numbered List — нумерованный, составные номера │
│ 12934:19640 │ «1 способ» — контент карточки товара (профиль compact) │
└───────────────┴────────────────────────────────────────────────────────┘
МОДЕЛЬ РИТМА — ПАДДИНГИ, НЕ МАРГИНЫ.
В Figma вертикальный ритм собран паддингами обёрток auto-layout, а зазоры
получаются сложением соседних. Здесь то же самое: весь ритм — padding-top
на ПОСЛЕДУЮЩЕМ элементе (`* + *`). Отсюда: нет схлопывания маргинов, нет
правил под :first-child, любой блок можно вырезать или переставить — ритм
не поедет. Первый элемент .prose всегда прижат к верху обёртки.
ПРОФИЛИ.
Шкала и три числа ритма вынесены в переменные. Профиль = набор значений,
а не отдельный набор правил. Их три:
.prose — иерархия документа, desktop (7063:550)
@container ≤767 — та же иерархия, mobile (7063:907)
.prose--compact — контент карточки товара (12934:19640)
Добавить четвёртый = добавить блок переменных, правила не трогаются.
СПЕЦИФИЧНОСТЬ.
Теги завёрнуты в :where() → нулевой вклад. Любой utility-класс
(.text-display-24) и любой класс блока (.hero__title) перебивают этот слой
без !important. Внутри слоя приоритет решает ПОРЯДОК правил, не вес. */
/* ==========================================================================
ПРОФИЛЬ ПО УМОЛЧАНИЮ — иерархия документа, desktop (7063:550)
========================================================================== */
.prose {
/* Шкала заголовков. Все Display-стили в токенах имеют weight 600, поэтому
на вес хватает одной переменной вместо шести. */
--prose-heading-weight: var(--text-display-36-weight);
--prose-h1-size: var(--text-display-36-size);
--prose-h1-line-height: var(--text-display-36-line-height);
--prose-h2-size: var(--text-display-28-size);
--prose-h2-line-height: var(--text-display-28-line-height);
--prose-h3-size: var(--text-display-24-size);
--prose-h3-line-height: var(--text-display-24-line-height);
--prose-h4-size: var(--text-display-20-size);
--prose-h4-line-height: var(--text-display-20-line-height);
--prose-h5-size: var(--text-display-18-size);
--prose-h5-line-height: var(--text-display-18-line-height);
--prose-h6-size: var(--text-display-16-size);
--prose-h6-line-height: var(--text-display-16-line-height);
/* Отступ ОТ заголовка ДО того, что под ним. Зависит от уровня. */
--prose-gap-h1: var(--spacing-32);
--prose-gap-h2: var(--spacing-24);
--prose-gap-h3: var(--spacing-20);
--prose-gap-h4: var(--spacing-16);
--prose-gap-h5: var(--spacing-12);
--prose-gap-h6: var(--spacing-8);
/* Три числа ритма. */
--prose-flow: var(--spacing-16); /* между двумя обычными блоками */
--prose-section: var(--spacing-60); /* от блока ДО следующего заголовка */
/* Маркер списка: круг 8×8, до текста 12, левый отступ списка 8, вложенность
+16 на уровень. Все — из 11880:675. */
--prose-marker-size: var(--spacing-8);
--prose-marker-gap: var(--spacing-12);
--prose-list-offset: var(--spacing-8);
--prose-list-indent: var(--spacing-16);
--prose-list-flow: var(--spacing-8); /* между пунктами */
--prose-list-flow-top: var(--spacing-16); /* между группами L1 */
font-family: var(--font-family-base);
color: var(--color-gray-700);
}
/* Контейнер, от ширины которого зависит шкала, — ОБЁРТКА СТРАНИЦЫ, а не сама
колонка текста. Это принципиально: колонка контента даже на десктопе всего
616–680px, то есть заведомо уже брейкпоинта 768, и container query на .prose
давал бы мобильную шкалу всегда. Обёртку объявляет страница или блок:
… … …
Нет обёртки — работает десктопный профиль (безопасное умолчание). */
.prose-page {
container-type: inline-size;
container-name: prose-page;
}
/* --------------------------------------------------------------------------
РИТМ. Три правила, одинаковая специфичность — приоритет по порядку:
базовый зазор → блок перед заголовком → блок после заголовка.
-------------------------------------------------------------------------- */
.prose > * + * {
padding-top: var(--prose-flow);
}
.prose > * + :where(h1, h2, h3, h4, h5, h6) {
padding-top: var(--prose-section);
}
/* Заголовок задаёт отступ до СЛЕДУЮЩЕГО элемента — включая случай, когда
следующий сам заголовок (подзаголовок жмётся к заголовку, а не отбивается
на --prose-section). */
.prose > :where(h1) + * { padding-top: var(--prose-gap-h1); }
.prose > :where(h2) + * { padding-top: var(--prose-gap-h2); }
.prose > :where(h3) + * { padding-top: var(--prose-gap-h3); }
.prose > :where(h4) + * { padding-top: var(--prose-gap-h4); }
.prose > :where(h5) + * { padding-top: var(--prose-gap-h5); }
.prose > :where(h6) + * { padding-top: var(--prose-gap-h6); }
/* --------------------------------------------------------------------------
БЛОКИ
-------------------------------------------------------------------------- */
.prose :where(h1, h2, h3, h4, h5, h6) {
margin: 0;
font-family: var(--font-family-base);
font-weight: var(--prose-heading-weight);
color: var(--color-gray-900);
/* Inter в браузере на крупном кегле уже, чем в Figma, — гасим оптическую ось. */
font-optical-sizing: none;
}
.prose :where(h1) { font-size: var(--prose-h1-size); line-height: var(--prose-h1-line-height); }
.prose :where(h2) { font-size: var(--prose-h2-size); line-height: var(--prose-h2-line-height); }
.prose :where(h3) { font-size: var(--prose-h3-size); line-height: var(--prose-h3-line-height); }
.prose :where(h4) { font-size: var(--prose-h4-size); line-height: var(--prose-h4-line-height); }
.prose :where(h5) { font-size: var(--prose-h5-size); line-height: var(--prose-h5-line-height); }
.prose :where(h6) { font-size: var(--prose-h6-size); line-height: var(--prose-h6-line-height); }
.prose :where(p) {
margin: 0;
font-size: var(--text-body-16-size);
line-height: var(--text-body-16-line-height);
font-weight: var(--text-body-16-weight);
color: var(--color-gray-700);
}
.prose :where(a) {
color: var(--color-accent-400);
font-weight: var(--text-body-16m-weight);
text-decoration: none;
}
.prose :where(strong, b) {
font-weight: var(--text-body-16m-weight);
color: var(--color-gray-900);
}
/* --------------------------------------------------------------------------
СПИСКИ (11880:675, 11880:988)
Пункт — grid: колонка маркера + колонка текста. Вложенный список кладётся
на обе колонки, поэтому его отступ (--prose-list-indent) считается ОТ
маркера родителя, а не от текста — ровно как во фреймах Figma.
-------------------------------------------------------------------------- */
.prose :where(ul, ol) {
margin: 0;
padding: 0;
list-style: none;
color: var(--color-gray-900);
font-size: var(--text-body-16-size);
line-height: var(--text-body-16-line-height);
font-weight: var(--text-body-16-weight);
}
.prose :where(ul) { padding-left: var(--prose-list-offset); }
.prose :where(li) + :where(li) { padding-top: var(--prose-list-flow); }
.prose > :where(ul, ol) > :where(li) + :where(li) { padding-top: var(--prose-list-flow-top); }
.prose :where(li) > :where(ul, ol) {
padding-top: var(--prose-list-flow);
padding-left: var(--prose-list-indent);
}
/* Маркированный: круг accent-400. Третий уровень — кольцо (обводка 2px,
центр прозрачный) и текст gray-700. */
.prose :where(ul) > :where(li) {
display: grid;
grid-template-columns: var(--prose-marker-size) 1fr;
column-gap: var(--prose-marker-gap);
}
.prose :where(ul) > :where(li)::before {
content: "";
width: var(--prose-marker-size);
height: var(--prose-marker-size);
border-radius: 50%;
background: var(--color-accent-400);
/* Центрируем маркер в строке 24px: (24 − 8) / 2. */
margin-top: var(--spacing-8);
}
.prose :where(li) > :where(ul, ol) { grid-column: 1 / -1; }
.prose :where(li li li) {
color: var(--color-gray-700);
}
.prose :where(ul) :where(li li li)::before {
background: transparent;
box-shadow: inset 0 0 0 2px var(--color-accent-400);
}
/* Нумерованный: колонки маркера нет, номер идёт частью строки. Номера
составные — 1. / 1.1. / 1.1.1. — считает CSS, в разметке их не пишем. */
.prose :where(ol) {
counter-reset: prose-ol;
}
.prose :where(ol) > :where(li) {
display: block;
counter-increment: prose-ol;
}
.prose :where(ol) > :where(li)::before {
content: counters(prose-ol, ".") ". ";
}
/* ==========================================================================
МОБИЛЬНЫЙ ПРОФИЛЬ — та же иерархия, шкала на ступень ниже (7063:907)
@container, не @media: @media внутри блока ломает compare.mjs (см. CLAUDE.md)
— он снимает страницу в окне 1280 и подменил бы мобильный вариант блока
десктопной шкалой. Запрос идёт к .prose-page — обёртке страницы или блока.
Число 767 — активная точка перелома из grid.css; var() в условии @container
не работает, это ограничение CSS.
Переменные переопределяем на детях .prose: правила ритма читают их с самих
элементов, а потомки (списки) наследуют дальше.
========================================================================== */
@container prose-page (max-width: 767px) {
.prose > * {
--prose-h1-size: var(--text-display-24-size);
--prose-h1-line-height: var(--text-display-24-line-height);
--prose-h2-size: var(--text-display-22-size);
--prose-h2-line-height: var(--text-display-22-line-height);
--prose-h3-size: var(--text-display-20-size);
--prose-h3-line-height: var(--text-display-20-line-height);
--prose-h4-size: var(--text-display-18-size);
--prose-h4-line-height: var(--text-display-18-line-height);
--prose-h5-size: var(--text-display-16-size);
--prose-h5-line-height: var(--text-display-16-line-height);
--prose-h6-size: var(--text-display-14-size);
--prose-h6-line-height: var(--text-display-14-line-height);
--prose-gap-h1: var(--spacing-20);
--prose-gap-h2: var(--spacing-16);
--prose-gap-h3: var(--spacing-16);
--prose-gap-h4: var(--spacing-12);
--prose-gap-h5: var(--spacing-8);
--prose-gap-h6: var(--spacing-8);
--prose-section: var(--spacing-40);
}
}
/* ==========================================================================
ПРОФИЛЬ COMPACT — контент карточки товара, колонка 680 (12934:19640)
Там H1 живёт в шапке карточки, а внутри контента иерархия начинается с H2 и
вся шкала сдвинута вниз. Ритм задан обёртками 12/12 у блоков и 28/0 у
заголовков, отсюда: блок→блок 24, заголовок→блок 12, блок→заголовок 40.
Идёт ПОСЛЕ мобильного @container намеренно: мобильной ноды для этого
шаблона в Figma нет, поэтому compact держит свою шкалу на любой ширине.
Появится нода — сюда добавится свой @container.
========================================================================== */
.prose--compact > * {
--prose-h2-size: var(--text-display-20-size);
--prose-h2-line-height: var(--text-display-20-line-height);
--prose-h3-size: var(--text-display-18-size);
--prose-h3-line-height: var(--text-display-18-line-height);
--prose-h4-size: var(--text-display-16-size);
--prose-h4-line-height: var(--text-display-16-line-height);
--prose-gap-h2: var(--spacing-12);
--prose-gap-h3: var(--spacing-12);
--prose-gap-h4: var(--spacing-12);
--prose-flow: var(--spacing-24);
--prose-section: var(--spacing-40);
}