/* Site header — the single source of truth for the primary nav. * * These rules used to be copy-pasted into three stylesheets (site-nav.css, * service-page.css, calc/shared.css) that had to be hand-synced; they now live * only here, and standardize-nav.mjs links this file from every page. * * Mobile-first: everything below is the phone layout. Desktop is added in the * single (min-width: 761px) block near the bottom. There are no max-width * layout queries — if you find yourself reaching for one, you are fighting the * base styles rather than extending them. * * JS-off contract: with no script, the links render as a plain stacked column * and every one is reachable. The drawer only engages once site-nav.js sets * data-nav-js on , so the closed panel can never trap links behind a * button that cannot open. */ :root { --chrome-bg: #07131f; --chrome-accent: #38b6d4; --chrome-ink: #e8f4f8; --chrome-line: rgba(56, 182, 212, 0.15); } .top { background: var(--chrome-bg); color: var(--chrome-ink); border-bottom: 1px solid var(--chrome-line); font-family: 'Outfit', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; line-height: 1.65; } /* Matches the .wrap/.breadcrumbs container the rest of the chrome uses, so the * brand lines up with the page content below it. */ .top-inner { width: min(1120px, calc(100% - 32px)); margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; flex-wrap: wrap; padding: 0.75rem 0; } .top a { color: var(--chrome-ink); text-decoration: none; font-weight: 700; } /* Brand ------------------------------------------------------------------ */ .top .brand { display: inline-flex; align-items: center; gap: 0.5rem; flex: none; font-size: 1.05rem; white-space: nowrap; } .top .brand img { height: 30px; width: auto; display: block; flex: none; } /* Hamburger -------------------------------------------------------------- */ /* Injected by site-nav.js, so it is hidden unless that script is running. */ .top .nav-toggle { display: none; align-items: center; justify-content: center; position: relative; z-index: 1000; width: 44px; /* 44px: the minimum comfortable touch target */ height: 44px; padding: 0; margin: -4px -6px -4px 0; background: none; border: 0; border-radius: 8px; color: var(--chrome-ink); cursor: pointer; flex: none; } [data-nav-js] .top .nav-toggle { display: inline-flex; } .top .nav-toggle:focus-visible { outline: 2px solid var(--chrome-accent); outline-offset: 2px; } .top .nav-toggle svg { width: 24px; height: 24px; display: block; pointer-events: none; } .top .nav-toggle .icon-close { display: none; } .top .nav-toggle[aria-expanded="true"] .icon-open { display: none; } .top .nav-toggle[aria-expanded="true"] .icon-close { display: block; } .site-nav-backdrop { position: fixed; inset: 0; z-index: 998; background: rgba(5, 13, 24, 0.6); opacity: 0; visibility: hidden; transition: opacity 0.25s ease, visibility 0.25s ease; } .site-nav-backdrop.is-open { opacity: 1; visibility: visible; } /* Links — base (phone) --------------------------------------------------- */ /* No JS: a plain stacked column, fully visible and reachable. */ .top .navlinks { display: flex; flex-direction: column; align-items: stretch; gap: 0.25rem; width: 100%; padding: 0.5rem 0 0.75rem; font-size: 1rem; } .top .navlinks a { color: var(--chrome-ink); text-decoration: none; padding: 0.85rem 0.5rem; border-radius: 8px; display: block; } .top .navlinks > a:not(.book-now) { border-bottom: 1px solid rgba(56, 182, 212, 0.1); } .top .navlinks a:hover { color: var(--chrome-accent); } .top .navlinks .book-now { margin-top: 1rem; text-align: center; padding: 0.85rem 1rem; background: var(--chrome-accent); color: #0d2137; border-radius: 999px; } .top .navlinks .book-now:hover { color: #0d2137; filter: brightness(1.08); } /* With JS, the column becomes an off-canvas drawer. */ [data-nav-js] .top .top-inner { flex-wrap: nowrap; } [data-nav-js] .top .navlinks { position: fixed; top: 0; right: 0; bottom: 0; z-index: 999; width: min(320px, 82vw); margin: 0; padding: 5rem 1.5rem 2rem; background: var(--chrome-bg); border-left: 1px solid var(--chrome-line); box-shadow: -12px 0 40px rgba(0, 0, 0, 0.4); overflow-y: auto; transform: translateX(100%); transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1); } [data-nav-js] .top .navlinks.is-open { transform: translateX(0); } /* Dropdowns — native
, so they work with no JS ------------------ */ .navdrop { border-bottom: 1px solid rgba(56, 182, 212, 0.1); } .navdrop summary { display: flex; align-items: center; justify-content: space-between; gap: 0.4rem; padding: 0.85rem 0.5rem; border-radius: 8px; color: var(--chrome-ink); cursor: pointer; list-style: none; user-select: none; } /* The default disclosure triangle is replaced by the chevron below. */ .navdrop summary::-webkit-details-marker { display: none; } .navdrop summary::marker { content: ""; } .navdrop summary:hover { color: var(--chrome-accent); } .navdrop summary:focus-visible { outline: 2px solid var(--chrome-accent); outline-offset: 2px; } .navdrop summary::after { content: ""; width: 8px; height: 8px; flex: none; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg) translate(-2px, -2px); opacity: 0.7; transition: transform 0.18s ease; } .navdrop[open] summary::after { transform: rotate(-135deg) translate(-2px, -2px); } /* Phone: an accordion inside the drawer, not a floating panel. */ .navdrop-menu { display: flex; flex-direction: column; padding: 0 0 0.4rem 0.75rem; } .navdrop-menu a { font-size: 0.94rem; padding: 0.6rem 0.5rem; color: rgba(232, 244, 248, 0.82); } .navdrop-menu a:hover { color: var(--chrome-accent); } .navdrop-all { margin-top: 0.15rem; font-weight: 600; color: var(--chrome-accent) !important; } /* Desktop ---------------------------------------------------------------- */ /* The only layout breakpoint. 761px pairs with site-nav.js's 760px drawer * cutoff, so the drawer and the row can never both be live at once. */ @media (min-width: 761px) { .top-inner { padding: 1rem 0; flex-wrap: nowrap; } /* The row is fully visible up here, so the drawer controls have nothing to * do. Without this the button stays displayed by the [data-nav-js] rule at * every width, and the backdrop can still be raised over the page. */ .top .nav-toggle, [data-nav-js] .top .nav-toggle { display: none; } .site-nav-backdrop { display: none; } .top .navlinks, [data-nav-js] .top .navlinks { position: static; flex-direction: row; align-items: center; gap: 1.1rem; width: auto; padding: 0; font-size: 0.92rem; background: none; border: 0; box-shadow: none; overflow: visible; transform: none; transition: none; } .top .navlinks a { padding: 0.35rem 0; border-bottom: 0; } .top .navlinks > a:not(.book-now) { border-bottom: 0; } .top .navlinks .book-now { margin-top: 0; padding: 0.45rem 0.9rem; } /* The accordion becomes a floating panel. */ .navdrop { position: relative; border-bottom: 0; } .navdrop summary { padding: 0.35rem 0; } .navdrop-menu { position: absolute; top: calc(100% + 0.55rem); left: -0.75rem; z-index: 950; min-width: 230px; padding: 0.4rem; background: var(--chrome-bg); border: 1px solid var(--chrome-line); border-radius: 10px; box-shadow: 0 14px 38px rgba(0, 0, 0, 0.45); } /* A hover bridge across the gap above: without it the panel closes when the * pointer crosses the margin between summary and menu. */ .navdrop-menu::before { content: ""; position: absolute; top: -0.55rem; left: 0; right: 0; height: 0.55rem; } .navdrop-menu a { padding: 0.5rem 0.6rem; border-radius: 6px; } .navdrop-menu a:hover { background: rgba(56, 182, 212, 0.1); } .navdrop-all { margin-top: 0.25rem; border-top: 1px solid var(--chrome-line); padding-top: 0.55rem !important; } } /* Hover-open is a desktop pointer affordance only. It is additive: the panel * still opens on click and on keyboard activation, so it is never the only way * in. Guarded by `hover` so touch devices that report a wide viewport do not * get a menu that opens under the finger on the way to somewhere else. */ @media (min-width: 761px) and (hover: hover) and (pointer: fine) { .navdrop:hover .navdrop-menu, .navdrop:focus-within .navdrop-menu { display: flex; } .navdrop:not([open]) .navdrop-menu { display: none; } .navdrop:hover summary::after, .navdrop:focus-within summary::after { transform: rotate(-135deg) translate(-2px, -2px); } } @media (prefers-reduced-motion: reduce) { .top .navlinks, [data-nav-js] .top .navlinks, .site-nav-backdrop, .navdrop summary::after { transition: none; } }