diff --git a/.claude/launch.json b/.claude/launch.json
index 068cf37..30063b4 100644
--- a/.claude/launch.json
+++ b/.claude/launch.json
@@ -4,8 +4,9 @@
{
"name": "11ty dev server (live reload)",
"runtimeExecutable": "npm",
- "runtimeArgs": ["run", "dev"],
- "port": 8080
+ "runtimeArgs": ["run", "dev", "--", "--port=8088"],
+ "port": 8088,
+ "autoPort": false
},
{
"name": "Python HTTP Server (_site)",
diff --git a/.claude/settings.local.json b/.claude/settings.local.json
new file mode 100644
index 0000000..f758531
--- /dev/null
+++ b/.claude/settings.local.json
@@ -0,0 +1,16 @@
+{
+ "permissions": {
+ "allow": [
+ "mcp__Claude_Preview__preview_start",
+ "Bash(npm run *)",
+ "Bash(curl -sLo logo-dp-trade.png \"https://wine-dp-trade.ru/wp-content/uploads/2024/11/logo-500x107.png\")",
+ "Bash(curl -sLo hero-main.jpg \"https://images.unsplash.com/photo-1560493676-04071c5f467b?auto=format&fit=crop&w=1800&q=82\")",
+ "Bash(curl -sLo vineyard-hills.jpg \"https://images.unsplash.com/photo-1506377247377-2a5b3b417ebb?auto=format&fit=crop&w=1800&q=82\")",
+ "Bash(curl -sLo news-catena.jpg \"https://images.unsplash.com/photo-1556760544-74068565f05c?auto=format&fit=crop&w=900&q=80\")",
+ "Bash(curl -sLo news-italy.jpg \"https://images.unsplash.com/photo-1528823872057-9c018a7a7553?auto=format&fit=crop&w=900&q=80\")",
+ "Bash(awk '{print $5, $9}')",
+ "Bash(curl -sLo /Users/lexx/Projects/2026/dp-trade-UI-kit/src/js/analytics.js \"https://metrika.in20.ru/js/pa-LKQHOT3En5k9NYpn80cYX.js\")",
+ "Bash(python3 -c \"import json,sys; d=json.load\\(sys.stdin\\); print\\(json.dumps\\(d.get\\('scripts',{}\\),indent=2\\)\\); print\\('deps:',list\\(d.get\\('dependencies',{}\\).keys\\(\\)\\)\\); print\\('devDeps:',list\\(d.get\\('devDependencies',{}\\).keys\\(\\)\\)\\)\")"
+ ]
+ }
+}
diff --git a/.gitignore b/.gitignore
index 5281e8f..ca182e4 100644
--- a/.gitignore
+++ b/.gitignore
@@ -3,3 +3,6 @@ node_modules/
dist/
_site/
.env
+
+# Корневые HTML-файлы — артефакты до миграции на 11ty, источник правды — src/*.njk
+/*.html
diff --git a/.nova/Publishing/REG.RU hosting.json b/.nova/Publishing/REG.RU hosting.json
index baaa5ad..93164a7 100644
--- a/.nova/Publishing/REG.RU hosting.json
+++ b/.nova/Publishing/REG.RU hosting.json
@@ -1,7 +1,7 @@
{
"identifier" : "39856AD9-BD44-4500-B03F-EDFAE2A870CB",
"localPath" : "_site",
- "remotePath" : "\/www\/vodkainmyblood.com\/wine-proto",
+ "remotePath" : "\/www\/wine-proto.vodkainmyblood.com",
"remoteURL" : "wine-proto.vodkainmyblood.com",
"server" : "REG.RU hosting",
"usesPublishing" : true
diff --git a/CLAUDE.md b/CLAUDE.md
index b07a785..eb1ed31 100644
--- a/CLAUDE.md
+++ b/CLAUDE.md
@@ -10,27 +10,32 @@ This file provides guidance to Claude Code (claude.ai/code) when working with co
Static HTML/CSS UI-kit and page prototypes for **DP Trade** — a B2B wine wholesale catalog (wine-dp-trade.ru). The output of this project is handed off to **WordPress/Elementor** for production deployment. See `docs/elementor-token-handoff.md` for the full Elementor migration guide.
+Design audit and V2 requirements are documented in `docs/design-audit-followup.md`.
+
## Commands
```bash
-# Dev server (11ty with live reload)
-npm run dev # http://localhost:8080
+# Dev server (11ty with live reload) — port 8088 per .claude/launch.json
+npm run dev
# Production build → _site/
npm run build
```
-Dev server config is also saved in `.claude/launch.json` for use with `preview_start`.
+Dev server config is saved in `.claude/launch.json` for use with `preview_start`. The named config is `"11ty dev server (live reload)"` on port 8088.
+
+No test or lint tooling exists — the only npm scripts are `dev` and `build`, and the sole dependency is `@11ty/eleventy`. `npm run dev` runs `eleventy --serve`; the port is not hardcoded in the script and comes from `.claude/launch.json` (8088). Eleventy config lives in `.eleventy.js` (ESM `export default`).
## Architecture
### CSS layer (single dependency direction)
```
-css/tokens.css ← design tokens only (colors, fonts, spacing, radius, shadows)
- ↓
-css/site.css ← all page styles, imports tokens.css
-css/ui-kit.css ← design system showcase styles, standalone
+src/css/tokens.css ← design tokens only (colors, fonts, spacing, radius, shadows)
+ ↓
+src/css/site.css ← all page styles (references ../assets/images/ for backgrounds)
+src/css/ui-kit.css ← design system showcase, standalone
+src/css/v2.css ← V2 design overrides, loaded on every page after site.css
```
Never put visual styles in `tokens.css`. Never import `site.css` into `ui-kit.css`.
@@ -41,60 +46,99 @@ Never put visual styles in `tokens.css`. Never import `site.css` into `ui-kit.cs
src/
_includes/
layouts/
- base.njk ← HTML shell: , fonts, CSS link,
- default.njk ← base + header partial + footer partial (used by all site pages)
- ui-kit.njk ← base only, no header/footer (used by ui-kit page)
+ base.njk ← HTML shell: , CSS links, analytics, design-switcher.js
+ default.njk ← base + header + footer (used by all site pages)
+ ui-kit.njk ← base only, no header/footer
partials/
- header.njk ← full site header with mega-menu nav
- footer.njk ← full site footer
- css/ ← passthrough copy → _site/css/
- assets/ ← passthrough copy → _site/assets/
+ header.njk ← mega-menu nav — edit here, propagates to all pages
+ footer.njk ← footer — edit here, propagates to all pages
+ css/ ← passthrough → _site/css/
+ js/ ← passthrough → _site/js/
+ assets/ ← passthrough → _site/assets/
+ fonts/ ← passthrough → _site/fonts/ (all WOFF2, local, no CDN)
*.njk ← one file per page
```
-### Page front matter
+### Pages
-Every page declares layout, title, optional bodyClass, and permalink:
+| Permalink | Source |
+|---|---|
+| `/` | `index.njk` |
+| `/catalog.html` | `catalog.njk` |
+| `/product.html` | `product.njk` |
+| `/about.html` | `about.njk` |
+| `/contacts.html` | `contacts.njk` |
+| `/contacts-auth.html` | `contacts-auth.njk` |
+| `/news-villa-raiano.html` | `news-villa-raiano.njk` |
+| `/news-villa-raiano-v2.html` | `news-villa-raiano-v2.njk` |
+| `/article-guidelines.html` | `article-guidelines.njk` |
+| `/bottle-cards.html` | `bottle-cards.njk` |
+| `/product-card-white.html` | `product-card-white.njk` |
+| `/ui-kit.html` | `ui-kit.njk` (layout: ui-kit, css: ui-kit) |
+
+Pages with `bodyClass: compact-type`: catalog, about, contacts, article-guidelines.
+
+### Page front matter
```yaml
---
title: "DP Trade — Catalog"
-layout: default # or "ui-kit" for the design system page
-bodyClass: compact-type # omit if not needed
-permalink: /catalog.html # keeps flat output, preserves relative CSS paths
+layout: layouts/default # or "layouts/ui-kit" for the design system page
+bodyClass: compact-type # omit if not needed
+permalink: /catalog.html # keeps flat output, preserves relative CSS paths
---
```
-Pages with `bodyClass: compact-type`: catalog, about, contacts, article-guidelines.
-The `ui-kit` page uses `layout: ui-kit` and `css: ui-kit` (links `ui-kit.css` instead of `site.css`).
-
### CSS paths
-All CSS and JS paths in `base.njk` are **relative** (`css/site.css`, `js/inspector.js`). This works both with the 11ty dev server and when opening `_site/` files directly via `file://`.
+All CSS, JS, and image paths in `base.njk` are **relative**. CSS background-images in `site.css` reference `../assets/images/` (relative to `_site/css/`). HTML templates reference `assets/images/` (relative to `_site/` root). This works with the 11ty dev server and when opening `_site/` via `file://`.
-### Design tokens
+All images and fonts are local — no external CDN dependencies.
-Key CSS custom properties defined in `css/tokens.css`:
+### Design tokens (V1 baseline)
+
+Key CSS custom properties in `src/css/tokens.css`:
- Colors: `--color-primary-wine-100` (#4b0f24), `--color-accent-gold` (#b9965b), `--color-accent-blue` (#1f3476)
- Fonts: `--font-heading` (Montserrat 800), `--font-body` (Inter), `--font-heading-classic` (Playfair Display)
- Container: `--container: 1240px`
-When adding new tokens, add to `tokens.css` and mirror to the Elementor CSS layer in `docs/elementor-token-handoff.md` (Section 6).
+When adding tokens, add to `tokens.css` and mirror to `docs/elementor-token-handoff.md` (Section 6).
+
+### V2 design system
+
+V2 is a progressive enhancement overlay triggered by `data-design-version="v2"` on ``. Preference is stored in `localStorage` (`dp-design-version`). The toggle button (`design-toggle__btn`) appears in the main nav and UI-kit sidebar.
+
+**How V2 works:**
+- `src/css/tokens.css` — overrides under `:root[data-design-version="v2"]`: burgundy `#7D021D`, warm bg `#FFFDFA`, card bg `#F5F0E8`, Cormorant Garamond + Manrope fonts
+- `src/css/v2.css` — scoped rules under `[data-design-version="v2"]` removing uppercase, reducing weights, styling breadcrumbs, outlined CTAs, editorial typography
+- `src/js/design-switcher.js` — applies the attribute on load and on toggle; also injects split phone/email fields and form success state on contacts page
+
+Breadcrumbs on `product.html` are static markup tagged `data-v2-only="breadcrumbs"` — hidden in V1 via CSS, no JS needed.
### Responsive breakpoints
-Defined at the bottom of `css/site.css`:
+Defined at the bottom of `src/css/site.css`:
- `@media (max-width: 1080px)` — tablet
- `@media (max-width: 720px)` — mobile
+### JS utilities
+
+| File | Purpose |
+|---|---|
+| `src/js/design-switcher.js` | V1/V2 toggle, localStorage persistence, V2 DOM enhancements |
+| `src/js/inspector.js` | Click-to-inspect overlay: shows computed styles and resolved design tokens (`--color-*`, `--font-*`, etc.) for any element. Toggle with Alt+I. |
+| `src/js/analytics.js` | Privacy-friendly Plausible analytics (local copy) |
+
## Key files
-| File | Purpose |
-| ----------------------------------- | ------------------------------------------------------------ |
-| `css/tokens.css` | Single source of truth for all design values |
-| `docs/elementor-token-handoff.md` | Guide for migrating tokens/components to WordPress Elementor |
-| `.claude/launch.json` | Dev server configurations |
-| `src/_includes/partials/header.njk` | Mega-menu navigation — edit here, propagates to all pages |
-| `src/_includes/partials/footer.njk` | Footer — edit here, propagates to all pages |
+| File | Purpose |
+|---|---|
+| `src/css/tokens.css` | Single source of truth for all design values |
+| `src/css/v2.css` | V2 editorial design overrides |
+| `docs/design-audit-followup.md` | Designer audit breakdown and V2 implementation plan |
+| `docs/elementor-token-handoff.md` | Migration guide to WordPress/Elementor |
+| `.claude/launch.json` | Dev server config for preview_start |
+| `src/_includes/partials/header.njk` | Mega-menu navigation |
+| `src/_includes/partials/footer.njk` | Site footer |
diff --git a/README.md b/README.md
index 62e99b1..5eb091d 100644
--- a/README.md
+++ b/README.md
@@ -1,23 +1,77 @@
# DP Trade — Site UI Kit
-Единый HTML/CSS проект для сайта и дизайн-системы DP Trade.
+Единый 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`.
## Структура
-- `index.html` — главная страница с меню, hero, карточками и футером.
-- `catalog.html` — пример страницы каталога.
-- `product.html` — пример страницы продукта.
-- `ui-kit.html` — живая витрина дизайн-системы.
-- `css/tokens.css` — дизайн-токены: цвета, шрифты, отступы, радиусы, тени.
-- `css/site.css` — общие стили сайта: header, menu, footer, cards, layouts.
-- `css/ui-kit.css` — стили страницы UI-kit.
-- `components/menu.html` — HTML-фрагмент меню.
-- `components/footer.html` — HTML-фрагмент футера.
-- `assets/images` и `assets/icons` — место для локальных изображений и иконок.
+- `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-репозиторий на уровне этой папки. Отдельные компоненты сайта живут внутри `components/`, а не как самостоятельные соседние проекты.
+В проекте должен быть один Git-репозиторий на уровне этой папки. Исходники живут в `src/`; корневые HTML-файлы и `_site/` считаются артефактами сборки/миграции, а не источником правды.
## Naming
@@ -34,7 +88,3 @@ Button / Primary / Default
Card / Product / Hover
Nav / Header / Desktop
```
-
-## Как смотреть
-
-Открой `index.html` или `ui-kit.html` напрямую в браузере. Сервер для текущей версии не нужен.
diff --git a/about.html b/about.html
deleted file mode 100644
index f7efd70..0000000
--- a/about.html
+++ /dev/null
@@ -1,55 +0,0 @@
-
-
-
-
- DP Trade — О компании
-
-
-
-
-
-
-
-
-
О компании
-
DP Trade — территория качественного вина
-
Импорт, каталог, персональная работа с клиентами, собственные склады в регионах и доставка собственным транспортом.
-
-
-
-
-
-
-
-
-
DP Trade развивает профессиональный винный каталог, где регионы, производители, партии и коммерческие условия собраны в едином интерфейсе для быстрых закупочных решений.
-
Главная ценность сервиса — соединить сильный ассортимент с понятной навигацией: от страны и апелласьона до конкретного производителя, винтажа и карточки товара.
-
Как устроен подход
-
Компания делает акцент на удобном каталоге, персональном отношении, собственных складских возможностях и доставке собственным транспортом. Для B2B-клиентов это значит меньше ручных уточнений и быстрее путь от выбора до заказа.
-
-
- 01
Удобный каталог
Фильтры по типу, региону, производителю, сорту, году, объему и стилю.
- 02
Персональный подход
Быстрая коммуникация с менеджером и подборки под формат клиента.
- 03
Склады в регионах
Инфраструктура для регулярных поставок и управления доступностью.
- 04
Собственная доставка
Контроль логистики и аккуратная работа с профессиональными заказами.
-
-
-
-
-
-
-
Portfolio
Винные дома и регионы
-
Страница показывает, как может выглядеть корпоративный раздел: спокойная подача, крупные тезисы и блок преимуществ без перегруза.
Требования к структуре материала, заголовкам, тексту и фотографиям для новостей, историй производителей и экспертных заметок.
-
-
-
-
-
-
-
-
- 01
-
Структура статьи
-
Каждый материал должен быстро отвечать на три вопроса: о ком/о чём статья, почему это важно для аудитории DP Trade и какое действие читатель может сделать дальше.
-
-
Заголовок: конкретный, с именем производителя, региона или события.
-
Лид: 1-2 предложения, раскрывает главный повод.
-
Основной текст: 3-5 смысловых блоков с подзаголовками или визуальными паузами.
-
Финал: вывод, рекомендация, ссылка в каталог или повод обратиться к менеджеру.
-
-
-
- 02
-
Заголовки
-
Заголовок должен быть редакционным, но полезным: не только красивым, а ещё и объясняющим тему.
-
-
Оптимально: 55-90 символов.
-
Использовать имена: Villa Raiano, Gaja, Bordeaux, Fiano.
-
Избегать пустых формул: «уникальная история», «легендарное событие» без факта.
-
Подзаголовки должны вести читателя по смыслу, а не повторять заголовок.
-
-
-
- 03
-
Текст
-
Стиль: профессиональный, спокойный, без рекламного нажима. Пишем для закупщиков, сомелье, ресторанов и розницы.
-
-
Абзац: 350-650 знаков.
-
Лид: до 280 знаков.
-
Новость: 3 000-5 500 знаков.
-
История производителя: 5 000-8 000 знаков.
-
Цифры, годы, награды и сорта проверять отдельно.
-
-
-
- 04
-
Фотографии
-
Фотографии должны показывать реальный продукт, место, людей или процесс. Лучше меньше декоративности и больше конкретики.
-
-
Hero: горизонтальное фото от 1600px по ширине.
-
Внутренние фото: от 1200px, без сильной компрессии.
-
Для карточек: предмет или бутылка должны быть читаемы на мобильном.
-
Не использовать тёмные, размытые, случайно обрезанные изображения.
-
Обязательно писать alt: кто/что изображено и где.
-
-
-
- 05
-
Композиция
-
Для длинной статьи нужны визуальные паузы: крупное фото после лида, цитата или факт-блок в середине и финальный акцент.
-
-
Не ставить подряд больше 4 текстовых абзацев без паузы.
-
Цитаты использовать только если они усиливают материал.
-
Сайдбар может содержать факты: страна, регион, сорт, год, награда.
-
Финальный CTA должен быть связан с каталогом или менеджером.
-
-
-
- 06
-
SEO и handoff
-
Материал должен быть понятен поиску и разработке: один H1, последовательные H2, корректные alt и прозрачная структура блоков.
-
-
Title: до 60 символов, включает бренд или тему.
-
Description: 140-160 символов.
-
URL: латиница, короткий slug.
-
Изображения называть по смыслу, а не `photo-final-2`.
-
В CMS хранить дату, автора/раздел, теги и связанные товары.
-
-
-
-
-
-
-
-
-
Pre-publish checklist
-
Проверка перед публикацией
-
-
-
Заголовок отражает конкретный повод и не звучит как реклама.
-
В лиде понятна ценность материала для профессиональной аудитории.
-
Все годы, имена, апелласьоны и награды проверены.
-
Есть минимум 2-4 качественные фотографии с alt-текстами.
-
Финал ведёт к каталогу, производителю, товару или контакту с менеджером.
Удобно для запросов прайса, карточек производителей и B2B-документов.
-
-
- Юридическая информация
-
Интернет-витрина размещает информацию об алкогольной продукции исключительно в ознакомительных целях. Дистанционная продажа алкогольной продукции не осуществляется.
-
-
-
-
Требуется аккаунт
-
Заявка доступна после входа
-
Мы показываем телефон и email открыто, но форму заявки менеджеру оставляем внутри личного кабинета: так менеджер сразу видит компанию, историю запросов и коммерческий статус клиента.
Удобно для запросов прайса, карточек производителей и B2B-документов.
-
-
- Юридическая информация
-
Интернет-витрина размещает информацию об алкогольной продукции исключительно в ознакомительных целях. Дистанционная продажа алкогольной продукции не осуществляется.
-
-
-
-
-
-
-
-
-
-
-
-
diff --git a/css/tokens.css b/css/tokens.css
index 7acb191..158d7be 100644
--- a/css/tokens.css
+++ b/css/tokens.css
@@ -1,3 +1,19 @@
+/* full family */
+@font-face {
+ font-family: 'Cormorant Garamond';
+ font-style: normal;
+ font-weight: 400;
+ font-display: swap;
+ src: url('../fonts/CormorantGaramond-Regular.woff2') format('woff2');
+}
+/* full family */
+@font-face {
+ font-family: 'Cormorant Garamond';
+ font-style: normal;
+ font-weight: 500;
+ font-display: swap;
+ src: url('../fonts/CormorantGaramond-Medium.woff2') format('woff2');
+}
/* cyrillic-ext */
@font-face {
font-family: 'Cormorant Garamond';
diff --git a/docs/design-audit-followup.md b/docs/design-audit-followup.md
index 63a9cc9..b8109cf 100644
--- a/docs/design-audit-followup.md
+++ b/docs/design-audit-followup.md
@@ -9,6 +9,48 @@
Часть аудита уже не полностью совпадает с текущей реализацией: на главной CTA в hero присутствуют (`Смотреть каталог`, `Открыть UI-kit`), а заголовки в исходных HTML не набраны капсом руками. Но CSS принудительно включает uppercase и тяжелый вес, поэтому визуально замечание дизайнера остается актуальным.
+## Статус проекта - 2026-05-19
+
+Кодовая база сейчас находится в состоянии V1 + переключаемый V2. Источник правды - `src/`, сборка идет через Eleventy в `_site/`. Основные дизайнерские замечания закрыты в V2: обновлены токены, подключены легкие Cormorant `400/500`, снижена жирность Cormorant, переработаны карточки товара, section headings, mega-menu, footer, контакты и product breadcrumbs. V1 остается для сравнения и не считается финальным направлением.
+
+Открытые задачи: визуальный QA V2 на desktop/tablet/mobile, финальная продуктовая модель и расширенное описание товара, проверка плотных catalog list-cards, перенос V2-токенов в Elementor-документ/production handoff, production-блоки вроде pagination, 404, cookie/privacy и полноценной form validation.
+
+## Статус проверки кода - 2026-04-23
+
+Важно: исправления внедрены как переключаемая версия V2, а не как замена V1. В `src/_includes/layouts/base.njk` подключен `css/v2.css`, `src/js/design-switcher.js` переключает `data-design-version="v1|v2"` через `localStorage`, а переключатели есть в header и UI-kit. По умолчанию без сохраненного выбора открывается V1, поэтому статусы ниже означают "исправлено в V2".
+
+| Блок | Статус | Что найдено в коде |
+| --- | --- | --- |
+| Механика V2 | [done] исправлено | Добавлены `src/css/v2.css`, `src/js/design-switcher.js`, переключатели V1/V2 в `src/_includes/partials/header.njk` и `src/ui-kit.njk`. |
+| Системные токены | [done] исправлено в V2 | В `src/css/tokens.css` для `:root[data-design-version="v2"]` заданы `#7D021D`, `#FFFDFA`, `#F5F0E8`, Cormorant Garamond и Manrope. |
+| UI-kit токены | [partial] частично | `src/css/ui-kit.css` все еще содержит старые V1-токены, но V2-override подключается после него через `src/css/v2.css`. Для полной чистоты можно синхронизировать сам `ui-kit.css`. |
+| Типографика и uppercase | [done] исправлено в V2 | `src/css/v2.css` снимает uppercase с H1-H4, hero, карточек, page hero, формы и снижает веса заголовков. Caps оставлен для meta/eyebrow. |
+| Минимальный размер 8px | [done] исправлено в V2 | `.brand-logo small` поднят до 12px в `src/css/v2.css`. |
+| Палитра и синий телефон | [done] исправлено в V2 | В V2 синий акцент заменен на бордовый, `.phone-link` стал бордовым и легче по весу. |
+| Холодные фоны | [partial] частично | Главные конфликтные фоны (`news-section`, `muted-section`, contacts hero) переведены в теплую гамму в V2. В V1 и отдельных старых CSS-участках холодные цвета остаются. |
+| Карточки товара | [done] исправлено в V2 | Градиенты `.product-media*` заменены на `#F5F0E8`, название стало serif/normal case, footer перестроен вертикально, CTA стал outlined/full-width. |
+| Карточки каталога | [partial] частично | Заголовки списка облегчены и переведены в serif/normal case. Цена и плотная B2B-композиция в основном сохранены. |
+| Mega-menu | [done] исправлено в V2 | Заголовки снижены до 18px/normal case, изображения уменьшены, страны/апелласьоны разведены по иерархии, popular chips получили единый min-width. |
+| Главная | [done] исправлено в V2 | Hero H1 и H2 секций переведены в Cormorant/normal case, карточки рекомендаций и фон новостей обновлены. CTA уже был. |
+| Страница продукта | [partial] частично | Добавлены V2-only breadcrumbs, H1 облегчен, описание ограничено `66ch`. Расширенного описания пока нет, и вертикальную композицию метаданных/CTA стоит еще проверить визуально. |
+| "О нас" | [partial] частично | H1, article width, H2, feature-card, blockquote и muted-section исправлены в V2. Hero все еще использует темную фотографию и правую meta-карточку, хотя карточка стала мягче. |
+| "Контакты" | [partial] частично | Hero без фото, телефон уменьшен, форма облегчена, поле контакта разделяется JS на телефон/email, success-state добавлен. Юридический блок только опущен в конец левой колонки, но не вынесен ниже формы/в конец страницы. |
+| Проверка сборки | [done] проверено | `npm run build` успешно прошел 2026-05-19; Eleventy записал 12 файлов в `_site`. |
+
+## Новые замечания дизайнера - 2026-04-28
+
+Источник: скриншоты/комментарии от Виктории.
+
+| Блок | Статус | Что сделано |
+| --- | --- | --- |
+| Легкие Cormorant 400/500 | [done] подключено | Добавлены `CormorantGaramond-Regular.woff2` и `CormorantGaramond-Medium.woff2`; в `src/css/tokens.css` и `css/tokens.css` прописаны настоящие `@font-face` для весов `400` и `500`. |
+| Общая жирность Cormorant в V2 | [done] CSS-слой | В `src/css/v2.css` Cormorant-заголовки переведены с `500/600` на `400` там, где это карточки, секции, mega-menu, footer, page hero, article blocks. |
+| Карточки товара | [done] V2 | `.product-card h3` увеличен до 22px, вес снижен до 400, normal case сохранен. |
+| Заголовки секций | [done] V2 | `.section-heading h2` сделан тонким uppercase с Cormorant `400`, без дополнительной жирности. Hero H1 не затронут caps-правилом. |
+| Footer | [done] V2 | Заголовки колонок footer стали Cormorant 16px/400, без uppercase; подпункты остаются Manrope. Телефон в footer оставлен бордовым. |
+| Mega-menu | [done] V2 | Заголовок `Вина по географии` увеличен до 22px и облегчен до 400; меню, колонки и ссылки выровнены по левому краю; popular chips стали менее кнопочными и с левым текстом. |
+| Апелласьоны | [done] V2 | `.country-link` (`Франция`, `Италия`) перекрашен в бордо, вес снижен до 500; апелласьоны под ними остались normal case с левым отступом. |
+
## Ключевые замечания
### 1. Типографика
@@ -84,40 +126,40 @@
### Этап 1. Системные токены и базовая типографика
-1. Обновить `src/css/tokens.css`: `--font-heading` на Cormorant Garamond, `--font-body` на Manrope, основной бордовый на `#7D021D`, фон на теплый `#FFFDFA`, surface/card background на теплую белую/кремовую шкалу.
-2. Синхронизировать те же токены в `src/css/ui-kit.css`, чтобы витрина UI-kit не расходилась с сайтом.
-3. Убрать uppercase с H2-H4, product titles, news titles, page hero titles, form titles. Caps оставить только для eyebrow/meta labels.
-4. Пересобрать шкалу весов: H1 может быть крупным, но не обязательно 800; H2-H4 сделать 500-600 или доступный локальный эквивалент с текущими файлами шрифтов.
-5. Проверить минимальные размеры: не использовать текст ниже 12px.
+1. [done] V2: обновить `src/css/tokens.css`: `--font-heading` на Cormorant Garamond, `--font-body` на Manrope, основной бордовый на `#7D021D`, фон на теплый `#FFFDFA`, surface/card background на теплую белую/кремовую шкалу.
+2. [partial] Частично: синхронизировать те же токены в `src/css/ui-kit.css`, чтобы витрина UI-kit не расходилась с сайтом. V2-override работает, но базовый `ui-kit.css` остался на V1-токенах.
+3. [done] V2: убрать uppercase с H2-H4, product titles, news titles, page hero titles, form titles. Caps оставить только для eyebrow/meta labels.
+4. [done] V2: пересобрать шкалу весов: H1 может быть крупным, но не обязательно 800; H2-H4 сделать 500-600 или доступный локальный эквивалент с текущими файлами шрифтов.
+5. [done] V2: проверить минимальные размеры: не использовать текст ниже 12px.
### Этап 2. Карточки и CTA
-1. Заменить градиентные product media на единый теплый нейтральный фон `#F5F0E8`.
-2. Перестроить карточку рекомендаций: region label, serif title 16-18px, gray meta 13px, разделитель, цена 22-24px, outlined full-width CTA.
-3. Смягчить primary/secondary buttons: новый бордовый, меньше "B2B-тяжести", четкие hover/focus states.
-4. Проверить карточки каталога отдельно: сохранить плотность B2B-списка, но снизить вес заголовков и цены.
+1. [done] V2: заменить градиентные product media на единый теплый нейтральный фон `#F5F0E8`.
+2. [done] V2: перестроить карточку рекомендаций: region label, serif title 16-18px, gray meta 13px, разделитель, цена 22-24px, outlined full-width CTA.
+3. [done] V2: смягчить primary/secondary buttons: новый бордовый, меньше "B2B-тяжести", четкие hover/focus states.
+4. [partial] Частично: проверить карточки каталога отдельно: сохранить плотность B2B-списка, но снизить вес заголовков и цены.
### Этап 3. Header и mega-menu
-1. Убрать синий цвет телефона в шапке, оставить синий только внутри логотипа.
-2. Уменьшить и облегчить заголовки mega-menu: 16-18px, normal case, semibold.
-3. Переделать визуальную колонку mega-menu: уменьшить изображение или вынести его в небольшой промо-блок.
-4. Настроить иерархию апелласьонов: страна как meta label, регионы с отступом и normal case.
-5. Выровнять popular chips: единый min-width или одна строка с равномерным ритмом.
+1. [done] V2: убрать синий цвет телефона в шапке, оставить синий только внутри логотипа.
+2. [done] V2: уменьшить и облегчить заголовки mega-menu: 16-18px, normal case, semibold.
+3. [done] V2: переделать визуальную колонку mega-menu: уменьшить изображение или вынести его в небольшой промо-блок.
+4. [done] V2: настроить иерархию апелласьонов: страна как meta label, регионы с отступом и normal case.
+5. [done] V2: выровнять popular chips: единый min-width или одна строка с равномерным ритмом.
### Этап 4. Страницы
-1. Главная: обновить hero-типографику, H2 секций, карточки рекомендаций и холодные фоны новостей.
-2. Продукт: добавить breadcrumbs, расширенный description-блок с `max-width: 65-72ch`, пересобрать вертикальную иерархию metadata/price/CTA.
-3. О нас: сделать hero спокойнее, смягчить правую карточку, сузить основной текст до 66ch, облегчить подзаголовки, убрать жесткую высоту feature-card, заменить холодный muted-section.
-4. Контакты: сделать компактный hero без тяжелой фотографии, вывести телефон/email в первый экран, юридический текст перенести ниже, облегчить форму, разделить контактные поля или добавить подсказку, добавить success-state.
+1. [done] V2: главная - обновить hero-типографику, H2 секций, карточки рекомендаций и холодные фоны новостей.
+2. [partial] Частично: продукт - добавить breadcrumbs, расширенный description-блок с `max-width: 65-72ch`, пересобрать вертикальную иерархию metadata/price/CTA.
+3. [partial] Частично: о нас - сделать hero спокойнее, смягчить правую карточку, сузить основной текст до 66ch, облегчить подзаголовки, убрать жесткую высоту feature-card, заменить холодный muted-section.
+4. [partial] Частично: контакты - сделать компактный hero без тяжелой фотографии, вывести телефон/email в первый экран, юридический текст перенести ниже, облегчить форму, разделить контактные поля или добавить подсказку, добавить success-state.
### Этап 5. Проверка
-1. Прогнать `npm run build`.
-2. Проверить страницы минимум на desktop и mobile: `index.html`, `catalog.html`, `product.html`, `about.html`, `contacts.html`, `ui-kit.html`.
-3. Отдельно проверить, что длинные русские заголовки и телефоны не ломают сетку.
-4. Сверить UI-kit с сайтом: токены, кнопки, карточки, hero, формы.
+1. [done] Прогнать `npm run build`.
+2. [todo] Проверить страницы минимум на desktop и mobile: `index.html`, `catalog.html`, `product.html`, `about.html`, `contacts.html`, `ui-kit.html`.
+3. [todo] Отдельно проверить, что длинные русские заголовки и телефоны не ломают сетку.
+4. [partial] Частично: сверить UI-kit с сайтом: токены, кнопки, карточки, hero, формы.
## Приоритет
@@ -128,4 +170,3 @@ P1: карточки товара, CTA, header/mega-menu. Это самые за
P2: страницы "О нас", "Контакты", "Продукт". Здесь много композиционных улучшений, но они лучше лягут после системной смены визуального языка.
P3: финальная полировка UI-kit, состояния формы, hover/focus, адаптивные проверки.
-
diff --git a/docs/elementor-token-handoff.md b/docs/elementor-token-handoff.md
index 20bd159..771243d 100644
--- a/docs/elementor-token-handoff.md
+++ b/docs/elementor-token-handoff.md
@@ -8,7 +8,9 @@
2. **Декомпозиция работ** — список Elementor-элементов (Global Styles, CSS-слой, глобальные шаблоны, страницы) с оценкой сложности и зависимостями.
3. **Пошаговый план** — 6 этапов с QA и планом отката.
-> Основной источник дизайна: `index.html`, `catalog.html`, `product.html`, `bottle-cards.html`, `about.html`, `contacts.html`, `contacts-auth.html`, `news-villa-raiano.html`, `news-villa-raiano-v2.html`, `article-guidelines.html`, `ui-kit.html` плюс `css/tokens.css`, `css/site.css`, `css/ui-kit.css`.
+> Основной источник дизайна: `src/*.njk`, `src/css/tokens.css`, `src/css/site.css`, `src/css/v2.css`, `src/css/ui-kit.css`, `src/fonts/`, `src/js/design-switcher.js`. Сборочный результат находится в `_site/`.
+
+> Статус на 2026-05-19: production-направление для новых правок — **V2**. V1 сохранен для сравнения, но перенос в Elementor должен ориентироваться на V2-токены: Cormorant Garamond + Manrope, бордовый `#7D021D`, теплый фон `#FFFDFA`, карточный фон `#F5F0E8`, тонкие Cormorant-заголовки и обновленные карточки/mega-menu/footer.
---
@@ -74,7 +76,7 @@
| Meta list (4 пары label/value) | `.meta-list`, `.meta-list div`, `.meta-list span` | product | Лёгко |
| Article body (editorial) | `.article-body`, `.article-body .lead`, `.article-body h2/h3/p/ul` | news, guidelines | Средне |
| Footer | `.site-footer`, `.footer-container`, `.footer-main`, `.footer-brand-block`, `.nav-group`, `.contacts-card`, `.social-links` | все страницы | Лёгко |
-| Breadcrumbs | отсутствуют в макете | — | нужно добавить отдельно |
+| Breadcrumbs | `.breadcrumbs` | product V2 | Лёгко |
| Pagination | отсутствует в макете | — | нужно добавить отдельно |
### 2.3 Проблемные места для Elementor
@@ -108,14 +110,14 @@
Эти блоки **не реализованы** в HTML-ките, но без них запуск не собрать. Добавьте их в бэклог:
-- Breadcrumbs на catalog / single product / news / guidelines.
+- Breadcrumbs на catalog / news / guidelines. Product V2 уже содержит базовые breadcrumbs.
- Pagination и «показать ещё» в каталоге.
- Author/byline и дата публикации в новостях.
- 404 page.
- Cookie / privacy banner.
- WooCommerce cart/checkout/account (если магазин включён), минимальная стилизация.
- Сохранённое состояние поиска, пустое состояние каталога.
-- Форма обратной связи с валидацией и success-экраном.
+- Форма обратной связи с полной валидацией. V2 уже содержит split contact fields и простой success-state.
- Skeleton / loading state для каталога.
- Accessible labels на иконках хедера.
@@ -125,11 +127,13 @@
| Файл | Что это |
|---|---|
-| `css/tokens.css` | Единый источник значений: цвета, шрифты, spacing, radius, shadows, container |
-| `css/site.css` | Все боевые стили: header, mega-menu, hero, page-hero, карточки, каталог, формы, футер |
-| `css/ui-kit.css` | Стили витрины `ui-kit.html` (sidebar, swatches, demo), в production **не переносить** |
+| `src/css/tokens.css` | Единый источник значений: шрифты, цвета, spacing, radius, shadows, container |
+| `src/css/site.css` | Базовая V1-верстка: header, mega-menu, hero, page-hero, карточки, каталог, формы, футер |
+| `src/css/v2.css` | Production-направление V2: теплая палитра, Cormorant/Manrope, карточки, mega-menu, footer, form states |
+| `src/css/ui-kit.css` | Стили витрины `ui-kit.html` (sidebar, swatches, demo), в production **не переносить** |
+| `src/fonts/` | Шрифты, включая Cormorant Garamond `400/500/600/700` и Manrope |
-В Elementor переносите не CSS целиком, а токены + CSS-классы `dp-*`. `ui-kit.css` остаётся как reference.
+В Elementor переносите не CSS целиком, а V2-токены + CSS-классы `dp-*`. `site.css` и `ui-kit.css` остаются reference; `v2.css` фиксирует актуальные дизайнерские решения.
---
@@ -139,16 +143,17 @@
| Elementor name | CSS token | Value | Роль |
|---|---|---|---|
-| DP Wine 100 | `--color-primary-wine-100` | `#4b0f24` | Основной бренд, primary кнопки, hover меню, линки |
-| DP Wine 80 | `--color-primary-wine-80` | `#6d1c36` | Hover primary, вторичный вин |
+| DP Wine 100 | `--color-primary-wine-100` | `#7D021D` | Основной бренд, primary кнопки, hover меню, линки |
+| DP Wine 80 | `--color-primary-wine-80` | `#9b1a33` | Hover primary, вторичный вин |
| DP Black | `--color-neutral-black` | `#161616` | Основной текст |
| DP Gray 700 | `--color-neutral-gray-700` | `#30343a` | Навигация, плотный secondary text |
| DP Gray 600 | `--color-neutral-gray-600` | `#66605f` | Muted text, подписи, описания |
| DP Gray 300 | `--color-neutral-gray-300` | `#d9dee6` | Бордеры, разделители |
-| DP Background | `--color-background-base` | `#f4f6f9` | Фон страниц |
+| DP Background | `--color-background-base` | `#FFFDFA` | Фон страниц |
| DP Surface | `--color-surface` | `#ffffff` | Карточки, формы, панели |
+| DP Surface Warm | `--color-surface-warm` | `#F5F0E8` | Product media, warm sections, soft secondary buttons |
| DP Gold | `--color-accent-gold` | `#b9965b` | Eyebrow, статусы, премиум-акцент |
-| DP Blue | `--color-accent-blue` | `#1f3476` | Logo `.brand-logo`, `.phone-link`, инфо-акценты |
+| DP Blue | `--color-accent-blue` | `#7D021D` | В V2 синий убран из UI; оставить настоящий синий только внутри изображения логотипа |
| DP Error | `--color-error` | `#a33a2f` | Ошибки форм |
Также рекомендуются служебные **alpha-значения**, которые лучше держать в `--dp-*` переменных, а не как Global Colors (Elementor не умеет alpha-переменные как токены):
@@ -157,38 +162,38 @@
--dp-border-soft: rgba(102, 96, 95, 0.12);
--dp-border-med: rgba(102, 96, 95, 0.16);
--dp-border-strong: rgba(102, 96, 95, 0.24);
---dp-wine-border: rgba(75, 15, 36, 0.24);
---dp-wine-hover: rgba(75, 15, 36, 0.06);
---dp-header-bg: rgba(248, 250, 252, 0.94);
---dp-focus-ring: 0 0 0 4px rgba(75, 15, 36, 0.08);
+--dp-wine-border: rgba(125, 2, 29, 0.24);
+--dp-wine-hover: rgba(125, 2, 29, 0.06);
+--dp-header-bg: rgba(255, 253, 250, 0.94);
+--dp-focus-ring: 0 0 0 4px rgba(125, 2, 29, 0.08);
```
---
## 5. Global Fonts
-Подключить в Elementor → Site Settings → Global Fonts. Google Fonts в `index.html` включают: `Inter`, `Montserrat`, `Playfair Display`, `Cormorant Garamond`, `Manrope`. В production для Elementor достаточно первых трёх; `Cormorant`/`Manrope` — только если будете использовать editorial/neo type cards.
+Подключить в Elementor → Site Settings → Global Fonts. Для V2 production используйте `Cormorant Garamond` для заголовков/названий вин и `Manrope` для body/UI. В проекте уже лежат локальные файлы Cormorant Garamond `400/500` плюс прежние `600/700`; при переносе в WordPress лучше загрузить эти файлы локально, а не полагаться на внешний Google Fonts.
| Elementor style | Font | Weight | Desktop | Line height | Transform |
|---|---|---|---|---|---|
-| DP H1 | Montserrat | 800 | 56–72px | 1.0–1.1 | Uppercase |
-| DP H2 | Montserrat | 800 | 36–44px | 1.1 | Uppercase |
-| DP H3 | Montserrat | 800 | 22–28px | 1.15–1.25 | Uppercase |
-| DP Body | Inter | 400 | 16px | 1.5 | None |
-| DP Body Large | Inter | 400 | 18–19px | 1.5 | None |
-| DP Lead | Inter | 500 | 22px | 1.48 | None |
-| DP Caption | Inter | 700–800 | 12–13px | 1.2 | Uppercase |
-| DP Button | Inter | 700 | 14–16px | 1.2 | None |
-| DP Nav | Inter | 800 | 12px | 1.2 | Uppercase |
-| DP Editorial H | Playfair Display | 700 | 36–56px | 1.1 | None |
+| DP H1 | Cormorant Garamond | 400 | 48–80px | 1.05–1.1 | None |
+| DP H2 Section | Cormorant Garamond | 400 | 28–44px | 1.04 | Uppercase |
+| DP H3 / Card Title | Cormorant Garamond | 400 | 20–24px | 1.1–1.2 | None |
+| DP Body | Manrope | 400 | 16px | 1.5 | None |
+| DP Body Large | Manrope | 400 | 18–19px | 1.5 | None |
+| DP Lead | Cormorant Garamond | 400 | 22px | 1.48 | None |
+| DP Caption | Manrope | 600–700 | 12–13px | 1.2 | Uppercase |
+| DP Button | Manrope | 500–600 | 14–16px | 1.2 | None |
+| DP Nav | Manrope | 600–700 | 12px | 1.2 | Uppercase |
+| DP Footer Heading | Cormorant Garamond | 400 | 16px | 1.2 | None |
Responsive:
| Style | Tablet | Mobile |
|---|---|---|
| DP H1 | 40–56px | 34–44px |
-| DP H2 | 32–36px | 28–32px |
-| DP H3 | 22–24px | 20–22px |
+| DP H2 Section | 30–36px | 28–32px |
+| DP H3 / Card Title | 21–22px | 20–21px |
| DP Body | 16px | 16px |
| DP Button | 14–16px | 14px |
@@ -226,8 +231,8 @@ Responsive:
| Token | Value | Где |
|---|---|---|
-| `--dp-radius-sm` | 8px | Кнопки, поля, карточки, теги |
-| `--dp-radius-md` | 12px | Крупные панели, preview |
+| `--dp-radius-sm` | 4px | Кнопки, поля, карточки, теги |
+| `--dp-radius-md` | 8px | Крупные панели, preview |
| `--dp-radius-lg` | 24px | Акцентные блоки (в текущем макете используется редко — оставляем про запас) |
### Shadows
@@ -235,7 +240,7 @@ Responsive:
| Token | Value | Где |
|---|---|---|
| `--dp-shadow-soft` | `0 12px 32px rgba(22, 22, 22, 0.08)` | Карточки, формы, footer panel |
-| `--dp-shadow-lift` | `0 20px 52px rgba(75, 15, 36, 0.14)` | Hover карточек, mega menu, primary hover |
+| `--dp-shadow-lift` | `0 20px 52px rgba(125, 2, 29, 0.12)` | Hover карточек, mega menu, primary hover |
| `--dp-shadow-header` | `0 10px 28px rgba(22, 22, 22, 0.05)` | Sticky header |
| `--dp-focus-ring` | `0 0 0 4px rgba(75, 15, 36, 0.08)` | Input/search focus |
diff --git a/docs/Аудит сайт дп-трейд.pdf b/docs/Аудит сайт дп-трейд.pdf
new file mode 100644
index 0000000..129eea5
Binary files /dev/null and b/docs/Аудит сайт дп-трейд.pdf differ
diff --git a/fonts/CormorantGaramond-Medium.woff2 b/fonts/CormorantGaramond-Medium.woff2
new file mode 100644
index 0000000..e5f5ba6
Binary files /dev/null and b/fonts/CormorantGaramond-Medium.woff2 differ
diff --git a/fonts/CormorantGaramond-Regular.woff2 b/fonts/CormorantGaramond-Regular.woff2
new file mode 100644
index 0000000..a7336c8
Binary files /dev/null and b/fonts/CormorantGaramond-Regular.woff2 differ
diff --git a/index.html b/index.html
deleted file mode 100644
index 700eb80..0000000
--- a/index.html
+++ /dev/null
@@ -1,101 +0,0 @@
-
-
-
-
- DP Trade — Home
-
-
-
-
-
-
-
-
-
DP Trade
-
Премиальный каталог вина для торговли
-
Регионы, производители, партии и коммерческие условия собраны в одном интерфейсе для быстрых закупочных решений.
Villa Raiano: от оливкового масла к одному из лучших фиано Италии
-
6 апреля, 2026Ирпиния, Кампания
-
-
-
-
-
-
-
-
-
-
-
-
Рассказываем о семье Бассо и винодельне Villa Raiano, совершившей небольшую революцию в Ирпинии, сменив курс с красных вин на белые. Судя по нашим последним дегустациям, у них это получилось.
-
На холмах Сан-Микеле-ди-Серино, в провинции Авеллино, расположена винодельня семьи Бассо. Название связано с корнями: Villa Raiano — историческая местность коммуны Серино, где находилась старая оливковая плантация семьи.
-
-
-
-
-
-
-
-
-
-
-
-
-
В середине 1990-х с основанием винодельни в Ирпинии начался винодельческий бум. Первые годы для семьи Бассо были скорее хобби: они делали и разливали вино на семейной маслобойне. С 1999 по 2008 год они стали сотрудничать с энологом Луиджи Мойо, который учился вместе с Сабино Бассо в аграрном институте Авеллино.
-
«В 2008 году мы купили новое оборудование, начали сотрудничество с Фортунато Себастьяно и построили винодельню на вершине холма в Сан-Микеле-ди-Серино», — рассказывает сын Сабино Бассо, Федерико.
-
Открытие в 2009 году совпало с новым курсом: появились четыре белых вина с отдельных виноградников — три Fiano di Avellino и один Greco di Tufo. Через десять лет к работе подключилось новое поколение: «В компанию пришли я, мой брат Фабрицио и наша кузина Брунелла, дочь Симоне».
-
-
-
-
-
-
-
-
-
-
-
-
-
-
В 2024 году открылась новая подземная винодельня, полностью интегрированная в ландшафт. Сегодня Villa Raiano владеет 30 гектарами виноградников: хозяйство работает по биологическим принципам и сертифицировано с 2011 года.
-
«Мы уверены, что наш регион — земля великих белых вин», — говорит Федерико. «Сила наших DOC — в огромных различиях, которые один и тот же сорт может проявлять в разных условиях».
-
Континентальный климат позволяет ягодам созревать медленно, что делает вина особенными — как красные, так и белые. На последних дегустациях Gambero Rosso Fiano di Avellino 2024 года особенно впечатлил итальянских экспертов, получив премию Miglior Qualità Prezzo Regionale гида BereBene 2026.
-
Чем не повод самому проверить мнение Gambero Rosso?
Villa Raiano: от оливкового масла к одному из лучших Fiano Италии
-
История семейного хозяйства из Кампании, где любовь к Ирпинии выросла из маслобойного производства в современную винодельню.
-
-
-
-
-
-
-
-
-
Villa Raiano появилась в 1996 году по инициативе семьи Бассо, известной производством оливкового масла. Первые вина делались в помещениях старого маслобойного завода, а в 2009 году хозяйство переехало в новую винодельню в Ирпинии.
-
Для DP Trade эта история важна не только как биография производителя. Villa Raiano показывает, как локальная ремесленная культура Кампании может стать точной, современной и очень узнаваемой винной стилистикой.
-
Почему Fiano di Avellino
-
Фьяно из Авеллино ценят за минеральность, плотную фактуру и способность к развитию в бутылке. В молодых винах часто появляются цитрусовые, груша, персик, травы и медовые оттенки; с возрастом они становятся глубже, прянее и сложнее.
-
Villa Raiano работает с традиционными сортами региона: Fiano, Greco, Falanghina и Aglianico. Такой фокус помогает хозяйству говорить не универсальным языком международного вина, а языком конкретного места.
-
Фокус карточки новости: семейная история, локальный сорт и ценность производителя для профессионального каталога.
-
Что показать в каталоге
-
Для товарной страницы и подборок можно вынести происхождение, сорт, стиль, потенциал выдержки и гастрономические пары. В B2B-сценарии особенно полезны быстрые маркеры: регион, апелласьон, тип вина, крепость, объем и доступность партии.
- 
- 
- 
- 
- 
+ 