/* * 统一设计令牌 — 所有暗色主题共享 * 材质（玻璃）、间距、圆角、断点、容器、无障碍 * * ★ 材质单一源：本文件的「玻璃」段是全站唯一的玻璃配方。 * 任何 CSS 里再出现 blur(12px) / rgba(255,255,255,0.07) 这类散装值，即为漂移。 * 加新表面＝选一层（sheen 之下、pane 之上、float 最上），不要新造配方。 */ /* 字体（Noto Sans SC + Noto Serif SC）由各布局 head 的 并行加载（2026-10-05 起，勿在此 @import 串行） */ :root { /* 字体系统：宋体展示字 + 黑体正文，营造人文质感 */ --font-body: 'Noto Sans SC', 'Microsoft YaHei', -apple-system, BlinkMacSystemFont, sans-serif; --font-display: 'Noto Serif SC', 'Songti SC', 'Source Han Serif SC', Georgia, serif; /* ============================================================ 玻璃材质 —— 配方是「灯火透玻璃」： 墨底之上只有一盏暖光（下方偏左），玻璃板被它从底下照亮。 因此高光边是暖的（奶金），暗边是冷的（墨），玻璃才有厚度； 全站纯冷色的霓虹渐变会显得没有光源，也显得像模板。 ============================================================ */ /* 三档高度：越浮起越亮、越模糊。旧名 --glass-bg / --glass-blur 保留＝向后兼容 */ --glass-sheen: rgba(255, 255, 255, 0.035); /* ①贴底层：分区底、内嵌槽 */ --glass-pane: rgba(255, 255, 255, 0.062); /* ②标准层：卡片、输入、控件 */ --glass-float: rgba(255, 255, 255, 0.095); /* ③浮起层：下拉、弹窗、toast */ --glass-bg: var(--glass-pane); /* 兼容别名（勿删：21 处旧消费点） */ --glass-blur: 18px; /* 标准模糊 */ --glass-blur-bar: 26px; /* 吸顶条/大面板：模糊更实，读作厚玻璃 */ --glass-blur-sm: 12px; /* 小控件：省 GPU */ --glass-sat: 155%; /* 透过去的颜色要更浓，玻璃才"透" */ /* 板内渐变：暖光从下往上收，顶面留一道冷反光 */ --glass-body: linear-gradient(180deg, rgba(255, 236, 205, 0.055) 0%, rgba(255, 255, 255, 0.012) 26%, rgba(0, 0, 0, 0.05) 100%); /* 边缘：上=暖高光（灯在下方，板顶受光），下=压暗（厚度），侧=发丝 */ --glass-edge-top: rgba(255, 226, 186, 0.20); --glass-edge-bottom: rgba(0, 0, 0, 0.30); --glass-border: rgba(255, 240, 220, 0.11); --glass-border-hover: rgba(255, 226, 186, 0.26); /* 阴影：内层做厚度，外层做离地。全部带 -24px 扩散＝贴地不脏 */ --glass-lip: inset 0 1px 0 var(--glass-edge-top), inset 0 -1px 0 var(--glass-edge-bottom); --glass-cast: 0 18px 40px -24px rgba(2, 6, 12, 0.85), 0 2px 6px -2px rgba(2, 6, 12, 0.5); --glass-shadow: var(--glass-lip), var(--glass-cast); --glass-shadow-lift: var(--glass-lip), 0 26px 54px -26px rgba(2, 6, 12, 0.9), 0 3px 10px -3px rgba(2, 6, 12, 0.55); /* 层级表面（旧名保留，值改为引用新档，避免两套数字） */ --surface-1: var(--glass-sheen); --surface-2: var(--glass-pane); --surface-hi: rgba(255, 226, 186, 0.16); /* 顶边内高光＝暖 */ --hairline: rgba(255, 240, 220, 0.09); /* 发丝边框 */ --hairline-strong: rgba(255, 226, 186, 0.20); /* 暖光本身：全站唯一光源的位置与色（页背景、辉光、聚焦环共用同一盏灯） */ --lamp-core: rgba(255, 172, 87, 0.16); --lamp-halo: rgba(255, 196, 120, 0.07); --rim-cool: rgba(96, 165, 250, 0.10); --ember: #f0a04b; /* 星火／鎏金：与文章页「书脊金」同族，纸与玻璃共用一套光 */ --ember-deep: #c9762f; --glow-warm: 0 0 34px rgba(240, 160, 75, 0.28); /* 历史别名：这三个名字散落在 tools/notebook/agent 页里，收编进同一配方而不是各页再定义一套 */ --card-bg: var(--glass-pane); --card-border: var(--glass-border); --border-subtle: var(--glass-border); /* 品牌渐变：10-28 起在共享层给默认值。此前 --grad-btn 只存在于 spark1/styles.css， 而 /tools/ /agent/ /health/ 等静态页不加载 styles.css ⇒ 各处 var(--grad-btn, 硬编码) 静默回退成散装靛紫（同站两种品牌渐变＝"不统一"的直接来源）。 站点要改只需在自己的 :root 覆盖（websafe0/marketing.css 就是这么做的）。 */ /* ⚠️ 本块内注释禁止让「变量名 + 星号 + 斜杠」连写：那三个字符会提前闭合注释， 紧随其后的渐变声明被解析器当垃圾丢弃 ⇒ logo／区块标题／页脚品牌字全成透明字（10-27 实证）。 */ --grad-text: linear-gradient(112deg, #c9d4ff 0%, #e9c08b 56%, #f0a04b 100%); --grad-btn: linear-gradient(115deg, #6366f1 0%, #a55cf0 44%, #ef7d6b 76%, #f5a742 100%); --grad-card-border: linear-gradient(120deg, rgba(129, 140, 248, 0.5), rgba(240, 160, 75, 0.45), rgba(255, 217, 160, 0.55)); --c-glow: rgba(240, 160, 75, 0.4); --shadow-glow: 0 0 40px rgba(240, 160, 75, 0.3); --shadow-btn: 0 6px 22px rgba(224, 122, 63, 0.45); --text-heading: #ece9e4; /* 颗粒纹理（SVG 分形噪声），叠加在背景上做触感层 */ --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); /* 结构 */ --radius-card: 16px; --radius-btn: 12px; --radius-input: 10px; --container-max: 1200px; --container-pad: 20px; /* 间距系统 (4px 基准) */ --space-1: 0.25rem; /* 4px */ --space-2: 0.5rem; /* 8px */ --space-3: 0.75rem; /* 12px */ --space-4: 1rem; /* 16px */ --space-5: 1.25rem; /* 20px */ --space-6: 1.5rem; /* 24px */ --space-8: 2rem; /* 32px */ --space-10: 2.5rem; /* 40px */ --space-12: 3rem; /* 48px */ /* 圆角扩展 */ --radius-sm: 6px; --radius-md: 10px; --radius-lg: 16px; --radius-xl: 20px; --radius-full: 9999px; /* 阴影系统 */ --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.05); --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.1); --shadow-md: 0 4px 8px rgba(0, 0, 0, 0.12); --shadow-lg: 0 8px 16px rgba(0, 0, 0, 0.15); --shadow-xl: 0 12px 24px rgba(0, 0, 0, 0.2); /* 过渡 */ --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1); --transition-base: 250ms cubic-bezier(0.4, 0, 0.2, 1); --transition-slow: 350ms cubic-bezier(0.4, 0, 0.2, 1); --transition-spring: 500ms cubic-bezier(0.34, 1.56, 0.64, 1); /* 表单色彩令牌 */ --form-text: rgba(255, 255, 255, 0.92); /* 输入文本 */ --form-label: rgba(255, 255, 255, 0.88); /* 表单标签 */ --form-placeholder: rgba(255, 255, 255, 0.70); /* 占位符 */ --form-help: rgba(255, 255, 255, 0.70); /* 帮助文本 */ --form-input-bg: rgba(255, 255, 255, 0.08); /* 输入框背景 */ --form-input-bg-focus: rgba(255, 255, 255, 0.12); /* 输入框聚焦背景 */ --form-input-border: rgba(255, 255, 255, 0.18); /* 输入框边框 */ /* UI 辅助色彩令牌 */ --ui-hint: rgba(255, 255, 255, 0.70); /* 次要提示 */ --ui-muted: rgba(255, 255, 255, 0.60); /* 弱化文本 */ --ui-subtle: rgba(255, 255, 255, 0.50); /* 微弱文本 */ --ui-faint: rgba(255, 255, 255, 0.40); /* 最弱可读（排序指示器） */ /* 无障碍令牌 */ --a11y-font-scale: 1; --a11y-text-primary: rgba(255, 255, 255, 0.96); --a11y-text-muted: rgba(255, 255, 255, 0.78); --a11y-border-strong: rgba(255, 255, 255, 0.35); /* 排版细节 */ --kicker-tracking: 0.22em; /* 眉题字距 */ --display-tracking: -0.01em; /* 大标题字距 */ } /* ============================================================ 材质的三条现实约束——不是装饰，是"玻璃在真机上到底长什么样" ============================================================ */ /* ① 不支持 backdrop-filter 的浏览器（UC / QQ / 部分国产 WebView 仍占可观比例）： 没有模糊的玻璃＝4% 白纱直接糊在背景图上，文字对比度会塌。 解法＝把透明度提上来，退化成"实体墨板"，材质变了但可读性不变。 */ @supports not ((backdrop-filter: blur(2px)) or (-webkit-backdrop-filter: blur(2px))) { :root { --glass-sheen: rgba(20, 26, 38, 0.72); --glass-pane: rgba(21, 28, 41, 0.82); --glass-float: rgba(18, 24, 36, 0.96); --glass-body: linear-gradient(180deg, rgba(255, 236, 205, 0.05), rgba(0, 0, 0, 0.06)); } } /* ② 系统开了"减少透明度"（iOS / macOS / Android 无障碍）：一律给实心 */ @media (prefers-reduced-transparency: reduce) { :root { --glass-sheen: rgba(19, 25, 36, 0.94); --glass-pane: rgba(20, 26, 38, 0.96); --glass-float: rgba(16, 21, 31, 0.98); } } /* ③ 窄屏 GPU 便宜：模糊半径减半，暖光收弱——大屏的材质感不靠小屏硬撑 */ @media (max-width: 640px) { :root { --glass-blur: 12px; --glass-blur-bar: 16px; --glass-blur-sm: 8px; --glass-cast: 0 12px 26px -18px rgba(2, 6, 12, 0.8), 0 1px 4px -1px rgba(2, 6, 12, 0.45); } } /* 通用玻璃件：任何页面要一块玻璃，加 class 即可，不必再抄配方 */ .glass { background: var(--glass-body), var(--glass-pane); backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat)); -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat)); border: 1px solid var(--glass-border); border-radius: var(--radius-lg); box-shadow: var(--glass-shadow); } .glass--float { background: var(--glass-body), var(--glass-float); backdrop-filter: blur(var(--glass-blur-bar)) saturate(var(--glass-sat)); -webkit-backdrop-filter: blur(var(--glass-blur-bar)) saturate(var(--glass-sat)); box-shadow: var(--glass-lip), 0 30px 60px -26px rgba(2, 6, 12, 0.92); } /* Reset */ * { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: smooth; } /* 容器 */ .container { max-width: var(--container-max); margin: 0 auto; padding: 0 var(--container-pad); } /* 优雅的淡入动画 */ @keyframes fadeIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } } @keyframes slideInUp { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } } /* 焦点样式：暖金实心环 + 一圈墨，保证在玻璃上任何底色都可辨（玻璃会"吃掉"普通 outline） */ *:focus-visible { outline: 2px solid var(--ember, #f0a04b); outline-offset: 2px; box-shadow: 0 0 0 4px rgba(8, 12, 20, 0.85); border-radius: var(--radius-sm); } /* 选中态：与光源同色族，选中的字像被灯照到 */ ::selection { background: rgba(240, 160, 75, 0.28); color: #fff8ef; } /* 平滑的图片加载 */ img { transition: opacity var(--transition-base); } /* 无障碍 */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } } /* 大字模式：在根元素上切换，避免破坏布局 */ html.a11y-large-text { font-size: calc(16px * var(--a11y-font-scale, 1.125)); --a11y-font-scale: 1.125; } /* 高对比模式：强制提升文字与边框对比度 */ html.a11y-high-contrast { --form-text: #ffffff; --form-label: #ffffff; --form-placeholder: rgba(255, 255, 255, 0.85); --form-help: rgba(255, 255, 255, 0.85); --form-input-bg: rgba(255, 255, 255, 0.14); --form-input-bg-focus: rgba(255, 255, 255, 0.20); --form-input-border: rgba(255, 255, 255, 0.45); --ui-hint: rgba(255, 255, 255, 0.85); --ui-muted: rgba(255, 255, 255, 0.75); --ui-subtle: rgba(255, 255, 255, 0.65); --ui-faint: rgba(255, 255, 255, 0.55); --glass-sheen: rgba(255, 255, 255, 0.10); --glass-pane: rgba(255, 255, 255, 0.14); --glass-float: rgba(255, 255, 255, 0.18); --glass-border: rgba(255, 244, 230, 0.34); --glass-edge-top: rgba(255, 244, 230, 0.55); --hairline: rgba(255, 244, 230, 0.30); --hairline-strong: rgba(255, 244, 230, 0.50); --a11y-border-strong: rgba(255, 255, 255, 0.55); }