/* Shared styles for Peysu legal pages (privacy.html, sms-terms.html). Mirrors the landing page's design tokens (see index.html): IBM Plex type, cool-gray oklch palette, sharp corners, light + dark themes selected via html[data-theme]. Kept in one file because both legal pages share the same chrome; the page-critical pre-paint theme script stays inline in each page. */ html { scroll-behavior: smooth; } html, body { margin: 0; } /* Theme is set on by each page's head script; defaults to OS preference. */ html[data-theme="light"] { background: #eef0f3; color-scheme: light; } html[data-theme="dark"] { background: #16181c; color-scheme: dark; } html:not([data-theme]) { background: #eef0f3; } @media (prefers-color-scheme: dark) { html:not([data-theme]) { background: #16181c; } } /* Skip link — first focusable element, revealed on keyboard focus. */ .skip { position: fixed; left: 12px; top: -60px; z-index: 50; background: #1b1f26; color: #eef0f3; font-family: "IBM Plex Mono", ui-monospace, Menlo, monospace; font-size: 13px; font-weight: 500; padding: 10px 16px; text-decoration: none; transition: top 0.15s; } .skip:focus { top: 12px; } .legal { --ink: oklch(0.24 0.012 255); --bg: oklch(0.985 0.002 255); --panel: oklch(0.97 0.004 255); --line: oklch(0.24 0.012 255 / 0.12); --mut: oklch(0.5 0.014 255); --accent: oklch(0.3 0.006 255); --accent-text: oklch(0.42 0.006 255); --accent-hover: oklch(0.18 0.006 255); --px: clamp(22px, 5vw, 72px); min-height: 100dvh; background: var(--bg); color: var(--ink); font-family: "IBM Plex Sans", system-ui, sans-serif; font-size: 16px; line-height: 1.65; -webkit-font-smoothing: antialiased; } html[data-theme="dark"] .legal { --ink: oklch(0.93 0.008 255); --bg: oklch(0.2 0.012 262); --panel: oklch(0.25 0.014 262); --line: oklch(0.93 0.008 255 / 0.15); --mut: oklch(0.66 0.014 255); --accent: oklch(0.92 0.006 255); --accent-text: oklch(0.8 0.006 255); --accent-hover: oklch(0.99 0 255); } @media (prefers-color-scheme: dark) { html:not([data-theme]) .legal { --ink: oklch(0.93 0.008 255); --bg: oklch(0.2 0.012 262); --panel: oklch(0.25 0.014 262); --line: oklch(0.93 0.008 255 / 0.15); --mut: oklch(0.66 0.014 255); --accent: oklch(0.92 0.006 255); --accent-text: oklch(0.8 0.006 255); --accent-hover: oklch(0.99 0 255); } } .legal * { box-sizing: border-box; } .legal a { color: var(--accent-text); text-decoration: underline; text-underline-offset: 2px; } .legal a:hover { color: var(--ink); } .legal a:focus-visible, .legal button:focus-visible { outline: 2px solid var(--accent-text); outline-offset: 3px; } /* ── Nav ──────────────────────────────────────────────────────────────────── */ .legal .nav { display: flex; align-items: center; justify-content: space-between; height: 72px; padding: 0 var(--px); border-bottom: 1px solid var(--line); } .legal .logo { display: flex; align-items: center; gap: 10px; font-weight: 600; font-size: 18px; letter-spacing: -0.01em; color: var(--ink); text-decoration: none; } .legal .logo-mark { width: 1.55em; height: 1.55em; display: block; flex: none; } .legal .navlinks { display: flex; align-items: center; gap: 8px; } .legal .navlinks .lk { font-family: "IBM Plex Mono", ui-monospace, Menlo, monospace; font-size: 13px; color: var(--mut); padding: 6px 12px; text-decoration: none; transition: color 0.15s; } .legal .navlinks .lk:hover { color: var(--ink); } .legal .theme-toggle { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; padding: 0; background: transparent; border: 1px solid var(--line); color: var(--mut); cursor: pointer; transition: color 0.15s, border-color 0.15s; } .legal .theme-toggle:hover { color: var(--ink); border-color: var(--ink); } .legal .theme-toggle svg { width: 17px; height: 17px; display: block; } .legal .theme-toggle .icon-moon { display: none; } html[data-theme="light"] .legal .theme-toggle .icon-sun { display: none; } html[data-theme="light"] .legal .theme-toggle .icon-moon { display: block; } /* ── Document body ────────────────────────────────────────────────────────── */ .legal .doc { max-width: 74ch; margin: 0 auto; padding: 64px var(--px) 96px; } .legal .doc .lbl { font-family: "IBM Plex Mono", ui-monospace, Menlo, monospace; font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--accent-text); } .legal .doc h1 { font-size: clamp(34px, 5vw, 52px); letter-spacing: -0.03em; font-weight: 600; margin: 16px 0 0; } .legal .doc .updated { font-family: "IBM Plex Mono", ui-monospace, Menlo, monospace; font-size: 13px; color: var(--mut); margin-top: 14px; } .legal .doc .lede { font-size: 18px; color: var(--mut); margin-top: 28px; } .legal .doc h2 { font-size: 23px; letter-spacing: -0.02em; font-weight: 600; margin: 48px 0 0; } .legal .doc h3 { font-size: 17px; font-weight: 600; margin: 28px 0 0; } .legal .doc p { color: var(--mut); margin-top: 14px; } .legal .doc strong { color: var(--ink); font-weight: 600; } .legal .doc ul { margin: 14px 0 0; padding-left: 22px; } .legal .doc li { color: var(--mut); margin-top: 8px; } .legal .doc .kw { font-family: "IBM Plex Mono", ui-monospace, Menlo, monospace; font-weight: 500; color: var(--ink); } /* Pulled-out clause — used for the carrier-required no-sharing statement. */ .legal .doc .callout { border: 1px solid var(--line); background: var(--panel); padding: 22px 24px; margin-top: 24px; } .legal .doc .callout > :first-child { margin-top: 0; } /* ── Footer ───────────────────────────────────────────────────────────────── */ .legal .foot { border-top: 1px solid var(--line); padding: 36px var(--px); display: flex; justify-content: space-between; align-items: center; gap: 20px; flex-wrap: wrap; } .legal .foot .fine { font-family: "IBM Plex Mono", ui-monospace, Menlo, monospace; font-size: 12px; color: var(--mut); line-height: 1.7; } .legal .foot .links a { font-family: "IBM Plex Mono", ui-monospace, Menlo, monospace; font-size: 13px; color: var(--mut); margin-left: 18px; text-decoration: none; } .legal .foot .links a:first-child { margin-left: 0; } .legal .foot .links a:hover { color: var(--ink); } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }