# News & Media — Reconcile Round 1 (news-r1)

Date: 2026-06-17. Agent: news-r1. Target: `html/news-media.html`.
Figma (key R6EY4TpNCvVqUEikM7Lof9): desktop 3 tab states — News `3121:24934` /
Press `3121:25016` / Video `3121:25098`; mobile `3121:24028`.
Method: coordinates from Figma IR vs DOM getBoundingClientRect/getComputedStyle.
Browser: playwright slot. Scales: hero 0.970, featured 1.020, mobile ≈1.0.

The page was already substantially built. This round measured every section
against IR, fixed 2 real defects (tab hover, mobile featured structure), and
proved the static + interactive states by measurement.

## DESKTOP

| Section | Figma node | measured vs IR | fixed? | residual/notes |
|---|---|---|---|---|
| Hero left card | Frame 1597884688 / Rectangle 2 | card 723×329 r28 #f4f4f8 → measured 723-eq, r28, bg #f4f4f8 ✓ | n/a | matches |
| Hero h1 | 3121:24944 | Poppins SemiBold 55px lh100% #2b286f → 600/55px/lh55/#2b286f ✓ | n/a | matches |
| Hero subtitle | 3121:24945 | Poppins Light 25px #2b286f → 300/25px/#2b286f ✓ | n/a | matches |
| Hero image | 3121:24940 (hash 262cf78…) | navy masked building, r28 → wired hero-building.png, same subject (CfS Eye Institute) ✓ | n/a | confirmed correct subject vs Figma; removed downscaled dup |
| Tab bar | Group 1049 (Component 147) | 3 tabs 196×50 r7 1px navy bd, gap30, Poppins 22px ls-0.88 TITLE; active=yellow Medium500, inactive=white Light300 → all match exactly ✓ | n/a | matches |
| **Tab HOVER** | Component 147 ON_HOVER→Group 611 | inactive tab should fill #ffcb05 + weight→500 on hover; HTML had NO hover→yellow | **YES** | added `hover:bg-[#ffcb05] hover:font-medium`; verified hover fires (bg→rgb(255,203,5), weight→500) |
| Tab switching | reactions ON_CLICK→press/video frames | JS data-newstab toggles panels | n/a | verified: click Press → only press panel visible, aria-selected=true, yellow |
| News featured grid | Frame 1597884747 | big 723×760, right top 723,0 672×380, right bottom 723,380 672×380, gap0 → measured (÷1.02) 723/672 widths ✓; big title 25px, right title 20px, excerpt 20px Poppins Regular #2b286f ✓ | n/a | matches |
| News all-news heading | "all news" TEXT 3121:24130-eq | Poppins Light 50px TITLE centered #2b286f → ✓ | n/a | matches |
| News all-news grid | Frame 1597884746 | 3-col flush cards 465×388, media 427×246 (x19,y17), title 20px → grid template `mx-[19px] mt-[17px] aspect-[427/246]` ✓; 9 cards | n/a | matches |
| **Card HOVER** | grid card → variant 3121:16909 | bg #fff→#2b286f, all text+svg #2b286f→#fff, border off → custom.css `.nm-card:hover` already correct | n/a (verified) | TRIGGERED hover: bg→navy, title/meta/svg→white ✓ |
| Press featured | Frame 1597884748 | big 723×644 (NO excerpt, title 25px), right cards 672×322, media 617×175/176 → measured big 723 no-excerpt 25px, right 672 ✓ | n/a | matches |
| Press all-press grid | Frame 1597884746 | identical card structure to news → same template ✓ | n/a | matches |
| Video panel | Frame 3121:25098 | Figma shows hero + tab bar + footer ONLY — **no designed video content** (empty between tab bar y=-45655 and footer y=-43519) | n/a | HTML "Videos coming soon" placeholder is correct; **CLIENT QUESTION: confirm video-card layout** |
| Pagination | (page foot of grids) | navy active page 1, bordered 2/3/…/10, 38×38, Poppins 20/25px | n/a | present, matches design intent |

## MOBILE (393px)

| Section | Figma node | measured vs IR | fixed? | residual/notes |
|---|---|---|---|---|
| Tab bar | Group 1058 + Component 92 | pills 147×31 r7 1px navy bd, Poppins Light 15px ls-4% TITLE; **wraps 2 rows** (News+Press / Video); active yellow | n/a | measured: 2 rows, 15px, r7, active weight 500 ✓. Pills content-size 159/135 (Figma fixed 147) — acceptable for wrapping bar |
| Featured big card | Group 1087 | vertical, media **318×311 (near-square)**, title 20px Regular, excerpt 15px → HTML media was aspect 666/463 (desktop) | **YES** | media aspect `aspect-[318/311] lg:aspect-[666/463]`; measured 292×286 (square) ✓ |
| Featured small cards (×2) | Frame 1597884749/750 | **HORIZONTAL: photo-left 89px, content right, title 18px Light, NO excerpt** → HTML stacked them as desktop verticals | **YES** | added `flex-row lg:flex-col`, media `w-[89px]`, title `text-[18px] font-light`; measured row, media 89×154/204, 18px/300 ✓. Same fix applied to PRESS panel small cards |
| All-news grid | Group 1093 | single-column 345-wide vertical cards (photo top) ~388–417 tall | n/a | HTML `grid-cols-1` on mobile ✓ |
| Horizontal overflow | — | scrollWidth 378 ≤ 393 ✓ | n/a | no overflow |
| Dynamic tabs | CLAUDE.md rule | stress: 5 tabs incl. long label → bar wraps to 4 rows, no page overflow, no tab exceeds bar | n/a | dynamic-safe verified |

## Fixes committed (2)
1. `fix(news-media): wire tab hover→yellow per Figma ON_HOVER variant` — inactive tabs fill #ffcb05 + font-medium on hover.
2. `fix(news-media): mobile featured cards → horizontal photo-left per Figma` — big-card media near-square on mobile; 2 small cards horizontal (photo-left 89px, title 18px Light, no excerpt), news + press panels; desktop vertical preserved.

## Residuals / open questions
- **Video panel content (CLIENT):** Figma's Video & Media tab state has NO designed
  content area (only hero + tab bar + footer). Current page shows a "Videos coming
  soon" placeholder. Need client to confirm the intended video-card layout.
- **Card images are CMS placeholders:** all featured/grid card images are `src=""`
  with a grey `#d9d9d9` fallback. Figma shows distinct per-article photos, but these
  are per-article CMS content (9+ distinct news photos) — legitimately left as CMS
  placeholders. Only the hero building image is design-specified and is wired.
- **Card border 0.5px renders as 1px:** `border-[0.5px]` computes to 1px in Chromium
  (sub-pixel rounding). Figma stroke is 0.5w. Cosmetic; not chased.
- **Mobile pill widths content-sized** (159/135) vs Figma fixed 147 — kept flexible so
  the wrapping bar stays dynamic-tab safe (the non-negotiable rule outranks fixed px).