# City Individual Page — Design Spec

**Page file:** `html/city-individual.html`
**Drupal route:** `/eye-hospital-in-<city>`
**Components dir:** `html/city-individual-components/`
**Reference:** Figma CSS dump + screenshot supplied by client.

## Purpose

Showcases all CFS centres in one city (sample: Mumbai). Hero with embedded callback form + cityscape photo, about paragraph, all centres in the city as a card grid, Specialties Available horizontal accordion, doctors practising in this city, FAQ, services-across-localities text strip, callback form.

## Section order

1. Utility bar (shared)
2. Main nav (shared)
3. Breadcrumb — Home › Eye Hospital in {city}
4. Hero — 2-col, left card with heading + tagline + embedded callback form, right cityscape photo
5. About paragraph (full-width single block)
6. Centres in {city} — 3-col grid of N centre cards
7. Specialties Available — horizontal accordion (1 expanded + N-1 collapsed verticals, click to swap)
8. Eye Care Specialists — heading + 4 doctor cards + Load More
9. Frequently Asked Questions — 3-item native accordion
10. Cataract Surgery Services Across {city} — heading + pipe-separated locality links
11. Callback form
12. Footer (shared)
13. Sticky bottom bar (shared, mobile-only)

## Visual decisions

| Decision | Choice |
|---|---|
| Specialty accordion | JS-driven horizontal accordion using existing `[data-tab-swap]` |
| Hero | 2-col light-gray card (left, `lg:w-[964px]`) + photo card (right, `lg:w-[525px]`) |
| Centres grid | `grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6 lg:gap-[28px]` — natural row wrapping |
| FAQ | Native `<details>`/`<summary>`, 3 items |
| Services-across strip | Pipe-separated localities `<a>` links, centered |
| Active nav | "Locate Us" |

## Tokens by section

### Hero

- Container: `max-w-[var(--container-site)] mx-auto px-6 lg:px-0`
- Grid: `grid-cols-1 lg:grid-cols-[964px_525px] gap-4 lg:gap-[16px]`
- Left card: `bg-[#f4f4f8] rounded-[28px] px-6 lg:px-[82px] py-8 lg:py-[60px]`
- Heading: `font-heading font-semibold text-[36px] lg:text-[55px] leading-[110%] lg:leading-[82px] text-primary`
- Tagline: `font-heading font-normal text-[18px] lg:text-[27px] leading-[28px] lg:leading-[37px] text-primary max-w-[552px]`
- Form input: same shape as centre-individual hero callback
- Right card: `bg-[#f1f1f1] rounded-[28px] overflow-hidden h-[260px] lg:h-auto lg:min-h-[547px]`

### About

- Section: `max-w-[var(--container-site)] mx-auto px-6 lg:px-0 mt-12 lg:mt-[40px]`
- Body: `font-heading font-light text-[16px] lg:text-[20px] leading-[26px] lg:leading-[30px] text-primary text-justify`

### Centres grid

- Heading: `text-[28px] lg:text-[50px] font-light tracking-tight text-primary text-center`
- Grid: `grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6 lg:gap-[28px]`
- Card: existing centre-card markup (white bg, image top, name + city + Book + phone bottom)

### Specialties accordion

- Wrapper: `flex flex-col lg:flex-row items-stretch rounded-[20px] overflow-hidden bg-[#f1f1f1] lg:h-[636px]`
- Each panel:
  - `data-tab data-target="<slug>" data-active="true|false"`
  - Active: `lg:flex-1 bg-[#f1f1f1]` with full content
  - Collapsed: `lg:w-[92px] lg:shrink-0` with rotated label and `--spec-bg` colored background
- Active state heading: `font-heading font-light text-[24px] lg:text-[36px] text-primary`
- Active body: `text-[16px] lg:text-[20px] font-light text-black text-justify`
- Collapsed label: `font-heading font-light text-[18px] lg:text-[36px] text-white lg:rotate-[-90deg]`
- Background colors progress: `#2B286F` → `#3A3692` → `#4641B4` → `#514CD0` → `#5B54EB`

### Doctor row + FAQ + Services strip + Callback

Same shapes as in centre-individual / blog-individual. See those specs.

## Responsive

- Below `lg:`: hero stacks, centres single-col, accordion stacks vertically (each panel becomes a horizontal block, no rotation), doctors 1-col → 2-col at sm:.
- At `lg:`: full 2-col hero, 3-col centres, horizontal accordion, 4-col doctor row.

## Out of scope

- Locality detail pages (`/eye-hospital-in-mumbai/dombivli`) — separate template.
- Innov Eyes — separate spec.
- Multilingual variants — Drupal translation.