/* ========================================================================== WINTOUCH-STYLE DESIGN TOKENS -------------------------------------------------------------------------- 1:1 移植自 wintouchtech.com 的 @layer theme（2026-09-29 抓包核对， 源码见 docs/reference/assets/css-14ca9aa36cb412ea.css）。 核心机制（不是"两套并行表面"，而是"语义令牌 + 局部重映射"）： 组件只引用语义名 --color-paper / --color-ink / --color-rule --color-surface / --color-border 给容器加 .stage 或 .section-dark，就在该容器作用域内把语义名 重新指向 stage 阶梯 —— 整个区块一次性反白，组件代码一字不改。 所有派生色都从两个原色 color-mix 出来，包在 @supports (color:color-mix(in lab,red,red)) 内（注意：探测用 in lab， 实际混合用 in srgb），不支持时有硬编码降级值。 ★ 改品牌只改下面 2 行，全站翻新。 ========================================================================== */ :root{ /* ----------------------------------------------------------------------- 品牌原色 —— 全站唯一两个色源 ----------------------------------------------------------------------- */ --color-brand-navy: #071b2c; /* 主色 · 深海蓝 */ --color-brand-orange: #f2a900; /* 强调 · 琥珀金 */ --color-brand-white: #fff; /* 语义别名（默认浅表面） */ --color-surface: var(--color-paper); --color-surface-alt: var(--color-paper-2); --color-border: var(--color-rule); /* ----------------------------------------------------------------------- 字体 ----------------------------------------------------------------------- */ --font-sans: ui-sans-serif, system-ui, sans-serif; --font-mono: ui-monospace,"SFMono-Regular",Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace; --font-poppins: "Poppins"; --font-display: var(--font-poppins),"Poppins", system-ui, sans-serif; --font-body: Arial,"Helvetica Neue", system-ui, sans-serif; /* ----------------------------------------------------------------------- 浅表面 —— paper 阶梯（降级值） ----------------------------------------------------------------------- */ --color-paper: #fff; /* paper-2 是分段背景（.section-paper2）。原来的 #f5f6f7 只有 navy 4%， 在 1440 屏上和白色几乎分不出来，客户反馈「section 没有背景」。 提到 navy ~9% 才看得见分段，同时保留蓝灰调不变成灰。 */ --color-paper-2: #e8ecf1; --color-paper-3: #d4dbe3; --color-paper-4: #c4ced9; /* 深表面 —— stage 阶梯（降级值） */ --color-stage: #071b2c; --color-stage-2: #1b2d3d; --color-stage-3: #273947; --color-stage-rule: #3e4d5a; --color-stage-ink: #fff; --color-stage-muted: #babfc4; --color-stage-faint: #88929a; /* 文字 —— ink 阶梯 */ --color-ink-strong: var(--color-brand-navy); --color-ink: #2f3f4e; --color-ink-muted: #566470; --color-ink-faint: #838d96; /* 强调 —— accent 阶梯 */ --color-accent: var(--color-brand-orange); --color-accent-hover: #c88f08; --color-accent-soft: #fdf5e0; --color-accent-ink: var(--color-brand-navy); --color-accent-strong: #8f6d12; /* 边框 */ --color-rule: #d7dbdd; --color-rule-strong: var(--color-brand-navy); /* 状态色（原站两者都是 navy，未做语义区分；这里补上可用色， 表单错误态走 .form-msg.err 单独定义） */ --color-ok: var(--color-brand-navy); --color-error: #dc6e6e; --rule-hair: 1px solid var(--color-rule); /* ----------------------------------------------------------------------- 流体排印（clamp，零媒体查询） ----------------------------------------------------------------------- */ --text-mega: clamp(3rem, .75rem + 6vw, 7rem); --text-hero: clamp(2.5rem, 1rem + 3.5vw, 4.75rem); --text-display: clamp(1.875rem,1rem + 2vw, 3rem); --text-title: clamp(1.25rem, 1rem + .8vw, 1.625rem); --text-mono-sm: .75rem; --text-mono-xs: .6875rem; --leading-mega: 1; --leading-display: 1.08; --leading-heading: 1.18; --leading-body: 1.6; --tracking-mega: -.025em; --tracking-display: -.018em; --tracking-heading: -.01em; --tracking-mono: .04em; --tracking-eyebrow: .16em; /* ----------------------------------------------------------------------- 间距 / 容器 ----------------------------------------------------------------------- */ --space-section: clamp(4.5rem, 3rem + 5vw, 9rem); --space-half: clamp(2rem, 1.25rem + 2.5vw, 4.5rem); --container-tight: 64rem; --container-base: 80rem; --container-wide: 90rem; /* ----------------------------------------------------------------------- 圆角 / 阴影 / 动效 ----------------------------------------------------------------------- */ --radius-sm: 8px; --radius-md: 12px; --radius-lg: 16px; --radius-xl: 20px; --radius-2xl: 28px; --radius-card: 24px; --radius-pill: 999px; --shadow-card: 0 1px 3px #071b2c0d, 0 8px 24px -12px #071b2c1f; --shadow-lift: 0 8px 24px -8px #071b2c29, 0 30px 60px -24px #071b2c33; --shadow-pop: 0 12px 32px -8px #071b2c2e, 0 40px 80px -32px #071b2c42; --duration-fast: .18s; --duration-normal: .28s; --duration-slow: .52s; --ease-out-soft: cubic-bezier(.22, 1, .36, 1); } /* ========================================================================== color-mix 增强版 —— 支持时全部改为从原色混合 ========================================================================== */ @supports (color:color-mix(in lab,red,red)){ :root{ /* paper 阶梯：navy 掺白 */ /* 和上面的降级值保持同一比例（9% / 15% / 20%）。 原来是 4% / 8% / 15% —— 4% 的 paper-2 和白色几乎分不出来。 注意：改 paper-2 要同时改这里，@supports 命中时它优先级更高。 */ --color-paper-2: color-mix(in srgb, var(--color-brand-navy) 9%, var(--color-brand-white)); --color-paper-3: color-mix(in srgb, var(--color-brand-navy) 15%, var(--color-brand-white)); --color-paper-4: color-mix(in srgb, var(--color-brand-navy) 20%, var(--color-brand-white)); /* stage 阶梯：白掺 navy */ --color-stage-2: color-mix(in srgb, var(--color-brand-white) 8%, var(--color-brand-navy)); --color-stage-3: color-mix(in srgb, var(--color-brand-white) 13%, var(--color-brand-navy)); --color-stage-rule: color-mix(in srgb, var(--color-brand-white) 22%, var(--color-brand-navy)); --color-stage-muted: color-mix(in srgb, var(--color-brand-white) 72%, var(--color-brand-navy)); --color-stage-faint: color-mix(in srgb, var(--color-brand-white) 52%, var(--color-brand-navy)); /* ink 阶梯 */ --color-ink: color-mix(in srgb, var(--color-brand-navy) 84%, var(--color-brand-white)); --color-ink-muted: color-mix(in srgb, var(--color-brand-navy) 68%, var(--color-brand-white)); --color-ink-faint: color-mix(in srgb, var(--color-brand-navy) 50%, var(--color-brand-white)); /* 边框 */ --color-rule: color-mix(in srgb, var(--color-brand-navy) 16%, var(--color-brand-white)); /* accent 阶梯 */ --color-accent-hover: color-mix(in srgb, var(--color-brand-navy) 18%, var(--color-brand-orange)); --color-accent-soft: color-mix(in srgb, var(--color-brand-orange) 12%, var(--color-brand-white)); --color-accent-strong: color-mix(in srgb, var(--color-brand-navy) 42%, var(--color-brand-orange)); /* 阴影：navy 按透明度混出，避免硬编码 rgba */ --shadow-card: 0 1px 3px color-mix(in srgb, var(--color-brand-navy) 5%, transparent), 0 8px 24px -12px color-mix(in srgb, var(--color-brand-navy) 12%, transparent); --shadow-lift: 0 8px 24px -8px color-mix(in srgb, var(--color-brand-navy) 16%, transparent), 0 30px 60px -24px color-mix(in srgb, var(--color-brand-navy) 20%, transparent); --shadow-pop: 0 12px 32px -8px color-mix(in srgb, var(--color-brand-navy) 18%, transparent), 0 40px 80px -32px color-mix(in srgb, var(--color-brand-navy) 26%, transparent); } } /* ========================================================================== ★ 核心：语义令牌局部反转 -------------------------------------------------------------------------- 给任何容器加 .stage 或 .section-dark，容器内所有语义令牌自动反白。 组件永远只写 var(--color-paper) / var(--color-ink) 这类语义名。 ========================================================================== */ .stage, .section-dark{ --color-paper: var(--color-stage); --color-paper-2: var(--color-stage-2); --color-paper-3: var(--color-stage-3); --color-paper-4: var(--color-stage-rule); --color-ink: var(--color-stage-ink); --color-ink-strong: var(--color-stage-ink); --color-ink-muted: var(--color-stage-muted); --color-ink-faint: var(--color-stage-faint); --color-rule: var(--color-stage-rule); --color-rule-strong: var(--color-stage-ink); --color-surface: var(--color-stage); --color-surface-alt: var(--color-stage-2); --color-border: var(--color-stage-rule); background: var(--color-stage); color: var(--color-stage-ink); } /* ========================================================================== 基础重置（等价 Tailwind preflight，节选常用） ========================================================================== */ *,*::before,*::after{ box-sizing:border-box; border:0 solid var(--color-rule); margin:0; padding:0 } html{ -webkit-text-size-adjust:100%; tab-size:4; line-height:1.5; font-family:var(--font-body); -webkit-tap-highlight-color:transparent; scroll-behavior:smooth; } body{ font-family:var(--font-body); color:var(--color-ink); background:var(--color-paper); line-height:var(--leading-body); -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; } h1,h2,h3,h4,h5,h6{ font-size:inherit; font-weight:inherit; line-height:inherit } a{ color:inherit; text-decoration:inherit } b,strong{ font-weight:600 } small{ font-size:80% } table{ text-indent:0; border-color:inherit; border-collapse:collapse } img,video,svg{ vertical-align:middle; display:block; max-width:100%; height:auto } button,input,optgroup,select,textarea{ font:inherit; letter-spacing:inherit; color:inherit; opacity:1; background-color:#0000; border-radius:0; } ul,ol{ list-style:none } summary{ display:list-item; cursor:pointer } textarea{ resize:vertical } :where(select:is([multiple],[size])) option{ padding-inline-start:20px } button,input:where([type=button],[type=reset],[type=submit]){ appearance:button } [hidden]:where(:not([hidden=until-found])){ display:none !important } /* ========================================================================== 手写工具类（原站 @layer theme 里只有这几个 + 令牌） ========================================================================== */ /* 裸 .container = 默认档（等同 base）。 模板全站写的是 class="container"（68 处），而这里原先只定义了 -tight/-base/-wide 三个，漏了裸 .container —— 于是整站容器既没有 max-width 也没有 padding，内容顶到屏幕边缘，导航/栅格全部垮掉。 这是"CSS 显示不正确"的根因。 */ .container, .container-base{ max-width:var(--container-base); } .container-tight{ max-width:var(--container-tight); } .container-wide{ max-width:var(--container-wide); } .container, .container-tight, .container-base, .container-wide{ width:100%; min-width:0; margin-inline:auto; padding-inline:1.5rem; } @supports (not (margin-inline-start: 1px)){ .container,.container-tight,.container-base,.container-wide{ padding-left:1.5rem; padding-right:1.5rem } } @media (min-width:768px){ .container,.container-tight,.container-base,.container-wide{ padding-inline:2.5rem } } /* 等宽数字：tabular nums 用特性开关，不是 font-variant-numeric */ .mono{ font-family:var(--font-mono); font-feature-settings:"tnum" 1,"ss01" 1; letter-spacing:var(--tracking-mono); } /* 巨字层级 */ .display-mega{ font-family:var(--font-display); font-size:var(--text-mega); line-height:var(--leading-mega); letter-spacing:var(--tracking-mega) } .display-hero{ font-family:var(--font-display); font-size:var(--text-hero); line-height:var(--leading-display); letter-spacing:var(--tracking-display) } .display-xl{ font-family:var(--font-display); font-size:var(--text-hero) } .display{ font-family:var(--font-display); font-size:var(--text-display); line-height:var(--leading-display); letter-spacing:var(--tracking-display) } .title{ font-family:var(--font-display); font-size:var(--text-title); line-height:var(--leading-heading); letter-spacing:var(--tracking-heading) } /* 强调块级文字（h1 em 用法） */ .editorial{ color:var(--color-ink-strong); font-family:inherit; font-style:normal; font-weight:700; } /* 小标签（大写 + 大字距） */ .eyebrow{ font-family:var(--font-body); font-size:var(--text-mono-xs); letter-spacing:var(--tracking-eyebrow); text-transform:uppercase; font-weight:600; color:var(--color-ink-faint); } /* 屏幕阅读器可见、视觉隐藏（facet 复选框用） */ .sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border-width:0; } :focus-visible{ outline:2px solid var(--color-accent); outline-offset:2px } /* 区块通用节距 */ .section{ padding-block:var(--space-section) } .section-tight{ padding-block:var(--space-half) } /* 卡片 */ .card{ background:var(--color-paper); border:var(--rule-hair); border-radius:var(--radius-card); box-shadow:var(--shadow-card); } /* 药丸 */ .pill{ border-radius:var(--radius-pill) } /* 动效：全站统一缓动 */ .transition-soft{ transition-timing-function:var(--ease-out-soft) } /* 文本排版：防孤字 / 收尾优化 */ .text-balance{ text-wrap:balance } .text-pretty{ text-wrap:pretty } /* 无障碍：尊重系统减少动效偏好 */ @media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto } *,*::before,*::after{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; } }