/** * Next Level Card Show Manager — announcement bar. * Author: Jaypee M. | Maglacas Digital * * Its own stylesheet rather than a section of public.css, because this is the one thing the * plugin puts on every page of the site. Loading two and a half thousand lines of event, * raffle and pricing CSS sitewide to paint one strip of text would be a poor trade. * * Everything is a variable so a Breakdance global stylesheet can retheme the bar without * this file being touched. */ /* ---------- Sitting above a sticky header ---------- * The site's Breakdance header is sticky, which means `position: fixed` — it is out of the * document flow and pinned to the top of the viewport. A bar in normal flow at the start of * therefore renders perfectly and is completely covered by it, which is exactly what * happened the first time this shipped. * * So the bar joins the pinned stack instead of fighting it: fixed, directly under the admin * bar, with the header pushed down by the bar's height through Breakdance's own * --bde-header-sticky-offset, and the same height added to the body so no content ends up * underneath. One number, --nlcs-banner-h, drives all three. * * The value here is a sensible starting guess so the page is laid out correctly on the very * first paint; banner.js measures the real bar and corrects it. Getting it close matters — * the difference between the two is a visible jump at the top of the page. */ :root { --nlcs-banner-h: 41px; } @media (max-width: 600px) { :root { /* Narrow enough that the announcement usually takes two lines. */ --nlcs-banner-h: 58px; } } .nlcs-banner { --nlcs-banner-bg: #e00025; --nlcs-banner-ink: #fff; --nlcs-banner-cta: #fff; --nlcs-banner-rule: rgba(255, 255, 255, .45); --nlcs-banner-hover: rgba(255, 255, 255, .16); position: relative; background: var(--nlcs-banner-bg); color: var(--nlcs-banner-ink); /* The site's body font, not the browser default — this sits directly above the header * and a stray Times New Roman strip is instantly obvious. */ font-family: inherit; font-size: 15px; line-height: 1.4; text-align: center; } /* Only the bar on the site is pinned. The preview on the Settings screen uses the same class * and the same stylesheet, and a preview that tore itself out of the panel and stuck to the * top of the admin would not be much of a preview. */ .nlcs-banner--pinned { position: fixed; /* Under the WordPress toolbar, which is itself fixed. WordPress declares this variable on * , and only when the toolbar is actually being shown — so a logged-out visitor * falls through to 0 without a media query to say so. */ top: var(--wp-admin--admin-bar--height, 0px); left: 0; right: 0; /* Breakdance's sticky header is 200 and its modals and mobile menu are 1000. Between the * two: over the header, under anything the visitor has deliberately opened. */ z-index: 250; } /* Below 600px WordPress stops fixing the toolbar and the theme hides it outright, so there * is nothing above the bar to sit under. Matches what Breakdance does to its own header. */ @media screen and (max-width: 600px) { .nlcs-banner--pinned { top: 0; } } /* The space the pinned bar covers, given back. * * Two rules rather than one selector list, deliberately: an unsupported :has() invalidates * the whole rule it appears in, so pairing it with the fallback in one list would take the * fallback down with it on the browsers that need it. :has() handles this with JavaScript * off; the class, set by banner.js before , handles everything else. */ body:has(> .nlcs-banner--pinned) { padding-top: var(--nlcs-banner-h, 0px); } .nlcs-has-banner body { padding-top: var(--nlcs-banner-h, 0px); } /* And the header moved down to sit under the bar. Breakdance already offers the offset as a * variable — its sticky top is calc(offset + toolbar) — so this is the seam it provides * rather than a `top` override fighting its own rule. `body` prefixed only to outrank the * 0px default it sets on the same class, whichever file the browser reads last. */ body:has(> .nlcs-banner--pinned) .bde-header-builder { --bde-header-sticky-offset: var(--nlcs-banner-h, 0px); } .nlcs-has-banner body .bde-header-builder { --bde-header-sticky-offset: var(--nlcs-banner-h, 0px); } /* Set by banner.js in the head when this exact announcement has already been dismissed, so * the bar is hidden before the first paint rather than yanked away after it. The height goes * with it, or the page would keep holding open a gap for a bar that is not there. */ .nlcs-banner-dismissed .nlcs-banner { display: none; } html.nlcs-banner-dismissed { --nlcs-banner-h: 0px; } .nlcs-banner__inner { display: flex; align-items: center; justify-content: center; gap: 10px; /* Room on the right for the close button, matched on the left so the copy stays optically * centred rather than nudged off-centre by the button's width. */ padding: 10px 44px; max-width: 1400px; margin: 0 auto; } .nlcs-banner--dismissible .nlcs-banner__inner { position: relative; } /* `.nlcs-banner p` and not a bare class: a page builder styles paragraphs with selectors of * its own, and a theme's default paragraph margin here throws the bar's height off. */ .nlcs-banner .nlcs-banner__text { margin: 0; padding: 0; color: inherit; font-size: inherit; line-height: inherit; /* Wraps rather than truncates: the whole announcement matters, and a phone gets two * lines rather than half a sentence. */ text-wrap: balance; } .nlcs-banner__copy { font-weight: 500; } .nlcs-banner__dot { opacity: .6; margin: 0 2px; } .nlcs-banner .nlcs-banner__cta { color: var(--nlcs-banner-cta); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 2px; /* A link on a solid colour bar needs its hit area to feel like a button on a phone * without becoming one on a desktop. */ padding: 2px 0; white-space: nowrap; transition: opacity .15s; } .nlcs-banner .nlcs-banner__cta:hover, .nlcs-banner .nlcs-banner__cta:focus { color: var(--nlcs-banner-cta); opacity: .78; } .nlcs-banner__close { position: absolute; top: 50%; right: 4px; transform: translateY(-50%); display: inline-flex; align-items: center; justify-content: center; /* 32px, and no smaller: this is the only tap target on the bar and it sits at the very * top edge of the screen, which is already the hardest place on a phone to hit. */ width: 32px; height: 32px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: inherit; font-size: 22px; line-height: 1; cursor: pointer; opacity: .75; transition: background .15s, opacity .15s; } .nlcs-banner__close:hover, .nlcs-banner__close:focus-visible { background: var(--nlcs-banner-hover); opacity: 1; } .nlcs-banner__close:focus-visible { outline: 2px solid currentColor; outline-offset: -2px; } /* ---------- Presets ---------- */ /* Same bar, blue instead of show red — white copy, white link, so it reads exactly like the * red one from a distance. The blue is dark enough to carry white text at the bar's 15px * weight-500 (about 8:1 against #fff), which a mid blue would not. */ .nlcs-banner--blue { --nlcs-banner-bg: #0b3fb5; --nlcs-banner-ink: #fff; --nlcs-banner-cta: #fff; --nlcs-banner-rule: rgba(255, 255, 255, .45); --nlcs-banner-hover: rgba(255, 255, 255, .16); } .nlcs-banner--dark { --nlcs-banner-bg: #16181d; --nlcs-banner-ink: #f4f5f7; --nlcs-banner-cta: #ff5a70; --nlcs-banner-hover: rgba(255, 255, 255, .12); } .nlcs-banner--light { --nlcs-banner-bg: #f2f3f5; --nlcs-banner-ink: #16181d; --nlcs-banner-cta: #c0001f; --nlcs-banner-hover: rgba(0, 0, 0, .08); } .nlcs-banner--light { border-bottom: 1px solid rgba(0, 0, 0, .1); } /* ---------- Small screens ---------- */ @media (max-width: 600px) { .nlcs-banner { font-size: 13.5px; } .nlcs-banner__inner { padding: 9px 40px; } } /* ---------- Assistive text ---------- * Defined here rather than borrowed from the theme: breakdance-zero ships no stylesheet of * its own, so an inherited .screen-reader-text would print the words "Close announcement" * across the bar next to the ×. */ .nlcs-banner .screen-reader-text { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }