/** * Boksiowo Portal Engine PRO — Header + Mega Menu. * * Presentation-only. Renders on top of/instead of the active theme's own * header markup (see public/class-frontend.php::render_header() for * exactly how and why). Pure CSS animations — no external animation * library. Font stack defaults to system-ui so the header looks correct * even before/without the optional Google Font request finishing * (font-display: swap; see public/class-frontend.php for the enqueue). * * Dark mode is a single class, `.bpe-dark`, toggled on — every * color below is a CSS custom property so dark mode never needs a * duplicate ruleset, only overridden variables. Same palette as Boksio AI * Chat's own color tokens, for visual consistency across the site. */ :root { --bpe-header-primary: #2563eb; --bpe-header-secondary: #1d4ed8; --bpe-header-accent: #f97316; --bpe-header-bg: #ffffff; --bpe-header-page-bg: #f7f9fc; --bpe-header-surface: #ffffff; --bpe-header-border: #e5e7eb; --bpe-header-text: #111827; --bpe-header-text-muted: #6b7280; --bpe-header-shadow: 0 1px 2px rgba(16, 24, 40, 0.04), 0 1px 3px rgba(16, 24, 40, 0.06); --bpe-header-shadow-scrolled: 0 4px 12px rgba(16, 24, 40, 0.08), 0 1px 3px rgba(16, 24, 40, 0.06); --bpe-header-radius: 12px; --bpe-header-radius-full: 999px; --bpe-header-font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; --bpe-header-height: 68px; --bpe-header-transition: 180ms cubic-bezier(0.4, 0, 0.2, 1); } html.bpe-dark { --bpe-header-bg: #1f2937; --bpe-header-page-bg: #111827; --bpe-header-surface: #1f2937; --bpe-header-border: #374151; --bpe-header-text: #f9fafb; --bpe-header-text-muted: #9ca3af; --bpe-header-shadow: 0 1px 2px rgba(0, 0, 0, 0.3); --bpe-header-shadow-scrolled: 0 4px 16px rgba(0, 0, 0, 0.4); } /* ------------------------------------------------------------------ * * Reset/scope — everything is namespaced under .bpe-header so nothing * here can leak into the rest of the theme. * ------------------------------------------------------------------ */ .bpe-header, .bpe-header * { box-sizing: border-box; } .bpe-header { position: sticky; top: 0; z-index: 9999; display: flex; align-items: center; width: 100%; height: var(--bpe-header-height); background: var(--bpe-header-bg); border-bottom: 1px solid var(--bpe-header-border); box-shadow: var(--bpe-header-shadow); font-family: var(--bpe-header-font); color: var(--bpe-header-text); transition: box-shadow var(--bpe-header-transition), background-color var(--bpe-header-transition), border-color var(--bpe-header-transition); } .bpe-header.is-scrolled { box-shadow: var(--bpe-header-shadow-scrolled); } .bpe-header__inner { display: flex; align-items: center; gap: 20px; width: 100%; max-width: 1400px; margin: 0 auto; padding: 0 24px; } /* ------------------------------------------------------------------ * * Logo * ------------------------------------------------------------------ */ .bpe-header__logo { display: flex; align-items: center; gap: 8px; flex-shrink: 0; font-weight: 700; font-size: 19px; letter-spacing: -0.01em; color: var(--bpe-header-text); text-decoration: none; transition: opacity var(--bpe-header-transition); } .bpe-header__logo:hover { opacity: 0.8; } .bpe-header__logo img { height: 48px; max-height: calc(var(--bpe-header-height) - 12px); width: auto; display: block; } /* The uploaded custom logo (Wygląd → Dostosuj → Tożsamość strony) has a transparent background but white lettering, designed to sit on a dark surface — on the header's light-mode white background that white lettering all but disappears. A dark chip behind just the logo (not the whole header bar, which would take the rest of the nav text/icons with it) restores the contrast it needs without touching the fallback text+mark logo further below (only ever shown when no custom logo is set, so :has(img) never matches it). Dark mode already gives the whole header a dark background, so the logo needs no extra chip there. */ .bpe-header__logo:has(img) { background: #111827; padding: 6px 14px; border-radius: var(--bpe-header-radius); } html.bpe-dark .bpe-header__logo:has(img) { background: transparent; padding: 0; } .bpe-header__logo-mark { display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 9px; background: linear-gradient(135deg, var(--bpe-header-primary), var(--bpe-header-secondary)); color: #fff; flex-shrink: 0; } .bpe-header__logo-mark svg { width: 18px; height: 18px; } /* ------------------------------------------------------------------ * * Main navigation (desktop) + Mega Menu * ------------------------------------------------------------------ */ .bpe-header__nav { display: flex; align-items: center; flex-shrink: 1; min-width: 0; } .bpe-header__nav > ul { display: flex; align-items: center; gap: 2px; margin: 0; padding: 0; list-style: none; } .bpe-header__top-item { position: static; } .bpe-header__top-item.has-dropdown { position: relative; } .bpe-header__top-link { display: flex; align-items: center; gap: 4px; padding: 8px 14px; border: none; background: transparent; border-radius: var(--bpe-header-radius-full); font-family: inherit; font-size: 14px; font-weight: 500; color: var(--bpe-header-text-muted); text-decoration: none; white-space: nowrap; cursor: pointer; transition: background-color var(--bpe-header-transition), color var(--bpe-header-transition); } .bpe-header__top-link:hover, .bpe-header__top-link:focus-visible { background: rgba(37, 99, 235, 0.08); color: var(--bpe-header-primary); } .bpe-header__top-item.current-menu-item > .bpe-header__top-link { background: rgba(37, 99, 235, 0.1); color: var(--bpe-header-primary); font-weight: 600; } .bpe-header__caret { width: 13px; height: 13px; flex-shrink: 0; transition: transform 160ms ease; } .bpe-header__top-item.is-open .bpe-header__caret { transform: rotate(180deg); } /* Plain dropdown (2-level items: children, no grandchildren) */ .bpe-header__dropdown-menu { position: absolute; top: calc(100% + 8px); left: 0; min-width: 220px; margin: 0; padding: 8px; list-style: none; background: var(--bpe-header-surface); border: 1px solid var(--bpe-header-border); border-radius: var(--bpe-header-radius); box-shadow: 0 12px 28px rgba(16, 24, 40, 0.14); opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity 160ms ease, transform 160ms cubic-bezier(0.4, 0, 0.2, 1), visibility 160ms; } .bpe-header__top-item.is-open .bpe-header__dropdown-menu { opacity: 1; visibility: visible; transform: translateY(0); } .bpe-header__dropdown-menu a { display: block; padding: 9px 10px; border-radius: 8px; color: var(--bpe-header-text); font-size: 14px; text-decoration: none; transition: background-color 120ms ease; } .bpe-header__dropdown-menu a:hover, .bpe-header__dropdown-menu a:focus-visible { background: rgba(37, 99, 235, 0.08); } /* Mega Menu panel (3-level items: children with their own children) */ .bpe-header__mega-panel { position: fixed; left: 0; right: 0; top: var(--bpe-header-height); z-index: 9998; background: var(--bpe-header-surface); border-bottom: 1px solid var(--bpe-header-border); box-shadow: 0 16px 32px rgba(16, 24, 40, 0.12); opacity: 0; visibility: hidden; transform: translateY(-8px); transition: opacity 180ms ease, transform 180ms cubic-bezier(0.4, 0, 0.2, 1), visibility 180ms; } .bpe-header__top-item.is-open .bpe-header__mega-panel { opacity: 1; visibility: visible; transform: translateY(0); } .bpe-header__mega-panel-inner { display: flex; flex-wrap: wrap; gap: 32px; max-width: 1400px; margin: 0 auto; padding: 28px 24px; } .bpe-header__mega-column { flex: 1 1 180px; min-width: 160px; } .bpe-header__mega-column-heading { display: block; margin-bottom: 4px; font-size: 14px; font-weight: 700; color: var(--bpe-header-text); text-decoration: none; } .bpe-header__mega-column-heading:hover, .bpe-header__mega-column-heading:focus-visible { color: var(--bpe-header-primary); } .bpe-header__mega-column-desc { margin: 0 0 10px; font-size: 12.5px; line-height: 1.4; color: var(--bpe-header-text-muted); } .bpe-header__mega-column-links { margin: 0; padding: 0; list-style: none; } .bpe-header__mega-column-links a { display: block; padding: 6px 0; font-size: 13.5px; color: var(--bpe-header-text-muted); text-decoration: none; transition: color 120ms ease; } .bpe-header__mega-column-links a:hover, .bpe-header__mega-column-links a:focus-visible { color: var(--bpe-header-primary); } /* ------------------------------------------------------------------ * * Search * ------------------------------------------------------------------ */ .bpe-header__search { position: relative; flex: 0 1 260px; min-width: 120px; margin-left: auto; } .bpe-header__search-form { display: flex; align-items: center; gap: 8px; width: 100%; height: 40px; padding: 0 14px; background: var(--bpe-header-page-bg); border: 1px solid var(--bpe-header-border); border-radius: var(--bpe-header-radius-full); transition: border-color var(--bpe-header-transition), box-shadow var(--bpe-header-transition), background-color var(--bpe-header-transition); } .bpe-header__search-form:focus-within { background: var(--bpe-header-surface); border-color: var(--bpe-header-primary); box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12); } .bpe-header__search-form svg { width: 16px; height: 16px; flex-shrink: 0; color: var(--bpe-header-text-muted); } .bpe-header__search-input { flex: 1; min-width: 0; border: none; background: transparent; font-family: inherit; font-size: 14px; color: var(--bpe-header-text); outline: none; } .bpe-header__search-input::placeholder { color: var(--bpe-header-text-muted); } .bpe-header__search-kbd { flex-shrink: 0; padding: 2px 6px; border: 1px solid var(--bpe-header-border); border-radius: 5px; font-size: 11px; font-weight: 500; color: var(--bpe-header-text-muted); background: var(--bpe-header-surface); } /* ------------------------------------------------------------------ * * Action icons (AI / notifications / dark mode / account) * ------------------------------------------------------------------ */ .bpe-header__actions { display: flex; align-items: center; gap: 6px; flex-shrink: 0; } .bpe-header__icon-btn { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border: none; border-radius: 50%; background: transparent; color: var(--bpe-header-text-muted); cursor: pointer; transition: background-color var(--bpe-header-transition), color var(--bpe-header-transition), transform 120ms ease; } .bpe-header__icon-btn svg { width: 20px; height: 20px; } .bpe-header__icon-btn:hover { background: rgba(37, 99, 235, 0.08); color: var(--bpe-header-primary); } .bpe-header__icon-btn:active { transform: scale(0.92); } .bpe-header__fb-btn { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; background: transparent; color: var(--bpe-header-text-muted); text-decoration: none; transition: background-color var(--bpe-header-transition), color var(--bpe-header-transition), transform 120ms ease; } .bpe-header__fb-btn svg { width: 20px; height: 20px; } .bpe-header__fb-btn:hover { background: rgba(24, 119, 242, 0.1); color: #1877f2; } .bpe-header__fb-btn:active { transform: scale(0.92); } .bpe-header__icon-btn:focus-visible, .bpe-header__fb-btn:focus-visible { outline: 2px solid var(--bpe-header-primary); outline-offset: 2px; } /* AI button — a filled pill, distinct from the plain icon buttons */ .bpe-header__ai-btn { display: inline-flex; align-items: center; gap: 6px; height: 40px; padding: 0 16px 0 14px; border: none; border-radius: var(--bpe-header-radius-full); background: linear-gradient(135deg, var(--bpe-header-primary), var(--bpe-header-secondary)); color: #fff; font-family: inherit; font-size: 14px; font-weight: 600; white-space: nowrap; cursor: pointer; transition: transform 120ms ease, box-shadow var(--bpe-header-transition), opacity var(--bpe-header-transition); } .bpe-header__ai-btn svg { width: 17px; height: 17px; } .bpe-header__ai-btn:hover { box-shadow: 0 4px 14px rgba(37, 99, 235, 0.35); transform: translateY(-1px); } .bpe-header__ai-btn:active { transform: translateY(0) scale(0.97); } .bpe-header__ai-btn:focus-visible { outline: 2px solid var(--bpe-header-accent); outline-offset: 2px; } /* Dark mode toggle — sliding icon crossfade, CSS only */ .bpe-header__theme-toggle .bpe-header__theme-icon { position: absolute; transition: opacity 160ms ease, transform 220ms cubic-bezier(0.4, 0, 0.2, 1); } .bpe-header__theme-toggle .bpe-header__theme-icon--sun { opacity: 1; transform: rotate(0deg) scale(1); } .bpe-header__theme-toggle .bpe-header__theme-icon--moon { opacity: 0; transform: rotate(-90deg) scale(0.5); } html.bpe-dark .bpe-header__theme-toggle .bpe-header__theme-icon--sun { opacity: 0; transform: rotate(90deg) scale(0.5); } html.bpe-dark .bpe-header__theme-toggle .bpe-header__theme-icon--moon { opacity: 1; transform: rotate(0deg) scale(1); } /* Account */ .bpe-header__account { position: relative; } .bpe-header__avatar-btn { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; padding: 0; border: none; border-radius: 50%; background: transparent; cursor: pointer; transition: transform 120ms ease; } .bpe-header__avatar-btn:active { transform: scale(0.92); } .bpe-header__avatar-btn img { width: 34px; height: 34px; border-radius: 50%; border: 2px solid var(--bpe-header-border); display: block; } .bpe-header__login-link { display: inline-flex; align-items: center; height: 40px; padding: 0 16px; border-radius: var(--bpe-header-radius-full); border: 1px solid var(--bpe-header-border); color: var(--bpe-header-text); font-size: 14px; font-weight: 600; text-decoration: none; white-space: nowrap; transition: border-color var(--bpe-header-transition), color var(--bpe-header-transition), background-color var(--bpe-header-transition); } .bpe-header__login-link:hover { border-color: var(--bpe-header-primary); color: var(--bpe-header-primary); background: rgba(37, 99, 235, 0.06); } /* ------------------------------------------------------------------ * * Dropdowns (notifications / account) * ------------------------------------------------------------------ */ .bpe-header__dropdown { position: absolute; top: calc(100% + 10px); right: 0; min-width: 240px; padding: 8px; background: var(--bpe-header-surface); border: 1px solid var(--bpe-header-border); border-radius: var(--bpe-header-radius); box-shadow: 0 12px 28px rgba(16, 24, 40, 0.14); opacity: 0; visibility: hidden; transform: translateY(-6px) scale(0.98); transform-origin: top right; transition: opacity 160ms ease, transform 160ms cubic-bezier(0.4, 0, 0.2, 1), visibility 160ms; } .bpe-header__dropdown.is-open { opacity: 1; visibility: visible; transform: translateY(0) scale(1); } .bpe-header__dropdown-title { padding: 8px 10px 6px; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--bpe-header-text-muted); } .bpe-header__dropdown-empty { padding: 14px 10px; font-size: 13px; color: var(--bpe-header-text-muted); text-align: center; } .bpe-header__dropdown-item { display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 10px; border: none; background: transparent; border-radius: 8px; color: var(--bpe-header-text); font-family: inherit; font-size: 14px; text-align: left; text-decoration: none; cursor: pointer; transition: background-color 120ms ease; } .bpe-header__dropdown-item:hover, .bpe-header__dropdown-item:focus-visible { background: rgba(37, 99, 235, 0.08); } .bpe-header__dropdown-item svg { width: 16px; height: 16px; flex-shrink: 0; color: var(--bpe-header-text-muted); } .bpe-header__dropdown-divider { height: 1px; margin: 6px 4px; background: var(--bpe-header-border); } /* ------------------------------------------------------------------ * * Mobile hamburger + off-canvas menu (with accordion submenus) * ------------------------------------------------------------------ */ .bpe-header__burger { display: none; align-items: center; justify-content: center; width: 40px; height: 40px; border: none; border-radius: 50%; background: transparent; color: var(--bpe-header-text); cursor: pointer; flex-shrink: 0; } .bpe-header__burger svg { width: 24px; height: 24px; } .bpe-header__burger:hover { background: rgba(37, 99, 235, 0.08); } .bpe-header__mobile-panel { position: fixed; inset: var(--bpe-header-height) 0 0 0; z-index: 9998; background: var(--bpe-header-bg); padding: 16px 20px 24px; overflow-y: auto; transform: translateX(100%); transition: transform 220ms cubic-bezier(0.4, 0, 0.2, 1); } .bpe-header__mobile-panel.is-open { transform: translateX(0); } .bpe-header__mobile-backdrop { position: fixed; inset: var(--bpe-header-height) 0 0 0; z-index: 9997; background: rgba(17, 24, 39, 0.4); opacity: 0; transition: opacity 220ms ease; } .bpe-header__mobile-backdrop.is-open { opacity: 1; } .bpe-header__mobile-close { position: absolute; top: 16px; right: 16px; display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border: none; border-radius: 50%; background: transparent; color: var(--bpe-header-text); cursor: pointer; } .bpe-header__mobile-close:hover { background: rgba(37, 99, 235, 0.08); } .bpe-header__mobile-menu { margin: 0; padding: 0; list-style: none; } .bpe-header__mobile-item { border-bottom: 1px solid var(--bpe-header-border); } .bpe-header__mobile-item-row { display: flex; align-items: center; justify-content: space-between; } .bpe-header__mobile-item-row a { flex: 1; display: block; padding: 13px 6px; color: var(--bpe-header-text); font-size: 16px; font-weight: 500; text-decoration: none; } .bpe-header__mobile-expand { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border: none; background: transparent; color: var(--bpe-header-text-muted); cursor: pointer; } .bpe-header__mobile-expand svg { width: 16px; height: 16px; transition: transform 160ms ease; } .bpe-header__mobile-item.is-open .bpe-header__mobile-expand svg { transform: rotate(180deg); } .bpe-header__mobile-submenu { display: none; margin: 0 0 10px; padding: 0 0 0 14px; list-style: none; } .bpe-header__mobile-item.is-open > .bpe-header__mobile-submenu { display: block; } .bpe-header__mobile-submenu a { display: block; padding: 10px 6px; color: var(--bpe-header-text-muted); font-size: 14.5px; text-decoration: none; } .bpe-header__mobile-submenu--nested { padding-left: 14px; } .bpe-header__mobile-search { margin-bottom: 18px; } /* ------------------------------------------------------------------ * * Loading / entrance animation * ------------------------------------------------------------------ */ @keyframes bpe-header-fade-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: translateY(0); } } .bpe-header { animation: bpe-header-fade-in 320ms cubic-bezier(0.4, 0, 0.2, 1); } /* ------------------------------------------------------------------ * * Responsive * ------------------------------------------------------------------ */ @media (max-width: 1024px) { .bpe-header__nav { display: none; } .bpe-header__search { flex-basis: 200px; } .bpe-header__search-kbd { display: none; } } @media (max-width: 782px) { .bpe-header__inner { gap: 12px; padding: 0 16px; } .bpe-header__search { display: none; } .bpe-header__burger { display: inline-flex; } /* Everything on the right — AI shortcut, FB, theme toggle, avatar, burger — now lives inside .bpe-header__actions as one flex row (the burger button is the last child in the markup; see header.php), all sharing the same 40×40 hit area and ~18-24px glyph size the rest of the header already uses at desktop width, so the row reads as one coherent icon set instead of a mix of different sizes. With .bpe-header__search hidden below, its "margin-left: auto" (the rule that pins .bpe-header__actions to the right edge on desktop) hides along with it — restated here so the action row still pins itself to the right edge instead of just trailing 12px after the logo. */ .bpe-header__actions { margin-left: auto; gap: 4px; } .bpe-header__logo-text { display: none; } /* Mobile logo: bigger than the desktop 48px — with the text label hidden (rule above) and the desktop nav/search already collapsed at this width, the logo mark is the header's main visual anchor on a phone, so it can safely take more of the row's height. Fluid (clamp) rather than a fixed 60px: at the very narrowest supported widths (~320-360px) a fixed 60px logo left too little room for the five action icons + burger to stay at a real 40px touch target without crowding or wrapping; clamp() scales it down gracefully there while still reaching the full 60px from ~400px up. Still capped below --bpe-header-height (68px) so it never clips. */ .bpe-header__logo img { height: clamp(44px, 15vw, 60px); max-height: calc(var(--bpe-header-height) - 6px); } .bpe-header__actions .bpe-header__icon-btn:not(.bpe-header__theme-toggle) { display: none; } .bpe-header__ai-btn span { display: none; } /* At the narrowest widths, hide the header's own AI shortcut rather than shrink the touch targets below ~40px: it's a redundant entry point at this size — the floating Boksio AI toggle bubble already renders on every page regardless, and the homepage additionally has the LUKI teaser — so nothing is actually lost. */ @media (max-width: 360px) { .bpe-header__ai-btn { display: none; } } /* Locks background scroll while the off-canvas panel is open (class toggled by header.js) so the page behind it doesn't scroll along with a touch-drag inside the panel. */ body.bpe-header-mobile-open { overflow: hidden; } .bpe-header__ai-btn { width: 40px; padding: 0; justify-content: center; } } @media (min-width: 783px) { .bpe-header__mobile-panel { display: none; } } /* Reduced motion: honour the OS-level preference everywhere in the header */ @media (prefers-reduced-motion: reduce) { .bpe-header, .bpe-header * { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; } } /* ------------------------------------------------------------------ * * Best-effort hiding of the active theme's own header so this header * doesn't render twice. Targets the selectors used by the most common * WordPress themes (Astra, active on this install). Safe no-ops on any * theme that doesn't use these class/id names. If the live theme uses a * different header selector, add it to this list (or disable this block * and hide the old header via the theme's own Customizer setting * instead). * ------------------------------------------------------------------ */ body.bpe-header-active #masthead, body.bpe-header-active .site-header, body.bpe-header-active .ast-header-wrap, body.bpe-header-active header.site-header, body.bpe-header-active #site-navigation { display: none !important; }