/* ========================================================================== LUYUN 麓云茶号 · Design Tokens -------------------------------------------------------------------------- 来源：Ardot 设计文件 https://ardot.tencent.com/file/736692081925219 （站点地图「设计基础区」+ 设计系统·组件库 14:2396） 用途：映射到主题 Blocksy / Kadence 的「全局调色板」+「全局字体」， 以及子主题 style.css 的自定义层。 规则：本文件是唯一真相。设计稿上出现过的色值/尺寸/字号，都必须在 这里找得到；这里没有的，不要往页面里写死。 ========================================================================== */ /* -------------------------------------------------------------------------- 1. 颜色 · 基础色（Primitives） —— 直接对应设计稿里的填充值，不做语义命名 -------------------------------------------------------------------------- */ :root { /* 纸与卡 */ --c-paper: #F6F3EC; /* 页面底 · 米白 */ --c-paper-deep: #F1EDE3; /* 输入框禁用底 / 空态图标圆 */ --c-card: #FBF7F1; /* 卡片 / 面板底 · 浅卡 */ --c-card-warm: #F1EADD; /* 空态图标圆底 */ /* 墨与绿 */ --c-ink: #1F3D2B; /* 主文字 / 主按钮底 · 深茶绿 */ --c-ink-footer: #16281D; /* 页脚深一档 */ --c-matcha: #8A9B6E; /* 辅助绿 */ --c-notice-bg: #E6E8D7; /* 免运提示条底（茶绿系浅底） */ /* 琥珀与陶土 */ --c-amber: #B4662A; /* 主强调 · 琥珀 */ --c-amber-soft: #D89B5A; /* 深底上的琥珀（进度条 / 深色背景下的强调） */ --c-clay: #C0563C; /* 次强调 · 陶土橙（慎用） */ /* 正文灰阶 */ --c-text: #6B6B5E; /* 正文 / 次级标签 */ --c-text-soft: #8A887C; /* 弱文字（分组标签 / 说明） */ --c-text-faint: #A9A79A; /* 更弱（页脚版权 / 占位符） */ --c-text-ghost: #B9B3A2; /* 分隔符 / 支付方式行 */ /* 描边 */ --c-line: #E3DCCB; /* 主 hairline / 卡片描边 */ --c-line-soft: #EFE9DB; /* 次级 hairline / 强调合计下的细线 */ /* 状态 · 错误 */ --c-danger: #B33A2B; --c-danger-bg: #FBF1EE; --c-danger-line: #E8C3B9; /* 状态 · 成功 */ --c-success: #2F6B4A; --c-success-bg: #EDF4EC; --c-success-line: #C9DEC9; /* 状态 · 其他 */ --c-skeleton: #E6DFD0; /* 骨架屏灰 */ --c-disabled: #C9C1AE; /* 禁用按钮底 */ /* 反白文字 */ --c-on-ink: #F6F3EC; /* 深色底 / 深色按钮上的文字 */ --c-on-amber: #FFF8F0; /* 琥珀按钮上的文字 */ } /* -------------------------------------------------------------------------- 2. 颜色 · 语义别名（Semantic） —— 页面只准用这一层，组件改版时只改这里 -------------------------------------------------------------------------- */ :root { --bg-page: var(--c-paper); --bg-surface: var(--c-card); --bg-surface-alt: var(--c-paper-deep); --bg-inverse: var(--c-ink); --bg-inverse-deep: var(--c-ink-footer); --fg-primary: var(--c-ink); --fg-body: var(--c-text); --fg-muted: var(--c-text-soft); --fg-faint: var(--c-text-faint); --fg-accent: var(--c-amber); --fg-accent-inverse: var(--c-amber-soft); --fg-on-inverse: var(--c-on-ink); --border-default: var(--c-line); --border-soft: var(--c-line-soft); --action-primary-bg: var(--c-ink); --action-primary-fg: var(--c-on-ink); --action-primary-bg-hover: #2A4F38; /* ink 提亮 8% */ --action-amber-bg: var(--c-amber); --action-amber-fg: var(--c-on-amber); --action-amber-bg-hover: #C5722F; --action-disabled-bg: var(--c-disabled); --action-disabled-fg: #FBF7F1; --focus-ring: var(--c-amber); } /* -------------------------------------------------------------------------- 3. 字体 —— 三族分工：Fraunces 标题/数字，Inter 正文/界面，Cormorant 眉标 -------------------------------------------------------------------------- */ :root { --font-display: "Fraunces", "Source Serif 4", Georgia, "Songti SC", serif; --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Helvetica Neue", "PingFang SC", Arial, sans-serif; --font-eyebrow: "Cormorant Garamond", "Times New Roman", serif; --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; /* 字号 · 桌面（1440） */ --fs-display-1: 56px; --lh-display-1: 1.06; --fs-display-2: 44px; --lh-display-2: 1.10; --fs-h1: 40px; --lh-h1: 1.15; --fs-h2: 30px; --lh-h2: 1.20; --fs-h3: 22px; --lh-h3: 1.25; --fs-h4: 20px; --lh-h4: 1.30; --fs-card-title:15px; --lh-card-title:1.35; --fs-price-xl: 26px; --lh-price-xl: 1.20; --fs-price-lg: 19px; --lh-price-lg: 1.25; --fs-body-lg: 15px; --lh-body-lg: 25px; --fs-body: 14px; --lh-body: 22px; --fs-body-sm: 13px; --lh-body-sm: 20px; --fs-label: 12px; --lh-label: 19px; --fs-caption: 11px; --lh-caption: 17px; --fs-micro: 10px; --lh-micro: 15px; --fs-eyebrow: 11px; --ls-eyebrow: 2.4px; --fs-eyebrow-sm:10px; --ls-eyebrow-sm:2.2px; --fs-field-label:10px; --ls-field-label:1.2px; --fs-badge: 9px; --ls-badge: 1.2px; /* 字距 */ --ls-tight: -0.01em; --ls-normal: 0; --ls-wide: 0.04em; /* 移动端缩放（375）：标题降一档，正文不动 */ --fs-h1-mobile: 32px; --fs-h2-mobile: 26px; --fs-h3-mobile: 20px; --fs-display-1-mobile: 40px; } /* -------------------------------------------------------------------------- 4. 间距 · 圆角 · 描边 · 抬升 -------------------------------------------------------------------------- */ :root { /* 间距刻度 —— 页面里只准用这八个值 */ --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 72px; /* 复合间距 */ --gutter-desktop: 24px; --gutter-mobile: 16px; --page-margin-desktop: 120px; /* 1440 画布左右边距 */ --page-margin-mobile: 20px; /* 375 画布左右边距 */ --section-rhythm-min: 56px; /* 段间距下限 */ --section-rhythm-max: 96px; /* 段间距上限 */ --card-padding: 18px; --card-padding-lg: 28px; /* 摘要卡 / 面板内边距 */ --field-padding-x: 14px; --field-padding-y: 12px; /* 圆角阶 */ --r-xs: 3px; /* 按钮 / 输入框 / 标签 */ --r-sm: 6px; /* 提示条 / 免运卡 */ --r-md: 8px; /* 卡片 / 图片 / 摘要卡 */ --r-lg: 10px; /* 大面板 */ --r-xl: 12px; --r-2xl: 16px; /* chip / 药丸形标签 */ --r-3xl: 24px; /* 大媒体容器 */ --r-full: 999px; /* 圆形图标底 */ /* 描边 */ --bw-hairline: 1px; --bw-emphasis: 2px; /* 仅用于「强调合计」下方的双线，非 UI 边框 */ --bw-rule: 3px; /* 编辑性引用线，**绝不用于 UI 边框** */ /* 抬升规则：卡片永远不投影 */ --shadow-none: none; --shadow-header: 0 1px 0 var(--c-line-soft); --shadow-drawer: 0 8px 24px rgba(31, 61, 43, 0.10); /* 控件高度 */ --h-btn-l: 52px; --h-btn-m: 50px; --h-btn-inline: 46px; --h-field: 46px; --h-chip: 32px; --h-control: 15px; /* 复选框 / 单选圆直径 */ /* 媒体比例 */ --ratio-card: 4 / 3; --ratio-tile: 360 / 220; --ratio-square: 1 / 1; /* 过渡 */ --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1); --dur-fast: 120ms; --dur-base: 200ms; } /* -------------------------------------------------------------------------- 5. 布局 -------------------------------------------------------------------------- */ :root { --bp-mobile: 375px; --bp-tablet: 768px; --bp-laptop: 1024px; --bp-desktop:1440px; --container: 1200px; /* 桌面内容宽 = 1440 − 120×2 */ --container-narrow: 780px; /* 长文（政策页 / Journal 正文） */ --container-mobile: 335px; /* 375 − 20×2 */ --sidebar-col: 400px; /* 购物车 / 结账右列 */ --two-col-gap: 72px; /* 主列 ↔ 侧列 */ } /* -------------------------------------------------------------------------- 6. 排版工具类 -------------------------------------------------------------------------- */ .lu-display-1 { font-family: var(--font-display); font-weight: var(--fw-regular); font-size: var(--fs-display-1); line-height: var(--lh-display-1); letter-spacing: var(--ls-tight); color: var(--fg-primary); } .lu-display-2 { font-family: var(--font-display); font-weight: var(--fw-regular); font-size: var(--fs-display-2); line-height: var(--lh-display-2); letter-spacing: var(--ls-tight); color: var(--fg-primary); } .lu-h1 { font-family: var(--font-display); font-weight: var(--fw-regular); font-size: var(--fs-h1); line-height: var(--lh-h1); color: var(--fg-primary); } .lu-h2 { font-family: var(--font-display); font-weight: var(--fw-regular); font-size: var(--fs-h2); line-height: var(--lh-h2); color: var(--fg-primary); } .lu-h3 { font-family: var(--font-display); font-weight: var(--fw-regular); font-size: var(--fs-h3); line-height: var(--lh-h3); color: var(--fg-primary); } .lu-h4 { font-family: var(--font-display); font-weight: var(--fw-regular); font-size: var(--fs-h4); line-height: var(--lh-h4); color: var(--fg-primary); } .lu-card-title{ font-family: var(--font-display); font-weight: var(--fw-semibold); font-size: var(--fs-card-title); line-height: var(--lh-card-title); color: var(--fg-primary); } .lu-price-xl { font-family: var(--font-display); font-weight: var(--fw-regular); font-size: var(--fs-price-xl); line-height: var(--lh-price-xl); color: var(--fg-primary); } .lu-price-lg { font-family: var(--font-display); font-weight: var(--fw-semibold); font-size: var(--fs-price-lg); line-height: var(--lh-price-lg); color: var(--fg-primary); } .lu-body-lg { font-family: var(--font-body); font-weight: var(--fw-regular); font-size: var(--fs-body-lg); line-height: var(--lh-body-lg); color: var(--fg-body); } .lu-body { font-family: var(--font-body); font-weight: var(--fw-regular); font-size: var(--fs-body); line-height: var(--lh-body); color: var(--fg-body); } .lu-body-sm { font-family: var(--font-body); font-weight: var(--fw-regular); font-size: var(--fs-body-sm); line-height: var(--lh-body-sm); color: var(--fg-body); } .lu-label { font-family: var(--font-body); font-weight: var(--fw-medium); font-size: var(--fs-label); line-height: var(--lh-label); color: var(--fg-primary); } .lu-caption { font-family: var(--font-body); font-weight: var(--fw-regular); font-size: var(--fs-caption); line-height: var(--lh-caption); color: var(--fg-muted); } .lu-micro { font-family: var(--font-body); font-weight: var(--fw-regular); font-size: var(--fs-micro); line-height: var(--lh-micro); color: var(--fg-faint); } /* 眉标：Cormorant 小字 + 大字距，全大写。品类眉标 / 分区标题 / 元信息用 */ .lu-eyebrow { font-family: var(--font-eyebrow); font-weight: var(--fw-semibold); font-size: var(--fs-eyebrow); letter-spacing: var(--ls-eyebrow); text-transform: uppercase; color: var(--fg-accent); } .lu-eyebrow--sm { font-size: var(--fs-eyebrow-sm); letter-spacing: var(--ls-eyebrow-sm); } .lu-eyebrow--ink { color: var(--fg-primary); } /* 表单字段标签：Inter 10 Medium + 1.2 字距 + 全大写 */ .lu-field-label { font-family: var(--font-body); font-weight: var(--fw-medium); font-size: var(--fs-field-label); letter-spacing: var(--ls-field-label); text-transform: uppercase; color: var(--fg-muted); } /* -------------------------------------------------------------------------- 7. 组件基类（照设计系统·组件库 14:2396 落） -------------------------------------------------------------------------- */ .lu-btn { display: inline-flex; align-items: center; justify-content: center; border: 0; border-radius: var(--r-xs); cursor: pointer; font-family: var(--font-body); font-weight: var(--fw-semibold); transition: background-color var(--dur-base) var(--ease-out); text-decoration: none; } .lu-btn--l { height: var(--h-btn-l); font-size: var(--fs-body); padding: 0 var(--sp-5); } .lu-btn--m { height: var(--h-btn-m); font-size: var(--fs-body-sm);padding: 0 var(--sp-5); } .lu-btn--inline { height: var(--h-btn-inline); font-size: var(--fs-label); padding: 0 var(--sp-4); } .lu-btn--primary { background: var(--action-primary-bg); color: var(--action-primary-fg); } .lu-btn--primary:hover { background: var(--action-primary-bg-hover); } .lu-btn--amber { background: var(--action-amber-bg); color: var(--action-amber-fg); } .lu-btn--amber:hover { background: var(--action-amber-bg-hover); } .lu-btn--outline { background: transparent; color: var(--fg-primary); border: var(--bw-hairline) solid var(--border-default); } .lu-btn--outline:hover { border-color: var(--fg-primary); } .lu-btn--text { background: transparent; color: var(--fg-accent); padding: 0; height: auto; } .lu-btn--disabled, .lu-btn[disabled] { background: var(--action-disabled-bg); color: var(--action-disabled-fg); cursor: not-allowed; pointer-events: none; } .lu-field { height: var(--h-field); padding: 0 var(--field-padding-x); border: var(--bw-hairline) solid var(--border-default); border-radius: var(--r-xs); background: var(--bg-surface); font-family: var(--font-body); font-size: var(--fs-label); color: var(--fg-primary); } .lu-field::placeholder { color: var(--fg-faint); } .lu-field:focus { outline: none; border-color: var(--focus-ring); } .lu-field--error { border-color: var(--c-danger); } .lu-field--disabled{ background: var(--bg-surface-alt); border-color: transparent; color: var(--fg-faint); } .lu-chip { display: inline-flex; align-items: center; height: var(--h-chip); padding: 0 var(--field-padding-x); border-radius: var(--r-2xl); border: var(--bw-hairline) solid var(--border-default); background: transparent; font-family: var(--font-body); font-weight: var(--fw-medium); font-size: var(--fs-label); color: var(--fg-primary); } .lu-chip--selected { background: var(--bg-inverse); color: var(--fg-on-inverse); border-color: var(--bg-inverse); } .lu-chip--disabled { border-color: var(--border-soft); color: var(--fg-faint); } .lu-card { background: var(--bg-surface); border: var(--bw-hairline) solid var(--border-default); border-radius: var(--r-md); padding: var(--card-padding); box-shadow: var(--shadow-none); /* 卡片永远不投影 */ } .lu-card--panel { border-radius: var(--r-lg); padding: var(--card-padding-lg); } .lu-alert { display: flex; gap: var(--sp-3); border-radius: var(--r-sm); padding: 13px; font-size: var(--fs-caption); line-height: var(--lh-caption); font-weight: var(--fw-medium); } .lu-alert--error { background: var(--c-danger-bg); border: var(--bw-hairline) solid var(--c-danger-line); color: var(--c-danger); } .lu-alert--success { background: var(--c-success-bg); border: var(--bw-hairline) solid var(--c-success-line); color: var(--c-success); } .lu-skeleton { background: var(--c-skeleton); border-radius: var(--r-md); animation: lu-shimmer 1.4s var(--ease-out) infinite; } @keyframes lu-shimmer { 0%,100% { opacity: 1; } 50% { opacity: 0.55; } } /* -------------------------------------------------------------------------- 8. 无障碍与减弱动效 -------------------------------------------------------------------------- */ :root { --focus-outline: 2px solid var(--c-amber); --focus-offset: 2px; } :focus-visible { outline: var(--focus-outline); outline-offset: var(--focus-offset); } @media (prefers-reduced-motion: reduce) { .lu-skeleton { animation: none; } * { transition-duration: 1ms !important; } } /* -------------------------------------------------------------------------- 9. 响应式：移动端标题降档 + 边距收窄 -------------------------------------------------------------------------- */ @media (max-width: 767px) { :root { --fs-display-1: var(--fs-display-1-mobile); --fs-h1: var(--fs-h1-mobile); --fs-h2: var(--fs-h2-mobile); --fs-h3: var(--fs-h3-mobile); --page-margin-desktop: var(--page-margin-mobile); --two-col-gap: var(--sp-6); --sidebar-col: 100%; } .lu-container { padding-left: var(--page-margin-mobile); padding-right: var(--page-margin-mobile); } } @media (min-width: 768px) { .lu-container { padding-left: var(--page-margin-desktop); padding-right: var(--page-margin-desktop); } } .lu-container { max-width: var(--bp-desktop); margin: 0 auto; width: 100%; } .lu-container--narrow { max-width: var(--container-narrow); } /* ========================================================================== 10. 主题映射备忘（不改代码，只改后台设置） -------------------------------------------------------------------------- ★★ 这一版修正了上一版的映射顺序 ★★ 上一版是按「重要性」排的（ink / amber / paper / card / text / …）， 与 Blocksy 实际的色位角色对不上。照那个填的后果： 站点底色会变成正文色、正文色会变成描边色 —— 整站配色花掉， 而因为每个色位都是「一个合法的颜色」，肉眼一时很难定位到是映射错了。 Blocksy 官方的色位角色定义是： 1 primary brand or accent 主按钮底 / 品牌色 2 secondary accent / hover 链接 / 强调 3 primary body text 正文 4 headings 标题 5 borders and separators 描边 / 分隔线 6 subtle section backgrounds 区块底 7 primary site background 站点底 8 light contrasting surfaces 浅色面 / 卡片 Blocksy → 外观 → 自定义 → 颜色 → 全局调色板（按角色填，不是按重要性）： 色位 1 --c-ink #1F3D2B 主按钮底 / 品牌主色 色位 2 --c-amber #B4662A 链接 / 强调 色位 3 --c-text #6B6B5E 正文 色位 4 --c-ink #1F3D2B 标题 色位 5 --c-line #E3DCCB 描边 / 分隔 色位 6 --c-paper-deep #F1EDE3 区块底 色位 7 --c-paper #F6F3EC 站点底 色位 8 --c-card #FBF7F1 浅色面 / 卡片 —— 注意 1 和 4 是同一个色值，这不是笔误：ink 在本站同时扮演 「品牌主色」和「标题色」两个角色，Blocksy 需要两位分别声明。 以后如果要给标题单独换色，改色位 4 即可，不会牵动按钮。 —— 调色板的 8 位装不下全部 Token。剩下的 matcha / clay / danger / success / notice-bg 以及全部灰阶， 由子主题的 assets/css/blocksy-map.css 以 CSS 变量形式接管 （用 html:root 覆盖，特异性稳定压过 Blocksy 的内联 :root）。 Blocksy → 字体 → 字体排印： 标题字体族：Fraunces 标题字重：400（大标） / 600（卡名） 正文字体族：Inter 正文字号：14 / 行高 22（body-lg 用 15 / 25） 标签字体族：Cormorant Garamond（眉标专用，通过 .lu-eyebrow 类覆盖） WooCommerce → 设置 → 产品： 图片尺寸：商品单图 1200×1200，缩略图 400×400，分类缩略图 1200×900 —— 分类缩略图 4:3 与设计稿「品类磁贴 360×220」同比例，不要设成 1:1 ========================================================================== */