/* * announcement-bar.css * * Place at: assets/css/announcement-bar.css in your theme. * * LAYOUT ONLY — colours, typography, and padding are left to your theme. * * CSS VARIABLES (set inline by PHP): * --ab-duration Seconds between transitions (e.g. 3s) * --ab-count Total number of announcements * * CSS VARIABLE (set on by JS): * --announcement-bar-height Rendered px height of the bar. * Use to offset sticky headers: * .site-header { top: var(--announcement-bar-height, 0px); } * * BEM CLASSES: * .announcement-bar Outer wrapper — add bg, colour, z-index here * .announcement-bar__track Stacking grid — all items share grid-area 1/1 * .announcement-bar__item Single announcement (icon + message + link) * .announcement-bar__item.is-active Currently visible item * .announcement-bar__icon Icon element (dashicon span or img), 2rem * .announcement-bar__message Message text span * .announcement-bar__link Invisible full-bar anchor (absolutely positioned) */ /* ── Height variable default ─────────────────────────────────────────────── */ :root { --announcement-bar-height: 0px; } /* ── Outer bar ───────────────────────────────────────────────────────────── */ .announcement-bar { position: relative; overflow: hidden; display: grid; box-shadow: 5px 5px 10px rgba(0,0,0,0.2); } /* ── Track ───────────────────────────────────────────────────────────────── */ /* * All items share grid-area 1 / 1, so they overlap in the same cell. * The bar height is always equal to the tallest item — no layout shift. */ .announcement-bar__track { display: grid; background: var(--wp--preset--color--red) !important; color: #fff; font-size: .85rem; line-height: 1em; padding: .5rem 1rem; } /* ── Item ────────────────────────────────────────────────────────────────── */ .announcement-bar__item { grid-area: 1 / 1; display: grid; grid-template-columns: 1.5rem auto; justify-content: center; align-items: center; gap: 0.5rem; position: relative; opacity: 0; visibility: hidden; transition: opacity 0.4s ease; pointer-events: none; } .announcement-bar__item.is-active { opacity: 1; visibility: visible; pointer-events: auto; } /* Collapse icon column when no icon is present */ .announcement-bar__item:not(:has(.announcement-bar__icon)) { grid-template-columns: 1fr; justify-content: center; text-align: center; } /* ── Icon ────────────────────────────────────────────────────────────────── */ .announcement-bar__icon { display: flex; align-items: center; justify-content: center; width: 1.25rem; height: 1.25rem; flex-shrink: 0; font-size: 1.25rem; } .announcement-bar__icon img { width: 1.25rem; height: 1.25rem; object-fit: contain; } /* ── Message ─────────────────────────────────────────────────────────────── */ .announcement-bar__message { /* Typography controlled by theme */ } /* ── Full-bar link ───────────────────────────────────────────────────────── */ .announcement-bar__link { position: absolute; inset: 0; z-index: 1; text-indent: -9999px; overflow: hidden; white-space: nowrap; }