/* * header.css — pasek ogłoszeń, nagłówek, nawigacja, stopka * * Część arkuszy theme'u rozbitych per feature. Kolejność ładowania i lista * plików: functions.php → oliwa_enqueue_assets(). Wszystkie wartości pochodzą * z assets/css/tokens.css. */ /* ------------------------------------------------------------------------- Pasek informacyjny i nagłówek Sticky ma w systemie dokładnie jedno miejsce: header (veil + blur 10px). Pasek nad nim przewija się razem z treścią. ---------------------------------------------------------------------- */ .oliwa-announcement { font-family: var(--font-body); font-size: var(--text-2xs); font-weight: 600; letter-spacing: var(--tracking-wider); text-transform: uppercase; } .oliwa-announcement p { line-height: 1; margin: 0; } /* * Sticky siedzi na OPAKOWANIU template-partu, nie na samym

. * `wp:template-part` zawsze renderuje własny element wokół zawartości (rdzeń * nie daje się tego wyłączyć — bez `tagName` bierze tag z obszaru). Ten * element jest dokładnie tak wysoki jak nagłówek, a sticky przykleja się * wyłącznie w granicach rodzica — czyli nagłówek „przyklejał się" do pasa * o własnej wysokości i znikał razem z nim. Klasa `oliwa-header-slot` jest * dopisana do bloku template-part w każdym szablonie. */ .oliwa-header-slot { position: sticky; top: 0; z-index: var(--layer-header); } .oliwa-header { -webkit-backdrop-filter: var(--blur-veil); backdrop-filter: var(--blur-veil); background: var(--veil-cream); border-bottom: 1px solid var(--hairline); /* Kotwica dla pola wyszukiwania, które na telefonie rozwija się jako osobny rząd pod paskiem ikon (patrz sekcja „Wąskie ekrany”). */ position: relative; } /* Pasek admina nie może przykryć nagłówka. */ .admin-bar .oliwa-header-slot { top: 32px; } /* 782, nie 781: rdzeń WordPressa przełącza wysokość paska administratora z 32 na 46 px dokładnie na tym progu. To jedyne miejsce w theme'ie, w którym wolno napisać `max-width: 782px` — patrz legenda progów w tokens.css. */ @media (max-width: 782px) { .admin-bar .oliwa-header-slot { top: 46px; } } /* W edytorze sticky rozjeżdża canvas — tam statycznie. */ .editor-styles-wrapper .oliwa-header-slot { position: static; } .editor-styles-wrapper .oliwa-header { backdrop-filter: none; } .oliwa-header .wp-block-site-title a { color: var(--wp--preset--color--primary); text-decoration: none; } /* Sufit wysokości: bez tego zdjęcie wgrane jako logo (pionowe, duże) rozpycha sticky header na pół ekranu. Szerokość dobiera się sama. */ .oliwa-header .wp-block-site-logo img { display: block; height: auto; max-height: 56px; width: auto; } /* Logo zamiast nazwy witryny — z fallbackiem. Bloki nie mają warunków, więc w nagłówku i stopce siedzą oba: Logo witryny i Tytuł witryny. Kiedy logo NIE jest ustawione, blok logo renderuje pustkę i zostaje sam napis. Kiedy JEST, WordPress dokłada do klasę wp-custom-logo — i to ona chowa napis. Zero PHP, zero duplikatu treści dla czytników ekranu (logo niesie nazwę witryny w alt). */ .wp-custom-logo .oliwa-header .wp-block-site-title, .wp-custom-logo .oliwa-footer .wp-block-site-title { display: none; } /* Rozmiar dotyczy obu wariantów logo w stopce. */ .oliwa-footer-logo img { height: auto; max-width: 180px; } /* Tryb awaryjny: jasne logo nie jest wgrane, więc stopka dostaje ciemny wordmark i musi go rozjaśnić. brightness zamiast invert, żeby złoty gradient marki nie zmienił odcienia. Klasę dokłada inc/logo.php. */ .oliwa-footer-logo.is-logo-fallback img { filter: brightness(1.6); } /* Edytor renderuje bloki w JS, więc filtr render_block z inc/logo.php tam nie biegnie: canvas zawsze pokazuje zwykłe logo i zawsze w trybie awaryjnym. Podobnie klasa wp-custom-logo nie trafia na canvas, więc logo i tytuł witryny widać tam naraz — front pokazuje tylko jedno. */ .editor-styles-wrapper .oliwa-footer-logo img { filter: brightness(1.6); } /* Ikony akcji w nagłówku: szukajka, konto, koszyk. Wszystkie trzy to kwadraty 44px z ikoną w oliwce — bez wypełnień, bo złoto jest zarezerwowane dla licznika koszyka. */ .oliwa-header-actions { gap: var(--space-2); } .oliwa-header-actions .wp-block-search { margin: 0; width: auto; } .oliwa-header-actions .wp-block-search .wp-block-search__inside-wrapper { border: 0; padding: 0; } /* Domyślnie blok wyszukiwania rozpycha się do 100% szerokości rodzica — w trybie „tylko ikona" musi być kwadratem, nie panelem. */ .oliwa-header-actions .wp-block-search__button { align-items: center; background-color: transparent; border: 0; border-radius: var(--radius-control); color: var(--wp--preset--color--primary); display: flex; height: var(--control-h-md); justify-content: center; margin: 0; min-width: 0; padding: 0; transition: background-color var(--duration-base) var(--easing-standard); width: var(--control-h-md); } .oliwa-header-actions .wp-block-search__button:hover { background-color: var(--wp--preset--color--base-alt); color: var(--wp--preset--color--primary); } .oliwa-header-actions .wp-block-search__button svg { height: var(--icon-lg); width: var(--icon-lg); } /* Pole wyszukiwania rozwija się po kliknięciu ikony — 220px, jak w projekcie. */ .oliwa-header-actions .wp-block-search__input { border: 1px solid var(--hairline); border-radius: var(--radius-control); font-size: var(--text-sm); min-height: var(--control-h-sm); padding: var(--pad-control-sm); width: 220px; } .oliwa-header-actions .wp-block-search__searchfield-hidden .wp-block-search__input { width: 0; } .oliwa-header-actions .wp-block-woocommerce-customer-account, .oliwa-header-actions .wp-block-woocommerce-mini-cart { margin: 0; } .wc-block-customer-account__link { align-items: center; border-radius: var(--radius-control); color: var(--wp--preset--color--primary); display: flex; height: var(--control-h-md); justify-content: center; padding: 0; transition: background-color var(--duration-base) var(--easing-standard); width: var(--control-h-md); } .wc-block-customer-account__link:hover { background-color: var(--wp--preset--color--base-alt); color: var(--wp--preset--color--primary); } /* Woo renderuje tu SVG bez własnej klasy, więc celujemy w element. */ .wc-block-customer-account__link svg, .wc-block-customer-account__account-icon { height: var(--icon-lg); width: var(--icon-lg); } /* ------------------------------------------------------------------------- Nawigacja Motyw renderuje klasyczne menu WordPressa (inc/navigation.php), nie blok `core/navigation`. Markup jest surowy:

> ul.menu > li.menu-item[.menu-item-has-children] > ul.sub-menu. Typografia, która wcześniej szła ze `styles.blocks.core/navigation` w theme.json, stoi teraz tutaj — dla listy klasycznego menu tamten wpis nic nie znaczy. Rozwijanie jest czysto CSS-owe: `:hover` dla myszy i `:focus-within` dla klawiatury. Świadome ograniczenie tego etapu: brak `aria-expanded` (to atrybut dynamiczny, czyli JS) i brak obsługi dotyku, gdzie `:hover` nie istnieje. Osobny krok. ---------------------------------------------------------------------- */ .oliwa-nav .menu, .oliwa-nav .sub-menu { list-style: none; margin: 0; padding: 0; } .oliwa-nav--primary .menu { align-items: center; display: flex; flex-wrap: wrap; gap: 28px; } /* Każda pozycja jest układem odniesienia dla swojego podmenu — bez tego `position: absolute` w .sub-menu liczyłby się względem całego nagłówka. */ .oliwa-nav .menu-item { position: relative; } .oliwa-nav--primary>.menu>.menu-item>a { align-items: center; border-bottom: 2px solid transparent; color: var(--wp--preset--color--contrast); display: flex; font-family: var(--font-body); font-size: var(--text-2xs); font-weight: 600; gap: var(--space-2); letter-spacing: var(--tracking-wider); padding-bottom: var(--space-1); padding-top: var(--space-2); text-decoration: none; text-transform: uppercase; transition: color var(--duration-base) var(--easing-standard), border-color var(--duration-base) var(--easing-standard); } .oliwa-nav--primary>.menu>.menu-item>a:hover { border-bottom-color: var(--wp--preset--color--accent-soft); color: var(--wp--preset--color--primary); } /* Aktywna pozycja dostaje 2px złota regułę — echo podkreślenia z wordmarku. `current-menu-ancestor` zapala rodzica, gdy jesteśmy na jego podstronie. */ .oliwa-nav--primary>.menu>.current-menu-item>a, .oliwa-nav--primary>.menu>.current-menu-ancestor>a, .oliwa-nav--primary>.menu>.current-menu-parent>a, .oliwa-nav--primary>.menu>.current_page_item>a { border-bottom-color: var(--wp--preset--color--accent); color: var(--wp--preset--color--primary); } /* Strzalka jako maska na pseudoelemencie: dziedziczy kolor tekstu, więc zmienia się razem z nim w hoverze. Klase `menu-item-has-children` dokłada WordPress, gdy pozycja ma dzieci — nie trzeba jej niczym wymuszać. */ .oliwa-nav--primary .menu-item-has-children>a::after { background-color: currentColor; content: ""; flex: none; height: var(--icon-sm); mask: var(--ico-chevron-down) center / contain no-repeat; transition: transform var(--duration-base) var(--easing-standard); width: var(--icon-sm); } .oliwa-nav--primary>.menu>.menu-item-has-children:hover>a::after, .oliwa-nav--primary>.menu>.menu-item-has-children:focus-within>a::after { transform: rotate(180deg); } /* Podmenu = karta: hairline, 4px, cień raised. */ .oliwa-nav--primary .sub-menu { background-color: var(--wp--preset--color--surface-card); border: 1px solid var(--hairline); border-radius: var(--radius-card); box-shadow: var(--shadow-raised); left: 0; min-width: 232px; padding: var(--space-2) 0; position: absolute; top: 100%; transition: opacity var(--duration-base) var(--easing-standard), transform var(--duration-base) var(--easing-standard), visibility var(--duration-base) var(--easing-standard); z-index: 20; } /* Stan spoczynkowy. `display: none` byłby prostszy, ale nie da się go przejść tranzycją — karta pojawiałaby się skokiem. Trójka niżej robi to samo w trzech rolach: `opacity` odpowiada za widoczność, `transform` za ruch wejściowy, a `visibility` wyjmuje kartę z drzewa dostępności i spod kursora (samo `opacity: 0` zostawiłoby niewidzialny prostokąt łapiący kliknięcia i czytany przez czytniki ekranu). `visibility` przełącza się skokowo, ale jest właściwością animowalną: w tranzycji trzyma wartość do końca czasu trwania, więc karta zdąży wyblaknąć, zanim zniknie. Bez niej w liście `transition` (jest wyżej, na .sub-menu) animacja wyjścia by nie istniała. */ .oliwa-nav--primary .sub-menu { opacity: 0; transform: translateY(-4px); visibility: hidden; } /* Dziecko bezpośrednie (`>`), nie dowolny potomek: przy trzech poziomach `li:hover .sub-menu` zapaliłby równocześnie wszystkie zagnieżdżone listy. */ .oliwa-nav--primary .menu-item:hover>.sub-menu, .oliwa-nav--primary .menu-item:focus-within>.sub-menu { opacity: 1; transform: translateY(0); visibility: visible; } /* Trzeci poziom wychodzi w bok, nie w dół — inaczej przykryłby rodzeństwo. Margines ujemny nakłada karty o grubość hairline'u, żeby nie było szpary, przez która mysz gubi hover po drodze. */ .oliwa-nav--primary .sub-menu .sub-menu { left: 100%; margin-left: -1px; top: calc(var(--space-2) * -1 - 1px); } .oliwa-nav--primary .sub-menu a { color: var(--wp--preset--color--contrast); display: block; font-family: var(--font-body); font-size: var(--text-sm); font-weight: 400; padding: var(--space-3) var(--space-5); text-decoration: none; transition: background-color var(--duration-fast) var(--easing-standard), color var(--duration-fast) var(--easing-standard); } .oliwa-nav--primary .sub-menu a:hover { background: var(--wp--preset--color--base-alt); color: var(--wp--preset--color--primary); } .oliwa-nav--primary .sub-menu .current-menu-item>a { color: var(--wp--preset--color--primary); font-weight: 500; } /* Pozycja z podmenu wewnątrz karty: strzalka obrócona w prawo, bo jej lista wychodzi w bok. */ .oliwa-nav--primary .sub-menu .menu-item-has-children>a { align-items: center; display: flex; gap: var(--space-2); justify-content: space-between; } .oliwa-nav--primary .sub-menu .menu-item-has-children>a::after { transform: rotate(-90deg); } .oliwa-nav--primary .sub-menu .menu-item-has-children:hover>a::after, .oliwa-nav--primary .sub-menu .menu-item-has-children:focus-within>a::after { transform: rotate(-90deg); } /* Stopka — linki wygaszone, rozjaśniają się do kremu. Lista pionowa, więc żadnego pozycjonowania: ewentualne podmenu po prostu się wciela. */ .oliwa-nav--footer .menu { display: flex; flex-direction: column; gap: var(--space-2); } .oliwa-nav--footer a { color: var(--text-on-dark-muted); font-family: var(--font-body); font-size: var(--text-sm); text-decoration: none; transition: color var(--duration-base) var(--easing-standard); } .oliwa-nav--footer a:hover { color: var(--wp--preset--color--base-alt); } .oliwa-nav--footer .current-menu-item>a, .oliwa-nav--footer .current_page_item>a { color: var(--wp--preset--color--accent-soft); font-weight: 500; } .oliwa-nav--footer .sub-menu { margin-top: var(--space-2); padding-left: var(--space-4); } /* Hamburger i przyciski akordeonu istnieją w markupie zawsze, ale na szerokim ekranie nie mają nic do roboty: podmenu otwiera tam `:hover` i `:focus-within`. `display: none` wyjmuje je też z kolejności Tab. */ .oliwa-nav-toggle, .oliwa-nav__submenu-toggle { display: none; } /* ------------------------------------------------------------------------- Wąskie ekrany Projekt „header mobilny": pasek 64 px w jednym rzędzie — logo na środku, akcje po prawej — nad nim pasek zapowiedzi, a pod ikonami rozwijane wyszukiwanie. Nawigacja nie ma tu żadnych reguł: motyw renderuje klasyczne menu (`inc/navigation.php`), a klasyczne menu nie ma mechaniki szuflady — to była funkcja bloku `core/navigation`. Do rozstrzygnięcia osobno. ---------------------------------------------------------------------- */ @media (max-width: 781px) { .oliwa-hero { min-height: 480px; } /* Padding nagłówka siedzi w atrybucie `style` bloku, czyli inline — z arkusza da się go zdjąć wyłącznie przez !important. */ .oliwa-header { padding-bottom: 0 !important; padding-left: var(--space-1) !important; padding-right: var(--space-2) !important; padding-top: 0 !important; } .oliwa-header>.wp-block-group { align-items: center; flex-wrap: nowrap; gap: var(--space-1); min-height: var(--header-h-mobile); } /* * Kolejność menu → logo → akcje wymaga, żeby wszystkie trzy bloki były * dziećmi tego samego flexa. W markupie nawigacja i akcje siedzą we * wspólnym kontenerze, więc `display: contents` rozpuszcza go — jego * dzieci awansują do flexa nagłówka i zaczynają słuchać `order`. */ .oliwa-header>.wp-block-group>.wp-block-group:last-child { display: contents; } .oliwa-header>.wp-block-group>.wp-block-group:first-child { flex: 1; justify-content: center; min-width: 0; order: 2; } .oliwa-header-actions { order: 3; } /* ----------------------------------------------------------------- Szuflada menu Projekt: oliwkowa płachta na pełny ekran, pozycje krojem display, rozdzielone hairline'ami. Podmenu rozwija się w miejscu (akordeon), bo karty z desktopu nie mieszczą się w 390 px, a trzeci poziom musi mieć gdzie wejść. Stan trzyma klasa `is-open` dokładana przez assets/js/nav.js. Bez skryptu szuflada się nie otworzy — dlatego pełne menu stoi też w stopce, jako ścieżka zapasowa. ----------------------------------------------------------------- */ /* Hamburger po lewej stronie paska. `order` działa, bo grupa bloków wokół nawigacji i akcji jest rozpuszczona przez `display: contents` (reguła wyżej) — wszystkie trzy elementy są dziećmi tego samego flexa. */ .oliwa-nav-toggle { align-items: center; background: transparent; border: 0; color: var(--wp--preset--color--primary); cursor: pointer; display: flex; height: var(--control-h-md); justify-content: center; order: 1; padding: 0; width: var(--control-h-md); } /* Trzy kreski z jednego elementu: środkowa to tło, skrajne to cienie. Taniej niż trzy , a po otwarciu ten sam element robi krzyżyk. */ .oliwa-nav-toggle__glyph { background: currentColor; box-shadow: 0 -6px 0 currentColor, 0 6px 0 currentColor; height: 2px; width: var(--icon-lg); } /* Po otwarciu ten sam przycisk jest krzyżykiem na płachcie: szuflada przykrywa pasek (jest jego dzieckiem, więc żaden z-index paska jej nie przebije), a `position: fixed` wyciąga hamburger na wierzch. Jeden przycisk zamiast dwóch — ten sam `aria-expanded` opisuje oba stany. */ .oliwa-nav-toggle[aria-expanded="true"] { color: var(--wp--preset--color--base-alt); position: fixed; right: var(--space-4); top: var(--space-2); z-index: 50; } .oliwa-nav-toggle[aria-expanded="true"] .oliwa-nav-toggle__glyph { background: transparent; box-shadow: none; position: relative; } .oliwa-nav-toggle[aria-expanded="true"] .oliwa-nav-toggle__glyph::before, .oliwa-nav-toggle[aria-expanded="true"] .oliwa-nav-toggle__glyph::after { background: currentColor; content: ""; height: 2px; left: 0; position: absolute; top: 0; width: 100%; } .oliwa-nav-toggle[aria-expanded="true"] .oliwa-nav-toggle__glyph::before { transform: rotate(45deg); } .oliwa-nav-toggle[aria-expanded="true"] .oliwa-nav-toggle__glyph::after { transform: rotate(-45deg); } /* * Szuflada jest `position: fixed`, a fixed liczy się względem najbliższego * przodka z filtrem — nagłówek ma backdrop-filter (veil + blur), więc bez * tej reguły płachta dostałaby pudełko wielkości paska 64 px. */ .oliwa-header:has(.oliwa-nav--primary.is-open) { -webkit-backdrop-filter: none; backdrop-filter: none; } /* Blokada przewijania tła pod otwartą szufladą (klasa z nav.js). */ .oliwa-nav-locked, .oliwa-nav-locked body { overflow: hidden; } .oliwa-nav--primary { background: var(--wp--preset--color--primary-dark); inset: 0; opacity: 0; overflow-y: auto; padding: calc(var(--header-h-mobile) + var(--space-4)) var(--space-6) var(--space-8); position: fixed; transition: opacity var(--duration-base) var(--easing-standard), visibility var(--duration-base) var(--easing-standard); visibility: hidden; z-index: 40; } .oliwa-nav--primary.is-open { opacity: 1; visibility: visible; } .oliwa-nav--primary .menu { display: block; } /* Pozycja = wiersz: link zajmuje całą szerokość minus przycisk, więc pole dotyku idzie od hairline'u do hairline'u, a nie tylko po napis. */ .oliwa-nav--primary>.menu>.menu-item { align-items: center; border-bottom: 1px solid var(--hairline-on-dark); display: flex; flex-wrap: wrap; } .oliwa-nav--primary>.menu>.menu-item>a { border-bottom: 0; color: var(--wp--preset--color--base-alt); flex: 1; font-family: var(--font-display); font-size: var(--text-2xl); font-weight: var(--weight-light); letter-spacing: 0; line-height: var(--leading-snug); padding: var(--space-4) 0; text-transform: none; } .oliwa-nav--primary>.menu>.current-menu-item>a, .oliwa-nav--primary>.menu>.current-menu-ancestor>a, .oliwa-nav--primary>.menu>.current-menu-parent>a, .oliwa-nav--primary>.menu>.current_page_item>a { border-bottom: 0; color: var(--accent-soft); } /* Strzałka z desktopu (::after na linku) nie ma tu sensu — rozwijaniem steruje osobny przycisk, więc chowamy ją na każdym poziomie. */ .oliwa-nav--primary .menu-item-has-children>a::after { display: none; } /* Przycisk akordeonu: 44 px pola dotyku, glif rysowany borderem (kwadrat obrócony o 45°), żeby nie ciągnąć kolejnej maski. */ .oliwa-nav__submenu-toggle { align-items: center; background: transparent; border: 0; color: var(--accent-soft); cursor: pointer; display: flex; flex: none; height: var(--control-h-md); justify-content: center; padding: 0; width: var(--control-h-md); } .oliwa-nav__submenu-glyph { border-bottom: 2px solid currentColor; border-right: 2px solid currentColor; height: 9px; margin-top: -4px; transform: rotate(45deg); transition: transform var(--duration-fast) var(--easing-standard); width: 9px; } .menu-item.is-open>.oliwa-nav__submenu-toggle .oliwa-nav__submenu-glyph { margin-top: 4px; transform: rotate(-135deg); } /* Podmenu w szufladzie: zwykła lista pod pozycją, bez karty, cienia i pozycjonowania. `flex-basis: 100%` zrzuca ją do własnego wiersza — pozycja nadrzędna jest flexem (link + przycisk). */ .oliwa-nav--primary .sub-menu { background: transparent; border: 0; border-radius: 0; box-shadow: none; display: none; flex-basis: 100%; min-width: 0; opacity: 1; padding: 0 0 var(--space-4) var(--space-4); position: static; transform: none; visibility: visible; } /* Otwiera wyłącznie klasa z JS-u. Reguły `:hover` / `:focus-within` z desktopu nic tu nie zmienią — ustawiają opacity i visibility, a te nie mają znaczenia przy `display: none`. Świadomie: na dotyku hover potrafi zostać przyklejony po tapnięciu. */ .oliwa-nav--primary .menu-item.is-open>.sub-menu { display: block; } .oliwa-nav--primary .sub-menu .menu-item { align-items: center; display: flex; flex-wrap: wrap; } .oliwa-nav--primary .sub-menu a { color: var(--accent-soft); flex: 1; font-family: var(--font-body); font-size: var(--text-sm); font-weight: var(--weight-medium); letter-spacing: var(--tracking-wider); padding: var(--space-3) 0; text-transform: uppercase; } .oliwa-nav--primary .sub-menu a:hover { background: transparent; color: var(--wp--preset--color--base-alt); } /* Trzeci poziom: to samo wcięcie co drugi, tylko mniejszy kontrast — głębokość czyta się z wcięcia, nie z kolejnej ozdoby. */ .oliwa-nav--primary .sub-menu .sub-menu a { color: var(--text-on-dark-muted); font-weight: var(--weight-regular); text-transform: none; } .oliwa-header .wp-block-site-logo img { max-height: var(--logo-h-mobile); } /* Projekt ma w pasku trzy ikony: menu, lupa, koszyk. Konto przenosi się do szuflady (pozycja „Moje konto" w menu) — dopiero bez niego logo staje na środku paska. */ .oliwa-header-actions .wp-block-woocommerce-customer-account { display: none; } /* * Wyszukiwanie: 220 px pola obok czterech ikon nie mieści się w 375 px, * więc rozwinięte pole ląduje w osobnym rzędzie pod paskiem. Rdzeń po * kliknięciu lupy zdejmuje klasę `…searchfield-hidden` — to jedyny * sygnał otwarcia, jaki wystawia, i na nim opiera się ta reguła. * Przesuwane jest samo pole, nie cały wrapper, bo w wrapperze siedzi * też lupa — a ta ma zostać na swoim miejscu w pasku. */ .oliwa-header-actions .wp-block-search:not(.wp-block-search__searchfield-hidden) .wp-block-search__input { background: var(--wp--preset--color--base); border-left: 0; border-radius: 0; border-right: 0; left: 0; position: absolute; top: 100%; width: 100%; } }