/* ============================================================ Елена Кочкарёва — каталог новостроек Перми Палитра: бежевый лён · фарфор · мокко · латунь · эспрессо (снята с фотографии Елены: стена в солнце, платье, латунные пуговицы, дубовый пол, каркас кресла) Шрифты: Literata (дисплей) · Golos Text (текст) · JetBrains Mono (данные) Цвет живёт в двух слоях и только здесь: 1) рамп бренда — сырые hex-и, единственное место в файле; 2) семантические токены — ими пользуются все правила ниже. Светлая карта — в :root, тёмная — в :root[data-theme="dark"]. Тему выставляет inline-скрипт в (выбор → система → светлая), переключатель шапки — [data-theme-toggle] в site/components.js. Сменить оттенок сайта = поправить рамп и карты тем, больше нигде. ============================================================ */ /* ---------- слой 1: рамп бренда (единственные сырые цвета) ---------- */ :root { /* бежевый лён — светлые поверхности */ --beige-50: #FCF8F3; --beige-100: #F7F1E8; --beige-200: #F2EAE0; --beige-300: #E4D8C8; --beige-400: #D3C3AE; /* тёплый тауп — текст и линии на светлом */ --taupe-400: #9C8B7B; --taupe-500: #756456; /* крем — текст на тёмных полосах */ --cream-100: #F7F0E6; --cream-200: #EDE2D3; --cream-300: #DCCDB9; --cream-500: #B7A48D; --cream-600: #A4917C; --cream-700: #8C7A66; /* эспрессо — тёмные полосы и фон тёмной темы */ --espresso-650: #4E3D31; --espresso-700: #45362C; --espresso-720: #453729; --espresso-750: #372B23; --espresso-780: #34291F; --espresso-800: #2B211B; --espresso-850: #241C17; --espresso-875: #221A15; --espresso-900: #1C1512; --espresso-925: #17120F; --espresso-950: #120E0C; /* мокко — платье Елены, основной акцент */ --mocha-200: #E9C79C; --mocha-300: #D8A97A; --mocha-500: #7A5140; --mocha-600: #5E3A2C; /* латунь — пуговицы, акцент на тёмном */ --brass-300: #E8C48A; --brass-400: #D8AC63; /* глина и шалфей — редкие вторые акценты */ --clay-400: #E3A87B; --clay-600: #B5703F; --sage-400: #93A085; --sage-600: #6F7B60; /* вне темы: фирменные цвета мессенджеров и белая плашка */ --wa: #1FAF54; --tg: #2AABEE; --on-brand: #FFFFFF; --plate: #FFFFFF; /* не-цветовые токены */ --r: 14px; --disp: 'Literata', Georgia, serif; --body: 'Golos Text', system-ui, sans-serif; --mono: 'JetBrains Mono', monospace; } /* ---------- слой 2: семантика, светлая тема ---------- */ :root { color-scheme: light; /* светлые поверхности */ --bg: var(--beige-200); --bg-soft: var(--beige-100); --surface: var(--beige-50); --surface-2: var(--plate); --border: var(--beige-300); --border-strong: var(--beige-400); /* текст на светлом */ --text: var(--espresso-850); --text-dim: var(--taupe-500); --text-faint: var(--taupe-400); /* тёмные полосы: шапка, герой, калькулятор, CTA, подвал, панель */ --ink: var(--espresso-800); --ink-2: var(--espresso-750); --ink-3: var(--espresso-700); --ink-line: var(--espresso-650); --ink-glass: rgba(43, 33, 27, .86); --hdr-glass: rgba(43, 33, 27, .93); --ink-tint: rgba(255, 255, 255, .05); --ink-tint-2: rgba(255, 255, 255, .085); --ink-hair: rgba(255, 255, 255, .16); --ink-hair-2: rgba(255, 255, 255, .3); --ink-grid: rgba(255, 255, 255, .028); /* текст на тёмных полосах */ --on-ink: var(--cream-100); --on-ink-2: var(--cream-300); --on-ink-3: var(--cream-500); --on-ink-4: var(--cream-700); /* акценты */ --accent: var(--mocha-500); --accent-strong: var(--mocha-600); --accent-soft: rgba(122, 81, 64, .08); --accent-ring: rgba(122, 81, 64, .16); --accent-shadow: rgba(94, 58, 44, .34); --on-accent: var(--beige-50); --gold: var(--brass-400); --gold-soft: rgba(216, 172, 99, .13); --gold-ring: rgba(216, 172, 99, .24); --on-gold: var(--espresso-950); --clay: var(--clay-600); --clay-txt: var(--clay-400); --on-clay: #FFF6EC; --sage: var(--sage-600); --focus: var(--mocha-500); /* служебное */ --scrim: rgba(36, 28, 23, .6); --shadow-soft: rgba(62, 49, 40, .08); --shadow-med: rgba(62, 49, 40, .14); --shadow-hard: rgba(62, 49, 40, .3); --glow: rgba(216, 172, 99, .14); --map-bg: #E9E0D2; --map-filter: grayscale(.9) sepia(.35) brightness(1.03) contrast(.95); --select-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23756456' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); /* крестик очистки поля поиска — форма для mask, цвет даёт background-токен */ --icon-x: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12M18 6L6 18'/%3E%3C/svg%3E"); } /* ---------- слой 2: семантика, тёмная тема ---------- */ :root[data-theme="dark"] { color-scheme: dark; --bg: var(--espresso-925); --bg-soft: var(--espresso-900); --surface: var(--espresso-875); --surface-2: var(--plate); --border: var(--espresso-780); --border-strong: var(--espresso-720); --text: var(--cream-200); --text-dim: var(--cream-600); --text-faint: var(--cream-700); --ink: var(--espresso-950); --ink-2: var(--espresso-900); --ink-3: var(--espresso-850); --ink-line: var(--espresso-780); --ink-glass: rgba(18, 14, 12, .88); --hdr-glass: rgba(18, 14, 12, .94); --accent: var(--mocha-300); --accent-strong: var(--mocha-200); --accent-soft: rgba(216, 169, 122, .12); --accent-ring: rgba(216, 169, 122, .24); --accent-shadow: rgba(0, 0, 0, .5); --on-accent: var(--espresso-900); --gold: var(--brass-300); --sage: var(--sage-400); --focus: var(--brass-300); --scrim: rgba(0, 0, 0, .72); --shadow-soft: rgba(0, 0, 0, .4); --shadow-med: rgba(0, 0, 0, .55); --shadow-hard: rgba(0, 0, 0, .7); --glow: rgba(216, 172, 99, .1); --map-bg: var(--espresso-850); --map-filter: grayscale(.85) invert(.9) sepia(.2) brightness(.92) contrast(1.05); --select-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23A4917C' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); } /* Тёмные полосы (шапка, герой, калькулятор, CTA, подвал, панель, поповер) одинаковы в обеих темах, поэтому внутри них контекст переопределяет свои токены — светлым мокко и латунью, — а не плодит копии правил. Плотный мокко, который держит светлую страницу, на эспрессо просто тонет. */ .hdr, .hero, .calc, .cta-band, .srv-free, .ftr, .nav, .ch-pop, .zhk-cta, .toast, .fav-send { --accent: var(--mocha-300); --accent-strong: var(--mocha-200); --accent-soft: rgba(216, 169, 122, .14); --accent-ring: rgba(216, 169, 122, .26); --accent-shadow: rgba(0, 0, 0, .45); --on-accent: var(--espresso-900); --focus: var(--gold); } * { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: smooth; /* iOS: не раздувать кегль относительно вёрстки */ -webkit-text-size-adjust: 100%; text-size-adjust: 100%; /* родная тач-подсветка — отклик даёт :focus-visible / :active, не серый бокс ОС */ -webkit-tap-highlight-color: transparent; } body { font-family: var(--body); font-size: 16px; line-height: 1.55; color: var(--text); background: var(--bg); -webkit-font-smoothing: antialiased; } img { display: block; max-width: 100%; height: auto; } a { color: var(--accent); text-decoration: none; } a:hover { text-decoration: underline; } button { font: inherit; cursor: pointer; } :focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; } .wrap { max-width: 1200px; margin: 0 auto; padding: 0 24px; } [hidden] { display: none !important; } section[id], [id="korpusa"], [id="flats"], [id="stats"] { scroll-margin-top: 80px; } /* --- типографика --- */ h1, h2 { font-family: var(--disp); font-weight: 600; line-height: 1.1; letter-spacing: -0.02em; font-optical-sizing: auto; } h1 { font-size: clamp(30px, 4.6vw, 54px); } h2 { font-size: clamp(24px, 3.2vw, 38px); } .eyebrow { font-family: var(--mono); font-size: 12px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.14em; color: var(--accent); margin-bottom: 14px; } .hero .eyebrow, .calc .eyebrow { color: var(--gold); } .sec-head { max-width: 720px; margin-bottom: 36px; } .sec-sub { margin-top: 14px; color: var(--text-dim); font-size: 17px; } .calc .sec-sub { color: var(--on-ink-3); } .fine { font-size: 12.5px; color: var(--text-dim); } /* --- кнопки: единая система (.btn + ролевой модификатор) --- */ /* Один базовый класс, ролевые (не цветовые) модификаторы, полный набор состояний. Размер по умолчанию — средний; .btn-s / .btn-l вокруг него. */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 11px 20px; font-size: 15px; font-weight: 600; line-height: 1; border: 1.5px solid transparent; border-radius: 11px; text-decoration: none !important; white-space: nowrap; cursor: pointer; user-select: none; -webkit-tap-highlight-color: transparent; transition: transform .14s ease, box-shadow .14s ease, background .14s ease, border-color .14s ease, color .14s ease; } .btn:hover { transform: translateY(-1px); } .btn:active { transform: translateY(0) scale(.985); } .btn:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; } .btn[aria-disabled="true"], .btn:disabled { opacity: .5; pointer-events: none; transform: none; box-shadow: none; } .btn-s { padding: 8px 15px; font-size: 14px; border-radius: 10px; } .btn-l { padding: 14px 26px; font-size: 16px; border-radius: 12px; } /* primary — сплошной малахит, главное действие */ .btn-primary { background: var(--accent); color: var(--on-accent); box-shadow: 0 8px 22px -6px var(--accent-shadow); } .btn-primary:hover { background: var(--accent-strong); box-shadow: 0 12px 26px -6px var(--accent-shadow); } .btn-primary:active { box-shadow: 0 4px 12px -4px var(--accent-shadow); } /* ghost — светлый контур на тёмном фоне */ .btn-ghost { border-color: var(--ink-hair-2); color: var(--on-ink); } .btn-ghost:hover { border-color: var(--on-ink); background: var(--ink-tint-2); } /* outline — малахитовый контур на светлом фоне, заливка на hover */ .btn-outline { border-color: var(--accent); color: var(--accent-strong); background: transparent; } .btn-outline:hover { background: var(--accent); border-color: var(--accent); color: var(--on-accent); } /* dark — сплошной уголь с малахитовым текстом */ .btn-dark { background: var(--ink); color: var(--gold); } .btn-dark:hover { background: var(--accent); color: var(--on-accent); } @media (prefers-reduced-motion: reduce) { .btn { transition: none; } .btn:hover, .btn:active { transform: none; } } /* ============ ХЕДЕР ============ */ .hdr { position: sticky; top: 0; z-index: 50; border-bottom: 1px solid var(--ink-line); } /* Матовое стекло — на псевдоэлементе, а не на самой .hdr: backdrop-filter на .hdr сделал бы её containing block для fixed-потомков, и оффканвас-панель (.nav) с right:0 привязалась бы к коробке шапки, а не к вьюпорту (щель справа на мобиле). ::before сохраняет вид, но панель остаётся фиксированной к экрану. */ .hdr::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--hdr-glass); backdrop-filter: blur(12px); } /* Контейнер шапки той же ширины, что и контент (.wrap = 1200px) — бренд слева совпадает по краю с крошками/H1, зона действий справа — с краем секций. */ .hdr .wrap { max-width: 1200px; } .hdr-in { display: flex; align-items: center; gap: 22px; height: 66px; } .brand { display: flex; align-items: center; flex: none; text-decoration: none !important; } /* Нейтральный текстовый вордмарк каталога вместо личного имени. Одна строка, вертикальный центр рядом с одной строкой навигации; «Перми» — акцентом. */ .brand-word { font-family: var(--disp); font-size: 18px; font-weight: 600; letter-spacing: -.02em; line-height: 1; color: var(--on-ink); white-space: nowrap; } .brand-word em { font-style: normal; color: var(--gold); } .nav { display: flex; gap: 18px; margin-left: auto; } .nav a { color: var(--on-ink-2); font-size: 14px; font-weight: 500; white-space: nowrap; } .nav a:hover { color: var(--gold); text-decoration: none; } .hdr-cta { display: flex; align-items: center; gap: 13px; } .nav-toggle { display: none; width: 42px; height: 42px; padding: 0; flex: none; background: transparent; color: var(--on-ink); cursor: pointer; border: 1px solid var(--ink-line); border-radius: 9px; place-items: center; } .nav-toggle:hover { color: var(--gold); border-color: var(--gold); } .nav-toggle svg { display: block; } /* Кнопка связи — единственный контакт-контрол шапки (зелёный акцент), открывает поповер с каналами. Иерархия: поиск — ghost, связь — primary. */ .hdr-contacts { display: inline-flex; align-items: center; gap: 7px; flex: none; font-family: var(--body); font-size: 14px; font-weight: 600; color: var(--on-accent); background: var(--accent); cursor: pointer; border: 1px solid transparent; border-radius: 9px; padding: 8px 15px; transition: background .15s ease, box-shadow .15s ease; } .hdr-contacts:hover { background: var(--accent-strong); box-shadow: 0 10px 22px -8px var(--accent-shadow); } .hdr-contacts svg { flex: none; } /* Переключатель темы — контрол второго плана: иконка без подписи слева от поиска. Показывает то, что произойдёт по клику: луна в светлой теме, солнце в тёмной. На узких экранах уезжает в панель-бургер (см. адаптив), чтобы в шапке телефона остались поиск, связь и бургер. */ .theme-toggle { display: inline-grid; place-items: center; flex: none; width: 42px; height: 42px; padding: 0; cursor: pointer; color: var(--on-ink-2); background: var(--ink-tint); border: 1px solid var(--ink-line); border-radius: 9px; transition: color .15s ease, border-color .15s ease; } .theme-toggle:hover { color: var(--gold); border-color: var(--gold); } .theme-toggle svg { display: block; } .theme-toggle .ic-sun { display: none; } :root[data-theme="dark"] .theme-toggle .ic-sun { display: block; } :root[data-theme="dark"] .theme-toggle .ic-moon { display: none; } /* ============ ГЕРОЙ ============ */ .hero { background: radial-gradient(900px 480px at 82% -10%, var(--glow), transparent 60%), linear-gradient(var(--ink-grid) 1px, transparent 1px), linear-gradient(90deg, var(--ink-grid) 1px, transparent 1px), var(--ink); background-size: auto, 44px 44px, 44px 44px, auto; color: var(--on-ink); overflow: hidden; } .hero-in { display: grid; grid-template-columns: 1.25fr .75fr; gap: 56px; align-items: center; padding-top: 72px; padding-bottom: 72px; } .hero h1 em { font-style: normal; color: var(--gold); } .hero-sub { margin-top: 22px; font-size: 17.5px; color: var(--on-ink-2); max-width: 560px; } /* Быстрый поиск в герое — одноколоночный на всех ширинах (ПК упрощён под мобильную версию): подпись, чипы комнатности, одна главная кнопка, тихая ссылка на подбор. Чипы — тёмный вариант поверх ink-героя. */ .hero-search { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; margin-top: 30px; max-width: 560px; } .hero-search-label { font-family: var(--mono); font-size: 12.5px; color: var(--on-ink-3); } .hero-rooms { display: flex; flex-wrap: wrap; gap: 8px; } .hero-rooms .chip { border-color: var(--ink-hair); color: var(--on-ink-2); } .hero-rooms .chip:hover { border-color: var(--gold); color: var(--gold); } .hero-rooms .chip.is-on { background: var(--gold); border-color: var(--gold); color: var(--on-gold); } .hero-go { align-self: stretch; text-align: center; } .hero-podbor { font-size: 14px; color: var(--on-ink-2); text-decoration: none; border-bottom: 1px solid var(--ink-hair); padding-bottom: 1px; } .hero-podbor:hover { color: var(--gold); border-color: var(--gold); } .trust { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-top: 44px; padding-top: 28px; border-top: 1px solid var(--ink-line); } .trust dt { font-family: var(--disp); font-weight: 600; font-size: 21px; color: var(--gold); } .trust dd { margin-top: 6px; font-size: 12.5px; line-height: 1.45; color: var(--on-ink-3); } .hero-photo { position: relative; justify-self: end; max-width: 360px; } .hero-photo img { border-radius: var(--r); border: 1px solid var(--ink-line); box-shadow: 0 30px 60px var(--shadow-hard); } .hero-photo figcaption { position: absolute; left: 14px; right: 14px; bottom: 14px; background: var(--ink-glass); backdrop-filter: blur(8px); border: 1px solid var(--ink-line); border-radius: 10px; padding: 10px 14px; font-size: 11.5px; line-height: 1.45; color: var(--on-ink-3); } .hero-photo figcaption span { display: block; font-family: var(--mono); font-size: 12px; font-weight: 500; text-transform: uppercase; letter-spacing: .1em; color: var(--on-ink); margin-bottom: 3px; } /* ============ КАТАЛОГ ============ */ .catalog { padding: 72px 0 60px; } .f-row { display: flex; flex-wrap: wrap; gap: 10px 18px; align-items: center; } .chip { font-family: var(--mono); font-size: 12.5px; font-weight: 500; padding: 7px 13px; border-radius: 99px; border: 1.5px solid var(--border); background: transparent; color: var(--text-dim); transition: all .12s ease; } .chip:hover { border-color: var(--accent); color: var(--accent); } .chip.is-on { background: var(--ink); border-color: var(--ink); color: var(--gold); } .f-select { display: flex; align-items: center; gap: 8px; font-size: 13.5px; color: var(--text-dim); } .f-select select, .f-select input { font: inherit; color: var(--text); background: var(--bg-soft); border: 1.5px solid var(--border); border-radius: 9px; padding: 7px 10px; } .f-search { font: inherit; flex: 1 1 200px; min-width: 170px; background: var(--bg-soft); border: 1.5px solid var(--border); border-radius: 9px; padding: 8px 12px; color: var(--text); } .f-search::placeholder { color: var(--text-faint); } /* Крестик очистки полей поиска — в тон палитры вместо браузерного синего */ input[type="search"]::-webkit-search-decoration { -webkit-appearance: none; appearance: none; } input[type="search"]::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; width: 16px; height: 16px; margin-left: 8px; cursor: pointer; background: var(--text-dim); -webkit-mask: var(--icon-x) center / contain no-repeat; mask: var(--icon-x) center / contain no-repeat; } /* iOS-zoom fix: любой контрол формы <16px заставляет Safari увеличивать вьюпорт при фокусе. На телефоне поднимаем шрифт контролов до 16px (десктоп компактный вид сохраняет — правило только в мобильном медиазапросе). */ @media (max-width: 640px) { input, select, textarea { font-size: 16px !important; } } .f-count { font-family: var(--mono); font-size: 12px; color: var(--text-dim); margin-left: auto; white-space: nowrap; } .cat-block-title { font-family: var(--mono); font-size: 12.5px; font-weight: 500; text-transform: uppercase; letter-spacing: .1em; color: var(--text-dim); margin: 34px 0 18px; display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; } .cat-block-title span { color: var(--accent); font-weight: 700; } /* --- карточки подборки --- */ .cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; } .card { position: relative; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r); overflow: hidden; display: flex; flex-direction: column; transition: transform .18s ease, box-shadow .18s ease; } .card:hover { transform: translateY(-3px); box-shadow: 0 22px 44px var(--shadow-med); } .card-photo { position: relative; aspect-ratio: 3 / 2; overflow: hidden; background: var(--ink-2); } .card-photo img { width: 100%; height: 100%; object-fit: cover; transition: transform .35s ease; } .card:hover .card-photo img { transform: scale(1.045); } .badge { position: absolute; top: 12px; left: 12px; font-family: var(--mono); font-size: 10.5px; font-weight: 500; text-transform: uppercase; letter-spacing: .09em; background: var(--ink-glass); color: var(--gold); padding: 5px 10px; border-radius: 99px; backdrop-filter: blur(6px); } .badge.b-биз, .badge.b-эли { color: var(--clay-txt); } .badge-status { left: auto; right: 12px; color: var(--on-ink-2); } .badge-status.b-done { color: var(--gold); } /* На карточке ЖК верхний-правый угол занимает сердце избранного — статусную плашку опускаем к низу фото (плитки .house-photo сердца не несут). */ .card .badge-status { top: auto; bottom: 12px; } .card-body { padding: 18px 18px 16px; display: flex; flex-direction: column; flex: 1; } .card-top { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; } .card-top h4 { font-family: var(--disp); font-size: 16.5px; font-weight: 600; line-height: 1.25; } .card-price { font-family: var(--disp); font-size: 15px; font-weight: 600; color: var(--accent); white-space: nowrap; } .card-meta { margin-top: 6px; font-size: 13px; color: var(--text-dim); } .zhk-link { color: inherit; } .zhk-link:hover { color: var(--accent); text-decoration: none; } .card .zhk-link::after { content: '→'; display: inline-block; margin-left: .45em; color: var(--text-dim); transition: transform .15s ease, color .15s ease; } .card .zhk-link:hover::after { color: var(--accent); transform: translateX(3px); } .card-photo { display: block; } .offers { list-style: none; margin-top: 14px; border-top: 1px solid var(--border); } .offers li { display: flex; align-items: baseline; gap: 10px; padding: 7.5px 0; border-bottom: 1px solid var(--border); font-size: 13.5px; } .offers li span { font-weight: 600; min-width: 64px; } .offers li i { font-style: normal; font-family: var(--mono); font-size: 12px; color: var(--text-dim); } .offers li b { margin-left: auto; font-family: var(--mono); font-size: 13px; font-weight: 500; } .card-foot { display: flex; align-items: center; gap: 10px; margin-top: auto; padding-top: 14px; } .rate { font-size: 13.5px; font-weight: 600; color: var(--clay); } .rate span { color: var(--text-dim); font-weight: 400; } .card-foot .btn { margin-left: auto; } .card-sale { margin-top: 4px; font-family: var(--mono); font-size: 12px; color: var(--accent); } /* --- CTA в полную базу /zhk/ (под подборкой) --- */ .cat-all { margin-top: 34px; padding: 26px 24px; border: 1px solid var(--border); border-radius: var(--r); background: var(--surface); text-align: center; display: flex; flex-direction: column; align-items: center; gap: 16px; } .cat-all-txt { max-width: 520px; font-size: 15px; color: var(--text-dim); } .cat-all .btn-dark { width: auto; } /* --- модалка живых квартир (данные из API) --- */ .fmodal { position: fixed; inset: 0; z-index: 90; display: flex; align-items: center; justify-content: center; padding: 18px; background: var(--scrim); backdrop-filter: blur(3px); } .fmodal[hidden] { display: none; } .fmodal-box { background: var(--surface); border-radius: var(--r); width: 100%; max-width: 680px; max-height: 86vh; display: flex; flex-direction: column; overflow: hidden; box-shadow: 0 30px 70px var(--shadow-hard); } .fmodal-head { display: flex; align-items: center; gap: 14px; padding: 16px 20px; border-bottom: 1px solid var(--border); } .fmodal-head h4 { flex: 1; font-family: var(--disp); font-size: 15.5px; font-weight: 600; line-height: 1.3; } .fmodal-link { flex: none; font-size: 14px; font-weight: 600; white-space: nowrap; } .fmodal-close { flex: none; width: 34px; height: 34px; cursor: pointer; font-size: 20px; line-height: 1; color: var(--text-dim); background: none; border: 1px solid var(--border); border-radius: 99px; } .fmodal-close:hover { color: var(--accent); border-color: var(--accent); } .fmodal-body { overflow-y: auto; padding: 2px 20px 20px; } .fmodal-body h5 { font-family: var(--disp); font-size: 13.5px; font-weight: 600; margin: 18px 0 4px; color: var(--ink); } .apt { position: relative; display: flex; gap: 14px; padding: 12px 0; border-bottom: 1px dashed var(--border); } .apt[data-href] { cursor: pointer; } .apt-plan-link { flex: none; } .apt img, .apt-noplan { flex: none; width: 104px; height: 104px; object-fit: contain; background: var(--bg-soft); border: 1px solid var(--border); border-radius: 10px; } /* Планировка — чертёж линиями на прозрачном фоне, поэтому её плашка светлая в обеих темах: на тёмной подложке чертёж просто исчезает. */ .apt img { background: var(--plate); } .apt-noplan { display: flex; align-items: center; justify-content: center; text-align: center; font-family: var(--mono); font-size: 11px; color: var(--text-dim); } .apt-info { display: flex; flex-direction: column; gap: 3px; min-width: 0; font-size: 13.5px; overflow-wrap: anywhere; } .apt-top { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; } .apt-price { font-family: var(--mono); font-size: 15.5px; font-weight: 600; color: var(--accent-strong); } .apt-psm { font-family: var(--mono); font-size: 12px; } .apt-info span { color: var(--text-dim); } .apt-where { font-size: 13px; } .apt-info .apt-meta { color: var(--text); } .apt-pay { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 8px; } .apt-pay .zhk-pay-chip { font-size: 11.5px; padding: 3px 9px; } .apt-links { display: flex; flex-wrap: wrap; gap: 0 16px; margin-top: auto; } .apt-links a { padding: 10px 0 6px; } .fmodal-note { margin: 14px 0 4px; font-size: 13px; color: var(--text-dim); } .fmodal-err { margin: 18px 0 6px; font-size: 14.5px; line-height: 1.6; } .empty { text-align: center; background: var(--surface); border: 1px dashed var(--border); border-radius: var(--r); padding: 44px 24px; margin-top: 26px; } .empty p { max-width: 480px; margin: 0 auto 10px; color: var(--text-dim); } .empty p b { color: var(--text); } .empty .btn { margin-top: 8px; } .cat-note { margin-top: 30px; font-size: 14.5px; color: var(--text-dim); max-width: 640px; } /* ============ КАЛЬКУЛЯТОР ============ */ .calc { background: radial-gradient(700px 420px at 12% 110%, var(--gold-soft), transparent 60%), linear-gradient(var(--ink-grid) 1px, transparent 1px), linear-gradient(90deg, var(--ink-grid) 1px, transparent 1px), var(--ink); background-size: auto, 44px 44px, 44px 44px, auto; color: var(--on-ink); } .calc-in { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; padding-top: 76px; padding-bottom: 76px; } .calc-notes { list-style: none; margin-top: 24px; display: grid; gap: 10px; } .calc-notes li { padding-left: 26px; position: relative; font-size: 15px; color: var(--on-ink-2); } .calc-notes li::before { content: '—'; position: absolute; left: 0; color: var(--gold); font-weight: 700; } .calc-form { background: var(--ink-2); border: 1px solid var(--ink-line); border-radius: var(--r); padding: 28px; display: grid; gap: 20px; } .calc-form > label { display: grid; gap: 10px; font-size: 14px; color: var(--on-ink-3); } .calc-form output { float: right; font-family: var(--mono); font-size: 14px; color: var(--on-ink); } .calc-form > label { grid-template-columns: 1fr auto; align-items: center; } .calc-form > label input[type=range] { grid-column: 1 / -1; } input[type=range] { -webkit-appearance: none; appearance: none; height: 4px; border-radius: 4px; background: var(--ink-3); outline-offset: 6px; } input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 20px; height: 20px; border-radius: 50%; background: var(--gold); border: 3px solid var(--ink); cursor: pointer; } input[type=range]::-moz-range-thumb { width: 14px; height: 14px; border-radius: 50%; background: var(--gold); border: 3px solid var(--ink); cursor: pointer; } .calc-row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; } .calc-row2 .f-select { color: var(--on-ink-3); justify-content: space-between; } .calc-row2 select, .calc-row2 input { background: var(--ink-3); border-color: var(--ink-line); color: var(--on-ink); width: 110px; } .calc-result { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; border-top: 1px solid var(--ink-line); padding-top: 18px; } .calc-result span { font-size: 14px; color: var(--on-ink-3); } .calc-result b { font-family: var(--disp); font-size: clamp(26px, 3vw, 34px); font-weight: 600; color: var(--gold); } .calc .fine { color: var(--on-ink-4); } /* ============ КВИЗ ============ */ .quiz { padding: 76px 0; } .quiz-form { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r); padding: 28px; box-shadow: 0 18px 40px var(--shadow-soft); } .quiz-form fieldset { border: 0; display: flex; flex-direction: column; gap: 8px; } .quiz-form legend { font-family: var(--mono); font-size: 12px; font-weight: 500; text-transform: uppercase; letter-spacing: .1em; color: var(--accent); margin-bottom: 12px; } .quiz-form fieldset label { display: block; } .quiz-form input[type=radio] { position: absolute; opacity: 0; } .quiz-form fieldset span { display: block; padding: 10px 14px; border: 1.5px solid var(--border); border-radius: 10px; font-size: 14.5px; font-weight: 500; color: var(--text-dim); cursor: pointer; transition: all .12s ease; } .quiz-form fieldset span:hover { border-color: var(--accent); color: var(--accent); } .quiz-form input[type=radio]:checked + span { background: var(--ink); border-color: var(--ink); color: var(--gold); } .quiz-form input[type=radio]:focus-visible + span { outline: 3px solid var(--gold); outline-offset: 2px; } .quiz-out { grid-column: 1 / -1; border-top: 1px solid var(--border); padding-top: 22px; display: grid; gap: 16px; } .quiz-msg { font-size: 15.5px; background: var(--bg-soft); border-left: 3px solid var(--accent); border-radius: 0 10px 10px 0; padding: 14px 18px; color: var(--text); } .quiz-btns { display: flex; gap: 12px; flex-wrap: wrap; } /* ============ УСЛУГИ ============ */ .services { padding: 0 0 76px; } /* — ведущая тёмная панель «бесплатно для покупателя» — */ .srv-free { background: radial-gradient(680px 380px at 90% 115%, var(--glow), transparent 60%), var(--ink); color: var(--on-ink); border-radius: var(--r); display: grid; grid-template-columns: .82fr 1.18fr; gap: 48px; padding: 40px 44px; align-items: start; } .srv-badge { display: inline-block; font-family: var(--mono); font-size: 11.5px; text-transform: uppercase; letter-spacing: .12em; color: var(--ink); background: var(--gold); border-radius: 999px; padding: 6px 13px; margin-bottom: 16px; font-weight: 600; } .srv-free-lead h3 { font-family: var(--disp); font-size: 22px; font-weight: 600; line-height: 1.2; } .srv-free-lead p { margin-top: 14px; color: var(--on-ink-2); font-size: 15px; } .srv-free-list { list-style: none; display: grid; gap: 22px; } .srv-free-list li { display: grid; grid-template-columns: auto 1fr; gap: 16px; align-items: start; } .srv-free-list b { display: block; font-size: 16px; font-weight: 700; color: var(--on-ink); } .srv-free-list span { display: block; margin-top: 4px; font-size: 14px; color: var(--on-ink-3); line-height: 1.5; } .srv-ic { flex: none; width: 44px; height: 44px; display: grid; place-items: center; border-radius: 12px; color: var(--gold); background: var(--gold-soft); border: 1px solid var(--gold-ring); } /* — платные отдельные услуги — */ .srv-paid { margin-top: 30px; } .srv-paid-label { font-family: var(--mono); font-size: 12px; text-transform: uppercase; letter-spacing: .12em; color: var(--text-dim); margin-bottom: 16px; } .srv-grid { list-style: none; display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; } .srv-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r); padding: 24px 22px; display: flex; flex-direction: column; gap: 12px; transition: transform .15s ease, box-shadow .15s ease; } .srv-card:hover { transform: translateY(-3px); box-shadow: 0 18px 36px var(--shadow-soft); } .srv-card .srv-ic { color: var(--accent); background: var(--accent-soft); border-color: var(--accent-soft); } .srv-card h3 { font-size: 17px; font-weight: 700; } .srv-card p { font-size: 14px; color: var(--text-dim); } .srv-tag { margin-top: auto; align-self: flex-start; font-family: var(--mono); font-size: 14px; font-weight: 600; color: var(--accent); background: var(--accent-soft); border-radius: 999px; padding: 6px 14px; } /* ============ ОБО МНЕ ============ */ .about { padding: 0 0 76px; } .about-in { display: grid; grid-template-columns: .8fr 1.2fr; gap: 56px; align-items: center; } .about-photo img { border-radius: var(--r); box-shadow: 0 24px 48px var(--shadow-med); } .about-txt p + p { margin-top: 14px; } .about-txt h2 { margin-bottom: 18px; } .about-facts { list-style: none; margin-top: 24px; display: grid; gap: 12px; } .about-facts li { padding: 12px 16px; background: var(--surface); border: 1px solid var(--border); border-radius: 10px; font-size: 14.5px; color: var(--text-dim); } .about-facts b { color: var(--text); } /* ============ FAQ ============ */ .faq { padding: 0 0 76px; } .faq-list { display: grid; gap: 10px; max-width: 860px; } .faq-list details { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; } .faq-list summary { list-style: none; cursor: pointer; padding: 18px 22px; font-weight: 600; font-size: 16px; position: relative; padding-right: 52px; } .faq-list summary::-webkit-details-marker { display: none; } .faq-list summary::after { content: '+'; position: absolute; right: 22px; top: 50%; translate: 0 -50%; font-family: var(--mono); font-size: 20px; color: var(--accent); transition: transform .15s ease; } .faq-list details[open] summary::after { transform: rotate(45deg); } .faq-list details p { padding: 0 22px 20px; color: var(--text-dim); max-width: 760px; } /* ============ CTA-ПОЛОСА + ФУТЕР ============ */ .cta-band { background: radial-gradient(800px 400px at 88% 120%, var(--glow), transparent 60%), var(--ink); color: var(--on-ink); } .cta-in { display: grid; grid-template-columns: 1.3fr .7fr; gap: 40px; align-items: center; padding-top: 64px; padding-bottom: 64px; } .cta-in p { margin-top: 14px; color: var(--on-ink-2); max-width: 560px; } .cta-sub { font-size: 14.5px; color: var(--on-ink-3); } .cta-sub a { color: var(--gold); } .contact-list { display: grid; gap: 10px; } .contact-item { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; background: var(--ink-2); border: 1px solid var(--ink-line); border-radius: 12px; padding: 15px 20px; text-decoration: none !important; transition: border-color .15s ease, transform .15s ease; } .contact-item:hover { border-color: var(--gold); transform: translateY(-1px); } .contact-item span { font-family: var(--mono); font-size: 11px; font-weight: 500; text-transform: uppercase; letter-spacing: .12em; color: var(--on-ink-3); } .contact-item b { color: var(--on-ink); font-size: 15.5px; text-align: right; } .contact-item.is-main { border-color: var(--accent); background: var(--accent-soft); } .contact-item.is-main span, .contact-item.is-main b { color: var(--gold); } /* Подвал-карта сайта: колонка бренда + три группы ссылок (Каталог, Разделы, Контакты), снизу — юридическая строка со ссылкой «Наверх». Навигация и контакты разнесены по группам, а не свалены в один ряд. */ .ftr { background: var(--ink); border-top: 1px solid var(--ink-line); color: var(--on-ink-3); } .ftr-in { padding: 46px 24px 26px; display: grid; gap: 30px; } .ftr-cols { display: grid; grid-template-columns: 1.7fr 1fr 1fr 1.1fr; gap: 34px; } .ftr b { color: var(--on-ink); } .ftr-brand .brand-word { font-size: 18px; display: inline-block; } .ftr-brand p { margin-top: 12px; max-width: 34ch; font-size: 14px; line-height: 1.55; color: var(--on-ink-3); } .ftr-col { display: flex; flex-direction: column; gap: 11px; } .ftr-col h3 { font-size: 12px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--on-ink-4); margin-bottom: 2px; } .ftr-col a { color: var(--on-ink-2); font-size: 14.5px; width: fit-content; } .ftr-col a:hover { color: var(--gold); text-decoration: none; } .ftr-fine { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 14px 24px; padding-top: 22px; border-top: 1px solid var(--ink-line); } .ftr-fine p { color: var(--on-ink-4); font-size: 13px; line-height: 1.5; max-width: 78ch; } .ftr-top { color: var(--gold); font-size: 13.5px; font-weight: 600; white-space: nowrap; flex: none; } .ftr-top:hover { text-decoration: none; opacity: .82; } /* --- тост «скопировано» --- */ .toast { position: fixed; left: 50%; bottom: 26px; translate: -50% 0; z-index: 90; background: var(--ink); color: var(--gold); border: 1px solid var(--accent); border-radius: 99px; font-family: var(--mono); font-size: 13px; padding: 11px 20px; box-shadow: 0 14px 34px var(--shadow-hard); opacity: 0; pointer-events: none; transition: opacity .25s ease; } .toast.is-on { opacity: 1; } /* ============ АДАПТИВ ============ */ /* Шапка ≤1024px: горизонтальное меню превращается в оффканвас-панель (drawer), выезжающую справа поверх затемняющего бэкдропа — все разделы плюс каналы связи доступны из панели. Кнопка закрытия, бэкдроп и контакты добавляются в панель клиентом (site/components.js). */ /* Услуги/Контакты — якоря на главной: в горизонтальном меню скрыты (не влезают рядом с телефоном и MAX), но видны в панели на узких экранах. */ .nav-extra { display: none; } /* Дополнения панели видны только в drawer-режиме (ниже) */ .nav-close, .nav-actions { display: none; } .nav-backdrop { position: fixed; inset: 0; z-index: 1; background: var(--scrim); backdrop-filter: blur(2px); opacity: 0; visibility: hidden; transition: opacity .28s ease, visibility 0s linear .28s; } .nav-backdrop.is-on { opacity: 1; visibility: visible; transition: opacity .28s ease; } body.nav-lock { overflow: hidden; } /* Узкий десктоп и мобайл: поиск и связь остаются в шапке всегда, но сжимаются до иконок (подпись прячется), чтобы 8 разделов помещались горизонтально до порога бургера, а на телефоне влезли три контрола + бренд. */ @media (max-width: 1200px) { .hdr-btn-txt { display: none; } .hdr-search, .hdr-contacts { width: 42px; height: 42px; padding: 0; gap: 0; justify-content: center; } } @media (max-width: 1024px) { /* Панель уезжает за правый край (translateX 100%) — гасим возникающий горизонтальный скролл. clip не создаёт скролл-контейнер, поэтому липкая шапка продолжает работать. */ html { overflow-x: clip; } /* .nav ушла в оффканвас (position:fixed, вне потока), поэтому её margin-left:auto, прижимавший контролы вправо на десктопе, больше не работает — прижимаем группу контролов к правому жёлобу сами: бренд слева, поиск/«Написать»/бургер справа, без паразитной пустоты у края. */ .hdr-cta { margin-left: auto; } .nav-toggle { display: grid; } .nav { position: fixed; top: 0; right: 0; z-index: 2; height: 100dvh; width: min(360px, 82vw); display: flex; flex-direction: column; gap: 0; margin: 0; padding: 64px 0 20px; background: var(--ink); border-left: 1px solid var(--ink-line); box-shadow: -20px 0 50px var(--shadow-hard); overflow-y: auto; overscroll-behavior: contain; transform: translateX(100%); visibility: hidden; transition: transform .28s cubic-bezier(.4, 0, .2, 1), visibility 0s linear .28s; } .hdr.nav-open .nav { transform: translateX(0); visibility: visible; transition: transform .28s cubic-bezier(.4, 0, .2, 1); } .nav a { padding: 14px 24px; font-size: 16px; color: var(--on-ink-2); border-bottom: 1px solid var(--ink-tint); } .nav a:hover { background: var(--ink-tint); } .nav-extra { display: block; } .nav-close { position: absolute; top: 12px; right: 14px; z-index: 1; display: grid; place-items: center; width: 40px; height: 40px; padding: 0; font-size: 26px; line-height: 1; cursor: pointer; background: transparent; color: var(--on-ink); border: 1px solid var(--ink-line); border-radius: 9px; } .nav-close:hover { color: var(--gold); border-color: var(--gold); } .nav-actions { display: flex; flex-direction: column; gap: 10px; margin-top: auto; padding: 18px 20px 4px; } .nav-act { display: flex; align-items: center; justify-content: center; padding: 13px 16px; border-radius: 11px; font-weight: 600; font-size: 15px; white-space: nowrap; } .nav-act:hover { text-decoration: none; transform: translateY(-1px); } .nav-act-call { color: var(--on-ink); border: 1.5px solid var(--ink-line); background: var(--ink-tint); } .nav-act-call:hover { border-color: var(--gold); color: var(--gold); } .nav-act-wa { background: var(--wa); color: var(--on-brand); } .nav-act-tg { background: var(--tg); color: var(--on-brand); } .nav-act-max { background: var(--accent); color: var(--on-accent); box-shadow: 0 6px 18px var(--accent-shadow); } /* Тема на узких экранах — строка в панели, а не четвёртая иконка в шапке */ .hdr .theme-toggle { display: none; } /* Связь на узких экранах — не отдельная иконка в шапке, а каналы в нижнем блоке оффканвас-панели (nav-actions, тот же единый источник). Иначе бренд + 4 иконки (поиск, избранное, связь, бургер) не влезают в узкий телефон и бургер вылезает за правый жёлоб. В шапке остаются поиск + избранное + бургер; кнопка связи остаётся в разметке (видима на десктопе). */ .hdr-contacts { display: none; } .nav-theme { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; padding: 12px 16px; border-radius: 11px; cursor: pointer; font: inherit; font-size: 15px; font-weight: 600; color: var(--on-ink); background: transparent; border: 1.5px solid var(--ink-line); } .nav-theme:hover { border-color: var(--gold); color: var(--gold); } .nav-theme i { font-style: normal; font-family: var(--mono); font-size: 12.5px; font-weight: 500; color: var(--on-ink-3); } } @media (max-width: 1024px) { .cards { grid-template-columns: repeat(2, 1fr); } .srv-free { grid-template-columns: minmax(0, 1fr); gap: 30px; padding: 34px; } .hero-in { grid-template-columns: minmax(0, 1fr); gap: 40px; } .hero-photo { justify-self: start; } } @media (max-width: 760px) { .cards { grid-template-columns: minmax(0, 1fr); } .srv-free { padding: 26px 22px; gap: 26px; } .srv-grid { grid-template-columns: minmax(0, 1fr); } .quiz-form { grid-template-columns: minmax(0, 1fr); } .calc-in, .about-in, .cta-in { grid-template-columns: minmax(0, 1fr); gap: 36px; } .hero-in > *, .calc-in > *, .about-in > *, .cta-in > *, .quiz-form > * { min-width: 0; } .brand-word { font-size: 16px; } .trust { grid-template-columns: repeat(2, 1fr); gap: 18px 10px; } /* На телефоне в шапке три контрола-иконки: поиск, избранное и бургер — важные сущности (поиск / избранное / навигация) в один тап; связь ушла в оффканвас-панель (.hdr-contacts скрыт), чтобы шапка не переполнялась. */ .hdr-in { gap: 10px; } .hdr-cta { gap: 7px; } .f-count { margin-left: 0; } .cat-all .btn-dark { width: 100%; } .about-photo { max-width: 420px; } /* --- мобильный вертикальный ритм --- Крупные десктопные межсекционные паддинги (72–76px) сжаты до ровного ~48–52px, чтобы страница листалась цельно, без зияющих провалов между блоками. Внутренние отступы блоков подтянуты под тот же масштаб. */ .hero-in { padding-top: 48px; padding-bottom: 48px; } .trust { margin-top: 30px; padding-top: 22px; } .catalog { padding: 48px 0 44px; } .calc-in { padding-top: 52px; padding-bottom: 52px; } .quiz { padding: 52px 0; } .services { padding: 0 0 52px; } .about { padding: 0 0 52px; } .faq { padding: 0 0 52px; } .cta-in { padding-top: 48px; padding-bottom: 48px; } .sec-head { margin-bottom: 24px; } .calc-form { padding: 22px; } } /* Очень узкий телефон (≤400px, напр. 360px): чуть поджимаем вордмарк и зазоры шапки, чтобы бренд + три иконки (поиск, избранное, бургер) помещались с симметричным жёлобом 24px и без горизонтального скролла. */ @media (max-width: 400px) { .brand-word { font-size: 15px; } .hdr-in { gap: 8px; } .hdr-cta { gap: 6px; } } /* Подвал: на планшете колонки в 2 ряда, бренд занимает всю ширину. */ @media (max-width: 900px) { .ftr-cols { grid-template-columns: 1fr 1fr; gap: 30px 26px; } .ftr-brand { grid-column: 1 / -1; } .ftr-brand p { max-width: 52ch; } } /* Телефон: подвал в один столбец, юридическая строка переносит «Наверх». */ @media (max-width: 560px) { .ftr-in { padding: 36px 24px 24px; gap: 26px; } .ftr-cols { grid-template-columns: 1fr; gap: 26px; } } /* Очень узкие экраны: кнопки героя — на всю ширину, одинаковой высоты, столбиком: крупная зона тапа, ряд не «рваный». */ @media (max-width: 420px) { .hero-search { align-self: stretch; max-width: none; } } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { transition: none !important; animation: none !important; } } /* --- страницы ЖК и квартиры (генерируются build-pages.py / kvartira.html) --- */ .zhk-main { padding-top: 34px; padding-bottom: 70px; } .crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-family: var(--mono); font-size: 12.5px; margin-bottom: 18px; } .crumbs a { color: var(--text-dim); } .crumbs a:hover { color: var(--accent); text-decoration: none; } .crumbs span { color: var(--text-faint); } .crumbs b { color: var(--text); font-weight: 500; } .zhk-main h1, .flat-main h1 { font-family: var(--disp); font-weight: 600; font-size: clamp(26px, 4vw, 40px); line-height: 1.15; } .zhk-sub { margin-top: 8px; color: var(--text-dim); } .zhk-gallery { display: flex; gap: 12px; overflow-x: auto; margin: 22px 0 6px; scroll-snap-type: x mandatory; padding-bottom: 6px; } .zhk-gallery img { /* width: auto ждала загрузки фото и дёргала полосу — ширину задаёт пропорция */ flex: none; height: 280px; width: auto; aspect-ratio: 3 / 2; object-fit: cover; border-radius: var(--r); cursor: zoom-in; border: 1px solid var(--border); scroll-snap-align: start; background: var(--ink-2); } /* Полноэкранный просмотр фото ЖК (lightbox) — тёмный оверлей поверх всего, кадр целиком по центру, управление и счётчик на ink-токенах (тёмная полоса в обеих темах). Прогрессивная надстройка над статичной .zhk-gallery. */ .lbox { position: fixed; inset: 0; z-index: 95; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 10px; padding: 16px; background: var(--ink); } .lbox[hidden] { display: none; } .lbox-stage { grid-column: 2; min-width: 0; height: 100%; display: flex; align-items: center; justify-content: center; } .lbox-img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; border-radius: var(--r); } .lbox-close, .lbox-nav { flex: none; cursor: pointer; line-height: 1; color: var(--on-ink); background: var(--ink-tint); border: 1px solid var(--ink-hair); border-radius: 99px; } .lbox-close:hover, .lbox-nav:hover { color: var(--on-ink); background: var(--ink-tint-2); border-color: var(--ink-hair-2); } .lbox-nav { width: 52px; height: 52px; font-size: 30px; } .lbox-prev { grid-column: 1; } .lbox-next { grid-column: 3; } .lbox-close { position: absolute; top: 16px; right: 16px; z-index: 1; width: 44px; height: 44px; font-size: 25px; } .lbox-count { position: absolute; left: 50%; bottom: 18px; translate: -50% 0; color: var(--on-ink-2); font: 500 14px/1 var(--mono); letter-spacing: .04em; background: var(--ink-tint); border: 1px solid var(--ink-hair); padding: 8px 15px; border-radius: 99px; } @media (max-width: 640px) { .lbox { padding: 8px; gap: 6px; } .lbox-nav { width: 42px; height: 42px; font-size: 26px; } .lbox-close { top: 10px; right: 10px; } } .zhk-cols { display: grid; grid-template-columns: 1fr 1.2fr; gap: 28px; margin-top: 22px; align-items: start; } .zhk-facts { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r); padding: 8px 18px; } .zhk-facts div { display: flex; justify-content: space-between; gap: 16px; padding: 9px 0; border-bottom: 1px solid var(--border); font-size: 14.5px; } .zhk-facts div:last-child { border-bottom: 0; } .zhk-facts dt { color: var(--text-dim); } .zhk-facts dd { text-align: right; font-weight: 600; } .zhk-offers { border-top: 0; margin-top: 0; } .zhk-about { margin-top: 26px; max-width: 760px; } .zhk-about p { margin-top: 12px; line-height: 1.7; color: var(--text); } .zhk-pay { margin-top: 26px; } .zhk-about h2, .zhk-pay h2, .zhk-flats h2 { font-family: var(--disp); font-weight: 600; font-size: 20px; margin-bottom: 14px; } .zhk-pay-chips { display: flex; flex-wrap: wrap; gap: 8px; } .zhk-pay-chip { font-size: 13px; padding: 6px 12px; border: 1px solid var(--border); border-radius: 99px; background: var(--surface); color: var(--text); } a.zhk-pay-chip { text-decoration: none; transition: border-color .15s, color .15s; } a.zhk-pay-chip:hover { border-color: var(--accent); color: var(--accent); } .dev-districts { margin-top: 30px; } .dev-districts h2 { margin-bottom: 14px; } .zhk-cta { margin-top: 30px; background: var(--ink); color: var(--on-ink); border-radius: var(--r); padding: 24px; display: flex; align-items: center; gap: 16px; flex-wrap: wrap; } .zhk-cta p { flex: 1 1 320px; } .zhk-flats { margin-top: 36px; } .zhk-flats .apt { max-width: 680px; } /* страница квартиры */ .flat-main { padding-top: 34px; padding-bottom: 70px; max-width: 860px; } .flat-box { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 28px; margin-top: 22px; align-items: start; } .flat-plan { background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r); padding: 12px; } .flat-plan img { width: 100%; object-fit: contain; max-height: 420px; } .flat-price { font-family: var(--disp); font-size: 26px; color: var(--accent-strong); font-weight: 600; } .flat-psm { color: var(--text-dim); font-size: 14px; margin-top: 2px; } .flat-facts { margin-top: 16px; } .flat-pay { margin-top: 18px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; } .flat-pay-t { font-family: var(--mono); font-size: 11.5px; font-weight: 500; text-transform: uppercase; letter-spacing: .09em; color: var(--text-dim); width: 100%; } .flat-pay-all { font-size: 13.5px; } .flat-cta { margin-top: 22px; display: flex; gap: 12px; flex-wrap: wrap; } .flat-note { margin-top: 14px; font-size: 13.5px; color: var(--text-dim); } .flat-badge { display: inline-block; margin-bottom: 10px; font-family: var(--mono); font-size: 11.5px; text-transform: uppercase; letter-spacing: .08em; padding: 5px 10px; border-radius: 99px; background: var(--ink); color: var(--gold); } .flat-badge.b-warn { color: var(--clay-txt); } /* ============ КОМПОНЕНТ: КАРТОЧКА КОРПУСА ============ */ .zhk-houses { margin-top: 36px; } .zhk-houses h2, .korpus-stats h2 { font-family: var(--disp); font-weight: 600; font-size: 20px; margin-bottom: 14px; } .houses { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-bottom: 18px; } .house-card { display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r); overflow: hidden; color: var(--text); text-decoration: none !important; transition: transform .18s ease, box-shadow .18s ease; } .house-card:hover { transform: translateY(-3px); box-shadow: 0 18px 36px var(--shadow-soft); } .house-photo { position: relative; display: block; aspect-ratio: 16 / 9; background: var(--ink-2); overflow: hidden; } .house-photo img { width: 100%; height: 100%; object-fit: cover; } .house-nophoto { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; text-align: center; font-family: var(--mono); font-size: 11px; color: var(--on-ink-3); } .house-body { padding: 14px 16px 15px; display: flex; flex-direction: column; gap: 5px; flex: 1; } .house-name { font-weight: 600; font-size: 15px; line-height: 1.3; } .house-meta { font-family: var(--mono); font-size: 12px; color: var(--text-dim); } .house-foot { display: flex; align-items: baseline; gap: 10px; margin-top: auto; padding-top: 6px; font-size: 12.5px; color: var(--text-dim); } .house-price { font-family: var(--disp); font-size: 14.5px; font-weight: 600; color: var(--accent); } .house-arrow { margin-left: auto; color: var(--accent); transition: transform .15s ease; } .house-card:hover .house-arrow { transform: translateX(3px); } /* ============ КОМПОНЕНТ: РАЙОНЫ И МИКРОРАЙОНЫ ============ */ .areas { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 24px; } .area-card { display: flex; flex-direction: column; gap: 6px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r); padding: 18px 20px; color: var(--text); text-decoration: none !important; transition: transform .18s ease, box-shadow .18s ease; } .area-card:hover { transform: translateY(-3px); box-shadow: 0 18px 36px var(--shadow-soft); } .area-card:hover .house-arrow { transform: translateX(3px); } .area-name { font-family: var(--disp); font-size: 17px; font-weight: 600; line-height: 1.3; } .area-meta { font-family: var(--mono); font-size: 12px; color: var(--text-dim); } .area-foot { display: flex; align-items: baseline; gap: 10px; margin-top: auto; padding-top: 8px; font-size: 12.5px; color: var(--text-dim); } .area-live { margin-top: 14px; font-size: 15px; } .area-live b { color: var(--accent-strong); } .area-all { margin-top: 16px; } .area-micro { margin-top: 32px; } .area-micro h2 { font-family: var(--disp); font-weight: 600; font-size: 20px; margin-bottom: 14px; } .area-links { display: flex; flex-wrap: wrap; gap: 8px; } .area-links a { font-family: var(--mono); font-size: 12.5px; font-weight: 500; padding: 8px 14px; border: 1.5px solid var(--border); border-radius: 99px; color: var(--text); text-decoration: none; } .area-links a:hover { border-color: var(--accent); color: var(--accent); } /* ============ КОМПОНЕНТ: ЗАСТРОЙЩИКИ ============ */ .dev-card-logo { display: flex; align-items: center; min-height: 52px; margin-bottom: 4px; } .dev-logo { /* Логотип приходит из API без размеров: фиксированная площадка резервирует место, иначе поздняя картинка сдвигает весь блок фактов (CLS 0.18). */ height: 48px; width: 150px; object-fit: contain; background: var(--surface-2); border: 1px solid var(--border); border-radius: 10px; padding: 4px 8px; } .dev-mono { display: inline-flex; align-items: center; justify-content: center; width: 46px; height: 46px; border-radius: 50%; flex: none; background: var(--accent); color: var(--on-accent); font-family: var(--disp); font-size: 20px; font-weight: 600; } .dev-hero { display: flex; align-items: center; gap: 18px; margin-top: 10px; } .dev-hero .dev-logo { height: 76px; width: 210px; } .dev-hero .dev-mono { width: 68px; height: 68px; font-size: 30px; } .dev-hero .zhk-sub { margin-top: 4px; } .section-main .zhk-facts { margin-top: 24px; max-width: 560px; } /* ============ КОМПОНЕНТ: ИПОТЕКА ============ */ .mort-kind { margin-top: 34px; } .mort-kind h2, .mort-banks h2 { font-family: var(--disp); font-weight: 600; font-size: 20px; margin-bottom: 14px; } .mort-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 18px; } .mort-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r); padding: 20px 22px; display: flex; flex-direction: column; gap: 8px; } .mort-card h3 { font-family: var(--disp); font-size: 17px; font-weight: 600; } .mort-rate { font-family: var(--disp); font-size: 26px; font-weight: 600; color: var(--accent-strong); } .mort-rate-txt { font-size: 18px; color: var(--text); } .mort-note { font-size: 13.5px; color: var(--text-dim); } .mort-facts { font-family: var(--mono); font-size: 12.5px; color: var(--text); } .mort-descr { font-size: 14px; color: var(--text-dim); } .mort-banks-row { margin-top: 4px; } .mort-more { margin-top: auto; padding-top: 6px; font-size: 14px; } .mort-banks { margin-top: 40px; } .mort-banks-note { margin-top: 18px; font-size: 13.5px; color: var(--text-dim); max-width: 720px; } .bank-card { cursor: default; } .bank-card:hover { transform: none; box-shadow: none; } .bank-card[hidden] { display: none; } /* Строка-ориентир по рынку: цифры из обзора ДОМ.РФ, всегда с датой. */ .mort-market { margin-top: 14px; padding: 14px 18px; max-width: 760px; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r); font-size: 14.5px; color: var(--text); } .mort-market b { font-family: var(--disp); font-size: 17px; color: var(--accent-strong); } .mort-market-src { display: block; margin-top: 4px; font-size: 12.5px; color: var(--text-dim); } /* Поиск банка над сеткой карточек. */ .bank-search { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 4px; } .bank-q { flex: 1 1 320px; max-width: 420px; padding: 11px 16px; font: inherit; font-size: 15px; color: var(--text); background: var(--surface); border: 1.5px solid var(--border); border-radius: 99px; } .bank-q:focus { outline: 2px solid var(--focus); outline-offset: 2px; border-color: var(--accent); } .bank-count { font-family: var(--mono); font-size: 12.5px; color: var(--text-dim); } .bank-empty { margin-top: 18px; font-size: 14.5px; color: var(--text-dim); } /* Ставка банка: число + квалификатор источника, дата и ссылка на выпуск. */ .bank-rate { display: flex; flex-direction: column; gap: 2px; margin-top: 2px; } .bank-rate b { font-family: var(--disp); font-size: 22px; font-weight: 600; color: var(--accent-strong); } .bank-rate-src { font-size: 11.5px; color: var(--text-dim); } .bank-rate-src a { color: inherit; } .bank-rate-none { font-size: 14px; color: var(--text-dim); } .bank-progs { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; } .bank-prog { font-family: var(--mono); font-size: 11.5px; color: var(--text); padding: 5px 10px; background: var(--surface-2); border: 1px solid var(--border); border-radius: 99px; } .bank-prog b { color: var(--accent-strong); } .bank-prog i { font-style: normal; color: var(--text-dim); } /* «Ипотека и оплата» — baked-блок на страницах ЖК и дома (scripts/components.py: mortgage_pay_section). Чипы — .zhk-pay-chip. */ .zhk-mort-lead { margin-top: 12px; font-size: 14px; color: var(--text); max-width: 640px; } .zhk-mort-dev { margin-top: 12px; font-size: 14px; color: var(--text); max-width: 640px; padding: 12px 16px; border-radius: 12px; border: 1px solid var(--border); background: var(--surface); } .zhk-mort-dev b { color: var(--accent-strong); } /* ============ КОМПОНЕНТ: ПАСПОРТНЫЕ ПЛИТКИ СВОДКИ ============ */ .korpus-stats { margin-top: 36px; } .stat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 12px; } .stat { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 14px 16px; display: grid; gap: 4px; align-content: start; } .stat > span { font-size: 12.5px; color: var(--text-dim); } .stat > .stat-k { font-family: var(--mono); font-size: 11.5px; font-weight: 500; text-transform: uppercase; letter-spacing: .09em; } .stat > b { font-family: var(--disp); font-size: 16px; font-weight: 600; color: var(--accent-strong); } .stat-extra { margin-top: 12px; font-size: 13px; color: var(--text-dim); } /* Фото корпуса приходит из API без размеров — место резервирует пропорция, иначе поздняя картинка сдвигает всю колонку фактов (CLS 0.25). */ .korpus-photo { aspect-ratio: 3 / 2; overflow: hidden; border-radius: var(--r); border: 1px solid var(--border); background: var(--ink-2); } .korpus-photo img { width: 100%; height: 100%; object-fit: cover; display: block; } /* ============ КОМПОНЕНТ: ПОИСК ПО САЙТУ ============ */ .hdr-search { display: inline-flex; align-items: center; gap: 7px; font-family: var(--body); font-size: 14px; font-weight: 500; color: var(--on-ink-2); background: var(--ink-tint); border: 1px solid var(--ink-line); border-radius: 9px; padding: 7px 13px; cursor: pointer; transition: color .15s ease, border-color .15s ease; } .hdr-search:hover { color: var(--gold); border-color: var(--gold); } .hdr-search svg { flex: none; } /* ============ ПОПОВЕР СВЯЗИ (шапка, [data-contacts]) ============ */ .ch-pop-backdrop { position: fixed; inset: 0; z-index: 59; background: transparent; opacity: 0; visibility: hidden; } .ch-pop-backdrop.is-on { opacity: 1; visibility: visible; } .ch-pop { position: fixed; z-index: 60; width: min(300px, calc(100vw - 24px)); background: var(--ink); border: 1px solid var(--ink-line); border-radius: 14px; box-shadow: 0 24px 60px -12px var(--shadow-hard); padding: 12px; transform-origin: top right; animation: chPop .16s ease; } @keyframes chPop { from { opacity: 0; transform: translateY(-6px); } } .ch-pop-hint { margin: 4px 6px 10px; font-size: 12.5px; line-height: 1.4; color: var(--on-ink-3); } .ch-list { display: flex; flex-direction: column; gap: 6px; } .ch { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 10px; background: var(--ink-tint); border: 1px solid transparent; transition: background .15s ease, border-color .15s ease; } .ch:hover { text-decoration: none; background: var(--ink-tint-2); border-color: var(--ink-line); } .ch-ic { flex: none; width: 34px; height: 34px; display: grid; place-items: center; border-radius: 9px; } .ch-ic svg { width: 18px; height: 18px; } .ch-txt { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; } .ch-txt b { color: var(--on-ink); font-size: 14.5px; font-weight: 600; } .ch-txt i { font-style: normal; font-size: 11.5px; color: var(--on-ink-3); } .ch-call .ch-ic { background: var(--ink-tint-2); color: var(--on-ink); } .ch-max .ch-ic { background: var(--accent); color: var(--on-accent); } .ch-wa .ch-ic { background: var(--wa); color: var(--on-brand); } .ch-tg .ch-ic { background: var(--tg); color: var(--on-brand); } @media (prefers-reduced-motion: reduce) { .ch-pop { animation: none; } } /* ============ полноэкранный поисковый модуль (шапка, [data-search]) ============ Оверлей на весь экран: строка запроса вверху и тело результатов ниже, оба ограничены по ширине контента; результаты — две колонки (квартиры / ЖК). */ .smodal { padding: 0; align-items: stretch; background: var(--scrim); } .smodal .fmodal-box { max-width: none; width: 100%; height: 100%; max-height: 100%; border-radius: 0; box-shadow: none; background: var(--bg); } .smodal-head { padding: 14px 24px; } .smodal-bar { max-width: 1100px; margin: 0 auto; width: 100%; display: flex; align-items: center; gap: 12px; } .smodal-ic { flex: none; width: 22px; height: 22px; color: var(--text-dim); } .smodal-input { flex: 1; min-width: 0; font: inherit; font-size: 17px; color: var(--text); background: var(--surface); border: 1.5px solid var(--border); border-radius: 12px; padding: 12px 16px; } .smodal-input:focus { outline: none; border-color: var(--accent); } .smodal-body { padding: 24px; } .smodal-inner { max-width: 1100px; margin: 0 auto; width: 100%; } .smodal-hint { margin: 14px 0 8px; font-size: 13px; color: var(--text-dim); } .smodal-links { display: flex; flex-wrap: wrap; gap: 8px; } .smodal-links a { font-family: var(--mono); font-size: 12.5px; font-weight: 500; padding: 8px 14px; border: 1.5px solid var(--border); border-radius: 99px; color: var(--text); text-decoration: none; } .smodal-links a:hover { border-color: var(--accent); color: var(--accent); } .sres { display: flex; align-items: center; gap: 14px; padding: 10px 0; border-bottom: 1px dashed var(--border); color: var(--text); text-decoration: none !important; } .sres img, .sres-noimg { flex: none; width: 76px; height: 57px; object-fit: cover; border-radius: 8px; border: 1px solid var(--border); background: var(--ink-2); } .sres-noimg { display: grid; place-items: center; font-family: var(--mono); font-size: 11px; color: var(--on-ink-3); } .sres-info { display: grid; gap: 2px; min-width: 0; font-size: 13px; } .sres-info b { font-size: 14.5px; line-height: 1.3; } .sres:hover .sres-info b { color: var(--accent); } .sres-info > span { color: var(--text-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .sres-price { font-family: var(--mono); color: var(--accent-strong); } .sres .house-arrow { margin-left: auto; } .sres:hover .house-arrow { transform: translateX(3px); } /* умный разбор запроса: строка распознанного + акцентная кнопка на /kvartiry */ .ssearch-smart { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; padding: 14px 18px; margin: 0 0 24px; border: 1.5px solid var(--accent); border-radius: 14px; background: var(--surface); } .ssearch-smart-txt { flex: 1; min-width: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; } .ssearch-smart-lead { font-size: 13px; color: var(--text-dim); } .ssearch-chip { font-family: var(--mono); font-size: 12.5px; padding: 5px 11px; border-radius: 99px; background: var(--bg-soft); border: 1px solid var(--border); } .ssearch-go { flex: none; } /* узкий экран: строка распознанного и кнопка встают в столбик, кнопка на всю ширину — иначе nowrap-кнопка налезает на чипы */ @media (max-width: 640px) { .ssearch-smart { flex-direction: column; align-items: stretch; } .ssearch-go { width: 100%; } } /* результаты модуля: две колонки (квартиры / ЖК), на мобиле — стопкой */ .ssearch-cols { display: grid; gap: 30px; grid-template-columns: 1fr; } @media (min-width: 900px) { .ssearch-cols { grid-template-columns: minmax(0, 1fr) 340px; align-items: start; } .ssearch-cols-1 { grid-template-columns: 1fr; } } .ssearch-h { font-family: var(--disp); font-size: 15px; font-weight: 600; margin: 0 0 14px; display: flex; align-items: baseline; gap: 8px; } .ssearch-h small { font-family: var(--mono); font-size: 12px; color: var(--text-dim); } .ssearch-flats-grid { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); } .ssearch-flats-grid .apt { border: 1px solid var(--border); border-bottom-style: solid; border-radius: var(--r); background: var(--surface); padding: 14px; } .ssearch-flats-grid .apt-noplan { background: var(--bg-soft); } .ssearch-zhk .sres:first-of-type { padding-top: 0; } /* ============ РАЗДЕЛЫ /zhk/ /korpus/ /kvartiry ============ */ .section-main .listbar { margin: 22px 0 26px; } .section-main .houses, .section-main .cards { margin-bottom: 0; } .apt-zhk { font-size: 13px; font-weight: 600; } /* /kvartiry: адаптивная сетка карточек (модалка и страницы ЖК/корпусов остаются списком — карточка та же, раскладка контейнера другая) */ .q-flats #q-list, .q-flats #flats-list { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); } .q-flats .apt { border: 1px solid var(--border); border-bottom-style: solid; border-radius: var(--r); background: var(--surface); padding: 14px; transition: border-color .12s ease, box-shadow .12s ease; } .q-flats .apt:hover { border-color: var(--accent); box-shadow: 0 4px 18px var(--accent-ring); } .q-flats .apt-noplan { background: var(--bg-soft); } .q-flats .fmodal-note, .q-flats .fmodal-err { grid-column: 1 / -1; } .q-more-row { margin-top: 22px; } /* ============ /kvartiry: удобный поиск квартир (лидер-грейд фильтр) ============ Иерархия как у лидеров: частое видно в первичной строке, редкое — за одной кнопкой «Все фильтры»; счётчик и сортировка — в тулбаре над списком. */ .kvartiry-page .qf { position: static; } /* Карточка фильтра */ .qf { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r); box-shadow: 0 14px 34px var(--shadow-soft); padding: 18px; display: grid; gap: 14px; margin-bottom: 20px; } /* Строка «поиск словами» во главе фильтра — parse сам заполняет контролы */ .q-smart { display: flex; align-items: center; gap: 10px; background: var(--bg-soft); border: 1.5px solid var(--border); border-radius: 12px; padding: 0 14px; transition: border-color .15s ease, box-shadow .15s ease; } .q-smart:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-ring); } .q-smart-ic { color: var(--accent); flex: none; } #q-nl { flex: 1; min-width: 0; font: inherit; font-size: 15px; color: var(--text); background: none; border: 0; padding: 13px 0; outline: none; } #q-nl::placeholder { color: var(--text-dim); } .q-nl-hint { margin: 0 2px; font-size: 12.5px; line-height: 1.45; color: var(--text-dim); } /* Поиск по названию в первичной строке (профили ЖК и домов) — та же оправа, что у «поиска словами», но в одну строку с остальными контролами. */ .qf-find { display: flex; align-items: center; gap: 8px; flex: 1 1 200px; min-width: 180px; max-width: 300px; align-self: end; background: var(--bg-soft); border: 1.5px solid var(--border); border-radius: 10px; height: 44px; padding: 0 12px; transition: border-color .15s ease, box-shadow .15s ease; } .qf-find:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-ring); } .qf-find-ic { color: var(--accent); flex: none; } .qf-find .f-search { flex: 1; min-width: 0; width: auto; font: inherit; font-size: 14px; color: var(--text); background: none; border: 0; padding: 0; height: auto; outline: none; } /* Капшен-подпись поля (единый вид: селект, пара цены, сегмент) */ .qf-cap { display: block; font-family: var(--mono); font-size: 11.5px; font-weight: 500; letter-spacing: .02em; color: var(--text-dim); margin-bottom: 6px; } /* Первичная строка — только частое */ .qf-bar { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px 14px; } .qf .f-select { flex: 0 1 200px; flex-direction: column; align-items: stretch; gap: 6px; font-family: var(--mono); font-size: 11.5px; font-weight: 500; letter-spacing: .02em; color: var(--text-dim); } .qf .f-select select { width: 100%; } .qf .f-pair { display: grid; grid-template-columns: auto auto auto auto; justify-content: start; align-items: center; gap: 6px; font-family: var(--mono); font-size: 11.5px; font-weight: 500; letter-spacing: .02em; color: var(--text-dim); } .qf .f-pair > span:first-child { grid-column: 1 / -1; margin-bottom: 0; } .qf .f-pair input[type="number"] { width: 92px; } .qf .f-pair i { font-family: var(--body); font-style: normal; font-size: 12px; color: var(--text-dim); white-space: nowrap; } .f-dash { color: var(--border-strong); } /* Кастомные селекты и числовые поля компонента фильтра — не голый системный вид. Скоуп по классам компонента (`.q-filters`, `.q-toolbar`), а не по странице, чтобы фильтр выглядел одинаково на /kvartiry, ЖК и доме. */ .q-filters select, .q-toolbar select, .q-filters input[type="number"] { font-family: var(--body); font-size: 14px; color: var(--text); background: var(--bg-soft); border: 1.5px solid var(--border); border-radius: 10px; height: 44px; padding: 0 12px; transition: border-color .12s ease, box-shadow .12s ease; } .q-filters select, .q-toolbar select { -webkit-appearance: none; appearance: none; cursor: pointer; padding-right: 34px; background-image: var(--select-arrow); background-repeat: no-repeat; background-position: right 11px center; max-width: 240px; } .q-filters select:hover, .q-toolbar select:hover, .q-filters input[type="number"]:hover { border-color: var(--accent); } .q-filters select:focus, .q-toolbar select:focus, .q-filters input[type="number"]:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-ring); } /* Сегмент-контрол комнатности */ .qf-seg-wrap { display: flex; flex-direction: column; } .qf-seg { display: inline-flex; background: var(--bg-soft); border: 1.5px solid var(--border); border-radius: 11px; padding: 3px; gap: 2px; } .qf-seg .seg-btn { font-family: var(--mono); font-size: 13px; font-weight: 500; padding: 0 14px; height: 38px; border: 0; border-radius: 8px; background: transparent; color: var(--text-dim); cursor: pointer; white-space: nowrap; transition: all .12s ease; } .qf-seg .seg-btn:hover { color: var(--accent); } .qf-seg .seg-btn.is-on { background: var(--surface); color: var(--accent-strong); font-weight: 600; box-shadow: 0 1px 3px var(--shadow-med); } /* Кнопка «Все фильтры» + бейдж */ .qf-adv-btn { display: inline-flex; align-items: center; gap: 8px; height: 44px; margin-left: auto; padding: 0 16px; border: 1.5px solid var(--border); border-radius: 10px; background: var(--surface); color: var(--text); font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; transition: all .12s ease; } .qf-adv-btn svg { color: var(--accent); } .qf-adv-btn:hover { border-color: var(--accent); color: var(--accent-strong); } .qf-adv-btn[aria-expanded="true"] { border-color: var(--accent); color: var(--accent-strong); background: var(--bg-soft); } .qf-adv-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 99px; background: var(--accent); color: var(--on-accent); font-family: var(--mono); font-size: 11px; font-weight: 600; } /* Панель «Все фильтры» — группы с подзаголовками */ .qf-adv { border-top: 1px solid var(--border); padding-top: 16px; display: grid; gap: 18px; } .qf-grp { display: grid; gap: 10px; } .qf-grp-cap { font-family: var(--mono); font-size: 11.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .08em; color: var(--accent); } .qf-adv .f-row { margin: 0; gap: 12px 14px; } .qf-adv .f-select { flex: 0 1 200px; min-width: 180px; } .qf-adv-foot { padding-top: 2px; } /* Чекбоксы «рядом и особенности» */ .f-checks { gap: 10px 20px; } .f-check { display: inline-flex; align-items: center; gap: 8px; font-size: 13.5px; color: var(--text); cursor: pointer; } .f-check input { accent-color: var(--accent); width: 16px; height: 16px; } /* Тулбар результатов: счётчик + сортировка над списком */ .q-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin: 0 0 18px; } .q-toolbar .f-count { margin: 0; font-family: var(--mono); font-size: 13px; font-weight: 600; color: var(--text); } .q-toolbar .f-select { gap: 8px; font-size: 12.5px; color: var(--text-dim); white-space: nowrap; } /* Адаптив: поля во всю ширину, сегмент растянут */ @media (max-width: 700px) { .qf { padding: 15px; } .qf-seg-wrap, .qf-bar .f-select, .qf-bar .f-pair, .qf-adv-btn { width: 100%; flex: none; max-width: none; } .qf-seg { width: 100%; } .qf-seg .seg-btn { flex: 1; padding: 0 4px; text-align: center; } .qf-adv-btn { margin-left: 0; justify-content: center; } .qf-adv .f-select { flex: none; width: 100%; min-width: 0; } .q-filters select, .q-toolbar select { max-width: none; } .qf .f-pair { grid-template-columns: 1fr auto 1fr auto; max-width: 340px; } .qf .f-pair input[type="number"] { width: 100%; min-width: 0; } } /* /kvartiry: чипы активных фильтров (клик по чипу снимает фильтр) */ .f-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: -4px 0 18px; } .fchip { display: inline-flex; align-items: center; gap: 7px; font-family: var(--mono); font-size: 12.5px; font-weight: 500; padding: 6px 12px; border-radius: 99px; cursor: pointer; border: 1.5px solid var(--accent); background: var(--bg-soft); color: var(--accent-strong); transition: all .12s ease; } .fchip:hover { background: var(--ink); border-color: var(--ink); color: var(--gold); } .fchip-x { font-size: 14px; line-height: 1; } /* ============ ГЛАВНАЯ: ПОДБОРКИ ============ */ .collections { padding: 0 0 76px; } .collections .areas { margin-top: 28px; } .collections-all { font-weight: 600; } /* ============ КОМПОНЕНТ: КАРТА КОРПУСОВ ============ */ .mapsec { padding: 0 0 76px; } .map { position: relative; isolation: isolate; z-index: 0; height: 480px; border-radius: var(--r); border: 1px solid var(--border); background: var(--ink-2); overflow: hidden; display: grid; place-items: center; } .zhk-main .map { height: 360px; margin-top: 8px; } .map-note { font-family: var(--mono); font-size: 12.5px; color: var(--on-ink-3); padding: 0 20px; text-align: center; } .map.is-live { display: block; background: var(--map-bg); } .map .fmodal-err { padding: 24px; max-width: 480px; } .map-errbox { position: absolute; left: 12px; right: 12px; bottom: 12px; z-index: 800; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; box-shadow: 0 14px 34px var(--shadow-med); font-size: 14px; } .map-errbox .fmodal-err { padding: 14px 18px; margin: 0; } .karta-main .map { height: calc(100vh - 320px); min-height: 440px; } /* Тайлы OSM подкрашены под тему: тёплая сепия днём, инверсия ночью — карта перестаёт быть белым прямоугольником в тёмной теме. */ .map .leaflet-tile-pane { filter: var(--map-filter); } .map .leaflet-popup-content-wrapper, .map .leaflet-popup-tip, .map .leaflet-control-zoom a, .map .leaflet-control-attribution { background: var(--surface); color: var(--text); } .map .leaflet-control-zoom a { border-color: var(--border); } .map .leaflet-control-attribution a { color: var(--accent); } .map .leaflet-bar { border: 1px solid var(--border); } .map-pin-wrap, .map-cluster-wrap { background: none; border: none; text-align: center; } .map-pin { display: inline-flex; align-items: center; white-space: nowrap; font-family: var(--mono); font-size: 11.5px; font-weight: 500; color: var(--gold); background: var(--ink-glass); border: 1px solid var(--ink-line); border-radius: 99px; padding: 4px 10px; box-shadow: 0 4px 12px var(--shadow-hard); } .map-pin.is-done { color: var(--on-ink-2); } .map-pin.is-here { background: var(--clay); border-color: var(--clay); color: var(--on-clay); } .map-cluster { width: 42px; height: 42px; display: grid; place-items: center; font-family: var(--mono); font-size: 13px; font-weight: 500; color: var(--on-ink); background: var(--ink-glass); border: 2px solid var(--gold); border-radius: 50%; box-shadow: 0 6px 16px var(--shadow-hard); } .map .leaflet-popup-content-wrapper { border-radius: 12px; box-shadow: 0 18px 40px var(--shadow-hard); } .map .leaflet-popup-content { margin: 12px 14px; line-height: 1.45; } .map-pop { display: grid; gap: 6px; font-family: var(--body); font-size: 13px; min-width: 190px; } .map-pop img { width: 100%; height: 104px; object-fit: cover; border-radius: 8px; background: var(--ink-2); } .map-pop b { font-size: 14px; line-height: 1.3; } .map-pop > span { color: var(--text-dim); } .map-pop-price { font-family: var(--mono); color: var(--accent-strong); } .map-pop-link { font-weight: 600; } @media (max-width: 1024px) { .houses, .areas { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 760px) { /* внутренние страницы (ЖК/дом/район/застройщик/подборка/квартира) — сжатый ритм, без длинного пустого хвоста под контентом. Определено ниже базового `.zhk-main` (source order решает при равной специфичности). */ .zhk-main, .flat-main { padding-top: 28px; padding-bottom: 48px; } .zhk-cols, .flat-box { grid-template-columns: minmax(0, 1fr); gap: 18px; } .zhk-gallery img { height: 200px; } .houses, .areas { grid-template-columns: minmax(0, 1fr); } .map { height: 380px; } .zhk-main .map { height: 300px; } } @media (max-width: 420px) { .apt { gap: 12px; } .apt img, .apt-noplan { width: 86px; height: 86px; } .q-flats .apt { padding: 12px; } } /* ============ ИЗБРАННОЕ ============ */ /* Сердце-контрол в углу фото карточки (квартиры и ЖК). Контур → залив по aria-pressed; цвета только через токены палитры. */ .fav-btn { position: absolute; z-index: 3; width: 34px; height: 34px; padding: 0; display: grid; place-items: center; color: var(--on-ink-2); background: var(--ink-glass); border: 1px solid var(--ink-line); border-radius: 50%; backdrop-filter: blur(6px); cursor: pointer; transition: color .15s ease, background .15s ease, transform .12s ease; } .fav-btn svg { display: block; fill: none; stroke: currentColor; stroke-width: 2; } .fav-btn:hover { color: var(--gold); } .fav-btn:active { transform: scale(.9); } .fav-btn[aria-pressed="true"] { color: var(--gold); } .fav-btn[aria-pressed="true"] svg { fill: var(--gold); stroke: var(--gold); } .fav-btn:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; } .card .fav-btn { top: 12px; right: 12px; } .apt .fav-btn { top: 16px; left: 16px; } /* Счётчик избранного в шапке — иконочный контрол-сердце (как .theme-toggle), ведёт на /izbrannoe; число висит бейджем-надстрочником. Подписи не носит: в колонке шапки (1200px) уже есть подписанные «Поиск» и «Написать». */ .hdr-fav { position: relative; flex: none; display: inline-grid; place-items: center; width: 42px; height: 42px; color: var(--on-ink-2); background: var(--ink-tint); border: 1px solid var(--ink-line); border-radius: 9px; cursor: pointer; transition: color .15s ease, border-color .15s ease; } .hdr-fav:hover { color: var(--gold); border-color: var(--gold); } .hdr-fav svg { display: block; } .hdr-fav.has-fav { color: var(--gold); border-color: var(--gold); } .hdr-fav-n { position: absolute; top: -6px; right: -6px; min-width: 18px; height: 18px; padding: 0 5px; display: inline-grid; place-items: center; font-family: var(--mono); font-size: 10.5px; font-weight: 600; line-height: 1; color: var(--on-accent); background: var(--accent); border-radius: 99px; } /* Страница /izbrannoe */ .fav-sec { margin-top: 34px; } .fav-sec:first-child { margin-top: 22px; } .fav-sec > h2 { font-family: var(--disp); font-size: 21px; font-weight: 600; display: flex; align-items: baseline; gap: 9px; margin-bottom: 14px; } .fav-sec > h2 span { font-family: var(--mono); font-size: 13px; font-weight: 500; color: var(--text-dim); } .fav-cards { display: grid; gap: 20px; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); } .fav-empty { margin: 26px 0 8px; padding: 34px 26px; text-align: center; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r); } .fav-empty-t { font-family: var(--disp); font-size: 20px; font-weight: 600; } .fav-empty p + p { margin-top: 8px; color: var(--text-dim); max-width: 46ch; margin-inline: auto; } .fav-empty-cta { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-top: 20px; } .fav-send { margin-top: 40px; padding: 26px; background: var(--ink); border-radius: var(--r); color: var(--on-ink); } .fav-send h2 { font-family: var(--disp); font-size: 20px; font-weight: 600; color: var(--on-ink); } .fav-send p { margin-top: 8px; color: var(--on-ink-2); max-width: 60ch; } .fav-send-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 18px; } @media (max-width: 560px) { .fav-cards { grid-template-columns: minmax(0, 1fr); } .fav-send-cta .btn { flex: 1 1 100%; } }