From 938eedc99fd082add34ea2734b2eb3b362364fb8 Mon Sep 17 00:00:00 2001 From: Grant Date: Fri, 8 May 2026 18:07:06 -0500 Subject: [PATCH] =?UTF-8?q?Mobile=20responsiveness=20pass=20=E2=80=94=20bu?= =?UTF-8?q?y=20/=20recover=20/=20thank-you?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit The recurring-subs work just added new tier-card content (cadence line + trial banner + /mo suffix), so a quick pass on the three buyer-facing pages was timely. Targeted, CSS-only changes. Buy page (`/buy/`): - h1 uses clamp(28px, 7vw, 42px) so it scales smoothly from phones to desktop without cliff-edge breakpoints. The fixed 42px was cramping 360-380px viewports. - New @media (max-width:480px) breakpoint tightens the outer rhythm: topbar padding, wrap margin, cert padding, price size, tier-card padding, etc. The desktop 48px outer + 32px cert padding ate too much of a small viewport. - Form input font-size pinned to 16px on mobile so iOS Safari doesn't auto-zoom when the buyer taps the email or discount field. (iOS zooms on any <16px input, which interrupts the buy flow.) - Tier picker already had a 560px breakpoint dropping to 1-column; unchanged. Recovery page (`/recover`): - Default input/button font-size raised to 16px (iOS zoom fix). - New @media (max-width:480px) breakpoint reduces outer body padding (48px → 24px) and main padding (32px → 22px), tightens h1 + label, and bumps button padding for thumb-friendly tap targets. Thank-you page (`/thank-you`): - Adds a @media (max-width:480px) block — previously it had zero breakpoints. Mirrors the buy-page pattern: tighter topbar, wrap margin, card padding, h1 fluid scaling, lede + footer sizing. Admin UI is operator-side and not addressed in this pass. Could be revisited if operators report mobile pain points; for now the buyer-facing surface is the priority because that's where buyers actually arrive on phones. --- licensing-service/src/api/buy_page.rs | 24 +++++++++++++++++++++++- licensing-service/src/api/mod.rs | 12 ++++++++++++ licensing-service/src/api/recover.rs | 15 +++++++++++++-- 3 files changed, 48 insertions(+), 3 deletions(-) diff --git a/licensing-service/src/api/buy_page.rs b/licensing-service/src/api/buy_page.rs index b117ab7..da274ad 100644 --- a/licensing-service/src/api/buy_page.rs +++ b/licensing-service/src/api/buy_page.rs @@ -186,7 +186,11 @@ body {{ }} .eyebrow::before {{ content:''; display:inline-block; width:28px; height:1px; background:var(--gold-500); }} h1 {{ - font-family:var(--font-display); font-weight:500; font-size:42px; + font-family:var(--font-display); font-weight:500; + /* Fluid type — scales smoothly from ~28px on phones to 42px on + desktop without an extra breakpoint. min/max guard the + edges so it never gets too small or too large. */ + font-size:clamp(28px, 7vw, 42px); line-height:1.05; letter-spacing:-0.022em; color:var(--navy-950); margin:0 0 12px; }} @@ -250,6 +254,24 @@ h1 {{ @media (max-width:560px) {{ .tiers-2, .tiers-3, .tiers-4 {{ grid-template-columns:1fr; }} }} +/* Phone-sized viewports: tighten outer rhythm so the cert + form + fit without a long preamble of whitespace. The desktop layout + has 48px top margin and 32px cert padding, both of which feel + wasteful on a 360-390px wide screen. */ +@media (max-width:480px) {{ + .topbar {{ padding:12px 16px; }} + .topbar .inner {{ font-size:13px; letter-spacing:0.22em; gap:8px; }} + .topbar .operator {{ font-size:11px; }} + .wrap {{ margin:24px auto; padding:0 16px; }} + .cert {{ padding:24px 22px 22px; }} + .price {{ font-size:30px; }} + .description {{ font-size:15px; margin:0 0 24px; }} + .tier {{ padding:18px 16px; }} + .tier.selected {{ padding:17px 15px; }} + .tier-name {{ font-size:17px; }} + .tier-price {{ font-size:24px; }} + .field input {{ font-size:16px; }} /* prevent iOS zoom-on-focus */ +}} .tier {{ position:relative; background:var(--cream-50); border:1px solid var(--border-1); diff --git a/licensing-service/src/api/mod.rs b/licensing-service/src/api/mod.rs index fd03214..f5c1785 100644 --- a/licensing-service/src/api/mod.rs +++ b/licensing-service/src/api/mod.rs @@ -660,6 +660,18 @@ footer.kfooter {{ }} footer.kfooter a {{ color:var(--ink-500); text-decoration:none; }} footer.kfooter a:hover {{ color:var(--navy-900); }} +/* Mobile breakpoint — desktop-rhythm padding crowds 360-390px screens. */ +@media (max-width:480px) {{ + .topbar {{ padding:12px 16px; }} + .topbar .inner {{ font-size:13px; letter-spacing:0.22em; gap:8px; }} + .topbar .operator {{ font-size:11px; }} + .wrap {{ margin:24px auto; padding:0 16px; }} + h1 {{ font-size:clamp(26px, 7vw, 38px); }} + .lede {{ font-size:15px; margin:0 0 22px; }} + .pending-card, .license-success, .error-card {{ padding:22px 20px 20px; }} + .pending-card h2 {{ font-size:20px; }} + footer.kfooter {{ margin-top:32px; padding:14px; }} +}} diff --git a/licensing-service/src/api/recover.rs b/licensing-service/src/api/recover.rs index 9d6d11d..65a1a42 100644 --- a/licensing-service/src/api/recover.rs +++ b/licensing-service/src/api/recover.rs @@ -191,11 +191,13 @@ const RECOVER_PAGE_HTML: &str = r##" h1 { margin: 0 0 8px; font-family: "Archivo", Georgia, serif; font-weight: 600; font-size: 24px; } p.intro { margin: 0 0 24px; color: #5a6178; line-height: 1.5; } label { display: block; font-size: 14px; font-weight: 600; margin: 16px 0 6px; } + /* font-size: 16px on inputs prevents iOS Safari from zooming in + when the user taps a field (it auto-zooms for anything <16px). */ input { width: 100%; padding: 10px 12px; box-sizing: border-box; - border: 1px solid #c5b994; border-radius: 6px; font-size: 15px; + border: 1px solid #c5b994; border-radius: 6px; font-size: 16px; font-family: "JetBrains Mono", Menlo, monospace; } button { margin-top: 20px; width: 100%; padding: 12px; background: #1a2238; - color: #f6f1e7; border: 0; border-radius: 6px; font-size: 15px; + color: #f6f1e7; border: 0; border-radius: 6px; font-size: 16px; font-weight: 600; cursor: pointer; } button:disabled { opacity: 0.6; cursor: wait; } pre { margin: 16px 0 0; padding: 12px; background: #1a2238; color: #f6f1e7; @@ -203,6 +205,15 @@ const RECOVER_PAGE_HTML: &str = r##" white-space: pre-wrap; } .err { color: #b03020; margin-top: 12px; font-size: 14px; } .ok { color: #1a6b3a; margin-top: 12px; font-size: 14px; font-weight: 600; } + /* Tighten on narrow phones — the desktop 48px outer padding + + 32px card padding eats the viewport on 360px screens. */ + @media (max-width: 480px) { + body { padding: 24px 12px; } + main { padding: 22px 18px; border-radius: 10px; } + h1 { font-size: 21px; } + label { font-size: 13px; } + button { padding: 14px; } + }