/*
* 3-рівневе мега-меню "ОБЕРІТЬ КАТЕГОРІЮ" на головній — порт
* структури/поведінки з exist.ua (docs/refs/exist-ua-catalog-menu.md),
* власний файл (не чіпає vendor style.css), підключається ПІСЛЯ нього.
* Усе меню (усі 3 колонки) прихован за замовчуванням, з'являється на всю
* ширину вікна браузера при наведенні/фокусі на кнопку "ОБЕРІТЬ
* КАТЕГОРІЮ" — детальніше в коментарі над `.dropdown__categories--menu`
* нижче. Колонка 1 (1-й рівень) — фіксованої ширини список ліворуч;
* колонка 2 (2-й рівень) і колонка 3 (сітка 3-го рівня з іконками) —
* праворуч, у спільній зоні `.catmenu__panel2-stack`. Яка саме
* підкатегорія/панель активна — вирішує category-menu.js (hover-intent з
* grace-period, класи `.hoverintent`/`.is-hover-active`), а чистий CSS
* `:has(:hover)` (нижче, `:not(.hoverintent)`-правила) лишається no-JS
* fallback.
* Кольори/переходи — лише через CSS-змінні теми (style.css :root), без
* хардкод-hex; та сама токен-логіка, що вже застосована в усій темі.
*/
/*
* Кастомний скролбар + фікс "дрижання"/стрибків для всіх трьох
* прокручуваних зон (колонка 1, колонка 2, сітка колонки 3) — бага-репорт
* власника. `scrollbar-gutter: stable` резервує місце під смугу
* прокрутки заздалегідь, тож вона не з'являється/зникає "стрибком", коли
* список стає/перестає бути високим за контент. `overscroll-behavior:
* contain` — це і є фікс "скрол блокує переміщення курсора": без нього
* прокрутка списку до кінця "перетікає" на прокрутку сторінки позаду
* мега-меню (класичний scroll chaining), що і відчувається як ривок.
* Колір смуги — лише токенами теми (var(--secondary-color)/var(--bg-
* offwhite-color)), `scrollbar-width: thin` — Firefox, `::-webkit-
* scrollbar*` — Chrome/Safari/Edge; тач-пристрої скролять нативним
* інерційним скролом без додаткових властивостей.
*/
.catmenu__list,
.catmenu__panel2-col2,
.catmenu__panel3 {
overscroll-behavior: contain;
scrollbar-gutter: stable;
scrollbar-width: thin;
scrollbar-color: var(--secondary-color) var(--bg-offwhite-color);
}
.catmenu__list::-webkit-scrollbar,
.catmenu__panel2-col2::-webkit-scrollbar,
.catmenu__panel3::-webkit-scrollbar {
width: 8px;
}
.catmenu__list::-webkit-scrollbar-track,
.catmenu__panel2-col2::-webkit-scrollbar-track,
.catmenu__panel3::-webkit-scrollbar-track {
background: var(--bg-offwhite-color);
}
.catmenu__list::-webkit-scrollbar-thumb,
.catmenu__panel2-col2::-webkit-scrollbar-thumb,
.catmenu__panel3::-webkit-scrollbar-thumb {
background: var(--secondary-color);
border-radius: 4px;
}
.catmenu__list {
list-style: none;
margin: 0;
padding: 0.6rem 0;
flex: 0 0 280px;
overflow-y: auto;
border-right: 1px solid var(--border-color);
}
.catmenu__item {
position: relative;
}
.catmenu__item:not(:last-child) {
border-bottom: 1px solid var(--border-color);
}
.catmenu__link,
.catmenu__link2,
.catmenu__link3 {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.8rem;
color: var(--body-text-color);
text-decoration: none;
cursor: pointer;
}
.catmenu__link {
padding: 1rem 1.7rem;
line-height: 2rem;
font-size: 1.5rem;
}
.catmenu__label {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
/* Обгортка іконка+текст 1-го рівня — окремий флекс-блок ЗБОКУ від стрілки,
щоб `justify-content: space-between` на .catmenu__link і далі ділив
простір рівно між двома групами (контент / стрілка), а не трьома
(іконка / текст / стрілка), інакше з'явився б зайвий розрив між іконкою
й текстом на вузьких пунктах. */
.catmenu__content {
display: flex;
align-items: center;
gap: 0.9rem;
min-width: 0;
}
.catmenu__icon {
display: inline-flex;
flex-shrink: 0;
color: var(--secondary-color);
transform-origin: center;
}
.catmenu__icon svg {
display: block;
}
/* Мікроанімація іконки — той самий тригер (:hover/:focus-within на
.catmenu__item), що вже відкриває підменю, тож обидва ефекти стартують
в один момент. `animation-fill-mode` не заданий (= none): по завершенню
іконка сама повертається у стан спокою навіть якщо курсор ще на пункті —
короткий "спалах активності", не безкінечний цикл (п.6 вимог). Кожна
іконка — свій фізичний рух, не однакове scale/rotate на все (п.3). */
.catmenu__item:hover > .catmenu__link .catmenu__icon--wrench,
.catmenu__item:focus-within > .catmenu__link .catmenu__icon--wrench {
animation: catmenu-icon-wrench 420ms ease-out;
}
.catmenu__item:hover > .catmenu__link .catmenu__icon--panel,
.catmenu__item:focus-within > .catmenu__link .catmenu__icon--panel {
animation: catmenu-icon-panel 420ms ease-out;
}
.catmenu__item:hover > .catmenu__link .catmenu__icon--pour,
.catmenu__item:focus-within > .catmenu__link .catmenu__icon--pour {
animation: catmenu-icon-pour 480ms ease-out;
}
.catmenu__item:hover > .catmenu__link .catmenu__icon--spin,
.catmenu__item:focus-within > .catmenu__link .catmenu__icon--spin {
animation: catmenu-icon-spin 500ms ease-out;
}
.catmenu__item:hover > .catmenu__link .catmenu__icon--glow,
.catmenu__item:focus-within > .catmenu__link .catmenu__icon--glow {
animation: catmenu-icon-glow 450ms ease-out;
}
.catmenu__item:hover > .catmenu__link .catmenu__icon--beat,
.catmenu__item:focus-within > .catmenu__link .catmenu__icon--beat {
animation: catmenu-icon-beat 480ms ease-in-out;
}
.catmenu__item:hover > .catmenu__link .catmenu__icon--cushion,
.catmenu__item:focus-within > .catmenu__link .catmenu__icon--cushion {
animation: catmenu-icon-cushion 420ms ease-out;
}
.catmenu__item:hover > .catmenu__link .catmenu__icon--adjust,
.catmenu__item:focus-within > .catmenu__link .catmenu__icon--adjust {
animation: catmenu-icon-adjust 420ms ease-out;
}
.catmenu__item:hover > .catmenu__link .catmenu__icon--gear,
.catmenu__item:focus-within > .catmenu__link .catmenu__icon--gear {
animation: catmenu-icon-gear 520ms ease-out;
}
/* Автозапчастини — гайковий ключ: короткий закручувальний рух. */
@keyframes catmenu-icon-wrench {
0% {
transform: rotate(0deg);
}
35% {
transform: rotate(24deg);
}
65% {
transform: rotate(-8deg);
}
100% {
transform: rotate(0deg);
}
}
/* Кузовні запчастини — дверна панель: пружне "прилягання" при монтажі. */
@keyframes catmenu-icon-panel {
0% {
transform: scale(1);
}
40% {
transform: scale(0.86);
}
70% {
transform: scale(1.08);
}
100% {
transform: scale(1);
}
}
/* Автохімія — флакон: легкий нахил-"переливання" рідини. */
@keyframes catmenu-icon-pour {
0% {
transform: rotate(0deg) translateY(0);
}
35% {
transform: rotate(-20deg) translateY(-1px);
}
70% {
transform: rotate(5deg) translateY(0.5px);
}
100% {
transform: rotate(0deg) translateY(0);
}
}
/* Шини та диски — колесо: одне повне обертання (360°, без ривка в кінці). */
@keyframes catmenu-icon-spin {
0% {
transform: rotate(0deg);
}
60% {
transform: rotate(220deg);
}
100% {
transform: rotate(360deg);
}
}
/* Автосвітло — фара: короткий імпульс яскравості (масштаб + власне світіння). */
@keyframes catmenu-icon-glow {
0% {
opacity: 1;
transform: scale(1);
filter: drop-shadow(0 0 0 transparent);
}
45% {
opacity: 0.6;
transform: scale(1.12);
filter: drop-shadow(0 0 4px currentColor);
}
100% {
opacity: 1;
transform: scale(1);
filter: drop-shadow(0 0 0 transparent);
}
}
/* Аудіо та електроніка — динамік: пульс у такт, як звукова хвиля. */
@keyframes catmenu-icon-beat {
0%,
100% {
transform: scale(1);
}
25% {
transform: scale(1.16);
}
50% {
transform: scale(0.94);
}
75% {
transform: scale(1.08);
}
}
/* Інтер'єр — сидіння: м'яке "просідання" оббивки. */
@keyframes catmenu-icon-cushion {
0% {
transform: translateY(-2px) rotate(0deg);
}
50% {
transform: translateY(1px) rotate(-4deg);
}
100% {
transform: translateY(0) rotate(0deg);
}
}
/* Екстер'єр — бокове дзеркало: коротке регулювання нахилу. */
@keyframes catmenu-icon-adjust {
0% {
transform: rotate(0deg);
}
30% {
transform: rotate(-11deg);
}
65% {
transform: rotate(8deg);
}
100% {
transform: rotate(0deg);
}
}
/* Інструменти і обладнання — шестерня: коротке коливання зубців. */
@keyframes catmenu-icon-gear {
0% {
transform: rotate(0deg);
}
30% {
transform: rotate(-16deg);
}
60% {
transform: rotate(14deg);
}
85% {
transform: rotate(-4deg);
}
100% {
transform: rotate(0deg);
}
}
.catmenu__arrow {
flex-shrink: 0;
opacity: 0.6;
transition: var(--transition);
}
.catmenu__item:hover > .catmenu__link,
.catmenu__item:focus-within > .catmenu__link,
.catmenu__item.is-open > .catmenu__link,
.catmenu__item2:hover > .catmenu__link2,
.catmenu__item2:focus-within > .catmenu__link2,
.catmenu__item2.is-open > .catmenu__link2 {
background: var(--bg-offwhite-color);
color: var(--secondary-color);
}
.catmenu__item:hover > .catmenu__link > .catmenu__arrow,
.catmenu__item:focus-within > .catmenu__link > .catmenu__arrow,
.catmenu__item2:hover > .catmenu__link2 > .catmenu__arrow,
.catmenu__item2:focus-within > .catmenu__link2 > .catmenu__arrow {
opacity: 1;
transform: translateX(2px);
}
/*
* Ціле мега-меню (усі 3 колонки) — прихований за замовчуванням full-bleed
* оверлей на всю ширину ВІКНА БРАУЗЕРА (буквально `100vw`, не ширина
* `.container` сайту — власник явно перевідкрив цю вимогу після першої
* ітерації й попросив саме так), що з'являється при наведенні/фокусі на
* `.categories__menu` (кнопка "ОБЕРІТЬ КАТЕГОРІЮ" + сам дропдаун — див.
* нижче). Вендорські класи `active collapse show` на `#categoriesAccordion`
* тримали список 1-го рівня видимим ЗАВЖДИ (без жодного CSS, що ховає
* `.collapse`/reaguє на `show`) — це й був баг: меню лежало поверх контенту
* сторінки одразу після завантаження, замість з'являтись по наведенню.
* Тут ця видимість повністю перевизначена через opacity/visibility.
*
* Full-bleed трюк: `left: 50%; transform: translateX(-50%); width: 100vw;`
* коректно розтягує елемент на всю ширину viewport ЛИШЕ якщо його
* позиційний предок сам центрований у вікні браузера (`left: 50%`
* рахується як % ВІД ШИРИНИ ПРЕДКА, тож предок має бути настільки ж
* центрованим, як сам viewport). `.categories__menu` (вузький сайдбар-
* кнопка, притиснутий ліворуч у своєму рядку) для цього НЕ підходить —
* дало б панель, зсунуту на сотні пікселів ліворуч за екран (перевірено
* живим рендером). Тому тут `.categories__menu.mobile-v-none` навмисно
* `position: static` (нижче), а позиційним предком для `.dropdown__
* categories--menu` стає найближчий REAL positioned-предок вище —
* `.header__bottom--inner.position__relative` (той самий рядок хедера,
* центрований `.container`) — саме він і центрований у вікні, тому
* математика full-bleed працює коректно. Вертикальний збіг з нижньою
* межею кнопки лишається точним: обидва — прямі флекс-діти одного рядка
* однакової висоти, тож `top: 100%` відносно контейнера рядка = та сама
* Y-координата, що й `top: 100%` відносно самої кнопки.
*/
.categories__menu.mobile-v-none {
position: static;
}
/*
* Те саме, але для решти сторінок — і це не дубль, а фікс (02.10).
*
* Клас `mobile-v-none` є лише в шаблоні ГОЛОВНОЇ: там вендор віддав дві
* копії меню (десктопну з цим класом і окрему мобільну `mobile-v-block`).
* На contact/catalog/product/cart/blog/about/privacy/warranty/checkout/
* account копія одна й БЕЗ класу — тож правило вище її не чіпало,
* `.categories__menu` лишався `position: relative`, і full-bleed рахувався
* від вузької кнопки: панель виїжджала на сотні пікселів ліворуч за екран
* (власник побачив це на /uk/contact, перша колонка була обрізана).
*
* Прив'язка до ширини viewport потрібна однаково на всіх сторінках, а
* мобільна видимість керується окремо (`.mobile-v-none`/`.mobile-v-block`
* вище/нижче) — тому тут саме desktop-медіа, а не глобальне правило: нижче
* 992px десктопна панель не показується взагалі й позиціювання їй ні до
* чого.
*/
@media only screen and (min-width: 992px) {
.categories__menu {
position: static;
}
}
/*
* 2026-09-20 → 2026-09-24 (переглянуто): цей блок раніше пришпилював
* `.header__bottom` (рядок з кнопкою "ОБЕРІТЬ КАТЕГОРІЮ" + мега-меню +
* дублікат nav-посилань + мовний перемикач) під білою `.header__sticky.
* sticky`-панеллю під час скролу, щоб мега-меню категорій не ховалось під
* час наведення (реальний баг: `.header__bottom` — СУСІД `.main__header.
* header__sticky` у розмітці, а не нащадок, тож без фіксації просто їхав
* геть зі сторінкою й ховав відкрите мега-меню за фіксованою панеллю).
* 2026-09-24: власник порівняв результат із вендорським демо
* (risingtheme.com/.../shop.html) — там при скролі лишається ОДНА біла
* панель (лого + меню + іконки), бо `.header__bottom` там просто їде геть
* зі сторінкою, а vendor-правило `.header__sticky.sticky .header__menu.
* header__sticky--block` (style.css:1667) підміняє пошуковий віджет
* компактним меню всередині ТІЄЇ Ж панелі. Спитав власника напряму (два
* рядки лишаються функціональними, але виглядають "двома хедерами" vs один
* вендорський рядок) — обрав точну вендорську відповідність: кнопка
* категорій зникає під час скролу так само, як у вендора, доступна знову
* після повернення нагору. Тому фіксацію `.header__bottom` тут прибрано
* повністю (замість неї — нижче знову дозволено vendor-підміну меню, яку
* попередній фікс від 2026-09-24 вимикав саме через дублювання з цим
* пришпиленим рядком; тепер дублювання немає, бо рядка більше немає).
* Разом з фіксацією прибрано й компаньйон-перефарбування (2026-09-24,
* колишній сусідній блок): воно фарбувало саме цей закріплений рядок у
* білий — сенсу більше немає, бо рядок знову в звичайному потоці й ніколи
* не накладається на білу sticky-панель.
*/
/*
* 2026-09-23 → 2026-09-24 (переглянуто): раніше компенсував потік для ДВОХ
* фіксованих рядків (65px + 55px = 120px), поки `.header__bottom` теж було
* пришпилено (фікс вище). Відколи `.header__bottom` знову в звичайному
* потоці (власник обрав точну вендорську відповідність — див. коментар
* вище), фіксованим лишається лише сам `.header__sticky.sticky` (те саме
* vendor-правило, style.css:1656-1666) — 65px, виміряно живим рендером,
* той самий `padding: 1rem 0.5rem` при висоті рядка лого/іконок на цьому
* брейкпоінті. Значення зменшено зі 120px до 65px відповідно; сам механізм
* (`:has()`-реакція на JS-клас `.sticky`) не змінився.
*/
@media only screen and (min-width: 992px) {
body:has(.header__sticky.sticky) {
padding-top: 65px;
}
}
/*
* 2026-09-23 → 2026-09-24 (переглянуто): доповнення до фіксу вище — WCAG
* 2.2 §2.4.11 (Focus Not Obscured), той самий механізм (`scroll-padding-top`
* на ``, не `` — обґрунтування без змін). Значення зменшено зі
* 120px до 65px синхронно з сусіднім правилом, бо фіксованою лишилась лише
* одна панель (65px) — див. коментар вище.
*/
@media only screen and (min-width: 992px) {
html:has(.header__sticky.sticky) {
scroll-padding-top: 65px;
}
}
/*
* 2026-09-24: accessibility-lead рев'ю фіксу вище знайшло суміжний, не
* пов'язаний із сьогоднішньою зміною, але реальний ґеп: `.shop__sidebar--
* widget` (сайдбар категорій на /uk/catalog, `role="region"` + `tabindex="0"`,
* render-shop-page.ts) — це vendor-правило `position: sticky; top: 0;`
* (style.css:8132-8139). `body`/`html`-компенсація вище (`padding-top`/
* `scroll-padding-top`) стосується лише скролу ДОКУМЕНТА — вона не сягає
* власного `top` іншого sticky-елемента. Тому щойно `.header__sticky` стає
* `.sticky` (займає верхні 65px), верхні пункти сайдбара, який сам
* "прилипає" до `top: 0`, опиняються під фіксованою панеллю (z-index 99) —
* той самий клас бага WCAG 2.4.11, що й фікс вище, просто в іншому місці,
* яке той фікс структурно не покриває. Той самий принцип: коли з'являється
* `.sticky`, зсуваємо точку прилипання сайдбара на ту саму виміряну висоту.
*/
@media only screen and (min-width: 992px) {
body:has(.header__sticky.sticky) .shop__sidebar--widget {
top: 65px;
}
}
/*
* 2026-09-25: сам "флікер" (клас `.sticky` то з'являється, то зникає на
* межі скролу) виправлений у `header-sticky.js` (JS-поріг, не CSS) — тут
* лише візуальний бік прохання власника ("професійна дорога анімація").
*
* Вендорське правило (style.css:1656-1665) вже оголошує `transition: 0.3s`
* — але ТІЛЬКИ на самому класі `.sticky`, тож він працює лише В ОДИН БІК:
* коли клас з'являється, властивості (padding/box-shadow) плавно їдуть до
* нового значення; коли клас ЗНІМАЄТЬСЯ (users scrolls back up), transition
* зникає РАЗОМ із класом, і повернення до базового стану — миттєвий стрибок.
* Оголошуємо той самий список властивостей на базовому (завжди присутньому)
* класі `.header__sticky` — тепер симетрично в обидва боки — і замінюємо
* лінійний вендорський таймінг на easing-криву, яку використовує Material
* Design для входу/виходу елементів (плавний старт і плавне гальмування,
* читається як "дорожче", ніж лінійний рух).
*
* `position: fixed` саму по собі анімувати не можна (не є animatable
* властивістю) — перемикання в/із фіксованого позиціювання завжди миттєве;
* transition тут згладжує лише кольори/тінь/відступи, які й формують
* основне візуальне враження переходу.
*
* `prefers-reduced-motion` — той самий принцип, що в скілі port-partsix-
* section ("Анімації... поважай prefers-reduced-motion"): вимикаємо
* transition повністю, стан і так змінюється миттєво класом.
*
* 2026-09-25, рев'ю accessibility-lead: обидва правила нижче спершу були
* написані на голому `.header__sticky` (специфічність 0,1,0). Вендорське
* `.header__sticky.sticky { transition: 0.3s; }` (style.css:1656, без
* медіа-умови) має ВИЩУ специфічність (0,2,0) і тому перемагало в каскаді,
* щойно з'являвся клас `.sticky`, — незалежно від порядку підключення
* файлів. Живий вимір з `prefers-reduced-motion: reduce` це підтвердив:
* при ВХОДІ в sticky-стан `transitionDuration` лишався "0.3s" (вендорський),
* а не "0s" — анімація все одно програвалась, хоча коментар вище обіцяє
* протилежне. Симетрично це ж різило й "дорожчий" easing лише для стану
* "вийти" (для входу далі використовувався лінійний вендорський таймінг).
* Фікс: додаємо `.header__sticky.sticky` в обидва селектори — специфічність
* зрівнюється (0,2,0 у 0,2,0), і тоді вирішує порядок підключення
* (category-menu.css вантажиться ПІСЛЯ style.css) — наше правило виграє.
* На reduced-motion-правилі додатково `!important` (той самий канонічний
* MDN/WCAG патерн, що вже є в apps/web/app/globals.css) — це правило
* accessibility-критичне (не просто "краще виглядає"), тож не покладаємось
* лише на специфічність/порядок проти будь-якого майбутнього вендорського
* правила з такою ж парою класів.
*/
@media only screen and (min-width: 992px) {
.header__sticky,
.header__sticky.sticky {
transition:
background-color 0.35s cubic-bezier(0.4, 0, 0.2, 1),
box-shadow 0.35s cubic-bezier(0.4, 0, 0.2, 1),
padding 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}
}
/*
* 2026-09-28, той самий скріншот власника ("два хедери"): JS-поріг вище
* (header-sticky.js, фікс 2026-09-28) вже прибрав момент, коли білий
* sticky-рядок і оригінальний чорний `.header__bottom` видно одночасно.
* Окремо від цього власник попросив, щоб сама поява білого рядка виглядала
* "дорожче" — миттєвий class-toggle різкий.
*
* `transition` тут не підходить: щойно додається клас `.sticky`, вендорське
* правило (style.css:1656) в тому самому кадрі дає елементу `position: fixed`
* і фінальну геометрію — браузер ніколи не рендерить проміжний кадр із
* `transform: translateY(-100%)`, тож transition-у нема ВІД чого переходити
* (без ручного forced-reflow хаку в JS, якого свідомо уникаємо). `animation`
* цієї проблеми не має — вона завжди програється заново від `from`
* незалежно від того, чи існував такий кадр на екрані раніше.
*
* Специфічність/каскад (той самий клас бага, що зловив accessibility-lead
* 2026-09-25 вище): анімацію оголошено на `.header__sticky.sticky` (0,2,0) —
* так само, як вендорське `transition: 0.3s` на style.css:1656 (теж 0,2,0,
* без медіа-умови). Специфічність рівна, тож вирішує порядок підключення:
* category-menu.css вантажиться ПІСЛЯ style.css (підтверджено:
* apps/web/lib/legacy-shop/categories-menu.ts додає на category-menu.css
* перед , вже після style.css), наше правило застосовується останнім.
* Перевірено (grep по style.css і цьому файлу): жодне інше правило не
* оголошує `transform` чи `animation` на `.header__sticky`/`.main__header` у
* будь-якому стані — тож кінцевий кадр (`translateY(0)`, `opacity: 1`)
* дорівнює природному стану спокою без анімації. Тому `animation-fill-mode`
* лишаємо дефолтним (`none`): після завершення анімації властивості просто
* повертаються до "не заданих" — це ті самі значення, без стрибка в кінці,
* `forwards` не потрібен.
*
* Таймінг узгоджений з transition вище (0.35s, той самий easing) — зсув і
* зміна кольору/тіні читаються як один рух.
*
* Вихід (скрол угору, клас знімається) навмисно БЕЗ анімації — власник просив
* лише про появу, а `position: fixed` все одно не є animatable властивістю,
* тож зникнення завжди миттєве незалежно від keyframes.
*
* 2026-09-28, accessibility-lead рев'ю перед мержем: єдиний знайдений
* нюанс (Minor, не блокер) — якщо клавіатурний користувач тримає фокус на
* елементі всередині `.main__header` (лого/пошук/акаунт/кошик — вони
* фокусовані завжди, sticky чи ні) і прокрутить повз поріг МИШКОЮ/колесом,
* не рухаючи фокус, той сфокусований контрол на 350мс стає прозорим
* (opacity: 0 → 1) замість миттєвої появи як було. Раніше прийнятний той
* самий клас ризику вже існує в transition вище (2026-09-25, background-
* color/box-shadow/padding під сфокусованим контролом) — не новий тип
* ризику, лише трохи глибший приклад того самого; власник явно просив і
* translateY, і fade (opacity), тому лишаємо як просив, а не мовчки
* прибираємо частину запитаної анімації. Якщо колись знадобиться прибрати
* навіть цей крайній випадок — прибрати `opacity` з обох keyframes нижче,
* лишити лише `transform`.
*/
@media only screen and (min-width: 992px) {
.header__sticky.sticky {
animation: header-sticky-enter 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}
}
@keyframes header-sticky-enter {
from {
transform: translateY(-100%);
opacity: 0;
}
to {
transform: translateY(0);
opacity: 1;
}
}
@media (prefers-reduced-motion: reduce) {
.header__sticky,
.header__sticky.sticky {
transition: none !important;
animation: none !important;
}
}
.dropdown__categories--menu {
position: absolute;
top: 100%;
left: 50%;
width: 100vw;
transform: translateX(-50%);
margin-top: 0;
max-height: min(80vh, 620px);
overflow: hidden;
background: var(--body-background-color);
border: 2px solid var(--secondary-color);
border-top: none;
box-shadow: 0 15px 35px rgba(0, 0, 0, 0.15);
opacity: 0;
visibility: hidden;
/*
* 2026-09-20: реальна причина бага "меню випливає само по собі, курсор
* ще й не наводився на кнопку" (бага-репорт власника). `visibility:
* hidden` ховає ВІЗУАЛЬНО, але сама панель — це `position: absolute`
* блок 100vw завширшки й до 620px заввишки, що лежить одразу під
* хедером (реальна геометрія в DOM, `visibility` цього не змінює). Курсор
* дійсно був "десь внизу" в сенсі скролу — власник мав на увазі "не на
* кнопці", а десь у контенті нижче хедера — рівно там, де ця невидима
* панель фізично лежить. Через те, що вона DOM-нащадок `.categories__
* menu`, будь-яке наведення на цю зону (навіть коли панель невидима)
* рахувалось як наведення на `.categories__menu` — і `:hover`-правило
* нижче відкривало меню. `pointer-events: none` тут прибирає саму
* панель з-під курсора, поки вона закрита: тепер `.categories__menu:hover`
* може стати true ЛИШЕ через наведення на реальну малу кнопку
* (categories__menu--header), а не на привид-геометрію прихованої панелі.
*/
pointer-events: none;
transition: var(--transition);
z-index: 50;
}
/*
* `:not(.menu-js)` — лише no-JS fallback. `category-menu.js` додає
* `.menu-js` на wrapper одразу при ініціалізації й далі керує видимістю
* ВИКЛЮЧНО через `.menu-open` (нижче) — той самий принцип, що вже є в цьому
* файлі для колонок 2/3 (`.hoverintent`/`.is-hover-active`). Без цього
* розділення клік/Enter/Escape зі скрипта не мали ефекту: клік по кнопці
* (tabindex="0") сам надає їй фокус — і сире `:focus-within` тримало б
* меню видимим завжди, ігноруючи стан, який виставляє JS (живий
* Playwright-тест: після Escape панель лишалась visible, бо фокус
* лишався на кнопці всередині wrapper).
*/
.categories__menu:not(.menu-js):hover .dropdown__categories--menu,
.categories__menu:not(.menu-js):focus-within .dropdown__categories--menu {
opacity: 1;
visibility: visible;
pointer-events: auto;
}
/*
* `.menu-open` — єдине джерело правди видимості, коли JS ініціалізувався
* (`.menu-js`). Виставляється наведенням/фокусом усередині групи АБО
* кліком/Enter/Space по кнопці (рівноправна друга точка входу — власник:
* "лише при наведенні або натисканні"); знімається відведенням курсора,
* виходом фокуса з групи, кліком поза меню чи Escape. Уся логіка —
* category-menu.js.
*/
.categories__menu.menu-js.menu-open .dropdown__categories--menu {
opacity: 1;
visibility: visible;
/* Після відкриття панель має лишатись клікабельною/наводжуваною — саме
наведення НА НЕЇ (2/3 колонки, пункти) підтримує відкритий стан. */
pointer-events: auto;
}
/* Видимий фокус-стан на самій кнопці-тригері (WCAG 2.4.7) — раніше кнопка
не була фокусованою взагалі (tabindex додано разом із цим фіксом,
categories-menu.ts). */
.categories__menu--header:focus-visible {
outline: 2px solid var(--body-background-color);
outline-offset: -4px;
}
.catmenu__shell {
display: flex;
align-items: stretch;
height: 100%;
max-height: min(80vh, 620px);
}
/*
* Колонка 2/3 для ОДНОГО пункту колонки 1 — усі 9 `.catmenu__panel2`
* накладені один на одного всередині `.catmenu__panel2-stack` (той самий
* принцип, що й нижче для колонки 3 всередині кожного `.catmenu__panel2`):
* яка саме показана, вирішує CSS `:has()` за ПОЗИЦІЄЮ (:nth-child)
* наведеного/сфокусованого пункту колонки 1, з дефолтом на перший пункт.
* Завдяки стеку панель завжди займає ту саму зону праворуч від колонки 1
* (не "з'їжджає" вниз за Y-координатою наведеного рядка, як було б при
* позиціюванні `.catmenu__panel2` відносно свого власного `