/** * Klaro notice/modal — lu-theme styling. * * Restyles Klaro's default (light) chrome to the lu-theme design tokens so the * cookie notice reads as part of the site: Fraunces body text, a navy * Lexend-uppercase Accept button matching the theme's buttons, Viking-blue * links, and a Gold brand accent. Values come from theme.json presets only. * * Selectors are prefixed with `body` to out-specify Klaro's own CSS, which the * library injects into at runtime (after this stylesheet loads). */ /* ---- Notice card + modal surface ---- */ body .klaro .cookie-notice, body .klaro .cookie-modal .cm-modal { background: var(--wp--preset--color--accent-8); color: var(--wp--preset--color--foreground); border-top: 4px solid var(--wp--preset--color--accent-5); border-radius: 0; font-family: var(--wp--preset--font-family--fraunces); } body .klaro .cookie-notice .cn-body, body .klaro .cookie-notice .cn-body p, body .klaro .cookie-modal .cm-body, body .klaro .cookie-modal .cm-body p, body .klaro .cookie-modal .cm-body li { font-family: var(--wp--preset--font-family--fraunces); font-size: var(--wp--preset--font-size--small); color: var(--wp--preset--color--foreground); line-height: 1.5; } /* Klaro gives the notice body uneven padding (padding:1em; padding-top:0), so the title hugs the Gold accent bar. Replace it with even padding on all sides. Mirror Klaro's own `:not(.cookie-modal-notice)` selector (+ the body prefix) to out-specify its rule. */ body .klaro .cookie-notice:not( .cookie-modal-notice ) .cn-body { padding: var(--wp--preset--spacing--md); } /* ---- Title — theme "eyebrow" label (Lexend, uppercase) ---- */ body .klaro .cookie-notice .cn-body .title, body .klaro .cookie-modal .cm-header .title { font-family: var(--wp--preset--font-family--lexend); font-size: var(--wp--preset--font-size--small); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--wp--preset--color--accent-1); } /* ---- Links (privacy policy) — Viking Blue ---- */ body .klaro .cookie-notice a, body .klaro .cookie-modal a { color: var(--wp--preset--color--accent-2); text-decoration: underline; } /* ---- Notice action row — Accept first (primary), Reject second (secondary) ---- Klaro nests both buttons inside .cn-buttons (Reject is .cn-decline, Accept is the accept button), and .cn-buttons is the single child of .cn-ok. So .cn-buttons is the real button row: make it a right-aligned flex row with a gap, size the buttons to their content, and push Reject to the right with an explicit order (Accept keeps the default order 0, so it stays on the left). */ body .klaro .cookie-notice:not( .cookie-modal-notice ) .cn-body .cn-ok { display: flex; justify-content: flex-end; margin-top: 0; } /* The :not(.cookie-modal-notice) mirrors Klaro's own selector so this out-specifies its `.cn-buttons{display:inline-block}` rule and the flex layout actually wins. */ body .klaro .cookie-notice:not( .cookie-modal-notice ) .cn-body .cn-buttons { display: flex; flex-flow: row wrap; align-items: center; justify-content: flex-end; gap: var(--wp--preset--spacing--sm); width: auto; /* No margin-top override here: the row's top gap comes from Klaro's own base layout (klaro-base.css). Zeroing it only takes effect after a client-side navigation (when Klaro's runtime