// ============================================ // Card — Animal Island Style // ============================================ .card { border-radius: 20px; background: rgb(247, 243, 223); padding: 16px 24px; color: #725d42; font-weight: 500; transition: all 0.3s ease; cursor: pointer; &:hover { transform: translateY(-2px); } } // ---------- Type: title ---------- .card-title { background: #fdfdf5; border-radius: 40px 35px 45px 38px / 38px 45px 35px 40px; padding: 12px 32px; font-weight: 600; } // ---------- Type: dashed ---------- .card-dashed { background: rgb(250, 248, 242); border: 2px dashed #e8dcc8; box-shadow: none; &:hover { transform: none; border-color: #d4c4a8; } } // ============================================ // Color variants — NookPhone palette // ============================================ // App Pink — 应用粉 .card-app-pink { background: #f8a6b2; color: #fff; } // Purple — 紫色 .card-purple { background: #b77dee; color: #fff; } // App Blue — 应用蓝 .card-app-blue { background: #889df0; color: #fff; } // App Yellow — 应用黄 .card-app-yellow { background: #f7cd67; color: #725d42; } // App Orange — 应用橙 .card-app-orange { background: #e59266; color: #fff; } // App Teal — 应用青 .card-app-teal { background: #82d5bb; color: #fff; } // App Green — 应用绿 .card-app-green { background: #8ac68a; color: #fff; } // App Red — 应用红 .card-app-red { background: #fc736d; color: #fff; } // Lime Green — 青柠绿 .card-lime-green { background: #d1da49; color: #3d5a1a; } // Yellow-Green — 黄绿色 .card-yellow-green { background: #ecdf52; color: #725d42; } // Brown — 棕色 .card-brown { background: #9a835a; color: #fff; } // Warm Peach Pink — 暖桃粉 .card-warm-peach-pink { background: #e18c6f; color: #fff; }