Refine footer layout and replace social icons
This commit is contained in:
parent
02193a0f66
commit
02a2782cb7
88
about.html
88
about.html
@ -165,6 +165,7 @@
|
||||
<a href="news-villa-raiano.html">Новости</a>
|
||||
<a href="about.html">О компании</a>
|
||||
<a href="contacts.html">Контакты</a>
|
||||
<a href="contacts-auth.html">Контакты auth</a>
|
||||
<div class="nav-item">
|
||||
<button class="nav-trigger" type="button" aria-expanded="false">UI-kit <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="UI-kit">
|
||||
@ -183,6 +184,7 @@
|
||||
<article class="menu-column">
|
||||
<p class="section-title">Demo pages</p>
|
||||
<a href="index.html">Главная</a><a href="catalog.html">Каталог</a><a href="product.html">Карточка товара</a><a href="bottle-cards.html">Варианты карточек</a><a href="news-villa-raiano.html">Новость</a><a href="news-villa-raiano-v2.html">Новость v2</a><a href="article-guidelines.html">Ред. гайд</a><a href="about.html">О компании</a><a href="contacts.html">Контакты</a>
|
||||
<a href="contacts-auth.html">Контакты auth</a>
|
||||
</article>
|
||||
<article class="menu-column">
|
||||
<p class="section-title">UI-kit sections</p>
|
||||
@ -239,22 +241,78 @@
|
||||
</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="contacts.html">Связаться с менеджером</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="about.html">О компании</a></li><li><a href="contacts.html">Контакты</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 class="container footer-container">
|
||||
<section class="footer-main">
|
||||
<div class="footer-brand-block">
|
||||
<a class="footer-brand" 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>
|
||||
<p class="footer-brand-subtitle">Территория качественного вина</p>
|
||||
</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="about.html">О компании</a></li>
|
||||
<li><a href="contacts.html">Контакты</a></li>
|
||||
<li><a href="contacts-auth.html">Контакты auth</a></li>
|
||||
<li><a href="#">Склады</a></li>
|
||||
<li><a href="#">Реквизиты</a></li>
|
||||
</ul>
|
||||
</article>
|
||||
</section>
|
||||
|
||||
<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>
|
||||
<div class="social-links" aria-label="Социальные сети">
|
||||
<a href="#" aria-label="Telegram">
|
||||
<svg viewBox="0 0 24 24" aria-hidden="true">
|
||||
<path d="M21 4 3 11.2l6.3 2.2L18 7.7l-6.8 7.1.2 5.2 3-3.3 4.7 3.5L21 4Z" />
|
||||
</svg>
|
||||
</a>
|
||||
<a href="#" aria-label="VK">
|
||||
<svg viewBox="0 0 24 24" aria-hidden="true">
|
||||
<path d="M4 7h3l2 4.2c.5 1.1 1 1.6 1.3 1.6.2 0 .4-.3.4-1V7h3v3.7c0 .4.2.6.5.6.6 0 1.8-1.6 2.6-4.3H20c-.7 3-1.8 4.8-3 5.7 1.2.8 2.4 2.2 3.2 4.3h-3.4c-.8-1.5-1.8-2.7-2.5-2.7-.4 0-.6.3-.6.8V17h-1.5C8.8 17 6.2 13.9 4 7Z" />
|
||||
</svg>
|
||||
</a>
|
||||
</div>
|
||||
</footer>
|
||||
</article>
|
||||
|
||||
<section class="footer-legal" aria-label="Правовая информация">
|
||||
<p>
|
||||
Интернет-витрина размещает информацию об алкогольной продукции исключительно в целях ознакомления.
|
||||
Дистанционная продажа алкогольной продукции не осуществляется.
|
||||
<a href="#">Подробнее о правовой информации</a>
|
||||
</p>
|
||||
<p>© 2026 DP-Trade</p>
|
||||
</section>
|
||||
</section>
|
||||
</div>
|
||||
</footer>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@ -165,6 +165,7 @@
|
||||
<a href="news-villa-raiano.html">Новости</a>
|
||||
<a href="about.html">О компании</a>
|
||||
<a href="contacts.html">Контакты</a>
|
||||
<a href="contacts-auth.html">Контакты auth</a>
|
||||
<div class="nav-item">
|
||||
<button class="nav-trigger" type="button" aria-expanded="false">UI-kit <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="UI-kit">
|
||||
@ -183,6 +184,7 @@
|
||||
<article class="menu-column">
|
||||
<p class="section-title">Demo pages</p>
|
||||
<a href="index.html">Главная</a><a href="catalog.html">Каталог</a><a href="product.html">Карточка товара</a><a href="bottle-cards.html">Варианты карточек</a><a href="news-villa-raiano.html">Новость</a><a href="news-villa-raiano-v2.html">Новость v2</a><a href="article-guidelines.html">Ред. гайд</a><a href="about.html">О компании</a><a href="contacts.html">Контакты</a>
|
||||
<a href="contacts-auth.html">Контакты auth</a>
|
||||
</article>
|
||||
<article class="menu-column">
|
||||
<p class="section-title">UI-kit sections</p>
|
||||
@ -305,22 +307,78 @@
|
||||
</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="contacts.html">Связаться с менеджером</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="about.html">О компании</a></li><li><a href="contacts.html">Контакты</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 class="container footer-container">
|
||||
<section class="footer-main">
|
||||
<div class="footer-brand-block">
|
||||
<a class="footer-brand" 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>
|
||||
<p class="footer-brand-subtitle">Территория качественного вина</p>
|
||||
</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="about.html">О компании</a></li>
|
||||
<li><a href="contacts.html">Контакты</a></li>
|
||||
<li><a href="contacts-auth.html">Контакты auth</a></li>
|
||||
<li><a href="#">Склады</a></li>
|
||||
<li><a href="#">Реквизиты</a></li>
|
||||
</ul>
|
||||
</article>
|
||||
</section>
|
||||
|
||||
<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>
|
||||
<div class="social-links" aria-label="Социальные сети">
|
||||
<a href="#" aria-label="Telegram">
|
||||
<svg viewBox="0 0 24 24" aria-hidden="true">
|
||||
<path d="M21 4 3 11.2l6.3 2.2L18 7.7l-6.8 7.1.2 5.2 3-3.3 4.7 3.5L21 4Z" />
|
||||
</svg>
|
||||
</a>
|
||||
<a href="#" aria-label="VK">
|
||||
<svg viewBox="0 0 24 24" aria-hidden="true">
|
||||
<path d="M4 7h3l2 4.2c.5 1.1 1 1.6 1.3 1.6.2 0 .4-.3.4-1V7h3v3.7c0 .4.2.6.5.6.6 0 1.8-1.6 2.6-4.3H20c-.7 3-1.8 4.8-3 5.7 1.2.8 2.4 2.2 3.2 4.3h-3.4c-.8-1.5-1.8-2.7-2.5-2.7-.4 0-.6.3-.6.8V17h-1.5C8.8 17 6.2 13.9 4 7Z" />
|
||||
</svg>
|
||||
</a>
|
||||
</div>
|
||||
</footer>
|
||||
</article>
|
||||
|
||||
<section class="footer-legal" aria-label="Правовая информация">
|
||||
<p>
|
||||
Интернет-витрина размещает информацию об алкогольной продукции исключительно в целях ознакомления.
|
||||
Дистанционная продажа алкогольной продукции не осуществляется.
|
||||
<a href="#">Подробнее о правовой информации</a>
|
||||
</p>
|
||||
<p>© 2026 DP-Trade</p>
|
||||
</section>
|
||||
</section>
|
||||
</div>
|
||||
</footer>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
BIN
assets/images/00081538_1.png
Normal file
BIN
assets/images/00081538_1.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 5.4 MiB |
@ -165,6 +165,7 @@
|
||||
<a href="news-villa-raiano.html">Новости</a>
|
||||
<a href="about.html">О компании</a>
|
||||
<a href="contacts.html">Контакты</a>
|
||||
<a href="contacts-auth.html">Контакты auth</a>
|
||||
<div class="nav-item">
|
||||
<button class="nav-trigger" type="button" aria-expanded="false">UI-kit <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="UI-kit">
|
||||
@ -183,6 +184,7 @@
|
||||
<article class="menu-column">
|
||||
<p class="section-title">Demo pages</p>
|
||||
<a href="index.html">Главная</a><a href="catalog.html">Каталог</a><a href="product.html">Карточка товара</a><a href="bottle-cards.html">Варианты карточек</a><a href="news-villa-raiano.html">Новость</a><a href="news-villa-raiano-v2.html">Новость v2</a><a href="article-guidelines.html">Ред. гайд</a><a href="about.html">О компании</a><a href="contacts.html">Контакты</a>
|
||||
<a href="contacts-auth.html">Контакты auth</a>
|
||||
</article>
|
||||
<article class="menu-column">
|
||||
<p class="section-title">UI-kit sections</p>
|
||||
@ -215,7 +217,7 @@
|
||||
<div class="bottle-card-grid">
|
||||
<article class="bottle-card bottle-card--bordeaux">
|
||||
<div class="bottle-card__media">
|
||||
<img class="bottle-card__photo" src="assets/images/00073820_1.png" alt="Chateau Laroque Grand Cru" />
|
||||
<img class="bottle-card__photo" src="assets/images/00081538_1.png" alt="Chateau Laroque Grand Cru" />
|
||||
</div>
|
||||
<div class="bottle-card__body">
|
||||
<p class="bottle-card__region">Bordeaux</p>
|
||||
@ -268,7 +270,7 @@
|
||||
<div class="bottle-card-mix">
|
||||
<article class="bottle-card bottle-card--clean">
|
||||
<div class="bottle-card__media">
|
||||
<img class="bottle-card__photo" src="assets/images/00073820_1.png" alt="Oremus Case of Aszu" />
|
||||
<img class="bottle-card__photo" src="assets/images/00081538_1.png" alt="Oremus Case of Aszu" />
|
||||
</div>
|
||||
<div class="bottle-card__body">
|
||||
<p class="bottle-card__region">Clean retail</p>
|
||||
@ -326,7 +328,7 @@
|
||||
<p class="catalog-card-sample__label">Default / как в каталоге</p>
|
||||
<div class="product-card product-card--list">
|
||||
<a class="product-image" href="product.html" aria-label="Вино белое Oremus, Case of Aszu 5 Puttonyos, 0.5 л. 2000">
|
||||
<img src="assets/images/00073820_1.png" alt="Вино белое Oremus, Case of Aszu 5 Puttonyos, 0.5 л. 2000" />
|
||||
<img src="assets/images/00081538_1.png" alt="Вино белое Oremus, Case of Aszu 5 Puttonyos, 0.5 л. 2000" />
|
||||
</a>
|
||||
<div class="product-info">
|
||||
<h3>Вино белое Oremus, Case of Aszu 5 Puttonyos, 0.5 л. 2000</h3>
|
||||
@ -401,7 +403,7 @@
|
||||
<p class="catalog-card-sample__label">B2B dense / больше данных</p>
|
||||
<div class="product-card product-card--list product-card--list-b2b">
|
||||
<a class="product-image" href="product.html" aria-label="Вино белое Oremus, Tokaji Aszu 5 Puttonyos, 0.5 л. 2000">
|
||||
<img src="assets/images/00073820_1.png" alt="Вино белое Oremus, Tokaji Aszu 5 Puttonyos, 0.5 л. 2000" />
|
||||
<img src="assets/images/00081538_1.png" alt="Вино белое Oremus, Tokaji Aszu 5 Puttonyos, 0.5 л. 2000" />
|
||||
</a>
|
||||
<div class="product-info">
|
||||
<h3>Вино белое Oremus, Tokaji Aszu 5 Puttonyos, 0.5 л. 2000</h3>
|
||||
@ -425,22 +427,78 @@
|
||||
</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="contacts.html">Связаться с менеджером</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="about.html">О компании</a></li><li><a href="contacts.html">Контакты</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 class="container footer-container">
|
||||
<section class="footer-main">
|
||||
<div class="footer-brand-block">
|
||||
<a class="footer-brand" 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>
|
||||
<p class="footer-brand-subtitle">Территория качественного вина</p>
|
||||
</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="about.html">О компании</a></li>
|
||||
<li><a href="contacts.html">Контакты</a></li>
|
||||
<li><a href="contacts-auth.html">Контакты auth</a></li>
|
||||
<li><a href="#">Склады</a></li>
|
||||
<li><a href="#">Реквизиты</a></li>
|
||||
</ul>
|
||||
</article>
|
||||
</section>
|
||||
|
||||
<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>
|
||||
<div class="social-links" aria-label="Социальные сети">
|
||||
<a href="#" aria-label="Telegram">
|
||||
<svg viewBox="0 0 24 24" aria-hidden="true">
|
||||
<path d="M21 4 3 11.2l6.3 2.2L18 7.7l-6.8 7.1.2 5.2 3-3.3 4.7 3.5L21 4Z" />
|
||||
</svg>
|
||||
</a>
|
||||
<a href="#" aria-label="VK">
|
||||
<svg viewBox="0 0 24 24" aria-hidden="true">
|
||||
<path d="M4 7h3l2 4.2c.5 1.1 1 1.6 1.3 1.6.2 0 .4-.3.4-1V7h3v3.7c0 .4.2.6.5.6.6 0 1.8-1.6 2.6-4.3H20c-.7 3-1.8 4.8-3 5.7 1.2.8 2.4 2.2 3.2 4.3h-3.4c-.8-1.5-1.8-2.7-2.5-2.7-.4 0-.6.3-.6.8V17h-1.5C8.8 17 6.2 13.9 4 7Z" />
|
||||
</svg>
|
||||
</a>
|
||||
</div>
|
||||
</footer>
|
||||
</article>
|
||||
|
||||
<section class="footer-legal" aria-label="Правовая информация">
|
||||
<p>
|
||||
Интернет-витрина размещает информацию об алкогольной продукции исключительно в целях ознакомления.
|
||||
Дистанционная продажа алкогольной продукции не осуществляется.
|
||||
<a href="#">Подробнее о правовой информации</a>
|
||||
</p>
|
||||
<p>© 2026 DP-Trade</p>
|
||||
</section>
|
||||
</section>
|
||||
</div>
|
||||
</footer>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
90
catalog.html
90
catalog.html
@ -165,6 +165,7 @@
|
||||
<a href="news-villa-raiano.html">Новости</a>
|
||||
<a href="about.html">О компании</a>
|
||||
<a href="contacts.html">Контакты</a>
|
||||
<a href="contacts-auth.html">Контакты auth</a>
|
||||
<div class="nav-item">
|
||||
<button class="nav-trigger" type="button" aria-expanded="false">UI-kit <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="UI-kit">
|
||||
@ -183,6 +184,7 @@
|
||||
<article class="menu-column">
|
||||
<p class="section-title">Demo pages</p>
|
||||
<a href="index.html">Главная</a><a href="catalog.html">Каталог</a><a href="product.html">Карточка товара</a><a href="bottle-cards.html">Варианты карточек</a><a href="news-villa-raiano.html">Новость</a><a href="news-villa-raiano-v2.html">Новость v2</a><a href="article-guidelines.html">Ред. гайд</a><a href="about.html">О компании</a><a href="contacts.html">Контакты</a>
|
||||
<a href="contacts-auth.html">Контакты auth</a>
|
||||
</article>
|
||||
<article class="menu-column">
|
||||
<p class="section-title">UI-kit sections</p>
|
||||
@ -224,7 +226,7 @@
|
||||
<section class="product-list" aria-label="Список товаров">
|
||||
<article class="product-card product-card--list">
|
||||
<a class="product-image" href="product.html" aria-label="Вино белое Oremus, Case of Aszu 5 Puttonyos, 0.5 л. 2000">
|
||||
<img src="assets/images/00073820_1.png" alt="Вино белое Oremus, Case of Aszu 5 Puttonyos, 0.5 л. 2000" />
|
||||
<img src="assets/images/00081538_1.png" alt="Вино белое Oremus, Case of Aszu 5 Puttonyos, 0.5 л. 2000" />
|
||||
</a>
|
||||
<div class="product-info">
|
||||
<h3>Вино белое Oremus, Case of Aszu 5 Puttonyos, 0.5 л. 2000</h3>
|
||||
@ -273,22 +275,78 @@
|
||||
</div>
|
||||
</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="contacts.html">Связаться с менеджером</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="about.html">О компании</a></li><li><a href="contacts.html">Контакты</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 class="container footer-container">
|
||||
<section class="footer-main">
|
||||
<div class="footer-brand-block">
|
||||
<a class="footer-brand" 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>
|
||||
<p class="footer-brand-subtitle">Территория качественного вина</p>
|
||||
</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="about.html">О компании</a></li>
|
||||
<li><a href="contacts.html">Контакты</a></li>
|
||||
<li><a href="contacts-auth.html">Контакты auth</a></li>
|
||||
<li><a href="#">Склады</a></li>
|
||||
<li><a href="#">Реквизиты</a></li>
|
||||
</ul>
|
||||
</article>
|
||||
</section>
|
||||
|
||||
<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>
|
||||
<div class="social-links" aria-label="Социальные сети">
|
||||
<a href="#" aria-label="Telegram">
|
||||
<svg viewBox="0 0 24 24" aria-hidden="true">
|
||||
<path d="M21 4 3 11.2l6.3 2.2L18 7.7l-6.8 7.1.2 5.2 3-3.3 4.7 3.5L21 4Z" />
|
||||
</svg>
|
||||
</a>
|
||||
<a href="#" aria-label="VK">
|
||||
<svg viewBox="0 0 24 24" aria-hidden="true">
|
||||
<path d="M4 7h3l2 4.2c.5 1.1 1 1.6 1.3 1.6.2 0 .4-.3.4-1V7h3v3.7c0 .4.2.6.5.6.6 0 1.8-1.6 2.6-4.3H20c-.7 3-1.8 4.8-3 5.7 1.2.8 2.4 2.2 3.2 4.3h-3.4c-.8-1.5-1.8-2.7-2.5-2.7-.4 0-.6.3-.6.8V17h-1.5C8.8 17 6.2 13.9 4 7Z" />
|
||||
</svg>
|
||||
</a>
|
||||
</div>
|
||||
</footer>
|
||||
</article>
|
||||
|
||||
<section class="footer-legal" aria-label="Правовая информация">
|
||||
<p>
|
||||
Интернет-витрина размещает информацию об алкогольной продукции исключительно в целях ознакомления.
|
||||
Дистанционная продажа алкогольной продукции не осуществляется.
|
||||
<a href="#">Подробнее о правовой информации</a>
|
||||
</p>
|
||||
<p>© 2026 DP-Trade</p>
|
||||
</section>
|
||||
</section>
|
||||
</div>
|
||||
</footer>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@ -1,26 +1,11 @@
|
||||
<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 class="footer-brand-block">
|
||||
<a class="footer-brand" 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>
|
||||
<p class="footer-brand-subtitle">Территория качественного вина</p>
|
||||
</div>
|
||||
|
||||
<section class="footer-nav" aria-label="Навигация по разделам">
|
||||
@ -48,21 +33,40 @@
|
||||
<article class="nav-group">
|
||||
<h2>Компания</h2>
|
||||
<ul>
|
||||
<li><a href="#">О компании</a></li>
|
||||
<li><a href="#">Контакты</a></li>
|
||||
<li><a href="about.html">О компании</a></li>
|
||||
<li><a href="contacts.html">Контакты</a></li>
|
||||
<li><a href="contacts-auth.html">Контакты auth</a></li>
|
||||
<li><a href="#">Склады</a></li>
|
||||
<li><a href="#">Реквизиты</a></li>
|
||||
</ul>
|
||||
</article>
|
||||
</section>
|
||||
|
||||
<section class="footer-legal" aria-label="Правовая информация">
|
||||
<p>
|
||||
Интернет-витрина размещает информацию об алкогольной продукции исключительно в целях ознакомления.
|
||||
Дистанционная продажа алкогольной продукции не осуществляется.
|
||||
<a href="#">Подробнее о правовой информации</a>
|
||||
</p>
|
||||
<p>© 2026 DP-Trade</p>
|
||||
</section>
|
||||
<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>
|
||||
<div class="social-links" aria-label="Социальные сети">
|
||||
<a href="#" aria-label="Telegram">
|
||||
<svg viewBox="0 0 24 24" aria-hidden="true">
|
||||
<path d="M21 4 3 11.2l6.3 2.2L18 7.7l-6.8 7.1.2 5.2 3-3.3 4.7 3.5L21 4Z" />
|
||||
</svg>
|
||||
</a>
|
||||
<a href="#" aria-label="VK">
|
||||
<svg viewBox="0 0 24 24" aria-hidden="true">
|
||||
<path d="M4 7h3l2 4.2c.5 1.1 1 1.6 1.3 1.6.2 0 .4-.3.4-1V7h3v3.7c0 .4.2.6.5.6.6 0 1.8-1.6 2.6-4.3H20c-.7 3-1.8 4.8-3 5.7 1.2.8 2.4 2.2 3.2 4.3h-3.4c-.8-1.5-1.8-2.7-2.5-2.7-.4 0-.6.3-.6.8V17h-1.5C8.8 17 6.2 13.9 4 7Z" />
|
||||
</svg>
|
||||
</a>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<section class="footer-legal" aria-label="Правовая информация">
|
||||
<p>
|
||||
Интернет-витрина размещает информацию об алкогольной продукции исключительно в целях ознакомления.
|
||||
Дистанционная продажа алкогольной продукции не осуществляется.
|
||||
<a href="#">Подробнее о правовой информации</a>
|
||||
</p>
|
||||
<p>© 2026 DP-Trade</p>
|
||||
</section>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
333
contacts-auth.html
Normal file
333
contacts-auth.html
Normal file
@ -0,0 +1,333 @@
|
||||
<!doctype html>
|
||||
<html lang="ru">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>DP Trade — Контакты / Auth Gate</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=Montserrat:wght@500;600;700;800&display=swap" rel="stylesheet" />
|
||||
<link rel="stylesheet" href="css/site.css" />
|
||||
</head>
|
||||
<body class="compact-type">
|
||||
<div class="site-shell">
|
||||
<header class="site-header">
|
||||
<div class="container header-top">
|
||||
<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">
|
||||
<button type="submit" aria-label="Поиск">⌕</button>
|
||||
<input type="search" placeholder="Поиск по вину, региону, производителю" aria-label="Поиск" />
|
||||
</form>
|
||||
<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>
|
||||
<nav class="container main-nav" aria-label="Основная навигация">
|
||||
<a href="catalog.html">Каталог</a>
|
||||
<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>Быстрый вход в каталог через страну, апелласьон или популярный регион.</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>
|
||||
<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>Быстрый выбор вина по цвету, категории и уровню сладости.</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="news-villa-raiano.html">Новости</a>
|
||||
<a href="about.html">О компании</a>
|
||||
<a href="contacts.html">Контакты</a>
|
||||
<a href="contacts-auth.html">Контакты auth</a>
|
||||
<div class="nav-item">
|
||||
<button class="nav-trigger" type="button" aria-expanded="false">UI-kit <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="UI-kit">
|
||||
<div class="mega-intro">
|
||||
<div>
|
||||
<p class="eyebrow">Design system</p>
|
||||
<h2>UI-kit и демо-страницы</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>Все демо-страницы собраны в одном месте для проверки header, footer, карточек и каталожных сценариев.</p>
|
||||
</article>
|
||||
<article class="menu-column">
|
||||
<p class="section-title">Demo pages</p>
|
||||
<a href="index.html">Главная</a><a href="catalog.html">Каталог</a><a href="product.html">Карточка товара</a><a href="bottle-cards.html">Варианты карточек</a><a href="news-villa-raiano.html">Новость</a><a href="news-villa-raiano-v2.html">Новость v2</a><a href="article-guidelines.html">Ред. гайд</a><a href="about.html">О компании</a><a href="contacts.html">Контакты</a>
|
||||
<a href="contacts-auth.html">Контакты auth</a>
|
||||
</article>
|
||||
<article class="menu-column">
|
||||
<p class="section-title">UI-kit sections</p>
|
||||
<a href="ui-kit.html#foundations">Foundations</a><a href="ui-kit.html#components">Components</a><a href="ui-kit.html#patterns">Patterns</a><a href="ui-kit.html#templates">Templates</a><a href="ui-kit.html#screens">Screens</a>
|
||||
</article>
|
||||
<article class="menu-column">
|
||||
<p class="section-title">Dev handoff</p>
|
||||
<div class="popular-list"><a href="ui-kit.html#tokens">Tokens</a><a href="ui-kit.html#components">States</a><a href="ui-kit.html#patterns">Layouts</a><a href="ui-kit.html">Full UI-kit</a></div>
|
||||
</article>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</nav>
|
||||
</header>
|
||||
<main class="content-page contacts-auth-page">
|
||||
<section class="page-hero page-hero--contacts">
|
||||
<div class="container page-hero__inner">
|
||||
<div>
|
||||
<p class="eyebrow">Контакты</p>
|
||||
<h1>Связаться с DP Trade</h1>
|
||||
<p>Контакты открыты для всех, но заявка менеджеру доступна только зарегистрированным или залогиненным пользователям.</p>
|
||||
</div>
|
||||
<aside class="page-hero__meta" aria-label="Основные контакты">
|
||||
<span>Sales office</span>
|
||||
<strong>+7 (495) 937-94-60</strong>
|
||||
<p>dptr@dp-trade.ru</p>
|
||||
</aside>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="section">
|
||||
<div class="container contacts-layout">
|
||||
<div class="contact-stack">
|
||||
<article class="contact-panel">
|
||||
<span>Телефон</span>
|
||||
<a href="tel:+74959379460">+7 (495) 937-94-60</a>
|
||||
<p>Для консультаций по ассортименту, поставкам и условиям сотрудничества.</p>
|
||||
</article>
|
||||
<article class="contact-panel">
|
||||
<span>Email</span>
|
||||
<a href="mailto:dptr@dp-trade.ru">dptr@dp-trade.ru</a>
|
||||
<p>Удобно для запросов прайса, карточек производителей и B2B-документов.</p>
|
||||
</article>
|
||||
<article class="contact-panel">
|
||||
<span>Юридическая информация</span>
|
||||
<p>Интернет-витрина размещает информацию об алкогольной продукции исключительно в ознакомительных целях. Дистанционная продажа алкогольной продукции не осуществляется.</p>
|
||||
</article>
|
||||
</div>
|
||||
<section class="contact-form contact-auth-gate" aria-labelledby="auth-gate-title">
|
||||
<div class="auth-gate__badge">Требуется аккаунт</div>
|
||||
<h2 id="auth-gate-title">Заявка доступна после входа</h2>
|
||||
<p>Мы показываем телефон и email открыто, но форму заявки менеджеру оставляем внутри личного кабинета: так менеджер сразу видит компанию, историю запросов и коммерческий статус клиента.</p>
|
||||
<div class="auth-gate__actions">
|
||||
<a class="button button--primary" href="#">Войти</a>
|
||||
<a class="button button--secondary" href="#">Зарегистрироваться</a>
|
||||
</div>
|
||||
<div class="auth-gate__note">
|
||||
<strong>После входа откроется:</strong>
|
||||
<span>форма заявки, автозаполнение контактов, привязка к компании и история обращений.</span>
|
||||
</div>
|
||||
<div class="locked-form-preview" aria-label="Предпросмотр заблокированной формы">
|
||||
<label>Имя<input class="input" type="text" placeholder="Как к вам обращаться" disabled /></label>
|
||||
<label>Телефон или email<input class="input" type="text" placeholder="Контакт для ответа" disabled /></label>
|
||||
<label>Сообщение<textarea class="input" rows="4" placeholder="Напишите, что нужно подобрать" disabled></textarea></label>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
|
||||
<footer class="site-footer">
|
||||
<div class="container footer-container">
|
||||
<section class="footer-main">
|
||||
<div class="footer-brand-block">
|
||||
<a class="footer-brand" 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>
|
||||
<p class="footer-brand-subtitle">Территория качественного вина</p>
|
||||
</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="about.html">О компании</a></li>
|
||||
<li><a href="contacts.html">Контакты</a></li>
|
||||
<li><a href="contacts-auth.html">Контакты auth</a></li>
|
||||
<li><a href="#">Склады</a></li>
|
||||
<li><a href="#">Реквизиты</a></li>
|
||||
</ul>
|
||||
</article>
|
||||
</section>
|
||||
|
||||
<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>
|
||||
<div class="social-links" aria-label="Социальные сети">
|
||||
<a href="#" aria-label="Telegram">
|
||||
<svg viewBox="0 0 24 24" aria-hidden="true">
|
||||
<path d="M21 4 3 11.2l6.3 2.2L18 7.7l-6.8 7.1.2 5.2 3-3.3 4.7 3.5L21 4Z" />
|
||||
</svg>
|
||||
</a>
|
||||
<a href="#" aria-label="VK">
|
||||
<svg viewBox="0 0 24 24" aria-hidden="true">
|
||||
<path d="M4 7h3l2 4.2c.5 1.1 1 1.6 1.3 1.6.2 0 .4-.3.4-1V7h3v3.7c0 .4.2.6.5.6.6 0 1.8-1.6 2.6-4.3H20c-.7 3-1.8 4.8-3 5.7 1.2.8 2.4 2.2 3.2 4.3h-3.4c-.8-1.5-1.8-2.7-2.5-2.7-.4 0-.6.3-.6.8V17h-1.5C8.8 17 6.2 13.9 4 7Z" />
|
||||
</svg>
|
||||
</a>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<section class="footer-legal" aria-label="Правовая информация">
|
||||
<p>
|
||||
Интернет-витрина размещает информацию об алкогольной продукции исключительно в целях ознакомления.
|
||||
Дистанционная продажа алкогольной продукции не осуществляется.
|
||||
<a href="#">Подробнее о правовой информации</a>
|
||||
</p>
|
||||
<p>© 2026 DP-Trade</p>
|
||||
</section>
|
||||
</section>
|
||||
</div>
|
||||
</footer>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@ -165,6 +165,7 @@
|
||||
<a href="news-villa-raiano.html">Новости</a>
|
||||
<a href="about.html">О компании</a>
|
||||
<a href="contacts.html">Контакты</a>
|
||||
<a href="contacts-auth.html">Контакты auth</a>
|
||||
<div class="nav-item">
|
||||
<button class="nav-trigger" type="button" aria-expanded="false">UI-kit <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="UI-kit">
|
||||
@ -183,6 +184,7 @@
|
||||
<article class="menu-column">
|
||||
<p class="section-title">Demo pages</p>
|
||||
<a href="index.html">Главная</a><a href="catalog.html">Каталог</a><a href="product.html">Карточка товара</a><a href="bottle-cards.html">Варианты карточек</a><a href="news-villa-raiano.html">Новость</a><a href="news-villa-raiano-v2.html">Новость v2</a><a href="article-guidelines.html">Ред. гайд</a><a href="about.html">О компании</a><a href="contacts.html">Контакты</a>
|
||||
<a href="contacts-auth.html">Контакты auth</a>
|
||||
</article>
|
||||
<article class="menu-column">
|
||||
<p class="section-title">UI-kit sections</p>
|
||||
@ -243,22 +245,78 @@
|
||||
</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="contacts.html">Связаться с менеджером</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="about.html">О компании</a></li><li><a href="contacts.html">Контакты</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 class="container footer-container">
|
||||
<section class="footer-main">
|
||||
<div class="footer-brand-block">
|
||||
<a class="footer-brand" 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>
|
||||
<p class="footer-brand-subtitle">Территория качественного вина</p>
|
||||
</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="about.html">О компании</a></li>
|
||||
<li><a href="contacts.html">Контакты</a></li>
|
||||
<li><a href="contacts-auth.html">Контакты auth</a></li>
|
||||
<li><a href="#">Склады</a></li>
|
||||
<li><a href="#">Реквизиты</a></li>
|
||||
</ul>
|
||||
</article>
|
||||
</section>
|
||||
|
||||
<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>
|
||||
<div class="social-links" aria-label="Социальные сети">
|
||||
<a href="#" aria-label="Telegram">
|
||||
<svg viewBox="0 0 24 24" aria-hidden="true">
|
||||
<path d="M21 4 3 11.2l6.3 2.2L18 7.7l-6.8 7.1.2 5.2 3-3.3 4.7 3.5L21 4Z" />
|
||||
</svg>
|
||||
</a>
|
||||
<a href="#" aria-label="VK">
|
||||
<svg viewBox="0 0 24 24" aria-hidden="true">
|
||||
<path d="M4 7h3l2 4.2c.5 1.1 1 1.6 1.3 1.6.2 0 .4-.3.4-1V7h3v3.7c0 .4.2.6.5.6.6 0 1.8-1.6 2.6-4.3H20c-.7 3-1.8 4.8-3 5.7 1.2.8 2.4 2.2 3.2 4.3h-3.4c-.8-1.5-1.8-2.7-2.5-2.7-.4 0-.6.3-.6.8V17h-1.5C8.8 17 6.2 13.9 4 7Z" />
|
||||
</svg>
|
||||
</a>
|
||||
</div>
|
||||
</footer>
|
||||
</article>
|
||||
|
||||
<section class="footer-legal" aria-label="Правовая информация">
|
||||
<p>
|
||||
Интернет-витрина размещает информацию об алкогольной продукции исключительно в целях ознакомления.
|
||||
Дистанционная продажа алкогольной продукции не осуществляется.
|
||||
<a href="#">Подробнее о правовой информации</a>
|
||||
</p>
|
||||
<p>© 2026 DP-Trade</p>
|
||||
</section>
|
||||
</section>
|
||||
</div>
|
||||
</footer>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
261
css/site.css
261
css/site.css
@ -1642,6 +1642,81 @@ select {
|
||||
resize: vertical;
|
||||
}
|
||||
|
||||
.contact-auth-gate {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.contact-auth-gate::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
inset: 0 0 auto;
|
||||
height: 6px;
|
||||
background: linear-gradient(90deg, var(--color-primary-wine-100), var(--color-accent-gold));
|
||||
}
|
||||
|
||||
.auth-gate__badge {
|
||||
width: fit-content;
|
||||
padding: 7px 10px;
|
||||
border-radius: var(--radius-sm);
|
||||
background: rgba(75, 15, 36, 0.08);
|
||||
color: var(--color-primary-wine-100);
|
||||
font-size: 12px;
|
||||
font-weight: 800;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.contact-auth-gate > p {
|
||||
margin: 0;
|
||||
color: var(--color-neutral-gray-600);
|
||||
line-height: 1.62;
|
||||
}
|
||||
|
||||
.auth-gate__actions {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.auth-gate__note {
|
||||
padding: 16px;
|
||||
border: 1px solid rgba(185, 150, 91, 0.28);
|
||||
border-radius: var(--radius-sm);
|
||||
background: #f8fafc;
|
||||
display: grid;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.auth-gate__note strong {
|
||||
color: var(--color-neutral-black);
|
||||
}
|
||||
|
||||
.auth-gate__note span {
|
||||
color: var(--color-neutral-gray-600);
|
||||
line-height: 1.48;
|
||||
}
|
||||
|
||||
.locked-form-preview {
|
||||
padding-top: 16px;
|
||||
border-top: 1px solid rgba(102, 96, 95, 0.14);
|
||||
display: grid;
|
||||
gap: 12px;
|
||||
opacity: 0.62;
|
||||
}
|
||||
|
||||
.locked-form-preview label {
|
||||
display: grid;
|
||||
gap: 7px;
|
||||
color: var(--color-neutral-gray-600);
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
.locked-form-preview .input:disabled {
|
||||
cursor: not-allowed;
|
||||
background: #eef2f6;
|
||||
color: var(--color-neutral-gray-600);
|
||||
}
|
||||
|
||||
.guideline-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||||
@ -1966,77 +2041,92 @@ select {
|
||||
|
||||
.site-footer {
|
||||
margin-top: auto;
|
||||
padding: 40px 0 56px;
|
||||
background: #f1f4f8;
|
||||
padding: 32px 0 40px;
|
||||
border-top: 1px solid rgba(102, 96, 95, 0.12);
|
||||
background: var(--color-background-base);
|
||||
}
|
||||
|
||||
.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);
|
||||
padding: 24px 28px 20px;
|
||||
border: 1px solid rgba(102, 96, 95, 0.16);
|
||||
border-radius: var(--radius-sm);
|
||||
background: var(--color-surface);
|
||||
box-shadow: var(--shadow-soft);
|
||||
}
|
||||
|
||||
.footer-main {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(280px, 360px) minmax(0, 1fr);
|
||||
gap: 40px;
|
||||
grid-template-columns: minmax(170px, 210px) minmax(0, 1fr) minmax(210px, 250px);
|
||||
gap: 24px 32px;
|
||||
align-items: start;
|
||||
}
|
||||
|
||||
.footer-left {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 28px;
|
||||
.footer-brand-block {
|
||||
min-width: 0;
|
||||
display: grid;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.footer-brand {
|
||||
display: inline-flex;
|
||||
align-items: baseline;
|
||||
color: var(--color-accent-blue);
|
||||
font-family: var(--font-heading-retail);
|
||||
font-size: clamp(38px, 5vw, 64px);
|
||||
font-weight: 800;
|
||||
letter-spacing: 0;
|
||||
line-height: 1;
|
||||
width: fit-content;
|
||||
line-height: 0;
|
||||
}
|
||||
|
||||
.footer-brand span:first-child {
|
||||
color: var(--color-primary-wine-80);
|
||||
.footer-brand img {
|
||||
width: 156px;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.footer-brand-subtitle {
|
||||
margin: 10px 0 0;
|
||||
color: var(--color-primary-wine-80);
|
||||
margin: 0;
|
||||
color: var(--color-neutral-gray-600);
|
||||
font-size: 13px;
|
||||
line-height: 1.35;
|
||||
}
|
||||
|
||||
.social-links {
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
flex-wrap: wrap;
|
||||
gap: 8px;
|
||||
margin-top: 2px;
|
||||
}
|
||||
|
||||
.social-links a {
|
||||
min-width: 58px;
|
||||
padding: 10px 16px;
|
||||
border: 1px solid rgba(143, 23, 54, 0.22);
|
||||
display: inline-grid;
|
||||
place-items: center;
|
||||
width: 34px;
|
||||
height: 34px;
|
||||
border: 1px solid rgba(75, 15, 36, 0.14);
|
||||
border-radius: var(--radius-sm);
|
||||
background: rgba(255, 255, 255, 0.72);
|
||||
color: var(--color-primary-wine-80);
|
||||
font-weight: 800;
|
||||
text-align: center;
|
||||
background: transparent;
|
||||
color: var(--color-primary-wine-100);
|
||||
transition: background 0.18s ease, border-color 0.18s ease, transform 0.18s ease;
|
||||
}
|
||||
|
||||
.social-links svg {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
fill: currentColor;
|
||||
}
|
||||
|
||||
.social-links a:hover,
|
||||
.social-links a:focus-visible {
|
||||
border-color: rgba(75, 15, 36, 0.36);
|
||||
background: rgba(75, 15, 36, 0.06);
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
.contacts-card {
|
||||
padding: 24px;
|
||||
border: 1px solid rgba(217, 222, 229, 0.9);
|
||||
border-radius: var(--radius-sm);
|
||||
background: var(--color-surface);
|
||||
display: grid;
|
||||
gap: 8px;
|
||||
justify-items: start;
|
||||
align-content: start;
|
||||
}
|
||||
|
||||
.contacts-card h2,
|
||||
.nav-group h2 {
|
||||
margin: 0 0 16px;
|
||||
margin: 0 0 10px;
|
||||
font-size: 13px;
|
||||
font-weight: 800;
|
||||
letter-spacing: 0;
|
||||
@ -2046,19 +2136,27 @@ select {
|
||||
.contact-link {
|
||||
display: block;
|
||||
width: fit-content;
|
||||
color: var(--color-neutral-gray-700);
|
||||
font-size: 14px;
|
||||
line-height: 1.35;
|
||||
transition: color 0.18s ease;
|
||||
}
|
||||
|
||||
.contact-link:hover,
|
||||
.contact-link:focus-visible {
|
||||
color: var(--color-primary-wine-100);
|
||||
}
|
||||
|
||||
.contact-phone {
|
||||
margin-bottom: 10px;
|
||||
color: var(--color-neutral-gray-700);
|
||||
font-size: 22px;
|
||||
color: var(--color-accent-blue);
|
||||
font-size: 18px;
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
.footer-nav {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, minmax(140px, 1fr));
|
||||
gap: 32px;
|
||||
gap: 24px;
|
||||
align-items: start;
|
||||
}
|
||||
|
||||
@ -2069,25 +2167,61 @@ select {
|
||||
}
|
||||
|
||||
.nav-group li + li {
|
||||
margin-top: 12px;
|
||||
margin-top: 7px;
|
||||
}
|
||||
|
||||
.nav-group a,
|
||||
.footer-legal {
|
||||
color: #6b7280;
|
||||
color: var(--color-neutral-gray-600);
|
||||
}
|
||||
|
||||
.nav-group a {
|
||||
display: inline-flex;
|
||||
padding: 2px 0;
|
||||
font-size: 14px;
|
||||
line-height: 1.35;
|
||||
transition: color 0.18s ease;
|
||||
}
|
||||
|
||||
.nav-group a:hover,
|
||||
.nav-group a:focus-visible {
|
||||
color: var(--color-primary-wine-100);
|
||||
}
|
||||
|
||||
.footer-legal {
|
||||
grid-column: 1 / -1;
|
||||
margin-top: 8px;
|
||||
padding-top: 24px;
|
||||
border-top: 1px solid #d9dee5;
|
||||
font-size: 14px;
|
||||
line-height: 1.6;
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
justify-content: space-between;
|
||||
gap: 20px;
|
||||
padding-top: 16px;
|
||||
border-top: 1px solid rgba(102, 96, 95, 0.16);
|
||||
font-size: 12px;
|
||||
line-height: 1.45;
|
||||
}
|
||||
|
||||
.footer-legal p {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.footer-legal p:first-child {
|
||||
max-width: 760px;
|
||||
}
|
||||
|
||||
.footer-legal p:last-child {
|
||||
flex: 0 0 auto;
|
||||
color: var(--color-neutral-gray-700);
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
.footer-legal a {
|
||||
color: var(--color-primary-wine-80);
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
.footer-legal a:hover,
|
||||
.footer-legal a:focus-visible {
|
||||
color: var(--color-primary-wine-100);
|
||||
}
|
||||
|
||||
@media (max-width: 1080px) {
|
||||
@ -2102,6 +2236,19 @@ select {
|
||||
padding: 16px 0;
|
||||
}
|
||||
|
||||
.footer-main {
|
||||
grid-template-columns: minmax(180px, 0.7fr) minmax(220px, 1fr);
|
||||
}
|
||||
|
||||
.footer-nav,
|
||||
.footer-legal {
|
||||
grid-column: 1 / -1;
|
||||
}
|
||||
|
||||
.contacts-card {
|
||||
justify-self: end;
|
||||
}
|
||||
|
||||
.header-actions {
|
||||
justify-content: space-between;
|
||||
}
|
||||
@ -2373,4 +2520,22 @@ select {
|
||||
.footer-container {
|
||||
padding: 22px 18px;
|
||||
}
|
||||
|
||||
.footer-main {
|
||||
grid-template-columns: 1fr;
|
||||
gap: 32px;
|
||||
}
|
||||
|
||||
.footer-nav {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.contacts-card {
|
||||
justify-self: start;
|
||||
}
|
||||
|
||||
.footer-legal {
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
561
css/ui-kit.css
561
css/ui-kit.css
@ -58,6 +58,7 @@ select {
|
||||
position: fixed;
|
||||
inset: 0 auto 0 0;
|
||||
width: 280px;
|
||||
max-height: 100vh;
|
||||
padding: 24px;
|
||||
background: #f8fafc;
|
||||
border-right: 1px solid rgba(102, 96, 95, 0.18);
|
||||
@ -101,8 +102,23 @@ select {
|
||||
}
|
||||
|
||||
.side-nav {
|
||||
min-height: 0;
|
||||
overflow-y: auto;
|
||||
padding-right: 4px;
|
||||
display: grid;
|
||||
gap: 22px;
|
||||
overscroll-behavior: contain;
|
||||
scrollbar-width: thin;
|
||||
scrollbar-color: rgba(75, 15, 36, 0.34) transparent;
|
||||
}
|
||||
|
||||
.side-nav::-webkit-scrollbar {
|
||||
width: 6px;
|
||||
}
|
||||
|
||||
.side-nav::-webkit-scrollbar-thumb {
|
||||
border-radius: 999px;
|
||||
background: rgba(75, 15, 36, 0.28);
|
||||
}
|
||||
|
||||
.side-nav__group {
|
||||
@ -268,6 +284,105 @@ h3 {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.icon-style-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, minmax(0, 1fr));
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.icon-style-card {
|
||||
min-width: 0;
|
||||
padding: 18px;
|
||||
border: 1px solid rgba(102, 96, 95, 0.16);
|
||||
border-radius: var(--radius-sm);
|
||||
background: var(--color-white);
|
||||
box-shadow: var(--shadow-soft);
|
||||
display: grid;
|
||||
gap: 14px;
|
||||
}
|
||||
|
||||
.icon-demo-row {
|
||||
min-height: 86px;
|
||||
padding: 14px;
|
||||
border-radius: var(--radius-sm);
|
||||
background: #eef2f6;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.kit-icon {
|
||||
color: var(--color-primary-wine-100);
|
||||
display: inline-grid;
|
||||
place-items: center;
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
|
||||
.kit-icon svg {
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
fill: none;
|
||||
stroke: currentColor;
|
||||
stroke-linecap: round;
|
||||
stroke-linejoin: round;
|
||||
stroke-width: 1.75;
|
||||
}
|
||||
|
||||
.kit-icon--line {
|
||||
width: 44px;
|
||||
height: 44px;
|
||||
}
|
||||
|
||||
.kit-icon--soft,
|
||||
.kit-icon--filled {
|
||||
width: 46px;
|
||||
height: 46px;
|
||||
border-radius: var(--radius-sm);
|
||||
}
|
||||
|
||||
.kit-icon--soft {
|
||||
border: 1px solid rgba(75, 15, 36, 0.14);
|
||||
background: var(--color-white);
|
||||
}
|
||||
|
||||
.kit-icon--filled {
|
||||
background: var(--color-primary-wine-100);
|
||||
color: var(--color-white);
|
||||
box-shadow: 0 10px 22px rgba(75, 15, 36, 0.16);
|
||||
}
|
||||
|
||||
.kit-icon--tiny {
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
}
|
||||
|
||||
.kit-icon--tiny svg {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
stroke-width: 1.6;
|
||||
}
|
||||
|
||||
.icon-style-card > span {
|
||||
color: var(--color-accent-gold);
|
||||
font-size: 12px;
|
||||
font-weight: 800;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.icon-style-card p {
|
||||
margin: 0;
|
||||
color: var(--color-gray-600);
|
||||
font-size: 14px;
|
||||
line-height: 1.45;
|
||||
}
|
||||
|
||||
.icon-style-card code {
|
||||
padding: 10px;
|
||||
border-radius: var(--radius-sm);
|
||||
background: #eef2f6;
|
||||
white-space: normal;
|
||||
}
|
||||
|
||||
.section {
|
||||
padding: 72px clamp(24px, 5vw, 72px);
|
||||
border-top: 1px solid rgba(102, 96, 95, 0.16);
|
||||
@ -283,6 +398,18 @@ h3 {
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
|
||||
.section-heading--split {
|
||||
grid-template-columns: minmax(0, 0.58fr) minmax(280px, 0.42fr);
|
||||
gap: 32px;
|
||||
align-items: end;
|
||||
}
|
||||
|
||||
.section-heading--split > p {
|
||||
margin: 0;
|
||||
color: var(--color-gray-600);
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.subsection {
|
||||
margin-top: 40px;
|
||||
}
|
||||
@ -318,6 +445,98 @@ h3 {
|
||||
line-height: 1.45;
|
||||
}
|
||||
|
||||
.status-grid,
|
||||
.checklist-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.status-card,
|
||||
.production-rules article,
|
||||
.checklist-card {
|
||||
min-width: 0;
|
||||
padding: 20px;
|
||||
border: 1px solid rgba(102, 96, 95, 0.16);
|
||||
border-radius: var(--radius-sm);
|
||||
background: var(--color-white);
|
||||
box-shadow: var(--shadow-soft);
|
||||
}
|
||||
|
||||
.status-card {
|
||||
min-height: 190px;
|
||||
display: grid;
|
||||
align-content: space-between;
|
||||
gap: 14px;
|
||||
}
|
||||
|
||||
.status-card span,
|
||||
.production-rules span,
|
||||
.checklist-card span {
|
||||
width: fit-content;
|
||||
padding: 6px 9px;
|
||||
border-radius: var(--radius-sm);
|
||||
font-size: 11px;
|
||||
font-weight: 800;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.status-card--ready span {
|
||||
background: rgba(31, 77, 58, 0.12);
|
||||
color: #1f4d3a;
|
||||
}
|
||||
|
||||
.status-card--review span {
|
||||
background: rgba(185, 150, 91, 0.18);
|
||||
color: #7c5f26;
|
||||
}
|
||||
|
||||
.status-card--draft span {
|
||||
background: rgba(102, 96, 95, 0.12);
|
||||
color: var(--color-gray-600);
|
||||
}
|
||||
|
||||
.status-card strong {
|
||||
color: var(--color-neutral-black);
|
||||
font-family: var(--font-heading);
|
||||
font-size: 22px;
|
||||
line-height: 1.12;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.status-card p,
|
||||
.production-rules p {
|
||||
margin: 0;
|
||||
color: var(--color-gray-600);
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.production-rules {
|
||||
margin-top: 18px;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.production-rules span,
|
||||
.checklist-card span {
|
||||
margin-bottom: 14px;
|
||||
display: inline-block;
|
||||
background: rgba(75, 15, 36, 0.08);
|
||||
color: var(--color-primary-wine-100);
|
||||
}
|
||||
|
||||
.checklist-card ul {
|
||||
margin: 0;
|
||||
padding-left: 18px;
|
||||
color: var(--color-gray-600);
|
||||
line-height: 1.58;
|
||||
}
|
||||
|
||||
.checklist-card li + li {
|
||||
margin-top: 8px;
|
||||
}
|
||||
|
||||
.swatch-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, minmax(0, 1fr));
|
||||
@ -462,6 +681,88 @@ code {
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.shadow-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, minmax(0, 1fr));
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.shadow-card {
|
||||
min-height: 220px;
|
||||
padding: 18px;
|
||||
border: 1px solid rgba(102, 96, 95, 0.14);
|
||||
border-radius: var(--radius-sm);
|
||||
background: var(--color-white);
|
||||
display: grid;
|
||||
align-content: space-between;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.shadow-card span {
|
||||
color: var(--color-accent-gold);
|
||||
font-size: 11px;
|
||||
font-weight: 800;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.shadow-card strong {
|
||||
color: var(--color-neutral-black);
|
||||
font-family: var(--font-heading);
|
||||
font-size: 20px;
|
||||
line-height: 1.1;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.shadow-card p {
|
||||
margin: 0;
|
||||
color: var(--color-gray-600);
|
||||
font-size: 14px;
|
||||
line-height: 1.45;
|
||||
}
|
||||
|
||||
.shadow-card code {
|
||||
width: fit-content;
|
||||
max-width: 100%;
|
||||
padding: 7px 9px;
|
||||
border-radius: var(--radius-sm);
|
||||
background: #eef2f6;
|
||||
color: var(--color-primary-wine-100);
|
||||
font-size: 12px;
|
||||
white-space: normal;
|
||||
}
|
||||
|
||||
.shadow-card--none {
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.shadow-card--header {
|
||||
box-shadow: 0 10px 28px rgba(22, 22, 22, 0.05);
|
||||
}
|
||||
|
||||
.shadow-card--soft {
|
||||
box-shadow: var(--shadow-soft);
|
||||
}
|
||||
|
||||
.shadow-card--card {
|
||||
box-shadow: 0 18px 46px rgba(18, 25, 38, 0.08);
|
||||
}
|
||||
|
||||
.shadow-card--hover {
|
||||
box-shadow: 0 22px 54px rgba(25, 37, 62, 0.13);
|
||||
}
|
||||
|
||||
.shadow-card--lift {
|
||||
box-shadow: var(--shadow-lift);
|
||||
}
|
||||
|
||||
.shadow-card--editorial {
|
||||
box-shadow: 0 22px 58px rgba(25, 37, 62, 0.12);
|
||||
}
|
||||
|
||||
.shadow-card--focus {
|
||||
box-shadow: 0 0 0 4px rgba(75, 15, 36, 0.08);
|
||||
}
|
||||
|
||||
.product-grid {
|
||||
display: grid;
|
||||
gap: 20px;
|
||||
@ -594,6 +895,80 @@ code {
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.image-bg-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, minmax(0, 1fr));
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.image-bg-card {
|
||||
min-width: 0;
|
||||
padding: 16px;
|
||||
border: 1px solid rgba(102, 96, 95, 0.16);
|
||||
border-radius: var(--radius-sm);
|
||||
background: var(--color-white);
|
||||
box-shadow: var(--shadow-soft);
|
||||
display: grid;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.image-bg-preview {
|
||||
min-height: 190px;
|
||||
border-radius: var(--radius-sm);
|
||||
overflow: hidden;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
}
|
||||
|
||||
.image-bg-preview img {
|
||||
width: auto;
|
||||
max-width: 120px;
|
||||
height: 164px;
|
||||
object-fit: contain;
|
||||
border: 0;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.product-image--gold {
|
||||
background: linear-gradient(135deg, #b9965b 0%, #d7c18b 48%, #eef2f6 100%);
|
||||
}
|
||||
|
||||
.product-image--wine {
|
||||
background: linear-gradient(135deg, #6d1c36 0%, #9b5366 46%, #e6dce1 100%);
|
||||
}
|
||||
|
||||
.product-image--green {
|
||||
background: linear-gradient(135deg, #1f4d3a 0%, #88a28e 48%, #eef2e5 100%);
|
||||
}
|
||||
|
||||
.image-bg-preview--neutral {
|
||||
background: linear-gradient(135deg, #eef2f6 0%, #dde6ef 100%);
|
||||
}
|
||||
|
||||
.image-bg-card span {
|
||||
color: var(--color-accent-gold);
|
||||
font-size: 12px;
|
||||
font-weight: 800;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.image-bg-card p {
|
||||
margin: 0;
|
||||
color: var(--color-gray-600);
|
||||
font-size: 14px;
|
||||
line-height: 1.45;
|
||||
}
|
||||
|
||||
.image-bg-card code {
|
||||
padding: 10px;
|
||||
border-radius: var(--radius-sm);
|
||||
background: #eef2f6;
|
||||
color: var(--color-primary-wine-100);
|
||||
font-size: 12px;
|
||||
line-height: 1.45;
|
||||
white-space: normal;
|
||||
}
|
||||
|
||||
.header-demo {
|
||||
padding: 16px;
|
||||
border-radius: var(--radius-sm);
|
||||
@ -783,49 +1158,134 @@ tbody tr:hover {
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.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: 48px;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.screen-preview__content {
|
||||
padding: 24px;
|
||||
.template-spec-grid {
|
||||
margin-top: 24px;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.screen-preview__content span {
|
||||
min-height: 110px;
|
||||
.template-spec {
|
||||
min-width: 0;
|
||||
padding: 20px;
|
||||
border: 1px solid rgba(102, 96, 95, 0.16);
|
||||
border-radius: var(--radius-sm);
|
||||
background: #e8edf3;
|
||||
background: var(--color-white);
|
||||
box-shadow: var(--shadow-soft);
|
||||
display: grid;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.template-spec span {
|
||||
color: var(--color-accent-gold);
|
||||
font-size: 12px;
|
||||
font-weight: 800;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.template-spec h3 {
|
||||
margin: 0;
|
||||
font-size: 22px;
|
||||
line-height: 1.12;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.template-spec p {
|
||||
margin: 0;
|
||||
color: var(--color-gray-600);
|
||||
font-size: 14px;
|
||||
line-height: 1.48;
|
||||
}
|
||||
|
||||
.template-spec a {
|
||||
color: var(--color-primary-wine-100);
|
||||
font-weight: 800;
|
||||
text-decoration: underline;
|
||||
text-underline-offset: 3px;
|
||||
}
|
||||
|
||||
.template-spec em {
|
||||
margin-top: 4px;
|
||||
color: var(--color-primary-wine-100);
|
||||
font-size: 13px;
|
||||
font-style: normal;
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
.screen-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||||
gap: 18px;
|
||||
}
|
||||
|
||||
.screen-card {
|
||||
min-height: 230px;
|
||||
padding: 20px;
|
||||
border: 1px solid rgba(102, 96, 95, 0.16);
|
||||
border-radius: var(--radius-sm);
|
||||
background:
|
||||
linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(255, 255, 255, 0.98)),
|
||||
var(--screen-accent, #eef2f6);
|
||||
box-shadow: var(--shadow-soft);
|
||||
display: grid;
|
||||
align-content: space-between;
|
||||
gap: 18px;
|
||||
transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
|
||||
}
|
||||
|
||||
.screen-card:hover {
|
||||
border-color: rgba(75, 15, 36, 0.28);
|
||||
box-shadow: 0 22px 54px rgba(25, 37, 62, 0.13);
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
|
||||
.screen-card span {
|
||||
color: var(--color-accent-gold);
|
||||
font-size: 12px;
|
||||
font-weight: 800;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.screen-card strong {
|
||||
color: var(--color-neutral-black);
|
||||
font-family: var(--font-heading);
|
||||
font-size: 24px;
|
||||
line-height: 1.1;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.screen-card p {
|
||||
margin: 0;
|
||||
color: var(--color-gray-600);
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.screen-card--home {
|
||||
--screen-accent: linear-gradient(135deg, #4b0f24, #b9965b);
|
||||
}
|
||||
|
||||
.screen-card--catalog {
|
||||
--screen-accent: linear-gradient(135deg, #eef2f6, #d9dee6);
|
||||
}
|
||||
|
||||
.screen-card--product,
|
||||
.screen-card--cards {
|
||||
--screen-accent: linear-gradient(135deg, #6d1c36, #e6dce1);
|
||||
}
|
||||
|
||||
.screen-card--news,
|
||||
.screen-card--guidelines {
|
||||
--screen-accent: linear-gradient(135deg, #1f4d3a, #e8eadb);
|
||||
}
|
||||
|
||||
.screen-card--about,
|
||||
.screen-card--contacts,
|
||||
.screen-card--auth {
|
||||
--screen-accent: linear-gradient(135deg, #1f3476, #dde4ec);
|
||||
}
|
||||
|
||||
.screen-qa-grid {
|
||||
margin-top: 24px;
|
||||
}
|
||||
|
||||
@media (max-width: 1100px) {
|
||||
@ -851,7 +1311,15 @@ tbody tr:hover {
|
||||
}
|
||||
|
||||
.swatch-grid,
|
||||
.template-grid {
|
||||
.shadow-grid,
|
||||
.image-bg-grid,
|
||||
.icon-style-grid,
|
||||
.status-grid,
|
||||
.production-rules,
|
||||
.checklist-grid,
|
||||
.template-grid,
|
||||
.template-spec-grid,
|
||||
.screen-grid {
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
}
|
||||
}
|
||||
@ -883,9 +1351,16 @@ tbody tr:hover {
|
||||
}
|
||||
|
||||
.swatch-grid,
|
||||
.shadow-grid,
|
||||
.image-bg-grid,
|
||||
.icon-style-grid,
|
||||
.status-grid,
|
||||
.production-rules,
|
||||
.checklist-grid,
|
||||
.product-grid--3,
|
||||
.template-grid,
|
||||
.screen-preview__content,
|
||||
.template-spec-grid,
|
||||
.screen-grid,
|
||||
.token-grid,
|
||||
.spec-grid {
|
||||
grid-template-columns: 1fr;
|
||||
@ -909,11 +1384,7 @@ tbody tr:hover {
|
||||
grid-column: auto;
|
||||
}
|
||||
|
||||
.screen-preview__hero {
|
||||
padding: 28px;
|
||||
}
|
||||
|
||||
.screen-preview__hero h3 {
|
||||
font-size: 36px;
|
||||
.screen-card {
|
||||
min-height: 190px;
|
||||
}
|
||||
}
|
||||
|
||||
90
index.html
90
index.html
@ -165,6 +165,7 @@
|
||||
<a href="news-villa-raiano.html">Новости</a>
|
||||
<a href="about.html">О компании</a>
|
||||
<a href="contacts.html">Контакты</a>
|
||||
<a href="contacts-auth.html">Контакты auth</a>
|
||||
<div class="nav-item">
|
||||
<button class="nav-trigger" type="button" aria-expanded="false">UI-kit <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="UI-kit">
|
||||
@ -183,6 +184,7 @@
|
||||
<article class="menu-column">
|
||||
<p class="section-title">Demo pages</p>
|
||||
<a href="index.html">Главная</a><a href="catalog.html">Каталог</a><a href="product.html">Карточка товара</a><a href="bottle-cards.html">Варианты карточек</a><a href="news-villa-raiano.html">Новость</a><a href="news-villa-raiano-v2.html">Новость v2</a><a href="article-guidelines.html">Ред. гайд</a><a href="about.html">О компании</a><a href="contacts.html">Контакты</a>
|
||||
<a href="contacts-auth.html">Контакты auth</a>
|
||||
</article>
|
||||
<article class="menu-column">
|
||||
<p class="section-title">UI-kit sections</p>
|
||||
@ -265,7 +267,7 @@
|
||||
</div>
|
||||
<div class="product-grid">
|
||||
<article class="product-card">
|
||||
<div class="product-media"><img class="product-photo" src="assets/images/00073820_1.png" alt="Chateau Laroque Grand Cru" /></div>
|
||||
<div class="product-media"><img class="product-photo" src="assets/images/00081538_1.png" alt="Chateau Laroque Grand Cru" /></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>
|
||||
@ -285,22 +287,78 @@
|
||||
</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="contacts.html">Связаться с менеджером</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="about.html">О компании</a></li><li><a href="contacts.html">Контакты</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 class="container footer-container">
|
||||
<section class="footer-main">
|
||||
<div class="footer-brand-block">
|
||||
<a class="footer-brand" 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>
|
||||
<p class="footer-brand-subtitle">Территория качественного вина</p>
|
||||
</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="about.html">О компании</a></li>
|
||||
<li><a href="contacts.html">Контакты</a></li>
|
||||
<li><a href="contacts-auth.html">Контакты auth</a></li>
|
||||
<li><a href="#">Склады</a></li>
|
||||
<li><a href="#">Реквизиты</a></li>
|
||||
</ul>
|
||||
</article>
|
||||
</section>
|
||||
|
||||
<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>
|
||||
<div class="social-links" aria-label="Социальные сети">
|
||||
<a href="#" aria-label="Telegram">
|
||||
<svg viewBox="0 0 24 24" aria-hidden="true">
|
||||
<path d="M21 4 3 11.2l6.3 2.2L18 7.7l-6.8 7.1.2 5.2 3-3.3 4.7 3.5L21 4Z" />
|
||||
</svg>
|
||||
</a>
|
||||
<a href="#" aria-label="VK">
|
||||
<svg viewBox="0 0 24 24" aria-hidden="true">
|
||||
<path d="M4 7h3l2 4.2c.5 1.1 1 1.6 1.3 1.6.2 0 .4-.3.4-1V7h3v3.7c0 .4.2.6.5.6.6 0 1.8-1.6 2.6-4.3H20c-.7 3-1.8 4.8-3 5.7 1.2.8 2.4 2.2 3.2 4.3h-3.4c-.8-1.5-1.8-2.7-2.5-2.7-.4 0-.6.3-.6.8V17h-1.5C8.8 17 6.2 13.9 4 7Z" />
|
||||
</svg>
|
||||
</a>
|
||||
</div>
|
||||
</footer>
|
||||
</article>
|
||||
|
||||
<section class="footer-legal" aria-label="Правовая информация">
|
||||
<p>
|
||||
Интернет-витрина размещает информацию об алкогольной продукции исключительно в целях ознакомления.
|
||||
Дистанционная продажа алкогольной продукции не осуществляется.
|
||||
<a href="#">Подробнее о правовой информации</a>
|
||||
</p>
|
||||
<p>© 2026 DP-Trade</p>
|
||||
</section>
|
||||
</section>
|
||||
</div>
|
||||
</footer>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@ -165,6 +165,7 @@
|
||||
<a href="news-villa-raiano.html">Новости</a>
|
||||
<a href="about.html">О компании</a>
|
||||
<a href="contacts.html">Контакты</a>
|
||||
<a href="contacts-auth.html">Контакты auth</a>
|
||||
<div class="nav-item">
|
||||
<button class="nav-trigger" type="button" aria-expanded="false">UI-kit <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="UI-kit">
|
||||
@ -183,6 +184,7 @@
|
||||
<article class="menu-column">
|
||||
<p class="section-title">Demo pages</p>
|
||||
<a href="index.html">Главная</a><a href="catalog.html">Каталог</a><a href="product.html">Карточка товара</a><a href="bottle-cards.html">Варианты карточек</a><a href="news-villa-raiano.html">Новость</a><a href="news-villa-raiano-v2.html">Новость v2</a><a href="article-guidelines.html">Ред. гайд</a><a href="about.html">О компании</a><a href="contacts.html">Контакты</a>
|
||||
<a href="contacts-auth.html">Контакты auth</a>
|
||||
</article>
|
||||
<article class="menu-column">
|
||||
<p class="section-title">UI-kit sections</p>
|
||||
@ -271,22 +273,78 @@
|
||||
</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="contacts.html">Связаться с менеджером</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="about.html">О компании</a></li><li><a href="contacts.html">Контакты</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 class="container footer-container">
|
||||
<section class="footer-main">
|
||||
<div class="footer-brand-block">
|
||||
<a class="footer-brand" 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>
|
||||
<p class="footer-brand-subtitle">Территория качественного вина</p>
|
||||
</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="about.html">О компании</a></li>
|
||||
<li><a href="contacts.html">Контакты</a></li>
|
||||
<li><a href="contacts-auth.html">Контакты auth</a></li>
|
||||
<li><a href="#">Склады</a></li>
|
||||
<li><a href="#">Реквизиты</a></li>
|
||||
</ul>
|
||||
</article>
|
||||
</section>
|
||||
|
||||
<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>
|
||||
<div class="social-links" aria-label="Социальные сети">
|
||||
<a href="#" aria-label="Telegram">
|
||||
<svg viewBox="0 0 24 24" aria-hidden="true">
|
||||
<path d="M21 4 3 11.2l6.3 2.2L18 7.7l-6.8 7.1.2 5.2 3-3.3 4.7 3.5L21 4Z" />
|
||||
</svg>
|
||||
</a>
|
||||
<a href="#" aria-label="VK">
|
||||
<svg viewBox="0 0 24 24" aria-hidden="true">
|
||||
<path d="M4 7h3l2 4.2c.5 1.1 1 1.6 1.3 1.6.2 0 .4-.3.4-1V7h3v3.7c0 .4.2.6.5.6.6 0 1.8-1.6 2.6-4.3H20c-.7 3-1.8 4.8-3 5.7 1.2.8 2.4 2.2 3.2 4.3h-3.4c-.8-1.5-1.8-2.7-2.5-2.7-.4 0-.6.3-.6.8V17h-1.5C8.8 17 6.2 13.9 4 7Z" />
|
||||
</svg>
|
||||
</a>
|
||||
</div>
|
||||
</footer>
|
||||
</article>
|
||||
|
||||
<section class="footer-legal" aria-label="Правовая информация">
|
||||
<p>
|
||||
Интернет-витрина размещает информацию об алкогольной продукции исключительно в целях ознакомления.
|
||||
Дистанционная продажа алкогольной продукции не осуществляется.
|
||||
<a href="#">Подробнее о правовой информации</a>
|
||||
</p>
|
||||
<p>© 2026 DP-Trade</p>
|
||||
</section>
|
||||
</section>
|
||||
</div>
|
||||
</footer>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@ -165,6 +165,7 @@
|
||||
<a href="news-villa-raiano.html">Новости</a>
|
||||
<a href="about.html">О компании</a>
|
||||
<a href="contacts.html">Контакты</a>
|
||||
<a href="contacts-auth.html">Контакты auth</a>
|
||||
<div class="nav-item">
|
||||
<button class="nav-trigger" type="button" aria-expanded="false">UI-kit <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="UI-kit">
|
||||
@ -183,6 +184,7 @@
|
||||
<article class="menu-column">
|
||||
<p class="section-title">Demo pages</p>
|
||||
<a href="index.html">Главная</a><a href="catalog.html">Каталог</a><a href="product.html">Карточка товара</a><a href="bottle-cards.html">Варианты карточек</a><a href="news-villa-raiano.html">Новость</a><a href="news-villa-raiano-v2.html">Новость v2</a><a href="article-guidelines.html">Ред. гайд</a><a href="about.html">О компании</a><a href="contacts.html">Контакты</a>
|
||||
<a href="contacts-auth.html">Контакты auth</a>
|
||||
</article>
|
||||
<article class="menu-column">
|
||||
<p class="section-title">UI-kit sections</p>
|
||||
@ -246,22 +248,78 @@
|
||||
</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="contacts.html">Связаться с менеджером</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="about.html">О компании</a></li><li><a href="contacts.html">Контакты</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 class="container footer-container">
|
||||
<section class="footer-main">
|
||||
<div class="footer-brand-block">
|
||||
<a class="footer-brand" 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>
|
||||
<p class="footer-brand-subtitle">Территория качественного вина</p>
|
||||
</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="about.html">О компании</a></li>
|
||||
<li><a href="contacts.html">Контакты</a></li>
|
||||
<li><a href="contacts-auth.html">Контакты auth</a></li>
|
||||
<li><a href="#">Склады</a></li>
|
||||
<li><a href="#">Реквизиты</a></li>
|
||||
</ul>
|
||||
</article>
|
||||
</section>
|
||||
|
||||
<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>
|
||||
<div class="social-links" aria-label="Социальные сети">
|
||||
<a href="#" aria-label="Telegram">
|
||||
<svg viewBox="0 0 24 24" aria-hidden="true">
|
||||
<path d="M21 4 3 11.2l6.3 2.2L18 7.7l-6.8 7.1.2 5.2 3-3.3 4.7 3.5L21 4Z" />
|
||||
</svg>
|
||||
</a>
|
||||
<a href="#" aria-label="VK">
|
||||
<svg viewBox="0 0 24 24" aria-hidden="true">
|
||||
<path d="M4 7h3l2 4.2c.5 1.1 1 1.6 1.3 1.6.2 0 .4-.3.4-1V7h3v3.7c0 .4.2.6.5.6.6 0 1.8-1.6 2.6-4.3H20c-.7 3-1.8 4.8-3 5.7 1.2.8 2.4 2.2 3.2 4.3h-3.4c-.8-1.5-1.8-2.7-2.5-2.7-.4 0-.6.3-.6.8V17h-1.5C8.8 17 6.2 13.9 4 7Z" />
|
||||
</svg>
|
||||
</a>
|
||||
</div>
|
||||
</footer>
|
||||
</article>
|
||||
|
||||
<section class="footer-legal" aria-label="Правовая информация">
|
||||
<p>
|
||||
Интернет-витрина размещает информацию об алкогольной продукции исключительно в целях ознакомления.
|
||||
Дистанционная продажа алкогольной продукции не осуществляется.
|
||||
<a href="#">Подробнее о правовой информации</a>
|
||||
</p>
|
||||
<p>© 2026 DP-Trade</p>
|
||||
</section>
|
||||
</section>
|
||||
</div>
|
||||
</footer>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
90
product.html
90
product.html
@ -165,6 +165,7 @@
|
||||
<a href="news-villa-raiano.html">Новости</a>
|
||||
<a href="about.html">О компании</a>
|
||||
<a href="contacts.html">Контакты</a>
|
||||
<a href="contacts-auth.html">Контакты auth</a>
|
||||
<div class="nav-item">
|
||||
<button class="nav-trigger" type="button" aria-expanded="false">UI-kit <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="UI-kit">
|
||||
@ -183,6 +184,7 @@
|
||||
<article class="menu-column">
|
||||
<p class="section-title">Demo pages</p>
|
||||
<a href="index.html">Главная</a><a href="catalog.html">Каталог</a><a href="product.html">Карточка товара</a><a href="bottle-cards.html">Варианты карточек</a><a href="news-villa-raiano.html">Новость</a><a href="news-villa-raiano-v2.html">Новость v2</a><a href="article-guidelines.html">Ред. гайд</a><a href="about.html">О компании</a><a href="contacts.html">Контакты</a>
|
||||
<a href="contacts-auth.html">Контакты auth</a>
|
||||
</article>
|
||||
<article class="menu-column">
|
||||
<p class="section-title">UI-kit sections</p>
|
||||
@ -200,7 +202,7 @@
|
||||
|
||||
<main class="section">
|
||||
<div class="container product-detail">
|
||||
<div class="product-media"><img class="product-photo" src="assets/images/00073820_1.png" alt="Chateau Laroque Grand Cru" /></div>
|
||||
<div class="product-media"><img class="product-photo" src="assets/images/00081538_1.png" alt="Chateau Laroque Grand Cru" /></div>
|
||||
<section class="detail-copy">
|
||||
<p class="eyebrow">Product / Default</p>
|
||||
<h1>Chateau Laroque Grand Cru</h1>
|
||||
@ -220,22 +222,78 @@
|
||||
</div>
|
||||
</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="contacts.html">Связаться с менеджером</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="about.html">О компании</a></li><li><a href="contacts.html">Контакты</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 class="container footer-container">
|
||||
<section class="footer-main">
|
||||
<div class="footer-brand-block">
|
||||
<a class="footer-brand" 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>
|
||||
<p class="footer-brand-subtitle">Территория качественного вина</p>
|
||||
</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="about.html">О компании</a></li>
|
||||
<li><a href="contacts.html">Контакты</a></li>
|
||||
<li><a href="contacts-auth.html">Контакты auth</a></li>
|
||||
<li><a href="#">Склады</a></li>
|
||||
<li><a href="#">Реквизиты</a></li>
|
||||
</ul>
|
||||
</article>
|
||||
</section>
|
||||
|
||||
<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>
|
||||
<div class="social-links" aria-label="Социальные сети">
|
||||
<a href="#" aria-label="Telegram">
|
||||
<svg viewBox="0 0 24 24" aria-hidden="true">
|
||||
<path d="M21 4 3 11.2l6.3 2.2L18 7.7l-6.8 7.1.2 5.2 3-3.3 4.7 3.5L21 4Z" />
|
||||
</svg>
|
||||
</a>
|
||||
<a href="#" aria-label="VK">
|
||||
<svg viewBox="0 0 24 24" aria-hidden="true">
|
||||
<path d="M4 7h3l2 4.2c.5 1.1 1 1.6 1.3 1.6.2 0 .4-.3.4-1V7h3v3.7c0 .4.2.6.5.6.6 0 1.8-1.6 2.6-4.3H20c-.7 3-1.8 4.8-3 5.7 1.2.8 2.4 2.2 3.2 4.3h-3.4c-.8-1.5-1.8-2.7-2.5-2.7-.4 0-.6.3-.6.8V17h-1.5C8.8 17 6.2 13.9 4 7Z" />
|
||||
</svg>
|
||||
</a>
|
||||
</div>
|
||||
</footer>
|
||||
</article>
|
||||
|
||||
<section class="footer-legal" aria-label="Правовая информация">
|
||||
<p>
|
||||
Интернет-витрина размещает информацию об алкогольной продукции исключительно в целях ознакомления.
|
||||
Дистанционная продажа алкогольной продукции не осуществляется.
|
||||
<a href="#">Подробнее о правовой информации</a>
|
||||
</p>
|
||||
<p>© 2026 DP-Trade</p>
|
||||
</section>
|
||||
</section>
|
||||
</div>
|
||||
</footer>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
732
ui-kit.html
732
ui-kit.html
@ -23,24 +23,48 @@
|
||||
</a>
|
||||
<nav class="side-nav" aria-label="Разделы UI-kit">
|
||||
<div class="side-nav__group">
|
||||
<span>Demo pages</span>
|
||||
<a href="index.html">Главная</a>
|
||||
<a href="catalog.html">Каталог</a>
|
||||
<a href="product.html">Карточка товара</a>
|
||||
<a href="bottle-cards.html">Варианты карточек</a>
|
||||
<a href="news-villa-raiano.html">Новость</a>
|
||||
<a href="news-villa-raiano-v2.html">Новость v2</a>
|
||||
<a href="article-guidelines.html">Ред. гайд</a>
|
||||
<a href="about.html">О компании</a>
|
||||
<a href="contacts.html">Контакты</a>
|
||||
<span>00 Status</span>
|
||||
<a href="#production-status">Production Status</a>
|
||||
</div>
|
||||
<div class="side-nav__group">
|
||||
<span>UI-kit</span>
|
||||
<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>
|
||||
<span>01 Foundations</span>
|
||||
<a href="#foundations">Overview</a>
|
||||
<a href="#colors">Colors</a>
|
||||
<a href="#typography">Typography</a>
|
||||
<a href="#grid-spacing">Grid & Spacing</a>
|
||||
<a href="#tokens">Tokens</a>
|
||||
<a href="#shadows">Elevation & Shadows</a>
|
||||
</div>
|
||||
<div class="side-nav__group">
|
||||
<span>02 Components</span>
|
||||
<a href="#components">Overview</a>
|
||||
<a href="#buttons">Buttons</a>
|
||||
<a href="#icons">Icon Styles</a>
|
||||
<a href="#product-card">Product Card</a>
|
||||
<a href="#catalog-list-cards">Catalog List Cards</a>
|
||||
<a href="#image-backgrounds">Image Backgrounds</a>
|
||||
<a href="#editorial-components">Editorial Components</a>
|
||||
<a href="#navigation">Navigation</a>
|
||||
<a href="#controls">Controls</a>
|
||||
<a href="#tables">Tables / B2B</a>
|
||||
</div>
|
||||
<div class="side-nav__group">
|
||||
<span>03 Patterns</span>
|
||||
<a href="#patterns">Overview</a>
|
||||
<a href="#catalog-patterns">Catalog Patterns</a>
|
||||
<a href="#content-patterns">Content & Inner Pages</a>
|
||||
</div>
|
||||
<div class="side-nav__group">
|
||||
<span>04 Templates</span>
|
||||
<a href="#templates">Templates</a>
|
||||
</div>
|
||||
<div class="side-nav__group">
|
||||
<span>05 Screens</span>
|
||||
<a href="#screens">Screens</a>
|
||||
</div>
|
||||
<div class="side-nav__group">
|
||||
<span>06 Handoff</span>
|
||||
<a href="#handoff-checklist">Handoff Checklist</a>
|
||||
</div>
|
||||
</nav>
|
||||
</aside>
|
||||
@ -62,7 +86,7 @@
|
||||
<div class="kit-hero__visual" aria-label="Пример карточки продукта">
|
||||
<article class="product-card product-card--featured">
|
||||
<div class="product-media product-media--wine">
|
||||
<img class="product-photo" src="assets/images/00073820_1.png" alt="Product bottle" />
|
||||
<img class="product-photo" src="assets/images/00081538_1.png" alt="Product bottle" />
|
||||
</div>
|
||||
<div class="product-meta">
|
||||
<span class="tag tag--filled">Bordeaux</span>
|
||||
@ -77,13 +101,136 @@
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<section id="production-status" class="section">
|
||||
<div class="section-heading section-heading--split">
|
||||
<div>
|
||||
<p class="eyebrow">00 Production Status</p>
|
||||
<h2>Статус дизайн-системы</h2>
|
||||
</div>
|
||||
<p>Этот блок показывает, насколько UI-kit готов к production handoff: что можно использовать сразу, что требует детализации, и какие правила обязательны для новых экранов.</p>
|
||||
</div>
|
||||
<div class="status-grid">
|
||||
<article class="status-card status-card--ready">
|
||||
<span>Ready</span>
|
||||
<strong>Catalog List Cards</strong>
|
||||
<p>Есть варианты, состояния, фоны изображений, shadows и реальная страница для проверки.</p>
|
||||
</article>
|
||||
<article class="status-card status-card--ready">
|
||||
<span>Ready</span>
|
||||
<strong>Navigation / Mega-menu</strong>
|
||||
<p>Header, dropdown, hover bridge, ширина контейнера и базовые состояния зафиксированы.</p>
|
||||
</article>
|
||||
<article class="status-card status-card--ready">
|
||||
<span>Ready</span>
|
||||
<strong>Foundations</strong>
|
||||
<p>Цветовые роли, типографика, сетка, spacing, tokens и shadows описаны для dev handoff.</p>
|
||||
</article>
|
||||
<article class="status-card status-card--review">
|
||||
<span>Review</span>
|
||||
<strong>Forms / Inputs</strong>
|
||||
<p>Есть default/focus/error, но нужны helper text, required, disabled, textarea и validation patterns.</p>
|
||||
</article>
|
||||
<article class="status-card status-card--ready">
|
||||
<span>Ready</span>
|
||||
<strong>Templates</strong>
|
||||
<p>Шаблоны описывают обязательные блоки, компоненты, screen-ссылки и статус готовности.</p>
|
||||
</article>
|
||||
<article class="status-card status-card--review">
|
||||
<span>Review</span>
|
||||
<strong>Responsive QA</strong>
|
||||
<p>Есть checklist и адаптивные правила, но перед релизом нужен визуальный проход по всем страницам.</p>
|
||||
</article>
|
||||
</div>
|
||||
<div class="production-rules">
|
||||
<article>
|
||||
<span>Production rule</span>
|
||||
<p>Новый компонент нельзя считать готовым без anatomy, variants, states, usage, CSS hook и responsive notes.</p>
|
||||
</article>
|
||||
<article>
|
||||
<span>Screen rule</span>
|
||||
<p>Новый экран должен быть связан с template, иметь статус, ссылку на HTML и список QA-проверок.</p>
|
||||
</article>
|
||||
<article>
|
||||
<span>Content rule</span>
|
||||
<p>Все изображения должны иметь понятный alt, стабильные размеры контейнера и не ломать layout на mobile.</p>
|
||||
</article>
|
||||
</div>
|
||||
<div class="subsection">
|
||||
<h3>Readiness Matrix</h3>
|
||||
<div class="table-wrap">
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Раздел</th>
|
||||
<th>Anatomy</th>
|
||||
<th>States</th>
|
||||
<th>Usage</th>
|
||||
<th>Responsive</th>
|
||||
<th>Status</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>Foundations</td>
|
||||
<td>Да</td>
|
||||
<td>Да</td>
|
||||
<td>Да</td>
|
||||
<td>Да</td>
|
||||
<td>Ready</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Buttons</td>
|
||||
<td>Да</td>
|
||||
<td>Partial</td>
|
||||
<td>Да</td>
|
||||
<td>Да</td>
|
||||
<td>Review</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Product Cards</td>
|
||||
<td>Да</td>
|
||||
<td>Да</td>
|
||||
<td>Да</td>
|
||||
<td>Да</td>
|
||||
<td>Ready</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Navigation</td>
|
||||
<td>Да</td>
|
||||
<td>Partial</td>
|
||||
<td>Да</td>
|
||||
<td>Partial</td>
|
||||
<td>Review</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Forms / Controls</td>
|
||||
<td>Да</td>
|
||||
<td>Partial</td>
|
||||
<td>Да</td>
|
||||
<td>Да</td>
|
||||
<td>Review</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Templates / Screens</td>
|
||||
<td>Да</td>
|
||||
<td>Да</td>
|
||||
<td>Да</td>
|
||||
<td>Да</td>
|
||||
<td>Ready</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="foundations" class="section">
|
||||
<div class="section-heading">
|
||||
<p class="eyebrow">01 Foundations</p>
|
||||
<h2>База системы</h2>
|
||||
</div>
|
||||
|
||||
<div class="subsection">
|
||||
<div id="colors" class="subsection">
|
||||
<h3>Colors</h3>
|
||||
<div class="swatch-grid">
|
||||
<article class="swatch">
|
||||
@ -122,9 +269,27 @@
|
||||
<code>#B9965B</code>
|
||||
</article>
|
||||
</div>
|
||||
<div class="spec-grid">
|
||||
<article class="spec-card">
|
||||
<span>Text roles</span>
|
||||
<p>`color.text.primary` = #161616 для заголовков и основного текста. `color.text.muted` = #66605F для meta, captions, описаний и вторичных ссылок.</p>
|
||||
</article>
|
||||
<article class="spec-card">
|
||||
<span>Surface roles</span>
|
||||
<p>`color.background.base` = #F4F6F9 для страницы. `color.surface.default` = #FFFFFF для карточек, форм, таблиц и dropdown.</p>
|
||||
</article>
|
||||
<article class="spec-card">
|
||||
<span>Brand roles</span>
|
||||
<p>`color.primary.wine.100` для CTA, активных состояний и важных ссылок. `color.accent.gold` для labels, eyebrow и editorial accents.</p>
|
||||
</article>
|
||||
<article class="spec-card">
|
||||
<span>State roles</span>
|
||||
<p>Error использует #A33A2F. Success/review/draft пока локальные в UI-kit; перед разработкой их нужно вынести в state tokens.</p>
|
||||
</article>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="subsection typography-specimen">
|
||||
<div id="typography" class="subsection typography-specimen">
|
||||
<h3>Typography</h3>
|
||||
<div class="type-row">
|
||||
<span>Text / Heading / H1 / Montserrat / 48 / 56</span>
|
||||
@ -146,9 +311,27 @@
|
||||
<span>Text / Label / Caps / Inter / 12 / 16</span>
|
||||
<p class="text-label">FEATURED REGION</p>
|
||||
</div>
|
||||
<div class="spec-grid">
|
||||
<article class="spec-card">
|
||||
<span>Hero / H1</span>
|
||||
<p>Montserrat 700-800, uppercase, clamp 44-78px, line-height около 0.98-1.08. Используется на главной и крупных внутренних hero.</p>
|
||||
</article>
|
||||
<article class="spec-card">
|
||||
<span>Catalog / Product title</span>
|
||||
<p>Montserrat 800, 22-32px для list-card. Не использовать uppercase в текущем каталоге, чтобы длинные названия читались легче.</p>
|
||||
</article>
|
||||
<article class="spec-card">
|
||||
<span>Article / Lead</span>
|
||||
<p>Inter 22-30px, line-height 1.38-1.48. Используется как первый смысловой абзац в редакционных материалах.</p>
|
||||
</article>
|
||||
<article class="spec-card">
|
||||
<span>Button / Label</span>
|
||||
<p>Inter 700-800, 14-16px. Текст должен помещаться без переноса на desktop; на mobile кнопка может становиться full-width.</p>
|
||||
</article>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="subsection">
|
||||
<div id="grid-spacing" 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>
|
||||
@ -163,6 +346,20 @@
|
||||
<span style="--space: 48px">48</span>
|
||||
<span style="--space: 64px">64</span>
|
||||
</div>
|
||||
<div class="spec-grid">
|
||||
<article class="spec-card">
|
||||
<span>Container</span>
|
||||
<p>`--container: 1240px`. Desktop width: `min(100% - 40px, var(--container))`; mobile width: `min(100% - 28px, var(--container))`.</p>
|
||||
</article>
|
||||
<article class="spec-card">
|
||||
<span>Breakpoints</span>
|
||||
<p>Desktop default. Tablet: max-width 1080/1100px. Mobile: max-width 720/760px depending on site vs UI-kit shell.</p>
|
||||
</article>
|
||||
<article class="spec-card">
|
||||
<span>Spacing rule</span>
|
||||
<p>Компоненты: 8-16px gap. Карточки/формы: 16-24px padding. Секции: 56-72px vertical padding.</p>
|
||||
</article>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="tokens" class="subsection">
|
||||
@ -173,6 +370,75 @@
|
||||
<code>spacing.md = 16px</code>
|
||||
<code>radius.sm = 8px</code>
|
||||
<code>shadow.soft = 0 12px 32px rgba(22,22,22,.08)</code>
|
||||
<code>shadow.lift = 0 20px 52px rgba(75,15,36,.14)</code>
|
||||
</div>
|
||||
<div class="spec-grid">
|
||||
<article class="spec-card">
|
||||
<span>Color tokens</span>
|
||||
<p>`color.primary.wine.100`, `color.primary.wine.80`, `color.accent.gold`, `color.accent.blue`, `color.background.base`, `color.surface.default`.</p>
|
||||
</article>
|
||||
<article class="spec-card">
|
||||
<span>Layout tokens</span>
|
||||
<p>`container.max = 1240px`, `spacing.4/8/16/24/32/48/64`, `radius.sm = 8px`, `radius.md = 12px`, `radius.lg = 24px`.</p>
|
||||
</article>
|
||||
<article class="spec-card">
|
||||
<span>Typography tokens</span>
|
||||
<p>`font.heading = Montserrat`, `font.body = Inter`. Размеры текста хранятся как semantic styles, а не только raw px.</p>
|
||||
</article>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="shadows" class="subsection">
|
||||
<h3>Elevation & Shadows</h3>
|
||||
<div class="shadow-grid">
|
||||
<article class="shadow-card shadow-card--none">
|
||||
<span>Shadow / None</span>
|
||||
<strong>none</strong>
|
||||
<p>Изображения бутылок, прозрачные PNG/JPG внутри карточек, плоские служебные элементы.</p>
|
||||
<code>box-shadow: none;</code>
|
||||
</article>
|
||||
<article class="shadow-card shadow-card--header">
|
||||
<span>Shadow / Header / Sticky</span>
|
||||
<strong>Navigation depth</strong>
|
||||
<p>Только для sticky header: лёгкое отделение от контента при скролле.</p>
|
||||
<code>0 10px 28px rgba(22,22,22,.05)</code>
|
||||
</article>
|
||||
<article class="shadow-card shadow-card--soft">
|
||||
<span>Shadow / Soft</span>
|
||||
<strong>Base surface</strong>
|
||||
<p>Основной токен для карточек, footer-контейнера, форм, contact panels и info-card.</p>
|
||||
<code>0 12px 32px rgba(22,22,22,.08)</code>
|
||||
</article>
|
||||
<article class="shadow-card shadow-card--card">
|
||||
<span>Shadow / Card / Product</span>
|
||||
<strong>Product card</strong>
|
||||
<p>Для bottle-card и визуальных карточек с изображением, когда нужно чуть больше воздуха.</p>
|
||||
<code>0 18px 46px rgba(18,25,38,.08)</code>
|
||||
</article>
|
||||
<article class="shadow-card shadow-card--hover">
|
||||
<span>Shadow / Card / Hover</span>
|
||||
<strong>Interactive lift</strong>
|
||||
<p>Hover/active состояние list-card. Используется вместе с border-color, без изменения размеров.</p>
|
||||
<code>0 22px 54px rgba(25,37,62,.13)</code>
|
||||
</article>
|
||||
<article class="shadow-card shadow-card--lift">
|
||||
<span>Shadow / Lift</span>
|
||||
<strong>Mega-menu</strong>
|
||||
<p>Высокий слой: dropdown, mega-menu, временно поднятые панели.</p>
|
||||
<code>0 20px 52px rgba(75,15,36,.14)</code>
|
||||
</article>
|
||||
<article class="shadow-card shadow-card--editorial">
|
||||
<span>Shadow / Editorial / Image</span>
|
||||
<strong>Hero media</strong>
|
||||
<p>Крупные изображения в статье, где фото должно отделяться от фона страницы.</p>
|
||||
<code>0 22px 58px rgba(25,37,62,.12)</code>
|
||||
</article>
|
||||
<article class="shadow-card shadow-card--focus">
|
||||
<span>Shadow / Focus Ring</span>
|
||||
<strong>Input focus</strong>
|
||||
<p>Не декоративная тень, а доступное состояние focus для search/input.</p>
|
||||
<code>0 0 0 4px rgba(75,15,36,.08)</code>
|
||||
</article>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
@ -184,6 +450,24 @@
|
||||
</div>
|
||||
|
||||
<div class="subsection">
|
||||
<h3>Component Readiness</h3>
|
||||
<div class="spec-grid">
|
||||
<article class="spec-card">
|
||||
<span>Required anatomy</span>
|
||||
<p>Каждый production-компонент должен иметь anatomy, variants, states, sizes, usage, CSS hooks и responsive notes.</p>
|
||||
</article>
|
||||
<article class="spec-card">
|
||||
<span>Required states</span>
|
||||
<p>Default, Hover, Focus, Active, Disabled. Для data-heavy компонентов также Loading, Empty, Error, Selected.</p>
|
||||
</article>
|
||||
<article class="spec-card">
|
||||
<span>CSS hooks</span>
|
||||
<p>Использовать стабильные классы: `.button--primary`, `.product-card--list`, `.product-image--gold`, `.contact-auth-gate`.</p>
|
||||
</article>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="buttons" class="subsection">
|
||||
<h3>Buttons</h3>
|
||||
<div class="component-row">
|
||||
<button class="button button--primary">Button / Primary / Default</button>
|
||||
@ -204,14 +488,106 @@
|
||||
<span>Использование</span>
|
||||
<p>Primary для главного CTA, Secondary для каталогов и избранного, Ghost для тихих действий.</p>
|
||||
</article>
|
||||
<article class="spec-card">
|
||||
<span>Production gap</span>
|
||||
<p>Добавить disabled, loading, icon-only, full-width mobile. Loading не должен менять ширину кнопки.</p>
|
||||
</article>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="subsection">
|
||||
<div id="icons" class="subsection">
|
||||
<h3>Icon Styles</h3>
|
||||
<div class="icon-style-grid">
|
||||
<article class="icon-style-card">
|
||||
<div class="icon-demo-row">
|
||||
<span class="kit-icon kit-icon--line" aria-hidden="true">
|
||||
<svg viewBox="0 0 24 24"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/></svg>
|
||||
</span>
|
||||
<span class="kit-icon kit-icon--line" aria-hidden="true">
|
||||
<svg viewBox="0 0 24 24"><path d="M6 6h15l-2 9H8L6 3H3"/><circle cx="9" cy="20" r="1.5"/><circle cx="18" cy="20" r="1.5"/></svg>
|
||||
</span>
|
||||
<span class="kit-icon kit-icon--line" aria-hidden="true">
|
||||
<svg viewBox="0 0 24 24"><path d="m6 9 6 6 6-6"/></svg>
|
||||
</span>
|
||||
</div>
|
||||
<span>Icon / Line / Default</span>
|
||||
<p>Основной стиль для header, account, cart, menu chevrons и вторичных действий. Stroke 1.75px, без заливки.</p>
|
||||
<code>stroke-width: 1.75; width: 22px;</code>
|
||||
</article>
|
||||
<article class="icon-style-card">
|
||||
<div class="icon-demo-row">
|
||||
<span class="kit-icon kit-icon--soft" aria-hidden="true">
|
||||
<svg viewBox="0 0 24 24"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/></svg>
|
||||
</span>
|
||||
<span class="kit-icon kit-icon--soft" aria-hidden="true">
|
||||
<svg viewBox="0 0 24 24"><path d="M6 6h15l-2 9H8L6 3H3"/><circle cx="9" cy="20" r="1.5"/><circle cx="18" cy="20" r="1.5"/></svg>
|
||||
</span>
|
||||
<span class="kit-icon kit-icon--soft" aria-hidden="true">
|
||||
<svg viewBox="0 0 24 24"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><path d="m7 10 5 5 5-5"/><path d="M12 15V3"/></svg>
|
||||
</span>
|
||||
</div>
|
||||
<span>Icon / Soft Container</span>
|
||||
<p>Для кликабельных icon buttons: header account/cart, toolbar actions, карточки избранного. Контейнер 44-48px.</p>
|
||||
<code>background: #fff; border: rgba(75,15,36,.14);</code>
|
||||
</article>
|
||||
<article class="icon-style-card">
|
||||
<div class="icon-demo-row">
|
||||
<span class="kit-icon kit-icon--filled" aria-hidden="true">
|
||||
<svg viewBox="0 0 24 24"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/></svg>
|
||||
</span>
|
||||
<span class="kit-icon kit-icon--filled" aria-hidden="true">
|
||||
<svg viewBox="0 0 24 24"><path d="M6 6h15l-2 9H8L6 3H3"/><circle cx="9" cy="20" r="1.5"/><circle cx="18" cy="20" r="1.5"/></svg>
|
||||
</span>
|
||||
<span class="kit-icon kit-icon--filled" aria-hidden="true">
|
||||
<svg viewBox="0 0 24 24"><path d="M12 5v14"/><path d="M5 12h14"/></svg>
|
||||
</span>
|
||||
</div>
|
||||
<span>Icon / Filled Action</span>
|
||||
<p>Акцентный вариант для primary icon-only действий, selected states и важных быстрых команд. Использовать дозированно.</p>
|
||||
<code>background: color.primary; color: #fff;</code>
|
||||
</article>
|
||||
<article class="icon-style-card">
|
||||
<div class="icon-demo-row">
|
||||
<span class="kit-icon kit-icon--tiny" aria-hidden="true">
|
||||
<svg viewBox="0 0 24 24"><path d="m6 9 6 6 6-6"/></svg>
|
||||
</span>
|
||||
<span class="kit-icon kit-icon--tiny" aria-hidden="true">
|
||||
<svg viewBox="0 0 24 24"><path d="M5 12h14"/></svg>
|
||||
</span>
|
||||
<span class="kit-icon kit-icon--tiny" aria-hidden="true">
|
||||
<svg viewBox="0 0 24 24"><path d="M12 5v14"/><path d="M5 12h14"/></svg>
|
||||
</span>
|
||||
</div>
|
||||
<span>Icon / Utility / Small</span>
|
||||
<p>Для chevron, accordion, table sorting и compact filters. Stroke 1.6px, размер 14-18px, без отдельного контейнера.</p>
|
||||
<code>width: 16px; stroke-width: 1.6;</code>
|
||||
</article>
|
||||
</div>
|
||||
<div class="spec-grid">
|
||||
<article class="spec-card">
|
||||
<span>Size scale</span>
|
||||
<p>Utility 16px, navigation 20-22px, icon button 44/48px container, primary action 48px container. SVG всегда квадратный.</p>
|
||||
</article>
|
||||
<article class="spec-card">
|
||||
<span>Stroke rule</span>
|
||||
<p>Базовый stroke 1.75px. Не использовать тяжёлые 2.5-3px иконки в header: они спорят с логотипом и типографикой.</p>
|
||||
</article>
|
||||
<article class="spec-card">
|
||||
<span>States</span>
|
||||
<p>Default, Hover, Focus, Active, Disabled, Selected. Hover меняет border/background, а не толщину линии.</p>
|
||||
</article>
|
||||
<article class="spec-card">
|
||||
<span>CSS hooks</span>
|
||||
<p>`.kit-icon--line`, `.kit-icon--soft`, `.kit-icon--filled`, `.kit-icon--tiny`. В рабочем header использовать тот же визуальный принцип.</p>
|
||||
</article>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="product-card" class="subsection">
|
||||
<h3>Product Card</h3>
|
||||
<div class="product-grid product-grid--3">
|
||||
<article class="product-card">
|
||||
<div class="product-media product-media--amber"><img class="product-photo" src="assets/images/00073820_1.png" alt="Product bottle" /></div>
|
||||
<div class="product-media product-media--amber"><img class="product-photo" src="assets/images/00081538_1.png" alt="Product bottle" /></div>
|
||||
<div class="product-meta">
|
||||
<span class="muted-caps">Tuscany</span>
|
||||
<h3>Brunello di Montalcino</h3>
|
||||
@ -223,7 +599,7 @@
|
||||
</div>
|
||||
</article>
|
||||
<article class="product-card product-card--hover">
|
||||
<div class="product-media product-media--wine"><img class="product-photo" src="assets/images/00073820_1.png" alt="Product bottle" /></div>
|
||||
<div class="product-media product-media--wine"><img class="product-photo" src="assets/images/00081538_1.png" alt="Product bottle" /></div>
|
||||
<div class="product-meta">
|
||||
<span class="muted-caps">Rioja</span>
|
||||
<h3>Reserva Seleccion Especial</h3>
|
||||
@ -235,7 +611,7 @@
|
||||
</div>
|
||||
</article>
|
||||
<article class="product-card product-card--compact">
|
||||
<div class="product-media product-media--green"><img class="product-photo" src="assets/images/00073820_1.png" alt="Product bottle" /></div>
|
||||
<div class="product-media product-media--green"><img class="product-photo" src="assets/images/00081538_1.png" alt="Product bottle" /></div>
|
||||
<div class="product-meta">
|
||||
<span class="muted-caps">Mosel</span>
|
||||
<h3>Riesling Kabinett</h3>
|
||||
@ -262,7 +638,7 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="subsection">
|
||||
<div id="catalog-list-cards" class="subsection">
|
||||
<h3>Catalog List Cards</h3>
|
||||
<div class="spec-grid">
|
||||
<article class="spec-card">
|
||||
@ -281,13 +657,61 @@
|
||||
<span>Card / Product / List / B2B Dense</span>
|
||||
<p>Дополнительные параметры: тип, сорт, упаковка, артикул. Для профессионального сравнения SKU.</p>
|
||||
</article>
|
||||
<article class="spec-card">
|
||||
<span>Shadow</span>
|
||||
<p>Default использует Shadow / Soft. Hover использует Shadow / Card / Hover + border rgba(75,15,36,.28). Картинки бутылок всегда shadow none.</p>
|
||||
</article>
|
||||
</div>
|
||||
<div class="hero-actions">
|
||||
<a class="button button--secondary" href="bottle-cards.html">Открыть варианты карточек</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="subsection">
|
||||
<div id="image-backgrounds" class="subsection">
|
||||
<h3>Image Backgrounds</h3>
|
||||
<div class="image-bg-grid">
|
||||
<article class="image-bg-card">
|
||||
<div class="image-bg-preview product-image--gold"><img src="assets/images/00080768_1.png" alt="Bottle on gold gradient" /></div>
|
||||
<span>Image Background / Gold</span>
|
||||
<p>Для белых, сладких, премиальных и акцентных карточек. Хорошо работает с бутылками без прозрачного фона.</p>
|
||||
<code>.product-image--gold { background: linear-gradient(135deg, #b9965b 0%, #d7c18b 48%, #eef2f6 100%); }</code>
|
||||
</article>
|
||||
<article class="image-bg-card">
|
||||
<div class="image-bg-preview product-image--wine"><img src="assets/images/00081538_1.png" alt="Bottle on wine gradient" /></div>
|
||||
<span>Image Background / Wine</span>
|
||||
<p>Для красных вин, премиальных подборок и карточек, где нужен более сильный брендовый акцент.</p>
|
||||
<code>.product-image--wine { background: linear-gradient(135deg, #6d1c36 0%, #9b5366 46%, #e6dce1 100%); }</code>
|
||||
</article>
|
||||
<article class="image-bg-card">
|
||||
<div class="image-bg-preview product-image--green"><img src="assets/images/00081726_1.png" alt="Bottle on green gradient" /></div>
|
||||
<span>Image Background / Green</span>
|
||||
<p>Для белых, органики, свежих регионов и спокойных карточек с холодным фоном.</p>
|
||||
<code>.product-image--green { background: linear-gradient(135deg, #1f4d3a 0%, #88a28e 48%, #eef2e5 100%); }</code>
|
||||
</article>
|
||||
<article class="image-bg-card">
|
||||
<div class="image-bg-preview image-bg-preview--neutral"><img src="assets/images/00081538_1.png" alt="Bottle on neutral gradient" /></div>
|
||||
<span>Image Background / Neutral</span>
|
||||
<p>Для hover, B2B dense и ситуаций, где цвет не должен спорить с информацией.</p>
|
||||
<code>background: linear-gradient(135deg, #eef2f6 0%, #dde6ef 100%);</code>
|
||||
</article>
|
||||
</div>
|
||||
<div class="spec-grid">
|
||||
<article class="spec-card">
|
||||
<span>Правило</span>
|
||||
<p>Градиент применяется только к контейнеру изображения, не к карточке целиком. Так карточка остаётся читаемой и не превращается в баннер.</p>
|
||||
</article>
|
||||
<article class="spec-card">
|
||||
<span>Изображение</span>
|
||||
<p>Бутылка всегда `object-fit: contain`, `box-shadow: none`, без вылета за блок. Для JPG без прозрачности контейнер должен скрывать переполнение.</p>
|
||||
</article>
|
||||
<article class="spec-card">
|
||||
<span>CSS hook</span>
|
||||
<p>Для list-card использовать `.product-image product-image--gold|wine|green`. Для плиток использовать модификаторы media-контейнера.</p>
|
||||
</article>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="editorial-components" class="subsection">
|
||||
<h3>Editorial Components</h3>
|
||||
<div class="spec-grid">
|
||||
<article class="spec-card">
|
||||
@ -306,6 +730,14 @@
|
||||
<span>Guidelines</span>
|
||||
<p>Отдельная страница с требованиями к заголовкам, тексту, фото, SEO и pre-publish checklist.</p>
|
||||
</article>
|
||||
<article class="spec-card">
|
||||
<span>Shadow</span>
|
||||
<p>Editorial hero image использует Shadow / Editorial / Image. Текстовые блоки и сайдбар остаются без декоративной тени, чтобы читать было спокойнее.</p>
|
||||
</article>
|
||||
<article class="spec-card">
|
||||
<span>Production gap</span>
|
||||
<p>Добавить компоненты: Article meta, Article quote, Article image caption, Related products, Related producer.</p>
|
||||
</article>
|
||||
</div>
|
||||
<div class="hero-actions">
|
||||
<a class="button button--secondary" href="news-villa-raiano-v2.html">Новость v2</a>
|
||||
@ -313,7 +745,7 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="subsection">
|
||||
<div id="navigation" 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>
|
||||
@ -338,10 +770,18 @@
|
||||
<span>Dropdown</span>
|
||||
<p>Mega-menu: visual image, intro, 3 content columns, popular links. Hover bridge удерживает меню.</p>
|
||||
</article>
|
||||
<article class="spec-card">
|
||||
<span>Shadow</span>
|
||||
<p>Header sticky использует Shadow / Header / Sticky. Mega-menu использует Shadow / Lift, потому что это слой поверх контента.</p>
|
||||
</article>
|
||||
<article class="spec-card">
|
||||
<span>Production gap</span>
|
||||
<p>Добавить mobile menu, active page state, account logged-in state, cart count, keyboard focus для dropdown.</p>
|
||||
</article>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="subsection component-columns">
|
||||
<div id="controls" class="subsection component-columns">
|
||||
<div>
|
||||
<h3>Filters</h3>
|
||||
<div class="control-stack">
|
||||
@ -390,10 +830,14 @@
|
||||
<span>Tags</span>
|
||||
<p>Default для метаданных, Filled для выбранного статуса, Outline для мягких категорий.</p>
|
||||
</article>
|
||||
<article class="spec-card">
|
||||
<span>Production gap</span>
|
||||
<p>Нужны helper/error text, required label, disabled controls, textarea, select open state, clear all для фильтров.</p>
|
||||
</article>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="subsection">
|
||||
<div id="tables" class="subsection">
|
||||
<h3>Tables / B2B</h3>
|
||||
<div class="table-wrap">
|
||||
<table>
|
||||
@ -440,6 +884,10 @@
|
||||
<span>Использование</span>
|
||||
<p>Прайс-листы, остатки, коммерческие условия и сравнение SKU.</p>
|
||||
</article>
|
||||
<article class="spec-card">
|
||||
<span>Production gap</span>
|
||||
<p>Добавить Empty, Loading, Selected, Actions column, numeric alignment, sticky header и mobile fallback.</p>
|
||||
</article>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
@ -449,7 +897,7 @@
|
||||
<p class="eyebrow">03 Patterns</p>
|
||||
<h2>Паттерны</h2>
|
||||
</div>
|
||||
<div class="catalog-pattern">
|
||||
<div id="catalog-patterns" class="catalog-pattern">
|
||||
<aside class="filters-panel">
|
||||
<h3>Filters / Sidebar</h3>
|
||||
<label class="checkbox"><input type="checkbox" checked /> Bordeaux</label>
|
||||
@ -466,7 +914,7 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="subsection">
|
||||
<div id="content-patterns" class="subsection">
|
||||
<h3>Content & Inner Pages</h3>
|
||||
<div class="spec-grid">
|
||||
<article class="spec-card">
|
||||
@ -481,6 +929,10 @@
|
||||
<span>Pattern / Contacts / Form</span>
|
||||
<p>Контактные панели + форма заявки менеджеру. На мобильном блоки идут одной колонкой.</p>
|
||||
</article>
|
||||
<article class="spec-card">
|
||||
<span>Pattern / Contacts / Auth Gate</span>
|
||||
<p>Контакты открыты, заявка заблокирована для гостя. Показываем CTA входа/регистрации и disabled-preview формы.</p>
|
||||
</article>
|
||||
<article class="spec-card">
|
||||
<span>Pattern / Editorial Guidelines</span>
|
||||
<p>Guideline cards + checklist. Используется как внутренняя документация для редакции и контент-менеджера.</p>
|
||||
@ -490,9 +942,12 @@
|
||||
</section>
|
||||
|
||||
<section id="templates" class="section">
|
||||
<div class="section-heading">
|
||||
<p class="eyebrow">04 Templates</p>
|
||||
<h2>Шаблоны</h2>
|
||||
<div class="section-heading section-heading--split">
|
||||
<div>
|
||||
<p class="eyebrow">04 Templates</p>
|
||||
<h2>Шаблоны</h2>
|
||||
</div>
|
||||
<p>Templates описывают каркас страницы: обязательные блоки, опциональные зоны, компоненты и связь с реальным screen. Это не финальный экран, а правило сборки.</p>
|
||||
</div>
|
||||
<div class="template-grid">
|
||||
<article class="template-card">
|
||||
@ -523,49 +978,200 @@
|
||||
<span>Template / Contacts</span>
|
||||
<strong>Contact panels + manager request</strong>
|
||||
</article>
|
||||
<article class="template-card">
|
||||
<span>Template / Contacts Auth</span>
|
||||
<strong>Open contacts + gated request form</strong>
|
||||
</article>
|
||||
<article class="template-card">
|
||||
<span>Template / Article Guidelines</span>
|
||||
<strong>Rules + checklist + photo requirements</strong>
|
||||
</article>
|
||||
</div>
|
||||
<div class="template-spec-grid">
|
||||
<article class="template-spec">
|
||||
<span>Template / Catalog</span>
|
||||
<h3>Product listing</h3>
|
||||
<p><strong>Required:</strong> Header, catalog head, toolbar, product list, footer.</p>
|
||||
<p><strong>Components:</strong> Catalog List Card, Select, Button Secondary, Mega-menu.</p>
|
||||
<p><strong>Screen:</strong> <a href="catalog.html">catalog.html</a></p>
|
||||
<em>Status: Review, needs mobile QA for dense list.</em>
|
||||
</article>
|
||||
<article class="template-spec">
|
||||
<span>Template / News Article</span>
|
||||
<h3>Editorial story</h3>
|
||||
<p><strong>Required:</strong> Article hero, date/meta, lead, body, image block, footer.</p>
|
||||
<p><strong>Optional:</strong> timeline, quote, photo grid, related products.</p>
|
||||
<p><strong>Screen:</strong> <a href="news-villa-raiano-v2.html">news-villa-raiano-v2.html</a></p>
|
||||
<em>Status: Ready, content/photo rules documented.</em>
|
||||
</article>
|
||||
<article class="template-spec">
|
||||
<span>Template / Contacts Auth</span>
|
||||
<h3>Gated request</h3>
|
||||
<p><strong>Required:</strong> contacts hero, open contacts, auth gate, disabled preview, footer.</p>
|
||||
<p><strong>Components:</strong> Contact Panel, Contact Auth Gate, Button Primary/Secondary.</p>
|
||||
<p><strong>Screen:</strong> <a href="contacts-auth.html">contacts-auth.html</a></p>
|
||||
<em>Status: Review, needs real login/register routes.</em>
|
||||
</article>
|
||||
<article class="template-spec">
|
||||
<span>Template / Home</span>
|
||||
<h3>Commercial landing</h3>
|
||||
<p><strong>Required:</strong> asymmetrical hero, producer block, news block, footer.</p>
|
||||
<p><strong>Components:</strong> Header, Mega-menu, Button Primary, News Card, Producer Card.</p>
|
||||
<p><strong>Screen:</strong> <a href="index.html">index.html</a></p>
|
||||
<em>Status: Ready, visual direction approved.</em>
|
||||
</article>
|
||||
<article class="template-spec">
|
||||
<span>Template / Article Guidelines</span>
|
||||
<h3>Internal documentation</h3>
|
||||
<p><strong>Required:</strong> page intro, rule cards, photo requirements, writing checklist.</p>
|
||||
<p><strong>Components:</strong> Guideline Card, Checklist Card, Editorial Specs.</p>
|
||||
<p><strong>Screen:</strong> <a href="article-guidelines.html">article-guidelines.html</a></p>
|
||||
<em>Status: Ready, supports content production.</em>
|
||||
</article>
|
||||
<article class="template-spec">
|
||||
<span>Template / Product Page</span>
|
||||
<h3>Product detail</h3>
|
||||
<p><strong>Required:</strong> product media, details, price/CTA, characteristics, recommendations.</p>
|
||||
<p><strong>Components:</strong> Product Media, Product Meta, Table, Product Card.</p>
|
||||
<p><strong>Screen:</strong> <a href="product.html">product.html</a></p>
|
||||
<em>Status: Draft, needs final product content model.</em>
|
||||
</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>
|
||||
<section id="screens" class="section">
|
||||
<div class="section-heading section-heading--split">
|
||||
<div>
|
||||
<p class="eyebrow">05 Screens</p>
|
||||
<h2>Реальные экраны</h2>
|
||||
</div>
|
||||
<p>Этот раздел ведёт на конкретные HTML-страницы проекта. В отличие от Templates, здесь фиксируются уже собранные экраны с реальным контентом, header/footer и состояниями.</p>
|
||||
</div>
|
||||
<div class="template-grid">
|
||||
<article class="template-card">
|
||||
<div class="screen-grid">
|
||||
<a class="screen-card screen-card--home" href="index.html">
|
||||
<span>Screen / Home / v1</span>
|
||||
<strong>Главная</strong>
|
||||
<p>Hero, производители, новости, рекомендации и общий визуальный тон сайта.</p>
|
||||
</a>
|
||||
<a class="screen-card screen-card--catalog" href="catalog.html">
|
||||
<span>Screen / Catalog / v1</span>
|
||||
<strong><a href="catalog.html">Product list cards</a></strong>
|
||||
</article>
|
||||
<article class="template-card">
|
||||
<strong>Каталог</strong>
|
||||
<p>Список товаров, toolbar, сортировка, текущая горизонтальная карточка каталога.</p>
|
||||
</a>
|
||||
<a class="screen-card screen-card--product" href="product.html">
|
||||
<span>Screen / Product / v1</span>
|
||||
<strong>Карточка товара</strong>
|
||||
<p>Продуктовый detail layout: изображение, описание, метаданные и CTA.</p>
|
||||
</a>
|
||||
<a class="screen-card screen-card--cards" href="bottle-cards.html">
|
||||
<span>Screen / Cards Lab / v1</span>
|
||||
<strong>Варианты карточек</strong>
|
||||
<p>Лаборатория карточек бутылок и текущих list-card состояний.</p>
|
||||
</a>
|
||||
<a class="screen-card screen-card--news" href="news-villa-raiano-v2.html">
|
||||
<span>Screen / News / v2</span>
|
||||
<strong><a href="news-villa-raiano-v2.html">Villa Raiano editorial</a></strong>
|
||||
</article>
|
||||
<article class="template-card">
|
||||
<strong>Villa Raiano editorial</strong>
|
||||
<p>Журнальная статья с крупными фото, таймлайном, цитатами и финальным акцентом.</p>
|
||||
</a>
|
||||
<a class="screen-card screen-card--about" href="about.html">
|
||||
<span>Screen / About / v1</span>
|
||||
<strong><a href="about.html">Company overview</a></strong>
|
||||
</article>
|
||||
<article class="template-card">
|
||||
<strong>О компании</strong>
|
||||
<p>Корпоративная страница: описание, преимущества, спокойная B2B-подача.</p>
|
||||
</a>
|
||||
<a class="screen-card screen-card--contacts" href="contacts.html">
|
||||
<span>Screen / Contacts / v1</span>
|
||||
<strong><a href="contacts.html">Contacts and form</a></strong>
|
||||
</article>
|
||||
<article class="template-card">
|
||||
<strong>Контакты</strong>
|
||||
<p>Открытая форма заявки, контактные панели, юридический информационный блок.</p>
|
||||
</a>
|
||||
<a class="screen-card screen-card--auth" href="contacts-auth.html">
|
||||
<span>Screen / Contacts / Auth</span>
|
||||
<strong>Контакты auth</strong>
|
||||
<p>Вариант, где заявка доступна только после входа или регистрации.</p>
|
||||
</a>
|
||||
<a class="screen-card screen-card--guidelines" href="article-guidelines.html">
|
||||
<span>Screen / Guidelines / v1</span>
|
||||
<strong><a href="article-guidelines.html">Editorial rules</a></strong>
|
||||
<strong>Редакционный гайд</strong>
|
||||
<p>Требования к статьям, фотографиям, заголовкам, SEO и pre-publish checklist.</p>
|
||||
</a>
|
||||
</div>
|
||||
<div class="spec-grid screen-qa-grid">
|
||||
<article class="spec-card">
|
||||
<span>Screen status</span>
|
||||
<p>Ready: Home, News v2, Guidelines, Cards Lab. Review: Catalog, Contacts Auth. Draft: Product, если не утверждена модель данных.</p>
|
||||
</article>
|
||||
<article class="spec-card">
|
||||
<span>Screen QA</span>
|
||||
<p>Каждый экран проверяется на desktop/tablet/mobile: header/footer, links, image loading, hover/focus states, overflow и читаемость текста.</p>
|
||||
</article>
|
||||
<article class="spec-card">
|
||||
<span>Template link</span>
|
||||
<p>Каждый screen должен соответствовать одному template. Если меняется template, связанные screens обновляются вместе с ним.</p>
|
||||
</article>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="handoff-checklist" class="section section--last">
|
||||
<div class="section-heading section-heading--split">
|
||||
<div>
|
||||
<p class="eyebrow">06 Handoff</p>
|
||||
<h2>Production checklist</h2>
|
||||
</div>
|
||||
<p>Финальный список проверок перед передачей дизайна в разработку или публикацией новой страницы в UI-kit.</p>
|
||||
</div>
|
||||
<div class="checklist-grid">
|
||||
<article class="checklist-card">
|
||||
<span>Design</span>
|
||||
<ul>
|
||||
<li>Компонент использует существующие tokens: color, spacing, radius, shadow.</li>
|
||||
<li>Есть все состояния: default, hover, focus, active, disabled, error/loading где нужно.</li>
|
||||
<li>Размеры стабильны: hover, текст и динамический контент не двигают layout.</li>
|
||||
<li>Компонент не дублирует уже существующий паттерн без причины.</li>
|
||||
</ul>
|
||||
</article>
|
||||
<article class="checklist-card">
|
||||
<span>Development</span>
|
||||
<ul>
|
||||
<li>Есть CSS hook или class naming по схеме Category / Type / Variant / State.</li>
|
||||
<li>В UI-kit указан usage: где компонент применяется и где не применяется.</li>
|
||||
<li>Все ссылки в demo/screens ведут на реальные HTML-файлы.</li>
|
||||
<li>Нет inline-логики, которая мешает переиспользовать компонент.</li>
|
||||
</ul>
|
||||
</article>
|
||||
<article class="checklist-card">
|
||||
<span>Responsive</span>
|
||||
<ul>
|
||||
<li>Проверены desktop, tablet и mobile.</li>
|
||||
<li>Карточки, таблицы и формы не переполняют контейнер.</li>
|
||||
<li>Текст в кнопках и карточках не обрезается и не накладывается.</li>
|
||||
<li>Таблицы имеют horizontal scroll или мобильную альтернативу.</li>
|
||||
</ul>
|
||||
</article>
|
||||
<article class="checklist-card">
|
||||
<span>Accessibility</span>
|
||||
<ul>
|
||||
<li>Интерактивные элементы имеют видимый focus.</li>
|
||||
<li>Изображения имеют осмысленный alt.</li>
|
||||
<li>Кнопки и ссылки различимы по роли и тексту.</li>
|
||||
<li>Цвет не является единственным способом передать состояние.</li>
|
||||
</ul>
|
||||
</article>
|
||||
<article class="checklist-card">
|
||||
<span>Content</span>
|
||||
<ul>
|
||||
<li>Заголовки соответствуют иерархии H1/H2/H3.</li>
|
||||
<li>Для статей есть лид, визуальные паузы, alt и финальный CTA.</li>
|
||||
<li>Даты, имена, регионы, апелласьоны и награды проверены.</li>
|
||||
<li>Изображения достаточно крупные и не выглядят случайно обрезанными.</li>
|
||||
</ul>
|
||||
</article>
|
||||
<article class="checklist-card">
|
||||
<span>Ready criteria</span>
|
||||
<ul>
|
||||
<li>Раздел имеет описание назначения.</li>
|
||||
<li>Есть пример, спецификация и ссылка на screen, если применимо.</li>
|
||||
<li>Компонент или экран можно собрать без дополнительных устных пояснений.</li>
|
||||
<li>Статус готовности понятен: Ready, Review или Draft.</li>
|
||||
</ul>
|
||||
</article>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user