:root { --bg: #0e1016; --bg2: #151821; --navy: #1b1f2c; --card: #1f2433; --line: rgba(255,255,255,.09); --y: #ffc31f; --y2: #e0a800; --ink: #0e1016; --tx: #f2f3f6; --mut: #9aa1b2; --green: #2bd27b; --red: #ff6b5b; --head: "Oswald", "Arial Narrow", sans-serif; --body: "Inter", -apple-system, "Segoe UI", Roboto, sans-serif; --r: 14px; --nav: 72px; } * { box-sizing: border-box; } html { scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } html.modal-open, html.modal-open body { overflow: hidden; } [hidden] { display: none !important; } /* спрятанное прячется всегда, даже если класс задаёт display (.btn и т. п.) */ .vh { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } :focus-visible { outline: 2px solid var(--y); outline-offset: 2px; } html, body { margin: 0; } body { background: var(--bg); color: var(--tx); font: 16px/1.5 var(--body); -webkit-font-smoothing: antialiased; overflow-x: hidden; overflow-x: clip; } a { color: inherit; text-decoration: none; } button { font: inherit; cursor: pointer; color: inherit; } .wrap { max-width: 1240px; margin: 0 auto; padding: 0 28px; } .y { color: var(--y); } .muted { color: var(--mut); } .small { font-size: 13px; } .eyebrow { font: 600 13px/1 var(--body); letter-spacing: .14em; text-transform: uppercase; color: var(--y); margin: 0 0 14px; } .h2 { font: 700 clamp(30px, 4.2vw, 52px)/1.05 var(--head); text-transform: uppercase; margin: 0 0 18px; letter-spacing: .01em; } /* иконки */ .ic { display: inline-block; width: 16px; height: 16px; vertical-align: -3px; margin-right: 7px; background: currentColor; -webkit-mask: var(--m) center/contain no-repeat; mask: var(--m) center/contain no-repeat; } .ic-pin { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a7 7 0 0 0-7 7c0 5 7 13 7 13s7-8 7-13a7 7 0 0 0-7-7zm0 9.5A2.5 2.5 0 1 1 12 6a2.5 2.5 0 0 1 0 5.5z'/%3E%3C/svg%3E"); color: var(--y); } .ic-clock { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20zm1 10.4V6h-2v7.4l5.2 3.1 1-1.7z'/%3E%3C/svg%3E"); color: var(--y); } .ic-phone { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.6 10.8a15 15 0 0 0 6.6 6.6l2.2-2.2c.3-.3.7-.4 1-.2 1.1.4 2.3.6 3.6.6.6 0 1 .4 1 1V20c0 .6-.4 1-1 1A17 17 0 0 1 3 4c0-.6.4-1 1-1h3.5c.6 0 1 .4 1 1 0 1.3.2 2.5.6 3.6.1.3 0 .7-.2 1z'/%3E%3C/svg%3E"); } .ic-target { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 8a4 4 0 1 0 0 8 4 4 0 0 0 0-8zm9 3h-2.1A7 7 0 0 0 13 5.1V3h-2v2.1A7 7 0 0 0 5.1 11H3v2h2.1a7 7 0 0 0 5.9 5.9V21h2v-2.1a7 7 0 0 0 5.9-5.9H21zm-9 6a5 5 0 1 1 0-10 5 5 0 0 1 0 10z'/%3E%3C/svg%3E"); } .ic-search { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M15.5 14h-.8l-.3-.3A6.5 6.5 0 1 0 14 15.5l.3.3v.8l5 5 1.5-1.5zm-6 0a4.5 4.5 0 1 1 0-9 4.5 4.5 0 0 1 0 9z'/%3E%3C/svg%3E"); color: var(--mut); } /* кнопки */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 4px; border: 0; border-radius: 4px; padding: 12px 20px; font: 600 15px/1 var(--head); letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; transition: transform .15s, box-shadow .2s, background .2s; } .btn:hover { transform: translateY(-2px); } .btn-y { background: var(--y); color: var(--ink); box-shadow: 0 6px 22px rgba(255,195,31,.25); } .btn-y:hover { box-shadow: 0 10px 30px rgba(255,195,31,.4); } .btn-ghost { border: 1.5px solid rgba(255,255,255,.35); color: #fff; background: rgba(255,255,255,.04); } .btn-ghost:hover { border-color: var(--y); color: var(--y); } .btn-dark { background: var(--ink); color: var(--y); } .btn-lg { padding: 17px 26px; font-size: 16px; } .arr { font-style: normal; margin-left: 4px; transition: transform .2s; } .btn:hover .arr { transform: translateX(4px); } /* шапка */ .topbar { background: #0a0c11; border-bottom: 1px solid var(--line); font-size: 13px; color: var(--mut); } .topbar-in { display: flex; gap: 22px; align-items: center; height: 38px; } .topbar b { color: #fff; } .topbar .sp { flex: 1; } .tb-phone { color: #fff; font-weight: 700; } .tb-phone .ic { color: var(--y); } .nav { position: sticky; top: 0; z-index: 50; height: var(--nav); background: rgba(14,16,22,.82); backdrop-filter: blur(12px); border-bottom: 1px solid var(--line); transition: background .3s, transform .35s; } .nav.nav-hide { transform: translateY(-100%); } .nav-in { display: flex; align-items: center; gap: 32px; height: 100%; } .logo { display: flex; align-items: center; gap: 10px; font: 700 21px/1 var(--head); letter-spacing: .04em; } .logo b { color: var(--y); margin-left: 6px; } .logo-mark { width: 30px; height: 30px; border-radius: 50% 50% 50% 3px; transform: rotate(-45deg); background: var(--y); flex: none; box-shadow: inset 0 0 0 8px var(--y), inset 0 0 0 15px var(--ink); } .menu { display: flex; gap: 28px; margin-left: auto; font: 500 15px/1 var(--head); letter-spacing: .08em; text-transform: uppercase; } .menu a { position: relative; padding: 6px 0; color: #d9dce4; } .menu a::after { content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 2px; background: var(--y); transform: scaleX(0); transition: transform .25s; } .menu a:hover { color: #fff; } .menu a:hover::after, .menu a.on::after { transform: scaleX(1); } .burger { display: none; background: none; border: 0; width: 40px; height: 40px; padding: 9px 8px; } .burger i { display: block; height: 2px; background: #fff; margin: 4px 0; border-radius: 2px; } /* первый экран */ .hero { position: relative; min-height: calc(100vh - var(--nav) - 38px); min-height: calc(100svh - var(--nav) - 38px); display: flex; align-items: center; overflow: hidden; isolation: isolate; } .hero-bg { position: absolute; inset: 0; z-index: -1; background: radial-gradient(1200px 600px at 75% 40%, #232a3d 0%, var(--bg) 60%); } .hero-grid { position: absolute; inset: 0; background-image: linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px); background-size: 56px 56px; mask-image: radial-gradient(ellipse at 70% 50%, #000 20%, transparent 70%); } .slab { position: absolute; background: var(--y); transform-origin: center; } .slab.s1 { width: 180px; height: 160%; right: 6%; top: -30%; transform: rotate(28deg); opacity: .95; animation: slabIn 1.1s cubic-bezier(.2,.8,.2,1) both; } .slab.s2 { width: 60px; height: 160%; right: 22%; top: -30%; transform: rotate(28deg); opacity: .5; animation: slabIn 1.3s .1s cubic-bezier(.2,.8,.2,1) both; } .slab.s3 { width: 14px; height: 160%; right: 27%; top: -30%; transform: rotate(28deg); background: transparent; border-left: 2px solid rgba(255,195,31,.6); animation: slabIn 1.5s .15s both; } .slab.s4 { width: 340px; height: 160%; right: -14%; top: -30%; transform: rotate(28deg); opacity: .18; animation: slabIn 1.6s .2s both; } @keyframes slabIn { from { translate: 400px 0; opacity: 0; } } .rings { position: absolute; right: 9%; top: 50%; width: 420px; height: 420px; translate: 0 -50%; } .rings i { position: absolute; inset: 0; border-radius: 50%; border: 1.5px dashed rgba(255,255,255,.18); animation: spin 40s linear infinite; } .rings i:nth-child(2) { inset: 60px; border-style: solid; border-color: rgba(255,195,31,.35); animation-duration: 25s; animation-direction: reverse; } .rings i:nth-child(3) { inset: 150px; background: radial-gradient(circle, rgba(255,195,31,.35), transparent 70%); border: 0; animation: pulse 3s ease-in-out infinite; } @keyframes spin { to { transform: rotate(360deg); } } @keyframes pulse { 50% { transform: scale(1.25); opacity: .5; } } .hero-in { padding-top: 40px; padding-bottom: 120px; } .hero-title { font: 700 clamp(54px, 9vw, 128px)/.92 var(--head); text-transform: uppercase; margin: 0 0 22px; letter-spacing: -.005em; } .hero-title span { display: block; } .hero-title .y { text-shadow: 0 0 60px rgba(255,195,31,.25); } .hero-sub { max-width: 560px; color: #c7cbd6; font-size: 18px; margin: 0 0 32px; } .hero-btns { display: flex; gap: 14px; flex-wrap: wrap; } .scroll-hint { position: absolute; left: 50%; bottom: 26px; translate: -50% 0; display: flex; flex-direction: column; align-items: center; gap: 10px; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--mut); } .scroll-hint i { width: 24px; height: 38px; border: 2px solid rgba(255,255,255,.35); border-radius: 14px; position: relative; } .scroll-hint i::after { content: ""; position: absolute; left: 50%; top: 7px; width: 4px; height: 8px; margin-left: -2px; border-radius: 2px; background: var(--y); animation: wheel 1.6s infinite; } @keyframes wheel { 60% { transform: translateY(12px); opacity: 0; } 100% { opacity: 0; } } .feats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: -70px; position: relative; z-index: 3; } /* подсказка «Листайте» стоит над карточками .feats (они заходят на первый экран на 70 px), а не под ними */ @media (min-width: 761px) { .scroll-hint { bottom: 92px; } .hero-in { padding-bottom: 170px; } } .feat { background: var(--card); border: 1px solid var(--line); border-radius: 6px; padding: 26px 26px 22px; transition: transform .25s, border-color .25s; } .feat:hover { transform: translateY(-6px); border-color: rgba(255,195,31,.5); } .feat b { font: 700 46px/1 var(--head); color: var(--y); } .feat span { font: 600 15px/1 var(--head); letter-spacing: .1em; text-transform: uppercase; margin-left: 8px; } .feat p { margin: 10px 0 0; color: var(--mut); font-size: 14.5px; } .feat-y { background: var(--y); color: var(--ink); border-color: var(--y); } .feat-y b { color: var(--ink); } .feat-y p { color: #3a3218; } /* станции: карта */ .stations { position: relative; margin-top: 90px; scroll-margin-top: var(--nav); } .map-stage { position: relative; height: calc(100vh - var(--nav)); height: calc(100svh - var(--nav)); min-height: 600px; overflow: hidden; overflow: clip; background: #05070b; } #map { position: absolute; inset: 0; } /* космос за глобусом: звёзды (рисуются в JS), лёгкая туманность, свечение атмосферы и объём шара */ .space { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse 60% 45% at 78% 22%, rgba(70,90,160,.10), transparent 70%), radial-gradient(ellipse 50% 40% at 15% 80%, rgba(120,70,150,.07), transparent 70%), #04060b; } .space i { position: absolute; inset: 0; background-repeat: repeat; } .space i.tw { animation: twinkle 5s ease-in-out infinite alternate; } @keyframes twinkle { from { opacity: .35; } to { opacity: 1; } } /* шар и свечение — постоянного размера, на место их ставит transform из JS (translate3d + scale): каждый кадр работает только композитор, без раскладки и перерисовки градиентов (идея варианта 4) */ .g-halo, .g-shade { position: absolute; left: 0; top: 0; border-radius: 50%; pointer-events: none; opacity: 0; transition: opacity .4s; width: 1000px; height: 1000px; transform-origin: 0 0; will-change: transform; } .g-halo { z-index: 1; width: 1250px; height: 1250px; background: radial-gradient(circle closest-side, rgba(110,170,255,.0) 77%, rgba(110,170,255,.42) 80.5%, rgba(70,130,255,.16) 86%, rgba(40,90,220,.05) 93%, transparent 100%); } .g-shade { z-index: 1; background: radial-gradient(circle at 34% 28%, rgba(255,255,255,.10) 0%, rgba(255,255,255,0) 32%), radial-gradient(circle at 40% 36%, rgba(0,0,0,0) 52%, rgba(2,6,20,.38) 82%, rgba(2,6,20,.7) 100%); box-shadow: inset 0 0 30px rgba(140,190,255,.35); } .fx-on .g-halo, .fx-on .g-shade { opacity: 1; } @media (prefers-reduced-motion: reduce) { .space i.tw { animation: none; } } /* карта за экраном — мерцание звёзд на паузе (идея варианта 4) */ .map-stage:not(.stage-vis) .space i.tw, .map-stage:not(.stage-vis) .geo-dot::after { animation-play-state: paused; } .map-shade { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, var(--bg) 0%, transparent 16%, transparent 84%, var(--bg) 100%); transition: opacity 1s; } .stage-ready .map-shade { opacity: .0; } .intro { position: absolute; left: 50%; top: 13%; translate: -50% 0; text-align: center; pointer-events: none; transition: opacity .8s, translate .8s; z-index: 2; } .intro h2 { font: 700 clamp(34px, 5vw, 64px)/1 var(--head); text-transform: uppercase; margin: 0; text-shadow: 0 4px 30px rgba(0,0,0,.6); } .intro h2 .count { color: var(--y); } .intro-sub { color: #c7cbd6; margin: 10px 0 0; font-size: 17px; } .stage-ready .intro { opacity: 0; translate: -50% -30px; } .geo-btn { position: absolute; left: 50%; bottom: 40px; translate: -50% 140px; opacity: 0; z-index: 4; display: flex; align-items: center; gap: 14px; text-align: left; border: 0; border-radius: 60px; padding: 14px 26px 14px 16px; background: var(--y); color: var(--ink); box-shadow: 0 14px 40px rgba(0,0,0,.45), 0 0 0 0 rgba(255,195,31,.6); transition: translate .7s cubic-bezier(.2,.9,.2,1.2), opacity .5s, left .6s, box-shadow .3s; } .geo-btn b { display: block; font: 700 17px/1.1 var(--head); letter-spacing: .04em; text-transform: uppercase; } .geo-btn small { display: block; font-size: 12.5px; color: #4b4120; } .geo-dot { width: 40px; height: 40px; border-radius: 50%; background: var(--ink); position: relative; flex: none; } .geo-dot::before { content: ""; position: absolute; inset: 13px; border-radius: 50%; background: var(--y); } .geo-dot::after { content: ""; position: absolute; inset: -6px; border-radius: 50%; border: 2px solid var(--ink); animation: ping 1.6s infinite; } @keyframes ping { from { transform: scale(.7); opacity: 1; } to { transform: scale(1.5); opacity: 0; } } .geo-show .geo-btn { translate: -50% 0; opacity: 1; } .geo-btn:hover { box-shadow: 0 18px 50px rgba(0,0,0,.5), 0 0 0 8px rgba(255,195,31,.18); } .stage-ready.with-panel .geo-btn { left: calc((100% - 400px) / 2); } .geo-btn.busy .geo-dot::before { animation: pulse .8s infinite; } .nearest { position: absolute; left: 60px; bottom: 44px; z-index: 4; max-width: 340px; background: rgba(21,24,33,.92); backdrop-filter: blur(10px); border: 1px solid var(--line); border-left: 4px solid var(--y); border-radius: 8px; padding: 14px 16px; font-size: 14px; opacity: 0; translate: -20px 0; transition: .4s; pointer-events: none; } .nearest.on { opacity: 1; translate: 0 0; pointer-events: auto; } .nearest b { font: 700 22px/1.1 var(--head); color: var(--y); display: block; } /* панель со списком */ .panel { position: absolute; right: 16px; top: 16px; bottom: 16px; width: 380px; z-index: 5; display: flex; flex-direction: column; background: rgba(17,20,28,.94); backdrop-filter: blur(14px); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 20px 60px rgba(0,0,0,.5); translate: 440px 0; transition: translate .8s cubic-bezier(.2,.8,.2,1); } .with-panel .panel { translate: 0 0; } .panel-head { display: flex; justify-content: space-between; align-items: center; padding: 18px 18px 10px; } .panel-head .panel-title { margin: 0; font: 700 24px/1 var(--head); text-transform: uppercase; letter-spacing: .03em; } .panel-head p { margin: 4px 0 0; color: var(--mut); font-size: 13.5px; } .panel-x { display: none; background: none; border: 0; font-size: 26px; color: var(--mut); } .panel-tools { padding: 0 18px 12px; border-bottom: 1px solid var(--line); } .search { display: flex; align-items: center; background: #0b0d12; border: 1px solid var(--line); border-radius: 8px; padding: 0 12px; } .search:focus-within { border-color: var(--y); } .search input { flex: 1; background: none; border: 0; outline: 0; color: #fff; font-size: 15px; padding: 11px 0; min-width: 0; } .row2 { display: flex; gap: 8px; margin-top: 8px; } .sel { flex: 1; display: flex; align-items: center; gap: 6px; background: #0b0d12; border: 1px solid var(--line); border-radius: 8px; padding: 0 10px; min-width: 0; } .sel span { color: var(--mut); font-size: 12px; text-transform: uppercase; letter-spacing: .08em; } .sel select { flex: 1; min-width: 0; background: none; border: 0; outline: 0; color: #fff; font: 600 14px var(--body); padding: 10px 0; cursor: pointer; } .sel select option { background: #151821; } .chip { display: inline-flex; align-items: center; gap: 6px; background: #0b0d12; border: 1px solid var(--line); border-radius: 8px; padding: 0 12px; font-size: 13.5px; font-weight: 600; white-space: nowrap; } .chip i { width: 8px; height: 8px; border-radius: 50%; background: var(--green); } .chip.on { background: var(--y); color: var(--ink); border-color: var(--y); } .cities-wrap { position: relative; margin-top: 10px; } .cities { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: thin; scrollbar-color: #2b3142 transparent; padding-bottom: 6px; overscroll-behavior-x: contain; } .cs-arr { position: absolute; top: 0; z-index: 1; width: 34px; height: 30px; border: 0; padding: 0; font-size: 22px; line-height: 1; color: var(--y); opacity: 0; pointer-events: none; transition: opacity .2s; } .cs-arr.l { left: 0; background: linear-gradient(90deg, rgba(17,20,28,1) 55%, rgba(17,20,28,0)); text-align: left; } .cs-arr.r { right: 0; background: linear-gradient(270deg, rgba(17,20,28,1) 55%, rgba(17,20,28,0)); text-align: right; } .has-l .cs-arr.l, .has-r .cs-arr.r { opacity: 1; pointer-events: auto; } @media (hover: none) { .cs-arr { display: none; } .cities { scrollbar-width: none; } } .cities button { flex: none; background: none; border: 1px solid var(--line); border-radius: 20px; padding: 5px 11px; font-size: 13px; color: #cfd3dc; } .cities button:hover, .cities button.on { border-color: var(--y); color: var(--y); } .plist { list-style: none; margin: 0; padding: 6px 0; overflow-y: auto; flex: 1; scrollbar-width: thin; scrollbar-color: #2b3142 transparent; } .pgroup { padding: 12px 18px 4px; font: 600 12px/1 var(--body); letter-spacing: .12em; text-transform: uppercase; color: var(--mut); } .pi-main { display: block; width: 100%; background: none; border: 0; padding: 0; margin: 0; text-align: left; color: inherit; font: inherit; } .pi-main > span { display: flex; } .pi-main .pi-cats { display: block; } .pi-addr { display: block; } .pi-ref { color: #c9cdd8; } .pi-ref::before { content: "· "; color: var(--mut); } .pi-price small { font-weight: 500; color: var(--mut); font-size: 12px; } .pi-closed { margin: 8px 0 0; font-size: 13px; color: #ffb3a8; } .pi-closed a { color: var(--y); text-decoration: underline; } .pi-ya { display: none; margin-top: 8px; font-size: 12.5px; color: var(--mut); text-decoration: underline; text-underline-offset: 3px; } .pitem.on .pi-ya, .pop .pi-ya { display: inline-block; } .pi-ya:hover { color: var(--y); } .pempty { padding: 18px; color: var(--mut); font-size: 14px; list-style: none; } .pempty .btn { display: flex; margin-top: 12px; padding: 11px 16px; font-size: 14px; } .pitem { margin: 4px 10px; padding: 12px 12px 12px 14px; border-radius: 8px; border: 1px solid transparent; cursor: pointer; transition: background .2s, border-color .2s; opacity: 0; translate: 20px 0; } .with-panel .pitem { opacity: 1; translate: 0 0; transition: opacity .4s var(--d, 0s), translate .4s var(--d, 0s), background .2s, border-color .2s; } .pitem:hover { background: rgba(255,255,255,.04); } .pitem.on { border-color: var(--y); background: rgba(255,195,31,.07); } .pi-top { display: flex; justify-content: space-between; gap: 10px; } .pi-addr { font-weight: 700; font-size: 15px; line-height: 1.3; } .pi-dist { font: 600 15px/1.2 var(--head); color: var(--y); white-space: nowrap; } .pi-meta { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; margin-top: 6px; font-size: 13px; color: var(--mut); } .st { display: inline-flex; align-items: center; gap: 5px; color: #d6dae3; } .st::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--green); } .st.off { color: var(--mut); } .st.off::before { background: #5d6475; } .pi-price { color: #fff; font-weight: 600; } .pi-cats { margin-top: 4px; font-size: 12.5px; color: #7d8496; } .pi-act { display: none; gap: 6px; margin-top: 10px; } .pitem.on .pi-act { display: flex; } .pi-act a { flex: 1; text-align: center; padding: 9px 6px; border-radius: 4px; font: 600 13px/1 var(--head); letter-spacing: .06em; text-transform: uppercase; border: 1px solid var(--line); } .pi-act a.y { background: var(--y); color: var(--ink); border-color: var(--y); } .panel-open { display: none; } /* метки и всплывашки на карте */ .sel-pin { width: 38px; height: 38px; border-radius: 50% 50% 50% 4px; transform: rotate(-45deg); margin-bottom: 8px; background: var(--y); box-shadow: inset 0 0 0 10px var(--y), inset 0 0 0 19px var(--ink), 0 8px 20px rgba(0,0,0,.5); animation: drop .5s cubic-bezier(.2,.9,.3,1.4); } @keyframes drop { from { translate: 0 -30px; opacity: 0; } } .geo-done .geo-btn { padding: 8px 18px 8px 8px; } .geo-done .geo-btn small { display: none; } .geo-done .geo-btn .geo-dot { width: 30px; height: 30px; } .geo-done .geo-btn .geo-dot::before { inset: 9px; } .geo-done .geo-btn b { font-size: 14px; } .me-mark { width: 18px; height: 18px; border-radius: 50%; box-shadow: 0 0 0 6px rgba(61,139,255,.22); } .me-mark::before { content: ""; position: absolute; inset: 0; border-radius: 50%; background: #3d8bff; border: 3px solid #fff; z-index: 1; box-sizing: border-box; } /* пульс «я здесь» — transform и opacity (композитор), а не анимация box-shadow с перерисовкой каждый кадр */ .me-mark::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: rgba(61,139,255,.45); z-index: 0; animation: me 1.8s ease-out infinite; } @keyframes me { from { transform: scale(1); opacity: .9; } 70%, to { transform: scale(2.6); opacity: 0; } } .maplibregl-popup-content { background: #151821; color: var(--tx); border-radius: 10px; padding: 14px 16px; border: 1px solid var(--line); box-shadow: 0 16px 40px rgba(0,0,0,.5); font: 14px/1.4 var(--body); } .maplibregl-popup-tip { border-top-color: #151821 !important; border-bottom-color: #151821 !important; } .maplibregl-popup-close-button { color: var(--mut); font-size: 20px; right: 6px; top: 4px; } .pop b { display: block; font-size: 15px; margin-bottom: 2px; padding-right: 14px; } .pop .muted { font-size: 13px; } .pop .pi-act { display: flex; } .pop .pi-meta { margin: 6px 0 2px; } .maplibregl-ctrl-group { background: #151821; } .maplibregl-ctrl-group button + button { border-top-color: var(--line); } .maplibregl-ctrl-group button span { filter: invert(1); } .maplibregl-ctrl-attrib { background: rgba(14,16,22,.7) !important; color: var(--mut); } .maplibregl-ctrl-attrib a { color: var(--mut); } .maplibregl-cooperative-gesture-screen { font-family: var(--body); } .maplibregl-ctrl-bottom-left .maplibregl-ctrl-attrib { max-width: calc(100vw - 460px); } .maplibregl-ctrl-attrib.maplibregl-compact { color: #cfd3dc; } .map-fail { position: absolute; left: 50%; top: 22%; translate: -50% 0; z-index: 6; width: min(420px, calc(100% - 32px)); padding: 18px 20px; border-radius: 12px; background: rgba(17,20,28,.94); border: 1px solid var(--line); border-left: 4px solid var(--y); box-shadow: 0 16px 40px rgba(0,0,0,.5); font-size: 14.5px; color: #d6dae3; } .map-fail[hidden] { display: none; } .map-fail b { display: block; font: 700 20px/1.2 var(--head); text-transform: uppercase; color: #fff; margin-bottom: 4px; } .map-fail span { display: block; } .map-fail a { color: var(--y); } .with-panel .map-fail { left: calc((100% - 400px) / 2); } /* как проходит */ .how { padding: 110px 0 90px; } .steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin-top: 40px; counter-reset: s; } .step { position: relative; background: var(--bg2); border: 1px solid var(--line); border-radius: 6px; padding: 28px 24px; overflow: hidden; transition: transform .25s, border-color .25s; } .step::before { content: ""; position: absolute; left: 0; top: 0; height: 3px; width: 0; background: var(--y); transition: width .4s; } .step:hover { transform: translateY(-6px); border-color: rgba(255,195,31,.4); } .step:hover::before { width: 100%; } .step em { font: 700 54px/1 var(--head); font-style: normal; color: transparent; -webkit-text-stroke: 1.5px var(--y); } .step h3 { font: 600 21px/1.15 var(--head); text-transform: uppercase; margin: 14px 0 8px; letter-spacing: .02em; } .step p { color: var(--mut); margin: 0; font-size: 15px; } /* цены */ .prices { padding: 90px 0; background: var(--navy); position: relative; overflow: hidden; } .prices::before { content: ""; position: absolute; width: 120px; height: 200%; right: 8%; top: -50%; background: var(--y); opacity: .08; transform: rotate(28deg); } .prices-in { display: grid; grid-template-columns: 1.1fr .9fr; gap: 60px; align-items: center; position: relative; } .sel.big { max-width: 420px; margin: 26px 0 16px; padding: 4px 14px; } .sel.big select { font-size: 16px; } .tabs { display: flex; flex-wrap: wrap; gap: 8px; } .tabs button { background: transparent; border: 1px solid rgba(255,255,255,.18); border-radius: 4px; padding: 9px 14px; font: 600 15px/1 var(--head); letter-spacing: .05em; color: #d6dae3; transition: .2s; } .tabs button:hover { border-color: var(--y); color: var(--y); } .tabs button.on { background: var(--y); color: var(--ink); border-color: var(--y); } .price-card { background: var(--bg); border: 1px solid var(--line); border-radius: 10px; padding: 40px; text-align: center; position: relative; } .price-card::after { content: ""; position: absolute; inset: -1px; border-radius: 10px; padding: 1px; background: linear-gradient(140deg, var(--y), transparent 40%); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; } .pc-label { font: 600 15px/1 var(--head); letter-spacing: .12em; text-transform: uppercase; color: var(--mut); } .pc-sum { margin: 16px 0 6px; font: 700 96px/1 var(--head); color: var(--y); } .pc-sum i { font-style: normal; font-size: 48px; margin-left: 8px; } .pc-note { color: var(--mut); margin: 0 0 26px; } .pc-ref { color: #d6dae3; font-size: 16px; margin: 0 0 6px; } .pc-ref[hidden] { display: none; } /* вопросы */ .faq { padding: 100px 0 80px; } .acc { max-width: 860px; margin-top: 30px; } .acc details { border-bottom: 1px solid var(--line); } .acc summary { list-style: none; cursor: pointer; padding: 22px 40px 22px 0; font: 600 21px/1.2 var(--head); text-transform: uppercase; letter-spacing: .02em; position: relative; } .acc summary::-webkit-details-marker { display: none; } .acc summary::after { content: "+"; position: absolute; right: 4px; top: 16px; font: 400 32px/1 var(--body); color: var(--y); transition: transform .3s; } .acc details[open] summary::after { transform: rotate(45deg); } .acc details p { margin: 0 0 22px; color: var(--mut); font-size: 16px; max-width: 700px; } .cta { background: var(--y); color: var(--ink); padding: 56px 0; } .cta-in { display: flex; align-items: center; gap: 26px; flex-wrap: wrap; } .cta h2 { font: 700 clamp(28px, 3.6vw, 44px)/1.05 var(--head); text-transform: uppercase; margin: 0; flex: 1; min-width: 280px; } .cta-phone { font: 700 24px/1 var(--head); } .foot { padding: 40px 0; border-top: 1px solid var(--line); } .foot-in { display: flex; gap: 40px; align-items: center; flex-wrap: wrap; color: var(--mut); font-size: 14px; } .foot-in p { margin: 0; } .foot-in a[href^="tel"] { color: #fff; font-weight: 600; } .toast { position: fixed; left: 50%; bottom: 28px; bottom: calc(28px + env(safe-area-inset-bottom) + var(--ext-b, 0px)); translate: -50% 20px; opacity: 0; background: #fff; color: var(--ink); padding: 12px 18px; border-radius: 8px; font-weight: 600; z-index: 100; transition: .3s; pointer-events: none; box-shadow: 0 10px 30px rgba(0,0,0,.4); } .toast.on { opacity: 1; translate: -50% 0; } /* появление при прокрутке */ .reveal { opacity: 0; translate: 0 26px; transition: opacity .8s, translate .8s cubic-bezier(.2,.8,.2,1); } .reveal.in { opacity: 1; translate: 0 0; } .hero .reveal:nth-child(2) { transition-delay: .1s; } .hero .reveal:nth-child(3) { transition-delay: .2s; } .hero .reveal:nth-child(4) { transition-delay: .3s; } .steps .reveal:nth-child(2), .feats .reveal:nth-child(2) { transition-delay: .1s; } .steps .reveal:nth-child(3), .feats .reveal:nth-child(3) { transition-delay: .2s; } .steps .reveal:nth-child(4) { transition-delay: .3s; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } .reveal { opacity: 1; translate: 0 0; } } /* планшет / телефон */ @media (max-width: 980px) { .steps { grid-template-columns: 1fr 1fr; } .prices-in { grid-template-columns: 1fr; gap: 34px; } .rings { opacity: .45; right: -120px; } } @media (max-width: 760px) { :root { --nav: 60px; } .wrap { padding: 0 18px; } .hide-sm { display: none; } .topbar-in { gap: 12px; } .menu { display: none; position: absolute; top: var(--nav); left: 0; right: 0; flex-direction: column; gap: 0; background: #11141c; border-bottom: 1px solid var(--line); } .menu.open { display: flex; } .menu a { padding: 16px 18px; border-top: 1px solid var(--line); } .menu a::after { display: none; } .burger { display: block; margin-left: auto; } .nav-cta { display: none; } .logo { font-size: 18px; } .hero-in { padding-bottom: 110px; } .hero-sub { font-size: 16px; } .slab.s1 { width: 70px; right: -16%; top: -10%; opacity: .9; } .slab.s2 { right: -2%; width: 22px; top: -10%; } .slab.s3 { display: none; } .slab.s4 { display: none; } .topbar-in { height: 34px; font-size: 12.5px; } .topbar-in > span:first-child { white-space: nowrap; } .scroll-hint { display: none; } .hero-btns .btn { width: 100%; } .hero-title { font-size: clamp(50px, 15vw, 72px); } .eyebrow { font-size: 11.5px; line-height: 1.4; } .feats { grid-template-columns: 1fr; margin-top: -50px; gap: 12px; } .feat { padding: 20px; } .feat b { font-size: 38px; } .map-stage { height: calc(100svh - var(--nav)); min-height: 520px; } .intro { top: 9%; width: 92%; } .geo-btn { bottom: 24px; padding: 12px 18px 12px 12px; width: calc(100% - 36px); max-width: 420px; } .stage-ready.with-panel .geo-btn { left: 50%; bottom: auto; top: 16px; width: auto; padding: 8px 16px 8px 8px; } .stage-ready.with-panel .geo-btn small { display: none; } .stage-ready.with-panel .geo-btn .geo-dot { width: 30px; height: 30px; } .stage-ready.with-panel .geo-btn .geo-dot::before { inset: 9px; } .panel { left: 0; right: 0; top: auto; bottom: 0; width: auto; height: 56%; border-radius: 16px 16px 0 0; translate: 0 105%; } .panel.min { translate: 0 calc(100% - 74px); } .panel-head { cursor: pointer; } .panel-head::before { content: ''; position: absolute; left: 50%; top: 7px; width: 40px; height: 4px; margin-left: -20px; border-radius: 2px; background: rgba(255,255,255,.25); } .panel-x { transition: transform .3s; } .panel.min .panel-x { transform: rotate(180deg); } .geo-done .geo-btn, .stage-ready.with-panel .geo-btn { bottom: auto; top: 16px; width: auto; max-width: none; padding: 8px 18px 8px 8px; white-space: nowrap; } .stage-ready.with-panel .geo-btn b { font-size: 15px; } .nearest { top: 76px; } .panel-x { display: block; } .nearest { left: 12px; right: 12px; top: 70px; bottom: auto; max-width: none; } .with-panel .maplibregl-ctrl-bottom-left { bottom: 74px; } .maplibregl-ctrl-bottom-left .maplibregl-ctrl-attrib { max-width: calc(100vw - 20px); } .with-panel .map-fail { left: 50%; top: 120px; } .steps { grid-template-columns: 1fr; } .pc-sum { font-size: 72px; } .price-card { padding: 30px 20px; } .acc summary { font-size: 18px; } .how, .faq { padding: 70px 0 60px; } .prices { padding: 64px 0; } } /* ───────── запись на сайте ───────── */ .bk { position: fixed; inset: 0; z-index: 200; display: flex; align-items: center; justify-content: center; padding: 16px; visibility: hidden; } .bk.on { visibility: visible; } .bk-back { position: absolute; inset: 0; background: rgba(5,7,11,.72); backdrop-filter: blur(6px); opacity: 0; transition: opacity .3s; } .bk.on .bk-back { opacity: 1; } .bk-box { position: relative; width: 100%; max-width: 560px; max-height: calc(100vh - 32px); max-height: calc(100dvh - 32px); overflow-y: auto; overscroll-behavior: contain; background: var(--bg2); border: 1px solid var(--line); border-top: 4px solid var(--y); border-radius: 12px; padding: 28px 28px 22px; box-shadow: 0 30px 80px rgba(0,0,0,.6); translate: 0 30px; opacity: 0; transition: translate .4s cubic-bezier(.2,.8,.2,1), opacity .3s; } .bk.on .bk-box { translate: 0 0; opacity: 1; } .bk-x { position: absolute; right: 12px; top: 8px; background: none; border: 0; font-size: 30px; color: var(--mut); line-height: 1; } .bk h3 { font: 700 30px/1.05 var(--head); text-transform: uppercase; margin: 0 0 4px; } .bk-sub { color: var(--mut); margin: 0 0 18px; font-size: 14.5px; } .fld { display: block; margin: 0 0 14px; } .fld > span { display: block; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--mut); margin-bottom: 6px; } .fld i { text-transform: none; letter-spacing: 0; font-style: normal; opacity: .7; } .fld input, .fld select { width: 100%; background: #0b0d12; border: 1px solid var(--line); border-radius: 8px; color: #fff; font: 500 16px var(--body); padding: 12px 14px; outline: 0; } .fld input:focus, .fld select:focus { border-color: var(--y); } .fld input.bad { border-color: var(--red); } .two { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } .days, .slots { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; } .slots { display: grid; grid-template-columns: repeat(auto-fill, minmax(76px, 1fr)); overflow: visible; } .days button, .slots button { flex: none; background: #0b0d12; border: 1px solid var(--line); border-radius: 8px; color: #d6dae3; padding: 8px 10px; font: 600 14px var(--body); text-align: center; } .days button { min-width: 62px; width: auto; line-height: 1.15; white-space: nowrap; } .days button small { display: block; font-size: 11px; font-weight: 500; color: var(--mut); text-transform: uppercase; } .days button.on, .slots button.on { background: var(--y); color: var(--ink); border-color: var(--y); } .days button.on small { color: #4b4120; } .days button:disabled, .slots button:disabled { opacity: .3; cursor: default; } .slots p { color: var(--mut); margin: 0; font-size: 14px; } .agree a { color: var(--y); text-decoration: underline; } .hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; } .agree { display: flex; gap: 8px; align-items: flex-start; font-size: 13px; color: var(--mut); margin: 2px 0 10px; } .agree input { accent-color: var(--y); width: 18px; height: 18px; flex: none; margin: 0; } .bk-err { color: var(--red); font-size: 14px; min-height: 18px; margin: 0 0 6px; } .bk-go { width: 100%; } .bk-go[disabled] { opacity: .6; } .bk-note { color: var(--mut); font-size: 13px; text-align: center; margin: 12px 0 0; } .bk-step[data-step="2"] { display: none; text-align: center; padding: 10px 0; } .bk.done .bk-step[data-step="1"] { display: none; } .bk.done .bk-step[data-step="2"] { display: block; } .bk-check { width: 72px; height: 72px; border-radius: 50%; background: var(--y); margin: 6px auto 16px; position: relative; animation: pop .5s cubic-bezier(.2,.9,.3,1.5); } .bk-check::after { content: ""; position: absolute; left: 25px; top: 16px; width: 16px; height: 30px; border: solid var(--ink); border-width: 0 5px 5px 0; transform: rotate(45deg); } @keyframes pop { from { transform: scale(.4); opacity: 0; } } .bk-check.warn { background: transparent; border: 4px solid var(--y); } .bk-check.warn::after { content: "!"; left: 0; right: 0; top: 8px; width: auto; height: auto; border: 0; transform: none; font: 700 40px/1 var(--head); color: var(--y); text-align: center; } .bk-done h3:focus { outline: none; } .bk-note a { color: var(--y); font-weight: 600; white-space: nowrap; } .bk-retry { width: 100%; margin: 14px 0 10px; } .bk-retry[hidden] { display: none; } .bk-done > .btn-y { margin-top: 14px; } .bk-sum { font-size: 16px; line-height: 1.6; color: #e3e6ec; margin: 8px 0 4px; } .bk-sum b { color: var(--y); } .who { display: inline-flex; background: #0b0d12; border: 1px solid var(--line); border-radius: 8px; padding: 4px; margin: 22px 0 0; } .who button { background: none; border: 0; border-radius: 6px; padding: 9px 18px; font: 600 15px/1 var(--head); letter-spacing: .06em; text-transform: uppercase; color: #cfd3dc; } .who button.on { background: var(--y); color: var(--ink); } .pc-sum.soon b { display: block; font-size: 40px; line-height: 1.1; margin: 22px 0 10px; } .pc-sum.soon i { display: none; } @media (max-width: 760px) { .two { grid-template-columns: 1fr; gap: 0; } .bk { padding: 0; align-items: flex-end; } .bk-box { border-radius: 16px 16px 0 0; max-height: 92vh; padding: 24px 18px 18px; } } /* фото на первом экране (вариант задаётся в assets/config.js → heroPhoto) */ .hero-photo { position: absolute; inset: 0; background: center right / cover no-repeat; opacity: 0; transition: opacity 1.2s; transform: scale(1.06); animation: heroZoom 18s ease-out forwards; } .hero-photo.on { opacity: 1; } /* в разметке — для обходчиков и раннего старта загрузки; показывается фоном .hero-photo (та же картинка из кеша) */ .hero-photo picture, .hero-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; pointer-events: none; } .hero-photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(14,16,22,.96) 0%, rgba(14,16,22,.82) 34%, rgba(14,16,22,.25) 70%, rgba(14,16,22,.45) 100%), linear-gradient(0deg, var(--bg) 0%, transparent 30%); } @keyframes heroZoom { to { transform: scale(1); } } .has-photo .hero-grid, .has-photo .rings { display: none; } .has-photo .slab.s1 { opacity: .9; width: 120px; right: -2%; } .has-photo .slab.s4 { display: none; } .has-photo .slab.s2 { opacity: .35; right: 9%; } @media (max-width: 760px) { .hero-photo { background-position: 70% center; } .hero-photo::after { background: linear-gradient(0deg, var(--bg) 8%, rgba(14,16,22,.78) 45%, rgba(14,16,22,.55) 100%); } } /* ───────── подвал: реквизиты, города, мессенджеры ───────── */ .foot-legal { margin-top: 24px; padding-top: 18px; border-top: 1px solid var(--line); color: var(--mut); font-size: 13.5px; display: grid; gap: 6px; } .foot-legal p { margin: 0; } .foot-legal a { color: #d6dae3; text-decoration: underline; text-underline-offset: 3px; } .foot-req[hidden], .msgs[hidden] { display: none; } .msgs { display: flex; gap: 8px; flex-wrap: wrap; } .msg-btn { display: inline-flex; align-items: center; padding: 9px 14px; border-radius: 6px; border: 1px solid rgba(255,255,255,.25); font: 600 14px/1 var(--head); letter-spacing: .05em; text-transform: uppercase; color: #fff; } .msg-btn:hover { border-color: var(--y); color: var(--y); } .bk-done .msgs { justify-content: center; margin-top: 14px; } .foot-cities { margin-top: 24px; display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 13.5px; } .foot-cities b { width: 100%; font: 600 12px/1 var(--body); letter-spacing: .12em; text-transform: uppercase; color: var(--mut); margin-bottom: 4px; } .foot-cities a { color: #cfd3dc; } .foot-cities a:hover { color: var(--y); } /* ───────── все станции текстом ───────── */ .all-st { padding: 80px 0 70px; border-top: 1px solid var(--line); } .all-st .lead { color: var(--mut); max-width: 760px; margin: 0 0 30px; } .all-st-grid { columns: 3 300px; column-gap: 34px; } .as-city { break-inside: avoid; margin: 0 0 22px; } .as-city h3 { font: 600 19px/1.2 var(--head); text-transform: uppercase; letter-spacing: .03em; margin: 0 0 8px; } .as-city h3 a { color: var(--y); } .as-city h3 a:hover { text-decoration: underline; } .as-city ul { list-style: none; margin: 0; padding: 0; } .as-city li { font-size: 14px; color: #d6dae3; padding: 5px 0; border-bottom: 1px solid var(--line); } .as-city li small { display: block; color: var(--mut); font-size: 12.5px; } /* ───────── простые страницы: города, политика, 404 ───────── */ .page { padding: 56px 0 80px; } .page h1 { font: 700 clamp(36px, 5.4vw, 66px)/1.02 var(--head); text-transform: uppercase; margin: 0 0 18px; } .page h2 { font: 700 clamp(24px, 3vw, 34px)/1.1 var(--head); text-transform: uppercase; margin: 44px 0 16px; } .page h3 { font: 600 19px/1.2 var(--head); text-transform: uppercase; margin: 26px 0 8px; letter-spacing: .02em; } .page p, .page li { color: #d6dae3; max-width: 820px; } .page .lead { font-size: 18px; color: #c7cbd6; max-width: 760px; } .page a:not(.btn) { color: var(--y); } .crumbs { font-size: 13.5px; color: var(--mut); margin: 0 0 22px; } .crumbs a { color: var(--mut) !important; text-decoration: underline; } .cp-btns { display: flex; gap: 12px; flex-wrap: wrap; margin: 26px 0 10px; } .cp-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 16px; margin-top: 18px; padding: 0; list-style: none; } .cp-st { background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: 20px; max-width: none !important; } .cp-st h3 { margin: 0 0 6px; font: 700 20px/1.2 var(--body); text-transform: none; letter-spacing: 0; } .cp-st p { margin: 6px 0; font-size: 14.5px; color: #c7cbd6; } .cp-st .cp-closed { color: #ffb3a8; font-weight: 600; } .cp-st table { width: 100%; border-collapse: collapse; font-size: 13.5px; margin: 8px 0; } .cp-st td { padding: 2px 0; color: #c7cbd6; } .cp-st td:first-child { color: var(--mut); width: 64px; padding-right: 10px; white-space: nowrap; vertical-align: top; } .cp-act { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; } .cp-act a { padding: 9px 12px; border-radius: 4px; border: 1px solid var(--line); font: 600 13px/1 var(--head) !important; letter-spacing: .06em; text-transform: uppercase; color: #fff !important; } .cp-act a.y { background: var(--y); border-color: var(--y); color: var(--ink) !important; } .cp-price { width: 100%; max-width: 720px; border-collapse: collapse; margin-top: 10px; } .cp-price th, .cp-price td { text-align: left; padding: 10px 8px; border-bottom: 1px solid var(--line); font-size: 15px; } .cp-price th { color: var(--mut); font-weight: 600; font-size: 12.5px; letter-spacing: .1em; text-transform: uppercase; } .cp-price td:last-child { font-weight: 700; color: #fff; white-space: nowrap; } .cp-other { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; } .cp-other a { border: 1px solid var(--line); border-radius: 20px; padding: 6px 12px; font-size: 14px; color: #cfd3dc !important; } .cp-other a:hover { border-color: var(--y); color: var(--y) !important; } .tbd { color: #ffb3a8; } .policy h2 { margin-top: 34px; } .policy ol, .policy ul { padding-left: 22px; } .nf { min-height: 60vh; display: flex; align-items: center; } .nf .big { font: 700 clamp(90px, 18vw, 200px)/.9 var(--head); color: var(--y); margin: 0; } @media (max-width: 760px) { .page { padding: 34px 0 60px; } .all-st { padding: 60px 0 50px; } .cp-list { grid-template-columns: 1fr; } } .menu-s { display: flex !important; position: static !important; flex-direction: row !important; gap: 22px !important; background: none !important; border: 0 !important; } @media (max-width: 760px) { .menu-s a { padding: 6px 0 !important; border: 0 !important; } .menu-s { margin-left: auto; } } /* круг 2: согласие отдельно от политики; блоки страниц городов */ .agree { margin-bottom: 4px; } .agree-note { font-size: 12.5px; color: var(--mut); margin: 0 0 10px 26px; } .agree-note a { color: var(--y); text-decoration: underline; } .cp-how { font-size: 13.5px !important; color: var(--mut) !important; } .cp-cats, .cp-near, .cp-steps { padding-left: 20px; margin: 10px 0; } .cp-cats li, .cp-near li, .cp-steps li { margin: 6px 0; } .cp-scroll { max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; } .cp-price td:nth-child(3) { color: var(--mut); } .page.consent ol li { margin: 8px 0; } .cp-price td:nth-child(4) { font-weight: 700; color: #fff; white-space: nowrap; } .cp-price td:nth-child(5) { font-weight: 500; color: #c7cbd6; } /* ═════════ телефон, вариант 3: «сначала список» ═════════ сверху компактная карта-превью (~40% экрана) с кнопкой «Развернуть карту», ниже — крупные карточки станций; поиск и фильтры прилипают к верху экрана. Карта на весь экран — отдельный режим (.map-full) со своей карточкой станции. */ .geo-m, .map-exp, .map-back, .mcard, .pmore, .geo-btn .geo-short { display: none; } @media (min-width: 761px) { .stations { overflow-x: clip; } } @media (max-width: 760px) { :root { --gut: max(16px, env(safe-area-inset-left), env(safe-area-inset-right)); } .wrap { padding-left: var(--gut); padding-right: var(--gut); } /* на слабом GPU телефона — без размытия под шапкой и всплывающими слоями */ .nav { background: #0e1016; backdrop-filter: none; -webkit-backdrop-filter: none; } .nav.nav-hide { pointer-events: none; } .menu { max-height: calc(100svh - var(--nav)); overflow-y: auto; } .menu a { min-height: 52px; display: flex; align-items: center; font-size: 16px; } .burger { width: 48px; height: 48px; padding: 12px; margin-right: -10px; } .topbar-in { font-size: 14px; height: 44px; } .tb-phone { display: inline-flex; align-items: center; min-height: 44px; } .logo { min-height: 44px; } .sel span { font-size: 14px; } .sel select, .fld select { -webkit-appearance: none; appearance: none; min-height: 44px; padding-right: 30px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 4.5l4 4 4-4' fill='none' stroke='%23ffc31f' stroke-width='1.8'/%3E%3C/svg%3E") right 8px center / 14px no-repeat; } .fld select { background-color: #0b0d12; background-position: right 14px center; } .muted.small, .small { font-size: 14px; } #how, #prices, #faq, #all-stations { scroll-margin-top: var(--nav); } .as-city h3 a { display: inline-flex; align-items: center; min-height: 44px; } .btn:hover { transform: none; } /* первый экран: помещается в видимую область вместе с кнопками */ .hero { min-height: 0; } .hero-in { padding-top: 26px; padding-bottom: 76px; } .eyebrow { font-size: 14px; letter-spacing: .08em; } .hero-title { font-size: clamp(44px, 13.4vw, 64px); margin-bottom: 16px; } .hero-sub { font-size: 16px; margin-bottom: 22px; } .hero-btns { gap: 10px; } .hero-btns .btn { min-height: 52px; } .hero-photo { animation: none; transform: none; } .feat p { font-size: 15px; } /* ── карта-превью ── */ .stations { margin-top: 44px; scroll-margin-top: 0; } /* превью карты крупнее: больше половины видимой части экрана (было 42svh — «карту почти не видно») */ .map-stage { height: 320px; height: clamp(280px, 58svh, 560px); min-height: 0; border-radius: 0; } .map-shade { background: linear-gradient(180deg, var(--bg) 0%, transparent 14%, transparent 86%, var(--bg) 100%); } .intro { top: 10px; width: 94%; } .intro .eyebrow { display: none; } .intro h2 { font-size: clamp(24px, 7vw, 30px); } .intro-sub { font-size: 14px; margin-top: 4px; } .nearest { display: none; } .geo-btn { display: none; } .maplibregl-ctrl-bottom-left .maplibregl-ctrl-group { display: none; } .maplibregl-ctrl-bottom-left { bottom: 0 !important; } .maplibregl-ctrl-bottom-left .maplibregl-ctrl-attrib { max-width: calc(100vw - 210px); } /* кнопка «i» источников карты — 44×44 (было 28×28), значок по центру без повтора */ .maplibregl-ctrl-bottom-left > .maplibregl-ctrl-attrib.maplibregl-compact { min-height: 44px; padding: 0 0 0 44px; border-radius: 22px; margin: 0 0 10px 10px; background: rgba(14,16,22,.78) !important; } .maplibregl-ctrl-bottom-left > .maplibregl-ctrl-attrib.maplibregl-compact-show { padding: 6px 12px 6px 48px; max-width: calc(100vw - 24px) !important; } .maplibregl-ctrl-attrib.maplibregl-compact .maplibregl-ctrl-attrib-inner { font-size: 14px; line-height: 1.4; } .maplibregl-ctrl-attrib-button { width: 44px; height: 44px; border-radius: 22px; background-position: center; background-repeat: no-repeat; background-size: 22px; background-color: rgba(255,255,255,.88) !important; } .maplibregl-ctrl-bottom-left .maplibregl-ctrl-attrib-button { left: 0; right: auto; } .maplibregl-ctrl-attrib.maplibregl-compact::after { display: none; } .maplibregl-cooperative-gesture-screen { font-size: 16px; padding: 12px; } .map-exp { display: flex; align-items: center; gap: 8px; position: absolute; right: 12px; bottom: 12px; z-index: 6; min-height: 44px; padding: 0 16px 0 12px; border: 1px solid rgba(255,255,255,.22); border-radius: 22px; background: rgba(14,16,22,.86); color: #fff; font: 600 15px/1 var(--head); letter-spacing: .05em; text-transform: uppercase; box-shadow: 0 6px 18px rgba(0,0,0,.4); opacity: 0; transition: opacity .4s; pointer-events: none; } .stage-ready .map-exp { opacity: 1; pointer-events: auto; } .map-exp i { width: 18px; height: 18px; border: 2px solid var(--y); border-radius: 3px; position: relative; } .map-exp i::after { content: ""; position: absolute; right: -5px; top: -5px; width: 8px; height: 8px; border: solid var(--y); border-width: 2px 2px 0 0; background: rgba(14,16,22,.86); } #map .maplibregl-canvas { cursor: pointer; } /* ── список под картой ── */ .panel { inset: auto; width: auto; height: auto; translate: none; transition: none; display: flex; flex-direction: column; background: none; border: 0; border-radius: 0; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; padding: 0 var(--gut) 8px; } .panel-head { padding: 16px 0 12px; cursor: default; align-items: flex-end; min-height: 80px; } .panel-head::before { display: none; } .panel-head .panel-title { font-size: 30px; } .panel-head p { font-size: 14px; } .panel-x { display: none !important; } .panel.min { translate: none; } .panel { position: relative; } .geo-m { display: flex; align-items: center; gap: 14px; width: 100%; min-height: 60px; margin: 0 0 14px; padding: 10px 18px 10px 12px; border: 0; border-radius: 14px; background: var(--y); color: var(--ink); text-align: left; box-shadow: 0 8px 24px rgba(255,195,31,.18); } .geo-m b { display: block; font: 700 17px/1.15 var(--head); letter-spacing: .04em; text-transform: uppercase; } .geo-m small { display: block; font-size: 14px; color: #4b4120; margin-top: 2px; } .geo-m .geo-dot { width: 38px; height: 38px; } .geo-m.busy .geo-dot::before { animation: pulse .8s infinite; } /* после геопозиции — небольшая кнопка с подписью «Ещё раз» в шапке списка (не безымянная иконка) */ .geo-m.done { position: absolute; right: var(--gut); top: 22px; width: auto; min-height: 46px; margin: 0; background: transparent; color: var(--y); border: 1.5px solid rgba(255,195,31,.55); box-shadow: none; padding: 0 16px 0 7px; gap: 8px; border-radius: 23px; } .geo-on .panel-head > div { min-width: 0; flex: 1; } .geo-on .panel-title, .geo-on #pCount { padding-right: 128px; } .geo-m.done small { display: none; } .geo-m.done b { font-size: 15px; white-space: nowrap; } .geo-m.done .geo-dot { width: 30px; height: 30px; background: var(--y); } .geo-m.done .geo-dot::before { inset: 10px; background: var(--ink); } .geo-m.done .geo-dot::after { display: none; } .p-near { margin: 6px 0 0 !important; font-size: 15px !important; color: #e3e6ec !important; line-height: 1.35; } .p-near b { color: var(--y); font: 700 17px/1 var(--head); } .p-near[hidden] { display: none; } .panel-tools { display: contents; } .cities-wrap { order: 1; margin: 0 calc(-1 * var(--gut)); } /* стрелки ленты городов на телефоне не нужны (лента листается пальцем) и перекрывали крайние кнопки городов */ .cs-arr { display: none !important; } .cities { gap: 8px; padding: 0 var(--gut) 10px; scroll-padding: 0 var(--gut); } .cities button { min-height: 44px; padding: 0 16px; font-size: 15px; border-radius: 22px; } .ptools-stick { order: 2; position: sticky; top: 0; z-index: 8; margin: 0 calc(-1 * var(--gut)); padding: calc(8px + env(safe-area-inset-top)) var(--gut) 10px; background: var(--bg); box-shadow: 0 1px 0 var(--line); } .ptools-stick.stuck { box-shadow: 0 1px 0 var(--line), 0 10px 18px -8px rgba(0,0,0,.7); } .search { min-height: 48px; border-radius: 10px; } .search input { font-size: 16px; padding: 12px 0; min-height: 46px; } /* 16px — iOS не увеличивает страницу при фокусе */ .row2 { gap: 8px; } .sel { min-height: 44px; border-radius: 10px; } .sel select { font-size: 16px; padding: 11px 26px 11px 0; background-position: right 2px center; } .chip { min-height: 44px; font-size: 15px; padding: 0 14px; border-radius: 10px; } .plist { order: 3; overflow: visible; flex: none; padding: 4px 0 0; } .pmore { order: 4; display: block; width: 100%; min-height: 52px; margin: 6px 0 4px; border: 1.5px solid rgba(255,255,255,.25); border-radius: 12px; background: none; color: #fff; font: 600 16px/1 var(--head); letter-spacing: .05em; text-transform: uppercase; } .pmore[hidden] { display: none; } .pgroup { padding: 18px 2px 6px; font-size: 14px; } .pitem, .with-panel .pitem { opacity: 1; translate: none; margin: 10px 0; padding: 0; border-radius: 14px; background: var(--card); border: 1px solid var(--line); cursor: default; transition: border-color .2s, background .2s; } .pitem:hover { background: var(--card); } .pitem.on { border-color: var(--y); background: #262b36; } .pi-main { padding: 14px 16px 10px; cursor: pointer; border-radius: 14px 14px 0 0; -webkit-tap-highlight-color: transparent; } .pi-main:active { background: rgba(255,255,255,.04); } .pi-addr { font-size: 17px; line-height: 1.3; } .pi-dist { font-size: 18px; } .pi-meta { font-size: 14px; gap: 6px 12px; } .pi-price small { font-size: 14px; } .pi-cats { font-size: 14px; margin-top: 6px; display: flex !important; justify-content: space-between; gap: 10px; } .pi-cats em { font-style: normal; color: var(--y); white-space: nowrap; } .pi-main > .pi-near { display: table; margin: 0 0 8px; padding: 4px 9px; border-radius: 6px; background: var(--y); color: var(--ink); font: 700 14px/1.1 var(--head); letter-spacing: .08em; text-transform: uppercase; } .pi-closed { margin: 0; padding: 0 16px 10px; font-size: 14px; } .pi-act, .pitem.on .pi-act { display: flex; gap: 8px; margin: 0; padding: 0 12px 12px; } .pi-act a { display: flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 6px; font-size: 14px; border-radius: 8px; } .pitem .pi-ya, .pitem.on .pi-ya { display: none; } .pempty { font-size: 15px; padding: 18px 0; } /* ── карта на весь экран ── */ html.map-open, html.map-open body { overflow: hidden; } /* --fb: нижний край для кнопок и карточки — над полоской «домой» и над чужими плашками хостинга (--ext-b) */ .map-stage { --fb: calc(12px + env(safe-area-inset-bottom) + var(--ext-b, 0px)); } .map-full .map-stage { position: fixed; inset: 0; z-index: 120; height: 100vh; height: 100dvh; min-height: 0; overscroll-behavior: contain; } .map-full .map-shade { opacity: 0; } .map-full .map-exp { display: none; } /* кнопки полноэкранной карты — внизу, под большим пальцем (верх экрана накрывают вырез и панели Safari/Telegram) */ .map-full .map-back { display: flex; align-items: center; gap: 8px; position: absolute; left: calc(12px + env(safe-area-inset-left)); bottom: var(--fb); z-index: 7; min-height: 46px; padding: 0 18px 0 14px; border: 0; border-radius: 23px; background: #fff; color: var(--ink); font: 700 15px/1 var(--head); letter-spacing: .05em; text-transform: uppercase; box-shadow: 0 6px 20px rgba(0,0,0,.45); } .map-back i { font-style: normal; font-size: 20px; line-height: 1; } .map-full .map-stage .geo-btn { display: flex; left: auto; right: calc(12px + env(safe-area-inset-right)); top: auto; bottom: var(--fb); translate: none; opacity: 1; width: auto; max-width: none; min-height: 46px; padding: 6px 14px 6px 6px; gap: 8px; white-space: nowrap; } .map-full .map-stage .geo-btn small { display: none; } .map-full .map-stage .geo-btn b { font-size: 15px; } .map-full .map-stage .geo-btn .geo-dot { width: 32px; height: 32px; } .map-full .map-stage .geo-btn .geo-dot::before { inset: 10px; } .map-full .map-stage .geo-btn .geo-dot::after { display: none; } .map-full .geo-btn .geo-full { display: none; } .map-full .geo-btn .geo-short { display: inline; } .map-full .maplibregl-ctrl-bottom-left { top: calc(80px + env(safe-area-inset-top)); bottom: auto !important; left: auto; right: env(safe-area-inset-right); } .map-full .maplibregl-ctrl-bottom-left .maplibregl-ctrl { float: right; margin: 0 10px 10px 0; } .map-full .maplibregl-ctrl-bottom-left .maplibregl-ctrl-group { display: block; } .map-full .maplibregl-ctrl-group button { width: 44px; height: 44px; } .maplibregl-popup { display: none; } .mcard { position: absolute; left: calc(10px + env(safe-area-inset-left)); right: calc(10px + env(safe-area-inset-right)); bottom: calc(var(--fb) + 56px); z-index: 7; background: #151821; border: 1px solid var(--line); border-top: 3px solid var(--y); border-radius: 16px; padding: 14px 0 0; box-shadow: 0 -6px 30px rgba(0,0,0,.5); max-height: 46%; overflow-y: auto; overscroll-behavior: contain; translate: 0 calc(100% + 200px); visibility: hidden; transition: translate .35s cubic-bezier(.2,.8,.2,1), visibility 0s .35s; } .map-full .mcard { display: block; } .map-full.has-sel .mcard { translate: 0 0; visibility: visible; transition: translate .35s cubic-bezier(.2,.8,.2,1), visibility 0s; } .mcard .mc-x { position: absolute; right: 4px; top: 2px; width: 44px; height: 44px; border: 0; background: none; color: var(--mut); font-size: 28px; line-height: 1; } .mcard .mc-body { padding: 0 16px 10px; } .mcard b { display: block; font-size: 17px; line-height: 1.3; padding-right: 36px; } .mcard .mc-city { font-size: 14px; color: var(--mut); margin-top: 2px; } .mcard .pi-near { display: inline-block; margin: 0 8px 0 0; padding: 3px 7px; vertical-align: 1px; border-radius: 6px; background: var(--y); color: var(--ink); font: 700 14px/1.1 var(--head); letter-spacing: .08em; text-transform: uppercase; } .mcard .mc-city em { font-style: normal; color: var(--y); font-weight: 700; } .mcard .pi-meta { font-size: 14px; } .mcard .pi-closed { padding: 0 16px 10px; } .mcard .pi-act { display: flex; } /* ── остальные разделы ── */ .how, .faq { padding: 60px 0 50px; } .prices { padding: 56px 0; } .step { padding: 22px 20px; } .step em { font-size: 44px; } .step p { font-size: 15px; } .step:hover, .feat:hover { transform: none; } .who button { min-height: 44px; padding: 0 18px; } .tabs button { min-width: 52px; min-height: 44px; font-size: 16px; } .sel.big { max-width: none; } .sel.big select { min-height: 48px; } .price-card .btn { width: 100%; min-height: 52px; } .pc-sum.soon b { font-size: 32px; } .acc summary { padding: 18px 40px 18px 0; min-height: 56px; } .acc details p { font-size: 15px; } .all-st-grid { columns: 1; } .as-city li small { font-size: 14px; } .cta { padding: 44px 0 48px; } .cta-in { gap: 16px; } .cta h2 { min-width: 0; flex-basis: 100%; } .cta .btn { width: 100%; min-height: 54px; } .cta-phone { display: block; width: 100%; text-align: center; padding: 10px 0; } .foot { padding: 34px 0 calc(34px + env(safe-area-inset-bottom) + var(--ext-b, 0px)); } .foot-in { gap: 18px; } .foot-in a[href^="tel"] { display: inline-flex; align-items: center; min-height: 44px; } .foot-cities { gap: 0 4px; font-size: 15px; } .foot-cities a { padding: 0 8px 0 0; min-height: 44px; min-width: 44px; display: inline-flex; align-items: center; } .foot-cities b { font-size: 14px; } .foot-legal { font-size: 14px; } .foot-legal a { display: inline-flex; align-items: center; min-height: 44px; } .msg-btn { min-height: 44px; } /* ── окно записи: лист снизу, не ломается клавиатурой (высоту задаёт JS по visualViewport) ── */ .bk { top: 0; bottom: auto; height: 100%; height: var(--vvh, 100%); } .bk-box { max-height: calc(100% - 10px - env(safe-area-inset-top)); padding: 22px var(--gut) calc(18px + env(safe-area-inset-bottom) + var(--ext-b, 0px)); } .bk-x { width: 48px; height: 48px; right: 4px; top: 4px; } .bk h3 { font-size: 26px; } .bk-step[data-step="1"] h3 { padding-right: 36px; } .bk-done > .btn-y { width: 100%; min-height: 54px; } .bk-sub { font-size: 15px; } .fld > span { font-size: 14px; letter-spacing: .06em; } .fld input, .fld select { min-height: 48px; font-size: 16px; } .days button { min-height: 54px; min-width: 66px; } .days button small { font-size: 14px; } .slots { grid-template-columns: repeat(4, 1fr); gap: 8px; } .slots button { min-height: 48px; min-width: 0; font-size: 15px; padding: 0 4px; } .slots p { grid-column: 1 / -1; } .agree { font-size: 14px; align-items: center; min-height: 44px; } .agree input { width: 24px; height: 24px; } .agree-note, .bk-note { font-size: 14px; } .bk-go { min-height: 54px; } /* ── простые страницы (города, политика, согласие, 404) ── */ .page .lead { font-size: 16px; } .cp-how { font-size: 14px !important; } .crumbs { font-size: 14px; } .cp-btns .btn { flex: 1 1 100%; min-height: 50px; } .cp-act a { min-height: 46px; display: inline-flex; align-items: center; justify-content: center; flex: 1 1 calc(50% - 4px); font-size: 14px !important; } .cp-other a { min-height: 44px; display: inline-flex; align-items: center; font-size: 15px; } .cp-st { padding: 18px 16px; } .cp-st p { font-size: 15px; } .cp-st table { font-size: 14px; } .cp-price th { font-size: 14px; } .cp-price th, .cp-price td { padding: 10px 6px; } .menu-s { gap: 14px !important; } .menu-s a { min-height: 44px; display: inline-flex !important; align-items: center; } .menu-s a.hide-sm { display: none !important; } /* «Цены» и «Вопросы» обрезались краем шапки на 375 px */ /* ── на телефоне ни одной бесконечной анимации: звёзды не мерцают, кольца/точки не пульсируют (слабый GPU, батарея) ── */ .space i.tw, .geo-dot::after, .me-mark::after, .scroll-hint i::after, .rings i { animation: none !important; } .geo-dot::after { opacity: 0; } .me-mark::after { display: none; } .hero-photo { transition: opacity .6s; } } @media (max-width: 380px) { .hero-title { font-size: 44px; } .geo-m b { font-size: 16px; } .geo-m { gap: 12px; padding-right: 12px; } .pi-act { gap: 6px; padding: 0 10px 12px; } .pi-act a { letter-spacing: .02em; } .map-exp { font-size: 14px; padding: 0 12px 0 10px; } } /* низкие экраны телефона (iPhone SE с панелями Safari ≈ 548 px): первый экран целиком, обе кнопки видны (идея вариантов 5 и 6) */ @media (max-width: 760px) and (max-height: 620px) { .hero-in { padding-top: 14px; padding-bottom: 58px; } .hero .eyebrow { margin-bottom: 10px; } .hero-title { font-size: clamp(38px, 7.6svh, 52px); margin-bottom: 10px; } .hero-sub { margin-bottom: 14px; } .hero-sub .hs2 { display: none; } .hero-btns { gap: 8px; } .hero-btns .btn { min-height: 50px; padding-top: 12px; padding-bottom: 12px; } .feats { margin-top: -38px; } } /* планшет 761–1100: меню и кнопка «Найти ближайшую» не помещаются в шапку — кнопка уходит, меню плотнее */ @media (min-width: 761px) and (max-width: 1100px) { .nav-cta { display: none; } .nav-in { gap: 20px; } .menu { gap: 20px; } /* планшет: карточка «Ближайшая станция» — вверху слева, не на кнопке геопозиции и не на подписи источников */ .nearest { top: 16px; bottom: auto; left: 16px; max-width: calc(100% - 432px); } .stage-ready.with-panel .geo-btn { left: calc((100% - 400px) / 2); max-width: calc(100% - 432px); padding-right: 18px; bottom: 100px; } .geo-btn small { display: none; } } /* ───────── ПК (вариант 1): раскладка карты и панели ───────── */ @media (min-width: 761px) { /* ширина панели растёт с экраном: 380 px на ноутбуке 1280, до 500 px на 1920+ (на 2560 панель 380 px выглядела узкой полоской) */ .stations { --pw: clamp(380px, calc(22vw + 80px), 500px); --po: calc(var(--pw) + 20px); scroll-margin-top: 0; } .panel { width: var(--pw); translate: calc(var(--pw) + 60px) 0; } .with-panel .panel { translate: 0 0; } .stage-ready.with-panel .geo-btn, .with-panel .map-fail { left: calc((100% - var(--po)) / 2); } .maplibregl-ctrl-bottom-left .maplibregl-ctrl-attrib { max-width: calc(100vw - var(--po) - 60px); } /* карта — на весь экран окна: по меню «Станции» раздел встаёт к самому верху, шапка уезжает (раньше карта была 100vh − 72 px и при прокрутке колесом снизу торчала полоса следующего раздела) */ .map-stage { height: 100vh; height: 100svh; min-height: 560px; } /* первый экран: текст по левому краю сетки (как логотип), а не по центру — раньше .wrap во flex-контейнере сжимался до текста */ .hero-in { width: 100%; } /* цели не меньше 32 px мышью: города, категория, «Открыто», ссылка на Яндекс, телефон и ссылки подвала */ .cities button { min-height: 32px; padding: 0 12px; } .sel select { -webkit-appearance: none; appearance: none; min-height: 40px; padding-right: 26px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 4.5l4 4 4-4' fill='none' stroke='%23ffc31f' stroke-width='1.8'/%3E%3C/svg%3E") right 4px center / 12px no-repeat; } .sel.big select { min-height: 44px; } .chip { min-height: 40px; } .pitem.on .pi-ya, .pop .pi-ya { padding: 6px 0; margin-top: 2px; } .tb-phone, .foot-in a[href^="tel"], .foot-cities a, .foot-legal a { display: inline-flex; align-items: center; min-height: 28px; } .foot-legal { gap: 2px; } .foot-cities { gap: 2px 14px; } /* строка станции: статус — своей строкой, цены — второй (раньше «Физлицам — уточняется · юрлицам …» рвалось посередине по-разному на каждой ширине панели) */ .pi-meta .st { flex-basis: 100%; } .pi-ref { white-space: nowrap; } } /* невысокие ноутбуки (1280×720, 1366×768): первый экран целиком — обе кнопки, «Листайте» и край карточек */ @media (min-width: 761px) and (max-height: 820px) { .hero-in { padding-top: 22px; } .hero .eyebrow { margin-bottom: 10px; } .hero-title { font-size: clamp(54px, 10.4svh, 128px); margin-bottom: 16px; } .hero-sub { margin-bottom: 22px; } /* панель плотнее, чтобы в списке помещалось 4 станции */ .panel-head { padding: 14px 18px 8px; } .panel-head .panel-title { font-size: 22px; } .pitem { padding-top: 10px; padding-bottom: 10px; } } /* ПК: окно записи в две колонки (слева категория, дата, время; справа имя, телефон и «Записаться») — на 1280×720 кнопка «Записаться» видна сразу, без прокрутки окна (в одну колонку окно было 1000+ px и резалось). Телефон не меняется: там .bk-cols — обычные блоки. */ @media (min-width: 761px) { .fld select { -webkit-appearance: none; appearance: none; min-height: 48px; padding-right: 40px; background: #0b0d12 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 4.5l4 4 4-4' fill='none' stroke='%23ffc31f' stroke-width='1.8'/%3E%3C/svg%3E") right 14px center / 14px no-repeat; } } @media (min-width: 1000px) { .bk-box { max-width: 940px; padding: 26px 30px 20px; } .bk-cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 30px; align-items: start; } .bk-c1, .bk-c2 { min-width: 0; } .bk-c2 { padding-top: 2px; } /* лента дат прокручивается внутри колонки, а не раздвигает её */ .bk-c2 .bk-note { text-align: left; } } /* планшет 761–1100: кнопка геопозиции в одну строку и выше кнопок масштаба (раньше переносилась в 2 строки и налезала на «+/−») */ @media (min-width: 761px) and (max-width: 1100px) { .stage-ready.with-panel .geo-btn { bottom: 140px; max-width: calc(100% - var(--po) - 32px); white-space: nowrap; } .stage-ready.with-panel .geo-btn b { font-size: 15px; } } /* ПК: подложка окна записи без размытия — на 2560×1440 размытие всего экрана при открытии/закрытии давало кадры 70–90 мс */ @media (min-width: 761px) { .bk-back { backdrop-filter: none; -webkit-backdrop-filter: none; background: rgba(5,7,11,.8); will-change: opacity; } /* окно — свой слой композитора: появление и исчезание не перерисовывают большую тень 80 px на 5K-экране каждый кадр */ .bk-box { will-change: opacity, translate; } } /* ПК: заголовки без «висячего» слова на второй строке («…ПРЯМО / СЕЙЧАС» на 1280) */ @media (min-width: 761px) { .cta h2, .h2 { text-wrap: balance; } } /* нет карты: плашка «Карта не загрузилась» стоит на месте заголовка интро — интро прячем, чтобы текст не наезжал (аудит: ПК 1366, планшет 768). Только ПК/планшет: на телефоне плашка стоит ниже заголовка интро и всё как в «телефон итог» */ .map-fail:not([hidden]) ~ .intro { visibility: hidden; } /* телефон: плашка вверху превью — раньше на 375×548 она ложилась на «Развернуть карту» и кнопку «i» (проверено с заблокированными NASA/Esri/OpenFreeMap) */ @media (max-width: 760px) { .with-panel .map-fail, .map-fail { top: 12px; } .map-fail { padding: 14px 16px; font-size: 14px; } .map-fail b { font-size: 18px; } } /* ПК/планшет: плашка «Карта не загрузилась» — в части карты левее панели (на 768 она уходила за левый край и под панель) */ @media (min-width: 761px) { .with-panel .map-fail { width: min(420px, calc(100% - var(--po) - 32px)); } } /* ═════════ ИТОГ ПК: доработки после судей (идеи вариантов 2–6). Всё — только экраны от 761 px, телефон не меняется ═════════ */ @media (min-width: 761px) { /* шапка непрозрачная: при прокрутке (и на страницах городов) текст под ней не просвечивает (v3) */ .nav { background: #0e1016; backdrop-filter: none; -webkit-backdrop-filter: none; } /* заголовки переносятся ровно, абзацы — без одиноких слов (v3) */ .h2, .cta h2, .pc-sum.soon b, .page h1, .cp-st h3 { text-wrap: balance; } .hero-sub, .all-st .lead, .step p, .acc details p, .page p, .faq-more { text-wrap: pretty; } /* «Все станции по городам»: колонки начинаются на одной высоте — отступ внутри блока (в WebKit margin переносился в начало соседней колонки) (v3/v5) */ .as-city { display: inline-block; width: 100%; vertical-align: top; margin: 0; padding: 0 0 22px; } /* цены: кнопки категорий и «Физлица/Юрлица» ровной высоты (v3) */ .tabs button { min-width: 54px; min-height: 44px; padding: 0 16px; } .who button { min-height: 40px; padding: 0 20px; } .sel.big { min-height: 48px; } /* верхняя строка не переносится (на 761–1100 телефон рвался на «8 800 533-87-» и «37») (v5) */ .topbar-in > * { white-space: nowrap; } /* ультраширокий экран: фото не шире 1,85 высоты экрана, стоит справа (v5) */ .hero-photo { left: auto; width: min(100%, 185vh); width: min(100%, 185svh); } /* «Листайте» — под кнопками по левому краю колонки текста, а не посреди фото (v3) */ .scroll-hint { left: max(28px, calc((100% - 1240px) / 2 + 28px)); translate: 0 0; align-items: flex-start; } /* всплывашка станции: цена в две ровные строки, без строки, начинающейся с «·» (v3) */ .pop .pi-meta { flex-direction: column; align-items: flex-start; gap: 3px; } .pop .pi-ref::before { content: "Справочно: "; color: var(--mut); } .pi-meta .pi-ref { margin-left: -5px; } /* кнопка геопозиции не ловит Tab, пока её не видно (v4) */ .geo-btn { visibility: hidden; transition: translate .7s cubic-bezier(.2,.9,.2,1.2), opacity .5s, left .6s, box-shadow .3s, visibility 0s .5s; } .geo-show .geo-btn { visibility: visible; transition: translate .7s cubic-bezier(.2,.9,.2,1.2), opacity .5s, left .6s, box-shadow .3s, visibility 0s; } /* кнопки карты: 36 px (было 29), «Вся Россия» глобусом, компас только при наклоне (v4) */ .maplibregl-ctrl-bottom-left .maplibregl-ctrl-group button { width: 36px; height: 36px; } .maplibregl-ctrl-bottom-left .maplibregl-ctrl-group { margin: 0 0 8px 12px; } .nearest { left: 64px; } #map .maplibregl-canvas:focus-visible { outline: 3px solid var(--y); outline-offset: -3px; } .maplibregl-ctrl-group button:focus-visible { box-shadow: 0 0 0 2px var(--y) !important; } /* окно записи: все 14 дней сразу, сеткой 7 × 2 (лента без полосы прокрутки мышью не листалась, видно было 6–10 из 14) (v4) */ .days { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); overflow: visible; gap: 6px; } .days button { min-width: 0; padding: 7px 2px; } .days button small { font-size: 12px; } .bk-x { width: 44px; height: 44px; right: 6px; top: 6px; border-radius: 8px; } /* выпадающий список без видимого фокуса с клавиатуры (v6) */ .sel:focus-within, .chip:focus-visible { border-color: var(--y); } /* фокус на жёлтом виден: тёмная рамка на жёлтом CTA и жёлтых кнопках (v3) */ .cta :focus-visible, .btn-y:focus-visible, .pi-act a.y:focus-visible, .cp-act a.y:focus-visible, .feat-y :focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; box-shadow: 0 0 0 5px var(--y); } .chip.on:focus-visible, .tabs button.on:focus-visible, .who button.on:focus-visible, .days button.on:focus-visible, .slots button.on:focus-visible { outline-color: #fff; } /* страницы городов: кнопки станции ровной сеткой 2 × 2 (было «3 + 1», «На карте» одна на второй строке) (v3/v5/v6) */ .cp-act { display: grid; grid-template-columns: 1fr 1fr; } .cp-act a { display: flex; align-items: center; justify-content: center; min-height: 40px; text-align: center; transition: border-color .2s, color .2s, background .2s; } .cp-st { transition: border-color .25s; } } /* наведение мышью (v3 + v4): чипы, «Открыто», «Физлица/Юрлица», кнопки станции и всплывашки, вопросы, телефоны, подвал, даты и время записи */ @media (hover: hover) and (min-width: 761px) { .logo-mark { transition: transform .2s; } .logo:hover .logo-mark { transform: rotate(-45deg) scale(1.06); } .tb-phone, .foot-in a[href^="tel"], .cta-phone, .foot a, .acc summary, .chip, .sel, .who button, .pi-act a, .days button, .slots button, .bk-x, .maplibregl-ctrl-group button, .faq-more a, .fa-tel { transition: color .2s, border-color .2s, background-color .2s, box-shadow .2s, filter .2s; } .tb-phone:hover, .foot-in a[href^="tel"]:hover { color: var(--y); } .cta-phone:hover { text-decoration: underline; text-underline-offset: 5px; } .who button:not(.on):hover { color: var(--y); background: rgba(255,195,31,.07); } .chip:not(.on):hover, .sel:hover { border-color: rgba(255,195,31,.6); } .chip.on:hover { filter: brightness(1.07); } .pi-act a:not(.y):hover { border-color: var(--y); color: var(--y); } .pi-act a.y:hover { background: #ffd04d; border-color: #ffd04d; } .pi-ya:hover { color: var(--y); } .acc summary:hover { color: var(--y); } .foot a:not([href^="tel"]):hover, .foot-legal a:hover { color: var(--y); } .btn-dark:hover { box-shadow: 0 10px 26px rgba(14,16,22,.35); } .days button:not(:disabled):not(.on):hover, .slots button:not(:disabled):not(.on):hover { border-color: var(--y); color: #fff; background: #12151d; } .bk-x:hover { color: #fff; background: rgba(255,255,255,.06); } .maplibregl-ctrl-group button:not(:disabled):hover { background-color: rgba(255,255,255,.08); } .maplibregl-popup-close-button:hover { color: #fff; background: rgba(255,255,255,.06); } .cp-act a:not(.y):hover { border-color: var(--y); color: var(--y) !important; } .cp-act a.y:hover { background: #ffd04d; } .cp-st:hover { border-color: rgba(255,195,31,.35); } .cs-arr:hover { color: #fff; } .panel-head .p-near b { color: var(--y); } } /* как проходит: заголовки шагов на две строки у всех — описания на одной линии (v3) */ @media (min-width: 981px) { .step h3 { min-height: 2.3em; display: flex; align-items: flex-end; } } /* вопросы на ПК: заголовок слева со строкой «Не нашли ответ? Позвоните», вопросы справа — правая половина больше не пустая (v3). Номер и «звонок бесплатный» — те же, что в подвале, новых данных нет */ .faq-more { display: none; } @media (min-width: 1024px) { .faq .wrap { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); grid-template-rows: auto auto auto 1fr; column-gap: 64px; } .faq .eyebrow, .faq .h2, .faq .faq-more { grid-column: 1; } .faq .acc { grid-column: 2; grid-row: 1 / 5; margin-top: -22px; max-width: none; } .faq .faq-more { display: block; color: var(--mut); margin: 6px 0 0; max-width: 360px; font-size: 16px; } .faq-more a { color: #fff; font-weight: 600; white-space: nowrap; display: inline-flex; align-items: center; min-height: 28px; } .faq-more a:hover { color: var(--y); } } /* верхняя строка 761–1100: «Аккредитация РСА…» не помещается — прячем (v5) */ @media (min-width: 761px) and (max-width: 1100px) { .topbar .tb-acc { display: none; } } /* ПК: после геопозиции кнопка «Обновить геопозицию» встаёт к правому краю свободной части карты (у панели) — не на карточку «Ближайшая станция» слева внизу (на 1280×720 они перекрывались) */ @media (min-width: 1101px) { .stage-ready.with-panel.geo-done .geo-btn { left: calc(100% - var(--po) - 16px); translate: -100% 0; } } /* низкие окна: подсказка «Листайте» не помещается между кнопками и карточками — не показываем (v3) */ @media (min-width: 761px) and (max-height: 800px) { .scroll-hint { display: none; } .hero-in { padding-bottom: 120px; } } /* очень низкие окна ПК (масштаб 150 %: 1366×768 → 911×512): обе кнопки первого экрана видны (v5) */ @media (min-width: 761px) and (max-height: 620px) { .hero-in { padding-top: 16px; } .hero-title { font-size: clamp(48px, 13svh, 128px); margin-bottom: 14px; } .hero-sub { margin-bottom: 18px; } .hero-sub .hs2 { display: none; } } /* низкие окна (125–150 %): карта не выше экрана, кнопка геопозиции и подписи не уходят за низ (v5) */ @media (min-width: 761px) and (max-height: 700px) { .map-stage { min-height: 420px; } .geo-btn { bottom: 24px; } .has-pop .geo-btn { opacity: 0; pointer-events: none; } } /* ───── большие экраны: 1800+ сетка 1480, 2300+ сетка 1720, крупнее первый экран, заголовки, панель, меню (v3 + v6) ───── */ @media (min-width: 1800px) { .wrap { max-width: 1480px; } .scroll-hint { left: max(28px, calc((100% - 1480px) / 2 + 28px)); font-size: 13px; } .hero-sub { font-size: 20px; max-width: 640px; } .hero .btn-lg { padding: 20px 30px; font-size: 18px; } .h2 { font-size: clamp(30px, 3.2vw, 64px); } .eyebrow { font-size: 14px; } .feat b { font-size: 54px; } .feat span { font-size: 17px; } .feat p { font-size: 16px; } .step h3 { font-size: 23px; } .step p, .acc details p { font-size: 16.5px; } .acc summary { font-size: 23px; } .as-city li { font-size: 15px; } .as-city li small { font-size: 13.5px; } .as-city h3 { font-size: 21px; } .all-st .lead, .faq .faq-more { font-size: 17px; } .pc-sum.soon b { font-size: 46px; } .cta h2 { font-size: 50px; } .cta-phone { font-size: 28px; } .foot-in, .foot-cities { font-size: 15px; } /* панель списка и карта */ .panel-head .panel-title { font-size: 28px; } .panel-head p { font-size: 15px; } .search input { font-size: 16px; padding: 13px 0; } .sel select { font-size: 15px; } .chip { font-size: 14.5px; } .cities button { font-size: 14px; padding: 6px 13px; } .pi-addr, .pi-dist { font-size: 16.5px; } .pi-meta { font-size: 14px; } .pi-cats { font-size: 13.5px; } .pgroup { font-size: 13px; } .pi-act a { font-size: 14px; padding: 11px 6px; } .pi-ya { font-size: 13.5px; } .maplibregl-ctrl-bottom-left .maplibregl-ctrl-group button { width: 42px; height: 42px; } .maplibregl-popup-content { font-size: 15px; } .pop b { font-size: 16.5px; } .pop .muted { font-size: 14px; } .tr-tip .maplibregl-popup-content { font-size: 14.5px; } .nearest { left: 72px; font-size: 15px; max-width: 380px; } .nearest b { font-size: 26px; } .geo-btn b { font-size: 19px; } .geo-btn small { font-size: 14px; } .intro h2 { font-size: 72px; } .intro-sub { font-size: 19px; } /* окно записи */ .bk-box { max-width: 1040px; } .bk h3 { font-size: 34px; } .bk-sub { font-size: 16px; } .days button, .slots button { font-size: 15px; } .days button small { font-size: 13px; } } @media (min-width: 1800px) and (min-height: 821px) { .hero-title { font-size: clamp(54px, min(9vw, 14svh), 168px); } } @media (min-width: 2300px) { .wrap { max-width: 1720px; } .scroll-hint { left: max(28px, calc((100% - 1720px) / 2 + 28px)); font-size: 14px; } .stations { --pw: 540px; } body { font-size: 17px; } .hero-sub { max-width: 760px; font-size: 23px; } .hero .btn-lg { font-size: 20px; padding: 22px 34px; } .h2 { font-size: 72px; } .eyebrow { font-size: 15px; } .topbar { font-size: 15px; } .topbar-in { height: 44px; } .menu { font-size: 18px; gap: 34px; } .logo { font-size: 25px; } .logo-mark { width: 34px; height: 34px; } .nav-cta { font-size: 17px; padding: 14px 22px; } .feat b { font-size: 60px; } .feat p { font-size: 17px; } .step h3 { font-size: 26px; } .step p, .acc details p { font-size: 18px; } .step em { font-size: 62px; } .acc summary { font-size: 26px; } .as-city li { font-size: 16px; } .as-city h3 { font-size: 23px; } .tabs button, .who button { font-size: 17px; } .sel.big select { font-size: 18px; } .pc-sum.soon b { font-size: 52px; } .pc-ref { font-size: 18px; } .pc-note { font-size: 17px; } .cta h2 { font-size: 58px; } .cta-phone { font-size: 32px; } .panel-head .panel-title { font-size: 34px; } .panel-head p { font-size: 16px; } .search input { font-size: 17px; } .sel select { font-size: 16px; } .chip { font-size: 15.5px; } .cities button { font-size: 15px; } .pi-addr, .pi-dist { font-size: 18px; } .pi-meta { font-size: 15px; } .pi-cats { font-size: 14.5px; } .pgroup { font-size: 14px; } .pi-act a { font-size: 15px; padding: 12px 6px; } .maplibregl-popup-content { font-size: 16px; padding: 16px 18px; } .pop b { font-size: 18px; } .pop .muted { font-size: 15px; } .nearest { font-size: 16px; max-width: 420px; } .nearest b { font-size: 28px; } .geo-btn b { font-size: 22px; } .geo-btn small { font-size: 15px; } .intro h2 { font-size: 88px; } .intro-sub { font-size: 21px; } } @media (min-width: 2300px) and (min-height: 821px) { .hero-title { font-size: clamp(54px, min(9vw, 14svh), 204px); } } /* телефон: кнопок «Вся Россия» и компаса нет (там свои кнопки полноэкранной карты), подсказки у точек только для мыши */ @media (max-width: 760px) { .tr-home, .maplibregl-ctrl-compass { display: none !important; } .tr-tip { display: none !important; } } /* подсказка у точки при наведении мышью (v4) */ .tr-home .maplibregl-ctrl-icon { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffc31f' stroke-width='1.8'%3E%3Ccircle cx='12' cy='12' r='8.2'/%3E%3Cpath d='M3.8 12h16.4M12 3.8c2.4 2.3 3.5 5 3.5 8.2s-1.1 5.9-3.5 8.2M12 3.8C9.6 6.1 8.5 8.8 8.5 12s1.1 5.9 3.5 8.2'/%3E%3C/svg%3E"); background-size: 20px; filter: none !important; } .maplibregl-ctrl-compass.tr-off { display: none !important; } .tr-tip { pointer-events: none; z-index: 3; } .tr-tip .maplibregl-popup-content { padding: 9px 12px; border-radius: 8px; font-size: 13.5px; line-height: 1.35; background: rgba(21,24,33,.96); } .tr-tip b { display: block; font-size: 14px; } .tr-tip span { display: block; color: var(--mut); } .tr-tip i { font-style: normal; } .tr-tip i.on { color: var(--green); } .tr-tip em { display: block; margin-top: 3px; font-style: normal; font-size: 12px; color: var(--y); } @media (min-width: 761px) { .pop .pi-meta .pi-ref { margin-left: 0; } .pi-closed a { display: inline-block; padding: 4px 0; } } /* ПК: стрелки ленты городов — по краям, вне ленты: раньше полупрозрачная стрелка лежала поверх крайней кнопки города («Санкт-Петербург» не нажать по центру) */ @media (min-width: 761px) { .cities-wrap { padding: 0 24px; } .cs-arr { width: 24px; height: 32px; background: none !important; text-align: center !important; border-radius: 6px; } .cs-arr.l { left: -2px; } .cs-arr.r { right: -2px; } .cities { scroll-padding: 0 4px; } } @media (min-width: 761px) { .cp-how a { white-space: nowrap; } } /* ссылка не рвётся на две строки и не «накрывает» соседнюю (судья 1, страницы городов) */ @media (max-width: 760px) { .map-full .map-fail { top: calc(12px + env(safe-area-inset-top)); } }