/* Factor Navigation 2026 - v2.1.0 PARENT-LOCKED. Every selector below is descended from .fnav-header (or the .fnav-scroll-lock utility on ), so this file cannot style, reset, or override a single element outside the navigation. Conversely the reset in block 1 shields the nav from inherited theme styles. */ /* ---------- 1. Containment shell + inbound shield ---------- */ .fnav-header { /* Outbound: a new stacking + containment context. */ position: sticky; top: 0; z-index: 9000; isolation: isolate; /* Inbound: neutralise inherited theme typography and spacing. */ display: block; margin: 0; padding: 0; background: #fff; border: 0; border-bottom: 1px solid #E4E9F2; font-family: 'Public Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; font-size: 16px; font-weight: 400; font-style: normal; line-height: 1.4; letter-spacing: normal; text-transform: none; text-align: left; color: #1B2C49; -webkit-font-smoothing: antialiased; } /* Scoped reset. Applies only inside the header, never to the document. */ .fnav-header *, .fnav-header *::before, .fnav-header *::after { box-sizing: border-box; } .fnav-header div, .fnav-header nav, .fnav-header span, .fnav-header p, .fnav-header ul, .fnav-header li, .fnav-header a, .fnav-header img, .fnav-header svg, .fnav-header aside, .fnav-header button { margin: 0; padding: 0; border: 0; background: none; font: inherit; color: inherit; text-decoration: none; text-transform: none; letter-spacing: normal; list-style: none; box-shadow: none; float: none; min-width: 0; max-width: none; } .fnav-header button { appearance: none; -webkit-appearance: none; border-radius: 0; cursor: pointer; text-align: left; } .fnav-header a:hover, .fnav-header a:focus, .fnav-header a:active, .fnav-header a:visited { text-decoration: none; box-shadow: none; } .fnav-header img { display: block; max-width: 100%; height: auto; } .fnav-header svg { display: block; } /* ---------- 2. Bar ---------- */ .fnav-header .fnav-bar { max-width: 1320px; margin: 0 auto; padding: 0 30px; height: 66px; display: flex; align-items: center; gap: 26px; } .fnav-header .fnav-logo { display: flex; align-items: center; flex-shrink: 0; } .fnav-header .fnav-logo img { width: 186px; height: auto; } .fnav-header .fnav-desktop { display: flex; align-items: center; flex: 1 1 auto; min-width: 0; } .fnav-header .fnav-primary { display: flex; align-items: stretch; gap: 2px; } .fnav-header .fnav-item { display: flex; } .fnav-header .fnav-trigger, .fnav-header .fnav-link { display: flex; align-items: center; gap: 7px; height: 66px; padding: 3px 11px 0; border-bottom: 3px solid transparent; font-family: inherit; font-size: 14.5px; font-weight: 600; line-height: 1; color: #1B2C49; white-space: nowrap; } .fnav-header .fnav-trigger:hover, .fnav-header .fnav-link:hover { color: #0A1E3C; } .fnav-header .fnav-trigger:focus-visible, .fnav-header .fnav-link:focus-visible, .fnav-header .fnav-cta:focus-visible, .fnav-header .fnav-login:focus-visible, .fnav-header .fnav-burger:focus-visible, .fnav-header .fnav-links a:focus-visible, .fnav-header .fnav-m-row:focus-visible, .fnav-header .fnav-m-sub:focus-visible { outline: 2px solid #1E82C6; outline-offset: -2px; } .fnav-header .fnav-item.is-open > .fnav-trigger { color: #0A1E3C; border-bottom-color: var(--fnav-accent, #1E82C6); } .fnav-header .fnav-caret { flex: 0 0 auto; color: #8695AE; transition: transform .18s ease; } .fnav-header .fnav-item.is-open .fnav-caret { transform: rotate(180deg); } .fnav-header .fnav-actions { margin-left: auto; display: flex; align-items: center; gap: 12px; flex-shrink: 0; } .fnav-header .fnav-login { display: inline-flex; align-items: center; gap: 6px; border: 1px solid #C9D3E3; border-radius: 7px; padding: 10px 18px; font-family: inherit; font-size: 13.5px; font-weight: 700; line-height: 1; color: #1B2C49; white-space: nowrap; } .fnav-header .fnav-login:hover { border-color: #A9B8CE; color: #0A1E3C; } /* Log In is a trigger too, so it must undo the full-height bar-item sizing. */ .fnav-header .fnav-login.fnav-trigger { height: auto; padding: 10px 18px; border: 1px solid #C9D3E3; font-size: 13.5px; } .fnav-header .fnav-login.fnav-trigger:hover { border-color: #A9B8CE; } .fnav-header .fnav-item--simple.is-open > .fnav-login.fnav-trigger { border-color: #A9B8CE; color: #0A1E3C; } .fnav-header .fnav-item--simple { align-items: center; } .fnav-header .fnav-cta { display: inline-flex; align-items: center; border-radius: 7px; padding: 11px 20px; background: #1E82C6; font-family: inherit; font-size: 13.5px; font-weight: 700; line-height: 1; color: #fff; white-space: nowrap; } .fnav-header .fnav-cta:hover, .fnav-header .fnav-cta:focus { background: #1A6FA9; color: #fff; } /* ---------- 3. Mega panel ---------- */ .fnav-header .fnav-panel { position: absolute; top: 100%; left: 0; right: 0; background: #F4F6FA; border-top: 1px solid #E4E9F2; border-bottom: 1px solid #D6DEEA; box-shadow: 0 26px 50px -26px rgba(10, 30, 60, .38); max-height: calc(100vh - 66px); overflow-y: auto; } .fnav-header .fnav-panel[hidden] { display: none; } .fnav-header .fnav-panel-inner { max-width: 1320px; margin: 0 auto; padding: 30px; display: grid; gap: 30px; grid-template-columns: minmax(0, 1fr) 306px; align-items: start; } .fnav-header .fnav-panel[data-banner="no"] .fnav-panel-inner { grid-template-columns: minmax(0, 1fr); } .fnav-header .fnav-panel[data-cols="1"][data-banner="yes"] .fnav-panel-inner { grid-template-columns: 498px minmax(0, 1fr); } .fnav-header .fnav-cols { display: grid; gap: 26px 32px; align-content: start; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); } .fnav-header .fnav-panel[data-cols="1"] .fnav-cols { grid-template-columns: minmax(0, 1fr); } .fnav-header .fnav-panel[data-cols="2"] .fnav-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); } .fnav-header .fnav-panel[data-cols="3"] .fnav-cols { grid-template-columns: repeat(3, minmax(0, 1fr)); } .fnav-header .fnav-panel[data-cols="4"] .fnav-cols { grid-template-columns: repeat(4, minmax(0, 1fr)); } .fnav-header .fnav-col-title { font-family: 'Archivo', 'Public Sans', sans-serif; font-size: 13.5px; font-weight: 700; line-height: 1.3; color: #0A1E3C; padding-bottom: 10px; margin-bottom: 12px; border-bottom: 1px solid #DCE3EF; } .fnav-header .fnav-col-title a { color: inherit; } .fnav-header .fnav-col-title a:hover { color: #1D5BD6; } .fnav-header .fnav-links { display: grid; gap: 10px; align-content: start; } .fnav-header .fnav-panel[data-cols="1"] .fnav-links { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 26px; } .fnav-header .fnav-links a { display: inline-flex; align-items: baseline; gap: 8px; font-size: 14px; font-weight: 500; line-height: 1.3; color: #3F4E68; } .fnav-header .fnav-links a:hover { color: #1D5BD6; } .fnav-header .fnav-badge { flex: 0 0 auto; font-family: 'Archivo', 'Public Sans', sans-serif; font-size: 9px; font-weight: 700; line-height: 1.5; letter-spacing: .06em; text-transform: uppercase; padding: 2px 6px; border-radius: 20px; white-space: nowrap; background: #FBEECB; color: #8A5E0E; } .fnav-header .fnav-badge[data-tone="teal"] { background: #E6F3F4; color: #0E7C86; } .fnav-header .fnav-badge[data-tone="blue"] { background: #EAF1FC; color: #1D5BD6; } /* ---------- 4. Promoted banner ---------- */ .fnav-header .fnav-banner { background: linear-gradient(150deg, #0A1E3C, #123059); border-radius: 14px; padding: 26px; display: flex; flex-direction: column; gap: 22px; justify-content: space-between; align-items: flex-start; } .fnav-header .fnav-panel[data-cols="1"] .fnav-banner { flex-direction: row; align-items: center; gap: 26px; } .fnav-header .fnav-panel[data-cols="1"] .fnav-banner-text { max-width: 52ch; } .fnav-header .fnav-banner-kicker { display: block; font-family: 'Archivo', 'Public Sans', sans-serif; font-size: 10.5px; font-weight: 700; line-height: 1.3; letter-spacing: .14em; text-transform: uppercase; color: #3CE0C4; } .fnav-header .fnav-banner-title { display: block; font-family: 'Archivo', 'Public Sans', sans-serif; font-size: 20px; font-weight: 800; line-height: 1.15; color: #fff; margin: 12px 0 10px; } .fnav-header .fnav-banner-body { font-size: 13.5px; line-height: 1.55; color: rgba(255, 255, 255, .7); text-wrap: pretty; } .fnav-header .fnav-banner-cta { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px; border-radius: 8px; padding: 11px 18px; background: #3CE0C4; font-size: 13.5px; font-weight: 700; line-height: 1; color: #062A25; white-space: nowrap; } .fnav-header .fnav-banner-cta:hover { background: #2FCBB0; color: #062A25; } /* ---------- 5. Simple dropdown ---------- */ .fnav-header .fnav-item--simple { position: relative; } .fnav-header .fnav-simple { position: absolute; top: calc(100% + 6px); right: 0; min-width: 190px; background: #fff; border: 1px solid #DCE3EF; border-radius: 10px; box-shadow: 0 16px 34px -18px rgba(10, 30, 60, .4); padding: 6px; z-index: 2; } .fnav-header .fnav-simple[hidden] { display: none; } .fnav-header .fnav-simple a { display: block; padding: 9px 12px; border-radius: 6px; font-size: 14px; font-weight: 500; color: #3F4E68; } .fnav-header .fnav-simple a:hover { background: #F4F6FA; color: #1D5BD6; } /* ---------- 6. Mobile ---------- */ .fnav-header .fnav-mobile-bar { display: none; margin-left: auto; align-items: center; gap: 10px; } .fnav-header .fnav-cta--compact { padding: 9px 13px; font-size: 12.5px; } .fnav-header .fnav-burger { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; color: #1B2C49; } .fnav-header .fnav-burger .fnav-burger-close { display: none; } .fnav-header .fnav-burger[aria-expanded="true"] .fnav-burger-open { display: none; } .fnav-header .fnav-burger[aria-expanded="true"] .fnav-burger-close { display: inline-flex; } .fnav-header .fnav-mobile { position: fixed; top: 66px; left: 0; right: 0; bottom: 0; background: #fff; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; z-index: 8990; } .fnav-header .fnav-mobile[hidden] { display: none; } .fnav-header .fnav-m-item, .fnav-header .fnav-m-row--link { border-bottom: 1px solid #EDF1F7; } .fnav-header .fnav-m-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; min-height: 54px; padding: 0 16px; font-family: 'Archivo', 'Public Sans', sans-serif; font-size: 16px; font-weight: 700; line-height: 1.3; color: #0A1E3C; } .fnav-header .fnav-m-sign { font-size: 17px; font-weight: 500; color: #8695AE; } .fnav-header .fnav-m-panel { padding: 0 16px 12px; } .fnav-header .fnav-m-panel[hidden] { display: none; } .fnav-header .fnav-m-group { font-family: 'Archivo', 'Public Sans', sans-serif; font-size: 11px; font-weight: 700; line-height: 1.3; letter-spacing: .12em; text-transform: uppercase; color: #8695AE; padding: 14px 0 6px; } .fnav-header .fnav-m-sub { display: flex; align-items: center; gap: 8px; min-height: 46px; border-top: 1px solid #F3F6FA; font-size: 14.5px; font-weight: 500; line-height: 1.35; color: #3F4E68; } .fnav-header .fnav-m-sub:first-of-type { border-top: 0; } @media (max-width: 1023px) { .fnav-header .fnav-bar { padding: 0 16px; height: 62px; gap: 12px; } .fnav-header .fnav-desktop { display: none; } .fnav-header .fnav-mobile-bar { display: flex; } .fnav-header .fnav-mobile { top: 62px; } .fnav-header .fnav-logo img { width: 186px; } } @media (prefers-reduced-motion: reduce) { .fnav-header .fnav-caret { transition: none; } } /* ---------- 7. Scroll lock + open-drawer header pinning ---------- Two rules leave the header. Both are namespaced and both are added and removed by this plugin's JS alone. The body is fixed (not just overflow:hidden) because iOS Safari ignores overflow on , and the JS restores the exact scroll offset on close. */ html.fnav-scroll-lock, html.fnav-scroll-lock body { overflow: hidden !important; } html.fnav-scroll-lock body { position: fixed; width: 100%; } /* While the drawer is open the bar is pinned to the viewport rather than relying on position:sticky, which a theme ancestor with overflow or transform can silently disable - that is what made the header vanish when the menu was opened part-way down the page. */ .fnav-header.fnav-is-open { position: fixed; top: 0; left: 0; right: 0; width: 100%; }