/* ============================================================================ * tokens.css · 李政德 Leezingdak 影视作品集 · 设计变量唯一来源 * ---------------------------------------------------------------------------- * 本文件是原型（prototype/）与 WordPress 落地包（wordpress/leezingdak-child/） * 共用的唯一设计变量来源。两份代码都只允许 @import 或 enqueue 本文件， * 不得各自复制一份变量，不得在别处重新定义同名变量。 * * 规则（违反即为不合格交付）： * 1. 变量名以 `--lzd-` 开头，一经冻结不许改名、不许删、不许改语义。 * 2. 本文件只声明变量与注释，不写任何组件样式、选择器规则、媒体查询外的属性。 * 3. 新增变量只能追加在对应分组末尾，并在组内补一行中文注释说明用途。 * 4. 媒体查询里必须写字面数值，CSS 变量不能出现在 @media 条件中。 * 因此断点数值以 `--lzd-bp-*` 声明仅作文档与 JS 读取用途，见文件末尾分组。 * 5. 对比度标注格式为「配 XX 底 N.NN:1」，全部为实测值，来源见 * docs/design-spec.md 第 1 节。任何改色都必须重新实测并同步该表。 * * 消费方：prototype/assets/css/site.css、leezingdak-child/style.css * 权威规范：docs/design-spec.md * * ============================================================================ * 重要：本文件同时承担「新旧作品页视觉一致性」的令牌层（site-spec §3.5 第 1 层） * ---------------------------------------------------------------------------- * 25 个旧作品页由 Elementor 渲染，新作品页由子主题 PHP 模板渲染，两套 DOM 不同。 * 让两侧收敛到同一套视觉，靠两个手段： * ① Elementor「站点设置 → 全局颜色 / 全局字体」（写入 elementor-kit-7）： * 改一次 Kit，25 个旧页的颜色与字体同步改变，且不编辑任何页面数据。 * ② 按 widget 类型的容器级 CSS 覆盖（背景、间距、圆角等）。 * * 因此本文件里每个变量都带一个覆盖范围标记，取值只有两种： * [Kit] 能一对一映射到 Elementor 全局设置，旧页可通过 Kit 同步。 * [新页] 映射不到 Elementor 全局设置（免费版只有 4 个颜色槽与 4 个字体槽）， * 旧页只能靠类型级 CSS 覆盖，或根本无法同步。T5 的覆盖规则请按此标记分层。 * * 映射总额度（Elementor 3.18.3 免费版）：颜色 4 槽、字体 4 槽。 * 具体映射表见 docs/design-spec.md 第 11 节，不要在这里重新分配。 * * 硬约束（site-spec 风险 11 / §9.3）：子主题只允许提供 page-templates/*.php 与 * taxonomy-work_type.php。禁止提供 front-page.php / index.php / page.php / * single.php，否则会顶掉 Elementor 对首页与 25 个旧页的渲染。 * ========================================================================== */ :root { /* -------------------------------------------------------------------------- * 1. 中性色阶 · 影院黑场底色 [新页] * 层级靠底色递进与 1px 发丝线区分，全站不使用 box-shadow（黑底上投影不可见） * Elementor 全局颜色没有「背景」槽位，页面底与区块底无法通过 Kit 同步。 * 旧页的黑底只能靠 body.elementor-page 的容器级 CSS 覆盖，T5 照 §11.3 处理。 * ------------------------------------------------------------------------ */ --lzd-black-000: #08080A; /* 页面底 · 全站基础背景 */ --lzd-black-010: #0C0C0F; /* 功能性面板底 · /studio 表单容器 */ --lzd-black-020: #141417; /* 卡片占位底 · 输入框底 · 图片未加载时的色块 */ --lzd-black-030: #1A1A1E; /* 抬升面 · 悬浮面板、下拉列表 */ --lzd-line-100: #2A2A30; /* 发丝分隔线（纯装饰，不承担信息） */ --lzd-line-200: #3A3A42; /* 强分隔线（表格行、字段组分隔） */ /* -------------------------------------------------------------------------- * 2. 文字色阶 · 三档 + 占位 + 禁用 [Kit: primary / 新页: 其余] * 配底 #08080A 实测对比度见行末标注 * primary / secondary 映射到 Elementor 全局颜色的 Text / Secondary 槽， * 旧页正文文字色可通过 Kit 同步；tertiary / placeholder / disabled 只有 4 槽 * 额度不够用，标 [新页]，T5 视旧页实际情况决定是否补容器级覆盖。 * ------------------------------------------------------------------------ */ --lzd-text-primary: #F2F2F4; /* 正文 · 标题 · 字段值 配 #08080A 17.90:1 */ --lzd-text-secondary: #A8A8B0; /* 次级说明 · 字段标签 · 导航 配 #08080A 8.47:1 */ --lzd-text-tertiary: #7A7A84; /* 角标年份 · 图注 · 页脚备案 配 #08080A 4.71:1 */ --lzd-text-placeholder: #8A8A94; /* 占位文字 配 #141417 5.38:1 · 配 #08080A 5.85:1 */ --lzd-text-disabled: #5C5C66; /* 禁用控件文字（WCAG 1.4.3 豁免） */ --lzd-white: #FFFFFF; /* 主按钮悬停底 · 纯白备用 */ /* -------------------------------------------------------------------------- * 3. 强调色 · 琥珀 [Kit: 主色槽] * 只用于三处：类型角标、焦点环、筛选条选中下划线。不得用于大面积填充。 * 主按钮用白底黑字承载，理由见 docs/design-spec.md 第 4.8 节与「关键取舍」。 * 映射到 Elementor 全局颜色的 Primary 槽，旧页链接与强调元素随之转琥珀。 * ------------------------------------------------------------------------ */ --lzd-accent: #D9A05B; /* 配 #08080A 8.70:1 · 配 #141417 7.99:1 */ --lzd-accent-dim: rgba(217, 160, 91, 0.40); /* 角标描边 · 装饰性，不承担信息 */ --lzd-accent-wash: rgba(217, 160, 91, 0.06); /* 拖拽到上传区时的底色 */ --lzd-on-accent: #08080A; /* 强调色填充时的文字色 */ /* -------------------------------------------------------------------------- * 4. 语义色 · 表单与结果反馈 [新页] * 旧页没有表单与结果态，无需同步。 * ------------------------------------------------------------------------ */ --lzd-success: #5FB878; /* 配 #08080A 8.21:1 */ --lzd-warning: #E8B44A; /* 配 #08080A 10.54:1 */ --lzd-danger: #F06D6D; /* 配 #08080A 6.78:1 · 配错误底 #2A1D20 5.49:1 */ --lzd-info: #6FA8DC; /* 配 #08080A 7.92:1 */ --lzd-success-wash: rgba(95, 184, 120, 0.10); --lzd-warning-wash: rgba(232, 180, 74, 0.10); --lzd-danger-wash: rgba(240, 109, 109, 0.10); --lzd-info-wash: rgba(111, 168, 220, 0.10); /* -------------------------------------------------------------------------- * 5. 遮罩与半透明叠加层 [新页] * ------------------------------------------------------------------------ */ --lzd-scrim-ui: rgba(8, 8, 10, 0.86); /* 卡片角标底 · 保证图再亮也不掉对比度 */ --lzd-scrim-bar: rgba(8, 8, 10, 0.92); /* 顶栏 · 筛选条 · 移动常驻 CTA 的毛玻璃底 */ --lzd-scrim-panel: rgba(8, 8, 10, 0.98); /* 移动端全屏导航遮罩 */ --lzd-scrim-hero-top: rgba(8, 8, 10, 0.55); /* hero 渐变遮罩 · 顶 */ --lzd-scrim-hero-mid: rgba(8, 8, 10, 0.30); /* hero 渐变遮罩 · 中 */ --lzd-scrim-hero-bottom: rgba(8, 8, 10, 0.92); /* hero 渐变遮罩 · 底 */ --lzd-scrim-poster: rgba(8, 8, 10, 0.42); /* 播放按钮底盘 */ --lzd-scrim-play-hover: rgba(8, 8, 10, 0.56); /* 播放按钮底盘 · 悬停加深（0.42 → 0.56） */ /* 交互叠加层（悬停底色、选中底、装饰描边、正文下划线） */ --lzd-overlay-hover: rgba(242, 242, 244, 0.06); --lzd-overlay-track: rgba(242, 242, 244, 0.10); /* 装饰性发丝线 · 顶栏底线、页脚顶线 */ --lzd-overlay-border: rgba(242, 242, 244, 0.24); /* 上传区虚线框等弱描边 */ --lzd-overlay-border-strong: rgba(242, 242, 244, 0.32); --lzd-overlay-border-bright: rgba(242, 242, 244, 0.60); /* 播放按钮描边 · /studio 上传图标描边（两处共用同一值） */ --lzd-panel-stroke: rgba(242, 242, 244, 0.08); /* /studio 表单容器 1px 描边 · 纯装饰，不承担信息 */ --lzd-underline: rgba(168, 168, 176, 0.40); /* 文字按钮下划线 */ --lzd-underline-hover: rgba(242, 242, 244, 0.90); /* 文字按钮悬停下划线 */ /* -------------------------------------------------------------------------- * 6. 承担信息的边框 [新页] * WCAG 1.4.11 要求界面控件边界对相邻底色 ≥3:1。输入框底 #141417 配页面底 * #08080A 只有 1.09:1，边界识别全靠这条描边，因此它必须比装饰发丝线亮得多。 * --lzd-border-field 配 #08080A 实测 3.49:1。 * 不得为了「更细腻」把它调淡，调淡即失去控件可辨识性。 * ------------------------------------------------------------------------ */ --lzd-border-field: rgba(242, 242, 244, 0.40); --lzd-border-field-hover: rgba(242, 242, 244, 0.56); /* -------------------------------------------------------------------------- * 7. 字体栈 [Kit: 全局字体 4 槽的字体族] * 拉丁字母与数字走 Inter / Helvetica Neue 的细体，中文回落到思源黑体、PingFang SC。 * 顺序不可调换：拉丁字体放前面才能让年份、客户英文名走细体字形。 * 映射到 Elementor「站点设置 → 全局字体」四个槽的字体族字段，旧页字体随之统一。 * ------------------------------------------------------------------------ */ --lzd-font-sans: "Inter", "Helvetica Neue", Helvetica, "Source Han Sans SC", "Noto Sans SC", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; /* -------------------------------------------------------------------------- * 8. 字号阶梯（桌面档，1440px 及以上） [Kit: 仅下面标注的 4 档可映射] * 可读性底线：字号下限 12px；12–15px 区间字重不得低于 400； * 200 字重仅允许 ≥32px；300 字重仅允许 ≥18px。 * * Elementor 全局字体只有 4 个槽，因此只有 4 档字阶能同步到旧页。分配如下： * 全局字体 Primary -> --lzd-fs-page-title (44px) 作品页 H1 * 全局字体 Secondary-> --lzd-fs-section (28px) 区块标题 * 全局字体 Text -> --lzd-fs-lead (18px) 简介长文 * 全局字体 Accent -> --lzd-fs-label (14px) 导演行 / 字段值 * 其余各档标 [新页]：--lzd-fs-hero / --lzd-fs-card / --lzd-fs-meta / --lzd-fs-xs。 * 其中 --lzd-fs-xs（12px，上线年份标记与字段标签）在旧页无法通过 Kit 同步， * 这是新旧页最可能出现的一处字阶差异，T5 需按 §11.3 用容器级 CSS 兜。 * ------------------------------------------------------------------------ */ --lzd-fs-hero: 64px; /* 首页片头 H1 · 200 字重 */ --lzd-fs-page-title: 44px; /* 二级页 H1 · 200 字重 */ --lzd-fs-section: 28px; /* 区块标题 H2 · 300 字重 */ --lzd-fs-lead: 18px; /* 导语 · 简介长文 · 300 字重 */ --lzd-fs-body: 16px; /* 正文默认 · 300 字重 */ --lzd-fs-card: 15px; /* 卡片片名（H3）· 400 字重 */ --lzd-fs-label: 14px; /* 字段标签 · 导航项 · 按钮 · 400 字重 */ --lzd-fs-meta: 13px; /* 窄屏筛选条专用档 · 400 字重 */ --lzd-fs-xs: 12px; /* 角标 · 图注 · 页脚 · 帮助与错误提示 · 400 字重 */ --lzd-fs-min: 12px; /* 全站字号下限，任何组件不得低于此值 */ /* 行高 */ --lzd-lh-hero: 1.12; --lzd-lh-title: 1.18; --lzd-lh-section: 1.30; --lzd-lh-body: 1.85; --lzd-lh-long: 1.90; /* 二级页简介长文 */ --lzd-lh-tight: 1.50; /* 12px 一档 */ /* 字重 */ --lzd-fw-thin: 200; --lzd-fw-light: 300; --lzd-fw-regular: 400; --lzd-fw-medium: 500; /* 字距（em） */ --lzd-ls-hero: 0.08em; --lzd-ls-title: 0.06em; --lzd-ls-section: 0.10em; --lzd-ls-body: 0.02em; --lzd-ls-label: 0.04em; --lzd-ls-meta: 0.14em; /* 12px 全大写英文与小标签用这一档 */ --lzd-ls-wordmark: 0.06em; /* -------------------------------------------------------------------------- * 9. 间距刻度（4 基数，禁止使用刻度外的值） [新页] * ------------------------------------------------------------------------ */ --lzd-space-01: 4px; --lzd-space-02: 8px; --lzd-space-03: 12px; --lzd-space-04: 16px; --lzd-space-05: 24px; --lzd-space-06: 32px; --lzd-space-07: 48px; --lzd-space-08: 64px; --lzd-space-09: 96px; --lzd-space-10: 128px; --lzd-space-11: 160px; /* -------------------------------------------------------------------------- * 10. 布局骨架 [新页（容器宽度需容器级 CSS 覆盖）] * ------------------------------------------------------------------------ */ --lzd-container: 1440px; /* 栅格 · 顶栏 · 页脚 最大宽度 */ --lzd-container-mid: 1120px; /* 关于区块 · 筛选条容器 */ --lzd-container-narrow: 720px; /* 二级页简介长文 · 表单容器 */ /* 条件式桌面容器宽度。25 件旧封面目前只渲染到 768px 派生图， 若媒体库里没有更大的原图，1440px 容器的 464px 槽位在 DPR2 下需 928px， 超过 768px 会让卡片发虚。改用下面的值：3 列槽位 352px， 经 1.06 倍悬停推近后在 DPR2 下需 352 × 1.06 × 2 = 746px ≤ 768px，可满足。 原图上限需先核实，核实结论与切换规则见 docs/design-spec.md 第 10.4 节。 */ --lzd-container-capped: 1104px; --lzd-page-x: 32px; /* 页面左右安全边距 */ --lzd-grid-gap-x: 24px; /* 栅格列间距 */ --lzd-grid-gap-y: 24px; /* 栅格行间距 */ --lzd-cols: 3; /* 栅格列数：3 / 2 / 1 */ --lzd-filter-gap: 32px; /* 筛选条项间距：32 / 16 / 12 三档 */ /* 错落偏移：多列时给第 2、3 列各加一个顶部偏移，形成对角节奏。 这是「瀑布流错落感」的唯一实现手段，不靠图片比例差异。 若要回到整齐网格，把三个值全部设为 0px 即可。 */ --lzd-stagger-2: 44px; --lzd-stagger-3: 88px; /* 纵向节奏 */ --lzd-section-y: 128px; /* 区块之间 */ --lzd-block-y: 48px; /* 区块内小标题到内容 */ --lzd-hero-min-h: 100svh; /* 首屏高度，svh 避免移动端地址栏跳动 */ --lzd-page-hero-min-h: 76vh; /* 二级页头图高度 */ --lzd-nav-h: 72px; --lzd-cta-bar-h: 64px; /* 移动端常驻 CTA 条高度 */ --lzd-cta-bar-safe: 88px; /* 页脚需预留的底部空白，= 64px + 安全区余量 */ /* -------------------------------------------------------------------------- * 11. 圆角 · 控件尺寸 · 触控目标 [新页] * 影院黑场用近直角，2px 是本设计体系的唯一直角圆角值。 * ------------------------------------------------------------------------ */ --lzd-radius-1: 2px; --lzd-radius-pill: 999px; /* 仅播放按钮使用 */ --lzd-control-h: 48px; /* 单行输入框 · 按钮高度 */ --lzd-textarea-min-h: 120px; --lzd-touch-min: 44px; /* 触控目标下限，任何可点元素不得小于此值 */ --lzd-play-size: 72px; /* 播放按钮直径 */ --lzd-qr-size: 160px; /* 微信二维码展示边长 */ --lzd-upload-min-h: 200px; /* /studio 剧照上传区最小高度 */ /* -------------------------------------------------------------------------- * 12. 焦点态 [新页] * 描边用 2px 实线，不用 outline: none。焦点环必须比任何发丝线都醒目。 * ------------------------------------------------------------------------ */ --lzd-focus-width: 2px; --lzd-focus-offset: 2px; --lzd-focus-color: var(--lzd-accent); /* -------------------------------------------------------------------------- * 13. 动效时长与缓动 [新页] * 全站只有这 8 个时长值，任何新动效必须复用其中之一。 * --lzd-dur-spin 为提交中旋转环新增的一档，不得与 --lzd-dur-drift 混用： * 前者是循环动画的单圈时长，后者是 hero 底图缓推的总时长，语义无关。 * ------------------------------------------------------------------------ */ --lzd-dur-instant: 120ms; /* 按下反馈 */ --lzd-dur-fast: 180ms; /* 筛选切换、颜色过渡 */ --lzd-dur-base: 240ms; /* 图片淡入、提示出现、顶栏变色 */ --lzd-dur-panel: 280ms; /* 移动端全屏导航展开 */ --lzd-dur-slow: 320ms; /* 播放器容器淡入、追加卡片入场 */ --lzd-dur-hover: 400ms; /* 卡片悬停推近，架构侧冻结指标 */ --lzd-dur-drift: 6000ms; /* hero 底图极缓推近 */ --lzd-dur-spin: 800ms; /* 提交中旋转环，单圈时长，无限循环 */ --lzd-ease-out: cubic-bezier(0.22, 0.61, 0.36, 1); --lzd-ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); --lzd-ease-linear: linear; --lzd-scale-hover: 1.06; /* 悬停推近上限，架构侧冻结指标 */ --lzd-scale-drift: 1.04; /* hero 底图缓慢推近上限 */ /* -------------------------------------------------------------------------- * 14. 媒体断点（仅供文档与 JS 读取，媒体查询里必须写字面值） [新页] * ------------------------------------------------------------------------ */ --lzd-bp-sm: 768px; /* 及以下：单列，常驻 CTA 出现 */ --lzd-bp-md: 1024px; /* 及以下：两列 */ --lzd-bp-lg: 1440px; /* 及以上：三列 */ /* 极端窄屏档，只影响筛选条与字号，不新增布局形态 */ --lzd-bp-xs: 360px; /* -------------------------------------------------------------------------- * 15. 可覆写别名 [新页] * 只做语义别名，不含任何样式规则。换主题或换强调策略时只改这一组。 * 例：把主按钮从「白底黑字」改成「琥珀填充」，只改 --lzd-btn-primary-bg 与 * --lzd-btn-primary-fg 两行即可，其余组件不动。 * ------------------------------------------------------------------------ */ --lzd-btn-primary-bg: var(--lzd-text-primary); --lzd-btn-primary-fg: var(--lzd-black-000); --lzd-btn-primary-bg-active: #DCDCE0; /* 主按钮按下底色（比常态暗一档） */ --lzd-btn-secondary-border: var(--lzd-overlay-border-strong); --lzd-btn-secondary-bg-active: rgba(242, 242, 244, 0.12); /* 次按钮按下底色 */ --lzd-card-surface: var(--lzd-black-020); /* 卡片图片占位底 */ --lzd-field-surface: var(--lzd-black-020); /* 输入框底 */ --lzd-panel-surface: var(--lzd-black-010); /* /studio 表单容器底 */ /* 旧页播放容器的海报背景图地址。这是一个「由模板按当前页面注入」的占位变量： 子主题模板在输出该页时把它改成该片主剧照的 URL（经 esc_url 处理）， 供 4.6.2 的 body.elementor-page .elementor-widget-html 规则使用。 若未注入或注入失败，本次声明保证它退化为 none，容器只显示 --lzd-black-020 深色底， 不会出现背景图缺失的破图或白闪。 */ --lzd-poster-url: none; /* ------------------------------------------------------------------------ * 追加：design-spec 4.6 / 4.8 细环与覆盖色（ Rev.4.2 追加，不改动原有变量） * ---------------------------------------------------------------------- */ --lzd-dur-spin: 800ms; /* 提交细环与播放器载入环 */ --lzd-scrim-play-hover: color-mix(in srgb, var(--lzd-black-000) 56%, transparent); /* 播放按钮悬停底盘 */ --lzd-overlay-border-bright: color-mix(in srgb, var(--lzd-text-primary) 60%, transparent); /* 播放按钮描边、上传图标 */ --lzd-panel-stroke: color-mix(in srgb, var(--lzd-text-primary) 8%, transparent); /* /studio 表单容器描边 */ --lzd-underline-hover: color-mix(in srgb, var(--lzd-text-primary) 90%, transparent); /* 文字按钮悬停下划线 */ --lzd-btn-primary-bg-active: color-mix(in srgb, var(--lzd-white) 86%, var(--lzd-black-000)); /* 主按钮按下底色 */ --lzd-btn-secondary-bg-active: color-mix(in srgb, var(--lzd-text-primary) 12%, transparent); /* 次按钮按下底色 */ } /* ============================================================================ * 响应式变量覆盖 * 只允许覆盖数值，不得在此新增语义不同的变量。 * ========================================================================== */ /* 1439px 及以下：两列，容器收到 1120px，纵向节奏收一档 */ @media (max-width: 1439px) { :root { --lzd-container: 1120px; --lzd-cols: 2; --lzd-section-y: 96px; --lzd-fs-page-title: 38px; --lzd-page-hero-min-h: 68vh; } } /* 1023px 及以下：仍是两列，容器改为满宽减安全边距 */ @media (max-width: 1023px) { :root { --lzd-container: 100%; --lzd-page-x: 32px; --lzd-section-y: 88px; } } /* 768px 及以下：单列，导航换为全屏遮罩，常驻 CTA 出现 */ @media (max-width: 768px) { :root { --lzd-cols: 1; --lzd-page-x: 20px; --lzd-grid-gap-x: 0px; --lzd-grid-gap-y: 48px; /* 单列的错落感改为纵向间距，故比多列时更大 */ --lzd-stagger-2: 0px; --lzd-stagger-3: 0px; --lzd-section-y: 64px; --lzd-block-y: 32px; --lzd-nav-h: 56px; --lzd-fs-hero: 32px; --lzd-fs-page-title: 28px; --lzd-fs-section: 22px; --lzd-fs-lead: 17px; --lzd-fs-body: 16px; /* 正文在移动端不缩放，避免行宽与行长失控 */ --lzd-fs-card: 15px; --lzd-fs-label: 14px; --lzd-filter-gap: 16px; /* 6 项加 5 个 16px 间距总宽约 348px，390px 视口留 42px 余量 */ --lzd-page-hero-min-h: 56vh; --lzd-play-size: 56px; --lzd-qr-size: 140px; --lzd-textarea-min-h: 104px; } } /* 360px 及以下：只压缩筛选条，避免出现横向滚动条。 组件侧在 @media (max-width: 360px) 内把筛选条字号切到 --lzd-fs-meta 并引用下面的间距。 */ @media (max-width: 360px) { :root { --lzd-page-x: 16px; --lzd-filter-gap: 12px; /* 13px 字号 + 12px 间距总宽约 312px，320px 视口留 8px 余量 */ } } /* ============================================================================ * 动效降级 * 用户系统开启「减弱动态效果」时，把时长归零并把缩放上限设为 1。 * 组件样式里一律引用这些变量，不要写死 duration，降级才能一处生效。 * ========================================================================== */ @media (prefers-reduced-motion: reduce) { :root { --lzd-dur-instant: 0ms; --lzd-dur-fast: 0ms; --lzd-dur-base: 0ms; --lzd-dur-panel: 0ms; --lzd-dur-slow: 0ms; --lzd-dur-hover: 0ms; --lzd-dur-drift: 0ms; --lzd-scale-hover: 1; --lzd-scale-drift: 1; } }