/* * SMM Radar — стили собственной модалки квиза. * Подключаются на home.blade.php / equipment.blade.php одной строкой. * Зависимостей нет, всё пространство имён под префиксом .smm-quiz*. */ /* ============================================================ * Каркас модалки * ============================================================ */ .smm-quiz__backdrop { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.78); display: flex; align-items: center; justify-content: center; /* Поднимаем выше виджета Jivosite-чата (его jdiv обычно сидит на z-index порядка 2147483640). Берём максимум 32-битного int. Этого мало в одном кейсе: на мобильном Jivo раскладывается в нижнюю плашку (id="jvLabelWrap") с тем же z-index 2147483647 и перекрывает нашу кнопку «Далее». Решаем не z-index'ом (его больше не сделать), а тем, что пока модалка открыта — все топ-уровневые jdiv'ы скрыты, см. правило `html.smm-quiz-open body > jdiv` ниже. */ z-index: 2147483647; padding: 24px; /* Используем сайтовый шрифт Circe из smmradar.webflow.css, чтобы модалка не выбивалась из общей типографики лендинга. */ font-family: Circe, 'Times New Roman', sans-serif; color: #363636; -webkit-font-smoothing: antialiased; animation: smm-quiz-fade-in .2s ease; } /* Webflow глобально ставит { text-transform: uppercase; letter-spacing: 1px; margin-bottom: 10px } — это ломало вид опций и наименований оборудования в модалке. Сбрасываем именно внутри нашего пространства, не задевая остальной сайт. */ .smm-quiz__backdrop label { text-transform: none; letter-spacing: 0; margin-bottom: 0; } /* Пока модалка открыта — прячем виджет Jivosite (см. комментарий у .smm-quiz__backdrop про z-index). Jivo инжектит свои корневые контейнеры прямо в как ; этого достаточно, чтобы ни «развёрнутый» чат, ни мобильная плашка `jvLabelWrap` не лезли поверх модалки. Класс `smm-quiz-open` ставится/снимается в quiz.js: open()/close(). После закрытия модалки Jivo возвращается. */ html.smm-quiz-open body > jdiv { display: none !important; } .smm-quiz__modal { position: relative; background: #fff; /* Совпадает со скруглением внутренних карточек оборудования (.sr_section_equipments_item_wrap, webflow CSS) — единый стиль. */ border-radius: 32px; width: 100%; /* Шире, чем стандарт — нужно для шага с полноформатными карточками оборудования. Применяется ко всем шагам, чтобы при переходах размер модалки не «прыгал» туда-сюда. */ max-width: 1280px; max-height: 90vh; /* Минимальная высота тоже фиксированная: иначе на коротких шагах (количество, тариф) окно схлопывается. 800px ≈ натуральная высота самого высокого шага (выбор оборудования с карточками) — за счёт этого размер модалки не «прыгает» между шагами. */ min-height: 800px; display: flex; flex-direction: column; overflow: hidden; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25); } /* Сохранён для обратной совместимости — фактически no-op, т.к. ширина модалки уже 1280px по умолчанию. */ .smm-quiz__modal--wide { max-width: 1280px; } /* Компактная модалка — для формы контактов и экрана «Спасибо». Меньше базовых 1280×800, чтобы сосредоточить внимание на форме. Размер общий для contacts и thanks, чтобы переход submit → thanks проходил без визуального прыжка модалки. */ .smm-quiz__modal--narrow { max-width: 720px; min-height: 600px; } /* Промежуточный размер — для квиза аренды. У аренды только 2 карточки оборудования (без Уличного) и в целом меньше контента, чем у покупки, так что широкая модалка 1280px смотрелась бы пустой. 1000×700 подходит ровно под 2 карточки + ассистента и сохраняет тот же размер на всех трёх шагах аренды до формы. */ .smm-quiz__modal--medium { max-width: 1000px; min-height: 700px; } .smm-quiz__close { position: absolute; top: 14px; right: 14px; width: 36px; height: 36px; border: none; background: transparent; color: #8b8b8b; cursor: pointer; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; z-index: 2; transition: background .15s, color .15s; } .smm-quiz__close:hover { background: #f7f7f7; color: #363636; } .smm-quiz__body { display: flex; flex: 1; min-height: 0; overflow: hidden; } .smm-quiz__main { flex: 1; min-width: 0; padding: 36px 36px 20px; overflow-y: auto; } .smm-quiz__title { font-size: 22px; font-weight: 700; line-height: 1.3; margin: 0 0 24px; color: #363636; } .smm-quiz__step { padding-bottom: 20px; } /* ============================================================ * Ассистент справа * ============================================================ */ .smm-quiz__assistant { width: 240px; flex-shrink: 0; background: #f7f7f7; padding: 36px 24px; overflow-y: auto; border-left: 1px solid #e4e4e4; } .smm-quiz__assistant-header { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; } .smm-quiz__assistant-avatar { position: relative; width: 56px; height: 56px; border-radius: 50%; /* overflow: hidden НЕЛЬЗЯ — он клипает статус-дот, который должен выходить за границу круга. Картинка сама обрезается border-radius. */ background: #0ec645; color: #fff; display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: 24px; flex-shrink: 0; } .smm-quiz__assistant-avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; display: block; } .smm-quiz__assistant-avatar.is-placeholder { background: linear-gradient(135deg, #0ec645 0%, #07a838 100%); } .smm-quiz__assistant-initials { line-height: 1; } /* Статус-дот «онлайн» — сидит на границе круга в правом-нижнем углу, половиной снаружи. */ .smm-quiz__assistant-status { position: absolute; right: 1px; bottom: 1px; width: 14px; height: 14px; background: #34d058; border: 2px solid #fff; border-radius: 50%; box-sizing: border-box; } .smm-quiz__assistant-name { font-weight: 700; font-size: 15px; } .smm-quiz__assistant-title { font-size: 13px; color: #8b8b8b; } .smm-quiz__assistant-hint { font-size: 14px; line-height: 1.55; color: #363636; } .smm-quiz__assistant-hint a { color: #0ec645; } /* ============================================================ * Футер: прогресс + навигация * ============================================================ */ .smm-quiz__footer { display: flex; align-items: center; gap: 24px; padding: 16px 36px; border-top: 1px solid #e4e4e4; background: #fff; } .smm-quiz__progress { flex: 1; min-width: 0; } .smm-quiz__progress-label { font-size: 13px; color: #8b8b8b; } .smm-quiz__progress-label b { color: #0ec645; } .smm-quiz__progress-bar { margin-top: 8px; height: 4px; border-radius: 2px; background: #f7f7f7; overflow: hidden; } .smm-quiz__progress-bar-fill { height: 100%; background: #0ec645; transition: width .25s ease; } .smm-quiz__nav { display: flex; align-items: center; gap: 12px; } .smm-quiz__nav-hint { font-size: 12px; color: #8b8b8b; } /* ============================================================ * Кнопки * ============================================================ */ .smm-quiz__btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-family: inherit; font-weight: 600; font-size: 15px; line-height: 1; border: 1px solid transparent; border-radius: 32px; cursor: pointer; padding: 12px 22px; transition: background .15s, color .15s, border-color .15s, opacity .15s, transform .1s; } .smm-quiz__btn:disabled { opacity: .4; cursor: not-allowed; } .smm-quiz__btn--primary { background: #0ec645; color: #fff; box-shadow: 0 4px 14px rgba(14, 198, 69, 0.25); } .smm-quiz__btn--primary:not(:disabled):hover { background: #0bb33d; } .smm-quiz__btn--ghost { background: #f7f7f7; color: #363636; border-color: #e4e4e4; padding: 12px 16px; } .smm-quiz__btn--ghost:not(:disabled):hover { background: #ededed; } /* ============================================================ * Экран «Спасибо» * ============================================================ */ /* Thanks-плашка визуально совпадает с компактной модалкой формы контактов (--narrow). Центрируем содержимое по вертикали через justify-content на flex-column модала: контент не «лежит» сверху, а сидит посередине. */ .smm-quiz__modal--thanks { justify-content: center; } .smm-quiz__thanks { padding: 60px 36px; text-align: center; } .smm-quiz__thanks-icon { margin-bottom: 18px; } .smm-quiz__thanks-title { font-size: 26px; margin: 0 0 12px; font-weight: 700; } .smm-quiz__thanks-text { font-size: 16px; line-height: 1.55; margin: 0 auto 28px; max-width: 460px; color: #363636; } /* ============================================================ * Step: image-radio (карточки с картинками) * ============================================================ */ .smm-quiz-image-radio { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; } .smm-quiz-image-radio__card { position: relative; display: flex; flex-direction: column; cursor: pointer; border: 2px solid #e4e4e4; border-radius: 12px; background: #fff; overflow: hidden; transition: border-color .15s, box-shadow .15s; } .smm-quiz-image-radio__card:hover { border-color: #c5e9c9; } .smm-quiz-image-radio__card.is-selected { border-color: #0ec645; box-shadow: 0 4px 18px rgba(14, 198, 69, 0.18); } .smm-quiz-image-radio__check { position: absolute; top: 10px; right: 10px; width: 24px; height: 24px; border-radius: 50%; background: #d9d9d9; display: inline-flex; align-items: center; justify-content: center; transition: background .15s; z-index: 1; } .smm-quiz-image-radio__card.is-selected .smm-quiz-image-radio__check { background: #0ec645; } .smm-quiz-image-radio__image-wrap { aspect-ratio: 4 / 3; background: #f5f5f5; display: flex; align-items: center; justify-content: center; overflow: hidden; } .smm-quiz-image-radio__image { width: 100%; height: 100%; object-fit: cover; } .smm-quiz-image-radio__label { padding: 14px 16px; font-size: 14px; font-weight: 500; color: #363636; border-top: 1px solid #efefef; background: #fff; } /* ============================================================ * Step: equipment-cards (полноформатные карточки оборудования * с главной страницы, обёрнутые в выбираемые «радио»-карточки) * * Внутри каждой карточки — обычный markup .sr_section_equipments_item*, * который автоматически подхватывает стили из webflow CSS. Мы только * добавляем рамку выбора, индикатор-кружок и убираем родной ховер * (поднятие на пиксель, тень — мешали бы рамке выделения). * ============================================================ */ .smm-quiz-equipment { display: grid; /* auto-fit + minmax(MIN, 1fr): сетка сама решает, сколько колонок поместить в доступную ширину (минимум 280px на колонку), каждая занимает 1fr оставшегося места. На покупке (1280 модал, main ~968) — 3 колонки по ~310px, на аренде (1000 модал, main ~688) — 2 колонки по ~335px. Без «дырки» от пустой колонки. Важно: использовать 1fr вместо фиксированного max (например minmax(280, 360)). С фиксированным max Chrome рассчитывает количество колонок по max, а не по min, и в нашем случае выходила только одна колонка вместо двух. */ grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); justify-content: center; gap: 18px; align-items: stretch; } .smm-quiz-equipment__card { position: relative; display: block; cursor: pointer; border: 2px solid #e4e4e4; /* Внутренняя карточка .sr_section_equipments_item_wrap скруглена на 32px (webflow CSS, строка 2810). Внешняя рамка обводки = 32px + 2px border = 34px, чтобы кривые шли ровно одна за другой, без визуального мисматча углов. */ border-radius: 34px; background: #fff; padding: 0; transition: border-color .15s, box-shadow .15s; overflow: hidden; } .smm-quiz-equipment__card:hover { border-color: #c5e9c9; } .smm-quiz-equipment__card.is-selected { border-color: #0ec645; box-shadow: 0 4px 18px rgba(14, 198, 69, 0.18); } .smm-quiz-equipment__check { position: absolute; top: 12px; right: 12px; width: 26px; height: 26px; border-radius: 50%; background: #fff; border: 2px solid #d9d9d9; display: inline-flex; align-items: center; justify-content: center; transition: background .15s, border-color .15s; z-index: 5; } .smm-quiz-equipment__check svg { opacity: 0; transition: opacity .15s; } .smm-quiz-equipment__card.is-selected .smm-quiz-equipment__check { background: #0ec645; border-color: #0ec645; } .smm-quiz-equipment__card.is-selected .smm-quiz-equipment__check svg { opacity: 1; } /* Подгоняем внутреннюю карточку: убираем её собственный hover-transform, растягиваем по ширине обёртки. Webflow ставит .sr_section_equipments_item { width: 32% } для grid-layout на главной — внутри нашей label-обёртки 32% превращается в ~90px и весь контент схлопывается. Принудительно 100%. */ .smm-quiz-equipment .sr_section_equipments_item { box-shadow: none; transform: none !important; margin: 0; width: 100% !important; padding: 0; } /* Убираем двойную тень: своя рамка-выделение у label достаточна. */ .smm-quiz-equipment .sr_section_equipments_item_wrap { box-shadow: none; width: 100%; max-width: none; min-height: 0; } .smm-quiz-equipment .sr_section_equipments_item_image { width: 100%; height: auto; display: block; } /* «Обслуживание» и блок кнопок Купить/Арендовать — не нужны в квизе. */ .smm-quiz-equipment .sr_section_equipments_item_price_description, .smm-quiz-equipment .sr_section_equipments_item_content_buttons { display: none !important; } /* ============================================================ * Step: radio-with-preview (тарифы с превью справа) * ============================================================ */ .smm-quiz-radio-preview { display: grid; grid-template-columns: 1fr 380px; gap: 24px; align-items: start; } .smm-quiz-radio-preview__list { display: flex; flex-direction: column; gap: 10px; } .smm-quiz-radio-preview__row { display: flex; align-items: center; gap: 12px; padding: 14px 18px; border: 1px solid #e4e4e4; border-radius: 32px; cursor: pointer; transition: border-color .15s, background .15s; } .smm-quiz-radio-preview__row:hover { border-color: #0ec645; background: #f7fcf8; } .smm-quiz-radio-preview__row.is-selected { border-color: #0ec645; background: #ecfbef; } .smm-quiz-radio-preview__dot { width: 18px; height: 18px; border: 2px solid #c5c5c5; border-radius: 50%; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; background: #fff; transition: border-color .15s; } .smm-quiz-radio-preview__dot-inner { width: 8px; height: 8px; border-radius: 50%; background: transparent; transition: background .15s; } .smm-quiz-radio-preview__row.is-selected .smm-quiz-radio-preview__dot { border-color: #0ec645; } .smm-quiz-radio-preview__row.is-selected .smm-quiz-radio-preview__dot-inner { background: #0ec645; } .smm-quiz-radio-preview__label { font-size: 15px; font-weight: 500; color: #363636; } .smm-quiz-radio-preview__preview { background: #f5f5f5; border-radius: 12px; aspect-ratio: 1 / 1; display: flex; align-items: center; justify-content: center; padding: 16px; overflow: hidden; position: sticky; top: 0; } .smm-quiz-radio-preview__preview img { max-width: 100%; max-height: 100%; object-fit: contain; } .smm-quiz-radio-preview__preview-placeholder { color: #8b8b8b; font-size: 14px; text-align: center; } /* Все варианты preview сидят в DOM одновременно, виден только .is-active. Это позволяет не пересоздавать с галочками и т.п. при переключении тарифов — иначе webflow loading="lazy" + IntersectionObserver успевают «снова» подгрузить даже закэшированные картинки. */ .smm-quiz-radio-preview__variant { display: none; width: 100%; } .smm-quiz-radio-preview__variant.is-active { display: flex; align-items: center; justify-content: center; width: 100%; } .smm-quiz-radio-preview__variant--placeholder.is-active { display: block; text-align: center; } .smm-quiz-radio-preview__variant-fallback { padding: 24px; border: 1px solid #e4e4e4; border-radius: 16px; color: #363636; font-size: 16px; text-align: center; background: #fff; } /* Когда внутри preview лежит полноразмерная тариф-карточка с главной — снимаем aspect-ratio (карточка сама задаёт свою высоту), убираем фон и padding (у карточки есть собственное оформление). */ .smm-quiz-radio-preview__preview--tariff { background: transparent; aspect-ratio: auto; padding: 0; overflow: visible; } .smm-quiz-radio-preview__preview--tariff .sr_section_tariffs_tabs_content_item_options_item { width: 100% !important; margin: 0; } /* В webflow эти карточки могут плавно «всплывать» через IX2-анимацию; в модалке нам это не нужно — фиксируем opacity и transform. */ .smm-quiz-radio-preview__preview--tariff .sr_section_tariffs_tabs_content_item_options_item, .smm-quiz-radio-preview__preview--tariff .sr_section_tariffs_tabs_content_item_options_item_wrap { opacity: 1 !important; transform: none !important; } /* ============================================================ * Step: radio-with-other (чипы + "Другое...") * ============================================================ */ .smm-quiz-radio-other { display: flex; flex-direction: column; gap: 16px; } .smm-quiz-radio-other__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; } .smm-quiz-radio-other__chip { display: inline-flex; align-items: center; gap: 10px; padding: 12px 18px; border: 1px solid #e4e4e4; border-radius: 32px; cursor: pointer; background: #fff; transition: border-color .15s, background .15s; } .smm-quiz-radio-other__chip:hover { border-color: #0ec645; } .smm-quiz-radio-other__chip.is-selected { border-color: #0ec645; background: #ecfbef; } .smm-quiz-radio-other__dot { width: 16px; height: 16px; border: 2px solid #c5c5c5; border-radius: 50%; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; background: #fff; } .smm-quiz-radio-other__dot-inner { width: 7px; height: 7px; border-radius: 50%; background: transparent; } .smm-quiz-radio-other__chip.is-selected .smm-quiz-radio-other__dot { border-color: #0ec645; } .smm-quiz-radio-other__chip.is-selected .smm-quiz-radio-other__dot-inner { background: #0ec645; } .smm-quiz-radio-other__label { font-size: 15px; font-weight: 500; color: #363636; } .smm-quiz-radio-other__other { width: 100%; padding: 14px 18px; border: 1px solid #e4e4e4; border-radius: 32px; font-size: 15px; font-family: inherit; outline: none; transition: border-color .15s; box-sizing: border-box; } .smm-quiz-radio-other__other:focus { border-color: #0ec645; } /* ============================================================ * Step: date-range (две даты) * ============================================================ */ /* Кастомный date-range picker: два поля «От»/«До» сверху и inline-календарь с выбором диапазона снизу. Заменяет нативный , который на macOS/iOS показывает системный календарь, выпадающий из общего стиля сайта. */ .smm-quiz-date-range { display: flex; flex-direction: column; align-items: center; gap: 20px; } .smm-quiz-date-range__fields { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; width: 100%; max-width: 480px; } .smm-quiz-date-range__field { display: flex; flex-direction: column; gap: 8px; } .smm-quiz-date-range__label { font-size: 18px; color: #363636; font-weight: 600; } .smm-quiz-date-range__input { display: inline-flex; align-items: center; gap: 10px; padding: 14px 18px; border: 1px solid #e4e4e4; border-radius: 12px; font-size: 15px; font-family: inherit; cursor: pointer; background: #fff; color: #363636; transition: border-color .15s, box-shadow .15s; box-sizing: border-box; text-align: left; width: 100%; } .smm-quiz-date-range__input:hover { border-color: #c5e9c9; } .smm-quiz-date-range__input.is-focus { border-color: #0ec645; box-shadow: 0 0 0 3px rgba(14, 198, 69, 0.15); } .smm-quiz-date-range__icon { color: #0ec645; flex-shrink: 0; } .smm-quiz-date-range__placeholder { color: #b8b8b8; } .smm-quiz-date-range__value { color: #363636; font-weight: 500; } /* Сам календарь */ .smm-quiz-date-picker { background: #fff; border: 1px solid #e4e4e4; border-radius: 16px; padding: 18px; width: 100%; max-width: 360px; box-sizing: border-box; } .smm-quiz-date-picker__header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; } .smm-quiz-date-picker__nav { width: 32px; height: 32px; border: none; border-radius: 50%; background: #f7f7f7; color: #363636; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: background .15s, color .15s; } .smm-quiz-date-picker__nav:hover { background: #ecfbef; color: #0ec645; } .smm-quiz-date-picker__title { font-size: 15px; font-weight: 700; color: #363636; } .smm-quiz-date-picker__weekdays, .smm-quiz-date-picker__days { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; } .smm-quiz-date-picker__weekdays { margin-bottom: 6px; color: #8b8b8b; font-size: 12px; text-align: center; } .smm-quiz-date-picker__day { aspect-ratio: 1; border: none; background: transparent; cursor: pointer; border-radius: 50%; font-size: 13px; color: #363636; font-family: inherit; transition: background .15s, color .15s; } .smm-quiz-date-picker__day:hover:not(:disabled):not(.is-from):not(.is-to) { background: #ecfbef; } .smm-quiz-date-picker__day.is-today { font-weight: 700; box-shadow: inset 0 0 0 1px #0ec645; } .smm-quiz-date-picker__day.is-past, .smm-quiz-date-picker__day:disabled { color: #c5c5c5; cursor: not-allowed; } .smm-quiz-date-picker__day.is-in-range { background: #ecfbef; color: #0ec645; border-radius: 0; } .smm-quiz-date-picker__day.is-from, .smm-quiz-date-picker__day.is-to { background: #0ec645; color: #fff; box-shadow: none; } .smm-quiz-date-picker__day--blank { visibility: hidden; cursor: default; } .smm-quiz-date-picker__hint { margin-top: 12px; font-size: 12px; color: #8b8b8b; text-align: center; } /* ============================================================ * Step: contacts-form * ============================================================ */ .smm-quiz-contacts { display: flex; flex-direction: column; gap: 18px; } .smm-quiz-contacts__fields { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 18px; } .smm-quiz-contacts__field { display: flex; flex-direction: column; gap: 6px; } .smm-quiz-contacts__label { font-size: 13px; color: #363636; font-weight: 600; } .smm-quiz-contacts__optional { color: #8b8b8b; font-weight: 400; } .smm-quiz-contacts__input { padding: 13px 18px; border: 1px solid #e4e4e4; border-radius: 32px; font-size: 15px; font-family: inherit; outline: none; transition: border-color .15s; background: #fff; color: #363636; box-sizing: border-box; } .smm-quiz-contacts__input:focus { border-color: #0ec645; } .smm-quiz-contacts__input:disabled { background: #f5f5f5; cursor: not-allowed; } .smm-quiz-contacts__field.has-error .smm-quiz-contacts__input { border-color: #d73a4a; } .smm-quiz-contacts__error { color: #d73a4a; font-size: 12px; } .smm-quiz-contacts__consent { display: flex; align-items: flex-start; gap: 10px; font-size: 13px; color: #5a5a5a; line-height: 1.45; cursor: pointer; } .smm-quiz-contacts__consent input[type="checkbox"] { margin-top: 2px; accent-color: #0ec645; } .smm-quiz-contacts__consent a { color: #0ec645; } .smm-quiz-contacts__submit-error { margin: 0; padding: 12px 16px; background: #fdecec; color: #b03030; border-radius: 12px; font-size: 14px; } .smm-quiz-contacts__submit { align-self: flex-start; min-width: 200px; min-height: 48px; } .smm-quiz-contacts__spinner { display: inline-block; width: 18px; height: 18px; border: 2px solid rgba(255, 255, 255, 0.4); border-top-color: #fff; border-radius: 50%; animation: smm-quiz-spin .8s linear infinite; } /* ============================================================ * Анимации * ============================================================ */ @keyframes smm-quiz-spin { to { transform: rotate(360deg); } } @keyframes smm-quiz-fade-in { from { opacity: 0; } to { opacity: 1; } } /* ============================================================ * Адаптив * * Tablet (≤991px) и ниже — модалка фуллскрин, ассистент уезжает * в верхнюю плашку. Десктоп-режим сохраняем только на широких * экранах, чтобы на iPad-портрете и узких ноутбуках не было * визуально маленькой плавающей модалки. * * Mobile (≤767px) — отдельные правки под телефонную ширину: * карточки оборудования в две колонки без описания/фич, мельче * типографика, формы в одну колонку. * ============================================================ */ /* Десктоп-only центрированная вёрстка формы контактов на компактной модалке (--narrow). На tablet/mobile форма продолжает идти стандартом (двух- или одноколоночная по умолчанию), потому что туда мы её и так сожмём фуллскрином. */ @media (min-width: 992px) { .smm-quiz__modal--narrow .smm-quiz__title { text-align: center; font-size: 26px; margin-bottom: 32px; } .smm-quiz__modal--narrow .smm-quiz-contacts { align-items: center; } .smm-quiz__modal--narrow .smm-quiz-contacts__fields { grid-template-columns: 1fr; max-width: 400px; width: 100%; } .smm-quiz__modal--narrow .smm-quiz-contacts__label { font-size: 18px; } .smm-quiz__modal--narrow .smm-quiz-contacts__consent { justify-content: center; max-width: 400px; } .smm-quiz__modal--narrow .smm-quiz-contacts__submit-error { max-width: 400px; text-align: center; } .smm-quiz__modal--narrow .smm-quiz-contacts__submit { align-self: center; font-size: 18px; padding: 16px 36px; min-height: 56px; } } @media (max-width: 991px) { .smm-quiz__backdrop { padding: 0; } .smm-quiz__modal, .smm-quiz__modal--wide, .smm-quiz__modal--thanks { max-width: 100%; max-height: 100%; height: 100%; /* На фуллскрине отменяем десктопный min-height: 640 — иначе на коротких viewport-ах (например landscape mobile) модалка вылезала бы за экран. */ min-height: 0; border-radius: 0; } .smm-quiz__body { flex-direction: column; } .smm-quiz__assistant { order: -1; width: 100%; border-left: none; border-bottom: 1px solid #e4e4e4; padding: 18px 20px; overflow: visible; } .smm-quiz__assistant-hint { font-size: 13px; } .smm-quiz__close { top: 10px; right: 10px; } } @media (max-width: 767px) { .smm-quiz__main { padding: 20px 20px 16px; } .smm-quiz__title { font-size: 19px; margin-bottom: 18px; } .smm-quiz__footer { padding: 12px 20px; flex-wrap: wrap; } .smm-quiz__nav-hint { display: none; } .smm-quiz-image-radio { grid-template-columns: 1fr; gap: 12px; } /* Карточки оборудования в мобильной вёрстке: 2 в ряду, без описания и блока фич — только картинка, заголовок, цена, чек-индикатор и (на Мобильном) значок «огонёк». */ .smm-quiz-equipment { grid-template-columns: 1fr 1fr; gap: 12px; } .smm-quiz-equipment .sr_section_equipments_item_text, .smm-quiz-equipment .sr_section_equipments_item_features { display: none; } /* Webflow задаёт h2 для заголовка карточки крупным размером — на узких карточках длинное слово «Стационарный» вылезает за правый край. Перенос по слогам разрешаем явно. */ .smm-quiz-equipment .sr_section_equipments_item_title { font-size: 20px; line-height: 1.2; word-wrap: break-word; overflow-wrap: break-word; } .smm-quiz-equipment .sr_section_equipments_item_price { font-size: 18px; } /* Webflow ставит картинке min-height: 230px + object-fit: cover — на узких карточках (≈170px) она скейлится по высоте 230 и сильно обрезается с боков. Сбрасываем минимум, фиксируем аспект 4/3 — так картинка остаётся целой и масштабируется по ширине. */ .smm-quiz-equipment .sr_section_equipments_item_image { min-height: 0; height: auto; aspect-ratio: 4 / 3; object-fit: cover; } .smm-quiz-radio-preview { grid-template-columns: 1fr; } .smm-quiz-radio-preview__preview { aspect-ratio: 16 / 9; position: static; } .smm-quiz-contacts__fields { grid-template-columns: 1fr; } } @media (max-width: 480px) { .smm-quiz-date-range__fields { grid-template-columns: 1fr; } .smm-quiz-date-picker { padding: 14px; } }