Fix hero: brand green wordmark, remove figures section, fix icon fallback

index.html

@@ -12,6 +12,8 @@
       --border: #2e3149;
       --accent: #6366f1;
       --accent2: #8b5cf6;
+      --brand: #4ade80;
+      --brand-dark: #22c55e;
       --gold: #f59e0b;
       --text: #e2e8f0;
       --muted: #94a3b8;
@@ -31,9 +33,9 @@
 
     /* ── Hero ────────────────────────────────── */
     .hero {
-      background: linear-gradient(135deg, #0f1117 0%, #1a1037 50%, #0f1117 100%);
+      background: linear-gradient(160deg, #0a0f0a 0%, #0d1a10 40%, #0f1117 100%);
       border-bottom: 1px solid var(--border);
-      padding: 64px 24px 48px;
+      padding: 72px 24px 56px;
       text-align: center;
       position: relative;
       overflow: hidden;
@@ -42,41 +44,59 @@
       content: '';
       position: absolute;
       inset: 0;
-      background: radial-gradient(ellipse 80% 50% at 50% 0%, rgba(99,102,241,0.15) 0%, transparent 70%);
+      background: radial-gradient(ellipse 70% 60% at 50% -10%, rgba(74,222,128,0.12) 0%, transparent 65%);
       pointer-events: none;
     }
-    .hero-logo {
+
+    /* Logo mark — the small icon on top */
+    .hero-icon {
+      width: 72px;
+      height: 72px;
+      margin: 0 auto 20px;
+      border-radius: 18px;
+      background: linear-gradient(135deg, rgba(74,222,128,0.15), rgba(34,197,94,0.08));
+      border: 1.5px solid rgba(74,222,128,0.25);
       display: flex;
       align-items: center;
       justify-content: center;
-      gap: 16px;
-      margin-bottom: 16px;
+      overflow: hidden;
     }
-    .hero-logo img {
-      height: 60px;
+    .hero-icon img {
+      width: 52px;
+      height: 52px;
       object-fit: contain;
+      display: block;
     }
-    .hero h1 {
-      font-size: clamp(2rem, 5vw, 3.2rem);
-      font-weight: 800;
-      background: linear-gradient(135deg, #e2e8f0 0%, #a5b4fc 60%, #818cf8 100%);
-      -webkit-background-clip: text;
-      -webkit-text-fill-color: transparent;
-      background-clip: text;
-      margin-bottom: 8px;
+    /* Fallback icon when image fails */
+    .hero-icon-fallback {
+      font-size: 2rem;
+      color: var(--brand);
     }
+
+    /* "Haakkim" wordmark */
+    .hero-wordmark {
+      font-size: clamp(2.8rem, 7vw, 4.5rem);
+      font-weight: 900;
+      letter-spacing: -0.02em;
+      color: var(--brand);
+      line-height: 1;
+      margin-bottom: 10px;
+    }
+
+    /* Arabic subtitle */
     .hero-ar {
-      font-size: 2.2rem;
+      font-size: 2rem;
       font-weight: 700;
-      color: var(--accent);
+      color: rgba(74,222,128,0.7);
       direction: rtl;
-      margin-bottom: 16px;
+      margin-bottom: 20px;
+      letter-spacing: 0.05em;
     }
     .hero p {
-      font-size: 1.15rem;
+      font-size: 1.1rem;
       color: var(--muted);
-      max-width: 600px;
-      margin: 0 auto 28px;
+      max-width: 580px;
+      margin: 0 auto 32px;
     }
     .hero-links {
       display: flex;
@@ -97,21 +117,23 @@
       cursor: pointer;
     }
     .btn-primary {
-      background: var(--accent);
-      color: #fff;
+      background: var(--brand);
+      color: #0a0f0a;
+      font-weight: 700;
     }
-    .btn-primary:hover { background: #5457e0; transform: translateY(-1px); }
+    .btn-primary:hover { background: #22c55e; transform: translateY(-1px); box-shadow: 0 4px 20px rgba(74,222,128,0.3); }
     .btn-outline {
       background: transparent;
       color: var(--text);
       border: 1px solid var(--border);
     }
-    .btn-outline:hover { border-color: var(--accent); color: var(--accent); transform: translateY(-1px); }
+    .btn-outline:hover { border-color: var(--brand); color: var(--brand); transform: translateY(-1px); }
     .btn-dataset {
-      background: #1c7a4d;
-      color: #fff;
+      background: rgba(74,222,128,0.12);
+      color: var(--brand);
+      border: 1px solid rgba(74,222,128,0.3);
     }
-    .btn-dataset:hover { background: #155f3d; transform: translateY(-1px); }
+    .btn-dataset:hover { background: rgba(74,222,128,0.2); transform: translateY(-1px); }
 
     /* ── Container ───────────────────────────── */
     .container { max-width: 1100px; margin: 0 auto; padding: 0 24px; }
@@ -133,7 +155,7 @@
     /* ── Stats grid ──────────────────────────── */
     .stats-grid {
       display: grid;
-      grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
+      grid-template-columns: repeat(auto-fit, minmax(155px, 1fr));
       gap: 16px;
     }
     .stat-card {
@@ -142,18 +164,18 @@
       border-radius: var(--radius);
       padding: 24px 20px;
       text-align: center;
-      transition: border-color 0.2s;
+      transition: border-color 0.2s, transform 0.2s;
     }
-    .stat-card:hover { border-color: var(--accent); }
+    .stat-card:hover { border-color: var(--brand); transform: translateY(-2px); }
     .stat-value {
       font-size: 2.2rem;
       font-weight: 800;
-      color: var(--accent);
+      color: var(--brand);
       line-height: 1;
       margin-bottom: 6px;
     }
     .stat-label {
-      font-size: 0.82rem;
+      font-size: 0.8rem;
       color: var(--muted);
       text-transform: uppercase;
       letter-spacing: 0.05em;
@@ -211,11 +233,10 @@
     .model-org {
       color: var(--muted);
       font-size: 0.78rem;
-      margin-right: 4px;
     }
     .score-val {
       font-weight: 700;
-      color: var(--accent);
+      color: var(--brand);
       font-variant-numeric: tabular-nums;
     }
     .ci-val {
@@ -233,7 +254,7 @@
       color: var(--muted);
     }
 
-    /* ── Info cards ──────────────────────────── */
+    /* ── Cards ───────────────────────────────── */
     .cards-grid {
       display: grid;
       grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
@@ -246,20 +267,10 @@
       padding: 24px;
       transition: border-color 0.2s, transform 0.2s;
     }
-    .card:hover { border-color: var(--accent); transform: translateY(-2px); }
-    .card-icon {
-      font-size: 1.8rem;
-      margin-bottom: 12px;
-    }
-    .card h3 {
-      font-size: 1rem;
-      font-weight: 700;
-      margin-bottom: 8px;
-    }
-    .card p {
-      font-size: 0.88rem;
-      color: var(--muted);
-    }
+    .card:hover { border-color: var(--brand); transform: translateY(-2px); }
+    .card-icon { font-size: 1.8rem; margin-bottom: 12px; }
+    .card h3 { font-size: 1rem; font-weight: 700; margin-bottom: 8px; }
+    .card p { font-size: 0.88rem; color: var(--muted); }
     .card-tag {
       display: inline-block;
       margin-top: 10px;
@@ -267,44 +278,19 @@
       border-radius: 99px;
       font-size: 0.75rem;
       font-weight: 600;
-      background: rgba(16,185,129,0.15);
-      color: var(--green);
+      background: rgba(74,222,128,0.12);
+      color: var(--brand);
     }
     .card-tag-no {
       background: rgba(100,116,139,0.15);
       color: var(--muted);
     }
 
-    /* ── Figure images ───────────────────────── */
-    .figures-grid {
-      display: grid;
-      grid-template-columns: repeat(auto-fit, minmax(420px, 1fr));
-      gap: 20px;
-    }
-    .figure-card {
-      background: var(--surface);
-      border: 1px solid var(--border);
-      border-radius: var(--radius);
-      overflow: hidden;
-    }
-    .figure-card img {
-      width: 100%;
-      display: block;
-      background: #fff;
-    }
-    .figure-caption {
-      padding: 12px 16px;
-      font-size: 0.82rem;
-      color: var(--muted);
-      text-align: center;
-    }
-
     /* ── Dialect pills ───────────────────────── */
     .dialect-list {
       display: flex;
       flex-wrap: wrap;
       gap: 10px;
-      margin-top: 8px;
     }
     .dialect-pill {
       background: var(--surface2);
@@ -314,16 +300,16 @@
       font-size: 0.82rem;
       display: flex;
       align-items: center;
-      gap: 6px;
+      gap: 8px;
     }
     .dialect-pill .bar {
       height: 4px;
       border-radius: 99px;
-      background: var(--accent);
-      min-width: 20px;
+      background: var(--brand);
+      min-width: 4px;
     }
 
-    /* ── Scoring methodology ─────────────────── */
+    /* ── Scoring steps ───────────────────────── */
     .method-steps {
       display: grid;
       grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
@@ -339,8 +325,8 @@
       width: 32px;
       height: 32px;
       border-radius: 50%;
-      background: var(--accent);
-      color: #fff;
+      background: var(--brand);
+      color: #0a0f0a;
       font-weight: 800;
       font-size: 0.9rem;
       display: flex;
@@ -348,15 +334,23 @@
       justify-content: center;
       margin-bottom: 12px;
     }
-    .step h4 {
-      font-size: 0.92rem;
-      font-weight: 700;
-      margin-bottom: 6px;
-    }
-    .step p {
-      font-size: 0.82rem;
-      color: var(--muted);
+    .step h4 { font-size: 0.92rem; font-weight: 700; margin-bottom: 6px; }
+    .step p { font-size: 0.82rem; color: var(--muted); }
+
+    /* ── Dataset callout ─────────────────────── */
+    .dataset-callout {
+      background: linear-gradient(135deg, rgba(74,222,128,0.06), rgba(99,102,241,0.06));
+      border: 1px solid rgba(74,222,128,0.25);
+      border-radius: var(--radius);
+      padding: 28px 32px;
+      display: flex;
+      align-items: center;
+      gap: 24px;
+      flex-wrap: wrap;
     }
+    .dataset-callout .ds-icon { font-size: 2.5rem; }
+    .dataset-callout h3 { font-size: 1.1rem; font-weight: 700; margin-bottom: 4px; }
+    .dataset-callout p { font-size: 0.88rem; color: var(--muted); }
 
     /* ── Team ────────────────────────────────── */
     .team-grid {
@@ -372,18 +366,18 @@
       text-align: center;
       transition: border-color 0.2s;
     }
-    .team-card:hover { border-color: var(--accent); }
+    .team-card:hover { border-color: var(--brand); }
     .team-avatar {
       width: 56px;
       height: 56px;
       border-radius: 50%;
-      background: linear-gradient(135deg, var(--accent), var(--accent2));
+      background: linear-gradient(135deg, var(--brand), var(--brand-dark));
       display: flex;
       align-items: center;
       justify-content: center;
-      font-size: 1.4rem;
+      font-size: 1.2rem;
       font-weight: 800;
-      color: #fff;
+      color: #0a0f0a;
       margin: 0 auto 14px;
     }
     .team-name { font-weight: 700; font-size: 1rem; margin-bottom: 4px; }
@@ -393,30 +387,15 @@
       align-items: center;
       gap: 5px;
       font-size: 0.78rem;
-      color: var(--accent);
+      color: var(--brand);
       text-decoration: none;
     }
     .team-hf:hover { text-decoration: underline; }
 
-    /* ── Dataset callout ─────────────────────── */
-    .dataset-callout {
-      background: linear-gradient(135deg, rgba(16,185,129,0.08), rgba(99,102,241,0.08));
-      border: 1px solid rgba(16,185,129,0.3);
-      border-radius: var(--radius);
-      padding: 28px 32px;
-      display: flex;
-      align-items: center;
-      gap: 24px;
-      flex-wrap: wrap;
-    }
-    .dataset-callout .ds-icon { font-size: 2.5rem; }
-    .dataset-callout h3 { font-size: 1.1rem; font-weight: 700; margin-bottom: 4px; }
-    .dataset-callout p { font-size: 0.88rem; color: var(--muted); }
-
-    /* ── Score note ──────────────────────────── */
+    /* ── Note box ────────────────────────────── */
     .note-box {
-      background: rgba(99,102,241,0.08);
-      border: 1px solid rgba(99,102,241,0.25);
+      background: rgba(74,222,128,0.05);
+      border: 1px solid rgba(74,222,128,0.2);
       border-radius: 8px;
       padding: 14px 18px;
       font-size: 0.85rem;
@@ -433,12 +412,11 @@
       font-size: 0.82rem;
       color: var(--muted);
     }
-    footer a { color: var(--accent); text-decoration: none; }
+    footer a { color: var(--brand); text-decoration: none; }
     footer a:hover { text-decoration: underline; }
 
     @media (max-width: 600px) {
-      .hero { padding: 40px 16px 32px; }
-      .figures-grid { grid-template-columns: 1fr; }
+      .hero { padding: 48px 16px 36px; }
       .dataset-callout { flex-direction: column; gap: 12px; }
     }
   </style>
@@ -449,28 +427,32 @@
      HERO
 ════════════════════════════════════════════════════ -->
 <div class="hero">
-  <div class="hero-logo">
-    <img src="haakkim-logo-withname.png" alt="Haakkim" onerror="this.style.display='none'" />
+  <!-- Small icon badge -->
+  <div class="hero-icon">
+    <img
+      src="haakkim-logo-only.png"
+      alt=""
+      onerror="this.parentElement.innerHTML='<span class=hero-icon-fallback>⚖</span>'"
+    />
   </div>
+
+  <!-- Wordmark in brand green -->
+  <div class="hero-wordmark">Haakkim</div>
   <div class="hero-ar">حَكِّم</div>
+
   <p>An open arena-style human preference evaluation platform for Arabic large language models — built from the ground up for Arabic.</p>
+
   <div class="hero-links">
-    <a href="https://haakkim.tech" class="btn btn-primary">
-      🌐 Live Platform
-    </a>
-    <a href="https://haakkim.tech/#leaderboard" class="btn btn-outline">
-      🏆 Leaderboard
-    </a>
-    <a href="https://huggingface.co/datasets/Haakkim/Haakkim-1.0v" class="btn btn-dataset">
-      📦 Dataset v1.0
-    </a>
+    <a href="https://haakkim.tech" class="btn btn-primary">🌐 Live Platform</a>
+    <a href="https://haakkim.tech/#leaderboard" class="btn btn-outline">🏆 Leaderboard</a>
+    <a href="https://huggingface.co/datasets/Haakkim/Haakkim-1.0v" class="btn btn-dataset">📦 Dataset v1.0</a>
   </div>
 </div>
 
 <div class="container">
 
 <!-- ═══════════════════════════════════════════════════
-     SNAPSHOT STATS
+     STATS
 ════════════════════════════════════════════════════ -->
 <section>
   <div class="section-title">Current Snapshot — v1.0</div>
@@ -508,7 +490,7 @@
 ════════════════════════════════════════════════════ -->
 <section>
   <div class="section-title">MSA Leaderboard — Top 10</div>
-  <div class="section-sub">Bradley–Terry scores (1000-centered log-odds). Full 67-model leaderboard at <a href="https://haakkim.tech/#leaderboard" style="color:var(--accent)">haakkim.tech</a></div>
+  <div class="section-sub">Bradley–Terry scores (1000-centered log-odds). Full 67-model leaderboard at <a href="https://haakkim.tech/#leaderboard" style="color:var(--brand)">haakkim.tech</a></div>
   <div class="table-wrap">
     <table>
       <thead>
@@ -595,33 +577,7 @@
     </table>
   </div>
   <div class="note-box">
-    <strong>Score scale:</strong> Haakkim uses unscaled log-odds units centered at 1000 — a 1-point gap corresponds to win odds of e¹ ≈ 2.7:1. This produces a ~4-point spread across 67 models. Chatbot Arena-style Elo scaling (×173.7) would show the same ranking with hundreds-of-points spreads; both conventions encode identical win probabilities.
-  </div>
-</section>
-
-<!-- ═══════════════════════════════════════════════════
-     FIGURES
-════════════════════════════════════════════════════ -->
-<section>
-  <div class="section-title">Analysis Figures</div>
-  <div class="section-sub">Regenerated from the live database — v1.0 snapshot</div>
-  <div class="figures-grid">
-    <div class="figure-card">
-      <img src="bt_leaderboard_ci_top20.png" alt="BT Leaderboard Top 20 with Confidence Intervals" />
-      <div class="figure-caption">BT Leaderboard — Top 20 models with 95% bootstrap confidence intervals</div>
-    </div>
-    <div class="figure-card">
-      <img src="dialect_distribution.png" alt="Dialect Distribution" />
-      <div class="figure-caption">Battle distribution across 11 Arabic dialect varieties</div>
-    </div>
-    <div class="figure-card">
-      <img src="vote_outcome_distribution_ranked.png" alt="Vote Outcome Distribution" />
-      <div class="figure-caption">Vote outcome distribution for ranked arena battles</div>
-    </div>
-    <div class="figure-card">
-      <img src="haakkim_overview.png" alt="Platform Overview" />
-      <div class="figure-caption">Haakkim platform overview and evaluation pipeline</div>
-    </div>
+    <strong>Score scale:</strong> Haakkim uses unscaled log-odds units centered at 1000 — a 1-point gap corresponds to win odds of e¹ ≈ 2.7:1, producing a ~4-point spread across 67 models. Chatbot Arena-style Elo (×173.7) encodes identical win probabilities with hundreds-of-points spreads.
   </div>
 </section>
 
@@ -632,17 +588,17 @@
   <div class="section-title">Arabic Dialect Coverage</div>
   <div class="section-sub">11 varieties — from Modern Standard Arabic to regional dialects across the Arab world</div>
   <div class="dialect-list">
-    <div class="dialect-pill">MSA <div class="bar" style="width:80px;background:#6366f1"></div> 77.5%</div>
-    <div class="dialect-pill">Tunisian <div class="bar" style="width:22px;background:#8b5cf6"></div> 9.0%</div>
-    <div class="dialect-pill">Saudi <div class="bar" style="width:16px;background:#a78bfa"></div> 6.5%</div>
-    <div class="dialect-pill">Egyptian <div class="bar" style="width:9px;background:#c4b5fd"></div> 3.5%</div>
-    <div class="dialect-pill">Levantine <div class="bar" style="width:6px"></div> 1.7%</div>
+    <div class="dialect-pill">MSA <div class="bar" style="width:80px"></div> 77.5%</div>
+    <div class="dialect-pill">Tunisian <div class="bar" style="width:22px"></div> 9.0%</div>
+    <div class="dialect-pill">Saudi <div class="bar" style="width:16px"></div> 6.5%</div>
+    <div class="dialect-pill">Egyptian <div class="bar" style="width:9px"></div> 3.5%</div>
+    <div class="dialect-pill">Levantine <div class="bar" style="width:5px"></div> 1.7%</div>
     <div class="dialect-pill">Sudanese <div class="bar" style="width:4px"></div> 0.9%</div>
-    <div class="dialect-pill">Omani <div class="bar" style="width:3px"></div> 0.4%</div>
-    <div class="dialect-pill">Iraqi <div class="bar" style="width:2px"></div> 0.2%</div>
-    <div class="dialect-pill">Moroccan <div class="bar" style="width:2px"></div> &lt;0.1%</div>
-    <div class="dialect-pill">Libyan <div class="bar" style="width:2px"></div> &lt;0.1%</div>
-    <div class="dialect-pill">Algerian <div class="bar" style="width:2px"></div> &lt;0.1%</div>
+    <div class="dialect-pill">Omani <div class="bar" style="width:4px"></div> 0.4%</div>
+    <div class="dialect-pill">Iraqi <div class="bar" style="width:4px"></div> 0.2%</div>
+    <div class="dialect-pill">Moroccan <div class="bar" style="width:4px"></div> &lt;0.1%</div>
+    <div class="dialect-pill">Libyan <div class="bar" style="width:4px"></div> &lt;0.1%</div>
+    <div class="dialect-pill">Algerian <div class="bar" style="width:4px"></div> &lt;0.1%</div>
   </div>
 </section>