From 00cdb383ee429d3f4ec12d93f10f709035ff5e74 Mon Sep 17 00:00:00 2001
From: yuetsh <517252939@qq.com>
Date: Mon, 18 May 2026 03:41:35 -0600
Subject: [PATCH] feat: AC button pill shape with 3D ledge press effect
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- border-radius: 50px (pill shape matching animal-island-ui reference)
- box-shadow ledge: rgb(189,174,160) 0 5px in light, rgb(15,30,15) 0 5px in dark
- :active collapses ledge with translateY(5px) + box-shadow: none
- :hover lifts to 7px ledge
- fix: index.html fallback label Animal Crossing (was 动森)
- fix: remove redundant color on .card:hover

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 index.html |  2 +-
 style.css  | 33 +++++++++++++++++++++++++++++++--
 2 files changed, 32 insertions(+), 3 deletions(-)

diff --git a/index.html b/index.html
index 0f83e52..adf3455 100644
--- a/index.html
+++ b/index.html
@@ -44,7 +44,7 @@
           </li>
           <li role="option" data-value="nord" aria-selected="false">Nord</li>
           <li role="option" data-value="animal-crossing" aria-selected="false">
-            动森
+            Animal Crossing
           </li>
         </ul>
       </label>
diff --git a/style.css b/style.css
index 3f64155..3bd592e 100644
--- a/style.css
+++ b/style.css
@@ -1643,7 +1643,24 @@ html[data-design-theme="animal-crossing"] body {
 
 html[data-design-theme="animal-crossing"] .design-theme-button,
 html[data-design-theme="animal-crossing"] .theme-toggle {
-  border-radius: 14px;
+  border-radius: 50px;
+  box-shadow: rgb(189, 174, 160) 0px 5px 0px 0px;
+  font-weight: 600;
+  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+html[data-design-theme="animal-crossing"] .design-theme-button:hover,
+html[data-design-theme="animal-crossing"] .theme-toggle:hover {
+  transform: translateY(-2px);
+  box-shadow: rgb(189, 174, 160) 0px 7px 0px 0px;
+  border-color: rgba(109, 188, 126, 0.45);
+}
+
+html[data-design-theme="animal-crossing"] .design-theme-button:active,
+html[data-design-theme="animal-crossing"] .theme-toggle: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 {
@@ -1674,7 +1691,6 @@ html[data-design-theme="animal-crossing"] .card p {
 
 html[data-design-theme="animal-crossing"] .card:hover,
 html[data-design-theme="animal-crossing"] .card:focus {
-  color: var(--accent);
   transform: translateY(-2px);
   border-color: rgba(109, 188, 126, 0.45);
   box-shadow:
@@ -1793,6 +1809,19 @@ html[data-theme="dark"][data-design-theme="animal-crossing"]
     inset 0 1px 0 rgba(255, 255, 255, 0.04);
 }
 
+html[data-theme="dark"][data-design-theme="animal-crossing"]
+  .design-theme-button,
+html[data-theme="dark"][data-design-theme="animal-crossing"] .theme-toggle {
+  box-shadow: rgb(15, 30, 15) 0px 5px 0px 0px;
+}
+
+html[data-theme="dark"][data-design-theme="animal-crossing"]
+  .design-theme-button:hover,
+html[data-theme="dark"][data-design-theme="animal-crossing"]
+  .theme-toggle:hover {
+  box-shadow: rgb(15, 30, 15) 0px 7px 0px 0px;
+}
+
 html[data-theme="dark"][data-design-theme="animal-crossing"] .beian a {
   color: #b0c8a0;
 }