From 2cf50486a79ac078932f93e12c0afa8863f46007 Mon Sep 17 00:00:00 2001
From: Patrick Balsiger <frupii@gmail.com>
Date: Thu, 4 Sep 2025 21:08:24 +0200
Subject: [PATCH] refactor: Simplify navigation and background gradient
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

🎨 Background Gradient:
- Reduced from 5 to 3 Nord Frost colors
- Cleaner, more minimal gradient: #8fbcbb → #88c0d0 → #81a1c1
- Less visual noise in background

🧭 Navigation Improvements:
- Only active tab has background and border
- Inactive tabs are completely transparent
- Subtle hover effects for better UX
- Cleaner visual hierarchy

✨ Benefits:
- More minimal and professional appearance
- Better focus on active content
- Reduced visual complexity
- Consistent with modern design principles

Files modified:
- public/styles/theme.css - Simplified gradient and navigation styling
---
 public/styles/theme.css | 84 ++++++++++++++++++++++++++++++++++++++++-
 1 file changed, 83 insertions(+), 1 deletion(-)

diff --git a/public/styles/theme.css b/public/styles/theme.css
index 2712239..b628f80 100644
--- a/public/styles/theme.css
+++ b/public/styles/theme.css
@@ -31,7 +31,7 @@
 
 /* Nord Frost Light Theme with Glass-Morphism */
 [data-theme="light"] {
-    --bg-primary: linear-gradient(135deg, #8fbcbb 0%, #88c0d0 25%, #81a1c1 50%, #5e81ac 75%, #8fbcbb 100%);
+    --bg-primary: linear-gradient(135deg, #8fbcbb 0%, #88c0d0 50%, #81a1c1 100%);
     --bg-secondary: rgba(143, 188, 187, 0.15);
     --bg-tertiary: rgba(143, 188, 187, 0.1);
     --bg-hover: rgba(143, 188, 187, 0.25);
@@ -688,3 +688,85 @@
         backdrop-filter: blur(35px);
     }
 }
+
+/* Fix navigation - only active tabs should have borders */
+[data-theme="light"] .nav-tab {
+    background: transparent;
+    border: 1px solid transparent;
+    backdrop-filter: blur(15px);
+    color: var(--text-secondary);
+}
+
+[data-theme="light"] .nav-tab:hover {
+    background: rgba(255, 255, 255, 0.2);
+    border: 1px solid transparent;
+    color: var(--text-primary);
+}
+
+[data-theme="light"] .nav-tab.active {
+    background: rgba(255, 255, 255, 0.3);
+    border: 1px solid var(--accent-secondary);
+    color: var(--text-primary);
+    box-shadow: 0 4px 20px rgba(129, 161, 193, 0.25);
+}
+
+[data-theme="dark"] .nav-tab {
+    background: transparent;
+    border: 1px solid transparent;
+    backdrop-filter: blur(15px);
+    color: rgba(255, 255, 255, 0.8);
+}
+
+[data-theme="dark"] .nav-tab:hover {
+    background: rgba(255, 255, 255, 0.1);
+    border: 1px solid transparent;
+    color: rgba(255, 255, 255, 0.95);
+}
+
+[data-theme="dark"] .nav-tab.active {
+    background: rgba(255, 255, 255, 0.15);
+    border: 1px solid var(--accent-secondary);
+    color: #ffffff;
+    box-shadow: 0 4px 20px rgba(96, 165, 250, 0.25);
+}
+
+/* Fix navigation - only active tabs should have background */
+[data-theme="light"] .nav-tab {
+    background: transparent;
+    border: 1px solid transparent;
+    backdrop-filter: none;
+    color: var(--text-secondary);
+}
+
+[data-theme="light"] .nav-tab:hover {
+    background: rgba(255, 255, 255, 0.1);
+    border: 1px solid transparent;
+    color: var(--text-primary);
+}
+
+[data-theme="light"] .nav-tab.active {
+    background: rgba(255, 255, 255, 0.3);
+    border: 1px solid var(--accent-secondary);
+    color: var(--text-primary);
+    box-shadow: 0 4px 20px rgba(129, 161, 193, 0.25);
+}
+
+[data-theme="dark"] .nav-tab {
+    background: transparent;
+    border: 1px solid transparent;
+    backdrop-filter: none;
+    color: rgba(255, 255, 255, 0.8);
+}
+
+[data-theme="dark"] .nav-tab:hover {
+    background: rgba(255, 255, 255, 0.05);
+    border: 1px solid transparent;
+    color: rgba(255, 255, 255, 0.95);
+}
+
+[data-theme="dark"] .nav-tab.active {
+    background: rgba(255, 255, 255, 0.15);
+    border: 1px solid var(--accent-secondary);
+    color: #ffffff;
+    box-shadow: 0 4px 20px rgba(96, 165, 250, 0.25);
+}