/** * announce.css — announcement bar / popup styling. * * Reveal contract (see WPB_Announce_Frontend + announce.js): EVERY candidate is * emitted with the `hidden` attribute. The rule below hides them with * `!important` so they stay hidden even though the type classes * (`.wpb-announce--bar` / `--popup`) set a `display`, and even if this * stylesheet loads late — a privacy/clean degradation identical in spirit to * the consent banner. announce.js removes `hidden` from EXACTLY ONE wrapper * (the closed-dominates winner for the current time), and the type classes * then position it. * * Cache-safe & CLS-safe: the reveal is client-side (a full-page-cached document * still flips at the scheduled minute), and every visible form is * `position: fixed`, so revealing an announcement never reflows page content. * * z-index band: strictly BELOW the consent modal (#wpb-consent = 2147483000) * and its reopen tab (2147482900), so an announcement never covers an * undecided consent banner. */ /* * Brand-matchable design tokens (shared, identical set in consent.css). * Every default below is the plugin's CURRENT shipped value, so leaving them * untouched changes nothing. To match your brand, override any of these ONCE in * your theme's Additional CSS (Design → Customizer → Zusätzliches CSS), e.g. * `:root{--wpb-accent:#0b5cff;--wpb-accent-contrast:#fff}` — the override then * applies to both the consent banner and announcements. */ :root { --wpb-surface: #ffffff; /* card / bar / popup background */ --wpb-text: #1a1a1a; /* primary body text */ --wpb-heading: #101828; /* headings + strong labels */ --wpb-body-text: #344054; /* banner body copy */ --wpb-muted: #475467; /* subordinate text / borders / icons */ --wpb-border: #d0d5dd; /* card border */ --wpb-divider: #eaecf0; /* internal hairline dividers */ --wpb-accent: #1f2937; /* accept + reject button background */ --wpb-accent-contrast: #ffffff; /* accept + reject button text */ --wpb-accent-hover: #111827; /* accept + reject hover/pressed background */ --wpb-link: #1d4ed8; /* inline links */ --wpb-focus: #2563eb; /* keyboard focus ring */ --wpb-radius: 10px; /* card radius */ --wpb-shadow: 0 10px 40px rgba(0, 0, 0, 0.28); /* card shadow */ /* * Announcement-specific tokens (settable via Module → Ankündigungs- * Darstellung, delivered as a static inline style scoped to `.wpb-announce` * — see WPB_Announce_Style). Each default equals the shipped rule value it * replaces, so an untouched install renders identically. They are announce- * only (distinct names) so consent styling can never bleed in via `:root`. */ --wpb-border-width: 1px; /* bar edge thickness */ --wpb-announce-radius: 12px; /* desktop popup corner radius */ --wpb-backdrop: rgba(0, 0, 0, 0.55); /* dimmed page overlay behind a popup */ --wpb-popup-max-width: 520px; /* desktop popup dialog max width */ } .wpb-announce, .wpb-announce *, .wpb-announce *::before, .wpb-announce *::after { box-sizing: border-box; } /* * Hidden baseline — the belt that keeps every candidate hidden until * announce.js reveals one. `!important` beats both the UA `[hidden]` rule and * the type-class `display` declarations below, so a missing/late stylesheet or * a JS failure leaves everything hidden rather than flashing all candidates. */ .wpb-announce[hidden] { display: none !important; } /* * A revealed TOP bar reserves its own height as IN-FLOW space on : * announce.js adds `wpb-has-top-bar` to and sets `--wpb-bar-offset` to * the measured bar height on reveal, removing BOTH on dismiss. The rule is * SCOPED to that marker class so the plugin adds no body-padding effect at all * unless a top bar is actually active — a theme that sets its own * `body { padding-top }` is untouched otherwise. The only layout shift on * reveal is exactly the reserved bar height. * * IMPORTANT — this padding shifts NORMAL (in-flow) page content down; it does * NOT move a `position: fixed` element. A theme/Divi header that is itself * fixed keeps its own top:0 and the top bar can therefore render OVER it. That * is exactly why the announcement Position defaults to „Unten" (bottom) and the * meta box warns against „Oben" on a fixed Divi header. */ html.wpb-has-top-bar body { padding-top: var( --wpb-bar-offset, 0px ); } .wpb-announce { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; line-height: 1.5; color: var(--wpb-text); } /* -------------------------------------------------------------------------- * * Bar (fixed strip, top or bottom, height-capped + scrollable) * * -------------------------------------------------------------------------- */ .wpb-announce--bar { display: block; position: fixed; left: 0; right: 0; z-index: 2147481000; /* below the consent modal + tab. */ background: var(--wpb-surface); color: var(--wpb-text); border: 0 solid var(--wpb-border); /* * The height cap + scroll live on the inner dialog (a flex column), NOT * here, so the dismiss × stays anchored to the non-scrolling dialog frame * while only the content region scrolls (see the shared dialog rules). */ } .wpb-announce--bar.wpb-announce--top { top: 0; border-bottom-width: var(--wpb-border-width, 1px); box-shadow: 0 2px 12px rgba(0, 0, 0, 0.18); } .wpb-announce--bar.wpb-announce--bottom { bottom: 0; border-top-width: var(--wpb-border-width, 1px); box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.18); } .wpb-announce--bar .wpb-announce__dialog { max-width: 1080px; margin: 0 auto; max-height: 40vh; /* height cap … the content region scrolls within it. */ max-height: 40dvh; /* dvh avoids iOS Safari toolbar clipping; vh above is the fallback. */ padding: 12px 48px 12px 16px; /* right padding leaves room for dismiss. */ } /* -------------------------------------------------------------------------- * * Popup (centered card over a dimmed backdrop) * * -------------------------------------------------------------------------- */ .wpb-announce--popup { display: flex; position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 2147482000; /* above a bar, still below the consent modal. */ align-items: center; justify-content: center; padding: 16px; } /* * The backdrop covers the whole popup viewport BEHIND the dialog (which has * z-index:1) and catches pointer events, so announce.js's backdrop-click close * fires on any click in the dimmed area; the dialog sits above it and stays * fully interactive. A click on the dialog never reaches the backdrop. */ .wpb-announce__backdrop { position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: var(--wpb-backdrop, rgba(0, 0, 0, 0.55)); pointer-events: auto; } .wpb-announce--popup .wpb-announce__dialog { z-index: 1; /* sits above the backdrop. */ pointer-events: auto; /* interactive content above the click-catching backdrop. */ width: 100%; max-width: var(--wpb-popup-max-width, 520px); max-height: calc(100vh - 32px); /* height cap … the content region scrolls within it. */ max-height: calc(100dvh - 32px); /* dvh avoids iOS Safari toolbar clipping; vh above is the fallback. */ background: var(--wpb-surface); color: var(--wpb-text); border-radius: var(--wpb-announce-radius, 12px); /* popup corner radius (settable; default matches the shipped 12px). */ box-shadow: 0 12px 48px rgba(0, 0, 0, 0.35); padding: 22px 48px 22px 22px; /* right padding leaves room for dismiss. */ } /* -------------------------------------------------------------------------- * * Shared content + dismiss * * -------------------------------------------------------------------------- */ /* * Both forms lay the dialog out as a height-capped flex column (the cap lives * on the bar/popup dialog rules above) in which ONLY the content region * scrolls. Because the dialog itself never scrolls, the absolutely-positioned * dismiss × stays pinned to the dialog frame and can never scroll out of view * on a tall/capped bar or popup. */ .wpb-announce__dialog { display: flex; flex-direction: column; position: relative; /* anchors the absolutely-positioned dismiss button. */ min-height: 0; } .wpb-announce__content { overflow-y: auto; /* the single scroll region; the × lives outside it. */ min-height: 0; /* let this flex child shrink & scroll instead of growing the dialog. */ /* * Defensive horizontal-overflow containment: wide content (a large image, * a table, a long unbroken URL, or a fixed-width Divi row) must never force * a page-level horizontal scrollbar on a narrow (~320px) viewport. Clip any * horizontal overflow here and let long words/URLs wrap. */ overflow-x: hidden; overflow-wrap: anywhere; } /* * Cap embedded media/tables to the content width so they scale down instead of * spilling out of the bar/popup and triggering horizontal page scroll. */ .wpb-announce__content img, .wpb-announce__content video, .wpb-announce__content table { max-width: 100%; height: auto; } .wpb-announce__content > *:first-child { margin-top: 0; } .wpb-announce__content > *:last-child { margin-bottom: 0; } .wpb-announce__content a { color: var(--wpb-link); text-decoration: underline; } .wpb-announce__dismiss { position: absolute; top: 6px; right: 8px; display: flex; align-items: center; justify-content: center; width: 34px; height: 34px; padding: 0; font-size: 26px; line-height: 1; color: var(--wpb-muted); background: transparent; border: none; border-radius: 6px; cursor: pointer; } .wpb-announce__dismiss:hover { color: var(--wpb-heading); background: rgba(0, 0, 0, 0.06); } .wpb-announce__dismiss:active { background: rgba(0, 0, 0, 0.12); transform: translateY(1px); } .wpb-announce :focus-visible, .wpb-announce__dismiss:focus-visible { outline: 3px solid var(--wpb-focus); outline-offset: 2px; border-radius: 4px; } /* * The dialog CONTAINER is a layout frame, never an interactive control — it must * never draw a focus ring (belt-and-suspenders: announce.js no longer moves * focus onto it on reveal). The visible focus ring on the interactive controls * above (dismiss × / links / buttons) is deliberately kept for keyboard * accessibility (WCAG 2.4.7); this only silences the non-interactive frame. */ .wpb-announce__dialog:focus { outline: none; } /* -------------------------------------------------------------------------- * * Subtle entrance motion (accessible) * * -------------------------------------------------------------------------- */ /* * ONLY for visitors who have not asked for reduced motion. The winning wrapper * is still revealed by the existing `hidden`/display mechanism (the source of * truth); announce.js adds `wpb-announce--visible` on the NEXT frame after * unhiding, so the bar slides in and the popup + backdrop fade/slide in. * Reduced-motion users (and browsers without transitions, or when JS never adds * the class) get the fully-opaque form instantly — no state leaves a shown * announcement invisible, and the entrance runs only when one is actually shown. */ @media (prefers-reduced-motion: no-preference) { .wpb-announce--bar { opacity: 0; transition: opacity 180ms ease, transform 180ms ease; } .wpb-announce--bar.wpb-announce--top { transform: translateY(-8px); } .wpb-announce--bar.wpb-announce--bottom { transform: translateY(8px); } .wpb-announce--bar.wpb-announce--visible { opacity: 1; transform: translateY(0); } .wpb-announce--popup .wpb-announce__backdrop { opacity: 0; transition: opacity 180ms ease; } .wpb-announce--popup .wpb-announce__dialog { opacity: 0; transform: translateY(8px); transition: opacity 180ms ease, transform 180ms ease; } .wpb-announce--popup.wpb-announce--visible .wpb-announce__backdrop { opacity: 1; } .wpb-announce--popup.wpb-announce--visible .wpb-announce__dialog { opacity: 1; transform: translateY(0); } /* Smooth press feedback on the dismiss × (instant for reduced-motion users). */ .wpb-announce__dismiss { transition: background-color 120ms ease, color 120ms ease, transform 80ms ease; } } /* -------------------------------------------------------------------------- * * Small screens * * -------------------------------------------------------------------------- */ @media (max-width: 480px) { .wpb-announce--bar .wpb-announce__dialog { max-height: 55vh; /* taller cap on phones; the content region still scrolls. */ max-height: 55dvh; /* dvh avoids iOS Safari toolbar clipping; vh above is the fallback. */ } .wpb-announce--popup { padding: 0; align-items: flex-end; /* bottom sheet on phones. */ } .wpb-announce--popup .wpb-announce__dialog { max-width: none; max-height: 85vh; max-height: 85dvh; /* dvh keeps the sheet clear of the iOS toolbar; vh above is the fallback. */ border-radius: 14px 14px 0 0; } /* Bigger touch target for the dismiss × (≥44×44px, glyph stays centered). */ .wpb-announce__dismiss { width: 44px; height: 44px; } }