/* BoemBoost Theme — header.css Matches exact Suplusnis design: teal bg, Syne logo, mint CTA ============================================================= */ /* ---------------------------------------- Nav bar wrapper ---------------------------------------- */ .bb-nav-bar { position: fixed; top: 0; left: 0; right: 0; z-index: 9000; /* backdrop-filter creates stacking context — must be above all page content */ height: 72px; background: var(--bb-nav-bg, rgba(0, 59, 59, 0.97)); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); transition: box-shadow 0.3s ease, background 0.3s ease; isolation: isolate; } .bb-nav-bar.is-scrolled { box-shadow: var(--bb-shadow-nav, var(--bb-shadow-md)); /* v3.9.150 — scrolled background; valt terug op de gewone nav-bg, en daarna op de originele kleur */ background: var(--bb-nav-bg-scrolled, var(--bb-nav-bg, rgba(0, 59, 59, 0.98))); } .bb-nav-bar__inner { width: 100%; padding: 0 5%; height: 100%; display: flex; align-items: center; justify-content: space-between; gap: 0; } /* Nav right takes remaining space, pushes everything to the right */ .bb-nav-right { display: flex; align-items: center; gap: 1.8rem; margin-left: auto; } /* v3.9.155 — desktop hamburger mode: hide inline nav-right in the bar (it becomes the slide-in panel); keep Contact + hamburger visible. */ @media (min-width: 769px) { .bb-nav-bar--desktop-burger .bb-nav-right:not(.is-open):not([style*="fixed"]) { /* Once JS portals nav-right to , this in-bar copy is gone anyway. Before JS runs, hide it so there's no flash of inline links. */ display: none; } .bb-nav-bar--desktop-burger .bb-nav-cta { margin-left: auto; width: auto; flex-shrink: 0; } .bb-nav-bar--desktop-burger .bb-hamburger { margin-left: 1.5rem; } } /* ---------------------------------------- Logo ---------------------------------------- */ .bb-nav-logo { display: inline-flex; align-items: center; text-decoration: none; flex-shrink: 0; gap: 0; } .bb-nav-logo__name { font-family: var(--bb-font-heading); font-weight: 700; font-size: 1.1rem; color: #ffffff; letter-spacing: 0.04em; line-height: 1; } .bb-nav-logo__sub { font-family: var(--bb-font); font-size: 9px; font-weight: 300; color: var(--bb-accent); letter-spacing: 0.14em; text-transform: uppercase; border-left: 1px solid rgba(153, 255, 187, 0.35); margin-left: 14px; padding-left: 14px; line-height: 1.4; } /* Custom logo image — constrain to nav height */ .bb-nav-logo--image { display: flex; align-items: center; flex-shrink: 0; } .bb-nav-logo--image a.custom-logo-link { display: flex; align-items: center; line-height: 0; } .bb-nav-logo--image img.custom-logo { height: 36px !important; width: auto !important; max-width: 200px !important; display: block !important; } /* ---------------------------------------- Nav links ---------------------------------------- */ .bb-nav-links { display: flex; align-items: center; gap: 1.6rem; list-style: none; margin: 0; padding: 0; } .bb-nav__link { /* v3.9.153 — inline-flex + vaste line-height, zodat en de dropdown-