Improve /support and /foundation/members designs

content/foundation/members/members.toml

@@ -22,6 +22,7 @@ logo = "connect2x.png"
 name = "DINUM"
 website = "https://www.numerique.gouv.fr/"
 logo = "dinum.svg"
+white_bg = true
 
 [[silver]]
 name = "Discourse"
@@ -112,6 +113,7 @@ logo = "cinny.svg"
 name = "Community Moderation Effort"
 website = ""
 logo = "community-moderation-effort.png"
+white_bg = true
 
 [[ecosystem]]
 name = "Conduit"
@@ -127,6 +129,7 @@ logo = "continuwuity.svg"
 name = "Draupnir"
 website = "https://github.com/the-draupnir-project/Draupnir"
 logo = "draupnir.png"
+white_bg = true
 
 [[ecosystem]]
 name = "Elm SDK"
@@ -137,6 +140,7 @@ logo = "elm-sdk.svg"
 name = "FluffyChat"
 website = "https://fluffychat.im/"
 logo = "fluffychat.svg"
+white_bg = true
 
 [[ecosystem]]
 name = "Fractal"
@@ -167,6 +171,7 @@ logo = "polychat.svg"
 name = "Rory&::LibMatrix"
 website = "https://cgit.rory.gay/matrix"
 logo = "rory-libmatrix.png"
+white_bg = true
 
 [[ecosystem]]
 name = "Thunderbird"

sass/_base.scss

@@ -18,6 +18,31 @@
     --borders-color: #ddd;
 
     --notice-box-color: #ffcb006b;
+
+    // Tokens for the support/membership card redesign (_support.scss).
+    // Kept distinct from the older --borders-color/--color-text-light pair
+    // above rather than merged into them, since those are already used
+    // with their own (slightly different) shades elsewhere.
+    --color-border: #d2d2d2;
+    --color-text-muted: #555;
+    --color-bg-tint: #fafafa;
+    --card-radius: 16px;
+    --card-radius-sm: 8px;
+
+    // The top 3 "become a member" tiers are literally named after materials
+    // (Platinum/Gold/Silver) - used as a top-edge accent on .tier-card and a
+    // frame/flag around the matching tier of supporter logos (_support.scss).
+    // Platinum is deliberately lighter/cooler and Silver deliberately
+    // darker/warmer so the two don't read as the same grey. These plain
+    // colours are for the (thin, non-text) frame border only; the flag is a
+    // solid fill with white text, which needs its own darker "-badge" pair
+    // to clear AA (the plain colours are too light/desaturated for that).
+    --color-tier-platinum: #4596a3;
+    --color-tier-platinum-badge: #1c3c41;
+    --color-tier-gold: #d48f2f;
+    --color-tier-gold-badge: #4b300d;
+    --color-tier-silver: #969eaa;
+    --color-tier-silver-badge: #3c3f44;
 }
 
 * {
@@ -152,6 +177,10 @@ pre table {
 
     @media (max-width: 767px) {
         padding-inline: 2rem;
+        // The announcement banner sits directly above .page-header with no
+        // gap of its own, so on mobile (where the banner text wraps taller)
+        // the breadcrumb ends up crammed right underneath it.
+        padding-top: 1.5rem;
     }
 
     padding-bottom: calc(var(--navbar-height)/2);

sass/_breadcrumb.scss

@@ -0,0 +1,81 @@
+// Breadcrumb navigation
+// Used via macros/breadcrumb.html. Two contexts:
+//   1. Inside .page-header (dark background) - text is white/muted-white
+//   2. Inside .detail-page (light background) - text is muted grey
+
+.breadcrumb {
+    ol {
+        display: flex;
+        flex-wrap: wrap;
+        align-items: center;
+        list-style: none;
+        margin: 0;
+        padding: 0;
+        gap: 0.25rem;
+        font-size: 0.85rem;
+    }
+
+    li {
+        display: flex;
+        align-items: center;
+
+        // Chevron separator before every item except the first
+        & + li::before {
+            content: "/";
+            margin-right: 0.25rem;
+            opacity: 0.45;
+        }
+    }
+
+    a,
+    span {
+        text-decoration: none;
+        line-height: 1;
+    }
+
+    // Dark context (inside .page-header)
+    .page-header & {
+        margin-bottom: 0.75rem;
+
+        a {
+            color: rgb(255 255 255 / 70%);
+
+            &:hover {
+                color: #fff;
+            }
+        }
+
+        // 45% white only clears ~4.4:1 against the black hero background,
+        // just under AA's 4.5:1 for text; 60% keeps it safely above.
+        span {
+            color: rgb(255 255 255 / 60%);
+        }
+
+        li + li::before {
+            color: rgb(255 255 255 / 45%);
+        }
+    }
+
+    // Light context (inside .detail-page)
+    .detail-page & {
+        margin-bottom: 1.25rem;
+
+        a {
+            color: var(--color-text-muted);
+
+            &:hover {
+                color: var(--color-text);
+            }
+        }
+
+        // The current-page label is text, not decoration, so it still needs
+        // to clear WCAG AA (4.5:1); #aaa on white only manages ~2.3:1.
+        span {
+            color: var(--color-text-light);
+        }
+
+        li + li::before {
+            color: #ccc;
+        }
+    }
+}