/* ============================================================================ Мобильный макет. Десктопная страница — экспорт из Figma: холст 1440x7506, где каждый элемент позиционирован абсолютно от своей секции. Переверстать такое медиа-запросами нельзя, поэтому рядом лежит второй макет — .m-page. Классы внутри намеренно те же, что на десктопе (.stories-track, .bb-track, .greet-track, .wave-player, .hero-story-card): весь app.js работает на обоих макетах без единой правки. Лишний макет app.js удаляет из DOM на старте. ========================================================================== */ .m-page{ display:none; } @media (max-width: 1199px){ /* ---------- каркас ---------- */ /* --m-pad — единое боковое поле. На планшете превращается в поля, центрирующие колонку 680px, и карусели уезжают в край вместе с ним. */ html{ -webkit-text-size-adjust:100%; } body{ min-width:0; background:#000; } .page{ display:none; } .m-page{ display:block; background:#000; --m-pad:20px; } @media (min-width: 700px){ .m-page{ --m-pad: max(28px, calc((100% - 680px) / 2)); } } .promo-bar{ display:block; position:static; height:auto; padding:10px 16px; white-space:normal; font-size:12.5px; line-height:1.4; text-align:center; } .promo-bar b{ display:inline; margin-right:4px; } /* ---------- типографика и общие блоки ---------- */ .m-page h1, .m-page h2{ margin:0; font-weight:600; letter-spacing:-.6px; } .m-sec{ padding:44px var(--m-pad); background:#fff; color:#111; } .m-dark{ background:#000; color:#fff; } .m-h2{ font-size:26px; line-height:1.15; margin-bottom:20px; } .m-h2-light{ color:#fff; } .m-body{ font-size:16px; line-height:1.55; margin:0 0 14px; color:#3a3a3e; } .m-dark .m-body{ color:rgba(255,255,255,.72); } .m-eyebrow{ display:flex; align-items:center; gap:8px; margin-bottom:12px; font:600 12px/1 'Inter',sans-serif; letter-spacing:1.4px; text-transform:uppercase; color:#fff; } .m-dot{ width:8px; height:8px; border-radius:50%; background:#4a7dff; flex:0 0 8px; } .m-btn{ display:inline-flex; align-items:center; justify-content:center; min-height:50px; padding:0 30px; border-radius:999px; background:#fff; color:#111; text-decoration:none; font:600 15px/1 'Inter',sans-serif; letter-spacing:.1px; -webkit-tap-highlight-color:transparent; } .m-sec:not(.m-dark) .m-btn{ background:#111; color:#fff; } .m-btn:active{ transform:scale(.97); } .m-btn-sm{ min-height:42px; padding:0 16px; font-size:13px; } /* ---------- шапка ---------- */ .m-head{ position:sticky; top:0; z-index:20; display:flex; align-items:center; justify-content:space-between; gap:12px; padding:12px var(--m-pad); background:#000; } .m-head .site-logo{ position:static; font-size:18px; letter-spacing:4px; } /* ---------- герой ---------- */ .m-hero{ background:#000; padding-bottom:36px; } .m-hero-art{ position:relative; margin:0 max(12px, calc(var(--m-pad) - 8px)); border-radius:16px; overflow:hidden; aspect-ratio:4/5; background:#232325; } .m-hero-bg{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; } /* max-width:none обязателен — иначе preflight-правило img{max-width:100%} зажимает фигуру по ширине кадра и object-fit:contain уводит её в центр */ .m-hero-cut{ position:absolute; left:50%; top:-15%; height:140%; width:auto; max-width:none; transform:translateX(-50%); } .m-hero-copy{ padding:26px var(--m-pad) 0; } .m-hero-copy h1{ font-size:clamp(28px,8.2vw,38px); line-height:1.1; color:#fff; } .m-hero-copy .m-btn{ margin-top:24px; } /* ---------- сторис ---------- */ .m-story-sec{ padding-top:0; } /* position:relative обязателен: затемнение и подпись внутри позиционированы абсолютно и без него уезжают к . Вместе с ним нужно снять десктопные top/right/z-index — иначе они работают как relative-смещение и карточка наезжает на следующую секцию. */ .m-story-sec .hero-story-card{ position:relative; inset:auto; z-index:auto; width:100%; max-width:420px; height:auto; aspect-ratio:5/7; transform:none; box-shadow:none; } .m-page .stories-track{ position:static; height:auto; padding:0 var(--m-pad); gap:12px; margin:0 calc(-1 * var(--m-pad)); scroll-padding-left:var(--m-pad); -webkit-overflow-scrolling:touch; } .m-page .story-card{ flex:0 0 min(68vw, 300px); height:calc(min(68vw, 300px) * 1.5); } .m-page .story-card:hover{ transform:none; } .m-page .stories-dots{ position:static; margin-top:18px; } .m-page .stories-arrow[hidden], .m-page .bb-arrow[hidden], .m-page .greet-arrow[hidden]{ display:none; } /* точки-переключатели: сами 8px, но зона нажатия — 32px */ .m-page .stories-dots, .m-page .bb-dots{ gap:14px; } .m-page .stories-dots button, .m-page .bb-dots button{ position:relative; } .m-page .stories-dots button::after, .m-page .bb-dots button::after{ content:''; position:absolute; inset:-12px; } /* ---------- коуч ---------- */ .m-coach{ position:relative; min-height:520px; display:flex; align-items:flex-end; } .m-coach .parallax-wrap{ position:absolute; inset:0; } .m-coach .parallax-img{ height:100%; } .m-coach-copy{ position:relative; padding:0 var(--m-pad) 48px; color:#fff; } .m-coach-copy h2{ font-size:28px; line-height:1.15; } .m-coach-copy p{ font-size:16px; line-height:1.5; color:rgba(255,255,255,.8); margin:14px 0 24px; } /* ---------- отзывы ---------- */ /* обрезает соседний слайд именно по краю колонки: у секции есть боковые поля, и её собственный overflow:hidden оставил бы сосед видимым в этих полях */ .m-reviews-vp{ overflow:hidden; } .m-page .bb-track{ position:static; width:100%; align-items:flex-start; } .m-review{ flex:0 0 100%; min-width:0; padding-right:0; } /* height:auto перебивает .bb-slide{height:100%} — иначе фото растягивается на высоту самого длинного отзыва */ .m-review-photo{ width:100%; height:auto; aspect-ratio:16/10; object-fit:cover; object-position:22% center; border-radius:14px; display:block; } .m-review blockquote{ margin:18px 0 0; font-size:16px; line-height:1.55; color:rgba(255,255,255,.85); } .m-review cite{ display:block; margin-top:14px; font-size:13px; font-style:italic; color:rgba(255,255,255,.55); } .m-page .bb-dots{ position:static; margin-top:22px; } /* ---------- бестселлер ---------- */ .m-book{ width:100%; border-radius:14px; display:block; margin-bottom:22px; box-shadow:0 18px 36px -18px rgba(0,0,0,.45); } /* ---------- поздравления ---------- */ .m-page .greet-track{ position:static; height:auto; padding:4px var(--m-pad) 0; gap:14px; margin:24px calc(-1 * var(--m-pad)) 0; scroll-padding-left:var(--m-pad); } .m-page .greet-card{ flex:0 0 min(72vw, 340px); height:calc(min(72vw, 340px) * 1.5); } /* ---------- плеер ---------- */ .m-wave{ background:#f6f6f7; } .m-page .wave-player{ position:static; inset:auto; flex-direction:column; gap:26px; } .m-page .wp-left{ width:auto; flex:none; } .m-page .wp-cover{ width:100%; height:auto; aspect-ratio:1; } .m-page .wp-list{ gap:2px; overflow:visible; padding-right:0; } .m-page .wp-row{ padding:10px 12px; gap:12px; } .m-page .wp-row img{ width:48px; height:48px; flex:0 0 48px; } .m-page .wp-row-title{ font-size:15px; } /* ---------- финальный блок ---------- */ .m-cta{ position:relative; min-height:460px; display:flex; align-items:center; } .m-cta-copy{ position:relative; padding:0 var(--m-pad); color:#fff; } .m-cta-copy h2{ font-size:32px; line-height:1.1; } .m-cta-copy .m-btn{ margin-top:26px; } /* ---------- подвал ---------- */ .m-foot{ display:flex; flex-direction:column; gap:6px; padding:26px var(--m-pad) 34px; background:#000; border-top:1px solid #232325; font:400 13px/1.4 'Inter',sans-serif; color:rgba(255,255,255,.45); } .m-foot .sf-by{ color:rgba(255,255,255,.7); margin-top:4px; } /* ---------- попап сторис ---------- */ .story-stage{ height:auto; width:min(92vw, 460px); } .story-nav.prev{ left:6px; } .story-nav.next{ right:6px; } .story-close{ top:-56px; right:0; } } /* ---------- фон финального блока (обе версии) ---------- */ .cta-art{ position:absolute; inset:0; overflow:hidden; } .cta-art img{ width:100%; height:100%; display:block; object-fit:cover; object-position:50% 62%; /* держим в кадре передний ряд лиц */ } /* лёгкая вуаль: фото должно читаться, затемняем в основном справа, под текстом */ .cta-scrim{ position:absolute; inset:0; background:linear-gradient(90deg, rgba(0,0,0,.34) 0%, rgba(0,0,0,.38) 42%, rgba(0,0,0,.60) 100%); } @media (max-width: 1199px){ /* на телефоне фото не фон, а самостоятельный блок НАД заголовком, обрезанный по переднему ряду — лица должны читаться */ .m-cta{ display:block; min-height:0; padding:0 0 46px; background:#000; } .m-cta .cta-art{ position:relative; inset:auto; aspect-ratio:4/3; margin:0 max(12px, calc(var(--m-pad) - 8px)); border-radius:16px; } /* подъезжаем к переднему ряду: иначе половину кадра занимают трибуны и грязь */ .m-cta .cta-art img{ object-position:54% 50%; transform:scale(1.3); transform-origin:54% 52%; } .m-cta .cta-scrim{ background:linear-gradient(180deg, rgba(0,0,0,.10) 0%, rgba(0,0,0,0) 45%, rgba(0,0,0,.30) 100%); } .m-cta-copy{ position:relative; padding:26px var(--m-pad) 0; } }