111 lines
2.3 KiB
CSS
111 lines
2.3 KiB
CSS
@import "tailwindcss";
|
|
@plugin "@tailwindcss/typography";
|
|
@import "animate.css";
|
|
|
|
/* 主题变量 - 日间/夜间模式 */
|
|
:root,
|
|
.light {
|
|
--background: #fafafa;
|
|
--foreground: #171717;
|
|
--card: #ffffff;
|
|
--card-foreground: #171717;
|
|
--muted: #f4f4f5;
|
|
--muted-foreground: #71717a;
|
|
--border: #e4e4e7;
|
|
--accent: #f59e0b;
|
|
--accent-foreground: #1c1917;
|
|
--accent-muted: rgba(245, 158, 11, 0.2);
|
|
--gradient-accent: rgba(251, 191, 36, 0.15);
|
|
}
|
|
|
|
.dark {
|
|
--background: #0c0c0f;
|
|
--foreground: #fafafa;
|
|
--card: rgba(255, 255, 255, 0.05);
|
|
--card-foreground: #fafafa;
|
|
--muted: rgba(255, 255, 255, 0.05);
|
|
--muted-foreground: #a1a1aa;
|
|
--border: rgba(255, 255, 255, 0.08);
|
|
--accent: #f59e0b;
|
|
--accent-foreground: #1c1917;
|
|
--accent-muted: rgba(245, 158, 11, 0.2);
|
|
--gradient-accent: rgba(251, 191, 36, 0.15);
|
|
}
|
|
|
|
@theme inline {
|
|
--color-background: var(--background);
|
|
--color-foreground: var(--foreground);
|
|
--font-sans: "Noto Sans SC Variable", "Geist Variable", system-ui, sans-serif;
|
|
--font-mono: "Geist Mono Variable", monospace;
|
|
}
|
|
|
|
body {
|
|
background: var(--background);
|
|
color: var(--foreground);
|
|
font-family: var(--font-sans);
|
|
transition: background-color 0.2s ease, color 0.2s ease;
|
|
}
|
|
|
|
/* 滚动入场动画 */
|
|
.animate-on-scroll {
|
|
opacity: 0;
|
|
transform: translateY(24px);
|
|
transition: opacity 0.6s ease-out, transform 0.6s ease-out;
|
|
}
|
|
|
|
.animate-on-scroll-visible {
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
}
|
|
|
|
/* 渐变背景动画 */
|
|
@keyframes gradient-shift {
|
|
0%, 100% { opacity: 1; }
|
|
50% { opacity: 0.85; }
|
|
}
|
|
|
|
.animate-gradient {
|
|
animation: gradient-shift 8s ease-in-out infinite;
|
|
}
|
|
|
|
/* 卡片悬停光效 */
|
|
@keyframes shimmer {
|
|
0% { background-position: -200% 0; }
|
|
100% { background-position: 200% 0; }
|
|
}
|
|
|
|
.hover-shimmer {
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.hover-shimmer::after {
|
|
content: "";
|
|
position: absolute;
|
|
inset: 0;
|
|
background: linear-gradient(
|
|
90deg,
|
|
transparent,
|
|
rgba(255, 255, 255, 0.05),
|
|
transparent
|
|
);
|
|
background-size: 200% 100%;
|
|
opacity: 0;
|
|
transition: opacity 0.3s;
|
|
}
|
|
|
|
.hover-shimmer:hover::after {
|
|
opacity: 1;
|
|
animation: shimmer 1.5s ease-in-out;
|
|
}
|
|
|
|
/* CTA 徽章轻微浮动 */
|
|
@keyframes float-badge {
|
|
0%, 100% { transform: translateY(0); }
|
|
50% { transform: translateY(-2px); }
|
|
}
|
|
|
|
.animate-float-badge {
|
|
animation: float-badge 3s ease-in-out infinite;
|
|
}
|