diff --git a/.gitignore b/.gitignore index 5281e8f..543c0b9 100644 --- a/.gitignore +++ b/.gitignore @@ -3,3 +3,4 @@ node_modules/ dist/ _site/ .env +.claude/ 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

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

-

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

-
-
-
- - -
- - - diff --git a/article-guidelines.html b/article-guidelines.html deleted file mode 100644 index 257f26e..0000000 --- a/article-guidelines.html +++ /dev/null @@ -1,121 +0,0 @@ - - - - - DP Trade — Article Guidelines - - -
- -
-
-
-
-

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 deleted file mode 100644 index 9f82d3b..0000000 Binary files a/assets/images/00073820_1.png and /dev/null differ diff --git a/assets/images/00080768_1.png b/assets/images/00080768_1.png deleted file mode 100644 index 0bc9d72..0000000 Binary files a/assets/images/00080768_1.png and /dev/null differ diff --git a/assets/images/00081538_1.png b/assets/images/00081538_1.png deleted file mode 100644 index 24e149f..0000000 Binary files a/assets/images/00081538_1.png and /dev/null differ diff --git a/assets/images/00081726_1.png b/assets/images/00081726_1.png deleted file mode 100644 index 2c866d3..0000000 Binary files a/assets/images/00081726_1.png and /dev/null 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 deleted file mode 100644 index d540b6f..0000000 Binary files a/assets/images/photo_2026-04-06_16-53-23-2.jpg and /dev/null 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 deleted file mode 100644 index a474acc..0000000 Binary files a/assets/images/photo_2026-04-06_16-53-23.jpg and /dev/null 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 deleted file mode 100644 index c327af5..0000000 Binary files a/assets/images/photo_2026-04-06_16-53-24.jpg and /dev/null 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 deleted file mode 100644 index ab03f6b..0000000 Binary files a/assets/images/photo_2026-04-06_16-53-26.jpg and /dev/null differ diff --git a/assets/js/components.js b/assets/js/components.js deleted file mode 100644 index 5d8086d..0000000 --- a/assets/js/components.js +++ /dev/null @@ -1,13 +0,0 @@ -(function () { - async function load(id, url) { - var el = document.getElementById(id); - if (!el) return; - var r = await fetch(url); - if (!r.ok) return; - el.outerHTML = await r.text(); - } - document.addEventListener('DOMContentLoaded', function () { - load('site-header', 'components/menu.html'); - load('site-footer', 'components/footer.html'); - }); -})(); diff --git a/bottle-cards.html b/bottle-cards.html deleted file mode 100644 index b29536d..0000000 --- a/bottle-cards.html +++ /dev/null @@ -1,241 +0,0 @@ - - - - - DP Trade — Bottle Card Variants - - -
- -
-
-
-
-

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 deleted file mode 100644 index fea282e..0000000 --- a/catalog.html +++ /dev/null @@ -1,89 +0,0 @@ - - - - - DP Trade — Catalog - - -
- - -
-
-
-
-

Catalog / Country

-

Венгрия

-
-
- Всего найдено: 22 - Все в избранное - Очистить избранное -
-
- -
- Всего найдено: 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 deleted file mode 100644 index 8a8251d..0000000 --- a/components/footer.html +++ /dev/null @@ -1,73 +0,0 @@ - diff --git a/components/head.js b/components/head.js deleted file mode 100644 index ed3001c..0000000 --- a/components/head.js +++ /dev/null @@ -1,17 +0,0 @@ -(function () { - var css = document.currentScript.getAttribute('data-css') || 'css/site.css'; - document.currentScript.insertAdjacentHTML('beforebegin', - '' + - '' + - '' + - '' + - '' + - '' + - ' - DP Trade — Контакты / Auth Gate - - -
- -
-
-
-
-

Контакты

-

Связаться с DP Trade

-

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

-
- -
-
- -
-
-
-
- Телефон - +7 (495) 937-94-60 -

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

-
-
- Email - dptr@dp-trade.ru -

Удобно для запросов прайса, карточек производителей и B2B-документов.

-
-
- Юридическая информация -

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

-
-
-
-
Требуется аккаунт
-

Заявка доступна после входа

-

Мы показываем телефон и email открыто, но форму заявки менеджеру оставляем внутри личного кабинета: так менеджер сразу видит компанию, историю запросов и коммерческий статус клиента.

-
- Войти - Зарегистрироваться -
-
- После входа откроется: - форма заявки, автозаполнение контактов, привязка к компании и история обращений. -
-
- - - -
-
-
-
-
- - -
- - - diff --git a/contacts.html b/contacts.html deleted file mode 100644 index c8772d8..0000000 --- a/contacts.html +++ /dev/null @@ -1,59 +0,0 @@ - - - - - DP Trade — Контакты - - -
- -
-
-
-
-

Контакты

-

Связаться с DP Trade

-

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

-
- -
-
- -
-
-
-
- Телефон - +7 (495) 937-94-60 -

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

-
-
- Email - dptr@dp-trade.ru -

Удобно для запросов прайса, карточек производителей и B2B-документов.

-
-
- Юридическая информация -

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

-
-
-
-

Заявка менеджеру

- - - - -
-
-
-
- - -
- - - diff --git a/css/site.css b/css/site.css deleted file mode 100644 index 9e441e7..0000000 --- a/css/site.css +++ /dev/null @@ -1,2541 +0,0 @@ -@import url("tokens.css"); - -* { - box-sizing: border-box; -} - -html { - scroll-behavior: smooth; -} - -body { - margin: 0; - background: var(--color-background-base); - color: var(--color-neutral-black); - font-family: var(--font-body); - font-size: 16px; - line-height: 1.5; -} - -img { - display: block; - max-width: 100%; -} - -a { - color: inherit; - text-decoration: none; -} - -button, -input, -select { - font: inherit; -} - -.site-shell { - min-height: 100vh; - display: flex; - flex-direction: column; -} - -.container { - width: min(100% - 40px, var(--container)); - margin: 0 auto; -} - -.site-header { - position: sticky; - top: 0; - z-index: 20; - background: rgba(248, 250, 252, 0.94); - border-bottom: 1px solid rgba(102, 96, 95, 0.18); - box-shadow: 0 10px 28px rgba(22, 22, 22, 0.05); - backdrop-filter: blur(18px); -} - -.header-top { - display: grid; - grid-template-columns: 170px minmax(260px, 1fr) auto; - align-items: center; - gap: 20px; - min-height: 72px; -} - -.brand-logo { - position: relative; - display: inline-block; - width: fit-content; - color: var(--color-accent-blue); - font-family: var(--font-heading-retail); - font-size: 26px; - font-weight: 800; - letter-spacing: 0; - line-height: 0.9; - text-transform: uppercase; -} - -.brand-logo span:first-child { - color: var(--color-primary-wine-80); -} - -.brand-logo small { - position: absolute; - left: 54px; - top: 24px; - color: var(--color-primary-wine-80); - font-size: 8px; - font-weight: 700; - white-space: nowrap; -} - -.search-bar { - display: grid; - grid-template-columns: 44px minmax(0, 1fr); - align-items: center; - min-height: 44px; - border: 1px solid rgba(102, 96, 95, 0.24); - border-radius: var(--radius-sm); - background: var(--color-surface); -} - -.search-bar:focus-within { - border-color: var(--color-primary-wine-100); - box-shadow: 0 0 0 4px rgba(75, 15, 36, 0.08); -} - -.search-bar button { - width: 44px; - height: 42px; - border: 0; - background: transparent; - color: var(--color-primary-wine-100); - font-size: 18px; - cursor: pointer; -} - -.search-bar input { - min-width: 0; - border: 0; - outline: 0; - color: var(--color-neutral-black); - font-size: 14px; -} - -.header-actions { - display: flex; - align-items: center; - gap: 10px; -} - -.phone-link { - color: var(--color-accent-blue); - font-size: 15px; - font-weight: 800; - white-space: nowrap; -} - -.header-icon { - width: 38px; - height: 38px; - border: 1px solid rgba(75, 15, 36, 0.14); - border-radius: var(--radius-sm); - background: transparent; - color: var(--color-primary-wine-100); - display: inline-grid; - place-items: center; - transition: background 0.18s ease, border-color 0.18s ease, transform 0.18s ease; -} - -.header-icon:hover { - border-color: rgba(75, 15, 36, 0.36); - background: rgba(75, 15, 36, 0.06); - transform: translateY(-1px); -} - -.header-icon svg { - width: 20px; - height: 20px; - fill: none; - stroke: currentColor; - stroke-linecap: round; - stroke-linejoin: round; - stroke-width: 1.45; -} - -.header-icon--air { - border-color: rgba(75, 15, 36, 0.13); - background: transparent; -} - -.main-nav { - display: flex; - align-items: center; - justify-content: flex-start; - gap: 8px; - min-height: 52px; - overflow-x: auto; - border-top: 1px solid rgba(102, 96, 95, 0.12); -} - -.main-nav > a, -.nav-trigger { - display: inline-flex; - align-items: center; - gap: 7px; - min-height: 34px; - padding: 0 2px; - border: 0; - border-bottom: 2px solid transparent; - border-radius: 0; - background: transparent; - color: var(--color-neutral-gray-700); - font-size: 12px; - font-weight: 800; - letter-spacing: 0; - text-transform: uppercase; - cursor: pointer; - white-space: nowrap; -} - -.main-nav > a:hover, -.nav-item:hover .nav-trigger, -.nav-item:focus-within .nav-trigger { - border-bottom-color: var(--color-primary-wine-100); - background: transparent; - color: var(--color-primary-wine-100); -} - -.nav-chevron { - width: 10px; - height: 10px; - display: inline-grid; - place-items: center; - line-height: 0; -} - -.nav-chevron svg { - width: 9px; - height: 6px; - fill: none; - stroke: currentColor; - stroke-linecap: round; - stroke-linejoin: round; - stroke-width: 1.6; -} - -.nav-item { - position: static; -} - -.nav-item::after { - content: ""; - position: fixed; - left: 0; - right: 0; - top: 102px; - z-index: 19; - display: none; - height: 34px; -} - -.mega-menu { - position: absolute; - left: 50%; - top: 118px; - width: min(var(--container), calc(100vw - 40px)); - max-height: calc(100vh - 142px); - overflow: auto; - padding: 22px; - border: 1px solid rgba(102, 96, 95, 0.18); - background: #f8fafc; - box-shadow: var(--shadow-lift); - transform: translateX(-50%); - display: none; -} - -.nav-item:hover::after, -.nav-item:focus-within::after, -.nav-item:hover .mega-menu, -.nav-item:focus-within .mega-menu { - display: block; -} - -.mega-intro { - display: grid; - grid-template-columns: minmax(220px, 0.7fr) minmax(320px, 1fr); - gap: 18px 28px; - align-items: end; - padding-bottom: 18px; - border-bottom: 1px solid rgba(102, 96, 95, 0.18); -} - -.mega-intro h2 { - font-size: 26px; - font-weight: 800; - text-transform: uppercase; -} - -.eyebrow, -.section-title, -.muted-caps { - margin: 0; - color: var(--color-accent-gold); - font-size: 12px; - font-weight: 800; - letter-spacing: 0; - text-transform: uppercase; -} - -.mega-intro h2, -.section-heading h2, -.hero h1, -.product-card h3 { - margin: 0; - font-family: var(--font-heading); - line-height: 1.08; -} - -.mega-intro p:last-child { - margin: 0; - color: var(--color-neutral-gray-600); -} - -.menu-grid { - display: grid; - grid-template-columns: 1.05fr 0.82fr 1.25fr 0.88fr; - gap: 22px; - padding-top: 22px; -} - -.menu-column { - display: flex; - flex-direction: column; - gap: 10px; - min-width: 0; -} - -.menu-column a { - width: fit-content; - max-width: 100%; - color: var(--color-neutral-gray-700); - font-size: 14px; - font-weight: 600; -} - -.menu-column a:hover { - color: var(--color-primary-wine-80); -} - -.visual-column { - gap: 12px; -} - -.visual-column img { - width: 100%; - aspect-ratio: 4 / 3; - object-fit: cover; - border-radius: var(--radius-sm); -} - -.visual-column p { - margin: 0; - color: var(--color-neutral-gray-600); - font-size: 13px; - line-height: 1.42; -} - -.appellations { - display: grid; - grid-template-columns: 1fr 1fr; - gap: 9px 18px; - align-content: start; -} - -.appellations .section-title { - grid-column: 1 / -1; - margin-bottom: 0; -} - -.appellation-group { - display: flex; - flex-direction: column; - gap: 9px; -} - -.country-link { - font-weight: 800; - text-transform: uppercase; -} - -.popular-list, -.hero-actions, -.product-footer { - display: flex; - align-items: center; - flex-wrap: wrap; - gap: 12px; -} - -.popular-list a, -.tag { - min-height: 34px; - padding: 7px 12px; - border: 1px solid rgba(75, 15, 36, 0.18); - border-radius: var(--radius-sm); - background: var(--color-surface); - color: var(--color-primary-wine-100); - font-size: 13px; - font-weight: 700; -} - -.tag--filled { - background: var(--color-primary-wine-100); - color: var(--color-surface); -} - -.button { - min-height: 48px; - padding: 12px 22px; - border: 1px solid transparent; - border-radius: var(--radius-sm); - display: inline-flex; - align-items: center; - justify-content: center; - gap: 8px; - font-weight: 800; - cursor: pointer; -} - -.button--primary { - background: var(--color-primary-wine-100); - color: var(--color-surface); - box-shadow: 0 10px 22px rgba(75, 15, 36, 0.16); -} - -.button--secondary { - border-color: rgba(75, 15, 36, 0.24); - color: var(--color-primary-wine-100); - background: rgba(248, 250, 252, 0.78); -} - -.button--sm { - min-height: 38px; - padding: 8px 14px; - font-size: 14px; -} - -.hero { - min-height: calc(100vh - 124px); - display: grid; - align-items: end; - padding: 104px 0 72px; - 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("https://images.unsplash.com/photo-1560493676-04071c5f467b?auto=format&fit=crop&w=1800&q=80"); - background-position: center right; - background-size: cover; - color: #f8fafc; -} - -.hero-copy { - width: min(100% - 40px, var(--container)); - max-width: none; - margin: 0 auto; - display: grid; - grid-template-columns: minmax(0, 0.62fr) minmax(220px, 0.38fr); -} - -.hero-copy > * { - grid-column: 1; -} - -.hero h1 { - margin: 12px 0 20px; - max-width: 860px; - font-size: clamp(44px, 6vw, 78px); - font-weight: 800; - text-transform: uppercase; -} - -.hero p:not(.eyebrow) { - max-width: 610px; - color: rgba(255, 253, 250, 0.84); - font-size: 18px; -} - -.section { - padding: 80px 0; -} - -.section-heading { - display: grid; - gap: 8px; - margin-bottom: 32px; -} - -.section-heading--split { - grid-template-columns: minmax(0, 0.9fr) minmax(280px, 0.7fr); - gap: 28px; - align-items: end; -} - -.section-heading--split > p { - margin: 0; - color: var(--color-neutral-gray-600); -} - -.section-heading h2 { - font-size: clamp(32px, 4vw, 50px); - font-weight: 800; - text-transform: uppercase; -} - -.producer-grid { - display: grid; - grid-template-columns: repeat(3, minmax(0, 1fr)); - gap: 16px; -} - -.producer-card { - min-height: 148px; - padding: 20px; - border: 1px solid rgba(102, 96, 95, 0.14); - border-radius: var(--radius-sm); - background: var(--color-surface); - display: grid; - align-content: space-between; - transition: border-color 0.18s ease, transform 0.18s ease; -} - -.producer-card:hover { - border-color: rgba(75, 15, 36, 0.34); - transform: translateY(-2px); -} - -.producer-card span, -.news-card span { - color: var(--color-accent-gold); - font-size: 12px; - font-weight: 800; - text-transform: uppercase; -} - -.producer-card strong { - color: var(--color-primary-wine-100); - font-family: var(--font-heading); - font-size: 24px; - line-height: 1.14; - text-transform: uppercase; -} - -.news-section { - background: #eef2f6; -} - -.news-grid { - display: grid; - grid-template-columns: repeat(3, minmax(0, 1fr)); - gap: 18px; -} - -.news-card { - min-width: 0; - border-radius: var(--radius-sm); - background: var(--color-surface); - overflow: hidden; - box-shadow: var(--shadow-soft); -} - -.news-card > div:last-child { - padding: 18px; - display: grid; - gap: 8px; -} - -.news-card h3 { - margin: 0; - color: var(--color-neutral-black); - font-family: var(--font-heading); - font-size: 20px; - line-height: 1.2; - text-transform: uppercase; -} - -.news-card__image { - min-height: 190px; - background-position: center; - background-size: cover; -} - -.news-card__image--catena { - background-image: linear-gradient(rgba(22, 22, 22, 0.1), rgba(22, 22, 22, 0.1)), url("https://images.unsplash.com/photo-1556760544-74068565f05c?auto=format&fit=crop&w=900&q=80"); -} - -.news-card__image--brand { - background-image: linear-gradient(rgba(22, 22, 22, 0.1), rgba(22, 22, 22, 0.1)), url("https://images.unsplash.com/photo-1506377247377-2a5b3b417ebb?auto=format&fit=crop&w=900&q=80"); -} - -.news-card__image--italy { - background-image: linear-gradient(rgba(22, 22, 22, 0.1), rgba(22, 22, 22, 0.1)), url("https://images.unsplash.com/photo-1528823872057-9c018a7a7553?auto=format&fit=crop&w=900&q=80"); -} - -.type-lab-section { - background: #eef2f6; -} - -.type-options { - display: grid; - grid-template-columns: repeat(4, minmax(0, 1fr)); - gap: 18px; -} - -.type-options--five { - grid-template-columns: repeat(5, minmax(0, 1fr)); -} - -.type-card { - min-width: 0; - min-height: 390px; - padding: 24px; - border: 1px solid rgba(102, 96, 95, 0.16); - border-radius: var(--radius-sm); - background: var(--color-surface); - box-shadow: var(--shadow-soft); - display: flex; - flex-direction: column; - justify-content: space-between; - gap: 28px; -} - -.type-card.is-selected { - border-color: rgba(75, 15, 36, 0.48); - background: linear-gradient(180deg, #ffffff 0%, #eef2f6 100%); - box-shadow: var(--shadow-lift); -} - -.type-card.is-selected::before { - content: "Выбрано для системы"; - width: fit-content; - padding: 7px 10px; - border-radius: var(--radius-sm); - background: var(--color-primary-wine-100); - color: var(--color-surface); - font-size: 12px; - font-weight: 800; - text-transform: uppercase; -} - -.type-card.is-selected-soft { - border-color: rgba(185, 150, 91, 0.62); - background: #f7f4ea; -} - -.type-card.is-selected-soft::before { - content: "Новый компактный"; - width: fit-content; - padding: 7px 10px; - border-radius: var(--radius-sm); - background: var(--color-accent-gold); - color: var(--color-neutral-black); - font-size: 12px; - font-weight: 800; - text-transform: uppercase; -} - -.type-card__meta { - display: flex; - justify-content: space-between; - gap: 14px; - color: var(--color-neutral-gray-600); - font-size: 12px; - font-weight: 800; - text-transform: uppercase; -} - -.type-card__meta strong { - color: var(--color-primary-wine-100); -} - -.type-card h3 { - margin: 0; - color: var(--color-neutral-black); -} - -.type-card p { - margin: 0; - color: var(--color-neutral-gray-600); -} - -.type-usage { - padding-top: 14px; - border-top: 1px solid rgba(102, 96, 95, 0.14); - display: grid; - gap: 6px; -} - -.type-usage strong { - color: var(--color-primary-wine-100); - font-size: 11px; - font-weight: 800; - text-transform: uppercase; -} - -.type-usage span { - color: var(--color-neutral-gray-600); - font-size: 13px; - line-height: 1.42; -} - -.type-scale { - display: flex; - flex-wrap: wrap; - gap: 8px; -} - -.type-scale span { - padding: 6px 9px; - border: 1px solid rgba(75, 15, 36, 0.16); - border-radius: var(--radius-sm); - color: var(--color-primary-wine-100); - font-size: 12px; - font-weight: 800; -} - -.type-card--editorial { - font-family: "Manrope", "Inter", Arial, sans-serif; -} - -.type-card--editorial h3 { - font-family: "Cormorant Garamond", Georgia, serif; - font-size: 46px; - font-weight: 700; - line-height: 0.98; -} - -.type-card--neo { - font-family: "Manrope", "Inter", Arial, sans-serif; -} - -.type-card--neo h3 { - font-family: "Manrope", "Inter", Arial, sans-serif; - font-size: 34px; - font-weight: 800; - line-height: 1.08; -} - -.type-card--classic { - font-family: "Inter", Arial, sans-serif; -} - -.type-card--classic h3 { - font-family: "Playfair Display", Georgia, serif; - font-size: 38px; - font-weight: 700; - line-height: 1.04; -} - -.type-card--retail { - font-family: "Inter", Arial, sans-serif; -} - -.type-card--retail h3 { - font-family: "Montserrat", "Inter", Arial, sans-serif; - font-size: 31px; - font-weight: 800; - line-height: 1.14; - text-transform: uppercase; -} - -.type-card--compact { - font-family: "Inter", Arial, sans-serif; -} - -.type-card--compact h3 { - font-family: "Montserrat", "Inter", Arial, sans-serif; - font-size: 25px; - font-weight: 800; - line-height: 1.16; - text-transform: uppercase; -} - -.compact-type { - font-size: 15px; - line-height: 1.46; -} - -.compact-type .section { - padding: 56px 0; -} - -.compact-type .section-heading { - margin-bottom: 24px; -} - -.compact-type .section-heading h2 { - font-size: clamp(28px, 3.2vw, 40px); - line-height: 1.12; -} - -.catalog-section .catalog-layout { - grid-template-columns: 250px minmax(0, 1fr); - gap: 22px; -} - -.compact-type .filters-panel { - padding: 20px; - gap: 12px; -} - -.compact-type .filters-panel h3 { - margin: 0 0 2px; - font-size: 18px; - line-height: 1.2; -} - -.product-grid--compact { - gap: 16px; -} - -.product-grid--compact .product-card { - padding: 14px; - gap: 12px; -} - -.product-grid--compact .product-media { - min-height: 176px; -} - -.product-grid--compact .bottle { - transform: scale(0.82); -} - -.product-grid--compact .product-card h3 { - font-size: 17px; - line-height: 1.22; -} - -.product-grid--compact .product-card p { - font-size: 13px; -} - -.product-grid--compact .product-footer strong { - font-size: 16px; -} - -.product-grid { - display: grid; - grid-template-columns: repeat(3, minmax(0, 1fr)); - gap: 20px; -} - -.product-card { - min-width: 0; - padding: 16px; - border: 1px solid rgba(102, 96, 95, 0.16); - border-radius: var(--radius-sm); - background: var(--color-surface); - box-shadow: var(--shadow-soft); - display: grid; - gap: 16px; -} - -.product-media { - min-height: 220px; - border-radius: var(--radius-sm); - overflow: hidden; - display: grid; - place-items: center; - background: linear-gradient(140deg, #5d1027, #c8a45d); -} - -.product-photo { - width: auto; - max-width: 132px; - height: 190px; - object-fit: contain; - object-position: center; - border: 0; - box-shadow: none; -} - -.product-media--amber { - background: linear-gradient(140deg, #a8632a, #dde4ec); -} - -.product-media--green { - background: linear-gradient(140deg, #1f4d3a, #e8eadb); -} - -.bottle { - width: 54px; - height: 152px; - border-radius: 16px 16px 10px 10px; - background: linear-gradient(90deg, #161616, #2f2a29 44%, #0c0c0c); - box-shadow: 18px 18px 44px rgba(22, 22, 22, 0.24); - position: relative; -} - -.bottle::before { - content: ""; - position: absolute; - top: -58px; - left: 17px; - width: 20px; - height: 72px; - border-radius: 8px 8px 2px 2px; - background: #171212; -} - -.bottle::after { - content: ""; - position: absolute; - inset: 54px 8px auto; - height: 42px; - border-radius: 4px; - background: #eef2f6; -} - -.product-card h3 { - margin-top: 8px; - font-size: 21px; - font-weight: 800; - text-transform: uppercase; -} - -.product-card p { - margin: 6px 0 0; - color: var(--color-neutral-gray-600); -} - -.product-footer { - justify-content: space-between; -} - -.product-footer strong { - color: var(--color-primary-wine-100); - font-size: 18px; -} - -.catalog-layout { - display: grid; - grid-template-columns: 280px minmax(0, 1fr); - gap: 28px; -} - -.catalog-head { - margin-bottom: 28px; - display: grid; - grid-template-columns: minmax(0, 0.8fr) minmax(520px, 1fr); - gap: 24px; - align-items: end; -} - -.catalog-head h1 { - margin: 6px 0 0; - color: var(--color-primary-wine-100); - font-family: var(--font-heading); - font-size: clamp(34px, 4vw, 52px); - font-weight: 800; - line-height: 1.12; -} - -.catalog-actions { - display: flex; - align-items: center; - justify-content: flex-end; - flex-wrap: wrap; - gap: 14px; -} - -.catalog-actions > span, -.catalog-toolbar > span { - color: var(--color-neutral-gray-700); - font-size: 17px; -} - -.catalog-toolbar { - margin-bottom: 22px; - display: flex; - align-items: center; - justify-content: space-between; - gap: 18px; -} - -.catalog-sort { - width: min(100%, 320px); - min-height: 40px; - padding: 7px 12px; -} - -.product-list { - display: grid; - gap: 18px; -} - -.product-card--list { - min-height: 250px; - padding: 20px; - grid-template-columns: 210px minmax(0, 1fr) 220px; - gap: 28px; - align-items: center; - border-color: rgba(102, 96, 95, 0.08); -} - -.product-image { - min-height: 214px; - max-height: 224px; - overflow: hidden; - display: grid; - place-items: center; -} - -.product-image img { - width: auto; - max-width: 132px; - height: 208px; - object-fit: contain; - object-position: center; - border: 0; - box-shadow: none; -} - -.product-info { - min-width: 0; - display: grid; - gap: 12px; -} - -.product-info h3 { - margin: 0; - color: var(--color-neutral-black); - font-size: clamp(22px, 2.4vw, 32px); - font-weight: 800; - line-height: 1.18; - text-transform: none; -} - -.product-info p { - margin: 0; - color: var(--color-neutral-gray-600); - font-size: 16px; - line-height: 1.38; -} - -.product-info .product-origin { - font-size: 15px; -} - -.product-buy { - min-height: 170px; - display: grid; - align-content: end; - justify-items: end; - gap: 56px; -} - -.product-buy strong { - color: var(--color-neutral-black); - font-size: 28px; - font-weight: 800; - line-height: 1; - white-space: nowrap; -} - -.product-buy .button { - min-width: 180px; -} - -.card-lab-section { - background: - linear-gradient(180deg, rgba(255, 255, 255, 0.7), rgba(244, 246, 249, 0.96)), - var(--color-background-base); -} - -.card-lab-head { - margin-bottom: 42px; - display: grid; - grid-template-columns: minmax(0, 0.72fr) minmax(320px, 0.42fr); - gap: 32px; - align-items: end; -} - -.card-lab-head h1 { - margin: 8px 0 0; - color: var(--color-neutral-black); - font-family: var(--font-heading); - font-size: clamp(38px, 5vw, 72px); - font-weight: 800; - line-height: 0.98; - text-transform: uppercase; -} - -.card-lab-head > p { - margin: 0; - color: var(--color-neutral-gray-600); - font-size: 18px; - line-height: 1.55; -} - -.card-variant-block { - display: grid; - gap: 18px; -} - -.card-variant-block + .card-variant-block { - margin-top: 48px; -} - -.card-variant-title { - display: flex; - justify-content: space-between; - gap: 24px; - align-items: end; -} - -.card-variant-title h2 { - margin: 2px 0 0; - color: var(--color-neutral-black); - font-family: var(--font-heading); - font-size: clamp(24px, 2.6vw, 34px); - font-weight: 800; -} - -.bottle-card-grid, -.bottle-card-mix { - display: grid; - gap: 20px; -} - -.bottle-card-grid { - grid-template-columns: repeat(3, minmax(0, 1fr)); -} - -.bottle-card-mix { - grid-template-columns: minmax(0, 0.92fr) minmax(0, 0.78fr) minmax(320px, 1.3fr); - align-items: stretch; -} - -.bottle-card { - min-width: 0; - padding: 16px; - border: 1px solid rgba(102, 96, 95, 0.12); - border-radius: var(--radius-sm); - background: var(--color-surface); - box-shadow: 0 18px 46px rgba(18, 25, 38, 0.08); - display: grid; - gap: 16px; -} - -.bottle-card__media { - min-height: 224px; - border-radius: var(--radius-sm); - overflow: hidden; - display: grid; - place-items: center; - background: linear-gradient(135deg, #6a1330 0%, #9e6a4e 48%, #d3b966 100%); -} - -.bottle-card__photo { - width: auto; - max-width: 142px; - height: 198px; - object-fit: contain; - object-position: center; - border: 0; - box-shadow: none; -} - -.bottle-card__body { - min-width: 0; -} - -.bottle-card__region { - margin: 0 0 9px; - color: #b59a5a; - font-size: 13px; - font-weight: 800; - letter-spacing: 0.04em; - text-transform: uppercase; -} - -.bottle-card h3 { - margin: 0; - color: var(--color-neutral-black); - font-size: clamp(22px, 2.1vw, 28px); - font-weight: 800; - line-height: 1.08; - text-transform: uppercase; -} - -.bottle-card p { - margin: 8px 0 0; - color: var(--color-neutral-gray-600); - font-size: 16px; - line-height: 1.42; -} - -.bottle-card__details { - font-size: 15px; -} - -.bottle-card__footer { - margin-top: 4px; - display: flex; - justify-content: space-between; - gap: 16px; - align-items: center; -} - -.bottle-card__footer strong { - color: var(--color-primary-wine-100); - font-size: 22px; - font-weight: 800; - white-space: nowrap; -} - -.bottle-card__footer .button { - min-width: 132px; -} - -.bottle-card--tuscany .bottle-card__media { - background: linear-gradient(135deg, #b16d2c 0%, #c8ad94 52%, #dfe5eb 100%); -} - -.bottle-card--mosel .bottle-card__media { - background: linear-gradient(135deg, #214f3d 0%, #8aa38e 48%, #e8ebdc 100%); -} - -.bottle-card--clean .bottle-card__media { - background: linear-gradient(135deg, #edf1f5 0%, #d7dee7 100%); -} - -.bottle-card--clean .bottle-card__photo { - height: 214px; -} - -.bottle-card--compact { - align-content: start; -} - -.bottle-card--compact .bottle-card__media { - min-height: 178px; - background: linear-gradient(135deg, #f3f5f8 0%, #dbe2ea 100%); -} - -.bottle-card--compact .bottle-card__photo { - height: 154px; -} - -.bottle-card--compact h3 { - font-size: 20px; -} - -.bottle-card--compact p { - font-size: 15px; -} - -.bottle-card--horizontal { - grid-template-columns: 180px minmax(0, 1fr); - gap: 20px; - align-items: center; -} - -.bottle-card--horizontal .bottle-card__media { - min-height: 230px; - background: linear-gradient(135deg, #e9eef4 0%, #cfd8e3 100%); -} - -.bottle-card--horizontal .bottle-card__photo { - height: 208px; -} - -.bottle-card__content { - min-width: 0; - display: grid; - gap: 24px; -} - -.catalog-card-variants { - display: grid; - gap: 18px; -} - -.catalog-card-sample { - display: grid; - gap: 10px; -} - -.catalog-card-sample__label { - margin: 0; - color: var(--color-accent-gold); - font-size: 12px; - font-weight: 800; - letter-spacing: 0; - text-transform: uppercase; -} - -.product-card--list-compact { - min-height: 198px; - grid-template-columns: 160px minmax(0, 1fr) 190px; - gap: 22px; -} - -.product-card--list-compact .product-image { - min-height: 164px; - max-height: 174px; -} - -.product-card--list-compact .product-image img { - max-width: 104px; - height: 156px; -} - -.product-card--list-compact .product-info { - gap: 8px; -} - -.product-card--list-compact .product-info h3 { - font-size: clamp(19px, 2vw, 25px); -} - -.product-card--list-compact .product-info p { - font-size: 14px; -} - -.product-card--list-compact .product-buy { - min-height: 132px; - gap: 28px; -} - -.product-card--list-hover { - border-color: rgba(75, 15, 36, 0.28); - box-shadow: 0 22px 54px rgba(25, 37, 62, 0.13); - transform: translateY(-2px); -} - -.product-card--list-hover .product-image { - border-radius: var(--radius-sm); - background: linear-gradient(135deg, #eef2f6 0%, #dde6ef 100%); -} - -.product-card--list-hover .button { - border-color: var(--color-primary-wine-100); -} - -.product-card--list-color { - border-color: rgba(185, 150, 91, 0.24); -} - -.product-card--list-color .product-image { - min-height: 214px; - border-radius: var(--radius-sm); -} - -.product-image--gold { - background: linear-gradient(135deg, #b9965b 0%, #d7c18b 48%, #eef2f6 100%); -} - -.product-image--wine { - background: linear-gradient(135deg, #6d1c36 0%, #9b5366 46%, #e6dce1 100%); -} - -.product-image--green { - background: linear-gradient(135deg, #1f4d3a 0%, #88a28e 48%, #eef2e5 100%); -} - -.product-card--list-b2b { - min-height: 226px; - grid-template-columns: 176px minmax(0, 1fr) 190px; - gap: 24px; -} - -.product-card--list-b2b .product-image { - min-height: 184px; - max-height: 194px; -} - -.product-card--list-b2b .product-image img { - max-width: 108px; - height: 178px; -} - -.product-params { - display: grid; - grid-template-columns: repeat(2, minmax(0, 1fr)); - gap: 8px 14px; -} - -.product-params span { - min-width: 0; - color: var(--color-neutral-gray-600); - font-size: 14px; - line-height: 1.32; -} - -.product-card--list-b2b .product-buy { - min-height: 148px; - gap: 34px; -} - -.content-page { - background: var(--color-background-base); -} - -.page-hero { - padding: 78px 0; - color: #f8fafc; - background: - linear-gradient(100deg, rgba(22, 20, 17, 0.86), rgba(22, 20, 17, 0.48) 54%, rgba(22, 20, 17, 0.22)), - url("https://images.unsplash.com/photo-1506377247377-2a5b3b417ebb?auto=format&fit=crop&w=1800&q=80"); - background-position: center; - background-size: cover; -} - -.page-hero--about { - background-image: - linear-gradient(100deg, rgba(22, 20, 17, 0.84), rgba(22, 20, 17, 0.46) 54%, rgba(22, 20, 17, 0.18)), - url("https://images.unsplash.com/photo-1568213816046-0ee1c42bd559?auto=format&fit=crop&w=1800&q=80"); -} - -.page-hero--contacts { - background-image: - linear-gradient(100deg, rgba(22, 20, 17, 0.86), rgba(22, 20, 17, 0.5) 54%, rgba(22, 20, 17, 0.2)), - url("https://images.unsplash.com/photo-1510812431401-41d2bd2722f3?auto=format&fit=crop&w=1800&q=80"); -} - -.page-hero--guidelines { - background-image: - linear-gradient(100deg, rgba(22, 20, 17, 0.86), rgba(22, 20, 17, 0.5) 54%, rgba(22, 20, 17, 0.22)), - url("https://images.unsplash.com/photo-1516594798947-e65505dbb29d?auto=format&fit=crop&w=1800&q=80"); -} - -.page-hero__inner { - display: grid; - grid-template-columns: minmax(0, 0.72fr) minmax(280px, 0.28fr); - gap: 36px; - align-items: end; -} - -.page-hero h1 { - max-width: 980px; - margin: 10px 0 18px; - font-family: var(--font-heading); - font-size: clamp(40px, 5.6vw, 76px); - font-weight: 800; - line-height: 0.98; - text-transform: uppercase; -} - -.page-hero p { - max-width: 740px; - margin: 0; - font-size: 19px; - line-height: 1.55; -} - -.page-hero__meta, -.info-card, -.feature-card, -.contact-panel, -.contact-form { - border: 1px solid rgba(217, 222, 229, 0.9); - border-radius: var(--radius-sm); - background: var(--color-surface); - box-shadow: var(--shadow-soft); -} - -.page-hero__meta { - padding: 22px; - color: var(--color-neutral-black); -} - -.page-hero__meta span, -.info-card span, -.feature-card span, -.contact-panel span { - color: var(--color-accent-gold); - font-size: 12px; - font-weight: 800; - text-transform: uppercase; -} - -.page-hero__meta strong { - display: block; - margin: 10px 0 8px; - color: var(--color-primary-wine-100); - font-family: var(--font-heading); - font-size: 26px; - line-height: 1.1; - text-transform: uppercase; -} - -.page-hero__meta p { - color: var(--color-neutral-gray-600); - font-size: 15px; - line-height: 1.45; -} - -.article-layout, -.contacts-layout { - display: grid; - grid-template-columns: minmax(0, 0.68fr) minmax(300px, 0.32fr); - gap: 34px; - align-items: start; -} - -.about-grid { - display: grid; - grid-template-columns: minmax(0, 0.58fr) minmax(360px, 0.42fr); - gap: 34px; - align-items: start; -} - -.article-body { - max-width: 860px; -} - -.article-body .lead { - color: var(--color-neutral-black); - font-size: 22px; - line-height: 1.48; -} - -.article-body h2 { - margin: 34px 0 12px; - font-family: var(--font-heading); - font-size: clamp(28px, 3vw, 40px); - font-weight: 800; - line-height: 1.08; - text-transform: uppercase; -} - -.article-body p { - color: var(--color-neutral-gray-600); - font-size: 17px; - line-height: 1.72; -} - -.article-body blockquote { - margin: 30px 0; - padding: 22px 24px; - border-left: 4px solid var(--color-primary-wine-100); - background: #eef2f6; - color: var(--color-neutral-black); - font-size: 20px; - font-weight: 700; - line-height: 1.45; -} - -.article-aside, -.contact-stack { - display: grid; - gap: 16px; -} - -.info-card { - padding: 22px; -} - -.info-card dl { - margin: 18px 0 0; - display: grid; - gap: 12px; -} - -.info-card dl div { - display: flex; - justify-content: space-between; - gap: 18px; - padding-bottom: 10px; - border-bottom: 1px solid rgba(102, 96, 95, 0.14); -} - -.info-card dt { - color: var(--color-neutral-gray-600); -} - -.info-card dd { - margin: 0; - color: var(--color-neutral-black); - font-weight: 800; - text-align: right; -} - -.info-card--accent { - background: #eef2f6; -} - -.info-card--accent p { - color: var(--color-neutral-gray-600); - line-height: 1.55; -} - -.feature-grid { - display: grid; - grid-template-columns: repeat(2, minmax(0, 1fr)); - gap: 16px; -} - -.feature-card { - min-height: 210px; - padding: 22px; - display: grid; - align-content: space-between; -} - -.feature-card h3 { - margin: 18px 0 8px; - color: var(--color-neutral-black); - font-family: var(--font-heading); - font-size: 22px; - text-transform: uppercase; -} - -.feature-card p, -.contact-panel p { - margin: 0; - color: var(--color-neutral-gray-600); - line-height: 1.55; -} - -.muted-section { - background: #eef2f6; -} - -.contact-panel, -.contact-form { - padding: 24px; -} - -.contact-panel a { - display: block; - margin: 8px 0 10px; - color: var(--color-primary-wine-100); - font-family: var(--font-heading); - font-size: clamp(24px, 3vw, 34px); - font-weight: 800; - line-height: 1.1; -} - -.contact-form { - display: grid; - gap: 16px; -} - -.contact-form h2 { - margin: 0; - font-family: var(--font-heading); - font-size: 30px; - text-transform: uppercase; -} - -.contact-form label { - display: grid; - gap: 7px; - color: var(--color-neutral-gray-700); - font-weight: 800; -} - -.contact-form textarea.input { - min-height: 132px; - resize: vertical; -} - -.contact-auth-gate { - position: relative; - overflow: hidden; -} - -.contact-auth-gate::before { - content: ""; - position: absolute; - inset: 0 0 auto; - height: 6px; - background: linear-gradient(90deg, var(--color-primary-wine-100), var(--color-accent-gold)); -} - -.auth-gate__badge { - width: fit-content; - padding: 7px 10px; - border-radius: var(--radius-sm); - background: rgba(75, 15, 36, 0.08); - color: var(--color-primary-wine-100); - font-size: 12px; - font-weight: 800; - text-transform: uppercase; -} - -.contact-auth-gate > p { - margin: 0; - color: var(--color-neutral-gray-600); - line-height: 1.62; -} - -.auth-gate__actions { - display: flex; - flex-wrap: wrap; - gap: 12px; -} - -.auth-gate__note { - padding: 16px; - border: 1px solid rgba(185, 150, 91, 0.28); - border-radius: var(--radius-sm); - background: #f8fafc; - display: grid; - gap: 6px; -} - -.auth-gate__note strong { - color: var(--color-neutral-black); -} - -.auth-gate__note span { - color: var(--color-neutral-gray-600); - line-height: 1.48; -} - -.locked-form-preview { - padding-top: 16px; - border-top: 1px solid rgba(102, 96, 95, 0.14); - display: grid; - gap: 12px; - opacity: 0.62; -} - -.locked-form-preview label { - display: grid; - gap: 7px; - color: var(--color-neutral-gray-600); - font-weight: 800; -} - -.locked-form-preview .input:disabled { - cursor: not-allowed; - background: #eef2f6; - color: var(--color-neutral-gray-600); -} - -.guideline-grid { - display: grid; - grid-template-columns: repeat(3, minmax(0, 1fr)); - gap: 18px; -} - -.guideline-card, -.guideline-checklist { - border: 1px solid rgba(217, 222, 229, 0.9); - border-radius: var(--radius-sm); - background: var(--color-surface); - box-shadow: var(--shadow-soft); -} - -.guideline-card { - min-width: 0; - padding: 24px; - display: grid; - gap: 14px; - align-content: start; -} - -.guideline-card--lead { - grid-column: span 2; - background: #eef2f6; -} - -.guideline-card span { - color: var(--color-accent-gold); - font-size: 12px; - font-weight: 800; -} - -.guideline-card h2, -.guideline-checklist h2 { - margin: 0; - color: var(--color-neutral-black); - font-family: var(--font-heading); - font-size: clamp(24px, 2.6vw, 34px); - font-weight: 800; - line-height: 1.08; - text-transform: uppercase; -} - -.guideline-card p { - margin: 0; - color: var(--color-neutral-gray-600); - line-height: 1.55; -} - -.guideline-card ul, -.guideline-checklist ul { - margin: 0; - padding-left: 18px; - color: var(--color-neutral-gray-700); - line-height: 1.62; -} - -.guideline-card li + li, -.guideline-checklist li + li { - margin-top: 8px; -} - -.guideline-checklist { - padding: 28px; - display: grid; - grid-template-columns: minmax(0, 0.42fr) minmax(0, 0.58fr); - gap: 28px; - align-items: start; -} - -.news-editorial { - background: #f4f6f9; -} - -.editorial-hero { - padding: 54px 0 34px; - background: #f8fafc; - border-bottom: 1px solid rgba(102, 96, 95, 0.14); -} - -.editorial-hero__inner { - display: grid; - grid-template-columns: minmax(0, 0.55fr) minmax(360px, 0.45fr); - gap: 38px; - align-items: end; -} - -.editorial-hero h1 { - margin: 10px 0 18px; - color: var(--color-neutral-black); - font-family: var(--font-heading); - font-size: clamp(42px, 5.6vw, 76px); - font-weight: 800; - line-height: 0.98; - text-transform: uppercase; -} - -.editorial-meta { - display: flex; - gap: 12px; - flex-wrap: wrap; -} - -.editorial-meta span { - padding: 8px 12px; - border: 1px solid rgba(75, 15, 36, 0.16); - border-radius: var(--radius-sm); - color: var(--color-primary-wine-100); - font-size: 13px; - font-weight: 800; -} - -.editorial-hero__image { - margin: 0; - border-radius: var(--radius-sm); - overflow: hidden; - box-shadow: 0 22px 58px rgba(25, 37, 62, 0.12); -} - -.editorial-hero__image img { - width: 100%; - aspect-ratio: 4 / 3; - object-fit: cover; -} - -.editorial-section { - padding: 48px 0; -} - -.editorial-layout { - display: grid; - grid-template-columns: 260px minmax(0, 780px); - gap: 56px; - align-items: start; - justify-content: center; -} - -.editorial-side { - position: sticky; - top: 154px; - padding: 18px 0 0; - border-top: 2px solid var(--color-primary-wine-100); -} - -.editorial-side span { - color: var(--color-accent-gold); - font-size: 12px; - font-weight: 800; - text-transform: uppercase; -} - -.editorial-side p { - margin: 12px 0 0; - color: var(--color-neutral-gray-600); - line-height: 1.55; -} - -.editorial-side ol { - margin: 16px 0 0; - padding: 0; - display: grid; - gap: 12px; - list-style: none; -} - -.editorial-side li { - display: grid; - gap: 2px; -} - -.editorial-side strong { - color: var(--color-primary-wine-100); - font-family: var(--font-heading); - font-size: 22px; -} - -.editorial-side small { - color: var(--color-neutral-gray-600); - font-size: 13px; -} - -.editorial-body .lead { - color: var(--color-neutral-black); - font-size: clamp(22px, 2.4vw, 30px); - line-height: 1.38; -} - -.editorial-body p { - color: var(--color-neutral-gray-600); - font-size: 18px; - line-height: 1.74; -} - -.editorial-body blockquote { - margin: 34px 0; - padding: 28px; - border-left: 4px solid var(--color-primary-wine-100); - background: #eef2f6; - color: var(--color-neutral-black); - font-family: var(--font-heading); - font-size: clamp(22px, 3vw, 34px); - font-weight: 800; - line-height: 1.2; -} - -.editorial-image { - margin-top: 0; - margin-bottom: 0; - border-radius: var(--radius-sm); - overflow: hidden; -} - -.editorial-image img { - width: 100%; - max-height: 540px; - object-fit: cover; -} - -.editorial-photo-grid { - display: grid; - grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); - gap: 18px; -} - -.editorial-photo-grid figure { - margin: 0; - border-radius: var(--radius-sm); - overflow: hidden; -} - -.editorial-photo-grid img { - width: 100%; - height: 100%; - min-height: 360px; - object-fit: cover; -} - -.editorial-section--final { - padding-bottom: 82px; -} - -.editorial-outro { - color: var(--color-primary-wine-100) !important; - font-family: var(--font-heading); - font-size: clamp(28px, 4vw, 46px) !important; - font-weight: 800; - line-height: 1.1 !important; - text-transform: uppercase; -} - -.filters-panel, -.info-panel { - padding: 24px; - border-radius: var(--radius-sm); - background: var(--color-surface); - box-shadow: var(--shadow-soft); -} - -.filters-panel { - display: grid; - gap: 14px; - align-content: start; -} - -.checkbox { - display: flex; - align-items: center; - gap: 10px; - color: var(--color-neutral-gray-600); - font-weight: 700; -} - -.checkbox input { - width: 18px; - height: 18px; - accent-color: var(--color-primary-wine-100); -} - -.product-detail { - display: grid; - grid-template-columns: minmax(320px, 0.9fr) minmax(0, 1.1fr); - gap: 40px; - align-items: start; -} - -.product-detail .product-media { - min-height: 520px; -} - -.product-detail .product-photo { - max-width: 220px; - height: 420px; -} - -.detail-copy h1 { - margin: 10px 0 18px; - font-family: var(--font-heading); - font-size: clamp(38px, 5vw, 62px); - line-height: 1.08; - font-weight: 800; - text-transform: uppercase; -} - -.meta-list { - display: grid; - gap: 12px; - margin: 28px 0; -} - -.meta-list div { - display: flex; - justify-content: space-between; - gap: 18px; - padding-bottom: 12px; - border-bottom: 1px solid rgba(102, 96, 95, 0.16); -} - -.meta-list span { - color: var(--color-neutral-gray-600); -} - -.site-footer { - margin-top: auto; - padding: 32px 0 40px; - border-top: 1px solid rgba(102, 96, 95, 0.12); - background: var(--color-background-base); -} - -.footer-container { - padding: 24px 28px 20px; - border: 1px solid rgba(102, 96, 95, 0.16); - border-radius: var(--radius-sm); - background: var(--color-surface); - box-shadow: var(--shadow-soft); -} - -.footer-main { - display: grid; - grid-template-columns: minmax(170px, 210px) minmax(0, 1fr) minmax(210px, 250px); - gap: 24px 32px; - align-items: start; -} - -.footer-brand-block { - min-width: 0; - display: grid; - gap: 8px; -} - -.footer-brand { - display: inline-flex; - width: fit-content; - line-height: 0; -} - -.footer-brand img { - width: 156px; - height: auto; -} - -.footer-brand-subtitle { - margin: 0; - color: var(--color-neutral-gray-600); - font-size: 13px; - line-height: 1.35; -} - -.social-links { - display: flex; - flex-wrap: wrap; - gap: 8px; - margin-top: 2px; -} - -.social-links a { - display: inline-grid; - place-items: center; - width: 34px; - height: 34px; - border: 1px solid rgba(75, 15, 36, 0.14); - border-radius: var(--radius-sm); - background: transparent; - color: var(--color-primary-wine-100); - transition: background 0.18s ease, border-color 0.18s ease, transform 0.18s ease; -} - -.social-links svg { - width: 18px; - height: 18px; - fill: currentColor; -} - -.social-links a:hover, -.social-links a:focus-visible { - border-color: rgba(75, 15, 36, 0.36); - background: rgba(75, 15, 36, 0.06); - transform: translateY(-1px); -} - -.contacts-card { - display: grid; - gap: 8px; - justify-items: start; - align-content: start; -} - -.contacts-card h2, -.nav-group h2 { - margin: 0 0 10px; - font-size: 13px; - font-weight: 800; - letter-spacing: 0; - text-transform: uppercase; -} - -.contact-link { - display: block; - width: fit-content; - color: var(--color-neutral-gray-700); - font-size: 14px; - line-height: 1.35; - transition: color 0.18s ease; -} - -.contact-link:hover, -.contact-link:focus-visible { - color: var(--color-primary-wine-100); -} - -.contact-phone { - color: var(--color-accent-blue); - font-size: 18px; - font-weight: 800; -} - -.footer-nav { - display: grid; - grid-template-columns: repeat(3, minmax(140px, 1fr)); - gap: 24px; - align-items: start; -} - -.nav-group ul { - margin: 0; - padding: 0; - list-style: none; -} - -.nav-group li + li { - margin-top: 7px; -} - -.nav-group a, -.footer-legal { - color: var(--color-neutral-gray-600); -} - -.nav-group a { - display: inline-flex; - padding: 2px 0; - font-size: 14px; - line-height: 1.35; - transition: color 0.18s ease; -} - -.nav-group a:hover, -.nav-group a:focus-visible { - color: var(--color-primary-wine-100); -} - -.footer-legal { - grid-column: 1 / -1; - display: flex; - align-items: flex-start; - justify-content: space-between; - gap: 20px; - padding-top: 16px; - border-top: 1px solid rgba(102, 96, 95, 0.16); - font-size: 12px; - line-height: 1.45; -} - -.footer-legal p { - margin: 0; -} - -.footer-legal p:first-child { - max-width: 760px; -} - -.footer-legal p:last-child { - flex: 0 0 auto; - color: var(--color-neutral-gray-700); - font-weight: 800; -} - -.footer-legal a { - color: var(--color-primary-wine-80); - font-weight: 800; -} - -.footer-legal a:hover, -.footer-legal a:focus-visible { - color: var(--color-primary-wine-100); -} - -@media (max-width: 1080px) { - .header-top, - .footer-main, - .catalog-layout, - .product-detail { - grid-template-columns: 1fr; - } - - .header-top { - padding: 16px 0; - } - - .footer-main { - grid-template-columns: minmax(180px, 0.7fr) minmax(220px, 1fr); - } - - .footer-nav, - .footer-legal { - grid-column: 1 / -1; - } - - .contacts-card { - justify-self: end; - } - - .header-actions { - justify-content: space-between; - } - - .phone-link { - font-size: 14px; - } - - .main-nav { - justify-content: flex-start; - } - - .menu-grid, - .product-grid, - .bottle-card-grid, - .producer-grid, - .news-grid, - .type-options--five { - grid-template-columns: 1fr 1fr; - } - - .card-lab-head, - .bottle-card-mix, - .page-hero__inner, - .editorial-hero__inner, - .editorial-layout, - .article-layout, - .about-grid, - .contacts-layout, - .guideline-grid, - .guideline-checklist { - grid-template-columns: 1fr; - } - - .type-options { - grid-template-columns: 1fr 1fr; - } - - .catalog-head { - grid-template-columns: 1fr; - } - - .catalog-actions { - justify-content: flex-start; - } - - .product-card--list { - grid-template-columns: 150px minmax(0, 1fr); - } - - .product-card--list-compact, - .product-card--list-b2b { - grid-template-columns: 140px minmax(0, 1fr); - } - - .product-buy { - grid-column: 2; - min-height: auto; - align-content: start; - justify-items: start; - gap: 16px; - } - - .mega-menu { - top: 172px; - } - - .nav-item::after { - top: 150px; - height: 34px; - } -} - -@media (max-width: 720px) { - .container { - width: min(100% - 28px, var(--container)); - } - - .header-top { - gap: 14px; - padding: 16px 0; - } - - .header-actions { - align-items: center; - flex-direction: row; - gap: 10px; - } - - .phone-link { - display: none; - } - - .main-nav { - min-height: 54px; - } - - .mega-menu { - top: 184px; - padding: 18px; - } - - .nav-item::after { - top: 160px; - height: 34px; - } - - .mega-intro, - .menu-grid, - .appellations, - .product-grid, - .bottle-card-grid, - .producer-grid, - .news-grid, - .type-options--five, - .type-options, - .section-heading--split, - .footer-nav { - grid-template-columns: 1fr; - } - - .hero { - min-height: 620px; - padding: 56px 0; - } - - .hero-copy { - width: min(100% - 28px, var(--container)); - grid-template-columns: 1fr; - } - - .section { - padding: 56px 0; - } - - .card-lab-head { - gap: 18px; - margin-bottom: 32px; - } - - .card-lab-head h1 { - font-size: 36px; - } - - .card-variant-title { - align-items: flex-start; - flex-direction: column; - gap: 6px; - } - - .page-hero { - padding: 56px 0; - } - - .page-hero h1 { - font-size: 36px; - } - - .page-hero p, - .article-body .lead { - font-size: 17px; - } - - .editorial-side { - position: static; - } - - .editorial-photo-grid { - grid-template-columns: 1fr; - } - - .feature-grid { - grid-template-columns: 1fr; - } - - .guideline-card--lead { - grid-column: auto; - } - - .bottle-card { - padding: 14px; - } - - .bottle-card__media { - min-height: 190px; - } - - .bottle-card__photo { - height: 168px; - } - - .bottle-card h3 { - font-size: 22px; - } - - .bottle-card__footer { - align-items: stretch; - flex-direction: column; - } - - .bottle-card__footer .button { - width: 100%; - } - - .bottle-card--horizontal { - grid-template-columns: 1fr; - } - - .catalog-toolbar, - .catalog-actions { - align-items: stretch; - flex-direction: column; - } - - .catalog-sort { - width: 100%; - } - - .product-card--list { - min-height: auto; - grid-template-columns: 108px minmax(0, 1fr); - gap: 16px; - padding: 16px; - } - - .product-card--list-compact, - .product-card--list-b2b { - grid-template-columns: 96px minmax(0, 1fr); - } - - .product-image { - min-height: 180px; - max-height: 186px; - } - - .product-image img { - max-width: 98px; - height: 172px; - } - - .product-info h3 { - font-size: 19px; - } - - .product-info p { - font-size: 14px; - } - - .product-params { - grid-template-columns: 1fr; - } - - .product-photo { - max-width: 98px; - height: 164px; - } - - .product-buy { - grid-column: 1 / -1; - display: flex; - align-items: center; - justify-content: space-between; - } - - .product-buy strong { - font-size: 22px; - } - - .footer-container { - padding: 22px 18px; - } - - .footer-main { - grid-template-columns: 1fr; - gap: 32px; - } - - .footer-nav { - grid-template-columns: 1fr; - } - - .contacts-card { - justify-self: start; - } - - .footer-legal { - flex-direction: column; - gap: 12px; - } -} diff --git a/css/tokens.css b/css/tokens.css deleted file mode 100644 index 7acb191..0000000 --- a/css/tokens.css +++ /dev/null @@ -1,665 +0,0 @@ -/* cyrillic-ext */ -@font-face { - font-family: 'Cormorant Garamond'; - font-style: normal; - font-weight: 600; - font-display: swap; - src: url('../fonts/cormorant-garamond-600-cyrillic-ext.woff2') format('woff2'); - unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; -} -/* cyrillic-ext */ -@font-face { - font-family: 'Cormorant Garamond'; - font-style: normal; - font-weight: 700; - font-display: swap; - src: url('../fonts/cormorant-garamond-600-cyrillic-ext.woff2') format('woff2'); - unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; -} -/* cyrillic */ -@font-face { - font-family: 'Cormorant Garamond'; - font-style: normal; - font-weight: 600; - font-display: swap; - src: url('../fonts/cormorant-garamond-600-cyrillic.woff2') format('woff2'); - unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; -} -/* cyrillic */ -@font-face { - font-family: 'Cormorant Garamond'; - font-style: normal; - font-weight: 700; - font-display: swap; - src: url('../fonts/cormorant-garamond-600-cyrillic.woff2') format('woff2'); - unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; -} -/* latin-ext */ -@font-face { - font-family: 'Cormorant Garamond'; - font-style: normal; - font-weight: 600; - font-display: swap; - src: url('../fonts/cormorant-garamond-600-latin-ext.woff2') format('woff2'); - unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; -} -/* latin-ext */ -@font-face { - font-family: 'Cormorant Garamond'; - font-style: normal; - font-weight: 700; - font-display: swap; - src: url('../fonts/cormorant-garamond-600-latin-ext.woff2') format('woff2'); - unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; -} -/* latin */ -@font-face { - font-family: 'Cormorant Garamond'; - font-style: normal; - font-weight: 600; - font-display: swap; - src: url('../fonts/cormorant-garamond-600-latin.woff2') format('woff2'); - unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; -} -/* latin */ -@font-face { - font-family: 'Cormorant Garamond'; - font-style: normal; - font-weight: 700; - font-display: swap; - src: url('../fonts/cormorant-garamond-600-latin.woff2') format('woff2'); - unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; -} -/* cyrillic-ext */ -@font-face { - font-family: 'Inter'; - font-style: normal; - font-weight: 400; - font-display: swap; - src: url('../fonts/inter-400-cyrillic-ext.woff2') format('woff2'); - unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; -} -/* cyrillic-ext */ -@font-face { - font-family: 'Inter'; - font-style: normal; - font-weight: 500; - font-display: swap; - src: url('../fonts/inter-400-cyrillic-ext.woff2') format('woff2'); - unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; -} -/* cyrillic-ext */ -@font-face { - font-family: 'Inter'; - font-style: normal; - font-weight: 600; - font-display: swap; - src: url('../fonts/inter-400-cyrillic-ext.woff2') format('woff2'); - unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; -} -/* cyrillic-ext */ -@font-face { - font-family: 'Inter'; - font-style: normal; - font-weight: 700; - font-display: swap; - src: url('../fonts/inter-400-cyrillic-ext.woff2') format('woff2'); - unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; -} -/* cyrillic-ext */ -@font-face { - font-family: 'Inter'; - font-style: normal; - font-weight: 800; - font-display: swap; - src: url('../fonts/inter-400-cyrillic-ext.woff2') format('woff2'); - unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; -} -/* cyrillic */ -@font-face { - font-family: 'Inter'; - font-style: normal; - font-weight: 400; - font-display: swap; - src: url('../fonts/inter-400-cyrillic.woff2') format('woff2'); - unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; -} -/* cyrillic */ -@font-face { - font-family: 'Inter'; - font-style: normal; - font-weight: 500; - font-display: swap; - src: url('../fonts/inter-400-cyrillic.woff2') format('woff2'); - unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; -} -/* cyrillic */ -@font-face { - font-family: 'Inter'; - font-style: normal; - font-weight: 600; - font-display: swap; - src: url('../fonts/inter-400-cyrillic.woff2') format('woff2'); - unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; -} -/* cyrillic */ -@font-face { - font-family: 'Inter'; - font-style: normal; - font-weight: 700; - font-display: swap; - src: url('../fonts/inter-400-cyrillic.woff2') format('woff2'); - unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; -} -/* cyrillic */ -@font-face { - font-family: 'Inter'; - font-style: normal; - font-weight: 800; - font-display: swap; - src: url('../fonts/inter-400-cyrillic.woff2') format('woff2'); - unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; -} -/* latin-ext */ -@font-face { - font-family: 'Inter'; - font-style: normal; - font-weight: 400; - font-display: swap; - src: url('../fonts/inter-400-latin-ext.woff2') format('woff2'); - unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; -} -/* latin-ext */ -@font-face { - font-family: 'Inter'; - font-style: normal; - font-weight: 500; - font-display: swap; - src: url('../fonts/inter-400-latin-ext.woff2') format('woff2'); - unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; -} -/* latin-ext */ -@font-face { - font-family: 'Inter'; - font-style: normal; - font-weight: 600; - font-display: swap; - src: url('../fonts/inter-400-latin-ext.woff2') format('woff2'); - unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; -} -/* latin-ext */ -@font-face { - font-family: 'Inter'; - font-style: normal; - font-weight: 700; - font-display: swap; - src: url('../fonts/inter-400-latin-ext.woff2') format('woff2'); - unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; -} -/* latin-ext */ -@font-face { - font-family: 'Inter'; - font-style: normal; - font-weight: 800; - font-display: swap; - src: url('../fonts/inter-400-latin-ext.woff2') format('woff2'); - unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; -} -/* latin */ -@font-face { - font-family: 'Inter'; - font-style: normal; - font-weight: 400; - font-display: swap; - src: url('../fonts/inter-400-latin.woff2') format('woff2'); - unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; -} -/* latin */ -@font-face { - font-family: 'Inter'; - font-style: normal; - font-weight: 500; - font-display: swap; - src: url('../fonts/inter-400-latin.woff2') format('woff2'); - unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2213, U+2215, U+FEFF, U+FFFD; -} -/* latin */ -@font-face { - font-family: 'Inter'; - font-style: normal; - font-weight: 600; - font-display: swap; - src: url('../fonts/inter-400-latin.woff2') format('woff2'); - unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; -} -/* latin */ -@font-face { - font-family: 'Inter'; - font-style: normal; - font-weight: 700; - font-display: swap; - src: url('../fonts/inter-400-latin.woff2') format('woff2'); - unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; -} -/* latin */ -@font-face { - font-family: 'Inter'; - font-style: normal; - font-weight: 800; - font-display: swap; - src: url('../fonts/inter-400-latin.woff2') format('woff2'); - unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; -} -/* cyrillic-ext */ -@font-face { - font-family: 'Manrope'; - font-style: normal; - font-weight: 400; - font-display: swap; - src: url('../fonts/manrope-400-cyrillic-ext.woff2') format('woff2'); - unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; -} -/* cyrillic-ext */ -@font-face { - font-family: 'Manrope'; - font-style: normal; - font-weight: 500; - font-display: swap; - src: url('../fonts/manrope-400-cyrillic-ext.woff2') format('woff2'); - unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; -} -/* cyrillic-ext */ -@font-face { - font-family: 'Manrope'; - font-style: normal; - font-weight: 600; - font-display: swap; - src: url('../fonts/manrope-400-cyrillic-ext.woff2') format('woff2'); - unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; -} -/* cyrillic-ext */ -@font-face { - font-family: 'Manrope'; - font-style: normal; - font-weight: 700; - font-display: swap; - src: url('../fonts/manrope-400-cyrillic-ext.woff2') format('woff2'); - unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; -} -/* cyrillic-ext */ -@font-face { - font-family: 'Manrope'; - font-style: normal; - font-weight: 800; - font-display: swap; - src: url('../fonts/manrope-400-cyrillic-ext.woff2') format('woff2'); - unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; -} -/* cyrillic */ -@font-face { - font-family: 'Manrope'; - font-style: normal; - font-weight: 400; - font-display: swap; - src: url('../fonts/manrope-400-cyrillic.woff2') format('woff2'); - unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; -} -/* cyrillic */ -@font-face { - font-family: 'Manrope'; - font-style: normal; - font-weight: 500; - font-display: swap; - src: url('../fonts/manrope-400-cyrillic.woff2') format('woff2'); - unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; -} -/* cyrillic */ -@font-face { - font-family: 'Manrope'; - font-style: normal; - font-weight: 600; - font-display: swap; - src: url('../fonts/manrope-400-cyrillic.woff2') format('woff2'); - unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; -} -/* cyrillic */ -@font-face { - font-family: 'Manrope'; - font-style: normal; - font-weight: 700; - font-display: swap; - src: url('../fonts/manrope-400-cyrillic.woff2') format('woff2'); - unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; -} -/* cyrillic */ -@font-face { - font-family: 'Manrope'; - font-style: normal; - font-weight: 800; - font-display: swap; - src: url('../fonts/manrope-400-cyrillic.woff2') format('woff2'); - unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; -} -/* latin-ext */ -@font-face { - font-family: 'Manrope'; - font-style: normal; - font-weight: 400; - font-display: swap; - src: url('../fonts/manrope-400-latin-ext.woff2') format('woff2'); - unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; -} -/* latin-ext */ -@font-face { - font-family: 'Manrope'; - font-style: normal; - font-weight: 500; - font-display: swap; - src: url('../fonts/manrope-400-latin-ext.woff2') format('woff2'); - unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; -} -/* latin-ext */ -@font-face { - font-family: 'Manrope'; - font-style: normal; - font-weight: 600; - font-display: swap; - src: url('../fonts/manrope-400-latin-ext.woff2') format('woff2'); - unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; -} -/* latin-ext */ -@font-face { - font-family: 'Manrope'; - font-style: normal; - font-weight: 700; - font-display: swap; - src: url('../fonts/manrope-400-latin-ext.woff2') format('woff2'); - unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; -} -/* latin-ext */ -@font-face { - font-family: 'Manrope'; - font-style: normal; - font-weight: 800; - font-display: swap; - src: url('../fonts/manrope-400-latin-ext.woff2') format('woff2'); - unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; -} -/* latin */ -@font-face { - font-family: 'Manrope'; - font-style: normal; - font-weight: 400; - font-display: swap; - src: url('../fonts/manrope-400-latin.woff2') format('woff2'); - unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; -} -/* latin */ -@font-face { - font-family: 'Manrope'; - font-style: normal; - font-weight: 500; - font-display: swap; - src: url('../fonts/manrope-400-latin.woff2') format('woff2'); - unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; -} -/* latin */ -@font-face { - font-family: 'Manrope'; - font-style: normal; - font-weight: 600; - font-display: swap; - src: url('../fonts/manrope-400-latin.woff2') format('woff2'); - unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; -} -/* latin */ -@font-face { - font-family: 'Manrope'; - font-style: normal; - font-weight: 700; - font-display: swap; - src: url('../fonts/manrope-400-latin.woff2') format('woff2'); - unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; -} -/* latin */ -@font-face { - font-family: 'Manrope'; - font-style: normal; - font-weight: 800; - font-display: swap; - src: url('../fonts/manrope-400-latin.woff2') format('woff2'); - unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; -} -/* cyrillic-ext */ -@font-face { - font-family: 'Montserrat'; - font-style: normal; - font-weight: 500; - font-display: swap; - src: url('../fonts/montserrat-500-cyrillic-ext.woff2') format('woff2'); - unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; -} -/* cyrillic-ext */ -@font-face { - font-family: 'Montserrat'; - font-style: normal; - font-weight: 600; - font-display: swap; - src: url('../fonts/montserrat-500-cyrillic-ext.woff2') format('woff2'); - unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; -} -/* cyrillic-ext */ -@font-face { - font-family: 'Montserrat'; - font-style: normal; - font-weight: 700; - font-display: swap; - src: url('../fonts/montserrat-500-cyrillic-ext.woff2') format('woff2'); - unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; -} -/* cyrillic-ext */ -@font-face { - font-family: 'Montserrat'; - font-style: normal; - font-weight: 800; - font-display: swap; - src: url('../fonts/montserrat-500-cyrillic-ext.woff2') format('woff2'); - unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; -} -/* cyrillic */ -@font-face { - font-family: 'Montserrat'; - font-style: normal; - font-weight: 500; - font-display: swap; - src: url('../fonts/montserrat-500-cyrillic.woff2') format('woff2'); - unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; -} -/* cyrillic */ -@font-face { - font-family: 'Montserrat'; - font-style: normal; - font-weight: 600; - font-display: swap; - src: url('../fonts/montserrat-500-cyrillic.woff2') format('woff2'); - unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; -} -/* cyrillic */ -@font-face { - font-family: 'Montserrat'; - font-style: normal; - font-weight: 700; - font-display: swap; - src: url('../fonts/montserrat-500-cyrillic.woff2') format('woff2'); - unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; -} -/* cyrillic */ -@font-face { - font-family: 'Montserrat'; - font-style: normal; - font-weight: 800; - font-display: swap; - src: url('../fonts/montserrat-500-cyrillic.woff2') format('woff2'); - unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; -} -/* latin-ext */ -@font-face { - font-family: 'Montserrat'; - font-style: normal; - font-weight: 500; - font-display: swap; - src: url('../fonts/montserrat-500-latin-ext.woff2') format('woff2'); - unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; -} -/* latin-ext */ -@font-face { - font-family: 'Montserrat'; - font-style: normal; - font-weight: 600; - font-display: swap; - src: url('../fonts/montserrat-500-latin-ext.woff2') format('woff2'); - unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; -} -/* latin-ext */ -@font-face { - font-family: 'Montserrat'; - font-style: normal; - font-weight: 700; - font-display: swap; - src: url('../fonts/montserrat-500-latin-ext.woff2') format('woff2'); - unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; -} -/* latin-ext */ -@font-face { - font-family: 'Montserrat'; - font-style: normal; - font-weight: 800; - font-display: swap; - src: url('../fonts/montserrat-500-latin-ext.woff2') format('woff2'); - unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; -} -/* latin */ -@font-face { - font-family: 'Montserrat'; - font-style: normal; - font-weight: 500; - font-display: swap; - src: url('../fonts/montserrat-500-latin.woff2') format('woff2'); - unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; -} -/* latin */ -@font-face { - font-family: 'Montserrat'; - font-style: normal; - font-weight: 600; - font-display: swap; - src: url('../fonts/montserrat-500-latin.woff2') format('woff2'); - unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; -} -/* latin */ -@font-face { - font-family: 'Montserrat'; - font-style: normal; - font-weight: 700; - font-display: swap; - src: url('../fonts/montserrat-500-latin.woff2') format('woff2'); - unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; -} -/* latin */ -@font-face { - font-family: 'Montserrat'; - font-style: normal; - font-weight: 800; - font-display: swap; - src: url('../fonts/montserrat-500-latin.woff2') format('woff2'); - unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; -} -/* cyrillic */ -@font-face { - font-family: 'Playfair Display'; - font-style: normal; - font-weight: 600; - font-display: swap; - src: url('../fonts/playfair-display-600-cyrillic.woff2') format('woff2'); - unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; -} -/* cyrillic */ -@font-face { - font-family: 'Playfair Display'; - font-style: normal; - font-weight: 700; - font-display: swap; - src: url('../fonts/playfair-display-600-cyrillic.woff2') format('woff2'); - unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; -} -/* latin-ext */ -@font-face { - font-family: 'Playfair Display'; - font-style: normal; - font-weight: 600; - font-display: swap; - src: url('../fonts/playfair-display-600-latin-ext.woff2') format('woff2'); - unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; -} -/* latin-ext */ -@font-face { - font-family: 'Playfair Display'; - font-style: normal; - font-weight: 700; - font-display: swap; - src: url('../fonts/playfair-display-600-latin-ext.woff2') format('woff2'); - unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; -} -/* latin */ -@font-face { - font-family: 'Playfair Display'; - font-style: normal; - font-weight: 600; - font-display: swap; - src: url('../fonts/playfair-display-600-latin.woff2') format('woff2'); - unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; -} -/* latin */ -@font-face { - font-family: 'Playfair Display'; - font-style: normal; - font-weight: 700; - font-display: swap; - src: url('../fonts/playfair-display-600-latin.woff2') format('woff2'); - unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; -} - -:root { - --color-primary-wine-100: #4b0f24; - --color-primary-wine-80: #6d1c36; - --color-neutral-black: #161616; - --color-neutral-gray-700: #30343a; - --color-neutral-gray-600: #66605f; - --color-neutral-gray-300: #d9dee6; - --color-background-base: #f4f6f9; - --color-surface: #ffffff; - --color-accent-gold: #b9965b; - --color-accent-blue: #1f3476; - - --font-heading: "Montserrat", "Inter", Arial, sans-serif; - --font-body: "Inter", Arial, sans-serif; - --font-heading-classic: "Playfair Display", Georgia, serif; - --font-body-classic: "Inter", Arial, sans-serif; - --font-heading-retail: "Montserrat", "Inter", Arial, sans-serif; - - --spacing-4: 4px; - --spacing-8: 8px; - --spacing-16: 16px; - --spacing-24: 24px; - --spacing-32: 32px; - --spacing-48: 48px; - --spacing-64: 64px; - - --radius-sm: 8px; - --radius-md: 12px; - --radius-lg: 24px; - - --shadow-soft: 0 12px 32px rgba(22, 22, 22, 0.08); - --shadow-lift: 0 20px 52px rgba(75, 15, 36, 0.14); - --container: 1240px; -} diff --git a/css/ui-kit.css b/css/ui-kit.css deleted file mode 100644 index de3d24d..0000000 --- a/css/ui-kit.css +++ /dev/null @@ -1,1392 +0,0 @@ -@import url("tokens.css"); - -:root { - --color-primary-wine-100: #4b0f24; - --color-primary-wine-80: #6d1c36; - --color-neutral-black: #161616; - --color-gray-600: #66605f; - --color-gray-300: #d9dee6; - --color-background-base: #f4f6f9; - --color-accent-gold: #b9965b; - --color-white: #ffffff; - --color-error: #a33a2f; - - --font-heading: "Montserrat", "Inter", Arial, sans-serif; - --font-body: "Inter", Arial, sans-serif; - - --spacing-1: 4px; - --spacing-2: 8px; - --spacing-3: 16px; - --spacing-4: 24px; - --spacing-5: 32px; - --spacing-6: 48px; - --spacing-7: 64px; - - --radius-sm: 8px; - --radius-md: 12px; - --shadow-soft: 0 12px 32px rgba(22, 22, 22, 0.08); - --shadow-lift: 0 20px 52px rgba(75, 15, 36, 0.14); -} - -* { - box-sizing: border-box; -} - -html { - scroll-behavior: smooth; -} - -body { - margin: 0; - background: var(--color-background-base); - color: var(--color-neutral-black); - font-family: var(--font-body); - font-size: 16px; - line-height: 1.5; -} - -a { - color: inherit; - text-decoration: none; -} - -button, -input, -select { - font: inherit; -} - -.sidebar { - position: fixed; - inset: 0 auto 0 0; - width: 280px; - max-height: 100vh; - padding: 24px; - background: #f8fafc; - border-right: 1px solid rgba(102, 96, 95, 0.18); - display: flex; - flex-direction: column; - gap: 32px; - z-index: 5; -} - -.brand { - display: inline-flex; - align-items: center; - gap: 12px; -} - -.brand__mark { - width: 44px; - height: 44px; - border-radius: var(--radius-sm); - background: var(--color-primary-wine-100); - color: var(--color-accent-gold); - display: inline-grid; - place-items: center; - font-family: var(--font-heading); - font-weight: 700; -} - -.brand strong, -.brand small { - display: block; -} - -.brand small { - color: var(--color-gray-600); - font-size: 13px; -} - -.brand--compact .brand__mark { - width: 36px; - height: 36px; -} - -.side-nav { - min-height: 0; - overflow-y: auto; - padding-right: 4px; - display: grid; - gap: 22px; - overscroll-behavior: contain; - scrollbar-width: thin; - scrollbar-color: rgba(75, 15, 36, 0.34) transparent; -} - -.side-nav::-webkit-scrollbar { - width: 6px; -} - -.side-nav::-webkit-scrollbar-thumb { - border-radius: 999px; - background: rgba(75, 15, 36, 0.28); -} - -.side-nav__group { - display: grid; - gap: 8px; -} - -.side-nav__group span { - padding: 0 12px; - color: var(--color-accent-gold); - font-size: 11px; - font-weight: 800; - letter-spacing: 0; - text-transform: uppercase; -} - -.side-nav a { - padding: 10px 12px; - border-radius: var(--radius-sm); - color: var(--color-gray-600); - font-weight: 600; -} - -.side-nav a:hover { - background: rgba(75, 15, 36, 0.07); - color: var(--color-primary-wine-100); -} - -.page-shell { - margin-left: 280px; - min-width: 0; -} - -.kit-hero { - min-height: 92vh; - padding: 56px clamp(24px, 5vw, 72px); - display: grid; - grid-template-columns: minmax(0, 1.05fr) minmax(320px, 0.95fr); - align-items: center; - gap: 48px; - background: - radial-gradient(circle at 82% 28%, rgba(185, 150, 91, 0.25), transparent 24%), - linear-gradient(135deg, #ffffff 0%, #eef2f6 58%, #dde4ec 100%); -} - -.kit-hero__content { - max-width: 720px; -} - -.eyebrow, -.muted-caps { - margin: 0; - color: var(--color-accent-gold); - font-size: 12px; - line-height: 16px; - font-weight: 700; - letter-spacing: 0; - text-transform: uppercase; -} - -h1, -h2, -h3, -p { - margin-top: 0; -} - -h1, -h2, -h3 { - font-family: var(--font-heading); - line-height: 1.1; -} - -h1 { - max-width: 780px; - margin-bottom: 20px; - font-size: clamp(40px, 5.5vw, 72px); - font-weight: 800; - text-transform: uppercase; -} - -h2 { - margin-bottom: 0; - font-size: 40px; - font-weight: 800; - text-transform: uppercase; -} - -h3 { - margin-bottom: 16px; - font-size: 24px; - font-weight: 800; -} - -.kit-hero p:not(.eyebrow) { - max-width: 640px; - color: var(--color-gray-600); - font-size: 18px; - line-height: 28px; -} - -.hero-actions, -.component-row, -.chip-row { - display: flex; - align-items: center; - flex-wrap: wrap; - gap: 12px; -} - -.kit-hero__visual { - justify-self: center; - width: min(100%, 420px); -} - -.button { - min-height: 48px; - padding: 12px 22px; - border: 1px solid transparent; - border-radius: var(--radius-sm); - display: inline-flex; - align-items: center; - justify-content: center; - gap: 8px; - color: var(--color-neutral-black); - background: transparent; - font-weight: 700; - cursor: pointer; - transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease; -} - -.button:hover, -.button.is-hover { - transform: translateY(-1px); -} - -.button--primary { - background: var(--color-primary-wine-100); - color: var(--color-white); - box-shadow: 0 10px 22px rgba(75, 15, 36, 0.16); -} - -.button--primary:hover, -.button--primary.is-hover { - background: var(--color-primary-wine-80); - box-shadow: var(--shadow-lift); -} - -.button--secondary { - border-color: rgba(75, 15, 36, 0.24); - background: rgba(255, 255, 255, 0.55); - color: var(--color-primary-wine-100); -} - -.button--ghost { - color: var(--color-primary-wine-100); -} - -.button--sm { - min-height: 38px; - padding: 8px 14px; - font-size: 14px; -} - -.icon-style-grid { - display: grid; - grid-template-columns: repeat(4, minmax(0, 1fr)); - gap: 16px; -} - -.icon-style-card { - min-width: 0; - padding: 18px; - border: 1px solid rgba(102, 96, 95, 0.16); - border-radius: var(--radius-sm); - background: var(--color-white); - box-shadow: var(--shadow-soft); - display: grid; - gap: 14px; -} - -.icon-demo-row { - min-height: 86px; - padding: 14px; - border-radius: var(--radius-sm); - background: #eef2f6; - display: flex; - align-items: center; - gap: 12px; -} - -.kit-icon { - color: var(--color-primary-wine-100); - display: inline-grid; - place-items: center; - flex: 0 0 auto; -} - -.kit-icon svg { - width: 22px; - height: 22px; - fill: none; - stroke: currentColor; - stroke-linecap: round; - stroke-linejoin: round; - stroke-width: 1.75; -} - -.kit-icon--line { - width: 44px; - height: 44px; -} - -.kit-icon--soft, -.kit-icon--filled { - width: 46px; - height: 46px; - border-radius: var(--radius-sm); -} - -.kit-icon--soft { - border: 1px solid rgba(75, 15, 36, 0.14); - background: var(--color-white); -} - -.kit-icon--filled { - background: var(--color-primary-wine-100); - color: var(--color-white); - box-shadow: 0 10px 22px rgba(75, 15, 36, 0.16); -} - -.kit-icon--tiny { - width: 28px; - height: 28px; -} - -.kit-icon--tiny svg { - width: 16px; - height: 16px; - stroke-width: 1.6; -} - -.icon-style-card > span { - color: var(--color-accent-gold); - font-size: 12px; - font-weight: 800; - text-transform: uppercase; -} - -.icon-style-card p { - margin: 0; - color: var(--color-gray-600); - font-size: 14px; - line-height: 1.45; -} - -.icon-style-card code { - padding: 10px; - border-radius: var(--radius-sm); - background: #eef2f6; - white-space: normal; -} - -.section { - padding: 72px clamp(24px, 5vw, 72px); - border-top: 1px solid rgba(102, 96, 95, 0.16); -} - -.section--last { - padding-bottom: 96px; -} - -.section-heading { - display: grid; - gap: 8px; - margin-bottom: 40px; -} - -.section-heading--split { - grid-template-columns: minmax(0, 0.58fr) minmax(280px, 0.42fr); - gap: 32px; - align-items: end; -} - -.section-heading--split > p { - margin: 0; - color: var(--color-gray-600); - line-height: 1.6; -} - -.subsection { - margin-top: 40px; -} - -.spec-grid { - margin-top: 18px; - display: grid; - grid-template-columns: repeat(3, minmax(0, 1fr)); - gap: 14px; -} - -.spec-card { - min-width: 0; - padding: 16px; - border: 1px solid rgba(102, 96, 95, 0.16); - border-radius: var(--radius-sm); - background: rgba(255, 255, 255, 0.72); -} - -.spec-card span { - display: block; - margin-bottom: 8px; - color: var(--color-accent-gold); - font-size: 12px; - font-weight: 800; - text-transform: uppercase; -} - -.spec-card p { - margin: 0; - color: var(--color-gray-600); - font-size: 14px; - line-height: 1.45; -} - -.status-grid, -.checklist-grid { - display: grid; - grid-template-columns: repeat(3, minmax(0, 1fr)); - gap: 16px; -} - -.status-card, -.production-rules article, -.checklist-card { - min-width: 0; - padding: 20px; - border: 1px solid rgba(102, 96, 95, 0.16); - border-radius: var(--radius-sm); - background: var(--color-white); - box-shadow: var(--shadow-soft); -} - -.status-card { - min-height: 190px; - display: grid; - align-content: space-between; - gap: 14px; -} - -.status-card span, -.production-rules span, -.checklist-card span { - width: fit-content; - padding: 6px 9px; - border-radius: var(--radius-sm); - font-size: 11px; - font-weight: 800; - text-transform: uppercase; -} - -.status-card--ready span { - background: rgba(31, 77, 58, 0.12); - color: #1f4d3a; -} - -.status-card--review span { - background: rgba(185, 150, 91, 0.18); - color: #7c5f26; -} - -.status-card--draft span { - background: rgba(102, 96, 95, 0.12); - color: var(--color-gray-600); -} - -.status-card strong { - color: var(--color-neutral-black); - font-family: var(--font-heading); - font-size: 22px; - line-height: 1.12; - text-transform: uppercase; -} - -.status-card p, -.production-rules p { - margin: 0; - color: var(--color-gray-600); - line-height: 1.5; -} - -.production-rules { - margin-top: 18px; - display: grid; - grid-template-columns: repeat(3, minmax(0, 1fr)); - gap: 16px; -} - -.production-rules span, -.checklist-card span { - margin-bottom: 14px; - display: inline-block; - background: rgba(75, 15, 36, 0.08); - color: var(--color-primary-wine-100); -} - -.checklist-card ul { - margin: 0; - padding-left: 18px; - color: var(--color-gray-600); - line-height: 1.58; -} - -.checklist-card li + li { - margin-top: 8px; -} - -.swatch-grid { - display: grid; - grid-template-columns: repeat(4, minmax(0, 1fr)); - gap: 16px; -} - -.swatch, -.template-card, -.mini-card { - min-width: 0; - padding: 16px; - border: 1px solid rgba(102, 96, 95, 0.16); - border-radius: var(--radius-sm); - background: rgba(255, 255, 255, 0.74); -} - -.swatch span { - display: block; - height: 88px; - margin-bottom: 14px; - border: 1px solid rgba(22, 22, 22, 0.08); - border-radius: var(--radius-sm); - background: var(--swatch); -} - -.swatch strong, -.swatch code, -.template-card span, -.template-card strong { - display: block; -} - -code { - color: var(--color-primary-wine-80); - font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; - font-size: 13px; -} - -.typography-specimen { - display: grid; - gap: 18px; -} - -.type-row { - padding-bottom: 18px; - border-bottom: 1px solid rgba(102, 96, 95, 0.16); - display: grid; - grid-template-columns: 280px minmax(0, 1fr); - gap: 24px; - align-items: baseline; -} - -.type-row span { - color: var(--color-gray-600); - font-size: 13px; -} - -.type-row p { - margin: 0; -} - -.text-h1, -.text-h2, -.text-h3 { - font-family: var(--font-heading); - font-weight: 800; - text-transform: uppercase; -} - -.text-h1 { - font-size: 48px; - line-height: 56px; -} - -.text-h2 { - font-size: 36px; - line-height: 44px; -} - -.text-h3 { - font-size: 28px; - line-height: 36px; -} - -.text-body { - font-size: 16px; - line-height: 24px; -} - -.text-label { - font-size: 12px; - line-height: 16px; - font-weight: 700; - text-transform: uppercase; -} - -.grid-demo { - height: 120px; - padding: 16px; - border-radius: var(--radius-sm); - background: rgba(75, 15, 36, 0.06); - display: grid; - grid-template-columns: repeat(12, 1fr); - gap: 16px; -} - -.grid-demo span { - border-radius: 4px; - background: rgba(75, 15, 36, 0.18); -} - -.spacing-scale { - margin-top: 20px; - display: flex; - align-items: end; - flex-wrap: wrap; - gap: 18px; -} - -.spacing-scale span { - width: var(--space); - height: var(--space); - min-width: 4px; - min-height: 4px; - background: var(--color-accent-gold); - color: var(--color-neutral-black); - font-size: 12px; - font-weight: 700; - display: grid; - place-items: center; -} - -.token-grid { - display: grid; - grid-template-columns: repeat(2, minmax(0, 1fr)); - gap: 12px; -} - -.token-grid code { - padding: 14px; - border-radius: var(--radius-sm); - background: #fff; -} - -.shadow-grid { - display: grid; - grid-template-columns: repeat(4, minmax(0, 1fr)); - gap: 16px; -} - -.shadow-card { - min-height: 220px; - padding: 18px; - border: 1px solid rgba(102, 96, 95, 0.14); - border-radius: var(--radius-sm); - background: var(--color-white); - display: grid; - align-content: space-between; - gap: 12px; -} - -.shadow-card span { - color: var(--color-accent-gold); - font-size: 11px; - font-weight: 800; - text-transform: uppercase; -} - -.shadow-card strong { - color: var(--color-neutral-black); - font-family: var(--font-heading); - font-size: 20px; - line-height: 1.1; - text-transform: uppercase; -} - -.shadow-card p { - margin: 0; - color: var(--color-gray-600); - font-size: 14px; - line-height: 1.45; -} - -.shadow-card code { - width: fit-content; - max-width: 100%; - padding: 7px 9px; - border-radius: var(--radius-sm); - background: #eef2f6; - color: var(--color-primary-wine-100); - font-size: 12px; - white-space: normal; -} - -.shadow-card--none { - box-shadow: none; -} - -.shadow-card--header { - box-shadow: 0 10px 28px rgba(22, 22, 22, 0.05); -} - -.shadow-card--soft { - box-shadow: var(--shadow-soft); -} - -.shadow-card--card { - box-shadow: 0 18px 46px rgba(18, 25, 38, 0.08); -} - -.shadow-card--hover { - box-shadow: 0 22px 54px rgba(25, 37, 62, 0.13); -} - -.shadow-card--lift { - box-shadow: var(--shadow-lift); -} - -.shadow-card--editorial { - box-shadow: 0 22px 58px rgba(25, 37, 62, 0.12); -} - -.shadow-card--focus { - box-shadow: 0 0 0 4px rgba(75, 15, 36, 0.08); -} - -.product-grid { - display: grid; - gap: 20px; -} - -.product-grid--3 { - grid-template-columns: repeat(3, minmax(0, 1fr)); -} - -.product-card { - min-width: 0; - padding: 16px; - border: 1px solid rgba(102, 96, 95, 0.16); - border-radius: var(--radius-sm); - background: var(--color-white); - box-shadow: var(--shadow-soft); - display: grid; - gap: 16px; - transition: transform 0.2s ease, box-shadow 0.2s ease; -} - -.product-card:hover, -.product-card--hover, -.product-card--featured { - transform: translateY(-3px); - box-shadow: var(--shadow-lift); -} - -.product-card--compact { - grid-template-columns: 90px minmax(0, 1fr); - align-items: center; -} - -.product-card--compact .product-footer { - grid-column: 2; -} - -.product-media { - position: relative; - min-height: 220px; - border-radius: var(--radius-sm); - overflow: hidden; - display: grid; - place-items: center; - background: - linear-gradient(135deg, rgba(255, 255, 255, 0.42), transparent 48%), - var(--media-bg, #dde4ec); -} - -.product-photo { - width: auto; - max-width: 132px; - height: 190px; - object-fit: contain; - object-position: center; - border: 0; - box-shadow: none; -} - -.product-card--compact .product-media { - min-height: 130px; -} - -.product-media--wine { - --media-bg: linear-gradient(140deg, #5d1027, #c8a45d); -} - -.product-media--amber { - --media-bg: linear-gradient(140deg, #a8632a, #dde4ec); -} - -.product-media--green { - --media-bg: linear-gradient(140deg, #1f4d3a, #e8eadb); -} - -.bottle { - width: 54px; - height: 152px; - border-radius: 16px 16px 10px 10px; - background: linear-gradient(90deg, #161616, #2f2a29 44%, #0c0c0c); - box-shadow: 18px 18px 44px rgba(22, 22, 22, 0.24); - position: relative; -} - -.bottle::before { - content: ""; - position: absolute; - top: -58px; - left: 17px; - width: 20px; - height: 72px; - border-radius: 8px 8px 2px 2px; - background: #171212; -} - -.bottle::after { - content: ""; - position: absolute; - inset: 54px 8px auto; - height: 42px; - border-radius: 4px; - background: #eef2f6; -} - -.product-meta { - min-width: 0; -} - -.product-meta h3 { - margin: 8px 0 6px; - font-size: 21px; - text-transform: uppercase; -} - -.product-meta p { - margin: 0; - color: var(--color-gray-600); - font-size: 14px; -} - -.product-footer { - display: flex; - align-items: center; - justify-content: space-between; - gap: 12px; -} - -.product-footer strong { - color: var(--color-primary-wine-100); - font-size: 18px; -} - -.image-bg-grid { - display: grid; - grid-template-columns: repeat(4, minmax(0, 1fr)); - gap: 16px; -} - -.image-bg-card { - min-width: 0; - padding: 16px; - border: 1px solid rgba(102, 96, 95, 0.16); - border-radius: var(--radius-sm); - background: var(--color-white); - box-shadow: var(--shadow-soft); - display: grid; - gap: 12px; -} - -.image-bg-preview { - min-height: 190px; - border-radius: var(--radius-sm); - overflow: hidden; - display: grid; - place-items: center; -} - -.image-bg-preview img { - width: auto; - max-width: 120px; - height: 164px; - object-fit: contain; - border: 0; - box-shadow: none; -} - -.product-image--gold { - background: linear-gradient(135deg, #b9965b 0%, #d7c18b 48%, #eef2f6 100%); -} - -.product-image--wine { - background: linear-gradient(135deg, #6d1c36 0%, #9b5366 46%, #e6dce1 100%); -} - -.product-image--green { - background: linear-gradient(135deg, #1f4d3a 0%, #88a28e 48%, #eef2e5 100%); -} - -.image-bg-preview--neutral { - background: linear-gradient(135deg, #eef2f6 0%, #dde6ef 100%); -} - -.image-bg-card span { - color: var(--color-accent-gold); - font-size: 12px; - font-weight: 800; - text-transform: uppercase; -} - -.image-bg-card p { - margin: 0; - color: var(--color-gray-600); - font-size: 14px; - line-height: 1.45; -} - -.image-bg-card code { - padding: 10px; - border-radius: var(--radius-sm); - background: #eef2f6; - color: var(--color-primary-wine-100); - font-size: 12px; - line-height: 1.45; - white-space: normal; -} - -.header-demo { - padding: 16px; - border-radius: var(--radius-sm); - background: var(--color-white); - box-shadow: var(--shadow-soft); - display: flex; - align-items: center; - justify-content: space-between; - gap: 20px; -} - -.header-demo nav { - display: flex; - flex-wrap: wrap; - gap: 18px; - color: var(--color-gray-600); - font-weight: 600; -} - -.component-columns, -.catalog-pattern, -.template-grid { - display: grid; - grid-template-columns: repeat(2, minmax(0, 1fr)); - gap: 24px; -} - -.control-stack { - padding: 20px; - border-radius: var(--radius-sm); - background: var(--color-white); - display: grid; - gap: 14px; - box-shadow: var(--shadow-soft); -} - -.checkbox { - display: flex; - align-items: center; - gap: 10px; - color: var(--color-gray-600); - font-weight: 600; -} - -.checkbox input { - width: 18px; - height: 18px; - accent-color: var(--color-primary-wine-100); -} - -.chip, -.tag { - min-height: 34px; - padding: 7px 12px; - border: 1px solid rgba(75, 15, 36, 0.18); - border-radius: var(--radius-sm); - background: var(--color-white); - color: var(--color-primary-wine-100); - font-size: 13px; - font-weight: 700; -} - -.chip { - cursor: pointer; -} - -.chip--active, -.tag--filled { - background: var(--color-primary-wine-100); - color: var(--color-white); -} - -.tag--outline { - background: transparent; - border-color: var(--color-accent-gold); - color: var(--color-primary-wine-100); -} - -.range { - display: grid; - gap: 8px; - color: var(--color-gray-600); - font-weight: 600; -} - -.range input { - accent-color: var(--color-primary-wine-100); -} - -.input { - width: 100%; - min-height: 48px; - padding: 12px 14px; - border: 1px solid rgba(102, 96, 95, 0.24); - border-radius: var(--radius-sm); - background: var(--color-white); - color: var(--color-neutral-black); -} - -.input--focus, -.input:focus { - border-color: var(--color-primary-wine-100); - box-shadow: 0 0 0 3px rgba(75, 15, 36, 0.1); - outline: none; -} - -.input--error { - border-color: var(--color-error); - color: var(--color-error); -} - -.table-wrap { - overflow-x: auto; - border-radius: var(--radius-sm); - box-shadow: var(--shadow-soft); -} - -table { - width: 100%; - min-width: 720px; - border-collapse: collapse; - background: var(--color-white); -} - -th, -td { - padding: 16px; - border-bottom: 1px solid rgba(102, 96, 95, 0.16); - text-align: left; -} - -th { - background: #e8edf3; - color: var(--color-primary-wine-100); - font-size: 12px; - text-transform: uppercase; -} - -tbody tr:hover { - background: rgba(75, 15, 36, 0.04); -} - -.filters-panel { - padding: 24px; - border-radius: var(--radius-sm); - background: var(--color-white); - box-shadow: var(--shadow-soft); - display: grid; - gap: 14px; - align-content: start; -} - -.mini-card { - min-height: 120px; - display: grid; - place-items: center; - color: var(--color-primary-wine-100); - font-family: var(--font-heading); - font-size: 20px; - font-weight: 800; - text-transform: uppercase; - text-align: center; -} - -.template-grid { - grid-template-columns: repeat(4, minmax(0, 1fr)); -} - -.template-card { - min-height: 148px; - display: grid; - align-content: space-between; -} - -.template-card span { - color: var(--color-accent-gold); - font-size: 12px; - font-weight: 700; - text-transform: uppercase; -} - -.template-card strong { - font-family: var(--font-heading); - font-size: 20px; - font-weight: 800; - line-height: 1.2; - text-transform: uppercase; -} - -.template-spec-grid { - margin-top: 24px; - display: grid; - grid-template-columns: repeat(3, minmax(0, 1fr)); - gap: 16px; -} - -.template-spec { - min-width: 0; - padding: 20px; - border: 1px solid rgba(102, 96, 95, 0.16); - border-radius: var(--radius-sm); - background: var(--color-white); - box-shadow: var(--shadow-soft); - display: grid; - gap: 10px; -} - -.template-spec span { - color: var(--color-accent-gold); - font-size: 12px; - font-weight: 800; - text-transform: uppercase; -} - -.template-spec h3 { - margin: 0; - font-size: 22px; - line-height: 1.12; - text-transform: uppercase; -} - -.template-spec p { - margin: 0; - color: var(--color-gray-600); - font-size: 14px; - line-height: 1.48; -} - -.template-spec a { - color: var(--color-primary-wine-100); - font-weight: 800; - text-decoration: underline; - text-underline-offset: 3px; -} - -.template-spec em { - margin-top: 4px; - color: var(--color-primary-wine-100); - font-size: 13px; - font-style: normal; - font-weight: 800; -} - -.screen-grid { - display: grid; - grid-template-columns: repeat(3, minmax(0, 1fr)); - gap: 18px; -} - -.screen-card { - min-height: 230px; - padding: 20px; - border: 1px solid rgba(102, 96, 95, 0.16); - border-radius: var(--radius-sm); - background: - linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(255, 255, 255, 0.98)), - var(--screen-accent, #eef2f6); - box-shadow: var(--shadow-soft); - display: grid; - align-content: space-between; - gap: 18px; - transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease; -} - -.screen-card:hover { - border-color: rgba(75, 15, 36, 0.28); - box-shadow: 0 22px 54px rgba(25, 37, 62, 0.13); - transform: translateY(-2px); -} - -.screen-card span { - color: var(--color-accent-gold); - font-size: 12px; - font-weight: 800; - text-transform: uppercase; -} - -.screen-card strong { - color: var(--color-neutral-black); - font-family: var(--font-heading); - font-size: 24px; - line-height: 1.1; - text-transform: uppercase; -} - -.screen-card p { - margin: 0; - color: var(--color-gray-600); - line-height: 1.5; -} - -.screen-card--home { - --screen-accent: linear-gradient(135deg, #4b0f24, #b9965b); -} - -.screen-card--catalog { - --screen-accent: linear-gradient(135deg, #eef2f6, #d9dee6); -} - -.screen-card--product, -.screen-card--cards { - --screen-accent: linear-gradient(135deg, #6d1c36, #e6dce1); -} - -.screen-card--news, -.screen-card--guidelines { - --screen-accent: linear-gradient(135deg, #1f4d3a, #e8eadb); -} - -.screen-card--about, -.screen-card--contacts, -.screen-card--auth { - --screen-accent: linear-gradient(135deg, #1f3476, #dde4ec); -} - -.screen-qa-grid { - margin-top: 24px; -} - -@media (max-width: 1100px) { - .sidebar { - position: static; - width: auto; - border-right: none; - border-bottom: 1px solid rgba(102, 96, 95, 0.18); - } - - .side-nav { - grid-template-columns: repeat(5, minmax(0, 1fr)); - } - - .page-shell { - margin-left: 0; - } - - .kit-hero, - .component-columns, - .catalog-pattern { - grid-template-columns: 1fr; - } - - .swatch-grid, - .shadow-grid, - .image-bg-grid, - .icon-style-grid, - .status-grid, - .production-rules, - .checklist-grid, - .template-grid, - .template-spec-grid, - .screen-grid { - grid-template-columns: repeat(2, minmax(0, 1fr)); - } -} - -@media (max-width: 760px) { - .sidebar { - padding: 18px; - } - - .side-nav { - grid-template-columns: 1fr 1fr; - } - - .kit-hero, - .section { - padding: 40px 18px; - } - - .kit-hero { - min-height: auto; - } - - h1 { - font-size: 42px; - } - - h2 { - font-size: 34px; - } - - .swatch-grid, - .shadow-grid, - .image-bg-grid, - .icon-style-grid, - .status-grid, - .production-rules, - .checklist-grid, - .product-grid--3, - .template-grid, - .template-spec-grid, - .screen-grid, - .token-grid, - .spec-grid { - grid-template-columns: 1fr; - } - - .type-row { - grid-template-columns: 1fr; - gap: 8px; - } - - .header-demo { - align-items: flex-start; - flex-direction: column; - } - - .product-card--compact { - grid-template-columns: 1fr; - } - - .product-card--compact .product-footer { - grid-column: auto; - } - - .screen-card { - min-height: 190px; - } -} diff --git a/fonts/cormorant-garamond-600-cyrillic-ext.woff2 b/fonts/cormorant-garamond-600-cyrillic-ext.woff2 deleted file mode 100644 index c56f179..0000000 Binary files a/fonts/cormorant-garamond-600-cyrillic-ext.woff2 and /dev/null differ diff --git a/fonts/cormorant-garamond-600-cyrillic.woff2 b/fonts/cormorant-garamond-600-cyrillic.woff2 deleted file mode 100644 index 20114e2..0000000 Binary files a/fonts/cormorant-garamond-600-cyrillic.woff2 and /dev/null differ diff --git a/fonts/cormorant-garamond-600-latin-ext.woff2 b/fonts/cormorant-garamond-600-latin-ext.woff2 deleted file mode 100644 index e90a82d..0000000 Binary files a/fonts/cormorant-garamond-600-latin-ext.woff2 and /dev/null differ diff --git a/fonts/cormorant-garamond-600-latin.woff2 b/fonts/cormorant-garamond-600-latin.woff2 deleted file mode 100644 index a1828a8..0000000 Binary files a/fonts/cormorant-garamond-600-latin.woff2 and /dev/null differ diff --git a/fonts/inter-400-cyrillic-ext.woff2 b/fonts/inter-400-cyrillic-ext.woff2 deleted file mode 100644 index de83a9c..0000000 Binary files a/fonts/inter-400-cyrillic-ext.woff2 and /dev/null differ diff --git a/fonts/inter-400-cyrillic.woff2 b/fonts/inter-400-cyrillic.woff2 deleted file mode 100644 index d750914..0000000 Binary files a/fonts/inter-400-cyrillic.woff2 and /dev/null differ diff --git a/fonts/inter-400-latin-ext.woff2 b/fonts/inter-400-latin-ext.woff2 deleted file mode 100644 index 479d010..0000000 Binary files a/fonts/inter-400-latin-ext.woff2 and /dev/null differ diff --git a/fonts/inter-400-latin.woff2 b/fonts/inter-400-latin.woff2 deleted file mode 100644 index d15208d..0000000 Binary files a/fonts/inter-400-latin.woff2 and /dev/null differ diff --git a/fonts/manrope-400-cyrillic-ext.woff2 b/fonts/manrope-400-cyrillic-ext.woff2 deleted file mode 100644 index 57c7c0e..0000000 Binary files a/fonts/manrope-400-cyrillic-ext.woff2 and /dev/null differ diff --git a/fonts/manrope-400-cyrillic.woff2 b/fonts/manrope-400-cyrillic.woff2 deleted file mode 100644 index 3a06229..0000000 Binary files a/fonts/manrope-400-cyrillic.woff2 and /dev/null differ diff --git a/fonts/manrope-400-latin-ext.woff2 b/fonts/manrope-400-latin-ext.woff2 deleted file mode 100644 index bd24140..0000000 Binary files a/fonts/manrope-400-latin-ext.woff2 and /dev/null differ diff --git a/fonts/manrope-400-latin.woff2 b/fonts/manrope-400-latin.woff2 deleted file mode 100644 index 71eb731..0000000 Binary files a/fonts/manrope-400-latin.woff2 and /dev/null differ diff --git a/fonts/montserrat-500-cyrillic-ext.woff2 b/fonts/montserrat-500-cyrillic-ext.woff2 deleted file mode 100644 index 0eecd0e..0000000 Binary files a/fonts/montserrat-500-cyrillic-ext.woff2 and /dev/null differ diff --git a/fonts/montserrat-500-cyrillic.woff2 b/fonts/montserrat-500-cyrillic.woff2 deleted file mode 100644 index d5e7d03..0000000 Binary files a/fonts/montserrat-500-cyrillic.woff2 and /dev/null differ diff --git a/fonts/montserrat-500-latin-ext.woff2 b/fonts/montserrat-500-latin-ext.woff2 deleted file mode 100644 index 9a03818..0000000 Binary files a/fonts/montserrat-500-latin-ext.woff2 and /dev/null differ diff --git a/fonts/montserrat-500-latin.woff2 b/fonts/montserrat-500-latin.woff2 deleted file mode 100644 index 3b2eaa9..0000000 Binary files a/fonts/montserrat-500-latin.woff2 and /dev/null differ diff --git a/fonts/playfair-display-600-cyrillic.woff2 b/fonts/playfair-display-600-cyrillic.woff2 deleted file mode 100644 index a85e8f8..0000000 Binary files a/fonts/playfair-display-600-cyrillic.woff2 and /dev/null differ diff --git a/fonts/playfair-display-600-latin-ext.woff2 b/fonts/playfair-display-600-latin-ext.woff2 deleted file mode 100644 index 53c412b..0000000 Binary files a/fonts/playfair-display-600-latin-ext.woff2 and /dev/null differ diff --git a/fonts/playfair-display-600-latin.woff2 b/fonts/playfair-display-600-latin.woff2 deleted file mode 100644 index 5a3fbbd..0000000 Binary files a/fonts/playfair-display-600-latin.woff2 and /dev/null 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

-

Премиальный каталог вина для торговли

-

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

-
- Смотреть каталог - Открыть UI-kit -
-
-
- -
-
-
-
-

Producers

-

Производители

-
-

Ключевые винные дома и хозяйства из портфеля DP Trade: от классических брендов до эксклюзивных партнеров.

-
-
- ArgentinaCatena Zapata - ChampagneBollinger - BurgundyDomaine De Villaine - ItalyGaja - FrancePascal Jolivet - RhonePaul Jaboulet Aine -
-
-
- -
-
-
-
-

Latest news

-

Последние новости

-
- Все новости -
-
-
-
-
Интервью

Интервью с Лаурой Катеной

-
-
-
-
Бренды

Catena Zapata вновь признана самым почитаемым винным брендом мира

-
-
-
-
Италия

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

-
-
-
-
- -
-
-
-

Recommendations

-

Рекомендации недели

-
-
-
-
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 ₽Подробнее
-
-
-
-
-
- - -
- - - diff --git a/news-villa-raiano-v2.html b/news-villa-raiano-v2.html deleted file mode 100644 index 67f34e8..0000000 --- a/news-villa-raiano-v2.html +++ /dev/null @@ -1,87 +0,0 @@ - - - - - DP Trade — Villa Raiano editorial - - -
- -
-
-
-
-
-

Новости / 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 deleted file mode 100644 index 5ec63cb..0000000 --- a/news-villa-raiano.html +++ /dev/null @@ -1,62 +0,0 @@ - - - - - DP Trade — Villa Raiano - - -
- -
-
-
-
-

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

-

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 deleted file mode 100644 index 86d15dd..0000000 --- a/product.html +++ /dev/null @@ -1,36 +0,0 @@ - - - - - DP Trade — Product - - -
- - -
-
-
Chateau Laroque Grand Cru
-
-

Product / Default

-

Chateau Laroque Grand Cru

-

Премиальная позиция из Bordeaux для ресторанных карт и специализированной розницы.

-
-
РегионBordeaux
-
ТипRed dry
-
Год2019
-
Объем0.75 L
-
Цена3 890 ₽
-
-
- Запросить прайс - Вернуться в каталог -
-
-
-
- -
- - - diff --git a/ui-kit.html b/ui-kit.html deleted file mode 100644 index a8eb161..0000000 --- a/ui-kit.html +++ /dev/null @@ -1,1172 +0,0 @@ - - - - - DP Trade — Design System - - - - -
-
-
-

DP Trade — Design System

-

UI-kit для премиального торгового каталога

-

- Живая HTML/CSS витрина компонентов, токенов, паттернов и экранов для сайта DP Trade. - Структура повторяет Figma-файл и использует критичный naming format. -

-
- Компоненты - Dev tokens -
-
-
-
-
- Product bottle -
-
- Bordeaux -

Chateau Laroque Grand Cru

-

France · Red dry · 2019 · 0.75 L

-
-
- от 3 890 ₽ - -
-
-
-
- -
-
-
-

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

-
-
- - Color / Primary / Wine / 100 - #4B0F24 -
-
- - Color / Primary / Wine / 80 - #6D1C36 -
-
- - Color / Neutral / Black - #161616 -
-
- - Color / Neutral / Gray / 600 - #66605F -
-
- - Color / Neutral / Gray / 300 - #D8D3CF -
-
- - Color / Background / Base - #F4F6F9 -
-
- - Color / Accent / Gold - #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 -

Rare wines for trade

-
-
- Text / Heading / H2 / Montserrat / 36 / 44 -

Catalog collections

-
-
- Text / Heading / H3 / Montserrat / 28 / 36 -

Producer selection

-
-
- Text / Body / Regular / Inter / 16 / 24 -

Вина, регионы, партии и коммерческие условия в единой системе.

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

-
- - -
-
- 4 - 8 - 16 - 24 - 32 - 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.

-
-
-
- -
-

Tokens

-
- color.primary = #4B0F24 - color.text = #161616 - 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) -
-
-
-
- -
-
-

02 Components

-

Компоненты

-
- -
-

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

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

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

-

Italy · Red dry · 2018 · 0.75 L

-
-
- 4 240 ₽ - -
-
-
-
Product bottle
-
- Rioja -

Reserva Seleccion Especial

-

Spain · Red dry · 2017 · 0.75 L

-
-
- 2 980 ₽ - -
-
-
-
Product bottle
-
- Mosel -

Riesling Kabinett

-

Germany · White · 2021

-
-
- 2 150 ₽ -
-
-
-
-
- Варианты -

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

-
- - -
- - - -
- -
-
-
-

Tags & Inputs

-
-
- Tag / Default - Tag / Filled - Tag / Outline -
- - - - -
-
-
-
-

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

-
- - - - - - - - - - - - - - - - - - - - - - - - - - -
SKUNameRegionStockTrade price
DP-1042Chateau Laroque Grand CruBordeaux48 cases3 890 ₽
DP-1188Riesling KabinettMosel32 cases2 150 ₽
-
-
-
-

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.

-
-
-
-
- -
-
-

03 Patterns

-

Паттерны

-
-
- -
-

Pattern / Product Grid / 3 col

-
-
Bordeaux Grand Cru
-
Tuscany Reserve
-
Mosel Riesling
-
-
-
-
-

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

-

Шаблоны

-
-

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

-
-
-
- Template / Home - Hero + regions + recommendations -
-
- Template / Catalog - Filters + product grid + table mode -
-
- Template / Product Page - Gallery + meta + CTA + availability -
-
- 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

-

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

-
-

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

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