Update style.css

style.css

@@ -1,24 +1,11 @@
-/* ===== TwoQuarks skin for Gradio ===== */
+/* ===== TwoQuarks skin for Gradio (ported from index.html) ===== */
 *{margin:0;padding:0;box-sizing:border-box}
 
 :root{
-  --bg:#000;
-  --fg:#fff;
-  --muted:rgba(255,255,255,.55);
-
-  --card:rgba(255,255,255,.04);
-  --card2:rgba(255,255,255,.08);
-  --stroke:rgba(255,255,255,.10);
-
-  /* glass needs to be visible but not milky */
-  --glass:rgba(0,0,0,.32);
-
+  --bg:#000; --fg:#fff; --muted:rgba(255,255,255,.55);
+  --card:rgba(255,255,255,.04); --card2:rgba(255,255,255,.08);
+  --stroke:rgba(255,255,255,.10); --glass:rgba(0,0,0,.38);
   --accent:#8cb4ff;
-  --accentGlow: rgba(14,18,25,.10);
-
-  --rSm:10px;
-  --rMd:12px;
-  --rLg:14px;
 }
 
 html,body{height:100%}
@@ -29,152 +16,20 @@ body, .gradio-container{
   overflow-x:hidden;
 }
 
-/* Starfield canvas (keep it inside stacking context) */
+/* Starfield canvas like your site */
 #quantumField{
   position:fixed; inset:0;
   width:100vw; height:100vh;
   z-index:0;
   background:#000;
   pointer-events:none;
-  opacity:.80;
-}
-
-/*  Nav */
-#tqNav{
-  position: fixed;
-  top: 0; left: 0; right: 0;
-  z-index: 999;
-  padding: 12px 22px;
-  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);
-}
-
-#tqNav .nav-inner{
-  max-width: 980px;
-  margin: 0 auto;
-  display:flex;
-  align-items:center;
-  gap: 12px;
-}
-
-#tqNav .brand{
-  font-weight: 700;
-  font-size: 1.05rem;
-  letter-spacing: .22px;
-  opacity: .82;
-}
-
-#tqNav .nav-links{
-  display:flex;
-  gap:10px;
-  margin-left: 14px;
-  flex-wrap: wrap;
-}
-
-#tqNav .nav-links a{
-  text-decoration:none;
-  color: var(--fg);
-  padding: 8px 12px;
-  border: 1px solid rgba(255,255,255,.12);
-  border-radius: 999px;
-  font-size: .9rem;
-  opacity: .78;
-  transition: .15s ease;
-  white-space: nowrap;
-  background: rgba(255,255,255,.02);
-}
-
-#tqNav .nav-links a:hover{
-  opacity: 1;
-  background: rgba(255,255,255,.06);
-  border-color: rgba(255,255,255,.18);
-}
-
-#tqNav .spacer{ flex:1; }
-
-/* Hamburger button */
-#tqNav .menu-btn{
-  width: 34px;
-  height: 34px;
-  display:flex;
-  align-items:center;
-  justify-content:center;
-  border: 1px solid rgba(255,255,255,.14);
-  border-radius: 12px;
-  cursor: pointer;
-  background: rgba(255,255,255,.03);
-  transition: .15s ease;
-}
-#tqNav .menu-btn:hover{
-  background: rgba(255,255,255,.06);
-  border-color: rgba(255,255,255,.20);
-}
-
-#tqNav .menu-btn span{
-  display:block;
-  width:16px;
-  height:2px;
-  background: var(--fg);     /* FIX: was black */
-  position:relative;
-  opacity:.7;
-}
-
-#tqNav .menu-btn span::before,
-#tqNav .menu-btn span::after{
-  content:"";
-  position:absolute;
-  left:0;
-  width:16px;
-  height:2px;
-  background: var(--fg);     /* FIX: was black */
-  opacity:.7;
-}
-
-#tqNav .menu-btn span::before{ top:-6px; }
-#tqNav .menu-btn span::after{ top: 6px; }
-
-#tqNav .menu{
-  position:absolute;
-  top: 60px;
-  right: 24px;
-  min-width: 220px;
-  padding: 10px;
-  border-radius: var(--rLg);
-  background: var(--glass);
-  backdrop-filter: blur(14px);
-  border: 1px solid rgba(255,255,255,.10);
-  box-shadow: 0 0 28px rgba(0,0,0,.6);
-  display:none;
-}
-
-#tqNav .menu.open{ display:block; }
-
-#tqNav .menu a{
-  display:block;
-  padding: 10px 10px;
-  border-radius: 10px;
-  text-decoration:none;
-  color: var(--fg);
-  opacity: .7;
 }
 
-#tqNav .menu a:hover{
-  background: rgba(255,255,255,.06);
-  opacity: 1;
-}
-
-#tqNav .menu .sep{
-  height:1px;
-  background: rgba(255,255,255,.10);
-  margin: 8px 2px;
-}
-
-/* Make app sit above canvas and below fixed nav */
+/* Make app sit above canvas */
 #tqApp{
   position:relative;
-  z-index:1;             /* above canvas */
-  padding-top: 84px;
+  z-index:1;
+  padding-top: 10px;
 }
 
 /* Hero / header panel (glass) */
@@ -184,22 +39,36 @@ body, .gradio-container{
   background: var(--glass);
   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,.35);
+  border-radius: 14px;
 }
-
 .tq-hero .brand{
-  font-weight:700;
-  letter-spacing:.22px;
-  font-size:1.08rem;
-  opacity:.7;
+  font-weight:700; letter-spacing:.2px; font-size:1.1rem;
 }
-
 .tq-hero .desc{
   margin-top:8px;
   color: var(--muted);
   font-size: .98rem;
-  line-height: 1.45;
+  line-height: 1.55;
+}
+
+/* Pills navigation (like your nav-links a) */
+.tq-pills{
+  display:flex; gap:10px; flex-wrap:wrap;
+  margin-top:12px;
+}
+.tq-pill{
+  text-decoration:none; color:var(--fg);
+  padding:8px 12px;
+  border:1px solid rgba(255,255,255,.12);
+  border-radius:999px;
+  font-size:.9rem; opacity:.86;
+  transition:.18s ease;
+  white-space:nowrap;
+}
+.tq-pill:hover{opacity:1;background:rgba(255,255,255,.06)}
+.tq-pill.active{
+  border-color:rgba(140,180,255,.55);
+  box-shadow:0 0 0 1px rgba(140,180,255,.20) inset;
 }
 
 /* Cards / panels */
@@ -208,79 +77,64 @@ body, .gradio-container{
 .gradio-container .wrap{
   border:1px solid var(--stroke) !important;
   background: var(--card) !important;
-  backdrop-filter: blur(10px) !important;
-  border-radius: var(--rMd) !important;
+  backdrop-filter: blur(8px) !important;
+  border-radius: 12px !important;
 }
 
-/* Hover effect */
+/* Hover effect on panels that look like cards */
 .gradio-container .gr-panel:hover{
   background: var(--card2) !important;
-  border-color: rgba(255,255,255,.14) !important;
 }
 
-/* Tabs (pill vibe) */
+/* Tabs (match pill vibe) */
 .gradio-container .gr-tab-nav{
   background: transparent !important;
   border: none !important;
   gap: 10px !important;
 }
-
 .gradio-container .gr-tab-nav button{
   border:1px solid rgba(255,255,255,.12) !important;
   border-radius:999px !important;
   padding:8px 12px !important;
   color: var(--fg) !important;
-  opacity:.78 !important;
-  background: rgba(255,255,255,.02) !important;
+  opacity:.86 !important;
+  background: rgba(255,255,255,.00) !important;
   transition:.18s ease !important;
 }
-
 .gradio-container .gr-tab-nav button:hover{
   opacity:1 !important;
   background: rgba(255,255,255,.06) !important;
-  border-color: rgba(255,255,255,.18) !important;
 }
-
 .gradio-container .gr-tab-nav button.selected{
   opacity: 1 !important;
-  border-color: rgba(14,18,25,.45) !important;
-  box-shadow:
-    0 0 0 1px rgba(14,18,25,.18) inset,
-    0 0 20px var(--accentGlow) !important;
+  border-color: rgba(140,180,255,.55) !important;
+  box-shadow: 0 0 0 1px rgba(140,180,255,.20) inset !important;
 }
 
 /* Inputs */
 .gradio-container input,
 .gradio-container textarea{
   background: rgba(255,255,255,.03) !important;
-  border:1px solid rgba(255,255,255,.12) !important;
+  border:1px solid rgba(255,255,255,.14) !important;
   color: var(--fg) !important;
-  border-radius: var(--rMd) !important;
+  border-radius: 12px !important;
 }
 
-/* Buttons */
+/* Buttons like your .btn */
 .gradio-container button,
 .gradio-container .gr-button{
   color: var(--fg) !important;
-  border:1px solid rgba(255,255,255,.12) !important;
-  background: rgba(255,255,255,.04) !important;
+  border:1px solid rgba(255,255,255,.14) !important;
+  background: rgba(255,255,255,.03) !important;
   border-radius:999px !important;
   padding:10px 14px !important;
-  opacity:.86 !important;
+  opacity:.92 !important;
   transition:.15s ease !important;
 }
-
 .gradio-container button:hover,
 .gradio-container .gr-button:hover{
   opacity:1 !important;
-  background: rgba(255,255,255,.08) !important;
-  border-color: rgba(14,18,25,.35) !important;
-  box-shadow: 0 0 18px var(--accentGlow);
-}
-
-/* Gallery tweaks */
-.gradio-container .gallery{
-  border-radius: var(--rMd) !important;
+  background: rgba(255,255,255,.07) !important;
 }
 
 /* Range accent */
@@ -288,226 +142,3 @@ input[type="range"]{ accent-color: var(--accent); }
 
 /* Optional: hide Gradio footer */
 footer{ display:none !important; }
-
-
-
-/* ============================================================
-   FIX PACK — Gallery Carousel + Button Width (Gradio 4.44.x)
-   REQUIRES: elem_id="down_gallery" and elem_id="strange_gallery"
-   ============================================================ */
-
-/* ----------------------------
-   1) Buttons: stop banner mode
-   ---------------------------- */
-
-/* Gradio often forces buttons to 100% width via wrapper rules */
-.gradio-container :is(button, .gr-button){
-  width: fit-content !important;
-  min-width: 180px !important;
-  max-width: 320px !important;
-
-  display: inline-flex !important;
-  align-items: center !important;
-  justify-content: center !important;
-
-  flex: 0 0 auto !important;
-}
-
-/* If the parent is a flex/column that stretches, align to start */
-.gradio-container :is(.gr-panel, .block, .wrap, .container, .gr-form) :is(button, .gr-button){
-  align-self: flex-start !important;
-}
-
-/* Some Gradio themes wrap buttons inside a full-width container */
-.gradio-container :is(button, .gr-button){
-  white-space: nowrap !important;
-}
-
-
-/* ----------------------------
-   2) Gallery: kill “round giant”
-   ---------------------------- */
-
-/* Neutralize mask/clip and ensure thumbnails, not posters */
-#down_gallery img,
-#strange_gallery img{
-  border-radius: 12px !important;
-  clip-path: none !important;
-  mask-image: none !important;
-
-  width: 100% !important;
-  height: 140px !important;
-  object-fit: contain !important;
-
-  background: rgba(255,255,255,.02) !important;
-}
-
-/* Sometimes the radius is on wrapper elements, not the <img> */
-#down_gallery :is(figure, li, .gallery-item, .thumbnail-item, .item, .card),
-#strange_gallery :is(figure, li, .gallery-item, .thumbnail-item, .item, .card){
-  border-radius: 14px !important;
-  overflow: hidden !important;
-  background: rgba(255,255,255,.03) !important;
-  border: 1px solid rgba(255,255,255,.10) !important;
-  padding: 8px !important;
-}
-
-/* Hide captions/filename vibe */
-#down_gallery :is(figcaption, .caption, .filename),
-#strange_gallery :is(figcaption, .caption, .filename){
-  display:none !important;
-}
-
-
-/* ----------------------------
-   3) Gallery: force carousel
-   ---------------------------- */
-
-/* Ensure the internal container can scroll horizontally */
-#down_gallery,
-#strange_gallery{
-  width: 100% !important;
-}
-
-/* The direct child often holds the grid/list */
-#down_gallery > div,
-#strange_gallery > div{
-  overflow-x: auto !important;
-  overflow-y: hidden !important;
-  -webkit-overflow-scrolling: touch;
-}
-
-/* Cover multiple possible DOM structures across Gradio builds */
-#down_gallery :is(.grid, .wrap, .gallery, .container, ul, .items, .thumbnails),
-#strange_gallery :is(.grid, .wrap, .gallery, .container, ul, .items, .thumbnails){
-  display: flex !important;
-  flex-wrap: nowrap !important;
-  gap: 14px !important;
-  align-items: stretch !important;
-
-  padding: 12px !important;
-
-  scroll-snap-type: x mandatory;
-}
-
-/* Each slide width */
-#down_gallery :is(figure, li, .gallery-item, .thumbnail-item, .item, .card),
-#strange_gallery :is(figure, li, .gallery-item, .thumbnail-item, .item, .card){
-  flex: 0 0 auto !important;
-  width: 240px !important;
-  scroll-snap-align: start;
-}
-
-/* Sleek scrollbar */
-#down_gallery *::-webkit-scrollbar,
-#strange_gallery *::-webkit-scrollbar{
-  height: 6px;
-}
-#down_gallery *::-webkit-scrollbar-thumb,
-#strange_gallery *::-webkit-scrollbar-thumb{
-  background: rgba(255,255,255,.14);
-  border-radius: 999px;
-}
-/* ============================================================
-   LAYOUT PATCH — center + compact cards + clean gallery
-   ============================================================ */
-
-/* 1) Center everything with a max width */
-#tqApp{
-  max-width: 980px;
-  margin: 0 auto;
-  padding-left: 18px;
-  padding-right: 18px;
-}
-
-/* 2) Make panels feel tighter */
-.gradio-container .gr-panel,
-.gradio-container .block,
-.gradio-container .wrap{
-  padding: 12px !important;
-}
-
-/* 3) Headings spacing */
-#tqApp h2{
-  margin-top: 6px !important;
-  margin-bottom: 10px !important;
-}
-
-/* 4) Make markdown paragraphs not too wide */
-#tqApp .prose, #tqApp .markdown{
-  max-width: 860px;
-}
-
-/* 5) Center buttons + make them look like buttons */
-#btn_down, #btn_strange{
-  margin: 10px auto 6px auto !important;
-  display: inline-flex !important;
-}
-
-#btn_down button, #btn_strange button{
-  min-width: 220px !important;
-  height: 44px !important;
-  padding: 10px 18px !important;
-  border-radius: 999px !important;
-}
-
-/* In case Gradio wraps button into a full-width row */
-#btn_down, #btn_strange{
-  width: 100% !important;
-  display: flex !important;
-  justify-content: center !important;
-}
-
-/* 6) Slider: keep it centered and not mega wide */
-#tqApp .gr-slider{
-  max-width: 860px !important;
-  margin: 0 auto !important;
-}
-
-/* 7) JSON status: make it compact */
-#tqApp .json{
-  max-width: 860px !important;
-  margin: 0 auto !important;
-}
-
-/* 8) Gallery container centered */
-#down_gallery, #strange_gallery{
-  max-width: 980px !important;
-  margin: 0 auto !important;
-}
-
-/* 9) Force a clean grid of small cards (until carousel is perfect) */
-#down_gallery :is(ul, .grid, .wrap, .items),
-#strange_gallery :is(ul, .grid, .wrap, .items){
-  display: grid !important;
-  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)) !important;
-  gap: 14px !important;
-  align-items: start !important;
-}
-
-/* 10) Ensure thumbnails are same size and NOT circular */
-#down_gallery img, #strange_gallery img{
-  width: 100% !important;
-  height: 160px !important;
-  object-fit: contain !important;
-  border-radius: 12px !important;
-  clip-path: none !important;
-  mask-image: none !important;
-  background: rgba(255,255,255,.02) !important;
-}
-
-/* 11) Card wrapper style */
-#down_gallery :is(li, figure, .gallery-item, .thumbnail-item, .item, .card),
-#strange_gallery :is(li, figure, .gallery-item, .thumbnail-item, .item, .card){
-  background: rgba(255,255,255,.03) !important;
-  border: 1px solid rgba(255,255,255,.10) !important;
-  border-radius: 14px !important;
-  padding: 10px !important;
-  overflow: hidden !important;
-}
-
-/* 12) Hide filenames/captions */
-#down_gallery :is(figcaption, .caption, .filename),
-#strange_gallery :is(figcaption, .caption, .filename){
-  display: none !important;
-}