Consolidate DP Trade into one HTML/CSS project
This commit is contained in:
commit
7c6409974c
4
.gitignore
vendored
Normal file
4
.gitignore
vendored
Normal file
@ -0,0 +1,4 @@
|
||||
.DS_Store
|
||||
node_modules/
|
||||
dist/
|
||||
.env
|
||||
40
README.md
Normal file
40
README.md
Normal file
@ -0,0 +1,40 @@
|
||||
# DP Trade — Site UI Kit
|
||||
|
||||
Единый HTML/CSS проект для сайта и дизайн-системы DP Trade.
|
||||
|
||||
## Структура
|
||||
|
||||
- `index.html` — главная страница с меню, hero, карточками и футером.
|
||||
- `catalog.html` — пример страницы каталога.
|
||||
- `product.html` — пример страницы продукта.
|
||||
- `ui-kit.html` — живая витрина дизайн-системы.
|
||||
- `css/tokens.css` — дизайн-токены: цвета, шрифты, отступы, радиусы, тени.
|
||||
- `css/site.css` — общие стили сайта: header, menu, footer, cards, layouts.
|
||||
- `css/ui-kit.css` — стили страницы UI-kit.
|
||||
- `components/menu.html` — HTML-фрагмент меню.
|
||||
- `components/footer.html` — HTML-фрагмент футера.
|
||||
- `assets/images` и `assets/icons` — место для локальных изображений и иконок.
|
||||
|
||||
## Правило организации
|
||||
|
||||
В проекте должен быть один Git-репозиторий на уровне этой папки. Отдельные компоненты сайта живут внутри `components/`, а не как самостоятельные соседние проекты.
|
||||
|
||||
## Naming
|
||||
|
||||
Для дизайн-системы используется формат:
|
||||
|
||||
```txt
|
||||
[Category] / [Type] / [Variant] / [State]
|
||||
```
|
||||
|
||||
Примеры:
|
||||
|
||||
```txt
|
||||
Button / Primary / Default
|
||||
Card / Product / Hover
|
||||
Nav / Header / Desktop
|
||||
```
|
||||
|
||||
## Как смотреть
|
||||
|
||||
Открой `index.html` или `ui-kit.html` напрямую в браузере. Сервер для текущей версии не нужен.
|
||||
50
catalog.html
Normal file
50
catalog.html
Normal file
@ -0,0 +1,50 @@
|
||||
<!doctype html>
|
||||
<html lang="ru">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>DP Trade — Catalog</title>
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com" />
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
|
||||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Playfair+Display:wght@600;700&display=swap" rel="stylesheet" />
|
||||
<link rel="stylesheet" href="css/site.css" />
|
||||
</head>
|
||||
<body>
|
||||
<main class="section">
|
||||
<div class="container">
|
||||
<div class="section-heading">
|
||||
<p class="eyebrow">Catalog</p>
|
||||
<h2>Каталог вина</h2>
|
||||
</div>
|
||||
<div class="catalog-layout">
|
||||
<aside class="filters-panel">
|
||||
<h3>Фильтры</h3>
|
||||
<label class="checkbox"><input type="checkbox" checked /> Bordeaux</label>
|
||||
<label class="checkbox"><input type="checkbox" /> Tuscany</label>
|
||||
<label class="checkbox"><input type="checkbox" /> Rioja</label>
|
||||
<label class="checkbox"><input type="checkbox" /> Mosel</label>
|
||||
<a class="button button--primary" href="#">Применить</a>
|
||||
<a class="button button--secondary" href="index.html">На главную</a>
|
||||
</aside>
|
||||
<section class="product-grid">
|
||||
<article class="product-card">
|
||||
<div class="product-media"><span class="bottle"></span></div>
|
||||
<div><span class="muted-caps">Bordeaux</span><h3>Chateau Laroque Grand Cru</h3><p>France · Red dry · 2019</p></div>
|
||||
<div class="product-footer"><strong>3 890 ₽</strong><a class="button button--primary button--sm" href="product.html">Подробнее</a></div>
|
||||
</article>
|
||||
<article class="product-card">
|
||||
<div class="product-media product-media--amber"><span class="bottle"></span></div>
|
||||
<div><span class="muted-caps">Tuscany</span><h3>Brunello di Montalcino</h3><p>Italy · Red dry · 2018</p></div>
|
||||
<div class="product-footer"><strong>4 240 ₽</strong><a class="button button--primary button--sm" href="product.html">Подробнее</a></div>
|
||||
</article>
|
||||
<article class="product-card">
|
||||
<div class="product-media product-media--green"><span class="bottle"></span></div>
|
||||
<div><span class="muted-caps">Mosel</span><h3>Riesling Kabinett</h3><p>Germany · White · 2021</p></div>
|
||||
<div class="product-footer"><strong>2 150 ₽</strong><a class="button button--primary button--sm" href="product.html">Подробнее</a></div>
|
||||
</article>
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
69
components/footer.html
Normal file
69
components/footer.html
Normal file
@ -0,0 +1,69 @@
|
||||
<footer class="site-footer">
|
||||
<div class="container footer-container">
|
||||
<section class="footer-main">
|
||||
<div class="footer-left">
|
||||
<div>
|
||||
<a class="footer-brand" href="index.html" aria-label="DP Trade"><span>DP</span>.Trade</a>
|
||||
<p class="footer-brand-subtitle">Территория качественного вина</p>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<span class="section-title">Мы в соцсетях</span>
|
||||
<div class="social-links">
|
||||
<a href="#" aria-label="Telegram">TG</a>
|
||||
<a href="#" aria-label="VK">VK</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<article class="contacts-card">
|
||||
<h2>Контакты</h2>
|
||||
<a class="contact-link contact-phone" href="tel:+74959379460">+7 (495) 937-94-60</a>
|
||||
<a class="contact-link" href="mailto:dptr@dp-trade.ru">dptr@dp-trade.ru</a>
|
||||
<a class="button button--primary button--sm" href="#">Связаться с менеджером</a>
|
||||
</article>
|
||||
</div>
|
||||
|
||||
<section class="footer-nav" aria-label="Навигация по разделам">
|
||||
<article class="nav-group">
|
||||
<h2>Каталог</h2>
|
||||
<ul>
|
||||
<li><a href="catalog.html">Вина по регионам</a></li>
|
||||
<li><a href="#">Франция</a></li>
|
||||
<li><a href="#">Италия</a></li>
|
||||
<li><a href="#">Испания</a></li>
|
||||
<li><a href="#">Новинки</a></li>
|
||||
</ul>
|
||||
</article>
|
||||
|
||||
<article class="nav-group">
|
||||
<h2>Клиентам</h2>
|
||||
<ul>
|
||||
<li><a href="#">Доставка</a></li>
|
||||
<li><a href="#">Оплата</a></li>
|
||||
<li><a href="#">Как купить</a></li>
|
||||
<li><a href="#">Скачать каталог</a></li>
|
||||
</ul>
|
||||
</article>
|
||||
|
||||
<article class="nav-group">
|
||||
<h2>Компания</h2>
|
||||
<ul>
|
||||
<li><a href="#">О компании</a></li>
|
||||
<li><a href="#">Контакты</a></li>
|
||||
<li><a href="#">Склады</a></li>
|
||||
<li><a href="#">Реквизиты</a></li>
|
||||
</ul>
|
||||
</article>
|
||||
|
||||
<section class="footer-legal" aria-label="Правовая информация">
|
||||
<p>
|
||||
Интернет-витрина размещает информацию об алкогольной продукции исключительно в целях ознакомления.
|
||||
Дистанционная продажа алкогольной продукции не осуществляется.
|
||||
<a href="#">Подробнее о правовой информации</a>
|
||||
</p>
|
||||
<p>© 2026 DP-Trade</p>
|
||||
</section>
|
||||
</section>
|
||||
</section>
|
||||
</div>
|
||||
</footer>
|
||||
86
components/menu.html
Normal file
86
components/menu.html
Normal file
@ -0,0 +1,86 @@
|
||||
<header class="site-header">
|
||||
<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>
|
||||
|
||||
<form class="search-bar" action="#" role="search">
|
||||
<button type="submit" aria-label="Поиск">⌕</button>
|
||||
<input type="search" placeholder="Найти название, марку, бренд, производителя..." aria-label="Поиск">
|
||||
</form>
|
||||
|
||||
<a class="phone-link" href="tel:+74959379460">+7 (495) 937-94-60</a>
|
||||
</div>
|
||||
|
||||
<nav class="container main-nav" aria-label="Основная навигация">
|
||||
<a href="#">О нас</a>
|
||||
|
||||
<div class="nav-item">
|
||||
<button class="nav-trigger" type="button" aria-expanded="false">Регион <span aria-hidden="true">⌄</span></button>
|
||||
|
||||
<section class="mega-menu" aria-label="Регион">
|
||||
<div class="mega-intro">
|
||||
<p class="eyebrow">Регион</p>
|
||||
<h2>Выбор вина по географии</h2>
|
||||
<p>Один экран для выбора страны, апелласьона или популярного региона без длинного дерева навигации.</p>
|
||||
</div>
|
||||
|
||||
<div class="menu-grid">
|
||||
<article class="menu-column visual-column">
|
||||
<img src="https://images.unsplash.com/photo-1506377247377-2a5b3b417ebb?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 appellations">
|
||||
<p class="section-title">Апелласьоны</p>
|
||||
<div class="appellation-group">
|
||||
<a class="country-link" href="#">Франция</a>
|
||||
<a href="#">Bordeaux</a>
|
||||
<a href="#">Medoc</a>
|
||||
<a href="#">Margaux</a>
|
||||
<a href="#">Pauillac</a>
|
||||
<a href="#">Saint-Emilion</a>
|
||||
</div>
|
||||
<div class="appellation-group">
|
||||
<a class="country-link" href="#">Италия</a>
|
||||
<a href="#">Toscana</a>
|
||||
<a href="#">Chianti</a>
|
||||
<a href="#">Brunello di Montalcino</a>
|
||||
<a href="#">Piemonte</a>
|
||||
</div>
|
||||
</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>
|
||||
<a href="#">Напа Вэлли</a>
|
||||
</div>
|
||||
</article>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<a href="catalog.html">Вино</a>
|
||||
<a href="#">Крепкий алкоголь</a>
|
||||
<a href="#">Стиль и вкус</a>
|
||||
<a href="#">Новости</a>
|
||||
<a href="ui-kit.html">UI-kit</a>
|
||||
</nav>
|
||||
</header>
|
||||
719
css/site.css
Normal file
719
css/site.css
Normal file
@ -0,0 +1,719 @@
|
||||
@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(255, 253, 249, 0.94);
|
||||
border-bottom: 1px solid rgba(102, 96, 95, 0.18);
|
||||
backdrop-filter: blur(16px);
|
||||
}
|
||||
|
||||
.header-top {
|
||||
display: grid;
|
||||
grid-template-columns: 210px minmax(260px, 1fr) auto;
|
||||
align-items: center;
|
||||
gap: 28px;
|
||||
min-height: 86px;
|
||||
}
|
||||
|
||||
.brand-logo {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
width: fit-content;
|
||||
color: var(--color-accent-blue);
|
||||
font-size: 30px;
|
||||
font-style: italic;
|
||||
font-weight: 900;
|
||||
letter-spacing: 0;
|
||||
line-height: 0.8;
|
||||
}
|
||||
|
||||
.brand-logo span:first-child {
|
||||
color: var(--color-primary-wine-80);
|
||||
}
|
||||
|
||||
.brand-logo small {
|
||||
position: absolute;
|
||||
left: 70px;
|
||||
top: 27px;
|
||||
color: var(--color-primary-wine-80);
|
||||
font-size: 8px;
|
||||
font-style: italic;
|
||||
font-weight: 700;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.search-bar {
|
||||
display: grid;
|
||||
grid-template-columns: 50px minmax(0, 1fr);
|
||||
align-items: center;
|
||||
min-height: 52px;
|
||||
border: 1px solid rgba(102, 96, 95, 0.24);
|
||||
border-radius: 999px;
|
||||
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: 50px;
|
||||
height: 50px;
|
||||
border: 0;
|
||||
background: transparent;
|
||||
color: var(--color-primary-wine-100);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.search-bar input {
|
||||
min-width: 0;
|
||||
border: 0;
|
||||
outline: 0;
|
||||
color: var(--color-neutral-black);
|
||||
}
|
||||
|
||||
.phone-link {
|
||||
color: var(--color-accent-blue);
|
||||
font-size: 18px;
|
||||
font-weight: 700;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.main-nav {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 42px;
|
||||
min-height: 68px;
|
||||
overflow-x: auto;
|
||||
}
|
||||
|
||||
.main-nav > a,
|
||||
.nav-trigger {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 7px;
|
||||
min-height: 40px;
|
||||
border: 0;
|
||||
border-bottom: 2px solid transparent;
|
||||
background: transparent;
|
||||
color: var(--color-neutral-gray-700);
|
||||
font-size: 14px;
|
||||
font-weight: 700;
|
||||
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);
|
||||
color: var(--color-primary-wine-100);
|
||||
}
|
||||
|
||||
.nav-item {
|
||||
position: static;
|
||||
}
|
||||
|
||||
.mega-menu {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 154px;
|
||||
width: min(1180px, calc(100vw - 40px));
|
||||
max-height: calc(100vh - 172px);
|
||||
overflow: auto;
|
||||
padding: 28px;
|
||||
border: 1px solid rgba(102, 96, 95, 0.18);
|
||||
background: #fffdfa;
|
||||
box-shadow: var(--shadow-lift);
|
||||
transform: translateX(-50%);
|
||||
display: none;
|
||||
}
|
||||
|
||||
.nav-item:hover .mega-menu,
|
||||
.nav-item:focus-within .mega-menu {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.mega-intro {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(220px, 0.55fr) minmax(320px, 1fr);
|
||||
gap: 18px 34px;
|
||||
align-items: end;
|
||||
padding-bottom: 22px;
|
||||
border-bottom: 1px solid rgba(102, 96, 95, 0.18);
|
||||
}
|
||||
|
||||
.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.12;
|
||||
}
|
||||
|
||||
.mega-intro p:last-child {
|
||||
margin: 0;
|
||||
color: var(--color-neutral-gray-600);
|
||||
}
|
||||
|
||||
.menu-grid {
|
||||
display: grid;
|
||||
grid-template-columns: 1.4fr 0.9fr 1.1fr 1fr;
|
||||
gap: 28px;
|
||||
padding-top: 28px;
|
||||
}
|
||||
|
||||
.menu-column {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.menu-column a {
|
||||
width: fit-content;
|
||||
max-width: 100%;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.menu-column a:hover {
|
||||
color: var(--color-primary-wine-80);
|
||||
}
|
||||
|
||||
.visual-column img {
|
||||
width: 100%;
|
||||
aspect-ratio: 16 / 9;
|
||||
object-fit: cover;
|
||||
border-radius: var(--radius-sm);
|
||||
}
|
||||
|
||||
.visual-column p {
|
||||
margin: 0;
|
||||
color: var(--color-neutral-gray-600);
|
||||
}
|
||||
|
||||
.appellations {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
.appellations .section-title {
|
||||
grid-column: 1 / -1;
|
||||
}
|
||||
|
||||
.appellation-group {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.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(255, 255, 255, 0.72);
|
||||
}
|
||||
|
||||
.button--sm {
|
||||
min-height: 38px;
|
||||
padding: 8px 14px;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.hero {
|
||||
min-height: calc(100vh - 154px);
|
||||
display: grid;
|
||||
align-items: end;
|
||||
padding: 88px 0;
|
||||
background:
|
||||
linear-gradient(90deg, rgba(22, 20, 17, 0.78), rgba(22, 20, 17, 0.18)),
|
||||
url("https://images.unsplash.com/photo-1560493676-04071c5f467b?auto=format&fit=crop&w=1800&q=80");
|
||||
background-position: center;
|
||||
background-size: cover;
|
||||
color: #fffdfa;
|
||||
}
|
||||
|
||||
.hero-copy {
|
||||
max-width: 760px;
|
||||
}
|
||||
|
||||
.hero h1 {
|
||||
margin: 12px 0 20px;
|
||||
font-size: clamp(44px, 7vw, 88px);
|
||||
}
|
||||
|
||||
.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 h2 {
|
||||
font-size: clamp(34px, 4vw, 52px);
|
||||
}
|
||||
|
||||
.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);
|
||||
display: grid;
|
||||
place-items: center;
|
||||
background: linear-gradient(140deg, #5d1027, #c8a45d);
|
||||
}
|
||||
|
||||
.product-media--amber {
|
||||
background: linear-gradient(140deg, #a8632a, #eaded2);
|
||||
}
|
||||
|
||||
.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: #f4eee8;
|
||||
}
|
||||
|
||||
.product-card h3 {
|
||||
margin-top: 8px;
|
||||
font-size: 24px;
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
|
||||
.detail-copy h1 {
|
||||
margin: 10px 0 18px;
|
||||
font-family: var(--font-heading);
|
||||
font-size: clamp(40px, 5vw, 64px);
|
||||
line-height: 1.08;
|
||||
}
|
||||
|
||||
.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: 40px 0 56px;
|
||||
background: #f1f4f8;
|
||||
}
|
||||
|
||||
.footer-container {
|
||||
padding: 32px;
|
||||
border: 1px solid rgba(217, 222, 229, 0.9);
|
||||
border-radius: var(--radius-lg);
|
||||
background: #f3f5f7;
|
||||
box-shadow: 0 18px 40px rgba(25, 37, 62, 0.08);
|
||||
}
|
||||
|
||||
.footer-main {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(280px, 360px) minmax(0, 1fr);
|
||||
gap: 40px;
|
||||
}
|
||||
|
||||
.footer-left {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 28px;
|
||||
}
|
||||
|
||||
.footer-brand {
|
||||
display: inline-flex;
|
||||
align-items: baseline;
|
||||
color: var(--color-accent-blue);
|
||||
font-size: clamp(40px, 5vw, 68px);
|
||||
font-style: italic;
|
||||
font-weight: 900;
|
||||
letter-spacing: 0;
|
||||
line-height: 0.95;
|
||||
}
|
||||
|
||||
.footer-brand span:first-child {
|
||||
color: var(--color-primary-wine-80);
|
||||
}
|
||||
|
||||
.footer-brand-subtitle {
|
||||
margin: 10px 0 0;
|
||||
color: var(--color-primary-wine-80);
|
||||
}
|
||||
|
||||
.social-links {
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.social-links a {
|
||||
min-width: 58px;
|
||||
padding: 10px 16px;
|
||||
border: 1px solid rgba(143, 23, 54, 0.22);
|
||||
border-radius: var(--radius-sm);
|
||||
background: rgba(255, 255, 255, 0.72);
|
||||
color: var(--color-primary-wine-80);
|
||||
font-weight: 800;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.contacts-card {
|
||||
padding: 24px;
|
||||
border: 1px solid rgba(217, 222, 229, 0.9);
|
||||
border-radius: var(--radius-sm);
|
||||
background: var(--color-surface);
|
||||
}
|
||||
|
||||
.contacts-card h2,
|
||||
.nav-group h2 {
|
||||
margin: 0 0 16px;
|
||||
font-size: 13px;
|
||||
font-weight: 800;
|
||||
letter-spacing: 0;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.contact-link {
|
||||
display: block;
|
||||
width: fit-content;
|
||||
}
|
||||
|
||||
.contact-phone {
|
||||
margin-bottom: 10px;
|
||||
color: var(--color-neutral-gray-700);
|
||||
font-size: 22px;
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
.footer-nav {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, minmax(140px, 1fr));
|
||||
gap: 32px;
|
||||
align-items: start;
|
||||
}
|
||||
|
||||
.nav-group ul {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
.nav-group li + li {
|
||||
margin-top: 12px;
|
||||
}
|
||||
|
||||
.nav-group a,
|
||||
.footer-legal {
|
||||
color: #6b7280;
|
||||
}
|
||||
|
||||
.footer-legal {
|
||||
grid-column: 1 / -1;
|
||||
margin-top: 8px;
|
||||
padding-top: 24px;
|
||||
border-top: 1px solid #d9dee5;
|
||||
font-size: 14px;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.footer-legal a {
|
||||
color: var(--color-primary-wine-80);
|
||||
}
|
||||
|
||||
@media (max-width: 1080px) {
|
||||
.header-top,
|
||||
.footer-main,
|
||||
.catalog-layout,
|
||||
.product-detail {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.phone-link {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.main-nav {
|
||||
justify-content: flex-start;
|
||||
}
|
||||
|
||||
.menu-grid,
|
||||
.product-grid {
|
||||
grid-template-columns: 1fr 1fr;
|
||||
}
|
||||
|
||||
.mega-menu {
|
||||
top: 206px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 720px) {
|
||||
.container {
|
||||
width: min(100% - 28px, var(--container));
|
||||
}
|
||||
|
||||
.header-top {
|
||||
gap: 14px;
|
||||
padding: 18px 0;
|
||||
}
|
||||
|
||||
.main-nav {
|
||||
min-height: 58px;
|
||||
}
|
||||
|
||||
.mega-menu {
|
||||
top: 204px;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.mega-intro,
|
||||
.menu-grid,
|
||||
.appellations,
|
||||
.product-grid,
|
||||
.footer-nav {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.hero {
|
||||
min-height: 620px;
|
||||
padding: 56px 0;
|
||||
}
|
||||
|
||||
.section {
|
||||
padding: 56px 0;
|
||||
}
|
||||
|
||||
.footer-container {
|
||||
padding: 22px 18px;
|
||||
}
|
||||
}
|
||||
31
css/tokens.css
Normal file
31
css/tokens.css
Normal file
@ -0,0 +1,31 @@
|
||||
: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: #d8d3cf;
|
||||
--color-background-base: #faf8f5;
|
||||
--color-surface: #ffffff;
|
||||
--color-accent-gold: #b9965b;
|
||||
--color-accent-blue: #1f3476;
|
||||
|
||||
--font-heading: "Playfair Display", Georgia, serif;
|
||||
--font-body: "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;
|
||||
}
|
||||
850
css/ui-kit.css
Normal file
850
css/ui-kit.css
Normal file
@ -0,0 +1,850 @@
|
||||
:root {
|
||||
--color-primary-wine-100: #4b0f24;
|
||||
--color-primary-wine-80: #6d1c36;
|
||||
--color-neutral-black: #161616;
|
||||
--color-gray-600: #66605f;
|
||||
--color-gray-300: #d8d3cf;
|
||||
--color-background-base: #faf8f5;
|
||||
--color-accent-gold: #b9965b;
|
||||
--color-white: #ffffff;
|
||||
--color-error: #a33a2f;
|
||||
|
||||
--font-heading: "Playfair Display", Georgia, 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;
|
||||
padding: 24px;
|
||||
background: #fffdf9;
|
||||
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 {
|
||||
display: grid;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.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, #fffdfa 0%, #f4eee8 58%, #eaded2 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.16;
|
||||
}
|
||||
|
||||
h1 {
|
||||
max-width: 780px;
|
||||
margin-bottom: 20px;
|
||||
font-size: clamp(42px, 6vw, 76px);
|
||||
}
|
||||
|
||||
h2 {
|
||||
margin-bottom: 0;
|
||||
font-size: 42px;
|
||||
}
|
||||
|
||||
h3 {
|
||||
margin-bottom: 16px;
|
||||
font-size: 25px;
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
|
||||
.subsection {
|
||||
margin-top: 40px;
|
||||
}
|
||||
|
||||
.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);
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
|
||||
.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, #eaded2);
|
||||
}
|
||||
|
||||
.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, #eaded2);
|
||||
}
|
||||
|
||||
.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: #f4eee8;
|
||||
}
|
||||
|
||||
.product-meta {
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.product-meta h3 {
|
||||
margin: 8px 0 6px;
|
||||
font-size: 24px;
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
|
||||
.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: #f0e8df;
|
||||
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: 22px;
|
||||
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: 22px;
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
.screen-preview {
|
||||
overflow: hidden;
|
||||
border: 1px solid rgba(102, 96, 95, 0.18);
|
||||
border-radius: var(--radius-sm);
|
||||
background: var(--color-white);
|
||||
box-shadow: var(--shadow-soft);
|
||||
}
|
||||
|
||||
.screen-preview__bar {
|
||||
height: 48px;
|
||||
background: var(--color-primary-wine-100);
|
||||
}
|
||||
|
||||
.screen-preview__hero {
|
||||
min-height: 300px;
|
||||
padding: 48px;
|
||||
background:
|
||||
linear-gradient(90deg, rgba(75, 15, 36, 0.84), rgba(75, 15, 36, 0.24)),
|
||||
linear-gradient(135deg, #4b0f24, #b9965b);
|
||||
color: var(--color-white);
|
||||
display: grid;
|
||||
align-content: center;
|
||||
justify-items: start;
|
||||
}
|
||||
|
||||
.screen-preview__hero h3 {
|
||||
max-width: 520px;
|
||||
margin: 8px 0 20px;
|
||||
font-size: 52px;
|
||||
}
|
||||
|
||||
.screen-preview__content {
|
||||
padding: 24px;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.screen-preview__content span {
|
||||
min-height: 110px;
|
||||
border-radius: var(--radius-sm);
|
||||
background: #f0e8df;
|
||||
}
|
||||
|
||||
@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,
|
||||
.template-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,
|
||||
.product-grid--3,
|
||||
.template-grid,
|
||||
.screen-preview__content,
|
||||
.token-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-preview__hero {
|
||||
padding: 28px;
|
||||
}
|
||||
|
||||
.screen-preview__hero h3 {
|
||||
font-size: 36px;
|
||||
}
|
||||
}
|
||||
121
index.html
Normal file
121
index.html
Normal file
@ -0,0 +1,121 @@
|
||||
<!doctype html>
|
||||
<html lang="ru">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>DP Trade — Home</title>
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com" />
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
|
||||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Playfair+Display:wght@600;700&display=swap" rel="stylesheet" />
|
||||
<link rel="stylesheet" href="css/site.css" />
|
||||
</head>
|
||||
<body>
|
||||
<div class="site-shell">
|
||||
<header class="site-header">
|
||||
<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>
|
||||
<form class="search-bar" action="#" role="search">
|
||||
<button type="submit" aria-label="Поиск">⌕</button>
|
||||
<input type="search" placeholder="Найти название, марку, бренд, производителя..." aria-label="Поиск" />
|
||||
</form>
|
||||
<a class="phone-link" href="tel:+74959379460">+7 (495) 937-94-60</a>
|
||||
</div>
|
||||
<nav class="container main-nav" aria-label="Основная навигация">
|
||||
<a href="#">О нас</a>
|
||||
<div class="nav-item">
|
||||
<button class="nav-trigger" type="button" aria-expanded="false">Регион <span aria-hidden="true">⌄</span></button>
|
||||
<section class="mega-menu" aria-label="Регион">
|
||||
<div class="mega-intro">
|
||||
<p class="eyebrow">Регион</p>
|
||||
<h2>Выбор вина по географии</h2>
|
||||
<p>Один экран для выбора страны, апелласьона или популярного региона без длинного дерева навигации.</p>
|
||||
</div>
|
||||
<div class="menu-grid">
|
||||
<article class="menu-column visual-column">
|
||||
<img src="https://images.unsplash.com/photo-1506377247377-2a5b3b417ebb?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 appellations">
|
||||
<p class="section-title">Апелласьоны</p>
|
||||
<div class="appellation-group"><a class="country-link" href="#">Франция</a><a href="#">Bordeaux</a><a href="#">Medoc</a><a href="#">Margaux</a><a href="#">Pauillac</a><a href="#">Saint-Emilion</a></div>
|
||||
<div class="appellation-group"><a class="country-link" href="#">Италия</a><a href="#">Toscana</a><a href="#">Chianti</a><a href="#">Brunello di Montalcino</a><a href="#">Piemonte</a></div>
|
||||
</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><a href="#">Напа Вэлли</a></div>
|
||||
</article>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
<a href="catalog.html">Вино</a>
|
||||
<a href="#">Крепкий алкоголь</a>
|
||||
<a href="#">Стиль и вкус</a>
|
||||
<a href="#">Новости</a>
|
||||
<a href="ui-kit.html">UI-kit</a>
|
||||
</nav>
|
||||
</header>
|
||||
|
||||
<main>
|
||||
<section class="hero">
|
||||
<div class="container hero-copy">
|
||||
<p class="eyebrow">DP Trade</p>
|
||||
<h1>Премиальный каталог вина для торговли</h1>
|
||||
<p>Регионы, производители, партии и коммерческие условия собраны в одном интерфейсе для быстрых закупочных решений.</p>
|
||||
<div class="hero-actions">
|
||||
<a class="button button--primary" href="catalog.html">Смотреть каталог</a>
|
||||
<a class="button button--secondary" href="ui-kit.html">Открыть UI-kit</a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="section">
|
||||
<div class="container">
|
||||
<div class="section-heading">
|
||||
<p class="eyebrow">Recommendations</p>
|
||||
<h2>Рекомендации недели</h2>
|
||||
</div>
|
||||
<div class="product-grid">
|
||||
<article class="product-card">
|
||||
<div class="product-media"><span class="bottle"></span></div>
|
||||
<div><span class="muted-caps">Bordeaux</span><h3>Chateau Laroque Grand Cru</h3><p>France · Red dry · 2019 · 0.75 L</p></div>
|
||||
<div class="product-footer"><strong>3 890 ₽</strong><a class="button button--primary button--sm" href="product.html">Подробнее</a></div>
|
||||
</article>
|
||||
<article class="product-card">
|
||||
<div class="product-media product-media--amber"><span class="bottle"></span></div>
|
||||
<div><span class="muted-caps">Tuscany</span><h3>Brunello di Montalcino</h3><p>Italy · Red dry · 2018 · 0.75 L</p></div>
|
||||
<div class="product-footer"><strong>4 240 ₽</strong><a class="button button--primary button--sm" href="product.html">Подробнее</a></div>
|
||||
</article>
|
||||
<article class="product-card">
|
||||
<div class="product-media product-media--green"><span class="bottle"></span></div>
|
||||
<div><span class="muted-caps">Mosel</span><h3>Riesling Kabinett</h3><p>Germany · White · 2021 · 0.75 L</p></div>
|
||||
<div class="product-footer"><strong>2 150 ₽</strong><a class="button button--primary button--sm" href="product.html">Подробнее</a></div>
|
||||
</article>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
|
||||
<footer class="site-footer">
|
||||
<div class="container footer-container">
|
||||
<section class="footer-main">
|
||||
<div class="footer-left">
|
||||
<div><a class="footer-brand" href="index.html" aria-label="DP Trade"><span>DP</span>.Trade</a><p class="footer-brand-subtitle">Территория качественного вина</p></div>
|
||||
<div><span class="section-title">Мы в соцсетях</span><div class="social-links"><a href="#" aria-label="Telegram">TG</a><a href="#" aria-label="VK">VK</a></div></div>
|
||||
<article class="contacts-card"><h2>Контакты</h2><a class="contact-link contact-phone" href="tel:+74959379460">+7 (495) 937-94-60</a><a class="contact-link" href="mailto:dptr@dp-trade.ru">dptr@dp-trade.ru</a><a class="button button--primary button--sm" href="#">Связаться с менеджером</a></article>
|
||||
</div>
|
||||
<section class="footer-nav" aria-label="Навигация по разделам">
|
||||
<article class="nav-group"><h2>Каталог</h2><ul><li><a href="catalog.html">Вина по регионам</a></li><li><a href="#">Франция</a></li><li><a href="#">Италия</a></li><li><a href="#">Испания</a></li><li><a href="#">Новинки</a></li></ul></article>
|
||||
<article class="nav-group"><h2>Клиентам</h2><ul><li><a href="#">Доставка</a></li><li><a href="#">Оплата</a></li><li><a href="#">Как купить</a></li><li><a href="#">Скачать каталог</a></li></ul></article>
|
||||
<article class="nav-group"><h2>Компания</h2><ul><li><a href="#">О компании</a></li><li><a href="#">Контакты</a></li><li><a href="#">Склады</a></li><li><a href="#">Реквизиты</a></li></ul></article>
|
||||
<section class="footer-legal" aria-label="Правовая информация"><p>Интернет-витрина размещает информацию об алкогольной продукции исключительно в целях ознакомления. Дистанционная продажа алкогольной продукции не осуществляется. <a href="#">Подробнее о правовой информации</a></p><p>© 2026 DP-Trade</p></section>
|
||||
</section>
|
||||
</section>
|
||||
</div>
|
||||
</footer>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
35
product.html
Normal file
35
product.html
Normal file
@ -0,0 +1,35 @@
|
||||
<!doctype html>
|
||||
<html lang="ru">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>DP Trade — Product</title>
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com" />
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
|
||||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Playfair+Display:wght@600;700&display=swap" rel="stylesheet" />
|
||||
<link rel="stylesheet" href="css/site.css" />
|
||||
</head>
|
||||
<body>
|
||||
<main class="section">
|
||||
<div class="container product-detail">
|
||||
<div class="product-media"><span class="bottle"></span></div>
|
||||
<section class="detail-copy">
|
||||
<p class="eyebrow">Product / Default</p>
|
||||
<h1>Chateau Laroque Grand Cru</h1>
|
||||
<p>Премиальная позиция из Bordeaux для ресторанных карт и специализированной розницы.</p>
|
||||
<div class="meta-list">
|
||||
<div><span>Регион</span><strong>Bordeaux</strong></div>
|
||||
<div><span>Тип</span><strong>Red dry</strong></div>
|
||||
<div><span>Год</span><strong>2019</strong></div>
|
||||
<div><span>Объем</span><strong>0.75 L</strong></div>
|
||||
<div><span>Цена</span><strong>3 890 ₽</strong></div>
|
||||
</div>
|
||||
<div class="hero-actions">
|
||||
<a class="button button--primary" href="#">Запросить прайс</a>
|
||||
<a class="button button--secondary" href="catalog.html">Вернуться в каталог</a>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
374
ui-kit.html
Normal file
374
ui-kit.html
Normal file
@ -0,0 +1,374 @@
|
||||
<!doctype html>
|
||||
<html lang="ru">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>DP Trade — Design System</title>
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com" />
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
|
||||
<link
|
||||
href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Playfair+Display:wght@600;700&display=swap"
|
||||
rel="stylesheet"
|
||||
/>
|
||||
<link rel="stylesheet" href="css/ui-kit.css" />
|
||||
</head>
|
||||
<body>
|
||||
<aside class="sidebar">
|
||||
<a class="brand" href="#top" aria-label="DP Trade Design System">
|
||||
<span class="brand__mark">DP</span>
|
||||
<span>
|
||||
<strong>DP Trade</strong>
|
||||
<small>Design System</small>
|
||||
</span>
|
||||
</a>
|
||||
<nav class="side-nav" aria-label="Разделы UI-kit">
|
||||
<a href="index.html">Site Preview</a>
|
||||
<a href="#foundations">01 Foundations</a>
|
||||
<a href="#components">02 Components</a>
|
||||
<a href="#patterns">03 Patterns</a>
|
||||
<a href="#templates">04 Templates</a>
|
||||
<a href="#screens">05 Screens</a>
|
||||
</nav>
|
||||
</aside>
|
||||
|
||||
<main id="top" class="page-shell">
|
||||
<header class="kit-hero">
|
||||
<div class="kit-hero__content">
|
||||
<p class="eyebrow">DP Trade — Design System</p>
|
||||
<h1>UI-kit для премиального торгового каталога</h1>
|
||||
<p>
|
||||
Живая HTML/CSS витрина компонентов, токенов, паттернов и экранов для сайта DP Trade.
|
||||
Структура повторяет Figma-файл и использует критичный naming format.
|
||||
</p>
|
||||
<div class="hero-actions">
|
||||
<a class="button button--primary" href="#components">Компоненты</a>
|
||||
<a class="button button--secondary" href="#tokens">Dev tokens</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="kit-hero__visual" aria-label="Пример карточки продукта">
|
||||
<article class="product-card product-card--featured">
|
||||
<div class="product-media product-media--wine">
|
||||
<span class="bottle"></span>
|
||||
</div>
|
||||
<div class="product-meta">
|
||||
<span class="tag tag--filled">Bordeaux</span>
|
||||
<h3>Chateau Laroque Grand Cru</h3>
|
||||
<p>France · Red dry · 2019 · 0.75 L</p>
|
||||
</div>
|
||||
<div class="product-footer">
|
||||
<strong>от 3 890 ₽</strong>
|
||||
<button class="button button--primary button--sm">В каталог</button>
|
||||
</div>
|
||||
</article>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<section id="foundations" class="section">
|
||||
<div class="section-heading">
|
||||
<p class="eyebrow">01 Foundations</p>
|
||||
<h2>База системы</h2>
|
||||
</div>
|
||||
|
||||
<div class="subsection">
|
||||
<h3>Colors</h3>
|
||||
<div class="swatch-grid">
|
||||
<article class="swatch">
|
||||
<span style="--swatch: var(--color-primary-wine-100)"></span>
|
||||
<strong>Color / Primary / Wine / 100</strong>
|
||||
<code>#4B0F24</code>
|
||||
</article>
|
||||
<article class="swatch">
|
||||
<span style="--swatch: var(--color-primary-wine-80)"></span>
|
||||
<strong>Color / Primary / Wine / 80</strong>
|
||||
<code>#6D1C36</code>
|
||||
</article>
|
||||
<article class="swatch">
|
||||
<span style="--swatch: var(--color-neutral-black)"></span>
|
||||
<strong>Color / Neutral / Black</strong>
|
||||
<code>#161616</code>
|
||||
</article>
|
||||
<article class="swatch">
|
||||
<span style="--swatch: var(--color-gray-600)"></span>
|
||||
<strong>Color / Neutral / Gray / 600</strong>
|
||||
<code>#66605F</code>
|
||||
</article>
|
||||
<article class="swatch">
|
||||
<span style="--swatch: var(--color-gray-300)"></span>
|
||||
<strong>Color / Neutral / Gray / 300</strong>
|
||||
<code>#D8D3CF</code>
|
||||
</article>
|
||||
<article class="swatch">
|
||||
<span style="--swatch: var(--color-background-base)"></span>
|
||||
<strong>Color / Background / Base</strong>
|
||||
<code>#FAF8F5</code>
|
||||
</article>
|
||||
<article class="swatch">
|
||||
<span style="--swatch: var(--color-accent-gold)"></span>
|
||||
<strong>Color / Accent / Gold</strong>
|
||||
<code>#B9965B</code>
|
||||
</article>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="subsection typography-specimen">
|
||||
<h3>Typography</h3>
|
||||
<div class="type-row">
|
||||
<span>Text / Heading / H1 / Playfair / 48 / 56</span>
|
||||
<p class="text-h1">Rare wines for trade</p>
|
||||
</div>
|
||||
<div class="type-row">
|
||||
<span>Text / Heading / H2 / Playfair / 36 / 44</span>
|
||||
<p class="text-h2">Catalog collections</p>
|
||||
</div>
|
||||
<div class="type-row">
|
||||
<span>Text / Heading / H3 / Playfair / 28 / 36</span>
|
||||
<p class="text-h3">Producer selection</p>
|
||||
</div>
|
||||
<div class="type-row">
|
||||
<span>Text / Body / Regular / Inter / 16 / 24</span>
|
||||
<p class="text-body">Вина, регионы, партии и коммерческие условия в единой системе.</p>
|
||||
</div>
|
||||
<div class="type-row">
|
||||
<span>Text / Label / Caps / Inter / 12 / 16</span>
|
||||
<p class="text-label">FEATURED REGION</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="subsection">
|
||||
<h3>Grid & Spacing</h3>
|
||||
<div class="grid-demo" aria-label="Desktop grid 12 columns">
|
||||
<span></span><span></span><span></span><span></span><span></span><span></span>
|
||||
<span></span><span></span><span></span><span></span><span></span><span></span>
|
||||
</div>
|
||||
<div class="spacing-scale">
|
||||
<span style="--space: 4px">4</span>
|
||||
<span style="--space: 8px">8</span>
|
||||
<span style="--space: 16px">16</span>
|
||||
<span style="--space: 24px">24</span>
|
||||
<span style="--space: 32px">32</span>
|
||||
<span style="--space: 48px">48</span>
|
||||
<span style="--space: 64px">64</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="tokens" class="subsection">
|
||||
<h3>Tokens</h3>
|
||||
<div class="token-grid">
|
||||
<code>color.primary = #4B0F24</code>
|
||||
<code>color.text = #161616</code>
|
||||
<code>spacing.md = 16px</code>
|
||||
<code>radius.sm = 8px</code>
|
||||
<code>shadow.soft = 0 12px 32px rgba(22,22,22,.08)</code>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="components" class="section">
|
||||
<div class="section-heading">
|
||||
<p class="eyebrow">02 Components</p>
|
||||
<h2>Компоненты</h2>
|
||||
</div>
|
||||
|
||||
<div class="subsection">
|
||||
<h3>Buttons</h3>
|
||||
<div class="component-row">
|
||||
<button class="button button--primary">Button / Primary / Default</button>
|
||||
<button class="button button--primary is-hover">Button / Primary / Hover</button>
|
||||
<button class="button button--secondary">Button / Secondary / Default</button>
|
||||
<button class="button button--ghost">Button / Ghost / Default</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="subsection">
|
||||
<h3>Product Card</h3>
|
||||
<div class="product-grid product-grid--3">
|
||||
<article class="product-card">
|
||||
<div class="product-media product-media--amber"><span class="bottle"></span></div>
|
||||
<div class="product-meta">
|
||||
<span class="muted-caps">Tuscany</span>
|
||||
<h3>Brunello di Montalcino</h3>
|
||||
<p>Italy · Red dry · 2018 · 0.75 L</p>
|
||||
</div>
|
||||
<div class="product-footer">
|
||||
<strong>4 240 ₽</strong>
|
||||
<button class="button button--primary button--sm">Подробнее</button>
|
||||
</div>
|
||||
</article>
|
||||
<article class="product-card product-card--hover">
|
||||
<div class="product-media product-media--wine"><span class="bottle"></span></div>
|
||||
<div class="product-meta">
|
||||
<span class="muted-caps">Rioja</span>
|
||||
<h3>Reserva Seleccion Especial</h3>
|
||||
<p>Spain · Red dry · 2017 · 0.75 L</p>
|
||||
</div>
|
||||
<div class="product-footer">
|
||||
<strong>2 980 ₽</strong>
|
||||
<button class="button button--primary button--sm">Подробнее</button>
|
||||
</div>
|
||||
</article>
|
||||
<article class="product-card product-card--compact">
|
||||
<div class="product-media product-media--green"><span class="bottle"></span></div>
|
||||
<div class="product-meta">
|
||||
<span class="muted-caps">Mosel</span>
|
||||
<h3>Riesling Kabinett</h3>
|
||||
<p>Germany · White · 2021</p>
|
||||
</div>
|
||||
<div class="product-footer">
|
||||
<strong>2 150 ₽</strong>
|
||||
</div>
|
||||
</article>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="subsection">
|
||||
<h3>Navigation</h3>
|
||||
<div class="header-demo">
|
||||
<a class="brand brand--compact" href="#"><span class="brand__mark">DP</span><strong>Trade</strong></a>
|
||||
<nav>
|
||||
<a href="#">Каталог</a>
|
||||
<a href="#">Регионы</a>
|
||||
<a href="#">Производители</a>
|
||||
<a href="#">B2B</a>
|
||||
</nav>
|
||||
<button class="button button--secondary button--sm">Запросить прайс</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="subsection component-columns">
|
||||
<div>
|
||||
<h3>Filters</h3>
|
||||
<div class="control-stack">
|
||||
<label class="checkbox"><input type="checkbox" /> France</label>
|
||||
<label class="checkbox"><input type="checkbox" checked /> Italy</label>
|
||||
<div class="chip-row">
|
||||
<button class="chip">Red</button>
|
||||
<button class="chip chip--active">White</button>
|
||||
<button class="chip">Sparkling</button>
|
||||
</div>
|
||||
<label class="range">
|
||||
<span>Price range</span>
|
||||
<input type="range" min="0" max="100" value="64" />
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<h3>Tags & Inputs</h3>
|
||||
<div class="control-stack">
|
||||
<div class="chip-row">
|
||||
<span class="tag">Tag / Default</span>
|
||||
<span class="tag tag--filled">Tag / Filled</span>
|
||||
<span class="tag tag--outline">Tag / Outline</span>
|
||||
</div>
|
||||
<input class="input" placeholder="Input / Default" />
|
||||
<input class="input input--focus" value="Input / Focus" />
|
||||
<input class="input input--error" value="Input / Error" />
|
||||
<select class="input">
|
||||
<option>Select / Default</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="subsection">
|
||||
<h3>Tables / B2B</h3>
|
||||
<div class="table-wrap">
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>SKU</th>
|
||||
<th>Name</th>
|
||||
<th>Region</th>
|
||||
<th>Stock</th>
|
||||
<th>Trade price</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>DP-1042</td>
|
||||
<td>Chateau Laroque Grand Cru</td>
|
||||
<td>Bordeaux</td>
|
||||
<td>48 cases</td>
|
||||
<td>3 890 ₽</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>DP-1188</td>
|
||||
<td>Riesling Kabinett</td>
|
||||
<td>Mosel</td>
|
||||
<td>32 cases</td>
|
||||
<td>2 150 ₽</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="patterns" class="section">
|
||||
<div class="section-heading">
|
||||
<p class="eyebrow">03 Patterns</p>
|
||||
<h2>Паттерны</h2>
|
||||
</div>
|
||||
<div class="catalog-pattern">
|
||||
<aside class="filters-panel">
|
||||
<h3>Filters / Sidebar</h3>
|
||||
<label class="checkbox"><input type="checkbox" checked /> Bordeaux</label>
|
||||
<label class="checkbox"><input type="checkbox" /> Tuscany</label>
|
||||
<label class="checkbox"><input type="checkbox" /> Rioja</label>
|
||||
<button class="button button--primary">Применить</button>
|
||||
</aside>
|
||||
<div>
|
||||
<h3>Pattern / Product Grid / 3 col</h3>
|
||||
<div class="product-grid product-grid--3">
|
||||
<article class="mini-card">Bordeaux Grand Cru</article>
|
||||
<article class="mini-card">Tuscany Reserve</article>
|
||||
<article class="mini-card">Mosel Riesling</article>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="templates" class="section">
|
||||
<div class="section-heading">
|
||||
<p class="eyebrow">04 Templates</p>
|
||||
<h2>Шаблоны</h2>
|
||||
</div>
|
||||
<div class="template-grid">
|
||||
<article class="template-card">
|
||||
<span>Template / Home</span>
|
||||
<strong>Hero + regions + recommendations</strong>
|
||||
</article>
|
||||
<article class="template-card">
|
||||
<span>Template / Catalog</span>
|
||||
<strong>Filters + product grid + table mode</strong>
|
||||
</article>
|
||||
<article class="template-card">
|
||||
<span>Template / Product Page</span>
|
||||
<strong>Gallery + meta + CTA + availability</strong>
|
||||
</article>
|
||||
<article class="template-card">
|
||||
<span>Template / Producer Page</span>
|
||||
<strong>Story + region + producer catalog</strong>
|
||||
</article>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="screens" class="section section--last">
|
||||
<div class="section-heading">
|
||||
<p class="eyebrow">05 Screens</p>
|
||||
<h2>Реальные экраны</h2>
|
||||
</div>
|
||||
<div class="screen-preview">
|
||||
<div class="screen-preview__bar"></div>
|
||||
<div class="screen-preview__hero">
|
||||
<p class="eyebrow">Screen / Home / v1</p>
|
||||
<h3>Curated trade catalog</h3>
|
||||
<button class="button button--primary">Смотреть каталог</button>
|
||||
</div>
|
||||
<div class="screen-preview__content">
|
||||
<span></span><span></span><span></span>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
Loading…
x
Reference in New Issue
Block a user