/** * Cookie consent dialog. * * Lives in the plugin, not in the theme: the dialog has to keep working after a * redesign, and it must not depend on a single class from the theme stylesheet. * Every value is a design token from theme.json — no literal colours — so a * change to the palette reaches the dialog too. The panel paints its own opaque * dark surface and its own text colour rather than inheriting them, which is why * it stays readable over a light section and over a dark one alike. * * Visibility is driven from the outside: the inline head script marks * with `astrum-consent-pending` before the first paint, so the dialog is there * from the start instead of jumping in after a timeout. A visitor without * JavaScript gets neither class and therefore never sees a dialog whose buttons * could not work. */ .astrum-consent { display: none; } html.astrum-consent-pending .astrum-consent, .astrum-consent.is-open { position: fixed; z-index: 1000; display: flex; align-items: flex-end; justify-content: center; padding: var(--wp--preset--spacing--30); inset: 0; } /* * The backdrop dims the page and swallows clicks on it, which is what * `aria-modal="true"` promises the assistive technology. Clicking it is the * pointer counterpart of Escape: it closes and stores nothing. */ .astrum-consent__backdrop { position: absolute; background-color: var(--wp--preset--color--ink); opacity: 0.7; inset: 0; } .astrum-consent__panel { position: relative; display: flex; overflow-y: auto; box-sizing: border-box; max-width: 52rem; max-height: calc(100vh - 2 * var(--wp--preset--spacing--30)); flex-direction: column; padding: var(--wp--preset--spacing--40); border: 1px solid var(--wp--custom--color--border-inv); border-radius: var(--wp--custom--corner--xl); background-color: var(--wp--preset--color--carbon); color: var(--wp--custom--color--text-inverse); font-family: var(--wp--preset--font-family--body); font-size: var(--wp--preset--font-size--small); gap: var(--wp--preset--spacing--20); line-height: var(--wp--custom--leading--normal); width: 100%; } /* * The panel takes the focus when the dialog opens, so a screen reader announces * the title instead of dropping the user on the first button. That focus is not * keyboard navigation, so it gets no ring; the controls inside keep theirs. * * Three classes on purpose: the theme's global ring is `[tabindex]:focus-visible` * (0,2,0) and the panel carries `tabindex="-1"`, so a two-class selector would * only tie with it and let stylesheet order decide. The box-shadow has to be * cleared too — the ring is an outline *and* a shadow. */ .astrum-consent .astrum-consent__panel:focus, .astrum-consent .astrum-consent__panel:focus-visible { outline: none; box-shadow: none; } .astrum-consent__title { margin: 0; color: var(--wp--custom--color--text-inverse); font-family: var(--wp--preset--font-family--display); font-size: var(--wp--preset--font-size--x-large); font-weight: 700; line-height: var(--wp--custom--leading--snug); } .astrum-consent__text { margin: 0; color: var(--wp--custom--color--text-inverse); } .astrum-consent__link { color: var(--wp--preset--color--chartreuse); text-decoration: underline; text-underline-offset: 0.2em; } .astrum-consent__link:hover, .astrum-consent__link:focus-visible { text-decoration-thickness: 2px; } /* * Styled as a link but it is a button, and it was a 19px-tall target — for the * audience this dialog is built for that is the difference between hitting it * and hitting the paragraph above it. 44x44 (kit bar; WCAG 2.2 SC 2.5.8 asks * for 24). The negative inline margin cancels the new padding so the text still * lines up with the paragraph above it instead of stepping right. */ .astrum-consent__toggle { display: inline-flex; align-items: center; align-self: flex-start; box-sizing: border-box; min-height: 44px; padding: 0.5rem 0.75rem; border: 0; margin-inline-start: -0.75rem; background: none; color: var(--wp--custom--color--ash); cursor: pointer; font: inherit; text-decoration: underline; text-underline-offset: 0.2em; } .astrum-consent__toggle:hover { color: var(--wp--custom--color--text-inverse); } .astrum-consent__options[hidden] { display: none; } .astrum-consent__fieldset { display: flex; margin: 0; padding: var(--wp--preset--spacing--20); border: 1px solid var(--wp--custom--color--border-inv); border-radius: var(--wp--custom--corner--lg); flex-direction: column; gap: var(--wp--preset--spacing--20); } /* Own visually-hidden helper — the plugin cannot rely on the theme's. */ .astrum-consent__legend { position: absolute; overflow: hidden; width: 1px; height: 1px; padding: 0; border: 0; margin: -1px; clip-path: inset(50%); white-space: nowrap; } /* * The checkbox itself is 1.15rem and cannot grow much without looking like a * button, so the *row* is the target instead: the label is stretched over the * whole option — its own text, the badge and the description underneath — by a * transparent overlay, which is what makes a tap anywhere in the row toggle the * box. `position: relative` here is what the overlay is measured against, so * `.astrum-consent__option-body` must stay unpositioned. * * The trade-off is that the description text can no longer be selected with the * mouse. For a three-line explanation next to its own switch that is the better * half of the deal. */ .astrum-consent__option { position: relative; display: flex; align-items: center; box-sizing: border-box; min-height: 44px; padding-block: 0.35rem; gap: var(--wp--preset--spacing--20); } /* 24px is the floor WCAG 2.2 sets for a pointer target, and the row around it is already 44px. At 1.15rem the box itself measured 18.4px, which the criterion tolerates only because the rows sit far enough apart — a spacing exemption is a thin thing to rest on when the audience aims with limited precision. */ .astrum-consent__checkbox { width: 24px; height: 24px; flex: 0 0 auto; margin: 0; accent-color: var(--wp--preset--color--chartreuse); } /* * Same two-tone ring the theme uses globally (see _shared.css §2.1), repeated * here because the plugin must not depend on the theme's stylesheet being * present. Chartreuse carries the contrast on this dark panel (14.79:1 on * carbon), the ink core carries it if the dialog is ever restyled light. */ .astrum-consent__checkbox:focus-visible { outline: 3px solid var(--wp--preset--color--ink); outline-offset: 2px; box-shadow: 0 0 0 6px var(--wp--preset--color--chartreuse); } .astrum-consent__option-label { display: block; color: var(--wp--custom--color--text-inverse); cursor: pointer; font-weight: 700; } .astrum-consent__option-label::after { position: absolute; content: ""; inset: 0; } .astrum-consent__badge { margin-inline-start: 0.5em; color: var(--wp--custom--color--ash); font-size: var(--wp--preset--font-size--x-small); font-weight: 400; letter-spacing: var(--wp--custom--tracking--wide); text-transform: uppercase; } .astrum-consent__option-desc { margin: 0.25rem 0 0; color: var(--wp--custom--color--ash); font-size: var(--wp--preset--font-size--x-small); } .astrum-consent__actions { display: flex; flex-wrap: wrap; gap: var(--wp--preset--spacing--20); } /* * Accept and reject are literally the same rule. EDPB 03/2022 and the ÚOOÚ * guidance both read a highlighted "accept" next to a muted "reject" as consent * that was not freely given, so there is deliberately no modifier class that * could make one of them louder than the other. */ .astrum-consent__button { min-width: 12rem; flex: 1 1 12rem; padding: 0.75rem 1.25rem; /* Steel, not the subtle inverse border: WCAG 1.4.11 wants 3:1 between the outline of a control and its surroundings (measured 3.6:1 here). */ border: 1px solid var(--wp--preset--color--steel); border-radius: var(--wp--custom--corner--md); background-color: var(--wp--custom--color--carbon-raised); color: var(--wp--custom--color--text-inverse); cursor: pointer; font-family: inherit; font-size: var(--wp--preset--font-size--medium); font-weight: 700; transition: background-color var(--wp--custom--duration--base) var(--wp--custom--easing--standard), border-color var(--wp--custom--duration--base) var(--wp--custom--easing--standard); } .astrum-consent__button[hidden] { display: none; } .astrum-consent__button:hover { border-color: var(--wp--preset--color--silver); background-color: var(--wp--preset--color--iron); } .astrum-consent__button:focus-visible { outline: 3px solid var(--wp--preset--color--ink); outline-offset: 2px; box-shadow: 0 0 0 6px var(--wp--preset--color--chartreuse); } .astrum-consent__note { margin: 0; color: var(--wp--custom--color--ash); font-size: var(--wp--preset--font-size--x-small); } @media (min-width: 600px) { .astrum-consent__button { flex: 0 1 auto; } } @media (prefers-reduced-motion: reduce) { .astrum-consent__button { transition: none; } }