/* ============================================================================ 佰睹数据 · baiduvps 主题设计 token 三端共用（web / clientarea / cart），是全站唯一的色彩、字体、圆角来源。 引入方式（三端 header 各一次）： 本文件只定义变量与基础排版，不含组件样式；组件样式各端自行实现。 --------------------------------------------------------------------------- 字体：HarmonyOS Sans（华为，免费商用）仅含 1031 个拉丁字形， 中文由字体栈自动回退到系统字体，因此无需加载任何中文 webfont。 授权要求在站点显著位置声明使用，页脚已加「本站字体采用 HarmonyOS Sans」。 ============================================================================ */ @font-face { font-family: "HarmonyOS Sans"; src: url("fonts/HarmonyOS_Sans_Regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: "HarmonyOS Sans"; src: url("fonts/HarmonyOS_Sans_Medium.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; } @font-face { font-family: "HarmonyOS Sans"; src: url("fonts/HarmonyOS_Sans_Bold.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; } :root { /* ---------- 品牌橙：只用于「花钱」和「当前位置」 ---------- */ --brand-50: #FFF4ED; /* 选中态浅底 */ --brand-100: #FFE3D0; --brand-500: #F2610C; /* 主视觉：价格、图标、强调 */ --brand-600: #D9520A; /* 按钮底，白字对比 4.8:1 达 WCAG AA */ --brand-700: #B84508; /* hover / active */ /* ---------- 科技蓝：链接、图表、信息态 ---------- */ --tech-50: #EAF3FE; --tech-500: #1A7FE0; --tech-600: #1268C3; /* ---------- 语义色 ---------- */ --ok-50: #E9F7EF; --ok-500: #15A34A; /* 运行中 / 成功 */ --warn-50: #FDF3E2; --warn-500: #D9880F; /* 即将到期 */ --bad-50: #FDECEA; --bad-500: #D92D20; /* 欠费 / 失败 */ /* ---------- 中性色：蓝偏冷灰，非纯灰 ---------- */ --canvas: #F4F6FA; /* 页面底 */ --surface: #FFFFFF; /* 卡片 */ --surface-2: #FAFBFD; /* 表格行 hover */ --surface-sunk: #EFF2F7; /* 表头 / 代码块 */ --line: #E2E7EF; --line-strong: #CFD7E3; --ink-1: #111823; /* 标题 */ --ink-2: #333F4E; /* 正文 */ --ink-3: #5E6B7C; /* 次要 */ --ink-4: #8D9AAB; /* 占位 */ --on-brand: #FFFFFF; /* ---------- 圆角：按层级分，越大的容器越圆 ---------- */ --r-chip: 4px; /* 标签 / 徽章 */ --r-ctl: 8px; /* 按钮 / 输入框 */ --r-card: 12px; /* 卡片 */ --r-box: 16px; /* 大容器 / 弹窗 */ /* ---------- 阴影：三级，替代 1px 硬边框分区 ---------- */ --sh-1: 0 1px 2px rgba(17,24,35,.04), 0 1px 3px rgba(17,24,35,.06); --sh-2: 0 2px 8px rgba(17,24,35,.06), 0 4px 16px rgba(17,24,35,.05); --sh-3: 0 8px 24px rgba(17,24,35,.08), 0 16px 48px rgba(17,24,35,.06); --sh-brand: 0 4px 14px rgba(217,82,10,.28); /* ---------- 间距：4 的倍数 ---------- */ --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px; --s7:48px; --s8:64px; --s9:96px; /* ---------- 动效 ---------- */ --ease: cubic-bezier(.4,0,.2,1); --t-fast: 120ms; /* 按钮 / 输入框 / 表格行 */ --t-base: 200ms; /* 卡片 / 淡入 */ --t-slow: 320ms; /* 手风琴 */ /* ---------- 字体 ---------- */ --font-sans: "HarmonyOS Sans", "PingFang SC", "HarmonyOS Sans SC", "Microsoft YaHei UI", "Microsoft YaHei", "Noto Sans CJK SC", sans-serif; --font-num: "HarmonyOS Sans", ui-monospace, Menlo, monospace; --maxw: 1180px; } /* ============================================================================ 暗色：跟随系统 + 手动覆盖双向生效 切换方式：document.documentElement.setAttribute('data-theme','dark') ============================================================================ */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --brand-50:#2A1608; --brand-100:#3D2110; --brand-500:#FF8340; --brand-600:#E85F14; --brand-700:#FF9459; --tech-50:#0E1D2E; --tech-500:#4FA3F0; --tech-600:#6BB4F5; --ok-50:#0D2318; --ok-500:#3DD07E; --warn-50:#2A2008; --warn-500:#F5B73D; --bad-50:#2C1414; --bad-500:#F87171; --canvas:#0B0F16; --surface:#131A24; --surface-2:#1A222E; --surface-sunk:#0E141D; --line:#26313F; --line-strong:#35424F; --ink-1:#EAF0F7; --ink-2:#C4CFDC; --ink-3:#8B99AA; --ink-4:#66747F; --sh-1: 0 1px 2px rgba(0,0,0,.4); --sh-2: 0 2px 8px rgba(0,0,0,.45), 0 4px 16px rgba(0,0,0,.3); --sh-3: 0 8px 24px rgba(0,0,0,.5), 0 16px 48px rgba(0,0,0,.35); --sh-brand: 0 4px 14px rgba(232,95,20,.35); } } :root[data-theme="dark"] { --brand-50:#2A1608; --brand-100:#3D2110; --brand-500:#FF8340; --brand-600:#E85F14; --brand-700:#FF9459; --tech-50:#0E1D2E; --tech-500:#4FA3F0; --tech-600:#6BB4F5; --ok-50:#0D2318; --ok-500:#3DD07E; --warn-50:#2A2008; --warn-500:#F5B73D; --bad-50:#2C1414; --bad-500:#F87171; --canvas:#0B0F16; --surface:#131A24; --surface-2:#1A222E; --surface-sunk:#0E141D; --line:#26313F; --line-strong:#35424F; --ink-1:#EAF0F7; --ink-2:#C4CFDC; --ink-3:#8B99AA; --ink-4:#66747F; --sh-1: 0 1px 2px rgba(0,0,0,.4); --sh-2: 0 2px 8px rgba(0,0,0,.45), 0 4px 16px rgba(0,0,0,.3); --sh-3: 0 8px 24px rgba(0,0,0,.5), 0 16px 48px rgba(0,0,0,.35); --sh-brand: 0 4px 14px rgba(232,95,20,.35); } /* ============================================================================ 基础排版覆盖 目标：不动任何 HTML 结构，仅靠这段就让现有 170+ 页拿到新字体与新行高。 注意：这里刻意不写 !important，组件级样式仍可正常覆盖。 ============================================================================ */ body { line-height: 1.7; /* 现网为 1.5，偏挤 */ color: var(--ink-2); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* 会员中心的 clientarea/default/assets/css/app.min.css 里写死了 body { font-family: Arial, sans-serif !important; } 同为 !important 时比特异性，故此处用 html body（0,0,2）压过 body（0,0,1）。 这是全文件唯一使用 !important 的地方，且仅作用于字体族。 */ html body { font-family: var(--font-sans) !important; } h1, h2, h3, h4, h5, h6 { color: var(--ink-1); line-height: 1.35; text-wrap: balance; /* 中文长标题不出现末行孤字 */ } button, input, select, textarea { font-family: inherit; } /* 数字类内容统一等宽对齐：价格、规格、IP、日期、流量 */ .num, .price, .money, .ip, .date, .spec-value, td[data-num], .tabular { font-family: var(--font-num); font-variant-numeric: tabular-nums; } /* 键盘可达性：现网大量元素没有可见聚焦态 */ :focus-visible { outline: 2px solid var(--brand-500); outline-offset: 2px; border-radius: 2px; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; } }