# Дизайн-система редизайна (`*-md`-блоки)

Единые правила для блоков главной, переверстанных в стиле `../mebel-landing`
(тёплая палитра, Fraunces + Manrope). Цель — держать все `.md-*`-блоки
консистентными: одна палитра, одна типо-шкала, один вертикальный ритм.

> Это не «блок», а сквозной справочник. Поэтому у файла **нет** frontmatter
> `redesign_status:` / `framework:` — иначе он попал бы в счётчики блоков в
> [README](README.md).

## Токены — `src/client/_md-tokens.scss`

**Единый источник правды** для палитры и общих примитивов всех `*-md`-блоков.
Раньше значения дублировались в каждом модуле своими переменными
(`$md-hero-accent`, `$md-cat-accent`, `$md-tg-accent`…) — при смене бренда
пришлось бы править ~10 файлов. Теперь все модули используют токены отсюда
напрямую.

Подключается в `src/client/index.scss` **сразу после `./global` и ДО импортов
`*-md`-модулей** — node-sass использует глобальный scope `@import`, поэтому
переменные видны во всех блоках, импортированных ниже.

| Токен | Значение | Назначение |
|---|---|---|
| `$md-bg` | `#faf6f3` | тёплый фон секций/карточек |
| `$md-ink` | `#1e1414` | основной текст/заголовки |
| `$md-ink-soft` | `#5b4848` | вторичный текст |
| `$md-line` | `#e8d9d9` | хайрлайн-бордеры |
| `$md-accent` | `#883737` | акцент (hover, eyebrow, CTA) |
| `$md-accent-dark` | `#4d1616` | тёмный акцент (заливка кнопок, тени) |
| `$md-accent-soft` | `#faeded` | подложка eyebrow/hover |
| `$md-ease` | `cubic-bezier(0.32, 0.72, 0, 1)` | общий easing анимаций |

**Правила:**

- Новые `*-md`-блоки — только через эти токены, **не хардкодить hex**. Локальные
  `$md-<block>-*`-переменные больше не заводим.
- Менять бренд/палитру — правкой **одного** файла `_md-tokens.scss`.
- node-sass даёт **hard-fail** на неопределённой переменной, поэтому опечатка в
  имени токена ловится сборкой (`pnpm run build`), а не проявляется в рантайме.
- Токены `bg` (`color3=4D1616` = `$md-accent-dark`) прокидываются и в конфиг
  VK-виджета — см. [vk-widget](main-page/vk-widget.md).

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

Шрифты подключены `<link>` в `views/layouts/main.php`.

- **Заголовки секций** (`h2.md-*__title`) — `Fraunces`, `clamp(1.8rem, 3.4vw,
  2.75rem)`, `line-height: 1.1`, `letter-spacing: -0.02em`, `text-transform:
  none`. Одинаковы у adv / catalog / tags / showcase / factory / vk.
- **Hero-заголовок** (`.md-hero__title`) — крупнее осознанно: `clamp(2.2rem,
  4.6vw, 3.6rem)`, `line-height: 1.05`. Это акцент первого экрана.
- **Eyebrow** (`.md-*__eyebrow`) — `Manrope`, `0.72rem`, `letter-spacing:
  0.14em`, `uppercase`, вес 600, pill-подложка `$md-accent-soft` / текст
  `$md-accent`, `padding: 0.35rem 0.85rem`, **`margin-bottom: 1rem`** (у всех
  блоков, включая hero).
- **Текст/лиды** — `Manrope`.

## Вертикальный ритм секций

- Базовый шаг между блоками — **`my-5`** (BS4 = 3rem сверху/снизу). На нём сидят
  stats, advantage, catalog, tags, showcase, feedback, factory, vk.
- Отступ **«заголовок секции → контент»** (`.md-*__head { margin-bottom }`) —
  **`2.5rem`** у всех секций.
- Интро главной (кнопка «Все акции» + `h1`) осознанно плотнее — это шапка
  страницы, а не блок в общем потоке; `h1 mb-5` совпадает с `my-5` следующего
  блока.

## Подзаголовок секции (subtitle) — опциональный паттерн

**Решение (2026-07-11):** подзаголовок под `h2` — **опциональный** элемент,
добавляется только там, где он несёт смысл, а не для симметрии.

- Есть у **hero** (лид-абзац первого экрана, `clamp(1rem, 1.4vw, 1.15rem)`) и
  **catalog** (описание раздела «Наш торговый павильон», `clamp(0.98rem, 1.3vw,
  1.1rem)`).
- Остальным секциям (tags, showcase, factory, vk) подзаголовок **не нужен** —
  заголовок самодостаточен. Отсутствие subtitle у них — это не дефект
  консистентности, а сознательный выбор.
- Размеры hero- и catalog-subtitle различаются намеренно: у hero это крупный
  лид, у catalog — компактный дескриптор секции.

## Модальные окна — общий скин `src/client/_md-modal.scss`

**Единый вид для всех theme-specific модалок** (стиль mebel-landing поверх
стандартной Bootstrap-модалки — механику show/hide BS не трогаем). Подключается
в `index.scss` сразу после `./md-tokens` и **до** модульных стилей модалок.

Классы-примитивы (применяются на BS-разметку модалки):

| Класс | Назначение |
|---|---|
| `.md-modal-dialog` | на `.modal-dialog` — ширина до `520px` |
| `.md-modal` | на `.modal-content` — карточка `#fff`, radius `24px`, `$md-line`, тень |
| `.md-modal__close` | круглый крестик top-right (перебивает BS `.close`) |
| `.md-modal__head` / `__eyebrow` / `__title` / `__subtitle` | шапка: pill + `Fraunces` + `Manrope`-лид |
| `.md-modal__input` | поле ввода (фон `$md-bg`, focus → акцент + `box-shadow`) |
| `.md-modal__check` / `__check-input` / `__check-text` | кастомный чекбокс (native `appearance:none` + SVG-галочка) |
| `.md-modal__note` / `.md-modal__foot` | сноска обязательных полей / контейнер CTA |

Специфику контента модалки держим в её собственном модуле:
[modal-location](layout/modal-location.md) (поиск + список городов) и
[modal-quick-buy](product/modal-quick-buy.md) (карточка товара + форма). Новую
модалку начинаем с этих `.md-modal*`-классов, а не с нуля — так они остаются
консистентными между собой.

## Чек-лист для нового `*-md`-блока

1. Цвета/easing — только токены из `_md-tokens.scss`.
2. `h2.md-*__title` и `.md-*__eyebrow` — по значениям из раздела «Типографика».
3. Секция — обёртка `my-5`; `.md-*__head { margin: 0 auto 2.5rem; max-width:
   640px; text-align: center; }`.
4. Subtitle — только если реально поясняет; размер по образцу catalog.
5. `prefers-reduced-motion` — гасить transform/анимации.
6. Проверить `pnpm run build` (зелёный = все токены зарезолвились).