/* ========================================================================== SITE NAVIGATION — THE STATE SYSTEM 2026-09-20 One sheet, linked LAST on all six live pages, that owns every state the header's menus can be in. It replaces the state paint that had accumulated in layers inside home-system/home.css (the homepage) and its lift site-chrome/header.css (the five inner pages); those files are left alone and simply out-ranked, so nothing else in the header moves. WHY IT EXISTS — measured on the live pages before this file, at 1920, 1600, 1440, 1366, 1280, 1180, 1024, 1000, 900, 820, 768, 700, 600, 480, 430, 390, 360 and 320, on all six pages: · Row 1: the CURRENT page was a 34px white pill with a 1px #8FB8F2 ring and a dot. A HOVERED tab was a 34px pill of the same radius with a 1.5px rgba(255,255,255,.42) ring — a HEAVIER stroke than the selected state's. Two identical boxes. · Their geometry made them touch: the hover box bled -12px past its tab and the current pill bled -1px past its own, so the measured distance between the two was -13.0px at 1920/1600/1440 (Legal Documents next to Contact Us), -0.2px at 1024 and -13.0 to -2.0px at 1000 on EVERY page. Negative — they overlapped, and read as one joined segmented control. · Row 2: the current section was a white pill with a 1px #8FB8F2 ring; a hovered section was a white pill with a 1px #8E9AAD ring AND a drop shadow. Same fill, same radius, same height — the hover read as the stronger of the two. Overlapping at 700/600/480/430/360/320 on the homepage (-1 to -7px) and 7px apart nearly everywhere else. · Below 901px the hover box collapsed to nothing (it was inset 8px top and bottom inside a 23px-tall link) — so phones had no hover at all, while the sticky :hover after a TAP left a white pill on whichever section was last touched: a second "selected" item. · Focus was a #4989E2 ring: 2.62:1 on the #004594 bar and 2.74:1 on the #D8E4F6 section row. Both below the 3:1 that WCAG 2.2 1.4.11 asks of a focus indicator. On row 1 it also drew round the tab's full 66px height (the tabs are align-self:stretch), so it was a THIRD box shape, unrelated to the other two and clipped by the bar's own edge. · The Our Services menu: its current item and its hover were the same fill, #EEF4FD, so the open menu showed two "current" services. The panel carried a 1px #B9CBEE border AND a 1px #D3DAE6 box-shadow ring — a literal double border. · In the phone drawer the current page's accent bar sat at left:-10px, outside the panel's 18px padding, so it was clipped to a sliver. THE RULE THIS FILE ENFORCES — one material per state, never two: ACTIVE a FILLED surface. White pill, 1px ring, the blue dot, bold ink. The only filled thing in the header. One per row, ever. HOVER a LINE. A 2px underline under the label, plus ink. It has no box and no edge, so it can never read as a tab and can never "join" the pill beside it, at any spacing. FOCUS a RING. A 2px outline at 9.22:1 (row 1) / 7.17:1 (row 2), offset clear of the pill, on the label's own box — never on the tab's full height. INACTIVE nothing. Ink only. Because hover is a line, the adjacency problem cannot come back: there is never more than ONE box in a row, so two boxes can never touch, merge or both look chosen — at any width, with any label length, in any order. GEOMETRY, per measured layout band (the header has exactly three): A >=1024px row 1 tabs are 66px and stretched, padding 0 clamp(12px, 1.25vw,22px), column-gap 0; row 2 links are 42px, padding 0 12px, gap clamp(8px,1.6vw,26px). Room for the pill. B 901-1023 row 1 tabs are 22px with NO horizontal padding and an 11px gap — measured slack beside the brand at 901px is 0.7px, so there is no room for a pill without cramping it. Both rows use a rule for active (3px) and hover (1.5px): same hierarchy, stated in a way that fits 11px. C <=900px row 1 is the drawer (full-width 45px rows); row 2 is a scrolling strip of 25px links with a 14px gap floor. TOUCH: every hover rule below is inside @media (hover:hover) and (pointer:fine). A tap can no longer leave a state behind. :active gives touch its own momentary feedback instead. ========================================================================== */ /* -------------------------------------------------------------------------- 0 · TOKENS — the whole system's palette and metrics, in one place. The six pages all render the same header: bar #004594, section row #D8E4F6, drawer #FFFFFF (verified on every page at 1440, 900 and 390). -------------------------------------------------------------------------- */ html body header.bar{ /* the two grounds these states sit on, recorded here so every contrast figure below can be checked without opening a browser */ --nvs-bar: #004594; --nvs-row2: #D8E4F6; /* row 1 — the site's pages, on the navy bar */ --nvs-1-ink: #E1ECFC; /* 7.73:1 on the bar */ --nvs-1-ink-h: #FFFFFF; /* 9.22:1 */ --nvs-1-ink-on: #004594; /* 9.22:1 on the white pill */ --nvs-1-rule: rgba(255,255,255,.62); /* hover line */ --nvs-1-rule-on: #FFFFFF; /* band B active line */ --nvs-1-fill: #FFFFFF; --nvs-1-ring: #8FB8F2; --nvs-1-focus: #FFFFFF; /* 9.22:1 */ /* row 2 — this page's sections, on the pale row */ --nvs-2-ink: #324968; /* 7.14:1 on #D8E4F6 */ --nvs-2-ink-h: #00285E; --nvs-2-ink-on: #004594; --nvs-2-rule: #5E7596; /* 3.66:1 — a visible line */ --nvs-2-rule-on: #004594; --nvs-2-fill: #FFFFFF; --nvs-2-ring: #6C9BE0; /* darker than row 1's: the ground here is light, so the ring is what draws the pill */ --nvs-2-focus: #004594; /* 7.17:1 on #D8E4F6 */ /* the selected dot — the site's own "this one" mark, active states only */ --nvs-dot: radial-gradient(circle 3.5px at calc(100% - 9px) 9px, #1F8FEA 0 3.5px, rgba(0,0,0,0) 3.6px); /* metrics */ --nvs-r: 7px; /* pill radius, both rows */ --nvs-pill-h: 34px; /* pill height in band A, both rows */ --nvs-rule-h: 2px; --nvs-focus-w: 2px; /* band A geometry. The PILL reaches 10px past its own label. The hover RULE reaches nothing — it spans the label exactly, which is what an underline should do anyway, and it is what keeps the two apart at the tightest width: measured pill-edge to rule-start is 15.6px at 1024, 26px at 1440 and 34px at 1920. (Letting the rule use the pill's footprint too left only 1.6px at 1024.) */ --nvs-1-pad: clamp(12px, 1.25vw, 22px); /* the tab's real padding */ --nvs-1-inset: max(0px, calc(var(--nvs-1-pad) - 10px)); } /* -------------------------------------------------------------------------- 1 · RESET — clear every state paint the older layers put on a nav item, so what follows is the only thing drawing. Four ids + !important is what it takes to out-rank home.css / header.css's own three-id !important rules; the file is also linked last. Geometry that is NOT state (the tab's padding, the ghost that reserves its bold width) is deliberately untouched. -------------------------------------------------------------------------- */ html body header.bar #navPrimary#navPrimary#navPrimary#navPrimary a.ptab, html body header.bar #navPrimary#navPrimary#navPrimary#navPrimary a.ptab:hover, html body header.bar #navPrimary#navPrimary#navPrimary#navPrimary a.ptab:focus, html body header.bar #navPrimary#navPrimary#navPrimary#navPrimary a.ptab:focus-visible, html body header.bar #navPrimary#navPrimary#navPrimary#navPrimary a.ptab.cur, html body header.bar #navPrimary#navPrimary#navPrimary#navPrimary a.ptab[aria-expanded="true"]{ background: transparent !important; box-shadow: none !important; outline: 0 !important; isolation: isolate; /* keeps a z-index:-1 layer above the bar's own background */ -webkit-tap-highlight-color: transparent; } html body header.bar #navPrimary#navPrimary#navPrimary#navPrimary a.ptab::before{ content: "" !important; display: block !important; position: absolute !important; inset: auto !important; margin: 0 !important; padding: 0 !important; width: auto !important; height: auto !important; background: none !important; box-shadow: none !important; border: 0 !important; border-radius: 0 !important; opacity: 1 !important; transform: none !important; clip-path: none !important; pointer-events: none !important; z-index: -1 !important; transition: background-color .16s ease, box-shadow .16s ease !important; } /* nothing is drawn unless a state below asks for it */ html body header.bar #navPrimary#navPrimary#navPrimary#navPrimary a.ptab:not(.cur):not([aria-expanded="true"])::before{ display: none !important; } /* the ::after on a tab is the ghost that reserves its BOLD width so the row cannot shift between pages — it must stay invisible and unpainted */ html body header.bar #navPrimary#navPrimary#navPrimary#navPrimary a.ptab::after{ background: none !important; box-shadow: none !important; border: 0 !important; } html body header.bar #navKids#navKids#navKids#navKids a.kid, html body header.bar #navKids#navKids#navKids#navKids a.kid:hover, html body header.bar #navKids#navKids#navKids#navKids a.kid:focus, html body header.bar #navKids#navKids#navKids#navKids a.kid:focus-visible, html body header.bar #navKids#navKids#navKids#navKids a.kid.on{ background: transparent !important; box-shadow: none !important; outline: 0 !important; isolation: isolate; -webkit-tap-highlight-color: transparent; } html body header.bar #navKids#navKids#navKids#navKids a.kid::after{ content: "" !important; display: block !important; position: absolute !important; inset: auto !important; margin: 0 !important; padding: 0 !important; width: auto !important; height: auto !important; background: none !important; box-shadow: none !important; border: 0 !important; border-radius: 0 !important; opacity: 1 !important; transform: none !important; clip-path: none !important; pointer-events: none !important; z-index: -1 !important; transition: background-color .16s ease, box-shadow .16s ease !important; } html body header.bar #navKids#navKids#navKids#navKids a.kid:not(.on)::after{ display: none !important; } /* one transition, one language */ html body header.bar :is(#navPrimary a.ptab, #navKids a.kid){ transition: color .16s ease, font-weight .16s ease !important; } @media (prefers-reduced-motion: reduce){ html body header.bar :is(#navPrimary a.ptab, #navKids a.kid), html body header.bar #navPrimary#navPrimary#navPrimary#navPrimary a.ptab::before, html body header.bar #navKids#navKids#navKids#navKids a.kid::after{ transition-duration: .001ms !important; } } /* ========================================================================== 2 · BAND A — desktop and laptop, >=1024px Tabs are 66px and stretched; the pill is 34px, centred, and reaches 10px past its label. Section links are 42px with 12px of padding; their pill is the padding box itself, so the next link is a full column-gap away. ========================================================================== */ @media (min-width: 1024px){ /* ---- row 1 · INACTIVE ---- */ html body header.bar #navPrimary#navPrimary#navPrimary#navPrimary a.ptab{ color: var(--nvs-1-ink) !important; font-weight: 650 !important; } /* ---- row 1 · ACTIVE — the only filled thing on the bar ---- */ html body header.bar #navPrimary#navPrimary#navPrimary#navPrimary a.ptab.cur{ color: var(--nvs-1-ink-on) !important; font-weight: 750 !important; } html body header.bar #navPrimary#navPrimary#navPrimary#navPrimary a.ptab.cur > span{ color: inherit !important; } html body header.bar #navPrimary#navPrimary#navPrimary#navPrimary a.ptab.cur::before{ display: block !important; top: calc(50% - var(--nvs-pill-h) / 2) !important; height: var(--nvs-pill-h) !important; left: var(--nvs-1-inset) !important; right: var(--nvs-1-inset) !important; background: var(--nvs-dot), var(--nvs-1-fill) !important; box-shadow: inset 0 0 0 1px var(--nvs-1-ring) !important; border-radius: var(--nvs-r) !important; } /* ---- row 1 · OPEN MENU (Our Services) — a state of its own ------------- A solid 3px rule and white ink, with the chevron already turned and the panel already showing. Deliberately NOT a box: keeping it a rule is what guarantees that row 1 never holds two boxes at once, whatever is open, hovered or current. On the Google Ads page this tab is also .cur, and there the pill above wins. */ html body header.bar #navPrimary#navPrimary#navPrimary#navPrimary a.ptab:not(.cur)[aria-expanded="true"]{ color: var(--nvs-1-ink-h) !important; font-weight: 700 !important; } html body header.bar #navPrimary#navPrimary#navPrimary#navPrimary a.ptab:not(.cur)[aria-expanded="true"]::before{ display: block !important; left: var(--nvs-1-pad) !important; right: var(--nvs-1-pad) !important; top: auto !important; bottom: calc(50% - var(--nvs-pill-h) / 2) !important; height: 3px !important; background: var(--nvs-1-rule-on) !important; border-radius: 2px !important; } /* ---- row 2 · INACTIVE ---- */ html body header.bar #navKids#navKids#navKids#navKids a.kid{ color: var(--nvs-2-ink) !important; font-weight: 550 !important; } /* ---- row 2 · ACTIVE ---- */ html body header.bar #navKids#navKids#navKids#navKids a.kid.on{ color: var(--nvs-2-ink-on) !important; font-weight: 700 !important; } html body header.bar #navKids#navKids#navKids#navKids a.kid.on::after{ display: block !important; inset: 4px 0 4px 0 !important; background: var(--nvs-dot), var(--nvs-2-fill) !important; box-shadow: inset 0 0 0 1px var(--nvs-2-ring) !important; border-radius: var(--nvs-r) !important; } } /* ---- BAND A · HOVER — a line, never a box ------------------------------- */ @media (min-width: 1024px) and (hover: hover) and (pointer: fine){ html body header.bar #navPrimary#navPrimary#navPrimary#navPrimary a.ptab:not(.cur):not([aria-expanded="true"]):hover{ color: var(--nvs-1-ink-h) !important; } html body header.bar #navPrimary#navPrimary#navPrimary#navPrimary a.ptab:not(.cur):not([aria-expanded="true"]):hover::before{ display: block !important; left: var(--nvs-1-pad) !important; /* the label, not the pill box */ right: var(--nvs-1-pad) !important; top: auto !important; bottom: calc(50% - var(--nvs-pill-h) / 2) !important; height: var(--nvs-rule-h) !important; background: var(--nvs-1-rule) !important; border-radius: 2px !important; } html body header.bar #navKids#navKids#navKids#navKids a.kid:not(.on):hover{ color: var(--nvs-2-ink-h) !important; } html body header.bar #navKids#navKids#navKids#navKids a.kid:not(.on):hover::after{ display: block !important; left: 12px !important; right: 12px !important; top: auto !important; bottom: 8px !important; height: var(--nvs-rule-h) !important; background: var(--nvs-2-rule) !important; border-radius: 2px !important; } } /* ========================================================================== 3 · BAND B — tablet landscape and small laptops, 901-1023px Measured: the six tabs, the wordmark and the gutters leave 0.7px of slack at 901px, and the tabs sit 11px apart with no padding of their own. A pill cannot be given breathing room here without cramping it or pushing the brand off, so ACTIVE states as a 3px rule and HOVER as a 1.5px one: the same hierarchy (weight, ink, thickness), stated in 11px. ========================================================================== */ @media (min-width: 901px) and (max-width: 1023px){ html body header.bar #navPrimary#navPrimary#navPrimary#navPrimary a.ptab{ color: var(--nvs-1-ink) !important; font-weight: 650 !important; } /* 750, not more: every tab reserves the width of its own BOLD state with an ::after ghost set at 750, so a current tab heavier than that comes out wider than its ghost and the whole row shifts between pages. Measured at 1000px with 800: 1.20px of drift. The rule and the white ink carry the state here; the weight matches the ghost. */ html body header.bar #navPrimary#navPrimary#navPrimary#navPrimary a.ptab.cur{ color: var(--nvs-1-ink-h) !important; font-weight: 750 !important; } html body header.bar #navPrimary#navPrimary#navPrimary#navPrimary a.ptab.cur > span{ color: inherit !important; } html body header.bar #navPrimary#navPrimary#navPrimary#navPrimary a.ptab.cur::before{ display: block !important; left: 0 !important; right: 0 !important; top: auto !important; bottom: -7px !important; height: 3px !important; background: var(--nvs-1-rule-on) !important; border-radius: 2px !important; } html body header.bar #navPrimary#navPrimary#navPrimary#navPrimary a.ptab:not(.cur)[aria-expanded="true"]{ color: var(--nvs-1-ink-h) !important; font-weight: 700 !important; } html body header.bar #navPrimary#navPrimary#navPrimary#navPrimary a.ptab:not(.cur)[aria-expanded="true"]::before{ display: block !important; left: 0 !important; right: 0 !important; top: auto !important; bottom: -7px !important; height: 3px !important; background: rgba(255,255,255,.55) !important; border-radius: 2px !important; } html body header.bar #navKids#navKids#navKids#navKids a.kid{ color: var(--nvs-2-ink) !important; font-weight: 550 !important; } html body header.bar #navKids#navKids#navKids#navKids a.kid.on{ color: var(--nvs-2-ink-on) !important; font-weight: 700 !important; } html body header.bar #navKids#navKids#navKids#navKids a.kid.on::after{ display: block !important; left: 0 !important; right: 0 !important; top: auto !important; bottom: 6px !important; height: 3px !important; background: var(--nvs-2-rule-on) !important; border-radius: 2px !important; } } @media (min-width: 901px) and (max-width: 1023px) and (hover: hover) and (pointer: fine){ html body header.bar #navPrimary#navPrimary#navPrimary#navPrimary a.ptab:not(.cur):not([aria-expanded="true"]):hover{ color: var(--nvs-1-ink-h) !important; } html body header.bar #navPrimary#navPrimary#navPrimary#navPrimary a.ptab:not(.cur):not([aria-expanded="true"]):hover::before{ display: block !important; left: 0 !important; right: 0 !important; top: auto !important; bottom: -7px !important; height: 1.5px !important; background: rgba(255,255,255,.45) !important; border-radius: 2px !important; } html body header.bar #navKids#navKids#navKids#navKids a.kid:not(.on):hover{ color: var(--nvs-2-ink-h) !important; } html body header.bar #navKids#navKids#navKids#navKids a.kid:not(.on):hover::after{ display: block !important; left: 0 !important; right: 0 !important; top: auto !important; bottom: 6px !important; height: 1.5px !important; background: var(--nvs-2-rule) !important; border-radius: 2px !important; } } /* ========================================================================== 4 · BAND C — tablet portrait and phones, <=900px Row 1 is the drawer: full-bleed rows, so ACTIVE is a tinted row with a 3px accent bar ON the panel's own left edge (it used to be drawn at left:-10px, outside the 18px padding, and was clipped to a sliver), and HOVER is a lighter tint of the same full-bleed row. One is plainly deeper than the other and neither can look like a tab. Row 2 keeps the pill; it is given the link's own padding box. ========================================================================== */ @media (max-width: 900px){ /* ---- the section strip: a 25px link, so the tap target clears the 24px WCAG 2.2 2.5.8 minimum (it was 23px). The row's own padding is reduced by the same 2px, so the header's height — and --barh, which the hero and every scroll offset are built on — does not move. */ html body header.bar .krow{ padding-top: 10px !important; padding-bottom: 11px !important; } html body header.bar #navKids#navKids#navKids#navKids a.kid{ padding-top: 6px !important; padding-bottom: 6px !important; color: var(--nvs-2-ink) !important; font-weight: 550 !important; } html body header.bar #navKids#navKids#navKids#navKids a.kid.on{ color: var(--nvs-2-ink-on) !important; font-weight: 700 !important; } html body header.bar #navKids#navKids#navKids#navKids a.kid.on::after{ display: block !important; inset: 0 !important; background: var(--nvs-dot), var(--nvs-2-fill) !important; box-shadow: inset 0 0 0 1px var(--nvs-2-ring) !important; border-radius: var(--nvs-r) !important; } /* ---- the drawer ---- */ html body header.bar #navPrimary#navPrimary#navPrimary#navPrimary a.ptab{ color: #34405A !important; font-weight: 600 !important; } html body header.bar #navPrimary#navPrimary#navPrimary#navPrimary a.ptab.cur{ color: #00285E !important; font-weight: 750 !important; } html body header.bar #navPrimary#navPrimary#navPrimary#navPrimary a.ptab.cur > span{ color: inherit !important; } /* full-bleed: the row reaches the panel's edges, and the accent bar lands ON the left edge rather than outside it */ html body header.bar #navPrimary#navPrimary#navPrimary#navPrimary a.ptab.cur::before{ display: block !important; inset: 0 calc(-1 * var(--pad, 18px)) !important; background: linear-gradient(90deg, var(--nvs-2-ink-on) 0 3px, #EFF5FF 3px) !important; border-radius: 0 !important; } html body header.bar #navPrimary#navPrimary#navPrimary#navPrimary a.ptab:not(.cur)[aria-expanded="true"]{ color: #00285E !important; font-weight: 700 !important; } html body header.bar #navPrimary#navPrimary#navPrimary#navPrimary a.ptab:not(.cur)[aria-expanded="true"]::before{ display: block !important; inset: 0 calc(-1 * var(--pad, 18px)) !important; background: #F4F8FF !important; border-radius: 0 !important; } } @media (max-width: 900px) and (hover: hover) and (pointer: fine){ html body header.bar #navPrimary#navPrimary#navPrimary#navPrimary a.ptab:not(.cur):not([aria-expanded="true"]):hover{ color: #00285E !important; } html body header.bar #navPrimary#navPrimary#navPrimary#navPrimary a.ptab:not(.cur):not([aria-expanded="true"]):hover::before{ display: block !important; inset: 0 calc(-1 * var(--pad, 18px)) !important; background: #F7FAFF !important; border-radius: 0 !important; } html body header.bar #navKids#navKids#navKids#navKids a.kid:not(.on):hover{ color: var(--nvs-2-ink-h) !important; } html body header.bar #navKids#navKids#navKids#navKids a.kid:not(.on):hover::after{ display: block !important; left: 10px !important; right: 10px !important; top: auto !important; bottom: 3px !important; height: var(--nvs-rule-h) !important; background: var(--nvs-2-rule) !important; border-radius: 2px !important; } } /* ========================================================================== 5 · TOUCH — the press, not the hover Touch gets its own momentary feedback so a tap still feels answered. It lasts only while the finger is down, so it cannot be left behind on an item the way the old sticky :hover pill was. ========================================================================== */ html body header.bar #navPrimary#navPrimary#navPrimary#navPrimary a.ptab:active{ color: var(--nvs-1-ink-h) !important; } html body header.bar #navKids#navKids#navKids#navKids a.kid:active{ color: var(--nvs-2-ink-h) !important; } @media (max-width: 900px){ html body header.bar #navPrimary#navPrimary#navPrimary#navPrimary a.ptab:active{ color: #00285E !important; } } /* ========================================================================== 6 · FOCUS — a ring, on the label, never confused with either other state Row 1's ring is on the tab's own , because the tab itself is 66px tall (align-self:stretch) and a ring round THAT was a third box shape, cut off by the bar's bottom edge. On the span it lands exactly where the pill lands, and nests 4px inside it, so a focused current page shows pill + ring as one clearly related pair. ========================================================================== */ html body header.bar #navPrimary#navPrimary#navPrimary#navPrimary a.ptab:focus, html body header.bar #navKids#navKids#navKids#navKids a.kid:focus{ outline: 0 !important; } /* The ring is deliberately TIGHTER than the pill — 5px off the label against the pill's 10px, and a 5px radius against the pill's 7px — so a focused tab beside the current one reads as "the cursor is here", not as a second chosen page. Measured at 1440: ring 28px tall, pill 34px. */ @media (min-width: 1024px){ html body header.bar #navPrimary#navPrimary#navPrimary#navPrimary a.ptab:focus-visible > span{ outline: var(--nvs-focus-w) solid var(--nvs-1-focus) !important; outline-offset: 5px !important; border-radius: 5px !important; } html body header.bar #navKids#navKids#navKids#navKids a.kid:focus-visible{ outline: var(--nvs-focus-w) solid var(--nvs-2-focus) !important; outline-offset: -2px !important; border-radius: 9px !important; } } @media (min-width: 901px) and (max-width: 1023px){ html body header.bar #navPrimary#navPrimary#navPrimary#navPrimary a.ptab:focus-visible > span{ outline: var(--nvs-focus-w) solid var(--nvs-1-focus) !important; outline-offset: 4px !important; border-radius: 5px !important; } html body header.bar #navKids#navKids#navKids#navKids a.kid:focus-visible{ outline: var(--nvs-focus-w) solid var(--nvs-2-focus) !important; outline-offset: -4px !important; border-radius: 8px !important; } } @media (max-width: 900px){ /* in the drawer the row IS the target, so the ring goes round the row and tucks inside it; the strip's links keep a ring just outside their pill */ html body header.bar #navPrimary#navPrimary#navPrimary#navPrimary a.ptab:focus-visible{ outline: var(--nvs-focus-w) solid var(--nvs-2-focus) !important; outline-offset: -3px !important; border-radius: 8px !important; } html body header.bar #navKids#navKids#navKids#navKids a.kid:focus-visible{ outline: var(--nvs-focus-w) solid var(--nvs-2-focus) !important; outline-offset: 2px !important; border-radius: 9px !important; } } /* Windows High Contrast: outlines are repainted by the OS, backgrounds are not — so the states must not rely on the fill alone there. */ @media (forced-colors: active){ html body header.bar #navPrimary#navPrimary#navPrimary#navPrimary a.ptab.cur::before, html body header.bar #navKids#navKids#navKids#navKids a.kid.on::after{ box-shadow: none !important; border: 1px solid CanvasText !important; background: none !important; } html body header.bar #navPrimary#navPrimary#navPrimary#navPrimary a.ptab:focus-visible > span, html body header.bar #navPrimary#navPrimary#navPrimary#navPrimary a.ptab:focus-visible, html body header.bar #navKids#navKids#navKids#navKids a.kid:focus-visible{ outline: 3px solid Highlight !important; } } /* ========================================================================== 7 · THE OUR SERVICES MENU Was: one border plus one box-shadow ring in a different grey (a double border), the current item and the hover both filled #EEF4FD (the open menu showed two current services), and the current item at radius 2px among siblings at 9px. Now: one ring on the panel, and the two states told apart the way they must be inside a panel that is ALREADY a white filled surface — the hierarchy is inverted but the rule is the same, one material each: current a deeper fill PLUS a 1px ring and bold navy ink hover a faint wash, no ring The blue selected dot is deliberately NOT used here: every live service already carries a green .nd-live dot at the right end of its row, and a second dot in the same corner would read as a badge, not a state. ========================================================================== */ /* ALIGNMENT — the panel used to start 31.9px left of the words that open it (measured at 1440: panel 661, label 692.9). That offset belonged to the old "tongue" treatment, where the tab was drawn as the panel's lid; there is no tongue any more, so the panel's left edge now sits on the label's own left edge. --svc-lip is subtracted from --svc-x (the tab BOX's left) by site-nav/nav.css, so a negative lip moves the panel right by the tab's own padding — which is exactly the label's left edge. */ @media (min-width: 1024px){ html body header.bar{ --svc-lip: calc(-1 * var(--nvs-1-pad)) !important; } } @media (min-width: 901px) and (max-width: 1023px){ html body header.bar{ --svc-lip: 0px !important; } } /* the "live" marker beside a service that exists. It had been overridden to a 5x5 SQUARE in #1E4FD6 — the same blue the selected state now owns, so it read as a second state mark. Back to what it is: a small round status dot, in a hue nothing else in the header uses. Both lists live inside #navPrimary, and the rule that squared it is `html body :is(header.bar .nd-live, #sfoot .f-live)` — :is() takes the specificity of its STRONGEST arm, so that selector scores as if it held the footer's #sfoot id. Two ids are what it takes to out-rank it. */ html body header.bar #navPrimary#navPrimary .nd-live{ width: 6px !important; height: 6px !important; border-radius: 50% !important; background: #188038 !important; background-color: #188038 !important; box-shadow: 0 0 0 3px rgba(24,128,56,.14) !important; } html body header.bar #navSvc#navSvc#navSvc#navSvc{ border: 0 !important; box-shadow: 0 0 0 1px #C9D8F0, 0 2px 8px rgba(11,13,18,.05), 0 26px 60px -18px rgba(15,27,61,.22) !important; border-radius: 12px !important; padding: 8px !important; } html body header.bar #navSvc#navSvc#navSvc#navSvc a, html body header.bar #navSvc#navSvc#navSvc#navSvc .nd-na{ position: relative; min-height: 40px !important; /* a comfortable target */ border-radius: 9px !important; background: transparent !important; box-shadow: none !important; color: #34405A !important; font-weight: 600 !important; transition: background-color .16s ease, color .16s ease !important; } html body header.bar #navSvc#navSvc#navSvc#navSvc .nd-na{ color: #8795AE !important; font-weight: 550 !important; } html body header.bar #navSvc#navSvc#navSvc#navSvc a[aria-current]{ background: #E4EFFD !important; box-shadow: inset 0 0 0 1px var(--nvs-2-ring) !important; color: var(--nvs-2-ink-on) !important; font-weight: 700 !important; } html body header.bar #navSvc#navSvc#navSvc#navSvc a:focus-visible{ outline: var(--nvs-focus-w) solid var(--nvs-2-focus) !important; outline-offset: -2px !important; border-radius: 9px !important; } @media (hover: hover) and (pointer: fine){ html body header.bar #navSvc#navSvc#navSvc#navSvc a:not([aria-current]):hover{ background: #F3F7FE !important; color: #00285E !important; } } /* inside the drawer the menu is a plain indented list — no pill, or it would be a second "chosen" mark beside the drawer row that is already current */ @media (max-width: 900px){ html body header.bar #navSvc#navSvc#navSvc#navSvc{ box-shadow: none !important; border-radius: 0 !important; padding: 0 !important; } html body header.bar #navSvc#navSvc#navSvc#navSvc a, html body header.bar #navSvc#navSvc#navSvc#navSvc .nd-na{ border-radius: 0 !important; min-height: 44px !important; } /* in the drawer the item is a full-width row against a 1px rail, so the current service takes the drawer's own mark: a 3px bar on that rail */ html body header.bar #navSvc#navSvc#navSvc#navSvc a[aria-current]{ background: none !important; box-shadow: none !important; color: #00285E !important; font-weight: 700 !important; } html body header.bar #navSvc#navSvc#navSvc#navSvc a[aria-current]::before{ content: ""; position: absolute; left: -1px; top: 8px; bottom: 8px; width: 3px; border-radius: 2px; background: var(--nvs-2-ink-on); } } /* the "View services" tip is a pointer affordance only */ @media (hover: none){ html body header.bar .ptip{ display: none !important; } } /* ========================================================================== 8 · THE ALL-PAGES LIST IN THE DRAWER (.nd-p) It repeats the six pages, so the page you are on has to be marked there too — otherwise the drawer shows the current page twice, marked once. Same language as the drawer rows above: a tinted row with a 3px bar. ========================================================================== */ @media (max-width: 900px){ html body header.bar .nd-p a{ position: relative; isolation: isolate; border-radius: 0 !important; min-height: 44px !important; -webkit-tap-highlight-color: transparent; } html body header.bar .nd-p a[aria-current]{ color: #00285E !important; font-weight: 700 !important; } html body header.bar .nd-p a[aria-current]::before{ content: ""; position: absolute; z-index: -1; inset: 0 calc(-1 * var(--pad, 18px)); background: linear-gradient(90deg, var(--nvs-2-ink-on) 0 3px, #EFF5FF 3px); } html body header.bar .nd-p a:focus-visible, html body header.bar .barmenu:focus-visible{ outline: var(--nvs-focus-w) solid var(--nvs-2-focus) !important; outline-offset: -3px !important; border-radius: 8px !important; } } @media (max-width: 900px) and (hover: hover) and (pointer: fine){ html body header.bar .nd-p a:not([aria-current]):hover{ color: #00285E !important; background: transparent !important; } html body header.bar .nd-p a:not([aria-current]):hover::before{ content: ""; position: absolute; z-index: -1; inset: 0 calc(-1 * var(--pad, 18px)); background: #F7FAFF; } }