/* ========================================================================== NAVIGATION — WBA Theme Sticky header with logo, primary nav, mobile hamburger ========================================================================== */ /* --- Site Header -------------------------------------------------------- */ .site-header { position: fixed; top: 0; left: 0; right: 0; z-index: var(--z-nav); height: var(--nav-height-mobile); background-color: var(--nav-bg); border-bottom: 1px solid transparent; transition: border-color var(--transition-base), box-shadow var(--transition-base), background-color var(--transition-base); } /* Scrolled state — applied via JS */ .site-header.is-scrolled { background-color: var(--nav-bg-scrolled); border-bottom-color: var(--color-border); box-shadow: 0 2px 16px rgba(0, 0, 0, 0.06); } /* Transparent variant for hero pages — applied to */ body.hero-page .site-header:not(.is-scrolled) { background-color: transparent; border-bottom-color: transparent; } body.hero-page .site-header:not(.is-scrolled) .nav-logo img { /* Swap to white logo variant when header is transparent */ filter: brightness(0) invert(1); } body.hero-page .site-header:not(.is-scrolled) .nav-link { color: rgba(255, 255, 255, 0.9); } body.hero-page .site-header:not(.is-scrolled) .nav-link:hover { color: var(--color-white); } /* --- Header Inner ------------------------------------------------------- */ .site-header__inner { display: flex; align-items: center; justify-content: space-between; height: 100%; padding: 0 var(--container-px); max-width: var(--container-max); margin: 0 auto; } @media (min-width: 768px) { .site-header__inner { padding: 0 var(--container-px-md); } } @media (min-width: 1024px) { .site-header { height: var(--nav-height-desktop); } .site-header__inner { padding: 0 var(--container-px-lg); } } /* --- Logo --------------------------------------------------------------- */ .nav-logo { display: flex; align-items: center; flex-shrink: 0; z-index: 2; } .nav-logo a { display: flex; align-items: center; } .nav-logo img { height: 2.25rem; /* 36px mobile */ width: auto; display: block; transition: filter var(--transition-base); } @media (min-width: 1024px) { .nav-logo img { height: 2.5rem; /* 40px desktop */ } } /* --- Primary Nav (desktop) --------------------------------------------- */ .nav-primary { display: none; /* Hidden on mobile — shown via JS toggle */ } @media (min-width: 1024px) { .nav-primary { display: flex; align-items: center; gap: 0.125rem; flex: 1; justify-content: center; margin: 0 2rem; } } /* Nav items */ .nav-item { position: relative; } .nav-link { display: inline-flex; align-items: center; gap: 0.3rem; padding: 0.5rem 0.75rem; font-size: var(--text-sm); font-weight: var(--weight-bold); color: var(--color-dark); letter-spacing: 0.02em; text-decoration: none; border-radius: 0.25rem; transition: color var(--transition-fast), background-color var(--transition-fast); white-space: nowrap; } .nav-link:hover, .nav-link[aria-expanded="true"] { color: var(--color-red); background-color: rgba(193, 39, 45, 0.05); } /* Current page */ .nav-item.current-menu-item > .nav-link, .nav-item.current-menu-parent > .nav-link { color: var(--color-red); } /* Dropdown caret */ .nav-link.has-children::after { content: ''; display: inline-block; width: 0; height: 0; border-left: 4px solid transparent; border-right: 4px solid transparent; border-top: 5px solid currentColor; margin-top: 1px; transition: transform var(--transition-fast); } .nav-item:hover > .nav-link.has-children::after, .nav-link[aria-expanded="true"].has-children::after { transform: rotate(180deg); } /* --- Dropdown Sub-menu -------------------------------------------------- */ .nav-dropdown { position: absolute; top: calc(100% + 0.5rem); left: 50%; transform: translateX(-50%) translateY(-6px); min-width: 220px; background-color: var(--color-white); border: 1px solid var(--color-border); border-radius: var(--card-radius); box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12); padding: 0.5rem 0; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity var(--transition-fast), transform var(--transition-fast), visibility var(--transition-fast); z-index: var(--z-dropdown); } /* Show on hover/focus */ .nav-item:hover > .nav-dropdown, .nav-item:focus-within > .nav-dropdown { opacity: 1; visibility: visible; pointer-events: auto; transform: translateX(-50%) translateY(0); } /* Dropdown arrow notch */ .nav-dropdown::before { content: ''; position: absolute; top: -6px; left: 50%; transform: translateX(-50%); width: 12px; height: 6px; background-color: var(--color-white); clip-path: polygon(50% 0%, 0% 100%, 100% 100%); border-left: 1px solid var(--color-border); border-right: 1px solid var(--color-border); } /* Dropdown links */ .nav-dropdown__link { display: block; padding: 0.625rem 1.25rem; font-size: var(--text-sm); font-weight: var(--weight-bold); color: var(--color-dark); text-decoration: none; letter-spacing: 0.01em; transition: color var(--transition-fast), background-color var(--transition-fast); } .nav-dropdown__link:hover { color: var(--color-red); background-color: rgba(193, 39, 45, 0.04); } /* --- CTA Button (nav right) -------------------------------------------- */ .nav-cta { display: none; flex-shrink: 0; } @media (min-width: 1024px) { .nav-cta { display: flex; align-items: center; } } .nav-cta .btn { padding: 0.5625rem 1.25rem; font-size: var(--text-xs); } /* --- Hamburger Toggle --------------------------------------------------- */ .nav-toggle { display: flex; flex-direction: column; justify-content: center; align-items: center; width: 2.5rem; height: 2.5rem; gap: 5px; cursor: pointer; border: none; background: none; padding: 0.25rem; border-radius: 0.25rem; z-index: var(--z-nav); flex-shrink: 0; transition: background-color var(--transition-fast); } .nav-toggle:hover { background-color: var(--color-off-white); } .nav-toggle__bar { display: block; width: 22px; height: 2px; background-color: var(--color-dark); border-radius: 2px; transition: transform var(--transition-base), opacity var(--transition-fast), width var(--transition-fast); transform-origin: center; } /* Animated X state */ .nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(1) { transform: translateY(7px) rotate(45deg); } .nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(2) { opacity: 0; width: 0; } .nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } @media (min-width: 1024px) { .nav-toggle { display: none; /* Hidden on desktop */ } } /* --- Mobile Navigation Menu -------------------------------------------- */ .nav-mobile { position: fixed; top: var(--nav-height-mobile); left: 0; right: 0; bottom: 0; background-color: var(--color-white); z-index: calc(var(--z-nav) - 1); overflow-y: auto; padding: 1.5rem var(--container-px); transform: translateX(100%); transition: transform var(--transition-base); border-top: 1px solid var(--color-border); } .nav-mobile.is-open { transform: translateX(0); } @media (min-width: 1024px) { .nav-mobile { display: none; /* Not needed on desktop */ } } /* Mobile menu — top level items */ .nav-mobile__item { border-bottom: 1px solid var(--color-border); } .nav-mobile__link { display: flex; align-items: center; justify-content: space-between; padding: 1rem 0; font-size: var(--text-base); font-weight: var(--weight-bold); color: var(--color-dark); text-decoration: none; letter-spacing: 0.01em; } .nav-mobile__link:hover, .nav-mobile__link.is-active { color: var(--color-red); } /* Mobile submenu toggle */ .nav-mobile__toggle { display: flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; border-radius: 50%; background-color: var(--color-off-white); font-size: 1rem; transition: background-color var(--transition-fast), transform var(--transition-fast); flex-shrink: 0; } .nav-mobile__item.is-expanded .nav-mobile__toggle { transform: rotate(180deg); background-color: rgba(193, 39, 45, 0.08); color: var(--color-red); } /* Mobile submenu */ .nav-mobile__sub { display: none; padding: 0 0 0.75rem 1rem; } .nav-mobile__item.is-expanded > .nav-mobile__sub { display: block; } .nav-mobile__sub-link { display: block; padding: 0.625rem 0; font-size: var(--text-sm); font-weight: var(--weight-bold); color: var(--color-muted); text-decoration: none; letter-spacing: 0.01em; transition: color var(--transition-fast); } .nav-mobile__sub-link:hover { color: var(--color-red); } /* Mobile CTA */ .nav-mobile__cta { margin-top: 1.5rem; display: flex; flex-direction: column; gap: 0.75rem; } .nav-mobile__cta .btn { width: 100%; justify-content: center; } /* Overlay — dims content behind mobile menu */ .nav-overlay { display: none; position: fixed; inset: 0; background-color: rgba(0, 0, 0, 0.35); z-index: calc(var(--z-nav) - 2); backdrop-filter: blur(2px); } .nav-overlay.is-visible { display: block; } @media (min-width: 1024px) { .nav-overlay { display: none !important; } }