/* ============================================================================ scandi.css — НОВЫЙ чистый дизайн-слой (clean rewrite, CR-проект 2026-05-28) ---------------------------------------------------------------------------- Загружается ТОЛЬКО в clean-mode (URL c ?clean=1). Заменяет ВСЮ старую краску: parent style.min.css (288KB) + style.css + unification.css (18k) + scandi-components/scandi-design.v2/mobile/tablet — ~29k строк и 14k !important. ⚠️ НЕ писать здесь последовательность «звёздочка+слэш»: она ДОСРОЧНО закрывает этот комментарий, и тогда правило `*,*::before,*::after{box-sizing:border-box}` ниже съедается парсером как тело мусорного селектора и НЕ попадает в CSSOM. Именно так на всех НЕ-домовых страницах пропадал border-box (аудит 2026-07-20). Здесь — НИ ОДНОГО !important-war-хака: чистый каскад поверх tokens + base. Помодульно (каждый модуль — скриншот): R2 база ✅ R3 header+drawer ✅ R4 главная R5 каталог R6 дом R7 этапы R8 формы R9 прочее+ЛК R10 мобайл RF cutover ============================================================================ */ /* ╔══════════════════════════════════════════════════════════════════════════╗ ║ R2 — RESET / BASE ║ ╚══════════════════════════════════════════════════════════════════════════╝ */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; } body { margin: 0; background: var(--c-cream); color: var(--c-ink); font-family: var(--font-ui); font-size: var(--t-body); line-height: var(--lh-normal); font-weight: 400; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } img, svg, video { max-width: 100%; height: auto; display: block; } a { color: var(--c-gold-dark); text-decoration: none; transition: color var(--d-fast) var(--ease); } a:hover { color: var(--c-gold); } ul, ol { margin: 0; padding: 0; } p { margin: 0 0 var(--s-4); } button { font-family: inherit; } ::selection { background: rgba(166, 124, 58, 0.22); } /* ───────── Типографика: система .b-title (вся вёрстка) ───────── */ .b-title { font-family: var(--font-display); font-weight: 500; font-size: 42px; line-height: 1.18; letter-spacing: var(--ls-tight); color: inherit; margin: 0; } .b-title.bt11 { font-size: 11px; line-height: 1.4; letter-spacing: 0; } .b-title.bt12 { font-size: 12px; line-height: 1.4; letter-spacing: 0; } .b-title.bt13 { font-size: 13px; line-height: 1.4; letter-spacing: 0; } .b-title.bt14 { font-size: 14px; line-height: 1.45; letter-spacing: 0; } .b-title.bt15 { font-size: 15px; line-height: 1.5; letter-spacing: 0; } .b-title.bt16 { font-size: 16px; line-height: 1.4; letter-spacing: 0; } .b-title.bt18 { font-size: 18px; line-height: 1.35; } .b-title.bt20 { font-size: 20px; line-height: 1.35; } .b-title.bt24 { font-size: 24px; line-height: 1.3; } .b-title.bt26 { font-size: 26px; line-height: 1.28; } .b-title.bt28 { font-size: 28px; line-height: 1.25; } .b-title.bt30 { font-size: 30px; line-height: 1.22; } .b-title.light { font-weight: 300; } .b-title.medium { font-weight: 500; } .b-title.bold { font-weight: 700; } .title { font-family: var(--font-display); font-weight: 600; letter-spacing: var(--ls-tight); } /* ───────── Container / layout ───────── */ .container { width: 100%; max-width: 1200px; margin-inline: auto; padding-inline: clamp(16px, 3.5vw, 28px); } #main-wrapper { overflow-x: clip; } .bg-overlay { position: fixed; inset: 0; background: rgba(12, 8, 5, 0.5); opacity: 0; visibility: hidden; transition: opacity var(--d-base) var(--ease); z-index: var(--z-modal); } body.menu-open .bg-overlay, body.modal-open .bg-overlay { opacity: 1; visibility: visible; } /* ───────── Buttons ───────── */ .button, a.button { display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2); font-family: var(--font-ui); font-size: var(--t-label); font-weight: 600; line-height: 1; text-align: center; padding: 13px 26px; border: 1px solid transparent; border-radius: var(--r-ctrl); cursor: pointer; text-decoration: none; background: var(--c-gold-grad); color: #1a1410; box-shadow: var(--sh-glow); transition: transform var(--d-fast) var(--ease), box-shadow var(--d-fast) var(--ease), filter var(--d-fast) var(--ease); } .button:hover, a.button:hover { filter: brightness(1.05); color: #1a1410; transform: translateY(-1px); } .button:active, a.button:active { transform: translateY(0); } /* ╔══════════════════════════════════════════════════════════════════════════╗ ║ R3 — HEADER (минимальный бар) + DRAWER (выпадающее меню — СОГЛАСОВАННОЕ) ║ ║ Паттерн: бар = [☰ МЕНЮ] + лого слева, телефон + CTA справа. ║ ║ Вся навигация и полные контакты — в левом выезжающем drawer'е, который ║ ║ строит scandi-redesign.js (.scandi-burger → body.scandi-drawer-open). ║ ╚══════════════════════════════════════════════════════════════════════════╝ */ #header { position: sticky; top: 0; z-index: var(--z-header); background: var(--c-bg-body); color: var(--c-text); border-bottom: 1px solid rgba(193, 154, 91, 0.16); } #header .container { max-width: 1280px; } #header .in { display: flex; align-items: center; gap: var(--s-6); min-height: 76px; } /* ── LEFT: burger + logo ── */ #header .left { display: flex; align-items: center; gap: var(--s-5); flex-shrink: 0; } #header .site-logo { display: inline-flex; align-items: center; gap: 11px; text-decoration: none; } #header .site-logo img { height: 42px; width: auto; } #header .site-logo__emblem { display: block; width: 48px; height: 48px; background-size: contain; background-position: center; background-repeat: no-repeat; flex: 0 0 auto; } #header .site-logo .b-title { font-size: 19px; line-height: 1.05; font-weight: 700; color: var(--c-text); letter-spacing: -0.01em; } #header .site-logo .b-title i { color: var(--c-gold); font-style: normal; } #header .slogan { color: var(--c-text-3); font-size: 12px; line-height: 1.3; font-weight: 400; padding-left: var(--s-5); border-left: 1px solid var(--c-border); } /* Бургер «Меню» + всё выпадающее меню стилизуются в styles/drawer.css (портированный 1:1 согласованный компонент с анимацией). Здесь НЕ дублируем. */ /* ── RIGHT: только телефон + CTA (остальное — в drawer) ── */ #header .right { flex: 1; min-width: 0; display: flex; align-items: center; justify-content: flex-end; gap: var(--s-5); } #header .top { display: flex; align-items: center; justify-content: flex-end; gap: var(--s-5); } /* В баре прячем второстепенное — оно есть в drawer'е */ #header .mail, #header .messengers, #header .worktime-lk-wrap, #header .bottom { display: none; } /* phone cluster */ #header .phone-wrapper { display: inline-flex; align-items: center; gap: var(--s-5); } #header .phone { display: inline-flex; align-items: center; gap: var(--s-4); } /* оба телефона видны (СПб + Москва) с подписями городов; переключатель и иконка не нужны */ #header .phone > .icon { display: none; } #header .city-buttons { display: none; } #header .wrap-phones { display: flex; gap: var(--s-5); } #header .wrap-phones .telTo, #header .wrap-phones .telTo.active, #header .wrap-phones .telTo.scandi-phone-active, #header .wrap-phones .telTo.scandi-phone-inactive { display: block; font-size: 16px; font-weight: 700; line-height: 1.1; } #header .wrap-phones .telTo::before { display: block; font-size: 10px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--c-text-3); margin-bottom: 2px; } #header .wrap-phones .telTo.phones-0::before { content: 'Санкт-Петербург'; } #header .wrap-phones .telTo.phones-1::before { content: 'Москва'; } #header .wrap-phones .telTo a { color: var(--c-text); text-decoration: none; transition: color var(--d-fast) var(--ease); } #header .wrap-phones .telTo a:hover { color: var(--c-gold); } /* 4 соцсети в шапке (Telegram/WhatsApp/MAX/ВКонтакте → ловцы лидов) */ #header .sk-hdr-soc { display: inline-flex; align-items: center; gap: 8px; } #header .sk-hdr-soc .sk-soc { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border: 1px solid var(--c-border); border-radius: 50%; color: var(--c-text-2); transition: color var(--d-fast) var(--ease), border-color var(--d-fast) var(--ease), background var(--d-fast) var(--ease); } #header .sk-hdr-soc .sk-soc:hover { color: var(--c-gold); border-color: var(--c-gold); background: rgba(193, 154, 91, 0.08); } #header .sk-hdr-soc .sk-soc svg { display: block; } #header .phone-wrapper > .cb-link { background: var(--c-gold-grad); color: #1a1410; font-weight: 600; font-size: 13px; padding: 10px 18px; border-radius: var(--r-ctrl); cursor: pointer; white-space: nowrap; } #header .phone-wrapper > .cb-link:hover { color: #1a1410; filter: brightness(1.05); } /* search forms + theme-toggle — вне scope сейчас */ #header .wrap-search-form, #header .wrap-search-form-mb, #header form[role="search"], #header .scandi-theme-toggle, #header .open-menu-icon { display: none; } /* ── DRAWER (выпадающее меню) полностью в styles/drawer.css ── Бургер «Меню» → левая панель (вертикальная навигация + оба города с телефонами + мессенджеры + «Вход для клиентов» + часы) + анимация (строится дом, восходит солнце, «Добро пожаловать домой»). Это согласованный компонент, портирован 1:1. */ /* ╔══════════════════════════════════════════════════════════════════════════╗ ║ R4 — ГЛАВНЫЙ БАННЕР (home hero): фото дома + тёмная плашка СПРАВА ║ ║ По макету Claude Design, но плашка справа (не на доме) и без «Каталога». ║ ╚══════════════════════════════════════════════════════════════════════════╝ */ .scandi-home-hero { position: relative; display: flex; align-items: center; min-height: clamp(640px, 86vh, 960px); overflow: hidden; background: var(--c-bg-deep); } .scandi-home-hero__bg { position: absolute; inset: 0; z-index: 0; } .scandi-home-hero__bg img { width: 100%; height: 100%; object-fit: cover; object-position: 26% center; display: block; } /* мягкий тёплый скрим: дом слева чистый, справа темнее под плашку */ .scandi-home-hero__scrim { position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(90deg, rgba(16,11,7,0) 34%, rgba(16,11,7,0.30) 56%, rgba(16,11,7,0.62) 100%); } .scandi-home-hero__wrap { position: relative; z-index: 2; width: 100%; display: flex; justify-content: flex-end; } /* плашка слева (дом в кадре справа) — модификатор стилевых hero */ .scandi-home-hero--plate-left .scandi-home-hero__wrap { justify-content: flex-start; } /* тёмная плашка справа — канон: тёмно-коричневый градиент + золотая обводка 32% */ .scandi-home-hero__plate { width: min(540px, 100%); background: linear-gradient(155deg, rgba(32,23,15,0.90) 0%, rgba(18,13,9,0.94) 100%); border: 1px solid rgba(193, 154, 91, 0.32); border-radius: var(--r-card); padding: clamp(30px, 3vw, 46px); box-shadow: 0 24px 60px rgba(60, 40, 20, 0.28); -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px); } .scandi-home-hero__eyebrow { display: inline-block; font-size: 11px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--c-gold); padding: 6px 13px; border: 1px solid rgba(193, 154, 91, 0.30); border-radius: var(--r-pill); background: rgba(193, 154, 91, 0.08); } .scandi-home-hero__title { margin: 20px 0 0; font-family: var(--font-display); font-size: clamp(30px, 3.3vw, 46px); line-height: 1.07; font-weight: 600; letter-spacing: -0.02em; color: var(--c-text); } .scandi-home-hero__title em { font-style: normal; background: linear-gradient(135deg, #d4ad6e 0%, #c19a5b 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; } .scandi-home-hero__lead { margin: 18px 0 0; font-size: 15px; line-height: 1.6; color: var(--c-text-2); max-width: 44ch; } .scandi-home-hero__price { margin: 26px 0 0; display: flex; flex-direction: column; gap: 3px; } .scandi-home-hero__price-label { font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--c-text-3); } .scandi-home-hero__price-value { font-family: var(--font-display); font-size: clamp(26px, 2.6vw, 34px); font-weight: 700; line-height: 1.05; background: linear-gradient(135deg, #d4ad6e 0%, #c19a5b 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; } .scandi-home-hero__ctas { margin: 28px 0 0; } .scandi-home-hero__cta { display: inline-flex; align-items: center; justify-content: center; padding: 14px 30px; border-radius: var(--r-ctrl); font-family: var(--font-ui); font-weight: 600; font-size: 14px; text-decoration: none; cursor: pointer; background: var(--c-gold-grad); color: #1a1410; box-shadow: var(--sh-glow); transition: transform .2s var(--ease), box-shadow .2s var(--ease), filter .2s var(--ease); } .scandi-home-hero__cta:hover { transform: translateY(-2px); filter: brightness(1.05); color: #1a1410; box-shadow: 0 12px 32px rgba(193, 154, 91, 0.5); } /* ── Hero страницы «в ипотеку»: value-props пиллы + 2 CTA ────────────────── */ .scandi-hero-features { list-style: none; margin: 22px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; } .scandi-hero-features li { font-family: var(--font-ui); font-size: 12px; font-weight: 600; letter-spacing: 0.01em; color: var(--c-text); padding: 7px 13px; border-radius: var(--r-pill); border: 1px solid rgba(193, 154, 91, 0.30); background: rgba(193, 154, 91, 0.08); } .scandi-home-hero--mortgage .scandi-home-hero__ctas { display: flex; flex-wrap: wrap; gap: 12px; } .scandi-home-hero__cta--outline { background: transparent; color: var(--c-gold-light); border: 1px solid rgba(193, 154, 91, 0.50); box-shadow: none; } .scandi-home-hero__cta--outline:hover { background: rgba(193, 154, 91, 0.12); color: var(--c-gold-light); box-shadow: none; filter: none; } /* пара слева, дом по центру — держим их в кадре, плашка справа над озером */ .scandi-home-hero--mortgage .scandi-home-hero__bg img { object-position: 32% center; } /* тонкая золотая линия по низу hero — осознанный переход тёмное→крем */ .scandi-home-hero--mortgage::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; z-index: 3; background: linear-gradient(90deg, transparent, rgba(212, 173, 110, 0.55) 50%, transparent); } /* Сертификаты: на этой странице блок =
— фоновая полоса резалась по контейнеру (жёсткие края). Даём полосе full-bleed, контент центрирует внутренний .scandi-certs (max-width 1280). */ .container.cert-container { max-width: none; width: 100%; padding-left: 0; padding-right: 0; } /* Якоря (`#discount-calculator` и пр.) — не ныряют под sticky-шапку */ #discount-calculator, .scandi-banks, .scandi-msteps, .scandi-faq { scroll-margin-top: 92px; } @media (max-width: 900px) { .scandi-home-hero { min-height: clamp(560px, 76vh, 760px); } .scandi-home-hero__wrap { justify-content: center; padding-block: 40px; } .scandi-home-hero__scrim { background: linear-gradient(180deg, rgba(16,11,7,0.25) 0%, rgba(16,11,7,0.66) 100%); } .scandi-home-hero__bg img { object-position: center; } .scandi-home-hero__plate { width: 100%; } } /* ── R4: МОБИЛЬНАЯ ШАПКА (≤768) — компактно: бургер + лого. ─────────────────── Телефоны на 390px ломались по цифре в ряд (бар перегружен). Убираем из бара слоган, 4 соцсети, оба телефона, CTA — всё это доступно в выпадающем меню (бургер: города с тел., мессенджеры, «Вход для клиентов»). Полная мобильная адаптация остального — отдельным проходом R10. */ @media (max-width: 768px) { #header .in { min-height: 58px; gap: var(--s-3); } #header .slogan, #header .sk-hdr-soc, #header .phone-wrapper { display: none; } #header .site-logo img { height: 32px; } #header .site-logo__emblem { width: 38px; height: 38px; } #header .site-logo .b-title { font-size: 15px; } #header .scandi-burger { height: 38px; } } /* ── Хедер: узкий десктоп / планшет (769–1200) — прогрессивное сворачивание. На clean-страницах tablet-critical.css НЕ грузится, поэтому раньше слоган наезжал на соцсети и блок телефонов вылезал за экран на ~950px. Убираем декоративные элементы по мере сужения. 2026-07-16 ── */ /* Хедер-контейнер: border-box, чтобы padding 28px не добавлялся к 100%-ширине (content-box давал вылет контента за экран на ~13–56px → телефоны за краем). */ #header .container, #header .in { box-sizing: border-box !important; } @media (max-width: 1200px) { #header .slogan, #header .sk-hdr-soc { display: none !important; } } @media (max-width: 900px) { #header .phone-wrapper { display: none !important; } } /* ── «О компании» stat-иконки: жёсткий размер-кап на ЛЮБОЙ ширине. JS (inline-js) добавлял их, но размер (52px) был только в mobile-critical.css, который на clean НЕ грузится → на 481–1199 иконки были 200px+ (огромные). Кап тут гарантирует, что они не раздуются даже при ресайзе. 2026-07-16 ── */ .about-company .scandi-about__stat .scandi-stat-icon, .scandi-about__stat .scandi-stat-icon { width: 56px !important; height: 56px !important; flex: 0 0 56px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; margin: 14px auto 0 !important; overflow: hidden !important; } .about-company .scandi-about__stat .scandi-stat-icon svg, .scandi-about__stat .scandi-stat-icon svg { width: 34px !important; height: 34px !important; max-width: 34px !important; max-height: 34px !important; } /* ── «Как мы работаем» nav «1/7»: только на мобилке (карусель ≤991). Раньше инжектился при ≤1199 → на 992–1199 висел над десктопной сеткой. ── */ @media (min-width: 992px) { .scandi-stages__nav { display: none !important; } } /* ╔══════════════════════════════════════════════════════════════════════════╗ ║ R4 — ПРЕИМУЩЕСТВА (.adv-glass) — кремовая секция, 4 карточки-цифры ║ ║ Канон: чередование (hero тёмный → этот крем). Крупная золотая цифра, ║ ║ кремовая карточка + золотой hairline, hover-подъём. Иконки/glass-glow off.║ ╚══════════════════════════════════════════════════════════════════════════╝ */ /* Фон секции — ПРОЗРАЧНЫЙ (кремовый даёт body). Иначе отрицательный margin сетки схлопывается с секцией и кремовая заливка наезжает на баннер («белое пятно»). */ .adv-glass { background: transparent; padding: 0 0 clamp(54px, 6.5vw, 92px); position: relative; z-index: 2; } /* Карточки «наезжают» на баннер (слоёная композиция — владелец: оставить). Чтобы не сливались с тёмным hero-фото: СВЕТЛЫЕ high-key топы картинок (adv*_v2) + золотая рамка + тень. */ .adv-glass__grid { width: 100%; max-width: 1200px; margin: -64px auto 0; padding-inline: clamp(16px, 3.5vw, 28px); display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; position: relative; z-index: 3; } .adv-card { height: 100%; } /* ТЁМНЫЕ карточки (юзер: «в тёмной версии лучше смотрелись»), компактные, без иконок (в PNG-иконках вшиты синие точки — дырка ценника + лупа). */ .adv-card__inner { position: relative; height: 100%; display: flex; flex-direction: column; background: linear-gradient(158deg, #241a11 0%, #16100a 100%); border: 1px solid rgba(207, 159, 75, 0.24); border-radius: var(--r-card); padding: 24px 22px 22px; box-shadow: 0 10px 40px rgba(0, 0, 0, 0.28); transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease), border-color 0.25s var(--ease); overflow: hidden; } .adv-card:hover .adv-card__inner { transform: translateY(-4px); border-color: rgba(207, 159, 75, 0.42); box-shadow: 0 20px 52px rgba(0, 0, 0, 0.40); } /* тонкая золотая полоска-glow сверху — фирменный акцент */ .adv-card__inner::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, transparent, rgba(207, 159, 75, 0.85) 30%, rgba(207, 159, 75, 0.85) 70%, transparent); } /* decorative dark-glass слои + ИКОНКА (PNG со вшитыми синими точками) — выключаем. .scandi-trust-icon-wrap — золотые SVG-иконки, которые ВПИХИВАЕТ scandi-redesign.js первым ребёнком .adv-card__inner; юзер просил «вообще без иконок, карточки слишком вытянутые» → прячем и их, карточка становится компактной. */ .adv-card__glare, .adv-card__border-glow, .adv-card__glow, .adv-card__accent, .adv-card__top img, .adv-card .scandi-trust-icon-wrap { display: none !important; } .adv-card__top { display: flex; align-items: flex-end; } .adv-card__watermark { display: flex; align-items: baseline; gap: 6px; } .adv-card__watermark-num { font-family: var(--font-display); font-size: clamp(40px, 4vw, 52px); font-weight: 700; line-height: 0.95; letter-spacing: -0.02em; background: linear-gradient(135deg, #e8c074 0%, #c19a5b 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; } .adv-card__watermark-unit { font-size: 16px; font-weight: 600; color: #c9a463; } .adv-card__bottom { margin-top: 14px; } .adv-card__title { font-family: var(--font-display); font-size: 12px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: #f3ecdc; line-height: 1.35; } .adv-card__desc { margin-top: 9px; font-size: 12.5px; line-height: 1.55; color: #a89c8a; } .adv-swipe-dots, .adv-swipe-hint { display: none; } @media (max-width: 980px) { .adv-glass__grid { grid-template-columns: 1fr 1fr; } } @media (max-width: 768px) { .adv-glass { padding: 0 0 44px; } .adv-glass__grid { margin-top: -22px; gap: 12px; } .adv-card__inner { padding: 20px 16px; } } /* ╔══════════════════════════════════════════════════════════════════════════╗ ║ R5 — ФОРМЫ (.scandi-form) — универсальный компонент, 5 тем-вариантов ║ ║ cream-floating (каталог-книга), cream-panel, cream-plain, cream-editorial, ║ ║ dark-glass. Портировано из unification.css начисто (без !important/hacks). ║ ╚══════════════════════════════════════════════════════════════════════════╝ */ section.scandi-form { padding: 80px 0 100px; position: relative; overflow: hidden; background: radial-gradient(circle, rgba(166,124,58,0.10) 1px, transparent 1.5px) 0 0 / 26px 26px, linear-gradient(180deg, #f7f1e6 0%, #ebe1cd 100%); } section.scandi-form .container { position: relative; } .scandi-form__card { position: relative; display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 56px; align-items: stretch; padding: 56px 56px 48px; background: radial-gradient(ellipse 60% 50% at 18% 18%, rgba(166,124,58,0.10) 0%, transparent 65%), linear-gradient(165deg, #ffffff 0%, #fdf6e5 60%, #fbf3da 100%); border: 1px solid rgba(166, 124, 58, 0.22); border-radius: 22px; box-shadow: 0 18px 48px rgba(166, 124, 58, 0.10), 0 4px 12px rgba(31, 22, 18, 0.04), inset 0 1px 0 rgba(255, 255, 255, 0.7); overflow: visible; } .scandi-form__card::before { content: ''; position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 56%; height: 1px; background: linear-gradient(90deg, rgba(166,124,58,0) 0%, rgba(166,124,58,0.5) 50%, rgba(166,124,58,0) 100%); } .scandi-form__content { display: flex; flex-direction: column; min-width: 0; } .scandi-form__eyebrow { display: inline-block; align-self: flex-start; padding: 6px 14px; background: rgba(166, 124, 58, 0.10); border: 1px solid rgba(166, 124, 58, 0.40); border-radius: 999px; font-family: 'Manrope', sans-serif; font-size: 10.5px; font-weight: 700; font-style: normal; letter-spacing: 0.20em; line-height: 1; text-transform: uppercase; color: #a67c3a; margin: 0 0 22px; } .scandi-form__title { font-family: 'Manrope', sans-serif; font-size: 24px; font-weight: 700; font-style: normal; letter-spacing: -0.015em; line-height: 1.25; text-transform: none; color: #1f1612; margin: 0 0 22px; max-width: 520px; position: relative; } .scandi-form__title b, .scandi-form__title strong { font-weight: 700; background: linear-gradient(135deg, #ffe5b8 0%, #d4ad6e 50%, #c19a5b 100%); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; } /* CR.4 fix (visual audit): светлый градиент выше рассчитан на ТЁМНЫЕ темы; на КРЕМОВЫХ формах (get-catalog и пр.) он почти невидим. Тёмное золото — читаемо. */ .scandi-form--theme-cream-floating .scandi-form__title b, .scandi-form--theme-cream-floating .scandi-form__title strong, .scandi-form--theme-cream-floating .scandi-form__title i, .scandi-form--theme-cream-panel .scandi-form__title b, .scandi-form--theme-cream-panel .scandi-form__title strong, .scandi-form--theme-cream-plain .scandi-form__title b, .scandi-form--theme-cream-plain .scandi-form__title strong, .scandi-form--theme-cream-editorial .scandi-form__title b, .scandi-form--theme-cream-editorial .scandi-form__title strong { background: linear-gradient(135deg, #8a6326 0%, #a67c3a 50%, #c19a5b 100%); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; } .scandi-form__title::after { content: ''; display: block; width: 48px; height: 1px; margin-top: 16px; background: linear-gradient(90deg, #a67c3a 0%, rgba(166,124,58,0) 100%); } .scandi-form__lead { font-family: 'Manrope', sans-serif; font-size: 13.5px; font-weight: 500; font-style: normal; letter-spacing: -0.005em; line-height: 1.6; color: rgba(31, 22, 18, 0.82); margin: 0 0 26px; max-width: 520px; } .scandi-form__lead p { margin: 0 0 12px; } .scandi-form__lead p:last-child { margin-bottom: 0; } .scandi-form__lead ul { list-style: none; padding: 0; margin: 0 0 16px; } .scandi-form__lead li { position: relative; padding-left: 22px; margin: 0 0 8px; font-size: 13.5px; line-height: 1.55; color: rgba(31, 22, 18, 0.74); } .scandi-form__lead li::before { content: ''; position: absolute; left: 0; top: 9px; width: 12px; height: 1px; background: #a67c3a; } .scandi-form__form { margin-top: auto; padding-top: 8px; } .scandi-form__honeypot { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; pointer-events: none; } .scandi-form__fields { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 18px; } .scandi-form__field { position: relative; display: flex; align-items: center; background: rgba(255, 255, 255, 0.7); border: 1px solid rgba(166, 124, 58, 0.28); border-radius: 12px; padding: 0 16px 0 40px; transition: border-color 0.25s ease, background 0.25s ease; min-height: 50px; } .scandi-form__field--full, .scandi-form__field--textarea, .scandi-form__field--select { grid-column: 1 / -1; } .scandi-form__field--textarea { padding: 14px 16px; align-items: flex-start; min-height: 96px; } .scandi-form__field:focus-within { border-color: #a67c3a; background: #ffffff; } .scandi-form__field-icon { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); color: rgba(166, 124, 58, 0.7); pointer-events: none; display: flex; align-items: center; } .scandi-form__field input, .scandi-form__field textarea, .scandi-form__field select { width: 100%; border: 0; background: transparent; padding: 0; font-family: 'Manrope', sans-serif; font-size: 13.5px; font-weight: 500; letter-spacing: -0.005em; line-height: 1.4; color: #1f1612; outline: none; box-shadow: none; } .scandi-form__field textarea { resize: vertical; min-height: 70px; } .scandi-form__field input::placeholder, .scandi-form__field textarea::placeholder { color: rgba(31, 22, 18, 0.45); opacity: 1; } .scandi-form__field--textarea .scandi-form__field-icon { display: none; } .scandi-form__field--textarea input, .scandi-form__field--textarea textarea { padding-left: 0; } .scandi-form__cta { display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 14px 28px; background: linear-gradient(135deg, #c19a5b 0%, #a67c3a 60%, #c19a5b 100%); background-size: 200% 100%; background-position: 0% 50%; border: none; border-radius: 999px; font-family: 'Manrope', sans-serif; font-size: 11px; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; color: #ffffff; cursor: pointer; transition: background-position 0.4s ease, transform 0.25s ease, box-shadow 0.25s ease; box-shadow: 0 8px 20px rgba(166, 124, 58, 0.22); margin-bottom: 14px; } .scandi-form__cta:hover { background-position: 100% 50%; transform: translateY(-2px); box-shadow: 0 12px 28px rgba(166, 124, 58, 0.30); } .scandi-form__cta-arrow { transition: transform 0.3s ease; } .scandi-form__cta:hover .scandi-form__cta-arrow { transform: translateX(3px); } .scandi-form__privacy { font-family: 'Manrope', sans-serif; font-size: 11px; font-weight: 400; letter-spacing: 0.01em; line-height: 1.5; color: rgba(31, 22, 18, 0.55); margin: 0; } .scandi-form__privacy a { color: #a67c3a; text-decoration: underline; text-decoration-color: rgba(166, 124, 58, 0.4); text-underline-offset: 2px; transition: text-decoration-color 0.2s ease; } .scandi-form__privacy a:hover { text-decoration-color: #a67c3a; } .scandi-form__media { position: relative; align-self: stretch; display: flex; align-items: center; justify-content: center; pointer-events: none; min-height: 100%; } .scandi-form__media--right-bleed img { display: block; width: 100%; max-width: 460px; height: auto; aspect-ratio: 1 / 1; object-fit: cover; border-radius: 18px; border: 1px solid rgba(166, 124, 58, 0.28); box-shadow: 0 22px 48px rgba(80, 56, 30, 0.16), 0 4px 12px rgba(31, 22, 18, 0.08), inset 0 0 0 1px rgba(255, 255, 255, 0.4); margin-right: -28px; transform: rotate(1.5deg); transition: transform 0.5s ease, box-shadow 0.5s ease; } .scandi-form__card:hover .scandi-form__media--right-bleed img { transform: rotate(0.5deg) translateY(-4px); box-shadow: 0 28px 56px rgba(80, 56, 30, 0.22), 0 6px 16px rgba(31, 22, 18, 0.10), inset 0 0 0 1px rgba(255, 255, 255, 0.4); } /* ════════ architect / «Спецпредложение» — КОМПАКТНАЯ КРЕМОВАЯ карта ════════ Была огромная тёмная плашка (владелец: «огромная, некрасивая») → привёл к виду формы-эталона: уже (1040), ниже (padding 36), 2 колонки, Кристина — в аккуратной скруглённой панели справа, спокойный заголовок, кремовые поля (наследуют базу). */ /* ════════ architect / «Спецпредложение» — СОВРЕМЕННАЯ ВОЗДУШНАЯ карта ════════ Полная пересборка 2026-06-29 (владелец: «современно и умно, без Кристины, не опираясь на текущую раскладку»): центрированная кремовая карта, крупный mixed-case заголовок, выгоды 2×2, форма в одну строку имя·телефон·кнопка. */ section.scandi-form--theme-dark-glass { background: radial-gradient(circle, rgba(166,124,58,0.10) 1px, transparent 1.5px) 0 0 / 26px 26px, linear-gradient(180deg, #f7f1e6 0%, #ece2cd 100%); } .scandi-form--theme-dark-glass .scandi-form__card { max-width: 940px; margin-left: auto; margin-right: auto; grid-template-columns: 1fr; gap: 0; padding: 54px 64px 46px; text-align: center; overflow: visible; background: radial-gradient(ellipse 72% 60% at 50% -8%, rgba(166,124,58,0.10) 0%, transparent 60%), linear-gradient(168deg, #ffffff 0%, #fffaf0 100%); border: 1px solid rgba(166, 124, 58, 0.26); border-top: 2px solid #c19a5b; border-radius: 22px; box-shadow: 0 30px 72px rgba(120, 90, 50, 0.16), 0 6px 18px rgba(31, 22, 18, 0.05), inset 0 1px 0 rgba(255, 255, 255, 0.8); } .scandi-form--theme-dark-glass .scandi-form__card::before { width: 46%; background: linear-gradient(90deg, rgba(166,124,58,0) 0%, rgba(166,124,58,0.5) 50%, rgba(166,124,58,0) 100%); box-shadow: none; } .scandi-form--theme-dark-glass .scandi-form__content { max-width: none; align-items: center; text-align: center; } .scandi-form--theme-dark-glass .scandi-form__eyebrow { background: rgba(125, 90, 44, 0.10); border-color: rgba(125, 90, 44, 0.45); color: #7d5a2c; align-self: center; margin: 0 auto 18px; } .scandi-form--theme-dark-glass .scandi-form__title { color: #1f1612; font-size: clamp(26px, 3vw, 33px); font-weight: 700; line-height: 1.18; letter-spacing: -0.02em; font-style: normal; text-transform: none; margin: 0 auto 12px; max-width: 600px; } .scandi-form--theme-dark-glass .scandi-form__title i, .scandi-form--theme-dark-glass .scandi-form__title em { font-style: normal; } .scandi-form--theme-dark-glass .scandi-form__title b, .scandi-form--theme-dark-glass .scandi-form__title strong { background: linear-gradient(135deg, #c8973f 0%, #a67c3a 50%, #8a6326 100%); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; } .scandi-form--theme-dark-glass .scandi-form__title::after { display: none; } .scandi-form--theme-dark-glass .scandi-form__lead { color: rgba(31, 22, 18, 0.55); font-size: 13px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; line-height: 1.5; max-width: 520px; margin: 0 auto 30px; text-align: center; } .scandi-form--theme-dark-glass .scandi-form__benefits { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 13px 30px; list-style: none; padding: 0; margin: 0 auto 32px; max-width: 680px; text-align: left; } .scandi-form--theme-dark-glass .scandi-form__benefits li { position: relative; padding: 0 0 0 28px; font: 500 13px/1.45 'Manrope', sans-serif; letter-spacing: -0.005em; color: rgba(31, 22, 18, 0.78); } .scandi-form--theme-dark-glass .scandi-form__benefits li::before { content: '✓'; position: absolute; left: 0; top: 1px; width: 18px; height: 18px; display: flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 700; color: #fff; background: linear-gradient(135deg, #d4ad6e 0%, #c19a5b 100%); border-radius: 50%; box-shadow: none; } /* форма в одну строку: имя · телефон · кнопка */ .scandi-form--theme-dark-glass .scandi-form__form { max-width: 720px; margin: 0 auto; padding-top: 0; display: flex; flex-wrap: wrap; gap: 10px; align-items: stretch; justify-content: center; } .scandi-form--theme-dark-glass .scandi-form__fields { display: flex; gap: 10px; flex: 1 1 380px; margin: 0; } .scandi-form--theme-dark-glass .scandi-form__field { flex: 1 1 0; min-height: 54px; } .scandi-form--theme-dark-glass .scandi-form__cta { flex: 0 0 auto; margin: 0; padding: 15px 28px; white-space: nowrap; } .scandi-form--theme-dark-glass .scandi-form__privacy { flex: 1 1 100%; text-align: center; margin: 14px auto 0; color: rgba(31, 22, 18, 0.50); } .scandi-form--theme-dark-glass .scandi-form__field-icon { color: #7d5a2c; } .scandi-form--theme-dark-glass .scandi-form__watermark { display: none; } @media (max-width: 760px) { .scandi-form--theme-dark-glass .scandi-form__card { padding: 40px 24px 34px; } .scandi-form--theme-dark-glass .scandi-form__benefits { grid-template-columns: 1fr; max-width: 360px; margin-left: auto; margin-right: auto; } .scandi-form--theme-dark-glass .scandi-form__fields { flex: 1 1 100%; } .scandi-form--theme-dark-glass .scandi-form__field { flex: 1 1 100%; } .scandi-form--theme-dark-glass .scandi-form__cta { flex: 1 1 100%; } } /* ════════ Форма «Остались вопросы» — компактная, с фото-панелью менеджера ════════ Слева — поля, справа — скруглённая фото-панель: Ира на фоне дома (готовый композит assets/cbform/manager-irina-house.webp). Панель тянется по высоте карточки; фото залито object-fit cover (без feedback-loop). */ .scandi-form--theme-cream-panel .scandi-form__card { max-width: 1040px; margin-left: auto; margin-right: auto; padding: 38px 40px; gap: 40px; /* левая колонка (поля) заведомо уже зоны фона (46%) → поля не лезут в картинку */ grid-template-columns: minmax(0, 1fr) minmax(0, 0.92fr); align-items: stretch; overflow: hidden; /* отрыв от кремовой секции: чуть белее фон + золотая кромка + глубокая тень */ background: radial-gradient(ellipse 60% 50% at 16% 14%, rgba(166,124,58,0.08) 0%, transparent 62%), linear-gradient(168deg, #ffffff 0%, #fffaf0 100%); border: 1px solid rgba(166, 124, 58, 0.28); border-top: 2px solid #c19a5b; box-shadow: 0 34px 80px rgba(120, 90, 50, 0.20), 0 8px 22px rgba(31, 22, 18, 0.06), inset 0 1px 0 rgba(255, 255, 255, 0.8); } .scandi-form--theme-cream-panel .scandi-form__eyebrow { margin: 0 0 14px; } .scandi-form--theme-cream-panel .scandi-form__title { margin: 0 0 14px; font-size: 22px; } .scandi-form--theme-cream-panel .scandi-form__lead { margin: 0 0 22px; } .scandi-form--theme-cream-panel .scandi-form__fields { gap: 10px; margin-bottom: 12px; } .scandi-form--theme-cream-panel .scandi-form__field { min-height: 46px; } .scandi-form--theme-cream-panel .scandi-form__field--textarea { min-height: 76px; } .scandi-form--theme-cream-panel .scandi-form__field textarea { min-height: 52px; } /* Единый задник = фон самой карточки. Ира — вырез поверх, в полный рост (высота = высоте карточки → голова у верхнего края формы). Без отдельной панели/дома — одно пространство на всю форму. */ .scandi-form--theme-cream-panel .scandi-form__media--right-bleed { position: absolute; top: 0; right: 0; bottom: 0; width: 46%; align-self: auto; display: block; border: 0; border-radius: 0; box-shadow: none; overflow: hidden; z-index: 1; background-image: url(../assets/cbform/office-backdrop.webp); background-size: cover; background-position: 50% 35%; } /* интерьер мягко растворяется влево в поля формы + тёплый тон сверху/снизу */ .scandi-form--theme-cream-panel .scandi-form__media--right-bleed::before { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, #fffaf0 0%, rgba(255, 250, 240, 0.6) 14%, rgba(255, 250, 240, 0) 40%), linear-gradient(0deg, rgba(31, 22, 18, 0.12) 0%, transparent 30%), linear-gradient(180deg, rgba(255, 252, 245, 0.35) 0%, transparent 22%); z-index: 1; pointer-events: none; } .scandi-form--theme-cream-panel .scandi-form__media--right-bleed img, .scandi-form--theme-cream-panel .scandi-form__card:hover .scandi-form__media--right-bleed img { position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); /* фикс «прыжков» на ховер — без rotate/translateY */ height: 100%; width: auto; max-width: none; aspect-ratio: auto; object-fit: contain; object-position: bottom center; border: 0; border-radius: 0; box-shadow: none; margin: 0; z-index: 2; filter: drop-shadow(0 16px 24px rgba(80, 56, 30, 0.16)); } .scandi-form--theme-cream-panel .scandi-form__media-overlay { position: absolute; left: 8px; bottom: 14px; background: rgba(255, 253, 248, 0.92); border: 1px solid rgba(166, 124, 58, 0.34); border-radius: 12px; padding: 12px 18px; max-width: 264px; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); box-shadow: 0 12px 30px rgba(120, 90, 50, 0.16); z-index: 4; } .scandi-form--theme-cream-panel .scandi-form__media-pill { color: #a67c3a; } .scandi-form--theme-cream-panel .scandi-form__media-name { color: #1f1612; -webkit-text-fill-color: #1f1612; } .scandi-form--theme-cream-panel .scandi-form__media-role { color: #5a4d3a; -webkit-text-fill-color: #5a4d3a; } .scandi-form--theme-cream-panel .scandi-form__media-pill { display: inline-block; padding: 4px 10px; background: rgba(212, 173, 110, 0.18); border: 1px solid rgba(212, 173, 110, 0.40); border-radius: 999px; font: 700 9px/1 'Manrope', sans-serif; letter-spacing: 0.10em; text-transform: uppercase; color: #a67c3a; margin-bottom: 7px; white-space: nowrap; } .scandi-form--theme-cream-panel .scandi-form__media-name { font: 700 14px/1.2 'Manrope', sans-serif; letter-spacing: -0.01em; color: #1f1612; -webkit-text-fill-color: #1f1612; margin-bottom: 2px; } .scandi-form--theme-cream-panel .scandi-form__media-role { font: 500 11px/1.3 'Manrope', sans-serif; color: #5a4d3a; -webkit-text-fill-color: #5a4d3a; } /* «Другие проекты каркасных домов» на странице дома — заголовок по центру + отступ к карточкам (был прижат, слева, крупный 42px). Блок = #catalog.catalog. */ .catalog .catalog-title { text-align: center; margin: 0 auto 40px; font-size: 34px; font-weight: 700; letter-spacing: -0.025em; line-height: 1.12; color: #1a1410; } .scandi-form--theme-cream-floating .scandi-form__card { background: radial-gradient(ellipse 80% 60% at 20% 20%, rgba(166,124,58,0.08) 0%, transparent 60%), linear-gradient(180deg, #f7f1e6 0%, #ebe1cd 100%); padding: 48px 56px; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: 40px; align-items: center; position: relative; } .scandi-form--theme-cream-floating .scandi-form__content { max-width: none; width: 100%; position: relative; z-index: 2; } .scandi-form--theme-cream-floating .scandi-form__form { width: 100%; } .scandi-form--theme-cream-floating .scandi-form__fields, .scandi-form--theme-cream-floating .scandi-form__fields--catalog { grid-template-columns: 1fr 1fr; width: 100%; } .scandi-form--theme-cream-floating .scandi-form__field--select { grid-column: 1 / -1; } .scandi-form--theme-cream-floating .scandi-form__title { font-size: clamp(22px, 2.4vw, 30px); } .scandi-form--theme-cream-floating .scandi-form__media--absolute-float { position: relative; top: auto; right: auto; transform: none; width: 100%; max-width: 520px; margin: 0 auto; align-self: center; display: block; z-index: 1; } .scandi-form--theme-cream-floating .scandi-form__media--absolute-float img { width: 100%; height: auto; display: block; border: 0; border-radius: 0; transform: rotate(-2deg); filter: drop-shadow(0 32px 48px rgba(80, 56, 30, 0.32)); box-shadow: none; margin: 0; } /* viewing «Сколько будет стоить» — ЗАХВАТ-БЛОК с ВЫРЕЗОМ дома, выезжающим за карту (Kie 4o-image → rembg cutout). Часть дома внутри блока, часть снаружи — как эталон. */ .scandi-form--theme-cream-plain .scandi-form__card { position: relative; display: block; max-width: 1080px; margin: 0 auto; padding: 46px 52px 48px; text-align: left; overflow: visible; background: radial-gradient(ellipse 60% 50% at 14% 12%, rgba(166, 124, 58, 0.08) 0%, transparent 62%), linear-gradient(168deg, #ffffff 0%, #fffaf0 100%); border: 1px solid rgba(166, 124, 58, 0.26); border-top: 2px solid #c19a5b; border-radius: 22px; box-shadow: 0 30px 72px rgba(120, 90, 50, 0.16), 0 6px 18px rgba(31, 22, 18, 0.05), inset 0 1px 0 rgba(255, 255, 255, 0.8); } .scandi-form--theme-cream-plain .scandi-form__content { align-items: flex-start; text-align: left; max-width: 48%; } .scandi-form--theme-cream-plain .scandi-form__eyebrow { align-self: flex-start; margin: 0 0 14px; } .scandi-form--theme-cream-plain .scandi-form__title { max-width: none; margin: 0 0 14px; font-size: clamp(22px, 2.3vw, 27px); line-height: 1.22; font-style: normal; } .scandi-form--theme-cream-plain .scandi-form__title::after { display: none; } .scandi-form--theme-cream-plain .scandi-form__lead { max-width: none; margin: 0 0 16px; text-align: left; } .scandi-form--theme-cream-plain .scandi-form__lead ul { display: block; text-align: left; margin: 8px 0 2px; padding: 0; } .scandi-form--theme-cream-plain .scandi-form__lead li { padding-left: 28px; margin-bottom: 8px; font-size: 13px; color: rgba(31, 22, 18, 0.80); } .scandi-form--theme-cream-plain .scandi-form__lead li::before { content: '✓'; position: absolute; left: 0; top: 1px; width: 18px; height: 18px; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, #d4ad6e 0%, #c19a5b 100%); border-radius: 50%; color: #fff; font-size: 10px; font-weight: 700; line-height: 1; } .scandi-form--theme-cream-plain .scandi-form__form { width: 100%; max-width: 430px; margin: 4px 0 0; } .scandi-form--theme-cream-plain .scandi-form__cta { align-self: stretch; width: 100%; margin: 0; } /* ВЫРЕЗ дома — абсолютно, выезжает за правый/нижний край карты */ .scandi-form--theme-cream-plain .scandi-form__media { position: absolute; right: -10%; /* уходит вправо за карту, не вниз */ bottom: 0; /* низ дома заподлицо с нижним краем формы */ width: 62%; /* немного крупнее */ z-index: 3; display: block; align-self: auto; min-height: 0; pointer-events: none; } .scandi-form--theme-cream-plain .scandi-form__media img { width: 100%; height: auto; max-width: none; /* перебить base right-bleed max-width:460 */ aspect-ratio: auto; /* перебить base aspect-ratio:1/1 (квадрат) → полный пейзаж */ display: block; object-fit: contain; user-select: none; /* не выделяется мышью */ -webkit-user-select: none; -webkit-user-drag: none; /* не перетаскивается */ border: 0; border-radius: 0; box-shadow: none; margin: 0; transform: none; transition: none; filter: drop-shadow(0 24px 38px rgba(80, 56, 30, 0.28)); } /* без шевеления при наведении мышью (база крутит/двигает картинку на hover) */ .scandi-form--theme-cream-plain .scandi-form__card:hover .scandi-form__media img { transform: none; box-shadow: none; /* убрать прямоугольную тень + inset-рамку → нет «очертаний» выреза на hover */ filter: drop-shadow(0 24px 38px rgba(80, 56, 30, 0.28)); } @media (max-width: 900px) { .scandi-form--theme-cream-plain .scandi-form__content { max-width: 100%; } .scandi-form--theme-cream-plain .scandi-form__form { max-width: none; } .scandi-form--theme-cream-plain .scandi-form__card { padding: 34px 24px; } } @media (max-width: 900px) { .scandi-form--theme-dark-glass .scandi-form__media--right-panel { position: relative; inset: auto; width: 100%; height: 220px; border-radius: 0 0 16px 16px; margin-top: 24px; } .scandi-form--theme-dark-glass .scandi-form__card { padding: 40px 28px 0; overflow: hidden; } .scandi-form--theme-dark-glass .scandi-form__watermark { font-size: 68px; top: 16px; right: 18px; } .scandi-form--theme-cream-floating .scandi-form__media--absolute-float { position: relative; top: auto; right: auto; transform: none; width: 100%; margin: 24px 0 0; } .scandi-form--theme-cream-floating .scandi-form__media--absolute-float img { transform: rotate(0deg); } .scandi-form--theme-cream-panel .scandi-form__media--right-bleed img { margin-right: 0; margin-bottom: 0; } .scandi-form--theme-cream-plain .scandi-form__card { padding: 36px 24px 30px; } } @media (max-width: 1199px) { .scandi-form__card { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 32px; padding: 48px 40px 40px; } .scandi-form__media--right-bleed img { max-width: 360px; margin-right: -12px; } } @media (max-width: 900px) { section.scandi-form { padding: 56px 0 64px; } .scandi-form__card { grid-template-columns: 1fr; gap: 0; padding: 40px 28px; border-radius: 16px; } .scandi-form__media { display: none; } .scandi-form__fields { grid-template-columns: 1fr; } .scandi-form__title { font-size: 20px; } } @media (max-width: 768px) { .scandi-form__cta { display: flex; width: 100%; align-self: stretch; box-sizing: border-box; } .scandi-form__fields--catalog, .scandi-form__fields--full, .scandi-form__fields--compact { grid-template-columns: 1fr; } } @media (max-width: 480px) { .scandi-form__card { padding: 32px 22px; } .scandi-form__title { font-size: 18px; } .scandi-form__cta { width: 100%; padding: 14px 20px; } } .scandi-form--theme-cream-editorial .scandi-form__eyebrow, .scandi-form--theme-cream-panel .scandi-form__eyebrow, .scandi-form--theme-cream-floating .scandi-form__eyebrow, .scandi-form--theme-cream-plain .scandi-form__eyebrow { color: #7d5a2c; border-color: rgba(125, 90, 44, 0.50); background: rgba(125, 90, 44, 0.10); } .scandi-step3__note, .scandi-form__field-icon { color: #7d5a2c; } .scandi-form__field-label-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } @media (min-width: 901px) { .scandi-form--theme-cream-floating .scandi-form__form { max-width: none; width: 100%; } } @media (max-width: 900px) { .scandi-form--theme-cream-floating .scandi-form__card { grid-template-columns: 1fr; gap: 0; padding: 32px 20px; } .scandi-form--theme-cream-floating .scandi-form__media--absolute-float { display: none; } .scandi-form--theme-cream-floating .scandi-form__content { max-width: 100%; width: 100%; } } @media (max-width: 767px) { .scandi-form--theme-cream-floating .scandi-form__fields, .scandi-form--theme-cream-floating .scandi-form__fields--catalog { grid-template-columns: 1fr; } } /* ╔══════════════════════════════════════════════════════════════════════════╗ ║ R6 — КАТАЛОГ (#catalog) + КАРТОЧКИ ДОМОВ (.catalog-item / .scandi-card-*) ║ ║ Кремовые glass-карточки, gold border-top, hover→тёмная. Сетка 3→2→1. ║ ║ + range-фильтр (.page-range). Портировано из unification.css начисто. ║ ╚══════════════════════════════════════════════════════════════════════════╝ */ .catalog { background: #f5f1eb; } .catalog .container, .catalog .in { max-width: 1200px; } .catalog .section-title, .catalog h2 { margin-bottom: 18px; } #catalog, div#catalog, [data-catalog]{ /* единый кремовый холст (в тон страницы) + мягкое тёплое свечение сверху — лид «Выберите дом…» плавно перетекает в карточки, без тёмной полосы */ background: radial-gradient(ellipse 56% 38% at 50% 0%, rgba(193, 154, 91, 0.10) 0%, transparent 62%), linear-gradient(180deg, #f5f1eb 0%, #f1ebe0 100%); background-color: #f5f1eb; padding: 12px 0 64px; margin-top: 0; position: relative; z-index: 1; overflow: visible; } /* ════════ 3D на ФОТО (текст и канон-hover не трогаем) ════════ Другое решение: при наведении в 3D «оживает» только изображение дома — лёгкий наклон в перспективе + приближение. Текст/КД/цена остаются плоскими и чёткими, карточка сохраняет свой канон-hover (смена цвета). Desktop+clean. */ @media (min-width: 992px) { #catalog .catalog-item .image, [data-catalog] .catalog-item .image{ perspective: 800px; overflow: hidden; } #catalog .catalog-item .image img, [data-catalog] .catalog-item .image img{ transition: transform 0.55s cubic-bezier(0.2,0.7,0.2,1); transform-origin: center 60%; will-change: transform; } #catalog .catalog-item:hover .image img, [data-catalog] .catalog-item:hover .image img{ transform: scale(1.09) rotateX(5deg) rotateY(-4deg); } } /* ════════ ПОГРУЖЕНИЕ: клик по карточке плавно разворачивает её в большую ════════ FLIP-зум с мягким игровым easing (overshoot), затемнение+блюр фона. Действия те же — «Открыть проект» (ссылка) и «Получить КП» (канон-попап). JS: initCatalogZoom. */ .scandi-zoom-backdrop { position: fixed; inset: 0; background: rgba(20, 14, 9, 0.52); backdrop-filter: blur(7px); -webkit-backdrop-filter: blur(7px); opacity: 0; transition: opacity 0.55s ease; z-index: 9998; pointer-events: none; } .scandi-zoom-backdrop.is-on { opacity: 1; pointer-events: auto; } .scandi-zoom-fly { position: fixed; z-index: 9999; border-radius: 16px; overflow: hidden; background: #fffdf8; border-top: 3px solid #c19a5b; box-shadow: 0 60px 130px -24px rgba(0,0,0,0.55), 0 0 0 1px rgba(193,154,91,0.18); transition: top 0.62s cubic-bezier(0.22, 1, 0.32, 1), left 0.62s cubic-bezier(0.22, 1, 0.32, 1), width 0.62s cubic-bezier(0.22, 1, 0.32, 1), height 0.62s cubic-bezier(0.22, 1, 0.32, 1), border-radius 0.5s ease, opacity 0.4s ease; will-change: top, left, width, height; } .scandi-zoom-fly__grid { display: grid; grid-template-columns: 1.1fr 1fr; height: 100%; position: relative; } /* ЛЕВАЯ СТРАНИЦА «каталога»: изображение/видео видно ЦЕЛИКОМ (contain) на мягкой бумажной подложке — как фото, вклеенное в каталог, без зума и обрезки. */ .scandi-zoom-fly__media { position: relative; overflow: hidden; background: radial-gradient(125% 120% at 32% 22%, #fbf7ef 0%, #f0e8d8 100%); } .scandi-zoom-fly__img { position: absolute; inset: 30px; background-size: contain; background-repeat: no-repeat; background-position: center; border-radius: 8px; filter: drop-shadow(0 16px 30px rgba(70,48,18,0.20)); } .scandi-zoom-fly__video { position: absolute !important; top: 30px !important; left: 30px !important; right: auto !important; bottom: auto !important; width: calc(100% - 60px) !important; height: calc(100% - 60px) !important; max-width: none !important; min-width: 0 !important; object-fit: contain !important; display: block; border-radius: 8px; } /* «корешок книги»: мягкая тень-сгиб у внутреннего края страницы-фото */ .scandi-zoom-fly__media::after { content: ''; position: absolute; top: 0; bottom: 0; right: 0; width: 46px; background: linear-gradient(90deg, transparent, rgba(70,48,18,0.13)); pointer-events: none; } .scandi-zoom-fly__area { position: absolute; top: 20px; left: 20px; z-index: 2; background: rgba(20,14,9,0.62); color: #f3ecdc; font: 600 13px/1 'Manrope', sans-serif; padding: 9px 15px; border-radius: 30px; backdrop-filter: blur(8px); border: 1px solid rgba(212,173,110,0.3); } /* ПРАВАЯ СТРАНИЦА: описание/цена. Золотой волосок-корешок + ответная тень-сгиб. */ .scandi-zoom-fly__info { padding: clamp(26px, 3vw, 48px); display: flex; flex-direction: column; justify-content: center; overflow: auto; position: relative; background: #fffdf8; border-left: 1px solid rgba(166,124,58,0.32); } .scandi-zoom-fly__info::before { content: ''; position: absolute; top: 0; bottom: 0; left: 0; width: 40px; background: linear-gradient(90deg, rgba(70,48,18,0.11), transparent); pointer-events: none; } .scandi-zoom-fly__eyebrow { font: 700 11px/1 'Manrope', sans-serif; letter-spacing: 0.2em; text-transform: uppercase; color: #a67c3a; margin-bottom: 14px; display: flex; align-items: center; gap: 12px; } .scandi-zoom-fly__eyebrow::before { content: ''; width: 30px; height: 1px; background: linear-gradient(90deg, #a67c3a, transparent); } .scandi-zoom-fly__kd { font: 800 clamp(30px, 3.2vw, 44px)/1 'Manrope', sans-serif; color: #9a6b22; letter-spacing: -0.02em; } .scandi-zoom-fly__desc { font: 400 clamp(14px, 1.15vw, 15.5px)/1.65 'Manrope', sans-serif; color: #5a4d3a; margin: 18px 0 4px; max-width: 440px; padding-left: 18px; border-left: 2px solid transparent; border-image: linear-gradient(180deg, #c79a52 0%, rgba(166,124,58,0.12) 100%) 1; /* стильная тонкая вертикальная золотая линия */ } .scandi-zoom-fly__specs { display: flex; flex-wrap: wrap; gap: 14px 26px; color: #5a4d3a; font-size: 14px; margin: 20px 0; padding: 18px 0; border-top: 1px solid rgba(166,124,58,0.18); border-bottom: 1px solid rgba(166,124,58,0.18); } .scandi-zoom-fly__specs .info-item { display: flex; align-items: center; gap: 8px; } .scandi-zoom-fly__specs .info-num { font-weight: 700; color: #1f1612; } .scandi-zoom-fly__specs .info-unit { color: #8a7a5e; } .scandi-zoom-fly__specs svg { width: 19px; height: 19px; color: #a67c3a; flex: none; } .scandi-zoom-fly__priceline { display: flex; flex-direction: column; gap: 3px; margin: 16px 0 4px; } .scandi-zoom-fly__pricelbl { font: 600 11px/1 'Manrope', sans-serif; letter-spacing: 0.1em; text-transform: uppercase; color: #8a7a5e; } .scandi-zoom-fly__price { font: 800 clamp(22px, 2.2vw, 30px)/1 'Manrope', sans-serif; color: #9a6b22; margin: 16px 0 2px; letter-spacing: -0.01em; } .scandi-zoom-fly__ctas { display: flex; align-items: center; gap: 22px; margin-top: 26px; flex-wrap: wrap; } .scandi-zoom-fly__cta { display: inline-flex; align-items: center; gap: 9px; cursor: pointer; border: 0; background: none; font: 600 13px/1 'Manrope', sans-serif; letter-spacing: 0.04em; transition: transform 0.2s ease, box-shadow 0.2s ease; text-decoration: none; } /* primary — золотая «таблетка» (как в каноне), но изящнее */ .scandi-zoom-fly__cta--kp { padding: 14px 30px; border-radius: 30px; color: #1a120a; background: linear-gradient(118deg, #8a5a1f, #c79a52 58%, #a67c3a); box-shadow: 0 12px 26px rgba(166,124,58,0.30); } .scandi-zoom-fly__cta--kp:hover { transform: translateY(-2px); box-shadow: 0 18px 36px rgba(166,124,58,0.40); } /* secondary — текст-ссылка с золотой стрелкой (легче, не спорит с primary) */ .scandi-zoom-fly__cta--open { color: #8a5a1f; padding: 6px 2px; position: relative; } .scandi-zoom-fly__cta--open svg { transition: transform 0.25s ease; } .scandi-zoom-fly__cta--open::after { content: ''; position: absolute; left: 2px; right: 22px; bottom: 0; height: 1px; background: currentColor; opacity: 0.3; transition: opacity 0.25s; } .scandi-zoom-fly__cta--open:hover svg { transform: translateX(5px); } .scandi-zoom-fly__cta--open:hover::after { opacity: 0.7; } .scandi-zoom-fly__close { position: absolute; top: 14px; right: 16px; width: 40px; height: 40px; border-radius: 50%; border: 1px solid rgba(255,255,255,0.45); background: rgba(20,14,9,0.45); color: #fff; font-size: 22px; line-height: 1; cursor: pointer; z-index: 5; display: flex; align-items: center; justify-content: center; backdrop-filter: blur(4px); } @media (max-width: 860px) { .scandi-zoom-fly__grid { grid-template-columns: 1fr; grid-template-rows: 200px 1fr; } } #catalog::before, [data-catalog]::before{ content: ''; position: absolute; inset: 0; background-image: radial-gradient(ellipse 100% 80% at 50% 50%, transparent 60%, rgba(120, 90, 50, 0.10) 100%), url("data:image/svg+xml;utf8,"), url("data:image/svg+xml;utf8,"); background-repeat: no-repeat, no-repeat, repeat; background-size: auto, 100% 50%, 320px 320px; background-position: center, center 80%, 0 0; pointer-events: none; z-index: 0; display: block; width: auto; height: auto; top: 0; left: 0; transform: none; opacity: 0.85; } #catalog::after, [data-catalog]::after{ content: ''; position: absolute; top: 40px; left: 50%; transform: translateX(-50%); width: 320px; height: 1px; background: linear-gradient(90deg, transparent 0%, rgba(212, 173, 110, 0.55) 50%, transparent 100%); pointer-events: none; z-index: 1; } /* #catalog ИЛИ [data-catalog] — id блока непостоянен (anchor из ACF), атрибут есть всегда. Делает сетку карточек + скрытие огромной .image-bg универсальными на ВСЕХ домах. */ #catalog .container, [data-catalog] .container, #catalog .items, [data-catalog] .items { position: relative; z-index: 2; } #catalog .image-bg, [data-catalog] .image-bg { display: none; } #catalog .items, [data-catalog] .items { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px 32px; max-width: 1280px; margin: 0 auto; padding: 0 24px; } @media (max-width: 991px) { #catalog .items, [data-catalog] .items { grid-template-columns: repeat(2, 1fr); gap: 24px 20px; } } @media (max-width: 600px) { #catalog .items, [data-catalog] .items { grid-template-columns: 1fr; } } /* ════════ «ПОЛКИ»: ряды карточек стоят на тонких золотых полках ════════ Карточки фикс. высоты 518px + gap 32px → шаг ряда 550px. Линия-полка рисуется повторяющимся градиентом по сетке в зазоре под каждым рядом; карточки получают нижнюю контактную тень — эффект «проекты стоят на полке». Только desktop (на узких экранах карточки в 1–2 колонки, шаг иной — полку не рисуем). */ #catalog .catalog-item, #catalog a.catalog-item, [data-catalog] .catalog-item, [data-catalog] a.catalog-item{ background: linear-gradient(135deg, rgba(255, 252, 245, 0.95) 0%, rgba(245, 235, 215, 0.85) 50%, rgba(228, 215, 188, 0.82) 100%); backdrop-filter: blur(28px) saturate(1.4); -webkit-backdrop-filter: blur(28px) saturate(1.4); border: 1px solid rgba(166, 124, 58, 0.30); border-top: 2px solid #a67c3a; border-radius: 14px; overflow: hidden; display: flex; flex-direction: column; text-decoration: none; position: relative; margin: 0; width: 100%; height: auto; isolation: isolate; cursor: pointer; transition: all 0.6s cubic-bezier(0.65,0,0.35,1); box-shadow: 0 12px 30px rgba(120, 90, 50, 0.14), 0 4px 10px rgba(120, 90, 50, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.60), inset 0 -1px 0 rgba(166, 124, 58, 0.08); } #catalog .catalog-item:hover, #catalog a.catalog-item:hover, [data-catalog] .catalog-item:hover, [data-catalog] a.catalog-item:hover{ /* только подъём, БЕЗ scale: scale(1.02) растеризует текст с background-clip:text (КД + цена золотом) → размытие. Подъёма + свечения достаточно для hover-эффекта. */ transform: translateY(-8px); background: linear-gradient(135deg, rgba(50, 35, 20, 0.95) 0%, rgba(30, 22, 16, 0.95) 50%, rgba(40, 28, 18, 0.95) 100%); border-color: rgba(212, 173, 110, 0.85); box-shadow: 0 0 0 1px rgba(212, 173, 110, 0.35), 0 0 40px rgba(193, 154, 91, 0.30), 0 32px 64px rgba(0, 0, 0, 0.50), 0 16px 32px rgba(193, 154, 91, 0.35), inset 0 1px 0 rgba(255, 230, 180, 0.20), inset 0 -1px 0 rgba(0, 0, 0, 0.30); z-index: 10; } #catalog .catalog-item .image::after, [data-catalog] .catalog-item .image::after{ content: ''; position: absolute; inset: 0; background: radial-gradient(circle at 50% 100%, rgba(212, 173, 110, 0) 0%, rgba(212, 173, 110, 0) 100%); pointer-events: none; z-index: 2; transition: background 0.5s ease; } #catalog .catalog-item:hover .image::after, [data-catalog] .catalog-item:hover .image::after{ background: radial-gradient(circle at 50% 120%, rgba(212, 173, 110, 0.18) 0%, rgba(212, 173, 110, 0) 60%); } #catalog .catalog-item::after, #catalog a.catalog-item::after, [data-catalog] .catalog-item::after, [data-catalog] a.catalog-item::after{ content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, #c19a5b 0%, rgba(193, 154, 91, 0.3) 70%, transparent 100%); z-index: 4; opacity: 1; transition: background 0.5s ease, box-shadow 0.5s ease, height 0.5s ease; pointer-events: none; } #catalog .catalog-item:hover::after, [data-catalog] .catalog-item:hover::after{ background: linear-gradient(90deg, #d4ad6e 0%, #f5d294 35%, #c19a5b 65%, #a67c3a 100%); box-shadow: 0 0 14px rgba(212, 173, 110, 0.65), 0 2px 6px rgba(193, 154, 91, 0.45); height: 3px; } #catalog .catalog-item.item-title, [data-catalog] .catalog-item.item-title{ display: none; } #catalog .catalog-item .image, [data-catalog] .catalog-item .image{ position: relative; width: 100%; height: auto; aspect-ratio: 5 / 4; overflow: hidden; background: repeating-linear-gradient(135deg, rgba(212, 173, 110, 0.10) 0, rgba(212, 173, 110, 0.10) 2px, transparent 2px, transparent 14px), radial-gradient(circle at 30% 30%, rgba(255, 230, 180, 0.18), transparent 55%), linear-gradient(135deg, #2a1f17 0%, #1f1812 50%, #14100d 100%); margin: 0; filter: none; border-radius: 0; box-shadow: none; mix-blend-mode: normal; z-index: 0; display: block; } #catalog .catalog-item.no-hero .image::after, #catalog .catalog-item .image.no-hero::after, [data-catalog] .catalog-item.no-hero .image::after, [data-catalog] .catalog-item .image.no-hero::after{ content: attr(data-kd); display: flex; align-items: center; justify-content: center; position: absolute; inset: 0; font-family: var(--font-display, 'Manrope'), sans-serif; font-size: 36px; font-weight: 800; letter-spacing: 0.12em; color: rgba(212, 173, 110, 0.45); text-transform: uppercase; text-shadow: 0 4px 24px rgba(0,0,0,0.4); pointer-events: none; z-index: 2; background: none; } #catalog .catalog-item .image::after, [data-catalog] .catalog-item .image::after{ display: none; } #catalog .catalog-item .image img, [data-catalog] .catalog-item .image img{ width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 1s cubic-bezier(0.65, 0, 0.35, 1), filter 0.6s ease; filter: brightness(1.0) saturate(1.0); } #catalog .catalog-item:hover .image img, [data-catalog] .catalog-item:hover .image img{ transform: scale(1.06); filter: brightness(1.05) saturate(1.05); } /* Видео-превью карточки (КД-520 и т.п.): без object-fit нативное