From fb55878727382a279cd51edc730b1e20b0f6d9c8 Mon Sep 17 00:00:00 2001
From: "Aaron D. Lee" <aaron.daniel.lee@mgial.com>
Date: Sun, 4 Jan 2026 14:56:08 -0500
Subject: [PATCH] Polish UI styling across site
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Flip gradient to purple→blue (eggplant #4a2860 → blue #5570d4)
- Add gold title styling (.title-gold) for Stegasoo branding
- Style two-choice toggles with gradient-matched purple/blue colors
- Equal-width toggle buttons with hover highlight
- Tools page: green→amber tab gradient with dark background
- Dashed separator between toggle options

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
---
 frontends/web/static/style.css     | 43 ++++++++++++++++++++++++++++--
 frontends/web/templates/base.html  |  2 +-
 frontends/web/templates/index.html |  2 +-
 frontends/web/templates/tools.html | 35 +++++++++++++-----------
 4 files changed, 62 insertions(+), 20 deletions(-)

diff --git a/frontends/web/static/style.css b/frontends/web/static/style.css
index 6982050..eea662a 100644
--- a/frontends/web/static/style.css
+++ b/frontends/web/static/style.css
@@ -6,8 +6,8 @@
    CSS Variables
    ---------------------------------------------------------------------------- */
 :root {
-    --gradient-start: #667eea;
-    --gradient-end: #764ba2;
+    --gradient-start: #4a2860;
+    --gradient-end: #5570d4;
     --bg-dark-1: #1a1a2e;
     --bg-dark-2: #16213e;
     --bg-dark-3: #0f3460;
@@ -146,6 +146,45 @@ body {
     text-shadow: 0 1px 2px rgba(0, 0, 0, 0.33);
 }
 
+.title-gold {
+    color: var(--header-gold);
+    text-shadow: 0 2px 6px rgba(0, 0, 0, 0.55);
+}
+
+/* Two-choice toggle buttons - gradient-matched colors + equal width */
+.btn-group .btn-outline-primary,
+.btn-group .btn-outline-secondary {
+    flex: 1 1 0;
+    transition: all 0.2s ease;
+}
+.btn-group .btn-outline-primary:hover,
+.btn-group .btn-outline-secondary:hover {
+    background-color: rgba(255, 255, 255, 0.08);
+}
+.btn-group .btn-outline-primary:first-of-type,
+.btn-group .btn-outline-secondary:first-of-type {
+    color: #6b4d8a;
+    border-color: #6b4d8a;
+    border-right: 1px dashed rgba(255, 255, 255, 0.2);
+}
+.btn-group .btn-outline-primary:last-of-type,
+.btn-group .btn-outline-secondary:last-of-type {
+    color: #4a62a8;
+    border-color: #4a62a8;
+}
+.btn-group .btn-check:checked + .btn-outline-primary:first-of-type,
+.btn-group .btn-check:checked + .btn-outline-secondary:first-of-type {
+    background-color: #6b4d8a;
+    border-color: #6b4d8a;
+    color: #fff;
+}
+.btn-group .btn-check:checked + .btn-outline-primary:last-of-type,
+.btn-group .btn-check:checked + .btn-outline-secondary:last-of-type {
+    background-color: #4a62a8;
+    border-color: #4a62a8;
+    color: #fff;
+}
+
 /* Override small warning text to use header gold */
 .text-warning.small {
     color: var(--header-gold) !important;
diff --git a/frontends/web/templates/base.html b/frontends/web/templates/base.html
index 60894c7..d266902 100644
--- a/frontends/web/templates/base.html
+++ b/frontends/web/templates/base.html
@@ -14,7 +14,7 @@
         <div class="container">
             <a class="navbar-brand d-flex align-items-center" href="/">
                 <img src="{{ url_for('static', filename='logo.svg') }}" alt="Stegasoo" height="36" class="me-2">
-                <span class="fw-bold">Stegasoo</span>
+                <span class="fw-bold title-gold">Stegasoo</span>
             </a>
             <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
                 <span class="navbar-toggler-icon"></span>
diff --git a/frontends/web/templates/index.html b/frontends/web/templates/index.html
index 54a533b..97b6e2b 100644
--- a/frontends/web/templates/index.html
+++ b/frontends/web/templates/index.html
@@ -9,7 +9,7 @@
         <div class="d-flex align-items-end justify-content-center gap-4">
             <img src="{{ url_for('static', filename='logo.svg') }}" alt="Stegasoo" height="155">
             <div style="margin-bottom: 40px;">
-                <h1 class="display-4 fw-bold mb-2">
+                <h1 class="display-4 fw-bold mb-2 title-gold">
                     Stegasoo
                     <span class="badge bg-success fs-6 ms-2">v4.0</span>
                 </h1>
diff --git a/frontends/web/templates/tools.html b/frontends/web/templates/tools.html
index de0dd27..430b146 100644
--- a/frontends/web/templates/tools.html
+++ b/frontends/web/templates/tools.html
@@ -148,43 +148,46 @@
 .tool-section { display: none; }
 .tool-section.active { display: block; }
 
-/* Green→lime→yellow gradient across tabs */
+/* Green→amber gradient (12.5% lighter) */
+.tool-tabs .btn-outline-primary {
+    background-color: rgba(0, 0, 0, 0.25);
+}
 .tool-tabs .btn-outline-primary:nth-of-type(1) {
-    color: #55df85;
-    border-color: #55df85;
+    color: #40d770;
+    border-color: #40d770;
 }
 .tool-tabs .btn-outline-primary:nth-of-type(2) {
-    color: #c4f26a;
-    border-color: #c4f26a;
+    color: #96da2c;
+    border-color: #96da2c;
 }
 .tool-tabs .btn-outline-primary:nth-of-type(3) {
-    color: #fdde4a;
-    border-color: #fdde4a;
+    color: #fdda64;
+    border-color: #fdda64;
 }
 
 .tool-tabs .btn-outline-primary:nth-of-type(1):hover {
-    background-color: rgba(85, 223, 133, 0.15);
+    background-color: rgba(64, 215, 112, 0.15);
 }
 .tool-tabs .btn-outline-primary:nth-of-type(2):hover {
-    background-color: rgba(196, 242, 106, 0.15);
+    background-color: rgba(150, 218, 44, 0.15);
 }
 .tool-tabs .btn-outline-primary:nth-of-type(3):hover {
-    background-color: rgba(253, 222, 74, 0.15);
+    background-color: rgba(253, 218, 100, 0.15);
 }
 
 .tool-tabs .btn-check:checked + .btn-outline-primary:nth-of-type(1) {
-    background-color: #55df85;
-    border-color: #55df85;
+    background-color: #40d770;
+    border-color: #40d770;
     color: #1a1a2e;
 }
 .tool-tabs .btn-check:checked + .btn-outline-primary:nth-of-type(2) {
-    background-color: #c4f26a;
-    border-color: #c4f26a;
+    background-color: #96da2c;
+    border-color: #96da2c;
     color: #1a1a2e;
 }
 .tool-tabs .btn-check:checked + .btn-outline-primary:nth-of-type(3) {
-    background-color: #fdde4a;
-    border-color: #fdde4a;
+    background-color: #fdda64;
+    border-color: #fdda64;
     color: #1a1a2e;
 }
 </style>