# Specialities Page — Design Spec **Page file:** `html/specialities.html` **Page slug:** `specialities.html` **Nav label:** Specialities **H1:** Specialized Eye Care & Treatments **Component directory:** `html/specialities-components/` ## Purpose Listing/treatment discovery page for Centre for Sight eye care specialities. Users can: 1. Browse and filter treatment cards by category chip (10 categories + "All") 2. Explore all CFS regions via the All Centres section 3. Learn about CFS's story, expert doctors, and why-choose propositions 4. Contact CFS via the 3-column phone band or callback form 5. Request a callback if they cannot find what they need ## Top-level sections (render order) | # | Section | Component file | Shared? | |---|---------|----------------|---------| | 1 | Utility bar | `components/01-utility-bar.html` | Shared | | 2 | Main nav | `components/02-main-nav.html` | Shared | | 3 | Breadcrumb | `specialities-components/01-breadcrumb.html` | Per-page | | 4 | Hero banner | `specialities-components/02-hero-banner.html` | Per-page | | 5 | Category filter | `specialities-components/03-category-filter.html` | Per-page | | 6 | Treatments grid (12 cards, static) | `specialities-components/04-treatment-card.html` (×12) | Per-page | | 7 | Our Story and Vision | `specialities-components/05-our-story.html` | Per-page | | 8 | All Centres | `specialities-components/06-all-centres.html` | Per-page | | 9 | Contact strip | `specialities-components/07-contact-strip.html` | Per-page | | 10 | Experts header | `specialities-components/08-experts-header.html` | Per-page | | 11 | Eye Care Experts (doctor cards) | `components/06-doctor-cards.html` | Shared | | 12 | Why CFS chips | `specialities-components/09-why-cfs.html` | Per-page | | 13 | FAQ accordion | `specialities-components/10-faq.html` | Per-page | | 14 | Callback form | `specialities-components/11-callback-form.html` | Per-page | | 15 | Footer | `components/15-footer.html` | Shared | | 16 | Sticky bar | `components/16-sticky-bar.html` | Shared | ## Breakpoints | Name | Width | Notes | |------|-------|-------| | Mobile | 375px | Single-column stack; hero right panel collapses above content; treatment grid 2 cols | | Tablet | 768px | 3-col treatment grid; 3-col centre grid; category chips wrap naturally | | Desktop | 1440px | 4-col treatment grid; 6-col centre grid; hero side-by-side; chips single row | Tailwind breakpoint in use: `lg:` = 1024px (project standard). Below `lg:` is treated as mobile/tablet. ## Design Tokens All tokens declared in `css/input.css` (`@theme` block). No new tokens introduced by this page. ### Colors - `--color-primary` / `text-primary` — `#2B286F` (navy): headings, body text, CTA labels, button bg - `--color-accent` / `bg-accent` — `#FFCB05` (yellow): CTA buttons, submit button (mobile), All Centres arrow button - `bg-[#f4f4f8]` — hero left panel background (cool off-white) - `bg-[#f1f0f0]` / `bg-gray-100` — Our Story bg, Why CFS card bg, FAQ row bg - `bg-[#f1f1f1]` — FAQ accordion row background - `bg-[#f7f7f7]` — `+91` prefix box in hero phone input - `text-[#434343]` / `text-text-dark` — body text in certain blocks ### Fonts - `font-body` (Lato): hero H1 bold (60px/68px desktop, 34px/42px mobile), CTA button text (24px desktop, 20px mobile) - `font-heading` (Poppins): all other text — category chips (13px mobile / 15px desktop), Why CFS titles (31px desktop / 20px mobile), FAQ questions (25px desktop / 15px mobile), Our Story heading (55px desktop / 30px mobile), All Centres heading (55px desktop / 30px mobile) ### Container tokens - `max-w-[var(--container-site)]` — 1440px outer page wrapper - `max-w-[var(--container-inner)]` — 1380px inner content width (used by Our Story, Experts header, Why CFS, callback form) ### Border radii - `rounded-[28px]` — hero panels (desktop) - `rounded-[17px]` — hero panels (mobile) - `rounded-[14px]` — treatment card (desktop) - `rounded-[11px]` — Our Story card, Why CFS cards, callback form card (desktop) - `rounded-[10px]` — treatment card (mobile), centre region card, callback form inner card - `rounded-full` — category chips, All Centres arrow CTA, contact strip buttons - `rounded-[7px]` — hero phone input, contact strip buttons - `rounded-[6px]` — callback form inputs, submit button --- ## Section Details ### 1. Utility Bar - **Purpose:** Site-wide top strip — phone numbers, email, links - **Layout:** Single-row; left links, right contact details - **Content fields:** Phone numbers (2), email, nav links (Help, Locate Us, etc.) - **Reuse:** `html/components/01-utility-bar.html` verbatim - **Screenshot:** `docs/screenshots/specialities-utility-bar.png` ### 2. Main Nav - **Purpose:** Primary site navigation with logo, main links, hamburger - **Layout:** Horizontal desktop; collapsible full-screen overlay on mobile - **Content fields:** Logo, nav links (Home, Treatments, Doctors, etc.), mobile toggle - **Reuse:** `html/components/02-main-nav.html` verbatim - **Screenshot:** `docs/screenshots/specialities-main-nav.png` ### 3. Breadcrumb - **Purpose:** Positional navigation — "Home › Eye Specialities" - **Layout:** Single-row `
    ` with chevron separators - **Content fields:** Two items — "Home" (link to `/`) + "Eye Specialities" (current page, `aria-current="page"`) - **Component:** `html/specialities-components/01-breadcrumb.html` - **Screenshot:** `docs/screenshots/specialities-breadcrumb.png` ### 4. Hero Banner - **Purpose:** Page headline, subtitle, and inline phone callback form - **Layout:** Two-column `flex-col-reverse lg:flex-row` — left cream card (703px wide, 672px tall desktop), right family photo (663×672, fills remaining space). Mobile: image stacks above content. - **Content fields:** - H1 text: "Specialized Eye Care & Treatments" (Lato 700, 60px/68px desktop, 34px/42px mobile) - Subtitle paragraph: "Advanced treatments to protect your vision" (Poppins 400, 27px/46px desktop) - Phone input placeholder: "Contact Number" - `+91` prefix (decorative) - CTA button label: "Request a Callback" - Hero image: `assets/images/specialities-family.png` (placeholder — copy of `centre-delhi.png`) - **Left panel bg:** `#f4f4f8`, radius 28px (desktop) / 17px (mobile) - **Right panel bg:** `bg-primary` (navy) with image overlay - **Component:** `html/specialities-components/02-hero-banner.html` - **Screenshot:** `docs/screenshots/specialities-hero.png` ### 5. Category Filter - **Purpose:** Let users filter the treatments grid by speciality category chip - **Layout:** `flex flex-wrap justify-center gap-2 lg:gap-3` — pills wrap naturally on mobile, fit a single row on desktop (10 chips + "All") - **Content fields (10 category chips + "All"):** - All (default active, navy bg) - Cataract (`data-category="cataract"`) - LASIK (`data-category="lasik"`) - Glaucoma (`data-category="glaucoma"`) - Retinoblastoma (`data-category="retinoblastoma"`) - Squint Eye Treatment (`data-category="squint"`) - Cornea Transplant (`data-category="cornea"`) - Low Vision Aids (`data-category="low-vision-aids"`) - Retina & Uvea (`data-category="retina-uvea"`) - Oculoplasty (`data-category="oculoplasty"`) - **Active state:** active chip gets `bg-primary text-white`; inactive chips get `border border-primary bg-white text-primary` - **Stable JS hooks:** `data-category-filter` (list), `data-category-chip` + `data-category=""` (each chip) - **Component:** `html/specialities-components/03-category-filter.html` - **Screenshot:** `docs/screenshots/specialities-category-filter.png` ### 6. Treatments Grid - **Purpose:** Browse all available treatments as filterable image cards - **Layout:** `grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 gap-3 lg:gap-4` — 4 columns on desktop, 3 on tablet, 2 on mobile. Static markup shows 12 cards; Drupal Views emits the real rows. - **Per-card content fields:** image (media), title (text overlay at bottom), category slug (`data-category`), booking URL (`href`) - **Card anatomy:** full-bleed `aspect-[4/5]` image → absolute bottom overlay with `bg-primary/90` → white title text. Hover: image scale-105 transition. - **Stable JS hook:** `data-treatment-card` + `data-category=""` on each `` - **Component (single card):** `html/specialities-components/04-treatment-card.html` - **Note:** `
    ` wraps only this grid section - **Screenshot:** `docs/screenshots/specialities-treatments-grid.png` ### 7. Our Story and Vision - **Purpose:** Trust-building prose block about CFS's founding and mission - **Layout:** Full-width `bg-gray-100` card (`rounded-[11px]`, padding 70px H desktop), constrained to `container-inner`. Single heading + single body paragraph. - **Content fields:** - Heading: "Our Story and Vision" (Poppins 300, 55px/90px desktop) - Body: long paragraph (Lato 400, 21px/34px desktop) covering founding (1996, Prof. Mahipal S. Sachdev), 350 doctors, 95+ centres, NABH accreditation - **Component:** `html/specialities-components/05-our-story.html` - **Screenshot:** `docs/screenshots/specialities-our-story.png` ### 8. All Centres - **Purpose:** Showcase CFS's regional presence; link to the centre-cluster listing page - **Layout:** Header row (H2 left + arrow CTA right) + 6-card grid `grid-cols-2 sm:grid-cols-3 lg:grid-cols-6` - **Content fields:** - H2: "All Centres" - Subheading: "Find the Nearest Eye Care Centre for Clearer Vision." - Arrow CTA: circular button linking to `centre-cluster.html` (`aria-label="View all centres"`) - 6 region cards: Delhi, Telangana, Maharashtra, Gujarat, Rajasthan, Haryana - Per-card: image, region label, link to `centre-cluster.html#` - **Stable JS hook:** `data-centre-card` + `data-region=""` on each `
  1. ` - **Component:** `html/specialities-components/06-all-centres.html` - **Screenshot:** `docs/screenshots/specialities-all-centres.png` ### 9. Contact Strip - **Purpose:** 3-column phone/link band for quick contact access - **Layout:** `flex flex-col lg:flex-row lg:items-stretch gap-3 lg:gap-4` — stacked on mobile, side-by-side on desktop - **Content fields (3 items):** 1. "Delhi NCR: 08065423777" (tel: link, phone icon) 2. "Rest of India: 08065423666" (tel: link, phone icon) 3. "International Patients" (anchor link to `#international-patients`, globe icon) - **Stable JS hook:** `data-contact-link` on each `` - **Component:** `html/specialities-components/07-contact-strip.html` - **Screenshot:** `docs/screenshots/specialities-contact-strip.png` ### 10. Experts Header - **Purpose:** H2 + introductory paragraph introducing the doctor-cards section below - **Layout:** Centered single-column block within `container-inner` - **Content fields:** - H2: "Our Expert Eye Care Specialists" (Poppins 300, 44px/58px desktop) - Body: paragraph about CFS doctors, personalized care, world-class treatment (Poppins 300, 18px/28px desktop) - **Component:** `html/specialities-components/08-experts-header.html` - **Screenshot:** `docs/screenshots/specialities-experts-header.png` ### 11. Eye Care Experts - **Purpose:** Display the CFS doctor slider — identical to homepage section 06 - **Layout:** Horizontal slider on mobile (`data-slider="doctors"`), responsive grid on desktop; each card: photo → body (qualifications, name, specialities, booking link) → experience footer band - **Content fields:** Same as homepage doctor cards — photo, qualifications, location chip, name, speciality tags, booking URL, years of experience - **Reuse:** `html/components/06-doctor-cards.html` verbatim - **Screenshot:** `docs/screenshots/specialities-eye-care-experts.png` ### 12. Why CFS Chips - **Purpose:** Four feature-highlight cards summarising CFS differentiators - **Layout:** `grid-cols-2 lg:grid-cols-4` — 4 columns desktop, 2 mobile. Each card: `bg-gray-100`, radius 11px, hover → `bg-primary` with white text transition. - **Content fields (4 cards):** 1. "Eye Care Specialists" 2. "Advanced Technology" 3. "Comprehensive Services" 4. "Patient-Centered Care" - Each card: H3 (Poppins 300, 31px/37px) + decorative 68px horizontal line (`bg-black` → `bg-white` on hover) - **Stable JS hook:** `data-why-cfs-card` (hover-only, CSS transitions; no JS required) - **Component:** `html/specialities-components/09-why-cfs.html` - **Screenshot:** `docs/screenshots/specialities-why-cfs.png` ### 13. FAQ Accordion - **Purpose:** Answer common questions; 6 placeholder questions in static markup - **Layout:** Vertical stack of `bg-[#f1f1f1]` rows (min-height 87px desktop / 44px mobile), constrained to max-w-[1272px]. Collapse/expand via `data-faq-toggle`. - **Content fields (6 rows — currently placeholder/cataract content):** 1. "What Exactly Is Done In Cataract Surgery?" — marked `*PLACEHOLDER*` 2. "Is Cataract Surgery A Major Surgery?" 3. "How Painful Is Cataract Surgery?" 4. "Who Gets Affected By Cataracts?" 5. "Is Cataract Surgery The Only Surgical Option For Treating Cataracts?" 6. "Which Lens Is Best For Cataract?" - **Note:** All 6 questions are cataract-related placeholders. Drupal content team must replace with specialities-specific FAQ content before launch. - **Stable JS hooks:** `data-faq-item`, `data-faq-toggle`, `data-faq-answer` (handled by `js/main.js`) - **Component:** `html/specialities-components/10-faq.html` - **Screenshot:** `docs/screenshots/specialities-faq.png` ### 14. Callback Form - **Purpose:** Catch-all lead capture — "Could not find what you are looking for?" - **Layout:** Full-width section with `bg-primary` panel (with background image overlay `callback-bg.png`). White card (478×439 desktop, radius 11px) on left side holds form. Mobile: card goes full-width (`mx-5 my-5 w-[calc(100%-2.5rem)]`) with semi-transparent primary overlay. - **Content fields:** - Eyebrow: "Could not find what you are looking for?" (Poppins 300, 22px) - Heading: "Request a Callback" (Poppins 400, 38px) - Full name input (placeholder "Full name") - Phone input with `+91` prefix (placeholder "Mobile Number") - Submit label: desktop "Book An Appointment" / mobile "Submit" - **Variant:** "Could not find" eyebrow variant with `min-w-0` fix applied to phone input - **Stable JS hook:** `data-callback-form` - **Component:** `html/specialities-components/11-callback-form.html` - **Screenshot:** `docs/screenshots/specialities-callback.png` ### 15. Footer - **Purpose:** Site-wide footer — quick links, contact, social, copyright - **Layout:** Multi-column grid with CFS logo, link groups, phone/address, social icons - **Reuse:** `html/components/15-footer.html` verbatim - **Screenshot:** `docs/screenshots/specialities-footer.png` ### 16. Sticky Bar - **Purpose:** Persistent bottom bar (mobile) / chat bubble (desktop) for quick actions - **Layout:** Full-width fixed bar on mobile; right-fixed circular chat icon on desktop - **Reuse:** `html/components/16-sticky-bar.html` verbatim - **Screenshot:** `docs/screenshots/specialities-sticky-bar.png` ## Responsive strategy Follow existing project convention: **single DOM, Tailwind breakpoint utilities**. No duplicate mobile-specific blocks. | Section | Mobile (375px) | Desktop (1440px) | |---------|---------------|------------------| | Hero | Stack `flex-col-reverse`: image above, content below | Side-by-side `flex-row` | | Category filter | Chips wrap to multiple rows | Chips fit single row | | Treatments grid | 2 columns | 4 columns (3 on sm:) | | All Centres grid | 2 columns | 6 columns (3 on sm:) | | Contact strip | Stacked full-width buttons | 3 equal columns side-by-side | | Why CFS | 2 columns | 4 columns | | FAQ | Same vertical stack | Same vertical stack, larger text | | Callback form | Full-width card, semi-transparent bg overlay | Left card + decorative right bg |