From c0b1b1f62bcf57979112a2f1a188c13b36c8926c Mon Sep 17 00:00:00 2001
From: Lindsay Auchinachie <lindsay@moderne.io>
Date: Thu, 30 Apr 2026 23:01:40 -0400
Subject: [PATCH] Visual polish: neo card tokens, rounded media, sidebar active
 leaf

- Define --neo-* design tokens (border, grey-300, card shadow, hover bg)
  for both light and dark mode. Cards default to transparent fill and
  fill in to white with a soft shadow on hover, replacing the flat grey
  hover with something that feels more intentional
- Apply the same treatment to markdown link-list cards (recipe READMEs)
- Round corners (12px) on inline images and YouTube/Vimeo iframes inside
  markdown content, matching the existing video player treatment
- Bump the sidebar's active leaf from 600 to 700 Inter for clearer
  current-page emphasis

Self-contained: all additions use !important / attribute selectors so
the PR lands cleanly on top of the other visual-refresh PRs in any order.

Refs #492

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
---
 src/css/custom.css | 66 ++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 66 insertions(+)

diff --git a/src/css/custom.css b/src/css/custom.css
index 6a3b48ed13..777e436816 100644
--- a/src/css/custom.css
+++ b/src/css/custom.css
@@ -436,3 +436,69 @@ html[data-theme='dark'] {
   margin: 0 calc(-1 * var(--ifm-pre-padding));
   padding: 0 calc(var(--ifm-pre-padding) - 3px) 0 var(--ifm-pre-padding);
 }
+
+/* ============================================================
+ * Visual polish — neo card design tokens, rounded media,
+ * sidebar active-leaf weight bump.
+ * Additive overrides; safe to land regardless of which other
+ * visual-refresh PRs merge first.
+ * ============================================================ */
+
+:root {
+  --neo-border-card: rgba(4, 24, 52, 0.12);
+  --neo-grey-300: rgba(4, 24, 52, 0.25);
+  --neo-shadow-card: 0 1px 2px rgba(4, 24, 52, 0.06), 0 4px 12px rgba(4, 24, 52, 0.05);
+  --neo-card-hover-bg: #FFFFFF;
+}
+
+html[data-theme='dark'] {
+  --neo-border-card: rgba(255, 255, 255, 0.1);
+  --neo-grey-300: rgba(255, 255, 255, 0.25);
+  --neo-shadow-card: 0 1px 2px rgba(0, 0, 0, 0.3), 0 4px 12px rgba(0, 0, 0, 0.2);
+  --neo-card-hover-bg: rgba(255, 255, 255, 0.04);
+}
+
+/* DocCard — transparent default, white on hover with shadow lift */
+[class^=cardContainer_] {
+  background-color: transparent !important;
+  border-color: var(--neo-border-card) !important;
+  transition: background-color 120ms ease, border-color 120ms ease, box-shadow 120ms ease !important;
+}
+
+[class^=cardContainer_]:hover {
+  background-color: var(--neo-card-hover-bg) !important;
+  border-color: var(--neo-grey-300) !important;
+  box-shadow: var(--neo-shadow-card) !important;
+}
+
+/* Markdown link-list cards — same treatment */
+.markdown ul:has(> li > a:only-child) > li > a {
+  background-color: transparent !important;
+  border-color: var(--neo-border-card) !important;
+  transition: background-color 120ms ease, border-color 120ms ease, box-shadow 120ms ease !important;
+}
+
+.markdown ul:has(> li > a:only-child) > li > a:hover {
+  background-color: var(--neo-card-hover-bg) !important;
+  border-color: var(--neo-grey-300) !important;
+  box-shadow: var(--neo-shadow-card) !important;
+}
+
+/* Rounded corners on inline media */
+.markdown img,
+figure img {
+  border-radius: 12px;
+}
+
+.markdown iframe[src*="youtube"],
+.markdown iframe[src*="youtu.be"],
+.markdown iframe[src*="vimeo"],
+.markdown iframe {
+  border-radius: 12px;
+}
+
+/* Sidebar active-leaf — bump to 700 Inter for stronger emphasis */
+.theme-doc-sidebar-menu .menu__link:not(.menu__link--sublist).menu__link--active {
+  font-weight: 700 !important;
+  font-family: "Inter", sans-serif !important;
+}