/* Squizz The Lemon — legal pages stylesheet Used by /terms, /privacy, /data-deletion, /dpa. Brand palette: cream #F7F2E8, midnight #1A1A2E, lemon #FFD60A, coral #FF4D4D, lilac #B07CFF, forest #1B5E3B. Body in Inter, accent handwriting in Caveat (loaded from Google Fonts in the page ). */ :root { --cream: #F7F2E8; --midnight: #1A1A2E; --y: #FFD60A; --coral: #FF4D4D; --lilac: #B07CFF; --muted: #5b5b6e; --line: rgba(26, 26, 46, 0.10); --soft: rgba(255, 214, 10, 0.18); } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; } body { background: var(--cream); color: var(--midnight); font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif; font-size: 16px; line-height: 1.75; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } /* ── Header ───────────────────────────────────────────────── */ header.legal-top { background: rgba(255, 255, 255, 0.55); border-bottom: 1px solid var(--line); backdrop-filter: blur(8px); position: sticky; top: 0; z-index: 10; } header.legal-top .top-in { max-width: 760px; margin: 0 auto; padding: 18px 24px; display: flex; justify-content: space-between; align-items: center; gap: 16px; } header.legal-top a.brand { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; color: var(--midnight); font-weight: 700; font-size: 13px; letter-spacing: 0.16em; text-transform: uppercase; } header.legal-top a.back { font-family: 'Caveat', cursive; font-size: 22px; color: var(--midnight); text-decoration: none; opacity: 0.7; transition: opacity 0.15s; } header.legal-top a.back:hover { opacity: 1; } /* ── Hero ─────────────────────────────────────────────────── */ main.legal { max-width: 720px; margin: 0 auto; padding: 64px 24px 96px; } main.legal .hero { margin-bottom: 56px; text-align: left; } main.legal .hero p.eyebrow { margin: 0 0 8px; font-size: 11px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--midnight); opacity: 0.55; } main.legal h1 { margin: 0 0 12px; font-size: 56px; font-weight: 800; line-height: 1.05; letter-spacing: -0.02em; color: var(--midnight); } main.legal .squiggle { display: block; margin: 4px 0 18px; width: 220px; height: 14px; color: var(--coral); } main.legal .meta { font-family: 'Caveat', cursive; font-size: 22px; color: var(--midnight); opacity: 0.7; } /* ── Article (prose) ──────────────────────────────────────── */ article.prose { text-align: justify; hyphens: auto; -webkit-hyphens: auto; word-spacing: 0.02em; } article.prose h2 { text-align: left; margin: 56px 0 18px; font-size: 26px; font-weight: 800; line-height: 1.25; letter-spacing: -0.005em; color: var(--midnight); scroll-margin-top: 80px; position: relative; } article.prose h2::before { content: ''; position: absolute; left: 0; bottom: -6px; width: 36px; height: 4px; background: var(--y); border-radius: 2px; } article.prose h3 { text-align: left; margin: 32px 0 12px; font-size: 18px; font-weight: 700; letter-spacing: -0.005em; color: var(--midnight); } article.prose h4 { text-align: left; margin: 24px 0 8px; font-size: 15px; font-weight: 600; color: var(--midnight); } article.prose p { margin: 0 0 16px; } article.prose ul { text-align: left; margin: 0 0 20px; padding-left: 0; list-style: none; } article.prose ul li { position: relative; margin: 0 0 10px; padding-left: 22px; } article.prose ul li::before { content: ''; position: absolute; left: 0; top: 0.7em; width: 8px; height: 8px; background: var(--y); border-radius: 50%; } article.prose a { color: var(--midnight); text-decoration: underline; text-decoration-color: var(--y); text-decoration-thickness: 2px; text-underline-offset: 3px; transition: text-decoration-color 0.15s; } article.prose a:hover { text-decoration-color: var(--coral); } article.prose strong { font-weight: 700; } /* Callout box — used to highlight the legally-important "uppercase" notices without screaming at the user. Replaces the original ALL CAPS paragraphs. */ article.prose .callout { text-align: left; margin: 24px 0; padding: 18px 22px; background: var(--soft); border-left: 4px solid var(--y); border-radius: 8px; font-size: 14.5px; line-height: 1.65; } article.prose .callout strong { display: block; margin-bottom: 6px; font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--midnight); opacity: 0.7; } /* Tables ────────────────────────────────────────────────── */ article.prose .table-wrap { text-align: left; margin: 28px 0; overflow-x: auto; border: 1px solid var(--line); border-radius: 12px; background: #fff; } article.prose table { width: 100%; border-collapse: collapse; font-size: 14.5px; } article.prose th, article.prose td { padding: 14px 16px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--line); } article.prose th { background: var(--soft); font-weight: 700; font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; } article.prose tr:last-child td { border-bottom: none; } /* ── Footer ───────────────────────────────────────────────── */ footer.legal-bottom { background: var(--midnight); color: rgba(247, 242, 232, 0.7); padding: 32px 24px; text-align: center; font-size: 13px; } footer.legal-bottom .links { margin: 0 0 14px; display: flex; gap: 22px; justify-content: center; flex-wrap: wrap; } footer.legal-bottom a { color: rgba(247, 242, 232, 0.7); text-decoration: none; transition: color 0.15s; font-size: 12px; letter-spacing: 0.04em; } footer.legal-bottom a:hover { color: var(--y); } footer.legal-bottom p { margin: 0; font-size: 11px; opacity: 0.55; letter-spacing: 0.04em; } /* ── Responsive ───────────────────────────────────────────── */ @media (max-width: 600px) { main.legal { padding: 40px 20px 64px; } main.legal h1 { font-size: 38px; } main.legal .squiggle { width: 160px; } main.legal .meta { font-size: 19px; } article.prose h2 { font-size: 22px; margin-top: 40px; } article.prose { text-align: left; hyphens: none; } /* avoid ugly justify on small screens */ header.legal-top a.back { font-size: 18px; } }