/* ========================================================================= ОБОЛОЧКА МОДАЛКИ «Контакты — Город» (макет 2023:13109). Здесь только каркас окна: подложка, само окно 1280x986, кнопка закрытия, шапка с ней и служебное скрытие неактивных панелей городов. Содержимое (заголовок, вкладки, панель офиса, карта, карусель сотрудников) размечает и оформляет шаблон компонента news.list/contacts-city — его классы в этом файле не описаны. Разметку подложки и окна строит на лету js/contacts-modal.js вокруг контейнера [data-contacts-modal], который уже стоит на странице. Габариты макета (узел 2023:13109): окно 1280 x 986, белое, padding 16, без рамки и скругления; кнопка закрытия 2063:17660 — 32x32, рамка 1px #000, радиус 5, иконка 24x24, отступы сверху и справа по 16; контент 2023:13111 — 1248 x 912, начинается на y=58, то есть 16 (padding) + 32 (кнопка) + 10 (зазор). ВНЕ МАКЕТА: затемнённой подложки в макете нет — сделана rgba(0, 0, 0, 0.4), это решение вёрстки, а не значение из Figma. ========================================================================= */ /* ------------------------------------------------------------- подложка */ .contacts-modal { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: flex-start; justify-content: center; overflow: auto; padding: 16px 0; background: rgba(0, 0, 0, 0.4); } .contacts-modal[hidden] { display: none; } /* Пока окно открыто, страница под ним не прокручивается. Класс вешает скрипт на и . */ .contacts-modal__body-lock { overflow: hidden; } /* ----------------------------------------------------------------- окно */ .contacts-modal__window { display: flex; flex-direction: column; gap: 10px; width: 1280px; max-width: 100%; min-height: 986px; margin: auto; padding: 16px; background: var(--vine-color-bg, #FFFFFF); font-family: var(--vine-font, "Roboto", "Helvetica Neue", Arial, sans-serif); font-size: var(--vine-fz-text, 18px); line-height: normal; color: var(--vine-color-text, #000000); } /* Шапка 32px: в макете в ней только кнопка закрытия, прижатая вправо. */ .contacts-modal__head { display: flex; flex: 0 0 auto; align-items: center; justify-content: flex-end; width: 100%; height: 32px; } .contacts-modal__close { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; padding: 0; border: 1px solid var(--vine-color-text, #000000); border-radius: var(--vine-radius-btn, 5px); background: var(--vine-color-bg, #FFFFFF); cursor: pointer; } .contacts-modal__close img { display: block; width: 24px; height: 24px; } /* До того как скрипт обернёт контейнер в окно, он не должен мелькать в потоке страницы: класс contacts-modal__content ставит на него скрипт. */ [data-contacts-modal]:not(.contacts-modal__content) { display: none; } /* Контейнер [data-contacts-modal] — фрейм 2023:13111 1248x912. Ширину и внутренние отступы задаёт скрипт этим классом, чтобы шаблон контента не зависел от того, чем его обернули. */ .contacts-modal__content { display: flex; flex: 1 1 auto; flex-direction: column; gap: 16px; width: 100%; padding: 0 16px; } /* --------------------------------------------- переключение городов */ /* Активную вкладку и панель отмечает классом is-active скрипт, а рисует их style.css шаблона contacts-city. Здесь только скрытие неактивных панелей: без него все города показались бы разом. Правило намеренно не назначает display активной панели — её раскладку задаёт шаблон. */ [data-city-panel]:not(.is-active) { display: none; } /* -------------------------------------------------------------- узкий экран */ /* В макете мобильных состояний модалки нет. Ниже 1312px (1280 окна + 2x16 подложки) окно занимает всю доступную ширину, а жёсткая высота снимается, чтобы содержимое не обрезалось. */ @media (max-width: 1311px) { .contacts-modal { padding: 16px; } .contacts-modal__window { width: 100%; min-height: 0; } } @media (max-width: 640px) { .contacts-modal { padding: 8px; } .contacts-modal__window { padding: 8px; } .contacts-modal__content { padding: 0; } }