/* ============================================================ HEADER STICKY LIKE SCHEDULE V67 Аналог: schedule names -> sticky + left:0 site header -> sticky + top:0 ============================================================ */ /* ============================================================ САМА ШАПКА ============================================================ */ html body.site-home-modern .topbar{ /* * Ровно тот же принцип, что у названий точек. * Только направление другое. */ position:sticky!important; top:0!important; left:auto!important; right:auto!important; bottom:auto!important; width:100%!important; margin:0!important; /* * Никаких fixed/absolute transform. */ transform:none!important; translate:none!important; /* * Выше карточек, hero и остальных блоков. */ z-index:5000!important; /* * Sticky должен быть самостоятельным слоем. */ isolation:isolate!important; } /* ============================================================ ВАЖНО ДЛЯ STICKY ============================================================ */ /* * В свежем архиве body имел overflow-x:hidden. * На части браузеров это может создавать отдельный * scroll-container и ломать sticky. * * clip скрывает горизонтальный выход, * но НЕ создаёт scroll-контейнер. */ html, html body.site-home-modern{ overflow-x:clip!important; } /* * Вертикальный scroll остаётся у окна браузера. */ html body.site-home-modern{ overflow-y:visible!important; /* * Убираем компенсацию V66, * потому что sticky остаётся в потоке. */ padding-top:0!important; } /* ============================================================ ВНУТРЕННИЙ HEADER GRID ============================================================ */ html body.site-home-modern .topbar > .shell.home-nav-v1{ position:relative!important; top:auto!important; right:auto!important; bottom:auto!important; left:auto!important; margin-top:0!important; margin-bottom:0!important; transform:none!important; translate:none!important; } /* ============================================================ HERO ============================================================ */ /* * HERO является следующим нормальным блоком страницы. * * Так как sticky header остаётся в потоке, * его реальная высота автоматически занимает место. */ html body.site-home-modern .hero.home-hero-v4{ position:relative!important; top:auto!important; right:auto!important; bottom:auto!important; left:auto!important; margin-top:8px!important; padding-top:0!important; transform:none!important; translate:none!important; } /* * Убиваем старое: * margin-top:-108px * padding-top:108px * из light overlay-логики. */ html[data-site-theme="light"] body.site-home-modern .hero.home-hero-v4, body.site-home-modern.site-theme-light .hero.home-hero-v4{ margin-top:8px!important; padding-top:0!important; transform:none!important; translate:none!important; } /* ============================================================ DARK HEADER ============================================================ */ html[data-site-theme="dark"] body.site-home-modern .topbar{ background: rgba(5,5,5,.96)!important; background-image:none!important; color:#f5f5f5!important; border-bottom: 1px solid rgba(255,255,255,.055)!important; box-shadow: 0 7px 24px rgba(0,0,0,.22)!important; backdrop-filter: blur(15px) saturate(120%)!important; -webkit-backdrop-filter: blur(15px) saturate(120%)!important; } /* ============================================================ LIGHT HEADER ============================================================ */ /* * ВАЖНО: * home-light-match-dark-v38.css делает * light .topbar position:absolute. * * Этот блок подключается ПОСЛЕ него * и возвращает sticky. */ html[data-site-theme="light"] body.site-home-modern .topbar{ position:sticky!important; top:0!important; background: rgba(248,248,245,.96)!important; background-image:none!important; color:#111!important; border-bottom: 1px solid rgba(0,0,0,.065)!important; box-shadow: 0 7px 24px rgba(0,0,0,.07)!important; backdrop-filter: blur(15px) saturate(110%)!important; -webkit-backdrop-filter: blur(15px) saturate(110%)!important; } /* ============================================================ LIGHT NAVIGATION ============================================================ */ html[data-site-theme="light"] body.site-home-modern .home-links-v1 > button, html[data-site-theme="light"] body.site-home-modern .home-links-v1 > a, html[data-site-theme="light"] body.site-home-modern .home-links-v1 > button span, html[data-site-theme="light"] body.site-home-modern .home-links-v1 > a span{ color:#111!important; -webkit-text-fill-color:#111!important; opacity:1!important; text-shadow:none!important; } /* * Каталог / город / тема / ЛК. */ html[data-site-theme="light"] body.site-home-modern .home-catalog-v1, html[data-site-theme="light"] body.site-home-modern .home-city-v1, html[data-site-theme="light"] body.site-home-modern .site-theme-toggle-v33, html[data-site-theme="light"] body.site-home-modern .home-account-v1{ color:#111!important; } /* ============================================================ CATALOG DROPDOWN ============================================================ */ /* * Поскольку topbar теперь sticky, * dropdown должен открываться относительно неё. */ html body.site-home-modern .topbar .catalog-panel{ position:absolute!important; top:100%!important; left:0!important; right:0!important; z-index:5100!important; } /* ============================================================ MOBILE ============================================================ */ @media(max-width:980px){ html body.site-home-modern .topbar, html[data-site-theme="light"] body.site-home-modern .topbar, html[data-site-theme="dark"] body.site-home-modern .topbar{ position:sticky!important; top:0!important; } html body.site-home-modern .hero.home-hero-v4{ margin-top:6px!important; padding-top:0!important; } } @media(max-width:620px){ html body.site-home-modern .topbar, html[data-site-theme="light"] body.site-home-modern .topbar, html[data-site-theme="dark"] body.site-home-modern .topbar{ position:sticky!important; top:0!important; } html body.site-home-modern .hero.home-hero-v4{ margin-top:5px!important; padding-top:0!important; } } /* ============================================================ HEADER RAISE V68 ============================================================ */ /* * Убираем лишнюю высоту сверху/снизу. * Шапка становится компактнее и ближе к верхнему краю. */ html body.site-home-modern .topbar > .shell.home-nav-v1{ min-height:76px!important; padding-top:5px!important; padding-bottom:5px!important; } /* * Сам topbar без дополнительной пустоты. */ html body.site-home-modern .topbar{ padding-top:0!important; padding-bottom:0!important; } /* * Лого выравниваем по центру новой компактной высоты. */ html body.site-home-modern .home-logo-v1{ align-self:center!important; margin-top:0!important; margin-bottom:0!important; } /* * Каталог. */ html body.site-home-modern .home-catalog-v1{ align-self:center!important; margin-top:0!important; margin-bottom:0!important; } /* * Центральные ссылки. */ html body.site-home-modern .home-links-v1{ align-self:center!important; margin-top:0!important; margin-bottom:0!important; } /* * Правый блок. */ html body.site-home-modern .home-city-v1, html body.site-home-modern .site-theme-toggle-v33, html body.site-home-modern .home-account-v1{ align-self:center!important; margin-top:0!important; margin-bottom:0!important; } /* * HERO остаётся почти сразу после шапки. */ html body.site-home-modern .hero.home-hero-v4{ margin-top:6px!important; } /* ============================================================ МОБИЛЬНЫЙ ============================================================ */ @media(max-width:980px){ html body.site-home-modern .topbar > .shell.home-nav-v1{ min-height:72px!important; padding-top:4px!important; padding-bottom:4px!important; } } @media(max-width:620px){ html body.site-home-modern .topbar > .shell.home-nav-v1{ min-height:68px!important; padding-top:3px!important; padding-bottom:3px!important; } }