diff --git a/assets/scss/_index.scss b/assets/scss/_index.scss
index 48ceeb85..81ee8401 100644
--- a/assets/scss/_index.scss
+++ b/assets/scss/_index.scss
@@ -231,6 +231,108 @@ main.td-main {
}
+// Live-demo band. Docsy's blocks/lead wraps everything it is given in
+// `.h4 mb-0`, so without these rules the body copy inherits heading size and
+// weight, the call to action sits inline at the end of the paragraph, and the
+// band has no vertical rhythm of its own. Every declaration below undoes one
+// of those inherited defaults rather than decorating.
+.section-live-demo {
+ .td-box--primary {
+ // A gradient rather than the flat primary fill: the band sits between two
+ // white sections and a single flat slab reads as a coloured gap. The
+ // gradient gives it a top and a bottom, so it reads as its own surface.
+ background-image: linear-gradient(160deg, $cozy-dark-blue 0%, $cozy-darkest-blue 100%);
+ padding-top: 5.5rem;
+ padding-bottom: 5.5rem;
+
+ @include media-breakpoint-down(md) {
+ padding-top: 3.25rem;
+ padding-bottom: 3.25rem;
+ }
+ }
+
+ // The band is a destination, not a step in a sequence: no scroll cue.
+ .td-arrow-down::before {
+ display: none;
+ }
+
+ .section-label {
+ margin: 0 0 1.125rem 0;
+ font-size: clamp(1.625rem, 3.2vw, 2.375rem);
+ font-weight: 600;
+ line-height: 1.15;
+ letter-spacing: -0.015em;
+ text-wrap: balance;
+ color: $cozy-white;
+ }
+
+ // Reset the inherited .h4 typography to body copy, and hold the line length
+ // to something readable -- centred text across a 1280px container is not.
+ .live-demo-lead {
+ // ~72 characters at this size; 46rem ran to ~84, past comfortable measure.
+ max-width: 40rem;
+ margin: 0 auto;
+ font-size: 1.0625rem;
+ font-weight: 400;
+ line-height: 1.65;
+ // Flat white, not white-with-alpha: at 0.92 over this band the ratio is
+ // 4.28:1, under the 4.5:1 AA needs for body copy. Do not dim this text.
+ color: $cozy-white;
+ }
+
+ .live-demo-cta {
+ margin: 2.25rem 0 0 0;
+
+ // Deliberately not @include flat-white-button: that mixin paints the label
+ // $cozy-mid-gray with !important, which on a saturated blue ground reads as
+ // a disabled control rather than the one thing on the band to click.
+ a.btn-primary {
+ display: inline-flex;
+ align-items: center;
+ gap: 0.5rem;
+ padding: 0.9375rem 2.25rem;
+ border: none;
+ border-radius: 6px;
+ background-color: $cozy-white !important;
+ color: $cozy-darkest-blue !important;
+ font-size: 1.0625rem;
+ font-weight: 600;
+ letter-spacing: 0.005em;
+ box-shadow: 0 2px 10px rgba(#000, 0.16) !important;
+ transition: transform 0.15s ease, box-shadow 0.15s ease;
+
+ &:hover {
+ background-color: $cozy-white !important;
+ color: $cozy-darkest-blue !important;
+ transform: translateY(-1px);
+ box-shadow: 0 6px 18px rgba(#000, 0.22) !important;
+ text-shadow: none !important;
+ }
+
+ &:active {
+ transform: translateY(0);
+ box-shadow: 0 2px 8px rgba(#000, 0.2) !important;
+ }
+
+ // Bootstrap has no other focus affordance on .btn once the box-shadow is
+ // replaced, so the ring has to be drawn explicitly.
+ &:focus-visible {
+ outline: 3px solid $cozy-white;
+ outline-offset: 3px;
+ }
+
+ @media (prefers-reduced-motion: reduce) {
+ transition: none;
+
+ &:hover,
+ &:active {
+ transform: none;
+ }
+ }
+ }
+ }
+}
+
.section-community {
@include gray-background-a;
background-color: $cozy-gray;
diff --git a/content/de/_index.md b/content/de/_index.md
index 06dd00da..ded658ec 100644
--- a/content/de/_index.md
+++ b/content/de/_index.md
@@ -8,7 +8,7 @@ seo:
title: "Cozystack — Open-Source Private Cloud auf Kubernetes"
description: "Open-Source-Cloud-Plattform auf Kubernetes für Managed VMs, Datenbanken, S3-Storage und GPU-Workloads. CNCF-Sandbox-Projekt."
keywords: ["private cloud", "managed kubernetes", "kubernetes plattform", "open source cloud"]
-source_digest: "sha256:e8f982c2431355bc79d3bb2133781cc539553c4c0a293d36e4c23dc54e7fcf80"
+source_digest: "sha256:74f327d876bc1091b8dd1f260bf51a197c68ec1c8eb12a17fc6c1f5723344977"
translation_status: current
l10n: transcreate
taglines:
@@ -88,9 +88,9 @@ features:
{{< blocks/lead color="primary" >}}
Sehen Sie die Konsole, bevor Sie irgendetwas installieren
-Das echte Dashboard von Cozystack, vollständig in Ihrem Browser — kein Cluster, keine Anmeldung, keine Einrichtung. Stöbern Sie im Marketplace, öffnen Sie Managed Services, klicken Sie sich durch die Konsole. Es ist die echte UI, nur mit Demo-Daten.
+Das echte Dashboard von Cozystack, vollständig in Ihrem Browser — kein Cluster, keine Anmeldung, keine Einrichtung. Stöbern Sie im Marketplace, öffnen Sie Managed Services, klicken Sie sich durch die Konsole. Es ist die echte UI, nur mit Demo-Daten.
-Live-Demo öffnen →
+
{{< /blocks/lead >}}
diff --git a/content/en/_index.md b/content/en/_index.md
index 491de4ae..5336bead 100644
--- a/content/en/_index.md
+++ b/content/en/_index.md
@@ -81,9 +81,9 @@ features:
{{< blocks/lead color="primary" >}}
See the console before you install anything
-Cozystack's real dashboard, running entirely in your browser — no cluster, no signup, no setup. Browse the marketplace, open managed services, click through the console. It's the actual UI, just with demo data.
+Cozystack's real dashboard, running entirely in your browser — no cluster, no signup, no setup. Browse the marketplace, open managed services, click through the console. It's the actual UI, just with demo data.
-Open the live demo →
+
{{< /blocks/lead >}}
diff --git a/content/hi/_index.md b/content/hi/_index.md
index 1b96915a..55ee3e55 100644
--- a/content/hi/_index.md
+++ b/content/hi/_index.md
@@ -8,7 +8,7 @@ seo:
title: "Cozystack — Kubernetes पर ओपन-सोर्स प्राइवेट क्लाउड"
description: "Kubernetes पर ओपन-सोर्स क्लाउड प्लेटफ़ॉर्म: मैनेज्ड VMs, डेटाबेस, S3 स्टोरेज और GPU वर्कलोड। CNCF Sandbox प्रोजेक्ट।"
keywords: ["private cloud", "managed kubernetes", "kubernetes platform", "cloud platform"]
-source_digest: "sha256:e8f982c2431355bc79d3bb2133781cc539553c4c0a293d36e4c23dc54e7fcf80"
+source_digest: "sha256:74f327d876bc1091b8dd1f260bf51a197c68ec1c8eb12a17fc6c1f5723344977"
translation_status: current
l10n: transcreate
taglines:
@@ -88,9 +88,9 @@ features:
{{< blocks/lead color="primary" >}}
कुछ भी इंस्टॉल करने से पहले कंसोल देखें
-Cozystack का असली डैशबोर्ड, पूरी तरह आपके ब्राउज़र में चलता हुआ — न क्लस्टर, न साइनअप, न सेटअप। मार्केटप्लेस देखें, मैनेज्ड सेवाएँ खोलें, कंसोल में क्लिक करके घूमें। यह असली UI ही है, बस डेमो डेटा के साथ।
+Cozystack का असली डैशबोर्ड, पूरी तरह आपके ब्राउज़र में चलता हुआ — न क्लस्टर, न साइनअप, न सेटअप। मार्केटप्लेस देखें, मैनेज्ड सेवाएँ खोलें, कंसोल में क्लिक करके घूमें। यह असली UI ही है, बस डेमो डेटा के साथ।
-लाइव डेमो खोलें →
+
{{< /blocks/lead >}}
diff --git a/content/ru/_index.md b/content/ru/_index.md
index 230785d3..6f4bc6b8 100644
--- a/content/ru/_index.md
+++ b/content/ru/_index.md
@@ -8,7 +8,7 @@ seo:
title: "Cozystack — частное облако с открытым кодом на Kubernetes"
description: "Open-source облачная платформа на Kubernetes: управляемые ВМ, базы данных, S3-хранилище и GPU. Проект CNCF Sandbox."
keywords: ["частное облако", "managed kubernetes", "kubernetes платформа", "облачная платформа"]
-source_digest: "sha256:e8f982c2431355bc79d3bb2133781cc539553c4c0a293d36e4c23dc54e7fcf80"
+source_digest: "sha256:74f327d876bc1091b8dd1f260bf51a197c68ec1c8eb12a17fc6c1f5723344977"
translation_status: current
l10n: transcreate
taglines:
@@ -88,9 +88,9 @@ features:
{{< blocks/lead color="primary" >}}
Посмотрите на консоль до того, как что-то устанавливать
-Настоящая панель управления Cozystack, целиком работающая в браузере — без кластера, без регистрации, без настройки. Загляните в маркетплейс, откройте управляемые сервисы, покликайте по консоли. Это тот самый интерфейс, только с демонстрационными данными.
+Настоящая панель управления Cozystack, целиком работающая в браузере — без кластера, без регистрации, без настройки. Загляните в маркетплейс, откройте управляемые сервисы, покликайте по консоли. Это тот самый интерфейс, только с демонстрационными данными.
-Открыть живое демо →
+
{{< /blocks/lead >}}
diff --git a/content/zh-cn/_index.md b/content/zh-cn/_index.md
index 26e42a9f..ae67d299 100644
--- a/content/zh-cn/_index.md
+++ b/content/zh-cn/_index.md
@@ -8,7 +8,7 @@ seo:
title: "Cozystack — 基于 Kubernetes 的开源私有云"
description: "基于 Kubernetes 的开源云平台，提供托管虚拟机、数据库、S3 存储和 GPU 工作负载。CNCF Sandbox 项目。"
keywords: ["私有云", "Kubernetes", "开源云平台", "托管 Kubernetes"]
-source_digest: "sha256:e8f982c2431355bc79d3bb2133781cc539553c4c0a293d36e4c23dc54e7fcf80"
+source_digest: "sha256:74f327d876bc1091b8dd1f260bf51a197c68ec1c8eb12a17fc6c1f5723344977"
translation_status: current
l10n: transcreate
taglines:
@@ -88,9 +88,9 @@ features:
{{< blocks/lead color="primary" >}}
先看看控制台，再决定是否安装
-真实的 Cozystack 仪表盘，完全在你的浏览器中运行——无需集群、无需注册、无需配置。浏览应用市场，打开托管服务，随意点击体验控制台。这就是真正的 UI，只是换成了演示数据。
+真实的 Cozystack 仪表盘，完全在你的浏览器中运行——无需集群、无需注册、无需配置。浏览应用市场，打开托管服务，随意点击体验控制台。这就是真正的 UI，只是换成了演示数据。
-打开在线演示 →
+
{{< /blocks/lead >}}