feature/v2-design #2
@ -4,8 +4,9 @@
|
||||
{
|
||||
"name": "11ty dev server (live reload)",
|
||||
"runtimeExecutable": "npm",
|
||||
"runtimeArgs": ["run", "dev"],
|
||||
"port": 8080
|
||||
"runtimeArgs": ["run", "dev", "--", "--port=8088"],
|
||||
"port": 8088,
|
||||
"autoPort": false
|
||||
},
|
||||
{
|
||||
"name": "Python HTTP Server (_site)",
|
||||
|
||||
16
.claude/settings.local.json
Normal file
16
.claude/settings.local.json
Normal file
@ -0,0 +1,16 @@
|
||||
{
|
||||
"permissions": {
|
||||
"allow": [
|
||||
"mcp__Claude_Preview__preview_start",
|
||||
"Bash(npm run *)",
|
||||
"Bash(curl -sLo logo-dp-trade.png \"https://wine-dp-trade.ru/wp-content/uploads/2024/11/logo-500x107.png\")",
|
||||
"Bash(curl -sLo hero-main.jpg \"https://images.unsplash.com/photo-1560493676-04071c5f467b?auto=format&fit=crop&w=1800&q=82\")",
|
||||
"Bash(curl -sLo vineyard-hills.jpg \"https://images.unsplash.com/photo-1506377247377-2a5b3b417ebb?auto=format&fit=crop&w=1800&q=82\")",
|
||||
"Bash(curl -sLo news-catena.jpg \"https://images.unsplash.com/photo-1556760544-74068565f05c?auto=format&fit=crop&w=900&q=80\")",
|
||||
"Bash(curl -sLo news-italy.jpg \"https://images.unsplash.com/photo-1528823872057-9c018a7a7553?auto=format&fit=crop&w=900&q=80\")",
|
||||
"Bash(awk '{print $5, $9}')",
|
||||
"Bash(curl -sLo /Users/lexx/Projects/2026/dp-trade-UI-kit/src/js/analytics.js \"https://metrika.in20.ru/js/pa-LKQHOT3En5k9NYpn80cYX.js\")",
|
||||
"Bash(python3 -c \"import json,sys; d=json.load\\(sys.stdin\\); print\\(json.dumps\\(d.get\\('scripts',{}\\),indent=2\\)\\); print\\('deps:',list\\(d.get\\('dependencies',{}\\).keys\\(\\)\\)\\); print\\('devDeps:',list\\(d.get\\('devDependencies',{}\\).keys\\(\\)\\)\\)\")"
|
||||
]
|
||||
}
|
||||
}
|
||||
3
.gitignore
vendored
3
.gitignore
vendored
@ -3,3 +3,6 @@ node_modules/
|
||||
dist/
|
||||
_site/
|
||||
.env
|
||||
|
||||
# Корневые HTML-файлы — артефакты до миграции на 11ty, источник правды — src/*.njk
|
||||
/*.html
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
{
|
||||
"identifier" : "39856AD9-BD44-4500-B03F-EDFAE2A870CB",
|
||||
"localPath" : "_site",
|
||||
"remotePath" : "\/www\/vodkainmyblood.com\/wine-proto",
|
||||
"remotePath" : "\/www\/wine-proto.vodkainmyblood.com",
|
||||
"remoteURL" : "wine-proto.vodkainmyblood.com",
|
||||
"server" : "REG.RU hosting",
|
||||
"usesPublishing" : true
|
||||
|
||||
104
CLAUDE.md
104
CLAUDE.md
@ -10,27 +10,32 @@ This file provides guidance to Claude Code (claude.ai/code) when working with co
|
||||
|
||||
Static HTML/CSS UI-kit and page prototypes for **DP Trade** — a B2B wine wholesale catalog (wine-dp-trade.ru). The output of this project is handed off to **WordPress/Elementor** for production deployment. See `docs/elementor-token-handoff.md` for the full Elementor migration guide.
|
||||
|
||||
Design audit and V2 requirements are documented in `docs/design-audit-followup.md`.
|
||||
|
||||
## Commands
|
||||
|
||||
```bash
|
||||
# Dev server (11ty with live reload)
|
||||
npm run dev # http://localhost:8080
|
||||
# Dev server (11ty with live reload) — port 8088 per .claude/launch.json
|
||||
npm run dev
|
||||
|
||||
# Production build → _site/
|
||||
npm run build
|
||||
```
|
||||
|
||||
Dev server config is also saved in `.claude/launch.json` for use with `preview_start`.
|
||||
Dev server config is saved in `.claude/launch.json` for use with `preview_start`. The named config is `"11ty dev server (live reload)"` on port 8088.
|
||||
|
||||
No test or lint tooling exists — the only npm scripts are `dev` and `build`, and the sole dependency is `@11ty/eleventy`. `npm run dev` runs `eleventy --serve`; the port is not hardcoded in the script and comes from `.claude/launch.json` (8088). Eleventy config lives in `.eleventy.js` (ESM `export default`).
|
||||
|
||||
## Architecture
|
||||
|
||||
### CSS layer (single dependency direction)
|
||||
|
||||
```
|
||||
css/tokens.css ← design tokens only (colors, fonts, spacing, radius, shadows)
|
||||
src/css/tokens.css ← design tokens only (colors, fonts, spacing, radius, shadows)
|
||||
↓
|
||||
css/site.css ← all page styles, imports tokens.css
|
||||
css/ui-kit.css ← design system showcase styles, standalone
|
||||
src/css/site.css ← all page styles (references ../assets/images/ for backgrounds)
|
||||
src/css/ui-kit.css ← design system showcase, standalone
|
||||
src/css/v2.css ← V2 design overrides, loaded on every page after site.css
|
||||
```
|
||||
|
||||
Never put visual styles in `tokens.css`. Never import `site.css` into `ui-kit.css`.
|
||||
@ -41,60 +46,99 @@ Never put visual styles in `tokens.css`. Never import `site.css` into `ui-kit.cs
|
||||
src/
|
||||
_includes/
|
||||
layouts/
|
||||
base.njk ← HTML shell: <head>, fonts, CSS link, <body class="{{ bodyClass }}">
|
||||
default.njk ← base + header partial + footer partial (used by all site pages)
|
||||
ui-kit.njk ← base only, no header/footer (used by ui-kit page)
|
||||
base.njk ← HTML shell: <head>, CSS links, analytics, design-switcher.js
|
||||
default.njk ← base + header + footer (used by all site pages)
|
||||
ui-kit.njk ← base only, no header/footer
|
||||
partials/
|
||||
header.njk ← full site header with mega-menu nav
|
||||
footer.njk ← full site footer
|
||||
css/ ← passthrough copy → _site/css/
|
||||
assets/ ← passthrough copy → _site/assets/
|
||||
header.njk ← mega-menu nav — edit here, propagates to all pages
|
||||
footer.njk ← footer — edit here, propagates to all pages
|
||||
css/ ← passthrough → _site/css/
|
||||
js/ ← passthrough → _site/js/
|
||||
assets/ ← passthrough → _site/assets/
|
||||
fonts/ ← passthrough → _site/fonts/ (all WOFF2, local, no CDN)
|
||||
*.njk ← one file per page
|
||||
```
|
||||
|
||||
### Page front matter
|
||||
### Pages
|
||||
|
||||
Every page declares layout, title, optional bodyClass, and permalink:
|
||||
| Permalink | Source |
|
||||
|---|---|
|
||||
| `/` | `index.njk` |
|
||||
| `/catalog.html` | `catalog.njk` |
|
||||
| `/product.html` | `product.njk` |
|
||||
| `/about.html` | `about.njk` |
|
||||
| `/contacts.html` | `contacts.njk` |
|
||||
| `/contacts-auth.html` | `contacts-auth.njk` |
|
||||
| `/news-villa-raiano.html` | `news-villa-raiano.njk` |
|
||||
| `/news-villa-raiano-v2.html` | `news-villa-raiano-v2.njk` |
|
||||
| `/article-guidelines.html` | `article-guidelines.njk` |
|
||||
| `/bottle-cards.html` | `bottle-cards.njk` |
|
||||
| `/product-card-white.html` | `product-card-white.njk` |
|
||||
| `/ui-kit.html` | `ui-kit.njk` (layout: ui-kit, css: ui-kit) |
|
||||
|
||||
Pages with `bodyClass: compact-type`: catalog, about, contacts, article-guidelines.
|
||||
|
||||
### Page front matter
|
||||
|
||||
```yaml
|
||||
---
|
||||
title: "DP Trade — Catalog"
|
||||
layout: default # or "ui-kit" for the design system page
|
||||
layout: layouts/default # or "layouts/ui-kit" for the design system page
|
||||
bodyClass: compact-type # omit if not needed
|
||||
permalink: /catalog.html # keeps flat output, preserves relative CSS paths
|
||||
---
|
||||
```
|
||||
|
||||
Pages with `bodyClass: compact-type`: catalog, about, contacts, article-guidelines.
|
||||
The `ui-kit` page uses `layout: ui-kit` and `css: ui-kit` (links `ui-kit.css` instead of `site.css`).
|
||||
|
||||
### CSS paths
|
||||
|
||||
All CSS and JS paths in `base.njk` are **relative** (`css/site.css`, `js/inspector.js`). This works both with the 11ty dev server and when opening `_site/` files directly via `file://`.
|
||||
All CSS, JS, and image paths in `base.njk` are **relative**. CSS background-images in `site.css` reference `../assets/images/` (relative to `_site/css/`). HTML templates reference `assets/images/` (relative to `_site/` root). This works with the 11ty dev server and when opening `_site/` via `file://`.
|
||||
|
||||
### Design tokens
|
||||
All images and fonts are local — no external CDN dependencies.
|
||||
|
||||
Key CSS custom properties defined in `css/tokens.css`:
|
||||
### Design tokens (V1 baseline)
|
||||
|
||||
Key CSS custom properties in `src/css/tokens.css`:
|
||||
|
||||
- Colors: `--color-primary-wine-100` (#4b0f24), `--color-accent-gold` (#b9965b), `--color-accent-blue` (#1f3476)
|
||||
- Fonts: `--font-heading` (Montserrat 800), `--font-body` (Inter), `--font-heading-classic` (Playfair Display)
|
||||
- Container: `--container: 1240px`
|
||||
|
||||
When adding new tokens, add to `tokens.css` and mirror to the Elementor CSS layer in `docs/elementor-token-handoff.md` (Section 6).
|
||||
When adding tokens, add to `tokens.css` and mirror to `docs/elementor-token-handoff.md` (Section 6).
|
||||
|
||||
### V2 design system
|
||||
|
||||
V2 is a progressive enhancement overlay triggered by `data-design-version="v2"` on `<html>`. Preference is stored in `localStorage` (`dp-design-version`). The toggle button (`design-toggle__btn`) appears in the main nav and UI-kit sidebar.
|
||||
|
||||
**How V2 works:**
|
||||
- `src/css/tokens.css` — overrides under `:root[data-design-version="v2"]`: burgundy `#7D021D`, warm bg `#FFFDFA`, card bg `#F5F0E8`, Cormorant Garamond + Manrope fonts
|
||||
- `src/css/v2.css` — scoped rules under `[data-design-version="v2"]` removing uppercase, reducing weights, styling breadcrumbs, outlined CTAs, editorial typography
|
||||
- `src/js/design-switcher.js` — applies the attribute on load and on toggle; also injects split phone/email fields and form success state on contacts page
|
||||
|
||||
Breadcrumbs on `product.html` are static markup tagged `data-v2-only="breadcrumbs"` — hidden in V1 via CSS, no JS needed.
|
||||
|
||||
### Responsive breakpoints
|
||||
|
||||
Defined at the bottom of `css/site.css`:
|
||||
Defined at the bottom of `src/css/site.css`:
|
||||
|
||||
- `@media (max-width: 1080px)` — tablet
|
||||
- `@media (max-width: 720px)` — mobile
|
||||
|
||||
### JS utilities
|
||||
|
||||
| File | Purpose |
|
||||
|---|---|
|
||||
| `src/js/design-switcher.js` | V1/V2 toggle, localStorage persistence, V2 DOM enhancements |
|
||||
| `src/js/inspector.js` | Click-to-inspect overlay: shows computed styles and resolved design tokens (`--color-*`, `--font-*`, etc.) for any element. Toggle with Alt+I. |
|
||||
| `src/js/analytics.js` | Privacy-friendly Plausible analytics (local copy) |
|
||||
|
||||
## Key files
|
||||
|
||||
| File | Purpose |
|
||||
| ----------------------------------- | ------------------------------------------------------------ |
|
||||
| `css/tokens.css` | Single source of truth for all design values |
|
||||
| `docs/elementor-token-handoff.md` | Guide for migrating tokens/components to WordPress Elementor |
|
||||
| `.claude/launch.json` | Dev server configurations |
|
||||
| `src/_includes/partials/header.njk` | Mega-menu navigation — edit here, propagates to all pages |
|
||||
| `src/_includes/partials/footer.njk` | Footer — edit here, propagates to all pages |
|
||||
|---|---|
|
||||
| `src/css/tokens.css` | Single source of truth for all design values |
|
||||
| `src/css/v2.css` | V2 editorial design overrides |
|
||||
| `docs/design-audit-followup.md` | Designer audit breakdown and V2 implementation plan |
|
||||
| `docs/elementor-token-handoff.md` | Migration guide to WordPress/Elementor |
|
||||
| `.claude/launch.json` | Dev server config for preview_start |
|
||||
| `src/_includes/partials/header.njk` | Mega-menu navigation |
|
||||
| `src/_includes/partials/footer.njk` | Site footer |
|
||||
|
||||
82
README.md
82
README.md
@ -1,23 +1,77 @@
|
||||
# DP Trade — Site UI Kit
|
||||
|
||||
Единый HTML/CSS проект для сайта и дизайн-системы DP Trade.
|
||||
Единый 11ty-проект для сайта, UI-kit и дизайн-системы DP Trade.
|
||||
|
||||
## Текущее состояние
|
||||
|
||||
- Источник правды: `src/`.
|
||||
- Сборка: Eleventy пишет результат в `_site/`.
|
||||
- Активная дизайнерская доработка: переключаемая версия `V2`, подключенная поверх базового `site.css` через `src/css/v2.css`.
|
||||
- `V1` сохранен как исходная версия для сравнения.
|
||||
- `V2` включает обновленную премиальную палитру, Cormorant Garamond + Manrope, легкие Cormorant `400/500`, переработанные карточки, mega-menu, footer, контакты и часть product/about-паттернов.
|
||||
- Подробный аудит и статусы: `docs/design-audit-followup.md`.
|
||||
|
||||
## Структура
|
||||
|
||||
- `index.html` — главная страница с меню, hero, карточками и футером.
|
||||
- `catalog.html` — пример страницы каталога.
|
||||
- `product.html` — пример страницы продукта.
|
||||
- `ui-kit.html` — живая витрина дизайн-системы.
|
||||
- `css/tokens.css` — дизайн-токены: цвета, шрифты, отступы, радиусы, тени.
|
||||
- `css/site.css` — общие стили сайта: header, menu, footer, cards, layouts.
|
||||
- `css/ui-kit.css` — стили страницы UI-kit.
|
||||
- `components/menu.html` — HTML-фрагмент меню.
|
||||
- `components/footer.html` — HTML-фрагмент футера.
|
||||
- `assets/images` и `assets/icons` — место для локальных изображений и иконок.
|
||||
- `src/*.njk` — исходные страницы.
|
||||
- `src/_includes/layouts/` — базовые layout-шаблоны.
|
||||
- `src/_includes/partials/` — header/footer.
|
||||
- `src/css/tokens.css` — шрифты, цвета, базовые дизайн-токены.
|
||||
- `src/css/site.css` — базовая V1-верстка сайта.
|
||||
- `src/css/v2.css` — V2-оверрайды по дизайнерскому аудиту.
|
||||
- `src/css/ui-kit.css` — стили витрины UI-kit.
|
||||
- `src/js/design-switcher.js` — переключение `V1/V2` через `localStorage`.
|
||||
- `src/js/inspector.js` — вспомогательный инспектор.
|
||||
- `src/fonts/` — шрифты, которые попадают в сборку.
|
||||
- `src/assets/` — изображения и локальные медиа.
|
||||
- `_site/` — результат сборки, не коммитится.
|
||||
- `docs/` — проектные документы, аудит, handoff.
|
||||
|
||||
## Как смотреть
|
||||
|
||||
```bash
|
||||
npm run build
|
||||
npm run dev
|
||||
```
|
||||
|
||||
После `npm run dev` Eleventy поднимет локальный сервер. Для статической проверки можно открыть файлы из `_site/`.
|
||||
|
||||
Переключатель `V1/V2` есть в header и на странице `ui-kit.html`. Выбранная версия сохраняется в `localStorage` под ключом `dp-design-version`.
|
||||
|
||||
## Основные страницы
|
||||
|
||||
- `index.html` — главная: hero, producers, news, recommendations.
|
||||
- `catalog.html` — пример каталога.
|
||||
- `product.html` — пример страницы продукта, включая V2-only breadcrumbs.
|
||||
- `product-card-white.html` — варианты карточек на белом фоне.
|
||||
- `bottle-cards.html` — лаборатория карточек бутылок.
|
||||
- `about.html` — страница о компании.
|
||||
- `contacts.html` — контакты и форма.
|
||||
- `contacts-auth.html` — вариант контактов с auth-gate.
|
||||
- `news-villa-raiano.html` и `news-villa-raiano-v2.html` — редакционные страницы.
|
||||
- `article-guidelines.html` — гайд по статьям.
|
||||
- `ui-kit.html` — витрина дизайн-системы.
|
||||
|
||||
## Что уже решено
|
||||
|
||||
- Внедрен 11ty pipeline с passthrough для `src/css`, `src/js`, `src/fonts`, `src/assets`.
|
||||
- Добавлена V2-версия дизайна без удаления V1.
|
||||
- Подключены настоящие Cormorant Garamond `400/500` (`CormorantGaramond-Regular.woff2`, `CormorantGaramond-Medium.woff2`).
|
||||
- В V2 обновлены основные токены: бордовый `#7D021D`, теплый фон `#FFFDFA`, карточный фон `#F5F0E8`, Cormorant Garamond + Manrope.
|
||||
- В V2 облегчены Cormorant-заголовки, карточки товара, section headings, footer и mega-menu.
|
||||
- В V2 добавлены breadcrumbs для product, split contact fields и success-state формы.
|
||||
- Последняя проверенная сборка: `npm run build`.
|
||||
|
||||
## Что осталось
|
||||
|
||||
- Визуально проверить `V2` на desktop/tablet/mobile: `index`, `catalog`, `product`, `about`, `contacts`, `ui-kit`.
|
||||
- Довести product content model: расширенное описание, реальные характеристики, финальная композиция price/CTA.
|
||||
- Решить, нужно ли переносить V2-токены непосредственно в `src/css/ui-kit.css`, или достаточно текущего `v2.css` override.
|
||||
- Дооформить production-сценарии: catalog pagination, 404, cookie/privacy, реальные form validation states, auth routes.
|
||||
|
||||
## Правило организации
|
||||
|
||||
В проекте должен быть один Git-репозиторий на уровне этой папки. Отдельные компоненты сайта живут внутри `components/`, а не как самостоятельные соседние проекты.
|
||||
В проекте должен быть один Git-репозиторий на уровне этой папки. Исходники живут в `src/`; корневые HTML-файлы и `_site/` считаются артефактами сборки/миграции, а не источником правды.
|
||||
|
||||
## Naming
|
||||
|
||||
@ -34,7 +88,3 @@ Button / Primary / Default
|
||||
Card / Product / Hover
|
||||
Nav / Header / Desktop
|
||||
```
|
||||
|
||||
## Как смотреть
|
||||
|
||||
Открой `index.html` или `ui-kit.html` напрямую в браузере. Сервер для текущей версии не нужен.
|
||||
|
||||
55
about.html
55
about.html
@ -1,55 +0,0 @@
|
||||
<!doctype html>
|
||||
<html lang="ru">
|
||||
<head>
|
||||
<script src="components/head.js"></script>
|
||||
<title>DP Trade — О компании</title>
|
||||
</head>
|
||||
<body class="compact-type">
|
||||
<div class="site-shell">
|
||||
<div id="site-header"></div>
|
||||
<main class="content-page">
|
||||
<section class="page-hero page-hero--about">
|
||||
<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>Since 1991</span>
|
||||
<strong>Premium wine trade</strong>
|
||||
<p>Портфель винных домов для ресторанов, розницы и профессиональных закупок.</p>
|
||||
</aside>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="section">
|
||||
<div class="container about-grid">
|
||||
<article class="article-body">
|
||||
<p class="lead">DP Trade развивает профессиональный винный каталог, где регионы, производители, партии и коммерческие условия собраны в едином интерфейсе для быстрых закупочных решений.</p>
|
||||
<p>Главная ценность сервиса — соединить сильный ассортимент с понятной навигацией: от страны и апелласьона до конкретного производителя, винтажа и карточки товара.</p>
|
||||
<h2>Как устроен подход</h2>
|
||||
<p>Компания делает акцент на удобном каталоге, персональном отношении, собственных складских возможностях и доставке собственным транспортом. Для B2B-клиентов это значит меньше ручных уточнений и быстрее путь от выбора до заказа.</p>
|
||||
</article>
|
||||
<div class="feature-grid feature-grid--about">
|
||||
<article class="feature-card"><span>01</span><h3>Удобный каталог</h3><p>Фильтры по типу, региону, производителю, сорту, году, объему и стилю.</p></article>
|
||||
<article class="feature-card"><span>02</span><h3>Персональный подход</h3><p>Быстрая коммуникация с менеджером и подборки под формат клиента.</p></article>
|
||||
<article class="feature-card"><span>03</span><h3>Склады в регионах</h3><p>Инфраструктура для регулярных поставок и управления доступностью.</p></article>
|
||||
<article class="feature-card"><span>04</span><h3>Собственная доставка</h3><p>Контроль логистики и аккуратная работа с профессиональными заказами.</p></article>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="section muted-section">
|
||||
<div class="container section-heading section-heading--split">
|
||||
<div><p class="eyebrow">Portfolio</p><h2>Винные дома и регионы</h2></div>
|
||||
<p>Страница показывает, как может выглядеть корпоративный раздел: спокойная подача, крупные тезисы и блок преимуществ без перегруза.</p>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
|
||||
<div id="site-footer"></div>
|
||||
</div>
|
||||
<script src="assets/js/components.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
@ -1,121 +0,0 @@
|
||||
<!doctype html>
|
||||
<html lang="ru">
|
||||
<head>
|
||||
<script src="components/head.js"></script>
|
||||
<title>DP Trade — Article Guidelines</title>
|
||||
</head>
|
||||
<body class="compact-type">
|
||||
<div class="site-shell">
|
||||
<div id="site-header"></div>
|
||||
<main class="content-page guidelines-page">
|
||||
<section class="page-hero page-hero--guidelines">
|
||||
<div class="container page-hero__inner">
|
||||
<div>
|
||||
<p class="eyebrow">Editorial guidelines</p>
|
||||
<h1>Рекомендации по статьям DP Trade</h1>
|
||||
<p>Требования к структуре материала, заголовкам, тексту и фотографиям для новостей, историй производителей и экспертных заметок.</p>
|
||||
</div>
|
||||
<aside class="page-hero__meta">
|
||||
<span>Для редакции</span>
|
||||
<strong>Article system</strong>
|
||||
<p>Единые правила помогают статьям выглядеть как часть продукта, а не как случайные публикации.</p>
|
||||
</aside>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="section">
|
||||
<div class="container guideline-grid">
|
||||
<article class="guideline-card guideline-card--lead">
|
||||
<span>01</span>
|
||||
<h2>Структура статьи</h2>
|
||||
<p>Каждый материал должен быстро отвечать на три вопроса: о ком/о чём статья, почему это важно для аудитории DP Trade и какое действие читатель может сделать дальше.</p>
|
||||
<ul>
|
||||
<li>Заголовок: конкретный, с именем производителя, региона или события.</li>
|
||||
<li>Лид: 1-2 предложения, раскрывает главный повод.</li>
|
||||
<li>Основной текст: 3-5 смысловых блоков с подзаголовками или визуальными паузами.</li>
|
||||
<li>Финал: вывод, рекомендация, ссылка в каталог или повод обратиться к менеджеру.</li>
|
||||
</ul>
|
||||
</article>
|
||||
<article class="guideline-card">
|
||||
<span>02</span>
|
||||
<h2>Заголовки</h2>
|
||||
<p>Заголовок должен быть редакционным, но полезным: не только красивым, а ещё и объясняющим тему.</p>
|
||||
<ul>
|
||||
<li>Оптимально: 55-90 символов.</li>
|
||||
<li>Использовать имена: Villa Raiano, Gaja, Bordeaux, Fiano.</li>
|
||||
<li>Избегать пустых формул: «уникальная история», «легендарное событие» без факта.</li>
|
||||
<li>Подзаголовки должны вести читателя по смыслу, а не повторять заголовок.</li>
|
||||
</ul>
|
||||
</article>
|
||||
<article class="guideline-card">
|
||||
<span>03</span>
|
||||
<h2>Текст</h2>
|
||||
<p>Стиль: профессиональный, спокойный, без рекламного нажима. Пишем для закупщиков, сомелье, ресторанов и розницы.</p>
|
||||
<ul>
|
||||
<li>Абзац: 350-650 знаков.</li>
|
||||
<li>Лид: до 280 знаков.</li>
|
||||
<li>Новость: 3 000-5 500 знаков.</li>
|
||||
<li>История производителя: 5 000-8 000 знаков.</li>
|
||||
<li>Цифры, годы, награды и сорта проверять отдельно.</li>
|
||||
</ul>
|
||||
</article>
|
||||
<article class="guideline-card">
|
||||
<span>04</span>
|
||||
<h2>Фотографии</h2>
|
||||
<p>Фотографии должны показывать реальный продукт, место, людей или процесс. Лучше меньше декоративности и больше конкретики.</p>
|
||||
<ul>
|
||||
<li>Hero: горизонтальное фото от 1600px по ширине.</li>
|
||||
<li>Внутренние фото: от 1200px, без сильной компрессии.</li>
|
||||
<li>Для карточек: предмет или бутылка должны быть читаемы на мобильном.</li>
|
||||
<li>Не использовать тёмные, размытые, случайно обрезанные изображения.</li>
|
||||
<li>Обязательно писать alt: кто/что изображено и где.</li>
|
||||
</ul>
|
||||
</article>
|
||||
<article class="guideline-card">
|
||||
<span>05</span>
|
||||
<h2>Композиция</h2>
|
||||
<p>Для длинной статьи нужны визуальные паузы: крупное фото после лида, цитата или факт-блок в середине и финальный акцент.</p>
|
||||
<ul>
|
||||
<li>Не ставить подряд больше 4 текстовых абзацев без паузы.</li>
|
||||
<li>Цитаты использовать только если они усиливают материал.</li>
|
||||
<li>Сайдбар может содержать факты: страна, регион, сорт, год, награда.</li>
|
||||
<li>Финальный CTA должен быть связан с каталогом или менеджером.</li>
|
||||
</ul>
|
||||
</article>
|
||||
<article class="guideline-card">
|
||||
<span>06</span>
|
||||
<h2>SEO и handoff</h2>
|
||||
<p>Материал должен быть понятен поиску и разработке: один H1, последовательные H2, корректные alt и прозрачная структура блоков.</p>
|
||||
<ul>
|
||||
<li>Title: до 60 символов, включает бренд или тему.</li>
|
||||
<li>Description: 140-160 символов.</li>
|
||||
<li>URL: латиница, короткий slug.</li>
|
||||
<li>Изображения называть по смыслу, а не `photo-final-2`.</li>
|
||||
<li>В CMS хранить дату, автора/раздел, теги и связанные товары.</li>
|
||||
</ul>
|
||||
</article>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="section muted-section">
|
||||
<div class="container guideline-checklist">
|
||||
<div>
|
||||
<p class="eyebrow">Pre-publish checklist</p>
|
||||
<h2>Проверка перед публикацией</h2>
|
||||
</div>
|
||||
<ul>
|
||||
<li>Заголовок отражает конкретный повод и не звучит как реклама.</li>
|
||||
<li>В лиде понятна ценность материала для профессиональной аудитории.</li>
|
||||
<li>Все годы, имена, апелласьоны и награды проверены.</li>
|
||||
<li>Есть минимум 2-4 качественные фотографии с alt-текстами.</li>
|
||||
<li>Финал ведёт к каталогу, производителю, товару или контакту с менеджером.</li>
|
||||
</ul>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
|
||||
<div id="site-footer"></div>
|
||||
</div>
|
||||
<script src="assets/js/components.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
@ -1,241 +0,0 @@
|
||||
<!doctype html>
|
||||
<html lang="ru">
|
||||
<head>
|
||||
<script src="components/head.js"></script>
|
||||
<title>DP Trade — Bottle Card Variants</title>
|
||||
</head>
|
||||
<body class="compact-type">
|
||||
<div class="site-shell">
|
||||
<div id="site-header"></div>
|
||||
<main class="section card-lab-section">
|
||||
<div class="container">
|
||||
<div class="card-lab-head">
|
||||
<div>
|
||||
<p class="eyebrow">UI-kit / Product cards</p>
|
||||
<h1>Варианты карточек бутылок</h1>
|
||||
</div>
|
||||
<p>Отдельная витрина для выбора направления карточки: крупные плитки, компактные версии и горизонтальный формат для B2B-каталога.</p>
|
||||
</div>
|
||||
|
||||
<section class="card-variant-block" aria-labelledby="cards-grid-title">
|
||||
<div class="card-variant-title">
|
||||
<p class="eyebrow">Variant 01</p>
|
||||
<h2 id="cards-grid-title">Акцентные карточки каталога</h2>
|
||||
</div>
|
||||
<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/00081538_1.png" alt="Chateau Laroque Grand Cru" />
|
||||
</div>
|
||||
<div class="bottle-card__body">
|
||||
<p class="bottle-card__region">Bordeaux</p>
|
||||
<h3>Chateau Laroque Grand Cru</h3>
|
||||
<p>France · Red dry · 2019 · 0.75 L</p>
|
||||
</div>
|
||||
<div class="bottle-card__footer">
|
||||
<strong>3 890 ₽</strong>
|
||||
<a class="button button--primary button--sm" href="product.html">Подробнее</a>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<article class="bottle-card bottle-card--tuscany">
|
||||
<div class="bottle-card__media">
|
||||
<img class="bottle-card__photo" src="assets/images/00080768_1.png" alt="Brunello di Montalcino" />
|
||||
</div>
|
||||
<div class="bottle-card__body">
|
||||
<p class="bottle-card__region">Tuscany</p>
|
||||
<h3>Brunello di Montalcino</h3>
|
||||
<p>Italy · Red dry · 2018 · 0.75 L</p>
|
||||
</div>
|
||||
<div class="bottle-card__footer">
|
||||
<strong>4 240 ₽</strong>
|
||||
<a class="button button--primary button--sm" href="product.html">Подробнее</a>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<article class="bottle-card bottle-card--mosel">
|
||||
<div class="bottle-card__media">
|
||||
<img class="bottle-card__photo" src="assets/images/00081726_1.png" alt="Riesling Kabinett" />
|
||||
</div>
|
||||
<div class="bottle-card__body">
|
||||
<p class="bottle-card__region">Mosel</p>
|
||||
<h3>Riesling Kabinett</h3>
|
||||
<p>Germany · White · 2021 · 0.75 L</p>
|
||||
</div>
|
||||
<div class="bottle-card__footer">
|
||||
<strong>2 150 ₽</strong>
|
||||
<a class="button button--primary button--sm" href="product.html">Подробнее</a>
|
||||
</div>
|
||||
</article>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="card-variant-block" aria-labelledby="cards-alt-title">
|
||||
<div class="card-variant-title">
|
||||
<p class="eyebrow">Variant 02-04</p>
|
||||
<h2 id="cards-alt-title">Альтернативные форматы</h2>
|
||||
</div>
|
||||
<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/00081538_1.png" alt="Oremus Case of Aszu" />
|
||||
</div>
|
||||
<div class="bottle-card__body">
|
||||
<p class="bottle-card__region">Clean retail</p>
|
||||
<h3>Oremus Case of Aszu 5 Puttonyos</h3>
|
||||
<p>Hungary · White sweet · 2000 · 0.5 L</p>
|
||||
</div>
|
||||
<div class="bottle-card__footer">
|
||||
<strong>19 240 ₽</strong>
|
||||
<a class="button button--secondary button--sm" href="product.html">В избранное</a>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<article class="bottle-card bottle-card--compact">
|
||||
<div class="bottle-card__media">
|
||||
<img class="bottle-card__photo" src="assets/images/00080768_1.png" alt="Oremus Tokaji Aszu" />
|
||||
</div>
|
||||
<div class="bottle-card__body">
|
||||
<p class="bottle-card__region">Compact</p>
|
||||
<h3>Tokaji Aszu 5 Puttonyos</h3>
|
||||
<p>Hungary · 12% · Furmint, Harslevelu</p>
|
||||
</div>
|
||||
<div class="bottle-card__footer">
|
||||
<strong>19 240 ₽</strong>
|
||||
<a class="button button--primary button--sm" href="product.html">Подробнее</a>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<article class="bottle-card bottle-card--horizontal">
|
||||
<div class="bottle-card__media">
|
||||
<img class="bottle-card__photo" src="assets/images/00081726_1.png" alt="Oremus Tokaji Late Harvest" />
|
||||
</div>
|
||||
<div class="bottle-card__content">
|
||||
<div class="bottle-card__body">
|
||||
<p class="bottle-card__region">B2B row card</p>
|
||||
<h3>Oremus Tokaji Late Harvest</h3>
|
||||
<p>Вино белое полусладкое · Венгрия · 11.5%</p>
|
||||
<p class="bottle-card__details">Сорт: Фурминт, Зета, Харшлевелю</p>
|
||||
</div>
|
||||
<div class="bottle-card__footer">
|
||||
<strong>4 980 ₽</strong>
|
||||
<a class="button button--secondary button--sm" href="product.html">В избранное</a>
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="card-variant-block" aria-labelledby="catalog-card-title">
|
||||
<div class="card-variant-title">
|
||||
<p class="eyebrow">Catalog current</p>
|
||||
<h2 id="catalog-card-title">Варианты текущей карточки каталога</h2>
|
||||
</div>
|
||||
<div class="catalog-card-variants">
|
||||
<article class="catalog-card-sample">
|
||||
<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/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>
|
||||
<p class="product-origin">Вино белое, Oremus, Венгрия</p>
|
||||
<p>Вино Белое Сладкое<br />12 %</p>
|
||||
<p>Сорт: Фурминт (70%), Харшлевелю (28%), Мускат (2%)</p>
|
||||
</div>
|
||||
<div class="product-buy">
|
||||
<strong>19 240 ₽</strong>
|
||||
<a class="button button--secondary" href="#">В избранное</a>
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<article class="catalog-card-sample">
|
||||
<p class="catalog-card-sample__label">Compact / меньше высота</p>
|
||||
<div class="product-card product-card--list product-card--list-compact">
|
||||
<a class="product-image" href="product.html" aria-label="Вино белое Oremus, Tokaji Aszu 5 Puttonyos, 0.5 л. 2000">
|
||||
<img src="assets/images/00080768_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>
|
||||
<p class="product-origin">Вино белое, Oremus, Венгрия</p>
|
||||
<p>Сладкое · 12% · Фурминт, Харшлевелю, Мускат</p>
|
||||
</div>
|
||||
<div class="product-buy">
|
||||
<strong>19 240 ₽</strong>
|
||||
<a class="button button--secondary" href="#">В избранное</a>
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<article class="catalog-card-sample">
|
||||
<p class="catalog-card-sample__label">Hover / активная строка</p>
|
||||
<div class="product-card product-card--list product-card--list-hover">
|
||||
<a class="product-image" href="product.html" aria-label="Вино белое Oremus, Tokaji Late Harvest, 0.5 л. 2021">
|
||||
<img src="assets/images/00081726_1.png" alt="Вино белое Oremus, Tokaji Late Harvest, 0.5 л. 2021" />
|
||||
</a>
|
||||
<div class="product-info">
|
||||
<h3>Вино белое Oremus, Tokaji Late Harvest, 0.5 л. 2021</h3>
|
||||
<p class="product-origin">Вино белое, Oremus, Венгрия</p>
|
||||
<p>Вино Белое Полусладкое<br />11.5 %</p>
|
||||
<p>Сорт: Фурминт, Зета, Харшлевелю</p>
|
||||
</div>
|
||||
<div class="product-buy">
|
||||
<strong>4 980 ₽</strong>
|
||||
<a class="button button--primary" href="#">Подробнее</a>
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<article class="catalog-card-sample">
|
||||
<p class="catalog-card-sample__label">Color image / цветной фон фото</p>
|
||||
<div class="product-card product-card--list product-card--list-color">
|
||||
<a class="product-image product-image--gold" href="product.html" aria-label="Вино белое Oremus, Tokaji Aszu 5 Puttonyos, 0.5 л. 2000">
|
||||
<img src="assets/images/00080768_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>
|
||||
<p class="product-origin">Вино белое, Oremus, Венгрия</p>
|
||||
<p>Вино Белое Сладкое<br />12 %</p>
|
||||
<p>Сорт: Фурминт (70%), Харшлевелю (28%), Мускат (2%)</p>
|
||||
</div>
|
||||
<div class="product-buy">
|
||||
<strong>19 240 ₽</strong>
|
||||
<a class="button button--secondary" href="#">В избранное</a>
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<article class="catalog-card-sample">
|
||||
<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/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>
|
||||
<p class="product-origin">Венгрия · Tokaj · Oremus · 0.5 л · 12%</p>
|
||||
<div class="product-params">
|
||||
<span>Тип: белое сладкое</span>
|
||||
<span>Сорт: Фурминт 70%</span>
|
||||
<span>Упаковка: 6 шт.</span>
|
||||
<span>Артикул: 00073820</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="product-buy">
|
||||
<strong>19 240 ₽</strong>
|
||||
<a class="button button--secondary" href="#">В избранное</a>
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<div id="site-footer"></div>
|
||||
</div>
|
||||
<script src="assets/js/components.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
89
catalog.html
89
catalog.html
@ -1,89 +0,0 @@
|
||||
<!doctype html>
|
||||
<html lang="ru">
|
||||
<head>
|
||||
<script src="components/head.js"></script>
|
||||
<title>DP Trade — Catalog</title>
|
||||
</head>
|
||||
<body class="compact-type">
|
||||
<div class="site-shell">
|
||||
<div id="site-header"></div>
|
||||
|
||||
<main class="section catalog-section">
|
||||
<div class="container">
|
||||
<div class="catalog-head">
|
||||
<div>
|
||||
<p class="eyebrow">Catalog / Country</p>
|
||||
<h1>Венгрия</h1>
|
||||
</div>
|
||||
<div class="catalog-actions" aria-label="Действия каталога">
|
||||
<span>Всего найдено: 22</span>
|
||||
<a class="button button--secondary" href="#">Все в избранное</a>
|
||||
<a class="button button--secondary" href="#">Очистить избранное</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="catalog-toolbar">
|
||||
<span>Всего найдено: 22</span>
|
||||
<select class="input catalog-sort" aria-label="Сортировка">
|
||||
<option>Исходная сортировка</option>
|
||||
<option>По цене</option>
|
||||
<option>По названию</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<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/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>
|
||||
<p class="product-origin">Вино белое, Oremus, Венгрия</p>
|
||||
<p>Вино Белое Сладкое<br />12 %</p>
|
||||
<p>Сорт: Фурминт (70%), Харшлевелю (28%), Мускат (2%)</p>
|
||||
</div>
|
||||
<div class="product-buy">
|
||||
<strong>19 240 ₽</strong>
|
||||
<a class="button button--secondary" href="#">В избранное</a>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<article class="product-card product-card--list">
|
||||
<a class="product-image" href="product.html" aria-label="Вино белое Oremus, Tokaji Aszu 5 Puttonyos, 0.5 л. 2000">
|
||||
<img src="assets/images/00080768_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>
|
||||
<p class="product-origin">Вино белое, Oremus, Венгрия</p>
|
||||
<p>Вино Белое Сладкое<br />12 %</p>
|
||||
<p>Сорт: Фурминт (70%), Харшлевелю (28%), Мускат (2%)</p>
|
||||
</div>
|
||||
<div class="product-buy">
|
||||
<strong>19 240 ₽</strong>
|
||||
<a class="button button--secondary" href="#">В избранное</a>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<article class="product-card product-card--list">
|
||||
<a class="product-image" href="product.html" aria-label="Вино белое Oremus, Tokaji Late Harvest, 0.5 л. 2021">
|
||||
<img src="assets/images/00081726_1.png" alt="Вино белое Oremus, Tokaji Late Harvest, 0.5 л. 2021" />
|
||||
</a>
|
||||
<div class="product-info">
|
||||
<h3>Вино белое Oremus, Tokaji Late Harvest, 0.5 л. 2021</h3>
|
||||
<p class="product-origin">Вино белое, Oremus, Венгрия</p>
|
||||
<p>Вино Белое Полусладкое<br />11.5 %</p>
|
||||
<p>Сорт: Фурминт, Зета, Харшлевелю</p>
|
||||
</div>
|
||||
<div class="product-buy">
|
||||
<strong>4 980 ₽</strong>
|
||||
<a class="button button--secondary" href="#">В избранное</a>
|
||||
</div>
|
||||
</article>
|
||||
</section>
|
||||
</div>
|
||||
</main>
|
||||
<div id="site-footer"></div>
|
||||
</div>
|
||||
<script src="assets/js/components.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
@ -1,70 +0,0 @@
|
||||
<!doctype html>
|
||||
<html lang="ru">
|
||||
<head>
|
||||
<script src="components/head.js"></script>
|
||||
<title>DP Trade — Контакты / Auth Gate</title>
|
||||
</head>
|
||||
<body class="compact-type">
|
||||
<div class="site-shell">
|
||||
<div id="site-header"></div>
|
||||
<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>
|
||||
|
||||
<div id="site-footer"></div>
|
||||
</div>
|
||||
<script src="assets/js/components.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
@ -1,59 +0,0 @@
|
||||
<!doctype html>
|
||||
<html lang="ru">
|
||||
<head>
|
||||
<script src="components/head.js"></script>
|
||||
<title>DP Trade — Контакты</title>
|
||||
</head>
|
||||
<body class="compact-type">
|
||||
<div class="site-shell">
|
||||
<div id="site-header"></div>
|
||||
<main class="content-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>
|
||||
<form class="contact-form" action="#">
|
||||
<h2>Заявка менеджеру</h2>
|
||||
<label>Имя<input class="input" type="text" placeholder="Как к вам обращаться" /></label>
|
||||
<label>Телефон или email<input class="input" type="text" placeholder="Контакт для ответа" /></label>
|
||||
<label>Сообщение<textarea class="input" rows="5" placeholder="Напишите, что нужно подобрать"></textarea></label>
|
||||
<button class="button button--primary" type="submit">Отправить заявку</button>
|
||||
</form>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
|
||||
<div id="site-footer"></div>
|
||||
</div>
|
||||
<script src="assets/js/components.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
@ -1,3 +1,19 @@
|
||||
/* full family */
|
||||
@font-face {
|
||||
font-family: 'Cormorant Garamond';
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-display: swap;
|
||||
src: url('../fonts/CormorantGaramond-Regular.woff2') format('woff2');
|
||||
}
|
||||
/* full family */
|
||||
@font-face {
|
||||
font-family: 'Cormorant Garamond';
|
||||
font-style: normal;
|
||||
font-weight: 500;
|
||||
font-display: swap;
|
||||
src: url('../fonts/CormorantGaramond-Medium.woff2') format('woff2');
|
||||
}
|
||||
/* cyrillic-ext */
|
||||
@font-face {
|
||||
font-family: 'Cormorant Garamond';
|
||||
|
||||
@ -9,6 +9,48 @@
|
||||
|
||||
Часть аудита уже не полностью совпадает с текущей реализацией: на главной CTA в hero присутствуют (`Смотреть каталог`, `Открыть UI-kit`), а заголовки в исходных HTML не набраны капсом руками. Но CSS принудительно включает uppercase и тяжелый вес, поэтому визуально замечание дизайнера остается актуальным.
|
||||
|
||||
## Статус проекта - 2026-05-19
|
||||
|
||||
Кодовая база сейчас находится в состоянии V1 + переключаемый V2. Источник правды - `src/`, сборка идет через Eleventy в `_site/`. Основные дизайнерские замечания закрыты в V2: обновлены токены, подключены легкие Cormorant `400/500`, снижена жирность Cormorant, переработаны карточки товара, section headings, mega-menu, footer, контакты и product breadcrumbs. V1 остается для сравнения и не считается финальным направлением.
|
||||
|
||||
Открытые задачи: визуальный QA V2 на desktop/tablet/mobile, финальная продуктовая модель и расширенное описание товара, проверка плотных catalog list-cards, перенос V2-токенов в Elementor-документ/production handoff, production-блоки вроде pagination, 404, cookie/privacy и полноценной form validation.
|
||||
|
||||
## Статус проверки кода - 2026-04-23
|
||||
|
||||
Важно: исправления внедрены как переключаемая версия V2, а не как замена V1. В `src/_includes/layouts/base.njk` подключен `css/v2.css`, `src/js/design-switcher.js` переключает `data-design-version="v1|v2"` через `localStorage`, а переключатели есть в header и UI-kit. По умолчанию без сохраненного выбора открывается V1, поэтому статусы ниже означают "исправлено в V2".
|
||||
|
||||
| Блок | Статус | Что найдено в коде |
|
||||
| --- | --- | --- |
|
||||
| Механика V2 | [done] исправлено | Добавлены `src/css/v2.css`, `src/js/design-switcher.js`, переключатели V1/V2 в `src/_includes/partials/header.njk` и `src/ui-kit.njk`. |
|
||||
| Системные токены | [done] исправлено в V2 | В `src/css/tokens.css` для `:root[data-design-version="v2"]` заданы `#7D021D`, `#FFFDFA`, `#F5F0E8`, Cormorant Garamond и Manrope. |
|
||||
| UI-kit токены | [partial] частично | `src/css/ui-kit.css` все еще содержит старые V1-токены, но V2-override подключается после него через `src/css/v2.css`. Для полной чистоты можно синхронизировать сам `ui-kit.css`. |
|
||||
| Типографика и uppercase | [done] исправлено в V2 | `src/css/v2.css` снимает uppercase с H1-H4, hero, карточек, page hero, формы и снижает веса заголовков. Caps оставлен для meta/eyebrow. |
|
||||
| Минимальный размер 8px | [done] исправлено в V2 | `.brand-logo small` поднят до 12px в `src/css/v2.css`. |
|
||||
| Палитра и синий телефон | [done] исправлено в V2 | В V2 синий акцент заменен на бордовый, `.phone-link` стал бордовым и легче по весу. |
|
||||
| Холодные фоны | [partial] частично | Главные конфликтные фоны (`news-section`, `muted-section`, contacts hero) переведены в теплую гамму в V2. В V1 и отдельных старых CSS-участках холодные цвета остаются. |
|
||||
| Карточки товара | [done] исправлено в V2 | Градиенты `.product-media*` заменены на `#F5F0E8`, название стало serif/normal case, footer перестроен вертикально, CTA стал outlined/full-width. |
|
||||
| Карточки каталога | [partial] частично | Заголовки списка облегчены и переведены в serif/normal case. Цена и плотная B2B-композиция в основном сохранены. |
|
||||
| Mega-menu | [done] исправлено в V2 | Заголовки снижены до 18px/normal case, изображения уменьшены, страны/апелласьоны разведены по иерархии, popular chips получили единый min-width. |
|
||||
| Главная | [done] исправлено в V2 | Hero H1 и H2 секций переведены в Cormorant/normal case, карточки рекомендаций и фон новостей обновлены. CTA уже был. |
|
||||
| Страница продукта | [partial] частично | Добавлены V2-only breadcrumbs, H1 облегчен, описание ограничено `66ch`. Расширенного описания пока нет, и вертикальную композицию метаданных/CTA стоит еще проверить визуально. |
|
||||
| "О нас" | [partial] частично | H1, article width, H2, feature-card, blockquote и muted-section исправлены в V2. Hero все еще использует темную фотографию и правую meta-карточку, хотя карточка стала мягче. |
|
||||
| "Контакты" | [partial] частично | Hero без фото, телефон уменьшен, форма облегчена, поле контакта разделяется JS на телефон/email, success-state добавлен. Юридический блок только опущен в конец левой колонки, но не вынесен ниже формы/в конец страницы. |
|
||||
| Проверка сборки | [done] проверено | `npm run build` успешно прошел 2026-05-19; Eleventy записал 12 файлов в `_site`. |
|
||||
|
||||
## Новые замечания дизайнера - 2026-04-28
|
||||
|
||||
Источник: скриншоты/комментарии от Виктории.
|
||||
|
||||
| Блок | Статус | Что сделано |
|
||||
| --- | --- | --- |
|
||||
| Легкие Cormorant 400/500 | [done] подключено | Добавлены `CormorantGaramond-Regular.woff2` и `CormorantGaramond-Medium.woff2`; в `src/css/tokens.css` и `css/tokens.css` прописаны настоящие `@font-face` для весов `400` и `500`. |
|
||||
| Общая жирность Cormorant в V2 | [done] CSS-слой | В `src/css/v2.css` Cormorant-заголовки переведены с `500/600` на `400` там, где это карточки, секции, mega-menu, footer, page hero, article blocks. |
|
||||
| Карточки товара | [done] V2 | `.product-card h3` увеличен до 22px, вес снижен до 400, normal case сохранен. |
|
||||
| Заголовки секций | [done] V2 | `.section-heading h2` сделан тонким uppercase с Cormorant `400`, без дополнительной жирности. Hero H1 не затронут caps-правилом. |
|
||||
| Footer | [done] V2 | Заголовки колонок footer стали Cormorant 16px/400, без uppercase; подпункты остаются Manrope. Телефон в footer оставлен бордовым. |
|
||||
| Mega-menu | [done] V2 | Заголовок `Вина по географии` увеличен до 22px и облегчен до 400; меню, колонки и ссылки выровнены по левому краю; popular chips стали менее кнопочными и с левым текстом. |
|
||||
| Апелласьоны | [done] V2 | `.country-link` (`Франция`, `Италия`) перекрашен в бордо, вес снижен до 500; апелласьоны под ними остались normal case с левым отступом. |
|
||||
|
||||
## Ключевые замечания
|
||||
|
||||
### 1. Типографика
|
||||
@ -84,40 +126,40 @@
|
||||
|
||||
### Этап 1. Системные токены и базовая типографика
|
||||
|
||||
1. Обновить `src/css/tokens.css`: `--font-heading` на Cormorant Garamond, `--font-body` на Manrope, основной бордовый на `#7D021D`, фон на теплый `#FFFDFA`, surface/card background на теплую белую/кремовую шкалу.
|
||||
2. Синхронизировать те же токены в `src/css/ui-kit.css`, чтобы витрина UI-kit не расходилась с сайтом.
|
||||
3. Убрать uppercase с H2-H4, product titles, news titles, page hero titles, form titles. Caps оставить только для eyebrow/meta labels.
|
||||
4. Пересобрать шкалу весов: H1 может быть крупным, но не обязательно 800; H2-H4 сделать 500-600 или доступный локальный эквивалент с текущими файлами шрифтов.
|
||||
5. Проверить минимальные размеры: не использовать текст ниже 12px.
|
||||
1. [done] V2: обновить `src/css/tokens.css`: `--font-heading` на Cormorant Garamond, `--font-body` на Manrope, основной бордовый на `#7D021D`, фон на теплый `#FFFDFA`, surface/card background на теплую белую/кремовую шкалу.
|
||||
2. [partial] Частично: синхронизировать те же токены в `src/css/ui-kit.css`, чтобы витрина UI-kit не расходилась с сайтом. V2-override работает, но базовый `ui-kit.css` остался на V1-токенах.
|
||||
3. [done] V2: убрать uppercase с H2-H4, product titles, news titles, page hero titles, form titles. Caps оставить только для eyebrow/meta labels.
|
||||
4. [done] V2: пересобрать шкалу весов: H1 может быть крупным, но не обязательно 800; H2-H4 сделать 500-600 или доступный локальный эквивалент с текущими файлами шрифтов.
|
||||
5. [done] V2: проверить минимальные размеры: не использовать текст ниже 12px.
|
||||
|
||||
### Этап 2. Карточки и CTA
|
||||
|
||||
1. Заменить градиентные product media на единый теплый нейтральный фон `#F5F0E8`.
|
||||
2. Перестроить карточку рекомендаций: region label, serif title 16-18px, gray meta 13px, разделитель, цена 22-24px, outlined full-width CTA.
|
||||
3. Смягчить primary/secondary buttons: новый бордовый, меньше "B2B-тяжести", четкие hover/focus states.
|
||||
4. Проверить карточки каталога отдельно: сохранить плотность B2B-списка, но снизить вес заголовков и цены.
|
||||
1. [done] V2: заменить градиентные product media на единый теплый нейтральный фон `#F5F0E8`.
|
||||
2. [done] V2: перестроить карточку рекомендаций: region label, serif title 16-18px, gray meta 13px, разделитель, цена 22-24px, outlined full-width CTA.
|
||||
3. [done] V2: смягчить primary/secondary buttons: новый бордовый, меньше "B2B-тяжести", четкие hover/focus states.
|
||||
4. [partial] Частично: проверить карточки каталога отдельно: сохранить плотность B2B-списка, но снизить вес заголовков и цены.
|
||||
|
||||
### Этап 3. Header и mega-menu
|
||||
|
||||
1. Убрать синий цвет телефона в шапке, оставить синий только внутри логотипа.
|
||||
2. Уменьшить и облегчить заголовки mega-menu: 16-18px, normal case, semibold.
|
||||
3. Переделать визуальную колонку mega-menu: уменьшить изображение или вынести его в небольшой промо-блок.
|
||||
4. Настроить иерархию апелласьонов: страна как meta label, регионы с отступом и normal case.
|
||||
5. Выровнять popular chips: единый min-width или одна строка с равномерным ритмом.
|
||||
1. [done] V2: убрать синий цвет телефона в шапке, оставить синий только внутри логотипа.
|
||||
2. [done] V2: уменьшить и облегчить заголовки mega-menu: 16-18px, normal case, semibold.
|
||||
3. [done] V2: переделать визуальную колонку mega-menu: уменьшить изображение или вынести его в небольшой промо-блок.
|
||||
4. [done] V2: настроить иерархию апелласьонов: страна как meta label, регионы с отступом и normal case.
|
||||
5. [done] V2: выровнять popular chips: единый min-width или одна строка с равномерным ритмом.
|
||||
|
||||
### Этап 4. Страницы
|
||||
|
||||
1. Главная: обновить hero-типографику, H2 секций, карточки рекомендаций и холодные фоны новостей.
|
||||
2. Продукт: добавить breadcrumbs, расширенный description-блок с `max-width: 65-72ch`, пересобрать вертикальную иерархию metadata/price/CTA.
|
||||
3. О нас: сделать hero спокойнее, смягчить правую карточку, сузить основной текст до 66ch, облегчить подзаголовки, убрать жесткую высоту feature-card, заменить холодный muted-section.
|
||||
4. Контакты: сделать компактный hero без тяжелой фотографии, вывести телефон/email в первый экран, юридический текст перенести ниже, облегчить форму, разделить контактные поля или добавить подсказку, добавить success-state.
|
||||
1. [done] V2: главная - обновить hero-типографику, H2 секций, карточки рекомендаций и холодные фоны новостей.
|
||||
2. [partial] Частично: продукт - добавить breadcrumbs, расширенный description-блок с `max-width: 65-72ch`, пересобрать вертикальную иерархию metadata/price/CTA.
|
||||
3. [partial] Частично: о нас - сделать hero спокойнее, смягчить правую карточку, сузить основной текст до 66ch, облегчить подзаголовки, убрать жесткую высоту feature-card, заменить холодный muted-section.
|
||||
4. [partial] Частично: контакты - сделать компактный hero без тяжелой фотографии, вывести телефон/email в первый экран, юридический текст перенести ниже, облегчить форму, разделить контактные поля или добавить подсказку, добавить success-state.
|
||||
|
||||
### Этап 5. Проверка
|
||||
|
||||
1. Прогнать `npm run build`.
|
||||
2. Проверить страницы минимум на desktop и mobile: `index.html`, `catalog.html`, `product.html`, `about.html`, `contacts.html`, `ui-kit.html`.
|
||||
3. Отдельно проверить, что длинные русские заголовки и телефоны не ломают сетку.
|
||||
4. Сверить UI-kit с сайтом: токены, кнопки, карточки, hero, формы.
|
||||
1. [done] Прогнать `npm run build`.
|
||||
2. [todo] Проверить страницы минимум на desktop и mobile: `index.html`, `catalog.html`, `product.html`, `about.html`, `contacts.html`, `ui-kit.html`.
|
||||
3. [todo] Отдельно проверить, что длинные русские заголовки и телефоны не ломают сетку.
|
||||
4. [partial] Частично: сверить UI-kit с сайтом: токены, кнопки, карточки, hero, формы.
|
||||
|
||||
## Приоритет
|
||||
|
||||
@ -128,4 +170,3 @@ P1: карточки товара, CTA, header/mega-menu. Это самые за
|
||||
P2: страницы "О нас", "Контакты", "Продукт". Здесь много композиционных улучшений, но они лучше лягут после системной смены визуального языка.
|
||||
|
||||
P3: финальная полировка UI-kit, состояния формы, hover/focus, адаптивные проверки.
|
||||
|
||||
|
||||
@ -8,7 +8,9 @@
|
||||
2. **Декомпозиция работ** — список Elementor-элементов (Global Styles, CSS-слой, глобальные шаблоны, страницы) с оценкой сложности и зависимостями.
|
||||
3. **Пошаговый план** — 6 этапов с QA и планом отката.
|
||||
|
||||
> Основной источник дизайна: `index.html`, `catalog.html`, `product.html`, `bottle-cards.html`, `about.html`, `contacts.html`, `contacts-auth.html`, `news-villa-raiano.html`, `news-villa-raiano-v2.html`, `article-guidelines.html`, `ui-kit.html` плюс `css/tokens.css`, `css/site.css`, `css/ui-kit.css`.
|
||||
> Основной источник дизайна: `src/*.njk`, `src/css/tokens.css`, `src/css/site.css`, `src/css/v2.css`, `src/css/ui-kit.css`, `src/fonts/`, `src/js/design-switcher.js`. Сборочный результат находится в `_site/`.
|
||||
|
||||
> Статус на 2026-05-19: production-направление для новых правок — **V2**. V1 сохранен для сравнения, но перенос в Elementor должен ориентироваться на V2-токены: Cormorant Garamond + Manrope, бордовый `#7D021D`, теплый фон `#FFFDFA`, карточный фон `#F5F0E8`, тонкие Cormorant-заголовки и обновленные карточки/mega-menu/footer.
|
||||
|
||||
---
|
||||
|
||||
@ -74,7 +76,7 @@
|
||||
| Meta list (4 пары label/value) | `.meta-list`, `.meta-list div`, `.meta-list span` | product | Лёгко |
|
||||
| Article body (editorial) | `.article-body`, `.article-body .lead`, `.article-body h2/h3/p/ul` | news, guidelines | Средне |
|
||||
| Footer | `.site-footer`, `.footer-container`, `.footer-main`, `.footer-brand-block`, `.nav-group`, `.contacts-card`, `.social-links` | все страницы | Лёгко |
|
||||
| Breadcrumbs | отсутствуют в макете | — | нужно добавить отдельно |
|
||||
| Breadcrumbs | `.breadcrumbs` | product V2 | Лёгко |
|
||||
| Pagination | отсутствует в макете | — | нужно добавить отдельно |
|
||||
|
||||
### 2.3 Проблемные места для Elementor
|
||||
@ -108,14 +110,14 @@
|
||||
|
||||
Эти блоки **не реализованы** в HTML-ките, но без них запуск не собрать. Добавьте их в бэклог:
|
||||
|
||||
- Breadcrumbs на catalog / single product / news / guidelines.
|
||||
- Breadcrumbs на catalog / news / guidelines. Product V2 уже содержит базовые breadcrumbs.
|
||||
- Pagination и «показать ещё» в каталоге.
|
||||
- Author/byline и дата публикации в новостях.
|
||||
- 404 page.
|
||||
- Cookie / privacy banner.
|
||||
- WooCommerce cart/checkout/account (если магазин включён), минимальная стилизация.
|
||||
- Сохранённое состояние поиска, пустое состояние каталога.
|
||||
- Форма обратной связи с валидацией и success-экраном.
|
||||
- Форма обратной связи с полной валидацией. V2 уже содержит split contact fields и простой success-state.
|
||||
- Skeleton / loading state для каталога.
|
||||
- Accessible labels на иконках хедера.
|
||||
|
||||
@ -125,11 +127,13 @@
|
||||
|
||||
| Файл | Что это |
|
||||
|---|---|
|
||||
| `css/tokens.css` | Единый источник значений: цвета, шрифты, spacing, radius, shadows, container |
|
||||
| `css/site.css` | Все боевые стили: header, mega-menu, hero, page-hero, карточки, каталог, формы, футер |
|
||||
| `css/ui-kit.css` | Стили витрины `ui-kit.html` (sidebar, swatches, demo), в production **не переносить** |
|
||||
| `src/css/tokens.css` | Единый источник значений: шрифты, цвета, spacing, radius, shadows, container |
|
||||
| `src/css/site.css` | Базовая V1-верстка: header, mega-menu, hero, page-hero, карточки, каталог, формы, футер |
|
||||
| `src/css/v2.css` | Production-направление V2: теплая палитра, Cormorant/Manrope, карточки, mega-menu, footer, form states |
|
||||
| `src/css/ui-kit.css` | Стили витрины `ui-kit.html` (sidebar, swatches, demo), в production **не переносить** |
|
||||
| `src/fonts/` | Шрифты, включая Cormorant Garamond `400/500/600/700` и Manrope |
|
||||
|
||||
В Elementor переносите не CSS целиком, а токены + CSS-классы `dp-*`. `ui-kit.css` остаётся как reference.
|
||||
В Elementor переносите не CSS целиком, а V2-токены + CSS-классы `dp-*`. `site.css` и `ui-kit.css` остаются reference; `v2.css` фиксирует актуальные дизайнерские решения.
|
||||
|
||||
---
|
||||
|
||||
@ -139,16 +143,17 @@
|
||||
|
||||
| Elementor name | CSS token | Value | Роль |
|
||||
|---|---|---|---|
|
||||
| DP Wine 100 | `--color-primary-wine-100` | `#4b0f24` | Основной бренд, primary кнопки, hover меню, линки |
|
||||
| DP Wine 80 | `--color-primary-wine-80` | `#6d1c36` | Hover primary, вторичный вин |
|
||||
| DP Wine 100 | `--color-primary-wine-100` | `#7D021D` | Основной бренд, primary кнопки, hover меню, линки |
|
||||
| DP Wine 80 | `--color-primary-wine-80` | `#9b1a33` | Hover primary, вторичный вин |
|
||||
| DP Black | `--color-neutral-black` | `#161616` | Основной текст |
|
||||
| DP Gray 700 | `--color-neutral-gray-700` | `#30343a` | Навигация, плотный secondary text |
|
||||
| DP Gray 600 | `--color-neutral-gray-600` | `#66605f` | Muted text, подписи, описания |
|
||||
| DP Gray 300 | `--color-neutral-gray-300` | `#d9dee6` | Бордеры, разделители |
|
||||
| DP Background | `--color-background-base` | `#f4f6f9` | Фон страниц |
|
||||
| DP Background | `--color-background-base` | `#FFFDFA` | Фон страниц |
|
||||
| DP Surface | `--color-surface` | `#ffffff` | Карточки, формы, панели |
|
||||
| DP Surface Warm | `--color-surface-warm` | `#F5F0E8` | Product media, warm sections, soft secondary buttons |
|
||||
| DP Gold | `--color-accent-gold` | `#b9965b` | Eyebrow, статусы, премиум-акцент |
|
||||
| DP Blue | `--color-accent-blue` | `#1f3476` | Logo `.brand-logo`, `.phone-link`, инфо-акценты |
|
||||
| DP Blue | `--color-accent-blue` | `#7D021D` | В V2 синий убран из UI; оставить настоящий синий только внутри изображения логотипа |
|
||||
| DP Error | `--color-error` | `#a33a2f` | Ошибки форм |
|
||||
|
||||
Также рекомендуются служебные **alpha-значения**, которые лучше держать в `--dp-*` переменных, а не как Global Colors (Elementor не умеет alpha-переменные как токены):
|
||||
@ -157,38 +162,38 @@
|
||||
--dp-border-soft: rgba(102, 96, 95, 0.12);
|
||||
--dp-border-med: rgba(102, 96, 95, 0.16);
|
||||
--dp-border-strong: rgba(102, 96, 95, 0.24);
|
||||
--dp-wine-border: rgba(75, 15, 36, 0.24);
|
||||
--dp-wine-hover: rgba(75, 15, 36, 0.06);
|
||||
--dp-header-bg: rgba(248, 250, 252, 0.94);
|
||||
--dp-focus-ring: 0 0 0 4px rgba(75, 15, 36, 0.08);
|
||||
--dp-wine-border: rgba(125, 2, 29, 0.24);
|
||||
--dp-wine-hover: rgba(125, 2, 29, 0.06);
|
||||
--dp-header-bg: rgba(255, 253, 250, 0.94);
|
||||
--dp-focus-ring: 0 0 0 4px rgba(125, 2, 29, 0.08);
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 5. Global Fonts
|
||||
|
||||
Подключить в Elementor → Site Settings → Global Fonts. Google Fonts в `index.html` включают: `Inter`, `Montserrat`, `Playfair Display`, `Cormorant Garamond`, `Manrope`. В production для Elementor достаточно первых трёх; `Cormorant`/`Manrope` — только если будете использовать editorial/neo type cards.
|
||||
Подключить в Elementor → Site Settings → Global Fonts. Для V2 production используйте `Cormorant Garamond` для заголовков/названий вин и `Manrope` для body/UI. В проекте уже лежат локальные файлы Cormorant Garamond `400/500` плюс прежние `600/700`; при переносе в WordPress лучше загрузить эти файлы локально, а не полагаться на внешний Google Fonts.
|
||||
|
||||
| Elementor style | Font | Weight | Desktop | Line height | Transform |
|
||||
|---|---|---|---|---|---|
|
||||
| DP H1 | Montserrat | 800 | 56–72px | 1.0–1.1 | Uppercase |
|
||||
| DP H2 | Montserrat | 800 | 36–44px | 1.1 | Uppercase |
|
||||
| DP H3 | Montserrat | 800 | 22–28px | 1.15–1.25 | Uppercase |
|
||||
| DP Body | Inter | 400 | 16px | 1.5 | None |
|
||||
| DP Body Large | Inter | 400 | 18–19px | 1.5 | None |
|
||||
| DP Lead | Inter | 500 | 22px | 1.48 | None |
|
||||
| DP Caption | Inter | 700–800 | 12–13px | 1.2 | Uppercase |
|
||||
| DP Button | Inter | 700 | 14–16px | 1.2 | None |
|
||||
| DP Nav | Inter | 800 | 12px | 1.2 | Uppercase |
|
||||
| DP Editorial H | Playfair Display | 700 | 36–56px | 1.1 | None |
|
||||
| DP H1 | Cormorant Garamond | 400 | 48–80px | 1.05–1.1 | None |
|
||||
| DP H2 Section | Cormorant Garamond | 400 | 28–44px | 1.04 | Uppercase |
|
||||
| DP H3 / Card Title | Cormorant Garamond | 400 | 20–24px | 1.1–1.2 | None |
|
||||
| DP Body | Manrope | 400 | 16px | 1.5 | None |
|
||||
| DP Body Large | Manrope | 400 | 18–19px | 1.5 | None |
|
||||
| DP Lead | Cormorant Garamond | 400 | 22px | 1.48 | None |
|
||||
| DP Caption | Manrope | 600–700 | 12–13px | 1.2 | Uppercase |
|
||||
| DP Button | Manrope | 500–600 | 14–16px | 1.2 | None |
|
||||
| DP Nav | Manrope | 600–700 | 12px | 1.2 | Uppercase |
|
||||
| DP Footer Heading | Cormorant Garamond | 400 | 16px | 1.2 | None |
|
||||
|
||||
Responsive:
|
||||
|
||||
| Style | Tablet | Mobile |
|
||||
|---|---|---|
|
||||
| DP H1 | 40–56px | 34–44px |
|
||||
| DP H2 | 32–36px | 28–32px |
|
||||
| DP H3 | 22–24px | 20–22px |
|
||||
| DP H2 Section | 30–36px | 28–32px |
|
||||
| DP H3 / Card Title | 21–22px | 20–21px |
|
||||
| DP Body | 16px | 16px |
|
||||
| DP Button | 14–16px | 14px |
|
||||
|
||||
@ -226,8 +231,8 @@ Responsive:
|
||||
|
||||
| Token | Value | Где |
|
||||
|---|---|---|
|
||||
| `--dp-radius-sm` | 8px | Кнопки, поля, карточки, теги |
|
||||
| `--dp-radius-md` | 12px | Крупные панели, preview |
|
||||
| `--dp-radius-sm` | 4px | Кнопки, поля, карточки, теги |
|
||||
| `--dp-radius-md` | 8px | Крупные панели, preview |
|
||||
| `--dp-radius-lg` | 24px | Акцентные блоки (в текущем макете используется редко — оставляем про запас) |
|
||||
|
||||
### Shadows
|
||||
@ -235,7 +240,7 @@ Responsive:
|
||||
| Token | Value | Где |
|
||||
|---|---|---|
|
||||
| `--dp-shadow-soft` | `0 12px 32px rgba(22, 22, 22, 0.08)` | Карточки, формы, footer panel |
|
||||
| `--dp-shadow-lift` | `0 20px 52px rgba(75, 15, 36, 0.14)` | Hover карточек, mega menu, primary hover |
|
||||
| `--dp-shadow-lift` | `0 20px 52px rgba(125, 2, 29, 0.12)` | Hover карточек, mega menu, primary hover |
|
||||
| `--dp-shadow-header` | `0 10px 28px rgba(22, 22, 22, 0.05)` | Sticky header |
|
||||
| `--dp-focus-ring` | `0 0 0 4px rgba(75, 15, 36, 0.08)` | Input/search focus |
|
||||
|
||||
|
||||
BIN
docs/Аудит сайт дп-трейд.pdf
Normal file
BIN
docs/Аудит сайт дп-трейд.pdf
Normal file
Binary file not shown.
BIN
fonts/CormorantGaramond-Medium.woff2
Normal file
BIN
fonts/CormorantGaramond-Medium.woff2
Normal file
Binary file not shown.
BIN
fonts/CormorantGaramond-Regular.woff2
Normal file
BIN
fonts/CormorantGaramond-Regular.woff2
Normal file
Binary file not shown.
101
index.html
101
index.html
@ -1,101 +0,0 @@
|
||||
<!doctype html>
|
||||
<html lang="ru">
|
||||
<head>
|
||||
<script src="components/head.js"></script>
|
||||
<title>DP Trade — Home</title>
|
||||
</head>
|
||||
<body>
|
||||
<div class="site-shell">
|
||||
<div id="site-header"></div>
|
||||
|
||||
<main>
|
||||
<section class="hero">
|
||||
<div class="container hero-copy">
|
||||
<p class="eyebrow">DP Trade</p>
|
||||
<h1>Премиальный каталог вина для торговли</h1>
|
||||
<p>Регионы, производители, партии и коммерческие условия собраны в одном интерфейсе для быстрых закупочных решений.</p>
|
||||
<div class="hero-actions">
|
||||
<a class="button button--primary" href="catalog.html">Смотреть каталог</a>
|
||||
<a class="button button--secondary" href="ui-kit.html">Открыть UI-kit</a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="section producers-section">
|
||||
<div class="container">
|
||||
<div class="section-heading section-heading--split">
|
||||
<div>
|
||||
<p class="eyebrow">Producers</p>
|
||||
<h2>Производители</h2>
|
||||
</div>
|
||||
<p>Ключевые винные дома и хозяйства из портфеля DP Trade: от классических брендов до эксклюзивных партнеров.</p>
|
||||
</div>
|
||||
<div class="producer-grid">
|
||||
<a class="producer-card" href="#"><span>Argentina</span><strong>Catena Zapata</strong></a>
|
||||
<a class="producer-card" href="#"><span>Champagne</span><strong>Bollinger</strong></a>
|
||||
<a class="producer-card" href="#"><span>Burgundy</span><strong>Domaine De Villaine</strong></a>
|
||||
<a class="producer-card" href="#"><span>Italy</span><strong>Gaja</strong></a>
|
||||
<a class="producer-card" href="#"><span>France</span><strong>Pascal Jolivet</strong></a>
|
||||
<a class="producer-card" href="#"><span>Rhone</span><strong>Paul Jaboulet Aine</strong></a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="section news-section">
|
||||
<div class="container">
|
||||
<div class="section-heading section-heading--split">
|
||||
<div>
|
||||
<p class="eyebrow">Latest news</p>
|
||||
<h2>Последние новости</h2>
|
||||
</div>
|
||||
<a class="button button--secondary" href="#">Все новости</a>
|
||||
</div>
|
||||
<div class="news-grid">
|
||||
<article class="news-card">
|
||||
<div class="news-card__image news-card__image--catena"></div>
|
||||
<div><span>Интервью</span><h3>Интервью с Лаурой Катеной</h3></div>
|
||||
</article>
|
||||
<article class="news-card">
|
||||
<div class="news-card__image news-card__image--brand"></div>
|
||||
<div><span>Бренды</span><h3>Catena Zapata вновь признана самым почитаемым винным брендом мира</h3></div>
|
||||
</article>
|
||||
<article class="news-card">
|
||||
<div class="news-card__image news-card__image--italy"></div>
|
||||
<div><span>Италия</span><h3>Villa Raiano: от оливкового масла к одному из лучших фиано Италии</h3></div>
|
||||
</article>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="section">
|
||||
<div class="container">
|
||||
<div class="section-heading">
|
||||
<p class="eyebrow">Recommendations</p>
|
||||
<h2>Рекомендации недели</h2>
|
||||
</div>
|
||||
<div class="product-grid">
|
||||
<article class="product-card">
|
||||
<div class="product-media"><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>
|
||||
<article class="product-card">
|
||||
<div class="product-media product-media--amber"><img class="product-photo" src="assets/images/00080768_1.png" alt="Brunello di Montalcino" /></div>
|
||||
<div><span class="muted-caps">Tuscany</span><h3>Brunello di Montalcino</h3><p>Italy · Red dry · 2018 · 0.75 L</p></div>
|
||||
<div class="product-footer"><strong>4 240 ₽</strong><a class="button button--primary button--sm" href="product.html">Подробнее</a></div>
|
||||
</article>
|
||||
<article class="product-card">
|
||||
<div class="product-media product-media--green"><img class="product-photo" src="assets/images/00081726_1.png" alt="Riesling Kabinett" /></div>
|
||||
<div><span class="muted-caps">Mosel</span><h3>Riesling Kabinett</h3><p>Germany · White · 2021 · 0.75 L</p></div>
|
||||
<div class="product-footer"><strong>2 150 ₽</strong><a class="button button--primary button--sm" href="product.html">Подробнее</a></div>
|
||||
</article>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
|
||||
<div id="site-footer"></div>
|
||||
</div>
|
||||
<script src="assets/js/components.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
@ -1,87 +0,0 @@
|
||||
<!doctype html>
|
||||
<html lang="ru">
|
||||
<head>
|
||||
<script src="components/head.js"></script>
|
||||
<title>DP Trade — Villa Raiano editorial</title>
|
||||
</head>
|
||||
<body class="compact-type">
|
||||
<div class="site-shell">
|
||||
<div id="site-header"></div>
|
||||
<main class="news-editorial">
|
||||
<article>
|
||||
<header class="editorial-hero">
|
||||
<div class="container editorial-hero__inner">
|
||||
<div class="editorial-hero__copy">
|
||||
<p class="eyebrow">Новости / Villa Raiano</p>
|
||||
<h1>Villa Raiano: от оливкового масла к одному из лучших фиано Италии</h1>
|
||||
<div class="editorial-meta"><span>6 апреля, 2026</span><span>Ирпиния, Кампания</span></div>
|
||||
</div>
|
||||
<figure class="editorial-hero__image">
|
||||
<img src="assets/images/photo_2026-04-06_16-53-26.jpg" alt="Винодельня Villa Raiano среди холмов Ирпинии" />
|
||||
</figure>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<section class="section editorial-section">
|
||||
<div class="container editorial-layout">
|
||||
<aside class="editorial-side">
|
||||
<span>Article focus</span>
|
||||
<p>Семья Бассо, новая винодельня, ставка на белые вина и признание Fiano di Avellino.</p>
|
||||
</aside>
|
||||
<div class="editorial-body">
|
||||
<p class="lead">Рассказываем о семье Бассо и винодельне Villa Raiano, совершившей небольшую революцию в Ирпинии, сменив курс с красных вин на белые. Судя по нашим последним дегустациям, у них это получилось.</p>
|
||||
<p>На холмах Сан-Микеле-ди-Серино, в провинции Авеллино, расположена винодельня семьи Бассо. Название связано с корнями: Villa Raiano — историческая местность коммуны Серино, где находилась старая оливковая плантация семьи.</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<figure class="container editorial-image editorial-image--wide">
|
||||
<img src="assets/images/photo_2026-04-06_16-53-24.jpg" alt="Сбор белого винограда Villa Raiano" />
|
||||
</figure>
|
||||
|
||||
<section class="section editorial-section">
|
||||
<div class="container editorial-layout">
|
||||
<aside class="editorial-side editorial-side--timeline">
|
||||
<span>Timeline</span>
|
||||
<ol>
|
||||
<li><strong>1990-е</strong><small>семейная маслобойня</small></li>
|
||||
<li><strong>2008</strong><small>новое оборудование и команда</small></li>
|
||||
<li><strong>2009</strong><small>винодельня на холме</small></li>
|
||||
<li><strong>2024</strong><small>подземная винодельня</small></li>
|
||||
</ol>
|
||||
</aside>
|
||||
<div class="editorial-body">
|
||||
<p>В середине 1990-х с основанием винодельни в Ирпинии начался винодельческий бум. Первые годы для семьи Бассо были скорее хобби: они делали и разливали вино на семейной маслобойне. С 1999 по 2008 год они стали сотрудничать с энологом Луиджи Мойо, который учился вместе с Сабино Бассо в аграрном институте Авеллино.</p>
|
||||
<blockquote>«В 2008 году мы купили новое оборудование, начали сотрудничество с Фортунато Себастьяно и построили винодельню на вершине холма в Сан-Микеле-ди-Серино», — рассказывает сын Сабино Бассо, Федерико.</blockquote>
|
||||
<p>Открытие в 2009 году совпало с новым курсом: появились четыре белых вина с отдельных виноградников — три Fiano di Avellino и один Greco di Tufo. Через десять лет к работе подключилось новое поколение: «В компанию пришли я, мой брат Фабрицио и наша кузина Брунелла, дочь Симоне».</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="container editorial-photo-grid" aria-label="Фото Villa Raiano">
|
||||
<figure><img src="assets/images/photo_2026-04-06_16-53-23.jpg" alt="Ящики с белым виноградом Villa Raiano" /></figure>
|
||||
<figure><img src="assets/images/photo_2026-04-06_16-53-23-2.jpg" alt="Работа в погребе Villa Raiano" /></figure>
|
||||
</section>
|
||||
|
||||
<section class="section editorial-section editorial-section--final">
|
||||
<div class="container editorial-layout">
|
||||
<aside class="editorial-side">
|
||||
<span>Recognition</span>
|
||||
<p>Gambero Rosso отметил Fiano di Avellino 2024 за лучшее соотношение цены и качества в регионе.</p>
|
||||
</aside>
|
||||
<div class="editorial-body">
|
||||
<p>В 2024 году открылась новая подземная винодельня, полностью интегрированная в ландшафт. Сегодня Villa Raiano владеет 30 гектарами виноградников: хозяйство работает по биологическим принципам и сертифицировано с 2011 года.</p>
|
||||
<blockquote>«Мы уверены, что наш регион — земля великих белых вин», — говорит Федерико. «Сила наших DOC — в огромных различиях, которые один и тот же сорт может проявлять в разных условиях».</blockquote>
|
||||
<p>Континентальный климат позволяет ягодам созревать медленно, что делает вина особенными — как красные, так и белые. На последних дегустациях Gambero Rosso Fiano di Avellino 2024 года особенно впечатлил итальянских экспертов, получив премию Miglior Qualità Prezzo Regionale гида BereBene 2026.</p>
|
||||
<p class="editorial-outro">Чем не повод самому проверить мнение Gambero Rosso?</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</article>
|
||||
</main>
|
||||
|
||||
<div id="site-footer"></div>
|
||||
</div>
|
||||
<script src="assets/js/components.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
@ -1,62 +0,0 @@
|
||||
<!doctype html>
|
||||
<html lang="ru">
|
||||
<head>
|
||||
<script src="components/head.js"></script>
|
||||
<title>DP Trade — Villa Raiano</title>
|
||||
</head>
|
||||
<body class="compact-type">
|
||||
<div class="site-shell">
|
||||
<div id="site-header"></div>
|
||||
<main class="content-page">
|
||||
<section class="page-hero page-hero--news">
|
||||
<div class="container page-hero__inner">
|
||||
<div>
|
||||
<p class="eyebrow">Новости / Италия</p>
|
||||
<h1>Villa Raiano: от оливкового масла к одному из лучших Fiano Италии</h1>
|
||||
<p>История семейного хозяйства из Кампании, где любовь к Ирпинии выросла из маслобойного производства в современную винодельню.</p>
|
||||
</div>
|
||||
<aside class="page-hero__meta" aria-label="Параметры новости">
|
||||
<span>Producer spotlight</span>
|
||||
<strong>Villa Raiano</strong>
|
||||
<p>Campania · Irpinia · Fiano di Avellino</p>
|
||||
</aside>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="section">
|
||||
<div class="container article-layout">
|
||||
<article class="article-body">
|
||||
<p class="lead">Villa Raiano появилась в 1996 году по инициативе семьи Бассо, известной производством оливкового масла. Первые вина делались в помещениях старого маслобойного завода, а в 2009 году хозяйство переехало в новую винодельню в Ирпинии.</p>
|
||||
<p>Для DP Trade эта история важна не только как биография производителя. Villa Raiano показывает, как локальная ремесленная культура Кампании может стать точной, современной и очень узнаваемой винной стилистикой.</p>
|
||||
<h2>Почему Fiano di Avellino</h2>
|
||||
<p>Фьяно из Авеллино ценят за минеральность, плотную фактуру и способность к развитию в бутылке. В молодых винах часто появляются цитрусовые, груша, персик, травы и медовые оттенки; с возрастом они становятся глубже, прянее и сложнее.</p>
|
||||
<p>Villa Raiano работает с традиционными сортами региона: Fiano, Greco, Falanghina и Aglianico. Такой фокус помогает хозяйству говорить не универсальным языком международного вина, а языком конкретного места.</p>
|
||||
<blockquote>Фокус карточки новости: семейная история, локальный сорт и ценность производителя для профессионального каталога.</blockquote>
|
||||
<h2>Что показать в каталоге</h2>
|
||||
<p>Для товарной страницы и подборок можно вынести происхождение, сорт, стиль, потенциал выдержки и гастрономические пары. В B2B-сценарии особенно полезны быстрые маркеры: регион, апелласьон, тип вина, крепость, объем и доступность партии.</p>
|
||||
</article>
|
||||
<aside class="article-aside">
|
||||
<div class="info-card">
|
||||
<span>Ключевые факты</span>
|
||||
<dl>
|
||||
<div><dt>Страна</dt><dd>Италия</dd></div>
|
||||
<div><dt>Регион</dt><dd>Кампания, Ирпиния</dd></div>
|
||||
<div><dt>Основание</dt><dd>1996</dd></div>
|
||||
<div><dt>Сорта</dt><dd>Fiano, Greco, Aglianico</dd></div>
|
||||
</dl>
|
||||
</div>
|
||||
<div class="info-card info-card--accent">
|
||||
<span>Для UI-kit</span>
|
||||
<p>Эта страница проверяет длинный заголовок новости, текстовую статью, боковую карточку фактов и CTA обратно в каталог.</p>
|
||||
<a class="button button--primary button--sm" href="catalog.html">В каталог</a>
|
||||
</div>
|
||||
</aside>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
|
||||
<div id="site-footer"></div>
|
||||
</div>
|
||||
<script src="assets/js/components.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
36
product.html
36
product.html
@ -1,36 +0,0 @@
|
||||
<!doctype html>
|
||||
<html lang="ru">
|
||||
<head>
|
||||
<script src="components/head.js"></script>
|
||||
<title>DP Trade — Product</title>
|
||||
</head>
|
||||
<body>
|
||||
<div class="site-shell">
|
||||
<div id="site-header"></div>
|
||||
|
||||
<main class="section">
|
||||
<div class="container product-detail">
|
||||
<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>
|
||||
<p>Премиальная позиция из Bordeaux для ресторанных карт и специализированной розницы.</p>
|
||||
<div class="meta-list">
|
||||
<div><span>Регион</span><strong>Bordeaux</strong></div>
|
||||
<div><span>Тип</span><strong>Red dry</strong></div>
|
||||
<div><span>Год</span><strong>2019</strong></div>
|
||||
<div><span>Объем</span><strong>0.75 L</strong></div>
|
||||
<div><span>Цена</span><strong>3 890 ₽</strong></div>
|
||||
</div>
|
||||
<div class="hero-actions">
|
||||
<a class="button button--primary" href="#">Запросить прайс</a>
|
||||
<a class="button button--secondary" href="catalog.html">Вернуться в каталог</a>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</main>
|
||||
<div id="site-footer"></div>
|
||||
</div>
|
||||
<script src="assets/js/components.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
@ -4,7 +4,18 @@
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>{{ title }}</title>
|
||||
<script>
|
||||
(function () {
|
||||
try {
|
||||
var v = localStorage.getItem('dp-design-version') || 'v1';
|
||||
document.documentElement.setAttribute('data-design-version', v);
|
||||
} catch (e) {
|
||||
document.documentElement.setAttribute('data-design-version', 'v1');
|
||||
}
|
||||
})();
|
||||
</script>
|
||||
<link rel="stylesheet" href="css/{{ css | default('site') }}.css" />
|
||||
<link rel="stylesheet" href="css/v2.css" />
|
||||
<!-- Privacy-friendly analytics by Plausible -->
|
||||
<script async src="https://metrika.in20.ru/js/pa-LKQHOT3En5k9NYpn80cYX.js"></script>
|
||||
<script>
|
||||
@ -15,5 +26,6 @@
|
||||
<body{% if bodyClass %} class="{{ bodyClass }}"{% endif %}>
|
||||
{{ content | safe }}
|
||||
<script src="js/inspector.js"></script>
|
||||
<script src="js/design-switcher.js" defer></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@ -3,7 +3,7 @@
|
||||
<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" />
|
||||
<img src="assets/images/logo-dp-trade.png" alt="DP Trade" width="156" height="33" />
|
||||
</a>
|
||||
<p class="footer-brand-subtitle">Территория качественного вина</p>
|
||||
</div>
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
<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">
|
||||
<img src="assets/images/logo-dp-trade.png" alt="DP Trade" width="156" height="33">
|
||||
</a>
|
||||
|
||||
<form class="search-bar" action="#" role="search">
|
||||
@ -43,7 +43,7 @@
|
||||
|
||||
<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="Виноградник на холмах">
|
||||
<img src="assets/images/vineyard-hills.jpg" alt="Виноградник на холмах">
|
||||
<p>Выбирайте через знакомую страну или сразу через регион, если точно знаете, что ищете.</p>
|
||||
</article>
|
||||
|
||||
@ -106,7 +106,7 @@
|
||||
|
||||
<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="Бокалы вина">
|
||||
<img src="assets/images/wine-glasses.jpg" alt="Бокалы вина">
|
||||
<p>Начните с типа вина или сразу переходите к стилю, если знаете нужный профиль.</p>
|
||||
</article>
|
||||
|
||||
@ -156,7 +156,7 @@
|
||||
|
||||
<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="Крепкий алкоголь в бокале">
|
||||
<img src="assets/images/spirits-glass.jpg" alt="Крепкий алкоголь в бокале">
|
||||
<p>Категории, выдержка и происхождение для быстрой навигации по ассортименту.</p>
|
||||
</article>
|
||||
|
||||
@ -209,7 +209,7 @@
|
||||
|
||||
<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="Винодельня и бочки">
|
||||
<img src="assets/images/winery-barrels.jpg" alt="Винодельня и бочки">
|
||||
<p>Откройте ассортимент через знакомые хозяйства, винные дома и регионы производства.</p>
|
||||
</article>
|
||||
|
||||
@ -247,7 +247,50 @@
|
||||
</section>
|
||||
</div>
|
||||
<a href="#">Поставки</a>
|
||||
<a href="#">Новости</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">DP Trade</p>
|
||||
<h2>О компании и контакты</h2>
|
||||
</div>
|
||||
<p>Истории, статьи и прямые контакты для клиентов и партнёров.</p>
|
||||
</div>
|
||||
|
||||
<div class="menu-grid">
|
||||
<article class="menu-column visual-column">
|
||||
<img src="assets/images/winery-barrels.jpg" alt="Винные бочки в погребе">
|
||||
<p>Команда DP Trade работает с вином как с живым продуктом — от поставки до клиента.</p>
|
||||
</article>
|
||||
|
||||
<article class="menu-column">
|
||||
<p class="section-title">Компания</p>
|
||||
<a href="about.html">О нас</a>
|
||||
<a href="contacts.html">Контакты</a>
|
||||
<a href="contacts-auth.html">Контакты для партнёров</a>
|
||||
</article>
|
||||
|
||||
<article class="menu-column">
|
||||
<p class="section-title">Новости и статьи</p>
|
||||
<a href="news-villa-raiano.html">Villa Raiano — классика</a>
|
||||
<a href="news-villa-raiano-v2.html">Villa Raiano — editorial</a>
|
||||
<a href="article-guidelines.html">Редакционный гайд</a>
|
||||
</article>
|
||||
|
||||
<article class="menu-column popular-column">
|
||||
<p class="section-title">Быстрые ссылки</p>
|
||||
<div class="popular-list">
|
||||
<a href="#">Склады и логистика</a>
|
||||
<a href="#">Реквизиты</a>
|
||||
<a href="#">Карьера</a>
|
||||
<a href="#">Пресса</a>
|
||||
</div>
|
||||
</article>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
<div class="nav-item">
|
||||
<button class="nav-trigger" type="button" aria-expanded="false">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">
|
||||
@ -260,7 +303,7 @@
|
||||
</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="Демонстрация винного каталога" />
|
||||
<img src="assets/images/wine-glasses.jpg" alt="Демонстрация винного каталога" />
|
||||
<p>Все демо-страницы собраны в одном месте для проверки header, footer, карточек и каталожных сценариев.</p>
|
||||
</article>
|
||||
<article class="menu-column">
|
||||
@ -269,6 +312,7 @@
|
||||
<a href="catalog.html">Каталог</a>
|
||||
<a href="product.html">Карточка товара</a>
|
||||
<a href="bottle-cards.html">Варианты карточек</a>
|
||||
<a href="product-card-white.html">Карточка на белом</a>
|
||||
<a href="news-villa-raiano.html">Новость</a>
|
||||
<a href="news-villa-raiano-v2.html">Новость v2</a>
|
||||
<a href="article-guidelines.html">Ред. гайд</a>
|
||||
@ -296,5 +340,9 @@
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
<div class="design-toggle design-toggle--nav" role="group" aria-label="Версия дизайна">
|
||||
<button type="button" class="design-toggle__btn" data-version="v1">V1</button>
|
||||
<button type="button" class="design-toggle__btn" data-version="v2">V2</button>
|
||||
</div>
|
||||
</nav>
|
||||
</header>
|
||||
|
||||
BIN
src/assets/images/hero-guidelines.jpg
Normal file
BIN
src/assets/images/hero-guidelines.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 450 KiB |
BIN
src/assets/images/hero-main.jpg
Normal file
BIN
src/assets/images/hero-main.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 459 KiB |
BIN
src/assets/images/logo-dp-trade.png
Normal file
BIN
src/assets/images/logo-dp-trade.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 14 KiB |
BIN
src/assets/images/news-catena.jpg
Normal file
BIN
src/assets/images/news-catena.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 76 KiB |
BIN
src/assets/images/news-italy.jpg
Normal file
BIN
src/assets/images/news-italy.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 121 KiB |
BIN
src/assets/images/spirits-glass.jpg
Normal file
BIN
src/assets/images/spirits-glass.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 177 KiB |
BIN
src/assets/images/vineyard-hills.jpg
Normal file
BIN
src/assets/images/vineyard-hills.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 198 KiB |
BIN
src/assets/images/wine-glasses.jpg
Normal file
BIN
src/assets/images/wine-glasses.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 199 KiB |
BIN
src/assets/images/winery-barrels.jpg
Normal file
BIN
src/assets/images/winery-barrels.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 320 KiB |
@ -432,7 +432,7 @@ select {
|
||||
padding: 104px 0 72px;
|
||||
background:
|
||||
linear-gradient(100deg, rgba(22, 20, 17, 0.84) 0%, rgba(22, 20, 17, 0.58) 38%, rgba(22, 20, 17, 0.12) 72%),
|
||||
url("https://images.unsplash.com/photo-1560493676-04071c5f467b?auto=format&fit=crop&w=1800&q=80");
|
||||
url("../assets/images/hero-main.jpg");
|
||||
background-position: center right;
|
||||
background-size: cover;
|
||||
color: #f8fafc;
|
||||
@ -569,15 +569,15 @@ select {
|
||||
}
|
||||
|
||||
.news-card__image--catena {
|
||||
background-image: linear-gradient(rgba(22, 22, 22, 0.1), rgba(22, 22, 22, 0.1)), url("https://images.unsplash.com/photo-1556760544-74068565f05c?auto=format&fit=crop&w=900&q=80");
|
||||
background-image: linear-gradient(rgba(22, 22, 22, 0.1), rgba(22, 22, 22, 0.1)), url("../assets/images/news-catena.jpg");
|
||||
}
|
||||
|
||||
.news-card__image--brand {
|
||||
background-image: linear-gradient(rgba(22, 22, 22, 0.1), rgba(22, 22, 22, 0.1)), url("https://images.unsplash.com/photo-1506377247377-2a5b3b417ebb?auto=format&fit=crop&w=900&q=80");
|
||||
background-image: linear-gradient(rgba(22, 22, 22, 0.1), rgba(22, 22, 22, 0.1)), url("../assets/images/vineyard-hills.jpg");
|
||||
}
|
||||
|
||||
.news-card__image--italy {
|
||||
background-image: linear-gradient(rgba(22, 22, 22, 0.1), rgba(22, 22, 22, 0.1)), url("https://images.unsplash.com/photo-1528823872057-9c018a7a7553?auto=format&fit=crop&w=900&q=80");
|
||||
background-image: linear-gradient(rgba(22, 22, 22, 0.1), rgba(22, 22, 22, 0.1)), url("../assets/images/news-italy.jpg");
|
||||
}
|
||||
|
||||
.type-lab-section {
|
||||
@ -1387,7 +1387,7 @@ select {
|
||||
color: #f8fafc;
|
||||
background:
|
||||
linear-gradient(100deg, rgba(22, 20, 17, 0.86), rgba(22, 20, 17, 0.48) 54%, rgba(22, 20, 17, 0.22)),
|
||||
url("https://images.unsplash.com/photo-1506377247377-2a5b3b417ebb?auto=format&fit=crop&w=1800&q=80");
|
||||
url("../assets/images/vineyard-hills.jpg");
|
||||
background-position: center;
|
||||
background-size: cover;
|
||||
}
|
||||
@ -1395,19 +1395,25 @@ select {
|
||||
.page-hero--about {
|
||||
background-image:
|
||||
linear-gradient(100deg, rgba(22, 20, 17, 0.84), rgba(22, 20, 17, 0.46) 54%, rgba(22, 20, 17, 0.18)),
|
||||
url("https://images.unsplash.com/photo-1568213816046-0ee1c42bd559?auto=format&fit=crop&w=1800&q=80");
|
||||
url("../assets/images/winery-barrels.jpg");
|
||||
}
|
||||
|
||||
.page-hero--contacts {
|
||||
background-image:
|
||||
linear-gradient(100deg, rgba(22, 20, 17, 0.86), rgba(22, 20, 17, 0.5) 54%, rgba(22, 20, 17, 0.2)),
|
||||
url("https://images.unsplash.com/photo-1510812431401-41d2bd2722f3?auto=format&fit=crop&w=1800&q=80");
|
||||
url("../assets/images/wine-glasses.jpg");
|
||||
}
|
||||
|
||||
.page-hero--guidelines {
|
||||
background-image:
|
||||
linear-gradient(100deg, rgba(22, 20, 17, 0.86), rgba(22, 20, 17, 0.5) 54%, rgba(22, 20, 17, 0.22)),
|
||||
url("https://images.unsplash.com/photo-1516594798947-e65505dbb29d?auto=format&fit=crop&w=1800&q=80");
|
||||
url("../assets/images/hero-guidelines.jpg");
|
||||
}
|
||||
|
||||
.page-hero--news {
|
||||
background-image:
|
||||
linear-gradient(100deg, rgba(22, 20, 17, 0.86), rgba(22, 20, 17, 0.48) 54%, rgba(22, 20, 17, 0.22)),
|
||||
url("../assets/images/news-italy.jpg");
|
||||
}
|
||||
|
||||
.page-hero__inner {
|
||||
|
||||
@ -1,3 +1,19 @@
|
||||
/* full family */
|
||||
@font-face {
|
||||
font-family: 'Cormorant Garamond';
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-display: swap;
|
||||
src: url('../fonts/CormorantGaramond-Regular.woff2') format('woff2');
|
||||
}
|
||||
/* full family */
|
||||
@font-face {
|
||||
font-family: 'Cormorant Garamond';
|
||||
font-style: normal;
|
||||
font-weight: 500;
|
||||
font-display: swap;
|
||||
src: url('../fonts/CormorantGaramond-Medium.woff2') format('woff2');
|
||||
}
|
||||
/* cyrillic-ext */
|
||||
@font-face {
|
||||
font-family: 'Cormorant Garamond';
|
||||
@ -638,6 +654,7 @@
|
||||
--color-neutral-gray-300: #d9dee6;
|
||||
--color-background-base: #f4f6f9;
|
||||
--color-surface: #ffffff;
|
||||
--color-surface-warm: #F5F0E8;
|
||||
--color-accent-gold: #b9965b;
|
||||
--color-accent-blue: #1f3476;
|
||||
|
||||
@ -663,3 +680,22 @@
|
||||
--shadow-lift: 0 20px 52px rgba(75, 15, 36, 0.14);
|
||||
--container: 1240px;
|
||||
}
|
||||
|
||||
/* ── V2 design version (design audit followup) ───────────────────────── */
|
||||
:root[data-design-version="v2"] {
|
||||
--color-primary-wine-100: #7D021D;
|
||||
--color-primary-wine-80: #9b1a33;
|
||||
--color-background-base: #FFFDFA;
|
||||
--color-surface: #ffffff;
|
||||
--color-surface-warm: #F5F0E8;
|
||||
--color-accent-blue: #7D021D;
|
||||
|
||||
--font-heading: "Cormorant Garamond", Georgia, serif;
|
||||
--font-body: "Manrope", "Inter", Arial, sans-serif;
|
||||
--font-heading-retail: "Cormorant Garamond", Georgia, serif;
|
||||
|
||||
--radius-sm: 4px;
|
||||
--radius-md: 8px;
|
||||
|
||||
--shadow-lift: 0 20px 52px rgba(125, 2, 29, 0.12);
|
||||
}
|
||||
|
||||
613
src/css/v2.css
Normal file
613
src/css/v2.css
Normal file
@ -0,0 +1,613 @@
|
||||
/* =========================================================================
|
||||
DP Trade — V2 overrides (design audit followup)
|
||||
Activates when <html data-design-version="v2">. V1 stays untouched.
|
||||
========================================================================= */
|
||||
|
||||
/* ── Design toggle (visible in both versions) ─────────────────────────── */
|
||||
.design-toggle {
|
||||
display: inline-flex;
|
||||
padding: 2px;
|
||||
border: 1px solid rgba(22, 22, 22, 0.18);
|
||||
border-radius: 999px;
|
||||
background: rgba(255, 255, 255, 0.6);
|
||||
gap: 2px;
|
||||
}
|
||||
.design-toggle__btn {
|
||||
appearance: none;
|
||||
border: 0;
|
||||
background: transparent;
|
||||
padding: 6px 14px;
|
||||
border-radius: 999px;
|
||||
font: 600 12px/1 var(--font-body);
|
||||
letter-spacing: 0.06em;
|
||||
color: var(--color-neutral-gray-700);
|
||||
cursor: pointer;
|
||||
}
|
||||
.design-toggle__btn.is-active {
|
||||
background: var(--color-primary-wine-100);
|
||||
color: #fff;
|
||||
}
|
||||
.design-toggle--nav {
|
||||
margin-left: auto;
|
||||
align-self: center;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.design-toggle--uikit {
|
||||
margin: 16px 24px 0;
|
||||
align-self: flex-start;
|
||||
}
|
||||
|
||||
/* V2-only DOM nodes hidden under V1 */
|
||||
[data-design-version="v1"] [data-v2-only] { display: none !important; }
|
||||
[data-design-version="v2"] [data-v2-hide] { display: none !important; }
|
||||
|
||||
/* Breadcrumbs */
|
||||
.breadcrumbs {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
padding-top: 24px;
|
||||
padding-bottom: 8px;
|
||||
font-size: 13px;
|
||||
color: var(--color-neutral-gray-600);
|
||||
}
|
||||
.breadcrumbs a {
|
||||
color: var(--color-neutral-gray-600);
|
||||
text-decoration: none;
|
||||
}
|
||||
.breadcrumbs a:hover { color: var(--color-primary-wine-100); }
|
||||
.breadcrumbs [aria-current="page"] { color: var(--color-neutral-black); }
|
||||
|
||||
/* Form success */
|
||||
.form-success {
|
||||
margin-top: 12px;
|
||||
padding: 14px 16px;
|
||||
border-radius: var(--radius-sm);
|
||||
background: #F5F0E8;
|
||||
color: var(--color-primary-wine-100);
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
/* =========================================================================
|
||||
V2 SCOPE — everything below only applies when data-design-version="v2"
|
||||
========================================================================= */
|
||||
|
||||
/* ── Global typography ────────────────────────────────────────────────── */
|
||||
[data-design-version="v2"] body {
|
||||
font-family: var(--font-body);
|
||||
background: var(--color-background-base);
|
||||
}
|
||||
|
||||
[data-design-version="v2"] h1,
|
||||
[data-design-version="v2"] h2,
|
||||
[data-design-version="v2"] h3,
|
||||
[data-design-version="v2"] h4 {
|
||||
font-family: var(--font-heading);
|
||||
text-transform: none !important;
|
||||
font-weight: 400;
|
||||
letter-spacing: 0;
|
||||
}
|
||||
|
||||
[data-design-version="v2"] .brand-logo,
|
||||
[data-design-version="v2"] .brand-logo span:first-child {
|
||||
text-transform: none;
|
||||
}
|
||||
[data-design-version="v2"] .brand-logo small { font-size: 12px; }
|
||||
|
||||
[data-design-version="v2"] .phone-link {
|
||||
color: var(--color-primary-wine-100);
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
/* ── Header ───────────────────────────────────────────────────────────── */
|
||||
[data-design-version="v2"] .site-header {
|
||||
background: rgba(255, 253, 250, 0.94);
|
||||
border-bottom-color: rgba(125, 2, 29, 0.12);
|
||||
box-shadow: 0 10px 28px rgba(125, 2, 29, 0.06);
|
||||
}
|
||||
|
||||
[data-design-version="v2"] .search-bar {
|
||||
background: #ffffff;
|
||||
border-color: rgba(125, 2, 29, 0.16);
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
[data-design-version="v2"] .search-bar:focus-within {
|
||||
border-color: rgba(125, 2, 29, 0.42);
|
||||
box-shadow: 0 0 0 3px rgba(125, 2, 29, 0.08);
|
||||
}
|
||||
|
||||
[data-design-version="v2"] .search-bar input {
|
||||
background: transparent;
|
||||
color: var(--color-neutral-black);
|
||||
}
|
||||
|
||||
[data-design-version="v2"] .search-bar input::placeholder {
|
||||
color: rgba(102, 96, 95, 0.72);
|
||||
}
|
||||
|
||||
/* ── Hero (home) ──────────────────────────────────────────────────────── */
|
||||
[data-design-version="v2"] .hero h1 {
|
||||
font-family: var(--font-heading);
|
||||
font-size: clamp(48px, 6vw, 80px);
|
||||
font-weight: 400;
|
||||
text-transform: none !important;
|
||||
letter-spacing: 0;
|
||||
line-height: 1.05;
|
||||
}
|
||||
|
||||
[data-design-version="v2"] .section-heading h2 {
|
||||
font-size: clamp(28px, 3.4vw, 44px);
|
||||
font-weight: 400;
|
||||
text-transform: uppercase !important;
|
||||
letter-spacing: 0;
|
||||
line-height: 1.04;
|
||||
}
|
||||
|
||||
/* ── Product card (grid) ──────────────────────────────────────────────── */
|
||||
[data-design-version="v2"] .product-card {
|
||||
background: var(--color-surface-warm);
|
||||
border-color: rgba(22, 22, 22, 0.08);
|
||||
}
|
||||
|
||||
[data-design-version="v2"] .product-media,
|
||||
[data-design-version="v2"] .product-media--amber,
|
||||
[data-design-version="v2"] .product-media--green {
|
||||
background: #ffffff !important;
|
||||
}
|
||||
|
||||
[data-design-version="v2"] .product-card h3 {
|
||||
font-family: var(--font-heading);
|
||||
font-size: 22px;
|
||||
font-weight: 400;
|
||||
text-transform: none !important;
|
||||
letter-spacing: 0;
|
||||
line-height: 1.12;
|
||||
}
|
||||
|
||||
[data-design-version="v2"] .product-footer {
|
||||
padding-top: 14px;
|
||||
border-top: 1px solid rgba(22, 22, 22, 0.08);
|
||||
flex-direction: column;
|
||||
align-items: stretch;
|
||||
gap: 10px;
|
||||
}
|
||||
[data-design-version="v2"] .product-footer strong {
|
||||
font-family: var(--font-body);
|
||||
font-size: 24px;
|
||||
font-weight: 700;
|
||||
color: var(--color-primary-wine-100);
|
||||
}
|
||||
[data-design-version="v2"] .product-footer .button,
|
||||
[data-design-version="v2"] .product-card .button--primary {
|
||||
background: transparent;
|
||||
color: var(--color-primary-wine-100);
|
||||
border: 1px solid var(--color-primary-wine-100);
|
||||
box-shadow: none;
|
||||
width: 100%;
|
||||
justify-content: center;
|
||||
font-weight: 500;
|
||||
}
|
||||
[data-design-version="v2"] .product-footer .button:hover,
|
||||
[data-design-version="v2"] .product-card .button--primary:hover {
|
||||
background: var(--color-primary-wine-100);
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
/* Compact grid on home */
|
||||
[data-design-version="v2"] .product-grid--compact .product-card h3 {
|
||||
font-size: 17px;
|
||||
}
|
||||
|
||||
/* List cards (catalog) — same typography refresh */
|
||||
[data-design-version="v2"] .product-card--list h3 {
|
||||
font-family: var(--font-heading);
|
||||
text-transform: none !important;
|
||||
letter-spacing: 0;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
/* ── Catalog head ─────────────────────────────────────────────────────── */
|
||||
[data-design-version="v2"] .catalog-head h1 {
|
||||
font-family: var(--font-heading);
|
||||
font-weight: 400;
|
||||
text-transform: none !important;
|
||||
letter-spacing: 0;
|
||||
}
|
||||
|
||||
/* ── Mega menu ────────────────────────────────────────────────────────── */
|
||||
[data-design-version="v2"] .mega-menu {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
[data-design-version="v2"] .mega-intro {
|
||||
align-items: start;
|
||||
}
|
||||
|
||||
[data-design-version="v2"] .mega-intro h2 {
|
||||
font-size: 22px;
|
||||
font-weight: 400;
|
||||
text-transform: none !important;
|
||||
letter-spacing: 0;
|
||||
font-family: var(--font-heading);
|
||||
line-height: 1.08;
|
||||
}
|
||||
|
||||
[data-design-version="v2"] .menu-grid {
|
||||
grid-template-columns: minmax(160px, 0.72fr) minmax(140px, 0.72fr) minmax(280px, 1.35fr) minmax(180px, 0.9fr);
|
||||
align-items: start;
|
||||
}
|
||||
|
||||
[data-design-version="v2"] .menu-column {
|
||||
align-items: flex-start;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
[data-design-version="v2"] .menu-column a {
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
[data-design-version="v2"] .visual-column img {
|
||||
max-width: 160px;
|
||||
max-height: 100px;
|
||||
width: 160px;
|
||||
height: 100px;
|
||||
object-fit: cover;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
[data-design-version="v2"] .country-link {
|
||||
color: var(--color-primary-wine-100);
|
||||
font-size: 11px;
|
||||
font-weight: 500;
|
||||
letter-spacing: 0.08em;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
[data-design-version="v2"] .appellation-group a:not(.country-link) {
|
||||
padding-left: 12px;
|
||||
font-size: 14px;
|
||||
text-transform: none;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
[data-design-version="v2"] .popular-list {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 8px;
|
||||
justify-content: flex-start;
|
||||
}
|
||||
[data-design-version="v2"] .popular-list a {
|
||||
min-width: 120px;
|
||||
min-height: 44px;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
padding: 8px 14px;
|
||||
border: 1px solid rgba(125, 2, 29, 0.14);
|
||||
border-radius: 4px;
|
||||
background: rgba(255, 253, 250, 0.72);
|
||||
text-transform: none;
|
||||
letter-spacing: 0;
|
||||
font-weight: 400;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
/* Producer cards */
|
||||
[data-design-version="v2"] .producer-card strong,
|
||||
[data-design-version="v2"] .news-card h3 {
|
||||
font-family: var(--font-heading);
|
||||
font-weight: 400;
|
||||
text-transform: none !important;
|
||||
letter-spacing: 0;
|
||||
}
|
||||
[data-design-version="v2"] .news-section { background: var(--color-surface-warm); }
|
||||
|
||||
/* ── Page hero (about / contacts / guidelines) ────────────────────────── */
|
||||
[data-design-version="v2"] .page-hero h1 {
|
||||
font-family: var(--font-heading);
|
||||
font-weight: 400;
|
||||
text-transform: none !important;
|
||||
letter-spacing: 0;
|
||||
line-height: 1.08;
|
||||
}
|
||||
|
||||
[data-design-version="v2"] .page-hero--about h1 {
|
||||
font-size: clamp(40px, 4vw, 56px);
|
||||
}
|
||||
|
||||
[data-design-version="v2"] .page-hero--contacts {
|
||||
padding: 48px 0 24px;
|
||||
background-image: none;
|
||||
background: var(--color-background-base);
|
||||
color: var(--color-neutral-black);
|
||||
}
|
||||
[data-design-version="v2"] .page-hero--contacts h1 {
|
||||
font-size: clamp(32px, 3.4vw, 48px);
|
||||
color: var(--color-neutral-black);
|
||||
}
|
||||
[data-design-version="v2"] .page-hero--contacts p {
|
||||
color: var(--color-neutral-gray-700);
|
||||
font-size: 16px;
|
||||
}
|
||||
[data-design-version="v2"] .page-hero--contacts .page-hero__meta {
|
||||
box-shadow: none;
|
||||
background: var(--color-surface-warm);
|
||||
}
|
||||
[data-design-version="v2"] .page-hero__meta strong {
|
||||
font-family: var(--font-body);
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
text-transform: none !important;
|
||||
letter-spacing: 0;
|
||||
color: var(--color-primary-wine-100);
|
||||
}
|
||||
|
||||
/* ── About / article ──────────────────────────────────────────────────── */
|
||||
[data-design-version="v2"] .article-body { max-width: 640px; }
|
||||
|
||||
[data-design-version="v2"] .article-body h2 {
|
||||
font-family: var(--font-heading);
|
||||
font-size: clamp(22px, 2.4vw, 28px);
|
||||
font-weight: 400;
|
||||
text-transform: none !important;
|
||||
letter-spacing: 0;
|
||||
}
|
||||
|
||||
[data-design-version="v2"] .article-body .lead {
|
||||
font-family: var(--font-heading);
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
[data-design-version="v2"] .article-body blockquote {
|
||||
border-left: 1px solid rgba(22, 22, 22, 0.2);
|
||||
background: transparent;
|
||||
font-family: var(--font-heading);
|
||||
font-style: italic;
|
||||
font-weight: 400;
|
||||
color: var(--color-neutral-black);
|
||||
}
|
||||
|
||||
[data-design-version="v2"] .feature-card {
|
||||
min-height: 0;
|
||||
align-content: start;
|
||||
gap: 8px;
|
||||
}
|
||||
[data-design-version="v2"] .feature-card h3 {
|
||||
font-family: var(--font-heading);
|
||||
font-size: 20px;
|
||||
text-transform: none !important;
|
||||
letter-spacing: 0;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
[data-design-version="v2"] .muted-section,
|
||||
[data-design-version="v2"] .info-card--accent {
|
||||
background: var(--color-surface-warm);
|
||||
}
|
||||
|
||||
/* ── Contacts ─────────────────────────────────────────────────────────── */
|
||||
[data-design-version="v2"] .contact-panel a {
|
||||
font-family: var(--font-body);
|
||||
font-size: 22px;
|
||||
font-weight: 600;
|
||||
letter-spacing: 0;
|
||||
color: var(--color-primary-wine-100);
|
||||
}
|
||||
|
||||
/* Move legal block to bottom of stack */
|
||||
[data-design-version="v2"] .contact-stack {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
[data-design-version="v2"] .contact-panel:has(> span:only-of-type) {
|
||||
/* no-op fallback; target by text below if :has unsupported */
|
||||
}
|
||||
[data-design-version="v2"] .contact-stack .contact-panel:last-child {
|
||||
order: 99;
|
||||
font-size: 13px;
|
||||
background: transparent;
|
||||
box-shadow: none;
|
||||
border-color: rgba(22, 22, 22, 0.08);
|
||||
padding: 16px 20px;
|
||||
}
|
||||
[data-design-version="v2"] .contact-stack .contact-panel:last-child span {
|
||||
color: var(--color-neutral-gray-600);
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
/* Contact form */
|
||||
[data-design-version="v2"] .contact-form h2 {
|
||||
font-family: var(--font-heading);
|
||||
font-size: 24px;
|
||||
font-weight: 400;
|
||||
text-transform: none !important;
|
||||
letter-spacing: 0;
|
||||
}
|
||||
[data-design-version="v2"] .contact-form label {
|
||||
font-weight: 400;
|
||||
color: var(--color-neutral-gray-700);
|
||||
}
|
||||
|
||||
/* ── Footer ───────────────────────────────────────────────────────────── */
|
||||
[data-design-version="v2"] .contacts-card h2,
|
||||
[data-design-version="v2"] .nav-group h2 {
|
||||
font-family: var(--font-heading);
|
||||
font-size: 16px;
|
||||
font-weight: 400;
|
||||
line-height: 1.2;
|
||||
text-transform: none;
|
||||
letter-spacing: 0;
|
||||
}
|
||||
|
||||
[data-design-version="v2"] .nav-group a,
|
||||
[data-design-version="v2"] .contact-link,
|
||||
[data-design-version="v2"] .footer-legal {
|
||||
font-family: var(--font-body);
|
||||
}
|
||||
|
||||
[data-design-version="v2"] .contact-phone {
|
||||
color: var(--color-primary-wine-100);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
/* ── Buttons (global) ─────────────────────────────────────────────────── */
|
||||
[data-design-version="v2"] .button--primary {
|
||||
background: var(--color-primary-wine-100);
|
||||
border-color: var(--color-primary-wine-100);
|
||||
text-transform: none;
|
||||
letter-spacing: 0;
|
||||
}
|
||||
[data-design-version="v2"] .button--secondary {
|
||||
background: var(--color-surface-warm);
|
||||
color: var(--color-primary-wine-100);
|
||||
border-color: transparent;
|
||||
text-transform: none;
|
||||
letter-spacing: 0;
|
||||
}
|
||||
|
||||
/* ── Product detail page ──────────────────────────────────────────────── */
|
||||
[data-design-version="v2"] .detail-copy h1 {
|
||||
font-family: var(--font-heading);
|
||||
font-size: clamp(36px, 4vw, 56px);
|
||||
font-weight: 400;
|
||||
text-transform: none !important;
|
||||
letter-spacing: 0;
|
||||
}
|
||||
[data-design-version="v2"] .detail-copy > p:not(.eyebrow) {
|
||||
max-width: 66ch;
|
||||
}
|
||||
[data-design-version="v2"] .detail-copy .hero-actions { margin-top: 16px; }
|
||||
|
||||
/* Remove cool background conflicts */
|
||||
[data-design-version="v2"] .news-section,
|
||||
[data-design-version="v2"] .section--muted {
|
||||
background: var(--color-surface-warm);
|
||||
}
|
||||
|
||||
/* ── White-background product card variants ─────────────────────────────
|
||||
For bottle images with white/transparent backgrounds. Work under both
|
||||
V1 and V2; typography inherits from the active version. */
|
||||
|
||||
.product-card[class*="--white"] {
|
||||
background: #ffffff;
|
||||
border: 1px solid rgba(22, 22, 22, 0.08);
|
||||
box-shadow: none;
|
||||
}
|
||||
.product-card[class*="--white"] .product-media {
|
||||
background: #ffffff !important;
|
||||
min-height: 240px;
|
||||
}
|
||||
.product-card[class*="--white"] .product-photo {
|
||||
max-height: 220px;
|
||||
object-fit: contain;
|
||||
}
|
||||
|
||||
/* Variant A — pure white, minimal outline */
|
||||
.product-card--white-pure {
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
/* Variant B — elevated: white on warm page with soft shadow */
|
||||
.product-card--white-elevated {
|
||||
border-color: transparent;
|
||||
box-shadow: 0 1px 2px rgba(22, 22, 22, 0.04), 0 12px 32px rgba(22, 22, 22, 0.06);
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
/* Variant C — hairline gold divider between media and body */
|
||||
.product-card--white-hairline .product-media {
|
||||
border-bottom: 1px solid var(--color-accent-gold, #b9965b);
|
||||
padding-bottom: 12px;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
/* Variant D — thin burgundy frame around the media */
|
||||
.product-card--white-framed .product-media {
|
||||
border: 1px solid rgba(125, 2, 29, 0.18);
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
/* Variant E — split: white media, warm beige body */
|
||||
.product-card--white-split {
|
||||
padding: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
.product-card--white-split .product-media {
|
||||
border-radius: 0;
|
||||
}
|
||||
.product-card--white-split .product-meta,
|
||||
.product-card--white-split .product-footer {
|
||||
padding-left: 20px;
|
||||
padding-right: 20px;
|
||||
background: #F5F0E8;
|
||||
}
|
||||
.product-card--white-split .product-meta { padding-top: 16px; }
|
||||
.product-card--white-split .product-footer { padding-bottom: 20px; }
|
||||
|
||||
/* Wide (catalog) variants — apply to .product-card--list */
|
||||
.product-card--list[class*="--white"] {
|
||||
background: #ffffff;
|
||||
border: 1px solid rgba(22, 22, 22, 0.08);
|
||||
box-shadow: none;
|
||||
}
|
||||
.product-card--list[class*="--white"] .product-image {
|
||||
background: #ffffff;
|
||||
}
|
||||
|
||||
/* Wide A — outline only, all white */
|
||||
.product-card--list.product-card--white-wide {
|
||||
/* base already applied above */
|
||||
}
|
||||
|
||||
/* Wide B — white image, warm info column */
|
||||
.product-card--list.product-card--white-wide-split {
|
||||
padding: 0;
|
||||
overflow: hidden;
|
||||
background: #F5F0E8;
|
||||
}
|
||||
.product-card--list.product-card--white-wide-split .product-image {
|
||||
background: #ffffff;
|
||||
align-self: stretch;
|
||||
padding: 20px;
|
||||
border-right: 1px solid rgba(22, 22, 22, 0.06);
|
||||
max-height: none;
|
||||
min-height: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
.product-card--list.product-card--white-wide-split .product-info,
|
||||
.product-card--list.product-card--white-wide-split .product-buy {
|
||||
padding-top: 20px;
|
||||
padding-bottom: 20px;
|
||||
}
|
||||
.product-card--list.product-card--white-wide-split .product-buy {
|
||||
padding-right: 20px;
|
||||
}
|
||||
|
||||
/* Wide C — white throughout with gold vertical hairline before info */
|
||||
.product-card--list.product-card--white-wide-hairline .product-image {
|
||||
border-right: 1px solid var(--color-accent-gold, #b9965b);
|
||||
padding-right: 20px;
|
||||
}
|
||||
|
||||
/* Showcase page layout */
|
||||
.card-whitebg-section { background: var(--color-background-base); }
|
||||
.card-whitebg-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
|
||||
gap: 24px;
|
||||
}
|
||||
.card-whitebg-block { margin-top: 48px; }
|
||||
.card-whitebg-block h2 {
|
||||
font-size: 22px;
|
||||
font-weight: 500;
|
||||
margin: 0 0 6px;
|
||||
}
|
||||
.card-whitebg-block .eyebrow { margin: 0; }
|
||||
.card-whitebg-block .variant-note {
|
||||
color: var(--color-neutral-gray-600);
|
||||
font-size: 14px;
|
||||
margin: 0 0 24px;
|
||||
max-width: 60ch;
|
||||
}
|
||||
BIN
src/fonts/CormorantGaramond-Medium.woff2
Normal file
BIN
src/fonts/CormorantGaramond-Medium.woff2
Normal file
Binary file not shown.
BIN
src/fonts/CormorantGaramond-Regular.woff2
Normal file
BIN
src/fonts/CormorantGaramond-Regular.woff2
Normal file
Binary file not shown.
@ -7,7 +7,7 @@ permalink: /
|
||||
<section class="hero">
|
||||
<div class="container hero-copy">
|
||||
<p class="eyebrow">DP Trade</p>
|
||||
<h1>Премиальный каталог вина для торговли</h1>
|
||||
<h1>ПРЕМИАЛЬНЫЙ КАТАЛОГ ВИНА</h1>
|
||||
<p>Регионы, производители, партии и коммерческие условия собраны в одном интерфейсе для быстрых закупочных решений.</p>
|
||||
<div class="hero-actions">
|
||||
<a class="button button--primary" href="catalog.html">Смотреть каталог</a>
|
||||
@ -69,17 +69,17 @@ permalink: /
|
||||
<h2>Рекомендации недели</h2>
|
||||
</div>
|
||||
<div class="product-grid">
|
||||
<article class="product-card">
|
||||
<article class="product-card product-card--white-hairline">
|
||||
<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>
|
||||
<article class="product-card">
|
||||
<article class="product-card product-card--white-hairline">
|
||||
<div class="product-media product-media--amber"><img class="product-photo" src="assets/images/00080768_1.png" alt="Brunello di Montalcino" /></div>
|
||||
<div><span class="muted-caps">Tuscany</span><h3>Brunello di Montalcino</h3><p>Italy · Red dry · 2018 · 0.75 L</p></div>
|
||||
<div class="product-footer"><strong>4 240 ₽</strong><a class="button button--primary button--sm" href="product.html">Подробнее</a></div>
|
||||
</article>
|
||||
<article class="product-card">
|
||||
<article class="product-card product-card--white-hairline">
|
||||
<div class="product-media product-media--green"><img class="product-photo" src="assets/images/00081726_1.png" alt="Riesling Kabinett" /></div>
|
||||
<div><span class="muted-caps">Mosel</span><h3>Riesling Kabinett</h3><p>Germany · White · 2021 · 0.75 L</p></div>
|
||||
<div class="product-footer"><strong>2 150 ₽</strong><a class="button button--primary button--sm" href="product.html">Подробнее</a></div>
|
||||
|
||||
1
src/js/analytics.js
Normal file
1
src/js/analytics.js
Normal file
File diff suppressed because one or more lines are too long
98
src/js/design-switcher.js
Normal file
98
src/js/design-switcher.js
Normal file
@ -0,0 +1,98 @@
|
||||
(function () {
|
||||
'use strict';
|
||||
|
||||
var KEY = 'dp-design-version';
|
||||
var root = document.documentElement;
|
||||
|
||||
function getVersion() {
|
||||
try {
|
||||
return localStorage.getItem(KEY) || 'v1';
|
||||
} catch (e) {
|
||||
return 'v1';
|
||||
}
|
||||
}
|
||||
|
||||
function setVersion(v) {
|
||||
try {
|
||||
localStorage.setItem(KEY, v);
|
||||
} catch (e) {}
|
||||
}
|
||||
|
||||
function syncButtons(v) {
|
||||
var buttons = document.querySelectorAll('.design-toggle__btn');
|
||||
for (var i = 0; i < buttons.length; i++) {
|
||||
var btn = buttons[i];
|
||||
var active = btn.dataset.version === v;
|
||||
btn.classList.toggle('is-active', active);
|
||||
btn.setAttribute('aria-pressed', active ? 'true' : 'false');
|
||||
}
|
||||
}
|
||||
|
||||
// ── V2 DOM enhancements ────────────────────────────────────────────────
|
||||
// All insertions are idempotent and tagged data-v2-only so V1 CSS hides them.
|
||||
|
||||
function ensureSplitContactFields() {
|
||||
var form = document.querySelector('.contact-form');
|
||||
if (!form || form.dataset.v2Enhanced === '1') return;
|
||||
var labels = form.querySelectorAll('label');
|
||||
for (var i = 0; i < labels.length; i++) {
|
||||
if (/Телефон или email/i.test(labels[i].textContent)) {
|
||||
var comboLabel = labels[i];
|
||||
comboLabel.setAttribute('data-v2-hide', '1');
|
||||
|
||||
var phoneLabel = document.createElement('label');
|
||||
phoneLabel.setAttribute('data-v2-only', 'split');
|
||||
phoneLabel.innerHTML = 'Телефон<input class="input" type="tel" name="phone-v2" placeholder="+7 (___) ___-__-__" />';
|
||||
|
||||
var emailLabel = document.createElement('label');
|
||||
emailLabel.setAttribute('data-v2-only', 'split');
|
||||
emailLabel.innerHTML = 'Email<input class="input" type="email" name="email-v2" placeholder="you@company.ru" />';
|
||||
|
||||
comboLabel.parentNode.insertBefore(phoneLabel, comboLabel.nextSibling);
|
||||
comboLabel.parentNode.insertBefore(emailLabel, phoneLabel.nextSibling);
|
||||
break;
|
||||
}
|
||||
}
|
||||
form.dataset.v2Enhanced = '1';
|
||||
form.addEventListener('submit', function (e) {
|
||||
if (root.getAttribute('data-design-version') !== 'v2') return;
|
||||
e.preventDefault();
|
||||
if (form.querySelector('.form-success')) return;
|
||||
var success = document.createElement('div');
|
||||
success.className = 'form-success';
|
||||
success.setAttribute('data-v2-only', 'success');
|
||||
success.textContent = 'Заявка отправлена. Менеджер свяжется с вами в ближайшее время.';
|
||||
form.appendChild(success);
|
||||
var btn = form.querySelector('button[type="submit"]');
|
||||
if (btn) {
|
||||
btn.disabled = true;
|
||||
btn.textContent = 'Заявка отправлена';
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function enhanceDomV2() {
|
||||
ensureSplitContactFields();
|
||||
}
|
||||
|
||||
function apply(v) {
|
||||
root.setAttribute('data-design-version', v);
|
||||
syncButtons(v);
|
||||
if (v === 'v2') enhanceDomV2();
|
||||
}
|
||||
|
||||
document.addEventListener('click', function (e) {
|
||||
var btn = e.target.closest && e.target.closest('.design-toggle__btn');
|
||||
if (!btn) return;
|
||||
var v = btn.dataset.version;
|
||||
if (!v) return;
|
||||
setVersion(v);
|
||||
apply(v);
|
||||
});
|
||||
|
||||
if (document.readyState === 'loading') {
|
||||
document.addEventListener('DOMContentLoaded', function () { apply(getVersion()); });
|
||||
} else {
|
||||
apply(getVersion());
|
||||
}
|
||||
})();
|
||||
329
src/product-card-white.njk
Normal file
329
src/product-card-white.njk
Normal file
@ -0,0 +1,329 @@
|
||||
---
|
||||
title: "DP Trade — Product card · White background variants"
|
||||
layout: layouts/default
|
||||
permalink: /product-card-white.html
|
||||
bodyClass: compact-type
|
||||
---
|
||||
<main class="section card-whitebg-section">
|
||||
<div class="container">
|
||||
<div class="card-lab-head">
|
||||
<div>
|
||||
<p class="eyebrow">UI-kit / Product cards</p>
|
||||
<h1>Карточка товара на белом фоне</h1>
|
||||
</div>
|
||||
<p>Часть изображений бутылок сохранена на чистом белом фоне — под такие фото нужны карточки, где блок-медиа тоже белый. Ниже несколько вариантов решения: от минимального контура до акцентной рамки и split-композиции.</p>
|
||||
</div>
|
||||
|
||||
<!-- Variant A -->
|
||||
<section class="card-whitebg-block" aria-labelledby="whitebg-a">
|
||||
<p class="eyebrow">Variant A · minimal outline</p>
|
||||
<h2 id="whitebg-a">Чистый белый с тонкой рамкой</h2>
|
||||
<p class="variant-note">Карточка и медиа на одном белом фоне, разделения нет. Только 1px нейтральный контур, чтобы отделить её от страницы. Самый нейтральный и «каталожный» вариант — бутылки на белом PNG встают без швов.</p>
|
||||
<div class="card-whitebg-grid">
|
||||
<article class="product-card product-card--white-pure">
|
||||
<div class="product-media"><img class="product-photo" src="assets/images/00081538_1.png" alt="Chateau Laroque Grand Cru" /></div>
|
||||
<div class="product-meta">
|
||||
<span class="tag tag--filled">Bordeaux</span>
|
||||
<h3>Chateau Laroque Grand Cru</h3>
|
||||
<p>France · Red dry · 2019 · 0.75 L</p>
|
||||
</div>
|
||||
<div class="product-footer">
|
||||
<strong>3 890 ₽</strong>
|
||||
<a class="button button--primary button--sm" href="product.html">Подробнее</a>
|
||||
</div>
|
||||
</article>
|
||||
<article class="product-card product-card--white-pure">
|
||||
<div class="product-media"><img class="product-photo" src="assets/images/00080768_1.png" alt="Brunello di Montalcino" /></div>
|
||||
<div class="product-meta">
|
||||
<span class="tag tag--filled">Toscana</span>
|
||||
<h3>Brunello di Montalcino</h3>
|
||||
<p>Italy · Red dry · 2018 · 0.75 L</p>
|
||||
</div>
|
||||
<div class="product-footer">
|
||||
<strong>4 240 ₽</strong>
|
||||
<a class="button button--primary button--sm" href="product.html">Подробнее</a>
|
||||
</div>
|
||||
</article>
|
||||
<article class="product-card product-card--white-pure">
|
||||
<div class="product-media"><img class="product-photo" src="assets/images/00073820_1.png" alt="Riesling Mosel" /></div>
|
||||
<div class="product-meta">
|
||||
<span class="tag tag--filled">Mosel</span>
|
||||
<h3>Dr. Loosen Riesling</h3>
|
||||
<p>Germany · White off-dry · 2022 · 0.75 L</p>
|
||||
</div>
|
||||
<div class="product-footer">
|
||||
<strong>2 990 ₽</strong>
|
||||
<a class="button button--primary button--sm" href="product.html">Подробнее</a>
|
||||
</div>
|
||||
</article>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Variant B -->
|
||||
<section class="card-whitebg-block" aria-labelledby="whitebg-b">
|
||||
<p class="eyebrow">Variant B · elevated</p>
|
||||
<h2 id="whitebg-b">Белая карточка с мягкой тенью</h2>
|
||||
<p class="variant-note">Без рамки, но с лёгкой тенью. Карточка «приподнята» над тёплым фоном страницы — премиальнее, чем outline. Хорошо работает, когда страница сама тёплая кремовая (V2 background), а карточка должна ощущаться как бумага.</p>
|
||||
<div class="card-whitebg-grid">
|
||||
<article class="product-card product-card--white-elevated">
|
||||
<div class="product-media"><img class="product-photo" src="assets/images/00081538_1.png" alt="Chateau Laroque Grand Cru" /></div>
|
||||
<div class="product-meta">
|
||||
<span class="tag tag--filled">Bordeaux</span>
|
||||
<h3>Chateau Laroque Grand Cru</h3>
|
||||
<p>France · Red dry · 2019 · 0.75 L</p>
|
||||
</div>
|
||||
<div class="product-footer">
|
||||
<strong>3 890 ₽</strong>
|
||||
<a class="button button--primary button--sm" href="product.html">Подробнее</a>
|
||||
</div>
|
||||
</article>
|
||||
<article class="product-card product-card--white-elevated">
|
||||
<div class="product-media"><img class="product-photo" src="assets/images/00081726_1.png" alt="Piemonte Barolo" /></div>
|
||||
<div class="product-meta">
|
||||
<span class="tag tag--filled">Piemonte</span>
|
||||
<h3>Marchesi Barolo</h3>
|
||||
<p>Italy · Red dry · 2018 · 0.75 L</p>
|
||||
</div>
|
||||
<div class="product-footer">
|
||||
<strong>5 180 ₽</strong>
|
||||
<a class="button button--primary button--sm" href="product.html">Подробнее</a>
|
||||
</div>
|
||||
</article>
|
||||
<article class="product-card product-card--white-elevated">
|
||||
<div class="product-media"><img class="product-photo" src="assets/images/00080768_1.png" alt="Brunello" /></div>
|
||||
<div class="product-meta">
|
||||
<span class="tag tag--filled">Toscana</span>
|
||||
<h3>Brunello di Montalcino</h3>
|
||||
<p>Italy · Red dry · 2018 · 0.75 L</p>
|
||||
</div>
|
||||
<div class="product-footer">
|
||||
<strong>4 240 ₽</strong>
|
||||
<a class="button button--primary button--sm" href="product.html">Подробнее</a>
|
||||
</div>
|
||||
</article>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Variant C -->
|
||||
<section class="card-whitebg-block" aria-labelledby="whitebg-c">
|
||||
<p class="eyebrow">Variant C · hairline divider</p>
|
||||
<h2 id="whitebg-c">Белое медиа + золотая тонкая линия</h2>
|
||||
<p class="variant-note">Медиа и тело на едином белом фоне, разделены только hairline-линией золотого акцента. Editorial-вайб, без тяжёлых блоков. Подходит для флагманских подборок и промо-полок.</p>
|
||||
<div class="card-whitebg-grid">
|
||||
<article class="product-card product-card--white-hairline">
|
||||
<div class="product-media"><img class="product-photo" src="assets/images/00073820_1.png" alt="Riesling Mosel" /></div>
|
||||
<div class="product-meta">
|
||||
<span class="tag tag--filled">Mosel</span>
|
||||
<h3>Dr. Loosen Riesling</h3>
|
||||
<p>Germany · White off-dry · 2022 · 0.75 L</p>
|
||||
</div>
|
||||
<div class="product-footer">
|
||||
<strong>2 990 ₽</strong>
|
||||
<a class="button button--primary button--sm" href="product.html">Подробнее</a>
|
||||
</div>
|
||||
</article>
|
||||
<article class="product-card product-card--white-hairline">
|
||||
<div class="product-media"><img class="product-photo" src="assets/images/00081538_1.png" alt="Chateau Laroque Grand Cru" /></div>
|
||||
<div class="product-meta">
|
||||
<span class="tag tag--filled">Bordeaux</span>
|
||||
<h3>Chateau Laroque Grand Cru</h3>
|
||||
<p>France · Red dry · 2019 · 0.75 L</p>
|
||||
</div>
|
||||
<div class="product-footer">
|
||||
<strong>3 890 ₽</strong>
|
||||
<a class="button button--primary button--sm" href="product.html">Подробнее</a>
|
||||
</div>
|
||||
</article>
|
||||
<article class="product-card product-card--white-hairline">
|
||||
<div class="product-media"><img class="product-photo" src="assets/images/00080768_1.png" alt="Brunello di Montalcino" /></div>
|
||||
<div class="product-meta">
|
||||
<span class="tag tag--filled">Toscana</span>
|
||||
<h3>Brunello di Montalcino</h3>
|
||||
<p>Italy · Red dry · 2018 · 0.75 L</p>
|
||||
</div>
|
||||
<div class="product-footer">
|
||||
<strong>4 240 ₽</strong>
|
||||
<a class="button button--primary button--sm" href="product.html">Подробнее</a>
|
||||
</div>
|
||||
</article>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Variant D -->
|
||||
<section class="card-whitebg-block" aria-labelledby="whitebg-d">
|
||||
<p class="eyebrow">Variant D · framed media</p>
|
||||
<h2 id="whitebg-d">Белое медиа в бордовой рамке</h2>
|
||||
<p class="variant-note">Белый фон сохраняется, но медиа-блок обводится тонкой бордовой рамкой. Бутылка визуально «заперта» в окне и не растворяется в странице. Даёт больше структуры, чем hairline, не уходя в тяжёлый outline.</p>
|
||||
<div class="card-whitebg-grid">
|
||||
<article class="product-card product-card--white-framed">
|
||||
<div class="product-media"><img class="product-photo" src="assets/images/00081726_1.png" alt="Piemonte Barolo" /></div>
|
||||
<div class="product-meta">
|
||||
<span class="tag tag--filled">Piemonte</span>
|
||||
<h3>Marchesi Barolo</h3>
|
||||
<p>Italy · Red dry · 2018 · 0.75 L</p>
|
||||
</div>
|
||||
<div class="product-footer">
|
||||
<strong>5 180 ₽</strong>
|
||||
<a class="button button--primary button--sm" href="product.html">Подробнее</a>
|
||||
</div>
|
||||
</article>
|
||||
<article class="product-card product-card--white-framed">
|
||||
<div class="product-media"><img class="product-photo" src="assets/images/00073820_1.png" alt="Riesling Mosel" /></div>
|
||||
<div class="product-meta">
|
||||
<span class="tag tag--filled">Mosel</span>
|
||||
<h3>Dr. Loosen Riesling</h3>
|
||||
<p>Germany · White off-dry · 2022 · 0.75 L</p>
|
||||
</div>
|
||||
<div class="product-footer">
|
||||
<strong>2 990 ₽</strong>
|
||||
<a class="button button--primary button--sm" href="product.html">Подробнее</a>
|
||||
</div>
|
||||
</article>
|
||||
<article class="product-card product-card--white-framed">
|
||||
<div class="product-media"><img class="product-photo" src="assets/images/00080768_1.png" alt="Brunello" /></div>
|
||||
<div class="product-meta">
|
||||
<span class="tag tag--filled">Toscana</span>
|
||||
<h3>Brunello di Montalcino</h3>
|
||||
<p>Italy · Red dry · 2018 · 0.75 L</p>
|
||||
</div>
|
||||
<div class="product-footer">
|
||||
<strong>4 240 ₽</strong>
|
||||
<a class="button button--primary button--sm" href="product.html">Подробнее</a>
|
||||
</div>
|
||||
</article>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Variant E -->
|
||||
<section class="card-whitebg-block" aria-labelledby="whitebg-e">
|
||||
<p class="eyebrow">Variant E · split</p>
|
||||
<h2 id="whitebg-e">Split: белое медиа + тёплое тело</h2>
|
||||
<p class="variant-note">Медиа остаётся на белом, а info-часть уходит на тёплый #F5F0E8. Визуально делит карточку на «полку с бутылкой» и «описание». Сильнее структурирует сетку каталога, полезно, когда карточек много.</p>
|
||||
<div class="card-whitebg-grid">
|
||||
<article class="product-card product-card--white-split">
|
||||
<div class="product-media"><img class="product-photo" src="assets/images/00081538_1.png" alt="Chateau Laroque Grand Cru" /></div>
|
||||
<div class="product-meta">
|
||||
<span class="tag tag--filled">Bordeaux</span>
|
||||
<h3>Chateau Laroque Grand Cru</h3>
|
||||
<p>France · Red dry · 2019 · 0.75 L</p>
|
||||
</div>
|
||||
<div class="product-footer">
|
||||
<strong>3 890 ₽</strong>
|
||||
<a class="button button--primary button--sm" href="product.html">Подробнее</a>
|
||||
</div>
|
||||
</article>
|
||||
<article class="product-card product-card--white-split">
|
||||
<div class="product-media"><img class="product-photo" src="assets/images/00080768_1.png" alt="Brunello di Montalcino" /></div>
|
||||
<div class="product-meta">
|
||||
<span class="tag tag--filled">Toscana</span>
|
||||
<h3>Brunello di Montalcino</h3>
|
||||
<p>Italy · Red dry · 2018 · 0.75 L</p>
|
||||
</div>
|
||||
<div class="product-footer">
|
||||
<strong>4 240 ₽</strong>
|
||||
<a class="button button--primary button--sm" href="product.html">Подробнее</a>
|
||||
</div>
|
||||
</article>
|
||||
<article class="product-card product-card--white-split">
|
||||
<div class="product-media"><img class="product-photo" src="assets/images/00081726_1.png" alt="Piemonte Barolo" /></div>
|
||||
<div class="product-meta">
|
||||
<span class="tag tag--filled">Piemonte</span>
|
||||
<h3>Marchesi Barolo</h3>
|
||||
<p>Italy · Red dry · 2018 · 0.75 L</p>
|
||||
</div>
|
||||
<div class="product-footer">
|
||||
<strong>5 180 ₽</strong>
|
||||
<a class="button button--primary button--sm" href="product.html">Подробнее</a>
|
||||
</div>
|
||||
</article>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Wide F -->
|
||||
<section class="card-whitebg-block" aria-labelledby="whitebg-f">
|
||||
<p class="eyebrow">Variant F · wide / catalog</p>
|
||||
<h2 id="whitebg-f">Широкая строка каталога, белая</h2>
|
||||
<p class="variant-note">Горизонтальный формат B2B-каталога на белом: фото слева, описание в центре, цена и CTA справа. Тонкий контур вокруг строки. Бутылки с белым PNG встают без «коробок».</p>
|
||||
<div class="catalog-card-variants">
|
||||
<article class="catalog-card-sample">
|
||||
<p class="catalog-card-sample__label">Wide · outline</p>
|
||||
<div class="product-card product-card--list product-card--white-wide">
|
||||
<a class="product-image" href="product.html" aria-label="Chateau Laroque Grand Cru">
|
||||
<img src="assets/images/00081538_1.png" alt="Chateau Laroque Grand Cru" />
|
||||
</a>
|
||||
<div class="product-info">
|
||||
<h3>Chateau Laroque Grand Cru, 0.75 л, 2019</h3>
|
||||
<p class="product-origin">Красное сухое · Bordeaux · Франция</p>
|
||||
<p>Купаж Merlot / Cabernet Franc · 13.5%</p>
|
||||
<p>Артикул: 00081538 · Упаковка: 6 шт.</p>
|
||||
</div>
|
||||
<div class="product-buy">
|
||||
<strong>3 890 ₽</strong>
|
||||
<a class="button button--primary" href="product.html">В корзину</a>
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Wide G -->
|
||||
<section class="card-whitebg-block" aria-labelledby="whitebg-g">
|
||||
<p class="eyebrow">Variant G · wide split</p>
|
||||
<h2 id="whitebg-g">Split-строка: белое фото + тёплое описание</h2>
|
||||
<p class="variant-note">Фото живёт в белом окне-«полке», справа — тёплый #F5F0E8 info-блок с ценой. Сильнее разделяет ассортимент и метаданные, удобно для плотных каталожных сеток.</p>
|
||||
<div class="catalog-card-variants">
|
||||
<article class="catalog-card-sample">
|
||||
<p class="catalog-card-sample__label">Wide · split</p>
|
||||
<div class="product-card product-card--list product-card--white-wide-split">
|
||||
<a class="product-image" href="product.html" aria-label="Brunello di Montalcino">
|
||||
<img src="assets/images/00080768_1.png" alt="Brunello di Montalcino" />
|
||||
</a>
|
||||
<div class="product-info">
|
||||
<h3>Brunello di Montalcino, 0.75 л, 2018</h3>
|
||||
<p class="product-origin">Красное сухое · Toscana · Италия</p>
|
||||
<p>100% Sangiovese · 14%</p>
|
||||
<p>Артикул: 00080768 · Упаковка: 6 шт.</p>
|
||||
</div>
|
||||
<div class="product-buy">
|
||||
<strong>4 240 ₽</strong>
|
||||
<a class="button button--primary" href="product.html">В корзину</a>
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Wide H -->
|
||||
<section class="card-whitebg-block" aria-labelledby="whitebg-h">
|
||||
<p class="eyebrow">Variant H · wide hairline</p>
|
||||
<h2 id="whitebg-h">Строка с золотой разделительной линией</h2>
|
||||
<p class="variant-note">Весь фон белый, фото отделено от текстовой части тонкой золотой вертикальной линией. Самый «editorial» wide-вариант — читается как строка винной карты.</p>
|
||||
<div class="catalog-card-variants">
|
||||
<article class="catalog-card-sample">
|
||||
<p class="catalog-card-sample__label">Wide · hairline</p>
|
||||
<div class="product-card product-card--list product-card--white-wide-hairline">
|
||||
<a class="product-image" href="product.html" aria-label="Dr. Loosen Riesling">
|
||||
<img src="assets/images/00073820_1.png" alt="Dr. Loosen Riesling" />
|
||||
</a>
|
||||
<div class="product-info">
|
||||
<h3>Dr. Loosen Riesling, 0.75 л, 2022</h3>
|
||||
<p class="product-origin">Белое полусухое · Mosel · Германия</p>
|
||||
<p>100% Riesling · 8.5%</p>
|
||||
<p>Артикул: 00073820 · Упаковка: 6 шт.</p>
|
||||
</div>
|
||||
<div class="product-buy">
|
||||
<strong>2 990 ₽</strong>
|
||||
<a class="button button--primary" href="product.html">В корзину</a>
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="card-whitebg-block" aria-labelledby="whitebg-summary">
|
||||
<p class="eyebrow">Резюме</p>
|
||||
<h2 id="whitebg-summary">Какой брать</h2>
|
||||
<p class="variant-note">Сеточные (плитки): для каталога и плотной сетки — <strong>A (outline)</strong> или <strong>E (split)</strong>; для главной и подборок — <strong>B (elevated)</strong> или <strong>C (hairline)</strong>; <strong>D (framed)</strong> — промежуточный. Широкие (каталог-строки): <strong>F (outline)</strong> как дефолт B2B, <strong>G (split)</strong> когда нужно визуально отделить метаданные, <strong>H (hairline)</strong> для editorial-подборок.</p>
|
||||
</section>
|
||||
</div>
|
||||
</main>
|
||||
@ -4,6 +4,15 @@ layout: layouts/default
|
||||
permalink: /product.html
|
||||
---
|
||||
<main class="section">
|
||||
<nav class="breadcrumbs container" data-v2-only="breadcrumbs" aria-label="Хлебные крошки">
|
||||
<a href="index.html">Главная</a>
|
||||
<span aria-hidden="true">/</span>
|
||||
<a href="catalog.html">Каталог</a>
|
||||
<span aria-hidden="true">/</span>
|
||||
<a href="#">Bordeaux</a>
|
||||
<span aria-hidden="true">/</span>
|
||||
<span aria-current="page">Chateau Laroque Grand Cru</span>
|
||||
</nav>
|
||||
<div class="container product-detail">
|
||||
<div class="product-media"><img class="product-photo" src="assets/images/00081538_1.png" alt="Chateau Laroque Grand Cru" /></div>
|
||||
<section class="detail-copy">
|
||||
|
||||
@ -4,6 +4,10 @@ layout: layouts/ui-kit
|
||||
permalink: /ui-kit.html
|
||||
---
|
||||
<aside class="sidebar">
|
||||
<div class="design-toggle design-toggle--uikit" role="group" aria-label="Версия дизайна">
|
||||
<button type="button" class="design-toggle__btn" data-version="v1">V1</button>
|
||||
<button type="button" class="design-toggle__btn" data-version="v2">V2</button>
|
||||
</div>
|
||||
<a class="brand" href="#top" aria-label="DP Trade Design System">
|
||||
<span class="brand__mark">DP</span>
|
||||
<span>
|
||||
|
||||
1172
ui-kit.html
1172
ui-kit.html
File diff suppressed because it is too large
Load Diff
Loading…
x
Reference in New Issue
Block a user