/* ============================================================ STAVGLONASS — design tokens Display: Space Grotesk / Body: Manrope / Data: JetBrains Mono ============================================================ */ :root{ --ink: #10241F; --ink-soft: #030303; --muted: #6b787a; /* Читаемый серый для текста поверх фоновой картинки hero. 7.24:1 на чистом фоне и 5.82:1 под самыми тёмными линиями рисунка. У --muted было 2.63:1 и 2.11:1 — ниже нормы AA (4.5:1). */ --muted-strong: #2b3537; --bg: #c5c4c4; --surface: #e2dede; --surface-2: #fdfcfcbb; --line: #DCE3DC; --brand: #1f486f; --brand-dark: #1f486f; --brand-soft: #4e85b841; --accent: #6990e4; --accent-soft:#d3d2d2; --wa: #25A263; --tg: #2AA1D6; --max: #7A5CF0; /* фирменный цвет MAX не сверялся с брендбуком — уточнить */ --radius-s: 8px; --radius-m: 14px; --radius-l: 24px; --shadow-s: 0 2px 10px rgba(16,36,31,.06); --shadow-m: 0 12px 32px rgba(16,36,31,.10); --font-display: 'Space Grotesk', sans-serif; --font-body: 'Manrope', sans-serif; --font-data: 'JetBrains Mono', monospace; } /* ---------------- Тёмная тема ---------------- Тема включается атрибутом data-theme на . Значение проставляет инлайн-скрипт в ещё до отрисовки body — иначе при тёмной теме успевает мигнуть светлый фон. Токены переопределяются целиком, а ниже идут точечные правки тех мест, где светлая тема молча полагалась на то, что --brand и --brand-dark тёмные и белый текст на них читается. */ :root[data-theme="dark"]{ --ink: #e8eef4; --ink-soft: #f4f8fb; --muted: #93a5b6; --muted-strong: #b9c7d5; --bg: #0e1419; --surface: #161e26; --surface-2: #1e2831; --line: #2a3641; --brand: #7fb0e6; /* светлее: в тёмной теме это ещё и цвет текста */ --brand-dark: #16324c; /* остаётся фоном плашек, текстовые вхождения правятся ниже */ --brand-soft: #7fb0e626; --accent: #7ea6ee; --accent-soft: #253040; --shadow-s: 0 2px 10px rgba(0,0,0,.35); --shadow-m: 0 12px 32px rgba(0,0,0,.5); } /* --brand и --accent стали светлыми — белый текст на них больше не читается */ :root[data-theme="dark"] .btn-primary, :root[data-theme="dark"] .btn-accent, :root[data-theme="dark"] .pstep.active .pnum, :root[data-theme="dark"] .cluster-main{ color: #0e1419; } /* здесь --brand-dark использовался как цвет текста, а не как фон */ :root[data-theme="dark"] .card-icon, :root[data-theme="dark"] .hero-stat b, :root[data-theme="dark"] .chip b, :root[data-theme="dark"] .review-avatar, :root[data-theme="dark"] .tag:hover{ color: var(--brand); } /* светлые значения, вписанные мимо токенов */ :root[data-theme="dark"] .site-header{ background: rgba(14,20,25,.94); } :root[data-theme="dark"] .scene{ background: linear-gradient(180deg, #16222c 0%, #101820 60%); } :root[data-theme="dark"] .modal-overlay{ background: rgba(6,10,14,.72); } :root[data-theme="dark"] .hero::before{ opacity: .10; } /* грузовик — чёрная контурная картинка, на тёмной сцене сливается с фоном: инвертируем в белый и меняем тень на светлую, иначе она тоже пропадает */ :root[data-theme="dark"] .truck-wrap img{ filter: brightness(0) invert(1) drop-shadow(0 2px 8px rgba(0,0,0,.55)); } /* Кнопка переключения темы. Показываем ту иконку, куда переключимся: в светлой теме — луну, в тёмной — солнце. */ .theme-toggle{ width: 38px; height: 38px; border-radius: 50%; flex-shrink: 0; display:flex; align-items:center; justify-content:center; background: transparent; border: 1px solid var(--line); color: var(--ink-soft); cursor: pointer; transition: border-color .2s ease, color .2s ease; } .theme-toggle:hover{ border-color: var(--brand); color: var(--brand); } .theme-toggle svg{ width: 18px; height: 18px; } .theme-ico-sun{ display: none; } :root[data-theme="dark"] .theme-ico-sun{ display: block; } :root[data-theme="dark"] .theme-ico-moon{ display: none; } /* Второй экземпляр кнопки — внутри бургер-меню. На мобильном в шапке помещаются только логотип, «Оставить заявку» и бургер: третья кнопка поджимала заявку и текст наезжал. Поэтому на узких экранах кнопка из шапки прячется, а в меню разворачивается в строку с подписью. Оба экземпляра слушает один и тот же обработчик — он работает по querySelectorAll('.theme-toggle'). */ .theme-toggle-nav{ display: none; } .theme-label-dark, .theme-label-light{ display: none; } *, *::before, *::after{ box-sizing: border-box; } html{ scroll-behavior: smooth; scroll-padding-top: 88px; /* якоря не уезжают под sticky-шапку */ scrollbar-gutter: stable; /* нет прыжка страницы при открытии модалки */ } body{ margin:0; background: var(--bg); color: var(--ink); font-family: var(--font-body); font-size: 17px; line-height: 1.55; -webkit-font-smoothing: antialiased; } img{ max-width:100%; display:block; } a{ color: inherit; text-decoration: none; } ul{ margin:0; padding:0; list-style:none; } h1,h2,h3,h4{ font-family: var(--font-display); margin:0; color: var(--ink); font-weight:600; } p{ margin:0; } .container{ max-width: 1180px; margin: 0 auto; padding: 0 24px; } section{ padding: 96px 0; } @media (max-width: 900px){ section{ padding: 64px 0; } } .eyebrow{ font-family: var(--font-data); font-size: 13.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--brand); display:flex; align-items:center; gap:10px; margin-bottom: 18px; } .eyebrow::before{ content:""; width: 22px; height: 1px; background: var(--brand); } h2.section-title{ font-size: clamp(28px, 3.4vw, 42px); letter-spacing:-.01em; max-width: 720px; } .section-lead{ color: var(--muted); font-size: 18px; max-width: 560px; margin-top:16px; } :focus-visible{ outline: 2px solid var(--accent); outline-offset: 3px; } @media (prefers-reduced-motion: reduce){ html{ scroll-behavior: auto; } *, *::before, *::after{ animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; } /* грузовик иначе «доигрывает» до последнего кадра и уезжает за край сцены */ .truck-wrap{ animation: none !important; transform: translateX(24px) !important; } .truck-wrap img{ animation: none !important; transform: translateY(2px) !important; } } /* ---------------- Buttons ---------------- */ .btn{ display:inline-flex; align-items:center; justify-content:center; gap:8px; font-family: var(--font-body); font-weight:700; font-size: 16px; padding: 10px 24px; border-radius: 999px; border: 1px solid transparent; cursor:pointer; transition: transform .18s ease, box-shadow .18s ease, background-color .18s ease; white-space: nowrap; } .btn:hover{ transform: translateY(-2px); } .btn-primary{ background: var(--brand); color:#fff; box-shadow: var(--shadow-s); } .btn-primary:hover{ background: var(--brand-dark); box-shadow: var(--shadow-m); } .btn-accent{ background: var(--accent); color:#fff; box-shadow: var(--shadow-s); } .btn-accent:hover{ box-shadow: var(--shadow-m); } .btn-ghost{ background: transparent; color: var(--ink); border-color: var(--line); } .btn-ghost:hover{ border-color: var(--brand); color: var(--brand); } .btn-sm{ padding: 7px 10px; font-size: 14.5px; } /* ---------------- Header ---------------- */ .site-header{ position: sticky; top:0; z-index: 60; background: rgba(245,247,244,.96); border-bottom: 1px solid var(--line); } .site-header .container{ display:flex; align-items:center; justify-content: space-between; height: 78px; } .logo{ display:flex; align-items:center; gap:10px; font-family: var(--font-display); font-weight:700; font-size: 20px; } .logo-mark{ width: 34px; height: 34px; flex-shrink:0; } .logo small{ display:block; font-family: var(--font-data); font-size: 11.5px; color: var(--muted); letter-spacing:.08em; font-weight:400; } .nav-links{ display:flex; align-items:center; gap: 32px; } .nav-links a{ font-size: 15.5px; font-weight:600; color: var(--ink-soft); position: relative; padding: 6px 0; } .nav-links a.active, .nav-links a:hover{ color: var(--brand); } .nav-links a.active::after{ content:""; position:absolute; left:0; right:0; bottom:-4px; height:2px; background: var(--accent); border-radius:2px; } .header-actions{ display:flex; align-items:center; gap:14px; } .header-phone{ font-family: var(--font-data); font-size: 15px; font-weight:500; display:flex; align-items:center; gap:8px; color: var(--ink-soft); } .header-phone svg{ width:16px; height:16px; color: var(--brand); } .nav-toggle{ display:none; background:none; border:none; cursor:pointer; padding:8px; } .nav-toggle span{ display:block; width:22px; height:2px; background: var(--ink); margin:5px 0; border-radius:2px; } @media (max-width: 920px){ .nav-links{ position:fixed; inset: 78px 0 0 0; background: var(--surface); flex-direction:column; justify-content:flex-start; align-items:flex-start; padding: 32px 24px; gap: 22px; transform: translateX(100%); transition: transform .3s ease; z-index: 100; /* увеличено, чтобы быть поверх всего */ box-shadow: var(--shadow-m); } .nav-links.open{ transform: translateX(0); } .nav-links a{ font-size: 21px; padding: 8px 0; } .header-phone{ display:none; } .nav-toggle{ display:block; position: relative; z-index: 101; } /* кнопка темы переезжает из шапки в меню */ .header-actions .theme-toggle{ display: none; } .theme-toggle-nav{ display: flex; gap: 12px; width: auto; height: auto; border-radius: 999px; padding: 11px 20px; margin-top: 10px; font-family: var(--font-body); font-size: 19px; font-weight: 600; color: var(--ink-soft); } .theme-toggle-nav svg{ width: 21px; height: 21px; flex-shrink: 0; } /* подпись показывает, куда переключимся, — как и иконка */ .theme-label-dark{ display: inline; } :root[data-theme="dark"] .theme-label-dark{ display: none; } :root[data-theme="dark"] .theme-label-light{ display: inline; } } /* ---------------- Hero / telemetry scene ---------------- */ .hero{ position: relative; overflow: hidden; padding-top: 76px; padding-bottom: 0; } /* Фон как отдельный псевдоэлемент */ .hero::before { content: ""; position: absolute; inset: 0; background-image: url("images/hero-bg.png"); background-repeat: no-repeat; background-size: cover; background-position: center; opacity: 0.15; z-index: 0; pointer-events: none; /* выносим фон в отдельный слой: его перерисовка не задевает анимации сцены */ transform: translateZ(0); contain: paint; } /* Все содержимое hero поверх фона */ .hero .container { position: relative; z-index: 1; } .hero-grid{ display:grid; grid-template-columns: 1.05fr .95fr; gap: 40px; align-items:center; } @media (max-width: 980px){ .hero-grid{ grid-template-columns: 1fr; } } .hero-copy h1{ font-size: clamp(34px, 4.6vw, 58px); line-height: 1.06; letter-spacing:-.015em; } .hero-copy h1 em{ font-style: normal; color: var(--brand); } .hero-copy .section-lead{ margin-top: 20px; font-size: 19px; max-width: 480px; color: var(--muted-strong); /* было --muted: 2.63:1 — текст сливался с фоном */ } .hero-actions{ display:flex; gap:14px; margin-top: 34px; flex-wrap:wrap; } .hero-stats{ display:flex; gap: 34px; margin-top: 52px; flex-wrap:wrap; } .hero-stat b{ display:block; font-family: var(--font-display); font-size: 29px; color: var(--brand-dark); } .hero-stat span{ font-size: 20px; color: var(--muted-strong); /* подписи 13px поверх картинки — самый мелкий текст блока */ } /* telemetry readout panel */ .telemetry-panel{ position:relative; background: var(--surface); border:1px solid var(--line); border-radius: var(--radius-l); box-shadow: var(--shadow-m); padding: 22px; min-height: 420px; overflow:hidden; } .telemetry-panel .panel-head{ display:flex; justify-content:space-between; align-items:center; font-family: var(--font-data); font-size:12.5px; color: var(--muted); letter-spacing:.06em; text-transform:uppercase; } .dot{ width:7px; height:7px; border-radius:50%; background: var(--brand); display:inline-block; margin-right:6px; animation: pulse 1.8s infinite; } @keyframes pulse{ 0%,100%{ opacity:1;} 50%{ opacity:.35;} } .scene{ position:relative; height: 300px; margin-top: 14px; border-radius: var(--radius-m); background: linear-gradient(180deg, #E9F1EC 0%, #F5F7F4 60%); overflow:hidden; border:1px solid var(--line); contain: layout paint; /* перерисовка сцены не выходит за её границы */ } .scene-sky{ position:absolute; inset:0; } .sat{ position:absolute; top: 54px; right: 46px; width:34px; height:34px; opacity:.9; animation: satfloat 5s ease-in-out infinite; } @keyframes satfloat{ 0%,100%{ transform: translateY(0) rotate(0deg);} 50%{ transform: translateY(-8px) rotate(6deg);} } .sat-signal{ position:absolute; top: 82px; right: 62px; width:2px; height: 90px; background: repeating-linear-gradient(180deg, var(--brand) 0 4px, transparent 4px 9px); opacity:.55; animation: signalflow 1.2s linear infinite; } /* сдвиг должен быть РОВНО одним периодом градиента (9px), иначе скачок на каждом цикле */ @keyframes signalflow{ from{ background-position-y: 0;} to{ background-position-y: 9px; } } /* Дорога с пунктирной разметкой */ .road { position: absolute; left: 0; right: 0; bottom: 44px; height: 3px; background: var(--line); overflow: visible; } .road::after { content: ""; position: absolute; inset: 0; margin: auto 0; height: 2px; /* +38px запаса справа, чтобы сдвиг на период не открывал пустоту у края */ width: calc(100% + 38px); background: repeating-linear-gradient( 90deg, var(--brand) 0 20px, transparent 20px 38px ); animation: roadmove 1.1s linear infinite; will-change: transform; } /* период паттерна = 38px (20px штрих + 18px пропуск) — сдвигаем ровно на него, иначе цикл не совпадает с разметкой и дорога дёргается на каждом повторе */ @keyframes roadmove { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-38px, 0, 0); } } /* Грузовик — едет по дороге и возвращается. .truck-wrap растянут на всю ширину сцены и служит «рельсой»: проценты в translateX считаются от ширины рельсы, поэтому проезд не зависит от вьюпорта. Движение — только transform (композитинг на GPU), без анимации left. */ .truck-wrap { position: absolute; left: 0; width: 100%; height: 70px; bottom: 33px; z-index: 2; pointer-events: none; animation: drive 9s linear infinite; will-change: transform; } .truck-wrap img { width: 70px; height: 70px; display: block; object-fit: contain; filter: drop-shadow(0 2px 8px rgba(0,0,0,0.15)); /* разворот вынесен на отдельный элемент, чтобы не интерполироваться вместе с проездом; translateY(2px) продублирован в кадрах, иначе анимация его сотрёт */ animation: truckFlip 9s linear infinite; } /* linear + симметричные отрезки: скорость постоянная. ease-in-out применялся между КАЖДОЙ парой кадров и тормозил машину 4 раза за цикл. */ @keyframes drive { 0% { transform: translate3d(-90px, 0, 0); } 45% { transform: translate3d(calc(100% - 80px), 0, 0); } 55% { transform: translate3d(calc(100% - 80px), 0, 0); } /* пауза на развороте */ 100% { transform: translate3d(-90px, 0, 0); } } /* Разворот держится ровно, переворот занимает 0.5% цикла (~45мс) — раньше scaleX(1)→scaleX(-1) шёл через scaleX(0) целых 0.4с и грузовик сплющивался. */ @keyframes truckFlip { 0%, 49.5% { transform: translateY(2px) scaleX(1); } 50%, 99.5% { transform: translateY(2px) scaleX(-1); } 100% { transform: translateY(2px) scaleX(1); } } .ground{ position:absolute; left:0; right:0; bottom:0; height: 44px; background: var(--surface-2); border-top:1px solid var(--line); } .chip{ position:absolute; display:flex; align-items:center; gap:8px; background: var(--surface); border:1px solid var(--line); border-radius: 999px; padding: 7px 12px; font-family: var(--font-data); font-size: 13px; color: var(--ink-soft); box-shadow: var(--shadow-s); animation: chipfloat 4.5s ease-in-out infinite; } .chip b{ color: var(--brand-dark); } .chip .bar{ width: 44px; height: 6px; border-radius: 4px; background: var(--surface-2); overflow:hidden; } /* scaleX вместо width: width пересчитывает layout на каждом кадре */ .chip .bar i{ display:block; height:100%; width:100%; background: var(--accent); transform-origin: left center; animation: fuellevel 6s ease-in-out infinite; } @keyframes fuellevel{ 0%,100%{ transform: scaleX(.78); } 50%{ transform: scaleX(.61); } } .chip-fuel{ top: 18px; left: 14px; animation-delay:.2s; } .chip-coord{ bottom: 62px; right: 14px; animation-delay: 1s; } .chip-speed{ top: 18px; right: 20px; animation-delay: 1.8s; } @keyframes chipfloat{ 0%,100%{ transform: translateY(0);} 50%{ transform: translateY(-6px);} } @media (max-width: 700px){ .chip-speed{ display:none; } } /* ---------------- Trust bar ---------------- */ .trust-bar{ padding: 40px 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); background: var(--surface); } .trust-bar .container{ display:flex; flex-wrap:wrap; gap: 28px 48px; align-items:center; justify-content:space-between; } .trust-item{ display:flex; align-items:center; gap:12px; } .trust-item svg{ width:26px; height:26px; color: var(--brand); flex-shrink:0; } .trust-item b{ display:block; font-family: var(--font-display); font-size:17px; } .trust-item span{ font-size:14px; color: var(--muted); } /* ---------------- Cards / grids ---------------- */ .grid-3{ display:grid; grid-template-columns: repeat(3,1fr); gap: 22px; margin-top: 48px; } .grid-2{ display:grid; grid-template-columns: repeat(2,1fr); gap: 22px; margin-top: 48px; } @media (max-width: 900px){ .grid-3{ grid-template-columns: 1fr; } .grid-2{ grid-template-columns: 1fr; } } .card{ background: var(--surface); border:1px solid var(--line); border-radius: var(--radius-m); padding: 30px; transition: box-shadow .2s ease, transform .2s ease; } .card:hover{ box-shadow: var(--shadow-m); transform: translateY(-3px); } .card-icon{ width: 44px; height: 44px; border-radius: 12px; background: var(--brand-soft); color: var(--brand-dark); display:flex; align-items:center; justify-content:center; margin-bottom: 18px; } .card-icon svg{ width: 22px; height: 22px; } .card h3{ font-size: 20px; margin-bottom:10px; } .card p{ color: var(--muted); font-size:17px; } .card .card-link{ display:inline-block; margin-top:16px; font-size:14.5px; font-weight:700; color: var(--brand); } /* ---------------- Список работ внутри карточки ---------------- */ /* Готового паттерна списка в проекте не было — глобальный сброс ul (строка 51) снимает маркеры, поэтому галочка ставится отдельной колонкой грида. */ .svc-list{ display:flex; flex-direction:column; gap:12px; margin-top:16px; } .svc-list li{ display:grid; grid-template-columns: 18px 1fr; gap:10px; align-items:start; font-size:15.5px; line-height:1.45; color: var(--ink-soft); } .svc-check{ width:18px; height:18px; color: var(--brand); margin-top:2px; } /* ---------------- Process / waypoints (real sequence) ---------------- */ .process{ position:relative; margin-top: 56px; } .process-line{ position:absolute; left: 27px; top:8px; bottom:8px; width:2px; background: var(--line); } /* scaleY вместо height — тоже уходит на GPU вместо пересчёта layout */ .process-line i{ display:block; width:100%; height:100%; background: var(--brand); transform: scaleY(0); transform-origin: top center; } .process.in-view .process-line i{ animation: fillline 2.4s cubic-bezier(.22,.61,.36,1) forwards; } @keyframes fillline{ to{ transform: scaleY(1); } } .pstep{ position:relative; display:grid; grid-template-columns: 56px 1fr; gap: 24px; padding-bottom: 46px; } .pstep:last-child{ padding-bottom:0; } .pnum{ width:56px; height:56px; border-radius:50%; background: var(--surface); border:2px solid var(--line); display:flex; align-items:center; justify-content:center; font-family: var(--font-data); font-weight:700; color: var(--muted); z-index:1; transition: border-color .3s ease, color .3s ease, background .3s ease, transform .3s ease; } .pstep.active .pnum{ border-color: var(--brand); color:#fff; background: var(--brand); } .pbody h3{ font-size: 21px; margin-bottom:8px; } .pbody p{ color: var(--muted); font-size:16px; max-width: 620px; } .pbody .ptag{ display:inline-block; margin-top:12px; font-family: var(--font-data); font-size:12.5px; color: var(--brand); background: var(--brand-soft); padding: 4px 10px; border-radius:999px; letter-spacing:.04em; } /* ---------------- Reviews ---------------- */ .reviews-strip{ display:flex; gap: 20px; margin-top: 48px; overflow-x:auto; padding-bottom: 8px; scrollbar-width: thin; } .review-card{ min-width: 320px; background: var(--surface); border:1px solid var(--line); border-radius: var(--radius-m); padding: 26px; flex-shrink:0; } .review-stars{ color: var(--accent); font-size:15px; letter-spacing:2px; margin-bottom:14px; } .review-card p{ font-size: 15.5px; color: var(--ink-soft); } .review-who{ display:flex; align-items:center; gap:10px; margin-top:18px; } .review-avatar{ width:36px; height:36px; border-radius:50%; background: var(--surface-2); display:flex; align-items:center; justify-content:center; font-family: var(--font-data); font-size:13px; color: var(--brand-dark); font-weight:700; } .review-who b{ display:block; font-size:14.5px; } .review-who span{ font-size:13px; color: var(--muted); } /* ---------------- CTA band ---------------- */ .cta-band{ background: var(--brand-dark); color:#fff; border-radius: var(--radius-l); margin: 0 24px; padding: 56px 48px; display:flex; align-items:center; justify-content:space-between; gap: 32px; flex-wrap:wrap; position:relative; overflow:hidden; } .cta-band h2{ color:#fff; font-size: clamp(24px,3vw,34px); max-width:520px; } .cta-band p{ color: #C9D8CF; margin-top:10px; max-width: 460px; } .cta-band .btn-accent{ box-shadow:none; } .cta-band .btn-ghost{ border-color: rgba(255,255,255,.3); color:#fff; } .cta-actions{ display:flex; gap:14px; flex-wrap:wrap; } /* ---------------- Альтернативное Wi-Fi позиционирование ---------------- Тёмная плашка на светлой странице. Инверсия здесь не украшение: услуга про то, что происходит, когда спутник пропадает. Цвета из токенов сайта, оранжевый — тот же, что у маячка спутника в сцене на главной. */ .wifi-band{ position: relative; overflow: hidden; /* глубина набирается слоями поверх токена, а не отдельным хардкодным цветом: если --brand-dark поменяется, плашка поедет за ним */ background: radial-gradient(120% 130% at 74% 18%, rgba(255,255,255,.10) 0%, transparent 56%), linear-gradient(180deg, rgba(0,0,0,.08) 0%, rgba(0,0,0,.30) 100%), var(--brand-dark); color: #fff; border-radius: var(--radius-l); margin: 0 24px; padding: 52px 44px; display: grid; grid-template-columns: minmax(260px, 1fr) 2.5fr; gap: 44px; align-items: center; } /* мягкое свечение со стороны карточек — «сигнал», а не декоративный градиент */ .wifi-band::before{ content:""; position:absolute; right:-6%; top:50%; width: 620px; height: 620px; transform: translateY(-50%); background: radial-gradient(circle, rgba(105,144,228,.22) 0%, transparent 62%); pointer-events: none; } .wifi-band > *{ position: relative; z-index: 1; } .wifi-badge{ display:inline-flex; align-items:center; gap:8px; font-family: var(--font-data); font-size: 13px; letter-spacing: .1em; text-transform: uppercase; color: #E8722C; border: 1px solid rgba(232,114,44,.45); padding: 6px 14px; border-radius: 999px; margin-bottom: 20px; } .wifi-band h2{ color:#fff; font-size: clamp(26px, 3.1vw, 38px); line-height: 1.12; letter-spacing: -.01em; max-width: 15ch; } .wifi-lead{ color: #C9D8CF; font-size: 18px; margin-top: 18px; max-width: 46ch; } .wifi-lead + .btn{ margin-top: 30px; } /* Инфокарточки: четыре в ряд, всё видно сразу — ни прокрутки, ни переключения. Номер вынесен в угол, а не в поток: он маркирует карточку, но читать его первым не нужно. Карточки тянутся по высоте (align-items: stretch у грида), а описание занимает всю свободную высоту — поэтому нижние черты выравниваются по одной линии независимо от длины текста. */ .wifi-cards{ display:grid; grid-template-columns: repeat(4, 1fr); gap: 18px; } .wifi-card{ position: relative; display:flex; flex-direction:column; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.13); border-radius: var(--radius-m); padding: 26px 22px 24px; transition: transform .2s cubic-bezier(.22,.61,.36,1), border-color .2s ease, background .2s ease; } .wifi-card:hover{ transform: translateY(-4px); border-color: rgba(105,144,228,.55); background: rgba(255,255,255,.08); } .wifi-card-num{ position:absolute; top: 24px; right: 22px; font-family: var(--font-data); font-size: 13px; color: rgba(255,255,255,.35); } .wifi-card-ico{ width: 52px; height: 52px; border-radius: 14px; background: rgba(105,144,228,.16); display:flex; align-items:center; justify-content:center; color: var(--accent); margin-bottom: 22px; } .wifi-card-ico svg{ width: 26px; height: 26px; } .wifi-card h3{ color:#fff; font-size: 18px; line-height: 1.25; margin-bottom: 10px; padding-right: 26px; } .wifi-card p{ color: #a8bcd8; font-size: 15px; line-height: 1.5; flex: 1; } .wifi-card-bar{ width: 32px; height: 3px; border-radius: 2px; background: var(--accent); margin-top: 22px; } /* четыре узкие карточки перестают читаться раньше, чем ломается сам блок, поэтому сначала переводим их в 2×2 и только потом схлопываем плашку */ @media (max-width: 1240px){ .wifi-cards{ grid-template-columns: repeat(2, 1fr); } } @media (max-width: 980px){ .wifi-band{ grid-template-columns: 1fr; gap: 36px; padding: 40px 28px; } .wifi-band h2{ max-width: none; } .wifi-band::before{ right:-30%; } } @media (max-width: 620px){ .wifi-band{ margin: 0 16px; padding: 32px 22px; } .wifi-cards{ grid-template-columns: 1fr; gap: 14px; } } /* ---------------- Footer ---------------- */ .site-footer{ padding: 64px 0 32px; border-top:1px solid var(--line); } .footer-grid{ display:grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 32px; } @media (max-width: 800px){ .footer-grid{ grid-template-columns: 1fr 1fr; } } .footer-grid h4{ font-size: 14px; text-transform:uppercase; letter-spacing:.06em; color: var(--muted); margin-bottom:16px; font-family: var(--font-data); font-weight:600; } .footer-grid li{ margin-bottom: 10px; font-size: 15.5px; } .footer-grid a:hover{ color: var(--brand); } .footer-bottom{ margin-top: 48px; padding-top: 24px; border-top:1px solid var(--line); display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px; font-size:14px; color: var(--muted); } /* ---------------- Cookie banner ---------------- */ .cookie-banner{ position: fixed; left: 22px; bottom: 22px; z-index: 90; /* выше кнопок связи (80), ниже модалки (200) */ max-width: 460px; display: flex; flex-direction: column; gap: 16px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-m); box-shadow: var(--shadow-m); padding: 22px 24px; opacity: 0; transform: translateY(12px); transition: opacity .3s ease, transform .3s cubic-bezier(.22,.61,.36,1); } .cookie-banner[hidden]{ display: none; } /* иначе display:flex перебивает атрибут */ .cookie-banner.open{ opacity: 1; transform: none; } .cookie-text b{ display:block; font-family: var(--font-display); font-size: 18px; margin-bottom: 6px; } .cookie-text p{ color: var(--muted); font-size: 15px; line-height: 1.5; } .cookie-actions{ display:flex; gap: 10px; flex-wrap: wrap; } @media (max-width: 820px){ .cookie-banner{ left: 16px; right: 16px; bottom: 16px; max-width: none; padding: 18px 20px; } /* здесь баннер во всю ширину и накрывает кнопки связи — поднимаем их над ним */ body.cookie-open .contact-cluster{ bottom: calc(32px + var(--cookie-banner-h, 160px)); } body.cookie-open .to-top{ bottom: calc(104px + var(--cookie-banner-h, 160px)); } } /* ---------------- Страница 404 ---------------- main прижат к центру экрана за вычетом шапки (78px) и подвала, поэтому на короткой странице подвал не висит посреди пустоты. */ .notfound{ min-height: calc(100vh - 78px - 260px); display:flex; align-items:center; } .notfound-code{ font-family: var(--font-data); font-weight: 600; font-size: clamp(72px, 14vw, 148px); line-height: 1; color: var(--brand); opacity: .22; letter-spacing: -.02em; } .notfound h1{ font-size: clamp(28px, 4vw, 44px); letter-spacing:-.01em; max-width: 16ch; margin-top: 8px; } .notfound .section-lead{ max-width: 52ch; } .notfound-actions{ display:flex; gap: 14px; flex-wrap: wrap; margin-top: 34px; } .notfound-links{ margin-top: 44px; padding-top: 26px; border-top: 1px solid var(--line); } .notfound-links h2{ font-family: var(--font-data); font-size: 13.5px; letter-spacing:.12em; text-transform: uppercase; color: var(--muted); font-weight: 600; margin-bottom: 14px; } .notfound-links ul{ display:flex; gap: 10px 28px; flex-wrap: wrap; } .notfound-links a{ font-size: 15.5px; font-weight: 600; color: var(--brand); } .notfound-links a:hover{ text-decoration: underline; } /* ---------------- Кнопка «Наверх» ---------------- Садится над плавающими кнопками связи (те 60px + 22px снизу), поэтому bottom = 94px. z-index на единицу ниже кластера: если они всё же пересекутся, перекрывать связь кнопкой прокрутки нельзя. */ .to-top{ position: fixed; right: 22px; bottom: 94px; z-index: 79; width: 48px; height: 48px; border-radius: 50%; display:flex; align-items:center; justify-content:center; background: var(--surface); color: var(--brand); border: 1px solid var(--line); box-shadow: var(--shadow-m); cursor: pointer; opacity: 0; visibility: hidden; transform: translateY(10px); transition: opacity .25s ease, transform .25s cubic-bezier(.22,.61,.36,1), visibility .25s, background .2s ease, color .2s ease, border-color .2s ease; } .to-top.is-visible{ opacity: 1; visibility: visible; transform: none; } /* открытое меню связи разворачивается вверх ровно в это место — уводим кнопку, иначе она оказывается под пунктами меню. Работает соседним селектором, поэтому .to-top в разметке идёт сразу после кластера */ .contact-cluster.open + .to-top{ opacity: 0; visibility: hidden; transform: translateY(10px); } .to-top:hover{ background: var(--brand); color: #fff; border-color: var(--brand); } :root[data-theme="dark"] .to-top:hover{ color: #0e1419; } .to-top svg{ width: 20px; height: 20px; } /* ---------------- Floating contact cluster ---------------- */ /* pointer-events:none обязателен: .cluster-menu скрыто через opacity, но место в потоке занимает, поэтому контейнер невидимо тянется вверх примерно на 250px и перехватывал клики по кнопке «Наверх» под собой. Интерактивные потомки возвращают себе события сами. */ .contact-cluster{ position:fixed; right: 22px; bottom: 22px; z-index: 80; display:flex; flex-direction:column; align-items:flex-end; gap:12px; pointer-events:none; transition: bottom .3s cubic-bezier(.22,.61,.36,1); } .cluster-main{ pointer-events: auto; } .cluster-menu{ display:flex; flex-direction:column; gap:10px; margin-bottom:4px; opacity:0; transform: translateY(10px) scale(.96); pointer-events:none; transition: opacity .2s ease, transform .2s cubic-bezier(.22,.61,.36,1); } .contact-cluster.open .cluster-menu{ opacity:1; transform: translateY(0) scale(1); pointer-events:auto; } .cluster-item{ display:flex; align-items:center; gap:10px; background: var(--surface); border:1px solid var(--line); padding: 10px 16px 10px 10px; border-radius: 999px; box-shadow: var(--shadow-m); font-size:14.5px; font-weight:700; } .cluster-item .ico{ width:32px; height:32px; border-radius:50%; display:flex; align-items:center; justify-content:center; color:#fff; } .cluster-item .ico svg{ width:16px; height:16px; } .ico-wa{ background: var(--wa); } .ico-tg{ background: var(--tg); } .ico-max{ background: var(--max); } .ico-call{ background: var(--accent); } /* Логотип MAX — белый знак на прозрачном фоне, поэтому цветная подложка обязательна: без неё он не виден на светлом. Размер в долях от контейнера, чтобы совпадать с соседними иконками во всех трёх местах (32/38/44px). */ .ico-max img{ width: 52%; height: 52%; object-fit: contain; } .cluster-main{ width:60px; height:60px; border-radius:50%; background: var(--brand); color:#fff; border:none; cursor:pointer; display:flex; align-items:center; justify-content:center; box-shadow: var(--shadow-m); transition: transform .2s ease, background .2s ease; } .cluster-main:hover{ background: var(--brand-dark); } .cluster-main svg{ width:24px; height:24px; transition: transform .25s ease; } .contact-cluster.open .cluster-main svg{ transform: rotate(45deg); } /* ---------------- Modal ---------------- */ .modal-overlay{ position:fixed; inset:0; background: rgba(103, 193, 209, 0.534); backdrop-filter: blur(2px); display:flex; align-items:center; justify-content:center; padding:20px; z-index: 200; /* увеличен, чтобы быть поверх навигации */ opacity:0; pointer-events:none; transition: opacity .22s ease; } .modal-overlay.open{ opacity:1; pointer-events:auto; } .modal-box{ background: var(--surface); border-radius: var(--radius-l); max-width: 420px; width:100%; padding: 32px; box-shadow: var(--shadow-m); transform: translateY(14px) scale(.97); transition: transform .22s cubic-bezier(.22,.61,.36,1); position:relative; } .modal-overlay.open .modal-box{ transform: translateY(0) scale(1); } .modal-close{ position:absolute; top:18px; right:18px; background:none; border:none; cursor:pointer; color: var(--muted); } .modal-close svg{ width:20px; height:20px; } .modal-box h3{ font-size:23px; margin-bottom:8px; padding-right: 24px; } .modal-box .section-lead{ font-size:15.5px; margin-top:0; margin-bottom:22px; } .modal-options{ display:flex; flex-direction:column; gap:10px; } .modal-option{ display:flex; align-items:center; gap:14px; padding: 14px 16px; border:1px solid var(--line); border-radius: var(--radius-m); transition: border-color .18s ease, background .18s ease; } .modal-option:hover{ border-color: var(--brand); background: var(--brand-soft); } .modal-option .ico{ width:38px; height:38px; border-radius:10px; display:flex; align-items:center; justify-content:center; color:#fff; flex-shrink:0; } .modal-option .ico svg{ width:18px; height:18px; } .modal-option b{ display:block; font-size:15.5px; } .modal-option span{ font-size:13.5px; color: var(--muted); font-family: var(--font-data); } /* ---------------- Page hero (inner pages) ---------------- */ .page-hero{ padding: 64px 0 20px; } .page-hero h1{ font-size: clamp(30px,4vw,48px); letter-spacing:-.01em; max-width: 760px; } .breadcrumb{ font-family: var(--font-data); font-size:13px; color: var(--muted); margin-bottom:18px; display:flex; gap:8px; align-items:center; } .breadcrumb a:hover{ color: var(--brand); } /* ---------------- Misc utility ---------------- */ .divider{ height:1px; background: var(--line); margin: 0; } .tag-row{ display:flex; gap:10px; flex-wrap:wrap; margin-top: 22px; } .tag{ font-family: var(--font-data); font-size:13px; background: var(--surface-2); padding:6px 12px; border-radius:999px; color: var(--ink-soft); } /* Появление сделано АНИМАЦИЕЙ, а не transition. Раньше `.reveal{transition: opacity .6s, transform .6s}` перебивалось идущими ниже правилами с той же специфичностью (`.trust-item{transition: transform .2s}`, `.review-card{...}`) — свойство transition заменялось целиком, opacity оставался без перехода и блоки вспыхивали мгновенно. Анимация с transition не конфликтует. Без fill-mode: forwards, поэтому после проигрыша hover-трансформы работают. */ .js .reveal:not(.in-view){ opacity: 0; transform: translateY(16px); } .reveal.in-view{ animation: revealIn .6s cubic-bezier(.22,.61,.36,1) backwards; } @keyframes revealIn{ from{ opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } } /* ---------------- Micro-interactions ---------------- */ a{ transition: color .18s ease; } .logo, .logo-img{ transition: opacity .2s ease, transform .4s ease; } .logo:hover{ opacity:.85; } .logo:hover .logo-mark, .logo:hover .logo-img{ transform: rotate(12deg); } .nav-links a{ overflow:hidden; } .nav-links a::before{ content:""; position:absolute; left:0; bottom:-4px; height:2px; width:100%; background: var(--brand); transform: scaleX(0); transform-origin: left; transition: transform .25s ease; } .nav-links a:hover::before{ transform: scaleX(1); } .nav-links a.active::before{ display:none; } .footer-grid a{ transition: color .18s ease, transform .18s ease; display:inline-block; } .footer-grid a:hover{ transform: translateX(3px); } .tag{ transition: background .2s ease, color .2s ease, transform .2s ease; } .tag:hover{ background: var(--brand-soft); color: var(--brand-dark); transform: translateY(-2px); } .trust-item{ transition: transform .2s ease; } .trust-item:hover{ transform: translateY(-3px); } .trust-item svg{ transition: transform .35s ease; } .trust-item:hover svg{ transform: scale(1.15) rotate(-8deg); } .review-card{ transition: transform .2s ease, box-shadow .2s ease; } .review-card:hover{ transform: translateY(-4px); box-shadow: var(--shadow-m); } .card-icon{ transition: transform .25s ease; } .card:hover .card-icon{ transform: scale(1.08) rotate(-4deg); } .cluster-item{ transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; } .cluster-item:hover{ transform: translateX(-4px); border-color: var(--brand); } .modal-option{ transition: border-color .18s ease, background .18s ease, transform .18s ease; } .modal-option:hover{ transform: translateX(4px); } .modal-close{ transition: transform .2s ease, color .2s ease; } .modal-close:hover{ transform: rotate(90deg); color: var(--ink); } .pstep.active .pnum{ transform: scale(1.06); } /* Каскадное появление сеток и полос. Задержки навешаны на animation-delay и только на состояние .in-view. Раньше это был transition-delay без привязки к состоянию — он действовал ВСЕГДА, в том числе на :hover, и 4-я карточка реагировала на курсор с задержкой .18s и при наведении, и при уводе мыши. */ .grid-3 > .reveal.in-view:nth-child(2), .grid-2 > .reveal.in-view:nth-child(2), .reviews-strip > .reveal.in-view:nth-child(2), .trust-bar .container > .reveal.in-view:nth-child(2){ animation-delay: .07s; } .grid-3 > .reveal.in-view:nth-child(3), .grid-2 > .reveal.in-view:nth-child(3), .reviews-strip > .reveal.in-view:nth-child(3), .trust-bar .container > .reveal.in-view:nth-child(3){ animation-delay: .14s; } .grid-2 > .reveal.in-view:nth-child(4), .reviews-strip > .reveal.in-view:nth-child(4), .trust-bar .container > .reveal.in-view:nth-child(4){ animation-delay: .21s; }