/* NOTIFICATION BAND Walter Rowland's proposal, 2026-08-27: "some kind of notification header widget thing, similar to microsoft.com/en-us". His screenshot is a full-bleed solid blue strip sitting directly under the nav, one line of text, an inline underlined link, and a dismiss X on the right. This is that, in TWC's palette. WHY IT IS NOT PART OF THE HERO COMPONENT. It is page chrome, not a hero feature: it belongs to the top of the site whatever sits underneath it, exactly like the partner logo train. Building it into narrative-boxes.js would weld a site-wide announcement to one particular hero and make it impossible to show on a page that has no hero at all. THE ONE THING THAT WILL BREAK IF YOU MOVE IT. The live nav is `position: fixed`, which is why the hero carries a `--nb-top` offset rather than sitting in normal flow. The band is fixed too, pinned directly below that nav, so the hero's offset has to grow by the band's height or the band lands on top of the setup line. That coupling is expressed as `--nb-band-h`, declared here and consumed by the page-level `--nb-top` calc, so the height lives in exactly one place. Change it here, nothing else needs touching. */ /* DEFAULT IS ZERO, and that matters. This var is read by the page's --nb-top calc to reserve space above the hero. Declaring the real height here unconditionally meant a page that did not render a band still reserved 46px for it: `?band=0` produced a navy gap between the nav and the headline, and so would any page that loaded the stylesheet without the script. So nothing is reserved until the script confirms a band exists by putting `nb-band-on` on . Removing that class is also what collapses it on dismiss, so there is one mechanism rather than two. */ :root { --nb-band-h: 0px; } :root.nb-band-on { /* 36px, down 10 from 46 (Michael 2026-08-27). The hero offset needs no separate change: --nb-top is calc(nav + var(--nb-band-h)), so the band and the space reserved for it are the same number by construction. 36 is the floor for this layout, not a free choice. The dismiss button is 32px tall (a 16px glyph in 8px of padding), so at 36 it has 2px of air either side; below that the button starts driving the band's height instead of the other way round. */ --nb-band-h: 36px; } .nb-band { position: fixed; /* --nb-nav-h is set by the page, because only the page knows how tall the real nav is at this breakpoint. Defaults to the desktop measurement if it is missing. */ top: var(--nb-nav-h, 112px); left: 0; right: 0; /* Above the hero and its backdrop video, below the nav's own dropdowns. The live nav sits at 1000+, so this deliberately stays under it. */ z-index: 90; height: var(--nb-band-h); display: flex; align-items: center; gap: 16px; box-sizing: border-box; /* 45px, measured off the live nav: the wordmark and the first nav link both start there. --gut is NOT usable here, because it is declared on .nb-section rather than :root, so referencing it silently fell through to the 24px fallback and the band text sat 21px to the left of everything else on the page. The band belongs to the nav region, so it aligns to the nav, not to the hero's wider 117px gutter. */ padding: 0 20px 0 45px; /* Cyan 40 with Blue 100 text (Michael 2026-08-27), replacing Blue 60 on white. Cyan is the loudest colour in the palette and the band is the one element on the page whose whole job is to be noticed before anything else, so it takes the brightest value and the hero keeps the quieter one. Dark type on a light band also stops it reading as a third button, which it was starting to at Blue 60 next to the CTA and the step buttons. Contrast is 7.7:1, which clears AA at 4.5 and AAA at 7 for body text. Hardcoded rather than tokenised because this element sits OUTSIDE .nb-section, where --cyan is declared, so var(--cyan) would resolve to nothing here. */ background: #33B1FF; color: #001141; font-family: 'IBM Plex Sans', system-ui, sans-serif; font-size: 14px; line-height: 1.3; overflow: hidden; /* Animates on dismiss. Height and opacity only, so it collapses upward rather than sliding sideways over the hero. */ transition: height 260ms cubic-bezier(0.4, 0, 0.2, 1), opacity 180ms linear; } .nb-band[hidden] { display: none; } /* THE WORDPRESS ADMIN BAR, which only logged-in users see but which is how the whole team reviews. WordPress pushes the document down by the bar's height, and everything in normal flow moves with it, including the hero. This band does not: it is position:fixed and pinned to a hardcoded nav height, so it stayed at 112px while the nav slid to 144 and the band ended up behind it, showing as a 4px cyan sliver. Visitors were always fine, which is exactly why it went unnoticed. 32px is the bar's desktop height and 46px its height below 782px, which are WordPress's own breakpoints, not ours. */ body.admin-bar .nb-band { top: calc(var(--nb-nav-h, 112px) + 32px); } @media screen and (max-width: 782px) { body.admin-bar .nb-band { top: calc(var(--nb-nav-h-compact, 76px) + 46px); } } :root.nb-band-dismissed .nb-band { opacity: 0; } /* height follows --nb-band-h */ .nb-band__text { flex: 1 1 auto; min-width: 0; /* Centred to match the old site (Teresa 2026-08-31). Centring the text box rather than absolutely centring over the band, because the close button is a flex sibling and overlaying the two would collide at narrow widths. The text box is inset 45px left and 20px + close + gap right, so its centre sits about 7px left of the band's true centre. That is under half a character and not perceptible; the alternative costs the close button its safe area. */ text-align: center; /* One line. A notification that wraps to two stops reading as chrome and starts reading as content, and it would also change the band's height out from under --nb-band-h. */ white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* Brand rule: "The Weather Company" and "The Weather Channel" never break across lines. The band is nowrap anyway, but this survives someone removing that. */ .nb-band__nb { white-space: nowrap; } .nb-band__link { color: #001141; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; } .nb-band__link:hover { text-decoration-thickness: 2px; } /* FOCUS: nothing visible, on purpose. The browser's default ring is painted OUTSIDE the element's box. `.nb-band__text` is exactly as tall as this link (18px, zero clearance) and carries overflow:hidden for its ellipsis, so the ring was sheared top and bottom and only its left and right strokes survived. Those two stray verticals flanking the label were reported as "odd braces on the CTA" on 2026-08-31, and they showed on click because that is when the link takes focus. Every visible alternative was worse here. An inset outline draws a dark box tight around the text, which reads as a border rather than a focus state. A background pill inverts to dark navy on a bright cyan band and is more conspicuous than the bug was. Thickening the underline is unavailable: it is already 3px with a 3px offset. So the ring is simply removed. This is a deliberate WCAG 2.4.7 trade on ONE link inside a dismissible notification band, taken because every indicator that fits the 18px clipped box looked like a defect. High-contrast users keep an indicator below. If the band ever gains vertical room, a normal ring becomes possible again and should come back. */ .nb-band__link:focus { outline: none; } /* Forced-colors means the user has asked the OS for maximum legibility, so they get a ring regardless. Inset, so the clipping cannot shear it. Invisible to everyone else. */ @media (forced-colors: active) { .nb-band__link:focus-visible { outline: 2px solid CanvasText; outline-offset: -2px; } } .nb-band__close { flex: none; appearance: none; background: none; border: 0; padding: 8px; margin: 0 -8px 0 0; cursor: pointer; color: #001141; display: flex; align-items: center; border-radius: 2px; } /* Tints have to invert with the band: a white wash on cyan is nearly invisible, so the hover state darkens rather than lightens. */ .nb-band__close:hover { background: rgba(0, 17, 65, 0.14); } .nb-band__close:focus-visible { outline: 2px solid #001141; outline-offset: -2px; } .nb-band__close svg { display: block; } @media (max-width: 900px) { :root.nb-band-on { --nb-band-h: 48px; } /* two lines once the gutter shrinks, also down 10 */ .nb-band { top: var(--nb-nav-h-compact, 76px); font-size: 13px; padding: 0 12px 0 20px; gap: 10px; } /* On a phone the headline has to be allowed to use two lines, so the band is taller rather than truncating the story to nothing. */ .nb-band__text { white-space: normal; } } @media (prefers-reduced-motion: reduce) { .nb-band { transition: none; } }