/* styles/navbar.css — navbar visuals (sticky bar, dropdown) */ /* #navbar-root is the fetch-injection target present on every page (see js/components/navbar.js). Sticky lives here, not on .navbar — see the comment below for why. */ #navbar-root { position: sticky; top: 0; z-index: 100; } /* Sticky is applied to #navbar-root (in base.css), not .navbar itself — a sticky element's containing block is its parent, and #navbar-root's parent is , which spans the full page height. If sticky were applied to .navbar directly, its containing block would be the tightly-fit #navbar-root wrapper (only as tall as the nav itself), which scrolls out of view almost immediately and takes the "stuck" nav with it. */ .navbar { background-color: var(--color-surface); border-bottom: 1px solid var(--color-border); box-shadow: var(--shadow-sm); transition: box-shadow var(--transition-fast); } /* A bit more pronounced once scrolled, since the page content behind it is now scrolling past rather than sitting flush beneath it. */ .navbar.is-scrolled { box-shadow: var(--shadow-md); } .navbar-inner { max-width: var(--container-max-width); margin: 0 auto; padding: var(--space-3) var(--space-5); display: flex; align-items: center; justify-content: space-between; } .navbar-logo { font-family: var(--font-heading); font-weight: 800; font-size: 1.4rem; color: var(--color-primary); } .navbar-links { display: flex; align-items: center; gap: var(--space-5); list-style: none; margin: 0; padding: 0; } .navbar-links a { color: var(--color-text); font-weight: 600; } .navbar-links a:hover, .navbar-links a.is-active { color: var(--color-primary); } .navbar-dropdown { position: relative; } /* Wraps the real "Opportunities" link plus the small caret toggle beside it — unlike the old text-only "Committees ▾" button, this nav item is a real page link, with the dropdown as a separate affordance next to it. */ .navbar-dropdown-group { display: flex; align-items: center; gap: var(--space-1); } .navbar-dropdown-toggle { background: none; border: none; cursor: pointer; font-family: var(--font-body); font-weight: 600; font-size: 1rem; color: var(--color-text); padding: 0; line-height: 1; } .navbar-dropdown-toggle:hover { color: var(--color-primary); } .navbar-dropdown-menu { position: absolute; top: 100%; left: 0; background-color: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); box-shadow: var(--shadow-md); min-width: 200px; padding: var(--space-2); display: none; flex-direction: column; } .navbar-dropdown.is-open .navbar-dropdown-menu { display: flex; } /* Desktop: hovering the item opens the dropdown directly, no click needed. Scoped above the mobile breakpoint since touch devices don't hover, and the dropdown becomes a static inline list there instead (see the media query below) — the click-to-toggle behavior in navbar.js still covers that case. */ @media (min-width: 1025px) { .navbar-dropdown:hover .navbar-dropdown-menu { display: flex; } } .navbar-dropdown-menu a { padding: var(--space-2) var(--space-3); border-radius: var(--radius-sm); color: var(--color-text); } .navbar-dropdown-menu a:hover { background-color: var(--color-primary-light); color: var(--color-primary); } .navbar-dropdown-divider { border: none; border-top: 1px solid var(--color-border); margin: var(--space-2) 0; } .navbar-dropdown-cta { font-weight: 700; color: var(--color-primary); } .navbar-auth { margin-left: var(--space-3); } /* Signed-in state injected by js/auth/role-nav.js, replacing the "Login / Join" button. */ .navbar-user { display: flex; align-items: center; gap: var(--space-3); } .navbar-user-name { font-weight: 700; color: var(--color-primary); } /* Small "pending" chip beside the name until an officer approves the account. */ .navbar-user-pending { font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; color: var(--color-text-muted); background-color: var(--color-bg); border: 1px solid var(--color-border); border-radius: var(--radius-sm); padding: 2px var(--space-2); } .navbar-logout { padding: var(--space-2) var(--space-4); font-size: 0.85rem; } .navbar-toggle { display: none; background: none; border: none; cursor: pointer; font-size: 1.5rem; color: var(--color-primary); line-height: 1; } @media (max-width: 1024px) { .navbar-toggle { display: block; } .navbar-links { position: absolute; top: 100%; left: 0; right: 0; flex-direction: column; align-items: flex-start; background-color: var(--color-surface); border-bottom: 1px solid var(--color-border); padding: var(--space-4) var(--space-5); display: none; gap: var(--space-3); } .navbar-links.is-open { display: flex; } .navbar-dropdown-menu { position: static; box-shadow: none; border: none; padding-left: var(--space-3); } .navbar-auth { margin-left: 0; } }