Update style.css

style.css

@@ -2,38 +2,40 @@
                 TWOQUARKS - QuarksLab
    ═══════════════════════════════════════════════════════════
    ──── Precision systems for adaptive intelligence. ──── */
-* {
-  margin: 0;
-  padding: 0;
-  box-sizing: border-box;
-}
+
+* { margin: 0; padding: 0; box-sizing: border-box; }
+
 :root {
+  /* keep tokens but UI should be dark-glass first */
   --ultra-blue: #3B82F6;
   --ultra-blue-bright: #60A5FA;
   --ultra-blue-deep: #1E40AF;
   --ultra-blue-glow: rgba(39, 100, 180, 0.35);
 
   --bg-base: #000000;
-  --bg-elev: rgba(10, 12, 18, 0.80);
+  --bg-elev: rgba(10, 12, 18, 0.82);
+
   --fg-primary: #FFFFFF;
-  --fg-secondary: rgba(255, 255, 255, 0.70);
-  --fg-tertiary: rgba(255, 255, 255, 0.45);
+  --fg-secondary: rgba(255, 255, 255, 0.72);
+  --fg-tertiary: rgba(255, 255, 255, 0.46);
 
-  --surface-glass: rgba(0, 0, 0, 0.30);
+  /* DARK GLASS SYSTEM */
+  --surface-glass: rgba(0, 0, 0, 0.34);
   --surface-card: rgba(255, 255, 255, 0.045);
-  --surface-card-hover: rgba(255, 255, 255, 0.08);
+  --surface-card-hover: rgba(255, 255, 255, 0.075);
   --surface-input: rgba(255, 255, 255, 0.04);
 
   --border-subtle: rgba(255, 255, 255, 0.08);
   --border-medium: rgba(255, 255, 255, 0.14);
-  --border-accent: rgba(59, 130, 246, 0.35);
+
+  /* de-emphasize blue (still usable as accent) */
+  --border-accent: rgba(180, 190, 200, 0.22);
 
   --space-xs: 0.5rem;
   --space-sm: 0.75rem;
   --space-md: 1rem;
   --space-lg: 1.5rem;
   --space-xl: 2rem;
-  --space-2xl: 3rem;
 
   --radius-sm: 10px;
   --radius-md: 14px;
@@ -48,20 +50,13 @@
   --trans-slow: 300ms cubic-bezier(0.4, 0, 0.2, 1);
 
   --shadow-soft: 0 10px 30px rgba(0,0,0,0.35);
-  --shadow-glow: 0 0 22px rgba(50,60,60,0.22);
+  --shadow-glow: 0 0 22px rgba(140, 180, 255, 0.10);
 
   --z-base: 1;
-  --z-dropdown: 10;
-  --z-sticky: 20;
-  --z-overlay: 30;
-  --z-modal: 40;
   --z-canvas: 0;
 }
 
-html, body {
-  height: 100%;
-  overflow-x: hidden;
-}
+html, body { height: 100%; overflow-x: hidden; }
 
 body {
   font-family: var(--font-body);
@@ -80,11 +75,12 @@ body {
   padding: var(--space-lg);
 }
 
-.gradio-container .prose, 
+.gradio-container .prose,
 .gradio-container .markdown {
   color: var(--fg-secondary) !important;
 }
 
+/* STARFIELD */
 #quantumField {
   position: fixed;
   inset: 0;
@@ -101,12 +97,13 @@ body {
   padding-top: var(--space-md);
 }
 
+/* HERO */
 .tq-hero {
   margin: var(--space-md) 0 var(--space-lg) 0;
   padding: var(--space-lg) var(--space-xl);
-  background: rgba(0,0,0,0.35);
-  backdrop-filter: blur(16px) saturate(180%);
-  -webkit-backdrop-filter: blur(12px) saturate(180%);
+  background: rgba(0,0,0,0.38);
+  backdrop-filter: blur(16px) saturate(160%);
+  -webkit-backdrop-filter: blur(12px) saturate(160%);
   border: 1px solid var(--border-subtle);
   border-radius: var(--radius-lg);
   box-shadow: var(--shadow-soft);
@@ -116,7 +113,7 @@ body {
   font-weight: 750;
   font-size: 1.55rem;
   letter-spacing: -0.02em;
-  background: linear-gradient(135deg, var(--fg-primary) 0%, var(--ultra-blue-bright) 100%);
+  background: linear-gradient(135deg, var(--fg-primary) 0%, rgba(210,220,235,0.85) 100%);
   background-clip: text;
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
@@ -130,46 +127,11 @@ body {
   max-width: 70ch;
 }
 
-.tq-pills {
-  display: flex;
-  gap: var(--space-sm);
-  flex-wrap: wrap;
-  margin-top: var(--space-md);
-}
-
-.tq-pill {
-  display: inline-flex;
-  align-items: center;
-  gap: 0.5rem;
-  padding: 0.55rem 0.95rem;
-  font-size: 0.875rem;
-  font-weight: 520;
-  color: var(--fg-primary);
-  text-decoration: none;
-  background: rgba(255, 255, 255, 0.02);
-  border: 1px solid var(--border-medium);
-  border-radius: var(--radius-full);
-  opacity: 0.92;
-  transition: all var(--trans-base);
-  white-space: nowrap;
-}
-
-.tq-pill:hover {
-  background: rgba(255, 255, 255, 0.06);
-  border-color: var(--border-accent);
-  box-shadow: var(--shadow-glow);
-}
-
-.tq-pill--active {
-  background: rgba(59,130,246,0.18);
-  border-color: rgba(59,130,246,0.65);
-  box-shadow: 0 0 0 1px rgba(59,130,246,0.25) inset, var(--shadow-glow);
-}
-
+/* BASE PANELS / CARDS — force dark glass (no blue wash) */
 .gradio-container .gr-panel,
 .gradio-container [class*="gr-box"],
 .gradio-container .gr-form,
-.gradio-container .block, 
+.gradio-container .block,
 .gradio-container .wrap {
   background: var(--surface-card) !important;
   backdrop-filter: blur(12px) !important;
@@ -177,18 +139,22 @@ body {
   border: 1px solid var(--border-subtle) !important;
   border-radius: var(--radius-md) !important;
   padding: var(--space-lg) !important;
-  transition: transform var(--trans-base), box-shadow var(--trans-base), border-color var(--trans-base), background var(--trans-base) !important;
+  transition: transform var(--trans-base),
+              box-shadow var(--trans-base),
+              border-color var(--trans-base),
+              background var(--trans-base) !important;
   box-shadow: 0 6px 22px rgba(0,0,0,0.22) !important;
 }
 
 .gradio-container .gr-panel:hover,
 .gradio-container [class*="gr-box"]:hover,
 .gradio-container .gr-form:hover {
-  border-color: rgba(59,130,246,0.18) !important;
+  border-color: rgba(255,255,255,0.14) !important;
   background: var(--surface-card-hover) !important;
-  box-shadow: 0 10px 32px rgba(0,0,0,0.30), 0 0 18px rgba(59,130,246,0.12) !important;
+  box-shadow: 0 10px 32px rgba(0,0,0,0.30) !important;
 }
 
+/* TITLES */
 .tq-card-title {
   font-weight: 650;
   letter-spacing: -0.01em;
@@ -202,6 +168,7 @@ body {
   margin-bottom: 0.75rem;
 }
 
+/* TABS */
 .gradio-container .gr-tab-nav {
   background: transparent !important;
   border: none !important;
@@ -224,17 +191,18 @@ body {
 
 .gradio-container .gr-tab-nav button:hover {
   background: rgba(255, 255, 255, 0.06) !important;
-  border-color: var(--border-accent) !important;
+  border-color: rgba(255,255,255,0.20) !important;
 }
 
 .gradio-container .gr-tab-nav button.selected,
 .gradio-container .gr-tab-nav button[aria-selected="true"] {
-  background: rgba(59,130,246,0.18) !important;
-  border-color: rgba(59,130,246,0.65) !important;
-  box-shadow: 0 0 0 1px rgba(59,130,246,0.25) inset, var(--shadow-glow) !important;
+  background: rgba(255,255,255,0.06) !important;
+  border-color: rgba(255,255,255,0.26) !important;
+  box-shadow: 0 0 0 1px rgba(255,255,255,0.12) inset !important;
   opacity: 1 !important;
 }
 
+/* INPUTS */
 .gradio-container input[type="text"],
 .gradio-container input[type="number"],
 .gradio-container textarea,
@@ -252,14 +220,15 @@ body {
 .gradio-container textarea:focus,
 .gradio-container select:focus {
   outline: none !important;
-  border-color: rgba(5,13,24,0.70) !important;
-  box-shadow: 0 0 0 3px rgba(9,0,26,0.22) !important;
+  border-color: rgba(255,255,255,0.28) !important;
+  box-shadow: 0 0 0 3px rgba(255,255,255,0.08) !important;
 }
 
 .gradio-container input[type="range"] {
-  accent-color: var(--ultra-blue) !important;
+  accent-color: rgba(210,220,235,0.75) !important;
 }
 
+/* BUTTONS — dark glass, subtle accent (not primary-blue) */
 .gradio-container button:not(.gr-tab-nav button),
 .gradio-container .gr-button {
   padding: 0.65rem 1.05rem !important;
@@ -267,46 +236,47 @@ body {
   font-weight: 600 !important;
   letter-spacing: 0.01em !important;
   color: var(--fg-primary) !important;
-  background: rgba(59,130,246,0.15) !important; 
-  border: 1px solid rgba(96,165,250,0.35) !important;
+  background: rgba(255,255,255,0.04) !important;
+  border: 1px solid rgba(255,255,255,0.14) !important;
   border-radius: var(--radius-full) !important;
-  opacity: 1 !important;
   cursor: pointer !important;
-  transition: transform var(--trans-fast), box-shadow var(--trans-base), background var(--trans-base), border-color var(--trans-base) !important;
+  transition: transform var(--trans-fast),
+              box-shadow var(--trans-base),
+              background var(--trans-base),
+              border-color var(--trans-base) !important;
 }
 
 .gradio-container button:hover:not(.gr-tab-nav button),
 .gradio-container .gr-button:hover {
-  background: rgba(59,130,246,0.28) !important;
-  border-color: rgba(96,165,250,0.65) !important;
-  box-shadow: 0 0 18px rgba(59,130,246,0.22) !important;
+  background: rgba(255,255,255,0.07) !important;
+  border-color: rgba(255,255,255,0.22) !important;
+  box-shadow: 0 0 18px rgba(0,0,0,0.20) !important;
 }
 
 .gradio-container button:active:not(.gr-tab-nav button),
-.gradio-container .gr-button:active {
-  transform: scale(0.985) !important;
-}
+.gradio-container .gr-button:active { transform: scale(0.985) !important; }
 
 .gradio-container button:disabled,
 .gradio-container .gr-button:disabled {
   opacity: 0.35 !important;
   cursor: not-allowed !important;
-  filter: grayscale(0.2) !important;
 }
 
+/* Even if variant="primary" leaks, keep it dark */
 .gradio-container button.primary,
 .gradio-container .gr-button-primary {
-  background: linear-gradient(135deg, var(--ultra-blue) 0%, var(--ultra-blue-bright) 100%) !important;
-  border-color: rgba(255,255,255,0.10) !important;
-  box-shadow: 0 10px 30px rgba(0,0,0,0.15) !important;
+  background: rgba(255,255,255,0.06) !important;
+  border-color: rgba(255,255,255,0.20) !important;
+  box-shadow: 0 10px 30px rgba(0,0,0,0.18) !important;
 }
 
 .gradio-container button.primary:hover,
 .gradio-container .gr-button-primary:hover {
-  filter: brightness(1.08) saturate(1.05) !important;
-  box-shadow: 0 14px 40px rgba(59,130,246,0.30) !important;
+  filter: brightness(1.06) !important;
+  box-shadow: 0 14px 40px rgba(0,0,0,0.22) !important;
 }
 
+/* IMAGES general */
 .gradio-container img {
   width: auto !important;
   height: auto !important;
@@ -316,72 +286,52 @@ body {
   display: block !important;
 }
 
-.gradio-container .gr-image,
-.gradio-container .gr-image-preview,
-.gradio-container .gr-image-container,
-.gradio-container [class*="image-container"] {
-  width: 100% !important;
-  max-width: 100% !important;
+/* IMPORTANT: kill any leftover preview containers if some Gradio version still renders them */
+#down_gallery .gr-gallery-preview,
+#strange_gallery .gr-gallery-preview,
+#down_gallery [data-testid="gallery-preview"],
+#strange_gallery [data-testid="gallery-preview"] {
+  display: none !important;
+  visibility: hidden !important;
+  height: 0 !important;
   overflow: hidden !important;
-  border-radius: var(--radius-md) !important;
-  background: rgba(10, 12, 18, 0.55) !important;
-  border: 1px solid var(--border-subtle) !important;
 }
 
-.gradio-container .gr-image img,
-.gradio-container .gr-image-preview img,
-.gradio-container .gr-image-container img,
-.gradio-container [class*="image-container"] img {
-  width: 100% !important;
-  height: auto !important;
-  max-height: 540px !important;
-  object-fit: contain !important;
-}
+/* ===== Gallery (ONLY filmstrip) — NO [class*="gallery"] selectors ===== */
+#down_gallery, #strange_gallery { margin-top: 12px !important; }
 
-@media (max-width: 768px) {
-  .gradio-container .gr-image img,
-  .gradio-container .gr-image-preview img,
-  .gradio-container .gr-image-container img,
-  .gradio-container [class*="image-container"] img {
-    max-height: 360px !important;
-  }
-}
-
-#down_gallery, #strange_gallery {
-  margin-top: 12px !important;
+#down_gallery .gr-gallery,
+#strange_gallery .gr-gallery {
+  background: rgba(0,0,0,0.22) !important;
+  border: 1px solid var(--border-subtle) !important;
+  border-radius: var(--radius-md) !important;
+  padding: 10px !important;
+  overflow: hidden !important;
 }
 
-#down_gallery [class*="gallery"],
-#strange_gallery [class*="gallery"] {
+/* strip wrapper */
+#down_gallery .gr-gallery > div,
+#strange_gallery .gr-gallery > div {
   overflow-x: auto !important;
   overflow-y: hidden !important;
-  padding-bottom: 10px !important;
   scroll-snap-type: x mandatory !important;
-  scroll-behavior: smooth !important;
   -webkit-overflow-scrolling: touch !important;
+  padding-bottom: 10px !important;
 }
 
-#down_gallery [class*="gallery"]::-webkit-scrollbar,
-#strange_gallery [class*="gallery"]::-webkit-scrollbar {
-  height: 10px !important;
-}
-
-#down_gallery [class*="gallery"]::-webkit-scrollbar-thumb:hover,
-#strange_gallery [class*="gallery"]::-webkit-scrollbar-thumb:hover {
-  background: rgba(20,25,25,0.20) !important;
-}
-
-#down_gallery [class*="gallery"] [role="list"],
-#strange_gallery [class*="gallery"] [role="list"] {
+/* list */
+#down_gallery [role="list"],
+#strange_gallery [role="list"] {
   display: flex !important;
   flex-wrap: nowrap !important;
   gap: 12px !important;
   padding: 4px !important;
 }
 
+/* tile */
 #down_gallery [role="listitem"],
 #strange_gallery [role="listitem"] {
-  flex: 0 0 220px !important; /* slide width */
+  flex: 0 0 220px !important;
   scroll-snap-align: start !important;
   border-radius: var(--radius-md) !important;
   overflow: hidden !important;
@@ -394,11 +344,13 @@ body {
 #down_gallery [role="listitem"]:hover,
 #strange_gallery [role="listitem"]:hover {
   transform: translateY(-2px) !important;
-  border-color: rgba(96,165,250,0.40) !important;
-  box-shadow: 0 12px 34px rgba(0,0,0,0.36), 0 0 18px rgba(59,130,246,0.14) !important;
+  border-color: rgba(255,255,255,0.18) !important;
+  box-shadow: 0 12px 34px rgba(0,0,0,0.36) !important;
 }
 
-#down_gallery img, #strange_gallery img {
+/* image in tile */
+#down_gallery [role="listitem"] img,
+#strange_gallery [role="listitem"] img {
   width: 100% !important;
   height: 220px !important;
   object-fit: contain !important;
@@ -406,14 +358,38 @@ body {
   background: rgba(0,0,0,0.40) !important;
 }
 
+/* subtle top accent bar, but neutral */
 #down_gallery [role="listitem"]::before,
 #strange_gallery [role="listitem"]::before {
   content: "";
   display: block;
   height: 10px;
-  background: linear-gradient(90deg, rgba(59,130,246,0.35), rgba(96,165,250,0.12), rgba(0,0,0,0));
+  background: linear-gradient(90deg, rgba(255,255,255,0.10), rgba(0,0,0,0));
+}
+
+/* scrollbars inside strip */
+#down_gallery .gr-gallery > div::-webkit-scrollbar,
+#strange_gallery .gr-gallery > div::-webkit-scrollbar { height: 10px !important; }
+
+#down_gallery .gr-gallery > div::-webkit-scrollbar-track,
+#strange_gallery .gr-gallery > div::-webkit-scrollbar-track {
+  background: rgba(255,255,255,0.03) !important;
+  border-radius: 999px !important;
+}
+
+#down_gallery .gr-gallery > div::-webkit-scrollbar-thumb,
+#strange_gallery .gr-gallery > div::-webkit-scrollbar-thumb {
+  background: rgba(255,255,255,0.10) !important;
+  border-radius: 999px !important;
+  border: 1px solid rgba(255,255,255,0.08) !important;
 }
 
+#down_gallery .gr-gallery > div::-webkit-scrollbar-thumb:hover,
+#strange_gallery .gr-gallery > div::-webkit-scrollbar-thumb:hover {
+  background: rgba(255,255,255,0.16) !important;
+}
+
+/* labels, descriptions */
 .gradio-container label,
 .gradio-container .gr-label {
   color: var(--fg-secondary) !important;
@@ -429,84 +405,38 @@ body {
   line-height: 1.55 !important;
 }
 
+/* code blocks */
 .gradio-container pre,
 .gradio-container code {
   font-family: var(--font-mono) !important;
-  background: rgba(59, 130, 246, 0.06) !important;
+  background: rgba(255,255,255,0.04) !important;
   border: 1px solid rgba(255,255,255,0.10) !important;
   border-radius: var(--radius-sm) !important;
   padding: 0.35rem 0.55rem !important;
-  color: var(--ultra-blue-bright) !important;
-}
-
-.gradio-container .gr-loading {
-  color: var(--ultra-blue) !important;
+  color: rgba(210,220,235,0.92) !important;
 }
 
+/* progress */
+.gradio-container .gr-loading { color: rgba(210,220,235,0.80) !important; }
 .gradio-container .progress-bar {
-  background: var(--ultra-blue) !important;
-  box-shadow: 0 0 12px var(--ultra-blue-glow) !important;
+  background: rgba(210,220,235,0.60) !important;
+  box-shadow: 0 0 12px rgba(210,220,235,0.10) !important;
 }
 
-::-webkit-scrollbar {
-  width: 8px;
-  height: 8px;
-}
-
-::-webkit-scrollbar-track {
-  background: rgba(255, 255, 255, 0.02);
-}
-
-::-webkit-scrollbar-thumb {
-  background: rgba(255,255,255,0.14);
-  border-radius: var(--radius-sm);
-}
-
-::-webkit-scrollbar-thumb:hover {
-  background: rgba(96,165,250,0.30);
-}
+/* global scrollbars */
+::-webkit-scrollbar { width: 8px; height: 8px; }
+::-webkit-scrollbar-track { background: rgba(255,255,255,0.02); }
+::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.12); border-radius: var(--radius-sm); }
+::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.18); }
 
 @media (max-width: 768px) {
-  :root {
-    --space-lg: 1rem;
-    --space-xl: 1.5rem;
-  }
-
-  .gradio-container {
-    padding: var(--space-md);
-  }
-
-  .tq-hero {
-    padding: var(--space-md) var(--space-lg);
-  }
-
-  .tq-hero__brand {
-    font-size: 1.25rem;
-  }
-
-  .tq-pills {
-    justify-content: center;
-  }
-}
-
-.tq-glow {
-  box-shadow: var(--shadow-glow) !important;
+  :root { --space-lg: 1rem; --space-xl: 1.5rem; }
+  .gradio-container { padding: var(--space-md); }
+  .tq-hero { padding: var(--space-md) var(--space-lg); }
+  .tq-hero__brand { font-size: 1.25rem; }
+  #down_gallery [role="listitem"], #strange_gallery [role="listitem"] { flex-basis: 200px !important; }
+  #down_gallery [role="listitem"] img, #strange_gallery [role="listitem"] img { height: 200px !important; }
 }
 
-.tq-hide {
-  display: none !important;
-}
-
-.tq-fade-in {
-  animation: tqFadeIn var(--trans-slow) ease-in;
-}
-
-@keyframes tqFadeIn {
-  from { opacity: 0; transform: translateY(6px); }
-  to { opacity: 1; transform: translateY(0); }
-}
-
-footer,
-.gradio-container footer {
-  display: none !important;
-}
+/* kill Gradio footer */
+footer, .gradio-container footer { display: none !important; }