# News & Media — FINAL QA CERTIFICATION (capstone, after R1/R2/R3)

Agent: **news-qa** · Date: 2026-06-18 · Browser slot: **chrome** (Chrome DevTools MCP).
Target: `html/news-media.html`.
Figma (key `R6EY4TpNCvVqUEikM7Lof9`, file "CFS (Copy)"): desktop 3 tab states —
News `3121:24934` / Press `3121:25016` / Video `3121:25098`; mobile `3121:24028`.

Method: coordinates from Figma IR (`relativeBbox`, per-run text, fills, strokes, corners) vs
DOM `getBoundingClientRect` + `getComputedStyle` at 1440 (desktop, all 3 panels) and 393 (mobile).
Every hover/tab interaction was TRIGGERED in the browser and read from computed style — not eyeballed.

## Verdict
- **Desktop (1440), all 3 tab states: PASS** (News, Press, Video).
- **Mobile (393): PASS.**
- **Code changes made: NONE** — R1/R2/R3 fixed every real defect; this round re-measured against
  IR and confirmed all fixes held. No new defect found. (Doc-only commit.)

---

## Per-section / per-tab table (measured numbers; Figma px in parens)

### Desktop — NEWS tab (default)
| Section | geometry | fonts | color | images/icons | hovers | notes |
|---|---|---|---|---|---|---|
| Hero grey card | 723×330 r28 (723×329 r28) ✓ | — | #f4f4f8 ✓ | — | — | x29 |
| Hero H1 | 55px ✓ | Poppins 600 / lh55 / #2b286f (SemiBold) ✓ | #2b286f ✓ | — | — | textTransform none ✓ |
| Hero subtitle | — | Poppins 300 / 25px / #2b286f ✓ | ✓ | — | — | |
| Hero image | wrap 509×330 r28 (right block) ✓ | — | navy mask bg ✓ | hero-building.png 1448×1086, object-cover, loaded ✓ | — | design-specified subject (md5-verified prior rounds) |
| Tab bar | 3× 196×50 r7, gap30 ✓ | Poppins 22px ls-0.88 capitalize; active 500 / inactive 300 ✓ | active bg #ffcb05, inactive bg #fff, border #2b286f 1px ✓ | — | **hover→yellow+500 FIRES** ✓ | |
| Featured big-left | 716w, media 656×456 (aspect 666/463) ✓ | title 25px/400, excerpt 20px/400 ✓ | #2b286f, media #d9d9d9 ✓ | calendar + source SVG ✓ | **invert FIRES** ✓ | meta date-left/source-right ✓ |
| Featured right ×2 | 651w each, media aspect 617/246; stacked flush ✓ | title 20px/400, no excerpt ✓ | ✓ | ✓ | invert (shared `.nm-card`) ✓ | |
| "All News" heading | 50px, centered ✓ | Poppins 300 (Light) ✓ | #2b286f ✓ | — | — | capitalize ✓ |
| All-news grid | 9 cards, 455.66w, media aspect 427/246, flush borders ✓ | title 20px/400; meta 15px/400 ✓ | #2b286f / #d9d9d9 ✓ | ✓ | **invert FIRES** (proven on grid card) ✓ | grid fills container, lastCard right 1396 = container right (no bleed) ✓ |
| Pagination | 38×38, active navy/white, others bordered navy ✓ | 25px Poppins Regular ✓ | #2b286f ✓ | — | **page hover→#ffcb05 FIRES** ✓ | enhancement (no Figma hover variant) |
| Breadcrumb | — | Poppins 300 / 15px ✓ | Home #000, current #636262 ✓ | — | — | |

### Desktop — PRESS tab (clicked, proven)
| Section | measured | notes |
|---|---|---|
| Tab state | press selected, bg #ffcb05/500; news+video white/300; panels: news hidden, press shown, video hidden ✓ | switch proven |
| Featured big-left | 716w, h646 (644), title 25px/400, **no excerpt** ✓ | matches Press design (title-only) |
| Featured right ×2 | 651w, media 595×168.75 (aspect 617/175 = 3.52) ✓ | |
| "All Press Release" heading | 50px centered ✓ | |
| Press grid | 9 cards ✓ | same card structure as News |

### Desktop — VIDEO tab (clicked, proven)
| Section | measured | notes |
|---|---|---|
| Tab state | video selected; only video panel visible ✓ | switch proven |
| Content | "Videos coming soon." placeholder, 25px Poppins, #636262, centered ✓ | **Figma frame has NO designed video content** (see client Q) |

### Mobile (393, frame 3121:24028 — distinct structure)
| Section | geometry | fonts | notes |
|---|---|---|---|
| Hero card | 345w r17 #f4f4f8 ✓ | H1 Poppins 700 / 30px / lh37 / ls-1.2 ✓; sub 400 / 15px / lh22 ✓ | card h163 (Figma 152 tight; content-driven, acceptable) |
| Hero image | 345×367 r17, stacked below card ✓ | — | matches mobile stacking |
| Tab bar | 31h r7, wraps to 2 rows (News+Press / Video) ✓ | 15px; active 500 / inactive 300 ✓ | widths content-driven (159/135/159) — dynamic-tab-safe, intentional |
| Featured big | column; media 315×308 (aspect 318/311, mx14) ✓ | title 20px/400, excerpt 15px, meta 12px ✓ | |
| Featured small ×2 | **row (horizontal)**, photo-left 89w, content right ✓ | title Light 18px/300, **no excerpt**, meta 12px ✓ | matches Figma Frame 1597884749/750 |
| All-news grid | single column (345px); media 315×245 (aspect 316/246) ✓ | title Light 18px/300; meta 15px ✓ | |
| "All News" heading | 30px centered ✓ | — | |
| Horizontal overflow | scrollWidth 393 = clientWidth 393 ✓ | — | NO overflow |

---

## Flip-flops resolved (IR ground truth)

1. **Card meta order — date-left vs source-right.** RESOLVED against IR.
   - Grid card meta = `Group 1058` (x19, y278 in the 465-card) containing two `Group 1052`:
     - x=0 (left) = node `I3121:24966;3121:16899` → TEXT "October 9, 2025" + `calendar 2` icon = **DATE**.
     - x=177.234 (right) = node `I3121:24966;3121:16886` → TEXT "Grehlakshmi" + `sourcing 1` icon cluster = **SOURCE**.
   - Correct order is therefore **DATE on the left, SOURCE on the right** — exactly what R2 set and
     what the current markup renders (date `<span>` first, source `<span>` second). **Locked. No change.**
   - Meta typography per IR: Poppins Regular **400 / 15px / ORIGINAL case / #2b286f** — matches our
     meta wrapper `font-normal text-[15px]` (desktop+grid); mobile featured 12px matches mobile IR.

2. **Video tab placeholder vs designed content.** RESOLVED via `get_node_outline(3121:25098)`:
   the Video frame contains ONLY hero + tab bar + utility/nav + footer + breadcrumb + chat (and a
   thin 63×738 decorative scroll frame). **No featured frame, no grid, no video cards** — the content
   area between tab bar (y=-45655) and footer (y=-43519) is empty. The "Videos coming soon."
   placeholder is the correct call. → client question below.

3. **Hero image subject (was questioned across rounds).** RESOLVED: real PNG `hero-building.png`
   (1448×1086, 2.2 MB, object-cover, loads), design-specified building, prior md5 match. Confirmed correct.

---

## Hover / interaction inventory (every interactive element — proven result)

| Element | Trigger | Proven result (computed style) |
|---|---|---|
| Featured big news card | hover | `:hover`=true → bg rgb(43,40,111), border navy, title+meta+excerpt+svg rgb(255,255,255). FIRES ✓ |
| All-news grid card | hover | `:hover`=true → bg navy, border navy, title+meta+svg white. FIRES ✓ |
| Tab (inactive "Press") | hover | `:hover`=true → bg rgb(255,203,5), fontWeight 500, color stays navy. FIRES ✓ (matches ON_HOVER variant 3121:15352) |
| Tab "Press" | click | news panel hidden, press shown, video hidden; press tab yellow/500, others white/300. SWITCH ✓ |
| Tab "Video" | click | only video panel visible; placeholder shown; video tab selected. SWITCH ✓ |
| Tab "News" | click | restores News panel (default). SWITCH ✓ |
| Pagination page link ("2") | hover | `:hover`=true → bg rgb(255,203,5). FIRES ✓ (functional enhancement) |
| Dynamic tabs (mobile) | inject 4 extra (7 total, long label) | wraps to 6 rows; maxTabRight 338 < bar 369; scrollWidth 393 = clientWidth. NO overflow/clip ✓ |
| Dynamic tabs (desktop) | inject 5 extra (8 total) | wraps to 2 rows; maxTabRight 1355 < bar 1396. NO tab overflow ✓ (see residual note) |

Card hover matches Figma variant **3121:16909** delta exactly (bg #fff→#2b286f, border off→navy,
all text/svg #2b286f→#fff). Tab hover matches **3121:15352** (fill→#ffcb05, weight Light300→Medium500).

---

## Residuals / non-defects

- **Card border `border-[0.5px]` computes to 1px** in Chromium (sub-pixel rounding); Figma stroke is
  0.5w. Cosmetic, cross-renderer floor; not chased (consistent with R1).
- **Card media areas are grey `#d9d9d9` placeholders** (`src=""`, hides on error). These are per-article
  CMS photos (Drupal Views rows) + per-publication source logos — dynamic content, not a single
  design-specified asset. Only the hero building image is design-specified and is wired. Legitimately
  left as CMS placeholder slots.
- **Source-logo icons are generic stroke SVGs** (calendar for date, clock/sourcing glyph for source).
  Figma per-source logos are 10-vector publication brand marks = CMS content, not one static asset.
  Functional-equivalent placeholder — intentional.
- **Mobile tab widths content-driven** (159/135/159) vs Figma fixed 147 — kept flexible so the wrapping
  bar stays dynamic-tab-safe (the non-negotiable dynamic-tab rule outranks fixed px).
- **Mobile hero card renders h163 vs Figma 152** — content/CMS-driven (Figma's 152 is a tight 2-line
  measurement); within tolerance, not a defect.
- **Desktop dynamic-tab stress page-overflow artifact:** injecting a contrived 40-char no-space label
  with `whitespace-nowrap` produced scrollWidth 1468 > 1425. This is a stress-test artifact of an
  unrealistic single-token label, NOT a real defect — the tab itself stayed inside the bar (1355<1396),
  and in NORMAL state there is ZERO horizontal overflow (scrollWidth 1425 = clientWidth, 0 offenders).
  Real CMS tab labels are short. No action.

## Consolidated client questions
1. **Video & Media tab content (BLOCKER for that tab):** the Figma Video frame (`3121:25098`) has NO
   designed content area — only shared chrome. Current page shows a "Videos coming soon." empty-state.
   **Need the client/design to provide the video-card layout** (grid? embeds? thumbnails + titles?).
   Flagged in markup (`<!-- Component: news-media/05-panel-video -->`).
2. **Card meta order:** date-left / source-right is the IR-mandated order (calendar group x=0, source
   group x=177 in every card) and is locked. Visually it leads with the date; flag only if the client
   expected source-first — but Figma is unambiguous here.
3. **Per-article card images + source logos** are CMS content slots (no design-specific assets). Confirm
   the Drupal Views field mapping supplies article thumbnail + publication logo per row.

---

## Sign-off
All sections measured against Figma IR at both breakpoints across all 3 desktop tab states. Every
hover and tab switch triggered and verified by computed style. Arbitrary Play-CDN classes confirmed
resolving at runtime (e.g. `text-[55px]`→55px, `bg-[#ffcb05]`→rgb(255,203,5), `rounded-[7px]`→7px,
`tracking-[-0.88px]`→-0.88px, `w-[196px]`→196px). No clear defect found; prior-round fixes all hold.

**DESKTOP: PASS · MOBILE: PASS** (with the documented residuals + the Video-tab client blocker).