# Specialities Page — Component Inventory

**Page file:** `html/specialities.html`
**Component files:** `html/specialities-components/` (page-specific) + `html/components/` (shared with homepage and other pages)

Each section of the specialities page is delivered as a reusable component. The main page file inlines these components for a complete visual preview; the standalone component files in `html/specialities-components/` are the canonical source the Drupal team should convert to Twig templates.

## Components used on this page

| # | Section | Component file | Reused from | Type |
|---|---------|----------------|-------------|------|
| 1 | Top utility bar | `html/components/01-utility-bar.html` | Homepage (verbatim) | Shared |
| 2 | Main navigation | `html/components/02-main-nav.html` | Homepage (verbatim) | Shared |
| 3 | Breadcrumb ("Home › Eye Specialities") | `html/specialities-components/01-breadcrumb.html` | Pattern from `eye-specialists-components/01-breadcrumb.html` | New |
| 4 | Hero banner ("Specialized Eye Care & Treatments") | `html/specialities-components/02-hero-banner.html` | Pattern from `eye-specialists-components/02-hero-banner.html` | New |
| 5 | Category filter (10 chips + "All") | `html/specialities-components/03-category-filter.html` | — (new interaction pattern: chip-based filter vs. dropdown) | New |
| 6 | Treatment card (single card, repeated ×12 in grid) | `html/specialities-components/04-treatment-card.html` | — | New (reusable Views row template) |
| 7 | Our Story and Vision | `html/specialities-components/05-our-story.html` | Pattern from `eye-specialists-components/06-our-story.html` | New |
| 8 | All Centres (header + 6-card region grid) | `html/specialities-components/06-all-centres.html` | Pattern from `centre-cluster-components/` region cards | New |
| 9 | Contact strip (3 phone/link buttons) | `html/specialities-components/07-contact-strip.html` | — (new pattern for this page) | New |
| 10 | Experts header (H2 + intro paragraph) | `html/specialities-components/08-experts-header.html` | Pattern from `eye-specialists-components/` hero text | New |
| 11 | Eye Care Experts (doctor-cards slider/grid) | `html/components/06-doctor-cards.html` | Homepage (verbatim) | Shared |
| 12 | Why Choose Centre For Sight? (4 feature cards) | `html/specialities-components/09-why-cfs.html` | Pattern from `eye-specialists-components/07-why-cfs.html` | New |
| 13 | Frequently Asked Questions (accordion) | `html/specialities-components/10-faq.html` | Pattern from `eye-specialists-components/08-faq.html` | New |
| 14 | Request a Callback form ("Could not find…" variant) | `html/specialities-components/11-callback-form.html` | Pattern from `eye-specialists-components/09-callback-form.html` (post-fix variant) | New |
| 15 | Footer | `html/components/15-footer.html` | Homepage (verbatim) | Shared |
| 16 | Sticky bottom action bar | `html/components/16-sticky-bar.html` | Homepage (verbatim) | Shared |

## Design tokens used

All tokens are defined in `css/input.css` (`@theme` block). This page introduces no new tokens.

- **Colors:** `primary` (#2B286F), `accent` (#FFCB05), `gray-100` (#F1F1F1), `text-dark` / `text-[#434343]` (#434343)
- **Custom colors (inline):** `#f4f4f8` (hero left panel), `#f1f1f1` (FAQ row bg), `#f7f7f7` (`+91` prefix bg)
- **Fonts:** `font-body` (Lato), `font-heading` (Poppins)
- **Container:** `--container-site` (1440px), `--container-inner` (1380px)
- **Radii:** `rounded-[6px]`, `rounded-[7px]`, `rounded-[10px]`, `rounded-[11px]`, `rounded-[14px]`, `rounded-[17px]`, `rounded-[28px]`, `rounded-full`

## JavaScript hooks

All JS interaction on this page uses stable `data-*` attributes. No new JS files or handler functions are required — all handlers live in `js/main.js`.

| Hook | Element | Behaviour |
|------|---------|-----------|
| `data-hero-callback` | Hero `<form>` | Phone callback form submit (stub; Drupal Webform handles post-handoff) |
| `data-category-filter` | Category `<ul>` | Filter list container hook |
| `data-category-chip` + `data-category` | Each chip `<a>` | Category filter link; active state toggled via Drupal exposed filter query param |
| `data-treatment-card` + `data-category` | Each treatment `<a>` | Card-level hook reserved for Drupal Views |
| `data-centre-card` + `data-region` | Each centre `<li>` | Centre card interaction hook (no current JS; reserved for Drupal) |
| `data-contact-link` | Each contact `<a>` | Contact strip link hook |
| `data-why-cfs-card` | Each Why CFS `<li>` | Hover state hook (CSS transitions; no JS) |
| `data-faq-item` | Each FAQ row `<div>` | FAQ accordion item wrapper |
| `data-faq-toggle` | FAQ `<button>` | Expand/collapse toggle |
| `data-faq-answer` | FAQ answer `<div>` | Hidden/shown answer panel |
| `data-callback-form` | Callback `<form>` | Lead form submit (stub; Drupal Webform handles post-handoff) |
| `data-slider="doctors"` | Doctor cards slider | Mobile slider handler (shared, `js/main.js`) |
| `data-menu-toggle` / `data-menu-panel` | Nav hamburger | Mobile nav overlay (shared, `js/main.js`) |
| `data-sticky-action` | Sticky bar | Shared sticky bar |

No framework dependencies. Pure vanilla JS. Selectors are attribute-based, not DOM-traversal-based.

## Dynamic content readiness checklist

| Requirement | How this page meets it |
|-------------|----------------------|
| No fixed card count | Treatment grid uses `grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-4` — any card count works |
| No nth-child styling | No `:nth-child` selectors on treatment cards, centre cards, or any grid |
| No text-length dependent heights | Treatment card uses `aspect-[4/5]` with absolute-positioned overlay — text length does not affect card height |
| Repeatable card structure | `04-treatment-card.html` is a single self-contained unit |
| Category filter is server-driven | Chips link to `?category=<slug>` — Drupal Views Exposed Filter resolves actual filtering |
| Semantic HTML5 | `<section>`, `<article>`, `<nav>`, `<main>`, `<h1>`–`<h3>` hierarchy maintained |
| Alt placeholders on all images | Every `<img>` has descriptive `alt=""` attribute |
| Form labels | `<label>` + `sr-only` on hero phone and callback form inputs |
| Keyboard focus | `focus-visible:outline` utilities on all interactive elements (chips, buttons, links, inputs) |
| Doctor cards scale | Reused verbatim from homepage — already validated for variable doctor count |