# S03: Topic Color Coding & Visual Polish

**Goal:** Each of 7 topic categories has a distinct accent color in badges, cards, and sub-topic pages. Page transitions are smooth. Creator avatars are already visually unique (done in prior milestone).
**Demo:** After this: Each of 7 topic categories has a distinct accent color in badges, cards, and sub-topic pages. Page transitions are smooth. Creator avatars are visually unique.

## Tasks
- [x] **T01: Extracted catSlug to shared utility; added category accent border and badge to SubTopicPage, colored category badges to SearchResults cards** — Extract the catSlug helper from TopicsBrowse.tsx into a shared utility file. Apply category accent colors to SubTopicPage (colored left border on page container, category badge on technique cards using badge--cat-{slug} classes). Apply category color badge to SearchResults cards (replace plain text topic_category span with a colored badge). All 7 categories (sound-design, mixing, synthesis, arrangement, workflow, mastering, music-theory) must render with their distinct colors.

Steps:
1. Create `frontend/src/utils/catSlug.ts` exporting the catSlug function. It converts a category name to CSS slug: `name.toLowerCase().replace(/\s+/g, '-')`.
2. Update `frontend/src/pages/TopicsBrowse.tsx` to import catSlug from the shared util instead of defining it locally.
3. Update `frontend/src/pages/SubTopicPage.tsx`:
   - Import catSlug from utils
   - Add a colored left border to the `.subtopic-page` container using inline style `borderLeftColor: var(--color-badge-cat-{slug}-text)` (same pattern as TopicsBrowse D020)
   - Add a category badge span with class `badge badge--cat-{slug}` showing the category name near the title/subtitle area
   - On each technique card, add a small category badge if desired (optional — the page-level accent may suffice)
4. Update `frontend/src/pages/SearchResults.tsx`:
   - Import catSlug from utils
   - In SearchResultCard, replace the plain `<span>{item.topic_category}</span>` with `<span className={`badge badge--cat-${catSlug(item.topic_category)}`}>{item.topic_category}</span>`
5. Add CSS for SubTopicPage color accent in `frontend/src/App.css` — a `.subtopic-page` left border style (4px solid, using CSS var), and any needed spacing adjustments.
6. Verify: `cd frontend && npx tsc --noEmit && npm run build`
  - Estimate: 30m
  - Files: frontend/src/utils/catSlug.ts, frontend/src/pages/TopicsBrowse.tsx, frontend/src/pages/SubTopicPage.tsx, frontend/src/pages/SearchResults.tsx, frontend/src/App.css
  - Verify: cd frontend && npx tsc --noEmit && npm run build
- [x] **T02: Added @keyframes pageEnter (opacity 0→1, translateY 8→0, 250ms ease-out) applied to all 7 public page wrapper classes via CSS selector list** — Add a subtle CSS-only fade-in animation that triggers when page components mount. No libraries needed — a @keyframes animation applied to page wrapper elements.

Steps:
1. In `frontend/src/App.css`, add a `@keyframes pageEnter` animation: opacity 0→1 and translateY(8px→0) over 250ms ease-out.
2. Add a `.page-enter` class that applies this animation.
3. Apply the `.page-enter` class to the outermost wrapper div in each page component:
   - `SubTopicPage.tsx` — the `.subtopic-page` div
   - `SearchResults.tsx` — the `.search-results-page` div
   - `TopicsBrowse.tsx` — its outermost wrapper
   - `CreatorsBrowse.tsx` — its outermost wrapper
   - `CreatorDetail.tsx` — its outermost wrapper
   - `TechniquePage.tsx` — its outermost wrapper
   - `Home.tsx` — its outermost wrapper
4. Alternative to adding className to every page: apply the animation directly to existing page container classes in CSS (e.g., `.subtopic-page, .search-results-page, .topics-browse, ...  { animation: pageEnter 250ms ease-out; }`). This avoids touching every TSX file. Choose whichever approach is cleaner given the existing class names.
5. Verify: `cd frontend && npx tsc --noEmit && npm run build`
  - Estimate: 20m
  - Files: frontend/src/App.css, frontend/src/pages/SubTopicPage.tsx, frontend/src/pages/SearchResults.tsx, frontend/src/pages/TopicsBrowse.tsx, frontend/src/pages/CreatorsBrowse.tsx, frontend/src/pages/CreatorDetail.tsx, frontend/src/pages/TechniquePage.tsx, frontend/src/pages/Home.tsx
  - Verify: cd frontend && npx tsc --noEmit && npm run build
