/* ═══════════════════════════════════════════════════════ FLOATING ISLAND NAVIGATION Restyles the existing #header markup into a detached glass pill. Load AFTER main.css and site-theme.css. Selectors are scoped to #header on purpose: site-theme.css styles the nav with !important rules of its own, so these need the ID to win the cascade. Show/hide on scroll is driven by main.js, which puts .header-hidden / .header-visible / .scrolled on . ═══════════════════════════════════════════════════════ */ /* ── Tokens ── Defaults are LIGHT so pages that don't load site-theme.css (the /extras/ pages) still get a correct-looking bar. */ :root { --fi-glass: rgba(252, 252, 252, 0.86); --fi-glass-solid: rgba(255, 255, 255, 0.975); --fi-panel: #ffffff; --fi-border: rgba(0, 0, 0, 0.10); --fi-shadow: 0 14px 40px rgba(0, 0, 0, 0.12); --fi-text: #232a25; --fi-muted: #5a6a5f; --fi-accent: #295233; --fi-accent-soft: rgba(41, 82, 51, 0.10); --fi-accent-glow: rgba(41, 82, 51, 0.30); --fi-pill: rgba(0, 0, 0, 0.055); } html[data-theme="dark"] { --fi-glass: rgba(17, 17, 19, 0.84); --fi-glass-solid: rgba(13, 13, 15, 0.975); --fi-panel: #101012; --fi-border: rgba(255, 255, 255, 0.09); --fi-shadow: 0 18px 50px rgba(0, 0, 0, 0.55); --fi-text: #e8e8e8; --fi-muted: #9a9a9a; --fi-accent: #3ea86a; --fi-accent-soft: rgba(62, 168, 106, 0.14); --fi-accent-glow: rgba(62, 168, 106, 0.35); --fi-pill: rgba(255, 255, 255, 0.07); } html[data-theme="light"] { --fi-glass: rgba(252, 252, 252, 0.86); --fi-glass-solid: rgba(255, 255, 255, 0.975); --fi-panel: #ffffff; --fi-border: rgba(0, 0, 0, 0.10); --fi-shadow: 0 14px 40px rgba(0, 0, 0, 0.12); --fi-text: #232a25; --fi-muted: #5a6a5f; --fi-accent: #295233; --fi-accent-soft: rgba(41, 82, 51, 0.10); --fi-accent-glow: rgba(41, 82, 51, 0.30); --fi-pill: rgba(0, 0, 0, 0.055); } /* ── Per-page accent overrides ── These sit on so they inherit into #header. The ambulance build page runs on its own pink/red accent (main.css #de5964), so the nav follows it instead of the site green. */ body.ambulance-page { --fi-accent: #de5964; --fi-accent-soft: rgba(222, 89, 100, 0.12); --fi-accent-glow: rgba(222, 89, 100, 0.32); } /* ══════════════════════════════════ THE SHELL — transparent, so the pill floats ══════════════════════════════════ */ #header.header { background: transparent !important; background-color: transparent !important; border: 0 !important; border-bottom: 0 !important; box-shadow: none !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; padding: 20px 0 !important; transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1), padding 0.35s ease !important; will-change: transform; } body.scrolled #header.header { padding: 14px 0 !important; } /* Hide on scroll down / reveal on scroll up. Extra distance so the pill's shadow clears the viewport too. Leaving is a touch slower than returning, so it glides away but comes back promptly. How MUCH scrolling triggers it lives in main.js. */ body.header-hidden #header.header { transform: translateY(calc(-100% - 24px)); transition: transform 0.55s cubic-bezier(0.4, 0, 0.2, 1), padding 0.35s ease !important; } body.header-visible #header.header { transform: translateY(0); transition: transform 0.42s cubic-bezier(0.22, 1, 0.36, 1), padding 0.35s ease !important; } /* Never hide the bar while the mobile menu is open */ body.mobile-nav-active #header.header { transform: translateY(0) !important; } @media (prefers-reduced-motion: reduce) { #header.header { transition: none !important; } } /* The nested Extras

never had list-style cleared, which showed as bullets once the dropdown padding tightened. */ #header .navmenu ul, #header .navmenu ul li { list-style: none !important; } /* ══════════════════════════════════ THE PILL ══════════════════════════════════ */ #header .container { padding: 11px 14px 11px 26px !important; border-radius: 999px; background: var(--fi-glass); -webkit-backdrop-filter: blur(22px) saturate(160%); backdrop-filter: blur(22px) saturate(160%); border: 1px solid var(--fi-border); box-shadow: var(--fi-shadow); transition: background 0.35s ease, border-color 0.35s ease, box-shadow 0.35s ease, padding 0.35s ease; } body.scrolled #header .container { background: var(--fi-glass-solid); } /* ── Logo: transparent mark, no boxed background ── */ #header .logo img { max-height: 38px !important; width: auto; margin-right: 0 !important; transition: max-height 0.35s ease; } body.scrolled #header .logo img { max-height: 33px !important; } /* ══════════════════════════════════ DESKTOP ══════════════════════════════════ */ @media (min-width: 1200px) { #header .container { column-gap: 14px !important; } #header .navmenu > ul { padding: 0 !important; gap: 2px !important; background: none !important; border: 0 !important; box-shadow: none !important; } #header .navmenu > ul > li.dropdown { padding-bottom: 14px !important; margin-bottom: -14px !important; } #header .navmenu > ul > li > a, #header .navmenu > ul > li > a:focus { font-size: 15.5px !important; font-weight: 500 !important; padding: 11px 20px !important; min-height: 0 !important; justify-content: center !important; color: var(--fi-muted) !important; } /* Kill the old green tab that sat above each link */ #header .navmenu > ul > li > a:after { display: none !important; } /* Hover pill */ #header .navmenu > ul > li > a:before { background: var(--fi-pill) !important; border-color: transparent !important; box-shadow: none !important; } #header .navmenu > ul > li > a:hover, #header .navmenu > ul > li:hover > a { color: var(--fi-text) !important; } /* Active page = filled accent pill */ #header .navmenu > ul > li > a.active, #header .navmenu > ul > li > a.active:focus, #header .navmenu > ul > li > a.active:hover, #header .navmenu > ul > li:hover > a.active { color: #ffffff !important; } #header .navmenu > ul > li > a.active:before, #header .navmenu > ul > li:hover > a.active:before { background: var(--fi-accent) !important; border-color: transparent !important; box-shadow: 0 6px 18px var(--fi-accent-glow) !important; opacity: 1 !important; transform: scale(1) !important; } /* Chevron */ #header .navmenu > ul > li > a i { font-size: 12px !important; margin-left: 7px !important; transition: transform 0.25s ease !important; } #header .navmenu > ul > li.dropdown:hover > a i { transform: rotate(180deg); } /* ── Extras dropdown ── */ #header .navmenu .dropdown > ul { left: 50% !important; min-width: 240px; padding: 8px !important; border-radius: 16px !important; background: var(--fi-panel) !important; -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); border: 1px solid var(--fi-border) !important; box-shadow: var(--fi-shadow) !important; transform: translate(-50%, 8px) !important; } #header .navmenu .dropdown:hover > ul { transform: translate(-50%, 0) !important; } #header .navmenu .dropdown ul li a, #header .navmenu .dropdown ul li a:focus { padding: 10px 14px !important; font-size: 13.5px !important; font-weight: 500 !important; border-radius: 10px !important; color: var(--fi-text) !important; justify-content: flex-start !important; } #header .navmenu .dropdown ul li:hover > a, #header .navmenu .dropdown ul li a:hover, #header .navmenu .dropdown ul li a.active { background: var(--fi-accent-soft) !important; color: var(--fi-accent) !important; } /* ── Social icons inside the pill ── */ #header .header-social-links { display: flex; align-items: center; gap: 2px; padding-right: 6px !important; } #header .header-social-links a { padding: 0 !important; width: 38px; height: 38px; display: grid; place-items: center; border-radius: 11px; transition: background 0.2s ease; } #header .header-social-links a i { font-size: 19px !important; line-height: 1 !important; color: var(--fi-muted) !important; transition: color 0.2s ease; } #header .header-social-links a:hover { background: var(--fi-pill); } #header .header-social-links a:hover i { color: var(--fi-accent) !important; } } /* ══════════════════════════════════ MOBILE / TABLET ══════════════════════════════════ */ @media (max-width: 1199px) { #header.header { padding: 14px 0 !important; } body.scrolled #header.header { padding: 10px 0 !important; } #header .container { padding: 9px 10px 9px 18px !important; } #header .logo img, body.scrolled #header .logo img { max-height: 32px !important; } /* Logo left, hamburger hard right, nothing in between */ #header .logo { margin-right: auto !important; } #header .navmenu { margin-left: auto !important; } #header .mobile-nav-toggle { margin-right: 6px !important; font-size: 27px !important; color: var(--fi-text) !important; } /* main.css turns .navmenu into a dark scrim when the menu opens, but .header carries a transform (the show/hide animation), so that "fixed" scrim is sized to the header box, not the viewport — it just draws a grey rectangle over the pill. Drop it; the menu card is surface enough. */ body.mobile-nav-active #header .navmenu { background: transparent !important; } /* Keep the close button where the hamburger was, inside the pill. It is positioned against .navmenu, which spans the header box. */ body.mobile-nav-active #header .mobile-nav-toggle { position: absolute !important; top: 50% !important; right: 14px !important; bottom: auto !important; left: auto !important; transform: translateY(-50%); font-size: 27px !important; margin-right: 0 !important; color: var(--fi-accent) !important; z-index: 10001 !important; } /* Dropdown panel, aligned under the pill */ #header .navmenu > ul { top: 84px !important; left: 16px !important; right: 16px !important; max-height: calc(100vh - 110px) !important; padding: 10px !important; border-radius: 20px !important; background: var(--fi-panel) !important; background-color: var(--fi-panel) !important; -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); border: 1px solid var(--fi-border) !important; box-shadow: var(--fi-shadow) !important; } #header .navmenu > ul > li > a, #header .navmenu > ul > li > a:focus { font-size: 15.5px !important; font-weight: 500 !important; min-height: 48px !important; border-radius: 12px !important; color: var(--fi-text) !important; } #header .navmenu > ul > li > a.active { background: var(--fi-accent) !important; color: #ffffff !important; } #header .navmenu > ul > li > a.active i { background-color: rgba(255, 255, 255, 0.2) !important; color: #ffffff !important; } /* main.js reuses .active on the Extras link to mean "expanded", which would otherwise render it as the current page. Only paint it green when the submenu is closed. */ #header .navmenu > ul > li.dropdown:has(> ul.dropdown-active) > a.active { background: var(--fi-pill) !important; color: var(--fi-text) !important; } /* Nested submenu sits inside the card — no surface of its own */ #header .navmenu .dropdown ul { background: transparent !important; background-color: transparent !important; border: 0 !important; box-shadow: none !important; } #header .navmenu .dropdown ul li a, #header .navmenu .dropdown ul li a:focus { font-size: 14px !important; border-radius: 10px !important; color: var(--fi-muted) !important; } #header .navmenu .dropdown ul li a.active { background: var(--fi-accent-soft) !important; color: var(--fi-accent) !important; } }