/* Cookie-consent banner — issue #958. * * Single shared source for templates/cookie_consent/cookielaw_banner.html, * linked by BOTH shells (public_base.html and base.html/dashboard) so there * is exactly one place to edit. Previously these rules lived inline in * public-landing.css and base.html had no equivalent at all — the PR #982 * review pointed out that duplicating them instead of sharing was an * unforced (and unverified) risk; consolidating here is covered by the * existing Playwright check (tests/visual/test_public_responsive.py -> * _assert_cookie_banner) since public_base.html still renders identically. * Only --ion-* / --ok-* tokens, already loaded by both shells. * * z-index: 60, deliberately above .assistant-panel (dashboard-shell.css, * z-index: 50) — an unresolved GDPR consent choice must never be visually * obscured by (or bleed under) the assistant drawer. Still well below * Ionic's own overlay portals (ion-modal/ion-toast reparent to at a * much higher z-index, see architecture note "Overlays Ionic→body"). */ #cookie-consent-banner { position: fixed; inset-inline: 0; bottom: 0; z-index: 60; background: var(--ion-card-background, #fff); border-top: 1px solid var(--ion-border-color, #ececec); box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.1); padding-block: 0.75rem max(0.75rem, env(safe-area-inset-bottom)); } .cookie-consent-layout { display: flex; align-items: center; justify-content: space-between; gap: 1.25rem; } .cookie-consent-copy { display: flex; align-items: flex-start; gap: 0.625rem; min-width: 0; color: var(--ion-color-medium-shade, #545b63); } .cookie-consent-copy iconify-icon { flex: 0 0 auto; margin-top: 0.05rem; color: var(--ion-color-primary, #1496d6); } .cookie-consent-copy p { margin: 0; font-size: 0.875rem; line-height: 1.4; } .cookie-consent-copy a { color: var(--ion-color-primary, #1496d6); text-underline-offset: 0.15em; } .cookie-consent-actions { display: grid; grid-template-columns: repeat(3, max-content); gap: 0.375rem; flex: 0 0 auto; } .cookie-consent-actions ion-button { min-height: 2.75rem; height: 2.75rem; margin: 0; --padding-start: 0.75rem; --padding-end: 0.75rem; } @media (max-width: 767px) { .cookie-consent-layout { flex-direction: column; align-items: stretch; gap: 0.625rem; } .cookie-consent-copy p { font-size: 0.8125rem; line-height: 1.35; } .cookie-consent-actions { grid-template-columns: repeat(3, minmax(0, 1fr)); } .cookie-consent-actions ion-button { width: 100%; --padding-start: 0.375rem; --padding-end: 0.375rem; } }