feat: add animal-crossing light mode CSS

2026-05-18 03:30:14 -06:00
parent 2517a84713
commit fe6c9dbe5d
1 changed files with 106 additions and 0 deletions
--- a/style.css
+++ b/style.css
@@ -1580,3 +1580,109 @@ html[data-theme="light"][data-design-theme="nord"] .beian a {
 html[data-theme="light"][data-design-theme="nord"] .beian a:hover {
  color: #5e81ac;
 }
+
+/* ─── Animal Crossing — Sunny Meadow ───────────────────────── */
+html[data-design-theme="animal-crossing"] {
+  color-scheme: light;
+
+  --accent: #6dbc7e;
+  --accent-rgb: 109, 188, 126;
+  --accent-2: #5aad6d;
+  --accent-3: #4a9e5d;
+  --accent-secondary-rgb: 244, 200, 66;
+
+  --page-gradient: linear-gradient(
+    135deg,
+    #fdf6e3 0%,
+    #f5f0d8 25%,
+    #fdf6e3 50%,
+    #f8f2e0 75%,
+    #fdf6e3 100%
+  );
+  --page-texture:
+    radial-gradient(
+      circle at 20% 50%,
+      rgba(109, 188, 126, 0.08) 0%,
+      transparent 50%
+    ),
+    radial-gradient(
+      circle at 80% 80%,
+      rgba(244, 200, 66, 0.06) 0%,
+      transparent 50%
+    );
+  --title-gradient: linear-gradient(
+    135deg,
+    #6dbc7e 0%,
+    #5aad6d 40%,
+    #f4c842 100%
+  );
+
+  --control-bg: rgba(255, 252, 240, 0.82);
+  --control-border: rgba(109, 188, 126, 0.35);
+  --control-inset: rgba(255, 255, 255, 0.85);
+  --control-fg: #5c4824;
+}
+
+html[data-design-theme="animal-crossing"] body {
+  color: #5c4824;
+}
+
+html[data-design-theme="animal-crossing"] .design-theme-button,
+html[data-design-theme="animal-crossing"] .theme-toggle {
+  border-radius: 14px;
+}
+
+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);
+}
+
+html[data-design-theme="animal-crossing"] .card::before {
+  display: none;
+}
+
+html[data-design-theme="animal-crossing"] .card.pin {
+  background: rgba(245, 242, 228, 0.88);
+}
+
+html[data-design-theme="animal-crossing"] .card h2 {
+  color: #5c4824;
+}
+
+html[data-design-theme="animal-crossing"] .card p {
+  color: #7a6040;
+}
+
+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:
+    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);
+}
+
+html[data-design-theme="animal-crossing"] .card:hover h2,
+html[data-design-theme="animal-crossing"] .card:focus h2 {
+  color: var(--accent);
+}
+
+html[data-design-theme="animal-crossing"] .card:hover p,
+html[data-design-theme="animal-crossing"] .card:focus p {
+  color: #5c4824;
+}
+
+html[data-design-theme="animal-crossing"] .beian a {
+  color: #7a6040;
+}
+
+html[data-design-theme="animal-crossing"] .beian a:hover {
+  color: var(--accent);
+}