/* privacy.geneticker.com — self-contained stylesheet. Design tokens + the small amount of chrome this single page uses + the shared legal typography, lifted from the applications so the notice reads as part of the same product rather than a bolted-on legal page. Nothing else: this site has one page, no account and no interactive surface. */ /* Cipher — matches the Geneticker product family: Google Sans + Material Icons on a light Google-Material surface. Cipher's own accent is a teal-green so it reads as a sibling of Vault (green) and Lab (blue), not a different product. */ :root { --bg: #f8f9fa; --panel: #ffffff; --panel2: #f1f3f4; --ink: #202124; --ink2: #5f6368; --ink3: #686e75; --line: #dadce0; --line2: #e8eaed; --blue: #1a73e8; --blue-h: #1557b0; --green: #0d904f; --teal: #4f46e5; /* Cipher accent (indigo) — the same accent Decipher uses. Remapped in place rather than renamed: every selector below already says var(--teal), so the estate keeps ONE accent token and the two apps stay visually consistent. */ --teal-h: #4338ca; --red: #d93025; --amber: #e37400; --violet: #8b5cf6; /* Violet TEXT sitting on a violet tint. --violet itself is tuned as a fill/icon accent and is too pale to read on a pale tint (3.7:1), so text needs its own value on each side of the flip. The other accents' base tokens are already dark enough in light and light enough in dark to double as text. */ --violet-ink: #7b1fa2; --gold-ink: #7a5e00; /* the "uncertain / VUS / not called" gold, as text (AA on its pale tint) */ /* Same story for the .note / .note.warn / .err inks: those callouts sit on a translucent tint of their own accent, so the ink needs a value per side of the flip. --blue/--amber/--red themselves are fill accents and are either too pale (light) or too dark (dark) to double as body text on that tint. */ --blue-ink: #174ea6; --amber-ink: #9c5400; --red-ink: #c5221f; --display: 'Google Sans','Google Sans Text','Roboto','Helvetica Neue',Arial,sans-serif; --body: 'Google Sans Text','Google Sans','Roboto','Helvetica Neue',Arial,sans-serif; --mono: 'Roboto Mono',ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; --radius: 14px; --shadow: 0 1px 3px rgba(60,64,67,.12), 0 4px 12px rgba(60,64,67,.10); --shadow-lg: 0 8px 28px -8px rgba(60,64,67,.28); color-scheme: light; } /* Dark theme — keeps every token NAME above and only flips the values, so no downstream selector changes. Three layers: OS preference (opt-out-able via an explicit light choice), then explicit user overrides that win either way. The pre-paint data-theme is set by theme-init.js in to avoid a flash. */ :root[data-theme="dark"] { --bg:#0f1115; --panel:#171a21; --panel2:#1f232c; --ink:#e8eaed; --ink2:#b0b5bd; --ink3:#868b93; --line:#2a2f3a; --line2:#222731; --blue:#5b9bff; --blue-h:#7db0ff; --green:#28b463; --teal:#7c73ff; --teal-h:#938bff; --red:#ff6b5e; --amber:#f5a623; --violet:#a78bfa; --violet-ink:#a78bfa; --gold-ink:#e6c34d; --blue-ink:#a8c7fa; --amber-ink:#f5c778; --red-ink:#ff9d94; --shadow: 0 1px 3px rgba(0,0,0,.5), 0 4px 12px rgba(0,0,0,.42); --shadow-lg: 0 10px 30px -8px rgba(0,0,0,.72); color-scheme: dark; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --bg:#0f1115; --panel:#171a21; --panel2:#1f232c; --ink:#e8eaed; --ink2:#b0b5bd; --ink3:#868b93; --line:#2a2f3a; --line2:#222731; --blue:#5b9bff; --blue-h:#7db0ff; --green:#28b463; --teal:#7c73ff; --teal-h:#938bff; --red:#ff6b5e; --amber:#f5a623; --violet:#a78bfa; --violet-ink:#a78bfa; --gold-ink:#e6c34d; --blue-ink:#a8c7fa; --amber-ink:#f5c778; --red-ink:#ff9d94; --shadow: 0 1px 3px rgba(0,0,0,.5), 0 4px 12px rgba(0,0,0,.42); --shadow-lg: 0 10px 30px -8px rgba(0,0,0,.72); color-scheme: dark; } } /* ---- reset + chrome ---- */ * { margin: 0; padding: 0; box-sizing: border-box; } html, body { height: 100%; } body { font-family: var(--body); background: var(--bg); color: var(--ink); -webkit-font-smoothing: antialiased; line-height: 1.55; letter-spacing: .1px; } a { color: var(--blue); text-decoration: none; } button { font-family: inherit; cursor: pointer; } .mono { font-family: var(--mono); } .muted { color: var(--ink2); } .dim { color: var(--ink3); } .hidden { display: none !important; } /* ---------------------------------------------------------------- top bar */ .topbar { position: sticky; top: 0; z-index: 40; display: flex; align-items: center; gap: 14px; padding: 12px 22px; background: var(--panel); border-bottom: 1px solid var(--line); } .brand { display: flex; align-items: center; gap: 10px; font-family: var(--display); font-weight: 700; font-size: 18px; color: var(--ink); } .brand .logo { width: 30px; height: 30px; border-radius: 8px; background: var(--teal); display: grid; place-items: center; color: #fff; } .brand .logo .material-icons-outlined { font-size: 18px; } .brand small { font-family: var(--mono); font-weight: 500; color: var(--ink3); font-size: 10.5px; letter-spacing: 1.5px; text-transform: uppercase; } .topbar .spacer { flex: 1; } .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 11px 20px; border-radius: 8px; border: 1px solid transparent; font-family: var(--display); font-weight: 600; font-size: 14px; transition: .15s; } .btn .material-icons-outlined { font-size: 18px; } .btn-primary { background: var(--blue); color: #fff; } .btn-primary:hover { background: var(--blue-h); } .btn-teal { background: var(--teal); color: #fff; } .btn-teal:hover { background: var(--teal-h); } .btn-ghost { background: var(--panel); border-color: var(--line); color: var(--ink); } .btn-ghost:hover { background: var(--panel2); } .btn-soft { background: var(--bg); border-color: var(--line); color: var(--ink2); } .btn-soft:hover { background: var(--panel2); color: var(--ink); } .btn-danger { background: var(--panel); border-color: rgba(217,48,37,.4); color: var(--red); } .btn-danger:hover { background: rgba(217,48,37,.06); } .btn-block { width: 100%; } .btn:disabled { opacity: .5; cursor: not-allowed; } .btn-row { display: flex; gap: 12px; margin-top: 22px; flex-wrap: wrap; } /* ============================================================ LEGAL SURFACES Three renderers share one stylesheet so the consent modal, the Settings → Legal section and the standalone /legal.html page look like one document. Every colour is a token, so both themes follow automatically — never hard-code a hex here, and never pass a var() to hexA() (it parses hex and would silently yield transparent). */ .lg-doc { margin: 0 0 30px; } .lg-doc:last-child { margin-bottom: 0; } .lg-title { display: flex; align-items: center; gap: 9px; font-family: var(--display); font-size: 19px; font-weight: 700; color: var(--ink); margin: 0 0 4px; } .lg-title .material-icons-outlined { font-size: 21px; color: var(--teal); } .lg-short { font-size: 12.5px; color: var(--ink2); margin: 0 0 14px; padding-bottom: 12px; border-bottom: 1px solid var(--line); } .lg-h { font-family: var(--display); font-size: 14px; font-weight: 700; color: var(--ink); margin: 20px 0 7px; } .lg-p { font-size: 13.5px; line-height: 1.72; color: var(--ink2); margin: 0 0 11px; } .lg-p strong, .lg-ul strong { color: var(--ink); font-weight: 700; } /* A callout paragraph: the sentences a reader must not skim past. */ .lg-p.lg-strong { background: var(--panel2); border-left: 3px solid var(--amber); border-radius: 0 8px 8px 0; padding: 11px 14px; color: var(--ink); } .lg-ul { margin: 0 0 12px; padding-left: 20px; } .lg-ul li { font-size: 13.5px; line-height: 1.72; color: var(--ink2); margin-bottom: 8px; } .lg-meta { font-family: var(--mono); font-size: 11.5px; color: var(--ink3); background: var(--panel2); border: 1px solid var(--line); border-radius: 10px; padding: 9px 12px; margin: 0 0 24px; } /* ---- standalone /legal.html ---- */ body.lg-standalone { background: var(--bg); } .lg-page { display: flex; align-items: flex-start; gap: 30px; max-width: 1040px; margin: 0 auto; padding: 26px 22px 90px; } .lg-toc { position: sticky; top: 87px; flex: none; width: 250px; display: flex; flex-direction: column; gap: 3px; } .lg-toc-h { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ink3); padding: 0 12px 8px; } .lg-toc-i { display: flex; align-items: center; gap: 11px; padding: 10px 13px; border-radius: 10px; color: var(--ink2); font-family: var(--display); font-weight: 600; font-size: 13.5px; text-decoration: none; transition: .13s; } .lg-toc-i:hover { background: var(--panel2); color: var(--ink); } .lg-toc-i .material-icons-outlined { font-size: 19px; } .lg-print { margin-top: 14px; justify-content: center; } .lg-body { flex: 1; min-width: 0; background: var(--panel); border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--shadow); padding: 26px 30px; } @media (max-width: 860px) { .lg-page { flex-direction: column; } .lg-toc { position: static; width: 100%; } .lg-body { padding: 20px 18px; } } @media print { .topbar, .lg-toc { display: none !important; } .lg-page { display: block; padding: 0; max-width: none; } .lg-body { border: none; box-shadow: none; padding: 0; } .lg-doc { break-inside: auto; } .lg-title, .lg-h { break-after: avoid; } } /* Group heading in the document column. This page carries every document in the estate — three of which are called "Privacy Policy" — so the reader needs to see which product a given document governs before they start reading it. */ .lg-group { font-family: var(--display); font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--teal-h); margin: 34px 0 14px; padding-bottom: 8px; border-bottom: 2px solid var(--line); } .lg-group:first-of-type { margin-top: 4px; } /* The TOC reuses .lg-toc-h for its group labels; give repeats room. */ .lg-toc-h + .lg-toc-i { margin-top: 2px; } .lg-toc .lg-toc-h { margin-top: 14px; } .lg-toc .lg-toc-h:first-child { margin-top: 0; }