* это `inline`: короткое название встало бы в строку с ценой.
*/
.kits-table-type__title.is-hidden-pc {
display: block;
}
}
/*
* Колонки видов ремонта — одной ширины.
*
* Без этого ширину задаёт длина заголовка: «Косметический ремонт» получал 136
* px, «Евроремонт» — 96, и таблица выглядела собранной наспех. Доли, а не
* пиксели: видов ремонта столько, сколько в прайсе, и зашитая ширина
* рассыпалась бы на шестом.
*/
@media (min-width: 1100px) {
/*
* `fixed` обязателен: при автоматической раскладке проценты — лишь
* пожелание, и ширину всё равно назначает самое длинное слово в заголовке.
* Проверено: без этой строки колонки остались 136 / 122 / 129 / 96 / 112.
*/
.kits-table {
table-layout: fixed;
}
.kits-table thead th:not(:first-child) {
width: calc(76% / 5);
}
/* Первой колонке остаётся её минимум из макета — там названия работ. */
.kits-table thead th:first-child {
width: 24%;
}
/*
* Колонке разрешено быть уже своего содержимого — иначе фиксированная
* раскладка не может сузить ячейку до заданной доли.
*
* БЕЗ `overflow-wrap: anywhere`. С ним перенос шёл по буквам:
* «Косметичес‑кий ремонт», «Капитальны‑й ремонт». Слова переносятся между
* словами, как и положено; название длиннее колонки просто выйдет за неё,
* и это лучше, чем разорванное посередине слово.
*/
.kits-table-title,
.kits-table-type__title {
min-width: 0;
}
/*
* Самое длинное слово должно помещаться целиком.
*
* «Косметический» — 110 px при кегле 15, а колонка давала 87: слово либо
* вылезало за белую плашку, либо (с `overflow-wrap: anywhere`) рвалось
* посередине — «Косметичес‑кий». Перенос по слогам был бы правильным
* ответом, и в макете он стоял руками через ``, но названия приходят
* из прайса, а `hyphens: auto` без словаря переносов молча не работает —
* проверено здесь же.
*
* Поэтому решает не перенос, а арифметика: кегль 13 (макет берёт такой же
* на узких экранах) и доли 24/76 вместо 30/70. Проверено на месте: строка
* заголовка занимает ровно ширину колонки, 97 из 97, без выхода за плашку.
*/
.kits-table-type__title {
font-size: 13px;
line-height: 1.25;
hyphens: auto;
/*
* Место под две строки — столько занимают четыре названия из пяти.
*
* «Евроремонт» помещается в одну, и вся его карточка съезжала вверх: цена
* и оранжевый значок вставали на 8 px выше, чем у соседей. Пять значков
* на разных уровнях читаются как сбитая вёрстка. Прижать значок к низу
* (`margin-top:auto`, как на телефоне) здесь нельзя — автоматический
* отступ съел бы свободное место, и `justify-content: center` перестал
* бы центрировать карточку. Резервируем высоту у заголовка: карточка
* остаётся центрированной, строки встают на общие линии.
*/
min-height: calc(2 * 1.25em);
}
/*
* Шапка колонки занимает всю высоту ячейки.
*
* «Евроремонт» — в одну строку, остальные в две, и его белая плашка
* выходила 87 px против 106 у соседей: она висела по центру ячейки, а не
* заполняла её. Процентная высота внутри таблицы считается только от
* ячейки с заданной высотой — отсюда `height: 1px` у th: она не
* ограничивает (ячейка всё равно растёт по содержимому), но делает
* проценты разрешимыми.
*/
.kits-table thead th {
height: 1px;
}
.kits-table-type {
display: flex;
flex-direction: column;
justify-content: center;
height: 100%;
}
}
/* === homepage/css/repair-services.css === */
/*
* Витрина услуг «Ремонт помещений»: сетка карточек одной геометрии.
*
* ПОЧЕМУ ОТДЕЛЬНЫЙ ФАЙЛ. style.min.css не редактируется (CLAUDE.md §8), а
* макетные правила блока рассчитаны на другое устройство: список был Swiper'ом,
* карточка — свободной высоты, кнопки шли сразу за текстом. При разной длине
* названий и описаний это давало ряд, в котором ни одна горизонталь не
* совпадала: заголовки на разной высоте, кнопки лесенкой, низ карточек рваный.
*
* ЧТО ЗДЕСЬ. Карточка — колонка с растущей контентной областью и прижатым к низу
* блоком кнопок; заголовок и описание резервируют своё число строк, поэтому
* совпадают не только верх и низ карточки, но и каждая строка внутри. Ничего не
* обрезается «на середине»: тексты пишутся под этот объём, а `line-clamp`
* страхует от случайно длинной правки.
*
* Правится отдельным файлом, а не style.min.css (CLAUDE.md §8).
*/
/* --------------------------------------------------------------- сетка -- */
/*
* Четыре в ряд на desktop — и это ровно та сетка, что была в макете
* (`flex: calc(25% - 20.3px)`), только без Swiper: список больше не слайдер.
*
* `grid` вместо `flex` сознательно: у грида ряд имеет высоту, и все карточки
* ряда растягиваются до неё сами. На флексе то же самое пришлось бы держать
* `align-items: stretch` плюс договорённость о ширине в трёх медиазапросах.
*/
.repair-list {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 27px;
/* Макет на узких экранах ставит `flex-wrap: nowrap; gap: 0` — это было для
карусели, и для сетки означает «все карточки в одну строку». */
flex-wrap: wrap;
}
@media only screen and (max-width: 1400px) {
.repair-list {
gap: 20px;
}
}
@media only screen and (max-width: 1100px) {
.repair-list {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
}
@media only screen and (max-width: 900px) {
.repair-list {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 16px;
}
}
/* ------------------------------------------------------------ карточка -- */
/*
* Карточка — колонка из трёх частей: картинка, контент, кнопки.
*
* `height: 100%` обязателен: элемент грида растянут по ряду, но его внутренняя
* колонка об этом не знает, и кнопки прижимались бы к тексту, а не к низу.
*/
.repair-list__item {
display: flex;
flex-direction: column;
height: 100%;
/* Ширину задаёт сетка. Макетное `flex: calc(25% - 20.3px) 0 0` внутри грида
считается от ячейки и делает карточку уже колонки. */
flex: initial;
min-width: 0;
}
/*
* Картинка одной высоты у всех карточек — верх и низ на общей линии.
*
* Высота фиксированная, а не по пропорции файла: фотографии разных объектов
* приходят с разным соотношением сторон, и «естественная» высота развалила бы
* ряд. `object-fit: cover` кадрирует, а не растягивает.
*/
.repair-list__wrap-img {
flex: 0 0 auto;
height: 207px;
}
.repair-list__img,
.repair-list__img img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
@media only screen and (max-width: 900px) {
.repair-list__wrap-img {
height: 180px;
}
}
/* Контентная часть растёт, кнопки уезжают вниз. */
.repair-list__content {
display: flex;
flex-direction: column;
flex: 1 1 auto;
min-height: 0;
}
/*
* Заголовок занимает две строки ВСЕГДА.
*
* «Ремонт зала» — одна строка, «Ремонт квартиры «евродвушки»» — две, и без
* резерва описание под ними начиналось бы на разной высоте. Отсюда `min-height`
* ровно в две строки: одна строка добирает пустую, три — обрезаются, но текст
* названий приходит из каталога и в две строки укладывается.
*
* `line-height` здесь свой: макетные 85% рассчитаны на одну строку, на двух они
* склеивают буквы.
*/
.repair-list__title {
margin: 0 0 12px 0;
font-size: 20px;
line-height: 1.2;
min-height: calc(2 * 1.2em);
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
line-clamp: 2;
overflow: hidden;
}
/*
* Описание — шесть строк, с резервом высоты.
*
* Число строк не выбрано, а посчитано на странице. Колонка отдаёт тексту 212 px,
* в строку входит 27 знаков — но это потолок: переносы по словам съедают конец
* почти каждой строки. Замер по всем двадцати восьми описаниям: тринадцати
* хватает пяти строк, трём нужно шесть, самому длинному (122 знака) — ровно
* шесть. Пяти строк не хватало четырём карточкам, и они обрывались на середине
* фразы.
*
* `min-height` держит начало кнопок на общей линии, даже если описание короче;
* `line-clamp` — страховка от правки длиннее нынешних, а не способ показывать
* оборванное предложение.
*/
.repair-list__txt {
flex: 1 1 auto;
min-height: calc(6 * 1.4em);
}
.repair-list__txt p {
margin: 0;
line-height: 1.4;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 6;
line-clamp: 6;
overflow: hidden;
}
/*
* Кнопки прижаты к низу карточки.
*
* `margin-top: auto` съедает весь остаток высоты, поэтому обе кнопки и нижняя
* граница карточки стоят на общей линии у всего ряда — независимо от того,
* сколько строк занял заголовок.
*/
.repair-list-actions {
margin-top: auto;
padding-top: 20px;
}
/* --------------------------------------------------- «Показать ещё» ----- */
/*
* Скрытая карточка убирается из потока целиком.
*
* `visibility` или прозрачность оставили бы её место в сетке пустым, а строку —
* доступной скринридеру и поиску как «видимая, но невидимая».
*/
.repair-list__item[hidden] {
display: none;
}
.repair-more {
display: flex;
justify-content: center;
margin: 28px 0 0;
}
/*
* Оформление — как у остальных «показать ещё» на странице (`show-all-kits`,
* `table-actions__btn`): пунктирная подчёркнутая ссылка фирменного цвета.
* Своей кнопки блок не изобретает.
*/
.repair-more__btn {
padding: 0;
background: none;
border: 0;
border-bottom: 1px dashed #ff491a;
font-weight: 700;
font-size: 14px;
line-height: 136%;
color: #ff491a;
cursor: pointer;
}
.repair-more__btn:hover {
border-bottom-color: transparent;
}
/*
* НА ТЕЛЕФОНЕ — ЛИСТАЛКА, А НЕ СТОЛБИК.
*
* Одна колонка означала девять карточек подряд: экран за экраном одинаковых
* плашек, между которыми ничего не происходит. Пролистать их вбок — то же
* движение, что в портфолио, и весь раздел занимает один экран.
*
* БЕЗ SWIPER. Прокрутка нативная: `scroll-snap` останавливает трек ровно на
* карточке, инерция достаётся от системы, а ширины никто не пересчитывает —
* ровно та беда, из-за которой слайдер уже дважды схлопывался в ноль
* (CLAUDE.md §8). Здесь ломаться нечему: это обычный блок с прокруткой.
*/
@media only screen and (max-width: 560px) {
.repair-list {
display: flex;
/*
* `nowrap` обязателен и перебивает базовое правило сетки: с переносом
* девять карточек по 295 px просто сложились обратно в столбик, а
* прокручивать стало нечего — измерено, scrollWidth совпал с шириной
* экрана.
*/
flex-wrap: nowrap;
grid-template-columns: none;
overflow-x: auto;
overscroll-behavior-x: contain;
scroll-snap-type: x mandatory;
-webkit-overflow-scrolling: touch;
gap: 12px;
/*
* Трек идёт до краёв экрана и возвращает отступ внутрь: карточка,
* упирающаяся в край, читается как обрезанная, а выехавшая за него —
* как продолжение.
*/
margin: 0 -16px;
padding: 0 16px;
scroll-padding: 0 16px;
}
/*
* 86%: следующая карточка выглядывает из-за края. Это и есть подсказка, что
* список листается, — без неё нужны точки или стрелки, то есть ещё один
* механизм на то же самое.
*/
.repair-list__item {
flex: 0 0 86%;
scroll-snap-align: start;
}
/*
* «Показать ещё» на телефоне не нужна: в треке лежат все карточки, и
* доступны они свайпом. Кнопка, ничего не открывающая, — это обещание,
* которого блок не выполняет.
*/
.repair-more {
display: none;
}
}
/* === homepage/css/block-cta.css === */
/*
* Кнопка действия под блоком — одна на все блоки, где она есть.
*
* ОТКУДА ПЕРЕЕХАЛО. Правила лежали в `matrix-table.css`, потому что первой их
* получила матрица «Итоговая стоимость». Но `.matrix-actions` печатают три
* блока — итоговая стоимость, сроки и прайс-лист, — и когда прайс понадобился
* на отдельной странице «Цены», за двадцатью строками кнопки пришлось бы тянуть
* 27 КБ геометрии матриц, которых на той странице нет вовсе. Компонент, которым
* пользуются трое, живёт отдельно от блока, которому он когда-то принадлежал.
*
* ИМЯ КЛАССА ОСТАВЛЕНО КАК БЫЛО. Переименовать `.matrix-actions` в что-нибудь
* нейтральное — значит поправить три шаблона ради красоты имени и получить
* расхождение с любым местом, о котором забыли.
*/
.matrix-actions {
display: flex;
justify-content: center;
margin: 28px 0 0;
}
.matrix-actions__btn {
min-width: 260px;
height: 56px;
}
@media only screen and (max-width: 560px) {
.matrix-actions__btn {
min-width: 0;
width: 100%;
}
}
/* === homepage/css/matrix-table.css === */
/*
* ОБЩАЯ МАТРИЦА: «тип квартиры × вид ремонта».
*
* Один стандарт на все таблицы этого вида — «Итоговая стоимость» и «Типовые
* сроки», а дальше и любые следующие. Второй файл с той же геометрией разошёлся
* бы с первым на первой же правке, поэтому здесь лежит ВСЁ поведение, а в файле
* блока — только ширины его колонок и то, что действительно принадлежит ему
* одному.
*
* ТАБЛИЦА НЕ НОСИТ КЛАСС `table` ИЗ ВЁРСТКИ — И ЭТО РЕШЕНИЕ, А НЕ ЗАБЫВЧИВОСТЬ.
* На том классе висит всё, что здесь мешало, и каждый пункт стоил замера:
* • скрипт вёрстки сворачивает длинные таблицы (`.table:not(.table--price)`)
* и вставляет «Показать все» ВНУТРЬ горизонтального скроллера — кнопка
* уезжала вместе с таблицей (замер: 16 → −384 при прокрутке на 400);
* • `.table{padding:0 0 0 8px}` на узких экранах — отступ слева «из ниоткуда»;
* • `border-spacing: 20px` одинаков между всеми колонками, поэтому соседние
* подколонки стояли так же далеко, как разные виды ремонта;
* • `.table tbody td:nth-child(2)::before` — пустой блок карточного режима, из
* за которого первая колонка значений вставала на 14px ниже соседней;
* • `.table td:nth-child(3)`, `:nth-child(5)` — разделители и отступы,
* рассчитанные на таблицу из ТРЁХ видов ремонта;
* • `.table th:first-child{display:none}` прятал колонку названий на мобиле;
* • `position: relative` у `thead`/`tbody`/`tr` отменял липкость колонки.
* Классы `table-content`, `table-title`, `table-type` оставлены — они
* самостоятельные, не привязаны к `.table`, и их базовый вид подходит.
*
* ПРАВИЛА, КОТОРЫЕ ЗДЕСЬ ДЕЙСТВУЮТ:
* • ширины колонок объявлены в `
` — содержимое на них не влияет;
* • таблица занимает контейнер целиком, остаток забирает колонка названий;
* • промежуток внутри группы меньше, чем между группами, и линии разной силы;
* • переключатель типа строения меняет ТОЛЬКО значение: ни одной ячейки не
* добавляется и не убирается, поэтому сдвиг геометрии невозможен;
* • широкая матрица прокручивается ВНУТРИ себя; страница вбок не едет (§8), а
* название квартиры остаётся на месте.
*/
/* ------------------------------------------- переключатель типа строения -- */
/*
* ПЕРЕКЛЮЧЕНИЕ БЕЗ СКРИПТА.
*
* В ячейке лежат значения по всем типам строения, видно отмеченное. Правила
* привязаны к ПОРЯДКУ: N-й переключатель показывает N-е значение. Ключи типов
* задаёт редактор, они произвольны, а порядок — нет: и переключатели, и значения
* печатаются одним и тем же циклом.
*
* Почему не JS: подмена текста скриптом означала бы пересчёт ширин ячеек в
* момент переключения, то есть ровно тот сдвиг, от которого мы уходим.
*
* ПОДДЕРЖИВАЕТСЯ ЧЕТЫРЕ ТИПА СТРОЕНИЯ — запас есть, но не бесконечный: пятый
* потребует ещё одного блока правил. Это стерегут тесты блоков, они читают этот
* файл и считают максимальный `nth-of-type`.
*
* Селектор несёт класс таблицы намеренно: на узких экранах вёрстка объявляет
* `.table-content>span{display:flex}` (0-1-1), и одиночный класс ему проигрывал —
* все значения раскладывались столбиком, строка вырастала с 44 до 74px.
*/
.matrix .matrix__value {
display: none;
}
.matrix__switch:nth-of-type(1):checked ~ .matrix-wrap .matrix__value:nth-child(1),
.matrix__switch:nth-of-type(2):checked ~ .matrix-wrap .matrix__value:nth-child(2),
.matrix__switch:nth-of-type(3):checked ~ .matrix-wrap .matrix__value:nth-child(3),
.matrix__switch:nth-of-type(4):checked ~ .matrix-wrap .matrix__value:nth-child(4) {
display: block;
}
/*
* Отмеченная подпись. Вёрстка умеет это сама (`.price-table-filters__radio:checked
* ~ .price-table-filters__txt`), но только когда input лежит рядом с подписью. У
* нас он вынесен перед таблицей — иначе до ячеек не дотянуться, — поэтому три
* состояния повторены здесь: жирная подпись, оранжевый круг, залитая точка.
*/
.matrix__switch:nth-of-type(1):checked ~ .price-table-filter .price-table-filters__item:nth-child(1) .price-table-filters__txt,
.matrix__switch:nth-of-type(2):checked ~ .price-table-filter .price-table-filters__item:nth-child(2) .price-table-filters__txt,
.matrix__switch:nth-of-type(3):checked ~ .price-table-filter .price-table-filters__item:nth-child(3) .price-table-filters__txt,
.matrix__switch:nth-of-type(4):checked ~ .price-table-filter .price-table-filters__item:nth-child(4) .price-table-filters__txt {
font-weight: 700;
}
.matrix__switch:nth-of-type(1):checked ~ .price-table-filter .price-table-filters__item:nth-child(1) .price-table-filters__txt::before,
.matrix__switch:nth-of-type(2):checked ~ .price-table-filter .price-table-filters__item:nth-child(2) .price-table-filters__txt::before,
.matrix__switch:nth-of-type(3):checked ~ .price-table-filter .price-table-filters__item:nth-child(3) .price-table-filters__txt::before,
.matrix__switch:nth-of-type(4):checked ~ .price-table-filter .price-table-filters__item:nth-child(4) .price-table-filters__txt::before {
border-color: #ff491a;
}
.matrix__switch:nth-of-type(1):checked ~ .price-table-filter .price-table-filters__item:nth-child(1) .price-table-filters__txt::after,
.matrix__switch:nth-of-type(2):checked ~ .price-table-filter .price-table-filters__item:nth-child(2) .price-table-filters__txt::after,
.matrix__switch:nth-of-type(3):checked ~ .price-table-filter .price-table-filters__item:nth-child(3) .price-table-filters__txt::after,
.matrix__switch:nth-of-type(4):checked ~ .price-table-filter .price-table-filters__item:nth-child(4) .price-table-filters__txt::after {
opacity: 1;
visibility: visible;
}
/* Подпись — метка, а не ссылка: курсор и запрет выделения при клике. */
.price-table-filters__txt[for] {
cursor: pointer;
user-select: none;
}
/* ------------------------------------------------------------- контейнер -- */
.matrix-wrap {
/*
* Тень у правого края — признак того, что справа есть продолжение.
* «Крышка» цвета фона привязана к содержимому, тень — к контейнеру, поэтому
* она гаснет на последней колонке. Без JS.
*/
background-color: #fff;
background-image:
linear-gradient(to left, #fff, #fff),
linear-gradient(to left, rgba(17, 17, 17, 0.12), rgba(17, 17, 17, 0));
background-position: right center, right center;
background-repeat: no-repeat;
background-size: 14px 100%, 18px 100%;
background-attachment: local, scroll;
/*
* Одна карточка, а не набор плиток.
*
* Рамка нарисована тенью, а не `border`: контейнер прокручивается, и рамка
* съедала бы два пикселя его внутренней ширины. Замер поймал именно это —
* таблица 1106px в контейнере 1104px давала прокрутку там, где прокручивать
* нечего.
*/
box-shadow: 0 0 0 1px rgba(228, 228, 228, 0.7);
border-radius: 6px;
}
/* --------------------------------------------------------------- колонки -- */
.matrix {
/*
* Ширины колонок — единственный источник геометрии. `fixed` обязателен:
* только при нём `` командует, а содержимое ячеек — нет.
*
* Ширину колонок значений и `min-width` таблицы задаёт файл блока: у «цены»
* две подколонки на вид ремонта, у «сроков» одна.
*/
--matrix-name: 136px;
/* Промежуток внутри группы и между группами — разные намеренно. */
--matrix-inner: 4px;
--matrix-outer: 14px;
/* Отступ текста первой колонки от кромки карточки. */
--matrix-name-pad: 16px;
table-layout: fixed;
border-collapse: separate;
/* Промежутки делает padding ячеек: border-spacing одинаков для всех колонок
и поэтому не умеет «внутри группы теснее». */
border-spacing: 0;
/*
* ТАБЛИЦА ЗАНИМАЕТ КОНТЕЙНЕР ЦЕЛИКОМ, А СВОБОДНОЕ МЕСТО ЗАБИРАЕТ ПЕРВАЯ
* КОЛОНКА.
*
* Ни пустого поля слева, ни хвоста справа. При этом лишние пиксели НЕ
* расходятся по колонкам значений: у них фиксированная ширина из
* ``, а «резиновая» только колонка типов квартир (`width: auto` —
* при `fixed` она и получает весь остаток).
*/
width: 100%;
max-width: none;
margin: 0;
padding: 0;
background: #fff;
color: #333;
font-size: 14px;
text-align: center;
}
/*
* Ширина не задана намеренно: колонка забирает остаток контейнера. Минимум ей
* обеспечивает `min-width` таблицы из файла блока.
*/
.matrix__col--name {
width: auto;
}
/* --------------------------------------------------------- шапка таблицы -- */
.matrix thead th {
padding: 0;
border: 0;
vertical-align: bottom;
text-align: center;
}
/*
* УГЛОВАЯ ЯЧЕЙКА НАЗВАНА ПО ОБЕИМ ОСЯМ И РАЗДЕЛЕНА ПО ДИАГОНАЛИ.
*
* Сверху справа — то, что идёт по столбцам (вид ремонта), снизу слева — то, что
* идёт по строкам (тип квартиры). Линия нарисована градиентом НА САМОЙ ЯЧЕЙКЕ: у
* вложенного блока в `th` с `rowspan` проценты высоты не разрешаются — замер дал
* линию в 40px при ячейке 113px. У `to top right` граница 50% проходит ровно
* через углы при любых пропорциях, подгонять под ширину колонки не нужно.
*
* `position: relative` нужно подписям — они расставлены по углам абсолютом.
*/
.matrix thead th.matrix__corner {
position: relative;
padding: 0;
border-right: 1px solid #e3e3e3;
background-color: #fff;
background-image: linear-gradient(
to top right,
transparent calc(50% - 0.5px),
#d5d5d5 calc(50% - 0.5px),
#d5d5d5 calc(50% + 0.5px),
transparent calc(50% + 0.5px)
);
}
.matrix__axes {
display: block;
height: 100%;
}
.matrix__axis {
position: absolute;
font-weight: 700;
font-size: 12px;
line-height: 1.2;
color: #666;
white-space: nowrap;
}
/* По столбцам — сверху справа, по строкам — снизу слева. */
.matrix__axis--columns {
top: 10px;
right: var(--matrix-name-pad);
}
.matrix__axis--rows {
bottom: 10px;
left: var(--matrix-name-pad);
}
/*
* Заголовок группы стоит по центру ВСЕХ своих подколонок.
*
* Отступы слева и справа равны — иначе центр плашки не совпадает с центром
* группы. Равенство проверяется замером: |центр плашки − центр группы| < 1px.
*
* Высота задана явно, чтобы `height: 100%` у плашки было от чего считать. Все
* ячейки строки всё равно одной высоты, поэтому и плашки выходят одинаковыми
* независимо от того, в одну строку название или в две.
*/
.matrix thead th.matrix__group {
height: 96px;
padding: 0 var(--matrix-outer) 8px;
vertical-align: top;
}
/*
* ПЛАШКА: НАЗВАНИЕ СВЕРХУ, РАСПОР, ИКОНКА У ПОЛА.
*
* Было `justify-content: center` — центрировался весь контент разом, и от числа
* строк в названии зависело всё: замер дал плашки 62px и 81px в ячейке 87px,
* названия на разных линиях. Теперь название прижато к верху, иконку отжимает
* вниз `margin-top: auto`, а плашка тянется на всю высоту ячейки — все плашки
* одинаковы по построению, а не по совпадению длин слов.
*/
.matrix .table-type {
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
width: 100%;
height: 100%;
min-height: 0;
padding: 12px 6px 8px;
text-align: center;
}
.matrix .table-type__title {
text-align: center;
}
.matrix .table-type__link {
/* Распор: иконка уезжает к нижнему краю плашки, а не липнет к тексту. */
margin: auto 0 0;
}
/*
* ПОЛОСА ПОДЗАГОЛОВКОВ — РОВНАЯ СТРОКА ШАПКИ.
*
* Когда её клетки носили чередование групп, полоса выглядела набором пятен и
* казалось, что подписи поменялись местами (в DOM они не менялись — замер
* показывал совпадение x и width каждой подписи со своей колонкой до пикселя).
* Общий нейтральный фон, нижняя граница, один размер и цвет; границы групп
* рисуют разделители.
*/
.matrix thead th.matrix__sub {
height: 34px;
padding-top: 6px;
padding-bottom: 6px;
background: #f6f6f6;
border-bottom: 1px solid #e6e6e6;
font-weight: 500;
font-size: 12px;
line-height: 1.2;
color: #666;
vertical-align: middle;
}
/* ------------------------------------------------------------- промежутки -- */
/*
* ЛИНИИ РАЗНОЙ СИЛЫ: внутри группы тоньше, между группами заметнее.
*
* Разделена каждая колонка — иначе соседние значения сливаются в одно поле. Но
* линия внутри группы светлее: если сделать обе одинаковыми, таблица
* рассыпается на равноправные столбцы, а группа вида ремонта перестаёт читаться
* как целое. Отсюда же «не хаотичные карточки»: внутри группы 8px, между
* группами 28px и по центру этого промежутка — разделитель.
*
* Группа может состоять из одной колонки: тогда её единственная ячейка — сразу и
* первая, и последняя, и получает внешние отступы с обеих сторон.
*/
.matrix th.matrix__sub,
.matrix td.matrix__cell {
padding-left: var(--matrix-inner);
padding-right: var(--matrix-inner);
border-right: 1px solid #f2f2f2;
}
.matrix th.matrix__sub--start,
.matrix td.matrix__cell--start {
padding-left: var(--matrix-outer);
}
.matrix th.matrix__sub--end,
.matrix td.matrix__cell--end {
padding-right: var(--matrix-outer);
border-right: 1px solid #e3e3e3;
}
/* Последняя группа граничит с рамкой контейнера — второй линии не нужно. */
.matrix th.matrix__sub:last-child,
.matrix td.matrix__cell:last-child {
border-right: 0;
}
/* Чередование групп — чтобы подколонки читались как одна колонка. */
.matrix__group--alt {
background: #fbfbfb;
}
/* --------------------------------------------------------------- строки -- */
.matrix tbody td,
.matrix tbody th {
height: 54px;
padding-top: 0;
padding-bottom: 0;
border-top: 1px solid #f1f1f1;
vertical-align: middle;
}
/*
* Название строки — ЗАГОЛОВОК СТРОКИ, а не обычная ячейка.
*
* ЗАЧЕМ ПРАВКА. В матрице цен одиннадцать столбцов, в матрице сроков шесть.
* Пока первая ячейка была ``, у строки не было заголовка вовсе: скринридер,
* оказавшись на сумме в середине таблицы, называл столбец («Итого») и молчал о
* том, к какой квартире эта сумма относится. Разбирающая страницу машина по той
* же причине не могла отличить подпись строки от данных. ` | `
* говорит и тому и другому одно и то же одним словом.
*
* ВИД НЕ МЕНЯЕТСЯ, НО БРАУЗЕР ЭТОГО НЕ ЗНАЕТ: у ` | ` собственные умолчания —
* жирное начертание и выравнивание по центру. Оба гасятся здесь, а замер до и
* после правки показывает те же координаты, ширины и высоты.
*/
.matrix th.matrix__name-cell {
padding: 0;
border-right: 1px solid #e3e3e3;
text-align: left;
font-weight: 400;
}
.matrix .table-content {
/* Белая плашка с радиусом внутри каждой ячейки и создавала «карточки». */
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
min-height: 0;
padding: 6px 0;
background: none;
border-radius: 0;
font-size: 14px;
line-height: 1.25;
text-align: center;
}
/*
* Значение не переносится: «2 000 ₽ /» и «м²» на двух строках — это две разные
* величины на вид. Ширина колонки под него и рассчитана.
*/
.matrix .table-content span {
white-space: nowrap;
}
/*
* ПСЕВДОПОДПИСЬ ЯЧЕЙКИ ГАСИТСЯ — ОНА НЕВИДИМА, НО ЗАНИМАЕТ МЕСТО.
*
* `.table-content::before` — подпись столбца карточного режима. Текста в ней у
* нас нет (`content: ""`), но она остаётся flex-элементом с `padding: 7px 8px`,
* то есть 18px ширины: замер на 1024 показал значение, сдвинутое на 18px вправо
* и вылезшее за правый край ячейки на 4px во всех тридцати клетках. Пустой
* элемент, который толкает содержимое, — худший вид дефекта: на глаз его нет.
*/
.matrix .table-content::before,
.matrix .table-content::after {
content: none;
display: none;
}
/*
* Значение — просто текст, а не плашка. На узких экранах вёрстка одевает каждый
* `.table-content > span` в белую рамку с радиусом и `min-height: 29px`.
* `display` здесь НЕ трогается: им управляет переключатель типа строения.
*/
.matrix .table-content > span {
width: auto;
min-height: 0;
padding: 0;
background: none;
border: 0;
border-radius: 0;
}
.matrix .table-title {
/*
* ПЛОЩАДЬ ПОД НАЗВАНИЕМ, А НЕ РЯДОМ С НИМ.
*
* `.table-title` в вёрстке — flex-строка с `nowrap`, поэтому `display:block`
* у площади не значил ничего: flex делает элементы соседями по горизонтали.
* Замер поймал название и площадь на одной линии, причём площадь заходила в
* правый отступ ячейки.
*/
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: center;
min-height: 0;
/*
* Слева — небольшой отступ от кромки карточки: ноль читался как «в упор», а
* отступ вёрстки (19px) отодвигал колонку слишком далеко. Край САМОЙ колонки
* при этом стоит на линии контента блока.
*/
padding: 6px var(--matrix-inner) 6px var(--matrix-name-pad);
background: none;
border-radius: 0;
white-space: normal;
font-size: 14px;
line-height: 1.25;
text-align: left;
}
/*
* НАЗВАНИЕ КВАРТИРЫ НЕ РАЗРЫВАЕТСЯ.
*
* «1-комнатная» содержит дефис, и браузер считает его законным местом переноса:
* замер показал «1-» на одной строке и «комнатная» на второй. Строки таблицы при
* этом становились разной высоты — у «Студии» перенос не случался.
*/
.matrix__name {
white-space: nowrap;
font-weight: 700;
}
/*
* Диапазон площади — пояснение к названию, а не второй заголовок. Своя строка и
* тоже неразрывен: «(30–45 м²)» разлеталось на «(30–», «45», «м²)». Это единица
* измерения, читать её по частям нельзя (CLAUDE.md §7.3).
*/
.matrix__area {
display: block;
white-space: nowrap;
font-weight: 400;
font-size: 12px;
color: #999;
}
/*
* Фраза вместо значения («Рассчитаем индивидуально», «Уточним при расчёте»):
* длинная, и в отличие от числа её переносить нужно — это предложение (§7.3).
*/
.matrix__no-value {
white-space: normal !important;
font-size: 12px;
line-height: 1.2;
color: #999;
}
/* ------------------------------------------------------------------ CTA -- */
/*
* Кнопка под блоком переехала в `block-cta.css`: её печатают ещё сроки и
* прайс-лист, а прайс с недавних пор живёт и на отдельной странице «Цены», где
* матриц нет вовсе. Тянуть туда весь этот файл ради двадцати строк кнопки
* значило бы платить 27 КБ за то, чего на странице не существует.
*/
/* ------------------------------------------------------ узкие экраны ----- */
@media only screen and (max-width: 1100px) {
/* Колонки теснее — числа считает файл блока по той же формуле. */
.matrix {
--matrix-name: 128px;
--matrix-outer: 8px;
--matrix-inner: 3px;
--matrix-name-pad: 10px;
}
/*
* Название квартиры остаётся на месте при прокрутке вбок.
*
* Целятся КЛАССЫ, а не `:first-child`: в шапке две строки, и во второй
* первая ячейка — подпись первой группы. Позиционный селектор сделал бы
* липкой её. `thead` в селекторе не для красоты: базовое правило угловой
* ячейки несёт его же, и без него `position: relative` победило бы липкость.
*/
.matrix thead th.matrix__corner,
.matrix tbody th.matrix__name-cell {
position: sticky;
left: 0;
z-index: 2;
/*
* ТОЛЬКО `background-color`. Сокращённое `background: #fff` сбрасывает
* `background-image` — а на угловой ячейке им нарисована диагональ.
*/
background-color: #fff;
box-shadow: 6px 0 6px -6px rgba(17, 17, 17, 0.16);
}
.matrix .table-title {
font-size: 13px;
}
.matrix__area {
font-size: 11px;
}
.matrix .table-content {
font-size: 13px;
}
.matrix tbody td {
height: 48px;
}
.matrix thead th.matrix__sub {
height: 30px;
font-size: 11px;
}
/* Плашка ниже: на узком экране название печатается сокращением. */
.matrix thead th.matrix__group {
height: 74px;
padding-bottom: 6px;
}
.matrix .table-type {
padding: 8px 4px 6px;
}
.matrix__axes {
padding: 8px var(--matrix-name-pad);
}
.matrix__axis {
font-size: 10px;
}
}
/* === homepage/css/final-price.css === */
/*
* «Итоговая стоимость ремонта»: ширины колонок и то, что принадлежит только
* этому блоку.
*
* ВСЁ ПОВЕДЕНИЕ МАТРИЦЫ — В `matrix-table.css`: переключатель типа строения,
* диагональная угловая ячейка, геометрия плашек, полоса подзаголовков, линии,
* липкая колонка, узкие экраны. Здесь остаются только числа, которые у каждого
* блока свои: у этого на вид ремонта ДВЕ подколонки — ставка и итог.
*
* style.min.css не редактируется (CLAUDE.md §8), поэтому правки живут отдельным
* файлом.
*/
.table--final-price {
--fp-rate: 84px;
--fp-total: 110px;
/*
* Минимальная ширина считается из числа видов ремонта, которое печатает
* шаблон: шестой вид сделает таблицу шире контейнера, и она начнёт
* прокручиваться внутри себя, а не сожмёт колонки до нечитаемого.
*/
min-width: calc(var(--matrix-name) + var(--price-types, 5) * (var(--fp-rate) + var(--fp-total)));
}
.final-price__col--rate {
width: var(--fp-rate);
}
.final-price__col--total {
width: var(--fp-total);
}
@media only screen and (max-width: 1100px) {
.table--final-price {
--fp-rate: 78px;
--fp-total: 102px;
}
}
@media only screen and (max-width: 360px) {
/* На 320px рядом с названием должна помещаться целая группа. */
.table--final-price {
--matrix-name: 112px;
--matrix-outer: 6px;
--fp-rate: 72px;
--fp-total: 96px;
}
}
/* === homepage/css/times.css === */
/*
* «Типовые сроки ремонта»: ширины колонок и то, что принадлежит только этому
* блоку.
*
* ВСЁ ПОВЕДЕНИЕ МАТРИЦЫ — В `matrix-table.css`, том же, что у «Итоговой
* стоимости»: переключатель типа строения, диагональная угловая ячейка,
* геометрия плашек, полоса подзаголовков, линии, липкая колонка, узкие экраны.
* Здесь только числа: у этого блока на вид ремонта ОДНА колонка — срок.
*/
.table--times {
--times-term: 124px;
/*
* Минимальная ширина считается из числа колонок, которое печатает шаблон.
* Колонок здесь ровно столько, у скольких видов ремонта назван хоть один
* срок, поэтому появление евроремонта в данных пересчитает ширину само.
*/
min-width: calc(var(--matrix-name) + var(--times-columns, 4) * var(--times-term));
}
/*
* ШИРИНА РАЗДАЁТСЯ ДОЛЯМИ, А НЕ ОСТАТКОМ.
*
* У этого блока колонок вдвое меньше, чем у матрицы цен: при фиксированных
* колонках срока весь остаток контейнера доставался колонке названий — замер на
* 1440 дал ей 506px при тексте в полтораста. Доли делят место поровну между
* колонками сроков и оставляют названию долю чуть больше — оно и длиннее.
*
* Числа считаются из количества колонок: `--times-columns` печатает шаблон, и
* пятая колонка (когда появятся сроки евроремонта) сама сузит остальные, ничего
* здесь не меняя.
*/
.table--times .matrix__col--name {
width: calc(100% / (var(--times-columns, 4) + 1.4) * 1.4);
}
.times__col--term {
width: calc(100% / (var(--times-columns, 4) + 1.4));
}
@media only screen and (max-width: 1100px) {
.table--times {
--times-term: 118px;
}
}
@media only screen and (max-width: 360px) {
/* На 320px рядом с названием должна помещаться целая колонка срока. */
.table--times {
--matrix-name: 112px;
--matrix-outer: 6px;
--times-term: 110px;
}
}
/* === homepage/css/price-list.css === */
/*
* «Прайс-лист на ремонтные работы»: три колонки — работа, единица, цена.
*
* ПОЧЕМУ НЕ `matrix-table.css`. Тот файл описывает матрицу «строка × колонка» с
* группами подколонок и липкой первой колонкой. Здесь обычный список из трёх
* колонок, и половина того поведения ему не нужна. Общее у них — язык:
* карточка с рамкой, полоса шапки, тонкие линии между строками, одна высота у
* всех строк. style.min.css не редактируется (CLAUDE.md §8).
*
* ПЕРЕКЛЮЧЕНИЕ ВКЛАДОК БЕЗ СКРИПТА: N-я радиокнопка показывает N-ю панель. Тот
* же приём, что у переключателя типа строения в матрицах, и по той же причине —
* скрипт пересобирал бы разметку в момент клика.
*
* ПОДДЕРЖИВАЕТСЯ ДВЕНАДЦАТЬ ВКЛАДОК. Сегодня их восемь; запас есть, но не
* бесконечный, и его стережёт тест: тринадцатая вкладка молча осталась бы
* пустой.
*/
.price-list__switch {
position: absolute;
width: 1px;
height: 1px;
overflow: hidden;
clip: rect(0 0 0 0);
}
.price-list__pane {
display: none;
}
.price-list__switch:nth-of-type(1):checked ~ .price-list__panes .price-list__pane:nth-child(1),
.price-list__switch:nth-of-type(2):checked ~ .price-list__panes .price-list__pane:nth-child(2),
.price-list__switch:nth-of-type(3):checked ~ .price-list__panes .price-list__pane:nth-child(3),
.price-list__switch:nth-of-type(4):checked ~ .price-list__panes .price-list__pane:nth-child(4),
.price-list__switch:nth-of-type(5):checked ~ .price-list__panes .price-list__pane:nth-child(5),
.price-list__switch:nth-of-type(6):checked ~ .price-list__panes .price-list__pane:nth-child(6),
.price-list__switch:nth-of-type(7):checked ~ .price-list__panes .price-list__pane:nth-child(7),
.price-list__switch:nth-of-type(8):checked ~ .price-list__panes .price-list__pane:nth-child(8),
.price-list__switch:nth-of-type(9):checked ~ .price-list__panes .price-list__pane:nth-child(9),
.price-list__switch:nth-of-type(10):checked ~ .price-list__panes .price-list__pane:nth-child(10),
.price-list__switch:nth-of-type(11):checked ~ .price-list__panes .price-list__pane:nth-child(11),
.price-list__switch:nth-of-type(12):checked ~ .price-list__panes .price-list__pane:nth-child(12) {
display: block;
}
/* Отмеченная вкладка. */
.price-list__switch:nth-of-type(1):checked ~ .price-list__nav .price-list__tab:nth-of-type(1),
.price-list__switch:nth-of-type(2):checked ~ .price-list__nav .price-list__tab:nth-of-type(2),
.price-list__switch:nth-of-type(3):checked ~ .price-list__nav .price-list__tab:nth-of-type(3),
.price-list__switch:nth-of-type(4):checked ~ .price-list__nav .price-list__tab:nth-of-type(4),
.price-list__switch:nth-of-type(5):checked ~ .price-list__nav .price-list__tab:nth-of-type(5),
.price-list__switch:nth-of-type(6):checked ~ .price-list__nav .price-list__tab:nth-of-type(6),
.price-list__switch:nth-of-type(7):checked ~ .price-list__nav .price-list__tab:nth-of-type(7),
.price-list__switch:nth-of-type(8):checked ~ .price-list__nav .price-list__tab:nth-of-type(8),
.price-list__switch:nth-of-type(9):checked ~ .price-list__nav .price-list__tab:nth-of-type(9),
.price-list__switch:nth-of-type(10):checked ~ .price-list__nav .price-list__tab:nth-of-type(10),
.price-list__switch:nth-of-type(11):checked ~ .price-list__nav .price-list__tab:nth-of-type(11),
.price-list__switch:nth-of-type(12):checked ~ .price-list__nav .price-list__tab:nth-of-type(12) {
background: #ff491a;
border-color: #ff491a;
color: #fff;
}
/* ------------------------------------------------------------- заголовок -- */
.price-list__updated {
margin: 8px 0 0;
font-size: 14px;
color: #999;
}
/* ---------------------------------------------------------------- вкладки -- */
.price-list__nav-title {
margin: 0 0 10px;
font-weight: 700;
font-size: 15px;
color: #333;
}
.price-list__nav-track {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin: 0 0 20px;
}
.price-list__tab {
display: inline-flex;
align-items: center;
padding: 9px 16px;
background: #fff;
border: 1px solid #e6e6e6;
border-radius: 999px;
font-size: 14px;
line-height: 1.2;
color: #333;
white-space: nowrap;
cursor: pointer;
user-select: none;
transition: border-color 0.2s ease, background 0.2s ease, color 0.2s ease;
}
.price-list__tab:hover {
border-color: #ff491a;
}
/* ----------------------------------------------------------------- таблица -- */
.price-list__card {
background: #fff;
border-radius: 6px;
/* Рамка тенью: карточка не должна съедать два пикселя внутренней ширины. */
box-shadow: 0 0 0 1px rgba(228, 228, 228, 0.7);
overflow: hidden;
}
.price-list__table {
table-layout: fixed;
border-collapse: separate;
border-spacing: 0;
width: 100%;
margin: 0;
color: #333;
font-size: 15px;
}
/*
* Ширины объявлены в ``: содержимое ячеек на них не влияет, поэтому
* длинное название работы не может сузить колонку цены.
*/
.price-list__col--work {
width: auto;
}
.price-list__col--unit {
width: 120px;
}
.price-list__col--price {
width: 160px;
}
.price-list__head {
height: 44px;
padding: 0 16px;
background: #f6f6f6;
border-bottom: 1px solid #e6e6e6;
font-weight: 500;
font-size: 13px;
color: #666;
text-align: left;
vertical-align: middle;
}
.price-list__head--unit,
.price-list__head--price {
text-align: center;
}
.price-list__row--extra {
display: none;
}
.price-list__row--shown {
display: table-row;
}
.price-list__cell {
height: 52px;
padding: 8px 16px;
border-top: 1px solid #f1f1f1;
vertical-align: middle;
}
.price-list__row:first-child .price-list__cell {
border-top: 0;
}
.price-list__cell--unit,
.price-list__cell--price {
text-align: center;
}
.price-list__cell--price {
font-weight: 700;
/* Цена не переносится: «600» и «₽» на разных строках — это другая цена. */
white-space: nowrap;
}
/*
Название работы печатается прямо в ячейку. Раньше оно было обёрнуто в
ради `display: block` — но ячейка таблицы и
так блочная, и обёртка не делала ничего, кроме 795 лишних узлов DOM.
Межстрочное расстояние переехало на саму ячейку.
*/
.price-list__cell--work {
line-height: 1.3;
/*
* ДЛИННОЕ СЛОВО ПЕРЕНОСИТСЯ, А НЕ ВЫЛЕЗАЕТ ИЗ КОЛОНКИ. Ширины колонок
* заданы, и слово шире колонки некуда девать: оно выходит за ячейку и
* налезает на соседнюю. В данных такое есть — «Демонтаж розеток,
* выключателей,светильников» приехал из legacy без пробела после запятой,
* и на 390px эти 25 символов дают 206px в ячейке шириной 194.
*
* Чинится здесь, а не правкой названия: следующая длинная позиция появится
* при первом же импорте, и переписывать данные под вёрстку — не тот
* порядок. `break-word` рвёт слово ТОЛЬКО когда оно не помещается целиком,
* поэтому обычные названия переносятся по-прежнему по пробелам.
*/
overflow-wrap: break-word;
}
/* Цены нет — фраза, а не ноль (§7.3): ноль обещал бы бесплатную работу. */
.price-list__no-price {
font-weight: 400;
font-size: 13px;
color: #999;
white-space: normal;
}
/* ------------------------------------------------------------ смотреть ещё -- */
.price-list__more {
display: flex;
justify-content: center;
padding: 14px 16px 18px;
border-top: 1px solid #f1f1f1;
}
.price-list__more-btn {
padding: 0;
background: none;
border: 0;
border-bottom: 1px dashed #ff491a;
font-size: 15px;
line-height: 1.4;
color: #ff491a;
cursor: pointer;
}
.price-list__more-btn:hover {
border-bottom-color: transparent;
}
/* ------------------------------------------------------ узкие экраны ----- */
/* ------------------------------------------------------- прокрутка таблицы -- */
/*
* ШИРИНЫ КОЛОНОК ОДНИ НА ВСЕХ ЭКРАНАХ, А НЕ ПРЯЧУТСЯ.
*
* Раньше на мобильном единица и цена скрывались `display: none`, а их ``
* оставались с нулевой шириной. При `table-layout: fixed` строка теряет ячейку,
* и WebKit раздаёт ширину по содержимому оставшейся колонки, а не по ширине
* таблицы: на iPhone таблица сжималась в узкую полосу слева, справа внутри
* карточки зияла пустота. Blink в той же разметке держал 100%, поэтому дефекта
* не было видно ни в одном локальном замере — только на реальном телефоне.
*
* Теперь колонки объявлены в пикселях и не скрываются никогда. Не помещаются —
* таблица прокручивается ВНУТРИ своего контейнера; страница вбок не едет (§8).
*/
.price-list__scroll {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
.price-list__table {
--pl-unit: 92px;
--pl-price: 116px;
/* Меньше этого названию работы уже не хватает на осмысленную строку. */
--pl-name: 200px;
min-width: calc(var(--pl-name) + var(--pl-unit) + var(--pl-price));
}
.price-list__col--unit {
width: var(--pl-unit);
}
.price-list__col--price {
width: var(--pl-price);
}
@media only screen and (max-width: 767px) {
.price-list__table {
--pl-unit: 72px;
--pl-price: 92px;
/* 160 + 164 = 324: на 375px влезает в карточку без прокрутки, на 320 —
прокручивается внутри таблицы, как и задумано. */
--pl-name: 160px;
font-size: 14px;
}
.price-list__cell {
height: auto;
padding: 10px 12px;
}
.price-list__head {
padding: 0 12px;
}
.price-list__subsection {
padding: 10px 12px 6px;
}
/*
* Лента вкладок прокручивается внутри блока, но НЕ вплотную к краю экрана:
* отрицательные поля выносили её за отступы страницы, и первая вкладка
* начиналась от самой кромки. Отступ теперь тот же, что у остальных
* мобильных блоков.
*/
.price-list__nav-track {
flex-wrap: nowrap;
overflow-x: auto;
scroll-snap-type: x proximity;
margin: 0 0 18px;
padding: 0 0 4px;
-webkit-overflow-scrolling: touch;
}
.price-list__tab {
scroll-snap-align: start;
}
}
/* ------------------------------------------------- аккордеоны разделов -- */
/*
* СТРУКТУРА ПОВТОРЯЕТ СТАРЫЙ САЙТ: вкладка → аккордеоны → позиции.
*
* Аккордеон — ``, а не скрипт: раскрытие работает без JS, состояние
* держит браузер, и разметка при этом не пересобирается.
*/
.price-list__section {
margin: 0 0 10px;
background: #fff;
border-radius: 6px;
box-shadow: 0 0 0 1px rgba(228, 228, 228, 0.7);
overflow: hidden;
}
.price-list__section-head {
display: flex;
align-items: center;
gap: 12px;
padding: 14px 16px;
cursor: pointer;
list-style: none;
user-select: none;
}
/* Стрелка рисуется сама — родная у Safari и Chrome выглядит по-разному. */
.price-list__section-head::-webkit-details-marker {
display: none;
}
.price-list__section-head::before {
content: "";
flex: 0 0 auto;
width: 3px;
height: 18px;
background: #ff491a;
border-radius: 2px;
}
.price-list__section-name {
flex: 1 1 auto;
font-weight: 500;
font-size: 15px;
line-height: 1.3;
color: #333;
}
.price-list__section-count {
flex: 0 0 auto;
min-width: 26px;
padding: 2px 8px;
background: #f6f6f6;
border-radius: 999px;
font-size: 12px;
color: #999;
text-align: center;
}
.price-list__section-head::after {
content: "+";
flex: 0 0 auto;
width: 20px;
font-size: 20px;
line-height: 1;
color: #ff491a;
text-align: center;
}
.price-list__section[open] .price-list__section-head::after {
content: "−";
}
/* Внутри аккордеона карточка уже не нужна: рамку держит сам аккордеон. */
.price-list__section .price-list__card {
border-radius: 0;
box-shadow: none;
border-top: 1px solid #f1f1f1;
}
/*
* Подзаголовок внутри раздела: подкатегория legacy («Демонтаж стен») или
* разделитель из файла («СТЕНЫ»). Одинаковые названия под разными
* разделителями — разные позиции, и подпись объясняет, почему цена другая.
*/
.price-list__subsection {
padding: 10px 16px 6px;
background: #fbfbfb;
border-top: 1px solid #f1f1f1;
font-weight: 700;
font-size: 12px;
line-height: 1.2;
color: #666;
text-transform: uppercase;
letter-spacing: 0.02em;
}
/* === homepage/css/consult.css === */
/* ==========================================================================
Блок консультации «Остались вопросы по ремонту?»
ПОЧЕМУ ФОН НЕ СВОЙСТВО БЛОКА. В макете `.wrap-call` несёт
`background: url(../img/bgs/desktop/call-bg.jpg)` — то есть кадр зашит в
стиль, один на 354 города, и заменить его из админки нельзя. Здесь картинка
приходит из слайда и лежит отдельным слоем `![]() `: так работают srcset,
webp-двойник и lazy-загрузка, и на телефон уезжает копия на 400/800 px, а не
полноразмерный кадр. Макетный фон поэтому гасится — иначе браузер скачал бы
обе картинки, а нижняя всё равно не видна.
ЗАТЕМНЕНИЕ — ОТДЕЛЬНЫЙ СЛОЙ. Редактор поставит светлый кадр, и белый
заголовок на нём исчезнет; подбирать «файл потемнее» — это чинить вёрстку
картинкой. Степень задаётся атрибутом `data-overlay` на блоке.
ВЫСОТУ ЗАДАЁТ СОДЕРЖИМОЕ. Никаких min-height под «красивую» полосу: пустое
место снизу на мобильной — это экран, который посетитель листает зря.
========================================================================== */
.consult {
position: relative;
overflow: hidden;
/* Заливка под фотографией: она же и есть фон, когда картинки нет. */
background-color: #1d2939;
background-image: none;
color: #fff;
isolation: isolate;
}
/* Слой с фотографией. `inset: 0` вместо width/height: у картинки свои размеры,
и растягивать её процентами пришлось бы дважды. */
.consult__bg {
position: absolute;
inset: 0;
z-index: -2;
}
.consult__bg picture,
.consult__bg img {
display: block;
width: 100%;
height: 100%;
}
/* Кадр горизонтальный и широкий (1321×324), блок при узком экране заметно
выше — поэтому обрезаем по центру, а не растягиваем пропорции. */
.consult__bg img {
object-fit: cover;
object-position: center;
}
/* Затемнение живёт на самом блоке, а не на группе строк или обёртке картинки:
позиционированный предок у псевдоэлемента должен быть очевидным (CLAUDE.md §8). */
.consult--photo::before {
content: '';
position: absolute;
inset: 0;
z-index: -1;
background: rgba(16, 24, 40, var(--consult-overlay, .55));
pointer-events: none;
}
.consult[data-overlay='none']::before { --consult-overlay: 0; }
.consult[data-overlay='light']::before { --consult-overlay: .35; }
.consult[data-overlay='medium']::before { --consult-overlay: .55; }
.consult[data-overlay='strong']::before { --consult-overlay: .72; }
/* Ширину содержимого задаёт контейнер страницы — тот же, что у соседних блоков
(замер на 1920: блок и прайс-лист оба 1321px). Своего `max-width` здесь нет
намеренно: кап в 1100px оставлял справа 161px пустоты, и строка формы
заканчивалась заметно раньше края блока. Длину строки текста ограничивает сам
абзац — это типографика, а не ширина блока. */
.consult__inner {
position: relative;
}
.consult .title h2 span {
color: #ff491a;
}
.consult .title p {
max-width: 780px;
color: rgba(255, 255, 255, .88);
}
/* --- Строка формы -------------------------------------------------------- */
/*
Desktop: Имя | Телефон | кнопка — одной линией.
`align-items: stretch` вместо макетного `center`: центрирование оставляет
каждому элементу его собственную высоту, и кнопка (56px) с полем (56px)
совпадают только пока обе константы не разошлись. Растяжение делает равную
высоту свойством строки, а не совпадением двух чисел.
*/
.consult__row {
display: flex;
align-items: stretch;
flex-wrap: wrap;
gap: 12px;
margin: 0;
}
.consult__row > .form__item {
flex: 1 1 220px;
/* min-width: 0 — иначе flex-элемент не сожмётся уже своего содержимого и
строка вылезет за контейнер (та же болезнь, что у калькулятора). */
min-width: 0;
display: block;
}
.consult__row .form__wrap-input,
.consult__row .form__input {
width: 100%;
}
/*
РАВНАЯ ВЫСОТА — ТОЛЬКО ГДЕ ЕСТЬ СТРОКА.
`height: 100%` считается от высоты родителя, а у колонки она задана
содержимым: процент разрешать не от чего, и кнопка падает до высоты своей
надписи. Замер на 768px показал 27px против 56px у полей. Поэтому растяжение
живёт в том же медиазапросе, что и сама строка, а в столбик высоту задаёт
макет — те же 56/50px, что у соседних форм сайта.
*/
@media only screen and (min-width: 1101px) {
.consult__row .form__wrap-input,
.consult__row .form__input {
height: 100%;
}
}
/* Кнопка не уже и не ниже соседей: своя колонка и высота строки.
СЕЛЕКТОР ДЛИННЫЙ НАМЕРЕННО. Макет держит `.call .form__items .form__item
:last-child { max-width: 210px }` — это 0-4-0, и короткий `.consult__submit`
(0-1-0) ему проигрывает: замер показал кнопку 210px там, где надпись просит
больше. Перебиваем классом ячейки вместе с классами блока и строки — та же
специфичность, а наш файл подключён позже (CLAUDE.md §8). `!important` для
этого не нужен. */
.consult .consult__row .form__item.consult__submit {
flex: 0 0 auto;
max-width: none;
}
.consult .consult__row .form__item.consult__submit .form__btn {
width: 100%;
min-width: 260px;
margin: 0;
}
@media only screen and (min-width: 1101px) {
.consult .consult__row .form__item.consult__submit .form__btn {
height: 100%;
}
}
/* --- Согласия ------------------------------------------------------------ */
.consult__consents {
margin: 16px 0 0;
max-width: 780px;
}
.consult__consents .lead-consent__text,
.consult__consents .form-privacy__txt {
color: rgba(255, 255, 255, .82);
}
.consult__consents a {
color: #fff;
}
/* --- Мобильная ----------------------------------------------------------- */
@media only screen and (max-width: 1100px) {
/* Всё в столбик и во всю ширину: заголовок, текст, имя, телефон, кнопка,
согласия. Кнопка не может выйти за экран, потому что её ширину задаёт
колонка, а не min-width. */
.consult__row {
flex-direction: column;
gap: 10px;
}
.consult__row > .form__item {
flex: 1 1 auto;
width: 100%;
}
.consult .consult__row .form__item.consult__submit .form__btn {
min-width: 0;
width: 100%;
}
.consult__consents {
margin-top: 14px;
max-width: none;
}
}
@media only screen and (max-width: 480px) {
/* Длинные юридические ссылки на 320px рвутся по слогам, а не вылезают за
край: перенос разрешён внутри слова, но только когда иначе не помещается. */
.consult__consents a {
overflow-wrap: anywhere;
}
}
/* === homepage/css/reviews.css === */
/* ==========================================================================
Блок «Реальные отзывы клиентов»
КАРУСЕЛЬ — МАКЕТНАЯ (Swiper из сборки сайта, `.reviews-list.swiper`: 4
карточки от 1320px, 3 от 1100px, «auto» ниже). Здесь только то, чего в
макете не было, потому что там лежали восемь одинаковых заглушек: равная
высота карточек, раскрытие длинного отзыва и подпись площадки без логотипа.
ВЫСОТА КАРТОЧЕК РАВНАЯ ПО ПОСТРОЕНИЮ. `swiper-slide` по умолчанию берёт
высоту содержимого, и карточка с коротким отзывом оказывалась ниже соседей.
`height: auto` у слайда + растяжение ряда делают высоту свойством ряда, а не
совпадением длин текстов.
РАСКРЫТИЕ — БЕЗ СКРИПТА. Текст в разметке целиком, видимую высоту задаёт CSS,
раскрывает скрытый checkbox. Подмена текста из JS означала бы пересчёт высот
в момент клика, а обрезка на сервере — потерю конца отзыва.
========================================================================== */
/* --- Ряд и карточка ------------------------------------------------------ */
.reviews .reviews-list__wrap {
align-items: stretch;
}
.reviews .reviews-list__item {
height: auto;
display: flex;
flex-direction: column;
}
/* Блок ссылок прижат к низу карточки: иначе у короткого отзыва «Читать
полностью» висит посередине белого поля. */
.reviews .reviews-list__wrap-content {
display: flex;
flex-direction: column;
flex: 1 1 auto;
}
.reviews .reviews-list__links {
display: flex;
align-items: center;
gap: 16px;
margin: 14px 0 0;
flex-wrap: wrap;
}
/* --- Цифры над карточками ------------------------------------------------ */
/*
ПАНЕЛЬ ИЗ ДВУХ ЦИФР — ЭТО КАРТОЧКА ТОГО ЖЕ РОДА, ЧТО И ОТЗЫВЫ ПОД НЕЙ.
Сначала цифры стояли голым текстом на фоне секции: два числа и две подписи
висели между вводным абзацем и рядом карточек, не принадлежа ни тому ни
другому, — читалось это как забытая строка отладки. Панель берёт те же
белый фон, рамку #f5f5f5 и радиус 16px, что и карточка отзыва, и потому
встаёт в блок как его часть.
ШИРИНА — ПО СОДЕРЖИМОМУ. Растянутая во всю колонку панель с двумя числами
слева и пустотой справа выглядит недовёрстанной; `fit-content` делает её
ровно такой, сколько в ней есть.
*/
.reviews .reviews-stats {
display: flex;
flex-wrap: wrap;
align-items: stretch;
width: fit-content;
max-width: 100%;
margin: 0 0 28px;
padding: 18px 4px;
background: #fff;
border: 1px solid #f5f5f5;
border-radius: 16px;
}
.reviews .reviews-stats__item {
display: flex;
align-items: center;
gap: 16px;
padding: 2px 28px;
}
/*
Разделитель — рамка НА САМОМ ЭЛЕМЕНТЕ, а не абсолютный псевдоэлемент: у
псевдоэлемента без позиционированного предка растяжка уходит к внешнему
блоку, и это уже приводило к белому экрану на iPhone (§8).
*/
.reviews .reviews-stats__item + .reviews-stats__item {
border-left: 1px solid #f0f0f0;
}
.reviews .reviews-stats__value {
font-weight: 700;
font-size: 34px;
line-height: 100%;
color: #ff491a;
/* «5,0» не разрывается по запятой: половина оценки на другой строке
читается как другая оценка. */
white-space: nowrap;
}
.reviews .reviews-stats__body {
display: flex;
flex-direction: column;
gap: 6px;
/*
Иначе шкала звёзд растягивается на всю ширину колонки и раздаёт лишнее
место между звёздами: замер дал 160px против 96px у той же шкалы в
карточке отзыва — то есть звёзды визуально «разъезжались» ровно там, где
их сравнивают с карточками ниже.
*/
align-items: flex-start;
}
.reviews .reviews-stats__label {
font-size: 15px;
line-height: 130%;
color: #667085;
}
@media only screen and (max-width: 620px) {
/*
На узком экране панель занимает всю ширину и раскладывается в столбик:
две ячейки в ряд при 320px дают по 130px на цифру с подписью, и подпись
рвётся на три строки.
*/
.reviews .reviews-stats {
width: 100%;
padding: 8px 4px;
}
.reviews .reviews-stats__item {
width: 100%;
padding: 12px 18px;
}
.reviews .reviews-stats__item + .reviews-stats__item {
border-left: 0;
border-top: 1px solid #f0f0f0;
}
.reviews .reviews-stats__value {
font-size: 28px;
}
}
/* --- Логотип площадки ---------------------------------------------------- */
/* Высота как у логотипа-картинки (21px + отступ макета): незнакомая площадка не
должна менять геометрию карточки. */
.reviews .reviews-list__logo--text {
display: inline-flex;
align-items: center;
min-height: 21px;
padding: 2px 10px;
border: 1px solid #e6e6e6;
border-radius: 999px;
font-size: 12px;
line-height: 120%;
color: #667085;
/* Переносится, а не выпирает: замер на 320px дал подпись 226px при 228px
свободных внутри карточки — запаса нет, и любое более длинное название
площадки вылезло бы за край. */
max-width: 100%;
}
/* --- Текст отзыва: одна линия обрезки на весь ряд ------------------------ */
/*
ТЕКСТ У ВСЕХ КАРТОЧЕК ЗАКАНЧИВАЕТСЯ НА ОДНОЙ ЛИНИИ. В макете у блока текста
стоял `max-height`, то есть высоту задавала длина отзыва: короткий кончался
на второй строке, длинный — на седьмой. Карточки при этом равные (ряд
растянут), но ссылки «Читать полностью» и «Читать на площадке» вставали на
разной высоте, а под короткой карточкой оставалось полполя пустоты — ряд
выглядел рваным. Высота здесь фиксированная: она и есть та линия, ниже
которой текста не бывает, и всё, что под ней, выравнивается само.
ВЫСОТА СЧИТАЕТСЯ ОТ КЕГЛЯ, А НЕ В ПИКСЕЛЯХ. `1.4em` — это ровно одна строка
(макетный `line-height: 140%`), поэтому на брейкпоинте с другим шрифтом блок
остаётся теми же тремя строками, без второго набора констант. Менять число
строк — одной цифрой в `--reviews-lines`.
*/
.reviews .reviews-list__content {
--reviews-lines: 3;
height: calc(var(--reviews-lines) * 1.4em);
max-height: none;
/*
РАСТУШЁВКА — ТОЛЬКО У ОБРЕЗАННОГО ТЕКСТА. Макет красит текст градиентом
(`background-clip: text`) всегда, и у короткого отзыва выцветала его
последняя строка: законченная мысль читалась как оборванная на полуслове.
*/
background: none;
-webkit-text-fill-color: currentColor;
color: #535353;
}
.reviews .reviews-list__item--long .reviews-list__content {
background: linear-gradient(180deg, rgba(255, 255, 255, 0) 45.69%, #fff 110.34%), #535353;
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
}
/* --- Длинный отзыв ------------------------------------------------------- */
.reviews .reviews-list__toggle {
position: absolute;
opacity: 0;
pointer-events: none;
width: 0;
height: 0;
}
/*
Раскрытая карточка: снимаем и ограничение высоты, и градиентную «растушёвку»
макета — она нарисована фоном по тексту (`background-clip: text`), и без её
снятия конец раскрытого отзыва оставался бы выцветшим.
*/
.reviews .reviews-list__toggle:checked ~ .reviews-list__content {
height: auto;
max-height: none;
background: none;
-webkit-text-fill-color: currentColor;
color: #535353;
}
.reviews .reviews-list__more-close,
.reviews .reviews-list__toggle:checked ~ .reviews-list__links .reviews-list__more-open {
display: none;
}
.reviews .reviews-list__toggle:checked ~ .reviews-list__links .reviews-list__more-close {
display: inline;
}
.reviews .reviews-list__more-link {
cursor: pointer;
}
/* Клавиатура: у label нет своего фокуса, поэтому подсвечиваем его от чекбокса —
иначе управлять раскрытием можно только мышью. */
.reviews .reviews-list__toggle:focus-visible ~ .reviews-list__links .reviews-list__more-link {
outline: 2px solid #ff491a;
outline-offset: 3px;
}
/* --- Ссылка на оригинал -------------------------------------------------- */
.reviews .reviews-list__source-link {
font-size: 15px;
line-height: 140%;
color: #667085;
border-bottom: 1px solid rgba(102, 112, 133, .4);
}
.reviews .reviews-list__source-link:hover {
color: #ff491a;
border-bottom-color: #ff491a;
}
/* --- Кнопки под каруселью ------------------------------------------------ */
@media only screen and (max-width: 767px) {
/* Кнопки в столбик и во всю ширину: «Записаться на бесплатную консультацию»
не помещается в строку с соседкой уже на 430px. */
.reviews .reviews-actions {
flex-direction: column;
align-items: stretch;
gap: 12px;
}
.reviews .reviews-actions__item {
width: 100%;
}
.reviews .reviews-actions__btn {
width: 100%;
}
}
/* === homepage/css/why.css === */
/* ==========================================================================
Блок «Почему выбирают „ПОД КЛЮЧ“»
СЕТКА ВМЕСТО ЛЕНТЫ. Макет держал `.why-list` флексом с `flex: calc(33.3333% -
17.4px) 0 0` и одновременно отдавал его Swiper'у (`.why-list.swiper`). Здесь
карусели нет: 3 карточки в ряд на desktop, 2 на планшете, 1 на телефоне —
обычный grid, без подгонки отдельных карточек отступами.
ВЫРАВНИВАНИЕ ВНУТРИ РЯДА ДЕРЖИТ SUBGRID. Требование «более длинный заголовок
не должен толкать текст ниже относительно соседей» нельзя выполнить, пока
каждая карточка считает высоту своей шапки сама: заголовок в две строки
опускает свой текст на строку ниже, чем у соседей. Карточка занимает две
строки внешней сетки и наследует их (`grid-template-rows: subgrid`), поэтому
шапки всех карточек ряда имеют одну высоту, а тексты начинаются с одной линии
по построению — а не потому, что заголовки случайно одной длины.
ЗАПАСНОЙ ВАРИАНТ ЧЕСТНЫЙ. Там, где subgrid не поддерживается, шапке задаётся
минимальная высота в две строки: выравнивание держится, пока заголовок не
длиннее двух строк. Это хуже subgrid и лучше разъезжающихся текстов.
========================================================================== */
.why .why-list {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px 26px;
/* Флексовые правила макета не должны участвовать. */
flex-wrap: initial;
align-items: stretch;
}
/*
Карточка занимает две строки ряда: первая — шапка (иконка + заголовок),
вторая — текст. Высота карточек одинакова, потому что это ячейки одной сетки,
а не элементы, подогнанные друг под друга.
*/
.why .why-list__item {
grid-row: span 2;
display: grid;
grid-template-rows: subgrid;
gap: 16px;
/* Ширину задаёт колонка: макетное `flex: calc(33.3333% …)` здесь мешает. */
flex: initial;
max-width: none;
height: auto;
margin: 0;
}
.why .why-list-header {
/* Иконка и заголовок — по верхнему краю: при заголовке в две строки
центрирование опускало бы иконку относительно соседних карточек. */
align-items: flex-start;
margin: 0;
}
.why .why-list__content {
margin: 0;
}
/* --- Иконка -------------------------------------------------------------- */
/*
Размер и цвет глифа задаёт макет (`.why-list-header__icon`: 52px, ниже 1100px
— 46px). Здесь только защита от сжатия: во flex-строке иконка не должна
ужиматься под длинный заголовок — иначе в карточке с двумя строками названия
она окажется уже, чем у соседей.
*/
.why .why-icon {
flex: 0 0 auto;
line-height: 1;
}
/* --- Запасной вариант без subgrid ---------------------------------------- */
@supports not (grid-template-rows: subgrid) {
.why .why-list__item {
grid-row: auto;
display: flex;
flex-direction: column;
}
/* Две строки заголовка + высота иконки: тексты остаются на одной линии,
пока заголовок не длиннее двух строк. */
.why .why-list-header {
min-height: 60px;
margin: 0 0 16px;
}
}
/* --- Планшет ------------------------------------------------------------- */
@media only screen and (max-width: 1100px) {
.why .why-list {
grid-template-columns: repeat(2, 1fr);
gap: 16px;
}
}
/* --- Телефон ------------------------------------------------------------- */
@media only screen and (max-width: 767px) {
.why .why-list {
grid-template-columns: 1fr;
}
/* Одна колонка: subgrid внутри ряда из одной карточки ничего не выравнивает,
и лишняя строка сетки только добавляла бы пустоту под коротким текстом. */
.why .why-list__item {
grid-row: auto;
display: flex;
flex-direction: column;
}
.why .why-list-header {
min-height: 0;
margin: 0 0 12px;
}
}
/* === homepage/css/quality.css === */
/* ==========================================================================
Блок «Контроль качества на объектах»
СЕТКА ВМЕСТО ЛЕНТЫ. Макет держал `.control-list` флексом с
`flex: calc(25% - 20.3px) 0 0` и одновременно отдавал `.wrap-control-list`
Swiper'у. Здесь карусели нет: 4 карточки в ряд на desktop, 2×2 на планшете,
1 на телефоне — grid, без подгонки карточек отступами.
ВЫРАВНИВАНИЕ ДЕРЖИТ SUBGRID. Требования «фотографии одинаковой высоты»,
«заголовки начинаются на одной линии», «контентные области одинаковой высоты»
нельзя выполнить, пока каждая карточка считает высоту своих частей сама:
должность в две строки опускает подзаголовок и список ниже, чем у соседей.
Карточка занимает четыре строки внешней сетки (фото / шапка / подзаголовок /
список) и наследует их, поэтому части выровнены по построению.
ЗАПАСНОЙ ВАРИАНТ. Без subgrid карточка становится обычной колонкой, а шапке и
подзаголовку задаётся минимальная высота: выравнивание держится, пока
должность не длиннее двух строк.
========================================================================== */
.quality .quality__list {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 27px;
/* Флексовые правила макета не должны участвовать. */
flex-wrap: initial;
align-items: stretch;
/* Номер приходит из данных, счётчик вёрстки не нужен. */
counter-reset: none;
}
.quality .quality__item {
/* Четыре строки: фото, шапка, подзаголовок, список. */
grid-row: span 4;
display: grid;
grid-template-rows: subgrid;
gap: 0;
flex: initial;
max-width: none;
height: auto;
background: #fff;
border-radius: 16px;
overflow: hidden;
}
/* Блок без фотографий: строк три — шапка, подзаголовок, список. */
.quality:not(.quality--with-photos) .quality__item {
grid-row: span 3;
}
/* Номер печатает шаблон: у вёрстки он был CSS-счётчиком и зависел от позиции,
поэтому скрытие второй карточки давало уровни 1, 2, 3 вместо 1, 3, 4. */
.quality .control-list__wrap-img::after {
content: none;
}
/* --- Фотография ---------------------------------------------------------- */
.quality .quality__media {
position: relative;
height: 214px;
}
.quality .quality__media img {
width: 100%;
height: 100%;
object-fit: cover;
}
/* Место под фотографию, которой ещё нет: нейтральная плашка в тон блока. */
.quality .quality__media-empty {
width: 100%;
height: 100%;
background: linear-gradient(180deg, #fff5f5 0%, #ffecea 100%);
}
/* --- Номер уровня -------------------------------------------------------- */
.quality .quality__number {
display: inline-flex;
align-items: center;
justify-content: center;
flex: 0 0 auto;
min-width: 35px;
height: 33px;
padding: 0 8px;
background: #ff491a;
border-radius: 6px;
font-weight: 700;
font-size: 21px;
line-height: 100%;
color: #fff;
}
.quality .quality__number--on-photo {
position: absolute;
top: 10px;
right: 10px;
z-index: 1;
}
/* --- Содержимое ---------------------------------------------------------- */
.quality .quality__content {
display: grid;
grid-template-rows: subgrid;
/* Три строки содержимого; четвёртая (фото) остаётся снаружи. */
grid-row: span 3;
gap: 12px;
padding: 20px;
}
/*
ПО БАЗОВОЙ ЛИНИИ, А НЕ ПО ЦЕНТРУ. Строка шапки у всех карточек одной высоты
(subgrid), но при `align-items: center` короткая должность центрируется в ней
и начинается ниже длинной: замер дал 42px против 20px у должности в три
строки. Baseline сажает первую строку названия на одну линию во всех
карточках и заодно выравнивает её с цифрой в плашке.
*/
.quality .quality__head {
display: flex;
align-items: baseline;
gap: 12px;
margin: 0;
}
.quality .quality__title {
margin: 0;
font-size: 18px;
line-height: 120%;
color: #111;
}
.quality .quality__subtitle {
margin: 0;
font-size: 15px;
line-height: 140%;
color: #667085;
}
.quality .quality__points {
margin: 0;
}
.quality .quality__points ul {
margin: 0;
padding: 0;
list-style: none;
display: grid;
gap: 10px;
}
.quality .quality__points li {
position: relative;
padding-left: 18px;
font-size: 15px;
line-height: 140%;
color: #999;
}
/* Маркер рисуется на самом пункте: у него есть своя строка, и растягивать
псевдоэлемент от списка не нужно (CLAUDE.md §8). */
.quality .quality__points li::before {
content: '';
position: absolute;
left: 0;
top: 8px;
width: 6px;
height: 6px;
border-radius: 50%;
background: #ff491a;
}
/* --- Запасной вариант без subgrid ---------------------------------------- */
@supports not (grid-template-rows: subgrid) {
.quality .quality__item,
.quality:not(.quality--with-photos) .quality__item {
grid-row: auto;
display: flex;
flex-direction: column;
}
.quality .quality__content {
display: flex;
flex-direction: column;
grid-row: auto;
flex: 1 1 auto;
}
/* Две строки должности и две строки подзаголовка: списки остаются на одной
линии, пока тексты не длиннее этого. */
.quality .quality__head {
min-height: 44px;
}
.quality .quality__subtitle {
min-height: 42px;
}
}
/* --- Планшет ------------------------------------------------------------- */
@media only screen and (max-width: 1100px) {
.quality .quality__list {
grid-template-columns: repeat(2, 1fr);
gap: 16px;
}
}
/* --- Телефон ------------------------------------------------------------- */
@media only screen and (max-width: 767px) {
.quality .quality__list {
grid-template-columns: 1fr;
}
/*
Одна колонка: subgrid внутри ряда из одной карточки ничего не выравнивает
и только добавляет пустоту под коротким текстом. Размер шрифта при этом не
уменьшается — читаемость важнее сохранения колонок.
*/
.quality .quality__item,
.quality:not(.quality--with-photos) .quality__item {
grid-row: auto;
display: flex;
flex-direction: column;
}
.quality .quality__content {
display: flex;
flex-direction: column;
grid-row: auto;
}
.quality .quality__head,
.quality .quality__subtitle {
min-height: 0;
}
}
/* === homepage/css/estimate.css === */
/* ==========================================================================
Блок «Получите смету в день обращения»
ФОН — СЛОЙ, А НЕ СВОЙСТВО БЛОКА. В макете `.wrap-estimate` несёт
`background: url(../img/bgs/desktop/estimate-bg.jpg)`, то есть кадр зашит в
стиль, один на 354 города. Здесь картинка приходит из слайда отдельным
`![]() `: работают srcset, webp-двойник и ленивая загрузка, на телефон уезжает
копия на 400/800 px. Макетный фон гасится — иначе браузер скачал бы обе
картинки, а нижняя всё равно не видна.
ЗАТЕМНЕНИЕ ОТДЕЛЬНЫМ СЛОЕМ, как в блоке консультации: редактор поставит
светлый кадр, и белый текст на нём исчезнет; подбирать «файл потемнее» —
значит чинить вёрстку картинкой.
========================================================================== */
.estimate-block {
position: relative;
overflow: hidden;
background-color: #1d2939;
background-image: none;
isolation: isolate;
}
.estimate-block__bg {
position: absolute;
inset: 0;
z-index: -2;
}
.estimate-block__bg picture,
.estimate-block__bg img {
display: block;
width: 100%;
height: 100%;
}
.estimate-block__bg img {
object-fit: cover;
object-position: center;
}
/* Затемнение живёт на самом блоке — позиционированный предок у псевдоэлемента
должен быть очевидным (CLAUDE.md §8). */
.estimate-block--photo::before {
content: '';
position: absolute;
inset: 0;
z-index: -1;
background: rgba(16, 24, 40, var(--estimate-overlay, .55));
pointer-events: none;
}
.estimate-block[data-overlay='none']::before { --estimate-overlay: 0; }
.estimate-block[data-overlay='light']::before { --estimate-overlay: .35; }
.estimate-block[data-overlay='medium']::before { --estimate-overlay: .55; }
.estimate-block[data-overlay='strong']::before { --estimate-overlay: .72; }
.estimate-block__inner {
position: relative;
}
/* --- Строка формы -------------------------------------------------------- */
/*
Имя | Телефон | кнопка — одной линией, как в блоке консультации.
`align-items: stretch` делает равную высоту свойством строки, а не
совпадением двух констант.
*/
.estimate-block__row {
display: flex;
align-items: stretch;
flex-wrap: wrap;
gap: 12px;
margin: 0;
}
/*
БАЗИС МАЛЕНЬКИЙ НАМЕРЕННО. Левая колонка блока — не вся ширина страницы, а
643px (справа стоит панель процесса), и при базисе 200px три элемента в неё не
помещались: строка переносилась, кнопка уезжала под поля и схлопывалась до
27px — `height: 100%` в отдельной строке не от чего разрешать. Базис 120px
оставляет раскладку одной строкой, а фактическую ширину полей считает flex.
*/
.estimate-block__row > .form__item {
flex: 1 1 120px;
/* Иначе flex-элемент не сожмётся уже содержимого и строка вылезет вбок. */
min-width: 0;
display: block;
}
.estimate-block__row .form__wrap-input,
.estimate-block__row .form__input {
width: 100%;
}
.estimate-block .estimate-block__row .form__item.estimate-block__submit {
flex: 0 0 auto;
max-width: none;
}
.estimate-block .estimate-block__row .form__item.estimate-block__submit .form__btn {
width: 100%;
min-width: 200px;
margin: 0;
}
@media only screen and (min-width: 1101px) {
/* Растяжение — только там, где есть строка: у колонки высота задана
содержимым, процент разрешать не от чего, и кнопка падает до высоты своей
надписи (CLAUDE.md §8). */
.estimate-block__row .form__wrap-input,
.estimate-block__row .form__input,
.estimate-block .estimate-block__row .form__item.estimate-block__submit .form__btn {
height: 100%;
}
}
/* --- Согласия и примечание ----------------------------------------------- */
.estimate-block__consents {
margin: 16px 0 0;
}
.estimate-block__consents .lead-consent__text,
.estimate-block__consents .form-privacy__txt {
color: rgba(255, 255, 255, .82);
}
.estimate-block__consents a {
color: #fff;
}
.estimate-block .estimate-note {
margin: 18px 0 0;
}
/* --- Мобильная ----------------------------------------------------------- */
@media only screen and (max-width: 1100px) {
/* Всё в столбик и во всю ширину: поля, кнопка, согласия. */
.estimate-block__row {
flex-direction: column;
gap: 10px;
}
.estimate-block__row > .form__item {
flex: 1 1 auto;
width: 100%;
}
.estimate-block .estimate-block__row .form__item.estimate-block__submit .form__btn {
min-width: 0;
width: 100%;
}
.estimate-block .estimate-note__btn {
width: 100%;
}
}
@media only screen and (max-width: 480px) {
/* Длинные юридические ссылки рвутся по слогам, а не вылезают за край. */
.estimate-block__consents a {
overflow-wrap: anywhere;
}
}
/* === homepage/css/agreement.css === */
/* ==========================================================================
Блок «Договор и гарантии»
ПУНКТЫ — СЕТКОЙ, А НЕ ФЛЕКСОМ. Макет раскладывает их `flex: 1` с переносом, и
при трёх пунктах на планшете получалось два ряда неравной ширины: замер на
768px дал 160px и 333px рядом. Ширину должна задавать колонка, а не длина
текста, поэтому здесь grid: три колонки на desktop, одна ниже 768.
ВЫРАВНИВАНИЕ ЗАГОЛОВКОВ. Пункты «Сроки», «Стоимость» и «Гарантия» — короткие,
но описание у них разной длины: `align-items: stretch` у ячеек сетки делает
высоту свойством ряда, а не совпадением длин.
========================================================================== */
/*
`minmax(0, 1fr)`, А НЕ `1fr`. У `1fr` минимум равен min-content, поэтому
колонка с длинным словом забирает больше своей доли: замер дал 129 / 144 /
142 вместо равных. Нулевой минимум делает колонки действительно равными, а
текст переносится внутри.
*/
.agreement-block .agreement-block__list {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 14px;
width: 100%;
/* Флексовые правила макета не должны участвовать. */
flex-wrap: initial;
align-items: stretch;
}
.agreement-block .agreement-block__list .agreement-list__item {
/* Ширину задаёт колонка сетки: макетное `flex: 1` мешает. */
flex: initial;
}
/*
ПОРОГ ПО ШИРИНЕ КОЛОНКИ, А НЕ ПО ШИРИНЕ ОКНА. Снимок договора стоит рядом и
забирает 358px, поэтому на 768px левой колонке остаётся 333px: три колонки
превращаются в полосы по 102px при высоте 227px. Ниже 1000px раскладываем в
одну колонку — на 1024 левой части хватает (621px, колонки по ~197px).
*/
@media only screen and (max-width: 1000px) {
.agreement-block .agreement-block__list {
grid-template-columns: 1fr;
gap: 16px;
}
}
/* === homepage/css/pay.css === */
/* ==========================================================================
Блок «Способы оплаты»
СЕТКА ВМЕСТО ФЛЕКСА. Макет раскладывает карточки `flex: 1` с переносом, то
есть ширину диктует длина названия: «Кредит» получал полосу заметно уже, чем
«Оплата банковской картой». Здесь ширину задаёт колонка.
`minmax(0, 1fr)`, А НЕ `1fr` — у `1fr` минимум равен min-content, и колонка с
длинным словом забирает больше своей доли (проверено на блоке договора).
========================================================================== */
/*
ШИРИНА ТЕКСТА = ШИРИНЕ РЯДА КАРТОЧЕК. Ограничение меры (920px при ряде в
1106px) выглядело поломкой: правый край абзаца обрывался заметно раньше
карточек под ним, и блок читался как незаконченный. Длину строки держит сам
текст — три предложения, а не шесть строк.
*/
.pay-block .pay-block__list {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 26px;
width: 100%;
/* Флексовые правила макета не должны участвовать. */
flex-wrap: initial;
align-items: stretch;
}
.pay-block .pay-block__list .pay-list__item {
/* Ширину задаёт колонка сетки: макетное `flex: 1` мешает. */
flex: initial;
}
/* Уточнение под названием: факт, а не реклама, поэтому и выглядит спокойно. */
.pay-block .pay-block__note {
margin: 4px 0 0;
font-size: 14px;
line-height: 130%;
color: #667085;
}
/* --- Планшет ------------------------------------------------------------- */
@media only screen and (max-width: 1100px) {
.pay-block .pay-block__list {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 10px;
}
}
/* --- Телефон ------------------------------------------------------------- */
@media only screen and (max-width: 620px) {
/*
Одна колонка. Порог 620, а не 767: на двух колонках карточка ужимается до
~140px, и название «Оплата банковской картой» ложится в четыре строки
рядом с иконкой 46px — читается как ошибка вёрстки.
*/
.pay-block .pay-block__list {
grid-template-columns: 1fr;
}
}
/* === homepage/css/faq.css === */
/*
* FAQ: вопрос — заголовок и кнопка.
*
* ЗАЧЕМ ПРАВКА. Замер главной: двадцать вопросов, четырнадцать скрыты целиком,
* все двадцать ответов `display: none`, а заголовок — `` с `cursor:
* pointer`. Фокусируемых элементов среди заголовков — ноль: с клавиатуры не
* открывался ни один ответ. Разметка теперь `h3 > button`, и здесь снимается
* то, что браузер рисует у кнопки и у заголовка по умолчанию.
*
* ВНЕШНИЙ ВИД НЕ МЕНЯЕТСЯ. Все размеры, цвет и стрелка остаются на `.faq__title`
* из вёрстки; здесь только сброс собственных стилей `button` и `h3`, ширина на
* всю строку (чтобы область нажатия совпадала с прежней) и видимый фокус.
*/
.faq__heading {
/*
* Заголовок не должен принести свой кегль и отступы: визуально это та же
* строка, что была, — меняется её роль в структуре документа, а не вид.
*/
margin: 0;
padding: 0;
font: inherit;
color: inherit;
}
.faq__item .faq__title {
/*
* Кнопка приходит со своим шрифтом, фоном, рамкой и выравниванием по
* центру. Всё это снимается здесь, а не в вёрстке: `.faq__title` из мокапа
* задаёт вид, и переопределять его значило бы держать два описания одного
* элемента.
*/
display: block;
width: 100%;
margin: 0;
background: none;
border: 0;
font: inherit;
font-weight: 700;
font-size: 16px;
line-height: 120%;
color: #111;
text-align: left;
-webkit-appearance: none;
appearance: none;
}
/*
* ВИДИМЫЙ ФОКУС — обязательная часть правки, а не украшение. Смысл всей замены
* в том, что до вопроса теперь можно дойти клавишей Tab; без заметной рамки
* человек не увидит, где он находится, и доступность останется формальной.
*
* `:focus-visible`, а не `:focus`: браузер сам решает, показывать ли рамку, и
* при нажатии мышью её не будет — как у остальных кнопок страницы.
*/
.faq__item .faq__title:focus-visible {
outline: 2px solid #ff5c00;
outline-offset: 4px;
border-radius: 4px;
}
/* === homepage/css/article.css === */
/* ==========================================================================
Статья: «Важно знать» на главной и внутренние текстовые страницы
ОДИН НАБОР ПРАВИЛ НА ВСЕ СТАТЬИ. Разметку печатает общий компонент
, он же используется страницей «О компании». Второй файл со
своими отступами и своей шириной колонки разошёлся бы с первым при первой
правке, и две статьи на одном сайте выглядели бы по-разному.
ВЁРСТКА БЛОКА — МАКЕТНАЯ. `.text h2/h3/p/ul/ol/figure/figcaption/blockquote`
уже описаны в style.min.css, и переписывать их здесь нечего. В этом файле
только то, чего в макете не было, потому что там лежало четыре абзаца рыбы
одинаковой длины.
========================================================================== */
/* --- Ширина строки ------------------------------------------------------- */
/*
ТЕКСТ ЗАНИМАЕТ БЛОК ЦЕЛИКОМ. Здесь стояло ограничение в 78 символов ради
комфортной длины строки — и оно же сделало блок наполовину пустым: колонка
текста кончалась на 658px при 1106px ширины карточки, и справа оставалось
белое поле в 40% блока. Читается это не как «удобная колонка», а как
недовёрстанный блок: все соседние блоки страницы занимают её ширину
полностью, и один узкий столбец посреди них выглядит ошибкой.
ЭТО УЖЕ БЫЛО В «СПОСОБАХ ОПЛАТЫ» — там абзац шириной 920px стоял над рядом
карточек шириной 1106px, и разъезжающийся правый край владелец заметил
первым же взглядом. Лечится тем же: ширину задаёт блок, а не типографская
норма. Комфорт чтения на широком экране добираем короткими абзацами и
подзаголовками, а не пустотой справа.
*/
/* --- Фотография ---------------------------------------------------------- */
/*
КАРТИНКА НЕ РАСТЯГИВАЕТСЯ. `width`/`height` из файла нужны против сдвигов
вёрстки (§7), но без этой пары они же заставили бы браузер нарисовать кадр
в его собственных пикселях — шире колонки на мобильном и с искажением
пропорций там, где ширина ограничена.
*/
.text--article figure img {
display: block;
width: 100%;
height: auto;
}
/* Скругление у макета висит на `picture`, а `picture` — строчный элемент:
между ним и подписью оставался зазор от базовой линии строки. */
.text--article figure picture {
display: block;
}
/* --- Список -------------------------------------------------------------- */
/*
ПУНКТ НУМЕРОВАННОГО СПИСКА — ЭТО ТЕКСТ, А НЕ РЯД КОЛОНОК.
В макете `ol li` объявлен `display: flex` с `align-items: center`: там пункт
всегда был одной строкой простого текста, и флекс ничего не ломал. Но у
пункта с подписью внутри два узла — `` и текст за ним, — и флекс
делает из них ДВА СТОЛБЦА: подпись «Перепланировку помещений.» встала
колонкой в 180px и переносилась по словам, а объяснение начиналось справа
от неё, отдельным столбцом, с оторванным двоеточием в начале строки.
Номер при этом никуда не денется: он рисуется `::before` в абсолютной
позиции, и `display: block` его не трогает.
Замер: `li` 1106px, внутри `strong` 180×39 отдельным блоком — именно это и
видно на странице как «подпись слева, текст справа».
*/
.text--article ol li {
display: block;
}
/* Номер макет центрирует по высоте пункта (`top: 50%`) — у пункта в две
строки это середина абзаца. Возвращаем его к первой строке. */
.text--article ol li::before {
top: 0;
transform: none;
}
/* Межстрочное расстояние списка — как у абзаца: 129% макета рассчитаны на
строку-другую, а у пункта из трёх строк слова слипаются. */
.text--article ol li,
.text--article ul li {
line-height: 140%;
}
/* --- Плашка «Важно знать» ------------------------------------------------ */
/*
Правый отступ 80px в макете оставлен под декор, которого в блоке нет: на
узком экране он съедал четверть строки, а на широком делал плашку заметно
уже соседнего текста.
*/
.text--article blockquote {
padding-right: 22px;
}
.text--article blockquote h4 span {
color: #ff491a;
}
@media only screen and (max-width: 767px) {
/* Отступ фигуры на мобильном — как у абзаца: 30px сверху и снизу разрывают
статью пополам на экране высотой в шесть строк. */
.text--article figure {
margin: 20px 0;
}
}
/* ------------------------------------- статья как отдельная страница -- */
/*
* ТЕКСТ ЗАНИМАЕТ ОБЛАСТЬ СТРАНИЦЫ ЦЕЛИКОМ — И НА ВНУТРЕННЕЙ ТОЖЕ.
*
* ЗДЕСЬ СТОЯЛО `max-width: 900px` ради длины строки, и владелец увидел ровно
* то, о чём предупреждает комментарий в начале файла: замер на 1440 дал
* область 1146px при тексте 900px — 226px пустоты справа, текст прижат к
* левому краю. На главной это правило уже снимали по той же причине, и держать
* его на внутренней странице значило иметь две разные статьи на одном сайте.
*
* ДЛИНА СТРОКИ ЛЕЧИТСЯ НЕ ПУСТОТОЙ. Длинный перечень уходит в две колонки
* (ниже), абзацы держатся короткими, у разделов есть заголовки. Это работа
* содержимого, а не поля справа.
*/
/* --- Читаемость ---------------------------------------------------------- */
/*
* МЕЖСТРОЧНОЕ РАССТОЯНИЕ — ПОД ДЛИНУ СТРОКИ. Макетные 130% рассчитаны на узкую
* колонку в карточке; на полной ширине области страницы строка длинная, и на
* возврате к началу следующей глаз промахивается мимо строки. Это та же правка,
* что уже сделана спискам ниже в этом файле.
*/
.text--article p {
line-height: 160%;
}
/*
* ВЫДЕЛЕНИЕ ВНУТРИ ТЕКСТА. В legacy жирным открыта мысль абзаца — «
* Косметический ремонт %CITY – это декоративная отделка…». Своего
* правила у `strong` в макете нет вовсе, и браузерного `bold` (700) при Roboto
* рядом с обычным начертанием мало: выделение видно, только если знать, что оно
* там есть. Цвет основного текста вместо серого добавляет ему тот же вес, что
* даёт заголовку его насыщенность.
*/
.text--article strong {
font-weight: 700;
color: #303030;
}
/*
* ПУНКТ СПИСКА — ТОТ ЖЕ ТЕКСТ, ЧТО АБЗАЦ. В макете он светло-серый (#999) на
* белом: контраст 2.8:1 — ниже порога WCAG AA (4.5:1) для основного текста, и
* на телефоне при свете такой перечень читается с трудом. У «Косметического
* ремонта» в этом сером лежит всё содержание страницы: 29 пунктов против двух
* абзацев. Цвет берётся у абзаца, а не назначается свой.
*/
.text--article ul li,
.text--article ol li {
color: #535353;
}
/* --- Перечень в две колонки ---------------------------------------------- */
/*
* КОЛОНКИ ВКЛЮЧАЕТ РАЗМЕТКА, А НЕ ЭТОТ ФАЙЛ. Класс `article-list--split`
* ставит компонент и только там, где список это действительно перечень:
* пунктов от восьми, ни у одного нет подписи, каждый в строку-другую. У
* «Косметического ремонта» их 29 по одной строке — столбиком это два экрана
* вертикали, и справа от каждого пункта 900px пустоты.
*
* ОДНА КОЛОНКА НА УЗКОМ. Порог 900px взят по замеру: ниже него на колонку
* остаётся меньше 430px, и пункт вроде «Декоративная отделка: укладка кафельной
* плитки или использование декоративных штукатурок» ломается на три строки —
* две колонки перестают экономить высоту и начинают мешать чтению.
*/
@media only screen and (min-width: 900px) {
.text--article .article-list--split {
column-count: 2;
column-gap: 48px;
}
/*
* ПУНКТ НЕ ДЕЛИТСЯ МЕЖДУ КОЛОНКАМИ. Без этого пункт из двух строк
* оставляет первую строку внизу левой колонки, а вторую — вверху правой:
* читается как два разных пункта, один из которых начинается с середины
* фразы.
*/
.text--article .article-list--split li {
break-inside: avoid;
page-break-inside: avoid;
}
}
/*
* РАЗДЕЛИТЕЛЬ МЕЖДУ ПУНКТАМИ. В перечне из тридцати строк глазу не за что
* зацепиться: одинаковые короткие строки сливаются в столбик, и найти взглядом
* нужную работу трудно. Линия идёт под пунктом, а не рамкой вокруг: это всё
* ещё список, а не таблица.
*/
.text--article .article-list--split li {
padding-bottom: 8px;
border-bottom: 1px solid #ededed;
}
/* Последний пункт колонки линию не рисует — под ним уже граница блока. */
.text--article .article-list--split li:last-child {
border-bottom: 0;
}
/*
* Отступ между первым экраном и текстом страницы — тот же, что между блоками
* главной. Своей константы здесь нет: `.wrap-text` уже несёт внешние отступы
* блока, а крошки — свой сверху.
*/
.inner-page__content {
min-width: 0;
}
/*
* КРОШКИ ВЫРАВНЕНЫ ПО ЛЕВОМУ КРАЮ ОБЛАСТИ СТРАНИЦЫ. Внутренний отступ у
* `.wrap-text` свой на каждой ширине (замер: 20px на 1440, 0 на 390), и
* повторять его у крошек значило бы держать вторую копию чужого числа — она
* разъехалась бы при первой правке макета.
*/
/* --- Статья как отдельная страница: белый фон ---------------------------- */
/*
* По просьбе владельца статья внутренней страницы стоит на белом.
*
* В вёрстке `.wrap-text` залит `#fbfbfb` с градиентом — на главной это один
* блок среди других серых, и он читается как карточка. На внутренней странице
* это ВСЯ страница, и серая плашка во весь экран выглядит не карточкой, а
* выключенным блоком.
*
* Селектор с `.page--inner`: правило вёрстки записано одним классом, и
* одиночный `.wrap-text` проиграл бы ему по порядку, а не по смыслу. Блок
* «Важно знать» на главной остаётся серым — его этот селектор не задевает.
*/
.page--inner .wrap-text {
background: #fff;
}
/* --- Заголовок страницы -------------------------------------------------- */
/*
* H1 отделён от текста так же, как всё остальное в статье.
*
* ЧТО БЫЛО. В вёрстке `.text` никогда не содержал H1: на главной статья
* начинается с H2, и правило для первого уровня туда просто не написали. Замер:
* у абзаца, списка и H2 внутри статьи `margin-bottom: 20px`, у H1 — `0`, и
* первая строка текста прилипала к заголовку вплотную (зазор 0px).
*
* ЧИСЛО НЕ ПРИДУМАНО: это тот же шаг 20px, которым разделено всё остальное в
* блоке. Своя константа здесь завела бы второй ритм в одном тексте.
*/
.text--article h1 {
margin-bottom: 20px;
}
/*
* ТАБЛИЦА ВНУТРИ СТАТЬИ.
*
* ОТКУДА ОНА. У 33 разделов внутри «Важно знать» из legacy лежит таблица
* «Вид работ / Описание / Цена (руб) / Единицы измерения». Вёрстки для неё в
* макете нет: там таблицы либо матрицы главной, либо прайс-лист, и оба
* набора правил написаны под своё содержимое (§8) — брать их сюда значит
* получить чужую геометрию.
*
* ПРОКРУТКА ВНУТРИ СВОЕЙ ОБЁРТКИ, А НЕ У ДОКУМЕНТА. Колонок четыре, и на
* 390 px они не помещаются никогда; без этого вбок уезжает вся страница.
*
* ШИРИНА КОЛОНОК НЕ ЗАДАНА ЧИСЛАМИ: таблицы приехали из legacy, число и смысл
* колонок у них разные, и любое `nth-child` здесь было бы правилом под одну
* таблицу из тридцати трёх (§8).
*/
.text--article .article-table {
margin-bottom: 24px;
overflow-x: auto;
/* Полоса прокрутки не должна закрывать последнюю строку. */
padding-bottom: 4px;
}
.text--article .article-table table {
width: 100%;
/* Ячейкам нужна собственная ширина по содержимому, иначе на узком экране
«Единицы измерения» сжимается в столбик по одной букве. */
min-width: 560px;
border-collapse: collapse;
font-size: 15px;
line-height: 140%;
}
.text--article .article-table th,
.text--article .article-table td {
padding: 10px 14px;
border: 1px solid #e6e6e6;
text-align: left;
vertical-align: top;
/* Длинное слово из legacy («выключателей,светильников» без пробела) не
имеет права вылезти за колонку — §7.9.1, тот же случай, что в прайсе. */
overflow-wrap: break-word;
}
.text--article .article-table th {
background: #f6f6f6;
font-weight: 700;
color: #303030;
}
.text--article .article-table td {
color: #535353;
}
/* Полосатость облегчает чтение длинных перечней работ. */
.text--article .article-table tbody tr:nth-child(even) td {
background: #fbfbfb;
}
/* === homepage/css/geography.css === */
/* ==========================================================================
Блок «Наши представители есть в городах»
Вёрстка новая: у макета здесь лежали семнадцать городов без ссылок в трёх
колонках фиксированной ширины, и переключение вкладок делал скрипт. Здесь —
сетка на `auto-fill`, ссылки и переключение чистым CSS.
ПЕРЕКЛЮЧЕНИЕ БЕЗ СКРИПТА — ТОТ ЖЕ ПРИЁМ, ЧТО В ПРАЙС-ЛИСТЕ: скрытые радио
перед лентой вкладок, `:checked ~` показывает свою панель и красит свою
вкладку. Все города при этом остаются в документе, то есть видны поиску.
========================================================================== */
/* --- Переключатели -------------------------------------------------------- */
.geo .geo__switch {
position: absolute;
opacity: 0;
pointer-events: none;
width: 0;
height: 0;
}
/*
Панель и вкладка по номеру отмеченного радио. Девять пар — по числу округов
в словаре (App\Support\FederalDistrict); лишние правила ничего не стоят и
ждут округ, который появится.
*/
.geo .geo__switch:nth-of-type(1):checked ~ .geo__panes .geo__pane:nth-child(1),
.geo .geo__switch:nth-of-type(2):checked ~ .geo__panes .geo__pane:nth-child(2),
.geo .geo__switch:nth-of-type(3):checked ~ .geo__panes .geo__pane:nth-child(3),
.geo .geo__switch:nth-of-type(4):checked ~ .geo__panes .geo__pane:nth-child(4),
.geo .geo__switch:nth-of-type(5):checked ~ .geo__panes .geo__pane:nth-child(5),
.geo .geo__switch:nth-of-type(6):checked ~ .geo__panes .geo__pane:nth-child(6),
.geo .geo__switch:nth-of-type(7):checked ~ .geo__panes .geo__pane:nth-child(7),
.geo .geo__switch:nth-of-type(8):checked ~ .geo__panes .geo__pane:nth-child(8),
.geo .geo__switch:nth-of-type(9):checked ~ .geo__panes .geo__pane:nth-child(9) {
display: block;
}
.geo .geo__switch:nth-of-type(1):checked ~ .geo__nav .geo__tab:nth-of-type(1),
.geo .geo__switch:nth-of-type(2):checked ~ .geo__nav .geo__tab:nth-of-type(2),
.geo .geo__switch:nth-of-type(3):checked ~ .geo__nav .geo__tab:nth-of-type(3),
.geo .geo__switch:nth-of-type(4):checked ~ .geo__nav .geo__tab:nth-of-type(4),
.geo .geo__switch:nth-of-type(5):checked ~ .geo__nav .geo__tab:nth-of-type(5),
.geo .geo__switch:nth-of-type(6):checked ~ .geo__nav .geo__tab:nth-of-type(6),
.geo .geo__switch:nth-of-type(7):checked ~ .geo__nav .geo__tab:nth-of-type(7),
.geo .geo__switch:nth-of-type(8):checked ~ .geo__nav .geo__tab:nth-of-type(8),
.geo .geo__switch:nth-of-type(9):checked ~ .geo__nav .geo__tab:nth-of-type(9) {
background: #ff491a;
border-color: #ff491a;
color: #fff;
}
/* Клавиатура: у label своего фокуса нет, подсвечиваем его от радио — иначе
переключать вкладки можно только мышью. */
.geo .geo__switch:focus-visible ~ .geo__nav .geo__tab {
outline: none;
}
.geo .geo__switch:nth-of-type(1):focus-visible ~ .geo__nav .geo__tab:nth-of-type(1),
.geo .geo__switch:nth-of-type(2):focus-visible ~ .geo__nav .geo__tab:nth-of-type(2),
.geo .geo__switch:nth-of-type(3):focus-visible ~ .geo__nav .geo__tab:nth-of-type(3),
.geo .geo__switch:nth-of-type(4):focus-visible ~ .geo__nav .geo__tab:nth-of-type(4),
.geo .geo__switch:nth-of-type(5):focus-visible ~ .geo__nav .geo__tab:nth-of-type(5),
.geo .geo__switch:nth-of-type(6):focus-visible ~ .geo__nav .geo__tab:nth-of-type(6),
.geo .geo__switch:nth-of-type(7):focus-visible ~ .geo__nav .geo__tab:nth-of-type(7),
.geo .geo__switch:nth-of-type(8):focus-visible ~ .geo__nav .geo__tab:nth-of-type(8),
.geo .geo__switch:nth-of-type(9):focus-visible ~ .geo__nav .geo__tab:nth-of-type(9) {
outline: 2px solid #ff491a;
outline-offset: 3px;
}
/* --- Города своего субъекта ---------------------------------------------- */
/*
Перечень над вкладками: та же сетка ссылок, но без переключателей — субъект
у страницы один. Отделён рамкой снизу, чтобы не слипаться с лентой округов.
*/
.geo .geo-region {
margin: 0 0 30px;
padding: 0 0 26px;
border-bottom: 1px solid #ececec;
}
/*
Заголовок берёт разметку соседнего блока (`.title h2`), поэтому кегль и
начертание у них общие по построению — переписывать их здесь нечего.
Отдельная мелкая надпись, которая тут стояла, читалась как подпись к чужому
заголовку, хотя это самостоятельный перечень.
*/
.geo .geo-region .title {
margin: 0 0 18px;
}
.geo .geo-region__list {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
gap: 10px 24px;
margin: 0;
padding: 0;
list-style: none;
}
.geo .geo-region__item {
margin: 0;
padding: 0;
list-style: none;
}
@media only screen and (max-width: 767px) {
.geo .geo-region__list {
grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
gap: 8px 16px;
}
.geo .geo-region {
margin: 0 0 22px;
padding: 0 0 20px;
}
}
@media only screen and (max-width: 359px) {
.geo .geo-region__list {
grid-template-columns: 1fr;
}
}
/* --- Заголовок и разделитель --------------------------------------------- */
.geo .geo__inner {
padding: 20px 0 0;
border-top: 1px solid #ececec;
}
/* --- Лента вкладок -------------------------------------------------------- */
.geo .geo__nav-track {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin: 0 0 22px;
}
.geo .geo__tab {
display: inline-flex;
align-items: baseline;
gap: 8px;
padding: 9px 16px;
background: #fff;
border: 1px solid #e6e6e6;
border-radius: 999px;
font-size: 14px;
line-height: 1.2;
color: #333;
white-space: nowrap;
cursor: pointer;
user-select: none;
transition: border-color .2s ease, background .2s ease, color .2s ease;
}
.geo .geo__tab:hover {
border-color: #ff491a;
}
/* Число городов — подсказка о размере вкладки, а не самостоятельная цифра. */
.geo .geo__tab-count {
font-size: 12px;
color: #999;
}
.geo .geo__switch:checked ~ .geo__nav .geo__tab .geo__tab-count {
color: inherit;
opacity: .75;
}
/* --- Список городов ------------------------------------------------------- */
.geo .geo__pane {
display: none;
}
/*
КОЛОНКИ СЧИТАЕТ САМА СЕТКА. `auto-fill` с `minmax` даёт 5–6 колонок на
широком экране и столько же, сколько поместится, на любом другом: фиксированное
число колонок оставляло бы пустое поле справа ровно на тех ширинах, под
которые его не подбирали.
*/
.geo .geo__list {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
gap: 10px 24px;
margin: 0;
padding: 0;
list-style: none;
}
.geo .geo__item {
margin: 0;
padding: 0;
/* Правило макета `.wrap-geo li::before` рисует маркер — здесь список
ссылок, а не перечисление. */
list-style: none;
}
.geo .geo__link {
display: inline-block;
padding: 2px 0;
font-size: 15px;
line-height: 140%;
color: #333;
border-bottom: 1px solid transparent;
transition: color .15s ease, border-color .15s ease;
}
.geo .geo__link:hover,
.geo .geo__link:focus-visible {
color: #ff491a;
border-bottom-color: #ff491a;
text-decoration: none;
}
/* Текущий город: он остаётся ссылкой, но видно, что вы уже здесь. */
.geo .geo__link.is-current {
font-weight: 700;
color: #ff491a;
}
@media only screen and (max-width: 767px) {
/*
Лента вкладок прокручивается вбок внутри блока — тем же способом, что в
прайс-листе. Девять вкладок в одну строку на 320px пришлось бы ужимать
до нечитаемого кегля, а перенос по строкам съедает пол-экрана до того,
как покажется первый город.
*/
.geo .geo__nav-track {
flex-wrap: nowrap;
overflow-x: auto;
scroll-snap-type: x proximity;
-webkit-overflow-scrolling: touch;
/* Полоса прокрутки не должна прижимать вкладки к тексту. */
padding-bottom: 6px;
/* Края ленты уходят под отступ блока, чтобы прокрутка читалась как
продолжение, а не как обрезанная вкладка. */
margin-right: -16px;
padding-right: 16px;
}
.geo .geo__tab {
scroll-snap-align: start;
flex: none;
}
.geo .geo__list {
grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
gap: 8px 16px;
}
}
@media only screen and (max-width: 359px) {
/* На самых узких экранах две колонки по 140px не помещаются. */
.geo .geo__list {
grid-template-columns: 1fr;
}
}
/* === homepage/css/footer.css === */
/* ==========================================================================
Подвал и окно выбора города
Вёрстка подвала макетная — здесь только то, чего в ней не было, потому что
там стояли заглушки: кнопка вместо ссылки на договор, реальный список из 354
городов в окне выбора и его поиск.
========================================================================== */
/* --- Кнопка, притворяющаяся ссылкой --------------------------------------- */
/*
«Запросить договор» — действие, а не переход: оно открывает окно заявки.
Кнопка честнее ссылки (её не откроешь в новой вкладке и не скопируешь
адрес), но выглядеть должна как соседние строки контактов.
*/
.footer .data__link--button {
padding: 0;
background: none;
border: 0;
font: inherit;
color: inherit;
text-align: left;
cursor: pointer;
}
.footer .data__link--button:hover span,
.footer .data__link--button:focus-visible span {
color: #ff491a;
}
/* Адрес — семантический `address`, а не div: у него курсив по умолчанию. */
.footer .data__address {
font-style: normal;
}
/* --- Колонки на планшете --------------------------------------------------- */
/*
ЧЕТЫРЕ КОЛОНКИ НА ПЛАНШЕТЕ НЕ ПОМЕЩАЮТСЯ. Макет держит их в одну строку
вплоть до мобильного брейкпоинта, и на 768px первая колонка ужимается до
83px — в неё не влезает ни логотип, ни строка «Ваш город», а копирайт
рвётся по слогам. Замер: 83 / 136 / 192 / 200 при равных правах `flex: 1`.
Ниже 1000px раскладываем по две в ряд: колонка получает половину ширины
минус промежуток, и содержимое перестаёт ужиматься.
*/
@media only screen and (max-width: 1000px) and (min-width: 768px) {
.footer .footer-top {
flex-wrap: wrap;
}
.footer .footer-top__col {
flex: 0 0 calc(50% - 32px);
}
}
/* --- Выбор города --------------------------------------------------------- */
/*
ОФОРМЛЕНИЕ — КАК НА СТАРОМ САЙТЕ: цветная шапка во всю ширину окна с
названием слева и крестиком справа, подпись «Фильтр:» над полем, список
ссылок в три колонки, «Закрыть» внизу справа. Цвет взят из новой палитры
(#ff491a), а не из старой: это то же окно, приведённое к текущему сайту.
Общая рамка окна убрана в ноль, чтобы шапка доходила до краёв; отступы
переехали внутрь секций.
*/
.city-modal.wrap-modal {
max-width: 760px;
padding: 0;
border-radius: 16px;
overflow: hidden;
}
.city-modal .city-modal__header {
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
gap: 16px;
margin: 0;
padding: 18px 24px;
background: #ff491a;
text-align: left;
}
.city-modal .city-modal__header .modal-title {
font-size: 22px;
line-height: 120%;
color: #fff;
}
/* Крестик — кнопка, а не значок: его нажимают, и он должен ловиться
клавиатурой наравне с «Закрыть» внизу. */
.city-modal .city-modal__close {
flex: none;
width: 32px;
height: 32px;
padding: 0;
background: none;
border: 0;
font-size: 26px;
line-height: 1;
color: #fff;
opacity: .85;
cursor: pointer;
}
.city-modal .city-modal__close:hover,
.city-modal .city-modal__close:focus-visible {
opacity: 1;
}
.city-modal .city-modal__body {
padding: 20px 24px 22px;
}
.city-modal .city-modal__label {
display: block;
margin: 0 0 8px;
font-weight: 700;
font-size: 15px;
color: #111;
}
.city-modal .city-modal__filter {
margin: 0 0 18px;
}
/* Нижняя строка с «Закрыть»: отделена той же линией, что и в старом окне. */
.city-modal .city-modal__footer {
display: flex;
justify-content: flex-end;
margin: 18px 0 0;
padding: 14px 0 0;
border-top: 1px solid #ececec;
}
.city-modal .city-modal__close-link {
padding: 0;
background: none;
border: 0;
font: inherit;
font-size: 15px;
color: #ff491a;
cursor: pointer;
}
.city-modal .city-modal__close-link:hover,
.city-modal .city-modal__close-link:focus-visible {
text-decoration: underline;
}
/*
СПИСОК РАСКЛАДЫВАЕТСЯ САМ. В макете было три колонки по двенадцать пунктов,
набитых вручную; городов 354, и колонки должны считаться по ширине окна, а
не по числу элементов в разметке.
*/
.wrap-modal--select .choice-city-list--all {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
gap: 4px 20px;
margin: 0;
padding: 0;
list-style: none;
}
.wrap-modal--select .choice-city-list__item {
margin: 0;
padding: 0;
list-style: none;
}
/* Города — цветные ссылки, как в старом окне: там весь список читается как
набор переходов, а не как перечисление. */
.wrap-modal--select .choice-city-list__link {
display: block;
padding: 5px 0;
font-size: 15px;
line-height: 130%;
color: #ff491a;
border-bottom: 1px solid transparent;
}
.wrap-modal--select .choice-city-list__link:hover,
.wrap-modal--select .choice-city-list__link:focus-visible {
text-decoration: underline;
}
/* Текущий город виден и без подсветки — у него `aria-current`. Отличается
не цветом (цвет здесь у всех), а насыщенностью и тем, что не подчёркнут. */
.wrap-modal--select .choice-city-list__link.is-current {
font-weight: 700;
color: #111;
cursor: default;
}
.wrap-modal--select .choice-city-list__link.is-current:hover {
text-decoration: none;
}
/*
Список прокручивается внутри окна: 354 города иначе растянут его на
несколько экранов, и поле поиска уедет за верхний край.
`display: block` — не косметика. В макете контейнер был флексом на три
колонки-``, набитые вручную; наш единственный список становился в нём
флекс-элементом и сжимался до ширины содержимого — замер дал 200px из 712
доступных, то есть сетка получала ОДНУ колонку вместо четырёх, и увидеть
это можно было только замером: список выглядел просто узким.
*/
.wrap-modal--select .wrap-choice-city-list {
display: block;
max-height: 52vh;
overflow-y: auto;
padding-right: 4px;
}
.wrap-modal--select .choice-city-empty {
padding: 18px 0;
font-size: 15px;
color: #667085;
}
@media only screen and (max-width: 767px) {
/* Заголовок в 22px рядом с крестиком занимает на 358px три строки. */
.city-modal .city-modal__header {
padding: 14px 16px;
}
.city-modal .city-modal__header .modal-title {
font-size: 18px;
}
.city-modal .city-modal__body {
padding: 16px 16px 18px;
}
.wrap-modal--select .choice-city-list--all {
grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
gap: 2px 14px;
}
/* На телефоне окно и так во весь экран — списку остаётся меньше места,
но поле поиска должно оставаться видимым. */
.wrap-modal--select .wrap-choice-city-list {
max-height: 46vh;
}
}
@media only screen and (max-width: 359px) {
.wrap-modal--select .choice-city-list--all {
grid-template-columns: 1fr;
}
}
/* ------------------------------------------------ оговорка о ценах -- */
/*
* Строка о том, что цены не являются публичной офертой. Печатается один раз, из
* `config/legal.php`, — как и согласия под формами: юридическую формулировку
* правят в одном месте.
*
* Мелким и приглушённым намеренно: это сноска, а не сообщение посетителю. Она
* должна быть прочитана тем, кто её ищет, и не перетягивать внимание с контактов.
*
* Фон — тот же тёмный, что у нижней полосы подвала (#363636 из вёрстки), и
* текст на нём светлый. Белая плашка между тёмным подвалом и нижней полосой
* читалась как чужой блок, случайно попавший в подвал.
*
* Цвет здесь повторён числом, а не унаследован: правило нижней полосы живёт в
* `style.min.css`, который не редактируется (CLAUDE.md §8), и «унаследовать»
* оттуда нечего — это соседний элемент, а не родитель.
*/
.wrap-footer-note {
padding: 24px 16px 0;
background: #363636;
}
.footer-note {
max-width: 1400px;
margin: 0 auto;
font-size: 12px;
line-height: 150%;
/*
* Не чистый белый: сноска не должна спорить с телефонами и меню, которые
* рядом. Приглушённый светлый читается как примечание и остаётся читаемым —
* контраст с #363636 около 7:1, выше требования WCAG AA для мелкого текста.
*/
color: #c9c9c9;
}
/* --- Копирайт в нижней полосе -------------------------------------------- */
/*
* ЧИТАЕМЫЙ, А НЕ ЕДВА ЗАМЕТНЫЙ. В вёрстке эта строка залита `#535353` на фоне
* `#363636` — замер даёт контраст 1.57:1 при минимуме 4.5:1 по WCAG для
* обычного текста. На скриншоте её попросту не видно.
*
* `#a8a8a8` — 5.1:1: строка читается и остаётся второстепенной, не споря с
* телефонами и меню над ней. Тот же приглушённый светлый, что у оговорки о
* ценах рядом.
*/
.footer-bottom__copy {
color: #a8a8a8;
}
|