/* ==========================================================================
Иллидиум — главная страница
Токены и размеры взяты из Figma (файл NRffA4e977SQx78DwtAmWO, узел 54:773)
========================================================================== */
/* --- Шрифт --------------------------------------------------------------- */
@font-face {
font-family: 'Wix Madefor Text';
font-style: normal; font-weight: 400; font-display: swap;
src: url('../fonts/wm-400-cyr.woff2') format('woff2');
unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
font-family: 'Wix Madefor Text';
font-style: normal; font-weight: 400; font-display: swap;
src: url('../fonts/wm-400-lat.woff2') format('woff2');
}
@font-face {
font-family: 'Wix Madefor Text';
font-style: normal; font-weight: 500; font-display: swap;
src: url('../fonts/wm-500-cyr.woff2') format('woff2');
unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
font-family: 'Wix Madefor Text';
font-style: normal; font-weight: 500; font-display: swap;
src: url('../fonts/wm-500-lat.woff2') format('woff2');
}
@font-face {
font-family: 'Wix Madefor Text';
font-style: normal; font-weight: 600; font-display: swap;
src: url('../fonts/wm-600-cyr.woff2') format('woff2');
unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
font-family: 'Wix Madefor Text';
font-style: normal; font-weight: 600; font-display: swap;
src: url('../fonts/wm-600-lat.woff2') format('woff2');
}
/* --- Токены -------------------------------------------------------------- */
:root {
--black-900: #2e383f;
--black-700: rgba(46, 56, 63, .7);
--black-500: rgba(46, 56, 63, .5);
--white-900: #ffffff;
--white-800: rgba(255, 255, 255, .8);
--white-500: rgba(255, 255, 255, .5);
--white-200: rgba(255, 255, 255, .2);
--blue-900: #007ca4;
/* Наведение у синих кнопок — второй ряд UI-кита «Кнопки». */
--blue-hover: #005f83;
--blue-100: rgba(0, 124, 164, .1);
--blue-80: rgba(0, 124, 164, .08);
--gray-900: #6d7479;
--gray-700: #999ea2;
--gray-500: #b6babc;
--bg: #f2f4f6;
--border: #dde1e8;
--bg-btn-hover: #eaebee;
/* Служебные цвета из UI-кита: ошибка, успех, звезда рейтинга. */
--error: #dd0000;
--success: #2fb95f;
--star: #fdc92b;
--tg: #009cea; --tg-light: rgba(0, 156, 234, .1);
--vk: #0077ff; --vk-light: rgba(0, 119, 255, .1);
--r-none: 0; --r-tertiary: 6px; --r-secondary: 10px;
--r-primary: 16px; --r-section: 30px; --r-full: 48px;
--sp-2: 4px; --sp-3: 8px; --sp-4: 12px; --sp-5: 16px; --sp-6: 20px; --sp-11: 40px;
/* Масштаб сайта на широких мониторах — см. блок в конце файла.
--vw/--vh: доля окна, уже поделённая на масштаб. Все размеры «от окна»
считать через них, иначе под zoom блок вылезет за край на величину масштаба. */
--z: 1;
/* Тот же масштаб отдельной переменной: на страницах со снятым zoom (Коммерция)
ею масштабируются сквозные элементы, чтобы шапка не выглядела на 2К и 4К
мельче, чем на остальном сайте. */
--zh: 1;
--vw: calc(1vw / var(--z));
--vh: calc(1vh / var(--z));
/* Первый экран страницы ЖК: три числа, которые решают, влезет ли он в окно.
Вынесены в переменные, чтобы крутить их вживую на стенде
tools/preview/stand.html и не пересобирать зеркало на каждый шаг. */
--hero-gap: 22px; /* полоска следующего блока, которая должна выглядывать снизу */
--hero-minh: 760px; /* нижний порог высоты: он перебивает min() и на коротком окне решает всё */
--hero-pb: 150px; /* нижний отступ первого экрана: от ряда якорей до кромки */
--crumbs-gap: 100px; /* от крошек до заголовка */
/* Шапка: высота островка и его начинка. Вынесены в переменные, чтобы крутить
вживую на стенде tools/preview/stand.html — «уже по высоте» решается замером,
а не подбором в файле. Дефолты равны макету 26.08: островок 56, воздух 20. */
--hdr-top: 15px; /* воздух над белым островком */
--hdr-h: 44px; /* высота островка */
--hdr-btn: 34px; /* соцкнопки и бургер: они и задают внутренние поля 8 */
--hdr-logo: 140px; /* ширина логотипа, высота считается пропорцией 164:30 */
--hdr-nav: 13px; /* кегль пунктов меню */
/* Стекло шапки берётся от плавающей панели (решение Влада 04.09.2026): оба острова
висят над одним и тем же контентом и должны быть одной физики. Разводятся
переопределением этих двух строк, а не правкой стеклянного блока ниже. */
--hdr-alpha: var(--anch-alpha);
--hdr-blur: var(--anch-blur);
/* Правая группа (телефон, часы, соцкнопки) равняется по логотипу слева
(решение Влада 04.09.2026): раньше она была заметно тяжелее его. Опорная
величина — высота логотипа, поэтому связь держится сама при смене --hdr-logo. */
--hdr-social: calc(var(--hdr-logo) * 30 / 164); /* кружок соцкнопки = высота логотипа */
--hdr-phone: 13px; /* кегль номера */
--hdr-hours: 11px; /* кегль строки «Ежедневно с…» */
/* Поля внутри островка. Островок шириной с контент,
но логотип отбит от его кромки на 16, а соцкнопка справа — на 8: если нужно
выровнять их ровно по колонке блоков, эти два числа уводятся в 0. */
--hdr-pad-l: 16px;
--hdr-pad-r: 8px;
/* Плавающая панель якорей ЖК: всплывает снизу экрана после второго блока. */
--anch-bottom: 15px; /* от низа окна до панели */
--anch-pad: 8px; /* поля белого островка вокруг пилюль */
--anch-gap: 8px; /* шаг между пилюлями */
--anch-pill-h: 31px; /* высота пилюли */
--anch-font: var(--hdr-nav); /* кегль пилюли — тот же, что у пунктов меню шапки */
--anch-after: 100%; /* порог появления: доля окна, на которую нужно уехать за блок */
--anch-lead: 133px; /* от кромки первого экрана до блока «О проекте» вместо ряда якорей */
/* Стиль плавающей панели: плотность стекла и выделение пилюль. Тоже переменные —
«прозрачнее / без подложек» решается замером на стенде, а не подбором в файле. */
--anch-alpha: .5; /* плотность белого стекла: 0 — насквозь, 1 — глухой белый */
--anch-blur: 8px; /* размытие того, что заезжает под панель */
/* Подложек у пилюль нет (04.09.2026): по стеклу серая плашка читается грязью,
а сам остров и так отделяет ряд от контента. */
--anch-pill-bg: transparent; /* подложка обычной пилюли */
--anch-pill-hover: rgba(255, 255, 255, .55); /* она же под курсором, как у пунктов меню */
--anch-pill-fg: var(--black-900); /* текст пилюли — тот же, что у пунктов меню */
--anch-active-bg: #919693; /* выделение активного пункта (цвет Влада 04.09.2026) */
--anch-active-fg: #fff; /* текст активного пункта */
/* UI-кит: контейнер Desktop (1440) — 1320, Mobile (360) — 336. */
--container: 1320px;
--gutter: 60px;
--container-m: 336px;
--gutter-m: 12px;
}
/* svh = высота окна ПРИ ПОКАЗАННЫХ панелях браузера. В Safari на iPad 1vh
считается без панели, и обложки «100vh − 22» уходили ниже видимого края:
метки УТП под первым экраном Коммерции не были видны (Влад, 14.09.2026).
На десктопе svh = vh, ничего не меняется. Кастомное свойство принимает любой
токен, поэтому без @supports старый браузер получил бы битое значение. */
@supports (height: 1svh) {
:root { --vh: calc(1svh / var(--z)); }
}
/* --- База ---------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
/* clip, а не hidden: не создаёт скролл-контейнер и не ломает position: sticky.
Страховка под ленты во всю ширину: 100vw считается ВМЕСТЕ с полосой прокрутки,
поэтому на обычном Chrome под Windows такой блок переливает вправо на ширину
полосы, и страница снова ездит вбок. Вертикальная прокрутка не затронута. */
html { -webkit-text-size-adjust: 100%; overflow-x: clip; }
body { overflow-x: clip; }
body {
margin: 0;
/* В макете основной фон страницы белый, серым (--bg) залиты отдельные зоны —
например первый экран главной. Раньше серым был весь body, и над контентом
внутренних страниц оставалась серая полоса высотой с шапку. */
background: #fff;
color: var(--black-900);
font-family: 'Wix Madefor Text', -apple-system, 'Segoe UI', Arial, sans-serif;
font-size: 16px;
line-height: 1.4;
letter-spacing: -.5px;
-webkit-font-smoothing: antialiased;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
p { margin: 0; }
button { font: inherit; color: inherit; border: 0; background: none; cursor: pointer; }
ul { margin: 0; padding: 0; list-style: none; }
.container { width: 100%; max-width: calc(var(--container) + var(--gutter) * 2); margin: 0 auto; padding: 0 var(--gutter); }
/* --- Типографика --------------------------------------------------------- */
/* Шкала задана гайдом макета 2026-08: кегль / интерлиньяж / трекинг. */
.h1 { font-size: 48px; font-weight: 600; line-height: 1.12; letter-spacing: -1.5px; margin: 0; }
.h2 { font-size: 40px; font-weight: 600; line-height: 1.12; letter-spacing: -1.5px; margin: 0; }
/* Крупные заголовки секций из макетов 26.08: «Участники программы лояльности»,
«Часто задаваемые вопросы клиентов» — 44, а не 40. */
.h2--lg { font-size: 44px; }
.h3 { font-size: 36px; font-weight: 600; line-height: 1.3; letter-spacing: -1.5px; margin: 0; }
.h4 { font-size: 28px; font-weight: 600; line-height: 1.25; letter-spacing: -1px; margin: 0; }
.h5 { font-size: 24px; font-weight: 600; line-height: 1.25; letter-spacing: -1px; margin: 0; }
.h6 { font-size: 20px; font-weight: 600; line-height: 1.3; letter-spacing: -.7px; margin: 0; }
.t-18 { font-size: 18px; line-height: 1.45; letter-spacing: -.5px; }
.accent { color: var(--blue-900); }
.t-14 { font-size: 14px; line-height: 1.4; letter-spacing: -.4px; }
.t-13 { font-size: 13px; line-height: 1.35; letter-spacing: -.35px; }
.t-12 { font-size: 12px; line-height: 1.3; letter-spacing: -.3px; }
.muted { color: var(--gray-900); }
/* --- Кнопки -------------------------------------------------------------- */
.btn {
display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-3);
border-radius: var(--r-secondary); font-weight: 600; line-height: 1.25;
transition: background-color .15s ease, color .15s ease;
}
.btn--primary { background: var(--blue-900); color: #fff; padding: 15px 24px; font-size: 16px; letter-spacing: -.5px; }
.btn--primary:hover { background: var(--blue-hover); }
.btn--sm { padding: 11px 20px; font-size: 14px; letter-spacing: -.3px; }
/* Макет: «Все планировки» 161×40 при тексте 106 и стрелке 5 — поле 19, зазор до стрелки 12. */
.btn--ghost { background: var(--blue-100); color: var(--blue-900); padding: 11px 19px; font-size: 14px; letter-spacing: -.3px; gap: var(--sp-4); }
.btn--ghost:hover { background: rgba(0, 124, 164, .16); }
.icon-btn {
display: inline-flex; align-items: center; justify-content: center;
background: #fff; border-radius: var(--r-full); padding: 10px;
box-shadow: 0 2px 8px rgba(46, 56, 63, .08);
transition: transform .15s ease, background-color .15s ease;
}
.icon-btn:hover { background: var(--bg-btn-hover); }
.icon-btn--lg { padding: 12px; }
/* Круг 40/48 px, внутри — шеврон в натуральную величину (SVG 9.83×4.83 и 11.5×5.5),
как в макете: бокс иконки 20/24 px, сам вектор заметно меньше. */
.icon-btn { width: 40px; height: 40px; }
.icon-btn--lg { width: 48px; height: 48px; }
.icon-btn img { width: 9.83px; height: 4.83px; }
.icon-btn--lg img { width: 11.5px; height: 5.5px; }
/* Экспортированные из Figma стрелки смотрят вниз — направление задаётся поворотом,
как в макете (обёртки rotate-90 / -rotate-90). */
.btn--ghost img, .buy__arrow img,
.slider__nav--next img, .promo-white__arrow img,
.page-hero__nav .icon-btn:last-child img,
.soc-head__nav .icon-btn:last-child img { transform: rotate(-90deg); }
.slider__nav--prev img,
.page-hero__nav .icon-btn:first-child img,
.soc-head__nav .icon-btn:first-child img { transform: rotate(90deg); }
.btn--ghost img { width: 9px; height: 4.5px; }
.social {
display: flex; align-items: center; justify-content: center;
border-radius: var(--r-secondary); transition: background-color .15s ease;
}
.social--tg { background: var(--tg-light); }
.social--vk { background: var(--vk-light); }
/* Макс: в макетах (24, 30-38) тот же квадрат 44 со скруглением 10 и подложкой 10 %
от #2d71fb, что и у телеграма; значок 18x19 вектором из фрейма (assets/icons/max.svg).
Раньше стоял круглый растр ic-msg-round.webp — единственный круг в ряду квадратов. */
.social--max { background: rgba(45, 113, 251, .1); }
.social--max img { width: 18px; height: 19px; }
/* Своя картинка клиента (Настройки сайта → Мессенджеры): серая подложка, значок 18. */
.social--custom { background: var(--bg); }
.social--custom img { width: 18px; height: 18px; object-fit: contain; }
.footer__socials .social--custom img { width: 18px; }
.faq__ask-row .social.social--max img { width: 18px; height: 19px; } /* перебивает .faq__ask-row .social img { width: 14px } ниже */
.office__messengers .social { width: 44px; height: 44px; }
.office__messengers .social--tg img { width: 16px; height: 14px; }
.social--solid.social--tg { background: var(--tg); }
.social--solid.social--vk { background: var(--vk); }
/* --- Бейджи -------------------------------------------------------------- */
.badge {
display: inline-flex; align-items: center; justify-content: center;
padding: 5px 10px; border-radius: var(--r-tertiary);
font-size: 13px; font-weight: 500; line-height: 1.35; letter-spacing: -.4px; white-space: nowrap;
}
.badge--blue { background: var(--blue-900); color: #fff; }
.badge--glass { background: var(--black-500); color: #fff; backdrop-filter: blur(10px); }
.badge--white { background: #fff; color: var(--black-900); }
.badge--light { background: #fff; color: var(--gray-900); backdrop-filter: blur(10px); }
/* ==========================================================================
Шапка
========================================================================== */
/* Шапка не участвует в прокрутке вообще: всегда на одном месте экрана.
Высота 96 px (20 отступ + 76 островок) компенсируется отступом страницы. */
.header { position: fixed; top: 0; left: 0; right: 0; z-index: 50; padding-top: var(--hdr-top); }
/* Админ-бар WP тоже fixed и накрывает верх шапки — сдвигаем её на его высоту. */
body.admin-bar .header { top: calc(32px / var(--z)); }
@media screen and (max-width: 782px) { body.admin-bar .header { top: 46px; } }
/* Компенсация высоты шапки: 96 px минус тот отступ, который отдаёт сама секция.
Значение подобрано замером — крошки должны встать на 124 px, как в макете. */
body { padding-top: calc(var(--hdr-top) + var(--hdr-h) + 8px); }
/* Страницы с фото на первом экране: там шапка по макету лежит поверх фото. */
body.has-photo-hero { padding-top: 0; }
.header__inner {
display: flex; align-items: center; justify-content: space-between;
background: #fff; border-radius: var(--r-primary);
/* Высота островка задана явно, поля справа считаются от неё и кнопки: при
любой высоте кнопка остаётся по центру, а слева логотип отбит на 16. */
height: var(--hdr-h);
padding: 0 var(--hdr-pad-r) 0 var(--hdr-pad-l);
/* Макет: белый островок 1320x56 в рамке 1 px #dde1e8. Рамку даём тенью с нулевым
размытием — так она ложится снаружи и не меняет высоту островка.
Поля разные: логотип отбит на 16 (в макете x=76), соцкнопка справа — на 8 (правый край 1372). */
box-shadow: 0 0 0 1px var(--border);
}
.header__logo { width: var(--hdr-logo); height: calc(var(--hdr-logo) * 30 / 164); }
.header__logo img { width: 100%; height: 100%; object-fit: contain; object-position: left center; }
.nav { display: flex; align-items: center; }
.nav__item {
display: flex; align-items: center; gap: 2px;
/* Высота пункта равна кнопке: при низкой шапке подложка ховера не вылезает. */
height: var(--hdr-btn); padding: 0 12px; border-radius: 8px;
font-size: var(--hdr-nav); font-weight: 500; line-height: 1.4; letter-spacing: -.4px; white-space: nowrap;
transition: background-color .15s ease;
}
.nav__item:hover { background: var(--bg); }
.nav__item img { width: 16px; height: 16px; }
.header__contacts { display: flex; align-items: center; gap: var(--sp-5); }
.header__phone { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; text-align: center; white-space: nowrap; }
.header__phone b { font-size: var(--hdr-phone); font-weight: 600; line-height: 1.25; letter-spacing: -.5px; }
.header__phone span { font-size: var(--hdr-hours); line-height: 1.25; letter-spacing: -.4px; color: var(--gray-900); }
.header__social { display: flex; align-items: center; gap: var(--sp-3); }
.header__social .social { width: var(--hdr-social); height: var(--hdr-social); }
.header__social .social img { width: auto; height: calc(var(--hdr-social) * .46); }
/* --- Выпадающие панели меню ---------------------------------------------- */
.nav__group { position: relative; }
.nav__chevron { transition: transform .18s ease; }
.drop {
position: absolute; top: calc(100% + 8px); left: 0; z-index: 60;
background: #fff; border-radius: var(--r-primary);
box-shadow: 0 8px 28px rgba(46, 56, 63, .1);
opacity: 0; visibility: hidden; transform: translateY(-6px);
transition: opacity .18s ease, transform .18s ease, visibility .18s;
}
/* Зазор между пунктом и панелью перекрываем, иначе курсор «проваливается» и меню моргает. */
.drop::before { content: ''; position: absolute; left: 0; right: 0; top: -8px; height: 8px; }
.nav__group:hover .drop,
.nav__group:focus-within .drop { opacity: 1; visibility: visible; transform: none; }
.nav__group:hover > .nav__item,
.nav__group:focus-within > .nav__item { background: var(--bg); }
.nav__group:hover .nav__chevron,
.nav__group:focus-within .nav__chevron { transform: rotate(180deg); }
/* Широкая панель в макете выровнена по левому краю шапки, а не по своему пункту меню. */
.header__inner { position: relative; }
.nav__group--mega { position: static; }
.drop--mega { width: 615px; left: 0; padding: 20px 20px 0; }
.drop__grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-4) var(--sp-5); }
.drop-card { display: flex; align-items: center; gap: var(--sp-4); padding: 6px; margin: -6px; border-radius: var(--r-secondary); transition: background-color .15s ease; }
.drop-card:hover { background: var(--bg); }
.drop-card__img { width: 60px; height: 56px; object-fit: cover; border-radius: var(--r-secondary); flex: none; }
.drop-card__img--empty { background: var(--bg); display: block; }
.drop-card__body { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.drop-card__title { font-size: 15px; font-weight: 600; line-height: 1.3; letter-spacing: -.5px; }
.drop-card__meta { display: flex; align-items: center; gap: 6px; font-size: 13px; line-height: 1.35; letter-spacing: -.4px; color: var(--gray-900); }
.drop-card__price { color: var(--blue-900); font-weight: 500; }
.drop-card__dot { color: var(--gray-500); }
.drop__foot {
display: flex; align-items: center; justify-content: space-between; gap: var(--sp-5);
margin: var(--sp-6) -20px 0; padding: var(--sp-5) 20px;
border-top: 1px solid var(--border);
}
.drop__foot-text { font-size: 14px; line-height: 1.4; letter-spacing: -.4px; color: var(--gray-900); }
.drop--list { min-width: 185px; padding: var(--sp-3); display: flex; flex-direction: column; }
.drop__link {
padding: 10px 12px; border-radius: 8px; white-space: nowrap;
font-size: 14px; font-weight: 500; line-height: 1.4; letter-spacing: -.4px;
transition: background-color .15s ease;
}
.drop__link:hover { background: var(--bg); }
/* ==========================================================================
Hero
========================================================================== */
/* Серая зона первого экрана: в макете 11 она идёт от самого верха страницы (y 0..806),
то есть заходит под шапку. Отрицательный отступ съедает компенсацию высоты шапки. */
.hero { background: var(--bg); margin-top: -84px; padding: 116px 0 90px; }
.hero__grid { display: grid; grid-template-columns: 873fr 427fr; gap: var(--sp-6); align-items: stretch; }
.hero__aside { display: flex; flex-direction: column; gap: var(--sp-6); }
/* Первый экран держит ПРОПОРЦИЮ МАКЕТА 873:600 (решение Влада 08.09.2026).
07.09 высота считалась от окна, чтобы первый экран влезал целиком. Пока масштаб
рос вместе с шириной, кадр сохранял форму; после потолка масштаба ширина осталась
макетной, а высота продолжала тянуться на всё окно — на 2К кадр становился
портретом 873×1224 (0.71:1 вместо 1.46:1) и фото резало по бокам.
Теперь высота идёт от ширины, а окно только ограничивает сверху: на низких окнах
max-height не даст кадру вылезти за экран.
111 = 99 (верх кадра под шапкой, замер) + 12 воздуха. Потолок намеренно почти впритык:
при aspect-ratio ограничение по высоте сжимает кадр И ПО ШИРИНЕ, и со старым 176
первый блок на FullHD получался УЖЕ, чем на 2К, хотя должен быть тем же самым.
Правая колонка тянется за слайдером через align-items: stretch у .hero__grid,
карточки внутри делят высоту пропорцией 380:200. */
.slider { position: relative; height: auto; aspect-ratio: 873 / 600; max-height: calc(100 * var(--vh) - 111px); border-radius: var(--r-primary); overflow: hidden; background: #fff; }
.hero__aside { height: auto; }
body.admin-bar .slider { max-height: calc(100 * var(--vh) - 111px - 32px / var(--z)); }
.slider__track { display: flex; height: 100%; transition: transform .45s cubic-bezier(.4, 0, .2, 1); }
.slider__slide { flex: 0 0 100%; height: 100%; }
.slider__slide img { width: 100%; height: 100%; object-fit: cover; }
/* Текст акции поверх фото баннера (акции клиента 17.09.2026 приходят чистыми фото,
текст на них не нарисован). Заголовок сверху, а не внизу как в макете (Влад 18.09.2026):
внизу он спорил с точками-индикаторами, а на фото людей лица чаще в нижней половине. */
.slider__slide { position: relative; }
.slider__slide > a { display: block; height: 100%; }
.slider__caption {
position: absolute; z-index: 1; left: 32px; right: 88px; top: 36px; margin: 0;
color: #fff; font-size: 32px; font-weight: 600; line-height: 1.2; letter-spacing: -.5px;
text-shadow: 0 1px 2px rgba(0, 0, 0, .25);
}
.slider__slide:has(.slider__caption)::before {
content: ''; position: absolute; left: 0; right: 0; top: 0; height: 45%; pointer-events: none;
background: linear-gradient(180deg, rgba(46, 56, 63, .75) 0%, rgba(46, 56, 63, 0) 100%);
}
@media (max-width: 700px) { .slider__caption { left: 16px; right: 56px; top: 20px; font-size: 20px; } }
.slider__nav { position: absolute; top: 50%; transform: translateY(-50%); z-index: 2; }
/* Полоски-индикаторы внизу кадра — тот же приём, что у карточек ЖК. */
.slider__dots { position: absolute; left: 50%; bottom: 16px; transform: translateX(-50%); z-index: 2; display: flex; align-items: center; gap: 4px; }
.slider__dots span { width: 20px; height: 2px; border-radius: var(--r-full); background: rgba(255, 255, 255, .35); backdrop-filter: blur(10px); cursor: pointer; }
.slider__dots span.is-active { background: #fff; }
/* Точки под лентой (макеты 15, 17, 26): показываются только на мобильной, где
карточки листаются пальцем. Правило лежит ДО мобильного слоя намеренно: в конце
файла оно той же силы и погасило бы display:flex внутри @media. */
.strip-dots { display: none; justify-content: center; align-items: center; gap: 4px; margin-top: 16px; }
.strip-dots span { width: 20px; height: 2px; border-radius: var(--r-full); background: var(--border); transition: background-color .2s; }
.strip-dots span.is-active { background: var(--blue-900); }
.slider__nav--prev { left: 20px; }
.slider__nav--next { right: 20px; }
/* Пропорция макета 380:200 вместо фиксированных высот: на высоком окне колонка
растёт вместе со слайдером, а не оставляет снизу дыру. */
.promo {
position: relative; flex: 380 0 0; border-radius: var(--r-primary);
overflow: hidden; background: #6aaad6; color: #fff;
}
/* max-width: none обязателен: глобальное `img { max-width: 100% }` резало эти 516 до ширины
карточки (427), картинка переставала доставать до правого края и там торчала полоса фона. */
.promo__img { position: absolute; inset: -18px -35px auto; width: calc(100% + 70px); max-width: none; height: calc(100% + 36px); object-fit: cover; }
/* Затемнение сверху под заголовок: фото акций клиента светлые (небо, облака), белый текст
на них не читался. В макете картинка была тёмной сама по себе. */
.promo::before {
content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
background: linear-gradient(180deg, rgba(46, 56, 63, .55) 0%, rgba(46, 56, 63, 0) 45%);
}
.promo__title { position: absolute; z-index: 2; left: 24px; top: 6.3%; width: 205px; font-size: 24px; font-weight: 600; line-height: 1.2; letter-spacing: -1px; text-shadow: 0 1px 2px rgba(0, 0, 0, .25); }
.promo__tags { position: absolute; z-index: 2; left: 24px; bottom: 6.3%; display: flex; gap: 6px; }
.promo-white {
position: relative; flex: 200 0 0; background: #fff;
border-radius: var(--r-primary); overflow: hidden;
}
/* Ширина 180: «Повышение цен» (175) встаёт в строку, заголовок в две строки, а не в три (клиент 28.09.2026). */
.promo-white__title { position: absolute; z-index: 1; left: 24px; top: 12%; width: 180px; font-size: 24px; font-weight: 600; line-height: 1.2; letter-spacing: -1px; }
.promo-white__text { position: absolute; z-index: 1; left: 24px; top: 58%; width: 159px; font-size: 14px; line-height: 1.4; letter-spacing: -.4px; color: var(--gray-900); }
.promo-white__img { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); width: 47.3%; height: auto; object-fit: contain; }
.promo-white__arrow { position: absolute; right: 24px; bottom: 24px; background: var(--bg); box-shadow: none; }
/* ==========================================================================
Белое полотно контента
========================================================================== */
.content {
position: relative; z-index: 1;
background: #fff;
border-radius: var(--r-section) var(--r-section) 0 0;
margin-top: -30px;
padding: 60px 0 70px;
}
.section + .section { margin-top: 100px; }
/* Переход по якорю (остров разделов ЖК, ссылки #akcii из меню): без отступа браузер ставит
раздел в самый верх окна, и заголовок прячется под плавающей шапкой (Влад 16.09.2026:
«перекидывает криво»). Отступ = шапка целиком + воздух 24. */
/* Переход по якорю (#sposoby и т. п.) ставит блок под шапку, а не за неё. С 28.09.2026 якорь
есть у каждого блока из списка «Показ блоков» (ill_section_anchor), в том числе у баннеров
консультации (section.consult) и у метки .ill-anchor там, где своей обёртки нет. */
section.section[id], section.consult[id], .ill-anchor { scroll-margin-top: calc(var(--hdr-top) + var(--hdr-h) + 24px); }
body.admin-bar section.section[id], body.admin-bar section.consult[id], body.admin-bar .ill-anchor { scroll-margin-top: calc(var(--hdr-top) + var(--hdr-h) + 24px + 32px / var(--z)); }
.ill-anchor { display: block; height: 0; }
/* От якорных таблеток до первого заголовка в макете 98. */
.section__head { display: flex; align-items: center; justify-content: space-between; gap: 30px; margin-bottom: var(--sp-11); }
.section__title { margin-bottom: var(--sp-11); }
/* ==========================================================================
Новостройки
========================================================================== */
.jk-grid { display: flex; flex-wrap: wrap; gap: 32px 20px; }
.jk { display: flex; flex-direction: column; gap: var(--sp-4); }
.jk--wide { width: 100%; }
.jk--half { width: calc((100% - 20px) / 2); }
.jk__media { position: relative; z-index: 2; height: 420px; border-radius: var(--r-primary); overflow: hidden; background: #fff; }
/* Широкая карточка должна помещаться в экран целиком. Макетные 600, но не больше, чем
остаётся от окна под фиксированной шапкой (76) и обвязкой самой карточки (96 — серая
плашка адреса, зазор и строка с названием и ценой), заголовком секции с его отступом
(85) и 16 воздуха: итого −273. Заголовок в запасе обязателен: требование Влада — видеть
разом и строку «Новостройки в Твери», и нижнюю границу карточки.
Считаем от --vh, а не от макета: сколько влезает до прокрутки, зависит от окна, в PDF
такого числа нет. На просторных окнах min() отдаёт макетные 600 и ничего не меняет —
правка срабатывает только там, где карточка реально не влезала — на невысоком окне
вроде 1920×950 (FullHD-монитор Влада). */
.jk--wide .jk__media { height: min(600px, calc(100 * var(--vh) - 273px)); min-height: 360px; }
body.admin-bar .jk--wide .jk__media { height: min(600px, calc(100 * var(--vh) - 273px - 32px / var(--z))); }
.jk__media img { width: 100%; height: 100%; object-fit: cover; }
.jk__badges { position: absolute; left: 12px; right: 12px; top: 12px; display: flex; align-items: center; justify-content: space-between; }
.jk__badges-left { display: flex; align-items: center; gap: 8px; }
.jk__dots { position: absolute; left: 50%; bottom: 10px; transform: translateX(-50%); display: flex; align-items: center; gap: 4px; }
.jk__dots span { width: 20px; height: 2px; border-radius: var(--r-full); background: rgba(255, 255, 255, .2); backdrop-filter: blur(10px); }
.jk__dots span.is-active { background: #fff; }
.jk__meta {
position: relative; z-index: 1; margin-bottom: -32px;
display: flex; align-items: center; gap: 18px;
background: var(--bg); border-radius: var(--r-primary) var(--r-primary) 0 0;
padding: 17px 22px 37px;
}
.jk__meta-item { display: flex; align-items: center; gap: 8px; white-space: nowrap; }
.jk__meta-item img { width: 18px; height: 18px; }
.jk__foot { display: flex; align-items: baseline; justify-content: space-between; }
.jk__price { font-size: 18px; font-weight: 500; line-height: 1.35; letter-spacing: -.5px; text-align: right; }
/* ==========================================================================
Блок с менеджером и формой
========================================================================== */
/* Макет 2026-08: плашка 762×294, форма 538×294, соцсетей в блоке больше нет. */
.lead { display: grid; grid-template-columns: 762fr 538fr; gap: var(--sp-6); align-items: stretch; }
.lead__promo {
position: relative; border-radius: var(--r-primary);
background: linear-gradient(132.57deg, #e6f2f6 35.16%, #cce5ed 100%);
padding: 30px; min-height: 294px;
}
/* Перенос «Подберём квартиру / для вас» задаём шириной, а не
: жёсткий
перенос на мобильной ширине ломал строки. */
.lead__title { margin: 0 0 10px; max-width: 330px; font-size: 32px; font-weight: 600; line-height: 1.25; letter-spacing: -1px; }
.lead__text { font-size: 16px; line-height: 1.375; letter-spacing: -.38px; color: var(--gray-900); }
/* Фото менеджера в макете 329×440 (исходник 1500×2000) и выступает над плашкой на 77 px.
Держим за НИЖНИЙ край, а не за верхний (07.10.2026): карточка формы бывает чуть выше
294, сетка растягивает плашку, и при top: -77px внизу оставалась щель в пару пикселей. */
.lead__img { position: absolute; right: 16px; bottom: 0; width: 329px; height: 371px; object-fit: cover; object-position: top; }
/* --- «Остались вопросы?»: полоса 1320×218 с 3D-домом и формой в строку ---- */
.askbar {
position: relative; display: grid; grid-template-columns: 1fr 492px; align-items: center;
min-height: 218px; padding: 30px; border-radius: var(--r-primary);
background: linear-gradient(90deg, #f1f3f5 0%, #dde1e8 100%);
}
/* Текст держим левее дома и поверх него: заголовок задаётся полем страницы,
и длинная фраза иначе уезжает под картинку. */
.askbar__text { position: relative; z-index: 1; max-width: 430px; }
.askbar__title { font-size: 32px; font-weight: 600; line-height: 1.25; letter-spacing: -1px; margin: 0 0 10px; }
.askbar__lead { font-size: 18px; line-height: 1.44; letter-spacing: -.38px; color: var(--gray-900); }
/* Дом выступает над полосой на 48 px, как в макете (x 378..911 при блоке 60..1380). */
.askbar__img { position: absolute; left: 318px; top: -48px; width: 533px; height: calc(100% + 48px); object-fit: cover; object-position: top; pointer-events: none; } /* низ здания на низе карточки (Влад 16.09.2026) */
.askbar__form { position: relative; z-index: 1; width: 492px; }
.askbar__form .btn { height: 44px; padding: 0 var(--sp-6); font-size: 14px; }
.askbar__form .input { padding-top: 11px; padding-bottom: 11px; }
.form {
display: flex; flex-direction: column; justify-content: center; gap: 23px;
background: #fff; border: 1px solid var(--border); border-radius: var(--r-primary); padding: 30px;
}
.form__fields { display: flex; flex-direction: column; gap: 10px; }
/* После отправки поля остаются на месте невидимыми и держат размер формы, а «спасибо»
ложится поверх: блок вокруг не меняется ни на пиксель при любом zoom (07.10.2026). */
[data-form].is-sent { position: relative; }
[data-form].is-sent > :not(.form__done) { visibility: hidden; opacity: 0; transition: opacity .15s ease-out, visibility 0s .15s; }
.form__done { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; padding: 16px; text-align: center; }
.form__done-icon { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; background: var(--blue-900); }
/* Появление «спасибо» (07.10.2026): поля гаснут за 150 мс, затем круг (масштаб 0.9 → 1),
галочка прорисовывается, текст поднимается на 8 px. Шаг 80 мс, сильный ease-out, всё
разовое — поэтому keyframes. Только opacity/transform и обводка галочки: размер блока не трогается. */
.form__done { --ease-out: cubic-bezier(.23, 1, .32, 1); }
.form__done-icon { animation: ill-done-pop .3s var(--ease-out) .12s both; }
.form__done-icon path { stroke-dasharray: 1; stroke-dashoffset: 1; animation: ill-done-draw .3s var(--ease-out) .28s forwards; }
.form__done-text { animation: ill-done-rise .3s var(--ease-out) .36s both; }
@keyframes ill-done-pop { from { opacity: 0; transform: scale(.9); } to { opacity: 1; transform: none; } }
@keyframes ill-done-draw { to { stroke-dashoffset: 0; } }
@keyframes ill-done-rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
/* Без движения: круг, галочка и текст просто проявляются. */
@media (prefers-reduced-motion: reduce) {
.form__done-icon, .form__done-text { animation: ill-done-fade .2s ease both; }
.form__done-icon path { stroke-dashoffset: 0; animation: none; }
}
@keyframes ill-done-fade { from { opacity: 0; } to { opacity: 1; } }
/* «Отправляем…» и ошибка — на самой кнопке (main.js btnState): своя подпись остаётся
невидимой и держит размер кнопки, сообщение поверх. Ошибка красная, мельче, до двух строк. */
[data-form] .btn { position: relative; }
.btn__msg { position: absolute; inset: 0; display: none; align-items: center; justify-content: center; padding: 2px 12px; text-align: center; text-wrap: balance; }
.btn.is-msg .btn__label { visibility: hidden; }
.btn.is-msg .btn__msg { display: flex; }
[data-form] .btn.is-err { background: var(--error); }
[data-form] .btn.is-err .btn__msg { font-size: 13px; line-height: 1.2; letter-spacing: -.2px; }
.form__done-text { margin: 0; max-width: 360px; font-size: 16px; line-height: 1.4; letter-spacing: -.38px; color: var(--blue-900); text-wrap: balance; }
.form--bare { background: none; border: 0; border-radius: 0; padding: 0; gap: var(--sp-4); }
/* Имя и телефон рядом (240×44 в макете), согласие и кнопка — во всю ширину. */
.form__fields--row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-4); }
.form__fields--row .checks { grid-column: 1 / -1; }
.checks--one .check { align-items: flex-start; }
.checks--one .check input { margin-top: 1px; }
.input {
width: 100%; background: #fff; border: 1px solid var(--border); border-radius: var(--r-secondary);
padding: 12px var(--sp-5); font-size: 14px; line-height: 1.4; letter-spacing: -.4px;
color: var(--black-900); font-family: inherit;
}
.input::placeholder { color: var(--black-500); }
.input:focus { outline: none; border-color: var(--blue-900); }
.select-wrap { position: relative; }
/* Иконка нарисована 9.8x4.8 и с preserveAspectRatio="none" — при 20x20 её раздувало. */
.select-wrap img { position: absolute; right: 16px; top: 50%; transform: translateY(-50%); width: 10px; height: 5px; pointer-events: none; }
select.input { appearance: none; color: var(--black-500); }
.checks { display: flex; flex-direction: column; gap: 6px; }
.check { display: flex; align-items: center; gap: 10px; font-size: 13px; line-height: 1.45; letter-spacing: -.065px; color: var(--black-700); }
.check input { appearance: none; flex: 0 0 auto; width: 22px; height: 22px; margin: 0; background: #fff; border: 1px solid var(--border); border-radius: var(--r-tertiary); cursor: pointer; }
.check input:checked { background: var(--blue-900) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 10.5l3.2 3.2L15 7'/%3E%3C/svg%3E") center/16px no-repeat; border-color: var(--blue-900); }
.check a { color: #969c9f; text-decoration: underline; } /* макеты 40/41: ссылки серые, не синие (правка дизайнера 11.09) */
/* ==========================================================================
Специальные цены
========================================================================== */
.tabs { display: flex; align-items: center; gap: 10px; }
.tab {
padding: 9px var(--sp-5); border-radius: var(--r-secondary); background: var(--bg);
font-size: 16px; font-weight: 500; line-height: 1.4; letter-spacing: -.5px; color: var(--gray-900);
transition: background-color .15s ease, color .15s ease;
}
.tab:hover { background: var(--bg-btn-hover); }
.tab.is-active { background: var(--blue-900); color: #fff; }
.flats { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-6); }
/* display у класса сильнее атрибута hidden, поэтому скрытые наборы гасим явно. */
.flats[hidden] { display: none; }
.flat { display: flex; flex-direction: column; }
/* Та же ловушка у карточки: вкладка прячет её атрибутом hidden. */
.flat[hidden] { display: none; }
/* Стрелки листания стоят справа от вкладок, на месте прежней кнопки «Все планировки». */
.flats__nav { display: flex; gap: var(--sp-3); }
.flats__nav { align-items: center; }
/* По атрибутам, а не first/last-child: на странице ЖК первой в ряду стоит «Все планировки». */
.flats__nav [data-scroller-prev] img { transform: rotate(90deg); }
.flats__nav [data-scroller-next] img { transform: rotate(-90deg); }
/* Лента квартир: карточки в ряд с горизонтальной прокруткой, вкладка их только
фильтрует. Мобильная версия ниже сама делает лентой весь .flats — её не трогаем. */
@media (min-width: 701px) {
.flats--track {
display: flex; flex-wrap: nowrap;
overflow-x: auto; overflow-y: hidden; scroll-behavior: smooth; scroll-snap-type: x mandatory;
scrollbar-width: none;
}
.flats--track::-webkit-scrollbar { display: none; }
/* Четыре карточки в кадре при зазоре 20 — ровно та сетка, что была гридом. */
.flats--track > .flat { flex: 0 0 calc((100% - 3 * var(--sp-6)) / 4); scroll-snap-align: start; }
}
@media (min-width: 701px) and (max-width: 1100px) {
.flats--track > .flat { flex-basis: calc((100% - var(--sp-6)) / 2); }
}
.flat__card {
position: relative; z-index: 2;
background: #fff; border: 1px solid var(--border); border-radius: var(--r-primary); overflow: hidden;
/* Карточка тянется на высоту самой высокой в ряду: без этого высота зависела от
того, есть ли строка «Комфорт класс…» и сколько в ней строк, и подложки со
скидкой шли лесенкой (жалоба Влада 12.09.2026). */
flex: 1 1 auto; display: flex; flex-direction: column;
}
.flat__plan { flex: 0 0 auto; }
.flat__body { flex: 1 1 auto; }
/* Текстовая часть забирает свободное место, кнопка прижимается к низу. */
.flat__body > div { flex: 1 1 auto; }
.flat__head { display: flex; align-items: baseline; gap: var(--sp-6); padding: var(--sp-5) 20px; }
.flat__head b { flex: 1; font-size: 16px; font-weight: 500; letter-spacing: -.5px; }
.flat__head span { flex: 1; text-align: right; font-size: 14px; letter-spacing: -.4px; color: var(--gray-900); }
/* План в макете 221×221 при карточке 315 — поля по 47. */
.flat__plan { display: flex; align-items: center; justify-content: center; padding: 0 47px; }
.flat__plan img { width: 221px; height: 221px; object-fit: contain; }
.flat__body { display: flex; flex-direction: column; gap: var(--sp-5); padding: 20px; }
.flat__params { display: flex; align-items: center; gap: var(--sp-3); font-size: 14px; font-weight: 500; letter-spacing: -.4px; }
.flat__params i { width: 3px; height: 3px; border-radius: 50%; background: var(--gray-500); }
.flat__params sup { font-size: 9px; }
.flat__price { display: flex; align-items: baseline; gap: 8px; }
.flat__price b { font-size: 20px; font-weight: 600; line-height: 1.3; letter-spacing: -.7px; }
.flat__price s { font-size: 14px; line-height: 1.25; letter-spacing: -.4px; color: var(--gray-700); }
.flat__opts { font-size: 14px; line-height: 1.4; letter-spacing: -.4px; color: var(--gray-900); margin-top: 4px; }
.flat__foot {
position: relative; z-index: 1; margin-top: -20px;
display: flex; align-items: center; justify-content: space-between;
background: var(--bg); border-radius: 0 0 var(--r-primary) var(--r-primary);
/* Макет: подложка 315×64 заходит под карточку на 20 и выступает ровно на 44. */
padding: 34px 20px 14px;
}
.flat__sale { display: flex; align-items: center; gap: var(--sp-2); font-size: 14px; line-height: 16px; font-weight: 600; letter-spacing: -.3px; color: var(--blue-900); }
.flat__sale img { width: 16px; height: 16px; }
.flat__until { font-size: 14px; letter-spacing: -.4px; color: var(--black-500); }
/* ==========================================================================
Больше, чем квадратные метры
========================================================================== */
.more { display: grid; grid-template-columns: 1fr 538px; gap: var(--sp-6); align-items: stretch; }
/* Высота окна фото ЗАДАНА, а не min-height: при align-items: stretch слот тянулся за
колонкой аккордеона, и на пункте с более длинным текстом фото становилось выше, чем у
соседей (569 против 581 — Влад заметил 31.08.2026). Теперь окно всегда макетные 569,
что бы ни делали тексты пунктов. */
.more__media { position: relative; border-radius: var(--r-primary); overflow: hidden; height: 569px; }
.more__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.more__media::after { content: ''; position: absolute; inset: 0; background: rgba(0, 0, 0, .1); }
/* У пункта аккордеона может быть своя фотография: кадры лежат стопкой, видно активный. */
.more__media[data-acc-media] img { opacity: 0; transition: opacity .25s ease; }
.more__media[data-acc-media] img.is-active { opacity: 1; }
.more__head { margin-bottom: 32px; }
.more__head .h2 { margin-bottom: var(--sp-5); }
.more__lead { width: 508px; font-size: 18px; line-height: 1.45; letter-spacing: -.5px; color: var(--gray-900); }
.acc { display: flex; flex-direction: column; gap: 12px; }
.acc__item { background: var(--bg); border-radius: var(--r-primary); overflow: hidden; transition: background-color .2s ease; }
.acc__item.is-open { background: var(--blue-900); }
.acc__btn { display: flex; align-items: center; gap: var(--sp-5); width: 100%; padding: 24px; text-align: left; }
.acc__icon { flex: 0 0 24px; width: 24px; height: 24px; }
.acc__item.is-open .acc__icon { filter: brightness(0) invert(1); }
.more .acc__btn { gap: var(--sp-4); }
.more .acc__toggle { padding: 6px; }
.more .acc__toggle img { width: 24px; height: 24px; }
.more .acc__item.is-open .acc__toggle img { transform: rotate(180deg); filter: brightness(0) invert(1); }
.acc__label { flex: 1; }
.acc__item.is-open .acc__label { color: #fff; }
.acc__toggle { flex: 0 0 auto; display: flex; align-items: center; justify-content: center; background: #fff; border-radius: var(--r-secondary); padding: 8px; }
.acc__item.is-open .acc__toggle { background: var(--white-200); }
.acc__toggle img { width: 20px; height: 20px; transition: transform .2s ease; }
.acc__item.is-open .acc__toggle img { transform: rotate(90deg); }
.acc__panel { display: none; padding: 0 24px 24px; color: #fff; font-size: 16px; line-height: 1.5; letter-spacing: -.5px; }
/* Правое поле 72, а не макетные 86: при 86 текст «Планировок для реальной жизни»
переносился на четвёртую строку, пункт вырастал со 173 до 197 и колонка вылезала
ниже фото. На остальных пунктах более широкая мера ничего не меняет — они и так в три строки. */
.more .acc__panel { padding: 0 72px 17px 24px; }
.acc__item.is-open .acc__panel { display: block; }
/* ==========================================================================
Способы покупки
========================================================================== */
/* Макет 26.08: три равные плитки 427x330, фото вылезают за края, «пинов» больше нет. */
.buy { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-6); }
.buy__card { position: relative; height: 330px; background: var(--bg); border-radius: var(--r-primary); overflow: hidden; }
.buy__card--1 { background: #5e9cc5; } /* цвет неба на фото, чтобы стык не читался */
.buy__card--2 { background: linear-gradient(90deg, #e6f2f6, #d8ebf1); }
.buy__text { position: absolute; z-index: 1; left: 24px; top: 24px; display: flex; flex-direction: column; gap: var(--sp-3); max-width: 240px; }
.buy__card--3 .buy__text { max-width: 180px; }
.buy__card--3 .buy__text p { max-width: 150px; }
.buy__text p { font-size: 16px; line-height: 1.4; letter-spacing: -.5px; color: var(--gray-900); }
.buy__card--1 .buy__text .h5, .buy__card--1 .buy__text p { color: #fff; }
.buy__img { position: absolute; max-width: none; }
.buy__card--1 .buy__img { left: -29px; top: 30px; width: 486px; height: 358px; object-fit: cover; }
.buy__card--2 .buy__img { left: 112px; top: -30px; width: 396px; height: 396px; } /* было 61/-54: знак «%» лежал под строкой «Первый взнос от 10%» (12.09.2026) */
.buy__card--3 .buy__img { left: 61px; top: -10px; width: 516px; height: 516px; }
.buy__arrow { position: absolute; z-index: 1; left: 24px; bottom: 24px; }
/* ==========================================================================
О компании (4000+ семей)
========================================================================== */
.about__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 30px; margin-bottom: var(--sp-11); }
.about__head .h2 { width: 650px; line-height: 1.2; }
.about__head p { width: 427px; font-size: 18px; line-height: 1.45; letter-spacing: -.5px; color: var(--gray-900); }
.about__grid { display: flex; flex-wrap: wrap; gap: var(--sp-6); }
.about__cell { height: 360px; border-radius: var(--r-primary); overflow: hidden; }
.about__cell--wide { width: 650px; position: relative; background: linear-gradient(241deg, #34b0d8 0%, #007ca4 100%); }
.about__cell--sm { width: 315px; }
.about__cell--photo img { width: 100%; height: 100%; object-fit: cover; }
.about__intro { position: absolute; z-index: 1; left: 24px; top: 24px; width: 310px; }
.about__intro h3 { font-size: 22px; font-weight: 600; line-height: 1.25; letter-spacing: -1px; color: #fff; }
.about__intro p { margin-top: 14px; font-size: 16px; line-height: 1.5; letter-spacing: -.5px; color: var(--white-800); }
.about__logo { position: absolute; left: 24px; top: 302px; width: 186px; height: 34px; }
.about__cell--wide > img.about__photo { position: absolute; left: 344px; top: 20px; width: 336px; height: 397px; object-fit: contain; object-position: top; }
.about__card {
display: flex; flex-direction: column; justify-content: space-between;
background: #fff; border: 1px solid var(--border); padding: 24px;
}
.about__card--teal { background: #70b8bf; border-color: #70b8bf; }
.about__card h3 { margin: 0 0 12px; font-size: 22px; font-weight: 600; line-height: 1.25; letter-spacing: -1px; }
.about__card p { font-size: 16px; line-height: 1.5; letter-spacing: -.5px; color: var(--gray-900); }
.about__card--teal h3 { color: #fff; }
.about__card--teal p { color: var(--white-800); }
.about__ic { align-self: flex-start; display: flex; align-items: center; background: var(--blue-80); border-radius: var(--r-secondary); padding: 14px; }
.about__card--teal .about__ic { background: var(--white-200); }
.about__ic img { width: 24px; height: 24px; }
/* ==========================================================================
Новости
========================================================================== */
.news { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-6); }
.news__card { display: flex; flex-direction: column; gap: var(--sp-4); }
.news__top {
position: relative; z-index: 1;
display: flex; align-items: center; justify-content: space-between;
background: var(--bg); border-radius: var(--r-primary) var(--r-primary) 0 0;
padding: 12px 20px 32px; margin-bottom: -20px;
font-size: 13px; font-weight: 500; line-height: 1.35; letter-spacing: -.5px;
}
.news__date { color: var(--gray-700); }
.news__read { color: var(--blue-900); }
.news__media { position: relative; z-index: 2; height: 240px; border-radius: var(--r-primary); overflow: hidden; background: var(--bg-btn-hover); }
.news__media img { width: 100%; height: 100%; object-fit: cover; }
.news__title { max-width: 345px; font-size: 18px; font-weight: 500; line-height: 1.35; letter-spacing: -.5px; }
/* ==========================================================================
Внутренние страницы: крошки, заголовок, переключатель
========================================================================== */
/* 17, а не 40: вместе с отступом body (67) это даёт те же 84 до крошек, что и
на страницах с обложкой. Крошки на всём сайте стоят на одной высоте. */
.content--inner { padding-top: 17px; margin-top: 0; border-radius: 0; }
.crumbs { display: flex; align-items: center; gap: 8px; font-size: 14px; line-height: 1.4; letter-spacing: -.4px; color: var(--gray-900); margin-bottom: 16px; }
.crumbs a:hover { color: var(--blue-900); }
.crumbs__current { color: var(--black-900); }
.page-head { display: flex; align-items: center; justify-content: space-between; gap: 30px; margin-bottom: var(--sp-11); }
.crumbs--center { justify-content: center; }
.page-title { text-align: center; margin-bottom: 24px; }
.btn--outline { background: #fff; border: 1px solid var(--border); color: var(--black-900); padding: 15px 40px; font-size: 16px; letter-spacing: -.5px; }
.btn--outline:hover { background: var(--bg); }
.load-more { display: flex; justify-content: center; margin-top: var(--sp-11); }
.news--grid { grid-template-columns: repeat(3, 1fr); gap: 40px var(--sp-6); }
.news--grid .news__title { max-width: none; }
/* ==========================================================================
Обложка внутренней страницы (фото на всю ширину)
========================================================================== */
.page-hero { position: relative; min-height: 540px; display: flex; align-items: flex-end; padding-bottom: 80px; overflow: hidden; }
.page-hero__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* Лента слайдов первого экрана: кадры едут внутри, поэтому не absolute, а flex-колонки. */
.page-hero__track { position: absolute; inset: 0; display: flex; transition: transform .5s cubic-bezier(.4, 0, .2, 1); }
.page-hero__track .page-hero__img { position: relative; inset: auto; flex: 0 0 100%; }
/* Затемнение первого экрана снято по просьбе клиента 23.08.2026 — смотрим фото «как есть».
Если белый заголовок потеряется на светлом кадре, вернуть строку ниже (в макете было
.45 / .15 / .55, промежуточный вариант — .22 / .04 / .5):
background: linear-gradient(180deg, rgba(46,56,63,.22) 0%, rgba(46,56,63,.04) 40%, rgba(46,56,63,.5) 100%); */
/* Затемнение снизу вверх на всех фотографических обложках (Влад 04.09.2026).
Крошки, заголовок и плашки стоят у нижней кромки, а кадр там светлый — текст
терял контраст. Тон тёмно-синий #10161a, а не чистый чёрный: кадры вечерние,
на них чёрный читается грязью.
Длины в пикселях, а не в процентах: обложки разной высоты (Описание проекта 481,
Коммерция 741, О компании 1109 в единицах вёрстки), и в процентах одна и та же
запись давала бы на высокой обложке затемнение вчетверо длиннее. Так полоса
одинаковая везде — примерно нижние 480. */
.page-hero::after {
content: ''; position: absolute; inset: 0;
background: linear-gradient(to top,
rgba(16, 22, 26, .88) 0,
rgba(16, 22, 26, .66) 120px,
rgba(16, 22, 26, .34) 280px,
rgba(16, 22, 26, 0) 480px);
}
/* «Клиентам» и «Покупка» — исключение: фотографии там нет, обложка светлая с
чёрным текстом, затемнение только испортило бы её. */
.page-hero.page-hero--light::after { background: none; }
.page-hero__inner { position: relative; z-index: 2; color: #fff; }
.page-hero__title { color: #fff; margin-bottom: 12px; }
.page-hero__lead { font-size: 16px; line-height: 1.45; letter-spacing: -.5px; color: rgba(255,255,255,.9); }
.crumbs--light { color: rgba(255,255,255,.8); margin-bottom: var(--crumbs-gap); }
.crumbs--light .crumbs__current { color: #fff; }
.crumbs--light a:hover { color: #fff; }
/* Светлая обложка без фото (макеты 31/33/35 «Способы покупки»): заливка вместо
кадра, тёмный текст, 3D-объект справа. Высота 400, полотно контента наезжает
на 30 — крошки на 124, заголовок на 253, как в макете. */
/* Класс задан парой (.page-hero.page-hero--light): ниже по файлу общее правило
.page-hero переопределяет отступы, и одиночного класса ему не перебить.
Высота 400 при верхнем отступе 124 под шапку: крошки на 124, заголовок
низом на 307 — ровно как в макете. */
.page-hero.page-hero--light {
min-height: 400px; padding-bottom: 93px;
background: linear-gradient(135deg, #e6f2f6 0%, #e6f2f6 45%, #cde5ed 100%);
}
/* Обложка «Описания проекта» (макет 29): 370 при верхнем отступе 124 —
крошки на 124, заголовок низом на 301. У других страниц обложка выше:
«Коммерция» 760, «О компании» 1200. */
.page-hero.page-hero--op { min-height: 370px; padding-bottom: 69px; }
/* В макете заголовок ложится в две строки — ширина 560 не даёт ему растянуться. */
.page-hero--op .page-hero__title { max-width: 620px; }
.page-hero--light .page-hero__inner { color: var(--black-900); }
.page-hero--light .page-hero__title { color: var(--black-900); margin-bottom: 0; }
/* 3D-объект: место из макета — 533x533 при x=818, y=60 (правый отступ 89).
На широком мониторе отступ из макета оставлял объект правее меню — он улетал
к кромке окна. Поэтому правый отступ не меньше поля контейнера: объект
останавливается ровно у края меню и дальше вправо не уходит (Влад 23.09.2026).
На 1440 действует макетное число, max() берёт большее. */
.page-hero__deco { position: absolute; top: 60px; right: max(89px, calc((100% - var(--container)) / 2)); width: 533px; height: auto; z-index: 1; }
/* У «Клиентам» объект мельче и выше: 454x454 при x=872, y=65 (макет 37). */
.page-hero__deco--klientam { top: 65px; right: max(114px, calc((100% - var(--container)) / 2)); width: 454px; }
/* ==========================================================================
Способы покупки
========================================================================== */
.buy-pane { display: none; }
.buy-pane.is-active { display: block; }
/* блок под вкладкой идёт после баннера: соседство секций разорвано обёрткой,
поэтому отступы задаём ей (замер макетов 22-24: 90 сверху, 100 до вопросов) */
.buy-pane--extra > .section { margin-top: 98px; }
/* секция после блока-оффера: соседство .section + .section тут не работает */
.buy-pane > .offer + .section, .buy-pane > .offer + .feats + .section { margin-top: 98px; }
.buy-pane--extra + .section { margin-top: 100px; }
/* Секция после вкладки: соседство .section + .section тут не срабатывает —
перед ней стоит обёртка вкладки, и вопросы прилипали к блоку выше. */
.buy-pane + .section { margin-top: 100px; }
/* Вкладки способов покупки: активная — белая на светлой подложке (как в макете).
Плитки равной ширины 140 — в макете группа 427x48 при любой длине подписи. */
.tabs[data-buytabs] { width: 427px; max-width: 100%; background: var(--bg); border-radius: var(--r-secondary); padding: 4px; gap: 0; }
.tabs[data-buytabs] .tab { background: transparent; flex: 1 1 0; min-width: 0; padding: 9px 8px; text-align: center; white-space: nowrap; }
.tabs[data-buytabs] .tab:hover { background: rgba(255, 255, 255, .5); }
.tabs[data-buytabs] .tab.is-active { background: #fff; color: var(--black-900); box-shadow: 0 2px 6px rgba(46, 56, 63, .06); }
/* макеты 22-26: колонка текста 427x600, поля 24, заголовок 40/45, текст 18/27 */
.offer { display: grid; grid-template-columns: 427px 1fr; gap: var(--sp-6); align-items: stretch; }
.offer__text { display: flex; flex-direction: column; background: var(--bg); border-radius: var(--r-primary); padding: 24px; min-height: 600px; }
.offer__title { margin: 0 0 20px; font-size: 40px; font-weight: 600; line-height: 45px; letter-spacing: -1px; }
.offer__text p { font-size: 18px; line-height: 27px; letter-spacing: -.4px; color: var(--gray-900); }
.offer__text p + p { margin-top: 16px; }
.offer__cta { margin-top: auto; width: 100%; }
/* Высота задана явно: в макете кадр 873x600 обрезан по контейнеру, а без неё
вертикальное фото растягивает всю строку по своей пропорции. */
.offer__media { border-radius: var(--r-primary); overflow: hidden; height: 600px; }
.offer__media img { width: 100%; height: 100%; object-fit: cover; }
/* Вырезанный объект: та же светлая подложка, что и в первом экране. В макетах
33 и 35 фигура крупнее кадра — стоит с отступом 35..73 сверху и уходит низом
за нижнюю кромку, поэтому высота 120% и сдвиг 8%, а не вписывание целиком. */
.offer__media--cut { background: linear-gradient(135deg, #e6f2f6 0%, #e6f2f6 45%, #cde5ed 100%); }
.offer__media--cut img {
position: relative; top: 8%; display: block; margin: 0 auto;
width: auto; height: 120%; object-fit: contain; object-position: center bottom;
}
/* Карточка 427x192 (замер макетов 31/33/35): 24 поля + 30 заголовок + 12 +
44 текст в две строки + 28 + 30 иконка + 24. */
.feats { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-6); margin-top: var(--sp-6); }
/* Высоту держит минимум, а иконка прижата к низу: у части способов подпись
занимает одну строку, и без этого карточка теряла 22 px против макета. */
.feat { display: flex; flex-direction: column; min-height: 192px; background: var(--bg); border-radius: var(--r-primary); padding: 24px; }
/* Кегли как у вопроса и ответа в FAQ (.acc--faq .acc__label 20/500, .acc__panel 16/1.5) —
просьба клиента 15.09.2026; в макете заголовок был 24/600. */
.feat__title { margin: 0 0 12px; font-size: 20px; font-weight: 500; line-height: 1.3; letter-spacing: -.5px; }
.feat__text { margin-bottom: 28px; font-size: 16px; line-height: 1.5; letter-spacing: -.5px; color: var(--gray-900); }
.feat__ic { width: 30px; height: 30px; margin-top: auto; }
/* ==========================================================================
Страница жилого комплекса
========================================================================== */
/* Первый экран ЖК в макете 17 — фото 0..760: метки ложатся на 638..670, а белое
полотно контента наезжает на фото на 30 (730) и даёт ряд якорей на 790. */
/* .page-hero ниже по файлу задаёт свои отступы с той же специфичностью,
поэтому оба класса в селекторе — иначе padding-bottom не перебьётся. */
.page-hero.page-hero--jk { min-height: var(--hero-minh); padding-bottom: 90px; }
/* Полотно контента начинается на 730, ряд якорей по макету — на 790,
свои 20 сверху даёт сам .anchors. */
body.single-ill_object .content { padding-top: 40px; }
/* Якорное меню страницы ЖК. В макете 17 у него два состояния: в потоке под
первым экраном (пилюли от края колонки, y 790..830) и прилипшее — второй
ярус островка шапки: белая панель 77..150 с общей рамкой, разделителем
#dde1e8 на стыке и скруглением снизу, пилюли внутри с отступом 20.
top 74 подобран так, чтобы прилипшие пилюли встали на макетные 94..134. */
/* Режим по умолчанию (решение 02.09.2026): панель якорей уходит из потока вниз
и всплывает над контентом белым островком в стиле шапки, когда прокручен
второй блок страницы. Порог считает JS по --anch-after, поэтому панель можно
подгонять ползунками на стенде, не трогая скрипт. */
.anchors {
position: fixed; z-index: 45;
/* Плашка про cookies стоит ровно там же — пока она висит, панель поднимается
над ней на её высоту (--anch-lift выставляет скрипт). */
left: 50%; bottom: calc(var(--anch-bottom) + var(--anch-lift, 0px));
transform: translateX(-50%) translateY(16px);
display: flex; flex-wrap: nowrap; gap: var(--anch-gap);
max-width: min(var(--container), calc(100 * var(--vw) - 40px));
overflow-x: auto; overflow-y: hidden; scrollbar-width: none;
padding: var(--anch-pad);
background: #fff; border-radius: var(--r-primary);
box-shadow: 0 0 0 1px var(--border), 0 10px 30px rgba(46, 56, 63, .14);
opacity: 0; visibility: hidden; pointer-events: none;
transition: opacity .22s ease, transform .22s ease, visibility .22s;
}
.anchors::-webkit-scrollbar { display: none; }
.anchors.is-shown { opacity: 1; visibility: visible; pointer-events: auto; transform: translateX(-50%) translateY(0); }
/* Якорей в потоке больше нет: расстояние от первого экрана до «О проекте»
держит сам контент, иначе блок прилипает к фото. */
body.single-ill_object .content { padding-top: var(--anch-lead); }
.anchors + .section { margin-top: 0; }
/* --- Прежний режим: ряд в потоке, прилипающий вторым ярусом шапки ---------
Остаётся под классом body.anchors--inline, чтобы сравнивать на стенде. */
body.anchors--inline .anchors {
position: sticky; top: calc(var(--hdr-top) + var(--hdr-h) - 2px); bottom: auto; left: auto;
z-index: 40; transform: none; flex-wrap: wrap; overflow: visible; max-width: none;
padding: 20px 0 0; background: none; border-radius: 0; box-shadow: none;
opacity: 1; visibility: visible; pointer-events: auto;
}
body.anchors--inline.admin-bar .anchors { top: calc(var(--hdr-top) + var(--hdr-h) - 2px + 32px / var(--z)); }
body.anchors--inline.single-ill_object .content { padding-top: 40px; }
body.anchors--inline .anchors + .section { margin-top: 98px; }
body.anchors--inline .anchors.is-stuck { padding-left: 20px; padding-right: 20px; }
body.anchors--inline .anchors.is-stuck::before {
content: ''; position: absolute; z-index: -1;
left: 0; right: 0; top: 2px; bottom: -16px;
background: #fff; border-radius: 0 0 var(--r-primary) var(--r-primary);
box-shadow: 0 0 0 1px var(--border);
}
/* Пока меню прилипло, нижние углы шапки прямые — два яруса читаются как один блок. */
body.anchors--inline.is-anchors-stuck .header__inner { border-radius: var(--r-primary) var(--r-primary) 0 0; }
/* Пилюля: в макете 40 px высотой, текст 16 px, поля 16, шаг 8.
Ширины из PDF: «О проекте» 109 при тексте 77, «Ход строительства» 171 при 139 — поле 16. */
.anchor { display: flex; align-items: center; height: var(--anch-pill-h); padding: 0 16px; white-space: nowrap; border-radius: var(--r-secondary); background: var(--anch-pill-bg); font-size: var(--anch-font); font-weight: 500; letter-spacing: -.4px; color: var(--anch-pill-fg); transition: background-color .15s ease, color .15s ease; }
.anchor:hover { background: var(--anch-pill-hover); }
/* Активный пункт в макете — сплошной синий с белым текстом, не подсветка. */
.anchor.is-active { background: var(--anch-active-bg); color: var(--anch-active-fg); }
/* Каталог Домопланера. Его круглая кнопка 138 px висела поверх контента в правом
нижнем углу — прячем её и переносим вызов в панель отдельной синей пилюлей
(02.09.2026, решение Влада). Виджет от этого не ломается: каталог открывается
адресным хэшем #dp/genplan, а не самой кнопкой. */
#domoplan-fast-btn { display: none !important; }
/* Крестик поверх каталога (рисует inc/catalog.php): у самого каталога кнопки
закрытия нет. Оверлей виджета ставит z-index 99999999999999 — браузер срежет
его до предела int32, поэтому берём тот же максимум: наша кнопка добавляется
в DOM позже фрейма и потому оказывается выше. */
.ill-dp-close {
/* Правый верхний угол занят кнопками зума каталога (44 px + поля) — крестик
ставим левее них, иначе он накрывает «+» (видно на снимке 02.09.2026). */
position: fixed; top: 20px; right: 84px; z-index: 2147483647;
width: 44px; height: 44px; border-radius: 50%;
display: flex; align-items: center; justify-content: center;
background: #fff; color: var(--black-900); font-size: 26px; line-height: 1;
box-shadow: 0 4px 16px rgba(46, 56, 63, .25);
}
.ill-dp-close:hover { background: var(--bg); }
/* До 767 px каталог в мобильном виде, у него свой крестик в шапке — второй лишний
(01.10.2026, Влад). Порог взят из CSS самого виджета: max-width 767px. */
@media (max-width: 767px) { .ill-dp-close { display: none; } }
.anchor--cta { background: var(--blue-900); color: #fff; font-weight: 600; }
.anchor--cta:hover { background: var(--blue-hover); }
/* Пункты только для мобильного острова (см. single-ill_object.php). */
.anchor--mob { display: none; }
/* Макет 26.08: слева «О проекте» и строка «адрес · сроки», справа описание 624.
Таблицы спеков и пары фотографий в макете больше нет. */
/* Отбивка до плиток в макете 47: описание справа кончается на 1058, плитки начинаются с 1105. */
.jk-about { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-6); align-items: start; margin-bottom: 47px; }
.jk-about__title { margin-bottom: 23px; }
.jk-about__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 28px; }
.jk-about__meta span { display: flex; align-items: center; gap: 8px; font-size: 16px; letter-spacing: -.5px; }
.jk-about__meta img { width: 18px; height: 18px; }
/* Минимум две строки: у ЖК с коротким текстом всё ниже сдвигалось на строку относительно других ЖК (Влад 18.09.2026). */
.jk-about__text { font-size: 18px; line-height: 1.5; letter-spacing: -.5px; color: var(--gray-900); min-height: 3em; }
.jk-about__text p + p { margin-top: 1em; }
/* Четыре плитки: большая 650x640 слева, справа две 315x310, под ними 650x310.
Затемнения во всю плитку в макете нет — только градиент сверху под белый заголовок. */
.jk-tiles { display: grid; grid-template-columns: 650fr 315fr 315fr; gap: var(--sp-6); }
.jk-tile {
position: relative; overflow: hidden; height: 310px;
border-radius: var(--r-primary); background: var(--bg); color: #fff; isolation: isolate;
}
.jk-tile:nth-child(1) { grid-row: span 2; height: 640px; }
.jk-tile:nth-child(4) { grid-column: 2 / span 2; }
.jk-tile__bg { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; }
.jk-tile:not(.jk-tile--video)::before,
.jk-tile--has-video::before {
content: ''; position: absolute; inset: 0 0 auto; z-index: -1; height: 160px;
background: linear-gradient(180deg, rgba(27, 34, 39, .45), rgba(27, 34, 39, 0));
transition: opacity .2s ease;
}
.jk-tile__title {
position: absolute; left: 24px; top: 24px; right: 24px; margin: 0;
font-size: 24px; font-weight: 600; line-height: 1.25; letter-spacing: -.5px;
}
.jk-tile--video { background: var(--bg); }
.jk-tile--video .jk-tile__title { color: var(--black-900); right: 64px; }
/* С загруженным роликом плитка живёт как остальные: кадр во всю площадь,
белый заголовок поверх градиента. Само видео лежит над кадром и проявляется
по клику — так до запуска видно превью, а файл не грузится (preload="none"). */
.jk-tile--has-video .jk-tile__title { color: #fff; }
.jk-tile__video {
position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%;
object-fit: cover; opacity: 0; transition: opacity .3s ease;
}
/* Ролик проявляется, когда пошли первые кадры: до этого под ним виден кадр
из поля «Фото», а если фото нет — ровный фон плитки, а не чёрный прямоугольник. */
.jk-tile--has-video.is-ready .jk-tile__video { opacity: 1; }
/* Во весь экран кадр показываем целиком: обрезка нужна только в плитке. */
.jk-tile__video:fullscreen { object-fit: contain; opacity: 1; background: #000; }
.jk-tile__video:-webkit-full-screen { object-fit: contain; opacity: 1; background: #000; }
.jk-tile__next { position: absolute; right: 24px; bottom: 24px; }
/* .icon-btn держит шеврон вниз — на плитке он смотрит вправо, как в макете. */
.jk-tile__next img { transform: rotate(-90deg); }
/* Кнопка видео: внешний круг 80 полупрозрачный, внутренний 60 сплошной. */
.jk-tile__play {
position: absolute; left: 24px; bottom: 24px;
display: flex; align-items: center; justify-content: center;
width: 80px; height: 80px; border-radius: 50%; background: var(--blue-100);
}
.jk-tile__play span {
display: flex; align-items: center; justify-content: center;
width: 60px; height: 60px; border-radius: 50%; background: var(--blue-900);
padding-left: 3px; transition: background-color .15s ease;
}
.jk-tile__play:hover span { background: var(--blue-hover); }
.jk-tile__title { transition: opacity .2s ease; }
/* Ореол вокруг кнопки мигает и отпускает кольцо наружу — приглашение нажать.
Значения --blue-100 раскрыты числами: в keyframes нужен плавный переход цвета. */
@keyframes jk-play-pulse {
0%, 100% { background: rgba(0, 124, 164, .1); box-shadow: 0 0 0 0 rgba(0, 124, 164, .3); }
50% { background: rgba(0, 124, 164, .38); box-shadow: 0 0 0 16px rgba(0, 124, 164, 0); }
}
.jk-tile__play { animation: jk-play-pulse 2s ease-in-out infinite; transition: opacity .2s ease; }
.jk-tile__play:hover { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) { .jk-tile__play { animation: none; } }
/* Блок «Рассчитайте ипотеку»: место под виджет стороннего сервиса, в макете 1320x750. */
.mortgage { min-height: 750px; border-radius: var(--r-primary); overflow: hidden; }
.mortgage--empty {
display: flex; flex-direction: column; align-items: center; justify-content: center;
gap: var(--sp-6); min-height: 320px; background: var(--bg); color: var(--gray-900);
font-size: 18px; letter-spacing: -.5px; text-align: center; padding: 40px 20px;
}
/* «Документы проекта»: полоса 1320x179, заголовок и кнопка по центру. */
/* В макете под полосой лежит картинка (белые 3D-волны, 1320×754 в y=10356 страницы 19):
блок показывает её среднюю полосу 288..467. Вырезана из PDF в docs-bg.webp (замечание
клиента 15.09.2026: «на макете есть фон, на сайте нет»). Градиент остаётся подложкой. */
.docs {
display: flex; flex-direction: column; align-items: center; justify-content: center;
gap: 26px; height: 179px; border-radius: var(--r-primary);
background: url('../img/docs-bg.webp') no-repeat center / cover, linear-gradient(115deg, #f5f6f9 0%, #f2f4f6 55%, #e9edf2 100%);
}
.docs__btn { height: 50px; padding: 0 24px; }
/* Стрелка нарисована синей и смотрит вниз — на синей кнопке белим и разворачиваем. */
.docs__btn img { width: 9px; height: 4.5px; transform: rotate(-90deg); filter: brightness(0) invert(1); }
/* Кнопка каталога отделки в макете 203×48. */
.btn--catalog { height: 48px; padding: 0 42px; font-size: 16px; letter-spacing: -.5px; }
/* Строка под заголовком отделки (макет 19): сегмент вкладок (пилюли ровно по 140,
капсула 427×48), через 20 — список вариантов 315×48 на той же серой капсуле,
кнопка каталога прижата вправо. */
.finish-head { justify-content: flex-start; gap: 20px; }
.finish-head .tabs--segment .tab { min-width: 140px; justify-content: center; text-align: center; }
.finish-head .btn--catalog { margin-left: auto; }
.finish-select { width: 315px; flex: 0 0 auto; }
.finish-select__input {
appearance: none; width: 100%; height: 48px; padding: 0 44px 0 20px;
background: var(--bg); border: 0; border-radius: var(--r-primary);
font-family: inherit; font-size: 16px; letter-spacing: -.5px; color: var(--black-900);
cursor: pointer;
}
.finish-select__input:focus { outline: none; box-shadow: 0 0 0 1px var(--blue-900) inset; }
.finish-select img { right: 20px; width: 12px; height: 6px; }
/* Ширина текста в макете у каждой плитки своя — от неё зависят переносы строк. */
/* Описание проекта */
/* Лента фото блока: в макете 29 кадр 1320x640, стрелки по краям на середине
высоты и кнопка «развернуть» в правом верхнем углу — все с отступом 20. */
/* Колонки блока из макета 29: 558 под заголовок и 750 под текст, а не пополам. */
.op-about { grid-template-columns: 558fr 750fr; gap: 12px; margin-bottom: 44px; }
/* Заголовки разделов статьи 40 -> 32 (Влад 24.09.2026: «слишком большой»): длинные
в 40 упирались в текст справа, зазор колонок всего 12. Только десктоп —
на узком экране у .h2 своя шкала. */
@media (min-width: 1101px) {
.op-about .h2 { font-size: 32px; line-height: 1.2; letter-spacing: -1px; max-width: 520px; }
}
.op-media { position: relative; border-radius: var(--r-primary); overflow: hidden; margin-bottom: var(--sp-6); }
.op-media__track { display: flex; transition: transform .5s cubic-bezier(.4, 0, .2, 1); }
.op-media__slide { flex: 0 0 100%; }
/* Только кадры: правило на все img внутри .op-media растягивало и значки стрелок/«развернуть»
в белые полосы на высоту фото (24.09.2026, статьи соцпроектов с каруселью). */
.op-media__slide img { width: 100%; height: 640px; object-fit: cover; } /* высота из макета */
/* В макете кнопки полупрозрачные, а не сплошные тёмные. */
.op-media__expand, .op-media__arrow {
position: absolute; z-index: 2; width: 48px; height: 48px; padding: 0;
display: flex; align-items: center; justify-content: center;
border: 0; border-radius: var(--r-full); background: rgba(46, 56, 63, .45); cursor: pointer;
transition: background .2s;
}
.op-media__expand:hover, .op-media__arrow:hover { background: rgba(46, 56, 63, .7); }
.op-media__expand img, .op-media__arrow img { width: 18px; height: auto; filter: brightness(0) invert(1); }
.op-media__expand { top: 20px; right: 20px; }
.op-media__arrow { top: 50%; transform: translateY(-50%); }
.op-media__arrow--prev { left: 20px; }
.op-media__arrow--next { right: 20px; }
/* arrow-l/arrow-r.svg — одна и та же «галочка вниз», направление задаёт поворот, как у лент
.gallery__nav и .flats__nav (24.09.2026: стрелки смотрели вниз). */
.op-media__arrow--prev img { transform: rotate(90deg); }
.op-media__arrow--next img { transform: rotate(-90deg); }
.op-media--pair { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; }
/* Плитки из макета 29: 248x142, зазор 20, значок 28, подпись 16/22. */
.op-feats { display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--sp-6); }
.op-feat { background: var(--bg); border-radius: var(--r-primary); padding: 25px 24px 22px; min-height: 142px; }
/* Значок вырезан из макета кадром 36x36, сама иконка внутри 28 и прижата
к левому краю неровно — как в макете. -2 компенсирует поле кадра. */
.op-feat img { width: 36px; height: auto; margin: 0 0 20px -2px; }
.op-feat p { font-size: 16px; line-height: 22px; letter-spacing: -.4px; }
@media (max-width: 1100px) { .op-feats { grid-template-columns: repeat(2, 1fr); } .op-media__slide img { height: 320px; } }
@media (max-width: 700px) { .op-feats, .op-media--pair { grid-template-columns: 1fr; } .op-media__expand { display: none; } }
.genplan { border-radius: var(--r-primary); overflow: hidden; }
.genplan img { width: 100%; height: auto; }
/* Макет: заголовок по центру, кнопки под ним, план во всю ширину экрана без скруглений.
Окно 1440×870, картинка шире и обрезается по бокам — как размещение 2023×870 в PDF. */
.genplan__title { text-align: center; margin-bottom: var(--sp-6); }
.genplan--wide {
width: calc(100 * var(--vw)); margin-left: calc(50% - 50 * var(--vw)); border-radius: 0;
height: min(calc(60.4 * var(--vw)), 870px);
}
.genplan--wide img { width: 100%; height: 100%; object-fit: cover; }
/* Живой генплан Домопланера: высоту виджет считает сам по пропорции своей картинки,
поэтому фиксированную высоту полосы для него снимаем. Ниже 1024 виджет прячется
собственным стилем — там показываем картинку из карточки ЖК, на десктопе наоборот. */
.genplan--live { height: auto; }
@media (min-width: 1025px) { .is-dp-genplan .genplan--static { display: none; } }
@media (max-width: 1024px) {
.genplan--live { display: none; }
/* На телефоне и планшете генплан — обычная картинка в полях страницы со скруглением,
как у соседних блоков, а не полоса до кромок экрана (Влад 17.09.2026). */
.genplan--wide { width: auto; margin-left: 0; height: auto; border-radius: var(--r-primary); }
.genplan--wide img { height: auto; object-fit: initial; }
/* Стрелки и «развернуть» на кадре отделки — того же полупрозрачного стекла, что и
плашка цены; белые круги на фото читались чужеродно (Влад 17.09.2026). */
.finish__nav .icon-btn, .finish__zoom {
background: rgba(255, 255, 255, .2); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.finish__nav .icon-btn:hover, .finish__zoom:hover { background: rgba(255, 255, 255, .35); }
}
/* Метку корпуса виджет рисует белым кружком 30 px с жирным текстом 18 и без своего
шрифта — название дома из кабинета («60 - 3 этап») в кружок не влезает, а шрифт
наследуется от страницы. Приводим к таблетке, какой её рисует каталог Домопланера
на illidium.com: замер по снимку — высота 32, фон около #007CA7, то есть фирменный
синий темы --blue-900 (#007ca4) с точностью до сжатия картинки. */
.genplan--live .dp-genplan-housenum-n {
width: auto; height: 32px; padding: 0 12px;
margin: -16px 0 0; transform: translateX(-50%);
border-radius: var(--r-full); background: var(--blue-900);
color: #fff; font-size: 14px; font-weight: 500; line-height: 32px;
letter-spacing: -.4px; white-space: nowrap;
}
/* Галерея по макету: одно фото 1320×700 во всю колонку, подпись белой карточкой
поверх снизу слева, счётчик со стрелками — снизу справа, «развернуть» — сверху справа. */
.gallery { position: relative; border-radius: var(--r-primary); overflow: hidden; }
.gallery__img { display: block; width: 100%; height: 700px; object-fit: cover; }
.gallery__note {
position: absolute; left: 24px; bottom: 24px; width: 500px; max-width: calc(100% - 48px);
background: #fff; border-radius: var(--r-primary); padding: 24px;
}
.gallery__title { margin: 0 0 12px; font-size: 24px; font-weight: 600; line-height: 1.25; letter-spacing: -1px; }
.gallery__text { font-size: 16px; line-height: 1.4; letter-spacing: -.5px; color: var(--gray-900); }
/* Панель «‹ 3 из 7 ›»: в макете 141×48, круги 48 по краям, счётчик 14 между ними. */
.gallery__nav {
position: absolute; right: 24px; bottom: 24px;
display: flex; align-items: center; gap: 0;
background: #fff; border-radius: var(--r-full);
}
.gallery__nav .icon-btn { box-shadow: none; background: transparent; padding: 12px; }
.gallery__nav .icon-btn:hover { background: var(--bg); }
/* Стрелки из Figma смотрят вниз — разворачиваем, как в остальных навигациях. */
.gallery__nav .icon-btn:first-child img { transform: rotate(90deg); }
.gallery__nav .icon-btn:last-child img { transform: rotate(-90deg); }
.finish__nav .icon-btn:first-child img { transform: rotate(90deg); }
.finish__nav .icon-btn:last-child img { transform: rotate(-90deg); }
.gallery__count { min-width: 45px; text-align: center; font-size: 14px; font-weight: 600; letter-spacing: -.3px; color: var(--black-900); }
/* Кнопка «развернуть» 48×48 в правом верхнем углу кадра. */
.gallery__zoom, .finish__zoom {
position: absolute; right: 20px; top: 20px; z-index: 2;
display: flex; align-items: center; justify-content: center;
width: 48px; height: 48px; border-radius: var(--r-full);
background: rgba(46, 56, 63, .8); transition: background-color .15s ease;
}
.gallery__zoom:hover, .finish__zoom:hover { background: var(--black-900); }
.gallery__zoom img, .finish__zoom img { width: 20px; height: 20px; filter: brightness(0) invert(1); }
/* Карточка локации в макете 315×92: поле 6, фото 80×80, название 16, время 14 с иконкой. */
/* «Что рядом» — лента в один ряд, четыре карточки в кадре, остальные листаются стрелками
у заголовка (Влад 17.09.2026; раньше сетка переносила пятую карточку на второй ряд). */
.places { --pg: var(--sp-6); display: flex; gap: var(--pg); margin-bottom: var(--sp-6); overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; scrollbar-width: none; }
.places::-webkit-scrollbar { display: none; }
.place { flex: 0 0 calc((100% - var(--pg) * 3) / 4); scroll-snap-align: start; }
.place { display: flex; align-items: center; gap: var(--sp-5); background: var(--bg); border-radius: var(--r-primary); padding: 6px; }
.place img, .place__ph { width: 80px; height: 80px; border-radius: 12px; object-fit: cover; background: #fff; flex: 0 0 80px; }
.place__name { font-size: 16px; font-weight: 500; letter-spacing: -.5px; }
.place__time { display: flex; align-items: center; gap: 6px; margin-top: 12px; font-size: 14px; letter-spacing: -.4px; color: var(--gray-900); }
/* Иконку ловило правило `.place img` (80×80, cover, скругление 12) — у машинки срезало
низ и углы. Сбрасываем всё, что там задано, а не только размер. */
.place__time img { width: 19px; height: 17px; flex: none; border-radius: 0; object-fit: contain; background: none; }
.infra-map { position: relative; border-radius: var(--r-primary); overflow: hidden; }
.infra-map img { width: 100%; height: 680px; object-fit: cover; }
.infra-map .embed { display: block; width: 100%; height: 680px; border: 0; }
/* Пока по карте не кликнули, слой забирает события: без него колесо мыши зумит карту,
а страница на месте. Клик снимает слой, дальше карта работает как обычно. */
.infra-map__lock { position: absolute; inset: 0; cursor: pointer; }
.infra-map__hint {
position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
padding: 10px 18px; border-radius: var(--r-full); background: rgba(255, 255, 255, .92);
font-size: 14px; letter-spacing: -.3px; color: var(--black-900);
box-shadow: 0 8px 28px rgba(20, 60, 80, .12);
opacity: 0; transition: opacity .15s ease;
}
.infra-map__lock:hover .infra-map__hint { opacity: 1; }
/* Фильтры — одна белая капсула 773×48 у нижней кромки карты (в макете отступ 30). */
.infra-map__filters {
position: absolute; left: 50%; transform: translateX(-50%); bottom: 30px;
display: flex; align-items: center; gap: 4px;
background: #fff; border-radius: var(--r-full); padding: 4px;
box-shadow: 0 8px 28px rgba(20, 60, 80, .12);
}
/* flex: none обязателен: без него пилюли сжимались, синяя заливка активной становилась
уже собственного текста и цифра вылезала за скругление. */
.map-filter {
display: flex; align-items: center; flex: none; gap: var(--sp-3); white-space: nowrap;
padding: 9px 16px; border-radius: var(--r-full);
font-size: 14px; letter-spacing: -.3px; color: var(--black-900);
transition: background-color .15s ease, color .15s ease;
}
.map-filter svg { width: 18px; height: 18px; color: var(--blue-900); flex: none; }
.map-filter b { font-weight: 400; color: var(--black-900); }
.map-filter:hover { background: var(--bg); }
.map-filter.is-active { background: var(--blue-900); color: #fff; }
.map-filter.is-active svg, .map-filter.is-active b { color: #fff; }
/* Макет: синяя карточка 427 + фото 873, высота 540. Иконка в плашке 60,
заголовок 24, текст 16, внизу белая кнопка во всю ширину карточки (379×50). */
.tour { display: grid; grid-template-columns: 427px minmax(0, 1fr); gap: var(--sp-6); }
.tour__card { min-height: 540px; background: var(--blue-900); color: #fff; border-radius: var(--r-primary); padding: 24px; display: flex; flex-direction: column; }
.tour__ic { display: flex; align-items: center; justify-content: center; width: 60px; height: 60px; background: var(--white-200); border-radius: var(--r-primary); margin-bottom: 24px; }
.tour__ic img { width: 28px; height: 28px; filter: brightness(0) invert(1); }
.tour__ic svg { width: 28px; height: 28px; color: #fff; }
.tour__title { margin: 0 0 12px; font-size: 24px; font-weight: 600; line-height: 1.25; letter-spacing: -1px; }
.tour__text { font-size: 16px; line-height: 1.4; letter-spacing: -.5px; color: rgba(255,255,255,.85); }
.tour__card .btn--soft { margin-top: auto; background: #fff; color: var(--black-900); padding: 15px 24px; font-size: 16px; letter-spacing: -.5px; }
.tour__card .btn--soft:hover { background: rgba(255, 255, 255, .88); }
.tour__media { border-radius: var(--r-primary); overflow: hidden; }
.tour__media img { width: 100%; height: 100%; object-fit: cover; }
/* Когда тур задан, кадр — кнопка: гасим её собственное оформление. */
button.tour__media { display: block; width: 100%; padding: 0; border: 0; background: none; cursor: pointer; }
button.tour__media img { transition: transform .4s ease; }
button.tour__media:hover img { transform: scale(1.03); }
@media (max-width: 1100px) {
.jk-about, .jk-tiles, .gallery, .tour { grid-template-columns: 1fr; grid-template-areas: none; }
.place { flex-basis: calc((100% - var(--pg)) / 2); }
.page-hero--jk { min-height: 460px; }
}
/* ==========================================================================
О компании
========================================================================== */
.about-hero__title { max-width: 900px; line-height: 1.2; margin-bottom: 20px; }
.about-hero__lead { max-width: 700px; font-size: 14px; line-height: 1.5; letter-spacing: -.4px; color: var(--gray-900); margin-bottom: 40px; }
.about-hero__media { border-radius: var(--r-primary); overflow: hidden; }
.about-hero__media img { width: 100%; height: 620px; object-fit: cover; }
/* Направления: карточка 315×420, подпись сверху, кнопка 40 внизу справа (макет 27, y=1355..1775).
Раскрытая карточка прячет фото и показывает описание на светлой плашке #f2f4f6. */
.dirs { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-6); }
.dir { position: relative; height: 420px; border-radius: var(--r-primary); overflow: hidden; background: var(--bg); }
.dir__img { width: 100%; height: 100%; object-fit: cover; transition: opacity .25s; }
/* Подпись лежит на фото сверху — лёгкая тень под ней, чтобы белый текст не терялся на светлом кадре. */
.dir::after { content: ''; position: absolute; inset: 0 0 auto; height: 140px; background: linear-gradient(180deg, rgba(46,56,63,.5) 0%, rgba(46,56,63,0) 100%); transition: opacity .25s; }
.dir__title { position: absolute; z-index: 2; left: 24px; right: 24px; top: 25px; color: #fff; font-size: 18px; font-weight: 500; line-height: 1.3; letter-spacing: -.5px; }
.dir__text {
position: absolute; z-index: 2; left: 24px; right: 24px; top: 62px;
font-size: 16px; line-height: 24px; letter-spacing: -.4px; color: var(--gray-900);
opacity: 0; visibility: hidden; transition: opacity .25s;
}
.dir__toggle {
position: absolute; z-index: 3; right: 24px; bottom: 24px; width: 40px; height: 40px;
border: 0; border-radius: 50%; cursor: pointer; background: var(--white-200) center / 13px 13px no-repeat;
backdrop-filter: blur(10px); transition: background-color .25s, transform .25s;
background-image: url('../icons/plus-white.svg');
}
.dir__toggle:hover { transform: scale(1.06); }
.dir.is-open { background: var(--bg); }
.dir.is-open .dir__img, .dir.is-open::after { opacity: 0; }
.dir.is-open .dir__title { color: var(--black-900); }
.dir.is-open .dir__text { opacity: 1; visibility: visible; }
/* Плюс симметричен, поворот на 180° был бы не виден: у раскрытой карточки меняется только цвет круга. */
.dir.is-open .dir__toggle { background-color: var(--blue-900); }
/* Цифры: три колонки по 427, левая 560 + 240, средняя и правая по 400 (макет 27, y=2839..3659). */
.nums { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-6); align-items: start; }
.nums__col { display: flex; flex-direction: column; gap: var(--sp-6); }
.num { position: relative; height: var(--num-h, 400px); border-radius: var(--r-primary); overflow: hidden; padding: 24px; display: flex; flex-direction: column; }
.num--soft { background: var(--bg); }
.num--blue { background: linear-gradient(160deg, #00a3d4 0%, #007ca4 100%); }
.num--photo, .num--dark { color: #fff; }
.num__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
.num--photo::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(46,56,63,.5) 0%, rgba(46,56,63,.25) 100%); z-index: 1; }
/* Плитка соцпроектов в макете заметно темнее остальных фото (#1b2227 поверх кадра). */
.num--dark::after { content: ''; position: absolute; inset: 0; background: rgba(27,34,39,.55); z-index: 1; }
.num--photo > *:not(.num__bg), .num--dark > *:not(.num__bg) { position: relative; z-index: 2; }
.num__title { font-size: 28px; font-weight: 600; line-height: 35px; letter-spacing: -1px; max-width: 320px; }
.num__title--light { color: #fff; }
.num__title sup { font-size: 15px; }
.num__text { position: relative; z-index: 2; margin-top: auto; font-size: 16px; line-height: 24px; letter-spacing: -.4px; color: var(--gray-900); max-width: 200px; }
.num__text--light { color: rgba(255,255,255,.85); }
/* 3D-объекты в макете крупные и выходят за края плитки: звезда 383 (вылет вправо 70, сверху 54),
стеклянный дом 509 (вправо 165, сверху 31), ключи 289 (вправо 44, сверху 56). */
/* Квадрат принудительно: в макете все три объекта на квадратном холсте с прозрачными полями.
16.09.2026 в медиатеке лежали обрезанные версии (400x700 вместо 2000x2000), и при height: auto
звезда вырастала до 670 вместо 383 — «картинки сильно увеличены». object-fit: contain
вписывает любую загруженную картинку, не растягивая её. */
/* max-width: none — глобальное `img { max-width: 100% }` резало стеклянный дом с 509 до 428
(ширина плитки), и вылет вправо пропадал. height: auto нужен вместе с aspect-ratio:
иначе высоту задаёт атрибут height у картинки (1000), а не пропорция. */
.num__ill { position: absolute; right: -70px; top: 54px; width: 383px; max-width: none; height: auto; aspect-ratio: 1; object-fit: contain; z-index: 1; }
.num__ill--star { right: -70px; top: 54px; width: 383px; }
.num__ill--building { right: -165px; top: 31px; width: 509px; }
.num__ill--keys { right: -44px; top: -56px; width: 289px; }
/* Социальная ответственность: заголовок и лид столбиком, стрелки справа, карточки лентой. */
.soc-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 0 30px; margin-bottom: var(--sp-11); }
.soc-head .h2 { grid-column: 1; margin-bottom: 24px; }
.soc-head__lead { grid-column: 1; max-width: 880px; font-size: 18px; line-height: 27px; letter-spacing: -.38px; color: var(--gray-900); }
.soc-head__nav { grid-column: 2; grid-row: 1 / span 2; display: flex; gap: var(--sp-3); align-self: center; }
/* Дотянуть ленту до правой кромки окна. Прежняя запись calc(50% - 50 * var(--vw))
верна только тогда, когда родитель — сам контейнер: 50 % берётся от РОДИТЕЛЯ.
У .osob родитель — правая колонка сетки .osob-wrap (уже контейнера и сдвинута
вправо), и лента вылезала за окно на 193 точки — отсюда горизонтальная прокрутка
на страницах ЖК (найдено 04.09.2026). Считаем от контейнера, а не от родителя:
зазор справа от контента до кромки окна = (окно - ширина контента) / 2, где
ширина контента = min(--container, окно - два поля). От положения родителя
это уже не зависит, поэтому запись одна на все три ленты. */
/* Ленты «Социальная ответственность» и «Наши проекты» заканчиваются на правом краю контейнера,
вровень с шапкой, и карточки появляются из-за него (просьба Влада 16.09.2026). Раньше лента
уезжала до кромки окна отрицательным полем, как во фрейме макета. */
.socials { position: relative; }
.socials__track { display: flex; gap: var(--sp-6); overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; scrollbar-width: none; }
.socials__track::-webkit-scrollbar { display: none; }
.soc-card { flex: none; width: 480px; scroll-snap-align: start; } /* 480: третья карточка на 38 % за краем контейнера (Влад 16.09.2026) */
.soc-card__img, .soc-card img { width: 100%; height: 426px; object-fit: cover; border-radius: var(--r-primary); }
.soc-card__title { margin: 17px 0 10px; font-size: 18px; font-weight: 500; line-height: 1.3; letter-spacing: -.5px; }
.soc-card__text { font-size: 16px; line-height: 24px; letter-spacing: -.4px; color: var(--gray-900); }
/* Карточка с заполненной ссылкой ведёт на страницу проекта. */
.soc-card--link { display: block; color: inherit; text-decoration: none; }
.soc-card--link:hover .soc-card__title { color: var(--blue-900); }
.soc-card__more { display: inline-flex; align-items: center; gap: 6px; margin-top: 10px; font-size: 16px; letter-spacing: -.4px; color: var(--blue-900); }
/* Стрелка «Подробнее» — не фото карточки: правило .soc-card img выше растягивало её
на всю ширину. Значок в наборе нарисован шевроном вниз, вправо его разворачивает
поворот — так же сделаны стрелки каруселей и кнопок. */
.soc-card__more img { width: 9px; height: 4.5px; flex: none; border-radius: 0; object-fit: contain; transform: rotate(-90deg); }
/* Стрелка без хода: листать нечего — гасим. У «Особенностей» с тремя карточками
в кадре бледные стрелки читались как сломанные (Влад 12.09.2026) — там прячем. */
.icon-btn.is-idle { opacity: .4; cursor: default; }
.osob__nav .icon-btn.is-idle { display: none; }
.awards__track { display: flex; gap: var(--sp-6); overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; scrollbar-width: none; }
.awards__track::-webkit-scrollbar { display: none; }
.awards__track .award { flex: none; width: 315px; scroll-snap-align: start; }
/* макет 27: карточка 315×350 белая с рамкой, эмблема 183×151, год 14, подпись 18 */
.award {
display: flex; flex-direction: column; min-height: 350px; padding: 40px 24px 24px; text-align: center;
background: #fff; border: 1px solid var(--border); border-radius: var(--r-primary);
}
.award img { width: 183px; height: 151px; object-fit: contain; margin: 0 auto; }
.award__year { margin-top: auto; font-size: 14px; line-height: 1.4; letter-spacing: -.38px; color: #999ea2; }
.award__text { margin-top: 6px; font-size: 18px; line-height: 23px; letter-spacing: -.5px; color: var(--black-900); }
/* Проекты: лента карточек 1000×580, следующая уходит за правый край экрана (макет 27, y=4385). */
.projects { position: relative; }
.projects__track { display: flex; gap: var(--sp-6); overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; scrollbar-width: none; }
/* На телефоне и планшете лента по-прежнему до кромки экрана, как в мобильном фрейме макета (сверено с Владом 07–13.09). */
@media (max-width: 1000px) {
.socials, .projects, .osob { margin-right: calc((min(var(--container), 100 * var(--vw) - var(--gutter) * 2) - 100 * var(--vw)) / 2); }
.socials__track, .projects__track, .osob__track { padding-right: 60px; }
}
.projects__track::-webkit-scrollbar { display: none; }
.project { position: relative; flex: none; width: 1000px; height: 580px; border-radius: var(--r-primary); overflow: hidden; display: block; scroll-snap-align: start; }
.project__img { width: 100%; height: 100%; object-fit: cover; }
.project::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(46,56,63,0) 50%, rgba(46,56,63,.75) 100%); }
.project__foot { position: absolute; z-index: 2; left: 24px; right: 24px; bottom: 24px; display: flex; align-items: flex-end; justify-content: space-between; gap: var(--sp-5); }
.project__name { color: #fff; font-size: 28px; font-weight: 600; line-height: 1.2; letter-spacing: -1px; }
.project__note { margin-top: 10px; color: rgba(255,255,255,.85); font-size: 16px; line-height: 1.4; letter-spacing: -.4px; max-width: 470px; }
.project__badges { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
@media (max-width: 1100px) {
.dirs, .nums { grid-template-columns: repeat(2, 1fr); }
.nums__col { display: contents; }
.num { height: auto; min-height: 220px; }
.awards__track .award, .soc-card { width: 46vw; }
.project { width: 80vw; height: 46vw; }
.about-hero__media img { height: 360px; }
}
@media (max-width: 700px) {
.dirs, .nums { grid-template-columns: 1fr; }
.awards__track .award, .soc-card { width: 84vw; }
.project { width: 88vw; height: 52vw; min-height: 320px; }
}
/* ==========================================================================
Коммерция
========================================================================== */
.page-hero--slider .page-hero__nav { position: absolute; right: 0; bottom: 10px; display: flex; gap: 10px; }
.page-hero__badges { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; }
.km-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-6); }
.km-card { position: relative; border-radius: var(--r-primary); overflow: hidden; padding: 24px; min-height: 300px; display: flex; flex-direction: column; }
.km-card--soft { background: var(--bg); }
.km-card--photo { color: #fff; }
.km-card__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
.km-card--photo::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(46,56,63,.35) 0%, rgba(46,56,63,.7) 100%); z-index: 1; }
.km-card--photo > *:not(.km-card__bg) { position: relative; z-index: 2; }
.km-card__title { margin: 0 0 12px; font-size: 22px; font-weight: 600; line-height: 1.25; letter-spacing: -.8px; max-width: 320px; }
.km-card__text { font-size: 14px; line-height: 1.5; letter-spacing: -.4px; color: var(--gray-900); max-width: 330px; }
.km-card__text--light { color: rgba(255,255,255,.9); margin-top: auto; margin-left: auto; text-align: right; }
.km-card__text--bottom { margin-top: auto; }
.km-card__ill { position: absolute; right: 24px; top: 24px; width: 120px; height: auto; z-index: 1; }
.km-card__ill--veranda { top: auto; bottom: 0; right: 40%; width: 210px; }
.km-card--row { flex-direction: row; gap: var(--sp-5); align-items: flex-start; }
.km-card--row .km-card__title { max-width: 180px; }
.km-card--tall { min-height: 300px; }
.otdelka { position: relative; border-radius: var(--r-primary); overflow: hidden; }
.otdelka img { width: 100%; height: auto; }
/* Само правило ниже, в блоке Коммерции: тут оставалась только вторая копия с белым фоном. */
.otdelka__price sup { font-size: 9px; }
.consult__img--building { width: 240px; }
@media (max-width: 1100px) {
.km-grid { grid-template-columns: 1fr; }
.km-card--row { flex-direction: column; }
.km-card__ill--veranda { position: static; width: 180px; margin-left: auto; }
}
/* Клиентам: партнёры и этапы */
.offer__text--split { justify-content: space-between; }
.offer__bottom { display: flex; flex-direction: column; gap: 16px; }
.offer__bottom p { font-size: 18px; line-height: 27px; letter-spacing: -.4px; color: var(--gray-900); }
/* Фильтры партнёров в макете — одна строка: что не влезло, уезжает вправо
(в макете 37 ряд обрезан краем и рядом кнопка прокрутки). */
.tabs--filters { flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; margin-bottom: var(--sp-6); }
.tabs--filters::-webkit-scrollbar { display: none; }
.tabs--filters .tab { flex: 0 0 auto; }
/* В макете фильтры того же роста, что и обычные табы: пилюля 40, текст 16, поле 16
(«Корпус 1» 97 при тексте 65). Раньше стояли 14/8 — ряд выходил на 36. */
.tabs--filters .tab { font-size: 16px; padding: 9px 16px; }
/* Сегмент-контрол: серая капсула 48 с белой активной пилюлей 40 внутри.
Макет: галерея 374×48 (пилюля 127×40), отделка 427×48 (пилюля 140×40). */
.tabs--segment {
display: inline-flex; align-items: center; gap: 0;
background: var(--bg); border-radius: var(--r-primary); padding: 4px; margin-bottom: 0;
}
.tabs--segment .tab { background: transparent; color: var(--gray-900); }
.tabs--segment .tab:hover { background: rgba(255, 255, 255, .5); }
.tabs--segment .tab.is-active { background: #fff; color: var(--black-900); }
/* Карточка партнёра по макету 37: 315x300, поля 24, логотип 60, оффер 18,
ряды с тем же шагом 20, что и колонки. */
.partners__empty { padding: 40px 0; text-align: center; font-size: 18px; letter-spacing: -.5px; color: var(--gray-900); }
.partners { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-6); }
.partner {
display: flex; flex-direction: column; min-height: 300px; padding: 24px; text-align: center;
background: #fff; border: 1px solid var(--border); border-radius: var(--r-primary);
}
/* Плитка логотипа шире макетных 60x60: у половины партнёров знак горизонтальный
(KERAMA MARAZZI, Мосплитка, Стальная линия) и в квадрате 60 превращался в точку.
Высота осталась макетной, ширина — во всю карточку. */
.partner__logo { width: 100%; height: 60px; margin: 0 auto 16px; }
.partner__logo img { width: 100%; height: 100%; object-fit: contain; border-radius: inherit; }
.partner__name { font-size: 14px; font-weight: 600; letter-spacing: -.3px; }
.partner__cat { margin-top: 6px; font-size: 14px; letter-spacing: -.38px; color: var(--gray-900); }
.partner__offer { margin: 24px 0 16px; font-size: 18px; font-weight: 500; line-height: 1.4; letter-spacing: -.5px; color: var(--blue-900); }
.partner .btn--soft { margin-top: auto; }
/* Кнопка карточки в макете 267x44 — отсюда поля 12, а не 11. */
.btn--soft { width: 100%; background: var(--bg); color: var(--black-900); padding: 12px 16px; font-size: 14px; font-weight: 500; letter-spacing: -.4px; }
.btn--soft:hover { background: var(--bg-btn-hover); }
.stage { display: grid; grid-template-columns: 430px 1fr; gap: var(--sp-6); padding: 32px 0; border-top: 1px solid var(--border); }
.stage__num { font-size: 12px; font-weight: 600; letter-spacing: .4px; color: var(--blue-900); text-transform: uppercase; }
.stage__title { margin: 8px 0 0; font-size: 22px; font-weight: 600; line-height: 1.25; letter-spacing: -.8px; }
.stage__steps { display: flex; flex-direction: column; }
.step { display: flex; gap: var(--sp-5); padding: 20px 0; }
.step + .step { border-top: 1px solid var(--border); }
.step__n { flex: 0 0 32px; width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--blue-100); color: var(--blue-900); font-size: 14px; font-weight: 600; }
.step__title { font-size: 16px; font-weight: 500; line-height: 1.4; letter-spacing: -.5px; }
.step__note { margin: 10px 0; font-size: 14px; line-height: 1.5; letter-spacing: -.4px; color: var(--gray-900); }
.step__body .article__list { margin-bottom: 0; }
.step__body .article__list li { font-size: 14px; color: var(--gray-900); }
/* Примечание и документы — редакторы со ссылками (24.09.2026): абзацы и ссылки внутри. */
.step__note p + p { margin-top: 8px; }
.step__note a, .step__docs a { color: var(--blue-900); text-decoration: underline; text-underline-offset: 2px; }
.step__note a:hover, .step__docs a:hover { text-decoration: none; }
.step__docs p { margin: 10px 0 0; font-size: 14px; line-height: 1.5; color: var(--gray-900); }
@media (max-width: 1100px) {
.partners { grid-template-columns: repeat(2, 1fr); }
.stage { grid-template-columns: 1fr; }
}
@media (max-width: 700px) { .partners { grid-template-columns: 1fr; } }
.consult {
position: relative; display: flex; align-items: center; overflow: hidden;
background: linear-gradient(132deg, #e6f2f6 35%, #cce5ed 100%);
border-radius: var(--r-primary); padding: 40px; margin-top: 80px; min-height: 200px;
}
.consult__title { margin: 0 0 20px; font-size: 28px; font-weight: 600; line-height: 1.25; letter-spacing: -1px; }
.consult__img { position: absolute; right: 40px; top: 50%; transform: translateY(-50%); width: 300px; height: auto; }
/* Виджет калькулятора в макете шире полотна (1395 против 1320) и без рамки. */
.calc { border-radius: var(--r-primary); overflow: hidden; margin: 0 -37px; }
.calc img { width: 100%; height: auto; }
/* Свой калькулятор — в полотне, без обрезки (подсказки и тени должны выходить за край). */
.calc--own, .mortgage--own { margin: 0; min-height: 0; overflow: visible; }
/* Свой ипотечный калькулятор (inc/mortgage.php): параметры слева 320, банки справа.
Строка банка по образцу dvizh.io: логотип, банк и подпись, платёж крупно,
под ними полная стоимость кредита и «от X %». */
.mcalc { display: grid; grid-template-columns: 320px 1fr; gap: 40px; align-items: start; }
.mcalc__params { display: flex; flex-direction: column; gap: 12px; }
.mcalc__field { position: relative; display: block; background: #fff; border: 1px solid var(--border); border-radius: var(--r-secondary); padding: 10px var(--sp-5) 9px; cursor: text; }
.mcalc__field:focus-within { border-color: var(--blue-900); }
.mcalc__label { display: block; font-size: 12px; line-height: 1.3; letter-spacing: -.2px; color: var(--gray-900); }
.mcalc__input { display: block; width: 100%; border: 0; padding: 0; margin: 2px 0 0; background: none; font: inherit; font-size: 16px; line-height: 1.4; letter-spacing: -.4px; color: var(--black-900); }
.mcalc__input:focus { outline: none; }
.mcalc__pct { position: absolute; right: var(--sp-5); top: 50%; transform: translateY(-50%); font-size: 14px; color: var(--gray-900); }
.mcalc__range { -webkit-appearance: none; appearance: none; width: calc(100% - 32px); margin: -2px 16px 4px; height: 2px; background: var(--border); border-radius: 2px; cursor: pointer; }
.mcalc__range::-webkit-slider-thumb { -webkit-appearance: none; width: 16px; height: 16px; border-radius: 50%; background: var(--blue-900); border: 0; }
.mcalc__range::-moz-range-thumb { width: 16px; height: 16px; border-radius: 50%; background: var(--blue-900); border: 0; }
.mcalc__range::-moz-range-track { height: 2px; background: var(--border); }
.mcalc__submit { width: 100%; margin-top: 8px; }
.mcalc__hint { margin: 4px 0 0; font-size: 12px; line-height: 1.4; color: var(--gray-700); }
.mcalc__offers { min-width: 0; }
.mcalc__chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 20px; }
.mcalc__chip { padding: 8px 14px; font-size: 14px; }
.mcalc__list { display: flex; flex-direction: column; gap: 12px; }
.mcalc__row {
display: grid; grid-template-columns: 48px minmax(0, 1fr) auto; grid-template-rows: auto auto; gap: 6px 20px; align-items: center;
background: #fff; border: 1px solid var(--border); border-radius: var(--r-primary); padding: 16px 24px;
}
.mcalc__logo { grid-row: 1 / 3; align-self: start; width: 48px; height: 48px; border-radius: 12px; object-fit: cover; background: var(--bg); }
.mcalc__logo--empty { display: flex; align-items: center; justify-content: center; font-size: 18px; font-weight: 600; color: var(--blue-900); background: var(--blue-100); }
.mcalc__who { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.mcalc__name { font-size: 16px; font-weight: 500; letter-spacing: -.4px; color: var(--black-900); }
.mcalc__sub { font-size: 13px; line-height: 1.4; letter-spacing: -.2px; color: var(--gray-900); }
.mcalc__pay { font-size: 20px; font-weight: 600; letter-spacing: -.6px; color: var(--black-900); white-space: nowrap; text-align: right; }
.mcalc__pay small { font-size: 14px; font-weight: 400; color: var(--gray-900); }
.mcalc__psk { grid-column: 2; font-size: 12px; letter-spacing: -.2px; color: var(--gray-700); }
.mcalc__rate { grid-column: 3; font-size: 15px; letter-spacing: -.3px; color: var(--black-900); white-space: nowrap; text-align: right; }
.mcalc__row--unfit { grid-template-rows: auto; }
.mcalc__row--unfit .mcalc__logo { grid-row: auto; align-self: center; filter: grayscale(1); opacity: .8; }
.mcalc__reason { font-size: 13px; letter-spacing: -.2px; color: var(--gray-900); text-align: right; }
.mcalc__more { margin-top: 16px; padding: 0; background: none; border: 0; font: inherit; font-size: 15px; letter-spacing: -.3px; color: var(--blue-900); cursor: pointer; }
.mcalc__more::after { content: ''; display: inline-block; width: 7px; height: 7px; margin: 0 0 3px 8px; border: solid currentColor; border-width: 0 1.5px 1.5px 0; transform: rotate(45deg); }
.mcalc__more.is-open::after { transform: rotate(-135deg); margin-bottom: -2px; }
.mcalc__unfit { margin-top: 36px; }
.mcalc__subtitle { margin: 0 0 16px; font-size: 16px; font-weight: 600; letter-spacing: -.4px; }
.mcalc__empty { margin: 0; padding: 24px; background: var(--bg); border-radius: var(--r-primary); font-size: 14px; color: var(--gray-900); }
@media (max-width: 1100px) {
.mcalc { grid-template-columns: 280px 1fr; gap: 24px; }
}
@media (max-width: 900px) {
.mcalc { grid-template-columns: 1fr; }
}
@media (max-width: 700px) {
.mcalc__row { grid-template-columns: 40px minmax(0, 1fr); padding: 14px 16px; gap: 8px 12px; }
.mcalc__logo { width: 40px; height: 40px; grid-row: 1; }
.mcalc__pay { grid-column: 1 / -1; text-align: left; }
.mcalc__psk { grid-column: 1 / -1; }
.mcalc__rate { grid-column: 1 / -1; text-align: left; }
.mcalc__row--unfit { grid-template-columns: 40px minmax(0, 1fr); }
.mcalc__reason { grid-column: 1 / -1; text-align: left; }
.mcalc__chips { flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; margin: 0 -16px 16px; padding: 0 16px; }
.mcalc__chips::-webkit-scrollbar { display: none; }
.mcalc__chip { flex: 0 0 auto; }
}
/* Сетка вопросов из макета: колонка 539 (карточка внутри 427) + 761 под список. */
.faq { display: grid; grid-template-columns: 539px 1fr; gap: var(--sp-6); align-items: stretch; }
.faq .h2 { font-size: 44px; }
.faq__side { display: flex; flex-direction: column; gap: 40px; }
.faq__ask { display: flex; gap: var(--sp-5); background: var(--bg); border-radius: var(--r-primary); padding: 20px; margin-top: auto; max-width: 427px; }
/* Голубой круг и крупный план, как в макете (Влад 16.09.2026): картинка внутри обёртки увеличена,
обёртка режет кругом. */
.faq__ask-photo { flex: none; width: 80px; height: 80px; border-radius: 50%; overflow: hidden; background: #e1ecf4; }
.faq__ask-photo img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; transform: translate(6%, 8%) scale(1.18); transform-origin: 50% 0; }
.faq__ask-title { font-size: 16px; font-weight: 500; line-height: 1.35; letter-spacing: -.5px; }
.faq__ask-text { margin-top: 6px; font-size: 14px; line-height: 1.4; letter-spacing: -.4px; color: var(--gray-900); }
.faq__ask-row { display: flex; align-items: center; gap: 8px; margin-top: 16px; }
.faq__ask-row .social { width: 40px; height: 40px; }
.faq__ask-row .social img { width: 14px; height: auto; }
.faq__ask-row .round-ic { width: 40px; height: 40px; }
.faq__ask-row .round-ic img { width: 40px; height: 40px; }
/* Вопросы в макете 31/33/35: открытый пункт не синий, а такой же светлый —
выделяется только круглая кнопка со стрелкой вверх. Подпись 20px. */
.acc--faq .acc__btn { gap: var(--sp-5); }
.acc--faq .acc__label { font-size: 20px; font-weight: 500; line-height: 1.3; letter-spacing: -.5px; }
.acc--faq .acc__item.is-open { background: var(--bg); }
.acc--faq .acc__item.is-open .acc__label { color: var(--black-900); }
.acc--faq .acc__toggle { background: #fff; border-radius: var(--r-secondary); padding: 0; width: 36px; height: 36px; }
.acc--faq .acc__toggle img { width: 16px; height: 16px; }
.acc--faq .acc__item.is-open .acc__toggle { background: var(--blue-900); }
.acc--faq .acc__item.is-open .acc__toggle img { transform: rotate(180deg); filter: brightness(0) invert(1); }
.acc--faq .acc__panel { color: var(--black-900); }
@media (max-width: 1100px) {
.offer, .faq { grid-template-columns: 1fr; }
.offer__text { min-height: 0; }
.offer__media { height: 320px; }
.feats { grid-template-columns: 1fr; }
.consult__img { position: static; transform: none; width: 200px; margin-left: auto; }
.consult { flex-direction: column; align-items: flex-start; }
.page-hero { min-height: 380px; padding-bottom: 60px; }
.crumbs--light { margin-bottom: 40px; }
.faq .h2 { font-size: 32px; }
.faq__ask { max-width: none; }
.calc { margin: 0; }
.page-hero.page-hero--light { min-height: 0; padding-bottom: 40px; }
.page-hero__deco { position: static; width: 220px; margin: 0 auto; display: block; }
}
/* ==========================================================================
Статья (детальная новости / акции)
========================================================================== */
.article__h1 { margin-bottom: var(--sp-11); }
.article { display: grid; grid-template-columns: 800px 1fr; gap: var(--sp-11); align-items: start; }
.article__meta { display: flex; align-items: center; gap: var(--sp-6); margin-bottom: var(--sp-6); font-size: 14px; letter-spacing: -.4px; color: var(--gray-900); }
.article__meta-item, .article__share { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; letter-spacing: -.4px; color: var(--gray-900); }
/* Иконки не сжимаются: в тесном ряду iPhone ужимал картинку по ширине и Safari
обрезал SVG справа вместо масштаба (снимок Влада 01.10.2026). У кнопки свои поля
Safari 2px 6px — снимаем, иначе «Поделиться» стоит не по краю и ест место ряда. */
/* Настоящая причина обрезки (01.10.2026): `.article__body img` скругляет углы фото статьи,
а строка мета лежит внутри .article__body — иконку 18x18 скругляло в круг, и кружки
«Поделиться» по углам срезались. Иконкам скругление и max-width не нужны. */
.article__meta img, .article__share img { flex: 0 0 18px; width: 18px; height: 18px; }
.article__body .article__meta img { max-width: none; border-radius: 0; } /* сильнее `.article__body img` ниже по файлу */
.article__share { padding: 0; -webkit-appearance: none; appearance: none; background: none; border: 0; }
.article__share { margin-left: auto; white-space: nowrap; }
.article__share:hover { color: var(--blue-900); }
.article__cover { border-radius: var(--r-primary); overflow: hidden; margin-bottom: 32px; }
/* Макет 13–16 (новость и акция): серая карточка 800 шириной, сверху полоса 52 со строкой
«дата · время чтения · Поделиться» (поля 20), под ней обложка во всю ширину карточки. */
.article__lead { background: var(--bg); border-radius: var(--r-primary); overflow: hidden; margin-bottom: 32px; }
.article__lead .article__meta { min-height: 52px; margin: 0; padding: 0 20px; }
.article__lead .article__cover { margin: 0; }
.article__cover img { width: 100%; height: 450px; object-fit: cover; }
.article__body p { font-size: 16px; line-height: 1.5; letter-spacing: -.5px; margin-bottom: 20px; }
.article__body p a { color: var(--blue-900); }
/* Сноска акции — поле «Сноска под текстом акции»: кегль приходит inline из поля, курсив и
жирность классами. До 19.09.2026 сноской кодом считался последний абзац текста. */
.article__footnote { margin-top: 24px; line-height: 1.45; color: var(--gray-900); }
.article__footnote p + p { margin-top: 8px; }
.article__footnote--italic { font-style: italic; }
.article__footnote--bold { font-weight: 600; }
.article__body p a:hover { text-decoration: underline; }
.article__body h2 { font-size: 32px; font-weight: 600; line-height: 1.2; letter-spacing: -1px; margin: 40px 0 20px; }
.article__body h3 { font-size: 26px; font-weight: 600; line-height: 1.25; letter-spacing: -.8px; margin: 36px 0 16px; }
.article__body h4 { font-size: 20px; font-weight: 600; line-height: 1.3; letter-spacing: -.7px; margin: 32px 0 16px; }
.article__body ol { counter-reset: n; display: flex; flex-direction: column; gap: 12px; margin: 0 0 24px; padding: 0; list-style: none; }
.article__body ol li { counter-increment: n; position: relative; padding-left: 32px; font-size: 16px; line-height: 1.5; letter-spacing: -.5px; }
.article__body ol li::before { content: counter(n) "."; position: absolute; left: 0; color: var(--blue-900); font-weight: 500; }
.article__list { display: flex; flex-direction: column; gap: 10px; margin: 0 0 24px; }
.article__list li { position: relative; padding-left: 24px; font-size: 16px; line-height: 1.5; letter-spacing: -.5px; }
.article__list li::before { content: ''; position: absolute; left: 6px; top: 10px; width: 6px; height: 6px; border: 1.5px solid var(--blue-900); border-radius: 50%; }
/* Списки и картинки из редактора WordPress приходят без классов темы:
правила дублируем на голые ul/img, иначе текст акции терял оформление. */
.article__body ul { display: flex; flex-direction: column; gap: 10px; margin: 0 0 24px; padding: 0; list-style: none; }
.article__body ul li { position: relative; padding-left: 24px; font-size: 16px; line-height: 1.5; letter-spacing: -.5px; }
.article__body ul li::before { content: ''; position: absolute; left: 6px; top: 10px; width: 6px; height: 6px; border: 1.5px solid var(--blue-900); border-radius: 50%; }
.article__body img { max-width: 100%; height: auto; border-radius: var(--r-primary); }
.article__body figure { margin: 24px 0; }
.article__body figcaption { margin-top: 8px; font-size: 14px; color: var(--gray-900); }
.article__body blockquote { margin: 24px 0; padding: 20px 24px; background: var(--bg); border-radius: var(--r-primary); }
.article__body blockquote p:last-child { margin-bottom: 0; }
.article__pair { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-6); margin: 28px 0; }
.article__ph { height: 320px; background: var(--bg); border-radius: var(--r-primary); }
.article__aside { display: flex; flex-direction: column; gap: var(--sp-6); position: sticky; top: 100px; }
.side-card { position: relative; border-radius: var(--r-primary); padding: 24px; overflow: hidden; }
.side-card--blue { background: linear-gradient(132deg, #e6f2f6 35%, #cce5ed 100%); }
.side-card--gray { background: var(--bg); }
.side-card--list { background: #fff; border: 1px solid var(--border); padding: 20px; }
.side-card__title { margin: 0 0 10px; font-size: 20px; font-weight: 600; line-height: 1.3; letter-spacing: -.7px; }
.side-card__text { font-size: 14px; line-height: 1.45; letter-spacing: -.4px; color: var(--gray-900); margin-bottom: 20px; max-width: 260px; }
/* В макете снимок обрезан краями карточки, видна верхняя часть фигуры */
/* Иллюстрация карточки — стеклянные наушники из макета 06.09 (стр. 14/16): квадрат 225 по
центру высоты, правый край на 13 за кромкой карточки (в макете 1168..1393 при карточке
920..1380). До 19.09.2026 тут стояло фото менеджера из старой версии макета, кадрированное cover. */
.side-card__manager { position: absolute; right: -13px; top: 50%; transform: translateY(-50%); width: 225px; height: 225px; object-fit: contain; object-position: center; }
.side-card__tg { position: absolute; right: 8px; bottom: 8px; width: 128px; height: 120px; object-fit: contain; }
.side-card--blue, .side-card--gray { min-height: 200px; }
.side-card--blue .side-card__text, .side-card--gray .side-card__text { max-width: 240px; }
.jk-row { display: flex; align-items: center; gap: var(--sp-4); padding: 10px; border-radius: var(--r-secondary); transition: background-color .15s ease; }
.jk-row:hover { background: var(--bg); }
.jk-row > img { width: 92px; height: 60px; object-fit: cover; border-radius: 8px; }
.jk-row__body { flex: 1; min-width: 0; }
.jk-row__name { font-size: 16px; font-weight: 500; letter-spacing: -.5px; }
.jk-row__meta { font-size: 13px; letter-spacing: -.4px; color: var(--gray-900); margin-top: 2px; }
.jk-row__arrow { flex: 0 0 auto; }
.jk-row__arrow img { width: 9.83px; height: 4.83px; transform: rotate(-90deg); }
.section--other { margin-top: 80px; }
@media (max-width: 1200px) {
.article { grid-template-columns: 1fr; }
.article__aside { position: static; flex-direction: row; flex-wrap: wrap; }
.article__aside .side-card { flex: 1 1 300px; }
}
@media (max-width: 700px) { .article__pair { grid-template-columns: 1fr; } .article__ph { height: 200px; } }
/* Плитка акций: фото на всю карточку, затемнение и подпись снизу */
.promo-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-6); }
.promo-tile { position: relative; height: 400px; border-radius: var(--r-primary); overflow: hidden; display: block; }
.promo-tile__img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s ease; }
.promo-tile:hover .promo-tile__img { transform: scale(1.03); }
.promo-tile::after {
content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 55%;
background: linear-gradient(180deg, rgba(46, 56, 63, 0) 0%, rgba(46, 56, 63, .75) 100%);
}
.promo-tile__foot {
position: absolute; z-index: 2; left: 20px; right: 20px; bottom: 20px;
display: flex; align-items: flex-end; justify-content: space-between; gap: var(--sp-4);
}
/* Подпись в макете 18/24 (строки на 2263 и 2287). */
.promo-tile__title { color: #fff; font-size: 18px; font-weight: 500; line-height: 1.35; letter-spacing: -.5px; }
.promo-tile__arrow { flex: 0 0 auto; background: var(--white-200); backdrop-filter: blur(10px); box-shadow: none; }
.promo-tile__arrow img { transform: rotate(-90deg); filter: brightness(0) invert(1); }
@media (max-width: 1100px) { .promo-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 700px) { .promo-grid { grid-template-columns: 1fr; } .news--grid { grid-template-columns: 1fr; } }
.switch { display: inline-flex; background: var(--bg); border-radius: var(--r-secondary); padding: 4px; }
.switch__btn {
padding: 11px 40px; border-radius: 8px; font-size: 16px; font-weight: 500;
line-height: 1.4; letter-spacing: -.5px; color: var(--gray-900);
transition: background-color .15s ease, color .15s ease;
}
.switch__btn.is-active { background: #fff; color: var(--black-900); box-shadow: 0 2px 6px rgba(46, 56, 63, .06); }
.switch--center { display: flex; width: max-content; margin: 0 auto var(--sp-11); }
/* Контакты: в макете 25 переключатель в шапке страницы, в мобильном 24 —
полосой над картой; в разметке оба, лишний прячем. */
.switch--map { display: none; }
/* ==========================================================================
Контакты
========================================================================== */
.contacts { display: grid; grid-template-columns: 400px 1fr; gap: var(--sp-6); align-items: stretch; }
.office { background: var(--bg); border-radius: var(--r-primary); padding: 20px; }
.office__title { margin: 10px 10px 20px; font-size: 28px; font-weight: 600; line-height: 1.2; letter-spacing: -1px; }
.office__card { background: #fff; border-radius: var(--r-primary); padding: 24px; }
.office__phone { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-5); margin-bottom: 24px; }
.office__label { font-size: 14px; line-height: 1.4; letter-spacing: -.4px; color: var(--gray-900); }
.office__number { font-size: 20px; font-weight: 600; line-height: 1.3; letter-spacing: -.7px; margin-top: 4px; }
.office__messengers { display: flex; gap: 8px; }
.round-ic { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: var(--r-full); overflow: hidden; }
.round-ic img { width: 44px; height: 44px; }
.office__list { display: flex; flex-direction: column; gap: 20px; }
.office__item { display: flex; align-items: flex-start; gap: var(--sp-4); }
.office__ic { flex: 0 0 44px; width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; background: #fff; border: 1px solid var(--border); border-radius: var(--r-secondary); }
.office__ic img { width: 24px; height: 24px; }
.office__value { font-size: 16px; line-height: 1.5; letter-spacing: -.5px; margin-top: 2px; }
.office__value a:hover { color: var(--blue-900); }
.office__cta { width: 100%; margin-top: 24px; }
.contacts__map { position: relative; border-radius: var(--r-primary); overflow: hidden; background: var(--bg); min-height: 538px; }
.contacts__map img { width: 100%; height: 100%; object-fit: cover; }
/* Вкладки «Карта» и «3D-тур» занимают одну и ту же плашку. */
.contacts__pane { position: absolute; inset: 0; }
.contacts__pane .embed { display: block; width: 100%; height: 100%; border: 0; }
.mailboxes { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-6); margin-top: var(--sp-6); }
.mailbox { background: var(--bg); border-radius: var(--r-primary); padding: 24px; transition: background-color .15s ease; }
.mailbox:hover { background: var(--bg-btn-hover); }
.mailbox__ic { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; background: #fff; border-radius: var(--r-secondary); margin-bottom: 20px; }
.mailbox__ic img { width: 24px; height: 24px; }
.mailbox__mail { font-size: 20px; font-weight: 600; line-height: 1.3; letter-spacing: -.7px; }
.mailbox__note { margin-top: 8px; font-size: 16px; line-height: 1.4; letter-spacing: -.5px; color: var(--gray-900); }
@media (max-width: 1100px) {
.contacts { grid-template-columns: 1fr; }
.contacts__map { min-height: 360px; }
.switch--head { display: none; }
.switch--map { display: flex; margin-bottom: 16px; }
.switch--map .switch__btn { flex: 1 1 0; padding: 11px 0; }
.mailboxes { grid-template-columns: 1fr; }
.page-head { flex-direction: column; align-items: flex-start; gap: 16px; }
}
/* ==========================================================================
Подвал
========================================================================== */
.footer { background: var(--bg); padding: 110px 0 40px; }
.footer__inner { display: grid; grid-template-columns: 315px 1fr; gap: 80px; align-items: start; position: relative; }
.footer__inner::before { content: ''; position: absolute; left: 355px; top: -110px; bottom: -40px; width: 1px; background: var(--border); }
.footer__left { display: flex; flex-direction: column; gap: var(--sp-11); }
.footer__logo { width: 219px; height: 40px; }
.footer__box {
position: relative; display: flex; flex-direction: column; justify-content: space-between;
height: 170px; background: #fff; border-radius: var(--r-primary); padding: 20px; overflow: hidden;
}
.footer__box + .footer__box { margin-top: 10px; }
.footer__box b { display: block; font-size: 16px; font-weight: 500; line-height: 1.4; letter-spacing: -.5px; }
.footer__box p { font-size: 16px; line-height: 1.4; letter-spacing: -.5px; color: var(--gray-900); }
.footer__box--phone > div:first-child { width: 160px; display: flex; flex-direction: column; gap: 8px; }
.footer__box .btn { align-self: flex-start; }
/* Маскот в макете 141×188 на x=246 при карточке 60..375 — выходит за правый край на 12. */
.footer__box-img { position: absolute; right: -12px; bottom: -17px; width: 141px; height: 188px; object-fit: contain; }
.footer__box--social > div:first-child { display: flex; flex-direction: column; gap: 4px; }
.footer__socials { display: flex; align-items: center; gap: 8px; }
.footer__socials .social { flex: 1; height: 44px; }
.footer__socials .social img { width: 16px; height: auto; }
.footer__right { display: flex; flex-direction: column; justify-content: space-between; gap: 60px; min-height: 430px; }
.footer__cols { display: flex; gap: 30px; }
.footer__col { flex: 1; display: flex; flex-direction: column; gap: var(--sp-5); }
.footer__col b { font-size: 16px; font-weight: 400; line-height: 1.4; letter-spacing: -.5px; }
.footer__col ul { display: flex; flex-direction: column; gap: 12px; color: var(--gray-900); }
.footer__col li { font-size: 16px; line-height: 1.4; letter-spacing: -.5px; }
.footer__col a:hover { color: var(--blue-900); }
.footer__col--plain { gap: var(--sp-5); }
/* Тот же серый, что у ссылок в колонках с заголовком: раньше третья колонка была
чёрной целиком и читалась как набор заголовков (замечание Влада 07.09.2026).
Чёрным в подвале остаются только названия колонок. */
.footer__col--plain a { font-size: 16px; font-weight: 400; line-height: 1.4; letter-spacing: -.5px; color: var(--gray-900); }
.footer__bottom { display: flex; align-items: flex-end; gap: 20px; }
.footer__legal { width: 288px; display: flex; flex-direction: column; gap: 8px; color: var(--gray-900); font-size: 16px; line-height: 1.5; letter-spacing: -.5px; }
.footer__info { flex: 1; display: flex; flex-direction: column; gap: var(--sp-5); }
.footer__info b { font-size: 16px; font-weight: 500; letter-spacing: -.5px; color: var(--black-900); }
.footer__info p { font-size: 16px; line-height: 1.5; letter-spacing: -.5px; color: var(--gray-900); }
/* ==========================================================================
Адаптив (макет только под десктоп 1440 — ниже пропорциональная деградация)
========================================================================== */
@media (max-width: 1439px) {
:root { --gutter: 32px; }
.about__cell--wide { width: calc(50% - 10px); }
.about__cell--sm { width: calc(25% - 15px); }
.about__cell--wide > img.about__photo { left: auto; right: 0; }
.footer__inner::before { display: none; }
}
@media (max-width: 1100px) {
.hero__grid { grid-template-columns: 1fr; }
.hero__aside { flex-direction: row; }
.hero__aside > * { flex: 1; }
/* Высота первого экрана считается от окна только там, где слайдер и карточки
стоят рядом. В одну колонку они в экран не помещаются, поэтому здесь
возвращаются макетные высоты. */
.slider { height: 600px; aspect-ratio: auto; max-height: none; }
.hero__aside { height: auto; }
.promo { height: 380px; }
.promo-white { height: 200px; }
.lead, .more { grid-template-columns: 1fr; }
.lead__img { position: static; margin: 20px auto 0; }
.askbar { grid-template-columns: 1fr; gap: 24px; }
.askbar__img { position: static; width: 260px; height: 260px; margin: 0 auto; }
.askbar__form { width: 100%; }
.flats { grid-template-columns: repeat(2, 1fr); }
.news { grid-template-columns: repeat(2, 1fr); }
.buy { grid-template-columns: 1fr; }
.about__cell--wide, .about__cell--sm { width: calc(50% - 10px); }
.footer__inner { grid-template-columns: 1fr; gap: 40px; }
.h2 { font-size: 32px; letter-spacing: -1px; }
.jk--half { width: 100%; }
/* Здесь карточки уже в одну колонку и одинаковой ширины, значит и высота фото должна
быть общей. Иначе Ботаника (широкая карточка) стоит заметно выше Атмосферы и Шоколада —
на десктопе это оправдано разной шириной, тут нет. Влад, 31.08.2026.
Селектор с body.admin-bar нужен, чтобы перебить более специфичное десктопное правило. */
.jk--wide .jk__media,
body.admin-bar .jk--wide .jk__media { height: 420px; min-height: 0; }
.nav { display: none; }
}
@media (max-width: 700px) {
:root { --gutter: 16px; }
.hero__aside { flex-direction: column; }
.flats, .news { grid-template-columns: 1fr; }
.about__cell--wide, .about__cell--sm { width: 100%; }
.section__head, .about__head { flex-direction: column; align-items: flex-start; gap: 16px; }
.about__head .h2, .about__head p, .more__lead { width: 100%; }
.footer__cols { flex-wrap: wrap; }
.footer__col { flex: 1 1 45%; }
.footer__bottom { flex-direction: column; align-items: flex-start; }
.footer__legal { width: 100%; }
}
/* ==========================================================================
Отделка, способы покупки, ход строительства, подписка (страница ЖК)
========================================================================== */
.finish { position: relative; display: none; border-radius: var(--r-primary); overflow: hidden; }
.finish.is-active { display: block; }
.finish__img { width: 100%; height: 700px; object-fit: cover; }
/* Точка 32 с подписью ПОД ней: в макете карточка 159×56, текст 14 в две строки по центру. */
.finish__point { position: absolute; transform: translate(-50%, -50%); display: flex; flex-direction: column; align-items: center; gap: var(--sp-4); }
.finish__dot {
display: flex; align-items: center; justify-content: center;
width: 32px; height: 32px; border-radius: var(--r-full);
background: #fff; color: var(--blue-900);
font-size: 20px; line-height: 1; box-shadow: 0 2px 8px rgba(46, 56, 63, .18);
}
.finish__hint {
max-width: 180px; text-align: center;
background: #fff; border-radius: var(--r-secondary); padding: 9px 12px;
font-size: 14px; line-height: 1.2; letter-spacing: -.4px;
box-shadow: 0 4px 16px rgba(46, 56, 63, .12);
}
/* Плашка цены в макете 169×44, текст 18. */
/* Полупрозрачная, как на мобилке (Евгения 16.09.2026). Тёмное стекло, а не белое 20 %:
на десктопе под плашкой светлое фото, белый текст на белом стекле пропал бы. */
.finish__price {
position: absolute; left: 20px; bottom: 20px;
background: rgba(46, 56, 63, .5); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
color: #fff; border-radius: var(--r-secondary); padding: 11px 16px;
font-size: 18px; font-weight: 500; letter-spacing: -.5px;
}
/* Стрелки поверх кадра и точки-индикаторы снизу — как в макете. */
.finish__nav {
position: absolute; left: 20px; right: 20px; top: 50%; transform: translateY(-50%);
display: flex; justify-content: space-between; pointer-events: none;
}
.finish__nav .icon-btn {
pointer-events: auto; width: 48px; height: 48px; padding: 0;
background: rgba(46, 56, 63, .8); box-shadow: none;
}
.finish__nav .icon-btn:hover { background: var(--black-900); }
/* Стрелка нарисована 9.83×4.83 — при 20×20 её раздувает, держим пропорции. */
.finish__nav .icon-btn img { width: 11.5px; height: 5.5px; filter: brightness(0) invert(1); }
.finish__dots { position: absolute; left: 50%; transform: translateX(-50%); bottom: 20px; display: flex; gap: var(--sp-3); }
.finish__dots span { width: 60px; height: 3px; border-radius: 2px; background: rgba(255, 255, 255, .45); }
.finish__dots span.is-active { background: #fff; }
/* Макет: фото 762×520 слева, справа сетка 2×2 из карточек 259×250. */
.ways { display: grid; grid-template-columns: 762fr 538fr; gap: var(--sp-6); }
/* Фото абсолютом: строка сетки теперь растёт от карточек (minmax(…, auto)), и кадр
в потоке задавал бы ей свою высоту. Минимум строки держит min-height ячейки. */
.ways__media { position: relative; min-height: 520px; }
.ways__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: var(--r-primary); }
.ways__grid { display: grid; grid-template-columns: 1fr 1fr; grid-auto-rows: minmax(250px, auto); gap: var(--sp-6); }
.ways__card {
position: relative; display: flex; flex-direction: column;
background: var(--bg); border-radius: var(--r-primary); padding: 24px;
transition: background-color .15s ease;
}
.ways__card:hover { background: var(--bg-btn-hover); }
.ways__value { font-size: 24px; font-weight: 600; line-height: 1.2; letter-spacing: -1px; margin-bottom: var(--sp-3); }
/* Макет 19: текст 16/22, мера 180 (в неё входит «Дополнительная скидка», 178). Было 14.
Одной шириной макетные переносы не повторить (в макете они ручные), поэтому
«Рассрочка на 3 года / при…» и «Полная оплата / с…» разбиты переносом строки в поле. */
.ways__text { max-width: 180px; font-size: 16px; line-height: 22px; letter-spacing: -.5px; color: var(--gray-900); }
/* В макете стрелка в карточке смотрит вправо, а .icon-btn держит шеврон вниз. */
.ways__arrow { position: absolute; left: 24px; bottom: 24px; }
.ways__arrow img { transform: rotate(-90deg); }
.ways__card { padding-bottom: 84px; }
/* Отчёты идут одной лентой: вкладки корпусов убраны, стрелки у заголовка листают. */
.progress { position: relative; }
.progress__track { display: flex; gap: var(--sp-6); overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; scrollbar-width: none; -ms-overflow-style: none; }
.progress__track::-webkit-scrollbar { display: none; }
.progress__card { flex: 0 0 calc((100% - var(--sp-6) * 3) / 4); scroll-snap-align: start; background: var(--bg); border-radius: var(--r-primary); overflow: hidden; }
.progress__open { display: block; width: 100%; text-align: left; background: none; border: 0; padding: 0; cursor: pointer; color: inherit; font: inherit; }
.progress__open:hover .progress__period { color: var(--blue-900); }
.progress__media { position: relative; display: block; }
/* Макет: кадр 315×380, под ним серая плашка 74 (из них 20 уходит под кадр), период 16. */
.progress__media img { width: 100%; height: 380px; object-fit: cover; }
.progress__label { position: absolute; left: 10px; top: 10px; }
.progress__media img { transition: transform .3s ease; }
.progress__open:hover .progress__media img { transform: scale(1.03); }
.progress__foot { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); min-height: 54px; padding: 16px 20px; }
.progress__period { font-size: 16px; letter-spacing: -.5px; }
.progress__link { font-size: 14px; letter-spacing: -.4px; color: var(--blue-900); }
/* макет 17: блок 1320x218, поля 30, 3D-дом 497 вылезает вверх и обрезается */
.subscribe {
position: relative; overflow: hidden;
display: grid; grid-template-columns: 1fr 492px; gap: var(--sp-6);
align-items: center; background: var(--bg); border-radius: var(--r-primary); padding: 30px;
min-height: 218px;
}
.subscribe__title { margin: 0 0 var(--sp-4); font-size: 28px; font-weight: 600; line-height: 1.2; letter-spacing: -1px; }
.subscribe__note { font-size: 14px; line-height: 1.45; letter-spacing: -.4px; color: var(--gray-900); }
.subscribe__img { position: absolute; left: 360px; top: -46px; z-index: 0; width: 497px; height: auto; }
.subscribe__form { position: relative; z-index: 1; display: flex; flex-direction: column; gap: var(--sp-4); }
.subscribe__text { position: relative; z-index: 1; }
.subscribe__row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 1100px) {
.ways, .ways__grid, .subscribe, .subscribe__row { grid-template-columns: 1fr; }
.subscribe__img { justify-self: center; }
.progress { grid-template-columns: repeat(2, 1fr); }
.subscribe__img { display: none; }
}
@media (max-width: 700px) {
.progress { grid-template-columns: 1fr; }
.finish__img { height: 320px; }
.finish__hint { display: none; }
}
/* Вертикальный ритм страницы по макету 27: от полотна до первого заголовка 98,
между секциями 90, от заголовка до карточек 50. Правила ограничены этой страницей —
остальные страницы сверялись со своими макетами. */
.page-template-page-o-kompanii .content { padding-top: 90px; }
.page-template-page-o-kompanii .section + .section { margin-top: 90px; }
.page-template-page-o-kompanii .section__title, .page-template-page-o-kompanii .soc-head { margin-bottom: 50px; }
/* Первый экран «О компании»: текст поверх фото, как в макете */
/* макет 27 (26.08): кадр 1440×1200, крошки на 124, заголовок 48/54 на 163, лид 18/27 на 238.
Высота задана пропорцией кадра (1200/1440 = 83.33vw), иначе на широком мониторе cover
срезает низ квартала — см. урок с первым экраном ЖК. */
.page-hero--about { min-height: min(calc(83.33 * var(--vw)), 1400px); align-items: flex-start; padding-top: 124px; padding-bottom: 0; }
.page-hero--about .page-hero__inner { justify-content: flex-start; padding-top: 0; flex: 0 0 auto; }
.page-hero--about .page-hero__title { font-size: 48px; line-height: 54px; }
.page-hero--about .page-hero__lead { font-size: 18px; line-height: 27px; }
/* Крошки в общем правиле ниже прижимают заголовок к низу кадра (margin-bottom: auto);
на этой странице заголовок стоит сразу под ними. */
/* «О компании» — исключение: крошки там не прижаты к верху, а идут в потоке над
заголовком. Отступ под ними увеличен ровно на те 40, что сняли сверху, иначе
вслед за строчкой пути уехал бы весь текстовый блок обложки. */
.page-hero--about .crumbs--light { margin-bottom: 59px; }
.page-hero__title--wide { max-width: 900px; }
.page-hero__lead--wide { max-width: 600px; margin-top: 21px; }
@media (max-width: 700px) {
.page-hero--about { min-height: 480px; }
.page-hero--about .page-hero__inner { padding-top: 0; }
}
/* ── Коммерция: сверка с макетом ────────────────────────────────────
Первая версия — по фрейму 18 макета 19.08; с 27.08 числа сверены по выгрузке 26.08,
файл 23-Коммерция-десктоп.pdf (холст 1440×4127). Замером, а не на глаз. */
/* Первый экран в макете 23 — 760, как и у страницы ЖК. Высота считается тем же
способом: меньшее из пропорции макета и высоты окна минус полоска следующего блока,
иначе на широком мониторе фон растягивается и низ кадра уезжает под обрез. */
.page-hero--slider { height: min(calc(52.78 * var(--vw)), calc(100 * var(--vh) - var(--hero-gap))); min-height: 520px; padding-bottom: 60px; }
body.admin-bar .page-hero--slider { height: min(calc(52.78 * var(--vw)), calc(100 * var(--vh) - var(--hero-gap) - 32px / var(--z))); }
.page-hero--slider .page-hero__title { font-size: 48px; line-height: 1.13; max-width: 720px; }
.page-hero__dots {
position: absolute; left: 50%; bottom: 26px; transform: translateX(-50%);
display: flex; gap: var(--sp-3); z-index: 2;
}
.page-hero__dots span { width: 56px; height: 3px; border-radius: 2px; background: var(--white-500); }
.page-hero__dots span.is-active { background: #fff; }
/* Первый ряд карточек в макете неравномерный: 761 / 539 при контейнере 1320 */
.km-grid--lead { grid-template-columns: 761fr 539fr; }
.km-card { min-height: 360px; }
.km-card--blue { background: #e6f2f6; }
.km-card__title { font-size: 24px; line-height: 1.25; letter-spacing: -1px; max-width: 340px; }
.km-card__text { font-size: 16px; line-height: 1.4; letter-spacing: -.38px; max-width: 380px; }
.km-card--photo .km-card__text { max-width: 300px; }
/* Веранда: фото 521x186 по центру у нижней кромки карточки */
.km-card__ill--veranda { right: auto; left: 50%; transform: translateX(-50%); bottom: 0; top: auto; width: 80%; }
/* Баннеры консультации. Все числа сняты с макета 18-Коммерция (tools/spec.py),
контейнер 1320: блок 230 (у km 260), поля 30, заголовок 32/40, кнопка 240x50. */
.consult { min-height: 230px; padding: 30px; background: linear-gradient(90deg, #e2f0f6 0%, #d6ecf6 50%, #c9e8f6 100%); }
.consult--km { min-height: 260px; background: linear-gradient(90deg, #f2f4f6 0%, #ddeaef 50%, #c9e0e8 100%); }
/* ширина по строкам макета: заголовок из поля переносится там же и не лезет под капсулу */
.consult__text { max-width: 540px; }
.consult--km .consult__text { max-width: 610px; }
/* Трекинг −1.5: строка «Проконсультируйтесь по направлениям» в макете 571 px,
при −1 выходила 589 и весь заголовок расходился с макетом по ширине. */
.consult__title { font-size: 32px; line-height: 40px; margin-bottom: 30px; letter-spacing: -1.5px; }
.consult__title .accent { color: var(--blue-900); }
.consult .btn { padding-left: 30px; padding-right: 30px; font-size: 16px; letter-spacing: -.5px; }
/* размеры и вылет картинок — по матрице размещения в макете (get_image_info) */
.consult__img { right: 127px; top: -86px; bottom: auto; transform: none; width: 406px; z-index: 1; }
.consult__img--building { right: 94px; top: -33px; width: 467px; }
/* Капсула с иконкой: белая с закладкой, у баннера коммерции бирюзовая с ключом */
.consult__badge {
position: absolute; right: 453px; top: 31px; width: 104px; height: 70px;
display: flex; align-items: center; justify-content: center;
background: #fff; border-radius: 35px; box-shadow: 0 12px 42px rgba(20, 60, 80, .16); z-index: 2;
}
.consult__badge img { width: 40px; height: 46px; }
/* у коммерции капсула уходит под здание, поэтому ниже картинки */
.consult--km .consult__badge { right: 499px; top: 55px; background: #70b8bf; z-index: 0; }
.consult--km .consult__badge img { width: 46px; height: 46px; }
/* Капсула оператора: аватар 62 с индикатором + гарнитура */
.consult__manager {
position: absolute; right: 75px; top: 112px; width: 130px; height: 75px;
background: #fff; border-radius: 38px; box-shadow: 0 12px 42px rgba(20, 60, 80, .16); z-index: 2;
}
.consult--km .consult__manager { right: 50px; top: 148px; }
/* Фото в круге: файл уже обрезан квадратом по кадру макета, поэтому просто cover. */
.consult__avatar {
position: absolute; left: 4px; top: 4px; width: 62px; height: 62px; border-radius: 50%;
background: #dde1e8 url('../img/consult-avatar.webp') no-repeat center / cover;
}
.consult__status {
position: absolute; left: 51px; top: 8px; width: 15px; height: 15px;
border-radius: 50%; background: #fff; display: flex; align-items: center; justify-content: center;
}
.consult__status::after { content: ''; width: 9px; height: 9px; border-radius: 50%; background: #42eb61; }
.consult--km .consult__status::after { background: #70b8bf; }
.consult__headset { position: absolute; left: 75px; top: 20px; width: 36px; height: 36px; }
@media (max-width: 1100px) {
.page-hero--slider { min-height: 520px; }
.page-hero--slider .page-hero__title { font-size: 34px; }
.km-grid--lead { grid-template-columns: 1fr; }
.consult__badge, .consult__manager { display: none; }
}
/* Парковка: знак 181x336 справа, текст прижат к низу карточки (замер макета) */
.km-card--blue .km-card__ill { width: 181px; top: 24px; right: 24px; }
.km-card--blue .km-card__text { margin-top: auto; }
.km-card--row .km-card__text { max-width: 420px; }
/* ── Отделка от застройщика: карусель (макет 1320x700, точки-подсказки) ── */
.otdelka { position: relative; border-radius: var(--r-primary); overflow: hidden; }
.otdelka__slide { display: none; position: relative; }
.otdelka__slide.is-active { display: block; }
.otdelka__img { display: block; width: 100%; height: 700px; object-fit: cover; }
.otdelka__point {
position: absolute; transform: translate(-50%, -50%); z-index: 3;
display: flex; flex-direction: column; align-items: center; gap: var(--sp-3);
background: none; border: 0; padding: 0; cursor: pointer;
}
.otdelka__sign {
width: 28px; height: 28px; border-radius: 50%; background: #fff;
display: flex; align-items: center; justify-content: center;
box-shadow: 0 2px 8px rgba(46, 56, 63, .2); position: relative;
}
.otdelka__sign::before, .otdelka__sign::after {
content: ''; position: absolute; background: var(--blue-900); border-radius: 1px;
}
.otdelka__sign::before { width: 12px; height: 2px; }
.otdelka__sign::after { width: 2px; height: 12px; }
.otdelka__point.is-open .otdelka__sign::after { display: none; }
.otdelka__point.is-open .otdelka__sign::before { background: var(--gray-900); }
.otdelka__hint {
display: none; max-width: 220px; background: #fff; border-radius: var(--r-secondary);
padding: 10px 14px; font-size: 14px; line-height: 1.35; letter-spacing: -.4px;
color: var(--black-900); text-align: center; box-shadow: 0 4px 16px rgba(46, 56, 63, .18);
}
.otdelka__point.is-open .otdelka__hint { display: block; }
/* Полупрозрачная, как на страницах ЖК (Влад 16.09.2026): тёмное стекло, белый текст.
Белая плашка на светлом кадре отделки читалась как заплатка. */
.otdelka__price {
position: absolute; left: 24px; bottom: 24px; z-index: 4;
background: rgba(46, 56, 63, .5); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
color: #fff; border-radius: var(--r-secondary); padding: 10px 16px; font-size: 14px;
font-weight: 500; letter-spacing: -.4px;
}
.otdelka__expand, .otdelka__arrow {
position: absolute; z-index: 4; width: 44px; height: 44px; border: 0; cursor: pointer;
border-radius: 50%; background: rgba(46, 56, 63, .35); backdrop-filter: blur(6px);
display: flex; align-items: center; justify-content: center;
}
.otdelka__expand { top: 24px; right: 24px; }
.otdelka__expand img { width: 18px; filter: brightness(0) invert(1); }
.otdelka__arrow { top: 50%; transform: translateY(-50%); }
.otdelka__arrow--prev { left: 24px; }
.otdelka__arrow--next { right: 24px; }
.otdelka__arrow img { width: 18px; filter: brightness(0) invert(1); }
.otdelka__arrow--prev img { transform: rotate(90deg); }
.otdelka__arrow--next img { transform: rotate(-90deg); }
.otdelka__dots {
position: absolute; left: 50%; bottom: 20px; transform: translateX(-50%); z-index: 4;
display: flex; gap: var(--sp-3);
}
.otdelka__dots span { width: 56px; height: 3px; border-radius: 2px; background: var(--white-500); cursor: pointer; }
.otdelka__dots span.is-active { background: #fff; }
@media (max-width: 1100px) {
.otdelka__img { height: 380px; }
.otdelka__hint { max-width: 160px; font-size: 12px; }
}
/* Отступы секции отделки: в макете между баннером и заголовком 70 px, до карусели ещё 75 */
.consult + .section { margin-top: 70px; }
.section__title + .otdelka { margin-top: 32px; }
.otdelka__expand img { filter: none; }
.km-card--blue .km-card__title { margin-bottom: auto; }
/* ── Шапка поверх первого экрана ───────────────────────────────────
В макете фото начинается от самого верха страницы (y=0), а шапка-остров
лежит поверх него. Отрицательный отступ поднимает hero под шапку и при этом
сохраняет её sticky-поведение. */
/* Верхний отступ 124 (макет) уводил строчку пути слишком низко от шапки: между её
кромкой и крошками получалось 75 экранных точек. 84 сажает их на 29 (Влад 04.09.2026).
На обложках, где крошки прижаты к верху через margin-bottom: auto, это двигает
ТОЛЬКО их — заголовок стоит у нижней кромки и остаётся на месте. */
.page-hero { align-items: stretch; padding-top: 84px; padding-bottom: 120px; }
.page-hero__inner { display: flex; flex-direction: column; flex: 1; justify-content: flex-end; }
.page-hero:not(.page-hero--about) .crumbs { margin-bottom: auto; }
.page-hero__badges { margin-bottom: 0; }
/* ── Коммерческие помещения (данные из карточек ЖК) ────────────────
Блок живёт только на «Коммерции»: на странице ЖК его нет. */
.km-units + .km-units { margin-top: 60px; }
.km-units__lead { max-width: 860px; margin: -8px 0 20px; font-size: 18px; line-height: 1.5; letter-spacing: -.5px; color: var(--gray-900); }
.km-units__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-6); }
.km-unit { position: relative; display: flex; flex-direction: column; background: var(--bg); border-radius: var(--r-primary); padding: 20px; }
.km-unit__plan { width: 100%; height: 240px; object-fit: cover; border-radius: var(--r-secondary); margin-bottom: 16px; background: #fff; }
.km-unit__status { align-self: flex-start; margin-bottom: 10px; padding: 5px 12px; border-radius: var(--r-full); font-size: 13px; letter-spacing: -.4px; background: rgba(47, 185, 95, .12); color: var(--success); }
.km-unit__status--booked { background: rgba(253, 201, 43, .18); color: #9a7300; }
.km-unit__status--sold { background: rgba(109, 116, 121, .14); color: var(--gray-900); }
.km-unit--taken .km-unit__plan { opacity: .55; }
.km-unit__title { margin: 0 0 6px; font-size: 20px; font-weight: 500; line-height: 1.3; letter-spacing: -.5px; }
.km-unit__meta { font-size: 15px; line-height: 1.4; letter-spacing: -.4px; color: var(--gray-900); }
.km-unit__text { margin-top: 8px; font-size: 16px; line-height: 24px; letter-spacing: -.4px; color: var(--gray-900); }
.km-unit__foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: auto; padding-top: 18px; }
.km-unit__price { font-size: 20px; font-weight: 600; letter-spacing: -.5px; }
@media (max-width: 1100px) { .km-units__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 700px) { .km-units__grid { grid-template-columns: 1fr; } }
/* Ряды плиток: в макете между ними те же 20 px, что и между колонками */
.km-grid + .km-grid { margin-top: var(--sp-6); }
/* Плитки преимуществ лежат вне .section, поэтому обычное правило «секция после секции»
их не касалось и заголовок «Отделка от застройщика» прилипал к карточкам: 22 px
вместо макетных 98. */
.km-grid + .section { margin-top: 98px; }
/* Проекты в Твери: в макете это карусель — две карточки 645 в ряд, зазор 30,
листается стрелками у заголовка. Сеткой третий проект уходил на второй ряд один. */
/* Все горизонтальные ленты сайта: overflow-x: auto без пары делает прокручиваемой
и вертикаль. Низ текста в карточке стоит вплотную к краю ленты (цена «Проектов
в Твери» — запас 0), Safari выпускает глиф на долю пикселя, и ленту можно
было таскать пальцем вверх-вниз (Влад, 01.10.2026). Поэтому везде рядом с
overflow-x: auto стоит overflow-y: hidden — обрезка та же, оси прокрутки нет.
При новой ленте ставить пару сразу. */
.jk-carousel { overflow: hidden; }
.jk-carousel .jk-grid { flex-wrap: nowrap; gap: 30px; overflow-x: auto; overflow-y: hidden; scroll-behavior: smooth; scrollbar-width: none; }
.jk-carousel .jk-grid::-webkit-scrollbar { display: none; }
.jk-carousel .jk { flex: 0 0 645px; width: 645px; }
/* Веранда: в макете фото ровно 521x186 у нижней кромки, заголовок в две строки */
.km-card--row .km-card__title { max-width: 210px; }
.km-card__ill--veranda { width: 521px; max-width: 82%; height: 186px; object-fit: contain; object-position: bottom; }
/* Ширина текстовых колонок в плитках — по замеру строк макета */
.km-card--photo .km-card__text { max-width: 322px; }
.km-card--blue .km-card__text { max-width: 245px; }
.km-card--row .km-card__text { max-width: 370px; }
.km-card__ill--veranda { bottom: 6px; }
/* Текст в фото-плитках: блок прижат вправо, но строки выровнены по левому краю
(в макете левый край всех строк одинаковый, правый рваный) */
/* Строки прижаты к правому краю: с коротким текстом («Потолки 3,6 м…», две строки)
левое выравнивание в блоке 320 оставляло пустоту справа, и текст висел посередине
плитки (Влад 17.09.2026: «должен быть по правой стороне»). */
.km-card__text--light { text-align: right; margin-left: auto; }
/* Затемнение фото-плиток. Раньше подложка шла сплошной (.55 → .78 → .7) и фотография
читалась как выцветшая под серой пеленой. Теперь тень работает только там, где лежит
текст, — под заголовком сверху и под абзацем снизу, — а середина кадра остаётся чистой. */
.km-card--photo::after {
background:
linear-gradient(180deg, rgba(27, 34, 39, .55) 0%, rgba(27, 34, 39, .18) 26%, rgba(27, 34, 39, 0) 44%),
linear-gradient(0deg, rgba(27, 34, 39, .72) 0%, rgba(27, 34, 39, .5) 26%, rgba(27, 34, 39, .16) 44%, rgba(27, 34, 39, 0) 56%);
}
/* Абзац лежит поверх открытой части кадра, поэтому подпираем его собственной тенью,
а не общим затемнением всей плитки. */
.km-card--photo .km-card__title,
.km-card__text--light { text-shadow: 0 1px 14px rgba(27, 34, 39, .55); }
/* --- Пример расчёта рассрочки (вкладка «Рассрочка», макет 23) --------------
Замеры tools/spec.py: фото 873 + зазор 20 + колонка карточек 427 = 1320,
высота колонки 640 = высоте фото; карточки 154 / 150 / 296 с зазором 20. */
/* Макет 33: карточки слева 538, фото справа 762 — не наоборот. */
.calc-ex { display: grid; grid-template-columns: 538px 1fr; gap: 20px; align-items: stretch; }
/* Высоту задаёт колонка карточек: фото лежит в растянутой обёртке абсолютом, поэтому
не диктует высоту строки и не оставляет щель, если текста в карточках стало больше. */
.calc-ex__media { position: relative; overflow: hidden; border-radius: var(--r-primary); min-height: 320px; }
.calc-ex__photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.calc-ex__cards { display: grid; grid-auto-rows: max-content; gap: 20px; }
.calc-card { position: relative; overflow: hidden; background: var(--bg); border-radius: var(--r-primary); padding: 6px; display: flex; flex-direction: column; }
.calc-card--accent { background: #e7f2f6; }
.calc-card__head { display: flex; align-items: center; gap: 7px; padding: 15px 17px 21px; }
.calc-card__head img { width: 24px; height: 24px; }
.calc-card__title { margin: 0; font-size: 20px; font-weight: 600; line-height: 1.2; letter-spacing: -.5px; }
.calc-card--accent .calc-card__title { color: var(--blue-900); }
.calc-row { display: flex; gap: 7px; }
.calc-row--split { display: grid; grid-template-columns: 196px 1fr; gap: 7px; }
.calc-tile {
flex: 1; background: #fff; border-radius: var(--r-secondary);
padding: 16px 12px; text-align: center;
}
.calc-tile__label { font-size: 14px; line-height: 1.4; letter-spacing: -.38px; color: var(--gray-900); }
.calc-tile__value { margin-top: 10px; font-size: 18px; font-weight: 600; line-height: 1.2; letter-spacing: -.5px; }
.calc-tile--wide { text-align: left; padding: 18px 16px; }
.calc-tile--wide .calc-tile__value { margin: 0; font-size: 16px; font-weight: 400; line-height: 1.45; }
/* знак процента лежит поверх карточки, часть уходит за её край (замер макета) */
.calc-card__pct { position: absolute; left: 373px; top: 15px; width: 152px; height: auto; }
.calc-steps { margin-top: 6px; background: #fff; border-radius: var(--r-secondary); padding: 19px 16px; display: grid; gap: 18px; }
.calc-step { display: flex; align-items: center; gap: 12px; }
.calc-step__n {
flex: none; width: 40px; height: 40px; border-radius: 50%; background: var(--bg);
display: flex; align-items: center; justify-content: center; font-size: 16px; color: var(--gray-900);
}
.calc-step__text { font-size: 16px; line-height: 1.45; letter-spacing: -.38px; }
@media (max-width: 1100px) {
.calc-ex { grid-template-columns: 1fr; }
.calc-ex__media { height: 320px; }
}
/* --- Трейд-ин: бронь и авто (вкладка «Трейд-ин», макет 24) -----------------
Карточки 1320x340 с зазором 20, поля 30, кнопки 219x50 у нижней кромки,
картинки приклеены к правому нижнему углу и обрезаются карточкой. */
.tradein { display: grid; gap: 20px; }
.tradein-card {
position: relative; overflow: hidden; display: flex; flex-direction: column;
min-height: 340px; padding: 30px; background: var(--bg); border-radius: var(--r-primary);
}
.tradein-card__title { margin: 0; font-size: 28px; font-weight: 600; line-height: 1.2; letter-spacing: -1px; }
.tradein-card__list { margin: 23px 0 0; display: grid; gap: 14px; max-width: 560px; }
.tradein-card__list li { position: relative; padding-left: 18px; font-size: 16px; line-height: 1; letter-spacing: -.38px; }
.tradein-card__list li::before {
content: ''; position: absolute; left: 0; top: 4px; width: 9px; height: 9px;
border-radius: 50%; background: var(--blue-900);
}
.tradein-card__actions { margin-top: auto; padding-top: 30px; display: flex; gap: 12px; }
.tradein-card__actions .btn { min-width: 219px; }
.tradein-card__ill { position: absolute; z-index: 0; }
.tradein-card__ill--house-far { left: 732px; top: 110px; width: 271px; transform: scaleX(-1); }
.tradein-card__ill--house-near { left: 931px; top: 24px; width: 365px; transform: scaleX(-1); }
.tradein-card__ill--car { left: 637px; top: 24px; width: 1106px; }
/* Своя иллюстрация клиента (поле «Иллюстрация»): справа, не шире половины карточки. */
.tradein-card__ill--custom { right: 40px; top: 24px; bottom: 24px; width: auto; max-width: 45%; height: auto; max-height: calc(100% - 48px); object-fit: contain; }
.tradein-card__title, .tradein-card__list, .tradein-card__actions { position: relative; z-index: 1; }
@media (max-width: 1100px) {
.tradein-card__ill { display: none; }
.tradein-card__actions { flex-wrap: wrap; }
}
/* --- Особенности ЖК (макет 17): карточки 315x400 с картинкой у нижней кромки */
/* Макет 26.08: слева колонка «Особенности» с лидом, справа карусель карточек 315x400. */
.osob-wrap { display: grid; grid-template-columns: 315px minmax(0, 1fr); gap: var(--sp-6); align-items: start; }
/* На телефоне колонка 315 съедала почти всю ширину: ленте оставалось 19 точек, и
карточки уезжали за экран (найдено 04.09.2026 вместе с горизонтальной прокруткой).
Ниже 700 текст и лента идут друг под другом, как остальные парные блоки. */
@media (max-width: 700px) {
.osob-wrap { grid-template-columns: minmax(0, 1fr); }
/* min-height 400 держал высоту левой колонки, когда она стояла рядом с лентой.
В одну колонку он превращается в пустую дыру между текстом и стрелками. */
.osob-wrap .osob-intro { min-height: 0; }
}
.osob-intro p { margin-top: 20px; font-size: 16px; line-height: 1.5; letter-spacing: -.5px; color: var(--gray-900); }
/* Лента заканчивается на правом краю контейнера, вровень с шапкой, следующая карточка
появляется из-за него — как «Соцответственность» и «Наши проекты» (Влад 16–17.09.2026).
Раньше уезжала до кромки окна отрицательным полем, как во фрейме макета. */
.osob { position: relative; }
.osob__track { display: flex; gap: var(--sp-6); overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; scrollbar-width: none; }
.osob__track::-webkit-scrollbar { display: none; }
.osob-card {
position: relative; overflow: hidden; flex: none; width: 315px; height: 400px;
padding: 25px 24px; background: var(--bg); border-radius: var(--r-primary); scroll-snap-align: start;
}
.osob-card__title { margin: 0; font-size: 20px; font-weight: 600; line-height: 1.3; letter-spacing: -.5px; }
.osob-card__text { margin-top: 14px; font-size: 16px; line-height: 1.4; letter-spacing: -.38px; color: var(--gray-900); }
.osob-card__ill { position: absolute; max-width: none; height: auto; width: var(--w); left: var(--l); top: var(--t); }
/* Стрелки секций в макете — серые круги 48 на белом фоне, а не белые с тенью
(карта y=5206, ход y=10042, особенности y=7263 — все #f2f4f6). */
.section__head .icon-btn, .osob__nav .icon-btn, .soc-head__nav .icon-btn {
width: 48px; height: 48px; background: var(--bg); box-shadow: none;
}
.section__head .icon-btn:hover, .osob__nav .icon-btn:hover, .soc-head__nav .icon-btn:hover { background: var(--bg-btn-hover); }
.section__head .icon-btn img, .osob__nav .icon-btn img { width: 11.5px; height: 5.5px; }
/* В макете стрелки «Особенностей» стоят у нижней кромки карточек (y=7263 при 6911..7311),
а не сразу под текстом — прижимаем их к низу колонки высотой в карточку. */
.osob-intro { display: flex; flex-direction: column; min-height: 400px; }
.osob__nav { display: flex; gap: var(--sp-3); margin-top: auto; }
/* .icon-btn держит шеврон вниз — разворачиваем его влево и вправо. */
.osob__nav .icon-btn:first-child img { transform: rotate(90deg); }
.osob__nav .icon-btn:last-child img { transform: rotate(-90deg); }
/* Баннер консультации на странице ЖК ничем не отличается от остальных: в макете 26.08
он такой же светлый, с синей кнопкой и закладкой в белой капсуле. Бирюзовая инверсия,
сделанная по июльской редакции, снята 27.08 — переопределений больше нет.
Базовые позиции (пузырь right 127 / top −86 / 406, капсула 104×70 на right 453,
оператор 130×75 на right 75) уже совпадают с этим макетом. */
/* ==========================================================================
Модальные окна форм — макеты 41 (десктоп) и 40 (мобайл)
Размеры сняты из PDF: панель 838x449 и 838x489, на узком экране 336,
поля 44 с шагом 56, кнопка 50, радиусы 16/10/6, затемнение #151e30 при 40 %.
========================================================================== */
.modal {
position: fixed; inset: 0; z-index: 100;
display: flex; align-items: center; justify-content: center; padding: 20px;
background: rgba(21, 30, 48, .4);
overflow-y: auto;
}
.modal[hidden] { display: none; }
.modal__box {
position: relative; display: flex; width: 468px; max-width: 100%;
background: #fff; border-radius: var(--r-primary);
}
.modal__box--wide { width: 838px; }
.modal__pane {
display: flex; flex-direction: column; flex: 1 1 auto; min-width: 0; padding: 24px;
}
/* Трекинг -1 проверен наложением на макет (расхождение по строке 2.7 против 20 при -0.5):
ширине bbox из PDF тут верить нельзя, сверять картинкой. */
.modal__title { margin: 0; font-size: 28px; font-weight: 600; line-height: 1.2; letter-spacing: -1px; }
.modal__text {
/* Переносы строк заданы
: в макете они не выводятся из ширины блока. */
margin: 9px 0 0; font-size: 16px; line-height: 1.4; letter-spacing: -.38px; color: var(--black-700);
}
.modal__form { display: flex; flex-direction: column; gap: 23px; margin-top: 22px; }
/* Шаг полей в макете 56 при высоте поля 46 — значит зазор 10, а не 12 как в блоке на странице. */
.modal__form .form__fields { gap: 10px; }
.modal__submit { width: 100%; }
/* Правая колонка широкого окна: фото менеджера на светлой подложке. */
.modal__aside {
position: relative; overflow: hidden; flex: 0 0 414px;
margin: 6px 6px 6px 0; border-radius: var(--r-secondary);
background: linear-gradient(200deg, #d8ebf1 0%, #e6f2f6 45%);
}
/* Маскот из макета 41: 327x437, прижат к низу подложки и стоит по центру
(в PDF слева 44, справа 43 при подложке 414). */
.modal__photo { position: absolute; left: 50%; bottom: 0; width: 327px; height: auto; transform: translateX(-50%); }
.modal__close {
position: absolute; right: 10px; top: 10px; z-index: 1;
display: flex; align-items: center; justify-content: center;
width: 36px; height: 36px; background: #fff; border: 1px solid var(--border);
border-radius: 50%; cursor: pointer; transition: background-color .15s ease;
}
/* В широком окне крестик лежит на фото: отступ 6 от края подложки, без рамки. */
.modal__box--wide .modal__close { right: 6px; top: 6px; border-color: transparent; }
.modal__close:hover { background: var(--bg); }
/* Окно 3D-тура: чужое приложение во весь экран, поэтому полей почти нет.
Высота считается от окна через --vh — при масштабе страницы (zoom) обычные
100vh дали бы окно выше экрана. */
.modal--tour { padding: 12px; align-items: stretch; overflow: hidden; }
.modal__box--tour {
display: flex; flex-direction: column;
width: 100%; max-width: 1680px; height: calc(100 * var(--vh) - 24px);
margin: auto; background: var(--blue-900); overflow: hidden;
}
body.admin-bar .modal__box--tour { height: calc(100 * var(--vh) - 24px - 32px / var(--z)); }
/* Полоска с названием и кнопкой: у тура своя панель в правом верхнем углу,
круглый крестик окна ложился прямо на неё. */
.tour__bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex: 0 0 auto; padding: 10px 10px 10px 20px; color: #fff; }
.tour__bar-title { font-size: 16px; font-weight: 600; letter-spacing: -.5px; }
.tour__bar-close { padding: 9px 20px; border: 0; border-radius: 999px; background: #fff; color: var(--black-900); font-family: inherit; font-size: 15px; letter-spacing: -.5px; cursor: pointer; transition: background-color .15s ease; }
.tour__bar-close:hover { background: rgba(255, 255, 255, .88); }
.tour__frame { display: block; flex: 1 1 auto; width: 100%; min-height: 0; border: 0; border-radius: 0 0 var(--r-primary) var(--r-primary); }
/* Поле вопроса в окне «Задать вопрос»: 420x84 по макету. */
.input--area { min-height: 84px; resize: vertical; }
/* Ловушка для ботов: поле видит только робот, читающий разметку. */
.form__trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
/* Ответ обработчика под кнопкой. */
/* Кнопки над генпланом ведут в разделы каталога Домопланера. Заголовок в макете
стоит по центру — кнопки ставим под ним такой же центрированной строкой. */
/* --- Плашка про Cookies (макет 43) --------------------------------------- */
.cookie {
position: fixed; left: 50%; bottom: 30px; transform: translateX(-50%); z-index: 60;
display: flex; align-items: center; gap: var(--sp-5);
width: 463px; max-width: calc(100 * var(--vw) - 40px); min-height: 72px; padding: 16px;
background: #fff; border-radius: var(--r-primary); box-shadow: 0 8px 30px rgba(46, 56, 63, .12);
}
.cookie[hidden] { display: none; }
.cookie__ic { flex: 0 0 auto; width: 28px; height: 28px; }
.cookie__text { flex: 1 1 auto; font-size: 14px; line-height: 1.43; letter-spacing: -.38px; }
.cookie__btn {
flex: 0 0 auto; min-width: 97px; height: 40px; padding: 0 var(--sp-6); border-radius: var(--r-secondary);
background: var(--black-900); color: #fff; font-size: 14px; line-height: 1.4; letter-spacing: -.38px;
}
.cookie__btn:hover { background: #1b2227; }
.form__result { margin: 0; font-size: 14px; line-height: 1.4; letter-spacing: -.38px; color: var(--gray-900); }
.form__result:empty { display: none; }
.form__result.is-ok { color: var(--blue-900); }
.form__result.is-err { color: var(--error); }
body.is-modal-open { overflow: hidden; }
/* Узкий экран — макет 40: окно 336, маскот полосой сверху (подложка 324x210,
кот 216 шириной прижат к верху и обрезан снизу), форма под ним. */
@media (max-width: 900px) {
.modal__box, .modal__box--wide { flex-direction: column; width: 336px; }
/* В разметке фото идёт после формы (десктоп ставит его справа) — на узком
экране макет 40 требует полосу сверху. */
.modal__aside { order: -1; flex: 0 0 210px; height: 210px; margin: 6px 6px 0; }
/* Переносы
расставлены под ширину 370: на 296 они рвут строку не там
(в тексте перед
стоит пробел, поэтому слова не слипаются). */
.modal__text br { display: none; }
/* Кегли и кнопка макета 40: заголовок 22, текст 15, кнопка 44. */
.modal__title { font-size: 22px; }
.modal__text { font-size: 15px; }
.modal__submit { height: 44px; }
.modal__photo { top: -2px; bottom: auto; width: 216px; }
.modal__pane { padding: 20px; }
.modal__box--wide .modal__close { right: 12px; top: 12px; }
/* Тур — исключение из ширины 336: чужое приложение показываем во весь экран,
иначе панорама остаётся в узкой колонке, а вокруг просвечивает страница. */
.modal--tour { padding: 0; }
.modal__box--tour { width: 100%; height: calc(100 * var(--vh)); border-radius: 0; }
body.admin-bar .modal__box--tour { height: calc(100 * var(--vh) - 46px / var(--z)); }
.tour__bar { padding: 8px 8px 8px 16px; }
.tour__bar-title { font-size: 15px; }
.tour__bar-close { padding: 8px 16px; font-size: 14px; }
.tour__frame { border-radius: 0; }
}
/* ── Шапка при прокрутке ───────────────────────────────────────────
Островок стоит на своём макетном месте (20 px от верха) и при прокрутке не
двигается. Вид у него один и тот же всегда — белый прямоугольник в рамке
#dde1e8, как в макете: ни фоновой плашки во всю ширину, ни отдельной тени
для прокрученного состояния. */
/* Стрелки слайдера первого экрана ЖК: в макете 17 это два круга 48x48
у правого края, нижней кромкой вровень с метками (y 622..670). */
/* Первый экран ЖК по макету 17: заголовок 48/54 (как на остальных первых
экранах), метки 32 высотой с текстом 14. */
.page-hero--jk .page-hero__title { font-size: 48px; line-height: 54px; }
.page-hero__badges .badge { font-size: 14px; line-height: 18px; padding: 7px 12px; }
/* Высота первого экрана — пропорцией, а не числом. Раньше она складывалась из
отступов и текста и всегда была 760, а фон растягивался по ширине окна: на 1920
картинка выходила 1080 при окне 760 и низ кадра (машина на дороге) уезжал под обрез.
1440:760 — пропорция макета; потолок 820 нужен, чтобы на широком мониторе первый
экран не занимал всё окно и следующий блок было видно без прокрутки. Чтобы при
потолке не терялся низ кадра, точку привязки смещаем вниз (50% 70%). */
/* Высоту ограничивают два условия сразу:
52.78vw — пропорция макета (1440×760), она не даёт кадру растянуться на широком окне;
100vh − 22 — высота окна минус полоска белого полотна, которая должна выглядывать
снизу. Полотно вдобавок наезжает на первый экран на 30 (margin-top у .content), так что
реально под кадром видно ~52 px — только скруглённый край блока, без ряда якорей.
Что меньше, то и берём: на мониторе 1440×900 это 760 как в макете, на 2558×1170 — 1148. */
.page-hero--jk { height: min(calc(52.78 * var(--vw)), calc(100 * var(--vh) - var(--hero-gap))); min-height: 520px; padding-bottom: var(--hero-pb); }
/* Админ-бар WordPress съедает 32 px сверху — иначе краешек уезжает из виду. */
body.admin-bar .page-hero--jk { height: min(calc(52.78 * var(--vw)), calc(100 * var(--vh) - var(--hero-gap) - 32px / var(--z))); }
.page-hero--jk .page-hero__img { object-position: 50% 70%; }
/* Заголовок в макете 48/54 при холсте 1440 — на широком экране растёт вместе с ним. */
.page-hero--jk .page-hero__title { font-size: clamp(48px, calc(3.33 * var(--vw)), 64px); line-height: 1.13; }
.page-hero--jk .page-hero__nav {
/* right отсчитывается от padding-box контейнера, поэтому добавляем gutter:
иначе кнопки вылезают за колонку контента. В макете правый край кругов
отстоит от края контента на 21 px. */
position: absolute; right: calc(var(--gutter) + 21px); bottom: 0;
display: flex; gap: 10px;
}
.page-hero--jk .page-hero__nav .icon-btn { width: 48px; height: 48px; }
.page-hero--jk .page-hero__nav .icon-btn img { width: 11.5px; height: 5.5px; }
/* ==========================================================================
Страница ЖК: доводка по макету 26.08 (правки 27.08)
========================================================================== */
/* Панели галереи и кадры внутри переключаются атрибутом hidden. */
.gallery[hidden], .gallery__slide[hidden] { display: none; }
.gallery__slide { position: relative; }
/* Точка-разделитель в параметрах квартиры: раньше «м» и надстрочная двойка были
отдельными flex-элементами и их разносило зазором 8. */
.flat__params sup { font-size: 9px; vertical-align: super; }
/* ==========================================================================
Мобильная версия — макеты 01, 03, 04 (экран 360, контейнер 336)
Числа сняты из PDF, а не подобраны на глаз: см. docs/glavnaya-mobile-2026-08-28.md
Размеры не фиксированные, а в долях ширины экрана: `--m` — один пиксель
макета 360. На экране 390/430 (типичные телефоны) блок остаётся той же
пропорции, что в макете, а не превращается в приплюснутую полосу с полями
по бокам картинок. Рост останавливается на 480 px, дальше --m = 1.334.
========================================================================== */
@media (max-width: 700px) {
:root {
--m: min(.2778vw, 1.334px);
/* UI-кит: контейнер мобильного макета 336 при экране 360 — поля по 12. */
--gutter: calc(12 * var(--m));
/* На сколько шапка стала ниже (01.10.2026): была 56 в единицах макета, стала 50 px.
Все отступы первого экрана считались от старой шапки — вычитаем разницу, чтобы
крошки и первый блок поднялись вслед за ней, а зазор под шапкой остался прежним. */
--hdr-shrink: calc(56 * var(--m) - 50px);
}
/* --- Шапка: белый островок 336x56 с логотипом и тремя кнопками 40 ------- */
/* Отступ сверху — сдвигом самой обёртки, а не внутренним полем (Влад 29.09.2026, проверено на
iPhone). Safari 26 заливает полосу под часами цветом закреплённого элемента у верха экрана;
обёртка на top 0 делала её белой. Теперь у верха закреплённого нет, и при прокрутке под
часами идёт сам контент с размытием, как у ПИК. */
.header { top: calc(12 * var(--m)); padding-top: 0; }
body.admin-bar .header { top: calc(46px + 12 * var(--m)); }
/* Новая шапка по макету дизайнера (30.09.2026): ниже, вместо значков мессенджеров номер
телефона, стекло прозрачнее и сильнее размывает. Размеры Влад подобрал ползунками на
телефоне (опыт ?newhdr, 01.10): высота 50, стекло .43 / 13px, логотип 124, телефон 15,
кнопка меню 34. Значки TG и VK остаются в мобильном меню. */
.header__inner { height: 50px; padding: 0 8px 0 calc(14 * var(--m)); --hdr-alpha: .43; --hdr-blur: 13px; }
.header__logo { width: 124px; height: calc(124px * 26 / 142); }
.header__logo img { width: 100%; height: 100%; object-fit: contain; object-position: left center; }
.header__phone { display: block; }
.header__phone span { display: none; }
.header__phone b { display: block; font-size: 15px; font-weight: 600; line-height: 1.2; letter-spacing: -.3px; }
.header__phone a { color: var(--black-900); }
.header__social { display: none; }
.header__contacts { gap: 10px; }
/* Базовое .burger{display:none} стоит ниже по файлу — берём селектор сильнее. */
.header .burger { display: inline-flex; width: 34px; height: 34px; }
/* --- Первый экран: слайд 336x231, под ним две акционные карточки -------- */
.hero { margin-top: calc(-68 * var(--m)); padding: calc(87 * var(--m)) 0 calc(60 * var(--m)); } /* подъём за шапкой даёт padding-top у body (--hdr-shrink) */
.hero__grid { gap: calc(12 * var(--m)); }
.hero__aside { flex-direction: column; gap: calc(12 * var(--m)); }
/* flex:1 из планшетного слоя в колонке схлопывал карточки в ноль высоты. */
.hero__aside > * { flex: 0 0 auto; }
.slider { height: auto; aspect-ratio: 336 / 231; }
.slider__nav { display: none; }
.slider__dots { bottom: calc(10 * var(--m)); }
.promo { height: auto; aspect-ratio: 336 / 230; }
/* Картинки внутри карточек — в долях самой карточки, иначе на широком
экране они не покрывают её и по краям выступает фон. */
/* Картинка кроется по всей карточке: при размерах из макета на широком экране
снизу и справа оставалась полоса фона. */
.promo__img { inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; }
.promo__title { left: 5.95%; top: 8.7%; width: 56.5%; font-size: calc(20 * var(--m)); line-height: 1.2; letter-spacing: -.7px; }
.promo__tags { left: 5.95%; top: auto; bottom: 8.7%; }
/* Решение Влада 28.08: обе акционные карточки одной высоты (в макете 230 и 160). */
.promo-white { height: auto; aspect-ratio: 336 / 230; }
.promo-white__title { left: 5.95%; top: 8.7%; width: 45%; font-size: calc(20 * var(--m)); line-height: 1.2; letter-spacing: -.7px; }
/* Текст прижат к низу, как плашки у соседней «Ипотеки»: на 35 % он висел под
заголовком, а нижние 40 % карточки пустовали (Влад 01.10.2026). */
.promo-white__text { left: 5.95%; top: auto; bottom: 8.7%; width: 44.6%; font-size: calc(14 * var(--m)); }
/* Молния ниже и левее, целиком внутри карточки (Влад 28.09.2026; было right -8%, top -3.5%). */
.promo-white__img { right: -3.5%; top: 3%; width: 52%; height: auto; transform: none; }
.promo-white__arrow { left: auto; right: 5.95%; bottom: 8.7%; width: calc(36 * var(--m)); height: calc(36 * var(--m)); }
.badge { padding: calc(5 * var(--m)) calc(8 * var(--m)); font-size: calc(12 * var(--m)); line-height: 1.3; letter-spacing: -.3px; }
/* --- Белое полотно и заголовки секций ----------------------------------- */
.content { margin-top: calc(-20 * var(--m)); padding: calc(20 * var(--m)) 0 calc(40 * var(--m)); }
.h2 { font-size: calc(24 * var(--m)); line-height: 1.25; letter-spacing: -1px; }
.h2--lg { font-size: calc(24 * var(--m)); }
.h5 { font-size: calc(18 * var(--m)); letter-spacing: -.5px; }
.h6 { font-size: calc(16 * var(--m)); letter-spacing: -.5px; }
.t-18 { font-size: calc(15 * var(--m)); }
.section + .section { margin-top: calc(56 * var(--m)); }
.section__title { margin-bottom: calc(28 * var(--m)); }
.section__head { margin-bottom: calc(20 * var(--m)); }
/* --- Новостройки: адрес двумя строками, фото 336x219 -------------------- */
.jk-grid { gap: calc(20 * var(--m)); }
.jk { gap: calc(8 * var(--m)); }
.jk__meta {
flex-direction: column; align-items: flex-start; gap: calc(8 * var(--m));
padding: calc(13 * var(--m)) calc(18 * var(--m)) calc(33 * var(--m));
margin-bottom: calc(-20 * var(--m));
}
.jk__meta-item { font-size: calc(14 * var(--m)); letter-spacing: -.4px; }
.jk__meta-item img { width: calc(16 * var(--m)); height: calc(16 * var(--m)); }
/* min-height обнуляем: на десктопе у широкой карточки стоит пол в 360 px, и без сброса
он перебивал пропорцию — Ботаника выходила 364x360 вместо 364x237, вытянутой
относительно Атмосферы и Шоколада (Влад заметил 31.08.2026). */
.jk__media, .jk--wide .jk__media { height: auto; min-height: 0; aspect-ratio: 336 / 219; }
.jk__badges { left: calc(10 * var(--m)); right: calc(10 * var(--m)); top: calc(10 * var(--m)); gap: calc(6 * var(--m)); }
.jk__badges-left { gap: calc(6 * var(--m)); }
.jk__dots { bottom: calc(20 * var(--m)); }
.jk__foot .h5 { font-size: calc(18 * var(--m)); }
.jk__price { font-size: calc(16 * var(--m)); }
/* --- Заявка менеджеру: фото внутри плашки справа ------------------------ */
.lead { grid-template-columns: 1fr; gap: calc(12 * var(--m)); }
/* Жёсткая пропорция + overflow: hidden резали текст: на 390 (iPhone) строк
в лиде выходит больше, чем на 360, и хвост «с выбором и ответит на вопросы»
уезжал под нижний край карточки. Пропорция стала полом, а не потолком. */
.lead__promo {
aspect-ratio: auto; min-height: calc(188 * var(--m)); padding: calc(20 * var(--m));
overflow: hidden; display: flex; flex-direction: column; justify-content: center;
}
.lead__text, .lead__title { position: relative; z-index: 1; }
/* Колонки в макете: заголовок 169 из 296 внутренних (57.1 %), лид 147 (49.7 %).
Стояло 55 и 49 — при кегле 22*m строка «квартиру для вас» просит 184, а
колонка давала 176: заголовок ломался на три строки, лид на пять, и карточка
вырастала со 204 до 255. Именно из-за этого фото переставало вылезать за
нижнюю кромку и был виден его собственный обрезанный край. */
.lead__title { margin-bottom: calc(8 * var(--m)); max-width: 58%; font-size: calc(22 * var(--m)); letter-spacing: -1px; }
.lead__text { max-width: 52%; font-size: calc(15 * var(--m)); line-height: 1.4; }
/* position задаём явно: планшетный слой ставит фото в поток (static).
Держим фото за НИЖНИЙ край (в макете оно уходит на 36 из 188 = 19.1 % ниже
карточки), а не за верхний: тогда край кадра режется карточкой при любой
высоте блока, а не только при макетной. */
.lead__img { position: absolute; right: -8.3%; top: auto; bottom: -19.1%; width: 51.5%; height: auto; margin: 0; }
.form { gap: calc(20 * var(--m)); padding: calc(20 * var(--m)); }
.form__fields { gap: calc(12 * var(--m)); }
.input { padding: calc(12 * var(--m)) calc(16 * var(--m)); font-size: calc(14 * var(--m)); }
.checks { gap: calc(12 * var(--m)); }
.check { align-items: flex-start; gap: calc(10 * var(--m)); font-size: calc(13 * var(--m)); }
.check input { width: calc(20 * var(--m)); height: calc(20 * var(--m)); }
.form .btn--primary { padding: calc(12 * var(--m)) calc(24 * var(--m)); font-size: calc(14 * var(--m)); letter-spacing: -.3px; }
/* --- Специальные цены: лента карточек, соседние выглядывают с двух сторон */
.tabs { gap: calc(8 * var(--m)); }
.tab { padding: calc(10 * var(--m)) calc(12 * var(--m)); font-size: calc(14 * var(--m)); letter-spacing: -.4px; }
/* Кнопка «Смотреть все» новостей в макете лежит под лентой во всю ширину. Шапку
секции раскрываем в контейнер (display:contents) и расставляем блоки порядком. */
#speccena .container, #novosti .container { display: flex; flex-direction: column; }
#speccena .section__head, #novosti .section__head { display: contents; }
#speccena .tabs { order: 1; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; }
#speccena .tabs::-webkit-scrollbar { display: none; }
/* Ленте порядок нужен явно: без него у неё order 0, как у заголовка секции,
и по DOM она встаёт ВЫШЕ вкладок — фильтры уезжали под карточки. */
#speccena .flats { order: 2; }
/* Стрелки на телефоне лишние: лента листается пальцем. */
#speccena .flats__nav { display: none; }
/* На странице ЖК в том же ряду «Все планировки» — она остаётся, прячем только стрелки. */
#ceny .flats__nav .icon-btn { display: none; }
#novosti .btn--ghost {
order: 3; justify-content: center; margin-top: calc(20 * var(--m));
padding: calc(12 * var(--m)) calc(19 * var(--m)); font-size: calc(14 * var(--m));
}
#novosti .news { order: 2; }
.flats, .news {
display: flex; gap: calc(8 * var(--m));
margin: calc(20 * var(--m)) calc(-12 * var(--m)) 0; padding: 0 calc(20 * var(--m));
overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; scroll-padding: 0 calc(20 * var(--m));
scrollbar-width: none;
}
.news { margin-top: 0; }
.flats::-webkit-scrollbar, .news::-webkit-scrollbar { display: none; }
.flat, .news__card { flex: 0 0 calc(100% - 40 * var(--m)); scroll-snap-align: center; }
.flat__head { padding: calc(20 * var(--m)) calc(20 * var(--m)) 0; }
.flat__head b { font-size: calc(16 * var(--m)); }
.flat__head span { font-size: calc(14 * var(--m)); }
.flat__plan { padding: calc(18 * var(--m)) 0 0; }
.flat__plan img { width: 62.5%; height: auto; aspect-ratio: 1 / 1; }
.flat__body { gap: calc(12 * var(--m)); padding: calc(20 * var(--m)); }
.flat__params { font-size: calc(14 * var(--m)); }
/* Верхний индекс у метража: 9 px с vertical-align:super читался как «м 2». */
.flat__params sup { font-size: calc(10 * var(--m)); vertical-align: calc(5 * var(--m)); letter-spacing: 0; }
.flat__price b { font-size: calc(18 * var(--m)); }
.flat__price s { font-size: calc(14 * var(--m)); }
.flat__opts { font-size: calc(14 * var(--m)); }
.flat__sale, .flat__until { font-size: calc(14 * var(--m)); }
.flat .btn--primary { padding: calc(12 * var(--m)) calc(24 * var(--m)); font-size: calc(14 * var(--m)); letter-spacing: -.3px; }
/* --- Больше, чем квадратные метры: фото — часть раскрытого пункта ------- */
.more { display: flex; flex-direction: column; gap: 0; }
.more__head { margin-bottom: calc(28 * var(--m)); }
.more__head .h2 { margin-bottom: calc(12 * var(--m)); max-width: calc(215 * var(--m)); }
.more__lead { width: auto; max-width: calc(300 * var(--m)); font-size: calc(15 * var(--m)); line-height: 1.4; }
/* display:contents распускает аккордеон, чтобы фото встало между пунктами;
в какой именно пункт — решает main.js по раскрытому. */
.acc { display: contents; }
.acc__item { margin-top: calc(8 * var(--m)); }
.acc__item:first-child { margin-top: 0; }
.acc__btn { gap: calc(12 * var(--m)); padding: calc(20 * var(--m)); }
.more .acc__btn { padding: calc(18 * var(--m)) calc(20 * var(--m)); }
.acc__icon { flex: 0 0 calc(20 * var(--m)); width: calc(20 * var(--m)); height: calc(20 * var(--m)); }
.acc__toggle { width: calc(32 * var(--m)); height: calc(32 * var(--m)); padding: calc(6 * var(--m)); }
.more .acc__toggle { padding: calc(6 * var(--m)); }
.more .acc__toggle img { width: calc(20 * var(--m)); height: calc(20 * var(--m)); }
.acc__panel, .more .acc__panel { padding: 0 calc(20 * var(--m)) calc(20 * var(--m)); font-size: calc(15 * var(--m)); line-height: 1.45; }
/* Фото приклеено к раскрытой карточке: поля 6 px синего, как в макете. */
.more__media {
height: auto; min-height: 0; position: relative; background: var(--blue-900);
border-radius: 0 0 var(--r-primary) var(--r-primary); padding: 0 calc(6 * var(--m)) calc(6 * var(--m));
}
.more__media img { position: static; width: 100%; height: auto; aspect-ratio: 324 / 242; border-radius: calc(12 * var(--m)); }
/* Кадры пунктов здесь в потоке, поэтому прячем их совсем: прозрачные держали бы место. */
.more__media[data-acc-media] img:not(.is-active) { display: none; }
.more__media::after { display: none; }
/* Только у «Больше, чем метры»: там к раскрытому пункту снизу приклеено фото.
Без .more правило срезало нижние углы у раскрытого вопроса во всех FAQ
(замечено на «Агентам» 24.09.2026). */
.more .acc__item.is-open { border-radius: var(--r-primary) var(--r-primary) 0 0; }
/* --- Способы покупки ---------------------------------------------------- */
.buy { grid-template-columns: 1fr; gap: calc(12 * var(--m)); }
.buy__card { height: auto; aspect-ratio: 336 / 240; }
.buy__text { left: 5.95%; top: 8.3%; gap: calc(6 * var(--m)); max-width: 52%; }
.buy__text p { font-size: calc(14 * var(--m)); line-height: 1.4; letter-spacing: -.4px; }
.buy__card--3 .buy__text, .buy__card--3 .buy__text p { max-width: 62%; }
.buy__arrow { left: 5.95%; bottom: 8.3%; width: calc(40 * var(--m)); height: calc(40 * var(--m)); padding: calc(10 * var(--m)); }
.buy__arrow img { width: calc(9.83 * var(--m)); height: calc(4.83 * var(--m)); }
/* height: auto обязательно повторить в каждом правиле карточки: на десктопе высота
задана селектором .buy__card--N .buy__img, он специфичнее одиночного .buy__img,
и общий сброс не срабатывал. Из-за этого на мобиле картинки сохраняли десктопные
высоты (396 и 516 в карточке 260) и тянулись непропорционально — у карточек 2 и 3
нет object-fit, поэтому фото просто растягивалось. Найдено 31.08.2026. */
.buy__img { height: auto; }
.buy__card--1 .buy__img { left: -6.85%; top: 2.1%; width: 111.6%; height: auto; }
.buy__card--2 .buy__img { left: 20.2%; top: -16.7%; width: 86.3%; height: auto; }
.buy__card--3 .buy__img { left: 20.5%; top: -4.2%; width: 112.5%; height: auto; }
/* --- 4 000+ семей: карточки в колонку ----------------------------------- */
.about__head { margin-bottom: calc(28 * var(--m)); }
.about__head .h2, .about__head p { width: auto; }
.about__head p { font-size: calc(15 * var(--m)); line-height: 1.4; }
.about__grid { gap: calc(12 * var(--m)); }
.about__cell { height: auto; aspect-ratio: 336 / 240; }
.about__cell--wide, .about__cell--sm { width: 100%; }
.about__cell--sm { aspect-ratio: auto; min-height: calc(220 * var(--m)); }
.about__cell--photo { aspect-ratio: 336 / 240; }
/* Текст и логотип были прибиты абсолютом к верху и низу карточки жёсткой
пропорции. На 390 (iPhone) заголовок ложится в три строки, лид тоже — и
абзац наезжал на «ИЛЛИДИУМ» внизу. Ставим их потоком: карточка растёт под
содержимое, логотип всегда идёт ПОСЛЕ текста. */
.about__cell--wide {
aspect-ratio: auto; min-height: calc(240 * var(--m));
display: flex; flex-direction: column; padding: calc(20 * var(--m));
}
.about__intro { position: static; width: 54%; }
.about__intro h3 { font-size: calc(18 * var(--m)); line-height: 1.35; letter-spacing: -.5px; }
.about__intro p { margin-top: calc(12 * var(--m)); font-size: calc(15 * var(--m)); line-height: 1.4; }
.about__logo {
position: static; z-index: 1; width: 45%; height: auto;
margin-top: calc(16 * var(--m)); padding-top: calc(4 * var(--m));
}
/* Дом занимает правую часть карточки во всю высоту — в макете он крупный. */
.about__cell--wide > img.about__photo {
left: auto; right: 0; top: 0; width: 38%; height: 100%;
object-fit: cover; object-position: left center;
}
.about__card { padding: calc(20 * var(--m)); gap: calc(20 * var(--m)); }
.about__card h3 { margin-bottom: calc(10 * var(--m)); font-size: calc(18 * var(--m)); line-height: 1.35; letter-spacing: -.5px; }
.about__card p { font-size: calc(15 * var(--m)); line-height: 1.4; }
.about__ic { padding: calc(12 * var(--m)); }
.about__ic img { width: calc(20 * var(--m)); height: calc(20 * var(--m)); }
/* --- Новости ------------------------------------------------------------ */
.news__card { gap: calc(8 * var(--m)); }
.news__top { font-size: calc(14 * var(--m)); }
.news__media { height: auto; aspect-ratio: 320 / 180; }
.news__title { max-width: none; font-size: calc(16 * var(--m)); }
/* --- Подвал: две карточки контактов рядом, ссылки одной колонкой -------- */
.footer { padding: calc(60 * var(--m)) 0 calc(24 * var(--m)); }
.footer__inner { grid-template-columns: 1fr; gap: calc(32 * var(--m)); }
.footer__left { gap: calc(24 * var(--m)); }
.footer__logo { width: calc(176 * var(--m)); height: calc(32 * var(--m)); }
/* В макете карточка телефона и карточка соцсетей стоят рядом по 164 px. */
.footer__left > div:last-child { display: grid; grid-template-columns: 1fr 1fr; gap: calc(8 * var(--m)); align-items: stretch; }
.footer__box + .footer__box { margin-top: 0; }
.footer__box { height: auto; min-height: calc(244 * var(--m)); padding: calc(16 * var(--m)); gap: calc(12 * var(--m)); }
.footer__box b { font-size: calc(15 * var(--m)); }
.footer__box p { font-size: calc(13 * var(--m)); line-height: 1.35; letter-spacing: -.35px; }
.footer__box--phone > div:first-child { width: auto; gap: calc(4 * var(--m)); }
/* Порядок в макете: телефон, текст, кот, кнопка. */
.footer__box-img { order: 1; position: static; width: calc(84 * var(--m)); height: auto; margin: 0 auto; }
.footer__box .btn { order: 2; align-self: stretch; justify-content: center; padding: calc(10 * var(--m)) calc(12 * var(--m)); font-size: calc(13 * var(--m)); letter-spacing: -.3px; }
.footer__socials { flex-direction: column; gap: calc(6 * var(--m)); }
.footer__socials .social { flex: 0 0 auto; width: 100%; height: calc(36 * var(--m)); }
.footer__right { min-height: 0; gap: calc(32 * var(--m)); }
.footer__cols { flex-direction: column; gap: calc(28 * var(--m)); }
.footer__col { gap: calc(12 * var(--m)); }
.footer__col b, .footer__col li, .footer__col--plain a { font-size: calc(15 * var(--m)); letter-spacing: -.4px; }
.footer__col ul { gap: calc(14 * var(--m)); }
.footer__bottom { flex-direction: column-reverse; align-items: stretch; gap: calc(24 * var(--m)); }
.footer__legal, .footer__info p, .footer__info b { width: auto; font-size: calc(14 * var(--m)); line-height: 1.45; letter-spacing: -.4px; }
/* --- Плашка Cookies (макет 42): 336x78 у нижнего края, без иконки -------- */
.cookie {
left: calc(12 * var(--m)); right: calc(12 * var(--m)); bottom: calc(20 * var(--m));
transform: none; width: auto; max-width: none; min-height: calc(78 * var(--m));
padding: calc(12 * var(--m)) calc(16 * var(--m)); gap: calc(12 * var(--m));
}
.cookie__ic { display: none; }
.cookie__text { font-size: calc(13 * var(--m)); line-height: 1.4; letter-spacing: -.35px; }
.cookie__btn { min-width: calc(89 * var(--m)); height: calc(40 * var(--m)); padding: 0 calc(16 * var(--m)); font-size: calc(14 * var(--m)); }
/* При открытом меню плашка закрывала кнопку заявки. */
body.is-mnav-open .cookie { display: none; }
/* --- Акции: лента 320x360, соседняя выглядывает (макеты 15, 17) ---------
На десктопе это сетка в четыре колонки, на 360 она вставала колонкой и
добавляла к странице ЖК 1684 px. Формула ленты та же, что у «Специальных
цен» на главной: карточка 100% - 40, поля контейнера съедаются margin. */
.promo-grid {
display: flex; gap: calc(8 * var(--m));
margin: 0 calc(-12 * var(--m)); padding: 0 calc(20 * var(--m));
overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; scroll-padding: 0 calc(20 * var(--m));
scrollbar-width: none;
}
.promo-grid::-webkit-scrollbar { display: none; }
.promo-tile {
flex: 0 0 calc(100% - 40 * var(--m)); scroll-snap-align: center;
height: auto; aspect-ratio: 320 / 360;
}
/* Отступ подписи и стрелки от краёв 20 (макет 17: текст x=32 при плитке x=12, стрелка 36
у правой и нижней кромки на 20). Раньше padding 20 складывался с left/right/bottom 20
базового правила: получалось 40, и подпись «уезжала» внутрь (Влад 17.09.2026). */
.promo-tile__foot { left: 0; right: 0; bottom: 0; padding: calc(20 * var(--m)); gap: calc(12 * var(--m)); }
.promo-tile__title { font-size: calc(16 * var(--m)); }
.promo-tile__arrow { width: calc(36 * var(--m)); height: calc(36 * var(--m)); }
.promo-tile__arrow img { width: calc(14 * var(--m)); height: calc(14 * var(--m)); }
/* Список акций — единственное место, где в макете (11) карточки идут колонкой
336x360 с зазором 12: там лента была бы неверна. */
body.post-type-archive-ill_promo .promo-grid {
display: grid; grid-template-columns: 1fr; gap: calc(12 * var(--m));
margin: 0; padding: 0; overflow: visible;
}
body.post-type-archive-ill_promo .promo-tile { aspect-ratio: 336 / 360; }
/* --- Направления деятельности: лента 320x340 (макет 26) -----------------
Карточка серая, фото показывается только у закрытой — механика раскрытия
та же, что на десктопе, меняются размеры и раскладка. */
.dirs {
display: flex; gap: calc(8 * var(--m));
margin: calc(20 * var(--m)) calc(-12 * var(--m)) 0; padding: 0 calc(20 * var(--m));
overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; scroll-padding: 0 calc(20 * var(--m));
scrollbar-width: none;
}
.dirs::-webkit-scrollbar { display: none; }
.dir {
flex: 0 0 calc(100% - 40 * var(--m)); scroll-snap-align: center;
height: auto; aspect-ratio: 320 / 340;
}
.dir__title { left: calc(20 * var(--m)); right: calc(20 * var(--m)); top: calc(21 * var(--m)); font-size: calc(16 * var(--m)); }
.dir__text {
left: calc(20 * var(--m)); right: calc(20 * var(--m)); top: calc(55 * var(--m));
font-size: calc(14 * var(--m)); line-height: calc(20 * var(--m));
}
.dir__toggle {
right: calc(20 * var(--m)); bottom: calc(20 * var(--m));
width: calc(40 * var(--m)); height: calc(40 * var(--m));
background-size: calc(13 * var(--m)) calc(13 * var(--m));
}
.strip-dots { display: flex; }
/* Кнопка «Смотреть все» в макетах 15 и 17 лежит ПОД лентой во всю ширину,
а не пилюлей у заголовка: шапку секции распускаем и расставляем порядком. */
#akcii, .section--other { display: flex; flex-direction: column; }
#akcii .section__head, .section--other .section__head { display: contents; }
#akcii .promo-grid, .section--other .promo-grid { order: 2; }
#akcii .strip-dots, .section--other .strip-dots { order: 3; }
#akcii .btn--ghost, .section--other .btn--ghost {
order: 4; justify-content: center; margin-top: calc(20 * var(--m));
padding: calc(12 * var(--m)) calc(19 * var(--m)); font-size: calc(14 * var(--m));
}
/* --- Плитки преимуществ: ряд 155x108 (макет 28) -------------------------
Пять плиток во всю ширину друг под другом давали +3061 к странице, и таких
секций на ней три. Ширина плитки здесь фиксированная, а не «экран минус поля»:
в макете видно сразу две с половиной. */
body.page-template-page-opisanie-proekta .op-feats {
display: flex; gap: calc(8 * var(--m));
margin: 0 calc(-12 * var(--m)); padding: 0 calc(12 * var(--m));
overflow-x: auto; overflow-y: hidden; scroll-snap-type: x proximity; scrollbar-width: none;
}
body.page-template-page-opisanie-proekta .op-feats::-webkit-scrollbar { display: none; }
/* Высота плитки — минимум, а не число: «Продуманные пешие маршруты» ложится
в три строки и при фиксированных 108 текст упирался в дно. Теперь плитка
растёт от текста, а соседи в ряду тянутся до самой высокой (flex stretch),
нижнее поле 17 держится при любом числе строк (Влад, 13.09). */
body.page-template-page-opisanie-proekta .op-feat {
flex: 0 0 calc(155 * var(--m)); scroll-snap-align: start;
height: auto; min-height: calc(108 * var(--m));
padding: calc(17 * var(--m)) calc(16 * var(--m));
}
body.page-template-page-opisanie-proekta .op-feat img { width: calc(22 * var(--m)); height: auto; margin: 0 0 calc(14 * var(--m)); }
body.page-template-page-opisanie-proekta .op-feat p { font-size: calc(14 * var(--m)); line-height: calc(18 * var(--m)); letter-spacing: -.3px; }
}
/* --- Бургер и мобильное меню (макеты 03, 06, 07) -------------------------- */
.burger { display: none; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: var(--r-secondary); background: var(--bg); }
.burger__box { position: relative; display: block; width: 14px; height: 10px; }
.burger__line { position: absolute; left: 0; width: 14px; height: 1.5px; border-radius: 2px; background: var(--black-900); transition: transform .2s ease, opacity .15s ease, background-color .2s ease; }
.burger__line:nth-child(1) { top: 0; }
.burger__line:nth-child(2) { top: 4.25px; }
.burger__line:nth-child(3) { top: 8.5px; }
body.is-mnav-open .burger { background: var(--blue-900); }
body.is-mnav-open .burger__line { background: #fff; }
body.is-mnav-open .burger__line:nth-child(1) { transform: translateY(4.25px) rotate(45deg); }
body.is-mnav-open .burger__line:nth-child(2) { opacity: 0; }
body.is-mnav-open .burger__line:nth-child(3) { transform: translateY(-4.25px) rotate(-45deg); }
body.is-mnav-open { overflow: hidden; }
.mnav { position: fixed; inset: 0; z-index: 40; background: #fff; overflow-y: auto; -webkit-overflow-scrolling: touch; }
.mnav[hidden] { display: none; }
/* Отступ под шапкой: в макете 03 от нижней кромки островка до «Новостройки» 25,
островок кончается на 68 — отсюда 93 (замер по фрейму, а не на глаз). */
.mnav__body { display: flex; flex-direction: column; padding: 93px 0 24px; min-height: 100vh; }
/* Разделителей между пунктами в макете нет — линии были самодеятельностью. */
.mnav__item {
display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3);
width: 100%; padding: 10px 0;
font-size: 16px; line-height: 1.4; letter-spacing: -.5px; text-align: left;
}
.mnav__chev { width: 16px; height: 16px; transform: rotate(-90deg); opacity: .6; }
.mnav__back { display: flex; align-items: center; gap: var(--sp-4); padding: 8px 0 16px; }
.mnav__back-btn { width: 32px; height: 32px; padding: 8px; background: var(--bg); box-shadow: none; }
.mnav__back-btn img { width: 9.83px; height: 4.83px; transform: rotate(90deg); }
.mnav__back-title { font-size: 16px; font-weight: 500; letter-spacing: -.5px; }
.mnav__sublink { display: block; padding: 8px 0; font-size: 14px; line-height: 1.4; letter-spacing: -.4px; }
.mnav__object { display: flex; align-items: center; gap: var(--sp-4); padding: 6px 0; }
.mnav__object-img { flex: 0 0 auto; width: 60px; height: 60px; border-radius: var(--r-secondary); object-fit: cover; }
.mnav__object-body { display: flex; flex-direction: column; gap: 2px; }
.mnav__object-title { font-size: 16px; font-weight: 600; letter-spacing: -.5px; }
.mnav__object-meta { display: flex; align-items: center; gap: 6px; font-size: 14px; letter-spacing: -.4px; color: var(--gray-900); }
.mnav__object-price { color: var(--blue-900); }
.mnav__contacts { margin-top: 32px; }
.mnav__row { display: flex; flex-direction: column; gap: 4px; }
.mnav__row + .mnav__row { margin-top: 16px; }
.mnav__label { font-size: 14px; line-height: 1.4; letter-spacing: -.4px; color: var(--gray-900); }
.mnav__value { font-size: 14px; line-height: 1.4; letter-spacing: -.4px; }
.mnav__social { display: flex; gap: var(--sp-3); margin-top: 4px; }
.mnav__social .social { width: 40px; height: 40px; }
.mnav__social .social img { width: 14px; height: auto; }
/* Кнопка стояла на margin-top: auto и уезжала к нижней кромке экрана: на низких
вьюпортах она прижималась к значкам соцсетей, на высоких висела в пустоте.
В макете между значками и кнопкой 35, а сам блок не растянут по высоте. */
.mnav__cta { margin-top: 35px; padding: 12px 24px; font-size: 14px; letter-spacing: -.3px; }
/* ==========================================================================
Масштаб сайта на широких мониторах
Макет нарисован под окно 1440. На мониторе 2048 сайт занимал середину экрана
и читался мелким. zoom увеличивает всё разом — ширины, высоты, шрифты, отступы,
поэтому пропорции макета сохраняются; переверстывать ничего не нужно.
Ступени привязаны к ширине окна: масштаб включается только тогда, когда
1440 × масштаб уже помещается в окно, иначе появилась бы горизонтальная прокрутка.
Потолок 1.09 задан по ПИКу (эталон Влада, замер 09.09.2026 при 1920x950 и 2560x1310):
у ПИКа контент 1440 px и кегли 16/32 ОДИНАКОВЫ на обоих мониторах, разная только
ширина полей (233 и 553). Наш контент 1320 x 1.09 = 1439, поля 240 и 560 — тот же
размер. Выше масштаб не растёт: ширину на широком мониторе добирают поля, а не
размер элементов. История: 07.09 лестница шла до 2.40 (Влад назвал крупным),
08.09 срезана до 1.15 (шире и на 15 % крупнее ПИКа), 09.09 приведена к ПИКу.
========================================================================== */
body { zoom: var(--z); }
@media (min-width: 1520px) { :root { --z: 1.05; --zh: 1.05; } }
@media (min-width: 1600px) { :root { --z: 1.09; --zh: 1.09; } }
/* ==========================================================================
Стеклянная шапка
Островок полупрозрачный и размывает то, что под него заезжает при прокрутке
и лежит под ним на страницах с фото в первом экране.
saturate обязателен: без него размытая картинка под шапкой сереет.
Белого блика по верхней кромке нет намеренно — на прозрачном стекле поверх
тёмного фото он читался сплошной белой полосой (31.08.2026).
========================================================================== */
.header__inner {
background: rgba(255, 255, 255, var(--hdr-alpha));
-webkit-backdrop-filter: blur(var(--hdr-blur)) saturate(180%);
backdrop-filter: blur(var(--hdr-blur)) saturate(180%);
box-shadow:
0 0 0 1px rgba(46, 56, 63, .07),
0 1px 2px rgba(46, 56, 63, .05),
0 10px 34px rgba(46, 56, 63, .10);
}
/* Плавающая панель якорей — та же стеклянная физика, что у шапки: она всплывает
поверх контента, и сплошная белая плашка выглядела бы чужой заплаткой. */
body:not(.anchors--inline) .anchors {
background: rgba(255, 255, 255, var(--anch-alpha));
-webkit-backdrop-filter: blur(var(--anch-blur)) saturate(180%);
backdrop-filter: blur(var(--anch-blur)) saturate(180%);
box-shadow: 0 0 0 1px rgba(46, 56, 63, .07), 0 10px 34px rgba(46, 56, 63, .14);
}
/* Второй ярус на страницах ЖК (прилипшие якоря) — то же стекло, иначе виден стык. */
.anchors.is-stuck::before {
background: rgba(255, 255, 255, .24);
-webkit-backdrop-filter: blur(9px) saturate(180%);
backdrop-filter: blur(9px) saturate(180%);
box-shadow: 0 0 0 1px rgba(46, 56, 63, .07), 0 10px 34px rgba(46, 56, 63, .10);
}
/* Выпадающие панели плотнее шапки: сквозь них идёт текст, его надо читать. */
.drop {
background: rgba(255, 255, 255, .92);
-webkit-backdrop-filter: blur(9px) saturate(180%);
backdrop-filter: blur(9px) saturate(180%);
box-shadow: 0 0 0 1px rgba(46, 56, 63, .07), 0 12px 34px rgba(46, 56, 63, .14);
}
/* По стеклу подсветка пункта — светлее фона, серая плашка на нём выглядит грязью. */
.nav__item:hover,
.nav__group:hover > .nav__item,
.nav__group:focus-within > .nav__item,
.drop__link:hover,
.drop-card:hover { background: rgba(255, 255, 255, .55); }
/* Где backdrop-filter не поддерживается (Firefox до 103, часть Android-браузеров),
размытия не будет — тогда подложка почти непрозрачная, иначе меню ляжет прямо на фото. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
.header__inner, .drop, .anchors.is-stuck::before,
body:not(.anchors--inline) .anchors { background: rgba(255, 255, 255, .94); }
}
/* ==========================================================================
Высоты блоков по стенду (Влад, 04.09.2026)
Источник — tools/preview/state/*.json, сведённый tools/state_report.py.
Числа не подобраны на глаз: Влад крутил ползунки на стенде, здесь записан результат.
Замер снят в окне 1701x817 — тогда считалось, что это его окно на 2К. Проверка через
Windows API 09.09.2026 показала: оба его монитора (2560 и 1920) работают на 100 %,
окна 2560x1310 и 1920x950. На числа это не влияет: высоты заданы формулами от --vh
и пересчитываются от текущего окна, а не от того, в котором их снимали.
Всё заперто в min-width: 1101px намеренно. Планшет (<=1100) и мобильная
версия (<=700) считаются от своих макетов, переносить туда десктопные
числа нельзя: там другая раскладка.
Не перенесено сознательно: подвал и карточки ЖК .jk__media. Их задел
глобальный ползунок «высота карточек» на двух страницах в РАЗНЫЕ стороны
(Коммерция 110 %, О компании 90 %), а элементы общие для всего сайта —
правка сломала бы остальные страницы.
========================================================================== */
@media (min-width: 1101px) {
/* --- Страницы ЖК: Атмосфера, Ботаника, Шоколад (шаблон общий) ---------- */
/* ⚠️ 14.09.2026: ко всем вычитаемым добавлено ещё 30 (итого +50 к числам 04.09).
На окне 955 запас между блоком и просветом был 80 при шаге колеса 100: один
щелчок — низ под островом, следующий — заголовок под шапкой. Выбор Влада 14.09
из двух: укоротить блоки, а не включать доводку. Запас теперь ≈ 113. */
/* «О проекте» — плитки от высоты окна, как остальные экранные блоки (12.09.2026):
70 % со стенда 04.09 выглядели сплющенными, 100 % (310/640) уходили под остров,
80 % оставляли дыру до острова. Голова блока (заголовок, адрес, текст) — 155
в единицах вёрстки, просвет шапка..остров — окно − 121, зазор до острова 30:
широкая плитка = окно − 306, потолок 640 (макет), пол 448. Малые — половина
широкой минус зазор. */
body.single-ill_object .jk-tiles { --tile: clamp(448px, calc(100 * var(--vh) - 336px), 640px); gap: var(--sp-6); }
body.admin-bar.single-ill_object .jk-tiles { --tile: clamp(448px, calc(100 * var(--vh) - 336px - 32px / var(--z)), 640px); }
body.single-ill_object .jk-tile { height: calc((var(--tile) - var(--sp-6)) / 2); }
body.single-ill_object .jk-tile:nth-child(1) { height: var(--tile); }
/* «Специальные цены» — 85 %, воздух сверху увеличен до 145 */
body.single-ill_object #ceny { margin-top: 145px; }
body.single-ill_object #ceny .section__title { margin-bottom: 34px; }
body.single-ill_object #ceny .section__head { gap: 26px; margin-bottom: 17px; }
body.single-ill_object #ceny .flats { gap: 17px; }
body.single-ill_object #ceny .flat__head { gap: 17px; }
body.single-ill_object #ceny .flat__plan img { height: 188px; }
body.single-ill_object #ceny .flat__body { gap: 17px; padding: 17px; }
body.single-ill_object #ceny .flat__foot { padding-top: 29px; }
/* Ориентир Влада 04.09.2026: блок целиком помещается между шапкой и нижним
островом якорей, но не впритык.
⚠️ Замерять просвет ТОЛЬКО с принятыми куками: пока висит плашка cookies,
скрипт поднимает остров на её высоту через --anch-lift, и просвет выходит
на 96 точек меньше настоящего. Замер снят в окне 1701x817:
низ шапки 68, верх острова 764 — просвет 696 экранных, при тогдашнем zoom 1.15 это
605 в единицах вёрстки. Зазор Влад выбрал минимальный, 6 экранных точек
сверху и снизу (решение 04.09.2026), отсюда потолок блока 595.
⚠️ Высоты этих трёх блоков заданы НЕ числом, а формулой от окна
`calc(100 * var(--vh) - N)`. Причина: остров якорей прибит к низу окна, а
число подогнано под одну его высоту — на окне другой высоты низ блока до
острова не достаёт (или лезет под него). Приём тот же, что у .jk--wide
.jk__media выведены из замера при окне 1701x817, где
100 * var(--vh) = 710 в единицах вёрстки. max(...) — нижний порог, чтобы на
низком окне блок не схлопнулся. Вариант для .admin-bar вычитает полосу WP.
⚠️ 12.09.2026: ко всем вычитаемым добавлено 20. Доводку прокрутки Влад
выключил (примагничивание не понравилось), а при «блок = окно − 155» между
блоком и просветом шапка..остров оставалось 24 экранных точки — меньше шага
колеса (100), и попасть блоком в просвет было нельзя. Сначала добавили 80
(люфт 124) — Влад: «блоки узкие, пусто». Компромисс — люфт ≈ 65: блок выше,
попадание колесом не гарантировано, но вдвое проще, чем при 24. */
/* Галерея: голова 48 + отступ 20 + кадр = окно - 243 (было 223 до 12.09).
Вычитаемое подняли на 20 (04.09.2026): при точном равенстве блока просвету
любой недокрут колеса загонял низ под остров, запаса не было совсем. */
body.single-ill_object #galereya .section__head { gap: 21px; margin-bottom: 14px; }
body.single-ill_object #galereya .gallery__img { height: clamp(320px, calc(100 * var(--vh) - 273px), 700px); }
body.admin-bar.single-ill_object #galereya .gallery__img { height: clamp(320px, calc(100 * var(--vh) - 273px - 32px / var(--z)), 700px); }
body.single-ill_object #galereya .gallery__note { padding: 17px; }
/* Карта: голова 48 + 20 + плитки 92 + 20 + карта = окно - 355 (было 335 до 12.09) */
body.single-ill_object #karta .section__head { gap: 20px; margin-bottom: 13px; }
body.single-ill_object #karta .places { --pg: 13px; }
body.single-ill_object #karta .infra-map img, body.single-ill_object #karta .infra-map .embed { height: clamp(260px, calc(100 * var(--vh) - 385px), 680px); }
body.admin-bar.single-ill_object #karta .infra-map img, body.admin-bar.single-ill_object #karta .infra-map .embed { height: clamp(260px, calc(100 * var(--vh) - 385px - 32px / var(--z)), 680px); }
/* Тур по проекту — 40 %, самый сильный ужим на странице */
body.single-ill_object #tur .section__title { margin-bottom: 16px; }
body.single-ill_object #tur .tour { gap: 8px; }
body.single-ill_object #tur .tour__card { min-height: 216px; padding-top: 10px; padding-bottom: 10px; }
/* Ряд задаёт не карточка (ей хватает 216), а кадр: у .tour__media высоты не
было, height: 100% у картинки не разрешался, и она разворачивалась в свою
пропорцию — 677 экранных при просвете 696, низ блока уходил под остров
якорей (жалоба Влада 05.09.2026). Приводим к тому же размеру, что галерея,
карта, отделка и способы покупки: блок целиком = окно - 155.
Заголовок 45 + отступ 16, значит кадру остаётся окно - 236 (было 216 до 12.09). */
body.single-ill_object #tur .tour__media { height: clamp(300px, calc(100 * var(--vh) - 266px), 700px); }
body.admin-bar.single-ill_object #tur .tour__media { height: clamp(300px, calc(100 * var(--vh) - 266px - 32px / var(--z)), 700px); }
/* Отделка от застройщика: тот же размер, что у галереи, карты и способов
(просьба Влада 04.09.2026) — то есть блок целиком = окно - 155. Голова у
него тяжелее прочих: заголовок 45 + 28 + вкладки 48 + 20 = 141, поэтому
кадру остаётся окно - 316 (было 296 до 12.09). */
/* +20 над заголовком «О проекте» (Влад 18.09.2026); якорь ставит заголовок туда же, где стоял. */
body.single-ill_object #o-proekte { padding-top: 20px; }
body.single-ill_object section#o-proekte { scroll-margin-top: calc(var(--hdr-top) + var(--hdr-h) + 24px - 20px); }
body.admin-bar.single-ill_object section#o-proekte { scroll-margin-top: calc(var(--hdr-top) + var(--hdr-h) + 24px + 32px / var(--z) - 20px); }
body.single-ill_object #otdelka { margin-top: 110px; padding-top: 10px; } /* +10 над заголовком (Влад 18.09.2026: +50, −20, −20) */
/* Переход по якорю «Отделка» ставит заголовок туда же, где он стоял до +30: отступ якоря меньше на эти 30. */
body.single-ill_object section#otdelka { scroll-margin-top: calc(var(--hdr-top) + var(--hdr-h) + 24px - 10px); }
body.admin-bar.single-ill_object section#otdelka { scroll-margin-top: calc(var(--hdr-top) + var(--hdr-h) + 24px + 32px / var(--z) - 10px); }
body.single-ill_object #otdelka .section__title { margin-bottom: 28px; }
body.single-ill_object #otdelka .section__head { gap: 21px; margin-bottom: 14px; }
/* 18.09.2026: кадр на 50 выше (Влад по снимкам 1920×945: под кадром оставалась пустота), окно − 296. */
body.single-ill_object #otdelka .finish__img { height: clamp(260px, calc(100 * var(--vh) - 296px), 700px); }
body.admin-bar.single-ill_object #otdelka .finish__img { height: clamp(260px, calc(100 * var(--vh) - 296px - 32px / var(--z)), 700px); }
/* Способы покупки: заголовок 45 + 26 + сетка = окно - 247 (было 227 до 12.09) */
body.single-ill_object #sposoby { margin-top: 150px; }
body.single-ill_object #sposoby .section__title { margin-bottom: 26px; }
/* Высоту ряда задаёт не сетка карточек, а фото: у него в разметке есть
width/height, то есть пропорция, и его собственный вклад (428) оказался
больше ужатой сетки. Поэтому ряд задан явно: половина ряда минус зазор 13. */
/* Потолки = макет (14.09.2026, вопрос Влада про 2К): формула от окна росла без предела,
и на 2560x1310 ряд выходил 953 против 524 в макете. «О проекте» потолок получил 12.09,
остальные экранные блоки — сегодня. Пол оставлен прежний. */
body.single-ill_object #sposoby .ways { gap: 13px; grid-auto-rows: minmax(clamp(360px, calc(100 * var(--vh) - 277px), 524px), auto); }
body.admin-bar.single-ill_object #sposoby .ways { grid-auto-rows: minmax(clamp(360px, calc(100 * var(--vh) - 277px - 32px / var(--z)), 524px), auto); }
body.single-ill_object #sposoby .ways__media { min-height: 0; } /* минимум задаёт clamp строки .ways */
/* Высоту сетки задаёт grid-auto-rows, а не карточки: ползунок его не трогал,
поэтому строки остались по 250 и блок не ужался. 199 x 2 + зазор 13 = 411.
Ниже нельзя: стрелка карточки прибита к низу (bottom 24, размер 40), а над
ней текст в три строки — им нужно 135. */
body.single-ill_object #sposoby .ways__grid { gap: 13px; grid-auto-rows: minmax(clamp(173px, calc((100 * var(--vh) - 290px) / 2), 255px), auto); }
body.admin-bar.single-ill_object #sposoby .ways__grid { grid-auto-rows: minmax(clamp(173px, calc((100 * var(--vh) - 290px - 32px / var(--z)) / 2), 255px), auto); }
/* minmax(…, auto): длинный текст растит карточку, а не наезжает на стрелку (Влад 16.09.2026).
Низ 80 = стрелка 40 + её отступ 24 + зазор 16 до текста (было 55: текст мог лечь на стрелку). */
body.single-ill_object #sposoby .ways__card { padding-top: 16px; padding-bottom: 80px; }
/* Ход строительства — только воздух сверху */
body.single-ill_object #hod { margin-top: 110px; }
/* --- Главная ----------------------------------------------------------- */
/* «Специальные цены» — 90 % */
body.home #speccena { margin-top: 90px; }
body.home #speccena .section__title { margin-bottom: 36px; }
body.home #speccena .section__head { gap: 27px; margin-bottom: 18px; }
body.home #speccena .flats { gap: 18px; }
body.home #speccena .flat__head { gap: 18px; }
body.home #speccena .flat__plan img { height: 199px; }
body.home #speccena .flat__body { gap: 18px; padding: 18px; }
body.home #speccena .flat__foot { padding-top: 31px; }
/* «Больше, чем квадратные метры» — 85 % */
body.home .more { gap: 17px; }
/* Высота не числом: колонка аккордеона выше фото (594 против 557 замером
04.09.2026), и любое фиксированное число снова разойдётся, как только
раскроется пункт с другим текстом. auto + stretch сетки держит их вровень. */
body.home .more__media { height: auto; align-self: stretch; }
body.home .more .acc__btn { padding-top: 20px; padding-bottom: 20px; }
/* «4 000+ семей» — 80 %, воздух сверху увеличен до 150 */
body.home #o-kompanii { margin-top: 150px; }
body.home #o-kompanii .about__head { gap: 24px; }
body.home #o-kompanii .about__grid { gap: 16px; }
body.home #o-kompanii .about__cell { height: 288px; }
/* Кадр дома масштабируется целиком, а не только по высоте: при ширине поля 336
и object-fit: contain кадр 318 высотой ужимается до 269 и центруется внутри
поля — отсюда сдвиг вправо и потерянный вылет за кромку карточки.
Числа — макет × .8: top 20, ширина 336, вылет вправо 30. */
body.home #o-kompanii .about__cell--wide > img.about__photo {
top: 16px; left: auto; right: -24px; width: 269px; height: 318px;
}
/* Логотип в макете отбит от НИЗА карточки на 24 (top 302 при высоте 360).
После ужима до 288 фиксированный top увёл его за кромку с overflow: hidden —
считаем от низа, тогда высота карточки ему безразлична. */
body.home #o-kompanii .about__logo { top: auto; bottom: 24px; }
body.home #o-kompanii .about__card { padding-top: 19px; padding-bottom: 19px; }
/* --- Клиентам и Покупка: один и тот же блок-оффер, оба по 90 % --------- */
body.page-template-page-klientam .offer,
body.page-template-page-pokupka .offer { gap: 18px; }
body.page-template-page-klientam .offer__text,
body.page-template-page-pokupka .offer__text { min-height: 540px; padding-top: 22px; padding-bottom: 22px; }
body.page-template-page-klientam .offer__media,
body.page-template-page-pokupka .offer__media { height: 540px; }
body.page-template-page-pokupka .feats { gap: 18px; }
body.page-template-page-pokupka .feat { min-height: 173px; padding-top: 22px; padding-bottom: 22px; }
/* Вопросы клиентов придвинуты к офферу: 100 -> 55 */
body.page-template-page-klientam .buy-pane--extra + .section,
body.page-template-page-klientam .offer + .section { margin-top: 55px; }
/* --- Коммерция: карточки крупнее (110 %), отделка мельче (70 %) -------- */
/* Обложка на весь экран (решение Влада 04.09.2026): страницы ЖК и Коммерция.
Прежняя формула держала меньшее из пропорции макета и высоты окна минус
--hero-gap, чтобы снизу выглядывал край следующего блока. От этого отказались:
обложка ровно в окно, пропорция макета больше не ограничивает. */
/* Имя класса удвоено намеренно: прежние пороги .page-hero.page-hero--jk
(min-height 760) и .page-hero--slider (520) заданы в единицах ДО zoom и на
широком мониторе перебивали бы полный экран, делая обложку выше окна. */
/* +30 — это отрицательный отступ .content: белое полотно наезжает на обложку
на 30, и без добавки его край выглядывал бы снизу, ровно то, от чего ушли.
Нижний отступ увеличен на те же 30: низ обложки ушёл под кромку окна, и без
добавки метки и якоря прижимались бы к самому краю экрана. */
.page-hero.page-hero--jk,
.page-hero.page-hero--slider { height: calc(100 * var(--vh) + 30px); min-height: 0; }
body.admin-bar .page-hero.page-hero--jk,
body.admin-bar .page-hero.page-hero--slider { height: calc(100 * var(--vh) + 30px - 32px / var(--z)); }
/* Обе обложки прижимают начинку к низу одинаково (просьба Влада 04.09.2026:
«на ЖК информация очень высоко, сделай как у коммерции»). Было 180 против 90:
--hero-pb 150 плюс те же 30 на наезд .content, отчего блок с названием ЖК
висел на 104 экранных точки выше, чем на Коммерции. */
.page-hero.page-hero--jk,
.page-hero.page-hero--slider { padding-bottom: 90px; }
/* --- Коммерция: раскладка «от содержимого», решение Влада 05.09.2026 ------
Отказ от подгонки высот числами. Прежняя схема (высоты в px, снятые с макета,
плюс общий zoom страницы) на каждом мониторе давала свою картинку: масштаб
считается от ШИРИНЫ окна, а место по вертикали даёт ВЫСОТА окна, и пропорция
у мониторов разная. Отсюда «на 2K блок посередине, на FullHD ниже».
Теперь: страница не масштабируется, вместо этого тянется полоса контента,
кадры заданы пропорцией, отступы резиновые. Первый экран остаётся в окно.
Пробы, по которым выбрано: tools/preview/proba/. Остальные страницы пока
живут на старой схеме, переносить их отдельно. */
/* Потолки clamp подняты 07.09.2026: прежние значения были сняты с FullHD и
упирались уже на 1920, поэтому на 2560 контейнер занимал 61 % ширины окна,
а на 4К меньше половины, и страница стояла узкой полосой при крупной обложке.
Теперь верхняя граница отодвинута до 4К, а доли (81 % ширины, кегли, отступы)
держатся одинаковыми на всех мониторах. */
/* Шапка и плашка cookies сквозные: на Коммерции общий zoom снят, поэтому они
масштабируются отдельной переменной и совпадают с остальными страницами. */
body.page-template-page-kommerciya .header,
body.page-template-page-kommerciya .cookie { zoom: var(--zh); }
/* Внутри шапки контейнер общесайтовый: резиновый контейнер Коммерции под
масштабом растянул бы её до самых краёв окна. */
/* Шапка на всём сайте одна и та же: базовый контейнер под тем же масштабом,
что и на остальных страницах. Резиновый контейнер Коммерции делал её другой
ширины, чем на страницах ЖК (замечание Влада 07.09.2026). */
body.page-template-page-kommerciya .header { --container: 1320px; --gutter: 60px; }
/* Обложка Коммерции лежит под шапкой, но не масштабируется вместе с ней:
после увеличения шапки хлебные крошки уходили под неё. Отступ повторяет
высоту шапки (15 воздуха + 44 островок + 8) с тем же масштабом. */
/* У обложки уже есть свой отступ 84 под шапку, но здесь он не масштабируется
вместе с ней (zoom страницы снят). Добавляем ровно разницу, и крошки встают
на ту же высоту, что на страницах ЖК, «О компании», «Клиентам», «Акции». */
body.page-template-page-kommerciya .page-hero--slider .page-hero__inner {
padding-top: calc(84px * (var(--zh) - 1));
}
/* Кегли крошек и меток тоже повторяют общесайтовые 14 и 13 под тем же
масштабом, а не свою резиновую шкалу: иначе они отличались от всех
остальных страниц. */
body.page-template-page-kommerciya .crumbs { font-size: calc(14px * var(--zh)); }
body.page-template-page-kommerciya .page-hero__badges .badge { font-size: calc(13px * var(--zh)); padding: calc(5px * var(--zh)) calc(10px * var(--zh)); }
body.page-template-page-kommerciya {
--z: 1; zoom: 1;
/* Ширина полосы контента считается так же, как у шапки: макетные 1320 под
общим масштабом. Иначе края шапки и карточек не совпадали (на FullHD
расхождение доходило до 95 точек). Резиновыми остаются кегли и отступы. */
--container: calc(1320px * var(--zh));
--gutter: calc(60px * var(--zh));
}
/* Кегли — тем же множителем --zh, что и контейнер. До 12.09.2026 они росли от
ширины окна (clamp по vw, до 36 px), а контейнер с 09.09 замер на 1320×1.09:
карточка не росла, текст рос, и на 2К «летняя веранда» вылезала за карточку
и ложилась на кресла (замер: перекрытие 28 при 1920, 192 при 2560). */
body.page-template-page-kommerciya .h2 { font-size: calc(40px * var(--zh)); }
body.page-template-page-kommerciya .section__title { font-size: calc(40px * var(--zh)); }
body.page-template-page-kommerciya .km-card__title { font-size: calc(24px * var(--zh)); }
body.page-template-page-kommerciya .km-card__text { font-size: calc(16px * var(--zh)); }
/* Ограничители ширины внутри карточек были в пикселях, снятых с макета. Когда
кегль вырос вместе с окном, заголовок перестал помещаться в свои 210 точек
и налезал на текст соседней колонки. В долях кегля (em) они растут вместе
с ним, и колонки держатся. Числа те же, что были на FullHD, поделённые
на тогдашний кегль. */
body.page-template-page-kommerciya .km-card__title { max-width: 12em; }
body.page-template-page-kommerciya .km-card__text { max-width: 21em; }
body.page-template-page-kommerciya .km-card--photo .km-card__text { max-width: 18em; }
body.page-template-page-kommerciya .km-card--blue .km-card__text { max-width: 13.6em; }
body.page-template-page-kommerciya .km-card--row .km-card__title { max-width: 7.5em; }
body.page-template-page-kommerciya .km-card--row .km-card__text { max-width: 20.5em; }
body.page-template-page-kommerciya .km-card--blue .km-card__ill { width: 28.4%; top: 3.8%; right: 3.8%; }
/* Заголовок обложки тоже был фиксированным: на широком окне он выглядел
мелким, а строка ломалась посреди цены. */
body.page-template-page-kommerciya .page-hero--slider .page-hero__title { font-size: clamp(34px, 2.5vw, 96px); max-width: 15em; }
/* Все четыре плитки одной высоты 360 и с одним отступом 24 (макет 23), оба
числа под масштабом контейнера --zh. До 17.09.2026 высоту задавала пропорция
2.15 от широкой плитки: второй ряд выходил 302 вместо 360, а отступ рос от
ширины окна (clamp по vw: 31 при 1920, 41 при 2560) быстрее самой плитки. */
body.page-template-page-kommerciya .km-card { min-height: calc(360px * var(--zh)); aspect-ratio: auto; padding: calc(24px * var(--zh)); }
body.page-template-page-kommerciya .km-card--tall { min-height: calc(360px * var(--zh)); }
/* «Летняя веранда» раскладкой как «Удобная парковка» (Влад 18.09.2026):
заголовок сверху слева, текст прижат к низу, кресла в правой половине у
нижней кромки. Кресла у правого края без поля: в самом файле справа 6 %
прозрачного (кромка кресел выходит на ~26 от края, как знак у «Парковки»). До этого заголовок и текст шли в ряд, кресла лежали внизу
по центру во всю ширину (так в макете), и под них резервировался пол 25.6 %. */
body.page-template-page-kommerciya .km-card--row { flex-direction: column; gap: 0; align-items: stretch; }
body.page-template-page-kommerciya .km-card:has(.km-card__ill--veranda) { padding-bottom: calc(24px * var(--zh)); padding-right: 50%; }
body.page-template-page-kommerciya .km-card:has(.km-card__ill--veranda) .km-card__title { margin-bottom: auto; max-width: 12em; }
body.page-template-page-kommerciya .km-card:has(.km-card__ill--veranda) .km-card__text { margin-top: auto; max-width: 13.6em; }
body.page-template-page-kommerciya .km-card__ill--veranda {
left: auto; right: 0; bottom: 0; top: auto; transform: none;
width: 58%; max-width: none; height: auto; object-fit: contain; object-position: right bottom;
}
/* Второй ряд целиком без пропорции: у «Потолков» aspect-ratio перебивал
растяжение по ряду, и при выросшей веранде карточки становились разной
высоты. Пол ряда — та же пропорция 2.15 от ширины колонки, выраженная
через контейнер: (1320 × zh − зазор 20) / 2 / 2.15. */
/* Второй ряд: та же высота 360, что и первый (раньше пол ряда считался от пропорции 2.15). */
body.page-template-page-kommerciya .km-grid:not(.km-grid--lead) .km-card { min-height: calc(360px * var(--zh)); }
body.page-template-page-kommerciya .otdelka__img { height: auto; aspect-ratio: 21 / 9; }
/* Лента «Проекты в Твери» масштабируется целиком тем же zoom-ом, что баннер
консультации и подвал: карточка внутри — макетные px, как на главной.
До 18.09.2026 карточка тянулась по частям clamp-ами по vw, и они росли
вразнобой: адрес оставался 14 (его держит .t-14), значок растягивался в
квадрат 31×31 из 15×16, плашка «Строится» 23-м кеглем при 52 в высоту,
название и цена 32 (Влад: «на 2К огромные, значок сплющенный, шрифт мелкий»). */
body.page-template-page-kommerciya .jk-carousel { zoom: var(--zh); }
/* Две целые карточки и край третьей на любом мониторе (решение Влада
07.09.2026): выглядывающий край сразу говорит, что блок листается.
Делитель 2.35 = две карточки с зазорами плюс примерно 14 % ширины
полосы под третью. */
body.page-template-page-kommerciya .jk-carousel .jk {
flex: 0 0 calc((100% - 30px * 2) / 2.35); width: auto;
}
body.page-template-page-kommerciya .jk-carousel .jk__media { height: auto; aspect-ratio: 645 / 420; }
/* Только кнопки в содержимом: шапка, подвал и баннер масштабируются zoom-ом, там clamp по vw удваивал размер
(подвал на 2К: 285×92 вместо 14-го кегля, замер 16.09.2026). */
body.page-template-page-kommerciya .content .btn--primary { font-size: clamp(16px, 1.05vw, 28px); padding: clamp(15px, 1vw, 27px) clamp(24px, 1.6vw, 43px); }
/* Баннер консультации масштабируется целиком zoom-ом (--zh), поэтому внутри него кнопка в макетных
px: с clamp по vw она росла дважды и на 2К была 424×92 вместо 283×59 (замер 16.09.2026). */
body.page-template-page-kommerciya .consult--km .btn--primary { font-size: 16px; padding: 15px 30px; }
/* Баннер консультации собран из макетных пикселей: здание, капсула с ключом и
карточка оператора стоят на точных координатах друг относительно друга.
Растягивать его по частям бессмысленно (заголовок ломался на шесть строк,
капсула уезжала от здания), поэтому масштабируем блок целиком тем же
множителем, а ширину делим на него же, чтобы он остался в полосе контента. */
body.page-template-page-kommerciya .consult--km { zoom: var(--zh); }
/* Футер такой же сквозной, как шапка: без масштаба он оставался мелким. */
body.page-template-page-kommerciya .footer { zoom: var(--zh); --container: 1320px; --gutter: 60px; }
body.page-template-page-kommerciya .consult--km { min-height: 0; padding: 40px; }
/* Воздух резиновый. */
body.page-template-page-kommerciya .km-grid { gap: clamp(16px, 1.3vw, 52px); }
body.page-template-page-kommerciya .content { padding: clamp(44px, 3.6vw, 152px) 0 clamp(48px, 4.4vw, 180px); }
body.page-template-page-kommerciya .section + .section { margin-top: clamp(56px, 5vw, 208px); }
body.page-template-page-kommerciya .km-grid + .section { margin-top: clamp(56px, 5vw, 208px); }
body.page-template-page-kommerciya .section .section__title { margin-bottom: clamp(20px, 1.8vw, 68px); }
/* Первый экран — единственное место, где высоту привязываем к окну.
zoom здесь уже снят, поэтому считаем прямо в vh, без деления на масштаб.
+30 — наезд белого полотна (margin-top: -30 у .content). */
body.page-template-page-kommerciya .page-hero.page-hero--slider { height: calc(100vh + 30px); padding-bottom: clamp(60px, 5vw, 200px); }
body.admin-bar.page-template-page-kommerciya .page-hero.page-hero--slider { height: calc(100vh + 30px - 32px); }
/* Отделка занимает весь остаток экрана под шапкой (просьба Влада 05.09.2026:
«снизу на пару пикселей выглядывает Проекты в Твери»). Причина была в том,
что высота блока идёт от ширины окна, а зазор до кромки от высоты, и на
FullHD следующий заголовок попадал в окно на 13 точек. Тянем сам блок до
кромки: тогда следующий уходит за неё при любом окне, а не при одном. */
/* 16.09.2026: блок не растягивать. Раньше секция тянулась до кромки окна (min-height: 100vh − 88),
и на 2К отделка вырастала выше макета, тогда как блоки ЖК с 14.09 упираются в потолок макета.
Теперь как на ЖК: кадр = окно − шапка − заголовок, но не выше 700 макетных (× --zh).
На FullHD формула даёт ~660 и потолок не срабатывает, вид прежний. */
/* Воздух, оставшийся под кадром после растяжки блока, отдаём самому кадру
(просьба Влада 05.09.2026). height:100% по цепочке слайдера не работает:
у .otdelka__slide высота auto, и картинка возвращается к своей пропорции
(проверено, на окне 2560x1300 под кадром оставалось 248 точек).
Поэтому высоту кадра считаем от окна: минус шапка (88) и минус заголовок
с отступом — он резиновый, его размер повторяем тем же clamp (замер: 60 на
окне 1440, 71 на 1701, 79 на 1920, 81 на 2560). */
body.page-template-page-kommerciya .section--otdelka .otdelka__img {
/* 07.09.2026: запас под заголовок больше не отдельное число. Кегли выросли
вместе с окном (2.2vw), и прежние 82 точки перестали покрывать строку с
её отступом: на 2К было видно либо надпись, либо низ кадра. Теперь
вычитаем сам заголовок (кегль x 1.12 из .h2) и его отступ теми же
формулами плюс 20 точек воздуха снизу. */
height: clamp(380px, 100vh - 88px - clamp(30px, 2.2vw, 84px) * 1.12 - clamp(20px, 1.8vw, 68px) - 120px, 700px * var(--zh));
aspect-ratio: auto;
}
body.admin-bar.page-template-page-kommerciya .section--otdelka .otdelka__img {
height: clamp(380px, 100vh - 88px - 32px - clamp(30px, 2.2vw, 84px) * 1.12 - clamp(20px, 1.8vw, 68px) - 120px, 700px * var(--zh));
}
/* --- Контакты — 70 % --------------------------------------------------- */
body.page-template-page-kontakty .page-head { gap: 21px; }
body.page-template-page-kontakty .contacts { gap: 14px; }
body.page-template-page-kontakty .office { padding: 14px; }
body.page-template-page-kontakty .office__card { padding: 17px; }
body.page-template-page-kontakty .office__list { gap: 14px; }
body.page-template-page-kontakty .contacts__map { min-height: 377px; }
body.page-template-page-kontakty .mailboxes { gap: 14px; }
body.page-template-page-kontakty .mailbox { padding: 17px; }
/* --- Новости — 90 % ---------------------------------------------------- */
body.post-type-archive-ill_news .news--grid { row-gap: 36px; }
body.post-type-archive-ill_news .news__top { padding-bottom: 29px; }
body.post-type-archive-ill_news .news__media { height: 216px; }
/* --- О компании: карточки 90 %, «Соцответственность» 80 % -------------- */
/* Первый экран задан пропорцией окна — множитель применён к самой формуле,
иначе на другом мониторе кадр снова разъедется. */
body.page-template-page-o-kompanii .page-hero--about { min-height: min(calc(75 * var(--vw)), 1260px); }
body.page-template-page-o-kompanii .dir { height: 378px; }
body.page-template-page-o-kompanii .socials__track { gap: 16px; }
body.page-template-page-o-kompanii .soc-card__img,
body.page-template-page-o-kompanii .soc-card img { height: 307px; }
body.page-template-page-o-kompanii .soc-card__more img { height: 4.5px; }
body.page-template-page-o-kompanii .nums { gap: 18px; }
body.page-template-page-o-kompanii .nums__col { gap: 18px; }
/* Высота плиток приходит переменной --num-h из разметки, поэтому множитель,
а не число: 560 -> 454, 400 -> 324, 240 -> 194. */
body.page-template-page-o-kompanii .num { height: calc(var(--num-h, 400px) * .81); padding-top: 22px; padding-bottom: 22px; }
body.page-template-page-o-kompanii .award { min-height: 315px; }
body.page-template-page-o-kompanii .award img { height: 136px; }
body.page-template-page-o-kompanii .project { height: 522px; }
body.page-template-page-o-kompanii .askbar { min-height: 196px; }
body.page-template-page-o-kompanii .askbar__img { height: calc(100% + 48px); }
/* --- Описание проекта: первый экран ВЫШЕ (130 %), фото ниже (70 %) ----- */
/* Верхний отступ сюда попал из пересчёта обложки на 130 % (124 -> 161) и держал
строчку пути ниже, чем на остальных страницах. Возвращён к общим 84: высоту
обложки он не задаёт (её держит min-height), а заголовок прижат к нижней
кромке и с места не двинется. */
body.page-template-page-opisanie-proekta .page-hero--op { min-height: 481px; padding-top: 84px; padding-bottom: 90px; }
body.page-template-page-opisanie-proekta .op-media__slide img { height: 540px; } /* 448 -> 540, Влад 24.09.2026 «немного увеличим по высоте» */
body.page-template-page-opisanie-proekta .op-feats { gap: 8px; }
body.page-template-page-opisanie-proekta .op-feat { min-height: 57px; padding: 10px 24px 9px; }
}
/* ==========================================================================
Просмотр фотографий во весь экран (ход строительства)
========================================================================== */
.lb { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center; background: rgba(0, 0, 0, .92); padding: 40px; }
.lb[hidden] { display: none; }
.lb__img { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: var(--r-secondary); }
.lb__close, .lb__prev, .lb__next { position: absolute; width: 48px; height: 48px; display: flex; align-items: center; justify-content: center; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .15); cursor: pointer; transition: background-color .15s ease; }
.lb__close:hover, .lb__prev:hover, .lb__next:hover { background: rgba(255, 255, 255, .3); }
.lb__close { top: 24px; right: 24px; font-size: 26px; line-height: 1; color: #fff; }
.lb__prev { left: 24px; top: 50%; transform: translateY(-50%); }
.lb__next { right: 24px; top: 50%; transform: translateY(-50%); }
/* arrow-l/r.svg нарисованы «галкой вниз» (как у стрелок отделки): разворачиваем в стороны. */
.lb__prev img, .lb__next img { width: 14px; height: 7px; filter: brightness(0) invert(1); }
.lb__prev img { transform: rotate(90deg); }
.lb__next img { transform: rotate(-90deg); }
.lb__count { position: absolute; left: 50%; bottom: 24px; transform: translateX(-50%); color: #fff; font-size: 14px; letter-spacing: -.3px; }
.lb--single .lb__prev, .lb--single .lb__next, .lb--single .lb__count { display: none; }
@media (max-width: 1100px) { .progress__card { flex: 0 0 calc((100% - var(--sp-6)) / 2); } }
@media (max-width: 700px) {
.progress__card { flex: 0 0 86%; }
.lb { padding: 16px; }
.lb__prev { left: 8px; }
.lb__next { right: 8px; }
.lb__close { top: 8px; right: 8px; }
}
/* ==========================================================================
Страница ЖК «Первый этаж жилого комплекса» — /objects/<ЖК>/pervyy-etazh/
Макет 21 (десктоп) и 20 (мобайл): колонка 800 по центру, разделы по 40px,
подблоки по 32px, кадр 800×450. Шапка своя: логотип, кнопка, крестик.
========================================================================== */
.utp-head {
position: sticky; top: 0; z-index: 20; height: 92px;
background: var(--white-900); border-bottom: 1px solid var(--border);
}
.utp-head__inner {
display: flex; align-items: center; justify-content: space-between;
max-width: 1320px; height: 100%; margin: 0 auto; padding: 0 60px;
}
.utp-head__logo img { display: block; height: 34px; width: auto; }
.utp-head__actions { display: flex; align-items: center; gap: 12px; }
.utp-head__cta { width: 171px; height: 50px; }
/* Крестик 50×50 из макета: белый квадрат со скруглением кнопки и рамкой. */
.utp-head__close {
display: inline-flex; align-items: center; justify-content: center;
width: 50px; height: 50px; flex: none;
border: 1px solid var(--border); border-radius: var(--r-secondary);
background: var(--white-900); transition: background-color .25s;
}
.utp-head__close:hover { background: var(--bg); }
/* 920 = колонка макета 800 плюс поля 60 по краям (box-sizing у темы border-box). */
.utp { max-width: 920px; margin: 0 auto; padding: 58px 60px 120px; }
.utp__section + .utp__section { margin-top: 80px; }
/* Якорь не должен уезжать под липкую шапку. */
.utp__section { scroll-margin-top: 112px; }
.utp__title {
margin: 0; font-size: 40px; line-height: 1.12; letter-spacing: -1.5px;
font-weight: 600; color: var(--black-900);
}
.utp__title + .utp__item { margin-top: 40px; }
.utp__item + .utp__item { margin-top: 40px; }
.utp__subtitle {
margin: 0; font-size: 32px; line-height: 1.15; letter-spacing: -1.5px;
font-weight: 600; color: var(--black-900);
}
.utp__text { margin-top: 16px; font-size: 18px; line-height: 1.45; letter-spacing: -.5px; color: var(--gray-900); }
.utp__text p { margin: 0 0 12px; }
.utp__text p:last-child { margin-bottom: 0; }
/* height: auto обязателен: атрибут height у ![]()
работает как CSS-высота
и без сброса перебивает aspect-ratio (кадр 1600×900 вставал высотой 900). */
.utp__photo {
display: block; width: 100%; height: auto; margin-top: 28px;
aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--r-primary);
}
@media (max-width: 1000px) {
/* Макет 20: шапка 66, кнопка 141×40, крестик 40, зазор между ними 8. */
.utp-head { height: 66px; }
.utp-head__inner { padding: 0 12px; }
.utp-head__actions { gap: 8px; }
.utp-head__logo img { height: 26px; }
.utp-head__cta { width: 141px; height: 40px; padding: 0; font-size: 14px; }
.utp-head__close { width: 40px; height: 40px; }
.utp { max-width: 360px; padding: 32px 12px 64px; }
.utp__section { scroll-margin-top: 82px; }
.utp__section + .utp__section { margin-top: 60px; }
.utp__title { font-size: 24px; letter-spacing: -1px; }
.utp__title + .utp__item { margin-top: 32px; }
.utp__item + .utp__item { margin-top: 32px; }
.utp__subtitle { font-size: 22px; letter-spacing: -1px; }
.utp__text { font-size: 16px; }
.utp__photo { margin-top: 20px; aspect-ratio: 336 / 220; }
}
/* Плитка-ссылка на раздел страницы «Первый этаж»: наведение подсвечивает стрелку
так же, как круглые кнопки в UI-ките (заливка синим, стрелка белеет). */
/* Цвет НЕ переопределяем: белый заголовок приходит от .jk-tile выше,
а `color: inherit` здесь перебивал его серым цветом секции. */
.jk-tile--link { display: block; text-decoration: none; }
.jk-tile--link:hover .jk-tile__next { background: var(--blue-900); }
.jk-tile--link:hover .jk-tile__next img { filter: brightness(0) invert(1); }
/* ==========================================================================
Работа с агентами — /agentam/
Вёрстка по макету «Untitled.pdf, страница 22» (23.09.2026). Он заменил
набросок «Hero section.pdf» (08.09.2026), по которому страница жила раньше.
Числа сняты объектами из PDF (текст, заливки, границы картинок по пикселям),
а не на глаз. Макет разложен по 1440 с левым полем 65–88 — поле гуляет от
блока к блоку; сайт живёт на контейнере 1320 с полем 60, при расхождении
берётся сайт (решение Влада 09.09.2026).
Первый экран здесь БЕЛЫЙ, без голубой обложки остальных страниц: так в
макете, подтверждено Владом 23.09.2026.
========================================================================== */
/* ── Первый экран ─────────────────────────────────────────────────────────
Фон страницы белый, но сам экран собран из серых карточек #f2f4f6: подложка
не выгрузилась из Figma в PDF, её границы и цвет сняты со скриншота Влада
(23.09.2026) и пересчитаны в сетку макета по положению фото.
Слева колонка 641 высотой 591: карточка заголовка на весь остаток и под ней
две карточки каналов 310x198 с зазором 21. Справа фото 651x591 до края
контейнера. Верх колонки и фото на одной линии, низ тоже.
Шапки и крошек в макете нет — фрейм обрезан. Шапка остаётся от сайта, крошки
убраны внутрь карточки заголовка, иначе колонка начиналась бы ниже фото. */
.page-hero.page-hero--agents {
/* Отступ от низа шапки (60) до верха колонки и фото. Ниже всё считается от
него, поэтому подгонять высоту экрана отдельно не нужно. */
/* 80 -> 110 (24.09.2026, клиент: «чуть ниже опустить блок от меню»). */
--agents-top: 110px;
min-height: calc(var(--agents-top) + 591px);
padding-top: var(--agents-top); padding-bottom: 0;
background: #fff;
}
/* Затемнение .page-hero::after рассчитано на обложку-фотографию; на белом экране
оно давало серую пелену. Светлым страницам его снимает класс --light, которого
здесь нет, — снимаем отдельно. */
.page-hero.page-hero--agents::after { background: none; }
/* Класса --light у секции нет (фон белый), поэтому цвет текста задаём сами:
базовый .page-hero__inner красит содержимое в белое под тёмные обложки. */
.page-hero--agents .page-hero__inner { justify-content: flex-start; color: var(--black-900); }
/* Правило .page-hero:not(.page-hero--about) .crumbs выше прижимает крошки
отступом auto, уводя H1 к низу экрана. Здесь заголовок стоит сверху,
поэтому отступ задаём равной специфичностью и ниже по файлу. */
.page-hero.page-hero--agents .crumbs { margin-bottom: 14px; }
.agents-col { width: 641px; height: 591px; display: flex; flex-direction: column; }
/* Карточка заголовка забирает остаток высоты: 591 минус каналы 198 и зазор 22. */
.agents-lead {
flex: 1 1 auto; min-height: 0; padding: 28px;
border-radius: var(--r-primary); background: #f2f4f6;
}
.page-hero--agents .page-hero__title { max-width: 560px; color: var(--black-900); }
.page-hero--agents .agents-hero__text {
max-width: 500px; margin-top: 18px;
font-size: 18px; line-height: 27px; letter-spacing: -.5px; color: var(--black-900);
}
/* Фото прижато к правому краю контейнера на любой ширине окна. */
.page-hero__deco--agents {
top: var(--agents-top); right: calc((100% - var(--container)) / 2); bottom: auto;
width: 651px; height: 591px;
border-radius: var(--r-section); overflow: hidden; background: #fff;
}
.page-hero__deco--agents img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Белое полотно .content заезжает на первый экран на 30 (приём для страниц с
фото-обложкой) и здесь срезало низ фото: картинка кончалась выше карточек
каналов (клиент 24.09.2026). Экран и так белый, заезд не нужен; отступ до
«Материалов» оставлен прежним. */
@media (min-width: 1101px) {
body.page-template-page-agentam .content { margin-top: 0; padding-top: 30px; }
}
/* ── Каналы ───────────────────────────────────────────────────────────────
Две колонки по 262 с зазором 68 (макет: 88–349 и 418–682). Подложки у
карточки нет: заголовок в две строки, под ним стеклянный значок мессенджера
и кружок со стрелкой. Значки свои — в макете их не нарисовано (Влад 23.09.2026). */
.agents-chs { flex: none; display: flex; gap: 21px; height: 198px; margin-top: 22px; }
.agents-ch {
flex: 1 1 0; padding: 28px;
border-radius: var(--r-primary); background: #f2f4f6;
display: flex; flex-direction: column;
text-decoration: none; color: inherit;
}
.agents-ch:hover { background: #e9edf0; }
.agents-ch__title {
display: block; font-size: 24px; line-height: 30px; letter-spacing: -.8px;
font-weight: 500; color: var(--black-900);
}
.agents-ch__foot { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: var(--sp-5); }
.agents-ch__icon { width: 64px; height: 64px; flex: none; pointer-events: none; }
.agents-ch__icon img { width: 100%; height: 100%; object-fit: contain; display: block; }
.agents-ch__arrow { flex: none; }
.agents-ch__arrow img { transform: rotate(-90deg); }
.agents-ch:hover .agents-ch__arrow { background: var(--blue-900); }
.agents-ch:hover .agents-ch__arrow img { filter: brightness(0) invert(1); }
.agents-ch:hover .agents-ch__title { color: var(--blue-900); }
/* ── Материалы ────────────────────────────────────────────────────────────
Макет: название ЖК чёрным НАД плашкой (24, отступ до плашки 16), сама
плашка 217 в высоту на всю ширину контейнера, на ней кнопки слева внизу
(40 в высоту, отступ 20 от края и низа) и тёмный бейдж вознаграждения
справа внизу. Затемнения на фото нет: белого текста на плашке не осталось.
Картинки ЖК берутся из админки — в макете на их месте один плейсхолдер. */
.agents-mats { display: flex; flex-direction: column; gap: 20px; }
.agents-mat__title {
margin: 0 0 16px; font-size: 24px; line-height: 30px; letter-spacing: -.8px;
font-weight: 500; color: var(--black-900);
}
.agents-mat__title a { color: inherit; text-decoration: none; }
.agents-mat__title a:hover { color: var(--blue-900); }
.agents-mat__card {
position: relative; height: 217px;
border-radius: var(--r-primary); overflow: hidden; background: #f2f4f6;
}
.agents-mat__bg { position: absolute; inset: 0; display: block; }
.agents-mat__bg img { width: 100%; height: 100%; object-fit: cover; display: block; }
.agents-mat__row { position: absolute; left: 20px; bottom: 20px; z-index: 1; display: flex; flex-wrap: wrap; gap: 11px; }
.agents-btn {
height: 40px; min-width: 0; padding: 0 16px;
display: inline-flex; align-items: center; justify-content: center;
border-radius: 10px; background: #e8f4f8; color: var(--blue-900);
font-size: 14px; line-height: 1; letter-spacing: -.3px; white-space: nowrap;
}
.agents-btn:hover { background: #d5e9f0; }
.agents-mat__badge {
position: absolute; right: 26px; bottom: 20px; z-index: 1;
height: 40px; padding: 0 16px;
display: inline-flex; align-items: center;
border-radius: 10px; background: var(--black-900); color: #fff;
font-size: 13px; line-height: 1; letter-spacing: -.3px; white-space: nowrap;
}
/* ── Менеджер ─────────────────────────────────────────────────────────────
Макет: голубая плашка 1320x266 (градиент тот же, что у баннера консультации),
заголовок ВНУТРИ неё, контакты и кнопки одним рядом по низу, вырезанное фото
справа выступает над плашкой на 55 и обрезается её низом. Поверх — стеклянная
капсула с закладкой (104x70) и белый кружок с гарнитурой (44).
Кнопки заливные бирюзовые с белым текстом — как в макете; это отменяет
правку 22.09.2026, где их сделали светло-голубыми (решение Влада 23.09.2026). */
.agents-mgrs { display: grid; gap: var(--sp-6); }
.agents-mgr {
position: relative; min-height: 266px;
padding: 40px; border-radius: var(--r-section);
background: linear-gradient(90deg, #e2f0f6 0%, #d6ecf6 50%, #c9e8f6 100%);
}
.agents-mgr__body { position: relative; z-index: 1; display: flex; flex-direction: column; min-height: 186px; }
.agents-mgr__head { margin: 0; font-size: 40px; line-height: 48px; letter-spacing: -1.5px; font-weight: 600; color: var(--black-900); }
.agents-mgr__foot { display: flex; align-items: flex-end; gap: 42px; margin-top: auto; }
.agents-mgr__info { flex: none; }
.agents-mgr__name { margin: 0 0 6px; font-size: 20px; line-height: 28px; letter-spacing: -.5px; font-weight: 500; color: var(--black-900); }
.agents-mgr__contacts p { font-size: 20px; line-height: 28px; letter-spacing: -.5px; }
.agents-mgr__contacts a:hover { color: var(--blue-900); }
.agents-mgr__row { display: flex; flex-wrap: wrap; gap: 11px; }
.agents-mgr__btn { height: 50px; padding: 0 23px; display: inline-flex; align-items: center; justify-content: center; border-radius: 10px; font-size: 16px; line-height: 1; letter-spacing: -.5px; white-space: nowrap; }
.agents-mgr__btn-ico { display: none; } /* значок мессенджера нужен только телефону */
/* Фото: вырезанная фигура, верх выходит за плашку, низ режется её кромкой. */
.agents-mgr__photo {
position: absolute; right: 76px; bottom: 0; z-index: 1;
width: 300px; height: 320px; overflow: hidden;
}
.agents-mgr__photo img { width: 100%; height: auto; display: block; }
.agents-mgr__badge {
position: absolute; left: 902px; top: 97px; z-index: 2;
width: 104px; height: 70px;
display: flex; align-items: center; justify-content: center;
background: #fff; border-radius: 35px; box-shadow: 0 12px 42px rgba(20, 60, 80, .16);
}
.agents-mgr__badge img { width: 40px; height: 46px; }
.agents-mgr__headset {
position: absolute; left: 1209px; top: 193px; z-index: 2;
width: 44px; height: 44px;
display: flex; align-items: center; justify-content: center;
background: #fff; border-radius: 50%; box-shadow: 0 12px 42px rgba(20, 60, 80, .16);
}
.agents-mgr__headset img { width: 26px; height: 26px; }
@media (max-width: 1100px) {
/* Раскладку колонкой на узком экране остальным страницам даёт правило
.page-hero--light; у «Агентам» этого класса нет, поэтому ставим здесь,
иначе фото становится flex-соседом текста и уезжает вбок. */
.page-hero.page-hero--agents { min-height: 0; padding-bottom: 40px; flex-direction: column; align-items: stretch; }
/* Порядок по мобильному фрейму (Untitled (1).pdf, стр. 23, 24.09.2026):
карточка заголовка → фото → каналы. Фото в разметке стоит вне контейнера,
поэтому обёртки колонки распускаем (display: contents), и все три блока
становятся соседями в колонке секции; порядок задаёт order. Поля контейнера
при этом пропадают — ширину с полями задаём самим блокам.
(До 24.09 здесь фото шло первым, а крошки лежали поверх него — решение
Влада 23.09, пока мобильного макета не было.) */
.page-hero--agents .page-hero__inner, .agents-col { display: contents; }
.agents-lead, .agents-chs, .page-hero--agents .page-hero__deco--agents {
width: calc(100% - var(--gutter) * 2); max-width: var(--container); margin-left: auto; margin-right: auto;
}
.agents-lead { order: 1; flex: 0 0 auto; min-height: 225px; padding: 20px; }
.page-hero.page-hero--agents .crumbs { margin: 0 0 14px; color: var(--black-900); }
.page-hero--agents .crumbs__current { color: var(--black-900); }
/* Правило .page-hero__deco { order: 2 } ниже по файлу — перебиваем специфичностью. */
.page-hero--agents .page-hero__deco--agents {
order: 2; position: static; flex: none;
height: auto; aspect-ratio: 337 / 225; margin-top: 12px; margin-bottom: 13px;
}
/* Каналы: плашки 337x66 в одну строку, текст слева, белый кружок 32 со
стрелкой справа; стеклянных значков в мобильном макете нет. */
.agents-chs { order: 3; flex-direction: column; height: auto; gap: 13px; margin-top: 0; }
.agents-ch { flex: none; height: 66px; padding: 0 15px 0 21px; flex-direction: row; align-items: center; justify-content: space-between; gap: 12px; }
.agents-ch__foot { margin-top: 0; }
.agents-ch__icon { display: none; }
.agents-ch__arrow.icon-btn--lg { width: 32px; height: 32px; padding: 0; box-shadow: none; }
.agents-ch__arrow.icon-btn--lg img { width: 9.83px; height: 4.83px; }
/* Капсулы считаны от левого края плашки 1320 — на узком экране их место
уезжает, поэтому привязываем к правому краю. */
.agents-mgr__badge { left: auto; right: 320px; top: 40px; }
.agents-mgr__headset { left: auto; right: 40px; top: 140px; }
}
@media (max-width: 900px) {
/* Плашка становится колонкой: заголовок, контакты, кнопки, под ними фото
в правом нижнем углу. Фото уводим в поля плашки отрицательными отступами,
чтобы оно упиралось в кромку, как на большом экране; скругление держит
overflow, вверх фигура здесь уже не выступает. */
/* Мобильный фрейм (стр. 23, 24.09.2026): плашка 337x323, заголовок сверху,
имя, телефон и кнопки прижаты к низу слева, вырезанная фигура стоит справа
и режется нижней кромкой плашки — как на большом экране, поэтому маска низа
(раскладка 23.09 «фото над текстом») больше не нужна.
В PDF фото вылезает за правый край фрейма до 454 — Влад 24.09: ошибка
макета, фигуру держим внутри плашки. */
.agents-mgr { padding: 23px 19px 17px; overflow: hidden; min-height: 323px; }
.agents-mgr__head { font-size: 24px; line-height: 27px; letter-spacing: -.8px; }
.agents-mgr__body { min-height: 283px; }
.agents-mgr__foot { flex-direction: column; align-items: flex-start; gap: 18px; }
/* Почты в макете нет, а на сайте она есть и длиннее имени: фигуру ставим
под текст (z-index 0), чтобы строка не пряталась за плечом. */
/* Размер из макета (стр. 23, маска фото): фигура 195 в ширину, макушка в 223 над
низом плашки, ниже кромки уходит ещё 44 — их срезает overflow плашки.
Правый край 10 (Влад 24.09: 0 -> 20 -> 10; в макете 11). */
.agents-mgr__photo { right: 10px; bottom: -44px; z-index: 0; width: 195px; height: auto; overflow: visible; }
.agents-mgr__badge, .agents-mgr__headset { display: none; }
}
@media (max-width: 700px) {
/* Материалы по мобильному фрейму (стр. 23): название ЖК 18 с отступом 8 до
плашки, плашка 337x217, между ЖК 15. Кнопки 40 в ряд по низу (поля 15,
низ 14, зазор 10, кегль 14), бейдж 28 в правом верхнем углу (кегль 11). */
.agents-mats { gap: 15px; }
.agents-mat__card { height: 217px; }
.agents-mat__title { margin-bottom: 8px; font-size: 18px; line-height: 24px; letter-spacing: -.5px; }
.agents-mat__row { left: 15px; bottom: 14px; right: 15px; flex-wrap: nowrap; gap: 10px; }
.agents-btn { flex: 1 1 0; padding: 0 8px; font-size: 14px; letter-spacing: -.4px; }
.agents-mat__badge { right: 12px; bottom: auto; top: 15px; height: 28px; padding: 0 8px; border-radius: 8px; font-size: 11px; }
.agents-mgr__name { margin-bottom: 0; }
.agents-mgr__name, .agents-mgr__contacts p { font-size: 15px; line-height: 24px; letter-spacing: -.4px; }
/* Кнопки менеджера — квадраты 44 со значком, как .social в шапке: телеграм
первым (так в мобильном макете), подпись остаётся для экранных чтецов. */
.agents-mgr__row { flex-wrap: nowrap; gap: 8px; }
.agents-mgr__btn--tg, .agents-mgr__btn--max { width: 44px; height: 44px; padding: 0; flex: none; }
.agents-mgr__btn--tg { order: -1; background: var(--tg-light); }
.agents-mgr__btn--max { background: rgba(45, 113, 251, .1); }
.agents-mgr__btn--tg:hover, .agents-mgr__btn--max:hover { filter: brightness(.96); }
.agents-mgr__btn--tg .agents-mgr__btn-ico { display: block; width: 16px; height: 14px; }
.agents-mgr__btn--max .agents-mgr__btn-ico { display: block; width: 18px; height: 19px; }
.agents-mgr__btn--tg .agents-mgr__btn-text, .agents-mgr__btn--max .agents-mgr__btn-text {
position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}
.agents-mgr__btn:not(.agents-mgr__btn--tg):not(.agents-mgr__btn--max) { height: 44px; padding: 0 12px; font-size: 13px; }
}
/* ==========================================================================
Мобильный слой внутренних страниц (09.09.2026)
==========================================================================
Сверка стенда при 360 с мобильными фреймами макета 06.09 показала: мобильного
слоя не было у двух вещей — у первого экрана и у иллюстраций в карточках.
Заголовки оставались десктопного кегля и уезжали за правый край, картинки
оставались десктопного размера и ложились поверх текста.
Числа сняты объектами из фреймов, разбор — wiki/clients/illidium-mobile-pravki-2026-09-09.md.
Раздел стоит в конце файла сознательно: правила той же силы, что и в блоках
компонентов выше, и должны их перебивать. */
@media (max-width: 700px) {
/* ── Первый экран ───────────────────────────────────────────────────────
Во всех мобильных фреймах одинаково: крошки 12, H1 28, иллюстрация ПОД
текстом. На «Способах покупки» и «Клиентам» иллюстрация от правила 1100px
становилась static и вставала flex-соседом текста — контейнер уезжал за
правый край на 84 и 104. Отсюда column, а не только кегли. */
.page-hero.page-hero--light {
flex-direction: column; align-items: stretch; justify-content: flex-start;
min-height: 0; padding-top: 96px; padding-bottom: 32px;
}
.page-hero--light .page-hero__inner { order: 1; width: 100%; }
.page-hero__deco { order: 2; width: 200px; margin: 8px auto 0; }
.page-hero__title,
.page-hero--about .page-hero__title,
.page-hero--slider .page-hero__title,
.page-hero--jk .page-hero__title,
.page-hero--op .page-hero__title { font-size: 28px; line-height: 34px; letter-spacing: -1px; }
.page-hero__lead,
.page-hero--about .page-hero__lead { font-size: 15px; line-height: 21px; letter-spacing: -.4px; }
.crumbs, .crumbs--light { font-size: 12px; letter-spacing: -.3px; }
/* ── Типографика внутренних страниц ─────────────────────────────────────
Кегли оставались десктопными: слева макет, справа было на сайте. */
.offer__title { font-size: 24px; line-height: 30px; letter-spacing: -.9px; } /* 24 <- 40 */
.askbar__title, .consult__title { font-size: 22px; line-height: 28px; } /* 22 <- 32 */
.askbar__lead { font-size: 15px; line-height: 22px; } /* 15 <- 18 */
.num__title { font-size: 22px; line-height: 28px; letter-spacing: -.8px; } /* 22 <- 28 */
.project__name { font-size: 18px; line-height: 24px; letter-spacing: -.6px; } /* 18 <- 28 */
.feat__title, .km-card__title, .ways__value,
.jk-tile__title, .gallery__title, .tour__title { font-size: 18px; line-height: 24px; letter-spacing: -.6px; }
.soc-card__title { font-size: 16px; line-height: 22px; letter-spacing: -.5px; } /* 16 <- 18 */
.finish__price { font-size: 14px; } /* 14 <- 18 */
.btn { font-size: 14px; letter-spacing: -.4px; } /* 14 <- 16 */
.badge { font-size: 13px; } /* 13 <- 14 */
.award__year { font-size: 13px; } /* 13 <- 14 */
.place__name { font-size: 14px; }
.place__time { font-size: 13px; }
/* Номер телефона в карточке офиса ломался посреди себя: «8 (4822) 631-» и
«000» на второй строке. В макете он в одну строку. */
.office__number { white-space: nowrap; }
/* Подвал — единственное место, где сайт был МЕЛЬЧЕ макета. */
.footer__col b, .footer__col li, .footer__col--plain a { font-size: 15px; } /* 15 <- 14 */
.footer .btn--sm { font-size: 14px; } /* 14 <- 13 */
}
@media (max-width: 700px) {
/* ── Плитки «Иллидиум в цифрах» ─────────────────────────────────────────
В макете текстовая плитка 336x150, иллюстрация ~210 справа, обрезана краем
плитки, текст в колонке 150 слева. На сайте плитка держала десктопную
высоту (--num-h инлайном 240–560), а объект оставался 289–509 — выходил за
экран на 32–153 и накрывал текст на 36–77 % площади. */
.num { height: auto; min-height: 150px; padding: 20px; justify-content: center; }
/* Плитки лежат в DOM по колонкам (1 и 6, 2 и 4, 3 и 5) — так их читает
десктопная раскладка. Когда колонки схлопываются в одну (display: contents
с 1100), этот порядок остаётся, и «4 000+ семей» вставало после «1 город».
Место каждой плитки в мобильном фрейме задаёт шаблон (--num-order). */
.num { order: var(--num-order, 0); }
.num--photo, .num--dark { min-height: 280px; justify-content: flex-start; }
.num__ill, .num__ill--star, .num__ill--building, .num__ill--keys {
width: 210px; right: -34px; top: 50%; transform: translateY(-50%);
}
.num__title, .num__text { max-width: 150px; }
.num__text { margin-top: 8px; font-size: 14px; line-height: 20px; }
.num--photo .num__title, .num--dark .num__title,
.num--photo .num__text, .num--dark .num__text { max-width: 100%; }
.num--photo .num__text, .num--dark .num__text { margin-top: auto; }
/* ── Карточки Коммерции ─────────────────────────────────────────────────
Макет: карточка 336x188, фото 216 справа с обрезкой, текст в колонке 202.
На сайте фото вставало по центру поверх текста (наезд 56–63 % площади). */
.km-card { min-height: 188px; padding: 20px; }
/* Два класса, а не один: ниже по файлу .km-card--row .km-card__text держит 420,
одиночный .km-card__text ему не перебить. */
/* Колонка текста 190 и знак 130 — так они не пересекаются: знак начинается
на 220, текст кончается на 210 (карточка 336 при поле 20). */
.km-card .km-card__title, .km-card .km-card__text { max-width: 190px; }
.km-card .km-card__text { margin-top: 8px; }
.km-card__ill, .km-card--blue .km-card__ill {
width: 130px; top: 50%; right: -14px; bottom: auto; transform: translateY(-50%);
}
/* Веранда — единственная карточка, где фото по макету лежит внизу во всю ширину.
Отдельного класса у неё нет, метка — иллюстрация km-card__ill--veranda. */
.km-card:has(.km-card__ill--veranda) { min-height: 320px; padding-bottom: 130px; }
.km-card--photo { min-height: 320px; }
.km-card__ill--veranda {
position: absolute; top: auto; bottom: 0; left: 50%; right: auto;
width: 92%; transform: translateX(-50%); margin: 0;
}
/* У веранды и фотокарточек иллюстрация лежит внизу во всю ширину, колонка не нужна. */
.km-card:has(.km-card__ill--veranda) .km-card__title,
.km-card:has(.km-card__ill--veranda) .km-card__text,
.km-card--photo .km-card__title, .km-card--photo .km-card__text { max-width: 100%; }
/* ── Боковая карточка консультации (новость, акция) ──────────────────────
Макет: карточка 336x192, фото менеджера 159 справа, текст в колонке 168.
На сайте текст шёл на 240–260 и уходил под фото (52 % и 43 %). */
/* Колонка 150 рвала текст лесенкой «свяжется / с вами в ближайшее / время»
(Влад 01.10.2026). В макете 13/15 текст идёт по ширине заголовка: строки до 189
при заголовке 199. Переносы Enter в полях расставлены под компьютер (у Telegram
«компании и⏎рынка»), на телефоне их не учитываем — переносит ширина 200. */
.side-card--blue .side-card__text, .side-card--gray .side-card__text,
.side-card__text { max-width: 200px; }
.side-card__text br { display: none; }
/* Строка «дата · время чтения · срок · Поделиться» не помещалась в 390 и выдавливала
«Поделиться» за край экрана, «1 минута» ломалась на две строки. Пункты не рвём,
ряд переносится целиком. */
.article__meta { flex-wrap: wrap; gap: 8px 20px; }
.article__meta-item { white-space: nowrap; }
/* Мобильный макет 13/15: полоса 42 при кегле 13, обложка 336x190. Срок акции в макете
не нарисован; если он задан, уходит вторым рядом, а «Поделиться» остаётся справа в первом. */
.article__lead .article__meta { min-height: 42px; padding: 12px 20px; }
.article__lead .article__meta-item, .article__lead .article__share { font-size: 13px; }
/* Время чтения посередине между датой и «Поделиться»: зазоры по обе стороны равные
(Влад 01.10.2026; было прижато к дате, справа пустота). */
.article__lead .article__meta { justify-content: space-between; }
.article__lead .article__share { order: 2; margin-left: 0; }
.article__lead .article__meta-item--until { order: 3; flex-basis: 100%; }
.article__lead .article__cover img { height: auto; aspect-ratio: 336 / 190; }
/* Мобильный макет 13/15: заголовок в одну строку («Получить консультацию» 199 при
кегле 18), текст разбит переносами из поля и по ширине не длиннее заголовка. */
.side-card__title { max-width: none; font-size: 18px; line-height: 24px; }
.side-card__manager { width: 160px; height: 160px; right: -12px; } /* мобильные фреймы 13/15: 160 у правой кромки с выносом 12 */
/* ── Карточка партнёра, клуб привилегий ─────────────────────────────────
Макет: 336x146, логотип 54x54 слева, текст рядом, круглая кнопка 40 в
правом нижнем углу. На сайте карточка была ~310 высотой: логотип во всю
ширину, всё по центру, кнопка широкой плашкой. На 51 партнёре это давало
самый большой лишний столбик страницы. */
.partner {
position: relative; min-height: 146px; padding: 20px 68px 20px 20px;
text-align: left; display: grid; grid-template-columns: 72px minmax(0, 1fr);
grid-template-rows: auto auto auto; column-gap: 12px; align-content: center;
}
/* Макетные 54x54 — квадрат, а у половины партнёров знак горизонтальный
(KERAMA MARAZZI, Мосплитка, Стальная линия) и в квадрате читается точкой.
Высота макетная, ширина 72 — знак остаётся различимым. */
.partner__logo { grid-column: 1; grid-row: 1 / span 2; width: 72px; height: 54px; margin: 0; align-self: center; }
.partner__name { grid-column: 2; grid-row: 1; align-self: end; }
.partner__cat { grid-column: 2; grid-row: 2; align-self: start; margin-top: 2px; }
.partner__offer { grid-column: 1 / -1; grid-row: 3; margin: 10px 0 0; font-size: 15px; }
.partner .btn--soft {
position: absolute; right: 20px; bottom: 20px; width: 40px; height: 40px;
padding: 0; margin: 0; border-radius: 50%; overflow: hidden;
color: transparent; font-size: 0;
}
.partner .btn--soft::after {
content: ''; position: absolute; inset: 0; margin: auto;
width: 8px; height: 8px; border-top: 2px solid var(--black-900);
border-right: 2px solid var(--black-900); transform: translateX(-2px) rotate(45deg);
}
}
@media (max-width: 700px) {
/* ── Карта инфраструктуры ───────────────────────────────────────────────
Капсула фильтров на десктопе 773 в ширину. При 360 она оставалась 733 и
не прокручивалась: «Здоровье» и всё за ним были недоступны. В мобильном
фрейме 18 фильтры нарисованы вертикальным списком — шесть строк 336x50. */
.infra-map__filters {
position: static; transform: none; left: auto; bottom: auto;
flex-direction: column; align-items: stretch; gap: 0;
margin-top: 12px; padding: 4px; border-radius: var(--r-secondary);
box-shadow: 0 4px 16px rgba(20, 60, 80, .08);
}
.map-filter { justify-content: flex-start; padding: 13px 16px; border-radius: var(--r-secondary); }
/* Кнопка видео: круг 80 в узкой плитке занимает четверть ширины. */
.jk-tile__play { width: 56px; height: 56px; left: 16px; bottom: 16px; }
.jk-tile__play span { width: 42px; height: 42px; }
.jk-tile__title { font-size: 18px; line-height: 24px; left: 16px; top: 16px; right: 16px; }
.jk-tile__next { right: 16px; bottom: 16px; }
}
/* ── Плитки страницы ЖК: сетка была сломана, а не просто узка ──────────────
Правило на 1100 меняло только grid-template-columns на 1fr, но у четвёртой
плитки остался жёсткий `grid-column: 2 / span 2` из десктопной раскладки.
Он тянул за собой вторую и третью КОЛОНКИ — неявные, шириной 0. Замер при
360: колонки «296px 0px 0px», плитки 2 и 3 нулевой ширины, их заголовки и
кнопка видео торчали наружу (кнопка уходила на 432 при окне 360).
Поэтому здесь снимаются и посадка по колонкам, и десктопная высота. */
@media (max-width: 1100px) {
.jk-tile:nth-child(1) { grid-row: auto; height: 310px; }
.jk-tile:nth-child(4) { grid-column: auto; }
}
/* Высота плиток: 310 на планшете (правило выше) и макетные 240 при 360.
Стоит после блока 1100 сознательно — там первой плитке возвращается обычная
высота вместо десктопных 640, и это правило должно лечь поверх. */
@media (max-width: 700px) {
.jk-tile, .jk-tile:nth-child(1) { height: 240px; }
}
/* ==========================================================================
Мобильный слой: правки по разбору Влада 09.09.2026 (iPhone 13 Pro, 390)
==========================================================================
Проверялось при 360 И при 390: на 390 строк в тексте выходит больше, и блоки
с жёсткой высотой резали содержимое. Числа — из мобильных фреймов макета. */
@media (max-width: 700px) {
/* Первый экран ЖК: в мобильном фрейме 17 фото занимает 0..420, ниже сразу
белое полотно с якорями. На сайте держалась высота 460-520 из планшетного
слоя, из-за чего заголовок и метки уезжали вниз, а полотно начиналось за
краем экрана. */
.page-hero.page-hero--jk {
height: auto; min-height: 420px; padding-bottom: 24px;
}
/* Метки в макете ложатся по две в ряд: контейнер уже полосы контента. */
.page-hero__badges { max-width: 300px; margin-top: 12px; }
.page-hero__badges .badge { font-size: 13px; line-height: 17px; padding: 6px 10px; }
body.single-ill_object .content { padding-top: 20px; }
}
@media (max-width: 700px) {
/* ── Баннер консультации ────────────────────────────────────────────────
Макет 17: карточка 336x348, заголовок сверху, 3D-пузырь 247 по центру,
кнопка 296x44 у нижней кромки, значки закладки и менеджера поверх пузыря.
На сайте кнопка стояла сразу под заголовком, а иллюстрация 300+ висела
ниже и растягивала блок до 600. */
.consult, .consult--km {
position: relative; display: flex; flex-direction: column; align-items: stretch;
min-height: 348px; padding: 20px; overflow: hidden;
}
.consult__text { display: flex; flex-direction: column; flex: 1 1 auto; z-index: 2; }
.consult__title { margin: 0; font-size: 22px; line-height: 28px; letter-spacing: -.8px; }
.consult .btn, .consult__text .btn { margin-top: auto; width: 100%; }
.consult__img, .consult__img--building {
position: absolute; left: 50%; top: 50%; right: auto; bottom: auto;
width: 220px; height: auto; margin: 0; transform: translate(-50%, -50%); z-index: 1;
}
/* Значки в макете есть, планшетный слой их гасил. */
.consult__badge, .consult__manager { display: flex; z-index: 2; }
.consult__badge { position: absolute; left: 16px; top: 42%; }
.consult__manager { position: absolute; right: 16px; top: 55%; }
/* ── Галерея: кадр 336x240 по макету, а не 700 ──────────────────────────── */
.gallery__img { height: 240px; }
.gallery__note { padding: 16px 20px; }
.gallery__nav .icon-btn { padding: 8px; }
/* ── Тур по проекту: карточка 336x256, под ней кадр 336x230 ─────────────── */
.tour__card { min-height: 256px; padding: 20px; }
.tour__ic { width: 44px; height: 44px; margin-bottom: 16px; }
.tour__ic img, .tour__ic svg { width: 22px; height: 22px; }
.tour__title { margin-bottom: 8px; }
.tour__text { font-size: 14px; line-height: 20px; }
.tour__card .btn--soft { margin-top: 16px; padding: 12px 20px; font-size: 14px; }
.tour__media img { height: 230px; }
/* ── Карта инфраструктуры ───────────────────────────────────────────────
В макете плашки локаций идут лентой (280x72, следующая выглядывает за
краем), а карта под ними 336x460. Пилюль «Образование / Магазины» в
мобильном фрейме нет вовсе — они и не помещались. */
.infra-map__filters { display: none; }
.infra-map img, .infra-map .embed { height: 460px; }
.places {
display: flex; flex-wrap: nowrap; gap: 8px;
overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; scrollbar-width: none;
margin-left: calc(var(--gutter) * -1); margin-right: calc(var(--gutter) * -1);
padding-left: var(--gutter); padding-right: var(--gutter);
}
.places::-webkit-scrollbar { display: none; }
.place { flex: 0 0 280px; scroll-snap-align: start; min-height: 72px; }
/* Только фото локации: .place img ловит и иконку машинки внутри .place__time —
от 60x60 она раздувалась в синий квадрат (та же ловушка, что была на десктопе). */
.place > img, .place__ph { width: 60px; height: 60px; flex: 0 0 60px; }
.place__time { margin-top: 6px; }
}
@media (max-width: 700px) {
/* Стрелки перелистывания: в мобильных фреймах их нет нигде — вместо них
точки под лентой. На сайте они стояли вплотную под текстом секции
(«Особенности», «Карта инфраструктуры») и читались как часть абзаца. */
.osob__nav,
#karta .section__head .page-hero__nav,
.gallery__nav .icon-btn { display: none; }
.osob-wrap .osob-intro { margin-bottom: 16px; }
/* Карточка особенностей: в макете 320x340 с иллюстрацией внизу, а не 315x400. */
.osob-card { width: 300px; height: auto; min-height: 320px; padding: 20px; }
.osob-card__title { font-size: 18px; line-height: 24px; }
.osob-card__text { margin-top: 10px; font-size: 14px; line-height: 20px; }
/* Способы покупки: в макете фото 336x220, под ним карточки ПО ДВЕ в ряд
(164 каждая). На сайте фото занимало 450+, а карточки шли по одной. */
.ways__media { min-height: 0; height: 220px; }
.ways__grid { grid-template-columns: 1fr 1fr; grid-auto-rows: auto; gap: 12px; }
/* Низ 64 = стрелка 32 + отступ 16 + зазор 16: текст упирался в стрелку (Влад 16.09.2026). */
.ways__card { padding: 16px 16px 64px; }
.ways__value { margin-bottom: 8px; }
/* Макет 17: 14/20. Ручные переносы десктопа здесь гасим: мобильный макет ломает строки
иначе («Рассрочка на 3 / года при / первоначальном / взносе от 10%»). Мера 121: «семейная, военная»
(119) в строку, «Рассрочка на 3 года» (124) рвётся. */
.ways__text { max-width: 121px; font-size: 14px; line-height: 20px; }
.ways__text br { display: none; }
.ways__arrow { left: 16px; bottom: 16px; }
/* Размер задаём кнопке, а не картинке внутри: у .icon-btn img своя геометрия
(11.5x5.5 — шеврон), и от 32x32 он превращался в чёрную стрелку во всю кнопку. */
.ways__card .ways__arrow { width: 32px; height: 32px; padding: 0; } /* стрелка сама .icon-btn, вложенного нет */
/* Значки на баннере консультации: в макете закладка 64 и плашка менеджера 92. */
.consult__badge { padding: 10px; }
.consult__badge img { width: 24px; height: 28px; }
.consult__manager { transform: scale(.8); transform-origin: right center; }
}
@media (max-width: 700px) {
/* ── Отделка от застройщика ─────────────────────────────────────────────
Макет: вкладки 336x44, кадр 336x292, плашка цены 324x36 во всю ширину у
нижней кромки кадра, кнопка каталога 336x44 под ним. На сайте кадр держал
380 из планшетного слоя, цена сидела капсулой в углу, а стрелки были
кругами 44 поверх кадра. */
.otdelka__img { height: 292px; }
.otdelka__price {
left: 12px; right: 12px; bottom: 12px; padding: 8px 12px;
text-align: center; font-size: 13px;
}
.otdelka__expand, .otdelka__arrow { width: 32px; height: 32px; }
.otdelka__expand { top: 12px; right: 12px; }
.otdelka__expand img, .otdelka__arrow img { width: 14px; }
.otdelka__arrow--prev { left: 12px; }
.otdelka__arrow--next { right: 12px; }
.otdelka__dots { bottom: 56px; }
.otdelka__dots span { width: 32px; }
}
@media (max-width: 700px) {
/* На странице ЖК блок отделки — .finish (на Коммерции .otdelka), поэтому те
же макетные числа задаются ему отдельно: кадр 292, плашка цены во всю
ширину у нижней кромки, стрелки 32 вместо кругов 48. */
.finish__img, body.single-ill_object #otdelka .finish__img { height: 292px; }
.finish__price {
left: 12px; right: 12px; bottom: 12px; padding: 8px 12px;
text-align: center; font-size: 13px;
}
.finish__nav { left: 12px; right: 12px; }
.finish__nav .icon-btn { width: 32px; height: 32px; }
.finish__zoom { top: 12px; right: 12px; width: 32px; height: 32px; padding: 0; }
.finish__zoom img { width: 14px; height: 14px; }
/* Точки подсказок в макете 24, у нас 32 — на узком кадре они сталкивались. */
.finish__point .finish__dot, .finish__point > button { width: 24px; height: 24px; }
}
@media (max-width: 700px) {
/* Карта живая (iframe), но поверх неё лежит слой-замок, а подсказка «Нажмите,
чтобы двигать карту» показывалась только по наведению — на телефоне навести
нечем, и карта читается как статичная картинка. Здесь подсказка видна сразу. */
.infra-map__hint { opacity: 1; }
}
@media (max-width: 700px) {
/* ── Коммерция, первый экран ───────────────────────────────────────────
Макет 22: фото 0..500, заголовок в колонке 199 (три строки, кегль 28) у
нижней кромки, под ним метки 2+2 и точки-индикаторы. На сайте заголовок
стоял по центру экрана, шёл во всю ширину и рвал цену на «70 000 ₽/ мес». */
body.page-template-page-kommerciya .page-hero--slider,
.page-hero--slider { height: auto; min-height: 500px; padding-bottom: 24px; }
.page-hero--slider .page-hero__title,
body.page-template-page-kommerciya .page-hero--slider .page-hero__title {
max-width: 210px; font-size: 28px; line-height: 34px; letter-spacing: -1px;
}
.page-hero__dots { display: flex; }
.page-hero__dots span { width: 32px; }
/* ── Проекты в Твери: лента карточек 320, следующая выглядывает ────────── */
.jk-carousel .jk, body.page-template-page-kommerciya .jk-carousel .jk {
flex: 0 0 300px; width: 300px;
}
.jk-carousel .jk-grid { gap: 12px; }
/* Примагничивание (11.09.2026, Влад: «проекты просто пролетают»): лента
останавливается на карточке, как соседние ленты сайта (соц-карточки,
награды, проекты на «О компании»). Карточка 320 при полотне 336 — снап
по левому краю, следующая выглядывает на 4. */
.jk-carousel .jk-grid { scroll-snap-type: x mandatory; }
.jk-carousel .jk { scroll-snap-align: start; }
.jk-carousel .jk__media,
body.page-template-page-kommerciya .jk-carousel .jk__media {
height: auto; min-height: 0; aspect-ratio: 320 / 190;
}
/* Стрелки листания в мобильных фреймах не нарисованы — лента листается пальцем.
Секция проектов без id, метка — обёртка карусели рядом в той же секции. */
.section:has(.jk-carousel) .section__head .page-hero__nav { display: none; }
}
@media (max-width: 700px) {
/* Баннер консультации на Коммерции: карточка 336x370, заголовок 293x75,
здание 251 по центру, кнопка 296x44 внизу, значки лупы и менеджера по
краям на уровне картинки. Заголовок здесь в три строки, поэтому значки
сдвинуты ниже, чем на баннере ЖК, иначе закладка легла бы на текст. */
.consult--km { min-height: 370px; }
.consult--km .consult__badge { top: auto; bottom: 92px; left: 8px; }
.consult--km .consult__manager { top: auto; bottom: 74px; right: 8px; }
.consult--km .consult__img, .consult--km .consult__img--building {
width: 230px; top: 54%;
}
}
@media (max-width: 700px) {
/* Знак парковки вылезал за верхнюю и нижнюю кромку карточки: при ширине 130
его высота (пропорция кадра 216:324) выходила 195 против 188 у карточки.
Ограничиваем именно высотой, ширина подстраивается. */
.km-card__ill, .km-card--blue .km-card__ill {
width: auto; max-width: 45%; height: auto; max-height: calc(100% - 24px);
object-fit: contain; object-position: center right;
}
/* Колонка текста в макете 202 из 336 — шире, чем стояло: текст ложился в семь
строк вместо пяти и растягивал карточку. */
.km-card .km-card__title, .km-card .km-card__text { max-width: 200px; }
/* У веранды фото лежит внизу во всю ширину — под него нужен пол, но не 130. */
.km-card:has(.km-card__ill--veranda) { padding-bottom: 110px; }
.km-card__ill--veranda { max-width: none; max-height: none; width: 88%; }
}
@media (max-width: 700px) {
/* Знак сидит внутри карточки, а не свисает за правый край: отрицательный
сдвиг остался от прежней версии, когда картинка была шире карточки. */
.km-card__ill, .km-card--blue .km-card__ill { right: 12px; }
/* Фото веранды перекрывало последнюю строку абзаца — пол под него вернули. */
.km-card:has(.km-card__ill--veranda) { padding-bottom: 132px; }
}
/* ==========================================================================
Мобильный слой: второй разбор Влада 09.09.2026 — числами из фреймов
==========================================================================
Все размеры ниже сняты объектами из мобильных фреймов (tools/spec.py),
а не подобраны на глаз. Ссылки на координаты — в комментариях. */
@media (max-width: 700px) {
/* Первый экран ЖК: фото 0..440, метки кончаются на 396, белое полотно
наезжает на фото с 420. Было 420/24 — от метки до кромки оставалось 4. */
.page-hero.page-hero--jk { min-height: 440px; padding-bottom: 44px; }
/* Кнопка видео: в макете (фрейм 17, y=1144) круг 48 у ПРАВОГО края плитки,
внутренний 36. Стояла слева внизу. */
.jk-tile__play {
left: auto; right: 14px; bottom: auto; top: 50%;
width: 48px; height: 48px; margin-top: -24px;
}
.jk-tile__play span { width: 36px; height: 36px; }
/* Стрелка «дальше» в макете 40x40 с отступом 20 от правого и нижнего края. */
.jk-tile__next { right: 20px; bottom: 20px; }
.jk-tile__next .icon-btn, .jk-tile__next.icon-btn { width: 40px; height: 40px; padding: 0; }
/* Стрелка в карточке акции: шеврон нарисован 9.83x4.83, от квадратных 14x14
он раздувался в толстую сплющенную птицу. Размер держит кнопка. */
.promo-tile__arrow { width: 36px; height: 36px; padding: 0; }
.promo-tile__arrow img { width: 12px; height: auto; }
/* Между заголовком «Акции» и лентой карточек в макете 31 (низ строки 1803,
верх карточки 1834). */
#akcii .section__head, #akcii .section__title { margin-bottom: 31px; }
/* Галерея: кадр 336x384 (y 3600..3984), подпись лежит полосой у нижней
кромки, стрелки 36 по бокам на середине кадра, «развернуть» 36 в правом
верхнем углу. Кадр 240 с прежней большой подписью и давал белый
прямоугольник почти во весь кадр. */
.gallery__img { height: 384px; border-radius: var(--r-primary); }
/* Подпись под кадром, а не поверх него (решение Влада 13.09.2026): на 336
белая карточка закрывала треть фото. Скругление и обрезка переезжают
с .gallery на сам кадр, стрелки считаются от середины кадра (192), а не
от середины блока, который стал выше на подпись. */
.gallery { border-radius: 0; overflow: visible; }
.gallery__note {
position: static; width: auto; max-width: none;
padding: 12px 0 0; border-radius: 0;
}
.gallery__title { margin-bottom: 4px; font-size: 15px; line-height: 20px; }
.gallery__text { font-size: 13px; line-height: 18px; }
.gallery__nav { display: flex; right: auto; left: 12px; bottom: auto; top: 192px; margin-top: -18px;
width: calc(100% - 24px); justify-content: space-between; background: none; pointer-events: none; }
.gallery__nav .icon-btn { display: flex; pointer-events: auto; width: 36px; height: 36px; padding: 0; background: #fff; }
.gallery__count { display: none; }
.gallery__zoom { top: 12px; right: 12px; width: 36px; height: 36px; padding: 0; }
.gallery__zoom img { width: 16px; height: 16px; }
/* Остров страницы ЖК на мобильном: вместо девяти якорей и каталога — две
кнопки «Выбрать квартиру» и «Обратный звонок» (решение Влада 13.09.2026).
Пилюли на всю ширину, поровну. */
body.single-ill_object .anchors .anchor:not(.anchor--mob) { display: none; }
body.single-ill_object .anchors .anchor--mob { display: flex; flex: 1 1 0; justify-content: center; padding: 0 12px; }
body.single-ill_object .anchors { width: calc(100 * var(--vw) - 32px); }
/* «Обратный звонок» с панели убран (Влад 28.09.2026), звонок остаётся в кнопке связи.
С 01.10.2026 по макету дизайнера (размеры Влад подобрал ползунками): одна кнопка
«Выбрать квартиру» 180 x 47, шрифт 15, прижата справа к кнопке связи 50 с зазором 12,
центры на одной линии (низ — в блоке «Нижний ряд над полоской «домой»» в конце файла).
Без стеклянной подложки, тень как у кнопки связи. */
body.single-ill_object .anchors .anchor--mob:not(.anchor--cta) { display: none; }
body.single-ill_object .anchors {
--anch-pill-h: 47px;
left: auto; right: calc(12 * var(--m) + 50px + 12px); width: 180px;
transform: translateY(16px);
padding: 0; background: none; box-shadow: none;
-webkit-backdrop-filter: none; backdrop-filter: none;
}
body.single-ill_object .anchors .anchor--cta { box-shadow: 0 2px 8px rgba(0, 124, 164, .3); font-size: 15px; letter-spacing: -.5px; }
body.single-ill_object .anchors.is-shown { transform: none; }
/* Значки на баннере заявки: в макете это не круги, а скруглённые плашки —
закладка 63x42 (x=33, y=4208) и менеджер 79x45 (x=247, y=4257), обе
чуть повёрнуты, пузырь 247 стоит выше и ближе к ним (x=48, y=4136). */
.consult__img, .consult__img--building { width: 247px; top: 47%; }
.consult__badge {
left: 21px; top: 164px; width: 63px; height: 42px; padding: 0;
border-radius: 14px; transform: rotate(-7deg);
}
.consult__badge img { width: 20px; height: 24px; }
.consult__manager {
left: auto; right: 22px; top: 213px; width: 79px; height: 45px;
padding: 0 6px; border-radius: 14px; transform: rotate(5deg);
}
.consult__avatar, .consult__manager .consult__avatar { width: 38px; height: 38px; }
.consult__headset { width: 20px; height: 20px; }
/* Отделка: плашка цены 324x36 у нижней кромки кадра (x=18 → по 6 от края
кадра), точки-подсказки 24. Подсказка открывается кликом (main.js), на
мобильном она была выключена совсем. */
.finish__price, .otdelka__price { left: 6px; right: 6px; bottom: 8px; min-height: 36px; padding: 8px 12px; }
.finish__dot { width: 24px; height: 24px; font-size: 16px; }
.finish__hint { display: none; }
.finish__point.is-open .finish__hint { display: block; max-width: 160px; font-size: 12px; }
}
@media (max-width: 700px) {
/* ── Коммерция: четыре плашки по числам фрейма 22 ────────────────────────
1. «Первый этаж» — фото 336x310, заголовок сверху, текст ВНИЗУ (y=711
при карточке 520..830), колонка 272.
2. «Удобная парковка» — 336x188, текст колонкой 203.
3. «Летняя веранда» — 336x320, текст колонкой 268, фото 337x123 во всю
ширину у нижней кромки.
4. «Высокие потолки» — фото 336x310, текст внизу, колонка 252.
Раньше всем четырём давалась одна колонка 200 и один пол 188. */
.km-card--photo, .km-card--photo.km-card--tall { min-height: 310px; }
.km-card--photo .km-card__title { max-width: 100%; }
.km-card .km-card--photo .km-card__text,
.km-card--photo .km-card__text { max-width: 100%; margin-top: auto; }
.km-card--blue { min-height: 188px; }
.km-card .km-card--blue .km-card__text,
.km-card--blue .km-card__text { max-width: 203px; margin-top: 8px; }
.km-card:has(.km-card__ill--veranda) { min-height: 320px; padding-bottom: 135px; }
.km-card:has(.km-card__ill--veranda) .km-card__text { max-width: 268px; }
.km-card__ill--veranda {
left: 0; right: 0; bottom: 0; width: 100%; height: 123px;
transform: none; object-fit: cover; object-position: center bottom;
}
/* Отделка на Коммерции: та же карусель, что на ЖК, и размер тот же (292).
Полосу 21:9 задавал широкий слой — на телефоне она сплющивала кадр. */
body.page-template-page-kommerciya .otdelka__img,
body.page-template-page-kommerciya .section--otdelka .otdelka__img {
height: 292px; aspect-ratio: auto;
}
/* Баннер заявки на Коммерции — те же плашки значков, что на ЖК. */
.consult--km .consult__badge {
left: 16px; top: auto; bottom: 96px; width: 63px; height: 42px;
border-radius: 14px; transform: rotate(-7deg);
}
.consult--km .consult__manager {
left: auto; right: 18px; top: auto; bottom: 78px; width: 79px; height: 45px;
border-radius: 14px; transform: rotate(5deg);
}
}
@media (max-width: 700px) {
/* Текст плашек Коммерции в макете 14/20 (строки 911, 931, 951 фрейма 22).
На сайте держался десктопный 16 — колонка той же ширины набиралась на две
строки длиннее, и карточки перерастали свои 188 и 310. */
.km-card .km-card__text { font-size: 14px; line-height: 20px; }
/* Текст фотокарточек прижат к нижней кромке (в макете y=711 при карточке
520..830). Три класса — иначе правило выше по файлу держит свой отступ. */
.km-card.km-card--photo .km-card__text { margin-top: auto; }
/* Знак парковки: ширину задаём явно, иначе при auto он вытягивался в узкую
полосу 66x205 — высота упиралась в потолок карточки раньше ширины. */
.km-card--blue .km-card__ill { width: 110px; max-width: none; }
}
/* ==========================================================================
Мобильный слой: третий разбор Влада 09.09.2026
==========================================================================
Числа сняты объектами из мобильных фреймов 17 (ЖК) и 22 (Коммерция),
координаты — в комментариях. Фрейм нарисован на 360, экран 390, поэтому
значения идут через var(--m) — тот же масштаб, что у остального слоя. */
@media (max-width: 700px) {
/* Кнопка видео — в тот же угол, что стрелки соседних плиток.
В макете плашка с видео всего 88 высотой (y=1124..1212), круг 48 стоит
у правого края по её центру — это и есть нижний правый угол плашки.
На сайте плашка 240, и «справа по центру» вышло серединой картинки.
Центр стрелки у соседей: круг 40 с отступом 20 => 40 от края. У круга 48
тот же центр даёт отступ 16. */
.jk-tile__play {
left: auto; right: 16px; top: auto; bottom: 16px; margin-top: 0;
}
/* «Акции»: между низом заголовка и лентой в макете 31 (низ строки 1803,
верх карточки 1834). Прошлая правка вешала отступ на .section__head, но
он на мобильном display: contents — коробки нет, margin не применяется.
Держать отступ должен сам заголовок. */
#akcii .section__head > .h2,
.section--other .section__head > .h2,
#novosti .section__head > .h2 { margin-bottom: calc(31 * var(--m)); }
/* Лента локаций шла во всю ширину экрана (margin -gutter), и обрез карточек
оказывался правее карты. Влад просит обрез по карте — снимаем вылет,
лента живёт в тех же границах, что и карта под ней. */
.places { margin-left: 0; margin-right: 0; padding-left: 0; padding-right: 0; }
/* ── Капсула оператора (баннер заявки на обеих страницах) ───────────────
Макет: плашка 79x45 (x=247, y=4257), в ней фото 38x38 (x=250, y=4259),
точка 9 у верхнего правого угла фото (x=278, y=4262) и гарнитура ~20 по
центру справа (глиф 15x9 в x=296, y=4271). На сайте гарнитура и точка
держали десктопные left: 75 и left: 51 от плашки 130: на плашке 79
гарнитура уходила за белую обводку на 16, точка висела посреди плашки. */
.consult__headset {
left: auto; right: calc(12 * var(--m)); top: 50%;
margin-top: calc(-10 * var(--m));
width: calc(20 * var(--m)); height: calc(20 * var(--m));
}
.consult__status {
left: calc(27 * var(--m)); top: calc(7 * var(--m));
width: calc(9 * var(--m)); height: calc(9 * var(--m));
}
.consult__status::after { width: calc(5 * var(--m)); height: calc(5 * var(--m)); }
/* Фото в капсуле: исходник квадратный 512x512, при cover в квадратной рамке
38x38 он влезал целиком — вместе с белым полем под фигурой, и низ читался
обрезанным краем. В макете кадр 48x64 крупнее рамки и режется ею.
Увеличиваем и сажаем по верху: рамку занимают лицо и плечи. */
/* Влад просит иконку мельче макетной: 30 вместо 38, по центру плашки 45
((45 - 30) / 2 = 7.5). Кадр внутри 126 % — на 100 % в квадратную рамку
влезает весь исходник вместе с белым полем под фигурой, и низ читается
обрезанным краем; ниже 126 % опускаться нельзя по этой же причине. */
.consult__avatar, .consult__manager .consult__avatar {
width: 30px; height: 30px; left: 6px; top: 7.5px;
background-size: 126%; background-position: 50% 20%;
}
/* Первый экран Коммерции: в макете метки кончаются на 444, белое полотно
наезжает с 480 — просвет 36. На сайте padding-bottom 24 при наезде 20
оставлял 2, и второй блок стоял вплотную к плашкам первого. */
body.page-template-page-kommerciya .page-hero--slider,
.page-hero--slider { padding-bottom: calc(56 * var(--m)); }
/* Знак парковки. Виноват был не размер, а связка max-height + object-fit:
contain: коробку резало по 100% - 24 (164 при карточке 188), и картинка
пропорцией 288:900 вписывалась в неё ВСЯ — знак рисовался 52 в ширину
вместо макетных 64, а под ним оставался обрезанный столб.
Синий щит в макете 59.5x78.5 (x=272.5..332, y=861.5..940 при карточке
x=12..348, y=842..1030); в нашем исходнике щит занимает 209 из 288 по
ширине, отсюда картинка 82 и верх 17 от кромки карточки. Высота свободна:
столб уходит за нижний край, как в макете. */
.km-card--blue .km-card__ill {
left: auto; right: 0; top: calc(17 * var(--m)); bottom: auto;
width: calc(82 * var(--m)); height: auto;
max-width: none; max-height: none; object-fit: fill; transform: none;
}
/* Проекты в Твери: в макете карточка 320 с фото 320x202 (x=12, y=2284).
Стояло 300 с пропорцией 320/190 — плашки выходили мельче макета. */
.jk-carousel .jk, body.page-template-page-kommerciya .jk-carousel .jk {
flex: 0 0 calc(320 * var(--m)); width: calc(320 * var(--m));
}
.jk-carousel .jk__media,
body.page-template-page-kommerciya .jk-carousel .jk__media { aspect-ratio: 320 / 202; }
}
/* ==========================================================================
Мобильный слой: полка крошек и разбор Влада по «Клиентам» (10.09.2026)
==========================================================================
Числа сняты объектами из мобильных фреймов макета 26.08 (tools/spec.py),
а не подогнаны на глаз. Разбор — wiki/clients/illidium-mobile-pravki-2026-09-10.md. */
@media (max-width: 700px) {
/* ── Крошки на одной высоте на всех страницах ───────────────────────────
Во ВСЕХ мобильных фреймах строка пути стоит одинаково: ink 101..115.4,
кегль 12. На сайте она гуляла по трём значениям:
96 — светлые обложки («Клиентам», «Способы покупки»);
84 — фото-обложки (ЖК, «О компании», «Коммерция», «Описание проекта»);
67 — страницы без первого экрана («Контакты», «Агентам», списки
новостей и акций, карточка новости, карточка акции).
Последние и есть жалоба Влада: шапка кончается на 74, то есть крошки
лежали ПОД ней. Причина — body компенсирует фиксированную шапку числом
--hdr-top + --hdr-h + 8 = 67, но мобильный островок 61, а не 44, и вся
шапка занимает 74. Полку задаём одну: коробка крошек 100..116.8, ink 101. */
body:not(.has-photo-hero) { padding-top: calc(100px - var(--hdr-shrink)); }
.page-hero { padding-top: calc(100px - var(--hdr-shrink)); }
/* ── Обложка «Клиентам» и «Способы покупки» ─────────────────────────────
Макет обеих страниц совпадает до точки: фон обложки 0..318, белый блок
контента с 298 (нахлёст 20 — скругление), крошки ink 101, H1 28 с ink 135,
3D-объект 234 шириной (65 % экрана) с верхом на 161.7 и обрезом по кромке
белого блока. На сайте объект стоял 200 и целиком помещался над блоком —
отсюда «обложка мельче макета». Высоту обложки фиксируем: объект вылезает
ниже и его режет overflow: hidden самой секции, как в макете. */
.page-hero.page-hero--light { height: calc(318px - var(--hdr-shrink)); min-height: 0; padding-top: calc(100px - var(--hdr-shrink)); padding-bottom: 0; }
.page-hero--light .page-hero__inner { flex: 0 0 auto; }
.page-hero.page-hero--light .crumbs { margin-bottom: 18px; } /* H1 садится на ink 135 */
.page-hero__deco {
order: 2; flex: 0 0 auto; width: 65vw; max-width: 260px;
margin: -7px auto 0; /* у объекта сверху прозрачное поле, отсюда минус */
}
/* Обложка «Агентам» (20.09.2026): как у «Клиентам» (текст, под ним иллюстрация), но
фото во всю ширину 4:3 вместо объекта 260, высота от содержимого, а не 318. */
/* Шапка на узком экране выше десктопной (кончается на 68), поэтому отступ
до карточки берём больше: зазор остаётся те же 20. */
.page-hero.page-hero--agents { --agents-top: calc(88px - var(--hdr-shrink)); height: auto; min-height: 0; padding-bottom: 44px; }
/* Мобильный фрейм стр. 23 (24.09.2026): H1 24, подводка 15/22. Ширина и
отступы фото — в правилах max-width: 1100px выше. */
.page-hero--agents .page-hero__title { font-size: 24px; line-height: 30px; letter-spacing: -.8px; }
.page-hero--agents .agents-hero__text { margin-top: 9px; font-size: 15px; line-height: 22px; letter-spacing: -.5px; }
.agents-ch__title { font-size: 18px; line-height: 24px; letter-spacing: -.5px; }
/* ── Стрелка у карточки партнёра ────────────────────────────────────────
Прошлый заход прочитал её кругом. В макете это квадрат 40x40 со
скруглением 10: прямой участок верхней кромки идёт от 298 до 318 при
коробке 288..328. */
.partner .btn--soft { border-radius: 10px; }
/* ── Порядок блока вопросов ─────────────────────────────────────────────
Во всех мобильных фреймах (30, 32, 34, 36, 38) порядок один: заголовок →
аккордеон вопросов → карточка «У вас есть вопрос…». На сайте карточка
вставала между заголовком и вопросами, потому что лежит внутри .faq__side,
а сам аккордеон распущен глобальным .acc { display: contents }.
Распускаем и левую колонку — тогда все три части становятся детьми .faq
и порядок задаётся order. Шаги из макета: между пунктами 8 (2984→2992),
от последнего пункта до карточки 16 (3464→3480). */
.faq { display: flex; flex-direction: column; gap: 0; }
.faq__side { display: contents; }
.faq__side > .h2 { order: 1; margin-bottom: 28px; }
.acc--faq .acc__item { order: 2; margin-top: 8px; }
.acc--faq .acc__item:first-child { margin-top: 0; }
.faq__ask { order: 3; margin-top: 16px; }
/* Фото менеджера: в макете круг 60 (коробка 32..92 x 3500..3560, подложка
#dde1e8), снимок в него вписан по ширине и обрезан кругом. На сайте стоял
квадрат 80 со скруглением 10. */
.faq__ask-photo { width: 60px; height: 60px; border-radius: 50%; }
/* Ряд «телеграм · вк · Задать вопрос» в макете идёт во всю ширину карточки
ПОД фотографией (x=32..328 при карточке 12..348), а на сайте лежал внутри
правой колонки — 254 точки на 296 макетных, и кнопка ломалась на две
строки. Раскладываем карточку сеткой: фото держит первую колонку в двух
верхних строках, ряд занимает обе колонки третьей. */
.faq__ask { display: grid; grid-template-columns: 60px minmax(0, 1fr); column-gap: 16px; }
.faq__ask > div { display: contents; }
.faq__ask-photo { grid-column: 1; grid-row: 1 / span 2; }
.faq__ask-title { grid-column: 2; grid-row: 1; }
.faq__ask-text { grid-column: 2; grid-row: 2; }
.faq__ask-row { grid-column: 1 / -1; grid-row: 3; margin-top: 23px; }
}
/* ==========================================================================
Мобильный слой: сплошная сверка «Способы покупки» и «О компании» (10.09.2026)
==========================================================================
Числа сняты объектами из мобильных фреймов макета 06.09 — 30-Ипотека,
32-Рассрочка, 34-Трейд-ин, 26-О-компании (tools/pagedump.py), сверка со
страницей — tools/sitedump.py. Таблица расхождений:
wiki/clients/illidium-mobile-sverka-okompanii-pokupka-2026-09-10.md */
@media (max-width: 700px) {
/* ── Способы покупки: верхний отступ полотна ────────────────────────────
В макете белый блок начинается на 298, плашка вкладок на 338 — просвет 40.
На сайте .content давал 20, вкладки стояли вплотную к кромке. */
body.page-template-page-pokupka .content { padding-top: 40px; }
/* ── Плашка вкладок 336x44, кнопка 109x36 ───────────────────────────────
Было 46 и 38: padding кнопки 9, а в макете при кегле 14 выходит 8. */
body.page-template-page-pokupka .tabs[data-buytabs] .tab { padding-top: 8px; padding-bottom: 8px; }
/* ── Плашка предложения ─────────────────────────────────────────────────
Макет: карточка 336, поля 20 (текст с x=32 при кромке 12), описание 15/22,
кнопка 296x44 с просветом 20 до низа карточки. На сайте описание осталось
десктопным 18/27 — из-за этого карточка росла с 260 до 335 (ипотека)
и с 304 до 416 (рассрочка). */
body.page-template-page-pokupka .offer__text { padding: 14px 20px 20px; }
body.page-template-page-pokupka .offer__title { margin-bottom: 14px; }
body.page-template-page-pokupka .offer__text p { font-size: 15px; line-height: 22px; }
body.page-template-page-pokupka .offer__cta { margin-top: 28px; padding-top: 13px; padding-bottom: 13px; }
/* Поле сверху 14, а не 20: в макете 20 отмерены до верха ГЛИФОВ заголовка
(ink 422 при кромке 402), а строка при кегле 24 и шаге 30 начинается на
6 выше глифов. С 14 сверху, 14 под заголовком и 28 над кнопкой карточка
даёт ровно макетные 260 (ипотека), 304 (рассрочка) и 320 (трейд-ин). */
/* ── Кадр под плашкой 336x230, просвет 12 ───────────────────────────────
Было 320 при просвете 20. У рассрочки и трейд-ина внутри лежит картинка
336x384 и её низ срезало кромкой — при 230 кадр берётся целиком. */
body.page-template-page-pokupka .offer { gap: 12px; }
body.page-template-page-pokupka .offer__media { height: 230px; }
/* ── Карточки условий 336x168, просвет 12, текст 15/21 ──────────────────
Было 192 (первая на ипотеке 208, текст лез в три строки) при просвете 20. */
body.page-template-page-pokupka .feats { gap: 12px; margin-top: 12px; }
body.page-template-page-pokupka .feat { min-height: 168px; padding: 15px 20px 20px; }
body.page-template-page-pokupka .feat__text { font-size: 15px; line-height: 21px; margin-bottom: 20px; }
/* Поле сверху 15 — то же правило, что и у плашки: 20 в макете отмерены до
верха глифов (ink 937 при кромке 916). Значок держится margin-top: auto,
поэтому при min-height 168 он сам встаёт на макетные 1033..1063. */
/* Просвет от карточек условий до следующего заголовка: макет 1444 -> 1504
(ink), то есть 54 до строки. На сайте работал десктопный 98. */
body.page-template-page-pokupka .buy-pane > .offer + .feats + .section,
body.page-template-page-pokupka .buy-pane > .offer + .section,
body.page-template-page-pokupka .buy-pane--extra > .section { margin-top: 54px; }
/* ── Блок вопросов: кегли и поля ────────────────────────────────────────
Макет одинаков на всех фреймах: заголовок секции 24/30 (на сайте держался
десктопный 32/40 из слоя 1100px), подпись пункта 18/24 (было 20/26),
кнопка-стрелка 32 (было 36), поля пункта 20 (было 24). При этих числах
закрытый пункт в три строки даёт ровно макетные 112. */
.faq .h2 { font-size: 24px; line-height: 30px; }
.acc--faq .acc__label { font-size: 18px; line-height: 24px; }
.acc--faq .acc__toggle { width: 32px; height: 32px; }
.acc--faq .acc__btn { padding: 20px; }
.acc--faq .acc__panel { padding: 0 20px 20px; }
}
@media (max-width: 700px) {
/* ── Карточка «У вас есть вопрос…» 336x196 ──────────────────────────────
Было 223. Разбор макета сверху вниз: поле 15, заголовок 16/21.6 в две
строки (43), просвет 9, подпись 14/19.6 в две строки (39), просвет 26,
ряд кнопок 44, поле снизу 20. Ряд в макете идёт во всю ширину карточки:
два значка 44x44 с шагом 52 и кнопка от 136 до 328, то есть 192. */
.faq__ask { padding: 15px 20px 20px; row-gap: 0; }
/* row-gap обнулён намеренно: карточка разложена сеткой, а базовый gap 16
добавлялся к каждому просвету и растил её с 196 до 234. */
.faq__ask-title { margin-bottom: 9px; }
.faq__ask-text { margin-top: 0; margin-bottom: 26px; }
.faq__ask-row .round-ic, .faq__ask-row .round-ic img { width: 44px; height: 44px; }
.faq__ask-row { margin-top: 0; gap: 8px; }
.faq__ask-row .social { width: 44px; height: 44px; flex: 0 0 44px; }
.faq__ask-row .btn--sm { flex: 1 1 auto; padding-top: 13px; padding-bottom: 13px; }
/* ── Подвал ─────────────────────────────────────────────────────────────
Мобильный слой ужимал подвал сильнее макета. Числа из фреймов: логотип
219x40 (глифы 12..231), боксы 164x244, подписи 14, значки 132x40 с
шагом 48, кот 105x142. */
.footer__logo { width: 219px; height: 40px; }
.footer__box p { font-size: 14px; }
.footer__socials { gap: 8px; }
.footer__socials .social { height: 40px; }
/* Кот стоит в потоке над кнопкой, виден целиком до бейджа; кнопка под ним с
зазором. Прежнее правило клало кота абсолютом под кнопку (прочтение фрейма
«3673..3815 при кромке 3826»), но скрин макета от клиента 14.09.2026 показал
обратное: кнопка не перекрывает кота. Карточка от этого выше 244 — так и в макете. */
.footer__box--phone { position: relative; }
/* Кот лежит ПОД кнопкой, бейдж и лапы закрыты ею: PDF макета 06.09, мобильный
фрейм, кот 42..147 x 7503..7645 при карточке 12..176 x 7412..7656 и кнопке
7600..7640. Низ кота на 11 от кромки карточки, на 5 ниже низа кнопки.
Сверено со скрином Евгении 14.09.2026 (справа макет): так и должно быть. */
.footer__box--phone { position: relative; }
/* Низ кота ровно на низе кнопки (16*m = отступ карточки), ниже кнопки ничего не торчит (Влад 14.09). */
.footer__box-img { position: absolute; left: 50%; bottom: calc(16 * var(--m)); width: 105px; height: 142px; margin: 0; transform: translateX(-50%); order: 0; }
.footer__box .btn { position: relative; z-index: 1; margin-top: auto; }
/* «Информация» — единственный заголовок, который мобильный слой уравнял с
текстом. В макете он 15 при тексте 14. */
.footer__info b { font-size: 15px; }
/* Пункты третьей колонки в макете тёмные, как заголовки колонок, а не серые. */
.footer__col--plain a { color: var(--black-900); }
}
@media (max-width: 700px) {
/* ── Рассрочка: «Пример расчета» ────────────────────────────────────────
В макете плитки лежат КОЛОНКОЙ во всю ширину карточки (324 при кромке 18,
просвет 6), а на сайте оставалась десктопная раскладка по две в ряд —
из-за неё «4 млн - 2 млн = 2 млн ₽» ломалось на три строки.
Кегли тоже держались десктопные: заголовок 20 против 18, значение плитки
18 против 16, значение широкой плитки 16 против 14, текст шага 16 против 14. */
.calc-row, .calc-row--split { display: grid; grid-template-columns: 1fr; gap: 6px; }
.calc-card__title { font-size: 18px; }
.calc-card__head { padding: 6px 17px 22px; }
.calc-tile__value { font-size: 16px; margin-top: 7px; }
/* Просвет подпись -> значение 7, а не десктопные 10: в макете плитка ровно
324x78, при 10 выходило 81 и каждая карточка росла на 6. */
.calc-tile--wide .calc-tile__value { font-size: 14px; line-height: 20px; }
.calc-steps { gap: 12px; padding: 16px; }
.calc-step__text { font-size: 14px; line-height: 20px; }
.calc-step__n { font-size: 14px; }
/* Картинка «%» в карточке «Делим цену» стояла по десктопной координате
left: 373 и при окне 360 целиком уходила за правый край — на мобильном
её просто не было. В макете она внутри карточки: 149x147 с левым краем
на 194 при кромке карточки 12 и верхом на 14 от её кромки. */
.calc-card__pct { left: 182px; top: 14px; width: 149px; height: 147px; }
}
@media (max-width: 700px) {
/* ── Трейд-ин: «Условия программы» ──────────────────────────────────────
Слой 1100px прятал иллюстрации совсем (.tradein-card__ill { display: none }),
а в мобильных фреймах они есть: два дома в первой карточке и авто во второй.
Координаты из фрейма 34, считаны от кромки карточки:
дом дальний 133,1964 при карточке 1622 -> 121 / 342, ширина 205, зеркально;
дом ближний 22,2012 -> 10 / 390, ширина 152, зеркально;
авто -25,2454 при карточке 2154 -> -37 / 300, ширина 623.
Высоты карточек в макете 520 и 478 — под кнопками остаётся поле, в котором
и лежат картинки, поэтому они заданы явно. */
.tradein-card__ill { display: block; max-width: none; height: auto; }
.tradein-card__ill--house-far { left: 121px; top: 342px; width: 205px; }
.tradein-card__ill--house-near { left: 10px; top: 390px; width: 152px; }
.tradein-card__ill--car { left: -37px; top: 300px; width: 623px; }
.tradein > .tradein-card:nth-child(1) { min-height: 520px; }
.tradein > .tradein-card:nth-child(2) { min-height: 478px; }
/* Заголовок 20 против десктопных 28 (на 336 он ломался на две строки),
пункты 15/21 против 16, кнопки — колонкой во всю ширину 296 с шагом 52. */
.tradein-card { padding: 20px; min-height: 0; }
.tradein-card__title { font-size: 20px; line-height: 24px; letter-spacing: -.5px; }
.tradein-card__list { margin-top: 16px; gap: 6px; }
.tradein-card__list li { padding-left: 28px; font-size: 15px; line-height: 21px; }
/* Маркер в макете — КОЛЬЦО 9 с белой серединой (проверено кропом фрейма
в 8-кратном увеличении), на сайте была залитая точка. */
.tradein-card__list li::before { left: 10px; top: 6px; box-sizing: border-box; background: #fff; border: 2.5px solid var(--blue-900); }
.tradein-card__actions { flex-direction: column; gap: 8px; margin-top: 0; padding-top: 24px; }
/* margin-top: auto снят: он прижимал кнопки к низу карточки, и на мобильном
они ложились прямо на дома. В макете кнопки идут сразу за списком, а поле
под ними и занято иллюстрациями. */
.tradein-card__actions .btn { min-width: 0; width: 100%; padding-top: 13px; padding-bottom: 13px; }
}
@media (max-width: 700px) {
/* ── «О компании»: первый экран ─────────────────────────────────────────
Фрейм 26: подложка во весь экран 0..632 — сине-серое «небо» (#87a3bd
сверху, #9cb3c8 у кромки кадра), текст на ней БЕЛЫЙ (крошки ink 101,
H1 28/32 ink 135 и 167, лид 15/21 ink 213..297), а фото дома 415x311
лежит внизу с левым краем на -23 и упирается в низ экрана. Белое
полотно начинается с 612 — наезжает на кадр на 20 скруглением.
Первый заход (10.09) собрал экран неверно — белое поле и кадр под
текстом; Влад поправил: в макете кадр доходит до самого верха. */
body.page-template-page-o-kompanii .page-hero--about {
position: relative; overflow: hidden; display: flex; flex-direction: column;
height: calc(632px - var(--hdr-shrink)); min-height: 0; padding-top: calc(100px - var(--hdr-shrink)); padding-bottom: 0;
background: linear-gradient(180deg, #87a3bd 0%, #9cb3c8 100%);
}
body.page-template-page-o-kompanii .page-hero--about .page-hero__inner { position: relative; z-index: 1; }
/* Кадр на всю обложку (Влад, 13.09): фото растянуто на 632 по высоте и
обрезано по бокам, дом по центру, низ кадра у низа блока. Прежний вариант
«полоса 415x311 у дна, выше крашеное небо» при 430 (iPhone 15 Pro Max)
оставлял справа пустоту, а с шириной от экрана выглядел как полоска. */
body.page-template-page-o-kompanii .page-hero__img {
position: absolute; z-index: 0; inset: 0; width: 100%; height: 100%;
max-width: none; margin: 0; object-fit: cover; object-position: center top;
}
/* Текст теперь стоит на доме, а не на небе: сверху кладём подложку цвета
неба (#87a3bd), к середине кадра сходящую на нет. */
body.page-template-page-o-kompanii .page-hero--about::after {
display: block; content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none;
background: linear-gradient(180deg, rgba(135, 163, 189, .92) 0, rgba(135, 163, 189, .75) 40%, rgba(135, 163, 189, 0) 62%);
}
/* Затемняющий градиент обложки снят: в макете дом светлый, текст стоит на
«небе» выше кадра и в подложке не нуждается. */
body.page-template-page-o-kompanii .page-hero--about .crumbs--light { margin-bottom: 11px; }
body.page-template-page-o-kompanii .page-hero--about .page-hero__title { font-size: 28px; line-height: 32px; margin-bottom: 15px; }
/* У лида свой отступ сверху 21 — с ним всё уезжало на 21 ниже макета. */
body.page-template-page-o-kompanii .page-hero--about .page-hero__lead { margin-top: 0; }
/* Просвет от кромки полотна до «Направлений»: макет 612 -> ink 652. */
body.page-template-page-o-kompanii .content { padding-top: 34px; }
}
@media (max-width: 700px) {
/* ── «О компании»: лента направлений ────────────────────────────────────
В макете карточки 320x340 с левым краем на 12 и просветом 8 (x = 12,
340, 668, 996). На сайте лента считала ширину от своего внутреннего
поля 20 и давала 280x297, а первая карточка стояла на 20. */
body.page-template-page-o-kompanii .dirs { margin: 20px -12px 0; padding: 0 12px; gap: 8px; scroll-padding: 0 12px; }
body.page-template-page-o-kompanii .dir { flex: 0 0 320px; }
/* Кнопка на закрытой карточке в макете тёмная (#2e383f), а не белая
полупрозрачная; на раскрытой — фирменная синяя, как и было. */
body.page-template-page-o-kompanii .dir__toggle { background-color: var(--black-900); }
}
@media (max-width: 700px) {
/* Просвет от заголовка секции до ленты направлений: макет ink 652 -> 710. */
/* Отбивка заголовка секции: на сайте держались десктопные 50, в макете
от строки «Направления деятельности» (ink 652) до ленты 710 — это 34. */
body.page-template-page-o-kompanii .section__title { margin-bottom: 34px; }
body.page-template-page-o-kompanii .dirs { margin-top: 0; }
/* ── «Социальная ответственность» ───────────────────────────────────────
На сайте блок оставался десктопным: текст в колонке 202 при кегле 18/27
(лид вытягивался на 486 в высоту) и стрелки перелистывания справа.
В макете заголовок и лид идут во всю ширину 336, лид 15/22, стрелок нет —
лента листается пальцем, под ней точки. */
body.page-template-page-o-kompanii .soc-head { display: block; margin-bottom: 26px; }
body.page-template-page-o-kompanii .soc-head__nav { display: none; }
body.page-template-page-o-kompanii .soc-head .h2 { margin-bottom: 15px; }
body.page-template-page-o-kompanii .soc-head__lead { max-width: none; font-size: 15px; line-height: 22px; }
/* Карточка: кадр 320x220, а не 302x426 — на сайте фото было вдвое выше макета. */
body.page-template-page-o-kompanii .soc-card { width: 320px; }
body.page-template-page-o-kompanii .soc-card__img { height: 220px; }
body.page-template-page-o-kompanii .soc-card__more img { width: 9px; height: 4.5px; }
/* Только .soc-card__img: правило на все img карточки зацепило стрелку
«Подробнее», она стала 220 в высоту и растянула карточки до 541 —
отсюда был лишний воздух перед «Иллидиум в цифрах». */
body.page-template-page-o-kompanii .soc-card__text { font-size: 14px; line-height: 20px; }
}
@media (max-width: 700px) {
/* ── «Иллидиум в цифрах» ────────────────────────────────────────────────
Просвет плиток в макете 12 (1856 -> 2148 при высоте 280), на сайте 20.
Тёмная плитка «11 социальных проектов» в макете 170, а не 280 — под
общее правило фото-плиток она попала ошибочно. */
body.page-template-page-o-kompanii .nums { gap: 12px; }
body.page-template-page-o-kompanii .num--dark { min-height: 170px; }
/* Объекты в макете уже, чем на сайте, и у каждого своя привязка к правому
краю плитки: ключи 199 при right -34, звезда 195 при -19, здание 285
при -82. Общая ширина 210 тянула звезду на текст, из-за чего подпись
«И развиваем территории в Твери и области» ломалась на три строки и
синяя плитка росла со 150 до 192. Колонка текста в макете 163. */
/* Коробки объектов в макете (199, 195, 285) — с прозрачными полями,
сам объект внутри много меньше. Файлы на сайте — уже вырезанные
объекты той же пропорции, поэтому размер и место считаны по
альфа-каналу макетного ассета: ключи 105x171 с верхом на -41 от
кромки плитки (срезаны сверху), звезда 91x160 с верхом на 9 (срезана
снизу), здание 140x257 с верхом на 16 (срезано снизу). */
body.page-template-page-o-kompanii .num__ill { top: auto; transform: none; height: auto; }
body.page-template-page-o-kompanii .num__ill--keys { width: 105px; right: 21px; top: -41px; }
body.page-template-page-o-kompanii .num__ill--star { width: 91px; right: 32px; top: 9px; }
body.page-template-page-o-kompanii .num__ill--building { width: 140px; right: -9px; top: 16px; }
/* Фоны плиток из макета (цвета сняты с рендера фрейма по точкам):
светлая плитка с ключами — голубой градиент слева направо
#cae1e8 -> #eff2f5; синяя — с осветлением в левом верхнем углу,
#23bff1 -> #0281aa к правому нижнему. */
body.page-template-page-o-kompanii .num--soft { background: linear-gradient(110deg, #cae1e8 0%, #eff2f5 100%); }
body.page-template-page-o-kompanii .num--blue { background: linear-gradient(140deg, #25c1f3 0%, #0281aa 100%); }
/* Просвет заголовок -> подпись 16 (ink 2358 -> 2401 при шаге 28 и 20),
на сайте было 8. Подпись тёмной плитки в колонке 200, как в макете
(«Помогли реализовать / проекты, важные для жителей / Твери и области»). */
body.page-template-page-o-kompanii .num__text { margin-top: 16px; }
body.page-template-page-o-kompanii .num--dark .num__title,
body.page-template-page-o-kompanii .num--dark .num__text { max-width: 200px; }
body.page-template-page-o-kompanii .num__title,
body.page-template-page-o-kompanii .num__text { max-width: 168px; }
body.page-template-page-o-kompanii .num--photo .num__title { max-width: 236px; }
body.page-template-page-o-kompanii .num--photo .num__text { max-width: 100%; }
/* Заголовок фото-плитки в колонке 236: в макете «275 000+ м² / построенного
жилья» и «4 000+ семей выбрали / квартиры в проектах / от Иллидиум» —
строки не шире 230, на всю ширину заголовок ломался иначе. */
/* Колонка 168, а не 163: строка «участвуем в его развитии.» в макете 164
и при 163 ломалась на четвёртую. Тёмная плитка из этого правила убрана —
у неё колонка 200, задана ниже. */
}
@media (max-width: 700px) {
/* ── «Наши награды» ─────────────────────────────────────────────────────
Макет: карточка 320x232 с просветом 8, логотип 122x101 по центру,
подпись 16/22. На сайте было 302x350, логотип 183x151, подпись 18. */
body.page-template-page-o-kompanii .awards__track { gap: 8px; }
body.page-template-page-o-kompanii .awards__track .award { width: 320px; min-height: 232px; }
body.page-template-page-o-kompanii .award img { width: 122px; height: 101px; }
body.page-template-page-o-kompanii .award__text { font-size: 16px; line-height: 22px; }
/* ── «Наши проекты» ─────────────────────────────────────────────────────
Макет: карточка 320x260 с просветом 8; бейджи «Строится» и «340 квартир»
лежат в ВЕРХНЕМ левом углу кадра (22 и 95 при кромке 12, высота 24,
кегль 12), а на сайте они стояли внизу рядом с названием. Подпись 14/20. */
body.page-template-page-o-kompanii .projects__track { gap: 8px; }
body.page-template-page-o-kompanii .project { width: 320px; height: 260px; min-height: 0; }
/* Подпись растягивается на всю карточку и раскладывается по вертикали:
бейджи уходят наверх (10 от кромки, как в макете), название с подписью
остаются внизу. Абсолютная привязка бейджей тут не работает — ближайший
позиционированный предок это сам .project__foot, и top: 10 отсчитывался
от него, из-за чего метки ложились посреди кадра поверх названия. */
body.page-template-page-o-kompanii .project__foot {
left: 10px; right: 10px; top: 10px; bottom: 24px;
flex-direction: column; align-items: stretch; justify-content: space-between;
}
body.page-template-page-o-kompanii .project__foot > div:not(.project__badges) { padding: 0 10px; }
body.page-template-page-o-kompanii .project__badges { order: -1; justify-content: flex-start; }
body.page-template-page-o-kompanii .project__badges .badge { font-size: 12px; padding: 4px 10px; }
body.page-template-page-o-kompanii .project__note { font-size: 14px; line-height: 20px; }
/* Стрелок перелистывания в мобильных фреймах нет ни у одной ленты этой
страницы — листается пальцем, положение показывают точки. */
body.page-template-page-o-kompanii .section__head .icon-btn { display: none; }
}
@media (max-width: 700px) {
/* Поле сверху у награды 21, как в макете (лого 3235 при кромке 3214);
было 40 и карточка выходила 257 вместо 232. */
body.page-template-page-o-kompanii .award { padding-top: 21px; min-height: 232px; }
/* ── «Остались вопросы?» ────────────────────────────────────────────────
В макете блок 336x602: поля 296x44 идут КОЛОНКОЙ с просветом 12, кнопка
во всю ширину 296, а 3D-объект лежит ВНИЗУ под кнопкой (449x448 с левым
краем на -56 от кромки блока и верхом на 379) и обрезан его кромкой.
На сайте объект стоял сверху над полями, поля — по два в ряд (112),
кнопка 236. */
body.page-template-page-o-kompanii .askbar { position: relative; overflow: hidden; min-height: 602px; padding: 20px; gap: 20px; align-content: start; }
/* align-content: start обязателен: при заданной высоте 602 сетка растягивала
строки и текст уезжал на 77 от кромки вместо макетных 20. Просвет 20
ставит поля формы на 122, как в макете (3920 -> 4042). */
body.page-template-page-o-kompanii .askbar__img {
position: absolute; left: -56px; top: 379px; width: 449px; height: 448px;
max-width: none; margin: 0; object-fit: contain;
}
/* padding: 0 — у формы оставалось собственное поле 20 поверх поля блока,
из-за него поля выходили 256 вместо макетных 296. */
body.page-template-page-o-kompanii .askbar__form { position: relative; z-index: 1; padding: 0; }
body.page-template-page-o-kompanii .askbar__form .form__fields--row { grid-template-columns: 1fr; display: grid; gap: 12px; }
body.page-template-page-o-kompanii .askbar__form .btn { width: 100%; }
}
@media (max-width: 700px) {
/* Просвет между секциями «О компании»: в макете от точек под лентой до
следующего заголовка 56 (1066 -> 1121, 1735 -> 1791, 3462 -> 3517),
без точек от последней плитки — 53. На сайте держались 90. */
body.page-template-page-o-kompanii .section + .section { margin-top: 56px; }
/* Раскрытие карточки направления по «+»: на телефоне переход выглядел как
подгрузка (фото гаснет, текст проявляется, кнопка с blur-подложкой).
Убираем анимацию и blur — состояние меняется сразу. */
body.page-template-page-o-kompanii .dir__img,
body.page-template-page-o-kompanii .dir::after,
body.page-template-page-o-kompanii .dir__text,
body.page-template-page-o-kompanii .dir__toggle { transition: none; }
body.page-template-page-o-kompanii .dir__toggle { backdrop-filter: none; }
}
/* ==========================================================================
Окно заявки на телефоне (11.09.2026, разбор Влада: на iPhone 13 Pro окно
«Получить консультацию» не влезало по высоте)
========================================================================== */
/* Причина обрезки: .modal центрирует бокс через align-items: center, и когда
бокс выше окна, верх уходит за экран, а прокрутка до него не достаёт (в окне
390x664 бокс 695 стоял с top -15). Центрируем полями auto: при запасе места
бокс стоит по центру, при нехватке — прижимается к верху и скроллится. */
.modal { align-items: flex-start; }
.modal__box { margin: auto; }
@media (max-width: 900px) {
/* Поля 44 в высоту, как в макете 40 (ink 383 -> 439, шаг 56 = 44 + 12); было 49. */
.modal .input { padding-top: 12px; padding-bottom: 12px; }
.modal .form__fields { gap: 12px; }
}
/* Низкий экран телефона (Safari с панелями даёт ~660): полоса с маскотом
210 -> 150, поля окна 20 -> 16, и всё окно помещается в 664 с полями 20. */
@media (max-width: 900px) and (max-height: 740px) {
.modal { padding: 12px 20px; }
.modal__aside { flex-basis: 150px; height: 150px; }
.modal__pane { padding: 16px 20px 20px; }
.modal__title { font-size: 20px; }
}
@media (max-width: 700px) {
/* ── ЖК, «Особенности» (правка дизайнера 11.09, фрейм 17) ─────────────────
Карточка 320x340 (была 300x320). Картинка масштабируется от десктопных
чисел: по трём карточкам макета мобильное положение = десктоп x 0.86,
левый край + 22 (кирпичи 322/-3/142 -> 271/24/123, отопление 261/34/140 ->
231/50/119, входная группа 406/-73/173 -> 364/-44/148; расхождение до 15). */
.osob-card { width: 320px; min-height: 340px; }
/* Лид 15/22 (на сайте был 16/24 — четыре строки вместо трёх), заголовок
карточки в колонке 220 («Современные материалы / и технологии»), подпись
в колонке 165 («Наружные стены дома / выполняются в три слоя»). */
.osob-intro p { font-size: 15px; line-height: 22px; }
.osob-card__title { max-width: 220px; }
.osob-card__text { max-width: 165px; }
.osob-card__ill { width: calc(var(--w) * .86); left: calc(var(--l) * .86 + 22px); top: calc(var(--t) * .86); }
/* ── ЖК, «Отделка от застройщика» (правка дизайнера 11.09, фрейм 17) ──────
Сегмент вкладок во всю ширину 336x44, вкладка 36 (было 266x48). Кадр 292
тёмный #2e383f: фото занимает верхние 240, ниже переход в тёмную полосу
52, на ней плашка цены белым 20 % во всю ширину (18..342, 36 в высоту),
текст белый 14. Стрелки и «развернуть» 36, подложка тёмная 50 % (было
32 и 80 %). Точки-индикаторы у нижней кромки фото. Кнопка «Скачать
каталог» под кадром во всю ширину, 44, голубая 10 % с синим текстом —
выводится, когда в карточке ЖК загружен файл каталога. */
#otdelka .tabs--segment { width: 100%; height: 44px; padding: 4px; }
/* min-width: 0 — иначе десктопные 140 на вкладку дают 428 при капсуле 364, и «Премиум» обрезается. */
#otdelka .tabs--segment .tab { flex: 1 1 0; min-width: 0; height: 36px; padding: 0; font-size: 14px; }
/* Вариант C со стенда (Влад 18.09.2026): тёмной полосы под кадром больше нет, кадр
во всю высоту 292, цена стеклянной плашкой прямо на фото — как на десктопе.
Раньше было фото 240 + полоса 52 с растушёвкой, из-за неё низ кадра темнел. */
.finish { background: transparent; padding-bottom: 0; }
.finish__img, body.single-ill_object #otdelka .finish__img { height: 292px; }
.finish__price {
left: 6px; right: 6px; bottom: 6px; z-index: 2; padding: 0; height: 36px;
display: flex; align-items: center; justify-content: center;
background: rgba(255, 255, 255, .2); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
color: #fff; font-size: 14px; font-weight: 500;
}
/* Середина кадра 292 = 146: 120 осталось от кадра 240, стрелки стояли выше середины (Влад 19.09.2026). */
.finish__nav { left: 10px; right: 10px; top: 146px; z-index: 2; }
.finish__nav .icon-btn { width: 36px; height: 36px; background: rgba(255, 255, 255, .2); }
.finish__zoom { top: 10px; right: 10px; width: 36px; height: 36px; background: rgba(255, 255, 255, .2); z-index: 2; }
/* Полоски-индикаторы кадров на телефоне убраны (Влад 18.09.2026): листается пальцем и стрелками. */
.finish__dots { display: none; }
/* ── Страница ЖК: круглые кнопки-стрелки одного размера (Влад 19.09.2026) ──
Были 48 (первый экран, ход строительства), 40 (плитки «О проекте»), 36
(галерея, акции, отделка), 32 (способы покупки). Теперь везде 36, как в
галерее. Цвет по правилу: кнопка поверх фото — стеклянная, как в отделке
(белая 20 % + размытие, белая стрелка); кнопка на белом фоне вне карточки —
белая с тенью. Кнопка запуска видео в плитке — не стрелка, не трогаем. */
.page-hero--jk .page-hero__nav .icon-btn,
.jk-tile__next.icon-btn,
.gallery__nav .icon-btn,
.ways__card .ways__arrow,
#hod .section__head .icon-btn { width: 36px; height: 36px; padding: 0; }
.page-hero--jk .page-hero__nav .icon-btn img,
.jk-tile__next.icon-btn img,
.gallery__nav .icon-btn img,
#hod .section__head .icon-btn img { width: 9.83px; height: 4.83px; }
.page-hero--jk .page-hero__nav .icon-btn,
.jk-tile__next.icon-btn,
.gallery__nav .icon-btn,
.gallery__zoom {
background: rgba(255, 255, 255, .2); box-shadow: none;
-webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.page-hero--jk .page-hero__nav .icon-btn img,
.jk-tile__next.icon-btn img,
.gallery__nav .icon-btn img { filter: brightness(0) invert(1); }
.page-hero--jk .page-hero__nav .icon-btn:hover,
.jk-tile__next.icon-btn:hover,
.gallery__nav .icon-btn:hover { background: rgba(255, 255, 255, .35); }
#hod .section__head .icon-btn { background: #fff; box-shadow: 0 2px 8px rgba(46, 56, 63, .08); }
.page-hero--jk .page-hero__nav { gap: 8px; }
/* Тур по проекту: карточка по содержимому, без пола 256 — под кнопкой
«Открыть 3D-тур» оставалось ~90 пустых (Влад 19.09.2026). */
.tour__card { min-height: 0; }
/* Особенности: заголовок и текст во всю ширину карточки (колонки 220/165 из
фрейма 17 сняты — текст читался как прижатый к середине, Влад 19.09.2026). */
.osob-card__title, .osob-card__text { max-width: none; }
.finish__point { z-index: 2; }
#otdelka { display: flex; flex-direction: column; }
#otdelka .section__head { display: contents; }
#otdelka .tabs--segment { margin-bottom: 16px; }
/* Список вариантов под вкладками во всю ширину, той же высоты 44, что и вкладки. */
#otdelka .finish-select { width: 100%; margin: -4px 0 16px; }
#otdelka .finish-select__input { height: 44px; font-size: 14px; }
#otdelka .btn--catalog {
order: 10; margin-top: 20px; height: 44px; width: 100%; font-size: 14px;
background: rgba(0, 124, 164, .1); border: 0; color: var(--blue-900);
}
}
/* Окно заявки на низком экране: полоса с маскотом 150 вместо 210, но кот
масштабируется вместе с ней (216 -> 154), чтобы в кадре остались голова и
плечи, как в макете 40 — а не одна морда крупно (правка дизайнера 11.09). */
@media (max-width: 900px) and (max-height: 740px) {
.modal__photo { width: 154px; }
}
/* ==========================================================================
Разбор Влада 13.09.2026: скриншоты iPhone 13 Pro (390) и 15 Pro Max (430)
========================================================================== */
@media (max-width: 700px) {
/* ── Коммерция, «Возможность летней веранды» ────────────────────────────
Фото лежало абсолютно у дна с высотой 123 и object-fit: cover — при ширине
карточки 364 (390) и 401 (430) кадр 2.63:1 не влезал по высоте, и спинки
кресел срезались. Теперь фото в потоке: карточка растёт от содержимого,
кадр целиком, ширина во всю карточку (поля -20, как в макете 22: 12..348).
Сам файл заменён на исходник из макета 1920x700 — старый 900x342 был
срезан сверху ещё до вёрстки. */
.km-card:has(.km-card__ill--veranda) { min-height: 0; padding-bottom: 0; }
.km-card:has(.km-card__ill--veranda) > div { margin-bottom: 0; }
.km-card:has(.km-card__ill--veranda) .km-card__title { margin-bottom: 0; }
.km-card:has(.km-card__ill--veranda) .km-card__text { margin-top: 0; }
.km-card__ill--veranda {
position: static; inset: auto; transform: none;
width: calc(100% + 40px); max-width: none; height: auto; max-height: none;
margin: 4px -20px 0; object-fit: contain;
}
/* ── Блок заявки «Остались вопросы?» / «Получить консультацию» ─────────
Макеты 26 и 28 рисуют его одинаково: поля колонкой, кнопка во всю ширину,
3D-объект внизу под кнопкой, обрезан кромкой блока. На сайте так стоял
только «О компании» (правка 10.09), остальные страницы показывали объект
260x260 между текстом и полями, а поля в ряд — «дом маленький».
Объект центрируется от блока (в макете 336: -56 + 449/2 = центр), а не
фиксированным left: -56 — при 401 (iPhone 15 Pro Max) он уезжал влево.
Верх объекта привязан к низу блока (bottom: -225), а пол блока 218 держит
под него место: при длинном заголовке блок растёт, объект остаётся под
кнопкой. При 336 это те же 602 и верх 379, что и раньше. */
.askbar,
body.page-template-page-o-kompanii .askbar {
position: relative; overflow: hidden; min-height: 0;
padding: 20px 20px 218px; gap: 20px; align-content: start;
}
.askbar__img,
body.page-template-page-o-kompanii .askbar__img {
position: absolute; left: 50%; top: auto; bottom: -225px; transform: translateX(-50%);
width: 449px; height: 448px; max-width: none; margin: 0; object-fit: contain;
}
.askbar__form,
body.page-template-page-o-kompanii .askbar__form { position: relative; z-index: 1; padding: 0; width: 100%; }
.askbar__form .form__fields--row { grid-template-columns: 1fr; display: grid; gap: 12px; }
.askbar__form .btn { width: 100%; }
/* ── Список новостей: колонка, как акции (макет 09: карточки 336 друг под
другом с шагом 310), а не лента — лента задана общим .news для главной. */
body.post-type-archive-ill_news .news {
display: grid; grid-template-columns: 1fr; gap: calc(12 * var(--m));
margin: 0; padding: 0; overflow: visible; scroll-snap-type: none;
}
body.post-type-archive-ill_news .news__card { flex: none; scroll-snap-align: none; }
}
/* ── Мобильное меню: низ «Связаться с нами» закреплён, пункты листаются ────
На реальных телефонах (Safari с нижней панелью, 13 Pro / 15 Pro Max) значки
мессенджеров уходили под панель, кнопка «Оставить заявку» — за экран, до неё
надо было листать. Панель меню разбита на прокручиваемую часть и
фиксированный низ: значки + кнопка одной строкой (Влад, 13.09). */
.mnav { display: flex; flex-direction: column; overflow: hidden; }
.mnav[hidden] { display: none; }
.mnav__scroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; }
.mnav__body { min-height: 0; padding-bottom: 24px; }
.mnav__foot {
flex: 0 0 auto; display: flex; align-items: center; gap: 8px;
padding: 12px 12px calc(12px + env(safe-area-inset-bottom));
background: #fff; box-shadow: 0 -10px 24px rgba(27, 34, 39, .06);
}
.mnav__foot .social { flex: 0 0 auto; width: 44px; height: 44px; }
.mnav__foot .social img { width: 14px; height: auto; }
.mnav__foot .mnav__cta { flex: 1 1 auto; margin: 0; height: 44px; }
/* ==========================================================================
Планшет 701..1100 (iPad Air/Pro 11 вертикально = 820/834, mini = 744).
До 13.09.2026 между мобильным слоем (700) и десктопом почти ничего не было:
Влад открыл сайт на iPad Air — шапка без меню и без бургера, карточки
первого экрана разной высоты, фото менеджера во весь блок. Слой лежит в
конце файла, чтобы при равной специфичности перебивать планшетные правила
выше по файлу.
========================================================================== */
@media (min-width: 701px) and (max-width: 1100px) {
/* Шапка: горизонтальное меню спрятано с 1100, бургер показывался только с 700 —
в промежутке меню не было вовсе. Мобильная панель (.mnav) от ширины не зависит. */
.header .burger { display: inline-flex; }
/* Панель меню свёрстана под 336: на 820 пункты по 16 читались мелко. */
.mnav__item { padding: 14px 0; font-size: 20px; }
.mnav__sublink { padding: 10px 0; font-size: 16px; }
.mnav__label, .mnav__value { font-size: 16px; }
/* Первый экран: две акционные карточки в ряд одной высоты (было 380 и 200 —
макетные высоты колонки, в ряду они читались как ошибка). */
.promo, .promo-white { height: 240px; flex: 1 1 0; }
/* «Подберём квартиру»: текст слева, менеджер справа, а не фото во всю ширину
под текстом. */
.lead__promo { display: grid; grid-template-columns: 1fr 240px; grid-template-rows: auto 1fr; column-gap: 24px; min-height: 0; padding-bottom: 0; }
.lead__title { grid-column: 1; grid-row: 1; max-width: none; }
.lead__text { grid-column: 1; grid-row: 2; }
.lead__img { position: static; grid-column: 2; grid-row: 1 / 3; width: 240px; height: 270px; margin-top: -30px; object-position: top; }
/* «Способы покупки» на главной: две колонки, третья карточка на всю ширину;
картинки прижаты к правому краю, чтобы не оставлять пустой фон справа. */
.buy { grid-template-columns: repeat(2, 1fr); }
.buy__card--3 { grid-column: 1 / -1; }
.buy__card--1 .buy__img { left: auto; right: -40px; }
.buy__card--2 .buy__img { left: auto; right: -30px; }
.buy__card--3 .buy__img { left: auto; right: 0; }
/* Страница ЖК: четыре плитки «О проекте» по две в ряд, тур — карточка и кадр
в ряд, способы покупки — плитки по две. */
.jk-tiles { grid-template-columns: repeat(2, 1fr); }
.tour { grid-template-columns: 1fr 1fr; }
.tour__card { min-height: 0; }
.ways__grid { grid-template-columns: 1fr 1fr; grid-auto-rows: minmax(200px, auto); }
.ways__media { min-height: 360px; }
.ways__media img { max-height: 420px; }
/* Правки Влада по скринам iPad 14.09.2026. */
/* «Способы покупки», ипотека: строка «условиях» ложилась на мальчика —
текст уже, семья правее. */
.buy__card--1 .buy__text { max-width: 190px; }
.buy__card--1 .buy__img { right: -100px; }
/* «4000+ семей», широкая карточка: дом 336x397 закрывал половину карточки
шириной 368 и ложился под текст. Как на мобильном: дом занимает правую
часть во всю высоту, текст живёт в левой. */
.about__intro { width: 54%; }
.about__cell--wide > img.about__photo { left: auto; right: 0; top: 0; width: 42%; height: 100%; object-fit: cover; object-position: left center; }
.about__logo { top: auto; bottom: 24px; }
/* «Больше, чем квадратные метры»: фото стояло отдельным блоком над списком.
Как на мобильном, фото приклеивается к раскрытому пункту (main.js переносит
его в DOM до 1100). */
.more { display: flex; flex-direction: column; gap: 0; }
.more__lead { width: auto; max-width: 600px; }
.acc { display: contents; }
.more .acc__item + .acc__item { margin-top: 8px; }
.more__media {
height: auto; min-height: 0; position: relative; background: var(--blue-900);
border-radius: 0 0 var(--r-primary) var(--r-primary); padding: 0 6px 6px;
}
.more__media img { position: static; width: 100%; height: auto; aspect-ratio: 16 / 9; border-radius: 12px; }
.more__media[data-acc-media] img:not(.is-active) { display: none; }
.more__media::after { display: none; }
.more .acc__item.is-open { border-radius: var(--r-primary) var(--r-primary) 0 0; }
/* Коммерция, «Проекты в Твери»: на iPad палец тянул ленту по диагонали:
лента ехала вбок, страница вверх, и без примагничивания карточка
останавливалась где попало (Влад, 14.09.2026). Снап как на мобильном:
по горизонтали лента всегда доезжает до карточки. Вертикальный жест
над лентой намеренно оставлен странице (touch-action: pan-x запер бы
прокрутку страницы над блоком высотой 500). */
.jk-carousel .jk-grid { scroll-snap-type: x mandatory; overscroll-behavior-x: contain; }
.jk-carousel .jk { scroll-snap-align: start; }
/* Коммерция, «Возможность летней веранды»: кресла в правую часть карточки,
текст в левую (лежали во всю ширину под текстом). */
.km-card:has(.km-card__ill--veranda) { min-height: 320px; padding-right: 50%; padding-bottom: 24px; }
.km-card__ill--veranda {
position: absolute; left: auto; right: 24px; bottom: 0; top: auto; transform: none;
width: 48%; max-width: 420px; height: auto; margin: 0; object-position: bottom;
}
}
/* ── Сдвиг кадра (18.09.2026) ─────────────────────────────────────────────
Та же анимация, что у дорожки первого экрана (.slider__track: 0,45 с,
cubic-bezier(.4,0,.2,1)), для блоков, где кадры переключаются классом или
подменой src: карточка ЖК, галерея ЖК, отделка ЖК и Коммерции, просмотр во весь
экран. Классы вешает main.js (slideEls / slideImg). Уходящий кадр на время
анимации лежит абсолютом поверх (.is-leaving) или его копия-призрак (.ill-ghost). */
@keyframes ill-in-r { from { transform: translateX(100%); } to { transform: none; } }
@keyframes ill-in-l { from { transform: translateX(-100%); } to { transform: none; } }
@keyframes ill-out-l { from { transform: none; } to { transform: translateX(-100%); } }
@keyframes ill-out-r { from { transform: none; } to { transform: translateX(100%); } }
.ill-enter-r { animation: ill-in-r .45s cubic-bezier(.4, 0, .2, 1) both; }
.ill-enter-l { animation: ill-in-l .45s cubic-bezier(.4, 0, .2, 1) both; }
.ill-leave-l { animation: ill-out-l .45s cubic-bezier(.4, 0, .2, 1) both; }
.ill-leave-r { animation: ill-out-r .45s cubic-bezier(.4, 0, .2, 1) both; }
.is-leaving { display: block !important; position: absolute !important; inset: 0; z-index: 0; pointer-events: none; }
.ill-ghost { position: absolute !important; inset: 0; width: 100% !important; height: 100% !important; object-fit: cover; z-index: 0; pointer-events: none; }
/* Просмотр во весь экран: фон сам fixed, картинке хватает сдвига. */
/* Страница 404 (15.09.2026): заголовок, строка, кнопка — по центру. */
.section--404 { text-align: center; padding: 80px 0 120px; }
.section--404 .page-title { margin-bottom: 16px; }
.section--404 p + p { margin-top: 28px; }
/* --- Плавающая кнопка связи (inc/widget.php, 19.09.2026) ------------------
Правый нижний угол, столбик круглых кнопок раскрывается вверх от главной.
Лежит под окнами форм (z 100) и над плашкой cookies (z 60): на телефоне
плашка занимает всю ширину, тогда JS поднимает кнопку на её высоту (--fw-lift).
Над видимой панелью якорей ЖК кнопку ставит --fw-above (низ над панелью). */
.fw {
position: fixed; right: 24px; bottom: max(calc(24px + var(--fw-lift, 0px)), var(--fw-above, 0px)); z-index: 70;
display: flex; flex-direction: column; align-items: center; gap: 12px;
transition: bottom .2s ease;
}
.fw__list { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.fw__btn, .fw__toggle {
display: flex; align-items: center; justify-content: center;
border-radius: 50%; background: var(--blue-900); color: #fff;
box-shadow: 0 8px 24px rgba(0, 124, 164, .3);
transition: background .15s ease, transform .2s ease, opacity .2s ease, visibility .2s;
}
.fw__btn:hover, .fw__toggle:hover { background: var(--blue-hover); }
.fw__toggle { width: 64px; height: 64px; position: relative; }
.fw__toggle svg { width: 30px; height: 30px; }
.fw__btn { width: 56px; height: 56px; position: relative; }
.fw__btn svg { width: 26px; height: 26px; }
.fw__btn.is-empty { opacity: .45; cursor: default; }
/* Закрыто: кнопки сложены к главной и прозрачны; открыто — расходятся с задержкой снизу вверх. */
.fw__list .fw__btn { opacity: 0; visibility: hidden; transform: translateY(24px) scale(.8); }
.fw.is-open .fw__list .fw__btn { opacity: 1; visibility: visible; transform: none; }
.fw.is-open .fw__btn:nth-last-child(1) { transition-delay: 0s; }
.fw.is-open .fw__btn:nth-last-child(2) { transition-delay: .04s; }
.fw.is-open .fw__btn:nth-last-child(3) { transition-delay: .08s; }
.fw.is-open .fw__btn:nth-last-child(4) { transition-delay: .12s; }
.fw.is-open .fw__btn:nth-last-child(5) { transition-delay: .16s; }
/* Главная кнопка: значок диалога, в открытом виде — крестик. */
.fw__ic { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; transition: opacity .15s ease, transform .2s ease; }
.fw__ic--close { opacity: 0; transform: rotate(-90deg); }
.fw.is-open .fw__ic--open { opacity: 0; transform: rotate(90deg); }
.fw.is-open .fw__ic--close { opacity: 1; transform: none; }
/* Подсказка слева от кнопки — только там, где есть наведение. */
@media (hover: hover) and (pointer: fine) {
.fw__btn::after {
content: attr(data-tip); position: absolute; right: calc(100% + 12px); top: 50%; transform: translateY(-50%);
white-space: nowrap; padding: 8px 12px; border-radius: var(--r-secondary);
background: var(--black-900); color: #fff; font-size: 14px; line-height: 1.3; letter-spacing: -.3px;
opacity: 0; visibility: hidden; transition: opacity .15s ease;
}
.fw__btn:hover::after { opacity: 1; visibility: visible; }
}
@media (max-width: 700px) {
.fw { right: calc(12 * var(--m)); bottom: max(calc(10px + var(--fw-lift, 0px)), var(--fw-above, 0px)); gap: 10px; }
.fw__list { gap: 10px; }
/* Тень десктопа (8 вниз, размытие 24) шире отступа до края экрана — край её
срезал снизу и справа (Влад 28.09.2026). Здесь тень укладывается в отступ:
низ 10 (Влад: 16 → 10 → 6 → вернул 10, 29.09), тень 2 + 8 = 10. */
.fw__btn, .fw__toggle { box-shadow: 0 2px 8px rgba(0, 124, 164, .3); }
.fw__toggle { width: 50px; height: 50px; } /* 56 -> 50 по макету дизайнера, 01.10.2026 */
.fw__toggle svg { width: 23px; height: 23px; }
.fw__btn { width: 48px; height: 48px; }
.fw__btn svg { width: 22px; height: 22px; }
/* При открытом мобильном меню кнопка не нужна — там свои контакты. */
body.is-mnav-open .fw { display: none; }
}
/* Точка фокуса для телефона (28.09.2026): у файла в медиатеке поля «На телефоне»,
inc/media.php кладёт их в --ill-fpm. Общая точка стоит инлайном, поэтому !important. */
@media (max-width: 700px) {
img[style*="--ill-fpm"] { object-position: var(--ill-fpm) !important; }
}
/* Нижний ряд над полоской «домой» iPhone (29.09.2026, проверено Владом в Chrome, Safari, Firefox).
В Chrome адресная строка сверху, страница доходит до края экрана, и кнопки садились на полоску.
Отступ — большее из двух: наш (10 у кнопки связи, 13 у «Выбрать квартиру» — центры на одной
линии) или высота полоски env(safe-area-inset-bottom). Где панель браузера снизу (Safari,
Firefox), высота 0 и остаётся наш отступ; в Chrome кнопки встают вплотную над полоской
(Влад: «только в хроме немного ниже» — сначала было 10 + полоска). */
@media (max-width: 700px) {
.fw { bottom: max(calc(max(10px, env(safe-area-inset-bottom, 0px)) + var(--fw-lift, 0px)), var(--fw-above, 0px)); }
/* +1.5 = (50 кнопки связи - 47 «Выбрать квартиру») / 2: центры на одной линии. */
body.single-ill_object .anchors { bottom: calc(max(10px, env(safe-area-inset-bottom, 0px)) + 1.5px + var(--anch-lift, 0px)); }
}