# Doctor Individual Page — Design Spec

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

## Purpose

Single-doctor profile page. Displays one practitioner with credentials, specializations, research history, and awards, alongside a sticky appointment-booking form. Reached from the Eye Specialists cluster (`/eye-specialists`) by clicking a doctor card. Static markup demonstrates the layout for one example doctor (Prof. Dr. Mahipal S Sachdev); Drupal renders the same structure for any `node--doctor` entity.

## Section order (top to bottom)

1. Utility bar (shared)
2. Main nav (shared)
3. Breadcrumb — "Home › Doctor › {doctor name}"
4. Hero — 2-col, left card with name + qualifications subtitle + experience + location + 4 jumplink pills, right card with photo
5. Two-column body wrapper (`lg:` ~64% / 36%):
   - Left col: Specializations grid → Qualification + Experience cards
   - Right col: Booking sidebar (sticky on `lg:`, falls in DOM order on mobile = appears after Qualification on mobile)
6. Research and Designation — full-width, 2-col bullet list with vertical dashed separator
7. Awards and Recognition — full-width carousel (9 cards in static, prev/next arrows on `lg:`, native swipe on mobile)
8. Callback form — full-width "Could not find what you are looking for?" / Request a Callback
9. Footer (shared)
10. Sticky bottom bar (shared, mobile-only)

## Visual decisions

| Decision | Choice |
|---|---|
| Hero tab buttons | Anchor scroll-jumplinks (no scroll-spy, no tab content swap) |
| Booking sidebar | `lg:sticky lg:top-[100px]` — pure CSS sticky, no JS |
| Awards carousel | `data-slider` — same generic infrastructure as blogs hero / homepage testimonials |
| Specialization grid | `grid-cols-1 lg:grid-cols-2` (4 rows × 2 cols on desktop, 7 cards = last cell empty) |
| Hero card cornering | `rounded-[28px]` (consistent on both halves) |
| Qual/Exp card cornering | `rounded-[15px]` (consistent with all secondary cards) |
| Research separator | Dashed vertical border on right `<ul>`, `lg:` only |
| Mobile section order | Hero → Specializations → Qualification → Experience → Booking sidebar → Research → Awards → Callback (DOM order; spec: form appears after info sections) |
| Page-specific CSS | None — Tailwind utilities cover everything |

## Tailwind tokens by section

### Hero

- Container: `max-w-[var(--container-site)] mx-auto`
- Grid: `grid-cols-1 lg:grid-cols-[857px_525px] gap-4 lg:gap-[20px]`
- Left card: `bg-[#f1f1f1] rounded-[28px] px-6 lg:px-[70px] py-8 lg:pt-[180px] lg:pb-[40px]`
- Subtitle: `font-heading font-normal text-[18px] lg:text-[25px] leading-[110%] text-primary`
- Name `<h1>`: `font-heading font-light text-[32px] lg:text-[45px] leading-[110%] lg:leading-[68px] tracking-[-1.8px] text-primary capitalize`
- Experience + location: `font-heading font-semibold text-[20px] lg:text-[29px] leading-[46px] text-primary inline-flex items-center gap-2 lg:gap-3`
- Map-pin SVG: `w-[16px] h-[20px] lg:w-[21px] lg:h-[27px] text-primary`
- Jumplink pills: `border border-primary rounded-[7px] text-primary font-heading font-light text-[15px] lg:text-[21px] leading-[32px] tracking-[-0.84px] capitalize px-4 py-2 lg:h-[50px] lg:px-[14px] hover:bg-primary hover:text-white transition-colors`
- Right card: `bg-[#f1f1f1] rounded-[28px] overflow-hidden h-[260px] lg:h-[392px]`
- Photo: `w-full h-full object-cover object-top`

### Specializations

- Section heading: `font-heading font-light text-[28px] lg:text-[45px] leading-[110%] lg:leading-[68px] tracking-[-1.8px] text-primary capitalize`
- Grid: `grid-cols-1 lg:grid-cols-2 gap-3 lg:gap-[18px]`
- Card: `bg-[#f1f1f1] rounded-[15px] flex items-center gap-4 lg:gap-[18px] p-3 lg:px-[22px] lg:py-[10px] h-[88px] lg:h-[105.73px]`
- Icon: `w-[68px] h-[68px] lg:w-[86px] lg:h-[86px] rounded-full object-cover shrink-0`
- Label: `font-heading font-semibold text-[18px] lg:text-[21px] leading-[110%] text-primary capitalize`

### Qualification + Experience

- Wrapper: `grid-cols-1 lg:grid-cols-2 gap-3 lg:gap-[8px]`
- Card outer: `bg-[#f1f1f1] rounded-[15px] overflow-hidden`
- Header bar: `bg-primary text-white text-center font-heading font-light text-[28px] lg:text-[39px] leading-[58px] capitalize h-[60px] lg:h-[78.73px] flex items-center justify-center`
- Body `<ul>`: `list-disc list-outside px-6 lg:px-[34px] py-6 lg:py-[24px] space-y-2 font-heading font-light text-[16px] lg:text-[21px] leading-[26px] lg:leading-[32px] text-primary capitalize`

### Booking sidebar

- Form: `bg-primary rounded-[15px] p-6 lg:p-[28px] text-white lg:sticky lg:top-[100px]`
- Heading: `font-heading font-semibold text-[18px] lg:text-[21px] leading-[46px] text-center`
- Field label: `font-heading font-normal text-[16px] lg:text-[18px] leading-[27px] block mb-2`
- Field input: `w-full h-[45px] bg-transparent border border-white rounded-[7px] px-4 text-[15px] font-light placeholder-white/50 focus:outline-none focus:ring-2 focus:ring-accent`
- Consent text: `font-heading font-normal text-[14px] lg:text-[15px] leading-[20px] lg:leading-[22px] text-justify`
- Submit CTA: `bg-accent text-primary rounded-[7px] h-[55px] w-full font-heading font-normal text-[20px] lg:text-[22px]`

### Research and Designation

- Section heading: same as Specializations heading
- Grid: `grid-cols-1 lg:grid-cols-2 gap-y-2 lg:gap-x-[60px] lg:gap-y-0`
- Left `<ul>`: standard list styling
- Right `<ul>`: standard list + `lg:border-l-[3px] lg:border-dashed lg:border-[#EBEAEA] lg:pl-[60px]`

### Awards

- Section heading: same as Specializations heading
- Slider container: `relative` with `data-slider`
- Track: `flex gap-2 lg:gap-[11px] overflow-x-auto snap-x snap-mandatory scroll-smooth`
- Card: `w-[180px] lg:w-[205px] h-[200px] lg:h-[228px] bg-[#f1f1f1] rounded-[15px] snap-start shrink-0 flex flex-col items-center pt-4 lg:pt-[15px] px-3 lg:px-[8px]`
- Badge: `w-[48px] h-[48px] lg:w-[55px] lg:h-[55px] shrink-0`
- Card text: `font-heading font-light text-[14px] lg:text-[17px] leading-[22px] lg:leading-[26px] text-center text-primary capitalize mt-3 lg:mt-[18px]`
- Arrow: `hidden lg:flex w-[43px] h-[43px] rounded-full bg-white border border-primary` (positioned absolute -left/-right)

### Callback form

Same shape as `blogs-components/10-callback-form.html`. See that file's spec for tokens.

## Responsive behavior

Single breakpoint: `lg:` (1024px).

| Section | Below `lg:` | At/above `lg:` |
|---|---|---|
| Hero cards | Stack vertically (text card top, photo bottom) | Side-by-side ~857/525 |
| Hero photo card | `h-[260px]` | `h-[392px]` |
| Two-column body | Single column (DOM order: Specs → Qual → Exp → Booking) | 2-col grid with sticky sidebar |
| Specializations grid | 1 column (7 cards stack) | 2 columns (4 rows, last cell empty) |
| Qualification + Experience | Stack | Side-by-side |
| Booking sidebar | Static, after Qualification cards | Sticky, top: 100px from viewport top |
| Research separator | Hidden (border disabled) | Visible dashed left border on right column |
| Awards arrows | Hidden (`hidden lg:flex`) | Visible at `-left-2` / `-right-2` |
| Awards carousel | Native horizontal swipe | Arrows + scroll snap |

## Out of scope

- Doctor cluster page link-out — `eye-specialists.html` doctor card "Book An Appointment" buttons currently have `href="#"`. Wiring those to `/doctor/<slug>` is a Drupal integration concern (covered in `doctor-individual-integration-notes.md`).
- Search-engine schema (`schema.org/Physician`) — handled by Drupal metatag config.
- Other "Individual" page types (Centre, City, Innov Eyes) — separate specs.
- Multilingual variants — content-only, handled by Drupal translation layer.