fix(site): fix mobile header 3-line drawer and unify Courses, Podcasts, Blog, and Diagrams terminology

Author: codercatdev

.cursorrules

@@ -1,11 +1,12 @@
-# Cursor Rules for CodingCat.dev (.cursorrules)
+# CodingCat.dev Cursor & IDE Rules (`.cursorrules`)
 
-Always read and follow `AGENTS.md`, `GEMINI.md`, and `DESIGN.md` at the root of this repository before generating code, copy, or visual prompts.
+Always follow `AGENTS.md` and `DESIGN.md`:
 
-## Critical Rules Summary
-1. NEVER use em-dashes anywhere in prose, UI copy, titles, comments, or documentation. Use commas, parentheses, colons, or separate sentences.
-2. ALWAYS use Markdown tables for comparisons between tools, frameworks, architectures, or trade-offs.
-3. Follow the 13-module CodingCat.dev Design System in `skills/codingcat-design-system/`, `skills/alex-voice-and-copy/`, and `skills/codingcat-media-studio/`:
-   - Colors: Canvas Obsidian `#0F172A`, Pure Void `#000000`, Surface Slate `#1E293B`, Elevated `#334155`, Royal Purple `#4B2E83`, Soft Lavender `#B4A7D6`, Electric Lime `#C5E86C`, Mint `#86EFAC`, Coral `#FCA5A5`, Text Primary `#F8FAFC`, Text Muted `#94A3B8`.
-   - Typography: `Nunito` (800/900) for chunky H1 display titles, `Inter` for UI and H2-H6, `JetBrains Mono` for code/badges, and `Virgil` / `Excalifont` for dark-mode Excalidraw diagram explanations.
-   - Mascot Assets: Use canonical files in `assets/` (`AJHeadphones.png`, `AJ-2D-Bipedal.jpg`, `AJ-3D-Headphones-Front.jpg`, `AJ-3D-Headphones-Left.jpg`, `AJ-3D-Headphones-Right.jpg`).
+1. **Canonical Content Pillars & Terminology**:
+   - **Courses** (`/courses` -> `/course/[slug]`), made of **Lessons** (`Explore Courses →`, `Start Course →`).
+   - **Podcasts** (`/podcasts` -> `/podcast/[slug]`), made of **Episodes** (`Watch Podcasts`, `Watch Episode →`).
+   - **Blog** (`/blog` -> `/post/[slug]`), made of **Blog Posts** (`Read Blog`, `Read Post →`).
+   - **Diagrams**: Never write the brand word `"Excalidraw"` in user-facing UI copy, badges, filenames, or captions; call them **Diagrams**, **Visual Diagrams**, or **Architecture Diagrams**. Never invent synonyms like `"Teardowns"`, `"Blueprints"`, `"Curriculum"`, `"Units"`, or `"Skill Trees"`.
+2. **NEVER Use Em-Dashes**: Do not output the em-dash character anywhere.
+3. **Always Use Tables for Comparisons**: Render Markdown or HTML comparison tables.
+4. **Header & Mobile 3-Line Drawer**: Never put a `"Get Started"` button inside `#site-header`; keep the mobile header clean so `#nav-drawer-toggle` (the 3-line menu button) is always visible.

AGENTS.md

@@ -8,15 +8,26 @@ This repository contains both the **CodingCat.dev Monorepo** (`apps/site`, `apps
 
 ## 1. Non-Negotiable Global Rules
 
-1. **NEVER Use Em-Dashes**: Never output the em-dash character in any prose, UI copy, markdown document, title, video script, social post, or code comment. Use commas, parentheses, colons, or separate sentences instead.
-2. **Always Use Markdown Tables for Comparisons**: Whenever comparing tools, frameworks, architectures, pricing, or trade-offs, always render a structured Markdown or HTML comparison table.
-3. **Dark-Mode-First Visual System**: CodingCat.dev is strictly dark-mode-first. Use Canvas Obsidian (`#0F172A`) for page backgrounds, Pure Void (`#000000`) for Excalidraw diagram wells, Surface Slate (`#1E293B`) for cards, CodingCat Royal Purple (`#4B2E83`), Soft Lavender (`#B4A7D6`), and Electric Lime Green (`#C5E86C`) for primary CTAs and focus rings.
-4. **Canonical 4-Font Typography**:
-   - `Nunito` (`800` / `900`): Chunky rounded `H1` display titles and hero headlines.
-   - `Inter` (`400` to `800`): UI components, navigation, `H2`-`H6` subheadings, and long-form prose.
+1. **Canonical Content Pillars & Terminology (Strict)**:
+   - Our 3 content pillars match our Sanity document types:
+     - **Courses** (`/courses` -> `/course/[slug]`), made of **Lessons** (CTA: `Explore Courses →` or `Start Course →`).
+     - **Podcasts** (`/podcasts` -> `/podcast/[slug]`), made of **Episodes** (CTA: `Watch Podcasts` or `Watch Episode →`).
+     - **Blog** (`/blog` -> `/post/[slug]`), made of **Blog Posts** (CTA: `Read Blog` or `Read Post →`).
+   - **Never invent synonyms** like `"Teardowns"`, `"Blueprints"`, `"Curriculum"`, `"Units"`, `"Boss Node"`, or `"Skill Trees"`.
+   - **Never write the brand word `"Excalidraw"` in user-facing UI copy**, badges, headings, filenames, or captions. Always refer to them simply as **Diagrams**, **Visual Diagrams**, or **Architecture Diagrams** in user-facing text (even though they use a hand-drawn sketch aesthetic and the `Virgil` font).
+2. **NEVER Use Em-Dashes**: Never output the em-dash character in any prose, UI copy, markdown document, title, video script, social post, or code comment. Use commas, parentheses, colons, or separate sentences instead.
+3. **Always Use Markdown Tables for Comparisons**: Whenever comparing tools, frameworks, architectures, pricing, or trade-offs, always render a structured Markdown or HTML comparison table.
+4. **Dual-Theme Chalkboard & Royal Purple Visual System**:
+   - **Light Mode (`:root`, Stitch `8d1319903d504a79ae56110486455e17`)**: Chalkboard Paper (`#FAF9FC`) with `#D8B4FE` dot grid, `#FFFFFF` cards, `#2A1155` deep purple ink/borders/sketch shadows (`3px 4px 0 #2A1155`), `#7C3AED` brand purple, and pastel diagram fills (`#FEF08A` yellow, `#BAE6FD` sky blue, `#FBCFE8` candy pink, `#EDE9FE` lilac, `#86EFAC` mint).
+   - **Dark Mode (`.dark`, Stitch `b9e00f99c0d34e9884bf7766a014577b`)**: Obsidian Chalkboard (`#0B1326`) with purple/fuchsia radial glows, `#131B2E` / `#171F33` surfaces, `#060E20` deep wells, `#F1F5F9` chalk white text, `#7C3AED` tactile buttons with `#4C1D95` bottom lip, and `#C084FC` / `#D946EF` candy purple & fuchsia accents.
+5. **Header & Mobile 3-Line Drawer Rule**:
+   - Do not put a `"Get Started"` CTA button inside the top header (`#site-header`). Keep the header clean with the AJ circular purple medallion + `CodingCat.dev` logo, desktop nav links (`lg:flex`), and on the right `Search`, `Ask Agent`, `ThemeToggle`, and on mobile/tablet (`lg:hidden`) the 3-line Hamburger Menu (`#nav-drawer-toggle`) opening `#nav-drawer`.
+6. **Canonical 4-Font Typography**:
+   - `Nunito` (`800` / `900`): Chunky rounded `H1` and `H2` display titles and hero headlines.
+   - `Inter` (`400` to `800`): UI components, navigation, `H3`-`H6` subheadings, and long-form prose.
    - `JetBrains Mono` (`400` to `700`): Code blocks, terminal snippets, badge tags, and metadata.
-   - `Virgil` / `Excalifont`: Hand-drawn annotations and labels inside dark-mode Excalidraw diagrams.
-5. **AJ the Cat Mascot Guardrails**: Always reference canonical assets in `assets/` (`AJHeadphones.png`, `AJ-2D-Bipedal.jpg`, `AJ-3D-Headphones-Front.jpg`, `AJ-3D-Headphones-Left.jpg`, `AJ-3D-Headphones-Right.jpg`). Full-body AJ is always upright bipedal on two legs, with Electric Lime (`#C5E86C`) eyes, a Soft Lavender (`#B4A7D6`) collar with a pastel rainbow hexagonal `"AJ"` tag, and over-ear `"CodingCat.dev Podcast"` Royal Purple/Lavender headphones that properly cover his ears.
+   - `Virgil`: Hand-drawn annotations, sticky notes, and labels inside visual diagrams.
+7. **AJ the Cat Mascot Guardrails**: Always reference canonical assets in `assets/` (`AJHeadphones.png`, `AJ-2D-Bipedal.jpg`, `AJ-3D-Headphones-Front.jpg`, `AJ-3D-Headphones-Left.jpg`, `AJ-3D-Headphones-Right.jpg`). Full-body AJ is always upright bipedal on two legs, wearing Royal Purple/Lavender podcast headphones and a hexagonal `"AJ"` collar tag.
 
 ---
 
@@ -26,18 +37,18 @@ Before writing UI code, drafting content, or generating visual assets, load the
 
 | # | Category | Skill / Reference Path | When to Load |
 | :--- | :--- | :--- | :--- |
-| **01** | **Overview** | `skills/codingcat-design-system/references/01-overview.md` | Brand ethos, dark-mode-first philosophy, when to use AJ vs. Alex Patterson |
-| **02** | **Colors** | `skills/codingcat-design-system/references/02-colors.md` | Hex/RGB/Tailwind tokens (`#0F172A`, `#1E293B`, `#4B2E83`, `#B4A7D6`, `#C5E86C`, `#86EFAC`, `#FCA5A5`) |
-| **03** | **Typography** | `skills/codingcat-design-system/references/03-typography.md` | `Nunito` (H1), `Inter` (UI/H2-H6), `JetBrains Mono` (code/badges), `Virgil`/`Excalifont` (diagrams) |
+| **01** | **Overview** | `skills/codingcat-design-system/references/01-overview.md` | Brand ethos, canonical terminology (Courses, Podcasts, Blog, Diagrams), AJ vs. Alex Patterson |
+| **02** | **Colors** | `skills/codingcat-design-system/references/02-colors.md` | Dual-theme tokens (Light `#FAF9FC`/`#2A1155`/`#7C3AED` & Dark `#0B1326`/`#131B2E`/`#7C3AED`/`#C084FC`) |
+| **03** | **Typography** | `skills/codingcat-design-system/references/03-typography.md` | `Nunito` (H1/H2), `Inter` (UI/H3-H6), `JetBrains Mono` (code/badges), `Virgil` (diagrams) |
 | **04** | **Spacing** | `skills/codingcat-design-system/references/04-spacing.md` | `4px` base grid, `1280px` max container, YouTube 16:9 and Shorts 9:16 safe zones |
-| **05** | **Corner Radius** | `skills/codingcat-design-system/references/05-corner-radius.md` | Radius tokens from `rounded-none` (`0px`) to `rounded-2xl` (`16px`) and `rounded-full` |
-| **06** | **Shadows** | `skills/codingcat-design-system/references/06-shadows.md` | Dark-mode top-border highlights, `--cc-glow-purple`, `--cc-glow-lime`, `--cc-thumbnail-drop` |
-| **07** | **Focus** | `skills/codingcat-design-system/references/07-focus.md` | Keyboard accessibility focus rings (`#C5E86C` and `#B4A7D6`) on `#0F172A` surfaces |
-| **08** | **Components** | `skills/codingcat-design-system/references/08-components.md` | Astro/React + Tailwind reference patterns: CTAs, Bento Cards, AJ Callout Boxes, Comparison Tables |
+| **05** | **Corner Radius** | `skills/codingcat-design-system/references/05-corner-radius.md` | `.hand-border`, `.hand-border-rect`, `rounded-xl` to `rounded-3xl`, and `rounded-full` |
+| **06** | **Shadows** | `skills/codingcat-design-system/references/06-shadows.md` | `.shadow-sketch`, `.shadow-sketch-sm`, `.shadow-sketch-lg`, `.tactile-btn` |
+| **07** | **Focus** | `skills/codingcat-design-system/references/07-focus.md` | Keyboard accessibility focus rings (`#7C3AED` and `#C084FC`) |
+| **08** | **Components** | `skills/codingcat-design-system/references/08-components.md` | Header & mobile 3-line drawer, Hero CTAs, Course/Podcast/Blog cards, Visual Diagrams, Footer |
 | **09** | **Assets** | `skills/codingcat-design-system/references/09-assets.md` | Canonical 2D and 3D AJ mascot assets in `assets/` and anatomical rules |
 | **10** | **Files** | `skills/codingcat-design-system/references/10-files.md` | `tokens/tokens.json`, `tokens/theme.css`, MDX frontmatter schemas, social templates |
-| **11** | **Voice & Copy** | `skills/alex-voice-and-copy/SKILL.md` | `@alex.patterson` writing style, zero em-dashes, mandatory comparison tables, "WTF is..." series |
-| **12** | **Visual Prompts** | `skills/codingcat-media-studio/SKILL.md` | Dark-mode Excalidraw diagrams, 2D bipedal & 3D vinyl-toy AJ prompts, 16:9 YouTube thumbnails |
+| **11** | **Voice & Copy** | `skills/alex-voice-and-copy/SKILL.md` | `@alex.patterson` writing style, canonical terminology, zero em-dashes, comparison tables |
+| **12** | **Visual Prompts** | `skills/codingcat-media-studio/SKILL.md` | Hand-drawn architecture diagrams, 2D bipedal & 3D vinyl-toy AJ prompts, 16:9 YouTube thumbnails |
 | **13** | **Video & Motion** | `skills/codingcat-media-studio/references/youtube-intros-and-video.md` | First-15-second retention hooks, presenter cutaways, lower-thirds, 9:16 Shorts safe zones |
 
 ---
@@ -51,10 +62,3 @@ Before writing UI code, drafting content, or generating visual assets, load the
 | `apps/mcp-server` | `@codingcatdev/mcp-server` | Cloudflare Worker (Hono + `@modelcontextprotocol/sdk`) serving dynamic CodingCat.dev rules & tokens |
 | `tokens/` | Design Tokens | W3C `tokens.json` and Tailwind v4 `theme.css` |
 | `skills/` | Agent Skills | `codingcat-design-system`, `alex-voice-and-copy`, `codingcat-media-studio` |
-
-### Key Astro 7 + Sanity v6 + Cloudflare Workers Rules
-- **`output: "server"`**: There is no `getStaticPaths` anywhere; pagination is a runtime bounds check on `Astro.params`.
-- **GROQ queries must live in `.ts` files**: Sanity TypeGen skips `.astro` frontmatter.
-- **Never read secrets from `import.meta.env`**: Read secrets from `import { env } from "cloudflare:workers"`.
-- **Cloudflare bindings do not inherit into `env.production`**: Repeat top-level bindings in `env.production` inside `wrangler.jsonc`.
-- **Always `stegaClean` values bound to HTML attributes**, `<meta>`, JSON-LD, or XML feeds.

DESIGN.md

@@ -4,13 +4,22 @@ This document defines the canonical design system for CodingCat.dev based on the
 - **Light Mode (Chalkboard Paper)**: `https://stitch.withgoogle.com/projects/3020591313534241286?node-id=8d1319903d504a79ae56110486455e17`
 - **Dark Mode (Obsidian Chalkboard)**: `https://stitch.withgoogle.com/projects/3020591313534241286?node-id=b9e00f99c0d34e9884bf7766a014577b`
 
-## 1. Visual Direction & Dual-Theme Philosophy
+## 1. Canonical Content Pillars & Terminology
 
-CodingCat.dev blends Duolingo-inspired playful educational UI with authentic, hand-drawn Excalidraw architectural diagrams, sticky notes, and live code teardowns. Both Light Mode and Dark Mode are first-class citizens:
+1. **Three Content Pillars (Matching Sanity Document Types)**:
+   - **Courses** (`/courses` -> `/course/[slug]`): Structured learning made up of **Lessons** (`Explore Courses →`, `Start Course →`).
+   - **Podcasts** (`/podcasts` -> `/podcast/[slug]`): Video and audio conversations made up of **Episodes** (`Watch Podcasts`, `Watch Episode →`).
+   - **Blog** (`/blog` -> `/post/[slug]`): Written articles and code guides made up of **Blog Posts** (`Read Blog`, `Read Post →`).
+2. **No Invented Synonyms**: Never call content `"Teardowns"`, `"Blueprints"`, `"Curriculum"`, `"Units"`, `"Boss Node"`, or `"Skill Trees"`.
+3. **Diagrams Terminology**: Never write the brand word `"Excalidraw"` in user-facing UI labels, headings, filenames, or captions. Always refer to them simply as **Diagrams**, **Visual Diagrams**, or **Architecture Diagrams** in user-facing copy.
+
+## 2. Visual Direction & Dual-Theme Philosophy
+
+CodingCat.dev blends Duolingo-inspired playful educational UI with hand-drawn architectural diagrams, sticky notes, and real code. Both Light Mode and Dark Mode are first-class citizens:
 - **Light Mode (`:root`)** uses a warm Chalkboard Paper background (`#FAF9FC`) with a subtle lavender dot grid (`#D8B4FE`), crisp white cards (`#FFFFFF`), deep Royal Purple ink (`#2A1155`), and hard-offset sketch shadows (`3px 4px 0 #2A1155`).
 - **Dark Mode (`.dark`)** uses an Obsidian Chalkboard background (`#0B1326`) with ambient purple/fuchsia radial glows, slate-obsidian cards (`#131B2E` / `#171F33`), deep code/diagram wells (`#060E20`), chalk-white sketch borders (`rgba(255, 255, 255, 0.22)`), and dark offset sketch shadows (`3px 4px 0 rgba(0, 0, 0, 0.75)`).
 
-## 2. Dual-Theme Color Tokens
+## 3. Dual-Theme Color Tokens
 
 | Token Role | Light Mode (`8d1319903d504a79ae56110486455e17`) | Dark Mode (`b9e00f99c0d34e9884bf7766a014577b`) | CSS Custom Property |
 | :--- | :--- | :--- | :--- |
@@ -30,30 +39,7 @@ CodingCat.dev blends Duolingo-inspired playful educational UI with authentic, ha
 | **Lilac (Node/Header)** | `#EDE9FE` (text `#5B21B6`, border `#2A1155`) | `rgba(59, 7, 100, 0.65)` (`#C084FC` border, `#E9D5FF` text) | `--cc-lilac-bg` |
 | **Mint / Emerald Green** | `#86EFAC` / `#58CC02` (pill `#DCFCE7`, text `#166534`) | `#86EFAC` / `#34D399` (pill `rgba(2, 44, 34, 0.8)`, text `#6EE7B7`) | `--cc-mint` |
 
-## 3. Typography Hierarchy
-
-1. **Display Headlines (`--font-display`)**: `Nunito` / `Fredoka` (`800-900` weight, tight tracking `-0.03em`). Used for playful lowercase hero and section titles (`free. fun. purrfect.`, `learn by building.`, `meet real codingcat learners & guests`).
-2. **Excalidraw Hand-Drawn Explanations (`--font-hand`)**: `Virgil` / `Caveat` (`400-700` weight). Used for sketch subtitles (`learn by building real apps.`), sticky notes (`AJ's Tip`), flowchart node labels, and speech bubbles (`"Purrfect code!"`).
-3. **UI & Editorial Body (`--font-sans`)**: `Plus Jakarta Sans` / `Inter` (`400-700` weight).
-4. **Code & Metadata Badges (`--font-mono`)**: `JetBrains Mono` (`500-700` weight).
-
-## 4. Hand-Drawn Borders, Sketch Shadows & Tactile Buttons
-
-- **`.hand-border`**:
-  ```css
-  border-radius: 255px 15px 225px 15px / 15px 225px 15px 255px;
-  border: 2px solid var(--cc-border-sketch);
-  ```
-- **`.hand-border-rect`**:
-  ```css
-  border-radius: 20px 8px 18px 10px;
-  border: 2px solid var(--cc-border-sketch);
-  ```
-- **`.shadow-sketch`**:
-  - Light Mode: `3px 4px 0px 0px #2A1155` (`sm`: `2px 2px`, `lg`: `6px 7px`)
-  - Dark Mode: `3px 4px 0px 0px rgba(0, 0, 0, 0.75)` (`sm`: `2px 2px`, `lg`: `6px 7px`)
-- **Primary Tactile CTA (`.tactile-btn`)**:
-  - Light Mode: `background: #2A1155` (hover `#7C3AED`), white text, `#86EFAC` arrow, `box-shadow: 3px 4px 0 #2A1155`
-  - Dark Mode: `background: #7C3AED` (hover `#8B5CF6`), white text, `#6EE7B7` arrow, `box-shadow: 0 4px 0 #4C1D95, 0 8px 20px rgba(124, 58, 237, 0.4)`
-- **`.chalk-hatch`**:
-  - Diagonal `-45deg` repeating marker hatch fill in purple/lavender (`rgba(167, 139, 250, 0.35)` Light / `rgba(168, 85, 247, 0.35)` Dark).
+## 4. Header & Mobile 3-Line Navigation Drawer
+
+- The top header (`#site-header`) is a floating `rounded-full` pill bar containing the AJ circular purple medallion + `CodingCat.dev` logo on the left, desktop navigation links (`Courses`, `Podcasts`, `Blog`, `Sponsors`, `Sponsorships` on `lg:flex`), and on the right `Search`, `Ask Agent`, `ThemeToggle`, and on `<lg` the 3-line Hamburger Menu (`#nav-drawer-toggle`).
+- Never place a `"Get Started"` CTA button inside `#site-header` so the mobile header never overflows.