90 lines
2.7 KiB
CSS
90 lines
2.7 KiB
CSS
@import "tailwindcss";
|
|
|
|
:root {
|
|
--background: #0b0f17; /* 深色主背景 */
|
|
--background-alt: #111827; /* 次级面板背景 */
|
|
--foreground: #e5e7ef;
|
|
--muted: #94a3b8;
|
|
--accent: #3b82f6;
|
|
--accent-alt: #6366f1;
|
|
--radius: 14px;
|
|
}
|
|
|
|
@theme inline {
|
|
--color-background: var(--background);
|
|
--color-foreground: var(--foreground);
|
|
--font-sans: var(--font-geist-sans);
|
|
--font-mono: var(--font-geist-mono);
|
|
}
|
|
|
|
/* 强制使用暗色风格，可按需扩展主题切换 */
|
|
|
|
body {
|
|
background: radial-gradient(circle at 35% 20%, #1e293b 0%, #0b0f17 55%) fixed;
|
|
color: var(--foreground);
|
|
font-family: var(--font-geist-sans), system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen;
|
|
text-rendering: optimizeLegibility;
|
|
}
|
|
|
|
/* Custom gradient backgrounds & animations */
|
|
.gradient-text {
|
|
background: linear-gradient(90deg,var(--accent),var(--accent-alt));
|
|
-webkit-background-clip: text;
|
|
color: transparent;
|
|
}
|
|
|
|
.glass {
|
|
background: linear-gradient(140deg,rgba(255,255,255,0.06),rgba(255,255,255,0.015));
|
|
backdrop-filter: blur(14px) saturate(140%);
|
|
border: 1px solid rgba(255,255,255,0.07);
|
|
border-radius: var(--radius);
|
|
}
|
|
|
|
.panel {
|
|
background: linear-gradient(160deg,#141a24,#111827 65%);
|
|
border: 1px solid #1f2937;
|
|
border-radius: var(--radius);
|
|
}
|
|
|
|
@keyframes floatSlow {
|
|
0% { transform: translateY(0px) translateX(0px); }
|
|
50% { transform: translateY(-35px) translateX(10px); }
|
|
100% { transform: translateY(0px) translateX(0px); }
|
|
}
|
|
|
|
.float-slow { animation: floatSlow 18s ease-in-out infinite; }
|
|
|
|
@keyframes pulseRing {
|
|
0% { transform: scale(.6); opacity: .6; }
|
|
70% { transform: scale(2.6); opacity: 0; }
|
|
100% { opacity: 0; }
|
|
}
|
|
.pulse-ring::before, .pulse-ring::after {
|
|
content: "";
|
|
position: absolute;
|
|
inset: 0;
|
|
border-radius: 9999px;
|
|
background: radial-gradient(circle at center,rgba(255,255,255,.35),transparent 70%);
|
|
animation: pulseRing 6s linear infinite;
|
|
}
|
|
.pulse-ring::after { animation-delay: 3s; }
|
|
|
|
/* Scroll snap layout for sections */
|
|
html,body { scroll-behavior: smooth; }
|
|
.snap-y { scroll-snap-type: y mandatory; }
|
|
.snap-section { scroll-snap-align: start; }
|
|
|
|
::-webkit-scrollbar { width: 10px; }
|
|
::-webkit-scrollbar-track { background: #111827; }
|
|
::-webkit-scrollbar-thumb { background: linear-gradient(#374151,#1f2937); border-radius: 20px; }
|
|
::-webkit-scrollbar-thumb:hover { background: linear-gradient(#475569,#334155); }
|
|
|
|
/* 提升文字可读性 */
|
|
h1,h2,h3,h4 { letter-spacing: 0.02em; }
|
|
p { color: var(--muted); }
|
|
|
|
/* 卡片 hover 简约高亮 */
|
|
.card-hover { transition: border-color .25s, box-shadow .25s, transform .25s; }
|
|
.card-hover:hover { border-color: var(--accent); box-shadow: 0 4px 28px -8px rgba(59,130,246,0.35); transform: translateY(-4px); }
|
|
|