/* ========================================================================== WOH GROUP — Divi Child — woh-header.css Autor: WOH GROUP LTD Globalny header — JEDEN czysty komponent budowany na WŁASNYCH klasach (woh-global-header, woh-header-inner, woh-header-logo, woh-desktop-nav, woh-lang-switcher, woh-header-cta, woh-mobile-toggle, woh-mobile-menu), bez jakiejkolwiek zależności od wewnętrznych, niepotwierdzonych nazw klas generowanych przez Divi. Cały header to jeden moduł Code w Divi Theme Builder (Global Header) — patrz docs/woh-header.json. Ten plik CELOWO nie używa zmiennych z woh-global.css (--woh-accent itp.) — ma własny, w pełni autonomiczny zestaw zmiennych, żeby żadna zmiana gdzie indziej w motywie nie mogła przypadkiem wpłynąć na header. ========================================================================== */ :root { --woh-black: #111111; --woh-muted: #6B7280; --woh-border: #E5E7EB; --woh-bg: #FFFFFF; --woh-soft: #F8F9FB; --woh-gradient: linear-gradient(135deg, #F43F5E 0%, #EF4444 45%, #F97316 100%); } .woh-global-header { width: 100%; background: var(--woh-bg); border-bottom: 1px solid var(--woh-border); z-index: 99999; position: sticky; top: 0; font-family: 'Manrope', sans-serif; } /* Pasek administratora WordPress (#wpadminbar) jest position:fixed;top:0 z tym samym z-index co nasz sticky header — bez korekty "top" header przyklejałby się POD paskiem admina (zasłonięty) zamiast pod nim. WP dodaje klasę "admin-bar" na , gdy pasek jest widoczny. Wysokości i breakpoint (782px) to standardowe wartości samego WordPressa dla #wpadminbar, nie nasze — dzięki temu offset zawsze pasuje do rzeczywistej wysokości paska admina niezależnie od jego wersji. */ body.admin-bar .woh-global-header { top: 32px; } @media screen and (max-width: 782px) { body.admin-bar .woh-global-header { top: 46px; } } .woh-header-inner { max-width: 1240px; height: 76px; margin: 0 auto; padding: 0 24px; display: flex; align-items: center; gap: 28px; } .woh-header-logo { display: flex; align-items: center; flex: 0 0 auto; } .woh-header-logo img { display: block; height: 36px; width: auto; max-width: 160px; } .woh-desktop-nav { flex: 1 1 auto; display: flex; align-items: center; justify-content: center; gap: 30px; } .woh-desktop-nav a { font-size: 14px; line-height: 1; color: var(--woh-black); text-decoration: none; font-weight: 500; } .woh-lang-switcher { display: flex; align-items: center; gap: 6px; font-size: 13px; line-height: 1; color: var(--woh-muted); white-space: nowrap; } .woh-lang-switcher .active, .woh-lang-switcher a:first-child { color: var(--woh-black); font-weight: 700; } .woh-header-cta { height: 42px; padding: 0 20px; border-radius: 999px; background: var(--woh-gradient); color: #fff !important; display: inline-flex; align-items: center; justify-content: center; font-size: 14px; line-height: 1; font-weight: 700; text-decoration: none; white-space: nowrap; } .woh-mobile-toggle { display: none; } .woh-mobile-menu { display: none; } /* ========================================================================== MOBILE / TABLET (≤980px) Naprawa: menu mobilne było przezroczyste / bez kontenera. Poniższe reguły są celowo bardzo defensywne (!important, wiele wariantów nazw klas), żeby wykluczyć jakikolwiek konflikt z domyślnymi stylami Divi (opacity, backdrop-filter, transform) — dokładnie wg specyfikacji klienta z 3. tury poprawek. ========================================================================== */ @media (max-width: 980px) { html, body { overflow-x: hidden; } .woh-global-header, .woh-header, header { background: #FFFFFF !important; z-index: 99999 !important; position: relative; } .woh-header-inner { min-height: 64px !important; height: 64px !important; padding: 0 16px !important; display: flex !important; align-items: center !important; } .woh-header-logo img { height: 30px; max-width: 132px; } .woh-desktop-nav, .woh-header-cta, .desktop-nav, .desktop-menu { display: none !important; } .woh-lang-switcher { margin-left: auto; } .woh-mobile-toggle, .mobile-toggle, .hamburger { display: inline-flex !important; align-items: center !important; justify-content: center !important; width: 42px !important; height: 42px !important; border-radius: 999px !important; border: 1px solid #E5E7EB !important; background: #FFFFFF !important; color: #111111 !important; z-index: 100001 !important; } .woh-mobile-menu, .mobile-menu, .mobile-nav, .offcanvas-menu { display: none; position: fixed !important; top: 64px !important; left: 0 !important; right: 0 !important; width: 100% !important; max-width: 100% !important; background: #FFFFFF !important; color: #111111 !important; opacity: 1 !important; visibility: visible !important; z-index: 100000 !important; padding: 20px 18px 24px !important; border-bottom: 1px solid #E5E7EB !important; border-radius: 0 0 24px 24px !important; box-shadow: 0 24px 50px rgba(17,17,17,.12) !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; transform: none; } .woh-mobile-menu.is-open, .mobile-menu.is-open, .mobile-nav.is-open, .offcanvas-menu.is-open, body.menu-open .woh-mobile-menu, body.menu-open .mobile-menu, body.menu-open .mobile-nav, body.menu-open .offcanvas-menu { display: block !important; } .woh-mobile-menu a, .mobile-menu a, .mobile-nav a, .offcanvas-menu a { display: block !important; color: #111111 !important; font-size: 16px !important; line-height: 1.25 !important; font-weight: 600 !important; text-decoration: none !important; padding: 14px 0 !important; border-bottom: 1px solid rgba(229,231,235,.8) !important; } .woh-mobile-menu a:hover, .mobile-menu a:hover, .mobile-nav a:hover, .offcanvas-menu a:hover { color: #F43F5E !important; } .woh-mobile-menu .woh-mobile-cta, .mobile-menu .woh-mobile-cta, .mobile-nav .woh-mobile-cta, .offcanvas-menu .woh-mobile-cta { margin-top: 18px !important; height: 46px !important; border-radius: 999px !important; background: linear-gradient(135deg, #F43F5E 0%, #EF4444 45%, #F97316 100%) !important; color: #FFFFFF !important; display: flex !important; align-items: center !important; justify-content: center !important; border-bottom: 0 !important; } } @media (max-width: 767px) { .woh-header-logo img { height: 28px; max-width: 124px; } } /* Menu mobilne (panel fixed) — ta sama korekta co header, żeby panel otwierał się dokładnie pod headerem, a nie pod paskiem admina WP. */ @media screen and (max-width: 782px) { body.admin-bar .woh-mobile-menu, body.admin-bar .mobile-menu, body.admin-bar .mobile-nav, body.admin-bar .offcanvas-menu { top: calc(46px + 64px) !important; } } @media screen and (min-width: 783px) and (max-width: 980px) { body.admin-bar .woh-mobile-menu, body.admin-bar .mobile-menu, body.admin-bar .mobile-nav, body.admin-bar .offcanvas-menu { top: calc(32px + 66px) !important; } }