/* ========================================================================== Navbar ========================================================================== */ .navbar { position: fixed; top: 0; left: 0; right: 0; z-index: 50; height: 64px; display: flex; align-items: center; background: transparent; transition: background 0.4s var(--ease-smooth), backdrop-filter 0.4s var(--ease-smooth), box-shadow 0.4s var(--ease-smooth); } /* Scrolled state (front page) */ .navbar.nav-scrolled { background: rgba(38, 36, 34, 0.95); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); box-shadow: 0 2px 20px rgba(0, 0, 0, 0.15); } /* ── Drupal admin toolbar offset ────────────────────────── */ /* Drupal adds toolbar-fixed to via JS when the admin toolbar is present. Push our fixed navbar below it so it isn't hidden. */ body.toolbar-fixed .navbar { top: 39px; } body.toolbar-fixed.toolbar-tray-open.toolbar-horizontal .navbar { top: 79px; } /* ── Inner pages — solid white navbar with dark text ─────── */ .navbar--inner { background: #ffffff; box-shadow: 0 1px 0 rgba(0, 0, 0, 0.08); } .navbar--inner .navbar__link { color: var(--charcoal); } .navbar--inner .navbar__link:hover, .navbar--inner .navbar__link:focus { color: var(--deep-bronze); background-size: 100% 2px; } .navbar--inner.nav-scrolled { background: rgba(255, 255, 255, 0.97); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); } /* Navbar container */ .navbar__container { width: 100%; max-width: 1280px; margin: 0 auto; padding: 0 1.5rem; display: flex; align-items: center; justify-content: space-between; } /* Logo area */ .navbar__brand { display: flex; align-items: center; gap: 0.75rem; text-decoration: none; color: var(--warm-white); } .navbar__logo-icon { width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; } .navbar__logo-icon svg { width: 100%; height: 100%; fill: var(--muted-gold); } .navbar__logo-text { display: flex; align-items: baseline; gap: 0.25rem; font-family: var(--font-display); } .navbar__logo-name { font-size: 1.25rem; font-weight: 700; color: var(--warm-white); } .navbar__logo-suffix { font-size: 1rem; font-weight: 400; color: rgba(255, 255, 255, 0.7); } /* Desktop navigation */ .navbar__nav { display: flex; align-items: center; gap: 2rem; } .navbar__menu { display: flex; align-items: center; gap: 1.5rem; list-style: none; margin: 0; padding: 0; } /* Desktop nav links with underline hover effect */ .navbar__link { position: relative; font-family: var(--font-body); font-size: 0.9375rem; font-weight: 500; color: rgba(255, 255, 255, 0.85); text-decoration: none; padding: 0.25rem 0; background-image: linear-gradient(currentColor, currentColor); background-position: 0% 100%; background-repeat: no-repeat; background-size: 0% 2px; transition: color 0.3s var(--ease-smooth), background-size 0.3s var(--ease-smooth); } .navbar__link:hover, .navbar__link:focus { color: var(--warm-white); background-size: 100% 2px; } /* CTA button */ .navbar__cta { display: inline-flex; align-items: center; justify-content: center; padding: 0.625rem 1.5rem; font-family: var(--font-body); font-size: 0.9375rem; font-weight: 600; color: var(--warm-white); background-color: var(--muted-gold); border: 2px solid var(--muted-gold); border-radius: 4px; text-decoration: none; transition: all 0.3s var(--ease-smooth); cursor: pointer; } .navbar__cta:hover, .navbar__cta:focus { background-color: transparent; color: var(--muted-gold); } /* Mobile hamburger toggle */ .navbar__toggle { display: none; flex-direction: column; justify-content: center; align-items: center; width: 40px; height: 40px; padding: 0; background: none; border: none; cursor: pointer; gap: 5px; } .navbar__toggle-bar { display: block; width: 24px; height: 2px; background-color: var(--warm-white); border-radius: 1px; transition: transform 0.3s var(--ease-smooth), opacity 0.3s var(--ease-smooth); } .navbar__toggle[aria-expanded="true"] .navbar__toggle-bar:nth-child(1) { transform: translateY(7px) rotate(45deg); } .navbar__toggle[aria-expanded="true"] .navbar__toggle-bar:nth-child(2) { opacity: 0; } .navbar__toggle[aria-expanded="true"] .navbar__toggle-bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } /* Mobile menu dropdown */ .navbar__mobile-menu { display: none; position: absolute; top: 64px; left: 0; right: 0; background: rgba(38, 36, 34, 0.98); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); padding: 1.5rem; box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3); } .navbar__mobile-menu.is-open { display: block; } .navbar__mobile-menu .navbar__menu { flex-direction: column; align-items: flex-start; gap: 1rem; } .navbar__mobile-menu .navbar__link { font-size: 1.125rem; padding: 0.5rem 0; } .navbar__mobile-menu .navbar__cta { width: 100%; margin-top: 1rem; } /* ── Drupal block wrapper ────────────────────────────────── */ /* The menu block wraps links in