style: modernize UI with dark glass theme and 40% bg opacity

1 files changed, 10 insertions, 7 deletions

diff --git a/web/static/css/input.css b/web/static/css/input.css
index 321aa4f..7dd2055 100644
--- a/web/static/css/input.css
+++ b/web/static/css/input.css
@@ -7,29 +7,32 @@
 /* Custom base styles - Dark translucent theme */
 @layer base {
   body {
-    @apply antialiased text-white bg-gray-900 min-h-screen;
+    @apply antialiased text-slate-200 bg-slate-950 min-h-screen relative;
     font-family: 'Inter', system-ui, sans-serif;
-    text-shadow: 0 0 8px black, 0 0 8px black;
+  }
+
+  .bg-overlay {
+    @apply fixed inset-0 z-[-1] opacity-40 bg-cover bg-center bg-no-repeat;
   }
 
   /* Headings */
   h1, h2, h3, h4, h5, h6 {
-    @apply text-white font-light tracking-wide;
+    @apply text-white font-medium tracking-tight;
   }
 
-  a { @apply text-white/90 hover:text-white; }
+  a { @apply text-slate-300 hover:text-white transition-colors; }
 }
 
 /* Custom components */
 @layer components {
   /* Dark Glass Card */
   .card {
-    @apply bg-black/70 backdrop-blur-sm rounded-lg p-4 transition-all duration-200 overflow-hidden;
-    box-shadow: 0 0 12px black;
+    @apply bg-slate-900/80 backdrop-blur-md rounded-xl p-5 transition-all duration-200 border border-white/5;
+    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
   }
 
   .card-hover {
-    @apply hover:bg-black/80;
+    @apply hover:bg-slate-800/90 hover:border-white/10;
   }
 
   /* Panel with overflow clipping */