/*
* Десктопное попап-меню (Elementor Popup ID 37, тот же попап, что и на мобиле).
* Макет: Menu V1.pdf + дамп Figma-CSS.
*
* Всё правится только от 768px: ниже работает mobile-menu.css / .js, который
* прячет родное содержимое попапа и строит свои панели.
*
* @see MOBILE-MENU-SPEC.md
*/
@media (min-width: 768px) {
/*
* Цвет бургера по состояниям шапки.
* Header Light (elementor-1168) всегда стоит на белом фоне, поэтому
* наследуемый белый цвет делает линии невидимыми. Прозрачная шапка
* (elementor-7) остаётся белой поверх героя, а после скролла получает
* тёмный цвет вместе с остальными элементами через ev-header-stuck.
*/
.elementor-location-header.elementor-1168 .top-header .popup-menu .elementor-button,
.elementor-location-header.elementor-1168 .top-header .popup-menu .elementor-button-icon,
body.ev-header-stuck .elementor-location-header.elementor-7 .top-header .popup-menu .elementor-button,
body.ev-header-stuck .elementor-location-header.elementor-7 .top-header .popup-menu .elementor-button-icon {
color: #323439;
}
/* -----------------------------------------------------------------
* Адаптивные размеры (2026-08-28).
*
* Раскладка меню — четыре колонки в ряд: корневая + до трёх выпадающих
* (максимальная глубина ветки «Услуги»). Их суммарная ширина была
* захардкожена (235 + 265×3 = 1030px) и рассчитана на белую панель
* макета шириной 1029px при вьюпорте 1512px. На ноутбучных 1360–1440
* панель уже (950 / 1029), поэтому четвёртая колонка уезжала под
* фотополосу справа и обрезалась.
*
* Числа собраны в переменные: CSS раздаёт их по брейкпоинтам, а
* desktop-menu.js читает `--ev-menu-col` (ширину выпадающих колонок он
* обязан ставить инлайном — SmartMenus пишет туда свою).
* ----------------------------------------------------------------- */
#elementor-popup-modal-37 {
--ev-menu-root: 235px; /* корневая колонка */
--ev-menu-col: 265px; /* шаг выпадающих колонок */
--ev-menu-gutter: 20px; /* поле между последней колонкой и фото */
--ev-menu-item-pad: 20px;/* боковой паддинг пунктов выпадающих колонок */
--ev-menu-photo-min: 160px;
/* Замеры для вертикального центрирования — их ставит JS. */
--ev-menu-h: 476px; /* фактическая высота меню */
--ev-menu-top-occ: 67px; /* низ логотипа */
--ev-menu-bottom-occ: 571px; /* верх блока контактов */
--ev-menu-vgap: 20px; /* минимальный зазор до соседей */
}
/*
* Совсем низкие окна. Панель по вертикали занята логотипом сверху и
* контактами снизу, свободной полосы остаётся мало — дожимаем шаг и
* первого уровня, и выпадающих колонок.
*/
@media (max-height: 700px) {
#elementor-popup-modal-37 .elementor-nav-menu__container > ul.elementor-nav-menu > li > a {
padding-top: 11px;
padding-bottom: 11px;
}
#elementor-popup-modal-37 .elementor-nav-menu ul.sub-menu > li > a.elementor-sub-item {
padding-top: 11px;
padding-bottom: 11px;
}
}
/* -----------------------------------------------------------------
* Белая панель забирает ровно столько, сколько нужно колонкам, фото
* справа отдаёт остаток.
*
* Обе колонки — флекс-дети одного контейнера с процентными ширинами
* (72.5% / 27.5%). Пропорции не трогаем: панели запрещено сжиматься и
* задан `min-width` под реальную ширину колонок. Пока 72.5% хватает —
* раскладка ровно как в макете; когда перестаёт (ноутбучные ширины),
* панель добирает до `min-width`, а недостачу флексбокс снимает с
* фотополосы (у неё `flex-shrink: 1`), вместо того чтобы обрезать
* меню. Ниже `--ev-menu-photo-min` фото не сжимается — дальше в дело
* идут брейкпоинты, уменьшающие сами колонки.
* ----------------------------------------------------------------- */
#elementor-popup-modal-37 .menu-popup-box {
flex-shrink: 0;
min-width: calc(
var(--ev-menu-root) + 3 * var(--ev-menu-col) + var(--ev-menu-gutter)
);
}
#elementor-popup-modal-37 .elementor-element-e3d5e14 {
flex: 0 1 auto;
min-width: var(--ev-menu-photo-min);
}
/*
* Боковые поля пунктов выпадающих колонок.
*
* `border-left-width: 0` — у пунктов дропдауна Elementor держит
* собственную прозрачную границу слева 8px (задел под акцент
* активного пункта, здесь не используется — цвет прозрачный на всех
* состояниях). Она складывалась с паддингом, и текст отходил от
* пунктирного разделителя на 28px против 20px справа — перекос был
* виден на колонках второго порядка.
*/
#elementor-popup-modal-37 ul.sub-menu > li > a {
border-left-width: 0;
padding-left: var(--ev-menu-item-pad);
padding-right: var(--ev-menu-item-pad);
}
/* Ноутбуки 1360–1439: панели хватает только на укороченный шаг. */
@media (max-width: 1439px) {
#elementor-popup-modal-37 {
--ev-menu-root: 215px;
--ev-menu-col: 255px;
}
}
/*
* 1280 и уже: 215 + 255×3 + 20 = 1000 уже не оставляет фото минимума.
* Ужимаем колонки до предела читаемости — самый длинный пункт второго
* уровня («Инвестиции в недвижимость») при 15px занимает 212px, плюс
* боковые паддинги 14+14 = 240px.
*/
@media (max-width: 1319px) {
#elementor-popup-modal-37 {
--ev-menu-root: 205px;
--ev-menu-col: 240px;
--ev-menu-item-pad: 14px;
}
}
/* Ниже 1100px фотополоса уже ничего не показывает — убираем её. */
@media (max-width: 1099px) {
#elementor-popup-modal-37 {
--ev-menu-root: 195px;
--ev-menu-col: 225px;
--ev-menu-item-pad: 12px;
}
#elementor-popup-modal-37 .elementor-element-e3d5e14 {
display: none;
}
#elementor-popup-modal-37 .popup-bg {
padding-left: 30px;
}
}
/*
* Планшет в альбомной. Четыре колонки в 768px не помещаются ни при
* какой ширине, поэтому длинные пункты здесь переносятся на вторую
* строку — это осознанная деградация, а не обрезка.
*/
@media (max-width: 899px) {
#elementor-popup-modal-37 {
--ev-menu-root: 170px;
--ev-menu-col: 175px;
--ev-menu-item-pad: 10px;
--ev-menu-gutter: 10px;
}
#elementor-popup-modal-37 .elementor-nav-menu ul.sub-menu > li > a.elementor-sub-item {
font-size: 14px;
line-height: 19px;
}
}
/* -----------------------------------------------------------------
* Крестик.
*
* Кнопка в разметке была и раньше (и позиция под макет — 34px сверху,
* 388px справа — уже стояла в настройках попапа), но Elementor рисует
* иконку как , а спрайт
* с символом #eicon-close на страницу не попадает. В итоге SVG пустой:
* ничего не видно, а сама кнопка раздувается до дефолтных для
* replaced-элемента 300×150 и ловит клики по пустому месту.
*
* Поэтому SVG прячем и рисуем крестик псевдоэлементами: 32×32 бокс,
* линии 1.4px #323439 — как «Ic/close» в макете.
* ----------------------------------------------------------------- */
#elementor-popup-modal-37 .dialog-close-button {
display: flex;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
padding: 0;
opacity: 1;
cursor: pointer;
/*
* Кнопка лежит в .dialog-widget-content раньше содержимого попапа,
* поэтому .menu-popup-box перекрывал её: крестик не был виден и не
* ловил клики (программный .click() при этом срабатывал — он не
* проверяет попадание). Поднимаем над содержимым.
*/
z-index: 10;
}
#elementor-popup-modal-37 .dialog-close-button svg,
#elementor-popup-modal-37 .dialog-close-button i {
display: none;
}
#elementor-popup-modal-37 .dialog-close-button::before,
#elementor-popup-modal-37 .dialog-close-button::after {
content: "";
position: absolute;
width: 22.6px; /* диагональ квадрата 16×16 из макета */
height: 1.4px;
border-radius: 1px;
background: #323439;
transition: background-color 0.2s ease;
}
#elementor-popup-modal-37 .dialog-close-button::before {
transform: rotate(45deg);
}
#elementor-popup-modal-37 .dialog-close-button::after {
transform: rotate(-45deg);
}
/*
* Фокус показываем цветом самих линий, а не рамкой: Elementor при
* открытии попапа сам ставит фокус на крестик, и :focus-visible
* срабатывает сразу — рамка висела бы вокруг крестика при каждом
* открытии меню, чего в макете нет.
*/
#elementor-popup-modal-37 .dialog-close-button:hover::before,
#elementor-popup-modal-37 .dialog-close-button:hover::after,
#elementor-popup-modal-37 .dialog-close-button:focus-visible::before,
#elementor-popup-modal-37 .dialog-close-button:focus-visible::after {
background: #960a19;
}
#elementor-popup-modal-37 .dialog-close-button:focus-visible {
outline: none;
}
/* -----------------------------------------------------------------
* Типографика по уровням: первый — 18/23, вложенные — 15/21
* (в макете «Heading/H 3.5» и «Text/Body 15»). Было 18px на всех
* уровнях.
* ----------------------------------------------------------------- */
#elementor-popup-modal-37 .elementor-nav-menu ul.sub-menu > li > a.elementor-sub-item {
font-size: 15px;
line-height: 21px;
padding-top: 15px;
padding-bottom: 15px;
}
/* -----------------------------------------------------------------
* Разделители колонок — пунктир rgba(0,0,0,.1) вместо сплошной
* rgba(0,0,0,.24).
*
* Высота у всех разделителей одна и равна высоте основного (левого)
* меню. Разделитель — это border-left самой колонки, поэтому равнять
* надо её бокс.
*
* Было: Elementor подтягивает выпадающую колонку вверх отрицательным
* margin-top в размер одного пункта, а отсчёт идёт от родительского
*
(у него position: relative). В итоге верх колонки зависел от
* того, какой по счёту пункт её открыл, а высота бралась из
* min-height: 385px (в style.css) — разделители шли вразнобой и были
* короче левого меню (448px).
*
* Стало: у
снимаем position: relative, и содержащим блоком для
* абсолютной колонки становится ближайший позиционированный предок —
*
уровнем выше. Тогда top: 0 / height: 100% дают в точности
* геометрию родительского списка, а так как первый уровень равняется
* по корневому
, выравнивание передаётся вглубь по цепочке.
* По горизонтали ничего не меняется: left остаётся auto, то есть
* колонка встаёт в свою статическую позицию — она от содержащего
* блока не зависит.
* ----------------------------------------------------------------- */
#elementor-popup-modal-37 .elementor-nav-menu ul.sub-menu {
border-left-style: dashed;
border-left-color: rgba(0, 0, 0, 0.1);
}
/* -----------------------------------------------------------------
* Текущий пункт — подчёркнут (в макете «Line 4» под активным
* пунктом). text-decoration, а не border, чтобы линия шла по ширине
* текста, а не всей колонки.
* ----------------------------------------------------------------- */
#elementor-popup-modal-37 .elementor-nav-menu li.current-menu-item > a {
text-decoration: underline;
text-decoration-thickness: 1px;
text-underline-offset: 6px;
}
/* -----------------------------------------------------------------
* Плавное открытие и закрытие.
*
* По механике pure-escapes основное меню должно иметь заметную траекторию,
* а не просто менять opacity. Наш попап раскрывается вбок: вся панель
* входит слева направо, а отдельные колонки подменю получают свой короткий
* вход с небольшим сдвигом и fade. Закрытие Elementor делает мгновенно,
* поэтому класс .is-closing вешает desktop-menu.js и придерживает настоящее
* закрытие на время exit-анимации.
* ----------------------------------------------------------------- */
@keyframes evDeskMenuIn {
from { transform: translateX(-100%); }
to { transform: translateX(0); }
}
@keyframes evDeskMenuOut {
from { transform: none; }
to { transform: translateX(-100%); }
}
#elementor-popup-modal-37 .dialog-widget-content {
animation: evDeskMenuIn 650ms cubic-bezier(0.4, 0, 0.2, 1) both;
will-change: transform;
}
#elementor-popup-modal-37 .dialog-widget-content.is-closing {
animation: evDeskMenuOut 420ms cubic-bezier(0.4, 0, 0.2, 1) both;
}
@keyframes evDeskSubmenuIn {
from { opacity: 0; transform: translateX(-28px); }
to { opacity: 1; transform: translateX(0); }
}
@keyframes evDeskSubmenuOut {
from { opacity: 1; transform: translateX(0); }
to { opacity: 0; transform: translateX(-16px); }
}
/*
* SmartMenus всё равно отвечает за display и aria-hidden. Состояния ниже
* добавляет elementor-nav-menu-fix.js после того, как колонка стала видимой,
* поэтому анимация не теряется из-за мгновенного display:none -> block.
*/
#elementor-popup-modal-37 .elementor-nav-menu ul.sub-menu.ev-submenu-opening {
animation: evDeskSubmenuIn 480ms cubic-bezier(0.4, 0, 0.2, 1) both;
will-change: opacity, transform;
}
#elementor-popup-modal-37 .elementor-nav-menu ul.sub-menu.ev-submenu-closing {
animation: evDeskSubmenuOut 360ms cubic-bezier(0.4, 0, 0.2, 1) both;
will-change: opacity, transform;
}
@media (prefers-reduced-motion: reduce) {
#elementor-popup-modal-37 .dialog-widget-content,
#elementor-popup-modal-37 .dialog-widget-content.is-closing {
animation: none;
}
#elementor-popup-modal-37 .elementor-nav-menu ul.sub-menu.ev-submenu-opening,
#elementor-popup-modal-37 .elementor-nav-menu ul.sub-menu.ev-submenu-closing {
animation: none;
}
}
/* -----------------------------------------------------------------
* Ширина колонок. В макете (Frame 121) блок меню — 1000px от левого
* края, колонки по 205px с зазором 30, то есть шаг 235px, и вчетвером
* они занимают почти всю ширину белой панели (она 1029px: от 50 до
* 1079, дальше начинается фото).
*
* Было: ширина колонки подбиралась по её содержимому (196 / 261 / 156),
* колонки жались влево и заканчивались на ~664px.
*
* Ширину выпадающих колонок задаёт JS: SmartMenus пишет width инлайном
* (`width: auto; min-width: 10em`), из таблицы стилей его не перебить.
* ----------------------------------------------------------------- */
#elementor-popup-modal-37 .elementor-nav-menu__container > ul.elementor-nav-menu {
width: var(--ev-menu-root);
}
/* -----------------------------------------------------------------
* Иконки соцсетей в подвале меню прижаты к правому краю белой панели —
* в макете между ними и краем ещё ~120px. Отодвигаем.
* ----------------------------------------------------------------- */
#elementor-popup-modal-37 .elementor-element-69df471 {
padding-right: 110px;
}
/* -----------------------------------------------------------------
* Ритм первого уровня. По макету шаг 68px (строка 23 + по 22.5
* сверху и снизу), но макет нарисован под вьюпорт 1512×982: на
* ноутбучных 720–800px высоты список из семи пунктов занимал 476px и
* упирался в блок контактов. Шаг уменьшен до 55px (2026-08-28, по
* просьбе Алины) — высота строки не изменилась, сократились только
* зазоры между пунктами.
* ----------------------------------------------------------------- */
#elementor-popup-modal-37 .elementor-nav-menu__container > ul.elementor-nav-menu > li > a {
line-height: 23px;
padding-top: 16px;
padding-bottom: 16px;
}
/* -----------------------------------------------------------------
* Нижний блок (контакты) выравниваем по левому краю меню и логотипа.
* У обёртки строки контактов свой паддинг 10px со всех сторон, из-за
* него «ДЛЯ АГЕНТОВ» начинался на 60px против 50px у «Контактов».
* ----------------------------------------------------------------- */
#elementor-popup-modal-37 .elementor-element-7cb83c1 {
padding-left: 0;
}
/* -----------------------------------------------------------------
* Крестик — в правом верхнем углу белой панели, 20px от её краёв.
*
* В настройках попапа он спозиционирован от края экрана
* (`right: 388px`) — числом под фотополосу шириной 361px на вьюпорте
* 1512px. Полоса теперь резиновая, поэтому отступ считаем от её
* фактической ширины: её замеряет desktop-menu.js и кладёт в
* `--ev-menu-photo-w`.
*
* `!important` — позиция крестика приходит инлайном из настроек
* попапа, из таблицы стилей её иначе не перебить.
* ----------------------------------------------------------------- */
#elementor-popup-modal-37 .dialog-close-button {
top: 20px !important;
right: calc(var(--ev-menu-photo-w, 361px) + 20px) !important;
left: auto !important;
}
/* -----------------------------------------------------------------
* Блок меню по вертикали — по центру белой панели (в макете Frame 121
* спозиционирован `top: calc(50% - 441px/2)`).
*
* Само меню — средний из трёх детей флекс-колонки .menu-popup-box
* (логотип / меню / контакты) с justify-content: space-between, поэтому
* его центр определялся высотами соседей и был выше центра панели.
* Вынимаем меню из потока: логотип остаётся сверху, контакты снизу —
* ровно как в макете.
*
* Центрирование ограничено соседями (2026-08-28). Голое
* `top: 50%; translateY(-50%)` при невысоком окне (ноутбучные ~720px)
* заезжало на блок контактов — «Контакты» ложились поверх «ДЛЯ
* АГЕНТОВ». Сверху и снизу панель занята несимметрично (логотип 15+52,
* контакты 113 + 36 нижнего паддинга), поэтому clamp: пока места
* хватает — центр панели, дальше меню прижимается к нижней границе
* свободной полосы, но не ниже логотипа. Высоту меню и границы
* соседей (`--ev-menu-h`, `--ev-menu-top-occ`, `--ev-menu-bottom-occ`)
* замеряет и пишет desktop-menu.js — жёстко зашивать их нельзя,
* высота блока контактов зависит от того, как легли его колонки.
* ----------------------------------------------------------------- */
#elementor-popup-modal-37 .menu-popup-box {
position: relative;
}
#elementor-popup-modal-37 .elementor-element-a1bfd11 {
position: absolute;
left: 0;
top: clamp(
calc(var(--ev-menu-top-occ) + var(--ev-menu-vgap)),
calc(50% - var(--ev-menu-h) / 2),
calc(var(--ev-menu-bottom-occ) - var(--ev-menu-vgap) - var(--ev-menu-h))
);
}
}
/* =====================================================================
* ТЗ ДЕСКТОП 28.08 — ПОПАП-МЕНЮ (пп. 2c, 2d, 2f)
* ===================================================================== */
@media (min-width: 768px) {
/*
* П. 2C — СТРЕЛКА У «УСЛУГИ» ВПРАВО.
*
* Elementor рисует индикатор подменю одним и тем же шевроном вниз
* (`.sub-arrow > svg.e-fas-chevron-down`) на всех уровнях. По макету
* вниз смотреть не должно — поворачиваем на -90° (против часовой:
* ∨ → ›).
*
* Селектор бьёт только по верхнему уровню — `> ul > li > a`. Пункты
* второго уровня («Дизайн путешествий», «Lifestyle-менеджмент»)
* живут в колонке подменю и в этот селектор не попадают.
*/
#elementor-popup-modal-37 .elementor-nav-menu--main > ul.elementor-nav-menu > li > a .sub-arrow svg {
transform: rotate(-90deg);
}
/*
* Перекраска и выравнивание иконок переехали в общий модуль
* assets/css/icon-recolor.css + assets/js/icon-recolor.js: те же
* файлы иконок используются в футере, держать их логику внутри
* стилей меню неправильно.
*/
}