/* ========================================================= 3A MENU — CLEAN FINAL - Desktop (mouse hover, >=1201px): "Наши отели" = 2 колонки (10+) - 1101–1200px (проблемная зона): делаем 1 колонку + высокий скролл (как мобилка) - <=1100px: аккордеон + внутренний скролл (все отели) - Hover/tap: только затемнение - Phone icon: трубка (<=1200) ========================================================= */ /* ===================== 0) Premium interaction: only dimming ===================== */ .header__navigation .menu__item > a, .header__navigation .menu__link, .header__navigation .menu__sub.submenu a{ transition: opacity .18s ease !important; -webkit-tap-highlight-color: transparent !important; } @media (hover:hover) and (pointer:fine){ .header__navigation .menu__item > a:hover, .header__navigation .menu__link:hover, .header__navigation .menu__sub.submenu a:hover{ opacity:.65 !important; } .header__navigation .menu__item > a:active, .header__navigation .menu__link:active, .header__navigation .menu__sub.submenu a:active{ opacity:.55 !important; } } @media (hover:none) and (pointer:coarse){ .header__navigation .menu__item > a:active, .header__navigation .menu__link:active, .header__navigation .menu__sub.submenu a:active{ opacity:.60 !important; } } /* ===================== 1) <=1100px: mobile/tablet accordion + inner scroll ===================== */ @media (max-width:1100px){ .header__navigation .menu__item--submenu > .menu__sub.submenu{ display:none !important; position:static !important; } .header__navigation .menu__item--submenu.menu__item--submenu-show > .menu__sub.submenu{ display:block !important; width:calc(100% - 28px) !important; margin:10px 14px 16px !important; padding:12px !important; background:rgba(255,255,255,.08) !important; border:1px solid rgba(255,255,255,.12) !important; border-radius:12px !important; max-height:66vh !important; overflow-y:auto !important; overflow-x:hidden !important; -webkit-overflow-scrolling:touch !important; overscroll-behavior:contain !important; white-space:normal !important; overflow-wrap:anywhere !important; word-break:break-word !important; } .header__navigation .menu__sub.submenu .submenu__item a{ display:block !important; padding:8px 10px !important; border-radius:10px !important; line-height:1.15 !important; background:transparent !important; white-space:normal !important; overflow-wrap:anywhere !important; word-break:break-word !important; } } /* ===================== 2) 1101–1200px: ПРОБЛЕМНОЕ — делаем 1 колонку как мобилка, но выше ===================== */ @media (min-width:1101px) and (max-width:1200px){ /* ВАЖНО: это бургер-оверлей на этих ширинах — делаем поведение как mobile */ .header__navigation .menu__item--submenu > .menu__sub.submenu{ display:none !important; position:static !important; } .header__navigation .menu__item--submenu.menu__item--submenu-show > .menu__sub.submenu{ display:block !important; width:calc(100% - 28px) !important; margin:10px 14px 16px !important; padding:12px !important; background:rgba(255,255,255,.08) !important; border:1px solid rgba(255,255,255,.12) !important; border-radius:12px !important; /* делаем выше, чем на мобилке */ max-height:min(72vh, 640px) !important; overflow-y:auto !important; overflow-x:hidden !important; -webkit-overflow-scrolling:touch !important; overscroll-behavior:contain !important; touch-action:pan-y !important; column-count:1 !important; column-gap:0 !important; white-space:normal !important; overflow-wrap:anywhere !important; word-break:break-word !important; } .header__navigation .menu__sub.submenu .submenu__item a{ display:block !important; padding:8px 10px !important; border-radius:10px !important; line-height:1.15 !important; background:transparent !important; } } /* ===================== 3) REAL DESKTOP dropdown: >=1201px and mouse hover => 2 columns ===================== */ @media (min-width:1201px) and (hover:hover) and (pointer:fine){ .header__top-block:not(.header__top-block--open-menu) .menu__item--submenu > .menu__sub.submenu:has(.submenu__item:nth-child(10)), .js-header__top-block:not(.js-header__top-block--open-menu) .menu__item--submenu > .menu__sub.submenu:has(.submenu__item:nth-child(10)){ column-count:2 !important; column-gap:28px !important; width:min(820px, 96vw) !important; max-width:96vw !important; padding:14px 16px !important; box-sizing:border-box !important; background:#fff !important; border-radius:14px !important; box-shadow: 0 14px 40px rgba(0,0,0,.10), 0 6px 16px rgba(0,0,0,.06) !important; line-height:1.25 !important; background-image:linear-gradient( to right, transparent 49.8%, rgba(0,0,0,.035) 50%, transparent 50.2% ) !important; background-repeat:no-repeat !important; max-height:min(70vh, 560px) !important; overflow-y:auto !important; overflow-x:hidden !important; column-fill:auto !important; opacity:0; visibility:hidden; transform:translateY(10px); pointer-events:none; transition: opacity .25s ease, transform .25s ease, visibility .25s ease; transition-delay:0s,0s,.12s; } .header__top-block:not(.header__top-block--open-menu) .menu__item--submenu:hover > .menu__sub.submenu:has(.submenu__item:nth-child(10)), .header__top-block:not(.header__top-block--open-menu) .menu__item--submenu.menu__item--submenu-show > .menu__sub.submenu:has(.submenu__item:nth-child(10)), .js-header__top-block:not(.js-header__top-block--open-menu) .menu__item--submenu:hover > .menu__sub.submenu:has(.submenu__item:nth-child(10)), .js-header__top-block:not(.js-header__top-block--open-menu) .menu__item--submenu.menu__item--submenu-show > .menu__sub.submenu:has(.submenu__item:nth-child(10)){ opacity:1; visibility:visible; transform:translateY(0); pointer-events:auto; transition-delay:0s; } .header__top-block:not(.header__top-block--open-menu) .menu__item--submenu > .menu__sub.submenu:has(.submenu__item:nth-child(10)) > .submenu__item, .js-header__top-block:not(.js-header__top-block--open-menu) .menu__item--submenu > .menu__sub.submenu:has(.submenu__item:nth-child(10)) > .submenu__item{ break-inside:avoid; -webkit-column-break-inside:avoid; padding:2px 0 !important; } .header__top-block:not(.header__top-block--open-menu) .menu__item--submenu > .menu__sub.submenu:has(.submenu__item:nth-child(10)) a, .js-header__top-block:not(.js-header__top-block--open-menu) .menu__item--submenu > .menu__sub.submenu:has(.submenu__item:nth-child(10)) a{ display:block; padding:7px 10px !important; border-radius:10px !important; line-height:1.15 !important; white-space:normal; } } /* ===================== 4) Phone icon -> handset (<=1200px) ===================== */ @media (max-width:1200px){ .header__contacts-icon.icon.icon-phone{ position:relative !important; width:28px !important; height:28px !important; background:none !important; background-image:none !important; border:0 !important; } .header__contacts-icon.icon.icon-phone::after{ content:none !important; display:none !important; } .header__contacts-icon.icon.icon-phone::before{ content:"" !important; display:block !important; width:22px !important; height:22px !important; background-color:rgba(255,255,255,.95) !important; -webkit-mask:url("data:image/svg+xml;utf8,\ \ \ ") center/contain no-repeat !important; mask:url("data:image/svg+xml;utf8,\ \ \ ") center/contain no-repeat !important; } .header__contacts-phone{ display:inline-flex !important; align-items:center !important; gap:8px !important; } }/* ========================================================= FIX 1101–1200: "Наши отели" как на мобилке 1 колонка + внутренний скролл (всегда видно все отели) ========================================================= */ @media (min-width:1101px) and (max-width:1200px){ /* сам список (ul) делаем скролл-контейнером */ .menu__item--submenu > ul.menu__sub.submenu{ column-count: 1 !important; column-gap: 0 !important; width: min(520px, calc(100vw - 320px)) !important; max-width: calc(100vw - 40px) !important; height: min(70vh, 640px) !important; /* ключевое: height */ max-height: none !important; overflow-y: auto !important; overflow-x: hidden !important; -webkit-overflow-scrolling: touch !important; overscroll-behavior: contain !important; touch-action: pan-y !important; pointer-events: auto !important; /* если вдруг тема добавляет белую карточку/тени — не трогаем, твои стили выше останутся */ } /* пункты компактнее */ .menu__item--submenu > ul.menu__sub.submenu > li.submenu__item{ padding: 0 !important; margin: 0 !important; } .menu__item--submenu > ul.menu__sub.submenu > li.submenu__item > a.submenu__link, .menu__item--submenu > ul.menu__sub.submenu > li.submenu__item > a{ display: block !important; padding: 8px 10px !important; line-height: 1.15 !important; border-radius: 10px !important; background: transparent !important; white-space: normal !important; overflow-wrap: anywhere !important; word-break: break-word !important; }