From dfc643f4febc9ac5e62e9aba3e3adafde2e85a54 Mon Sep 17 00:00:00 2001
From: "claude[bot]" <41898282+claude[bot]@users.noreply.github.com>
Date: Mon, 23 Feb 2026 00:13:57 +0000
Subject: [PATCH] feat: add thin application header with primary blue color

Enable the existing hidden header element and style it as a thin (48px)
bar using the app's primary blue color (#2563eb), which is distinct from
the page background. The theme toggle button top position is adjusted
to center vertically within the header.

Closes #2

Co-authored-by: Anderson Ledo <andersonledo@users.noreply.github.com>
---
 frontend/index.html |  2 +-
 frontend/style.css  | 32 +++++++++++++++++++-------------
 2 files changed, 20 insertions(+), 14 deletions(-)
diff --git a/frontend/index.html b/frontend/index.html
index c894f6852..54a479cba 100644
--- a/frontend/index.html
+++ b/frontend/index.html
@@ -7,7 +7,7 @@
     <meta http-equiv="Pragma" content="no-cache">
     <meta http-equiv="Expires" content="0">
     <title>Course Materials Assistant</title>
-    <link rel="stylesheet" href="style.css?v=13">
+    <link rel="stylesheet" href="style.css?v=14">
 </head>
 <body>
     <button id="themeToggle" aria-label="Toggle theme" title="Toggle theme">
diff --git a/frontend/style.css b/frontend/style.css
index fec316bb9..672517a9e 100644
--- a/frontend/style.css
+++ b/frontend/style.css
@@ -41,6 +41,7 @@
 
 /* Theme Transition */
 body,
+header,
 .sidebar,
 .chat-main,
 .chat-container,
@@ -57,7 +58,7 @@ body,
 /* Theme Toggle Button */
 #themeToggle {
     position: fixed;
-    top: 1rem;
+    top: 4px;
     right: 1rem;
     z-index: 1000;
     width: 40px;
@@ -141,25 +142,30 @@ body {
     padding: 0;
 }
 
-/* Header - Hidden */
+/* Header */
 header {
-    display: none;
+    display: flex;
+    align-items: center;
+    padding: 0 1.5rem;
+    height: 48px;
+    background: var(--primary-color);
+    border-bottom: 1px solid var(--primary-hover);
+    flex-shrink: 0;
 }
 
 header h1 {
-    font-size: 1.75rem;
-    font-weight: 700;
-    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-    -webkit-background-clip: text;
-    -webkit-text-fill-color: transparent;
-    background-clip: text;
+    font-size: 1rem;
+    font-weight: 600;
+    color: white;
+    background: none;
+    -webkit-background-clip: unset;
+    -webkit-text-fill-color: white;
+    background-clip: unset;
     margin: 0;
 }
 
-.subtitle {
-    font-size: 0.95rem;
-    color: var(--text-secondary);
-    margin-top: 0.5rem;
+header .subtitle {
+    display: none;
 }
 
 /* Main Content Area with Sidebar */
