# city-individual — FINAL QA CERTIFICATION (agent city-qa, 2026-06-18)

Capstone QA after R1/R2/R3. Desktop frame **3121:22150**, mobile **3121:21144**
(file R6EY4TpNCvVqUEikM7Lof9). Browser engine: **chrome** (Chrome DevTools MCP,
queued slot). All numbers from `getBoundingClientRect`/`getComputedStyle` measured
at 1440px / 393px and compared to the Figma IR (bbox + per-run fonts/colors).
Hovers PROVEN by real `hover` + computed-style read (not assumed). No screenshot was
used as a measurement source.

## Verdict
- **Desktop (1440): PASS** (no horizontal overflow, scrollWidth 1425).
- **Mobile (393): PASS** (scrollWidth 393, 0 overflow offenders).
- No unaddressed clear defects found. All deviations are pre-documented intentional
  (canonical-component or fluid-container) or cosmetic ≤2px, listed under residuals.

## Per-section table

### Desktop
| Section | geometry | fonts | color | images | hovers | notes (measured) |
|---|---|---|---|---|---|---|
| Breadcrumb (22222) | ✓ | ✓ | ✓ | — | ✓(link underline) | Poppins Light 15px capitalize; current crumb #636262. "›" separator vs Figma hairline (deliberate). |
| Hero (22164) | ✓ | ✓ | ✓ | ✓ | n/a | Left card 964×381 #f4f4f8 r28; H1 Poppins SemiBold 55px #2b286f; form col **621px wide = Figma CTA bbox 621**; button Lato 24px #ffcb05 65h. Submit has NO Figma hover variant (reactions empty) → kept brightness-105. Right photo clean 400-col vs Figma 525-overlap (deviation). |
| About (22183) | ✓ | ✓ | ✓ | — | — | Poppins Light 300 20px #2b286f JUSTIFIED **capitalize** (=IR textCase=TITLE). lh30 vs IR AUTO≈28 (+2px). |
| Centres heading (22185) | ✓ | ✓ | ✓ | — | — | Poppins Light 50px center. |
| Centre cards ×10 | ✓ | ✓ | ✓ | placeholder | ✓ | Card r7; name Light 30px no-underline; book Poppins Light **12px**; phone outlined-at-rest (transparent, #2b286f border). Cards render 441w (fluid fill of 1380 inner vs Figma 421) — deviation. |
| Centre card HOVER | — | — | — | — | **✓ FIRES** | name→underline; img scale(1.13); phone bg→#2b286f + path fill→white; book weight→600; arrow w 0→7px; card border→#2b286f 1px. ALL measured live. |
| Specialties (22202) | ✓ | ✓ | ✓ | — | ✓(tab swap) | Accordion 1380×636 #f1f1f1 r20; active flex-1 (1012w) + 4×92 strips; strip colors #2b286f/#3a3692/#4641b4/#514cd0/#5b54eb. Click-swap verified (glaucoma→active 1012, others 92). **Dynamic-tab stress: 8 panels → sum 1380, no overflow, active absorbs remainder.** |
| Doctor cards ×4 (22205) | ✓ | ✓ | ✓ | ✓ | **✓ FIRES** | Card 314×437 r17 #f1f1f1 gap41; degrees Poppins Med 14px; name Med 21px #2b286f; book Poppins Reg 13px; exp "41+" SemiBold16 + tail Reg16 navy bar. |
| Doctor card HOVER | — | — | — | — | **✓ FIRES** | pill #d9d9d9→#ffcb05; city #000→#2b286f; img scale(1.13); exp "41+" 16→23px, tail 16→18px; book `>p` →underline + size 13→15px (weight 500). Live computed-style confirmed. |
| Load More btn | ✓ | ✓ | ✓ | — | ✓(hover bg) | Lato SemiBold 25px #2b286f, 197×52 r10 1px navy border (=IR). |
| FAQ (22215) | ✓ | ✓ | ✓ | — | ✓(details toggle) | row 1380×77 #f1f1f1 r5 (Figma 69; +8px py tolerance); question Poppins Reg 20px capitalize #000. |
| Services strip (22218) | ✓ | ✓ | ✓ | — | ✓(link underline) | heading Light 50px center; links Poppins 20px #2b286f. |
| Callback (3124:58592) | ✓ | ✓ | ✓ | ✓ | ✓(focus/submit) | card 478×439; field 389×40 (Figma 391×42, ~2px) placeholder #919191; submit 239×42 navy white 20px. Shared canonical. |
| Footer / Sticky | — | — | — | — | — | shared canonical (page-agnostic), trusted reconciled. |

### Mobile (393)
| Section | geometry | fonts | color | images | hovers | notes (measured) |
|---|---|---|---|---|---|---|
| Hero (21145) | ✓ | ✓ | ✓ | ✓ | n/a | Order card→photo→form (form 3rd, below photo). H1 Poppins **Bold 38px** #2b286f; card 363w r17 #f4f4f8 h210; photo 363×367; form btn full-width 363 18px. |
| About | ✓ | ✓ | ✓ | — | — | Poppins Light 15px **LEFT** capitalize #2b286f (desktop=justified). |
| Centres | ✓ | ✓ | ✓ | placeholder | n/a(touch) | heading SemiBold 30px center; card 363w r10 **navy border at rest**; name 20px **underline**; phone **navy-filled at rest** (mobile flip). |
| Specialties (21188) | ✓ | ✓ | ✓ | — | ✓(toggle) | mobile header bars 363×64 navy (desktop strip hidden). Click cataract→active+body block, retina deactivates. |
| Doctors (21191) | ✓ | ✓ | ✓ | ✓ | n/a(touch) | mobile horizontal list shown / desktop grid hidden. heading SemiBold 35px center; card 363w r10 h276 photo 131w; degree Lato Light 12px; name Poppins Med 21px; pill yellow; book Lato Reg 14px underline; exp Lato **Black(900) 13px**; chips Lato 11px. |
| FAQ (21325) | ✓ | ✓ | ✓ | — | ✓ | heading SemiBold 30px center; question Poppins **Light 15px**. |
| Services (21328) | ✓ | ✓ | ✓ | — | ✓ | heading SemiBold 30px; links 15px. |
| Callback (21331) | ✓ | ✓ | ✓ | ✓ | ✓ | card h-auto (340h content-fit), 353w. |

## Flip-flops resolved (vs Figma IR ground truth)
1. **About paragraph case (R1 added `capitalize` ↔ accuracy-doc recommended sentence-case).**
   IR (node 3121:22184) is **`textCase: "TITLE"`, `textAlignHorizontal: "JUSTIFIED"`**.
   → Locked **`capitalize` + `lg:text-justify`** (IR-faithful, current state). Readability
   objection is a client decision, not a defect → carried as client Q1.
2. **Doctor book hover: underline? (R2 "no-underline" ↔ R3 "→500+underline").**
   IR diff (default 3121:14096 → hover 3121:14129): "Book An Appointment" Regular13 →
   **SemiBold15 + UNDERLINE**. → Build is correct: `.cms-doctor-card-book-responsive > p`
   gets `text-decoration:underline` (custom.css L121-125) + size 15px on hover, FIRES.
   (My first measurement read the `<a>` not the `<p>`; the `> p` carries the underline.)
   Weight renders 500 vs IR 600 — pre-documented negligible deviation (custom.css L116-119).
3. **Doctor image hover: scale vs pan.** IR diff shows image bbox y 20→-3 (pan UP 23px,
   same w/h = translate, NOT zoom). Build uses `scale(1.13)` from the **canonical
   eye-specialists component**. → Kept canonical (cross-page consistency); noted as
   deliberate deviation, not a per-page fix.

## Arbitrary Play-CDN class concern — ROOT-CAUSED & DISPROVEN
The flagged worry ("`lg:w-[NNNpx]`/`lg:bg-white` sometimes don't generate under the
Play CDN") is **a misdiagnosis, not a real CDN bug.** Evidence:
- Stylesheet scan: `.lg\:bg-white`, `.lg\:w-\[92px\]` and `.lg\:w-\[621px\]` rules **ARE
  emitted** by the CDN inside the `@media (min-width:1024px)` block.
- Hero form renders at exactly **621px = Figma CTA bbox (621)** — driven by the
  `.city-hero .hero-callback{width:621px}` rule (custom.css L1113-1115), NOT a broken
  utility. (Note `.lg\:w-\[621px\]{width:auto!important}` at L966-970 is a now-DEAD
  leftover — the markup no longer uses that class; harmless, left to avoid churn.)
- Centre-card phone icon renders **transparent at rest** on desktop = correct per Figma
  (outlined-at-rest). The `lg:bg-white` utility generates but is **outranked** by the
  higher-specificity element+class rule `a.phone-icon{background-color:transparent}`
  (L886-890). So R1's "lg:bg-white didn't win" = specificity override, not absence.
- Card backgrounds `bg-[#f1f1f1]` (doctor) and `bg-[#2b286f]` (exp bar) render at the
  Figma values.
**Conclusion: arbitrary + standard `lg:` classes generate and apply correctly. No fix
needed; no silent no-op exists.**

## Full hover / interaction inventory (every interactive element, proven)
| Element | trigger | result (measured) |
|---|---|---|
| Utility-bar links | hover | underline (shared) |
| Main-nav links | hover | underline / yellow (shared canonical) |
| Nav "Book An Appointment" CTA | hover | brightness-105 + shadow (shared) |
| Hero phone field | focus | focus ring (focus:ring-primary) |
| Hero submit "Request a Callback" | hover | brightness-105 (NO Figma hover variant — reactions empty; correct) |
| **Centre card** ×10 | hover | name→underline; img scale1.13; phone bg→#2b286f + icon→white; book→600; arrow 0→7px; border→navy 1px. **FIRES** |
| **Doctor card** ×4 (desktop) | hover | pill→#ffcb05; city→#2b286f; img scale1.13; exp "41+"→23px tail→18px; book `>p`→underline+15px. **FIRES** |
| Specialties panels ×5 (desktop) | click | active flex-1 expands (1012), others 92; body reveals. **FIRES** |
| Specialties bars ×5 (mobile) | click | active reveals body, prior deactivates. **FIRES** |
| Load More button | hover | bg→#2b286f, text→white |
| FAQ rows ×3 | toggle | `<details>` open/close, chevron rotate-180 |
| Services links ×8 | hover | underline |
| Callback fields | focus | gradient focus border |
| Callback submit | hover | brightness-105 + shadow |
| Footer links / phone chips / socials | hover | underline / border→#ffcb05 / bg overlay (shared) |
| Sticky bar items | — | navigation (mobile fixed bar / desktop chat bubble) |

## Residuals / deliberate deviations (all cosmetic / pre-documented — non-blocking)
- **Doctor img hover = scale(1.13)** vs Figma pan-up-23px — kept canonical eye-specialists
  component for cross-page consistency.
- **Doctor book hover weight 500** vs IR 600 — explicit intentional simplification
  (custom.css comment); underline is the dominant cue and fires.
- **Centre/doctor cards fluid-fill** the 1380 inner container (centre 441 vs Figma 421;
  3-across intent met) rather than fixed-px centered tracks.
- **Hero right photo:** clean 400-wide column vs Figma's 525-wide navy panel overlapping
  the 964 card by 107px. Visually equivalent navy-framed photo, no overlap markup.
- **Mobile gutter 15px** (`.lg\:px-0` forced to 15px ≤1430 in custom.css L960-965) → mobile
  cards 363 vs Figma ~344. Page-wide & sibling-consistent baseline.
- **About lh 30 vs ~28; callback field 40 vs 42; FAQ row +8px** — ≤2-8px tolerances.
- **Breadcrumb "›"** vs Figma hairline-vector separator; current crumb #636262 (matches).
- **Services links centered** (mobile Figma is LEFT) — reads fine centered.
- **Centre photos are CMS placeholders** (repeating centre imagery; no design-specific
  per-card photo in Figma).
- **`lg:w-[621px]{width:auto}` DEAD rule** in custom.css (L966-970) — unused, harmless.

## Consolidated client questions
1. **About body case:** Figma marks the About paragraph `textCase=TITLE` (every word
   capitalized). We honor it (`capitalize`). Keep the literal Title-case, or switch to
   sentence-case for paragraph readability? (Recommend confirming — Title-casing a full
   prose block is likely a Figma text-style artifact, not intent.)
2. **Centre-card phone icon** is OUTLINED at rest on desktop but NAVY-FILLED at rest on
   mobile (both per their respective Figma frames). Confirm intentional vs uniform.
3. **Hero right photo:** Figma overlaps the left card by 107px; we use a clean
   non-overlapping 400-col. Confirm the clean layout is acceptable.
4. **Centre/doctor cards** fill the container fluidly (3-across) rather than fixed
   Figma px widths. Confirm fluid is acceptable (or request exact-px centered tracks).