/* ============================================================ ЦВЕТА И ПЕРЕМЕННЫЕ. Тут меняется вся палитра сайта. --bg : фон страницы (как в макете, тёмный) --gold : акцент (кнопка/линии) --head-h : высота шапки (для якорей, чтобы блок не прятался под ней) ============================================================ */ :root{ --bg:#0a0d15;--bg-2:#0c0f18;--bg-footer:#0a0c12; --line:rgba(255,255,255,.09);--line-soft:rgba(255,255,255,.055); --text:#f3f4f6;--muted:#9aa0ad;--muted-2:#6c7280; --gold:#c4a574;--gold-soft:#d9bf8e;--gold-deep:#a8895a;--red:#cf0a2c; --maxw:1280px;--head-h:130px; } *{box-sizing:border-box;margin:0;padding:0} /* scroll-behavior:smooth убран намеренно: на живом сайте ленивые картинки, догружаясь во время плавной прокрутки, обрывали её на полпути (якорь не доезжал до блока). Мгновенный переход надёжен; scroll-padding-top держит отступ под липкой шапкой. */ html{-webkit-text-size-adjust:100%;scroll-padding-top:var(--head-h)} /* overflow-x:clip (а не hidden!) — hidden делает прокручиваемым контейнером, из-за чего window.scrollTo/scrollIntoView перестают работать и якорные ссылки в мобильном меню «не перебрасывают» к блокам. clip прячет горизонтальный вылет, но НЕ создаёт скролл-контейнер — прокрутка страницы и якоря работают штатно. */ body{font-family:'Montserrat',sans-serif;background:var(--bg);color:var(--text);line-height:1.5;-webkit-font-smoothing:antialiased;overflow-x:clip} a{color:inherit;text-decoration:none} img{display:block;max-width:100%} .wrap{max-width:var(--maxw);margin:0 auto;padding:0 40px} /* ===================== ШАПКА (фиксируется при прокрутке) ===================== */ .site-header{position:sticky;top:0;z-index:160;background:rgba(10,13,21,.86);backdrop-filter:blur(14px);border-bottom:1px solid var(--line-soft);transition:box-shadow .25s,background .25s} .site-header.scrolled{background:rgba(8,11,18,.96);box-shadow:0 10px 40px rgba(0,0,0,.5)} .topbar{border-bottom:1px solid var(--line-soft);font-size:12px;color:var(--muted)} .topbar .wrap{display:flex;align-items:center;justify-content:space-between;padding-top:10px;padding-bottom:10px} .topbar-loc{display:flex;flex-direction:column;line-height:1.35;letter-spacing:.02em} .topbar-loc b{color:var(--text);font-weight:500} .topbar-right{display:flex;align-items:center;gap:26px} .topbar-phone{color:var(--text);font-weight:600;font-size:15px;transition:color .2s} .topbar-phone:hover{color:var(--gold-soft)} .topbar-links{display:flex;align-items:center;gap:18px;font-size:11px;font-weight:600;letter-spacing:.12em;text-transform:uppercase} .topbar-links a{color:var(--muted);transition:color .2s}.topbar-links a:hover{color:var(--text)} .topbar-cta{color:#1a140a !important;background:linear-gradient(135deg,var(--gold-soft),var(--gold) 60%,var(--gold-deep));padding:7px 16px;border-radius:6px;font-weight:700;box-shadow:0 6px 16px rgba(196,165,116,.22);transition:transform .2s,box-shadow .2s} .topbar-cta:hover{transform:translateY(-1px);box-shadow:0 10px 22px rgba(196,165,116,.34)} .topbar-sep{width:1px;height:14px;background:var(--line)} .mainbar .wrap{display:flex;align-items:center;justify-content:space-between;gap:32px;padding-top:16px;padding-bottom:16px;transition:padding .25s} .site-header.scrolled .mainbar .wrap{padding-top:11px;padding-bottom:11px} .logo{display:flex;align-items:center;gap:16px;flex-shrink:0;z-index:210} .logo-img{height:40px;width:auto;transition:height .25s} .site-header.scrolled .logo-img{height:34px} .logo-text{display:flex;flex-direction:column;align-items:center;line-height:1;border-left:1px solid var(--line);padding-left:16px} /* padding-left = letter-spacing — компенсация «висящего» интервала после последнего символа, чтобы бейдж снизу был оптически по центру относительно слова сверху. Значение интервала задано через --ls, чтобы можно было править одним правилом. */ .logo-text .dealer{--ls:.18em;font-weight:600;letter-spacing:var(--ls);padding-left:var(--ls);font-size:16px;text-align:center;white-space:nowrap} .logo-badge{--ls:.14em;margin-top:7px;font-size:9px;font-weight:600;letter-spacing:var(--ls);padding:2px 7px 2px calc(7px + var(--ls));text-transform:uppercase;color:var(--gold-soft);border:1px solid rgba(196,165,116,.35);border-radius:3px;text-align:center} nav.main-nav{display:flex;align-items:center;gap:30px} nav.main-nav a{font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);position:relative;padding:4px 0;transition:color .2s;white-space:nowrap} nav.main-nav a::after{content:"";position:absolute;left:0;bottom:-3px;height:1px;width:0;background:var(--gold);transition:width .25s} nav.main-nav a:hover{color:var(--text)}nav.main-nav a:hover::after{width:100%} .nav-sub{display:none} /* видно только в мобильном меню — см. медиазапрос ниже */ .burger{display:none;flex-direction:column;gap:5px;background:none;border:0;cursor:pointer;padding:8px;z-index:210} .burger span{width:24px;height:2px;background:var(--text);transition:.3s} .burger.open span:nth-child(1){transform:translateY(7px) rotate(45deg)} .burger.open span:nth-child(2){opacity:0} .burger.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)} .nav-back{display:none;position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:150;opacity:0;pointer-events:none;transition:opacity .3s} .nav-back.show{opacity:1;pointer-events:auto} /* ===================== HERO + СЕТКА МОДЕЛЕЙ ===================== */ .hero{padding:54px 0 30px;text-align:center} .hero h1{font-weight:300;font-size:clamp(30px,5vw,54px);letter-spacing:.18em;text-transform:uppercase} .hero .accent{display:inline-block;width:54px;height:2px;background:var(--gold);margin:22px auto 0} .models{padding:6px 0 70px} .grid{display:grid;grid-template-columns:repeat(3,1fr);gap:34px 30px} /* 3 колонки на десктопе */ .card{display:block;background:linear-gradient(180deg,rgba(255,255,255,.018),rgba(255,255,255,0));border:1px solid var(--line-soft);border-radius:6px;padding:14px 18px 24px;transition:border-color .3s,background .3s} .card:hover{border-color:rgba(196,165,116,.32);background:linear-gradient(180deg,rgba(196,165,116,.05),rgba(255,255,255,0))} .card-stage{position:relative;aspect-ratio:16/10;display:grid;place-items:center;border-radius:5px;overflow:hidden} .card-stage::before{content:"";position:absolute;left:50%;bottom:13%;width:74%;height:30%;transform:translateX(-50%);background:radial-gradient(ellipse at center,rgba(170,185,210,.14),rgba(170,185,210,0) 70%);filter:blur(5px)} .car-thumb{position:relative;z-index:1;width:calc(96% * var(--thumb-scale,1));max-width:none;object-fit:contain;transition:transform .45s cubic-bezier(.2,.8,.2,1);filter:drop-shadow(0 16px 20px rgba(0,0,0,.5))} .card:hover .car-thumb{transform:scale(1.07)} /* фото слегка увеличивается при наведении */ .card-eyebrow{margin-top:12px;font-size:10px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:var(--gold-soft)} .card-name{margin-top:5px;font-size:26px;font-weight:600;letter-spacing:.04em} /* ===================== ДЕТАЛЬНЫЙ БЛОК МОДЕЛИ ===================== */ .detail{position:relative; /* отступ якоря под шапкой задаёт html{scroll-padding-top} */ background:radial-gradient(1000px 560px at 24% 40%, rgba(196,165,116,.06), transparent 60%), radial-gradient(820px 540px at 86% 16%, rgba(90,110,150,.07), transparent 55%),var(--bg); border-top:1px solid var(--line-soft)} .detail .wrap{padding-top:56px;padding-bottom:60px} .backlink{display:inline-flex;align-items:center;gap:8px;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted-2);margin-bottom:18px;transition:color .2s} .backlink:hover{color:var(--gold-soft)} .model{display:grid;grid-template-columns:1.08fr .92fr;gap:56px;align-items:center} /* .flip — переворачивает блок (фото справа). Ставится автоматически на чётные модели */ .detail.flip .left{order:2}.detail.flip .right{order:1} .eyebrow{display:flex;align-items:center;gap:14px;font-size:11px;font-weight:600;letter-spacing:.34em;text-transform:uppercase;color:var(--gold-soft)} .eyebrow::before{content:"";width:34px;height:1px;background:linear-gradient(90deg,var(--gold),transparent)} .title{font-weight:300;font-size:clamp(44px,7vw,78px);line-height:.96;margin:12px 0 0}.title b{font-weight:700} .lede{margin-top:14px;max-width:48ch;color:var(--muted);font-weight:300;font-size:14.5px;line-height:1.7} /* СЦЕНА с авто. .blend = фото на ЧЁРНОМ фоне (накладывается через mix-blend-mode:lighten) */ .stage{position:relative;height:240px;display:flex;align-items:center;justify-content:center;margin:10px 0 4px} .stage.blend{background:transparent} /* фон НЕ закрываем — сквозь lighten виден основной фон сайта */ .stage::after{content:"";position:absolute;left:50%;bottom:8%;width:64%;height:30px;transform:translateX(-50%);background:radial-gradient(ellipse at center,rgba(150,170,205,.16),transparent 70%);filter:blur(7px);z-index:0} .stage.blend::after{display:none} /* Размер задаётся ВЫСОТОЙ — так машины с разной шириной кадра выглядят одинаково крупно. max-width:100% гарантирует, что широкое фото (HS5) не выйдет за границы колонки. */ .stage img{position:relative;z-index:1;height:100%;width:auto;max-width:100%;object-fit:contain;transition:opacity .25s ease} .stage:not(.blend) img{filter:drop-shadow(0 22px 26px rgba(0,0,0,.5))} /* тень для фото с прозрачным фоном */ .stage.blend img{mix-blend-mode:lighten;max-height:80%} /* растворяет чёрный фон фото + делает авто компактнее */ .specs{display:grid;grid-template-columns:repeat(4,1fr);margin-top:16px;border-top:1px solid var(--line-soft);border-bottom:1px solid var(--line-soft)} .spec{padding:18px 8px;text-align:center;position:relative} .spec + .spec::before{content:"";position:absolute;left:0;top:24%;height:52%;width:1px;background:var(--line-soft)} .spec svg{width:21px;height:21px;stroke:var(--gold-soft);stroke-width:1.5;fill:none;opacity:.9} .spec .val{margin-top:9px;font-size:27px;font-weight:600;line-height:1} .spec .lbl{margin-top:7px;font-size:10.5px;color:var(--muted-2);letter-spacing:.03em;line-height:1.35} .colors{display:flex;align-items:center;gap:20px;margin-top:20px;flex-wrap:wrap} .swatches{display:flex;gap:13px;flex-wrap:wrap} .sw{width:30px;height:30px;border-radius:50%;cursor:pointer;position:relative;box-shadow:inset 0 0 0 1px rgba(255,255,255,.2);transition:transform .2s} .sw::after{content:"";position:absolute;inset:-5px;border-radius:50%;border:1px solid transparent;transition:border-color .25s} .sw:hover{transform:scale(1.09)}.sw.active::after{border-color:var(--gold)} .colors .cname{font-size:12px;letter-spacing:.05em;color:var(--muted)}.colors .cname b{color:var(--text);font-weight:600} .offer{border:1px solid var(--line);border-radius:10px;overflow:hidden;background:linear-gradient(180deg,rgba(255,255,255,.035),rgba(255,255,255,.008));backdrop-filter:blur(6px)} .offer-head{display:flex;border-bottom:1px solid var(--line-soft)} .offer-benefit{flex:1.3;padding:20px 26px;position:relative;background:linear-gradient(135deg,rgba(196,165,116,.16),rgba(196,165,116,.03))} .offer-benefit::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:linear-gradient(var(--gold-soft),var(--gold-deep))} .offer .cap{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)} .offer .big{font-size:31px;font-weight:700;margin-top:5px;background:linear-gradient(180deg,#fff,var(--gold-soft));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent} .offer .big-price{font-size:23px;white-space:nowrap} /* длинная цена — мельче, чем «0,01%», и без переноса */ .offer-date{flex:1;padding:20px 26px;display:flex;flex-direction:column;justify-content:center} .offer-date .d{font-size:22px;font-weight:600;margin-top:5px} .badge-stock{display:inline-flex;align-items:center;gap:8px;margin:18px 26px 0;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:#76d29a} .badge-stock .dot{width:7px;height:7px;border-radius:50%;background:#46c97f;box-shadow:0 0 0 3px rgba(70,201,127,.18)} .benefits{list-style:none;padding:14px 26px 4px} .benefits li{display:flex;align-items:flex-start;gap:13px;padding:11px 0;border-bottom:1px solid var(--line-soft);font-size:14.5px} .benefits li:last-child{border-bottom:0} .benefits .ic{flex:0 0 21px;height:21px;border-radius:50%;display:grid;place-items:center;margin-top:1px;background:rgba(196,165,116,.14);color:var(--gold-soft);font-size:11px} .benefits b{font-weight:600} .cta{padding:12px 26px 26px;display:flex;flex-direction:column;gap:11px} .btn{position:relative;display:flex;align-items:center;justify-content:center;gap:10px;padding:16px 24px;font-family:inherit;font-size:12.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;border-radius:7px;cursor:pointer;border:1px solid var(--line);background:transparent;color:var(--text);transition:.28s;overflow:hidden} .btn .arr{transition:transform .28s}.btn:hover .arr{transform:translateX(5px)} .btn-ghost:hover{border-color:rgba(196,165,116,.5);background:rgba(196,165,116,.06)} .btn-primary{border:0;color:#1a140a;font-weight:700;background:linear-gradient(135deg,var(--gold-soft),var(--gold) 55%,var(--gold-deep));box-shadow:0 12px 28px rgba(196,165,116,.22)} .btn-primary::after{content:"";position:absolute;top:0;left:-120%;width:55%;height:100%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.5),transparent);transform:skewX(-20deg)} .btn-primary:hover{box-shadow:0 16px 36px rgba(196,165,116,.34);transform:translateY(-1px)} .btn-primary:hover::after{animation:shine .85s ease} @keyframes shine{to{left:140%}} /* ===================== ФУТЕР ===================== */ .site-footer{background:var(--bg-footer);border-top:1px solid var(--line-soft);padding:56px 0 0} .footer-top{display:flex;align-items:center;justify-content:space-between;gap:40px;flex-wrap:wrap;padding-bottom:38px;border-bottom:1px solid var(--line-soft)} .footer-brand{display:flex;align-items:center;gap:16px} .footer-brand .logo-img{height:46px} .footer-contacts{text-align:right} .footer-contacts .lbl{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted-2);margin-bottom:14px} .footer-contacts .row{display:flex;align-items:center;justify-content:flex-end;gap:22px;flex-wrap:wrap} .footer-cta{font-size:11px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);transition:color .2s}.footer-cta:hover{color:var(--text)} .footer-phone{font-size:18px;font-weight:600;transition:color .2s}.footer-phone:hover{color:var(--gold-soft)} /* Раскрывающаяся «Юридическая информация» в самом низу страницы. Находится ПОСЛЕ футера — это отдельная тёмная полоса, шириной во всю ширину окна. */ .legal-disclosure{background:#06080d;border-top:1px solid var(--line-soft)} /* Жёстко прячем все варианты дефолтного маркера у

*/ .legal-disclosure summary{list-style:none;cursor:pointer;padding:0;display:block;-webkit-user-select:none;user-select:none} .legal-disclosure summary::-webkit-details-marker{display:none} .legal-disclosure summary::marker{content:""} .legal-summary-inner{display:flex;align-items:center;justify-content:space-between;gap:24px; max-width:var(--maxw);margin:0 auto;padding:22px 40px;transition:background .2s} .legal-disclosure summary:hover .legal-summary-inner{background:rgba(196,165,116,.03)} .legal-title{display:inline-flex;align-items:center;gap:14px;font-size:11px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:var(--gold-soft)} .legal-eyebrow-line{display:inline-block;width:28px;height:1px;background:linear-gradient(90deg,var(--gold),transparent)} .legal-toggle{display:inline-flex;align-items:center;gap:10px;font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);transition:color .2s} .legal-disclosure summary:hover .legal-toggle{color:var(--text)} .legal-chev{width:7px;height:7px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg);transition:transform .25s} .legal-disclosure[open] .legal-chev{transform:rotate(-135deg)} .legal-toggle-text::before{content:"Подробнее"} .legal-disclosure[open] .legal-toggle-text::before{content:"Свернуть"} .legal-body{max-width:var(--maxw);margin:0 auto;padding:6px 40px 36px;color:var(--muted-2);font-size:12px;line-height:1.7;font-weight:300;border-top:1px solid var(--line-soft);padding-top:24px} .legal-body p + p{margin-top:14px} .legal-body b{color:var(--muted);font-weight:500} .footer-bottom{display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;padding:22px 0 30px;font-size:12px;color:var(--muted-2)} .footer-bottom .links{display:flex;flex-wrap:wrap;gap:20px}.footer-bottom a{transition:color .2s}.footer-bottom a:hover{color:var(--text)} /* ====== Куки-баннер ====== */ /* display:flex ниже перебивает атрибут hidden, поэтому явно скрываем по [hidden] — иначе невидимый баннер висит внизу и перехватывает клики (не выбрать цвет авто). */ .cookie-banner[hidden]{display:none} .cookie-banner{position:fixed;left:16px;right:16px;bottom:16px;z-index:90;display:flex;align-items:center;gap:20px; padding:16px 22px;border-radius:12px;background:rgba(12,15,24,.96);border:1px solid var(--line); box-shadow:0 20px 50px rgba(0,0,0,.5);backdrop-filter:blur(10px);max-width:880px;margin:0 auto; opacity:0;transform:translateY(12px);transition:opacity .3s,transform .3s} .cookie-banner.visible{opacity:1;transform:translateY(0)} .cookie-text{flex:1;font-size:13px;color:var(--muted);line-height:1.55} .cookie-text a{color:var(--gold-soft);text-decoration:underline;text-underline-offset:2px} .cookie-accept{padding:12px 22px;font-size:12px;flex-shrink:0} /* Визуально «приглушённая» кнопка отправки, пока не отмечены оба согласия. HTML5-валидация всё равно сработает при попытке отправить — не блокируем клик. */ .btn.is-disabled{opacity:.5;filter:saturate(.6)} /* плавающая кнопка звонка */ .fab{position:fixed;right:30px;bottom:32px;width:58px;height:58px;border-radius:50%;background:var(--red);display:grid;place-items:center;box-shadow:0 14px 30px rgba(207,10,44,.45);z-index:60} .fab svg{width:24px;height:24px;fill:#fff} /* pointer-events:none — пульсирующее кольцо декоративное и не должно перехватывать клики по контенту (иначе у нижнего края экрана не выбрать цвет авто). */ .fab::before{content:"";position:absolute;inset:0;border-radius:50%;border:2px solid var(--red);animation:pulse 2.2s ease-out infinite;pointer-events:none} @keyframes pulse{0%{transform:scale(1);opacity:.7}100%{transform:scale(1.7);opacity:0}} /* ========================================================= ОБЩИЕ ЭЛЕМЕНТЫ СЕКЦИЙ (кредит / трейд-ин / контакты) ========================================================= */ .section{padding:80px 0;border-top:1px solid var(--line-soft); background:radial-gradient(900px 500px at 20% 30%,rgba(196,165,116,.05),transparent 60%),var(--bg)} .section + .section{border-top:1px solid var(--line-soft)} .section-head{text-align:center;max-width:760px;margin:0 auto 38px} .section-head .eyebrow{justify-content:center} .eyebrow-line{display:inline-block;width:34px;height:1px;background:linear-gradient(90deg,var(--gold),transparent);margin-right:14px} .section-title{font-weight:300;font-size:clamp(28px,4.2vw,44px);letter-spacing:.04em;margin-top:10px;line-height:1.15} .section-lede{margin-top:14px;color:var(--muted);font-size:15px;line-height:1.7;font-weight:300} .section-lede.muted{color:var(--muted-2)} /* ============ ФОРМЫ ============ */ .form{max-width:920px;margin:0 auto} .form-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px 22px} .field{display:flex;flex-direction:column;gap:8px} .field-range,.field-submit{grid-column:1/-1} .field label{font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)} .field label .muted{color:var(--muted-2);text-transform:none;letter-spacing:.02em;font-weight:400} .field input[type=text],.field input[type=tel],.field input[type=email],.field select{ width:100%;padding:14px 16px;font-family:inherit;font-size:15px;color:var(--text); background:rgba(255,255,255,.025);border:1px solid var(--line);border-radius:7px;outline:none;transition:.2s; -webkit-appearance:none;appearance:none} .field input:focus,.field select:focus{border-color:rgba(196,165,116,.55);background:rgba(196,165,116,.04)} .field input::placeholder{color:var(--muted-2)} .select-wrap{position:relative} .select-wrap::after{content:"";position:absolute;right:18px;top:50%;width:8px;height:8px;border-right:1.5px solid var(--gold-soft);border-bottom:1.5px solid var(--gold-soft);transform:translateY(-70%) rotate(45deg);pointer-events:none} .field select{padding-right:36px;cursor:pointer} .field select option{background:var(--bg-2);color:var(--text)} /* Кастомный слайдер */ .field-range label b{color:var(--text);font-weight:600} input[type=range]{ --p:50%;width:100%;height:6px;-webkit-appearance:none;appearance:none; background:linear-gradient(90deg,var(--gold) var(--p),rgba(255,255,255,.1) var(--p)); border-radius:3px;outline:none;cursor:pointer;margin:6px 0 2px} input[type=range]::-webkit-slider-thumb{ -webkit-appearance:none;width:22px;height:22px;border-radius:50%; background:linear-gradient(135deg,var(--gold-soft),var(--gold-deep)); box-shadow:0 4px 12px rgba(196,165,116,.4);cursor:pointer;border:0} input[type=range]::-moz-range-thumb{width:22px;height:22px;border-radius:50%; background:linear-gradient(135deg,var(--gold-soft),var(--gold-deep)); box-shadow:0 4px 12px rgba(196,165,116,.4);cursor:pointer;border:0} .range-meta{display:flex;justify-content:space-between;font-size:11px;color:var(--muted-2);letter-spacing:.04em} /* Чипы выбора срока */ .chip-group{display:flex;flex-wrap:wrap;gap:8px} .chip{position:relative;cursor:pointer} .chip input{position:absolute;opacity:0;pointer-events:none} .chip span{display:block;padding:12px 18px;font-size:13.5px;font-weight:600;color:var(--muted); border:1px solid var(--line);border-radius:7px;background:rgba(255,255,255,.025);transition:.2s} .chip input:checked + span{border-color:var(--gold);color:var(--text);background:rgba(196,165,116,.1)} .chip:hover span{border-color:rgba(196,165,116,.4);color:var(--text)} /* Согласие на обработку */ .consent{display:flex;align-items:flex-start;gap:12px;margin-top:18px;font-size:12.5px;color:var(--muted);line-height:1.55;cursor:pointer} .consent input{margin-top:2px;width:16px;height:16px;flex-shrink:0;accent-color:var(--gold)} .consent a{color:var(--gold-soft);text-decoration:underline;text-underline-offset:2px} .consent a:hover{color:var(--text)} /* Honeypot — невидимое поле */ .hp{position:absolute !important;left:-9999px !important;width:1px;height:1px;opacity:0} /* Сабмит-кнопка во всю ширину */ .field-submit .btn{width:100%} /* Статус отправки */ .form-status{margin-top:14px;padding:12px 16px;border-radius:7px;font-size:14px;line-height:1.45} .form-status.ok{background:rgba(70,201,127,.1);border:1px solid rgba(70,201,127,.35);color:#a5e9bf} .form-status.err{background:rgba(207,10,44,.1);border:1px solid rgba(207,10,44,.35);color:#f3a4b0} /* ============ СЕКЦИЯ "КРЕДИТ" ============ */ .section-credit .form{padding:32px;border:1px solid var(--line);border-radius:12px; background:linear-gradient(180deg,rgba(255,255,255,.025),rgba(255,255,255,.005));backdrop-filter:blur(6px)} /* ============ СЕКЦИЯ "ТРЕЙД-ИН" ============ */ .tradein-grid{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center} .tradein-text .eyebrow{justify-content:flex-start} .tradein-text .section-title{text-align:left;margin-top:14px} .tradein-text .section-lede{margin-top:18px} .tradein-points{list-style:none;margin-top:24px;display:grid;gap:12px} .tradein-points li{display:flex;align-items:flex-start;gap:13px;font-size:14.5px;color:var(--muted)} .tradein-points li b{color:var(--text);font-weight:600} .tradein-points .ic{flex:0 0 22px;height:22px;border-radius:50%;display:grid;place-items:center;background:rgba(196,165,116,.14);color:var(--gold-soft);font-size:12px} .form-card{padding:28px;border:1px solid var(--line);border-radius:12px; background:linear-gradient(180deg,rgba(255,255,255,.035),rgba(255,255,255,.008));backdrop-filter:blur(6px)} .form-card-head{padding-bottom:20px;margin-bottom:18px;border-bottom:1px solid var(--line-soft); background:linear-gradient(135deg,rgba(196,165,116,.1),transparent);margin:-28px -28px 20px;padding:22px 28px;border-radius:11px 11px 0 0} .form-card-head .cap{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)} .form-card-head .big{font-size:28px;font-weight:700;margin-top:4px; background:linear-gradient(180deg,#fff,var(--gold-soft));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent} .form-card .field{margin-bottom:14px} .form-card .btn{width:100%;margin-top:6px} /* ============ СЕКЦИЯ "КОНТАКТЫ" ============ */ .contacts-grid{display:grid;grid-template-columns:1fr 1.05fr;gap:48px;align-items:stretch} .contacts-info{display:flex;flex-direction:column;gap:24px} .contact-block{padding:28px;border:1px solid var(--line);border-radius:12px; background:linear-gradient(180deg,rgba(255,255,255,.025),rgba(255,255,255,.005))} .contact-h{font-size:18px;font-weight:600;letter-spacing:.04em;margin-bottom:18px;padding-bottom:14px;border-bottom:1px solid var(--line-soft)} .contact-row{display:flex;align-items:flex-start;gap:14px;padding:10px 0;font-size:14.5px;color:var(--text)} .contact-row + .contact-row{border-top:1px solid var(--line-soft)} .contact-row .ci{flex:0 0 20px;width:20px;height:20px;stroke:var(--gold-soft);fill:none;margin-top:2px} .contact-row a{transition:color .2s}.contact-row a:hover{color:var(--gold-soft)} .contact-actions{display:flex;flex-wrap:wrap;gap:10px} .contact-actions .btn{flex:1;min-width:160px} .contacts-map{min-height:380px;border:1px solid var(--line);border-radius:12px;overflow:hidden} .contacts-map iframe{width:100%;height:100%;min-height:380px;border:0;display:block;filter:contrast(.95) brightness(.92)} /* ============ ФУТЕР: блок реквизитов ============ */ .footer-info{display:grid;grid-template-columns:repeat(3,1fr);gap:32px;padding:30px 0;border-bottom:1px solid var(--line-soft)} .footer-col .footer-h{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted-2);margin-bottom:12px} .footer-col{font-size:13.5px;line-height:1.7} .footer-col .muted{color:var(--muted-2);font-size:12.5px} .footer-col a{transition:color .2s}.footer-col a:hover{color:var(--gold-soft)} /* ============ МОДАЛКА ============ */ .modal[hidden]{display:none} /* display:grid ниже перебивает hidden — скрываем явно */ .modal{position:fixed;inset:0;z-index:300;display:grid;place-items:center;padding:20px;opacity:0;transition:opacity .25s;pointer-events:none} .modal.open{opacity:1;pointer-events:auto} .modal-back{position:absolute;inset:0;background:rgba(0,0,0,.65);backdrop-filter:blur(6px)} .modal-body{position:relative;width:min(440px,100%);padding:34px 28px 28px;border-radius:14px; background:var(--bg-2);border:1px solid var(--line);box-shadow:0 30px 80px rgba(0,0,0,.5);transform:translateY(8px);transition:transform .25s} .modal.open .modal-body{transform:translateY(0)} .modal-close{position:absolute;top:10px;right:12px;width:36px;height:36px;border:0;background:transparent;color:var(--muted);font-size:26px;line-height:1;cursor:pointer;border-radius:50%;transition:.2s} .modal-close:hover{background:rgba(255,255,255,.06);color:var(--text)} .modal .section-title{font-size:24px;text-align:left;margin-top:8px} .modal .section-lede{font-size:13px} .modal .form{max-width:none} .modal .field{margin-bottom:14px} .modal .btn{width:100%} /* ============ СТРАНИЦА ПОЛИТИКИ ============ */ .policy{padding:60px 0 80px} .policy .backlink{margin-bottom:22px} .policy h1{font-weight:300;font-size:clamp(26px,4vw,38px);letter-spacing:.02em;line-height:1.2} .policy h2{font-weight:600;font-size:17px;letter-spacing:.02em;margin-top:32px;margin-bottom:10px;color:var(--gold-soft)} .policy p,.policy li{font-size:14.5px;line-height:1.75;color:var(--muted);font-weight:300} .policy ul{padding-left:22px;margin:10px 0} .policy a{color:var(--gold-soft);text-decoration:underline;text-underline-offset:2px} .policy .muted{color:var(--muted-2);font-size:13px} .policy .wrap{max-width:880px} /* ========================================================= МОБИЛЬНАЯ АДАПТАЦИЯ 1080 — планшет: уменьшаем отступы навигации 980 — узкий планшет: детальный блок в одну колонку 760 — телефон: бургер-меню, сетка в 2 колонки 600 — узкий телефон: сетка в 1 колонку, всё компактнее ========================================================= */ @media(max-width:1080px){nav.main-nav{gap:18px}nav.main-nav a{font-size:11px}.wrap{padding:0 28px}} @media(max-width:980px){ .model{grid-template-columns:1fr;gap:30px} .detail.flip .left,.detail.flip .right{order:0} /* на узких экранах текст всегда сверху */ .stage{height:240px}.stage img{max-height:225px} .stage.blend img{max-width:74%} .lede{max-width:none} .tradein-grid{grid-template-columns:1fr;gap:32px} .contacts-grid{grid-template-columns:1fr;gap:24px} .footer-info{grid-template-columns:1fr 1fr;gap:24px} } @media(max-width:760px){ :root{--head-h:110px} .section{padding:56px 0} .section-head{margin-bottom:28px} .section-credit .form{padding:22px 18px} .form-grid{grid-template-columns:1fr;gap:14px} .form-card{padding:22px 18px} .form-card-head{margin:-22px -18px 18px;padding:20px 22px} .contact-block{padding:22px 18px} .contact-actions{flex-direction:column} .contact-actions .btn{width:100%} .contacts-map,.contacts-map iframe{min-height:280px} .footer-info{grid-template-columns:1fr;gap:18px;padding:22px 0} .modal{padding:14px} .modal-body{padding:28px 22px 22px} .cookie-banner{flex-direction:column;align-items:stretch;gap:14px;padding:14px 16px} .cookie-accept{width:100%} .legal-summary-inner{padding:18px 28px} .legal-body{padding-left:28px;padding-right:28px} .legal-title{font-size:10px;letter-spacing:.18em} .burger{display:flex} nav.main-nav{position:fixed;top:0;right:0;height:100dvh;width:min(330px,82vw);flex-direction:column;align-items:flex-start;justify-content:center;gap:24px;background:var(--bg-2);padding:80px 36px 40px;transform:translateX(100%);transition:transform .32s cubic-bezier(.2,.8,.2,1);z-index:200;border-left:1px solid var(--line);box-shadow:-20px 0 50px rgba(0,0,0,.5)} nav.main-nav.open{transform:translateX(0)} nav.main-nav a{font-size:16px;width:100%;color:var(--text)} /* Подменю с моделями под «Автомобили в наличии» — только в мобильном меню */ .nav-sub{display:flex;flex-direction:column;gap:14px;width:100%;margin:-8px 0 4px;padding-left:16px;border-left:1px solid var(--line)} .nav-sub a.nav-sub-link{font-size:14px;font-weight:500;letter-spacing:.06em;color:#cbd0d9;text-transform:none} .nav-sub a.nav-sub-link:hover{color:var(--gold-soft)} .nav-back{display:block} .topbar-loc{display:none}.topbar .wrap{justify-content:flex-end} .grid{grid-template-columns:repeat(2,1fr);gap:14px} .hero{display:none} /* "Модельный ряд" на мобильных скрываем */ .models{padding:20px 0 50px} .card{padding:8px 10px 14px;border-radius:5px} .card-name{font-size:18px;margin-top:3px} .card-eyebrow{margin-top:8px;font-size:9px;letter-spacing:.18em} .car-thumb{width:96%} .stage{height:220px} .stage.blend img{max-width:280px} } @media(max-width:600px){ .wrap{padding:0 16px} .section{padding:44px 0} .section-title{font-size:26px} .chip-group{gap:6px} .chip span{padding:10px 14px;font-size:13px} .field input,.field select{font-size:16px;padding:13px 14px} /* 16px чтобы iOS не зумил */ .consent{font-size:12px} .form-card-head .big{font-size:24px} .tradein-points li{font-size:13.5px} .contact-h{font-size:16px} .contact-row{font-size:13.5px} .modal-body{padding:24px 18px 18px} .modal .section-title{font-size:22px} .policy{padding:36px 0 50px} .policy h2{margin-top:24px} .legal-summary-inner{padding:16px 16px} .legal-body{padding-left:16px;padding-right:16px;font-size:11.5px} .legal-toggle-text{display:none} /* на узком экране только шеврон */ .topbar-links{display:none}.topbar .wrap{justify-content:center;padding-top:8px;padding-bottom:8px} .logo{gap:10px} .logo-text{padding-left:10px} .logo-text .dealer{--ls:.1em;font-size:12.5px} .logo-badge{--ls:.1em;font-size:8px;padding:2px 5px 2px calc(5px + var(--ls))}.logo-img{height:30px} .grid{grid-template-columns:repeat(2,1fr);gap:12px} /* на узком телефоне всё ещё 2 колонки, но компактнее */ .card{padding:6px 8px 12px} .card-name{font-size:16px} .card-eyebrow{font-size:8.5px} .detail .wrap{padding-top:38px;padding-bottom:42px} .title{font-size:clamp(40px,15vw,60px)}.lede{font-size:14px} .stage{height:180px;margin-top:6px} .stage.blend img{max-width:240px} .specs{grid-template-columns:repeat(2,1fr)} /* характеристики 2x2 */ .spec{padding:15px 6px} .spec:nth-child(1)::before,.spec:nth-child(3)::before{display:none} .spec:nth-child(3),.spec:nth-child(4){border-top:1px solid var(--line-soft)} .spec .val{font-size:24px} .offer-head{flex-direction:column} .offer-benefit::before{width:100%;height:3px;top:0;bottom:auto} .offer .big{font-size:28px} .benefits li,.btn{font-size:13px}.btn{padding:15px 18px} .footer-top{flex-direction:column;align-items:flex-start;gap:24px} .footer-contacts{text-align:left}.footer-contacts .row{justify-content:flex-start} .footer-bottom{gap:12px} .fab{width:54px;height:54px;right:16px;bottom:16px} }