/* CRO-правки поверх Webflow-экспорта. Подключается в ПОСЛЕ luxe-islands.webflow.shared.*.css — переопределения работают за счёт порядка каскада. Сам shared-файл не редактируем: правка потерялась бы при следующей регенерации. */ /* --------------------------------------------------------------------------- H-08 / T-3. Три шага в попапе заявки (.pop-up-wraper.is-callback). Цвет намеренно не задан: у .lead-form_type-about в shared-css нет свойства color и нет CSS-переменной, поэтому список наследует цвет от родителя (body -> var(--base-color-neutral--neutral-darker), #46484d, контраст на белом фоне попапа 8.6:1). currentColor в ::before наследуется оттуда же. --------------------------------------------------------------------------- */ .lead-form_type-steps { margin: 0 0 20px; padding: 0; list-style: none; display: flex; flex-flow: column; gap: 10px; } .lead-form_type-steps li { position: relative; padding-left: 26px; font-size: 15px; line-height: 140%; } .lead-form_type-steps li::before { content: ""; position: absolute; left: 0; top: 6px; width: 14px; height: 14px; border-radius: 50%; background: currentColor; opacity: .28; } @media screen and (max-width: 767px) { .lead-form_type-steps { margin-bottom: 16px; gap: 8px; } .lead-form_type-steps li { font-size: 14px; padding-left: 22px; } } /* --------------------------------------------------------------------------- H-08 / T-5. Планшетный вьюпорт попапа. В shared-css у .lead-form_type_wraper при <=991px стоит height:calc(100vh - 100px) при margin-top:100px. На iOS Safari vh включает адресную строку — низ попапа обрезается, кнопка отправки недоступна. Вилка снизу (min-width:768px) обязательна: при <=767px в shared-css уже задано height:calc(100dvh - 70px) при margin-top:70px, и правило без нижней границы перебило бы его (грузимся позже, специфичность та же) — попап на мобильном стал бы на 30px короче и рассинхронился с margin-top. --------------------------------------------------------------------------- */ @media screen and (min-width: 768px) and (max-width: 991px) { .lead-form_type_wraper { height: calc(100dvh - 100px); } } /* --------------------------------------------------------------------------- Единый вид текста в rich-text попапов (.lead-form_type-rich_text). Эталон — абзац «Наш менеджер свяжется с Вами…»: у него срабатывает базовое правило p{color:neutral-dark;font-size:14px} и p{font-size:16px} при >=1280px. Пункты списка выпадали из этого вида: в shared-css li{font-size:1.2rem} (= 19.2px ниже 1280px) и .lead-form_type-rich_text li{color:neutral} — т.е. крупнее и светлее абзаца. Приводим p/ul/li к параметрам абзаца. --------------------------------------------------------------------------- */ .lead-form_type-rich_text, .lead-form_type-rich_text p, .lead-form_type-rich_text ul, .lead-form_type-rich_text li { color: var(--base-color-neutral--neutral-dark); font-size: 14px; line-height: 1.5; } .lead-form_type-rich_text li { margin-bottom: 6px; } @media screen and (min-width: 1280px) { .lead-form_type-rich_text, .lead-form_type-rich_text p, .lead-form_type-rich_text ul, .lead-form_type-rich_text li { font-size: 16px; } } /* --------------------------------------------------------------------------- NB-3. Блок «Как проходит сделка» (mauritius) + якорь на него в блоке преимуществ. Классы с префиксом cro- — в shared-css их нет, конфликта с регенерацией Webflow не будет. Секция белая: сверху идёт тёмный section_reviews, снизу светло-серый section_best_price. --------------------------------------------------------------------------- */ .section_deal { background-color: var(--base-color-neutral--white); } /* Ссылок на #deal на странице сейчас нет, но id оставлен под цели метрики и прямые ссылки: шапка .navbar-fixed (fixed, 112px на десктопе) перекрыла бы якорь при переходе — компенсируем с запасом. */ #deal { scroll-margin-top: 124px; } .cro-deal_grid { display: grid; grid-template-columns: 1fr 1fr; grid-column-gap: 40px; grid-row-gap: 28px; } .cro-deal_item { display: flex; align-items: flex-start; grid-column-gap: 12px; } .cro-deal_item .bullet-icon { position: relative; top: 6px; } .cro-deal_title { color: var(--base-color-neutral--neutral-darkest); margin-bottom: 6px; font-size: 18px; font-weight: 500; line-height: 130%; } @media screen and (max-width: 991px) { .cro-deal_grid { grid-column-gap: 30px; grid-row-gap: 24px; } .cro-deal_title { font-size: 17px; } } @media screen and (max-width: 767px) { .cro-deal_grid { grid-template-columns: 1fr; grid-row-gap: 20px; } .cro-deal_title { font-size: 16px; } #deal { scroll-margin-top: 84px; } }