diff --git a/catalog.html b/catalog.html index 76ec0cf..54866f7 100644 --- a/catalog.html +++ b/catalog.html @@ -6,7 +6,7 @@ DP Trade — Catalog - + diff --git a/css/site.css b/css/site.css index 0ea63eb..c8d0142 100644 --- a/css/site.css +++ b/css/site.css @@ -66,11 +66,11 @@ select { display: inline-block; width: fit-content; color: var(--color-accent-blue); - font-size: 30px; - font-style: italic; - font-weight: 900; + font-family: var(--font-heading-retail); + font-size: 28px; + font-weight: 800; letter-spacing: 0; - line-height: 0.8; + line-height: 0.9; } .brand-logo span:first-child { @@ -83,7 +83,6 @@ select { top: 27px; color: var(--color-primary-wine-80); font-size: 8px; - font-style: italic; font-weight: 700; white-space: nowrap; } @@ -210,7 +209,7 @@ select { .product-card h3 { margin: 0; font-family: var(--font-heading); - line-height: 1.12; + line-height: 1.08; } .mega-intro p:last-child { @@ -351,7 +350,10 @@ select { .hero h1 { margin: 12px 0 20px; - font-size: clamp(44px, 7vw, 88px); + max-width: 920px; + font-size: clamp(44px, 6.5vw, 82px); + font-weight: 800; + text-transform: uppercase; } .hero p:not(.eyebrow) { @@ -370,8 +372,147 @@ select { margin-bottom: 32px; } +.section-heading--split { + grid-template-columns: minmax(0, 0.9fr) minmax(280px, 0.7fr); + gap: 28px; + align-items: end; +} + +.section-heading--split > p { + margin: 0; + color: var(--color-neutral-gray-600); +} + .section-heading h2 { - font-size: clamp(34px, 4vw, 52px); + font-size: clamp(32px, 4vw, 50px); + font-weight: 800; + text-transform: uppercase; +} + +.type-lab-section { + background: #fffdfa; +} + +.type-options { + display: grid; + grid-template-columns: repeat(4, minmax(0, 1fr)); + gap: 18px; +} + +.type-card { + min-width: 0; + min-height: 390px; + padding: 24px; + border: 1px solid rgba(102, 96, 95, 0.16); + border-radius: var(--radius-sm); + background: var(--color-surface); + box-shadow: var(--shadow-soft); + display: flex; + flex-direction: column; + justify-content: space-between; + gap: 28px; +} + +.type-card.is-selected { + border-color: rgba(75, 15, 36, 0.48); + background: linear-gradient(180deg, #fffdfa 0%, #f7efe8 100%); + box-shadow: var(--shadow-lift); +} + +.type-card.is-selected::before { + content: "Выбрано для системы"; + width: fit-content; + padding: 7px 10px; + border-radius: var(--radius-sm); + background: var(--color-primary-wine-100); + color: var(--color-surface); + font-size: 12px; + font-weight: 800; + text-transform: uppercase; +} + +.type-card__meta { + display: flex; + justify-content: space-between; + gap: 14px; + color: var(--color-neutral-gray-600); + font-size: 12px; + font-weight: 800; + text-transform: uppercase; +} + +.type-card__meta strong { + color: var(--color-primary-wine-100); +} + +.type-card h3 { + margin: 0; + color: var(--color-neutral-black); +} + +.type-card p { + margin: 0; + color: var(--color-neutral-gray-600); +} + +.type-scale { + display: flex; + flex-wrap: wrap; + gap: 8px; +} + +.type-scale span { + padding: 6px 9px; + border: 1px solid rgba(75, 15, 36, 0.16); + border-radius: var(--radius-sm); + color: var(--color-primary-wine-100); + font-size: 12px; + font-weight: 800; +} + +.type-card--editorial { + font-family: "Manrope", "Inter", Arial, sans-serif; +} + +.type-card--editorial h3 { + font-family: "Cormorant Garamond", Georgia, serif; + font-size: 46px; + font-weight: 700; + line-height: 0.98; +} + +.type-card--neo { + font-family: "Manrope", "Inter", Arial, sans-serif; +} + +.type-card--neo h3 { + font-family: "Manrope", "Inter", Arial, sans-serif; + font-size: 34px; + font-weight: 800; + line-height: 1.08; +} + +.type-card--classic { + font-family: "Inter", Arial, sans-serif; +} + +.type-card--classic h3 { + font-family: "Playfair Display", Georgia, serif; + font-size: 38px; + font-weight: 700; + line-height: 1.04; +} + +.type-card--retail { + font-family: "Inter", Arial, sans-serif; +} + +.type-card--retail h3 { + font-family: "Montserrat", "Inter", Arial, sans-serif; + font-size: 31px; + font-weight: 800; + line-height: 1.14; + text-transform: uppercase; } .product-grid { @@ -438,7 +579,9 @@ select { .product-card h3 { margin-top: 8px; - font-size: 24px; + font-size: 21px; + font-weight: 800; + text-transform: uppercase; } .product-card p { @@ -503,8 +646,10 @@ select { .detail-copy h1 { margin: 10px 0 18px; font-family: var(--font-heading); - font-size: clamp(40px, 5vw, 64px); + font-size: clamp(38px, 5vw, 62px); line-height: 1.08; + font-weight: 800; + text-transform: uppercase; } .meta-list { @@ -555,11 +700,11 @@ select { display: inline-flex; align-items: baseline; color: var(--color-accent-blue); - font-size: clamp(40px, 5vw, 68px); - font-style: italic; - font-weight: 900; + font-family: var(--font-heading-retail); + font-size: clamp(38px, 5vw, 64px); + font-weight: 800; letter-spacing: 0; - line-height: 0.95; + line-height: 1; } .footer-brand span:first-child { @@ -672,6 +817,10 @@ select { grid-template-columns: 1fr 1fr; } + .type-options { + grid-template-columns: 1fr 1fr; + } + .mega-menu { top: 206px; } @@ -700,6 +849,8 @@ select { .menu-grid, .appellations, .product-grid, + .type-options, + .section-heading--split, .footer-nav { grid-template-columns: 1fr; } diff --git a/css/tokens.css b/css/tokens.css index 26dd439..132b409 100644 --- a/css/tokens.css +++ b/css/tokens.css @@ -10,8 +10,11 @@ --color-accent-gold: #b9965b; --color-accent-blue: #1f3476; - --font-heading: "Playfair Display", Georgia, serif; + --font-heading: "Montserrat", "Inter", Arial, sans-serif; --font-body: "Inter", Arial, sans-serif; + --font-heading-classic: "Playfair Display", Georgia, serif; + --font-body-classic: "Inter", Arial, sans-serif; + --font-heading-retail: "Montserrat", "Inter", Arial, sans-serif; --spacing-4: 4px; --spacing-8: 8px; diff --git a/css/ui-kit.css b/css/ui-kit.css index 04687e6..cf40c95 100644 --- a/css/ui-kit.css +++ b/css/ui-kit.css @@ -9,7 +9,7 @@ --color-white: #ffffff; --color-error: #a33a2f; - --font-heading: "Playfair Display", Georgia, serif; + --font-heading: "Montserrat", "Inter", Arial, sans-serif; --font-body: "Inter", Arial, sans-serif; --spacing-1: 4px; @@ -160,23 +160,28 @@ h1, h2, h3 { font-family: var(--font-heading); - line-height: 1.16; + line-height: 1.1; } h1 { max-width: 780px; margin-bottom: 20px; - font-size: clamp(42px, 6vw, 76px); + font-size: clamp(40px, 5.5vw, 72px); + font-weight: 800; + text-transform: uppercase; } h2 { margin-bottom: 0; - font-size: 42px; + font-size: 40px; + font-weight: 800; + text-transform: uppercase; } h3 { margin-bottom: 16px; - font-size: 25px; + font-size: 24px; + font-weight: 800; } .kit-hero p:not(.eyebrow) { @@ -333,6 +338,8 @@ code { .text-h2, .text-h3 { font-family: var(--font-heading); + font-weight: 800; + text-transform: uppercase; } .text-h1 { @@ -510,7 +517,8 @@ code { .product-meta h3 { margin: 8px 0 6px; - font-size: 24px; + font-size: 21px; + text-transform: uppercase; } .product-meta p { @@ -689,7 +697,9 @@ tbody tr:hover { place-items: center; color: var(--color-primary-wine-100); font-family: var(--font-heading); - font-size: 22px; + font-size: 20px; + font-weight: 800; + text-transform: uppercase; text-align: center; } @@ -712,8 +722,10 @@ tbody tr:hover { .template-card strong { font-family: var(--font-heading); - font-size: 22px; + font-size: 20px; + font-weight: 800; line-height: 1.2; + text-transform: uppercase; } .screen-preview { @@ -744,7 +756,8 @@ tbody tr:hover { .screen-preview__hero h3 { max-width: 520px; margin: 8px 0 20px; - font-size: 52px; + font-size: 48px; + text-transform: uppercase; } .screen-preview__content { diff --git a/index.html b/index.html index 14a087d..84c5e43 100644 --- a/index.html +++ b/index.html @@ -6,7 +6,7 @@ DP Trade — Home - + @@ -72,6 +72,91 @@ +
+
+
+
+

Typography direction

+

4 варианта типографики

+
+

+ Выбранное направление — Premium Retail: сильная витрина, крупные уверенные заголовки + и читаемый интерфейс для каталога. +

+
+ +
+
+
+ Option 01 + Editorial Wine +
+

Редкие вина для профессиональной торговли

+

+ Cormorant Garamond для крупных заголовков и Manrope для интерфейса. Больше премиальности, + культурного контекста и ощущения curated selection. +

+
+ H1 72/78 + Body 16/25 + Label 12/16 +
+
+ +
+
+ Option 02 + Neo Trade +
+

Каталог, который работает как торговый инструмент

+

+ Manrope везде: современно, ровно, технологично. Хорошо подойдет, если сайт должен читаться + как быстрый B2B-продукт. +

+
+ H1 64/70 + Body 16/24 + Label 12/16 +
+
+ +
+
+ Option 03 + Modern Classic +
+

Вино, регионы и производители в ясной системе

+

+ Playfair Display + Inter. Более классический premium retail, но с аккуратной цифровой + читаемостью в карточках, фильтрах и таблицах. +

+
+ H1 68/74 + Body 16/24 + Label 12/16 +
+
+ +
+
+ Option 04 + Выбрано +
+

Сильная витрина с акцентом на выбор

+

+ Montserrat для заголовков и Inter для текста. Более собранный, коммерческий, уверенный + вариант для каталога с большим количеством позиций. +

+
+ H1 60/66 + Body 16/24 + Label 12/16 +
+
+
+
+
+
diff --git a/product.html b/product.html index 3d4b519..b6d18ad 100644 --- a/product.html +++ b/product.html @@ -6,7 +6,7 @@ DP Trade — Product - + diff --git a/ui-kit.html b/ui-kit.html index 6edc38b..86b5cbc 100644 --- a/ui-kit.html +++ b/ui-kit.html @@ -7,7 +7,7 @@ @@ -113,15 +113,15 @@

Typography

- Text / Heading / H1 / Playfair / 48 / 56 + Text / Heading / H1 / Montserrat / 48 / 56

Rare wines for trade

- Text / Heading / H2 / Playfair / 36 / 44 + Text / Heading / H2 / Montserrat / 36 / 44

Catalog collections

- Text / Heading / H3 / Playfair / 28 / 36 + Text / Heading / H3 / Montserrat / 28 / 36

Producer selection