fix style gauge container margin top

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

CLAUDE.md

@@ -0,0 +1,52 @@
+# CLAUDE.md
+
+This file provides guidance to Claude Code (claude.ai/code) when working with code in this repository.
+
+## Project overview
+
+Static PHP site for the Index NGO donation/support campaign (`soutenir.index.ngo`). No build step — PHP files are served directly. The site has two language versions: French (`index.php`) and English (`en/index.php`).
+
+## Architecture
+
+### Content flow
+
+All editorial content is managed via a **Kirby CMS** running in a separate repo (`/Users/adrienpayet/Documents/code/en-cours/index/main/`). The static site fetches content from the Kirby API and caches it locally:
+
+```
+Kirby CMS (main repo) → /support-content?lang=fr → includes/cache.php → index.php
+```
+
+- **`includes/config.php`** — API URL, token, cache TTL constants
+- **`includes/cache.php`** — `getContent(lang)` function: serves cache if fresh (<5 min), otherwise fetches from Kirby API via curl, falls back to stale cache
+- **`cache/`** — stores `content.fr.json` and `content.en.json`
+
+### Kirby backend (separate repo)
+
+- **Blueprint**: `/Users/adrienpayet/Documents/code/en-cours/index/main/site/blueprints/pages/support.yml` — defines all editable fields for the support page
+- **API route**: `/Users/adrienpayet/Documents/code/en-cours/index/main/site/config/routes/support-content.php` — builds and returns the JSON response consumed by this site; uses `->inline()` on writer fields
+
+When adding a new dynamic field: add it to the blueprint, expose it in the API route, then consume `$data['fieldName']` in the PHP templates.
+
+### Donation gauge
+
+- **`api/donorbox-proxy.php`** — server-side proxy to Donorbox API (Basic Auth). Paginates through all active plans to get `recurring_donors_count`. Caches result in `api/cache/donorbox_data.json` (5 min).
+- **`assets/js/donorbox-gauge.js`** — calls the proxy, adds `RECURRING_DONORS_OFFSET` to the real count, updates the gauge CSS variable `--pourcent` and the displayed number. Also sets up 5-minute auto-refresh.
+
+`RECURRING_DONORS_OFFSET` is defined at the top of `donorbox-gauge.js` and represents historic/offline supporters added to the live Donorbox count.
+
+### Donation pad
+
+**`assets/js/donation.js`** — IIFE that:
+- Dynamically generates all donation buttons (amounts, after-tax calculations) on `DOMContentLoaded`
+- Contains `TRANSLATIONS` object for FR/EN static strings in the donation pad
+- Generates Donorbox redirect URLs with UTM passthrough
+- Handles monthly/one-off tab switching
+
+Static strings in the donation pad (e.g. "Avec déduction fiscale de 66 %") live in the `TRANSLATIONS` object in this file, not in Kirby.
+
+## Key conventions
+
+- **Writer fields in Kirby**: use `->inline()` in the API route to get inline HTML without block wrappers. For multiline text (e.g. a title with a `<br>`), use a `writer` field with `nodes: false` and `buttons: false` — this preserves line breaks. In the API route, use `->inline()` which converts newlines to `<br>` tags; do **not** use `nl2br()`.
+- **`heroHeading` field**: rendered with `<?= $data['heroHeading'] ?>` (no `htmlspecialchars`) because it contains trusted HTML from the writer field.
+- **Language**: `document.documentElement.lang` drives JS translations. FR page sets `lang="fr"`, EN page sets `lang="en"`.
+- **Cache invalidation**: delete files in `cache/` to force a fresh fetch from Kirby.

api/cache/donorbox_data.json

@@ -1,14 +1,15 @@
 {
-    "total_raised": "35825.53",
-    "goal_amt": "50000.0",
+    "total_raised": "37001.02",
+    "goal_amt": "0.0",
     "currency": "eur",
-    "donations_count": 533,
-    "recurring_donors_count": 56,
-    "campaign_name": "Soutenez Index avant le 31 d\u00e9cembre 2025 !",
-    "updated_at": "2026-03-06T09:53:03+00:00",
+    "donations_count": 621,
+    "recurring_donors_count": 76,
+    "campaign_name": "Rejoignez les Soutiens d'Index",
+    "updated_at": "2026-04-22T08:38:57+00:00",
     "plans_detail": {
-        "cancelled|monthly": 36,
-        "active|monthly": 56,
-        "failed|monthly": 19
+        "active|monthly": 76,
+        "cancelled|monthly": 37,
+        "failed|monthly": 20,
+        "paused|monthly": 1
     }
 }

assets/css/components/_gauge.scss

@@ -1,3 +1,7 @@
+.hero-heading p {
+  margin: 0 !important;
+}
+
 .gauge-container {
   width: 100%;
   display: flex;
@@ -8,6 +12,7 @@
   top: calc(var(--spacing) * 0.25);
 
   padding: 0 calc(var(--spacing) * 0.5);
+  padding-top: calc(var(--spacing) * 1);
 }
 
 #gauge {
@@ -68,11 +73,10 @@
   }
 }
 
-
 @media #{$small-up} {
   #gauge {
     --gauge-h: 18px;
-    
+
     border: 2px solid var(--color-txt);
     &::before {
       height: calc(var(--gauge-h) - 4px);

assets/css/components/_text.scss

@@ -1,68 +1,65 @@
-[data-template="subscription-newsletter"],
-[data-template="thanks"],
-[data-template="support"],
-[data-template="store"]{
+[data-template='subscription-newsletter'],
+[data-template='thanks'],
+[data-template='support'],
+[data-template='store'] {
+  .hero-heading p {
+    font-family: var(--title);
+    font-size: var(--fs-big);
+    font-weight: var(--fw-bold);
+    line-height: 1.1;
+    text-align: center;
+    margin: calc(var(--spacing) * 1) 0;
 
-    .hero-heading{
-        font-family: var(--title);
-        font-size: var(--fs-big);
-        font-weight: var(--fw-bold);
-        line-height: 1.1;
-        text-align: center;
-        margin: calc(var(--spacing)*1) 0; 
- 
-        strong{
-            font-weight: var(--fw-bolf);
-            color: var(--color-accent);
-        }
-
-        .link-don{
-            display: block;
-            color: var(--color-accent);
-            text-decoration: none;
-            // &::after{
-            //     content: ' ↗';
-            //     font-size: 0.8em;
-            // }
-            &:hover{
-                text-decoration: underline 2px;
-                text-underline-offset: 4px;
-            
-            }
-        }
+    strong {
+      font-weight: var(--fw-bolf);
+      color: var(--color-accent);
     }
 
-    .subheading{
-        font-size: var(--fs-medium);
-        font-weight: var(--fw-medium);
-        line-height: 1.1; 
-        text-align: center;
-        margin: calc(var(--spacing)*1) 0; 
-        @media #{$small}{
-            text-align: center; 
-            margin: var(--spacing) 0;
-        }
+    .link-don {
+      display: block;
+      color: var(--color-accent);
+      text-decoration: none;
+      // &::after{
+      //     content: ' ↗';
+      //     font-size: 0.8em;
+      // }
+      &:hover {
+        text-decoration: underline 2px;
+        text-underline-offset: 4px;
+      }
     }
+  }
 
-    .text-details{
-        font-size: var(--fs-small);
-        margin-bottom: 0.5em;
-        color: var(--grey-400);
+  .subheading {
+    font-size: var(--fs-medium);
+    font-weight: var(--fw-medium);
+    line-height: 1.1;
+    text-align: center;
+    margin: calc(var(--spacing) * 1) 0;
+    @media #{$small} {
+      text-align: center;
+      margin: var(--spacing) 0;
     }
+  }
 
-    .section-heading{
-        font-size: var(--fs-normal);
-        font-weight: var(--fw-medium);
-        line-height: 1;
-        text-align: center;
-        margin-top: calc(var(--spacing)*0.5); 
-        margin-bottom: calc(var(--spacing)*1); 
-    }
+  .text-details {
+    font-size: var(--fs-small);
+    margin-bottom: 0.5em;
+    color: var(--grey-400);
+  }
 
-    ul, ol{
-        margin-left: 3ch;
-        margin-bottom: 0.5em;
-    }
+  .section-heading {
+    font-size: var(--fs-normal);
+    font-weight: var(--fw-medium);
+    line-height: 1;
+    text-align: center;
+    margin-top: calc(var(--spacing) * 0.5);
+    margin-bottom: calc(var(--spacing) * 1);
+  }
 
+  ul,
+  ol {
+    margin-left: 3ch;
+    margin-bottom: 0.5em;
+  }
 }
- 

assets/css/template/support/_layout.scss

@@ -1,177 +1,159 @@
-[data-template="support"]{
+[data-template='support'] {
+  section {
+    display: flex;
+    flex-direction: column;
+    margin: 0 auto;
+    padding-bottom: calc(var(--spacing) * 0.75);
+    margin-bottom: calc(var(--spacing) * 0.75);
+    border-bottom: var(--border-light);
+  }
 
-    section{
-        display: flex;
-        flex-direction: column;
-        margin: 0 auto;
-        padding-bottom: calc(var(--spacing)*0.75);
-        margin-bottom: calc(var(--spacing)*0.75);
-        border-bottom: var(--border-light);
+  #section__hero {
+    margin-top: calc(var(--spacing) * 1);
+    display: block;
+  }
+
+  #section__questions {
+    border-bottom: none;
+  }
+
+  #section__donation:target {
+    padding-top: calc(var(--header-h) * 1.25);
+  }
+
+  #section__video {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+
+    .video-container {
+      display: flex;
+    }
+    video {
+      width: 100%;
+      border: 1px solid var(--grey-800);
+      max-height: 90vh;
+      display: flex;
+    }
+  }
+
+  @media #{$medium-up} {
+    main {
+      display: grid;
+      grid-template-columns: 50% 50%;
+      grid-template-rows: repeat(4, auto);
+      max-width: 1200px;
+      margin: 0 auto;
+      padding-bottom: 0;
     }
 
-    #section__hero{
-        margin-top: calc(var(--spacing)*1);
-        display: block;
+    #section__donation {
+      padding-top: calc(var(--spacing) * 1);
     }
 
-    #section__questions{
-        border-bottom: none;
+    #section__donation,
+    #section__comments {
+      border: none;
     }
 
-    #section__donation:target{
-        padding-top: calc(var(--header-h)*1.25);
+    #section__baseline {
+      padding: calc(var(--spacing) * 0.5) 0;
     }
 
-    #section__video{
-        display: flex;
-        flex-direction: column;
-        align-items: center;
+    .col-left,
+    .col-right {
+      padding-top: calc(var(--spacing) * 1);
+    }
+    .col-left {
+      grid-column: 1;
+      grid-row: 1/5;
+    }
+    .col-right {
+      position: sticky;
+      top: calc(var(--spacing) * 2.5);
+      grid-column: 2;
+      grid-row: 1;
+      overflow: hidden;
+    }
+  }
 
-        .video-container{
-            display: flex;
-        } 
-        video{
-            width: 100%;
-            border: 1px solid var(--grey-800);
-            max-height: 90vh;
-            display: flex;
-        }
+  @media #{$medium} {
+    main {
+      display: flex;
+      flex-direction: column;
+      align-items: stretch;
+      justify-content: stretch;
+      max-width: 600px;
+      margin: 0 auto;
     }
 
-
-    @media #{$medium-up}{
-
-        main{
-            display: grid;
-            grid-template-columns: 50% 50%;
-            grid-template-rows: repeat(4, auto);
-            max-width: 1200px;
-            margin: 0 auto;
-            padding-bottom: 0;
-        }
-
-        #section__donation{
-            padding-top: calc(var(--spacing)*1);
-        }
-
-        #section__donation,
-        #section__comments{
-            border: none;
-        }
-
-        #section__baseline{
-            padding: calc(var(--spacing)*0.5) 0;
-        }
-
-        .gauge-container{
-            padding-top: calc(var(--spacing)*1);
-        }
-
-        .col-left,
-        .col-right{
-            padding-top: calc(var(--spacing)*1);
-        }
-        .col-left{
-            grid-column: 1;
-            grid-row: 1/5;
-        }
-        .col-right{
-            position: sticky;
-            top: calc(var(--spacing)*2.5);
-            grid-column: 2;
-            grid-row: 1;
-            overflow: hidden;
-        }
-
+    section {
+      width: 100%;
     }
 
-
-    @media #{$medium}{
-        main{
-            display: flex;
-            flex-direction: column;
-            align-items: stretch;
-            justify-content: stretch;  
-            max-width: 600px;
-            margin: 0 auto;
-        }
-
-        section{
-            width: 100%;
-        }
-        
-
-        .col-left,
-        .col-right{
-            display: contents;
-        }
-
-        #section__hero{
-            order: 1;  
-        }
-        #section__donation{
-            order: 2;  
-        }
-        #section__baseline{
-            order: 3;  
-        }
-        #section__video{
-            order: 4;  
-        }
-        #section__comments{
-            order: 5;  
-        }
-        #section__questions{
-            order: 6;  
-            margin-bottom: calc(var(--spacing)*2);
-       
-        }
-
+    .col-left,
+    .col-right {
+      display: contents;
     }
 
+    #section__hero {
+      order: 1;
+    }
+    #section__donation {
+      order: 2;
+    }
+    #section__baseline {
+      order: 3;
+    }
+    #section__video {
+      order: 4;
+    }
+    #section__comments {
+      order: 5;
+    }
+    #section__questions {
+      order: 6;
+      margin-bottom: calc(var(--spacing) * 2);
+    }
+  }
 
-    @media #{$paysage}{
-        .col-left,
-        .col-right{
-            display: contents;
-        }
-
-        section{
-            width: 100%;
-        }
-
-        #section__donation{
-            grid-row: 1; 
-            grid-column: 2; 
-            position: sticky;
-            top: calc(var(--spacing)*3.75);
-        }
-        
-        #section__hero{
-            grid-row: 1; 
-            grid-column: 1;
-        }
-        #section__baseline{
-            grid-row: 2; 
-            grid-column: 1;
-        }
-        #section__video{
-            grid-row: 3; 
-            grid-column: 1;
-        }
-        #section__comments{
-            grid-row: 4; 
-            grid-column: 1; 
-            border-bottom: var(--border-light);
-
-        }
-        #section__questions{
-            grid-row: 5; 
-            grid-column: 1;
-        }
-
+  @media #{$paysage} {
+    .col-left,
+    .col-right {
+      display: contents;
     }
 
+    section {
+      width: 100%;
+    }
 
+    #section__donation {
+      grid-row: 1;
+      grid-column: 2;
+      position: sticky;
+      top: calc(var(--spacing) * 3.75);
+    }
 
-}
+    #section__hero {
+      grid-row: 1;
+      grid-column: 1;
+    }
+    #section__baseline {
+      grid-row: 2;
+      grid-column: 1;
+    }
+    #section__video {
+      grid-row: 3;
+      grid-column: 1;
+    }
+    #section__comments {
+      grid-row: 4;
+      grid-column: 1;
+      border-bottom: var(--border-light);
+    }
+    #section__questions {
+      grid-row: 5;
+      grid-column: 1;
+    }
+  }
+}

assets/js/donation.js

@@ -14,11 +14,13 @@
       afterTax: 'Soit {amount} € après impôts',
       perMonth: '€/mois',
       withTaxReduction: 'Avec 66 % de déduction fiscale',
+      chooseAmount: 'Choisissez votre montant',
     },
     en: {
       afterTax: 'That is {amount} € after tax',
       perMonth: '€/month',
       withTaxReduction: 'With 66 % tax deduction',
+      chooseAmount: 'Choose your amount',
     },
   };
 
@@ -115,6 +117,10 @@
           window.open(generateDonorboxUrl(amount, false), '_blank');
         });
       } else {
+        button.innerHTML = `
+          <p class="bold">${translate('chooseAmount')}</p>
+          <p class="small">${translate('withTaxReduction')}</p>
+        `;
         button.addEventListener('click', () => {
           window.open(generateDonorboxUrl(null, false), '_blank');
         });
@@ -144,6 +150,10 @@
           window.open(generateDonorboxUrl(amount, true), '_blank');
         });
       } else {
+        button.innerHTML = `
+          <p class="bold">${translate('chooseAmount')}</p>
+          <p class="small">${translate('withTaxReduction')}</p>
+        `;
         button.addEventListener('click', () => {
           window.open(generateDonorboxUrl(null, true), '_blank');
         });

assets/js/donorbox-gauge.js

@@ -2,7 +2,7 @@ const DONORBOX_CONFIG = {
   proxyUrl: '/api/donorbox-proxy.php',
 };
 
-const RECURRING_DONORS_OFFSET = 98;
+const RECURRING_DONORS_OFFSET = 62;
 const GOAL_SUPPORTERS = 500;
 
 async function fetchDonorboxData() {

backup/260311/assets/css/style.css

@@ -1,7 +1,7 @@
 @charset "UTF-8";
 :root {
-  --font: "Executive", Arial, sans-serif;
-  --title: "System", Arial, sans-serif;
+  --font: 'Executive', Arial, sans-serif;
+  --title: 'System', Arial, sans-serif;
   --fs-x-small: 10px;
   --fs-small: 12px;
   --fs-normal: 16px;
@@ -9,6 +9,14 @@
   --fs-big: 30px;
   --fs-x-big: 38px;
   --fs-button-bold: 22px;
+}
+@media screen and (max-width: 720px) {
+  :root {
+    --fs-medium: 20px;
+    --fs-big: 26px;
+  }
+}
+:root {
   --leading-tight: 1;
   --leading-normal: 1.2;
   --fw-normal: 400;
@@ -34,12 +42,6 @@
   --h-block: 30px;
   --curve: cubic-bezier(0.175, 0.885, 0.32, 1.275);
 }
-@media screen and (max-width: 720px) {
-  :root {
-    --fs-medium: 20px;
-    --fs-big: 26px;
-  }
-}
 
 * {
   margin: 0;
@@ -489,15 +491,17 @@ main {
   z-index: 900;
   width: calc(100vw - var(--padding-body) * 2);
   height: var(--header-h);
-  background-color: var(--color-bg);
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
 }
 #site-header.is-shrinked {
   height: var(--header-h-shrinked);
   border-bottom: var(--border-light);
 }
+#site-header {
+  background-color: var(--color-bg);
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
 #site-header .site-title {
   display: flex;
   width: 120px;
@@ -633,11 +637,13 @@ main {
 @media screen and (max-width: 720px) {
   #site-footer .footer__mentions {
     padding-top: calc(var(--spacing) * 1);
-    text-align: center;
   }
   #site-footer .footer__mentions p {
     margin-top: 0;
   }
+  #site-footer .footer__mentions {
+    text-align: center;
+  }
 }
 
 [data-template=support] section {
@@ -791,7 +797,6 @@ main {
   display: grid;
   grid-template-columns: 1fr 1fr;
   grid-gap: calc(var(--padding-body) * 0.75);
-  display: none;
 }
 @media screen and (min-width: 1080px) {
   #section__donation .btn--donation__container {
@@ -807,6 +812,9 @@ main {
 #section__donation .btn--donation__container .btn--donation__grow-2 {
   grid-column: span 2;
 }
+#section__donation .btn--donation__container {
+  display: none;
+}
 #section__donation .btn--donation__container.is-selected {
   display: grid;
 }
@@ -933,12 +941,14 @@ main {
   gap: 1ch;
   font-weight: var(--fw-medium);
   text-decoration: none;
-  cursor: pointer;
 }
 #section__video .btn__deploy:hover {
   background-color: var(--grey-800);
   border-color: var(--color-txt);
 }
+#section__video .btn__deploy {
+  cursor: pointer;
+}
 #section__video .btn__deploy svg {
   fill: var(--color-txt);
   width: 10px;

en/index.php

@@ -55,7 +55,7 @@ $data = getContent('en');
     <main>
       <div class="col-left">
         <section id="section__hero">
-          <p class="hero-heading"><?= $data['heroHeading'] ?? '' ?></p>
+          <div class="hero-heading"><?= $data['heroHeading'] ?? '' ?></div>
 
           <div class="gauge-container">
             <div id="gauge" style="--pourcent: 0%"></div>
@@ -69,10 +69,12 @@ $data = getContent('en');
             </div>
           </div>
 
-          <p class="hero-heading">
-            <?= htmlspecialchars($data['heroObjectiveLabel'] ?? '') ?>
-            <?php if (!empty($data['heroObjectiveDate'])): ?><br /><strong><?= htmlspecialchars($data['heroObjectiveDate']) ?></strong><?php endif; ?>
-          </p>
+          <div class="hero-heading">
+            <p>
+              <?= htmlspecialchars($data['subtitleBlack'] ?? '') ?>
+              <?php if (!empty($data['subtitleGreen'])): ?><br /><strong><?= htmlspecialchars($data['subtitleGreen']) ?></strong><?php endif; ?>
+            </p>
+          </div>
         </section>
 
         <section id="section__baseline">

index.php

@@ -55,7 +55,7 @@ $data = getContent('fr');
     <main>
       <div class="col-left">
         <section id="section__hero">
-          <p class="hero-heading"><?= $data['heroHeading'] ?? '' ?></p>
+          <div class="hero-heading"><?= $data['heroHeading'] ?? '' ?></div>
 
           <div class="gauge-container">
             <div id="gauge" style="--pourcent: 0%"></div>
@@ -69,10 +69,12 @@ $data = getContent('fr');
             </div>
           </div>
 
-          <p class="hero-heading">
-            <?= htmlspecialchars($data['heroObjectiveLabel'] ?? '') ?>
-            <?php if (!empty($data['heroObjectiveDate'])): ?><br /><strong><?= htmlspecialchars($data['heroObjectiveDate']) ?></strong><?php endif; ?>
-          </p>
+          <div class="hero-heading">
+            <p>
+              <?= htmlspecialchars($data['subtitleBlack'] ?? '') ?>
+              <?php if (!empty($data['subtitleGreen'])): ?><br /><strong><?= htmlspecialchars($data['subtitleGreen']) ?></strong><?php endif; ?>
+            </p>
+          </div>
         </section>
 
         <section id="section__baseline">
@@ -131,7 +133,7 @@ $data = getContent('fr');
       <div class="col-right">
         <section id="section__donation">
           <nav class="nav--tabs">
-            <button class="nav--tabs__btn is-selected" data-tab="monthly">Je donne tous les mois</button>
+            <button class="nav--tabs__btn is-selected" data-tab="monthly">Je deviens Soutien</button>
             <button class="nav--tabs__btn" data-tab="one-off">Je donne une fois</button>
           </nav>
 

merci/index.php

@@ -45,7 +45,7 @@ $data = getContent('fr');
     </header>
 
     <main>
-      <p class="hero-heading"><?= htmlspecialchars($data['thanksHeading'] ?? 'Un grand merci !') ?></p>
+      <div class="hero-heading"><p><?= htmlspecialchars($data['thanksHeading'] ?? 'Un grand merci !') ?></p></div>
 
       <?= $data['thanksText'] ?? '' ?>
 

thanks/index.php

@@ -45,7 +45,7 @@ $data = getContent('en');
     </header>
 
     <main>
-      <p class="hero-heading"><?= htmlspecialchars($data['thanksHeading'] ?? 'Thank you!') ?></p>
+      <div class="hero-heading"><p><?= htmlspecialchars($data['thanksHeading'] ?? 'Thank you!') ?></p></div>
 
       <?= $data['thanksText'] ?? '' ?>