Switch UI to a clean, professional light theme

- Light glass navbar, ink logo/links, light-surface footer
- Replace the dark cinematic hero with a near-white premium hero (restrained
brand-tint wash, ink text, soft restrained LUNA glow)
- Buttons restyled for light backgrounds (visible outline/logout buttons)
- Lighten the interview page background and the closing score card to match
- Brand gradient kept only as a sparing accent (logo, primary buttons, CTA band)

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

backend/static/css/theme.css

@@ -55,17 +55,18 @@ body {
 
 /* ---- Glass navbar (dark, keeps white nav buttons working) --------- */
 header {
-    background: rgba(11, 16, 32, .72) !important;
-    -webkit-backdrop-filter: saturate(160%) blur(14px);
-    backdrop-filter: saturate(160%) blur(14px);
-    border-bottom: 1px solid rgba(255, 255, 255, .08);
-    box-shadow: 0 8px 30px rgba(0, 0, 0, .25) !important;
+    background: rgba(255, 255, 255, .8) !important;
+    -webkit-backdrop-filter: saturate(180%) blur(14px);
+    backdrop-filter: saturate(180%) blur(14px);
+    border-bottom: 1px solid var(--line) !important;
+    box-shadow: 0 1px 0 rgba(13, 20, 40, .04), 0 8px 24px rgba(13, 20, 40, .04) !important;
     padding: .85rem 1rem !important;
+    color: var(--ink) !important;
 }
-.logo { font-weight: 700; }
-.logo-part2 { color: var(--spark); font-style: normal; animation: none; text-shadow: 0 0 18px rgba(34, 211, 238, .55); }
-.logo-part3 { color: #c4b5fd; }
-.welcome-message { background: rgba(255, 255, 255, .08); border-radius: 999px; }
+.logo, .logo-part1 { font-weight: 700; color: var(--ink) !important; }
+.logo-part2 { color: var(--brand-1) !important; font-style: normal; animation: none; text-shadow: none; }
+.logo-part3 { color: var(--brand-2) !important; }
+.welcome-message { background: rgba(99, 102, 241, .08) !important; color: var(--ink) !important; border-radius: 999px; }
 
 /* ---- Buttons ------------------------------------------------------- */
 .btn {
@@ -81,48 +82,48 @@ header {
 }
 .btn-primary:hover { box-shadow: 0 14px 30px rgba(99, 102, 241, .45) !important; }
 .btn-outline {
-    background: rgba(255, 255, 255, .04) !important;
-    border: 1.5px solid rgba(255, 255, 255, .28) !important;
-    color: #fff !important;
+    background: var(--surface) !important;
+    border: 1.5px solid var(--line) !important;
+    color: var(--ink) !important;
 }
-.btn-outline:hover { background: rgba(255, 255, 255, .12) !important; }
+.btn-outline:hover { background: #f0f1fb !important; border-color: rgba(99, 102, 241, .4) !important; }
 .btn-logout {
-    border: 1.5px solid rgba(34, 211, 238, .6) !important;
-    color: var(--spark) !important;
+    background: transparent !important;
+    border: 1.5px solid rgba(99, 102, 241, .45) !important;
+    color: var(--brand-1) !important;
     border-radius: 999px !important;
 }
-.btn-logout:hover { background: var(--spark) !important; color: var(--night) !important; }
+.btn-logout:hover { background: var(--grad) !important; color: #fff !important; border-color: transparent !important; }
 
-/* ---- Cinematic dark hero ------------------------------------------ */
+/* ---- Clean, professional light hero ------------------------------- */
 .hero {
     background:
-        radial-gradient(900px 500px at 15% 10%, rgba(99, 102, 241, .35), transparent 60%),
-        radial-gradient(800px 500px at 85% 20%, rgba(139, 92, 246, .30), transparent 60%),
-        radial-gradient(700px 500px at 50% 110%, rgba(34, 211, 238, .20), transparent 60%),
-        linear-gradient(180deg, var(--night), var(--night-2)) !important;
-    color: #fff !important;
-    padding: 5.5rem 1rem 6rem !important;
-    border-bottom: 1px solid rgba(255, 255, 255, .06);
-}
-.hero::before { opacity: .5; }
-.hero h1 { font-size: clamp(2.1rem, 5vw, 3.4rem) !important; font-weight: 700; }
-.hero p { color: rgba(255, 255, 255, .82) !important; font-size: 1.15rem !important; }
-
-/* LUNA avatar glow refined to brand */
-.luna-avatar { border: 3px solid rgba(255, 255, 255, .85) !important;
-    box-shadow: 0 18px 50px rgba(0, 0, 0, .45), 0 0 50px rgba(139, 92, 246, .55) !important; }
-.luna-glow { background: radial-gradient(circle, rgba(139, 92, 246, .85) 0%, rgba(34, 211, 238, 0) 70%) !important; }
-
-/* Pills used in hero/eyebrow */
+        radial-gradient(900px 420px at 50% -10%, rgba(99, 102, 241, .10), transparent 70%),
+        linear-gradient(180deg, #ffffff 0%, #f5f6ff 60%, var(--bg) 100%) !important;
+    color: var(--ink) !important;
+    padding: 5rem 1rem 5.5rem !important;
+    border-bottom: 1px solid var(--line);
+}
+.hero::before { display: none !important; }
+.hero h1 { font-size: clamp(2.1rem, 5vw, 3.4rem) !important; font-weight: 700; color: var(--ink) !important; }
+.hero p { color: var(--muted) !important; font-size: 1.15rem !important; }
+
+/* LUNA avatar — soft, restrained ring (no light show) */
+.luna-avatar { border: 4px solid #ffffff !important;
+    box-shadow: 0 18px 45px rgba(13, 20, 40, .14), 0 0 0 1px var(--line) !important; }
+.luna-glow { background: radial-gradient(circle, rgba(99, 102, 241, .28) 0%, rgba(99, 102, 241, 0) 70%) !important;
+    opacity: .5 !important; }
+
+/* Eyebrow chip — tasteful brand accent on light */
 .eyebrow {
     display: inline-flex; align-items: center; gap: .5rem;
     padding: .4rem 1rem; margin-bottom: 1.25rem;
     border-radius: 999px; font-size: .85rem; font-weight: 600;
-    color: #e9e9ff; background: rgba(255, 255, 255, .08);
-    border: 1px solid rgba(255, 255, 255, .16);
+    color: var(--brand-1); background: var(--grad-soft);
+    border: 1px solid rgba(99, 102, 241, .2);
 }
-.eyebrow .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--spark);
-    box-shadow: 0 0 10px var(--spark); animation: pulse 2s ease-in-out infinite alternate; }
+.eyebrow .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--brand-1);
+    animation: pulse 2s ease-in-out infinite alternate; }
 
 /* ---- Sections / titles -------------------------------------------- */
 .content-section, .features { background: var(--bg) !important; }
@@ -154,18 +155,22 @@ header {
 /* Job card headers adopt the brand gradient */
 .job-header, .card-header { background: var(--grad) !important; }
 
-/* ---- CTA band ------------------------------------------------------ */
+/* ---- CTA band — the single, tasteful gradient moment -------------- */
 .cta {
-    background:
-        radial-gradient(700px 400px at 20% 0%, rgba(34, 211, 238, .25), transparent 60%),
-        linear-gradient(135deg, var(--brand-2), var(--brand-1)) !important;
+    background: linear-gradient(135deg, var(--brand-1), var(--brand-2)) !important;
 }
+.cta h2, .cta p { color: #fff !important; }
 
-/* ---- Footer (night) ----------------------------------------------- */
-footer { background: var(--night) !important; border-top: 1px solid rgba(255, 255, 255, .06); }
-.footer-col h3 { color: #fff !important; }
+/* ---- Footer (light) ----------------------------------------------- */
+footer { background: var(--surface) !important; color: var(--muted) !important; border-top: 1px solid var(--line); }
+.footer-col p { color: var(--muted) !important; }
+.footer-col h3 { color: var(--ink) !important; }
 .footer-col h3::after { background: var(--grad) !important; }
-.social-links a:hover { background: var(--grad) !important; color: #fff !important; }
+.footer-col a { color: var(--muted) !important; }
+.footer-col a:hover { color: var(--brand-1) !important; }
+.social-links a { background: var(--bg) !important; color: var(--ink) !important; border: 1px solid var(--line); }
+.social-links a:hover { background: var(--grad) !important; color: #fff !important; border-color: transparent; }
+.copyright { color: var(--muted) !important; border-top: 1px solid var(--line) !important; }
 
 /* ---- Floating chatbot button -------------------------------------- */
 #chatbot-nav { background: var(--grad) !important; box-shadow: 0 10px 26px rgba(99, 102, 241, .5) !important; }

backend/templates/base.html

@@ -913,13 +913,13 @@
             </div>
             <div class="footer-col">
                 <h3>Platform</h3>
-                <p><a href="{{ url_for('jobs') }}" style="color:#cfd3e6;text-decoration:none;">Browse Jobs</a></p>
-                <p><a href="{{ url_for('index') }}#how" style="color:#cfd3e6;text-decoration:none;">How it works</a></p>
-                <p><a href="{{ url_for('index') }}#features" style="color:#cfd3e6;text-decoration:none;">Features</a></p>
+                <p><a href="{{ url_for('jobs') }}" style="text-decoration:none;">Browse Jobs</a></p>
+                <p><a href="{{ url_for('index') }}#how" style="text-decoration:none;">How it works</a></p>
+                <p><a href="{{ url_for('index') }}#features" style="text-decoration:none;">Features</a></p>
             </div>
             <div class="footer-col">
                 <h3>Meet LUNA</h3>
-                <p style="color:#cfd3e6;">An AI recruiter that screens CVs, runs voice interviews, and scores answers against a real question database — fairly and at scale.</p>
+                <p>An AI recruiter that screens CVs, runs voice interviews, and scores answers against a real question database — fairly and at scale.</p>
             </div>
         </div>
         <div class="copyright">

backend/templates/closing.html

@@ -34,19 +34,17 @@
         gap: .35rem;
         padding: 1.5rem 2.5rem;
         border-radius: var(--r, 18px);
-        background: rgba(255, 255, 255, .07);
-        border: 1px solid rgba(255, 255, 255, .16);
-        -webkit-backdrop-filter: blur(10px);
-        backdrop-filter: blur(10px);
-        box-shadow: 0 18px 50px rgba(0, 0, 0, .35);
+        background: var(--surface, #fff);
+        border: 1px solid var(--line, #e7e9f2);
+        box-shadow: 0 18px 45px rgba(13, 20, 40, .12);
     }
-    .score-label { color: rgba(255, 255, 255, .7); font-size: .85rem; text-transform: uppercase; letter-spacing: .08em; }
+    .score-label { color: var(--muted, #5b6478); font-size: .85rem; text-transform: uppercase; letter-spacing: .08em; }
     .score-value {
         font-family: 'Space Grotesk', sans-serif; font-size: 2.4rem; font-weight: 700; line-height: 1.1;
-        background: linear-gradient(135deg, #c4b5fd, #22d3ee);
+        background: linear-gradient(135deg, #6366f1, #8b5cf6);
         -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
     }
-    .score-summary { color: rgba(255, 255, 255, .82); font-size: 1rem; max-width: 420px; }
+    .score-summary { color: var(--ink, #0b1020); font-size: 1rem; max-width: 420px; }
 </style>
 
 {% endblock %}

backend/templates/interview.html

@@ -434,16 +434,14 @@
         body {
             font-family: 'Inter', 'Segoe UI', sans-serif;
             background:
-                radial-gradient(800px 500px at 12% 8%, rgba(99, 102, 241, .45), transparent 60%),
-                radial-gradient(700px 500px at 88% 12%, rgba(139, 92, 246, .40), transparent 60%),
-                radial-gradient(700px 500px at 50% 110%, rgba(34, 211, 238, .25), transparent 60%),
-                linear-gradient(180deg, #0b1020, #141a2e) !important;
+                radial-gradient(700px 420px at 50% -10%, rgba(99, 102, 241, .10), transparent 70%),
+                linear-gradient(180deg, #ffffff 0%, #f5f6ff 55%, #f5f6fb 100%) !important;
         }
 
         .interview-container {
             border-radius: 24px;
-            border: 1px solid rgba(255, 255, 255, .6);
-            box-shadow: 0 30px 80px rgba(0, 0, 0, .45);
+            border: 1px solid #e7e9f2;
+            box-shadow: 0 24px 60px rgba(13, 20, 40, .12);
         }
 
         .header {