initial commit

src/styles/global.css

@@ -0,0 +1,114 @@
+@import 'tailwindcss/base';
+@import 'tailwindcss/components';
+@import 'tailwindcss/utilities';
+
+/* 全局样式 */
+@layer base {
+  * {
+    box-sizing: border-box;
+  }
+  
+  html {
+    font-family: 'Inter', system-ui, sans-serif;
+    scroll-behavior: smooth;
+  }
+  
+  body {
+    @apply bg-gradient-to-br from-morandi-cream via-morandi-beige to-morandi-sage;
+    @apply min-h-screen;
+    margin: 0;
+    padding: 0;
+    line-height: 1.6;
+  }
+}
+
+/* 玻璃质感工具类 */
+@layer components {
+  .glass {
+    @apply bg-white/20 backdrop-blur-md border border-white/30;
+    box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
+  }
+  
+  .glass-dark {
+    @apply bg-morandi-stone/20 backdrop-blur-md border border-morandi-clay/30;
+    box-shadow: 0 8px 32px 0 rgba(122, 107, 93, 0.37);
+  }
+  
+  .glass-hover {
+    @apply transition-all duration-300 hover:bg-white/30 hover:shadow-xl hover:scale-105;
+  }
+  
+  .card-container {
+    @apply glass rounded-2xl p-6 animate-fade-in;
+  }
+  
+  .card-container-dark {
+    @apply glass-dark rounded-2xl p-6 animate-fade-in;
+  }
+  
+  /* 导航卡片样式 */
+  .nav-card {
+    @apply card-container glass-hover cursor-pointer;
+    @apply flex flex-col items-center justify-center;
+    @apply min-h-[200px] text-center;
+    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+  }
+  
+  .nav-card:hover {
+    @apply -translate-y-2;
+  }
+  
+  /* 报告容器样式 */
+  .report-container {
+    @apply card-container-dark max-w-4xl mx-auto;
+  }
+  
+  .report-section {
+    @apply glass rounded-xl p-4 mb-6 animate-scale-in;
+  }
+  
+  /* 按钮样式 */
+  .btn-primary {
+    @apply glass rounded-xl px-6 py-3 text-morandi-deep font-medium;
+    @apply hover:bg-white/40 transition-all duration-300;
+    @apply hover:shadow-lg hover:scale-105;
+  }
+  
+  .btn-secondary {
+    @apply glass-dark rounded-xl px-6 py-3 text-morandi-cream font-medium;
+    @apply hover:bg-morandi-stone/30 transition-all duration-300;
+    @apply hover:shadow-lg hover:scale-105;
+  }
+}
+
+/* 动画增强 */
+@layer utilities {
+  .animate-float {
+    animation: float 3s ease-in-out infinite;
+  }
+  
+  .animate-pulse-soft {
+    animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
+  }
+  
+  .fade-in-up {
+    @apply animate-fade-in;
+  }
+  
+  .stagger-animation > * {
+    animation-delay: calc(var(--stagger) * 0.1s);
+  }
+}
+
+/* 响应式网格 */
+.grid-auto-fit {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
+  gap: 1.5rem;
+}
+
+.grid-auto-fill {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
+  gap: 2rem;
+}