/* ========================================================= VERON — дверні системи · Editorial redesign 2026 Тепла піщана палітра, велика легка типографіка, фото ========================================================= */ /* ---------- 1. Токени ---------- */ :root { --paper: #FFFFFF; --sand: #F4F5F6; --sand-2: #E8EAEC; --clay: #D3D7DA; --ink: #292F33; --ink-2: #444C51; --muted: #5C6569; /* Було #9BA3A8 — 2,6:1 на білому, нижче норми 4,5:1 для звичайного тексту (WCAG AA). Тепер 4,5:1+, той самий відтінок, темніший. */ --muted-2: #5F686D; --line: rgba(41, 47, 51, .14); --line-2: rgba(41, 47, 51, .08); --tan: #E0364C; --tan-2: #B32A3C; --tan-soft: #FCE8EB; --ok: #2F7D5B; --glass: rgba(255, 255, 255, .72); --glass-dark: rgba(41, 47, 51, .55); --glass-line: rgba(255, 255, 255, .55); --font: "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; --font-display: "Manrope", -apple-system, BlinkMacSystemFont, sans-serif; --display: clamp(3.2rem, 1.2rem + 9.6vw, 10.5rem); --display-sm: clamp(2.4rem, 1.2rem + 5.4vw, 6rem); --h2: clamp(1.9rem, 1.2rem + 2.6vw, 3.4rem); --h3: clamp(1.1rem, .95rem + .8vw, 1.45rem); --r-sm: 2px; --r-md: 3px; --r-lg: 4px; --r-xl: 4px; --r-2xl: 4px; --r-full: 999px; --shadow-sm: 0 1px 2px rgba(41, 47, 51, .06); --shadow-md: 0 12px 30px -20px rgba(41, 47, 51, .35); --shadow-lg: 0 30px 70px -36px rgba(41, 47, 51, .45); --container: 1280px; --gap: clamp(14px, 1.8vw, 26px); --section-y: clamp(64px, 8vw, 132px); --ease: cubic-bezier(.22, .68, .32, 1); --ease-out: cubic-bezier(.16, 1, .3, 1); } /* ---------- 2. База ---------- */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; overflow-x: clip; -webkit-text-size-adjust: 100%; } body { margin: 0; font-family: var(--font); font-size: 16px; line-height: 1.6; color: var(--ink-2); background: var(--paper); overflow-x: clip; -webkit-font-smoothing: antialiased; } body.is-locked { overflow: hidden; } /* Блокування скролу модалками трималось лише на body.overflow:hidden — але html вище має свій власний overflow-x:clip (проти горизонтального overflow сайту), а явно заданий overflow хоч б по одній осі на html вимикає стандартне "прокидання" overflow з body на viewport. Тобто сторінка (сам html) лишалась прокручуваною повз "заблокований" body — і колесом миші, і свайпом. :has() тягне те саме overflow:hidden на html, поки всередині body.is-locked, і реально зупиняє скрол сторінки. */ html:has(body.is-locked) { overflow: hidden; } h1, h2, h3, h4 { margin: 0 0 .5em; color: var(--ink); font-weight: 700; line-height: 1.1; letter-spacing: -.02em; } p { margin: 0 0 1em; } a { color: inherit; text-decoration: none; } img { display: block; max-width: 100%; } button, input, select, textarea { font: inherit; color: inherit; } /* Поля вводу браузер заокруглює сам: Chrome дає ~2px, macOS — помітно більше, і на полях із самим лише нижнім підкресленням це видно як загин лінії вгору на кінцях. Прибираємо скрізь; кнопкам (.btn) заокруглення лишається — там воно навмисне і задане класом. */ input, select, textarea { border-radius: 0; } /* Safari на macOS ігнорує border-radius на полях, доки не знято рідний вигляд (те саме, що з , доки не знято рідний вигляд — саме тому список лишався заокругленим, хоча решта полів ні. appearance: none прибирає і це, і внутрішній відступ ліворуч (~4px), через який текст у списку стояв не на одній лінії з іншими полями. Стрілку малюємо самі — тепер вона однакова в усіх браузерах. */ select { -webkit-appearance: none; appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23292F33' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-size: 15px 15px; background-position: right 0 center; padding-right: 24px; } ul { margin: 0; padding: 0; list-style: none; } /* Рамка фокуса. border-radius тут НЕ задаємо: outline і так повторює форму самого елемента. Раніше тут стояло border-radius: 6px «щоб рамка була заокруглена» — і воно гнуло сам елемент: у полів з одним лише нижнім підкресленням лінія загиналась угору на кінцях, щойно поле отримувало фокус. Кругла кнопка при цьому теж ставала б прямокутником, якби її власне правило не було специфічнішим. */ :focus-visible { outline: 2px solid var(--tan); outline-offset: 3px; } .container { width: min(100% - 2 * clamp(16px, 4vw, 44px), var(--container)); margin-inline: auto; } .section { padding-block: var(--section-y); } .section--tight { padding-block: clamp(40px, 5vw, 80px); } .section--sand { background: var(--sand); } .section--paper { background: var(--paper); } /* Заокруглені секції, що перекривають фото */ .rounded-top { border-radius: var(--r-2xl) var(--r-2xl) 0 0; margin-top: calc(-1 * clamp(30px, 4vw, 64px)); position: relative; z-index: 2; } .rounded-bottom { border-radius: 0 0 var(--r-2xl) var(--r-2xl); } /* ---------- 3. Типографіка ---------- */ .display { font-family: var(--font-display); font-weight: 300; font-size: var(--display); line-height: .92; letter-spacing: -.02em; text-transform: uppercase; color: var(--ink); margin: 0; } .display--sm { font-size: var(--display-sm); } .display em { font-style: normal; font-weight: 300; color: var(--tan); } .micro { font-size: .68rem; letter-spacing: .22em; text-transform: uppercase; color: var(--muted); font-weight: 600; } .micro--light { color: rgba(255, 255, 255, .68); } .eyebrow { display: inline-flex; align-items: center; gap: 10px; margin-bottom: 18px; } .eyebrow::before { content: ""; width: 26px; height: 1px; background: currentColor; opacity: .45; } .lead { font-size: clamp(1.02rem, .96rem + .4vw, 1.22rem); color: var(--ink-2); line-height: 1.55; } /* Editorial-параграф із кольоровими словами та фото-пігулками */ .editorial { font-size: clamp(1.15rem, .8rem + 1.5vw, 2.05rem); line-height: 1.32; letter-spacing: -.02em; color: var(--ink); font-weight: 300; text-transform: uppercase; } .editorial b { font-weight: 300; color: var(--muted-2); } .editorial .pill-img { display: inline-block; vertical-align: middle; width: clamp(48px, 6vw, 92px); height: clamp(24px, 2.8vw, 42px); border-radius: var(--r-lg); overflow: hidden; margin: 0 .18em; background: var(--sand-2) center/cover no-repeat; box-shadow: var(--shadow-sm); } .editorial .pill-img img { width: 100%; height: 100%; object-fit: cover; } .slashes { color: var(--tan); letter-spacing: -.04em; font-weight: 300; } .asterisk { display: inline-block; color: var(--tan); font-size: 1.6rem; line-height: 1; animation: spin 14s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } /* усі іконки — однаковий бокс і центрування (svg інлайновий, тож сідає на базову лінію) */ [data-icon] { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; line-height: 0; } [data-icon] svg { display: block; } /* ---------- 4. Кнопки ---------- */ .btn { --btn-h: 60px; display: inline-flex; align-items: center; gap: 12px; cursor: pointer; min-height: var(--btn-h); padding: 13px 13px 13px 24px; border: 0; border-radius: var(--r-md); background: var(--ink); color: var(--paper); font-weight: 600; text-transform: uppercase; letter-spacing: .08em; font-size: .74rem; white-space: nowrap; transition: transform .3s var(--ease), background .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease), box-shadow .3s var(--ease); } .btn i, .btn .arrow { width: 34px; height: 34px; border-radius: var(--r-full); flex-shrink: 0; background: var(--tan); color: #fff; display: grid; place-items: center; transition: transform .35s var(--ease-out), background .3s var(--ease); } .btn svg { width: 16px; height: 16px; } .btn:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); } .btn:hover .arrow { transform: rotate(45deg); } .btn:hover { background: var(--ink-2); } .btn--light { background: #fff; color: var(--ink); box-shadow: var(--shadow-sm); } .btn--light:hover { background: var(--sand); color: var(--ink); } .btn--tan { background: #D5304A; color: #fff; } /* трохи темніший за --tan: білий текст 4.5+ */ .btn--tan .arrow { background: rgba(255, 255, 255, .22); } .btn--tan:hover { background: var(--tan-2); color: #fff; } /* контурна — на світлому тлі; ховер інвертує, а не заливає білим */ .btn--ghost { background: transparent; color: var(--ink); border: 1px solid var(--line); padding: 12px 22px; } .btn--ghost:hover { background: var(--ink); border-color: var(--ink); color: #fff; } .btn--ghost:hover .arrow { background: var(--tan); } /* контурна — на темному тлі; текст завжди лишається світлим */ .btn--on-dark { background: rgba(255, 255, 255, .04); color: #fff; border: 1px solid rgba(255, 255, 255, .24); } .btn--on-dark:hover { background: rgba(255, 255, 255, .14); border-color: rgba(255, 255, 255, .5); color: #fff; } .btn--glass { background: var(--glass); color: var(--ink); border: 1px solid var(--glass-line); backdrop-filter: blur(14px); } .btn--glass:hover { background: #fff; color: var(--ink); } .btn--plain { padding: 13px 24px; } .btn--sm { --btn-h: 46px; padding: 9px 9px 9px 18px; font-size: .84rem; } .btn--sm i, .btn--sm .arrow { width: 28px; height: 28px; } .btn--sm.btn--plain, .btn--sm.btn--ghost, .btn--sm.btn--on-dark { padding: 9px 18px; } .btn--block { width: 100%; justify-content: center; } /* однакова висота в стовпчику, навіть якщо в однієї кнопки є кружечок зі стрілкою */ .btn--block + .btn--block, .ctaband__actions .btn, .picker__result .btn, .mmenu__foot .btn { min-height: var(--btn-h); } /* герой: та сама типографіка кнопки, але мінімальний радіус */ .hero .btn, .hero__actions .btn { border-radius: var(--r-md); text-transform: none; letter-spacing: -.01em; font-size: .92rem; } .link-line { display: inline-flex; align-items: center; gap: 10px; font-weight: 600; font-size: .9rem; color: var(--ink); border-bottom: 1px solid var(--line); padding-bottom: 4px; transition: color .25s var(--ease), border-color .25s var(--ease); } .link-line svg { width: 15px; height: 15px; transition: transform .3s var(--ease); } .link-line:hover { color: var(--tan); border-color: var(--tan); } .link-line:hover svg { transform: translate(3px, -3px); } /* ---------- 5. Навігація (тонкий бар) ---------- */ .nav-wrap { position: fixed; top: 0; left: 0; right: 0; z-index: 80; border-bottom: 1px solid transparent; transition: background .4s var(--ease), border-color .4s var(--ease), backdrop-filter .4s var(--ease); } .nav-wrap.is-solid { background: rgba(255, 255, 255, .94); backdrop-filter: blur(16px) saturate(150%); -webkit-backdrop-filter: blur(16px) saturate(150%); border-bottom-color: var(--line-2); } /* Скло в межах першого екрана. * * Хедер над hero прозорий, і поки сторінка стоїть — це правильно: нічого * не відрізає фото. Але щойно починається скрол, під ним проїжджає світлий * текст hero, і біле меню на світлому тексті просто зникає (найгірше — на * абзаці під заголовком). Раніше стан був лише один: прозорий до кінця * hero, далі різко білий. * * Тепер між ними є скло: тонована матова підкладка, яка притлумлює все, * що під нею, лишаючи меню білим. Діє тільки в межах hero — далі вмикається * is-solid і хедер стає світлим, як і був. * * saturate(140%) — щоб фото під склом не сірішало; верхній відблиск дає * краю товщину, без нього підкладка виглядає як просто темний прямокутник. */ .nav-wrap.is-glass { background: rgba(18, 20, 22, .38); backdrop-filter: blur(20px) saturate(140%); -webkit-backdrop-filter: blur(20px) saturate(140%); /* Відблиск по нижньому краю замість рівної рамки: рамка читається як межа блоку, тонка світла лінія плюс мʼяка тінь — як край скла. */ border-bottom-color: transparent; box-shadow: 0 1px 0 rgba(255, 255, 255, .14), 0 10px 30px rgba(0, 0, 0, .18); } /* Без backdrop-filter (старий Firefox, режим економії) 38% чорного не сховає нічого — тоді підкладка має бути щільною, інакше меню знову зникне. */ @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .nav-wrap.is-glass { background: rgba(18, 20, 22, .82); } } @media (prefers-reduced-transparency: reduce) { .nav-wrap.is-glass { background: rgba(18, 20, 22, .88); backdrop-filter: none; -webkit-backdrop-filter: none; } } /* ---------- Верхній службовий рівень хедера ---------- * * Хедер дворівневий: угорі те, що потрібно рідко, але має бути під рукою * (телефони, графік, мова, обране, порівняння), унизу — навігація й дія. * * Це не лише про вигляд. В один рядок усе вже не влізало: нижче 1400px * ховалась кнопка «Зв'язатись», нижче 1200 — пошук. Знявши з основного рядка * мову й дві іконки, ми звільнили місце, і обидва тепер доживають до значно * менших ширин (див. блок стиснення нижче). * * При скролі верхній рівень згортається: висота в 0 з переходом. Саме * висота, а не display: none — інакше не було б анімації, і хедер * підстрибував би. */ /* ---------- Рівень 1: логотип, пошук, зв'язок ---------- * * Тут те, з чим працюють постійно, тому рівень лишається на місці при * прокрутці. Пошук навмисно широкий і по центру: у каталозі з 86 моделей * він знаходить швидше за будь-яке меню. */ /* Перший рівень мусить лежати НАД другим, і саме як шар, а не як z-index окремої підказки. Причина тонка. Підказки пошуку мають z-index: 95, і поки поле було звичайним блоком, цього вистачало: підказки піднімались у власний шар .nav-wrap і накривали ряд категорій. Але backdrop-filter на .nav-search створює stacking context, і z-index підказок відтоді рахується всередині самого поля — назовні воно лишається z-index: auto. Тоді .nav-cats (position: relative, іде далі за списком) малювався поверх, і пункти «Накладки», «Портфоліо» проступали крізь підказки, ба більше — перехоплювали на себе кліки по них. Тож шар задає сам рівень: .nav-main вище, .nav-cats нижче. Випадайку категорій це не чіпає — вона висить під своїм рядом, з .nav-main не перетинається. */ .nav-main { position: relative; z-index: 2; } .nav-main__inner { width: min(100% - 2 * clamp(16px, 4vw, 44px), var(--container)); margin-inline: auto; height: 68px; display: flex; align-items: center; gap: clamp(12px, 2vw, 28px); transition: height .35s var(--ease); } .nav-wrap.is-scrolled .nav-main__inner { height: 58px; } .nav-main__tools { margin-left: auto; display: flex; align-items: center; gap: clamp(8px, 1vw, 14px); flex-shrink: 0; } /* ---------- Рівень 2: категорії й розділи ---------- * * «Всі категорії» відкриває список категорій каталогу — це головний вхід * у товар, тому він перший і виділений. Решта розділів поруч звичайним * накресленням. * * При прокрутці рівень згортається висотою. overflow: hidden стоїть саме на * __inner, а не на .nav-cats: випадайка лежить у .nav-cats, і якби ховали * там, її б обрізало. */ .nav-cats { position: relative; z-index: 1; } .nav-cats__inner { width: min(100% - 2 * clamp(16px, 4vw, 44px), var(--container)); margin-inline: auto; height: 46px; overflow: hidden; display: flex; align-items: center; gap: clamp(12px, 2vw, 26px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12); transition: height .35s var(--ease), opacity .3s var(--ease), box-shadow .4s var(--ease); } .nav-wrap.is-cats-hidden .nav-cats__inner { height: 0; opacity: 0; box-shadow: none; } .nav-wrap.is-solid .nav-cats__inner { box-shadow: inset 0 1px 0 var(--line-2); } /* height: 46px тут фіксована (заради згортання при скролі, див. коментар вище) і майже впритул до самих посилань — звичайна рамка фокуса (offset +3px) виходить за цю висоту й обрізається. Тому всередині рядка рамка малюється всередину елемента, а не назовні. */ .nav-cats__inner :focus-visible { outline-offset: -3px; } .nav-cats__all { display: inline-flex; align-items: center; gap: 10px; flex-shrink: 0; background: none; border: 0; cursor: pointer; padding: 8px 0; font-size: .84rem; font-weight: 600; letter-spacing: -.01em; color: #fff; transition: color .25s var(--ease), opacity .25s var(--ease); } .nav-cats__all svg { width: 16px; height: 16px; } /* Кегль такий самий, як у «Всі категорії». Було .8rem: коробки різної висоти центруються по своїх центрах, і верх літер розходився на 0.48px — на око це читається як «рядок не вирівняний». */ .nav-cats__inner .nav-links > a { font-size: .84rem; } .nav-cats__all:hover { opacity: .75; } .nav-wrap.is-solid .nav-cats__all { color: var(--ink); } /* Телефон і графік — один рядок праворуч у другому рівні. * * Номер стояв у першому рівні поруч із кнопкою «Звʼязатись із нами»: одна * дія, показана двічі за 300 px, у ряду, де вже було вісім елементів. * Кнопка лишилась гучним закликом, а номер тут — тихою довідкою поруч із * графіком: «куди дзвонити» і «коли відповідають» читаються разом. * Крапка-роздільник мальована через ::before, щоб не тримати порожній * у розмітці кожної з 93 сторінок. */ .nav-contact { margin-left: auto; display: flex; align-items: center; gap: 12px; min-width: 0; } .nav-phone { font-size: .78rem; font-weight: 500; white-space: nowrap; color: rgba(255, 255, 255, .72); transition: color .25s var(--ease); } .nav-phone:hover { color: #fff; } .nav-wrap.is-solid .nav-phone { color: var(--ink-2); } .nav-wrap.is-solid .nav-phone:hover { color: var(--ink); } .nav-cats__hours { font-size: .76rem; white-space: nowrap; color: rgba(255, 255, 255, .5); } .nav-contact .nav-cats__hours::before { content: "·"; margin-right: 12px; opacity: .6; } .nav-wrap.is-solid .nav-cats__hours { color: var(--muted); } /* Позначку «відчинено / зачинено» вставляє script.js за київським часом. * * Зелений тут не --ok (#2F7D5B): він розрахований на білу підкладку, а над * героєм лежить темне фото — на ньому цей відтінок читається майже сірим. * Тому над фото світліший зелений, а на білому хедері повертається --ok. * * «Зачинено» навмисно не червоне: червоний на сайті означає дію (кнопки, * акценти), і червоний надпис у шапці читався б як помилка або тривога. * Закрито — це не аварія, а просто вечір, тож колір приглушений. */ .nav-status { display: inline-flex; align-items: center; gap: 6px; font-size: .76rem; white-space: nowrap; color: #5BC48D; transition: color .25s var(--ease); } .nav-status::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex-shrink: 0; } .nav-status.is-closed { color: rgba(255, 255, 255, .5); } .nav-wrap.is-solid .nav-status { color: var(--ok); } .nav-wrap.is-solid .nav-status.is-closed { color: var(--muted); } /* Крапки-роздільника перед позначкою навмисно немає: кружечок статусу сам відбиває її від графіка, а «· ● Відчинено» — це два роздільники підряд. */ .nav-contact .nav-status { margin-left: 4px; } /* Випадайка категорій — рідке скло. * * Ключове обмеження: знімки дверей зняті не на білому — у них справжнє тло, * від світло-сірого до майже чорного (перевірено по кутах файлів). Тому * вирізати тло режимами накладання не можна: multiply лише бруднив світлі * полотна, а темні перетворював на плями. Фото стоїть на власній нейтральній * підкладці — без рамки, без внутрішнього відступу, на всю висоту комірки, * щоб силует полотна читався одразу. */ /* Випадайка йде за станом хедера, а не живе окремим світлим островом. * * Над героєм шапка темна, а після прокрутки стає білою — панель під нею * підлаштовується так само. * * Підкладка суцільна, без прозорості й без діагонального відблиску: з * ними крізь панель просвічував текст сторінки під нею (великий заголовок * секції, наприклад «КОМАНДА», читався крізь начебто непрозору плашку) — * Денис попросив прибрати. backdrop-filter теж прибраний: він розмивав * те, що все одно повністю закрите суцільним кольором, — даремне * навантаження без жодного видимого ефекту. * * Обидва стани зібрані на локальних змінних: правила компонента нижче * написані один раз через них, а темний і світлий варіант міняють лише * значення. Дублювати селектори під .is-solid для кожного елемента (тексту, * ховера, рамки, плитки) означало б, що наступна правка неминуче забуде * половину з них. */ .cats-drop { /* темний стан — над героєм, за замовчуванням */ --drop-bg: #181C1F; --drop-ink: #fff; --drop-muted: rgba(255, 255, 255, .5); --drop-hover: rgba(255, 255, 255, .07); --drop-hover-line: rgba(255, 255, 255, .13); --drop-line: rgba(255, 255, 255, .14); --drop-top: rgba(255, 255, 255, .1); /* Плитка з дверима лишається світлою в обох станах: знімки полотен зняті на білому, і на темній підкладці двері перетворились би на пляму. */ --drop-pic: rgba(255, 255, 255, .82); position: absolute; top: 100%; left: 0; right: 0; z-index: 5; background: var(--drop-bg); box-shadow: inset 0 1px 0 var(--drop-top), 0 26px 70px rgba(0, 0, 0, .38); overflow: hidden; } .nav-wrap.is-solid .cats-drop { --drop-bg: var(--paper); --drop-ink: var(--ink); --drop-muted: var(--muted); /* Світлий стан має власну підкладку: --drop-hover/--drop-hover-line у темному варіанті — це напівпрозорий білий, і скопійований сюди буквально він лягав білим по білому (--paper) — ховер був невидимий. Тут ті самі токени, що й у .ptype:hover / .adv__card:hover нижче по файлу: --sand підкладка й --line рамка. */ --drop-hover: var(--sand); --drop-hover-line: var(--line); --drop-line: rgba(0, 0, 0, .12); --drop-top: rgba(255, 255, 255, .75); --drop-pic: rgba(255, 255, 255, .4); box-shadow: inset 0 1px 0 var(--drop-top), 0 26px 70px rgba(0, 0, 0, .28); } .cats-drop__inner { position: relative; z-index: 1; width: min(100% - 2 * clamp(16px, 4vw, 44px), var(--container)); margin-inline: auto; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2px; padding: 14px 0 18px; } .cats-drop a { display: flex; align-items: center; gap: 16px; padding: 8px 12px; border: 1px solid transparent; transition: background .2s var(--ease), border-color .2s var(--ease); } /* :hover — лише для пристроїв з реальним наведенням: на дотику він «залипає» після тапу (немає events, що його знімають), і остання натиснута категорія лишається обведеною рамкою — саме це й виглядало «криво» на телефоні. */ @media (hover: hover) { .cats-drop a:hover { background: var(--drop-hover); border-color: var(--drop-hover-line); } .cats-drop a:hover .cats-drop__arrow { opacity: 1; transform: translateX(0); } .cats-drop .cats-drop__soon:hover { opacity: .85; background: none; border-color: transparent; } } /* Двері на всю висоту комірки: без рамки й без внутрішнього відступу — полотно займає підкладку цілком і читається силуетом, а не маркою. */ .cats-drop__pic { /* 50x96 — це 0.52, медіанна пропорція знімків дверей (я їх заміряв: 0.517). Плитка збігається з фото, тож contain нічого не ріже й водночас не лишає полів: полотно займає комірку цілком і видно його на весь ріст, як і має бути. */ flex-shrink: 0; width: 50px; height: 96px; display: flex; align-items: center; justify-content: center; background: var(--drop-pic); overflow: hidden; } .cats-drop__pic img { width: 100%; height: 100%; object-fit: contain; display: block; } /* Категорія без фото (модель без знімка або без моделей узагалі) — замість пустої підкладки чи розмитого градієнта показуємо силует дверей: та сама біла плитка, що й під фото, тож рядок не виглядає «зламаним». */ .cats-drop__pic svg { width: 32%; height: 32%; color: rgba(41, 47, 51, .4); flex-shrink: 0; } .cats-drop__txt { display: flex; align-items: baseline; gap: 10px; min-width: 0; flex-wrap: wrap; } .cats-drop b { font-weight: 500; color: var(--drop-ink); } .cats-drop span.cats-drop__txt > span, .cats-drop__txt span { font-size: .76rem; color: var(--drop-muted); white-space: nowrap; } /* Стрілка з'являється тільки на ховері — легкий натяк на дію, без зайвого шуму в спокійному стані рядка. */ .cats-drop__arrow { width: 15px; height: 15px; flex-shrink: 0; margin-left: auto; color: var(--drop-muted); opacity: 0; transform: translateX(-4px); transition: opacity .2s var(--ease), transform .2s var(--ease); } /* Категорія без жодної моделі («скоро») — не рядок у сітці, а тонкий окремий рядок під нею: інакше самотня плитка лишала б дірку в останньому ряду сітки, а рівний хов з активними категоріями обіцяв би товар, якого ще нема. */ .cats-drop__soon { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; padding: 9px 12px; opacity: .6; border: 1px solid transparent; } .cats-drop__soon:first-of-type { border-top: 1px solid var(--drop-line); margin-top: 6px; padding-top: 13px; } .cats-drop__soon-badge { font-size: .64rem; letter-spacing: .08em; text-transform: uppercase; padding: 3px 9px; border: 1px solid var(--drop-line); border-radius: 20px; color: var(--drop-muted); } /* Селектор навмисно з двох класів, а не з одного. «Увесь каталог» — це , а вище стоїть `.cats-drop a { border: 1px solid transparent }` зі специфічністю (0,1,1) проти (0,1,0) в одного класу. Через це розділювач тут не малювався ніколи — прозора рамка посилання мовчки його перебивала. Знайшлось на перевірці кольорів. */ .cats-drop .cats-drop__all { /* Симетрично, як і в решти рядків (.cats-drop a: 8px, .cats-drop__soon: 9px) — було 12px 12px 4px: знизу лишалось лише 4px проти 12px згори, тож текст тиснувся до нижньої межі, а над ним висіло зайве повітря. */ grid-column: 1 / -1; margin-top: 8px; padding: 12px 12px; border-top: 1px solid var(--drop-line); } .cats-drop__all b { font-weight: 600; } .cats-drop b { font-weight: 500; color: var(--drop-ink); } .cats-drop span { font-size: .76rem; color: var(--drop-muted); white-space: nowrap; } .nav-links { display: flex; align-items: center; gap: clamp(14px, 1.5vw, 22px); } .nav-links > a, .nav-links > button { background: none; border: 0; cursor: pointer; padding: 6px 0; font-size: .8rem; letter-spacing: -.01em; font-weight: 500; color: rgba(255, 255, 255, .84); white-space: nowrap; position: relative; transition: color .25s var(--ease); } .nav-links > a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: currentColor; opacity: .6; transform: scaleX(0); transform-origin: left; transition: transform .3s var(--ease); } .nav-links > a:hover::after, .nav-links > a.is-active::after { transform: scaleX(1); } .nav-links > a:hover { color: #fff; } .nav-wrap.is-solid .nav-links > a, .nav-wrap.is-solid .nav-links > button { color: var(--ink-2); } .nav-wrap.is-solid .nav-links > a:hover { color: var(--ink); } .mark { display: inline-flex; align-items: center; gap: 12px; color: #fff; transition: color .3s var(--ease), opacity .3s var(--ease); } .mark:hover { opacity: .75; } .mark { --logo-mark: var(--tan); } .mark .mark__logo { width: clamp(104px, 9vw, 132px); height: auto; display: block; } .nav-wrap.is-solid .mark { color: var(--ink); } .footer__logo { line-height: 0; } .footer__logo .mark__logo { width: clamp(150px, 18vw, 230px); height: auto; color: #fff; --logo-mark: var(--tan); } .mark span { font-size: .74rem; letter-spacing: .3em; text-transform: uppercase; font-weight: 600; } /* Над героєм поле — мʼяка напівпрозора капсула без жодної лінії. * * Спершу тут була повна рамка з заливкою: 348×46 px контрастного * прямокутника поверх фотографії, найбільша пляма в ряду, важча за * логотип. Її замінили на саме підкреслення — маса впала, але зʼявилась * гірша вада. Лінія йшла на всі 348 px, тоді як іконка з плейсхолдером * займають лише 169 — майже половина креслення висіла під порожнечею. * До того ж її контраст (.34) утричі перевищував контраст власного * роздільника хедера (.12), який іде паралельно всього за 11 px нижче: * дві майже паралельні лінії поруч, з них верхня — сильніша й коротша. * Саме це й муляло око. * * Тепер поле тримається не креслениками, а тоном: підкладка на .13 з * розмиттям фону читається як поле на будь-якому кадрі, при цьому не має * жодного різкого краю, який міг би конкурувати з роздільником. Скруглення * — те саме var(--r-full), що в «обраного», «порівняння» й перемикача * мови: у ряду зʼявляється спільна форма замість чужого прямокутника. */ .nav-search { position: relative; display: flex; align-items: center; gap: 10px; padding: 0 18px; border: 0; border-radius: var(--r-full); color: rgba(255, 255, 255, .82); background: rgba(255, 255, 255, .13); -webkit-backdrop-filter: blur(10px) saturate(1.1); backdrop-filter: blur(10px) saturate(1.1); /* 320px — стільки, щоб у полі вміщалась назва моделі з артикулом, і не більше: ширша капсула знову набирає масу. Висота 44px стоїть між 38px вільних контролів і 46px кнопки «Звʼязатись»; на скругленій формі різниця не читається, а вертикаль ряду лишається спокійною. Поле першим віддає місце при нестачі — інакше сусіди в рядку виштовхуються за край. */ flex: 0 1 320px; min-width: 0; max-width: 320px; height: 44px; transition: background .3s var(--ease), color .3s var(--ease), box-shadow .3s var(--ease); } .nav-search:hover { background: rgba(255, 255, 255, .2); } .nav-search:focus-within { background: #fff; box-shadow: 0 6px 22px rgba(0, 0, 0, .18); } .nav-search svg { width: 14px; height: 14px; flex-shrink: 0; } .nav-search input { background: none; border: 0; outline: none; width: 100%; /* .84rem — той самий кегль, що й у кнопки поруч (.btn--sm). Було .88rem, і поле читалось важчим за кнопку, хоч коробки однакові. */ font-size: .84rem; color: inherit; } .nav-search:focus-within input, .nav-search:focus-within svg { color: var(--ink); } .nav-search:focus-within input::placeholder { color: var(--muted-2); } .nav-search input::placeholder { color: currentColor; opacity: .75; } /* На білому хедері розмивати нічого — під ним суцільний фон, тож капсула переходить у звичайну підкладку кольору --sand. Рамки немає й тут: інакше на скролі поле раптом обростало б краєм, якого щойно не було. */ .nav-wrap.is-solid .nav-search { background: var(--sand); color: var(--muted); -webkit-backdrop-filter: none; backdrop-filter: none; } .nav-wrap.is-solid .nav-search:hover { background: var(--sand-2); } .nav-wrap.is-solid .nav-search:focus-within { background: #fff; box-shadow: 0 0 0 1px var(--ink-2); } .nav-wrap.is-solid .nav-search input { color: var(--ink); } /* Перемикач мови стоїть в одному ряду з «обраним» і «порівнянням», тож мусить важити стільки ж. Глобус був 14px проти 19px у сусідів і на .78 прозорості проти .82 — виглядав дрібнішим і тьмянішим, ряд читався нерівним. Кегль «UA» теж піднято: 12.5px біля 19-піксельного гліфа читались як підпис, а не як рівноправна кнопка. */ .nav-meta { display: inline-flex; align-items: center; gap: 7px; cursor: pointer; flex-shrink: 0; background: none; border: 0; /* Три вільні контроли ряду (мова, обране, порівняння) мусять стояти з однаковим оптичним кроком. У кнопок малюнок 19px усередині коробки 38px, тобто кожна несе ще по 9.5px невидимого поля з боків, а мова не несла нічого — просвіти виходили 9 / 27 / 37px замість рівних. Висота й бічні поля тут повторюють геометрію .icon-btn, тож проміжок задає сам gap ряду, однаково для всіх. */ height: 38px; padding: 0 10px; font-size: .84rem; color: rgba(255, 255, 255, .82); white-space: nowrap; transition: color .25s var(--ease), background .25s var(--ease); border-radius: var(--r-full); } .nav-meta:hover { background: rgba(255, 255, 255, .16); } .nav-wrap.is-solid .nav-meta:hover { background: var(--sand); } .nav-meta:hover { color: #fff; } .nav-meta svg { width: 19px; height: 19px; } .nav-meta [data-lang-label] { min-width: 2.1em; text-align: center; display: inline-block; } .nav-wrap.is-solid .nav-meta { color: var(--ink-2); } .nav-wrap.is-solid .nav-meta:hover { color: var(--ink); } .burger { display: none; width: 40px; height: 40px; border-radius: var(--r-full); background: rgba(255, 255, 255, .14); border: 1px solid rgba(255, 255, 255, .28); color: #fff; place-items: center; cursor: pointer; } .nav-wrap.is-solid .burger { background: var(--sand); border-color: transparent; color: var(--ink); } .burger svg { width: 18px; height: 18px; } /* Мобільне меню */ .mmenu { position: fixed; inset: 0; z-index: 95; background: var(--paper); transform: translateY(-100%); transition: transform .45s var(--ease-out), visibility .45s; /* visibility, не лише transform: закрите меню лежало поза екраном, але лишалось у tab-order — Tab із фокусу на бургері вів прямо в пункти меню, які ще не видно. */ visibility: hidden; display: flex; flex-direction: column; overflow-y: auto; padding: 20px clamp(18px, 5vw, 32px) 40px; } .mmenu.is-open { transform: none; visibility: visible; } .mmenu__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 30px; } .mmenu__link { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; padding: 14px 0; border-bottom: 1px solid var(--line-2); font-size: clamp(1.6rem, 1rem + 3vw, 2.6rem); font-weight: 300; letter-spacing: -.04em; text-transform: lowercase; color: var(--ink); } .mmenu__link span { font-size: .62rem; letter-spacing: .2em; text-transform: uppercase; color: var(--muted); } .mmenu__foot { margin-top: auto; padding-top: 34px; display: grid; gap: 10px; } /* ---------- 6. Герой (темний, кінематографічний) ---------- */ .hero { position: relative; min-height: 100svh; display: flex; flex-direction: column; justify-content: flex-end; padding: clamp(96px, 12vw, 150px) 0 clamp(34px, 4vw, 56px); overflow: hidden; background: #100E0C; isolation: isolate; } .hero__bg { position: absolute; inset: 0; z-index: -2; } .hero__bg img { width: 100%; height: 100%; object-fit: cover; animation: heroZoom 18s var(--ease-out) forwards; } @keyframes heroZoom { from { transform: scale(1.06); } to { transform: scale(1); } } /* Затемнення героя. Фото світле в середній смузі — саме там стоять H1 і лід, тому середина підіймається, а зліва додано окремий градієнт під текстову колонку. */ .hero::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(12, 10, 9, .84) 0%, rgba(12, 10, 9, .5) 22%, rgba(12, 10, 9, .62) 56%, rgba(10, 9, 8, .95) 100%), linear-gradient(90deg, rgba(10, 9, 8, .74) 0%, rgba(10, 9, 8, .38) 48%, rgba(10, 9, 8, .06) 80%), radial-gradient(120% 80% at 50% 40%, transparent 28%, rgba(10, 9, 8, .58) 100%); } .hero__inner { position: relative; } .hero__inner::before { content: ""; position: absolute; z-index: -1; left: -6vw; right: -6vw; bottom: -6vh; top: 18%; background: linear-gradient(180deg, transparent, rgba(10, 9, 8, .62) 40%, rgba(10, 9, 8, .88)); pointer-events: none; } .hero__title { color: #fff; font-weight: 300; letter-spacing: -.035em; line-height: 1.02; font-size: clamp(2.4rem, 1.2rem + 4.6vw, 5.6rem); margin: 0; animation: fadeUp 1.1s var(--ease-out) .1s backwards; } .hero__title em { font-style: normal; font-weight: 300; } /* Опис і кнопка — один стовпчик, а не два кінці рядка. * * Кнопка стояла в правій колонці, за 650 px від абзацу, з яким вона в парі. * Біла плашка на темному фото — найяскравіший обʼєкт екрана, тож погляд * ішов на неї раніше, ніж на H1, а звʼязок «прочитав опис — натиснув» не * читався взагалі. Тепер вони стоять одне під одним ліворуч: заголовок * лишається першим, кнопка — наступним кроком після тексту. */ .hero__meta { display: flex; flex-direction: column; align-items: flex-start; gap: clamp(18px, 2vw, 26px); margin-top: clamp(26px, 3.4vw, 46px); animation: fadeUp 1.1s var(--ease-out) .25s backwards; } .hero__desc { font-size: .96rem; line-height: 1.62; color: rgba(255, 255, 255, .96); max-width: 52ch; margin: 0; text-shadow: 0 1px 12px rgba(10, 9, 8, .55); } .hero__actions { display: flex; align-items: center; gap: 10px; } @keyframes fadeUp { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } } .hero__stats { display: flex; gap: clamp(26px, 4vw, 60px); flex-wrap: wrap; margin-top: clamp(26px, 3vw, 44px); padding-top: clamp(18px, 2vw, 26px); border-top: 1px solid rgba(255, 255, 255, .14); animation: fadeUp 1.1s var(--ease-out) .4s backwards; } .hero__stat b { display: block; font-size: clamp(1.3rem, 1rem + 1.1vw, 1.9rem); font-weight: 300; letter-spacing: -.03em; color: #fff; line-height: 1; } .hero__stat span { font-size: .68rem; letter-spacing: .16em; text-transform: uppercase; color: rgba(255, 255, 255, .68); } /* ---------- 7. «Про нас»: слайдер, що гортається скролом ---------- */ .about__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; } .about__head > * { min-width: 0; } /* На вузьких телефонах великий заголовок (2-3 рядки) і текст праворуч починають зʼїжджатись/накладатись один на одного при align-items:flex-end (він виставляється інлайново на кожному використанні) — тому на мобільному просто ставимо блоки один під одним, а не стискаємо в один рядок. */ @media (max-width: 640px) { .about__head { flex-direction: column; align-items: flex-start !important; gap: 8px; } .about__head > p[style*="text-align:right"] { text-align: left !important; max-width: none !important; } } .about__meta { text-align: right; line-height: 1.7; color: var(--muted); } /* ---------- Етапи виробництва (сторінка «Про нас») ---------- * * Раніше тут було закріплення екрана: секція заввишки в чотири вікна, а * всередині sticky-сцена, де крок перемикався від позиції скролу. Прибрано * на прохання. Фікс-скрол забирає в людини керування сторінкою: колесо * крутиться, а сторінка стоїть, і щоб проминути блок, треба «відмотати» * чотири екрани. Тепер це звичайний список — гортається як усе інше, * усі чотири етапи видно одразу, кожен зі своїм фото. * * Фото чергують сторони, щоб чотири однакові рядки не читались таблицею. */ .steps { list-style: none; margin: 0; padding: 0; display: grid; gap: clamp(40px, 6vw, 92px); } .step { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 60px); align-items: center; } .step:nth-child(even) .step__media { order: 2; } .step__media { /* 16:10, а не 4:3. При половинній ширині 4:3 дає кадр під 460px заввишки проти ~130px тексту поруч — рядок виходив високим і напівпорожнім. */ margin: 0; border-radius: var(--r-lg); overflow: hidden; background: var(--sand-2); aspect-ratio: 16 / 10; } .step__media img { width: 100%; height: 100%; object-fit: cover; display: block; } .step__num { font-size: .68rem; letter-spacing: .12em; color: var(--tan); } .step__title { font-size: clamp(1.5rem, 1rem + 1.6vw, 2.2rem); font-weight: 300; letter-spacing: -.02em; margin: 10px 0 12px; color: var(--ink); } .step__text p { color: var(--muted); line-height: 1.65; max-width: 46ch; margin: 0; } @media (max-width: 860px) { /* На вузькому — фото над текстом. order знімаємо, інакше в частині рядків знімок опинявся б під підписом, а в частині над ним. */ .step { grid-template-columns: minmax(0, 1fr); gap: 18px; } .step:nth-child(even) .step__media { order: 0; } .step__media { aspect-ratio: 16 / 10; } } /* ---------- Колода етапів (сторінка «Про нас») ---------- * * Липкий стос замість звичайного списку: картка n зупиняється під шапкою на * n * --deck-peek нижче за попередню, тож наступна наїжджає на неї зверху й * лишає видимим тонкий верхній край. Ефект дає position: sticky і сам скрол * сторінки — колесо не перехоплюється, блок можна проминути як будь-який * інший. Попередній варіант із фіксацією екрана прибрали саме тому, що він * керування забирав. * * --p ставить JS: наскільки картку вже накрито наступною. Через нього * підкладка трохи зменшується, і стос читається як стос, а не як зсув. */ .deck { list-style: none; margin: 0; padding: 0; --deck-top: clamp(78px, 10vh, 104px); --deck-peek: 16px; } .deck__item { position: sticky; top: calc(var(--deck-top) + var(--i) * var(--deck-peek)); } .deck__item + .deck__item { margin-top: clamp(26px, 4vw, 54px); } .deck__card { --p: 0; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: clamp(22px, 3.4vw, 52px); align-items: center; padding: clamp(16px, 2vw, 24px); background: var(--sand); border: 1px solid var(--line-2); border-radius: var(--r-lg); /* Власна тінь, не --shadow-lg: у стосі тіні шести карток лягають одна на одну, і те, що на поодинокому блоці читалось мʼяко, тут збиралось у сірий ореол навколо всієї колоди. Тримаємо коротку й ледь помітну — стос уже розділяють край картки та рамка. */ box-shadow: 0 10px 24px -18px rgba(41, 47, 51, .22); transform: scale(calc(1 - var(--p) * .018)); transform-origin: 50% 0; } .deck__media { margin: 0; border-radius: var(--r-md); overflow: hidden; background: var(--sand-2); aspect-ratio: 16 / 10; } .deck__media img { width: 100%; height: 100%; object-fit: cover; display: block; } .deck__media svg { width: 100%; height: 100%; display: block; } .deck__media--empty { display: grid; place-items: center; border: 1px dashed var(--line); background: var(--paper); } .deck__media--empty span { color: var(--muted-2); } .deck__num { font-size: .68rem; letter-spacing: .12em; color: var(--tan); } .deck__title { font-size: clamp(1.5rem, 1rem + 1.6vw, 2.2rem); font-weight: 300; letter-spacing: -.02em; margin: 10px 0 12px; color: var(--ink); } .deck__text p { color: var(--muted); line-height: 1.65; max-width: 46ch; margin: 0; } /* На вузькому картка з фото над текстом вища за екран, а стос із карток, які не вміщаються, липне ривками. Тому там — звичайний список. */ @media (max-width: 860px) { .deck__item { position: static; } .deck__item + .deck__item { margin-top: clamp(28px, 7vw, 44px); } .deck__card { grid-template-columns: minmax(0, 1fr); gap: 16px; transform: none; } } @media (prefers-reduced-motion: reduce) { .deck__item { position: static; } .deck__card { transform: none; } } .photo { border-radius: var(--r-lg); overflow: hidden; background: var(--sand-2); aspect-ratio: 4 / 3; position: relative; } .photo img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); } .photo:hover img { transform: scale(1.04); } /* ---------- 8. Переваги: фото-сцена з плитками, що розкриваються ---------- */ .trust { position: relative; isolation: isolate; overflow: hidden; border-radius: var(--r-2xl); color: #fff; min-height: min(660px, 86vh); display: flex; align-items: stretch; padding-block: clamp(34px, 4.5vw, 64px); } .trust__bg { position: absolute; top: 0; left: 0; right: 0; height: 100%; z-index: -2; background: var(--ink); } .trust__bg picture, .trust__bg img { display: block; width: 100%; height: 100%; object-fit: cover; } .trust::before { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(100deg, rgba(20,23,26,.86) 0%, rgba(20,23,26,.52) 46%, rgba(20,23,26,.2) 72%, rgba(20,23,26,.12) 100%), linear-gradient(180deg, rgba(20,23,26,.55) 0%, rgba(20,23,26,.3) 40%, rgba(20,23,26,.82) 100%); } .trust__inner { display: flex; flex-direction: column; justify-content: space-between; gap: clamp(24px, 4vh, 48px); } .trust__head .eyebrow { color: rgba(255,255,255,.6); } .trust__head .eyebrow::before { background: rgba(255,255,255,.4); } .trust__head h2 { color: #fff; margin-top: 10px; } /* стрічка плиток */ .trust__strip { display: flex; gap: 10px; align-items: flex-end; min-width: 0; height: clamp(336px, 36vh, 390px); } .trust__tile { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; border-radius: var(--r-lg); overflow: hidden; background: rgba(255, 255, 255, .12); border: 1px solid rgba(255, 255, 255, .16); backdrop-filter: blur(12px); color: #fff; transition: flex-grow .6s var(--ease-out), background .45s var(--ease-out), border-color .45s var(--ease-out), color .45s var(--ease-out); } .trust__tile.is-open { flex-grow: 3.4; background: var(--paper); border-color: transparent; color: var(--ink); height: 100%; } .trust__hit { width: 100%; display: flex; flex-direction: column; gap: 14px; align-items: flex-start; padding: clamp(16px, 1.6vw, 24px); background: none; border: 0; cursor: pointer; text-align: left; font: inherit; color: inherit; min-width: 0; } .trust__chevron { display: none; } .trust__ico { width: 38px; height: 38px; border-radius: var(--r-md); display: grid; place-items: center; background: rgba(255, 255, 255, .16); color: #fff; flex-shrink: 0; transition: background .45s var(--ease-out), color .45s var(--ease-out); } .trust__ico svg { width: 19px; height: 19px; } .trust__tile.is-open .trust__ico { background: var(--tan); color: #fff; } .trust__title { font-size: .92rem; font-weight: 500; line-height: 1.3; letter-spacing: .01em; color: inherit; min-width: 0; overflow-wrap: break-word; } .trust__tile.is-open .trust__title { font-size: 1.06rem; } /* згорнуті плитки однакової висоти — верхній край рівний */ .trust__tile:not(.is-open) { align-self: flex-end; height: clamp(158px, 21vh, 214px); } .trust__tile:not(.is-open) .trust__title { min-height: 3.9em; } /* тіло розкритої плитки */ .trust__body { flex: 1 1 auto; min-height: 0; overflow: hidden; padding: 0 clamp(16px, 1.6vw, 24px) clamp(16px, 1.6vw, 24px); } .trust__tile:not(.is-open) .trust__body { display: none; } .trust__tile.is-open .trust__body { animation: trustIn .45s var(--ease-out) .12s both; } @keyframes trustIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } } .trust__body p { margin: 0; font-size: .88rem; line-height: 1.6; color: var(--ink-2); border-top: 1px solid var(--line-2); padding-top: 14px; } .trust__tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; } .trust__tags span { font-size: .66rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); background: var(--sand); border-radius: var(--r-sm); padding: 6px 10px; } @media (hover: hover) { .trust__tile:not(.is-open):hover { background: rgba(255, 255, 255, .2); border-color: rgba(255,255,255,.3); } .trust__tile:not(.is-open):hover .trust__ico { background: rgba(255, 255, 255, .28); } } .trust__hit:focus-visible { outline: 2px solid #fff; outline-offset: -4px; border-radius: var(--r-md); } /* низ: прогрес і стрілки */ .trust__foot { display: flex; align-items: center; justify-content: space-between; gap: 20px; } .trust__prog { position: relative; height: 2px; width: min(240px, 40%); background: rgba(255,255,255,.24); border-radius: var(--r-full); overflow: hidden; } .trust__prog i { position: absolute; inset: 0; display: block; background: #fff; transform-origin: 0 50%; transform: scaleX(0); transition: transform .5s var(--ease-out); } .trust__nav { display: flex; gap: 8px; } .trust__arrow { width: 42px; height: 42px; border-radius: var(--r-md); display: grid; place-items: center; cursor: pointer; background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.2); color: #fff; transition: background .3s var(--ease), border-color .3s var(--ease); } .trust__arrow:hover { background: rgba(255,255,255,.26); border-color: rgba(255,255,255,.4); } .trust__arrow svg { width: 18px; height: 18px; } .trust__arrow[data-trust="-1"] svg { transform: rotate(90deg); } .trust__arrow[data-trust="1"] svg { transform: rotate(-90deg); } /* планшет і мобільний — вертикальний акордеон, без фіксованої висоти */ @media (max-width: 900px) { .trust { min-height: 0; border-radius: var(--r-lg); } /* фото за плитками — статичного розміру, завжди. Секція на мобайлі росте/згортається разом з акордеоном (контент нижче зсувається — це нормально), але сам .trust__bg від цієї висоти більше не залежить: фіксований запас під найвищий можливий стан (усі закриті + найдовше тіло одного розкритого тайла), лишок ховає .trust { overflow: hidden }. */ .trust__bg { height: 1000px; } .trust__strip { flex-direction: column; gap: 8px; } .trust__strip { align-items: stretch; height: auto; } .trust__tile.is-open { height: auto; } .trust__body { flex: 0 0 auto; } /* align-self: flex-end із десктопної правила (вирівнювання по нижньому краю різновисоких плиток у рядку) лишався й тут — у стовпчику це вирівнювання по ПРАВОМУ краю (cross-axis у flex-direction:column) і стискання по контенту замість stretch: кожен закритий рядок вужчий і зсунутий вправо, кожен по-своєму — саме «сходинки» зі скріна. */ .trust__tile:not(.is-open) { height: auto; align-self: stretch; } /* плавне розкриття тіла картки замість миттєвого display:none — висота й нижній відступ анімуються разом (initTrust виставляє max-height у px через scrollHeight, як і в initFaq) */ /* фіксована висота тіла замість розрахунку по вмісту кожного тайла — раніше max-height рахувався в JS через scrollHeight окремо для кожної плитки (150–201px залежно від довжини тексту), тому висота й сам блок «ресайзились» щоразу під новий текст. Тепер одне статичне число для ВСІХ плиток — запас під найдовший текст ("Виробник, а не посередник", 201px натурального вмісту + трохи люфту). */ /* height, не max-height: max-height лише обмежує зверху — коротший текст все одно стискав бокс під себе, і висота «гуляла» від тайла до тайла (134–171px замість фіксованих 220). height примусово тримає однакове число завжди, короткий текст лишає порожнє місце знизу — саме це й просив Ден («строго статична і фіксована певної висоти»). */ /* усі відкриті тіла — однакова висота (220px), тому при перемиканні тайл, що закривається, і тайл, що відкривається, рівно компенсують одне одного — сумарна висота стрічки не міняється, і плитки нижче взагалі не рухаються (Ден просив саме руху — «нижні плавно вниз їдуть»). Розводимо старт: новий тайл росте одразу (без затримки), старий чекає .15s і тільки тоді починає стискатись — на цю паузу сумарна висота тимчасово більша, нижні плитки видимо їдуть вниз, звільняючи місце, а тоді старий тайл підтягується й усе осідає. */ /* базове (десктопне, поза медіа-запитом) правило .trust__tile:not(.is-open) .trust__body { display: none } досі активне й на мобайлі — display не анімується transition'ом, тому воно вбивало згортання миттєво, ще ДО того, як height встигав хоч трохи змінитись. Скидаємо display назад на block — тепер саме height/transition керує згортанням, а display більше не заважає. */ .trust__tile:not(.is-open) .trust__body { display: block; } .trust__body { height: 0; overflow: hidden; padding-bottom: 0; transition: height .3s var(--ease-out) .08s, padding-bottom .3s var(--ease-out) .08s; } .trust__tile.is-open .trust__body { height: 220px; padding-bottom: clamp(16px, 1.6vw, 24px); transition-delay: 0s; } /* десктопна fade+slide (trustIn, з .12s затримкою) на мобайлі зайва — тайл і так росте по висоті через max-height transition; окрема відкладена поява контенту поверх цього виглядає як «стрибок» (коробка вже виросла, а текст ще 120мс невидимий і потім різко виринає). Вимикаємо анімацію — контент з'являється разом з рамкою. */ .trust__tile.is-open .trust__body { animation: none; } .trust__tile, .trust__tile.is-open { flex: 0 0 auto; } .trust__hit { flex-direction: row; align-items: center; gap: 14px; } .trust__title { font-size: .95rem; } .trust__tile.is-open .trust__title { font-size: .98rem; } .trust__title br { display: none; } /* Кнопка вже клікабельна (це