/* Start:/local/templates/vine/css/contacts-page.css?17873133511934*/ /* Страница «Контакты» (макет 2011:18486) — блоки, у которых нет своего компонента: заголовок, вводный текст, реквизиты и «Для СМИ». Секции с компонентами описаны в style.css своих шаблонов: news.list/contacts-offices, form.result.new/contacts, subscribe.edit/contacts-subscribe. Кегли заголовков пишутся с `.vine-main`, иначе общее правило `.vine-h2, .vine-main h2` перебивает макетное значение. */ .vine-main .contacts-title { margin: 0 0 var(--vine-gap); font-size: 48px; font-weight: 400; line-height: normal; } .contacts-intro { max-width: 1248px; } .contacts-intro p { margin: 0; font-size: 18px; line-height: normal; color: #000; } /* --------------------------------------------- Реквизиты (2011:18608) */ .contacts-requisites { display: flex; flex-direction: column; gap: 16px; align-items: flex-start; max-width: 1248px; } .vine-main .contacts-requisites__title { margin: 0; font-size: 40px; font-weight: 400; line-height: normal; } .contacts-requisites__body { display: flex; flex-direction: column; gap: 16px; align-items: flex-start; width: 100%; } .contacts-requisites__body p { margin: 0; font-size: 18px; line-height: normal; color: #000; } /* ---------------------------------------------- Для СМИ (2023:9599) */ .contacts-media { display: flex; flex-direction: column; gap: 16px; align-items: flex-start; max-width: 1248px; } .vine-main .contacts-media__title { margin: 0; font-size: 40px; font-weight: 400; line-height: normal; } .contacts-media__links { display: flex; gap: 32px; align-items: flex-start; width: 100%; } .contacts-media__links a { font-size: 18px; line-height: normal; color: #0077ff; text-decoration: underline; } /* End */ /* Start:/local/templates/vine/css/contacts-modal.css?17873146455499*/ /* ========================================================================= ОБОЛОЧКА МОДАЛКИ «Контакты — Город» (макет 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; } } /* End */ /* Start:/local/templates/vine/components/bitrix/news.list/contacts-offices/style.css?17873154031502*/ /* Карточки офисов на «Контактах» (макет 2011:18510). Сетка 2 колонки, gap 16; карточка — подложка #C4C4C4, радиус 8, padding 8. */ .contacts-offices { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; max-width: 1248px; } .contacts-offices__card { display: flex; flex-direction: column; gap: 16px; align-items: flex-start; padding: 8px; border-radius: 8px; background: #c4c4c4; } .vine-main .contacts-offices__city { margin: 0; width: 100%; font-size: 28px; font-weight: 700; line-height: normal; color: #000; } .contacts-offices__map { display: block; width: 100%; height: 167px; object-fit: cover; border: 1px solid #000; background: #fff; } /* Состояние «схемы проезда ещё нет»: габариты макета сохраняются. */ .contacts-offices__map--empty { display: flex; align-items: center; justify-content: center; font-size: 18px; line-height: normal; color: #c4c4c4; box-sizing: border-box; } /* Кнопка нарисована ссылкой (макет 2011:18525): открывает модалку города, поэтому это