/** * TA Associates Design System · tokens.css · v2.0 * ============================================================================ * 品牌方向：TA Associates · 全球成长型私募股权 · Accelerate your growth. * 视觉参照：银行系财富 App 参考稿（Navy #1D2C4E 主色 · 交互蓝 #077BE5 · PingFang SC · 白底 + 深灰） * ---------------------------------------------------------------------------- * v2.0 变更：保留全部 CSS 变量名（--jade-*/--gold-*/--ivory-*）以兼容存量代码； * 只替换 Layer 0 原料数值，让 100+ 存量 page 自动跟随 TA 视觉。 * ============================================================================ * 用法： * 1. * 2. * 3. 组件内引用 var(--color-bg-surface) var(--color-text-primary) 等 Layer 2 变量 * * 3 层令牌体系： * Layer 0 · 原料层（jade-500/gold-500/ivory-50/ink-950/vermilion-500） * Layer 1 · 品牌语义层（brand-primary / brand-accent-gold） * Layer 2 · 主题变量层（color-bg-*/color-text-*/color-border-*）· 页面消费 * * License: CC BY 4.0 * Source: https://github.com/baosheng-securities/design-system * ============================================================================ */ /* =================================================================== * 字体加载（自托管 · /static/fonts/ · Noto Serif SC + Playfair Italic + IBM Plex Mono） * =================================================================== */ @font-face { font-family: 'BS Brand Serif'; src: url('../../static/fonts/NotoSerifSC-SemiBold.woff2') format('woff2'); font-weight: 600; font-style: normal; font-display: swap; unicode-range: U+0020-007E, U+3000-9FFF, U+FF00-FFEF; } @font-face { font-family: 'Noto Serif SC'; src: url('../../static/fonts/NotoSerifSC-SemiBold.woff2') format('woff2'); font-weight: 600; font-style: normal; font-display: swap; } @font-face { font-family: 'Playfair Display'; src: url('../../static/fonts/PlayfairDisplay-Italic.woff2') format('woff2'); font-weight: 400; font-style: italic; font-display: swap; unicode-range: U+0020-007E; } @font-face { font-family: 'IBM Plex Mono'; src: url('../../static/fonts/IBMPlexMono-Regular.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; unicode-range: U+0020-007E; } @font-face { font-family: 'IBM Plex Mono'; src: url('../../static/fonts/IBMPlexMono-Medium.woff2') format('woff2'); font-weight: 500; font-style: normal; font-display: swap; unicode-range: U+0020-007E; } /* =================================================================== * Layer 0 · 原料层（品牌不变量 · 不直接用） * ------------------------------------------------------------------- * TA v2.0 · 变量名保留 · 数值全面切换为 TA Associates 品牌色 * =================================================================== */ :root { /* H5-only 居中手机框宽度（2026-09-13 · 取消 PC 端）· 桌面把 H5 锁成此宽居中列 * 用 uni-app 原生 maxWidth:值写在 pages.json globalStyle.maxWidth=450(+rpxCalc* 三项)· 见 App.vue 注释与 OPS §10.6 * 本令牌仅供 App.vue 里自定义 fixed 栏/底部 sheet 居中兜底用;需调框宽:改 pages.json globalStyle + 本处两处同步 */ --h5-frame-max: 450px; /* 桌面 maxWidth=450 框外 body 留白色(框架 body{background:var(--UI-BG-0)} 此变量原全局未定义 → * 桌面留白无色/依赖渲染器默认)· 兜底为浅灰,桌面留白统一浅色 · 移动端整框被页面覆盖不可见 */ --UI-BG-0: #F7F7F7; /* 品牌主色 Navy（原 --jade-* 槽位复用） · 银行系参考稿 #1D2C4E */ --jade-50: #EAEFF7; --jade-100: #D3DCEC; --jade-300: #8894B0; --jade-500: #1D2C4E; /* Navy · 品牌主 */ --jade-600: #16233F; --jade-700: #14213B; /* Hero 渐变起点 */ --jade-800: #101A30; --jade-900: #0C1526; /* Hero 渐变终点 */ /* Neutral Graphite · 中性灰（原 --gold-*） · TA 官网无金色，改用克制中性灰做点缀 */ --gold-300: #FFC24D; --gold-400: #FFB020; --gold-500: #FFA900; --gold-600: #C87F00; --gold-700: #8A5A00; /* Warm White · 暖白（原 --ivory-*） · TA 官网底色 · 极浅暖调 */ --ivory-50: #F7F7F7; --ivory-100: #F0F0F0; --ivory-200: #DADADA; --ivory-hero-bg: #FFFFFF; /* TA 官网纯白背景 */ /* Deep Graphite · 深炭（原 --ink-*） · TA 官网文本色 rgb(40,40,40) */ --ink-950: #1D2C4E; --ink-900: #2A3550; --ink-800: #4E5058; /* Interactive Blue · 交互蓝(银行系 v4 新增) */ --blue-300: #5FA8F0; --blue-500: #077BE5; --blue-600: #0065F9; --blue-700: #0052C8; /* 涨跌配色（不受品牌影响 · 全球通用红涨绿跌） */ --vermilion-300: #E88178; --vermilion-500: #D6493F; --vermilion-600: #B23A32; --celadon-300: #8FBBB0; --celadon-500: #5A9587; --celadon-600: #467A6D; /* Ring alpha · 卡片描边灯圈（原 gold-alpha · 现改为 TA 红微透明 · 低调机构感） */ --gold-alpha-8: rgba(29, 44, 78, 0.06); --gold-alpha-16: rgba(29, 44, 78, 0.10); --gold-alpha-24: rgba(29, 44, 78, 0.14); --gold-alpha-32: rgba(29, 44, 78, 0.20); --gold-alpha-40: rgba(29, 44, 78, 0.28); --gold-alpha-60: rgba(29, 44, 78, 0.40); /* =================================================================== * Layer 1 · 品牌语义层 * =================================================================== */ --brand-primary: var(--jade-500); --brand-primary-hover: var(--jade-600); --brand-primary-active: var(--jade-700); --brand-primary-soft: rgba(29, 44, 78, 0.14); --brand-primary-glow: rgba(29, 44, 78, 0.32); --brand-accent-gold: var(--gold-500); --brand-accent-danger: var(--vermilion-500); --brand-cta-red: #FF2300; /* 营销/主 CTA 红(银行系 v4) */ --brand-vip: #754424; /* VIP 棕金 */ --brand-vip-bg: #FFECDA; /* VIP 浅桃底 */ /* 状态色 · Layer 1 */ --color-primary: var(--jade-500); --color-success: var(--jade-500); --color-warning: var(--gold-500); --color-danger: var(--vermilion-500); --color-info: var(--blue-500); /* =================================================================== * 字体栈（TA · Sans-first · 参照 TA 官网 Suisse Intl） * ------------------------------------------------------------------- * v2.0：主字体切换为 Inter/system-ui 近似 Suisse Intl；衬线 fallback * 保留但降级为次要 eyebrow 装饰；数字 IBM Plex Mono 保留。 * =================================================================== */ --font-sans-primary: 'Suisse Intl', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Microsoft YaHei', 'Hiragino Sans GB', system-ui, 'Helvetica Neue', Arial, sans-serif; --font-sans-hk: 'Inter', -apple-system, BlinkMacSystemFont, 'PingFang TC', 'PingFang HK', 'Microsoft JhengHei', system-ui, sans-serif; --font-sans-en: 'Suisse Intl', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Helvetica, Arial, sans-serif; --font-numeric: 'DIN Alternate', 'DIN Pro', 'Bebas Neue', 'Roboto Condensed', 'IBM Plex Mono', 'JetBrains Mono', 'SF Mono', 'Menlo', Consolas, monospace; /* 衬线 · 兼容存量代码 · TA 官网无衬线，但保留 fallback 避免破样式 */ --font-serif-brand: var(--font-sans-primary); --font-serif-en: 'Playfair Display', 'EB Garamond', 'Georgia', serif; --font-serif-hk: var(--font-sans-hk); /* 别名 · 兼容 */ --font-sans: var(--font-sans-primary); --font-mono: var(--font-numeric); --font-family-base: var(--font-sans); --font-family-mono: var(--font-mono); --font-family-brand: var(--font-sans-primary); --font-heading: var(--font-sans-primary); /* 字号（支持 4 档缩放） */ --font-scale: 1; --font-size-hero: calc(32px * var(--font-scale)); --font-size-h1: calc(24px * var(--font-scale)); --font-size-h2: calc(20px * var(--font-scale)); --font-size-h3: calc(18px * var(--font-scale)); --font-size-body: calc(16px * var(--font-scale)); --font-size-body-sm: calc(14px * var(--font-scale)); --font-size-caption: calc(12px * var(--font-scale)); --font-size-micro: calc(10px * var(--font-scale)); /* 字重 */ --font-weight-light: 300; --font-weight-regular: 400; --font-weight-medium: 500; --font-weight-semibold: 600; --font-weight-bold: 700; /* 行高 */ --line-height-tight: 1.2; --line-height-normal: 1.4; --line-height-relaxed: 1.6; /* =================================================================== * 间距（4px 网格 · 12 档） * =================================================================== */ --space-0: 0; --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px; --space-12: 48px; --space-16: 64px; /* =================================================================== * 圆角 * =================================================================== */ --radius-xs: 2px; --radius-sm: 4px; --radius-sm2: 6px; /* 2026-09-12 补缺档 · 参考稿 --ref-r-6 用了 39 次 · 小卡 */ --radius-md: 8px; /* 参考稿最高频(133 次)· 主卡片圆角 */ --radius-lg: 12px; --radius-xl: 16px; --radius-2xl: 20px; /* pill 按钮/胶囊标签 */ --radius-pill: 999px; --radius-circle: 50%; /* 与参考稿 --ref-r-* 1:1 的数字别名 · 按 Figma 标注直接抄数值时用这组 · 不必在脑内做 px→语义名 的换算 */ --radius-2: var(--radius-xs); --radius-4: var(--radius-sm); --radius-6: var(--radius-sm2); --radius-8: var(--radius-md); --radius-12: var(--radius-lg); --radius-16: var(--radius-xl); --radius-20: var(--radius-2xl); --radius-full: var(--radius-pill); /* =================================================================== * 阴影 · 2026-09-12 对齐参考稿 4 级(docs/design/figma-ref/tokens.css §10) * * 【改动说明】原 elev-1/2/3 各自**捆绑了一圈 1px 描边** * (`0 0 0 1px var(--gold-alpha-8)` · 注:gold-alpha-* 名字是 v3 遗留 · 实际值早已是 * navy rgba(29,44,78,.06) · 不是金色)。参考稿的阴影是**纯净**的,没有描边。 * 捆绑的坏处:想要阴影就被迫附带描边 · 想单独要描边又没令牌可用。 * 现改为:阴影只管阴影(严格照参考稿值) · 描边拆成独立的 --hairline-* 令牌, * 需要的地方显式 `box-shadow: var(--shadow-elev-1), var(--hairline-ring)`。 * =================================================================== */ --shadow-elev-1: 0 4px 12px 4px rgba(32, 32, 32, 0.02); /* = --ref-shadow-card · 卡片默认(极轻) */ --shadow-elev-2: 0 4px 12px 0 rgba(0, 0, 0, 0.08); /* = --ref-shadow-float · 悬浮/弹层 */ --shadow-elev-sm: 0 4px 6px 0 rgba(0, 0, 0, 0.10); /* = --ref-shadow-sm · 按钮/小浮起(本轮补) */ --shadow-elev-pop: 0 2px 8px 0 rgba(0, 0, 0, 0.30); /* = --ref-shadow-pop · 强弹窗(本轮补 · 慎用) */ --shadow-elev-3: 0 8px 24px 0 rgba(0, 0, 0, 0.10); /* 参考稿无此级 · 保留(49 处在用)· 大浮层 */ /* 描边(hairline)· 从阴影里拆出来 · 可与 shadow 叠加使用 */ --hairline-ring: 0 0 0 1px rgba(29, 44, 78, 0.06); /* 卡片极淡 navy 描边 */ --hairline-ring-strong: 0 0 0 1px rgba(29, 44, 78, 0.10); --hairline-focus: 0 0 0 1.5px rgba(29, 44, 78, 0.20); /* 聚焦/选中 */ /* ⚠ 以下 4 个是 v3 命名遗留(值已是 navy/朱红 · 非金)· 全站仅 6 处在用 · * **禁新代码引用** · 需要描边请用 --hairline-* · 需要阴影请用 --shadow-elev-* */ --shadow-gold-glow-sm: 0 0 0 1px var(--gold-alpha-24), 0 2px 8px var(--gold-alpha-16); --shadow-gold-glow-md: 0 0 0 1.5px var(--gold-alpha-32), 0 4px 16px var(--gold-alpha-24); --shadow-gold-glow-lg: 0 0 0 1.5px var(--gold-alpha-40), 0 8px 24px var(--gold-alpha-32); --shadow-seal: 0 0 0 1.5px var(--vermilion-500), 0 4px 12px rgba(214, 73, 63, 0.24); /* =================================================================== * 渐变 · 2026-09-12 映射参考稿 7 个(docs/design/figma-ref/tokens.css §6) * * 备好词汇表 ≠ 允许滥用。用之前先看 responsive-frontend.mdc §4「渐变分场景」: * grad-surface / grad-navy 可用于卡片与 hero;营销色渐变(red/red-hot/blue*) * 只用于运营位 · banner · 活动页 CTA · **禁**用于常规业务卡与表单控件。 * =================================================================== */ --grad-surface: linear-gradient(180deg, #FFFFFF 0%, #F7F7F7 20%, #F1F1F1 100%); /* 卡片微渐变底 */ --grad-navy: linear-gradient(135deg, #14213B 0%, #0C1526 100%); /* hero 深底(= brand-hero-start→end) */ --grad-red: linear-gradient(180deg, #FFD8D9 0%, #FF5760 100%); /* 营销粉红 hero */ --grad-red-hot: linear-gradient(315deg, #FF8548 0%, #FF0012 100%); /* 橙红热力 CTA/活动 */ --grad-blue: linear-gradient(270deg, #00B2F9 0%, #0065F9 100%); /* 蓝渐变(分享卡) */ --grad-blue-h: linear-gradient(90deg, #2888FF 0%, #005EFF 100%); /* 横向蓝 */ --grad-blue-royal: linear-gradient(315deg, #5F96FF 0%, #0069DE 100%); /* 宝蓝斜向 */ --grad-gold: linear-gradient(319deg, #FFAA00 0%, #FF8C00 100%); /* 金橙 · 仅 VIP/权益 */ /* 高级红 · 受控令牌(用户 2026-09-14 定盘授权 · design-system §1.7 例外 / §1.8.6 改写 / §8 登记) * 酒红→navy 深底白字 · 唯一来源 · 仅用于:会员尊享体系 + 合伙人家族(myTeam/invitation/teamRewards) * + 邀请海报 + 我的页两个高阶入口。#7A1F26=(122,31,38) 定义在令牌层 → 免 §8 黑名单(同深底涨跌先例) */ --premium-red: #7A1F26; --grad-premium: linear-gradient(135deg, #7A1F26 0%, #14213B 100%); /* 高级红 hero/入口/海报唯一来源 */ --premium-red-wash: linear-gradient(90deg, rgba(122, 31, 38, 0.08), rgba(29, 44, 78, 0.03)); /* 浅红行底 · 合伙人主入口 */ --premium-red-line: rgba(122, 31, 38, 0.24); /* 高级红 hairline */ --premium-red-chip: rgba(122, 31, 38, 0.10); /* 浅红 chip/编号徽标底 */ /* ta.com 品牌红 · 受控令牌(用户 2026-09-14 定盘授权 · design-system §8.1 登记) * 甲方 ta.com 官网 logo 红 · 仅用于:品牌入口面(welcome/landing + 登录族)的红点缀(深色底上) * 与「高级红 #7A1F26(会员/合伙人)」并存为两套红 · 各司其职,禁互相替换 * #A93439=(169,52,57) 在 §8 黑名单里 · 定义在令牌层 → 免扫描(同高级红先例)· 页面只准用 var,禁字面量 */ --ta-red: #A93439; /* ta.com 品牌红(logo 红) */ --ta-red-deep: #8B2A2F; /* hover/pressed 深一档 */ --ta-red-wash: rgba(169, 52, 57, 0.12); /* 浅红洗底 · 深色面上的红点缀区 */ --ta-red-line: rgba(169, 52, 57, 0.42); /* ta 红 hairline/描边 */ /* =================================================================== * 登录家族 / 欢迎页 / 开屏 · ta.com 浅底极简令牌(用户 2026-09-17 定盘授权) * ------------------------------------------------------------------- * 贴合真实 ta.com:白/浅灰底 + 近黑文字 + 品牌红 --ta-red 点缀 · 极简无重投影。 * 仅供 auth 家族(login/register/forget/reset + landing + splash)使用, * 不改全站 navy 银行系体系。值复用 ta.com 实测色板(#F8F8F8/#FFFFFF/#EDEFF2/近黑/灰)。 * design-system §8.1 已登记本豁免 · 页面只准用 var(--auth-*),禁字面量。 * =================================================================== */ --auth-bg: #F8F8F8; /* 页面浅灰底(ta.com 实测) */ --auth-surface: #FFFFFF; /* 卡片/输入框白面 */ --auth-line: #EDEFF2; /* 默认描边/分隔线 */ --auth-line-strong: #DEDEDE; /* 略深描边(ta.com 实测) */ --auth-text: #1A1A1A; /* 近黑主文字(ta.com 顶栏近黑) */ --auth-text-2: #4E5058; /* 次要文字 */ --auth-muted: #9CA3AF; /* 占位/辅助/版权(ta.com 实测) */ --auth-focus: var(--ta-red); /* 输入聚焦描边 = 品牌红 */ --auth-focus-ring: rgba(169, 52, 57, 0.12); /* 聚焦柔光 */ /* =================================================================== * 按钮质感层(2026-09-13 · design-system §1.9) * ------------------------------------------------------------------- * 国内券商/基金 App 的按钮质感主要来自「同色系明度渐变 + 同色投影」, * 不是黑色阴影。渐变上浅下深约 15% 明度差(非跨色相);投影用按钮自身 * 色相的低透明度形态(红按钮投红影)。禁组件内自写 box-shadow 字面量。 * =================================================================== */ --grad-btn-buy: linear-gradient(180deg, #FF5134 0%, #FF2300 100%); /* 买方向 CTA(申购/认购/缴款) */ --grad-btn-sell: linear-gradient(180deg, #2A97F0 0%, #077BE5 100%); /* 卖方向(卖出/赎回) */ --grad-btn-brand: linear-gradient(180deg, #2A3D63 0%, #1D2C4E 100%); /* 表单确认 navy(= action-bar 原字面量) */ --grad-btn-gold: linear-gradient(180deg, #FFC24D 0%, #FFA900 100%); /* 仅 VIP/权益按钮 */ --shadow-btn-buy: 0 4px 10px rgba(255, 35, 0, 0.28); /* 买 · 静止 */ --shadow-btn-buy-a: 0 2px 4px rgba(255, 35, 0, 0.22); /* 买 · 按压收缩 */ --shadow-btn-sell: 0 4px 10px rgba(7, 123, 229, 0.26); /* 卖 */ --shadow-btn-brand: 0 4px 10px rgba(29, 44, 78, 0.24); /* 品牌 navy */ --shadow-btn-gold: 0 4px 10px rgba(255, 169, 0, 0.28); /* VIP 金 */ /* 浅蓝表面 · 选中态/信息底/图标 tint 底(= --ref-surface-tint · 参考稿用 6 次) */ --surface-tint: #F0F0FE; --surface-tint-blue: #F0F4FA; /* 已有 --xt-hover-bg 同值 · 此处给语义名 */ /* =================================================================== * 风格色调层 tone · 卡面浅洗 + 同族 chip(2026-09-13 用户定盘) * ------------------------------------------------------------------- * 用途:全站页面底色为 navy 单色,业务卡需要「梯度/状态」层次时用这一层。 * wash = 卡面浅洗底(上深下浅 · 极轻 · 不是营销渐变) * chip-bg = 同族 chip 底 * fg = 同族文字/chip 字色 * 消费方式见 static/css/xt-responsive.css 的 .xt-tone-* 工具类。 * 6 档语义:mint 稳/已完成 · apricot 进行中 · peach 预告/VIP 邻接 * coral 待办/积极 · rose 高收益/热 · vip 会员专享 * **禁**在组件里自写 rgba 浅洗(会再造离散值)· 一律用这 6 档。 * =================================================================== */ --tone-mint-wash: linear-gradient(180deg, rgba(90, 149, 135, 0.28) 0%, #E8F5F0 100%); --tone-mint-chip-bg: rgba(90, 149, 135, 0.18); --tone-mint-fg: #5A9587; --tone-apricot-wash: linear-gradient(180deg, rgba(255, 169, 0, 0.20) 0%, #FFF6E4 100%); --tone-apricot-chip-bg: rgba(255, 169, 0, 0.22); --tone-apricot-fg: #C87F00; --tone-peach-wash: linear-gradient(180deg, #FFECDA 0%, #FFF6EE 100%); --tone-peach-chip-bg: #FFECDA; --tone-peach-fg: #754424; --tone-coral-wash: linear-gradient(180deg, rgba(255, 35, 0, 0.16) 0%, #FFEDE8 100%); --tone-coral-chip-bg: rgba(255, 35, 0, 0.12); --tone-coral-fg: #FF2300; --tone-rose-wash: linear-gradient(180deg, rgba(214, 73, 63, 0.22) 0%, #FDECEA 100%); --tone-rose-chip-bg: rgba(214, 73, 63, 0.18); --tone-rose-fg: #D6493F; --tone-vip-wash: linear-gradient(180deg, #FFECDA 0%, #FFF6EE 100%); --tone-vip-chip-bg: #FFECDA; --tone-vip-fg: #754424; /* =================================================================== * 涨跌配色（全球红涨绿跌） * =================================================================== */ --color-quote-up: var(--vermilion-500); --color-quote-down: var(--celadon-500); --color-quote-flat: #9CA3AF; --color-quote-up-bg: rgba(214, 73, 63, 0.14); --color-quote-down-bg: rgba(90, 149, 135, 0.14); --color-quote-flat-bg: rgba(139, 148, 158, 0.10); /* TA v15.4 · 数字滚动涨跌微闪(xt-num-roll · 令牌免黑名单 · design-system §1.5:涨/进账=红 · 跌/出账=绿) */ --xt-numflash-up: rgba(214, 73, 63, 0.22); --xt-numflash-down: rgba(90, 149, 135, 0.22); --xt-numflash-neutral: rgba(139, 148, 158, 0.18); /* 深底(navy hero)上的涨跌变体 · 2026-09-13 收编 * 存在理由:hero 底是 --brand-hero-start #14213B,标准涨色 #D6493F 在其上 * 对比度仅约 2.7:1(低于正文 4.5:1 门槛),浅化后约 7.5:1。 * ⚠ 这两个值此前以字面量 #E8A87C / #9BC7BB 散落在 asset_overview 与 * position 两页共 6 处,不在任何黑名单上,历次色彩扫描全部放行(§8.2 现象)。 * ⚠ 禁把它们"修正"回 --color-quote-up/down —— 那会把对比度砍掉三分之二。 * 只用于 navy 深底之上的金融数字;浅底一律用 --color-quote-up/down。 */ --color-quote-up-on-dark: #E8A87C; --color-quote-down-on-dark: #9BC7BB; /* =================================================================== * Z-index 层级 * =================================================================== */ --z-page-header: 30; --z-fab: 100; --z-app-topbar: 100; --z-app-tabbar: 100; --z-app-drawer: 200; --z-app-sheet: 600; --z-app-modal: 1000; --z-picker: 1500; --z-app-toast: 2000; --z-app-compliance: 3500; --z-loading: 9500; --z-critical: 9999; /* =================================================================== * 动效 * =================================================================== */ --motion-duration-instant: 100ms; --motion-duration-fast: 180ms; --motion-duration-base: 240ms; --motion-duration-slow: 360ms; --motion-duration-page: 480ms; --motion-ease-standard: cubic-bezier(0.4, 0.0, 0.2, 1); --motion-ease-enter: cubic-bezier(0.0, 0.0, 0.2, 1); --motion-ease-exit: cubic-bezier(0.4, 0.0, 1, 1); --motion-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); --motion-ease-damped: cubic-bezier(0.32, 0.72, 0, 1); /* 按压反馈透明度 */ --active-opacity: 0.72; /* =================================================================== * 布局尺寸 * =================================================================== */ --btn-h-sm: 24px; --btn-h-md: 32px; --btn-h-lg: 40px; --btn-h-order: 48px; /* 下单按钮专用 */ --btn-h-mobile: 44px; /* iOS HIG 最小触摸目标 */ --input-h: 32px; --input-h-lg: 40px; --nav-height-mobile: 48px; --tabbar-height: 56px; /* =================================================================== * 移动 · Safe Area（iOS 刘海屏 · 底 Home 条） * =================================================================== */ --safe-top: env(safe-area-inset-top, 0px); --safe-right: env(safe-area-inset-right, 0px); --safe-bottom: env(safe-area-inset-bottom, 0px); --safe-left: env(safe-area-inset-left, 0px); /* =================================================================== * Hero 品牌渐变 * =================================================================== */ --brand-hero-start: var(--jade-700); --brand-hero-end: var(--jade-900); --brand-hero-fg: var(--ivory-50); --brand-hero-fg-dim: rgba(245, 237, 224, 0.75); } /* =================================================================== * Layer 2 · Theme · Light（默认 · 品牌推荐） * =================================================================== */ html, html[data-theme="light"] { --color-bg-base: var(--ivory-50); --color-bg-surface: var(--ivory-hero-bg); --color-bg-muted: var(--ivory-100); --color-bg-elevated: var(--ivory-hero-bg); --color-bg-input: var(--ivory-100); --color-bg-glass: rgba(254, 252, 247, 0.72); --color-border-primary: rgba(29, 44, 78, 0.14); --color-border-secondary: rgba(29, 44, 78, 0.08); --color-text-primary: var(--ink-950); --color-text-secondary: #4E5058; --color-text-tertiary: #8F97AA; --color-text-inverse: var(--ivory-hero-bg); --brand-accent: var(--jade-500); --brand-accent-hover: var(--jade-600); --brand-surface: var(--jade-50); --color-warning: var(--gold-500); /* 蒙层 */ --mask-modal: rgba(15, 20, 24, 0.48); --mask-sheet: rgba(15, 20, 24, 0.32); color-scheme: light; } /* =================================================================== * Layer 2 · Theme · Dark（数据密集/终端） * =================================================================== */ html[data-theme="dark"] { /* 2026-09-12 · 单色版本(single-tone)硬约束落地 · 本块**刻意留空**。 * * 原先这里是一整套真实的深色变量覆写。因为 main.js 会照 localStorage['vp-theme'] * 设 data-theme,而主题切换开关早已从 UI 拆除 —— 老用户一旦存过这个值就永久卡在 * 非浅色主题且无法切回。本轮已双管齐下:main.js 强制 light + 本块清空。 * * 选择器保留(勿删):`html[data-theme="sepia"] .dark-card` 等既有规则仍在引用它。 * 所有变量现自然继承 :root 与 html[data-theme="light"] 的值。 * * ⚠ 若未来真要做多主题,别直接往这里填值 —— 先恢复 UI 切换入口与退出路径, * 否则又会制造"进得去出不来"的状态。 */ color-scheme: light; } /* =================================================================== * Layer 2 · Theme · Sepia（护眼 · 长时间阅读） * =================================================================== */ html[data-theme="sepia"] { /* 2026-09-12 · 单色版本(single-tone)硬约束落地 · 本块**刻意留空**。 * * 原先这里是一整套真实的深褐(sepia)变量覆写。因为 main.js 会照 localStorage['vp-theme'] * 设 data-theme,而主题切换开关早已从 UI 拆除 —— 老用户一旦存过这个值就永久卡在 * 非浅色主题且无法切回。本轮已双管齐下:main.js 强制 light + 本块清空。 * * 选择器保留(勿删):`html[data-theme="sepia"] .dark-card` 等既有规则仍在引用它。 * 所有变量现自然继承 :root 与 html[data-theme="light"] 的值。 * * ⚠ 若未来真要做多主题,别直接往这里填值 —— 先恢复 UI 切换入口与退出路径, * 否则又会制造"进得去出不来"的状态。 */ color-scheme: light; } /* =================================================================== * Layer 2 · Theme · High Contrast（WCAG AAA 无障碍） * =================================================================== */ html[data-theme="high-contrast"] { /* 2026-09-12 · 单色版本(single-tone)硬约束落地 · 本块**刻意留空**。 * * 原先这里是一整套真实的高对比变量覆写。因为 main.js 会照 localStorage['vp-theme'] * 设 data-theme,而主题切换开关早已从 UI 拆除 —— 老用户一旦存过这个值就永久卡在 * 非浅色主题且无法切回。本轮已双管齐下:main.js 强制 light + 本块清空。 * * 选择器保留(勿删):`html[data-theme="sepia"] .dark-card` 等既有规则仍在引用它。 * 所有变量现自然继承 :root 与 html[data-theme="light"] 的值。 * * ⚠ 若未来真要做多主题,别直接往这里填值 —— 先恢复 UI 切换入口与退出路径, * 否则又会制造"进得去出不来"的状态。 */ color-scheme: light; } /* =================================================================== * 字号缩放（4 档 · 无障碍） * =================================================================== */ html[data-font-scale="s"] { --font-scale: 0.875; } html { --font-scale: 1; } html[data-font-scale="m"] { --font-scale: 1; } html[data-font-scale="l"] { --font-scale: 1.125; } html[data-font-scale="xl"] { --font-scale: 1.25; } /* =================================================================== * 语言 · 字体栈自动切换 * =================================================================== */ html { --font-sans-active: var(--font-sans); } html[lang="zh-HK"], html[lang="zh-TW"] { --font-sans-active: var(--font-sans-hk); } html[lang="en"] { --font-sans-active: var(--font-sans-en); } /* =================================================================== * Base · body 默认 * =================================================================== */ html, body { background: var(--color-bg-base); color: var(--color-text-primary); font-family: var(--font-sans-active); font-size: var(--font-size-body-sm); line-height: var(--line-height-normal); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; } html { scrollbar-gutter: stable; } /* =================================================================== * 减少动画（系统偏好优先） * =================================================================== */ @media (prefers-reduced-motion: reduce) { :root { --motion-duration-instant: 0ms; --motion-duration-fast: 0ms; --motion-duration-base: 0ms; --motion-duration-slow: 0ms; } *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } /* =================================================================== * 高对比度偏好（系统跟随） * =================================================================== */ @media (prefers-contrast: more) { html:not([data-theme]) { --color-border-primary: currentColor; --color-border-secondary: currentColor; } } /* =================================================================== * 打印样式（法律页 · 报表） * =================================================================== */ @media print { :root { --color-bg-base: #ffffff; --color-bg-surface: #ffffff; --color-text-primary: #000000; } * { box-shadow: none !important; } a[href]::after { content: " (" attr(href) ")"; font-size: 10px; } .no-print { display: none !important; } } /* =================================================================== * 全局工具类 * =================================================================== */ .num-tabular, .price, .quote-num, .stock-number, .mono { font-family: var(--font-numeric); font-variant-numeric: tabular-nums; font-feature-settings: 'tnum' 1, 'zero' 1; } .brand-text { font-family: var(--font-family-brand); font-weight: var(--font-weight-semibold); } .quote-up { color: var(--color-quote-up); } .quote-down { color: var(--color-quote-down); } .quote-flat { color: var(--color-quote-flat); } .quote-up-bg { background: var(--color-quote-up-bg); } .quote-down-bg { background: var(--color-quote-down-bg); } /* 玻璃感（Sheet / Sticky Header / Modal 用） */ .glass { background: var(--color-bg-glass); backdrop-filter: blur(20px) saturate(180%); -webkit-backdrop-filter: blur(20px) saturate(180%); border: 1px solid var(--color-border-secondary); } @supports not (backdrop-filter: blur(20px)) { .glass { background: var(--color-bg-elevated); } } /* 深色友好 · 通用卡片 */ .dark-card { background: var(--color-bg-surface); border: 1px solid var(--color-border-secondary); border-radius: var(--radius-lg); } html[data-theme="light"] .dark-card, html[data-theme="sepia"] .dark-card { background: var(--color-bg-surface); border: 1px solid transparent; box-shadow: var(--shadow-elev-1); } /* 悬浮卡（自适配主题） */ .card-elevated { background: var(--color-bg-surface); border-radius: var(--radius-lg); border: 1px solid var(--color-border-secondary); box-shadow: var(--shadow-elev-1); transition: box-shadow 200ms var(--motion-ease-standard); } .card-elevated.is-hoverable:hover { box-shadow: var(--shadow-elev-2); } /* 按压反馈 · 所有可点击元素 */ .clickable-item, .tap-item { cursor: pointer; -webkit-tap-highlight-color: transparent; transition: opacity 120ms ease-out, transform 120ms ease-out; user-select: none; -webkit-user-select: none; } .clickable-item:active, .tap-item:active { opacity: var(--active-opacity); } @media (hover: hover) { .clickable-item:hover, .tap-item:hover { opacity: 0.92; } } /* 买卖 CTA · 与涨跌色语义一致 */ .btn-buy { background: var(--color-quote-up); color: #ffffff; } .btn-sell { background: var(--color-quote-down); color: var(--color-text-inverse); } /* =================================================================== * End of tokens.css · v1.0 * =================================================================== */