/* ========================================================================== MODAL SYSTEM — общий для всех попапов сайта (эпик 12) -------------------------------------------------------------------------- Вход, регистрация, восстановление пароля, поиск, «купить в 1 клик», запрос цены/заказа, обратная связь, подтверждение почты. Раньше вся эта вёрстка жила только в старом /assets/main.css — макета под неё не было ни у одной из 22 страниц редизайна, поэтому она не переехала вместе с остальным сайтом. Логику (JS) не трогаем: assets/main.js как открывал попап добавлением класса is-active на .modal (и is-lock-scroll/ a-modal-is-opened на ), так и продолжает — здесь только вёрстка под тот же контракт классов. ========================================================================== */ .screen { position: fixed; inset: 0; z-index: 1200; /* rgba(9,30,66) — то же самое, что --color-text-primary */ background: rgba(9, 30, 66, 0.32); opacity: 0; visibility: hidden; transition: var(--transition-slow); } .a-modal-is-opened .screen { opacity: 1; visibility: visible; } html.is-lock-scroll, html.is-lock-scroll body { overflow: hidden; } /* --- Оболочка модалки: справа выезжающая панель (по умолчанию) --------- */ .modal { position: fixed; inset: 0; z-index: 1300; display: flex; align-items: center; justify-content: flex-end; opacity: 0; transition: var(--transition-slow); pointer-events: none; } .modal.is-active { opacity: 1; } .modal__content { position: relative; box-sizing: border-box; overflow-y: auto; background: var(--color-white); width: 480px; max-width: 100%; height: 100%; padding: var(--spacing-xl); transform: translate3d(80px, 0, 0); transition: var(--transition-slow); pointer-events: none; } .modal.is-active .modal__content { transform: translate3d(0, 0, 0); pointer-events: all; } /* --- Вариант: диалог по центру (согласие/подтверждение/статья) -------- */ .modal--center { justify-content: center; } .modal--center .modal__content { width: 636px; height: auto; max-height: calc(100vh - var(--spacing-lg)); padding: 42px; transform: scale(0.85); } .modal--center.modal.is-active .modal__content { transform: scale(1); } @media (max-width: 768px) { .modal__content, .modal--center .modal__content { width: 100%; max-width: 360px; max-height: 100%; padding: var(--spacing-md) var(--spacing-sm); transform: translate3d(0, 32px, 0); } .modal--form .modal__content { padding-top: var(--spacing-md); padding-bottom: var(--spacing-sm); } } /* --- Кнопка закрытия --------------------------------------------------- .button--icon3 (common.css) задаёт position:relative и перебивает абсолютное позиционирование — крестик до этой правки стоял не на месте на каждой модалке сайта. */ .modal .modal__x { position: absolute !important; top: var(--spacing-xl); right: var(--spacing-xl); color: var(--color-text-secondary); } @media (max-width: 768px) { .modal .modal__x { top: var(--spacing-md); right: var(--spacing-sm); } } .modal--search .modal__x { display: none; } /* .login-drawer__title (auth.css, эпик 9) используется как заголовок формы входа/восстановления пароля внутри модалки — не имел своего запаса под крестик закрытия, текст упирался в кнопку. */ .modal .login-drawer__title { padding-right: var(--spacing-xxl); } /* --- Заголовок формы внутри модалки (buy1click/order-request/price-request) */ /* Заголовки окон — по общей шкале сайта, вровень с заголовком блока. Раньше здесь стоял токен --font-size-h3 из первоначального макета (28 пикселей): в узкой шторке это было крупнее, чем название самой страницы за ней. */ .modal .form__title { margin: 0; font-family: var(--font-headers); font-weight: var(--heading-weight); font-size: var(--heading-section); line-height: var(--heading-section-lh); color: var(--color-text-primary); } .modal .form__title + .form__items { margin-top: var(--spacing-lg); } @media (max-width: 768px) { .modal .form__title { font-size: var(--heading-section-mobile); } .modal .form__title + .form__items { margin-top: var(--spacing-md); } } .form__description { margin-top: var(--spacing-lg); color: var(--color-text-secondary); } @media (max-width: 768px) { .form__description { margin-top: var(--spacing-md); } } .form__items { display: grid; } @media (min-width: 769px) { .form__items { margin: var(--spacing-lg) 0; row-gap: var(--spacing-xl); } } @media (max-width: 768px) { .form__items { row-gap: var(--spacing-lg); } } /* --- Диалог согласия/подтверждения: заголовок, текст, успех/ошибка ---- */ .modal__heading { font-family: var(--font-headers); font-weight: var(--heading-weight); font-size: var(--heading-section); line-height: var(--heading-section-lh); padding-right: var(--spacing-xxl); color: var(--color-text-primary); } .modal__heading + .modal__text { margin-top: var(--spacing-sm); font-size: var(--font-size-text-l); line-height: var(--line-height-text-l); color: var(--color-text-secondary); } @media (max-width: 768px) { .modal__heading { font-size: var(--heading-section-mobile); padding-right: 56px; } } .modal.failed .modal__success { display: none; } .modal__failure { display: none; } .modal.failed .modal__failure { display: block; } .modal__buttons-wrapper .button { display: inline-flex; justify-content: center; width: 100%; } @media (min-width: 769px) { .modal__buttons-wrapper .button:not(:first-child) { margin-top: var(--spacing-sm); } } @media (max-width: 768px) { .modal__buttons-wrapper { display: flex; gap: var(--spacing-xs); padding-top: var(--spacing-sm); margin-top: var(--spacing-sm); border-top: 1px solid var(--color-border); } } /* --- Поле формы с иконкой: buy1click/order-request/price-request ------ Отдельная от .contacts-form__*/.auth-input систем — те уже были переверстаны раньше под свои страницы, эта обслуживает всплывающие формы и переиспользует контракт классов, который уже был в разметке (.input/.input__wrapper/.input--with-icon), просто без стилей. */ .input { position: relative; } .input label { display: block; margin-bottom: var(--spacing-xs); font-size: var(--font-size-text-m); line-height: 1.5; color: var(--color-text-primary); } .input input, .input textarea { width: 100%; box-sizing: border-box; border: var(--input-border-width) solid var(--color-border); padding: var(--input-padding); font-family: var(--font-body); font-size: var(--font-size-text-m); color: var(--color-text-primary); background: var(--color-white); outline: none; transition: var(--transition-slow); } @media (max-width: 768px) { .input input, .input textarea { padding: var(--input-padding-mobile); } } .input input::placeholder, .input textarea::placeholder { color: var(--color-placeholder); } .input input:focus, .input textarea:focus { border-color: var(--color-accent); } .input textarea { min-height: 120px; resize: vertical; } .input__wrapper { position: relative; display: block; } .input--with-icon .input__wrapper svg { position: absolute; right: var(--input-padding); top: 24px; width: 24px; height: 24px; color: var(--color-text-secondary); pointer-events: none; } @media (max-width: 768px) { .input--with-icon .input__wrapper svg { top: 16px; } } .input__error-message { display: none; margin-top: var(--spacing-xs); font-size: var(--font-size-text-s); line-height: 1.3; color: var(--color-error); } .input input.just-validate-error-field, .input textarea.just-validate-error-field { border-color: var(--color-error); } .input .just-validate-error-field ~ .input__error-message, .input .just-validate-error-field + .input__error-message { display: block; } /* JustValidate кладёт текст ошибки в свой .just-validate-error-label — на всплывающих формах он не используется (эти поля без data-rules), но на всякий случай не даём ему остаться неоформленным */ .just-validate-error-label { display: block; margin-top: var(--spacing-xs); font-size: var(--font-size-text-s); color: var(--color-error); } /* --- Чекбокс согласия --------------------------------------------------- */ .input--checkbox label { display: flex; align-items: flex-start; gap: var(--spacing-xs); margin-bottom: 0; font-size: var(--font-size-text-s); line-height: 1.4; color: var(--color-text-secondary); cursor: pointer; } .input--checkbox input[type="checkbox"] { position: absolute; width: 0; opacity: 0; pointer-events: none; } .input__icon { position: relative; flex-shrink: 0; margin-top: 2px; width: 20px; height: 20px; border: var(--input-border-width) solid var(--color-border); transition: border-color var(--transition-default); } .input__icon::after { content: ""; position: absolute; inset: 3px; background: var(--color-accent); opacity: 0; transition: opacity var(--transition-default); } .input--checkbox input:checked + .input__icon { border-color: var(--color-accent); } .input--checkbox input:checked + .input__icon::after { opacity: 1; } .input__text { line-height: 1.4; } /* --- Модалка поиска: только оболочка, без вёрстки самой выдачи -------- Выдача умного поиска (bx_smart_searche/.bx_item_block*) до сих пор висит на старом /assets — это отдельная задача, не входит в эпик 12 (см. _epics/SCOPE-modals-and-orphan-pages.md). */ /* Поле-приманка для роботов: человеку его не видно и клавишей до него не дойти (tabindex=-1 в разметке), а робот, заполняющий подряд всё, что нашёл, его заполнит — и заявка до CRM не доедет. display:none не годится: его умеют пропускать. См. local/components/nl/form.lead/fields.php. */ .form-trap { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; } .modal--search .modal__content { display: flex; flex-direction: column; height: 100%; } .modal__search-wrapper { display: flex; align-items: flex-start; gap: var(--spacing-sm); } .modal__search-wrapper .button { flex-shrink: 0; } .modal__search-wrapper .input { flex: 1; } /* --- Подтверждение почты (message-verification) ------------------------ Контент (иконка + подсказка) переехал с уже готового, но нигде не подключённого .verify-popup (см. отчёт эпика) на реальные, рабочие классы модалки. */ .modal--message-verification .modal__content { text-align: center; } .modal--message-verification .modal__icon { display: flex; align-items: center; justify-content: center; margin: 0 auto var(--spacing-sm); width: 72px; height: 72px; border-radius: var(--radius-round); background: var(--color-accent-bg); color: var(--color-accent); } .modal--message-verification .modal__hint { margin-top: var(--spacing-md); padding-top: var(--spacing-md); border-top: 1px solid var(--color-border); text-align: left; } .modal--message-verification .modal__hint-label { font-weight: 600; color: var(--color-text-primary); } .modal--message-verification .modal__hint-steps { margin: var(--spacing-xs) 0 0; padding-left: 20px; color: var(--color-text-secondary); } .modal--message-verification .modal__hint-steps li { margin-bottom: 4px; } /* Окно «Товар в корзине». Его рисует не наша разметка, а BX.PopupWindow из скрипта карточки товара — своей вёрстки у него нет, поэтому приводим к общему виду здесь. Кнопки внутри — наши обычные .button, их скрипт карточки создаёт сам. */ .popup-window { border: none; border-radius: var(--radius-md, 8px); box-shadow: 0 12px 40px rgba(20, 20, 40, .18); font-family: inherit; } .popup-window .popup-window-titlebar { padding: 18px 24px 0; border: none; background: none; font-size: 18px; font-weight: 600; color: var(--color-text-primary); } .popup-window .popup-window-content { padding: 16px 24px 8px; } .popup-window .popup-window-buttons { display: flex; gap: 12px; padding: 8px 24px 22px; background: none; border: none; } /* ========================================================================== ОКНО «КОНСУЛЬТАЦИЯ МЕНЕДЖЕРА» Форма собрана на общих классах .input, поэтому здесь только три вещи, которых в общем слое нет: поле товара (его не редактируют), поле комментария пониже обычного и плашка согласия. ========================================================================== */ /* Товар подставляется из кнопки и не редактируется. Поэтому не поле ввода, а плашка: длинные названия вроде «Межсетевой экран Cisco FPR4225-ASA-K9» в строку не влезают, а в плашке переносятся целиком. Рамка и поля — как у обычного поля формы, чтобы блок читался частью формы, а не выпадал из неё. */ .consult-product__label { display: block; margin-bottom: var(--spacing-xs); font-size: var(--font-size-text-m); line-height: 1.5; color: var(--color-text-primary); } .consult-product__value { border: var(--input-border-width) solid var(--color-border); padding: var(--input-padding); background: var(--color-bg-secondary); font-family: var(--font-body); font-size: var(--font-size-text-m); line-height: 1.4; color: var(--color-text-secondary); overflow-wrap: anywhere; } @media (max-width: 768px) { .consult-product__value { padding: var(--input-padding-mobile); } } /* Комментарий необязательный — не занимаем им пол-окна. */ .consult-comment textarea { min-height: 96px; } /* Плашка согласия — тот же компонент и то же соглашение, что в оформлении заказа, поэтому и вид повторяем оттуда (sale.order.ajax/telecomo/style.css, блок [data-bx-user-consent]): строка в две колонки, мелкий вторичный текст, акцентная галочка. Привязка к [data-lead-form], а не к классу окна: форма заявки одна и та же и в окнах каталога, и в блоках на главной, в вопросах и на контактах (компонент nl:form.lead). */ [data-lead-form] [data-bx-user-consent] { display: flex; align-items: flex-start; gap: 8px; margin: 0; cursor: pointer; font-family: var(--font-body); font-size: 13px; line-height: 1.45; color: var(--color-text-secondary); } [data-lead-form] [data-bx-user-consent] input[type="checkbox"] { width: auto; margin: 2px 0 0; padding: 0; border: none; flex-shrink: 0; accent-color: var(--color-accent); } [data-lead-form] [data-bx-user-consent] a { color: var(--color-accent); } /* Ошибку по согласию общий обработчик форм вешает на сам чекбокс, а он тут мелкий и её не видно. Подсвечиваем плашку целиком. */ [data-lead-form] [data-bx-user-consent]:has(.just-validate-error-field) { color: var(--color-error); } [data-lead-form] [data-bx-user-consent] input.just-validate-error-field { outline: 2px solid var(--color-error); outline-offset: 2px; }