# DP Trade — Site UI Kit

Единый 11ty-проект для сайта, UI-kit и дизайн-системы DP Trade.

## Текущее состояние

- Источник правды: `src/`.
- Сборка: Eleventy пишет результат в `_site/`.
- Активная дизайнерская доработка: переключаемая версия `V2`, подключенная поверх базового `site.css` через `src/css/v2.css`.
- `V1` сохранен как исходная версия для сравнения.
- `V2` включает обновленную премиальную палитру, Cormorant Garamond + Manrope, легкие Cormorant `400/500`, переработанные карточки, mega-menu, footer, контакты и часть product/about-паттернов.
- Подробный аудит и статусы: `docs/design-audit-followup.md`.

## Структура

- `src/*.njk` — исходные страницы.
- `src/_includes/layouts/` — базовые layout-шаблоны.
- `src/_includes/partials/` — header/footer.
- `src/css/tokens.css` — шрифты, цвета, базовые дизайн-токены.
- `src/css/site.css` — базовая V1-верстка сайта.
- `src/css/v2.css` — V2-оверрайды по дизайнерскому аудиту.
- `src/css/ui-kit.css` — стили витрины UI-kit.
- `src/js/design-switcher.js` — переключение `V1/V2` через `localStorage`.
- `src/js/inspector.js` — вспомогательный инспектор.
- `src/fonts/` — шрифты, которые попадают в сборку.
- `src/assets/` — изображения и локальные медиа.
- `_site/` — результат сборки, не коммитится.
- `docs/` — проектные документы, аудит, handoff.

## Как смотреть

```bash
npm run build
npm run dev
```

После `npm run dev` Eleventy поднимет локальный сервер. Для статической проверки можно открыть файлы из `_site/`.

Переключатель `V1/V2` есть в header и на странице `ui-kit.html`. Выбранная версия сохраняется в `localStorage` под ключом `dp-design-version`.

## Основные страницы

- `index.html` — главная: hero, producers, news, recommendations.
- `catalog.html` — пример каталога.
- `product.html` — пример страницы продукта, включая V2-only breadcrumbs.
- `product-card-white.html` — варианты карточек на белом фоне.
- `bottle-cards.html` — лаборатория карточек бутылок.
- `about.html` — страница о компании.
- `contacts.html` — контакты и форма.
- `contacts-auth.html` — вариант контактов с auth-gate.
- `news-villa-raiano.html` и `news-villa-raiano-v2.html` — редакционные страницы.
- `article-guidelines.html` — гайд по статьям.
- `ui-kit.html` — витрина дизайн-системы.

## Что уже решено

- Внедрен 11ty pipeline с passthrough для `src/css`, `src/js`, `src/fonts`, `src/assets`.
- Добавлена V2-версия дизайна без удаления V1.
- Подключены настоящие Cormorant Garamond `400/500` (`CormorantGaramond-Regular.woff2`, `CormorantGaramond-Medium.woff2`).
- В V2 обновлены основные токены: бордовый `#7D021D`, теплый фон `#FFFDFA`, карточный фон `#F5F0E8`, Cormorant Garamond + Manrope.
- В V2 облегчены Cormorant-заголовки, карточки товара, section headings, footer и mega-menu.
- В V2 добавлены breadcrumbs для product, split contact fields и success-state формы.
- Последняя проверенная сборка: `npm run build`.

## Что осталось

- Визуально проверить `V2` на desktop/tablet/mobile: `index`, `catalog`, `product`, `about`, `contacts`, `ui-kit`.
- Довести product content model: расширенное описание, реальные характеристики, финальная композиция price/CTA.
- Решить, нужно ли переносить V2-токены непосредственно в `src/css/ui-kit.css`, или достаточно текущего `v2.css` override.
- Дооформить production-сценарии: catalog pagination, 404, cookie/privacy, реальные form validation states, auth routes.

## Правило организации

В проекте должен быть один Git-репозиторий на уровне этой папки. Исходники живут в `src/`; корневые HTML-файлы и `_site/` считаются артефактами сборки/миграции, а не источником правды.

## Naming

Для дизайн-системы используется формат:

```txt
[Category] / [Type] / [Variant] / [State]
```

Примеры:

```txt
Button / Primary / Default
Card / Product / Hover
Nav / Header / Desktop
```