From ce3be0143a1779f9eedc7db8a3cd33cc46d2fe22 Mon Sep 17 00:00:00 2001
From: yuetsh <517252939@qq.com>
Date: Mon, 18 May 2026 03:43:07 -0600
Subject: [PATCH] feat: AC card 3D ledge press effect matching button style

- default: rgb(189,174,160)/rgb(15,30,15) 0px 5px 0px 0px ledge
- hover: ledge grows to 7px + translateY(-2px)
- active: translateY(5px) + box-shadow none (press-in collapse)

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 style.css | 34 ++++++++++++++++++----------------
 1 file changed, 18 insertions(+), 16 deletions(-)

diff --git a/style.css b/style.css
index 3bd592e..25f321f 100644
--- a/style.css
+++ b/style.css
@@ -1667,10 +1667,8 @@ html[data-design-theme="animal-crossing"] .card {
   background: rgba(255, 252, 240, 0.85);
   border: 1px solid rgba(109, 188, 126, 0.25);
   border-radius: 16px;
-  box-shadow:
-    0 2px 8px rgba(0, 0, 0, 0.06),
-    0 1px 2px rgba(0, 0, 0, 0.03),
-    inset 0 1px 0 rgba(255, 255, 255, 0.9);
+  box-shadow: rgb(189, 174, 160) 0px 5px 0px 0px;
+  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
 }
 
 html[data-design-theme="animal-crossing"] .card::before {
@@ -1693,10 +1691,13 @@ html[data-design-theme="animal-crossing"] .card:hover,
 html[data-design-theme="animal-crossing"] .card:focus {
   transform: translateY(-2px);
   border-color: rgba(109, 188, 126, 0.45);
-  box-shadow:
-    0 8px 24px rgba(109, 188, 126, 0.2),
-    0 4px 8px rgba(0, 0, 0, 0.08),
-    inset 0 1px 0 rgba(255, 255, 255, 0.95);
+  box-shadow: rgb(189, 174, 160) 0px 7px 0px 0px;
+}
+
+html[data-design-theme="animal-crossing"] .card:active {
+  transform: translateY(5px);
+  box-shadow: none;
+  transition: all 0.1s cubic-bezier(0.4, 0, 0.2, 1);
 }
 
 html[data-design-theme="animal-crossing"] .card:hover h2,
@@ -1759,10 +1760,7 @@ html[data-theme="dark"][data-design-theme="animal-crossing"] .card {
   background: rgba(30, 48, 30, 0.82);
   border: 1px solid rgba(158, 217, 138, 0.18);
   border-radius: 16px;
-  box-shadow:
-    0 2px 8px rgba(0, 0, 0, 0.3),
-    0 1px 2px rgba(0, 0, 0, 0.2),
-    inset 0 1px 0 rgba(255, 255, 255, 0.04);
+  box-shadow: rgb(15, 30, 15) 0px 5px 0px 0px;
 }
 
 html[data-theme="dark"][data-design-theme="animal-crossing"] .card::before {
@@ -1783,11 +1781,15 @@ html[data-theme="dark"][data-design-theme="animal-crossing"] .card p {
 
 html[data-theme="dark"][data-design-theme="animal-crossing"] .card:hover,
 html[data-theme="dark"][data-design-theme="animal-crossing"] .card:focus {
+  transform: translateY(-2px);
   border-color: rgba(158, 217, 138, 0.45);
-  box-shadow:
-    0 8px 24px rgba(158, 217, 138, 0.2),
-    0 4px 8px rgba(0, 0, 0, 0.3),
-    inset 0 1px 0 rgba(255, 255, 255, 0.05);
+  box-shadow: rgb(15, 30, 15) 0px 7px 0px 0px;
+}
+
+html[data-theme="dark"][data-design-theme="animal-crossing"] .card:active {
+  transform: translateY(5px);
+  box-shadow: none;
+  transition: all 0.1s cubic-bezier(0.4, 0, 0.2, 1);
 }
 
 html[data-theme="dark"][data-design-theme="animal-crossing"] .card:hover h2,