/* Редизайн главной септика по макету figma.com/design/hybYIXfdPbpTSNs4kga78L (фрейм main). Файл подключается ТОЛЬКО на септике и ПОСЛЕ перенесённой вёрстки старого сайта: при равной силе селектора выигрывает последний, поэтому задирать специфичность не нужно и правила остаются читаемыми. */ /* --- Блок-слайдер ------------------------------------------------------- Отступы у блока РОДНЫЕ, старого сайта: 30 px над картинкой и высота 500 px из template24. По макету здесь стояли полосы в 100 px сверху и снизу (стрелки «100» у фрейма main) — их ставили и заказчик принял, но потом отменил: «перегнул я с высотой». Если попросят вернуть, числа были padding-top:70, padding-bottom:95 при height:auto. Цвет остался по макету: подпись «HEX F4F0F0. Как на блоке-слайдере». Красим весь блок целиком — когда красились только полосы, фон блока оставался прежним голубым #E4F0F7, и голубое обрамляло баннер слева, справа и полоской сверху. */ .prirod{ background-color:#F4F0F0; } /* --- Блок разделов каталога на главной --------------------------------- Плитка .catus взята с витрины /catalog/ вместе со всем оформлением — по центру, полужирным, зелёная ссылка на наведение. Своего не пишем. Отличие одно: на витрине плиток шесть в ряд (width:16.66% в template21), а по макету на главной их три. Восемь разделов ложатся 3+3+2. */ /* Отступы блока — 20, как у соседнего .maincatalo: заказчик попросил ужать воздух на главной (было 40). */ .mp-cats{padding:20px 0} /* Раскладываем плитки flex-строкой, а не обтеканием, как в оригинале. Обтекание тут разваливается: высоты плиток отличаются на пиксель (снимки 260x260 и 260x259), и следующая плитка не находит места слева — цепляется за предыдущий ряд и уезжает вправо одна. На телефоне это выглядело как пропавшие фотографии: каждая третья стояла справа, а слева зияла дыра. Правило общее для блока на главной и для витрины /catalog/: плитка там одна и та же, и болезнь одна и та же. На витрине хуже — у плитки «Обслуживание» снимка нет вовсе, она вдвое ниже соседей, и ряды сыпались уже наверняка. Ставим display:flex обёртке и снимаем float с самих плиток. У flex порядок и переносы считаются по строкам, а не по высотам соседей, так что ряды ровные при любых снимках. Селектор .group_list .block960 больше нигде не срабатывает: на главной и в контактах .group_list оборачивает выпадающий список городов, и .block960 внутри него нет — проверено на живых страницах. */ .mp-cats .block960, .group_list .block960{display:flex;flex-wrap:wrap;align-items:flex-start} /* flex:0 0 <ширина>, а не просто width. Одной ширины мало: flex-элементы по умолчанию ужимаются, чтобы влезть в строку, и вместо переноса они просто становятся уже. На витрине из-за этого в ряд вставало семь плиток вместо шести — каждая сжалась со 157 px до 137. Нули запрещают и рост, и сжатие: строка заполняется ровно тремя, остальное переносится. */ .mp-cats .catus, .group_list .catus{float:none;flex:0 0 33.3333%;width:33.3333%} /* Клирфикс исходной вёрстки внутри flex-контейнера превратился бы в лишний элемент строки — он тут не нужен и только мешает. */ .mp-cats .block960:after, .group_list .block960:after{display:none} /* На узких — две в ряд, как и было у старого сайта. */ @media (max-width:720px){ .mp-cats .catus, .group_list .catus{flex-basis:50%;width:50%} } /* --- Затемнение страницы при открытом меню каталога -------------------- При наведении на «Каталог продукции» старый сайт затемняет страницу полупрозрачным серо-синим: за пунктом меню лежит пустой div.overclas, и правило `.catm:hover ~ .overclas` растягивает его с rgba(85,99,110,.5). Растягивает через `position:absolute; top:173px; height:100%` — в расчёте, что позиционированных предков у него нет и он меряется от страницы целиком. Но наша правка выпадающего меню (template24) при ширине до 1440px даёт `.menu { position:relative }`, и оверлей привязывается к меню: height:100% превращается в высоту СТРОКИ МЕНЮ, и вместо затемнения страницы получается полупрозрачная серо-синяя полоса в 60px, которая ложится ровно на верх баннера. На светлом фоне её не видно, на тёмной картинке — отчётливо. На широком экране всё работало, потому и ловилось только «на слегка поджатом окне и ноуте». Прибиваем оверлей к окну: fixed меряется от окна при любых предках, и затемнение одинаково на всех ширинах. Верх — настоящий низ меню, его меряет dim-overlay.js и кладёт в переменную. Родные 173px старого сайта остаются запасным значением: это высота шапки на одной конкретной ширине, на других шапка выше или ниже, и с жёстким числом между меню и затемнением оставалась белая щель. */ .catm:hover ~ .overclas{ position:fixed; left:0;right:0;top:var(--mp-dim-top,173px);bottom:0; width:auto;height:auto; } /* --- Свёрнутый блок товаров в разделе ----------------------------------- Класс вешает foldgroup.js, а не шаблон: без JavaScript товары должны остаться на странице и в выдаче поисковика, поэтому с сервера блок приходит открытым. */ .mp-fold--closed{display:none} /* --- Блок расчёта стоимости на карточке товара ------------------------- Голубой блок .schii — последний внутри белой карточки .cartatov, а у той `padding: 40px`. По бокам блок из этого поля выходит отрицательным `margin: 0 -40px` (так в вёрстке старого сайта), а снизу нет — и под голубым оставалась белая полоса в 40 px до края карточки. Убираем у карточки нижнее поле, когда голубой блок в ней последний. Отрицательным полем у самого блока это не решить: у карточки отступ 40 px на широком экране и 10 px на узком, и любое число оказывалось бы верным только на одной ширине — на 700 px «минус сорок» выносило голубое за край карточки на тридцать пикселей. Углы скругляем под карточку: без этого квадратный низ голубого блока вылезал бы за её скругление в 10 px. Условие `:has(> .schii:last-child)` намеренно: такой же .schii стоит на страницах разделов (форма «Остались вопросы?»), но там он не в карточке, и трогать его нельзя — за ним идёт блок отзывов. */ .cartatov:has(> .schii:last-child){padding-bottom:0} .cartatov > .schii:last-child{border-radius:0 0 10px 10px} /* --- Текст под заголовком блока товаров -------------------------------- Описание линейки (.textsa) стояло вплотную к плиткам НА РАЗДЕЛАХ: там плитки лежат в нашей сетке .mp-grid--4, и их родной margin:30px не действует. Отступ даём сетке после текста — в ритме её же зазора (20px). Селектор с соседством намеренно узкий: на главной за тем же .textsa идёт плитка напрямую (float-вёрстка зеркала), её маргин работает, и общий отступ тексту давал там 30+20=50 — перебор. */ .textsa + .mp-grid--4{margin-top:20px} /* --- Текст под товарами в разделе -------------------------------------- Блок с большим описанием стоит ПОСЛЕ обёртки .maincatalo, а фон страницы задан именно ей — #F5F2F2. Снаружи обёртки его нет, и текст ложился на белый фон : между кнопкой «Весь каталог» и описанием проходила заметная граница. Задаём тот же цвет, что у страницы. */ .wtex{background-color:#F5F2F2} /* --- Отзывы на телефоне ------------------------------------------------- Старый сайт прятал карточку отзыва целиком: в его `@media (max-width:960px)` класс `.otblock` стоит в общем списке `display:none` вместе с десятком других элементов. На экране оставалась одна шапка «Отзывы наших покупателей» — блок высотой 169 px, внутри которого пусто. Так было и на главной, и на разделах: поведение унаследованное, не наше. Показываем и раскладываем в столбик. Рядом фотография и текст не помещаются: снимок 245 px в ширину, а внутри карточки на экране 360 остаётся 284 — на текст пришлось бы меньше сорока. */ @media (max-width:960px){ .otzv .otblock{display:block} .otzv .otleft{float:none;margin:0 0 16px;padding-bottom:0;text-align:center} .otzv .otleft img{max-width:100%;height:auto} .otzv .otright{float:none} } /* --- Поле-ловушка в наших формах --------------------------------------- Ловушку прячет класс .mp-sr-only из widgets.css, но там она держится на устаревшем `clip`, а ширину и высоту ей перебивают правила старого сайта для input: замерено — коробка 34x30 вместо 1x1. Рисоваться поле от этого не начинает (clip на абсолютном элементе срабатывает), но опираться на одно устаревшее свойство не хочется. Повторяем скрытие своим селектором: он сильнее и не зависит от `clip`. */ .mpf input[name="website"]{ position:absolute;width:1px;height:1px;padding:0;margin:-1px; border:0;overflow:hidden;clip-path:inset(50%); }