From af73854f427c2c6bea26598483e2f34929d7b48e Mon Sep 17 00:00:00 2001
From: MTRNord <MTRNord@users.noreply.github.com>
Date: Wed, 4 Mar 2026 08:47:59 +0100
Subject: [PATCH 01/17] add hosting provider pages and convert index to section

Move hosting providers out of providers.toml into individual .md pages
so each gets its own detail page. Rename index.md to _index.md to make
the directory a Zola section and add page_template and sort_by.

Signed-off-by: MTRNord <MTRNord@users.noreply.github.com>
---
 .../ecosystem/hosting/{index.md => _index.md} |  6 ++---
 content/ecosystem/hosting/communick.md        | 14 +++++++++++
 content/ecosystem/hosting/datanauten.md       | 15 ++++++++++++
 content/ecosystem/hosting/etke.md             | 23 +++++++++++++++++++
 content/ecosystem/hosting/fairkom.md          | 23 +++++++++++++++++++
 .../ecosystem/hosting/federated-computer.md   | 14 +++++++++++
 content/ecosystem/hosting/indiehosters.md     | 15 ++++++++++++
 content/ecosystem/hosting/ossrox.md           | 14 +++++++++++
 content/ecosystem/hosting/ungleich.md         | 16 +++++++++++++
 9 files changed, 136 insertions(+), 4 deletions(-)
 rename content/ecosystem/hosting/{index.md => _index.md} (95%)
 create mode 100644 content/ecosystem/hosting/communick.md
 create mode 100644 content/ecosystem/hosting/datanauten.md
 create mode 100644 content/ecosystem/hosting/etke.md
 create mode 100644 content/ecosystem/hosting/fairkom.md
 create mode 100644 content/ecosystem/hosting/federated-computer.md
 create mode 100644 content/ecosystem/hosting/indiehosters.md
 create mode 100644 content/ecosystem/hosting/ossrox.md
 create mode 100644 content/ecosystem/hosting/ungleich.md

diff --git a/content/ecosystem/hosting/index.md b/content/ecosystem/hosting/_index.md
similarity index 95%
rename from content/ecosystem/hosting/index.md
rename to content/ecosystem/hosting/_index.md
index 91bbf3c15..1b51d2364 100644
--- a/content/ecosystem/hosting/index.md
+++ b/content/ecosystem/hosting/_index.md
@@ -1,6 +1,8 @@
 +++
 title = "Hosting"
 template = "ecosystem/hosting.html"
+page_template = "ecosystem/hosting-provider.html"
+sort_by = "title"
 weight = 6
 extra.summary = """
 Everyone can host their Matrix server, but not everybody wants to. These are the providers the Matrix.org Foundation knows about. 
@@ -30,7 +32,3 @@ of the data of their organisation.
 The following providers have been brought to the attention of The Matrix.org
 Foundation. Please note that The Matrix.org Foundation doesn't endorse them,
 nor provides any warranties for using them.
-
-## Known providers
-
-{{ hosting_providers() }}
diff --git a/content/ecosystem/hosting/communick.md b/content/ecosystem/hosting/communick.md
new file mode 100644
index 000000000..f1985d60c
--- /dev/null
+++ b/content/ecosystem/hosting/communick.md
@@ -0,0 +1,14 @@
++++
+title = "Communick"
+
+[extra]
+image = "communick.png"
+website = "https://communick.com"
+operating_since = "2018"
+b2b = false
+b2c = true
++++
+
+Communick is a service provider for open source messaging and social media platforms. Hosted in Germany, it provides fully managed Synapse homeservers for those looking to be in control of their media presence and also provides a flagship instance at [matrix.communick.com](https://matrix.communick.com) for subscribers that value decentralization and are just looking for a stable, less popular server. As a form to support open source, Communick pledges to give 20% of its profits to the open source projects that it offers, so by becoming a customer you'll be also directly ensuring the continued development of the Matrix ecosystem.
+
+For information about different hosting plans, please check our [Matrix service webpage](https://communick.com/services/matrix).
diff --git a/content/ecosystem/hosting/datanauten.md b/content/ecosystem/hosting/datanauten.md
new file mode 100644
index 000000000..4c03fcdea
--- /dev/null
+++ b/content/ecosystem/hosting/datanauten.md
@@ -0,0 +1,15 @@
++++
+title = "Datanauten"
+
+[extra]
+image = "datanauten.png"
+website = "https://datanauten.de/"
+operating_since = "2022"
+b2b = true
+b2c = true
++++
+
+- Hosted Homeservers
+- Bridge Solutions: Installation and configuration of Bridges including Slack, Teams, Telegram, and WhatsApp.
+
+The Datanauten Matrix Homeserver offers an easy entry into the open and interoperable communication system of the future.
diff --git a/content/ecosystem/hosting/etke.md b/content/ecosystem/hosting/etke.md
new file mode 100644
index 000000000..20d7c64f9
--- /dev/null
+++ b/content/ecosystem/hosting/etke.md
@@ -0,0 +1,23 @@
++++
+title = "etke.cc"
+
+[extra]
+image = "etke.cc.png"
+website = "https://etke.cc"
+operating_since = "2021"
+b2b = true
+b2c = true
++++
+
+- Hosted Homeservers
+- Cloud or on-premises (BYOS)
+- Fully [FOSS](https://en.wikipedia.org/wiki/Free_and_open-source_software) (based on [matrix-docker-ansible-deploy](https://github.com/spantaleev/matrix-docker-ansible-deploy)). See [our code](https://gitlab.com/etke.cc)
+- [Per-complexity](https://etke.cc/news/lnyorh4ggeh9xadrob_rtuuqu_jj-s-ojfvvfzlmxpm/#pricing-model-changes) pricing (not per-user)
+- 15+ [Matrix bridges & bots](https://etke.cc/order/#matrix-bridges)
+- [Matrix addons](https://etke.cc/order/#matrix-addons) (S3, SSO, workers, etc.)
+- 15+ [Non-Matrix addons](https://etke.cc/order/#non-matrix-addons) (email, VPN, etc.)
+- Fully-managed, but still yours (root SSH)
+
+etke.cc is the only fully FOSS-based Matrix Hosting service. It's operated by a [team](https://etke.cc/about/) of active members of the self-hosting community. Based on [matrix-docker-ansible-deploy](https://github.com/spantaleev/matrix-docker-ansible-deploy), but hassle-free (SaaS) and contains improvements, extra addons and [support](https://etke.cc/services/support/). Get hosted on rented servers or use your own infra (on any provider) in a non-vendor-lock-in way.
+
+[Matrix Space](https://matrix.to/#/#service:etke.cc) | [Announcements on Matrix](https://matrix.to/#/#news:etke.cc)
diff --git a/content/ecosystem/hosting/fairkom.md b/content/ecosystem/hosting/fairkom.md
new file mode 100644
index 000000000..11973cd26
--- /dev/null
+++ b/content/ecosystem/hosting/fairkom.md
@@ -0,0 +1,23 @@
++++
+title = "fairkom"
+
+[extra]
+image = "fairkom_4c_quer.svg"
+website = "https://fairkom.eu"
+operating_since = "2015"
+b2b = true
+b2c = false
++++
+
+- Hosting (large) homeservers
+- Consulting for Matrix based messenger solutions
+- Customization of clients and apps
+- Voice & video call integration
+- Standard and custom bridges
+- Scalable deployments on kubernetes
+- On premise deployment and operations support
+- Integration with Identity Management Systems
+
+fairkom has been building and hosting chat solutions with various open source frameworks. We are now focussing on Matrix based solutions as interoperability is a key demand of customers and users. Our largest deployment scales for half a million pupils, for whom we developed an app for smartphones with additional educational features. Hosting is climate neutral and GDPR compliant.
+
+[Try fairmatrix](https://www.fairkom.eu/fairmatrix)
diff --git a/content/ecosystem/hosting/federated-computer.md b/content/ecosystem/hosting/federated-computer.md
new file mode 100644
index 000000000..a219267bf
--- /dev/null
+++ b/content/ecosystem/hosting/federated-computer.md
@@ -0,0 +1,14 @@
++++
+title = "Federated Computer"
+
+[extra]
+image = "federated.png"
+website = "https://federated.computer"
+operating_since = "2022"
+b2b = true
+b2c = true
++++
+
+- Hosted Homeservers
+
+Federated Computer provides Element and Matrix hosting as part of a team collaboration suite (including Nextcloud, Jitsi, Listmonk, Vaultwarden, Baserow, Gitea, Caddy, Castopod, Wireguard, and single-sign-on LDAP).
diff --git a/content/ecosystem/hosting/indiehosters.md b/content/ecosystem/hosting/indiehosters.md
new file mode 100644
index 000000000..b46f2559b
--- /dev/null
+++ b/content/ecosystem/hosting/indiehosters.md
@@ -0,0 +1,15 @@
++++
+title = "IndieHosters"
+
+[extra]
+image = "indiehosters.png"
+website = "https://indiehosters.net"
+operating_since = "2016"
+b2b = true
+b2c = false
++++
+
+- Hosted Homeservers
+- Hosted collaborative tools
+
+We are a French collective specialized in hosting FOSS software and aimed at building a digital common, with a particular emphasis on collaboration.
diff --git a/content/ecosystem/hosting/ossrox.md b/content/ecosystem/hosting/ossrox.md
new file mode 100644
index 000000000..f2e934f2e
--- /dev/null
+++ b/content/ecosystem/hosting/ossrox.md
@@ -0,0 +1,14 @@
++++
+title = "Ossrox"
+
+[extra]
+image = "ossrox.svg"
+website = "https://ossrox.org"
+operating_since = "2022"
+b2b = true
+b2c = true
++++
+
+- Hosted Homeservers
+
+Ossrox is a company from Germany dedicated to hosting open-source services. Not only has the company name been derived from the motto "Open-Source Software Rocks", but also their corporate culture. The three most important principles of the company are security, privacy and sustainability - thanks to open-source software. In addition to Matrix, Ossrox also provides many other solutions e.g. in the messaging, groupware and web meeting segments.
diff --git a/content/ecosystem/hosting/ungleich.md b/content/ecosystem/hosting/ungleich.md
new file mode 100644
index 000000000..c7638b11e
--- /dev/null
+++ b/content/ecosystem/hosting/ungleich.md
@@ -0,0 +1,16 @@
++++
+title = "Ungleich.ch"
+
+[extra]
+image = "ungleich_zerocarbonmatrix.jpg"
+website = "https://matrix.zerocarbon.shop"
+operating_since = "2020"
+b2b = false
+b2c = true
++++
+
+- Hosted Homeservers
+- [Bridge solutions: bridging Slack, Telegram, Whatsapp, IRC and more](https://ungleich.ch/en-us/cms/matterbridge-matrix/)
+- [Customised Matrix development: Custom Authentication/Login, Integration into private networks](https://ungleich.ch/u/products/matrix-custom-development/)
+
+Zero Carbon Matrix is provided by ungleich.ch in Switzerland, in their own Datacenter (datacenterlight.ch) with a strong focus on sustainability. Operating within a repurposed historic building, they utilise pre-owned server systems, passive cooling techniques, and 100% renewable energy. ungleich.ch also specialises in customised Matrix development for communities and organisations.

From 5e6b2cb981f599c0928b54632e6a5ee95b6250cb Mon Sep 17 00:00:00 2001
From: MTRNord <MTRNord@users.noreply.github.com>
Date: Wed, 4 Mar 2026 08:47:59 +0100
Subject: [PATCH 02/17] redesign client detail and listing pages

Replace the old popup overlay with a shared .ecosystem-detail layout:
two-column grid (main + features aside), logo wrap, meta row, screenshot
panel with CSS-only lightbox and a CTA actions row.

The all-clients card deck gains filter dropdowns (platform, maturity,
licence, features) backed by a small JS module. Add pill colour families
for licence and language, maturity badges and a .title-row helper.

Move all .client-card*, .platform-pill* and lightbox rules from
_try-matrix.scss into _clients.scss so both pages share one implementation.
Enhance .call-to-action with inline-flex and SVG icon handling used by
the new CTA buttons.

Signed-off-by: MTRNord <MTRNord@users.noreply.github.com>
---
 sass/_base.scss                  |  30 +-
 sass/_clients.scss               | 849 ++++++++++++++++++++++++++++++-
 sass/_projects.scss              | 408 +++++++++------
 templates/ecosystem/client.html  | 227 ++++++---
 templates/ecosystem/clients.html |  98 +++-
 templates/macros/clients.html    |  55 +-
 6 files changed, 1381 insertions(+), 286 deletions(-)

diff --git a/sass/_base.scss b/sass/_base.scss
index 95e1354d3..5e53e6e78 100644
--- a/sass/_base.scss
+++ b/sass/_base.scss
@@ -291,13 +291,39 @@ a>code {
 }
 
 .call-to-action {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.4em;
     background-color: #000;
     border: 2px solid #000;
     color: #fff;
     font-size: 1.125rem;
     font-weight: 600;
     border-radius: 1000px;
-    padding: .6em 2em;
+    padding: 0.6em 2em;
+
+    svg {
+        width: 1.1em;
+        height: 1.1em;
+        flex-shrink: 0;
+
+        .fillme {
+            fill: currentColor;
+            stroke: currentColor;
+        }
+
+        .fillme-inverse {
+            stroke: #000;
+        }
+    }
+
+    &.secondary svg .fillme-inverse {
+        stroke: #fff;
+    }
+
+    &.secondary:hover svg .fillme-inverse {
+        stroke: #000;
+    }
 
     &.inverted {
         border: 2px solid #fff;
@@ -310,7 +336,7 @@ a>code {
 
             &:hover {
                 background-color: #fff;
-                color: #000
+                color: #000;
             }
         }
     }
diff --git a/sass/_clients.scss b/sass/_clients.scss
index 02e4524f3..4227803c7 100644
--- a/sass/_clients.scss
+++ b/sass/_clients.scss
@@ -1,7 +1,11 @@
+// ── Body lock when a client popup is open (legacy checkbox overlay) ───────────
+
 body:has(.projects-card-deck > div > .client-checkbox:checked) {
     overflow: hidden;
 }
 
+// ── Clients section page layout ───────────────────────────────────────────────
+
 .clients_page {
     padding-top: 3rem;
 
@@ -39,23 +43,606 @@ body:has(.projects-card-deck > div > .client-checkbox:checked) {
     display: flex;
     flex-direction: row;
     align-items: flex-start;
-    justify-content: center;
-    gap: 16px 4px;
+    justify-content: flex-start;
+    gap: 4px;
     flex-wrap: wrap;
 }
 
+// ── Platform pills ─────────────────────────────────────────────────────────────
+// Colored variants matching the Try Matrix design language.
+// Used on both the ecosystem client list and inside <details> cards.
+
 .platform-pill {
-    background: #E9E9E9;
-    border-radius: 16px;
-    padding: .375rem .625rem;
+    display: inline-block;
+    font-size: 0.72rem;
+    padding: 0.1rem 0.45rem;
+    border-radius: 9999px;
+    border: 1px solid;
+    white-space: nowrap;
+    font-weight: 500;
+}
+
+.platform-pill--ios {
+    background: #e8f1ff;
+    color: #1a4db0;
+    border-color: #99bbee;
+}
+
+.platform-pill--android {
+    background: #e6f4ea;
+    color: #1a6b32;
+    border-color: #7acc8a;
+}
+
+.platform-pill--web {
+    background: #ede9fe;
+    color: #5b21b6;
+    border-color: #c4b5fd;
+}
+
+.platform-pill--windows {
+    background: #e6f9f7;
+    color: #0a6b62;
+    border-color: #7fd6ce;
+}
+
+.platform-pill--macos {
+    background: #f3f3f3;
+    color: #374151;
+    border-color: #d1d5db;
+}
+
+.platform-pill--linux {
+    background: #fff4e5;
+    color: #92400e;
+    border-color: #fcd9a0;
+}
+
+// ── Audience tags (hosting providers) ────────────────────────────────────────
+// Reused from Try Matrix provider compact cards.
+
+.audience-tag {
+    display: inline-block;
+    font-size: 0.72rem;
+    padding: 0.1rem 0.4rem;
+    border-radius: 9999px;
+    border: 1px solid;
+    white-space: nowrap;
+    font-weight: 500;
+
+    &--consumer {
+        background: #e8f1ff;
+        color: #1a4db0;
+        border-color: #99bbee;
+    }
+
+    &--business {
+        background: #f3f3f3;
+        color: #374151;
+        border-color: #d1d5db;
+    }
+}
+
+// ── Shared <details> expand card component ────────────────────────────────────
+// Used on /ecosystem/clients/ (featured section) and /ecosystem/hosting/.
+// Mirrors the .client-card design from _try-matrix.scss so both pages share
+// the same design language.
+
+.ecosystem-client-cards,
+.hosting-provider-cards {
+    display: flex;
+    flex-direction: column;
+    gap: 0.6rem;
+    margin-top: 1.25rem;
+    margin-bottom: 2rem;
+}
+
+// The <details> card itself
+.client-card {
+    border: 1px solid #d2d2d2;
+    border-radius: 14px;
+    overflow: hidden;
+    transition: border-color 0.2s ease;
+
+    &[open] {
+        border-color: #aaa;
+    }
 
-    font-style: normal;
+    &:hover {
+        border-color: #888;
+    }
+}
+
+// Summary row — always visible
+.client-card-summary {
+    list-style: none;
+    cursor: pointer;
+    padding: 0.85rem 1.1rem;
+    user-select: none;
+
+    @media (max-width: 600px) {
+        padding: 0.5rem 0.75rem;
+    }
+
+    &::-webkit-details-marker {
+        display: none;
+    }
+
+    &::marker {
+        display: none;
+    }
+
+    &:hover {
+        background-color: #fafafa;
+    }
+}
+
+.client-card-summary-inner {
+    display: grid;
+    // icon | header text | tags/platforms | chevron
+    grid-template-columns: 40px 1fr auto 0.75rem;
+    align-items: center;
+    gap: 0 0.85rem;
+
+    @media (max-width: 600px) {
+        grid-template-columns: 36px 1fr 0.75rem;
+    }
+
+    // Chevron via pseudo-element in the last column
+    &::after {
+        content: "";
+        display: block;
+        justify-self: center;
+        width: 0.55rem;
+        height: 0.55rem;
+        border-right: 2px solid #666;
+        border-bottom: 2px solid #666;
+        transform: rotate(45deg);
+        transition: transform 0.2s ease;
+    }
+}
+
+.client-card[open] .client-card-summary-inner::after {
+    transform: rotate(-135deg) translateY(-2px);
+}
+
+.client-card-icon {
+    width: 40px;
+    height: 40px;
+    flex-shrink: 0;
+    border-radius: 8px;
+    object-fit: contain;
+
+    @media (max-width: 600px) {
+        width: 100%;
+        height: auto;
+        aspect-ratio: 1;
+        border-radius: 10px;
+    }
+}
+
+.client-card-header-text {
+    display: flex;
+    flex-direction: column;
+    gap: 0.15rem;
+    min-width: 0;
+}
+
+.client-card-name {
+    font-weight: 700;
+    font-size: 1.05rem;
+    line-height: 1.2;
+    display: flex;
+    align-items: center;
+    flex-wrap: wrap;
+    gap: 0.35rem;
+
+    @media (max-width: 600px) {
+        font-size: 1rem;
+    }
+}
+
+.client-card-anchor {
+    font-size: 0.85rem;
     font-weight: 400;
+    color: #aaa;
+    text-decoration: none;
+    margin-left: 0.1rem;
+    opacity: 0;
+    transition: opacity 0.15s ease;
+
+    &:hover {
+        color: var(--color-link);
+    }
+}
+
+.client-card-summary:hover .client-card-anchor {
+    opacity: 1;
+}
+
+.client-card-description-short {
+    font-size: 0.85rem;
+    color: #555;
+    line-height: 1.3;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+
+    @media (max-width: 600px) {
+        font-size: 0.8rem;
+        white-space: normal;
+    }
+}
+
+// "good for" subtext — used on try-matrix; available here too if needed
+.client-card-good-for {
+    font-size: 0.85rem;
+    color: #555;
+    line-height: 1.3;
+
+    @media (max-width: 600px) {
+        font-size: 0.8rem;
+    }
+}
+
+.client-card-summary-platforms {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.25rem;
+    justify-content: flex-end;
+
+    @media (max-width: 600px) {
+        display: none;
+    }
+}
+
+// ── Expanded card body ────────────────────────────────────────────────────────
+
+.client-card-body {
+    display: grid;
+    grid-template-columns: 440px minmax(0, 1fr);
+    gap: 0;
+    border-top: 1px solid #e8e8e8;
+
+    @media (max-width: 700px) {
+        grid-template-columns: 1fr;
+    }
+}
+
+// Screenshot container — always full grid-row height in cards, 16:9 on detail pages
+.client-card-screenshot-wrap {
+    // overflow: hidden is intentionally omitted here so the expand badge
+    // (::after) is never clipped by the container. Each screenshot trigger
+    // clips its own image via overflow: hidden instead.
+    position: relative;
+    background-color: #f5f5f5;
+    // Fill the full height of the .client-card-body grid row so the screenshot
+    // panel always matches the details column, regardless of description length.
+    // A min-height prevents collapse when the details side is very short.
+    align-self: stretch;
+    min-height: 200px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 0.75rem;
+    gap: 0.5rem;
+    border-radius: 4px;
+
+    // Expand badge anchored to the wrap so it is never clipped
+    &::after {
+        content: "⤢";
+        position: absolute;
+        bottom: 1rem;
+        right: 1rem;
+        font-size: 0.75rem;
+        line-height: 1;
+        background: rgba(0, 0, 0, 0.55);
+        color: #fff;
+        padding: 0.2rem 0.35rem;
+        border-radius: 4px;
+        pointer-events: none;
+        opacity: 0.85;
+        z-index: 2;
+    }
+}
+
+.ecosystem-detail-main .client-card-screenshot-wrap {
+    // On detail pages use a 16:9 frame. The trigger fills the whole frame and
+    // the image covers it from the top, so the screenshot is never cut off at
+    // the top and baked-in bottom whitespace is cropped away naturally.
+    aspect-ratio: 16 / 9;
+    max-width: 100%;
+    border-radius: 10px;
+    overflow: hidden;
+    padding: 0;
+    align-items: stretch;
+
+    // Move the badge inside the rounded corner area
+    &::after {
+        bottom: 0.75rem;
+        right: 0.75rem;
+    }
+
+    .client-card-screenshot-trigger {
+        flex: 1;
+        overflow: hidden;
+        border-radius: 0;
+    }
+
+    .client-card-screenshot {
+        width: 100%;
+        height: 100%;
+        max-width: unset;
+        max-height: unset;
+        object-fit: cover;
+        object-position: top center;
+        border-radius: 0;
+    }
+}
+
+.client-card-screenshot-trigger {
+    // Each trigger clips its own image; z-index keeps it above the wrap's
+    // ::after badge so a hovered trigger can still be a zoom target.
+    position: relative;
+    display: block;
+    cursor: zoom-in;
+    line-height: 0;
+    overflow: hidden;
+    border-radius: 4px;
+    // Fill the full height of the wrap so the image covers the whole panel.
+    flex: 1;
+    align-self: stretch;
+}
+
+.client-card-screenshot {
+    display: block;
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    object-position: top center;
+    border-radius: 0;
+}
+
+// Multi-screenshot layout
+.client-card-screenshot-wrap--multi {
+    padding: 0.5rem;
+    align-items: stretch;
+    overflow: hidden;
+
+    // Hide the single wrap-level badge; each trigger has its own image
+    &::after {
+        display: none;
+    }
+
+    .client-card-screenshot-trigger {
+        flex: 1;
+        min-width: 0;
+        overflow: hidden;
+        border-radius: 4px;
+
+        // Per-trigger expand badge for multi-screenshot layouts
+        &::after {
+            content: "⤢";
+            position: absolute;
+            bottom: 0.5rem;
+            right: 0.5rem;
+            font-size: 0.75rem;
+            line-height: 1;
+            background: rgba(0, 0, 0, 0.55);
+            color: #fff;
+            padding: 0.2rem 0.35rem;
+            border-radius: 4px;
+            pointer-events: none;
+            opacity: 0.85;
+            z-index: 2;
+        }
+    }
+
+    .client-card-screenshot {
+        width: 100%;
+        height: 100%;
+        max-width: unset;
+        max-height: unset;
+        object-fit: cover;
+        object-position: top center;
+        border-radius: 0;
+    }
+}
+
+// ── CSS-only lightbox ─────────────────────────────────────────────────────────
+
+.client-lightbox {
+    display: none;
+    position: fixed;
+    inset: 0;
+    z-index: 1000;
+    align-items: center;
+    justify-content: center;
+
+    &:target {
+        display: flex;
+    }
+
+    img {
+        position: relative;
+        z-index: 2;
+        max-width: min(90vw, 1200px);
+        max-height: 90vh;
+        width: auto;
+        height: auto;
+        object-fit: contain;
+        border-radius: 10px;
+
+        margin: 0;
+    }
+}
+
+.client-lightbox-backdrop {
+    position: fixed;
+    inset: 0;
+    z-index: 1;
+    background: rgba(0, 0, 0, 0.85);
+    cursor: zoom-out;
+}
+
+.client-lightbox-close {
+    position: fixed;
+    top: 1rem;
+    right: 1.25rem;
+    z-index: 3;
+    font-size: 2rem;
+    line-height: 1;
+    color: #fff;
+    text-decoration: none;
+    opacity: 0.8;
+    cursor: pointer;
+
+    &:hover {
+        opacity: 1;
+    }
+}
+
+// ── Details column ────────────────────────────────────────────────────────────
+
+.client-card-details {
+    padding: 1.25rem 1.5rem;
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+
+    @media (max-width: 700px) {
+        padding: 0.85rem 1rem;
+        gap: 0.75rem;
+    }
+}
+
+.client-card-description {
+    margin: 0;
     font-size: 1rem;
-    line-height: 120%;
-    color: #000000;
+    line-height: 1.55;
+    color: var(--color-text);
+
+    @media (max-width: 700px) {
+        font-size: 0.9rem;
+    }
+}
+
+// Feature pills
+.client-card-features {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.35rem;
+}
+
+.client-feat-pill {
+    display: inline-block;
+    padding: 0.2rem 0.6rem;
+    border-radius: 9999px;
+    font-size: 0.78rem;
+    font-weight: 500;
+    background-color: #e9f0ff;
+    color: #1a3a80;
+    border: 1px solid #bcd0f7;
+    white-space: nowrap;
+}
+
+// Store badge download links row
+.client-card-downloads {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.5rem;
+    align-items: center;
+
+    a {
+        display: inline-block;
+        line-height: 0;
+
+        img {
+            height: 36px;
+            width: auto;
+            max-width: none;
+            margin: 0;
+            border-radius: 6px;
+
+            @media (max-width: 700px) {
+                height: 30px;
+            }
+        }
+    }
+}
+
+// "Full details →" pill link
+.client-card-more-link {
+    display: inline-block;
+    align-self: flex-start;
+    font-size: 0.85rem;
+    font-weight: 600;
+    color: var(--color-text);
+    background-color: #f0f0f0;
+    border: 1px solid #d2d2d2;
+    border-radius: 9999px;
+    padding: 0.3rem 0.9rem;
+    text-decoration: none;
+    transition:
+        background-color 0.15s ease,
+        border-color 0.15s ease;
+
+    &:hover {
+        background-color: #e4e4e4;
+        border-color: #aaa;
+    }
 }
 
+// ── Hosting provider card overrides ──────────────────────────────────────────
+// The hosting page reuses the same .client-card shell but needs a wider logo
+// placeholder instead of a square app icon, and the body is single-column
+// (no screenshot panel).
+
+.hosting-provider-logo {
+    width: 40px;
+    height: 40px;
+    flex-shrink: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    img {
+        width: 100%;
+        height: 100%;
+        object-fit: contain;
+        border-radius: 4px;
+    }
+}
+
+// Single-column body (no screenshot slot)
+.hosting-provider-body {
+    grid-template-columns: 1fr !important;
+}
+
+.hosting-provider-description {
+    font-size: 1rem;
+    line-height: 1.6;
+    color: var(--color-text);
+
+    p,
+    ul,
+    ol {
+        margin-top: 0;
+        margin-bottom: 0.5rem;
+    }
+
+    ul,
+    ol {
+        padding-left: 1.4rem;
+    }
+
+    a {
+        color: var(--color-link);
+    }
+}
+
+// ── Legacy popup overlay (all-clients list) ───────────────────────────────────
+
 .client-details {
     @media (max-width: 767px) {
         grid-template-columns: 1fr;
@@ -75,7 +662,7 @@ body:has(.projects-card-deck > div > .client-checkbox:checked) {
 
         h3 {
             display: flex;
-            gap: .5rem;
+            gap: 0.5rem;
             margin: 0 auto;
             align-items: center;
             justify-content: center;
@@ -89,7 +676,7 @@ body:has(.projects-card-deck > div > .client-checkbox:checked) {
             }
 
             .maturity {
-                padding-block: .3rem;
+                padding-block: 0.3rem;
             }
         }
 
@@ -101,10 +688,9 @@ body:has(.projects-card-deck > div > .client-checkbox:checked) {
 
         .latest-release {
             margin-bottom: 0 auto;
-            font-size: .8rem;
+            font-size: 0.8rem;
             text-align: center;
         }
-
     }
 
     .project-links {
@@ -148,21 +734,21 @@ body:has(.projects-card-deck > div > .client-checkbox:checked) {
 .client-checkbox {
     display: none;
 
-    &:checked~.client-details-overlay {
+    &:checked ~ .client-details-overlay {
         position: fixed;
         z-index: 150;
         top: var(--navbar-height);
         right: 0;
         bottom: 0;
         left: 0;
-        background-color: rgba(0, 0, 0, .5);
+        background-color: rgba(0, 0, 0, 0.5);
     }
 
-    &:not(:checked)~.client-details-overlay {
+    &:not(:checked) ~ .client-details-overlay {
         display: none;
     }
 
-    &:not(:checked)~.client-details {
+    &:not(:checked) ~ .client-details {
         display: none;
     }
 }
@@ -170,7 +756,7 @@ body:has(.projects-card-deck > div > .client-checkbox:checked) {
 .stores {
     display: flex;
     justify-content: center;
-    gap: .3rem 1rem;
+    gap: 0.3rem 1rem;
     flex-wrap: wrap;
     margin-block: 2rem;
 
@@ -183,3 +769,232 @@ body:has(.projects-card-deck > div > .client-checkbox:checked) {
         display: block;
     }
 }
+
+// ── Shared ecosystem detail page layout ───────────────────────────────────────
+// Used by client.html and hosting-provider.html (and any future detail pages).
+
+.ecosystem-detail-page {
+    padding-top: 3rem;
+}
+
+.ecosystem-detail {
+    display: grid;
+    grid-template-columns: 1fr 18rem;
+    grid-template-rows: auto 1fr;
+    grid-template-areas:
+        "header aside"
+        "main   aside";
+    column-gap: 2rem;
+    row-gap: 2rem;
+    max-width: 60rem;
+    margin-inline: auto;
+    padding-bottom: 3rem;
+
+    @media (max-width: 767px) {
+        grid-template-columns: 1fr;
+        grid-template-areas:
+            "header"
+            "aside"
+            "main";
+    }
+
+    // Single-column variant for pages without a features aside (e.g. hosting)
+    &--single {
+        grid-template-columns: 1fr;
+        grid-template-areas:
+            "header"
+            "main";
+
+        .ecosystem-detail-aside {
+            display: none;
+        }
+    }
+}
+
+.ecosystem-detail-header {
+    grid-area: header;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    gap: 1.5rem;
+
+    @media (max-width: 600px) {
+        flex-direction: column;
+        align-items: flex-start;
+        gap: 1rem;
+    }
+}
+
+.ecosystem-detail-main {
+    grid-area: main;
+    display: flex;
+    flex-direction: column;
+    gap: 1.5rem;
+}
+
+.ecosystem-detail-aside {
+    grid-area: aside;
+    position: sticky;
+    top: calc(var(--navbar-height) + 1.5rem);
+}
+
+.ecosystem-detail-logo-wrap {
+    flex-shrink: 0;
+    width: 6rem;
+    height: 6rem;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border: 1px solid #e8e8e8;
+    border-radius: 14px;
+    padding: 0.75rem;
+    background: #fafafa;
+
+    @media (max-width: 600px) {
+        width: 5rem;
+        height: 5rem;
+    }
+}
+
+.ecosystem-detail-logo {
+    width: 100%;
+    height: 100%;
+    object-fit: contain;
+    display: block;
+}
+
+.ecosystem-detail-header-text {
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+}
+
+.ecosystem-detail-name {
+    margin: 0;
+    font-size: 2rem;
+    font-weight: 700;
+    line-height: 1.1;
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: 0.5rem;
+}
+
+.ecosystem-detail-meta {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: 0.25rem 0.75rem;
+}
+
+.ecosystem-detail-meta-item {
+    font-size: 0.9rem;
+    color: #666;
+
+    // Dot separator between items
+    & + &::before {
+        content: "·";
+        margin-right: 0.75rem;
+        color: #ccc;
+    }
+}
+
+.ecosystem-detail-description {
+    margin: 0;
+    font-size: 1rem;
+    line-height: 1.65;
+    color: var(--color-text);
+
+    p {
+        margin-top: 0;
+        margin-bottom: 0.75rem;
+    }
+
+    ul,
+    ol {
+        margin-top: 0;
+        margin-bottom: 0.75rem;
+        padding-left: 1.4rem;
+    }
+
+    li {
+        margin-bottom: 0.25rem;
+    }
+
+    a {
+        color: var(--color-link);
+    }
+}
+
+// Feature aside heading
+.ecosystem-detail-aside-title {
+    font-size: 0.9rem;
+    font-weight: 700;
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+    color: #666;
+    margin: 0 0 0.6rem 0;
+}
+
+// Feature support list as a definition list
+.ecosystem-detail-features {
+    dl {
+        border: 1px solid var(--borders-color);
+        border-radius: 16px;
+        overflow: hidden;
+        margin: 0;
+    }
+
+    .feature-row {
+        display: flex;
+        flex-direction: column;
+        gap: 0.15rem;
+        padding: 0.6rem 0.85rem;
+
+        & + .feature-row {
+            border-top: 1px solid #e8e8e8;
+        }
+    }
+
+    dt {
+        display: flex;
+        align-items: center;
+        gap: 0.4rem;
+        font-size: 0.9rem;
+        font-weight: 600;
+        line-height: 1.3;
+    }
+
+    // Tick / cross indicator element
+    .feature-row-indicator {
+        display: inline-block;
+        width: 1em;
+        height: 1em;
+        flex-shrink: 0;
+        background-size: contain;
+        background-repeat: no-repeat;
+        background-position: center;
+        background-image: url("/assets/cross_unsupported.svg");
+    }
+
+    .feature-row.supported .feature-row-indicator {
+        background-image: url("/assets/tick_supported.svg");
+    }
+
+    dd {
+        margin: 0;
+        // Indent to align with the label text, past the indicator
+        padding-left: calc(1em + 0.4rem);
+        font-size: 0.8rem;
+        color: #666;
+        line-height: 1.4;
+    }
+}
+
+// CTA + pill link row at the bottom
+.ecosystem-detail-actions {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.75rem;
+    align-items: center;
+}
diff --git a/sass/_projects.scss b/sass/_projects.scss
index a2f7906d7..50c66eb02 100644
--- a/sass/_projects.scss
+++ b/sass/_projects.scss
@@ -7,7 +7,7 @@
     margin-inline: auto;
 }
 
-.projects-card-deck>div {
+.projects-card-deck > div {
     height: 100%;
     width: 100%;
 }
@@ -19,102 +19,232 @@ a.project-card {
 .project-card {
     display: flex;
     flex-direction: column;
-    justify-content: flex-start;
-    align-items: center;
-    padding: 24px;
-    gap: .75rem;
+    align-items: flex-start;
+    padding: 1.1rem 1.25rem 1.1rem;
+    gap: 0;
+    text-align: left;
+
     min-height: 100%;
 
-    border: 1px solid #D2D2D2;
+    border: 1px solid #d2d2d2;
     border-radius: 16px;
+    transition:
+        border-color 0.15s ease,
+        box-shadow 0.15s ease;
+
+    &:hover {
+        border-color: #999;
+        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
+    }
 
+    // ── Logo + name header row ────────────────────────────────────────────────
     img {
-        margin: 0;
-        width: 65px;
-        height: 65px;
-        box-sizing: content-box;
+        margin: 0 0 0.65rem;
+        width: 44px;
+        height: 44px;
+        object-fit: contain;
+        border-radius: 10px;
+        border: 1px solid #e8e8e8;
+        padding: 0.25rem;
+        background: #fafafa;
+        box-sizing: border-box;
+        flex-shrink: 0;
     }
 
     h3 {
-        margin: 0;
+        margin: 0 0 0.4rem;
         font-style: normal;
         font-weight: 700;
-        font-size: 1.6rem;
-        line-height: 1.15;
-        text-align: center;
-        overflow-wrap: break-word;
-        word-break: break-word;
-        hyphens: auto;
+        font-size: 1.05rem;
+        line-height: 1.25;
+        text-align: left;
     }
 
-    a {
-        color: var(--color-text-light);
-        text-decoration: none;
+    // ── Description ───────────────────────────────────────────────────────────
+    p,
+    & > span {
+        font-size: 0.85rem;
+        line-height: 1.45;
+        color: #555;
+        margin: 0 0 0.75rem;
+        flex-shrink: 0;
+        text-align: left;
     }
 
-    .open-project {
-        margin: 0;
-        color: var(--color-text-light);
-    }
-
-    p {
-        line-height: 1;
-        margin: 0;
-
-        &:empty {
-            display: none;
-        }
-    }
-
-    .metadata-pills,
+    // ── Pills row — always immediately above the CTA ──────────────────────────
+    .platform-links,
     .licence-language {
         display: flex;
         flex-direction: row;
         flex-wrap: wrap;
+        gap: 0.25rem;
+        margin-top: auto;
+        margin-bottom: 0.6rem;
+        align-self: stretch;
         justify-content: center;
-        gap: .3rem;
     }
 
     .pill {
-        background-color: #e9e9e9;
-        border-radius: 16px;
-        padding: .2rem .5rem;
+        display: inline-block;
+        font-size: 0.75rem;
+        background-color: #f3f3f3;
+        border: 1px solid #d1d5db;
+        border-radius: 9999px;
+        padding: 0.05rem 0.5rem;
         color: var(--color-text);
-        font-size: .85rem;
-        line-height: 1.2;
-        text-align: center;
-
-        &.licence {
-            background-color: transparent;
-            border: 1px solid #888;
-            color: #555;
-        }
+        line-height: 1.6;
+    }
+
+    // ── Licence pill colour families ──────────────────────────────────────────
+    // Permissive (MIT, Apache, ISC, BSD, CC0, Artistic, MIT-Modern-Variant)
+    .pill--licence-mit,
+    .pill--licence-mit-modern-variant,
+    .pill--licence-apache-2-0,
+    .pill--licence-isc,
+    .pill--licence-bsd,
+    .pill--licence-cc0-1-0,
+    .pill--licence-artistic-2-0 {
+        background-color: #e6f4ea;
+        border-color: #7acc8a;
+        color: #1a6b32;
     }
 
-    .subtitle {
-        font-size: .9rem;
-        color: var(--color-text-light);
-        text-align: center;
+    // Strong copyleft (GPL family, AGPL)
+    .pill--licence-gpl-1-0-or-later,
+    .pill--licence-gpl-3-0,
+    .pill--licence-gpl-3-0-only,
+    .pill--licence-gpl-3-0-or-later,
+    .pill--licence-agpl-3-0,
+    .pill--licence-agpl-3-0-only,
+    .pill--licence-agpl-3-0-or-later {
+        background-color: #fff4e5;
+        border-color: #fcd9a0;
+        color: #92400e;
     }
 
-    .description {
-        font-size: .9rem;
-        line-height: 1.4;
-        text-align: center;
-        margin: 0;
-        display: -webkit-box;
-        -webkit-line-clamp: 4;
-        -webkit-box-orient: vertical;
-        overflow: hidden;
+    // Weak copyleft (LGPL, MPL, EUPL)
+    .pill--licence-lgpl-2-1-only,
+    .pill--licence-lgpl-3-0-only,
+    .pill--licence-lgpl-3-0-or-later,
+    .pill--licence-mpl-2-0,
+    .pill--licence-eupl-1-2 {
+        background-color: #e8f1ff;
+        border-color: #99bbee;
+        color: #1a4db0;
+    }
 
-        * {
-            margin: 0;
-            padding: 0;
-        }
+    // Unknown / no licence
+    .pill--licence-none {
+        background-color: #f3f3f3;
+        border-color: #d1d5db;
+        color: #555;
+    }
 
-        &:empty {
-            display: none;
-        }
+    // ── Language pill colour families ─────────────────────────────────────────
+    // Systems (C, C++, Rust)
+    .pill--lang-c,
+    .pill--lang-cplusplus,
+    .pill--lang-rust {
+        background-color: #fff4e5;
+        border-color: #fcd9a0;
+        color: #92400e;
+    }
+
+    // JVM (Java, Kotlin)
+    .pill--lang-java,
+    .pill--lang-kotlin {
+        background-color: #ede9fe;
+        border-color: #c4b5fd;
+        color: #5b21b6;
+    }
+
+    // JavaScript / TypeScript
+    .pill--lang-javascript,
+    .pill--lang-typescript {
+        background-color: #fefce8;
+        border-color: #fde68a;
+        color: #854d0e;
+    }
+
+    // Python
+    .pill--lang-python {
+        background-color: #e8f1ff;
+        border-color: #99bbee;
+        color: #1a4db0;
+    }
+
+    // Go
+    .pill--lang-go {
+        background-color: #e6f9f7;
+        border-color: #7fd6ce;
+        color: #0a6b62;
+    }
+
+    // Apple (Swift, Objective-C)
+    .pill--lang-swift,
+    .pill--lang-objective-c {
+        background-color: #fff0eb;
+        border-color: #fdb99a;
+        color: #9a3412;
+    }
+
+    // Dynamic / functional (Ruby, Perl, Raku, Erlang, Elixir, Lisp, Racket)
+    .pill--lang-ruby,
+    .pill--lang-perl,
+    .pill--lang-raku,
+    .pill--lang-erlang,
+    .pill--lang-elixir,
+    .pill--lang-lisp,
+    .pill--lang-racket {
+        background-color: #fce7f3;
+        border-color: #f9a8d4;
+        color: #9d174d;
+    }
+
+    // Web / cross-platform (PHP, Dart, Elm, Haxe)
+    .pill--lang-php,
+    .pill--lang-dart,
+    .pill--lang-elm,
+    .pill--lang-haxe {
+        background-color: #e6f4ea;
+        border-color: #7acc8a;
+        color: #1a6b32;
+    }
+
+    // Shell / scripting (POSIX Shell, Nim)
+    .pill--lang-posix-shell,
+    .pill--lang-nim {
+        background-color: #f3f3f3;
+        border-color: #d1d5db;
+        color: #374151;
+    }
+
+    // C# (separate from C/C++ — .NET ecosystem)
+    .pill--lang-csharp {
+        background-color: #eef0fb;
+        border-color: #8892d4;
+        color: #2c3894;
+    }
+
+    // ── CTA label pinned to the bottom ────────────────────────────────────────
+    // The whole card is already a link — this is a visual affordance only,
+    // not an interactive element, so it carries no hover state of its own.
+    a.open-project,
+    .open-project {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        align-self: stretch;
+        margin-top: 0;
+        font-size: 0.8rem;
+        font-weight: 600;
+        color: #555;
+        background-color: transparent;
+        border: 1px solid #d1d5db;
+        border-radius: 9999px;
+        padding: 0.2rem 0.75rem;
+        text-decoration: none;
+        pointer-events: none;
     }
 }
 
@@ -139,10 +269,10 @@ a.project-card {
             display: flex;
             flex-direction: row;
             justify-content: space-between;
-            gap: .8rem;
+            gap: 0.8rem;
             z-index: 100;
 
-            padding: .5rem .8rem;
+            padding: 0.5rem 0.8rem;
 
             background-color: #fafafa;
             color: #000;
@@ -159,7 +289,7 @@ a.project-card {
             }
 
             img {
-                height: .9em;
+                height: 0.9em;
                 margin-block: auto;
             }
 
@@ -186,7 +316,7 @@ a.project-card {
             max-width: 20rem;
             z-index: 200;
 
-            padding: .5rem 1rem;
+            padding: 0.5rem 1rem;
 
             background-color: #fafafa;
             border: 1px solid var(--borders-color);
@@ -194,8 +324,8 @@ a.project-card {
 
             p {
                 margin: 0;
-                margin-bottom: .5rem;
-                font-size: .8rem;
+                margin-bottom: 0.5rem;
+                font-size: 0.8rem;
                 text-align: start;
             }
 
@@ -210,7 +340,7 @@ a.project-card {
             }
 
             .reset-links {
-                font-size: .8rem;
+                font-size: 0.8rem;
 
                 a {
                     cursor: pointer;
@@ -233,36 +363,37 @@ a.project-card {
 }
 
 .maturity {
-    border: 1px solid var(--borders-color);
+    border: 1px solid;
     border-radius: 9999px;
-    padding: 0 .6rem;
-    font-size: 1rem;
-    font-weight: 400;
+    padding: 0.1rem 0.45rem;
+    font-size: 0.72rem;
+    font-weight: 500;
+    line-height: 1.6;
     max-width: fit-content;
     justify-self: flex-end;
 
     &.stable {
-        background-color: #DFF6D5;
-        border-color: #245C0C;
-        color: #245C0C
+        background-color: #dff6d5;
+        border-color: #245c0c;
+        color: #245c0c;
     }
 
     &.beta {
-        background-color: #F6E7D5;
-        border-color: #6F420F;
-        color: #6F420F;
+        background-color: #f6e7d5;
+        border-color: #6f420f;
+        color: #6f420f;
     }
 
     &.alpha {
-        background-color: #F6D5D5;
-        border-color: #8B1212;
-        color: #8B1212;
+        background-color: #f6d5d5;
+        border-color: #8b1212;
+        color: #8b1212;
     }
 
     &.obsolete {
-        background-color: #E6E6E6;
-        border-color: #4A4A4A;
-        color: #4A4A4A;
+        background-color: #e6e6e6;
+        border-color: #4a4a4a;
+        color: #4a4a4a;
     }
 }
 
@@ -270,19 +401,9 @@ a.project-card {
     width: 100%;
     max-width: 100%;
     display: flex;
-    flex-direction: column;
-    align-items: center;
-    gap: .3rem;
-
-    h3 {
-        text-align: center;
-    }
-}
-
-.card-links {
-    margin-top: auto;
-    display: flex;
-    flex-direction: row;
+    justify-content: space-between;
+    gap: 0.2rem;
+    align-items: start;
     flex-wrap: wrap;
     justify-content: center;
     gap: .5rem;
@@ -296,7 +417,7 @@ a.project-card {
     bottom: 0;
     z-index: 100;
 
-    background-color: rgba(0, 0, 0, .5);
+    background-color: rgba(0, 0, 0, 0.5);
 
     &:not(.display) {
         display: none;
@@ -306,45 +427,48 @@ a.project-card {
 .project-links {
     display: flex;
     flex-wrap: wrap;
-    gap: .3rem;
+    gap: 0.3rem;
 
     margin-bottom: 1rem;
+}
 
-    .pill {
-        display: flex;
-        align-items: center;
-        gap: .2rem;
+a.pill {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.2rem;
 
-        border: 1px solid var(--color-text);
-        color: var(--color-text);
-        border-radius: 9999px;
-        padding: .1rem .4rem;
+    border: 1px solid var(--color-text);
+    color: var(--color-text);
+    border-radius: 9999px;
+    padding: 0.1rem 0.4rem;
+    text-decoration: none;
 
-        transition: background-color 0.3s ease;
+    svg {
+        flex-shrink: 0;
+        width: 1em;
+        height: 1em;
+    }
 
-        .fillme {
-            fill: var(--color-text);
-            stroke: var(--color-text);
-            transition: fill 0.3s ease, stroke 0.3s ease;
-        }
+    .fillme {
+        fill: var(--color-text);
+        stroke: var(--color-text);
+    }
 
-        .fillme-inverse {
-            stroke: #fff;
-            transition: stroke 0.3s ease;
-        }
+    .fillme-inverse {
+        stroke: #fff;
+    }
 
-        &:hover {
-            background-color: var(--color-text);
-            color: #fff;
+    &:hover {
+        background-color: var(--color-text);
+        color: #fff;
 
-            .fillme {
-                fill: #fff;
-                stroke: #fff;
-            }
+        .fillme {
+            fill: #fff;
+            stroke: #fff;
+        }
 
-            .fillme-inverse {
-                stroke: var(--color-text);
-            }
+        .fillme-inverse {
+            stroke: var(--color-text);
         }
     }
 }
@@ -356,24 +480,16 @@ a.project-card {
         padding-inline: 1rem;
 
         li {
-            padding: .5rem;
+            padding: 0.5rem;
             line-height: 1.6;
             list-style-position: inside;
-            list-style-image: url('/assets/question_unknown.svg');
-
-            &.unsupported {
-                list-style-image: url('/assets/cross_unsupported.svg');
-            }
-
-            &.partial {
-                list-style-image: url('/assets/flask_partial.svg');
-            }
+            list-style-image: url("/assets/cross_unsupported.svg");
 
             &.supported {
-                list-style-image: url('/assets/tick_supported.svg');
+                list-style-image: url("/assets/tick_supported.svg");
             }
 
-            &+li {
+            & + li {
                 border-top: 1px solid #d2d2d2;
             }
         }
diff --git a/templates/ecosystem/client.html b/templates/ecosystem/client.html
index 427554bcf..2fae0cf13 100644
--- a/templates/ecosystem/client.html
+++ b/templates/ecosystem/client.html
@@ -1,7 +1,11 @@
 {% extends "page.html" %}
 {% import "macros/clients.html" as clients %}
+{% import "macros/breadcrumb.html" as breadcrumb %}
 {% block head_extra %}
-<meta name="description" content="{{ page.content | replace(from=" <p>", to="") | replace(from="</p>", to="") }}">
+<meta
+    name="description"
+    content="{{ page.content | striptags | truncate(length=160) }}"
+/>
 {% endblock head_extra %}
 {% block content %}
 {% if page.extra.thumbnail %}
@@ -9,85 +13,180 @@
 {% else %}
 {% set thumbnail = "client-placeholder.svg" %}
 {% endif %}
-<article class="content">
-    <div class="client-details">
-        <div class="details">
-            <img class="app-logo" src="../{{ thumbnail }}" alt="{{ page.title }} Logo">
-            <div class="name-and-release-date">
-                <h3>{{ page.title }}<div class="maturity {{ page.extra.maturity | lower }}">{{ page.extra.maturity }}
-                    </div>
-                </h3>
+<article class="content ecosystem-detail-page">
+    {{ breadcrumb::breadcrumb(l1_label="Ecosystem", l1_path="/ecosystem/", l2_label="Clients", l2_path="/ecosystem/clients/", l3_label=page.title) }}
+    <div class="ecosystem-detail">
+        <div class="ecosystem-detail-header">
+            <div class="ecosystem-detail-logo-wrap">
+                <img
+                    src="../{{ thumbnail }}"
+                    alt="{{ page.title }} logo"
+                    class="ecosystem-detail-logo"
+                />
             </div>
-            <p class="summary">{{ page.content | markdown | safe }}</p>
-            <div class="project-links">
-                {% if page.extra.website %}
-                <a href="{{ page.extra.website }}" class="pill">
-                    {{ load_data(path="/assets/home.svg") | safe }}
-                    Homepage
+            <div class="ecosystem-detail-header-text">
+                <h1 class="ecosystem-detail-name">
+                    {{ page.title }}
+                    <span class="maturity {{ page.extra.maturity | lower }}"
+                        >{{ page.extra.maturity }}</span
+                    >
+                </h1>
+                <div class="ecosystem-detail-meta">
+                    {% if page.extra.maintainer %}
+                    <span class="ecosystem-detail-meta-item"
+                        >By {{ page.extra.maintainer }}</span
+                    >
+                    {% endif %} {% if page.extra.latest_release %}
+                    <span class="ecosystem-detail-meta-item"
+                        >Latest release: {{ page.extra.latest_release }}</span
+                    >
+                    {% endif %} {% if page.extra.licence %}
+                    <span class="ecosystem-detail-meta-item"
+                        >{{ page.extra.licence }}</span
+                    >
+                    {% endif %}
+                </div>
+                <div class="platform-links">
+                    {{ clients::platforms(packages=page.extra.packages) }}
+                </div>
+            </div>
+        </div>
+
+        <div class="ecosystem-detail-main">
+            <div class="ecosystem-detail-description">
+                {{ page.content | safe }}
+            </div>
+
+            {% set screenshots = page.extra.screenshots | default(value=[]) %}
+            {% if screenshots | length > 0 %} {% set lightbox_id =
+            "detail-lightbox-" ~ page.slug %} {% set multi = screenshots |
+            length > 1 %}
+            <div
+                class="client-card-screenshot-wrap{% if multi %} client-card-screenshot-wrap--multi{% endif %}"
+            >
+                {% for shot in screenshots %} {% set shot_lightbox_id =
+                lightbox_id ~ "-" ~ loop.index %}
+                <a
+                    href="#{{ shot_lightbox_id }}"
+                    class="client-card-screenshot-trigger"
+                    aria-label="Enlarge screenshot"
+                >
+                    <img
+                        src="../{{ shot }}"
+                        alt="{{ page.title }} screenshot {{ loop.index }}"
+                        class="client-card-screenshot"
+                    />
                 </a>
-                {% endif %}
-                {% if page.extra.docs %}
-                <a href="{{ page.extra.docs }}" class="pill">
+                {% endfor %}
+            </div>
+            {% for shot in screenshots %} {% set shot_lightbox_id = lightbox_id
+            ~ "-" ~ loop.index %}
+            <div
+                class="client-lightbox"
+                id="{{ shot_lightbox_id }}"
+                role="dialog"
+                aria-label="{{ page.title }} screenshot"
+            >
+                <a
+                    href="#/"
+                    class="client-lightbox-backdrop"
+                    aria-label="Close"
+                ></a>
+                <a href="#/" class="client-lightbox-close" aria-label="Close"
+                    >&times;</a
+                >
+                <img
+                    src="../{{ shot }}"
+                    alt="{{ page.title }} screenshot {{ loop.index }}"
+                />
+            </div>
+            {% endfor %} {% endif %}
+
+            <div class="stores">
+                {{ clients::install_links(packages=page.extra.packages) }}
+            </div>
+
+            <div class="ecosystem-detail-actions">
+                {% if page.extra.website %}
+                <a
+                    href="{{ page.extra.website }}"
+                    class="call-to-action"
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    >Visit {{ page.title }}</a
+                >
+                {% endif %} {% if page.extra.docs %}
+                <a
+                    href="{{ page.extra.docs }}"
+                    class="call-to-action secondary"
+                >
                     {{ load_data(path="/assets/documentation.svg") | safe }}
                     Documentation
                 </a>
-                {% endif %}
-                {% if page.extra.matrix_room %}
-                <a href="https://matrix.to/#/{{ page.extra.matrix_room }}" class="pill">
-                    {{ load_data(path="/assets/support.svg") | safe }}
-                    Support room
+                {% endif %} {% if page.extra.matrix_room %}
+                <a
+                    href="https://matrix.to/#/{{ page.extra.matrix_room }}"
+                    class="call-to-action secondary"
+                >
+                    {{ load_data(path="/assets/support.svg") | safe }} Support
+                    room
                 </a>
-                {% endif %}
-                {% if page.extra.repo %}
-                <a href="{{ page.extra.repo }}" class="pill">
-                    {{ load_data(path="/assets/repository.svg") | safe }}
-                    Source Code
+                {% endif %} {% if page.extra.repo %}
+                <a
+                    href="{{ page.extra.repo }}"
+                    class="call-to-action secondary"
+                >
+                    {{ load_data(path="/assets/repository.svg") | safe }} Source
+                    Code
                 </a>
                 {% endif %}
             </div>
             <div class="stores">
                 {{ clients::install_links(packages=page.extra.packages) }}
             </div>
+            <p>Something wrong? <a href="https://github.com/matrix-org/matrix.org/issues/new?template=update-ecosystem-info.yaml">Report the issue here</a>.</p>
         </div>
-        <h4>Features</h4>
-        <div class="features-matrix">
-            {% for category, features in page.extra.features %}
-            <div class="features-category">
-                <h5>{{ clients::category_label(category_name=category) }}</h3>
-                <ul>
-                    {% for feature, supported in features %}
-                        <li
-                            class="{{ supported }}"
-                            aria-label="{{ clients::feature_aria_label(feature_name=feature, feature_status=supported) | trim}}"
-                            style="--tooltip-anchor-name: --tooltip-anchor-{{ feature }}"
-                        >
-                            <span aria-hidden>
-                                {{ clients::feature_label(feature_name=feature) | trim }}
-                            </span>
-                            <button
-                                class="tooltip-toggle"
-                                popovertarget="{{ feature }}-tooltip"
-                                type="button"
+
+        <aside class="ecosystem-detail-aside">
+            <h3 class="ecosystem-detail-aside-title">Features</h3>
+            <div class="ecosystem-detail-features">
+                {% for category, features in page.extra.features %}
+                <div class="features-category">
+                    <h5>{{ clients::category_label(category_name=category) }}</h5>
+                    <ul>
+                        {% for feature, supported in features %}
+                            <li
+                                class="{{ supported }}"
+                                aria-label="{{ clients::feature_aria_label(feature_name=feature, feature_status=supported) | trim}}"
+                                style="--tooltip-anchor-name: --tooltip-anchor-{{ feature }}"
                             >
-                                <img
-                                    role="button"
-                                    src="/assets/circle_question.svg"
+                                <span aria-hidden>
+                                    {{ clients::feature_label(feature_name=feature) | trim }}
+                                </span>
+                                <button
+                                    class="tooltip-toggle"
+                                    popovertarget="{{ feature }}-tooltip"
+                                    type="button"
                                 >
-                            </button>
-                            <div
-                                id="{{ feature }}-tooltip"
-                                class="tooltip-content"
-                                popover
-                            >
-                                {{ clients::feature_description(feature_name=feature) | trim }}
-                            </div>
-                        </li>
-                    {% endfor %}
-                </ul>
+                                    <img
+                                        role="button"
+                                        src="/assets/circle_question.svg"
+                                    >
+                                </button>
+                                <div
+                                    id="{{ feature }}-tooltip"
+                                    class="tooltip-content"
+                                    popover
+                                >
+                                    {{ clients::feature_description(feature_name=feature) | trim }}
+                                </div>
+                            </li>
+                        {% endfor %}
+                    </ul>
+                </div>
+                {% endfor %}
             </div>
-            {% endfor %}
-        </div>
-        <p>Something wrong? <a href="https://github.com/matrix-org/matrix.org/issues/new?template=update-ecosystem-info.yaml">Report the issue here</a>.</p>
+        </aside>
     </div>
 </article>
 {% endblock content %}
diff --git a/templates/ecosystem/clients.html b/templates/ecosystem/clients.html
index d97537256..e48b50c09 100644
--- a/templates/ecosystem/clients.html
+++ b/templates/ecosystem/clients.html
@@ -1,14 +1,19 @@
 {% extends "section.html" %}
 {% import "macros/clients.html" as clients %}
+{% import "macros/breadcrumb.html" as breadcrumb %}
 {% block head_extra %}
 <meta name="description" content="{{ section.extra.summary }}">
 <noscript>
     <link rel="stylesheet" href={{ get_url(path="/no-js.css" , cachebust=true) }} />
 </noscript>
 <script type="module" src={{ get_url(path="/js/clients.js" , cachebust=true) }}></script>
+<style>
+html { scroll-behavior: smooth; scroll-padding-top: calc(var(--navbar-height) + 1rem); }
+</style>
 {% endblock head_extra%}
 {% block content %}
 {% set clients = section.pages %}
+{% set featured_clients = clients | filter(attribute="extra.featured", value=true) | sort(attribute="extra.featured_order") %}
 {% set licences = [] %}
 {% set features = [] %}
 {% for client in clients %}
@@ -22,6 +27,7 @@
 {% set licences = licences | unique | sort %}
 {% set features = features | unique %}
 <div class="page-header">
+    {{ breadcrumb::breadcrumb(l1_label="Ecosystem", l1_path="/ecosystem/", l2_label="Clients") }}
     <div class="hero-block">
         <h1>{{ section.title }}</h1>
         <p>{{ section.extra.summary }}</p>
@@ -38,29 +44,81 @@ <h2>Featured clients</h2>
         mature ones you can safely use.
     </p>
 
-    <div class="projects-card-deck">
-        {% for client in clients %}
-        {% if client.extra.featured %}
-        <div>
-            <a href="{{ client.path }}" class="project-card client {{ clients::classes(client=client.extra) }}">
-                {# We're not using placeholders as a fallback because we want showcased clients to have an actual icon
-                #}
-                <img src="{{ client.extra.thumbnail }}" alt="{{ client.title }} Logo">
-                <div class="title-row">
-                    <h3>{{ client.title }}</h3>
-                    <div class="maturity {{ client.extra.maturity | lower }}">{{ client.extra.maturity }}</div>
+    <div class="ecosystem-client-cards">
+        {% for client in featured_clients %}
+        <details id="{{ client.slug }}" class="client-card">
+            <summary class="client-card-summary">
+                <div class="client-card-summary-inner">
+                    <img src="/ecosystem/clients/{{ client.extra.thumbnail }}"
+                         alt="{{ client.title }} logo"
+                         class="client-card-icon">
+                    <div class="client-card-header-text">
+                        <span class="client-card-name">
+                            {{ client.title }}
+                            <span class="maturity {{ client.extra.maturity | lower }}">{{ client.extra.maturity }}</span>
+                            <a href="#{{ client.slug }}" class="client-card-anchor" aria-label="Link to {{ client.title }}">#</a>
+                        </span>
+                        {% if client.extra.good_for %}
+                        <span class="client-card-good-for">Good for: {{ client.extra.good_for }}</span>
+                        {% else %}
+                        <span class="client-card-description-short">{{ client.content | markdown(inline=true) }}</span>
+                        {% endif %}
+                    </div>
+                    <div class="client-card-summary-platforms">
+                        {{ clients::platforms(packages=client.extra.packages) }}
+                    </div>
                 </div>
-                <div class="metadata-pills">
-                    <div class="pill licence">{{ client.extra.licence }}</div>
+            </summary>
+
+            <div class="client-card-body">
+                {% set lightbox_id = "eco-lightbox-" ~ client.slug %}
+                {% set screenshots = client.extra.screenshots | default(value=[]) %}
+                {% if screenshots | length > 0 %}
+                {% set multi = screenshots | length > 1 %}
+                <div class="client-card-screenshot-wrap{% if multi %} client-card-screenshot-wrap--multi{% endif %}">
+                    {% for shot in screenshots %}
+                    {% set shot_lightbox_id = lightbox_id ~ "-" ~ loop.index %}
+                    <a href="#{{ shot_lightbox_id }}" class="client-card-screenshot-trigger" aria-label="Enlarge screenshot">
+                        <img src="/ecosystem/clients/{{ shot }}"
+                             alt="{{ client.title }} screenshot {{ loop.index }}"
+                             class="client-card-screenshot">
+                    </a>
+                    {% endfor %}
                 </div>
-                <p class="description">{{ client.content | markdown(inline=true) | regex_replace(pattern=`<a.*>(?P<text>.*)</a>`, rep=`$text`) | safe }}</p>
-                <div class="card-links platform-links">
-                    {{ clients::platforms(packages=client.extra.packages) }}
+                {% for shot in screenshots %}
+                {% set shot_lightbox_id = lightbox_id ~ "-" ~ loop.index %}
+                <div class="client-lightbox" id="{{ shot_lightbox_id }}" role="dialog" aria-label="{{ client.title }} screenshot">
+                    <a href="#/" class="client-lightbox-backdrop" aria-label="Close"></a>
+                    <a href="#/" class="client-lightbox-close" aria-label="Close">&times;</a>
+                    <img src="/ecosystem/clients/{{ shot }}"
+                         alt="{{ client.title }} screenshot {{ loop.index }}">
                 </div>
-                <p class="open-project">Open client details</p>
-            </a>
-        </div>
-        {% endif %}
+                {% endfor %}
+                {% endif %}
+
+                <div class="client-card-details">
+                    <p class="client-card-description">{{ client.content | markdown(inline=true) }}</p>
+
+                    <div class="client-card-features">
+                        {% set feat = client.extra.features %}
+                        {% if feat.e2ee %}<span class="client-feat-pill">E2EE</span>{% endif %}
+                        {% if feat.spaces %}<span class="client-feat-pill">Spaces</span>{% endif %}
+                        {% if feat.threads %}<span class="client-feat-pill">Threads</span>{% endif %}
+                        {% if feat.voip_1to1 %}<span class="client-feat-pill">Voice &amp; video calls</span>{% endif %}
+                        {% if feat.voip_jitsi %}<span class="client-feat-pill">Group calls (Jitsi)</span>{% endif %}
+                        {% if feat.multi_account %}<span class="client-feat-pill">Multi-account</span>{% endif %}
+                        {% if feat.oauth %}<span class="client-feat-pill">OAuth 2.0</span>{% endif %}
+                        {% if feat.sso %}<span class="client-feat-pill">SSO</span>{% endif %}
+                    </div>
+
+                    <div class="client-card-downloads">
+                        {{ clients::install_links(packages=client.extra.packages) }}
+                    </div>
+
+                    <a href="{{ client.path }}" class="client-card-more-link">Full details &rarr;</a>
+                </div>
+            </div>
+        </details>
         {% endfor %}
     </div>
 
diff --git a/templates/macros/clients.html b/templates/macros/clients.html
index f0c471401..123399fd2 100644
--- a/templates/macros/clients.html
+++ b/templates/macros/clients.html
@@ -9,7 +9,7 @@
 {%- endif -%}
 {% endmacro %}
 
-{# Human-readable labels for features #}
+{# Human-readable label for a feature #}
 {% macro feature_label(feature_name) %}
 {%- if feature_name == "e2ee" -%}
 End-to-end encryption
@@ -88,31 +88,16 @@
 {%- endif -%}
 {% endmacro %}
 
+{# CSS filter classes for the all-clients card deck #}
 {% macro classes(client) %}
-{% if client.packages.apple_app_store.app_id and client.packages.apple_app_store.org %}
-platform-ios
-{% endif %}
-{% if client.packages.google_play_store.app_id %}
-platform-android
-{% endif %}
-{% if client.packages.flathub.app_id %}
-platform-flathub
-{% endif %}
-{% if client.packages.other_linux_link %}
-platform-linux
-{% endif %}
-{% if client.packages.webapp %}
-platform-web
-{% endif %}
-{% if client.packages.windows_installer %}
-platform-windows
-{% endif %}
-{% if client.packages.macos_installer %}
-platform-macos
-{% endif %}
-
+{% if client.packages.apple_app_store.app_id and client.packages.apple_app_store.org %}platform-ios {% endif %}
+{% if client.packages.google_play_store.app_id %}platform-android {% endif %}
+{% if client.packages.flathub.app_id %}platform-flathub {% endif %}
+{% if client.packages.other_linux_link %}platform-linux {% endif %}
+{% if client.packages.webapp %}platform-web {% endif %}
+{% if client.packages.windows_installer %}platform-windows {% endif %}
+{% if client.packages.macos_installer %}platform-macos {% endif %}
 maturity-{{ client.maturity | lower }}
-
 licence-{{ client.licence | slugify }}
 
 {% for feature_level_name, features in client.features %}
@@ -120,38 +105,34 @@
         {% if feature_state == "supported" %}feature-{{ feature_name | replace(from="_", to="-") }}{% endif %}
     {% endfor %}
 {% endfor %}
-{% endmacro classes %}
+{% endmacro %}
 
+{# Store badge install links #}
 {% macro install_links(packages) %}
 {% if packages.windows_installer %}
-<a href="{{ packages.windows_installer }}"><img src="/assets/stores/download_for_windows.svg"
-        alt="Download for Windows" /></a>
+<a href="{{ packages.windows_installer }}"><img src="/assets/stores/download_for_windows.svg" alt="Download for Windows" /></a>
 {% endif %}
 {% if packages.macos_installer %}
-<a href="{{ packages.macos_installer }}"><img src="/assets/stores/download_for_macos.svg"
-        alt="Download for macOS" /></a>
+<a href="{{ packages.macos_installer }}"><img src="/assets/stores/download_for_macos.svg" alt="Download for macOS" /></a>
 {% endif %}
 {% if packages.flathub %}
-<a href="https://flathub.org/apps/details/{{ packages.flathub.app_id }}"><img src="/assets/stores/flathub.svg"
-        alt="Download on Flathub" /></a>
+<a href="https://flathub.org/apps/details/{{ packages.flathub.app_id }}"><img src="/assets/stores/flathub.svg" alt="Download on Flathub" /></a>
 {% endif %}
 {% if packages.webapp %}
 <a href="{{ packages.webapp }}"><img src="/assets/stores/use_in_browser.svg" alt="Use in your browser" /></a>
 {% endif %}
 {% if packages.apple_app_store %}
-<a href="https://apps.apple.com/app/{{ packages.apple_app_store.org }}/{{ packages.apple_app_store.app_id }}"><img
-        src="/assets/stores/app_store.svg" alt="Download on the App Store" /></a>
+<a href="https://apps.apple.com/app/{{ packages.apple_app_store.org }}/{{ packages.apple_app_store.app_id }}"><img src="/assets/stores/app_store.svg" alt="Download on the App Store" /></a>
 {% endif %}
 {% if packages.f_droid %}
-<a href="https://f-droid.org/packages/{{ packages.f_droid.app_id }}"><img src="/assets/stores/f-droid.svg"
-        alt="Download on F-Droid" /></a>
+<a href="https://f-droid.org/packages/{{ packages.f_droid.app_id }}"><img src="/assets/stores/f-droid.svg" alt="Download on F-Droid" /></a>
 {% endif %}
 {% if packages.google_play_store %}
-<a href="https://play.google.com/store/apps/details?id={{ packages.google_play_store.app_id }}"><img
-        src="/assets/stores/play_store.svg" alt="Download on Google Play" /></a>
+<a href="https://play.google.com/store/apps/details?id={{ packages.google_play_store.app_id }}"><img src="/assets/stores/play_store.svg" alt="Download on Google Play" /></a>
 {% endif %}
 {% endmacro %}
 
+{# Colored platform pills #}
 {% macro platforms(packages) %}
 {% if packages.apple_app_store %}<div class="platform-pill platform-pill--ios">iOS</div>{% endif %}
 {% if packages.google_play_store or packages.f_droid %}<div class="platform-pill platform-pill--android">Android</div>{% endif %}

From 1ccceb168a7c3b5dc4bad5e7d5d281e88050abd3 Mon Sep 17 00:00:00 2001
From: MTRNord <MTRNord@users.noreply.github.com>
Date: Wed, 4 Mar 2026 08:47:59 +0100
Subject: [PATCH 03/17] redesign bridge network pages

Replace the old full-width implementation list with bridge-card components
that use the shared .ecosystem-detail-* layout. Each card has a two-column
grid (description + access pills on the left, feature support list on the
right). The bridge listing page gains a platforms-grid of clickable network
tiles. Add a bridges macro for feature labels and descriptions.

Signed-off-by: MTRNord <MTRNord@users.noreply.github.com>
---
 sass/_bridges.scss                            | 298 +++++++++++++++---
 .../ecosystem/bridge_implementations.html     | 208 ++++++++----
 templates/ecosystem/bridges.html              |   4 +-
 templates/macros/bridges.html                 |  67 ++++
 4 files changed, 466 insertions(+), 111 deletions(-)
 create mode 100644 templates/macros/bridges.html

diff --git a/sass/_bridges.scss b/sass/_bridges.scss
index 5c4fa24da..9d3ace551 100644
--- a/sass/_bridges.scss
+++ b/sass/_bridges.scss
@@ -4,68 +4,266 @@
 
 .platforms-grid {
     display: grid;
-    grid-template-columns: repeat(auto-fill, 17.6rem);
-    gap: .8rem;
+    grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
+    gap: 0.75rem;
     margin-block: 2rem 3rem;
     margin-inline: auto;
     justify-content: center;
+}
+
+.platform {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    gap: 1rem;
+    padding: 0.85rem 1.1rem;
+
+    color: var(--color-text);
+    text-decoration: none;
 
-    .platform {
-        @extend .clickable-card;
+    border: 1px solid #d2d2d2;
+    border-radius: 16px;
+    transition:
+        border-color 0.15s ease,
+        box-shadow 0.15s ease;
+
+    &:hover {
+        border-color: #999;
+        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
+    }
 
+    img {
+        width: 52px;
+        height: 52px;
+        flex-shrink: 0;
+        object-fit: contain;
+        border-radius: 10px;
+        border: 1px solid #e8e8e8;
+        padding: 0.3rem;
+        background: #fafafa;
+        box-sizing: border-box;
+    }
+
+    .details {
         display: flex;
-        flex-direction: row;
-        gap: 1rem;
-        align-items: center;
-        padding-block: .5rem;
-        padding-inline: .5rem 1rem;
-        cursor: pointer;
+        flex-direction: column;
+        gap: 0.15rem;
+        min-width: 0;
+
+        h2 {
+            font-size: 1.05rem;
+            font-weight: 700;
+            margin: 0;
+            line-height: 1.2;
+        }
+
+        p {
+            margin: 0;
+            font-size: 0.82rem;
+            color: #555;
+            line-height: 1.3;
+        }
+    }
+}
+
+.platform.no-bridge {
+    opacity: 0.35;
+    pointer-events: none;
+
+    img {
+        filter: grayscale(1);
+    }
+}
+
+// ── Bridge network detail page ────────────────────────────────────────────────
+
+.bridge-network-header {
+    max-width: 60rem;
+    margin-inline: auto;
+    padding-top: 1rem;
+    margin-bottom: 2rem;
+}
+
+.bridge-network-back {
+    align-self: flex-start;
+}
+
+.bridge-cards {
+    max-width: 60rem;
+    margin-inline: auto;
+    padding-bottom: 3rem;
+    display: flex;
+    flex-direction: column;
+    gap: 1.5rem;
+}
+
+.bridge-card {
+    border: 1px solid #d2d2d2;
+    border-radius: 16px;
+    overflow: hidden;
+}
+
+.bridge-card-header {
+    padding: 1.25rem 1.5rem 1rem;
+    border-bottom: 1px solid #e8e8e8;
+    display: flex;
+    flex-direction: column;
+    gap: 0.4rem;
+}
+
+.bridge-card-title-row {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: 0.5rem 1rem;
+}
+
+.bridge-card-name {
+    margin: 0;
+    font-size: 1.35rem;
+    font-weight: 700;
+    line-height: 1.2;
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: 0.5rem;
+}
+
+.bridge-card-anchor {
+    color: inherit;
+    text-decoration: none;
+
+    &:hover {
+        text-decoration: underline;
+    }
+}
+
+.bridge-card-recommended {
+    display: inline-block;
+    font-size: 0.78rem;
+    font-weight: 600;
+    color: #245c0c;
+    background-color: #dff6d5;
+    border: 1px solid #245c0c;
+    border-radius: 9999px;
+    padding: 0.1rem 0.55rem;
+    line-height: 1.6;
+}
+
+.bridge-card-access {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: 0.35rem;
+    margin-top: 0.1rem;
+}
+
+.bridge-card-access-label {
+    font-size: 0.8rem;
+    font-weight: 600;
+    color: #666;
+    text-transform: uppercase;
+    letter-spacing: 0.03em;
+    margin-right: 0.15rem;
+}
+
+.bridge-card-access-pill {
+    display: inline-flex;
+    align-items: center;
+    font-size: 0.8rem;
+    border-radius: 9999px;
+    padding: 0.1rem 0.6rem;
+    line-height: 1.6;
+    border: 1px solid;
+
+    // Platform side — muted indigo/blue
+    &--platform {
+        background-color: #eef0fb;
+        border-color: #8892d4;
+        color: #2c3894;
+    }
+
+    // Matrix side — Matrix green
+    &--matrix {
+        background-color: #dff6d5;
+        border-color: #4a9e2f;
+        color: #245c0c;
+    }
+}
+
+.bridge-card-grid {
+    display: grid;
+    grid-template-columns: 1fr 15rem;
 
-        color: var(--color-text);
+    @media (max-width: 700px) {
+        grid-template-columns: 1fr;
+    }
+}
 
-        border: 1px solid #d2d2d2;
-        border-radius: 12px;
-        transition: border-color 0.3s ease, background-color 0.3s ease;
+.bridge-card-left {
+    // Left column holds both the header and main — the aside spans full height
+    display: flex;
+    flex-direction: column;
+    min-width: 0;
+}
 
-        img {
-            width: 64px;
-            height: 64px;
+.bridge-card-main {
+    padding: 1.25rem 1.5rem;
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+    flex: 1;
+}
+
+.bridge-card-features {
+    background-color: #fafafa;
+    border-left: 1px solid #e8e8e8;
+    padding: 1.25rem 1rem;
+    @media (max-width: 700px) {
+        border-left: none;
+        border-top: 1px solid #e8e8e8;
+        background-color: #fafafa;
+    }
 
-            border: 1px solid #d2d2d2;
-            border-radius: 15px;
+    .ecosystem-detail-features {
+        dl {
+            border: none;
+            border-radius: 0;
         }
 
-        .details {
-            display: flex;
-            flex-direction: column;
+        .feature-row {
+            gap: 0.1rem;
+            padding: 0.4rem 0.5rem;
+            border-radius: 8px;
 
-            h2 {
-                font-size: 1.5rem;
-                font-weight: 700;
-                margin: 0;
-                line-height: 1.2;
+            & + .feature-row {
+                border-top: none;
             }
 
-            p {
-                margin: 0;
-                font-size: .875rem;
-                color: #545454;
+            &.supported {
+                background-color: transparent;
+            }
+
+            &.unsupported {
+                opacity: 0.5;
             }
         }
 
-        &:hover {
-            background-color: #e9e9e9;
-            border-color: #000;
+        dt {
+            font-size: 0.85rem;
+        }
+
+        dd {
+            font-size: 0.75rem;
+            padding-left: calc(1em + 0.4rem);
+            color: #666;
         }
     }
 }
 
-.platform.no-bridge {
-    opacity: 0.15;          
-    pointer-events: none;  
-}
+// ── Legacy styles (kept for any other pages still referencing them) ────────────
 
-.bridges_implem> :nth-child(even) {
+.bridges_implem > :nth-child(even) {
     background-color: #fafafa;
 }
 
@@ -87,23 +285,19 @@
     }
 
     .title-row {
-        display: flex;
-        flex-direction: row;
         align-items: center;
         justify-content: flex-start;
-        gap: .5rem;
-        width: auto;
+        gap: 0.5rem;
 
         h3 {
-            margin-block: .5rem;
-            text-align: left;
+            margin-block: 1rem;
         }
     }
 
     .recommended-chip {
         display: flex;
         align-items: center;
-        gap: .2rem;
+        gap: 0.2rem;
         max-width: fit-content;
         font-style: normal;
         border-bottom: 1px dotted var(--borders-color);
@@ -113,23 +307,23 @@
     .licence {
         display: flex;
         flex-wrap: wrap;
-        gap: .5rem;
-        margin-block: .5rem;
+        gap: 0.5rem;
+        margin-block: 0.5rem;
         margin-bottom: 1rem;
     }
 
-    .privileges>div,
-    .licence>div {
+    .privileges > div,
+    .licence > div {
         display: flex;
         flex-direction: row;
         flex-wrap: wrap;
-        gap: .5rem;
+        gap: 0.5rem;
 
         div,
         a {
             background-color: #e9e9e9;
             border-radius: 9999px;
-            padding-inline: .5rem;
+            padding-inline: 0.5rem;
             color: var(--color-text);
         }
     }
diff --git a/templates/ecosystem/bridge_implementations.html b/templates/ecosystem/bridge_implementations.html
index 0f5d3f8e7..40754839a 100644
--- a/templates/ecosystem/bridge_implementations.html
+++ b/templates/ecosystem/bridge_implementations.html
@@ -1,71 +1,163 @@
 {% extends "section.html" %}
+{% import "macros/bridges.html" as bridges %}
+{% import "macros/breadcrumb.html" as breadcrumb %}
 {% block content %}
-<div class="page-header">
-    <div class="hero-block">
-        <h1>{{ section.title }}</h1>
-        <p>All the {{ section.title }} bridges</p>
-    </div>
-</div>
+{% set bridges_data = load_data(path=section.path~"bridges.toml") %}
 
-<div class="bridges_implem">
-    {% set bridges_data = load_data(path=section.path~"bridges.toml") %}
-    {% for bridge in bridges_data.bridges %}
-    <div class="implementation-bg">
-        <div class="implementation">
-            <div class="leftcol">
-                {% if bridge.featured %}<div class="recommended-chip">Recommended</div>{% endif %}
-                <div class="title-row">
-                    <h3 id="{{ bridge.name | slugify }}">{{ bridge.name }}</h3>
-                    <div class="maturity {{ bridge.maturity | lower }}">{{ bridge.maturity | title }}</div>
-                </div>
-                <p>{{ bridge.summary | markdown(inline=true) | safe }}</p>
-                <div class="project-links">
-                    {% if bridge.docs %}
-                    <a href="{{ bridge.docs }}" class="pill">
-                        {{ load_data(path="/assets/documentation.svg") | safe }}
-                        Documentation
-                    </a>
-                    {% endif %}
-                    {% if bridge.room %}
-                    <a href="https://matrix.to/#/{{ bridge.room }}" class="pill">
-                        {{ load_data(path="/assets/support.svg") | safe }}
-                        Support room
-                    </a>
-                    {% endif %}
-                    {% if bridge.repo %}
-                    <a href="{{ bridge.repo }}" class="pill">
-                        {{ load_data(path="/assets/repository.svg") | safe }}
-                        Repository
-                    </a>
+<article class="content ecosystem-detail-page">
+    {{ breadcrumb::breadcrumb(l1_label="Ecosystem", l1_path="/ecosystem/", l2_label="Bridges", l2_path="/ecosystem/bridges/", l3_label=section.title) }}
+    <div class="bridge-network-header">
+        <div class="ecosystem-detail-header">
+            <div class="ecosystem-detail-logo-wrap">
+                <img
+                    src="{{ section.path }}logo.svg"
+                    alt="{{ section.title }} logo"
+                    class="ecosystem-detail-logo"
+                />
+            </div>
+            <div class="ecosystem-detail-header-text">
+                <h1 class="ecosystem-detail-name">{{ section.title }}</h1>
+                <div class="ecosystem-detail-meta">
+                    <span class="ecosystem-detail-meta-item">
+                        {{ bridges_data.bridges | length }} bridge{% if
+                        bridges_data.bridges | length != 1 %}s{% endif %}
+                    </span>
+                    {% set featured_count = 0 %} {% for bridge in
+                    bridges_data.bridges %} {% if bridge.featured %}{% set_global featured_count = featured_count + 1 %}{% endif %}
+                    {% endfor %} {% if featured_count > 0 %}
+                    <span class="ecosystem-detail-meta-item">
+                        {{ featured_count }} recommended
+                    </span>
                     {% endif %}
                 </div>
-                <div class="privileges">
-                    Access needed:
-                    <div>
-                        <div>{{ section.title }} {{ bridge.privilege.platform }}</div>
-                        <div>Matrix {{ bridge.privilege.matrix }}</div>
+            </div>
+        </div>
+    </div>
+
+    <div class="bridge-cards">
+        {% for bridge in bridges_data.bridges %}
+        <div class="bridge-card" id="{{ bridge.name | slugify }}">
+            <div class="bridge-card-grid">
+                <div class="bridge-card-left">
+                    <div class="bridge-card-header">
+                        <div class="bridge-card-title-row">
+                            <h2 class="bridge-card-name">
+                                <a
+                                    href="#{{ bridge.name | slugify }}"
+                                    class="bridge-card-anchor"
+                                    >{{ bridge.name }}</a
+                                >
+                                <span class="maturity {{ bridge.maturity | lower }}"
+                                    >{{ bridge.maturity | title }}</span
+                                >
+                            </h2>
+                            {% if bridge.featured %}
+                            <span class="bridge-card-recommended">Recommended</span>
+                            {% endif %}
+                        </div>
+                        <div class="ecosystem-detail-meta">
+                            {% if bridge.maintainer %}
+                            <span class="ecosystem-detail-meta-item"
+                                >By {{ bridge.maintainer }}</span
+                            >
+                            {% endif %} {% if bridge.language %}
+                            <span class="ecosystem-detail-meta-item"
+                                >{{ bridge.language }}</span
+                            >
+                            {% endif %} {% if bridge.license %}
+                            <span class="ecosystem-detail-meta-item">
+                                <a
+                                    href="https://spdx.org/licenses/{{ bridge.license }}.html"
+                                    target="_blank"
+                                    rel="noopener noreferrer"
+                                    >{{ bridge.license }}</a
+                                >
+                            </span>
+                            {% endif %}
+                        </div>
                     </div>
-                </div>
-                <div class="licence">
-                    Licence: 
-                    <div>
-                        <a href="https://spdx.org/licenses/{{ bridge.license }}.html">{{ bridge.license }}</a>
+
+                    <div class="bridge-card-main">
+                        <div class="ecosystem-detail-description">
+                            {{ bridge.summary | markdown | safe }}
+                        </div>
+
+                        <div class="bridge-card-access">
+                            <span class="bridge-card-access-label"
+                                >Access needed</span
+                            >
+                            <span class="bridge-card-access-pill bridge-card-access-pill--platform"
+                                >{{ section.title }} {{ bridge.privilege.platform }}</span
+                            >
+                            <span class="bridge-card-access-pill bridge-card-access-pill--matrix"
+                                >Matrix {{ bridge.privilege.matrix }}</span
+                            >
+                        </div>
+
+                        <div class="ecosystem-detail-actions">
+                            {% if bridge.docs %}
+                            <a
+                                href="{{ bridge.docs }}"
+                                class="call-to-action secondary"
+                                target="_blank"
+                                rel="noopener noreferrer"
+                            >
+                                {{ load_data(path="/assets/documentation.svg") | safe }}
+                                Documentation
+                            </a>
+                            {% endif %} {% if bridge.room %}
+                            <a
+                                href="https://matrix.to/#/{{ bridge.room }}"
+                                class="call-to-action secondary"
+                                target="_blank"
+                                rel="noopener noreferrer"
+                            >
+                                {{ load_data(path="/assets/support.svg") | safe }}
+                                Support room
+                            </a>
+                            {% endif %} {% if bridge.repo %}
+                            <a
+                                href="{{ bridge.repo }}"
+                                class="call-to-action secondary"
+                                target="_blank"
+                                rel="noopener noreferrer"
+                            >
+                                {{ load_data(path="/assets/repository.svg") | safe }}
+                                Source Code
+                            </a>
+                            {% endif %}
+                        </div>
+
+                        <p>Something wrong? Report the issue <a href="https://github.com/matrix-org/matrix.org/issues/new?template=update-ecosystem-info.yaml">here</a>.</p>
                     </div>
                 </div>
-            </div>
-            <div class="features-matrix">
-                <ul>
-                    {% for feature, supported in bridge.supports %}
-                    <li class="{% if not supported %}un{% endif %}supported">
-                        {{ feature | replace(from="_", to=" ") | title }}
-                    </li>
-                    {% endfor %}
-                </ul>
-                <p>Something wrong? Report the issue <a href="https://github.com/matrix-org/matrix.org/issues/new?template=update-ecosystem-info.yaml">here</a>.</p>
+
+                {% if bridge.supports %}
+                <aside class="bridge-card-features">
+                    <h3 class="ecosystem-detail-aside-title">
+                        Supported features
+                    </h3>
+                    <div class="ecosystem-detail-features">
+                        <dl>
+                            {% for feature, supported in bridge.supports %}
+                            <div
+                                class="feature-row{% if supported %} supported{% else %} unsupported{% endif %}"
+                            >
+                                <dt>
+                                    <span class="feature-row-indicator"></span>
+                                    {{ bridges::feature_label(feature_name=feature) | trim }}
+                                </dt>
+                                <dd>{{ bridges::feature_description(feature_name=feature) | trim }}</dd>
+                            </div>
+                            {% endfor %}
+                        </dl>
+                    </div>
+                </aside>
+                {% endif %}
             </div>
         </div>
+        {% endfor %}
     </div>
-    {% endfor %}
+</article>
 
-</div>
 {% endblock content %}
diff --git a/templates/ecosystem/bridges.html b/templates/ecosystem/bridges.html
index 1f16f8548..522cf6071 100644
--- a/templates/ecosystem/bridges.html
+++ b/templates/ecosystem/bridges.html
@@ -1,9 +1,11 @@
 {% extends "section.html" %}
+{% import "macros/breadcrumb.html" as breadcrumb %}
 {% block head_extra %}
 <meta name="description" content="{{ section.extra.summary }}">
 {% endblock head_extra %}
 {% block content %}
 <div class="page-header">
+    {{ breadcrumb::breadcrumb(l1_label="Ecosystem", l1_path="/ecosystem/", l2_label="Bridges") }}
     <div class="hero-block">
         <h1>{{ section.title }}</h1>
         <p>{{ section.extra.summary }}</p>
@@ -18,7 +20,7 @@ <h1>{{ section.title }}</h1>
         {% for subsection_path in section.subsections %}
         {% set subsection = get_section(path=subsection_path) %}
         {% set bridges_data = load_data(path=subsection.path~"bridges.toml") %}
-        <a href="{{ subsection.path }}" 
+        <a href="{{ subsection.path }}"
            class="platform {% if not bridges_data.bridges %}no-bridge{% endif %}">
             <img src="{{ subsection.path }}logo.svg" alt="{{ subsection.title }} Logo" />
             <div class="details">
diff --git a/templates/macros/bridges.html b/templates/macros/bridges.html
new file mode 100644
index 000000000..f61241ef8
--- /dev/null
+++ b/templates/macros/bridges.html
@@ -0,0 +1,67 @@
+{# Bridge feature macros for the matrix.org website. #}
+
+{# Human-readable label for a bridge feature key #}
+{% macro feature_label(feature_name) %}
+{% if feature_name == "dm" %}Direct messages
+{% elif feature_name == "channels" %}Channels
+{% elif feature_name == "channel" %}Channels
+{% elif feature_name == "groups" %}Groups
+{% elif feature_name == "group_chats" %}Group chats
+{% elif feature_name == "group_chat" %}Group chats
+{% elif feature_name == "formatted_text" %}Formatted text
+{% elif feature_name == "message_media" %}Media messages
+{% elif feature_name == "attachments" %}Attachments
+{% elif feature_name == "replies" %}Replies
+{% elif feature_name == "mentions" %}Mentions
+{% elif feature_name == "threads" %}Threads
+{% elif feature_name == "redactions" %}Redactions
+{% elif feature_name == "editing" %}Message editing
+{% elif feature_name == "reactions" %}Reactions
+{% elif feature_name == "presence" %}Presence
+{% elif feature_name == "typing_notifications" %}Typing notifications
+{% elif feature_name == "read_receipts" %}Read receipts
+{% elif feature_name == "encryption" %}Encryption
+{% elif feature_name == "history" %}History sync
+{% elif feature_name == "history_from_android" %}History from Android
+{% elif feature_name == "mms" %}MMS
+{% elif feature_name == "sms" %}SMS
+{% elif feature_name == "rcs" %}RCS
+{% elif feature_name == "sending_mail" %}Sending mail
+{% elif feature_name == "receiving_mail" %}Receiving mail
+{% elif feature_name == "quotes" %}Quotes
+{% elif feature_name == "communities" %}Communities
+{% elif feature_name == "multi_domain" %}Multi-domain
+{% else %}{{ feature_name | replace(from="_", to=" ") | title }}
+{% endif %}
+{% endmacro %}
+
+{# Short description for a bridge feature key #}
+{% macro feature_description(feature_name) %}
+{% if feature_name == "dm" %}Bridge direct/private messages between users.
+{% elif feature_name == "channels" or feature_name == "channel" %}Bridge public or private channels to Matrix rooms.
+{% elif feature_name == "groups" or feature_name == "group_chats" or feature_name == "group_chat" %}Bridge group conversations to Matrix rooms.
+{% elif feature_name == "formatted_text" %}Rich text formatting such as bold, italic, and code blocks is preserved.
+{% elif feature_name == "message_media" %}Images, video, audio and other file attachments are bridged.
+{% elif feature_name == "attachments" %}File attachments are bridged across platforms.
+{% elif feature_name == "replies" %}Threaded replies are bridged and displayed correctly on both sides.
+{% elif feature_name == "mentions" %}User @mentions are bridged and resolve to the correct users.
+{% elif feature_name == "threads" %}Threaded conversations are kept intact across the bridge.
+{% elif feature_name == "redactions" %}Deleted messages are removed on the other side of the bridge.
+{% elif feature_name == "editing" %}Edited messages are updated on both sides of the bridge.
+{% elif feature_name == "reactions" %}Emoji reactions are synced across the bridge.
+{% elif feature_name == "presence" %}Online/offline presence status is synced across the bridge.
+{% elif feature_name == "typing_notifications" %}Typing indicators are shown while the other party is composing.
+{% elif feature_name == "read_receipts" %}Read receipts are synced so you can see when messages have been read.
+{% elif feature_name == "encryption" %}End-to-end encryption is supported across the bridge.
+{% elif feature_name == "history" %}Past message history is available after connecting the bridge.
+{% elif feature_name == "history_from_android" %}Message history can be imported from an Android device.
+{% elif feature_name == "mms" %}MMS multimedia messages are bridged.
+{% elif feature_name == "sms" %}SMS text messages are bridged.
+{% elif feature_name == "rcs" %}RCS rich communication messages are bridged.
+{% elif feature_name == "sending_mail" %}You can send emails from Matrix.
+{% elif feature_name == "receiving_mail" %}Incoming emails appear as Matrix messages.
+{% elif feature_name == "quotes" %}Quoted messages are preserved when bridging.
+{% elif feature_name == "communities" %}Platform communities or servers are bridged as Matrix spaces.
+{% elif feature_name == "multi_domain" %}Bridging across multiple domains or workspaces is supported.
+{% endif %}
+{% endmacro %}

From 246a318a2f60c6516d5e2284d7cc3ec62fdaca5c Mon Sep 17 00:00:00 2001
From: MTRNord <MTRNord@users.noreply.github.com>
Date: Wed, 4 Mar 2026 08:48:00 +0100
Subject: [PATCH 04/17] redesign hosting listing and add provider detail pages

Replace the shortcode-based hosting list with a card grid that reuses the
.project-card / .hosting-provider-card pattern. Add a hosting-provider.html
detail template using the shared .ecosystem-detail--single layout (no
features aside). Update the hosting_providers shortcode formatting.

Signed-off-by: MTRNord <MTRNord@users.noreply.github.com>
---
 sass/_hosting.scss                          | 147 +++++++++++++-------
 templates/ecosystem/hosting-provider.html   |  66 +++++++++
 templates/ecosystem/hosting.html            |  56 +++++++-
 templates/shortcodes/hosting_providers.html |  18 ++-
 4 files changed, 221 insertions(+), 66 deletions(-)
 create mode 100644 templates/ecosystem/hosting-provider.html

diff --git a/sass/_hosting.scss b/sass/_hosting.scss
index d5b4d3759..a55584545 100644
--- a/sass/_hosting.scss
+++ b/sass/_hosting.scss
@@ -1,9 +1,8 @@
+// ── Hosting section page ──────────────────────────────────────────────────────
+
 .hosting_page {
     margin: 0 auto;
-    padding-block: 5.625rem 2rem;
-    @media (max-width: 767px) {
-        padding: 5.625rem 32px 2rem 32px;
-    }
+    padding-top: 3rem;
 
     h2 {
         text-align: center;
@@ -12,57 +11,97 @@
         margin-bottom: 1rem;
     }
 
-    .hosting_providers {
-        display: grid;
-        grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
-        gap: 3.125rem;
-        justify-content: center;
-        align-items: stretch;
+    > p {
+        text-align: left;
+        font-weight: 400;
+        font-size: 1.125rem;
+        line-height: 1.6;
+        margin: 0 0 1rem 0;
+    }
+}
+
+// ── Provider listing grid ─────────────────────────────────────────────────────
+// Mirrors the .projects-card-deck pattern used by clients.
+
+.hosting-provider-cards {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, 17.6rem);
+    justify-content: center;
+    gap: 1rem;
+    margin-inline: auto;
+    margin-bottom: 5rem;
+
+    @media (max-width: 767px) {
+        max-width: 17.6rem;
+    }
+}
+
+.hosting-provider-cards > div {
+    height: 100%;
+    width: 100%;
+}
+
+.hosting-provider-card {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    padding: 1.5rem;
+    gap: 0.75rem;
+    min-height: 100%;
+
+    border: 1px solid #d2d2d2;
+    border-radius: 16px;
+    color: var(--color-text);
+    text-decoration: none;
+    transition: border-color 0.2s ease;
+
+    &:hover {
+        border-color: #888;
+    }
+
+    .hosting-provider-logo-container {
         width: 100%;
+        height: 3.5rem;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+    }
+
+    img {
+        height: 3.5rem;
+        width: auto;
+        max-width: 100%;
+        object-fit: contain;
+        margin: 0;
+    }
+
+    h3 {
+        margin: 0;
+        font-size: 1.3rem;
+        font-weight: 700;
+        text-align: center;
+        line-height: 1.2;
+    }
+
+    .provider-since {
+        margin: 0;
+        font-size: 0.85rem;
+        color: #666;
+        line-height: 1;
+    }
+
+    .provider-audience-tags {
+        display: flex;
+        flex-wrap: wrap;
+        gap: 0.3rem;
+        justify-content: center;
+    }
 
-        .provider_card {
-            display: flex;
-            flex-direction: column;
-            justify-content: space-between;
-
-            padding: 32px;
-            width: 100%;
-            margin: 0 auto;
-
-            border: 1px solid #d2d2d2;
-            border-radius: 16px;
-
-            .details {
-                text-align: center;
-
-                .provider_logo_container {
-                    height: 10rem;
-                }
-
-                h3 {
-                    height: 5rem;
-                    margin: 0;
-                    text-align: center;
-
-                    font-style: normal;
-                    font-weight: 700;
-                    font-size: 2rem;
-                    line-height: 120%;
-                }
-
-                .operating_since {
-                    height: 1.5rem;
-                    font-size: 0.9rem;
-                }
-            }
-
-            .call-to-action {
-                background-color: #000;
-                color: #fff;
-                border-radius: 1000px;
-                padding: 0.4rem 2rem;
-                align-self: center;
-            }
-        }
+    .open-project {
+        margin-top: auto;
+        color: var(--color-text-light);
+        font-size: 0.9rem;
+        line-height: 1;
     }
 }
diff --git a/templates/ecosystem/hosting-provider.html b/templates/ecosystem/hosting-provider.html
new file mode 100644
index 000000000..3923a7a2d
--- /dev/null
+++ b/templates/ecosystem/hosting-provider.html
@@ -0,0 +1,66 @@
+{% extends "page.html" %}
+{% import "macros/breadcrumb.html" as breadcrumb %}
+{% block head_extra %}
+<meta
+    name="description"
+    content="{{ page.content | striptags | truncate(length=160) }}"
+/>
+{% endblock head_extra %}
+{% block content %}
+<article class="content ecosystem-detail-page">
+    {{ breadcrumb::breadcrumb(l1_label="Ecosystem", l1_path="/ecosystem/", l2_label="Hosting", l2_path="/ecosystem/hosting/", l3_label=page.title) }}
+    <div class="ecosystem-detail ecosystem-detail--single">
+        <div class="ecosystem-detail-header">
+            {% if page.extra.image %}
+            <div class="ecosystem-detail-logo-wrap">
+                <img
+                    src="/ecosystem/hosting/{{ page.extra.image }}"
+                    alt="{{ page.title }} logo"
+                    class="ecosystem-detail-logo"
+                />
+            </div>
+            {% endif %}
+            <div class="ecosystem-detail-header-text">
+                <h1 class="ecosystem-detail-name">{{ page.title }}</h1>
+                <div class="ecosystem-detail-meta">
+                    {% if page.extra.operating_since %}
+                    <span class="ecosystem-detail-meta-item"
+                        >Operating since {{ page.extra.operating_since }}</span
+                    >
+                    {% endif %}
+                    <span class="ecosystem-detail-meta-item">
+                        {% if page.extra.b2c %}
+                        <span class="audience-tag audience-tag--consumer"
+                            >Individuals</span
+                        >
+                        {% endif %} {% if page.extra.b2b %}
+                        <span class="audience-tag audience-tag--business"
+                            >Business</span
+                        >
+                        {% endif %}
+                    </span>
+                </div>
+            </div>
+        </div>
+
+        <div class="ecosystem-detail-main">
+            <div class="ecosystem-detail-description">
+                {{ page.content | safe }}
+            </div>
+
+            <div class="ecosystem-detail-actions">
+            {% if page.extra.website %}
+            <a
+                href="{{ page.extra.website }}"
+                class="call-to-action"
+                target="_blank"
+                rel="noopener noreferrer"
+            >
+                Visit {{ page.title }}
+            </a>
+            {% endif %}
+            </div>
+        </div>
+    </div>
+</article>
+{% endblock content %}
diff --git a/templates/ecosystem/hosting.html b/templates/ecosystem/hosting.html
index f89f6245d..693511b4e 100644
--- a/templates/ecosystem/hosting.html
+++ b/templates/ecosystem/hosting.html
@@ -1,18 +1,60 @@
-{% extends "page.html" %}
+{% extends "section.html" %}
+{% import "macros/breadcrumb.html" as breadcrumb %}
 {% block head_extra %}
-<meta name="description" content="{{ page.extra.summary }}">
+<meta name="description" content="{{ section.extra.summary }}" />
+<style>
+    html {
+        scroll-behavior: smooth;
+        scroll-padding-top: calc(var(--navbar-height) + 1rem);
+    }
+</style>
 {% endblock head_extra %}
 {% block content %}
 <div class="page-header">
+    {{ breadcrumb::breadcrumb(l1_label="Ecosystem", l1_path="/ecosystem/", l2_label="Hosting") }}
     <div class="hero-block">
-        <h1>{{ page.title }}</h1>
-        <p>{{ page.extra.summary }}</p>
+        <h1>{{ section.title }}</h1>
+        <p>{{ section.extra.summary }}</p>
     </div>
 </div>
 
 <div class="content hosting_page">
-
-    {{ page.content | safe }}
-
+    {{ section.content | safe }}
+    {% if section.pages %}
+    <div class="hosting-provider-cards">
+        {% for provider in section.pages %}
+        <div>
+            <a
+                href="{{ provider.path }}"
+                class="project-card hosting-provider-card"
+            >
+                {% if provider.extra.image %}
+                <div class="hosting-provider-logo-container">
+                    <img
+                        src="/ecosystem/hosting/{{ provider.extra.image }}"
+                        alt="{{ provider.title }} logo"
+                    />
+                </div>
+                {% endif %}
+                <h3>{{ provider.title }}</h3>
+                {% if provider.extra.operating_since %}
+                <p class="provider-since">
+                    Since {{ provider.extra.operating_since }}
+                </p>
+                {% endif %}
+                <div class="provider-audience-tags">
+                    {% if provider.extra.b2c %}
+                    <span class="audience-tag audience-tag--consumer">Individuals</span>
+                    {% endif %}
+                    {% if provider.extra.b2b %}
+                    <span class="audience-tag audience-tag--business">Business</span>
+                    {% endif %}
+                </div>
+                <p class="open-project">View details</p>
+            </a>
+        </div>
+        {% endfor %}
+    </div>
+    {% endif %}
 </div>
 {% endblock content %}
diff --git a/templates/shortcodes/hosting_providers.html b/templates/shortcodes/hosting_providers.html
index b2e3f5f22..1cd966927 100644
--- a/templates/shortcodes/hosting_providers.html
+++ b/templates/shortcodes/hosting_providers.html
@@ -1,16 +1,24 @@
-{% set providers_data = load_data(path="content/ecosystem/hosting/providers.toml") %}
+{% set providers_data =
+load_data(path="content/ecosystem/hosting/providers.toml") %}
 <div class="hosting_providers">
     {% for provider in providers_data.providers %}
     <div class="provider_card">
         <div class="details">
             <div class="provider_logo_container">
-                <img src="/ecosystem/hosting/{{ provider.image }}" alt="Logo of {{ provider.name }}" />
+                <img
+                    src="/ecosystem/hosting/{{ provider.image }}"
+                    alt="Logo of {{ provider.name }}"
+                />
             </div>
             <h3>{{ provider.name }}</h3>
-            <div class="operating_since">Operating since {{ provider.operating_since }}</div>
+            <div class="operating_since">
+                Operating since {{ provider.operating_since }}
+            </div>
         </div>
-        <p>{{ provider.description | markdown(inline=true) | safe }}</p>
-        <a href="{{ provider.website }}" class="call-to-action">Try {{ provider.name }}</a>
+        <p>{{ provider.description | markdown | safe }}</p>
+        <a href="{{ provider.website }}" class="call-to-action"
+            >Try {{ provider.name }}</a
+        >
     </div>
     {% endfor %}
 </div>

From 5c499e4649fe92dc3530c5f15ff338a578af56f2 Mon Sep 17 00:00:00 2001
From: MTRNord <MTRNord@users.noreply.github.com>
Date: Wed, 4 Mar 2026 08:48:00 +0100
Subject: [PATCH 05/17] update servers, distributions, SDKs and integrations
 pages

Minor template updates across the remaining ecosystem listing pages:
consistent page-header hero markup, SDK pill classes now include licence
and language slugs for colour coding matching the client card pill scheme.

Signed-off-by: MTRNord <MTRNord@users.noreply.github.com>
---
 templates/ecosystem/distributions.html | 4 +++-
 templates/ecosystem/integrations.html  | 5 ++---
 templates/ecosystem/sdks.html          | 7 +++----
 templates/ecosystem/servers.html       | 4 +++-
 templates/macros/sdks.html             | 8 ++++----
 5 files changed, 15 insertions(+), 13 deletions(-)

diff --git a/templates/ecosystem/distributions.html b/templates/ecosystem/distributions.html
index f71ebab8e..42e0d847d 100644
--- a/templates/ecosystem/distributions.html
+++ b/templates/ecosystem/distributions.html
@@ -1,13 +1,15 @@
 {% extends "page.html" %}
+{% import "macros/breadcrumb.html" as breadcrumb %}
 {% block head_extra %}
 <meta name="description" content="{{ page.extra.summary }}">
 <noscript>
     <link rel="stylesheet" href="/no-js.css" />
 </noscript>
 <script type="module" src="/js/distributions.js"></script>
-{% endblock head_extra%}
+{% endblock head_extra %}
 {% block content %}
 <div class="page-header">
+    {{ breadcrumb::breadcrumb(l1_label="Ecosystem", l1_path="/ecosystem/", l2_label="Distributions") }}
     <div class="hero-block">
         <h1>{{ page.title }}</h1>
         <p>{{ page.extra.summary }}</p>
diff --git a/templates/ecosystem/integrations.html b/templates/ecosystem/integrations.html
index 48c48d3f6..8bc4eb755 100644
--- a/templates/ecosystem/integrations.html
+++ b/templates/ecosystem/integrations.html
@@ -1,15 +1,14 @@
 {% extends "page.html" %}
+{% import "macros/breadcrumb.html" as breadcrumb %}
 {% block content %}
 <div class="page-header">
+    {{ breadcrumb::breadcrumb(l1_label="Ecosystem", l1_path="/ecosystem/", l2_label="Integrations") }}
     <div class="hero-block">
         <h1>{{ page.title }}</h1>
         <p>{{ page.extra.summary }}</p>
     </div>
 </div>
-
 <div class="content integrations_page">
-
     {{ page.content | safe }}
-
 </div>
 {% endblock content %}
diff --git a/templates/ecosystem/sdks.html b/templates/ecosystem/sdks.html
index da51ec3c0..d15422958 100644
--- a/templates/ecosystem/sdks.html
+++ b/templates/ecosystem/sdks.html
@@ -1,4 +1,5 @@
 {% extends "page.html" %}
+{% import "macros/breadcrumb.html" as breadcrumb %}
 {% block head_extra %}
 <meta name="description" content="{{ page.extra.summary }}">
 <noscript>
@@ -6,18 +7,16 @@
 </noscript>
 <script type="module" src={{ get_url(path="/js/sdks.js" , cachebust=true) }}></script>
 <script type="module" src={{ get_url(path="/js/panel-selector.js" , cachebust=true) }}></script>
-{% endblock head_extra%}
+{% endblock head_extra %}
 {% block content %}
 <div class="page-header">
+    {{ breadcrumb::breadcrumb(l1_label="Ecosystem", l1_path="/ecosystem/", l2_label="SDKs") }}
     <div class="hero-block">
         <h1>{{ page.title }}</h1>
         <p>{{ page.extra.summary }}</p>
     </div>
 </div>
-
 <div class="content sdks-page">
-
     {{ page.content | safe }}
-
 </div>
 {% endblock content %}
diff --git a/templates/ecosystem/servers.html b/templates/ecosystem/servers.html
index 5e3a8f045..7345bac52 100644
--- a/templates/ecosystem/servers.html
+++ b/templates/ecosystem/servers.html
@@ -1,13 +1,15 @@
 {% extends "page.html" %}
+{% import "macros/breadcrumb.html" as breadcrumb %}
 {% block head_extra %}
 <meta name="description" content="{{ page.extra.summary }}">
 <noscript>
     <link rel="stylesheet" href={{ get_url(path="/no-js.css" , cachebust=true) }} />
 </noscript>
 <script type="module" src={{ get_url(path="/js/servers.js" , cachebust=true) }}></script>
-{% endblock head_extra%}
+{% endblock head_extra %}
 {% block content %}
 <div class="page-header">
+    {{ breadcrumb::breadcrumb(l1_label="Ecosystem", l1_path="/ecosystem/", l2_label="Servers") }}
     <div class="hero-block">
         <h1>{{ page.title }}</h1>
         <p>{{ page.extra.summary }}</p>
diff --git a/templates/macros/sdks.html b/templates/macros/sdks.html
index fcace2a83..991aa81b9 100644
--- a/templates/macros/sdks.html
+++ b/templates/macros/sdks.html
@@ -94,10 +94,10 @@
                     <h3>{{ sdk.name }}</h3>
                     <div class="maturity {{ sdk.maturity | lower }}">{{ sdk.maturity }}</div>
                 </div>
-                {% if sdk.maintainer %}<div class="subtitle">{{ sdk.maintainer }}</div>{% endif %}
-                <div class="metadata-pills">
-                    <div class="pill licence">{{ sdk.licence }}</div>
-                    <div class="pill">{{ sdk.language }}</div>
+                <div class="author">{{ sdk.maintainer }}</div>
+                <div class="licence-language">
+                    <div class="pill pill--licence pill--licence-{{ sdk.licence | slugify }}">{{ sdk.licence }}</div>
+                    <div class="pill pill--lang pill--lang-{{ lang_helper::normalize_language(lang=sdk.language) }}">{{ sdk.language }}</div>
                 </div>
                 {% if sdk.description %}<p class="description">{{ sdk.description | markdown(inline=true) | regex_replace(pattern=`<a.*>(?P<text>.*)</a>`, rep=`$text`) | safe }}</p>{% endif %}
                 <div class="card-links server-links">

From 545f6b8646bc390d88ac40c115a70fb3ed186e8c Mon Sep 17 00:00:00 2001
From: MTRNord <MTRNord@users.noreply.github.com>
Date: Wed, 4 Mar 2026 08:48:01 +0100
Subject: [PATCH 06/17] deduplicate CSS across ecosystem and try-matrix

Move .client-card*, .platform-pill*, screenshot and lightbox rules from
_try-matrix.scss into _clients.scss so both pages share one source of
truth. Extract shared .server-links / .distribution-links and intro
paragraph styles into SCSS placeholders in _projects.scss, removing the
duplicate blocks from _servers.scss and _distributions.scss.

Signed-off-by: MTRNord <MTRNord@users.noreply.github.com>
---
 sass/_distributions.scss |  62 +-----
 sass/_projects.scss      |  64 ++++++
 sass/_servers.scss       |  58 +-----
 sass/_try-matrix.scss    | 437 +--------------------------------------
 4 files changed, 78 insertions(+), 543 deletions(-)

diff --git a/sass/_distributions.scss b/sass/_distributions.scss
index 648b031ea..c83be5ee4 100644
--- a/sass/_distributions.scss
+++ b/sass/_distributions.scss
@@ -1,70 +1,20 @@
 .distributions {
     p {
-        text-align: center;
-        font-weight: 400;
-        font-size: 1.125rem;
-        line-height: 120%;
-        margin: 0 auto 4rem auto;
+        @extend %ecosystem-page-intro;
     }
 }
 
 .distribution-links {
-    margin-top: auto;
-    display: flex;
-    flex-direction: row;
-    flex-wrap: wrap;
-    justify-content: center;
-    gap: .7rem;
-
-    a {
-        display: flex;
-        align-items: center;
-        gap: .3rem;
-
-        border: 1px solid #777;
-        border-radius: 999px;
-        padding-inline: .5rem;
-
-        font-size: .8rem;
-
-        svg {
-            width: 1.2em;
-            height: 1.2em;
-
-            * {
-                fill: #777;
-            }
-
-            line {
-                stroke: #777;
-            }
-        }
-    }
-
-    a:hover {
-        color: #fff;
-        background-color: #777;
-
-        svg {
-
-            * {
-                fill: #fff;
-            }
-
-            line {
-                stroke: #fff;
-            }
-        }
-    }
+    @extend %eco-link-pills;
 }
 
 .standard {
     border: 1px solid var(--borders-color);
     border-radius: 9999px;
-    padding: 0 .6rem;
+    padding: 0 0.6rem;
     font-weight: 600;
     justify-self: flex-end;
-    background-color: #F6D5D5;
-    border-color: #8B1212;
-    color: #8B1212;
+    background-color: #f6d5d5;
+    border-color: #8b1212;
+    color: #8b1212;
 }
diff --git a/sass/_projects.scss b/sass/_projects.scss
index 50c66eb02..f38151419 100644
--- a/sass/_projects.scss
+++ b/sass/_projects.scss
@@ -495,3 +495,67 @@ a.pill {
         }
     }
 }
+
+// ── Shared ecosystem intro paragraph ─────────────────────────────────────────
+// Used by .servers > p and .distributions > p (and any future listing pages)
+// for the centred intro text that sits below the page heading.
+
+%ecosystem-page-intro {
+    text-align: center;
+    font-weight: 400;
+    font-size: 1.125rem;
+    line-height: 120%;
+    margin: 0 auto 4rem auto;
+}
+
+// ── Shared ecosystem link-pill row ────────────────────────────────────────────
+// Wrapping flex row of pill-shaped links used by .server-links and
+// .distribution-links.  Extend this placeholder to get the full set of rules
+// without duplicating them.
+
+%eco-link-pills {
+    margin-top: auto;
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    justify-content: center;
+    gap: 0.35rem;
+
+    a {
+        display: inline-flex;
+        align-items: center;
+        gap: 0.25rem;
+
+        border: 1px solid var(--borders-color);
+        border-radius: 9999px;
+        padding: 0.1rem 0.5rem;
+
+        font-size: 0.78rem;
+        color: var(--color-text);
+        text-decoration: none;
+        transition:
+            background-color 0.15s ease,
+            border-color 0.15s ease,
+            color 0.15s ease;
+
+        svg {
+            width: 1em;
+            height: 1em;
+            flex-shrink: 0;
+
+            * {
+                fill: currentColor;
+            }
+
+            line {
+                stroke: currentColor;
+            }
+        }
+    }
+
+    a:hover {
+        background-color: var(--color-text);
+        border-color: var(--color-text);
+        color: #fff;
+    }
+}
diff --git a/sass/_servers.scss b/sass/_servers.scss
index 849744f85..cebddcbd3 100644
--- a/sass/_servers.scss
+++ b/sass/_servers.scss
@@ -1,63 +1,9 @@
 .servers {
     p {
-        text-align: center;
-        font-weight: 400;
-        font-size: 1.125rem;
-        line-height: 120%;
-        margin: 0 auto 4rem auto;
+        @extend %ecosystem-page-intro;
     }
 }
 
 .server-links {
-    margin-top: auto;
-    display: flex;
-    flex-direction: row;
-    flex-wrap: wrap;
-    justify-content: center;
-    gap: .7rem;
-
-    a {
-        display: flex;
-        align-items: center;
-        gap: .3rem;
-
-        border: 1px solid #777;
-        border-radius: 999px;
-        padding-inline: .5rem;
-
-        font-size: .8rem;
-
-        transition: background-color 0.3s ease;
-
-        svg {
-            width: 1.2em;
-            height: 1.2em;
-
-            * {
-                fill: #777;
-                transition: fill 0.3s ease;
-            }
-
-            line {
-                stroke: #777;
-                transition: stroke 0.3s ease;
-            }
-        }
-    }
-
-    a:hover {
-        color: #fff;
-        background-color: #777;
-
-        svg {
-
-            * {
-                fill: #fff;
-            }
-
-            line {
-                stroke: #fff;
-            }
-        }
-    }
+    @extend %eco-link-pills;
 }
diff --git a/sass/_try-matrix.scss b/sass/_try-matrix.scss
index cc05e6741..0fa33a837 100644
--- a/sass/_try-matrix.scss
+++ b/sass/_try-matrix.scss
@@ -160,7 +160,10 @@
         }
     }
 
-    // ── Client cards (details/summary dropdowns) ──────────────────────────────
+    // ── Client cards ──────────────────────────────────────────────────────────
+    // All .client-card*, .platform-pill*, .client-lightbox* and
+    // .client-card-screenshot* rules live globally in _clients.scss.
+    // Only the cards container margin differs on this page.
 
     .client-cards {
         display: flex;
@@ -170,420 +173,6 @@
         margin-bottom: 0.5rem;
     }
 
-    .client-card {
-        border: 1px solid #d2d2d2;
-        border-radius: 14px;
-        overflow: hidden;
-        transition: border-color 0.2s ease;
-
-        &[open] {
-            border-color: #aaa;
-        }
-
-        &:hover {
-            border-color: #888;
-        }
-    }
-
-    // Summary row (always visible)
-    .client-card-summary {
-        list-style: none;
-        cursor: pointer;
-        padding: 0.85rem 1.1rem;
-        user-select: none;
-
-        @media (max-width: 600px) {
-            padding: 0.5rem 0.75rem;
-        }
-
-        // Remove default browser marker
-        &::-webkit-details-marker {
-            display: none;
-        }
-        &::marker {
-            display: none;
-        }
-
-        &:hover {
-            background-color: #fafafa;
-        }
-    }
-
-    .client-card-summary-inner {
-        display: grid;
-        // icon | header text | platforms | chevron
-        grid-template-columns: 40px 1fr auto 0.75rem;
-        align-items: center;
-        gap: 0 0.85rem;
-
-        @media (max-width: 600px) {
-            grid-template-columns: 36px 1fr 0.75rem;
-        }
-
-        // Chevron via pseudo-element in the last column
-        &::after {
-            content: "";
-            display: block;
-            justify-self: center;
-            width: 0.55rem;
-            height: 0.55rem;
-            border-right: 2px solid #666;
-            border-bottom: 2px solid #666;
-            transform: rotate(45deg);
-            transition: transform 0.2s ease;
-        }
-    }
-
-    .client-card[open] .client-card-summary-inner::after {
-        transform: rotate(-135deg) translateY(-2px);
-    }
-
-    .client-card-icon {
-        width: 40px;
-        height: 40px;
-        flex-shrink: 0;
-        border-radius: 8px;
-        object-fit: contain;
-
-        @media (max-width: 600px) {
-            width: 100%;
-            height: auto;
-            aspect-ratio: 1;
-            border-radius: 10px;
-        }
-    }
-
-    .client-card-header-text {
-        display: flex;
-        flex-direction: column;
-        gap: 0.15rem;
-        min-width: 0;
-    }
-
-    .client-card-name {
-        font-weight: 700;
-        font-size: 1.05rem;
-        line-height: 1.2;
-
-        @media (max-width: 600px) {
-            font-size: 1rem;
-        }
-    }
-
-    .client-card-anchor {
-        font-size: 0.85rem;
-        font-weight: 400;
-        color: #aaa;
-        text-decoration: none;
-        margin-left: 0.3rem;
-        opacity: 0;
-        transition: opacity 0.15s ease;
-
-        &:hover {
-            color: var(--color-link);
-        }
-    }
-
-    .client-card-summary:hover .client-card-anchor {
-        opacity: 1;
-    }
-
-    .client-card-good-for {
-        font-size: 0.95rem;
-        color: #555;
-        line-height: 1.3;
-
-        @media (max-width: 600px) {
-            font-size: 0.875rem;
-        }
-    }
-
-    .client-card-summary-platforms {
-        display: flex;
-        flex-wrap: wrap;
-        gap: 0.25rem;
-        justify-content: center;
-
-        @media (max-width: 600px) {
-            display: none;
-        }
-    }
-
-    // Expanded body
-    .client-card-body {
-        display: grid;
-        grid-template-columns: 440px minmax(0, 1fr);
-        gap: 0;
-        border-top: 1px solid #e8e8e8;
-
-        @media (max-width: 700px) {
-            grid-template-columns: 1fr;
-        }
-    }
-
-    // Screenshot column — always 4:3
-    .client-card-screenshot-wrap {
-        background-color: #f5f5f5;
-        aspect-ratio: 4 / 3;
-        overflow: hidden;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        padding: 0.75rem;
-        gap: 0.5rem;
-    }
-
-    .client-card-screenshot-trigger {
-        position: relative;
-        display: block;
-        cursor: zoom-in;
-        line-height: 0;
-
-        // Expand badge — visible in bottom-right corner on all devices
-        &::after {
-            content: "⤢";
-            position: absolute;
-            bottom: 0.4rem;
-            right: 0.4rem;
-            font-size: 1.1rem;
-            line-height: 1;
-            background: rgba(0, 0, 0, 0.55);
-            color: #fff;
-            padding: 0.3rem 0.5rem;
-            border-radius: 4px;
-            pointer-events: none;
-            opacity: 0.85;
-            z-index: 1;
-        }
-    }
-
-    .client-card-screenshot {
-        display: block;
-        max-width: 100%;
-        max-height: 100%;
-        width: auto;
-        height: auto;
-        object-fit: contain;
-        object-position: center;
-        border-radius: 4px;
-    }
-
-    // Multi-screenshot layout — images sit side by side, each fills its slot
-    // with cover so the 4:3 container is always full
-    .client-card-screenshot-wrap--multi {
-        padding: 0.5rem;
-        align-items: stretch;
-
-        .client-card-screenshot-trigger {
-            flex: 1;
-            min-width: 0;
-            overflow: hidden;
-            border-radius: 4px;
-        }
-
-        .client-card-screenshot {
-            width: 100%;
-            height: 100%;
-            max-width: unset;
-            max-height: unset;
-            object-fit: cover;
-            object-position: top center;
-            border-radius: 0;
-        }
-    }
-
-    // ── CSS-only lightbox via :target ─────────────────────────────────────────
-
-    .client-lightbox {
-        display: none;
-        position: fixed;
-        inset: 0;
-        z-index: 1000;
-        align-items: center;
-        justify-content: center;
-
-        &:target {
-            display: flex;
-        }
-
-        img {
-            position: relative;
-            z-index: 2;
-            max-width: min(90vw, 1200px);
-            max-height: 90vh;
-            width: auto;
-            height: auto;
-            object-fit: contain;
-            border-radius: 10px;
-            box-shadow: 0 8px 40px rgba(0, 0, 0, 0.6);
-            margin: 0;
-        }
-    }
-
-    .client-lightbox-backdrop {
-        position: fixed;
-        inset: 0;
-        z-index: 1;
-        background: rgba(0, 0, 0, 0.85);
-        cursor: zoom-out;
-    }
-
-    .client-lightbox-close {
-        position: fixed;
-        top: 1rem;
-        right: 1.25rem;
-        z-index: 3;
-        font-size: 2rem;
-        line-height: 1;
-        color: #fff;
-        text-decoration: none;
-        opacity: 0.8;
-        cursor: pointer;
-
-        &:hover {
-            opacity: 1;
-        }
-    }
-
-    .client-card-screenshot-placeholder {
-        span {
-            font-size: 0.85rem;
-            color: #999;
-            font-style: italic;
-        }
-    }
-
-    // Details column (description, features, downloads)
-    .client-card-details {
-        padding: 1.25rem 1.5rem;
-        display: flex;
-        flex-direction: column;
-        gap: 1rem;
-
-        @media (max-width: 700px) {
-            padding: 0.85rem 1rem;
-            gap: 0.75rem;
-        }
-    }
-
-    .client-card-description {
-        margin: 0;
-        font-size: 1rem;
-        line-height: 1.55;
-        color: var(--color-text);
-
-        @media (max-width: 700px) {
-            font-size: 0.9rem;
-        }
-    }
-
-    // Feature pills inside the card
-    .client-card-features {
-        display: flex;
-        flex-wrap: wrap;
-        gap: 0.35rem;
-    }
-
-    .client-feat-pill {
-        display: inline-block;
-        padding: 0.2rem 0.6rem;
-        border-radius: 9999px;
-        font-size: 0.78rem;
-        font-weight: 500;
-        background-color: #e9f0ff;
-        color: #1a3a80;
-        border: 1px solid #bcd0f7;
-        white-space: nowrap;
-    }
-
-    // Store badge download links row
-    .client-card-downloads {
-        display: flex;
-        flex-wrap: wrap;
-        gap: 0.5rem;
-        align-items: center;
-
-        a {
-            display: inline-block;
-            line-height: 0;
-
-            img {
-                height: 36px;
-                width: auto;
-                max-width: none;
-                margin: 0;
-                border-radius: 6px;
-
-                @media (max-width: 700px) {
-                    height: 44px;
-                }
-            }
-        }
-    }
-
-    .client-card-more-link {
-        display: inline-block;
-        align-self: flex-start;
-        font-size: 0.85rem;
-        font-weight: 600;
-        color: var(--color-text);
-        background-color: #f0f0f0;
-        border: 1px solid #d2d2d2;
-        border-radius: 9999px;
-        padding: 0.3rem 0.9rem;
-        text-decoration: none;
-        transition:
-            background-color 0.15s ease,
-            border-color 0.15s ease;
-
-        &:hover {
-            background-color: #e4e4e4;
-            border-color: #aaa;
-        }
-    }
-
-    // Platform pill colours (used inside summary platforms row)
-    .platform-pill {
-        display: inline-block;
-        font-size: 0.72rem;
-        padding: 0.1rem 0.45rem;
-        border-radius: 9999px;
-        border: 1px solid;
-        white-space: nowrap;
-        font-weight: 500;
-    }
-
-    .platform-pill--ios {
-        background: #e8f1ff;
-        color: #1a4db0;
-        border-color: #99bbee;
-    }
-    .platform-pill--android {
-        background: #e6f4ea;
-        color: #1a6b32;
-        border-color: #7acc8a;
-    }
-    .platform-pill--web {
-        background: #ede9fe;
-        color: #5b21b6;
-        border-color: #c4b5fd;
-    }
-    .platform-pill--windows {
-        background: #e6f9f7;
-        color: #0a6b62;
-        border-color: #7fd6ce;
-    }
-    .platform-pill--macos {
-        background: #f3f3f3;
-        color: #374151;
-        border-color: #d1d5db;
-    }
-    .platform-pill--linux {
-        background: #fff4e5;
-        color: #92400e;
-        border-color: #fcd9a0;
-    }
-
     // ── Account tiers (Create an account section) ─────────────────────────────
 
     .account-tiers {
@@ -844,24 +433,10 @@
             justify-content: center;
         }
 
+        // .audience-tag colours are defined globally in _clients.scss;
+        // only override the font-size for the compact carousel context.
         .audience-tag {
             font-size: 0.7rem;
-            padding: 0.1rem 0.4rem;
-            border-radius: 9999px;
-            border: 1px solid;
-            white-space: nowrap;
-
-            &--consumer {
-                background: #e8f1ff;
-                color: #1a4db0;
-                border-color: #99bbee;
-            }
-
-            &--business {
-                background: #f3f3f3;
-                color: #374151;
-                border-color: #d1d5db;
-            }
         }
     }
 

From 387358f96c3198da449028aae020b3f33687000e Mon Sep 17 00:00:00 2001
From: MTRNord <MTRNord@users.noreply.github.com>
Date: Wed, 4 Mar 2026 08:48:01 +0100
Subject: [PATCH 07/17] add breadcrumb navigation to ecosystem pages

Replace the back buttons on detail pages with a breadcrumb nav
(Ecosystem > Section > Item) and add top-level breadcrumbs to all
listing pages (Ecosystem > Section). Uses a shared Tera macro and two
SCSS context variants: white-on-dark inside .page-header and grey on
the light .ecosystem-detail-page background.

Signed-off-by: MTRNord <MTRNord@users.noreply.github.com>
---
 sass/_projects.scss              | 78 ++++++++++++++++++++++++++++++++
 templates/macros/breadcrumb.html | 18 ++++++++
 2 files changed, 96 insertions(+)
 create mode 100644 templates/macros/breadcrumb.html

diff --git a/sass/_projects.scss b/sass/_projects.scss
index f38151419..7dfbe581c 100644
--- a/sass/_projects.scss
+++ b/sass/_projects.scss
@@ -496,6 +496,84 @@ a.pill {
     }
 }
 
+// ── Breadcrumb navigation ─────────────────────────────────────────────────────
+// Used on all ecosystem pages. Two contexts:
+//   1. Inside .page-header (dark background) — text is white/muted-white
+//   2. Inside .ecosystem-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: rgba(255, 255, 255, 0.7);
+
+            &:hover {
+                color: #fff;
+            }
+        }
+
+        span {
+            color: rgba(255, 255, 255, 0.45);
+        }
+
+        li + li::before {
+            color: rgba(255, 255, 255, 0.45);
+        }
+    }
+
+    // ── Light context (inside .ecosystem-detail-page) ────────────────────────
+    .ecosystem-detail-page & {
+        margin-bottom: 1.25rem;
+
+        a {
+            color: #555;
+
+            &:hover {
+                color: var(--color-text);
+            }
+        }
+
+        span {
+            color: #aaa;
+        }
+
+        li + li::before {
+            color: #ccc;
+        }
+    }
+}
+
 // ── Shared ecosystem intro paragraph ─────────────────────────────────────────
 // Used by .servers > p and .distributions > p (and any future listing pages)
 // for the centred intro text that sits below the page heading.
diff --git a/templates/macros/breadcrumb.html b/templates/macros/breadcrumb.html
new file mode 100644
index 000000000..506f8b8d7
--- /dev/null
+++ b/templates/macros/breadcrumb.html
@@ -0,0 +1,18 @@
+{% macro breadcrumb(l1_label, l1_path, l2_label="", l2_path="", l3_label="") %}
+<nav class="breadcrumb" aria-label="Breadcrumb">
+    <ol>
+        <li><a href="{{ l1_path }}">{{ l1_label }}</a></li>
+        {% if l2_label %}
+        <li>
+            {% if l3_label %}
+            <a href="{{ l2_path }}">{{ l2_label }}</a>
+            {% else %}
+            <span aria-current="page">{{ l2_label }}</span>
+            {% endif %}
+        </li>
+        {% endif %} {% if l3_label %}
+        <li><span aria-current="page">{{ l3_label }}</span></li>
+        {% endif %}
+    </ol>
+</nav>
+{% endmacro %}

From fb478b64a9dd569291b6491fb5bff52edf166158 Mon Sep 17 00:00:00 2001
From: MTRNord <MTRNord@users.noreply.github.com>
Date: Thu, 5 Mar 2026 11:08:05 +0100
Subject: [PATCH 08/17] improve margin

Signed-off-by: MTRNord <MTRNord@users.noreply.github.com>
---
 sass/_projects.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/sass/_projects.scss b/sass/_projects.scss
index 7dfbe581c..354fdddbc 100644
--- a/sass/_projects.scss
+++ b/sass/_projects.scss
@@ -66,7 +66,7 @@ a.project-card {
         font-size: 0.85rem;
         line-height: 1.45;
         color: #555;
-        margin: 0 0 0.75rem;
+        margin: 0;
         flex-shrink: 0;
         text-align: left;
     }

From 0691e1b9a6f8d3bc73a1f3c8843fcf47ef5ef274 Mon Sep 17 00:00:00 2001
From: MTRNord <MTRNord@users.noreply.github.com>
Date: Thu, 9 Jul 2026 17:58:59 +0200
Subject: [PATCH 09/17] improve layout to work with recent main changes and
 overall relax it a bit.

Signed-off-by: MTRNord <MTRNord@users.noreply.github.com>
---
 sass/_bridges.scss                            |  18 +--
 sass/_clients.scss                            |  43 ++++--
 sass/_projects.scss                           | 134 +++++-------------
 .../ecosystem/bridge_implementations.html     |   8 +-
 templates/ecosystem/client.html               |  60 ++++----
 templates/ecosystem/clients.html              |  82 +----------
 templates/macros/clients.html                 |  79 +++++++++++
 templates/macros/sdks.html                    |   2 +-
 templates/shortcodes/all_servers.html         |  11 +-
 templates/try-matrix.html                     |  75 +---------
 10 files changed, 200 insertions(+), 312 deletions(-)

diff --git a/sass/_bridges.scss b/sass/_bridges.scss
index 9d3ace551..96eec73f0 100644
--- a/sass/_bridges.scss
+++ b/sass/_bridges.scss
@@ -12,6 +12,8 @@
 }
 
 .platform {
+    @extend .clickable-card;
+
     display: flex;
     flex-direction: row;
     align-items: center;
@@ -23,24 +25,12 @@
 
     border: 1px solid #d2d2d2;
     border-radius: 16px;
-    transition:
-        border-color 0.15s ease,
-        box-shadow 0.15s ease;
-
-    &:hover {
-        border-color: #999;
-        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
-    }
 
     img {
         width: 52px;
         height: 52px;
         flex-shrink: 0;
         object-fit: contain;
-        border-radius: 10px;
-        border: 1px solid #e8e8e8;
-        padding: 0.3rem;
-        background: #fafafa;
         box-sizing: border-box;
     }
 
@@ -51,7 +41,7 @@
         min-width: 0;
 
         h2 {
-            font-size: 1.05rem;
+            font-size: 1.2rem;
             font-weight: 700;
             margin: 0;
             line-height: 1.2;
@@ -59,7 +49,7 @@
 
         p {
             margin: 0;
-            font-size: 0.82rem;
+            font-size: 0.9rem;
             color: #555;
             line-height: 1.3;
         }
diff --git a/sass/_clients.scss b/sass/_clients.scss
index 4227803c7..17d0feb4b 100644
--- a/sass/_clients.scss
+++ b/sass/_clients.scss
@@ -124,12 +124,10 @@ body:has(.projects-card-deck > div > .client-checkbox:checked) {
 }
 
 // ── Shared <details> expand card component ────────────────────────────────────
-// Used on /ecosystem/clients/ (featured section) and /ecosystem/hosting/.
-// Mirrors the .client-card design from _try-matrix.scss so both pages share
-// the same design language.
+// Used by the featured_client_card() macro on /try-matrix/ and the
+// featured section of /ecosystem/clients/.
 
-.ecosystem-client-cards,
-.hosting-provider-cards {
+.client-cards {
     display: flex;
     flex-direction: column;
     gap: 0.6rem;
@@ -894,7 +892,7 @@ body:has(.projects-card-deck > div > .client-checkbox:checked) {
     // Dot separator between items
     & + &::before {
         content: "·";
-        margin-right: 0.75rem;
+        margin-right: 0.4rem;
         color: #ccc;
     }
 }
@@ -936,8 +934,21 @@ body:has(.projects-card-deck > div > .client-checkbox:checked) {
     margin: 0 0 0.6rem 0;
 }
 
-// Feature support list as a definition list
+// Feature support list as a definition list, grouped by category
 .ecosystem-detail-features {
+    .features-category {
+        & + .features-category {
+            margin-top: 1rem;
+        }
+    }
+
+    .features-category-title {
+        font-size: 0.8rem;
+        font-weight: 700;
+        color: #666;
+        margin: 0 0 0.4rem;
+    }
+
     dl {
         border: 1px solid var(--borders-color);
         border-radius: 16px;
@@ -965,7 +976,7 @@ body:has(.projects-card-deck > div > .client-checkbox:checked) {
         line-height: 1.3;
     }
 
-    // Tick / cross indicator element
+    // Support-state indicator element
     .feature-row-indicator {
         display: inline-block;
         width: 1em;
@@ -974,9 +985,17 @@ body:has(.projects-card-deck > div > .client-checkbox:checked) {
         background-size: contain;
         background-repeat: no-repeat;
         background-position: center;
+        background-image: url("/assets/question_unknown.svg");
+    }
+
+    .feature-row.unsupported .feature-row-indicator {
         background-image: url("/assets/cross_unsupported.svg");
     }
 
+    .feature-row.partial .feature-row-indicator {
+        background-image: url("/assets/flask_partial.svg");
+    }
+
     .feature-row.supported .feature-row-indicator {
         background-image: url("/assets/tick_supported.svg");
     }
@@ -997,4 +1016,12 @@ body:has(.projects-card-deck > div > .client-checkbox:checked) {
     flex-wrap: wrap;
     gap: 0.75rem;
     align-items: center;
+
+    // These sit inline in a detail-page sidebar, not as hero CTAs —
+    // shrink the otherwise-global .call-to-action sizing to fit.
+    .call-to-action {
+        font-size: 0.9rem;
+        font-weight: 500;
+        padding: 0.4em 1.1em;
+    }
 }
diff --git a/sass/_projects.scss b/sass/_projects.scss
index 354fdddbc..5a53199cc 100644
--- a/sass/_projects.scss
+++ b/sass/_projects.scss
@@ -19,56 +19,45 @@ a.project-card {
 .project-card {
     display: flex;
     flex-direction: column;
-    align-items: flex-start;
-    padding: 1.1rem 1.25rem 1.1rem;
-    gap: 0;
-    text-align: left;
+    justify-content: flex-start;
+    align-items: center;
+    padding: 24px;
+    gap: 0.75rem;
+    text-align: center;
 
     min-height: 100%;
 
     border: 1px solid #d2d2d2;
     border-radius: 16px;
-    transition:
-        border-color 0.15s ease,
-        box-shadow 0.15s ease;
-
-    &:hover {
-        border-color: #999;
-        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
-    }
 
     // ── Logo + name header row ────────────────────────────────────────────────
     img {
-        margin: 0 0 0.65rem;
-        width: 44px;
-        height: 44px;
+        margin: 0;
+        width: 52px;
+        height: 52px;
         object-fit: contain;
-        border-radius: 10px;
-        border: 1px solid #e8e8e8;
-        padding: 0.25rem;
-        background: #fafafa;
         box-sizing: border-box;
         flex-shrink: 0;
     }
 
     h3 {
-        margin: 0 0 0.4rem;
+        margin: 0;
         font-style: normal;
         font-weight: 700;
-        font-size: 1.05rem;
+        font-size: 1.2rem;
         line-height: 1.25;
-        text-align: left;
+        text-align: center;
     }
 
     // ── Description ───────────────────────────────────────────────────────────
     p,
     & > span {
-        font-size: 0.85rem;
+        font-size: 0.9rem;
         line-height: 1.45;
         color: #555;
         margin: 0;
         flex-shrink: 0;
-        text-align: left;
+        text-align: center;
     }
 
     // ── Pills row — always immediately above the CTA ──────────────────────────
@@ -79,65 +68,25 @@ a.project-card {
         flex-wrap: wrap;
         gap: 0.25rem;
         margin-top: auto;
-        margin-bottom: 0.6rem;
         align-self: stretch;
         justify-content: center;
     }
 
     .pill {
-        display: inline-block;
-        font-size: 0.75rem;
-        background-color: #f3f3f3;
-        border: 1px solid #d1d5db;
-        border-radius: 9999px;
-        padding: 0.05rem 0.5rem;
+        background-color: #e9e9e9;
+        border: 1px solid transparent;
+        border-radius: 16px;
+        padding: 0.2rem 0.5rem;
         color: var(--color-text);
-        line-height: 1.6;
-    }
-
-    // ── Licence pill colour families ──────────────────────────────────────────
-    // Permissive (MIT, Apache, ISC, BSD, CC0, Artistic, MIT-Modern-Variant)
-    .pill--licence-mit,
-    .pill--licence-mit-modern-variant,
-    .pill--licence-apache-2-0,
-    .pill--licence-isc,
-    .pill--licence-bsd,
-    .pill--licence-cc0-1-0,
-    .pill--licence-artistic-2-0 {
-        background-color: #e6f4ea;
-        border-color: #7acc8a;
-        color: #1a6b32;
-    }
-
-    // Strong copyleft (GPL family, AGPL)
-    .pill--licence-gpl-1-0-or-later,
-    .pill--licence-gpl-3-0,
-    .pill--licence-gpl-3-0-only,
-    .pill--licence-gpl-3-0-or-later,
-    .pill--licence-agpl-3-0,
-    .pill--licence-agpl-3-0-only,
-    .pill--licence-agpl-3-0-or-later {
-        background-color: #fff4e5;
-        border-color: #fcd9a0;
-        color: #92400e;
-    }
-
-    // Weak copyleft (LGPL, MPL, EUPL)
-    .pill--licence-lgpl-2-1-only,
-    .pill--licence-lgpl-3-0-only,
-    .pill--licence-lgpl-3-0-or-later,
-    .pill--licence-mpl-2-0,
-    .pill--licence-eupl-1-2 {
-        background-color: #e8f1ff;
-        border-color: #99bbee;
-        color: #1a4db0;
-    }
+        font-size: 0.85rem;
+        line-height: 1.2;
+        text-align: center;
 
-    // Unknown / no licence
-    .pill--licence-none {
-        background-color: #f3f3f3;
-        border-color: #d1d5db;
-        color: #555;
+        &.licence {
+            background-color: transparent;
+            border-color: #888;
+            color: #555;
+        }
     }
 
     // ── Language pill colour families ─────────────────────────────────────────
@@ -231,18 +180,10 @@ a.project-card {
     // not an interactive element, so it carries no hover state of its own.
     a.open-project,
     .open-project {
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        align-self: stretch;
-        margin-top: 0;
-        font-size: 0.8rem;
-        font-weight: 600;
-        color: #555;
-        background-color: transparent;
-        border: 1px solid #d1d5db;
-        border-radius: 9999px;
-        padding: 0.2rem 0.75rem;
+        margin-top: auto;
+        color: var(--color-text-light);
+        font-size: 0.9rem;
+        line-height: 1;
         text-decoration: none;
         pointer-events: none;
     }
@@ -363,14 +304,14 @@ a.project-card {
 }
 
 .maturity {
+    display: inline-block;
     border: 1px solid;
     border-radius: 9999px;
     padding: 0.1rem 0.45rem;
-    font-size: 0.72rem;
+    font-size: 0.85rem;
     font-weight: 500;
     line-height: 1.6;
     max-width: fit-content;
-    justify-self: flex-end;
 
     &.stable {
         background-color: #dff6d5;
@@ -401,12 +342,13 @@ a.project-card {
     width: 100%;
     max-width: 100%;
     display: flex;
-    justify-content: space-between;
-    gap: 0.2rem;
-    align-items: start;
-    flex-wrap: wrap;
-    justify-content: center;
-    gap: .5rem;
+    flex-direction: column;
+    align-items: center;
+    gap: 0.3rem;
+
+    h3 {
+        text-align: center;
+    }
 }
 
 #filters-overlay {
diff --git a/templates/ecosystem/bridge_implementations.html b/templates/ecosystem/bridge_implementations.html
index 40754839a..7eb85a670 100644
--- a/templates/ecosystem/bridge_implementations.html
+++ b/templates/ecosystem/bridge_implementations.html
@@ -86,10 +86,14 @@ <h2 class="bridge-card-name">
                             <span class="bridge-card-access-label"
                                 >Access needed</span
                             >
-                            <span class="bridge-card-access-pill bridge-card-access-pill--platform"
+                            <span
+                                class="bridge-card-access-pill bridge-card-access-pill--platform"
+                                title="The privilege level you need on {{ section.title }} to set this bridge up"
                                 >{{ section.title }} {{ bridge.privilege.platform }}</span
                             >
-                            <span class="bridge-card-access-pill bridge-card-access-pill--matrix"
+                            <span
+                                class="bridge-card-access-pill bridge-card-access-pill--matrix"
+                                title="The privilege level you need on the Matrix side to set this bridge up"
                                 >Matrix {{ bridge.privilege.matrix }}</span
                             >
                         </div>
diff --git a/templates/ecosystem/client.html b/templates/ecosystem/client.html
index 2fae0cf13..3326c185b 100644
--- a/templates/ecosystem/client.html
+++ b/templates/ecosystem/client.html
@@ -41,9 +41,19 @@ <h1 class="ecosystem-detail-name">
                         >Latest release: {{ page.extra.latest_release }}</span
                     >
                     {% endif %} {% if page.extra.licence %}
-                    <span class="ecosystem-detail-meta-item"
-                        >{{ page.extra.licence }}</span
-                    >
+                    <span class="ecosystem-detail-meta-item">
+                        {% set licence_parts = page.extra.licence | split(pat=" OR ") %}
+                        {% for part in licence_parts %}
+                        {% if not loop.first %} OR {% endif %} {% if part is
+                        containing(" ") %} {{ part }} {% else %}
+                        <a
+                            href="https://spdx.org/licenses/{{ part }}.html"
+                            target="_blank"
+                            rel="noopener noreferrer"
+                            >{{ part }}</a
+                        >
+                        {% endif %} {% endfor %}
+                    </span>
                     {% endif %}
                 </div>
                 <div class="platform-links">
@@ -141,9 +151,6 @@ <h1 class="ecosystem-detail-name">
                 </a>
                 {% endif %}
             </div>
-            <div class="stores">
-                {{ clients::install_links(packages=page.extra.packages) }}
-            </div>
             <p>Something wrong? <a href="https://github.com/matrix-org/matrix.org/issues/new?template=update-ecosystem-info.yaml">Report the issue here</a>.</p>
         </div>
 
@@ -152,37 +159,20 @@ <h3 class="ecosystem-detail-aside-title">Features</h3>
             <div class="ecosystem-detail-features">
                 {% for category, features in page.extra.features %}
                 <div class="features-category">
-                    <h5>{{ clients::category_label(category_name=category) }}</h5>
-                    <ul>
+                    <p class="features-category-title">{{ clients::category_label(category_name=category) }}</p>
+                    <dl>
                         {% for feature, supported in features %}
-                            <li
-                                class="{{ supported }}"
-                                aria-label="{{ clients::feature_aria_label(feature_name=feature, feature_status=supported) | trim}}"
-                                style="--tooltip-anchor-name: --tooltip-anchor-{{ feature }}"
-                            >
-                                <span aria-hidden>
-                                    {{ clients::feature_label(feature_name=feature) | trim }}
-                                </span>
-                                <button
-                                    class="tooltip-toggle"
-                                    popovertarget="{{ feature }}-tooltip"
-                                    type="button"
-                                >
-                                    <img
-                                        role="button"
-                                        src="/assets/circle_question.svg"
-                                    >
-                                </button>
-                                <div
-                                    id="{{ feature }}-tooltip"
-                                    class="tooltip-content"
-                                    popover
-                                >
-                                    {{ clients::feature_description(feature_name=feature) | trim }}
-                                </div>
-                            </li>
+                        <div
+                            class="feature-row{% if supported %} {{ supported }}{% endif %}"
+                        >
+                            <dt>
+                                <span class="feature-row-indicator"></span>
+                                {{ clients::feature_label(feature_name=feature) | trim }}
+                            </dt>
+                            <dd>{{ clients::feature_description(feature_name=feature) | trim }}</dd>
+                        </div>
                         {% endfor %}
-                    </ul>
+                    </dl>
                 </div>
                 {% endfor %}
             </div>
diff --git a/templates/ecosystem/clients.html b/templates/ecosystem/clients.html
index e48b50c09..959ab6b15 100644
--- a/templates/ecosystem/clients.html
+++ b/templates/ecosystem/clients.html
@@ -44,81 +44,9 @@ <h2>Featured clients</h2>
         mature ones you can safely use.
     </p>
 
-    <div class="ecosystem-client-cards">
+    <div class="client-cards">
         {% for client in featured_clients %}
-        <details id="{{ client.slug }}" class="client-card">
-            <summary class="client-card-summary">
-                <div class="client-card-summary-inner">
-                    <img src="/ecosystem/clients/{{ client.extra.thumbnail }}"
-                         alt="{{ client.title }} logo"
-                         class="client-card-icon">
-                    <div class="client-card-header-text">
-                        <span class="client-card-name">
-                            {{ client.title }}
-                            <span class="maturity {{ client.extra.maturity | lower }}">{{ client.extra.maturity }}</span>
-                            <a href="#{{ client.slug }}" class="client-card-anchor" aria-label="Link to {{ client.title }}">#</a>
-                        </span>
-                        {% if client.extra.good_for %}
-                        <span class="client-card-good-for">Good for: {{ client.extra.good_for }}</span>
-                        {% else %}
-                        <span class="client-card-description-short">{{ client.content | markdown(inline=true) }}</span>
-                        {% endif %}
-                    </div>
-                    <div class="client-card-summary-platforms">
-                        {{ clients::platforms(packages=client.extra.packages) }}
-                    </div>
-                </div>
-            </summary>
-
-            <div class="client-card-body">
-                {% set lightbox_id = "eco-lightbox-" ~ client.slug %}
-                {% set screenshots = client.extra.screenshots | default(value=[]) %}
-                {% if screenshots | length > 0 %}
-                {% set multi = screenshots | length > 1 %}
-                <div class="client-card-screenshot-wrap{% if multi %} client-card-screenshot-wrap--multi{% endif %}">
-                    {% for shot in screenshots %}
-                    {% set shot_lightbox_id = lightbox_id ~ "-" ~ loop.index %}
-                    <a href="#{{ shot_lightbox_id }}" class="client-card-screenshot-trigger" aria-label="Enlarge screenshot">
-                        <img src="/ecosystem/clients/{{ shot }}"
-                             alt="{{ client.title }} screenshot {{ loop.index }}"
-                             class="client-card-screenshot">
-                    </a>
-                    {% endfor %}
-                </div>
-                {% for shot in screenshots %}
-                {% set shot_lightbox_id = lightbox_id ~ "-" ~ loop.index %}
-                <div class="client-lightbox" id="{{ shot_lightbox_id }}" role="dialog" aria-label="{{ client.title }} screenshot">
-                    <a href="#/" class="client-lightbox-backdrop" aria-label="Close"></a>
-                    <a href="#/" class="client-lightbox-close" aria-label="Close">&times;</a>
-                    <img src="/ecosystem/clients/{{ shot }}"
-                         alt="{{ client.title }} screenshot {{ loop.index }}">
-                </div>
-                {% endfor %}
-                {% endif %}
-
-                <div class="client-card-details">
-                    <p class="client-card-description">{{ client.content | markdown(inline=true) }}</p>
-
-                    <div class="client-card-features">
-                        {% set feat = client.extra.features %}
-                        {% if feat.e2ee %}<span class="client-feat-pill">E2EE</span>{% endif %}
-                        {% if feat.spaces %}<span class="client-feat-pill">Spaces</span>{% endif %}
-                        {% if feat.threads %}<span class="client-feat-pill">Threads</span>{% endif %}
-                        {% if feat.voip_1to1 %}<span class="client-feat-pill">Voice &amp; video calls</span>{% endif %}
-                        {% if feat.voip_jitsi %}<span class="client-feat-pill">Group calls (Jitsi)</span>{% endif %}
-                        {% if feat.multi_account %}<span class="client-feat-pill">Multi-account</span>{% endif %}
-                        {% if feat.oauth %}<span class="client-feat-pill">OAuth 2.0</span>{% endif %}
-                        {% if feat.sso %}<span class="client-feat-pill">SSO</span>{% endif %}
-                    </div>
-
-                    <div class="client-card-downloads">
-                        {{ clients::install_links(packages=client.extra.packages) }}
-                    </div>
-
-                    <a href="{{ client.path }}" class="client-card-more-link">Full details &rarr;</a>
-                </div>
-            </div>
-        </details>
+        {{ clients::featured_client_card(client=client, id_prefix="eco") }}
         {% endfor %}
     </div>
 
@@ -252,11 +180,11 @@ <h2>All known clients</h2>
                     <h3>{{ client.title }}</h3>
                     <div class="maturity {{ client.extra.maturity | lower }}">{{ client.extra.maturity }}</div>
                 </div>
-                <div class="metadata-pills">
+                <div class="licence-language">
                     <div class="pill licence">{{ client.extra.licence }}</div>
                 </div>
-                <p class="description">{{ client.content | markdown(inline=true) | regex_replace(pattern=`<a.*>(?P<text>.*)</a>`, rep=`$text`) | safe }}</p>
-                <div class="card-links platform-links">
+                <span>{{ client.content | markdown(inline=true) | regex_replace(pattern=`<a.*>(?P<text>.*)</a>`, rep=`$text`) | safe }}</span>
+                <div class="platform-links">
                     {{ clients::platforms(packages=client.extra.packages) }}
                 </div>
                 <p class="open-project">Open client details</p>
diff --git a/templates/macros/clients.html b/templates/macros/clients.html
index 123399fd2..c2aab51c4 100644
--- a/templates/macros/clients.html
+++ b/templates/macros/clients.html
@@ -141,3 +141,82 @@
 {% if packages.flathub or packages.other_linux_link %}<div class="platform-pill platform-pill--linux">Linux</div>{% endif %}
 {% if packages.webapp %}<div class="platform-pill platform-pill--web">Web</div>{% endif %}
 {% endmacro %}
+
+{# Shared featured-client accordion card, used by try-matrix.html and
+   ecosystem/clients.html. `id_prefix` keeps element/lightbox ids unique
+   if a page ever renders the deck more than once. #}
+{% macro featured_client_card(client, id_prefix="client") %}
+<details id="{{ client.slug }}" class="client-card{% if client.extra.packages.apple_app_store %} platform-ios{% endif %}{% if client.extra.packages.google_play_store or client.extra.packages.f_droid %} platform-android{% endif %}{% if client.extra.packages.webapp %} platform-web{% endif %}{% if client.extra.packages.windows_installer %} platform-windows{% endif %}{% if client.extra.packages.macos_installer %} platform-macos{% endif %}{% if client.extra.packages.flathub or client.extra.packages.other_linux_link %} platform-linux{% endif %}">
+    <summary class="client-card-summary">
+        <div class="client-card-summary-inner">
+            <img src="/ecosystem/clients/{{ client.extra.thumbnail }}"
+                 alt="{{ client.title }} logo"
+                 class="client-card-icon">
+            <div class="client-card-header-text">
+                <span class="client-card-name">
+                    {{ client.title }}
+                    <span class="maturity {{ client.extra.maturity | lower }}">{{ client.extra.maturity }}</span>
+                    <a href="#{{ client.slug }}" class="client-card-anchor" aria-label="Link to {{ client.title }}">#</a>
+                </span>
+                {% if client.extra.good_for %}
+                <span class="client-card-good-for">Good for: {{ client.extra.good_for }}</span>
+                {% endif %}
+            </div>
+            <div class="client-card-summary-platforms">
+                {{ self::platforms(packages=client.extra.packages) }}
+            </div>
+        </div>
+    </summary>
+
+    <div class="client-card-body">
+        {% set lightbox_id = id_prefix ~ "-lightbox-" ~ client.slug %}
+        {% set screenshots = client.extra.screenshots | default(value=[]) %}
+        {% if screenshots | length > 0 %}
+        {% set multi = screenshots | length > 1 %}
+        <div class="client-card-screenshot-wrap{% if multi %} client-card-screenshot-wrap--multi{% endif %}">
+            {% for shot in screenshots %}
+            {% set shot_lightbox_id = lightbox_id ~ "-" ~ loop.index %}
+            <a href="#{{ shot_lightbox_id }}" class="client-card-screenshot-trigger" aria-label="Enlarge screenshot">
+                <img src="/ecosystem/clients/{{ shot }}"
+                     alt="{{ client.title }} screenshot {{ loop.index }}"
+                     class="client-card-screenshot">
+            </a>
+            {% endfor %}
+        </div>
+        {% for shot in screenshots %}
+        {% set shot_lightbox_id = lightbox_id ~ "-" ~ loop.index %}
+        <div class="client-lightbox" id="{{ shot_lightbox_id }}" role="dialog" aria-label="{{ client.title }} screenshot">
+            <a href="#/" class="client-lightbox-backdrop" aria-label="Close"></a>
+            <a href="#/" class="client-lightbox-close" aria-label="Close">&times;</a>
+            <img src="/ecosystem/clients/{{ shot }}"
+                 alt="{{ client.title }} screenshot {{ loop.index }}">
+        </div>
+        {% endfor %}
+        {% else %}
+        <div class="client-card-screenshot-wrap client-card-screenshot-placeholder">
+            <span>Screenshot coming soon</span>
+        </div>
+        {% endif %}
+
+        <div class="client-card-details">
+            <p class="client-card-description">{{ client.content | markdown(inline=true) }}</p>
+
+            <div class="client-card-features">
+                {% for feature_level_name, features_in_level in client.extra.features %}
+                {% for feature_name, feature_state in features_in_level %}
+                {% if feature_state == "supported" %}
+                <span class="client-feat-pill">{{ self::feature_label(feature_name=feature_name) | trim }}</span>
+                {% endif %}
+                {% endfor %}
+                {% endfor %}
+            </div>
+
+            <div class="client-card-downloads">
+                {{ self::install_links(packages=client.extra.packages) }}
+            </div>
+
+            <a href="{{ client.path }}" class="client-card-more-link">View more details</a>
+        </div>
+    </div>
+</details>
+{% endmacro %}
diff --git a/templates/macros/sdks.html b/templates/macros/sdks.html
index 991aa81b9..ee1e1978d 100644
--- a/templates/macros/sdks.html
+++ b/templates/macros/sdks.html
@@ -96,7 +96,7 @@ <h3>{{ sdk.name }}</h3>
                 </div>
                 <div class="author">{{ sdk.maintainer }}</div>
                 <div class="licence-language">
-                    <div class="pill pill--licence pill--licence-{{ sdk.licence | slugify }}">{{ sdk.licence }}</div>
+                    <div class="pill licence">{{ sdk.licence }}</div>
                     <div class="pill pill--lang pill--lang-{{ lang_helper::normalize_language(lang=sdk.language) }}">{{ sdk.language }}</div>
                 </div>
                 {% if sdk.description %}<p class="description">{{ sdk.description | markdown(inline=true) | regex_replace(pattern=`<a.*>(?P<text>.*)</a>`, rep=`$text`) | safe }}</p>{% endif %}
diff --git a/templates/shortcodes/all_servers.html b/templates/shortcodes/all_servers.html
index feb7c4b0f..0268cccb2 100644
--- a/templates/shortcodes/all_servers.html
+++ b/templates/shortcodes/all_servers.html
@@ -1,4 +1,5 @@
 {% import "macros/servers.html" as srvutils %}
+{% import "macros/language_helpers.html" as lang_helper %}
 {% set servers_data = load_data(path="content/ecosystem/servers/servers.toml") %}
 {% set licences = [] %}
 {% set languages = [] %}
@@ -83,13 +84,13 @@
                 <h3>{{ server.name }}</h3>
                 <div class="maturity {{ server.maturity | lower }}">{{ server.maturity }}</div>
             </div>
-            {% if server.author %}<div class="subtitle">{{ server.author }}</div>{% endif %}
-            <div class="metadata-pills">
+            {% if server.author %}<div class="author">{{ server.author }}</div>{% endif %}
+            <div class="licence-language">
                 <div class="pill licence">{{ server.licence }}</div>
-                <div class="pill">{{ server.language }}</div>
+                <div class="pill pill--lang pill--lang-{{ lang_helper::normalize_language(lang=server.language) }}">{{ server.language }}</div>
             </div>
-            <p class="description">{{ server.description | markdown(inline=true) | regex_replace(pattern=`<a.*>(?P<text>.*)</a>`, rep=`$text`) | safe }}</p>
-            <div class="card-links server-links">
+            <span>{{ server.description | markdown(inline=true) | regex_replace(pattern=`<a.*>(?P<text>.*)</a>`, rep=`$text`) | safe }}</span>
+            <div class="server-links">
                 {% if server.website %}
                 <a href="{{ server.website }}">
                     {{ load_data(path="/assets/home.svg") | safe }}
diff --git a/templates/try-matrix.html b/templates/try-matrix.html
index ddc2ef842..c80d0b2b4 100644
--- a/templates/try-matrix.html
+++ b/templates/try-matrix.html
@@ -59,80 +59,7 @@ <h2>Get a client app</h2>
 
                 <div class="client-cards">
                     {% for client in featured_clients %}
-                    <details id="{{ client.slug }}" class="client-card{% if client.extra.packages.apple_app_store %} platform-ios{% endif %}{% if client.extra.packages.google_play_store or client.extra.packages.f_droid %} platform-android{% endif %}{% if client.extra.packages.webapp %} platform-web{% endif %}{% if client.extra.packages.windows_installer %} platform-windows{% endif %}{% if client.extra.packages.macos_installer %} platform-macos{% endif %}{% if client.extra.packages.flathub or client.extra.packages.other_linux_link %} platform-linux{% endif %}">
-                        <summary class="client-card-summary">
-                            <div class="client-card-summary-inner">
-                                <img src="/ecosystem/clients/{{ client.extra.thumbnail }}"
-                                     alt="{{ client.title }} logo"
-                                     class="client-card-icon">
-                                <div class="client-card-header-text">
-                                    <span class="client-card-name">
-                                        {{ client.title }}
-                                        <a href="#{{ client.slug }}" class="client-card-anchor" aria-label="Link to {{ client.title }}">#</a>
-                                    </span>
-                                    {% if client.extra.good_for %}
-                                    <span class="client-card-good-for">{{ client.extra.good_for }}</span>
-                                    {% endif %}
-                                </div>
-                                <div class="client-card-summary-platforms">
-                                    {{ clients::platforms(packages=client.extra.packages) }}
-                                </div>
-                            </div>
-                        </summary>
-
-                        <div class="client-card-body">
-                            {% set lightbox_id = "lightbox-" ~ client.slug %}
-                            {% set screenshots = client.extra.screenshots | default(value=[]) %}
-                            {% if screenshots | length > 0 %}
-                            {% set multi = screenshots | length > 1 %}
-                            <div class="client-card-screenshot-wrap{% if multi %} client-card-screenshot-wrap--multi{% endif %}">
-                                {% for shot in screenshots %}
-                                {% set shot_lightbox_id = lightbox_id ~ "-" ~ loop.index %}
-                                <a href="#{{ shot_lightbox_id }}" class="client-card-screenshot-trigger" aria-label="Enlarge screenshot">
-                                    <img src="/ecosystem/clients/{{ shot }}"
-                                         alt="{{ client.title }} screenshot {{ loop.index }}"
-                                         class="client-card-screenshot">
-                                </a>
-                                {% endfor %}
-                            </div>
-                            {% for shot in screenshots %}
-                            {% set shot_lightbox_id = lightbox_id ~ "-" ~ loop.index %}
-                            <div class="client-lightbox" id="{{ shot_lightbox_id }}" role="dialog" aria-label="{{ client.title }} screenshot">
-                                <a href="#/" class="client-lightbox-backdrop" aria-label="Close"></a>
-                                <a href="#/" class="client-lightbox-close" aria-label="Close">&times;</a>
-                                <img src="/ecosystem/clients/{{ shot }}"
-                                     alt="{{ client.title }} screenshot {{ loop.index }}">
-                            </div>
-                            {% endfor %}
-                            {% else %}
-                            <div class="client-card-screenshot-wrap client-card-screenshot-placeholder">
-                                <span>Screenshot coming soon</span>
-                            </div>
-                            {% endif %}
-
-                            <div class="client-card-details">
-                                <p class="client-card-description">{{ client.content | markdown(inline=true) }}</p>
-
-                                <div class="client-card-features">
-                                    {% set feat = client.extra.features %}
-                                    {% if feat.e2ee %}<span class="client-feat-pill">E2EE</span>{% endif %}
-                                    {% if feat.spaces %}<span class="client-feat-pill">Spaces</span>{% endif %}
-                                    {% if feat.threads %}<span class="client-feat-pill">Threads</span>{% endif %}
-                                    {% if feat.voip_1to1 %}<span class="client-feat-pill">Voice &amp; video calls</span>{% endif %}
-                                    {% if feat.voip_jitsi %}<span class="client-feat-pill">Group calls (Jitsi)</span>{% endif %}
-                                    {% if feat.multi_account %}<span class="client-feat-pill">Multi-account</span>{% endif %}
-                                    {% if feat.oauth %}<span class="client-feat-pill">OAuth 2.0</span>{% endif %}
-                                    {% if feat.sso %}<span class="client-feat-pill">SSO</span>{% endif %}
-                                </div>
-
-                                <div class="client-card-downloads">
-                                    {{ clients::install_links(packages=client.extra.packages) }}
-                                </div>
-
-                                <a href="{{ client.path }}" class="client-card-more-link">View more details</a>
-                            </div>
-                        </div>
-                    </details>
+                    {{ clients::featured_client_card(client=client, id_prefix="try") }}
                     {% endfor %}
                 </div>
 

From 375431f331343359b6a27636a1d8a8b2fee62c48 Mon Sep 17 00:00:00 2001
From: MTRNord <MTRNord@users.noreply.github.com>
Date: Thu, 9 Jul 2026 18:04:11 +0200
Subject: [PATCH 10/17] fix the pills on the distribution page

Signed-off-by: MTRNord <MTRNord@users.noreply.github.com>
---
 sass/_projects.scss                         | 27 ++++++++++++++++++++-
 templates/ecosystem/clients.html            |  2 +-
 templates/macros/sdks.html                  |  6 ++---
 templates/shortcodes/all_distributions.html | 10 ++++----
 templates/shortcodes/all_servers.html       |  2 +-
 5 files changed, 36 insertions(+), 11 deletions(-)

diff --git a/sass/_projects.scss b/sass/_projects.scss
index 5a53199cc..18a10a842 100644
--- a/sass/_projects.scss
+++ b/sass/_projects.scss
@@ -62,7 +62,7 @@ a.project-card {
 
     // ── Pills row — always immediately above the CTA ──────────────────────────
     .platform-links,
-    .licence-language {
+    .pill-row {
         display: flex;
         flex-direction: row;
         flex-wrap: wrap;
@@ -175,6 +175,31 @@ a.project-card {
         color: #2c3894;
     }
 
+    // ── Deployment framework pill colour families ─────────────────────────────
+    // Kubernetes ecosystem (Helm, Helmfile, Kubernetes)
+    .pill--framework-helm,
+    .pill--framework-helmfile,
+    .pill--framework-kubernetes {
+        background-color: #e6f9f7;
+        border-color: #7fd6ce;
+        color: #0a6b62;
+    }
+
+    // Containers (Docker, Docker Compose)
+    .pill--framework-docker,
+    .pill--framework-docker-compose {
+        background-color: #e8f1ff;
+        border-color: #99bbee;
+        color: #1a4db0;
+    }
+
+    // Config management (Ansible)
+    .pill--framework-ansible {
+        background-color: #fde8e8;
+        border-color: #f0a8a8;
+        color: #a61b1b;
+    }
+
     // ── CTA label pinned to the bottom ────────────────────────────────────────
     // The whole card is already a link — this is a visual affordance only,
     // not an interactive element, so it carries no hover state of its own.
diff --git a/templates/ecosystem/clients.html b/templates/ecosystem/clients.html
index 959ab6b15..48350e94a 100644
--- a/templates/ecosystem/clients.html
+++ b/templates/ecosystem/clients.html
@@ -180,7 +180,7 @@ <h2>All known clients</h2>
                     <h3>{{ client.title }}</h3>
                     <div class="maturity {{ client.extra.maturity | lower }}">{{ client.extra.maturity }}</div>
                 </div>
-                <div class="licence-language">
+                <div class="pill-row">
                     <div class="pill licence">{{ client.extra.licence }}</div>
                 </div>
                 <span>{{ client.content | markdown(inline=true) | regex_replace(pattern=`<a.*>(?P<text>.*)</a>`, rep=`$text`) | safe }}</span>
diff --git a/templates/macros/sdks.html b/templates/macros/sdks.html
index ee1e1978d..55fb67d8e 100644
--- a/templates/macros/sdks.html
+++ b/templates/macros/sdks.html
@@ -95,12 +95,12 @@ <h3>{{ sdk.name }}</h3>
                     <div class="maturity {{ sdk.maturity | lower }}">{{ sdk.maturity }}</div>
                 </div>
                 <div class="author">{{ sdk.maintainer }}</div>
-                <div class="licence-language">
+                <div class="pill-row">
                     <div class="pill licence">{{ sdk.licence }}</div>
                     <div class="pill pill--lang pill--lang-{{ lang_helper::normalize_language(lang=sdk.language) }}">{{ sdk.language }}</div>
                 </div>
-                {% if sdk.description %}<p class="description">{{ sdk.description | markdown(inline=true) | regex_replace(pattern=`<a.*>(?P<text>.*)</a>`, rep=`$text`) | safe }}</p>{% endif %}
-                <div class="card-links server-links">
+                {% if sdk.description %}<p>{{ sdk.description | markdown(inline=true) | regex_replace(pattern=`<a.*>(?P<text>.*)</a>`, rep=`$text`) | safe }}</p>{% endif %}
+                <div class="server-links">
                     {% if sdk.repository %}
                     <a href="{{ sdk.repository }}">
                         {{ load_data(path="/assets/projects/repo.svg") | safe }}
diff --git a/templates/shortcodes/all_distributions.html b/templates/shortcodes/all_distributions.html
index b2bf29dc2..c4d27c04d 100644
--- a/templates/shortcodes/all_distributions.html
+++ b/templates/shortcodes/all_distributions.html
@@ -103,15 +103,15 @@
                 <h3>{{ distribution.name }}</h3>
                 <div class="maturity {{ distribution.maturity | lower }}">{{ distribution.maturity }}</div>
             </div>
-            {% if distribution.vendor %}<div class="subtitle">{{ distribution.vendor }}</div>{% endif %}
-            <div class="metadata-pills">
+            {% if distribution.vendor %}<div class="author">{{ distribution.vendor }}</div>{% endif %}
+            <div class="pill-row">
                 <div class="pill licence">{{ distribution.licence }}</div>
                 {% for framework in distribution.frameworks %}
-                <div class="pill">{{ framework }}</div>
+                <div class="pill pill--framework pill--framework-{{ framework | slugify }}">{{ framework }}</div>
                 {% endfor %}
             </div>
-            <p class="description">{{ distribution.description | markdown(inline=true) | regex_replace(pattern=`<a.*>(?P<text>.*)</a>`, rep=`$text`) | safe }}</p>
-            <div class="card-links distribution-links">
+            <span>{{ distribution.description | markdown(inline=true) | regex_replace(pattern=`<a.*>(?P<text>.*)</a>`, rep=`$text`) | safe }}</span>
+            <div class="distribution-links">
                 {% if distribution.website %}
                 <a href="{{ distribution.website }}">
                     {{ load_data(path="/assets/home.svg") | safe }}
diff --git a/templates/shortcodes/all_servers.html b/templates/shortcodes/all_servers.html
index 0268cccb2..78879ad55 100644
--- a/templates/shortcodes/all_servers.html
+++ b/templates/shortcodes/all_servers.html
@@ -85,7 +85,7 @@ <h3>{{ server.name }}</h3>
                 <div class="maturity {{ server.maturity | lower }}">{{ server.maturity }}</div>
             </div>
             {% if server.author %}<div class="author">{{ server.author }}</div>{% endif %}
-            <div class="licence-language">
+            <div class="pill-row">
                 <div class="pill licence">{{ server.licence }}</div>
                 <div class="pill pill--lang pill--lang-{{ lang_helper::normalize_language(lang=server.language) }}">{{ server.language }}</div>
             </div>

From 3301f9af1ca2df61a57d7519624bcdafa5d0f99d Mon Sep 17 00:00:00 2001
From: MTRNord <MTRNord@users.noreply.github.com>
Date: Thu, 9 Jul 2026 19:34:10 +0200
Subject: [PATCH 11/17] fix mobile scroll behaviour on details pages

Signed-off-by: MTRNord <MTRNord@users.noreply.github.com>
---
 sass/_clients.scss | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/sass/_clients.scss b/sass/_clients.scss
index 17d0feb4b..e1d41d774 100644
--- a/sass/_clients.scss
+++ b/sass/_clients.scss
@@ -834,6 +834,12 @@ body:has(.projects-card-deck > div > .client-checkbox:checked) {
     grid-area: aside;
     position: sticky;
     top: calc(var(--navbar-height) + 1.5rem);
+
+    // Stacked single-column layout on mobile — sticky here would float
+    // the aside mid-scroll between the header and main content.
+    @media (max-width: 767px) {
+        position: static;
+    }
 }
 
 .ecosystem-detail-logo-wrap {

From eddaf1a60d6cb85a851ae9e18f3c6178375371b1 Mon Sep 17 00:00:00 2001
From: MTRNord <MTRNord@users.noreply.github.com>
Date: Thu, 9 Jul 2026 19:36:13 +0200
Subject: [PATCH 12/17] remove mention of latest_release

Signed-off-by: MTRNord <MTRNord@users.noreply.github.com>
---
 templates/ecosystem/client.html | 4 ----
 1 file changed, 4 deletions(-)

diff --git a/templates/ecosystem/client.html b/templates/ecosystem/client.html
index 3326c185b..a40b1368c 100644
--- a/templates/ecosystem/client.html
+++ b/templates/ecosystem/client.html
@@ -36,10 +36,6 @@ <h1 class="ecosystem-detail-name">
                     <span class="ecosystem-detail-meta-item"
                         >By {{ page.extra.maintainer }}</span
                     >
-                    {% endif %} {% if page.extra.latest_release %}
-                    <span class="ecosystem-detail-meta-item"
-                        >Latest release: {{ page.extra.latest_release }}</span
-                    >
                     {% endif %} {% if page.extra.licence %}
                     <span class="ecosystem-detail-meta-item">
                         {% set licence_parts = page.extra.licence | split(pat=" OR ") %}

From 9d9385cdde4b2d7a6460d80d03a7873694ae4f6c Mon Sep 17 00:00:00 2001
From: MTRNord <MTRNord@users.noreply.github.com>
Date: Thu, 9 Jul 2026 19:40:52 +0200
Subject: [PATCH 13/17] try to improve the "report an issue" text placement

Signed-off-by: MTRNord <MTRNord@users.noreply.github.com>
---
 sass/_bridges.scss                              |  8 ++++++++
 sass/_clients.scss                              | 12 +++++++++++-
 templates/ecosystem/bridge_implementations.html |  3 +--
 templates/ecosystem/client.html                 |  2 +-
 templates/ecosystem/hosting.html                |  1 +
 5 files changed, 22 insertions(+), 4 deletions(-)

diff --git a/sass/_bridges.scss b/sass/_bridges.scss
index 96eec73f0..9e14f5c1a 100644
--- a/sass/_bridges.scss
+++ b/sass/_bridges.scss
@@ -93,6 +93,14 @@
     overflow: hidden;
 }
 
+.bridge-card-report {
+    margin: 0;
+    padding: 0.85rem 1.5rem;
+    border-top: 1px solid #e8e8e8;
+    font-size: 0.85rem;
+    color: var(--color-text-light);
+}
+
 .bridge-card-header {
     padding: 1.25rem 1.5rem 1rem;
     border-bottom: 1px solid #e8e8e8;
diff --git a/sass/_clients.scss b/sass/_clients.scss
index e1d41d774..9bc19f9de 100644
--- a/sass/_clients.scss
+++ b/sass/_clients.scss
@@ -775,6 +775,16 @@ body:has(.projects-card-deck > div > .client-checkbox:checked) {
     padding-top: 3rem;
 }
 
+.ecosystem-detail-report {
+    max-width: 60rem;
+    margin-inline: auto;
+    padding-top: 1.5rem;
+    padding-bottom: 3rem;
+    border-top: 1px solid var(--borders-color);
+    font-size: 0.9rem;
+    color: var(--color-text-light);
+}
+
 .ecosystem-detail {
     display: grid;
     grid-template-columns: 1fr 18rem;
@@ -786,7 +796,7 @@ body:has(.projects-card-deck > div > .client-checkbox:checked) {
     row-gap: 2rem;
     max-width: 60rem;
     margin-inline: auto;
-    padding-bottom: 3rem;
+    padding-bottom: 1.5rem;
 
     @media (max-width: 767px) {
         grid-template-columns: 1fr;
diff --git a/templates/ecosystem/bridge_implementations.html b/templates/ecosystem/bridge_implementations.html
index 7eb85a670..0024b5eb3 100644
--- a/templates/ecosystem/bridge_implementations.html
+++ b/templates/ecosystem/bridge_implementations.html
@@ -131,8 +131,6 @@ <h2 class="bridge-card-name">
                             </a>
                             {% endif %}
                         </div>
-
-                        <p>Something wrong? Report the issue <a href="https://github.com/matrix-org/matrix.org/issues/new?template=update-ecosystem-info.yaml">here</a>.</p>
                     </div>
                 </div>
 
@@ -159,6 +157,7 @@ <h3 class="ecosystem-detail-aside-title">
                 </aside>
                 {% endif %}
             </div>
+            <p class="bridge-card-report">Something wrong? Report the issue <a href="https://github.com/matrix-org/matrix.org/issues/new?template=update-ecosystem-info.yaml">here</a>.</p>
         </div>
         {% endfor %}
     </div>
diff --git a/templates/ecosystem/client.html b/templates/ecosystem/client.html
index a40b1368c..22e674570 100644
--- a/templates/ecosystem/client.html
+++ b/templates/ecosystem/client.html
@@ -147,7 +147,6 @@ <h1 class="ecosystem-detail-name">
                 </a>
                 {% endif %}
             </div>
-            <p>Something wrong? <a href="https://github.com/matrix-org/matrix.org/issues/new?template=update-ecosystem-info.yaml">Report the issue here</a>.</p>
         </div>
 
         <aside class="ecosystem-detail-aside">
@@ -174,5 +173,6 @@ <h3 class="ecosystem-detail-aside-title">Features</h3>
             </div>
         </aside>
     </div>
+    <p class="ecosystem-detail-report">Something wrong? <a href="https://github.com/matrix-org/matrix.org/issues/new?template=update-ecosystem-info.yaml">Report the issue here</a>.</p>
 </article>
 {% endblock content %}
diff --git a/templates/ecosystem/hosting.html b/templates/ecosystem/hosting.html
index 693511b4e..ab43426af 100644
--- a/templates/ecosystem/hosting.html
+++ b/templates/ecosystem/hosting.html
@@ -56,5 +56,6 @@ <h3>{{ provider.title }}</h3>
         {% endfor %}
     </div>
     {% endif %}
+    <p>Something missing? <a href="https://github.com/matrix-org/matrix.org/issues/new?template=update-ecosystem-info.yaml">Report the issue here</a>.</p>
 </div>
 {% endblock content %}

From 14db4ea9e4d230ee46eec3e337cf3c93ee5bf4b2 Mon Sep 17 00:00:00 2001
From: MTRNord <MTRNord@users.noreply.github.com>
Date: Thu, 9 Jul 2026 20:16:41 +0200
Subject: [PATCH 14/17] fix scroll behaviour

Signed-off-by: MTRNord <MTRNord@users.noreply.github.com>
---
 templates/ecosystem/clients.html | 2 +-
 templates/ecosystem/hosting.html | 6 ------
 templates/try-matrix.html        | 2 +-
 3 files changed, 2 insertions(+), 8 deletions(-)

diff --git a/templates/ecosystem/clients.html b/templates/ecosystem/clients.html
index 48350e94a..6a14db1f3 100644
--- a/templates/ecosystem/clients.html
+++ b/templates/ecosystem/clients.html
@@ -8,7 +8,7 @@
 </noscript>
 <script type="module" src={{ get_url(path="/js/clients.js" , cachebust=true) }}></script>
 <style>
-html { scroll-behavior: smooth; scroll-padding-top: calc(var(--navbar-height) + 1rem); }
+html { scroll-behavior: smooth; scroll-padding-top: calc(var(--navbar-height) + 0.5rem); }
 </style>
 {% endblock head_extra%}
 {% block content %}
diff --git a/templates/ecosystem/hosting.html b/templates/ecosystem/hosting.html
index ab43426af..6ada6ec86 100644
--- a/templates/ecosystem/hosting.html
+++ b/templates/ecosystem/hosting.html
@@ -2,12 +2,6 @@
 {% import "macros/breadcrumb.html" as breadcrumb %}
 {% block head_extra %}
 <meta name="description" content="{{ section.extra.summary }}" />
-<style>
-    html {
-        scroll-behavior: smooth;
-        scroll-padding-top: calc(var(--navbar-height) + 1rem);
-    }
-</style>
 {% endblock head_extra %}
 {% block content %}
 <div class="page-header">
diff --git a/templates/try-matrix.html b/templates/try-matrix.html
index c80d0b2b4..701ed68f6 100644
--- a/templates/try-matrix.html
+++ b/templates/try-matrix.html
@@ -2,7 +2,7 @@
 {% import "macros/clients.html" as clients %}
 {% block head_extra %}
 <style>
-html { scroll-behavior: smooth; scroll-padding-top: calc(var(--navbar-height) + 1rem); }
+html { scroll-behavior: smooth; scroll-padding-top: calc(var(--navbar-height) + 0.5rem); }
 </style>
 {% endblock head_extra %}
 {% block content %}

From 702b9e06c17384b5e0573c0b352a5a1fc32647a8 Mon Sep 17 00:00:00 2001
From: MTRNord <MTRNord@users.noreply.github.com>
Date: Thu, 9 Jul 2026 20:20:05 +0200
Subject: [PATCH 15/17] add header before the hosting provider grid

Signed-off-by: MTRNord <MTRNord@users.noreply.github.com>
---
 templates/ecosystem/hosting.html | 1 +
 1 file changed, 1 insertion(+)

diff --git a/templates/ecosystem/hosting.html b/templates/ecosystem/hosting.html
index 6ada6ec86..d9d6cea85 100644
--- a/templates/ecosystem/hosting.html
+++ b/templates/ecosystem/hosting.html
@@ -15,6 +15,7 @@ <h1>{{ section.title }}</h1>
 <div class="content hosting_page">
     {{ section.content | safe }}
     {% if section.pages %}
+    <h2>Known providers</h2>
     <div class="hosting-provider-cards">
         {% for provider in section.pages %}
         <div>

From 4c6932759c01e99fab5413528e9c9a5c10343876 Mon Sep 17 00:00:00 2001
From: MTRNord <MTRNord@users.noreply.github.com>
Date: Thu, 9 Jul 2026 20:21:15 +0200
Subject: [PATCH 16/17] internlink hosting with docs

Signed-off-by: MTRNord <MTRNord@users.noreply.github.com>
---
 content/ecosystem/hosting/_index.md | 9 +++++----
 1 file changed, 5 insertions(+), 4 deletions(-)

diff --git a/content/ecosystem/hosting/_index.md b/content/ecosystem/hosting/_index.md
index 1b51d2364..16326a732 100644
--- a/content/ecosystem/hosting/_index.md
+++ b/content/ecosystem/hosting/_index.md
@@ -11,8 +11,8 @@ Everyone can host their Matrix server, but not everybody wants to. These are the
 
 ## Why not matrix.org?
 
-Matrix could be described as what happens when email, instant messaging and
-encryption meet. To be able to use Matrix, you need a Matrix account which is
+[Matrix](/docs/matrix-concepts/elements-of-matrix/) could be described as what happens when email, instant messaging and
+encryption meet. To be able to use Matrix, you need a [Matrix account](/docs/chat_basics/matrix-for-im/#creating-a-matrix-account) which is
 provided by... a provider! The Matrix accounts identifiers look like
 `@username:example.com`. People on different providers can talk to one another,
 in the same way you can send emails to someone using another email provider.
@@ -26,8 +26,9 @@ or WhatsApp.
 
 **Organisations and community managers** will be interested in providers for two
 main reasons: they can proudly display their identity with their own domain
-in username and rooms identifiers, and their administrators remain in control
-of the data of their organisation.
+in username and rooms identifiers when [getting started with a community](/docs/communities/getting-started/),
+and their administrators remain in control of the data of their organisation
+through [room administration](/docs/communities/administration/) tools.
 
 The following providers have been brought to the attention of The Matrix.org
 Foundation. Please note that The Matrix.org Foundation doesn't endorse them,

From 761c1b7c7758df9f059ea03d5638a0cb151e2404 Mon Sep 17 00:00:00 2001
From: MTRNord <MTRNord@users.noreply.github.com>
Date: Thu, 9 Jul 2026 20:24:14 +0200
Subject: [PATCH 17/17] remove redundant spaces

Signed-off-by: MTRNord <MTRNord@users.noreply.github.com>
---
 templates/macros/clients.html | 14 +++++++-------
 1 file changed, 7 insertions(+), 7 deletions(-)

diff --git a/templates/macros/clients.html b/templates/macros/clients.html
index c2aab51c4..07ebbc98d 100644
--- a/templates/macros/clients.html
+++ b/templates/macros/clients.html
@@ -90,13 +90,13 @@
 
 {# CSS filter classes for the all-clients card deck #}
 {% macro classes(client) %}
-{% if client.packages.apple_app_store.app_id and client.packages.apple_app_store.org %}platform-ios {% endif %}
-{% if client.packages.google_play_store.app_id %}platform-android {% endif %}
-{% if client.packages.flathub.app_id %}platform-flathub {% endif %}
-{% if client.packages.other_linux_link %}platform-linux {% endif %}
-{% if client.packages.webapp %}platform-web {% endif %}
-{% if client.packages.windows_installer %}platform-windows {% endif %}
-{% if client.packages.macos_installer %}platform-macos {% endif %}
+{% if client.packages.apple_app_store.app_id and client.packages.apple_app_store.org %}platform-ios{% endif %}
+{% if client.packages.google_play_store.app_id %}platform-android{% endif %}
+{% if client.packages.flathub.app_id %}platform-flathub{% endif %}
+{% if client.packages.other_linux_link %}platform-linux{% endif %}
+{% if client.packages.webapp %}platform-web{% endif %}
+{% if client.packages.windows_installer %}platform-windows{% endif %}
+{% if client.packages.macos_installer %}platform-macos{% endif %}
 maturity-{{ client.maturity | lower }}
 licence-{{ client.licence | slugify }}