Polish leaderboard cards: clickable titles, tooltips, hover animation

- Make EnterpriseOps-Gym and EVA-Bench titles clickable links with
multicolor sweep hover animation (logo colors → settles #006DAA)
- Add accessible tooltips (ARIA + keyboard + reduced-motion) on titles
and metrics
- Rename metric labels: Task Success Rate, EVA-Accuracy, EVA-Experience,
Pass@1
- Update #1 model subtitles: "Mixed Models · Cascade", "Google ·
Speech-to-Speech"
- Switch leaderboard link hover from wasabi-green to #006DAA (WCAG AA)
- Section heading "Benchmark cards" → "Benchmark Leaderboard"

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

index.html

@@ -148,7 +148,7 @@
 <!-- Capability leaders header -->
 <div class="flex flex-col md:flex-row md:items-end md:justify-between gap-6 mb-8">
 <div>
-<h2 class="text-infinite-blue font-bold text-3xl tracking-tight mb-2">Benchmark cards</h2>
+<h2 class="text-infinite-blue font-bold text-3xl tracking-tight mb-2">Benchmark Leaderboard</h2>
 <p class="text-on-surface-variant font-light text-[15px]">A high-level overview of each NOWAI-Bench benchmark.</p>
 </div>
 <div class="md:text-right">
@@ -162,17 +162,29 @@
 <div class="bg-white border border-border-subtle rounded-2xl p-8 card-shadow border-l-[4px] accent-infinite">
 <div class="flex items-center gap-3 mb-8">
 <span class="w-3 h-3 rounded-full fill-infinite"></span>
-<h3 class="text-infinite-blue font-bold text-2xl tracking-tight">EnterpriseOps-Gym</h3>
+<h3 class="text-2xl tracking-tight"><a class="title-anim font-bold" href="https://enterpriseops-gym.github.io/" target="_blank" rel="noopener">EnterpriseOps-Gym</a></h3>
+<span class="tooltip">
+<button type="button" class="tooltip-trigger" aria-label="About EnterpriseOps-Gym" aria-describedby="tt-eog">
+<span class="material-symbols-outlined" style="font-size:18px" aria-hidden="true">info</span>
+</button>
+<span class="tooltip-bubble" role="tooltip" id="tt-eog">Long-horizon task agents evaluated across eight enterprise domains.</span>
+</span>
 <span class="text-on-surface-variant text-xs font-medium bg-surface-muted px-2 py-0.5 rounded">long-horizon task agents</span>
 </div>
 <div class="mb-6">
 <div class="font-mono text-[10px] text-on-surface-variant uppercase tracking-[0.15em] mb-2">Top model</div>
 <div class="text-infinite-blue font-bold text-xl leading-tight">Claude Opus 4.5</div>
-<div class="text-on-surface-variant text-sm font-medium">Anthropic · cascade</div>
+<div class="text-on-surface-variant text-sm font-medium">Anthropic</div>
 </div>
-<div class="bg-[#f0f9f3] border-l-4 border-wasabi-green rounded-xl p-4 flex items-baseline gap-3 mb-8">
+<div class="bg-[#f0f9f3] border-l-4 border-wasabi-green rounded-xl p-4 flex items-center gap-3 mb-8">
 <span class="text-infinite-blue font-bold text-3xl tabular-nums leading-none">37.4<span class="text-on-surface-variant text-lg font-medium ml-0.5">%</span></span>
-<span class="font-mono text-[10px] text-on-surface-variant uppercase tracking-wider font-medium">Success rate · Oracle mode</span>
+<span class="font-mono text-[10px] text-on-surface-variant uppercase tracking-wider font-medium">Task Success Rate · Oracle mode</span>
+<span class="tooltip">
+<button type="button" class="tooltip-trigger" aria-label="Task Success Rate definition" aria-describedby="tt-eog-metric">
+<span class="material-symbols-outlined" style="font-size:16px" aria-hidden="true">info</span>
+</button>
+<span class="tooltip-bubble" role="tooltip" id="tt-eog-metric">A task passes only if all verification conditions are met.</span>
+</span>
 </div>
 <div class="space-y-4">
 <!-- Runner 2 -->
@@ -204,7 +216,7 @@
 </div>
 </div>
 <div class="mt-8 pt-6 border-t border-border-subtle">
-<a class="text-infinite-blue font-bold text-sm hover:text-wasabi-green transition-colors flex items-center gap-2 group" href="https://enterpriseops-gym.github.io/#leaderboard" target="_blank" rel="noopener">
+<a class="text-infinite-blue font-bold text-sm hover:text-[#006DAA] transition-colors flex items-center gap-2 group" href="https://enterpriseops-gym.github.io/#leaderboard" target="_blank" rel="noopener">
           View full EOG leaderboard
           <span class="material-symbols-outlined text-sm transition-transform group-hover:translate-x-0.5 group-hover:-translate-y-0.5">arrow_outward</span>
 </a>
@@ -214,20 +226,34 @@
 <div class="bg-white border border-border-subtle rounded-2xl p-8 card-shadow border-l-[4px] accent-indigo">
 <div class="flex items-center gap-3 mb-8">
 <span class="w-3 h-3 rounded-full fill-indigo"></span>
-<h3 class="text-infinite-blue font-bold text-2xl tracking-tight">EVA-Bench</h3>
+<h3 class="text-2xl tracking-tight"><a class="title-anim font-bold" href="https://servicenow.github.io/eva/" target="_blank" rel="noopener">EVA-Bench</a></h3>
+<span class="tooltip">
+<button type="button" class="tooltip-trigger" aria-label="About EVA-Bench" aria-describedby="tt-eva">
+<span class="material-symbols-outlined" style="font-size:18px" aria-hidden="true">info</span>
+</button>
+<span class="tooltip-bubble" role="tooltip" id="tt-eva">Voice agents evaluated on task accuracy and conversational experience.</span>
+</span>
 <span class="text-on-surface-variant text-xs font-medium bg-surface-muted px-2 py-0.5 rounded">voice agents · accuracy and experience</span>
 </div>
 <div class="space-y-10">
 <!-- Accuracy Split -->
 <div>
 <div class="flex justify-between items-baseline mb-3">
-<span class="font-mono text-[10px] text-[#5240CC] uppercase tracking-[0.15em] font-bold">Accuracy</span>
-<span class="font-mono text-[10px] text-on-surface-variant uppercase tracking-wider">EVA-A · PASS@3</span>
+<span class="font-mono text-[10px] text-[#5240CC] uppercase tracking-[0.15em] font-bold">EVA-Accuracy</span>
+<span class="flex items-center gap-1">
+<span class="font-mono text-[10px] text-on-surface-variant uppercase tracking-wider">Pass@1</span>
+<span class="tooltip">
+<button type="button" class="tooltip-trigger" aria-label="EVA-Accuracy definition" aria-describedby="tt-eva-acc">
+<span class="material-symbols-outlined" style="font-size:15px" aria-hidden="true">info</span>
+</button>
+<span class="tooltip-bubble" role="tooltip" id="tt-eva-acc">Scores for accuracy. All values normalized to 0–1 (higher is better). 95% bootstrap confidence intervals shown for each value.</span>
+</span>
+</span>
 </div>
 <div class="bg-[#f2f0ff] border-l-4 border-bright-indigo rounded-lg p-3 flex justify-between items-center mb-4">
 <div>
 <div class="text-infinite-blue font-bold text-base leading-tight">Nova + GPT-5.4 + Sonic</div>
-<div class="text-on-surface-variant text-[11px] font-medium">cascade · mixed</div>
+<div class="text-on-surface-variant text-[11px] font-medium">Mixed Models · Cascade</div>
 </div>
 <span class="text-infinite-blue font-bold text-2xl tabular-nums">0.41</span>
 </div>
@@ -253,13 +279,21 @@
 <!-- Experience Split -->
 <div class="pt-8 border-t border-dashed border-border-subtle">
 <div class="flex justify-between items-baseline mb-3">
-<span class="font-mono text-[10px] text-[#006DAA] uppercase tracking-[0.15em] font-bold">Experience</span>
-<span class="font-mono text-[10px] text-on-surface-variant uppercase tracking-wider">EVA-X · PASS@3</span>
+<span class="font-mono text-[10px] text-[#006DAA] uppercase tracking-[0.15em] font-bold">EVA-Experience</span>
+<span class="flex items-center gap-1">
+<span class="font-mono text-[10px] text-on-surface-variant uppercase tracking-wider">Pass@1</span>
+<span class="tooltip">
+<button type="button" class="tooltip-trigger" aria-label="EVA-Experience definition" aria-describedby="tt-eva-exp">
+<span class="material-symbols-outlined" style="font-size:15px" aria-hidden="true">info</span>
+</button>
+<span class="tooltip-bubble" role="tooltip" id="tt-eva-exp">Scores for conversational experience. All values normalized to 0–1 (higher is better). 95% bootstrap confidence intervals shown for each value.</span>
+</span>
+</span>
 </div>
 <div class="bg-[#f0f9ff] border-l-4 border-bright-blue rounded-lg p-3 flex justify-between items-center mb-4">
 <div>
 <div class="text-infinite-blue font-bold text-base leading-tight">Gemini Live</div>
-<div class="text-on-surface-variant text-[11px] font-medium">Google · S2S</div>
+<div class="text-on-surface-variant text-[11px] font-medium">Google · Speech-to-Speech</div>
 </div>
 <span class="text-infinite-blue font-bold text-2xl tabular-nums">0.49</span>
 </div>
@@ -284,7 +318,7 @@
 </div>
 </div>
 <div class="mt-8 pt-6 border-t border-border-subtle">
-<a class="text-infinite-blue font-bold text-sm hover:text-wasabi-green transition-colors flex items-center gap-2 group" href="https://servicenow.github.io/eva/#results" target="_blank" rel="noopener">
+<a class="text-infinite-blue font-bold text-sm hover:text-[#006DAA] transition-colors flex items-center gap-2 group" href="https://servicenow.github.io/eva/#results" target="_blank" rel="noopener">
           View full EVA leaderboard
           <span class="material-symbols-outlined text-sm transition-transform group-hover:translate-x-0.5 group-hover:-translate-y-0.5">arrow_outward</span>
 </a>

style.css

@@ -73,3 +73,104 @@ body {
     opacity: 1;
   }
 }
+
+/* Title hover — rests infinite-blue, sweeps logo colors L→R, settles deep blue.
+   Reverses smoothly on mouse-leave. Fires on keyboard focus too. */
+.title-anim {
+  background-image: linear-gradient(90deg,
+    #032D42 0%, #032D42 30%,
+    #7661FF 42%, #63DF4E 52%, #52B8FF 60%,
+    #006DAA 70%, #006DAA 100%);
+  background-size: 320% 100%;
+  background-position: 0 0;
+  -webkit-background-clip: text;
+  background-clip: text;
+  color: transparent;
+  -webkit-text-fill-color: transparent;
+  transition: background-position 0.5s ease;
+}
+.title-anim:hover,
+.title-anim:focus-visible {
+  animation: title-sweep 0.9s ease forwards;
+}
+@keyframes title-sweep {
+  from { background-position: 0 0; }
+  to   { background-position: 100% 0; }
+}
+@media (prefers-reduced-motion: reduce) {
+  .title-anim { transition: none; }
+  .title-anim:hover,
+  .title-anim:focus-visible {
+    animation: none;
+    color: #006DAA;
+    -webkit-text-fill-color: #006DAA;
+  }
+}
+
+/* Accessible tooltip — shows on hover and keyboard focus */
+.tooltip {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+}
+.tooltip-trigger {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0;
+  border: 0;
+  background: none;
+  color: #5b6b75;
+  cursor: help;
+  line-height: 0;
+  border-radius: 9999px;
+  transition: color 0.15s ease;
+}
+.tooltip-trigger:hover,
+.tooltip:focus-within .tooltip-trigger {
+  color: #032D42;
+}
+.tooltip-trigger:focus-visible {
+  outline: 2px solid #7661FF;
+  outline-offset: 2px;
+}
+.tooltip-bubble {
+  position: absolute;
+  bottom: calc(100% + 8px);
+  left: 50%;
+  transform: translateX(-50%);
+  z-index: 30;
+  width: max-content;
+  max-width: 240px;
+  padding: 8px 10px;
+  border-radius: 8px;
+  background: #032D42;
+  color: #ffffff;
+  font-size: 12px;
+  font-weight: 400;
+  line-height: 1.45;
+  text-transform: none;
+  letter-spacing: normal;
+  box-shadow: 0 6px 16px rgba(3, 45, 66, 0.18);
+  opacity: 0;
+  visibility: hidden;
+  pointer-events: none;
+  transition: opacity 0.15s ease;
+}
+.tooltip-bubble::after {
+  content: "";
+  position: absolute;
+  top: 100%;
+  left: 50%;
+  transform: translateX(-50%);
+  border: 5px solid transparent;
+  border-top-color: #032D42;
+}
+.tooltip:hover .tooltip-bubble,
+.tooltip:focus-within .tooltip-bubble {
+  opacity: 1;
+  visibility: visible;
+}
+@media (prefers-reduced-motion: reduce) {
+  .tooltip-bubble { transition: none; }
+}