/* Редизайн главной септика по макету figma.com/design/hybYIXfdPbpTSNs4kga78L (фрейм main). Файл подключается ТОЛЬКО на септике и ПОСЛЕ перенесённой вёрстки старого сайта: при равной силе селектора выигрывает последний, поэтому задирать специфичность не нужно и правила остаются читаемыми. Размеры взяты из макета как есть. Оговорка на будущее: снимки внутри макета увеличены примерно в 1,41 раза относительно живого сайта (у него контейнер 960 px, в макете он же 1358). То есть «100» и «126» с макета, перенесённые один в один, выглядят в полтора раза просторнее, чем видел их автор макета. Так решено сознательно. */ /* --- Блок-слайдер: поля сверху и снизу --------------------------------- В макете стрелки меряют от края блока до КАРТИНКИ: сверху от низа тёмного меню до верха картинки 100 px, снизу от низа картинки до края блока тоже 100 px. Обе полосы подписаны цветом F4F0F0, у верхней приписка «как на блоке-слайдере». Сверху 30 px из ста уже есть: у .swiper-slide собственный padding-top:30px. Снизу своего запаса 5 px. Отсюда 70 и 95. Цвет — всему блоку целиком. Сначала были покрашены только полосы, а фон блока оставался прежним голубым #E4F0F7 — и голубое обрамляло баннер слева, справа и полоской сверху, а стрелки перелистывания оказывались на границе двух цветов. Приписка в макете читается ровно наоборот: полосы того же цвета, что и блок, то есть блок тоже F4F0F0. */ .prirod{ /* Высота была задана жёстко (template24: 500px до 1440 px) при box-sizing:border-box — добавленные поля съедали бы место у самого слайдера, картинка не сдвигалась бы, а обрезалась. А ещё жёсткая высота давала 15 px запаса, из-за которых нижняя полоса выходила разной на разных ширинах: 100 px до 1440 и 85 px выше. */ height:auto; padding-top:70px; padding-bottom:95px; background-color:#F4F0F0; } /* --- Блок «Официальный производитель септиков ТЕРМИТ» ------------------- По макету он идёт сразу за слайдером, и от низа слайдера до БУКВ заголовка 126 px. Сам блок команда redesign_septik_home переставляет в теле страницы; здесь только отступ. Почему 114, а не 126: буквы заголовка начинаются на 12 px ниже его рамки — это половина интерлиньяжа (60/84) плюс просвет над капителью bebas_neuebold. Замерено в браузере, не прикинуто. */ .ofictext{padding-top:114px} /* На телефоне блок-слайдер скрыт совсем (template21, до 600 px), и мерить отступ становится не от чего — возвращаем родной. */ @media (max-width:600px){ .ofictext{padding-top:40px} } /* --- Блок разделов каталога на главной --------------------------------- Плитка .catus взята с витрины /catalog/ вместе со всем оформлением — по центру, полужирным, зелёная ссылка на наведение. Своего не пишем. Отличие одно: на витрине плиток шесть в ряд (width:16.66% в template21), а по макету на главной их три. Восемь разделов ложатся 3+3+2. */ .mp-cats{padding:40px 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%} } /* --- Свёрнутый блок товаров в разделе ----------------------------------- Класс вешает 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} /* --- Текст под товарами в разделе -------------------------------------- Блок с большим описанием стоит ПОСЛЕ обёртки .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%); }