/* ТатМоторс — «ночной хром». Тёмная база + переливы (циан → фиолет → маджента → янтарь). Правила: контраст текста ≥ 4.5:1; на телефоне нет backdrop-filter и тяжёлых фильтров; prefers-reduced-motion выключает движение. */ @property --a { syntax: ''; inherits: false; initial-value: 0deg; } :root { --bg: #05060A; --s1: #0B0E15; --s2: #11151F; --s3: #171C28; --line: rgba(255, 255, 255, .08); --line2: rgba(255, 255, 255, .14); --tx: #EEF1F8; --mu: #A6AFC2; --mu2: #8E97AA; --c1: #7CF3FF; --c2: #8C7BFF; --c3: #FF7AD9; --c4: #FFC98A; --ok: #6CF0B8; --no: #FF8F9E; --iri: linear-gradient(100deg, #7CF3FF 0%, #8C7BFF 28%, #FF7AD9 55%, #FFC98A 78%, #7CF3FF 100%); --iri-soft: linear-gradient(100deg, rgba(124,243,255,.9), rgba(140,123,255,.9), rgba(255,122,217,.9), rgba(255,201,138,.9)); --chrome: linear-gradient(180deg, #FFFFFF 0%, #E6EBF6 42%, #9AA3B8 52%, #F2F5FC 70%, #C9D0DF 100%); --r: 24px; --r2: 16px; --tap: 46px; --wrap: 1240px; --ff: 'Manrope', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; --fm: 'JetBrains Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace; --ease: cubic-bezier(.2, .8, .2, 1); color-scheme: dark; } *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; scroll-padding-top: 84px; -webkit-text-size-adjust: 100%; } body { margin: 0; background: var(--bg); color: var(--tx); font: 400 17px/1.6 var(--ff); overflow-x: hidden; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } img, svg, video, canvas { display: block; max-width: 100%; } a { color: inherit; } p { margin: 0; } button, input, select, textarea { font: inherit; color: inherit; } :focus-visible { outline: 2px solid var(--c1); outline-offset: 3px; border-radius: 8px; } .wrap { width: min(100% - 40px, var(--wrap)); margin-inline: auto; } .skip { position: absolute; left: -9999px; top: 8px; z-index: 100; background: #fff; color: #000; padding: 10px 14px; border-radius: 10px; } .skip:focus { left: 12px; } .ic { width: 22px; height: 22px; fill: none; stroke: url(#gIc); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; flex: none; } .ic--xl { width: 44px; height: 44px; stroke-width: 1.4; } /* ── Фон ───────────────────────────────────────────── */ .bg { position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; background: linear-gradient(180deg, #05070C 0%, #0A0F1A 30%, #121826 40%, #07090D 41%, #05060A 100%), var(--bg); } .bg canvas { position: absolute; inset: 0; width: 100%; height: 100%; opacity: .8; } /* 26.09.2026: сетка и цветное свечение убраны — фон теперь ночная дорога (js/app.js, road) */ .bg__grid, .bg__glow { display: none; } .bg::after { content: ""; position: absolute; left: 0; right: 0; top: 34%; height: 12%; pointer-events: none; background: radial-gradient(60% 100% at 50% 60%, rgba(255,190,120,.10), transparent 70%); } .bg__grid { position: absolute; inset: -20% -10% 0; opacity: .5; background-image: linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px); background-size: 64px 64px; -webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 40%, #000 30%, transparent 75%); mask-image: radial-gradient(ellipse 80% 60% at 50% 40%, #000 30%, transparent 75%); } .bg__glow { position: absolute; left: 50%; top: 20%; width: 60vmax; height: 60vmax; margin-left: -30vmax; border-radius: 50%; background: conic-gradient(from var(--a), rgba(124,243,255,.10), rgba(140,123,255,.08), rgba(255,122,217,.10), rgba(255,201,138,.06), rgba(124,243,255,.10)); animation: spin 24s linear infinite; -webkit-mask-image: radial-gradient(closest-side, #000, transparent); mask-image: radial-gradient(closest-side, #000, transparent); } .bg__grain { position: absolute; inset: 0; opacity: .07; 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='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); } @keyframes spin { to { --a: 360deg; } } /* ── Текстовые приёмы ──────────────────────────────── */ .iri-text { background: var(--iri); background-size: 250% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: iri 8s linear infinite; } .iri-text--warm { background: linear-gradient(100deg, #FFC98A, #FF7AD9, #8C7BFF, #FFC98A); background-size: 250% 100%; -webkit-background-clip: text; background-clip: text; } @keyframes iri { to { background-position: -250% 0; } } .h1, .h2, .h3 { font-weight: 800; letter-spacing: -.025em; margin: 0; } .h1 { font-size: clamp(40px, 6.2vw, 84px); line-height: 1.02; background: var(--chrome); -webkit-background-clip: text; background-clip: text; color: transparent; } .h1 .iri-text { -webkit-text-fill-color: transparent; } .h2 { font-size: clamp(32px, 4.4vw, 58px); line-height: 1.06; } .h3 { font-size: clamp(24px, 2.6vw, 34px); line-height: 1.15; } .lead { font-size: clamp(17px, 1.45vw, 20px); color: #C9D0DE; max-width: 36em; } .eyebrow { display: inline-flex; align-items: center; gap: 10px; font: 600 13px/1 var(--fm); letter-spacing: .08em; text-transform: uppercase; color: var(--mu); } .pulse { width: 9px; height: 9px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 0 0 rgba(108,240,184,.6); animation: pulse 2.2s infinite; } @keyframes pulse { 70% { box-shadow: 0 0 0 12px rgba(108,240,184,0); } 100% { box-shadow: 0 0 0 0 rgba(108,240,184,0); } } /* ── Стекло и кромки ───────────────────────────────── */ .glass { position: relative; border-radius: var(--r); background: linear-gradient(160deg, rgba(23,28,40,.82), rgba(11,14,21,.78)) padding-box, conic-gradient(from var(--a), rgba(124,243,255,.55), rgba(140,123,255,.25), rgba(255,122,217,.5), rgba(255,201,138,.25), rgba(124,243,255,.55)) border-box; border: 1px solid transparent; animation: spin 14s linear infinite; box-shadow: 0 30px 80px -40px rgba(0,0,0,.8), inset 0 1px 0 rgba(255,255,255,.06); } .glass::after { content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background: radial-gradient(420px circle at var(--mx, 50%) var(--my, -30%), rgba(140,123,255,.14), transparent 60%); opacity: 0; transition: opacity .4s; } .glass:hover::after { opacity: 1; } @media (hover: hover) and (min-width: 861px) { .bar { background: rgba(5,6,10,.72); } .bar, .quick, .film__snd { -webkit-backdrop-filter: blur(14px) saturate(140%); backdrop-filter: blur(14px) saturate(140%); } } /* ── Кнопки: хромированная накладка из Blender (26.09.2026) ── Фон — рендер Cycles (_3d/btn.py → _3d/btn_slice.py): тонкая выпуклость по всем четырём краям, полированный хром в студийном свете. 9-slice через border-image: торцы по 18 px не тянутся, середина однородна по горизонтали и растягивается на любую ширину. --iri = светлый хром, --glass = чёрный хром в хромированном ободе. */ .btn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 54px; padding: 0 30px; border-radius: 9px; border: 0 solid transparent; cursor: pointer; text-decoration: none; font-weight: 800; font-size: 15.5px; letter-spacing: .02em; white-space: nowrap; isolation: isolate; overflow: hidden; background: none; border-image: url(../img/btn-light.webp?v=6) 0 54 fill / 0 18px / 0 stretch; box-shadow: 0 1px 1px rgba(0,0,0,.7), 0 12px 24px -12px rgba(0,0,0,.9); transition: transform .25s var(--ease), box-shadow .25s var(--ease), filter .25s var(--ease); will-change: transform; } .btn .ic { width: 20px; height: 20px; } /* перелив: тонкий блик медленно проходит по хрому раз в 8 с и сразу — при наведении */ .btn::after { content: ''; position: absolute; top: -30%; bottom: -30%; left: -40%; width: 22%; z-index: -1; pointer-events: none; background: linear-gradient(100deg, transparent 0%, rgba(255,236,214,.16) 34%, rgba(255,255,255,.62) 50%, rgba(214,234,255,.16) 66%, transparent 100%); transform: skewX(-20deg); animation: sheen 8s cubic-bezier(.45,.05,.3,1) infinite; animation-delay: 1.5s; } .btn:hover::after { animation: sheen-h 1.1s var(--ease); } @keyframes sheen { 0% { left: -40%; } 16%, 100% { left: 125%; } } @keyframes sheen-h { from { left: -40%; } to { left: 125%; } } /* светлый хром: тёмная надпись с тонкой гравировкой */ .btn--iri { color: #14171D; text-shadow: 0 1px 0 rgba(255,255,255,.6), 0 -1px 0 rgba(0,0,0,.16); } .btn--iri .ic { stroke: #14171D; } /* чёрный хром в хромированном ободе: светлая надпись */ .btn--glass { color: #F1F3F8; text-shadow: 0 -1px 0 rgba(0,0,0,.85), 0 1px 0 rgba(255,255,255,.07); border-image-source: url(../img/btn-black.webp?v=6); } .btn--glass::after { background: linear-gradient(100deg, transparent 0%, rgba(255,236,214,.08) 34%, rgba(255,255,255,.3) 50%, rgba(214,234,255,.08) 66%, transparent 100%); } .btn:hover { transform: translateY(-1px); filter: brightness(1.05) contrast(1.03); box-shadow: 0 1px 1px rgba(0,0,0,.7), 0 18px 32px -14px rgba(0,0,0,.95), 0 0 22px -8px rgba(205,220,240,.35); } .btn--full { width: 100%; } /* нажатие: накладка «утапливается» */ .btn:active { transform: translateY(1px) scale(.985); filter: brightness(.9); box-shadow: 0 0 0 rgba(0,0,0,.7), 0 4px 8px -4px rgba(0,0,0,.8); transition-duration: .08s; } @media (prefers-reduced-motion: reduce) { .btn::after, .btn:hover::after { animation: none; opacity: 0; } } /* ── Шапка ─────────────────────────────────────────── */ .bar { position: sticky; top: 0; z-index: 50; background: rgba(5,6,10,.95); border-bottom: 1px solid var(--line); } .bar__in { display: flex; align-items: center; gap: 24px; height: 70px; } .logo { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; } .logo__mark { width: 38px; height: 38px; } .logo__mark svg { width: 100%; height: 100%; filter: drop-shadow(0 0 10px rgba(124,243,255,.35)); } .logo__txt { font-weight: 800; font-size: 19px; letter-spacing: .08em; } .logo__txt b { background: var(--iri); background-size: 250% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: iri 8s linear infinite; } .nav { display: flex; gap: 4px; margin-left: auto; } .nav a { text-decoration: none; color: var(--mu); font-weight: 600; font-size: 15px; padding: 10px 14px; border-radius: 999px; transition: color .25s, background .25s; } .nav a:hover, .nav a.on { color: var(--tx); background: rgba(255,255,255,.06); } .bar__tel { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; font: 700 15px/1 var(--fm); padding: 12px 18px; border-radius: 999px; background: linear-gradient(160deg, rgba(34,40,56,.9), rgba(16,19,28,.9)) padding-box, var(--iri) border-box; border: 1px solid transparent; } .bar__tel .ic { width: 18px; height: 18px; } .burger { display: none; width: var(--tap); height: var(--tap); border: 0; background: none; border-radius: 12px; cursor: pointer; position: relative; } .burger span { position: absolute; left: 12px; right: 12px; height: 2px; background: var(--tx); border-radius: 2px; transition: transform .3s var(--ease), top .3s var(--ease); } .burger span:first-child { top: 18px; } .burger span:last-child { top: 26px; } .burger[aria-expanded="true"] span:first-child { top: 22px; transform: rotate(45deg); } .burger[aria-expanded="true"] span:last-child { top: 22px; transform: rotate(-45deg); } /* ── Первый экран ──────────────────────────────────── */ .hero { position: relative; padding: 48px 0 34px; } .hero__in { display: grid; grid-template-columns: 1.02fr 1fr; gap: 44px; align-items: center; } .hero__txt { display: grid; gap: 24px; align-content: start; } .chips { display: flex; flex-wrap: wrap; gap: 10px; list-style: none; padding: 0; margin: 0; } .chips a { display: inline-flex; align-items: center; gap: 8px; min-height: 42px; padding: 0 16px 0 12px; border-radius: 999px; text-decoration: none; font-weight: 600; font-size: 15px; color: var(--tx); background: rgba(255,255,255,.045); border: 1px solid var(--line2); transition: background .3s, border-color .3s, transform .3s var(--ease); } .chips a:hover { background: rgba(140,123,255,.14); border-color: rgba(140,123,255,.6); transform: translateY(-2px); } .chips .ic { width: 18px; height: 18px; } .cta { display: flex; flex-wrap: wrap; gap: 14px; } .tt { display: flex; align-items: center; gap: 14px; padding: 12px 16px; border-radius: 18px; max-width: 480px; background: linear-gradient(100deg, rgba(0,122,61,.16), rgba(255,255,255,.03) 55%, rgba(200,16,46,.14)); border: 1px solid var(--line2); } .tt p { display: grid; font-size: 15px; line-height: 1.35; } .tt b { font-size: 17px; } .tt p span { color: var(--mu); } .tt__flag { width: 34px; height: 24px; border-radius: 5px; flex: none; overflow: hidden; background: linear-gradient(#0B8A48 0 46%, #fff 46% 54%, #D72A3F 54%); box-shadow: 0 0 0 1px rgba(255,255,255,.2); } .hero__stage { position: relative; display: grid; gap: 18px; } .stage { position: relative; aspect-ratio: 12 / 7.4; } .stage__poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; transition: opacity .8s var(--ease); filter: drop-shadow(0 30px 40px rgba(0,0,0,.55)); } .stage canvas { position: absolute; inset: 0; width: 100% !important; height: 100% !important; opacity: 0; transition: opacity .8s var(--ease); touch-action: pan-y; cursor: grab; } .stage.is-3d canvas { opacity: 1; } .stage.is-3d .stage__poster { opacity: 0; } .stage__ring { position: absolute; left: 8%; right: 8%; bottom: 3%; height: 26%; border-radius: 50%; background: radial-gradient(closest-side, rgba(140,123,255,.35), rgba(124,243,255,.12) 55%, transparent 72%); } .stage__ring--2 { left: 16%; right: 16%; bottom: 7%; height: 16%; background: none; border: 1.5px solid transparent; background: conic-gradient(from var(--a), #7CF3FF, #8C7BFF, #FF7AD9, #FFC98A, #7CF3FF) border-box; -webkit-mask: linear-gradient(#000 0 0) padding-box exclude, linear-gradient(#000 0 0); mask: linear-gradient(#000 0 0) padding-box exclude, linear-gradient(#000 0 0); animation: spin 7s linear infinite; opacity: .8; } .stage__floor { position: absolute; left: 0; right: 0; bottom: -4%; height: 18%; background: radial-gradient(closest-side, rgba(255,255,255,.07), transparent); } .stage__3d { position: absolute; right: 8px; top: 8px; min-height: 44px; padding: 0 18px; border-radius: 9px; border: 0 solid transparent; cursor: pointer; font-weight: 800; font-size: 14px; letter-spacing: .02em; color: #14171D; text-shadow: 0 1px 0 rgba(255,255,255,.6), 0 -1px 0 rgba(0,0,0,.16); background: none; border-image: url(../img/btn-light.webp?v=6) 0 54 fill / 0 15px / 0 stretch; box-shadow: 0 1px 1px rgba(0,0,0,.7), 0 8px 18px -8px rgba(0,0,0,.8); } .stage__3d:active { transform: translateY(1px) scale(.985); filter: brightness(.9); } @media (any-pointer: fine) { .stage__3d { display: none !important; } } .orbit { list-style: none; margin: 0; padding: 0; position: absolute; inset: 0; pointer-events: none; } .orbit li { position: absolute; display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 999px; font-weight: 700; font-size: 14px; white-space: nowrap; background: rgba(11,14,21,.86); border: 1px solid var(--line2); box-shadow: 0 10px 30px -10px rgba(0,0,0,.7); animation: float 6s ease-in-out infinite; animation-delay: calc(var(--d) * -2s); } .orbit li .ic { width: 18px; height: 18px; } .orbit li:nth-child(1) { left: 2%; top: 8%; } .orbit li:nth-child(2) { right: 0; top: 30%; } .orbit li:nth-child(3) { left: 10%; bottom: 6%; } @keyframes float { 50% { transform: translateY(-10px); } } .quick { padding: 20px; display: grid; gap: 12px; } .quick__t { font-weight: 800; font-size: 19px; } .quick__row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } .kpi { list-style: none; margin: 34px 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; } .kpi li { position: relative; padding: 20px 20px 18px; border-radius: 20px; background: rgba(255,255,255,.035); border: 1px solid var(--line); overflow: hidden; } .kpi li::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: var(--iri); background-size: 200% 100%; animation: iri 6s linear infinite; } .kpi b { font: 800 44px/1 var(--ff); letter-spacing: -.03em; background: var(--chrome); -webkit-background-clip: text; background-clip: text; color: transparent; } .kpi span { font: 700 16px/1 var(--fm); color: var(--c1); margin-left: 6px; } .kpi p { color: var(--mu); font-size: 14.5px; line-height: 1.4; margin-top: 8px; } /* ── Бегущая строка ────────────────────────────────── */ .ticker { overflow: hidden; border-block: 1px solid var(--line); background: linear-gradient(90deg, rgba(124,243,255,.05), rgba(255,122,217,.05)); padding: 16px 0; margin-top: 30px; } .ticker__row { display: flex; gap: 28px; width: max-content; animation: tick 46s linear infinite; font: 700 15px/1 var(--fm); text-transform: uppercase; letter-spacing: .06em; color: #C9D0DE; } .ticker__row span:nth-child(4n+1) { color: var(--c1); } @keyframes tick { to { transform: translateX(-50%); } } /* ── Секции ────────────────────────────────────────── */ .sec { position: relative; padding: 110px 0 40px; } .sec__h { display: grid; gap: 14px; margin-bottom: 44px; max-width: 860px; } .sec__n { font: 700 14px/1 var(--fm); letter-spacing: .12em; color: var(--c1); display: flex; align-items: center; gap: 12px; } .sec__n::after { content: ''; width: 64px; height: 1px; background: linear-gradient(90deg, var(--c1), transparent); } .sec__lead { color: var(--mu); font-size: clamp(16px, 1.3vw, 19px); max-width: 44em; } /* Ролик */ .film { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: 28px; align-items: center; } .film__frame { position: relative; border-radius: var(--r); overflow: hidden; aspect-ratio: 16 / 9; background: #0B1020; box-shadow: 0 40px 100px -40px rgba(140,123,255,.55); } .film__frame::before { content: ''; position: absolute; inset: 0; z-index: 2; border-radius: inherit; pointer-events: none; padding: 1.5px; background: conic-gradient(from var(--a), #7CF3FF, #8C7BFF, #FF7AD9, #FFC98A, #7CF3FF); animation: spin 9s linear infinite; -webkit-mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); } .film video { width: 100%; height: 100%; object-fit: cover; } .film__snd { position: absolute; z-index: 3; right: 14px; bottom: 18px; display: inline-flex; gap: 8px; align-items: center; min-height: 42px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--line2); background: rgba(5,6,10,.72); font-weight: 700; font-size: 14px; cursor: pointer; } .film__snd .ic { width: 18px; height: 18px; } .film__snd[aria-pressed="true"] { background: var(--iri); color: #07080C; border-color: transparent; } .film__snd[aria-pressed="true"] .ic { stroke: #07080C; } .film__bar { position: absolute; z-index: 3; left: 0; right: 0; bottom: 0; height: 4px; background: rgba(255,255,255,.1); } .film__bar i { display: block; height: 100%; width: 0; background: var(--iri); } .steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; counter-reset: s; align-content: space-between; } .steps li { counter-increment: s; position: relative; padding: 12px 16px 12px 62px; border-radius: 16px; border: 1px solid var(--line); background: rgba(255,255,255,.025); transition: background .4s, border-color .4s, transform .4s var(--ease); cursor: pointer; } .steps li::before { content: counter(s); position: absolute; left: 14px; top: 12px; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; font: 700 15px/1 var(--fm); color: var(--tx); background: var(--s3); border: 1px solid var(--line2); transition: background .4s, color .4s; } .steps b { font-size: 17px; } .steps p { color: var(--mu); font-size: 14.5px; line-height: 1.45; } .steps li.on { background: rgba(140,123,255,.12); border-color: rgba(140,123,255,.55); transform: translateX(-4px); } .steps li.on::before { background: var(--iri); color: #07080C; border-color: transparent; } /* Темы */ .topics { display: grid; grid-template-columns: repeat(7, 1fr); gap: 12px; margin-bottom: 30px; } .topics a { position: relative; display: grid; gap: 4px; padding: 18px 16px; border-radius: 20px; text-decoration: none; background: rgba(255,255,255,.035); border: 1px solid var(--line); transition: transform .4s var(--ease), border-color .3s, background .3s; overflow: hidden; } .topics a::before { content: ''; position: absolute; inset: auto 0 0 0; height: 2px; background: var(--iri); transform: scaleX(0); transform-origin: left; transition: transform .5s var(--ease); } .topics a:hover { transform: translateY(-4px); border-color: var(--line2); background: rgba(140,123,255,.08); } .topics a:hover::before { transform: scaleX(1); } .topics .ic { width: 30px; height: 30px; margin-bottom: 8px; } .topics b { font-size: 16px; line-height: 1.2; } .topics span { color: var(--mu); font-size: 13.5px; } .topic { display: grid; grid-template-columns: 1.5fr 1fr; gap: 26px; margin-top: 22px; padding: 34px; border-radius: 28px; background: linear-gradient(160deg, rgba(23,28,40,.75), rgba(11,14,21,.7)); border: 1px solid var(--line); position: relative; overflow: hidden; scroll-margin-top: 90px; } .topic::before { content: ''; position: absolute; inset: 0; border-radius: inherit; padding: 1px; pointer-events: none; background: conic-gradient(from var(--a), rgba(124,243,255,.6), transparent 25%, rgba(255,122,217,.55) 50%, transparent 75%, rgba(124,243,255,.6)); -webkit-mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); animation: spin 12s linear infinite; opacity: .7; } .topic--flip .topic__main { order: 2; } .topic--flip { grid-template-columns: 1fr 1.5fr; } .trio { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin-top: 22px; } .trio .topic { margin-top: 0; } .topic--sm { grid-template-columns: 1fr; padding: 28px 26px; } .topic--sm .topic__cols { grid-template-columns: 1fr; gap: 14px; } .topic--sm .topic__main { display: flex; flex-direction: column; gap: 18px; } .topic--sm .topic__main .btn { margin-top: auto; align-self: flex-start; } .topic--sm .topic__side { position: absolute; right: 18px; top: 18px; } .topic--sm .topic__side .case { display: none; } .topic--sm .orb { width: 74px; height: 74px; } .topic--sm .orb::after { inset: 10px; } .topic--sm .orb .ic { width: 34px; height: 34px; } .topic--sm .h3 { font-size: clamp(22px, 2vw, 27px); padding-right: 70px; } .topic:target { box-shadow: 0 0 0 2px rgba(124,243,255,.55), 0 30px 90px -30px rgba(124,243,255,.4); } .topic__main { display: grid; gap: 18px; align-content: start; } .topic__main .btn { justify-self: start; } .topic__tag { display: inline-flex; gap: 8px; align-items: center; font: 700 13px/1 var(--fm); letter-spacing: .08em; text-transform: uppercase; color: var(--c1); } .topic__tag .ic { width: 18px; height: 18px; } .topic__cols { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; } .yes, .warn, .no { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; align-content: start; } .yes li, .warn li, .no li { position: relative; padding-left: 32px; font-size: 16px; line-height: 1.45; } .yes li::before, .warn li::before, .no li::before { content: ''; position: absolute; left: 0; top: 2px; width: 22px; height: 22px; border-radius: 50%; } .yes li::before { background: rgba(108,240,184,.14) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236CF0B8' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4L18 8'/%3E%3C/svg%3E") center/14px no-repeat; } .warn li { color: #D6DBE6; } .warn li::before { background: rgba(255,201,138,.14) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FFC98A' stroke-width='2.6' stroke-linecap='round'%3E%3Cpath d='M12 6v8M12 18h.01'/%3E%3C/svg%3E") center/14px no-repeat; } .no li::before { background: rgba(255,143,158,.14) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FF8F9E' stroke-width='2.6' stroke-linecap='round'%3E%3Cpath d='M7 7l10 10M17 7L7 17'/%3E%3C/svg%3E") center/13px no-repeat; } .warn a, .tile a { color: var(--c1); } .topic__side { display: grid; gap: 18px; align-content: center; justify-items: center; } .orb { position: relative; width: 170px; height: 170px; border-radius: 50%; display: grid; place-items: center; background: radial-gradient(circle at 35% 30%, rgba(255,255,255,.18), rgba(140,123,255,.12) 40%, rgba(5,6,10,.4) 70%); } .orb::before { content: ''; position: absolute; inset: -2px; border-radius: 50%; padding: 2px; background: conic-gradient(from var(--a), #7CF3FF, #8C7BFF, #FF7AD9, #FFC98A, #7CF3FF); animation: spin 6s linear infinite; -webkit-mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); } .orb::after { content: ''; position: absolute; inset: 22px; border-radius: 50%; border: 1px dashed rgba(255,255,255,.14); animation: spin 30s linear infinite reverse; } .orb .ic { width: 78px; height: 78px; stroke-width: 1.2; } .orb--warm { background: radial-gradient(circle at 35% 30%, rgba(255,255,255,.16), rgba(255,122,217,.14) 40%, rgba(5,6,10,.4) 70%); } .case { margin: 0; padding: 18px 20px; border-radius: 18px; background: rgba(255,255,255,.04); border: 1px solid var(--line); max-width: 360px; } .case p { font-size: 16px; line-height: 1.45; font-style: italic; color: #DDE2EC; } .case .case__k { font: 700 12px/1 var(--fm); font-style: normal; letter-spacing: .1em; text-transform: uppercase; color: var(--mu2); margin-bottom: 8px; } .clock { position: relative; width: 170px; height: 170px; display: grid; place-items: center; } .clock svg { position: absolute; inset: 0; transform: rotate(-90deg); } .clock circle { fill: none; stroke: rgba(255,255,255,.1); stroke-width: 6; } .clock .clock__arc { stroke: url(#gIc); stroke-linecap: round; stroke-dasharray: 327; stroke-dashoffset: 327; animation: arc 4s var(--ease) infinite; } @keyframes arc { 60%, 100% { stroke-dashoffset: 0; } } .clock b { font: 800 56px/1 var(--ff); margin-top: -12px; background: var(--chrome); -webkit-background-clip: text; background-clip: text; color: transparent; } .clock span { position: absolute; bottom: 44px; font: 700 13px/1 var(--fm); color: var(--mu); text-transform: uppercase; letter-spacing: .1em; } /* Цена */ .price { display: grid; grid-template-columns: 1fr 1.25fr; gap: 34px; align-items: center; } .price__viz { position: relative; display: grid; grid-template-columns: 110px 1fr; gap: 20px; align-items: center; min-height: 420px; } .meter { position: relative; height: 380px; width: 72px; margin: 0 auto; border-radius: 40px; background: rgba(255,255,255,.04); border: 1px solid var(--line2); overflow: visible; } .meter__fill { position: absolute; left: 8px; right: 8px; bottom: 8px; height: 72%; border-radius: 32px; background: linear-gradient(0deg, #7CF3FF, #8C7BFF 55%, #FF7AD9); box-shadow: 0 0 40px rgba(140,123,255,.55); } .meter__cap { position: absolute; left: -16px; right: -16px; top: 18%; height: 3px; background: #fff; box-shadow: 0 0 18px #fff, 0 0 40px var(--c3); border-radius: 3px; } .meter__cap i { position: absolute; left: 100%; top: -12px; margin-left: 10px; font: 700 13px/1 var(--fm); font-style: normal; color: #fff; text-transform: uppercase; letter-spacing: .08em; white-space: nowrap; } .meter__lock { position: absolute; left: 50%; top: calc(18% - 44px); transform: translateX(-50%); width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: var(--s3); border: 1px solid var(--line2); } .meter__lock .ic { width: 18px; height: 18px; } .price.in .meter__fill { animation: fill 3.6s var(--ease) infinite; } @keyframes fill { 0% { height: 0; } 45% { height: 78%; } 70%, 100% { height: 72%; } } .stage--sm { aspect-ratio: 1; } .price__steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; counter-reset: p; } .price__steps li { position: relative; padding: 22px 24px 22px 76px; border-radius: 22px; background: rgba(255,255,255,.035); border: 1px solid var(--line); counter-increment: p; } .price__steps li::before { content: counter(p); position: absolute; left: 20px; top: 22px; width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; font: 800 18px/1 var(--fm); color: #07080C; background: var(--iri); background-size: 220% 100%; animation: iri 7s linear infinite; } .price__k { display: block; font: 700 12px/1 var(--fm); letter-spacing: .1em; text-transform: uppercase; color: var(--c1); margin-bottom: 6px; } .price__steps b { font-size: 20px; } .price__steps p { color: var(--mu); margin-top: 6px; font-size: 15.5px; } /* География */ .geo { display: grid; grid-template-columns: 1.5fr 1fr; gap: 24px; align-items: start; } .geo__map { padding: 10px; overflow: hidden; } .map { width: 100%; height: auto; } .map__nei path { fill: rgba(255,255,255,.025); stroke: rgba(255,255,255,.16); stroke-width: 1; } .map__nei-l text { fill: #8C95A8; font: 600 15px var(--ff); text-anchor: middle; } .map__tat { stroke: none; } .map__edge { fill: none; stroke-width: 2.4; filter: drop-shadow(0 0 6px rgba(140,123,255,.7)); } .map__routes path { fill: none; stroke: url(#gEdge); stroke-width: 1.4; stroke-dasharray: 4 7; opacity: .55; animation: dash 3s linear infinite; animation-delay: calc(var(--i) * -.3s); } @keyframes dash { to { stroke-dashoffset: -44; } } .map__towns circle { fill: #7CF3FF; } .map__towns .halo { fill: url(#gDot); opacity: .35; animation: halo 3s ease-in-out infinite; animation-delay: calc(var(--i) * -.37s); transform-box: fill-box; transform-origin: center; } .map__towns .big circle { fill: #fff; } .map__towns .base circle:not(.halo) { fill: #FF7AD9; } .map__towns text { fill: #EEF1F8; font: 700 17px var(--ff); paint-order: stroke; stroke: #05060A; stroke-width: 4px; } .map__cap { fill: #8C95A8; font: 500 12px var(--ff); } @keyframes halo { 50% { transform: scale(1.6); opacity: .1; } } .geo__side { display: grid; gap: 16px; } .zone { padding: 22px 24px; display: grid; gap: 10px; } .zone__k { font-weight: 800; font-size: 19px; display: flex; align-items: center; gap: 10px; } .zone p:not(.zone__k) { color: var(--mu); font-size: 15.5px; } .dot { width: 12px; height: 12px; border-radius: 50%; } .dot--c { background: #7CF3FF; box-shadow: 0 0 12px #7CF3FF; } .dot--m { background: #FF7AD9; box-shadow: 0 0 12px #FF7AD9; } .tags { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; } .tags li { font-size: 13.5px; font-weight: 600; padding: 6px 11px; border-radius: 999px; border: 1px solid var(--line2); color: #D6DBE6; } .geo__side .btn { justify-self: start; } /* Почему мы */ .bento { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; } .tile { padding: 26px; display: grid; gap: 10px; align-content: start; min-height: 220px; overflow: hidden; } .tile h3 { margin: 6px 0 0; font-size: 21px; line-height: 1.2; font-weight: 800; } .tile p { color: var(--mu); font-size: 15.5px; } .tile--wide { grid-column: span 2; } .tile--tt { grid-column: span 2; grid-row: span 2; align-content: end; background: linear-gradient(160deg, rgba(11,138,72,.22), rgba(11,14,21,.85) 50%, rgba(215,42,63,.18)) padding-box, conic-gradient(from var(--a), rgba(124,243,255,.55), rgba(140,123,255,.25), rgba(255,122,217,.5), rgba(255,201,138,.25), rgba(124,243,255,.55)) border-box; } .tile .tile__big { font-weight: 800; font-size: clamp(34px, 3.8vw, 56px); line-height: 1.02; letter-spacing: -.02em; background: var(--chrome); -webkit-background-clip: text; background-clip: text; color: transparent; } .tile--tt p[lang="ru"], .tile--tt p:not(.tile__big) { color: #C9D0DE; font-size: 16.5px; max-width: 30em; } .ornament { position: absolute; right: -40px; top: -40px; width: 300px; height: 300px; opacity: .22; pointer-events: none; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' fill='none' stroke='%23FFC98A' stroke-width='1.2'%3E%3Cpath d='M50 12c10 12 10 26 0 38-10-12-10-26 0-38z'/%3E%3Cpath d='M50 50c-4-10-14-16-26-14 2 12 12 18 26 14zM50 50c4-10 14-16 26-14-2 12-12 18-26 14z'/%3E%3Cpath d='M50 50v38M50 70c-8-6-18-6-24-2M50 70c8-6 18-6 24-2'/%3E%3Ccircle cx='50' cy='50' r='44' stroke-dasharray='2 5'/%3E%3C/svg%3E") center/contain no-repeat; animation: spin2 60s linear infinite; } @keyframes spin2 { to { transform: rotate(360deg); } } /* Мифы */ .myths { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; } .myth { position: relative; min-height: 270px; border: 0; padding: 0; background: none; cursor: pointer; perspective: 1000px; text-align: left; } .myth > span { position: absolute; inset: 0; display: grid; align-content: space-between; gap: 14px; padding: 24px; border-radius: 22px; backface-visibility: hidden; -webkit-backface-visibility: hidden; transition: transform .8s var(--ease); } .myth__f { background: rgba(255,255,255,.04); border: 1px solid var(--line2); } .myth__b { background: linear-gradient(160deg, rgba(140,123,255,.28), rgba(124,243,255,.12)); border: 1px solid rgba(140,123,255,.6); transform: rotateY(180deg); } .myth i { font: 700 12px/1 var(--fm); font-style: normal; letter-spacing: .12em; text-transform: uppercase; color: var(--no); } .myth__b i { color: var(--ok); } .myth b { font-size: 18px; line-height: 1.35; font-weight: 700; } .myth__f b { font-size: 20px; } .myth.flip .myth__f, .myth:hover .myth__f { transform: rotateY(-180deg); } .myth.flip .myth__b, .myth:hover .myth__b { transform: rotateY(0); } /* Честно */ .honest { display: grid; grid-template-columns: 1fr 1.3fr; gap: 34px; padding: 40px; } .honest > div { display: grid; gap: 14px; align-content: start; } .no { grid-template-columns: 1fr 1fr; gap: 12px 22px; } /* Пригон */ .prigon { display: grid; grid-template-columns: 1fr 1fr; gap: 34px; align-items: center; } .prigon__txt { display: grid; gap: 18px; } .prigon__txt .btn { justify-self: start; } .routes { padding: 20px; } .routes svg { width: 100%; height: auto; } .routes__p path { fill: none; stroke: url(#gR); stroke-width: 2; stroke-dasharray: 6 8; animation: dash 2.4s linear infinite; } .routes__d circle { fill: #7CF3FF; } .routes__d .home { fill: #FF7AD9; filter: drop-shadow(0 0 8px #FF7AD9); } .routes__t text { fill: #EEF1F8; font: 700 17px var(--ff); } .routes__t .s { fill: #A6AFC2; font-size: 14px; } /* FAQ */ .faq { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; } .faq details { border-radius: 18px; background: rgba(255,255,255,.035); border: 1px solid var(--line); transition: background .3s, border-color .3s; } .faq details[open] { background: rgba(140,123,255,.08); border-color: rgba(140,123,255,.45); } .faq summary { list-style: none; cursor: pointer; padding: 18px 56px 18px 22px; font-weight: 700; font-size: 17px; position: relative; min-height: var(--tap); } .faq summary::-webkit-details-marker { display: none; } .faq summary::after { content: ''; position: absolute; right: 20px; top: 50%; width: 22px; height: 22px; margin-top: -11px; border-radius: 50%; background: var(--iri); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M11 5h2v14h-2zM5 11h14v2H5z'/%3E%3C/svg%3E") center/100%; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M11 5h2v14h-2zM5 11h14v2H5z'/%3E%3C/svg%3E") center/100%; transition: transform .35s var(--ease); } .faq details[open] summary::after { transform: rotate(45deg); } .faq details p { padding: 0 22px 20px; color: #C9D0DE; } /* Заявка */ .lead-box { display: grid; grid-template-columns: 1fr 1.25fr; gap: 36px; padding: 40px; } .lead-box__txt { display: grid; gap: 16px; align-content: start; } .lead-box__txt .btn { justify-self: start; } .duo { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 14px; max-width: 460px; margin: 4px 0; } .duo__cap { grid-column: span 2; font: 700 13px/1.3 var(--fm); letter-spacing: .06em; text-transform: uppercase; color: var(--mu); } .stage--key { width: 100%; } .msg-links { display: flex; flex-wrap: wrap; gap: 10px; } .msg-links a { display: inline-flex; align-items: center; gap: 8px; min-height: var(--tap); padding: 0 16px; border-radius: 999px; border: 1px solid var(--line2); text-decoration: none; font-weight: 700; } .form { display: grid; gap: 14px; } .form__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; } .fld { display: grid; gap: 6px; } .fld--2 { grid-column: span 2; } .fld > span { font-size: 13.5px; font-weight: 600; color: var(--mu); } .fld input, .fld select, .fld textarea { width: 100%; min-height: 50px; padding: 12px 16px; border-radius: 14px; border: 1px solid var(--line2); background: rgba(5,6,10,.6); font-size: 16px; transition: border-color .25s, box-shadow .25s; } .fld textarea { resize: vertical; min-height: 90px; } .fld select { appearance: none; background: rgba(5,6,10,.6) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23A6AFC2' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") right 14px center/18px no-repeat; padding-right: 40px; } .fld select option { background: #11151F; } .fld input::placeholder, .fld textarea::placeholder { color: #6F788B; } .fld input:focus, .fld select:focus, .fld textarea:focus { outline: none; border-color: var(--c2); box-shadow: 0 0 0 3px rgba(140,123,255,.25); } .fld input:user-invalid { border-color: var(--no); } .agree { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; color: var(--mu); line-height: 1.4; } .agree input { width: 20px; height: 20px; margin: 1px 0 0; accent-color: #8C7BFF; flex: none; } .agree a { color: var(--c1); } .hp { position: absolute !important; left: -10000px; width: 1px; height: 1px; overflow: hidden; } .form__msg { min-height: 1.4em; font-weight: 600; font-size: 15px; } .form__msg.ok { color: var(--ok); } .form__msg.err { color: var(--no); } form.sent .btn { opacity: .6; pointer-events: none; } /* Подвал */ .foot { margin-top: 90px; border-top: 1px solid var(--line); background: rgba(5,6,10,.7); padding: 50px 0 110px; } .foot__in { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 34px; } .foot__brand { display: grid; gap: 14px; align-content: start; } .foot__brand p { color: var(--mu); font-size: 15px; max-width: 30em; } .foot__tt { font-weight: 700; color: #D6DBE6 !important; } .foot__nav { display: grid; gap: 8px; align-content: start; } .foot__nav a { color: var(--mu); text-decoration: none; font-weight: 600; } .foot__nav a:hover { color: var(--tx); } .foot__c { display: grid; gap: 8px; align-content: start; } .foot__c p { color: var(--mu); font-size: 15px; } .foot__tel { font: 700 22px/1.2 var(--fm); text-decoration: none; } .foot__c a { color: var(--tx); } .foot__s { font-size: 13px !important; color: var(--mu2) !important; } .foot__s a { color: var(--mu) !important; } /* Нижняя панель телефона */ .dock { display: none; } /* Появление при прокрутке */ .rv { opacity: 0; transform: translateY(28px); transition: opacity .9s var(--ease), transform .9s var(--ease); } .rv.in { opacity: 1; transform: none; } /* ── Чат ───────────────────────────────────────────── */ .chat__fab { position: fixed; right: 22px; bottom: 22px; z-index: 60; display: inline-flex; align-items: center; gap: 10px; min-height: 54px; padding: 0 24px 0 20px; border-radius: 9px; border: 0 solid transparent; cursor: pointer; font-weight: 800; font-size: 15px; color: #14171D; text-shadow: 0 1px 0 rgba(255,255,255,.6), 0 -1px 0 rgba(0,0,0,.16); background: none; border-image: url(../img/btn-light.webp?v=6) 0 54 fill / 0 18px / 0 stretch; box-shadow: 0 1px 1px rgba(0,0,0,.7), 0 16px 40px -12px rgba(0,0,0,.9), 0 0 28px -10px rgba(140,123,255,.55); transition: transform .25s var(--ease), filter .25s var(--ease); } .chat__fab:hover { transform: translateY(-1px); filter: brightness(1.05); } .chat__fab:active { transform: translateY(1px) scale(.985); filter: brightness(.9); } .chat__fab .ic { stroke: #14171D; } .chat__box { position: fixed; right: 22px; bottom: 90px; z-index: 61; width: min(400px, calc(100vw - 24px)); height: min(560px, calc(100vh - 120px)); display: flex; flex-direction: column; border-radius: 24px; background: #0E121B; border: 1px solid var(--line2); box-shadow: 0 40px 120px -30px rgba(0,0,0,.9); overflow: hidden; } .chat__box[hidden] { display: none; } .chat__head { display: flex; align-items: center; gap: 10px; padding: 14px 16px; border-bottom: 1px solid var(--line); background: linear-gradient(100deg, rgba(124,243,255,.1), rgba(255,122,217,.1)); } .chat__head b { font-size: 16px; } .chat__tag { font: 700 11px/1 var(--fm); padding: 5px 8px; border-radius: 999px; background: var(--iri); color: #07080C; } .chat__x { margin-left: auto; width: 40px; height: 40px; border: 0; background: rgba(255,255,255,.06); border-radius: 12px; font-size: 22px; cursor: pointer; } .chat__log { flex: 1; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 10px; } .msg { max-width: 86%; padding: 10px 14px; border-radius: 16px; font-size: 15px; line-height: 1.45; white-space: pre-wrap; } .msg--bot { background: #171C28; border: 1px solid var(--line); align-self: flex-start; border-bottom-left-radius: 6px; } .msg--me { background: linear-gradient(120deg, #8C7BFF, #6f5cf5); color: #fff; align-self: flex-end; border-bottom-right-radius: 6px; } .msg--wait { color: var(--mu); } .chat__hints { display: flex; flex-wrap: wrap; gap: 8px; padding: 0 16px 12px; } .chat__hints button { min-height: 38px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--line2); background: rgba(255,255,255,.04); cursor: pointer; font-size: 13.5px; } .chat__form { display: flex; gap: 8px; padding: 12px; border-top: 1px solid var(--line); } .chat__form input { flex: 1; min-height: 46px; padding: 0 14px; border-radius: 14px; border: 1px solid var(--line2); background: rgba(5,6,10,.6); font-size: 16px; } .chat__form button { width: 46px; min-height: 46px; border: 0; border-radius: 9px; color: #111318; font-weight: 800; font-size: 20px; cursor: pointer; background: linear-gradient(180deg, #fbfcfd 0%, #dfe3e9 20%, #9aa2ae 48%, #626a76 52%, #c9ced6 80%, #f3f5f8 100%); box-shadow: inset 0 1px 0 #fff, inset 0 -1px 0 rgba(0,0,0,.4), 0 0 0 1px rgba(0,0,0,.6); } /* ── Адаптив ───────────────────────────────────────── */ @media (max-width: 1180px) { .topics { grid-template-columns: repeat(4, 1fr); } .bento { grid-template-columns: repeat(2, 1fr); } .tile--tt { grid-row: auto; } .myths { grid-template-columns: repeat(2, 1fr); } .nav a { padding: 10px 10px; font-size: 14px; } } @media (max-width: 1020px) { .hero__in, .film, .price, .geo, .prigon, .lead-box, .honest { grid-template-columns: 1fr; } .hero__stage { max-width: 680px; } .steps { grid-template-columns: 1fr 1fr; } .topic, .topic--flip { grid-template-columns: 1fr; } .topic--flip .topic__main { order: 0; } .trio { grid-template-columns: 1fr; } .topic__side { grid-template-columns: auto 1fr; justify-items: start; align-items: center; } .price__viz { min-height: 0; grid-template-columns: 100px minmax(0, 360px); } .kpi { grid-template-columns: repeat(2, 1fr); } .foot__in { grid-template-columns: 1fr 1fr; } .foot__brand { grid-column: span 2; } } @media (max-width: 860px) { body { font-size: 16px; } .nav { position: fixed; top: 70px; left: 0; right: 0; flex-direction: column; gap: 0; padding: 10px 16px 20px; background: #0A0D14; border-bottom: 1px solid var(--line); transform: translateY(-120%); transition: transform .4s var(--ease); margin: 0; } .nav.open { transform: none; } .nav a { padding: 14px 12px; font-size: 17px; border-radius: 12px; } .burger { display: block; margin-left: auto; } .bar__tel span { display: none; } .bar__tel { padding: 0; width: var(--tap); height: var(--tap); justify-content: center; } .bar__in { gap: 8px; } .hero { padding-top: 26px; } .sec { padding: 76px 0 24px; } .glass, .topic::before, .film__frame::before, .bg__glow, .orb::before, .stage__ring--2 { animation: none; } .bg__grain { display: none; } .map__edge { filter: none; } .logo__mark svg { filter: none; } .dock { position: fixed; left: 10px; right: 10px; bottom: calc(10px + env(safe-area-inset-bottom)); z-index: 55; display: grid; grid-template-columns: 1fr 1.3fr 1fr; gap: 6px; padding: 6px; border-radius: 22px; background: #0E121B; border: 1px solid var(--line2); box-shadow: 0 20px 60px -20px rgba(0,0,0,.9); } .dock a, .dock button { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-height: 52px; border: 0; background: none; border-radius: 16px; text-decoration: none; font-weight: 700; font-size: 12.5px; cursor: pointer; } .dock .ic { width: 22px; height: 22px; } .dock .dock__main { background: var(--iri); color: #07080C; font-size: 15px; background-size: 220% 100%; } .chat__fab { display: none; } .chat__box { right: 12px; bottom: calc(86px + env(safe-area-inset-bottom)); } .foot { padding-bottom: 120px; } } @media (max-width: 640px) { .wrap { width: min(100% - 28px, var(--wrap)); } .h1 { font-size: clamp(36px, 10.4vw, 50px); } .cta .btn { flex: 1 1 100%; } .quick__row, .form__grid, .topic__cols, .no, .faq, .steps, .myths, .bento { grid-template-columns: 1fr; } .fld--2, .tile--wide, .tile--tt, .foot__brand { grid-column: auto; } .topics { grid-template-columns: repeat(2, 1fr); } .topics a:last-child { grid-column: span 2; } .topic { padding: 24px 20px; } .topic__side { grid-template-columns: 1fr; justify-items: center; } .topic--sm .topic__side { position: absolute; } .topic:not(.topic--sm) .orb { display: none; } .clock { width: 110px; height: 110px; } .clock b { font-size: 34px; margin-top: -8px; } .clock span { bottom: 24px; font-size: 11px; } .orb, .clock { width: 130px; height: 130px; } .orb .ic { width: 58px; height: 58px; } .clock b { font-size: 42px; } .clock span { bottom: 30px; } .kpi b { font-size: 36px; } .orbit li { font-size: 12.5px; padding: 6px 10px; } .orbit li:nth-child(2) { top: 26%; } .price__viz { grid-template-columns: 84px 1fr; gap: 12px; } .meter { height: 300px; width: 60px; } .price__steps li { padding: 20px 18px 20px 66px; } .price__steps li::before { left: 14px; } .honest, .lead-box { padding: 26px 20px; } .myth { min-height: 220px; } .foot__in { grid-template-columns: 1fr; } .geo__map { padding: 4px; } .map__towns text { font-size: 30px; stroke-width: 6px; } .map__nei-l text { font-size: 26px; } .map__towns .t:not(.big):not(.base) .halo { display: none; } .map__cap { font-size: 20px; } .lead-box__txt .btn { justify-self: stretch; } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; } .rv { opacity: 1; transform: none; } } /* ── ВСЕ кнопки = кнопка запуска двигателя Start/Stop (26.09.2026, решение Айрата: «все кнопки сделай в этом стиле») ── Хромированное кольцо, тёмный металлический корпус, красная подсветка по ободу. Значок — в хромированной шайбе. «Дышит» подсветка только у главных действий (позвонить, отправить заявку, «Узнать цену» в панели телефона), у остальных она ровная и разгорается при наведении — чтобы страница не мигала. */ .btn, .stage__3d, .chat__fab, .film__snd, .dock .dock__main, .chat__form button { border-image: none; border: 2.5px solid transparent; border-radius: 999px; color: #F4F5F7; text-shadow: 0 0 10px rgba(255,70,60,.35), 0 1px 0 rgba(0,0,0,.8); filter: none; background: radial-gradient(140% 120% at 50% -10%, rgba(255,255,255,.13), transparent 55%) padding-box, linear-gradient(180deg, #2B2F37 0%, #16181D 55%, #0B0C0F 100%) padding-box, linear-gradient(180deg, #FFFFFF 0%, #C9CED6 22%, #6B727D 50%, #B9BFC8 74%, #F3F5F8 100%) border-box; box-shadow: inset 0 0 0 1.5px rgba(255,52,44,.7), inset 0 0 12px rgba(255,40,32,.22), 0 0 0 1px rgba(0,0,0,.85), 0 10px 24px -10px rgba(0,0,0,.95), 0 0 18px -8px rgba(255,45,35,.3); transition: transform .2s var(--ease), box-shadow .25s var(--ease); } .btn::after, .btn::before { display: none; animation: none; } .btn { min-height: 56px; padding: 0 30px; } .btn .ic, .chat__fab .ic, .film__snd .ic { stroke: #FF4A3F; filter: drop-shadow(0 0 3px rgba(255,60,50,.8)); } /* значок в хромированной шайбе, как пиктограмма на кнопке запуска */ .btn:has(> .ic) { padding-left: 9px; gap: 14px; } .btn > .ic { width: 36px; height: 36px; padding: 8px; border-radius: 50%; flex: none; background: radial-gradient(circle at 50% 35%, #30343C, #0D0E11 70%); box-shadow: 0 0 0 2px #9AA1AC, 0 0 0 3px #1A1C21, inset 0 0 8px rgba(255,50,40,.5), 0 0 12px rgba(255,50,40,.45); } .btn:hover, .stage__3d:hover, .chat__fab:hover, .film__snd:hover, .dock .dock__main:hover, .chat__form button:hover { transform: translateY(-1px); filter: none; box-shadow: inset 0 0 0 1.5px #FF4136, inset 0 0 22px rgba(255,40,32,.45), 0 0 0 1px rgba(0,0,0,.85), 0 14px 30px -12px rgba(0,0,0,.95), 0 0 36px -4px rgba(255,45,35,.65); } .btn:active, .stage__3d:active, .chat__fab:active, .film__snd:active, .dock .dock__main:active, .chat__form button:active { transform: translateY(1px) scale(.98); filter: none; box-shadow: inset 0 3px 8px rgba(0,0,0,.8), inset 0 0 0 1.5px #FF2A20, inset 0 0 26px rgba(255,40,32,.55), 0 0 0 1px rgba(0,0,0,.85), 0 0 42px -2px rgba(255,45,35,.8); transition-duration: .08s; } /* главные действия «дышат» */ .btn--start, .btn--iri, .dock .dock__main { animation: startGlow 3.6s ease-in-out infinite; } .btn--start { min-height: 58px; padding-right: 30px; font-variant-numeric: tabular-nums; } .btn--start > .ic { width: 38px; height: 38px; padding: 9px; } .btn--iri .ic { stroke: #FF4A3F; } @keyframes startGlow { 0%, 100% { box-shadow: inset 0 0 0 1.5px rgba(255,52,44,.75), inset 0 0 12px rgba(255,40,32,.25), 0 0 0 1px rgba(0,0,0,.85), 0 10px 24px -10px rgba(0,0,0,.95), 0 0 18px -8px rgba(255,45,35,.3); } 50% { box-shadow: inset 0 0 0 1.5px rgba(255,60,50,1), inset 0 0 20px rgba(255,40,32,.45), 0 0 0 1px rgba(0,0,0,.85), 0 10px 24px -10px rgba(0,0,0,.95), 0 0 30px -4px rgba(255,45,35,.6); } } .btn:hover, .btn:active { animation-play-state: paused; } /* мелкие кнопки */ .stage__3d { min-height: 44px; padding: 0 18px; font-weight: 800; font-size: 14px; } .film__snd[aria-pressed="true"] { color: #fff; box-shadow: inset 0 0 0 1.5px #FF4136, inset 0 0 22px rgba(255,40,32,.5), 0 0 0 1px rgba(0,0,0,.85), 0 0 30px -4px rgba(255,45,35,.65); } .film__snd[aria-pressed="true"] .ic { stroke: #FF6A60; } .chat__form button { border-width: 2px; color: #FF4A3F; } .dock .dock__main { color: #F4F5F7; background-size: auto; } /* телефон в шапке — маленькая версия той же кнопки */ .bar__tel.btn--start-mini { border: 2px solid transparent; color: #F4F5F7; background: linear-gradient(180deg, #262A31, #0C0D10) padding-box, linear-gradient(180deg, #fff, #9AA1AC 50%, #eef0f3) border-box; box-shadow: inset 0 0 0 1px rgba(255,52,44,.85), 0 0 16px -6px rgba(255,45,35,.6); } .bar__tel.btn--start-mini .ic { stroke: #FF4A3F; filter: drop-shadow(0 0 3px rgba(255,60,50,.8)); } .btn[disabled] { opacity: .5; animation: none; } @media (prefers-reduced-motion: reduce) { .btn--start, .btn--iri, .dock .dock__main { animation: none; } } /* ---- Бейдж рейтинга Яндекс Карт (29.09.2026): тёмный виджет в стеклянной рамке с переливом */ .yrate{display:inline-flex;align-items:center;gap:14px;padding:8px 10px 8px 16px;margin:14px 0 4px;border-radius:18px;text-decoration:none; background:linear-gradient(var(--s2),var(--s2)) padding-box,var(--iri-soft) border-box;border:1px solid transparent; box-shadow:0 10px 30px -18px rgba(140,123,255,.55);transition:transform .35s var(--ease),box-shadow .35s var(--ease);max-width:100%;width:fit-content;justify-self:start;align-self:start} .yrate:hover{transform:translateY(-2px);box-shadow:0 16px 40px -18px rgba(124,243,255,.6)} .yrate__t{font:600 13px/1.25 var(--ff);color:var(--mu);max-width:110px} .yrate__f{display:block;width:150px;height:50px;border-radius:12px;overflow:hidden;flex:none;background:#000} .yrate__f iframe{display:block;border:0;width:150px;height:50px;pointer-events:none} .yrate--foot{margin:10px 0 0;padding:6px 8px 6px 12px} @media (max-width:420px){.yrate__t{max-width:90px;font-size:12px}} /* ═════ ПРЕМИУМ: главная на всю ширину монитора (TZ §11, 29.09.2026) ═════ Контейнер жидкий, как у посадочных (.pw): на 1920 px — 1805 px, на 2560 — 2240 px. На широком экране растут колонки, шрифт и визуал, а не пустые поля. Всё под .home — посадочные (body.pg) и политику не трогает. Откат — _work/backup_before_wide/rollback.sh */ .home { --wrap: 2240px; --gut: clamp(20px, 3vw, 72px); } .home .wrap { width: min(100% - 2 * var(--gut), var(--wrap)); } @media (max-width: 640px) { .home { --gut: 14px; } } @media (min-width: 1021px) { .home { font-size: clamp(17px, .95vw, 21px); } .home .bar__in { height: clamp(70px, 4.2vw, 88px); } .home .nav a { font-size: clamp(15px, .85vw, 18px); } .home .logo__txt { font-size: clamp(19px, 1.05vw, 24px); } .home .logo__mark { width: clamp(38px, 2vw, 48px); height: clamp(38px, 2vw, 48px); } .home .bar__tel { font-size: clamp(15px, .85vw, 18px); } /* первый экран — на всю высоту окна; цифры прижаты к низу */ .home .hero { min-height: calc(100svh - clamp(70px, 4.2vw, 88px)); display: grid; grid-template-rows: 1fr auto; align-content: stretch; padding: clamp(28px, 3vw, 72px) 0 clamp(24px, 2.4vw, 56px); } .home .hero__in { grid-template-columns: minmax(0, 1.04fr) minmax(0, 1fr); gap: clamp(36px, 4vw, 120px); align-self: center; } .home .hero__txt { gap: clamp(22px, 1.7vw, 38px); } .home .h1 { font-size: clamp(56px, 5.4vw, 150px); line-height: .98; letter-spacing: -.035em; } .home .lead { font-size: clamp(18px, 1.2vw, 26px); max-width: 34em; } .home .eyebrow { font-size: clamp(13px, .72vw, 16px); } .home .chips a { min-height: clamp(42px, 2.4vw, 54px); font-size: clamp(15px, .85vw, 18px); padding-inline: 14px 20px; } .home .chips .ic { width: clamp(18px, 1vw, 22px); height: clamp(18px, 1vw, 22px); } .home .btn { min-height: clamp(56px, 3.1vw, 70px); font-size: clamp(15.5px, .88vw, 19px); padding-inline: clamp(30px, 1.9vw, 44px); } .home .btn:has(> .ic) { padding-left: 10px; } .home .btn > .ic { width: clamp(36px, 2vw, 46px); height: clamp(36px, 2vw, 46px); } .home .tt { max-width: 34em; padding: clamp(12px, .9vw, 20px) clamp(16px, 1.1vw, 24px); } .home .tt b { font-size: clamp(17px, 1vw, 22px); } .home .tt p { font-size: clamp(15px, .82vw, 18px); } .home .hero__stage { gap: clamp(18px, 1.4vw, 32px); } /* машина не выше ~половины окна: на 2560 первый экран не уезжает за край */ .home .hero .stage { width: min(100%, calc(52svh * 12 / 7.4)); justify-self: center; } .home .orbit li { font-size: clamp(14px, .8vw, 18px); padding: clamp(8px, .5vw, 12px) clamp(14px, .9vw, 20px); } .home .quick { padding: clamp(20px, 1.5vw, 34px); gap: clamp(12px, .9vw, 20px); } .home .quick__t { font-size: clamp(19px, 1.2vw, 27px); } .home .fld > span { font-size: clamp(13.5px, .75vw, 16px); } .home .fld input, .home .fld select, .home .fld textarea { min-height: clamp(50px, 2.9vw, 64px); font-size: clamp(16px, .9vw, 19px); padding-inline: clamp(16px, 1vw, 22px); } .home .agree { font-size: clamp(14px, .75vw, 16px); } .home .kpi { margin-top: clamp(28px, 2.6vw, 60px); gap: clamp(14px, 1.2vw, 28px); } .home .kpi li { padding: clamp(20px, 1.6vw, 36px); border-radius: clamp(20px, 1.4vw, 28px); } .home .kpi b { font-size: clamp(44px, 3.6vw, 96px); } .home .kpi span { font-size: clamp(16px, 1vw, 22px); } .home .kpi p { font-size: clamp(14.5px, .9vw, 19px); } .home .ticker { padding: clamp(16px, 1.2vw, 26px) 0; } .home .ticker__row { font-size: clamp(15px, .95vw, 21px); gap: clamp(28px, 2vw, 48px); } /* секции: заголовок слева, пояснение справа — строка на всю ширину, а не колонка 860 px */ .home .sec { padding: clamp(96px, 7vw, 190px) 0 clamp(30px, 2vw, 50px); } .home .h2 { font-size: clamp(40px, 3.6vw, 96px); line-height: 1.02; letter-spacing: -.03em; } .home .h3 { font-size: clamp(24px, 1.8vw, 42px); } .home .sec__n { font-size: clamp(14px, .75vw, 17px); } .home .sec__lead { font-size: clamp(17px, 1.1vw, 24px); max-width: 36em; } .home .sec__h { max-width: none; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); column-gap: clamp(40px, 5vw, 140px); row-gap: 14px; align-items: end; margin-bottom: clamp(40px, 3.4vw, 84px); } .home .sec__h .sec__n { grid-column: 1 / -1; } .home .sec__h .sec__lead { justify-self: end; padding-bottom: .4em; } /* ролик: кадр крупнее, шаги — по высоте кадра */ .home .film { gap: clamp(28px, 2.4vw, 60px); grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); align-items: center; } .home .film__frame { align-self: center; } .home .steps { gap: clamp(8px, .6vw, 14px); } .home .steps li { padding: clamp(12px, .9vw, 22px) clamp(16px, 1.1vw, 26px) clamp(12px, .9vw, 22px) clamp(62px, 4vw, 90px); display: grid; align-content: center; } .home .steps li::before { width: clamp(34px, 2.1vw, 46px); height: clamp(34px, 2.1vw, 46px); left: clamp(14px, .9vw, 24px); top: 50%; margin-top: calc(clamp(34px, 2.1vw, 46px) / -2); font-size: clamp(15px, .9vw, 19px); } .home .steps b { font-size: clamp(17px, 1.15vw, 26px); } .home .steps p { font-size: clamp(14.5px, .85vw, 18px); max-width: 34em; } .home .film__snd { min-height: clamp(42px, 2.4vw, 54px); font-size: clamp(14px, .8vw, 17px); } /* что выкупаем */ .home .topics { gap: clamp(12px, .9vw, 20px); } .home .topics a { padding: clamp(18px, 1.3vw, 30px) clamp(16px, 1.1vw, 26px); border-radius: clamp(20px, 1.3vw, 26px); } .home .topics .ic { width: clamp(30px, 2vw, 46px); height: clamp(30px, 2vw, 46px); } .home .topics b { font-size: clamp(16px, 1.05vw, 23px); } .home .topics span { font-size: clamp(13.5px, .78vw, 17px); } .home .topic { padding: clamp(34px, 2.4vw, 60px); border-radius: clamp(28px, 1.8vw, 36px); gap: clamp(26px, 2vw, 48px); } .home .topic__cols { gap: clamp(22px, 1.8vw, 44px); } .home .yes li, .home .warn li, .home .no li { font-size: clamp(16px, .98vw, 21px); padding-left: 2em; } .home .yes li::before, .home .warn li::before, .home .no li::before { width: 1.35em; height: 1.35em; top: .1em; background-size: 60%; } .home .topic__tag { font-size: clamp(13px, .72vw, 16px); } .home .orb, .home .clock { width: clamp(170px, 11vw, 280px); height: clamp(170px, 11vw, 280px); } .home .orb .ic { width: 46%; height: 46%; } .home .orb::after { inset: 13%; } .home .clock b { font-size: clamp(56px, 3.6vw, 96px); } .home .clock span { bottom: 26%; font-size: clamp(13px, .75vw, 16px); } .home .case { max-width: 26em; padding: clamp(18px, 1.2vw, 28px) clamp(20px, 1.3vw, 30px); } .home .case p { font-size: clamp(16px, .98vw, 21px); } .home .case .case__k { font-size: clamp(12px, .68vw, 15px); } .home .trio { gap: clamp(18px, 1.4vw, 32px); margin-top: clamp(22px, 1.6vw, 36px); } .home .topic--sm { padding: clamp(28px, 2vw, 48px); } .home .topic--sm .orb { width: clamp(74px, 4.6vw, 110px); height: clamp(74px, 4.6vw, 110px); } .home .topic--sm .h3 { font-size: clamp(22px, 1.5vw, 34px); padding-right: clamp(70px, 5vw, 120px); } /* цена: шкала и договор крупнее */ .home .price { gap: clamp(34px, 3.4vw, 100px); grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); } .home .price__viz { grid-template-columns: clamp(110px, 7vw, 170px) 1fr; min-height: clamp(420px, 28vw, 680px); } .home .meter { height: clamp(380px, 25vw, 620px); width: clamp(72px, 4.4vw, 104px); } .home .meter__cap i { font-size: clamp(13px, .75vw, 16px); } .home .price__steps { gap: clamp(16px, 1.2vw, 28px); } .home .price__steps li { padding: clamp(22px, 1.6vw, 40px) clamp(24px, 1.7vw, 40px) clamp(22px, 1.6vw, 40px) clamp(76px, 5vw, 118px); border-radius: clamp(22px, 1.4vw, 30px); } .home .price__steps li::before { width: clamp(40px, 2.6vw, 58px); height: clamp(40px, 2.6vw, 58px); left: clamp(20px, 1.3vw, 32px); top: clamp(22px, 1.6vw, 40px); font-size: clamp(18px, 1.1vw, 24px); } .home .price__steps b { font-size: clamp(20px, 1.35vw, 32px); } .home .price__steps p { font-size: clamp(15.5px, .95vw, 20px); max-width: 38em; } .home .price__k { font-size: clamp(12px, .68vw, 15px); } /* выезд: карта во всю левую часть */ .home .geo { grid-template-columns: minmax(0, 1.75fr) minmax(0, 1fr); gap: clamp(24px, 2vw, 48px); align-items: stretch; } .home .geo__map { display: grid; place-items: center; padding: clamp(10px, 1vw, 28px); } .home .geo__side { gap: clamp(16px, 1.2vw, 28px); align-content: center; } .home .zone { padding: clamp(22px, 1.8vw, 42px); gap: clamp(10px, .8vw, 18px); } .home .zone__k { font-size: clamp(19px, 1.3vw, 30px); } .home .zone p:not(.zone__k) { font-size: clamp(15.5px, .95vw, 20px); max-width: 34em; } .home .tags li { font-size: clamp(13.5px, .78vw, 17px); padding: .45em .85em; } /* почему мы */ .home .bento { gap: clamp(16px, 1.2vw, 28px); } .home .tile { padding: clamp(26px, 2vw, 48px); min-height: clamp(220px, 14vw, 340px); gap: clamp(10px, .8vw, 18px); } .home .tile h3 { font-size: clamp(21px, 1.4vw, 32px); } .home .tile p { font-size: clamp(15.5px, .92vw, 20px); max-width: 32em; } .home .ic--xl { width: clamp(44px, 2.8vw, 64px); height: clamp(44px, 2.8vw, 64px); } .home .tile .tile__big { font-size: clamp(40px, 4vw, 110px); } .home .tile--tt p[lang="ru"], .home .tile--tt p:not(.tile__big) { font-size: clamp(16.5px, 1vw, 22px); } .home .ornament { width: clamp(300px, 22vw, 560px); height: clamp(300px, 22vw, 560px); } /* мифы */ .home .myths { gap: clamp(16px, 1.2vw, 28px); } .home .myth { min-height: clamp(270px, 17vw, 400px); } .home .myth > span { padding: clamp(24px, 1.8vw, 42px); border-radius: clamp(22px, 1.4vw, 30px); } .home .myth i { font-size: clamp(12px, .68vw, 15px); } .home .myth b { font-size: clamp(18px, 1.15vw, 26px); } .home .myth__f b { font-size: clamp(20px, 1.4vw, 32px); } /* честно / пригон */ .home .honest { padding: clamp(40px, 3.4vw, 90px); gap: clamp(34px, 4vw, 120px); grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr); align-items: center; } .home .no { gap: clamp(12px, 1vw, 22px) clamp(22px, 2vw, 48px); } .home .prigon { gap: clamp(34px, 4vw, 120px); grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); } .home .prigon__txt { gap: clamp(18px, 1.4vw, 30px); } .home .routes { padding: clamp(20px, 2vw, 48px); } /* страницы под ситуацию */ .home .rel { grid-template-columns: repeat(auto-fill, minmax(clamp(300px, 19vw, 420px), 1fr)); gap: clamp(14px, 1vw, 22px); } .home .rel__c { min-height: clamp(120px, 7.4vw, 170px); padding: clamp(22px, 1.5vw, 34px) 64px clamp(22px, 1.5vw, 34px) clamp(22px, 1.5vw, 34px); } .home .rel__k { font-size: clamp(12px, .68vw, 15px); } .home .tags--reg li a { font-size: clamp(13.5px, .78vw, 17px); } /* вопросы */ .home .faq { gap: clamp(14px, 1vw, 22px); } .home .faq summary { font-size: clamp(17px, 1.1vw, 24px); padding: clamp(18px, 1.3vw, 30px) 64px clamp(18px, 1.3vw, 30px) clamp(22px, 1.5vw, 34px); } .home .faq summary::after { right: clamp(20px, 1.4vw, 32px); } .home .faq details p { font-size: clamp(16px, .98vw, 21px); padding: 0 clamp(22px, 1.5vw, 34px) clamp(20px, 1.4vw, 32px); max-width: 40em; } .home .faq details { border-radius: clamp(18px, 1.2vw, 26px); } /* заявка */ .home .lead-box { padding: clamp(40px, 3.4vw, 90px); gap: clamp(36px, 4vw, 120px); grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); } .home .lead-box__txt { gap: clamp(16px, 1.2vw, 28px); } .home .duo { max-width: clamp(460px, 30vw, 760px); } .home .duo__cap { font-size: clamp(13px, .72vw, 16px); } .home .form, .home .form__grid { gap: clamp(14px, 1vw, 24px); } .home .form { align-content: start; align-self: center; } .home .msg-links a { min-height: clamp(46px, 2.6vw, 58px); font-size: clamp(15px, .85vw, 18px); padding-inline: clamp(16px, 1vw, 24px); } /* подвал */ .home .foot { padding: clamp(50px, 4vw, 100px) 0 clamp(110px, 6vw, 140px); margin-top: clamp(90px, 6vw, 160px); } .home .foot__in { gap: clamp(34px, 3vw, 80px); } .home .foot__nav a, .home .foot__brand p, .home .foot__c p { font-size: clamp(15px, .85vw, 18px); } .home .foot__tel { font-size: clamp(22px, 1.4vw, 32px); } } /* от 1440: темы — сеткой 2×2 (раньше 4 широкие полосы с пустым краем), вопросы — заголовок слева, ответы справа */ @media (min-width: 1440px) { .home #vykup > .wrap { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(20px, 1.6vw, 36px); align-items: stretch; } .home #vykup > .wrap > .sec__h, .home #vykup > .wrap > .topics, .home #vykup > .wrap > .trio { grid-column: 1 / -1; } .home #vykup .topic:not(.topic--sm) { grid-template-columns: minmax(0, 1fr); margin-top: clamp(20px, 1.6vw, 36px); align-content: start; } .home #vykup .topic--flip .topic__main { order: 0; } .home #vykup .topic:not(.topic--sm) .topic__main { display: flex; flex-direction: column; gap: clamp(18px, 1.3vw, 30px); height: 100%; } .home #vykup .topic:not(.topic--sm) .topic__main .btn { margin-top: auto; align-self: flex-start; } .home #vykup .topic:not(.topic--sm) { grid-template-rows: 1fr auto; } .home #vykup .topic:not(.topic--sm) .topic__side { display: flex; align-items: center; justify-content: flex-start; gap: clamp(20px, 1.6vw, 40px); padding-top: clamp(20px, 1.4vw, 32px); border-top: 1px solid var(--line); } .home #vykup .topic:not(.topic--sm) .orb, .home #vykup .topic:not(.topic--sm) .clock { width: clamp(120px, 7.4vw, 190px); height: clamp(120px, 7.4vw, 190px); flex: none; } .home #vykup .topic:not(.topic--sm) .clock b { font-size: clamp(40px, 2.6vw, 66px); } .home #vykup .topic:not(.topic--sm) .case { max-width: none; flex: 1; } .home #faq > .wrap { display: grid; grid-template-columns: minmax(0, .7fr) minmax(0, 2fr); gap: clamp(40px, 4vw, 120px); align-items: start; } .home #faq .sec__h { grid-template-columns: 1fr; position: sticky; top: calc(clamp(70px, 4.2vw, 88px) + 40px); margin-bottom: 0; } .home #faq .sec__h .sec__lead { justify-self: start; } .home .price__steps li { min-height: clamp(140px, 9vw, 220px); display: grid; align-content: center; } } /* от 1800: «почему мы» в 6 колонок, форма в 4, ситуации заметно крупнее */ @media (min-width: 1800px) { .home .bento { grid-template-columns: repeat(6, minmax(0, 1fr)); } .home .form__grid { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) minmax(0, .7fr) minmax(0, 1.5fr); } .home .fld--2:has(textarea) { grid-column: 1 / -1; } .home .no { grid-template-columns: repeat(2, minmax(0, 1fr)); } } /* 29.09.2026: в быстрой форме только телефон */ .quick__row--one { grid-template-columns: 1fr; } /* ЛОГОТИП v2 (29.09.2026, Ленар): знак + «ТатМоторс», «Тат» и плечо Т — зелёные. Файл img/logo.svg из workspace/tatmotors-logo/brand_green.py */ .logo__img { display: block; height: 34px; width: auto; } .foot__brand .logo__img { height: 30px; } @media (min-width: 1021px) { .home .logo__img { height: clamp(34px, 1.9vw, 44px); } } @media (max-width: 420px) { .logo__img { height: 25px; } } /* ---- WhatsApp и MAX в шапке и в меню (30.09.2026, просьба Ленара) */ .bar__msgs { display: flex; gap: 8px; } .bar__msg { display: inline-flex; align-items: center; justify-content: center; gap: 8px; width: var(--tap); height: var(--tap); border-radius: 999px; text-decoration: none; color: #F4F5F7; border: 2px solid transparent; background: linear-gradient(180deg, #262A31, #0C0D10) padding-box, linear-gradient(180deg, #fff, #9AA1AC 50%, #eef0f3) border-box; } .bar__msg span { display: none; } .bar__msg .ic { width: 20px; height: 20px; } .bar__msg--wa { box-shadow: inset 0 0 0 1px rgba(37,211,102,.85), 0 0 16px -6px rgba(37,211,102,.6); } .bar__msg--wa .ic { stroke: #25D366; filter: drop-shadow(0 0 3px rgba(37,211,102,.7)); } .bar__msg--max { box-shadow: inset 0 0 0 1px rgba(123,108,255,.9), 0 0 16px -6px rgba(123,108,255,.65); } .bar__msg--max .ic { stroke: #8F82FF; filter: drop-shadow(0 0 3px rgba(123,108,255,.7)); } .bar__msg:hover { transform: translateY(-1px); } .nav__msgs { display: none; } @media (max-width: 860px) { .bar__msgs { display: none; } .nav__msgs { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 10px; } .nav .nav__msgs .bar__msg { width: auto; height: 52px; padding: 0 14px; font: 700 16px/1 var(--ff); border-radius: 14px; } .nav .nav__msgs .bar__msg span { display: inline; } } @media (min-width: 861px) and (max-width: 1180px) { .nav a { white-space: nowrap; } .bar__tel span { display: none; } .bar__tel { padding: 0; width: var(--tap); height: var(--tap); justify-content: center; } } /* фирменный значок MAX (30.09.2026): цветной, без обводки и свечения */ .ic use[href="#i-max"] { stroke: none; } svg.ic:has(use[href="#i-max"]) { filter: none; stroke: none; } .bar__msg--max .ic { width: 24px; height: 24px; } /* ---- Заголовки: слова с переливом — зелёный хром в цветах логотипа (30.09.2026, просьба Ленара; кнопки пока прежние) */ :root { --gchrome: linear-gradient(100deg, #00A651 0%, #46E08F 22%, #FFFFFF 42%, #C9D0DF 55%, #46E08F 75%, #00A651 100%); } .iri-text, .iri-text--warm { background-image: var(--gchrome); background-size: 250% 100%; } /* ==== 30.09.2026 кнопки по макету Ленара (workspace/tatmotors-mock/mock.css) ==== */ /* ==== Кнопки по макету Ленара 30.09.2026 (ref.jpg): ситуации — полупрозрачное стекло, главная — сплошная зелёная ==== */ :root { --tm-g: #3DB861; --tm-g2: #2E9E50; --tm-gi: #3FCB6C; } /* 1. Плашки ситуаций: сетка, прямоугольные, полупрозрачные, зелёные иконки */ .chips { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 12px; } .chips li { display: block; min-width: 0; } .chips a { display: flex; width: 100%; min-height: 58px; padding: 0 16px; border-radius: 12px; gap: 14px; font-size: 17px; font-weight: 600; color: #F2F4F3; background: rgba(12,16,14,.46); border: 1px solid rgba(255,255,255,.20); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); } .chips a:hover { background: rgba(61,184,97,.12); border-color: rgba(61,184,97,.6); } .chips .ic, .home .chips .ic { width: 26px; height: 26px; stroke: var(--tm-gi); stroke-width: 1.8; filter: none; } @media (max-width: 640px) { .chips { grid-template-columns: 1fr 1fr; gap: 10px; } .chips a { font-size: 16px; min-height: 56px; } } /* 2. Главная кнопка — сплошная зелёная со стрелкой; телефон — тёмная с рамкой */ .hero .cta { display: grid !important; grid-template-columns: 1fr 1fr; gap: 12px; } @media (max-width: 640px) { .hero .cta { grid-template-columns: 1fr; } } .hero .cta .btn { width: auto; flex: none; justify-content: center; min-height: 60px; border-radius: 12px; font-size: 19px; } .cta .btn--glass { order: -1; position: relative; color: #0C2415 !important; font-weight: 800; text-shadow: none; background: linear-gradient(180deg, #4CC46E, var(--tm-g2)) !important; border: 1px solid #5AD27B !important; box-shadow: 0 10px 26px -12px rgba(61,184,97,.8) !important; animation: none !important; padding-right: 56px; } .cta .btn--glass::after { content: ""; position: absolute; right: 22px; top: 50%; width: 22px; height: 22px; margin-top: -11px; background: #fff; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12h15M13 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='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12h15M13 6l6 6-6 6'/%3E%3C/svg%3E") center/contain no-repeat; } .cta .btn--start { color: #F4F5F7 !important; font-weight: 800; text-shadow: none; animation: none !important; background: rgba(10,12,14,.55) !important; border: 1px solid rgba(255,255,255,.28) !important; box-shadow: none !important; } .cta .btn--start .ic, .cta .btn--start > .ic { stroke: #fff !important; filter: none !important; box-shadow: none !important; background: none !important; } /* 3. Шапка: круглая кнопка звонка с рамкой */ .bar__tel.btn--start-mini { background: rgba(255,255,255,.04) !important; border: 1px solid rgba(255,255,255,.28) !important; box-shadow: none !important; animation: none !important; } .bar__tel.btn--start-mini .ic { stroke: #fff !important; filter: none !important; } /* 4. Нижняя панель телефона: во всю ширину, разделители, зелёный круг в центре */ @media (max-width: 1020px) { .dock { left: 0; right: 0; bottom: 0; border-radius: 0; padding: 8px 6px calc(8px + env(safe-area-inset-bottom)); gap: 0; background: rgba(8,10,12,.96); border: 0; border-top: 1px solid rgba(255,255,255,.12); grid-template-columns: 1fr 1fr 1fr; } .dock a, .dock button { color: #F2F4F3; font-size: 13px; font-weight: 600; position: relative; } .dock > *:not(:last-child)::before { content: ""; position: absolute; right: 0; top: 14%; bottom: 14%; width: 1px; background: rgba(255,255,255,.14); } .dock .ic { stroke: #fff !important; filter: none !important; } .dock .dock__main { background: none !important; color: #F2F4F3 !important; animation: none !important; box-shadow: none !important; font-size: 13px; padding-top: 50px; border: 0 !important; } .dock .dock__main::after { content: ""; position: absolute; top: 2px; left: 50%; width: 46px; height: 46px; margin-left: -23px; border-radius: 50%; background: var(--tm-g) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 11l1.6-4.2A2 2 0 0 1 8.5 5.5h7a2 2 0 0 1 1.9 1.3L19 11'/%3E%3Crect x='3' y='11' width='18' height='6' rx='2'/%3E%3Cpath d='M6 17v2M18 17v2'/%3E%3Ccircle cx='7.5' cy='14' r='.9' fill='white'/%3E%3Ccircle cx='16.5' cy='14' r='.9' fill='white'/%3E%3C/svg%3E") center/24px no-repeat; box-shadow: 0 6px 16px -6px rgba(61,184,97,.9); } .foot { padding-bottom: 110px; } } /* 5. Остальные кнопки: без красного — тёмное стекло со светлой рамкой; кнопка формы — зелёная, как главная */ .btn, .stage__3d, .chat__fab, .film__snd, .chat__form button { color: #F4F5F7; text-shadow: none; animation: none !important; border-radius: 12px; background: rgba(10,12,14,.55) !important; border: 1px solid rgba(255,255,255,.28) !important; box-shadow: none !important; } .btn .ic, .chat__fab .ic, .film__snd .ic { stroke: #fff !important; filter: none !important; } .btn > .ic { box-shadow: none !important; background: none !important; } .btn:hover, .stage__3d:hover, .chat__fab:hover, .film__snd:hover { border-color: rgba(61,184,97,.75) !important; background: rgba(61,184,97,.12) !important; } .cta .btn--glass, .btn--iri, .chat__form button { color: #0C2415 !important; font-weight: 800; background: linear-gradient(180deg, #4CC46E, var(--tm-g2)) !important; border: 1px solid #5AD27B !important; box-shadow: 0 10px 26px -12px rgba(61,184,97,.8) !important; } .cta .btn--glass:hover, .btn--iri:hover { background: linear-gradient(180deg, #5AD27B, #35AC59) !important; } .cta .btn--glass::after { display: block !important; z-index: 2; opacity: 1 !important; } .cta .btn--glass::after { -webkit-mask: none !important; mask: none !important; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12h15M13 6l6 6-6 6'/%3E%3C/svg%3E") center/contain no-repeat !important; inset: auto !important; right: 22px !important; top: 50% !important; width: 24px !important; height: 24px !important; margin-top: -12px !important; } /* 6. Правки Ленара 30.09.2026: плашки прозрачнее (видна дорога), весь текст в кнопках белый, первым идёт телефон */ .chips a { background: rgba(10,14,12,.16) !important; border-color: rgba(255,255,255,.26) !important; -webkit-backdrop-filter: blur(1.5px) !important; backdrop-filter: blur(1.5px) !important; } .chips a:hover { background: rgba(61,184,97,.14) !important; } .chips a, .cta .btn, .btn, .btn--iri, .chat__form button, .dock a, .dock button { color: #FFFFFF !important; -webkit-text-fill-color: #FFFFFF; } .cta .btn--glass, .btn--iri, .chat__form button { text-shadow: 0 1px 2px rgba(0,60,25,.55) !important; } .cta .btn--start { order: 0 !important; } .cta .btn--glass { order: 1 !important; } .cta .btn--start, .bar__tel.btn--start-mini { background: rgba(10,14,12,.18) !important; -webkit-backdrop-filter: blur(1.5px); backdrop-filter: blur(1.5px); } /* ═════ Кнопка темы (30.09.2026). Видна только в режиме предпросмотра: html.tm-tp ставит _src/theme_head.js ═════ */ .theme-tg { display: none; } .tm-tp .theme-tg { display: inline-grid; place-items: center; flex: none; width: var(--tap); height: var(--tap); padding: 0; border-radius: 999px; cursor: pointer; color: #F4F5F7; border: 1px solid rgba(255,255,255,.28); background: rgba(10,14,12,.18); transition: transform .25s var(--ease), border-color .25s, background-color .25s; } .tm-tp .theme-tg:hover { transform: translateY(-1px); border-color: rgba(61,184,97,.75); background: rgba(61,184,97,.12); } .theme-tg__i { grid-area: 1 / 1; width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; transition: transform .6s var(--ease), opacity .4s var(--ease); } .theme-tg__moon { opacity: 0; transform: rotate(-70deg) scale(.4); } html[data-theme="light"] .theme-tg__sun { opacity: 0; transform: rotate(90deg) scale(.4); } html[data-theme="light"] .theme-tg__moon { opacity: 1; transform: none; } @media (max-width: 860px) { .tm-tp .theme-tg { margin-left: auto; } .tm-tp .burger { margin-left: 0; } } /* с кнопкой темы в шапке тесно на 861–1180 px: круглые кнопки не сжимаются, пункты меню плотнее */ .tm-tp .bar__tel, .tm-tp .bar__msg { flex: none; } @media (min-width: 861px) and (max-width: 1180px) { .tm-tp .bar__in { gap: 14px; } .tm-tp .nav { gap: 0; } .tm-tp .nav a { padding: 10px 8px; } } @media (min-width: 861px) and (max-width: 960px) { .tm-tp .nav a { padding: 10px 6px; font-size: 13.5px; } .tm-tp .bar__msgs { gap: 6px; } } @media (min-width: 1021px) { .tm-tp .home .theme-tg { width: clamp(46px, 2.6vw, 56px); height: clamp(46px, 2.6vw, 56px); } } /* смена темы: круг от кнопки (js/theme.js), старый кадр стоит, новый проявляется */ ::view-transition-old(root), ::view-transition-new(root) { animation: none; mix-blend-mode: normal; } ::view-transition-old(root) { z-index: 1; } ::view-transition-new(root) { z-index: 2; } @media (prefers-reduced-motion: reduce) { .theme-tg__i { transition: none; } } /* ═════════════════════════════════════════════════════════════════════════════ СВЕТЛАЯ ТЕМА «Дневная трасса» (30.09.2026, просьба Ленара). Тёплая светлая база (не голый белый), графитовый текст, бренд-зелёный #00A651 акцентом. Всё под html[data-theme="light"] — тёмная тема не меняется. !important — только там, где его ставят утверждённые блоки кнопок выше. Откат — удалить блок до конца файла. ═════════════════════════════════════════════════════════════════════════════ */ html[data-theme="light"] { --bg: #F3F1EC; --s1: #FBFAF7; --s2: #FFFFFF; --s3: #ECEAE3; --line: rgba(18,28,22,.09); --line2: rgba(18,28,22,.16); --tx: #121714; --mu: #4D5651; --mu2: #636B66; --c1: #007A3D; --c2: #00A651; --c3: #0B8F48; --c4: #A55A07; --ok: #0F7F43; --no: #C22E3C; --iri: linear-gradient(100deg, #0A8A46 0%, #13A056 30%, #07733A 60%, #0A8A46 100%); --iri-soft: linear-gradient(100deg, rgba(0,166,81,.55), rgba(18,28,22,.14), rgba(0,166,81,.4)); --chrome: linear-gradient(180deg, #0E1411 0%, #232C27 44%, #47524C 54%, #161D19 74%, #2B3530 100%); --gchrome: linear-gradient(100deg, #006B35 0%, #008F45 22%, #0A7F40 42%, #22A35E 55%, #008F45 75%, #006B35 100%); --glass-bg: linear-gradient(160deg, rgba(255,255,255,.92), rgba(251,250,247,.84)); --glass-edge: conic-gradient(from var(--a), rgba(0,166,81,.55), rgba(18,28,22,.10), rgba(0,166,81,.28), rgba(18,28,22,.10), rgba(0,166,81,.55)); --shadow: 0 1px 2px rgba(20,34,26,.05), 0 24px 60px -34px rgba(20,44,30,.32); color-scheme: light; } html[data-theme="light"] body { background: var(--bg); color: var(--tx); } html[data-theme="light"] :focus-visible { outline-color: #00A651; } html[data-theme="light"] .skip { background: #121714; color: #fff; } /* иконки спрайта: перелив циан→фиолет → зелень бренда */ html[data-theme="light"] #gIc stop:nth-child(1) { stop-color: #0B8F48; } html[data-theme="light"] #gIc stop:nth-child(2) { stop-color: #00A651; } html[data-theme="light"] #gIc stop:nth-child(3) { stop-color: #1E7A4E; } html[data-theme="light"] #gIc stop:nth-child(4) { stop-color: #0B6B3A; } html[data-theme="light"] #gR stop:nth-child(1) { stop-color: #00A651; } html[data-theme="light"] #gR stop:nth-child(2) { stop-color: #2E7D57; } html[data-theme="light"] #gR stop:nth-child(3) { stop-color: #0B6B3A; } /* фон: светлое небо, дымка у горизонта, дорога днём (js/app.js) */ html[data-theme="light"] .bg { background: radial-gradient(90% 55% at 72% 8%, rgba(255,255,255,.95), transparent 70%), linear-gradient(180deg, #FBFAF7 0%, #F4F3EE 24%, #E8EAE4 39.5%, #EFEEE8 40.5%, #F3F1EC 62%, #F3F1EC 100%), var(--bg); } html[data-theme="light"] .bg canvas { opacity: 1; } html[data-theme="light"] .bg::after { background: radial-gradient(60% 100% at 50% 60%, rgba(0,166,81,.07), transparent 70%); } html[data-theme="light"] .bg__grain { opacity: .035; mix-blend-mode: multiply; } /* типографика */ html[data-theme="light"] .lead, html[data-theme="light"] .tile--tt p[lang="ru"], html[data-theme="light"] .tile--tt p:not(.tile__big), html[data-theme="light"] .faq details p { color: #38413C; } html[data-theme="light"] .ticker__row { color: #38413C; } html[data-theme="light"] .pulse { background: #00A651; } /* стекло: белая матовая карточка с тонкой живой зелёной кромкой */ html[data-theme="light"] .glass { background: var(--glass-bg) padding-box, var(--glass-edge) border-box; box-shadow: var(--shadow), inset 0 1px 0 #fff; } html[data-theme="light"] .glass::after { background: radial-gradient(420px circle at var(--mx, 50%) var(--my, -30%), rgba(0,166,81,.08), transparent 60%); } /* шапка */ html[data-theme="light"] .bar { background: rgba(243,241,236,.94); border-bottom-color: var(--line); } @media (hover: hover) and (min-width: 861px) { html[data-theme="light"] .bar { background: rgba(247,246,242,.78); } } html[data-theme="light"] .nav a:hover, html[data-theme="light"] .nav a.on { background: rgba(18,28,22,.06); } html[data-theme="light"] .burger span { background: var(--tx); } html[data-theme="light"] .bar__msg { color: #121714; background: #fff; border: 1px solid rgba(18,23,20,.16); box-shadow: 0 6px 16px -10px rgba(20,40,30,.35); } html[data-theme="light"] .bar__msg--wa .ic { stroke: #1FAF55; filter: none; } html[data-theme="light"] .bar__msg--max .ic { filter: none; } html[data-theme="light"] .bar__tel.btn--start-mini { background: #fff !important; border: 1px solid rgba(18,23,20,.18) !important; color: #121714 !important; -webkit-text-fill-color: #121714; box-shadow: 0 6px 16px -10px rgba(20,40,30,.35) !important; -webkit-backdrop-filter: none; backdrop-filter: none; } html[data-theme="light"] .bar__tel.btn--start-mini .ic { stroke: #0B8F48 !important; } html[data-theme="light"] .bar__tel.btn--start-mini:hover { border-color: rgba(0,166,81,.6) !important; } html[data-theme="light"].tm-tp .theme-tg { color: #121714; background: #fff; border-color: rgba(18,23,20,.18); box-shadow: 0 6px 16px -10px rgba(20,40,30,.35); } html[data-theme="light"].tm-tp .theme-tg:hover { border-color: rgba(0,166,81,.6); background: #fff; } @media (max-width: 860px) { html[data-theme="light"] .nav { background: #FBFAF7; box-shadow: 0 24px 40px -24px rgba(20,40,30,.35); } html[data-theme="light"] .nav .nav__msgs .bar__msg { background: #fff; } } /* первый экран главной */ html[data-theme="light"] .chips a { color: #121714 !important; -webkit-text-fill-color: #121714; background: rgba(255,255,255,.5) !important; border-color: rgba(18,28,22,.16) !important; box-shadow: 0 4px 14px -10px rgba(20,40,30,.35); } html[data-theme="light"] .chips a:hover { background: rgba(0,166,81,.10) !important; border-color: rgba(0,166,81,.55) !important; } html[data-theme="light"] .chips .ic { stroke: #0B8F48; } html[data-theme="light"] .tt { background: linear-gradient(100deg, rgba(0,122,61,.10), rgba(255,255,255,.72) 55%, rgba(200,16,46,.07)); border-color: rgba(18,28,22,.12); } html[data-theme="light"] .tt__flag { box-shadow: 0 0 0 1px rgba(18,28,22,.14); } html[data-theme="light"] .stage__poster { filter: drop-shadow(0 26px 28px rgba(30,44,36,.22)); } html[data-theme="light"] .stage__ring { background: radial-gradient(closest-side, rgba(0,166,81,.20), rgba(18,28,22,.06) 55%, transparent 72%); } html[data-theme="light"] .stage__ring--2 { background: conic-gradient(from var(--a), #00A651, rgba(18,28,22,.25), #35C477, rgba(18,28,22,.25), #00A651) border-box; opacity: .55; } html[data-theme="light"] .stage__floor { background: radial-gradient(closest-side, rgba(18,28,22,.10), transparent); } html[data-theme="light"] .orbit li { background: rgba(255,255,255,.92); border-color: rgba(18,28,22,.12); box-shadow: 0 10px 24px -14px rgba(20,40,30,.45); color: #121714; } html[data-theme="light"] .kpi li { background: rgba(255,255,255,.66); border-color: var(--line); box-shadow: 0 16px 40px -30px rgba(20,44,30,.4); } html[data-theme="light"] .ticker { background: linear-gradient(90deg, rgba(0,166,81,.07), rgba(255,255,255,.55), rgba(0,166,81,.05)); } html[data-theme="light"] .ticker__row span:nth-child(4n+1) { color: var(--c1); } /* кнопки: главные — сплошная зелёная с белым текстом, прочие — светлое стекло с тонкой рамкой */ html[data-theme="light"] .btn, html[data-theme="light"] .stage__3d, html[data-theme="light"] .chat__fab, html[data-theme="light"] .film__snd { color: #121714 !important; -webkit-text-fill-color: #121714; text-shadow: none !important; background: rgba(255,255,255,.62) !important; border: 1px solid rgba(18,23,20,.20) !important; box-shadow: 0 1px 0 #fff inset, 0 8px 20px -14px rgba(20,40,30,.45) !important; } html[data-theme="light"] .btn .ic, html[data-theme="light"] .chat__fab .ic, html[data-theme="light"] .film__snd .ic { stroke: #0B8F48 !important; } html[data-theme="light"] .btn:hover, html[data-theme="light"] .stage__3d:hover, html[data-theme="light"] .chat__fab:hover, html[data-theme="light"] .film__snd:hover { background: rgba(255,255,255,.92) !important; border-color: rgba(0,166,81,.65) !important; } html[data-theme="light"] .cta .btn--start { background: rgba(255,255,255,.5) !important; } html[data-theme="light"] .cta .btn--start .ic, html[data-theme="light"] .cta .btn--start > .ic { stroke: #0B8F48 !important; } html[data-theme="light"] .cta .btn--glass, html[data-theme="light"] .btn--iri, html[data-theme="light"] .chat__form button { color: #fff !important; -webkit-text-fill-color: #fff; text-shadow: 0 1px 1px rgba(0,50,22,.35) !important; background: linear-gradient(180deg, #0C944B, #07793B) !important; border: 1px solid #07793B !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.28), 0 12px 26px -12px rgba(0,120,58,.7) !important; } html[data-theme="light"] .cta .btn--glass:hover, html[data-theme="light"] .btn--iri:hover { background: linear-gradient(180deg, #0E9D50, #08803F) !important; } html[data-theme="light"] .chat__fab { background: rgba(255,255,255,.94) !important; box-shadow: 0 16px 40px -16px rgba(20,40,30,.45) !important; } /* секции */ html[data-theme="light"] .sec__n::after { background: linear-gradient(90deg, var(--c1), transparent); } html[data-theme="light"] .film__frame { box-shadow: 0 40px 90px -46px rgba(0,90,45,.55); } html[data-theme="light"] .film__frame::before { background: conic-gradient(from var(--a), #00A651, rgba(18,28,22,.25), #35C477, rgba(18,28,22,.25), #00A651); } html[data-theme="light"] .film__bar { background: rgba(255,255,255,.25); } html[data-theme="light"] .film__snd { background: rgba(255,255,255,.9) !important; } html[data-theme="light"] .film__snd[aria-pressed="true"] { border-color: #00A651 !important; } html[data-theme="light"] .steps li { background: rgba(255,255,255,.62); } html[data-theme="light"] .steps li:not(.on)::before { background: #fff; box-shadow: 0 2px 6px -2px rgba(20,40,30,.25); } html[data-theme="light"] .steps li.on { background: rgba(0,166,81,.08); border-color: rgba(0,166,81,.5); } html[data-theme="light"] .steps li.on::before, html[data-theme="light"] .price__steps li::before, html[data-theme="light"] .mf__t i, html[data-theme="light"] .chat__tag, html[data-theme="light"] .tm__st li.on b, html[data-theme="light"] .call__st li::before, html[data-theme="light"] .chk__tabs button.on { color: #fff; } html[data-theme="light"] .topics a { background: rgba(255,255,255,.62); box-shadow: 0 14px 34px -30px rgba(20,44,30,.5); } html[data-theme="light"] .topics a:hover { background: rgba(0,166,81,.07); } html[data-theme="light"] .topic { background: var(--glass-bg); box-shadow: var(--shadow); } html[data-theme="light"] .topic::before { background: conic-gradient(from var(--a), rgba(0,166,81,.6), transparent 25%, rgba(18,28,22,.18) 50%, transparent 75%, rgba(0,166,81,.6)); } html[data-theme="light"] .topic:target { box-shadow: 0 0 0 2px rgba(0,166,81,.5), var(--shadow); } html[data-theme="light"] .yes li::before { background: rgba(15,127,67,.12) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230F7F43' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4L18 8'/%3E%3C/svg%3E") center/14px no-repeat; } html[data-theme="light"] .warn li { color: #38413C; } html[data-theme="light"] .warn li::before { background: rgba(165,90,7,.12) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23A55A07' stroke-width='2.6' stroke-linecap='round'%3E%3Cpath d='M12 6v8M12 18h.01'/%3E%3C/svg%3E") center/14px no-repeat; } html[data-theme="light"] .no li::before { background: rgba(194,46,60,.10) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23C22E3C' stroke-width='2.6' stroke-linecap='round'%3E%3Cpath d='M7 7l10 10M17 7L7 17'/%3E%3C/svg%3E") center/13px no-repeat; } html[data-theme="light"] .home .yes li::before, html[data-theme="light"] .home .warn li::before, html[data-theme="light"] .home .no li::before { background-size: 60%; } html[data-theme="light"] .orb { background: radial-gradient(circle at 35% 30%, #fff, rgba(0,166,81,.10) 48%, rgba(18,28,22,.06) 76%); box-shadow: 0 18px 40px -24px rgba(20,44,30,.45); } html[data-theme="light"] .orb::before { background: conic-gradient(from var(--a), #00A651, rgba(18,28,22,.25), #35C477, rgba(18,28,22,.25), #00A651); } html[data-theme="light"] .orb::after { border-color: rgba(18,28,22,.16); } html[data-theme="light"] .orb--warm { background: radial-gradient(circle at 35% 30%, #fff, rgba(165,90,7,.08) 48%, rgba(18,28,22,.06) 76%); } html[data-theme="light"] .case { background: rgba(255,255,255,.72); } html[data-theme="light"] .case p { color: #2A322E; } html[data-theme="light"] .clock circle { stroke: rgba(18,28,22,.10); } /* цена */ html[data-theme="light"] .meter { background: #fff; box-shadow: inset 0 2px 6px rgba(18,28,22,.08); } html[data-theme="light"] .meter__fill { background: linear-gradient(0deg, #7FD9A6, #1DB365 50%, #0A7F41); box-shadow: 0 0 34px rgba(0,166,81,.35); } html[data-theme="light"] .meter__cap { background: #121714; box-shadow: 0 0 0 3px rgba(255,255,255,.9), 0 6px 18px rgba(18,28,22,.3); } html[data-theme="light"] .meter__cap i { color: #121714; } html[data-theme="light"] .meter__lock { background: #fff; } html[data-theme="light"] .price__steps li { background: rgba(255,255,255,.66); box-shadow: 0 14px 34px -30px rgba(20,44,30,.5); } /* карта */ html[data-theme="light"] .map__nei path { fill: rgba(18,28,22,.025); stroke: rgba(18,28,22,.18); } html[data-theme="light"] .map__nei-l text, html[data-theme="light"] .map__cap { fill: #6B736E; } html[data-theme="light"] #gTat stop { stop-color: #00A651; } html[data-theme="light"] #gEdge stop:nth-child(1) { stop-color: #00A651; } html[data-theme="light"] #gEdge stop:nth-child(2) { stop-color: #0B6B3A; } html[data-theme="light"] #gEdge stop:nth-child(3) { stop-color: #1DB365; } html[data-theme="light"] #gEdge stop:nth-child(4) { stop-color: #0B8F48; } html[data-theme="light"] #gDot stop:nth-child(2), html[data-theme="light"] #gDot stop:nth-child(3) { stop-color: #00A651; } html[data-theme="light"] .map__edge { filter: drop-shadow(0 0 4px rgba(0,166,81,.35)); } html[data-theme="light"] .map__routes path { opacity: .7; } html[data-theme="light"] .map__towns circle { fill: #00A651; } html[data-theme="light"] .map__towns .big circle { fill: #121714; } html[data-theme="light"] .map__towns .base circle:not(.halo) { fill: #C22E3C; } html[data-theme="light"] .map__towns text { fill: #121714; stroke: #fff; } html[data-theme="light"] .dot--c { background: #00A651; box-shadow: 0 0 10px rgba(0,166,81,.6); } html[data-theme="light"] .dot--m { background: #C22E3C; box-shadow: 0 0 10px rgba(194,46,60,.5); } html[data-theme="light"] .tags li { color: #38413C; background: rgba(255,255,255,.7); } /* почему мы, мифы, пригон, вопросы */ html[data-theme="light"] .tile--tt { background: linear-gradient(160deg, rgba(11,138,72,.14), rgba(255,255,255,.93) 52%, rgba(215,42,63,.08)) padding-box, var(--glass-edge) border-box; } html[data-theme="light"] .ornament { opacity: .3; filter: hue-rotate(95deg) saturate(1.4) brightness(.55); } html[data-theme="light"] .myth__f { background: rgba(255,255,255,.72); box-shadow: 0 14px 34px -30px rgba(20,44,30,.5); } html[data-theme="light"] .myth__b { background: linear-gradient(160deg, rgba(0,166,81,.14), rgba(255,255,255,.95)); border-color: rgba(0,166,81,.5); } html[data-theme="light"] .routes__d circle { fill: #0B8F48; } html[data-theme="light"] .routes__d .home { fill: #00A651; filter: drop-shadow(0 0 6px rgba(0,166,81,.6)); } html[data-theme="light"] .routes__t text { fill: #121714; } html[data-theme="light"] .routes__t .s { fill: #636B66; } html[data-theme="light"] .faq details { background: rgba(255,255,255,.66); } html[data-theme="light"] .faq details[open] { background: rgba(0,166,81,.06); border-color: rgba(0,166,81,.4); } /* формы */ html[data-theme="light"] .fld input, html[data-theme="light"] .fld select, html[data-theme="light"] .fld textarea { background: #fff; border-color: rgba(18,28,22,.18); } html[data-theme="light"] .fld select { background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234D5651' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") right 14px center/18px no-repeat; } html[data-theme="light"] .fld select option { background: #fff; } html[data-theme="light"] .fld input::placeholder, html[data-theme="light"] .fld textarea::placeholder { color: #737A76; } html[data-theme="light"] .fld input:focus, html[data-theme="light"] .fld select:focus, html[data-theme="light"] .fld textarea:focus { border-color: #00A651; box-shadow: 0 0 0 3px rgba(0,166,81,.18); } html[data-theme="light"] .agree input { accent-color: #00A651; } html[data-theme="light"] .msg-links a { background: #fff; } /* рейтинг Яндекса: светлый бейдж (js/theme.js меняет theme= у iframe) */ html[data-theme="light"] .yrate { box-shadow: 0 10px 30px -20px rgba(20,44,30,.45); } html[data-theme="light"] .yrate__f { background: #fff; } /* подвал */ html[data-theme="light"] .foot { background: rgba(255,255,255,.55); } html[data-theme="light"] .foot__tt { color: #2A322E !important; } /* нижняя панель телефона */ @media (max-width: 1020px) { html[data-theme="light"] .dock { background: rgba(251,250,247,.97); border-top-color: rgba(18,28,22,.12); box-shadow: 0 -10px 30px -20px rgba(20,40,30,.35); } html[data-theme="light"] .dock a, html[data-theme="light"] .dock button, html[data-theme="light"] .dock .dock__main { color: #121714 !important; -webkit-text-fill-color: #121714; } html[data-theme="light"] .dock .ic { stroke: #121714 !important; } html[data-theme="light"] .dock > *:not(:last-child)::before { background: rgba(18,28,22,.12); } html[data-theme="light"] .dock .dock__main::after { background-color: #0A9A4F; box-shadow: 0 6px 16px -6px rgba(0,140,68,.8); } } @media (max-width: 860px) { html[data-theme="light"] .dock { background: rgba(251,250,247,.97); border-color: rgba(18,28,22,.12); } } /* чат консультанта */ html[data-theme="light"] .chat__box { background: #FFFFFF; border-color: rgba(18,28,22,.14); box-shadow: 0 40px 100px -30px rgba(20,40,30,.45); } html[data-theme="light"] .chat__head { background: linear-gradient(100deg, rgba(0,166,81,.10), rgba(18,28,22,.03)); } html[data-theme="light"] .chat__x { background: rgba(18,28,22,.06); } html[data-theme="light"] .msg--bot { background: #F3F1EC; } html[data-theme="light"] .msg--me { background: linear-gradient(120deg, #0C944B, #07793B); } html[data-theme="light"] .chat__hints button { background: #fff; } html[data-theme="light"] .chat__form input { background: #F7F6F2; } /* логотип для светлого фона: «Моторс» графитом (img/logo-light.svg = logo.svg с #16181C вместо белого) */ .logo__img--l { display: none; } html[data-theme="light"] .logo__img:not(.logo__img--l) { display: none; } html[data-theme="light"] .logo__img--l { display: block; } html[data-theme="light"] { --tm-ic-g: #0B8F48; } /* значки в плашках у машины (инлайн-стиль в index.src.html) */ /* ═══ Светлая тема, доработка 30.09.2026 (Ленар): ролик «Как проходит выкуп» и нижняя панель телефона. Только под html[data-theme="light"]. Светлые файлы ролика — video/vykup-light-*.mp4, poster-light.jpg (js/app.js). ═══ */ html[data-theme="light"] .film__frame { background: #F3F1EC; } html[data-theme="light"] .film__bar { background: rgba(18,28,22,.12); } html[data-theme="light"] .film__bar i { background: linear-gradient(90deg, #007A3D, #00A651); } @media (max-width: 1020px) { html[data-theme="light"] .dock { background: rgba(255,255,255,.9); border-top: 1px solid rgba(18,28,22,.10); -webkit-backdrop-filter: blur(18px) saturate(160%); backdrop-filter: blur(18px) saturate(160%); box-shadow: 0 -1px 0 rgba(255,255,255,.9) inset, 0 -12px 32px -22px rgba(20,40,30,.38); } html[data-theme="light"] .dock a, html[data-theme="light"] .dock button, html[data-theme="light"] .dock .dock__main { color: #121714 !important; -webkit-text-fill-color: #121714; } html[data-theme="light"] .dock .ic { stroke: #2A322E !important; } html[data-theme="light"] .dock > *:not(:last-child)::before { background: rgba(18,28,22,.10); } html[data-theme="light"] .dock .dock__main::after { background-color: #00A651; box-shadow: 0 0 0 4px rgba(0,166,81,.12), 0 8px 18px -8px rgba(0,122,61,.75); } } /* ---- 30.09.2026: плашка Яндекс Карт — приглашение оставить отзыв (виджет со звёздами вернуть, когда будет ≥ 5 отзывов и 4,5+; прежняя разметка — _src/yrate_widget.html). Рамка и свечение — зелёные, как у кнопок сайта. */ .yrate{background:linear-gradient(var(--s2),var(--s2)) padding-box,linear-gradient(100deg,#00A651,#46E08F 45%,#2E9E50) border-box; box-shadow:0 10px 30px -20px rgba(61,184,97,.55)} .yrate:hover{box-shadow:0 16px 40px -18px rgba(61,184,97,.7)} .yrate__f{background:transparent} .yrate--invite{gap:12px;padding:12px 16px} .yrate--invite .yrate__t{max-width:none;font:500 14px/1.3 var(--ff);color:var(--mu)} .yrate--invite .yrate__t b{font-weight:700;color:var(--tx,#fff)} .yrate__star{flex:none;display:grid;place-items:center;width:34px;height:34px;border-radius:50%;font-size:18px;line-height:1; color:#FFCC00;background:rgba(255,204,0,.12);box-shadow:inset 0 0 0 1px rgba(255,204,0,.35)} .yrate__go{flex:none;color:var(--tm-gi,#3FCB6C);font-weight:700;font-size:18px;transition:transform .3s var(--ease)} .yrate:hover .yrate__go{transform:translateX(3px)} html[data-theme="light"] .yrate{background:linear-gradient(#fff,#fff) padding-box,linear-gradient(100deg,#00A651,#3DB861 45%,#0A7F40) border-box} html[data-theme="light"] .yrate--invite .yrate__t b{color:#16181C} html[data-theme="light"] .yrate__star{color:#E0A800;background:rgba(224,168,0,.1);box-shadow:inset 0 0 0 1px rgba(224,168,0,.35)} html[data-theme="light"] .yrate__go{color:#0A7F40} /* ---- 30.09.2026 21:15: плашка отзыва — в колонке компании, подальше от контактов; пять звёзд без круга */ .foot__brand .yrate{margin:6px 0 0} .yrate--invite .yrate__t{display:grid;gap:3px} .yrate__stars{color:#FFCC00;font-size:15px;letter-spacing:2px;line-height:1} html[data-theme="light"] .yrate__stars{color:#E0A800}