From 123f4eb520d43fb4158b535e87b9c683488efa3e Mon Sep 17 00:00:00 2001
From: Paul Bakaus <paul.bakaus@gmail.com>
Date: Wed, 7 Jan 2026 20:11:33 -0800
Subject: [PATCH] Simplify download cards to essentials only

- Remove redundant "Full Featured" badges (all are full featured)
- Remove paragraph descriptions (didn't add value)
- Center-align cards for cleaner visual
- Add "Commands only (no skills yet)" note for Gemini
- Slightly larger icons, tighter spacing

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
---
 public/css/main.css | 44 ++++++++++++--------------------------------
 public/index.html   | 30 +++++++-----------------------
 2 files changed, 19 insertions(+), 55 deletions(-)

diff --git a/public/css/main.css b/public/css/main.css
index 45de0c970..4d2a7bc5c 100644
--- a/public/css/main.css
+++ b/public/css/main.css
@@ -1353,6 +1353,8 @@ code {
 .download-card {
   display: flex;
   flex-direction: column;
+  align-items: center;
+  text-align: center;
   padding: var(--spacing-lg);
   background: var(--color-cream);
   border: 1px solid var(--color-mist);
@@ -1366,53 +1368,31 @@ code {
 }
 
 .download-card-icon {
-  color: var(--color-accent);
-  margin-bottom: var(--spacing-md);
+  margin-bottom: var(--spacing-sm);
 }
 
 .download-card-icon img {
-  width: 32px;
-  height: 32px;
+  width: 40px;
+  height: 40px;
   object-fit: contain;
-  border-radius: 6px;
-}
-
-.download-card-content {
-  flex: 1;
-  display: flex;
-  flex-direction: column;
-  gap: var(--spacing-sm);
+  border-radius: 8px;
 }
 
 .download-card-title {
   font-family: var(--font-display);
-  font-size: 1.5rem;
+  font-size: 1.25rem;
   font-weight: 400;
-  margin: 0;
+  margin: 0 0 var(--spacing-sm) 0;
 }
 
-.download-card-badge {
-  display: inline-block;
-  align-self: flex-start;
-  font-size: 0.625rem;
-  font-weight: 600;
-  letter-spacing: 0.08em;
-  text-transform: uppercase;
-  padding: 4px 10px;
-  background: var(--color-accent-dim);
-  color: var(--color-accent);
-  border-radius: 4px;
-}
-
-.download-card-desc {
-  font-size: 0.9375rem;
-  line-height: 1.6;
+.download-card-note {
+  font-size: 0.75rem;
   color: var(--color-ash);
-  flex: 1;
+  margin-bottom: var(--spacing-xs);
 }
 
 .download-card .btn {
-  margin-top: var(--spacing-md);
+  margin-top: auto;
 }
 
 /* ============================================
diff --git a/public/index.html b/public/index.html
index 93676ff5e..f87799750 100644
--- a/public/index.html
+++ b/public/index.html
@@ -351,11 +351,7 @@
           <div class="download-card-icon">
             <img src="https://img.logo.dev/cursor.com?token=pk_dtRHfeTyRzG5zZInUc65Xw&size=64&format=png" alt="Cursor logo" width="32" height="32" loading="lazy">
           </div>
-          <div class="download-card-content">
-            <h3 class="download-card-title">Cursor</h3>
-            <span class="download-card-badge">Full Featured</span>
-            <p class="download-card-desc">Full Agent Skills support. Requires Cursor nightly for skills.</p>
-          </div>
+          <h3 class="download-card-title">Cursor</h3>
           <button class="btn btn-primary" data-bundle="cursor" aria-label="Download Cursor bundle">
             <span>Download</span>
             <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true">
@@ -368,11 +364,7 @@
           <div class="download-card-icon">
             <img src="https://img.logo.dev/claude.ai?token=pk_dtRHfeTyRzG5zZInUc65Xw&size=64&format=png" alt="Claude logo" width="32" height="32" loading="lazy">
           </div>
-          <div class="download-card-content">
-            <h3 class="download-card-title">Claude Code</h3>
-            <span class="download-card-badge">Full Featured</span>
-            <p class="download-card-desc">The most complete version with all features. Works with Claude's native skills system.</p>
-          </div>
+          <h3 class="download-card-title">Claude Code</h3>
           <button class="btn btn-primary" data-bundle="claude-code" aria-label="Download Claude Code bundle">
             <span>Download</span>
             <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true">
@@ -381,15 +373,12 @@
           </button>
         </article>
 
-        <article class="download-card" data-reveal>
+        <article class="download-card download-card--limited" data-reveal>
           <div class="download-card-icon">
             <img src="https://img.logo.dev/gemini.google.com?token=pk_dtRHfeTyRzG5zZInUc65Xw&size=64&format=png" alt="Gemini logo" width="32" height="32" loading="lazy">
           </div>
-          <div class="download-card-content">
-            <h3 class="download-card-title">Gemini CLI</h3>
-            <span class="download-card-badge">Full Featured</span>
-            <p class="download-card-desc">Native integration with Gemini's command system and context files.</p>
-          </div>
+          <h3 class="download-card-title">Gemini CLI</h3>
+          <span class="download-card-note">Commands only (no skills yet)</span>
           <button class="btn btn-primary" data-bundle="gemini" aria-label="Download Gemini CLI bundle">
             <span>Download</span>
             <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true">
@@ -402,11 +391,7 @@
           <div class="download-card-icon">
             <img src="https://img.logo.dev/openai.com?token=pk_dtRHfeTyRzG5zZInUc65Xw&size=64&format=png" alt="OpenAI logo" width="32" height="32" loading="lazy">
           </div>
-          <div class="download-card-content">
-            <h3 class="download-card-title">Codex CLI</h3>
-            <span class="download-card-badge">Full Featured</span>
-            <p class="download-card-desc">Full Agent Skills support with OpenAI's native prompt and skill system.</p>
-          </div>
+          <h3 class="download-card-title">Codex CLI</h3>
           <button class="btn btn-primary" data-bundle="codex" aria-label="Download Codex CLI bundle">
             <span>Download</span>
             <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true">
@@ -414,8 +399,7 @@
             </svg>
           </button>
         </article>
-
-              </div>
+      </div>
     </section>
 
     <!-- 7. OPEN SOURCE -->