#analytics-consent-dialog { --consent-bg: var(--surface, #fff); --consent-fg: var(--ink, #171923); --consent-muted: var(--ink-soft, #667085); --consent-border: var(--line, #ddd7cc); --consent-accent: var(--brand, #e83f6f); --consent-action-bg: var(--ink, #171923); --consent-action-fg: var(--surface, #fff); font: 500 0.875rem/1.45 system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; } #analytics-consent-dialog { position: fixed; z-index: 2147483000; left: max(1rem, env(safe-area-inset-left)); right: max(1rem, env(safe-area-inset-right)); inset-block-end: max(1rem, env(safe-area-inset-bottom)); display: flex; align-items: center; gap: 1rem; max-width: 60rem; margin-inline: auto; padding: 1rem; color: var(--consent-fg); background: var(--consent-bg); border: 1px solid var(--consent-border); border-radius: 1rem; box-shadow: 0 16px 48px rgb(0 0 0 / 20%); } #analytics-consent-dialog[hidden], #analytics-consent-settings[hidden] { display: none; } /* The banner is fixed to the bottom of the viewport, so without reserved space it sits ON TOP of whatever the page ends with. On a 375x812 phone that was the primary CTA: measured 2026-08-26, the banner covered 93% of "Take photo or choose image/PDF" on /en/scan-to-pdf/ and 100% of it on the Persian root, and elementFromPoint at the button's centre returned the banner. The runtime publishes the banner's measured height here and clears it when the banner is hidden. */ body { padding-block-end: var(--consent-banner-reserve, 0px); } .analytics-consent-copy { flex: 1 1 auto; min-width: 0; } #analytics-consent-title { margin: 0 0 0.25rem; font-size: 1rem; line-height: 1.25; } #analytics-consent-body { margin: 0; color: var(--consent-muted); } .analytics-consent-actions { display: flex; flex: 0 0 auto; gap: 0.625rem; } #analytics-consent-dialog button { min-height: 2.75rem; padding: 0.625rem 1rem; color: var(--consent-fg); background: transparent; border: 1px solid var(--consent-border); border-radius: 0.75rem; cursor: pointer; } #analytics-consent-accept { color: var(--consent-action-fg) !important; background: var(--consent-action-bg) !important; border-color: var(--consent-action-bg) !important; } #analytics-consent-dialog button:focus-visible { outline: 3px solid var(--consent-fg); outline-offset: 2px; } #analytics-consent-settings:focus-visible { outline: 2px solid var(--brand, #e83f6f); outline-offset: 3px; border-radius: 3px; } /* This control ships inside SiteFooter's link row (About · Contact · Privacy · Terms · Feedback), so it is styled as one of those links rather than as a button. Measured 2026-09-01 on the built output, /en/ at 1100x900, dark: the bordered treatment (44px min-height + 12px margin) stretched the WHOLE flex row to 56px, and because the button centred its text inside that 44px box while the links sat at the top of theirs, its text landed 21.84px below its neighbours' — most of a line off. It also rendered at 14px/500 against the row's 13.5px/400: the loudest element in the footer while being the least important. After: control and row both 22.27px, and the text boxes coincide exactly with a sibling link's. (Measure the built output, not `astro dev` — two conflicting `body` rules make dev render line-height 1.6 and the build 1.65; see progress.md.) Everything here is inherited on purpose so the control follows whatever footer it lands in. `[hidden]` above still wins (1-1-0 > 1-0-0), which matters because an explicit `display` would otherwise defeat the no-JS hidden state. The fallback path in analytics-consent.js appends this control straight into