Update style.css

style.css

@@ -14,7 +14,7 @@
   --glass:rgba(0,0,0,.32);
 
   --accent:#8cb4ff;
-  --accentGlow: rgba(140,180,255,.20);
+  --accentGlow: rgba(14,18,25,.10);
 
   --rSm:10px;
   --rMd:12px;
@@ -36,7 +36,7 @@ body, .gradio-container{
   z-index:0;
   background:#000;
   pointer-events:none;
-  opacity:.70;
+  opacity:.80;
 }
 
 /*  Nav */
@@ -45,7 +45,7 @@ body, .gradio-container{
   top: 0; left: 0; right: 0;
   z-index: 999;
   padding: 12px 22px;
-  background: linear-gradient(180deg, rgba(0,0,0,.55), rgba(0,0,0,.22));
+  background: linear-gradient(180deg, rgba(0,0,0,.45), rgba(0,0,0,.22));
   backdrop-filter: blur(12px);
   border-bottom: 1px solid rgba(255,255,255,.06);
 }
@@ -62,7 +62,7 @@ body, .gradio-container{
   font-weight: 700;
   font-size: 1.05rem;
   letter-spacing: .22px;
-  opacity: .92;
+  opacity: .82;
 }
 
 #tqNav .nav-links{
@@ -117,7 +117,7 @@ body, .gradio-container{
   height:2px;
   background: var(--fg);     /* FIX: was black */
   position:relative;
-  opacity:.9;
+  opacity:.7;
 }
 
 #tqNav .menu-btn span::before,
@@ -128,7 +128,7 @@ body, .gradio-container{
   width:16px;
   height:2px;
   background: var(--fg);     /* FIX: was black */
-  opacity:.9;
+  opacity:.7;
 }
 
 #tqNav .menu-btn span::before{ top:-6px; }
@@ -156,7 +156,7 @@ body, .gradio-container{
   border-radius: 10px;
   text-decoration:none;
   color: var(--fg);
-  opacity: .88;
+  opacity: .7;
 }
 
 #tqNav .menu a:hover{
@@ -185,14 +185,14 @@ body, .gradio-container{
   backdrop-filter: blur(12px);
   border: 1px solid rgba(255,255,255,.06);
   border-radius: var(--rMd); /* FIX: 10x -> 10px */
-  box-shadow: 0 12px 34px rgba(0,0,0,.45);
+  box-shadow: 0 12px 34px rgba(0,0,0,.35);
 }
 
 .tq-hero .brand{
   font-weight:700;
   letter-spacing:.22px;
   font-size:1.08rem;
-  opacity:.92;
+  opacity:.7;
 }
 
 .tq-hero .desc{
@@ -243,9 +243,9 @@ body, .gradio-container{
 
 .gradio-container .gr-tab-nav button.selected{
   opacity: 1 !important;
-  border-color: rgba(140,180,255,.55) !important;
+  border-color: rgba(14,18,25,.45) !important;
   box-shadow:
-    0 0 0 1px rgba(140,180,255,.18) inset,
+    0 0 0 1px rgba(14,18,25,.18) inset,
     0 0 20px var(--accentGlow) !important;
 }
 
@@ -274,7 +274,7 @@ body, .gradio-container{
 .gradio-container .gr-button:hover{
   opacity:1 !important;
   background: rgba(255,255,255,.08) !important;
-  border-color: rgba(140,180,255,.35) !important;
+  border-color: rgba(14,18,25,.35) !important;
   box-shadow: 0 0 18px var(--accentGlow);
 }