From e41fcf6ceaca2812449bf1c5c8668a4449bd2799 Mon Sep 17 00:00:00 2001
From: jay <thejayman77@gmail.com>
Date: Sun, 7 Jun 2026 13:59:53 -0400
Subject: [PATCH] Brief cards: drop "why" for more summary; flat placeholder,
 darker word
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Per review: the summary and the "Why it's here" line were competing in a tight
card and both came up short. Remove "why" from cards (it still appears on the
article page when clicked in) and give the summary the room (image cards 2→4
lines). Also flatten the placeholder banner — solid topic-color tint instead of
a gradient-to-blank, with the topic word in a deep near-black shade of that
color so it reads clearly instead of washed out.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 frontend/src/lib/components/ArticleCard.svelte | 18 +++++++-----------
 1 file changed, 7 insertions(+), 11 deletions(-)

diff --git a/frontend/src/lib/components/ArticleCard.svelte b/frontend/src/lib/components/ArticleCard.svelte
index a4400db..aaea91a 100644
--- a/frontend/src/lib/components/ArticleCard.svelte
+++ b/frontend/src/lib/components/ArticleCard.svelte
@@ -136,10 +136,6 @@
       <p class="paywall">May need a subscription to read</p>
     {/if}
 
-    {#if article.reason_text}
-      <p class="why">{article.reason_text}</p>
-    {/if}
-
     <div class="actions">
       {#if auth.user}
         <button class="save" class:on={isSaved} onclick={() => toggleSave(article.id)}
@@ -302,20 +298,20 @@
      (--c), so every card in the grid is the same size — uniform, not lacking. */
   .tile .media.placeholder {
     display: flex; align-items: center; justify-content: center; text-decoration: none;
-    background:
-      radial-gradient(130% 150% at 0% 0%, color-mix(in srgb, var(--c) 26%, transparent), transparent 62%),
-      linear-gradient(135deg, color-mix(in srgb, var(--c) 13%, var(--surface)), var(--surface));
+    /* Flat fill in the card's topic color — no gradient. */
+    background: color-mix(in srgb, var(--c) 14%, var(--surface));
   }
   .tile .media.placeholder .ph-word {
     font-family: var(--serif); font-size: 2rem; line-height: 1;
-    color: var(--c); opacity: 0.34; text-transform: lowercase; letter-spacing: -0.01em;
+    /* A deep, near-black shade of the topic color so the word reads clearly. */
+    color: color-mix(in srgb, var(--c) 55%, var(--ink)); opacity: 0.9;
+    text-transform: lowercase; letter-spacing: -0.01em;
   }
   /* A thumb card's banner carries the topic identity, so drop the faint corner
      watermark there to avoid a doubled word. */
   .tile.hasthumb::after { display: none; }
-  /* Every thumb card carries a banner, so trim the summary to keep total height
-     compact and uniform across the grid. */
-  .tile.hasthumb .summary { -webkit-line-clamp: 2; }
+  /* The "why" now lives only on the article page, so the summary gets the room. */
+  .tile.hasthumb .summary { -webkit-line-clamp: 4; }
 
   /* ---- Typographic editorial tile (every non-hero card) ---- */
   .tile { position: relative; }