better css

app.py

@@ -285,9 +285,10 @@ def render_cards(tasks: list[TaskDoc]) -> str:
                 dataset_links.append(f'<span class="dataset-more">+{len(datasets) - 6} more</span>')
         dataset_html = " ".join(dataset_links) if dataset_links else ""
         star_icon = "⭐ " if is_starred_benchmark(t) else ""
+        card_class = "card card-starred" if is_starred_benchmark(t) else "card"
         items.append(
             f"""
-            <article class="card" tabindex="0" aria-label="Task {task_name}">
+            <article class="{card_class}" tabindex="0" aria-label="Task {task_name}">
               <div class="title"><span class="title-text">{star_icon}{task_name}</span> <span class="dataset-inline">{dataset_html}</span></div>
               {chips_tags_html}
               {chips_langs_html}
@@ -331,36 +332,203 @@ def on_toggle_tags_visibility(show: bool, selected_tags: list[str], languages: l
 # Custom CSS for the app
 custom_css = """
 /* layout */
-.cards-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; margin-top: 10px; }
+.cards-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 20px; margin-top: 10px; }
+
 
 /* card base */
-.card { border-radius: 12px; padding: 14px; transition: box-shadow 160ms ease, transform 120ms ease, border-color 120ms ease; outline: none; }
-.card:hover, .card:focus { transform: translateY(-4px); box-shadow: 0 10px 30px rgba(2,6,23,0.08); }
+.card {
+  border-radius: 16px;
+  padding: 18px;
+  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+  outline: none;
+  position: relative;
+  overflow: hidden;
+  border: 2px solid transparent;
+}
+
+.card::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: -100%;
+  width: 100%;
+  height: 100%;
+  background: linear-gradient(
+    90deg,
+    transparent,
+    rgba(255, 255, 255, 0.1),
+    transparent
+  );
+  transition: left 0.5s;
+}
+
+.card:hover::before {
+  left: 100%;
+}
+
+.card:hover, .card:focus {
+  transform: translateY(-6px) scale(1.02);
+  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.12), 0 8px 16px rgba(0, 0, 0, 0.08);
+}
+
+/* Starred card special styling */
+.card-starred {
+  background: linear-gradient(135deg, rgba(255, 215, 0, 0.05) 0%, rgba(255, 193, 7, 0.05) 100%);
+  border: 2px solid rgba(255, 215, 0, 0.3);
+}
+
+.card-starred:hover {
+  border-color: rgba(255, 215, 0, 0.5);
+  box-shadow: 0 20px 50px rgba(255, 215, 0, 0.2), 0 10px 30px rgba(255, 215, 0, 0.15);
+}
+
+.title {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  flex-wrap: wrap;
+  position: relative;
+  z-index: 1;
+}
+
+.title-text {
+  font-weight: 700;
+  font-size: 17px;
+  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
+  letter-spacing: -0.01em;
+}
+
+.card-starred .title-text {
+  color: #d4af37;
+  filter: drop-shadow(0 0 4px rgba(255, 215, 0, 0.3));
+}
+
+.dataset-inline {
+  font-size: 12px;
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px;
+  align-items: center;
+  margin-left: 8px;
+}
+
+.chips {
+  margin: 8px 0 6px 0;
+  display: flex;
+  gap: 4px;
+  flex-wrap: wrap;
+}
+
+.chips-tags { margin: 8px 0 4px 0; }
+.chips-langs { margin: 4px 0 6px 0; }
+
+.chip {
+  display: inline-block;
+  padding: 4px 10px;
+  border-radius: 12px;
+  font-size: 11px;
+  font-weight: 500;
+  background: linear-gradient(135deg, #e6f2ff 0%, #d6e9ff 100%);
+  color: #1e3a8a;
+  transition: all 0.2s ease;
+  border: 1px solid rgba(30, 58, 138, 0.1);
+}
+
+.chip:hover {
+  transform: translateY(-1px);
+  box-shadow: 0 2px 8px rgba(30, 58, 138, 0.2);
+}
+
+.chip-lang {
+  background: linear-gradient(135deg, #e8f5e9 0%, #d4edda 100%);
+  color: #166534;
+  border-color: rgba(22, 101, 52, 0.1);
+}
 
-.title { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
-.title-text { font-weight: 600; font-size: 16px; font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial; }
-.dataset-inline { font-size: 12px; }
+.chip-lang:hover {
+  box-shadow: 0 2px 8px rgba(22, 101, 52, 0.2);
+}
+
+.abstract {
+  color: #475569;
+  font-size: 13.5px;
+  line-height: 1.6;
+  margin-top: 8px;
+  min-height: 48px;
+}
+
+.links {
+  margin-top: 12px;
+  font-size: 12px;
+  padding-top: 8px;
+  border-top: 1px solid rgba(148, 163, 184, 0.2);
+}
+
+.links a {
+  text-decoration: none;
+  font-weight: 600;
+  transition: all 0.2s ease;
+  position: relative;
+}
 
-.chips { margin: 6px 0 4px 0; display:flex; gap:2px; flex-wrap:wrap; }
-.chips-tags { margin: 6px 0 2px 0; }
-.chips-langs { margin: 0 0 4px 0; }
-.chip { display:inline-block; padding:1px 2px; border-radius:999px; font-size:12px; background: #e6f2ff; color: #1e3a8a; }
-.chip-lang { background: #e8f5e9; color: #166534; }
+.links a::after {
+  content: '';
+  position: absolute;
+  width: 0;
+  height: 2px;
+  bottom: -2px;
+  left: 0;
+  background: currentColor;
+  transition: width 0.3s ease;
+}
+
+.links a:hover::after {
+  width: 100%;
+}
 
-.abstract { color: #475569; font-size: 13.5px; line-height: 1.35; margin-top: 6px; min-height: 48px; }
-.links { margin-top: 10px; font-size:12px; }
-.links a { text-decoration: none; font-weight: 600; }
+.links a:hover {
+  transform: translateX(2px);
+}
 
 .sep { color: #94a3b8; margin: 0 8px; }
 
-.dataset { margin-left: 8px; font-size: 12px; color: #0ea5e9; background: #ecfeff; padding: 2px 6px; border-radius: 6px; text-decoration: none; }
-.dataset-more { margin-left: 8px; font-size: 12px; color: #64748b; background: #f1f5f9; padding: 2px 6px; border-radius: 6px; }
+.dataset {
+  display: inline-block;
+  font-size: 12px;
+  color: #0ea5e9;
+  background: linear-gradient(135deg, #ecfeff 0%, #e0f7fa 100%);
+  padding: 4px 10px;
+  border-radius: 8px;
+  text-decoration: none;
+  transition: all 0.2s ease;
+  border: 1px solid rgba(14, 165, 233, 0.2);
+  font-weight: 500;
+  white-space: nowrap;
+}
+
+.dataset:hover {
+  transform: translateY(-1px);
+  box-shadow: 0 4px 12px rgba(14, 165, 233, 0.3);
+  background: linear-gradient(135deg, #e0f7fa 0%, #d1f2eb 100%);
+}
+
+.dataset-more {
+  display: inline-block;
+  font-size: 12px;
+  color: #64748b;
+  background: linear-gradient(135deg, #f1f5f9 0%, #e2e8f0 100%);
+  padding: 4px 10px;
+  border-radius: 8px;
+  font-weight: 500;
+  white-space: nowrap;
+}
 
 /* Light mode */
 :root {
-  --bg: #f8fafc;
+  --bg-start: #f8fafc;
+  --bg-end: #f1f5f9;
   --card-bg: #ffffff;
-  --card-border: #e6f2ff;
+  --card-border: rgba(226, 232, 240, 0.8);
   --title-color: #1e3a8a;
   --text-color: #0f172a;
   --muted: #475569;
@@ -370,35 +538,70 @@ custom_css = """
 /* Dark mode overrides */
 @media (prefers-color-scheme: dark) {
   :root {
-    --bg: #0b1220;
+    --bg-start: #0b1220;
+    --bg-end: #0f172a;
     --card-bg: #071022;
-    --card-border: #0f2a44;
+    --card-border: rgba(15, 42, 68, 0.8);
     --title-color: #93c5fd;
     --text-color: #e6eef8;
     --muted: #cbd5e1;
     --link: #6ea8ff;
   }
-  .dataset-more { color: #94a3b8; background: rgba(148,163,184,0.15); }
+  
+  .card-starred {
+    background: linear-gradient(135deg, rgba(255, 215, 0, 0.1) 0%, rgba(255, 193, 7, 0.1) 100%);
+    border-color: rgba(255, 215, 0, 0.4);
+  }
+  
+  .dataset-more {
+    color: #94a3b8;
+    background: linear-gradient(135deg, rgba(148, 163, 184, 0.15) 0%, rgba(148, 163, 184, 0.1) 100%);
+  }
+  
+  .chips-tags .chip {
+    background: linear-gradient(135deg, rgba(29, 78, 216, 0.35) 0%, rgba(29, 78, 216, 0.25) 100%);
+    color: #e6eef8;
+    border: 1px solid rgba(148, 163, 184, 0.15);
+  }
+  
+  .chips-langs .chip {
+    background: linear-gradient(135deg, rgba(22, 101, 52, 0.35) 0%, rgba(22, 101, 52, 0.25) 100%);
+    color: #e6eef8;
+    border: 1px solid rgba(148, 163, 184, 0.15);
+  }
+  
+  .links {
+    border-top-color: rgba(148, 163, 184, 0.3);
+  }
 }
 
 /* apply */
-body { background: var(--bg); color: var(--text-color); }
-.card { background: var(--card-bg); border: 1px solid var(--card-border); color: var(--text-color); }
+body {
+  background: linear-gradient(135deg, var(--bg-start) 0%, var(--bg-end) 100%);
+  background-attachment: fixed;
+  color: var(--text-color);
+  min-height: 100vh;
+}
+
+.card {
+  background: var(--card-bg);
+  border: 2px solid var(--card-border);
+  color: var(--text-color);
+  backdrop-filter: blur(10px);
+}
+
 .title-text { color: var(--title-color); }
 .abstract { color: var(--muted); }
 .links a { color: var(--link); }
-.chips-tags .chip { background: #e6f2ff; color: #1e3a8a; }
-.chips-langs .chip { background: #e8f5e9; color: #166534; }
-/* tweak chips for dark mode for better contrast */
-@media (prefers-color-scheme: dark) {
-  .chips-tags .chip { background: rgba(29,78,216,0.35); color: #e6eef8; border: 1px solid rgba(148,163,184,0.15); }
-  .chips-langs .chip { background: rgba(22,101,52,0.35); color: #e6eef8; border: 1px solid rgba(148,163,184,0.15); }
-}
 
 /* small screens adjustments */
 @media (max-width: 520px) {
-  .cards-grid { gap: 10px; }
-  .title-text { font-size: 15px; }
+  .cards-grid {
+    gap: 12px;
+    grid-template-columns: 1fr;
+  }
+  .title-text { font-size: 16px; }
+  .card { padding: 14px; }
 }
 """