/* * Шапка поверх контента: прозрачная сверху, с подложкой при прокрутке. * * ЧТО МЕНЯЕТСЯ. До сих пор шапка была липкой, но стояла В ПОТОКЕ: занимала * свои 66 пикселей, и страница начиналась под ней. Теперь она вынута из * потока и лежит поверх — контент начинается от самой верхней кромки, а * первое фото карточки уходит под шапку целиком, как в референсе. Пока * страница не тронута с места, подложки у шапки нет; поехали вниз — она * появляется, чтобы меню не терялось на контенте. * * ПОЧЕМУ ОТДЕЛЬНЫМ ФАЙЛОМ, А НЕ ПРАВКОЙ `header.css`. Шапку, футер и * навигацию ведёт соседний трек, и его файлы мы не трогаем: две руки в одном * файле — это конфликт, который найдётся не сразу и не там. Здесь всё нужное * лежит поверх и легко снимается: удалить файл и его подключение — * поведение вернётся прежним. Когда сосед доберётся до шапки, эти правила * стоит сложить внутрь `header.css` и файл убрать. * * `!important` в двух местах — не небрежность: и подложка шапки, и верхний * отступ `main` заданы шаблоном из базы (инлайновым стилем и стилями блока), * а база ходит только вниз. Перебить их из кода иначе нечем. */ /* Шапка вынута из потока. `left`/`right` обязательны: у вынутого элемента ширина считается по содержимому, а не по родителю. */ .wp-site-blocks > header.wp-block-template-part { position: fixed; top: 0; left: 0; right: 0; } /* Панель администратора тоже прибита к верху экрана, и вынутая шапка о ней не знает — уехала бы под неё. Значения стандартные для WordPress. */ body.admin-bar .wp-site-blocks > header.wp-block-template-part { top: 32px; } @media (max-width: 782px) { body.admin-bar .wp-site-blocks > header.wp-block-template-part { top: 46px; } } /* Подложку красит не сама шапка, а её внутренняя группа — снимаем цвет именно с неё. */ .wp-site-blocks > header.wp-block-template-part > .wp-block-group { background-color: transparent !important; transition: background-color .2s ease; } /* Подложка появляется в двух случаях: страница поехала вниз и мышь зашла на шапку. Второе — про читаемость: на первом экране меню лежит на фотографии, и наведение должно давать опору глазу до нажатия, а не после. */ html.mit-header-solid .wp-site-blocks > header.wp-block-template-part > .wp-block-group, .wp-site-blocks > header.wp-block-template-part:hover > .wp-block-group, .wp-site-blocks > header.wp-block-template-part:focus-within > .wp-block-group { background-color: var(--wp--preset--color--base, #f9f9f9) !important; } @media (prefers-reduced-motion: reduce) { .wp-site-blocks > header.wp-block-template-part > .wp-block-group { transition: none; } } /* Контент начинается от самого верха. Верхний отступ `main` — 5vh инлайном из шаблона: он оставлял место под шапку, которого больше не нужно. */ .wp-site-blocks main { margin-top: 0 !important; } /* И ещё один отступ, уже не инлайновый: между шапкой и первым блоком темы стоит зазор в 1.2rem. Пока шапка занимала место в потоке, он был воздухом между ней и контентом; теперь это просто полоса над первым кадром. */ .wp-site-blocks > header.wp-block-template-part + * { margin-top: 0 !important; } /* ---------- Где место под шапку всё-таки нужно ---------- Карточка товара и главная начинаются большим кадром, и шапка ложится на него по замыслу. А там, где сверху текст — заголовок раздела, документ, — она легла бы прямо на строки. Такой странице отступ возвращаем. Через `padding` первого блока, а не `margin`: фон блока (у каталога он светлый) должен доходить до верхней кромки, иначе под прозрачной шапкой окажется полоса другого цвета. */ /* ЗАПАСНАЯ ВЫСОТА ШАПКИ. Значение уточняет `assets/js/header-height.js`, но он подключён `defer` и в подвале, а старые отступы снимаются `!important` сразу при разборе стилей. До выполнения скрипта переменной не было вовсе, и первая отрисовка корзины, оформления, кабинета, поиска, 404 и документов шла текстом под шапкой — с последующим прыжком на 66 или 132 пикселя. При выключенном JS отступ не появлялся никогда. Ревью, находка M-7. 66px — фактическая высота шапки на площадке, то есть запасной путь, а не магия: скрипт всё равно перепишет переменную по факту, в том числе на мобильной ширине, где шапка ниже. */ :root { --header-h: 66px; } /* Метку ставит `inc/page-offsets.php` по тому же условию, по которому подключается вёрстка каталога. Раньше здесь стоял перечень из трёх классов `body`, и в него не попадали архивы брендов и атрибутов: они получали всю раскладку каталога и нулевой отступ. Ревью, находка M-8. */ body.mit-page-catalog .wp-site-blocks > header.wp-block-template-part + * { padding-top: var(--header-h, 0px) !important; } /* Документам — двойная высота шапки: у них сверху сразу заголовок, и вплотную к меню он читается как часть меню. Список страниц ведёт `inc/page-offsets.php`, а не перечень идентификаторов в стилях: номера страниц у каждой площадки свои. */ /* `!important` — потому что у части шаблонов верхнее поле прописано ИНЛАЙНОМ (`padding-top:0`), а шаблоны живут в базе. Именно на этом правило сначала и не сработало: селектор совпадал, значение считалось, но инлайн был сильнее. */ body.mit-page-doc .wp-site-blocks > header.wp-block-template-part + * { padding-top: calc(var(--header-h, 0px) * 2) !important; } /* ---------- Навигация над герой-фото ---------- Признак страницы и режим ставит `inc/page-offsets.php` классами `body`: `mit-hero-top_dim` — основной, `mit-hero-top_nav` — полное скрытие, `mit-hero-top_scrim` — дымка. Правила всех трёх лежат здесь рядом, чтобы переключение стоило одну строку в PHP. ЧТО ЛЕЧИМ. Шапка сверху прозрачна, и на карточке товара буквы меню ложатся прямо на фотографию: тёмное на тёмном, светлое на светлом. Подложка появляется при прокрутке и наведении — значит и меню должно набирать силу вместе с ней. ТОЛЬКО ДЕСКТОПНОЕ МЕНЮ. Селектор — `_desktop`, и это не придирка: у шапки два меню, второе (`_mobile`) — бургер, и он живёт до 960px, где первого нет вовсе. Правило без `_desktop` цепляло оба, и на узкой ширине пропадал бургер — единственный вход в меню (нашёл Bo). Лого и корзину не трогаем ни в каком режиме: они стоят по краям и с фотографией не спорят. */ /* ОДНО ПОВЕДЕНИЕ НА ВСЕ УСТРОЙСТВА (решение Bo 17.08, находка B2 приёмки). БЫЛО ДВА РАЗНЫХ ПЕРВЫХ ЭКРАНА. Приглушение меню жило в `@media (hover: hover)` — рассуждение честное: там, где наведения нет, приглушённое меню вернуть нечем. Взамен шапке на таких устройствах рисовали ПОСТОЯННУЮ подложку, `@media (hover: none)`. И получалось, что на десктопе кадр открыт от самой кромки, а на телефоне поверх него с первой секунды лежит серая полоса — та самая, по которой узнаётся сайт на WordPress. ТЕПЕРЬ ПРАВИЛО ОДНО: сверху шапка прозрачна везде, подложка приходит с прокруткой (`html.mit-header-solid`). Наведение и фокус остались вторым входом там, где они есть; на телефоне они просто не срабатывают, и это не потеря — прокрутка там первое, что делает человек, и меню набирает силу вместе с подложкой, как и задумано. БУРГЕР ЭТО НЕ ЗАТРАГИВАЕТ: селекторы ниже — только `_desktop`, второе меню шапки живёт до 960px и приглушать его нельзя, это единственный вход в каталог. */ /* Насколько приглушено. Одно число — его и крутить, если захочется тише или заметнее. */ body.mit-hero-top_dim { --mit-hero-nav-dim: 0.2; } body.mit-hero-top_dim .wp-site-blocks > header.wp-block-template-part nav.uc-header__navigation_desktop { opacity: var(--mit-hero-nav-dim, 0.2); transition: opacity 0.2s ease; } /* `visibility`, а не только прозрачность: меню, которого не видно совсем, должно уйти и из порядка обхода клавиатурой, и из-под кликов. Раскладка при этом не двигается — место за собой оно сохраняет. */ body.mit-hero-top_nav .wp-site-blocks > header.wp-block-template-part nav.uc-header__navigation_desktop { opacity: 0; visibility: hidden; transition: opacity 0.2s ease, visibility 0.2s; } /* Те же три условия, что и у подложки, — иначе меню и опора под ним появлялись бы порознь. */ html.mit-header-solid body.mit-hero-top_dim .wp-site-blocks > header.wp-block-template-part nav.uc-header__navigation_desktop, body.mit-hero-top_dim .wp-site-blocks > header.wp-block-template-part:hover nav.uc-header__navigation_desktop, body.mit-hero-top_dim .wp-site-blocks > header.wp-block-template-part:focus-within nav.uc-header__navigation_desktop, html.mit-header-solid body.mit-hero-top_nav .wp-site-blocks > header.wp-block-template-part nav.uc-header__navigation_desktop, body.mit-hero-top_nav .wp-site-blocks > header.wp-block-template-part:hover nav.uc-header__navigation_desktop, body.mit-hero-top_nav .wp-site-blocks > header.wp-block-template-part:focus-within nav.uc-header__navigation_desktop { opacity: 1; visibility: visible; } /* ---------- Запасной вариант: дымка поверх верха кадра ---------- Меню остаётся в полную силу всегда, а читаемость даёт светлая полоса, которая гаснет, когда появляется подложка. Дымка — псевдоэлемент шапки, а не отдельный узел: разметку шапки собирает шаблон из базы, и добавлять туда узел кодом нечем. `z-index` не нужен — псевдоэлемент рисуется раньше содержимого, значит буквы окажутся поверх него сами. */ body.mit-hero-top_scrim .wp-site-blocks > header.wp-block-template-part::before { content: ""; position: absolute; top: 0; right: 0; left: 0; height: 140px; background: linear-gradient( to bottom, var(--wp--preset--color--base, #f9f9f9), rgba(249, 249, 249, 0) ); pointer-events: none; transition: opacity 0.2s ease; } html.mit-header-solid body.mit-hero-top_scrim .wp-site-blocks > header.wp-block-template-part::before, body.mit-hero-top_scrim .wp-site-blocks > header.wp-block-template-part:hover::before, body.mit-hero-top_scrim .wp-site-blocks > header.wp-block-template-part:focus-within::before { opacity: 0; } @media (prefers-reduced-motion: reduce) { body.mit-hero-top_dim .wp-site-blocks > header.wp-block-template-part nav.uc-header__navigation_desktop, body.mit-hero-top_nav .wp-site-blocks > header.wp-block-template-part nav.uc-header__navigation_desktop, body.mit-hero-top_scrim .wp-site-blocks > header.wp-block-template-part::before { transition: none; } }