/* ПАЛИТРА, РИТМ И ТИПОГРАФИКА — ИЗ МАКЕТА DESIGN «Ремонт ТВ - лендинг.dc.html». Значения перенесены один в один; собраны из инлайновых стилей артефакта в классы, потому что артефакт считал часть из них ЯВАСКРИПТОМ по ширине окна, а страница обязана работать без JS (техничка, сквозные правила). ШРИФТЫ СИСТЕМНЫЕ, И ЭТО РЕШЕНИЕ, А НЕ УПУЩЕНИЕ. Макет подключает Google Fonts (Oswald + Golos Text); техничка это запрещает прямо: «внешний домен и лишние RTT ради начертания, неразличимого на 375 px». В спорном месте приоритет у технички (README пакета). Кегли заголовков пересчитаны через `clamp()`: системный гротеск шире Oswald, и прежние 38–46 px переносились бы на вторую строку там, где макет держит одну. ЧЕГО ЗДЕСЬ НЕТ: `@font-face`, внешних адресов и картинок в CSS. Ни одного запроса наружу — ни платного, ни бесплатного. */ :root { --фон: #f4f5f7; --белый: #fff; --текст: #0f1729; --тёмный: #101a33; --тёмный-2: #1a2440; --тёмный-3: #24304f; --акцент: #e11d33; --акцент-свет: #ff3b52; --акцент-тёмный: #c5142a; --серый-1: #3a4256; --серый-2: #5b6478; --серый-3: #6b7488; --серый-4: #8f9bb6; --серый-5: #a9b4cc; --серый-6: #c2cade; --серый-7: #dde3ef; --рамка: #e3e6ec; --рамка-2: #edeff3; --почти-белый: #fafbfc; --розовый: #fff5f6; --розовая-рамка: #ffd7dc; --зелёный: #0f7a43; --огонёк: #3ddc84; --поле: 20px; --скругление: 16px; --шрифт: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --панель: 76px; } * { box-sizing: border-box; } body { margin: 0; background: var(--фон); color: var(--текст); font: 16px/1.55 var(--шрифт); -webkit-font-smoothing: antialiased; text-wrap: pretty; padding-bottom: var(--панель); /* место под липкую панель (техничка, блок 03) */ } a { color: var(--акцент); text-decoration: none; } a:hover { color: var(--акцент-тёмный); } :focus-visible { outline: 2px solid var(--акцент); outline-offset: 2px; } img { display: block; max-width: 100%; height: auto; } input, select, button, textarea { font-family: inherit; font-size: inherit; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } } .сронли { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } /* ---------------------------------------------------------------- каркас */ .ряд { max-width: 1240px; margin: 0 auto; padding: 0 var(--поле); } .секция { padding: 48px 0; scroll-margin-top: 72px; } .секция.белая { background: var(--белый); } .секция.серая { background: var(--фон); } .секция.тёмная { background: var(--тёмный); color: var(--белый); } .секция.тёмная a { color: var(--белый); } .секция.тёмная .лид, .секция.тёмная p { color: var(--серый-6); } .секция.тёмная h2, .секция.тёмная h3, .секция.тёмная b { color: var(--белый); } .секция.тёмная .надзаголовок { color: var(--акцент-свет); } @media (min-width: 701px) { .секция { padding: 68px 0; } } h1, h2, h3, .крупный-заголовок { font-weight: 700; text-transform: uppercase; letter-spacing: .4px; line-height: 1.1; margin: 12px 0 0; text-wrap: balance; } h1 { font-size: clamp(26px, 6.4vw, 42px); max-width: 660px; } h2, .крупный-заголовок { font-size: clamp(23px, 4.4vw, 34px); } h3 { font-size: clamp(17px, 2.4vw, 20px); } .раздел { margin: 30px 0 12px; } .надзаголовок { font-size: 12px; font-weight: 700; letter-spacing: 2.2px; text-transform: uppercase; color: var(--акцент); margin: 0; } .надзаголовок.тихий { color: var(--серый-3); letter-spacing: 1.4px; } .секция.тёмная .надзаголовок.тихий { color: var(--серый-4); } .лид { font-size: 16px; line-height: 1.55; color: var(--серый-2); margin: 12px 0 22px; max-width: 780px; } .мелко { font-size: 13.5px; line-height: 1.5; color: var(--серый-3); } .секция.тёмная .мелко { color: var(--серый-5); } .крупно { font-size: clamp(19px, 2.6vw, 24px); font-weight: 700; letter-spacing: .3px; } .акцент { color: var(--акцент-свет); } .секция.белая .акцент, .секция.серая .акцент { color: var(--акцент); } .сноска { font-size: 13px; line-height: 1.5; color: var(--серый-3); margin: 10px 0 0; } .сноска.по-центру { text-align: center; } .секция.тёмная .сноска { color: var(--серый-4); } .по-центру { text-align: center; } .шапка-секции { display: grid; gap: 20px; margin-bottom: 22px; } .врезка { font-size: 14px; line-height: 1.5; color: var(--серый-1); background: var(--фон); border-radius: 12px; padding: 14px 18px; margin: 14px 0 0; } .секция.белая .врезка { background: var(--фон); } /* НА СЕРОЙ СЕКЦИИ ВРЕЗКА БЫЛА НЕВИДИМА: её фон `--фон` — ровно тот же цвет, что и у самой секции. Отсюда «ряд брендов отвалился и висит в пустом поле» (замечание ④ владельца 02.09) — контейнер был, но не отличался от фона. Тот же счёт у плашек марок строкой ниже по файлу. */ .секция.серая .врезка { background: var(--белый); border: 1px solid var(--рамка); } .секция.тёмная .врезка { background: var(--тёмный-2); color: var(--серый-5); } .врезка.широкая { margin-top: 18px; } .врезка.розовая { background: var(--розовый); border: 1px solid var(--розовая-рамка); color: var(--серый-1); } .цитата { font-size: 14.5px; line-height: 1.5; border-left: 3px solid var(--акцент); padding-left: 13px; margin: 12px 0 0; } .цитата.широкая { background: var(--тёмный-2); border-radius: var(--скругление); padding: 20px 22px; margin-top: 18px; color: var(--серый-7); } .столбик { display: grid; gap: 14px; align-content: start; } /* ЧИСЛО СПРАВА — ЭТО ПЛИТКА, А НЕ ТЕКСТ, ПОВИСШИЙ РЯДОМ С ЛИДОМ. Замечание ⑤ владельца 02.09: «412 ремонтов за 30 дней» висит в невесомости. Так и было: контейнера у него не было вовсе, только сетка из двух строк. Даём ту же оболочку, что у соседних плиток блока, — общий язык эталона, а не выдуманная карточка. Второе место с этим классом («14 лет средний стаж» в тёмной секции) получает ту же плитку и от этого только выигрывает. */ .число-справа { display: grid; gap: 2px; margin: 0; justify-self: start; background: var(--фон); border: 1px solid var(--рамка); border-radius: 13px; padding: 14px 18px; } .число-справа b { font-size: 30px; line-height: 1; letter-spacing: .3px; } .число-справа span { font-size: 13px; color: var(--серый-3); } .секция.серая .число-справа { background: var(--белый); } .секция.тёмная .число-справа { background: var(--тёмный-2); border-color: var(--тёмный-3); } .секция.тёмная .число-справа span { color: var(--серый-4); } @media (min-width: 1051px) { .число-справа { justify-self: end; } } /* ------------------------------------------------------------ сетки блоков В артефакте это были `{{ colsHero }}`, `{{ cols1085 }}` и ещё девять таких же — вычислялись JS по `clientWidth`. Здесь те же пропорции медиазапросом. */ .сетка-герой, .сетка-1085, .сетка-1068, .сетка-115, .сетка-109, .сетка-105, .сетка-faq, .сетка-заявки, .сетка-b2b, .сетка-подвала, .две-карты { display: grid; gap: 24px; align-items: start; } @media (min-width: 1051px) { .сетка-герой { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 48px; } .сетка-1085 { grid-template-columns: minmax(0, 1fr) minmax(0, .85fr); } .сетка-1068 { grid-template-columns: minmax(0, 1fr) minmax(0, .68fr); } .сетка-115 { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); } .сетка-109 { grid-template-columns: minmax(0, 1fr) minmax(0, .9fr); } .сетка-105 { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); } .сетка-faq { grid-template-columns: minmax(0, .55fr) minmax(0, 1fr); gap: 44px; } .сетка-заявки { grid-template-columns: minmax(0, 1fr) minmax(0, 460px); gap: 44px; } .сетка-b2b { grid-template-columns: minmax(0, 1.3fr) minmax(0, .7fr); } /* Колонок стало пять: якорей в подвале было четыре из девятнадцати возможных, владелец просил обогатить (замечание ⑧). */ .сетка-подвала{ grid-template-columns: minmax(0, 1.15fr) repeat(4, minmax(0, .8fr)); gap: 28px; } .шапка-секции { grid-template-columns: minmax(0, 1fr) 300px; align-items: end; } } @media (min-width: 701px) { .две-карты { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); } } /* ---------------------------------------------------------------- шапка */ .шапка { position: sticky; top: 0; z-index: 50; background: var(--тёмный); box-shadow: 0 2px 12px rgba(4, 10, 26, .28); } .шапка .ряд { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 56px; } .логотип { display: flex; align-items: baseline; gap: 9px; color: var(--белый); white-space: nowrap; } .логотип-имя { font-weight: 700; font-size: 19px; letter-spacing: .6px; text-transform: uppercase; } .логотип-город { font-size: 14px; color: var(--серый-4); } .шапка-телефон { display: flex; align-items: center; gap: 12px; color: var(--белый); min-height: 48px; } .шапка-телефон-текст { display: none; text-align: right; } .шапка-телефон .номер { display: block; font-size: 18px; font-weight: 700; letter-spacing: .4px; line-height: 1.05; color: var(--белый); } .шапка-телефон .часы { display: block; font-size: 12px; color: var(--серый-4); } .трубка { width: 48px; height: 48px; flex: 0 0 48px; border-radius: 12px; background: var(--акцент); display: grid; place-items: center; } @media (min-width: 701px) { .шапка-телефон-текст { display: block; } } /* ----------------------------------------------------------- первый экран */ .плашка { display: inline-flex; align-items: flex-start; gap: 9px; background: rgba(61, 220, 132, .13); border: 1px solid rgba(61, 220, 132, .42); color: #7ce8ab; padding: 8px 15px; border-radius: 16px; font-size: 13px; font-weight: 600; line-height: 1.4; max-width: 540px; margin: 0; } .точка { width: 7px; height: 7px; flex: 0 0 7px; border-radius: 50%; background: var(--огонёк); margin-top: 6px; } .триада { display: grid; gap: 1px; background: rgba(255, 255, 255, .14); border-radius: 14px; overflow: hidden; margin: 20px 0 0; max-width: 680px; } .исход-плитка { background: var(--тёмный-2); padding: 14px 16px; display: grid; gap: 4px; align-content: start; } .исход-число { font-size: 18px; font-weight: 700; color: var(--акцент-свет); line-height: 1.15; } .исход-подпись { font-size: 14px; line-height: 1.35; color: var(--серый-7); } .триада.на-светлом { background: var(--рамка); border-radius: var(--скругление); margin-bottom: 22px; } .триада.на-светлом .исход-плитка { background: var(--тёмный); } @media (min-width: 701px) { .триада { grid-template-columns: repeat(3, minmax(0, 1fr)); } } .щит { display: flex; align-items: center; gap: 7px; color: var(--серый-4); } .показатели { display: grid; gap: 14px; margin: 24px 0 0; } .показатели p { display: flex; gap: 11px; align-items: flex-start; margin: 0; } .показатели b { font-size: 26px; font-weight: 700; color: var(--акцент-свет); line-height: 1; flex: 0 0 auto; } .показатели span { font-size: 14px; line-height: 1.4; color: var(--серый-7); } @media (min-width: 701px) { .показатели { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); } } .герой-снимок { position: relative; margin-top: 24px; } .герой-фото { width: 100%; border-radius: 20px; object-fit: cover; aspect-ratio: 4 / 3; background: var(--тёмный-2); } /* Карточка среднего чека висит на углу снимка, как в макете. На узком экране она встаёт под снимком: наложение на 375 px съедает половину фотографии. */ .средний-чек { background: var(--белый); color: var(--текст); border-radius: var(--скругление); padding: 14px 18px; box-shadow: 0 20px 40px rgba(4, 10, 26, .35); display: grid; gap: 3px; margin: 12px 0 0; width: fit-content; max-width: 100%; } @media (min-width: 1051px) { .средний-чек { position: absolute; left: -18px; bottom: -22px; margin: 0; min-width: 216px; } } .чек-подпись { font-size: 12px; color: var(--серый-3); } .чек-число { font-size: 26px; font-weight: 700; letter-spacing: .4px; } /* ------------------------------------------------------- чипы симптомов Нативные `details/summary` (техничка, блок 04). Раскрытие не двигает страницу под пальцем: карточка растёт вниз, внутри своего контейнера. */ .подзаголовок { font-size: 14px; letter-spacing: 1.2px; color: var(--серый-3); margin: 18px 0 8px; } .чипы { display: flex; gap: 10px; flex-wrap: wrap; } .чип { border: 1px solid var(--рамка); border-radius: 14px; background: var(--белый); flex: 1 1 240px; } .чип[open] { border-color: var(--акцент); } .чип-имя { list-style: none; cursor: pointer; padding: 13px 19px; min-height: 46px; font-size: 15px; font-weight: 600; line-height: 1.2; display: flex; align-items: center; } .чип-имя::-webkit-details-marker { display: none; } .чип-имя::after { content: "+"; margin-left: auto; color: var(--акцент); font-weight: 700; padding-left: 12px; } .чип[open] .чип-имя::after { content: "–"; } .чип-ответ { padding: 0 19px 16px; display: grid; gap: 8px; } .чип-узел { font-weight: 700; margin: 0; } .чип-причина { font-size: 14px; line-height: 1.5; color: var(--серый-2); margin: 0; } .чип-числа { display: flex; gap: 12px; flex-wrap: wrap; margin: 0; } .чип-числа span span { display: grid; } .чип-числа b { font-size: 17px; } .чип-числа span > span { font-size: 11.5px; color: var(--серый-3); } .чип-нота { font-size: 13.5px; line-height: 1.45; border-left: 3px solid var(--акцент); padding-left: 11px; margin: 0; color: var(--серый-1); } .карточка-итога { border-radius: 18px; overflow: hidden; background: var(--тёмный); color: var(--белый); } .карточка-шапка { background: var(--акцент); padding: 14px 22px; font-size: 13px; font-weight: 700; letter-spacing: .4px; margin: 0; } .карточка-тело { padding: 20px 22px 22px; display: grid; gap: 16px; } .пара { display: grid; gap: 6px; margin: 0; } .ключ { font-size: 12px; color: var(--серый-4); } .знач { font-size: 17px; font-weight: 600; line-height: 1.35; } .знач.мелко { font-size: 14.5px; font-weight: 400; color: var(--серый-7); } .две-плитки { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 0; } .плитка { background: var(--тёмный-2); border-radius: 13px; padding: 13px 15px; display: grid; gap: 4px; } .плитка .число { font-size: 18px; font-weight: 700; letter-spacing: .3px; } /* Плитка светлеет по СВОЕМУ окружению, а не по секции. Правило по секции красило плитки внутри тёмной карточки, стоящей на белой секции, — светлый фон под светлым текстом, то есть нечитаемо. Поймано на первом просмотре. */ .карта-тело .плитка { background: var(--фон); } .карточка-итога .цитата { color: var(--серый-6); } @media (min-width: 1051px) { .липкая-сбоку { position: sticky; top: 76px; } } /* -------------------------------------------------------- самопроверка */ .проверки, .шаги, .правила { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; } .шаг-проверки, .шаг, .правило { background: var(--тёмный-2); border: 1px solid var(--тёмный-3); border-radius: 14px; padding: 16px 18px; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 14px; align-items: start; } .шаг-номер, .шаг-цифра, .правило-номер { font-weight: 700; color: var(--акцент-свет); line-height: 1; } .шаг-цифра { font-size: 28px; } .правило-номер { width: 34px; height: 34px; border-radius: 10px; background: var(--акцент); color: var(--белый); display: grid; place-items: center; } .шаг-тело { display: grid; gap: 5px; min-width: 0; } .шаг-имя { font-size: 16.5px; font-weight: 600; } .шаг-что { font-size: 14px; line-height: 1.5; color: var(--серый-5); } .шаг-итог { font-size: 13.5px; line-height: 1.45; color: var(--серый-7); border-left: 2px solid var(--акцент); padding-left: 11px; margin-top: 3px; } .карта { background: var(--белый); border: 1px solid var(--рамка); border-radius: var(--скругление); padding: 20px 22px; display: grid; gap: 10px; align-content: start; } .карта h3 { margin: 0; } .карта p { margin: 0; } .секция.тёмная .карта { background: var(--тёмный-2); border-color: var(--тёмный-3); } .карта.тёмная-карта { background: var(--тёмный); border-color: var(--тёмный); color: var(--белый); } .карта.тёмная-карта p { color: var(--серый-7); } /* СВЕТЛАЯ КАРТОЧКА В ТЁМНОЙ СЕКЦИИ — КОНФЛИКТ СПЕЦИФИЧНОСТИ, А НЕ ЦВЕТА. Поймано владельцем глазами 02.09: «Оригинал» и «Аналог» тусклые. Проигрывал ФОН, а не текст: `.секция.тёмная .карта` — это три класса, `.карта.светлая-карта` — два, и тёмный фон перебивал белый. Текст при этом честно красился в `--серый-1` (одна специфичность с `.секция.тёмная p`, побеждал порядок) — то есть выходил тёмный текст на тёмном фоне. Чиним специфичностью, как и велело задание: `.секция` спереди уравнивает вес, а порядок ниже по файлу отдаёт победу светлой карточке. Тот же конфликт на следующей светлой карточке в тёмной секции больше не вылезет. */ .секция .карта.светлая-карта { background: var(--белый); color: var(--текст); } .секция .карта.светлая-карта p { color: var(--серый-1); } .секция .карта.светлая-карта .карта-имя, .секция .карта.светлая-карта .крупно { color: var(--текст); } .карта.розовая { background: var(--розовый); border-color: var(--розовая-рамка); } .карта-строка { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; } .карта-имя { font-size: 19px; font-weight: 700; text-transform: uppercase; letter-spacing: .4px; } .счётчик { margin: 0; } .счётчик-число { font-size: 42px; font-weight: 700; line-height: 1; } .карта img { border-radius: 13px; width: 100%; object-fit: cover; } /* ------------------------------------------------------------- таблицы Широкие таблицы конкурентов на 375 px не читаются (техничка, блок 06–07): на узком экране шапка прячется, а каждая строка становится карточкой. */ .таблица { background: var(--белый); border: 1px solid var(--рамка); border-radius: 18px; overflow: hidden; } .таблица-шапка { display: none; gap: 18px; padding: 14px 22px; background: var(--тёмный); color: var(--серый-4); font-size: 11.5px; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase; } .таблица-шапка.светлая, .прайс-шапка { background: var(--фон); color: var(--серый-3); display: block; } .строка-исхода, .строка-прайса, .строка-гарантии, .строка-счёта { display: grid; gap: 10px; padding: 16px 22px; align-items: start; border-bottom: 1px solid var(--рамка-2); } .строка-исхода:nth-child(even), .строка-прайса:nth-child(even), .строка-гарантии:nth-child(even), .строка-счёта:nth-child(even) { background: var(--почти-белый); } .строка-прайса.акцент { background: var(--розовый); } .строка-прайса.акцент .прайс-цена { color: var(--акцент); } .исход-текст { display: grid; gap: 4px; } .исход-случай { font-size: 15.5px; font-weight: 600; line-height: 1.35; } .исход-деталь { font-size: 13.5px; line-height: 1.45; color: var(--серый-2); } .исход-цена { font-size: 19px; font-weight: 700; line-height: 1.2; } .исход-цена.даром { color: var(--зелёный); } .прайс-имя { font-size: 15.5px; font-weight: 600; } .прайс-что { font-size: 14px; color: var(--серый-2); line-height: 1.45; } .прайс-цена { font-size: 18px; font-weight: 700; } .прайс-срок { font-size: 13.5px; color: var(--серый-2); } .гар-работа { font-size: 15px; font-weight: 600; line-height: 1.4; } .гар-срок { font-size: 18px; font-weight: 700; } .итог-счёта { font-size: 17px; font-weight: 700; } .таблица-подпись { padding: 14px 22px; margin: 0; font-size: 14px; line-height: 1.5; color: var(--серый-1); } @media (min-width: 701px) { .таблица-шапка { display: grid; } .таблица-шапка.светлая { display: block; } .исходы-шапка, .строка-исхода { grid-template-columns: minmax(0, 1fr) 220px; gap: 18px; } .прайс-шапка { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1.5fr) 175px 190px; } .строка-прайса { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1.5fr) 175px 190px; gap: 18px; align-items: center; } .гарантия-шапка, .строка-гарантии { grid-template-columns: minmax(0, 1fr) 150px; gap: 14px; align-items: center; } .строка-счёта { grid-template-columns: minmax(160px, 1fr) 120px 130px 120px; gap: 14px; align-items: center; } } /* -------------------------------------------------------------- формула */ .формула { display: grid; gap: 14px; align-items: stretch; margin-bottom: 24px; } .слагаемое { background: var(--фон); border-radius: var(--скругление); padding: 20px; display: grid; gap: 8px; align-content: start; } .слагаемое.итого { background: var(--тёмный); color: var(--белый); } .слагаемое.итого .мелко { color: var(--серый-6); } .равно { display: none; place-items: center; font-size: 28px; color: #b9c0cf; } @media (min-width: 1051px) { .формула { grid-template-columns: repeat(3, minmax(0, 1fr)) auto minmax(0, 1.05fr); } .равно { display: grid; } } /* -------------------------------------------------- дома или в мастерской */ .карта.рамка-акцент { border: 2px solid var(--акцент); padding: 0; } .две-карты > .карта { padding: 0; overflow: hidden; } .карта-шапка { display: flex; justify-content: space-between; align-items: center; gap: 14px; padding: 14px 22px; font-size: 18px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; } .карта-шапка.акцентная { background: var(--акцент); color: var(--белый); } .карта-шапка.тёмная-шапка { background: var(--тёмный); color: var(--белый); } .бейдж { font-size: 13px; font-weight: 600; background: rgba(255, 255, 255, .2); padding: 5px 11px; border-radius: 100px; text-transform: none; letter-spacing: 0; } .карта-тело { padding: 20px 22px; display: grid; gap: 12px; } .карта-тело img { border-radius: 13px; width: 100%; object-fit: cover; } /* -------------------------------------------------------- зона и окна */ .окна { display: flex; gap: 8px; flex-wrap: wrap; margin: 0; } .окно { font-size: 14px; font-weight: 600; background: var(--фон); border-radius: 9px; padding: 9px 14px; } .окно.вечернее { background: var(--тёмный); color: var(--белый); } /* ------------------------------------------------------------- мастера */ .мастера { display: grid; gap: 16px; } .мастер { background: var(--тёмный-2); border-radius: 18px; overflow: hidden; display: grid; align-content: start; } .мастер-фото { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; object-position: center 20%; background: var(--тёмный-3); } .мастер-текст { padding: 20px; display: grid; gap: 9px; } .мастер-имя { margin: 0; font-size: 20px; letter-spacing: .4px; } .мастер-стаж { margin: 0; font-size: 13.5px; color: #ff8a97; font-weight: 600; } .мастер-что { margin: 0; font-size: 14px; line-height: 1.5; color: var(--серый-5); } .мастер-зона { margin: 0; font-size: 13.5px; line-height: 1.45; color: var(--серый-7); border-left: 2px solid var(--акцент); padding-left: 11px; } .марки { display: flex; gap: 8px; flex-wrap: wrap; margin: 0; } .марка { font-size: 12.5px; background: var(--тёмный-3); border-radius: 7px; padding: 6px 11px; } .секция.серая .марка, .секция.белая .марка { background: var(--фон); font-size: 14px; font-weight: 600; padding: 8px 14px; } @media (min-width: 701px) { .мастера { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); } } /* -------------------------------------------------------------- отзывы */ .площадки { display: flex; gap: 10px; flex-wrap: wrap; } .площадка { background: var(--белый); border: 1px solid var(--рамка); border-radius: 14px; padding: 12px 16px; display: grid; gap: 2px; color: var(--текст); } .оценка { font-size: 22px; font-weight: 700; line-height: 1; } .площадка-имя { font-size: 12.5px; color: var(--серый-3); } /* ОТЗЫВЫ ВЫРАВНИВАЮТСЯ ПО ВЫСОТЕ, А ПОДПИСЬ ПРИЖИМАЕТСЯ К НИЗУ. Замечание ③ владельца 02.09: четыре карточки разной высоты не выровнены, четвёртая с ответом на негатив растягивается и оставляет под соседями пустоту. Причина: `align-items: start` не давал карточкам растянуться на высоту ряда, и низ ряда оставался рваным. Колонка вместо сетки внутри карточки — чтобы `margin-top: auto` у подписи работал: в гриде он прижимает элемент внутри своей строки, а не к низу контейнера. Гэп и вид те же. Содержание карточек не тронуто (№74). */ .отзывы { display: grid; gap: 16px; align-items: stretch; } .отзыв { background: var(--белый); border: 1px solid var(--рамка); border-radius: var(--скругление); padding: 20px; display: flex; flex-direction: column; gap: 12px; } .отзыв-кто { margin-top: auto; } .отзыв.с-ответом { border-color: var(--розовая-рамка); } .звёзды { color: var(--акцент); font-size: 13px; letter-spacing: 2px; margin: 0; } .отзыв-текст { font-size: 14.5px; line-height: 1.55; color: var(--серый-1); margin: 0; } .отзыв-ответ { font-size: 13.5px; line-height: 1.55; color: var(--серый-1); background: var(--фон); border-radius: 11px; padding: 13px 15px; border-left: 3px solid var(--акцент); margin: 0; } .отзыв-кто { font-size: 13.5px; font-weight: 600; padding-top: 6px; border-top: 1px solid var(--рамка-2); margin: 0; display: grid; gap: 4px; } .отзыв-мета { font-size: 12.5px; color: var(--серый-3); font-weight: 400; line-height: 1.45; } @media (min-width: 701px) { .отзывы { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); } } /* ------------------------------------------------------ последние работы Фильтр на чистом CSS: радио плюс `:checked ~`. Ни строки JS — страница обязана оставаться рабочей при выключенном скрипте. */ .фильтр-радио { position: absolute; opacity: 0; pointer-events: none; } .ярлыки { display: flex; gap: 9px; flex-wrap: wrap; margin-bottom: 16px; } .ярлык-фильтра { border: 1px solid var(--рамка); border-radius: 100px; padding: 10px 18px; font-size: 14px; font-weight: 600; cursor: pointer; background: var(--белый); color: var(--серый-1); min-height: 44px; display: inline-flex; align-items: center; } .ярлык-фильтра:hover { border-color: #b9c0cf; } .работы { display: grid; gap: 16px; } .работа { background: var(--белый); border: 1px solid var(--рамка); border-radius: var(--скругление); overflow: hidden; display: grid; align-content: start; } .работа-фото { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; background: var(--фон); } .работа-текст { padding: 18px 20px 20px; display: grid; gap: 10px; } .работа-шапка { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; margin: 0; } .работа-модель { font-size: 16px; font-weight: 600; line-height: 1.3; } .работа-дата { font-size: 12px; color: var(--серый-3); white-space: nowrap; } .работа-симптом { font-size: 13.5px; color: var(--акцент); font-weight: 600; margin: 0; } .работа-что { font-size: 14px; line-height: 1.5; color: var(--серый-2); margin: 0; } .работа-деньги { display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; padding-top: 9px; border-top: 1px solid var(--рамка-2); margin: 0; } .работа-цена { font-size: 18px; font-weight: 700; } .работа-разбивка, .работа-срок { font-size: 13px; color: var(--серый-3); margin: 0; } @media (min-width: 701px) { .работы { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); } } #ф-all:checked ~ .ярлыки [for="ф-all"], #ф-led:checked ~ .ярлыки [for="ф-led"], #ф-power:checked ~ .ярлыки [for="ф-power"], #ф-board:checked ~ .ярлыки [for="ф-board"], #ф-smart:checked ~ .ярлыки [for="ф-smart"] { background: var(--тёмный); color: var(--белый); border-color: var(--тёмный); } #ф-led:checked ~ .работы .работа:not(.работа--led), #ф-power:checked ~ .работы .работа:not(.работа--power), #ф-board:checked ~ .работы .работа:not(.работа--board), #ф-smart:checked ~ .работы .работа:not(.работа--smart) { display: none; } /* --------------------------------------------------- чинить или менять */ .вердикты { display: grid; gap: 12px; } .вердикт { background: var(--белый); border: 1px solid var(--рамка); border-radius: 14px; padding: 18px 20px; display: grid; gap: 6px; border-left: 5px solid var(--серый-4); } .вердикт.хорошо { border-left-color: var(--зелёный); } .вердикт.средне { border-left-color: #b45309; } .вердикт.плохо { border-left-color: var(--акцент-тёмный); } .вердикт-доля { font-size: 12px; font-weight: 700; letter-spacing: 1.4px; text-transform: uppercase; color: var(--серый-3); } .вердикт-имя { font-size: 19px; font-weight: 700; text-transform: uppercase; letter-spacing: .4px; } .вердикт-текст { font-size: 14.5px; line-height: 1.5; color: var(--серый-1); } .карточка.тёмная { background: var(--тёмный); color: var(--белый); border-color: var(--тёмный); } .карточка { background: var(--белый); border: 1px solid var(--рамка); border-radius: var(--скругление); padding: 18px 20px; display: grid; gap: 8px; } .карточка h3 { margin: 0; font-size: 16px; text-transform: none; letter-spacing: 0; } .карточка p { margin: 0; font-size: 14px; line-height: 1.5; color: var(--серый-2); } .карточка.тёмная p { color: var(--серый-7); } .карточка.розовая { background: var(--розовый); border-color: var(--розовая-рамка); } /* ----------------------------------------------------------------- FAQ */ .вопросы { display: grid; gap: 10px; } .вопрос { border: 1px solid var(--рамка); border-radius: 14px; overflow: hidden; background: var(--белый); } .вопрос summary { list-style: none; cursor: pointer; padding: 17px 20px; min-height: 56px; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 14px; align-items: center; } .вопрос summary::-webkit-details-marker { display: none; } .вопрос summary::after { content: "+"; color: var(--акцент); font-weight: 700; font-size: 18px; } .вопрос[open] summary::after { content: "–"; } .вопрос-номер { font-size: 14px; font-weight: 700; color: #b9c0cf; } .вопрос-текст { font-size: 16px; font-weight: 600; line-height: 1.35; } .ответ { padding: 0 20px 20px 48px; font-size: 14.5px; line-height: 1.6; color: var(--серый-1); } /* --------------------------------------------------------------- заявка */ .обещания { display: grid; gap: 16px; max-width: 520px; margin: 20px 0 0; } .обещания p { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 14px; align-items: start; margin: 0; } .обещания > p > span:last-child { display: grid; gap: 3px; } .обещания b { font-size: 16px; } .обещания span span { font-size: 14px; line-height: 1.45; color: var(--серый-5); } .значок { width: 36px; height: 36px; border-radius: 10px; background: var(--акцент); color: var(--белый); display: grid; place-items: center; font-weight: 700; } .телефон-строкой { display: inline-flex; align-items: center; gap: 12px; margin-top: 24px; color: var(--белый); flex-wrap: wrap; } .телефон { color: var(--акцент); font-weight: 600; } .секция.тёмная .телефон { color: var(--белый); } /* ---------------------------------------------------------------- формы */ .форма { display: grid; gap: 12px; } .форма--заказ { background: var(--акцент); border-radius: 20px; padding: 24px 22px; box-shadow: 0 26px 50px rgba(4, 10, 26, .4); color: var(--белый); } .форма--герой { margin: 20px 0 0; max-width: 520px; } .форма-заголовок { font-size: 24px; font-weight: 700; text-transform: uppercase; letter-spacing: .6px; line-height: 1.15; margin: 0; } .форма-лид { font-size: 13.5px; line-height: 1.45; color: var(--розовая-рамка); margin: 0; } .поле { display: grid; gap: 6px; margin: 0; border: 0; padding: 0; } .метка { font-size: 13px; font-weight: 600; } .форма--заказ .метка { color: #ffe1e5; } .форма--герой .метка { color: var(--серый-6); } .поле input[type="tel"], .поле select { min-height: 50px; padding: 0 14px; font-size: 16px; border: 1px solid var(--рамка); border-radius: 11px; background: var(--белый); color: var(--текст); } .форма--заказ .поле input[type="tel"], .форма--заказ .поле select { border: 0; } .варианты { display: flex; gap: 8px; flex-wrap: wrap; } .вариант { display: inline-flex; align-items: center; gap: 7px; min-height: 44px; padding: 0 14px; border-radius: 11px; background: var(--белый); color: var(--текст); border: 1px solid var(--рамка); font-size: 15px; cursor: pointer; } .форма--герой .вариант { background: var(--тёмный-2); color: var(--белый); border-color: var(--тёмный-3); } .поле.согласие { grid-template-columns: auto minmax(0, 1fr); align-items: start; gap: 10px; font-size: 13px; line-height: 1.45; } .поле.согласие input { width: 22px; height: 22px; margin: 0; flex: 0 0 22px; accent-color: var(--тёмный); } .форма--заказ .поле.согласие { color: #ffe1e5; } .форма--заказ .поле.согласие a { color: var(--белый); text-decoration: underline; } .форма--герой .поле.согласие { color: var(--серый-6); } .форма--герой .поле.согласие a { color: var(--белый); text-decoration: underline; } .кнопка { display: inline-flex; align-items: center; justify-content: center; text-align: center; min-height: 50px; padding: 0 22px; border-radius: 12px; border: 0; background: var(--акцент); color: var(--белый); font: inherit; font-weight: 700; cursor: pointer; } .кнопка:hover { background: var(--акцент-тёмный); color: var(--белый); } .кнопка.тихая { background: var(--тёмный-2); border: 1px solid var(--тёмный-3); } .форма--заказ .кнопка.отправить { background: var(--тёмный); text-transform: uppercase; letter-spacing: .6px; } .форма--заказ .сноска, .форма--герой .сноска { color: var(--розовая-рамка); } .форма--герой .сноска { color: var(--серый-4); } .ошибка { color: #ffdde1; background: var(--тёмный); border-radius: 9px; padding: 10px 12px; margin: 0; font-size: 13.5px; } .секция.белая .ошибка, .секция.серая .ошибка { color: #8a1212; background: var(--розовый); } /* --------------------------------------------------------------- исход */ .исход { padding: 22px 0; border-bottom: 4px solid var(--акцент); } .исход.принято { background: var(--тёмный); color: var(--белый); border-bottom-color: var(--зелёный); } .исход.повтор { background: var(--тёмный); color: var(--белый); border-bottom-color: var(--серый-4); } .исход.не-ушло, .исход.отказ, .исход.ошибка-проверки { background: var(--розовый); color: var(--текст); } .исход-заголовок { font-size: clamp(20px, 3.4vw, 26px); font-weight: 700; text-transform: uppercase; letter-spacing: .5px; margin: 0 0 8px; } .исход-лид { font-size: 16.5px; line-height: 1.5; margin: 0 0 10px; } .исход-совет { font-size: 14.5px; line-height: 1.55; margin: 0 0 12px; } .исход .кнопка { margin-bottom: 8px; } /* ------------------------------------------------------- липкая панель */ /* ЛИПКАЯ ПЛАШКА ЖИВЁТ В ТОЙ ЖЕ КОЛОНКЕ, ЧТО И КОНТЕНТ. Замечание ② владельца 02.09: содержимое прилипло к краям экрана. Правила `position` были на месте — не хватало внутреннего контейнера ширины: фон обязан тянуться во всю ширину, а содержимое — стоять в колонке `.ряд`, как везде. Горизонтальное поле уехало на `.ряд`, иначе оно считалось бы дважды. */ /* ПАНЕЛЬ ПОЯВЛЯЕТСЯ ПОСЛЕ 300 px СКРОЛЛА — правило технички, блок 03, которое вливка макета потеряла. Владелец 02.09: «нижняя липкая панель должна пойти за пользователем не сразу… у нас там трубка вверху + Жду звонка + Позвонить + Вызвать мастера = дурдом». Замер: на первом экране шесть призывов к действию, четыре из них ведут на звонок. Прячем СТИЛЕМ, показываем скриптом по атрибуту. Без JS панель показывает `