/* ============================================================ 潜龙八字 · UI 方案 E · 皮肤「epic」——青铜史诗 · 厚重感 ------------------------------------------------------------ 一句话主张：不是古风 cosplay，而是「礼器感」—— 秦汉石刻 / 青铜鼎彝的体量感 ＋ 现代信息设计的秩序。 色彩体系（三色礼器）：墨玉青底 ＋ 朱砂主色 ＋ 暗金点缀 ＋ 铜锈绿辅色。 法度（与 css/light.css、css/skins/mo.css 同规格）： 1) 本文件只声明 CSS 变量（设计契约），不含任何组件选择器； 2) 契约 = css/light.css 的 64 项 ＋ hero 组 5 项 = 69 项，自足， 不依赖 :root 兜底（项目门禁按「缺项 0」判）； 3) 顶层选择器只有 [data-skin="epic"] 一个； 4) 不含强制优先声明； 5) 注释内不写块注释的结束符号片段（硬教训 10）； 本文件注释内亦不写花括号，避免静态审计把散文误读成选择器。 对比度口径：本文件每个承载文字的色值旁边标注的比值，均由 WCAG 2.x 相对亮度公式在 sRGB 上**脚本计算**（见 方案.md 第九条实测表）。 本机无可用无头浏览器，故属「静态推定」，未经真机取色复核。 用法： ＋ 引入 css/ 下同名文件（零组件改动）。 状态：正式皮肤（04 青铜礼器）。由 _design/E-史诗 转正，文件 1:1 未改。 ============================================================ */ /* ------------------------------------------------------------ 一 · core 层：不随语义变化的原始值（墨玉底、骨白墨、青铜线、刻度） ------------------------------------------------------------ */ [data-skin="epic"] { /* ---------- 墨玉：底色与表面（深青绿黑，青铜器的「暗面」） ---------- */ --bg: #0f1412; /* 页面底色：墨玉黑（极深青绿） */ --bg-soft: #131a17; /* 更沉一档：侧栏 / 页脚 / 轨道底 */ --surface: #18201d; /* 卡片表面（青铜暗面） */ --surface-2: #1f2a25; /* 内嵌 / 输入 / 表头（比表面亮一档，分区靠底色差） */ --surface-3: #27332c; /* 更深一层：按压态 / 轨道槽 */ --bg-card: #18201d; /* 卡片（与 --surface 一致） */ /* ---------- 骨白：三级文字（差一整个体量，不是差 1px） ---------- */ --ink: #f1eadb; /* 主文字：骨白（对 surface 13.88:1） */ --ink-2: #c4baa5; /* 次文字：表头 / 小字段（对 surface 8.64:1） */ --ink-3: #a49e8b; /* 弱化：表注 / 占位（对 surface 6.21:1，对 surface-3 4.91:1） */ /* ---------- 青铜线：本方案的「第二语言」——粗边 2px 是形，线色是质 ---------- */ --line: #3d4841; /* 常规线（表格内线 / 分隔） */ --line-strong: #6d6a4d; /* 强调线：卡框 / 表头錾刻线（对 surface 3.02:1，达非文字 3:1） */ --line-thin: #2b342e; /* 极细线：内层描边 / 槽口 */ /* ---------- 深色信息卡（既有命名，兼容现组件） ---------- */ --dark-bg: #0a0f0d; /* 比 --bg 再深一档：礼器「凹面」 */ --dark-surface: #151d1a; --dark-text: #f4eee0; --dim-text: #a9a18c; /* 对 dark-surface 6.51:1 */ /* ---------- hero 组（T-093 S1 登记项 · 本方案**实际消费**：命主铭牌） ---------- */ --hero-bg: #0a0f0d; --hero-surface: #151d1a; --hero-text: #f4eee0; --hero-dim: #a9a18c; --hero-line: rgba(200, 163, 90, .30); /* 铭牌上的青铜细线（不承载语义） */ /* ------------------------------------------------------------ 二 · semantic 层：品牌 / 辅助 / 点缀 / 语义 / 分级 / 五行 ------------------------------------------------------------ */ /* ---------- 品牌：朱砂（印泥）——对 bg 5.79:1 / surface 5.17:1 / surface-2 4.62:1 ---------- 深色底上的朱砂必须提亮，否则印色会糊进墨里；故 --brand 是「亮朱砂」 （承载文字），--brand-deep 是「入铜的朱砂」（承载色块与骨白字，5.55:1）。 取值经反推：再暗一档（#e8573a）对 surface-2 只 4.13:1，不足正文 4.5:1； 再亮一档则失「深朱」的沉。此值对 skin 内三个承载文字的底**全部** ≥4.5:1。 */ --brand: #ee6442; --brand-deep: #a8331f; --brand-soft: rgba(238, 100, 66, .14); --brand-glow: rgba(238, 100, 66, .34); /* ---------- 辅助：铜锈绿（青铜器表面的铜绿）——对 surface 5.98:1 ---------- */ --accent: #57a8a6; --accent-deep: #3f8180; --accent-soft: rgba(87, 168, 166, .14); /* ---------- 点缀：暗金（错金银）——对 surface 7.00:1；文字金 8.40:1 ---------- */ --gold: #c8a35a; --gold-text: #d8b45f; --gold-soft: rgba(200, 163, 90, .16); /* ---------- 语义四色（深色底上全部提亮，均 ≥4.5:1 对 surface） ---------- */ --ok: #4caf7d; /* 6.12:1 */ --warn: #d9a04a; /* 7.19:1 */ --danger: #e2604a; /* 4.75:1 */ --info: #5f9fc4; /* 5.73:1 */ /* ---------- 资料分级 S / A / B / C（作实底 + 墨字，墨字对比 4.5:1 以上） ---------- */ --grade-s: #d8b45f; /* S 金（墨字 9.40:1） */ --grade-a: #e2604a; /* A 朱（墨字 5.32:1） */ --grade-b: #57a8a6; /* B 铜绿（墨字 6.03:1） */ --grade-c: #9a9484; /* C 石灰（墨字 6.15:1） */ /* ---------- 五行色（数据编码色：只作色条 / 底纹 / 色块，**不作文字前景**） —— 与 css/readability.css 的机制一致：文字走 --ink，五行走 data-wx + --gz。 五色在墨玉底上提亮并拉开明度：木(绿) 火(橙朱) 土(赭) 金(明黄) 水(青蓝)。 ---------- */ --wx-wood: #4cb96f; --wx-fire: #f4763a; --wx-earth: #b5854a; --wx-metal: #edd06a; --wx-water: #5b93e8; /* ---------- 影：礼器压在案上的「重」——投影深而暖，不是灰雾 ---------- */ --shadow-sm: 0 1px 2px rgba(0, 0, 0, .55); --shadow-md: 0 6px 18px rgba(0, 0, 0, .52); --shadow-lg: 0 18px 44px rgba(0, 0, 0, .62); /* ------------------------------------------------------------ 三 · 刻度：字号 / 间距 / 圆角 / 字体（厚重 = 大字号 + 大留白 + 方角） ------------------------------------------------------------ */ /* ---------- 字号阶梯（下档 12px 是硬下限，故 --fs-xs 也钉在 12px） ---------- */ /* ---------- 间距阶梯（4px 基；中低密度，上限向「留白」一侧取档） ---------- */ /* ---------- 圆角（方角主张：最小 2px，只有礼器级容器到 8px） ---------- */ /* ---------- 字体栈（本地优先 · 离线零网络；衬线走本地宋体系，碑刻气由字重与字距承担） ---------- */ --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans SC", sans-serif; --font-serif: "STZhongsong", "Songti SC", "SimSun", "STSong", "Source Han Serif SC", "Noto Serif SC", "Source Han Serif CN", serif; } /* ★ 260923 U2（T-UI-10）：本皮肤的 `--fs-*`／`--sp-*`／`--r-*` **逐值声明已移除** —— 尺寸标尺已**上移**至 `css/scale.css`（唯一真源）。此处只保留： · 两个**受控旋钮**（`--fs-scale` 规范 0.94–1.06；`--sp-scale` 建议 0.9–1.6）； · **圆角族引用**（`var(--r-<族>-*)`）—— 皮肤**不得**再写尺寸数值（EL-5）。 依据：owner 260922 拍板 ① 字号收敛＝乙 ② 标尺基准＝甲。 */ [data-skin="epic"]{ --fs-scale: 1.06; --sp-scale: 1.1; --r-sm: var(--r-sharp-sm); --r-md: var(--r-sharp-md); --r-lg: var(--r-sharp-lg); --r-xl: var(--r-sharp-xl); --r-pill: var(--r-sharp-pill); }