/* Supplements the prototype's styles.css for the server-rendered pages (city landings, FAQ, guides, no-JS fallback). Kept separate so the original file stays replaceable. */ :root{ color-scheme:light; --ck-ink:#0b2740; --ck-soft:#4d6b80; --ck-faint:#6b8596; --ck-line:#dde8ef; --ck-surface:#fff; --ck-bg:#f4f9fc; --ck-accent:#0a7aa8; } .nav-link{color:inherit;text-decoration:none;font-weight:600;font-size:.9rem;opacity:.85;padding:0 .35rem} .nav-link:hover{opacity:1;text-decoration:underline} .language-switch{display:inline-flex;gap:4px} .lang-btn{display:inline-block;padding:6px 10px;border-radius:999px;font-size:.75rem;font-weight:700; text-decoration:none;border:1px solid rgba(255,255,255,.35);color:inherit} .lang-btn.is-active{background:var(--ck-accent);color:#fff;border-color:transparent} /* 24.10.2026: кнопки языков — скруглённые прямоугольники, концентричные подложке (у подложки 13px и отступ 4px → у кнопок 9px). Овалы 999px в прямоугольной подложке смотрелись чужеродно. */ .language-switch .lang-btn{border-radius:9px} .page-hero{background:var(--ck-ink);background-size:cover;background-position:center;color:#fff;padding:clamp(56px,9vw,110px) 0 clamp(40px,6vw,72px)} .page-hero.small{padding:clamp(40px,6vw,72px) 0 clamp(28px,4vw,44px)} .page-hero h1{font-size:clamp(1.9rem,4vw,3rem);margin:.4rem 0;line-height:1.1} .page-hero .lede{max-width:60ch;opacity:.92} /* Страница города: у .hero-pills из styles.css есть отступ сверху и нет снизу, поэтому кнопка вставала вплотную под плашки. */ .page-hero .hero-pills{margin:22px 0 0} .page-hero .hero-pills + .primary-btn{margin-top:24px} .crumbs{font-size:.82rem;opacity:.8;margin-bottom:.6rem} .crumbs a{color:inherit} .section{padding:clamp(40px,6vw,80px) 0} .muted{color:var(--ck-soft)} .legal{font-size:.8rem;color:var(--ck-faint);margin-top:1.5rem} .text-link{color:var(--ck-accent);font-weight:700;text-decoration:none} .text-link:hover{text-decoration:underline} .table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch} .data-table{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums;min-width:640px} .data-table th,.data-table td{padding:12px 14px;border-bottom:1px solid var(--ck-line);text-align:left;font-size:.92rem} .data-table th{font-size:.72rem;text-transform:uppercase;letter-spacing:.08em;color:var(--ck-faint)} .faq-section{padding:clamp(40px,6vw,72px) 0} /* Блок вопросов на главной: слева список, справа фото. Пока картинка не выбрана, класса has-image нет — сетка не включается, и блок остаётся одной колонкой, как был. */ .faq-grid{display:block} .faq-section.has-image .faq-grid{ display:grid;grid-template-columns:minmax(0,1fr) minmax(0,420px); gap:clamp(28px,4vw,56px);align-items:start; } .faq-copy h2{margin-top:0} .faq-lede{margin:0 0 20px;color:var(--ck-soft,#5b6b74);max-width:60ch} .faq-figure img{ width:100%;height:auto;aspect-ratio:4/5;object-fit:cover; border-radius:22px;box-shadow:0 18px 50px rgba(16,42,55,.16);display:block; } @media (max-width:900px){ /* На телефоне фото уходит вниз и становится широким и низким: высокий кадр здесь выталкивал бы вопросы за первый экран. */ .faq-section.has-image .faq-grid{grid-template-columns:1fr} .faq-figure{order:2} .faq-figure img{aspect-ratio:16/10;border-radius:16px} } /* FAQ — один вид для всех мест: главная, страница /faq, вопросы в путеводителях городов. Цвета литеральные, как у путеводителя: страница светлая и в тёмной теме. Акцент берётся из темы (--fb-accent-ink), чтобы следовать палитре сайта. Открытие/закрытие анимирует public/faq.js; без скрипта
работает как обычно. */ .faq-list{--faq-tone:var(--fb-accent-ink,#0a7aa8); --faq-tone-bg:#eef4f8;--faq-tone-line:#b9ccd9; --faq-ease:cubic-bezier(.22,.61,.36,1); display:flex;flex-direction:column;gap:12px;max-width:820px} @supports (color:color-mix(in srgb,red 50%,#fff)){ .faq-list{--faq-tone-bg:color-mix(in srgb,var(--faq-tone) 10%,#fff); --faq-tone-line:color-mix(in srgb,var(--faq-tone) 38%,#dde8ef)} } .faq-item{background:#fff;border:1px solid #dde8ef;border-radius:16px;color:#0b2740; box-shadow:0 1px 2px rgba(11,39,64,.04); transition:border-color .5s var(--faq-ease),box-shadow .5s var(--faq-ease),transform .5s var(--faq-ease)} .faq-item>summary{display:flex;align-items:center;justify-content:space-between;gap:18px; padding:18px 20px 18px 22px;cursor:pointer;list-style:none;font-weight:700;line-height:1.4; border-radius:16px;-webkit-tap-highlight-color:transparent} .faq-item>summary::-webkit-details-marker{display:none} .faq-item>summary::marker{content:""} .faq-item>summary:focus{outline:none} .faq-item>summary:focus-visible{outline:3px solid var(--faq-tone-line);outline-offset:2px} .faq-q{flex:1 1 auto;min-width:0;transition:color .5s var(--faq-ease)} /* Иконка «+» в конце каждого вопроса: круг и две линии. Открыто — вертикальная линия ложится, остаётся «−». Класс is-closing ставит скрипт, чтобы иконка менялась в момент щелчка, а не после анимации. */ .faq-icon{position:relative;flex:0 0 auto;width:34px;height:34px;border-radius:50%; background:var(--faq-tone-bg);color:var(--faq-tone); transition:background-color .5s var(--faq-ease),color .5s var(--faq-ease),transform .6s var(--faq-ease),box-shadow .5s var(--faq-ease)} .faq-icon::before,.faq-icon::after{content:"";position:absolute;left:50%;top:50%;width:14px;height:2px; margin:-1px 0 0 -7px;border-radius:2px;background:currentColor; transition:transform .6s var(--faq-ease),opacity .4s var(--faq-ease)} .faq-icon::after{transform:rotate(90deg)} .faq-item:hover{border-color:var(--faq-tone-line);transform:translateY(-2px); box-shadow:0 18px 38px -22px rgba(11,39,64,.32),0 2px 6px rgba(11,39,64,.04)} .faq-item:hover .faq-q{color:var(--faq-tone)} .faq-item:hover .faq-icon{background:var(--faq-tone);color:#fff;transform:rotate(90deg); box-shadow:0 6px 16px -6px var(--faq-tone)} .faq-item[open]:not(.is-closing){border-color:var(--faq-tone-line); box-shadow:0 18px 38px -24px rgba(11,39,64,.28),0 2px 6px rgba(11,39,64,.04)} .faq-item[open]:not(.is-closing) .faq-icon{background:var(--faq-tone);color:#fff;transform:rotate(180deg)} .faq-item[open]:not(.is-closing) .faq-icon::after{transform:rotate(0deg);opacity:0} .faq-answer-inner{padding:0 22px 20px;color:#2c4a5e;line-height:1.65} .faq-answer-inner p{margin:0 0 .8em} .faq-answer-inner>:last-child{margin-bottom:0} @media (hover:none){ .faq-item:hover{transform:none} .faq-item:not([open]):hover,.faq-item.is-closing:hover{border-color:#dde8ef;box-shadow:0 1px 2px rgba(11,39,64,.04)} .faq-item:not([open]):hover .faq-icon,.faq-item.is-closing:hover .faq-icon{background:var(--faq-tone-bg);color:var(--faq-tone);transform:none;box-shadow:none} .faq-item:hover .faq-q{color:inherit} } @media (prefers-reduced-motion:reduce){ .faq-item,.faq-q,.faq-icon,.faq-icon::before,.faq-icon::after{transition:none} .faq-item:hover{transform:none} } .card-grid{display:grid;gap:22px;grid-template-columns:repeat(auto-fill,minmax(280px,1fr))} .post-card{border:1px solid var(--ck-line);border-radius:16px;background:var(--ck-surface);padding:18px;display:flex;flex-direction:column;gap:8px} .post-card img{width:100%;border-radius:10px;aspect-ratio:16/9;object-fit:cover} .post-card h2{font-size:1.1rem;margin:0} .post-card h2 a{color:inherit;text-decoration:none} .post-card time{font-size:.78rem;color:var(--ck-faint)} .prose-page{max-width:760px} .prose{line-height:1.75;color:var(--ck-soft)} .prose h2,.prose h3{color:var(--ck-ink);margin-top:1.6em} .prose img{max-width:100%;border-radius:12px} .prose-page .cover{width:100%;border-radius:16px;margin:1rem 0 2rem} .ns-note{padding:22px;border:1px solid var(--ck-line);border-radius:16px;background:var(--ck-surface)} .ns-table{width:100%;border-collapse:collapse;margin-top:12px} .ns-table th,.ns-table td{padding:10px;border-bottom:1px solid var(--ck-line);text-align:left;font-size:.9rem} .footer-links{display:flex;gap:14px;flex-wrap:wrap;margin-top:10px} .footer-links a{color:inherit;opacity:.8;font-size:.85rem} /* 01.11.2026: у сайта одна светлая тема. Прежний «тёмный режим» менял только часть цветов (--ck-*): на Mac/телефоне с тёмной темой шапка FAQ и страниц становилась светлой с белым текстом, тексты блога — почти белыми на белом. Тёмную подмену убрали, браузеру сказано: тема светлая. */ /* --- funnel additions (honeypot, validation, consent) ------------------ */ .ck-hp{position:absolute!important;left:-9999px!important;width:1px!important;height:1px!important; overflow:hidden!important;opacity:0!important;pointer-events:none} /* Иврит (справа налево): left:-9999px уезжал в прокручиваемую сторону, и на шаге с формой страницу можно было прокрутить вбок на 10 000 px (найдено test:plan, 24.10.2026). В RTL прячем за правый край — он не прокручивается. */ html[dir=rtl] .ck-hp{left:auto!important;right:-9999px!important} .field-error{display:block;color:#c02c2c;font-weight:600;font-size:.78rem;margin-top:4px} input[aria-invalid="true"]{border-color:#c02c2c!important;outline-color:#c02c2c} .market-note.error{border-color:#e8b4b4;background:#fdf1f1;color:#8f2020} .toggle.consent{display:flex;align-items:flex-start;gap:10px;margin:14px 0 4px;font-size:.88rem;line-height:1.4} .toggle.consent input{margin-top:3px;flex:0 0 auto} .rate-benchmark{font-size:.72rem;color:var(--ck-faint);margin-top:10px;text-align:center} .primary-btn[disabled]{opacity:.6;cursor:progress} .step-tab[aria-disabled="true"]{opacity:.55;cursor:not-allowed} /* --- market position ---------------------------------------------------- */ .mp-note{margin:18px 0 0;padding:14px 16px;border:1px solid var(--ck-line);border-left:4px solid var(--ck-accent); border-radius:10px;background:var(--ck-surface);font-size:.92rem;line-height:1.55} .city-mp{display:block;font-size:.72rem;color:var(--ck-faint);margin-top:2px} /* Столбцов стало три — прежние 520px заставляли телефон прокручивать таблицу вбок там, где она и так помещается. */ .compare-table{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums;min-width:320px} .compare-table th,.compare-table td{padding:10px 12px;border-bottom:1px solid var(--ck-line);text-align:left;font-size:.9rem} .compare-table th{font-size:.7rem;text-transform:uppercase;letter-spacing:.07em;color:var(--ck-faint)} .compare-table .num{text-align:right} .compare-table tr.is-current{background:color-mix(in srgb,var(--ck-accent) 10%,transparent);font-weight:700} /* Столбца со стрелками больше нет — выбирается сама строка. Курсор и подсветка при наведении нужны как раз вместо той стрелки: без них строка выглядит как обычный текст и никто её не нажмёт. */ .compare-table tr.pickable{cursor:pointer} .compare-table tr.pickable:hover td{background:color-mix(in srgb,var(--ck-accent) 7%,transparent)} .compare-table tr.pickable:focus-visible{outline:2px solid var(--ck-accent);outline-offset:-2px} .linkish{background:none;border:0;color:var(--ck-accent);font-weight:700;cursor:pointer;font-size:1rem;padding:2px 6px;border-radius:6px} .linkish:hover{background:color-mix(in srgb,var(--ck-accent) 14%,transparent)} .linkish:focus-visible{outline:2px solid var(--ck-accent);outline-offset:2px} /* --- topbar: the prototype's mobile rules assumed no text nav ------------ */ .topbar .nav-link{white-space:nowrap} a.primary-btn,a.secondary-btn{text-decoration:none} @media (max-width:900px){ /* "Your guided path" is the longest label and the only one duplicated by the hero CTA, so it goes first; FAQ and Guides stay reachable. */ .topbar .nav-link-wide{display:none} .top-actions{gap:8px} .topbar .nav-link{font-size:.82rem;padding:0 .2rem} } @media (max-width:520px){ /* Ссылки прячутся из строки шапки, но НЕ из выпадающего меню: раньше здесь стояло просто `.nav-link{display:none}`, и на телефоне до FAQ и гайдов нельзя было добраться вообще — оправдание «они есть в подвале» на деле означало «их нет». */ .topbar .nav-menu:not([open]) .nav-link{display:none} } /* --- RTL ------------------------------------------------------------------ styles.css carries `.rtl .push{...}` but nothing ever gets class="rtl" — the direction lives on . The primary button therefore stayed pinned to the left on Hebrew pages. */ html[dir="rtl"] .actions .push{margin-left:0;margin-right:auto} html[dir="rtl"] .compare-table th, html[dir="rtl"] .compare-table td, html[dir="rtl"] .data-table th, html[dir="rtl"] .data-table td{text-align:right} html[dir="rtl"] .compare-table .num, html[dir="rtl"] .data-table .num{text-align:left} html[dir="rtl"] .mp-note{border-left:0;border-right:4px solid var(--ck-accent)} /* --- бренд --------------------------------------------------------------- Логотип задаётся в Настройках; высота фиксирована, ширина по пропорциям, поэтому замена файла другого формата не ломает шапку. */ /* Новый логотип заметно шире прежнего (пропорции 5:1 против 4:1), поэтому при той же высоте он занимал в шапке больше места. Высота уменьшена, чтобы шапка не перевешивала первый экран. */ /* Логотип 24.09.2026: надпись с пальмой, без подписи под ней. Пальма занимает всю высоту картинки, поэтому высота чуть больше прежних 34px — иначе буквы выходили мельче, чем в старом логотипе. */ /* 31.10.2026 (владелец): логотип чуть крупнее; прозрачные поля убирает public/logo-fit.js. */ .brand-logo{height:53px;width:auto;display:block} @media (max-width:720px){ .brand-logo{height:39px} } .footer-logo{height:40px;width:auto;display:block;margin-bottom:12px} @media (max-width:720px){ .footer-logo{height:34px} } /* Подвал: логотип отдельной строкой, под ним в одну строку описание сайта (слева) и оговорка (справа) — их первые строки на одной высоте. Раньше оговорка стояла вровень с логотипом и оказывалась выше описания. */ .footer .footer-inner{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr); grid-template-areas:"brand ." "main legal";column-gap:40px;row-gap:2px;align-items:start} .footer-brand{grid-area:brand} .footer-main{grid-area:main} .footer-legal{grid-area:legal;justify-self:end} .footer-main>p:first-child,.footer-legal>p:first-child{margin-top:0} @media (max-width:720px){ .footer .footer-inner{grid-template-columns:minmax(0,1fr);grid-template-areas:"brand" "main" "legal"} .footer-legal{justify-self:stretch} .footer-legal>p:first-child{margin-top:20px} } /* --- home: city cards -------------------------------------------------- Заменяют прежнюю полоску .city-mini (маленькое фото + строка цены). Цена и медиана из карточек убраны намеренно: они перегружали первый экран. Числа остались в таблице ниже и на страницах городов, поэтому поисковики и AI-клиенты ничего не потеряли. Правила живут здесь, а не в styles.css: этот файл подключается вторым, так что переопределяет прототип, и его можно заменить целиком. */ .city-strip{ display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:14px; margin-top:-56px; position:relative; z-index:4; /* Полоса уже контейнера: пять карточек 3:4 во всю ширину получались слишком высокими и отжимали воронку вниз. */ max-width:960px; margin-inline:auto; } .city-card{margin:0} .city-card-link{ position:relative;display:block;overflow:hidden; border-radius:18px;background:#0d3443;color:#fff;text-decoration:none; box-shadow:0 14px 36px rgba(9,43,57,.22); transition:transform .25s ease,box-shadow .25s ease; } .city-card-link:hover,.city-card-link:focus-visible{ transform:translateY(-3px);box-shadow:0 22px 52px rgba(9,43,57,.30); } .city-card-link:focus-visible{outline:3px solid #86efff;outline-offset:3px} .city-card-media{display:block;aspect-ratio:3/4;background:#0d3443} .city-card-media img{ display:block;width:100%;height:100%;object-fit:cover; transition:transform .5s ease; } .city-card-link:hover .city-card-media img{transform:scale(1.05)} /* Подпись лежит на фото, как в присланном примере, а не под ним. */ .city-card-body{ position:absolute;inset:auto 0 0 0; display:flex;flex-direction:column;align-items:flex-start;gap:4px; padding:16px 14px 15px; /* Вуаль лёгкая и низкая: она нужна только под двумя строками текста. Плотная закрывала половину фотографии — ради читаемости подписи мы прятали то, ради чего карточка и существует. */ background:linear-gradient(0deg,rgba(4,26,36,.90) 0%,rgba(4,26,36,.58) 52%,rgba(4,26,36,0) 100%); } .city-card-name{ font-size:17px;line-height:1.15;letter-spacing:-.02em;font-weight:800; display:inline-flex;align-items:center;gap:7px; } /* Стрелка вместо кнопки на каждой карточке. Пять одинаковых кнопок стояли прямо под «Explore my buying power» и спорили с ней — на первом экране должно быть одно действие. Ссылка теперь вся карточка целиком, а стрелка лишь подсказывает это при наведении. */ .city-card-name::after{ content:"→";font-weight:600;opacity:0;transform:translateX(-5px); transition:opacity .2s ease,transform .2s ease; } .city-card-link:hover .city-card-name::after, .city-card-link:focus-visible .city-card-name::after{opacity:1;transform:none} /* На тач-экранах наведения нет — там стрелка видна всегда, приглушённо. */ @media (hover:none){ .city-card-name::after{opacity:.65;transform:none} } .city-card-tag{ font-size:11.5px;font-weight:500;letter-spacing:0;line-height:1.3; color:rgba(255,255,255,.80); } /* Пять колонок помещаются только на широком экране. Свои media-запросы обязательны: правила прототипа для .city-strip стоят в файле выше и больше не выигрывают. Ниже 1100px это не сетка, а горизонтальная лента. Причина простая: городов пять — нечётное число, и любая сетка (3+2 или 2+2+1) оставляет дырку в последнем ряду. А если сложить карточки в столбик, пять больших фотографий отодвигают кнопку «Explore my buying power» на два экрана вниз — ровно то, от чего мы уходим. Лента держит блок высотой в одну карточку. */ @media(max-width:1100px){ .city-strip{ display:flex; gap:14px; margin-top:-52px; overflow-x:auto; overscroll-behavior-x:contain; scroll-snap-type:x proximity; /* Тень карточек не должна срезаться краем прокрутки. */ padding:8px 4px 16px; scrollbar-width:thin; -webkit-overflow-scrolling:touch; } .city-card{flex:0 0 232px;scroll-snap-align:start} } @media(max-width:560px){ .city-strip{margin-top:-34px;gap:12px} .city-card{flex:0 0 74vw;max-width:290px} .city-card-name{font-size:19px} .city-card-tag{font-size:12px} } @media(prefers-reduced-motion:reduce){ .city-card-link,.city-card-media img,.city-card-name::after{transition:none} .city-card-link:hover{transform:none} .city-card-link:hover .city-card-media img{transform:none} } /* --- home: варианты фона первого экрана --------------------------------- Выбирается в админке (Настройки → Brand & images → Hero style) и попадает в атрибут data-bg на
. Смысл всех вариантов, кроме classic, один: убрать из фона детали, которые перетягивают взгляд с заголовка и кнопки. Фото при этом остаётся тем же — меняется только его обработка, поэтому переключение не требует новых файлов. */ /* 1. classic — как в прототипе: цветной диагональный градиент. Оставлен, чтобы можно было вернуться одним кликом. Правил не требует. */ /* 2. calm — фото приглушено, вуаль ровная: контраст текста везде одинаковый. */ .hero[data-bg="calm"] .hero-media{filter:saturate(.55) brightness(.82) contrast(.95)} .hero[data-bg="calm"] .hero-overlay{ background:linear-gradient(90deg,rgba(6,32,44,.88) 0%,rgba(6,32,44,.74) 55%,rgba(6,32,44,.62) 100%); } /* 3. mist — фото размыто: остаются только большие пятна света и цвета. */ /* blur размывает и кромку элемента, поэтому фото увеличено — иначе по периметру видна светлая рамка. Обрезка секции задана ниже, для всех вариантов сразу. */ .hero[data-bg="mist"] .hero-media{ filter:blur(9px) saturate(.6) brightness(.86); transform:scale(1.08); } .hero[data-bg="mist"] .hero-overlay{ background:linear-gradient(90deg,rgba(7,34,47,.86) 0%,rgba(7,34,47,.70) 60%,rgba(7,34,47,.58) 100%); } /* ------------------------------------------------------------------------ ВАРИАНТЫ БЕЗ ФОТОГРАФИИ Фон рисуется средствами CSS: ни одного лишнего файла, ничего не грузится, картинка не «шумит» деталями. Фотография при этом остаётся в настройках — переключение обратно на classic возвращает её без правки полей. ------------------------------------------------------------------------ */ .hero[data-bg="ink"] .hero-media, .hero[data-bg="aurora"] .hero-media, .hero[data-bg="blueprint"] .hero-media, .hero[data-bg="horizon"] .hero-media, .hero[data-bg="silk"] .hero-media{display:none} /* Крупные тёмные градиенты на 8-битном экране идут полосами. Едва заметное зерно поверх их разбивает — приём из полиграфии, на глаз не читается, но переход становится гладким. Картинка встроена как data:, отдельного запроса нет; CSP разрешает data: в img-src. */ .hero[data-bg="ink"] .hero-overlay::before, .hero[data-bg="aurora"] .hero-overlay::before, .hero[data-bg="blueprint"] .hero-overlay::before, .hero[data-bg="horizon"] .hero-overlay::before, .hero[data-bg="silk"] .hero-overlay::before{ content:"";position:absolute;inset:0;pointer-events:none; opacity:.30;mix-blend-mode:overlay; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E"); } /* 4. ink — ровная глубина, ничего кроме света в углу. Самый тихий вариант. */ .hero[data-bg="ink"] .hero-overlay{ background:radial-gradient(90% 80% at 8% 18%,rgba(19,120,150,.55) 0%,rgba(19,120,150,0) 62%), linear-gradient(135deg,#0d3b4f 0%,#092b39 55%,#071f2a 100%); } /* 6. aurora — четыре мягких свечения бирюзой поверх глубокого синего. Ближайший аналог — «mesh gradient»: цвет есть, деталей нет, поэтому взгляду не за что зацепиться, кроме заголовка и кнопки. */ .hero[data-bg="aurora"] .hero-overlay{ background: radial-gradient(46% 62% at 17% 20%,rgba(19,185,181,.32) 0%,rgba(19,185,181,0) 70%), radial-gradient(42% 56% at 70% 10%,rgba(0,141,181,.36) 0%,rgba(0,141,181,0) 72%), radial-gradient(58% 66% at 90% 76%,rgba(12,125,159,.28) 0%,rgba(12,125,159,0) 70%), radial-gradient(52% 60% at 32% 96%,rgba(4,60,84,.55) 0%,rgba(4,60,84,0) 72%), linear-gradient(160deg,#0a3245 0%,#07293a 46%,#051c29 100%); } /* 7. blueprint — тонкая архитектурная сетка. Отсылка к чертежу дома, но линии почти не видны: сетка гаснет к краям, чтобы не превращаться в таблицу. */ .hero[data-bg="blueprint"] .hero-overlay{ background: radial-gradient(64% 72% at 10% 16%,rgba(19,185,181,.26) 0%,rgba(19,185,181,0) 68%), linear-gradient(140deg,#0c3546 0%,#092838 52%,#071e2a 100%); } .hero[data-bg="blueprint"] .hero-overlay::after{ content:"";position:absolute;inset:0;pointer-events:none; background: linear-gradient(rgba(255,255,255,.055) 1px,transparent 1px) 0 0/100% 68px, linear-gradient(90deg,rgba(255,255,255,.055) 1px,transparent 1px) 0 0/68px 100%; /* Маска гасит сетку по краям: в центре она читается, к периметру уходит. */ -webkit-mask-image:radial-gradient(78% 82% at 30% 42%,#000 0%,transparent 78%); mask-image:radial-gradient(78% 82% at 30% 42%,#000 0%,transparent 78%); } /* 8. horizon — абстрактный рассвет над водой: тёплая полоса внизу берёт золото из логотипа, верх остаётся тёмным, текст лежит на самом ровном участке. Никакого пейзажа — только свет. */ .hero[data-bg="horizon"] .hero-overlay{ background: radial-gradient(58% 34% at 50% 90%,rgba(255,180,59,.26) 0%,rgba(255,180,59,0) 64%), radial-gradient(92% 52% at 50% 98%,rgba(19,185,181,.36) 0%,rgba(19,185,181,0) 64%), linear-gradient(180deg,#05161f 0%,#072536 46%,#0b3d52 100%); } /* 9. silk — одна широкая диагональная «складка» света. Спокойнее всех цветных вариантов и при этом не выглядит пустым. */ .hero[data-bg="silk"] .hero-overlay{ background: linear-gradient(104deg,rgba(255,255,255,0) 34%,rgba(255,255,255,.055) 47%,rgba(255,255,255,0) 60%), radial-gradient(70% 80% at 78% 8%,rgba(0,141,181,.30) 0%,rgba(0,141,181,0) 66%), linear-gradient(118deg,#0b3346 0%,#082a3b 42%,#05202e 100%); } /* 5. sand — тёплая нейтральная вуаль, фото едва читается фактурой. */ .hero[data-bg="sand"] .hero-media{filter:saturate(.35) brightness(.78) sepia(.18)} .hero[data-bg="sand"] .hero-overlay{ background:linear-gradient(90deg,rgba(28,32,30,.90) 0%,rgba(24,32,34,.76) 55%,rgba(20,30,34,.64) 100%); } /* Спокойные варианты не нуждаются в 760px высоты: чем короче первый экран, тем раньше видна кнопка. classic оставлен как был. */ .hero:not([data-bg="classic"]){min-height:660px} @media(max-width:980px){ .hero:not([data-bg="classic"]){min-height:760px} } /* --- варианты стыка полосы городов с фотографией ------------------------- Карточки городов стоят на границе первого экрана и светлой части страницы. Сама граница — прямая линия среза фотографии, и именно она выглядит случайной: полоса будто легла поверх шва, а не задумана вместе с ним. Ниже шесть разных ответов на этот вопрос. Выбирается в админке (Настройки → Home page — where the city strip meets the photo) и попадает в атрибут data-strip на первом экране и на самой полосе. ------------- */ /* 1. flush — перекрытия нет вовсе. Фотография заканчивается, полоса стоит ниже, на светлом. Самый спокойный вариант: шва нет, потому что нечему его образовывать. */ .city-strip[data-strip="flush"]{margin-top:34px} /* 2. fade — фотография растворяется в цвете страницы. Прямой линии нет, карточки плывут в градиенте. */ .hero[data-strip="fade"]::after{ content:"";position:absolute;left:0;right:0;bottom:0;height:210px; background:linear-gradient(180deg,rgba(248,251,252,0) 0%,rgba(248,251,252,.55) 55%,#f8fbfc 100%); pointer-events:none;z-index:1; } /* 3. slab — полоса лежит на собственной белой плите со скруглённым верхом. Шов превращается в край предмета: видно, что так и задумано. */ .city-strip[data-strip="slab"]{ /* Цвет литералом, а не через --ck-surface. Эта переменная в тёмной теме браузера становится тёмно-синей, а первый экран и секция под ним заданы в styles.css светлыми и на тему не реагируют: плита оказалась бы тёмным пятном на светлой странице. */ background:#fff; padding:14px;border-radius:24px; margin-top:-84px; /* Плита шире обычного: её собственные поля съедали ширину карточек, и названия из двух слов переносились на вторую строку — ряд переставал читаться как ряд. */ max-width:1020px; box-shadow:0 -8px 44px rgba(9,43,57,.20),0 24px 56px rgba(9,43,57,.16); } /* 4. wave — низ фотографии выгнут дугой. Отсылка к береговой линии, и прямой линии на экране не остаётся. */ .hero[data-strip="wave"]{overflow:hidden} .hero[data-strip="wave"]::after{ content:"";position:absolute;z-index:1;pointer-events:none; left:-8%;right:-8%;bottom:-96px;height:190px; background:#f8fbfc; border-radius:50% 50% 0 0 / 100% 100% 0 0; } /* 5. notch — фотография «расступается»: снизу вырезано окно ровно под полосу, карточки стоят в нём. */ .hero[data-strip="notch"]::after{ content:"";position:absolute;z-index:1;pointer-events:none; left:50%;transform:translateX(-50%); bottom:0;width:min(1000px,calc(100% - 24px));height:104px; background:#f8fbfc;border-radius:26px 26px 0 0; } /* 6. stagger — линию ломают сами карточки: чётные опущены. Срез фотографии остаётся прямым, но глаз читает ритм, а не шов. */ .hero[data-strip="stagger"]::after{ content:"";position:absolute;left:0;right:0;bottom:0;height:210px; background:linear-gradient(180deg,rgba(248,251,252,0) 0%,rgba(248,251,252,.55) 55%,#f8fbfc 100%); pointer-events:none;z-index:1; } .city-strip[data-strip="stagger"]{margin-top:-74px;align-items:start} .city-strip[data-strip="stagger"] .city-card:nth-child(even){transform:translateY(30px)} /* Карточки всегда выше любой из этих подложек. */ .city-strip{z-index:4} @media(max-width:1100px){ /* Ниже 1100px полоса перестаёт быть рядом из пяти карточек и становится горизонтальной лентой. Приёмы, придуманные для ряда, здесь ломаются: вырез оказывается не по месту, а белая плита вокруг прокрутки читается не как рамка, а как обрезка — последняя карточка упирается в её край. Поэтому оба варианта переходят в мягкий низ: шва нет, ленте ничего не мешает. */ .hero[data-strip="notch"]::after{display:none} .city-strip[data-strip="slab"]{ background:none;padding:0;border-radius:0;box-shadow:none; max-width:none;margin-top:-52px; } .hero[data-strip="slab"]::after{ content:"";position:absolute;left:0;right:0;bottom:0;height:190px; background:linear-gradient(180deg,rgba(248,251,252,0) 0%,rgba(248,251,252,.55) 55%,#f8fbfc 100%); pointer-events:none;z-index:1; } .city-strip[data-strip="stagger"] .city-card:nth-child(even){transform:none} .hero[data-strip="wave"]::after{bottom:-70px;height:140px} } @media(prefers-reduced-motion:reduce){ .city-strip[data-strip="stagger"] .city-card:nth-child(even){transform:translateY(30px)} } /* Первый экран обрезается по своим границам. * * Не косметика: .hero-media увеличен на 1% (transform:scale(1.01) в * styles.css — так прячут кромку фотографии), и эти лишние ~4px вылезали * ПОД низ первого экрана, уже на светлую часть страницы. Вуаль туда не * достаёт, поэтому под фотографией шла тонкая тёмная черта во всю ширину — * она и делала стык похожим на случайный шов. Тень карточки с ценой * укладывается внутрь, ничего нужного не срезается. */ .hero{overflow:hidden} /* Подзаголовок первого экрана — «Body HTML» карточки home. pre-line намеренно: владелец пишет туда обычный текст с переносами строк, и без этого правила две строки слиплись бы в одну. Разметка, если она там есть, работает как обычно. */ .hero-lede{ margin-top:18px;max-width:46ch; font-size:clamp(16px,1.4vw,20px);line-height:1.45; color:rgba(255,255,255,.90);white-space:pre-line; } .hero-lede p{margin:0 0 .6em} .hero-lede p:last-child{margin-bottom:0} @media(max-width:720px){ .hero-lede{margin-top:14px} } /* ======================================================================== ПЕРВЫЙ ЭКРАН И РАЙОНЫ — оформление по присланному макету. Правила ниже переопределяют прототип: этот файл подключается вторым. Всё, что здесь задано размерами и цветом, читается из переменных темы (см. блок «тема» в partials/head.ejs) — их владелец меняет в админке. ======================================================================== */ /* Фотография показывается почти без затемнения: в макете это светлый, воздушный экран, а не тёмная подложка под белый текст. Читаемость держат тень на тексте и белая карточка справа. */ .hero[data-bg="classic"] .hero-overlay{ background:var(--fb-veil); } .hero{min-height:720px} .hero-content{align-items:center} .hero-copy{text-shadow:0 2px 18px rgba(4,24,34,.35)} /* Надзаголовок-пилюля */ .hero-eyebrow{ display:inline-block;margin-bottom:22px; padding:9px 18px;border-radius:999px; background:var(--fb-eyebrow-bg,rgba(11,86,120,.72)); backdrop-filter:blur(8px); color:#fff;font-family:var(--fb-body); font-size:12px;font-weight:800;letter-spacing:.13em;text-transform:uppercase; text-shadow:none; } .hero h1{ font-family:var(--fb-heading); font-size:var(--fb-h1); font-style:var(--fb-h1-style,normal); font-weight:var(--fb-heading-weight,600); /* Межстрочный 1.22 (было 1.1): строки заголовка почти касались друг друга выносными элементами — «p», «g», «y» над «h», «b», «l». */ line-height:1.22;letter-spacing:-.015em; /* Ширина 28 знаков: при 17 заголовок из двух фраз ложился в 5–6 строк узкой колонкой, хотя место под ним — 720px. 28 знаков — 3 строки на компьютере. */ margin:0 0 18px;max-width:28ch;text-wrap:balance; } /* Слово в квадратных скобках из текста заголовка. */ .hero h1 .accent{color:var(--fb-accent)} .hero-lede{ margin-top:0;margin-bottom:30px;max-width:52ch; font-family:var(--fb-body); font-size:var(--fb-lede,clamp(16px,1.3vw,19px)); font-style:var(--fb-lede-style,italic); font-weight:var(--fb-lede-weight,400); line-height:1.5;letter-spacing:.005em; color:rgba(255,255,255,.94);white-space:pre-line; } .hero-trust{display:flex;flex-wrap:wrap;gap:32px} .trust-item{display:flex;align-items:flex-start;gap:12px;max-width:30ch} .trust-icon{ flex:0 0 auto;width:38px;height:38px;border-radius:50%; display:grid;place-items:center;color:#fff; background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.34); backdrop-filter:blur(6px); } .trust-item strong{display:block;font-family:var(--fb-body);font-size:14px;font-weight:700;line-height:1.25} .trust-item small{display:block;font-size:13px;color:rgba(255,255,255,.86);margin-top:3px;line-height:1.35} /* --- карточка первого экрана: «сколько платите в месяц» ------------------ */ .hero-card{border-radius:22px;padding:30px 32px 26px;box-shadow:0 26px 70px rgba(6,30,42,.26)} .hero-card .card-question{ margin:0 0 14px;font-family:var(--fb-body); font-size:15px;font-weight:700;color:var(--ink,#102a37); } .card-amount-row{display:flex;align-items:baseline;gap:2px} .card-currency{ font-family:var(--fb-heading);font-size:clamp(30px,2.6vw,40px); font-weight:var(--fb-heading-weight,600);color:var(--ink,#102a37); } /* Поле выглядит как текст, а не как форма: рамка и фон появляются только при наведении и вводе. В макете это крупное число, но менять его должно быть очевидно — отсюда подчёркивание при фокусе. */ .card-amount{ width:auto;flex:0 1 auto;min-width:0;field-sizing:content; border:0;background:transparent;padding:0;border-radius:0; font-family:var(--fb-heading);font-size:clamp(34px,3vw,46px); font-weight:var(--fb-heading-weight,600);letter-spacing:-.02em; color:var(--ink,#102a37); } .card-amount:focus{outline:none;box-shadow:none;background:transparent} .card-amount:focus-visible{outline:2px solid var(--fb-cta,#ef5b34);outline-offset:4px;border-radius:6px} .card-permonth{font-size:15px;color:var(--muted,#6a7e88);white-space:nowrap;margin-left:8px;margin-right:auto} /* ─────────────────────────────────────────────────────────────────────── Подсказка «сумму можно менять». В макете это просто крупное число, и на нём посетитель останавливается: выглядит как готовый ответ, а не как поле. Ниже четыре варианта одного и того же — какой включён, решает атрибут data-amount у карточки. Общее правило: элементы чужого варианта скрыты, а не удалены, поэтому переключение в админке не трогает шаблон. ─────────────────────────────────────────────────────────────────────── */ .card-amount-field{display:inline-flex;align-items:baseline;gap:2px;position:relative} .card-step, .card-range, .card-scale, .card-chips, .card-pencil, .card-edit-hint{display:none} /* «field» — число лежит в поле с пунктирной рамкой и карандашом. Самый прямой намёк: это форма, сюда пишут. */ .hero-card[data-amount="field"] .card-amount-field{ border:1.5px dashed #cdd8de;border-radius:12px; padding:2px 10px 4px;transition:border-color .15s ease,background .15s ease; } .hero-card[data-amount="field"] .card-amount-field:hover{border-color:var(--fb-cta,#ef5b34);background:#fbfdfe} .hero-card[data-amount="field"] .card-amount-field:focus-within{ border-style:solid;border-color:var(--fb-cta,#ef5b34);background:#fff; } .hero-card[data-amount="field"] .card-pencil{ display:inline;font-size:15px;color:var(--muted,#6a7e88);margin-left:6px;line-height:1; } .hero-card[data-amount="field"] .card-edit-hint{display:block} /* «well» (16.10.2026, выбор владельца из четырёх эскизов) — число лежит в мягком поле с кнопкой-карандашом справа, под ним ползунок. Самый понятный из вариантов: такое поле все знают по формам, и видно, что сюда пишут. Поле — это сама строка суммы: обёртка числа «растворяется» (display:contents), чтобы карандаш встал последним, после «/mo». */ .hero-card[data-amount="well"] .card-amount-row{ align-items:center;gap:4px;padding:8px 8px 8px 16px; background:#f3f7f9;border:1.5px solid #dbe5ea;border-radius:16px;cursor:text; transition:border-color .2s ease,background-color .2s ease,box-shadow .2s ease; } .hero-card[data-amount="well"] .card-amount-row:hover{ border-color:color-mix(in srgb,var(--fb-cta,#ef5b34) 50%,#dbe5ea);background:#fff; } .hero-card[data-amount="well"] .card-amount-row:focus-within{ border-color:var(--fb-cta,#ef5b34);background:#fff; box-shadow:0 0 0 4px color-mix(in srgb,var(--fb-cta,#ef5b34) 13%,transparent); } .hero-card[data-amount="well"] .card-amount-field{display:contents} .hero-card[data-amount="well"] .card-currency{order:1} .hero-card[data-amount="well"] .card-amount{order:2;caret-color:var(--fb-cta,#ef5b34)} /* Рамку фокуса рисует всё поле — у самого числа своей не нужно. */ .hero-card[data-amount="well"] .card-amount:focus-visible{outline:none} .hero-card[data-amount="well"] .card-permonth{order:3;margin-left:6px;margin-right:auto} .hero-card[data-amount="well"] .card-pencil{ /* margin-left:auto — карандаш у правого края поля (раньше его туда отталкивал «/mo», который 25.10.2026 ушёл в строку вопроса). */ order:4;margin-inline-start:auto;display:grid;place-items:center;flex:0 0 40px;width:40px;height:40px;border-radius:12px; color:var(--fb-cta,#ef5b34);background:color-mix(in srgb,var(--fb-cta,#ef5b34) 13%,transparent); cursor:pointer;transition:background-color .2s ease,color .2s ease; } .hero-card[data-amount="well"] .card-pencil .ck-ico{width:18px;height:18px;vertical-align:0} .hero-card[data-amount="well"] .card-pencil:hover, .hero-card[data-amount="well"] .card-amount-row:focus-within .card-pencil{ background:var(--fb-cta,#ef5b34);color:#fff; } .hero-card[data-amount="well"] .card-bar{display:none} .hero-card[data-amount="well"] .card-edit-hint{display:block} @media (prefers-reduced-motion:reduce){.hero-card[data-amount="well"] .card-amount-row,.hero-card[data-amount="well"] .card-pencil{transition:none}} /* «slider» — та же полоса, что и раньше, но настоящая: с ручкой, которую видно и хочется потянуть. Полоса под числом уже была в макете, поэтому вид карточки почти не меняется, а смысл появляется. */ .hero-card[data-amount="slider"] .card-bar{display:none} .hero-card[data-amount="slider"] .card-range, .hero-card[data-amount="well"] .card-range{ /* Общий стиль полей ввода в styles.css рисует рамку, фон и отступы — на ползунке это выглядело как число в рамке поверх дорожки. */ display:block;width:100%;margin:14px 0 4px; -webkit-appearance:none;appearance:none; background:transparent;border:0;border-radius:0;padding:0;box-shadow:none; } .card-range::-webkit-slider-runnable-track{ height:6px;border-radius:3px; background:linear-gradient(to right,var(--fb-cta,#ef5b34) var(--fill,40%),#e6ecf0 var(--fill,40%)); } .card-range::-moz-range-track{height:6px;border-radius:3px;background:#e6ecf0} .card-range::-moz-range-progress{height:6px;border-radius:3px;background:var(--fb-cta,#ef5b34)} .card-range::-webkit-slider-thumb{ -webkit-appearance:none;appearance:none;width:22px;height:22px;margin-top:-8px; border-radius:50%;background:#fff;border:2px solid var(--fb-cta,#ef5b34); box-shadow:0 2px 6px rgba(20,40,55,.22);cursor:grab; } .card-range::-moz-range-thumb{ width:22px;height:22px;border-radius:50%;background:#fff; border:2px solid var(--fb-cta,#ef5b34);box-shadow:0 2px 6px rgba(20,40,55,.22);cursor:grab; } .card-range:active::-webkit-slider-thumb{cursor:grabbing} .card-range:focus-visible{outline:2px solid var(--fb-cta,#ef5b34);outline-offset:6px;border-radius:6px} .hero-card[data-amount="slider"] .card-scale, .hero-card[data-amount="well"] .card-scale{ display:flex;justify-content:space-between; font-size:12px;color:var(--muted,#6a7e88);margin-bottom:14px; } .hero-card[data-amount="slider"] .card-edit-hint{display:block} /* «stepper» — кнопки −/+ по бокам. Понятно без подписи и работает пальцем на телефоне, где попасть в тонкий ползунок труднее. */ .hero-card[data-amount="stepper"] .card-step{ display:inline-flex;align-items:center;justify-content:center; width:38px;height:38px;flex:0 0 38px;border-radius:50%; border:1.5px solid #dde5ea;background:#fff;color:var(--ink,#102a37); font-size:22px;line-height:1;cursor:pointer;align-self:center; transition:border-color .15s ease,color .15s ease,transform .08s ease; } .hero-card[data-amount="stepper"] .card-step:hover{border-color:var(--fb-cta,#ef5b34);color:var(--fb-cta,#ef5b34)} .hero-card[data-amount="stepper"] .card-step:active{transform:scale(.94)} .hero-card[data-amount="stepper"] .card-permonth{margin-right:0} .hero-card[data-amount="stepper"] .card-amount-row{gap:10px} .hero-card[data-amount="stepper"] .card-amount-field{margin:0 auto} /* «chips» — три готовые суммы. Ничего не надо придумывать: видно и что значения бывают разные, и что их меняют одним касанием. */ .hero-card[data-amount="chips"] .card-chips{ display:flex;gap:8px;flex-wrap:wrap;margin:14px 0 4px; } .card-chips button{ border:1.5px solid #dde5ea;background:#fff;color:var(--ink,#102a37); border-radius:999px;padding:7px 14px;font-size:14px;font-weight:600; cursor:pointer;transition:border-color .15s ease,color .15s ease,background .15s ease; } .card-chips button:hover{border-color:var(--fb-cta,#ef5b34);color:var(--fb-cta,#ef5b34)} .card-chips button[aria-pressed="true"]{ border-color:var(--fb-cta,#ef5b34);background:var(--fb-cta,#ef5b34);color:#fff; } .hero-card[data-amount="chips"] .card-edit-hint{display:block} /* Селектор с .hero-card не для красоты: в styles.css есть `.hero p`, который красит любой абзац первого экрана в белый — подсказка на белой карточке становилась невидимой. */ .hero-card .card-edit-hint{margin:0 0 14px;font-size:13px;color:var(--muted,#6a7e88)} .card-bar{height:3px;border-radius:2px;background:#e6ecf0;margin:14px 0 16px;overflow:hidden} .card-bar span{display:block;height:100%;width:40%;background:var(--fb-cta,#ef5b34);border-radius:2px;transition:width .2s ease} .hero-card .card-help{margin:0 0 20px;font-size:14px;line-height:1.5;color:var(--muted,#6a7e88)} .hero-card small{margin-top:12px;line-height:1.45} /* Кнопки действия: сплошной цвет темы вместо градиента прототипа. Цвет наведения — отдельная настройка, а не осветление фильтром: фильтр даёт предсказуемый, но не подобранный оттенок, а кнопка тут главный акцент страницы. Тень мягкая и нейтральная, без цветного свечения — свечение под кнопкой быстро скатывает вид в рекламный баннер. */ .hero-card .primary-btn, .nav-cta{ background:var(--fb-cta,#ff7a59); box-shadow:0 6px 16px rgba(20,40,55,.14); } .hero-card .primary-btn{border-radius:15px;padding:16px 18px;font-size:15px;justify-content:space-between} .nav-cta{border-radius:14px} .hero-card .primary-btn:hover, .nav-cta:hover{ background:var(--fb-cta-hover,#e76546); transform:translateY(-1px); box-shadow:0 9px 20px rgba(20,40,55,.18); } .hero-card .primary-btn:active, .nav-cta:active{transform:translateY(0);box-shadow:0 4px 12px rgba(20,40,55,.16)} /* --- секция районов ----------------------------------------------------- */ /* Отступы намеренно небольшие. Первый экран заканчивается резкой линией среза фотографии, и 76px пустоты над надписью читались не как воздух, а как провал: смотреть в них нечего. 40px хватает, чтобы секции не слиплись. Нижний отступ сжат по той же причине — карточки и полоса доверия относятся к одному блоку, а не к разным. */ .areas-section{background:var(--fb-areas-bg,#f2f5f8);padding:40px 0 34px} /* Секция шире остальных: пять карточек и колонка текста в общий контейнер 1220px не помещаются — карточки получались по 164px, и названия из двух слов переносились. */ .areas-grid{ width:min(1360px,calc(100% - 40px)); display:grid;grid-template-columns:300px 1fr;gap:30px;align-items:center; } .areas-copy .eyebrow{color:var(--fb-accent-ink,#0b6d90)} .areas-copy h2{ font-family:var(--fb-heading); /* На четверть мельче заголовка первого экрана: в колонке 300px размер из --fb-h2 разбивал строку на три части. */ font-size:calc(var(--fb-h2) * .86);font-weight:var(--fb-heading-weight,600); line-height:1.12;letter-spacing:-.015em;margin:10px 0 12px;text-wrap:balance; } .areas-copy p{color:var(--muted);font-size:15px;line-height:1.55;margin:0 0 22px;max-width:34ch} .areas-cta{display:inline-flex;align-items:center;gap:9px;text-decoration:none;font-size:14px} /* Карточки внутри секции: плита им больше не нужна — у блока есть заголовок и собственный фон, и на срезе фотографии они уже не висят. */ .areas-section .city-strip, .areas-section .city-strip[data-strip]{ margin:0;max-width:none;background:none;padding:0;border-radius:0;box-shadow:none; grid-template-columns:repeat(5,minmax(0,1fr));gap:14px; } .areas-section .city-card-body{ padding:14px 13px 13px; background:linear-gradient(0deg,rgba(4,26,36,.92) 0%,rgba(4,26,36,.55) 55%,rgba(4,26,36,0) 100%); } .areas-section .city-card-name{font-size:14.5px;gap:6px;line-height:1.2} .areas-section .city-card-name .pin{flex:0 0 auto;opacity:.9} .areas-section .city-card-name::after{content:none} .areas-section .city-card-tag{font-size:11px;line-height:1.3} .city-card-from{ display:block;margin-top:5px;font-size:12.5px;font-weight:700; color:rgba(255,255,255,.92); } @media(max-width:1100px){ .areas-grid{grid-template-columns:1fr;gap:26px} .areas-copy p{max-width:60ch} .areas-section .city-strip, .areas-section .city-strip[data-strip]{ display:flex;overflow-x:auto;scroll-snap-type:x proximity; padding:6px 2px 14px;overscroll-behavior-x:contain; } .areas-section .city-card{flex:0 0 224px;scroll-snap-align:start} .hero{min-height:auto;padding-bottom:56px} } @media(max-width:720px){ .hero-eyebrow{font-size:11px;padding:8px 14px;margin-bottom:16px} .hero-trust{gap:18px} .trust-item{max-width:none;flex:1 1 100%} .hero-card{padding:22px} .areas-section{padding:30px 0 26px} .areas-section .city-card{flex:0 0 72vw;max-width:280px} } /* Шапка: пункт «О нас», кнопка «Get Started». */ .nav-cta{ display:inline-flex;align-items:center; margin-left:14px;padding:11px 20px;border-radius:12px; background:var(--ink,#102a37);color:#fff;text-decoration:none; font-family:var(--fb-body);font-size:14px;font-weight:700; transition:transform .18s ease,box-shadow .18s ease; } .nav-cta:hover{transform:translateY(-1px);box-shadow:0 8px 20px rgba(16,42,55,.22)} .topbar .nav-link{font-family:var(--fb-body)} @media(max-width:1100px){ .nav-link-wide{display:none} } @media(max-width:720px){ .nav-cta{display:none} } /* --- меню в шапке ------------------------------------------------------- Два набора ссылок: строка для широкого экрана и выпадающий список для узкого. Всегда виден ровно один. */ .nav-inline{display:flex;align-items:center;gap:4px} .nav-menu{display:none;position:relative} .nav-menu > summary{ display:grid;place-items:center;cursor:pointer;list-style:none; width:42px;height:42px;border-radius:12px; border:1px solid var(--ck-line,#dde8ef);background:#fff;color:var(--ink,#102a37); } .nav-menu > summary::-webkit-details-marker{display:none} .nav-menu > summary:focus-visible{outline:3px solid var(--fb-cta,#ef5b34);outline-offset:2px} @media(max-width:900px){ .nav-inline,.nav-cta-inline{display:none} .nav-menu{display:flex;align-items:center} .nav-menu-panel{ display:flex;flex-direction:column;align-items:stretch;gap:2px; position:absolute;right:0;top:calc(100% + 10px);z-index:60; min-width:220px;padding:10px; background:#fff;border:1px solid var(--ck-line,#dde8ef);border-radius:16px; box-shadow:0 18px 44px rgba(16,42,55,.18); } .nav-menu .nav-link{display:block;padding:11px 12px;border-radius:10px;font-size:15px;opacity:1;white-space:nowrap} .nav-menu .nav-link:hover{background:#f1f6f9;text-decoration:none} .nav-menu .nav-cta{display:inline-flex;justify-content:center;margin:6px 0 0} } /* --- полоса доверия под районами ---------------------------------------- */ .trust-strip-section{background:var(--fb-areas-bg,#f2f5f8);padding:0 0 72px} .trust-strip{ display:grid;grid-template-columns:repeat(3,1fr); background:#fff;border-radius:20px;padding:26px 10px; box-shadow:0 14px 40px rgba(16,42,55,.08); } .trust-strip .trust-item{ display:flex;align-items:center;gap:14px; padding:4px 26px;max-width:none; border-left:1px solid #e8eef2; } .trust-strip .trust-item:first-child{border-left:0} .trust-strip .trust-icon{ flex:0 0 auto;width:auto;height:auto;border:0;background:none;backdrop-filter:none; color:var(--fb-cta,#ef5b34); } .trust-strip .trust-item strong{font-size:15px;color:var(--ink,#102a37);font-weight:700} .trust-strip .trust-item small{font-size:13.5px;color:var(--muted,#6a7e88);margin-top:2px} @media(max-width:900px){ .trust-strip{grid-template-columns:1fr;gap:18px;padding:20px} .trust-strip .trust-item{border-left:0;padding:0} } /* Ширина поля с суммой. `field-sizing:content` поддерживают не все браузеры, поэтому есть и запасной вариант: поле не тянется, а занимает столько, сколько задано в атрибуте size. */ @supports not (field-sizing: content){ .card-amount{width:5.2ch} } /* --- путеводитель по городу (страница города) --------------------------- Цвета литералом, как у плиты на главной: страница под первым экраном светлая и на тёмную тему браузера не реагирует, а переменные --ck-* в тёмной теме становятся светлыми — текст пропал бы на светлом фоне. */ .city-guide{background:#f4f9fc;border-top:1px solid #dde8ef;padding:clamp(40px,6vw,80px) 0;color:#0b2740} .guide-head{max-width:860px} .guide-head h2{font-size:clamp(1.6rem,3vw,2.2rem);margin:0 0 .4rem;line-height:1.15;color:#0b2740} .guide-lede{color:#4d6b80;margin:0;max-width:70ch;line-height:1.6} .guide-toc{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:18px} .guide-toc-label{font-size:.8rem;font-weight:700;color:#4d6b80;margin-right:4px} .guide-toc a{font-size:.85rem;padding:6px 12px;border-radius:999px;background:#fff;border:1px solid #dde8ef;color:#0b2740;text-decoration:none;line-height:1.3;display:inline-flex;align-items:center;gap:6px} .guide-toc-ico{width:15px;height:15px;flex:0 0 auto;color:#0a7aa8} .guide-toc a:hover,.guide-toc a:focus-visible{border-color:var(--ck-accent);color:var(--ck-accent)} .guide-section{margin-top:clamp(32px,4vw,52px);scroll-margin-top:96px} /* Оформление разделов (21.09.2026, 22.09 — спокойнее): значок у заголовка в цвете сайта, фото рядом с текстом или баннер над карточками, тонкая линия между разделами. Цвета литеральные, как и во всём блоке: страница светлая и в тёмной теме. Классы tone-1…4 остаются в разметке, но цвет у всех один — так блок не пестрит. */ .guide-section{--g-tone:#0a7aa8;--g-tone-bg:#e6f2f8} .guide-section+.guide-section{border-top:1px solid #dde8ef;padding-top:clamp(28px,3.4vw,44px)} .guide-sec-head{display:flex;align-items:center;gap:14px;margin:0 0 16px} .guide-sec-head h2,.guide-section>h2{font-size:clamp(1.3rem,2.4vw,1.7rem);margin:0;line-height:1.2;color:#0b2740} .guide-section>h2{margin-bottom:14px} .guide-badge{flex:0 0 auto;width:46px;height:46px;border-radius:14px;display:grid;place-items:center; background:var(--g-tone-bg);color:var(--g-tone);box-shadow:inset 0 0 0 1px rgba(11,39,64,.05)} .guide-badge .guide-ico{width:24px;height:24px} .guide-split{display:grid;grid-template-columns:minmax(0,1fr) minmax(260px,420px);gap:clamp(24px,4vw,52px);align-items:start} .guide-split .guide-text,.guide-split .guide-faq{max-width:none} .guide-figure,.guide-banner{margin:0;border-radius:20px;overflow:hidden;background:var(--g-tone-bg); box-shadow:0 18px 40px -26px rgba(11,39,64,.45),0 0 0 1px rgba(11,39,64,.05)} .guide-figure{aspect-ratio:4/3;position:sticky;top:96px} .guide-banner{aspect-ratio:3/1;margin-bottom:18px} .guide-figure img,.guide-banner img{display:block;width:100%;height:100%;object-fit:cover} .guide-text ul,.guide-answer ul{list-style:none;padding-inline-start:0} .guide-text li,.guide-answer li{position:relative;padding-inline-start:1.5em} .guide-text li::before,.guide-answer li::before{content:"";position:absolute;inset-inline-start:.25em;top:.62em;width:.48em;height:.48em;border-radius:50%; background:var(--g-tone);box-shadow:0 0 0 3px var(--g-tone-bg)} .guide-text h3{padding-inline-start:12px;border-inline-start:3px solid var(--g-tone)} .city-guide a{color:var(--ck-accent)} .guide-text{max-width:78ch;line-height:1.7;color:#2c4a5e} .guide-text p{margin:0 0 1em} .guide-text h3{font-size:1.08rem;margin:1.4em 0 .5em;color:#0b2740} .guide-text ul,.guide-place ul,.guide-answer ul{margin:0 0 1em;padding-inline-start:1.2em} .guide-text li,.guide-place li,.guide-answer li{margin:.35em 0} .guide-text strong,.guide-place strong,.guide-answer strong{color:#0b2740} .guide-facts{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px;margin:0} .guide-facts>div{background:#fff;border:1px solid #dde8ef;border-radius:14px;padding:14px 16px;min-width:0;box-shadow:inset 3px 0 0 var(--g-tone)} .guide-facts>div.wide{grid-column:1/-1} .guide-facts dt{font-size:.74rem;text-transform:uppercase;letter-spacing:.06em;color:#5f7d90;font-weight:700;margin-bottom:4px} .guide-facts dd{margin:0;font-weight:600;line-height:1.45;color:#0b2740;overflow-wrap:anywhere} .guide-places{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:14px} .guide-place{background:#fff;border:1px solid #dde8ef;border-radius:16px;padding:18px 20px;min-width:0;box-shadow:inset 0 3px 0 var(--g-tone)} .guide-place h3::before{content:"";display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--g-tone);margin-inline-end:8px;vertical-align:.15em} .guide-place h3{font-size:1.02rem;margin:0 0 8px;color:#0b2740;line-height:1.3} .guide-place p{margin:0 0 .6em;color:#2c4a5e;line-height:1.6;font-size:.95rem} .guide-place p:last-child{margin-bottom:0} .guide-faq{max-width:860px} /* Сами вопросы оформлены общими правилами .faq-list / .faq-item выше. */ @media (max-width:900px){.guide-split{grid-template-columns:1fr}.guide-figure{order:-1;position:static;max-width:560px}} @media (max-width:720px){.guide-places{grid-template-columns:1fr}.guide-facts{grid-template-columns:1fr 1fr} .guide-banner{aspect-ratio:16/7}.guide-badge{width:40px;height:40px;border-radius:12px}.guide-badge .guide-ico{width:21px;height:21px}} @media (max-width:440px){.guide-facts{grid-template-columns:1fr}} /* --- Значки вместо эмодзи ------------------------------------------------ Один линейный стиль на весь сайт (services/icons.js, как у путеводителя). Цвет — currentColor; там, где значок выделяет выбор, — акцент темы. */ .ck-ico{display:inline-block;width:1.15em;height:1.15em;flex:0 0 auto;vertical-align:-.22em} /* Плашки в шапке города: белые на фото */ .hero-pills span{display:inline-flex;align-items:center;gap:8px} .hero-pills .ck-ico{width:17px;height:17px} /* «Без обязательств» и т. п. в левой колонке воронки */ .trust-stack div{align-items:flex-start} .trust-stack .ck-ico{width:16px;height:16px;margin-top:1px;color:#8cebf0} /* Карточки выбора: «Первый дом» / «Уже владею» */ .choice-card strong{display:flex;align-items:center;gap:10px} .choice-card strong .ck-ico{width:22px;height:22px;color:var(--fb-accent-ink,#007a9f)} /* Типы жилья: карточки шага 3 и кнопки шага 4 */ .type-card .type-icon,.property-chip .type-icon{display:inline-grid;place-items:center;width:44px;height:44px;border-radius:13px; background:#f1f6f9;color:var(--fb-accent-ink,#007a9f);font-size:0;transition:background-color .25s,color .25s} .property-chip .type-icon{width:40px;height:40px;border-radius:12px} .type-card .type-icon .ck-ico,.property-chip .type-icon .ck-ico{width:24px;height:24px;vertical-align:0} .type-card.selected .type-icon,.property-chip.selected .type-icon{background:var(--fb-accent-ink,#007a9f);color:#fff} /* Пояснения и ошибки */ .market-note{align-items:flex-start} .market-note>.ck-ico{width:20px;height:20px;margin-top:-1px} .privacy-note{display:flex;align-items:flex-start;gap:10px} .privacy-note>.ck-ico{width:18px;height:18px} /* Экран «спасибо» */ .success-icon .ck-ico{width:38px;height:38px;vertical-align:0} /* Поле с $ слева: значок вместо символа, текст отодвинут под него */ .input-wrap .prefix{display:flex;align-items:center;left:14px;color:#78909a} .input-wrap .prefix .ck-ico{width:18px;height:18px;vertical-align:0} .input-wrap input.with-prefix{padding-left:42px} /* Стрелки в кнопках и ссылках: значки вместо символов → ← */ .primary-btn .ck-ico,.secondary-btn .ck-ico{width:18px;height:18px;vertical-align:0} .secondary-btn{display:inline-flex;align-items:center;gap:8px} .primary-btn .ck-ico{transition:transform .25s ease} .primary-btn:hover .ck-ico{transform:translateX(3px)} .secondary-btn:hover .ck-ico{transform:translateX(-3px)} .secondary-btn .ck-ico{transition:transform .25s ease} .text-link,.areas-cta{display:inline-flex;align-items:center;gap:8px} .text-link .ck-ico,.areas-cta .ck-ico{width:18px;height:18px;vertical-align:0;transition:transform .25s ease} .text-link:hover .ck-ico,.areas-cta:hover .ck-ico{transform:translateX(3px)} /* Карточка суммы: −/+ и карандаш */ .card-step .ck-ico{width:18px;height:18px;vertical-align:0} .card-pencil .ck-ico{width:16px;height:16px;vertical-align:-.1em} /* Стрелка на карточке города — тот же значок, что и в кнопках */ .city-card-name::after{content:"";width:18px;height:18px;flex:0 0 auto;background:currentColor; -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3Cpath d='M13 6l6 6-6 6'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3Cpath d='M13 6l6 6-6 6'/%3E%3C/svg%3E") center/contain no-repeat} /* --- Выпадающие списки: своя стрелка, отодвинутая от края ---------------- Системная стрелка стоит вплотную к рамке и в каждом браузере своя. Эта — тот же значок, что и остальные (chevron, контур 1.8). Правило с :focus нужно потому, что styles.css на фокусе задаёт background целиком и иначе стирал бы стрелку. */ select:not([multiple]):not([size]), select:not([multiple]):not([size]):focus, select:not([multiple]):not([size]):hover{ -webkit-appearance:none;-moz-appearance:none;appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236a7e88' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat; background-position:right 16px center;background-size:18px 18px; padding-right:48px; } select::-ms-expand{display:none} /* --- Числовые поля без стрелок прокрутки --------------------------------- Число вводится с клавиатуры (на телефоне открывается цифровая), рядом есть ползунки; мелкие стрелки только мешали и сдвигали текст. */ input[type=number]{-moz-appearance:textfield;appearance:textfield} input[type=number]::-webkit-inner-spin-button, input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;appearance:none;margin:0} /* --- Заголовки блоков главной: одна шкала ------------------------------- Было 52 / 34 / 24px, у двух блоков — другой шрифт и насыщенность. Теперь все h2 — шрифт заголовков, размер и начертание из Настроек → Text style. Настройка отдельного блока (Content → Home blocks) по-прежнему сильнее: её правило стоит в