/* ========================================================================== * Announcement banner — module-owned styles (self-contained, #326). * * Enqueued in (render-blocking, so the above-the-fold banner never * flashes unstyled) only when a banner wins a position — disabling the module * removes every banner byte from the site. The theme keeps only its own bar * chrome (.lj-header__bar*, search form); design comes from the --lj-* tokens * with equal-value fallbacks, so the high-contrast palette applies and the * rules survive if the theme is inactive. * * Markup contract: see LJE_Announcement_Banner_Renderer (classes + data-lje-* * attributes; dismiss behavior in assets/js/announcement-banner.js). * ========================================================================== */ /* Principal banners dissolve into the theme's dark header bar: their children * become flex items of .lj-header__bar-inner. */ .lje-banner { display: contents; } /* The JS dismiss sets [hidden]; display:contents/flex would beat the UA rule. */ .lje-banner[hidden] { display: none; } /* Raw / custom-HTML banners: the author owns all styling. Render in an own * box and impose nothing else (no --sale strip). */ .lje-banner--raw { display: block; } /* "Learn more" trigger — the auto-appended default button (__more) and an * author-placed [modal_trigger] (shortcode emits .lje-modal-trigger; its quiet * baseline ships with the shared modal.css). */ .lje-banner__more, .lje-banner .lje-modal-trigger { appearance: none; background: none; border: 0; padding: 0; cursor: pointer; font-size: var(--lj-text-xs, 0.75rem); color: var(--lj-color-text-inverse, #fff); text-decoration: underline; opacity: 0.85; } /* Dismiss (X) button. */ .lje-banner__dismiss { appearance: none; background: none; border: 0; padding: var(--lj-space-1, 0.25rem); cursor: pointer; color: var(--lj-color-text-inverse, #fff); opacity: 0.7; display: inline-flex; align-items: center; } .lje-banner__more:hover, .lje-banner__more:focus-visible, .lje-banner__dismiss:hover, .lje-banner__dismiss:focus-visible, .lje-banner .lje-modal-trigger:hover, .lje-banner .lje-modal-trigger:focus-visible { opacity: 1; } /* Raw banners drop the dark themed background, so the inverse (white) control * color could land on the author's light markup — inherit instead. */ .lje-banner--raw .lje-banner__more, .lje-banner--raw .lje-banner__dismiss, .lje-banner--raw .lje-modal-trigger { color: inherit; } /* Sale sub-banner (#212): a full-width strip below the principal bar. Its look * is owned here in code: tweak the --lje-sale-* knobs to change background, * text color, or shape. */ .lje-banner--sale { --lje-sale-bg: var(--lj-color-primary, #00a5b2); --lje-sale-fg: var(--lj-color-text-inverse, #fff); --lje-sale-radius: 0; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--lj-space-3, 0.75rem); background: var(--lje-sale-bg); color: var(--lje-sale-fg); border-radius: var(--lje-sale-radius); padding-block: var(--lj-space-2, 0.5rem); padding-inline: var(--lj-space-5, 1.5rem); font-size: var(--lj-text-sm, 0.875rem); text-align: center; } /* Top bar (#354): a slim strip rendered above the entire header, visually * distinct from the --sale strip via navy instead of teal. Its look is owned * here in code: tweak the --lje-topbar-* knobs to change background, text * color, or shape. */ .lje-banner--topbar { --lje-topbar-bg: var(--lj-color-navy, #4c6085); --lje-topbar-fg: var(--lj-color-text-inverse, #fff); --lje-topbar-radius: 0; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--lj-space-3, 0.75rem); background: var(--lje-topbar-bg); color: var(--lje-topbar-fg); border-radius: var(--lje-topbar-radius); padding-block: var(--lj-space-1, 0.25rem); padding-inline: var(--lj-space-5, 1.5rem); font-size: var(--lj-text-xs, 0.75rem); text-align: center; }