/* ============================================================ zt-home-unify.css — приведение главной к единому виду Создан 2026-08-04. Подключается ПОСЛЕ zt-redesign.css. Основано на замерах живой страницы (стенд, 1440px): заголовки секций H2 5 разных размеров: 14, 25, 30, 40, 43 px цвета текста 11 оттенков серого кегли 20 значений от 7 до 43 px радиусы карточек 7 значений: 3, 4, 6, 7, 14, 16, 24 радиусы кнопок 4 значения: 0, 4, 10, 50 жёлтый на кнопках 3 оттенка: #FFB800, #FFC400, #FFBD00 начертания 5: 400, 500, 600, 700, 800 Файл отдельный от zt-redesign.css намеренно: тот чинит поломки, этот выравнивает вид. Их можно катить порознь и откатывать порознь. ============================================================ */ :root { /* ---- Заголовки секций ---- Сам токен адаптивный: переопределяется по брейкпоинтам ниже. Так любое правило, использующее var(--zt-h2-size), меняется вместе со шкалой — не нужно дублировать медиазапрос в каждом модуле. Раньше ступени были отдельными токенами (-md, -sm), и модуль, прибитый к литеральным 32 px, выпадал из шкалы в полосе 641–1023: остальные заголовки шли по 28. Старые имена оставлены — на них ссылается часть правил. */ --zt-h2-size: 32px; --zt-h2-size-md: 28px; --zt-h2-size-sm: 22px; --zt-h3-size: 20px; /* ---- Три оттенка текста вместо одиннадцати ---- */ --zt-ink: #333A43; /* основной — самый частый на странице (71 элемент) */ --zt-ink-soft: #6B7480; /* вторичный: описания, подписи */ --zt-ink-muted: #929AA1; /* третичный: мета, даты, служебное */ /* ---- Геометрия ---- */ --zt-radius-card: 12px; --zt-radius-btn: 8px; --zt-radius-pill: 999px; /* ---- Вертикальный ритм секций ---- */ --zt-section-gap: 64px; --zt-section-gap-sm: 40px; } /* ------------------------------------------------------------ 1. ЗАГОЛОВКИ СЕКЦИЙ — ОДИН РАЗМЕР Было: «Подбор запчастей» 25px, «Категории» 30px, «Бренды» 30px, «Популярные товары» 30px, «ZIPTEH SERVICE — надёжный партнёр» 43px, «Новости и статьи» 14px, «Сертификаты и дипломы» 14px, «Быстрый подбор запчастей» 40px. Один уровень иерархии — один размер. Разброс 14→43 читается как разные по важности блоки, хотя они равнозначны. ------------------------------------------------------------ */ .zip-home-hero h2, .zip-category-strip h2, .zip-brands h2, #ztSaleProducts h2, #ztCompanyAdvantages > * h2, #ztHomeMediaV2 h2, #ziptehLeadModule h2, .zt-section-title, [class*="__section-title"] { font-size: var(--zt-h2-size) !important; font-weight: 700 !important; line-height: 1.2 !important; color: var(--zt-ink) !important; letter-spacing: -0.01em; margin-bottom: 20px !important; } /* Главный заголовок страницы — на ступень крупнее остальных. Это единственное осмысленное исключение: блок «ZIPTEH SERVICE — надёжный партнёр» несёт роль H1 на главной. */ #ztCompanyAdvantages > h2:first-of-type { font-size: 40px !important; } /* Подзаголовки внутри секций */ #ztCompanyAdvantages h3, .zip-home-hero h3, #ziptehLeadModule h3 { font-size: var(--zt-h3-size) !important; font-weight: 600 !important; line-height: 1.25 !important; color: var(--zt-ink) !important; } /* Названия товаров в карточках — 12px было слишком мелко для основного элемента карточки, ради которого её и открывают */ .zt-product-card__name, .zt-product-card__name a, .poisk-product__name { font-size: 14px !important; font-weight: 500 !important; line-height: 1.35 !important; color: var(--zt-ink) !important; } @media (max-width: 1023px) { .zip-home-hero h2, .zip-category-strip h2, .zip-brands h2, #ztSaleProducts h2, #ztHomeMediaV2 h2, #ziptehLeadModule h2 { font-size: var(--zt-h2-size-md) !important; } #ztCompanyAdvantages > h2:first-of-type { font-size: 32px !important; } } @media (max-width: 640px) { .zip-home-hero h2, .zip-category-strip h2, .zip-brands h2, #ztSaleProducts h2, #ztHomeMediaV2 h2, #ziptehLeadModule h2 { font-size: var(--zt-h2-size-sm) !important; margin-bottom: 14px !important; } #ztCompanyAdvantages > h2:first-of-type { font-size: 26px !important; } #ztCompanyAdvantages h3, .zip-home-hero h3, #ziptehLeadModule h3 { font-size: 18px !important; } } /* ------------------------------------------------------------ 2. ШРИФТ ВЕЗДЕ ОДИН Замер показал: заголовки «Новости и статьи», «Сертификаты и дипломы» и названия товаров в карточках всё ещё рисуются Arial'ом — их правила задают семейство с !important, и общее правило из zt-redesign.css до них не достаёт. ------------------------------------------------------------ */ #ztHomeMediaV2 h2, #ztHomeMediaV2 *, .zt-product-card__name, .zt-product-card__name a, .zt-product-card *, .home-news-card *, .home-certificate-card * { font-family: var(--zt-font, 'Inter', Arial, sans-serif) !important; } /* ------------------------------------------------------------ 3. ЦВЕТА ТЕКСТА — сведены в самих исходниках Первая попытка задавала цвета селекторами по маскам вида [class*="__desc"]. Это добавляло ещё один оттенок там, куда попадало, и не убирало старые там, куда не попадало: после правки цветов стало 26 вместо 11. Правильный путь — переписать значения в самих файлах. Сделано отдельным проходом: шесть почти-чёрных сведены в #333A43, средние серые в #6B7480, светлые в #929AA1. ------------------------------------------------------------ */ /* ------------------------------------------------------------ 4. КНОПКИ — ОДИН ЖЁЛТЫЙ, ОДИН РАДИУС, ЧИТАЕМЫЙ ТЕКСТ Замер нашёл три жёлтых: #FFB800 (герой), #FFC400 («Все бренды»), #FFBD00 («В корзину») — и белый текст на двух из них, что даёт контраст 1,7:1 при норме 4,5:1. ------------------------------------------------------------ */ .yellow-button, .zip-home-hero__button, .zip-home-search__submit, .zt-product-card__cart, [class*="__submit"], button[class*="yellow"], a[class*="yellow"] { background-color: var(--zt-yellow, #FFB800) !important; color: #1A1A1A !important; border-radius: var(--zt-radius-btn) !important; font-weight: 700 !important; border-color: var(--zt-yellow, #FFB800) !important; } .yellow-button:hover, .zip-home-hero__button:hover, .zip-home-search__submit:hover, .zt-product-card__cart:hover, [class*="__submit"]:hover { background-color: var(--zt-yellow-hover, #E8A600) !important; color: #1A1A1A !important; } /* Круглые стрелки каруселей оставляем круглыми */ .zip-brands__arrow, .zt-sale-products__arrow, [class*="__arrow"] { border-radius: var(--zt-radius-pill) !important; } /* Табы: общая геометрия для «По артикулу / По бренду / По типу» и «Хит продаж / Новинки / Акции» — сейчас у них радиус 10 и 0 */ .zip-home-search__tab, .zt-sale-products__tab { border-radius: var(--zt-radius-btn) !important; font-size: 14px !important; font-weight: 600 !important; } /* ------------------------------------------------------------ 5. РАДИУСЫ КАРТОЧЕК — ОДИН Было семь: 3, 4, 6, 7, 14, 16, 24 px. ------------------------------------------------------------ */ .zip-category-card, .zt-product-card, .home-news-card, .home-certificate-card, .zip-brands__item, [class*="-card"]:not([class*="__"]), section [class*="__card"] { border-radius: var(--zt-radius-card) !important; } /* ------------------------------------------------------------ 9. ГАМБУРГЕР СПРАВА НА ВСЕХ ШИРИНАХ, ГДЕ ОН ЕСТЬ Ниже 1400 сайт переключается на бургер. Раньше он стоял слева — до него неудобно дотягиваться большим пальцем. Порядок: логотип · каталог · поиск · бургер. ------------------------------------------------------------ */ @media (min-width: 768px) and (max-width: 1399px) { .zt-header .zt-header__top-inner { grid-template-columns: auto auto minmax(0, 1fr) 52px !important; align-items: center !important; column-gap: 16px !important; } .zt-header .zt-header__logo { grid-column: 1 !important; grid-row: 1 !important; justify-self: start !important; } .zt-header .zt-catalog-button { grid-column: 2 !important; grid-row: 1 !important; } .zt-header .zt-search { grid-column: 3 !important; grid-row: 1 !important; } .zt-header .zt-mobile-trigger { grid-column: 4 !important; grid-row: 1 !important; justify-self: end !important; margin-left: 0 !important; } } /* ------------------------------------------------------------ ОТКАЧЕНО 2026-08-04: блоки геометрии Я задал всем секциям одинаковые max-width, поля и фон через !important. У каждой секции была своя внутренняя раскладка, и принудительные поля её сломали — выравнивание стало хуже, чем до правок. Урок тот же, что с цветами: насильно выравнивать чужую геометрию снаружи нельзя. Ширины и отступы надо приводить к общему виду в самих секциях, по одной, с проверкой каждой. Убранные блоки сохранены в zt-home-unify.geometry-rollback.txt на случай, если из них что-то понадобится точечно. Осталось в файле только то, что геометрию не трогает: размеры заголовков, шрифт, кнопки, радиусы. ------------------------------------------------------------ */ /* ============================================================ СИСТЕМА КНОПОК Замер главной: 52 кнопки, 19 разных вариантов. Только жёлтых CTA было шесть, и все разные: «Найти» 52px / 14px / 700 / поля 0 20 «Бесплатная консульт.» 52px / 16px / 700 / поля 0 24 «Отправить» 50px / 16px / 600 / поля 0 20 «В корзину» 34px / 11px / 700 / поля 0 12 «Подробнее о компании» 48px / 14px / 700 / поля 0 22 «КАТАЛОГ» 62px / 14px / 700 / поля 0 10 + UPPERCASE Плюс 4 варианта круглых стрелок (46, 50, 34, 26 px — последняя вдвое меньше нормы тач-цели) и 2 высоты табов. Сводим к четырём ролям: основная, компактная, вторичная, круглая. ============================================================ */ :root { --zt-btn-h: 48px; /* основная высота */ --zt-btn-h-sm: 40px; /* компактная — в карточках */ --zt-btn-fs: 15px; --zt-btn-fs-sm: 13px; --zt-btn-pad: 24px; --zt-btn-pad-sm: 16px; --zt-btn-weight: 700; } /* ---------- Основная: жёлтая заливка ---------- */ .zip-home-search__submit, .zip-home-hero__button, .yellow-button, .zt-company-advantages__button, .zt-catalog-button, .zt-header .zt-catalog-button { min-height: var(--zt-btn-h) !important; height: auto !important; padding: 0 var(--zt-btn-pad) !important; font-size: var(--zt-btn-fs) !important; font-weight: var(--zt-btn-weight) !important; line-height: 1.2 !important; letter-spacing: 0 !important; text-transform: none !important; border-radius: var(--zt-radius-btn, 8px) !important; border: 1px solid var(--zt-yellow, #FFB800) !important; background-color: var(--zt-yellow, #FFB800) !important; color: #1A1A1A !important; -webkit-text-fill-color: #1A1A1A !important; align-items: center !important; justify-content: center !important; gap: 10px !important; box-shadow: none !important; transition: background-color .15s ease !important; } .zip-home-search__submit:hover, .zip-home-hero__button:hover, .yellow-button:hover, .zt-company-advantages__button:hover, .zt-catalog-button:hover { background-color: var(--zt-yellow-hover, #E8A600) !important; border-color: var(--zt-yellow-hover, #E8A600) !important; color: #1A1A1A !important; } /* Подпись внутри кнопки каталога тоже тёмная и без верхнего регистра */ .zt-catalog-button__label, .zt-header .zt-catalog-button__label { color: #1A1A1A !important; -webkit-text-fill-color: #1A1A1A !important; text-transform: none !important; letter-spacing: 0 !important; font-size: var(--zt-btn-fs) !important; font-weight: var(--zt-btn-weight) !important; } /* ---------- Компактная: та же роль, меньше размер ---------- */ .zt-product-card__cart { min-height: var(--zt-btn-h-sm) !important; height: auto !important; padding: 0 var(--zt-btn-pad-sm) !important; font-size: var(--zt-btn-fs-sm) !important; font-weight: var(--zt-btn-weight) !important; letter-spacing: 0 !important; text-transform: none !important; border-radius: var(--zt-radius-btn, 8px) !important; border: 1px solid var(--zt-yellow, #FFB800) !important; background-color: var(--zt-yellow, #FFB800) !important; color: #1A1A1A !important; -webkit-text-fill-color: #1A1A1A !important; } /* ---------- Вторичная: обводка ---------- */ .zt-callback-button, .zt-header .zt-callback-button { min-height: var(--zt-btn-h) !important; height: auto !important; padding: 0 var(--zt-btn-pad) !important; font-size: var(--zt-btn-fs) !important; font-weight: var(--zt-btn-weight) !important; letter-spacing: 0 !important; text-transform: none !important; border-radius: var(--zt-radius-btn, 8px) !important; border: 1px solid var(--zt-yellow, #FFB800) !important; background-color: #FFFFFF !important; color: #333A43 !important; -webkit-text-fill-color: #333A43 !important; } .zt-callback-button:hover { background-color: var(--zt-yellow, #FFB800) !important; color: #1A1A1A !important; -webkit-text-fill-color: #1A1A1A !important; } /* ---------- Круглые стрелки каруселей ---------- Было 46, 50, 34 и 26 px. Последняя вдвое меньше минимальной тач-цели 44px — на телефоне в неё не попасть. */ /* Карусель документов (#ztHomeMediaV2) из списка исключена: по ТЗ доработки от 06.08.2026 её стрелки 50 px и со своей тенью — размеры задаёт home-media-v2.css */ .zip-brands__arrow, .zt-sale-products__arrow, .zt-product-card__more, .zip-home-hero .swiper-button-prev, .zip-home-hero .swiper-button-next { width: 44px !important; height: 44px !important; min-width: 44px !important; /* N-027…N-035 (06.08.2026): квадрат со скруглением вместо круга — единый стиль стрелок каруселей по указанию заказчика */ border-radius: 10px !important; border: 1px solid #E3E6E9 !important; background-color: #FFFFFF !important; color: #333A43 !important; box-shadow: none !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; } .zip-brands__arrow:hover, .zt-sale-products__arrow:hover, .zt-product-card__more:hover { border-color: var(--zt-yellow, #FFB800) !important; } /* Штатные стрелки Swiper рисуют иконку через ::after — размер тоже сводим */ .zip-home-hero .swiper-button-prev::after, .zip-home-hero .swiper-button-next::after { font-size: 15px !important; } /* ---------- Табы ---------- */ .zip-home-search__tab, .zt-sale-products__tab { min-height: 40px !important; height: auto !important; padding: 0 16px !important; font-size: 14px !important; font-weight: 600 !important; letter-spacing: 0 !important; text-transform: none !important; border-radius: var(--zt-radius-btn, 8px) !important; border: 1px solid transparent !important; background-color: transparent !important; color: #6B7480 !important; } .zip-home-search__tab.is-active, .zip-home-search__tab[aria-selected="true"], .zt-sale-products__tab.is-active, .zt-sale-products__tab[aria-selected="true"] { background-color: #FFFFFF !important; border-color: #E3E6E9 !important; color: #333A43 !important; } /* ---------- Тач-цели: ничего меньше 44px по высоте ---------- */ @media (max-width: 1023px) { .zip-home-search__submit, .zip-home-hero__button, .yellow-button, .zt-company-advantages__button, .zt-callback-button, .zt-product-card__cart, .zip-home-search__tab, .zt-sale-products__tab { min-height: 44px !important; } } /* ============================================================ ПАНЕЛЬ «О КОМПАНИИ» — ПО ОБРАЗЦУ «СЕРВИСА» Было: «Сервис» — панель 1527px во всю ширину, сетка из трёх колонок с заголовком, списком ссылок и блоком преимуществ. «О компании» — узкая выпадашка 360px, прижатая вправо, с четырьмя ссылками в столбик. Два разных меню в одной строке. Разметка у них отличается: у «Сервиса» .zt-mega__body с .zt-mega__column, у «О компании» — .zt-company-menu со своим списком. HTML не трогаем, приводим к общему виду стилями: панель во всю ширину, ссылки раскладываются в колонки. ============================================================ */ .zt-header .zt-mega--company, /* N-022/N-062 (06.08.2026): панель «О компании» переведена на структуру и ширину панели «Сервис» — компактные правила старой всплывашки сведены к общей геометрии .zt-mega */ #zt-mega-company { left: 28px !important; right: 28px !important; width: auto !important; max-width: 1992px !important; margin-left: auto !important; margin-right: auto !important; border-radius: 8px !important; } #zt-mega-company .zt-company-menu { display: block !important; padding: 26px 32px 28px !important; } /* Надзаголовок — как .zt-mega__heading у «Сервиса» */ #zt-mega-company .zt-company-menu__eyebrow { margin: 0 0 18px !important; font-size: 16px !important; font-weight: 700 !important; line-height: 1.2 !important; color: #333A43 !important; letter-spacing: 0 !important; text-transform: none !important; } /* Ссылки — в колонки, а не в столбик */ #zt-mega-company .zt-company-menu__links { display: grid !important; grid-template-columns: repeat(4, minmax(0, 1fr)) !important; gap: 10px 32px !important; align-content: start !important; } #zt-mega-company .zt-company-menu__links > a { display: flex !important; align-items: center !important; min-height: 40px !important; padding: 8px 12px !important; border-radius: 8px !important; font-size: 15px !important; font-weight: 500 !important; color: #333A43 !important; text-decoration: none !important; transition: background-color .14s ease, color .14s ease !important; } #zt-mega-company .zt-company-menu__links > a:hover { background-color: #F7F7F5 !important; color: #1A1A1A !important; } @media (max-width: 1200px) { #zt-mega-company .zt-company-menu__links { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } } /* ---------- Добор по кнопкам ---------- После первого прохода осталось три расхождения. */ /* «Найти» была 52px — единственная выше общей высоты */ .zip-home-search__submit, .zip-home-search .zip-home-search__submit { min-height: 48px !important; height: 48px !important; } /* Вторая копия .yellow-button приходила из инлайна формы: 50px/16px/600 */ form .yellow-button, #ziptehLeadModule .yellow-button, .zt-lead-form .yellow-button { min-height: 48px !important; height: auto !important; font-size: 15px !important; font-weight: 700 !important; } /* Стрелки в «Новостях» оставались 44x26 — высота не бралась. Карусель документов исключена: её геометрию (50 px, вертикальное центрирование через margin-top) задаёт home-media-v2.css */ .swiper-button-prev:not(.zt-home-cert-v2__prev), .swiper-button-next:not(.zt-home-cert-v2__next) { height: 44px !important; min-height: 44px !important; margin-top: 0 !important; } /* Текст на «В корзину» — как на остальных жёлтых */ .zt-product-card__cart { color: #1A1A1A !important; -webkit-text-fill-color: #1A1A1A !important; } /* ------------------------------------------------------------ ИСПРАВЛЕНИЕ: кнопка «КАТАЛОГ» вылезала под поиском В системе кнопок я задал display: inline-flex !important — и это перебило display: none, которым кнопка пряталась на узких экранах. На 414px она вернулась и встала третьей строкой сетки под поиском: строки стали 52px 48px 48px, шапка выросла со 129 до 185px. Урок: общее правило оформления не должно решать, видим элемент или нет. Выравнивание — отдельно, показ — отдельно. ------------------------------------------------------------ */ /* Выравнивание содержимого — без управления видимостью */ .zip-home-search__submit, .zip-home-hero__button, .yellow-button, .zt-company-advantages__button, .zt-product-card__cart, .zt-callback-button { align-items: center !important; justify-content: center !important; gap: 10px !important; } .zt-header .zt-catalog-button:not([hidden]) { align-items: center !important; justify-content: center !important; } /* На узких экранах каталог живёт в нижней панели, а не в шапке */ @media (max-width: 767px) { .zt-header .zt-catalog-button, .zt-catalog-button { display: none !important; } } /* ------------------------------------------------------------ БУРГЕР СПРАВА — БЕЗ ПРИВЯЗКИ К НОМЕРУ КОЛОНКИ Было два правила: мобильное (≤767) с сеткой из двух колонок и планшетное (768–1399) с сеткой из четырёх. На стыке они накладывались: при клиентской ширине 752px вьюпорт из-за полосы прокрутки ~768, и срабатывала смесь — каталог прятался мобильным правилом, а колонки брались планшетные. Бургер оказывался слева. grid-column: -2 / -1 означает «последняя колонка», сколько бы их ни было. Одно правило на весь диапазон, стыка больше нет. ------------------------------------------------------------ */ @media (max-width: 1399px) { .zt-header .zt-mobile-trigger { grid-column: -2 / -1 !important; grid-row: 1 !important; justify-self: end !important; align-self: center !important; margin-left: 0 !important; margin-right: 0 !important; order: 99 !important; } .zt-header .zt-header__logo { grid-column: 1 !important; grid-row: 1 !important; justify-self: start !important; margin-left: 0 !important; order: 1 !important; } } /* Мобильные: две колонки, поиск во всю ширину второй строкой */ @media (max-width: 767px) { .zt-header .zt-header__top-inner { grid-template-columns: minmax(0, 1fr) 52px !important; align-items: center !important; } .zt-header .zt-search { grid-column: 1 / -1 !important; grid-row: 2 !important; order: 50 !important; } } /* Планшеты: логотип, каталог, поиск, бургер — одной строкой */ @media (min-width: 768px) and (max-width: 1399px) { .zt-header .zt-header__top-inner { grid-template-columns: auto auto minmax(0, 1fr) 52px !important; align-items: center !important; column-gap: 16px !important; } .zt-header .zt-catalog-button { grid-column: 2 !important; grid-row: 1 !important; order: 2 !important; } .zt-header .zt-search { grid-column: 3 !important; grid-row: 1 !important; order: 3 !important; } } /* ------------------------------------------------------------ БУРГЕР: ПРИЖИМАЕМ К КРАЮ НАПРЯМУЮ В диапазоне 768–1399 бургер стабильно оставался в 72px от края при любой ширине — это 52px последней колонки плюс 20px поля контейнера. Значит justify-self в этой сетке не отрабатывает: элемент занимает колонку целиком, а не прижимается к её краю. Гадать, какое из правил мешает, дороже, чем поставить бургер абсолютно. Он выходит из потока сетки, лишняя колонка схлопывается, положение задаётся однозначно. На мобильных (≤767) сетка работает правильно — 14px от края, там ничего не трогаем. ------------------------------------------------------------ */ @media (min-width: 768px) and (max-width: 1399px) { .zt-header .zt-header__top-inner { position: relative !important; /* последняя колонка больше не нужна — бургер вне потока */ grid-template-columns: auto auto minmax(0, 1fr) !important; padding-right: 76px !important; } .zt-header .zt-mobile-trigger { position: absolute !important; right: 20px !important; top: 50% !important; transform: translateY(-50%) !important; grid-column: auto !important; grid-row: auto !important; margin: 0 !important; z-index: 3 !important; } } /* ------------------------------------------------------------ БУРГЕР: ОДНО ПРАВИЛО НА ВЕСЬ ДИАПАЗОН, БЕЗ СТЫКА После абсолютного позиционирования осталась ровно одна битая ширина — клиентские 752px, то есть вьюпорт ~768. Это точка стыка max-width:767 и min-width:768: из-за дробного значения вьюпорта срабатывала смесь правил, и бургер уезжал на 72px от края при высоте шапки от планшетной раскладки. Ловить дробные пиксели бессмысленно. Убираем стык: абсолютное позиционирование действует на всём диапазоне ≤1399, где бургер вообще есть. Одно правило — нечему разъезжаться. ------------------------------------------------------------ */ @media (max-width: 1399px) { .zt-header .zt-header__top-inner { position: relative !important; padding-right: 76px !important; } .zt-header .zt-mobile-trigger { position: absolute !important; right: 20px !important; top: 26px !important; transform: translateY(-50%) !important; grid-column: auto !important; grid-row: auto !important; margin: 0 !important; z-index: 3 !important; } } /* Планшеты и выше в этом диапазоне — шапка в одну строку, центрируем бургер по её высоте */ @media (min-width: 768px) and (max-width: 1399px) { .zt-header .zt-mobile-trigger { top: 50% !important; } } /* Мобильные: логотип и бургер в первой строке, поиск во второй */ @media (max-width: 767px) { .zt-header .zt-header__top-inner { grid-template-columns: minmax(0, 1fr) !important; padding-right: 70px !important; } .zt-header .zt-mobile-trigger { right: 14px !important; } .zt-header .zt-search { grid-column: 1 / -1 !important; } } /* ------------------------------------------------------------ БУРГЕР: СДЕЛАТЬ ЗАМЕТНЫМ Скриншот показал то, чего не видели замеры: кнопка есть, позиция правильная, три полоски на месте — но она белая (#fff) с рамкой #e6e8eb на белой шапке. На снимке — пустое место. Замер размеров не проверяет, видно ли элемент. Стало заметнее после того, как фон шапки стал сплошным белым: раньше кнопка хоть немного отделялась от серого. Делаем: заливка фирменным жёлтым, тёмные полоски. Контраст полосок на жёлтом ~10:1, кнопка читается сразу. ------------------------------------------------------------ */ @media (max-width: 1399px) { .zt-header .zt-mobile-menu-button { background: var(--zt-yellow, #FFB800) !important; border: 1px solid var(--zt-yellow, #FFB800) !important; border-radius: 8px !important; width: 44px !important; height: 44px !important; } .zt-header .zt-mobile-menu-button span, .zt-header .zt-mobile-menu-button::before, .zt-header .zt-mobile-menu-button::after { background: #1A1A1A !important; height: 2px !important; width: 22px !important; left: 11px !important; border-radius: 2px !important; } .zt-header .zt-mobile-menu-button::before { top: 14px !important; } .zt-header .zt-mobile-menu-button span { top: 21px !important; } .zt-header .zt-mobile-menu-button::after { top: 28px !important; } .zt-header .zt-mobile-menu-button:hover, .zt-header .zt-mobile-menu-button:focus-visible { background: var(--zt-yellow-hover, #E8A600) !important; border-color: var(--zt-yellow-hover, #E8A600) !important; } } /* ------------------------------------------------------------ ШАПКА НИЖЕ 1400 — НА FLEX, БЕЗ АБСОЛЮТА Абсолютное позиционирование бургера решало задачу, но давало два побочных эффекта: элемент не попадал в снимки (absolute внутри fixed) и требовал ручного padding-right у контейнера. Flex надёжнее: margin-left: auto прижимает бургер вправо при любом числе соседей, ничего не надо считать руками и незачем знать номер колонки. ------------------------------------------------------------ */ @media (max-width: 1399px) { .zt-header .zt-header__top-inner { display: flex !important; flex-wrap: wrap !important; align-items: center !important; gap: 12px 16px !important; grid-template-columns: none !important; grid-template-rows: none !important; padding-right: 20px !important; position: relative !important; } .zt-header .zt-header__logo { order: 1 !important; flex: 0 0 auto !important; margin: 0 !important; } .zt-header .zt-catalog-button { order: 2 !important; flex: 0 0 auto !important; } /* Бургер — всегда крайний справа */ .zt-header .zt-mobile-trigger { order: 9 !important; flex: 0 0 auto !important; margin-left: auto !important; position: static !important; right: auto !important; top: auto !important; transform: none !important; } .zt-header .zt-search { order: 5 !important; flex: 1 1 240px !important; min-width: 0 !important; grid-column: auto !important; grid-row: auto !important; } } /* Мобильные: поиск переносится на вторую строку целиком */ @media (max-width: 767px) { .zt-header .zt-search { order: 20 !important; flex: 1 0 100% !important; } .zt-header .zt-header__top-inner { padding-right: 14px !important; padding-left: 14px !important; } } /* ============================================================ АУДИТ ГЛАВНОЙ — ИСПРАВЛЕНИЯ Замеры на стенде 2026-08-04, ширины 1440 и 390. ============================================================ */ /* ------------------------------------------------------------ 1. ВЕРТИКАЛЬНЫЙ РИТМ Было (зазор между секциями): ПК 40, 62, 67, 56, 70, 0, 0 Моб 18, 40, 48, 28, 45, 0, 0 Разброс почти двукратный, а два последних стыка вообще слиплись: «Новости → Лид-форма» и «Лид-форма → Подвал». Трогаем ТОЛЬКО вертикальные отступы. Ширину и поля не касаемся — прошлый раз именно это сломало выравнивание. ------------------------------------------------------------ */ /* Шкала из §9 ТЗ: ПК 80–96, планшет 64–72, мобильный 48–56. Раньше стояло 64 на всех ширинах — на десктопе это ниже нормы, на мобильном выше. Берём нижнюю границу каждого диапазона: страница длинная, лишний воздух её только растягивает. */ .zip-category-strip, .zip-brands, #ztSaleProducts, #ztCompanyAdvantages, #ztHomeMediaV2, #ziptehLeadModule { margin-top: 80px !important; margin-bottom: 0 !important; } .footer-2 { margin-top: 80px !important; } .zip-home-hero { margin-top: 32px !important; margin-bottom: 0 !important; } @media (max-width: 1024px) { .zip-category-strip, .zip-brands, #ztSaleProducts, #ztCompanyAdvantages, #ztHomeMediaV2, #ziptehLeadModule, .footer-2 { margin-top: 64px !important; } .zip-home-hero { margin-top: 24px !important; } } @media (max-width: 767px) { .zip-category-strip, .zip-brands, #ztSaleProducts, #ztCompanyAdvantages, #ztHomeMediaV2, #ziptehLeadModule, .footer-2 { margin-top: 48px !important; } .zip-home-hero { margin-top: 16px !important; } } /* ------------------------------------------------------------ 2. ЗАГОЛОВОК ГЕРОЯ Единственный из восьми выбивался: 41 px вместо 20 на ПК и 30 вместо 14 на мобильном. Это внутренний отступ карточки подбора, а не сдвиг секции. ------------------------------------------------------------ */ .zip-home-hero > .zt-shell > *:first-child, .zip-home-hero__panel, .zip-home-search { padding-left: 0 !important; margin-left: 0 !important; } .zip-home-hero h2 { margin-left: 0 !important; padding-left: 0 !important; } /* ------------------------------------------------------------ 3. ТАЧ-ЦЕЛИ — МИНИМУМ 44px НА СЕНСОРНЫХ ЭКРАНАХ Аудит нашёл 43 элемента меньше 44px: табы 34 px, мобильные кнопки 38 px, ссылки высотой 13 px. 44×44 — минимум, при котором палец попадает надёжно. ------------------------------------------------------------ */ @media (max-width: 1023px) { .zip-category-strip__mobile-all, .zip-category-strip__scroll-btn, .zip-brands__mobile-all, .zip-brands__mobile-arrow, .zt-sale-products__tab, .zip-home-search__tab, .zt-sale-products__arrow, .zip-brands__arrow, [class*="__mobile-all"], [class*="__mobile-arrow"], [class*="__scroll-btn"] { min-height: 44px !important; min-width: 44px !important; } /* Мелкие ссылки в подвале и мете — увеличиваем область нажатия, не раздувая сам текст */ .footer-2 a, #ztHomeMediaV2 a[class*="__more"], section a[class*="__all"] { display: inline-flex !important; align-items: center !important; min-height: 44px !important; } } /* ------------------------------------------------------------ 4. ОБРЕЗКА ТЕКСТА На 390 px обрезался пункт «Оригинальные и сертифицированные запчасти» — не хватало 10 px. Разрешаем перенос вместо обрезки. ------------------------------------------------------------ */ @media (max-width: 767px) { /* Преимущества модуля новостей исключены: ТЗ доработки §6 требует кламп описания в две строки — home-media-v2.css сам управляет обрезкой, это правило её раскрывало */ section [class*="__benefit"]:not(#ztHomeMediaV2 *), section [class*="__advantage"], section li:not(#ztHomeMediaV2 *), .zt-benefit__text, .zt-benefit__title { white-space: normal !important; overflow: visible !important; text-overflow: clip !important; overflow-wrap: anywhere; } } /* ------------------------------------------------------------ 5. СКАЧКИ ВЁРСТКИ ПРИ ЗАГРУЗКЕ 81 изображение из 81 без width/height. Пока размеры не проставлены в шаблонах, резервируем место соотношением сторон — картинка не будет «прыгать» после подгрузки. Это полумера: правильное решение — атрибуты width и height в разметке, но это правка PHP-шаблонов, отдельная задача. ------------------------------------------------------------ */ .zt-product-card__image img, .zip-category-card img, .zip-brands__logo img, .home-news-card img, .home-certificate-card img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: contain; } .home-news-card img { aspect-ratio: 16 / 9; object-fit: cover; } /* ============================================================ ПОМОДУЛЬНЫЕ ИСПРАВЛЕНИЯ Замеры: Вики/05 Аудит/Аудит главной по модулям.md ============================================================ */ /* ------------------------------------------------------------ МОДУЛЬ 1. ТОВАРЫ — самый мелкий текст на странице Замер: 12 элементов по 9 px и 12 по 10 px. Это карточки товара — артикул, наличие, цена. Ровно то, ради чего покупатель пришёл, и оно набрано вдвое мельче основного текста. Плюс карточки разной высоты: название в одну или две строки даёт 34 и 38 px, и нижние края кнопок не совпадают. ------------------------------------------------------------ */ .zt-product-card__article, .zt-product-card__article-mobile, .zt-product-card__brand, .zt-product-card__stock, .zt-product-card__property-label, .zt-product-card__client-price-label, .zt-product-card__added, .zt-product-card__image-label, #ztSaleProducts [class*="__label"], #ztSaleProducts [class*="__meta"], #ztSaleProducts [class*="__article"], #ztSaleProducts [class*="__stock"], #ztSaleProducts [class*="__brand"] { font-size: 12px !important; line-height: 1.35 !important; } #ztSaleProducts .zt-product-card__price, #ztSaleProducts [class*="__price"]:not([class*="label"]) { /* N-097 → N-111: цена ещё заметнее */ font-size: 24px !important; font-weight: 700 !important; line-height: 1.2 !important; } /* N-109: старая цена — в одну строку с основной, справа */ #ztSaleProducts .zt-product-card__prices { flex-direction: row !important; justify-content: flex-end !important; align-items: baseline !important; gap: 8px !important; } #ztSaleProducts .zt-product-card__old-price { margin: 0 !important; font-size: 13px !important; line-height: 1.2 !important; text-decoration: line-through; white-space: nowrap; } /* «Цена по запросу» остаётся компактной и не растёт до 24px (селектор не слабее правила 24px выше: id + два класса) */ #ztSaleProducts .zt-product-card__prices .zt-product-card__price--request, #ztSaleProducts .zt-product-card__price.zt-product-card__price--request { font-size: 13px !important; text-align: right; } /* Карточки одной высоты: название резервирует две строки, кнопка прижимается к низу */ .zt-product-card { display: flex !important; flex-direction: column !important; } .zt-product-card__name { min-height: 2.7em !important; display: -webkit-box !important; -webkit-line-clamp: 2 !important; -webkit-box-orient: vertical !important; overflow: hidden !important; } .zt-product-card__cart, .zt-product-card [class*="__footer"], .zt-product-card [class*="__actions"] { margin-top: auto !important; } /* Раскладку модуля «Новости и сертификаты» задаёт его собственный файл home-media-v2.css: модуль переверстан по отдельному ТЗ от 05.08.2026, старых классов __column и __header в нём нет. */ /* ------------------------------------------------------------ МОДУЛЬ 3. ПОДВАЛ — самый неровный блок страницы Замер: колонки 190, 231, 251, 306 px (разброс 116), высоты 89–266 (разброс 177), промежутки 345, 269, 289, 230. Пять колонок, и ни одна пара не совпадает. ------------------------------------------------------------ */ .footer-2 .zt-shell > .columns, .footer-2 [class*="columns"], .footer-2 > .zt-shell > div:has(> .column) { display: grid !important; grid-template-columns: repeat(5, minmax(0, 1fr)) !important; gap: 32px !important; align-items: start !important; } .footer-2 .column { min-width: 0 !important; width: 100% !important; margin: 0 !important; } @media (max-width: 1023px) { .footer-2 .zt-shell > .columns, .footer-2 [class*="columns"] { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 28px !important; } } @media (max-width: 560px) { .footer-2 .zt-shell > .columns, .footer-2 [class*="columns"] { grid-template-columns: minmax(0, 1fr) !important; gap: 24px !important; } } /* ------------------------------------------------------------ МОДУЛЬ 4. ЛИД-ФОРМА — поля разной высоты Замер: .form-item высоты 93, 139 и 20 px; .zl-normalized-field 52 и 96. Плюс 11 цветов — больше, чем в любом другом модуле. Причина разнобоя известна из [[Формы]]: разметку дорисовывает JavaScript поверх готового DOM. ------------------------------------------------------------ */ #ziptehLeadModule .form-item, #ziptehLeadModule .zl-normalized-field { margin-bottom: 16px !important; } #ziptehLeadModule input[type="text"], #ziptehLeadModule input[type="tel"], #ziptehLeadModule input[type="email"], #ziptehLeadModule select { height: 48px !important; min-height: 48px !important; box-sizing: border-box !important; padding: 0 14px !important; font-size: 15px !important; border-radius: 8px !important; } #ziptehLeadModule textarea { min-height: 96px !important; box-sizing: border-box !important; padding: 12px 14px !important; font-size: 15px !important; border-radius: 8px !important; } #ziptehLeadModule label, #ziptehLeadModule [class*="__label"] { font-size: 13px !important; line-height: 1.3 !important; margin-bottom: 6px !important; display: block !important; } /* Сводим палитру модуля к общей */ #ziptehLeadModule, #ziptehLeadModule p, #ziptehLeadModule li, #ziptehLeadModule span:not([class*="star"]):not([class*="required"]) { color: #333A43 !important; } #ziptehLeadModule [class*="__note"], #ziptehLeadModule [class*="__hint"], #ziptehLeadModule small { color: #6B7480 !important; } /* ------------------------------------------------------------ МОДУЛЬ 5. ГЕРОЙ — правка отменена Замер показал ширины 230 и 238 px у четырёх кнопок, и я выровнял их через width: 100%. Кнопки стали 909 px. Разбор структуры объяснил, почему выравнивать было нечего: кнопки лежат в четырёх РАЗНЫХ слайдах карусели (.zip-home-hero__slide-inner) и никогда не видны одновременно. Разница в 8 px была невидима. Урок: прежде чем выравнивать «неровные повторы», проверять, показываются ли они вместе. Замер видит все элементы разом, посетитель — нет. ------------------------------------------------------------ */ /* ------------------------------------------------------------ МОДУЛЬ 6. ПРЕИМУЩЕСТВА — кегли вне шкалы Замер: 17 px (×4) и 11 px (×1). Общая шкала — 12, 14, 16, 18, 20, 22, 28, 32, 40. ------------------------------------------------------------ */ #ztCompanyAdvantages [class*="__title"] { font-size: 18px !important; font-weight: 600 !important; } #ztCompanyAdvantages [class*="__text"], #ztCompanyAdvantages [class*="__desc"], #ztCompanyAdvantages p { font-size: 16px !important; line-height: 1.55 !important; } #ztCompanyAdvantages [class*="__caption"], #ztCompanyAdvantages [class*="__note"], #ztCompanyAdvantages [class*="__label"] { font-size: 14px !important; } /* ------------------------------------------------------------ ДОБОР ПО МОДУЛЯМ Три правки не сработали, потому что селекторы не совпали с реальной разметкой. Уточнено осмотром DOM. ------------------------------------------------------------ */ /* ПОДВАЛ. Колонки лежат в .zt-shell.footer-2__inner, а не в .columns. Там жёстко заданы пять разных ширин: 305.7 / 230.6 / 250.6 / 190.5 / 250.6 px */ .footer-2 .footer-2__inner, .footer-2 .zt-shell.footer-2__inner { display: grid !important; grid-template-columns: repeat(5, minmax(0, 1fr)) !important; gap: 32px !important; align-items: start !important; } .footer-2 .footer-2__inner > .column { min-width: 0 !important; /* Ширину не задаём. Первая колонка .column.left намеренно занимает всю строку (grid-column: 1 / -1) — там логотип и слоган. Остальные четыре и так по 308px, разброс 0. Две мои попытки «выровнять» (auto, потом 100%) чинили несуществующую проблему: замер сравнивал полноширинную колонку с обычными и считал разницу дефектом. */ margin: 0 !important; } @media (max-width: 1023px) { .footer-2 .footer-2__inner, .footer-2 .zt-shell.footer-2__inner { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 28px !important; } } @media (max-width: 560px) { .footer-2 .footer-2__inner, .footer-2 .zt-shell.footer-2__inner { grid-template-columns: minmax(0, 1fr) !important; gap: 24px !important; } } /* ПРЕИМУЩЕСТВА. 17px — это счётчики «10», «950 000», «5 000», «80». Для главных цифр блока это мелко: они должны читаться первыми. 11px — подпись «лет» рядом с числом. */ #ztCompanyAdvantages .js-zt-company-counter, #ztCompanyAdvantages [class*="counter"] { font-size: 28px !important; font-weight: 700 !important; line-height: 1.1 !important; color: #333A43 !important; } #ztCompanyAdvantages small, #ztCompanyAdvantages [class*="__unit"], #ztCompanyAdvantages [class*="__suffix"] { font-size: 14px !important; color: #6B7480 !important; } @media (max-width: 767px) { #ztCompanyAdvantages .js-zt-company-counter, #ztCompanyAdvantages [class*="counter"] { font-size: 22px !important; } } /* ТОВАРЫ. 9px — бейдж «ХИТ» на карточке. */ .zt-product-card__badge, #ztSaleProducts [class*="__badge"] { font-size: 12px !important; font-weight: 700 !important; line-height: 1.2 !important; padding: 3px 8px !important; border-radius: 6px !important; } /* ============================================================ ПРОГОН ПО ВСЕМ ШИРИНАМ — ОСТАТКИ 7 ширин × 8 модулей. Вылезаний и обрезок нет нигде. Осталось: мелкие кегли и тач-цели. ============================================================ */ /* ПРЕИМУЩЕСТВА. Два элемента по 9px: «+» рядом со счётчиком и подпись «лет». На 1903 они уже 12px, ниже — 9px. */ #ztCompanyAdvantages .zt-company-advantages__metric-plus, #ztCompanyAdvantages [class*="__metric"] span, #ztCompanyAdvantages small { font-size: 14px !important; line-height: 1.2 !important; } /* ТОВАРЫ. На сенсорных ширинах 26 целей меньше 44px: табы 34px, кнопка «ещё» 30×30, мобильная кнопка каталога 38px. */ @media (max-width: 1023px) { #ztSaleProducts .zt-sale-products__tab { min-height: 44px !important; padding: 0 14px !important; } #ztSaleProducts .zt-product-card__more, #ztSaleProducts [class*="__more"] { width: 44px !important; height: 44px !important; min-width: 44px !important; } #ztSaleProducts .zt-sale-products__mobile-catalog, #ztSaleProducts [class*="__mobile-catal"] { min-height: 44px !important; } /* Ссылки-названия и цены в карточке: увеличиваем область нажатия, не меняя кегль текста */ #ztSaleProducts .zt-product-card__name a, #ztSaleProducts .zt-product-card a[class*="__image"] { display: block !important; min-height: 44px !important; } } /* ГЕРОЙ. Три ссылки 37×13, 46×13, 79×13 — примеры артикулов под строкой поиска. Текст оставляем, область нажатия растим. */ @media (max-width: 1023px) { .zip-home-hero .zip-home-search__examples a, .zip-home-hero__examples a, .zip-home-hero a:not([class]) { display: inline-flex !important; align-items: center !important; min-height: 44px !important; padding: 0 4px !important; } } /* КАТЕГОРИИ. Кнопка прокрутки ленты 38×38. */ @media (max-width: 1023px) { .zip-category-strip__scroll-btn, .zip-category-strip [class*="__scroll"] { width: 44px !important; height: 44px !important; min-width: 44px !important; } } /* ЛИД-ФОРМА. Телефон и почта 21px по высоте, ссылка согласия 32px. */ @media (max-width: 1023px) { #ziptehLeadModule .zl-contact__value, #ziptehLeadModule .zl-consent-link { display: inline-flex !important; align-items: center !important; min-height: 44px !important; } } /* ПОДВАЛ. Иконки соцсетей 38×44 — узкие по горизонтали. */ @media (max-width: 1023px) { .footer-2 [class^="social-"], .footer-2 [class*=" social-"] { width: 44px !important; height: 44px !important; min-width: 44px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; } } /* ============================================================ ДОБОР ПО РАЗМЕТКЕ, А НЕ ПО ДОГАДКАМ Осмотр DOM показал: 15 «мелких целей» в товарах — это всего 4 типа элементов, а не 15 разных. И два из трёх моих предыдущих селекторов просто не совпадали с реальными классами. ============================================================ */ /* Табы блока товаров оставались 34px: min-height не перебивает явно заданную height. Нужно снять её вместе с установкой минимума. */ @media (max-width: 1023px) { #ztSaleProducts .zt-sale-products__tab, .zt-sale-products__title-row .zt-sale-products__tab, .zt-sale-products__tabs > * { height: auto !important; min-height: 44px !important; display: inline-flex !important; align-items: center !important; padding: 0 14px !important; } } /* Кнопки в карточке товара. ⚠️ Здесь была моя ошибка. Правило квадратило 44×44 ВСЕ кнопки карточки, чтобы дотянуть иконку 30×30 до тач-цели. Но под тот же селектор попала «В корзину» — кнопка с подписью. Её сжимало до 44 px, а текст «В корзину» шириной 63–78 px вылезал наружу и наезжал на соседнюю карточку. На 390, 768, 920 и 1024 px. Та же ошибка, что с системой кнопок: широкая маска по классу вместо разбора по назначению. Вторая попытка (растянуть ряд кнопок на всю карточку) тоже провалилась: контейнер — flex-элемент внутри `__body`, ширину 100% он не взял, а `flex: 1 1 auto` с `min-width: 0` сжал «В корзину» до 14 px. Стало хуже, чем было. Третья ошибка в том же месте: селектор `[class^="zt-product-card__button"]` ловил и КОНТЕЙНЕР `zt-product-card__buttons` — его имя тоже начинается с «zt-product-card__button». Ряд кнопок ужимался до 44 px, и кнопка внутри снова становилась квадратом. Итог: правило удалено целиком. Кнопка-стрелка `__more`, ради которой оно писалось, убрана из разметки по ТЗ §8.7, а размеры «В корзину» считает собственная раскладка карточки — и считает верно: 110×44 на 390 px, 181×40 на 1440. Урок на будущее: `[class^=...]` и `[class*=...]` по имени блока почти всегда захватывают и контейнер, и элементы внутри него. Проверять список совпадений до, а не после. */ /* Подпись «лет» рядом со счётчиком — 9px. Класс zt-company-advantages__metric-cop…, а не просто span. */ #ztCompanyAdvantages [class*="__metric-cop"], #ztCompanyAdvantages [class*="__metric-"] { font-size: 14px !important; line-height: 1.2 !important; } /* ============================================================ ВЫПОЛНЕНИЕ ТЗ — P0 и критерии приёмки Реестр: Редизайн/Реестр ТЗ — визуальная переработка главной.md ============================================================ */ /* ------------------------------------------------------------ ТЗ P0-5 / критерий 12. РЕКЛАМНЫЙ РАСТР ВМЕСТО ФОТО ТОВАРА Замер: на 12 карточках всего 2 уникальных изображения — c79c3kq4tn43rcwt3zz3w71z2xilkbe5.jpg и 4ziinx151auz9aqegxadaywaj6uq5f5l.jpeg. Это баннер «ТОВАР НА ФОТОСЕССИИ» — рекламный растр с текстом. ТЗ §8.7: «placeholder не должен выглядеть как рекламный баннер». Подменяем на нейтральный SVG. Это временная мера до появления реальных фото (вопрос В-6). Правильное решение — подмена файлов в медиабиблиотеке или логика «нет фото → placeholder» на стороне шаблона. ------------------------------------------------------------ */ /* Подмена через content: работает для замещаемых элементов и не оставляет пустое место, в отличие от opacity + :has(), который в этой сборке браузера не сработал — карточки становились пустыми. */ .zt-product-card img[src*="c79c3kq4tn43rcwt3zz3w71z2xilkbe5"], .zt-product-card img[src*="4ziinx151auz9aqegxadaywaj6uq5f5l"] { content: url("/local/templates/zipteh/assets/images/product-placeholder.svg") !important; object-fit: contain !important; background: #F6F7F8 !important; width: 100% !important; height: 100% !important; } /* ------------------------------------------------------------ ТЗ критерий 15. ЛОГОТИПЫ БРЕНДОВ В ОДНОЙ ОПТИЧЕСКОЙ ОБЛАСТИ Замер: две области — 20×20 и 189×90. Логотипы разного формата подаются в разных боксах. ТЗ §8.6: «логотипы поместить в одинаковый optical box», «использовать object-fit: contain». ------------------------------------------------------------ */ .zip-brands [class*="__logo"], .zip-brands__item [class*="logo"] { display: flex !important; align-items: center !important; justify-content: center !important; width: 100% !important; height: 90px !important; padding: 12px 16px !important; box-sizing: border-box !important; } .zip-brands [class*="__logo"] img, .zip-brands__item img { max-width: 100% !important; max-height: 100% !important; width: auto !important; height: auto !important; object-fit: contain !important; } @media (max-width: 767px) { .zip-brands [class*="__logo"], .zip-brands__item [class*="logo"] { height: 72px !important; } } /* ------------------------------------------------------------ ТЗ P0-4 / критерий 20. СЛУЖЕБНАЯ ПЛАШКА НЕ ПЕРЕКРЫВАЕТ ПАНЕЛЬ На скриншоте плашка «СТЕНД — не боевой сайт» лежала поверх подписей «Каталог» и «Поиск» нижней панели. ТЗ §8.14: «разместить выше панели, не перекрывать навигацию, не менять её содержание». ------------------------------------------------------------ */ #zt-stand-badge { bottom: calc(64px + env(safe-area-inset-bottom, 0px)) !important; z-index: 9989 !important; } @media (min-width: 1400px) { #zt-stand-badge { bottom: 0 !important; } } /* ------------------------------------------------------------ ТЗ P2-1 / критерии 9 и 22. СОСТОЯНИЯ КНОПОК Было только hover. ТЗ §7.1 требует шесть состояний: default, hover, active, focus-visible, disabled, loading. ------------------------------------------------------------ */ .zip-home-search__submit, .zip-home-hero__button, .yellow-button, .zt-company-advantages__button, .zt-catalog-button, .zt-callback-button, .zt-product-card__cart, .zip-home-search__tab, .zt-sale-products__tab, .zt-bottombar__item, .zt-mobile-menu-button { transition: background-color .18s ease, border-color .18s ease, color .18s ease, transform .12s ease !important; } /* active / pressed */ .zip-home-search__submit:active, .zip-home-hero__button:active, .yellow-button:active, .zt-company-advantages__button:active, .zt-catalog-button:active, .zt-callback-button:active, .zt-product-card__cart:active { transform: scale(.985) !important; } /* focus-visible вынесен ниже, в блок «Фокус с клавиатуры» — там он перебивает 18 правил outline:none из старых файлов. Здесь дубля нет. */ /* disabled */ button:disabled, .is-disabled, [aria-disabled="true"] { opacity: .5 !important; cursor: not-allowed !important; pointer-events: none !important; } /* loading — кнопка не меняет ширину, повторная отправка блокируется */ .is-loading, [data-loading="true"] { position: relative !important; pointer-events: none !important; color: transparent !important; -webkit-text-fill-color: transparent !important; } .is-loading::after, [data-loading="true"]::after { content: "" !important; position: absolute !important; top: 50% !important; left: 50% !important; width: 18px !important; height: 18px !important; margin: -9px 0 0 -9px !important; border: 2px solid currentColor !important; border-top-color: transparent !important; border-radius: 50% !important; color: #1A1A1A !important; animation: zt-spin .7s linear infinite !important; } @keyframes zt-spin { to { transform: rotate(360deg); } } /* ТЗ §10.3: при prefers-reduced-motion отключаем необязательные движения */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; } .is-loading::after, [data-loading="true"]::after { animation: none !important; border-top-color: currentColor !important; } } /* ------------------------------------------------------------ ТЗ критерий 22 / доступность §11.4. FOCUS-VISIBLE ВИДИМ Замер: outline-style приходил как none. Обводку гасят 9 правил в живых файлах, из них 3 с !important: header-nav-v28.css:130 outline: none !important feedback-form.php:334 outline: none !important feedback-form.php:450 outline: none !important плюс outline: none/0 в header-commerce, header-new, header-polish, hero-combo. Ставим обводку с той же силой и позже по порядку. Важно: гасим только для мыши (:focus:not(:focus-visible)), а клавиатурный фокус оставляем видимым — это и есть смысл разделения :focus и :focus-visible. ------------------------------------------------------------ */ :where(a, button, input, select, textarea, summary, [tabindex]):focus-visible, .zt-header a:focus-visible, .zt-header button:focus-visible, #ziptehLeadModule input:focus-visible, #ziptehLeadModule textarea:focus-visible, #ziptehLeadModule button:focus-visible, .zt-bottombar a:focus-visible, .zt-bottombar button:focus-visible, .footer-2 a:focus-visible { outline: 3px solid #1A6FD4 !important; outline-offset: 2px !important; outline-style: solid !important; } /* На жёлтом синий теряется — тёмная обводка */ .zip-home-search__submit:focus-visible, .zip-home-hero__button:focus-visible, .yellow-button:focus-visible, .zt-company-advantages__button:focus-visible, .zt-catalog-button:focus-visible, .zt-product-card__cart:focus-visible, .zt-mobile-menu-button:focus-visible { outline: 3px solid #1A1A1A !important; outline-offset: 3px !important; outline-style: solid !important; } /* Мышиный фокус не подсвечиваем — только клавиатурный */ :where(a, button, input, select, textarea):focus:not(:focus-visible) { outline: none !important; } /* ================================================================== Состояния формы (ТЗ §5, критерий 10) Было: только hover. Отправка ничем не отличалась от простоя, ошибка выводилась серым абзацем без роли, невалидное поле не отличалось от валидного. ================================================================== */ /* --- Отправляется --- Курсор прописан и через #ziptehLeadModule: базовое правило кнопки в feedback-form.php выше по специфичности и возвращало pointer. */ .yellow-button.is-loading, #ziptehLeadModule .zl-form-component .yellow-button.is-loading, #ziptehLeadModule .yellow-button.is-loading, #form_callback .yellow-button.is-loading, .form-area .yellow-button.is-loading { position: relative !important; cursor: progress !important; opacity: .82 !important; } #ziptehLeadModule .zl-form-component .yellow-button:disabled, #ziptehLeadModule .yellow-button:disabled, #form_callback .yellow-button:disabled, .form-area .yellow-button:disabled, .form-area .yellow-button[aria-disabled="true"] { cursor: not-allowed !important; } .yellow-button.is-loading .icon-area { opacity: 0 !important; } .yellow-button.is-loading::after { content: "" !important; position: absolute !important; top: 50% !important; right: 16px !important; width: 16px !important; height: 16px !important; margin-top: -8px !important; border: 2px solid rgba(26, 26, 26, .28) !important; border-top-color: #1A1A1A !important; border-radius: 50% !important; animation: zt-spin .7s linear infinite !important; } @keyframes zt-spin { to { transform: rotate(360deg); } } @media (prefers-reduced-motion: reduce) { .yellow-button.is-loading::after { animation-duration: 2.4s !important; } } /* --- Заблокирована --- */ .yellow-button:disabled, .yellow-button[disabled], .yellow-button[aria-disabled="true"] { opacity: .45 !important; cursor: not-allowed !important; box-shadow: none !important; filter: grayscale(.35) !important; } .yellow-button:disabled:hover, .yellow-button[disabled]:hover { transform: none !important; } /* --- Невалидное поле --- :user-invalid, а не :invalid: последний срабатывает на пустом обязательном поле сразу при загрузке и красит форму до того, как посетитель что-либо ввёл. */ #ziptehLeadModule input:user-invalid, #ziptehLeadModule textarea:user-invalid, #ziptehLeadModule [aria-invalid="true"], .form-area input:user-invalid, .form-area textarea:user-invalid, .form-area [aria-invalid="true"] { border-color: #C8322B !important; background-color: #FEF6F5 !important; box-shadow: 0 0 0 3px rgba(200, 50, 43, .12) !important; } /* Зелёной рамки у заполненного поля намеренно нет: она добавляла на страницу ещё один цвет ради состояния, которое и так очевидно. */ /* --- Ошибка сервера --- */ .form-area .errortext, #ziptehLeadModule .errortext { display: block !important; margin: 0 0 14px !important; padding: 12px 14px 12px 40px !important; position: relative !important; border: 1px solid #E7B0AC !important; border-radius: 12px !important; background: #FEF3F2 !important; color: #8E241E !important; font-size: 14px !important; line-height: 1.45 !important; } .form-area .errortext::before, #ziptehLeadModule .errortext::before { content: "!" !important; position: absolute !important; top: 12px !important; left: 14px !important; width: 18px !important; height: 18px !important; border-radius: 50% !important; background: #C8322B !important; color: #fff !important; font-size: 12px !important; font-weight: 700 !important; line-height: 18px !important; text-align: center !important; } /* --- Успех --- */ .zt-form-note { padding: 18px 18px 18px 52px !important; position: relative !important; border: 1px solid #B7DFC6 !important; border-radius: 14px !important; background: #F2FAF5 !important; color: #1F5B38 !important; } .zt-form-note::before { content: "" !important; position: absolute !important; top: 20px !important; left: 18px !important; width: 20px !important; height: 20px !important; border-radius: 50% !important; background: #2E7D4F !important; } .zt-form-note::after { content: "" !important; position: absolute !important; top: 26px !important; left: 24px !important; width: 8px !important; height: 4px !important; border-left: 2px solid #fff !important; border-bottom: 2px solid #fff !important; transform: rotate(-45deg) !important; } .zt-form-note .style_h2 { margin: 0 0 4px !important; color: #1F5B38 !important; } .zt-form-note:focus { outline: none !important; } .zt-form-note:focus-visible { outline: 3px solid #2E7D4F !important; outline-offset: 2px !important; } /* ================================================================== Резерв места под изображения (ТЗ §7.5 «закрепить aspect ratio на уровне контейнера») Товары, категории, бренды и новости место уже держат — у них либо фиксированная высота, либо aspect-ratio. Оставались два блока, где контейнер схлопывался до высоты картинки и после загрузки страница дёргалась. ================================================================== */ /* Фото в «Преимуществах»: figure повторяла высоту картинки (227,663 px и там, и там) — до загрузки высота была нулевой */ #ztCompanyAdvantages .zt-company-advantages__photo { aspect-ratio: 16 / 9 !important; overflow: hidden !important; } #ztCompanyAdvantages .zt-company-advantages__photo img { width: 100% !important; height: 100% !important; object-fit: cover !important; } /* Запасная картинка вместо битой ссылки (ТЗ §7.5 «предусмотреть fallback при ошибке загрузки») */ img.zt-image-failed { content: url("/local/templates/zipteh/assets/images/product-placeholder.svg") !important; object-fit: contain !important; background: #F6F7F8 !important; } /* Логотип. Разметка шапки приходит из включаемого файла, который в наш комплект не входит, поэтому пропорцию задаём стилем — для резерва места это равнозначно атрибутам width/height. */ .zt-header__logo img, .zt-mobile-drawer__logo img, #ziptehSiteFooter .logo img { aspect-ratio: 1024 / 203 !important; height: auto !important; object-fit: contain !important; } /* ================================================================== Тач-цели каруселей и логотипа (ТЗ, критерий 21 — не меньше 44×44) Точки перелистывания — 4×4 и 18×3 px. Попасть пальцем нельзя, а промах по точке листает слайд. Увеличиваем зону нажатия прозрачным слоем, сама точка остаётся прежнего размера: визуально ничего не меняется. ================================================================== */ .swiper-pagination-bullet { position: relative !important; } .swiper-pagination-bullet::after { content: "" !important; position: absolute !important; top: 50% !important; left: 50% !important; width: 44px !important; height: 44px !important; transform: translate(-50%, -50%) !important; background: transparent !important; border: 0 !important; border-radius: 50% !important; } /* Точки лежат вплотную — при зоне 44 px соседние зоны наложатся друг на друга, и палец будет попадать не туда. Шаг между центрами должен быть не меньше ширины зоны, поэтому 20 px с каждой стороны: 4 px точка + 40 px полей = шаг 44. */ /* Карусель документов исключена: ТЗ доработки §5.5 требует компактную пагинацию без больших промежутков — поля задаёт home-media-v2.css */ .swiper-pagination-bullets .swiper-pagination-bullet:not(#ztHomeMediaV2 *), .swiper-pagination .swiper-pagination-bullet:not(#ztHomeMediaV2 *), /* Модули задают свои поля инлайном в body — там правило с такой же специфичностью выигрывает по порядку. Поэтому селекторы длиннее. */ .zip-home-hero__swiper .swiper-pagination .swiper-pagination-bullet, .zip-home-hero__swiper .swiper-pagination-bullets .swiper-pagination-bullet, #ztSaleProducts .swiper-pagination .swiper-pagination-bullet { margin-right: 20px !important; margin-left: 20px !important; } @media (min-width: 1025px) { /* На мыши зона в 44 px не нужна, а промежутки лишние */ .swiper-pagination-bullet::after { width: 24px !important; height: 24px !important; } .swiper-pagination-bullets .swiper-pagination-bullet:not(#ztHomeMediaV2 *) { margin-right: 6px !important; margin-left: 6px !important; } } /* Ссылка-логотип была 180×36 — не дотягивала по высоте. Размер самой картинки не трогаем, растёт только зона нажатия. */ @media (max-width: 1024px) { .zt-header__logo { display: inline-flex !important; align-items: center !important; min-height: 44px !important; } } /* ================================================================== Текст, скрытый визуально, но доступный (ТЗ §11 п.12) Заголовки баннеров героя вшиты в растр. Пока нет картинок без надписей, тот же текст лежит в разметке этим классом: экранный диктор и поисковик его читают, глазами он не виден и вёрстку не двигает. clip-path вместо display:none намеренно — скрытое через display содержимое скринридер не озвучивает. ================================================================== */ .zt-visually-hidden { position: absolute !important; width: 1px !important; height: 1px !important; margin: -1px !important; padding: 0 !important; overflow: hidden !important; clip: rect(0 0 0 0) !important; clip-path: inset(50%) !important; white-space: nowrap !important; border: 0 !important; } /* Если посетитель дойдёт до ссылки внутри такого блока клавиатурой, блок должен стать видимым — иначе фокус уедет «в никуда». */ .zt-visually-hidden:focus-within { position: static !important; width: auto !important; height: auto !important; margin: 0 !important; overflow: visible !important; clip: auto !important; clip-path: none !important; white-space: normal !important; } /* ================================================================== Шкала теней (ТЗ, критерий 7 — «тени в общей системе») На странице насчитывалось 14 разных теней, в исходниках — 60 объявлений. Разница между многими из них на глаз не видна: .045 против .05 против .055 при одинаковом размытии. Четыре уровня по назначению. Ниже по файлам near-дубли заменены на эти переменные; тени с иным направлением (боковая у выдвижного меню) оставлены как есть — они решают другую задачу. ================================================================== */ :root { /* приподнятый элемент: кнопка, таб */ --zt-shadow-1: var(--zt-shadow-1); /* карточка в покое */ --zt-shadow-2: 0 8px 24px rgba(29, 34, 40, .06); /* оторванный от страницы слой: модалка, выпадающее меню */ --zt-shadow-3: 0 24px 70px rgba(17, 24, 32, .22); /* акцентная жёлтая кнопка */ --zt-shadow-accent: 0 12px 28px rgba(255, 184, 0, .24); /* она же под курсором — заметно выше, иначе наведение не читается */ --zt-shadow-accent-hover: 0 16px 32px rgba(255, 184, 0, .28); } /* ================================================================== Тач-цели каталога и карточки товара ТЗ описывает главную, но файлы стилей общие, и на каталоге — главной странице покупки — на 390 px было 82 элемента мельче 44×44: сердечко избранного 40×40, кнопки количества 32×42, страницы пагинации 17×16. Приём тот же, что на главной: зону нажатия расширяет прозрачный слой, видимый размер элемента не меняется. ================================================================== */ @media (max-width: 1024px) { .poisk-product__favorite, .poisk-product__quantity-button, .poisk-filters__close, .main-ui-pagination-page, .main-ui-pagination-arrow { position: relative !important; } .poisk-product__favorite::after, .poisk-product__quantity-button::after, .poisk-filters__close::after, .main-ui-pagination-page::after, .main-ui-pagination-arrow::after { content: "" !important; position: absolute !important; top: 50% !important; left: 50% !important; width: 44px !important; height: 44px !important; transform: translate(-50%, -50%) !important; background: transparent !important; border: 0 !important; } /* Пагинация Битрикса — цифры 17×16 стоят вплотную. Разводим, иначе зоны нажатия наложатся друг на друга. */ .main-ui-pagination-page, .main-ui-pagination-arrow { margin-right: 14px !important; margin-left: 14px !important; } /* Кнопки с подписью: высоту добираем полями, ширина уже достаточна */ .poisk-results__filter-toggle, .poisk-filters__reset, .poisk-filters__apply { min-height: 44px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; } } /* Контакты: телефон и почта — это то, ради чего страницу открывают с мобильного. Ссылки были 287×18 — тонкая полоска в один текстовый ряд. Здесь расширяем не зоной, а реальными полями: элементы блочные и стоят по одному в строке, layout не ломается. */ @media (max-width: 1024px) { .zt-contact-card dd > a, .zt-contacts dd > a, dd > a[href^="tel:"], dd > a[href^="mailto:"] { display: inline-flex !important; align-items: center !important; min-height: 44px !important; } .zt-contact-card__route, .zt-region-tab { min-height: 44px !important; } } /* ================================================================== Общий контейнер (ТЗ §6.3) Требование ТЗ: на 1440 px контент — 1320 px, внешние поля ~60 px; на 1280 — поля не меньше 32–40; планшет 24; мобильный 16. Было: `.zt-shell` с `max-width: 2048px` и полями 28/20/14 — на 1440 контент растягивался на 1383 px, то есть почти во всю ширину экрана. Длинные строки текста читаются хуже, а сетка карточек расползается. ТЗ §6.3 отдельно требует: «если в проекте уже есть общий контейнер, скорректировать его, а не создавать второй конкурирующий класс». Поэтому правим `.zt-shell`, новый класс не заводим. ⚠️ На каталоге и в карточке товара есть ВТОРОЙ контейнер `.container` из темы 2019 года: 1200 px со стартом на x=112, тогда как шапка начиналась на x=20. Они и раньше не совпадали. После этой правки расхождение уменьшается со 183 до 120 px, но полностью уйдёт только вместе с переработкой каталога — это вне рамок ТЗ на главную. ================================================================== */ :root { /* Исходные значения сайта: max-width 2048 и поля 28/20/14. ТЗ §6.3 предлагало контент 1320 px, но по решению заказчика (06.08.2026) ширина возвращена к исходной — на 1320 сайт выглядел заметно уже. Выравнивание по одной оси сохранено: все обёртки модулей берут эти же токены. */ --container-max: 1992px; --page-gutter: 28px; } @media (max-width: 1480px) { :root { --page-gutter: 20px; } } @media (max-width: 680px) { :root { --page-gutter: 14px; } } .zt-shell { width: 100% !important; max-width: calc(var(--container-max) + 2 * var(--page-gutter)) !important; margin-right: auto !important; margin-left: auto !important; padding-right: var(--page-gutter) !important; padding-left: var(--page-gutter) !important; } /* Полноширинные секции держат свой фон во всю ширину, но их внутренние обёртки обязаны идти по той же оси (ТЗ §6.3). Селекторы намеренно длинные. Каждый модуль задаёт своей обёртке `max-width: 2048px` правилом вида `#ztSaleProducts .zt-sale-products__shell` — это 1 идентификатор + 1 класс. При такой же специфичности выигрывает тот файл, который подключён позже, а стили модулей лежат в и грузятся после нашего. Поэтому добавлен второй класс — специфичность становится выше, и порядок уже не решает. */ #ziptehSiteFooter > .zt-shell.footer-2__inner, #ziptehSiteFooter .zt-shell.footer-2__copyright-inner, #ztSaleProducts .zt-shell.zt-sale-products__shell, #ztHomeMediaV2 .zt-shell.zt-home-media-v2__inner, #ziptehLeadModule .zt-shell.zl-shell, /* .zl-inner намеренно НЕ здесь: он лежит внутри .zl-shell, который отступ уже получил, и поле удваивалось (292 → 352). */ .zt-header .zt-shell, .zt-header__top .zt-shell, .zt-header__bottom .zt-shell { width: 100% !important; max-width: calc(var(--container-max) + 2 * var(--page-gutter)) !important; margin-right: auto !important; margin-left: auto !important; padding-right: var(--page-gutter) !important; padding-left: var(--page-gutter) !important; } /* Карточки товара в карусели — одинаковая высота (ТЗ, критерий 13). На ПК разброс был 0, а на мобильном 81 px: 304 / 323 / 385. Swiper задаёт слайдам высоту по содержимому, и рядом стояли карточки разной длины. Растягиваем слайд и карточку на всю высоту строки — тогда нижние края цены и кнопки совпадают. Тонкость: карточка САМА является слайдом — у неё сразу два класса, `swiper-slide zt-product-card`. Селектор вида `.swiper-slide > .zt-product-card` не совпадает ни с чем. */ #ztSaleProducts .zt-sale-products__slider .swiper-wrapper, #ztSaleProducts .swiper .swiper-wrapper { align-items: stretch !important; } #ztSaleProducts .zt-sale-products__slider .swiper-slide, #ztSaleProducts .swiper-slide.zt-product-card { height: auto !important; align-self: stretch !important; } /* ================================================================== Заголовки секций — вторая попытка (ТЗ §6.6, критерий 29) Первый заход целился в `#ztHomeMediaV2 h2` — специфичность (1,0,1). Модули задают свои заголовки классом: `#ztHomeMediaV2 .zt-home-media-v2__heading` — (1,1,0), и грузятся из . Правило не срабатывало, а я записал пункт как сделанный, потому что замерил только три секции из семи. Замер после перепроверки (1440 px): Категории 32 · Бренды 32 · Популярные 32 — в шкале О компании 18/600 — вне Новости и статьи 14 — вне, мельче текста Сертификаты 14 — вне, мельче текста Заголовок «Новости и статьи» был 14 px при основном тексте 16 — он не читался как заголовок вообще. Селекторы ниже включают класс самой секции: (1,2,0) против (1,1,0) у модулей — порядок загрузки больше не решает. ================================================================== */ #ztHomeMediaV2.zt-home-media-v2 .zt-home-media-v2__heading, #ztCompanyAdvantages .zt-company-advantages__surface .zt-company-advantages__title, #ztCompanyAdvantages .zt-company-advantages__copy .zt-company-advantages__title { font-size: var(--zt-h2-size) !important; font-weight: 700 !important; line-height: 1.2 !important; color: var(--zt-ink) !important; letter-spacing: -0.01em !important; } @media (max-width: 1023px) { #ztHomeMediaV2.zt-home-media-v2 .zt-home-media-v2__heading, #ztCompanyAdvantages .zt-company-advantages__surface .zt-company-advantages__title, #ztCompanyAdvantages .zt-company-advantages__copy .zt-company-advantages__title { font-size: var(--zt-h2-size-md) !important; } } @media (max-width: 640px) { #ztHomeMediaV2.zt-home-media-v2 .zt-home-media-v2__heading, #ztCompanyAdvantages .zt-company-advantages__surface .zt-company-advantages__title, #ztCompanyAdvantages .zt-company-advantages__copy .zt-company-advantages__title { font-size: var(--zt-h2-size-sm) !important; } } /* Заголовок лид-блока намеренно на ступень крупнее: это призыв к действию в конце страницы, а не рядовая секция. 40 / 36 / 28 против 32 / 28 / 22 — соотношение выдержано, шкала одна. */ /* Ступени шкалы заголовков. Переопределяем сам токен — тогда правила модулей, написанные через var(--zt-h2-size), меняются автоматически и медиазапрос не нужно повторять в каждом файле. */ @media (max-width: 1023px) { :root { --zt-h2-size: 28px; --zt-h3-size: 18px; } } @media (max-width: 640px) { :root { --zt-h2-size: 22px; --zt-h3-size: 16px; } } /* Карточки преимуществ — одинаковая высота в ряду (ТЗ §8.9: «карточки не должны иметь случайно разную высоту без выравнивания контента»). Раньше высота держалась жёстким `height: 88px` у первых четырёх, а текст обрезался многоточием — ТЗ это запрещает. Многоточие снято, высоту теперь выравнивает сетка: строка тянется по самой высокой карточке, а карточка занимает строку целиком. */ #ztCompanyAdvantages .zt-company-advantages__benefit-grid { align-items: stretch !important; } #ztCompanyAdvantages .zt-company-advantages__benefit-grid > .zt-company-advantages__benefit { height: 100% !important; min-height: 0 !important; display: flex !important; flex-direction: column !important; } /* ================================================================== Карусели до инициализации (FOUC) Swiper раскладывает слайды скриптом. До этого момента браузер рисует их так, как они лежат в разметке: все подряд в строку. На главной это выглядит как «страница поехала» — в баннере видно сразу два слайда с обрезанным текстом, второй уходит за край. Промежуток небольшой, но он есть на каждой загрузке, и именно его поймал скриншот. Пока у контейнера нет класса `swiper-initialized`, показываем только первый слайд. ================================================================== */ .swiper:not(.swiper-initialized) { overflow: hidden !important; } .swiper:not(.swiper-initialized) > .swiper-wrapper { display: flex !important; flex-wrap: nowrap !important; transform: none !important; } .swiper:not(.swiper-initialized) > .swiper-wrapper > .swiper-slide { flex: 0 0 100% !important; width: 100% !important; max-width: 100% !important; } /* Второй и дальше не показываем: их место займёт Swiper */ .swiper:not(.swiper-initialized) > .swiper-wrapper > .swiper-slide:not(:first-child) { visibility: hidden !important; } /* Стрелки и точки до инициализации ещё не работают — не показываем, иначе по ним можно нажать вхолостую. */ .swiper:not(.swiper-initialized) .swiper-button-prev, .swiper:not(.swiper-initialized) .swiper-button-next, .swiper:not(.swiper-initialized) .swiper-pagination { opacity: 0 !important; pointer-events: none !important; } .swiper.swiper-initialized .swiper-button-prev, .swiper.swiper-initialized .swiper-button-next, .swiper.swiper-initialized .swiper-pagination { transition: opacity .2s ease; } /* Контролы карусели не должны перехватывать клики (ТЗ §8.3: «контролы карусели не перекрывают текст и CTA»). Замер: контейнер `.swiper-pagination` растянут во всю ширину слайдера, `z-index: 10` против 5 у кнопки, и накрывает нижние 15 px кнопки «Подобрать запчасти» на 230 px по горизонтали. Сами точки при этом далеко — на x 935–1167, кнопка 659–889. То есть клик пропадал на пустом месте контейнера. Контейнер делаем прозрачным для мыши, точки — кликабельными. */ .swiper-pagination { pointer-events: none !important; } .swiper-pagination .swiper-pagination-bullet { pointer-events: auto !important; } /* ================================================================== Верхняя строка шапки — гибкие колонки (ТЗ §8.1) ⚠️ Регрессия от перехода на контейнер 1320 px. `header-polish.css` при ≥1600 задаёт строку жёстко: 274px 250px minmax(320px, 1fr) 300px 70px 180px, gap 24 Минимум такой сетки — 1514 px (1394 треков + 120 зазоров). Контейнер после §6.3 даёт 1320. Grid с фиксированными треками не сжимается: кнопка «ЗАКАЗ» вылезала на 194 px за контейнер и на 30 px за край экрана — её было видно обрезанной. Замер до правки на 1648: строка 104…1544, кнопка 1498…1678. ТЗ §8.1 прямо говорит: «поиск должен занимать доступное свободное пространство через flex: 1 1 auto и min-width: 0». Делаем именно так: все треки по содержимому, поиск забирает остаток и умеет сжиматься до нуля. ================================================================== */ @media (min-width: 1400px) { .zt-header .zt-header__top-inner { grid-template-columns: auto auto minmax(0, 1fr) auto auto auto !important; gap: 20px !important; align-items: center !important; } /* Поиск обязан уметь сжиматься, иначе 1fr не спасёт */ .zt-header .zt-search { min-width: 0 !important; width: auto !important; } /* Остальные — по содержимому, без фиксированной ширины */ .zt-header .zt-header__logo, .zt-header .zt-catalog-button, .zt-header .zt-contact, .zt-header .zt-max-button, .zt-header .zt-callback-button { width: auto !important; min-width: 0 !important; } /* Логотип не должен растягиваться сверх своей пропорции */ .zt-header .zt-header__logo { max-width: 264px !important; } } /* Меню помещается целиком (ТЗ, критерий 3 «ничего не обрезается»). Замер на 1663: пункту «Контакты» нужно 153 px, доставалось 92 — не хватало 61. Список режет по `overflow: hidden`, поэтому обрезка не ловилась проверкой самого пункта: у ссылки overflow: visible, её scrollWidth равен clientWidth. Полоса 1400–1780 самая тесная: контейнер уже 1320, а пунктов девять. Снижаем кегль на одну ступень — 14 вместо 15. Это даёт около 70 px и не требует резать подписи. */ @media (min-width: 1400px) and (max-width: 1780px) { .zt-header .zt-nav__link, .zt-header .zt-nav__trigger { font-size: 14px !important; /* 3 px, а не 5: последнему пункту «Контакты» не хватало 2 px и его резало по краю списка (overflow: hidden). */ padding-left: 3px !important; padding-right: 3px !important; gap: 6px !important; } .zt-header .zt-nav__list { column-gap: 8px !important; } .zt-header .zt-nav__icon { width: 17px !important; height: 17px !important; flex: 0 0 17px !important; } } /* ≥1781: кегль 15 сохраняем, добираем место зазором. Замер: «Контакты» выходили за край списка на 7 px. */ @media (min-width: 1781px) { .zt-header .zt-nav__list { column-gap: 12px !important; } .zt-header .zt-nav__link, .zt-header .zt-nav__trigger { padding-left: 5px !important; padding-right: 5px !important; } } /* Последние 8 px для пункта «Контакты». Уменьшать поля пунктов бесполезно: список — flex с фиксированной шириной, освободившееся место он раздаёт всем пунктам, и последний всё равно не добирает. Место надо именно освободить. Берём его у иконок пунктов: 9 иконок × 2 px ширины + 9 × 1 px зазора = 27 px. Иконка 15 px против 17 читается так же. 06.08.2026 (правка N-001): экономия ограничена тесной полосой 1400–1780 — раньше 15 px действовали и на широких экранах. */ @media (min-width: 1400px) and (max-width: 1780px) { .zt-header .zt-nav__icon { width: 15px !important; height: 15px !important; flex: 0 0 15px !important; } .zt-header .zt-nav__link, .zt-header .zt-nav__trigger { gap: 5px !important; } } /* N-001 → N-043…N-052: на широких экранах иконки пунктов ещё крупнее — заказчик попросил 1,25× от прежних 18 */ @media (min-width: 1781px) { .zt-header .zt-nav__icon { width: 22px !important; height: 22px !important; flex: 0 0 22px !important; } } /* Список не должен резать подписи: если места вдруг не хватит, пусть лучше будет видно, что пункт не поместился, чем молча обрезанное слово. */ @media (min-width: 1400px) { .zt-header .zt-nav__list { overflow: visible !important; } } /* ================================================================== Шкала кнопок (П-3 аудита типографики, согласовано 06.08.2026) Три роли: главная 15/700, вторичная 14/600, вкладка 14/600. Правило П-1 (наследование) покрывает span без класса; здесь — кнопки, у которых подпись лежит в span С классом, и кнопки, на которых шрифт вообще не был задан (их текст брал 16/400 из reset). Подписи наследуют кнопку явно. ================================================================== */ /* --- Главные (15/700): жёлтые кнопки действий --- .zip-home-mini__more перенесена сюда из вторичных 06.08.2026 по правке заказчика N-009 («шрифт не как везде на кнопках») */ html body .zip-brands .zip-brands__all, .zip-home-search__submit, .zip-home-hero .zip-home-mini__more { font-size: 15px !important; font-weight: 700 !important; } /* --- Вторичные (14/600) --- */ #ztSaleProducts .zt-sale-products__catalog-link, #ztSaleProducts.zt-sale-products .zt-product-card__cart, #ztCompanyAdvantages .zt-company-advantages__button { font-size: 14px !important; font-weight: 600 !important; } /* Подписи в span с классом наследуют кнопку */ .zt-product-card__cart .zt-product-card__cart-label, .zt-product-card__cart .zt-product-card__cart-success, .zip-home-mini__more .zip-home-mini__more-text, .zip-home-mini__more [class*="more-text"], .zip-home-search__submit [class*="submit-text"], .zt-company-advantages__button span, .zip-brands__all span { font-size: inherit !important; font-weight: inherit !important; letter-spacing: inherit !important; } /* П-4: бейджи капсом через CSS — в данных обычный регистр («Хит», «Новинка», «Акция») */ .zt-product-card__badge, #ztSaleProducts [class*="__badge"] { text-transform: uppercase !important; letter-spacing: .05em !important; } /* N-111, мобильная ступень: 24px в узкой карточке (2 в ряду) не помещается — на телефоне цена 18px; селектор той же силы, что правило 24px выше, иначе его группа [class*="__price"] победит */ @media (max-width: 680px) { #ztSaleProducts .zt-product-card__price:not([class*="label"]), #ztSaleProducts [class*="__price"]:not([class*="label"]):not([class*="old"]):not([class*="request"]) { font-size: 18px !important; } } /* N-116: артикул — главный идентификатор (ищут по нему), название — вторая строка. N-117: цена прижата влево, наличие — вправо. Селекторы в конце unify — последнее слово каскада */ #ztSaleProducts .zt-product-card__id-row .zt-product-card__article, #ztSaleProducts .zt-product-card__article { margin: 0 !important; /* двойной селектор: инлайн модуля красит артикул в muted с той же специфичностью — перебиваем связкой id-row */ color: #1e2428 !important; font-size: 15px !important; font-weight: 800 !important; line-height: 1.2 !important; letter-spacing: .01em; } /* N-121: название — в стилистике бейджей («ХИТ», «НОВИНКА»): шрифт бейджей, капс, разрядка */ #ztSaleProducts .zt-product-card__name:not(#zt_):not(#zt_), #ztSaleProducts .zt-product-card__name:not(#zt_):not(#zt_) a { color: #6b747c !important; /* двойной :not(#zt_) — иначе шрифтовой слой заголовков (body h3:not(#zt_):not(#zt_) → Russo One) сильнее */ font-family: var(--zt-font-badge, 'Manrope', Arial, sans-serif) !important; font-size: 11px !important; font-weight: 700 !important; line-height: 1.4 !important; letter-spacing: .04em; text-transform: uppercase; } /* N-120: старая цена НАД новой (обе слева), наличие — справа по центру двух строк. Грид переживает карточки без старой цены: тогда цена в первом ряду, наличие рядом */ #ztSaleProducts .zt-product-card__prices { display: grid !important; grid-template-columns: minmax(0, 1fr) auto !important; align-items: center !important; gap: 0 8px !important; } #ztSaleProducts .zt-product-card__old-price { grid-column: 1; order: -1; margin: 0 !important; } #ztSaleProducts .zt-product-card__price:not([class*="request"]) { grid-column: 1; margin-left: 0 !important; text-align: left !important; } #ztSaleProducts .zt-product-card__avail { grid-column: 2; grid-row: 1 / span 2; align-self: center; margin-left: 0 !important; } /* N-124: карточка компактнее — убираем вертикальную распорку (авто-маржа перед ценой) и запас высоты тела карточки */ #ztSaleProducts .zt-product-card__body { min-height: 0 !important; } #ztSaleProducts .zt-product-card__prices { margin: 10px 0 0 !important; } #ztSaleProducts .zt-product-card__buttons { margin-top: 10px !important; } /* N-125: название — максимум 2 строки, отступ от артикула чуть больше */ #ztSaleProducts .zt-product-card__name:not(#zt_):not(#zt_) { display: -webkit-box !important; overflow: hidden !important; max-height: 32px; margin: 7px 0 0 !important; -webkit-box-orient: vertical; -webkit-line-clamp: 2; } /* ============================================================ N-402…N-413: единый бургер и стабильная шапка до 1400 px ============================================================ */ /* Кнопка одна. Второй «бургер» рисовали псевдоэлементы вложенного span поверх штатных ::before/::after самой кнопки. Оставляем ровно три линии: button::before + span + button::after. */ @media (max-width: 1399px) { .zt-header #open-mobile-menu { position: relative !important; } .zt-header #open-mobile-menu::before, .zt-header #open-mobile-menu::after, .zt-header #open-mobile-menu > span { position: absolute !important; left: 11px !important; width: 22px !important; height: 2px !important; margin: 0 !important; border-radius: 2px !important; background: #1A1A1A !important; transform: none !important; } .zt-header #open-mobile-menu::before { top: 14px !important; } .zt-header #open-mobile-menu > span { top: 21px !important; } .zt-header #open-mobile-menu::after { top: 28px !important; } .zt-header #open-mobile-menu > span::before, .zt-header #open-mobile-menu > span::after { content: none !important; display: none !important; } } /* На 1280 шапку ломали унаследованные order: контакт становился первым, поиск и бургер переносились на отдельные строки. В диапазоне 1081–1399 все элементы снова идут одной строкой. */ @media (min-width: 1081px) and (max-width: 1399px) { .zt-header .zt-header__top-inner { display: flex !important; flex-wrap: nowrap !important; align-items: center !important; min-height: 72px !important; padding: 12px 20px !important; gap: 16px !important; } .zt-header .zt-header__top-inner .zt-header__logo { order: 1 !important; flex: 0 0 auto !important; margin: 0 !important; } .zt-header .zt-header__top-inner .zt-catalog-button { order: 2 !important; flex: 0 0 auto !important; } .zt-header .zt-header__top-inner .zt-search.zt-live-search { order: 3 !important; flex: 1 1 auto !important; width: auto !important; min-width: 0 !important; } .zt-header .zt-header__top-inner .zt-contact { order: 4 !important; flex: 0 0 auto !important; width: auto !important; margin: 0 !important; } .zt-header .zt-header__top-inner .zt-mobile-trigger { order: 5 !important; flex: 0 0 auto !important; margin: 0 !important; align-self: center !important; } } /* N-414/N-415: свободное место списка не скапливается после «Контактов», а поровну распределяется между девятью пунктами. Корзина и избранное находятся вне .zt-nav__list и не меняются. */ @media (min-width: 1400px) { .zt-header .zt-nav__list { justify-content: space-between !important; column-gap: 0 !important; } } /* N-416: на планшете 1024 компактный режим не должен убирать логотип и бургер. Схлопывание до одной строки поиска остаётся только на телефонах (≤767 px). */ @media (min-width: 768px) and (max-width: 1023px) { .zt-header.zt-header--compact .zt-header__logo, .zt-header.zt-header--compact .zt-mobile-trigger { opacity: 1 !important; max-height: none !important; margin-top: 0 !important; margin-bottom: 0 !important; padding-top: 0 !important; padding-bottom: 0 !important; overflow: visible !important; pointer-events: auto !important; transform: none !important; } .zt-header.zt-header--compact .zt-header__top-inner { min-height: 72px !important; padding-top: 10px !important; padding-bottom: 10px !important; } } /* N-417/N-418: отдельный визуальный зазор между «Контактами» и избранным. Список становится немного уже, но space-between продолжает давать одинаковые интервалы между его пунктами. */ @media (min-width: 1400px) { .zt-header .zt-nav__list { margin-right: clamp(24px, 2vw, 40px) !important; } } /* N-419…N-421: внешняя тач-цель уже равна высоте строки логотипа (44 px), увеличиваем только видимую трёхполосную пиктограмму. */ @media (max-width: 767px) { .zt-header #open-mobile-menu::before, .zt-header #open-mobile-menu::after, .zt-header #open-mobile-menu > span { left: 6px !important; width: 32px !important; height: 3px !important; } .zt-header #open-mobile-menu::before { top: 8px !important; } .zt-header #open-mobile-menu > span { top: 21px !important; } .zt-header #open-mobile-menu::after { top: 34px !important; } }