/* ============================================================ * Kondius 统一主题包 — 「温柔蓝 · 流动」 * 蓝色系 / 温柔 / 流动背景 / 粒子 / 拖尾 / 波浪点击 / 元素入场 * 本文件覆盖式改写配色 token，并叠加视觉层，不改动任何业务 DOM。 * ============================================================ */ /* ── 1. 蓝色温柔色系 token ─────────────────────── */ :root { /* 主色阶：柔和蓝 */ --blue-50: #eef6ff; --blue-100: #d9ebff; --blue-200: #bcdcff; --blue-300: #8ec6ff; --blue-400: #59a7ff; --blue-500: #3385f0; --blue-600: #1f66d6; --blue-700: #1a4faa; --blue-800: #173f85; /* 渐变调色板（统一为蓝色系） */ --grad-c1: oklch(0.74 0.13 235); /* 天蓝 */ --grad-c2: oklch(0.68 0.15 265); /* 蓝紫 */ --grad-c3: oklch(0.76 0.12 215); /* 青蓝 */ --grad-c4: oklch(0.70 0.14 285); /* 靛蓝 */ /* 极光光斑（温柔蓝） */ --aurora-1: oklch(0.80 0.12 235); --aurora-2: oklch(0.82 0.13 265); --aurora-3: oklch(0.84 0.10 210); --aurora-4: oklch(0.80 0.11 285); /* 主题变量（供多处复用） */ --th-accent: #3385f0; --th-accent-soft: #59a7ff; --th-accent-deep: #1f66d6; --th-radius: 18px; } /* 亮色模式：柔白底 + 蓝调文字 */ html.light { --background: oklch(0.985 0.008 240); --color-text: #17325a; --color-text-muted: #5b7a9e; --color-accent-primary: #3385f0; --color-accent-secondary: #59a7ff; --color-border: rgba(51, 133, 240, 0.16); --glass-bg: rgba(255, 255, 255, 0.62); --glass-border: rgba(51, 133, 240, 0.14); } /* 暗色模式：深蓝底 */ html.dark { --background: oklch(0.20 0.035 255); --color-text: #e3eeff; --color-text-muted: #93aecd; --color-accent-primary: #59a7ff; --color-accent-secondary: #8ec6ff; --color-border: rgba(89, 167, 255, 0.20); --glass-bg: rgba(20, 40, 75, 0.55); --glass-border: rgba(89, 167, 255, 0.18); } /* ── 2. 背景系统：流动渐变(底) + 极光色块(中) ───── */ #th-flow-bg { position: fixed; inset: 0; z-index: -3; /* 最底层：柔和光晕 */ pointer-events: none; background: radial-gradient(ellipse 80% 60% at 15% 20%, rgba(89, 167, 255, 0.20), transparent 60%), radial-gradient(ellipse 70% 50% at 85% 15%, rgba(120, 150, 255, 0.16), transparent 60%), radial-gradient(ellipse 90% 70% at 50% 100%, rgba(51, 133, 240, 0.14), transparent 60%); filter: blur(30px); animation: thFlowDrift 22s ease-in-out infinite alternate; } @keyframes thFlowDrift { 0% { transform: translate3d(0, 0, 0) scale(1); } 50% { transform: translate3d(2.5%, -2%, 0) scale(1.08); } 100% { transform: translate3d(-2%, 2.5%, 0) scale(1.03); } } /* 极光层：大块模糊色球，缓慢漂移（由主站 common.css 提供 .aurora-blob 样式） */ #th-aurora { position: fixed; inset: 0; z-index: -2; /* 中层：叠在流动渐变之上 */ overflow: hidden; pointer-events: none; } /* 无 common.css 的页面（子站）自包含极光样式，保持观感一致 */ #th-aurora .th-blob { position: absolute; border-radius: 50%; filter: blur(70px); opacity: 0.55; will-change: transform; pointer-events: none; } html.dark #th-aurora .th-blob { opacity: 0.7; } #th-aurora .th-blob.b1 { background: var(--aurora-1); animation: thAuroraA 20s ease-in-out infinite; } #th-aurora .th-blob.b2 { background: var(--aurora-2); animation: thAuroraB 24s ease-in-out infinite; } #th-aurora .th-blob.b3 { background: var(--aurora-3); animation: thAuroraC 28s ease-in-out infinite; } #th-aurora .th-blob.b4 { background: var(--aurora-4); animation: thAuroraA 32s ease-in-out infinite reverse; } @keyframes thAuroraA { 0%,100% { transform: translate3d(0,0,0) scale(1); } 33% { transform: translate3d(6vw, 4vh, 0) scale(1.12); } 66% { transform: translate3d(-4vw, -3vh, 0) scale(0.94); } } @keyframes thAuroraB { 0%,100% { transform: translate3d(0,0,0) scale(1.05); } 40% { transform: translate3d(-7vw, 5vh, 0) scale(0.9); } 70% { transform: translate3d(3vw, -6vh, 0) scale(1.15); } } @keyframes thAuroraC { 0%,100% { transform: translate3d(0,0,0) scale(0.95); } 50% { transform: translate3d(5vw, -5vh, 0) scale(1.18); } } /* 画布层一：背景粒子 + 连线（装饰，留在内容之后） */ #th-canvas-bg { position: fixed; inset: 0; z-index: -1; pointer-events: none; } /* 画布层二：鼠标拖尾 + 点击波浪（交互反馈，必须置顶） * 用极高的 z-index 保证盖在所有内容之上； * pointer-events: none 确保不拦截任何点击、滚动、输入。 */ #th-canvas { position: fixed; inset: 0; z-index: 2147483000; pointer-events: none; } /* 首页自带一套 .effects-canvas（z-index 60）与本主题拖尾重复， 统一由主题包接管，隐藏主站那套，避免双重拖尾重叠。 */ .effects-canvas { display: none !important; } /* ── 2.5 统一页脚（备案号）───────────────────── * 由 theme.js 统一注入：已有