/* ============================================================ Prest1Ge — mobile.css (v5) ТОЛЬКО мобильная/планшетная адаптация. Каждое правило внутри @media (max-width…). Десктоп (>1024px) НЕ затрагивается ни строкой. Подключается ПОСЛЕДНИМ в . Ключевые задачи v5: • компактный glass-header (radius 24, кнопки 44px) + надёжный offset • hero главной ПЕРЕСТРОЕН: карточка Prest1Ge Access — обычный блок НИЖЕ статистики (без absolute/transform, без наложения) • точные размеры карточек/цен/кнопок по спецификации • нет горизонтального скролла, safe-area ============================================================ */ /* Мобильное меню (инъектируется mobile-menu.js) — скрыто на всех ширинах, показывается только внутри @media (max-width:960px). Отдельный узел. */ .m-menu{ display:none; } /* ============================================================ 1) БАЗА ============================================================ */ @media (max-width:1024px){ html,body{ overflow-x:hidden; width:100%; max-width:100%; } img,svg,video,canvas,picture{ max-width:100%; } .wrap{ width:100%; max-width:100%; } /* длинные слова/заголовки не рвут сетку */ h1,h2,h3,h4,p,a,span,b,li{ overflow-wrap:break-word; } /* высота плавающей шапки + зазор + notch — общий offset контента */ :root{ --m-top:calc(84px + env(safe-area-inset-top, 0px)); } } /* ============================================================ 2) ШАПКА — компактная (≤960px) ============================================================ */ @media (max-width:960px){ .hdr{ top:calc(12px + env(safe-area-inset-top, 0px)); width:calc(100% - 32px); } .hdr__inner{ padding:8px 8px 8px 16px; border-radius:24px; gap:8px; } .brand__mark{ width:32px; height:32px; } .brand__name{ font-size:16px; } .hdr__cta{ gap:8px; } .hdr__cta .btn--primary{ height:44px; min-height:44px; padding:0 18px; font-size:15px; display:inline-flex; align-items:center; } .hdr-cart{ width:44px; height:44px; } .hdr__burger{ width:44px; height:44px; } /* бургер → крестик */ body.m-open .hdr__burger span{ background:transparent; } body.m-open .hdr__burger span::before{ top:0; transform:rotate(45deg); } body.m-open .hdr__burger span::after{ top:0; transform:rotate(-45deg); } /* выпадающая панель меню */ .m-menu{ position:absolute; top:calc(100% + 10px); left:0; right:0; background:rgba(10,12,20,.97); -webkit-backdrop-filter:blur(22px) saturate(150%); backdrop-filter:blur(22px) saturate(150%); border:1px solid rgba(255,255,255,.10); border-radius:20px; box-shadow:0 24px 60px rgba(0,0,0,.6); padding:8px; display:flex; flex-direction:column; gap:2px; opacity:0; transform:translateY(-10px) scale(.98); transform-origin:top center; pointer-events:none; transition:opacity .2s ease, transform .2s ease; max-height:calc(100dvh - 120px); overflow-y:auto; z-index:120; } body.m-open .m-menu{ opacity:1; transform:none; pointer-events:auto; } .m-menu__nav{ display:flex; flex-direction:column; gap:1px; } .m-menu__nav a{ display:block; padding:13px 15px; border-radius:11px; color:#EAF0FF; font-size:15.5px; font-weight:600; line-height:1.2; text-decoration:none; font-family:inherit; transition:background .15s ease; } .m-menu__nav a.is-active{ background:rgba(255,255,255,.06); } .m-menu__nav a:hover,.m-menu__nav a:active{ background:rgba(255,255,255,.09); } .m-menu__cta{ display:flex; gap:8px; margin-top:6px; padding-top:8px; border-top:1px solid rgba(255,255,255,.08); } .m-menu__cta .btn{ flex:1; justify-content:center; min-height:44px; white-space:nowrap; } } /* ============================================================ 3) КОНТЕЙНЕРЫ / ОТСТУПЫ / КНОПКИ / ТИПОГРАФИКА ============================================================ */ @media (max-width:768px){ .wrap{ padding-left:16px; padding-right:16px; } section[id]{ scroll-margin-top:var(--m-top, 84px); } /* единый размер кнопок */ .btn{ min-height:48px; font-size:15px; } .btn--sm{ min-height:40px; font-size:13.5px; } .hdr .btn--sm{ min-height:0; } /* заголовки секций компактнее */ section h2, .section-head h2, .section-head--split h2{ font-size:clamp(24px, 6.5vw, 34px); line-height:1.1; letter-spacing:-.01em; } .section-lede, .page-hero__lede{ font-size:clamp(14px, 3.7vw, 16px); line-height:1.5; } .eyebrow, section .eyebrow{ font-size:11px; } /* flex/grid дети умеют сжиматься (не рвут ряд) */ .hdr__inner > *, .qcard > *, .hstat > *, .sub > *, .rtab > *{ min-width:0; } } @media (max-width:480px){ .filters{ margin-left:-16px; margin-right:-16px; padding-left:16px; padding-right:16px; } } /* секции — компактнее по вертикали */ @media (max-width:768px){ section{ padding:34px 0; } .section-head{ margin-bottom:16px; } .section-head--split{ gap:10px; row-gap:10px; } .section-head .section-lede, .section-head--split .section-lede{ margin-top:6px; } } /* ============================================================ 4) ГЛАВНАЯ — HERO ПЕРЕСТРОЕН (без наложений) ============================================================ */ @media (max-width:960px){ .hero{ min-height:auto; padding-top:calc(var(--m-top,84px) + 4px); padding-bottom:36px; } .hero__grid{ grid-template-columns:1fr; gap:0; } .hero__copy{ order:1; } .hero__art{ order:2; } } @media (max-width:768px){ .hero h1{ font-size:clamp(34px, 9vw, 46px); line-height:1.02; letter-spacing:-.02em; } .hero__eyebrow{ font-size:11.5px; padding:6px 12px; } .hero__lede{ font-size:16px; line-height:1.35; margin-top:14px; } .hero__cta{ flex-direction:column; gap:12px; margin-top:20px; } .hero__cta .btn{ width:100%; height:52px; min-height:52px; } /* статистика — компактные mini-stat cards: 2 в ряд + 1 широкая снизу */ .hero__stats{ grid-template-columns:1fr 1fr; gap:12px; margin-top:20px; max-width:none; } .hero__stats .hstat:last-child{ grid-column:1 / -1; } .hstat{ min-height:88px; padding:14px 16px; border-radius:22px; display:flex; flex-direction:column; justify-content:center; } .hstat__ico{ top:12px; right:12px; width:28px; height:28px; opacity:.45; } .hstat__num{ font-size:clamp(24px, 7.2vw, 32px); margin-top:0; } .hstat__lbl{ font-size:11px; letter-spacing:.12em; margin-top:8px; } /* Prest1Ge Access — КОМПАКТНАЯ премиум-карточка НИЖЕ статистики (Apple Wallet / PS Direct). Плавающие карточки-спутники и орбита скрыты (именно они налезали). */ .hero__art{ height:auto; min-height:0; margin-top:20px; perspective:none; display:flex; justify-content:center; align-items:flex-start; } .hero__art .ring, .card__orbit, .card__aura, .card__glyphs, .card--sat1, .card--sat2{ display:none !important; } .card.card--main{ position:static !important; inset:auto !important; transform:none !important; animation:none !important; width:100%; max-width:none; margin:0; min-height:0 !important; /* было 568px — убираем «простыню» */ justify-content:flex-start !important; /* было space-between — убираем пустоты */ gap:12px !important; padding:20px 20px !important; border-radius:24px; background: radial-gradient(120% 80% at 15% 8%, rgba(155,108,255,.42), transparent 55%), radial-gradient(120% 90% at 92% 100%, rgba(59,130,246,.4), transparent 55%), linear-gradient(160deg,#151A46 0%,#0A0D24 100%) !important; box-shadow: 0 26px 60px -24px rgba(0,0,0,.8), 0 10px 34px -16px rgba(139,92,246,.5), inset 0 1px 0 rgba(255,255,255,.14), inset 0 0 40px -12px rgba(99,102,241,.28) !important; /* лёгкое внутреннее свечение */ } .card.card--main::before, .card.card--main::after{ animation:none !important; } /* плотный вертикальный ритм внутри карточки */ .card--main .pcard-eyebrow{ font-size:10.5px; letter-spacing:.2em; } .card--main .pcard-eyebrow .chip{ margin-right:60px; padding:5px 11px; letter-spacing:.14em; } .card--main .pcard-title{ font-size:clamp(26px, 7.6vw, 32px); margin:4px 0 2px; } .card--main .pcard-sub{ font-size:12.5px; line-height:1.35; } .card--main .pcard-mid{ gap:9px !important; font-size:13px; line-height:1.3; } .card--main .pcard-mid .row{ gap:9px; } .card--main .pcard-mid .row svg{ width:15px; height:15px; } .card--main .pcard-price{ font-size:clamp(34px, 10vw, 44px); margin-top:4px; } .card--main .pcard-price small{ font-size:14px; } .card--main .pcard-tag{ font-size:13px; top:14px; right:14px; } } @media (max-width:360px){ .hero h1{ font-size:clamp(30px, 9vw, 40px); } } /* Категорийные карточки (быстрая полоса) — 2 колонки, компактно */ @media (max-width:768px){ .quickstrip{ padding:8px 0 8px; } .quickstrip__grid{ grid-template-columns:1fr 1fr; gap:12px; } .qcard{ flex-direction:column; align-items:flex-start; gap:8px; min-height:120px; padding:16px; } .qcard__ico{ width:44px; height:44px; } .qcard__ico svg{ width:22px; height:22px; } .qcard__title{ font-size:18px; line-height:1.15; } .qcard__sub{ font-size:13.5px; line-height:1.2; } .qcard__arrow{ display:none; } } @media (max-width:340px){ .quickstrip__grid{ grid-template-columns:1fr; } } /* ПОДПИСКИ — 2 компактные glass-карточки в ряд (стиль Prest1Ge сохранён) */ @media (max-width:768px){ .subs__grid{ grid-template-columns:1fr 1fr; gap:12px; } .sub{ padding:14px 13px; border-radius:22px; gap:8px; } .sub__eyebrow{ font-size:9.5px; letter-spacing:.16em; } .sub__tier-badge{ width:30px; height:30px; border-radius:9px; font-size:11px; } .sub__title{ font-size:18px; line-height:1.05; } .sub__sub{ display:none; } /* описание убрано — компактнее (2 колонки) */ .sub__price small{ display:none; } /* лейбл «ОТ» убран — «200 ₽ /месяц» и так ясно */ .sub__price .amt{ font-size:clamp(24px, 7vw, 28px); margin-top:0; } .sub__price .per{ font-size:11.5px; } .sub__list{ gap:5px; padding-top:9px; } .sub__list li{ font-size:11px; line-height:1.25; gap:7px; align-items:flex-start; } .sub__list li svg{ width:12px; height:12px; margin-top:2px; } .sub__list li:nth-child(n+4){ display:none; } /* максимум 3 преимущества на мобиле */ .sub .btn{ height:44px; min-height:44px; width:100%; font-size:12px; padding:0 8px; white-space:normal; line-height:1.15; letter-spacing:0; } /* золотая лента Deluxe — компактнее, чтобы влезала в узкую карточку */ .sub--deluxe .sub__flag{ font-size:9px; padding:4px 9px; top:-11px; letter-spacing:.08em; } } @media (max-width:359px){ .subs__grid{ grid-template-columns:1fr; } /* очень узкие экраны — 1 колонка */ } /* ПОПОЛНЕНИЯ / КОДЫ */ @media (max-width:768px){ /* компактнее — только размеры/отступы, стиль/цвета/расположение сохранены */ .topups__grid{ grid-template-columns:1fr; gap:14px; } .regions, .codes{ padding:14px 16px; } .regions__title, .codes__title{ font-size:clamp(21px, 6vw, 26px); line-height:1.1; } .regions__tabs{ grid-template-columns:repeat(3,1fr); gap:8px; margin-bottom:12px; } /* 3 в ряд, как на десктопе — 1 ряд */ .rtab{ min-height:0; padding:10px 8px; gap:3px; } .rtab__flag{ font-size:16px; } .rtab__name{ font-size:12.5px; } .rtab__note{ font-size:10px; } .rpanel-lede{ font-size:12px; line-height:1.35; margin-bottom:10px; } .topup-input{ padding:11px 14px; margin-bottom:10px; gap:10px; } .topup-input__field, .topup-input input{ height:auto; width:100%; font-size:22px; } .topup-input__cur{ padding:5px 11px; font-size:11px; } .topup-quick{ grid-template-columns:repeat(3,1fr); gap:8px; margin-bottom:14px; } .topup-quick__btn{ padding:10px 5px; height:auto; min-height:0; font-size:13px; } /* Итог «К оплате»: защищённая строка — label НЕ сжимается до вертикали, кнопка нормальной ширины. Колонка на всю ширину — только <520px (ниже). */ .topup-summary{ display:flex; align-items:center; justify-content:space-between; gap:12px; min-width:0; padding-top:14px; } .topup-summary__left{ flex:1 1 auto; min-width:120px; } .topup-summary__label{ white-space:nowrap; min-width:max-content; word-break:normal; overflow-wrap:normal; writing-mode:horizontal-tb; } .topup-summary__sum{ font-size:clamp(22px, 6vw, 27px); } .topup-summary__btn{ flex:0 0 auto; min-width:180px; width:auto; height:52px; } /* коды — тем же компактом + та же защита от вертикального текста */ .codes__grid{ grid-template-columns:1fr 1fr; gap:8px; } .cd__amount{ font-size:clamp(22px, 6.5vw, 30px); } .cd__quick{ grid-template-columns:repeat(3,1fr); gap:8px; } .cd__quick-btn{ padding:10px 5px; height:auto; min-height:0; font-size:13px; } .cd__summary{ display:flex; align-items:center; justify-content:space-between; gap:12px; min-width:0; } .cd__summary > :first-child{ flex:1 1 auto; min-width:110px; } .cd__buy{ flex:0 0 auto; min-width:160px; width:auto; height:52px; } } /* <520px — итог в колонку: «К оплате»+цена сверху, кнопка снизу на всю ширину */ @media (max-width:519px){ .topup-summary, .cd__summary{ flex-direction:column; align-items:stretch; } .topup-summary__left, .cd__summary > :first-child{ min-width:0; width:100%; } .topup-summary__btn, .cd__buy{ width:100%; min-width:0; } } @media (max-width:380px){ .topup-quick, .cd__quick{ grid-template-columns:1fr 1fr; } } @media (max-width:360px){ .codes__grid{ grid-template-columns:1fr; } } /* Карусели — не создают горизонтальный вылет body */ @media (max-width:1024px){ .coverflow, .coverflow__viewport, .marquee, .marquee-wrap, .reviews{ max-width:100%; overflow:hidden; } } /* «Хиты» (coverflow) — КОМПАКТНЕЕ (−~17%): одна карта по центру, соседи выглядывают ~15% с каждой стороны. Карта уже и ниже, чем была (было ~87vw × 342). Ширина/высота = vw c cap; left/top строго = −(размер/2) через calc(min(...)/-2) → активная всегда ровно по центру, без наезда соседей. Стиль/цвета/градиенты/арт/бейджи/кнопка/свечение/анимации карточки сохранены. */ @media (max-width:640px){ .coverflow__viewport{ height:min(330px, 90vw); perspective:1200px; } .cover{ width:min(300px, 70vw); height:min(310px, 74vw); box-sizing:border-box; left:calc(min(300px, 70vw) / -2); top:calc(min(310px, 74vw) / -2); border-radius:18px; } .cover__top{ top:11px; left:11px; gap:5px; } .cover__ps{ padding:3px 7px; font-size:9.5px; } .cover__body{ left:14px; right:14px; bottom:13px; } .cover__title{ font-size:15px; line-height:1.18; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; } .cover__info{ font-size:11px; margin-top:3px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .cover__row{ margin-top:8px; gap:9px; } .cover__price{ font-size:15px; } .cover__buy{ width:34px; height:34px; } .cover__buy svg{ width:14px; height:14px; } .coverflow__nav{ width:32px; height:32px; } .coverflow__nav svg{ width:13px; height:13px; } .coverflow__nav--prev{ left:2px; } .coverflow__nav--next{ right:2px; } } /* Верх секции «Хиты» — компактнее (меньше зазор заголовок/описание/кнопка → карусель) */ @media (max-width:768px){ #hits .section-head{ margin-bottom:16px; } #hits{ padding-bottom:22px; } } /* Маленькие телефоны — карта ещё чуть меньше */ @media (max-width:390px){ .cover{ width:min(300px, 68vw); height:min(300px, 72vw); left:calc(min(300px, 68vw) / -2); top:calc(min(300px, 72vw) / -2); } .cover__title{ font-size:14px; } .cover__buy{ width:32px; height:32px; } .coverflow__nav{ width:30px; height:30px; } } /* ПЛАВНОСТЬ СВАЙПА карусели «Хиты» на телефоне (только ≤640, вид почти идентичен, десктоп не тронут). 1) Стрелки над движущимися картами: backdrop-filter:blur(20px) пересчитывался КАЖДЫЙ кадр при свайпе (карты едут под стрелкой) — заменяем на плотный фон. Внешне почти не отличить. 2) У .cover в transition был `transform .55s` → при свайпе/снапе карта анимировалась ДВАЖДЫ (rAF + CSS-переход) и «отставала» от пальца. Убираем transform из перехода (двигает только rAF → 1:1 за пальцем, плавно). Переходы цвета/тени/opacity оставляем. 3) backface-visibility:hidden — карты крутятся по Y (rotateY), скрытая грань не рендерится. */ @media (max-width:640px){ .coverflow__nav{ backdrop-filter:none; -webkit-backdrop-filter:none; background:rgba(16,20,40,.9); } .cover{ transition:opacity .3s var(--ease-out), border-color .35s, box-shadow .35s; backface-visibility:hidden; -webkit-backface-visibility:hidden; /* легче тень: 50px-блюр × 9 движущихся карт = самый дорогой per-frame paint. Меньший blur (24px) — визуально почти то же, но композитинг заметно дешевле. */ box-shadow:0 10px 24px -10px rgba(0,0,0,.55); } /* горизонтальный overscroll не «утекает» на страницу (нет резинки/подвисаний) */ .coverflow__viewport{ overscroll-behavior-x:contain; } /* ВО ВРЕМЯ свайпа (drag) И ДОВОДКИ (snap, класс is-animating) у карт: убираем тень (самый дорогой per-frame paint исчезает) и переход целиком (opacity/тень больше не «догоняют» rAF → карты идут 1:1 за движением, без рывка и задержки на переключении). transition:none применяется мгновенно. После завершения (оба класса сняты) переход возвращается → тень плавно «оседает». Внешне не заметно. */ .coverflow__viewport.is-dragging .cover, .coverflow__viewport.is-animating .cover{ box-shadow:none; transition:none; } } /* «ТОП-15» (marquee) — компактнее на телефоне: карточки уже/ниже, номер меньше, отступы плотнее, секция ниже. Только размеры/отступы; стиль/цвета/градиенты/номер-эффект/анимации сохранены. */ @media (max-width:768px){ /* компактнее сама секция сверху/снизу и зазор до карусели */ .s-top15{ padding-top:22px; padding-bottom:26px; } .s-top15 .section-head{ margin-bottom:20px; } /* карусель: аккуратный одинаковый зазор, меньше вертикальные поля трека */ .marquee__track{ gap:12px; padding-top:10px; padding-bottom:10px; } /* ВЕРТИКАЛЬНЫЙ прямоугольник как на десктопе: aspect-ratio 23/34 = пропорции десктопных 230×340, height:auto (высота считается от ширины) → карта вытянутая, НЕ квадрат. Ширина ~52vw: карта заметно компактнее, по бокам хорошо видно соседние (явная карусель). */ .rank__card{ width:min(200px, 52vw); height:auto; aspect-ratio:23 / 34; border-radius:15px; } /* номер рейтинга — пропорционально уменьшенной карте */ .rank__num{ font-size:38px; top:8px; left:12px; } /* внутренние отступы текста плотнее, название максимум 2 строки */ .rank__body{ left:11px; right:11px; bottom:11px; } .rank__title{ font-size:13px; line-height:1.2; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; } .rank__meta{ font-size:10.5px; margin-top:2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } } /* Маленькие телефоны — ещё чуть меньше, пропорции (aspect-ratio 23/34) сохраняем */ @media (max-width:390px){ .s-top15{ padding-top:18px; padding-bottom:22px; } .marquee__track{ gap:10px; } .rank__card{ width:min(188px, 52vw); border-radius:14px; } .rank__num{ font-size:34px; top:7px; left:11px; } .rank__body{ left:10px; right:10px; bottom:10px; } .rank__title{ font-size:12.5px; } .rank__meta{ font-size:10px; } } /* Тач: «ТОП-15» авто-прокручивается (JS двигает track через transform), не ручной свайп/замирание. overflow:hidden отменяет тач-скролл от общего .marquee-правила. */ @media (max-width:768px) and (hover:none) and (pointer:coarse){ .marquee{ overflow:hidden; } .marquee__track{ padding-left:0; padding-right:0; } .rank{ scroll-snap-align:none; } } /* «Отзывы» (marquee) — МЕНЬШЕ и компактнее (~17% уже, ниже): карточка не занимает почти весь экран, по бокам аккуратно видны соседние. Скругления/цвета/градиенты/свечение/фон/шрифты/структура НЕ меняются — только размеры, внутренние отступы и число строк текста (чтобы карта была ниже). */ @media (max-width:768px){ .reviews__track{ gap:12px; } /* ещё компактнее: ~60vw (было 68vw) — больше воздуха у краёв экрана, карта не «блок» */ .rev{ width:min(240px, 60vw); padding:13px; gap:8px; border-radius:16px; } .rev__stars{ gap:2px; } .rev__stars svg{ width:11px; height:11px; } /* текст до 4 строк, шрифт/стиль тот же, читаемый */ .rev__text{ font-size:13px; line-height:1.4; display:-webkit-box; -webkit-line-clamp:4; -webkit-box-orient:vertical; overflow:hidden; } .rev__who{ gap:7px; margin-top:2px; } .rev__ava{ width:30px; height:30px; font-size:11.5px; } .rev__name{ font-size:12px; } .rev__meta{ font-size:10.5px; } } /* Тач: отзывы авто-прокручиваются (как на десктопе), без ручного скролла и замирания. overflow:hidden отменяет тач-скролл от общего .marquee-правила; анимация ленты сохранена. */ @media (max-width:768px) and (hover:none) and (pointer:coarse){ .reviews{ overflow:hidden; } } /* «Почему» / «Шаги» / FAQ / CTA / Footer */ @media (max-width:768px){ /* «Почему нам доверяют» — компактнее и НИЖЕ по высоте. Главное: 2 колонки вместо 1 (6 карточек в 3 ряда, а не 6 подряд → блок вдвое короче). Плотнее секция и карточки. Стиль/цвета/градиенты/фон/иконки/свечение/скругления/анимации сохранены. */ .s-why{ padding-top:22px; padding-bottom:26px; } .s-why .section-head{ margin-bottom:18px; } .why__grid{ grid-template-columns:repeat(2, minmax(0,1fr)); gap:10px; } .why{ padding:14px; gap:8px; border-radius:16px; } .why__ico{ width:40px; height:40px; border-radius:12px; } .why__ico svg{ width:18px; height:18px; } .why__t{ font-size:15px; line-height:1.2; } .why__s{ font-size:12.5px; line-height:1.4; } .why__big{ font-size:30px; } /* «Четыре шага» — компактнее и НИЖЕ: 2 колонки вместо 1 (4 карты в 2 ряда → блок вдвое короче), меньше круг/свечение/отступы. Стиль/цвета/градиенты/фон/круг/рамки/скругления сохранены. */ .s-steps{ padding-top:22px; padding-bottom:26px; } .s-steps .section-head{ margin-bottom:18px; } .steps{ grid-template-columns:repeat(2, minmax(0,1fr)); gap:10px; } .steps::before{ display:none; } .step{ padding:16px; } .step__num{ width:56px; height:56px; margin:0 auto 10px; font-size:24px; } .step__num::before{ filter:blur(4px); opacity:.4; } .step__t{ font-size:15px; margin-bottom:4px; } .step__s{ font-size:12.5px; line-height:1.4; } .faq{ width:100%; max-width:100%; } .faq__q{ font-size:15px; line-height:1.4; padding:16px; } .faq__a{ font-size:14px; } .foot{ grid-template-columns:1fr; gap:26px; } .foot__cols{ grid-template-columns:1fr 1fr; gap:22px; } .foot__lede{ font-size:14px; } } /* «Четыре шага» на маленьких телефонах — ещё чуть компактнее (круг/отступы) */ @media (max-width:390px){ .s-steps{ padding-top:18px; padding-bottom:22px; } .step{ padding:14px; } .step__num{ width:52px; height:52px; margin:0 auto 9px; font-size:22px; } .step__t{ font-size:14px; } .step__s{ font-size:12px; } } @media (max-width:640px){ .ctabar{ padding:28px 20px; } .ctabar h2{ font-size:clamp(24px,7vw,32px); } .ctabar .btn{ width:100%; } } @media (max-width:390px){ .foot__cols{ grid-template-columns:1fr; gap:18px; } } /* ============================================================ 5) СТРАНИЦА ИГРЫ (game.html) ============================================================ */ @media (max-width:768px){ /* hero = весь видимый экран, контент прижат к самому НИЗУ (align-items:flex-end, без нижнего padding самого hero). Нижняя панель покупки прячется пока виден hero (JS + .gp-bar--auto ниже), поэтому контент опускается до низа экрана, а сверху остаётся ~55% обложки с персонажами. */ .gp-hero{ min-height:100vh; min-height:100svh; align-items:flex-end; padding-top:0; padding-bottom:0; } .gp-hero__in{ padding:calc(var(--m-top,84px) + 8px) 0 clamp(8px, 1.2vh, 12px); } .gp-hero__col{ max-width:100%; } /* нижняя панель покупки: скрыта (уехала вниз) пока видны кнопки hero; всплывает при прокрутке. Класс .gp-bar--auto ставит JS → если JS не сработает, панель остаётся видимой (safe). */ .gp-bar--auto{ opacity:0; visibility:hidden; pointer-events:none; transition:opacity .3s var(--ease-out), visibility .3s; } .gp-bar--auto.is-shown{ opacity:1; visibility:visible; pointer-events:auto; } /* кадр выше — показываем верх картинки (персонажей), а не середину; текст ниже */ .gp-hero__img{ object-position:var(--hero-x,58%) var(--hero-y,16%); } .gp-hero__media{ background-position:var(--hero-x,58%) var(--hero-y,16%); } /* Низ hero ПЛАВНО растворяется в фон сайта (#05070E) — широкий градиент, без резкой линии до секции «Об игре». Маску снимаем, чтобы нижний градиент реально доводил до сплошного фона (иначе маска гасила overlay у края и оставалась граница). Верхнее лёгкое + левое затемнение для читаемости текста сохранены. Картинка сверху не затемняется (персонажи видны). */ .gp-hero__ov{ -webkit-mask-image:none; mask-image:none; background: linear-gradient(180deg, rgba(5,7,14,0) 0%, rgba(5,7,14,.10) 40%, rgba(5,7,14,.38) 62%, rgba(5,7,14,.68) 78%, rgba(5,7,14,.88) 89%, #05070E 100%), linear-gradient(90deg, rgba(5,7,14,.74) 0%, rgba(5,7,14,.34) 46%, rgba(5,7,14,0) 100%); } /* заголовок 2 строки */ .gp-hero__title{ font-size:clamp(30px, 8.5vw, 44px); line-height:1.0; letter-spacing:-.02em; margin-bottom:8px; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; } /* описание — 2 строки */ .gp-hero__sub{ font-size:14.5px; line-height:1.4; margin-top:8px; max-width:100%; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; } .gp-badges{ gap:6px; margin-bottom:10px; } .gp-badge{ font-size:10px; padding:4px 8px; } /* таймер — 4 компактные ячейки, помещаются в ряд на 360px */ .gp-count{ gap:5px; margin-top:14px; } .gp-count__c{ min-width:0; flex:1 1 0; max-width:78px; padding:8px 3px; border-radius:11px; } .gp-count__n{ font-size:clamp(17px, 4.6vw, 20px); } .gp-count__l{ font-size:8.5px; letter-spacing:.05em; margin-top:2px; } /* цена + кнопки */ .gp-hero__foot{ flex-wrap:wrap; gap:12px; margin-top:16px; } .gp-price small{ font-size:10.5px; } .gp-price b{ font-size:clamp(24px, 6.5vw, 32px); } /* кнопки ВСЕГДА в одну строку: grid 1.6fr/1fr (длинному «Оформить предзаказ» больше места), nowrap — текст не ломается, min-width:0 — не вылезают за экран, одинаковая высота */ .gp-hero__btns{ width:100%; display:grid; grid-template-columns:minmax(0,1.6fr) minmax(0,1fr); gap:8px; } .gp-hero__btns .btn{ min-width:0; min-height:48px; font-size:14px; padding-left:14px; padding-right:14px; white-space:nowrap; } .gp-scrolldown{ display:none; } /* sticky панель покупки — компактная, safe-area */ .gp-bar{ padding:8px 16px calc(8px + env(safe-area-inset-bottom, 0px)); gap:12px; align-items:center; } .gp-bar__p small{ font-size:10px; } .gp-bar .btn{ min-height:44px; font-size:13.5px; } body{ padding-bottom:calc(66px + env(safe-area-inset-bottom, 0px)); } /* секции ниже hero — «Об игре» ближе к норме, легче */ .gp-sec{ padding:24px 0; } .gp-h2{ font-size:clamp(22px, 6vw, 30px); line-height:1.12; } .gp-lede{ font-size:15px; } .gp-about{ font-size:14.5px; line-height:1.55; } .gp-specs{ gap:8px; } .gp-spec{ font-size:12.5px; padding:8px 12px; } .gp-eds{ grid-template-columns:1fr; gap:14px; } .gp-ed{ padding:20px; } .gp-ed__price b{ font-size:clamp(26px,7vw,32px); } .gp-ed .btn{ width:100%; } .gp-conf{ gap:14px; } .gp-pills{ flex-wrap:wrap; gap:8px; } .gp-pill{ padding:9px 12px; font-size:13px; } .gp-present{ grid-template-columns:1fr; gap:16px; } .gp-get{ grid-template-columns:1fr 1fr; gap:12px; } .gp-steps{ grid-template-columns:1fr; gap:12px; } .gp-shots{ grid-template-columns:1fr; } .gp-shots .big{ grid-column:auto; grid-row:auto; } .gp-final__box{ padding:28px 20px; } .gp-final__h{ font-size:clamp(24px,7vw,32px); } .gp-final__btns{ flex-direction:column; } .gp-final__btns .btn{ width:100%; } } @media (max-width:390px){ .gp-get{ grid-template-columns:1fr; } .gp-count__c{ padding:8px 2px; } .gp-count__n{ font-size:17px; } .gp-count__l{ font-size:8px; } /* чуть меньше заголовок и кнопки, чтобы всё влезло в ряд и читалось */ .gp-hero__title{ font-size:clamp(26px, 8vw, 38px); } .gp-hero__btns{ gap:6px; } .gp-hero__btns .btn{ font-size:13px; min-height:46px; padding-left:10px; padding-right:10px; } } /* ============================================================ 6) КАТАЛОГ (catalog.html) ============================================================ */ @media (max-width:820px){ .page-hero{ padding-top:calc(var(--m-top,84px) + 4px); padding-bottom:12px; } .page-hero h1{ font-size:clamp(26px, 7.5vw, 40px); line-height:1.06; } .page-hero__lede{ font-size:14px; line-height:1.45; } .filters-bar{ top:calc(var(--m-top,84px) - 10px); padding:12px 0; } /* 2 колонки на телефоне — ровные, не переполняются (minmax 0) */ .games{ grid-template-columns:repeat(2, minmax(0,1fr)); gap:12px; } } @media (max-width:640px){ /* поиск — компактнее, на всю ширину контейнера */ .search{ flex-basis:100%; max-width:none; } .search input{ font-size:16px; padding-top:11px; padding-bottom:11px; } /* фильтры — одна строка с горизонтальным скроллом (стиль сохранён) */ .filter{ font-size:12.5px; padding:8px 13px; flex-shrink:0; } /* карточки — компактные и ровные */ .gc__cover{ border-radius:14px; } .gc__hint{ font-size:15px; padding:0 12px; } .gc__ps-glyph{ width:18px; height:18px; top:10px; right:10px; } .gc__body{ padding:12px 12px 12px; gap:7px; } .gc__meta{ gap:5px; } .pl, .tag{ padding:2px 6px; font-size:9px; } .gc__title{ font-size:13.5px; line-height:1.2; } .gc__price{ margin-top:0; } .gc__price small{ font-size:10px; } .gc__price b{ font-size:15px; } /* кнопки в столбик — одинаковая ширина, «Подробнее» не обрезается */ .gc__actions{ grid-template-columns:1fr; gap:6px; padding-top:4px; } .gc__actions .btn{ min-height:0; padding:9px 8px; font-size:12px; white-space:nowrap; } } /* ============================================================ 7) КОНТАКТЫ (contacts.html) ============================================================ */ @media (max-width:820px){ .page-hero{ padding-top:calc(var(--m-top,84px) + 4px); } } @media (max-width:640px){ .contacts-grid{ grid-template-columns:1fr; gap:14px; } .contact-card{ padding:20px; } .contact-card__icon{ width:46px; height:46px; } .support-card{ flex-direction:column; align-items:flex-start; padding:22px 20px; } .support-card__title{ font-size:20px; } .faq__q{ font-size:15px; } .cta-band{ padding:30px 20px; } .cta-band h2{ font-size:clamp(24px,7vw,32px); } .cta-band .btn{ width:100%; } } /* ============================================================ 8) ОФОРМЛЕНИЕ (checkout.html) ============================================================ */ @media (max-width:900px){ .checkout-grid{ grid-template-columns:1fr; gap:16px; } .co-summary{ position:static; } .page-hero{ padding-top:calc(var(--m-top,84px) + 4px); } } @media (max-width:640px){ .co-card{ padding:20px 18px; } .co-card__title{ font-size:17px; } .co-form{ grid-template-columns:1fr; } .co-pay{ grid-template-columns:1fr; } .co-pay__opt{ min-height:auto; } .co-toggle{ grid-template-columns:1fr; } .co-input, .co-textarea, .co-phone__num{ font-size:16px; } .co-confirm{ min-height:52px; } .co-row--total .co-row__v{ font-size:26px; } } /* ============================================================ 9) ПЛАНШЕТ 641–1024 — мягкие сетки ============================================================ */ @media (min-width:641px) and (max-width:1024px){ .why__grid{ grid-template-columns:1fr 1fr; } .gp-get{ grid-template-columns:1fr 1fr; } .gp-steps{ grid-template-columns:1fr 1fr; } .contacts-grid{ grid-template-columns:1fr 1fr; } } /* ============================================================ 10) Плавность на телефоне ============================================================ */ @media (max-width:768px){ /* Плавный скролл: замораживаем постоянные фоновые анимации — фиксированные слои перестают пере-растрироваться на каждом кадре. Визуально почти без изменений: «аврора» остаётся тем же цветным размытым фоном, просто статичным. */ .aurora{ animation:none; } .aurora .b{ animation:none !important; will-change:auto; } /* едва заметные плавающие символы (opacity ~.07) с drop-shadow — на телефоне скрываем ради FPS */ .glyphs{ display:none; } *{ -webkit-tap-highlight-color:rgba(255,255,255,.06); } }