:root { --font-from: 21.33; --font-to: 21.33; --vw-from: calc(1920 / 100); --vw-to: calc(2849 / 100); --coefficient: calc((var(--font-to) - var(--font-from)) / (var(--vw-to) - var(--vw-from))); --base: calc((var(--font-from) - var(--vw-from) * var(--coefficient)) / 16); } html { font-size: calc(var(--base) * 1rem + var(--coefficient) * 1vw); } @media screen and (max-width: 1920px) { :root { --font-from: 11.01; --font-to: 21.33; --vw-from: calc(991 / 100); --vw-to: calc(1920 / 100); } } @media screen and (max-width: 991px) { :root { --font-from: 14.99; --font-to: 19.34; --vw-from: calc(767 / 100); --vw-to: calc(991 / 100); } } @media screen and (max-width: 767px) { :root { --font-from: 0; --font-to: 32.73; --vw-from: calc(1 / 100); --vw-to: calc(767 / 100); } } body { min-height: -webkit-fill-available; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .how-work-steps .how-work-step:last-child .how-work-step-line { display: none; } .gold-border::before, .gold-border-background::before, .partner-adv-card::before { display: block; content: ''; position: absolute; top: -0.0625rem; left: -0.0625rem; width: calc(100% + 0.125rem); height: calc(100% + 0.125rem); background: linear-gradient(to top right, #FFEDD6 0%, rgba(255, 237, 214, 0.152422) 41.78%, rgba(255, 235, 209, 0.129226) 68.36%, #FFEBD1 100%); z-index: -1; border-radius: 1.525rem; } .partner-adv-card::before { border-radius: 0.7865rem !important; } .faq-item.active .faq-item-header { opacity: 1; } .faq-item-wrapper { grid-template-rows: 0fr; transition: grid-template-rows 0.3s ease-in-out; } .faq-item.active .faq-item-wrapper { grid-template-rows: 1fr; } .faq-plus { transition: transform 0.3s ease-in-out; } .faq-item.active .faq-plus { transform: rotate(45deg); } .faq-item:last-child { border-bottom: none; } .faq.on-gold .faq-item { border-bottom-color: rgba(0, 0, 0, 0.1); } .faq.on-gold .faq-plus { filter: invert(1); } .service:first-child { padding-top: 0; border-top-color: transparent; } /* 1. Делаем сам драггер прозрачным, но сохраняем его размеры */ .swiper-scrollbar-drag { height: 100%; background-color: transparent !important; /* Убираем дефолтный цвет Swiper */ position: relative; } /* 2. Переносим весь визуал и transition на псевдоэлемент */ .swiper-scrollbar-drag::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; border-radius: 1rem; background-color: #9F8C77; /* Плавный переход теперь работает идеально, так как JS сюда не лезет */ transition: background-color 200ms ease-in-out; } /* 3. Меняем цвет псевдоэлемента при ховере или драге */ .slider-scrollbar.is-dragging .swiper-scrollbar-drag::before, .swiper-scrollbar-drag:hover::before { background-color: var(--black); } .partner-example:hover .partner-example-photo { transform: scale(0.95); opacity: 0.8; } [slider="partners-hero"] .swiper-scrollbar-drag::before { background-color: var(--white-40); } [slider="partners-hero"] .slider-scrollbar.is-dragging .swiper-scrollbar-drag::before, [slider="partners-hero"] .swiper-scrollbar-drag:hover::before { background-color: var(--white-80); } @media screen and (max-width: 991px) { .service:nth-child(2) { padding-top: 0; border-top-color: transparent; } } @media screen and (max-width: 767px) { .service:nth-child(2) { padding-top: 2rem; border-top-color: #505050; } } /* Попап заявки — спека 036. С JavaScript попапом управляет скрипт: он ставит .is-open и убирает её по крестику, «Закрыть», затемнению и Esc. Адрес страницы при этом не меняется — иначе после перезагрузки попап открывался бы снова. Без JavaScript работает запасной путь: кнопка — обычная ссылка на #request, и попап показывает :target. Правило намеренно отключено, когда скрипт жив (класс на ставит landing.js). */ .popup.is-open { display: flex !important; opacity: 1 !important; } html:not(.has-js-popup) .popup:target { display: flex !important; opacity: 1 !important; } /* Крестик стал ссылкой-обёрткой вокруг прежней картинки. Обёртка своего бокса не создаёт, поэтому .popup-cross сохраняет прежнее absolute- позиционирование относительно формы и вид не меняется. */ .popup-cross-link { display: contents; } /* Галочка согласия в формах заявок (попап главной и форма на /partners). Сам input спрятан (opacity:0), видимый квадратик — соседний div .w-checkbox-input; закрашивает его класс .w--redirected-checked, который проставлял модуль форм Webflow. Но его обработчик слушает поля селектором `.w-form form input[type="checkbox"]`, а класс w-form с обёрток снят (спека 035: иначе он же перехватывал submit и слал заявку в API Webflow). Значит, галочка нажималась, но никак этого не показывала. Рисуем состояние сами, на CSS: работает и без JavaScript, и на странице, отданной сервером после ошибки валидации (там input приходит уже checked). Отмеченная — чёрный квадрат с белой галочкой внутри. У студии галочки не было (просто заливка), в вёрстке Webflow её рисовала картинка custom-checkbox-checkmark.svg — но её в выгрузке нет, поэтому чертим сами: две грани пустого квадрата, повёрнутого на 45°. Размеры в процентах от квадратика — он на мобильных меньше (1rem против 1.25rem), галочка ужимается вместе с ним. */ .w-checkbox:has(> input[type="checkbox"]:checked) > .checkbox { border-color: var(--black); background-color: var(--black); } .w-checkbox > .checkbox:after { content: ""; position: absolute; inset: 0; margin: auto; width: 32%; height: 60%; border: solid var(--white); border-width: 0 .125rem .125rem 0; /* повёрнутая галочка зрительно сидит низковато — приподнимаем на глаз */ transform: translateY(-8%) rotate(45deg); opacity: 0; transition: opacity .15s ease-in-out; } .w-checkbox:has(> input[type="checkbox"]:checked) > .checkbox:after { opacity: 1; } /* Фокус с клавиатуры — тоже за Webflow (.w--redirected-focus): без него по Tab не видно, где стоишь. Цвет свой, не синий из дефолтной темы Webflow. */ .w-checkbox:has(> input[type="checkbox"]:focus-visible) > .checkbox { outline: .125rem solid var(--black); outline-offset: .125rem; } /* Меню в шапке прижато вправо (margin-left: auto у .nav-menu), а ширины ему впритык: «О сервисе» упирается в подпись логотипа и читается как её продолжение. Отделяем меню от логотипа зазором, а место под него берём из промежутков между пунктами — иначе ссылки перестанут помещаться в строку. Только десктоп: ниже 992px .nav-menu — выпадающая панель, там пункты стоят колонкой и разделять нечего. */ @media screen and (min-width: 992px) { .nav-brand { margin-right: 2.5rem; } .nav-links { grid-column-gap: 1.5rem; } /* Пункт меню и кнопка входа держатся в одну строку. У вошедшего в шапке «Личный кабинет» вместо «Войти» — кнопка шире, места меню остаётся меньше, и без запрета пункты ломались пополам («Почему это / выгодно»). Переносить название пункта нельзя: это не текст, а ярлык. */ .nav-item, .login-button { white-space: nowrap; } /* Место под длинную кнопку берём из промежутков: они сжимаются вместе с окном и на широком экране остаются прежними (1.5rem). */ .nav-links { grid-column-gap: clamp(0.75rem, 1.4vw, 1.5rem); } .nav-menu { margin-right: clamp(0.75rem, 1.4vw, 2rem); } } /* Ниже 1400px промежутков уже не хватает — уступает подпись логотипа: она поясняющая, а пункты меню и вход нужны для работы. Сам логотип остаётся. */ @media screen and (min-width: 992px) and (max-width: 1199px) { .nav-logo-text { display: none; } } /* Круги соцсетей наезжают друг на друга (margin-right: -.25rem), и порядок наложения в вёрстке задан z-index'ами по классу кнопки. Кнопок стало пять вместо трёх — ВКонтакте и Одноклассники встали между Telegram и почтой, поэтому очередь расписываем целиком. На тёмном фоне левый круг лежит поверх правого, на светлом — наоборот; оба направления сохраняем. */ .social-button.max { z-index: 5; } .social-button.tg { z-index: 4; } .social-button.vk { z-index: 3; } .social-button.ok { z-index: 2; } .social-button.email { z-index: 1; } .social-button-white.max { z-index: 1; } .social-button-white.tg { z-index: 2; } .social-button-white.vk { z-index: 3; } .social-button-white.ok { z-index: 4; } .social-button-white.email { z-index: 5; } /* Кнопка под курсором растёт и должна лежать поверх соседей. У Webflow это правило того же веса, что и наши, но идёт раньше — повторяем. */ .social-button.max:hover, .social-button.tg:hover, .social-button.vk:hover, .social-button.ok:hover, .social-button.email:hover, .social-button-white.max:hover, .social-button-white.tg:hover, .social-button-white.vk:hover, .social-button-white.ok:hover, .social-button-white.email:hover { z-index: 10; } /* Правый край ряда ровный при любом наборе кнопок: в вёрстке вылет отступа гасил класс .email, но почты в настройках может и не быть. */ .left-column-socials > :last-child, .footer-socials > :last-child { margin-right: 0; } /* Верхняя строка подвала — логотип, кнопки соцсетей и телефон — разложена через justify-content: space-between, то есть зазор между ними это просто остаток свободного места. Кнопок стало пять, телефон длинный — остатка не осталось, и всё склеилось в одну полосу. Ставим гарантированный зазор, а уступает только логотип: он векторный и ужимается без потерь, тогда как кнопки и номер должны сохранять размер. Ниже 992px строка и так колонкой со своим отступом — там правило не нужно. */ @media screen and (min-width: 992px) { .footer-head { grid-column-gap: 3rem; gap: 3rem; } .footer-logo { flex: 0 1 34.375rem; min-width: 0; } .footer-socials, .footer-phone { flex: none; white-space: nowrap; } } /* Попап видеоинструкции по конструктору (блок «Конструктор страниц памяти»). Общий .popup даёт затемнение и центрирование; здесь только сам кадр. Ширина ограничена и вьюпортом, и 16:9 по высоте — иначе на низких экранах плеер вылезал бы за края. Крестик вынесен над кадром: внутри он перекрывал бы штатные элементы управления плеера. */ .video-popup-box { position: relative; width: min(90vw, 68.75rem); max-width: 100%; } .video-popup-player { display: block; width: 100%; max-height: 80vh; aspect-ratio: 16 / 9; border-radius: 0.75rem; background: #000; outline: none; } .video-popup-cross { position: absolute; top: -2.75rem; right: 0; display: flex; line-height: 0; } /* Крестик — общий файл с попапом заявки, а там он тёмный (#161616) под светлую форму. Здесь он лежит на затемнении, поэтому перекрашиваем в белый фильтром: отдельный файл ради одного цвета заводить незачем, прозрачность контура при этом сохраняется. */ .video-popup-cross img { filter: brightness(0) invert(1); } /* На телефоне играет вертикальный ролик — кадр под него, иначе от горизонтальной пропорции остались бы чёрные поля сверху и снизу. Порог тот же, что в landing.js (isMobile). */ @media screen and (max-width: 767px) { .video-popup-box { width: min(94vw, calc(78vh * 9 / 16)); } .video-popup-player { aspect-ratio: 9 / 16; max-height: 78vh; } .video-popup-cross { top: -2.25rem; } /* У имиджевого ролика главной и у видеопрезентации CRM вертикальной версии нет: ролик смотрят целиком, а не листая ленту. Оставляем им 16:9 и на телефоне — иначе кадр под вертикаль обвёл бы чёрными полями. */ .video-popup--wide .video-popup-box { width: 94vw; } .video-popup--wide .video-popup-player { aspect-ratio: 16 / 9; max-height: 60vh; } } /* Гарантии на QR-табличку. Стоят сразу под ценой: обещание замены — часть решения о покупке, а не справка, за которой лезут в FAQ. Палитра и радиусы — те же, что у карточки таблички (.tablichka), чтобы блок читался её продолжением, а не вставкой. */ .warranty { background-image: radial-gradient(circle at 0 100%, #242424, #161616); border-radius: 1.5rem; padding: 2rem; display: flex; flex-direction: column; gap: 1.5rem; margin-top: 1rem; } .warranty-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.5rem 1rem; } .warranty-h { font-size: 1.5rem; font-weight: 700; line-height: 1.16667; } .warranty-lead { color: var(--white-60); font-size: 0.875rem; line-height: 1.42857; } .warranty-items { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; } .warranty-item { border: 0.0625rem solid #ffd7ac40; border-radius: 1rem; padding: 1.25rem; display: flex; flex-direction: column; gap: 0.5rem; } /* «Что не покрываем» — не гарантия, а её граница. Поэтому отдельной полосой под обещаниями и без золотой рамки: иначе взгляд считает его четвёртым обещанием и спотыкается о пустую ячейку сетки. */ .warranty-item.is-limit { grid-column: 1 / -1; border-color: #ffffff1f; flex-direction: row; flex-wrap: wrap; align-items: baseline; gap: 0.25rem 1.25rem; } .warranty-item.is-limit .warranty-item-h { flex: none; } .warranty-item.is-limit .warranty-item-p { flex: 1 1 24rem; } .warranty-item-h { color: var(--gold); font-size: 1rem; font-weight: 700; line-height: 1.25; } .warranty-item.is-limit .warranty-item-h { color: var(--white-80); } .warranty-item-p { color: var(--white-80); font-size: 0.875rem; line-height: 1.42857; } .warranty-note { color: var(--white-60); font-size: 0.875rem; line-height: 1.42857; border-top: 0.0625rem solid #ffffff1f; padding-top: 1.25rem; } .warranty-note strong { color: var(--white-80); font-weight: 700; } @media screen and (max-width: 991px) { .warranty-items { grid-template-columns: repeat(2, 1fr); } } @media screen and (max-width: 767px) { .warranty { padding: 1.5rem; } .warranty-items { grid-template-columns: 1fr; } } /* Калькулятор дохода партнёра. Стоит под карточками тарифов, в той же тёмной секции, поэтому фон карточек тот же (--black), а рамки — золотые, как у гарантийного блока лендинга. Таблица собрана на grid, а не на : на телефоне строки разворачиваются в карточки, где каждая ячейка подписывается своим data-label. Табличная разметка так не умеет без дублирования текста. */ .pcalc { background-color: var(--black); border-radius: 1.5rem; padding: 2rem; margin-top: 1.5rem; display: flex; flex-direction: column; gap: 1.5rem; } .pcalc__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.5rem 1.5rem; } .pcalc__h { font-size: 1.5rem; font-weight: 700; line-height: 1.16667; } .pcalc__lead { color: var(--white-60); font-size: 0.875rem; line-height: 1.42857; flex: 1 1 20rem; } .pcalc__lead strong { color: var(--gold); font-weight: 700; } .pcalc__table { display: flex; flex-direction: column; } .pcalc__row { display: grid; grid-template-columns: minmax(12rem, 1.6fr) repeat(4, minmax(6rem, 1fr)); gap: 0.5rem 1rem; padding: 1rem 0; border-top: 0.0625rem solid #ffffff1f; align-items: baseline; } .pcalc__row--head { border-top: 0; padding-top: 0; color: var(--white-60); font-size: 0.8125rem; line-height: 1.3; } .pcalc__cell--what { display: flex; flex-direction: column; gap: 0.25rem; } .pcalc__what { font-size: 1rem; font-weight: 700; line-height: 1.25; } .pcalc__note-inline { color: var(--white-60); font-size: 0.8125rem; line-height: 1.38; } .pcalc__sum { display: block; font-size: 1.125rem; font-weight: 700; line-height: 1.2; font-variant-numeric: tabular-nums; } .pcalc__row:last-child .pcalc__sum { color: var(--gold); } .pcalc__year { display: block; margin-top: 0.25rem; color: var(--white-60); font-size: 0.75rem; line-height: 1.3; font-variant-numeric: tabular-nums; } .pcalc__foot { color: var(--white-60); font-size: 0.875rem; line-height: 1.42857; border-top: 0.0625rem solid #ffffff1f; padding-top: 1.25rem; } @media screen and (max-width: 991px) { .pcalc__row { grid-template-columns: minmax(10rem, 1.4fr) repeat(4, minmax(4.5rem, 1fr)); } .pcalc__sum { font-size: 1rem; } } @media screen and (max-width: 767px) { .pcalc { padding: 1.5rem; } /* шапка таблицы теряет смысл: подписи переезжают в сами ячейки */ .pcalc__row--head { display: none; } .pcalc__row { grid-template-columns: 1fr; gap: 0.75rem; padding: 1.25rem 0; } .pcalc__cell[data-label] { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0.25rem 0.5rem; } /* подпись столбца переезжает в ячейку и отжимает сумму вправо */ .pcalc__cell[data-label]::before { content: attr(data-label); margin-right: auto; color: var(--white-60); font-size: 0.8125rem; } /* годовая сумма третьей на строке не помещается — уводим её под месячную */ .pcalc__year { flex-basis: 100%; margin: 0; text-align: right; } } /* Отзывы партнёров. Блок появляется, только когда в config/partners.php есть настоящие цитаты, — вёрстка ждёт их готовой. */ .previews { display: flex; flex-direction: column; gap: 1.5rem; margin-top: 1rem; } .previews__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.5rem 1.5rem; } .previews__h { font-size: 1.5rem; font-weight: 700; line-height: 1.16667; } .previews__lead { color: var(--white-60); font-size: 0.875rem; line-height: 1.42857; } .previews__items { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; } .preview { background-color: var(--black); border: 0.0625rem solid #ffd7ac40; border-radius: 1rem; padding: 1.5rem; margin: 0; display: flex; flex-direction: column; gap: 1rem; } .preview__quote { margin: 0; font-size: 0.9375rem; line-height: 1.5; color: var(--white-80); } .preview__who { display: flex; flex-direction: column; gap: 0.125rem; border-top: 0.0625rem solid #ffffff1f; padding-top: 1rem; } .preview__name { font-size: 0.9375rem; font-weight: 700; line-height: 1.25; } .preview__role { color: var(--white-60); font-size: 0.8125rem; line-height: 1.38; } .preview__result { margin-top: 0.375rem; color: var(--gold); font-size: 0.8125rem; font-weight: 700; line-height: 1.38; } /* Выбор модели заработка в форме заявки. Радиокнопки нарисованы так же, как чекбокс согласия рядом: свой кружок вместо системного. */ .pmodel { border: 0; margin: 0.75rem 0 0.25rem; padding: 0; display: flex; flex-direction: column; gap: 0.625rem; } .pmodel__legend { padding: 0; margin-bottom: 0.25rem; color: #161616; font-size: 0.875rem; font-weight: 700; line-height: 1.28571; } .pmodel__option { display: flex; align-items: flex-start; gap: 0.625rem; cursor: pointer; } .pmodel__option input { position: absolute; opacity: 0; width: 0; height: 0; } .pmodel__mark { flex: none; width: 1.125rem; height: 1.125rem; margin-top: 0.125rem; border: 0.0625rem solid #16161640; border-radius: 50%; background-color: #fff; } .pmodel__option input:checked + .pmodel__mark { border-color: #161616; box-shadow: inset 0 0 0 0.25rem #fff; background-color: #161616; } .pmodel__option input:focus-visible + .pmodel__mark { outline: 0.125rem solid #161616; outline-offset: 0.125rem; } .pmodel__text { display: flex; flex-direction: column; gap: 0.125rem; } .pmodel__title { color: #161616; font-size: 0.875rem; font-weight: 700; line-height: 1.28571; } .pmodel__note { color: #16161699; font-size: 0.8125rem; line-height: 1.30769; } @media screen and (max-width: 991px) { .previews__items { grid-template-columns: repeat(2, 1fr); } } @media screen and (max-width: 767px) { .previews__items { grid-template-columns: 1fr; } } /* Вторая строка прайса страниц памяти: бесплатный тариф (спека 050) и «Помощь в оформлении». Две колонки вместо трёх — карточки те же .tarif, меняется только сетка. Бесплатный стоит слева и первым в потоке: ноль читается раньше, чем цена соседа, — ради этого тариф и заведён. На узких экранах наследует одноколоночную раскладку .tarifs (≤991px). */ .tarifs.tarifs--duo { grid-template-columns: 1fr 1fr; } /* Кнопки и таблицы обеих карточек — на одном уровне. Описания разной длины иначе сдвигают всё, что под ними, и «Заказать» уезжает ниже «Начать бесплатно». Обе карточки раскладываются по одним и тем же четырём строкам (шапка, цена, кнопка, таблица) через subgrid: высоту каждой строки задаёт та карточка, где она выше. Без поддержки subgrid карточки остаются флексом — ровно как были, ничего не ломается. */ @supports (grid-template-rows: subgrid) { @media screen and (min-width: 62rem) { .tarifs.tarifs--duo { grid-template-rows: auto auto auto 1fr; } .tarifs--duo > .tarif { display: grid; grid-row: span 4; grid-template-rows: subgrid; row-gap: 1.5rem; } } } /* ≤991px базовый .tarifs уже становится одной колонкой, но у модификатора специфичность выше и custom.css грузится позже — правило нужно повторить, иначе на телефоне остались бы две узкие колонки. */ @media screen and (max-width: 991px) { .tarifs.tarifs--duo { grid-template-columns: 1fr; } } /* «Что записано в договоре» — под ценами страниц памяти. Карточка тёмная, как соседние .tarif: блок читается частью прайса, а не сноской под ним. Смысл блока — не успокоить, а дать проверить: у каждого пункта ссылка на конкретный раздел документа. */ .contract { background-color: var(--black); color: var(--white); border-radius: 1.5rem; padding: 2rem; margin-top: 1.5rem; display: flex; flex-direction: column; gap: 1.5rem; } .contract-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.5rem 1.5rem; } .contract-h { font-size: 1.5rem; font-weight: 700; line-height: 1.16667; } .contract-lead { flex: 1 1 20rem; color: var(--white-60); font-size: 0.875rem; line-height: 1.42857; } .contract-items { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; } .contract-item { border: 0.0625rem solid #ffd7ac40; border-radius: 1rem; padding: 1.25rem; display: flex; flex-direction: column; gap: 0.5rem; } .contract-item-h { color: var(--gold); font-size: 1rem; font-weight: 700; line-height: 1.25; } .contract-item-p { flex: 1; color: var(--white-80); font-size: 0.875rem; line-height: 1.42857; } .contract-item-link { align-self: flex-start; color: var(--white-60); font-size: 0.8125rem; line-height: 1.38; text-decoration: underline; } .contract-item-link:hover { color: var(--gold); } .contract-note { color: var(--white-60); font-size: 0.875rem; line-height: 1.42857; border-top: 0.0625rem solid #ffffff1f; padding-top: 1.25rem; } .contract-note a { color: var(--white-80); text-decoration: underline; } .contract-note a:hover { color: var(--gold); } @media screen and (max-width: 767px) { .contract { padding: 1.5rem; } .contract-items { grid-template-columns: 1fr; } } /* Посадочная предложения семьям погибших участников СВО (/geroyam). Своя вёрстка, а не копия главной: страница короткая и ведёт к одному действию. Палитра и кнопки — общие с лендингом. */ .hp-body { background-color: #161616; color: var(--white); margin: 0; font-family: Onest, Arial, sans-serif; } /* Логотип в шапке приходит общим партиалом (класс mpage-svg-logo), а размер ему задаёт .svg-logo вёрстки лендинга — повторяем правило, чтобы не держать вторую копию svg на 6 КБ. */ .nav-logo .mpage-svg-logo { aspect-ratio: 200 / 16; width: 100%; height: auto; } /* ширина как у контейнера лендинга; шапка фиксированная — отступ сверху, чтобы первый экран из-под неё не выглядывал */ .hp-main { max-width: 80rem; margin: 0 auto; padding: 6.5rem 1.5rem 4rem; } .hp-hero { position: relative; overflow: clip; background-image: linear-gradient(#49515d, #1b1e23); border: 0.0625rem solid #ffd7ac40; border-radius: 1.5rem; padding: 3rem 2.5rem; min-height: 30rem; display: flex; flex-direction: column; justify-content: center; } /* Слоёный фон первого экрана: облака, силуэты и затемнение поверх. Разметка и пропорции — из блока героев на главной, поэтому картинки те же самые и второй раз не скачиваются. */ .hp-hero__bg { position: absolute; inset: 0; z-index: 0; overflow: clip; border-radius: inherit; } .hp-hero__clouds { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; display: block; transform: scale(1.08); animation: hp-clouds-drift 90s ease-in-out infinite alternate; } .hp-hero__figures { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 100% 100%; display: block; } /* Затемнение слева направо: у текста контраст, у силуэтов справа — небо. */ .hp-hero__scrim { position: absolute; inset: 0; background-image: linear-gradient(90deg, #10131aeb 0%, #10131ac4 42%, #10131a00 82%); } .hp-hero__content { position: relative; z-index: 1; max-width: 38rem; display: flex; flex-direction: column; align-items: flex-start; gap: 1.25rem; } @keyframes hp-clouds-drift { from { transform: scale(1.08) translate(0, 0); } to { transform: scale(1.16) translate(-3%, -2%); } } @media (prefers-reduced-motion: reduce) { .hp-hero__clouds { animation: none; } } .hp-eyebrow { color: var(--gold); font-size: 0.875rem; letter-spacing: 0.04em; text-transform: uppercase; margin: 0; } .hp-h1 { margin: 0; font-size: 2.75rem; line-height: 1.1; font-weight: 700; text-wrap: balance; } .hp-lead { margin: 0; max-width: 44rem; color: var(--white-80); font-size: 1.0625rem; line-height: 1.5; } .hp-price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.5rem 1.25rem; padding: 1.25rem 0 0; border-top: 0.0625rem solid #ffffff1f; width: 100%; } .hp-price__nums { display: flex; align-items: baseline; gap: 0.75rem; } .hp-price__old { color: var(--white-60); font-size: 1.125rem; text-decoration: line-through; } .hp-price__new { color: var(--gold); font-size: 2rem; font-weight: 700; line-height: 1.1; } .hp-price__note { flex: 1 1 20rem; margin: 0; color: var(--white-60); font-size: 0.875rem; line-height: 1.45; } .hp-cta { margin-top: 0.5rem; } /* якорь из шапки не должен уводить заголовок под фиксированную шапку */ .hp-section { margin-top: 3.5rem; scroll-margin-top: 6rem; } /* «Что входит» и «Как это устроено» — двумя колонками: вместе они один ответ на вопрос «что я получу и что для этого делать». В узкой колонке карточки состава встают друг под друга. */ .hp-two { display: grid; grid-template-columns: 1fr 1fr; gap: 0 3rem; align-items: start; } .hp-two .hp-cards { grid-template-columns: 1fr; } .hp-h2 { margin: 0 0 1.25rem; font-size: 1.75rem; line-height: 1.2; font-weight: 700; } .hp-p { margin: 0 0 1rem; color: var(--white-80); font-size: 1rem; line-height: 1.55; max-width: 44rem; } .hp-p--muted { color: var(--white-60); font-size: 0.9375rem; } .hp-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; } .hp-card { border: 0.0625rem solid #ffd7ac40; border-radius: 1rem; padding: 1.5rem; display: flex; flex-direction: column; gap: 0.75rem; } .hp-card__head { display: flex; flex-direction: column; gap: 0.375rem; } .hp-card__title { font-size: 1.0625rem; font-weight: 700; line-height: 1.25; } .hp-card__price { color: var(--gold); font-size: 1.25rem; font-weight: 700; } .hp-card__price s { color: var(--white-60); font-size: 0.9375rem; font-weight: 400; margin-left: 0.5rem; } .hp-card__note { margin: 0; color: var(--white-60); font-size: 0.875rem; line-height: 1.45; } .hp-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 1rem; } .hp-step { display: flex; gap: 1rem; align-items: flex-start; } .hp-step__num { flex: none; width: 2.25rem; height: 2.25rem; border-radius: 50%; background-color: var(--gold); color: #161616; font-weight: 700; display: flex; align-items: center; justify-content: center; } .hp-step__h { display: block; font-size: 1.0625rem; font-weight: 700; line-height: 1.3; margin-bottom: 0.25rem; } .hp-step__p { margin: 0; color: var(--white-60); font-size: 0.9375rem; line-height: 1.5; max-width: 44rem; } .hp-list { margin: 0 0 1.5rem; padding-left: 1.25rem; display: flex; flex-direction: column; gap: 0.5rem; } .hp-list li { color: var(--white-80); font-size: 0.9375rem; line-height: 1.5; } .hp-note { border: 0.0625rem solid #ffffff1f; border-radius: 1rem; padding: 1.25rem 1.5rem; margin-bottom: 1.25rem; display: flex; flex-direction: column; gap: 0.5rem; } .hp-note__h { color: var(--gold); font-weight: 700; } .hp-note__p { margin: 0; color: var(--white-80); font-size: 0.9375rem; line-height: 1.5; } .hp-note__p a, .hp-qa__a a { color: var(--gold); } /* Блок заявки: светлая карточка партнёрской формы на тёмной странице. Вёрстка и адаптив приходят классами лендинга, здесь — только то, чего в них нет: внутренние отступы (карточка уже контейнера лендинга, поэтому сама себе поля не создаёт), цена и звёздочка вместо ракеты. */ .hp-request__container { padding: 3rem 2.5rem; } .hp-request__icon { width: 2rem; } .hp-offer { display: flex; align-items: baseline; gap: 0.75rem; flex-wrap: wrap; } .hp-offer__old { color: #00000073; font-size: 1.125rem; text-decoration: line-through; } .hp-offer__new { font-size: 2rem; font-weight: 700; line-height: 1.1; letter-spacing: -0.025em; } .hp-qa { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem 2rem; } .hp-qa__q { display: block; font-weight: 700; margin-bottom: 0.375rem; } .hp-qa__a { margin: 0; color: var(--white-60); font-size: 0.9375rem; line-height: 1.5; } .hp-foot { border-top: 0.0625rem solid #ffffff1f; padding: 1.5rem; color: var(--white-60); font-size: 0.8125rem; } .hp-foot__inner { max-width: 80rem; margin: 0 auto; display: flex; flex-wrap: wrap; gap: 0.5rem 1.25rem; } .hp-foot a { color: var(--white-80); } .hp-foot a:hover { color: var(--gold); } @media screen and (max-width: 991px) { .hp-cards { grid-template-columns: 1fr; } .hp-two { grid-template-columns: 1fr; } .hp-qa { grid-template-columns: 1fr; } .hp-h1 { font-size: 2.125rem; } .hp-hero { padding: 2rem 1.5rem; min-height: 0; } .hp-hero__content { max-width: none; } /* узкий экран: силуэты уезжают под текст, поэтому фон становится полосой над содержимым — так же, как блок героев на главной */ .hp-hero__bg { position: relative; order: -1; width: calc(100% + 3rem); height: 14rem; margin: -2rem -1.5rem 1.5rem; border-radius: 1.5rem 1.5rem 0 0; } .hp-hero__clouds { object-position: 50% 45%; } .hp-hero__figures { width: 135%; left: auto; right: 0; } .hp-hero__scrim { background-image: linear-gradient(#10131a00 55%, #1b1e23); } } /* Приписка к блоку героев на главной: суть предложения одной фразой, подробности — на отдельной посадочной. */ .heroes-offer { border-top: 0.0625rem solid #ffffff33; padding-top: 1rem; margin-top: 0.25rem; } .heroes-offer a { color: var(--gold); text-decoration: underline; } /* Блок «ИИ-агент» на главной (секция #agent). Раньше это была голая половина секции «Конструктор» — заголовок и абзац на золотом фоне без единого визуального якоря, без вторых слайдов и карточек, которые есть у соседних блоков. Добавляем три карточки-шага в духе .tarif/ .partner-adv-card: тот же приём «тёмная плашка на золотом градиенте», уже использованный на этой же странице, плюс три новых иконки в конструкции p-ic-*.svg (тот же круг-подложка с золотым градиентом). */ .agent-promo-steps { grid-column-gap: 1.25rem; grid-row-gap: 1.25rem; grid-template-columns: 1fr 1fr 1fr; display: grid; } .agent-promo-step { background-color: #161616e6; border-radius: .75rem; box-shadow: 0 .75rem 1.5rem -.5rem #16161680; flex-flow: column; display: flex; padding: 1.5rem; } .agent-promo-step-icon { width: 2.25rem; margin-bottom: 1rem; flex: none; } .agent-promo-step-h { color: var(--gold); margin-bottom: .375rem; font-size: 1.0625rem; font-weight: 700; line-height: 1.3; } .agent-promo-step-p { color: var(--white-80); font-size: .9375rem; line-height: 1.44444; } @media screen and (max-width: 767px) { .agent-promo-steps { grid-template-columns: 1fr; } }