diff --git a/about.html b/about.html new file mode 100644 index 0000000..b65b88a --- /dev/null +++ b/about.html @@ -0,0 +1,318 @@ + + + + + + DP Trade — О компании + + + + + + +
+
+
+ + +
+ +7 (495) 937-94-60 + + + + + + +
+
+ +
+
+
+
+
+

О компании

+

DP Trade — территория качественного вина

+

Импорт, каталог, персональная работа с клиентами, собственные склады в регионах и доставка собственным транспортом.

+
+ +
+
+ +
+
+
+

DP Trade развивает профессиональный винный каталог, где регионы, производители, партии и коммерческие условия собраны в едином интерфейсе для быстрых закупочных решений.

+

Главная ценность сервиса — соединить сильный ассортимент с понятной навигацией: от страны и апелласьона до конкретного производителя, винтажа и карточки товара.

+

Как устроен подход

+

Компания делает акцент на удобном каталоге, персональном отношении, собственных складских возможностях и доставке собственным транспортом. Для B2B-клиентов это значит меньше ручных уточнений и быстрее путь от выбора до заказа.

+
+
+
01

Удобный каталог

Фильтры по типу, региону, производителю, сорту, году, объему и стилю.

+
02

Персональный подход

Быстрая коммуникация с менеджером и подборки под формат клиента.

+
03

Склады в регионах

Инфраструктура для регулярных поставок и управления доступностью.

+
04

Собственная доставка

Контроль логистики и аккуратная работа с профессиональными заказами.

+
+
+
+ +
+
+

Portfolio

Винные дома и регионы

+

Страница показывает, как может выглядеть корпоративный раздел: спокойная подача, крупные тезисы и блок преимуществ без перегруза.

+
+
+
+ + +
+ + diff --git a/article-guidelines.html b/article-guidelines.html new file mode 100644 index 0000000..cc8f363 --- /dev/null +++ b/article-guidelines.html @@ -0,0 +1,384 @@ + + + + + + DP Trade — Article Guidelines + + + + + + +
+
+
+ + +
+ +7 (495) 937-94-60 + + + + + + +
+
+ +
+
+
+
+
+

Editorial guidelines

+

Рекомендации по статьям DP Trade

+

Требования к структуре материала, заголовкам, тексту и фотографиям для новостей, историй производителей и экспертных заметок.

+
+ +
+
+ +
+
+
+ 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-текстами.
    • +
  • Финал ведёт к каталогу, производителю, товару или контакту с менеджером.
    • +
+
+
+
+ + +
+ + diff --git a/assets/images/00073820_1.png b/assets/images/00073820_1.png new file mode 100644 index 0000000..9f82d3b Binary files /dev/null and b/assets/images/00073820_1.png differ diff --git a/assets/images/00080768_1.png b/assets/images/00080768_1.png new file mode 100644 index 0000000..0bc9d72 Binary files /dev/null and b/assets/images/00080768_1.png differ diff --git a/assets/images/00081538_1.png b/assets/images/00081538_1.png new file mode 100644 index 0000000..24e149f Binary files /dev/null and b/assets/images/00081538_1.png differ diff --git a/assets/images/00081726_1.png b/assets/images/00081726_1.png new file mode 100644 index 0000000..2c866d3 Binary files /dev/null and b/assets/images/00081726_1.png differ diff --git a/assets/images/photo_2026-04-06_16-53-23-2.jpg b/assets/images/photo_2026-04-06_16-53-23-2.jpg new file mode 100644 index 0000000..d540b6f Binary files /dev/null and b/assets/images/photo_2026-04-06_16-53-23-2.jpg differ diff --git a/assets/images/photo_2026-04-06_16-53-23.jpg b/assets/images/photo_2026-04-06_16-53-23.jpg new file mode 100644 index 0000000..a474acc Binary files /dev/null and b/assets/images/photo_2026-04-06_16-53-23.jpg differ diff --git a/assets/images/photo_2026-04-06_16-53-24.jpg b/assets/images/photo_2026-04-06_16-53-24.jpg new file mode 100644 index 0000000..c327af5 Binary files /dev/null and b/assets/images/photo_2026-04-06_16-53-24.jpg differ diff --git a/assets/images/photo_2026-04-06_16-53-26.jpg b/assets/images/photo_2026-04-06_16-53-26.jpg new file mode 100644 index 0000000..ab03f6b Binary files /dev/null and b/assets/images/photo_2026-04-06_16-53-26.jpg differ diff --git a/bottle-cards.html b/bottle-cards.html new file mode 100644 index 0000000..62c23c0 --- /dev/null +++ b/bottle-cards.html @@ -0,0 +1,504 @@ + + + + + + DP Trade — Bottle Card Variants + + + + + + +
+
+
+ + +
+ +7 (495) 937-94-60 + + + + + + +
+
+ +
+
+
+
+
+

UI-kit / Product cards

+

Варианты карточек бутылок

+
+

Отдельная витрина для выбора направления карточки: крупные плитки, компактные версии и горизонтальный формат для B2B-каталога.

+
+ +
+
+

Variant 01

+

Акцентные карточки каталога

+
+
+
+
+ Chateau Laroque Grand Cru +
+
+

Bordeaux

+

Chateau Laroque Grand Cru

+

France · Red dry · 2019 · 0.75 L

+
+
+ 3 890 ₽ + Подробнее +
+
+ +
+
+ Brunello di Montalcino +
+
+

Tuscany

+

Brunello di Montalcino

+

Italy · Red dry · 2018 · 0.75 L

+
+
+ 4 240 ₽ + Подробнее +
+
+ +
+
+ Riesling Kabinett +
+
+

Mosel

+

Riesling Kabinett

+

Germany · White · 2021 · 0.75 L

+
+
+ 2 150 ₽ + Подробнее +
+
+
+
+ +
+
+

Variant 02-04

+

Альтернативные форматы

+
+
+
+
+ Oremus Case of Aszu +
+
+

Clean retail

+

Oremus Case of Aszu 5 Puttonyos

+

Hungary · White sweet · 2000 · 0.5 L

+
+
+ 19 240 ₽ + В избранное +
+
+ +
+
+ Oremus Tokaji Aszu +
+
+

Compact

+

Tokaji Aszu 5 Puttonyos

+

Hungary · 12% · Furmint, Harslevelu

+
+
+ 19 240 ₽ + Подробнее +
+
+ +
+
+ Oremus Tokaji Late Harvest +
+
+
+

B2B row card

+

Oremus Tokaji Late Harvest

+

Вино белое полусладкое · Венгрия · 11.5%

+

Сорт: Фурминт, Зета, Харшлевелю

+
+
+ 4 980 ₽ + В избранное +
+
+
+
+
+ +
+
+

Catalog current

+

Варианты текущей карточки каталога

+
+
+
+

Default / как в каталоге

+
+ + Вино белое Oremus, Case of Aszu 5 Puttonyos, 0.5 л. 2000 + +
+

Вино белое Oremus, Case of Aszu 5 Puttonyos, 0.5 л. 2000

+

Вино белое, Oremus, Венгрия

+

Вино Белое Сладкое
12 %

+

Сорт: Фурминт (70%), Харшлевелю (28%), Мускат (2%)

+
+
+ 19 240 ₽ + В избранное +
+
+
+ +
+

Compact / меньше высота

+
+ + Вино белое Oremus, Tokaji Aszu 5 Puttonyos, 0.5 л. 2000 + +
+

Вино белое Oremus, Tokaji Aszu 5 Puttonyos, 0.5 л. 2000

+

Вино белое, Oremus, Венгрия

+

Сладкое · 12% · Фурминт, Харшлевелю, Мускат

+
+
+ 19 240 ₽ + В избранное +
+
+
+ +
+

Hover / активная строка

+
+ + Вино белое Oremus, Tokaji Late Harvest, 0.5 л. 2021 + +
+

Вино белое Oremus, Tokaji Late Harvest, 0.5 л. 2021

+

Вино белое, Oremus, Венгрия

+

Вино Белое Полусладкое
11.5 %

+

Сорт: Фурминт, Зета, Харшлевелю

+
+
+ 4 980 ₽ + Подробнее +
+
+
+ +
+

Color image / цветной фон фото

+
+ + Вино белое Oremus, Tokaji Aszu 5 Puttonyos, 0.5 л. 2000 + +
+

Вино белое Oremus, Tokaji Aszu 5 Puttonyos, 0.5 л. 2000

+

Вино белое, Oremus, Венгрия

+

Вино Белое Сладкое
12 %

+

Сорт: Фурминт (70%), Харшлевелю (28%), Мускат (2%)

+
+
+ 19 240 ₽ + В избранное +
+
+
+ +
+

B2B dense / больше данных

+
+ + Вино белое Oremus, Tokaji Aszu 5 Puttonyos, 0.5 л. 2000 + +
+

Вино белое Oremus, Tokaji Aszu 5 Puttonyos, 0.5 л. 2000

+

Венгрия · Tokaj · Oremus · 0.5 л · 12%

+
+ Тип: белое сладкое + Сорт: Фурминт 70% + Упаковка: 6 шт. + Артикул: 00073820 +
+
+
+ 19 240 ₽ + В избранное +
+
+
+
+
+
+
+ + +
+ + diff --git a/catalog.html b/catalog.html index 3afb63e..8ef8845 100644 --- a/catalog.html +++ b/catalog.html @@ -10,41 +10,343 @@ -
+
+
+
+ + +
+ +7 (495) 937-94-60 + + + + + + +
+
+ +
+ +
-
-

Catalog

-

Каталог вина

+
+
+

Catalog / Country

+

Венгрия

+
+
+ Всего найдено: 22 + Все в избранное + Очистить избранное +
-
- -
-
-
-
Bordeaux

Chateau Laroque Grand Cru

France · Red dry · 2019

-
3 890 ₽Подробнее
-
-
-
-
Tuscany

Brunello di Montalcino

Italy · Red dry · 2018

-
4 240 ₽Подробнее
-
- -
+ +
+ Всего найдено: 22 +
+ +
+
+ + Вино белое Oremus, Case of Aszu 5 Puttonyos, 0.5 л. 2000 + +
+

Вино белое Oremus, Case of Aszu 5 Puttonyos, 0.5 л. 2000

+

Вино белое, Oremus, Венгрия

+

Вино Белое Сладкое
12 %

+

Сорт: Фурминт (70%), Харшлевелю (28%), Мускат (2%)

+
+
+ 19 240 ₽ + В избранное +
+
+ +
+ + Вино белое Oremus, Tokaji Aszu 5 Puttonyos, 0.5 л. 2000 + +
+

Вино белое Oremus, Tokaji Aszu 5 Puttonyos, 0.5 л. 2000

+

Вино белое, Oremus, Венгрия

+

Вино Белое Сладкое
12 %

+

Сорт: Фурминт (70%), Харшлевелю (28%), Мускат (2%)

+
+
+ 19 240 ₽ + В избранное +
+
+ +
+ + Вино белое Oremus, Tokaji Late Harvest, 0.5 л. 2021 + +
+

Вино белое Oremus, Tokaji Late Harvest, 0.5 л. 2021

+

Вино белое, Oremus, Венгрия

+

Вино Белое Полусладкое
11.5 %

+

Сорт: Фурминт, Зета, Харшлевелю

+
+
+ 4 980 ₽ + В избранное +
+
+
+ +
diff --git a/components/footer.html b/components/footer.html index 99dbb3b..8a8251d 100644 --- a/components/footer.html +++ b/components/footer.html @@ -1,26 +1,11 @@
+ + +
+

+ Интернет-витрина размещает информацию об алкогольной продукции исключительно в целях ознакомления. + Дистанционная продажа алкогольной продукции не осуществляется. + Подробнее о правовой информации +

+

© 2026 DP-Trade

+
+ + + diff --git a/news-villa-raiano-v2.html b/news-villa-raiano-v2.html new file mode 100644 index 0000000..6148f12 --- /dev/null +++ b/news-villa-raiano-v2.html @@ -0,0 +1,350 @@ + + + + + + DP Trade — Villa Raiano editorial + + + + + + +
+
+
+ + +
+ +7 (495) 937-94-60 + + + + + + +
+
+ +
+
+
+
+
+
+

Новости / Villa Raiano

+

Villa Raiano: от оливкового масла к одному из лучших фиано Италии

+
6 апреля, 2026Ирпиния, Кампания
+
+
+ Винодельня Villa Raiano среди холмов Ирпинии +
+
+
+ +
+
+ +
+

Рассказываем о семье Бассо и винодельне Villa Raiano, совершившей небольшую революцию в Ирпинии, сменив курс с красных вин на белые. Судя по нашим последним дегустациям, у них это получилось.

+

На холмах Сан-Микеле-ди-Серино, в провинции Авеллино, расположена винодельня семьи Бассо. Название связано с корнями: Villa Raiano — историческая местность коммуны Серино, где находилась старая оливковая плантация семьи.

+
+
+
+ +
+ Сбор белого винограда Villa Raiano +
+ +
+
+ +
+

В середине 1990-х с основанием винодельни в Ирпинии начался винодельческий бум. Первые годы для семьи Бассо были скорее хобби: они делали и разливали вино на семейной маслобойне. С 1999 по 2008 год они стали сотрудничать с энологом Луиджи Мойо, который учился вместе с Сабино Бассо в аграрном институте Авеллино.

+
«В 2008 году мы купили новое оборудование, начали сотрудничество с Фортунато Себастьяно и построили винодельню на вершине холма в Сан-Микеле-ди-Серино», — рассказывает сын Сабино Бассо, Федерико.
+

Открытие в 2009 году совпало с новым курсом: появились четыре белых вина с отдельных виноградников — три Fiano di Avellino и один Greco di Tufo. Через десять лет к работе подключилось новое поколение: «В компанию пришли я, мой брат Фабрицио и наша кузина Брунелла, дочь Симоне».

+
+
+
+ +
+
Ящики с белым виноградом Villa Raiano
+
Работа в погребе Villa Raiano
+
+ +
+
+ +
+

В 2024 году открылась новая подземная винодельня, полностью интегрированная в ландшафт. Сегодня Villa Raiano владеет 30 гектарами виноградников: хозяйство работает по биологическим принципам и сертифицировано с 2011 года.

+
«Мы уверены, что наш регион — земля великих белых вин», — говорит Федерико. «Сила наших DOC — в огромных различиях, которые один и тот же сорт может проявлять в разных условиях».
+

Континентальный климат позволяет ягодам созревать медленно, что делает вина особенными — как красные, так и белые. На последних дегустациях Gambero Rosso Fiano di Avellino 2024 года особенно впечатлил итальянских экспертов, получив премию Miglior Qualità Prezzo Regionale гида BereBene 2026.

+

Чем не повод самому проверить мнение Gambero Rosso?

+
+
+
+
+
+ + +
+ + diff --git a/news-villa-raiano.html b/news-villa-raiano.html new file mode 100644 index 0000000..8bb90c3 --- /dev/null +++ b/news-villa-raiano.html @@ -0,0 +1,325 @@ + + + + + + DP Trade — Villa Raiano + + + + + + +
+
+
+ + +
+ +7 (495) 937-94-60 + + + + + + +
+
+ +
+
+
+
+
+

Новости / Италия

+

Villa Raiano: от оливкового масла к одному из лучших Fiano Италии

+

История семейного хозяйства из Кампании, где любовь к Ирпинии выросла из маслобойного производства в современную винодельню.

+
+ +
+
+ +
+
+
+

Villa Raiano появилась в 1996 году по инициативе семьи Бассо, известной производством оливкового масла. Первые вина делались в помещениях старого маслобойного завода, а в 2009 году хозяйство переехало в новую винодельню в Ирпинии.

+

Для DP Trade эта история важна не только как биография производителя. Villa Raiano показывает, как локальная ремесленная культура Кампании может стать точной, современной и очень узнаваемой винной стилистикой.

+

Почему Fiano di Avellino

+

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

+

Villa Raiano работает с традиционными сортами региона: Fiano, Greco, Falanghina и Aglianico. Такой фокус помогает хозяйству говорить не универсальным языком международного вина, а языком конкретного места.

+
Фокус карточки новости: семейная история, локальный сорт и ценность производителя для профессионального каталога.
+

Что показать в каталоге

+

Для товарной страницы и подборок можно вынести происхождение, сорт, стиль, потенциал выдержки и гастрономические пары. В B2B-сценарии особенно полезны быстрые маркеры: регион, апелласьон, тип вина, крепость, объем и доступность партии.

+
+ +
+
+
+ + +
+ + diff --git a/product.html b/product.html index b6d18ad..be9b35f 100644 --- a/product.html +++ b/product.html @@ -10,9 +10,199 @@ -
+
+
+
+ + +
+ +7 (495) 937-94-60 + + + + + + +
+
+ +
+ +
-
+
Chateau Laroque Grand Cru

Product / Default

Chateau Laroque Grand Cru

@@ -31,5 +221,79 @@
+ +
diff --git a/ui-kit.html b/ui-kit.html index 86b5cbc..bc244d2 100644 --- a/ui-kit.html +++ b/ui-kit.html @@ -22,12 +22,50 @@ @@ -48,7 +86,7 @@
- + Product bottle
Bordeaux @@ -63,13 +101,136 @@
+
+
+
+

00 Production Status

+

Статус дизайн-системы

+
+

Этот блок показывает, насколько UI-kit готов к production handoff: что можно использовать сразу, что требует детализации, и какие правила обязательны для новых экранов.

+
+
+
+ Ready + Catalog List Cards +

Есть варианты, состояния, фоны изображений, shadows и реальная страница для проверки.

+
+
+ Ready + Navigation / Mega-menu +

Header, dropdown, hover bridge, ширина контейнера и базовые состояния зафиксированы.

+
+
+ Ready + Foundations +

Цветовые роли, типографика, сетка, spacing, tokens и shadows описаны для dev handoff.

+
+
+ Review + Forms / Inputs +

Есть default/focus/error, но нужны helper text, required, disabled, textarea и validation patterns.

+
+
+ Ready + Templates +

Шаблоны описывают обязательные блоки, компоненты, screen-ссылки и статус готовности.

+
+
+ Review + Responsive QA +

Есть checklist и адаптивные правила, но перед релизом нужен визуальный проход по всем страницам.

+
+
+
+
+ Production rule +

Новый компонент нельзя считать готовым без anatomy, variants, states, usage, CSS hook и responsive notes.

+
+
+ Screen rule +

Новый экран должен быть связан с template, иметь статус, ссылку на HTML и список QA-проверок.

+
+
+ Content rule +

Все изображения должны иметь понятный alt, стабильные размеры контейнера и не ломать layout на mobile.

+
+
+
+

Readiness Matrix

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
РазделAnatomyStatesUsageResponsiveStatus
FoundationsДаДаДаДаReady
ButtonsДаPartialДаДаReview
Product CardsДаДаДаДаReady
NavigationДаPartialДаPartialReview
Forms / ControlsДаPartialДаДаReview
Templates / ScreensДаДаДаДаReady
+
+
+
+

01 Foundations

База системы

-
+

Colors

@@ -100,7 +261,7 @@
Color / Background / Base - #FAF8F5 + #F4F6F9
@@ -108,9 +269,27 @@ #B9965B
+
+
+ Text roles +

`color.text.primary` = #161616 для заголовков и основного текста. `color.text.muted` = #66605F для meta, captions, описаний и вторичных ссылок.

+
+
+ Surface roles +

`color.background.base` = #F4F6F9 для страницы. `color.surface.default` = #FFFFFF для карточек, форм, таблиц и dropdown.

+
+
+ Brand roles +

`color.primary.wine.100` для CTA, активных состояний и важных ссылок. `color.accent.gold` для labels, eyebrow и editorial accents.

+
+
+ State roles +

Error использует #A33A2F. Success/review/draft пока локальные в UI-kit; перед разработкой их нужно вынести в state tokens.

+
+
-
+

Typography

Text / Heading / H1 / Montserrat / 48 / 56 @@ -132,9 +311,27 @@ Text / Label / Caps / Inter / 12 / 16

FEATURED REGION

+
+
+ Hero / H1 +

Montserrat 700-800, uppercase, clamp 44-78px, line-height около 0.98-1.08. Используется на главной и крупных внутренних hero.

+
+
+ Catalog / Product title +

Montserrat 800, 22-32px для list-card. Не использовать uppercase в текущем каталоге, чтобы длинные названия читались легче.

+
+
+ Article / Lead +

Inter 22-30px, line-height 1.38-1.48. Используется как первый смысловой абзац в редакционных материалах.

+
+
+ Button / Label +

Inter 700-800, 14-16px. Текст должен помещаться без переноса на desktop; на mobile кнопка может становиться full-width.

+
+
-
+

Grid & Spacing

@@ -149,6 +346,20 @@ 48 64
+
+
+ Container +

`--container: 1240px`. Desktop width: `min(100% - 40px, var(--container))`; mobile width: `min(100% - 28px, var(--container))`.

+
+
+ Breakpoints +

Desktop default. Tablet: max-width 1080/1100px. Mobile: max-width 720/760px depending on site vs UI-kit shell.

+
+
+ Spacing rule +

Компоненты: 8-16px gap. Карточки/формы: 16-24px padding. Секции: 56-72px vertical padding.

+
+
@@ -159,6 +370,75 @@ spacing.md = 16px radius.sm = 8px shadow.soft = 0 12px 32px rgba(22,22,22,.08) + shadow.lift = 0 20px 52px rgba(75,15,36,.14) +
+
+
+ Color tokens +

`color.primary.wine.100`, `color.primary.wine.80`, `color.accent.gold`, `color.accent.blue`, `color.background.base`, `color.surface.default`.

+
+
+ Layout tokens +

`container.max = 1240px`, `spacing.4/8/16/24/32/48/64`, `radius.sm = 8px`, `radius.md = 12px`, `radius.lg = 24px`.

+
+
+ Typography tokens +

`font.heading = Montserrat`, `font.body = Inter`. Размеры текста хранятся как semantic styles, а не только raw px.

+
+
+
+ +
+

Elevation & Shadows

+
+
+ Shadow / None + none +

Изображения бутылок, прозрачные PNG/JPG внутри карточек, плоские служебные элементы.

+ box-shadow: none; +
+
+ Shadow / Header / Sticky + Navigation depth +

Только для sticky header: лёгкое отделение от контента при скролле.

+ 0 10px 28px rgba(22,22,22,.05) +
+
+ Shadow / Soft + Base surface +

Основной токен для карточек, footer-контейнера, форм, contact panels и info-card.

+ 0 12px 32px rgba(22,22,22,.08) +
+
+ Shadow / Card / Product + Product card +

Для bottle-card и визуальных карточек с изображением, когда нужно чуть больше воздуха.

+ 0 18px 46px rgba(18,25,38,.08) +
+
+ Shadow / Card / Hover + Interactive lift +

Hover/active состояние list-card. Используется вместе с border-color, без изменения размеров.

+ 0 22px 54px rgba(25,37,62,.13) +
+
+ Shadow / Lift + Mega-menu +

Высокий слой: dropdown, mega-menu, временно поднятые панели.

+ 0 20px 52px rgba(75,15,36,.14) +
+
+ Shadow / Editorial / Image + Hero media +

Крупные изображения в статье, где фото должно отделяться от фона страницы.

+ 0 22px 58px rgba(25,37,62,.12) +
+
+ Shadow / Focus Ring + Input focus +

Не декоративная тень, а доступное состояние focus для search/input.

+ 0 0 0 4px rgba(75,15,36,.08) +
@@ -170,6 +450,24 @@
+

Component Readiness

+
+
+ Required anatomy +

Каждый production-компонент должен иметь anatomy, variants, states, sizes, usage, CSS hooks и responsive notes.

+
+
+ Required states +

Default, Hover, Focus, Active, Disabled. Для data-heavy компонентов также Loading, Empty, Error, Selected.

+
+
+ CSS hooks +

Использовать стабильные классы: `.button--primary`, `.product-card--list`, `.product-image--gold`, `.contact-auth-gate`.

+
+
+
+ +

Buttons

@@ -177,13 +475,119 @@
+
+
+ Анатомия +

Button / Background + Label. Высота 48px, compact 38px, radius 8px, padding 12/22.

+
+
+ Состояния +

Default, Hover, Focus, Disabled. Hover меняет фон/тень, focus должен иметь видимый outline.

+
+
+ Использование +

Primary для главного CTA, Secondary для каталогов и избранного, Ghost для тихих действий.

+
+
+ Production gap +

Добавить disabled, loading, icon-only, full-width mobile. Loading не должен менять ширину кнопки.

+
+
-
+
+

Icon Styles

+
+
+
+ + + +
+ Icon / Line / Default +

Основной стиль для header, account, cart, menu chevrons и вторичных действий. Stroke 1.75px, без заливки.

+ stroke-width: 1.75; width: 22px; +
+
+
+ + + +
+ Icon / Soft Container +

Для кликабельных icon buttons: header account/cart, toolbar actions, карточки избранного. Контейнер 44-48px.

+ background: #fff; border: rgba(75,15,36,.14); +
+
+
+ + + +
+ Icon / Filled Action +

Акцентный вариант для primary icon-only действий, selected states и важных быстрых команд. Использовать дозированно.

+ background: color.primary; color: #fff; +
+
+
+ + + +
+ Icon / Utility / Small +

Для chevron, accordion, table sorting и compact filters. Stroke 1.6px, размер 14-18px, без отдельного контейнера.

+ width: 16px; stroke-width: 1.6; +
+
+
+
+ Size scale +

Utility 16px, navigation 20-22px, icon button 44/48px container, primary action 48px container. SVG всегда квадратный.

+
+
+ Stroke rule +

Базовый stroke 1.75px. Не использовать тяжёлые 2.5-3px иконки в header: они спорят с логотипом и типографикой.

+
+
+ States +

Default, Hover, Focus, Active, Disabled, Selected. Hover меняет border/background, а не толщину линии.

+
+
+ CSS hooks +

`.kit-icon--line`, `.kit-icon--soft`, `.kit-icon--filled`, `.kit-icon--tiny`. В рабочем header использовать тот же визуальный принцип.

+
+
+
+ +

Product Card

-
+
Product bottle
Tuscany

Brunello di Montalcino

@@ -195,7 +599,7 @@
-
+
Product bottle
Rioja

Reserva Seleccion Especial

@@ -207,7 +611,7 @@
-
+
Product bottle
Mosel

Riesling Kabinett

@@ -218,9 +622,130 @@
+
+
+ Варианты +

Card / Product / Default, Hover, Compact, List. List используется в каталоге и поисковой выдаче.

+
+
+ Анатомия +

Image, Meta, Name, Details, Price, CTA. Для list-card добавляется Product info + Product buy.

+
+
+ Состояния +

Default, Hover, Favorite, Out of stock. Hover усиливает border/shadow без изменения размеров.

+
+
-
+
+

Catalog List Cards

+
+
+ Card / Product / List / Default +

Текущая карточка каталога: Image, Product info, Price, CTA. Используется для B2B-выдачи и страниц стран.

+
+
+ Card / Product / List / Compact +

Сниженная высота, меньше изображение и короче details. Подходит для плотной выдачи и избранного.

+
+
+ Card / Product / List / Color Image +

Цветной фон только в зоне изображения: Gold, Wine, Green. Бутылка остаётся реальной фотографией без shadow.

+
+
+ Card / Product / List / B2B Dense +

Дополнительные параметры: тип, сорт, упаковка, артикул. Для профессионального сравнения SKU.

+
+
+ Shadow +

Default использует Shadow / Soft. Hover использует Shadow / Card / Hover + border rgba(75,15,36,.28). Картинки бутылок всегда shadow none.

+
+
+
+ Открыть варианты карточек +
+
+ +
+

Image Backgrounds

+
+
+
Bottle on gold gradient
+ Image Background / Gold +

Для белых, сладких, премиальных и акцентных карточек. Хорошо работает с бутылками без прозрачного фона.

+ .product-image--gold { background: linear-gradient(135deg, #b9965b 0%, #d7c18b 48%, #eef2f6 100%); } +
+
+
Bottle on wine gradient
+ Image Background / Wine +

Для красных вин, премиальных подборок и карточек, где нужен более сильный брендовый акцент.

+ .product-image--wine { background: linear-gradient(135deg, #6d1c36 0%, #9b5366 46%, #e6dce1 100%); } +
+
+
Bottle on green gradient
+ Image Background / Green +

Для белых, органики, свежих регионов и спокойных карточек с холодным фоном.

+ .product-image--green { background: linear-gradient(135deg, #1f4d3a 0%, #88a28e 48%, #eef2e5 100%); } +
+
+
Bottle on neutral gradient
+ Image Background / Neutral +

Для hover, B2B dense и ситуаций, где цвет не должен спорить с информацией.

+ background: linear-gradient(135deg, #eef2f6 0%, #dde6ef 100%); +
+
+
+
+ Правило +

Градиент применяется только к контейнеру изображения, не к карточке целиком. Так карточка остаётся читаемой и не превращается в баннер.

+
+
+ Изображение +

Бутылка всегда `object-fit: contain`, `box-shadow: none`, без вылета за блок. Для JPG без прозрачности контейнер должен скрывать переполнение.

+
+
+ CSS hook +

Для list-card использовать `.product-image product-image--gold|wine|green`. Для плиток использовать модификаторы media-контейнера.

+
+
+
+ +
+

Editorial Components

+
+
+ Article / Hero / Split +

Заголовок, дата/мета, крупное фото. Для новостей производителей и экспертных материалов.

+
+
+ Article / Body +

Lead, paragraph, blockquote, wide image, photo grid. Не больше 4 текстовых абзацев без визуальной паузы.

+
+
+ Article / Sidebar +

Sticky fact block, timeline или recognition. На мобильном становится обычным блоком над текстом.

+
+
+ Guidelines +

Отдельная страница с требованиями к заголовкам, тексту, фото, SEO и pre-publish checklist.

+
+
+ Shadow +

Editorial hero image использует Shadow / Editorial / Image. Текстовые блоки и сайдбар остаются без декоративной тени, чтобы читать было спокойнее.

+
+
+ Production gap +

Добавить компоненты: Article meta, Article quote, Article image caption, Related products, Related producer.

+
+
+
+ Новость v2 + Редакционный гайд +
+
+ + -
+

Filters

@@ -268,8 +815,29 @@
-
+

Controls Specs

+
+
+ Filters +

Checkbox Default/Active/Disabled, Chip Default/Active, Range Slider Default/Dragging.

+
+
+ Inputs +

Input Default/Focus/Error/Disabled. Error меняет border и helper text, не меняет высоту поля.

+
+
+ Tags +

Default для метаданных, Filled для выбранного статуса, Outline для мягких категорий.

+
+
+ Production gap +

Нужны helper/error text, required label, disabled controls, textarea, select open state, clear all для фильтров.

+
+
+
+ +

Tables / B2B

@@ -301,6 +869,27 @@
+
+

Table Specs

+
+
+ Анатомия +

Table Header, Row, Cell, Numeric cell, Actions. Горизонтальный scroll на мобильных.

+
+
+ Состояния +

Row Default/Hover/Selected, Header, Empty, Loading. Hover используется для B2B-сканирования.

+
+
+ Использование +

Прайс-листы, остатки, коммерческие условия и сравнение SKU.

+
+
+ Production gap +

Добавить Empty, Loading, Selected, Actions column, numeric alignment, sticky header и mobile fallback.

+
+
+
@@ -308,7 +897,7 @@

03 Patterns

Паттерны

-
+
+
+

Content & Inner Pages

+
+
+ Pattern / News Article / Editorial +

Split hero, date meta, lead, wide image, timeline sidebar, quote, photo grid, final CTA.

+
+
+ Pattern / About Page / Default +

Hero + короткая история + сетка преимуществ. Подходит для корпоративной страницы без перегруза.

+
+
+ Pattern / Contacts / Form +

Контактные панели + форма заявки менеджеру. На мобильном блоки идут одной колонкой.

+
+
+ Pattern / Contacts / Auth Gate +

Контакты открыты, заявка заблокирована для гостя. Показываем CTA входа/регистрации и disabled-preview формы.

+
+
+ Pattern / Editorial Guidelines +

Guideline cards + checklist. Используется как внутренняя документация для редакции и контент-менеджера.

+
+
+
-
-

04 Templates

-

Шаблоны

+
+
+

04 Templates

+

Шаблоны

+
+

Templates описывают каркас страницы: обязательные блоки, опциональные зоны, компоненты и связь с реальным screen. Это не финальный экран, а правило сборки.

@@ -349,24 +966,213 @@ Template / Producer Page Story + region + producer catalog
+
+ Template / News Article + Editorial story + media + timeline +
+
+ Template / About + Company story + advantages +
+
+ Template / Contacts + Contact panels + manager request +
+
+ Template / Contacts Auth + Open contacts + gated request form +
+
+ Template / Article Guidelines + Rules + checklist + photo requirements +
+
+
+
+ Template / Catalog +

Product listing

+

Required: Header, catalog head, toolbar, product list, footer.

+

Components: Catalog List Card, Select, Button Secondary, Mega-menu.

+

Screen: catalog.html

+ Status: Review, needs mobile QA for dense list. +
+
+ Template / News Article +

Editorial story

+

Required: Article hero, date/meta, lead, body, image block, footer.

+

Optional: timeline, quote, photo grid, related products.

+

Screen: news-villa-raiano-v2.html

+ Status: Ready, content/photo rules documented. +
+
+ Template / Contacts Auth +

Gated request

+

Required: contacts hero, open contacts, auth gate, disabled preview, footer.

+

Components: Contact Panel, Contact Auth Gate, Button Primary/Secondary.

+

Screen: contacts-auth.html

+ Status: Review, needs real login/register routes. +
+
+ Template / Home +

Commercial landing

+

Required: asymmetrical hero, producer block, news block, footer.

+

Components: Header, Mega-menu, Button Primary, News Card, Producer Card.

+

Screen: index.html

+ Status: Ready, visual direction approved. +
+
+ Template / Article Guidelines +

Internal documentation

+

Required: page intro, rule cards, photo requirements, writing checklist.

+

Components: Guideline Card, Checklist Card, Editorial Specs.

+

Screen: article-guidelines.html

+ Status: Ready, supports content production. +
+
+ Template / Product Page +

Product detail

+

Required: product media, details, price/CTA, characteristics, recommendations.

+

Components: Product Media, Product Meta, Table, Product Card.

+

Screen: product.html

+ Status: Draft, needs final product content model. +
-
-
-

05 Screens

-

Реальные экраны

+
+
+
+

05 Screens

+

Реальные экраны

+
+

Этот раздел ведёт на конкретные HTML-страницы проекта. В отличие от Templates, здесь фиксируются уже собранные экраны с реальным контентом, header/footer и состояниями.

-
-
-
-

Screen / Home / v1

-

Curated trade catalog

- -
-
- +
+ + Screen / Home / v1 + Главная +

Hero, производители, новости, рекомендации и общий визуальный тон сайта.

+ + + Screen / Catalog / v1 + Каталог +

Список товаров, toolbar, сортировка, текущая горизонтальная карточка каталога.

+ + + Screen / Product / v1 + Карточка товара +

Продуктовый detail layout: изображение, описание, метаданные и CTA.

+ + + Screen / Cards Lab / v1 + Варианты карточек +

Лаборатория карточек бутылок и текущих list-card состояний.

+ + + Screen / News / v2 + Villa Raiano editorial +

Журнальная статья с крупными фото, таймлайном, цитатами и финальным акцентом.

+ + + Screen / About / v1 + О компании +

Корпоративная страница: описание, преимущества, спокойная B2B-подача.

+ + + Screen / Contacts / v1 + Контакты +

Открытая форма заявки, контактные панели, юридический информационный блок.

+ + + Screen / Contacts / Auth + Контакты auth +

Вариант, где заявка доступна только после входа или регистрации.

+ + + Screen / Guidelines / v1 + Редакционный гайд +

Требования к статьям, фотографиям, заголовкам, SEO и pre-publish checklist.

+ +
+
+
+ Screen status +

Ready: Home, News v2, Guidelines, Cards Lab. Review: Catalog, Contacts Auth. Draft: Product, если не утверждена модель данных.

+
+
+ Screen QA +

Каждый экран проверяется на desktop/tablet/mobile: header/footer, links, image loading, hover/focus states, overflow и читаемость текста.

+
+
+ Template link +

Каждый screen должен соответствовать одному template. Если меняется template, связанные screens обновляются вместе с ним.

+
+
+
+ +
+
+
+

06 Handoff

+

Production checklist

+

Финальный список проверок перед передачей дизайна в разработку или публикацией новой страницы в UI-kit.

+
+
+
+ Design +
    +
  • Компонент использует существующие tokens: color, spacing, radius, shadow.
    • +
  • Есть все состояния: default, hover, focus, active, disabled, error/loading где нужно.
    • +
  • Размеры стабильны: hover, текст и динамический контент не двигают layout.
    • +
  • Компонент не дублирует уже существующий паттерн без причины.
    • +
+
+
+ Development +
    +
  • Есть CSS hook или class naming по схеме Category / Type / Variant / State.
    • +
  • В UI-kit указан usage: где компонент применяется и где не применяется.
    • +
  • Все ссылки в demo/screens ведут на реальные HTML-файлы.
    • +
  • Нет inline-логики, которая мешает переиспользовать компонент.
    • +
+
+
+ Responsive +
    +
  • Проверены desktop, tablet и mobile.
    • +
  • Карточки, таблицы и формы не переполняют контейнер.
    • +
  • Текст в кнопках и карточках не обрезается и не накладывается.
    • +
  • Таблицы имеют horizontal scroll или мобильную альтернативу.
    • +
+
+
+ Accessibility +
    +
  • Интерактивные элементы имеют видимый focus.
    • +
  • Изображения имеют осмысленный alt.
    • +
  • Кнопки и ссылки различимы по роли и тексту.
    • +
  • Цвет не является единственным способом передать состояние.
    • +
+
+
+ Content +
    +
  • Заголовки соответствуют иерархии H1/H2/H3.
    • +
  • Для статей есть лид, визуальные паузы, alt и финальный CTA.
    • +
  • Даты, имена, регионы, апелласьоны и награды проверены.
    • +
  • Изображения достаточно крупные и не выглядят случайно обрезанными.
    • +
+
+
+ Ready criteria +
    +
  • Раздел имеет описание назначения.
    • +
  • Есть пример, спецификация и ссылка на screen, если применимо.
    • +
  • Компонент или экран можно собрать без дополнительных устных пояснений.
    • +
  • Статус готовности понятен: Ready, Review или Draft.
    • +
+