Fixed Model Card Button on light mode!

README.md

@@ -19,103 +19,36 @@ tags:
 ---
 
 <style>
-/* Theme-aware design tokens (light by default) */
 :root{
-  color-scheme: light dark;
-
-  /* LIGHT */
-  --bg: #ffffff;
-  --panel: #f6f8fc;
-  --ink: #0b0c0f;
-  --muted: #556070;
-  --tagline: #2a3b6b;             /* nicer on light bg */
-  --brand: #3f6fff;               /* indigo */
-  --brand-2: #22e3bb;             /* mint accent */
-  --border: rgba(2, 6, 23, .08);
-  --glow: rgba(63, 111, 255, .22);
-  --radius: 16px;
-
-  /* component-specific light defaults */
-  --kbd-bg: #eef2ff;
-  --kbd-ink: #233876;
-  --kbd-b1: #c8d4ff;
-  --kbd-b2: #b6c6ff;
-
-  --code-bg: #f4f6fb;
-  --code-bd: #e3e9f3;
-
-  --bq-bg: rgba(63,111,255,.07);
-  --bq-ink: #1b264f;
-}
-
-/* DARK overrides via OS preference */
-@media (prefers-color-scheme: dark) {
-  :root{
-    --bg: #0b0c0f;
-    --panel: #0f1117;
-    --ink: #e9eefc;
-    --muted: #9aa3b2;
-    --tagline: #c6d5ff;
-    --brand: #5b8cff;
-    --brand-2: #4ef2c8;
-    --border: rgba(255,255,255,.08);
-    --glow: rgba(91,140,255,.25);
-
-    --kbd-bg: #0c1322;
-    --kbd-ink: #cfe0ff;
-    --kbd-b1: #1a2742;
-    --kbd-b2: #142138;
-
-    --code-bg: #0b1220;
-    --code-bd: #15233d;
-
-    --bq-bg: rgba(91,140,255,.06);
-    --bq-ink: #cfe0ff;
-  }
-}
-
-/* DARK overrides via site toggle (HF uses html[data-theme]) */
-html[data-theme="dark"], body[data-theme="dark"]{
   --bg: #0b0c0f;
   --panel: #0f1117;
   --ink: #e9eefc;
   --muted: #9aa3b2;
-  --tagline: #c6d5ff;
-  --brand: #5b8cff;
-  --brand-2: #4ef2c8;
+  --brand: #5b8cff; /* soft indigo */
+  --brand-2: #4ef2c8; /* mint accent */
   --border: rgba(255,255,255,.08);
   --glow: rgba(91,140,255,.25);
-
-  --kbd-bg: #0c1322;
-  --kbd-ink: #cfe0ff;
-  --kbd-b1: #1a2742;
-  --kbd-b2: #142138;
-
-  --code-bg: #0b1220;
-  --code-bd: #15233d;
-
-  --bq-bg: rgba(91,140,255,.06);
-  --bq-ink: #cfe0ff;
+  --radius: 16px;
 }
-
 *{ box-sizing: border-box }
-
-/* Cards & layout */
 .card{
-  background: linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,0));
+  background: linear-gradient(180deg,rgba(255,255,255,.02),rgba(255,255,255,.00));
   border:1px solid var(--border);
   border-radius: var(--radius);
   padding:24px;
 }
+.badge{
+  display:inline-flex;align-items:center;gap:.5rem;
+  padding:.35rem .6rem;border:1px solid var(--border);border-radius:999px;
+  color:var(--muted);font-size:.85rem
+}
 .grid{ display:grid; gap:18px }
 .grid-2{ grid-template-columns:repeat(2,minmax(0,1fr)); }
 .grid-3{ grid-template-columns:repeat(3,minmax(0,1fr)); }
 @media(max-width:900px){ .grid-2,.grid-3{ grid-template-columns:1fr } }
-
-/* Text */
 .kicker{
-  display:inline-block; letter-spacing:.12em; text-transform:uppercase;
-  color:var(--muted); font-size:.75rem; margin-bottom:.5rem;
+  display:inline-block;letter-spacing:.12em;text-transform:uppercase;
+  color:var(--muted);font-size:.75rem;margin-bottom:.5rem
 }
 h1,h2,h3{ color:var(--ink); margin:0 0 .4rem 0; line-height:1.1 }
 h1{ font-size:2.25rem; font-weight:800 }
@@ -123,86 +56,62 @@ h2{ font-size:1.3rem; font-weight:700 }
 h3{ font-size:1.05rem; font-weight:700 }
 p,li{ color:var(--muted); line-height:1.6 }
 hr{ border:none; height:1px; background:var(--border); margin:28px 0 }
-.tagline{ font-size:1.05rem; color:var(--tagline) }
-
-/* Buttons */
 a.btn{
   display:inline-block; padding:.7rem 1rem; border-radius:12px;
-  background: linear-gradient(180deg, var(--brand), #3f6fff);
-  color:#fff; text-decoration:none; font-weight:600;
+  background: linear-gradient(180deg,var(--brand),#3f6fff);
+  color:var(--ink); text-decoration:none; font-weight:600;
   box-shadow: 0 10px 30px var(--glow);
 }
 a.btn.ghost{
-  background:transparent; color:var(--ink); border:1px solid var(--border);
+  background:transparent; color:var(--ink); border:1px solid var(--border)
 }
-
-/* KBD */
 kbd{
-  background:var(--kbd-bg); color:var(--kbd-ink);
-  border:1px solid var(--kbd-b1); border-bottom-color:var(--kbd-b2);
-  padding:.12rem .4rem; border-radius:6px; font-size:.85rem;
+  background:#0c1322;color:#cfe0ff;border:1px solid #1a2742;border-bottom-color:#142138;
+  padding:.12rem .4rem;border-radius:6px;font-size:.85rem
 }
-
-/* Code blocks */
 .codeblock{
-  background:#103d78; border:1px solid #103d78;
-  border-radius:12px; padding:5px; overflow:auto; color:var(--ink);
+  background:#0b1220;border:1px solid #15233d;border-radius:12px;padding: 8px;overflow:auto; /* Changed padding */
+  margin: 1rem 0;
 }
-
 .codeblock pre {
   margin: 0;
 }
-
-/* Pills / badges */
-.badge{
-  display:inline-flex; align-items:center; gap:.5rem;
-  padding:.35rem .6rem; border:1px solid var(--border);
-  border-radius:999px; color:var(--muted); font-size:.85rem;
+.tagline{
+  font-size:1.05rem;color:#c6d5ff
 }
 .pill{
-  display:inline-flex; align-items:center; gap:.4rem;
-  padding:.35rem .6rem; border-radius:999px;
-  border:1px dashed var(--border); color:var(--muted);
+  display:inline-flex;align-items:center;gap:.4rem;
+  padding:.35rem .6rem;border-radius:999px;border:1px dashed var(--border);color:#b9c5db
 }
-
-/* Hero */
 .hero{
   background:
-    radial-gradient(600px 240px at 20% 0%, rgba(91,140,255,.14), transparent 60%),
-    radial-gradient(600px 240px at 80% 10%, rgba(78,242,200,.10), transparent 60%);
+    radial-gradient(600px 240px at 20% 0%,rgba(91,140,255,.18),transparent 60%),
+    radial-gradient(600px 240px at 80% 10%,rgba(78,242,200,.12),transparent 60%);
   border:1px solid var(--border);
-  border-radius:20px; padding:28px;
+  border-radius:20px; padding:28px
 }
-
-/* Media */
 figure.screens{
-  display:grid; grid-template-columns:repeat(3,minmax(0,1fr));
-  gap:10px; margin:16px 0 0 0;
+  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:16px 0 0 0
 }
 figure.screens img{
-  width:100%; border-radius:12px; border:1px solid var(--border);
+  width:100%;border-radius:12px;border:1px solid var(--border)
 }
-
-/* Details / blockquote / tables */
 details{
-  border:1px solid var(--border); border-radius:12px;
-  padding:14px; background:rgba(255,255,255,.02);
+  border:1px solid var(--border);border-radius:12px;padding:14px;background:rgba(255,255,255,.02)
 }
-summary{ cursor:pointer; color:var(--ink); font-weight:700 }
+summary{ cursor:pointer;color:var(--ink);font-weight:700 }
 blockquote{
-  margin:0; padding:14px; border-left:3px solid var(--brand);
-  background:var(--bq-bg); border-radius:0 10px 10px 0; color:var(--bq-ink);
+  margin:0;padding:14px;border-left:3px solid var(--brand);background:rgba(91,140,255,.06);
+  border-radius:0 10px 10px 0;color:#657ce0
 }
 table{ width:100%; border-collapse:collapse }
 th,td{ text-align:left; padding:10px; border-bottom:1px solid var(--border); color:var(--muted) }
-th{ color:var(--ink) }
-
-/* Callouts */
+th{ color:#e7edff }
 .callout{
-  border:1px solid var(--border); border-radius:14px;
-  padding:14px; background:rgba(255,255,255,.02);
+  border:1px solid var(--border);border-radius:14px;padding:14px;background:rgba(255,255,255,.02)
 }
 </style>
+
 <div style="background:var(--bg); padding: 28px; border-radius: 18px">
 
 <div class="hero">
@@ -280,7 +189,6 @@ vllm serve Tesslate/WEBGEN-4B-Preview \
   --gpu-memory-utilization 0.92
 </pre></div>
 
-
 ### sglang
 <div class="codeblock"><pre>
 python -m sglang.launch_server \
@@ -398,12 +306,14 @@ Avoid shadows &gt; md; prefer borders/dividers.
 ## Citation
 
 ```
+
 @misc{tesslate_webgen_4b_preview_2025,
 title   = {WEBGEN-4B-Preview: Design-first web generation with a 4B model},
 author  = {Tesslate Team},
 year    = {2025},
 url     = {https://huggingface.co/Tesslate/WEBGEN-4B-Preview}
 }
+
 ```
 
 </div>