# Blog Individual Page — Design Spec

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

## Purpose

Single article reading page for the CFS blog. Showcases one full blog post (sample: "Antibiotic Eye Drops: Types, Uses, and Side Effects") with full-bleed hero image, key-takeaways summary card, 2-col body (article + sticky TOC sidebar with Readers Favorite widget), three chip-tab content groups (Types/Uses/Side Effects), step-by-step stepper, do's-and-don'ts row, comparison cards, related-blogs row, FAQ, and callback form. Reached from the Blogs cluster page.

## Section order (top to bottom)

1. Utility bar (shared)
2. Main nav (shared)
3. Hero — full-bleed image + dark gradient + breadcrumb (white) + title + author/date/read-time meta
4. Blog Summary card (gray, key takeaways) — full-width inside container
5. **Two-column wrapper** (`lg:` ~67/33):
   - **Left column** (article content): Introduction → What Are → How Do They Work → Antibiotic vs Lubricating → Why Antibiotics Don't Work → Types (tabs) → Uses (tabs) → How to Use → Stepper → Dosage → Do's-Don'ts → Other Uses → Side Effects (tabs) → Precautions → When to See
   - **Right column** (sticky TOC at top + in-flow Readers Favorite widget below)
6. Conclusion (full-width gray card)
7. Related Blogs (full-width 4-card row)
8. FAQ accordion (full-width, 6 items)
9. Callback form (full-width)
10. Footer (shared)
11. Sticky bottom bar (shared, mobile-only)
12. Floating right-rail buttons (scroll-up + share, fixed bottom-right desktop only)

## Visual decisions

| Decision | Choice |
|---|---|
| TOC sidebar | Sticky + jumplinks (no scroll-spy JS) |
| Tab swap | Generalized `[data-tab-swap]` JS handler shared with centre-individual |
| Hero | Full-bleed image with `linear-gradient(270deg, transparent 14.66%, #131313 100%)` overlay |
| Stepper | Static visual (first step active in primary purple, 4 grayed) |
| Comparison block | 2 cards + "VS" centered between |
| Side Effects panel | Purple bg + white text; chip swap reveals Common or Rare body |
| FAQ | Native `<details>`/`<summary>` |
| Active nav | "Our Blogs" |

## Tailwind tokens by section

(Full per-section markup in `html/blog-individual-components/*.html`. Highlights:)

### Hero

- Container: `relative bg-cover bg-center` + `linear-gradient` overlay
- Title: `font-heading font-semibold text-[32px] lg:text-[50px] leading-[110%] lg:leading-[65px] text-white max-w-[860px] mt-12 lg:mt-[80px]`
- Meta items: `flex items-center gap-2 font-heading font-normal text-[16px] lg:text-[20px] text-white`

### Blog Summary

- Card: `bg-[#f1f1f1] rounded-[15px] p-6 lg:p-[40px]`
- Body bullets: `font-heading font-semibold text-[16px] lg:text-[21px] leading-[26px] lg:leading-[32px] text-primary text-justify capitalize`

### Body grid

- Wrapper: `grid grid-cols-1 lg:grid-cols-[1fr_411px] gap-8 lg:gap-[40px] items-start`

### Section text (reusable)

- Heading: `font-heading font-light text-[28px] lg:text-[45px] leading-[110%] lg:leading-[68px] tracking-[-0.04em] text-primary capitalize`
- Body: `font-heading font-light text-[16px] lg:text-[20px] leading-[26px] lg:leading-[30px] text-primary text-justify mt-3 lg:mt-[10px]`

### TOC sidebar

- Outer: `bg-[#f1f1f1] rounded-[15px] p-5 lg:p-[20px] lg:sticky lg:top-[100px]`
- Heading: `text-center font-heading font-semibold text-[24px] lg:text-[30px] text-primary`
- Links: `block py-1 font-heading font-light text-[16px] lg:text-[20px] text-primary hover:underline`

### Tab-swap section

- Tab strip: `grid grid-cols-2 lg:grid-cols-N gap-2 lg:gap-[10px]`
- Chip: `h-[53px] rounded-[13px] bg-primary text-white font-light data-[active=true]:bg-accent data-[active=true]:text-primary data-[active=true]:font-bold`

### Stepper

- Card: `bg-[#f4f4f8] rounded-[15px] p-6 lg:p-[40px]`
- Dots: `w-[25px] h-[25px] rounded-full bg-[#d9d9d9]` + first active `bg-primary`

### Do's-Don'ts

- Grid: `grid grid-cols-1 lg:grid-cols-2 gap-3 lg:gap-[10px]`
- Do's: `bg-[#f1f1f1] text-primary` / Don'ts: `bg-primary text-white`

### Side Effects (purple variant)

- Outer: `bg-primary rounded-[15px] p-6 lg:p-[40px]`
- Chip on dark: `bg-white/10 text-white data-[active=true]:bg-accent data-[active=true]:text-primary`
- Body text: `text-white text-justify`

### Floating actions

- Wrapper: `hidden lg:flex fixed right-4 bottom-24 z-40 flex-col gap-3`
- Each button: `w-[53px] h-[53px] rounded-full bg-white border-2 border-primary`

## Responsive

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

| Section | Below `lg:` | At/above `lg:` |
|---|---|---|
| Body wrapper | Single column (article first, sidebar widgets stack below) | 2-col 1fr / 411px |
| TOC sidebar | Static, in-flow | `sticky top-[100px]` |
| Tab strips | 2-col grid | N-col grid (4/3/2 depending on chip count) |
| Tab section with photo | Stack (text first, photo below) | Side-by-side (`grid-cols-[1fr_312px]` or reverse) |
| Comparison cards | Same (always side-by-side) | Same |
| Do's-Don'ts | Stack | Side-by-side |
| Floating actions | Hidden | Fixed bottom-right |
| Hero | Single col, smaller min-height | Full-bleed, `min-h-[576px]` |

## Out of scope

- Other blog posts — same template, different `node--blog` instance.
- City Individual / Innov Eyes pages — separate specs.
- Schema.org/Article structured data — Drupal Metatag.
- Multilingual variants — Drupal translation layer.