/* ============================================================ aizifu.org · 主题层 theme.css · v2 · 2026-10-20 · M2 小万 ============================================================ v2 变更（在 v1 基础上，原则仍是：不改动既有规则，只做变量与增量覆盖） ① 深色整体提亮一档：墨色系 #06050A→#0B0A14 等，正文层级不变， 辅助文字 text-400/500 提亮至 4.5:1 以上（此前 footer/页脚小字 2.2:1） ② 浅色（墨金站）： - text-400/500 加深至宣纸底 4.5:1 以上 - 深金渐变主按钮（排出命盘 / 免费排盘）字色改白（原深字压深底 ≈1.9:1） - result 页顶部紫 nav 改浅色，消除"上下割裂" ③ 解读页（result）深色：bg/w/tl/line 同步提亮一档 ④ 命盘白底区辅助字（zwc-sub/note 等，两种主题共用）：紫灰 → 深紫灰 6.6:1 ⑤ 维度标签（大限/流年/流月/流日/流时）彩底白字全部加深至 4.5:1 —— 用属性选择器匹配内联 --ln 色值（若日后改模板色值需同步此处） ⚠ 配套建议（JS 侧两行，需另改 theme.js）： meta theme-color 深色值 #06050A → #0B0A14 ============================================================ */ /* ---------------- ① 墨金站 · 浅色 ---------------- */ html[data-theme="light"] { /* 底色：宣纸 */ --ink-900: #F7F3E9; --ink-850: #F3EEE2; --ink-800: #EFE9DB; --ink-700: #E8E1CF; --ink-600: #DFD7C2; --ink-500: #D1C7AD; /* 主色：青铜金（深金保证浅底对比度） */ --gold-300: #7A6128; --gold-400: #6C5522; --gold-500: #5D4A1E; --gold-600: #4C3C19; /* 辅色：绛紫 */ --violet-300: #5B51B4; --violet-400: #4E44A4; --violet-500: #423A96; --violet-600: #362E7C; /* 文字：墨色系（v2：400/500 加深，宣纸底 ≥4.5:1） */ --text-100: #1A1611; --text-200: #3B352A; --text-300: #6A6355; --text-400: #70685A; --text-500: #655E4F; /* 线与辉光 */ --line: rgba(110, 86, 34, 0.26); --line-soft: rgba(26, 22, 17, 0.1); --glow-gold: rgba(201, 169, 97, 0.3); --glow-violet: rgba(139, 127, 212, 0.22); color-scheme: light; } /* 星野辉光底纹：浅色下收掉，避免脏灰 */ html[data-theme="light"] body::before { opacity: 0; } /* 导航毛玻璃底 */ html[data-theme="light"] .nav { background: rgba(247, 243, 233, 0.86); } /* 纯黑阴影 → 暖褐 */ html[data-theme="light"] .nav .menu, html[data-theme="light"] .lang-menu { box-shadow: 0 18px 48px rgba(87, 66, 22, 0.16); } /* v2：深金渐变主按钮 → 字改白（原深字压深底仅 ≈1.9:1） */ html[data-theme="light"] .pp-btn, html[data-theme="light"] a.btn.btn-primary { color: #FDFBF5; } /* v2：分段选择选中态（男/女、精确到分钟）字加深 */ html[data-theme="light"] .pp-seg .on, html[data-theme="light"] .pp-seg [class*="sel"] { color: #4C3C19; } /* v2：result 页顶部紫 nav 在浅色下改浅底深紫字（原与宣纸底割裂） */ html[data-theme="light"] nav:not(.nav) { background: rgba(247, 243, 233, 0.94); border-bottom: 1px solid rgba(58, 47, 115, 0.14); box-shadow: 0 2px 14px rgba(58, 47, 115, 0.06); color: #3A2F73; } html[data-theme="light"] nav:not(.nav) a, html[data-theme="light"] nav:not(.nav) .brand, html[data-theme="light"] nav:not(.nav) span, html[data-theme="light"] nav:not(.nav) div { color: #3A2F73; } html[data-theme="light"] nav:not(.nav) .lang-seg, html[data-theme="light"] nav:not(.nav) button { color: #3A2F73; } /* nav 上的金色「登录」按钮保持金底，字改白 */ html[data-theme="light"] nav:not(.nav) a[class*="login"], html[data-theme="light"] nav:not(.nav) a[class*="cta"] { color: #FDFBF5; } /* 主题切换过渡（背景/文字颜色平滑） */ body, .nav, .card, .art-card, .lang-menu, .nav .menu { transition: background-color .25s ease, color .25s ease, border-color .25s ease, box-shadow .25s ease; } @media (prefers-reduced-motion: reduce) { body, .nav, .card, .art-card, .lang-menu, .nav .menu { transition: none; } } /* ---------------- ② 深色 · 整体提亮一档（v2） ---------------- 默认（无 data-theme）与显式 dark 同为深色，两条选择器都覆盖 */ html:not([data-theme="light"]) { /* 底色：墨（v2：整体提亮，层级关系不变） */ --ink-900: #0B0A14; --ink-850: #100E19; --ink-800: #15131F; --ink-700: #1C1929; --ink-600: #262236; --ink-500: #332E45; /* 文字（v2：辅助文字提亮至 4.5:1+） */ --text-100: #F2EEE6; --text-200: #DDD8CC; --text-300: #B2ACA0; --text-400: #95908A; --text-500: #867F76; } /* ---------------- ③ 命盘 result 页 · 深色 ---------------- */ html[data-theme="dark"] { --bg: #161428; /* 页面底（v2 提亮） */ --w: #211E3D; /* 卡片（v2 提亮） */ --t: #EAE5D8; /* 正文 */ --tl: #B5AFA0; /* 次要文字（v2 提亮） */ --line: #3A3659; /* 分割线（v2 提亮） */ --p: #B7ACF2; color-scheme: dark; } html[data-theme="dark"] body { background: #161428; } /* 卡片阴影换深色投影 */ html[data-theme="dark"] .info-card { box-shadow: 0 4px 22px rgba(0, 0, 0, 0.42); } /* 对症硬编码浅色块 */ html[data-theme="dark"] .ai-gloss { background: #26224A; border-color: #403A6B; color: #B5AFA0; } html[data-theme="dark"] .progress-bar { background: #343059; } html[data-theme="dark"] .status-dot { background: #403A6B; } html[data-theme="dark"] .aic-welcome .aic-hint, html[data-theme="dark"] .ag-note { color: #9A948A; } html[data-theme="dark"] .error-card p { color: #B5AFA0; } html[data-theme="dark"] .section-label { color: #9C8DF2; } /* ---------------- ④ 命盘白底区 · 辅助字（两种主题共用） ---------------- 命盘/汇聚图卡片保留浅色"纸面"底，其上的紫灰辅助字加深到 6.6:1 */ .zwc-sub, .zwc-note, .zwc-daterow-lb, .zwc-ln-arw { color: #5F5A70 !important; /* !important：zwc-sub 为内联 style */ } /* 内联 #A9A3BC 的提示字（无类名 span）兜底 */ [style*="color:#A9A3BC"] { color: #5F5A70 !important; } /* 运干支小字：仅在未选中的白底项上加深（选中项在彩底上保持白字） */ .zwc-ln-it:not(.zwc-ln-on) .zwc-ln-b { color: #5F5A70 !important; } /* 「禄」绿字标注 */ [style*="color:#1B8A54"] { color: #127A3C !important; } .zwc-hua-lu { color: #127A3C; } /* 「保存图片」按钮金字加深 */ button.vz-btn.vz-save { color: #6F5D1F !important; } /* ---------------- ⑤ 维度标签彩底加深（大限/流年/流月/流日/流时） ---------------- 原白字彩底 2.7~4.3:1；按内联 --ln 色值逐一加深至 ≥4.5:1 */ [style*="--ln:#189E4E"] { --ln: #127A3C !important; } /* 大限 绿 */ [style*="--ln:#2B8FE0"] { --ln: #1F6FB4 !important; } /* 流年 蓝 */ [style*="--ln:#E08A00"] { --ln: #A66400 !important; } /* 流月 橙 */ [style*="--ln:#D9483E"] { --ln: #B03428 !important; } /* 流日 红 */ [style*="--ln:#0FA3B8"] { --ln: #0B7E8C !important; } /* 流时 青 */ /* 「大限/流年/…」二字标签的底是内联硬编码，需同步加深 */ [style*="background:#189E4E"] { background: #127A3C !important; } [style*="background:#2B8FE0"] { background: #1F6FB4 !important; } [style*="background:#E08A00"] { background: #A66400 !important; } [style*="background:#D9483E"] { background: #B03428 !important; } [style*="background:#0FA3B8"] { background: #0B7E8C !important; } /* 「✦ 自化标注」选中态按钮 */ button.zwc-tab.zwc-arrow { background: #127A3C !important; } /* ---------------- ⑥ 切换按钮 ---------------- */ .theme-toggle { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; padding: 0; flex: none; border-radius: var(--radius-sm, 10px); background: rgba(242, 238, 230, 0.05); border: 0.5px solid var(--line, rgba(201, 169, 97, 0.14)); color: var(--text-200, var(--t, #333)); cursor: pointer; transition: border-color .2s, color .2s, background .2s; } .theme-toggle:hover { border-color: rgba(201, 169, 97, 0.4); color: var(--gold-300, #C9A961); background: rgba(201, 169, 97, 0.08); } .theme-toggle svg { width: 16px; height: 16px; } /* 墨金站浅色下按钮底略深一点保持可见 */ html[data-theme="light"] .theme-toggle { background: rgba(26, 22, 17, 0.05); } /* 命盘页（裸