From 5d23fa4a1fd126dbb5b8349aadcba68f374b0a02 Mon Sep 17 00:00:00 2001
From: Pierre-Olivier Mercier <nemunaire@nemunai.re>
Date: Sat, 13 Jun 2026 16:07:48 +0900
Subject: [PATCH] Make usage footer band and buttons theme-reactive

The closing "About us" band hardcoded a light plum background and used
btn-outline-dark / text-hilight, none of which flip with the theme, so
they were unreadable in dark mode. Drive the band, its buttons, and the
highlight from scoped tokens, and add a theme-aware .btn-outline-soft.
---
 layouts/partials/usage_footer.html |  8 ++--
 static/css/custom.css              | 73 ++++++++++++++++++++++++++++++
 2 files changed, 77 insertions(+), 4 deletions(-)

diff --git a/layouts/partials/usage_footer.html b/layouts/partials/usage_footer.html
index 2e86415..82ac91d 100644
--- a/layouts/partials/usage_footer.html
+++ b/layouts/partials/usage_footer.html
@@ -16,7 +16,7 @@
         <a class="btn btn-primary mt-2 mx-3" data-umami-event="cta-{{ .Page.File.ContentBaseName }}-tryit" data-umami-event-lang="{{ .Page.Language.Lang }}" href="{{ .Site.Params.tryit }}">
           {{ i18n "tryit" }} &#187;
         </a>
-        <a class="btn btn-outline-dark mt-2 mx-3" data-umami-event="cta-{{ .Page.File.ContentBaseName }}-downloads" data-umami-event-lang="{{ .Page.Language.Lang }}" href="/#downloads">
+        <a class="btn btn-outline-soft mt-2 mx-3" data-umami-event="cta-{{ .Page.File.ContentBaseName }}-downloads" data-umami-event-lang="{{ .Page.Language.Lang }}" href="/#downloads">
           {{ i18n "downloadit" }} &#187;
         </a>
       </p>
@@ -56,7 +56,7 @@
   </div>
 </div>
 
-<div class="container-fluid text-center py-5" style="background: var(--hd-plum-100)">
+<div class="container-fluid text-center py-5 footer-us-band">
   <div class="container my-4">
     <div class="row">
       <div class="order-0 col-md-5 offset-md-1 align-self-center text-center">
@@ -68,9 +68,9 @@
         </h4>
 
         <p>
-          {{ i18n "footer-us-text-1" }}<span class="text-dark text-hilight px-1">{{ i18n "footer-us-text-hilight" }}</span>{{ i18n "footer-us-text-2" }}
+          {{ i18n "footer-us-text-1" }}<span class="band-hilight px-1">{{ i18n "footer-us-text-hilight" }}</span>{{ i18n "footer-us-text-2" }}
         </p>
-        <a href="{{ i18n "footer-us-button-link" }}" class="btn btn-outline-dark" data-umami-event="cta-{{ .Page.File.ContentBaseName }}-about">
+        <a href="{{ i18n "footer-us-button-link" }}" class="btn band-btn" data-umami-event="cta-{{ .Page.File.ContentBaseName }}-about">
           {{ i18n "footer-us-button" }}
         </a>
       </div>
diff --git a/static/css/custom.css b/static/css/custom.css
index 8b61f05..c1f3acf 100644
--- a/static/css/custom.css
+++ b/static/css/custom.css
@@ -773,6 +773,79 @@ img {
     max-width: 700px;
 }
 
+/* "About us" closing band.
+   The plum-* scale is only defined for the light theme, so a hardcoded
+   var(--hd-plum-100) background stayed pale lavender in dark mode while
+   btn-outline-dark / text-dark inverted to light and became unreadable.
+   Drive every color from scoped band-* tokens that flip with the theme. */
+.footer-us-band {
+    --band-bg: linear-gradient(160deg, var(--hd-plum-50) 0%, var(--hd-plum-100) 100%);
+    --band-fg: var(--hd-plum-700);
+    --band-fg-strong: var(--hd-plum-800);
+    --band-btn-fg: var(--hd-plum-700);
+    --band-btn-border: var(--hd-plum-300);
+    --band-btn-hover-bg: var(--hd-plum-700);
+    --band-btn-hover-fg: var(--hd-plum-50);
+    --band-hilight-bg: var(--hd-plum-300);
+    --band-hilight-fg: var(--hd-plum-900);
+    background: var(--band-bg);
+    color: var(--band-fg);
+}
+
+[data-bs-theme="dark"] .footer-us-band {
+    --band-bg: linear-gradient(160deg, #1c0d26 0%, var(--hd-plum-900) 100%);
+    --band-fg: var(--hd-plum-200);
+    --band-fg-strong: var(--hd-plum-50);
+    --band-btn-fg: var(--hd-plum-100);
+    --band-btn-border: var(--hd-plum-400);
+    --band-btn-hover-bg: var(--hd-plum-200);
+    --band-btn-hover-fg: var(--hd-plum-900);
+    --band-hilight-bg: var(--hd-plum-600);
+    --band-hilight-fg: var(--hd-plum-50);
+}
+
+.footer-us-band h3,
+.footer-us-band h4 {
+    color: var(--band-fg-strong);
+}
+
+.footer-us-band .band-hilight {
+    background-color: var(--band-hilight-bg);
+    color: var(--band-hilight-fg);
+    border-radius: var(--hd-radius-sm, 4px);
+}
+
+.footer-us-band .band-btn {
+    color: var(--band-btn-fg);
+    border: 1px solid var(--band-btn-border);
+    background-color: transparent;
+    transition: background-color 0.15s ease, color 0.15s ease,
+        border-color 0.15s ease;
+}
+.footer-us-band .band-btn:hover,
+.footer-us-band .band-btn:focus-visible {
+    background-color: var(--band-btn-hover-bg);
+    color: var(--band-btn-hover-fg);
+    border-color: var(--band-btn-hover-bg);
+}
+
+/* Theme-aware neutral outline button.
+   Bootstrap's .btn-outline-dark is compiled with a fixed dark gray, so it
+   turns invisible on the dark body in dark mode. This flips with the theme. */
+.btn-outline-soft {
+    color: var(--hd-fg-1);
+    border: 1px solid var(--hd-border-2);
+    background-color: transparent;
+    transition: background-color 0.15s ease, color 0.15s ease,
+        border-color 0.15s ease;
+}
+.btn-outline-soft:hover,
+.btn-outline-soft:focus-visible {
+    color: var(--hd-fg-1);
+    background-color: var(--hd-bg-inset);
+    border-color: var(--hd-border-3);
+}
+
 footer {
     border-top: 3px solid var(--hd-plum-400);
     /* Footer is always a dark band (all child text is hardcoded white),