From 02193a0f6650a6e41484d9e92f2ac460abd17928 Mon Sep 17 00:00:00 2001 From: Alexey S Date: Fri, 17 Apr 2026 21:10:49 +0300 Subject: [PATCH] Add editorial guidelines and refresh UI kit --- about.html | 2 +- article-guidelines.html | 326 ++++++++++++++++++++++++++++++++++++++ bottle-cards.html | 2 +- catalog.html | 2 +- contacts.html | 2 +- css/site.css | 275 +++++++++++++++++++++++++++++++- index.html | 2 +- news-villa-raiano-v2.html | 292 ++++++++++++++++++++++++++++++++++ news-villa-raiano.html | 2 +- product.html | 2 +- ui-kit.html | 112 +++++++++++++ 11 files changed, 1011 insertions(+), 8 deletions(-) create mode 100644 article-guidelines.html create mode 100644 news-villa-raiano-v2.html diff --git a/about.html b/about.html index 6f227e0..d19deeb 100644 --- a/about.html +++ b/about.html @@ -182,7 +182,7 @@

Demo pages

- ГлавнаяКаталогКарточка товараВарианты карточекНовостьО компанииКонтакты + ГлавнаяКаталогКарточка товараВарианты карточекНовостьНовость v2Ред. гайдО компанииКонтакты

UI-kit sections

diff --git a/article-guidelines.html b/article-guidelines.html new file mode 100644 index 0000000..2202dfc --- /dev/null +++ b/article-guidelines.html @@ -0,0 +1,326 @@ + + + + + + DP Trade — Article Guidelines + + + + + + +
+
+
+ + +
+ +7 (495) 937-94-60 + + + + + + +
+
+ +
+
+
+
+
+

Editorial guidelines

+

Рекомендации по статьям DP Trade

+

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

+
+ +
+
+ +
+
+
+ 01 +

Структура статьи

+

Каждый материал должен быстро отвечать на три вопроса: о ком/о чём статья, почему это важно для аудитории DP Trade и какое действие читатель может сделать дальше.

+
    +
  • Заголовок: конкретный, с именем производителя, региона или события.
    • +
  • Лид: 1-2 предложения, раскрывает главный повод.
    • +
  • Основной текст: 3-5 смысловых блоков с подзаголовками или визуальными паузами.
    • +
  • Финал: вывод, рекомендация, ссылка в каталог или повод обратиться к менеджеру.
    • +
+
+
+ 02 +

Заголовки

+

Заголовок должен быть редакционным, но полезным: не только красивым, а ещё и объясняющим тему.

+
    +
  • Оптимально: 55-90 символов.
    • +
  • Использовать имена: Villa Raiano, Gaja, Bordeaux, Fiano.
    • +
  • Избегать пустых формул: «уникальная история», «легендарное событие» без факта.
    • +
  • Подзаголовки должны вести читателя по смыслу, а не повторять заголовок.
    • +
+
+
+ 03 +

Текст

+

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

+
    +
  • Абзац: 350-650 знаков.
    • +
  • Лид: до 280 знаков.
    • +
  • Новость: 3 000-5 500 знаков.
    • +
  • История производителя: 5 000-8 000 знаков.
    • +
  • Цифры, годы, награды и сорта проверять отдельно.
    • +
+
+
+ 04 +

Фотографии

+

Фотографии должны показывать реальный продукт, место, людей или процесс. Лучше меньше декоративности и больше конкретики.

+
    +
  • Hero: горизонтальное фото от 1600px по ширине.
    • +
  • Внутренние фото: от 1200px, без сильной компрессии.
    • +
  • Для карточек: предмет или бутылка должны быть читаемы на мобильном.
    • +
  • Не использовать тёмные, размытые, случайно обрезанные изображения.
    • +
  • Обязательно писать alt: кто/что изображено и где.
    • +
+
+
+ 05 +

Композиция

+

Для длинной статьи нужны визуальные паузы: крупное фото после лида, цитата или факт-блок в середине и финальный акцент.

+
    +
  • Не ставить подряд больше 4 текстовых абзацев без паузы.
    • +
  • Цитаты использовать только если они усиливают материал.
    • +
  • Сайдбар может содержать факты: страна, регион, сорт, год, награда.
    • +
  • Финальный CTA должен быть связан с каталогом или менеджером.
    • +
+
+
+ 06 +

SEO и handoff

+

Материал должен быть понятен поиску и разработке: один H1, последовательные H2, корректные alt и прозрачная структура блоков.

+
    +
  • Title: до 60 символов, включает бренд или тему.
    • +
  • Description: 140-160 символов.
    • +
  • URL: латиница, короткий slug.
    • +
  • Изображения называть по смыслу, а не `photo-final-2`.
    • +
  • В CMS хранить дату, автора/раздел, теги и связанные товары.
    • +
+
+
+
+ +
+
+
+

Pre-publish checklist

+

Проверка перед публикацией

+
+
    +
  • Заголовок отражает конкретный повод и не звучит как реклама.
    • +
  • В лиде понятна ценность материала для профессиональной аудитории.
    • +
  • Все годы, имена, апелласьоны и награды проверены.
    • +
  • Есть минимум 2-4 качественные фотографии с alt-текстами.
    • +
  • Финал ведёт к каталогу, производителю, товару или контакту с менеджером.
    • +
+
+
+
+ + +
+ + diff --git a/bottle-cards.html b/bottle-cards.html index d517708..ba02cff 100644 --- a/bottle-cards.html +++ b/bottle-cards.html @@ -182,7 +182,7 @@

Demo pages

- ГлавнаяКаталогКарточка товараВарианты карточекНовостьО компанииКонтакты + ГлавнаяКаталогКарточка товараВарианты карточекНовостьНовость v2Ред. гайдО компанииКонтакты

UI-kit sections

diff --git a/catalog.html b/catalog.html index 9894cd0..e1120a5 100644 --- a/catalog.html +++ b/catalog.html @@ -182,7 +182,7 @@

Demo pages

- ГлавнаяКаталогКарточка товараВарианты карточекНовостьО компанииКонтакты + ГлавнаяКаталогКарточка товараВарианты карточекНовостьНовость v2Ред. гайдО компанииКонтакты

UI-kit sections

diff --git a/contacts.html b/contacts.html index 97fe26c..0782c80 100644 --- a/contacts.html +++ b/contacts.html @@ -182,7 +182,7 @@

Demo pages

- ГлавнаяКаталогКарточка товараВарианты карточекНовостьО компанииКонтакты + ГлавнаяКаталогКарточка товараВарианты карточекНовостьНовость v2Ред. гайдО компанииКонтакты

UI-kit sections

diff --git a/css/site.css b/css/site.css index 464e05c..625c7b7 100644 --- a/css/site.css +++ b/css/site.css @@ -1404,6 +1404,12 @@ select { url("https://images.unsplash.com/photo-1510812431401-41d2bd2722f3?auto=format&fit=crop&w=1800&q=80"); } +.page-hero--guidelines { + background-image: + linear-gradient(100deg, rgba(22, 20, 17, 0.86), rgba(22, 20, 17, 0.5) 54%, rgba(22, 20, 17, 0.22)), + url("https://images.unsplash.com/photo-1516594798947-e65505dbb29d?auto=format&fit=crop&w=1800&q=80"); +} + .page-hero__inner { display: grid; grid-template-columns: minmax(0, 0.72fr) minmax(280px, 0.28fr); @@ -1636,6 +1642,257 @@ select { resize: vertical; } +.guideline-grid { + display: grid; + grid-template-columns: repeat(3, minmax(0, 1fr)); + gap: 18px; +} + +.guideline-card, +.guideline-checklist { + border: 1px solid rgba(217, 222, 229, 0.9); + border-radius: var(--radius-sm); + background: var(--color-surface); + box-shadow: var(--shadow-soft); +} + +.guideline-card { + min-width: 0; + padding: 24px; + display: grid; + gap: 14px; + align-content: start; +} + +.guideline-card--lead { + grid-column: span 2; + background: #eef2f6; +} + +.guideline-card span { + color: var(--color-accent-gold); + font-size: 12px; + font-weight: 800; +} + +.guideline-card h2, +.guideline-checklist h2 { + margin: 0; + color: var(--color-neutral-black); + font-family: var(--font-heading); + font-size: clamp(24px, 2.6vw, 34px); + font-weight: 800; + line-height: 1.08; + text-transform: uppercase; +} + +.guideline-card p { + margin: 0; + color: var(--color-neutral-gray-600); + line-height: 1.55; +} + +.guideline-card ul, +.guideline-checklist ul { + margin: 0; + padding-left: 18px; + color: var(--color-neutral-gray-700); + line-height: 1.62; +} + +.guideline-card li + li, +.guideline-checklist li + li { + margin-top: 8px; +} + +.guideline-checklist { + padding: 28px; + display: grid; + grid-template-columns: minmax(0, 0.42fr) minmax(0, 0.58fr); + gap: 28px; + align-items: start; +} + +.news-editorial { + background: #f4f6f9; +} + +.editorial-hero { + padding: 54px 0 34px; + background: #f8fafc; + border-bottom: 1px solid rgba(102, 96, 95, 0.14); +} + +.editorial-hero__inner { + display: grid; + grid-template-columns: minmax(0, 0.55fr) minmax(360px, 0.45fr); + gap: 38px; + align-items: end; +} + +.editorial-hero h1 { + margin: 10px 0 18px; + color: var(--color-neutral-black); + font-family: var(--font-heading); + font-size: clamp(42px, 5.6vw, 76px); + font-weight: 800; + line-height: 0.98; + text-transform: uppercase; +} + +.editorial-meta { + display: flex; + gap: 12px; + flex-wrap: wrap; +} + +.editorial-meta span { + padding: 8px 12px; + border: 1px solid rgba(75, 15, 36, 0.16); + border-radius: var(--radius-sm); + color: var(--color-primary-wine-100); + font-size: 13px; + font-weight: 800; +} + +.editorial-hero__image { + margin: 0; + border-radius: var(--radius-sm); + overflow: hidden; + box-shadow: 0 22px 58px rgba(25, 37, 62, 0.12); +} + +.editorial-hero__image img { + width: 100%; + aspect-ratio: 4 / 3; + object-fit: cover; +} + +.editorial-section { + padding: 48px 0; +} + +.editorial-layout { + display: grid; + grid-template-columns: 260px minmax(0, 780px); + gap: 56px; + align-items: start; + justify-content: center; +} + +.editorial-side { + position: sticky; + top: 154px; + padding: 18px 0 0; + border-top: 2px solid var(--color-primary-wine-100); +} + +.editorial-side span { + color: var(--color-accent-gold); + font-size: 12px; + font-weight: 800; + text-transform: uppercase; +} + +.editorial-side p { + margin: 12px 0 0; + color: var(--color-neutral-gray-600); + line-height: 1.55; +} + +.editorial-side ol { + margin: 16px 0 0; + padding: 0; + display: grid; + gap: 12px; + list-style: none; +} + +.editorial-side li { + display: grid; + gap: 2px; +} + +.editorial-side strong { + color: var(--color-primary-wine-100); + font-family: var(--font-heading); + font-size: 22px; +} + +.editorial-side small { + color: var(--color-neutral-gray-600); + font-size: 13px; +} + +.editorial-body .lead { + color: var(--color-neutral-black); + font-size: clamp(22px, 2.4vw, 30px); + line-height: 1.38; +} + +.editorial-body p { + color: var(--color-neutral-gray-600); + font-size: 18px; + line-height: 1.74; +} + +.editorial-body blockquote { + margin: 34px 0; + padding: 28px; + border-left: 4px solid var(--color-primary-wine-100); + background: #eef2f6; + color: var(--color-neutral-black); + font-family: var(--font-heading); + font-size: clamp(22px, 3vw, 34px); + font-weight: 800; + line-height: 1.2; +} + +.editorial-image { + margin-top: 0; + margin-bottom: 0; + border-radius: var(--radius-sm); + overflow: hidden; +} + +.editorial-image img { + width: 100%; + max-height: 540px; + object-fit: cover; +} + +.editorial-photo-grid { + display: grid; + grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); + gap: 18px; +} + +.editorial-photo-grid figure { + margin: 0; + border-radius: var(--radius-sm); + overflow: hidden; +} + +.editorial-photo-grid img { + width: 100%; + height: 100%; + min-height: 360px; + object-fit: cover; +} + +.editorial-section--final { + padding-bottom: 82px; +} + +.editorial-outro { + color: var(--color-primary-wine-100) !important; + font-family: var(--font-heading); + font-size: clamp(28px, 4vw, 46px) !important; + font-weight: 800; + line-height: 1.1 !important; + text-transform: uppercase; +} + .filters-panel, .info-panel { padding: 24px; @@ -1869,9 +2126,13 @@ select { .card-lab-head, .bottle-card-mix, .page-hero__inner, + .editorial-hero__inner, + .editorial-layout, .article-layout, .about-grid, - .contacts-layout { + .contacts-layout, + .guideline-grid, + .guideline-checklist { grid-template-columns: 1fr; } @@ -2004,10 +2265,22 @@ select { font-size: 17px; } + .editorial-side { + position: static; + } + + .editorial-photo-grid { + grid-template-columns: 1fr; + } + .feature-grid { grid-template-columns: 1fr; } + .guideline-card--lead { + grid-column: auto; + } + .bottle-card { padding: 14px; } diff --git a/index.html b/index.html index 6e848b8..009e095 100644 --- a/index.html +++ b/index.html @@ -182,7 +182,7 @@

Demo pages

- ГлавнаяКаталогКарточка товараВарианты карточекНовостьО компанииКонтакты + ГлавнаяКаталогКарточка товараВарианты карточекНовостьНовость v2Ред. гайдО компанииКонтакты

UI-kit sections

diff --git a/news-villa-raiano-v2.html b/news-villa-raiano-v2.html new file mode 100644 index 0000000..9414aaf --- /dev/null +++ b/news-villa-raiano-v2.html @@ -0,0 +1,292 @@ + + + + + + DP Trade — Villa Raiano editorial + + + + + + +
+
+
+ + +
+ +7 (495) 937-94-60 + + + + + + +
+
+ +
+
+
+
+
+
+

Новости / Villa Raiano

+

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

+
6 апреля, 2026Ирпиния, Кампания
+
+
+ Винодельня Villa Raiano среди холмов Ирпинии +
+
+
+ +
+
+ +
+

Рассказываем о семье Бассо и винодельне Villa Raiano, совершившей небольшую революцию в Ирпинии, сменив курс с красных вин на белые. Судя по нашим последним дегустациям, у них это получилось.

+

На холмах Сан-Микеле-ди-Серино, в провинции Авеллино, расположена винодельня семьи Бассо. Название связано с корнями: Villa Raiano — историческая местность коммуны Серино, где находилась старая оливковая плантация семьи.

+
+
+
+ +
+ Сбор белого винограда Villa Raiano +
+ +
+
+ +
+

В середине 1990-х с основанием винодельни в Ирпинии начался винодельческий бум. Первые годы для семьи Бассо были скорее хобби: они делали и разливали вино на семейной маслобойне. С 1999 по 2008 год они стали сотрудничать с энологом Луиджи Мойо, который учился вместе с Сабино Бассо в аграрном институте Авеллино.

+
«В 2008 году мы купили новое оборудование, начали сотрудничество с Фортунато Себастьяно и построили винодельню на вершине холма в Сан-Микеле-ди-Серино», — рассказывает сын Сабино Бассо, Федерико.
+

Открытие в 2009 году совпало с новым курсом: появились четыре белых вина с отдельных виноградников — три Fiano di Avellino и один Greco di Tufo. Через десять лет к работе подключилось новое поколение: «В компанию пришли я, мой брат Фабрицио и наша кузина Брунелла, дочь Симоне».

+
+
+
+ +
+
Ящики с белым виноградом Villa Raiano
+
Работа в погребе Villa Raiano
+
+ +
+
+ +
+

В 2024 году открылась новая подземная винодельня, полностью интегрированная в ландшафт. Сегодня Villa Raiano владеет 30 гектарами виноградников: хозяйство работает по биологическим принципам и сертифицировано с 2011 года.

+
«Мы уверены, что наш регион — земля великих белых вин», — говорит Федерико. «Сила наших DOC — в огромных различиях, которые один и тот же сорт может проявлять в разных условиях».
+

Континентальный климат позволяет ягодам созревать медленно, что делает вина особенными — как красные, так и белые. На последних дегустациях Gambero Rosso Fiano di Avellino 2024 года особенно впечатлил итальянских экспертов, получив премию Miglior Qualità Prezzo Regionale гида BereBene 2026.

+

Чем не повод самому проверить мнение Gambero Rosso?

+
+
+
+
+
+ + +
+ + diff --git a/news-villa-raiano.html b/news-villa-raiano.html index 5235dce..78ab11e 100644 --- a/news-villa-raiano.html +++ b/news-villa-raiano.html @@ -182,7 +182,7 @@

Demo pages

- ГлавнаяКаталогКарточка товараВарианты карточекНовостьО компанииКонтакты + ГлавнаяКаталогКарточка товараВарианты карточекНовостьНовость v2Ред. гайдО компанииКонтакты

UI-kit sections

diff --git a/product.html b/product.html index 10377cf..359f473 100644 --- a/product.html +++ b/product.html @@ -182,7 +182,7 @@

Demo pages

- ГлавнаяКаталогКарточка товараВарианты карточекНовостьО компанииКонтакты + ГлавнаяКаталогКарточка товараВарианты карточекНовостьНовость v2Ред. гайдО компанииКонтакты

UI-kit sections

diff --git a/ui-kit.html b/ui-kit.html index f3304b7..e1ffb23 100644 --- a/ui-kit.html +++ b/ui-kit.html @@ -29,6 +29,8 @@ Карточка товара Варианты карточек Новость + Новость v2 + Ред. гайд О компании Контакты @@ -260,6 +262,57 @@ +
+

Catalog List Cards

+
+
+ Card / Product / List / Default +

Текущая карточка каталога: Image, Product info, Price, CTA. Используется для B2B-выдачи и страниц стран.

+
+
+ Card / Product / List / Compact +

Сниженная высота, меньше изображение и короче details. Подходит для плотной выдачи и избранного.

+
+
+ Card / Product / List / Color Image +

Цветной фон только в зоне изображения: Gold, Wine, Green. Бутылка остаётся реальной фотографией без shadow.

+
+
+ Card / Product / List / B2B Dense +

Дополнительные параметры: тип, сорт, упаковка, артикул. Для профессионального сравнения SKU.

+
+
+
+ Открыть варианты карточек +
+
+ +
+

Editorial Components

+
+
+ Article / Hero / Split +

Заголовок, дата/мета, крупное фото. Для новостей производителей и экспертных материалов.

+
+
+ Article / Body +

Lead, paragraph, blockquote, wide image, photo grid. Не больше 4 текстовых абзацев без визуальной паузы.

+
+
+ Article / Sidebar +

Sticky fact block, timeline или recognition. На мобильном становится обычным блоком над текстом.

+
+
+ Guidelines +

Отдельная страница с требованиями к заголовкам, тексту, фото, SEO и pre-publish checklist.

+
+
+
+ Новость v2 + Редакционный гайд +
+
+

Navigation

@@ -413,6 +466,27 @@
+
+

Content & Inner Pages

+
+
+ Pattern / News Article / Editorial +

Split hero, date meta, lead, wide image, timeline sidebar, quote, photo grid, final CTA.

+
+
+ Pattern / About Page / Default +

Hero + короткая история + сетка преимуществ. Подходит для корпоративной страницы без перегруза.

+
+
+ Pattern / Contacts / Form +

Контактные панели + форма заявки менеджеру. На мобильном блоки идут одной колонкой.

+
+
+ Pattern / Editorial Guidelines +

Guideline cards + checklist. Используется как внутренняя документация для редакции и контент-менеджера.

+
+
+
@@ -437,6 +511,22 @@ Template / Producer Page Story + region + producer catalog
+
+ Template / News Article + Editorial story + media + timeline +
+
+ Template / About + Company story + advantages +
+
+ Template / Contacts + Contact panels + manager request +
+
+ Template / Article Guidelines + Rules + checklist + photo requirements +
@@ -456,6 +546,28 @@ +
+ + + + + +