/** * header-nav-desktop.css - Desktop Primary Nav & Dropdown Menus * * Owns the visual treatment of the primary nav at desktop * widths: * - Top-level plain anchors (header-only override of the * shared .nav-list a base from nav-toggle.css). * - Dropdown trigger buttons -- styled to read identically * to plain anchors so the row is visually consistent. * - Dropdown caret indicator (rotates open/closed). * - Floating submenu panels with hover, focus-within, and * .is-open trigger states. * - Submenu link styling and the highlighted CTA child * (the Call Us tel: action at the bottom of the * Contact Us dropdown). * * Mobile accordion treatment for the same nav lives in * header-nav-mobile.css. Structural layout (grid, sticky, * branding) lives in header-layout.css. * * @package LibrandiOutdoorPower * @since 0.1.0 * @updated 0.1.1 - Top-level items (plain anchors + dropdown * triggers) gained a visible resting pill * affordance (faint primary wash + solid * border) so they read as buttons against * the busy blueprint header backdrop. Submenu * links explicitly cancel the inherited * bottom-only border-on-hover from * .nav-list a in nav-toggle.css so the * current-menu-item active state and hover * state both wrap the full pill via * background-color + border-radius rather * than reading as a stray underline. * @updated 0.1.2 - Top-level pill rest state rebuilt as a * frosted-glass surface using backdrop-filter: * blur() against a translucent white. The * prior 8% primary-color wash failed to * obscure the blueprint hairlines beneath the * pills; the blur treatment turns the noisy * backdrop into a quiet gray surface so the * text reads cleanly. Hover/active states * drop the blur and commit to a fully opaque * amber pill. * Submenu hover state replaced with a strong * visible affordance (amber-tinted background * + full 4-sided amber border + amber text) * so it cannot be mistaken for "no hover." * Defensive border:none rules from v0.1.1 * removed because the cascade leak they * worked around was fixed at the source -- * nav-toggle.css's .nav-list a base no * longer ships cosmetic rules. */ /* ========================================================== Primary nav list -- horizontal row of top-level items Inherits .nav-list from nav-toggle.css for the shared base. Rules below override or extend specifically for dropdown triggers. The plain anchors keep their existing component treatment unchanged. ========================================================== */ .nav-list { /* Slightly tighter gap than the shared default so the dropdown triggers do not push the row wider than the contained .site-header__bar at 1024-1100px viewports. */ gap: var(--space-4); } /* Dropdown parent
  • -- positioning anchor for the submenu. */ .nav-item--has-children { position: relative; } /* ========================================================== Top-level nav items (plain anchors + dropdown triggers) The header sits on a busy white-and-red blueprint pattern, so any cosmetic styling must produce a pill silhouette that reads cleanly against the grid hairlines. Earlier passes tried a faint primary-color wash (8-12% alpha) but the pattern still bled through and the items disappeared. The fix: a TRANSLUCENT WHITE PILL with backdrop-filter: blur() so the blueprint behind each pill is actually obliterated by a frosted-glass treatment. The grid hairlines are blurred into a soft surface that the dark text reads against without competition. This is the same affordance pattern modern OS chrome uses (macOS menu bar, iOS headers) and it solves the problem decisively at the surface level rather than fighting the backdrop with translucency tricks. Both plain anchors (Home, Services, Equipment) and dropdown trigger