/* ============================================================ Shared styling for the onboarding pages — the neighborhood picker and the join page. ⚠️ LOADED ON TOP OF styles.css, WHICH IS NOT MODIFIED. The front page took six rounds of tightening and is live; these files add only new selectors so that editing onboarding can never move the front page. They reuse that file's tokens (--accent-text, --surface, --text-2 …) rather than defining their own — if the accent changes, it changes there. ⚠️ THIS FILE EXISTS SO THE TWO PAGES CANNOT DRIFT. Both load it, then their own sheet for what is genuinely theirs. Put anything both pages use HERE, not in one and then the other: duplicated selectors across two stylesheets is how a button ends up two different sizes. Same rules as the rest of the project: • type in rem, never px • 44px minimum touch targets • light/dark by system setting, no toggle • no inline styles anywhere, so the strict CSP holds ⚠️ CONTRAST WAS MEASURED, NOT EYEBALLED — and one result decided the button style. A filled accent button with white text FAILS in dark mode: --accent-text is #688eff there and white on it measures 3.04:1, well under the 4.5:1 floor. That is this project's worst documented bug, and it is invisible to anyone reviewing light-mode screenshots. So the primary button is filled with --text on --bg instead: 17.0:1 light, 19.3:1 dark. ⚠️ Don't "brand" it by swapping in the accent. ============================================================ */ .hidden { display: none; } /* ---------- header ---------- */ /* ⚠️ THE MARBLE BELONGS ON THESE PAGES, and not only for looks. The join page asks a relative to trust a link and then hand a password to the next screen — it must be unmistakably Small World. A page missing its own logo is exactly what a fake looks like. It is smaller than the front page's so the actual choice still clears the fold on a phone, where a browser tab gives about 600px of content, not 812. */ .brand-inner { margin-bottom: 2rem; } /* 🔴 THE MARBLE'S RING IS DRAWN HERE, IN CSS, AND MUST NOT GO BACK INTO marble.svg. It used to be a inside the file, coloured by an internal `@media (prefers-color-scheme: dark)`. ⚠️ SAFARI DOES NOT APPLY prefers-color-scheme INSIDE AN SVG LOADED VIA — the image renders in an isolated context that never learns the page's colour scheme. So in dark mode the ring kept its LIGHT value (#1c1c1e) and became a near-black circle on a near-black page, on all three onboarding pages. ⚠️ IT REPRODUCES ONLY IN SAFARI. Chromium honours the media query, so this looks perfectly fine in most dev tooling — it was caught by comparing a real screenshot against the app. Drawing the ring as a border makes it a PAGE-level colour: it follows --text, matching the app and the home page (both of which use stroke="currentColor" on an INLINE svg, which is why neither was affected), and it can never drift from the text beside it. ⚠️ The width is 3.2/132 of the box — the stroke-width and viewBox the artwork was drawn with — expressed in rem so it scales with the reader's text like everything else. */ .brand-inner .brand-mark { display: block; width: 3.5rem; /* rem, so it grows with the reader's text */ height: 3.5rem; margin: 0 auto .5rem; border: .085rem solid var(--text); border-radius: 50%; } .brand-inner .brand-mark img { width: 100%; height: 100%; display: block; } .brand-inner .wordmark { font-size: 1.6rem; } /* ⚠️ "neighborhood" IS TWELVE CHARACTERS AND IT DOES NOT FIT. At the browser's 200% text setting the word measures 349px inside a 310px column and paints to the very edge of a 390px screen — no scrollbar, so nothing catches it, but it is flush against the bezel and would clip on a narrower phone. Measured 2026-08-03. hyphens:auto breaks it as "neigh-borhood" (the is what makes that work); overflow-wrap is the fallback for any word the hyphenation dictionary doesn't know. ⚠️ One page's heading is literally that word, so don't remove these. */ h1 { font-size: 1.75rem; font-weight: 700; letter-spacing: -.02em; line-height: 1.2; margin: 0 0 .5rem; text-wrap: balance; hyphens: auto; overflow-wrap: break-word; } .lead-2 { font-size: 1.0625rem; color: var(--text-2); margin: 0 0 1.75rem; } .quiet { color: var(--text-3); font-size: .95rem; } .warn { margin-top: 1rem; color: var(--text-2); font-size: .95rem; } /* ---------- buttons ---------- */ .actions { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; margin-top: 1.25rem; } .actions-go { margin-top: 1.75rem; } .btn { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; /* the project's touch-target floor */ font: inherit; font-weight: 600; border: 1px solid transparent; border-radius: 12px; padding: .6rem 1.25rem; cursor: pointer; text-decoration: none; } /* ⚠️ Filled with --text, NOT the accent. See the contrast note at the top of this file. */ .btn-primary { background: var(--text); color: var(--bg); } .btn-quiet { background: var(--surface); color: var(--text); border-color: var(--separator); } .btn-quiet:disabled { color: var(--text-3); cursor: default; } .linklike { font: inherit; background: none; border: 0; padding: 0; min-height: 44px; color: var(--accent-text); text-decoration: underline; cursor: pointer; } .note .linklike { min-height: 0; } .copy-said { color: var(--text-3); font-size: .95rem; } /* ⚠️ Visible focus is not optional — these pages can be walked entirely by keyboard. Page-specific controls add themselves to this list in their own stylesheet. */ .btn:focus-visible, .linklike:focus-visible { outline: 2px solid var(--accent-text); outline-offset: 2px; } /* ---------- numbered steps ---------- */ /* ⚠️ ONE RULE FOR .steps-head, not two. It was briefly defined in two places in the same file (hyphenation here, spacing there) — harmless only because the properties happened not to overlap. This repo's duplicate-selector trap has fired four times; see decisions/testing-traps.md. Keep it in one block. */ .steps-head { margin-top: 2.5rem; font-size: 1.2rem; hyphens: auto; overflow-wrap: break-word; } .steps { margin: 0; padding-left: 1.35rem; } .steps li { margin-bottom: 1rem; padding-left: .25rem; } .steps li:last-child { margin-bottom: 0; } .steps b { font-weight: 650; } /* The "and don't do this" half of a step, quieter than the instruction itself. */ .steps .sub { display: block; margin-top: .25rem; color: var(--text-2); font-size: .95rem; } @media (min-width: 40rem) { .brand-inner .wordmark { font-size: 1.8rem; } h1 { font-size: 2rem; } }