/* ========================================================================== AVTO&GO — стили лендинга Единый файл: токены, база, компоненты, адаптив Шрифты подключены в (link rel=stylesheet), не через @import — так браузер начинает грузить их параллельно с CSS, а не последовательно. ========================================================================== */ /* ---------- Токены ---------- */ :root{ /* цвет: тёмное матовое стекло + аварийный оранжевый Avto&GO */ --bg: #0a0906; --bg-soft: #100e0a; --surface: rgba(255,246,238,.045); --surface-2: rgba(255,246,238,.075); --border: rgba(255,246,238,.11); --border-soft: rgba(255,246,238,.07); --glass-blur: 18px; --text: #f6f3ee; --text-dim: #a9a297; --text-faint: #74695c; --accent: #ff7a29; /* фирменный оранжевый Avto&GO */ --accent-2: #ffb459; /* тёплый янтарный, hover/акцент */ --accent-ink: #1a0e04; --info: #d9a774; /* тёплый песочный — вместо ледяного синего */ --ok: #34d399; --grad-accent: linear-gradient(135deg, var(--accent), var(--accent-2)); --grad-hero: linear-gradient(180deg, rgba(10,8,5,.4) 0%, rgba(9,7,4,.78) 55%, #0a0906 100%); --font-display: 'Unbounded', sans-serif; --font-body: 'Manrope', sans-serif; --font-mono: 'JetBrains Mono', monospace; --container: 1220px; --radius-s: 10px; --radius-m: 16px; --radius-l: 26px; --shadow-1: 0 10px 30px -12px rgba(0,0,0,.6); --shadow-2: 0 24px 60px -20px rgba(0,0,0,.7); --shadow-glow: 0 0 0 1px rgba(255,122,41,.28), 0 12px 30px -10px rgba(255,122,41,.4); --ease: cubic-bezier(.22,.9,.3,1); } /* ---------- Сброс и база ---------- */ *, *::before, *::after{ box-sizing: border-box; } html{ scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce){ html{ scroll-behavior: auto; } *, *::before, *::after{ animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; } } html, body{ max-width: 100%; overflow-x: hidden; } body{ margin: 0; position: relative; background: var(--bg); color: var(--text); font-family: var(--font-body); font-size: 16px; line-height: 1.55; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-wrap: break-word; isolation: isolate; } /* Тёмное матовое стекло: неподвижные тёплые пятна света под контентом, по которым «расплываются» полупрозрачные карточки-стекло сверху. */ body::before{ content: ''; position: fixed; inset: 0; z-index: -2; pointer-events: none; background: radial-gradient(760px 520px at 14% -6%, rgba(255,122,41,.16), transparent 60%), radial-gradient(620px 480px at 100% 18%, rgba(255,180,89,.10), transparent 62%), radial-gradient(900px 620px at 50% 112%, rgba(255,122,41,.09), transparent 60%), var(--bg); } /* Матовая зернистость поверх свечения — убирает «пластиковую» гладкость */ body::after{ content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: .5; background-image: radial-gradient(circle at 1px 1px, rgba(255,246,238,.045) 1px, transparent 0); background-size: 3px 3px; } img{ max-width: 100%; display: block; } a{ color: inherit; text-decoration: none; } ul{ margin: 0; padding: 0; list-style: none; } h1,h2,h3,h4{ margin: 0; font-family: var(--font-display); font-weight: 700; line-height: 1.14; letter-spacing: -.01em; } p{ margin: 0; } button{ font-family: inherit; cursor: pointer; } input{ font-family: inherit; } svg{ display: block; } /* Фокус для доступности с клавиатуры */ a:focus-visible, button:focus-visible, input:focus-visible{ outline: 2px solid var(--accent-2); outline-offset: 3px; border-radius: 4px; } .container{ width: 100%; max-width: var(--container); margin: 0 auto; padding: 0 24px; } section{ position: relative; } /* ---------- Фоновая текстура: полосы безопасности ---------- */ .hazard-strip{ height: 8px; width: 100%; background: repeating-linear-gradient(135deg, var(--accent) 0 18px, #14181f 18px 36px); background-size: 51px 8px; } .noise-layer{ position: absolute; inset: 0; pointer-events: none; opacity: .35; background-image: radial-gradient(circle at 1px 1px, rgba(255,255,255,.05) 1px, transparent 0); background-size: 22px 22px; } /* ---------- Типографика служебная ---------- */ .eyebrow{ display: inline-flex; align-items: center; gap: 10px; font-family: var(--font-mono); font-size: 12.5px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--accent-2); } .eyebrow::before{ content: ''; width: 8px; height: 8px; border-radius: 2px; background: var(--accent); transform: rotate(45deg); box-shadow: 0 0 12px rgba(255,122,41,.8); } .section-head{ max-width: 640px; margin: 0 0 44px; } .section-head h2{ font-size: clamp(28px, 3.6vw, 42px); margin-top: 14px; } .section-head p{ margin-top: 14px; color: var(--text-dim); font-size: 16.5px; } .section-head.center{ margin-left: auto; margin-right: auto; text-align: center; } .section-pad{ padding: 96px 0; } @media (max-width: 720px){ .section-pad{ padding: 64px 0; } } /* ---------- Кнопки ---------- */ .btn{ --btn-h: 54px; position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 10px; height: var(--btn-h); padding: 0 26px; border-radius: 999px; font-family: var(--font-body); font-weight: 700; font-size: 15.5px; border: 1px solid transparent; white-space: nowrap; transition: transform .25s var(--ease), box-shadow .25s var(--ease), background .25s var(--ease), border-color .25s var(--ease); } .btn svg{ width: 19px; height: 19px; flex: none; } .btn-primary{ background: var(--grad-accent); color: var(--accent-ink); box-shadow: var(--shadow-glow); } .btn-primary:hover{ transform: translateY(-2px); box-shadow: 0 16px 34px -10px rgba(255,122,41,.55); } .btn-ghost{ background: rgba(255,246,238,.05); border-color: var(--border); color: var(--text); backdrop-filter: blur(var(--glass-blur)); } .btn-ghost:hover{ border-color: var(--info); background: rgba(255,180,89,.12); transform: translateY(-2px); } .btn-block{ width: 100%; } .btn-sm{ --btn-h: 44px; padding: 0 20px; font-size: 14.5px; } /* ---------- Хедер ---------- */ .site-header{ position: sticky; top: 0; z-index: 60; background: rgba(10,8,5,.55); backdrop-filter: blur(18px) saturate(150%); border-bottom: 1px solid transparent; transition: border-color .3s var(--ease), background .3s var(--ease); } .site-header.is-scrolled{ border-bottom-color: var(--border-soft); background: rgba(9,7,4,.82); } .header-inner{ display: flex; align-items: center; gap: 22px; height: 82px; } .brand{ display: flex; align-items: center; gap: 11px; flex: none; } .brand-mark{ width: 42px; height: 42px; border-radius: 12px; flex: none; display: flex; align-items: center; justify-content: center; background: var(--grad-accent); color: var(--accent-ink); } .brand-mark svg{ width: 24px; height: 24px; } .brand-text{ display: flex; flex-direction: column; line-height: 1.15; } .brand-text .name{ font-family: var(--font-display); font-weight: 700; font-size: 15.5px; color: var(--text); white-space: nowrap; } .brand-text .name .amp{ color: var(--accent-2); } .brand-text .tagline{ font-family: var(--font-mono); font-size: 10px; letter-spacing: .06em; text-transform: uppercase; color: var(--text-faint); margin-top: 3px; white-space: nowrap; } .main-nav{ display: flex; align-items: center; gap: 30px; margin: 0 auto; } .main-nav a{ font-size: 14.5px; font-weight: 600; color: var(--text-dim); transition: color .2s; position: relative; } .main-nav a:hover{ color: var(--text); } .header-actions{ display: flex; align-items: center; gap: 14px; flex: none; } .header-phone{ display: flex; flex-direction: column; align-items: flex-end; gap: 2px; } .header-phone .tag{ font-size: 11px; color: var(--ok); font-weight: 700; letter-spacing: .04em; text-transform: uppercase; } .header-phone .num{ font-family: var(--font-mono); font-weight: 600; font-size: 16px; } .header-msg{ display: flex; gap: 8px; } .icon-btn{ width: 38px; height: 38px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--surface-2); border: 1px solid var(--border); transition: transform .2s, border-color .2s, background .2s; } .icon-btn:hover{ transform: translateY(-2px); border-color: var(--info); } .icon-btn img, .icon-btn svg{ width: 18px; height: 18px; } .burger{ display: none; width: 44px; height: 44px; border-radius: 12px; border: 1px solid var(--border); background: var(--surface-2); backdrop-filter: blur(var(--glass-blur)); align-items: center; justify-content: center; flex-direction: column; gap: 5px; } .burger span{ width: 20px; height: 2px; background: var(--text); border-radius: 2px; transition: transform .25s, opacity .25s; } .burger.is-active span:nth-child(1){ transform: translateY(7px) rotate(45deg); } .burger.is-active span:nth-child(2){ opacity: 0; } .burger.is-active span:nth-child(3){ transform: translateY(-7px) rotate(-45deg); } .mobile-nav{ position: fixed; inset: var(--header-h, 82px) 0 0 0; background: rgba(9,7,4,.97); backdrop-filter: blur(16px); z-index: 59; padding: 28px 24px 40px; display: flex; flex-direction: column; gap: 4px; transform: translateY(-8px); opacity: 0; pointer-events: none; transition: opacity .25s var(--ease), transform .25s var(--ease); overflow-y: auto; } .mobile-nav.is-open{ opacity: 1; transform: translateY(0); pointer-events: auto; } .mobile-nav a{ padding: 16px 4px; border-bottom: 1px solid var(--border-soft); font-family: var(--font-display); font-size: 19px; font-weight: 500; } .mobile-nav .mobile-cta{ margin-top: 22px; display: flex; flex-direction: column; gap: 12px; } .mobile-nav .mobile-msg{ display: flex; gap: 10px; margin-top: 8px; } /* ---------- Hero ---------- */ .hero{ position: relative; padding: 64px 0 90px; overflow: hidden; } .hero-bg{ position: absolute; inset: 0; background: url('../images/hero-roadside.jpg') center 20%/cover no-repeat; z-index: 0; } .hero-bg::after{ content: ''; position: absolute; inset: 0; background: var(--grad-hero); } .hero .container{ position: relative; z-index: 2; } .hero-grid{ display: grid; grid-template-columns: minmax(0,1fr) minmax(0,.68fr); gap: 40px; align-items: center; } .hero-copy h1{ margin-top: 18px; font-size: clamp(34px, 4.6vw, 58px); } .hero-copy h1 em{ font-style: normal; background: var(--grad-accent); -webkit-background-clip: text; background-clip: text; color: transparent; } .hero-copy p.lead{ margin-top: 20px; max-width: 520px; font-size: 17.5px; color: var(--text-dim); } .hero-cta{ margin-top: 34px; display: flex; flex-wrap: wrap; gap: 14px; } .hero-cta .btn-primary .num{ font-family: var(--font-mono); } .hero-stats{ margin-top: 46px; display: grid; grid-template-columns: repeat(4, auto); gap: 28px 34px; } .hero-stats .stat b{ display: block; font-family: var(--font-mono); font-size: 26px; font-weight: 700; color: var(--text); } .hero-stats .stat span{ display: block; margin-top: 4px; font-size: 12.5px; color: var(--text-faint); line-height: 1.35; } .hero-side{ position: relative; } .hero-card{ position: relative; border-radius: var(--radius-l); overflow: hidden; border: 1px solid var(--border); box-shadow: var(--shadow-2); aspect-ratio: 4/5; } .hero-card img{ width: 100%; height: 100%; object-fit: cover; } .hero-card .frame-stripe{ position: absolute; left: 0; right: 0; bottom: 0; height: 10px; } .radar-chip{ position: absolute; left: -18px; bottom: 26px; background: rgba(16,13,9,.85); border: 1px solid var(--border); backdrop-filter: blur(var(--glass-blur)); border-radius: 16px; padding: 14px 18px; display: flex; align-items: center; gap: 12px; box-shadow: var(--shadow-1); max-width: 260px; } .radar-dot{ position: relative; width: 12px; height: 12px; border-radius: 50%; background: var(--ok); flex: none; } .radar-dot::after{ content:''; position: absolute; inset: -6px; border-radius: 50%; border: 2px solid var(--ok); animation: radar-ping 1.8s ease-out infinite; } @keyframes radar-ping{ 0%{ transform: scale(.5); opacity: .9; } 100%{ transform: scale(2.1); opacity: 0; } } .radar-chip strong{ font-size: 13.5px; display:block; } .radar-chip span{ font-size: 12px; color: var(--text-dim); } .hero-badge-top{ position: absolute; top: 22px; right: 22px; background: rgba(16,13,9,.72); backdrop-filter: blur(var(--glass-blur)); border: 1px solid var(--border); border-radius: 999px; padding: 8px 14px; font-family: var(--font-mono); font-size: 12px; color: var(--accent-2); display: flex; align-items: center; gap: 8px; } .hero-badge-top .dot{ width:7px; height:7px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 8px var(--accent);} /* ---------- Полоса доверия ---------- */ .trustbar{ border-top: 1px solid var(--border-soft); border-bottom: 1px solid var(--border-soft); background: var(--bg-soft); } .trustbar .container{ display: flex; flex-wrap: wrap; gap: 14px 32px; padding: 18px 24px; align-items: center; justify-content: center; font-family: var(--font-mono); font-size: 13px; color: var(--text-dim); } .trustbar .item{ display: flex; align-items: center; gap: 8px; } .trustbar svg{ width: 16px; height: 16px; color: var(--ok); flex: none; } /* ---------- Услуги ---------- */ .services-grid{ display: grid; grid-template-columns: repeat(auto-fill, minmax(268px, 1fr)); gap: 18px; } .svc-card{ position: relative; background: var(--surface); backdrop-filter: blur(var(--glass-blur)) saturate(140%); border: 1px solid var(--border); border-radius: var(--radius-m); padding: 26px 22px 22px; display: flex; flex-direction: column; gap: 14px; transition: transform .3s var(--ease), border-color .3s var(--ease), box-shadow .3s var(--ease), background .3s var(--ease); } .svc-card::before{ content: ''; position: absolute; top: 0; left: 24px; right: 24px; height: 1px; background: repeating-linear-gradient(90deg, var(--border) 0 8px, transparent 8px 14px); } .svc-card:hover{ transform: translateY(-5px); background: var(--surface-2); border-color: rgba(255,122,41,.4); box-shadow: 0 18px 40px -18px rgba(255,122,41,.35); } .svc-icon{ width: 64px; height: 64px; border-radius: 16px; background: radial-gradient(circle at 32% 28%, rgba(255,122,41,.14) 0%, var(--surface-2) 68%); border: 1px solid var(--border); display: flex; align-items: center; justify-content: center; color: var(--accent-2); padding: 8px; } .svc-icon svg{ width: 25px; height: 25px; } .svc-icon img{ width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 3px 6px rgba(0,0,0,.45)); } .svc-card h3{ font-family: var(--font-body); font-size: 17.5px; font-weight: 800; } .svc-price{ font-family: var(--font-mono); font-size: 20px; font-weight: 700; color: var(--accent-2); } .svc-price span{ font-family: var(--font-body); font-size: 12px; font-weight: 600; color: var(--text-faint); text-transform: uppercase; letter-spacing: .06em; margin-right: 4px; } .svc-desc{ color: var(--text-dim); font-size: 14.5px; flex: 1; } .svc-link{ margin-top: 4px; display: inline-flex; align-items: center; gap: 8px; font-weight: 700; font-size: 14px; color: var(--text); padding-top: 12px; border-top: 1px dashed var(--border); } .svc-link svg{ width: 15px; height: 15px; transition: transform .25s var(--ease); } .svc-card:hover .svc-link svg{ transform: translateX(4px); } /* ---------- Почему мы ---------- */ .why-grid{ display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; } .why-card{ padding: 28px 22px; border-radius: var(--radius-m); background: var(--surface); backdrop-filter: blur(var(--glass-blur)) saturate(140%); border: 1px solid var(--border); } .why-num{ font-family: var(--font-mono); font-size: 13px; color: var(--text-faint); margin-bottom: 18px; } .why-card h3{ font-size: 18px; margin-bottom: 8px; } .why-card p{ color: var(--text-dim); font-size: 14.5px; } /* ---------- Цены (табы) ---------- */ .price-panel{ background: var(--surface); backdrop-filter: blur(var(--glass-blur)) saturate(140%); border: 1px solid var(--border); border-radius: var(--radius-l); overflow: hidden; } .price-tabs{ display: flex; flex-wrap: wrap; gap: 8px; padding: 18px; border-bottom: 1px solid var(--border-soft); background: var(--bg-soft); } .price-tab{ padding: 10px 16px; border-radius: 999px; border: 1px solid var(--border); background: var(--surface-2); color: var(--text-dim); font-size: 13.5px; font-weight: 700; transition: all .2s var(--ease); } .price-tab:hover{ color: var(--text); } .price-tab.is-active{ background: var(--grad-accent); color: var(--accent-ink); border-color: transparent; } .price-body{ padding: 8px 8px 8px; } .price-table{ display: none; padding: 18px; overflow-x: auto; -webkit-overflow-scrolling: touch; } .price-table.is-active{ display: block; } .price-table table{ width: 100%; min-width: 460px; border-collapse: collapse; } .price-table caption{ text-align: left; font-family: var(--font-display); font-size: 16px; margin-bottom: 14px; color: var(--text); } .price-table th{ text-align: left; font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--text-faint); font-weight: 700; padding: 10px 14px; border-bottom: 1px solid var(--border); } .price-table td{ padding: 14px; border-bottom: 1px solid var(--border-soft); font-size: 15px; } .price-table tr:last-child td{ border-bottom: none; } .price-table td:last-child{ font-family: var(--font-mono); font-weight: 700; color: var(--accent-2); text-align: right; white-space: nowrap; } .price-note{ padding: 16px 22px 22px; color: var(--text-faint); font-size: 13px; } /* ---------- Зона выезда ---------- */ .area-panel{ display: grid; grid-template-columns: 1fr 1fr; gap: 0; border-radius: var(--radius-l); overflow: hidden; border: 1px solid var(--border); background: var(--surface); backdrop-filter: blur(var(--glass-blur)) saturate(140%); } .area-col{ padding: 34px 32px; } .area-col + .area-col{ border-left: 1px solid var(--border-soft); } .area-col h3{ font-size: 15px; text-transform: uppercase; letter-spacing: .06em; color: var(--info); margin-bottom: 18px; display: flex; align-items: center; gap: 10px; } .area-col h3 svg{ width: 18px; height: 18px; } .pill-list{ display: flex; flex-wrap: wrap; gap: 9px; } .pill{ padding: 8px 14px; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--border); font-size: 13.5px; color: var(--text-dim); } /* ---------- Отзывы ---------- */ .reviews-scroller{ display: grid; grid-auto-flow: column; grid-auto-columns: minmax(300px, 360px); gap: 18px; overflow-x: auto; padding-bottom: 18px; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; } .reviews-scroller::-webkit-scrollbar{ height: 6px; } .reviews-scroller::-webkit-scrollbar-thumb{ background: var(--border); border-radius: 3px; } .review-card{ scroll-snap-align: start; background: var(--surface); backdrop-filter: blur(var(--glass-blur)) saturate(140%); border: 1px solid var(--border); border-radius: var(--radius-m); padding: 24px; display: flex; flex-direction: column; gap: 14px; } .review-top{ display: flex; align-items: center; gap: 12px; } .avatar{ width: 42px; height: 42px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-family: var(--font-display); font-weight: 700; font-size: 14px; color: var(--accent-ink); flex: none; } .review-top .who strong{ display: block; font-size: 14.5px; } .review-top .who span{ font-size: 12px; color: var(--text-faint); } .stars{ display:flex; gap: 3px; color: var(--accent-2); } .stars svg{ width: 14px; height: 14px; } .review-text{ color: var(--text-dim); font-size: 14.5px; } /* ---------- CTA-баннер ---------- */ .cta-band{ position: relative; overflow: hidden; border-radius: var(--radius-l); border: 1px solid var(--border); padding: 64px 40px; text-align: center; } .cta-band-bg{ position: absolute; inset: 0; background: url('../images/stuck-snow.jpg') center/cover no-repeat; filter: saturate(.85); } .cta-band-bg::after{ content:''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10,8,5,.86), rgba(10,8,5,.94)); } .cta-band > *{ position: relative; z-index: 1; } .cta-band .eyebrow{ justify-content: center; } .cta-band h2{ margin-top: 14px; font-size: clamp(26px, 4vw, 40px); max-width: 640px; margin-left: auto; margin-right: auto; } .cta-band .phone-big{ margin-top: 22px; font-family: var(--font-mono); font-size: clamp(28px, 4.4vw, 44px); font-weight: 700; color: var(--accent-2); } .cta-band-actions{ margin-top: 26px; display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; } /* ---------- Форма / модалка ---------- */ .modal-overlay{ position: fixed; inset: 0; background: rgba(8,6,4,.72); backdrop-filter: blur(6px); z-index: 90; display: flex; align-items: center; justify-content: center; padding: 20px; opacity: 0; pointer-events: none; transition: opacity .25s var(--ease); } .modal-overlay.is-open{ opacity: 1; pointer-events: auto; } .modal-box{ width: 100%; max-width: 420px; background: var(--surface-2); backdrop-filter: blur(24px) saturate(160%); border: 1px solid var(--border); border-radius: var(--radius-l); padding: 34px; position: relative; transform: translateY(14px) scale(.98); transition: transform .25s var(--ease); box-shadow: var(--shadow-2); } .modal-overlay.is-open .modal-box{ transform: translateY(0) scale(1); } .modal-close{ position: absolute; top: 16px; right: 16px; width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--border); background: var(--surface-2); display: flex; align-items: center; justify-content: center; } .modal-box h3{ font-size: 22px; padding-right: 30px; } .modal-box p.hint{ margin-top: 8px; color: var(--text-dim); font-size: 14px; } .field{ margin-top: 18px; } .field label{ display: block; font-size: 12.5px; color: var(--text-faint); text-transform: uppercase; letter-spacing: .05em; margin-bottom: 8px; font-weight: 700; } .field input{ width: 100%; height: 50px; padding: 0 16px; border-radius: 12px; border: 1px solid var(--border); background: var(--bg-soft); color: var(--text); font-size: 15px; } .field input::placeholder{ color: var(--text-faint); } .field input:focus{ border-color: var(--info); outline: none; } .modal-box .btn{ margin-top: 22px; } .modal-note{ margin-top: 14px; font-size: 12px; color: var(--text-faint); text-align: center; } .form-success{ display: none; text-align: center; padding: 10px 0; } .form-success.is-visible{ display: block; } .form-success svg{ width: 46px; height: 46px; color: var(--ok); margin: 0 auto 14px; } .form-fields.is-hidden{ display: none; } /* ---------- Футер ---------- */ .site-footer{ background: var(--bg-soft); border-top: 1px solid var(--border-soft); padding: 64px 0 26px; } .footer-grid{ display: grid; grid-template-columns: 1.3fr 1fr 1fr 1fr; gap: 32px; } .footer-brand .brand{ margin-bottom: 16px; } .footer-brand p{ color: var(--text-dim); font-size: 14px; max-width: 280px; } .footer-msg{ display: flex; gap: 10px; margin-top: 18px; } .footer-col h4{ font-family: var(--font-body); font-size: 13px; text-transform: uppercase; letter-spacing: .06em; color: var(--text-faint); margin-bottom: 16px; } .footer-col ul{ display: flex; flex-direction: column; gap: 11px; } .footer-col a{ color: var(--text-dim); font-size: 14.5px; transition: color .2s; } .footer-col a:hover{ color: var(--text); } .footer-phone{ font-family: var(--font-mono); font-size: 19px; font-weight: 700; color: var(--text); } .footer-status{ display: inline-flex; align-items: center; gap: 7px; margin-top: 10px; font-size: 12.5px; color: var(--ok); font-weight: 700; } .footer-status .dot{ width:7px; height:7px; border-radius:50%; background: var(--ok); box-shadow: 0 0 8px var(--ok);} .footer-bottom{ margin-top: 50px; padding-top: 22px; border-top: 1px solid var(--border-soft); display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px; font-size: 12.5px; color: var(--text-faint); } /* ---------- Плавающая мобильная панель ---------- */ .mobile-bar{ position: fixed; left: 0; right: 0; bottom: 0; z-index: 55; display: none; gap: 1px; background: var(--border); border-top: 1px solid var(--border); transform: translateY(100%); transition: transform .3s var(--ease); padding-bottom: env(safe-area-inset-bottom, 0); } .mobile-bar.is-visible{ transform: translateY(0); } .mobile-bar a{ flex: 1; background: var(--surface-2); backdrop-filter: blur(20px) saturate(150%); display: flex; align-items: center; justify-content: center; gap: 8px; height: 60px; font-weight: 700; font-size: 13.5px; } .mobile-bar a.primary{ background: var(--grad-accent); color: var(--accent-ink); } .mobile-bar svg{ width: 18px; height: 18px; } /* ---------- Кнопка наверх ---------- */ .to-top{ position: fixed; right: 22px; bottom: 22px; width: 46px; height: 46px; border-radius: 50%; background: var(--surface-2); backdrop-filter: blur(var(--glass-blur)); border: 1px solid var(--border); display: flex; align-items: center; justify-content: center; z-index: 50; opacity: 0; pointer-events: none; transform: translateY(10px); transition: all .3s var(--ease); } .to-top.is-visible{ opacity: 1; pointer-events: auto; transform: translateY(0); } .to-top svg{ width: 18px; height: 18px; } /* ---------- Анимации появления ---------- Работают только при наличии JS (класс .js на ), чтобы контент оставался видимым без JavaScript. */ html.js [data-reveal]{ opacity: 0; transform: translateY(18px); transition: opacity .7s var(--ease), transform .7s var(--ease); } html.js [data-reveal].is-in{ opacity: 1; transform: translateY(0); } /* ---------- Адаптив ---------- */ @media (max-width: 1080px){ .why-grid{ grid-template-columns: repeat(2, 1fr); } .footer-grid{ grid-template-columns: 1.2fr 1fr 1fr; } .footer-col.col-services{ display: none; } } @media (max-width: 960px){ .main-nav{ display: none; } .header-phone{ display: none; } .burger{ display: flex; } .hero-grid{ grid-template-columns: 1fr; } .hero-side{ order: -1; max-width: 420px; margin: 0 auto; } .hero-stats{ grid-template-columns: repeat(2, 1fr); } .area-panel{ grid-template-columns: 1fr; } .area-col + .area-col{ border-left: none; border-top: 1px solid var(--border-soft); } } @media (max-width: 720px){ :root{ --header-h: 70px; } .header-inner{ height: 70px; gap: 8px; } .brand-mark{ width: 36px; height: 36px; border-radius: 10px; } .brand-mark svg{ width: 20px; height: 20px; } .brand-text .name{ font-size: 13.5px; } .brand-text .tagline{ display: none; } .header-msg{ display: none; } .header-actions{ gap: 8px; } .header-actions .btn-primary{ display: none; } .hero{ padding: 36px 0 60px; } .why-grid{ grid-template-columns: 1fr; } .services-grid{ grid-template-columns: repeat(auto-fill, minmax(240px,1fr)); } .footer-grid{ grid-template-columns: 1fr 1fr; } .footer-brand{ grid-column: 1 / -1; } .mobile-bar{ display: flex; } .to-top{ bottom: calc(78px + env(safe-area-inset-bottom, 0)); } .cta-band{ padding: 48px 22px; } body{ padding-bottom: calc(60px + env(safe-area-inset-bottom, 0)); } } @media (max-width: 480px){ .container{ padding: 0 16px; } .footer-grid{ grid-template-columns: 1fr; } .hero-stats{ grid-template-columns: 1fr 1fr; gap: 18px 16px; } .radar-chip{ left: 10px; right: 10px; bottom: 14px; max-width: none; } .trustbar .container{ justify-content: flex-start; overflow-x: auto; flex-wrap: nowrap; } .section-pad{ padding: 52px 0; } .hero-copy .lead{ font-size: 16px; } .svc-card{ padding: 22px 18px 18px; } .modal-box{ padding: 26px 22px; } .cta-band{ padding: 40px 18px; } .price-tabs{ padding: 14px; gap: 6px; } .price-tab{ padding: 8px 13px; font-size: 12.5px; } } @media (max-width: 360px){ .hero-copy h1{ font-size: 30px; } .hero-stats{ grid-template-columns: 1fr 1fr; gap: 16px 12px; } .btn{ padding: 0 20px; font-size: 14.5px; } }