@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;
}
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }
.no-scrollbar::-webkit-scrollbar { display: none; }
.soft-blue-bg {
background:
radial-gradient(1200px 600px at 10% -10%, rgba(56,189,248,.12), transparent 60%),
radial-gradient(900px 500px at 110% 20%, rgba(6,182,212,.10), transparent 60%),
linear-gradient(180deg, #F0F9FF 0%, #F8FAFC 40%, #ECFEFF 100%);
}
.dark .soft-blue-bg {
background:
radial-gradient(1200px 600px at 10% -10%, rgba(56,189,248,.06), transparent 60%),
radial-gradient(900px 500px at 110% 20%, rgba(34,211,238,.05), transparent 60%),
linear-gradient(180deg, #0B1220 0%, #0B1320 60%, #0A1720 100%);
}
/* 渐变流体设计背景 */
.fluid-bg {
background: linear-gradient(135deg, #667eea 0%, #764ba2 45%, #f093fb 100%);
min-height: 100vh;
position: relative;
overflow: hidden;
}
.dark .fluid-bg {
background: linear-gradient(135deg, #0b1020 0%, #141433 45%, #2a1b3d 100%);
}
/* 背景流体 Blob 元素 */
.fluid-blob {
position: absolute;
border-radius: 50%;
filter: blur(40px);
opacity: 0.45;
mix-blend-mode: screen;
will-change: transform, opacity;
animation: blob-move 22s ease-in-out infinite alternate;
}
.dark .fluid-blob { opacity: 0.35; mix-blend-mode: lighten; filter: blur(52px); }
.fluid-blob.blob-a { width: 520px; height: 520px; left: -120px; top: -120px; background: radial-gradient(circle at 30% 30%, rgba(102,126,234,.8), rgba(118,75,162,.5) 60%, transparent 70%); }
.fluid-blob.blob-b { width: 420px; height: 420px; right: -140px; top: 10%; background: radial-gradient(circle at 60% 40%, rgba(240,147,251,.75), rgba(118,75,162,.5) 60%, transparent 70%); animation-delay: 3s; }
.fluid-blob.blob-c { width: 480px; height: 480px; left: 20%; bottom: -160px; background: radial-gradient(circle at 40% 60%, rgba(93,201,248,.7), rgba(102,126,234,.5) 60%, transparent 70%); animation-delay: 6s; }
@keyframes blob-move {
0% { transform: translate(0, 0) scale(1); }
40% { transform: translate(20px, -30px) scale(1.05); }
70% { transform: translate(-20px, 30px) scale(0.98); }
100% { transform: translate(0, 0) scale(1.02); }
}
/* 顶部波浪条（可选装饰） */
.fluid-wave {
position: absolute;
inset: 0 0 auto 0;
height: 140px;
pointer-events: none;
}
.fluid-wave svg { width: 100%; height: 100%; display: block; opacity: .22; }
.fluid-wave path { animation: wave-shift 12s ease-in-out infinite; }
@keyframes wave-shift {
0%,100% { transform: translateX(0); }
50% { transform: translateX(-40px); }
}
/* 玻璃态卡片增强（在 card-modern 基础上更通透） */
.card-glass {
@apply bg-white/70 dark:bg-gray-900/70;
backdrop-filter: var(--blur-strong);
-webkit-backdrop-filter: var(--blur-strong);
}
.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);
}
}
@keyframes slideIn {
from {
opacity: 0;
transform: translateX(100%);
}
to {
opacity: 1;
transform: translateX(0);
}
}
.animate-slide-in {
animation: slideIn 0.3s cubic-bezier(0.4, 0, 0.2, 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-float-delayed {
animation: float 8s ease-in-out infinite;
animation-delay: 2s;
}
.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;
}
.bar-grow {
transform-box: fill-box;
transform-origin: bottom;
animation: barGrow 1.2s cubic-bezier(0.4, 0, 0.2, 1) both;
will-change: transform;
}
.bar-delay-1 { animation-delay: .1s; }
.bar-delay-2 { animation-delay: .25s; }
.bar-delay-3 { animation-delay: .4s; }
.bar-delay-4 { animation-delay: .55s; }
@keyframes barGrow {
from { transform: scaleY(0.7); }
to { transform: scaleY(1); }
}
.animate-draw-line {
stroke-dasharray: 220;
stroke-dashoffset: 220;
animation: drawLine 1.8s ease forwards;
}
@keyframes drawLine {
to { stroke-dashoffset: 0; }
}
@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);
}
