From 7497bfffd0affd76981beaf0e38818c7fa4ee828 Mon Sep 17 00:00:00 2001
From: Lindsay Auchinachie <lindsay@moderne.io>
Date: Thu, 30 Apr 2026 21:42:13 -0400
Subject: [PATCH] Card components redesign: full-width stacked, compact, subtle
 hover

- Generated index page cards now span full width and stack vertically
  instead of a 2-column grid
- Remove gems-bg decoration from generated index pages
- Drop padding--lg from DocCard so module CSS controls padding (was
  blocked by a same-specificity !important tie with Infima)
- Card padding 2rem -> 0.75rem 1.25rem; min-height 3.25rem; rounded 8px
- Hover: light grey #F3F4F6 background instead of mint green
- Title 1.25rem -> 1.0625rem; description 1rem -> 14px Inter, muted
- Card vertical gap 2rem -> 1.25rem

Refs #492

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
---
 src/css/custom.css                  | 24 +++++++++++++-----------
 src/theme/DocCard/index.tsx         |  2 +-
 src/theme/DocCard/styles.module.css | 27 ++++++++++++++++++---------
 3 files changed, 32 insertions(+), 21 deletions(-)

diff --git a/src/css/custom.css b/src/css/custom.css
index 6a3b48ed13..4f4973c0ab 100644
--- a/src/css/custom.css
+++ b/src/css/custom.css
@@ -215,25 +215,27 @@ html[data-theme=dark] [class^=docMainContainer_] .breadcrumbs__link:hover {
   position: relative;
 }
 
-[class^=docMainContainer_] [class^=generatedIndexPage_]::before {
-  position: absolute;
-  background: url(/img/gems-bg.webp) no-repeat 0 0;
-  width: 1322px;
-  height: 1070px;
-  z-index: -1;
-  content: '';
+[class^=docMainContainer_] [class^=generatedIndexPage_] .row > .col,
+[class^=docMainContainer_] [class^=generatedIndexPage_] .col--6 {
+  display: flex;
+  flex: 0 0 100% !important;
+  max-width: 100% !important;
 }
 
-[class^=docMainContainer_] [class^=generatedIndexPage_] .row[class*=list_] > .col {
-  display: flex;
+[class^=docMainContainer_] [class^=generatedIndexPage_] .card {
+  padding: 0.75rem 1.25rem !important;
 }
 
 [class^=docMainContainer_] [class^=generatedIndexPage_] .margin-top--lg {
   margin-top: 4.5rem !important;
 }
 
-[class^=docMainContainer_] [class^=generatedIndexPage_] .margin-bottom--lg {
-  margin-bottom: 2.5rem !important;
+html body .margin-bottom--lg {
+  margin-bottom: 1.25rem !important;
+}
+
+html body section.row .col {
+  margin-bottom: 1.25rem !important;
 }
 
 html[data-theme='dark'] [class^=docMainContainer_] .card {
diff --git a/src/theme/DocCard/index.tsx b/src/theme/DocCard/index.tsx
index f27321ae15..8d69817e66 100644
--- a/src/theme/DocCard/index.tsx
+++ b/src/theme/DocCard/index.tsx
@@ -44,7 +44,7 @@ function CardContainer({
   return (
     <Link
       href={href}
-      className={clsx("card padding--lg", styles.cardContainer)}
+      className={clsx("card", styles.cardContainer)}
     >
       {children}
     </Link>
diff --git a/src/theme/DocCard/styles.module.css b/src/theme/DocCard/styles.module.css
index e9d429925e..2b6bcd073a 100644
--- a/src/theme/DocCard/styles.module.css
+++ b/src/theme/DocCard/styles.module.css
@@ -4,15 +4,22 @@
   --ifm-link-hover-decoration: none;
 
   box-shadow: none;
-  border: 1px solid var(--ifm-color-divider);
-  transition: all var(--ifm-transition-fast) ease;
-  transition-property: border, box-shadow;
+  border: 1px solid var(--ifm-color-border);
+  border-radius: 8px;
+  background-color: #fff;
+  transition: background-color var(--ifm-transition-fast) ease, border-color var(--ifm-transition-fast) ease;
   width: 100%;
+  min-height: 3.25rem;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  padding: 0.75rem 1.25rem !important;
 }
 
 .cardContainer:hover {
-  box-shadow: 0px 2px 30px 0px rgba(0, 0, 0, 0.15);
-  background-color: var(--ifm-color-mint);
+  box-shadow: none;
+  background-color: #F3F4F6;
+  border-color: rgba(4, 24, 52, 0.2);
 }
 
 .cardContainer *:last-child {
@@ -21,14 +28,16 @@
 
 .cardTitle {
   --ifm-heading-margin-bottom: 8px;
-  font-size: 1.25rem;
+  font-size: 1.0625rem;
   font-weight: 600;
-  line-height: 1.666;
+  line-height: 1.4;
 }
 
 .cardDescription {
-  color: var(--ifm-heading-color);
-  font-size: 1rem;
+  color: rgba(4, 24, 52, 0.65);
+  font-family: "Inter", sans-serif;
+  font-size: 14px;
+  line-height: 1.5;
   display: -webkit-box;
   -webkit-line-clamp: 2;
   line-clamp: 2;