/* Shared styles for the standalone legal/info pages (public/privacy, public/terms, public/gdpr, public/faq) — plain static HTML, not part of the React app/build, so these color values are hand-copied from src/theme.js (THEME) rather than imported. Keep in sync manually if the app's palette ever changes. */ :root { --bg: #0A0E16; --card: rgba(30, 41, 59, 0.45); --border: rgba(100, 116, 139, 0.3); --divider: rgba(100, 116, 139, 0.18); --ink: #F8FAFC; --muted: #94A3B8; --muted-soft: #8592A6; --accent: #24405C; --gold: #F0B429; --gold-text: #F5CB6B; --gold-gradient: linear-gradient(135deg, #F3B62B 0%, #E8912D 100%); } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; background: var(--bg); color: var(--ink); font-family: 'Nunito', 'Segoe UI', sans-serif; -webkit-font-smoothing: antialiased; } body { min-height: 100vh; background: radial-gradient(circle at 15% -10%, rgba(240, 180, 41, 0.10), transparent 40%), radial-gradient(circle at 100% 20%, rgba(36, 64, 92, 0.35), transparent 45%), var(--bg); } /* Content lines stay readable on a wide desktop window instead of stretching edge to edge — the user's own requirement, ~72ch is the commonly cited comfortable measure for body text. */ .wrap { max-width: 720px; margin: 0 auto; padding: 40px 24px 96px; } header.top { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 40px; flex-wrap: wrap; } .brand { display: flex; align-items: center; gap: 10px; text-decoration: none; font-weight: 900; font-size: 19px; color: var(--ink); } .brand img { width: 34px; height: 34px; border-radius: 9px; display: block; } .brand .fam { color: var(--ink); } .brand .vibe { color: var(--gold); } .lang-toggle { appearance: none; border: 1px solid var(--border); background: var(--card); color: var(--ink); font-weight: 800; font-size: 13px; font-family: inherit; padding: 9px 16px; border-radius: 999px; cursor: pointer; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); transition: border-color 0.15s ease, color 0.15s ease; } .lang-toggle:hover { border-color: var(--gold); color: var(--gold-text); } h1 { font-size: 30px; font-weight: 900; margin: 0 0 8px; letter-spacing: -0.01em; } .updated { color: var(--muted-soft); font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; margin: 0 0 32px; } .lead { color: var(--muted); font-size: 15.5px; font-weight: 600; line-height: 1.6; max-width: 58ch; margin: 0 0 32px; } .card { background: var(--card); border: 1px solid var(--border); border-radius: 22px; padding: 28px 32px; backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); } section { margin-bottom: 30px; } section:last-child { margin-bottom: 0; } h2 { font-size: 16px; font-weight: 800; margin: 0 0 10px; color: var(--ink); } p { font-size: 15.5px; line-height: 1.75; color: var(--muted); margin: 0 0 12px; font-weight: 500; } p:last-child { margin-bottom: 0; } ul { margin: 0 0 12px; padding-left: 22px; } li { font-size: 15.5px; line-height: 1.75; color: var(--muted); font-weight: 500; margin-bottom: 6px; } a { color: var(--gold-text); text-decoration: underline; text-underline-offset: 2px; } a:hover { color: var(--gold); } footer.bottom { margin-top: 44px; text-align: center; font-size: 13px; color: var(--muted-soft); } footer.bottom nav a { color: var(--muted-soft); margin: 0 10px; text-decoration: none; font-weight: 700; } footer.bottom nav a:hover { color: var(--gold-text); text-decoration: underline; } footer.bottom p { color: var(--muted-soft); font-size: 12.5px; margin-top: 14px; } /* Only one language block renders at a time — toggled by legal.js setting data-lang on . Both are always in the DOM (no fetch/ flash of missing content), CSS just hides one. */ html[data-lang="en"] .lang-sv, html[data-lang="sv"] .lang-en { display: none; } /* FAQ accordion (public/faq only). Each .faq-item is a plain button + panel pair — not native
/, because
's hidden/shown content jumps open/closed with no way to transition smoothly across browsers. The grid-template-rows 0fr -> 1fr trick below animates to the answer's natural height without ever measuring scrollHeight in JS (faq.js only toggles the .open class + aria-expanded); widely supported in current evergreen browsers. */ .faq-list { display: flex; flex-direction: column; gap: 10px; } .faq-item { border: 1px solid var(--border); border-radius: 16px; overflow: hidden; background: rgba(15, 23, 42, 0.3); } .faq-q { appearance: none; width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 12px; background: transparent; border: none; color: var(--ink); font-family: inherit; font-size: 15.5px; font-weight: 800; text-align: left; padding: 18px 20px; cursor: pointer; } .faq-q:hover { color: var(--gold-text); } .faq-q .chev { flex-shrink: 0; width: 18px; height: 18px; color: var(--muted-soft); transition: transform 0.25s ease; } .faq-item.open .faq-q .chev { transform: rotate(180deg); color: var(--gold); } .faq-a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.3s ease; } .faq-item.open .faq-a { grid-template-rows: 1fr; } .faq-a-inner { min-height: 0; overflow: hidden; } .faq-a-inner p { padding: 0 20px 18px; margin: 0; color: var(--muted); } @media (max-width: 640px) { .wrap { padding: 24px 18px 64px; } h1 { font-size: 25px; } .card { padding: 22px 20px; border-radius: 18px; } header.top { margin-bottom: 28px; } .faq-q { padding: 15px 16px; font-size: 14.5px; } .faq-a-inner p { padding: 0 16px 15px; } }