/* СТРАНИЦЫ ВКЛАДОК — файл ДОРОЖКИ В волны 3 (9А.0б, спецификация `v4-new-structure`, 3). Проекты · Сотрудничество · Гарантия · Контакты · Кабинет. Пять страниц, у которых нет ни одного товара, ни одной формы и ни одной плитки, — значит и общего с каталогом у них ничего. 🔴 ФАЙЛ ПОДКЛЮЧАЕТСЯ В `head` СВОИХ СТРАНИЦ, а не в рамке сайта: главная и каталог его не везут вовсе. Так каждая страница получает только то, чем пользуется. 🔴 НИ ОДНОГО КОДА ЦВЕТА. Все цвета — именами РОЛЕЙ из `tokens.css` (`--tekst-tihiy`, `--frame`), и это не стиль, а способ не получить три разных зелёных на одной странице: UI строится тремя дорожками одновременно. Проверяется машиной сплошным проходом по всем файлам стилей (`core/site/tests/test_catalog_appearance.py`, проверка 9А-0в-01). ⛔ Ни одного чужого объекта: `body`, `main`, `.header`, `.footer`, `.zvonok` принадлежат рамке сайта (`site.css`), и второй владелец у них не заводится (🅱️5). Строку «звоните» эти страницы ИСПОЛЬЗУЮТ (`.zvonok`), но не переопределяют. ⚠️ Ширину страницы файл не трогает: у текстовых страниц она текстовая, и её задаёт `main` в рамке сайта. Каталожная ширина нужна сетке плиток — сетки здесь нет ни одной. */ /* ── Полоса со снимком над страницей ─────────────────────────────────────── */ /* 🔴 Добавлено координатором волны 3. Правило 10 дизайн-стандарта: первый экран обязан иметь настоящий визуал, а не пустое поле с одной строкой текста. ⚠️ Полоса лежит ВНЕ текстовой колонки — блоком `vo_vsyu_shirinu` рамки сайта. Так же устроен первый экран главной, и по той же причине: `main` ограничен шириной текста, и снимок внутри него остался бы шириной с абзац. Лечить это через `100vw` нельзя — `100vw` считает и полосу прокрутки, и страница получает горизонтальную прокрутку на ровном месте (`base.html`). ⚠️ Своё имя (`hero`), а не `pervyy-ekran` главной: тот принадлежит `home.css` и везёт свой снимок, свои две кнопки и каталожную ширину. Общего у них только приём (🅱️5 наоборот: разные объекты не сливаются в один ради экономии строк). */ /* ⛔ ПОЛОСЫ СО СНИМКОМ НА СТРАНИЦАХ-РАССКАЗАХ БОЛЬШЕ НЕТ НИ ОДНОЙ, и правила `hero`, `hero__vnutri`, `hero__zagolovok`, `hero__podzagolovok` сняты вместе с ней 12.08.2026. Последней её носила «Гарантия», и Кирилл перечеркнул блок целиком: «блок текущий удаляем полностью». «Сотрудничество» лишилось полосы ещё 07.08.2026 («картинку убираем старую с заглушки»). Причина у обеих одна: под каждой страницей идёт живое видео, и фотография поверх него — второй фон, спорящий с первым. Правила убраны, а не оставлены «на будущее»: сторож рассинхрона оформления (`test_0_stili_02`) краснеет на любом правиле, которому нет разметки, и после снятия полосы он назвал ровно эти четыре имени. Файлы `img/garantiya-1200.jpg`, `-2000.jpg`, `img/sotrudnichestvo-1200.jpg`, `-2000.jpg` не используются больше ни одной страницей — удалять чужую статику эта правка не берётся, их судьба за координатором. */ /* Отбивка от шапки и от подвала. Отдельным объектом, а не отступом у `h1`: на странице «Проекты» первым идёт список, а не заголовок группы, и отступ, привязанный к заголовку, там не сработал бы. */ .page { margin: 2rem 0 3rem; } /* Первый абзац страницы: он и есть её ответ, остальное — подробности. Крупнее основного текста ровно на шаг, без второго начертания: разнобой внутри страницы читается как разные разделы сайта. */ .page__lead { font-size: 1.15rem; } /* Оговорка: важное, но не то, ради чего пришли. Тем же тихим цветом, что оговорки в корзине и наличие на плитке, — одно состояние текста на всём сайте выглядит одинаково. */ .page__note { color: var(--tekst-tihiy); font-size: 0.95rem; } /* 🔴 ТИХИЕ СТРОКИ СТРАНИЦ ПОВЕРХ ВИДЕО КРАСЯТСЯ МЯГКИМ, А НЕ ТИХИМ ТОКЕНОМ. 12.08.2026 затемнение ослабили на 20 % по слову Кирилла, и замер сразу поймал две строки, которым запаса не осталось: оговорка про договор дала Lc 70 при нужных 75, срок ступени — 46 при 90 и отношение 4.44 при нижнем пороге 4.5. Чиним КРАСКОЙ, а не затемнением: плотность слоя — решение владельца, и возвращать её обратно ради двух строк нельзя. Тот же приём уже стоит на контактах, где две тихие строки подняты по этой же причине. ⚠️ Одной краски сроку ступени не хватило: у APCA порог зависит от кегля, и для мелкого сплошного текста он 90 против 75 у колонки основного текста. При 17 точках замер давал 74, краска подняла до 86, и добрать оставшееся можно только размером букв. Проверка: `python tools/zamer/text-contrast.py <адрес стенда>`, строка «срок ступени». 🔴 Краска тихих строк живёт НЕ ЗДЕСЬ, а ниже по файлу, в общем правиле вместе с часами на контактах и подписью реквизита: два правила одного веса спорят порядком, и разнеси их — следующая правка поднимет краску в одном месте и потеряет в другом. */ .page--text .steps__term { color: var(--tekst); font-size: 1.2rem; } /* Ссылка внутри текста страницы. Красится тем же зелёным, что кнопки и активные строки (`--list`): второй ссылочный цвет на сайте читался бы как другой сайт. Подчёркивание отодвинуто от букв — текст лежит на видео, и линия вплотную сливается с тенью под ним. ⚠️ Замер контраста обязателен при каждой правке этого правила: `--list` на плитке даёт Lc 59 при пороге 90 для мелкого текста. Здесь кегль страницы крупный, порог ниже, но проверяется он числом (`tools/zamer/text-contrast.py`), а не на глаз. */ /* ⛔ ПОДЧЁРКИВАНИЯ ЗДЕСЬ НЕТ И БЫТЬ НЕ МОЖЕТ. Оно стояло тут ровно один прогон и упало на стороже `test_2_01_podcherkivaniy_ssylok_net_ni_v_odnom_fayle`: подчёркнутых ссылок на сайте нет ни в одном файле, это правка Кирилла по всей рамке. Кликабельность держит зелёная краска — та же, что у кнопок и активных строк. */ .page__ssylka { color: var(--list); } .page__ssylka:hover { color: var(--list-svetlyy); } /* ── Проекты ─────────────────────────────────────────────────────────────── */ /* ── Лестница гарантии ───────────────────────────────────────────────────── */ /* Список определений: условие и срок — пара, и рисуются они парой. Отступ слева у `dd` браузер ставит сам, и здесь он не нужен: строк всего три, и лесенка из них читается хуже, чем ровный столбик. */ .steps { margin: 1rem 0 1.5rem; } .steps__case { font-weight: 700; } .steps__term { margin: 0 0 1rem; color: var(--tekst-tihiy); } /* ── Контакты ────────────────────────────────────────────────────────────── */ /* На страницу контактов приходят ровно за номером, поэтому он набран как заголовок: тем же начертанием и почти того же размера. Искать телефон в абзаце человек не будет. 🔴 НОМЕР СТОИТ ПО ЦЕНТРУ КОЛОНКИ, а не по левому краю, и это то же устройство, что у кнопки «Оставить заявку» на «Сотрудничестве»: главное действие страницы стоит на её оси, текст — по левому краю. Разъедься эти две страницы, и Кирилл увидел бы ровно то, что правил 07.08.2026 тремя заходами, — несовпадающие оси. 🔴 Цифры табличные, как в шапке и в подвале: номер из десяти цифр в обычном начертании даёт группы неодинаковой ширины при одинаковом числе знаков. ⚠️ Кегль взят ступенью шкалы, а не набран числом 1,8 рем, как было до 08.08.2026: своё число здесь означало бы сорок второй размер шрифта на сайте, не совпадающий ни с чем. */ .contacts__phone { /* Зазор под номером — тот же, что под строкой часов: правка Кирилла 08.08.2026, он показал его на снимке стрелками и потребовал одинаковых расстояний в обеих парах. */ margin: var(--o-5) 0 var(--o-6); font-family: var(--shrift-podzagolovka); font-size: var(--t-xxl); font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: .015em; text-align: center; } /* 🔴 НОМЕР БЕЛЫЙ, В СТЕКЛЯННОМ ОКНЕ. Итог трёх правок Кирилла по стенду 08.08.2026: сначала «телефон чёрного цвета будет», потом «верни прозрачный красивый дизайн окошка», и последним словом — «цифры в номере сделай белые». ⚠️ Тёмные цифры были попыткой, и она провалилась по замеру, а не по вкусу: под номером в кадре серое небо, и `tools/zamer/text-contrast.py` дал тёмным буквам Lc 29 при нужных 45. Держать их читаемыми могла только молочная плашка, а она перестала быть прозрачной — то есть требования «тёмные цифры» и «сквозь окно виден фон» несовместимы на этом фоне. Белые цифры снимают противоречие: сквозь стекло видно кадр, а буквы стоят на общей для всего сайта паре «светлый текст плюс тень». */ /* 🔴 ОКОШКО СТЕКЛЯННОЕ, А НЕ МОЛОЧНОЕ. Правка Кирилла 08.08.2026: «верни прозрачный красивый дизайн окошка с номером как было, я сказал тока цифры чёрным сделать». ⚠️ ЧТО ЭТО СТОИТ, НАЗВАНО ЧИСЛОМ, А НЕ СПРЯТАНО. Молочная плашка стояла здесь не для красоты: под номером в кадре серое небо, и замер `tools/zamer/text-contrast.py` дал тёмным цифрам на нём Lc 29 при нужных 45 — «читать нельзя». По молоку выходило 87. Сквозь стекло видно то же серое небо, то есть число возвращается к прежнему. Кирилл смотрел оба варианта на стенде и выбрал стекло; фон при этом меняется, и замер надо будет повторить на новом ролике. Кромка и заливка — те же, что у кнопки заявки: другого стеклянного окна на сайте нет, и второе с собственными значениями разъехалось бы с первым на первой правке. */ /* 🔴 ОКНО СТАЛО ПЛОТНЕЕ НА 25 ПРОЦЕНТНЫХ ПУНКТОВ — правка Кирилла 11.08.2026, дословно: «рамка номера невидна, либо убирай, а прозрачность попапа уменьши на 25%». Заливка стояла молочной плёнкой в 7 %; плюс 25 пунктов даёт 32 % сверху и 27 % снизу (`--steklo-nomera`, `tokens.css`) — сквозь стекло по-прежнему виден кадр, но заметно плотнее прежнего. Своя краска: `--steklo-plitka` той же плотности стоит на плитках каталога, и её лапать нельзя. Кромка проверена числом контраста, а не на глаз — результат в докладе окна. */ .contacts__phone a { display: inline-block; padding: var(--o-2) var(--o-6); border: 1px solid var(--akcent-detal); border-radius: var(--r-pill); background: var(--steklo-nomera); color: var(--tekst); transition: transform var(--hod), background var(--hod), box-shadow var(--hod); } /* Под курсором плашка приподнимается — тот же отклик, что у кнопки заявки, и та же величина. Краску не меняем: цвет номера назвал Кирилл, и мигание оттенка под мышью читалось бы как подмена элемента. */ .contacts__phone a:hover { transform: translateY(-2px); box-shadow: var(--ten-akcenta); color: var(--tekst); } .contacts__phone a:focus-visible { outline: 3px solid var(--akcent); outline-offset: 3px; } /* ── Страницы-рассказы: «Сотрудничество» и «Контакты» ────────────────────── */ /* 🔴 ПРИЗНАК `page--text` НЕСУТ ОБЕ СТРАНИЦЫ, и до 08.08.2026 он звался `page--sotrudnichestvo`. Переименован, а не скопирован: требование Кирилла к контактам — «все ОБЯЗАНО быть ВЫРАВНЕНО так же как на странице с СОТРУДНИЧЕСТВО, вот прям так же». Два набора правил с одинаковым видом разъезжаются на первой правке — поправят один, второй останется прежним. */ /* 🔴 ОДНА ОБЛАСТЬ НА ВЕСЬ ТЕКСТ СТРАНИЦЫ: РОВНАЯ ПЛОТНОСТЬ, МЯГКИЕ КРАЯ. Три захода до этого были неверными, и каждый по-своему: · пятно-эллипс на всю колонку — середина тёмная, низ голый. Оценка Кирилла: «ТЕКСТ НЕ ПОКРЫТ ЗАТЕМНЕНИЕМ ВООБЩЕ»; · острова под каждым блоком — покрыто всё, но между соседними островами пошли ступени. Его оценка: «что за адские стыки?»; · эллипс во всю ширину окна — края ушли, но плотность всё равно падала к низу страницы. Как надо, и так сделано на первом экране главной: заливка РОВНАЯ по всей области, а плавность живёт только на её краях. Тогда под текстом плотность одинаковая сверху донизу (стыкам взяться неоткуда), а по краям тёмное растворяется в кадре. Края гасят две маски — по вертикали и по горизонтали, сложенные `intersect`. Переход у обеих растянут на пятую часть стороны: чем он длиннее, тем меньше глаз ловит границу. Размытие 3 точки лежит на той же области и гаснет вместе с ней, потому что маска действует и на него: «планомерное затемнение + 3-5% размытие» — его слова 12.08.2026. */ .page--text { position: relative; } /* 🔴 ВЫЛЕТ СЛОЯ ВБОК СЧИТАЕТСЯ ОТ ОКНА, А НЕ НАБРАН В `rem`, И ЭТО ПОЧИНКА, А НЕ УКРАШЕНИЕ. Набранные 8,5 рем — это 136 точек с каждой стороны при любой ширине. На мониторе они лежат в полях страницы и не мешают; на телефоне 390 точек колонка занимает 358, и слой становится шириной 630 — то есть ШИРЕ ОКНА. Замер штаба 12.08.2026: `document.scrollWidth` 630 при `innerWidth` 390 на обеих страницах, на 820 то же самое. На боевом сайте в тот же час было 390 при 390 — значит поломку внесла эта ветка. Что видит человек: страница ездит вбок при попытке пролистать её пальцем, и вместе с ней ездит шапка. Это же ловит сторож вида первой находкой «страница шире окна». `min()` берёт меньшее из двух: на широком экране вылет прежний, на узком он считается от самого окна и за край не выходит. Обрезкой (`overflow: clip`) это лечить нельзя — она срезала бы мягкий край слоя ровной линией, то есть вернула бы тот самый стык, ради снятия которого маска и рисовалась. */ /* 🔴 ПОДВАЛ ПРИЖАТ К НИЗУ ОКНА, а не висит там, где кончился текст. Кирилл 12.08.2026 отчеркнул это на контактах: «в разделе контакты съехал подвал наверх». Замер на его экране 2560×1440: контент страницы 982 точки, подвал кончается на 982, ниже — 458 точек пустого видео. Прижат он не был никогда: на длинных страницах («Гарантия», «Сотрудничество») текста хватает, чтобы дотянуть до низа, и беда не видна. Заметной она стала, когда затемнение стало ровным слоем на весь экран: раньше низ кадра был тёмным сам по себе и пустота не читалась. Три строки ниже — обычная колонка: шапка, тело, подвал; тело растёт, подвал не сжимается. `100dvh`, а не `100vh`: на телефоне адресная строка браузера то появляется, то прячется, и высота окна меняется на её высоту — от `vh` подвал дёргался бы при прокрутке. ⚠️ Правило живёт в `pages.css`, то есть только на страницах-рассказах. В общей рамке сайта его нет сознательно: у главной своя раскладка первого экрана, и колонка на `body` там поменяла бы поведение блоков, которых это правило не касается. */ body { min-height: 100dvh; display: flex; flex-direction: column; /* Слой затемнения шире окна на ширину полосы прокрутки (`100vw` считает вместе с ней). Без этой строки страница получает горизонтальную прокрутку в 15–17 точек — беда, которая на этом сайте уже случалась дважды и оба раза находилась на телефоне. `clip` вместо `hidden` выбран сознательно: `hidden` создаёт контейнер прокрутки и ломает залипание. */ overflow-x: clip; } main { flex: 1 0 auto; } .footer { flex-shrink: 0; } /* 🔴 ЗАТЕМНЕНИЕ — РОВНЫЙ СЛОЙ НА ВЕСЬ ЭКРАН, БЕЗ ФОРМЫ, БЕЗ МАСКИ И БЕЗ ГРАДИЕНТА. Решение Кирилла 12.08.2026, дословно: «проще явно уже всё затемнить (тока на 20% меньше)». До него было семь вариантов, и каждый он забраковал по снимку: радиальный градиент дал кольца на ровном небе · пара линейных — прямоугольник с угадываемыми углами · острова под блоками — ступени на стыках · картинка-пятно — прямые боковые стороны во всю высоту страницы · цепочка эллипсов с рваным краем — «ты просто тёмные пятна наспамил» · вертикальный профиль во всю ширину — незатемнённые полосы сверху и снизу, он обвёл их зелёным прямо на снимке. Вывод, ради которого это написано: **как только у затемнения появляется форма, у формы появляется край, и край видно.** Спрятать край нечем — переход требует места, а его нет. Ровный слой края не имеет вовсе, поэтому и прятать нечего. `fixed`, а не `absolute`: слой обязан закрывать экран целиком при любой прокрутке. У блока `absolute` края совпадают с началом и концом колонки текста — это и были те самые дыры сверху и снизу. Высота страницы при этом не важна, и от её длины ничего не зависит. ⚠️ Полосы прокрутки `fixed` не касается: слой меряется по окну, а не по документу, поэтому `100vw` тут не нужен и горизонтального вылета не возникает. */ .page--text::before { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; background: var(--oblako-teksta); backdrop-filter: var(--tuman-pod-tekstom); } /* 🔴 КРАСНАЯ СТРОКА У СЕМИ АБЗАЦЕВ ТЕЛА — слова Кирилла 11.08.2026: «На странице 7 абзацев, КАЖДЫЙ ОБЯЗАН начинаться с пробела, а щас ни у кого нету отступа в начале — некрасиво». Отступ первой строки в стилях, а не пробел в разметке шаблона: пробел в HTML браузер схлопывает, и на странице его не будет видно вовсе. ⚠️ ТОЛЬКО НА «СОТРУДНИЧЕСТВЕ» (`:not(.page--center)`, признак «Контактов»), и только у семи абзацев тела: два в вводке плюс пять в блоках предложений — заголовки, оговорка «Стоимость доставки» и строка часов под кнопкой в подсчёт не входят, они не абзацы тела, а именно так их и посчитал Кирилл. */ .page--text:not(.page--center) .vvodka p, .page--text:not(.page--center) .predlozhenie p { text-indent: 1.5em; } /* 🔴 ВЕСЬ ТЕКСТ РАЗДЕЛА ЛЕЖИТ ПРЯМО НА ВИДЕО, и читаемость ему даёт не размер, а подложка. Правка Кирилла 07.08.2026: «текст плохо читается на фоне фона, надо чуть крупнее буквы и как-то почетче». Сделано тремя вещами разом, потому что по отдельности не хватает ни одной: кегль на ступень выше · тень под буквами (та же роль, что у первого экрана главной) · полный цвет текста вместо тихого. ⚠️ Тень задана ОДНИМ правилом всей странице, а не восьми объектам порознь: восемь одинаковых значений разъезжаются на первой же правке. */ .page__zagolovok, .page__lead, .predlozhenie p, .predlozhenie__zagolovok, .contacts__phone, .legal__label, .legal__value { text-shadow: var(--ten-teksta); } /* 🔴 ТИХИЙ ТЕКСТ ЭТИХ ДВУХ СТРАНИЦ КРАСИТСЯ КАК АБЗАЦ ПОВЕРХ ЖИВОГО ФОНА, А НЕ КАК ОГОВОРКА на сплошном фоне. Кирилл 11.08.2026 показал на две строки контактов: «часть текста НЕЧИТАЕМА, я выделил» — часы работы и «Звоните: подберём растения под участок…». Замер штаба нашёл, что таких мест на двух страницах пять, а не две. Числа до правки (`text-contrast.py`, ширина 1440, свой стенд): часы на контактах Lc 21, отношение 1,7 абзац «Звоните» Lc 21, отношение 1,7 подпись реквизита Lc 37, отношение 2,96 оговорка про доставку Lc 24, отношение 1,91 значение реквизита Lc 75 Общее у них одно: класс `--tekst-tihiy` — краска для второстепенного текста НА СПЛОШНОМ ФОНЕ. Поверх кадра с туманом она пропадает целиком, и затемнение колонки её не спасает: оно гасит фон, а у самой краски запаса нет. Поэтому правится КЛАСС, а не те две строки, на которые показал Кирилл, — иначе соседние остались бы такими же слепыми. Метод тот же, что на калькуляторе (ветка `kalkulyator-vid`), и это его требование дословно: «Правь по аналогии с текстом в первом задании… Метод и там и там один должен быть». ⚠️ Кегль подписи реквизита НЕ поднимается вместе с краской: пара «подпись — значение» стоит одной строкой, и на 17 точках «Юридический адрес» перестаёт помещаться рядом со своим значением — адрес переносится на строку ниже и пара распадается. */ /* ⚠️ КРАСКА ПОДНЯТА ЕЩЁ РАЗ, 12.08.2026, вместе со вторым ослаблением затемнения (.36 → .32 по слову Кирилла). Мягкого токена хватало при плотном слое; на ослабленном замер показал у оговорки про договор Lc 69 при нужных 75, у часов на контактах 65 при 90, у подписи реквизита 74 при 90. Плотность слоя — решение владельца, поэтому тянем краску, а не фон. */ .page--text .page__note, .page--text .contacts__hours, .page--text .legal__label { color: var(--tekst); text-shadow: var(--ten-teksta); } /* Заголовки делит браузер, ровно: короткая надпись, разорванная на «Сады, парки и» плюс «крупные объекты», выглядит случайной. У абзацев свойство не стоит — там строк много, и выравнивать длину каждой не нужно, достаточно ровного левого края. */ .page__zagolovok, .predlozhenie__zagolovok { text-wrap: balance; } /* Оговорки набраны той же колонкой и тем же левым краем, что весь текст: центрированная строка мелким кеглем посреди страницы читается подписью к картинке, которой нет. */ .page--text .page__note { text-align: start; } /* Часы работы под номером — та же пара, что кнопка и часы на «Сотрудничестве», и середина задана явно по той же причине: оговорки страницы выключены влево общим правилом, и без этой строки часы уехали бы из-под номера. 🔴 ПРАВИЛО СТОИТ ПОСЛЕ `.page--text .page__note`, И ПОРЯДОК ЗДЕСЬ НЕСУЩИЙ. Оба селектора весят одинаково, поэтому побеждает тот, что ниже по файлу. Написанное выше, это правило молча проигрывало общей выключке влево, и часы стояли слева под номером, стоящим по центру: первое, что Кирилл отчеркнул на стенде 08.08.2026 («не выровнял относительно остального»). 🔴 ДВА ОДИНАКОВЫХ ЗАЗОРА: номер ↔ часы и часы ↔ первый абзац. Кирилл показал их на снимке стрелками 08.08.2026 и потребовал именно равенства: «делай расстояние между номером и фразой больше… и ЭТО ЖЕ РАССТОЯНИЕ ДОЛЖНО БЫТЬ между "на связи.." и "звоните.."». ⚠️ ЗДЕСЬ СТОЯЛА СТУПЕНЬ `--o-9` (128 точек) — отбивка «в размер абзаца», его же правка часом раньше. Снята им же по стенду: абзац переехал под строку часов и стал её продолжением. ⚠️ Собственный верхний отступ первого абзаца вводки снимается соседним правилом ниже — без этого зазоры сложились бы и вышли неравными: 40 сверху и 55 снизу. */ .page--text .contacts__hours { margin: 0 0 var(--o-6); text-align: center; } /* Первый абзац сразу после часов: свой верхний отступ ему не нужен, расстояние уже задано строкой часов. Селектор соседский, а не по классу страницы: правило касается ровно этой пары объектов и на «Сотрудничестве», где часов сверху нет, не срабатывает вовсе. */ .contacts__hours + .vvodka > p:first-child { margin-top: 0; } /* 🔴 ШИРИНУ ДЕРЖИТ КОЛОНКА СТРАНИЦЫ, А НЕ МЕРА СТРОКИ. Рамка сайта ограничивает КАЖДЫЙ абзац мерой в единицах его собственного кегля (`p { max-width: var(--shirina-stroki) }`). На этой странице кегли разные — текст 20 точек, оговорки 17, — и абзацы получали РАЗНУЮ ширину: замер на окне 1440 показал 704 точки у текста и 633 у оговорки. Правый край гулял на 71 точку, а центрированная под кнопкой строка часов уезжала на 36 точек влево от её оси. Именно это Кирилл трижды назвал кривым. ⚠️ Мера строки при этом не потеряна: её роль здесь исполняет сама колонка страницы (`--width-text`, 46 рем), и она одна для всех абзацев независимо от кегля. */ .page--text p { max-width: none; } /* Заголовок страницы стоит в потоке, а не в полосе со снимком: полоса снята правкой Кирилла («картинку убираем старую с заглушки»). Тень крупная — своя для крупных букв. */ /* 🔴 КЕГЛЬ НА ТРЕТЬ ВЫШЕ СТУПЕНИ ШКАЛЫ, и множитель написан прямо в правиле. Правка Кирилла 08.08.2026: «давай всем трём заголовкам увеличим размер шрифта на треть». Так и записано — «ступень × 4/3», а не готовое число 37: ступень `--t-xxl` подвижная (`clamp`), она сама ужимается на телефоне, и набранное число выключило бы эту подвижность. */ .page__zagolovok { margin: var(--o-6) 0; font-size: calc(var(--t-xxl) * 4 / 3); text-align: center; text-shadow: var(--ten-teksta-krupnogo); } /* Раздел для профессионалов: студии и архитекторы, садовые центры, крупные объекты. Текст согласован Кириллом 07.08.2026, разбор решений — в самом шаблоне страницы. 🔴 ВВОДКА И ОГОВОРКИ ПО ЦЕНТРУ, А ТЕЛО БЛОКОВ ВЛЕВО, и это не разнобой, а две разные работы. Вводка — одно обещание на всех троих, её читают целиком; абзац из четырёх строк, выключенный по центру, теряет левый край, и глаз ищет начало каждой строки заново. Условия внутри блоков читают выборочно, глазами по левому краю, поэтому там выключка обычная. */ /* 🔴 ОДНА КОЛОНКА НА ВСЮ СТРАНИЦУ, И ЭТО ГЛАВНАЯ ПРАВКА ВИДА. 07.08.2026 Кирилл показал снимок с двумя красными линиями: вводка стояла в колонке 40 рем по центру, а блоки — в общей текстовой колонке страницы, и левые края у них не совпадали. Глаз читает это как несобранную вёрстку, даже не понимая, в чём дело. Здесь вводка перестала быть отдельной колонкой: у неё та же ширина, тот же левый край и та же выключка, что у остального текста. Симметрию держат заголовки и кнопка, стоящие по центру этой единственной колонки, а не вторая колонка внутри первой. ⚠️ Выключка по центру у вводки СНЯТА намеренно. Центрированный абзац в четыре строки даёт рваные края с обеих сторон — именно это Кирилл и назвал кривым. */ .vvodka { margin-left: 0; margin-right: 0; } /* Кегль вводки и тела блоков поднят на ступень против страничного: 20 точек вместо 17. Ступень взята из шкалы, а не набрана числом, — иначе на странице появился бы сорок второй размер шрифта, не совпадающий ни с чем. ⚠️ Правило привязано к СВОЕЙ странице (`page--text`), а не к `.page__lead` вообще: тот же объект стоит на «Гарантии» и «Контактах», и без привязки обе страницы молча поехали бы вместе с этой. */ .page--text .page__lead, .predlozhenie p { font-size: var(--t-l); } /* Блок предложения. Тонкая светлая кромка сверху вместо панели — тот же приём, что у экрана сотрудничества на главной, и по той же причине: под страницей идёт живое видео, и тёмный штрих поверх картинки читается как царапина на стекле. */ .predlozhenie { margin: var(--o-6) 0 0; padding: var(--o-5) 0 0; border-top: 1px solid var(--frame); } /* 🔴 ЗАГОЛОВОК ДВЕРИ ВЕРНУЛСЯ К ЗАГОЛОВОЧНОМУ НАЧЕРТАНИЮ. Правка Кирилла 07.08.2026: «заголовки должны быть шрифтом для заголовков, текст шрифтом для текста». Шрифт у него был верный с самого начала — Manrope приходит от `h2` из рамки сайта, — а вот вес я снял до 400, и рядом с текстом в 20 точек он перестал читаться заголовком вовсе. Теперь вес наследуется от рамки (600), а кегль на ступень выше тела блока. */ /* Кегль поднят на треть той же правкой Кирилла и тем же способом, что у заголовка страницы: множитель к ступени шкалы, а не своё число. */ .predlozhenie__zagolovok { margin: 0 0 var(--o-3); font-size: calc(var(--t-xl) * 4 / 3); letter-spacing: .01em; text-align: center; } /* Действие страницы: кнопка и часы работы одним блоком. Поля сверху и снизу РАВНЫЕ — правка Кирилла по стенду («отступы корявые, сделай симметричные»). Порознь у кнопки и абзаца складывались разные поля, и зазор над кнопкой выходил меньше, чем под ней. */ .deystvie { margin: var(--o-7) 0; text-align: center; } /* Часы работы отбиты от кнопки той же ступенью, что и кнопка от текста над ней. ⚠️ Середина задана строке ЯВНО: оговорки страницы выключены по левому краю общим правилом, и без этой строки часы уехали бы влево из-под кнопки, стоящей по центру. */ .page--text .deystvie__chasy { margin: var(--o-4) 0 0; text-align: center; } /* 🔴 КНОПКА СВОЯ, А НЕ `.knopka` ГЛАВНОЙ, и это вынужденно: та живёт в `home.css`, который на страницах вкладок не подключён вовсе, и ссылка на её имя дала бы голый текст ссылки. Ровно так же поступила страница калькулятора изгороди (`hedge.css`) — приём общий, объекты разные. Кромка бронзовая (`--akcent-detal`) — та же краска, что обводит снимки в примерах работ, и это решение Кирилла 07.08.2026: «наш фирменный ободок в оранжево-бронзовый (как у примеров работ)». Фон стеклянный, а не залитый: зелёная заливка — главное действие сайта (купить), и второй такой же кнопки на сайте быть не должно. */ /* 🔴 ПЛИТКА СОЦСЕТИ БЕРЁТ ТОТ ЖЕ ВИД, что кнопка заявки, — одним правилом, а не своей копией значений. Обе — «стеклянная таблетка в бронзовой кромке», и это опознавательный знак сайта; набери их порознь, и через месяц у нас было бы два разных бронзовых края и два разных скругления на соседних страницах. Разница между ними ровно в размере, и она задана ниже, отдельным правилом. */ .zayavka, .social__link { display: inline-flex; align-items: center; gap: var(--o-2); padding: var(--o-4) var(--o-7); border: 1px solid var(--akcent-detal); border-radius: var(--r-pill); background: var(--zalivka-glavnaya); box-shadow: var(--ten-1); color: var(--tekst); font-family: var(--shrift-podzagolovka); font-size: var(--t-m); font-weight: 600; letter-spacing: .02em; text-decoration: none; transition: transform var(--hod), background var(--hod), box-shadow var(--hod), color var(--hod); } /* 🔴 ВНУТРИ КНОПКИ ЗЕЛЁНОЕ СТЕКЛО, А НЕ ПРОСТО СТЕКЛО. Правка Кирилла 07.08.2026: «кнопку оставить заявку сделай чуть зеленого цвета внутри, и еще немного зеленеющую при наведении». Взята готовая роль главной плитки ряда — единственное место сайта, где зелёный работает заливкой, а не действием; под курсором зелени вдвое больше плюс своё свечение. ⚠️ Кромка остаётся бронзовой в обоих состояниях: она и есть опознавательный знак кнопки, и мигание края под курсором читалось бы как подмена элемента. */ .zayavka:hover, .social__link:hover { transform: translateY(-2px); background: var(--zalivka-glavnaya-navedenie); box-shadow: var(--ten-2), var(--ten-akcenta); color: var(--tekst); } /* Обвод для клавиатуры — той же краской, что на всём сайте: человек, идущий табуляцией, обязан видеть, где он стоит, и видеть это одинаково на всех страницах. */ .zayavka:focus-visible, .social__link:focus-visible { outline: 3px solid var(--akcent); outline-offset: 3px; } /* 🔴 ПОЛКА ПОД ШАПКОЙ ВЕРНУЛАСЬ — правка Кирилла 11.08.2026, дословно: «нижняя шапка уехала вверх… ЩАС ВСЕ СЛИШКОМ ВЫСОКО РОВНО НА ВЫСОТУ СЪЕХАВШЕЙ ПОЛКИ (нормальная полка на главной, например)». Замер штаба на 1440: заголовок стоял на y=83 при шапке высотой 43 и зазоре 40 точек, на главной у первого заголовка зазор 99 (шапка 43, y=141,8). Числа до и после правки на этой копии — в докладе окна. ⚠️ Отступ ставится ЭТОЙ странице через `.page--center` — признак несёт только «Контакты» (проверено сплошным поиском по шаблонам), — а не общему `.page`: тот же класс несут «Гарантия», «Проекты» и калькулятор, а калькулятор прямо сейчас правит соседняя ветка `kalkulyator-vid`. Опускается содержимое ЦЕЛИКОМ, а не один заголовок: `padding-top` стоит на обёртке страницы, до первого дочернего блока, и сдвигает вниз всё разом — заголовок, номер, часы, оба раздела и реквизиты, — потому что Кирилл потребовал ровно этого: «вниз должно уйти всё». */ .page--center { padding-top: 27px; } /* ── Страница, выключенная по центру ─────────────────────────────────────── */ /* 🔴 Решение Кирилла 08.08.2026: «Контакты — ведущая "шапка" этой страницы, от неё идёт выравнивание по центру для всего текста». Признак несёт страница контактов, и только она. 🔴 СЕЛЕКТОР ВЕСИТ ДВА КЛАССА НАМЕРЕННО. Общее правило страниц-рассказов выключает оговорки влево (`.page--text .page__note`), и оно тоже весит два класса; правило в один класс молча проиграло бы ему, а обнаружилось бы это на живой странице. Тот же случай, что со строкой часов часом раньше. */ .page--center p, .page--center .page__note { text-align: center; } /* 🔴 РЕКВИЗИТЫ ТОЖЕ ПО ЦЕНТРУ, И ЭТО ЗНАЧИТ СТРОКАМИ, А НЕ ТАБЛИЦЕЙ. Правка Кирилла 08.08.2026: «реквизиты НЕ выровнял». Здесь стояли две колонки — подписи столбцом слева, значения столбцом справа, — и весь блок был поставлен по центру страницы целиком. По оси страницы он при этом стоял (замер: 720 при середине 720), а глаз видел два левых края посреди центрованного текста, то есть выравнивания не видел вовсе. Стало: пара «подпись — значение» одной строкой, каждая строка по центру. Подпись остаётся тихой, значение полным цветом — читаются они по-прежнему как пара, а не как сплошная фраза. */ .page--center .legal__row { display: flex; flex-wrap: wrap; justify-content: center; align-items: baseline; gap: var(--o-1) var(--o-3); } /* ── Соцсети на странице контактов ───────────────────────────────────────── */ /* 🔴 РЯД ПЛИТОК СТОИТ ПО ЦЕНТРУ КОЛОНКИ — по той же оси, что заголовки и телефон. Это тот же приём, что у кнопки заявки: действие на оси, текст по левому краю. ⚠️ Перенос разрешён (`flex-wrap`), потому что сетей может стать больше четырёх, а на телефоне в строку не встают и две: без переноса ряд вылезал бы за колонку и давал бы странице поперечную прокрутку — то самое, чего рамка сайта избегает и в других местах. Маркеры и левый отступ списка сняты: браузер ставит их сам, и точка перед плиткой читается как сбитая вёрстка. */ .social { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--o-3); margin: var(--o-5) 0 0; padding: 0; list-style: none; } /* Плитка мельче кнопки заявки на две ступени, и это соподчинение, а не вкус: главное действие страницы — звонок, а соцсети рядом с ним второстепенны. Равные по весу, они спорили бы с телефоном за внимание ровно на той странице, куда приходят за телефоном. */ .social__link { padding: var(--o-2) var(--o-5); font-size: var(--t-s); } /* ── Реквизиты на странице контактов ─────────────────────────────────────── */ /* 🔴 ПОДПИСЬ И ЗНАЧЕНИЕ — ПАРА, поэтому это список определений, а не абзац со знаками препинания. Строку «ИНН 0800041334» бухгалтер заказчика ищет глазами по левому краю и копирует целиком; в сплошном абзаце через точку с запятой её приходится вычитывать. Пара стоит В ДВЕ КОЛОНКИ: подписи ровным столбцом слева, значения — своим столбцом справа. Ширина столбца подписей задана числом (13 рем — по самой длинной, «Юридический адрес»), а не содержимым: `auto` дал бы разную ширину на разных страницах, если реквизитов станет больше или меньше. */ .legal { display: grid; gap: var(--o-3); margin: var(--o-5) 0 0; } .legal__row { display: grid; grid-template-columns: 13rem 1fr; gap: var(--o-1) var(--o-5); } /* Подпись тихим цветом — тем же, что оговорки страницы: она нужна, чтобы опознать строку, а не чтобы её читали. Значение полным цветом текста и с табличными цифрами: ОГРН из тринадцати знаков сверяют знак в знак. */ .legal__label { margin: 0; color: var(--tekst-tihiy); font-size: var(--t-s); } .legal__value { /* Отступ слева у `dd` браузер ставит сам, и здесь он сдвинул бы второй столбец относительно собственного заголовка. */ margin: 0; font-variant-numeric: tabular-nums; letter-spacing: .01em; } /* На телефоне две колонки не живут: под значение остаётся 8 рем, и адрес рвётся на пять строк рядом с подписью в одну. Пара становится столбиком — подпись над значением. */ @media (max-width: 40rem) { .legal__row { grid-template-columns: 1fr; } } /* ── Переключатель «до / после» на странице проектов ───────────────────────── */