/* * Layout and type for the two public pages — the privacy policy and the deletion-request page. * * NO COLOUR VALUES LIVE HERE. They come from theme.css, which is generated from * mobile/src/theme/palette.ts by `npm run theme:build`. That file's own header records why: a colour * written down in two places drifts the first time somebody changes one in a hurry, and nothing * fails — it just looks wrong. A privacy policy that renders in last season's orange is a small * thing, but it is the same bug, and the generator already existed. * * ── Read on a PHONE, almost always ────────────────────────────────────────── * These pages are reached by tapping a link on a Play Store listing, or a row in the app. Nobody * opens a privacy policy on a desktop by choice. So this is sized for a handset first and simply * stops growing on anything wider, rather than being a desktop layout that survives being narrowed. * * ── No web fonts, no CDN, no script ───────────────────────────────────────── * A privacy policy that pulls a font from a third party hands that third party the IP address of * everyone who reads it, which is a poor joke on a page about not sharing data. System fonts only. * * ── Dark mode from the OS ─────────────────────────────────────────────────── * The app follows the phone's theme, and a link out of a dark screen onto a white page reads as a * different website. theme.css does the switching; there is no toggle and no state to remember. */ /* * theme.css is NOT imported here — each page links both stylesheets in its , in order. * * An @import costs an extra round trip (the browser must fetch this file, parse it, then discover * the second one), and an absolute `/theme.css` silently resolves to the drive root when somebody * opens the .html straight off disk to check a wording change. Two tags with relative paths * work identically whether the page is served by Caddy or double-clicked in a folder. */ * { box-sizing: border-box; } body { margin: 0; padding: 1.5rem 1.25rem 4rem; background: rgb(var(--color-bg)); color: rgb(var(--color-content)); font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; /* 17px, not 16: this is body text somebody has to read, on a phone, often outdoors. */ font-size: 17px; line-height: 1.6; /* Wide enough for a table, narrow enough that a line never runs past a comfortable measure. */ max-width: 44rem; margin-inline: auto; -webkit-text-size-adjust: 100%; } header { border-bottom: 1px solid rgb(var(--color-border)); padding-bottom: 1rem; margin-bottom: 1.5rem; /* The toggle sits at the right of the header, on the same line as the title where there is room and wrapping under it on a narrow phone. */ display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.5rem 1rem; } /* The title and the date take the width; the button is pushed to the far edge. */ header h1 { flex: 1 1 auto; } header .stamp { flex: 1 1 100%; order: 3; } /* * Injected by theme-toggle.js, so it does not exist if scripting is off — which is correct. The * page is entirely readable without it; the OS setting still applies. */ .theme-toggle { flex: 0 0 auto; order: 2; /* inline-flex so the icon and the word share a baseline and a gap, rather than the icon sitting on the text baseline with a space character between them. */ display: inline-flex; align-items: center; gap: 0.4rem; background: rgb(var(--color-surface)); color: rgb(var(--color-content-muted)); border: 1px solid rgb(var(--color-border)); border-radius: 999px; /* 0.5rem vertical on a 0.85rem font clears 32px of height; with the horizontal padding this is a comfortable tap target rather than a link-sized one. */ padding: 0.5rem 0.9rem; font: inherit; font-size: 0.85rem; cursor: pointer; } /* The SVG takes the button's colour through `stroke="currentColor"`, so it follows the theme and the hover state without a second rule. */ .theme-toggle svg { display: block; flex: 0 0 auto; } .theme-toggle:hover { color: rgb(var(--color-content)); border-color: rgb(var(--color-primary)); } h1 { font-size: 1.6rem; line-height: 1.25; margin: 0 0 0.35rem; } h2 { font-size: 1.15rem; margin: 2.25rem 0 0.5rem; line-height: 1.3; } p, li { color: rgb(var(--color-content-muted)); } /* The opening paragraph, at full contrast — it is the sentence that says what the page is. */ .lede { color: rgb(var(--color-content)); } .stamp { color: rgb(var(--color-content-subtle)); font-size: 0.9rem; margin: 0; } strong { color: rgb(var(--color-content)); } a { color: rgb(var(--color-primary)); /* Underlined, offset. A link in a legal document must LOOK like a link; removing the underline leaves colour as the only signal, which fails for a colour-blind reader. */ text-underline-offset: 0.15em; } ul { padding-left: 1.25rem; } li { margin-bottom: 0.4rem; } /* * A callout for the sentence that answers the question somebody arrived with. On the deletion page * that is the email address; on the policy it is "we share nothing". */ .note { background: rgb(var(--color-surface)); border: 1px solid rgb(var(--color-border)); border-left: 3px solid rgb(var(--color-primary)); border-radius: 8px; padding: 0.9rem 1rem; margin: 1.25rem 0; } .note p:first-child { margin-top: 0; } .note p:last-child, .note ul:last-child { margin-bottom: 0; } /* * Tables scroll INSIDE themselves rather than pushing the page sideways. A body that scrolls * horizontally on a phone is the commonest way a two-column table ruins a page. */ .scroll { overflow-x: auto; margin: 1rem 0; } table { border-collapse: collapse; width: 100%; font-size: 0.95rem; } th, td { text-align: left; vertical-align: top; padding: 0.55rem 0.75rem 0.55rem 0; border-bottom: 1px solid rgb(var(--color-border)); } th { color: rgb(var(--color-content)); font-weight: 600; } td { color: rgb(var(--color-content-muted)); } footer { margin-top: 3rem; padding-top: 1rem; border-top: 1px solid rgb(var(--color-border)); color: rgb(var(--color-content-subtle)); font-size: 0.9rem; }