From 12411e93cf7f3408368532d1170123ff1592a6bc Mon Sep 17 00:00:00 2001 From: tym83 <6355522@gmail.com> Date: Sat, 12 Sep 2026 10:41:54 +0500 Subject: [PATCH 1/6] fix(site): give the live-demo band its own layout The band rendered badly: the call to action sat inline at the end of the paragraph and collided with it, the band had almost no vertical padding so the copy touched the navbar, body text rendered at heading size and weight, the line ran the full width of the container, and a blue button on the blue ground read as a faint outline. The cause is that Docsy's blocks/lead wraps whatever it is given in `.h4 mb-0`, and `.section-live-demo` was the only band on the homepage with no SCSS of its own -- `.section-community` and `.section-resources` both already undo the same inherited defaults. Adds that missing block: vertical rhythm, body typography instead of the inherited heading styles, a 46rem measure so centred text is readable, the scroll-cue arrow hidden as the neighbouring band already does, and the button switched to the project's existing flat-white-button mixin -- the same treatment the hero's Get started button uses. The lead and the button move into their own elements so the button is no longer part of the paragraph's text flow. Applied to all five locale homepages, not just English. Signed-off-by: tym83 <6355522@gmail.com> --- assets/scss/_index.scss | 53 +++++++++++++++++++++++++++++++++++++++++ content/de/_index.md | 4 ++-- content/en/_index.md | 4 ++-- content/hi/_index.md | 4 ++-- content/ru/_index.md | 4 ++-- content/zh-cn/_index.md | 4 ++-- 6 files changed, 63 insertions(+), 10 deletions(-) diff --git a/assets/scss/_index.scss b/assets/scss/_index.scss index 48ceeb85..7e51135d 100644 --- a/assets/scss/_index.scss +++ b/assets/scss/_index.scss @@ -231,6 +231,59 @@ 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 { + padding-top: 4.5rem; + padding-bottom: 4.5rem; + + @include media-breakpoint-down(md) { + padding-top: 2.75rem; + padding-bottom: 2.75rem; + } + } + + // 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.25rem 0; + font-size: clamp(1.5rem, 3vw, 2rem); + font-weight: 700; + line-height: 1.2; + color: $cozy-white !important; + } + + // 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 { + max-width: 46rem; + margin: 0 auto; + font-size: 1.0625rem; + font-weight: 400; + line-height: 1.7; + color: rgba($cozy-white, 0.92); + } + + .live-demo-cta { + margin: 2rem 0 0 0; + + a.btn-primary { + @include flat-white-button; + + padding: 0.75rem 1.75rem; + font-size: 1rem; + font-weight: 600 !important; + } + } +} + .section-community { @include gray-background-a; background-color: $cozy-gray; diff --git a/content/de/_index.md b/content/de/_index.md index 06dd00da..43f09069 100644 --- a/content/de/_index.md +++ b/content/de/_index.md @@ -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 → +

Live-Demo öffnen →

{{< /blocks/lead >}} diff --git a/content/en/_index.md b/content/en/_index.md index 491de4ae..8d168984 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 → +

Open the live demo →

{{< /blocks/lead >}} diff --git a/content/hi/_index.md b/content/hi/_index.md index 1b96915a..dd9122ca 100644 --- a/content/hi/_index.md +++ b/content/hi/_index.md @@ -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..f9e0a3cd 100644 --- a/content/ru/_index.md +++ b/content/ru/_index.md @@ -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..8c6bd339 100644 --- a/content/zh-cn/_index.md +++ b/content/zh-cn/_index.md @@ -88,9 +88,9 @@ features: {{< blocks/lead color="primary" >}}

先看看控制台，再决定是否安装

-真实的 Cozystack 仪表盘，完全在你的浏览器中运行——无需集群、无需注册、无需配置。浏览应用市场，打开托管服务，随意点击体验控制台。这就是真正的 UI，只是换成了演示数据。 +

真实的 Cozystack 仪表盘，完全在你的浏览器中运行——无需集群、无需注册、无需配置。浏览应用市场，打开托管服务，随意点击体验控制台。这就是真正的 UI，只是换成了演示数据。

-打开在线演示 → +

打开在线演示 →

{{< /blocks/lead >}} From 8c66bfafdbbf1d49a32fb7c6b49811d6c9fc9d1a Mon Sep 17 00:00:00 2001 From: tym83 <6355522@gmail.com> Date: Sat, 12 Sep 2026 10:49:00 +0500 Subject: [PATCH 2/6] fix(site): address review of the live-demo band Accessibility: - The lead was rgba(white, .92) on #3d6ddd, which composites to 4.28:1 -- under the 4.5:1 AA floor for body copy. Flat white gives 4.74:1. There is little headroom on this ground, so the colour should not be dimmed again without darkening the band. - flat-white-button zeroes box-shadow with !important and Bootstrap has no other focus affordance on .btn, so the button had no keyboard focus indicator at all. Added an explicit focus-visible outline. Design: - Heading dropped from 700 to 500. Every other section label on the page is 500 at this size; the blue ground is the emphasis already. - Measure tightened from 46rem to 40rem -- about 72 characters instead of 84. - Button raised to 1.125rem with roomier padding. It is the only call to action in a band that exists for it, and 1rem read as incidental. Signed-off-by: tym83 <6355522@gmail.com> --- assets/scss/_index.scss | 26 +++++++++++++++++++++----- 1 file changed, 21 insertions(+), 5 deletions(-) diff --git a/assets/scss/_index.scss b/assets/scss/_index.scss index 7e51135d..e871c7ec 100644 --- a/assets/scss/_index.scss +++ b/assets/scss/_index.scss @@ -255,20 +255,27 @@ main.td-main { .section-label { margin: 0 0 1.25rem 0; font-size: clamp(1.5rem, 3vw, 2rem); - font-weight: 700; + // Every other section label on the home page is 500 at this size. The blue + // ground is the emphasis here; the weight does not need to be as well. + font-weight: 500; line-height: 1.2; + text-wrap: balance; color: $cozy-white !important; } // 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 { - max-width: 46rem; + // ~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.7; - color: rgba($cozy-white, 0.92); + // 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. Flat white gives 4.74:1, + // which is not much headroom either -- do not dim this text again. + color: $cozy-white; } .live-demo-cta { @@ -277,9 +284,18 @@ main.td-main { a.btn-primary { @include flat-white-button; - padding: 0.75rem 1.75rem; - font-size: 1rem; + padding: 0.875rem 2rem; + font-size: 1.125rem; font-weight: 600 !important; + + // flat-white-button zeroes box-shadow with !important, and Bootstrap has + // no other focus affordance on .btn -- without this the button is not + // keyboard-visible at all. + &:focus-visible { + outline: 2px solid $cozy-white; + outline-offset: 3px; + box-shadow: none; + } } } } From b8804143556b489723e47dc56938fd30d10513be Mon Sep 17 00:00:00 2001 From: tym83 <6355522@gmail.com> Date: Sat, 12 Sep 2026 10:52:11 +0500 Subject: [PATCH 3/6] fix(site): drop two unneeded !important and move the CTA out of a paragraph The CTA in a

newly satisfied Docsy's `p > a` link-variant rule, which underlines links inside a primary box -- the hero carries an explicit text-decoration:none for exactly that reason. A

avoids the rule and is better semantics for a lone button. The two !important declarations were copied from projects-btn-primary and lose nothing: the only competitors sit at lower specificity. Co-Authored-By: Claude Signed-off-by: tym83 <6355522@gmail.com> --- assets/scss/_index.scss | 4 ++-- content/de/_index.md | 2 +- content/en/_index.md | 2 +- content/hi/_index.md | 2 +- content/ru/_index.md | 2 +- content/zh-cn/_index.md | 2 +- 6 files changed, 7 insertions(+), 7 deletions(-) diff --git a/assets/scss/_index.scss b/assets/scss/_index.scss index e871c7ec..5e7c3302 100644 --- a/assets/scss/_index.scss +++ b/assets/scss/_index.scss @@ -260,7 +260,7 @@ main.td-main { font-weight: 500; line-height: 1.2; text-wrap: balance; - color: $cozy-white !important; + color: $cozy-white; } // Reset the inherited .h4 typography to body copy, and hold the line length @@ -286,7 +286,7 @@ main.td-main { padding: 0.875rem 2rem; font-size: 1.125rem; - font-weight: 600 !important; + font-weight: 600; // flat-white-button zeroes box-shadow with !important, and Bootstrap has // no other focus affordance on .btn -- without this the button is not diff --git a/content/de/_index.md b/content/de/_index.md index 43f09069..7e463590 100644 --- a/content/de/_index.md +++ b/content/de/_index.md @@ -90,7 +90,7 @@ features:

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 →

+
Live-Demo öffnen →
{{< /blocks/lead >}}
diff --git a/content/en/_index.md b/content/en/_index.md index 8d168984..5336bead 100644 --- a/content/en/_index.md +++ b/content/en/_index.md @@ -83,7 +83,7 @@ features:

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 →

+
Open the live demo →
{{< /blocks/lead >}} diff --git a/content/hi/_index.md b/content/hi/_index.md index dd9122ca..45db015c 100644 --- a/content/hi/_index.md +++ b/content/hi/_index.md @@ -90,7 +90,7 @@ features:

Cozystack का असली डैशबोर्ड, पूरी तरह आपके ब्राउज़र में चलता हुआ — न क्लस्टर, न साइनअप, न सेटअप। मार्केटप्लेस देखें, मैनेज्ड सेवाएँ खोलें, कंसोल में क्लिक करके घूमें। यह असली UI ही है, बस डेमो डेटा के साथ।

-

लाइव डेमो खोलें →

+
लाइव डेमो खोलें →
{{< /blocks/lead >}} diff --git a/content/ru/_index.md b/content/ru/_index.md index f9e0a3cd..100ea6a7 100644 --- a/content/ru/_index.md +++ b/content/ru/_index.md @@ -90,7 +90,7 @@ features:

Настоящая панель управления Cozystack, целиком работающая в браузере — без кластера, без регистрации, без настройки. Загляните в маркетплейс, откройте управляемые сервисы, покликайте по консоли. Это тот самый интерфейс, только с демонстрационными данными.

-

Открыть живое демо →

+
Открыть живое демо →
{{< /blocks/lead >}} diff --git a/content/zh-cn/_index.md b/content/zh-cn/_index.md index 8c6bd339..59bc38f5 100644 --- a/content/zh-cn/_index.md +++ b/content/zh-cn/_index.md @@ -90,7 +90,7 @@ features:

真实的 Cozystack 仪表盘，完全在你的浏览器中运行——无需集群、无需注册、无需配置。浏览应用市场，打开托管服务，随意点击体验控制台。这就是真正的 UI，只是换成了演示数据。

-

打开在线演示 →

+
打开在线演示 →
{{< /blocks/lead >}} From 9a2ebdf40b72c34b52bc1ab30f217a4cb1c58aca Mon Sep 17 00:00:00 2001 From: tym83 <6355522@gmail.com> Date: Sat, 12 Sep 2026 10:55:22 +0500 Subject: [PATCH 4/6] style(site): even out the live-demo band's optical padding Measured padding was symmetric at 4.5rem, but the top reads deeper: the heading's line-box leading adds air above, while the button below ends on a hard edge. 5rem at the bottom balances what the eye actually sees. Co-Authored-By: Claude Signed-off-by: tym83 <6355522@gmail.com> --- assets/scss/_index.scss | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/assets/scss/_index.scss b/assets/scss/_index.scss index 5e7c3302..972c9d0b 100644 --- a/assets/scss/_index.scss +++ b/assets/scss/_index.scss @@ -239,7 +239,9 @@ main.td-main { .section-live-demo { .td-box--primary { padding-top: 4.5rem; - padding-bottom: 4.5rem; + // Slightly deeper than the top: the heading's line-box leading already + // reads as ~6px of extra air above, while the button ends on a hard edge. + padding-bottom: 5rem; @include media-breakpoint-down(md) { padding-top: 2.75rem; From c43c329d0621ac8739ed1683ebc1f1fda829a885 Mon Sep 17 00:00:00 2001 From: tym83 <6355522@gmail.com> Date: Sat, 12 Sep 2026 11:01:04 +0500 Subject: [PATCH 5/6] chore(i18n): refresh source digests for the home page The markup change touched the English home page, which the freshness check tracks by digest, so the four translations were flagged stale. The translated strings themselves were changed in the same commit and in the same way -- only the wrapper elements around them -- so there is nothing to retranslate; the digests just need to catch up. Co-Authored-By: Claude Signed-off-by: tym83 <6355522@gmail.com> --- content/de/_index.md | 2 +- content/hi/_index.md | 2 +- content/ru/_index.md | 2 +- content/zh-cn/_index.md | 2 +- 4 files changed, 4 insertions(+), 4 deletions(-) diff --git a/content/de/_index.md b/content/de/_index.md index 7e463590..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: diff --git a/content/hi/_index.md b/content/hi/_index.md index 45db015c..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: diff --git a/content/ru/_index.md b/content/ru/_index.md index 100ea6a7..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: diff --git a/content/zh-cn/_index.md b/content/zh-cn/_index.md index 59bc38f5..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: From 38fafd9b5e4672bb070a97c1510e12846ae0b05d Mon Sep 17 00:00:00 2001 From: tym83 <6355522@gmail.com> Date: Sat, 12 Sep 2026 12:03:39 +0500 Subject: [PATCH 6/6] fix(site): make the live-demo band's button and type carry the section The band's markup is already on main, but the stylesheet that gives its classes any meaning is not, so the section currently renders with no rules at all: text running to the viewport edge, fallback typography, and a button with no fill. That is what visitors see today. Beyond restoring the layout, this reworks the band itself: - A gradient ground instead of the flat primary fill. The band sits between two white sections, and a flat slab reads as a coloured gap rather than a surface of its own. - The heading goes to 600 weight with a tighter line-height and a slight negative tracking, so it reads as deliberate rather than as default Docsy type. - The button no longer uses the flat-white-button mixin, which paints the label mid-grey with !important. On a saturated blue ground that reads as a disabled control. It is now white with the darkest brand blue as its label, with a shadow, a hover lift, and an explicit focus ring, honouring prefers-reduced-motion. Co-Authored-By: Claude Signed-off-by: tym83 <6355522@gmail.com> --- assets/scss/_index.scss | 83 ++++++++++++++++++++++++++++------------- 1 file changed, 57 insertions(+), 26 deletions(-) diff --git a/assets/scss/_index.scss b/assets/scss/_index.scss index 972c9d0b..81ee8401 100644 --- a/assets/scss/_index.scss +++ b/assets/scss/_index.scss @@ -238,14 +238,16 @@ main.td-main { // of those inherited defaults rather than decorating. .section-live-demo { .td-box--primary { - padding-top: 4.5rem; - // Slightly deeper than the top: the heading's line-box leading already - // reads as ~6px of extra air above, while the button ends on a hard edge. - padding-bottom: 5rem; + // 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: 2.75rem; - padding-bottom: 2.75rem; + padding-top: 3.25rem; + padding-bottom: 3.25rem; } } @@ -255,48 +257,77 @@ main.td-main { } .section-label { - margin: 0 0 1.25rem 0; - font-size: clamp(1.5rem, 3vw, 2rem); - // Every other section label on the home page is 500 at this size. The blue - // ground is the emphasis here; the weight does not need to be as well. - font-weight: 500; - line-height: 1.2; + 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. + // 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.7; + 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. Flat white gives 4.74:1, - // which is not much headroom either -- do not dim this text again. + // 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: 2rem 0 0 0; + 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 { - @include flat-white-button; - - padding: 0.875rem 2rem; - font-size: 1.125rem; + 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; + } - // flat-white-button zeroes box-shadow with !important, and Bootstrap has - // no other focus affordance on .btn -- without this the button is not - // keyboard-visible at all. + // 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: 2px solid $cozy-white; + outline: 3px solid $cozy-white; outline-offset: 3px; - box-shadow: none; + } + + @media (prefers-reduced-motion: reduce) { + transition: none; + + &:hover, + &:active { + transform: none; + } } } }