index.css•9.26 kB
@tailwind base;
@tailwind components;
@tailwind utilities;
:root {
color-scheme: light dark;
/* 极简优雅配色 - 低饱和度渐变 */
--gradient-primary: linear-gradient(135deg, #a8b3cf 0%, #b4a5c7 100%);
--gradient-secondary: linear-gradient(135deg, #e5d9f2 0%, #f5e6e8 100%);
--gradient-success: linear-gradient(135deg, #cfe9f3 0%, #d4f1f4 100%);
/* 优雅阴影系统 - 轻柔渐进 */
--shadow-elegant-sm: 0 2px 8px rgba(0, 0, 0, 0.04), 0 1px 2px rgba(0, 0, 0, 0.02);
--shadow-elegant-md: 0 4px 16px rgba(0, 0, 0, 0.06), 0 2px 4px rgba(0, 0, 0, 0.03);
--shadow-elegant-lg: 0 8px 32px rgba(0, 0, 0, 0.08), 0 4px 8px rgba(0, 0, 0, 0.04);
--shadow-elegant-xl: 0 16px 48px rgba(0, 0, 0, 0.10), 0 8px 16px rgba(0, 0, 0, 0.05);
/* 高斯模糊强度 */
--blur-subtle: blur(8px);
--blur-medium: blur(16px);
--blur-strong: blur(24px);
/* 字体尺寸系统 - 适中优雅 */
--text-xs: 0.8125rem; /* 13px */
--text-sm: 0.9375rem; /* 15px */
--text-base: 1.0625rem; /* 17px */
--text-lg: 1.25rem; /* 20px */
--text-xl: 1.5rem; /* 24px */
--text-2xl: 2rem; /* 32px */
--text-3xl: 2.5rem; /* 40px */
/* 间距系统 - 宽敞呼吸感 */
--spacing-xs: 0.75rem; /* 12px */
--spacing-sm: 1rem; /* 16px */
--spacing-md: 1.5rem; /* 24px */
--spacing-lg: 2.5rem; /* 40px */
--spacing-xl: 4rem; /* 64px */
--spacing-2xl: 6rem; /* 96px */
}
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Helvetica Neue', sans-serif;
/* 极简优雅背景 - 纯净渐变 */
@apply bg-gradient-to-br from-gray-50 via-white to-gray-100 text-gray-800;
@apply dark:from-gray-950 dark:via-slate-950 dark:to-gray-900 dark:text-gray-100;
min-height: 100vh;
font-size: var(--text-base);
line-height: 1.75;
letter-spacing: -0.011em;
font-weight: 400;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
/* 极简优雅滚动条 */
::-webkit-scrollbar {
width: 8px;
height: 8px;
}
::-webkit-scrollbar-track {
@apply bg-transparent;
}
::-webkit-scrollbar-thumb {
@apply bg-gray-300/40 dark:bg-gray-700/40 rounded-full;
transition: background-color 0.3s ease;
}
::-webkit-scrollbar-thumb:hover {
@apply bg-gray-400/60 dark:bg-gray-600/60;
}
/* 优雅渐入动画 - 流畅自然 */
.animate-fade-in {
animation: fadeIn 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}
.animate-slide-up {
animation: slideUp 0.9s cubic-bezier(0.4, 0, 0.2, 1);
}
.animate-bounce-in {
animation: bounceIn 1s cubic-bezier(0.4, 0, 0.2, 1);
}
@keyframes fadeIn {
from {
opacity: 0;
transform: translateY(10px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes slideUp {
from {
opacity: 0;
transform: translateY(40px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes bounceIn {
0% {
opacity: 0;
transform: scale(0.8);
}
60% {
opacity: 1;
transform: scale(1.02);
}
100% {
opacity: 1;
transform: scale(1);
}
}
/* 高斯模糊玻璃态效果 - 极简优雅 */
.glass {
@apply bg-white/60 dark:bg-gray-900/60;
backdrop-filter: var(--blur-medium);
-webkit-backdrop-filter: var(--blur-medium);
border: 1px solid rgba(255, 255, 255, 0.18);
box-shadow: var(--shadow-elegant-sm);
}
.glass-strong {
@apply bg-white/50 dark:bg-gray-900/50;
backdrop-filter: var(--blur-strong);
-webkit-backdrop-filter: var(--blur-strong);
border: 1px solid rgba(255, 255, 255, 0.2);
box-shadow: var(--shadow-elegant-md);
}
/* 极简优雅按钮 - 轻盈灵动 */
.btn-gradient {
@apply bg-gray-900 dark:bg-gray-100 text-white dark:text-gray-900;
@apply font-medium rounded-2xl;
padding: var(--spacing-sm) var(--spacing-lg);
font-size: var(--text-base);
letter-spacing: -0.011em;
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
box-shadow: var(--shadow-elegant-sm);
min-height: 52px;
line-height: 1.5;
}
.btn-gradient:hover {
@apply bg-gray-800 dark:bg-white;
box-shadow: var(--shadow-elegant-md);
transform: translateY(-2px);
}
.btn-gradient:active {
transform: translateY(0);
box-shadow: var(--shadow-elegant-sm);
}
.btn-gradient:disabled {
@apply opacity-40 cursor-not-allowed;
transform: none !important;
box-shadow: none;
}
/* 极简优雅输入框 - 呼吸感 */
.input-modern {
@apply w-full rounded-2xl border border-gray-200/60 dark:border-gray-700/60;
@apply bg-white/80 dark:bg-gray-900/80;
backdrop-filter: var(--blur-subtle);
-webkit-backdrop-filter: var(--blur-subtle);
padding: var(--spacing-sm) var(--spacing-md);
font-size: var(--text-base);
line-height: 1.75;
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
box-shadow: var(--shadow-elegant-sm);
}
.input-modern:focus {
@apply ring-2 ring-gray-900/10 dark:ring-gray-100/10;
@apply border-gray-300 dark:border-gray-600;
outline: none;
box-shadow: var(--shadow-elegant-md);
}
.input-modern::placeholder {
@apply text-gray-400 dark:text-gray-500;
font-weight: 400;
}
/* 极简优雅卡片 - 高斯模糊 */
.card-modern {
@apply bg-white/80 dark:bg-gray-900/80;
backdrop-filter: var(--blur-medium);
-webkit-backdrop-filter: var(--blur-medium);
@apply border border-gray-200/40 dark:border-gray-700/40;
border-radius: 24px;
box-shadow: var(--shadow-elegant-lg);
padding: var(--spacing-lg);
transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}
.card-modern:hover {
box-shadow: var(--shadow-elegant-xl);
transform: translateY(-4px);
border-color: rgba(0, 0, 0, 0.08);
}
/* 代码块样式 - 优雅舒适 */
.code-block {
@apply bg-gray-50/80 dark:bg-gray-900/80;
backdrop-filter: var(--blur-subtle);
-webkit-backdrop-filter: var(--blur-subtle);
@apply font-mono border border-gray-200/50 dark:border-gray-700/50;
@apply break-all select-all;
padding: var(--spacing-sm) var(--spacing-md);
border-radius: 16px;
font-size: var(--text-sm);
line-height: 1.75;
box-shadow: var(--shadow-elegant-sm);
}
/* 字号覆盖 */
.code-block.text-\[15px\] { font-size: 15px !important; }
.code-block.text-\[16px\] { font-size: 16px !important; }
.code-block.text-\[17px\] { font-size: 17px !important; }
.code-block.text-\[18px\] { font-size: 18px !important; }
/* 优雅浮动动画 - 轻盈 */
.animate-float {
animation: float 8s ease-in-out infinite;
}
.animate-glow {
animation: glow 3s ease-in-out infinite alternate;
}
.animate-pulse-slow {
animation: pulse 4s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}
@keyframes float {
0%, 100% {
transform: translateY(0px);
}
50% {
transform: translateY(-12px);
}
}
@keyframes glow {
from {
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
}
to {
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.10);
}
}
/* 极简优雅渐变文字 - 低饱和 */
.text-gradient {
@apply bg-gradient-to-r from-gray-700 via-gray-600 to-gray-800 bg-clip-text text-transparent;
font-weight: 500;
}
.text-gradient-green {
@apply bg-gradient-to-r from-emerald-700 via-teal-600 to-green-700 bg-clip-text text-transparent;
font-weight: 500;
}
.text-gradient-orange {
@apply bg-gradient-to-r from-amber-700 via-orange-600 to-yellow-700 bg-clip-text text-transparent;
font-weight: 500;
}
.text-gradient-purple {
@apply bg-gradient-to-r from-violet-700 via-purple-600 to-indigo-700 bg-clip-text text-transparent;
font-weight: 500;
}
/* 优雅悬浮效果 - 平滑过渡 */
.card-hover {
transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}
.card-hover:hover {
box-shadow: var(--shadow-elegant-xl);
transform: translateY(-6px) scale(1.01);
}
/* 进度条动画 - 流畅 */
.progress-bar {
transition: all 1.2s cubic-bezier(0.4, 0, 0.2, 1);
}
/* 优雅脉冲边框 - 柔和 */
.pulse-border {
position: relative;
}
.pulse-border::before {
content: '';
position: absolute;
top: -1px;
left: -1px;
right: -1px;
bottom: -1px;
background: linear-gradient(45deg,
rgba(156, 163, 175, 0.3),
rgba(209, 213, 219, 0.3),
rgba(156, 163, 175, 0.3)
);
border-radius: inherit;
z-index: -1;
animation: pulse-border 3s ease-in-out infinite;
}
@keyframes pulse-border {
0%, 100% {
opacity: 0.5;
}
50% {
opacity: 0.2;
}
}
/* 全局优雅辅助类 */
.elegant-section {
padding: var(--spacing-xl) var(--spacing-lg);
}
.elegant-container {
max-width: 1280px;
margin: 0 auto;
padding: 0 var(--spacing-md);
}
.elegant-spacing-y {
margin-top: var(--spacing-lg);
margin-bottom: var(--spacing-lg);
}
.elegant-spacing-x {
margin-left: var(--spacing-lg);
margin-right: var(--spacing-lg);
}
/* 标题优雅层级 */
h1, .h1 {
font-size: var(--text-3xl);
font-weight: 600;
line-height: 1.2;
letter-spacing: -0.025em;
margin-bottom: var(--spacing-md);
}
h2, .h2 {
font-size: var(--text-2xl);
font-weight: 600;
line-height: 1.3;
letter-spacing: -0.02em;
margin-bottom: var(--spacing-sm);
}
h3, .h3 {
font-size: var(--text-xl);
font-weight: 500;
line-height: 1.4;
letter-spacing: -0.015em;
margin-bottom: var(--spacing-sm);
}
p, .p {
font-size: var(--text-base);
line-height: 1.75;
margin-bottom: var(--spacing-sm);
}