diff --git a/components/menu.html b/components/menu.html index a5500c2..f74a362 100644 --- a/components/menu.html +++ b/components/menu.html @@ -1,29 +1,44 @@
- +7 (495) 937-94-60 +
+ +7 (495) 937-94-60 + + + + + + +
diff --git a/css/site.css b/css/site.css index 61d9518..f0a0d17 100644 --- a/css/site.css +++ b/css/site.css @@ -48,17 +48,18 @@ select { position: sticky; top: 0; z-index: 20; - background: rgba(255, 253, 249, 0.94); + background: rgba(248, 250, 252, 0.94); border-bottom: 1px solid rgba(102, 96, 95, 0.18); - backdrop-filter: blur(16px); + box-shadow: 0 10px 28px rgba(22, 22, 22, 0.05); + backdrop-filter: blur(18px); } .header-top { display: grid; - grid-template-columns: 210px minmax(260px, 1fr) auto; + grid-template-columns: 170px minmax(260px, 1fr) auto; align-items: center; - gap: 28px; - min-height: 86px; + gap: 20px; + min-height: 72px; } .brand-logo { @@ -67,10 +68,11 @@ select { width: fit-content; color: var(--color-accent-blue); font-family: var(--font-heading-retail); - font-size: 28px; + font-size: 26px; font-weight: 800; letter-spacing: 0; line-height: 0.9; + text-transform: uppercase; } .brand-logo span:first-child { @@ -79,8 +81,8 @@ select { .brand-logo small { position: absolute; - left: 70px; - top: 27px; + left: 54px; + top: 24px; color: var(--color-primary-wine-80); font-size: 8px; font-weight: 700; @@ -89,11 +91,11 @@ select { .search-bar { display: grid; - grid-template-columns: 50px minmax(0, 1fr); + grid-template-columns: 44px minmax(0, 1fr); align-items: center; - min-height: 52px; + min-height: 44px; border: 1px solid rgba(102, 96, 95, 0.24); - border-radius: 999px; + border-radius: var(--radius-sm); background: var(--color-surface); } @@ -103,11 +105,12 @@ select { } .search-bar button { - width: 50px; - height: 50px; + width: 44px; + height: 42px; border: 0; background: transparent; color: var(--color-primary-wine-100); + font-size: 18px; cursor: pointer; } @@ -116,22 +119,63 @@ select { border: 0; outline: 0; color: var(--color-neutral-black); + font-size: 14px; +} + +.header-actions { + display: flex; + align-items: center; + gap: 10px; } .phone-link { color: var(--color-accent-blue); - font-size: 18px; - font-weight: 700; + font-size: 15px; + font-weight: 800; white-space: nowrap; } +.header-icon { + width: 38px; + height: 38px; + border: 1px solid rgba(75, 15, 36, 0.14); + border-radius: var(--radius-sm); + background: transparent; + color: var(--color-primary-wine-100); + display: inline-grid; + place-items: center; + transition: background 0.18s ease, border-color 0.18s ease, transform 0.18s ease; +} + +.header-icon:hover { + border-color: rgba(75, 15, 36, 0.36); + background: rgba(75, 15, 36, 0.06); + transform: translateY(-1px); +} + +.header-icon svg { + width: 20px; + height: 20px; + fill: none; + stroke: currentColor; + stroke-linecap: round; + stroke-linejoin: round; + stroke-width: 1.45; +} + +.header-icon--air { + border-color: rgba(75, 15, 36, 0.13); + background: transparent; +} + .main-nav { display: flex; align-items: center; - justify-content: center; - gap: 42px; - min-height: 68px; + justify-content: flex-start; + gap: 8px; + min-height: 52px; overflow-x: auto; + border-top: 1px solid rgba(102, 96, 95, 0.12); } .main-nav > a, @@ -139,13 +183,15 @@ select { display: inline-flex; align-items: center; gap: 7px; - min-height: 40px; + min-height: 34px; + padding: 0 2px; border: 0; border-bottom: 2px solid transparent; + border-radius: 0; background: transparent; color: var(--color-neutral-gray-700); - font-size: 14px; - font-weight: 700; + font-size: 12px; + font-weight: 800; letter-spacing: 0; text-transform: uppercase; cursor: pointer; @@ -156,28 +202,60 @@ select { .nav-item:hover .nav-trigger, .nav-item:focus-within .nav-trigger { border-bottom-color: var(--color-primary-wine-100); + background: transparent; color: var(--color-primary-wine-100); } +.nav-chevron { + width: 10px; + height: 10px; + display: inline-grid; + place-items: center; + line-height: 0; +} + +.nav-chevron svg { + width: 9px; + height: 6px; + fill: none; + stroke: currentColor; + stroke-linecap: round; + stroke-linejoin: round; + stroke-width: 1.6; +} + .nav-item { position: static; } +.nav-item::after { + content: ""; + position: fixed; + left: 0; + right: 0; + top: 102px; + z-index: 19; + display: none; + height: 34px; +} + .mega-menu { position: absolute; left: 50%; - top: 154px; + top: 118px; width: min(1180px, calc(100vw - 40px)); - max-height: calc(100vh - 172px); + max-height: calc(100vh - 142px); overflow: auto; - padding: 28px; + padding: 22px; border: 1px solid rgba(102, 96, 95, 0.18); - background: #fffdfa; + background: #f8fafc; box-shadow: var(--shadow-lift); transform: translateX(-50%); display: none; } +.nav-item:hover::after, +.nav-item:focus-within::after, .nav-item:hover .mega-menu, .nav-item:focus-within .mega-menu { display: block; @@ -185,13 +263,19 @@ select { .mega-intro { display: grid; - grid-template-columns: minmax(220px, 0.55fr) minmax(320px, 1fr); - gap: 18px 34px; + grid-template-columns: minmax(220px, 0.7fr) minmax(320px, 1fr); + gap: 18px 28px; align-items: end; - padding-bottom: 22px; + padding-bottom: 18px; border-bottom: 1px solid rgba(102, 96, 95, 0.18); } +.mega-intro h2 { + font-size: 26px; + font-weight: 800; + text-transform: uppercase; +} + .eyebrow, .section-title, .muted-caps { @@ -219,31 +303,37 @@ select { .menu-grid { display: grid; - grid-template-columns: 1.4fr 0.9fr 1.1fr 1fr; - gap: 28px; - padding-top: 28px; + grid-template-columns: 1.05fr 0.82fr 1.25fr 0.88fr; + gap: 22px; + padding-top: 22px; } .menu-column { display: flex; flex-direction: column; - gap: 12px; + gap: 10px; min-width: 0; } .menu-column a { width: fit-content; max-width: 100%; - font-size: 16px; + color: var(--color-neutral-gray-700); + font-size: 14px; + font-weight: 600; } .menu-column a:hover { color: var(--color-primary-wine-80); } +.visual-column { + gap: 12px; +} + .visual-column img { width: 100%; - aspect-ratio: 16 / 9; + aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius-sm); } @@ -251,22 +341,26 @@ select { .visual-column p { margin: 0; color: var(--color-neutral-gray-600); + font-size: 13px; + line-height: 1.42; } .appellations { display: grid; grid-template-columns: 1fr 1fr; - gap: 20px; + gap: 9px 18px; + align-content: start; } .appellations .section-title { grid-column: 1 / -1; + margin-bottom: 0; } .appellation-group { display: flex; flex-direction: column; - gap: 10px; + gap: 9px; } .country-link { @@ -322,7 +416,7 @@ select { .button--secondary { border-color: rgba(75, 15, 36, 0.24); color: var(--color-primary-wine-100); - background: rgba(255, 255, 255, 0.72); + background: rgba(248, 250, 252, 0.78); } .button--sm { @@ -332,7 +426,7 @@ select { } .hero { - min-height: calc(100vh - 154px); + min-height: calc(100vh - 124px); display: grid; align-items: end; padding: 88px 0; @@ -341,7 +435,7 @@ select { url("https://images.unsplash.com/photo-1560493676-04071c5f467b?auto=format&fit=crop&w=1800&q=80"); background-position: center; background-size: cover; - color: #fffdfa; + color: #f8fafc; } .hero-copy { @@ -390,7 +484,7 @@ select { } .type-lab-section { - background: #fffdfa; + background: #eef2f6; } .type-options { @@ -419,7 +513,7 @@ select { .type-card.is-selected { border-color: rgba(75, 15, 36, 0.48); - background: linear-gradient(180deg, #fffdfa 0%, #f7efe8 100%); + background: linear-gradient(180deg, #ffffff 0%, #eef2f6 100%); box-shadow: var(--shadow-lift); } @@ -437,7 +531,7 @@ select { .type-card.is-selected-soft { border-color: rgba(185, 150, 91, 0.62); - background: #fffaf0; + background: #f7f4ea; } .type-card.is-selected-soft::before { @@ -476,6 +570,26 @@ select { color: var(--color-neutral-gray-600); } +.type-usage { + padding-top: 14px; + border-top: 1px solid rgba(102, 96, 95, 0.14); + display: grid; + gap: 6px; +} + +.type-usage strong { + color: var(--color-primary-wine-100); + font-size: 11px; + font-weight: 800; + text-transform: uppercase; +} + +.type-usage span { + color: var(--color-neutral-gray-600); + font-size: 13px; + line-height: 1.42; +} + .type-scale { display: flex; flex-wrap: wrap; @@ -638,7 +752,7 @@ select { } .product-media--amber { - background: linear-gradient(140deg, #a8632a, #eaded2); + background: linear-gradient(140deg, #a8632a, #dde4ec); } .product-media--green { @@ -671,7 +785,7 @@ select { inset: 54px 8px auto; height: 42px; border-radius: 4px; - background: #f4eee8; + background: #eef2f6; } .product-card h3 { @@ -901,8 +1015,16 @@ select { grid-template-columns: 1fr; } + .header-top { + padding: 16px 0; + } + + .header-actions { + justify-content: space-between; + } + .phone-link { - display: none; + font-size: 14px; } .main-nav { @@ -920,7 +1042,12 @@ select { } .mega-menu { - top: 206px; + top: 172px; + } + + .nav-item::after { + top: 150px; + height: 34px; } } @@ -931,16 +1058,31 @@ select { .header-top { gap: 14px; - padding: 18px 0; + padding: 16px 0; + } + + .header-actions { + align-items: center; + flex-direction: row; + gap: 10px; + } + + .phone-link { + display: none; } .main-nav { - min-height: 58px; + min-height: 54px; } .mega-menu { - top: 204px; - padding: 20px; + top: 184px; + padding: 18px; + } + + .nav-item::after { + top: 160px; + height: 34px; } .mega-intro, diff --git a/css/tokens.css b/css/tokens.css index 132b409..3c27676 100644 --- a/css/tokens.css +++ b/css/tokens.css @@ -4,8 +4,8 @@ --color-neutral-black: #161616; --color-neutral-gray-700: #30343a; --color-neutral-gray-600: #66605f; - --color-neutral-gray-300: #d8d3cf; - --color-background-base: #faf8f5; + --color-neutral-gray-300: #d9dee6; + --color-background-base: #f4f6f9; --color-surface: #ffffff; --color-accent-gold: #b9965b; --color-accent-blue: #1f3476; diff --git a/css/ui-kit.css b/css/ui-kit.css index cf40c95..b6cd3e1 100644 --- a/css/ui-kit.css +++ b/css/ui-kit.css @@ -3,8 +3,8 @@ --color-primary-wine-80: #6d1c36; --color-neutral-black: #161616; --color-gray-600: #66605f; - --color-gray-300: #d8d3cf; - --color-background-base: #faf8f5; + --color-gray-300: #d9dee6; + --color-background-base: #f4f6f9; --color-accent-gold: #b9965b; --color-white: #ffffff; --color-error: #a33a2f; @@ -59,7 +59,7 @@ select { inset: 0 auto 0 0; width: 280px; padding: 24px; - background: #fffdf9; + background: #f8fafc; border-right: 1px solid rgba(102, 96, 95, 0.18); display: flex; flex-direction: column; @@ -131,7 +131,7 @@ select { gap: 48px; background: radial-gradient(circle at 82% 28%, rgba(185, 150, 91, 0.25), transparent 24%), - linear-gradient(135deg, #fffdfa 0%, #f4eee8 58%, #eaded2 100%); + linear-gradient(135deg, #ffffff 0%, #eef2f6 58%, #dde4ec 100%); } .kit-hero__content { @@ -463,7 +463,7 @@ code { place-items: center; background: linear-gradient(135deg, rgba(255, 255, 255, 0.42), transparent 48%), - var(--media-bg, #eaded2); + var(--media-bg, #dde4ec); } .product-card--compact .product-media { @@ -475,7 +475,7 @@ code { } .product-media--amber { - --media-bg: linear-gradient(140deg, #a8632a, #eaded2); + --media-bg: linear-gradient(140deg, #a8632a, #dde4ec); } .product-media--green { @@ -508,7 +508,7 @@ code { inset: 54px 8px auto; height: 42px; border-radius: 4px; - background: #f4eee8; + background: #eef2f6; } .product-meta { @@ -671,7 +671,7 @@ td { } th { - background: #f0e8df; + background: #e8edf3; color: var(--color-primary-wine-100); font-size: 12px; text-transform: uppercase; @@ -770,7 +770,7 @@ tbody tr:hover { .screen-preview__content span { min-height: 110px; border-radius: var(--radius-sm); - background: #f0e8df; + background: #e8edf3; } @media (max-width: 1100px) { diff --git a/index.html b/index.html index cc77c6d..f9b9eb6 100644 --- a/index.html +++ b/index.html @@ -13,22 +13,40 @@
- + - +7 (495) 937-94-60 +
+ +7 (495) 937-94-60 + + + + + + +
@@ -96,6 +204,10 @@ Cormorant Garamond для крупных заголовков и Manrope для интерфейса. Больше премиальности, культурного контекста и ощущения curated selection.

+
+ Где использовать + Имиджевые hero, истории производителей, региональные editorial-блоки. +
H1 72/78 Body 16/25 @@ -113,6 +225,10 @@ Manrope везде: современно, ровно, технологично. Хорошо подойдет, если сайт должен читаться как быстрый B2B-продукт.

+
+ Где использовать + Личный кабинет, таблицы, фильтры, B2B-операции и плотные интерфейсы. +
H1 64/70 Body 16/24 @@ -130,6 +246,10 @@ Playfair Display + Inter. Более классический premium retail, но с аккуратной цифровой читаемостью в карточках, фильтрах и таблицах.

+
+ Где использовать + Промо-разделы, подборки, страницы брендов и спокойные premium-лендинги. +
H1 68/74 Body 16/24 @@ -147,6 +267,10 @@ Montserrat для заголовков и Inter для текста. Более собранный, коммерческий, уверенный вариант для каталога с большим количеством позиций.

+
+ Где использовать + Главная, навигация, карточки, шаблоны страниц и основные marketing-блоки. +
H1 60/66 Body 16/24 @@ -164,6 +288,10 @@ Montserrat + Inter, но с меньшим scale: заголовки спокойнее, карточки плотнее, больше товаров помещается в первый экран.

+
+ Где использовать + Каталог, выдача поиска, фильтрованные списки и страницы с высокой плотностью товаров. +
H1 48/54 Body 15/22