Update style.css

style.css

@@ -20,7 +20,7 @@
   --ultra-blue: #3B82F6;
   --ultra-blue-bright: #60A5FA;
   --ultra-blue-deep: #1E40AF;
-  --ultra-blue-glow: rgba(59, 130, 246, 0.25);
+  --ultra-blue-glow: rgba(39, 100, 180, 0.35);
   
   /* Neutrals */
   --bg-base: #000000;
@@ -29,7 +29,7 @@
   --fg-tertiary: rgba(255, 255, 255, 0.40);
   
   /* Surfaces */
-  --surface-glass: rgba(0, 0, 0, 0.40);
+  --surface-glass: rgba(0, 0, 0, 0.30);
   --surface-card: rgba(255, 255, 255, 0.04);
   --surface-card-hover: rgba(255, 255, 255, 0.08);
   --surface-input: rgba(255, 255, 255, 0.03);
@@ -51,7 +51,7 @@
   --radius-sm: 8px;
   --radius-md: 12px;
   --radius-lg: 16px;
-  --radius-full: 9999px;
+  --radius-full: 999px;
   
   /* Typography */
   --font-body: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
@@ -127,10 +127,10 @@ body {
   padding: var(--space-lg) var(--space-xl);
   background: var(--surface-glass);
   backdrop-filter: blur(16px) saturate(180%);
-  -webkit-backdrop-filter: blur(16px) saturate(180%);
+  -webkit-backdrop-filter: blur(12px) saturate(180%);
   border: 1px solid var(--border-subtle);
   border-radius: var(--radius-lg);
-  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
+  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.09);
 }
 
 .tq-hero__brand {
@@ -190,7 +190,7 @@ body {
   background: var(--ultra-blue-glow);
   border-color: var(--ultra-blue);
   box-shadow: 0 0 0 1px var(--ultra-blue) inset,
-              0 0 20px var(--ultra-blue-glow);
+              0 0 10px var(--ultra-blue-glow);
 }
 
 /* ─────────────────────────────────────────────────────────── */
@@ -248,7 +248,7 @@ body {
   background: var(--ultra-blue-glow) !important;
   border-color: var(--ultra-blue) !important;
   box-shadow: 0 0 0 1px var(--ultra-blue) inset,
-              0 0 20px var(--ultra-blue-glow) !important;
+              0 0 10px var(--ultra-blue-glow) !important;
 }
 
 /* ─────────────────────────────────────────────────────────── */
@@ -288,10 +288,10 @@ body {
   font-size: 0.9375rem !important;
   font-weight: 500 !important;
   color: var(--fg-primary) !important;
-  background: rgba(255, 255, 255, 0.04) !important;
+  background: rgba(255, 255, 255, 0.02) !important;
   border: 1px solid var(--border-medium) !important;
   border-radius: var(--radius-full) !important;
-  opacity: 0.90 !important;
+  opacity: 0.40 !important;
   cursor: pointer !important;
   transition: all var(--trans-base) !important;
 }
@@ -332,20 +332,20 @@ body {
 .gradio-container .gr-image-preview {
   border-radius: var(--radius-md) !important;
   overflow: hidden !important;
-  border: 1px solid var(--border-subtle) !important;
+  border: 0.5px solid var(--border-subtle) !important;
   transition: all var(--trans-base) !important;
 }
 
 .gradio-container .gr-gallery .gr-image:hover {
   border-color: var(--ultra-blue) !important;
-  box-shadow: 0 8px 24px var(--ultra-blue-glow) !important;
-  transform: translateY(-2px) !important;
+  box-shadow: 0 6px 12px var(--ultra-blue-glow) !important;
+  transform: translateY(-3px) !important;
 }
 
 /* Image container sizing */
 .gradio-container .gr-image img,
 .gradio-container .gr-gallery img {
-  width: 100% !important;
+  width: 60% !important;
   height: auto !important;
   object-fit: cover !important;
   display: block !important;
@@ -355,7 +355,7 @@ body {
 .gradio-container .gr-image-container,
 .gradio-container [class*="image-container"] {
   aspect-ratio: 1 / 1;
-  max-width: 100%;
+  max-width: 60%;
   border-radius: var(--radius-md);
   overflow: hidden;
   background: var(--surface-card);
@@ -366,7 +366,7 @@ body {
 /* ─────────────────────────────────────────────────────────── */
 .tq-carousel {
   position: relative;
-  width: 100%;
+  width: 70%;
   overflow: hidden;
   border-radius: var(--radius-lg);
   background: var(--surface-card);
@@ -381,7 +381,7 @@ body {
 
 .tq-carousel__item {
   flex: 0 0 auto;
-  width: 320px;
+  width: 210px;
   aspect-ratio: 1 / 1;
   border-radius: var(--radius-md);
   overflow: hidden;
@@ -391,13 +391,13 @@ body {
 
 .tq-carousel__item:hover {
   border-color: var(--ultra-blue);
-  box-shadow: 0 8px 24px var(--ultra-blue-glow);
-  transform: scale(1.02);
+  box-shadow: 0 6px 14px var(--ultra-blue-glow);
+  transform: scale(0.7);
 }
 
 .tq-carousel__item img {
-  width: 100%;
-  height: 100%;
+  width: 70%;
+  height: 70%;
   object-fit: cover;
   display: block;
 }
@@ -407,8 +407,8 @@ body {
   position: absolute;
   top: 50%;
   transform: translateY(-50%);
-  width: 40px;
-  height: 40px;
+  width: 25px;
+  height: 25px;
   display: flex;
   align-items: center;
   justify-content: center;
@@ -427,7 +427,7 @@ body {
 .tq-carousel__nav:hover {
   background: var(--ultra-blue-glow);
   border-color: var(--ultra-blue);
-  box-shadow: 0 0 16px var(--ultra-blue-glow);
+  box-shadow: 0 0 12px var(--ultra-blue-glow);
 }
 
 /* ─────────────────────────────────────────────────────────── */
@@ -514,7 +514,7 @@ body {
   }
   
   .tq-carousel__item {
-    width: 280px;
+    width: 220px;
   }
   
   .tq-pills {
@@ -522,14 +522,14 @@ body {
   }
 }
 
-@media (max-width: 480px) {
+@media (max-width: 280px) {
   .tq-carousel__item {
-    width: 240px;
+    width: 220px;
   }
   
   .tq-carousel__nav {
-    width: 32px;
-    height: 32px;
+    width: 24px;
+    height: 24px;
   }
 }
 
@@ -549,7 +549,7 @@ body {
 }
 
 @keyframes fadeIn {
-  from { opacity: 0; transform: translateY(10px); }
+  from { opacity: 0; transform: translateY(5px); }
   to { opacity: 1; transform: translateY(0); }
 }