dp-trade-UI-kit/docs/elementor-token-handoff.md

Перенос UI-kit в WordPress + Elementor

Документ описывает безопасный перенос дизайн-системы и всех макетов DP Trade UI-kit на WordPress с Elementor. Цель: внедрить дизайн-систему поэтапно, не ломая существующие страницы, Header, Footer и WooCommerce, если он используется.

Документ построен в три слоя:

1. Аудит исходников — какие страницы, компоненты и паттерны есть в макете и что из этого дорого/опасно переносить на Elementor.
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.

---

1. Базовый принцип

Не заменяйте существующие настройки Elementor сразу. Сначала добавляйте новые токены рядом со старыми, собирайте тестовую страницу, проверяйте визуально, и только потом переводите реальные шаблоны и страницы на новые значения.

Рекомендуемый порядок:

1. Backup сайта и базы данных.
2. Работа на staging-копии или на новой странице.
3. Новые Global Colors с префиксом DP.
4. Новые Global Fonts с префиксом DP.
5. Тонкий базовый CSS-слой с переменными --dp-* и утилитарными классами dp-*.
6. Базовые компоненты: кнопки, поля, карточки, теги, хедер/футер (draft-копии).
7. Страница UI Kit Preview как живая витрина.
8. Проверка desktop / tablet / mobile.
9. Поэтапная замена Header, Footer, catalog, product, news, about, contacts.

---

2. Аудит: что в макете и чего в нём нет

2.1 Карта страниц

Страница	Что демонстрирует	Шаблон Elementor
index.html	Hero, mega-menu, блок «Производители», блок «Новости», блок «Рекомендации»	Home Template (Single Page)
catalog.html	Toolbar, sort select, list-карточки, sidebar-фильтры	Archive Template (WooCommerce или CPT product)
product.html	Галерея + карточка товара, meta-list (4 пары label/value), CTA	Single Product Template
bottle-cards.html	Все варианты карточки бутылки (grid, mix, compact, horizontal, по регионам)	Showcase внутри UI Kit Preview
about.html	Page hero, 2-col layout (article + feature grid), карточки с номерами	Page Template «About»
contacts.html	Page hero, контактная форма, info-panel	Page Template «Contacts»
contacts-auth.html	То же с авторизацией/аккаунтом	Page Template «Account» или My Account endpoint
news-villa-raiano.html, news-villa-raiano-v2.html	Editorial hero, тело статьи, две редакционные верстки	Single Post Template (2 варианта)
article-guidelines.html	Редакционные правила, структурный контент	Single Post / CPT guideline
ui-kit.html	Живая витрина с sidebar-навигацией и превью компонентов	Не копировать в production, это витрина для дизайнеров и QA

2.2 Карта компонентов

Сложность указана относительно «чистого» Elementor без hand-coded HTML виджетов.

Компонент	Ключевые селекторы	Где встречается	Сложность
Primary / Secondary / Small button	.button, .button--primary, .button--secondary, .button--sm	везде	Лёгко
Input, search bar, catalog sort	.input, .search-bar, .catalog-sort	header, catalog	Средне
Tag / Chip / Status	.tag, .tag--filled, .tag--outline, gold-вариант	каталог, карточки	Лёгко
Primary hero (home)	.hero, .hero-copy, .hero-actions	index.html	Сложно
Page hero (about / contacts / guidelines / news)	.page-hero, .page-hero--about, .page-hero--contacts, .page-hero--guidelines, .page-hero__inner, .page-hero__meta	5 страниц	Средне
Mega menu	.mega-menu, .menu-grid, .menu-column, .visual-column, .appellations, .appellation-group, .country-link	header	Сложно
Header sticky + blur	.site-header, position: sticky, backdrop-filter: blur(18px)	все страницы	Средне
Producer card	.producer-card	home	Лёгко
News card (3 варианта фоновых изображений)	.news-card, .news-card__image	home	Лёгко
Product card grid	.product-card, .product-media, .product-photo, .product-footer	home, catalog, product	Средне
Product card list	.product-card--list (3 колонки: image / info / actions)	catalog	Сложно
Product card compact list	.product-card--list-compact	ui-kit	Средне
Product card B2B	.product-card--list-b2b, .product-params	ui-kit	Сложно
Bottle card + 5 вариантов	.bottle-card, .bottle-card--tuscany/--mosel/--clean/--compact/--horizontal, .bottle-card__media, .bottle-card__photo	bottle-cards	Средне
CSS-бутылка (два ::before/::after)	.bottle, .bottle::before (пробка), .bottle::after (этикетка)	ui-kit, catalog showcase	Сложно (требует HTML-виджет)
Section heading (split)	.section-heading, .section-heading--split	все секции	Лёгко
Feature card с номером	.feature-card + <span>01..04</span>	about	Лёгко
Info card / contact panel / contact form	.info-card, .contact-panel, .contact-form	about, contacts	Лёгко
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	отсутствуют в макете	—	нужно добавить отдельно
Pagination	отсутствует в макете	—	нужно добавить отдельно

2.3 Проблемные места для Elementor

Ниже — паттерны, которые нельзя просто перетащить в стандартные виджеты. Каждый пункт требует либо custom CSS-класса, либо HTML-виджета, либо отдельного Elementor-шаблона.

1. Mega menu с 4-колоночным асимметричным гридом и мостом-ховером. css/site.css:242-369. Grid 1.05fr 0.82fr 1.25fr 0.88fr, вложенная секция .appellations на 2 колонки, позиционирование position: absolute; transform: translateX(-50%); width: min(var(--container), calc(100vw - 40px)), ховер-мост через ::after высотой 34px, backdrop-filter: blur(18px). Стандартный Elementor Nav Menu/Mega Menu такое не даёт. Решение: custom HTML виджет + CSS-классы dp-megamenu-* либо Crocoblock JetMenu.
2. Sticky header с backdrop-filter blur. .site-header { position: sticky; top: 0; backdrop-filter: blur(18px); background: rgba(248, 250, 252, 0.94); }. В Elementor Pro есть Effects → Sticky, но blur и alpha-фон задаются только CSS.
3. CSS-бутылка на ::before/::after. .bottle { width: 54px; height: 152px; ... }, плюс псевдо-пробка и этикетка. Elementor виджет Image такого не даст — нужен HTML-виджет с фиксированной разметкой <div class="dp-bottle"></div>.
4. Псевдоэлементы как структурная часть карточек. .type-card.is-selected::before (бейдж), градиентные fond-блоки .bottle-card__media с разными заливками под --tuscany/--mosel/--clean/--compact. Решение: пять CSS-классов-модификаторов, в Elementor подключать через поле CSS Classes.
5. CSS Grid с асимметричными колонками. Примеры: .page-hero__inner (0.72fr / 0.28fr), .article-layout (0.68fr / 0.32fr), .about-grid (0.58fr / 0.42fr), .product-card--list (210px / 1fr / 220px), .footer-main (210px / 1fr / 250px), .meta-list (в product — de-facto 2 колонки). Elementor Container с display: flex справится только с простыми кейсами. Для сложных — либо Container c CSS display: grid через custom CSS, либо принять, что колонки останутся фиксированной ширины через %.
6. Responsive через clamp(). h1 { font-size: clamp(40px, 5.6vw, 76px) } и подобные. Elementor работает через три брейкпоинта. Решение: в Elementor задавайте отдельные desktop/tablet/mobile значения, либо пропишите clamp() в Custom CSS для h1/h2 с префиксом dp-.
7. Кастомный select (.catalog-sort). Элементу <select> нельзя нормально стилизовать в Elementor. Решение: держать .dp-select в Custom CSS с учётом нативной стрелки через background-image: url("data:image/svg+xml,...").
8. Focus-ring на поля и search bar. box-shadow: 0 0 0 4px rgba(75, 15, 36, 0.08) — задайте глобально через .dp-form input:focus, .dp-search:focus-within.
9. object-fit: contain для продуктовых фото. Elementor Image выставляет object-fit: cover по умолчанию. Нужен .dp-product-photo { object-fit: contain }.
10. Gradient presets per-variant. .bottle-card--tuscany, .bottle-card--mosel, .bottle-card--clean, .bottle-card--compact, .product-image--wine, .product-image--gold, .product-image--green. Задайте как набор CSS-классов, не как отдельные шаблоны.
11. JS-поведение. В репозитории ссылка на js/inspector.js есть в CLAUDE.md, но в рабочих HTML она не подключена; кастомного JS на страницах нет. Однако в production понадобятся: открытие/закрытие mega-menu на click/tap (mobile), закрытие по Esc, фокус-трап, поведение мобильного меню, sort select submit, фильтр каталога. Это не входит в Elementor по умолчанию — предусмотрите отдельную задачу по JS.

2.4 Что отсутствует в макете, но нужно на production

Эти блоки не реализованы в HTML-ките, но без них запуск не собрать. Добавьте их в бэклог:

• Breadcrumbs на catalog / single product / news / guidelines.
• Pagination и «показать ещё» в каталоге.
• Author/byline и дата публикации в новостях.
• 404 page.
• Cookie / privacy banner.
• WooCommerce cart/checkout/account (если магазин включён), минимальная стилизация.
• Сохранённое состояние поиска, пустое состояние каталога.
• Форма обратной связи с валидацией и success-экраном.
• Skeleton / loading state для каталога.
• Accessible labels на иконках хедера.

---

3. Источники токенов в проекте

Файл	Что это
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 не переносить

В Elementor переносите не CSS целиком, а токены + CSS-классы dp-*. ui-kit.css остаётся как reference.

---

4. Global Colors (Elementor → Site Settings → Global Colors)

Добавьте новые цвета. Старые Primary/Secondary/Text/Accent не удаляйте, пока не перевяжете все элементы.

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 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 Surface	--color-surface	#ffffff	Карточки, формы, панели
DP Gold	--color-accent-gold	#b9965b	Eyebrow, статусы, премиум-акцент
DP Blue	--color-accent-blue	#1f3476	Logo .brand-logo, .phone-link, инфо-акценты
DP Error	--color-error	#a33a2f	Ошибки форм

Также рекомендуются служебные alpha-значения, которые лучше держать в --dp-* переменных, а не как Global Colors (Elementor не умеет alpha-переменные как токены):

--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);

---

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 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

Responsive:

Style	Tablet	Mobile
DP H1	40–56px	34–44px
DP H2	32–36px	28–32px
DP H3	22–24px	20–22px
DP Body	16px	16px
DP Button	14–16px	14px

clamp() в Elementor Global Fonts не ставьте — используйте отдельные значения по брейкпоинтам. Для нескольких ключевых h1/h2 можно вручную прописать clamp() в Custom CSS под классами dp-hero h1, dp-page-hero h1.

---

6. Spacing, container, radius, shadows

Spacing

Token	Value	Где использовать
--dp-space-4	4px	Микро-зазоры
--dp-space-8	8px	Gap внутри кнопок
--dp-space-16	16px	Gap grids, карточки
--dp-space-24	24px	Padding карточек, блоков
--dp-space-32	32px	Gap колонок
--dp-space-48	48px	Средние секции
--dp-space-64	64px	Большие секции
--dp-space-80	80px	Hero padding top/bottom desktop

В макете фактические паддинги секций: desktop 80px top/bottom, mobile 48px. В старом документе был 72 — обновлено.

Layout

Token	Value	Elementor setting
--dp-container	1240px	Site Settings → Layout → Content Width
Section desktop padding	80px 40px	Container padding
Section mobile padding	48px 28px	Container padding (mobile)
Section side gap	40px desktop / 28px mobile	Container padding X

Radius

Token	Value	Где
--dp-radius-sm	8px	Кнопки, поля, карточки, теги
--dp-radius-md	12px	Крупные панели, preview
--dp-radius-lg	24px	Акцентные блоки (в текущем макете используется редко — оставляем про запас)

Shadows

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-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

---

7. Безопасный CSS-слой (dp-*)

Добавляйте CSS только через классы с префиксом dp-, а не через глобальные body, h1, button, input, a. Это единственный способ не сломать тему и плагины.

Где класть CSS:

1. Тестовая страница: Page Settings → Advanced → Custom CSS.
2. После проверки: Elementor → Site Settings → Custom CSS.
3. Финально (если есть child-тема): wp-content/themes/<child>/style.css или отдельный enqueued файл.

Базовый слой:

:root {
  --dp-wine-100: #4b0f24;
  --dp-wine-80: #6d1c36;
  --dp-black: #161616;
  --dp-gray-700: #30343a;
  --dp-gray-600: #66605f;
  --dp-gray-300: #d9dee6;
  --dp-bg: #f4f6f9;
  --dp-surface: #ffffff;
  --dp-gold: #b9965b;
  --dp-blue: #1f3476;
  --dp-error: #a33a2f;

  --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-header-bg: rgba(248, 250, 252, 0.94);

  --dp-radius-sm: 8px;
  --dp-radius-md: 12px;
  --dp-radius-lg: 24px;

  --dp-shadow-soft: 0 12px 32px rgba(22, 22, 22, 0.08);
  --dp-shadow-lift: 0 20px 52px rgba(75, 15, 36, 0.14);
  --dp-shadow-header: 0 10px 28px rgba(22, 22, 22, 0.05);
  --dp-focus-ring: 0 0 0 4px rgba(75, 15, 36, 0.08);
}

.dp-section { padding: 80px 0; }
.dp-section--muted { background: #eef2f6; }

.dp-surface {
  background: var(--dp-surface);
  border: 1px solid var(--dp-border-med);
  border-radius: var(--dp-radius-sm);
  box-shadow: var(--dp-shadow-soft);
}

.dp-eyebrow {
  color: var(--dp-gold);
  font-family: Inter, Arial, sans-serif;
  font-size: 12px;
  line-height: 16px;
  font-weight: 800;
  letter-spacing: 0;
  text-transform: uppercase;
}

.dp-section-heading {
  font-family: Montserrat, Inter, Arial, sans-serif;
  font-weight: 800;
  text-transform: uppercase;
  color: var(--dp-black);
}

@media (max-width: 1080px) {
  .dp-section { padding: 64px 0; }
}

@media (max-width: 720px) {
  .dp-section { padding: 48px 0; }
}

---

8. Кнопки

Site Settings → Buttons. Базовые параметры:

Property	Value
Min height	48px
Padding	12px 22px
Border radius	8px
Font	Inter, 700
Transition	0.2s

Primary states:

State	Text	Background	Shadow
Default	#ffffff	#4b0f24	0 10px 22px rgba(75, 15, 36, 0.16)
Hover	#ffffff	#6d1c36	0 20px 52px rgba(75, 15, 36, 0.14)
Active	#ffffff	#6d1c36	inset + translateY(0)
Disabled	#ffffff	rgba(75, 15, 36, 0.4)	none

Secondary states:

State	Text	Background	Border
Default	#4b0f24	rgba(255,255,255,0.55)	rgba(75,15,36,0.24)
Hover	#4b0f24	rgba(75,15,36,0.06)	rgba(75,15,36,0.36)

.dp-btn-primary .elementor-button,
.dp-btn-primary.elementor-button,
a.dp-btn-primary {
  min-height: 48px;
  padding: 12px 22px;
  border-radius: 8px;
  background: var(--dp-wine-100);
  color: #fff;
  font-family: Inter, Arial, sans-serif;
  font-weight: 700;
  box-shadow: 0 10px 22px rgba(75, 15, 36, 0.16);
  transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
}
.dp-btn-primary:hover .elementor-button,
.dp-btn-primary.elementor-button:hover,
a.dp-btn-primary:hover {
  background: var(--dp-wine-80);
  box-shadow: var(--dp-shadow-lift);
  transform: translateY(-1px);
}

.dp-btn-secondary .elementor-button,
a.dp-btn-secondary {
  min-height: 48px;
  padding: 12px 22px;
  border: 1px solid var(--dp-wine-border);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.55);
  color: var(--dp-wine-100);
  font-weight: 700;
}

.dp-btn-sm .elementor-button,
a.dp-btn-sm { min-height: 38px; padding: 8px 14px; font-size: 14px; }

Классы вешать на виджет Button через Advanced → CSS Classes: dp-btn-primary, dp-btn-secondary, dp-btn-sm (комбинируются: dp-btn-primary dp-btn-sm).

---

9. Формы, поля, search

Site Settings → Form Fields:

Property	Value
Background	#ffffff
Text	#161616
Placeholder	#66605f
Border	1px solid rgba(102, 96, 95, 0.24)
Border radius	8px
Padding	12–14px
Focus border	#4b0f24
Focus shadow	0 0 0 4px rgba(75, 15, 36, 0.08)
Error color	#a33a2f

.dp-form .elementor-field {
  border: 1px solid var(--dp-border-strong);
  border-radius: 8px;
  background: #fff;
  color: var(--dp-black);
  font-family: Inter, Arial, sans-serif;
  font-size: 14px;
  padding: 12px 14px;
}
.dp-form .elementor-field:focus {
  border-color: var(--dp-wine-100);
  box-shadow: var(--dp-focus-ring);
  outline: none;
}
.dp-form .elementor-field-label {
  color: var(--dp-gray-700);
  font-size: 13px;
  font-weight: 700;
}
.dp-form .elementor-message-danger { color: var(--dp-error); }

.dp-select {
  appearance: none;
  padding: 7px 36px 7px 12px;
  min-height: 40px;
  border: 1px solid var(--dp-border-strong);
  border-radius: 8px;
  background: #fff url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path fill='none' stroke='%2330343a' stroke-width='1.5' d='M1 1l5 5 5-5'/></svg>") no-repeat right 14px center;
  font-family: Inter, Arial, sans-serif;
  font-weight: 600;
}

.dp-search {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  border: 1px solid var(--dp-border-strong);
  border-radius: 8px;
  background: #fff;
  overflow: hidden;
  transition: border-color .2s, box-shadow .2s;
}
.dp-search:focus-within {
  border-color: var(--dp-wine-100);
  box-shadow: var(--dp-focus-ring);
}

Обязательные состояния для QA: default, hover, focus, filled, disabled, error, required, textarea, submit loading, success screen, mobile keyboard.

---

10. Карточки

10.1 Базовая карточка

.dp-card {
  min-width: 0;
  border: 1px solid var(--dp-border-med);
  border-radius: var(--dp-radius-sm);
  background: #fff;
  box-shadow: var(--dp-shadow-soft);
  overflow: hidden;
  transition: transform .2s ease, box-shadow .2s ease;
}
.dp-card:hover { transform: translateY(-3px); box-shadow: var(--dp-shadow-lift); }

.dp-card-title {
  color: var(--dp-black);
  font-family: Montserrat, Inter, Arial, sans-serif;
  font-size: 24px;
  line-height: 1.15;
  font-weight: 800;
  text-transform: uppercase;
}
.dp-card-text { color: var(--dp-gray-600); font-size: 14px; line-height: 1.45; }

10.2 Product card (grid)

В Elementor построить как Container:

.dp-product-card (Container, display=flex vertical)
  .dp-product-media  → Image widget c .dp-product-photo
  .dp-product-footer → 2 колонки: title + price + small button

CSS:

.dp-product-photo { object-fit: contain; object-position: center; max-height: 200px; }
.dp-product-price { color: var(--dp-wine-100); font-size: 18px; font-weight: 800; }

10.3 Product card (list, catalog)

3 колонки на desktop, 1 на mobile:

.dp-product-list {
  display: grid;
  grid-template-columns: 210px minmax(0, 1fr) 220px;
  gap: 24px;
  align-items: center;
  padding: 20px;
}
@media (max-width: 1080px) { .dp-product-list { grid-template-columns: 160px 1fr; } .dp-product-list__actions { grid-column: 1 / -1; } }
@media (max-width: 720px)  { .dp-product-list { grid-template-columns: 1fr; } }

В Elementor собрать как Container с display: grid через Custom CSS, либо как Inner Section с фиксированными ширинами колонок (проще, но менее адаптивно).

10.4 Bottle card + варианты

.dp-bottle-card { /* extends .dp-card */ }
.dp-bottle-card__media { padding: 32px 0; display: grid; place-items: center; }
.dp-bottle-card__photo { object-fit: contain; }

.dp-bottle-card--tuscany  .dp-bottle-card__media { background: linear-gradient(135deg, #b16d2c 0%, #c8ad94 52%, #dfe5eb 100%); }
.dp-bottle-card--mosel    .dp-bottle-card__media { background: linear-gradient(135deg, #214f3d 0%, #8aa38e 48%, #e8ebdc 100%); }
.dp-bottle-card--wine     .dp-bottle-card__media { background: linear-gradient(135deg, #6d1c36 0%, #9b5366 46%, #e6dce1 100%); }
.dp-bottle-card--gold     .dp-bottle-card__media { background: linear-gradient(135deg, #b9965b 0%, #d7c18b 48%, #eef2f6 100%); }
.dp-bottle-card--clean    .dp-bottle-card__media { background: linear-gradient(135deg, #edf1f5 0%, #d7dee7 100%); }
.dp-bottle-card--compact  { /* scale-down variant */ }
.dp-bottle-card--horizontal { display: grid; grid-template-columns: 180px 1fr; }

Варианты подключаются комбинацией классов: dp-bottle-card dp-bottle-card--tuscany.

10.5 Feature card с номером (about)

<article class="dp-feature-card">
  <span class="dp-feature-card__num">01</span>
  <h3>Удобный каталог</h3>
  <p>Фильтры по типу, региону, производителю…</p>
</article>

.dp-feature-card { padding: 22px; min-height: 210px; display: grid; align-content: space-between; }
.dp-feature-card__num { color: var(--dp-gold); font-size: 12px; font-weight: 800; text-transform: uppercase; }
.dp-feature-card h3 { margin: 18px 0 8px; font-family: Montserrat; font-weight: 800; font-size: 22px; text-transform: uppercase; }

10.6 Info card / contact panel / contact form

Все три на одном surface-шаблоне (.dp-surface) + padding 24px. В Elementor: один Container-пресет, меняется только внутренний контент.

10.7 Meta list (product detail)

<dl class="dp-meta-list">
  <div><span>Regione</span><strong>Toscana</strong></div>
  <div><span>Annata</span><strong>2020</strong></div>
  …
</dl>

.dp-meta-list { display: grid; gap: 12px; margin: 28px 0; }
.dp-meta-list div { display: flex; justify-content: space-between; gap: 18px; padding-bottom: 12px; border-bottom: 1px solid var(--dp-border-med); }
.dp-meta-list span { color: var(--dp-gray-600); }

---

11. Теги / chips / статусы

.dp-tag, .dp-chip {
  display: inline-flex; align-items: center;
  min-height: 30px; padding: 6px 10px;
  border-radius: 8px;
  font: 800 12px/1 Inter, sans-serif;
  text-transform: uppercase;
}
.dp-tag--filled, .dp-chip--active { background: var(--dp-wine-100); color: #fff; }
.dp-tag--outline { border: 1px solid var(--dp-wine-border); color: var(--dp-wine-100); background: transparent; }
.dp-tag--gold { background: rgba(185, 150, 91, 0.18); color: #7c5f26; }

В Elementor: Heading widget с HTML tag = span, Button widget без ссылки, либо Text Editor.

---

12. Hero, page hero, editorial hero

12.1 .dp-hero (home)

.dp-hero {
  min-height: 100vh;
  padding: 80px 0;
  color: #f8fafc;
  background:
    linear-gradient(100deg, rgba(22, 20, 17, 0.84) 0%, rgba(22, 20, 17, 0.58) 38%, rgba(22, 20, 17, 0.12) 72%),
    url("/wp-content/uploads/hero.jpg") center / cover;
}
.dp-hero h1 { font-size: clamp(40px, 5.6vw, 76px); line-height: 1; text-transform: uppercase; font-weight: 800; }
@media (max-width: 720px) { .dp-hero { min-height: 620px; } }

12.2 .dp-page-hero с модификаторами

Четыре варианта фонового изображения (--about, --contacts, --guidelines, --news). Задаются модификаторами через CSS Classes на Elementor секции + background image в Style панели, либо через CSS url-ы.

.dp-page-hero { padding: 78px 0; color: #f8fafc; background-size: cover; background-position: center; }
.dp-page-hero__inner { display: grid; grid-template-columns: minmax(0, 0.72fr) minmax(280px, 0.28fr); gap: 36px; align-items: end; }
.dp-page-hero h1 { font-size: clamp(40px, 5.6vw, 76px); line-height: 0.98; text-transform: uppercase; font-weight: 800; }
.dp-page-hero__meta { padding: 22px; background: #fff; color: var(--dp-black); border-radius: var(--dp-radius-sm); box-shadow: var(--dp-shadow-soft); }

В .dp-page-hero накладывать linear-gradient поверх фонового изображения через background shorthand (Elementor → Style → Background overlay → Gradient).

---

13. Header

Исходник: css/site.css:47–369, components/menu.html.

Правила переноса:

1. Не меняйте текущий Header template сразу.
2. Дублируйте → Header DP UI Kit Draft.
3. Примените классы и стили на копии.
4. После проверки назначьте через Theme Builder → Header → Display Conditions.

Sticky + blur + border:

.dp-header {
  position: sticky; top: 0; z-index: 40;
  background: var(--dp-header-bg);
  border-bottom: 1px solid rgba(102, 96, 95, 0.18);
  box-shadow: var(--dp-shadow-header);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

.dp-nav a,
.dp-nav .elementor-item {
  color: var(--dp-gray-700);
  font: 800 12px/1.2 Inter, sans-serif;
  text-transform: uppercase;
}
.dp-nav a:hover,
.dp-nav .elementor-item:hover,
.dp-nav .elementor-item-active { color: var(--dp-wine-100); }

Mega menu

Стандартный Elementor Nav Menu не даёт асимметричный 4-колоночный grid. Варианты:

• Вариант A (рекомендуется): кастомный HTML-виджет с готовой разметкой components/menu.html + CSS-классы dp-mega-menu, dp-mega-menu__grid. Открытие/закрытие — минимальный JS (50 строк) либо CSS-only через :focus-within.
• Вариант B: плагин JetMenu / Max Mega Menu. Даёт drag-and-drop контент в колонках, но потребует доработки CSS, чтобы колонки были 1.05fr 0.82fr 1.25fr 0.88fr.
• Вариант C: простой dropdown Elementor Pro без 4-колонок (запасной путь).

CSS-контур:

.dp-mega-menu {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: min(1240px, calc(100vw - 40px));
  padding: 28px;
  background: #fff;
  border-radius: var(--dp-radius-md);
  box-shadow: var(--dp-shadow-lift);
}
.dp-mega-menu__grid {
  display: grid;
  grid-template-columns: 1.05fr 0.82fr 1.25fr 0.88fr;
  gap: 24px;
}
.dp-mega-menu__appellations {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px 24px;
}
@media (max-width: 1080px) { .dp-mega-menu__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 720px)  { .dp-mega-menu__grid { grid-template-columns: 1fr; } }

JS-требования: hover desktop с задержкой 150ms, click/tap mobile, Esc закрывает, focus-trap внутри открытого меню, aria-expanded, role="menu".

Header icons

Inline SVG с stroke: currentColor; stroke-width: 1.45. Задать через Icon widget (SVG upload) либо HTML-виджет. Класс .dp-header-icon + .dp-header-icon--air для варианта без бордера.

---

14. Footer

Исходник: css/site.css:2042–…, components/footer.html.

Структура (desktop): 210px / 1fr / 250px — brand block, nav 3 группы, контакты + соцсети. Карточная панель на белом surface.

.dp-footer { padding: 32px 0 40px; border-top: 1px solid rgba(102, 96, 95, 0.12); background: var(--dp-bg); }
.dp-footer__container {
  padding: 24px 28px 20px;
  border: 1px solid var(--dp-border-med);
  border-radius: var(--dp-radius-sm);
  background: #fff;
  box-shadow: var(--dp-shadow-soft);
}
.dp-footer__main {
  display: grid;
  grid-template-columns: minmax(170px, 210px) minmax(0, 1fr) minmax(210px, 250px);
  gap: 24px 32px;
  align-items: start;
}
@media (max-width: 1080px) { .dp-footer__main { grid-template-columns: 1fr 1fr; } }
@media (max-width: 720px)  { .dp-footer__main { grid-template-columns: 1fr; } }

Порядок: дублировать текущий Footer template → назвать Footer DP UI Kit Draft → применить классы → проверить → назначить.

---

15. Каталог и single product

Catalog (archive)

Переносите поэтапно — не все блоки сразу:

1. Визуальный стиль карточки (.dp-product-card, .dp-product-list).
2. Toolbar + sort (.dp-catalog-toolbar, .dp-select).
3. Filters / chips (.dp-chip + .dp-chip--active).
4. List / compact / b2b варианты.
5. Hover lift + skeleton / empty state.
6. Breadcrumbs (новый компонент, в макете нет).
7. Pagination (новый компонент, в макете нет).

Минимальный набор классов:

dp-catalog
dp-catalog-toolbar
dp-select
dp-product-card
dp-product-list
dp-product-price
dp-card-title
dp-card-text
dp-tag dp-tag--filled dp-tag--outline
dp-btn-primary dp-btn-sm
dp-chip dp-chip--active

Single product

• .dp-product-hero — 2 колонки (image + info).
• .dp-product-photo с object-fit: contain.
• .dp-meta-list — свойства 4 пары label/value.
• CTA — .dp-btn-primary + .dp-btn-secondary side-by-side.
• Breadcrumbs сверху.
• Блок «похожие товары» — переиспользуем .dp-product-card.

---

16. Новости, about, contacts, guidelines

News single (2 верстки)

В репозитории две версии: news-villa-raiano.html и -v2.html. Решите, какая идёт в production, вторую оставьте как черновик.

• Editorial hero (.dp-page-hero + --news).
• .dp-article-layout { grid-template-columns: 0.68fr 0.32fr } — статья + sidebar с meta.
• .dp-article-body — типографика: .lead 22px/1.48, h2/h3, параграфы 18px/1.55.
• Author/byline / дата — добавить новым компонентом (в макете нет).

About

• .dp-page-hero dp-page-hero--about.
• .dp-about-grid { grid-template-columns: 0.58fr 0.42fr }.
• 4 .dp-feature-card с числовым значком <span>01</span>….

Contacts / Contacts-auth

• .dp-page-hero dp-page-hero--contacts.
• .dp-contacts-layout { grid-template-columns: 0.68fr 0.32fr }.
• .dp-contact-form + .dp-contact-panel.
• contacts-auth.html — выяснить, это залогиненный стейт или отдельная страница «регистрации». От этого зависит, WooCommerce My Account endpoint или кастомная страница.

Article guidelines

• Тот же .dp-page-hero + --guidelines.
• .dp-article-body с расширенным набором блоков (tables, ul, code).

---

17. Страница UI Kit Preview

Создайте страницу /ui-kit-preview/. Разместите:

1. Color swatches (DP Wine 100/80, Gray 700/600/300, Gold, Blue, Background, Surface, Error).
2. Типографика: H1, H2, H3, body, lead, caption, editorial H.
3. Кнопки: primary, secondary, small, disabled, hover, focus.
4. Формы: input default/focus/error/disabled, select, search bar, textarea.
5. Product card (grid + list + compact + b2b).
6. Bottle card — все 5 вариантов.
7. Feature card (01–04).
8. Info card / contact panel / contact form.
9. Meta list.
10. Tags, chips (filled/outline/gold).
11. Section heading, section heading split.
12. Eyebrow.
13. Page hero превью.
14. Header + mega-menu превью (или ссылка на staging).
15. Footer превью.
16. Breadcrumbs (новый компонент).
17. Pagination (новый компонент).

Эта страница — контрольная витрина. Любое изменение токенов проверяется на ней первым.

---

18. Декомпозиция работ

Формат: элемент → что делать в Elementor → оценка (S/M/L) → зависимости.

A. Global settings (~1 день)

1. Global Colors DP palette — S — нет.
2. Global Fonts DP — S — нет.
3. Container width + default padding — S — нет.
4. Form Fields Site Settings — S — нет.
5. Buttons Site Settings — S — нет.

B. Custom CSS layer (~1 день)

6. :root переменные --dp-* — S — A.
7. .dp-* утилиты (section, surface, eyebrow, heading) — S — 6.
8. Responsive overrides (1080/720px) — S — 7.

C. Atom-компоненты (~2 дня)

9. .dp-btn-* (primary/secondary/sm + states) — S.
10. .dp-form-* (input/select/search/textarea + states) — M.
11. .dp-tag/.dp-chip все варианты — S.
12. .dp-card, .dp-surface — S.

D. Molecule-компоненты (~3 дня)

13. .dp-product-card (grid) — M.
14. .dp-product-list (catalog list + compact + b2b) — L (требует grid в Container).
15. .dp-bottle-card + 5 модификаторов — M.
16. .dp-feature-card + номер — S.
17. .dp-meta-list — S.
18. .dp-info-card, .dp-contact-panel, .dp-contact-form — M.
19. .dp-section-heading, .dp-section-heading--split — S.

E. Organisms (~3 дня)

20. .dp-hero (home) — M.
21. .dp-page-hero + 4 модификатора — M.
22. .dp-article-body editorial типографика — M.
23. .dp-footer (копия существующего) — M.
24. .dp-header sticky + blur (копия) — M.
25. Mega menu (кастомный HTML + CSS + минимальный JS) — L — критический путь.

F. Page templates (~3 дня)

26. Home Template — M — B, C, D, E.
27. Single Product Template — M — D.
28. Catalog Archive Template — L (требует WooCommerce или CPT) — D.
29. Single News Post Template — M — D, E.
30. About Page Template — S — D, E.
31. Contacts Page Template — S — D, E.
32. Article Guidelines Template — S — D, E.
33. UI Kit Preview — M — C, D, E.

G. Пробелы макета (~2 дня)

34. Breadcrumbs компонент — S.
35. Pagination компонент — S.
36. 404 page — S.
37. Cookie/privacy banner — S.
38. Author/byline на news — S.
39. Empty/loading states каталога — M.

H. QA и публикация (~2 дня)

40. QA по чеклисту §19.
41. Rollback-план §20.
42. Regenerate CSS & Data, очистка кэшей.
43. Production выкатка.

Суммарно ориентировочно 15–17 рабочих дней одним разработчиком при наличии готового Elementor Pro и chosen mega-menu strategy.

---

19. План по этапам (6 фаз)

Фаза 1. Foundation (1–2 дня). Backup, staging, Global Colors/Fonts/Layout, Custom CSS layer (:root + .dp-* утилиты). QA: на тестовой странице видны цвета, шрифты, общие классы.

Фаза 2. Atom + molecule (3–4 дня). Кнопки, формы, теги, .dp-card, .dp-meta-list, .dp-feature-card, .dp-info-card. QA: страница UI Kit Preview собрана на 70%.

Фаза 3. Organisms draft (3–4 дня). Header DP UI Kit Draft, Footer DP UI Kit Draft, mega menu (HTML-виджет), .dp-hero, .dp-page-hero. Не назначать на production до фазы 6. QA: превью всех хедеров/футеров на staging.

Фаза 4. Pages (3–4 дня). Home, About, Contacts, Contacts-auth, Article Guidelines, News Single (2 варианта), UI Kit Preview. Catalog и Single Product — отдельно, после Woo-конфигурации. QA: кликабельный staging-сайт.

Фаза 5. Catalog / Commerce (2–3 дня). Archive, Single Product, filters, pagination, breadcrumbs, empty state. Привязка к WooCommerce или кастомному CPT product. QA: добавление товара, фильтрация, отправка CTA.

Фаза 6. Switchover (1 день). Назначение Header/Footer, выключение старых шаблонов, Regenerate CSS & Data, CDN cache purge, incognito-проверка, смоук-тест всех страниц.

---

20. Что делать нельзя

Не добавляйте глобально такие правила:

* { margin: 0; padding: 0; }
button { all: unset; }
a { color: inherit; text-decoration: none; }
h1, h2, h3 { margin: 0; }
input, select, textarea { all: unset; }

Они ломают тему, плагины, WooCommerce, формы, меню и старые страницы.

Также не стоит:

• удалять старые Elementor Global Colors;
• массово заменять цвета по всему сайту;
• менять breakpoints без полного responsive QA;
• вставлять весь site.css в Elementor;
• переносить ui-kit.css и sidebar UI-kit витрины;
• менять Header/Footer на production без дубликата;
• переносить ui-kit.html как production-страницу;
• ставить position: fixed на header вместо sticky (ломает Elementor Pro Sticky effects).

---

21. QA checklist перед публикацией

Страницы:

• Home (hero, producers, news, recommendations).
• Catalog (toolbar, list, hover, sort, filters, breadcrumbs, pagination).
• Single Product (meta-list, CTA, related).
• About.
• Contacts + contacts-auth.
• News single (обе верстки).
• Article guidelines.
• WooCommerce cart/checkout/account (если используется).
• UI Kit Preview.

Для каждого экрана:

• нет горизонтального скролла;
• текст не обрезается;
• кнопки не ломаются;
• hover/focus видны;
• карточки не прыгают по высоте;
• картинки не растягиваются;
• меню открывается/закрывается клавиатурой;
• mega menu закрывается по Esc;
• формы отправляются;
• ошибки форм читаемы;
• контраст AA ≥ 4.5;
• sticky header работает на iOS Safari;
• backdrop-filter имеет fallback (solid bg) для старых браузеров;
• lighthouse performance ≥ 80, accessibility ≥ 95.

Устройства:

• Chrome desktop.
• Safari desktop (macOS).
• Firefox desktop.
• iPhone Safari (iOS 17+).
• Android Chrome.
• Таблет 1024px.

---

22. Публикация

1. Свежий backup production.
2. Экспорт текущих Elementor templates и Site Settings.
3. Перенос Global Colors / Fonts.
4. Вставка проверенного CSS-слоя.
5. Импорт / обновление шаблонов.
6. Назначение Header / Footer draft → main.
7. Elementor → Tools → Regenerate CSS & Data.
8. Очистка кэша плагина оптимизации (WP Rocket / W3TC / LiteSpeed).
9. Очистка server/CDN кэша.
10. Проверка в incognito на desktop и mobile.
11. Смоук-тест: home, catalog, product, contacts form, 1 новость.

---

23. План отката

Перед публикацией должны быть готовы:

• backup production;
• экспорт старых Elementor templates;
• список изменённых Global Colors / Fonts;
• копия добавленного Custom CSS;
• скриншоты ключевых страниц до переноса;
• список условий отображения Header / Footer до изменения.

Если что-то сломалось:

1. Отключить новый Custom CSS в Site Settings.
2. Вернуть старый Header/Footer template (Theme Builder → Conditions).
3. Regenerate CSS & Data.
4. Очистить кэш.
5. Если проблема осталась — восстановить backup.

---

24. Минимальный скоуп первого релиза

Если нужно быстро показать «новое лицо» без полной миграции:

1. Global Colors DP.
2. Global Fonts DP H1/H2/H3/Body/Button.
3. :root + .dp-* CSS-слой.
4. .dp-btn-primary, .dp-btn-secondary, .dp-btn-sm.
5. .dp-card, .dp-form, .dp-tag, .dp-eyebrow.
6. Header DP UI Kit Draft на одной staging-странице.
7. Footer DP UI Kit Draft там же.
8. Страница UI Kit Preview.

Этого достаточно для валидации дизайн-системы. Catalog, single product, news — следующий релиз.

---

Приложение A. Маппинг исходников → разделы документа

Исходник	Линии	Раздел
css/tokens.css	1–35	§4, §5, §6
css/site.css	47–55 (header sticky)	§13
css/site.css	242–369 (mega menu)	§13
css/site.css	279–288 (eyebrow)	§7
css/site.css	428–461 (hero)	§12.1
css/site.css	870–897 (bottle pseudo)	§2.3 #3, §10.4
css/site.css	976–1001 (product list)	§10.3
css/site.css	1104–1253 (bottle cards + variants)	§10.4
css/site.css	1385–1477 (page hero)	§12.2
css/site.css	1580–1600 (feature card)	§10.5
css/site.css	2024–2040 (meta list)	§10.7
css/site.css	2042–2100 (footer)	§14
css/site.css	2227–2500 (media queries)	§7, все compo
components/menu.html	весь	§13 (mega menu HTML)
components/footer.html	весь	§14