/* ====================================================================== * Announcement bar * * A slim strip above the site header. Printed in document flow at the top * of , which pushes the in-flow page down by its own height; the * header is absolutely positioned at top: 0, so it has to be moved down * separately — see the .has-announcement-bar rules at the bottom. * ==================================================================== */ .announce { --announce-h: 44px; position: relative; z-index: 200; display: flex; align-items: stretch; height: var(--announce-h); background: #00131b; color: #ffffff; overflow: hidden; } /* The event palette, as a hairline under the strip rather than a fill — enough to place it, not enough to compete with the header below. */ .announce::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: linear-gradient(90deg, #5bc8ff 0%, #1f7be0 45%, #9b51e0 100%); pointer-events: none; } .announce__link { flex: 1 1 auto; display: flex; align-items: center; justify-content: center; min-width: 0; padding: 0 16px; color: inherit; text-decoration: none; overflow: hidden; } a.announce__link:hover .announce__cta, a.announce__link:focus-visible .announce__cta { text-decoration-color: currentColor; } a.announce__link:focus-visible { outline: 2px solid #5bc8ff; outline-offset: -3px; } .announce__track { display: flex; align-items: center; min-width: 0; } .announce__msg { display: inline-flex; align-items: center; gap: 10px; white-space: nowrap; font-family: "TWK Everett", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; font-size: 14px; font-weight: 300; line-height: 1; letter-spacing: 0.01em; } .announce__cta { font-weight: 450; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(255, 255, 255, 0.45); transition: text-decoration-color 0.15s ease; } .announce__arrow { display: inline-flex; transition: transform 0.15s ease; } a.announce__link:hover .announce__arrow { transform: translateX(3px); } /* ---------------------------------------------------------- Static --- */ /* Centred, and truncated rather than wrapped — the bar is one line tall and a second line would push the whole site down. */ .announce--static .announce__msg { overflow: hidden; text-overflow: ellipsis; } .announce--static .announce__text { overflow: hidden; text-overflow: ellipsis; } /* ---------------------------------------------------------- Ticker --- */ /* * Three copies of the message scroll left as one track; translating by * exactly one third puts copy two where copy one started, so the loop is * seamless. Duration is set from the measured track width by the script, * which keeps the speed constant whatever the message says — a fixed * duration makes a long message race and a short one crawl. */ .announce--ticker .announce__link { justify-content: flex-start; } .announce--ticker .announce__track { gap: 48px; padding-left: 48px; animation: announce-scroll var(--announce-dur, 26s) linear infinite; will-change: transform; } .announce--ticker:hover .announce__track, .announce--ticker:focus-within .announce__track { animation-play-state: paused; } @keyframes announce-scroll { from { transform: translateX(0); } to { transform: translateX(calc(-100% / 3)); } } /* * Asked to reduce motion means asked to reduce motion. The ticker becomes * the static bar — the message still reads, it simply holds still. */ @media (prefers-reduced-motion: reduce) { .announce--ticker .announce__track { animation: none; gap: 0; padding-left: 0; } .announce--ticker .announce__link { justify-content: center; } .announce--ticker .announce__msg[aria-hidden="true"] { display: none; } } /* --------------------------------------------------------- Dismiss --- */ .announce__close { flex: 0 0 auto; width: var(--announce-h); display: inline-flex; align-items: center; justify-content: center; padding: 0; border: 0; background: transparent; color: rgba(255, 255, 255, 0.6); cursor: pointer; transition: color 0.15s ease; } .announce__close:hover { color: #ffffff; } .announce__close:focus-visible { outline: 2px solid #5bc8ff; outline-offset: -4px; color: #ffffff; } /* ------------------------------------------------- Making room ------- */ /* * The site header is `position: absolute; top: 0`, so the bar's own height * in the flow does not move it — it has to be told. Scoped to the body * class so a page without the bar is untouched. */ .has-announcement-bar .site-header { top: var(--announce-h, 44px); } /* * Logged in, WordPress pins its admin bar over the top of the page and the * theme already moves the header down to clear it: * * .admin-bar .site-header { top: 32px } * * That selector and the one above are both (0,2,0), so the two tie on * specificity and the cascade falls back to source order — whichever * stylesheet happens to load second wins, and one of the two is always * wrong. With the theme's rule winning, the header sat at 32px while this * bar occupied the first 44, which is why an editor saw the ticker slicing * through the logo while a logged-out visitor saw it correctly. * * Both bars are present at once, so the header has to clear the sum of * them. Taking both classes puts this at (0,3,0), which settles it on * specificity rather than on which file loaded last. */ .admin-bar.has-announcement-bar .site-header { top: calc(32px + var(--announce-h, 44px)); } /* WordPress makes its own bar 46px tall below this width. */ @media screen and (max-width: 782px) { .admin-bar.has-announcement-bar .site-header { top: calc(46px + var(--announce-h, 44px)); } } /* * Nothing else needs moving. The bar is in the document flow, so it has * already pushed every in-flow section down by its own height — topping up * --pp-header-h as well counted the bar twice and left a 42px band of * nothing between the header and the hero beneath it. */ @media (max-width: 700px) { .announce { --announce-h: 40px; } .announce__msg { font-size: 13px; gap: 8px; } .announce__link { padding: 0 12px; } /* On a phone the arrow is the affordance; the CTA words cost a line the bar does not have. */ .announce--static .announce__cta { display: none; } }