109 lines
3.7 KiB
CSS
109 lines
3.7 KiB
CSS
|
/* ── Fonts (本地打包，离线/WSL 可用) ───────────────────────── */
|
|||
|
|
@import '@fontsource-variable/fraunces/opsz.css';
|
|||
|
|
@import '@fontsource-variable/fraunces/opsz-italic.css';
|
|||
|
|
@import '@fontsource/hanken-grotesk/300.css';
|
|||
|
|
@import '@fontsource/hanken-grotesk/400.css';
|
|||
|
|
@import '@fontsource/hanken-grotesk/500.css';
|
|||
|
|
@import '@fontsource/hanken-grotesk/600.css';
|
|||
|
|
|
|||
|
|
@import 'tailwindcss';
|
|||
|
|
|
|||
|
|
/* ── Design tokens（暖调暗色编辑风）──────────────────────────── */
|
|||
|
|
@theme {
|
|||
|
|
--color-bg: #17130f;
|
|||
|
|
--color-surface: #221c16;
|
|||
|
|
--color-text: #eae2d4;
|
|||
|
|
--color-muted: #9b8f7e;
|
|||
|
|
--color-accent: #c99a5b;
|
|||
|
|
--color-accent-soft: #e0bd8a;
|
|||
|
|
--color-line: #3a3027;
|
|||
|
|
|
|||
|
|
--font-display: 'Fraunces Variable', ui-serif, Georgia, serif;
|
|||
|
|
--font-sans: 'Hanken Grotesk', system-ui, -apple-system, sans-serif;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* ── Base ────────────────────────────────────────────────── */
|
|||
|
|
html {
|
|||
|
|
-webkit-font-smoothing: antialiased;
|
|||
|
|
-moz-osx-font-smoothing: grayscale;
|
|||
|
|
text-rendering: optimizeLegibility;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
body {
|
|||
|
|
margin: 0;
|
|||
|
|
min-height: 100svh;
|
|||
|
|
background-color: var(--color-bg);
|
|||
|
|
color: var(--color-text);
|
|||
|
|
font-family: var(--font-sans);
|
|||
|
|
font-weight: 400;
|
|||
|
|
/* 隐藏系统光标，由 CursorFollower 接管（仅精确指针设备）*/
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
@media (pointer: fine) {
|
|||
|
|
body.has-custom-cursor,
|
|||
|
|
body.has-custom-cursor * {
|
|||
|
|
cursor: none;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* 选中文本配色 */
|
|||
|
|
::selection {
|
|||
|
|
background: var(--color-accent);
|
|||
|
|
color: var(--color-bg);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* 可见键盘焦点环 */
|
|||
|
|
:focus-visible {
|
|||
|
|
outline: 2px solid var(--color-accent);
|
|||
|
|
outline-offset: 2px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* ── 颗粒噪点（叠加在氛围面板上）─────────────────────────────── */
|
|||
|
|
.grain::before {
|
|||
|
|
content: '';
|
|||
|
|
position: absolute;
|
|||
|
|
inset: 0;
|
|||
|
|
pointer-events: none;
|
|||
|
|
opacity: 0.06;
|
|||
|
|
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
|
|||
|
|
mix-blend-mode: overlay;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* ── 动态渐变 mesh（缓慢漂移）───────────────────────────────── */
|
|||
|
|
@keyframes drift {
|
|||
|
|
0% { transform: translate3d(-6%, -4%, 0) scale(1.15) rotate(0deg); }
|
|||
|
|
50% { transform: translate3d(6%, 4%, 0) scale(1.25) rotate(8deg); }
|
|||
|
|
100% { transform: translate3d(-6%, -4%, 0) scale(1.15) rotate(0deg); }
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.mesh {
|
|||
|
|
position: absolute;
|
|||
|
|
inset: -25%;
|
|||
|
|
background:
|
|||
|
|
radial-gradient(40% 45% at 25% 30%, rgba(201, 154, 91, 0.45), transparent 70%),
|
|||
|
|
radial-gradient(35% 40% at 75% 65%, rgba(140, 96, 64, 0.40), transparent 70%),
|
|||
|
|
radial-gradient(45% 50% at 60% 20%, rgba(90, 70, 52, 0.40), transparent 70%);
|
|||
|
|
filter: blur(40px);
|
|||
|
|
animation: drift 26s ease-in-out infinite;
|
|||
|
|
will-change: transform;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* ── 标题下划线闪烁游标 ──────────────────────────────────────── */
|
|||
|
|
@keyframes blink {
|
|||
|
|
0%, 45% { opacity: 1; }
|
|||
|
|
50%, 95% { opacity: 0; }
|
|||
|
|
100% { opacity: 1; }
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.cursor-bar {
|
|||
|
|
animation: blink 1.15s steps(1, end) infinite;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* ── reduced-motion 降级 ────────────────────────────────────── */
|
|||
|
|
@media (prefers-reduced-motion: reduce) {
|
|||
|
|
.mesh,
|
|||
|
|
.cursor-bar {
|
|||
|
|
animation: none;
|
|||
|
|
}
|
|||
|
|
}
|