/* Стили, без которых первый экран обходится. Грузятся отдельным файлом и не задерживают отрисовку страницы. Сюда попадает всё, что ниже сгиба или появляется по действию посетителя: плавающая кнопка WhatsApp, баннер cookie, галерея, карта, калькулятор. Пока здесь только то, что уже сделано. */ /* ПЛАВАЮЩАЯ КНОПКА WHATSAPP УБРАНА 09.09.2026 вместе с разметкой, решение владельца. Здесь было 10 строк. Оформление убрано ВМЕСТЕ с разметкой, а не оставлено «на всякий случай»: мёртвое правило однажды оживёт на чужом элементе. */ /* --- Баннер cookie --- */ .cookie{ position:fixed;left:20px;right:20px;bottom:20px;z-index:80; background:var(--card);border:1px solid var(--line);border-radius:var(--r); padding:18px 22px;display:flex;align-items:center;gap:20px;flex-wrap:wrap; box-shadow:0 12px 34px rgba(42,36,29,.18); max-width:720px;margin:0 auto;font-size:14px;color:var(--dim); } .cookie p{flex:1;min-width:220px;margin:0} .cookie .btn{padding:10px 20px;font-size:14px} @media(max-width:640px){ .cookie{left:12px;right:12px;bottom:12px;padding:14px 16px} } /* Отступ баннера снизу. Раньше здесь разводились баннер и плавающая кнопка WhatsApp; кнопки больше нет, отступ остался как поле. баннер живёт над кнопкой, пока его не закрыли. */ /* КАРТА НА КАРТОЧКЕ ОБЪЕКТА отсюда убрана 09.09.2026: оформление перенесено из макета, имя obj-map. Здесь было 19 строк. ДОПИСКА ВОКРУГ: пояснение под картой. В макете его нет — там карта заглушка. У нас под ней стоит строка о том, что точка показана приблизительно: продавец не даёт точного адреса до сделки, и молчать об этом значит обещать точность, которой нет. */ .obj-map-poyasnenie{font-size:13px;color:var(--dim);margin:10px 0 0} /* Текст только для читалки: виден программе, не виден глазу. Нужен там, где смысл ссылки передан значком, — «убрать условие» у крестика плашки. ДОПИСКА ВОКРУГ МАКЕТА: в макете крестик стоит без пояснения, и читалка произносит «крестик». Уехал 09.09.2026 вместе с разделом формы и вернулся сюда же: проверка «ни один класс не забыт» поймала пропажу в тот же прогон. */ .skryto{position:absolute;width:1px;height:1px;padding:0;margin:-1px; overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0} /* Карта секцией на главной. Тем же путём уехала и вернулась. */ /* Высоту карты на главной задаёт макетное правило .map-box — 420 точек, ровно столько же, сколько подбиралось здесь. Правило убрано 09.09.2026 как повтор. */ /* ФОРМА ПОИСКА, ОКНО ФИЛЬТРОВ, РАСКРЫВАШКИ, ПЛАШКИ ВЫБРАННОГО и три пары площадей отсюда убраны 09.09.2026: их оформление перенесено из макета в critical.css. Форма стоит на первом экране — отложенный файл догружается позже, и она мигала бы неоформленной. Здесь было 227 строк своей вёрстки. В макете тот же блок — 86 строк. */ /* --- Страница «Партнёрам» ------------------------------------------------ Строение из макета MAKET-partneram.html, ОФОРМЛЕНИЕ ПО УТВЕРЖДЁННОЙ ПАЛИТРЕ. Макет нарисован 19.08.2026, до её утверждения: там другие шрифты и другой бежевый. Взяты текст и строение, цвета — из спецификации, раздел 0. */ /* Размеры приведены к макету 11.09.2026 при сверке оформления: было 12px/.1em/600/6px, в макете 13.5px/.14em/700/12px. Цвет остаётся из спецификации — см. оговорку выше. */ .nadzagolovok{margin:0 0 12px;font-size:13.5px;letter-spacing:.14em; text-transform:uppercase;color:var(--acc);font-weight:700} .lid{margin:0 0 26px;font-size:18px;line-height:1.5;color:var(--dim)} /* Блок призыва: тёмная рамка с одной кнопкой. */ .prizyv{background:var(--ink);color:#fff;border-radius:var(--r); padding:48px 36px;text-align:center;margin:36px 0 8px; position:relative;overflow:hidden} /* Тёплое пятно в углу — из макета, но терракотой из палитры. */ .prizyv::before{content:"";position:absolute;top:-60px;right:-40px; width:220px;height:220px;border-radius:50%; background:radial-gradient(circle,rgba(191,106,69,.35), transparent 70%)} .prizyv > *{position:relative} .prizyv-plashka{display:inline-block;margin:0 0 16px;padding:7px 16px; border-radius:999px;background:rgba(255,255,255,.12); font-size:13.5px} .prizyv-zagolovok{margin:0 0 10px;font-size:28px;line-height:1.25;color:#fff} .prizyv-tekst{margin:0 auto 24px;max-width:560px;font-size:15.5px; color:rgba(255,255,255,.8)} .btn-bolshaya{padding:14px 32px;font-size:16px} /* На телефоне отступ в 48 пикселей с каждой стороны съедает пятую часть ширины, а заголовок в 28 пикселей ломается на четыре строки. */ @media (max-width:560px){ .prizyv{padding:32px 20px;margin:28px 0 8px} .prizyv-zagolovok{font-size:23px} .prizyv-tekst{font-size:15px} .btn-bolshaya{display:block;padding:14px 20px} .lid{font-size:16.5px;margin-bottom:22px} } /* --- Страница «О нас»: цифры, вопросы, перелинковка ----------------------- */ .tsifry{display:grid;grid-template-columns:repeat(3,1fr);gap:18px; margin:0 0 28px} .tsifra{display:flex;flex-direction:column;gap:3px; background:var(--card);border:1px solid var(--line); border-radius:var(--r);padding:16px 18px} .tsifra-chislo{font-family:var(--zagolovki,Lora,Georgia,serif); font-size:22px;color:var(--acc);line-height:1.2} .tsifra-podpis{font-size:13.5px;color:var(--dim)} /* Вопросы раскрываются тегом details — браузер умеет это сам, без единой строки скрипта. */ .faq-punkt{border-bottom:1px solid var(--line)} .faq-punkt:last-child{border-bottom:none} .faq-vopros{list-style:none;cursor:pointer;padding:14px 30px 14px 0; position:relative;font-weight:600;font-size:16px} .faq-vopros::-webkit-details-marker{display:none} .faq-vopros::after{content:"+";position:absolute;right:4px;top:12px; font-size:22px;line-height:1;color:var(--acc); font-weight:400} .faq-punkt[open] .faq-vopros::after{content:"‘2"} .faq-otvet{padding:0 0 14px;color:var(--dim);font-size:15px} .faq-otvet p{margin:0 0 8px} .faq-otvet p:last-child{margin:0} .perelinkovka{display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px; margin:28px 0 8px;font-size:14.5px} .perelinkovka-podpis{color:var(--dim)} .perelinkovka a{color:var(--acc);text-decoration:none; border-bottom:1px dashed currentColor} .perelinkovka a:hover{color:var(--acc2)} @media(max-width:900px){ .tsifry{grid-template-columns:1fr 1fr} } @media(max-width:560px){ .tsifry{grid-template-columns:1fr} } /* --- Нижняя полоса на телефоне -------------------------------------------- Спецификация, раздел 3.11. На узком экране боковая колонка уходит вниз, и цена с кнопкой оказываются в конце длинной страницы. Полоса держит их на кромке экрана. НА ШИРОКОМ ЭКРАНЕ ЕЁ НЕТ ВОВСЕ: там боковая колонка и так перед глазами, а полоса закрывала бы содержимое. */ .nizhnyaya-polosa{display:none} @media(max-width:900px){ /* ВЫСОТА ПОЛОСЫ ОДНИМ МЕСТОМ. Раньше она нигде не была задана — складывалась из отступов и текста и получалась 67 точек, — а подвал отодвигался от низа числом 76, набранным под неё вручную. Два места, одна величина: любая правка отступов здесь оставила бы подвал либо с щелью, либо под полосой. Теперь высота названа, и отступ подвала считается от неё. */ :root{--h-polosy:67px} .nizhnyaya-polosa{ display:flex;align-items:center;justify-content:space-between;gap:14px; position:fixed;left:0;right:0;bottom:0;z-index:60; height:var(--h-polosy);box-sizing:border-box; padding:10px 16px;background:var(--card); border-top:1px solid var(--line); box-shadow:0 -6px 20px rgba(0,0,0,.10); } /* ЦЕНА НЕ СЖИМАЕТСЯ, КНОПКА ПОДСТРАИВАЕТСЯ. Найдено владельцем 10.09.2026: «кнопка наезжает на цену». Замер на экране 390: цене доставалось 80 точек, кнопке 264 — и «От 360 000 €» не помещалось в свои 80, обрезаясь на середине. Причина: оба блока имели право сжиматься, а сжимался тот, чьё содержимое можно перенести. У кнопки текст в одну строку переносить запрещено — она держала свою ширину, цена уступала. Кто главнее. Цена — это то, ради чего человек смотрит полосу: она читается целиком всегда. Кнопка узнаётся и укороченной, и ей достаётся остаток. min-width:0 нужен, чтобы она могла сжиматься ниже длины своего текста. */ .polosa-tsena{display:flex;flex-direction:column;line-height:1.2; flex:0 0 auto} .polosa-podpis{font-size:11px;color:var(--dim)} .polosa-chislo{font-size:17px;font-weight:600;white-space:nowrap} .nizhnyaya-polosa .btn{white-space:nowrap;flex:1 1 auto;min-width:0; overflow:hidden;text-overflow:ellipsis; text-align:center} /* Полоса перекрывает низ страницы: подвал получает отступ, иначе последние строки в нём прочитать нельзя. Отступ считается от высоты полосы, а не набирается заново. */ .footer{padding-bottom:calc(var(--h-polosy) + 9px)} } /* ГАЛЕРЕЯ ОБЪЕКТА отсюда убрана 09.09.2026: оформление перенесено из MAKET-kartochka-obekta.html в critical.css. Здесь было 49 строк. ПОЧЕМУ ЭТО ВАЖНО БЫЛО УБРАТЬ, А НЕ ОСТАВИТЬ РЯДОМ. Отложенный файл грузится ПОСЛЕ критического, и его .g-main перебивал макетный: главный кадр выходил 771 точку вместо 1228. Правило было верным для прежней вёрстки и молча ломало новую. */ /* ДОПИСКИ ВОКРУГ МАКЕТА: лента кадров листается БЕЗ СКРИПТА. В макете главный кадр один, стрелки нарисованы для вида. У нас до двадцати четырёх кадров, они едут вбок и «прилипают» — на телефоне это работает пальцем сразу, при выключенных скриптах тоже. */ .g-lenta{display:flex;height:100%;overflow-x:auto;scroll-snap-type:x mandatory; scrollbar-width:none} .g-lenta::-webkit-scrollbar{display:none} .g-kadr{flex:0 0 100%;scroll-snap-align:center;display:block;height:100%} .g-kadr img{width:100%;height:100%;object-fit:cover;display:block} /* --- Увеличение --- */ .lupa{ position:fixed;inset:0;z-index:120;background:rgba(23,19,15,.94); display:flex;align-items:center;justify-content:center; } /* Прячет общее правило [hidden] в critical.css. Дублируем здесь на случай, если отложенные стили придут раньше критических. */ .lupa[hidden]{display:none} .lupa-snimok{max-width:92vw;max-height:86vh;object-fit:contain;border-radius:var(--r-s)} .lupa button{ position:absolute;background:rgba(255,255,255,.12);border:0;color:#fff; cursor:pointer;border-radius:50%;width:46px;height:46px;font-size:26px; line-height:1;display:flex;align-items:center;justify-content:center; } .lupa button:hover{background:var(--acc)} .lupa-zakryt{top:18px;right:18px;font-size:30px} .lupa-nazad{left:18px} .lupa-vperyod{right:18px} .lupa-schyot{ position:absolute;bottom:18px;left:0;right:0;text-align:center; color:#cbbfa8;font-size:14px;margin:0; } /* Пока смотрят снимок, страница под ним не должна ездить. */ body.bez-prokrutki{overflow:hidden} @media(max-width:900px){ .galereya{grid-template-columns:repeat(3,1fr);grid-auto-rows:120px} } @media(max-width:640px){ .galereya{grid-template-columns:repeat(2,1fr);grid-auto-rows:110px;gap:8px} .lupa button{width:40px;height:40px;font-size:22px} .lupa-nazad{left:8px} .lupa-vperyod{right:8px} } /* ИПОТЕЧНЫЙ КАЛЬКУЛЯТОР отсюда убран 09.09.2026: оформление перенесено из MAKET-kartochka-obekta.html в critical.css, имена calc, calc-field, calc-result, cr-val, cr-row. Здесь было 46 строк. */ /* --- Карта выдачи --------------------------------------------------------- */ .karta-shapka{display:flex;align-items:flex-end;justify-content:space-between; gap:20px;flex-wrap:wrap;margin:24px 0 14px} .karta-shapka h1{margin:0 0 4px} .karta-shapka p{margin:0} .karta-poyasnenie{margin:0 0 14px;font-size:14px} .karta-vydachi{height:min(72vh,720px);border-radius:var(--r); border:1px solid var(--line);overflow:hidden;margin-bottom:28px} /* Кружок с числом объектов в группе. Рисуется нашим кодом, без чужой библиотеки группировки. */ .karta-gruppa{background:none;border:none} .karta-gruppa span{display:flex;align-items:center;justify-content:center; width:38px;height:38px;border-radius:50%; background:var(--acc);color:#fff;font-size:14px; font-weight:600;border:3px solid rgba(255,255,255,.85); box-shadow:0 2px 8px rgba(0,0,0,.2);cursor:pointer} @media(max-width:640px){ .karta-vydachi{height:70vh} } /* ЗАГОЛОВОК ВЫДАЧИ, СОРТИРОВКА И ЛЕНТА ФОТОГРАФИЙ отсюда убраны 09.09.2026: оформление перенесено из макета в critical.css. Здесь было 56 строк своей вёрстки. Лента фотографий в карточке — единственное, что осталось дописками вокруг макета: в макете кадр один и точки нарисованы для вида, у нас до пяти кадров, и они листаются. Дописки лежат там же, в critical.css, рядом с перенесённым блоком выдачи. */ /* --- Текст, написанный владельцем --- */ /* Подзаголовки и списки внутри категорийных и юридических страниц. Разбор — в apps/pages/templatetags/tekst.py, три правила. */ .tekst h2{font-size:22px;margin:26px 0 12px} .tekst h2:first-child{margin-top:0} .tekst ul{margin:0 0 14px 22px} .tekst li{margin-bottom:7px} /* --- Блог --- */ .statyi{margin-top:24px} /* Знак на витрине под текстом страницы. Ширина ограничена, форма не трогается: у знака срезанный угол выглядит поломкой. */ .znak{margin:26px 0 0;max-width:400px} .znak img{width:100%;height:auto;display:block;border-radius:10px} .znak figcaption{margin-top:8px;font-size:13.5px} /* ============================================================ РАСКЛАДКА СТРАНИЦ, СВЕРЕННЫХ С МАКЕТАМИ 07-verstka ============================================================ Перенесено 12.09.2026 при сверке оформления. ПОЧЕМУ ОТДЕЛЬНЫМ КЛАССОМ, А НЕ ПРАВКОЙ .container. В макетах ДВА набора ширин, и они разведены по именам: .wrap 1280px главная, карточка объекта .container 1120px о нас, партнёрам, контакты, блог, статья У нас оба имени были склеены в одно правило с 1280px — отсюда и бралось, что колонка шире макета на 160 точек. Но `.container` стоит и в каталоге, и в карточке объекта, а их владелец из сверки исключил: «главную и карточку объекта не трогаем». Поэтому ширина макета вешается отдельным классом на те страницы, что сверяются. ЗАГОЛОВКИ ТОЖЕ ЗДЕСЬ, а не в общем правиле: в макете главной H1 задан иначе (clamp до 54px), в карточке объекта — 40px. Правь мы общее правило, поехали бы обе исключённые страницы. */ .stranitsa{max-width:1120px} /* Первый раздел «О нас» в две колонки — перенесено из макета o-nas.html байт в байт. Имена макетные: who, who-side, who-img. ФОТОГРАФИЯ ЛИПКАЯ: текст длинный, и без этого она уезжала бы вверх, оставляя пустую колонку рядом с последними абзацами. На узком экране липкость снимается — там колонки одна под другой, и липнуть не к чему. */ .who{display:grid;grid-template-columns:1.35fr .9fr;gap:44px;align-items:start} .who-side{position:sticky;top:100px} .who-img{border-radius:var(--r);overflow:hidden;border:5px solid #fff; box-shadow:0 20px 50px -25px rgba(80,50,20,.4)} .who-img img{width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;display:block} @media (max-width:900px){ .who{grid-template-columns:1fr;gap:24px} .who-side{position:static} } /* .hero h1 из макета: 56px у «О нас», 52px у «Партнёрам». Взято 56 — разницу в четыре точки между двумя страницами не переносим отдельными правилами, пока владелец не скажет. */ .stranitsa h1{font-size:56px;font-weight:700;letter-spacing:-.01em; line-height:1.06;margin-bottom:16px} /* .sec-t из макета — заголовок раздела. У нас размер ему не задавался вовсе: доставался от общего правила и зависел от места. */ .stranitsa h2{font-size:38px;font-weight:700;letter-spacing:-.01em; line-height:1.12;margin-bottom:10px} /* Отступ между разделами. В макете это `section{padding:60px 0}`, то есть между соседними разделами 120 точек. У нас носитель другой (div.section), и padding на нём попал бы ВНУТРЬ карточек — поэтому переносим расстояние, а не запись: margin-bottom:60px вместо 44. ЭТО НЕ ДОСЛОВНЫЙ ПЕРЕНОС, и я говорю об этом вслух: у макета расстояние вдвое больше. Сначала смотрим глазами на 60, потом решаем. */ .stranitsa .section{margin-bottom:60px} @media (max-width:900px){ .stranitsa h1{font-size:38px} .stranitsa h2{font-size:29px} } @media (max-width:560px){ .stranitsa h1{font-size:31px} } /* --- Блог: «Читайте также», ссылка в каталог, кнопка «ещё» -------- ПЕРЕНЕСЕНО ИЗ МАКЕТОВ blog-statya.html и blog-lista.html байт в байт (11.09.2026). Имена макетные: also, also-grid, also-card, also-cat, cta-banner. */ .also{margin-top:44px} .also h2{font-size:28px;margin-bottom:20px} .also-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:22px} .also-card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:22px 24px;transition:box-shadow .2s,transform .2s} .also-card:hover{box-shadow:0 10px 30px -12px rgba(80,50,20,.2);transform:translateY(-3px)} .also-cat{font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--acc);margin-bottom:8px} .also-card h3{font-size:17px;font-weight:700;line-height:1.3} .also-card h3 a{color:var(--ink)} .also-card h3 a:hover{color:var(--acc)} .cta-banner{display:flex;align-items:center;justify-content:space-between; gap:20px;flex-wrap:wrap;background:var(--sand);border:1px solid var(--line); border-radius:var(--r);padding:22px 26px} .cta-banner .t{font-weight:700;font-size:18px} .cta-banner .s{font-size:14px;color:var(--dim);margin-top:4px} /* Кнопка баннера — из макета. Стоит рядом с общей .btn: у неё свои размеры и скругление, и подменять их общими значило бы получить на странице кнопку не из макета. */ .cta-btn{display:inline-flex;align-items:center;gap:8px;background:var(--acc);color:#fff;font-weight:700;font-size:14px;padding:12px 24px;border-radius:12px;transition:background .2s} .vopros-blok{text-align:center} @media (max-width:760px){ .also-grid{grid-template-columns:1fr} } /* --- Рубрики блога ------------------------------------------------- ПЕРЕНЕСЕНО ИЗ МАКЕТА БАЙТ В БАЙТ (blog-lista.html, 11.09.2026). Правила чужие, носитель наш: в макете это кнопки со скриптом, у нас обычные ссылки — поисковик не умеет нажимать. Имена оформления макетные: cat-filter, cat-pill, active, art-cat. Переименуй мы их «по-своему» — следующая сверка с макетом искала бы несуществующее. */ .cat-filter{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;margin:36px 0 44px} .cat-pill{display:inline-flex;align-items:center;gap:6px;padding:10px 20px;border-radius:24px;font-size:14.5px;font-weight:600;border:1.5px solid var(--line);background:var(--card);color:var(--dim);cursor:pointer;transition:all .2s} .cat-pill:hover{border-color:var(--acc);color:var(--acc)} .cat-pill.active{background:var(--acc);color:#fff;border-color:var(--acc)} .art-cat{display:inline-block;font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--acc);margin-bottom:10px} .statya-kartochka{background:var(--card);border:1px solid var(--line); border-radius:var(--r);overflow:hidden;display:flex; flex-direction:column} .statya-kartochka > a{display:block;aspect-ratio:5/3;background:var(--sand); overflow:hidden;position:relative} .statya-kartochka img{width:100%;height:100%;object-fit:cover;transition:transform .35s} .statya-kartochka:hover img{transform:scale(1.04)} .statya-bez-foto{position:absolute;inset:0;display:flex;align-items:center; justify-content:center;color:var(--dim2);font-size:26px; font-family:'Lora',Georgia,serif} .statya-telo{padding:16px 18px 20px;display:flex;flex-direction:column;gap:8px} .statya-data{font-size:13px} .statya-imya{font-size:18px;line-height:1.35} .statya-imya a{color:var(--ink)} .statya-imya a:hover{color:var(--acc)} .statya-oblozhka{width:100%;border-radius:var(--r);margin-bottom:24px} .drugie-statyi{list-style:none;display:flex;flex-direction:column;gap:10px} .drugie-statyi a{display:block;background:var(--card);border:1px solid var(--line); border-radius:var(--r-s);padding:14px 18px;color:var(--ink); font-size:15.5px} .drugie-statyi a:hover{border-color:var(--acc);color:var(--acc)} /* --- Баннер cookie: три кнопки --- */ /* «Отклонить» одного размера и веса с «Принять» — требование владельца от 03.09.2026. Выделять согласие оформлением нельзя: за это и штрафуют. */ .cookie{ max-width:640px;flex-direction:column;align-items:stretch;gap:14px; } .cookie p{margin:0} .cookie-knopki{display:flex;gap:10px;flex-wrap:wrap} .cookie-knopki .btn{flex:1 1 auto;min-width:120px;padding:11px 18px;font-size:14px} .cookie-nastroyki h3{font-size:17px;margin-bottom:14px} .cookie-vybor{display:flex;gap:10px;align-items:flex-start;margin-bottom:14px; font-size:14px;color:var(--ink)} .cookie-vybor input{margin-top:3px;flex:0 0 auto} .cookie-vybor b{display:block;margin-bottom:2px} .cookie-vybor .muted{font-size:13px;line-height:1.45} .foot-pravo a{display:inline} .cookie-osnovnoe{display:flex;flex-direction:column;gap:14px} /* --- Подпись автора и команда --- */ .statya-podpis{display:flex;align-items:center;gap:16px;flex-wrap:wrap; margin-bottom:22px;font-size:14px} .avtor{display:flex;align-items:center;gap:10px} .avtor-foto{width:36px;height:36px;border-radius:50%;object-fit:cover} .avtor b{display:block;font-weight:600} .avtor .muted{font-size:13px} .statya-daty{font-size:13.5px} .komanda{margin-top:40px} .komanda h2{margin-bottom:20px} .agent{text-align:center} .agent-foto{width:100%;aspect-ratio:1/1;object-fit:cover; border-radius:var(--r);margin-bottom:12px} .agent-bez-foto{display:flex;align-items:center;justify-content:center; aspect-ratio:1/1;border-radius:var(--r);background:var(--sand); color:var(--dim2);font-size:34px;font-family:'Lora',Georgia,serif; margin-bottom:12px} .agent-imya{font-size:17px;margin-bottom:4px} /* ---- Плитки «Что вы получаете» на странице «Партнёрам» ------------- ПЕРЕНЕСЕНО ИЗ МАКЕТА `partneram_6.html`. Там эти правила лежали внутри самой страницы, а в общих стилях их не было ни одного: шаблон на этих классах отдал бы голую разметку — ровно ошибка 14 из STATUS.md, «сорок классов без единого стиля». Сторож VseKlassyOformlenyTest теперь их и требует. Цвета взяты переменными, не числами: терракота и песок задаются в одном месте, решением журнала. */ .feat-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px} .feat-card{background:var(--card);border:1px solid var(--line); border-radius:var(--r);padding:28px 30px;display:flex;gap:20px; align-items:flex-start; transition:border-color .2s,box-shadow .2s,transform .2s} .feat-card:hover{border-color:#dcc9ad; box-shadow:0 12px 30px -18px rgba(80,50,20,.4); transform:translateY(-2px)} .feat-card .ic{width:56px;height:56px;border-radius:16px;background:var(--sand); display:flex;align-items:center;justify-content:center; font-size:26px;flex-shrink:0} .feat-card h3{font-size:19px;font-weight:700;margin-bottom:7px} .feat-card p{font-size:14.5px;color:var(--dim);line-height:1.6} /* Последняя плитка при нечётном их числе занимает всю ширину. В макете так и было у седьмой — но там это стоял inline-стиль на конкретной плитке. Правилом это работает при ЛЮБОМ их числе: владелец заведёт пять или девять, и последняя не окажется половинкой. */ .feat-card:last-child:nth-child(odd){grid-column:1 / -1} @media (max-width:900px){ .feat-grid{grid-template-columns:1fr} } @media (max-width:560px){ .feat-card{flex-direction:column;gap:14px} } /* ---- План оплаты на карточке объекта ------------------------------- Перенесено из макета bondia-verstka.html, где эти правила лежали внутри самой страницы. Цвет подписи взят переменной, а не числом #514839 из макета: приглушённый текст задан в одном месте. */ /* .plan заменён на .pay из макета 09.09.2026, 5 строк. */ /* НИЗКИЙ ЭКРАН: то же правило, что в critical.css, для полос, которые живут здесь. На карточке объекта телефон набок отдаёт под содержимое 249 точек из 390: шапка 74 сверху, эта полоса 67 снизу. Обе липкие, обе остаются на месте при прокрутке. Замер 10.09.2026. Окно про cookie на низком экране закрывало почти всё: 265 точек из 390, три кнопки столбиком одна под другой. Здесь оно становится вполовину ниже, а кнопки встают в строку. */ @media (max-height:500px){ /* НИЖНЕЙ ПОЛОСЫ НА НИЗКОМ ЭКРАНЕ НЕТ ВОВСЕ. Решение владельца от 10.09.2026: «телефон поворачивают, чтобы смотреть фотографии, а полоса съедает четверть экрана ради того, что есть выше на странице». Цена и кнопка никуда не деваются — они стоят в боковой карточке объекта, полоса лишь повторяла их. Признак — малая высота экрана, а не поворот телефона: на низком окне ноутбука полоса мешала бы ровно так же. */ .nizhnyaya-polosa{display:none} /* Отступ под полосу больше не нужен: возвращаем обычный. Число живёт в critical.css и здесь не повторяется. */ .footer{padding-bottom:var(--otstup-podvala)} /* ЗАСЛОНКА. Так владелец назвал это окно 10.09.2026, увидев замер: на телефоне набок оно занимало 265 точек из 390 — 68% экрана, три кнопки столбиком одна под другой. Согласие спрашивать надо, закрывать им весь экран — нет. Что уменьшено. Отступы и размер текста — раз. Кнопки в строку вместо столбика — два. И третье, менее очевидное: на низком экране снят предел ширины. Окно во всю ширину экрана — 809 точек вместо 640 — укладывает тот же текст в меньшее число строк, а строка здесь стоит 18 точек высоты. Прокрутка внутри — на самый крайний случай: если текст согласия когда-нибудь вырастет, кнопки не уедут за край экрана. */ .cookie{padding:10px 14px;gap:9px;font-size:13px;line-height:1.4; bottom:10px;left:10px;right:10px;max-width:none; max-height:calc(100vh - 20px);overflow:auto} .cookie-osnovnoe{gap:9px} .cookie-knopki{flex-wrap:nowrap} .cookie-knopki .btn{min-width:0;padding:8px 10px;font-size:13px} }