From 8b6c798dbf5ed93f1e710e8a7f25427f056cfb4b Mon Sep 17 00:00:00 2001 From: anikamw <147226875+anikamw@users.noreply.github.com> Date: Sun, 14 Jun 2026 19:46:22 -0700 Subject: [PATCH 1/3] feat(ui): reskin entire site to Apple web design language (ADR-0022) Founder direction: rebuild the whole site in Apple's web design language. Comprehensive reskin (styling only) superseding ADR-0019's Trust & Authority system. - foundation: Apple token set (label #1d1d1f, secondaryLabel #6e6e73, accent #0071e3, surface #f5f5f7, separator #d2d2d7), SF SYSTEM-FONT stack (EB Garamond + Lato retired -> no web-font fetch), generous spacing, rounded cards, pill primary buttons; tailwind.config + global.css + BaseLayout + Footer/Disclaimer/ConsentBanner restyled. ADR-0022 records it. - pages: home, corridor page + no-JS static guide, the plan island (CorridorApp.tsx: intake, disclaimer modal, journey map, canton panel, task cards, momentum, sidebar), and legal/about/contact all reskinned to match the approved Apple-web mockups. - a11y: contrast lifted to AA (tertiaryLabel #6b6b70 5.30:1; placeholders -> secondaryLabel 5.07:1), 44px hit targets, scalable type ramp (no hardcoded micro-px). Dark mode deferred (tokens dark-ready). Styling only: zero content/copy/YAML/provenance/logic changes. All trust UI preserved (Verified badge, Source + last-verified lines, disclaimer modal gate, journey map, canton panel, Sources & legal-notes fold, Impressum, route-not-covered + Russia notices). Verified: astro check 0; build + provenance gate (15 pages); 281/281 tests; apple-hig design-reviewer PASS; confirmed live (Playwright). Co-Authored-By: Claude Opus 4.8 (1M context) --- DECISIONS.md | 23 + FOUNDER-TLDR.md | 12 + ROADMAP.md | 2 +- src/components/ConsentBanner.tsx | 38 +- src/components/CorridorApp.tsx | 554 +++++++++---------- src/components/Disclaimer.astro | 2 +- src/layouts/BaseLayout.astro | 28 +- src/pages/[origin]/[destination]/index.astro | 52 +- src/pages/about.astro | 95 ++-- src/pages/contact.astro | 59 +- src/pages/cookie-policy.astro | 182 +++--- src/pages/impressum.astro | 192 ++++--- src/pages/index.astro | 37 +- src/pages/privacy.astro | 475 ++++++++-------- src/pages/terms.astro | 231 ++++---- src/styles/global.css | 61 +- tailwind.config.mjs | 124 ++++- 17 files changed, 1205 insertions(+), 962 deletions(-) diff --git a/DECISIONS.md b/DECISIONS.md index ff08b25..dc8089b 100644 --- a/DECISIONS.md +++ b/DECISIONS.md @@ -620,3 +620,26 @@ Add an optional **canton dimension**, scoped to Switzerland for now: ### Consequences - Canton selection works immediately via the fallback; authored cantons enrich the panel. Only VERIFIED canton claims may publish (gate-enforced). Scaffold verified: `astro check` 0 errors, 277 tests. - A future "add a canton" = add an entry to a corridor's `cantons` (like adding a task) — sourced + fact-verified + founder-gated. Non-CH corridors are unaffected (no canton step). + +--- + +## ADR-0022 — Apple web design language (supersedes ADR-0019) + +**Date:** 2026-06-14 +**Status:** Accepted +**Decided by:** Founder (Anika Williams) — requested an Apple-style reskin + +### Context +The founder asked to move the customer-facing UI from the ADR-0019 "Trust & Authority" system (navy `#0F172A`, CTA `#0369A1`, self-hosted **EB Garamond** display + **Lato** body) to **Apple's web design language** — system font, Apple systemBlue accent, generous whitespace, pill CTAs, card radii. This is a visual-language change only; the accuracy/provenance/compliance machinery is untouched. + +### Decision +Adopt the Apple web token set as the single foundation for all customer-facing UI. **Tokens (light):** label `#1d1d1f`, secondaryLabel `#6e6e73`, tertiaryLabel `#86868b`, accent/systemBlue `#0071e3` (hover `#0066cc`), surface `#f5f5f7`, card `#ffffff`, separator `#d2d2d7`, success `#34C759`/`#248a3d` (text), warning soft `#fff8e6` bg + `#7a5b00` text, danger `#FF3B30`/`#d70015` (text). Exposed as CSS custom properties in `global.css` and as semantic Tailwind names (`label`, `secondaryLabel`, `surface`, `card`, `separator`, `accent`, `link`, `success`, `danger`, `warning.soft`). Names are **dark-mode-ready** (CSS vars + `darkMode: 'class'`) but **only light values are defined — no dark theme is built yet.** **Typography:** the SF system stack (`-apple-system, BlinkMacSystemFont, 'SF Pro Text', 'SF Pro Display', 'Helvetica Neue', Arial, system-ui, sans-serif`); heading weights up to 600 (Apple semibold). **EB Garamond + Lato retired** (no `@fontsource` import / `` / preload remains; font files left on disk, unreferenced — zero web-font fetch). **Spacing/radii:** Apple rhythm — inputs `rounded-field` (12px), cards `rounded-card` (18px), primary CTAs `rounded-pill` (980px). + +### Implementation notes +- **The legacy `brand-*` scale was REMAPPED in place to the Apple systemBlue family** rather than ripped out of ~80 call sites across `CorridorApp.tsx`, `index.astro`, and the corridor page. `brand-600` = `#0071e3` (white text 4.70:1, AA), `brand-700` = `#0066cc` (5.57:1), `brand-800` = `#0058b0`, `brand-900` = `#00428a`; light fills `brand-50/100` retuned to match. Every existing CTA/link/ring keeps working and now renders Apple blue. `font-serif` is aliased to the same SF stack so legacy display headings render without pulling a serif web font. +- **Shared chrome restyled to the tokens:** `BaseLayout` (white canvas, system font, surface footer, separator borders), `Footer` (inline in BaseLayout), `Disclaimer` (soft-warning callout), `ConsentBanner` (card, pill buttons, accent focus rings, native `accent-color`). Content/links/ARIA/Impressum/height-publishing logic all unchanged. +- Contrast re-verified at every used stop (AA): label on surface 15.46:1; secondaryLabel on white 5.07:1, on surface 4.66:1; white on accent 4.70:1; brand-700 link on brand-50 fill 4.92:1; soft-warning text on soft-warning bg 5.96:1. + +### Scope / caveats +- **Styling only. All trust/content invariants preserved:** the "Verified against official sources" badge, per-task Source line + last-verified date, "not legal advice" notice, the focus-trapped post-intake disclaimer **modal gate**, the "Sources & legal notes" fold, footer Impressum, and the route-not-covered + Russia-sanctions notices all remain — only their classes changed. Zero `src/content/` edits; no claim/provenance/disclaimer wording changed; the no-JS static guide and SEO/zero-JS-default posture are intact. Astro's React-islands-only model is unchanged. +- `frontend-engineer` is pinned to `claude-fable-5`, unavailable in this environment — implemented on Opus 4.8 (CLAUDE.md's designated fallback). diff --git a/FOUNDER-TLDR.md b/FOUNDER-TLDR.md index 1bc1757..0d06fc8 100644 --- a/FOUNDER-TLDR.md +++ b/FOUNDER-TLDR.md @@ -10,6 +10,18 @@ coming next. Newest updates are at the top. --- +## 2026-06-14 — The whole site got a clean, Apple-style redesign + +**What changed.** We re-dressed the *entire* website in Apple's design language — the same calm look-and-feel principles Apple uses on its own site. Clean typography using the system font your device already has (so there's nothing extra to download), Apple's restrained colour palette, lots of breathing room, rounded cards, and the signature pill-shaped buttons — across the home page, the questionnaire, the plan, and the legal pages. It's a fresh coat of paint only: every word, fact, source link, the "Verified against official sources" badge, the disclaimer pop-up, and the journey map all work exactly as before. We retired the old custom fonts, so the site fetches nothing from Google and loads a touch faster. We also tightened readability and tap-target sizes so it's easier to use for everyone. + +**Why it matters.** A calmer, more familiar, more professional look builds trust — which counts for a lot when people are making life-changing decisions on these pages — and the lighter setup helps speed and privacy. + +**What you'd notice today.** The site looks noticeably cleaner and more modern end to end — same content, much calmer presentation. (Review copy — **not live**.) + +**What's next.** Your review; a dark-mode version could follow. + +--- + ## 2026-06-14 — Plain English everywhere: the legal codes are gone from what you read **What changed.** We stripped the law-and-statute jargon out of everything you actually *read* in a Switzerland plan. No more "Art. 30 para. 1 let. b FNIA" or "Arts. 42-44" tucked inside the sentences — the steps, titles, summaries and warnings now say it in plain English ("this is a decision the canton makes at its discretion — you have no automatic right" instead of an article number). The official law sources did **not** disappear: they're moved into a "Sources & legal notes" dropdown on each step, so "Verified against official sources" still holds. We kept the real legal meaning exactly — whether something is your *right* or the authorities' *discretion* — only the code-numbers are gone. diff --git a/ROADMAP.md b/ROADMAP.md index d991a44..5037394 100644 --- a/ROADMAP.md +++ b/ROADMAP.md @@ -6,7 +6,7 @@ > > Legend: ✅ done · 🚧 in progress · ⏳ planned · 🔁 ongoing · 🗓️ backlog -Last updated: 2026-06-14 (Plain-language reading surface (founder mandate "no legal jargon"): all statute/act/article/SR-code citations (FNIA, ASEO, VZAE, OASA, "Art. 30 para. 1 let. b", "Arts. 42-44", SR 142.20, "concubinage") removed from us-ch's DEFAULT-VISIBLE prose (titles, summary/tldr, step text/tips, warnings, document descriptions) and rewritten in plain English — the entitlement-vs-discretion meaning preserved in substance; the law-named per-step source links moved into the collapsed "Sources & legal notes" fold (the actionable canton-office link stays inline); precise citations remain in keyFacts/detail/source links (the Reference/Sources folds), so provenance + "verified against official sources" hold. Two-agent: content-researcher rewrote → fact-verifier independently confirmed no jargon remains + meaning preserved + provenance untouched (VERIFICATION_LOG 2026-06-14); compliance PASS; astro check 0 / build+gate (15 pages) / 281 tests. Scope: us-ch; other 7 corridors' prose to follow. Interactive "journey map" + pure-state gamification (design-research-led; builds on the calmer-UI branch; stacked on it): the flat "Your journey" sidebar list is now a connected, chapter-grouped VISUAL PATH (chapters from an authored category→chapter map in `src/utils/journeyChapters.ts`: Before you go / Your permit / After you arrive / Settling in), each node carrying its real state (done/available/current/locked) from `statusFor()` + a per-node document meter from `docProgress()`; available nodes are clickable, LOCKED nodes stay readable (only Mark-done gated) and show the SPECIFIC "Unlocks after: …" prerequisite from `dependsOn`. Plus a per-task document meter on the card, an instant motivation micro-confirmation, a non-punitive "Welcome back" continuity line, and per-chapter milestone notes extending the existing momentum toast. Everything is a pure projection of existing state — NO dark patterns (no streaks/countdowns/points/false-approval), enforced by a unit test (`tests/journeyChapters.test.ts`) that BANS outcome/approval words in chapter copy. Disclaimer modal gate + provenance + Impressum + Russia/route-not-covered notices untouched; prefers-reduced-motion respected; keyboard-accessible nodes. Verified: astro check 0 / build+gate (15 pages) / 281 tests; a11y PASS (WCAG 2.2 AA audited); trust/dark-pattern review PASS. Deferred: endowed head-start pre-credit, wizard auto-advance, interactive canton map (needs sourced boundary geometry). Calmer/encouraging UI overhaul (design-research-led; pending human-lawyer sign-off): removed the gold "not legal advice" banner everywhere; after the intake a REQUIRED disclaimer modal gate (role=dialog, focus-trapped, no bypass, compliance-owned wording single-sourced in `src/utils/disclaimer.ts`, acked in localStorage `rg-disclaimer-ack-v1`) must be confirmed before the plan renders — also gates shared-link opens; task cards re-sequenced action-first (tldr→steps→documents) with key facts/legal citations/detail behind one "Reference" fold and the caveats consolidated into one "Sources & legal notes" fold (a short "not legal advice" line stays always-visible per card per compliance); plain-language intake options (dropped L/B/C permit codes & "concubinage"); stable phase-based progress ("Your route→situation→details") with progressbar a11y; warm all-breakpoint intro; quiet per-step momentum + calmer document gate. Disclaimer still in the modal + footer (every page) + per-card + Impressum + no-JS guide. Compliance verdict: CONDITIONAL — the modal-acknowledgement posture (vs a persistent banner) needs human-lawyer sign-off before merge; astro check 0 / build+gate / 277 tests green; a11y reviewed (modal focus-trap OK). Cantonal fee/timeline transparency: 12 us-ch steps that have no single federal fee/processing-time figure (the employer-sponsored work permit, the family-reunification routes, the retirement permit, the study permits/sub-steps) now show a user-facing "Fees & processing time" note that these are set by the canton — or, for study admission, the institution — and to confirm locally; driven by a presentation-only `localCostTimeline` task hint (no invented numbers, no new sourced claims, ADR-0007/ADR-0021), plus a "varies by canton" caveat now always shown in the "Your canton" panel. Canton-aware plan-step links: the six "apply at / contact your cantonal authority of the canton where you live/study" steps (family reunification ×3, unmarried-partner concubinage, retirement, study) now deep-link the user's *selected* canton's own migration office (ZH Migrationsamt, GE OCPM, VD SPOP, ZG, BS) instead of the federal SEM directory of all 26 — falling back to that directory for not-yet-sourced cantons, so no dead ends. A `StepLinkSchema.cantonOffice` rendering hint (asserts no fact, no provenance) drives a frontend-only swap to the already-VERIFIED canton migrationOffice claim; static SSR full-guide stays federal (can't know the canton). Build/gate/`astro check`/277 tests green; fact-verifier (accurate, no overreach) + provenance-integrity verified; ADR-0021. Outbound links: the written-guide's 109 external source links now open in a new tab (target=_blank + rel=noopener noreferrer), matching the planner — readers don't lose their place. Plan UI: the desktop plan sidebar (progress / answers / journey) is now collapsible (Hide/Show), giving the task panel full width; mobile already had this. Canton dimension for Switzerland (ADR-0021): corridor-embedded `cantons` schema + provenance gate; CH-only "which canton?" intake step (searchable combobox over 26 cantons, optional) + `cn` share-param + "Your canton" plan panel with a verified SEM-directory fallback; per-canton sourced detail for ZH/GE/VD/ZG/BS in the two-agent pipeline. Earlier: Link audit: all 950 source links render-checked — 147 good, 23 Fedlex "under preparation" links flagged + the us-ch fix applied (79 occurrences → static-HTML, independently fact-verifier re-verified; re-audit now 0 suspect / 170 good). The weekly link-auditor now also checks anchor-reach — a `#article` link that loads but whose section never renders (SPA shell) goes RED on SPA domains (fedlex-class regressions); france-visas added to manual-check (403s the bot, fine for users). Live run: 0 errors / 142 URLs. Plan-personalisation correctness: "Who's joining you?" companion multi-select (partner/children/"It's just me") replaces the children yes/no; family/dependant steps gated to who is actually coming; full-guide route labels; cross-corridor plan-correctness regression suite — ADR-0020. UI/UX "Trust & Authority" design system adopted — audit fixes 1–10: AA-contrast CTAs, 44px touch targets, readable legal text, EB Garamond + Lato self-hosted fonts, brand tokens, consent-overlap fix, home/wizard trust framing, plus polish 11–13 (SVG icons, consistent focus rings, tighter line-length); ADR-0019. Earlier: 8 corridors published + intake availability dots, ADR-0018; source-snapshot cache, ADR-0017; corridor production via agent teams in two runs, ADR-0016; all-routes intake + launch waitlist, ADR-0015; launch-readiness drafts, og:image, dormant consent+analytics, ADR-0013; us-ch founder approval, ADR-0014; go-live blocked on domain + lawyer review) +Last updated: 2026-06-14 (Apple web design-language reskin (ADR-0022, supersedes ADR-0019; founder direction): the ENTIRE site (home, corridor page + no-JS guide, the plan island, legal/about/contact, shared chrome) reskinned to Apple's web design language — SF system-font stack (EB Garamond/Lato retired → no web-font fetch), Apple token set (label #1d1d1f, secondaryLabel #6e6e73, accent #0071e3, surface #f5f5f7, separator #d2d2d7), generous whitespace, rounded cards, pill primary buttons. Styling-only: zero content/YAML/provenance/logic changes; all trust UI preserved (Verified badge, Source + last-verified lines, disclaimer modal gate, journey map, canton panel, Sources & legal-notes fold, Impressum, route-not-covered + Russia notices). A11y: contrast lifted to AA (tertiaryLabel #6b6b70 = 5.30:1; placeholders → secondaryLabel 5.07:1), 44px hit targets, scalable type ramp (no hardcoded micro-px); apple-hig design-reviewer PASS. Dark mode deferred (tokens dark-ready). astro check 0 / build + gate (15 pages) / 281 tests; verified live (Playwright). Plain-language reading surface (founder mandate "no legal jargon"): all statute/act/article/SR-code citations (FNIA, ASEO, VZAE, OASA, "Art. 30 para. 1 let. b", "Arts. 42-44", SR 142.20, "concubinage") removed from us-ch's DEFAULT-VISIBLE prose (titles, summary/tldr, step text/tips, warnings, document descriptions) and rewritten in plain English — the entitlement-vs-discretion meaning preserved in substance; the law-named per-step source links moved into the collapsed "Sources & legal notes" fold (the actionable canton-office link stays inline); precise citations remain in keyFacts/detail/source links (the Reference/Sources folds), so provenance + "verified against official sources" hold. Two-agent: content-researcher rewrote → fact-verifier independently confirmed no jargon remains + meaning preserved + provenance untouched (VERIFICATION_LOG 2026-06-14); compliance PASS; astro check 0 / build+gate (15 pages) / 281 tests. Scope: us-ch; other 7 corridors' prose to follow. Interactive "journey map" + pure-state gamification (design-research-led; builds on the calmer-UI branch; stacked on it): the flat "Your journey" sidebar list is now a connected, chapter-grouped VISUAL PATH (chapters from an authored category→chapter map in `src/utils/journeyChapters.ts`: Before you go / Your permit / After you arrive / Settling in), each node carrying its real state (done/available/current/locked) from `statusFor()` + a per-node document meter from `docProgress()`; available nodes are clickable, LOCKED nodes stay readable (only Mark-done gated) and show the SPECIFIC "Unlocks after: …" prerequisite from `dependsOn`. Plus a per-task document meter on the card, an instant motivation micro-confirmation, a non-punitive "Welcome back" continuity line, and per-chapter milestone notes extending the existing momentum toast. Everything is a pure projection of existing state — NO dark patterns (no streaks/countdowns/points/false-approval), enforced by a unit test (`tests/journeyChapters.test.ts`) that BANS outcome/approval words in chapter copy. Disclaimer modal gate + provenance + Impressum + Russia/route-not-covered notices untouched; prefers-reduced-motion respected; keyboard-accessible nodes. Verified: astro check 0 / build+gate (15 pages) / 281 tests; a11y PASS (WCAG 2.2 AA audited); trust/dark-pattern review PASS. Deferred: endowed head-start pre-credit, wizard auto-advance, interactive canton map (needs sourced boundary geometry). Calmer/encouraging UI overhaul (design-research-led; pending human-lawyer sign-off): removed the gold "not legal advice" banner everywhere; after the intake a REQUIRED disclaimer modal gate (role=dialog, focus-trapped, no bypass, compliance-owned wording single-sourced in `src/utils/disclaimer.ts`, acked in localStorage `rg-disclaimer-ack-v1`) must be confirmed before the plan renders — also gates shared-link opens; task cards re-sequenced action-first (tldr→steps→documents) with key facts/legal citations/detail behind one "Reference" fold and the caveats consolidated into one "Sources & legal notes" fold (a short "not legal advice" line stays always-visible per card per compliance); plain-language intake options (dropped L/B/C permit codes & "concubinage"); stable phase-based progress ("Your route→situation→details") with progressbar a11y; warm all-breakpoint intro; quiet per-step momentum + calmer document gate. Disclaimer still in the modal + footer (every page) + per-card + Impressum + no-JS guide. Compliance verdict: CONDITIONAL — the modal-acknowledgement posture (vs a persistent banner) needs human-lawyer sign-off before merge; astro check 0 / build+gate / 277 tests green; a11y reviewed (modal focus-trap OK). Cantonal fee/timeline transparency: 12 us-ch steps that have no single federal fee/processing-time figure (the employer-sponsored work permit, the family-reunification routes, the retirement permit, the study permits/sub-steps) now show a user-facing "Fees & processing time" note that these are set by the canton — or, for study admission, the institution — and to confirm locally; driven by a presentation-only `localCostTimeline` task hint (no invented numbers, no new sourced claims, ADR-0007/ADR-0021), plus a "varies by canton" caveat now always shown in the "Your canton" panel. Canton-aware plan-step links: the six "apply at / contact your cantonal authority of the canton where you live/study" steps (family reunification ×3, unmarried-partner concubinage, retirement, study) now deep-link the user's *selected* canton's own migration office (ZH Migrationsamt, GE OCPM, VD SPOP, ZG, BS) instead of the federal SEM directory of all 26 — falling back to that directory for not-yet-sourced cantons, so no dead ends. A `StepLinkSchema.cantonOffice` rendering hint (asserts no fact, no provenance) drives a frontend-only swap to the already-VERIFIED canton migrationOffice claim; static SSR full-guide stays federal (can't know the canton). Build/gate/`astro check`/277 tests green; fact-verifier (accurate, no overreach) + provenance-integrity verified; ADR-0021. Outbound links: the written-guide's 109 external source links now open in a new tab (target=_blank + rel=noopener noreferrer), matching the planner — readers don't lose their place. Plan UI: the desktop plan sidebar (progress / answers / journey) is now collapsible (Hide/Show), giving the task panel full width; mobile already had this. Canton dimension for Switzerland (ADR-0021): corridor-embedded `cantons` schema + provenance gate; CH-only "which canton?" intake step (searchable combobox over 26 cantons, optional) + `cn` share-param + "Your canton" plan panel with a verified SEM-directory fallback; per-canton sourced detail for ZH/GE/VD/ZG/BS in the two-agent pipeline. Earlier: Link audit: all 950 source links render-checked — 147 good, 23 Fedlex "under preparation" links flagged + the us-ch fix applied (79 occurrences → static-HTML, independently fact-verifier re-verified; re-audit now 0 suspect / 170 good). The weekly link-auditor now also checks anchor-reach — a `#article` link that loads but whose section never renders (SPA shell) goes RED on SPA domains (fedlex-class regressions); france-visas added to manual-check (403s the bot, fine for users). Live run: 0 errors / 142 URLs. Plan-personalisation correctness: "Who's joining you?" companion multi-select (partner/children/"It's just me") replaces the children yes/no; family/dependant steps gated to who is actually coming; full-guide route labels; cross-corridor plan-correctness regression suite — ADR-0020. UI/UX "Trust & Authority" design system adopted — audit fixes 1–10: AA-contrast CTAs, 44px touch targets, readable legal text, EB Garamond + Lato self-hosted fonts, brand tokens, consent-overlap fix, home/wizard trust framing, plus polish 11–13 (SVG icons, consistent focus rings, tighter line-length); ADR-0019. Earlier: 8 corridors published + intake availability dots, ADR-0018; source-snapshot cache, ADR-0017; corridor production via agent teams in two runs, ADR-0016; all-routes intake + launch waitlist, ADR-0015; launch-readiness drafts, og:image, dormant consent+analytics, ADR-0013; us-ch founder approval, ADR-0014; go-live blocked on domain + lawyer review) > **Current focus:** USA → Switzerland (`us-ch`) **only**, until it is perfected end-to-end. > All other corridors are deferred (see DECISIONS.md **ADR-0006**). India → Germany (`in-de`) diff --git a/src/components/ConsentBanner.tsx b/src/components/ConsentBanner.tsx index 30f1860..2e270dd 100644 --- a/src/components/ConsentBanner.tsx +++ b/src/components/ConsentBanner.tsx @@ -98,20 +98,20 @@ export default function ConsentBanner() { role="dialog" aria-modal="false" aria-labelledby="consent-title" - className="mx-auto max-w-3xl rounded-xl border border-slate-300 bg-white p-5 shadow-xl" + className="mx-auto max-w-3xl rounded-card border border-separator bg-card p-5 shadow-xl" > - {view === 'banner' ? ( <> -

+

Your planner answers stay in your browser. We'd also like to measure usage to improve the guidance. Privacy-friendly, cookieless analytics run by default; optional cookie-based analytics and any future ads load only if you agree. See our{' '} - + Cookie policy . @@ -120,21 +120,21 @@ export default function ConsentBanner() { @@ -142,7 +142,7 @@ export default function ConsentBanner() { ) : ( <> -

+

Choose which optional technologies to allow. You can change this any time from "Cookie settings" in the footer.

@@ -153,11 +153,11 @@ export default function ConsentBanner() { checked disabled aria-label="Strictly necessary (always on)" - className="mt-1 h-4 w-4" + className="mt-1 h-4 w-4 accent-accent" /> - Strictly necessary - + Strictly necessary + Remembers your planner answers and these choices, on your device. Always on. @@ -168,11 +168,11 @@ export default function ConsentBanner() { type="checkbox" checked={analytics} onChange={(e) => setAnalytics(e.target.checked)} - className="mt-1 h-4 w-4" + className="mt-1 h-4 w-4 accent-accent" /> @@ -183,11 +183,11 @@ export default function ConsentBanner() { type="checkbox" checked={advertising} onChange={(e) => setAdvertising(e.target.checked)} - className="mt-1 h-4 w-4" + className="mt-1 h-4 w-4 accent-accent" /> @@ -197,14 +197,14 @@ export default function ConsentBanner() { diff --git a/src/components/CorridorApp.tsx b/src/components/CorridorApp.tsx index 41f55f0..dac05fa 100644 --- a/src/components/CorridorApp.tsx +++ b/src/components/CorridorApp.tsx @@ -602,34 +602,25 @@ function OptionCard({ disabled={disabled} aria-pressed={selected} onClick={onClick} - className={`w-full min-h-11 border rounded-xl p-4 text-left transition-all focus-visible:ring-2 focus-visible:ring-brand-500 ${ + className={`w-full min-h-11 border rounded-field p-4 text-left transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent ${ disabled - ? 'border-slate-100 bg-slate-50 opacity-50 cursor-not-allowed' + ? 'border-separator bg-surface opacity-50 cursor-not-allowed' : selected - ? 'border-brand-600 bg-brand-50' - : 'border-slate-200 bg-white hover:border-brand-300' + ? 'border-accent bg-brand-50' + : 'border-separator bg-white hover:border-accent' }`} > - {label} - {description && {description}} + {label} + {description && {description}} ); } function CategoryBadge({ category }: { category: string }) { - const colors: Record = { - 'visa-permit': 'bg-blue-50 text-blue-700', - employment: 'bg-orange-50 text-orange-700', - housing: 'bg-purple-50 text-purple-700', - 'healthcare-insurance': 'bg-red-50 text-red-700', - 'registration-bureaucracy': 'bg-slate-50 text-slate-700', - 'finance-banking': 'bg-amber-50 text-amber-700', - taxes: 'bg-green-50 text-green-700', - 'family-dependents': 'bg-pink-50 text-pink-700', - education: 'bg-teal-50 text-teal-700', - }; + // Apple-web: a single neutral pill (the foundation's neutral badge recipe). + // The category label text is unchanged — only the chrome is restyled. return ( - + {category} ); @@ -656,20 +647,20 @@ function CountryGrid({ type="button" aria-pressed={selected} onClick={() => onSelect(c.iso2)} - className={`flex items-center gap-2 min-h-11 border rounded-lg px-2.5 py-2 text-left text-sm transition-all focus-visible:ring-2 focus-visible:ring-brand-500 ${ - selected ? 'border-brand-600 bg-brand-50' : 'border-slate-200 bg-white hover:border-brand-300' + className={`flex items-center gap-2 min-h-11 border rounded-field px-2.5 py-2 text-left text-sm transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent ${ + selected ? 'border-accent bg-brand-50' : 'border-separator bg-white hover:border-accent' }`} > {/* Availability dot: green = a published, verified guide exists for this route; gray = not yet (selecting it leads to the launch waitlist). */}