/* ─────── Paperwrist design tokens ─────── */ :root { /* Color */ --pw-ink: #1B1B1F; --pw-ink-deep: #0A0A0C; --pw-accent-lift: #A88BFA; /* lifted tone for dark surfaces — 6.27:1 on #1C1C1E */ --pw-accent: #7049DF; /* light-surface accent — 5.66:1 on white */ /* White. The old bone (#F6F2EA) was WristBuddy's; on a product about reading, a plain white page is the right ground — it is what a page of paper actually is, and it stops the background competing with the screenshots, which are themselves near-white. */ --pw-paper: #FFFFFF; /* Text and glyphs sitting ON an ink-filled surface (buttons, the skip link, the active segmented-control pill). This used to be --pw-paper, which meant changing the page ground also changed every button label — split so the ground can be swapped freely. */ --pw-on-ink: #FFFFFF; /* Hairlines and card fills are tuned FOR white: on the old bone they could be fainter and still read. */ --pw-tint: rgba(27, 27, 31, 0.035); /* card / panel fill */ --pw-line: rgba(27, 27, 31, 0.11); /* Secondary copy (hero tagline, card descriptions, FAQ). 0.66 alpha over the ground; on the previous bone background that measured ~5.2:1, and on white it is ~5.9:1 — so moving to white only improved it. The dark-mode variant clears AA at ~7.6:1. */ --pw-mute: rgba(27, 27, 31, 0.66); --pw-mute-dark: rgba(242, 242, 247, 0.65); /* Type */ /* Inter first, then the platform UI face — the same construction obsidian.md uses. On macOS/iOS the system stack resolves to SF Pro and on Windows to Segoe UI Variable, both of which are close enough to Inter that the swap is invisible; everyone else downloads Inter. ui-sans-serif before system-ui is deliberate: it is the one that picks the UI-optimised optical size where the two differ. */ --pw-font: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; --pw-font-mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace; /* Layout */ --pw-radius: 14px; /* card / button radius */ --pw-radius-pill: 999px; --pw-maxwidth: 720px; /* readable column for the privacy doc */ } /* ═══════════════════════════════════════════════════════════════════ GROUND PRESETS — for trying background colours without editing code ═══════════════════════════════════════════════════════════════════ Every light surface on this site derives from --pw-paper (the ground) and --pw-tint (cards and panels), so changing those two changes the whole page coherently. --pw-on-ink is deliberately NOT in here: it is the colour of text sitting on dark fills, and it must not move with the ground. Two ways to try one: 1. A NAMED PRESET. In DevTools → Elements, select the element and add the attribute: data-pw-ground="bone" or, in the Console: document.documentElement.dataset.pwGround = 'bone' Clear it with: delete document.documentElement.dataset.pwGround Names below: white (default), bone, warm, cool, dim, ink. 2. ANY COLOUR AT ALL. In DevTools → Elements, select , find the `:root` rule in the Styles pane and click the swatch next to --pw-paper. The colour picker updates the page live, including an eyedropper for sampling a colour from anywhere on screen. Console equivalent: document.documentElement.style.setProperty('--pw-paper', '#F4F1EC') and to undo: document.documentElement.style.removeProperty('--pw-paper') Whatever you settle on, move it into `:root` below and delete the rest — these presets are a workbench, not a feature. Contrast note: --pw-mute is an ALPHA (0.66 of the ink over whatever is behind it), so it re-composites against any ground automatically. It clears WCAG AA down to roughly #E8E8E8; below that, body text starts to fail and the ground is too dark for a light theme. `dim` is at that edge on purpose, and `ink` is past it — it exists to show you what breaks, not to be shipped. ═══════════════════════════════════════════════════════════════════ */ :root[data-pw-ground="white"] { --pw-paper: #FFFFFF; --pw-tint: rgba(27, 27, 31, 0.035); } :root[data-pw-ground="bone"] { --pw-paper: #F6F2EA; --pw-tint: rgba(27, 27, 31, 0.045); } /* the WristBuddy ground */ :root[data-pw-ground="warm"] { --pw-paper: #FCFAF6; --pw-tint: rgba(27, 27, 31, 0.040); } :root[data-pw-ground="cool"] { --pw-paper: #F8F9FB; --pw-tint: rgba(27, 27, 31, 0.045); } :root[data-pw-ground="dim"] { --pw-paper: #ECECEE; --pw-tint: rgba(27, 27, 31, 0.055); } :root[data-pw-ground="ink"] { --pw-paper: #1B1B1F; --pw-tint: rgba(255, 255, 255, 0.05); } /* ─────── Base ─────── */ html, body { margin: 0; padding: 0; } body { font-family: var(--pw-font); font-weight: 400; font-size: 17px; line-height: 1.6; background: var(--pw-paper); color: var(--pw-ink); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; /* cv11 gives Inter the single-storey "a"-free lowercase g and a disambiguated 1/l/I — the OpenType features the face was drawn with UI legibility in mind for. Harmless where the fallback lacks them. */ font-feature-settings: "cv11", "ss01"; text-rendering: optimizeLegibility; } /* ─────── Typography ─────── */ /* Headings are SEMIBOLD (600), not black (800). Inter at 600 with negative tracking is the obsidian.md voice: confident without shouting. The tracking tightens as the size grows, because optical letter-spacing has to come off at display sizes or the word falls apart — Obsidian runs -1.2px at 60px, which is the -0.02em below. */ h1, h2, h3, h4 { font-weight: 600; letter-spacing: -0.021em; line-height: 1.14; margin: 1.6em 0 0.5em; text-wrap: balance; } h1 { font-size: 46px; line-height: 1.04; letter-spacing: -0.028em; } h2 { font-size: 28px; line-height: 1.16; letter-spacing: -0.020em; } h3 { font-size: 19px; letter-spacing: -0.012em; } p { margin: 0.75em 0; max-width: var(--pw-maxwidth); text-wrap: pretty; } /* 600, not 700: in Inter, semibold is the weight that reads as emphasis inside a 400 paragraph without turning into a second heading. */ strong { font-weight: 600; } em { font-style: italic; } a { color: var(--pw-accent); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; transition: color 0.12s; } a:hover { color: var(--pw-ink); } code, pre { font-family: var(--pw-font-mono); font-size: 14px; background: rgba(27, 27, 31, 0.05); border-radius: 6px; } code { padding: 2px 6px; } pre { padding: 14px 16px; overflow-x: auto; } ul, ol { padding-left: 1.4em; max-width: var(--pw-maxwidth); } li { margin: 0.35em 0; } hr { border: 0; border-top: 1px solid var(--pw-line); margin: 2.4em 0; } /* ─────── Tables (extension — policy uses two) ─────── */ table { width: 100%; max-width: var(--pw-maxwidth); border-collapse: collapse; margin: 1.2em 0; font-size: 15px; } th, td { text-align: left; vertical-align: top; padding: 10px 12px; border-bottom: 1px solid var(--pw-line); } th { font-weight: 600; font-size: 13px; letter-spacing: 0.02em; text-transform: uppercase; color: var(--pw-mute); border-bottom: 1.5px solid var(--pw-line); } tbody tr:last-child td { border-bottom: none; } /* ─────── Layout shell ─────── */ .pw-page { max-width: 880px; margin: 0 auto; padding: 56px 24px 96px; } /* ─────── Site header ─────── */ .pw-header { display: flex; align-items: center; gap: 14px; margin-bottom: 36px; } .pw-header img.logo { width: 44px; height: 44px; border-radius: 10px; } .pw-header .brand { display: flex; align-items: center; gap: 14px; text-decoration: none; } .pw-header .name { font-weight: 700; font-size: 22px; letter-spacing: -0.022em; line-height: 1; color: var(--pw-ink); text-decoration: none; } .pw-header .name .accent { color: var(--pw-accent); } .pw-header .actions { margin-left: auto; display: flex; gap: 8px; align-items: center; } /* ─────── Language switcher (native