From 6845f5c3499674431702b2d9fdeabcab83e50db4 Mon Sep 17 00:00:00 2001
From: jlightner <jlightner@users.noreply.github.com>
Date: Tue, 31 Mar 2026 08:52:48 +0000
Subject: [PATCH] =?UTF-8?q?feat:=20Demoted=20nav=20brand=20to=20span,=20pr?=
 =?UTF-8?q?omoted=20page=20headings=20to=20h1,=20added=20sk=E2=80=A6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- "frontend/src/App.tsx"
- "frontend/src/App.css"
- "frontend/src/pages/Home.tsx"
- "frontend/src/pages/SearchResults.tsx"
- "frontend/src/pages/TopicsBrowse.tsx"
- "frontend/src/pages/CreatorsBrowse.tsx"
- "frontend/src/pages/SubTopicPage.tsx"
- "frontend/src/pages/AdminReports.tsx"

GSD-Task: S04/T01
---
 frontend/src/App.css                  | 38 +++++++++++++++++++++++++--
 frontend/src/App.tsx                  |  5 ++--
 frontend/src/pages/AdminPipeline.tsx  |  2 +-
 frontend/src/pages/AdminReports.tsx   |  2 +-
 frontend/src/pages/CreatorsBrowse.tsx |  2 +-
 frontend/src/pages/Home.tsx           | 14 +++++-----
 frontend/src/pages/SearchResults.tsx  |  1 +
 frontend/src/pages/SubTopicPage.tsx   |  2 +-
 frontend/src/pages/TopicsBrowse.tsx   |  2 +-
 9 files changed, 52 insertions(+), 16 deletions(-)

diff --git a/frontend/src/App.css b/frontend/src/App.css
index 4f16779..5376611 100644
--- a/frontend/src/App.css
+++ b/frontend/src/App.css
@@ -13,7 +13,7 @@
   /* Text */
   --color-text-primary: #e2e2ea;
   --color-text-secondary: #8b8b9a;
-  --color-text-muted: #6b6b7a;
+  --color-text-muted: #828291;
   --color-text-active: #e2e2ea;
   --color-text-on-header: rgba(255, 255, 255, 0.8);
   --color-text-on-header-hover: #fff;
@@ -155,6 +155,20 @@ body {
   background: var(--color-bg-page);
 }
 
+/* ── Utility ──────────────────────────────────────────────────────────────── */
+
+.sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}
+
 /* ── App shell ────────────────────────────────────────────────────────────── */
 
 .app {
@@ -163,6 +177,26 @@ body {
   min-height: 100vh;
 }
 
+/* ── Skip-to-content link ─────────────────────────────────────────────────── */
+
+.skip-link {
+  position: absolute;
+  left: -9999px;
+  top: 0;
+  z-index: 999;
+  padding: 0.5rem 1rem;
+  background: var(--color-accent);
+  color: var(--color-bg-page);
+  font-size: 0.875rem;
+  font-weight: 600;
+  text-decoration: none;
+  border-radius: 0 0 0.375rem 0;
+}
+
+.skip-link:focus {
+  left: 0;
+}
+
 .app-header {
   display: flex;
   align-items: center;
@@ -172,7 +206,7 @@ body {
   color: var(--color-text-on-header-hover);
 }
 
-.app-header h1 {
+.app-header__brand span {
   font-size: 1.125rem;
   font-weight: 600;
   letter-spacing: -0.01em;
diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
index 98955df..6d36267 100644
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -58,9 +58,10 @@ export default function App() {
 
   return (
     <div className="app">
+      <a href="#main-content" className="skip-link">Skip to content</a>
       <header className="app-header" ref={headerRef}>
         <Link to="/" className="app-header__brand">
-          <h1>Chrysopedia</h1>
+          <span>Chrysopedia</span>
         </Link>
         {showNavSearch && (
           <SearchAutocomplete
@@ -111,7 +112,7 @@ export default function App() {
         </div>
       </header>
 
-      <main className="app-main">
+      <main className="app-main" id="main-content">
         <Routes>
           {/* Public routes */}
           <Route path="/" element={<Home />} />
diff --git a/frontend/src/pages/AdminPipeline.tsx b/frontend/src/pages/AdminPipeline.tsx
index e462f95..f3f02f6 100644
--- a/frontend/src/pages/AdminPipeline.tsx
+++ b/frontend/src/pages/AdminPipeline.tsx
@@ -574,7 +574,7 @@ export default function AdminPipeline() {
     <div className="admin-pipeline">
       <div className="admin-pipeline__header">
         <div>
-          <h2 className="admin-pipeline__title">Pipeline Management</h2>
+          <h1 className="admin-pipeline__title">Pipeline Management</h1>
           <p className="admin-pipeline__subtitle">
             {videos.length} video{videos.length !== 1 ? "s" : ""}
           </p>
diff --git a/frontend/src/pages/AdminReports.tsx b/frontend/src/pages/AdminReports.tsx
index 166cfdb..a91deb8 100644
--- a/frontend/src/pages/AdminReports.tsx
+++ b/frontend/src/pages/AdminReports.tsx
@@ -113,7 +113,7 @@ export default function AdminReports() {
 
   return (
     <div className="admin-reports">
-      <h2 className="admin-reports__title">Content Reports</h2>
+      <h1 className="admin-reports__title">Content Reports</h1>
       <p className="admin-reports__subtitle">
         {total} report{total !== 1 ? "s" : ""} total
       </p>
diff --git a/frontend/src/pages/CreatorsBrowse.tsx b/frontend/src/pages/CreatorsBrowse.tsx
index e0a92a8..9cb0256 100644
--- a/frontend/src/pages/CreatorsBrowse.tsx
+++ b/frontend/src/pages/CreatorsBrowse.tsx
@@ -86,7 +86,7 @@ export default function CreatorsBrowse() {
 
   return (
     <div className="creators-browse">
-      <h2 className="creators-browse__title">Creators</h2>
+      <h1 className="creators-browse__title">Creators</h1>
       <p className="creators-browse__subtitle">
         Discover creators and their technique libraries
       </p>
diff --git a/frontend/src/pages/Home.tsx b/frontend/src/pages/Home.tsx
index ed8edea..6371f0f 100644
--- a/frontend/src/pages/Home.tsx
+++ b/frontend/src/pages/Home.tsx
@@ -117,21 +117,21 @@ export default function Home() {
         <div className="home-how-it-works">
           <div className="home-how-it-works__step">
             <span className="home-how-it-works__number">1</span>
-            <h3 className="home-how-it-works__title">Creators Share Techniques</h3>
+            <h2 className="home-how-it-works__title">Creators Share Techniques</h2>
             <p className="home-how-it-works__desc">
               Real producers and sound designers publish in-depth tutorials
             </p>
           </div>
           <div className="home-how-it-works__step">
             <span className="home-how-it-works__number">2</span>
-            <h3 className="home-how-it-works__title">AI Extracts Key Moments</h3>
+            <h2 className="home-how-it-works__title">AI Extracts Key Moments</h2>
             <p className="home-how-it-works__desc">
               We distill hours of video into structured, searchable knowledge
             </p>
           </div>
           <div className="home-how-it-works__step">
             <span className="home-how-it-works__number">3</span>
-            <h3 className="home-how-it-works__title">You Find Answers Fast</h3>
+            <h2 className="home-how-it-works__title">You Find Answers Fast</h2>
             <p className="home-how-it-works__desc">
               Search by topic, technique, or creator — get straight to the insight
             </p>
@@ -161,13 +161,13 @@ export default function Home() {
       {/* Navigation cards */}
       <section className="nav-cards">
         <Link to="/topics" className="nav-card card-stagger" style={{ '--stagger-index': 0 } as React.CSSProperties}>
-          <h3 className="nav-card__title"><IconTopics /> Topics</h3>
+          <h2 className="nav-card__title"><IconTopics /> Topics</h2>
           <p className="nav-card__desc">
             Browse techniques organized by category and sub-topic
           </p>
         </Link>
         <Link to="/creators" className="nav-card card-stagger" style={{ '--stagger-index': 1 } as React.CSSProperties}>
-          <h3 className="nav-card__title"><IconCreators /> Creators</h3>
+          <h2 className="nav-card__title"><IconCreators /> Creators</h2>
           <p className="nav-card__desc">
             Discover creators and their technique libraries
           </p>
@@ -188,7 +188,7 @@ export default function Home() {
       {/* Featured Technique Spotlight */}
       {featured && (
         <section className="home-featured">
-          <h3 className="home-featured__label">Featured Technique</h3>
+          <h2 className="home-featured__label">Featured Technique</h2>
           <Link to={`/techniques/${featured.slug}`} className="home-featured__title">
             {featured.title}
           </Link>
@@ -218,7 +218,7 @@ export default function Home() {
 
       {/* Recently Added */}
       <section className="recent-section">
-        <h3 className="recent-section__title">Recently Added</h3>
+        <h2 className="recent-section__title">Recently Added</h2>
         {recentLoading ? (
           <div className="loading">Loading…</div>
         ) : recent.length === 0 ? (
diff --git a/frontend/src/pages/SearchResults.tsx b/frontend/src/pages/SearchResults.tsx
index e2ad498..26cb3dd 100644
--- a/frontend/src/pages/SearchResults.tsx
+++ b/frontend/src/pages/SearchResults.tsx
@@ -52,6 +52,7 @@ export default function SearchResults() {
 
   return (
     <div className="search-results-page">
+      <h1 className="sr-only">Search Results</h1>
       {/* Inline search bar */}
       <SearchAutocomplete
         variant="inline"
diff --git a/frontend/src/pages/SubTopicPage.tsx b/frontend/src/pages/SubTopicPage.tsx
index 81f4cae..c21b7cf 100644
--- a/frontend/src/pages/SubTopicPage.tsx
+++ b/frontend/src/pages/SubTopicPage.tsx
@@ -109,7 +109,7 @@ export default function SubTopicPage() {
         <span className="breadcrumbs__current" aria-current="page">{subtopicDisplay}</span>
       </nav>
 
-      <h2 className="subtopic-page__title">{subtopicDisplay}</h2>
+      <h1 className="subtopic-page__title">{subtopicDisplay}</h1>
       <p className="subtopic-page__subtitle">
         <span className={`badge badge--cat-${slug}`}>{categoryDisplay}</span>
         <span className="subtopic-page__subtitle-sep">·</span>
diff --git a/frontend/src/pages/TopicsBrowse.tsx b/frontend/src/pages/TopicsBrowse.tsx
index 8543df8..eea0412 100644
--- a/frontend/src/pages/TopicsBrowse.tsx
+++ b/frontend/src/pages/TopicsBrowse.tsx
@@ -93,7 +93,7 @@ export default function TopicsBrowse() {
 
   return (
     <div className="topics-browse">
-      <h2 className="topics-browse__title">Topics</h2>
+      <h1 className="topics-browse__title">Topics</h1>
       <p className="topics-browse__subtitle">
         Browse techniques organized by category and sub-topic
       </p>