diff --git a/about.html b/about.html index d19deeb..b65b88a 100644 --- a/about.html +++ b/about.html @@ -165,6 +165,7 @@ Новости О компании Контакты + Контакты auth
@@ -183,6 +184,7 @@

UI-kit sections

@@ -239,22 +241,78 @@ +
+ +
+

+ Интернет-витрина размещает информацию об алкогольной продукции исключительно в целях ознакомления. + Дистанционная продажа алкогольной продукции не осуществляется. + Подробнее о правовой информации +

+

© 2026 DP-Trade

+
+
+
+ diff --git a/article-guidelines.html b/article-guidelines.html index 2202dfc..cc8f363 100644 --- a/article-guidelines.html +++ b/article-guidelines.html @@ -165,6 +165,7 @@ Новости О компании Контакты + Контакты auth
@@ -183,6 +184,7 @@

UI-kit sections

@@ -305,22 +307,78 @@ +
+ +
+

+ Интернет-витрина размещает информацию об алкогольной продукции исключительно в целях ознакомления. + Дистанционная продажа алкогольной продукции не осуществляется. + Подробнее о правовой информации +

+

© 2026 DP-Trade

+
+
+
+ diff --git a/assets/images/00081538_1.png b/assets/images/00081538_1.png new file mode 100644 index 0000000..24e149f Binary files /dev/null and b/assets/images/00081538_1.png differ diff --git a/bottle-cards.html b/bottle-cards.html index ba02cff..62c23c0 100644 --- a/bottle-cards.html +++ b/bottle-cards.html @@ -165,6 +165,7 @@ Новости О компании Контакты + Контакты auth
@@ -183,6 +184,7 @@

UI-kit sections

@@ -215,7 +217,7 @@
- Chateau Laroque Grand Cru + Chateau Laroque Grand Cru

Bordeaux

@@ -268,7 +270,7 @@
- Oremus Case of Aszu + Oremus Case of Aszu

Clean retail

@@ -326,7 +328,7 @@

Default / как в каталоге

- Вино белое Oremus, Case of Aszu 5 Puttonyos, 0.5 л. 2000 + Вино белое Oremus, Case of Aszu 5 Puttonyos, 0.5 л. 2000

Вино белое Oremus, Case of Aszu 5 Puttonyos, 0.5 л. 2000

@@ -401,7 +403,7 @@

B2B dense / больше данных

- Вино белое Oremus, Tokaji Aszu 5 Puttonyos, 0.5 л. 2000 + Вино белое Oremus, Tokaji Aszu 5 Puttonyos, 0.5 л. 2000

Вино белое Oremus, Tokaji Aszu 5 Puttonyos, 0.5 л. 2000

@@ -425,22 +427,78 @@ +
+ +
+

+ Интернет-витрина размещает информацию об алкогольной продукции исключительно в целях ознакомления. + Дистанционная продажа алкогольной продукции не осуществляется. + Подробнее о правовой информации +

+

© 2026 DP-Trade

+
+
+
+ diff --git a/catalog.html b/catalog.html index e1120a5..8ef8845 100644 --- a/catalog.html +++ b/catalog.html @@ -165,6 +165,7 @@ Новости О компании Контакты + Контакты auth
@@ -183,6 +184,7 @@

UI-kit sections

@@ -224,7 +226,7 @@
- Вино белое Oremus, Case of Aszu 5 Puttonyos, 0.5 л. 2000 + Вино белое Oremus, Case of Aszu 5 Puttonyos, 0.5 л. 2000

Вино белое Oremus, Case of Aszu 5 Puttonyos, 0.5 л. 2000

@@ -273,22 +275,78 @@
+
+ +
+

+ Интернет-витрина размещает информацию об алкогольной продукции исключительно в целях ознакомления. + Дистанционная продажа алкогольной продукции не осуществляется. + Подробнее о правовой информации +

+

© 2026 DP-Trade

+
+
+
+ diff --git a/components/footer.html b/components/footer.html index 99dbb3b..8a8251d 100644 --- a/components/footer.html +++ b/components/footer.html @@ -1,26 +1,11 @@ diff --git a/css/site.css b/css/site.css index 625c7b7..9e441e7 100644 --- a/css/site.css +++ b/css/site.css @@ -1642,6 +1642,81 @@ select { resize: vertical; } +.contact-auth-gate { + position: relative; + overflow: hidden; +} + +.contact-auth-gate::before { + content: ""; + position: absolute; + inset: 0 0 auto; + height: 6px; + background: linear-gradient(90deg, var(--color-primary-wine-100), var(--color-accent-gold)); +} + +.auth-gate__badge { + width: fit-content; + padding: 7px 10px; + border-radius: var(--radius-sm); + background: rgba(75, 15, 36, 0.08); + color: var(--color-primary-wine-100); + font-size: 12px; + font-weight: 800; + text-transform: uppercase; +} + +.contact-auth-gate > p { + margin: 0; + color: var(--color-neutral-gray-600); + line-height: 1.62; +} + +.auth-gate__actions { + display: flex; + flex-wrap: wrap; + gap: 12px; +} + +.auth-gate__note { + padding: 16px; + border: 1px solid rgba(185, 150, 91, 0.28); + border-radius: var(--radius-sm); + background: #f8fafc; + display: grid; + gap: 6px; +} + +.auth-gate__note strong { + color: var(--color-neutral-black); +} + +.auth-gate__note span { + color: var(--color-neutral-gray-600); + line-height: 1.48; +} + +.locked-form-preview { + padding-top: 16px; + border-top: 1px solid rgba(102, 96, 95, 0.14); + display: grid; + gap: 12px; + opacity: 0.62; +} + +.locked-form-preview label { + display: grid; + gap: 7px; + color: var(--color-neutral-gray-600); + font-weight: 800; +} + +.locked-form-preview .input:disabled { + cursor: not-allowed; + background: #eef2f6; + color: var(--color-neutral-gray-600); +} + .guideline-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); @@ -1966,77 +2041,92 @@ select { .site-footer { margin-top: auto; - padding: 40px 0 56px; - background: #f1f4f8; + padding: 32px 0 40px; + border-top: 1px solid rgba(102, 96, 95, 0.12); + background: var(--color-background-base); } .footer-container { - padding: 32px; - border: 1px solid rgba(217, 222, 229, 0.9); - border-radius: var(--radius-lg); - background: #f3f5f7; - box-shadow: 0 18px 40px rgba(25, 37, 62, 0.08); + padding: 24px 28px 20px; + border: 1px solid rgba(102, 96, 95, 0.16); + border-radius: var(--radius-sm); + background: var(--color-surface); + box-shadow: var(--shadow-soft); } .footer-main { display: grid; - grid-template-columns: minmax(280px, 360px) minmax(0, 1fr); - gap: 40px; + grid-template-columns: minmax(170px, 210px) minmax(0, 1fr) minmax(210px, 250px); + gap: 24px 32px; + align-items: start; } -.footer-left { - display: flex; - flex-direction: column; - gap: 28px; +.footer-brand-block { + min-width: 0; + display: grid; + gap: 8px; } .footer-brand { display: inline-flex; - align-items: baseline; - color: var(--color-accent-blue); - font-family: var(--font-heading-retail); - font-size: clamp(38px, 5vw, 64px); - font-weight: 800; - letter-spacing: 0; - line-height: 1; + width: fit-content; + line-height: 0; } -.footer-brand span:first-child { - color: var(--color-primary-wine-80); +.footer-brand img { + width: 156px; + height: auto; } .footer-brand-subtitle { - margin: 10px 0 0; - color: var(--color-primary-wine-80); + margin: 0; + color: var(--color-neutral-gray-600); + font-size: 13px; + line-height: 1.35; } .social-links { display: flex; - gap: 12px; flex-wrap: wrap; + gap: 8px; + margin-top: 2px; } .social-links a { - min-width: 58px; - padding: 10px 16px; - border: 1px solid rgba(143, 23, 54, 0.22); + display: inline-grid; + place-items: center; + width: 34px; + height: 34px; + border: 1px solid rgba(75, 15, 36, 0.14); border-radius: var(--radius-sm); - background: rgba(255, 255, 255, 0.72); - color: var(--color-primary-wine-80); - font-weight: 800; - text-align: center; + background: transparent; + color: var(--color-primary-wine-100); + transition: background 0.18s ease, border-color 0.18s ease, transform 0.18s ease; +} + +.social-links svg { + width: 18px; + height: 18px; + fill: currentColor; +} + +.social-links a:hover, +.social-links a:focus-visible { + border-color: rgba(75, 15, 36, 0.36); + background: rgba(75, 15, 36, 0.06); + transform: translateY(-1px); } .contacts-card { - padding: 24px; - border: 1px solid rgba(217, 222, 229, 0.9); - border-radius: var(--radius-sm); - background: var(--color-surface); + display: grid; + gap: 8px; + justify-items: start; + align-content: start; } .contacts-card h2, .nav-group h2 { - margin: 0 0 16px; + margin: 0 0 10px; font-size: 13px; font-weight: 800; letter-spacing: 0; @@ -2046,19 +2136,27 @@ select { .contact-link { display: block; width: fit-content; + color: var(--color-neutral-gray-700); + font-size: 14px; + line-height: 1.35; + transition: color 0.18s ease; +} + +.contact-link:hover, +.contact-link:focus-visible { + color: var(--color-primary-wine-100); } .contact-phone { - margin-bottom: 10px; - color: var(--color-neutral-gray-700); - font-size: 22px; + color: var(--color-accent-blue); + font-size: 18px; font-weight: 800; } .footer-nav { display: grid; grid-template-columns: repeat(3, minmax(140px, 1fr)); - gap: 32px; + gap: 24px; align-items: start; } @@ -2069,25 +2167,61 @@ select { } .nav-group li + li { - margin-top: 12px; + margin-top: 7px; } .nav-group a, .footer-legal { - color: #6b7280; + color: var(--color-neutral-gray-600); +} + +.nav-group a { + display: inline-flex; + padding: 2px 0; + font-size: 14px; + line-height: 1.35; + transition: color 0.18s ease; +} + +.nav-group a:hover, +.nav-group a:focus-visible { + color: var(--color-primary-wine-100); } .footer-legal { grid-column: 1 / -1; - margin-top: 8px; - padding-top: 24px; - border-top: 1px solid #d9dee5; - font-size: 14px; - line-height: 1.6; + display: flex; + align-items: flex-start; + justify-content: space-between; + gap: 20px; + padding-top: 16px; + border-top: 1px solid rgba(102, 96, 95, 0.16); + font-size: 12px; + line-height: 1.45; +} + +.footer-legal p { + margin: 0; +} + +.footer-legal p:first-child { + max-width: 760px; +} + +.footer-legal p:last-child { + flex: 0 0 auto; + color: var(--color-neutral-gray-700); + font-weight: 800; } .footer-legal a { color: var(--color-primary-wine-80); + font-weight: 800; +} + +.footer-legal a:hover, +.footer-legal a:focus-visible { + color: var(--color-primary-wine-100); } @media (max-width: 1080px) { @@ -2102,6 +2236,19 @@ select { padding: 16px 0; } + .footer-main { + grid-template-columns: minmax(180px, 0.7fr) minmax(220px, 1fr); + } + + .footer-nav, + .footer-legal { + grid-column: 1 / -1; + } + + .contacts-card { + justify-self: end; + } + .header-actions { justify-content: space-between; } @@ -2373,4 +2520,22 @@ select { .footer-container { padding: 22px 18px; } + + .footer-main { + grid-template-columns: 1fr; + gap: 32px; + } + + .footer-nav { + grid-template-columns: 1fr; + } + + .contacts-card { + justify-self: start; + } + + .footer-legal { + flex-direction: column; + gap: 12px; + } } diff --git a/css/ui-kit.css b/css/ui-kit.css index 16a29c9..897d468 100644 --- a/css/ui-kit.css +++ b/css/ui-kit.css @@ -58,6 +58,7 @@ select { position: fixed; inset: 0 auto 0 0; width: 280px; + max-height: 100vh; padding: 24px; background: #f8fafc; border-right: 1px solid rgba(102, 96, 95, 0.18); @@ -101,8 +102,23 @@ select { } .side-nav { + min-height: 0; + overflow-y: auto; + padding-right: 4px; display: grid; gap: 22px; + overscroll-behavior: contain; + scrollbar-width: thin; + scrollbar-color: rgba(75, 15, 36, 0.34) transparent; +} + +.side-nav::-webkit-scrollbar { + width: 6px; +} + +.side-nav::-webkit-scrollbar-thumb { + border-radius: 999px; + background: rgba(75, 15, 36, 0.28); } .side-nav__group { @@ -268,6 +284,105 @@ h3 { font-size: 14px; } +.icon-style-grid { + display: grid; + grid-template-columns: repeat(4, minmax(0, 1fr)); + gap: 16px; +} + +.icon-style-card { + min-width: 0; + padding: 18px; + border: 1px solid rgba(102, 96, 95, 0.16); + border-radius: var(--radius-sm); + background: var(--color-white); + box-shadow: var(--shadow-soft); + display: grid; + gap: 14px; +} + +.icon-demo-row { + min-height: 86px; + padding: 14px; + border-radius: var(--radius-sm); + background: #eef2f6; + display: flex; + align-items: center; + gap: 12px; +} + +.kit-icon { + color: var(--color-primary-wine-100); + display: inline-grid; + place-items: center; + flex: 0 0 auto; +} + +.kit-icon svg { + width: 22px; + height: 22px; + fill: none; + stroke: currentColor; + stroke-linecap: round; + stroke-linejoin: round; + stroke-width: 1.75; +} + +.kit-icon--line { + width: 44px; + height: 44px; +} + +.kit-icon--soft, +.kit-icon--filled { + width: 46px; + height: 46px; + border-radius: var(--radius-sm); +} + +.kit-icon--soft { + border: 1px solid rgba(75, 15, 36, 0.14); + background: var(--color-white); +} + +.kit-icon--filled { + background: var(--color-primary-wine-100); + color: var(--color-white); + box-shadow: 0 10px 22px rgba(75, 15, 36, 0.16); +} + +.kit-icon--tiny { + width: 28px; + height: 28px; +} + +.kit-icon--tiny svg { + width: 16px; + height: 16px; + stroke-width: 1.6; +} + +.icon-style-card > span { + color: var(--color-accent-gold); + font-size: 12px; + font-weight: 800; + text-transform: uppercase; +} + +.icon-style-card p { + margin: 0; + color: var(--color-gray-600); + font-size: 14px; + line-height: 1.45; +} + +.icon-style-card code { + padding: 10px; + border-radius: var(--radius-sm); + background: #eef2f6; + white-space: normal; +} + .section { padding: 72px clamp(24px, 5vw, 72px); border-top: 1px solid rgba(102, 96, 95, 0.16); @@ -283,6 +398,18 @@ h3 { margin-bottom: 40px; } +.section-heading--split { + grid-template-columns: minmax(0, 0.58fr) minmax(280px, 0.42fr); + gap: 32px; + align-items: end; +} + +.section-heading--split > p { + margin: 0; + color: var(--color-gray-600); + line-height: 1.6; +} + .subsection { margin-top: 40px; } @@ -318,6 +445,98 @@ h3 { line-height: 1.45; } +.status-grid, +.checklist-grid { + display: grid; + grid-template-columns: repeat(3, minmax(0, 1fr)); + gap: 16px; +} + +.status-card, +.production-rules article, +.checklist-card { + min-width: 0; + padding: 20px; + border: 1px solid rgba(102, 96, 95, 0.16); + border-radius: var(--radius-sm); + background: var(--color-white); + box-shadow: var(--shadow-soft); +} + +.status-card { + min-height: 190px; + display: grid; + align-content: space-between; + gap: 14px; +} + +.status-card span, +.production-rules span, +.checklist-card span { + width: fit-content; + padding: 6px 9px; + border-radius: var(--radius-sm); + font-size: 11px; + font-weight: 800; + text-transform: uppercase; +} + +.status-card--ready span { + background: rgba(31, 77, 58, 0.12); + color: #1f4d3a; +} + +.status-card--review span { + background: rgba(185, 150, 91, 0.18); + color: #7c5f26; +} + +.status-card--draft span { + background: rgba(102, 96, 95, 0.12); + color: var(--color-gray-600); +} + +.status-card strong { + color: var(--color-neutral-black); + font-family: var(--font-heading); + font-size: 22px; + line-height: 1.12; + text-transform: uppercase; +} + +.status-card p, +.production-rules p { + margin: 0; + color: var(--color-gray-600); + line-height: 1.5; +} + +.production-rules { + margin-top: 18px; + display: grid; + grid-template-columns: repeat(3, minmax(0, 1fr)); + gap: 16px; +} + +.production-rules span, +.checklist-card span { + margin-bottom: 14px; + display: inline-block; + background: rgba(75, 15, 36, 0.08); + color: var(--color-primary-wine-100); +} + +.checklist-card ul { + margin: 0; + padding-left: 18px; + color: var(--color-gray-600); + line-height: 1.58; +} + +.checklist-card li + li { + margin-top: 8px; +} + .swatch-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); @@ -462,6 +681,88 @@ code { background: #fff; } +.shadow-grid { + display: grid; + grid-template-columns: repeat(4, minmax(0, 1fr)); + gap: 16px; +} + +.shadow-card { + min-height: 220px; + padding: 18px; + border: 1px solid rgba(102, 96, 95, 0.14); + border-radius: var(--radius-sm); + background: var(--color-white); + display: grid; + align-content: space-between; + gap: 12px; +} + +.shadow-card span { + color: var(--color-accent-gold); + font-size: 11px; + font-weight: 800; + text-transform: uppercase; +} + +.shadow-card strong { + color: var(--color-neutral-black); + font-family: var(--font-heading); + font-size: 20px; + line-height: 1.1; + text-transform: uppercase; +} + +.shadow-card p { + margin: 0; + color: var(--color-gray-600); + font-size: 14px; + line-height: 1.45; +} + +.shadow-card code { + width: fit-content; + max-width: 100%; + padding: 7px 9px; + border-radius: var(--radius-sm); + background: #eef2f6; + color: var(--color-primary-wine-100); + font-size: 12px; + white-space: normal; +} + +.shadow-card--none { + box-shadow: none; +} + +.shadow-card--header { + box-shadow: 0 10px 28px rgba(22, 22, 22, 0.05); +} + +.shadow-card--soft { + box-shadow: var(--shadow-soft); +} + +.shadow-card--card { + box-shadow: 0 18px 46px rgba(18, 25, 38, 0.08); +} + +.shadow-card--hover { + box-shadow: 0 22px 54px rgba(25, 37, 62, 0.13); +} + +.shadow-card--lift { + box-shadow: var(--shadow-lift); +} + +.shadow-card--editorial { + box-shadow: 0 22px 58px rgba(25, 37, 62, 0.12); +} + +.shadow-card--focus { + box-shadow: 0 0 0 4px rgba(75, 15, 36, 0.08); +} + .product-grid { display: grid; gap: 20px; @@ -594,6 +895,80 @@ code { font-size: 18px; } +.image-bg-grid { + display: grid; + grid-template-columns: repeat(4, minmax(0, 1fr)); + gap: 16px; +} + +.image-bg-card { + min-width: 0; + padding: 16px; + border: 1px solid rgba(102, 96, 95, 0.16); + border-radius: var(--radius-sm); + background: var(--color-white); + box-shadow: var(--shadow-soft); + display: grid; + gap: 12px; +} + +.image-bg-preview { + min-height: 190px; + border-radius: var(--radius-sm); + overflow: hidden; + display: grid; + place-items: center; +} + +.image-bg-preview img { + width: auto; + max-width: 120px; + height: 164px; + object-fit: contain; + border: 0; + box-shadow: none; +} + +.product-image--gold { + background: linear-gradient(135deg, #b9965b 0%, #d7c18b 48%, #eef2f6 100%); +} + +.product-image--wine { + background: linear-gradient(135deg, #6d1c36 0%, #9b5366 46%, #e6dce1 100%); +} + +.product-image--green { + background: linear-gradient(135deg, #1f4d3a 0%, #88a28e 48%, #eef2e5 100%); +} + +.image-bg-preview--neutral { + background: linear-gradient(135deg, #eef2f6 0%, #dde6ef 100%); +} + +.image-bg-card span { + color: var(--color-accent-gold); + font-size: 12px; + font-weight: 800; + text-transform: uppercase; +} + +.image-bg-card p { + margin: 0; + color: var(--color-gray-600); + font-size: 14px; + line-height: 1.45; +} + +.image-bg-card code { + padding: 10px; + border-radius: var(--radius-sm); + background: #eef2f6; + color: var(--color-primary-wine-100); + font-size: 12px; + line-height: 1.45; + white-space: normal; +} + .header-demo { padding: 16px; border-radius: var(--radius-sm); @@ -783,49 +1158,134 @@ tbody tr:hover { text-transform: uppercase; } -.screen-preview { - overflow: hidden; - border: 1px solid rgba(102, 96, 95, 0.18); - border-radius: var(--radius-sm); - background: var(--color-white); - box-shadow: var(--shadow-soft); -} - -.screen-preview__bar { - height: 48px; - background: var(--color-primary-wine-100); -} - -.screen-preview__hero { - min-height: 300px; - padding: 48px; - background: - linear-gradient(90deg, rgba(75, 15, 36, 0.84), rgba(75, 15, 36, 0.24)), - linear-gradient(135deg, #4b0f24, #b9965b); - color: var(--color-white); - display: grid; - align-content: center; - justify-items: start; -} - -.screen-preview__hero h3 { - max-width: 520px; - margin: 8px 0 20px; - font-size: 48px; - text-transform: uppercase; -} - -.screen-preview__content { - padding: 24px; +.template-spec-grid { + margin-top: 24px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; } -.screen-preview__content span { - min-height: 110px; +.template-spec { + min-width: 0; + padding: 20px; + border: 1px solid rgba(102, 96, 95, 0.16); border-radius: var(--radius-sm); - background: #e8edf3; + background: var(--color-white); + box-shadow: var(--shadow-soft); + display: grid; + gap: 10px; +} + +.template-spec span { + color: var(--color-accent-gold); + font-size: 12px; + font-weight: 800; + text-transform: uppercase; +} + +.template-spec h3 { + margin: 0; + font-size: 22px; + line-height: 1.12; + text-transform: uppercase; +} + +.template-spec p { + margin: 0; + color: var(--color-gray-600); + font-size: 14px; + line-height: 1.48; +} + +.template-spec a { + color: var(--color-primary-wine-100); + font-weight: 800; + text-decoration: underline; + text-underline-offset: 3px; +} + +.template-spec em { + margin-top: 4px; + color: var(--color-primary-wine-100); + font-size: 13px; + font-style: normal; + font-weight: 800; +} + +.screen-grid { + display: grid; + grid-template-columns: repeat(3, minmax(0, 1fr)); + gap: 18px; +} + +.screen-card { + min-height: 230px; + padding: 20px; + border: 1px solid rgba(102, 96, 95, 0.16); + border-radius: var(--radius-sm); + background: + linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(255, 255, 255, 0.98)), + var(--screen-accent, #eef2f6); + box-shadow: var(--shadow-soft); + display: grid; + align-content: space-between; + gap: 18px; + transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease; +} + +.screen-card:hover { + border-color: rgba(75, 15, 36, 0.28); + box-shadow: 0 22px 54px rgba(25, 37, 62, 0.13); + transform: translateY(-2px); +} + +.screen-card span { + color: var(--color-accent-gold); + font-size: 12px; + font-weight: 800; + text-transform: uppercase; +} + +.screen-card strong { + color: var(--color-neutral-black); + font-family: var(--font-heading); + font-size: 24px; + line-height: 1.1; + text-transform: uppercase; +} + +.screen-card p { + margin: 0; + color: var(--color-gray-600); + line-height: 1.5; +} + +.screen-card--home { + --screen-accent: linear-gradient(135deg, #4b0f24, #b9965b); +} + +.screen-card--catalog { + --screen-accent: linear-gradient(135deg, #eef2f6, #d9dee6); +} + +.screen-card--product, +.screen-card--cards { + --screen-accent: linear-gradient(135deg, #6d1c36, #e6dce1); +} + +.screen-card--news, +.screen-card--guidelines { + --screen-accent: linear-gradient(135deg, #1f4d3a, #e8eadb); +} + +.screen-card--about, +.screen-card--contacts, +.screen-card--auth { + --screen-accent: linear-gradient(135deg, #1f3476, #dde4ec); +} + +.screen-qa-grid { + margin-top: 24px; } @media (max-width: 1100px) { @@ -851,7 +1311,15 @@ tbody tr:hover { } .swatch-grid, - .template-grid { + .shadow-grid, + .image-bg-grid, + .icon-style-grid, + .status-grid, + .production-rules, + .checklist-grid, + .template-grid, + .template-spec-grid, + .screen-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @@ -883,9 +1351,16 @@ tbody tr:hover { } .swatch-grid, + .shadow-grid, + .image-bg-grid, + .icon-style-grid, + .status-grid, + .production-rules, + .checklist-grid, .product-grid--3, .template-grid, - .screen-preview__content, + .template-spec-grid, + .screen-grid, .token-grid, .spec-grid { grid-template-columns: 1fr; @@ -909,11 +1384,7 @@ tbody tr:hover { grid-column: auto; } - .screen-preview__hero { - padding: 28px; - } - - .screen-preview__hero h3 { - font-size: 36px; + .screen-card { + min-height: 190px; } } diff --git a/index.html b/index.html index 009e095..451f3ba 100644 --- a/index.html +++ b/index.html @@ -165,6 +165,7 @@ Новости О компании Контакты + Контакты auth
@@ -183,6 +184,7 @@

UI-kit sections

@@ -265,7 +267,7 @@
-
Chateau Laroque Grand Cru
+
Chateau Laroque Grand Cru
Bordeaux

Chateau Laroque Grand Cru

France · Red dry · 2019 · 0.75 L

3 890 ₽Подробнее
@@ -285,22 +287,78 @@ + + +
+

+ Интернет-витрина размещает информацию об алкогольной продукции исключительно в целях ознакомления. + Дистанционная продажа алкогольной продукции не осуществляется. + Подробнее о правовой информации +

+

© 2026 DP-Trade

+
+ +
+ diff --git a/news-villa-raiano-v2.html b/news-villa-raiano-v2.html index 9414aaf..6148f12 100644 --- a/news-villa-raiano-v2.html +++ b/news-villa-raiano-v2.html @@ -165,6 +165,7 @@ Новости О компании Контакты + Контакты auth
@@ -183,6 +184,7 @@

UI-kit sections

@@ -271,22 +273,78 @@ +
+ +
+

+ Интернет-витрина размещает информацию об алкогольной продукции исключительно в целях ознакомления. + Дистанционная продажа алкогольной продукции не осуществляется. + Подробнее о правовой информации +

+

© 2026 DP-Trade

+
+
+
+ diff --git a/news-villa-raiano.html b/news-villa-raiano.html index 78ab11e..8bb90c3 100644 --- a/news-villa-raiano.html +++ b/news-villa-raiano.html @@ -165,6 +165,7 @@ Новости О компании Контакты + Контакты auth
@@ -183,6 +184,7 @@

UI-kit sections

@@ -246,22 +248,78 @@ +
+ +
+

+ Интернет-витрина размещает информацию об алкогольной продукции исключительно в целях ознакомления. + Дистанционная продажа алкогольной продукции не осуществляется. + Подробнее о правовой информации +

+

© 2026 DP-Trade

+
+
+
+ diff --git a/product.html b/product.html index 359f473..be9b35f 100644 --- a/product.html +++ b/product.html @@ -165,6 +165,7 @@ Новости О компании Контакты + Контакты auth
@@ -183,6 +184,7 @@

UI-kit sections

@@ -200,7 +202,7 @@
-
Chateau Laroque Grand Cru
+
Chateau Laroque Grand Cru

Product / Default

Chateau Laroque Grand Cru

@@ -220,22 +222,78 @@
+
+ +
+

+ Интернет-витрина размещает информацию об алкогольной продукции исключительно в целях ознакомления. + Дистанционная продажа алкогольной продукции не осуществляется. + Подробнее о правовой информации +

+

© 2026 DP-Trade

+
+
+
+ diff --git a/ui-kit.html b/ui-kit.html index e1ffb23..bc244d2 100644 --- a/ui-kit.html +++ b/ui-kit.html @@ -23,24 +23,48 @@ @@ -62,7 +86,7 @@
- Product bottle + Product bottle
Bordeaux @@ -77,13 +101,136 @@
+
+
+
+

00 Production Status

+

Статус дизайн-системы

+
+

Этот блок показывает, насколько UI-kit готов к production handoff: что можно использовать сразу, что требует детализации, и какие правила обязательны для новых экранов.

+
+
+
+ Ready + Catalog List Cards +

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

+
+
+ Ready + Navigation / Mega-menu +

Header, dropdown, hover bridge, ширина контейнера и базовые состояния зафиксированы.

+
+
+ Ready + Foundations +

Цветовые роли, типографика, сетка, spacing, tokens и shadows описаны для dev handoff.

+
+
+ Review + Forms / Inputs +

Есть default/focus/error, но нужны helper text, required, disabled, textarea и validation patterns.

+
+
+ Ready + Templates +

Шаблоны описывают обязательные блоки, компоненты, screen-ссылки и статус готовности.

+
+
+ Review + Responsive QA +

Есть checklist и адаптивные правила, но перед релизом нужен визуальный проход по всем страницам.

+
+
+
+
+ Production rule +

Новый компонент нельзя считать готовым без anatomy, variants, states, usage, CSS hook и responsive notes.

+
+
+ Screen rule +

Новый экран должен быть связан с template, иметь статус, ссылку на HTML и список QA-проверок.

+
+
+ Content rule +

Все изображения должны иметь понятный alt, стабильные размеры контейнера и не ломать layout на mobile.

+
+
+
+

Readiness Matrix

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
РазделAnatomyStatesUsageResponsiveStatus
FoundationsДаДаДаДаReady
ButtonsДаPartialДаДаReview
Product CardsДаДаДаДаReady
NavigationДаPartialДаPartialReview
Forms / ControlsДаPartialДаДаReview
Templates / ScreensДаДаДаДаReady
+
+
+
+

01 Foundations

База системы

-
+

Colors

@@ -122,9 +269,27 @@ #B9965B
+
+
+ Text roles +

`color.text.primary` = #161616 для заголовков и основного текста. `color.text.muted` = #66605F для meta, captions, описаний и вторичных ссылок.

+
+
+ Surface roles +

`color.background.base` = #F4F6F9 для страницы. `color.surface.default` = #FFFFFF для карточек, форм, таблиц и dropdown.

+
+
+ Brand roles +

`color.primary.wine.100` для CTA, активных состояний и важных ссылок. `color.accent.gold` для labels, eyebrow и editorial accents.

+
+
+ State roles +

Error использует #A33A2F. Success/review/draft пока локальные в UI-kit; перед разработкой их нужно вынести в state tokens.

+
+
-
+

Typography

Text / Heading / H1 / Montserrat / 48 / 56 @@ -146,9 +311,27 @@ Text / Label / Caps / Inter / 12 / 16

FEATURED REGION

+
+
+ Hero / H1 +

Montserrat 700-800, uppercase, clamp 44-78px, line-height около 0.98-1.08. Используется на главной и крупных внутренних hero.

+
+
+ Catalog / Product title +

Montserrat 800, 22-32px для list-card. Не использовать uppercase в текущем каталоге, чтобы длинные названия читались легче.

+
+
+ Article / Lead +

Inter 22-30px, line-height 1.38-1.48. Используется как первый смысловой абзац в редакционных материалах.

+
+
+ Button / Label +

Inter 700-800, 14-16px. Текст должен помещаться без переноса на desktop; на mobile кнопка может становиться full-width.

+
+
-
+

Grid & Spacing

@@ -163,6 +346,20 @@ 48 64
+
+
+ Container +

`--container: 1240px`. Desktop width: `min(100% - 40px, var(--container))`; mobile width: `min(100% - 28px, var(--container))`.

+
+
+ Breakpoints +

Desktop default. Tablet: max-width 1080/1100px. Mobile: max-width 720/760px depending on site vs UI-kit shell.

+
+
+ Spacing rule +

Компоненты: 8-16px gap. Карточки/формы: 16-24px padding. Секции: 56-72px vertical padding.

+
+
@@ -173,6 +370,75 @@ spacing.md = 16px radius.sm = 8px shadow.soft = 0 12px 32px rgba(22,22,22,.08) + shadow.lift = 0 20px 52px rgba(75,15,36,.14) +
+
+
+ Color tokens +

`color.primary.wine.100`, `color.primary.wine.80`, `color.accent.gold`, `color.accent.blue`, `color.background.base`, `color.surface.default`.

+
+
+ Layout tokens +

`container.max = 1240px`, `spacing.4/8/16/24/32/48/64`, `radius.sm = 8px`, `radius.md = 12px`, `radius.lg = 24px`.

+
+
+ Typography tokens +

`font.heading = Montserrat`, `font.body = Inter`. Размеры текста хранятся как semantic styles, а не только raw px.

+
+
+
+ +
+

Elevation & Shadows

+
+
+ Shadow / None + none +

Изображения бутылок, прозрачные PNG/JPG внутри карточек, плоские служебные элементы.

+ box-shadow: none; +
+
+ Shadow / Header / Sticky + Navigation depth +

Только для sticky header: лёгкое отделение от контента при скролле.

+ 0 10px 28px rgba(22,22,22,.05) +
+
+ Shadow / Soft + Base surface +

Основной токен для карточек, footer-контейнера, форм, contact panels и info-card.

+ 0 12px 32px rgba(22,22,22,.08) +
+
+ Shadow / Card / Product + Product card +

Для bottle-card и визуальных карточек с изображением, когда нужно чуть больше воздуха.

+ 0 18px 46px rgba(18,25,38,.08) +
+
+ Shadow / Card / Hover + Interactive lift +

Hover/active состояние list-card. Используется вместе с border-color, без изменения размеров.

+ 0 22px 54px rgba(25,37,62,.13) +
+
+ Shadow / Lift + Mega-menu +

Высокий слой: dropdown, mega-menu, временно поднятые панели.

+ 0 20px 52px rgba(75,15,36,.14) +
+
+ Shadow / Editorial / Image + Hero media +

Крупные изображения в статье, где фото должно отделяться от фона страницы.

+ 0 22px 58px rgba(25,37,62,.12) +
+
+ Shadow / Focus Ring + Input focus +

Не декоративная тень, а доступное состояние focus для search/input.

+ 0 0 0 4px rgba(75,15,36,.08) +
@@ -184,6 +450,24 @@
+

Component Readiness

+
+
+ Required anatomy +

Каждый production-компонент должен иметь anatomy, variants, states, sizes, usage, CSS hooks и responsive notes.

+
+
+ Required states +

Default, Hover, Focus, Active, Disabled. Для data-heavy компонентов также Loading, Empty, Error, Selected.

+
+
+ CSS hooks +

Использовать стабильные классы: `.button--primary`, `.product-card--list`, `.product-image--gold`, `.contact-auth-gate`.

+
+
+
+ +

Buttons

@@ -204,14 +488,106 @@ Использование

Primary для главного CTA, Secondary для каталогов и избранного, Ghost для тихих действий.

+
+ Production gap +

Добавить disabled, loading, icon-only, full-width mobile. Loading не должен менять ширину кнопки.

+
-
+
+

Icon Styles

+
+
+
+ + + +
+ Icon / Line / Default +

Основной стиль для header, account, cart, menu chevrons и вторичных действий. Stroke 1.75px, без заливки.

+ stroke-width: 1.75; width: 22px; +
+
+
+ + + +
+ Icon / Soft Container +

Для кликабельных icon buttons: header account/cart, toolbar actions, карточки избранного. Контейнер 44-48px.

+ background: #fff; border: rgba(75,15,36,.14); +
+
+
+ + + +
+ Icon / Filled Action +

Акцентный вариант для primary icon-only действий, selected states и важных быстрых команд. Использовать дозированно.

+ background: color.primary; color: #fff; +
+
+
+ + + +
+ Icon / Utility / Small +

Для chevron, accordion, table sorting и compact filters. Stroke 1.6px, размер 14-18px, без отдельного контейнера.

+ width: 16px; stroke-width: 1.6; +
+
+
+
+ Size scale +

Utility 16px, navigation 20-22px, icon button 44/48px container, primary action 48px container. SVG всегда квадратный.

+
+
+ Stroke rule +

Базовый stroke 1.75px. Не использовать тяжёлые 2.5-3px иконки в header: они спорят с логотипом и типографикой.

+
+
+ States +

Default, Hover, Focus, Active, Disabled, Selected. Hover меняет border/background, а не толщину линии.

+
+
+ CSS hooks +

`.kit-icon--line`, `.kit-icon--soft`, `.kit-icon--filled`, `.kit-icon--tiny`. В рабочем header использовать тот же визуальный принцип.

+
+
+
+ +

Product Card

-
Product bottle
+
Product bottle
Tuscany

Brunello di Montalcino

@@ -223,7 +599,7 @@
-
Product bottle
+
Product bottle
Rioja

Reserva Seleccion Especial

@@ -235,7 +611,7 @@
-
Product bottle
+
Product bottle
Mosel

Riesling Kabinett

@@ -262,7 +638,7 @@
-
+

Catalog List Cards

@@ -281,13 +657,61 @@ Card / Product / List / B2B Dense

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

+
+ Shadow +

Default использует Shadow / Soft. Hover использует Shadow / Card / Hover + border rgba(75,15,36,.28). Картинки бутылок всегда shadow none.

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

Image Backgrounds

+
+
+
Bottle on gold gradient
+ Image Background / Gold +

Для белых, сладких, премиальных и акцентных карточек. Хорошо работает с бутылками без прозрачного фона.

+ .product-image--gold { background: linear-gradient(135deg, #b9965b 0%, #d7c18b 48%, #eef2f6 100%); } +
+
+
Bottle on wine gradient
+ Image Background / Wine +

Для красных вин, премиальных подборок и карточек, где нужен более сильный брендовый акцент.

+ .product-image--wine { background: linear-gradient(135deg, #6d1c36 0%, #9b5366 46%, #e6dce1 100%); } +
+
+
Bottle on green gradient
+ Image Background / Green +

Для белых, органики, свежих регионов и спокойных карточек с холодным фоном.

+ .product-image--green { background: linear-gradient(135deg, #1f4d3a 0%, #88a28e 48%, #eef2e5 100%); } +
+
+
Bottle on neutral gradient
+ Image Background / Neutral +

Для hover, B2B dense и ситуаций, где цвет не должен спорить с информацией.

+ background: linear-gradient(135deg, #eef2f6 0%, #dde6ef 100%); +
+
+
+
+ Правило +

Градиент применяется только к контейнеру изображения, не к карточке целиком. Так карточка остаётся читаемой и не превращается в баннер.

+
+
+ Изображение +

Бутылка всегда `object-fit: contain`, `box-shadow: none`, без вылета за блок. Для JPG без прозрачности контейнер должен скрывать переполнение.

+
+
+ CSS hook +

Для list-card использовать `.product-image product-image--gold|wine|green`. Для плиток использовать модификаторы media-контейнера.

+
+
+
+ +

Editorial Components

@@ -306,6 +730,14 @@ Guidelines

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

+
+ Shadow +

Editorial hero image использует Shadow / Editorial / Image. Текстовые блоки и сайдбар остаются без декоративной тени, чтобы читать было спокойнее.

+
+
+ Production gap +

Добавить компоненты: Article meta, Article quote, Article image caption, Related products, Related producer.

+
Новость v2 @@ -313,7 +745,7 @@
-
+ -
+

Filters

@@ -390,10 +830,14 @@ Tags

Default для метаданных, Filled для выбранного статуса, Outline для мягких категорий.

+
+ Production gap +

Нужны helper/error text, required label, disabled controls, textarea, select open state, clear all для фильтров.

+
-
+

Tables / B2B

@@ -440,6 +884,10 @@ Использование

Прайс-листы, остатки, коммерческие условия и сравнение SKU.

+
+ Production gap +

Добавить Empty, Loading, Selected, Actions column, numeric alignment, sticky header и mobile fallback.

+
@@ -449,7 +897,7 @@

03 Patterns

Паттерны

-
+
-
+

Content & Inner Pages

@@ -481,6 +929,10 @@ Pattern / Contacts / Form

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

+
+ Pattern / Contacts / Auth Gate +

Контакты открыты, заявка заблокирована для гостя. Показываем CTA входа/регистрации и disabled-preview формы.

+
Pattern / Editorial Guidelines

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

@@ -490,9 +942,12 @@
-
-

04 Templates

-

Шаблоны

+
+
+

04 Templates

+

Шаблоны

+
+

Templates описывают каркас страницы: обязательные блоки, опциональные зоны, компоненты и связь с реальным screen. Это не финальный экран, а правило сборки.

@@ -523,49 +978,200 @@ Template / Contacts Contact panels + manager request
+
+ Template / Contacts Auth + Open contacts + gated request form +
Template / Article Guidelines Rules + checklist + photo requirements
+
+
+ Template / Catalog +

Product listing

+

Required: Header, catalog head, toolbar, product list, footer.

+

Components: Catalog List Card, Select, Button Secondary, Mega-menu.

+

Screen: catalog.html

+ Status: Review, needs mobile QA for dense list. +
+
+ Template / News Article +

Editorial story

+

Required: Article hero, date/meta, lead, body, image block, footer.

+

Optional: timeline, quote, photo grid, related products.

+

Screen: news-villa-raiano-v2.html

+ Status: Ready, content/photo rules documented. +
+
+ Template / Contacts Auth +

Gated request

+

Required: contacts hero, open contacts, auth gate, disabled preview, footer.

+

Components: Contact Panel, Contact Auth Gate, Button Primary/Secondary.

+

Screen: contacts-auth.html

+ Status: Review, needs real login/register routes. +
+
+ Template / Home +

Commercial landing

+

Required: asymmetrical hero, producer block, news block, footer.

+

Components: Header, Mega-menu, Button Primary, News Card, Producer Card.

+

Screen: index.html

+ Status: Ready, visual direction approved. +
+
+ Template / Article Guidelines +

Internal documentation

+

Required: page intro, rule cards, photo requirements, writing checklist.

+

Components: Guideline Card, Checklist Card, Editorial Specs.

+

Screen: article-guidelines.html

+ Status: Ready, supports content production. +
+
+ Template / Product Page +

Product detail

+

Required: product media, details, price/CTA, characteristics, recommendations.

+

Components: Product Media, Product Meta, Table, Product Card.

+

Screen: product.html

+ Status: Draft, needs final product content model. +
+
-
-
-

05 Screens

-

Реальные экраны

-
-
-
-
-

Screen / Home / v1

-

Curated trade catalog

- -
-
- +
+
+
+

05 Screens

+

Реальные экраны

+

Этот раздел ведёт на конкретные HTML-страницы проекта. В отличие от Templates, здесь фиксируются уже собранные экраны с реальным контентом, header/footer и состояниями.

-
- -
+ Каталог +

Список товаров, toolbar, сортировка, текущая горизонтальная карточка каталога.

+ + + Screen / Product / v1 + Карточка товара +

Продуктовый detail layout: изображение, описание, метаданные и CTA.

+ + + Screen / Cards Lab / v1 + Варианты карточек +

Лаборатория карточек бутылок и текущих list-card состояний.

+ + Screen / News / v2 - Villa Raiano editorial -
-
+ Villa Raiano editorial +

Журнальная статья с крупными фото, таймлайном, цитатами и финальным акцентом.

+ + Screen / About / v1 - Company overview -
- -
+ Контакты +

Открытая форма заявки, контактные панели, юридический информационный блок.

+ + + Screen / Contacts / Auth + Контакты auth +

Вариант, где заявка доступна только после входа или регистрации.

+ + Screen / Guidelines / v1 - Editorial rules + Редакционный гайд +

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

+ +
+
+
+ Screen status +

Ready: Home, News v2, Guidelines, Cards Lab. Review: Catalog, Contacts Auth. Draft: Product, если не утверждена модель данных.

+
+
+ Screen QA +

Каждый экран проверяется на desktop/tablet/mobile: header/footer, links, image loading, hover/focus states, overflow и читаемость текста.

+
+
+ Template link +

Каждый screen должен соответствовать одному template. Если меняется template, связанные screens обновляются вместе с ним.

+
+
+
+ +
+
+
+

06 Handoff

+

Production checklist

+
+

Финальный список проверок перед передачей дизайна в разработку или публикацией новой страницы в UI-kit.

+
+
+
+ Design +
    +
  • Компонент использует существующие tokens: color, spacing, radius, shadow.
    • +
  • Есть все состояния: default, hover, focus, active, disabled, error/loading где нужно.
    • +
  • Размеры стабильны: hover, текст и динамический контент не двигают layout.
    • +
  • Компонент не дублирует уже существующий паттерн без причины.
    • +
+
+
+ Development +
    +
  • Есть CSS hook или class naming по схеме Category / Type / Variant / State.
    • +
  • В UI-kit указан usage: где компонент применяется и где не применяется.
    • +
  • Все ссылки в demo/screens ведут на реальные HTML-файлы.
    • +
  • Нет inline-логики, которая мешает переиспользовать компонент.
    • +
+
+
+ Responsive +
    +
  • Проверены desktop, tablet и mobile.
    • +
  • Карточки, таблицы и формы не переполняют контейнер.
    • +
  • Текст в кнопках и карточках не обрезается и не накладывается.
    • +
  • Таблицы имеют horizontal scroll или мобильную альтернативу.
    • +
+
+
+ Accessibility +
    +
  • Интерактивные элементы имеют видимый focus.
    • +
  • Изображения имеют осмысленный alt.
    • +
  • Кнопки и ссылки различимы по роли и тексту.
    • +
  • Цвет не является единственным способом передать состояние.
    • +
+
+
+ Content +
    +
  • Заголовки соответствуют иерархии H1/H2/H3.
    • +
  • Для статей есть лид, визуальные паузы, alt и финальный CTA.
    • +
  • Даты, имена, регионы, апелласьоны и награды проверены.
    • +
  • Изображения достаточно крупные и не выглядят случайно обрезанными.
    • +
+
+
+ Ready criteria +
    +
  • Раздел имеет описание назначения.
    • +
  • Есть пример, спецификация и ссылка на screen, если применимо.
    • +
  • Компонент или экран можно собрать без дополнительных устных пояснений.
    • +
  • Статус готовности понятен: Ready, Review или Draft.
    • +