From e39a0c547d4958bec61f6419a0f44164a196ba77 Mon Sep 17 00:00:00 2001
From: Archicratia <area.technik@proton.me>
Date: Mon, 23 Mar 2026 10:27:28 +0100
Subject: [PATCH] feat(glossaire): compress paradigme hero when reading follow
 is active

---
 src/layouts/GlossaryLayout.astro              | 38 ++++++++++++++++-
 .../glossaire/paradigme-archicratique.astro   | 41 +++++++++++++------
 2 files changed, 66 insertions(+), 13 deletions(-)

diff --git a/src/layouts/GlossaryLayout.astro b/src/layouts/GlossaryLayout.astro
index 5c7a1d5..4012906 100644
--- a/src/layouts/GlossaryLayout.astro
+++ b/src/layouts/GlossaryLayout.astro
@@ -26,10 +26,46 @@ const {
 </EditionLayout>
 
 <style is:global>
+  body[data-edition-key="glossaire"][data-sticky-mode="glossary-portal"]{
+    --portal-hero-pad-top: 18px;
+    --portal-hero-pad-x: 18px;
+    --portal-hero-pad-bottom: 20px;
+    --portal-hero-gap: 14px;
+
+    --portal-hero-h1-size: clamp(2.2rem, 4vw, 3.15rem);
+
+    --portal-hero-intro-size: 1.04rem;
+    --portal-hero-intro-lh: 1.55;
+    --portal-hero-intro-maxw: 76ch;
+
+    --portal-hero-secondary-max-h: 20em;
+    --portal-hero-secondary-opacity: .94;
+  }
+
+  body[data-edition-key="glossaire"][data-sticky-mode="glossary-portal"].glossary-follow-on{
+    --portal-hero-pad-top: 12px;
+    --portal-hero-pad-x: 16px;
+    --portal-hero-pad-bottom: 14px;
+    --portal-hero-gap: 8px;
+
+    --portal-hero-h1-size: clamp(1.95rem, 3.3vw, 2.6rem);
+
+    --portal-hero-intro-size: .98rem;
+    --portal-hero-intro-lh: 1.46;
+    --portal-hero-intro-maxw: 68ch;
+
+    --portal-hero-secondary-max-h: 4.6em;
+    --portal-hero-secondary-opacity: .82;
+  }
+
   body[data-edition-key="glossaire"][data-sticky-mode="glossary-portal"] .scene-hero,
   body[data-edition-key="glossaire"][data-sticky-mode="glossary-portal"] .glossary-portal-hero,
   body[data-edition-key="glossaire"][data-sticky-mode="glossary-portal"] .glossary-page-hero{
-    transition: border-radius 180ms ease;
+    transition:
+      border-radius 180ms ease,
+      padding 180ms ease,
+      row-gap 180ms ease,
+      margin-bottom 180ms ease;
   }
 
   body[data-edition-key="glossaire"][data-sticky-mode="glossary-portal"].glossary-follow-on .scene-hero,
diff --git a/src/pages/glossaire/paradigme-archicratique.astro b/src/pages/glossaire/paradigme-archicratique.astro
index b3d2868..60e280d 100644
--- a/src/pages/glossaire/paradigme-archicratique.astro
+++ b/src/pages/glossaire/paradigme-archicratique.astro
@@ -780,21 +780,28 @@ const translationCount = casIaEntries.length;
     top: calc(var(--sticky-header-h, 0px) + var(--page-gap, 12px));
     z-index: 11;
     margin: 0 0 24px;
-    padding: 18px 18px 20px;
+    padding:
+        var(--portal-hero-pad-top)
+        var(--portal-hero-pad-x)
+        var(--portal-hero-pad-bottom);
     border: 1px solid rgba(127,127,127,0.18);
     border-radius: 28px;
     background:
-      linear-gradient(180deg, rgba(0,0,0,0.60), rgba(0,0,0,0.92)),
-      radial-gradient(900px 240px at 20% 0%, rgba(0,217,255,0.08), transparent 60%);
+        linear-gradient(180deg, rgba(0,0,0,0.60), rgba(0,0,0,0.92)),
+        radial-gradient(900px 240px at 20% 0%, rgba(0,217,255,0.08), transparent 60%);
     backdrop-filter: blur(10px);
     -webkit-backdrop-filter: blur(10px);
+    display: grid;
+    row-gap: var(--portal-hero-gap);
     transition:
-      margin-bottom 180ms ease,
-      border-radius 180ms ease;
+        margin-bottom 180ms ease,
+        border-radius 180ms ease,
+        padding 180ms ease,
+        row-gap 180ms ease;
   }
 
   .pa-kicker{
-    margin: 0 0 10px;
+    margin: 0;
     font-size: 12px;
     letter-spacing: .08em;
     text-transform: uppercase;
@@ -802,23 +809,33 @@ const translationCount = casIaEntries.length;
   }
 
   .pa-hero h1{
-    margin: 0 0 14px;
-    font-size: clamp(2.2rem, 4vw, 3.15rem);
+    margin: 0;
+    font-size: var(--portal-hero-h1-size);
     line-height: 1.02;
     letter-spacing: -.04em;
     font-weight: 850;
+    transition: font-size 180ms ease;
   }
 
   .pa-intro{
-    max-width: 76ch;
     margin: 0;
-    font-size: 1.04rem;
-    line-height: 1.55;
+    max-width: var(--portal-hero-intro-maxw);
+    font-size: var(--portal-hero-intro-size);
+    line-height: var(--portal-hero-intro-lh);
     opacity: .94;
+    transition:
+        font-size 180ms ease,
+        line-height 180ms ease,
+        max-width 180ms ease,
+        max-height 220ms ease,
+        opacity 180ms ease,
+        margin-top 180ms ease;
   }
 
   .pa-intro + .pa-intro{
-    margin-top: 14px;
+    overflow: hidden;
+    max-height: var(--portal-hero-secondary-max-h);
+    opacity: var(--portal-hero-secondary-opacity);
   }
 
   .pa-section{