/* * This card is injected into arbitrary WordPress themes/page builders that * ship their own global typography rules (heading colors, link colors, * label colors tuned for THEIR page, not ours). Class selectors here already * out-specificity a bare element selector like the host's `h2 { color: ... }`, * but many themes/Elementor kits target `h1,h2,h3,h4,h5,h6` or similar * multi-class utility selectors whose specificity can tie or beat ours, and * ties go to whichever stylesheet happens to print later in — not * reliably us. `!important` is used deliberately (only for legibility- * critical color/background declarations, not the whole ruleset) so this * widget never renders with invisible or unreadably low-contrast text * regardless of what the host site's CSS does. */ .ac-consent { box-sizing: border-box; position: relative; inline-size: min(100% - 2rem, 72rem); margin: 1rem auto; padding: 2rem; padding-inline-end: 3.25rem; border: 0; border-radius: var(--ac-border-radius, .75rem); background: var(--ac-background-color, Canvas) !important; color: var(--ac-text-color, CanvasText) !important; font: inherit; font-size: var(--ac-body-font-size, 1rem) !important; } .ac-consent h2, .ac-consent h3 { /* Mixed toward the configured TEXT color rather than a hardcoded white, so this stays legible no matter what background color is configured — mixing toward white assumed a light background and produced near- invisible pastel text on this site's white modal. */ color: color-mix(in srgb, var(--ac-accent-color, #4c6fe0) 45%, var(--ac-text-color, CanvasText)) !important; /* Some themes apply condensed/expanded heading styles (negative word-spacing, tight letter-spacing) globally — this is what was collapsing "Privacy preferences" down to "Privacypreferences". */ word-spacing: normal !important; letter-spacing: normal !important; text-transform: none !important; } .ac-consent h2 { margin-block: 0 1.25rem !important; font-size: var(--ac-heading-font-size, 1.75rem) !important; font-weight: 800 !important; line-height: 1.2 !important; } .ac-consent h3 { margin-block: 0 .75rem !important; /* Subheadings scale with the title control, at the same ratio the fixed values (1.15rem / 1.75rem) held before this setting existed. */ font-size: calc(var(--ac-heading-font-size, 1.75rem) * 0.657) !important; font-weight: 700 !important; line-height: 1.3 !important; } .ac-consent__policy-links a { color: var(--ac-accent-color, #4c6fe0) !important; text-decoration: underline; } /* Intro block: heading, logo, site name, message. Kept as a tight, ordered column so the initial prompt reads like a normal cookie bar instead of a wall of text (per user request: "logo smaller and copy more organized"). */ .ac-consent__intro { display: flex; flex-direction: column; gap: .5rem; margin-block-end: 1.25rem; } .ac-consent__intro p { margin: 0; line-height: 1.5; } .ac-consent__logo { /* Aligns only the logo (not the surrounding copy); the admin-configured --ac-logo-max-height custom property comes from appearanceStyle(). */ align-self: flex-start; } .ac-consent__logo img { display: block; max-inline-size: 8rem; max-block-size: var(--ac-logo-max-height, 2.25rem); object-fit: contain; } .ac-consent__site-name { font-size: .9rem; font-weight: 600; opacity: .75; } /* * Logo alignment and copy (text) alignment are deliberately independent * controls (see WordPressConfigurationRenderer::appearance()) — an admin can * center the logo while keeping the description left-aligned, or vice versa. * Left is the default and needs no override since flex-start/left already * matches the base .ac-consent__intro layout above. */ .ac-consent[data-logo-align="center"] .ac-consent__logo { align-self: center; } .ac-consent[data-logo-align="right"] .ac-consent__logo { align-self: flex-end; } .ac-consent[data-text-align="center"] .ac-consent__intro { text-align: center; } .ac-consent[data-text-align="right"] .ac-consent__intro { text-align: right; } .ac-consent__focus-sentinel { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; margin: -1px; padding: 0; border: 0; clip-path: inset(50%); white-space: nowrap; } /* * Presentation positioning. Previously .ac-consent had no `position` at all in * any mode, so the banner/modal rendered inline in the page's normal document * flow (wherever the theme happened to print wp_footer) instead of overlaying * the page like a real cookie-consent widget. Every mode below floats above * page content with a very high z-index, matching how Cookiebot-style widgets * behave. */ .ac-consent--modal { position: fixed; inset-block-start: 50%; inset-inline-start: 50%; transform: translate(-50%, -50%); z-index: 2147483000; max-block-size: calc(100vh - 2rem); overflow: auto; /* iOS Safari has a long-documented bug where the first tap inside a scrollable (overflow:auto/scroll) container gets consumed by the scroll-gesture recognizer instead of reaching the element underneath — this is what made the category toggles unresponsive on iPhone even though the same markup/CSS works fine on desktop Safari and Chrome. -webkit-overflow-scrolling:touch switches iOS to its momentum-scroll model, which passes taps through normally. Harmless no-op elsewhere. */ -webkit-overflow-scrolling: touch; box-shadow: 0 10px 40px rgba(0, 0, 0, .35); } .ac-consent--position-top, .ac-consent--position-bottom { position: fixed; inset-inline: 0; z-index: 2147483000; margin: 0; inline-size: 100%; max-block-size: calc(100vh - 2rem); overflow: auto; -webkit-overflow-scrolling: touch; box-shadow: 0 2px 20px rgba(0, 0, 0, .3); } .ac-consent--position-top { inset-block-start: 0; } .ac-consent--position-bottom { inset-block-end: 0; } /* * True compact bar treatment (matches Xperi/Taco Bell references): instead of * a full-width block that stacks heading, message and buttons vertically * (and can end up tall enough to cover most of the viewport), lay the intro * text and the action buttons out side by side in a single slim row. The * form is unwrapped with display:contents so its .ac-consent__actions child * becomes a direct flex item next to .ac-consent__intro, with no markup * changes required — the (normally hidden) preferences panel and services * section stay display:none via [hidden] regardless. */ .ac-consent--position-top, .ac-consent--position-bottom { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem 1.5rem; padding-block: 1.25rem; } .ac-consent--position-top .ac-consent__intro, .ac-consent--position-bottom .ac-consent__intro { flex: 1 1 24rem; margin-block-end: 0; gap: .25rem; } .ac-consent--position-top .ac-consent__intro h2, .ac-consent--position-bottom .ac-consent__intro h2 { display: inline; margin-inline-end: .5rem; /* !important: without it this loses to the base ".ac-consent h2" rule's own !important font-size, which would let the admin-configured heading size (now that it's a setting) balloon the compact bar back out. The compact bar's title stays fixed regardless of that setting on purpose. */ font-size: 1rem !important; } .ac-consent--position-top .ac-consent__intro p, .ac-consent--position-bottom .ac-consent__intro p { display: inline; font-size: .9rem !important; } .ac-consent--position-top .ac-consent__form, .ac-consent--position-bottom .ac-consent__form { display: contents; } .ac-consent--position-top .ac-consent__actions, .ac-consent--position-bottom .ac-consent__actions { flex: none; margin-block-start: 0; } /* Defensive cap: an admin-selected "Large" logo is fine in the modal/default card, but would blow out the single-row compact bar's height, so never let it exceed 2rem here regardless of the configured --ac-logo-max-height. */ .ac-consent--position-top .ac-consent__logo img, .ac-consent--position-bottom .ac-consent__logo img { max-block-size: min(var(--ac-logo-max-height, 2.25rem), 2rem); } @media (max-width: 48rem) { .ac-consent--position-top, .ac-consent--position-bottom { flex-direction: column; align-items: stretch; } } /* Defense in depth: if both a position and modal class ever end up on the same element (see VisitorTemplateRenderer::render()), modal must win — two classes outweighs the one-class position rules above regardless of source order. */ .ac-consent--modal.ac-consent--position-top, .ac-consent--modal.ac-consent--position-bottom { inset-block-start: 50%; inset-block-end: auto; inset-inline-start: 50%; inset-inline-end: auto; inline-size: min(100% - 2rem, 72rem); transform: translate(-50%, -50%); } .ac-consent[aria-hidden="true"] { display: none; } /* * Persistent "reopen preferences" bubble. VisitorTemplateRenderer now always * renders this fragment immediately after the card (not only once the server * itself considers things closed), because Close (X) is handled entirely * client-side — it just sets aria-hidden on the card and never tells the * server anything. Visible by default (covers the "server already rendered * launcher-only, no card present at all" case); hidden for as long as an * open (not aria-hidden) card immediately precedes it in the DOM. */ .ac-consent__launcher { display: block; position: fixed; inset-block-end: 1rem; inset-inline-start: 1rem; margin: 0; z-index: 2147483000; } .ac-consent:not([aria-hidden="true"]) + .ac-consent__launcher { display: none; } .ac-consent__launcher-link { position: relative; display: inline-block; inline-size: 3rem; block-size: 3rem; border-radius: 50%; background: var(--ac-launcher-color, CanvasText); color: Canvas; text-decoration: none; overflow: hidden; text-indent: -9999px; white-space: nowrap; box-shadow: 0 2px 10px rgba(0, 0, 0, .3); } .ac-consent__launcher-link::before { content: ''; position: absolute; inset-block-start: 50%; inset-inline-start: 50%; inline-size: 1.5rem; block-size: 1.5rem; transform: translate(-50%, -50%); background-color: currentColor; } /* Cookie is the default glyph (also the safe fallback used by launcherFragment() when an unrecognized icon token ever slips through). */ .ac-consent__launcher-link--cookie::before { -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a10 10 0 1 0 9.54 13.06 1 1 0 0 0-1.1-1.32 4 4 0 0 1-4.5-5.28 1 1 0 0 0-.6-1.32A4 4 0 0 1 12 2Zm-3 6a1.25 1.25 0 1 1 0 2.5A1.25 1.25 0 0 1 9 8Zm7 1a1 1 0 1 1 0 2 1 1 0 0 1 0-2ZM8 13a1 1 0 1 1 0 2 1 1 0 0 1 0-2Zm5 3a1.25 1.25 0 1 1 0 2.5 1.25 1.25 0 0 1 0-2.5Z'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a10 10 0 1 0 9.54 13.06 1 1 0 0 0-1.1-1.32 4 4 0 0 1-4.5-5.28 1 1 0 0 0-.6-1.32A4 4 0 0 1 12 2Zm-3 6a1.25 1.25 0 1 1 0 2.5A1.25 1.25 0 0 1 9 8Zm7 1a1 1 0 1 1 0 2 1 1 0 0 1 0-2ZM8 13a1 1 0 1 1 0 2 1 1 0 0 1 0-2Zm5 3a1.25 1.25 0 1 1 0 2.5 1.25 1.25 0 0 1 0-2.5Z'/%3E%3C/svg%3E") center / contain no-repeat; } .ac-consent__launcher-link--shield::before { -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 1 3 5v6c0 5.55 3.84 10.74 9 12 5.16-1.26 9-6.45 9-12V5l-9-4z'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 1 3 5v6c0 5.55 3.84 10.74 9 12 5.16-1.26 9-6.45 9-12V5l-9-4z'/%3E%3C/svg%3E") center / contain no-repeat; } .ac-consent__launcher-link--gear::before { -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='3.2'/%3E%3Cpath d='M12 2v3M12 19v3M22 12h-3M5 12H2M19.07 4.93l-2.12 2.12M7.05 16.95l-2.12 2.12M19.07 19.07l-2.12-2.12M7.05 7.05 4.93 4.93' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='3.2'/%3E%3Cpath d='M12 2v3M12 19v3M22 12h-3M5 12H2M19.07 4.93l-2.12 2.12M7.05 16.95l-2.12 2.12M19.07 19.07l-2.12-2.12M7.05 7.05 4.93 4.93' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat; } .ac-consent__launcher-link:focus-visible { outline: 3px solid CanvasText; outline-offset: 3px; } .ac-consent__actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .75rem; margin-block-start: 1.75rem; } .ac-consent__button { appearance: none; border: var(--ac-button-border, none) !important; border-radius: 999px !important; padding: .75rem 1.75rem !important; font: inherit; font-weight: 700 !important; font-size: 1rem !important; cursor: pointer; /* Themes commonly style bare button[type="submit"] with their own brand color (this is exactly how the panel's inline Save button ended up pink instead of the configured purple accent) — pinned the same way as the heading/label fixes above. */ background: var(--ac-button-fill, var(--ac-accent-color, #4c6fe0)) !important; color: var(--ac-button-text-color, Canvas) !important; } .ac-consent__button--reject_all, .ac-consent__button--customize { background: transparent !important; color: var(--ac-text-color, CanvasText) !important; border: 1px solid color-mix(in srgb, var(--ac-text-color, CanvasText) 25%, transparent) !important; } /* The corner X. Close remains the exact same form submit control; only its visual presentation changes (see actions() in VisitorTemplateRenderer). */ .ac-consent__close { position: absolute; inset-block-start: 1.25rem; inset-inline-end: 1.25rem; inline-size: 2rem; block-size: 2rem; padding: 0; border: 0 !important; border-radius: 50% !important; /* Same button[type="submit"] theme-bleed as .ac-consent__button — this X is also rendered as a real