# CFS Handover — Full Update

**Date:** 2026-05-11
**For:** Drupal 10 theme developer
**Supersedes:** all prior bundles (2026-04-28, 2026-04-29, 2026-05-04, 2026-05-08)

This bundle is a full, current snapshot of the CFS frontend. **All 11
pages now follow the CMS-friendly `<p>` markup pattern**, and includes
the new InnovEyes treatment landing + updated Surgery Cost section on
the cataract page. The doctor-cards section has been split into two
separate CMS blocks (06a featured + 06b list).

## What changed since 2026-05-08

### 1. CMS-friendly `<p>` markup (full coverage — all 11 pages + 16 components)

Every `<p>` tag across the codebase is now **bare** (`<p>content</p>` —
no `class`, `id`, or `style`). Styling lives on the wrapping `<div>`
instead. This is required because the client CMS strips inline classes
off `<p>` elements when editors save content.

**See `docs/cms-paragraphs-convention.md` for the full rules.**

`grep -c '<p class=' html/**/*.html` returns **0 across every file** in
this bundle.

### 2. InnovEyes treatment landing page (new)

`html/innov-eyes.html` — Wavelight Plus InnovEyes refractive surgery
landing page. 22 sections (hero, treatment description, candidates,
journey, cost factors, FAQ, related, callback, etc.).

- Component partials: `html/innov-eyes-components/`
- Design spec: `docs/innov-eyes-design-spec.md`
- Component inventory: `docs/innov-eyes-component-inventory.md`
- Drupal mapping: `docs/innov-eyes-drupal-mapping.md`
- Integration notes: `docs/innov-eyes-integration-notes.md`

### 3. Surgery Cost section on cataract page (visual redesign)

The placeholder Surgery Cost table on `html/cataract.html` was replaced
with the latest Figma design: two rounded panels — purple "Surgery &
Lenses" (left) and gray "Cost" (right), with 5 lens types and prices.

**Content note:** the current table has two rows labelled "Cataract
Surgery with Monofocal Lens" (rows 1 and 4) both showing ₹20,345 (per
client confirmation). If row 4 should be a distinct lens type, swap
the label.

### 4. Doctor cards section split into two CMS blocks

`html/components/06-doctor-cards.html` (and the inlined version in
`html/index.html`) was split into **two separate sections** so each
can be rendered as an independent Drupal block:

- **06a-doctor-cards-featured** — title block + single `featured_doctor`
  entity (Mahipal). New aria-label: `"Featured eye care expert"`.
- **06b-doctor-cards-list** — scrollable collection of `doctor` entities
  + view-all card. New aria-label: `"Our eye care doctors"`.

Visual flow between the two sections matches the original
(pb-5+pt-5 = mb-10 mobile / pb-6+pt-6 = mb-12 desktop).

### 5. Cataract symptoms grid simplified

The cataract symptoms section was changed from a mobile-carousel +
desktop-grid pattern to a unified responsive grid (matches the broader
"single render across breakpoints" pattern from the 2026-04-15 unification).
Stale carousel JS removed from `js/cataract.js`.

## All 11 pages in this package

| Page | File | Component folder |
|---|---|---|
| Homepage | `html/index.html` | `html/components/` |
| Cataract speciality | `html/cataract.html` | `html/cataract-components/` |
| Centre cluster (state listing) | `html/centre-cluster.html` | `html/centre-cluster-components/` |
| Specialities listing | `html/specialities.html` | `html/specialities-components/` |
| Doctors / Eye specialists listing | `html/eye-specialists.html` | `html/eye-specialists-components/` |
| Blogs listing | `html/blogs.html` | `html/blogs-components/` |
| Blog detail | `html/blog-individual.html` | `html/blog-individual-components/` |
| Doctor profile | `html/doctor-individual.html` | `html/doctor-individual-components/` |
| Centre profile | `html/centre-individual.html` | `html/centre-individual-components/` |
| City landing | `html/city-individual.html` | `html/city-individual-components/` |
| InnovEyes treatment | `html/innov-eyes.html` | `html/innov-eyes-components/` |

## Start here

1. **`docs/cms-paragraphs-convention.md`** — **read this first.** The
   CMS-friendly `<p>` rule affects every Twig template you write for
   editor-controlled body text.

2. **`docs/drupal-handover-patch.md`** — responsive-markup unification
   changelog (single-render pattern: nav, centres, doctor cards,
   testimonials, tabs).

3. **`README.md`** — build commands and file structure.

4. **Per-page Drupal docs** — one set per page under `docs/`. Naming:
   `<page>-design-spec.md`, `<page>-component-inventory.md`,
   `<page>-drupal-mapping.md`, `<page>-integration-notes.md`.

## Preview

```bash
# Preview-only (no Node required — output.css is pre-built)
python3 -m http.server 8765
# Then open:
#   http://localhost:8765/html/index.html
#   http://localhost:8765/html/cataract.html
#   http://localhost:8765/html/innov-eyes.html
#   ...etc

# If you want to rebuild Tailwind after class changes:
npm install   # or pnpm install
npx @tailwindcss/cli -i ./css/input.css -o ./css/output.css
```

## Key conventions

- **Single breakpoint:** `lg:` = 1024px. Below = mobile; 1024px+ = desktop.
- **JS:** vanilla, no framework. `js/main.js` loads on every page;
  `js/cataract.js` is cataract-specific (tabs + FAQ accordion).
- **Component partials** (`html/components/`, `html/<page>-components/`)
  are the canonical templates for Drupal Twig conversion. The inlined
  versions inside the top-level page HTML files are kept in sync.
- **Tab-swap and accordions** use the generalized `[data-tab-swap]`
  and `[data-faq-question]` hooks in `main.js`.
- **No per-page CSS.** All colour, spacing, typography flow from
  `css/output.css` (Tailwind v4) + `css/custom.css` + `css/custom-cataract.css`.
- **CMS-friendly `<p>` tags** — see `docs/cms-paragraphs-convention.md`.

## Open items / things to confirm with client

- **Surgery Cost row 4 label** (cataract page) — currently a duplicate
  "Cataract Surgery with Monofocal Lens" at ₹20,345 per latest client
  confirmation. If a distinct lens type was intended, please send the
  correct label.
- **Map embed** (`centre-individual.html` section 06) — placeholder
  `<iframe>`; replace `src` with the per-centre Google Maps embed URL.
- **Booking sidebar** (`doctor-individual.html` section 06) — form
  posts nowhere yet; wire to the same endpoint as the main callback
  form, or to a doctor-specific intake handler.
- **Awards carousel** (`doctor-individual.html` section 08) — confirm
  per-doctor awards count limit and lazy-load strategy.
- **Speciality accordion data** (`city-individual.html` section 05) —
  bundled content is sample Mumbai data; final list per city should
  come from the city → speciality reference field documented in the
  Drupal mapping.
- **InnovEyes** — see `docs/innov-eyes-integration-notes.md` for
  page-specific open items.