diff --git a/layouts/partials/breadcrumbs.html b/layouts/partials/breadcrumbs.html
index 163329e..b62ada2 100644
--- a/layouts/partials/breadcrumbs.html
+++ b/layouts/partials/breadcrumbs.html
@@ -1,14 +1,6 @@
-<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 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>
diff --git a/layouts/partials/breadcrumbs_usage.html b/layouts/partials/breadcrumbs_usage.html
index ac0ec37..2615556 100644
--- a/layouts/partials/breadcrumbs_usage.html
+++ b/layouts/partials/breadcrumbs_usage.html
@@ -1,36 +1,14 @@
-<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>
+<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>
     </div>
 </nav>
diff --git a/layouts/partials/footer.html b/layouts/partials/footer.html
index b8ade26..1012822 100644
--- a/layouts/partials/footer.html
+++ b/layouts/partials/footer.html
@@ -1,4 +1,4 @@
-<footer class="pt-5 pb-3">
+<footer class="pt-5 pb-3 bg-dark text-light">
   <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="/{{ .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="#features">{{ i18n "footer-happydomain-features" }}</a></li>
+          <li><a href="#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="/{{ .Site.Language.Lang }}/#downloads">{{ i18n "footer-happydomain-downloads" }}</a></li>
+          <li><a href="#downloads">{{ i18n "footer-happydomain-downloads" }}</a></li>
           <!--li><a href="#">{{ i18n "footer-happydomain-prices" }}</a></li-->
         </ul>
       </div>
diff --git a/layouts/partials/nav.html b/layouts/partials/nav.html
index b921492..052e668 100644
--- a/layouts/partials/nav.html
+++ b/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 }}
diff --git a/static/css/custom.css b/static/css/custom.css
index 3d41426..1745c71 100644
--- a/static/css/custom.css
+++ b/static/css/custom.css
@@ -61,15 +61,6 @@
 }
 
 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);
@@ -78,11 +69,7 @@ nav.navbar {
 }
 nav.navbar.beginscroll {
     background:
-        linear-gradient(
-            90deg,
-            var(--hd-accent-subtle) 0%,
-            var(--hd-bg-canvas) 100%
-        ),
+        linear-gradient(90deg, var(--hd-accent-subtle) 0%, white 100%),
         var(--hd-accent-subtle);
     box-shadow: none;
     border-bottom: none;
@@ -93,153 +80,6 @@ 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;
@@ -290,7 +130,6 @@ a.card:hover {
 
 .text-hilight {
     background-color: yellow;
-    color: black !important;
 }
 
 #voxppl {
@@ -417,10 +256,6 @@ 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 {