Merge pull request 'codex/uikit-menu' (#1) from codex/uikit-menu into main
Reviewed-on: #1
This commit is contained in:
commit
5127269b0a
@ -1,29 +1,44 @@
|
|||||||
<header class="site-header">
|
<header class="site-header">
|
||||||
<div class="container header-top">
|
<div class="container header-top">
|
||||||
<a class="brand-logo" href="index.html" aria-label="DP Trade">
|
<a class="brand-logo" href="index.html" aria-label="DP Trade">
|
||||||
<span>DP</span> Trade
|
<img src="https://wine-dp-trade.ru/wp-content/uploads/2024/11/logo-500x107.png" alt="DP Trade" width="156" height="33">
|
||||||
<small>since 1991</small>
|
|
||||||
</a>
|
</a>
|
||||||
|
|
||||||
<form class="search-bar" action="#" role="search">
|
<form class="search-bar" action="#" role="search">
|
||||||
<button type="submit" aria-label="Поиск">⌕</button>
|
<button type="submit" aria-label="Поиск">⌕</button>
|
||||||
<input type="search" placeholder="Найти название, марку, бренд, производителя..." aria-label="Поиск">
|
<input type="search" placeholder="Поиск по вину, региону, производителю" aria-label="Поиск">
|
||||||
</form>
|
</form>
|
||||||
|
|
||||||
<a class="phone-link" href="tel:+74959379460">+7 (495) 937-94-60</a>
|
<div class="header-actions">
|
||||||
|
<a class="phone-link" href="tel:+74959379460">+7 (495) 937-94-60</a>
|
||||||
|
<a class="header-icon header-icon--air" href="#" aria-label="Аккаунт">
|
||||||
|
<svg viewBox="0 0 24 24" aria-hidden="true">
|
||||||
|
<path d="M12 12.2a4.1 4.1 0 1 0 0-8.2 4.1 4.1 0 0 0 0 8.2Z" />
|
||||||
|
<path d="M4.8 20.2c1.1-3.3 3.6-5 7.2-5s6.1 1.7 7.2 5" />
|
||||||
|
</svg>
|
||||||
|
</a>
|
||||||
|
<a class="header-icon header-icon--air" href="#" aria-label="Корзина">
|
||||||
|
<svg viewBox="0 0 24 24" aria-hidden="true">
|
||||||
|
<path d="M5 6h2l1.4 9.2h8.5L19 8H8" />
|
||||||
|
<path d="M9.4 19.2h.1M16.8 19.2h.1" />
|
||||||
|
</svg>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<nav class="container main-nav" aria-label="Основная навигация">
|
<nav class="container main-nav" aria-label="Основная навигация">
|
||||||
<a href="#">О нас</a>
|
<a href="catalog.html">Каталог</a>
|
||||||
|
|
||||||
<div class="nav-item">
|
<div class="nav-item">
|
||||||
<button class="nav-trigger" type="button" aria-expanded="false">Регион <span aria-hidden="true">⌄</span></button>
|
<button class="nav-trigger" type="button" aria-expanded="false">Регион <span class="nav-chevron" aria-hidden="true"><svg viewBox="0 0 10 6"><path d="M1 1l4 4 4-4" /></svg></span></button>
|
||||||
|
|
||||||
<section class="mega-menu" aria-label="Регион">
|
<section class="mega-menu" aria-label="Регион">
|
||||||
<div class="mega-intro">
|
<div class="mega-intro">
|
||||||
<p class="eyebrow">Регион</p>
|
<div>
|
||||||
<h2>Выбор вина по географии</h2>
|
<p class="eyebrow">Регион</p>
|
||||||
<p>Один экран для выбора страны, апелласьона или популярного региона без длинного дерева навигации.</p>
|
<h2>Вина по географии</h2>
|
||||||
|
</div>
|
||||||
|
<p>Быстрый вход в каталог через страну, апелласьон или популярный регион.</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="menu-grid">
|
<div class="menu-grid">
|
||||||
@ -63,7 +78,7 @@
|
|||||||
</div>
|
</div>
|
||||||
</article>
|
</article>
|
||||||
|
|
||||||
<article class="menu-column">
|
<article class="menu-column popular-column">
|
||||||
<p class="section-title">Популярные регионы</p>
|
<p class="section-title">Популярные регионы</p>
|
||||||
<div class="popular-list">
|
<div class="popular-list">
|
||||||
<a href="#">Бордо</a>
|
<a href="#">Бордо</a>
|
||||||
@ -77,9 +92,161 @@
|
|||||||
</section>
|
</section>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<a href="catalog.html">Вино</a>
|
<div class="nav-item">
|
||||||
<a href="#">Крепкий алкоголь</a>
|
<button class="nav-trigger" type="button" aria-expanded="false">Вино <span class="nav-chevron" aria-hidden="true"><svg viewBox="0 0 10 6"><path d="M1 1l4 4 4-4" /></svg></span></button>
|
||||||
<a href="#">Стиль и вкус</a>
|
|
||||||
|
<section class="mega-menu" aria-label="Вино">
|
||||||
|
<div class="mega-intro">
|
||||||
|
<div>
|
||||||
|
<p class="eyebrow">Вино</p>
|
||||||
|
<h2>Каталог по типу и стилю</h2>
|
||||||
|
</div>
|
||||||
|
<p>Быстрый выбор вина по цвету, категории и уровню сладости.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="menu-grid">
|
||||||
|
<article class="menu-column visual-column">
|
||||||
|
<img src="https://images.unsplash.com/photo-1510812431401-41d2bd2722f3?auto=format&fit=crop&w=900&q=80" alt="Бокалы вина">
|
||||||
|
<p>Начните с типа вина или сразу переходите к стилю, если знаете нужный профиль.</p>
|
||||||
|
</article>
|
||||||
|
|
||||||
|
<article class="menu-column">
|
||||||
|
<p class="section-title">По типу</p>
|
||||||
|
<a href="#">Красное</a>
|
||||||
|
<a href="#">Белое</a>
|
||||||
|
<a href="#">Розовое</a>
|
||||||
|
<a href="#">Игристое</a>
|
||||||
|
<a href="#">Шампанское</a>
|
||||||
|
</article>
|
||||||
|
|
||||||
|
<article class="menu-column">
|
||||||
|
<p class="section-title">По стилю</p>
|
||||||
|
<a href="#">Сухие</a>
|
||||||
|
<a href="#">Полусухие</a>
|
||||||
|
<a href="#">Полусладкие</a>
|
||||||
|
<a href="#">Сладкие</a>
|
||||||
|
<a href="#">Брют</a>
|
||||||
|
<a href="#">Экстра брют</a>
|
||||||
|
</article>
|
||||||
|
|
||||||
|
<article class="menu-column popular-column">
|
||||||
|
<p class="section-title">Популярное</p>
|
||||||
|
<div class="popular-list">
|
||||||
|
<a href="#">Новинки</a>
|
||||||
|
<a href="#">Хиты продаж</a>
|
||||||
|
<a href="#">Для ресторанов</a>
|
||||||
|
<a href="#">Премиум подборка</a>
|
||||||
|
</div>
|
||||||
|
</article>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="nav-item">
|
||||||
|
<button class="nav-trigger" type="button" aria-expanded="false">Крепкий алкоголь <span class="nav-chevron" aria-hidden="true"><svg viewBox="0 0 10 6"><path d="M1 1l4 4 4-4" /></svg></span></button>
|
||||||
|
|
||||||
|
<section class="mega-menu" aria-label="Крепкий алкоголь">
|
||||||
|
<div class="mega-intro">
|
||||||
|
<div>
|
||||||
|
<p class="eyebrow">Spirits</p>
|
||||||
|
<h2>Крепкий алкоголь</h2>
|
||||||
|
</div>
|
||||||
|
<p>Подборка крепких напитков для баров, ресторанов и специализированной розницы.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="menu-grid">
|
||||||
|
<article class="menu-column visual-column">
|
||||||
|
<img src="https://images.unsplash.com/photo-1527281400683-1aae777175f8?auto=format&fit=crop&w=900&q=80" alt="Крепкий алкоголь в бокале">
|
||||||
|
<p>Категории, выдержка и происхождение для быстрой навигации по ассортименту.</p>
|
||||||
|
</article>
|
||||||
|
|
||||||
|
<article class="menu-column">
|
||||||
|
<p class="section-title">Категории</p>
|
||||||
|
<a href="#">Виски</a>
|
||||||
|
<a href="#">Коньяк</a>
|
||||||
|
<a href="#">Арманьяк</a>
|
||||||
|
<a href="#">Ром</a>
|
||||||
|
<a href="#">Джин</a>
|
||||||
|
<a href="#">Водка</a>
|
||||||
|
<a href="#">Текила</a>
|
||||||
|
<a href="#">Ликеры</a>
|
||||||
|
</article>
|
||||||
|
|
||||||
|
<article class="menu-column">
|
||||||
|
<p class="section-title">По стилю</p>
|
||||||
|
<a href="#">Односолодовый</a>
|
||||||
|
<a href="#">Купажированный</a>
|
||||||
|
<a href="#">Выдержанный</a>
|
||||||
|
<a href="#">Пряный</a>
|
||||||
|
<a href="#">Дижестив</a>
|
||||||
|
<a href="#">Для коктейлей</a>
|
||||||
|
</article>
|
||||||
|
|
||||||
|
<article class="menu-column popular-column">
|
||||||
|
<p class="section-title">Популярное</p>
|
||||||
|
<div class="popular-list">
|
||||||
|
<a href="#">Single Malt</a>
|
||||||
|
<a href="#">Cognac VSOP</a>
|
||||||
|
<a href="#">Premium Gin</a>
|
||||||
|
<a href="#">Bar Selection</a>
|
||||||
|
</div>
|
||||||
|
</article>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="nav-item">
|
||||||
|
<button class="nav-trigger" type="button" aria-expanded="false">Производители <span class="nav-chevron" aria-hidden="true"><svg viewBox="0 0 10 6"><path d="M1 1l4 4 4-4" /></svg></span></button>
|
||||||
|
|
||||||
|
<section class="mega-menu" aria-label="Производители">
|
||||||
|
<div class="mega-intro">
|
||||||
|
<div>
|
||||||
|
<p class="eyebrow">Производители</p>
|
||||||
|
<h2>Дома, хозяйства и бренды</h2>
|
||||||
|
</div>
|
||||||
|
<p>Навигация по ключевым производителям, регионам и партнерским брендам DP Trade.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="menu-grid">
|
||||||
|
<article class="menu-column visual-column">
|
||||||
|
<img src="https://images.unsplash.com/photo-1568213816046-0ee1c42bd559?auto=format&fit=crop&w=900&q=80" alt="Винодельня и бочки">
|
||||||
|
<p>Откройте ассортимент через знакомые хозяйства, винные дома и регионы производства.</p>
|
||||||
|
</article>
|
||||||
|
|
||||||
|
<article class="menu-column">
|
||||||
|
<p class="section-title">По странам</p>
|
||||||
|
<a href="#">Франция</a>
|
||||||
|
<a href="#">Италия</a>
|
||||||
|
<a href="#">Испания</a>
|
||||||
|
<a href="#">Германия</a>
|
||||||
|
<a href="#">Португалия</a>
|
||||||
|
<a href="#">Чили</a>
|
||||||
|
<a href="#">Аргентина</a>
|
||||||
|
</article>
|
||||||
|
|
||||||
|
<article class="menu-column">
|
||||||
|
<p class="section-title">Избранные</p>
|
||||||
|
<a href="#">Chateau Laroque</a>
|
||||||
|
<a href="#">Marchesi Antinori</a>
|
||||||
|
<a href="#">Torres</a>
|
||||||
|
<a href="#">Dr. Loosen</a>
|
||||||
|
<a href="#">Catena Zapata</a>
|
||||||
|
<a href="#">Penfolds</a>
|
||||||
|
</article>
|
||||||
|
|
||||||
|
<article class="menu-column popular-column">
|
||||||
|
<p class="section-title">Форматы</p>
|
||||||
|
<div class="popular-list">
|
||||||
|
<a href="#">Семейные хозяйства</a>
|
||||||
|
<a href="#">Grand Cru</a>
|
||||||
|
<a href="#">Органика</a>
|
||||||
|
<a href="#">Эксклюзив DP Trade</a>
|
||||||
|
</div>
|
||||||
|
</article>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
</div>
|
||||||
|
<a href="#">Поставки</a>
|
||||||
<a href="#">Новости</a>
|
<a href="#">Новости</a>
|
||||||
<a href="ui-kit.html">UI-kit</a>
|
<a href="ui-kit.html">UI-kit</a>
|
||||||
</nav>
|
</nav>
|
||||||
|
|||||||
242
css/site.css
242
css/site.css
@ -48,17 +48,18 @@ select {
|
|||||||
position: sticky;
|
position: sticky;
|
||||||
top: 0;
|
top: 0;
|
||||||
z-index: 20;
|
z-index: 20;
|
||||||
background: rgba(255, 253, 249, 0.94);
|
background: rgba(248, 250, 252, 0.94);
|
||||||
border-bottom: 1px solid rgba(102, 96, 95, 0.18);
|
border-bottom: 1px solid rgba(102, 96, 95, 0.18);
|
||||||
backdrop-filter: blur(16px);
|
box-shadow: 0 10px 28px rgba(22, 22, 22, 0.05);
|
||||||
|
backdrop-filter: blur(18px);
|
||||||
}
|
}
|
||||||
|
|
||||||
.header-top {
|
.header-top {
|
||||||
display: grid;
|
display: grid;
|
||||||
grid-template-columns: 210px minmax(260px, 1fr) auto;
|
grid-template-columns: 170px minmax(260px, 1fr) auto;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
gap: 28px;
|
gap: 20px;
|
||||||
min-height: 86px;
|
min-height: 72px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.brand-logo {
|
.brand-logo {
|
||||||
@ -67,10 +68,11 @@ select {
|
|||||||
width: fit-content;
|
width: fit-content;
|
||||||
color: var(--color-accent-blue);
|
color: var(--color-accent-blue);
|
||||||
font-family: var(--font-heading-retail);
|
font-family: var(--font-heading-retail);
|
||||||
font-size: 28px;
|
font-size: 26px;
|
||||||
font-weight: 800;
|
font-weight: 800;
|
||||||
letter-spacing: 0;
|
letter-spacing: 0;
|
||||||
line-height: 0.9;
|
line-height: 0.9;
|
||||||
|
text-transform: uppercase;
|
||||||
}
|
}
|
||||||
|
|
||||||
.brand-logo span:first-child {
|
.brand-logo span:first-child {
|
||||||
@ -79,8 +81,8 @@ select {
|
|||||||
|
|
||||||
.brand-logo small {
|
.brand-logo small {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
left: 70px;
|
left: 54px;
|
||||||
top: 27px;
|
top: 24px;
|
||||||
color: var(--color-primary-wine-80);
|
color: var(--color-primary-wine-80);
|
||||||
font-size: 8px;
|
font-size: 8px;
|
||||||
font-weight: 700;
|
font-weight: 700;
|
||||||
@ -89,11 +91,11 @@ select {
|
|||||||
|
|
||||||
.search-bar {
|
.search-bar {
|
||||||
display: grid;
|
display: grid;
|
||||||
grid-template-columns: 50px minmax(0, 1fr);
|
grid-template-columns: 44px minmax(0, 1fr);
|
||||||
align-items: center;
|
align-items: center;
|
||||||
min-height: 52px;
|
min-height: 44px;
|
||||||
border: 1px solid rgba(102, 96, 95, 0.24);
|
border: 1px solid rgba(102, 96, 95, 0.24);
|
||||||
border-radius: 999px;
|
border-radius: var(--radius-sm);
|
||||||
background: var(--color-surface);
|
background: var(--color-surface);
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -103,11 +105,12 @@ select {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.search-bar button {
|
.search-bar button {
|
||||||
width: 50px;
|
width: 44px;
|
||||||
height: 50px;
|
height: 42px;
|
||||||
border: 0;
|
border: 0;
|
||||||
background: transparent;
|
background: transparent;
|
||||||
color: var(--color-primary-wine-100);
|
color: var(--color-primary-wine-100);
|
||||||
|
font-size: 18px;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -116,22 +119,63 @@ select {
|
|||||||
border: 0;
|
border: 0;
|
||||||
outline: 0;
|
outline: 0;
|
||||||
color: var(--color-neutral-black);
|
color: var(--color-neutral-black);
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.header-actions {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 10px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.phone-link {
|
.phone-link {
|
||||||
color: var(--color-accent-blue);
|
color: var(--color-accent-blue);
|
||||||
font-size: 18px;
|
font-size: 15px;
|
||||||
font-weight: 700;
|
font-weight: 800;
|
||||||
white-space: nowrap;
|
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 {
|
.main-nav {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
justify-content: flex-start;
|
||||||
gap: 42px;
|
gap: 8px;
|
||||||
min-height: 68px;
|
min-height: 52px;
|
||||||
overflow-x: auto;
|
overflow-x: auto;
|
||||||
|
border-top: 1px solid rgba(102, 96, 95, 0.12);
|
||||||
}
|
}
|
||||||
|
|
||||||
.main-nav > a,
|
.main-nav > a,
|
||||||
@ -139,13 +183,15 @@ select {
|
|||||||
display: inline-flex;
|
display: inline-flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
gap: 7px;
|
gap: 7px;
|
||||||
min-height: 40px;
|
min-height: 34px;
|
||||||
|
padding: 0 2px;
|
||||||
border: 0;
|
border: 0;
|
||||||
border-bottom: 2px solid transparent;
|
border-bottom: 2px solid transparent;
|
||||||
|
border-radius: 0;
|
||||||
background: transparent;
|
background: transparent;
|
||||||
color: var(--color-neutral-gray-700);
|
color: var(--color-neutral-gray-700);
|
||||||
font-size: 14px;
|
font-size: 12px;
|
||||||
font-weight: 700;
|
font-weight: 800;
|
||||||
letter-spacing: 0;
|
letter-spacing: 0;
|
||||||
text-transform: uppercase;
|
text-transform: uppercase;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
@ -156,28 +202,60 @@ select {
|
|||||||
.nav-item:hover .nav-trigger,
|
.nav-item:hover .nav-trigger,
|
||||||
.nav-item:focus-within .nav-trigger {
|
.nav-item:focus-within .nav-trigger {
|
||||||
border-bottom-color: var(--color-primary-wine-100);
|
border-bottom-color: var(--color-primary-wine-100);
|
||||||
|
background: transparent;
|
||||||
color: var(--color-primary-wine-100);
|
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 {
|
.nav-item {
|
||||||
position: static;
|
position: static;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.nav-item::after {
|
||||||
|
content: "";
|
||||||
|
position: fixed;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
top: 102px;
|
||||||
|
z-index: 19;
|
||||||
|
display: none;
|
||||||
|
height: 34px;
|
||||||
|
}
|
||||||
|
|
||||||
.mega-menu {
|
.mega-menu {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
left: 50%;
|
left: 50%;
|
||||||
top: 154px;
|
top: 118px;
|
||||||
width: min(1180px, calc(100vw - 40px));
|
width: min(1180px, calc(100vw - 40px));
|
||||||
max-height: calc(100vh - 172px);
|
max-height: calc(100vh - 142px);
|
||||||
overflow: auto;
|
overflow: auto;
|
||||||
padding: 28px;
|
padding: 22px;
|
||||||
border: 1px solid rgba(102, 96, 95, 0.18);
|
border: 1px solid rgba(102, 96, 95, 0.18);
|
||||||
background: #fffdfa;
|
background: #f8fafc;
|
||||||
box-shadow: var(--shadow-lift);
|
box-shadow: var(--shadow-lift);
|
||||||
transform: translateX(-50%);
|
transform: translateX(-50%);
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.nav-item:hover::after,
|
||||||
|
.nav-item:focus-within::after,
|
||||||
.nav-item:hover .mega-menu,
|
.nav-item:hover .mega-menu,
|
||||||
.nav-item:focus-within .mega-menu {
|
.nav-item:focus-within .mega-menu {
|
||||||
display: block;
|
display: block;
|
||||||
@ -185,13 +263,19 @@ select {
|
|||||||
|
|
||||||
.mega-intro {
|
.mega-intro {
|
||||||
display: grid;
|
display: grid;
|
||||||
grid-template-columns: minmax(220px, 0.55fr) minmax(320px, 1fr);
|
grid-template-columns: minmax(220px, 0.7fr) minmax(320px, 1fr);
|
||||||
gap: 18px 34px;
|
gap: 18px 28px;
|
||||||
align-items: end;
|
align-items: end;
|
||||||
padding-bottom: 22px;
|
padding-bottom: 18px;
|
||||||
border-bottom: 1px solid rgba(102, 96, 95, 0.18);
|
border-bottom: 1px solid rgba(102, 96, 95, 0.18);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.mega-intro h2 {
|
||||||
|
font-size: 26px;
|
||||||
|
font-weight: 800;
|
||||||
|
text-transform: uppercase;
|
||||||
|
}
|
||||||
|
|
||||||
.eyebrow,
|
.eyebrow,
|
||||||
.section-title,
|
.section-title,
|
||||||
.muted-caps {
|
.muted-caps {
|
||||||
@ -219,31 +303,37 @@ select {
|
|||||||
|
|
||||||
.menu-grid {
|
.menu-grid {
|
||||||
display: grid;
|
display: grid;
|
||||||
grid-template-columns: 1.4fr 0.9fr 1.1fr 1fr;
|
grid-template-columns: 1.05fr 0.82fr 1.25fr 0.88fr;
|
||||||
gap: 28px;
|
gap: 22px;
|
||||||
padding-top: 28px;
|
padding-top: 22px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.menu-column {
|
.menu-column {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
gap: 12px;
|
gap: 10px;
|
||||||
min-width: 0;
|
min-width: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.menu-column a {
|
.menu-column a {
|
||||||
width: fit-content;
|
width: fit-content;
|
||||||
max-width: 100%;
|
max-width: 100%;
|
||||||
font-size: 16px;
|
color: var(--color-neutral-gray-700);
|
||||||
|
font-size: 14px;
|
||||||
|
font-weight: 600;
|
||||||
}
|
}
|
||||||
|
|
||||||
.menu-column a:hover {
|
.menu-column a:hover {
|
||||||
color: var(--color-primary-wine-80);
|
color: var(--color-primary-wine-80);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.visual-column {
|
||||||
|
gap: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
.visual-column img {
|
.visual-column img {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
aspect-ratio: 16 / 9;
|
aspect-ratio: 4 / 3;
|
||||||
object-fit: cover;
|
object-fit: cover;
|
||||||
border-radius: var(--radius-sm);
|
border-radius: var(--radius-sm);
|
||||||
}
|
}
|
||||||
@ -251,22 +341,26 @@ select {
|
|||||||
.visual-column p {
|
.visual-column p {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
color: var(--color-neutral-gray-600);
|
color: var(--color-neutral-gray-600);
|
||||||
|
font-size: 13px;
|
||||||
|
line-height: 1.42;
|
||||||
}
|
}
|
||||||
|
|
||||||
.appellations {
|
.appellations {
|
||||||
display: grid;
|
display: grid;
|
||||||
grid-template-columns: 1fr 1fr;
|
grid-template-columns: 1fr 1fr;
|
||||||
gap: 20px;
|
gap: 9px 18px;
|
||||||
|
align-content: start;
|
||||||
}
|
}
|
||||||
|
|
||||||
.appellations .section-title {
|
.appellations .section-title {
|
||||||
grid-column: 1 / -1;
|
grid-column: 1 / -1;
|
||||||
|
margin-bottom: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.appellation-group {
|
.appellation-group {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
gap: 10px;
|
gap: 9px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.country-link {
|
.country-link {
|
||||||
@ -322,7 +416,7 @@ select {
|
|||||||
.button--secondary {
|
.button--secondary {
|
||||||
border-color: rgba(75, 15, 36, 0.24);
|
border-color: rgba(75, 15, 36, 0.24);
|
||||||
color: var(--color-primary-wine-100);
|
color: var(--color-primary-wine-100);
|
||||||
background: rgba(255, 255, 255, 0.72);
|
background: rgba(248, 250, 252, 0.78);
|
||||||
}
|
}
|
||||||
|
|
||||||
.button--sm {
|
.button--sm {
|
||||||
@ -332,7 +426,7 @@ select {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.hero {
|
.hero {
|
||||||
min-height: calc(100vh - 154px);
|
min-height: calc(100vh - 124px);
|
||||||
display: grid;
|
display: grid;
|
||||||
align-items: end;
|
align-items: end;
|
||||||
padding: 88px 0;
|
padding: 88px 0;
|
||||||
@ -341,7 +435,7 @@ select {
|
|||||||
url("https://images.unsplash.com/photo-1560493676-04071c5f467b?auto=format&fit=crop&w=1800&q=80");
|
url("https://images.unsplash.com/photo-1560493676-04071c5f467b?auto=format&fit=crop&w=1800&q=80");
|
||||||
background-position: center;
|
background-position: center;
|
||||||
background-size: cover;
|
background-size: cover;
|
||||||
color: #fffdfa;
|
color: #f8fafc;
|
||||||
}
|
}
|
||||||
|
|
||||||
.hero-copy {
|
.hero-copy {
|
||||||
@ -390,7 +484,7 @@ select {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.type-lab-section {
|
.type-lab-section {
|
||||||
background: #fffdfa;
|
background: #eef2f6;
|
||||||
}
|
}
|
||||||
|
|
||||||
.type-options {
|
.type-options {
|
||||||
@ -419,7 +513,7 @@ select {
|
|||||||
|
|
||||||
.type-card.is-selected {
|
.type-card.is-selected {
|
||||||
border-color: rgba(75, 15, 36, 0.48);
|
border-color: rgba(75, 15, 36, 0.48);
|
||||||
background: linear-gradient(180deg, #fffdfa 0%, #f7efe8 100%);
|
background: linear-gradient(180deg, #ffffff 0%, #eef2f6 100%);
|
||||||
box-shadow: var(--shadow-lift);
|
box-shadow: var(--shadow-lift);
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -437,7 +531,7 @@ select {
|
|||||||
|
|
||||||
.type-card.is-selected-soft {
|
.type-card.is-selected-soft {
|
||||||
border-color: rgba(185, 150, 91, 0.62);
|
border-color: rgba(185, 150, 91, 0.62);
|
||||||
background: #fffaf0;
|
background: #f7f4ea;
|
||||||
}
|
}
|
||||||
|
|
||||||
.type-card.is-selected-soft::before {
|
.type-card.is-selected-soft::before {
|
||||||
@ -476,6 +570,26 @@ select {
|
|||||||
color: var(--color-neutral-gray-600);
|
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 {
|
.type-scale {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-wrap: wrap;
|
flex-wrap: wrap;
|
||||||
@ -638,7 +752,7 @@ select {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.product-media--amber {
|
.product-media--amber {
|
||||||
background: linear-gradient(140deg, #a8632a, #eaded2);
|
background: linear-gradient(140deg, #a8632a, #dde4ec);
|
||||||
}
|
}
|
||||||
|
|
||||||
.product-media--green {
|
.product-media--green {
|
||||||
@ -671,7 +785,7 @@ select {
|
|||||||
inset: 54px 8px auto;
|
inset: 54px 8px auto;
|
||||||
height: 42px;
|
height: 42px;
|
||||||
border-radius: 4px;
|
border-radius: 4px;
|
||||||
background: #f4eee8;
|
background: #eef2f6;
|
||||||
}
|
}
|
||||||
|
|
||||||
.product-card h3 {
|
.product-card h3 {
|
||||||
@ -901,8 +1015,16 @@ select {
|
|||||||
grid-template-columns: 1fr;
|
grid-template-columns: 1fr;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.header-top {
|
||||||
|
padding: 16px 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.header-actions {
|
||||||
|
justify-content: space-between;
|
||||||
|
}
|
||||||
|
|
||||||
.phone-link {
|
.phone-link {
|
||||||
display: none;
|
font-size: 14px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.main-nav {
|
.main-nav {
|
||||||
@ -920,7 +1042,12 @@ select {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.mega-menu {
|
.mega-menu {
|
||||||
top: 206px;
|
top: 172px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-item::after {
|
||||||
|
top: 150px;
|
||||||
|
height: 34px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -931,16 +1058,31 @@ select {
|
|||||||
|
|
||||||
.header-top {
|
.header-top {
|
||||||
gap: 14px;
|
gap: 14px;
|
||||||
padding: 18px 0;
|
padding: 16px 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.header-actions {
|
||||||
|
align-items: center;
|
||||||
|
flex-direction: row;
|
||||||
|
gap: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.phone-link {
|
||||||
|
display: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.main-nav {
|
.main-nav {
|
||||||
min-height: 58px;
|
min-height: 54px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.mega-menu {
|
.mega-menu {
|
||||||
top: 204px;
|
top: 184px;
|
||||||
padding: 20px;
|
padding: 18px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-item::after {
|
||||||
|
top: 160px;
|
||||||
|
height: 34px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.mega-intro,
|
.mega-intro,
|
||||||
|
|||||||
@ -4,8 +4,8 @@
|
|||||||
--color-neutral-black: #161616;
|
--color-neutral-black: #161616;
|
||||||
--color-neutral-gray-700: #30343a;
|
--color-neutral-gray-700: #30343a;
|
||||||
--color-neutral-gray-600: #66605f;
|
--color-neutral-gray-600: #66605f;
|
||||||
--color-neutral-gray-300: #d8d3cf;
|
--color-neutral-gray-300: #d9dee6;
|
||||||
--color-background-base: #faf8f5;
|
--color-background-base: #f4f6f9;
|
||||||
--color-surface: #ffffff;
|
--color-surface: #ffffff;
|
||||||
--color-accent-gold: #b9965b;
|
--color-accent-gold: #b9965b;
|
||||||
--color-accent-blue: #1f3476;
|
--color-accent-blue: #1f3476;
|
||||||
|
|||||||
@ -3,8 +3,8 @@
|
|||||||
--color-primary-wine-80: #6d1c36;
|
--color-primary-wine-80: #6d1c36;
|
||||||
--color-neutral-black: #161616;
|
--color-neutral-black: #161616;
|
||||||
--color-gray-600: #66605f;
|
--color-gray-600: #66605f;
|
||||||
--color-gray-300: #d8d3cf;
|
--color-gray-300: #d9dee6;
|
||||||
--color-background-base: #faf8f5;
|
--color-background-base: #f4f6f9;
|
||||||
--color-accent-gold: #b9965b;
|
--color-accent-gold: #b9965b;
|
||||||
--color-white: #ffffff;
|
--color-white: #ffffff;
|
||||||
--color-error: #a33a2f;
|
--color-error: #a33a2f;
|
||||||
@ -59,7 +59,7 @@ select {
|
|||||||
inset: 0 auto 0 0;
|
inset: 0 auto 0 0;
|
||||||
width: 280px;
|
width: 280px;
|
||||||
padding: 24px;
|
padding: 24px;
|
||||||
background: #fffdf9;
|
background: #f8fafc;
|
||||||
border-right: 1px solid rgba(102, 96, 95, 0.18);
|
border-right: 1px solid rgba(102, 96, 95, 0.18);
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
@ -131,7 +131,7 @@ select {
|
|||||||
gap: 48px;
|
gap: 48px;
|
||||||
background:
|
background:
|
||||||
radial-gradient(circle at 82% 28%, rgba(185, 150, 91, 0.25), transparent 24%),
|
radial-gradient(circle at 82% 28%, rgba(185, 150, 91, 0.25), transparent 24%),
|
||||||
linear-gradient(135deg, #fffdfa 0%, #f4eee8 58%, #eaded2 100%);
|
linear-gradient(135deg, #ffffff 0%, #eef2f6 58%, #dde4ec 100%);
|
||||||
}
|
}
|
||||||
|
|
||||||
.kit-hero__content {
|
.kit-hero__content {
|
||||||
@ -463,7 +463,7 @@ code {
|
|||||||
place-items: center;
|
place-items: center;
|
||||||
background:
|
background:
|
||||||
linear-gradient(135deg, rgba(255, 255, 255, 0.42), transparent 48%),
|
linear-gradient(135deg, rgba(255, 255, 255, 0.42), transparent 48%),
|
||||||
var(--media-bg, #eaded2);
|
var(--media-bg, #dde4ec);
|
||||||
}
|
}
|
||||||
|
|
||||||
.product-card--compact .product-media {
|
.product-card--compact .product-media {
|
||||||
@ -475,7 +475,7 @@ code {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.product-media--amber {
|
.product-media--amber {
|
||||||
--media-bg: linear-gradient(140deg, #a8632a, #eaded2);
|
--media-bg: linear-gradient(140deg, #a8632a, #dde4ec);
|
||||||
}
|
}
|
||||||
|
|
||||||
.product-media--green {
|
.product-media--green {
|
||||||
@ -508,7 +508,7 @@ code {
|
|||||||
inset: 54px 8px auto;
|
inset: 54px 8px auto;
|
||||||
height: 42px;
|
height: 42px;
|
||||||
border-radius: 4px;
|
border-radius: 4px;
|
||||||
background: #f4eee8;
|
background: #eef2f6;
|
||||||
}
|
}
|
||||||
|
|
||||||
.product-meta {
|
.product-meta {
|
||||||
@ -671,7 +671,7 @@ td {
|
|||||||
}
|
}
|
||||||
|
|
||||||
th {
|
th {
|
||||||
background: #f0e8df;
|
background: #e8edf3;
|
||||||
color: var(--color-primary-wine-100);
|
color: var(--color-primary-wine-100);
|
||||||
font-size: 12px;
|
font-size: 12px;
|
||||||
text-transform: uppercase;
|
text-transform: uppercase;
|
||||||
@ -770,7 +770,7 @@ tbody tr:hover {
|
|||||||
.screen-preview__content span {
|
.screen-preview__content span {
|
||||||
min-height: 110px;
|
min-height: 110px;
|
||||||
border-radius: var(--radius-sm);
|
border-radius: var(--radius-sm);
|
||||||
background: #f0e8df;
|
background: #e8edf3;
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (max-width: 1100px) {
|
@media (max-width: 1100px) {
|
||||||
|
|||||||
150
index.html
150
index.html
@ -13,22 +13,40 @@
|
|||||||
<div class="site-shell">
|
<div class="site-shell">
|
||||||
<header class="site-header">
|
<header class="site-header">
|
||||||
<div class="container header-top">
|
<div class="container header-top">
|
||||||
<a class="brand-logo" href="index.html" aria-label="DP Trade"><span>DP</span> Trade<small>since 1991</small></a>
|
<a class="brand-logo" href="index.html" aria-label="DP Trade">
|
||||||
|
<img src="https://wine-dp-trade.ru/wp-content/uploads/2024/11/logo-500x107.png" alt="DP Trade" width="156" height="33" />
|
||||||
|
</a>
|
||||||
<form class="search-bar" action="#" role="search">
|
<form class="search-bar" action="#" role="search">
|
||||||
<button type="submit" aria-label="Поиск">⌕</button>
|
<button type="submit" aria-label="Поиск">⌕</button>
|
||||||
<input type="search" placeholder="Найти название, марку, бренд, производителя..." aria-label="Поиск" />
|
<input type="search" placeholder="Поиск по вину, региону, производителю" aria-label="Поиск" />
|
||||||
</form>
|
</form>
|
||||||
<a class="phone-link" href="tel:+74959379460">+7 (495) 937-94-60</a>
|
<div class="header-actions">
|
||||||
|
<a class="phone-link" href="tel:+74959379460">+7 (495) 937-94-60</a>
|
||||||
|
<a class="header-icon header-icon--air" href="#" aria-label="Аккаунт">
|
||||||
|
<svg viewBox="0 0 24 24" aria-hidden="true">
|
||||||
|
<path d="M12 12.2a4.1 4.1 0 1 0 0-8.2 4.1 4.1 0 0 0 0 8.2Z" />
|
||||||
|
<path d="M4.8 20.2c1.1-3.3 3.6-5 7.2-5s6.1 1.7 7.2 5" />
|
||||||
|
</svg>
|
||||||
|
</a>
|
||||||
|
<a class="header-icon header-icon--air" href="#" aria-label="Корзина">
|
||||||
|
<svg viewBox="0 0 24 24" aria-hidden="true">
|
||||||
|
<path d="M5 6h2l1.4 9.2h8.5L19 8H8" />
|
||||||
|
<path d="M9.4 19.2h.1M16.8 19.2h.1" />
|
||||||
|
</svg>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<nav class="container main-nav" aria-label="Основная навигация">
|
<nav class="container main-nav" aria-label="Основная навигация">
|
||||||
<a href="#">О нас</a>
|
<a href="catalog.html">Каталог</a>
|
||||||
<div class="nav-item">
|
<div class="nav-item">
|
||||||
<button class="nav-trigger" type="button" aria-expanded="false">Регион <span aria-hidden="true">⌄</span></button>
|
<button class="nav-trigger" type="button" aria-expanded="false">Регион <span class="nav-chevron" aria-hidden="true"><svg viewBox="0 0 10 6"><path d="M1 1l4 4 4-4" /></svg></span></button>
|
||||||
<section class="mega-menu" aria-label="Регион">
|
<section class="mega-menu" aria-label="Регион">
|
||||||
<div class="mega-intro">
|
<div class="mega-intro">
|
||||||
<p class="eyebrow">Регион</p>
|
<div>
|
||||||
<h2>Выбор вина по географии</h2>
|
<p class="eyebrow">Регион</p>
|
||||||
<p>Один экран для выбора страны, апелласьона или популярного региона без длинного дерева навигации.</p>
|
<h2>Вина по географии</h2>
|
||||||
|
</div>
|
||||||
|
<p>Быстрый вход в каталог через страну, апелласьон или популярный регион.</p>
|
||||||
</div>
|
</div>
|
||||||
<div class="menu-grid">
|
<div class="menu-grid">
|
||||||
<article class="menu-column visual-column">
|
<article class="menu-column visual-column">
|
||||||
@ -51,9 +69,99 @@
|
|||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
</div>
|
</div>
|
||||||
<a href="catalog.html">Вино</a>
|
<div class="nav-item">
|
||||||
<a href="#">Крепкий алкоголь</a>
|
<button class="nav-trigger" type="button" aria-expanded="false">Вино <span class="nav-chevron" aria-hidden="true"><svg viewBox="0 0 10 6"><path d="M1 1l4 4 4-4" /></svg></span></button>
|
||||||
<a href="#">Стиль и вкус</a>
|
<section class="mega-menu" aria-label="Вино">
|
||||||
|
<div class="mega-intro">
|
||||||
|
<div>
|
||||||
|
<p class="eyebrow">Вино</p>
|
||||||
|
<h2>Каталог по типу и стилю</h2>
|
||||||
|
</div>
|
||||||
|
<p>Быстрый выбор вина по цвету, категории и уровню сладости.</p>
|
||||||
|
</div>
|
||||||
|
<div class="menu-grid">
|
||||||
|
<article class="menu-column visual-column">
|
||||||
|
<img src="https://images.unsplash.com/photo-1510812431401-41d2bd2722f3?auto=format&fit=crop&w=900&q=80" alt="Бокалы вина" />
|
||||||
|
<p>Начните с типа вина или сразу переходите к стилю, если знаете нужный профиль.</p>
|
||||||
|
</article>
|
||||||
|
<article class="menu-column">
|
||||||
|
<p class="section-title">По типу</p>
|
||||||
|
<a href="#">Красное</a><a href="#">Белое</a><a href="#">Розовое</a><a href="#">Игристое</a><a href="#">Шампанское</a>
|
||||||
|
</article>
|
||||||
|
<article class="menu-column">
|
||||||
|
<p class="section-title">По стилю</p>
|
||||||
|
<a href="#">Сухие</a><a href="#">Полусухие</a><a href="#">Полусладкие</a><a href="#">Сладкие</a><a href="#">Брют</a><a href="#">Экстра брют</a>
|
||||||
|
</article>
|
||||||
|
<article class="menu-column">
|
||||||
|
<p class="section-title">Популярное</p>
|
||||||
|
<div class="popular-list"><a href="#">Новинки</a><a href="#">Хиты продаж</a><a href="#">Для ресторанов</a><a href="#">Премиум подборка</a></div>
|
||||||
|
</article>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="nav-item">
|
||||||
|
<button class="nav-trigger" type="button" aria-expanded="false">Крепкий алкоголь <span class="nav-chevron" aria-hidden="true"><svg viewBox="0 0 10 6"><path d="M1 1l4 4 4-4" /></svg></span></button>
|
||||||
|
<section class="mega-menu" aria-label="Крепкий алкоголь">
|
||||||
|
<div class="mega-intro">
|
||||||
|
<div>
|
||||||
|
<p class="eyebrow">Spirits</p>
|
||||||
|
<h2>Крепкий алкоголь</h2>
|
||||||
|
</div>
|
||||||
|
<p>Подборка крепких напитков для баров, ресторанов и специализированной розницы.</p>
|
||||||
|
</div>
|
||||||
|
<div class="menu-grid">
|
||||||
|
<article class="menu-column visual-column">
|
||||||
|
<img src="https://images.unsplash.com/photo-1527281400683-1aae777175f8?auto=format&fit=crop&w=900&q=80" alt="Крепкий алкоголь в бокале" />
|
||||||
|
<p>Категории, выдержка и происхождение для быстрой навигации по ассортименту.</p>
|
||||||
|
</article>
|
||||||
|
<article class="menu-column">
|
||||||
|
<p class="section-title">Категории</p>
|
||||||
|
<a href="#">Виски</a><a href="#">Коньяк</a><a href="#">Арманьяк</a><a href="#">Ром</a><a href="#">Джин</a><a href="#">Водка</a><a href="#">Текила</a><a href="#">Ликеры</a>
|
||||||
|
</article>
|
||||||
|
<article class="menu-column">
|
||||||
|
<p class="section-title">По стилю</p>
|
||||||
|
<a href="#">Односолодовый</a><a href="#">Купажированный</a><a href="#">Выдержанный</a><a href="#">Пряный</a><a href="#">Дижестив</a><a href="#">Для коктейлей</a>
|
||||||
|
</article>
|
||||||
|
<article class="menu-column">
|
||||||
|
<p class="section-title">Популярное</p>
|
||||||
|
<div class="popular-list"><a href="#">Single Malt</a><a href="#">Cognac VSOP</a><a href="#">Premium Gin</a><a href="#">Bar Selection</a></div>
|
||||||
|
</article>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="nav-item">
|
||||||
|
<button class="nav-trigger" type="button" aria-expanded="false">Производители <span class="nav-chevron" aria-hidden="true"><svg viewBox="0 0 10 6"><path d="M1 1l4 4 4-4" /></svg></span></button>
|
||||||
|
<section class="mega-menu" aria-label="Производители">
|
||||||
|
<div class="mega-intro">
|
||||||
|
<div>
|
||||||
|
<p class="eyebrow">Производители</p>
|
||||||
|
<h2>Дома, хозяйства и бренды</h2>
|
||||||
|
</div>
|
||||||
|
<p>Навигация по ключевым производителям, регионам и партнерским брендам DP Trade.</p>
|
||||||
|
</div>
|
||||||
|
<div class="menu-grid">
|
||||||
|
<article class="menu-column visual-column">
|
||||||
|
<img src="https://images.unsplash.com/photo-1568213816046-0ee1c42bd559?auto=format&fit=crop&w=900&q=80" alt="Винодельня и бочки" />
|
||||||
|
<p>Откройте ассортимент через знакомые хозяйства, винные дома и регионы производства.</p>
|
||||||
|
</article>
|
||||||
|
<article class="menu-column">
|
||||||
|
<p class="section-title">По странам</p>
|
||||||
|
<a href="#">Франция</a><a href="#">Италия</a><a href="#">Испания</a><a href="#">Германия</a><a href="#">Португалия</a><a href="#">Чили</a><a href="#">Аргентина</a>
|
||||||
|
</article>
|
||||||
|
<article class="menu-column">
|
||||||
|
<p class="section-title">Избранные</p>
|
||||||
|
<a href="#">Chateau Laroque</a><a href="#">Marchesi Antinori</a><a href="#">Torres</a><a href="#">Dr. Loosen</a><a href="#">Catena Zapata</a><a href="#">Penfolds</a>
|
||||||
|
</article>
|
||||||
|
<article class="menu-column">
|
||||||
|
<p class="section-title">Форматы</p>
|
||||||
|
<div class="popular-list"><a href="#">Семейные хозяйства</a><a href="#">Grand Cru</a><a href="#">Органика</a><a href="#">Эксклюзив DP Trade</a></div>
|
||||||
|
</article>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
</div>
|
||||||
|
<a href="#">Поставки</a>
|
||||||
<a href="#">Новости</a>
|
<a href="#">Новости</a>
|
||||||
<a href="ui-kit.html">UI-kit</a>
|
<a href="ui-kit.html">UI-kit</a>
|
||||||
</nav>
|
</nav>
|
||||||
@ -96,6 +204,10 @@
|
|||||||
Cormorant Garamond для крупных заголовков и Manrope для интерфейса. Больше премиальности,
|
Cormorant Garamond для крупных заголовков и Manrope для интерфейса. Больше премиальности,
|
||||||
культурного контекста и ощущения curated selection.
|
культурного контекста и ощущения curated selection.
|
||||||
</p>
|
</p>
|
||||||
|
<div class="type-usage">
|
||||||
|
<strong>Где использовать</strong>
|
||||||
|
<span>Имиджевые hero, истории производителей, региональные editorial-блоки.</span>
|
||||||
|
</div>
|
||||||
<div class="type-scale">
|
<div class="type-scale">
|
||||||
<span>H1 72/78</span>
|
<span>H1 72/78</span>
|
||||||
<span>Body 16/25</span>
|
<span>Body 16/25</span>
|
||||||
@ -113,6 +225,10 @@
|
|||||||
Manrope везде: современно, ровно, технологично. Хорошо подойдет, если сайт должен читаться
|
Manrope везде: современно, ровно, технологично. Хорошо подойдет, если сайт должен читаться
|
||||||
как быстрый B2B-продукт.
|
как быстрый B2B-продукт.
|
||||||
</p>
|
</p>
|
||||||
|
<div class="type-usage">
|
||||||
|
<strong>Где использовать</strong>
|
||||||
|
<span>Личный кабинет, таблицы, фильтры, B2B-операции и плотные интерфейсы.</span>
|
||||||
|
</div>
|
||||||
<div class="type-scale">
|
<div class="type-scale">
|
||||||
<span>H1 64/70</span>
|
<span>H1 64/70</span>
|
||||||
<span>Body 16/24</span>
|
<span>Body 16/24</span>
|
||||||
@ -130,6 +246,10 @@
|
|||||||
Playfair Display + Inter. Более классический premium retail, но с аккуратной цифровой
|
Playfair Display + Inter. Более классический premium retail, но с аккуратной цифровой
|
||||||
читаемостью в карточках, фильтрах и таблицах.
|
читаемостью в карточках, фильтрах и таблицах.
|
||||||
</p>
|
</p>
|
||||||
|
<div class="type-usage">
|
||||||
|
<strong>Где использовать</strong>
|
||||||
|
<span>Промо-разделы, подборки, страницы брендов и спокойные premium-лендинги.</span>
|
||||||
|
</div>
|
||||||
<div class="type-scale">
|
<div class="type-scale">
|
||||||
<span>H1 68/74</span>
|
<span>H1 68/74</span>
|
||||||
<span>Body 16/24</span>
|
<span>Body 16/24</span>
|
||||||
@ -147,6 +267,10 @@
|
|||||||
Montserrat для заголовков и Inter для текста. Более собранный, коммерческий, уверенный
|
Montserrat для заголовков и Inter для текста. Более собранный, коммерческий, уверенный
|
||||||
вариант для каталога с большим количеством позиций.
|
вариант для каталога с большим количеством позиций.
|
||||||
</p>
|
</p>
|
||||||
|
<div class="type-usage">
|
||||||
|
<strong>Где использовать</strong>
|
||||||
|
<span>Главная, навигация, карточки, шаблоны страниц и основные marketing-блоки.</span>
|
||||||
|
</div>
|
||||||
<div class="type-scale">
|
<div class="type-scale">
|
||||||
<span>H1 60/66</span>
|
<span>H1 60/66</span>
|
||||||
<span>Body 16/24</span>
|
<span>Body 16/24</span>
|
||||||
@ -164,6 +288,10 @@
|
|||||||
Montserrat + Inter, но с меньшим scale: заголовки спокойнее, карточки плотнее,
|
Montserrat + Inter, но с меньшим scale: заголовки спокойнее, карточки плотнее,
|
||||||
больше товаров помещается в первый экран.
|
больше товаров помещается в первый экран.
|
||||||
</p>
|
</p>
|
||||||
|
<div class="type-usage">
|
||||||
|
<strong>Где использовать</strong>
|
||||||
|
<span>Каталог, выдача поиска, фильтрованные списки и страницы с высокой плотностью товаров.</span>
|
||||||
|
</div>
|
||||||
<div class="type-scale">
|
<div class="type-scale">
|
||||||
<span>H1 48/54</span>
|
<span>H1 48/54</span>
|
||||||
<span>Body 15/22</span>
|
<span>Body 15/22</span>
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user