Redesign breadcrumbs with brand-tinted band and persona pills

Drive the navbar text from the theme-reactive --hd-fg-* vars instead of
Bootstrap's baked-in dark color, so it flips light when the background
goes dark. Also fade the beginscroll gradient to --hd-bg-canvas rather
than a hardcoded white.

layouts/partials/breadcrumbs.html

@@ -1,6 +1,14 @@
-<nav aria-label="breadcrumb" style="background-color: #e9ecef; padding-top: 64px">
-    <ol class="breadcrumb container">
-        <li class="breadcrumb-item"><a href="../">{{ i18n "home" }}</a></li>
-        <li class="breadcrumb-item active" aria-current="page">{{ .Title }}</li>
-    </ol>
+<nav class="hd-breadcrumb" aria-label="breadcrumb">
+    <div class="container">
+        <ol class="hd-breadcrumb__trail">
+            <li>
+                <a href="/{{ .Site.Language.Lang }}/">
+                    <i class="bi bi-house-door-fill"></i> {{ i18n "home" }}
+                </a>
+            </li>
+            <li>
+                <span class="current" aria-current="page">{{ .Title }}</span>
+            </li>
+        </ol>
+    </div>
 </nav>

layouts/partials/breadcrumbs_usage.html

@@ -1,14 +1,36 @@
-<nav aria-label="breadcrumb" style="background-color: #e9ecef; padding-top: 64px">
-    <div class="container d-flex gap-1">
-        <div class="align-self-center">
-            {{ i18n "usage-discover-pre" }} <span style="font-family: var(--hd-font-brand)">happy<strong>Domain</strong></span> {{ i18n "usage-discover-post" }}
-        </div>
-        <ol class="breadcrumb mb-0">
-            <li class="breadcrumb-item"><a href="{{ ref . "/use-happyDomain/freelance" }}">{{ i18n "freelance" }}</a></li>
-            <li class="breadcrumb-item"><a href="{{ ref . "/use-happyDomain/sysadmin" }}">{{ i18n "sysadmin" }}</a></li>
-            <li class="breadcrumb-item"><a href="{{ ref . "/use-happyDomain/devops" }}">{{ i18n "devops" }}</a></li>
-            <li class="breadcrumb-item"><a href="{{ ref . "/use-happyDomain/cio" }}">{{ i18n "cio" }}</a></li>
-            <li class="breadcrumb-item"><a href="{{ ref . "/use-happyDomain/geek" }}">{{ i18n "geek" }}</a></li>
-        </ol>
+<nav class="hd-breadcrumb hd-breadcrumb--usage" aria-label="breadcrumb">
+    <div class="hd-breadcrumb__row container">
+        <p class="hd-breadcrumb__lead">
+            {{ i18n "usage-discover-pre" }}
+            <span class="brand">happy<strong>Domain</strong></span>
+            {{ i18n "usage-discover-post" }}
+        </p>
+        <ul class="hd-breadcrumb__personas">
+            <li>
+                <a href="{{ ref . "/use-happyDomain/freelance" }}">
+                    <i class="bi bi-person-workspace"></i> {{ i18n "freelance" }}
+                </a>
+            </li>
+            <li>
+                <a href="{{ ref . "/use-happyDomain/sysadmin" }}">
+                    <i class="bi bi-hdd-rack"></i> {{ i18n "sysadmin" }}
+                </a>
+            </li>
+            <li>
+                <a href="{{ ref . "/use-happyDomain/devops" }}">
+                    <i class="bi bi-infinity"></i> {{ i18n "devops" }}
+                </a>
+            </li>
+            <li>
+                <a href="{{ ref . "/use-happyDomain/cio" }}">
+                    <i class="bi bi-building"></i> {{ i18n "cio" }}
+                </a>
+            </li>
+            <li>
+                <a href="{{ ref . "/use-happyDomain/geek" }}">
+                    <i class="bi bi-controller"></i> {{ i18n "geek" }}
+                </a>
+            </li>
+        </ul>
     </div>
 </nav>

layouts/partials/footer.html

@@ -1,4 +1,4 @@
-<footer class="pt-5 pb-3 bg-dark text-light">
+<footer class="pt-5 pb-3">
   <div class="container">
     <div class="row row-cols-1 row-cols-md-2 row-cols-lg-5 g-4 mb-4">
       <div class="col footer-brand-col">
@@ -33,11 +33,11 @@
       <div class="col">
         <h4 class="footer-heading">{{ i18n "footer-product" }}</h4>
         <ul class="footer-links">
-          <li><a href="#features">{{ i18n "footer-happydomain-features" }}</a></li>
-          <li><a href="#discover">{{ i18n "discover-title" }}</a></li>
+          <li><a href="/{{ .Site.Language.Lang }}/#features">{{ i18n "footer-happydomain-features" }}</a></li>
+          <li><a href="/{{ .Site.Language.Lang }}/#discover">{{ i18n "discover-title" }}</a></li>
           <li><a href="https://try.happydomain.org/" data-umami-event="footer-tryit">{{ i18n "tryit" }}</a></li>
           <!--li><a href="#">{{ i18n "footer-happydomain-testimonials" }}</a></li-->
-          <li><a href="#downloads">{{ i18n "footer-happydomain-downloads" }}</a></li>
+          <li><a href="/{{ .Site.Language.Lang }}/#downloads">{{ i18n "footer-happydomain-downloads" }}</a></li>
           <!--li><a href="#">{{ i18n "footer-happydomain-prices" }}</a></li-->
         </ul>
       </div>

layouts/partials/nav.html

@@ -38,9 +38,9 @@
                     </a>
                     <div class="dropdown-menu" aria-labelledby="navbarDropdown">
                         {{ range .Children }}
-                        <a href="{{ .URL }}" class="dropdown-item"
-                            >{{ .Name }}</a
-                        >
+                        <a href="{{ .URL }}" class="dropdown-item">
+                            {{ .Name }}
+                        </a>
                         {{ end }}
                     </div>
                     {{ else }}

static/css/custom.css

@@ -61,6 +61,15 @@
 }
 
 nav.navbar {
+    /* Bootstrap bakes the navbar text to a fixed dark color, so it stays dark
+       on the dark background in dark mode. Drive it from the theme-reactive
+       --hd-fg-* vars so the text flips light when the background goes dark. */
+    --bs-navbar-color: var(--hd-fg-2);
+    --bs-navbar-hover-color: var(--hd-fg-1);
+    --bs-navbar-active-color: var(--hd-fg-1);
+    --bs-navbar-brand-color: var(--hd-fg-1);
+    --bs-navbar-brand-hover-color: var(--hd-fg-1);
+    color: var(--hd-fg-2);
     background: var(--hd-bg-canvas);
     box-shadow: 0 0px 3px 0 var(--hd-accent);
     border-bottom: 1px solid var(--hd-accent);
@@ -69,7 +78,11 @@ nav.navbar {
 }
 nav.navbar.beginscroll {
     background:
-        linear-gradient(90deg, var(--hd-accent-subtle) 0%, white 100%),
+        linear-gradient(
+            90deg,
+            var(--hd-accent-subtle) 0%,
+            var(--hd-bg-canvas) 100%
+        ),
         var(--hd-accent-subtle);
     box-shadow: none;
     border-bottom: none;
@@ -80,6 +93,153 @@ nav.navbar.scrolled {
     border-bottom: 1px solid var(--hd-accent);
 }
 
+/* ── Page breadcrumb band ──
+   Sits directly under the fixed navbar (64px tall) and gives pages a proper
+   header strip: a soft brand-tinted band with a clickable trail. */
+.hd-breadcrumb {
+    position: relative;
+    padding-top: calc(64px + 30px);
+    padding-bottom: 26px;
+    background:
+        radial-gradient(
+            120% 160% at 0% 0%,
+            var(--hd-accent-subtle) 0%,
+            transparent 52%
+        ),
+        linear-gradient(
+            180deg,
+            var(--hd-bg-subtle) 0%,
+            var(--hd-bg-canvas) 100%
+        );
+    border-bottom: 1px solid var(--hd-border-1);
+    overflow: hidden;
+}
+
+/* Thin accent rule along the bottom edge */
+.hd-breadcrumb::after {
+    content: "";
+    position: absolute;
+    left: 0;
+    bottom: -1px;
+    width: 180px;
+    height: 2px;
+    background: linear-gradient(
+        90deg,
+        var(--hd-accent) 0%,
+        var(--hd-brand-dark) 100%
+    );
+}
+
+.hd-breadcrumb__trail {
+    display: flex;
+    align-items: center;
+    flex-wrap: wrap;
+    gap: 2px;
+    margin: 0;
+    padding: 0;
+    list-style: none;
+    font-size: 0.8125rem;
+    line-height: 1;
+}
+
+.hd-breadcrumb__trail li {
+    display: inline-flex;
+    align-items: center;
+}
+
+.hd-breadcrumb__trail li + li::before {
+    content: "";
+    width: 6px;
+    height: 6px;
+    margin: 0 6px;
+    border-right: 1.5px solid var(--hd-border-3);
+    border-bottom: 1.5px solid var(--hd-border-3);
+    transform: rotate(-45deg);
+}
+
+.hd-breadcrumb__trail a {
+    display: inline-flex;
+    align-items: center;
+    gap: 6px;
+    color: var(--hd-fg-3);
+    text-decoration: none;
+    font-weight: 500;
+    padding: 4px 9px;
+    border-radius: var(--hd-radius);
+    transition:
+        color 0.15s,
+        background-color 0.15s;
+}
+
+.hd-breadcrumb__trail a:hover {
+    color: var(--hd-accent);
+    background: var(--hd-accent-subtle);
+}
+
+.hd-breadcrumb__trail .bi {
+    font-size: 0.875rem;
+}
+
+.hd-breadcrumb__trail .current {
+    color: var(--hd-fg-1);
+    font-weight: 600;
+    padding: 4px 2px;
+}
+
+/* ── Usage / persona breadcrumb band (row of persona pills) ── */
+.hd-breadcrumb--usage .hd-breadcrumb__row {
+    display: flex;
+    align-items: center;
+    flex-wrap: wrap;
+    gap: 14px 18px;
+}
+
+.hd-breadcrumb__lead {
+    font-size: 0.9375rem;
+    color: var(--hd-fg-2);
+    margin: 0;
+}
+
+.hd-breadcrumb__lead .brand {
+    font-family: var(--hd-font-brand);
+    color: var(--hd-fg-1);
+}
+
+.hd-breadcrumb__personas {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 8px;
+    margin: 0;
+    padding: 0;
+    list-style: none;
+}
+
+.hd-breadcrumb__personas a {
+    display: inline-flex;
+    align-items: center;
+    gap: 6px;
+    font-size: 0.8125rem;
+    font-weight: 600;
+    color: var(--hd-fg-2);
+    text-decoration: none;
+    padding: 6px 13px;
+    background: var(--hd-bg-canvas);
+    border: 1px solid var(--hd-border-1);
+    border-radius: var(--hd-radius-full);
+    transition:
+        color 0.15s,
+        border-color 0.15s,
+        background-color 0.15s,
+        transform 0.15s;
+}
+
+.hd-breadcrumb__personas a:hover {
+    color: var(--hd-accent);
+    border-color: var(--hd-accent-border);
+    background: var(--hd-accent-subtle);
+    transform: translateY(-1px);
+}
+
 a.card {
     background: var(--hd-bg-subtle);
     transition: transform 250ms;
@@ -130,6 +290,7 @@ a.card:hover {
 
 .text-hilight {
     background-color: yellow;
+    color: black !important;
 }
 
 #voxppl {
@@ -256,6 +417,10 @@ img {
 
 footer {
     border-top: 3px solid var(--hd-plum-400);
+    /* Footer is always a dark band (all child text is hardcoded white),
+       so pin its colors instead of using the theme-reactive .bg-dark/.text-light. */
+    background-color: #212529;
+    color: #f8f9fa;
 }
 
 .footer-tagline {