/* * legal-overlay.css — Fullscreen overlay for legal pages (Imprint, Privacy). * Uses existing design tokens for colors, spacing, and typography. */ /* Hide page content instantly when a legal hash is detected in the inline script, before the overlay JS has loaded. Prevents the flash of un-overlaid page on direct navigation to /#privacy etc. */ [data-legal-pending] .page { opacity: 0; } /* ======================================== OVERLAY ROOT — fixed fullscreen layer ======================================== */ .legal-overlay { position: fixed; inset: 0; z-index: var(--z-overlay); display: flex; align-items: flex-start; justify-content: center; pointer-events: none; opacity: 0; visibility: hidden; transition: opacity var(--dur-medium) var(--ease-out-soft), visibility 0s linear var(--dur-medium); } .legal-overlay.is-open { pointer-events: auto; opacity: 1; visibility: visible; transition: opacity var(--dur-medium) var(--ease-out-soft), visibility 0s linear 0s; } /* ======================================== BACKDROP — semi-transparent bg + blur ======================================== */ .legal-overlay__backdrop { position: absolute; inset: 0; background: color-mix(in srgb, var(--color-bg) 88%, transparent); backdrop-filter: blur(14px) saturate(160%); -webkit-backdrop-filter: blur(14px) saturate(160%); } /* ======================================== PANEL — scrollable content container ======================================== */ .legal-overlay__panel { position: relative; width: 100%; max-width: 720px; max-height: 100vh; max-height: 100dvh; overflow-y: auto; overscroll-behavior: contain; padding: 0 var(--container-pad-mobile); transform: translateY(24px); transition: transform var(--dur-medium) var(--ease-spring); } .legal-overlay.is-open .legal-overlay__panel { transform: translateY(0); } @media (min-width: 768px) { .legal-overlay__panel { padding: 0 var(--space-7); } } /* Hide scrollbar */ .legal-overlay__panel { scrollbar-width: none; } .legal-overlay__panel::-webkit-scrollbar { display: none; } /* ======================================== HEADER — sticky title + close button ======================================== */ .legal-overlay__header { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); margin-bottom: var(--space-6); padding-bottom: var(--space-4); border-bottom: 1px solid var(--color-hairline); position: sticky; top: 0; z-index: 1; background: var(--color-bg); padding-top: var(--space-7); } .legal-overlay__title { font-family: var(--font-display); font-size: var(--fs-h2); font-weight: 900; line-height: var(--lh-snug); letter-spacing: var(--tr-tight); color: var(--color-fg); } /* ======================================== CLOSE BUTTON — pill style, spring hover ======================================== */ .legal-overlay__close { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; padding: 0; border: 1px solid var(--color-hairline-strong); border-radius: 999px; background: color-mix(in srgb, var(--color-bg) 78%, transparent); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); color: var(--color-fg); cursor: pointer; flex-shrink: 0; transition: transform var(--dur-medium) var(--ease-spring), border-color var(--dur-base) var(--ease-out-soft), background var(--dur-theme) var(--ease-out-soft); } .legal-overlay__close:hover, .legal-overlay__close:focus-visible { transform: scale(1.1) rotate(-8deg); border-color: var(--color-fg); } .legal-overlay__close:active { transform: scale(0.92); } .legal-overlay__close svg { width: 18px; height: 18px; } /* ======================================== BODY — legal content typography ======================================== */ .legal-overlay__body h2 { font-family: var(--font-display); font-size: var(--fs-h3); font-weight: var(--fw-bold); line-height: var(--lh-snug); color: var(--color-fg); margin-top: var(--space-6); margin-bottom: var(--space-3); } .legal-overlay__body h3 { font-size: var(--fs-lead); font-weight: var(--fw-semibold); line-height: var(--lh-snug); color: var(--color-fg); margin-top: var(--space-5); margin-bottom: var(--space-2); } .legal-overlay__body p { font-size: var(--fs-body); line-height: var(--lh-relaxed); color: var(--color-fg-soft); margin-bottom: var(--space-4); } .legal-overlay__body ul { list-style: disc; padding-left: var(--space-5); margin-bottom: var(--space-4); } .legal-overlay__body li { font-size: var(--fs-body); line-height: var(--lh-relaxed); color: var(--color-fg-soft); margin-bottom: var(--space-2); } .legal-overlay__body a { color: var(--color-fg); text-decoration: underline; text-underline-offset: 0.15em; transition: color var(--dur-base) var(--ease-out-soft); } .legal-overlay__body a:hover, .legal-overlay__body a:focus-visible { color: var(--color-muted); } .legal-overlay__body table { width: 100%; border-collapse: collapse; margin-bottom: var(--space-4); font-size: var(--fs-body); } .legal-overlay__body th, .legal-overlay__body td { text-align: left; padding: var(--space-2) var(--space-3); border-bottom: 1px solid var(--color-hairline); color: var(--color-fg-soft); } .legal-overlay__body th { font-weight: var(--fw-semibold); color: var(--color-fg); } .legal-overlay__body em { font-style: italic; color: var(--color-muted); } /* Bottom padding so the last paragraph doesn't hug the viewport edge */ .legal-overlay__body > :last-child { margin-bottom: var(--space-7); } /* ======================================== REDUCED MOTION ======================================== */ @media (prefers-reduced-motion: reduce) { .legal-overlay, .legal-overlay__panel { transition: none; } }