/* * 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: 40; } .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; } @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 Aktywny element dostaje 2px złotą regułę — echo podkreślenia z wordmarku. Nic grubszego niż 2px w całym systemie. ---------------------------------------------------------------------- */ .wp-block-navigation .wp-block-navigation-item__content { border-bottom: 2px solid transparent; padding-bottom: var(--space-1); padding-top: var(--space-2); transition: color var(--duration-base) var(--easing-standard), border-color var(--duration-base) var(--easing-standard); } .wp-block-navigation .wp-block-navigation-item__content:hover { border-bottom-color: var(--wp--preset--color--accent-soft); color: var(--wp--preset--color--primary); } .wp-block-navigation .current-menu-item>.wp-block-navigation-item__content, .wp-block-navigation .current-menu-ancestor>.wp-block-navigation-item__content, .wp-block-navigation .current_page_item>.wp-block-navigation-item__content { border-bottom-color: var(--wp--preset--color--accent); color: var(--wp--preset--color--primary); } /* Strzałka rozwijania. WP renderuje ją jako osobny