/* Скип-линк для клавиатуры: вне экрана, пока не в фокусе — шапка fixed, без него Tab уводит через всё меню при каждой загрузке страницы. */ .skip-link { position: absolute; top: -100px; left: 16px; z-index: 100; padding: 12px 20px; background: #101828; color: #fff; border-radius: 8px; text-decoration: none; transition: top 0.2s ease-out; } .skip-link:focus { top: 16px; } .nav { position: fixed; top: 0; left: 50%; width: 100%; transform: translateX(-50%); padding-left: 25px; padding-right: 25px; /* .nav — свой стек-контекст (position+z-index), поэтому что бы ни было прописано ВНУТРИ (мега-панель, попап бургера — их z-index работают только друг против друга), снаружи вся .nav целиком сравнивается как единый слой с соседями по документу. На Главной у .tabs (пилюли-фильтры в hero, new_home.css) тоже был z-index:3 — при равенстве побеждает тот, кто позже в DOM, то есть .tabs, и мобильное меню/мега-панель оказывались под ним. Значение поднято настолько, чтобы точно перебивать контент страниц (максимум там — 3), но остаться ниже реальных модалок (попап заявки z-index:5, полноэкранный просмотр картинки z-index:15). */ z-index: 6; } .nav.active { background: rgba(236, 241, 246, 0.80); } .nav__wrapper { max-width: 1920px; width: 100%; height: 96px; margin: 0 auto; display: flex; justify-content: space-between; align-items: center; } .nav__logo-wrapper { display: flex; gap: 24px; } .logo__img { width: 115px; height: auto; flex-shrink: 0; cursor: pointer; position: relative; top: 4px; } .logo__slogan { width: 122px; font-family: 'PantonExtraBold'; color: #081A32; font-size: 10px; font-weight: 900; line-height: 110%; /* 11px */ letter-spacing: 0.2px; text-transform: uppercase; margin-top: 8px; } @media (max-width: 660px) { .logo__img { top: -1px; } .nav__wrapper { height: 63px; } .nav__burger-wrapper { width:40px !important; height:40px !important; } .nav__phone-wrapper { height: 40px !important; width: 40px !important; } .popup__burger { margin-top:63px; } .popup__burger__content { margin-top:0px !important; } } .nav__main { position: relative; z-index: 4; padding-left: 24px; padding-right: 24px; height: 48px; max-width: 926px; width: 100%; display: flex; align-items: center; justify-content: space-between; background: rgba(255, 255, 255, 1); border-radius: 32px; } .nav__list { width: 100%; display: flex; align-items: center; justify-content: space-between; } .nav__item { position: relative; } .nav__link { display: flex; align-items: center; color: #081A32; font-size: 16px; font-style: normal; font-family: 'Panton', serif; font-weight: 600; line-height: 110%; /* 17.6px */ } .nav__item:hover .nav__link, .nav__link[aria-current="page"] { color: #D7171F; } .nav__item.is-current > .nav__link { color: #D7171F; } .nav__item.is-current > .nav__link::before { content: ''; display: block; position: absolute; background-color: #D7171F; border-radius: 4px 4px 0px 0px; width: 100%; height: 2px; top: 31px; } .nav__item--parent { padding-right: 8px; display: flex; align-items: center; gap: 4px; } /* Кнопка-стрелка отдельно от ссылки: раньше стрелка была псевдоэлементом на самой , и на мобильном тап по ней одновременно уводил со страницы. */ .nav__toggle { display: flex; align-items: center; justify-content: center; width: 16px; height: 16px; color: #081A32; transition: transform .2s ease, color .2s ease; } .nav__item--parent.is-open .nav__toggle, .nav__item--parent:focus-within .nav__toggle { color: #D7171F; } /* Стрелка НЕ переворачивается при открытии — как на боевом: остаётся остриём вниз и только краснеет вместе с текстом. Переворот стоял здесь как индикация состояния, но выглядел лишним движением рядом с эталоном. */ @media (prefers-reduced-motion: reduce) { .nav__toggle { transition: none; } } /* Выпадающая панель. Геометрия снята с боевого сайта (.sub-menu.active в его header.css): 240px, скругление 12, паддинг 10 сверху и снизу, шаг 20 между пунктами, отступ 16 слева, та же тень. Панель прижата к левому краю пункта — не центрируется под ним. Здесь стояла мега-панель на 908px: три колонки по 260 с gap 40, притянутые к центру через left: 50% + translateX(-50%). Она расползалась в обе стороны от пункта и читалась плитой поверх страницы, тогда как на боевом это узкая карточка. Вместе с раскладкой ушли и заголовки колонок (.nav__col-title): колонки собирались по направлениям, а посадочных на направления нет — заголовок вёл в никуда. Скрыта атрибутом hidden, не height: 0, — так она не остаётся в порядке табуляции и не находится поиском по странице. Боевой прячет высотой, и это ровно тот случай, где повторять за ним не нужно. */ .nav__panel { position: absolute; /* 27px от низа строки пункта — замер живого прода (панель y:84 при низе текста 57). С 12px панель прилипала к шапке. */ top: calc(100% + 27px); left: 0; z-index: 5; width: 240px; border-radius: 12px; background: #FFF; box-shadow: 0px 15px 20px 0px rgba(0, 0, 0, 0.05); } .nav__panel[hidden] { display: none; } .nav__panel-inner { padding: 10px 0; } /* Появление: 160ms прозрачности со сдвигом на 8px. Прежде панель включалась голым hidden — возникала мгновенно и без связи с пунктом, от которого раскрылась. */ .nav__panel { animation: nav-panel-in .16s ease-out; } @keyframes nav-panel-in { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: translateY(0); } } @media (prefers-reduced-motion: reduce) { .nav__panel { animation: none; } } /* Список пунктов. Прежде .nav__drop-item ложился прямо в .nav__cols с display: flex, и «ПО» раскрывалось горизонтальным рядом вместо столбика: правило .nav__panel--drop .nav__col-list не совпадало ни с чем, потому что на втором уровне такого