/* Complianz cookie banner — Edutours brand overrides (#12)
*
* Ported 1:1 in structure from euta-theme/assets/css/complianz.css with every
* EUTA token swapped for the Edutours equivalent (Poppins/Vollkorn → Cera
* Stencil display + Maitree body, coral → orange #FF6124, black → navy
* #1C3144, neutral greys → cream/border tokens, 15px radii → theme.json
* radius scale). No new components — same rule set, Edutours values.
*
* Uses #cmplz-cookiebanner-container (id selector) + !important on properties
* that Complianz's wizard-generated CSS (uploads/complianz/css/banner-1-*.css)
* sets with `!important` itself (link colour, text-decoration on
* anchor-as-button, button colours from the admin colour picker).
*/
/* --------------------------------------------------------------------------
* Accessible accent for the consent UI (#12, 2026-08-22 — Vik approved)
*
* The sitewide primary orange (--wp--preset--color--accent, #FF6124) carries a
* white 14px label at **3.01 : 1** — below the WCAG 2.1 AA minimum of 4.5 : 1
* for normal text (measured on staging from Chromium computed styles, not
* estimated; the hover tint #F96D3B was worse still at 2.89 : 1). On an
* ordinary CTA that is a design debt; on the consent banner it is also a legal
* one, because ÚOOÚ / EDPB guidance expects the accept and the reject choice to
* be equally readable and equally weighted.
*
* So the banner — and ONLY the banner — paints its accent one step deeper on
* the Edutours orange ramp. Both values are existing design-system steps, not
* invented colours (design/homepage-directions/_ds/.../colors_and_type.css):
*
* --color-orange-500 #FF6124 white 3.01 : 1 near-black 5.42 : 1
* accent-warm #F96D3B white 2.89 : 1 near-black 5.65 : 1
* --color-orange-700 #B73C0E white 5.73 : 1
* midpoint 600/700 #CE4511 white 4.68 : 1
*
* TWO tokens, not one — Vik chose the lighter route 2026-08-22: the FILLED
* buttons keep the literal brand orange and darken their LABEL instead, while
* everything else orange in this banner still needs the deep step. Those other
* uses are not a style preference:
* - orange as TEXT on white (legal-link hover, .cmplz-manage) is 3.01 : 1 at
* 14px whatever the buttons do;
* - the toggle ON track is a non-text state indicator under WCAG 1.4.11, and
* #FF6124 is 2.79 : 1 against the cream category card.
* Collapsing these back into one token reintroduces two separate failures.
*
* Scoped to the two consent containers on purpose: theme.json, main.css and the
* sitewide .wp-element-button treatment are owned elsewhere and are NOT touched
* by this file. If the palette itself should move, that is a theme decision.
* -------------------------------------------------------------------------- */
#cmplz-cookiebanner-container,
#cmplz-manage-consent {
/* Filled buttons: literal brand orange, dark label (Vik 2026-08-22). */
--edt-cmplz-btn: #FF6124;
--edt-cmplz-btn-hover: #F96D3B;
--edt-cmplz-btn-label: #231F20;
/* Orange as text, and the toggle track: must stay the deep step. */
--edt-cmplz-accent: #B73C0E;
--edt-cmplz-accent-hover: #CE4511;
}
/* Banner shell + typography */
#cmplz-cookiebanner-container .cmplz-cookiebanner {
background: var(--wp--preset--color--base, #FFFFFF) !important;
box-shadow: var(--wp--custom--shadow--lg, 0 18px 42px rgba(28, 49, 68, 0.14)) !important;
border-radius: var(--wp--custom--radius--lg, 14px) !important;
font-family: var(--wp--preset--font-family--body, "Maitree", Georgia, serif) !important;
font-size: var(--wp--preset--font-size--small, 0.875rem) !important;
color: var(--wp--preset--color--contrast, #1C3144) !important;
border: none !important;
}
/* Universal sizing safety: every .cmplz-btn (button OR anchor) honours
* border-box so padding + border don't push the element past the
* 100% width Complianz applies on the buttons row. Without this the
* rendered with content-box
* and overflowed the modal. */
#cmplz-cookiebanner-container .cmplz-btn,
#cmplz-cookiebanner-container a.cmplz-btn {
box-sizing: border-box !important;
max-width: 100% !important;
}
/* Buttons row: Complianz lays it out as a flex row with the default
* align-items:stretch, so at 1440 each button inherited the tall message
* row's height and rendered 250x113. Centring returns them to their own
* 45px pill height (matches the hero CTA). */
#cmplz-cookiebanner-container .cmplz-buttons {
align-items: center !important;
}
#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-title {
font-family: var(--wp--preset--font-family--display, "Cera Stencil Pro", "Josefin Sans", sans-serif) !important;
font-weight: 500 !important;
/* Deliberately NOT tracking--tight: Cera Stencil's apertures close up at
* negative tracking, and Complianz renders the title at 15px. 16px +
* positive tracking keeps the stencil cuts legible at 1x. */
font-size: 1rem !important;
letter-spacing: 0.02em !important;
text-transform: uppercase !important;
color: var(--wp--preset--color--contrast, #1C3144) !important;
}
#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-message {
font-family: var(--wp--preset--font-family--body, "Maitree", Georgia, serif) !important;
font-size: var(--wp--preset--font-size--small, 0.875rem) !important;
line-height: var(--wp--custom--line-height--base, 1.55) !important;
color: var(--wp--preset--color--contrast, #1C3144) !important;
}
/* Primary CTA — deep-orange filled pill. Same chrome as .wp-element-button
* (pill radius, 2px border, 10/24 padding, 14px 600 Maitree); the fill stays the
* literal brand orange and the LABEL goes near-black, which clears AA at
* 5.42 : 1 without moving the brand colour. */
#cmplz-cookiebanner-container .cmplz-btn.cmplz-accept,
#cmplz-cookiebanner-container .cmplz-btn.cmplz-save-preferences {
background: var(--edt-cmplz-btn, #FF6124) !important;
color: var(--edt-cmplz-btn-label, #231F20) !important;
border: 2px solid var(--edt-cmplz-btn, #FF6124) !important;
border-radius: var(--wp--custom--radius--pill, 999px) !important;
font-family: var(--wp--preset--font-family--body, "Maitree", Georgia, serif) !important;
font-weight: 600 !important;
font-size: var(--wp--preset--font-size--small, 0.875rem) !important;
padding: 10px 24px !important;
text-decoration: none !important;
transition:
background var(--wp--custom--motion--dur-base, 240ms) var(--wp--custom--motion--ease-out, ease),
border-color var(--wp--custom--motion--dur-base, 240ms) var(--wp--custom--motion--ease-out, ease) !important;
}
#cmplz-cookiebanner-container .cmplz-btn.cmplz-accept:hover,
#cmplz-cookiebanner-container .cmplz-btn.cmplz-accept:focus-visible,
#cmplz-cookiebanner-container .cmplz-btn.cmplz-save-preferences:hover,
#cmplz-cookiebanner-container .cmplz-btn.cmplz-save-preferences:focus-visible {
/* Warms up to the usual accent-warm, exactly like every other Edutours
* button. With the near-black label that is 5.65 : 1 — BETTER than rest,
* where the old white-label version got worse on hover (2.89 : 1). */
background: var(--edt-cmplz-btn-hover, #F96D3B) !important;
border-color: var(--edt-cmplz-btn-hover, #F96D3B) !important;
color: var(--edt-cmplz-btn-label, #231F20) !important;
}
/* Tertiary — orange text underline (rarely shown but Complianz still emits it) */
#cmplz-cookiebanner-container .cmplz-btn.cmplz-manage {
background: transparent !important;
/* Same reason as the accept pill: #FF6124 on white is 3.01 : 1 as text.
* The deep step reads 5.73 : 1. */
color: var(--edt-cmplz-accent, #B73C0E) !important;
border: none !important;
font-family: var(--wp--preset--font-family--body, "Maitree", Georgia, serif) !important;
font-weight: 600 !important;
font-size: 0.8125rem !important;
text-decoration: underline !important;
padding: 8px 16px !important;
}
#cmplz-cookiebanner-container .cmplz-btn.cmplz-manage:hover,
#cmplz-cookiebanner-container .cmplz-btn.cmplz-manage:focus-visible {
color: var(--edt-cmplz-accent-hover, #CE4511) !important;
}
/* Deny — navy FILLED pill (the design system's "dark" button variant).
*
* It used to be a navy outline. Outline-vs-filled is exactly the asymmetry
* ÚOOÚ / EDPB guidance calls out: identical geometry is not enough if one
* option is a solid block of colour and the other is a hollow ring, because the
* filled one is what the eye lands on. „Odmítnout vše“ is now a solid pill of
* the same 250x45 / 728x45 / 338x45 box, same 999px radius, same 2px border,
* same 10/24 padding and the same 14px/600 Maitree label as „Přijmout vše“ —
* same treatment class, different brand colour, neither the lesser option.
* (White on navy #1C3144 = 13.36 : 1.)
*
* „Nastavení“ stays an outline pill: it is not a refusal, it is the route to
* the second layer, so it is legitimately the tertiary of the three. */
#cmplz-cookiebanner-container .cmplz-btn.cmplz-deny {
background: var(--wp--preset--color--contrast, #1C3144) !important;
color: var(--wp--preset--color--base, #FFFFFF) !important;
border: 2px solid var(--wp--preset--color--contrast, #1C3144) !important;
border-radius: var(--wp--custom--radius--pill, 999px) !important;
font-family: var(--wp--preset--font-family--body, "Maitree", Georgia, serif) !important;
font-weight: 600 !important;
font-size: var(--wp--preset--font-size--small, 0.875rem) !important;
padding: 10px 24px !important;
text-decoration: none !important;
transition:
background var(--wp--custom--motion--dur-base, 240ms) var(--wp--custom--motion--ease-out, ease),
color var(--wp--custom--motion--dur-base, 240ms) var(--wp--custom--motion--ease-out, ease) !important;
}
#cmplz-cookiebanner-container .cmplz-btn.cmplz-deny:hover,
#cmplz-cookiebanner-container .cmplz-btn.cmplz-deny:focus-visible {
background: var(--wp--preset--color--contrast-dark, #122131) !important;
border-color: var(--wp--preset--color--contrast-dark, #122131) !important;
color: var(--wp--preset--color--base, #FFFFFF) !important;
}
/* Keyboard focus ring. Measured before this change: the three banner buttons
* fell back to Chrome's UA ring (`outline: 1px auto rgb(0, 95, 204)`) — the
* only off-brand colour left in the banner, 1px thin, and low-contrast against
* the navy deny pill. This is the focus treatment the design handoff specifies
* (2px navy, offset 2px); the offset puts the ring on the white banner surface,
* where navy reads 13.36 : 1, so it stays visible on every one of the three
* button fills. */
#cmplz-cookiebanner-container .cmplz-btn:focus-visible,
#cmplz-cookiebanner-container a.cmplz-btn:focus-visible {
outline: 2px solid var(--wp--preset--color--contrast, #1C3144) !important;
outline-offset: 2px !important;
}
/* Category toggle pill (Complianz uses cmplz-toggle for the on/off switch) */
#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-categories .cmplz-category .cmplz-toggle {
background: var(--wp--custom--border--strong, rgba(28, 49, 68, 0.22)) !important;
}
#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-categories .cmplz-category .cmplz-toggle.cmplz-active {
background: var(--edt-cmplz-accent, #B73C0E) !important;
}
/* "Vždy aktivní" marker on the functional category — Complianz ships it in a
* bright green that belongs to no palette here. */
#cmplz-cookiebanner-container .cmplz-always-active {
color: var(--wp--preset--color--contrast, #1C3144) !important;
}
#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-categories .cmplz-category label {
font-family: var(--wp--preset--font-family--body, "Maitree", Georgia, serif) !important;
font-weight: 600 !important;
font-size: var(--wp--preset--font-size--small, 0.875rem) !important;
color: var(--wp--preset--color--contrast, #1C3144) !important;
}
/* Secondary "Manage options" button — anchor or button form, both rendered
* as navy-outlined pill matching the Deny button (2px border, 24px padding)
* so the three CTAs share the same visual frame. */
#cmplz-cookiebanner-container .cmplz-btn.cmplz-view-preferences,
#cmplz-cookiebanner-container a.cmplz-btn.cmplz-manage-options,
#cmplz-cookiebanner-container button.cmplz-btn.cmplz-manage-options {
background-color: transparent !important;
color: var(--wp--preset--color--contrast, #1C3144) !important;
border: 2px solid var(--wp--preset--color--contrast, #1C3144) !important;
border-radius: var(--wp--custom--radius--pill, 999px) !important;
font-family: var(--wp--preset--font-family--body, "Maitree", Georgia, serif) !important;
font-weight: 600 !important;
font-size: var(--wp--preset--font-size--small, 0.875rem) !important;
padding: 10px 24px !important;
text-decoration: none !important;
transition:
background-color var(--wp--custom--motion--dur-fast, 150ms) var(--wp--custom--motion--ease-out, ease),
color var(--wp--custom--motion--dur-fast, 150ms) var(--wp--custom--motion--ease-out, ease) !important;
}
#cmplz-cookiebanner-container .cmplz-btn.cmplz-view-preferences:hover,
#cmplz-cookiebanner-container .cmplz-btn.cmplz-view-preferences:focus-visible,
#cmplz-cookiebanner-container a.cmplz-btn.cmplz-manage-options:hover,
#cmplz-cookiebanner-container a.cmplz-btn.cmplz-manage-options:focus-visible,
#cmplz-cookiebanner-container button.cmplz-btn.cmplz-manage-options:hover,
#cmplz-cookiebanner-container button.cmplz-btn.cmplz-manage-options:focus-visible {
background-color: var(--wp--preset--color--contrast, #1C3144) !important;
color: var(--wp--preset--color--base, #FFFFFF) !important;
text-decoration: none !important;
}
#cmplz-cookiebanner-container .cmplz-category {
border-radius: var(--wp--custom--radius--lg, 14px);
padding: 14px 16px;
margin-bottom: 8px;
background-color: var(--wp--preset--color--cream, #FAF6F1);
}
#cmplz-cookiebanner-container .cmplz-category[open] {
background-color: var(--wp--preset--color--base, #FFFFFF);
box-shadow: var(--wp--custom--shadow--sm, 0 1px 2px rgba(28, 49, 68, 0.08));
}
#cmplz-cookiebanner-container .cmplz-category summary {
list-style: none;
cursor: pointer;
outline: none;
}
#cmplz-cookiebanner-container .cmplz-category summary::-webkit-details-marker {
display: none;
}
#cmplz-cookiebanner-container .cmplz-category-header .cmplz-category-title {
font-family: var(--wp--preset--font-family--body, "Maitree", Georgia, serif);
font-weight: 600;
color: var(--wp--preset--color--contrast, #1C3144);
}
#cmplz-cookiebanner-container .cmplz-close {
border-radius: var(--wp--custom--radius--md, 8px);
transition: background-color var(--wp--custom--motion--dur-fast, 150ms) var(--wp--custom--motion--ease-out, ease);
}
#cmplz-cookiebanner-container .cmplz-close:hover,
#cmplz-cookiebanner-container .cmplz-close:focus-visible {
background-color: var(--wp--preset--color--cream, #FAF6F1);
outline: none;
}
/* The category switches are native checkboxes, so Chrome paints its default
* blue focus ring around the orange pill — the only off-brand colour in the
* banner. Navy ring, offset clear of the pill. */
#cmplz-cookiebanner-container input[type="checkbox"]:focus-visible {
outline: 2px solid var(--wp--preset--color--contrast, #1C3144) !important;
outline-offset: 3px !important;
}
/* The switch input is opacity:0 (only a hit target over the pill drawn by
* .cmplz-label::before), so the outline above never paints here. Complianz
* paints its own blue ring on the pill instead (banner-1-optin.css
* `input.cmplz-consent-checkbox:focus + .cmplz-label::before {box-shadow:0 0 0 2px #245FCC}`).
* Kill the blue, repaint navy with a cream gap, keyboard only. */
#cmplz-cookiebanner-container .cmplz-banner-checkbox input.cmplz-consent-checkbox:focus + .cmplz-label::before {
box-shadow: none !important;
}
#cmplz-cookiebanner-container .cmplz-banner-checkbox input.cmplz-consent-checkbox:focus-visible + .cmplz-label::before {
box-shadow:
0 0 0 2px var(--wp--preset--color--cream, #FAF6F1),
0 0 0 4px var(--wp--preset--color--contrast, #1C3144) !important;
}
#cmplz-cookiebanner-container .cmplz-slider .cmplz-slider-pill {
background-color: var(--wp--custom--border--strong, rgba(28, 49, 68, 0.22));
}
#cmplz-cookiebanner-container input[type="checkbox"]:checked + .cmplz-slider .cmplz-slider-pill,
#cmplz-cookiebanner-container .cmplz-category[data-category-state="granted"] .cmplz-slider .cmplz-slider-pill {
background-color: var(--edt-cmplz-accent, #B73C0E);
}
/* The two .cmplz-toggle / .cmplz-slider-pill rules above are the EUTA-era
* selectors; Complianz 7.6.3 actually paints the switch as ::before/::after on
* .cmplz-label (verified in the rendered CSSOM). The ON track it draws is
* #FF6124, which is 2.79 : 1 against the cream category card — under the 3 : 1
* that WCAG 1.4.11 asks of a non-text state indicator. Same deep step fixes it
* (5.32 : 1 on cream, 5.73 : 1 on white) and keeps one single orange in the
* banner instead of two. The OFF track is already #6F8395 (theme `muted`) and
* needs nothing. */
#cmplz-cookiebanner-container .cmplz-banner-checkbox input.cmplz-consent-checkbox:checked + .cmplz-label::before {
background-color: var(--edt-cmplz-accent, #B73C0E) !important;
}
/* Link colours inside the banner — beat Complianz wizard CSS that
* forces its own accent colour on every . We need !important.
* Excludes anchors that are styled as buttons (.cmplz-btn).
*/
#cmplz-cookiebanner-container .cmplz-links a:not(.cmplz-btn),
#cmplz-cookiebanner-container .cmplz-message a:not(.cmplz-btn),
#cmplz-cookiebanner-container .cmplz-information a:not(.cmplz-btn),
#cmplz-cookiebanner-container .cmplz-documents a:not(.cmplz-btn) {
color: var(--wp--preset--color--contrast, #1C3144) !important;
text-decoration: underline !important;
text-underline-offset: 2px;
transition: color var(--wp--custom--motion--dur-fast, 150ms) var(--wp--custom--motion--ease-out, ease);
}
#cmplz-cookiebanner-container .cmplz-links a:not(.cmplz-btn):hover,
#cmplz-cookiebanner-container .cmplz-links a:not(.cmplz-btn):focus-visible,
#cmplz-cookiebanner-container .cmplz-message a:not(.cmplz-btn):hover,
#cmplz-cookiebanner-container .cmplz-message a:not(.cmplz-btn):focus-visible,
#cmplz-cookiebanner-container .cmplz-information a:not(.cmplz-btn):hover,
#cmplz-cookiebanner-container .cmplz-information a:not(.cmplz-btn):focus-visible,
#cmplz-cookiebanner-container .cmplz-documents a:not(.cmplz-btn):hover,
#cmplz-cookiebanner-container .cmplz-documents a:not(.cmplz-btn):focus-visible {
/* Deep step again: the legal links sit on white, where #FF6124 is 3.01 : 1
* as 14px text. #B73C0E is 5.73 : 1 and still unmistakably orange. */
color: var(--edt-cmplz-accent, #B73C0E) !important;
}
@media (max-width: 600px) {
#cmplz-cookiebanner-container .cmplz-cookiebanner {
max-width: calc(100vw - 20px);
padding: 15px 16px;
}
#cmplz-cookiebanner-container .cmplz-buttons {
flex-direction: column;
gap: 8px;
}
#cmplz-cookiebanner-container .cmplz-btn {
width: 100%;
justify-content: center;
}
}
/* Complianz's wizard CSS hides the banner title outright below 425px
* (`.cmplz-cookiebanner .cmplz-header .cmplz-title{display:none}`), which
* left the 390px banner with a bare ✕ and no heading. Put it back — the
* preferences state still fits 844px with no ✕ collision. */
@media (max-width: 425px) {
#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-header .cmplz-title {
display: block !important;
}
}
/* Bottom-right floating "Manage consent" tab — align with the site's pill buttons */
#cmplz-manage-consent .cmplz-manage-consent {
border-radius: var(--wp--custom--radius--pill, 999px) var(--wp--custom--radius--pill, 999px) 0 0;
font-family: var(--wp--preset--font-family--body, "Maitree", Georgia, serif);
font-weight: 600;
font-size: 0.8125rem;
padding: 8px 16px;
}