From c4910889de0b7412a33f1771a0be7d59e44b5780 Mon Sep 17 00:00:00 2001
From: ordinarthur <@arthurbarre.js@gmail.com>
Date: Mon, 11 May 2026 00:16:08 +0200
Subject: [PATCH] =?UTF-8?q?feat(landing/changelog):=20glow=20rubis=20sur?=
 =?UTF-8?q?=20la=20derni=C3=A8re=20version,=20retire=20les=20pills=20sur?=
 =?UTF-8?q?=20les=20anciennes?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Le contexte "Nouveauté" sur 11 cartes à la suite devenait du bruit visuel
(toutes les anciennes versions ont été des nouveautés à un moment, hein).
Le pill de type est maintenant réservé à la version la plus récente — sur
les autres on garde seulement la chip de version + la date.

Pour compenser et ancrer le regard sur le dernier état du produit, la
carte "latest" gagne un glow rubis multi-couches :
- Ring serré 4 px en couleur rubis-glow (contour soft)
- Drop shadow proche teintée rubis (profondeur)
- Bloom large diffus (halo ambiant)
- Animation "respiration" 5 s ease-in-out infini (variation subtile sur
  l'intensité du bloom)
- Désactivée si `prefers-reduced-motion: reduce` côté user.

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
---
 apps/landing/src/pages/changelog/index.astro | 84 ++++++++++++++++----
 1 file changed, 67 insertions(+), 17 deletions(-)

diff --git a/apps/landing/src/pages/changelog/index.astro b/apps/landing/src/pages/changelog/index.astro
index 8640f69..0fb0a9f 100644
--- a/apps/landing/src/pages/changelog/index.astro
+++ b/apps/landing/src/pages/changelog/index.astro
@@ -126,12 +126,23 @@ const jsonLd = {
             </div>
           ) : (
             <ol class="space-y-12 lg:space-y-16 list-none p-0">
-              {rendered.map(({ data, Content }) => (
+              {rendered.map(({ data, Content }, index) => {
+                // Seule la carte la plus récente porte le pill type — pour les
+                // autres on retire le bruit visuel (le contexte de "Nouveauté"
+                // s'épuise quand la version a 2 mois). Le pill survivant est
+                // accentué par le glow autour de la carte (cf. <style> en bas).
+                const isLatest = index === 0;
+                return (
                 <li
                   id={data.version}
-                  class="changelog-card scroll-mt-24 bg-white border border-line rounded-card shadow-soft p-7 sm:p-9 lg:p-10"
+                  class:list={[
+                    "changelog-card scroll-mt-24 bg-white border rounded-card p-7 sm:p-9 lg:p-10",
+                    isLatest
+                      ? "changelog-card--latest border-rubis/25"
+                      : "border-line shadow-soft",
+                  ]}
                 >
-                  {/* Header : chip version + type + date */}
+                  {/* Header : chip version + (type si latest) + date */}
                   <header class="flex items-center flex-wrap gap-3">
                     <a
                       href={`#${data.version}`}
@@ -140,19 +151,20 @@ const jsonLd = {
                     >
                       v{data.version}
                     </a>
-                    <span
-                      class:list={[
-                        "inline-flex items-center text-[11px] uppercase tracking-[0.08em] font-semibold px-2.5 py-1 rounded-full",
-                        data.type === "feature" &&
-                          "bg-rubis text-cream",
-                        data.type === "improvement" &&
-                          "bg-cream-2 text-ink-2 border border-line",
-                        data.type === "fix" &&
-                          "bg-white text-ink-3 border border-line",
-                      ]}
-                    >
-                      {typeLabel[data.type]}
-                    </span>
+                    {isLatest && (
+                      <span
+                        class:list={[
+                          "inline-flex items-center text-[11px] uppercase tracking-[0.08em] font-semibold px-2.5 py-1 rounded-full",
+                          data.type === "feature" && "bg-rubis text-cream",
+                          data.type === "improvement" &&
+                            "bg-cream-2 text-ink-2 border border-line",
+                          data.type === "fix" &&
+                            "bg-white text-ink-3 border border-line",
+                        ]}
+                      >
+                        {typeLabel[data.type]}
+                      </span>
+                    )}
                     <time
                       datetime={data.date.toISOString()}
                       class="text-[13px] text-ink-3 tabular-nums ml-auto"
@@ -184,7 +196,8 @@ const jsonLd = {
                     <Content />
                   </div>
                 </li>
-              ))}
+                );
+              })}
             </ol>
           )
         }
@@ -283,6 +296,43 @@ const jsonLd = {
       color: var(--color-rubis);
     }
 
+    /* Glow autour de la carte la plus récente — superpose 3 couches d'ombres
+       pour donner un effet "halo rubis chaud" sans agression visuelle :
+        1. Ring serré crème-rubis (4 px) qui dessine un contour soft
+        2. Drop shadow proche teintée rubis pour la profondeur
+        3. Bloom large diffus pour le glow ambiant
+       Le tout animé en respiration légère (5 s ease-in-out infini), désactivé
+       quand l'utilisateur préfère pas d'animation (prefers-reduced-motion). */
+    .changelog-card--latest {
+      position: relative;
+      box-shadow:
+        0 0 0 4px var(--color-rubis-glow),
+        0 20px 50px -12px rgba(159, 18, 57, 0.22),
+        0 0 90px -20px rgba(159, 18, 57, 0.35);
+      animation: changelog-glow-breath 5s ease-in-out infinite;
+    }
+
+    @keyframes changelog-glow-breath {
+      0%, 100% {
+        box-shadow:
+          0 0 0 4px var(--color-rubis-glow),
+          0 20px 50px -12px rgba(159, 18, 57, 0.22),
+          0 0 90px -20px rgba(159, 18, 57, 0.35);
+      }
+      50% {
+        box-shadow:
+          0 0 0 5px var(--color-rubis-glow),
+          0 24px 60px -10px rgba(159, 18, 57, 0.28),
+          0 0 120px -16px rgba(159, 18, 57, 0.45);
+      }
+    }
+
+    @media (prefers-reduced-motion: reduce) {
+      .changelog-card--latest {
+        animation: none;
+      }
+    }
+
     /* Prose pour le body markdown des entries — typo cohérente avec la landing,
        espacements rythmiques, code inline propre. Pas de @tailwindcss/typography
        pour pas alourdir le bundle, custom suffit largement vu la simplicité. */