/* ========================================================================== FastLocations shared nav system -------------------------------------------------------------------------- One bar for every primary page. Linked LAST in so it wins over the per-page nav rules those pages still carry inline. The bar has no colour of its own: js/fl-nav.js samples the colours the page's own hero paints along its top edge and lays them across the bar, so the two meet with no seam. That script also decides light vs dark: - dark hero -> white links, white logo (default, below) - light hero -> dark grey links, dark logo (.flnav-light) Everything here is self-contained - no page variables - because the pages disagree about what --line, --border and --ink mean. ========================================================================== */ :root { --flnav-ink: #3f4650; /* link colour on a light bar */ --flnav-ink-strong: #1f242c; --flnav-accent: #3f4650; /* dropdown panel type; JS sets per page */ --flnav-drawer: #1f2937; /* mobile drawer fill; JS sets per page */ --flnav-line: #e2e8f0; } .flnav-topbar { position: sticky; top: 0; z-index: 1000; /* Fallback only - fl-nav.js replaces this with the hero's own top-edge colours. Kept neutral so a no-JS page is still legible. */ background-color: #1f2937; background-repeat: no-repeat; border-bottom: none; /* the pages this replaces frosted their white bar; the new one is opaque */ -webkit-backdrop-filter: none; backdrop-filter: none; } /* The brand title chip is gone from the system; neutralised here so any page still carrying the markup does not sprout one. */ .flnav-title { display: none !important; } .flnav-row { position: relative; max-width: 1200px; margin: 0 auto; padding: 10px 24px; display: flex; align-items: center; justify-content: space-between; } .flnav-brand { display: flex; align-items: center; gap: 12px; text-decoration: none; } .flnav-brand:hover { text-decoration: none; } .flnav-logo { height: 34px; width: auto; display: block; } /* ---- links ---------------------------------------------------------- */ .flnav-links { display: flex; gap: 0; align-items: center; } .flnav-links a, .flnav-droptrigger { color: #ffffff; font-family: inherit; font-size: 12px; font-weight: 600; line-height: 1.3; padding: 6px 8px; border: none; background: transparent; border-radius: 8px; text-decoration: none; white-space: nowrap; cursor: pointer; transition: background 0.15s ease, color 0.15s ease; } .flnav-links a:hover, .flnav-droptrigger:hover { color: #ffffff; background: rgba(255, 255, 255, 0.16); text-decoration: none; } /* .active also lands on the Resources trigger when the current page is one of the three links inside that menu. */ .flnav-links a.active, .flnav-droptrigger.active { color: #ffffff; background: rgba(255, 255, 255, 0.22); } .flnav-links a:focus-visible, .flnav-droptrigger:focus-visible { outline: 2px solid rgba(255, 255, 255, 0.85); outline-offset: 1px; } /* ---- Resources dropdown --------------------------------------------- */ .flnav-drop { position: relative; display: flex; align-items: center; } .flnav-droptrigger { display: inline-flex; align-items: center; gap: 5px; } .flnav-caret { width: 9px; height: 9px; flex: none; transition: transform 0.15s ease; } .flnav-drop:hover .flnav-caret, .flnav-drop:focus-within .flnav-caret { transform: rotate(180deg); } .flnav-dropmenu { display: none; position: absolute; top: 100%; right: 0; min-width: 168px; padding: 6px; background: #ffffff; border: 1px solid var(--flnav-line); border-radius: 12px; box-shadow: 0 14px 34px rgba(15, 23, 42, 0.18); } .flnav-drop:hover .flnav-dropmenu, .flnav-drop:focus-within .flnav-dropmenu { display: block; } .flnav-links .flnav-dropmenu a { display: block; color: var(--flnav-accent); padding: 7px 10px; border-radius: 8px; } .flnav-links .flnav-dropmenu a:hover, .flnav-links .flnav-dropmenu a.active { color: var(--flnav-accent); background: rgba(15, 23, 42, 0.06); } .flnav-toggle, .flnav-burger { display: none; } /* ---- light variant -------------------------------------------------- Applied by fl-nav.js when the hero it is blending into is light, so the bar needs dark grey type and the dark logo instead. The hairline stands in for the colour contrast the dark bar gets for free. */ .flnav-topbar.flnav-light { border-bottom: 1px solid var(--flnav-line); } .flnav-topbar.flnav-light .flnav-links a, .flnav-topbar.flnav-light .flnav-droptrigger { color: var(--flnav-ink); } .flnav-topbar.flnav-light .flnav-links a:hover, .flnav-topbar.flnav-light .flnav-droptrigger:hover { color: var(--flnav-ink-strong); background: rgba(15, 23, 42, 0.06); } .flnav-topbar.flnav-light .flnav-links a.active, .flnav-topbar.flnav-light .flnav-droptrigger.active { color: var(--flnav-ink-strong); background: rgba(15, 23, 42, 0.09); } .flnav-topbar.flnav-light .flnav-links a:focus-visible, .flnav-topbar.flnav-light .flnav-droptrigger:focus-visible { outline: 2px solid var(--flnav-ink); outline-offset: 1px; } .flnav-topbar.flnav-light .flnav-burger span { background: var(--flnav-ink); } /* ---- mobile ---------------------------------------------------------- */ @media (max-width: 1000px) { .flnav-burger { display: flex; margin-left: auto; cursor: pointer; width: 36px; height: 32px; padding: 6px; border-radius: 6px; flex-direction: column; justify-content: space-between; box-sizing: border-box; } .flnav-burger span { display: block; height: 2px; width: 100%; border-radius: 2px; background: #ffffff; } .flnav-links { display: none; position: absolute; top: 100%; left: 0; right: 0; background: var(--flnav-drawer); flex-direction: column; align-items: stretch; padding: 8px 16px 12px; box-shadow: 0 10px 25px rgba(0, 0, 0, 0.18); } .flnav-toggle:checked ~ .flnav-links { display: flex; } .flnav-links a { width: 100%; padding: 9px 10px; } /* Nothing to hover on a touch screen, so Resources flattens into a labelled group that is always open. */ .flnav-drop { display: block; width: 100%; } .flnav-droptrigger { width: 100%; justify-content: flex-start; padding: 12px 10px 4px; font-size: 10.5px; letter-spacing: 0.09em; text-transform: uppercase; color: rgba(255, 255, 255, 0.62); pointer-events: none; } .flnav-caret { display: none; } .flnav-dropmenu { display: block; position: static; min-width: 0; padding: 0; background: transparent; border: none; box-shadow: none; } .flnav-links .flnav-dropmenu a { color: #ffffff; padding: 9px 10px; } .flnav-links .flnav-dropmenu a:hover, .flnav-links .flnav-dropmenu a.active { color: #ffffff; background: rgba(255, 255, 255, 0.16); } .flnav-topbar.flnav-light .flnav-links { background: #ffffff; border-bottom: 1px solid var(--flnav-line); } .flnav-topbar.flnav-light .flnav-droptrigger { color: rgba(31, 36, 44, 0.55); } .flnav-topbar.flnav-light .flnav-dropmenu a { color: var(--flnav-ink); } .flnav-topbar.flnav-light .flnav-dropmenu a:hover, .flnav-topbar.flnav-light .flnav-dropmenu a.active { color: var(--flnav-ink-strong); background: rgba(15, 23, 42, 0.06); } } @media print { .flnav-topbar { display: none !important; } }