feat: visual polish — Inter + JetBrains Mono fonts, card hover, stagger entrance, tabular nums

- Self-host Inter Variable and JetBrains Mono Variable via @fontsource-variable
  (~135 KB woff2, loaded on-demand by subset). Enable cv11 + ss03 stylistic
  sets on Inter for a more refined default.
- Apply JetBrains Mono to code/pre/kbd/samp automatically.
- Card lift: .card gains transition-shadow + shadow-lg on hover, giving a subtle
  "floating" feedback on all sidebar / stats cards.
- Sidebar stagger entrance: each card fades + translates in 40 ms apart on
  mount (total ~500 ms); respects prefers-reduced-motion.
- Add .tabular utility (font-variant-numeric: tabular-nums) and apply to both
  stats tables so number columns no longer jitter.

Additive only — no existing visuals (logo gradient, emojis, page background,
chart colors, animations) were removed. JS bundle unchanged.

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

Author: JavaZeroo

package-lock.json

@@ -14,6 +14,8 @@
     "test:stress": "node scripts/stress-test.js"
   },
   "dependencies": {
+    "@fontsource-variable/inter": "^5.2.8",
+    "@fontsource-variable/jetbrains-mono": "^5.2.8",
     "@tailwindcss/forms": "^0.5.10",
     "autoprefixer": "^10.4.21",
     "chart.js": "^4.5.0",

package.json

@@ -543,7 +543,7 @@ function App() {
         >
           {sidebarVisible && (
             <aside
-              className="xl:col-span-1 space-y-3"
+              className="xl:col-span-1 space-y-3 sidebar-stagger"
               role="complementary"
               aria-label={t('sidebar.controlPanel')}
             >

src/App.jsx

@@ -959,7 +959,7 @@ export default function ChartContainer({
         {perFileStats.length > 0 && (
           <div className="card overflow-x-auto">
             <h4 className="text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">{key} {t('chart.summaryStats')}</h4>
-            <table className="min-w-full text-xs">
+            <table className="min-w-full text-xs tabular">
               <thead>
                 <tr className="text-left">
                   <th className="pr-2">{t('chart.stats.file')}</th>
@@ -990,7 +990,7 @@ export default function ChartContainer({
         {stats && (
           <div className="card overflow-x-auto">
             <h4 className="text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">{key} {t('chart.diffStats')}</h4>
-            <table className="min-w-full text-xs">
+            <table className="min-w-full text-xs tabular">
               <thead>
                 <tr className="text-left">
                   <th className="pr-2">{t('comparison.pair')}</th>

src/components/ChartContainer.jsx

@@ -4,6 +4,16 @@
 
 /* Accessibility improvements */
 @layer base {
+  html {
+    font-family: 'Inter Variable', 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
+    /* Inter's stylistic sets: cv11 = single-storey a, ss03 = better default cursive. Subtle polish. */
+    font-feature-settings: 'cv11', 'ss03';
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+  }
+  code, pre, kbd, samp {
+    font-family: 'JetBrains Mono Variable', 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
+  }
   body {
     @apply bg-gray-50 text-gray-900 dark:bg-gray-900 dark:text-gray-100;
   }
@@ -67,7 +77,11 @@
 
 @layer components {
   .card {
-    @apply bg-white dark:bg-gray-800 rounded-lg shadow-md p-3;
+    @apply bg-white dark:bg-gray-800 rounded-lg shadow-md p-3 transition-shadow duration-200 ease-out;
+  }
+  /* Subtle lift on hover — adds life without being distracting */
+  .card:hover {
+    @apply shadow-lg;
   }
 
   .card-title {
@@ -101,6 +115,20 @@
   .resizable-chart-container {
     @apply relative min-h-[200px] max-h-[600px] resize-y overflow-hidden border border-gray-200 dark:border-gray-700 rounded-lg;
   }
+
+  /* Tabular figures — for number columns / stats so digits don't jitter */
+  .tabular {
+    font-variant-numeric: tabular-nums;
+    font-feature-settings: 'tnum';
+  }
+
+  /* Subtle card hover affordance — gentle lift + shadow bump. Cheap visual feedback. */
+  .card-hover {
+    @apply transition-[transform,box-shadow] duration-200 ease-out;
+  }
+  .card-hover:hover {
+    @apply -translate-y-px shadow-lg;
+  }
 }
 
 /* Custom styles */
@@ -242,8 +270,33 @@ input[type="checkbox"]:focus {
   animation: pageFadeIn 0.5s ease-out;
 }
 
+/* Sidebar cards stagger entrance — 40ms apart, small translateY for a "settling in" feel.
+   `backwards` fill keeps each card invisible until its delay elapses. */
+@keyframes cardSettleIn {
+  from {
+    opacity: 0;
+    transform: translateY(6px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+.sidebar-stagger > * {
+  animation: cardSettleIn 0.3s ease-out backwards;
+}
+.sidebar-stagger > *:nth-child(1) { animation-delay: 0ms; }
+.sidebar-stagger > *:nth-child(2) { animation-delay: 40ms; }
+.sidebar-stagger > *:nth-child(3) { animation-delay: 80ms; }
+.sidebar-stagger > *:nth-child(4) { animation-delay: 120ms; }
+.sidebar-stagger > *:nth-child(5) { animation-delay: 160ms; }
+.sidebar-stagger > *:nth-child(6) { animation-delay: 200ms; }
+.sidebar-stagger > *:nth-child(7) { animation-delay: 240ms; }
+
 @media (prefers-reduced-motion: reduce) {
-  .page-fade-in {
+  .page-fade-in,
+  .sidebar-stagger > * {
     animation: none !important;
   }
 }

src/index.css

@@ -1,5 +1,9 @@
 import { StrictMode } from 'react';
 import { createRoot } from 'react-dom/client';
+// Self-hosted variable fonts — Inter for UI, JetBrains Mono for numeric/code.
+// Variable files are small (~25-30KB each) and cover all weights we need.
+import '@fontsource-variable/inter';
+import '@fontsource-variable/jetbrains-mono';
 import './index.css';
 import './i18n';
 import App from './App.jsx';