/* Auffi — Matomo-Consent-Banner styling. Calm Fresh recast. Slim full-width bar that sits between the page- content area and the footer. Takes its own vertical line so it never overlays content (an earlier floating-card variant covered readable text mid-page; the visual audit on 2026-05-23 caught it). Tokens come from topbar-footer.css (loaded first on the marketing subpages) or from the SPA bundle on viewer/index.html. */ /* When the banner is mounted, body padding-bottom grows enough to clear the bar + the footer. JS toggles `.matomo-consent-shown` on on mount + removes it on dismiss/opt-in. */ body.matomo-consent-shown { padding-bottom: calc(var(--footer-height, 48px) + 5rem); } .matomo-consent-banner { position: fixed; left: 0; right: 0; bottom: var(--footer-height, 48px); z-index: 600; background: var(--surface, #ffffff); color: var(--ink, #0f1f1a); border-top: 1px solid var(--line, #e3ece8); border-radius: var(--radius-card, 16px) var(--radius-card, 16px) 0 0; box-shadow: var(--shadow-lift, 0 4px 12px rgba(15,31,26,0.08)); padding: 0.75rem 1.5rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; font-family: var(--font-sans, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif); } @media (prefers-color-scheme: dark) { .matomo-consent-banner { background: var(--surface, #11201c); color: var(--ink, #e8f1ec); border-top-color: var(--line, #20312b); } } .matomo-consent-text { margin: 0; font-size: 0.8125rem; line-height: 1.45; color: var(--ink, #0f1f1a); flex: 1; min-width: 16rem; } .matomo-consent-text::before { content: ""; display: inline-block; width: 4px; height: 0.85em; margin-right: 0.4em; vertical-align: -0.05em; border-radius: var(--radius-pill, 999px); background: var(--brand, #10b981); font-weight: 500; } .matomo-consent-link { color: var(--brand-strong, #047857); text-decoration: underline; text-underline-offset: 2px; } .matomo-consent-actions { display: flex; gap: 0.375rem; flex-shrink: 0; } .matomo-consent-btn { font-family: var(--font-mono, ui-monospace, Menlo, monospace); font-size: 0.6875rem; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; padding: 0.4375rem 0.875rem; border-radius: var(--radius-pill, 999px); border: 1px solid var(--line, #e3ece8); background: transparent; color: var(--ink, #0f1f1a); cursor: pointer; transition: background 120ms ease, color 120ms ease, border-color 120ms ease; white-space: nowrap; } .matomo-consent-btn:hover { background: var(--surface, #ffffff); border-color: var(--brand, #10b981); color: var(--brand-strong, #047857); } .matomo-consent-btn:focus-visible { outline: 2px solid var(--focus, #10b981); outline-offset: 2px; } .matomo-consent-ok { background: var(--brand-strong, #047857); border-color: var(--brand-strong, #047857); color: #fff; box-shadow: var(--shadow-sm, 0 1px 2px rgba(15,31,26,0.05)); } .matomo-consent-ok:hover { background: var(--brand, #10b981); border-color: var(--brand, #10b981); color: var(--ink-on-brand, #06231b); box-shadow: var(--shadow-lift, 0 4px 12px rgba(15,31,26,0.08)); } @media (prefers-color-scheme: dark) { .matomo-consent-ok { color: var(--ink-on-brand, #06231b); } } /* Narrow viewports — text wraps above the buttons, padding-bottom on body grows accordingly so the wrapped two-row bar still clears all page content. */ @media (max-width: 580px) { .matomo-consent-banner { padding: 0.625rem 1rem; gap: 0.5rem; flex-direction: column; align-items: stretch; } .matomo-consent-text { min-width: 0; } .matomo-consent-actions { justify-content: flex-end; } body.matomo-consent-shown { padding-bottom: calc(var(--footer-height, 48px) + 8rem); } }