# Article Content CSS — Global Styles for Database-Driven HTML

**Version:** 1.0  
**Purpose:** Prompt template + reference for styling blog/article HTML content rendered via `dangerouslySetInnerHTML` in a Next.js app. 

---

## How It Works

```
Content Generation → Database (stores HTML with semantic classes) → Next.js Server Component
→ dangerouslySetInnerHTML inside <div class="prose-article"> → Global CSS applies all styles
```

1. Your **content generation system** (API, CMS, AI pipeline) produces HTML with **semantic CSS class names** — no inline styles
2. The HTML is stored in the database's `content` column (TEXT field)
3. A Next.js server component fetches it and renders via `dangerouslySetInnerHTML`
4. A **wrapper class** (`.prose-article`) in `globals.css` provides all the styling
5. Since `dangerouslySetInnerHTML` renders raw HTML, **CSS Modules and scoped styles won't work** — you must use global CSS

### Why Global CSS Is Required (Not CSS Modules)

```
❌ CSS Modules     → Generates scoped class names like `.prose-article_abc123`
                     But the database HTML has `.aio-box`, not `.aio-box_abc123`
                     So the styles NEVER match the injected HTML

✅ Global CSS      → Class names stay as-is: `.aio-box` matches `.aio-box`
                     in the injected HTML
```

---

## What You Need to Do (Step by Step)

### Step 0: Audit Your Content HTML (Critical)

**Before writing any CSS**, fetch one article from your database and inspect the raw HTML to see what class names your content system actually produces. Different content pipelines use different names:

```
# YouTube embeds might use any of these:
<div class="youtube-video">    ← some systems
<div class="youtube-embed">    ← other systems
<div class="video-container">  ← others

# TOC might use any of these:
<nav class="table-of-contents">  ← some systems
<nav><h2 class="section-title">  ← others (bare nav, no toc class)
<div class="toc">                ← others

# Article wrapper might use:
<article class="generated-article article-content">  ← some systems
<div>                                                 ← plain div, no class
```

**How to audit:** Run a quick query for one article, then search the HTML for `iframe`, `nav`, `Table of Contents`, and key class names. Map what you find to the CSS selectors below.

**The CSS must match your HTML exactly.** If your DB uses `.youtube-embed` but the CSS only targets `.youtube-video`, the video won't render properly.

### Step 1: Add the Article Content CSS to `globals.css`

Use the prompt in the [next section](#prompt-generate-article-content-css) with your brand colors to generate the CSS. Paste the output into your `app/globals.css` file **after** the Tailwind imports and theme configuration section.

**Important:** After generating the CSS, cross-check the selectors against the class names you found in Step 0. Add any missing variants.

### Step 2: Create the Article Detail Page

Create `app/blog/[slug]/page.tsx` (or `app/facts/[slug]/page.tsx`) with this rendering pattern:

```tsx
// Fetch article from database
const [article] = await db
  .select()
  .from(articles)
  .where(eq(articles.slug, slug))
  .limit(1);

if (!article) notFound();

// Render — the .prose-article class in globals.css handles all styling
return (
  <div
    className="prose-article"
    dangerouslySetInnerHTML={{ __html: article.content }}
  />
);
```

No content cleaning or stripping — the HTML from the database should be clean with semantic class names.

### Step 3: Verify

- Load a sample article and confirm all content blocks render correctly
- **Check YouTube embeds** — are iframes visible as responsive players or just links?
- **Check TOC** — does it have a background box and styled links, or is it plain text?
- Test mobile responsiveness at 768px breakpoint
- Verify hover effects on CTA buttons, product cards, FAQ items

---

## Prompt: Generate Article Content CSS

```
I need a comprehensive Global CSS section for styling blog/article HTML content in my Next.js app.

**Context:**
- Articles are stored as HTML in a database with semantic CSS class names (no inline styles)
- The HTML is rendered via `dangerouslySetInnerHTML` inside a wrapper: 
  `<div className="prose-article" dangerouslySetInnerHTML={{ __html: content }} />`
- Since this is injected HTML, CSS Modules won't work — all styles must be in globals.css
- The article page has a WHITE background with DARK text

**Brand Configuration:**
- Primary accent color: [YOUR_ACCENT_COLOR, e.g. #AEED50]
- Secondary accent color: [YOUR_SECONDARY_COLOR, e.g. #FACC15]
- Dark background color: [YOUR_DARK_BG, e.g. #1a1a1a]
- Body font: [YOUR_BODY_FONT, e.g. var(--font-poppins)]
- Heading font: [YOUR_HEADING_FONT, e.g. var(--font-bebas-neue)]

**Content blocks to style (all classes come from the HTML in the database):**

1. **Base prose** (`.prose-article`):
   - Typography: h2, h3, h4, p with proper margins and line-height
   - Lists: ul (disc), ol (decimal), li with proper spacing
   - Links: accent color with underline, hover transition
   - Inline: strong/b (bold + dark color), em/i (italic)
   - Blockquotes: left border in accent color, italic, muted text
   - Code: inline code with gray bg + border-radius, pre blocks with dark bg
   - Media: img (max-width 100%, rounded), tables (full-width, bordered)
   - Dividers: hr with subtle border

2. **AIO Box** (`.aio-box`):
   - AI Overview / Featured Snippet box
   - Green gradient background, accent left border, rounded
   - Heading with ✨ emoji via CSS ::before pseudo-element
   - Used for quick-answer summaries that Google might pull as featured snippets

3. **Table of Contents** (`.table-of-contents`, or bare `<nav>` — check your DB HTML):
   - Light gray background with subtle border, rounded
   - Custom list styling: no default bullets, use → arrow via ::before
   - Links with hover transition (color change + slight indent)
   - Support nested levels (ul ul) with • bullet for sub-items
   - **Variant:** Some content systems use bare `<nav>` with `.section-title` on the heading instead of a `.table-of-contents` class. Target both: `.prose-article .table-of-contents, .prose-article > nav`

4. **Key Takeaways** (`.key-takeaways`):
   - Yellow gradient background with yellow border
   - Heading with 💡 emoji via ::before
   - List items with ✓ checkmark via ::before in green
   - No default list styling

5. **FAQ Section** (`.faq-section`, `.faq-item`):
   - Accordion-style layout
   - `.faq-item`: bordered card with rounded corners, hover shadow
   - Question (h3): gray background, flex with space-between, + icon via ::after
   - `.faq-item.open` h3::after shows − instead of +
   - Answer: bordered-top separator, muted text color

6. **CTA Section** (`.cta`, `.cta-section`):
   - Dark gradient background, centered text
   - White headings over dark bg
   - Pill-shaped button with accent gradient, hover lift effect + shadow

7. **YouTube Video Embeds** (`.youtube-video`, `.youtube-embed`, `.video-embed`, `.video-container`):
   - Responsive 16:9 aspect ratio using padding-bottom: 56.25%
   - iframe positioned absolute, fills container
   - Black background, rounded corners, subtle shadow
   - **Important:** Check which class your content system uses — include ALL variants in the CSS selector chain

8. **Product Cards** (`.product-card`):
   - Bordered card with hover lift + shadow
   - Price in accent color, rating in gold
   - Smooth transform transition on hover

9. **Comparison Tables** (`.comparison-table`):
   - Dark header row with white text
   - Alternating/hover row highlighting
   - ✓ (green) and ✗ (red) for feature checks
   - Horizontal scroll on mobile

10. **Pros/Cons Lists** (`.pros-cons`, `.pros`, `.cons`):
    - Two-column grid (auto-fit, min 280px)
    - `.pros`: green gradient bg, green border, ✓ bullets
    - `.cons`: red gradient bg, red border, ✗ bullets
    - Falls to single column on mobile

11. **Info/Warning/Tip Boxes** (`.info-box`, `.warning-box`, `.tip-box`):
    - Info: blue bg, blue left border, ℹ️ prefix
    - Warning: yellow bg, yellow left border, ⚠️ prefix
    - Tip: green bg, green left border, 💡 prefix
    - All with ::before pseudo-element for emoji + label

12. **Author Box** (`.author-box`):
    - Flexbox: avatar (80px circle) + info column
    - Light gray bg, bordered, rounded
    - Stacks vertically + centers on mobile

13. **Reading Stats** (`.reading-stats`):
    - Flex-wrap row with gap, muted text
    - Bottom border separator, small font

**Requirements:**
- Use dual selectors for specificity: `.prose-article .class-name, .class-name { ... }`
- **Include ALL known class name variants** for each content block (e.g., `.youtube-video, .youtube-embed, .video-embed, .video-container` in one rule)
- For TOC, also target bare `<nav>` inside `.prose-article` in case the content system doesn't add a `.table-of-contents` class
- Include `@media (max-width: 768px)` responsive adjustments
- Add hover transitions and box-shadows where appropriate
- Use CSS ::before pseudo-elements for emoji/icon prefixes
- Use `!important` sparingly — only where the HTML might carry conflicting inherited styles
- All colors should use the brand configuration above
- Place this CSS in the globals.css file AFTER the Tailwind imports and theme configuration

Generate the complete CSS now.
```

---

## Content Block Class Reference

Quick reference for what class names to target. **Your content system may use any of the variants listed** — always audit your actual DB HTML and include all matching variants in the CSS.

| Content Block | Common Class Variants | HTML Element | Purpose |
|--------------|----------------------|-------------|---------|
| AIO Box | `.aio-box` | `<div>` | AI Overview / Featured Snippet summary |
| TOC | `.table-of-contents`, `.toc`, or bare `<nav>` | `<nav>` or `<div>` | Navigation TOC with anchor links |
| Key Takeaways | `.key-takeaways` | `<div>` | Bulleted key points summary |
| FAQ Section | `.faq-section` | `<section>` | FAQ wrapper |
| FAQ Item | `.faq-item` | `<div>` | Single Q&A pair |
| FAQ Question | `.faq-question`, `h3` | `<h3>` or `<div>` | FAQ question text |
| FAQ Answer | `.faq-answer` | `<div>` or `<p>` | FAQ answer text |
| CTA | `.cta`, `.cta-section` | `<div>` | Call-to-action block |
| CTA Button | `.cta-button` | `<a>` | CTA action button |
| YouTube | `.youtube-video`, `.youtube-embed`, `.video-embed`, `.video-container` | `<div>` | YouTube iframe wrapper (16:9) |
| Product Card | `.product-card` | `<div>` | Product/review card |
| Comparison | `.comparison-table` | `<div>` | Table wrapper for overflow-x scroll |
| Pros/Cons | `.pros-cons`, `.pros`, `.cons` | `<div>` | Pros/cons grid |
| Info Box | `.info-box` | `<div>` | Blue info callout |
| Warning Box | `.warning-box` | `<div>` | Yellow warning callout |
| Tip Box | `.tip-box` | `<div>` | Green tip callout |
| Author Box | `.author-box` | `<div>` | Author bio card |
| Reading Stats | `.reading-stats` | `<div>` | Reading time / word count bar |
