html, body { margin: 0; padding: 0; background: #fff; overflow-x: clip; max-width: 100%; }
body { overflow-x: clip; }
img { max-width: 100%; height: auto; }
/* Слайдеры с прокруткой мышью: рука-курсор и запрет выделения при перетаскивании */
/* ============ ОБЩИЕ ТОКЕНЫ И БАЗА (один раз на корне) ============ */
.page{
--accent: #0E7A3B;
--accent-dk: #0A5E2D;
--soft: #F5F8F6;
--white: #ffffff;
--ink: #1C2620;
--muted: #6B7770;
--line: #E7F4EC;
font-family: 'Montserrat', system-ui, sans-serif;
color: var(--ink);
}
.page *{ box-sizing: border-box; }
/* общий контейнер-обёртка для контента блоков */
/* общие элементы, переиспользуемые блоками */
/* ===================== HERO ===================== */
.hero__features{ display: grid; grid-template-columns: 1fr 1fr; gap: 16px 24px; margin-bottom: 32px; max-width: 540px; }
.hero__feature{ display: flex; align-items: center; gap: 12px; }
.hero__feature-ic{ width: 42px; height: 42px; flex: 0 0 auto; border-radius: 12px; display: grid; place-items: center;
background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.22); color: #fff; }
.hero__feature-ic svg{ width: 21px; height: 21px; }
.hero__feature > span:last-child{ font-size: 14px; font-weight: 700; color: #fff; line-height: 1.25; }
/* соц-иконки (общий компонент) */
.socials{ display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.socials__label{ font-size: 13.5px; font-weight: 700; color: var(--muted); }
.social-ic{ display: block; width: 40px; height: 40px; border-radius: 11px; overflow: hidden; transition: transform .15s ease; }
.social-ic:hover{ transform: translateY(-2px); }
.social-ic img{ width: 100%; height: 100%; object-fit: contain; display: block; }
.hero__socials .socials__label{ color: rgba(255,255,255,.72); }
/* табы-чипы */
/* карусель */
/* карточка */
.badge{
display: inline-flex; align-items: center; gap: 5px;
font-size: 12px; font-weight: 700; color: var(--accent-dk);
background: var(--soft); border-radius: 8px; padding: 7px 10px; white-space: nowrap;
}
.badge svg{ width: 13px; height: 13px; }
/* текст задан один раз, в CSS */
@keyframes cardIn{ from{ opacity:0; transform: translateY(18px); } to{ opacity:1; transform:none; } }
.dot{ width: 9px; height: 9px; border-radius: 30px; background: #CFE6D8; border: 0; padding: 0; cursor: pointer; transition: all .3s ease; }
.dot:hover{ background: var(--accent); }
.dot.is-active{ width: 28px; background: linear-gradient(135deg, var(--accent), var(--accent-dk)); }
/* ============ БЛОК: ЗАПИСАТЬСЯ НА ПРОСМОТР ============ */
/* ============ БЛОК: ОТВЕТЫ НА ВОПРОСЫ ============ */
/* ============ БЛОК: ФИНАЛЬНЫЙ CTA ============ */
/* галерея-карусель в правой колонке */
/* карусель ЖК */
/* финальная карточка-призыв */
/* ============ БЛОК: ОТДЕЛОЧНЫЕ МАТЕРИАЛЫ ============ */
/* ============ БЛОК: ДОСТУПНОЕ КАЧЕСТВО ============ */
/* текст кнопки — один раз, в CSS */
/* ============ БЛОК: РЕМОНТ В РАЗНЫХ ПОМЕЩЕНИЯХ ============ */
/* ============ БЛОК: КАК МЫ РАБОТАЕМ ============ */
/* плавный переход фото в белый фон карточки */
/* акцентная (первая) карточка — выделяется цветом */
/* телефонная карточка */
/* ============ БЛОК: ЦЕНА РЕМОНТА ============ */
/* ============ БЛОК: ОТЗЫВЫ ============ */
/* ============ БЛОК: ПОРТФОЛИО ============ */
/* ===================== АДАПТИВ ===================== */
@media (max-width: 640px) {
.hero__features{ grid-template-columns: 1fr; gap: 14px; }
}
@media (max-width: 400px) {
.hero__feature-ic{ width: 38px; height: 38px; }
.socials__label{ width: 100%; }
}
/* ===== Секция «Спасибо» (после заявки) ===== */
/* ===== Шапка сайта ===== */
/* ===== Футер сайта ===== */
/* ===================== БЛОГ: ЛЕНТА И СТАТЬЯ ===================== */
/* статья */
.art-share{ display:flex; align-items:center; gap:10px; }
/* кнопки «поделиться» в статье */
/* ===================== ВНУТРЕННИЕ СТРАНИЦЫ: КОНТАКТЫ ===================== */
/* ===================== ВНУТРЕННИЕ СТРАНИЦЫ: КАРТА САЙТА ===================== */
/* текстовый блок (prose) — во всю ширину контейнера, как в шаблонах */
/* ===================== ЖК: СЕТКА КАРТОЧЕК (листинг) ===================== */
/* ===================== ЖК: О КОМПЛЕКСЕ ===================== */
/* ===================== ЖК: ПЛАНИРОВКИ И ЦЕНЫ ===================== */
/* ===================== ЖК: ПЕРВЫЙ ЭКРАН (с картинкой) ===================== */
/* ЖК hero — светлая тема (перекрываем тёмный hero главной) */
.block--zhkhero .hero__feature-ic{background:var(--soft);border:1px solid var(--line);color:var(--accent-dk);}
.block--zhkhero .hero__feature > span:last-child{color:var(--ink);}
.block--zhkhero .hero__socials .socials__label{color:var(--muted);}
/* ===================== СТРАНИЦА ЦЕНЫ: ТАБЛИЦА ПРАЙСА ===================== */
/* ===================== ПОРТФОЛИО: ЦИФРЫ ===================== */
/* ===================== ПОРТФОЛИО: ПЛИТКИ + ФИЛЬТРЫ ===================== */
/* ===================== ПОРТФОЛИО: КЕЙС (галерея + текст) ===================== */
/* Портфолио: цифры внутри шапки (как в шаблоне) + единица/звезда */
/* Лайтбокс для галереи кейса */
/* --- Hero вида ремонта: светлый, свой фон (перекрываем тёмный hero главной) --- */
.block--rhero .hero__features{ grid-template-columns:1fr 1fr; gap:14px 22px; max-width:520px; margin:0 0 30px; }
.block--rhero .hero__feature-ic{ background:var(--soft); border:1px solid var(--line); color:var(--accent-dk); }
.block--rhero .hero__feature > span:last-child{ color:var(--ink); }
.block--rhero .hero__socials .socials__label{ color:var(--muted); }
@media (max-width:640px) {
.block--rhero .hero__features{ grid-template-columns:1fr; gap:14px; }
}
/* --- Решения (карточки) --- */
/* --- Когда нужно (kapcmp) --- */
/* --- Тёмная панель --- */
/* --- SEO-текст --- */
/* --- Форматы квартир (карточки) --- */
/* Сообщения лид-форм */
.js-lead-msg{ margin:6px 0 0; font-size:13.5px; min-height:1px; }
.js-lead-msg.is-error{ color:#dc2626; }
.lead-done{ padding:22px 18px; text-align:center; font-size:15px; font-weight:600; color:var(--green,#16a34a); background:rgba(22,163,74,.08); border-radius:14px; }