/*! * WEBE Cookie Banner — front-end styles * @author Florian Hüing * @copyright 2026 webe Media — Florian Hüing. All rights reserved. */ /* * Page-covering backdrop shown together with the initial consent banner, so * the banner reads as a true modal popup (WCAG 1.4.10-friendly: dims but * never traps scroll) rather than a bar the visitor can ignore. Kept as a * separate element (not merged into .webe-cc) so the preferences panel's * own backdrop can layer on top without doubling up the banner markup. * * Frosted-glass look (light blur, not a dark dim): the site behind stays * bright and legible — just softened — until the visitor decides, rather * than the page going dark. Falls back to a plain light tint on browsers * without backdrop-filter support (still communicates "site is behind a * layer" without the blur). */ /* * Modal scroll lock: toggled on by setScrollLock() in banner.js * whenever the backdrop is visible (first prompt, or reopened via the * trigger/"Manage preferences"). The backdrop element already blocks clicks * on the page behind it (a full-viewport element above the page's own * content in the stacking order), but nothing previously stopped the page * from scrolling underneath a still-open dialog. Locking itself * (not just ) is the version that holds reliably on iOS Safari too. */ html.webe-cc-scroll-lock, html.webe-cc-scroll-lock body { overflow: hidden !important; } .webe-cc__backdrop { position: fixed; inset: 0; z-index: 999998; background: color-mix(in srgb, var(--webe-cc-backdrop-color, #ffffff) 55%, transparent); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); opacity: 1; transition: opacity 200ms ease; } .webe-cc__backdrop[hidden] { display: block; opacity: 0; pointer-events: none; } .webe-cc { position: fixed; left: 50%; z-index: 999999; box-sizing: border-box; width: calc(100% - 2rem); max-width: var(--webe-cc-width, 620px); padding: var(--webe-cc-padding, 1.25rem); /* * !important on the CI-defining properties in this file (background, * color, border, border-radius) is deliberate: this banner renders * inside arbitrary client sites, and popular theme/page-builder resets * (e.g. Hello Elementor's reset.css targets bare `button`/[type=button] * selectors) tie or beat our class-selector specificity, silently * discarding the client's configured CI colors — confirmed live on a * client site where reset.css's `button:hover` rule painted every * button pink regardless of the accent color set in Settings. Without * !important here, "CI configurable per client" silently breaks on any * theme with its own button reset. */ border-radius: var(--webe-cc-card-radius, 16px) !important; background: var(--webe-cc-bg, #1c1c1e) !important; color: var(--webe-cc-text, #f5f5f7) !important; font: 15px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; /* When --webe-cc-font is not set, inherit the host page's font (the * var() default). The plugin overrides only when the admin opts in. */ font-family: var(--webe-cc-font, inherit); display: flex; flex-wrap: wrap; /* * row-gap must stay 0. The action zone and the footer below it are one * continuous tinted band (see .webe-cc > .webe-cc__actions); any row * gap between them lets the card's own background show through as a * stripe splitting that band in two. Vertical rhythm is handled by the * elements' own padding/margins instead — .webe-cc__title's * margin-bottom under the logo, the action zone's own padding-top. */ column-gap: 1rem; row-gap: 0; align-items: center; justify-content: space-between; box-shadow: 0 10px 40px rgba(0, 0, 0, 0.35); opacity: 1; transition: transform 200ms ease, opacity 200ms ease; } .webe-cc[hidden] { display: flex; pointer-events: none; opacity: 0; } .webe-cc--bottom { bottom: 1.25rem; transform: translateX(-50%) translateY(0); transform-origin: bottom; } .webe-cc--bottom[hidden] { transform: translateX(-50%) translateY(20px); } .webe-cc--top { top: 1.25rem; transform: translateX(-50%) translateY(0); transform-origin: top; } .webe-cc--top[hidden] { transform: translateX(-50%) translateY(-20px); } /* * The logo always gets the full top row of its own. It used to be a * flex sibling of the body copy with a 320px flex-basis, so on anything * wider than a phone it sat *beside* the paragraph, vertically centred — * reading as a bullet next to the text rather than as the brand mark of * the dialog. */ .webe-cc__title { flex: 1 1 100%; display: flex; align-items: center; /* The container's row-gap is 0 (see .webe-cc), so the space between the * logo and the copy below it lives here. */ margin-bottom: 0.85rem; } /* * With no logo configured this element holds only the visually-hidden * heading, so it would contribute an empty row plus the container's * row-gap above the copy. Hiding it is safe for the dialog's accessible * name: it is the direct target of aria-labelledby, and the accessible * name computation explicitly uses a directly-referenced element even * when that element is hidden. */ .webe-cc:not(:has(.webe-cc__logo)) .webe-cc__title { display: none; } /* * The body copy sits in its own framed well rather than floating directly on * the card. With the logo above it and the tinted action zone below, the card * otherwise read as one undivided block of text; the frame gives the copy a * defined container and makes the three zones legible as structure. * * Tint and border are derived from the configured card background with * color-mix, so this stays proportionate on a dark CI instead of assuming a * white card. min() on the radius keeps the inner corner tighter than the * card's own — an inner box repeating a 20px (or pill) outer radius looks * like a mistake. */ .webe-cc__body { flex: 1 1 100%; min-width: 0; box-sizing: border-box; padding: 0.95rem 1.1rem; border: 1px solid color-mix(in srgb, var(--webe-cc-bg, #ffffff) 88%, black); border-radius: min(var(--webe-cc-card-radius, 20px), 14px); background: color-mix(in srgb, var(--webe-cc-bg, #ffffff) 97%, black); } /* * Browsers without color-mix() get a neutral translucent overlay instead: * it darkens a light card and lightens nothing, but it never renders as an * invisible or clashing block the way a hard-coded gray would on a dark CI. */ @supports not (background: color-mix(in srgb, white 90%, black)) { .webe-cc__body { border-color: rgba(128, 128, 128, 0.28); background: rgba(128, 128, 128, 0.07); } } .webe-cc__logo { display: block; max-height: var(--webe-cc-logo-height, 28px); /* height:auto + max-width:100% keeps SVG logos honest: an SVG that * ships with only a viewBox and no intrinsic width/height has its * width derived from the aspect ratio instead of falling back to the * 300×150 default replaced-element size, and a wide logo can never * push past the card edge. */ height: auto; width: auto; max-width: 100%; } .webe-cc__actions { /* * flex: 1 1 100% (rather than the old 0 0 auto) makes this container * claim the banner's full width once it wraps onto its own row below * the body text in the OUTER .webe-cc flex-wrap layout, and min-width: * 0 lets it actually shrink to that width instead of overflowing the * card (confirmed on a 375px viewport: "Alle akzeptieren" used to run * off-screen because the rigid 0 0 auto container sized itself to its * natural content width — three buttons side by side — before its own * internal layout ever got a chance to adapt). */ flex: 1 1 100%; min-width: 0; display: flex; flex-direction: column; gap: 0.5rem; } /* * Two-tone card: the main banner's action row (and the footer right below * it, which continues the same zone — see .webe-cc__footer) bleeds to the * card's own edges (negative margin matching --webe-cc-padding, then * re-applies that padding inside) and gets a subtly darker tint of the card * background — a separate visual "zone" from the body/logo area above, * rather than one flat slab of color. Reads as white-card-with-light-gray- * footer by default, and stays proportionate whether the admin's card * background is light or dark since it's a relative mix, not a fixed gray. * * Scoped to `.webe-cc > .webe-cc__actions` — a *direct child* of the main * banner card — rather than plain `.webe-cc__actions`, which also matches * the preferences panel's action row. The panel card has asymmetric * padding (extra padding-right reserved for the close button — see * .webe-cc__panel-card), so a *symmetric* negative margin calculated from * the same --webe-cc-padding var doesn't reach the panel's actual right * edge: confirmed live, a ~20px gap of bare white card showing on the * right where the tint should have reached. The panel's own actions stay * plain (no bleed, no tint) instead of trying to special-case that offset. * * No bottom rounding/margin here: when the footer is present (almost * always — the language switcher alone guarantees it) it continues this * same background flush underneath, so only the footer needs the bottom * corners; when the footer really is empty, .webe-cc__actions:last-child * below picks up the rounding instead. */ /* * The action row keeps the card's own background — only the footer strip at * the very bottom is tinted. The tint used to start here, which made the * buttons sit on a gray slab that read as a separate toolbar; the decision * itself belongs on the card, and the gray is reserved for the utility row * (legal links, language) below it. */ .webe-cc > .webe-cc__actions { margin: 0; padding: 1rem 0 0.5rem; } /* * Only relevant when no footer renders (admin cleared both legal URLs AND * the language switcher is somehow absent): the action row then becomes the * last element and has to close off the card itself. */ .webe-cc > .webe-cc__actions:last-child { margin: 0 calc(var(--webe-cc-padding, 1.25rem) * -1) calc(var(--webe-cc-padding, 1.25rem) * -1); padding: 1rem var(--webe-cc-padding, 1.25rem) var(--webe-cc-padding, 1.25rem); border-radius: 0 0 var(--webe-cc-card-radius, 16px) var(--webe-cc-card-radius, 16px); } /* Mobile: buttons full-width stacked, each an equally-weighted tap target * rather than differently-sized inline buttons — applies to both the main * banner's and the preferences panel's action rows. */ .webe-cc__actions .webe-cc__btn { width: 100%; text-align: center; } /* * From ~tablet width up there's room to be less linear: "Manage * preferences" (secondary, lower-frequency action) sits on its own row, * with Reject/Accept — the two decisive actions — side by side below it. * Grid with named areas (rather than relying on DOM order + flex `order`) * places each button correctly regardless of their source order, which * stays reject → manage → accept for a sensible keyboard tab sequence. * Scoped to the main banner only — see the two-tone comment above for why * the panel's own action row (a different button set) is styled * separately, just below. */ @media (min-width: 640px) { .webe-cc > .webe-cc__actions { display: grid; grid-template-columns: 1fr 1fr; grid-template-areas: "manage manage" "reject accept"; gap: 0.5rem; } .webe-cc__actions .webe-cc__btn { width: auto; } /* * Same rhythm as the banner's action row above: buttons always fill the * row they sit in — two per row at 50% each, a lone one at full width. * They used to be content-width and left-aligned (flex: 0 1 auto), which * left a ragged gap on the right of every row. * * Auto-placement handles the first two (necessary-only, select-all); * only "save" is pinned, spanning both columns on its own row, so this * keeps working if the shortcut buttons are ever reordered. */ .webe-cc__panel-card .webe-cc__actions { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; } .webe-cc__panel-card .webe-cc__actions [data-webe-action="save-preferences"] { grid-column: 1 / -1; } /* * Scoped to the banner's own action row with `>`. Unscoped, these also * matched the preferences panel: its "Select all" button deliberately * reuses data-webe-action="accept-all", so it inherited `grid-area: * accept` — a name that does not exist in the panel's grid — and got * pushed into an implicit row of its own instead of sitting beside * "Necessary only". Measured: 34% / 28% / 69% wide across three rows * rather than 50/50 + full width. */ .webe-cc > .webe-cc__actions [data-webe-action="manage"] { grid-area: manage; } .webe-cc > .webe-cc__actions [data-webe-action="reject-all"] { grid-area: reject; } .webe-cc > .webe-cc__actions [data-webe-action="accept-all"] { grid-area: accept; } } .webe-cc__btn { appearance: none; border: 1px solid transparent !important; border-radius: var(--webe-cc-radius, 999px) !important; /* !important for the same reason as the colors below: a host theme's * button rules match at the same specificity and win on source order. * Measured on a client site, every button in this plugin was silently * rendering with the theme's 8px/16px padding instead of ours. */ padding: 0.6em 1.3em !important; font: inherit; font-weight: 600; cursor: pointer; /* !important: see the note on .webe-cc above — host button resets * (incl. their :hover/:focus variants) otherwise win on tied * specificity and override the configured CI colors, including on * hover, not just at rest. */ background: transparent !important; color: inherit !important; } .webe-cc__btn--accept { background: var(--webe-cc-accent, #0a84ff) !important; color: #fff !important; } .webe-cc__btn--reject { border-color: currentColor !important; } .webe-cc__btn--accept:hover, .webe-cc__btn--accept:focus-visible { background: var(--webe-cc-accent, #0a84ff) !important; color: #fff !important; } .webe-cc__btn--reject:hover, .webe-cc__btn--reject:focus-visible, .webe-cc__btn:not(.webe-cc__btn--accept):hover, .webe-cc__btn:not(.webe-cc__btn--accept):focus-visible { background: transparent !important; color: inherit !important; border-color: currentColor !important; } .webe-cc__btn:focus-visible { outline: 2px solid var(--webe-cc-accent, #0a84ff); outline-offset: 2px; } /* * Footer: privacy-policy/imprint links (only rendered by PHP when the admin * set a URL — see WEBE_Banner_Renderer::footer_markup()) plus the * visitor-facing language switcher. Sits inside the two-tone action zone so * it reads as one continuous "utility" area under the main choice. */ .webe-cc__footer { flex: 1 1 100%; /* * One row: legal links left, language picker right. This only fits * because the picker collapsed from five buttons into a single select — * it wraps to a second line on narrow screens rather than squeezing. */ display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.35rem 1rem; /* The card's only tinted zone: a utility strip along the bottom edge. * It bleeds to the card's edges (negative margin matching the padding, * then puts that padding back inside) and rounds the card's bottom * corners, since it is normally the last element — the footer is only * absent if the admin cleared both legal URLs, and even then the * language switcher keeps it present in practice. * * margin-top adds the breathing room the action row's old bottom * padding used to provide now that the two no longer form one band. */ margin: 0.9rem calc(var(--webe-cc-padding, 1.25rem) * -1) calc(var(--webe-cc-padding, 1.25rem) * -1); padding: 0.7rem var(--webe-cc-padding, 1.25rem) calc(var(--webe-cc-padding, 1.25rem) * 0.8); background: color-mix(in srgb, var(--webe-cc-bg, #1c1c1e) 92%, black); border-top: 1px solid color-mix(in srgb, var(--webe-cc-text, #1c1c1e) 12%, transparent); border-radius: 0 0 var(--webe-cc-card-radius, 16px) var(--webe-cc-card-radius, 16px); font-size: 0.78rem; } .webe-cc__footer-links { display: flex; flex-wrap: wrap; align-items: center; gap: 0 0.75rem; } .webe-cc__footer-link { color: inherit !important; opacity: 0.8; text-decoration: underline; text-underline-offset: 2px; text-decoration-thickness: 1px; } /* Hairline divider between the legal links, so they read as one group * without needing a wide gap to separate them. */ .webe-cc__footer-link + .webe-cc__footer-link { position: relative; } .webe-cc__footer-link + .webe-cc__footer-link::before { content: ""; position: absolute; left: -0.4rem; top: 0.15em; bottom: 0.15em; width: 1px; background: currentColor; opacity: 0.3; } .webe-cc__footer-link:hover, .webe-cc__footer-link:focus-visible { opacity: 1; } /* * Language switcher: deliberately the lightest thing in the card. It's a * correction for the minority of visitors whose auto-detected locale was * wrong, not an action competing with Accept/Reject — so it's a single * small control, not a row of five. */ .webe-cc__lang-switch { position: relative; display: inline-flex; } /* * The trigger is a quiet pill until touched: it must read as a utility * control next to the legal links, not as a fourth thing to click * alongside Accept/Reject. */ .webe-cc__lang-trigger { appearance: none; /* !important on the whole box for the same reason as .webe-cc__btn: * host theme button resets match [type="button"] at our specificity * and win on source order, which previously killed `display` (and with * it `gap`) outright. */ display: inline-flex !important; align-items: center !important; gap: 0.35rem !important; width: auto !important; margin: 0 !important; padding: 0.3rem 0.5rem !important; border: 1px solid rgba(0, 0, 0, 0.14) !important; border-radius: 7px !important; background: transparent !important; color: inherit !important; font: inherit; font-size: 0.72rem; line-height: 1.4; cursor: pointer; opacity: 0.75; transition: opacity 120ms ease, background-color 120ms ease, border-color 120ms ease; } .webe-cc__lang-trigger:hover, .webe-cc__lang-trigger:focus-visible, .webe-cc__lang-trigger[aria-expanded="true"] { opacity: 1; background: rgba(0, 0, 0, 0.04) !important; border-color: rgba(0, 0, 0, 0.22) !important; } .webe-cc__lang-icon { width: 13px; height: 13px; flex: none; } .webe-cc__lang-caret { width: 11px; height: 11px; flex: none; opacity: 0.7; transition: transform 140ms ease; } .webe-cc__lang-trigger[aria-expanded="true"] .webe-cc__lang-caret { transform: rotate(180deg); } /* * Opens UPWARD. The switcher sits in the footer, i.e. on the bottom edge * of the card, so a downward list would be clipped by the card or run off * the bottom of the viewport. Right-aligned to match the trigger, which * is itself right-aligned in the footer row. */ .webe-cc__lang-list { position: absolute; bottom: calc(100% + 0.4rem); right: 0; z-index: 10; min-width: max(100%, 9.5rem); max-height: 13rem; overflow-y: auto; margin: 0 !important; padding: 0.3rem !important; list-style: none !important; background: #fbfbfc !important; border: 1px solid rgba(0, 0, 0, 0.08) !important; border-radius: 10px !important; box-shadow: 0 10px 28px rgba(0, 0, 0, 0.16) !important; text-align: left; } .webe-cc__lang-list[hidden] { display: none; } .webe-cc__lang-option { display: flex; align-items: center; justify-content: space-between; gap: 1.25rem; margin: 0 !important; padding: 0.42rem 0.6rem !important; border-radius: 6px; list-style: none !important; color: #1c1c1e; font-size: 0.78rem; line-height: 1.4; cursor: pointer; /* No outline on the option itself: focus moves with .is-active, which * is what the trigger's aria-activedescendant points at. */ outline: none; } .webe-cc__lang-option::before, .webe-cc__lang-option::marker { content: none; } .webe-cc__lang-option:hover, .webe-cc__lang-option.is-active { background: rgba(0, 0, 0, 0.055); } .webe-cc__lang-check { width: 13px; height: 13px; flex: none; color: var(--webe-cc-accent, #0a84ff); /* Reserved, not removed: hiding it with display:none would let the * label shift sideways as the selection moves between rows. */ visibility: hidden; } .webe-cc__lang-option[aria-selected="true"] .webe-cc__lang-check { visibility: visible; } /* * Plain-language cookie explainer in the preferences panel: a disclosure * above the decisive buttons, collapsed by default so it informs the * visitors who want it without pushing the actual choice below the fold * for everyone else. */ /* * Shares the button shape with .webe-cc__btn — same radius, same padding box, * same full-width footprint — so it reads as a control rather than as a stray * link between the category rows. It stays outline-only (never filled): it is * not a consent action and must not compete with Save/Necessary-only. */ .webe-cc__info-toggle { appearance: none; /* * !important on the layout here, not just the colors: this is a *