From 4314888ece6b4de534e2e17bd8eac01e76c39f9c Mon Sep 17 00:00:00 2001
From: Mateo <mateo.lostanlen@gmail.com>
Date: Thu, 28 May 2026 10:26:14 -0700
Subject: [PATCH] feat: add Benevity donation button to navbar

Adds a translated "Benevity donation" button in the top navbar next to
the language selector, linking to the project's Benevity page. Button
background is darkened to meet WCAG AA contrast against white text, with
responsive sizing so the navbar does not overflow on small phones.

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
---
 _config.yml        |  4 ++++
 _includes/nav.html | 11 ++++++++++
 css/main.scss      | 50 ++++++++++++++++++++++++++++++++++++++++++++--
 3 files changed, 63 insertions(+), 2 deletions(-)

diff --git a/_config.yml b/_config.yml
index 767c8c0..88ad26f 100644
--- a/_config.yml
+++ b/_config.yml
@@ -160,6 +160,7 @@ t:
       moreInfo: "En savoir plus"
       contactUs: "Nous contacter"
       submit: "Envoyer"
+      donate: "Don Benevity"
     header:
       title: "Détection précoce des départs de feux"
       subtitle: "Pyronear est un projet open-source au service du bien commun"
@@ -346,6 +347,7 @@ t:
       moreInfo: "More information"
       contactUs: "Contact us"
       submit: "Submit"
+      donate: "Benevity donation"
     header:
       title: "Early detection of wildfires"
       subtitle: "Pyronear is an open-source project for the common good"
@@ -528,6 +530,7 @@ t:
       moreInfo: "Més informació"
       contactUs: "Contacta amb nosaltres"
       submit: "Enviar"
+      donate: "Donatiu Benevity"
     header:
       title: "Detecció d'incendis forestals"
       subtitle: "Pyronear és un projecte de codi obert per al bé comú"
@@ -709,6 +712,7 @@ t:
       moreInfo: "Más información"
       contactUs: "Contacta con nosotros"
       submit: "Enviar"
+      donate: "Donación Benevity"
     header:
       title: "Detección temprana de incendios forestales"
       subtitle: "Pyronear es un proyecto de código abierto para el bien común"
diff --git a/_includes/nav.html b/_includes/nav.html
index 5a55a57..c66d3cf 100644
--- a/_includes/nav.html
+++ b/_includes/nav.html
@@ -10,6 +10,16 @@
         />
       </a>
       
+      <!-- Right-side actions: donation button + language selector -->
+      <div class="nav-right">
+        <!-- Benevity donation button (only donation link on the site) -->
+        <a
+          href="https://causes.benevity.org/projects/728262"
+          class="nav-donate-btn"
+          target="_blank"
+          rel="noopener noreferrer"
+        >{{ site.t.[site.lang].buttons.donate }}</a>
+
       <!-- Language selector - Keep visible, even on mobile to avoid issue with non clickable area -->
       <div class="nav-lang-wrapper">
         <div class="nav-item nav-lang">
@@ -30,6 +40,7 @@
           </ul>
         </div>
       </div>
+      </div>
     </div>
 
     <!-- Add base-url meta for JavaScript -->
diff --git a/css/main.scss b/css/main.scss
index 7e3db25..019173a 100644
--- a/css/main.scss
+++ b/css/main.scss
@@ -85,10 +85,41 @@ h1, h2, h3, h4, h5, h6 { font-family: 'Open Sans', 'Helvetica Neue', Arial, sans
 
 .grid-item { display: flex; justify-content: center; align-items: stretch; }
 
+/* Right-side navbar actions: donation button + language selector */
+.nav-right {
+    margin-left: auto; /* Push the whole group to the right */
+    display: flex;
+    align-items: center;
+    gap: 16px;
+    height: 50px;
+}
+
+/* Benevity donation button */
+.nav-donate-btn {
+    display: inline-flex;
+    align-items: center;
+    background: darken($theme-secondary, 25%); /* Darkened to meet WCAG AA contrast with #fff text */
+    color: #fff;
+    font-weight: 700;
+    text-transform: uppercase;
+    font-size: 13px;
+    letter-spacing: 0.5px;
+    padding: 8px 16px;
+    border-radius: 4px;
+    text-decoration: none;
+    white-space: nowrap;
+    transition: background 0.2s ease;
+}
+.nav-donate-btn:hover,
+.nav-donate-btn:focus {
+    background: darken($theme-secondary, 33%);
+    color: #fff;
+    text-decoration: none;
+}
+
 /* Language dropdown styles (top-right) */
 /* Wrapper to position language selector in navbar header */
 .nav-lang-wrapper {
-    margin-left: auto; /* Push to the right */
     display: flex;
     align-items: center;
     height: 50px;
@@ -158,10 +189,25 @@ h1, h2, h3, h4, h5, h6 { font-family: 'Open Sans', 'Helvetica Neue', Arial, sans
 
 /* Responsive adjustments for mobile/tablet */
 @media (max-width: 767px) {
-	.lang-toggle .lang-name { 
+	.lang-toggle .lang-name {
 		display: inline; /* Always show language name on mobile */
 		font-size: 14px; /* Slightly smaller on mobile */
 	}
+	.nav-right { gap: 8px; }
+	.nav-donate-btn {
+		font-size: 11px;
+		padding: 6px 10px;
+	}
+}
+
+/* Very small phones: shrink further so logo + donate + lang selector don't overflow */
+@media (max-width: 480px) {
+	.nav-right { gap: 6px; }
+	.nav-donate-btn {
+		font-size: 10px;
+		padding: 5px 8px;
+		letter-spacing: 0;
+	}
 }
 /* Improve vertical alignment of the language selector in the navbar */
 .navbar-nav {