@charset "UTF-8"; /* ════════════════════════════════════════════════════════════════════════════ ELIO STUDIO · 语义令牌层 (tokens.css v1.0 · 2026-10-01) --------------------------------------------------------------------------- 唯一事实源：全站深浅两态的**全部色值**只在本文件定义；其它样式文件（styles.css / brand.css / work-detail.css）一律只允许引用令牌，禁止写死色值。加载顺序（必须最后加载）： ← 历史基础层 ← 品牌规范层（非色彩部分） ← 详情页版式层（仅详情页） ← 本文件（色彩唯一事实源）主题驱动（统一入口）： html[data-theme="dark"] / html[data-theme="light"] 由 app.js:setThemeMode() 与各页首屏内联防闪脚本写入，兼容 localStorage['pf_theme_mode']（历史键值 dark / warm 继续可用）与历史 .mode-warm 类（仅作兼容，不再参与色彩决策）。强调色（主题 × 5 强调色，取代历史 7 色）： html[data-accent="gold|champagne|amber|clay|verdant"] 由 app.js:applyTheme() 写入；未设置时默认 gold。 ════════════════════════════════════════════════════════════════════════════ */ /* ──────────────────────────────────────────────────────────────────────────── 1 · 深色态（品牌黑金；数值与历史品牌层 1:1 对齐，保证深色视觉零回归） ──────────────────────────────────────────────────────────────────────────── */ :root, html[data-theme="dark"] { color-scheme: dark; /* 1.1 底层与表面（语义：底 / 交替底 / 面 / 抬升面 / 悬浮面） */ --bg-base: #0A0A0A; /* 页面底 */ --bg-base-alt: #0A0A0A; /* 板块交替底 */ --bg-surface: #111110; /* 面 · 卡片 */ --bg-surface-2: #161513; /* 抬升面 */ --bg-surface-3: #1D1B18; /* 悬浮面 */ --bg-glass: rgba(10, 10, 10, .82); /* 毛玻璃条（导航滚动后） */ --bg-menu: rgba(12, 12, 11, .98); /* 浮层 / 菜单面板 */ --bg-wash: rgba(245, 241, 234, .06);/* 极淡色块（chip / 胶囊底） */ /* 1.2 文字层级（正文 / 次要 / 极淡 / 占位） */ --text-primary: #EDEAE4; --text-secondary: #9B968E; --text-muted: #6E6A63; --text-ghost: #4A4741; --text-faint: #6E6A63; /* 语义占位（与深色 --text-muted 同值） */ --text-strong: #F5F1EA; /* 杏仁 · 强标题 / 反白 */ --text-on-accent: #0A0A0A; /* 强调色块上的文字 */ /* 1.3 线条（统一三档，禁止随手写 rgba(255,255,255,x)） */ --line: rgba(237, 234, 228, .12); --line-soft: rgba(237, 234, 228, .07); --line-strong: rgba(237, 234, 228, .22); /* 1.4 遮罩（大图上的渐变压暗） */ --scrim: linear-gradient(180deg, rgba(10,10,10,.62) 0%, rgba(10,10,10,.28) 38%, rgba(10,10,10,.86) 100%); --scrim-top: linear-gradient(180deg, rgba(10,10,10,.72) 0%, rgba(10,10,10,0) 42%); /* 1.5 状态色 */ --state-ok: #5F9E7A; --state-warn: #C9A05B; --state-danger: #A65A4A; --state-info: #7C8AA0; /* 1.6 阴影（暖黑、低饱和） */ --sh-1: 0 1px 2px rgba(0, 0, 0, .30); --sh-2: 0 10px 30px rgba(0, 0, 0, .40); --sh-3: 0 24px 64px rgba(0, 0, 0, .55); /* 1.7 强调色兜底（未设置 data-accent 时 = 品牌金） */ --accent: #B08D5A; --accent-hover: #C9A57B; --accent-soft: rgba(176, 141, 90, .12); --accent-hue: 36; --accent-on: #0A0A0A; /* 1.8 动效时长与阶梯（v3 · motion-v3-spec 第 1 步）历史遗留：全站 20+ 处 transition 各写各的（.18s/.25s/.3s/.35s/.4s/.42s/.9s），时长不可预期。这里收口为「三档时长 + 一档交错」唯一事实源： fast .28s → 微交互（按钮 / 链接 / 卡片 hover / 线条伸缩） base .52s → 结构性过渡（面板 / 遮罩 / 主题换肤） slow .92s → 入场（同组元素整批只用一档） stagger 90ms → 卡片列表 / 导航子项的组内错峰注：--ease-out / --ease-inout 已由 brand.css :root 定义（值同规格，不重复定义）。 */ --dur-fast: .28s; --dur-base: .52s; --dur-slow: .92s; --stagger: 70ms; } /* ──────────────────────────────────────────────────────────────────────────── 2 · 浅色态（v3 暖白方案）底 #FFFDFA（v3 由 #FAF8F5 提亮）/ 交替底 #FBF8F3 / 面 #FFFFFF / 正文 #1A1815 线 rgba(43,43,43,.10)（v3 由暖褐改中性炭灰）/ 强调金 #8A6534（浅底加深一档）对比度实测（v3 复算，相对各自底色，WCAG 2.1）：正文 #1A1815 on #FFFDFA = 17.4:1（≥7:1 ✔）／ on 交替底 #FBF8F3 = 16.7:1 ✔ 次文 #5C564E on #FFFDFA = 7.1:1（≥4.5:1 ✔）／ on 交替底 #FBF8F3 = 6.8:1 ✔ 强调 #8A6534 on #FFFDFA = 5.2:1（≥4.5:1 ✔，v3 由 4.9:1 提升）极淡 #8F887D on #FFFDFA = 3.5:1（仅用于装饰 / 非必要元信息，≥3:1 ✔） ※ v3 浅色调色原则（theme-v3-spec 2.3）：只允许「墨色文字 + 暖金强调」，不引入任何蓝紫霓虹；浅底上的浮层一律用 --scrim 提亮，不用深色蒙版。 ※ 2026-10-01 浅色可读性修正：历史 --text-muted #8C857B（纸白仅 3.65:1）、 --text-ghost #B5AFA4（纸白仅 2.18:1）未达「meta 文字 4.5:1 / 装饰 3:1」，已按全站最差底色 #FFFFFF 重新取值；历史 #8C857B 降级为 --text-faint（纯装饰保留）。 ──────────────────────────────────────────────────────────────────────────── */ html[data-theme="light"] { color-scheme: light; /* 2.1 底层与表面（v3 · theme-v3-spec 2.1：纸白 #FAF8F5 → 暖白 #FFFDFA，板块交替底由「= 面 #FFFFFF」改为「比底深一档 #FBF8F3」——旧值深浅同色，导致交替板块看不出分区又被卡片同化） */ --bg-base: #FFFDFA; /* 页面底 · 暖白（v3：原 #FAF8F5） */ --bg-base-alt: #FBF8F3; /* 板块交替底 · 比底深一档（v3：原 #FFFFFF） */ --bg-surface: #FFFFFF; /* 面 · 卡片 */ --bg-surface-2: #F5F1EA; /* 抬升面 · 暖灰（浅色下与面区分） */ --bg-surface-3: #EFEAE1; /* 悬浮面 */ --bg-glass: rgba(255, 253, 250, .88); /* 与 v3 暖白底同色（原 250,248,245） */ --bg-menu: rgba(255, 255, 255, .98); --bg-wash: rgba(26, 24, 21, .04); /* 2.2 文字层级（v3 复算：按新底 #FFFDFA / 新交替底 #FBF8F3 重新取值，全部仍 ≥ WCAG AA；数值见上方 §2 抬头注释） */ --text-primary: #1A1815; /* 17.4:1 on 暖白 / 16.7:1 on 交替底 */ --text-secondary: #5C564E; /* 7.1:1 on 暖白 / 6.8:1 on 交替底 */ --text-muted: #736C62; /* 5.2:1 on 面 / 5.1:1 on 暖白 / 4.6:1 on 抬升面 */ --text-ghost: #8F887D; /* 3.5:1 on 面（仅装饰，≥3:1） */ --text-faint: #8C857B; /* 3.4:1 纯装饰保留（非必要信息） */ --text-strong: #1A1815; --text-on-accent: #FFFFFF; /* 2.3 线条（v3 · theme-v3-spec 2.2：暖褐 rgba(26,24,21,·) → 中性炭灰 rgba(43,43,43,·)，浅底描边不再带暖偏色） */ --line: rgba(43, 43, 43, .10); --line-soft: rgba(43, 43, 43, .055); --line-strong: rgba(43, 43, 43, .20); /* 2.4 遮罩（浅底上以纸白压亮，保证大图上深色标题可读） */ --scrim: linear-gradient(180deg, rgba(250,248,245,.72) 0%, rgba(250,248,245,.30) 38%, rgba(250,248,245,.88) 100%); --scrim-top: linear-gradient(180deg, rgba(250,248,245,.82) 0%, rgba(250,248,245,0) 42%); /* 2.5 状态色（浅底加深） */ --state-ok: #2F6B4F; --state-warn: #8A6534; --state-danger: #99302A; --state-info: #4A5A75; /* 2.6 阴影（浅底柔化） */ --sh-1: 0 1px 2px rgba(26, 24, 21, .06); --sh-2: 0 10px 30px rgba(26, 24, 21, .10); --sh-3: 0 24px 64px rgba(26, 24, 21, .14); /* 2.7 强调色兜底（浅色下加深一档，禁用纯白底） */ --accent: #8A6534; --accent-hover: #A87B3F; --accent-soft: rgba(138, 101, 52, .10); --accent-hue: 36; --accent-on: #FFFFFF; } /* ──────────────────────────────────────────────────────────────────────────── 3 · 强调色板（主题 × 5 强调色；浅色态自动加深一档） ──────────────────────────────────────────────────────────────────────────── */ /* 3.1 品牌金 Brand Gold */ html[data-theme="dark"][data-accent="gold"] { --accent:#B08D5A; --accent-hover:#C9A57B; --accent-soft:rgba(176,141,90,.12); --accent-hue:36; } html[data-theme="light"][data-accent="gold"] { --accent:#8A6534; --accent-hover:#A87B3F; --accent-soft:rgba(138,101,52,.10); --accent-hue:36; } /* 3.2 香槟金 Champagne */ html[data-theme="dark"][data-accent="champagne"] { --accent:#C9A57B; --accent-hover:#DCC49B; --accent-soft:rgba(201,165,123,.14); --accent-hue:34; } html[data-theme="light"][data-accent="champagne"] { --accent:#8A6A3E; --accent-hover:#A2825A; --accent-soft:rgba(138,106,62,.10); --accent-hue:34; } /* 3.3 琥珀 Amber */ html[data-theme="dark"][data-accent="amber"] { --accent:#C9A05B; --accent-hover:#DDB773; --accent-soft:rgba(201,160,91,.14); --accent-hue:39; } html[data-theme="light"][data-accent="amber"] { --accent:#87662F; --accent-hover:#9E7C3F; --accent-soft:rgba(135,102,47,.10); --accent-hue:39; } /* 3.4 陶土 Clay */ html[data-theme="dark"][data-accent="clay"] { --accent:#A65A4A; --accent-hover:#C2765F; --accent-soft:rgba(166,90,74,.14); --accent-hue:8; } html[data-theme="light"][data-accent="clay"] { --accent:#8A3F30; --accent-hover:#A5523F; --accent-soft:rgba(138,63,48,.10); --accent-hue:8; } /* 3.5 松绿 Verdant */ html[data-theme="dark"][data-accent="verdant"] { --accent:#5F9E7A; --accent-hover:#7DB898; --accent-soft:rgba(95,158,122,.14); --accent-hue:147; } html[data-theme="light"][data-accent="verdant"] { --accent:#3F7355; --accent-hover:#4F8A68; --accent-soft:rgba(63,115,85,.10); --accent-hue:147; } /* ──────────────────────────────────────────────────────────────────────────── 4 · 兼容别名（历史变量名 → 语义令牌；历史组件无需改动即可跟随主题）说明：本段是唯一的重定向入口，styles.css / brand.css 中的历史重映射已废止。 ──────────────────────────────────────────────────────────────────────────── */ :root, html[data-theme] { /* 4.1 品牌基色别名（brand.css 历史名） */ --brand-ink: var(--bg-base); --brand-ink-2: var(--bg-surface); --brand-ink-3: var(--bg-surface-2); --brand-ink-4: var(--bg-surface-3); --brand-gold: var(--accent); --brand-gold-l: var(--accent-hover); --brand-gold-dim: var(--accent-soft); --brand-almond: var(--text-strong); --brand-copper: #6B3A2E; --brand-tx: var(--text-primary); --brand-tx-dim: var(--text-secondary); --brand-tx-mute: var(--text-muted); --brand-tx-ghost: var(--text-ghost); --brand-line: var(--line); --brand-line-soft: var(--line-soft); --brand-line-strong: var(--line-strong); --brand-scrim: var(--scrim); --brand-scrim-top: var(--scrim-top); /* 4.2 V5/V8 历史短名别名 */ --bg: var(--bg-base); --surface: var(--bg-surface); --surface2: var(--bg-surface-2); --border: var(--line); --text: var(--text-primary); --text2: var(--text-secondary); --text3: var(--text-muted); --gold: var(--accent); --gold-l: var(--accent-hover); --accent-dim: var(--accent-soft); --ink: var(--bg-base); --ink2: var(--bg-surface); --almond: var(--text-strong); --copper: var(--brand-copper); --tx: var(--text-primary); --tx-dim: var(--text-secondary); --line-strong: var(--line-strong); /* 4.3 板块交替底（历史 --section-alt-bg 黑底即由此收敛为两态令牌） */ --section-alt-bg: var(--bg-base-alt); /* 4.4 状态别名 */ --ok: var(--state-ok); --warn: var(--state-warn); --danger: var(--state-danger); --info: var(--state-info); /* 4.5 3D / 光效联动色（历史 --v5-accent 由 JS 直写，现改由令牌驱动） */ --v5-accent: var(--accent); /* 4.6 阴影别名 */ --shadow-1: var(--sh-1); --shadow-2: var(--sh-2); --shadow-3: var(--sh-3); /* 4.7 强调色块上的文字色 */ --accent-on: var(--text-on-accent); /* 4.8 铜色块（作品卡 .wc-flag 等）上的文字：铜底两态均为深色，故文字恒为浅色 */ --text-on-copper: #F5F1EA; } /* ──────────────────────────────────────────────────────────────────────────── 5 · 浅色态组件适配层收敛来源：① styles.css 原「暖白极简亮色主题」重映射段（已删除） ② brand.css 原 §1.16 暖白模式分散补丁（已删除） ③ 首屏 / 导航 / 资源库 / 时间轴 / 导视 / 页脚的历史硬编码深色全部改用语义令牌，禁止再写死色值。 ──────────────────────────────────────────────────────────────────────────── */ html[data-theme="light"] #bgCanvas { opacity: .5; } html[data-theme="light"] #glowCanvas { opacity: .15; } /* 5.1 首屏 */ html[data-theme="light"] .hero-headline { background: none; -webkit-text-fill-color: var(--text-primary); text-fill-color: var(--text-primary); } html[data-theme="light"] .hero-actions .btn { background: rgba(255, 255, 255, .55); border-color: var(--line-strong); color: var(--text-primary); } html[data-theme="light"] .hero-actions .btn:hover { background: rgba(255, 255, 255, .82); border-color: var(--line-strong); color: var(--text-primary); } html[data-theme="light"] .hero-actions .btn-primary { background: rgba(255, 255, 255, .68); border-color: var(--line-strong); color: var(--text-primary); } html[data-theme="light"] .hero-actions .btn-primary:hover { background: var(--accent); border-color: var(--accent); color: var(--text-on-accent); } /* 5.2 顶部导航 */ html[data-theme="light"] #header.scrolled { background: var(--bg-glass); box-shadow: 0 1px 24px rgba(26, 24, 21, .06); border-bottom-color: var(--line-soft); } html[data-theme="light"] #header .header-nav { background: var(--bg-wash); border-color: var(--line); } html[data-theme="light"] #header .nav-board-btn, html[data-theme="light"] #header .nav-board-menu a { color: var(--text-secondary); } html[data-theme="light"] #header .nav-board-btn:hover, html[data-theme="light"] #header .nav-board-item:hover .nav-board-btn, html[data-theme="light"] #header .nav-board-menu a:hover { color: var(--text-primary); background: var(--bg-wash); } html[data-theme="light"] #header .nav-board-menu, html[data-theme="light"] .mobile-nav { background: var(--bg-menu); border-color: var(--line); } html[data-theme="light"] .mobile-nav a { color: var(--text-secondary); } html[data-theme="light"] .mobile-nav a:hover, html[data-theme="light"] .mobile-nav a.active { color: var(--accent); background: var(--accent-soft); border-color: var(--accent-soft); } /* 5.3 五大板块底（历史黑底根治点：--section-alt-bg 已两态化） */ html[data-theme="light"] #about, html[data-theme="light"] #skills, html[data-theme="light"] #services, html[data-theme="light"] #testimonials, html[data-theme="light"] #faq { background: var(--bg-base-alt); } html[data-theme="light"] .section:not(:last-of-type)::after { background: var(--line); } /* 5.4 资源库 / 时间轴 / 表格类卡片 */ html[data-theme="light"] .rs-card { background: var(--bg-surface); border-color: var(--line); } html[data-theme="light"] .rs-card:hover { background: var(--accent-soft); border-color: var(--accent); } html[data-theme="light"] .rs-info b { color: var(--text-primary); } html[data-theme="light"] .rs-info i { color: var(--text-secondary); } html[data-theme="light"] .rs-ic { background: var(--accent-soft); color: var(--accent); } html[data-theme="light"] .timeline-item { background: var(--bg-surface); border-color: var(--line); } html[data-theme="light"] .timeline-item:hover { background: var(--bg-surface-2); border-color: var(--accent); } html[data-theme="light"] .res-row { border-color: var(--line-soft); } html[data-theme="light"] .res-row:hover { background: var(--accent-soft); } html[data-theme="light"] .res-list { background: var(--bg-surface); } html[data-theme="light"] .res-toolbar { background: var(--bg-glass); border: 1px solid var(--line-soft); } /* 5.5 章节导视（v3 极简窄轨：容器已在 brand.css §13.2 退形，浅色下只需保证节点可见） */ html[data-theme="light"] .chapter-nav, html[data-theme="light"] #chapterNav.chapter-nav { background: transparent; border-color: transparent; box-shadow: none; } html[data-theme="light"] .chapter-nav .cn-item .cn-label { color: var(--text-muted); } html[data-theme="light"] .chapter-nav .cn-item:hover .cn-label, html[data-theme="light"] .chapter-nav .cn-item.on .cn-label { color: var(--text-primary); } html[data-theme="light"] .chapter-nav .cn-dot { background: var(--accent); border-color: transparent; } html[data-theme="light"] .chapter-nav .cn-item .cn-line { background: var(--accent); } /* 5.6 页脚 / 表单 / 页尾按钮 */ html[data-theme="light"] .footer { border-top-color: var(--line); } html[data-theme="light"] .footer-brandline .fb-name { color: var(--text-primary); } html[data-theme="light"] .footer-nav a { color: var(--text-secondary); } html[data-theme="light"] .footer-nav a:hover { color: var(--accent); } html[data-theme="light"] .footer-copy .copy { color: var(--text-muted); } html[data-theme="light"] .contact-form input, html[data-theme="light"] .contact-form textarea { background: var(--bg-surface); border-color: var(--line); color: var(--text-primary); } html[data-theme="light"] .contact-form input::placeholder, html[data-theme="light"] .contact-form textarea::placeholder { color: var(--text-muted); } html[data-theme="light"] .next-section-btn { background: var(--bg-surface); border-color: var(--line); color: var(--text-secondary); } html[data-theme="light"] .next-section-btn:hover { background: var(--accent); border-color: var(--accent); color: var(--text-on-accent); } /* 5.7 客户评价 / 作品标注 / 主题面板 */ html[data-theme="light"] .tst-ref { color: var(--accent); border-color: var(--accent-soft); background: var(--accent-soft); } html[data-theme="light"] .tst-card { background: var(--bg-surface); border-color: var(--line); } html[data-theme="light"] .tst-card:hover { border-color: var(--accent); box-shadow: 0 26px 60px -34px rgba(26, 24, 21, .28); } html[data-theme="light"] .thb-chip { background: var(--bg-surface); color: var(--text-secondary); border-color: var(--line); } html[data-theme="light"] .thb-chip:hover { color: var(--text-primary); border-color: var(--accent); } html[data-theme="light"] .thb-chip.active { color: var(--text-on-accent); background: var(--accent); border-color: var(--accent); } /* 5.8 作品详情页版式层（work-detail.css 深色字面量） */ html[data-theme="light"] .wd-body { background: var(--bg-base); color: var(--text-primary); } html[data-theme="light"] .wd-nav { background: linear-gradient(180deg, var(--bg-glass), rgba(250, 248, 245, .55)); border-bottom-color: var(--line-soft); } html[data-theme="light"] .wd-brand { color: var(--text-primary); } html[data-theme="light"] .wd-nav-menu a { color: var(--text-secondary); } html[data-theme="light"] .wd-nav-menu a:hover { color: var(--accent); } /* 5.9 表单控件与选区在浅底下的可读性 */ html[data-theme="light"] ::selection { background: var(--accent); color: var(--text-on-accent); } html[data-theme="light"] ::-webkit-scrollbar-thumb { background: var(--line-strong); } html[data-theme="light"] ::-webkit-scrollbar-thumb:hover { background: var(--accent); } /* ──────────────────────────────────────────────────────────────────────────── 5.10 浅色态可读性补丁（2026-10-01 全站浅色复测新增）来源：11 页 × 深浅两态 × 1440/375 实测（verify_theme5.py + 像素核验）。原则：本段全部限定在 html[data-theme="light"] 下，深色态选择器零改动。 ──────────────────────────────────────────────────────────────────────────── */ /* ① 首屏副题高亮：styles.css 写死 #fff，浅底 1.06:1 → 正文色 */ html[data-theme="light"] .hero-intro .hero-highlight { color: var(--text-primary); text-shadow: none; } /* ② 工作室区块：流程步骤标题 / 小节标题 / 档期大字（styles.css 写死 #fff，浅底 1.06:1） */ html[data-theme="light"] .sp-step h5, html[data-theme="light"] .studio-subhead .ssh-title, html[data-theme="light"] .bk-title { color: var(--text-primary); } /* 档期状态胶囊：原 rgba(10,12,16,.55) 深底 + 次文（浅底 1.6:1）→ 浅面 + 次文 */ html[data-theme="light"] .bk-status { background: var(--bg-surface); border-color: var(--line); } html[data-theme="light"] .bk-status span { color: var(--text-secondary); } /* ③ 作品卡片角标：.wc-no 深底 + 强调色 2.32:1；.wc-flag 铜底 + 墨色 1.91:1 */ html[data-theme="light"] .works-grid .wc-no { background: var(--bg-menu); border-color: var(--line-strong); color: var(--text-primary); } html[data-theme="light"] .works-grid .wc-flag { color: var(--text-on-copper); } /* ④ 资源库 meta / 说明 / 标签：历史 --brand-tx-ghost 2.06:1 与写死 rgba(245,243,239,.62) 1.03:1 */ html[data-theme="light"] .res-shell .rd-k, html[data-theme="light"] .res-shell .rd-hint, html[data-theme="light"] .res-shell .rs-note, html[data-theme="light"] .res-shell .res-more, html[data-theme="light"] .res-more span, html[data-theme="light"] .res-more-note { color: var(--text-muted); } html[data-theme="light"] .res-tags span { color: var(--text-secondary); border-color: var(--line); background: var(--bg-wash); } html[data-theme="light"] .res-cat-ct { color: var(--text-secondary); } /* ⑤ 章节导视 #chapterNav 展开总览计数（--brand-tx-ghost 2.06:1） */ html[data-theme="light"] #chapterNav .guide-total { color: var(--text-secondary); } /* ⑥ 作品详情页二级导视条：原 rgba(10,10,10,.82) 深底（浅色下 .cur 1.44:1 / .on 2.34:1） */ html[data-theme="light"] .wd-guide { background: var(--bg-glass); border-bottom-color: var(--line-soft); } html[data-theme="light"] .wd-crumb, html[data-theme="light"] .wd-crumb a { color: var(--text-secondary); } html[data-theme="light"] .wd-crumb .cur { color: var(--text-primary); } html[data-theme="light"] .wd-subnav a { color: var(--text-secondary); } html[data-theme="light"] .wd-subnav a.on { color: var(--accent); border-bottom-color: var(--accent); } /* ⑦ 详情浮层（.detail-inner = 浅面）：其内写死 #fff 的标题/强调/输入框在浅底 1.06:1 */ html[data-theme="light"] .detail-inner h1, html[data-theme="light"] .detail-inner h2, html[data-theme="light"] .detail-inner h3, html[data-theme="light"] .detail-inner h4, html[data-theme="light"] .detail-inner h5, html[data-theme="light"] .detail-inner strong { color: var(--text-primary); } html[data-theme="light"] .detail-inner input, html[data-theme="light"] .detail-inner textarea { color: var(--text-primary); background: var(--bg-surface); border-color: var(--line); } html[data-theme="light"] .detail-inner input::placeholder, html[data-theme="light"] .detail-inner textarea::placeholder { color: var(--text-muted); } /* ── 5.10 补丁 2（2026-10-01 第二轮）：浅色残留低对比收口 —————————————————— 依据 verify_theme6 复测（渐变感知 + 展开浮层）后仍低于阈值的组合逐条修正。全部规则限定 html[data-theme="light"]，深色态选择器零改动。 */ /* ⑧ 实心主按钮 / 主导航按钮：历史写死墨字 #0A0A0A 压强调金仅 3.76:1 → 浅色态反白（7.0:1）注：首屏 .hero-actions .btn-primary 在浅色态是「半透明白胶囊」（见 5.1），文字须保持 --text-primary，故不列入本条，避免白字压白胶囊。 */ html[data-theme="light"] .btn-primary, html[data-theme="light"] .btn--primary, html[data-theme="light"] .contact-form .btn-primary, html[data-theme="light"] #header .nav-btn.primary, html[data-theme="light"] #header .nav-btn.primary:hover { color: var(--text-on-accent); } /* ⑨ 历史「亮金」#A87B3F 作文字色在纸白/面上仅 3.8:1 → 浅色态统一降为 --accent(#8A6534，4.9:1) */ html[data-theme="light"] #header .nav-board-btn .nbb-en, html[data-theme="light"] #header .nav-board-btn:hover .nbb-en, html[data-theme="light"] #mobileNav .nng-en, html[data-theme="light"] #mobileNav .mn-tile:hover .mn-t-zh, html[data-theme="light"] #mobileNav .mn-tile.active .mn-t-zh, html[data-theme="light"] #mobileNav .mn-line:hover, html[data-theme="light"] #mobileNav .mn-line.active, html[data-theme="light"] #mobileNav a:hover, html[data-theme="light"] #mobileNav a.active, html[data-theme="light"] .res-shell .res-op-dl, html[data-theme="light"] .res-shell .res-cat.active .res-cat-ct, html[data-theme="light"] .res-shell .res-cat.is-active .res-cat-ct { color: var(--accent); } /* ⑨b 首屏金色斜体字（brand.css 用了 --brand-gold-l）→ 浅色态降到 --accent */ html[data-theme="light"] .hero-headline em, html[data-theme="light"] .hero-headline i { color: var(--accent); -webkit-text-fill-color: var(--accent); text-fill-color: var(--accent); } /* ⑩ 金色胶囊 / 徽章：浅色态底由金色淡染改为「面白」，金底金字 4.37:1 → 4.9:1 */ html[data-theme="light"] .bd-badge, html[data-theme="light"] .res-cat.active, html[data-theme="light"] .res-cat.is-active, html[data-theme="light"] .filter-pill.active, html[data-theme="light"] .faq-overlay .faq-filter.active, html[data-theme="light"] .res-shell .res-cat.active, html[data-theme="light"] .res-shell .res-cat.is-active { background: var(--bg-surface); } /* ⑩b 预约区块的暖金渐变在浅底上偏深（块首金字仅 4.36:1）→ 浅色态放宽为极淡暖染 */ html[data-theme="light"] .studio-booking { background: linear-gradient(135deg, rgba(138,101,52,.06), rgba(138,101,52,.02) 55%, var(--bg-surface) 90%); border-color: var(--line); } /* ⑪ 入场幕（#welcome）在浅色态仍是深色幕布 —— 幕布内文字按其自身底色取值，禁用浅色令牌 */ html[data-theme="light"] #welcome .welcome-en, html[data-theme="light"] #welcome .welcome-skip { color: #9B968E; } html[data-theme="light"] #welcome .welcome-skip:hover { color: #C9A57B; } html[data-theme="light"] #welcome .welcome-slogan { color: #EDEAE4; } html[data-theme="light"] #welcome .welcome-enter { color: #FFFFFF; border-color: rgba(255,255,255,.28); } html[data-theme="light"] #welcome .welcome-enter:hover { color: #FFFFFF; } /* ⑫ 浮层面板（.modal / .add-modal-inner）浅色态为白面，写死 #fff 的标题/关闭按钮必须令牌化 */ html[data-theme="light"] .modal h2, html[data-theme="light"] .add-modal-inner h3 { color: var(--text-primary); } html[data-theme="light"] .modal-close { color: var(--text-secondary); background: var(--bg-wash); } html[data-theme="light"] .modal-close:hover { color: var(--text-primary); } html[data-theme="light"] .modal .m-tags span { background: var(--bg-wash); } /* ──────────────────────────────────────────────────────────────────────────── 5.11 浅色态首屏层级收敛（消除叠加暗层压底）问题根因：首屏存在 4 层「深色」叠加——① .hero-media 无图兜底深底渐变 ② .hero-scrim 黑色双渐变遮罩 ③ #hero3dVignette 黑色暗角 ④ #bgCanvas/#glowCanvas 在 light 下仍按深色绘制（实测 body.has-3d 下 opacity:.4）。四层叠加把纸白压到 rgb(39,38,37)~(198,195,191)，深色正文/次文随即跌破 4.5:1。处置：浅色态改为「纸白洗底」——媒体层用纸白渐变、遮罩/暗角用纸白压亮、画布透明度降到装饰级；深色态上述四层一律不动（零回归）。 ──────────────────────────────────────────────────────────────────────────── */ /* ⑬ 画布：浅色态仅保留极淡装饰颗粒（深色态 :root 段与 body.has-3d 段不动） */ html[data-theme="light"] #bgCanvas { opacity: .12; } html[data-theme="light"] #glowCanvas { opacity: .18; } /* ⑭ 首屏媒体层：无图兜底的深底渐变 → 纸白暖渐变（有图时由内联 background-image 接管，照片再由下方 .hero-scrim 纸白压亮，保证深色标题压在照片上仍 ≥4.5:1） */ html[data-theme="light"] .hero-media:not(.hero-media--photo) { background: radial-gradient(120% 90% at 78% 18%, rgba(138, 101, 52, .10) 0%, rgba(138, 101, 52, 0) 58%), radial-gradient(90% 70% at 12% 88%, rgba(138, 101, 52, .08) 0%, rgba(138, 101, 52, 0) 60%), linear-gradient(168deg, #FFFFFF 0%, #FAF8F5 46%, #F3EFE8 100%); } /* ⑮ 首屏遮罩：黑色双渐变 → 纸白双渐变（左下文字区压到近乎不透明） */ html[data-theme="light"] .hero-scrim { background-color: transparent; background-image: linear-gradient(180deg, rgba(250, 248, 245, .88) 0%, rgba(250, 248, 245, .34) 40%, rgba(250, 248, 245, .56) 62%, rgba(250, 248, 245, .95) 100%), linear-gradient(90deg, rgba(250, 248, 245, .94) 0%, rgba(250, 248, 245, .40) 52%, rgba(250, 248, 245, 0) 100%); } /* ⑯ 首屏暗角：黑色径向 → 纸白径向（浅色下不需要压暗，改为边缘柔化） */ html[data-theme="light"] #hero3dVignette { background: radial-gradient(120% 100% at 50% 50%, transparent 42%, rgba(250, 248, 245, .72) 100%); } /* ⑰ 金底深字按钮：浅色态强调金已加深一档，块上文字须随 --text-on-accent（白） */ html[data-theme="light"] .bg-btn { color: var(--text-on-accent); } html[data-theme="light"] .bg-btn:hover { color: var(--text-on-accent); } /* ──────────────────────────────────────────────────────────────────────────── 5.12 浅色态作品详情页「照片首屏」文字可读性问题：.wd-hero 是全幅照片首屏，文字压在其上——眉标 .wd-hero-kicker（强调金 #8A6534）、英文副题 .wd-hero-en（次文 #5C564E）、元信息 .wd-hero-meta b （极淡 #736C62）。浅色 --scrim 底部仅 .88 纸白，照片灰度区透出后实测金字 1.67~4.23:1、次文/极淡 2.91~4.11:1，属真缺陷（非采样误差）。处置：浅色态单独加强 .wd-hero::after 纸白洗底——上段保留照片可见（.30~.40），文字所在下段压至 .93~.985，使强调金 ≥4.8:1、次文 ≥6.6:1、极淡 ≥4.6:1；深色态该伪元素完全不动。 ──────────────────────────────────────────────────────────────────────────── */ html[data-theme="light"] .wd-hero::after { background: linear-gradient(180deg, rgba(250, 248, 245, .38) 0%, rgba(250, 248, 245, .28) 24%, rgba(250, 248, 245, .60) 46%, rgba(250, 248, 245, .93) 58%, rgba(250, 248, 245, .965) 72%, rgba(250, 248, 245, .985) 100%); } /* ──────────────────────────────────────────────────────────────────────────── 5.13 浅色态「沉浸式大字」与位移描边文字（index 设计理念横幅「空间叙事者」）问题：.big-type-text 用 background-clip:text 裁剪金属渐变，渐变内含 #fff 停位；其位移投影 .bt-outline 用 rgba(255,255,255,.14) 描边。二者都是深色底上的字面量，浅色纸白/浅米底上主字白段与描边均与底色同色 —— 两轮 DOM/像素审计均因「填充透明」跳过，视觉复测确认该标题在浅色态几乎不可见（真缺陷）。处置：浅色态把渐变白停位换成 --text-primary（深字，≥4.5:1）、描边换成低透明度深色（位移投影形态，≥3:1 可见）；深色态整段不动，金属白光泽保留。 ──────────────────────────────────────────────────────────────────────────── */ html[data-theme="light"] .big-type-text { background: linear-gradient(90deg, var(--text-primary) 20%, var(--accent) 50%, var(--text-primary) 80%); background-size: 200% 100%; -webkit-text-stroke-color: var(--accent); } html[data-theme="light"] .big-type-text .bt-outline { -webkit-text-stroke: 1px rgba(26, 24, 21, .50); color: transparent; } /* ──────────────────────────────────────────────────────────────────────────── 5.14 浅色态首页遗留硬伤收口（第三轮 DOM 审计 index.html：76 处 <3:1、119 处 3~4.5:1 非大字）注：不增删任何既有令牌，不改 5 套强调色板；仅浅色态局部覆盖。 ──────────────────────────────────────────────────────────────────────────── */ /* A. 写死 #fff 的板块标题：styles.css:399/414/426/453/492/503/525/803/1731 容器浅色态已令牌化为白面/纸白 → 白字压白面 1:1，全量令牌化 */ html[data-theme="light"] .about-photo-info h4, html[data-theme="light"] .philo-item h4, html[data-theme="light"] .timeline-item h4, html[data-theme="light"] .process-item h4, html[data-theme="light"] .service-item h4, html[data-theme="light"] .case-item h4, html[data-theme="light"] .insight-item h4, html[data-theme="light"] .insight-timeline-content h4, html[data-theme="light"] .studio-pillar h4 { color: var(--text-primary); } /* B. 筛选胶囊激活态：styles.css:781/784 写死 #fff，浅色态底已转浅面 → 金底白字 4.9:1 */ html[data-theme="light"] .filter-pill.active, html[data-theme="light"] .filter-pill.all-pill.active { color: #FFFFFF; background: var(--accent); border-color: var(--accent); } /* C. 资源库金标 .rs-tag：原金底 + 金字 1:1 → 金底白字 4.9:1 */ html[data-theme="light"] .rs-tag { color: #FFFFFF; background: var(--accent); } /* D. 半透明弱化小字：浅色态 opacity 把对比度稀释到 2.2~4.2:1 （.ss-no .55→2.19 / .big-type-sub .6→2.34 / .hero-subname .75→3.77 / .guide-index .78→3.25 / .guide-total .78→4.03 / .res-site .9→4.21）浅色纸白底无需叠加透明做层次，统一恢复不透明 */ html[data-theme="light"] .se-no, html[data-theme="light"] .se-subnav .ss-no, html[data-theme="light"] .hero-eyebrow .se-no, html[data-theme="light"] .big-type-block .big-type-sub, html[data-theme="light"] .hero-subname, html[data-theme="light"] .guide-index, html[data-theme="light"] .guide-total, html[data-theme="light"] .nbb-en, html[data-theme="light"] .nbb-ico, html[data-theme="light"] .res-site { opacity: 1 !important; } /* E. 小号金色文字：--accent(#8A6534) 在纸白/白面上 4.37:1（<4.5） → 编号/图标/出处等小字改用同族更深金（4.9:1）；令牌与色板不动 */ html[data-theme="light"] .se-no, html[data-theme="light"] .se-subnav .ss-no, html[data-theme="light"] .timeline-no, html[data-theme="light"] .rs-ic, html[data-theme="light"] .tst-ref, html[data-theme="light"] .nbb-en, html[data-theme="light"] .nbb-ico, html[data-theme="light"] .guide-index { color: #7A5628; } /* F. 404 页装饰大字（自身适配层 opacity:.5 → 2.02:1） */ html[data-theme="light"] .code { opacity: .75; } /* G. v3 章节导视（brand.css §13.2 已退形 + 桌面端 hover 渐现）：浅色态容器不再有玻璃底，因此原先"补成不透明"的补丁必须撤掉——否则它会以更高优先级把桌面端"默认 opacity:0 渐入"的规则顶掉，导视将永远显形。这里只保留：hover / 聚焦 / 展开态补到 1，以及浅色下头部细分隔线降一档。 */ html[data-theme="light"] #chapterNav.chapter-nav:hover, html[data-theme="light"] #chapterNav.chapter-nav:focus-within, html[data-theme="light"] #chapterNav.chapter-nav[data-open="true"] { opacity: 1; } html[data-theme="light"] #chapterNav .cn-head { border-bottom-color: var(--line-soft); } /* H. 子块导视（.se-subnav）内的英文标签与层级头：styles.css:2745/2762 自身 opacity .38 / .45，浅色白面上仅 1.66:1 / 2.88:1 —— 这是第四轮把阈值放宽到 op≥0.2 后才暴露的漏网项（前三轮 op<0.5 已计入但被更严重项掩盖） */ html[data-theme="light"] .se-subnav .ss-head { opacity: 1; } html[data-theme="light"] .se-subnav .ss-en { opacity: 1; color: var(--text-secondary); } /* ══════════════════════════════════════════════════════════════════ 5.15 详情面板浅色态写死白字收口（2026-10-02 全站深度审计 · 补丁 3）现象：浅色态 .detail-inner 已为纸白面 rgb(250,248,245)，但下列类在 styles.css 中硬编码 color:#fff，实测合成对比度 1.0~1.06:1，面板正文完全不可见（被 overlay 的深色半透明遮罩视觉错觉掩盖）。根因：补丁⑦只压到 .detail-inner 下 h1~h5/strong，未覆盖这些具体类；且 .contact-overlay .ct-info .ct-item .ct-text strong（0,4,1,2） specificity 高于补丁⑦的 html[data-theme="light"] .detail-inner strong。策略：浅色态覆盖；深色态除下方“元信息可读性提升”两项外零改动。 ══════════════════════════════════════════════════════════════════ */ html[data-theme="light"] .detail-overlay .detail-inner .faq-d-q, html[data-theme="light"] .detail-overlay .detail-inner .rv-quote, html[data-theme="light"] .detail-overlay .detail-inner .rv-name, html[data-theme="light"] .detail-overlay .detail-inner .wf-title, html[data-theme="light"] .detail-overlay .detail-inner .ab-hero-quote, html[data-theme="light"] .detail-overlay .detail-inner .ct-text strong { color: var(--text-primary) !important; } /* I. 同族兜底：面板内其余硬编码白字（含内联 style 写法）一并收口 */ html[data-theme="light"] .detail-overlay .detail-inner [style*="color:#fff"], html[data-theme="light"] .detail-overlay .detail-inner [style*="color: #fff"], html[data-theme="light"] .detail-overlay .detail-inner [style*="color:#FFF"], html[data-theme="light"] .detail-overlay .detail-inner [style*="color:rgb(255,255,255)"], html[data-theme="light"] .detail-overlay .detail-inner [style*="color: rgb(255, 255, 255)"] { color: var(--text-primary) !important; } /* J. 次级元信息可读性提升（两态）：评价卡出处 .rv-ref 原 opacity .5 （浅 2.03:1 / 深 1.76:1）、评分 .rv-score 原 .55（浅 2.24:1 / 深 2.66:1），均为有效信息而非装饰，提至可读区间；装饰性水印 .step-num/.wf-num/ .case-detail-visual（alpha ≤.2 的巨号数字/占位图形）保持设计原样不动。 */ .detail-overlay .detail-inner .rv-ref { opacity: .9; } .detail-overlay .detail-inner .rv-score { opacity: .88; } /* ══════════════════════════════════════════════════════════════════ 5.16 功能面板与下级连接（2026-10-02 全站深度审计 · 补丁 4） ══════════════════════════════════════════════════════════════════ */ /* K. 洞察全文阅读层（#insightOverlay）浅色态不可读现象：overlay 底在 styles.css:880 硬编码 rgba(8,8,10,.94) 深色，但正文 .ia-lead / .ia-body p / .ia-tags span 走 var(--text)/(--text2)，浅色态变量翻转为深色 → 深字压深底，实测 1.06:1 / 2.6:1 完全不可读；写死的白字 h2 / p strong 反而在深底上正常，形成"半张脸可见"的割裂。修法：浅色态把阅读层底改为纸白（与整站浅色主题一致），同时把写死白字收口为主题色。深色态零改动。 */ html[data-theme="light"] .insight-overlay { background: rgba(250,248,245,.97); } html[data-theme="light"] .insight-article h2, html[data-theme="light"] .insight-article .ia-body p strong { color: var(--text-primary); } /* L. 面板→下级连接元素（补丁 4 新增）：案例卡「查看项目详情 →」、评价卡对应作品链接、联系方式 mailto/tel/复制 */ .case-detail-link,.rv-ref-link{-webkit-tap-highlight-color:transparent} .case-detail-link{display:inline-flex;align-items:center;gap:6px;margin-top:12px;font-family:var(--font-mono);font-size:11px;letter-spacing:1.5px;text-transform:uppercase;color:var(--accent);text-decoration:none;border-bottom:1px solid transparent;transition:border-color .25s,color .25s} .case-detail-link:hover{border-bottom-color:var(--accent)} .rv-ref-link{color:inherit;text-decoration:none;border-bottom:1px solid rgba(138,101,52,.4);transition:border-color .25s,color .25s} .rv-ref-link:hover{color:var(--accent);border-bottom-color:var(--accent)} html[data-theme="light"] .rv-ref-link{border-bottom-color:rgba(138,101,52,.45)} .case-gallery-strip a.case-thumb{text-decoration:none;color:var(--text3);cursor:pointer} .case-gallery-strip a.case-thumb:hover{color:var(--accent)} .ct-text a{color:inherit;text-decoration:none;border-bottom:1px solid transparent;transition:border-color .25s} .ct-text a:hover{border-bottom-color:var(--accent)} .ct-copy{margin-left:8px;padding:2px 10px;font-family:var(--font-mono);font-size:10px;letter-spacing:1px;background:transparent;border:1px solid var(--border);color:var(--text3);border-radius:2px;cursor:pointer;transition:all .25s;vertical-align:middle} .ct-copy:hover{border-color:var(--accent);color:var(--accent)} /* ═══════════════════════════════════════════════════════════════ §5.18 详情面板「上级 / 下级」连接 ① .dp-nav 板块间导航条（每个详情面板底部，提供上一/下一板块与返回首页） ② .detail-breadcrumb a 提色：原为 inline var(--text3)，深色态实测 3.68:1（10.5px 小字低于 AA 4.5:1）；改用语义令牌 --text-secondary，深浅两态均 ≥ 4.5:1（深色 7.4:1 / 浅色 6.7:1）。 ═══════════════════════════════════════════════════════════════ */ .detail-breadcrumb a{ color:var(--text-secondary) !important; } .detail-breadcrumb a:hover{ color:var(--accent); text-decoration:underline; text-underline-offset:3px; } .detail-breadcrumb .sep{ color:var(--text-muted); } .dp-nav{ display:flex; align-items:center; justify-content:space-between; gap:10px 14px; flex-wrap:wrap; margin-top:clamp(30px, 4.2vw, 56px); padding-top:22px; border-top:1px solid var(--line); } .dp-nav a{ display:inline-flex; align-items:center; gap:7px; min-height:44px; padding:10px 15px; border:1px solid var(--line-strong); border-radius:999px; color:var(--text-primary); font-size:12.5px; line-height:1.2; text-decoration:none; transition:border-color .18s ease, color .18s ease, background .18s ease; } .dp-nav a:hover{ border-color:var(--accent); color:var(--accent); background:var(--accent-soft); } .dp-nav a:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; } .dp-nav .dp-home{ margin:0 auto; } .dp-nav svg{ flex:0 0 auto; } @media (max-width:560px){ .dp-nav{ justify-content:center; } .dp-nav .dp-home{ margin:0; } .dp-nav a{ font-size:12px; padding:10px 13px; } } /* ════════════════════════════════════════════════════════════════════════════ v3 升级层 · theme-v3-spec + motion-v3-spec 实施（2026-10-03）追加在所有既有主题 / 强调色 / 修复层之后，作为唯一生效出口。本层为文件末尾的唯一追加块（§v3-1 … §v3-8），不修改上方任何既有声明。 ──────────────────────────────────────────────────────────────────────────── */ /* ── §v3-1 全局降级兜底（motion-v3-spec 第 1 步末条） ────────────────────── 时长令牌 --dur-fast/.28s、--dur-base/.52s、--dur-slow/.92s、--stagger/70ms 已在本文件 §0 :root（85-89 行）存在；--ease-out / --ease-inout 由 brand.css:86-87 定义（值同规格）——按规格「不重复定义」要求，此处不再声明。 */ @media (prefers-reduced-motion:reduce){ *,*::before,*::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important; } } /* ── §v3-2 模块入场统一（motion-v3-spec 第 2 步） ────────────────────────── 经 grep 核实：站点并存三套 .reveal 实现——styles.css:955（translateY 48px）、 styles.css:1749（30px）、brand.css:587（var(--reveal-y)）；落位状态类混用 .in / .revealed / .visible / .is-visible / .in-view（app.js:5458/5878/6481/ 7361/7663 等多组 observer）。本层统一为「26px + --dur-slow + --ease-out」，并一次性覆盖全部状态类，避免出现「某组 observer 只加 .revealed，却被 .reveal{opacity:0} 藏住 → 内容不显示」的风险。 */ .reveal{ opacity:0; transform:translateY(26px); transition:opacity var(--dur-slow) var(--ease-out),transform var(--dur-slow) var(--ease-out); will-change:opacity,transform; } .reveal.in, .reveal.revealed, .reveal.visible, .reveal.is-visible, .reveal.in-view{opacity:1;transform:none} /* 落位后释放合成层（motion-v3-spec 第 2 步尾行）：避免长列表常驻 will-change */ .reveal.in,.reveal.revealed,.reveal.visible,.reveal.is-visible,.reveal.in-view{will-change:auto} /* 阶梯延迟只在「入场期间」生效：app.js initReveal 给节点打 data-rv，落位 1.4s 后移除，避免残留 transition-delay 拖慢后续 hover 交互。 */ .reveal[data-rv]{transition-delay:calc(var(--reveal-i,0) * var(--stagger))} /* ── §v3-3 标题揭幕（motion-v3-spec 第 3 步） ────────────────────────────── 真实标题类经 grep 确认：.section-title（styles.css:241，app.js 各板块注入）与 .res-title（styles.css:1653，资源库页头）。站点不存在 .sec-title 实体节点（brand.css:239 仅历史样式，无引用），故按真实类名落笔。安全边界：只在被入场管线接管（data-rv）的容器内收起，且 .in 到达即展开，故不会产生「标题永久不显示」；揭示结束后 data-rv 移除、clip-path 回落 none，标题下方的金色装饰条（styles.css:243 ::after，bottom:-8px）不会被永久裁掉。 */ .reveal[data-rv] .section-title, .reveal[data-rv].section-title, .reveal[data-rv] .res-title, .reveal[data-rv].res-title{ clip-path:inset(0 0 108% 0); transform:translateY(10px); transition:clip-path 1s var(--ease-out),transform 1s var(--ease-out); transition-delay:calc(.06s + var(--reveal-i,0) * var(--stagger)); } .reveal.in[data-rv] .section-title, .reveal.in[data-rv].section-title, .reveal.in[data-rv] .res-title, .reveal.in[data-rv].res-title{clip-path:inset(0 0 -8% 0);transform:none} /* ── §v3-4 图片揭幕（motion-v3-spec 第 4 步） ────────────────────────────── 真实结构经 grep：#projectsGrid > .work-card > figure.wc-media > img （brand.css:995-1002，原有 hover 放大 scale(1.05) + brightness）。三态合并为「入场 1.06 → 落位 1 → 悬停 1.05」，并把悬停规则按更高特异性重写，防止被 .in[data-rv] 态的 transform:scale(1) 顶掉。 */ .works-grid .wc-media img{ clip-path:inset(0 0 0 0); transition:clip-path 1.05s var(--ease-out),transform .8s var(--ease-out),filter .6s var(--ease-out); } .reveal[data-rv] .works-grid .wc-media img{clip-path:inset(0 0 14% 0);transform:scale(1.06)} .reveal.in[data-rv] .works-grid .wc-media img{clip-path:inset(0 0 0 0);transform:scale(1)} .reveal.in[data-rv] .works-grid .work-card:hover .wc-media img{ transform:scale(1.05);filter:brightness(1.05) saturate(1.04); } /* ── §v3-5 字体切换过渡（motion-v3-spec 第 5 步） ───────────────────────── app.js applyFontCombo() 切字体组合时给 html + body 挂 .font-anim（600ms）。本站 webfont 为静态字重（无 wght 可变轴），font-variation-settings 会被浏览器忽略 → 过渡自然降级为「无位移」，不会造成标题跳字或消失；若日后接入可变字体，该过渡即自动生效。 */ html.font-anim,body.font-anim{transition:opacity .3s ease} body.font-anim{opacity:.97} html.font-anim .section-title,html.font-anim .res-title,html.font-anim .hero-title, body.font-anim .section-title,body.font-anim .res-title,body.font-anim .hero-title{ transition:font-variation-settings .6s var(--ease-out); font-variation-settings:'wght' 620; } /* ── §v3-6 顶部滚动进度金线（motion-v3-spec 第 6 步） ────────────────────── 经 grep 核实：原实现是「容器自身吃宽度」——styles.css:1073 .scroll-progress{width:0;background:var(--accent);z-index:10000}，另有 styles.css:1312 流光渐变、2154/2331 的旧 #scrollProgress 节点（无 JS 写入）。 v3 改为「容器满宽 + 内层吃宽度」：index.html 的 .scroll-progress 已补，app.js 两处写入（initScrollProgress / 阅读进度监听）同步改指内层。因此容器必须显式 width:auto + background:none 覆盖 width:0 的旧声明。 */ .scroll-progress{ position:fixed;top:0;left:0;right:0; width:auto;height:2px; background:none;animation:none; z-index:9000;pointer-events:none; } .scroll-progress > i{ display:block;height:100%;width:0; background:linear-gradient(90deg,transparent,var(--accent)); opacity:.8;transition:width .12s linear; } html[data-theme="light"] .scroll-progress > i{opacity:.65} /* ── §v3-7 深 / 浅「呼吸」环境光（theme-v3-spec 第 3 步） ─────────────────── index.html 的 .theme-breath 节点置于两张背景画布（#bgCanvas / #glowCanvas）之后、#hero3dVignette 之前：z-index 仍取规格值 0，但按 DOM 顺序绘制在画布之上，呼吸光才真正可见（若排在画布之前会被 85% 不透明的粒子画布盖掉）。遮挡核对：#bgCanvas 以径向渐变绘制（非整屏不透明块）；正文层 .section / .hero-section / #footer 等统一 position:relative;z-index:1（styles.css:2375），始终高于本层；本层 pointer-events:none、overflow:hidden，不拦截指针也不出滚动条。色值按规格逐字落地（深 dark .055 / .032，浅 light .035）。 */ .theme-breath{ position:fixed;inset:0;z-index:0;overflow:hidden;pointer-events:none; opacity:0;transition:opacity 1.4s ease;will-change:opacity,transform; } html[data-theme="dark"] .theme-breath{ background: radial-gradient(62% 52% at 16% 10%, rgba(176,141,90,.055), transparent 70%), radial-gradient(58% 46% at 84% 80%, rgba(120,104,180,.032), transparent 72%); opacity:1;animation:elioBreath 16s ease-in-out infinite; } html[data-theme="light"] .theme-breath{ background:radial-gradient(64% 54% at 18% 8%, rgba(176,141,90,.035), transparent 72%); opacity:1;animation:elioBreath 20s ease-in-out infinite; } @keyframes elioBreath{ 0%,100%{opacity:.55;transform:scale(1)} 50%{opacity:1;transform:scale(1.05)} } @media (prefers-reduced-motion:reduce){.theme-breath{animation:none !important}} /* ── §v3-8 空间风格皮肤（theme-v3-spec 第 2 步 · 核心） ──────────────────── 唯一入口 html[data-skin]，与 html[data-theme] / html[data-accent] 三层叠加；切换由 app.js 完成（applySkin / pfTickSkinAuto，排班见规格 4.1），不写内联样式。本层只覆盖色彩令牌，不触碰字号 / 间距 / 动效 / 结构。规则共 10 组 = 5 皮肤 × 深 / 浅两态： · 4 个特殊皮肤（侘寂 / 中古 / 极简 / 奶油）按规格色板逐字落地，含完整语义令牌，并按规格「skin≠elio 时以本段为准」接管 --accent（即覆盖 data-accent 配色）； · elio（原生金）2 组仅回填与基础层同值的中性色 / 线条，**不接管 --accent**，故规格「skin=elio（或未设置）时保持原有『主题 × 强调色』体系」100% 成立（选「原生金」= 回到品牌 5 强调色，视觉与未设 data-skin 完全一致）。 */ /* 00 原生金 ELIO · 基线回填（值 = tokens.css 基础层 2.x / 3.x，等价零覆盖） */ html[data-skin="elio"][data-theme="dark"]{ --bg-base:#0A0A0A;--bg-base-alt:#0A0A0A;--bg-surface:#111110;--bg-surface-2:#161513;--bg-surface-3:#1D1B18; --line:rgba(237,234,228,.12);--line-soft:rgba(237,234,228,.07);--line-strong:rgba(237,234,228,.22); } html[data-skin="elio"][data-theme="light"]{ --bg-base:#FFFDFA;--bg-base-alt:#FBF8F3;--bg-surface:#FFFFFF;--bg-surface-2:#F5F1EA;--bg-surface-3:#EFEAE1; --line:rgba(43,43,43,.10);--line-soft:rgba(43,43,43,.055);--line-strong:rgba(43,43,43,.20); } /* 01 侘寂 · WABI-SABI：微水泥灰褐、稻草、旧木 */ html[data-skin="wabi"][data-theme="light"]{ --bg-base:#EDE8E0;--bg-base-alt:#E7E1D8; --bg-surface:#F6F2EB;--bg-surface-2:#FAF7F1;--bg-surface-3:#FFFCF7; --bg-glass:rgba(246,242,235,.82);--bg-menu:rgba(250,247,241,.98);--bg-wash:rgba(56,51,44,.05); --text-primary:#38332C;--text-secondary:#5F584E;--text-muted:#847C71;--text-ghost:#A69D91; --text-strong:#26221C;--text-on-accent:#FFFCF7;--text-faint:#A69D91; --line:rgba(56,51,44,.14);--line-soft:rgba(56,51,44,.08);--line-strong:rgba(56,51,44,.26); --accent:#8A7454;--accent-hover:#A08A66;--accent-soft:rgba(138,116,84,.12);--accent-hue:38;--accent-on:#FFFCF7; } html[data-skin="wabi"][data-theme="dark"]{ --bg-base:#14120F;--bg-base-alt:#14120F; --bg-surface:#1B1815;--bg-surface-2:#211E1A;--bg-surface-3:#282420; --bg-glass:rgba(20,18,15,.82);--bg-menu:rgba(27,24,21,.98);--bg-wash:rgba(223,216,205,.06); --text-primary:#DFD8CD;--text-secondary:#9C9488;--text-muted:#736B60;--text-ghost:#514A42; --text-strong:#F0EAE0;--text-on-accent:#14120F;--text-faint:#736B60; --line:rgba(223,216,205,.13);--line-soft:rgba(223,216,205,.07);--line-strong:rgba(223,216,205,.24); --accent:#A8916C;--accent-hover:#C0A883;--accent-soft:rgba(168,145,108,.15);--accent-hue:38;--accent-on:#14120F; } /* 02 中古 · MID-CENTURY：胡桃木、砖橙、芥末 */ html[data-skin="midcentury"][data-theme="light"]{ --bg-base:#F5F0E7;--bg-base-alt:#EFE9DF; --bg-surface:#FFFDF9;--bg-surface-2:#FFFEFA;--bg-surface-3:#FFFFFF; --bg-glass:rgba(255,253,249,.82);--bg-menu:rgba(255,254,250,.98);--bg-wash:rgba(44,32,24,.05); --text-primary:#2C2018;--text-secondary:#5C4A3A;--text-muted:#86705B;--text-ghost:#A8957F; --text-strong:#1D140E;--text-on-accent:#FFFDF9;--text-faint:#A8957F; --line:rgba(44,32,24,.14);--line-soft:rgba(44,32,24,.08);--line-strong:rgba(44,32,24,.26); --accent:#B4663A;--accent-hover:#C87E4F;--accent-soft:rgba(180,102,58,.12);--accent-hue:20;--accent-on:#FFFDF9; } html[data-skin="midcentury"][data-theme="dark"]{ --bg-base:#191410;--bg-base-alt:#191410; --bg-surface:#211A14;--bg-surface-2:#281F18;--bg-surface-3:#30251C; --bg-glass:rgba(25,20,16,.82);--bg-menu:rgba(33,26,20,.98);--bg-wash:rgba(232,220,203,.06); --text-primary:#E8DCCB;--text-secondary:#A8947C;--text-muted:#7D6B57;--text-ghost:#5A4C3D; --text-strong:#F5EBDA;--text-on-accent:#191410;--text-faint:#7D6B57; --line:rgba(232,220,203,.13);--line-soft:rgba(232,220,203,.07);--line-strong:rgba(232,220,203,.24); --accent:#D08A4F;--accent-hover:#E3A26A;--accent-soft:rgba(208,138,79,.15);--accent-hue:26;--accent-on:#191410; } /* 03 极简 · MINIMAL：纯白、冷灰、墨黑 */ html[data-skin="minimal"][data-theme="light"]{ --bg-base:#FFFFFF;--bg-base-alt:#FCFCFC; --bg-surface:#FFFFFF;--bg-surface-2:#FAFAFA;--bg-surface-3:#F5F5F5; --bg-glass:rgba(255,255,255,.82);--bg-menu:rgba(255,255,255,.98);--bg-wash:rgba(0,0,0,.04); --text-primary:#101010;--text-secondary:#565656;--text-muted:#7C7C7C;--text-ghost:#A8A8A8; --text-strong:#000000;--text-on-accent:#FFFFFF;--text-faint:#A8A8A8; --line:rgba(0,0,0,.10);--line-soft:rgba(0,0,0,.05);--line-strong:rgba(0,0,0,.20); --accent:#1C1C1C;--accent-hover:#3A3A3A;--accent-soft:rgba(0,0,0,.06);--accent-hue:0;--accent-on:#FFFFFF; } html[data-skin="minimal"][data-theme="dark"]{ --bg-base:#0D0D0D;--bg-base-alt:#0D0D0D; --bg-surface:#141414;--bg-surface-2:#1A1A1A;--bg-surface-3:#202020; --bg-glass:rgba(13,13,13,.82);--bg-menu:rgba(20,20,20,.98);--bg-wash:rgba(240,240,240,.06); --text-primary:#F0F0F0;--text-secondary:#A0A0A0;--text-muted:#787878;--text-ghost:#555555; --text-strong:#FFFFFF;--text-on-accent:#0D0D0D;--text-faint:#787878; --line:rgba(240,240,240,.12);--line-soft:rgba(240,240,240,.06);--line-strong:rgba(240,240,240,.22); --accent:#D8D8D8;--accent-hover:#F0F0F0;--accent-soft:rgba(240,240,240,.10);--accent-hue:0;--accent-on:#0D0D0D; } /* 04 奶油 · CREAM：纸感暖白、淡金 */ html[data-skin="cream"][data-theme="light"]{ --bg-base:#FBF7F0;--bg-base-alt:#F6F1E8; --bg-surface:#FFFFFF;--bg-surface-2:#FFFDFA;--bg-surface-3:#FFFFFF; --bg-glass:rgba(255,255,255,.82);--bg-menu:rgba(255,253,250,.98);--bg-wash:rgba(51,48,43,.04); --text-primary:#33302B;--text-secondary:#645F55;--text-muted:#8C857A;--text-ghost:#B0A89B; --text-strong:#24211C;--text-on-accent:#FFFFFF;--text-faint:#B0A89B; --line:rgba(51,48,43,.12);--line-soft:rgba(51,48,43,.07);--line-strong:rgba(51,48,43,.22); --accent:#C4A06A;--accent-hover:#D6B482;--accent-soft:rgba(196,160,106,.12);--accent-hue:36;--accent-on:#FFFFFF; } html[data-skin="cream"][data-theme="dark"]{ --bg-base:#17140F;--bg-base-alt:#17140F; --bg-surface:#1F1B16;--bg-surface-2:#26211B;--bg-surface-3:#2E2822; --bg-glass:rgba(23,20,15,.82);--bg-menu:rgba(31,27,22,.98);--bg-wash:rgba(237,228,214,.06); --text-primary:#EDE4D6;--text-secondary:#AFA391;--text-muted:#857A6A;--text-ghost:#5E5549; --text-strong:#FAF3E7;--text-on-accent:#17140F;--text-faint:#857A6A; --line:rgba(237,228,214,.13);--line-soft:rgba(237,228,214,.07);--line-strong:rgba(237,228,214,.24); --accent:#D4B483;--accent-hover:#E6CA9E;--accent-soft:rgba(212,180,131,.15);--accent-hue:36;--accent-on:#17140F; } /* 皮肤切换过渡（规格第 2 步尾段）：令牌驱动的 0.55s 颜色统一渐变，避免生硬跳色； .skin-anim 由 app.js applySkin 在切换瞬间挂上、700ms 后摘除（首帧不挂，避免初载整站过渡）。 */ html.skin-anim,html.skin-anim body, html.skin-anim .section,html.skin-anim .bg-cell,html.skin-anim .works-grid, html.skin-anim .card,html.skin-anim header,html.skin-anim footer{ transition:background-color .55s var(--ease-out),color .55s var(--ease-out), border-color .55s var(--ease-out); } @media (prefers-reduced-motion:reduce){ html.skin-anim,html.skin-anim body,html.skin-anim .section,html.skin-anim .bg-cell, html.skin-anim .works-grid,html.skin-anim .card,html.skin-anim header,html.skin-anim footer{ transition:none !important; } } /* v3-AUTO-APPEND-END */