# CFS Frontend Handover — Cataract (Speciality) update — 2026-06-09
**Audience:** Drupal theme team integrating the static HTML/Tailwind front-end.
**Scope of this bundle:** the **Cataract speciality page** (`html/cataract.html`)
verified section-by-section against the **new Figma frame** (desktop `3121:27330`
+ mobile `3121:27168`), plus the shared homepage components it reuses. All other
pages are included unchanged as a full snapshot.
## What changed since the last bundle (cfs-handover-2026-06-08)
### Cataract page reconciled to the NEW Figma ("CFS (Copy)" frames 3121:*)
The cataract page was originally built against the older `1075:*` Figma frame.
This pass re-verified every section against the new `3121:*` desktop frame and the
`3121:27168` mobile frame using the Figma verify oracle.
1. **Shared sections refreshed from the verified homepage** (NOT re-derived from the
cataract Figma — they're reused homepage components): utility-bar, main-nav,
eye-care-experts (doctor cards), centres, testimonials, callback-form, footer,
sticky-bar, **and blogs**. Blogs now uses the homepage "Vision Care Insights"
3-column design with cataract-specific content (How to Choose the Best Eye Care
Centre / Signs & Symptoms of Cataracts / Cataract Surgery Recovery).
2. **Dynamic tab sections (IMPORTANT for CMS).** The tabbed sections (Understanding,
Risk Factors, Types of Cataract Surgeries, Types of IOL, Risks/Prevention) now
handle a **dynamic tab count** — the CMS may add tabs beyond the 3–4 shown in
Figma. Tab bars use `flex-wrap` + `whitespace-normal break-words` so 5/6/7+ tabs
wrap cleanly with **no horizontal overflow and no clipped labels** (stress-tested
at 7 tabs). Do not reintroduce fixed per-tab pixel widths that assume a count.
3. **Hover states** derived from the Figma component variants and verified:
hero CTA (outline + bold), why-CFS cards (expand: bg→white, title shrink +
description reveal, underline grow), symptom cards (border + image zoom),
blog cards (panel reveal + Read-More underline).
4. **Mobile Risks & Complications** rebuilt to the mobile Figma (`Component 247`),
which differs from desktop: light `#f1f1f1` panel, dark text, two inline tabs
side-by-side, a **truncated** bulleted list with a working **Read more / Read
less** toggle. Desktop keeps the navy-panel design (responsive split via
`lg:hidden` / `hidden lg:block`).
## Files
- `html/cataract.html` — the assembled page (source of truth).
- `html/cataract-components/*.html` — the 17 per-section partials, **regenerated to
match the current page** (hero, understanding, risk-factors, surgery-types,
patient-journey, iol-benefits, vision-types, surgery-cost, risks-prevention,
why-choose-us, 11-testimonials, video, 13-eye-care-experts [featured + scroll],
14-centres, faq, blogs, 17-callback-form).
## Pages included (full snapshot)
`index.html` (homepage), `cataract.html`, `centre-cluster.html`,
`eye-specialists.html`, `specialities.html`, `blogs.html`,
`doctor-individual.html`, `centre-individual.html`, `blog-individual.html`,
`city-individual.html`, `innov-eyes.html` — plus their `*-components/` folders and
shared `components/`.
## Preview
No build step — Tailwind is loaded via the Play CDN and resolves in-browser. From
the bundle root:
```bash
python3 -m http.server 8765
# then open http://localhost:8765/html/cataract.html
```
## Key conventions (unchanged)
- **Tailwind Play CDN only** — no CLI/PostCSS build. Each page's `` loads the
CDN + `css/custom.css`; classes are arbitrary values (`bg-[#2b286f]`, `text-[69px]`).
- **CMS-friendly `` tags** — paragraph text is CMS-managed and inline classes on
`
` are stripped, so every `
` is bare; styling lives on the wrapper element
(or the predefined `cms-*` classes in `css/custom.css`).
- **Dynamic tabs** — see point 2 above; tab counts are CMS-driven.
## Open items needing client input
- **Surgery Cost section** — the cataract Figma's Surgery-Cost frame is not yet
finalized in the design, so this section is left on the existing build.
- **Patient Journey** — the new Figma combines "When to Choose Surgery?" + the
journey stepper into one block with a different arrangement than the current
build (content is all present). Confirm whether to re-flow to the new layout.
- The "video" and small "disclaimer" blocks were dropped in the new desktop design;
the video remains on mobile. Confirm final intent.