c61b8de776
- 登录页凭据/网络/HTTP 错误提示改为英文 - 博客页改为：通栏顶部彩虹栏 + 通栏 Hero（彩虹光标动效）+ 图片·内容·图片三栏 - 两侧图片用 import.meta.glob 自动索引 src/assets/sides/，按高度自适应、居中，叠加液态玻璃覆层 - 背景改为 Lunada 渐变极光 - 性能优化：极光改静止、中间纸/顶栏去掉 backdrop-filter，降低多层毛玻璃每帧重算开销 Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
257 lines
8.4 KiB
CSS
257 lines
8.4 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;
|
||
}
|
||
|
||
/* ── 彩虹（仿 joshwcomeau）─────────────────────────────────────
|
||
一条横向流动的多色渐变。首尾同色，配合 200% 宽度做无缝平移。
|
||
既可裁切到文字，也可铺在装饰条上。 */
|
||
@keyframes rainbow-pan {
|
||
to {
|
||
background-position: 200% center;
|
||
}
|
||
}
|
||
|
||
.rainbow-gradient {
|
||
background-image: linear-gradient(
|
||
90deg,
|
||
#ff5f6d,
|
||
#ffb13d,
|
||
#ffe14d,
|
||
#4ade80,
|
||
#38bdf8,
|
||
#a78bfa,
|
||
#f472b6,
|
||
#ff5f6d
|
||
);
|
||
background-size: 200% auto;
|
||
animation: rainbow-pan 6s linear infinite;
|
||
}
|
||
|
||
/* 把流动彩虹裁切进文字（始终显示彩虹色） */
|
||
.rainbow-text {
|
||
background-image: linear-gradient(
|
||
90deg,
|
||
#ff5f6d,
|
||
#ffb13d,
|
||
#ffe14d,
|
||
#4ade80,
|
||
#38bdf8,
|
||
#a78bfa,
|
||
#f472b6,
|
||
#ff5f6d
|
||
);
|
||
background-size: 200% auto;
|
||
-webkit-background-clip: text;
|
||
background-clip: text;
|
||
color: transparent;
|
||
animation: rainbow-pan 6s linear infinite;
|
||
}
|
||
|
||
/* 把彩虹裁进文字但不强制颜色：默认用不透明文字色盖住，
|
||
hover 时把文字色设为 transparent（group-hover:text-transparent）即露出彩虹。 */
|
||
.rainbow-clip {
|
||
background-image: linear-gradient(
|
||
90deg,
|
||
#ff5f6d,
|
||
#ffb13d,
|
||
#ffe14d,
|
||
#4ade80,
|
||
#38bdf8,
|
||
#a78bfa,
|
||
#f472b6,
|
||
#ff5f6d
|
||
);
|
||
background-size: 200% auto;
|
||
-webkit-background-clip: text;
|
||
background-clip: text;
|
||
animation: rainbow-pan 6s linear infinite;
|
||
}
|
||
|
||
/* ── 整页渐变极光背景（玻璃栏透出的就是它）──────────────────────
|
||
固定铺满视口、置于所有内容之下。底色为 Lunada 渐变
|
||
（uigradients「Lunada」：#A7BFE8 → #6190E8），上面叠几团同色系
|
||
蓝光斑缓慢漂移并大幅模糊，让平面渐变产生液态流动感。 */
|
||
.aurora {
|
||
position: fixed;
|
||
inset: 0;
|
||
z-index: -10;
|
||
overflow: hidden;
|
||
/* Lunada 渐变打底 */
|
||
background: linear-gradient(135deg, #6190e8 0%, #89a8e6 48%, #a7bfe8 100%);
|
||
}
|
||
|
||
.aurora::before {
|
||
content: '';
|
||
position: absolute;
|
||
inset: -25%;
|
||
background:
|
||
radial-gradient(30% 34% at 18% 28%, rgba(97, 144, 232, 0.65), transparent 70%),
|
||
radial-gradient(28% 32% at 82% 24%, rgba(167, 191, 232, 0.70), transparent 70%),
|
||
radial-gradient(34% 38% at 72% 78%, rgba(120, 162, 236, 0.60), transparent 70%),
|
||
radial-gradient(26% 30% at 26% 82%, rgba(192, 211, 245, 0.55), transparent 70%),
|
||
radial-gradient(24% 28% at 50% 50%, rgba(140, 175, 240, 0.45), transparent 70%);
|
||
filter: blur(60px);
|
||
/* 静止：持续漂移会让上层多个 backdrop-filter 每帧重算模糊，是卡顿主因 */
|
||
}
|
||
|
||
/* ── 两侧液态玻璃竖栏 ─────────────────────────────────────────
|
||
backdrop-filter 把背后的极光磨成柔光；上下渐变的白色叠层 + 内侧两道
|
||
高光边模拟玻璃厚度，做出「液态玻璃」的体积感。 */
|
||
.glass-rail {
|
||
background: linear-gradient(
|
||
180deg,
|
||
rgba(255, 255, 255, 0.12),
|
||
rgba(255, 255, 255, 0.03) 55%,
|
||
rgba(255, 255, 255, 0.08)
|
||
);
|
||
backdrop-filter: blur(18px) saturate(150%);
|
||
-webkit-backdrop-filter: blur(18px) saturate(150%);
|
||
box-shadow:
|
||
inset 0 0 60px rgba(255, 255, 255, 0.06),
|
||
inset 1px 0 0 rgba(255, 255, 255, 0.20),
|
||
inset -1px 0 0 rgba(255, 255, 255, 0.20);
|
||
}
|
||
|
||
/* 中间内容纸张：压暗的暖色玻璃（模糊背后极光保证可读），
|
||
两侧各一道高光描边，与左右玻璃竖栏拼出连续的玻璃接缝。 */
|
||
.glass-sheet {
|
||
/* 底色 84% 不透明，背后极光本就几乎透不过来；省掉昂贵的 backdrop-filter，
|
||
观感基本无差，却避免这条又高又大的区域每帧重算模糊。 */
|
||
background: rgba(23, 19, 15, 0.84);
|
||
box-shadow:
|
||
inset 1px 0 0 rgba(255, 255, 255, 0.12),
|
||
inset -1px 0 0 rgba(255, 255, 255, 0.12),
|
||
0 30px 80px rgba(20, 30, 60, 0.30);
|
||
}
|
||
|
||
/* 两侧图片上的「液态玻璃」覆层：backdrop-filter 把图片磨成柔光，
|
||
叠一道斜向高光 + 内侧四边亮边，做出通透的玻璃质感。
|
||
盖在 <aside> 的背景图之上（inset-0 铺满）。 */
|
||
.glass-image {
|
||
backdrop-filter: blur(6px) saturate(150%);
|
||
-webkit-backdrop-filter: blur(6px) saturate(150%);
|
||
background: linear-gradient(
|
||
125deg,
|
||
rgba(255, 255, 255, 0.24) 0%,
|
||
rgba(255, 255, 255, 0.06) 28%,
|
||
rgba(255, 255, 255, 0) 52%,
|
||
rgba(255, 255, 255, 0.05) 72%,
|
||
rgba(255, 255, 255, 0.14) 100%
|
||
);
|
||
box-shadow:
|
||
inset 0 0 90px rgba(255, 255, 255, 0.10),
|
||
inset 1px 0 0 rgba(255, 255, 255, 0.22),
|
||
inset -1px 0 0 rgba(255, 255, 255, 0.22),
|
||
inset 0 1px 0 rgba(255, 255, 255, 0.18),
|
||
inset 0 -1px 0 rgba(255, 255, 255, 0.12);
|
||
}
|
||
|
||
/* ── reduced-motion 降级 ────────────────────────────────────── */
|
||
@media (prefers-reduced-motion: reduce) {
|
||
.mesh,
|
||
.cursor-bar,
|
||
.rainbow-gradient,
|
||
.rainbow-text,
|
||
.rainbow-clip,
|
||
.aurora::before {
|
||
animation: none;
|
||
}
|
||
}
|