Update client/src/index.css

client/src/index.css

@@ -3,8 +3,6 @@
   --glass-border: rgba(255, 255, 255, 0.2);
   --glass-bg: rgba(255, 255, 255, 0.1);
   --glass-highlight: rgba(255, 255, 255, 0.15);
-  --text-primary: #ffffff;
-  --text-secondary: rgba(255, 255, 255, 0.7);
   --accent-pink: #ff0080;
 }
 
@@ -13,19 +11,28 @@ body {
   color: white;
   font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
   overflow-x: hidden;
-  /* THE LIQUID GRADIENT BACKGROUND */
-  background: 
-    radial-gradient(circle at 10% 20%, rgb(255, 10, 80) 0%, transparent 40%),
-    radial-gradient(circle at 90% 80%, rgb(255, 100, 100) 0%, transparent 40%),
-    radial-gradient(circle at 50% 50%, rgb(120, 0, 255) 0%, transparent 60%),
-    #2a0010; /* Deep red/purple base */
-  background-attachment: fixed;
+  
+  /* --- 1. THE LIQUID ANIMATION --- */
+  background: linear-gradient(
+    300deg, 
+    #ff0080, /* Neon Pink */
+    #7928ca, /* Deep Purple */
+    #ff4d4d, /* Hot Red */
+    #2a0010  /* Dark Base */
+  );
+  background-size: 240% 240%; /* Zoomed in to create "movement" */
+  animation: liquidFlow 18s ease infinite; /* The slow flow */
   min-height: 100vh;
 }
 
-/* --- GLASS COMPONENTS --- */
+/* MOVEMENT KEYFRAMES */
+@keyframes liquidFlow {
+  0% { background-position: 0% 50%; }
+  50% { background-position: 100% 50%; }
+  100% { background-position: 0% 50%; }
+}
 
-/* The Main Container for "Cards" */
+/* --- GLASS COMPONENTS --- */
 .glass-panel {
   background: var(--glass-bg);
   backdrop-filter: blur(24px);
@@ -35,13 +42,11 @@ body {
   border-radius: 24px;
 }
 
-/* Glass Pills (Dropdowns & Buttons) */
 .glass-pill {
   background: var(--glass-bg);
   backdrop-filter: blur(16px);
-  -webkit-backdrop-filter: blur(16px);
   border: 1px solid var(--glass-border);
-  border-radius: 9999px; /* Fully round */
+  border-radius: 9999px;
   padding: 8px 16px;
   color: white;
   font-size: 14px;
@@ -49,36 +54,62 @@ body {
   cursor: pointer;
   transition: all 0.2s ease;
   outline: none;
-  /* Fix for blank spots: explicit width/height ensures visibility */
   min-width: 80px; 
 }
-
 .glass-pill:hover {
   background: var(--glass-highlight);
   border-color: rgba(255, 255, 255, 0.4);
-  transform: translateY(-1px);
 }
+.glass-pill option { background: #2a0010; color: white; }
 
-.glass-pill option {
-  background: #2a0010; /* Dark background for dropdown items */
-  color: white;
-}
-
-/* THE "TEK" LOGO (Frosted Box) */
-.logo-box {
+/* --- 2. THE EXPANDING LOGO --- */
+.logo-expand-container {
+  display: flex;
+  align-items: center;
   background: rgba(255, 255, 255, 0.1);
   border: 1px solid rgba(255, 255, 255, 0.25);
   backdrop-filter: blur(20px);
-  border-radius: 16px;
+  border-radius: 9999px; /* Pill shape */
   padding: 8px 16px;
+  cursor: default;
+  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1); /* Smooth snap */
+  overflow: hidden;
+  width: 32px; /* Start small (approx width of just 'TEK') */
+  white-space: nowrap;
+}
+
+/* HOVER STATE: Expand width */
+.logo-expand-container:hover {
+  width: 110px; /* Expand to fit 'TEK BUILD' */
+  background: rgba(255, 255, 255, 0.2);
+  box-shadow: 0 0 15px rgba(255, 255, 255, 0.3);
+}
+
+.logo-main {
   font-weight: 900;
   letter-spacing: 2px;
   text-transform: uppercase;
   font-size: 0.9rem;
-  box-shadow: 0 4px 15px rgba(0,0,0,0.1);
+  margin-right: 8px;
+}
+
+.logo-hidden {
+  opacity: 0;
+  font-size: 0.8rem;
+  letter-spacing: 1px;
+  font-weight: 400;
+  color: rgba(255, 255, 255, 0.8);
+  transform: translateX(-10px);
+  transition: all 0.3s ease;
 }
 
-/* INPUT FIELD (Bottom Bar) */
+/* REVEAL TEXT ON HOVER */
+.logo-expand-container:hover .logo-hidden {
+  opacity: 1;
+  transform: translateX(0);
+}
+
+/* INPUT FIELD */
 textarea {
   background: rgba(0, 0, 0, 0.3);
   border: 1px solid var(--glass-border);
@@ -93,7 +124,7 @@ textarea:focus {
   outline: none;
 }
 
-/* THE RUN BUTTON (Floating Liquid) */
+/* RUN BUTTON */
 .run-btn {
   background: linear-gradient(135deg, #ff0080 0%, #ff4e50 100%);
   border: none;
@@ -101,12 +132,9 @@ textarea:focus {
   color: white;
   box-shadow: 0 10px 20px rgba(255, 0, 80, 0.3);
   transition: transform 0.2s;
-  display: flex; 
-  align-items: center; 
-  justify-content: center;
+  display: flex; align-items: center; justify-content: center;
 }
 .run-btn:active { transform: scale(0.95); }
-.run-btn:disabled { filter: grayscale(1); opacity: 0.7; }
 
 /* HOLO UPLOAD BOX */
 .holo-box {
@@ -117,7 +145,4 @@ textarea:focus {
   position: relative;
   transition: all 0.3s;
 }
-.holo-box:hover {
-  background: rgba(255, 255, 255, 0.1);
-  border-color: white;
-}
+.holo-box:hover { background: rgba(255, 255, 255, 0.1); border-color: white; }