gw-svelte/MOBILEPOLISH.md

# Mobile Polish — Conversion & Comfort Audit Tracker

Findings from a focused mobile-experience review (≤768px, with extra
attention to 375px small-phones). Desktop is considered done. Each item
records the where, why, and the concrete change.

> Important context for prioritisation: a dog-walking business is a
> jobs-to-be-done service that users research on the couch. Mobile
> conversion lower-bound is "they Meet & Greet". So the dial-movers
> are: thumb-reach for the booking CTA, legibility, friction-free
> form, and trust signals visible on the first scroll.

---

## High — direct conversion impact

- [x] **Hero buttons stack awkwardly at ~375px**
  - File: `src/lib/styles/responsive.css` (new ≤480px block)
  - Implementation: At `@media (max-width: 480px)` the hero buttons
    flip to `flex-direction: column; gap: 12px;` and each button
    becomes full-width with padding `16px 24px`. The 768px-specific
    `padding-right: 18px` on the buttons row and the
    `margin-right: 12px` on `:last-child` are both reset so the two
    CTAs read as a clean stacked stack.
  - Why: At 375px the side-by-side primary + outline CTAs were wrapping
    unevenly and the primary's prominence collapsed.

- [x] **Mobile header phone button is low-contrast and small**
  - File: `src/lib/styles/responsive.css:88-100`
  - Implementation: Background bumped from `rgba(33, 48, 33, 0.06)` →
    `0.10`; padding 9px 12px → 11px 14px (and at ≤480px, 10px 12px);
    `font-weight: 600`; `min-height: 44px` to meet the touch-target
    minimum; icon size also bumped from 13px → 14px.
  - Why: The tap-to-call on the mobile header is one of the highest
    intent actions on the site. It now reads as a button rather than a
    barely-visible label.

- [x] **Booking form inputs trigger iOS zoom-on-focus**
  - File: `src/lib/styles/responsive.css:453-462`
  - Implementation: Input `font-size: 15px` → `16px` at ≤768px. Comment
    added explaining the iOS-Safari 16px threshold so a future edit
    doesn't accidentally drop it again.
  - Why: Below 16px Safari auto-zooms on focus; the page jolts every
    time a field is tapped. Critical at the booking conversion step.

- [ ] **Testimonial carousel arrows hard to reach at 375px**
  - File: `src/lib/components/TestimonialsSection.svelte` (mobile rules
    lines ~640-660)
  - Current: arrows pinned to `bottom: 24px` inside a stage with
    `padding-bottom: 116px`. Visually at the bottom of a tall card —
    requires deliberate stretching.
  - Why: The carousel feels passive. Users don't realise they can advance
    it; testimonials sell — losing that engagement matters.
  - Fix: Lift arrows on small screens:
    ```css
    @media (max-width: 480px) {
      .testimonial-arrow { bottom: 80px; }
    }
    ```

- [x] **No persistent "Book Meet & Greet" CTA on mobile after hero scrolls past**
  - Files: `src/lib/components/MobileBookBar.svelte` (new),
    `src/routes/+layout.svelte` (mount), `src/lib/styles/responsive.css`
    (`body { padding-bottom: 64px }` at ≤768px).
  - Implementation v2 — *Airbnb-style soft-container, scroll-triggered*:
    - **Soft container**: a translucent white tray (`rgba(255, 255,
      255, 0.96)` with backdrop-filter blur) sits flush at the bottom
      with a thin top hairline and a soft shadow. The brand-yellow CTA
      pill lives *inside* the tray, not as the tray itself — so the
      action stays unmistakable but the surrounding chrome is calm.
    - **Scroll-triggered**: the bar slides up + fades in only after the
      user has scrolled ~480px (≈ one mobile viewport, hero out of
      view). Slides back out below ~120px to avoid flicker near the
      top. `prefers-reduced-motion` respected — the slide is dropped,
      only the opacity fade remains.
    - **Hidden on `/contact-us` and `/booking`** (already in the form).
    - **Resets on navigation**: `afterNavigate` resets `visible = false`
      so each new page starts hidden until the user has earned it again.
    - **Accessibility**: `aria-hidden` toggles with visibility; CTA
      `tabindex` flips to `-1` while hidden so keyboard users don't
      stumble onto an off-screen control; `pointer-events: none` while
      hidden so the user can't accidentally tap it during the fade.
    - **Safe-area aware**: `env(safe-area-inset-bottom)` so iPhones
      with the home-bar gesture area get correct spacing.
  - Body bottom-padding of 64px on mobile keeps the footer from sitting
    behind the bar when it's visible at the bottom of long pages.
  - Why: Sticky mobile CTAs are a validated conversion pattern (Airbnb,
    Booking.com, etc.), but the v1 full-yellow bar was tonally wrong
    for Goodwalk — it competed with the calm brand voice and dominated
    the screen permanently. v2 keeps the conversion benefit (one-tap
    booking, always one swipe away after engagement) without yelling.

## Medium — legibility & polish

- [x] **Hero title can wrap awkwardly at 375px**
  - File: `src/lib/styles/responsive.css` (≤480px block)
  - Implementation: At ≤480px the desktop H1 drops to 32px /
    line-height 1.12 and the dedicated `.hero-heading-mobile` element
    drops to 30px / 1.12 (it was 33.5px). The two-line "Unleashing Fun
    in / Your Dog's Day!" now sits comfortably with breathing room
    above the subtitle.
  - Why: Previous 38px / 33.5px sizings were a hair too big for 375px;
    line-2 felt cramped against the subtitle.

- [x] **Body text 15px feels small on mobile (and on ultra-wide desktop)**
  - File: `src/lib/styles/responsive.css` (≤768px body rule)
  - Implementation: `body { font-size: 16px; }` at ≤768px, with a
    comment noting the iOS-Safari 16px zoom threshold so this rule
    isn't accidentally undone.
  - Desktop (≥769px) still inherits 15px from `base.css` for now — the
    ultra-wide bump is tracked separately at the bottom of this file
    so it can be reasoned about independently (clamp vs. breakpoint).
  - Why: 16px is the modern legibility standard on mobile, dovetails
    with the iOS zoom-on-focus rule for inputs, and reduces read
    fatigue on long pages (about, FAQ answers, legal).

- [ ] **FAQ summary tap target too small**
  - File: `src/lib/styles/sections.css` (`.faq summary` rules)
  - Current: just text height (~22-26px) — below the 44px minimum.
  - Fix:
    ```css
    .faq summary {
      padding: 12px 0;
      min-height: 44px;
      display: flex; align-items: center;
    }
    ```

- [ ] **Booking service-option chips wrap awkwardly at 375px**
  - File: `src/lib/styles/responsive.css:468-470`
  - Fix at ≤480px: 2-up grid with tighter gap:
    ```css
    .booking-service-options { gap: 10px 12px; }
    .booking-toggle-option { flex: 1 1 calc(50% - 6px); }
    ```

- [ ] **Footer social icons spaced too tight for thumbs**
  - File: `src/lib/styles/sections.css` (`.social-links { gap: 14px }`)
  - Current 14px gap with 40px icons → centres are 54px apart. Apple
    HIG wants 8px+ between targets after the 44px minimum.
  - Fix:
    ```css
    @media (max-width: 768px) { .social-links { gap: 18px; } }
    ```

- [ ] **Pricing cards stack to 1-col with multiple "Book" buttons in a row**
  - File: `src/lib/components/PricingPage.svelte` (and ServiceLandingPage
    plan grids)
  - Why: After stacking, the user sees Plan → Book → Plan → Book → Plan
    → Book in vertical sequence. The repetition reads as noise rather
    than choice; the "popular" anchor disappears.
  - Fix (opinionated): on mobile, only the popular plan keeps its CTA
    button. Other plans show a smaller "Choose this plan" link instead,
    or no per-card CTA at all (a single CTA appears under the grid):
    ```css
    @media (max-width: 768px) {
      .pricing-plan-card:not(.pricing-plan-popular) .pricing-plan-cta {
        display: none;
      }
    }
    ```
    Then keep the existing under-grid `.service-plan-reassurance` pill
    and add a single "Book a Meet & Greet" button below it.

- [ ] **Mobile nav header is too tall — eats above-the-fold real estate**
  - File: `src/lib/styles/responsive.css:74`
  - Current: `nav { padding: 20px 24px; }` + 25px logo = ~65px header.
    On iPhone 13 (844px), this leaves ~380px for hero before scroll —
    less than what the Goodwalk dog-image needs to feel like a hero.
  - Fix at ≤480px:
    ```css
    nav { padding: 14px 20px; }
    .logo img { height: 22px; }
    ```

## Low — incremental polish

- [ ] **Hero top padding generous at 375px**
  - File: `src/lib/styles/responsive.css:179`
  - Reduce hero `padding-top` from 50px to 32px at ≤480px.

- [ ] **Intro trust badge feels edge-to-edge at 375px**
  - File: `src/lib/styles/responsive.css:296-301`
  - Add `padding: 18px 16px; margin: 0 12px;` at ≤480px.

- [ ] **Testimonial quote mark too large at 375px**
  - File: `src/lib/components/TestimonialsSection.svelte:~595`
  - Current: 44px. Reduce to 36px at ≤480px.

- [ ] **Booking form labels could shrink slightly at 375px**
  - File: `src/lib/styles/responsive.css:450`
  - Optional: 16px → 15px at ≤480px to give field width back to the
    input value (where it actually matters for legibility).

- [ ] **No scroll-to-top affordance on long pages (booking, pricing)**
  - Currently absent. Low priority but helpful when users have scrolled
    past the booking form and want to re-read service details. Could be
    folded into the same sticky-book-bar work above (one bar, both jobs).

## Open from elsewhere

- [ ] **Ultra-wide desktop body font feels small** *(noted by user)*
  - Currently `body { font-size: 15px }` ([base.css:15](src/lib/styles/base.css#L15)).
    On ≥1800px screens with the `--max-w` already widening (per the
    1800px breakpoint), 15px in long-form sections (about, FAQ answers,
    legal) becomes uncomfortable.
  - Suggested fix: bump to `clamp(15px, 0.95vw, 17px)` on `body`, OR
    introduce a `@media (min-width: 1600px) { body { font-size: 17px; } }`.
    Either keeps the desktop ≤1599px experience identical and only
    expands type when there's genuinely more reading width.

## Deliberately not actioning

- **Drop reveal animations on mobile to "save bandwidth".** They're
  IntersectionObserver-driven, cost nothing perceivable, and add brand
  polish. Removing them would make the mobile site feel cheaper for no
  measurable performance gain.
- **Replace the testimonial carousel with a stacked list on mobile.**
  Tempting (carousels famously hide content), but the carousel is
  central to the brand's "see real dogs" pitch. Better to fix the arrow
  reachability and let the autoplay do the work.

---

## Suggested order of attack

If you want one batch that moves the dial: **High items 1, 2, 3, 5**
together is roughly an hour of work — they hit the hero, the header
tap-to-call, the booking form's biggest mobile bug (zoom-on-focus), and
add the sticky CTA. That's the package I'd ship first. Item 4 (carousel
arrows) is a one-line fix once you're already in `responsive.css`.

The Medium list is best as a second pass — body-text bump,
header-padding reduction, FAQ tap-target, and pricing-card-CTA dedupe
all compound into a noticeably more "intentional on mobile" feel
without any structural change.