/* * pbsf-header.css * * Layout and visual styling for PBSF_Header. All selectors scoped under * .pbsf-header / .pbsf-nav — no global element reset, no `pbh-*` or * theme/Elementor selectors touched. * * One deliberate `!important`, on `display` only: Home Builder ships * `body.pbh-home-active > header { display: none !important; }` * (specificity 0,1,2 — written to hide the *theme's own* native header * when it was a direct child of ``). The v2 Home integration * contract renders PBSF's Header as an independent sibling — a genuine * direct child of `` — so it falls into that same selector. A * plain `.pbsf-header { display: flex !important; }` (specificity 0,1,0) * still lost to it: among `!important` rules, specificity is still the * tiebreaker, not just source order. The doubled class selector below * (`.pbsf-header.pbsf-header`, specificity 0,2,0) is a standard * specificity-boost technique — it does not reference `pbh-home-active` * or any other Home Builder selector, only PBSF's own class, repeated. * Confirmed live via getComputedStyle before/after (`display: none` → * `flex`, everything else about the element already correct). Does not * touch or override any other Home Builder rule. */ .pbsf-header.pbsf-header { display: flex !important; align-items: center; justify-content: space-between; gap: var(--pbsf-space-4); padding: var(--pbsf-space-3) var(--pbsf-space-4); max-width: var(--pbsf-content-width); margin: 0 auto; background: var(--pbsf-header-bg, var(--pbsf-color-panel-translucent)); backdrop-filter: none; /* TEST A — GPU compositing A/B, temporary, see PBellaras_Website.md λε′ */ -webkit-backdrop-filter: none; /* TEST A — GPU compositing A/B, temporary, see PBellaras_Website.md λε′ */ border-bottom: 1px solid var(--pbsf-color-border); color: var(--pbsf-color-text); font-family: var(--pbsf-font-family); position: relative; /* TEST H2 — minimum stable paint contract, temporary, see PBellaras_Website.md λζ′. Remove this block to roll back. */ z-index: 100; opacity: 1; visibility: visible; pointer-events: auto; /* END TEST H2 */ } /* * Reusable brand mark (PBSF_Brand — text/logo/logo+text, see * class-pbsf-brand.php). `--pbsf-header-logo-width` defaults to a * conservative, framework-generic size; a site's own configuration * (e.g. this plugin's PBellaras brand section) can override it via * inline CSS without touching this rule. `max-height`/`width: auto` * preserves aspect ratio — no cropping, no stretching, no way for an * oversized source image to break header layout. */ .pbsf-header .pbsf-brand { display: inline-flex; align-items: center; gap: var(--pbsf-space-2); text-decoration: none; white-space: nowrap; } .pbsf-header .pbsf-brand__logo { display: block; width: var(--pbsf-header-logo-width, 44px); max-width: 100%; height: auto; max-height: 44px; } .pbsf-header .pbsf-brand__text { font-size: var(--pbsf-font-size-lg); font-weight: 700; letter-spacing: 0.02em; color: var(--pbsf-color-text); } .pbsf-header .pbsf-brand:hover .pbsf-brand__text, .pbsf-header .pbsf-brand:focus-visible .pbsf-brand__text { color: var(--pbsf-color-cyan); } /* * Mobile toggle button. Scoped as `.pbsf-header .pbsf-nav__toggle` * (specificity 0,2,0), not bare `.pbsf-nav__toggle` (0,1,0) — Hello * Elementor's reset.css ships `[type="button"], button { display: * inline-block; }`, an attribute selector of equal (0,1,0) specificity * that loads after this stylesheet, so at equal specificity it would win * on source order and keep the toggle visible at every viewport width. * The extra ancestor class avoids that tie without `!important`. */ .pbsf-header .pbsf-nav__toggle { display: none; appearance: none; background: transparent; border: 1px solid var(--pbsf-color-border); border-radius: var(--pbsf-radius); color: var(--pbsf-color-text); font-size: var(--pbsf-font-size-base); line-height: 1; padding: var(--pbsf-space-2) var(--pbsf-space-3); cursor: pointer; } .pbsf-header .pbsf-nav__toggle:hover { border-color: var(--pbsf-color-cyan); } /* Primary nav list — desktop: horizontal row */ .pbsf-nav__list { display: flex; align-items: center; gap: var(--pbsf-space-4); list-style: none; margin: 0; padding: 0; } .pbsf-nav__link { display: inline-block; color: var(--pbsf-color-text); text-decoration: none; font-size: var(--pbsf-font-size-base); padding: var(--pbsf-space-1) var(--pbsf-space-2); border-radius: var(--pbsf-radius); transition: color var(--pbsf-transition-duration) var(--pbsf-transition-easing); } .pbsf-nav__link:hover { color: var(--pbsf-color-cyan); } /* * Current-page indicator. Only ever applied to the single nav item whose * own URL (no fragment) matches the current request — see the fragment * guard in PBSF_Nav_Menu_Walker::start_el(). Without that guard, WordPress * core's own current-menu-item detection would mark every `/home/#section` * link "current" simultaneously (they share /home/'s base path), which * would make this rule highlight most of the menu at once. */ .pbsf-nav__item--current .pbsf-nav__link { color: var(--pbsf-color-cyan); font-weight: 600; } /* Visible focus state — every interactive nav element */ .pbsf-header a:focus-visible, .pbsf-header button:focus-visible { outline: 2px solid var(--pbsf-color-focus); outline-offset: 2px; } /* Mobile layout */ @media (max-width: 768px) { .pbsf-header .pbsf-nav__toggle { display: inline-flex; align-items: center; gap: var(--pbsf-space-2); } .pbsf-nav__list { display: none; flex-direction: column; align-items: flex-start; gap: 0; position: absolute; top: 100%; left: 0; right: 0; background: var(--pbsf-color-panel); border-top: 1px solid var(--pbsf-color-border); padding: var(--pbsf-space-2) var(--pbsf-space-4) var(--pbsf-space-4); } .pbsf-nav__list.pbsf-nav__list--open { display: flex; } .pbsf-nav__item { width: 100%; } .pbsf-nav__link { display: block; width: 100%; padding: var(--pbsf-space-2); } } @media (prefers-reduced-motion: reduce) { .pbsf-nav__link { transition: none; } }