Upload files to "/"

2026-09-14 23:34:36 +08:00
parent a26bbecbd1
commit 1e893db246
5 changed files with 631 additions and 0 deletions
@@ -0,0 +1,80 @@
+@import "tailwindcss";
+
+/* Class-based dark variant so Bedtime Mode toggle drives every dark: style */
+@custom-variant dark (&:where(.dark, .dark *));
+
+@layer base {
+  body {
+    font-family: 'Nunito', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+    background-color: #fbf8f2;
+    color: #2c2523;
+    overflow-x: hidden;
+  }
+
+  h1, h2, h3, .font-heading {
+    font-family: 'Fredoka', 'Quicksand', sans-serif;
+  }
+
+  .font-hand {
+    font-family: 'Patrick Hand', cursive;
+  }
+
+  .font-reading {
+    font-family: 'Quicksand', 'Nunito', sans-serif;
+  }
+}
+
+@layer components {
+  /* Custom whimsical storybook effects */
+  .book-shadow {
+    box-shadow: 0 20px 40px -15px rgba(45, 25, 20, 0.22),
+                0 0 0 1px rgba(0, 0, 0, 0.05),
+                0 1px 3px rgba(0, 0, 0, 0.1);
+  }
+
+  .book-spine {
+    box-shadow: inset 18px 0 30px -10px rgba(0, 0, 0, 0.15),
+                inset -4px 0 8px rgba(0, 0, 0, 0.05);
+  }
+
+  .paper-texture {
+    background-color: #fdfaf5;
+    background-image: radial-gradient(#ece4d4 0.75px, transparent 0.75px), radial-gradient(#ece4d4 0.75px, #fdfaf5 0.75px);
+    background-size: 30px 30px;
+    background-position: 0 0, 15px 15px;
+  }
+
+  /* Dark paper texture for Bedtime Mode */
+  .dark .paper-texture {
+    background-color: #0f172a;
+    background-image: radial-gradient(rgba(99, 102, 241, 0.25) 0.75px, transparent 0.75px), radial-gradient(rgba(99, 102, 241, 0.18) 0.75px, #0f172a 0.75px);
+  }
+
+  .animate-float-slow {
+    animation: floatSlow 5s ease-in-out infinite;
+  }
+
+  .animate-pulse-gentle {
+    animation: gentlePulse 3.5s ease-in-out infinite;
+  }
+
+  .animate-sparkle {
+    animation: shimmerSparkle 3s ease-in-out infinite;
+  }
+}
+
+@keyframes floatSlow {
+  0%, 100% { transform: translateY(0px) rotate(0deg); }
+  50% { transform: translateY(-8px) rotate(1.5deg); }
+}
+
+@keyframes gentlePulse {
+  0%, 100% { opacity: 0.9; transform: scale(1); }
+  50% { opacity: 1; transform: scale(1.03); }
+}
+
+@keyframes shimmerSparkle {
+  0% { transform: scale(0.8) rotate(0deg); opacity: 0.4; }
+  50% { transform: scale(1.15) rotate(90deg); opacity: 1; }
+  100% { transform: scale(0.8) rotate(180deg); opacity: 0.4; }
+}