/* ═══════════════════════════════════════════════════════════════ THEME.CSS — 焕贞 AI 全站统一设计真源（黑金 / Black & Gold） --------------------------------------------------------------- 唯一真源（Single Source of Truth）。所有页面在 base.css 之后 link 本文件， 即获得统一黑金主题。颜色/字体/圆角/阴影/安全区均以此为准， 不再在各页内联 :root 副本（消除历史的 ~4 套硬编码漂移 + WCAG 失败值）。 分层架构： - base.css : reset / typography / keyframes / 工具类 / 布局变量（主题中性） - theme.css : 颜色 / 字体 / 圆角 / 阴影 token（本文件，全站黑金真源） - components.css : 通用组件（卡片/按钮/输入…，消费上面的 token） - auth.css : 认证卡片组件（登录/注册/找回/App 登录浮层共用） - pages/*.css : 各页专属皮肤（消费 token，不再定义 token） App 原生壳布局（状态条/底部 tabbar/安全区）在 offline-assist-app.css 的 body.app-mode 下，只负责"布局"，颜色一律来自本文件 —— 主题与布局解耦。 ═══════════════════════════════════════════════════════════════ */ :root { /* ── 背景层（no-line 原则：用颜色层次而非边框制造深度） ── */ --bg-deep: #0a0806; /* 页面深底 */ --bg-card: #14110d; /* 卡片底 */ --bg-elev: rgba(255,255,255,.04); /* 提升层 1 */ --bg-elev2: rgba(255,255,255,.08); /* 提升层 2 / chip 底 */ --bg-strong: #181410; /* 强卡 */ --bg-elevated: #1d1810; /* 电梯卡 */ /* ── 边框（金色幽灵线，felt not seen） ── */ --border-gold: rgba(196,146,77,.30); --border-mut: rgba(255,255,255,.06); /* ── 文字三阶（全部经 WCAG 校正，黑底从不用纯白） ── */ --ink-pri: #f0e6d0; /* 主，暖白非纯白 */ --ink-sec: #c2b394; /* 次，黑底对比 6.4:1 */ --ink-mut: #9d927a; /* 弱，黑底对比 4.5:1（旧 #6f6450=2.65:1 WCAG 失败，已弃） */ /* ── 品牌金（唯一品牌强调色） ── */ --gold: #c4924d; /* 主金 */ --gold-lt: #e0c490; /* 亮金 / 标题 / active */ --gold-dk: #8c5e30; /* 暗金 / active 底 / 边 */ --gold-soft: rgba(196,146,77,.15); /* ── 强调红宝石（仅录音中 / 告警 / 错误） ── */ --ruby: #c5453a; /* ── 阴影（金辉光代替灰阴影，黑底用纯黑投影做深度） ── */ --shadow-gold: 0 0 14px rgba(196,146,77,.22); --shadow-ambient: 0 8px 24px rgba(0,0,0,.5); --shadow-hover: 0 14px 40px rgba(0,0,0,.6); /* ── 重映射所有 web 端旧 token（让既有选择器在黑底下自动可见） ── */ --bg-main: #0a0806; --bg-depth: #14110d; --bg-section: rgba(255,255,255,.05); --bg-ink: #f0e6d0; --card: #14110d; --card-strong: #181410; --card-elevated: #1d1810; --line: rgba(196,146,77,.18); --line-strong: rgba(196,146,77,.32); --text: #f0e6d0; --text-primary: #f0e6d0; --text-secondary: #c2b394; --muted: #b5a888; --subtle: #9d927a; --accent: #c4924d; --accent-hover: #d6a26b; --accent-deep: #8c5e30; --accent-2: #e0c490; --accent-2-hover: #d6a26b; --accent-2-soft: rgba(196,146,77,.15); --accent-soft: rgba(196,146,77,.15); --accent-text: #0a0806; /* ── 功能色（黑底提亮版） ── */ --success: #6fb892; --success-soft: rgba(62,155,106,.18); --danger: #ef6e62; --danger-soft: rgba(197,69,58,.18); --warning: #f0c178; --warning-soft: rgba(217,154,61,.18); /* ── A3 衬线杂志骨架沿用 ── */ --a3-cream: #0a0806; --a3-ink: #f0e6d0; --a3-muted: #b5a888; --a3-line: rgba(196,146,77,.18); /* ── 圆角（以 App 值为准） ── */ --radius-card: 14px; --radius-inner: 12px; --radius-btn: 999px; --radius-pill: 999px; --radius-input: 8px; /* ── 玻璃态（黑金版） ── */ --glass-bg: rgba(10,8,6,.72); --glass-blur: 20px; --glass-border: 1px solid var(--border-gold); --glass-shadow: 0 8px 32px rgba(0,0,0,.5); /* ── 字体栈（Sans 正文 / Serif 标题品牌 / Mono 数据） ── */ --font-sans: 'Noto Sans SC', -apple-system, BlinkMacSystemFont, 'PingFang SC', sans-serif; --font-serif: 'Noto Serif SC', 'Songti SC', 'STSong', serif; --font-mono: ui-monospace, 'SF Mono', Menlo, monospace; } @media (max-width: 640px) { :root { --radius-card: 14px; --radius-inner: 10px; } } /* ── body：黑金底 + 暖白字 + Sans 栈 ── */ body { background-color: var(--bg-deep); color: var(--ink-pri); font-family: var(--font-sans); } /* ── 卡片阴影：去掉 components.css 的白色顶高光（黑底显为亮缝），改金色微光 ── */ .hero-panel, .card, .sub-hero { box-shadow: 0 1px 0 rgba(196,146,77,.10) inset, var(--shadow-ambient); } .card:hover { box-shadow: 0 1px 0 rgba(196,146,77,.14) inset, var(--shadow-hover); } /* ── 全局导航：黑金玻璃栏（覆盖 components.css 的浅色硬编码） ── */ .global-nav { background: var(--glass-bg); border-bottom: 1px solid var(--border-gold); } .nav-brand { color: var(--gold-lt); } .nav-logo { background: linear-gradient(135deg, var(--gold-lt), var(--gold)); color: var(--accent-text); box-shadow: var(--shadow-gold); } .nav-user { background: var(--bg-elev2); border: 1px solid var(--border-gold); color: var(--ink-pri); } .nav-avatar { background: linear-gradient(135deg, var(--gold-lt), var(--gold)); color: var(--accent-text); } /* ── 标题：衬线 + 亮金品牌色（覆盖 base.css 的铜色） ── */ h1, h2, h3, h4, h5, h6 { font-family: var(--font-serif); color: var(--ink-pri); } h1, .h-display, .at-display { color: var(--gold-lt); } /* ── eyebrow / 小标签：金色 ── */ .eyebrow { color: var(--gold); } /* ── 焦点环：金色 ── */ :focus-visible { outline-color: var(--gold); } /* ── 文字渐变 shimmer：金色双阶 ── */ .text-shimmer { background: linear-gradient(90deg, var(--gold) 20%, var(--gold-lt) 50%, var(--gold) 80%); background-size: 200% auto; -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } /* ── 选区高亮 ── */ ::selection { background: rgba(196,146,77,.30); color: var(--ink-pri); } /* ── 滚动条（黑金细条） ── */ ::-webkit-scrollbar { width: 8px; height: 8px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: rgba(196,146,77,.28); border-radius: 999px; } ::-webkit-scrollbar-thumb:hover { background: rgba(196,146,77,.45); } /* ── 安全区 + 防回弹（移动端通用，App 与窄屏 web 都受益） ── */ html { overscroll-behavior: none; background-color: var(--bg-deep); } body { overflow-x: hidden; } /* ── 防白边兜底：固定深色底板延伸到视口外 200px ── iOS WKWebView/Safari 橡皮筋回弹时，露出的永远是深色底板而非默认白底。 z-index:-1 沉到 body 内容之下，正常不可见，仅回弹露出的边缘可见。 */ html::before { content: ''; position: fixed; inset: -200px; background: var(--bg-deep); z-index: -1; pointer-events: none; }