/* ===================================================================== unsigned 中转站 · unsigned.css — 覆盖主题(合并产物) v1.0.0 (2026-07-18) --------------------------------------------------------------------- 生成方式: build/tools/merge.py 按 00→10→20→21→30→31 顺序拼接 build/theme/parts/*.css;分节注释全部保留,单文件事实来源在 parts/。拼接清单: 00-tokens-base.css, 10-auth.css, 20-wallet.css, 21-subs.css, 30-pricing.css, 31-chrome.css, 40-qa-fixes.css, 50-premium.css, 60-motion.css 缺席件: 无(六件齐整;21-subs.css 已交付并入序,推荐套餐卡按裁决在钱包语境降级) 注入位置: 必须在 /static/css/index.356d257af7.css 之后(同特异性靠源顺序取胜)。禁 @import / 外部 url()。 ===================================================================== */ /* ================================================================ >>> PART: 00-tokens-base.css ================================================================ */ /* ===================================================================== unsigned 中转站 · 00-tokens-base.css —— 主题地基(token + 全局基线 + 通用组件) --------------------------------------------------------------------- 注入位置: 必须在 /static/css/index.356d257af7.css 之后(同特异性靠源顺序取胜)。事实来源: ground-truth/new-api-src/web/default/src/styles/theme.css(96-239 行变量清单)、theme-presets.css(语义表面桥 + 轴规则)、index.356d257af7.css(构建产物选择器逐一 grep 验证)。灰阶纪律与数值出自 build/DESIGN-SPEC.md §1。级联策略(为什么 token 要写两份、body 层为什么逐条 !important): 1) theme.css 的 :root / .dark 声明在作用域 —— 用「:root, :root.dark」同值双写覆盖(我们的文件在其后,同特异性后来者胜;:root.dark 为 (0,2,0) 还高于 .dark 的 (0,1,0),双保险)。浅色=深色同值 ⇒ 深色唯一,.dark 被瞬时移除也不露白底。 2) theme-presets.css 的 preset 块与「语义表面桥」声明在元素上—— body 作用域的自定义属性对 body 内所有内容覆盖 html 作用域同名属性,与特异性无关;且深色语义桥选择器特异性高达 (0,5,0),任何普通声明的特异性叠加(如 body[data-theme-preset][data-theme-preset] 仅 (0,2,1))都压不过。唯一稳赢方案: body 层每条自定义属性声明带 !important —— 作者 !important 声明在级联中直接压过任意特异性的普通声明(含内联 style 的普通声明)。这与 00-runtime.js 的属性剥离构成双主机制,二者独立成立。 3) --accent / --sidebar-accent / --table-* 在源码是 color-mix(var(--primary)…) 计算值 —— 若只改 --primary 会派生出发白的混色,必须逐个显式钉死。 ===================================================================== */ /* ===================================================================== §1 Token —— 第一份: html 层(:root 与 :root.dark 同值双写,无需 !important) 变量名与 theme.css :root/.dark 逐一对应(见文件尾自查清单) ===================================================================== */ :root, :root.dark { color-scheme: dark; /* 几何 */ --radius: 0.875rem; /* 14px,液态玻璃圆角带 12-16px 中点;radius-sm/md/lg/xl 由 theme.css 倍数派生 */ /* 字体(零外部字体,系统栈;--font-serif 同 sans = 字体唯一,serif 轴失效) */ --font-sans: -apple-system, "SF Pro Display", "Avenir Next", "PingFang SC", "Segoe UI", "Microsoft YaHei", sans-serif; --font-serif: -apple-system, "SF Pro Display", "Avenir Next", "PingFang SC", "Segoe UI", "Microsoft YaHei", sans-serif; --font-body: var(--font-sans); --font-mono: Menlo, ui-monospace, SFMono-Regular, "SF Mono", Consolas, "Liberation Mono", monospace; /* 基础面与文字(unblack 场 → unwell → unsurface 提亮分层) */ --background: #0a0a0b; /* unblack */ --foreground: #f2f2ef; /* unink, 17.64:1 */ --card: #111114; /* unwell */ --card-foreground: #f2f2ef; --popover: #141418; /* unsurface */ --popover-foreground: #f2f2ef; /* 交互色 —— unglint 是全站唯一亮信号 */ --primary: #ededf2; /* unglint */ --primary-foreground: #0a0a0b; /* 16.96:1 */ --secondary: #232328; /* unghost */ --secondary-foreground: #c7c7ce; /* unsilver, 9.30:1 */ --muted: #1e1e23; --muted-foreground: #9a9aa2; /* unmuted, ≥6.5:1 全表面 */ --accent: #232328; /* 源码为 color-mix 派生,显式钉死 */ --accent-foreground: #f2f2ef; --border: rgba(237, 237, 242, 0.14); /* ≈unrule 发丝线 */ --input: rgba(237, 237, 242, 0.18); /* 输入描边略亮 */ --ring: #c7c7ce; /* focus 银环(组件按 ring-ring/50 半透明用) */ /* 语义色(成功=银白非绿;destructive 保留低饱和红防误操作) */ --destructive: #e5717a; --destructive-foreground: #f2f2ef; --success: #c7c7ce; --success-foreground: #0a0a0b; --warning: #d9a05b; --warning-foreground: #0a0a0b; --info: #c7c7ce; --info-foreground: #0a0a0b; --neutral: #9a9aa2; --neutral-foreground: #0a0a0b; /* 图表灰阶坡道 */ --chart-1: #ededf2; --chart-2: #c7c7ce; --chart-3: #9a9aa2; --chart-4: #6b6b73; --chart-5: #45454c; --overview-accent-1: #ededf2; --overview-accent-2: #c7c7ce; --overview-accent-3: #9a9aa2; /* 侧边栏(body 有 has-[div[data-variant=inset]]:bg-sidebar,控制台 body 背景走 --sidebar —— 必须与 --background 同场,否则外框漏色) */ --sidebar: #0a0a0b; --sidebar-foreground: #f2f2ef; --sidebar-primary: #ededf2; --sidebar-primary-foreground: #0a0a0b; --sidebar-accent: #1e1e23; /* 源码 color-mix 派生,钉死 */ --sidebar-accent-foreground: #f2f2ef; --sidebar-border: rgba(237, 237, 242, 0.1); --sidebar-ring: #c7c7ce; /* 骨架屏与表格(源码 color-mix 派生,钉死) */ --skeleton-base: #1a1a1e; --skeleton-highlight: #232328; --table-row: #0a0a0b; --table-header: #111114; --table-header-hover: #16161a; --table-disabled: #101013; --table-disabled-hover: #141418; --table-disabled-border: rgba(237, 237, 242, 0.1); } /* ===================================================================== §2 Token —— 第二份: body 层,逐条 !important(压过 (0,5,0) 语义表面桥、全部 preset 块与 [data-theme-radius/scale/font] 轴规则,一条不漏) ===================================================================== */ body { --radius: 0.875rem !important; --font-sans: -apple-system, "SF Pro Display", "Avenir Next", "PingFang SC", "Segoe UI", "Microsoft YaHei", sans-serif !important; --font-serif: -apple-system, "SF Pro Display", "Avenir Next", "PingFang SC", "Segoe UI", "Microsoft YaHei", sans-serif !important; --font-body: var(--font-sans) !important; --font-mono: Menlo, ui-monospace, SFMono-Regular, "SF Mono", Consolas, "Liberation Mono", monospace !important; --background: #0a0a0b !important; --foreground: #f2f2ef !important; --card: #111114 !important; --card-foreground: #f2f2ef !important; --popover: #141418 !important; --popover-foreground: #f2f2ef !important; --primary: #ededf2 !important; --primary-foreground: #0a0a0b !important; --secondary: #232328 !important; --secondary-foreground: #c7c7ce !important; --muted: #1e1e23 !important; --muted-foreground: #9a9aa2 !important; --accent: #232328 !important; --accent-foreground: #f2f2ef !important; --border: rgba(237, 237, 242, 0.14) !important; --input: rgba(237, 237, 242, 0.18) !important; --ring: #c7c7ce !important; --destructive: #e5717a !important; --destructive-foreground: #f2f2ef !important; --success: #c7c7ce !important; --success-foreground: #0a0a0b !important; --warning: #d9a05b !important; --warning-foreground: #0a0a0b !important; --info: #c7c7ce !important; --info-foreground: #0a0a0b !important; --neutral: #9a9aa2 !important; --neutral-foreground: #0a0a0b !important; --chart-1: #ededf2 !important; --chart-2: #c7c7ce !important; --chart-3: #9a9aa2 !important; --chart-4: #6b6b73 !important; --chart-5: #45454c !important; --overview-accent-1: #ededf2 !important; --overview-accent-2: #c7c7ce !important; --overview-accent-3: #9a9aa2 !important; --sidebar: #0a0a0b !important; --sidebar-foreground: #f2f2ef !important; --sidebar-primary: #ededf2 !important; --sidebar-primary-foreground: #0a0a0b !important; --sidebar-accent: #1e1e23 !important; --sidebar-accent-foreground: #f2f2ef !important; --sidebar-border: rgba(237, 237, 242, 0.1) !important; --sidebar-ring: #c7c7ce !important; --skeleton-base: #1a1a1e !important; --skeleton-highlight: #232328 !important; --table-row: #0a0a0b !important; --table-header: #111114 !important; --table-header-hover: #16161a !important; --table-disabled: #101013 !important; --table-disabled-hover: #141418 !important; --table-disabled-border: rgba(237, 237, 242, 0.1) !important; } /* ===================================================================== §3 全局基线: 背景场 / 选区 / 滚动条 / focus 银环 ===================================================================== */ html { background-color: var(--background); } body { background-color: var(--background); color: var(--foreground); } ::selection { background-color: rgba(237, 237, 242, 0.22); color: #f2f2ef; } /* WebKit 滚动条(Firefox 走 index.css 的 scrollbar-color: var(--border), token 覆盖后自动灰阶,无需另写) */ ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background-color: #232328; /* unghost */ border-radius: 8px; border: 2px solid #0a0a0b; /* 造出与轨道的呼吸间隙 */ } ::-webkit-scrollbar-thumb:hover { background-color: #3a3a41; /* unrule */ } ::-webkit-scrollbar-corner { background: transparent; } /* focus-visible 银环兜底 —— :where() 零特异性,组件自带的 focus-visible:ring(box-shadow 银环)与 outline-none 均可正常覆盖它 */ :where(a, button, [role="button"], input, select, textarea, summary, [tabindex]):focus-visible { outline: 2px solid rgba(199, 199, 206, 0.7); outline-offset: 2px; } /* ===================================================================== §4 工具类(发丝线 / 液态玻璃)—— 供 runtime 与页面级 parts 复用 ===================================================================== */ .un-hairline { border: 1px solid var(--border); } .un-hairline-top { box-shadow: inset 0 1px 0 rgba(237, 237, 242, 0.08); } /* 液态玻璃标准配方(DESIGN-SPEC §2);每视口 backdrop-filter ≤4 由使用方守约 */ .un-glass { background: rgba(20, 20, 24, 0.66); -webkit-backdrop-filter: blur(16px) saturate(1); backdrop-filter: blur(16px) saturate(1); border: 1px solid rgba(237, 237, 242, 0.1); box-shadow: inset 0 1px 0 rgba(237, 237, 242, 0.08); border-radius: var(--radius); } /* ===================================================================== §5 星光层与认证页承托(canvas 由 00-runtime.js 创建并控制显隐) ===================================================================== */ #un-stars { position: fixed; inset: 0; z-index: 0; pointer-events: none; } /* 星空只透出于认证族路由: #root 抬到 z1,认证页根透明。 sonner(z 极大)与 dialog portal(z≈50)仍稳定盖过 z-index:1 */ html.un-route-auth #root { position: relative; z-index: 1; } html.un-route-auth div.relative.grid.h-svh { background: transparent; } /* ===================================================================== §6 通用组件覆盖(90% 换肤已由 §1/§2 变量完成,以下仅变量之外的点) ===================================================================== */ /* —— 按钮 —— */ /* 主按钮顶边高光(金属感): 用 background-image 而非 box-shadow, 避免覆盖 Tailwind ring 合成的 box-shadow(否则 focus 银环会被吃掉) */ [data-slot="button"].bg-primary { background-image: linear-gradient( to bottom, rgba(255, 255, 255, 0.28) 0, rgba(255, 255, 255, 0) 2px ); } /* —— 输入框(textarea / select-trigger 同规则)—— */ /* html.dark 前缀 (0,2,1) 压过 .dark\:bg-input\/30:is(.dark *) 的 (0,2,0); html 前缀版本兜底 .dark 瞬时缺失的帧 */ html [data-slot="input"], html.dark [data-slot="input"], html [data-slot="textarea"], html.dark [data-slot="textarea"] { background-color: rgba(17, 17, 20, 0.8); } [data-slot="input"], [data-slot="textarea"], [data-slot="select-trigger"] { transition: box-shadow 0.15s ease-out, border-color 0.15s ease-out; } [data-slot="input"] { font-size: max(0.875rem, 12px); /* 字号地板 12px,防移动端缩放 */ } /* —— 卡片 —— */ /* 用 box-shadow 同时表达: 1px 发丝线(替代 ring-foreground/10)+ 顶边 specular。禁 hover 抬升(translateY + drop-shadow 违反纪律),hover 只提亮发丝线 */ [data-slot="card"] { background-color: var(--card); box-shadow: 0 0 0 1px rgba(237, 237, 242, 0.1), inset 0 1px 0 rgba(237, 237, 242, 0.06); } @media (prefers-reduced-motion: no-preference) { [data-slot="card"]:not([data-card-hover="false"]) { transition: box-shadow 150ms ease, border-color 150ms ease; } } /* 覆盖 index.css 641px+ 的 hover 浮起(含 .dark 版 (0,4,0),需同特异性压制) */ @media (prefers-reduced-motion: no-preference) and (min-width: 641px) { [data-slot="card"]:not([data-card-hover="false"]):hover, .dark [data-slot="card"]:not([data-card-hover="false"]):hover { transform: none; box-shadow: 0 0 0 1px rgba(237, 237, 242, 0.2), inset 0 1px 0 rgba(237, 237, 242, 0.06); } } [data-slot="card-title"] { color: var(--foreground); } [data-slot="card-description"] { color: var(--muted-foreground); } /* —— 表格 —— */ [data-slot="table-head"] { color: var(--muted-foreground); } /* 行级 stagger 进场动画不在动效允许清单(DESIGN-SPEC §6),关闭 */ [data-slot="table"] tbody tr { animation: none; } /* —— Badge(无 data-slot,锚点 = cva 标记类 .group/badge;QA 须实测 DOM)—— */ /* 默认变体降级 unghost 底 + unsilver 字,守每视口 ≤1 亮信号预算 */ .group\/badge.bg-primary { background-color: var(--secondary); background-image: none; color: var(--secondary-foreground); } /* —— Tabs —— */ [data-slot="tabs-list"] { background-color: #111114; } /* 活动 Tab: Base UI 裸属性约定 → 真实属性是 data-active(空串), 同时兼容 Radix 风格 data-state=active(镜像构建产物编译变体 `:where([data-state=active],[data-active]:not([data-active=false]))`)。 :is() 取最高实参特异性(0,3,0),稳压 app 自带 data-active:bg-background 的 .class:where(...) (0,1,0),避免活动 Tab 被压成 #0a0a0b 凹陷 */ [data-slot="tabs-trigger"]:is( [data-state="active"], [data-active]:not([data-active="false"]) ) { background-color: #232328; color: var(--foreground); box-shadow: inset 0 1px 0 rgba(237, 237, 242, 0.08); } /* —— Dialog / Sheet / Popover / Dropdown / Select(浮层玻璃白名单)—— */ [data-slot="dialog-overlay"] { background-color: rgba(10, 10, 11, 0.72); -webkit-backdrop-filter: none; backdrop-filter: none; /* 遮罩不占 blur 预算 */ } [data-slot="dialog-content"] { background: rgba(20, 20, 24, 0.66); -webkit-backdrop-filter: blur(16px) saturate(1); backdrop-filter: blur(16px) saturate(1); border: 1px solid rgba(237, 237, 242, 0.1); box-shadow: inset 0 1px 0 rgba(237, 237, 242, 0.08); /* 替代 shadow-lg */ } [data-slot="popover-content"], [data-slot="dropdown-menu-content"], [data-slot="select-content"] { background: rgba(20, 20, 24, 0.78); -webkit-backdrop-filter: blur(14px) saturate(1); backdrop-filter: blur(14px) saturate(1); border: 1px solid rgba(237, 237, 242, 0.1); box-shadow: inset 0 1px 0 rgba(237, 237, 242, 0.06); } /* 预算守卫: dialog 打开期间,其上层二级菜单取消 blur(不透明面), 防单视口 backdrop-filter 元素 >4 */ html:has([data-slot="dialog-content"]) [data-slot="popover-content"], html:has([data-slot="dialog-content"]) [data-slot="dropdown-menu-content"], html:has([data-slot="dialog-content"]) [data-slot="select-content"] { -webkit-backdrop-filter: none; backdrop-filter: none; background: #141418; } /* Sheet/Drawer(config drawer 等): 不透明第二级表面,不进玻璃白名单 */ [data-slot="sheet-content"] { background-color: #141418; box-shadow: inset 0 1px 0 rgba(237, 237, 242, 0.06); } /* backdrop-filter 不可用时的降级: 全部回落不透明 unsurface */ @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .un-glass, [data-slot="dialog-content"], [data-slot="popover-content"], [data-slot="dropdown-menu-content"], [data-slot="select-content"] { background: #141418; } } /* —— Toast(sonner)—— */ /* Toaster 内联 style 引用 var(--popover) 等 → token 已自动换肤; richColors 的彩色 success/error 用 sonner 自有变量 API 压成银白/低饱和红 */ [data-sonner-toaster], [data-sonner-toaster] [data-sonner-toast] { --normal-bg: var(--popover) !important; --normal-border: var(--border) !important; --normal-text: var(--popover-foreground) !important; --success-bg: #141418 !important; --success-border: rgba(199, 199, 206, 0.35) !important; --success-text: #c7c7ce !important; --error-bg: #141418 !important; --error-border: rgba(229, 113, 122, 0.4) !important; --error-text: #e5717a !important; --warning-bg: #141418 !important; --warning-border: rgba(217, 160, 91, 0.4) !important; --warning-text: #d9a05b !important; --info-bg: #141418 !important; --info-border: rgba(199, 199, 206, 0.35) !important; --info-text: #c7c7ce !important; } /* 直接色兜底(sonner 版本差异防线) */ [data-sonner-toast][data-type="success"] { background: #141418 !important; color: #c7c7ce !important; border-color: rgba(199, 199, 206, 0.35) !important; } [data-sonner-toast][data-type="error"] { background: #141418 !important; color: #e5717a !important; border-color: rgba(229, 113, 122, 0.4) !important; } /* —— 侧边栏 / 导航 —— */ /* 活动项: unsurface 抬面 + 左缘 2px unglint 竖线(导航态指示,非面积信号, 不占亮信号预算)。注: 该 box-shadow 覆盖会吃掉此元素上 ring 型 focus 环, §3 的 :where outline 兜底仍生效。锚点用源码 useRender 的 slot 值 data-slot="sidebar-menu-button"; Base UI 布尔 state 渲染为裸属性空串 → data-active(非 "true"), 守卫 :not([data-active="false"]) 镜像 app 编译变体 */ [data-slot="sidebar-menu-button"][data-active]:not([data-active="false"]) { background-color: var(--sidebar-accent); color: var(--sidebar-foreground); box-shadow: inset 2px 0 0 #ededf2; } /* inset 变体主内容面: 用 1px 发丝线替代 shadow-sm(禁 drop-shadow 纪律) */ main[data-slot="sidebar-inset"] { box-shadow: 0 0 0 1px var(--border); } /* 控制台顶栏(源码 bg-transparent sticky): 玻璃白名单成员(计入 ≤4) */ [data-slot="sidebar-wrapper"] header.sticky.top-0 { background: rgba(10, 10, 11, 0.85); -webkit-backdrop-filter: blur(14px) saturate(1); backdrop-filter: blur(14px) saturate(1); border-bottom: 1px solid var(--border); } /* ===================================================================== §7 彩色泄漏全局闸 + 主题入口隐藏 ===================================================================== */ /* 公共页 amber/yellow 径向 Glow —— 全站最大彩色泄漏源,直接隐藏 */ [data-slot="glow"] { display: none !important; } /* 定价页等处的 text-amber-* 价格高亮 → 统一压成 unsilver (真正的警示色走 --warning 变量,不用 amber 工具类,不受此闸影响) */ [class*="text-amber"] { color: #c7c7ce !important; } /* 主题切换入口: ConfigDrawer 触发按钮(aria-describedby 为源码硬编码 id) */ button[aria-describedby="config-drawer-description"] { display: none !important; } /* 公共页 ThemeSwitch(lucide 图标类锚点;QA 须在真实 DOM 复核一次) */ header button:has(svg.lucide-sun), header button:has(svg.lucide-moon) { display: none !important; } /* ===================================================================== §8 reduced-motion: 本文件新增的过渡全部即时(app 自带动效由其 prefers-reduced-motion 块处理;星空静止由 00-runtime.js 负责) ===================================================================== */ @media (prefers-reduced-motion: reduce) { .un-glass, [data-slot="card"], [data-slot="input"], [data-slot="textarea"], [data-slot="select-trigger"] { transition: none; } } /* --------------------------------------------------------------------- 自查清单(与 theme.css :root/.dark 变量逐一对照,一条不漏): radius app-header-height(不动) font-body background foreground card card-foreground popover popover-foreground primary primary-foreground secondary secondary-foreground muted muted-foreground accent accent-foreground destructive destructive-foreground success success-foreground warning warning-foreground info info-foreground neutral neutral-foreground border input ring chart-1..5 overview-accent-1..3 sidebar sidebar-foreground sidebar-primary sidebar-primary-foreground sidebar-accent sidebar-accent-foreground sidebar-border sidebar-ring skeleton-base skeleton-highlight table-row table-header table-header-hover table-disabled table-disabled-hover table-disabled-border + font-sans/serif/body/mono(prod 实际消费者) -------------------------------------------------------------------- */ /* ================================================================ >>> PART: 10-auth.css ================================================================ */ /* ===================================================================== unsigned 中转站 · 10-auth.css —— 认证族页面(登录/注册/忘记密码/2FA) --------------------------------------------------------------------- 作用域: body[data-un-route="auth"](由 00-runtime.js 写入;html.un-route-auth 为等价锚点,本文件统一用 body 口径)。拼接顺序必须在 00-tokens-base.css 之后。 DOM 事实(PAGE-MAP §2.1/§2.2 + auth-layout.tsx 逐行核实): 根 div.relative.grid.h-svh(00-tokens §5 已置 transparent 透星空) 品牌区 a[href='/'] > img.h-8.w-8.rounded-full + h1.text-xl.font-medium 卡容器 div.container > div.mx-auto.flex.w-full.flex-col (sm:w-[480px];sm:p-8 = 32px 内距,天然即玻璃卡内距,不另写 padding) 表单 form.grid.gap-4;字段 [data-slot=form-item] > label + input; 提交 button[type=submit][data-slot=button](default 变体 = unglint) 构建 CSS 选择器抽查(index.356d257af7.css,grep -oF 计数): .container×7 .h-svh×1 .mx-auto×1 .space-y-8×1 w-\[480px\]×1 data-slot=form-item×4 data-slot=input×14 aria-invalid×60 ✓ 全部真实存在纪律自查: - 玻璃预算: 本页 backdrop-filter 仅认证卡 1 个(+dialog/popover 按需,≤4)。 - 亮信号预算: 提交按钮(bg-primary=unglint,由 token 层完成)= 每视口唯一; 页头「注册/登录」链接是 muted+underline,仅 hover 时 text-primary,不占预算。 - 标语只在 sign-in / sign-up 出现: :has(input[name=username]) 判别—— 两页表单均有 username 字段;forgot-password 只有 email、otp 只有 otp (已对 forgot-password-form.tsx / otp-form.tsx 源码核实),纯 CSS ::after 呈现,零 JS、天然幂等。不支持 :has 的老浏览器 = 无标语,可接受降级。 - ≤640px(实取 639.98px 对齐 Tailwind sm 断点): 卡片全宽去玻璃降级。 - 全部字号 ≥12px;中文零 letter-spacing,Latin 标语 0.08em / EDU 徽章 0.1em。 - 动效: 仅认证卡进场 320ms(允许清单 #1)与 EDU 徽章淡入 150ms(#6), 全部包在 prefers-reduced-motion: no-preference 内,reduce 时直接以终态出现。 - .un-edu* / .un-edu-hint 是 10-auth-edu.js 模块自带样式,故意不加路由前缀 (profile 绑邮箱 dialog / 忘记密码等场景同样命中);地基未定义这些类, 本文件是唯一定义点,不构成重复。 ===================================================================== */ /* ===================================================================== §1 页面场 —— 星空最亮处在卡片所在区域叠一层极淡的银色环境光(grayscale,α≤0.035,非信号、非 glow 装饰,只是把「星空在此最亮」说出来)。与 00-tokens §5 的 transparent 规则同特异性(0,3,2),本文件在后 ⇒ 源顺序取胜; gradient 两端均为透明/近透明,星空 canvas 仍然透出。 ===================================================================== */ body[data-un-route="auth"] div.relative.grid.h-svh { background: radial-gradient( ellipse 90% 70% at 50% 36%, rgba(237, 237, 242, 0.035), rgba(237, 237, 242, 0) 65% ); } /* ===================================================================== §2 居中液态玻璃卡(DESIGN-SPEC §2 标准配方,本页唯一 backdrop-filter) position:relative 供 §6 标语 ::after 绝对定位锚用 ===================================================================== */ body[data-un-route="auth"] .container > .mx-auto.flex.w-full.flex-col { position: relative; background: rgba(20, 20, 24, 0.66); -webkit-backdrop-filter: blur(16px) saturate(1); backdrop-filter: blur(16px) saturate(1); border: 1px solid rgba(237, 237, 242, 0.1); box-shadow: inset 0 1px 0 rgba(237, 237, 242, 0.08); border-radius: var(--radius, 0.875rem); } /* 进场动效(允许清单 #1): 320ms ease-out,组件挂载即路由进入,天然只播一次 */ @media (prefers-reduced-motion: no-preference) { body[data-un-route="auth"] .container > .mx-auto.flex.w-full.flex-col { animation: un-auth-card-in 320ms ease-out both; } } @keyframes un-auth-card-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } } /* backdrop-filter 不可用 → 不透明 unsurface(§2 降级条款) */ @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { body[data-un-route="auth"] .container > .mx-auto.flex.w-full.flex-col { background: #141418; } } /* ===================================================================== §3 品牌区(左上 logo + 站名;src/文本改写由 00-runtime.js 负责) ===================================================================== */ /* logo 环形头像加 1px 发丝线包边,银黑铬面 logo 在暗场上的收边 */ body[data-un-route="auth"] a[href="/"] img.rounded-full { box-shadow: 0 0 0 1px rgba(237, 237, 242, 0.12); } /* 站名: unink,权重 500;中文为主 ⇒ 不加 letter-spacing */ body[data-un-route="auth"] a[href="/"] h1 { color: var(--foreground); font-weight: 500; } /* ===================================================================== §4 输入框 —— 银环 focus 与错误态组件自带 focus-visible:border-ring + ring-ring/50(token 已银化), 此处仅做 .dark 瞬时缺失帧的兜底钉固;错误态沿 --destructive 低饱和红。 ===================================================================== */ body[data-un-route="auth"] [data-slot="input"]:focus-visible, body[data-un-route="auth"] [data-slot="textarea"]:focus-visible { border-color: var(--ring); } body[data-un-route="auth"] [data-slot="input"][aria-invalid="true"], body[data-un-route="auth"] [data-slot="textarea"][aria-invalid="true"] { border-color: rgba(229, 113, 122, 0.6); } /* 错误文案(form-message = p.text-destructive): token 已换色,钉一道字号地板 */ body[data-un-route="auth"] [data-slot="form-message"] { font-size: max(0.875rem, 12px); } /* ===================================================================== §5 主按钮 —— 唯一 unglint default 变体(bg-primary)+ 顶边金属高光已由 00-tokens §1/§6 完成; 认证页表单只有一个 default 按钮(提交),预算天然成立,无需页面级降级。此处不写任何规则,仅留此注释供 QA 对照。 ===================================================================== */ /* ===================================================================== §6 标语(一次性,低调): 仅 sign-in / sign-up(:has 判别,见文件头) 绝对定位于玻璃卡下缘外 24px,不参与布局、不可交互; 纯 Latin 文案 ⇒ letter-spacing 0.08em 合规;#8E8E96(unsteel) on unblack = 6.09:1 ≥ 4.5:1 次要文字门禁 ✓ ===================================================================== */ body[data-un-route="auth"] .container > .mx-auto.flex.w-full.flex-col:has(input[name="username"])::after { content: "Find the question that pulls you forward."; position: absolute; top: 100%; left: 0; right: 0; margin-top: 24px; text-align: center; font-size: 12px; line-height: 1.5; color: #8e8e96; letter-spacing: 0.08em; pointer-events: none; } /* ===================================================================== §7 移动端(≤640px,取 639.98px 对齐 Tailwind sm): 卡片全宽去玻璃 w-full 本就全宽(sm:w-[480px] 仅 ≥640px 生效);去 blur/边框/圆角, 页面场即表面 —— 星点极暗(α 多数≈0.1)不影响 ≥7:1 正文对比。注意本块必须位于 §2 的 @supports 降级块之后(同特异性靠源顺序压过其不透明底,移动端统一回透明)。 ===================================================================== */ @media (max-width: 639.98px) { body[data-un-route="auth"] .container > .mx-auto.flex.w-full.flex-col { background: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; border: 0; box-shadow: none; border-radius: 0; } /* 标语跟随收紧 */ body[data-un-route="auth"] .container > .mx-auto.flex.w-full.flex-col:has(input[name="username"])::after { margin-top: 8px; } } /* ===================================================================== §8 EDU 模块样式(配套 10-auth-edu.js;节点全部由该 JS 创建,天然无副作用, 故不加路由前缀 —— profile 绑邮箱 dialog / 忘记密码页同样命中) 对比度: 徽章 unsilver #C7C7CE on unghost #232328 = 9.30:1 ✓; 微文案/提示 --muted-foreground ≥6.5:1 ✓;全部 12px(字号地板)。 "EDU" 为纯 Latin 子 span ⇒ tracking 0.1em;中文部分零 tracking。 ===================================================================== */ .un-edu { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; min-width: 0; } .un-edu-badge { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 6px; background: var(--secondary, #232328); border: 1px solid rgba(199, 199, 206, 0.45); color: var(--secondary-foreground, #c7c7ce); font-size: 12px; line-height: 1.5; white-space: nowrap; } .un-edu-badge-en { letter-spacing: 0.1em; font-weight: 600; } .un-edu-note { font-size: 12px; line-height: 1.5; color: var(--muted-foreground, #9a9aa2); } /* 注册页表单末尾提示行(JS 仅在 /sign-up 插入) */ .un-edu-hint { margin: 0; font-size: 12px; line-height: 1.5; text-align: center; color: var(--muted-foreground, #9a9aa2); } /* EDU 徽章淡入 150ms(允许清单 #6;仅声明于 no-preference,reduce 即终态) */ @media (prefers-reduced-motion: no-preference) { [data-un-edu] { animation: un-edu-in 150ms ease-out both; } } @keyframes un-edu-in { from { opacity: 0; } to { opacity: 1; } } /* ================================================================ >>> PART: 20-wallet.css ================================================================ */ /* ===================================================================== unsigned 中转站 · 20-wallet.css —— 钱包/充值/兑换页(路由 /wallet,tag=topup) --------------------------------------------------------------------- 注入顺序: 在 00-tokens-base.css 之后拼接(token 与通用组件基线已就绪)。路由作用域: 00-runtime.js 写 body[data-un-route="topup"](钱包=topup 口径, 含 /wallet 与 /console/topup 别名),本文件所有规则挂该前缀,不外溢。锚点事实(PAGE-MAP §2.3/§6 + 构建 CSS grep 逐一验证): - 余额统计条 = div.grid.grid-cols-3.divide-x.rounded-lg.border(裸 div 非 card), 第一格 .font-mono.tabular-nums 即余额数字; - 兑换区 = #wallet-add-funds > [data-slot=card] 内 card-content 直接子 div, 含 input#redemption-code(id 稳定); - 账单历史 = Dialog 体系(billing-history-dialog.tsx:99 用 @/components/dialog → components/dialog.tsx:72 DialogContent → ui/dialog.tsx:71 data-slot=dialog-content),内容面 contentClassName 含 sm:max-w-4xl (钱包路由唯一 4xl dialog,作本文件账单专属锚点;玻璃面/overlay 由地基 [data-slot=dialog-content] 规则供给); - AlertDialog([data-slot=alert-dialog-content])= 支付确认 (payment-confirm-dialog.tsx:71)与账单内补单确认 (billing-history-dialog.tsx:323);地基未覆盖该体系,§5a 镜像配方; - 彩色泄漏: .text-green-600(预设折扣/支付确认)、.text-red-600(账单负数)、 IconBadge warning 调(bg-warning/10.text-warning,Gift/Crown 装饰章)。 blur 预算(本视口 ≤4): 控制台顶栏(base §6)+ 兑换玻璃面板 + 打开态 dialog/alert-dialog(账单/支付确认等,同刻仅一个)= 3,留 1 给 select/popover。亮信号预算: 余额大数字 = 本视口唯一 unglint;页面级把 main 内全部 .text-primary 与 default 按钮降级(裁决: 推荐套餐卡在钱包语境同样降级, 由 21-subs.css §2/§3 以更高特异性钉死银发丝线 + unsilver,不恢复 unglint; dialog 走 body portal 不在 main 内,CTA 保持 unglint)。禁: 重定义 .un-glass/.un-tagline/.un-edu-badge(地基与其他 part 所有)。 ===================================================================== */ /* ===================================================================== §1 余额英雄区(WalletStatsCard) ===================================================================== */ /* 三格统计条: 从透明裸 div 提亮到第一级表面(unwell)+ 顶边 specular, 层次靠提亮不靠阴影(纪律 §3) */ body[data-un-route="topup"] .grid.grid-cols-3.divide-x { background-color: var(--card); border-color: var(--border); box-shadow: inset 0 1px 0 rgba(237, 237, 242, 0.07); } /* 第一格 = 当前余额: 大号银白数字 —— 本视口唯一亮信号(DESIGN-SPEC §5.3)。选择器唯一性: 钱包页仅统计条同时带 grid-cols-3 与 divide-x(账单网格是 grid-cols-2/sm:grid-cols-3,活动订阅是 sm:grid-cols-2/xl:grid-cols-3, 均无裸 grid-cols-3 token,已核 wallet 全部源文件) */ body[data-un-route="topup"] .grid.grid-cols-3.divide-x > div:first-child .font-mono.tabular-nums { font-size: clamp(28px, 4vw, 40px); line-height: 1.1; letter-spacing: -0.01em; /* 仅数字/Latin,非中文 tracking */ font-weight: 700; color: #ededf2; /* unglint */ } /* 第 2/3 格数值退到 unsilver,守每视口一道亮信号 */ body[data-un-route="topup"] .grid.grid-cols-3.divide-x > div:nth-child(n + 2) .font-mono.tabular-nums { color: #c7c7ce; } /* 描述行源码是 text-muted-foreground/60(合成后 ≈3.4:1,低于次要文字 4.5:1 门禁)→ 提回全值 unmuted(≥6.75:1 on unwell) */ body[data-un-route="topup"] .grid.grid-cols-3.divide-x [class*="text-muted-foreground/60"] { color: var(--muted-foreground); } /* ===================================================================== §2 兑换码玻璃面板(RechargeFormCard 兑换分区) ===================================================================== */ /* 分区容器 = card-content 的直接子 div 中包含 #redemption-code 的那个 (源码: div.space-y-2.5.border-t.pt-4 > [标题行, grid > input#redemption-code + button, p])。 :has() 与地基 §6 预算守卫同一浏览器基线;不支持 :has 的旧浏览器仅失去玻璃面板(平铺降级),功能无损。玻璃配方 = DESIGN-SPEC §2,blur 14px(§5.3 指定,白名单成员) */ body[data-un-route="topup"] #wallet-add-funds [data-slot="card-content"] > div:has(input#redemption-code) { background: rgba(20, 20, 24, 0.66); -webkit-backdrop-filter: blur(14px) saturate(1); backdrop-filter: blur(14px) saturate(1); border: 1px solid rgba(237, 237, 242, 0.1); /* border 简写同时中和原 border-t */ box-shadow: inset 0 1px 0 rgba(237, 237, 242, 0.08); border-radius: calc(var(--radius) - 2px); /* 12px,卡内嵌层比卡本体收一档 */ padding: 0.875rem 1rem 1rem; margin-top: 0.25rem; } /* backdrop-filter 不可用降级: 不透明第二级表面(镜像地基 §6 降级策略) */ @supports not ( (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) ) { body[data-un-route="topup"] #wallet-add-funds [data-slot="card-content"] > div:has(input#redemption-code) { background: #17171b; } } /* 兑换分区的 Gift 徽章与订阅卡 Crown 徽章都是 IconBadge warning 调 (bg-warning/10 + text-warning = 压饱和 amber)——装饰章非语义警示, 在灰阶站上是整页唯一色相,压成银灰。组合选择器唯一命中 IconBadge: StatusBadge 的 text-warning 外层无 bg-warning/10(其点是实心 bg-warning 子元素),不受影响 */ body[data-un-route="topup"] main span[class*="bg-warning/10"][class*="text-warning"] { background-color: rgba(237, 237, 242, 0.08); color: #c7c7ce; } /* "获取兑换码" 外链(p > a[target=_blank]): 银灰 + 组件自带 hover 下划线 */ body[data-un-route="topup"] #wallet-add-funds a[target="_blank"] { color: #c7c7ce; } /* ===================================================================== §3 说明文字层级 / 表单状态灰阶化 ===================================================================== */ /* 预设金额选中态源码是 border-foreground(#f2f2ef 满亮描边,会与余额争亮) → 收敛为 0.45 银描边,bg-foreground/5 微亮底保留作选中反馈 */ body[data-un-route="topup"] [data-slot="button"].border-foreground { border-color: rgba(237, 237, 242, 0.45); } /* 折扣/优惠文案 text-green-600 → 成功语义用银白(纪律 §1); 作用域到路由级而非 main,覆盖支付确认 dialog(body portal)内同类 */ body[data-un-route="topup"] [class*="text-green"] { color: #c7c7ce !important; } /* 账单负数 text-red-600 → 低饱和 destructive 红(语义色保留但压饱和) */ body[data-un-route="topup"] [class*="text-red-"] { color: var(--destructive) !important; } /* 支付方式/品牌图标(pay-*.png、waffo svg、内联彩色 svg)统一去色, 形状仍可辨认,不产生页面唯一例外的色相 */ body[data-un-route="topup"] #wallet-add-funds [data-slot="button"] img, body[data-un-route="topup"] #wallet-add-funds [data-slot="button"] svg { filter: grayscale(1); } /* ===================================================================== §4 页面级亮信号降级(DESIGN-SPEC §5.3: 余额数字之外零 unglint) ===================================================================== */ /* main 页流内所有 text-primary(链接/图标/价格)→ unsilver。推荐套餐卡不例外(裁决): 21-subs.css §3 以 (0,5,1) 特异性把套餐价格显式钉死为同值 unsilver——钱包语境无"恢复 unglint"一说; dialog 内容走 body portal,不受 main 前缀影响,保持 unglint CTA */ body[data-un-route="topup"] main .text-primary { color: #c7c7ce; } /* main 页流内 default(bg-primary)按钮 → secondary 外观; 同时清掉地基 §6 给主按钮的金属顶光渐变 */ body[data-un-route="topup"] main [data-slot="button"].bg-primary { background-color: var(--secondary); background-image: none; color: var(--secondary-foreground); } body[data-un-route="topup"] main [data-slot="button"].bg-primary:hover { background-color: #2a2a30; } /* ===================================================================== §5 账单历史(BillingHistoryDialog,Dialog 体系)+ 钱包 AlertDialog 账单历史内容面 = [data-slot=dialog-content].sm:max-w-4xl —— 钱包路由唯一 4xl dialog(购买确认/转账 sm:max-w-md、creem sm:max-w-[425px]、 Dialog 默认 sm:max-w-2xl 均不撞),玻璃面/overlay 由地基 dialog 规则供给,此处只做账单专属差异化;锚点限定同时保证不触及 21-subs §8 的购买 dialog 规则。 ===================================================================== */ /* —— §5a AlertDialog 体系(支付确认 payment-confirm-dialog.tsx:71、账单内补单确认 billing-history-dialog.tsx:323): 地基只覆盖 dialog-content,此处镜像同配方 —— */ /* overlay: 与地基 dialog-overlay 同配方,无 blur 不占预算 */ body[data-un-route="topup"] [data-slot="alert-dialog-overlay"] { background-color: rgba(10, 10, 11, 0.72); -webkit-backdrop-filter: none; backdrop-filter: none; } /* 内容面: 玻璃白名单成员(等同 dialog-content,DESIGN-SPEC §2) */ body[data-un-route="topup"] [data-slot="alert-dialog-content"] { background: rgba(20, 20, 24, 0.66); -webkit-backdrop-filter: blur(16px) saturate(1); backdrop-filter: blur(16px) saturate(1); border: 1px solid rgba(237, 237, 242, 0.1); box-shadow: inset 0 1px 0 rgba(237, 237, 242, 0.08); font-variant-numeric: tabular-nums; /* 支付确认金额等数值等宽 */ } @supports not ( (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) ) { body[data-un-route="topup"] [data-slot="alert-dialog-content"] { background: #141418; } } /* —— §5b 账单历史差异化(锚点 .sm:max-w-4xl,见本节头注)—— */ /* 历史记录行(rounded-lg border 列表项): 玻璃面上的微抬面 + 发丝线 */ body[data-un-route="topup"] [data-slot="dialog-content"].sm\:max-w-4xl .rounded-lg.border { background-color: rgba(237, 237, 242, 0.03); border-color: rgba(237, 237, 242, 0.1); } /* 订单号 code(源码 text-foreground #F2F2EF): 等宽银灰,让位状态徽章 */ body[data-un-route="topup"] [data-slot="dialog-content"].sm\:max-w-4xl code { color: #c7c7ce; } /* 金额/页码等数值等宽对齐(21-subs §8 对钱包全部 dialog-content 已给同属性同值,此处限定账单面自足成立,不依赖 21-subs 在场,无叠加冲突) */ body[data-un-route="topup"] [data-slot="dialog-content"].sm\:max-w-4xl { font-variant-numeric: tabular-nums; } /* ===================================================================== §6 余额交接条(由 20-wallet-handoff.js 插入,结构: div.un-balance-handoff[data-un-handoff] > span.un-old/.un-arrow/.un-new/.un-delta) 动效: 进出场 300ms ease-out(DESIGN-SPEC §6 允许清单 #5) 注: 展示的 ~3.5s 内 .un-new 与余额英雄数字同为 unglint —— 同一语义值的瞬时交接,规范认可(§5.3 指定"新值 unglint";§6 允许清单 #5), QA 目检确认不读作两个竞争亮信号即可。 ===================================================================== */ body[data-un-route="topup"] .un-balance-handoff { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.5em; margin-top: 8px; font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: 12px; /* 字号地板 */ line-height: 1.4; color: #c7c7ce; opacity: 0; transform: translateY(4px); transition: opacity 300ms ease-out, transform 300ms ease-out; pointer-events: none; /* 纯展示,不截获点击 */ } body[data-un-route="topup"] .un-balance-handoff.un-in { opacity: 1; transform: none; } body[data-un-route="topup"] .un-balance-handoff .un-old { color: var(--muted-foreground); text-decoration: line-through; } body[data-un-route="topup"] .un-balance-handoff .un-arrow { color: #8e8e96; /* unsteel */ } body[data-un-route="topup"] .un-balance-handoff .un-new { color: #ededf2; /* 交接瞬时高亮,3.5s 后随条退场(DESIGN-SPEC §5.3) */ font-weight: 600; } body[data-un-route="topup"] .un-balance-handoff .un-delta { color: #c7c7ce; } /* ===================================================================== §7 reduced-motion: 本文件新增过渡全部即时,交接条以终态出现 ===================================================================== */ @media (prefers-reduced-motion: reduce) { body[data-un-route="topup"] .un-balance-handoff { transition: none; opacity: 1; transform: none; } } /* ================================================================ >>> PART: 21-subs.css ================================================================ */ /* ===================================================================== unsigned 中转站 · 21-subs.css —— 订阅套餐卡(wallet 右栏)+ 订阅管理页 --------------------------------------------------------------------- 注入顺序: 20-wallet.css 之后、30-pricing.css 之前(merge.py CSS_ORDER)。作用域(与 20-wallet.css 同口径,由 00-runtime.js 写入): - body[data-un-route="topup"] = /wallet 与 /console/topup(SubscriptionPlansCard 所在); - body[data-un-route="subs"] = /subscriptions 与 /redemption-codes(admin 管理页, data-table 体系;普通用户 redirect /403,见 PAGE-MAP §2.4)。锚点事实(subscription-plans-card.tsx 已逐行核,行号为源码实测): - 套餐网格 = div.grid.grid-cols-1.gap-3.2xl:grid-cols-2(:526,钱包页唯一 .grid.grid-cols-1.gap-3 组合;loading 网格是 gap-4 不撞); - 套餐卡 = [data-slot=card][data-card-hover=false](:553-556),推荐卡追加 border-primary/70 shadow-sm(:556, isPopular = index===0 && plans.length>1 :532); - 推荐徽章 = [data-slot=status-badge](variant info → var(--info),token 已银); - 价格 = span.text-primary.text-2xl.font-bold(:583); - 权益行 = div.text-muted-foreground.text-xs + svg.Check.text-primary(:591-597); - 购买按钮 = [data-slot=button] variant=outline(含 .bg-background 变体类,:604/:613); - 活动订阅项 = .max-h-64 > div.bg-background.rounded-md.border(:398/:449); - 计费状态面板 = div.rounded-xl.border.p-3(:271,钱包页唯一组合); - 空态 = main 内 p.text-muted-foreground.py-4.text-center.text-sm(:630,唯一); - 加载骨架 = [data-slot=skeleton](skeleton.tsx:24;变量已由地基灰阶, 不做 shimmer 增强 —— DESIGN-SPEC "不做"清单 #6)。 ★ 裁决(设计规范审查已定,以此为准;20-wallet.css 头注/§4 注释已同步此口径): /wallet 视口唯一 unglint = 余额英雄数字。推荐卡在钱包语境**降级**——银发丝线强调 + unsilver 徽章,不用 unglint 面/ 亮边框;购买按钮走 secondary 层级。独立订阅路由(tag=subs)若渲染全页套餐视图,推荐卡才允许 unglint 描边(§8 预备规则,admin 表格页无套餐卡时惰性)。 blur 预算: 本文件新增 backdrop-filter = 0。钱包视口 3+1 名额已由 20-wallet.css 分配(顶栏/兑换面板/账单 dialog + select/popover 保留位)。套餐卡"玻璃化"用无 blur 配方: 半透明提亮面 + 1px 发丝线 + inset 顶高光 ——卡片落在 TitledCard 不透明 #111114 面上,blur 本无可模糊之物, 半透明底色即可透出承托面完成玻璃观感,且不占预算(DESIGN-SPEC §2 纪律: 表面靠提亮,不用厚阴影;shadow-sm 由地基 [data-slot=card] 规则整体接管)。动效: 本文件零新增 transition/animation(套餐卡 data-card-hover=false, 地基 hover 提亮亦不作用),reduced-motion 无需专门块。禁: 重定义 .un-glass/.un-balance-handoff/[data-slot=progress-indicator] (后者归 31-chrome.css §7,!important + 更晚源序,此处不得重复)。 ===================================================================== */ /* ===================================================================== §1 套餐卡阵列 —— 无 blur 玻璃化(wallet 语境) 半透明白叠加在 #111114 承托面上合成 ≈#17171b,第二级表面提亮; 发丝线 + 顶边 specular 完成配方。data-card-hover=false ⇒ 无 hover 态。 ===================================================================== */ body[data-un-route="topup"] .grid.grid-cols-1.gap-3 > [data-slot="card"] { background-color: rgba(237, 237, 242, 0.035); border-color: rgba(237, 237, 242, 0.12); box-shadow: 0 0 0 1px rgba(237, 237, 242, 0.08), inset 0 1px 0 rgba(237, 237, 242, 0.08); } /* ===================================================================== §2 推荐卡钱包语境降级(裁决核心) 源码 border-primary/70 经 token(--primary:#EDEDF2)合成 rgba(237,237,242,.7) ——过亮,与余额英雄数字争信号 ⇒ 压回 unsilver 发丝线强调: 比普通卡亮一档(0.4 银 vs 0.08 白),但绝不到 unglint 面/亮边框级。 ===================================================================== */ body[data-un-route="topup"] .grid.grid-cols-1.gap-3 > [data-slot="card"].border-primary\/70 { border-color: rgba(199, 199, 206, 0.4); box-shadow: 0 0 0 1px rgba(199, 199, 206, 0.28), inset 0 1px 0 rgba(237, 237, 242, 0.1); } /* 推荐徽章: variant=info 的 text-info/bg-info 已被 token(--info:#C7C7CE) 拉成银,此处显式钉死防上游变体调整,unsilver 字重不变 */ body[data-un-route="topup"] .grid.grid-cols-1.gap-3 > [data-slot="card"].border-primary\/70 [data-slot="status-badge"] { color: #c7c7ce; /* unsilver */ } /* 多推荐卡守卫(DESIGN-SPEC §5.4): isPopular 现实现只标首张(:532), 若后端/升级后标记多张,第 2+ 张降回普通卡,保证一屏一强调 */ body[data-un-route="topup"] .grid.grid-cols-1.gap-3 > [data-slot="card"].border-primary\/70 ~ [data-slot="card"].border-primary\/70 { border-color: rgba(237, 237, 242, 0.12); box-shadow: 0 0 0 1px rgba(237, 237, 242, 0.08), inset 0 1px 0 rgba(237, 237, 242, 0.08); } /* ===================================================================== §3 价格数字排版(wallet + subs 两语境共用字形规则) ===================================================================== */ body[data-un-route="topup"] .grid.grid-cols-1.gap-3 > [data-slot="card"] .text-primary.text-2xl, body[data-un-route="subs"] .grid.grid-cols-1.gap-3 > [data-slot="card"] .text-primary.text-2xl { font-variant-numeric: tabular-nums; letter-spacing: -0.01em; /* 仅数字/Latin,非中文 tracking */ line-height: 1.15; } /* wallet 语境价格颜色: 全部 unsilver(含推荐卡——裁决: 钱包页价格不亮)。与 20-wallet.css §4 的 main .text-primary 降级同值,此处更高特异性显式钉死,不依赖源序 */ body[data-un-route="topup"] .grid.grid-cols-1.gap-3 > [data-slot="card"] .text-primary.text-2xl { color: #c7c7ce; /* unsilver */ } /* ===================================================================== §4 周期/配额权益行层级文字 text-muted-foreground(#9A9AA2, ≥4.5:1 on ≈#17171b)保持; Check 图标 text-primary → unsilver(DESIGN-SPEC §5.4,显式钉死) */ body[data-un-route="topup"] .grid.grid-cols-1.gap-3 > [data-slot="card"] svg.text-primary { color: #c7c7ce; } /* 套餐标题(h4.font-semibold)满对比 unink,副标题维持 muted 两级层次 */ body[data-un-route="topup"] .grid.grid-cols-1.gap-3 > [data-slot="card"] h4 { color: var(--foreground); /* unink, ≥7:1 */ } /* ===================================================================== §5 购买按钮层级(裁决: 钱包语境 secondary) 源码 variant=outline(透明底)——升为实底 secondary,可点性清晰但让位余额英雄数字;disabled(达购买上限)保持 outline 透明底,天然退后一层。变体类 .bg-background / dark:bg-input/30 特异性 ≤(0,2,0),本规则稳压 */ body[data-un-route="topup"] .grid.grid-cols-1.gap-3 > [data-slot="card"] [data-slot="button"].bg-background:not(:disabled) { background-color: var(--secondary); color: var(--secondary-foreground); border-color: rgba(237, 237, 242, 0.14); } body[data-un-route="topup"] .grid.grid-cols-1.gap-3 > [data-slot="card"] [data-slot="button"].bg-background:not(:disabled):hover { background-color: #2a2a30; /* secondary hover 提亮一档(镜像 20-wallet §4) */ color: var(--foreground); } /* ===================================================================== §6 当前订阅状态面板 + 活动订阅列表 ===================================================================== */ /* 计费偏好/订阅状态面板(rounded-xl border): 卡内嵌层微抬 + 顶高光 */ body[data-un-route="topup"] .rounded-xl.border.p-3 { background-color: rgba(237, 237, 242, 0.02); border-color: var(--border); box-shadow: inset 0 1px 0 rgba(237, 237, 242, 0.05); } /* 活动订阅项(bg-background 凹陷井面,token 已给 #0A0A0B): 发丝线 + 配额/日期数字等宽对齐(Total Quota 1.2M/5M · Remaining …) */ body[data-un-route="topup"] .max-h-64 > .bg-background.rounded-md.border { border-color: rgba(237, 237, 242, 0.1); font-variant-numeric: tabular-nums; } /* 用量 Progress: track bg-muted 由 token 接管;indicator 的银灰统一由 31-chrome.css §7([data-slot=progress-indicator] !important)负责, 此处不重复(禁令区) */ /* ===================================================================== §7 加载骨架 / 空态 ===================================================================== */ /* 骨架: 变量(--skeleton-base/highlight)已由地基灰阶,不加 shimmer; 仅把套餐位大骨架(h-48)圆角对齐套餐卡,避免加载→内容跳形 */ body[data-un-route="topup"] .grid [data-slot="skeleton"].h-48 { border-radius: calc(var(--radius) - 2px); } /* 空态("暂无可用套餐" p.py-4.text-center,钱包 main 内唯一): 虚线发丝框收纳留白,muted 文字不与任何信号争亮 */ body[data-un-route="topup"] main p.py-4.text-center { border: 1px dashed rgba(237, 237, 242, 0.14); border-radius: calc(var(--radius) - 2px); padding-left: 1rem; padding-right: 1rem; color: var(--muted-foreground); } /* ===================================================================== §8 购买确认 dialog(SubscriptionPurchaseDialog,body portal) dialog 玻璃面由地基 [data-slot=dialog-content] 负责(占预算的是打开态, 20-wallet 已计入保留位)。dialog 内唯一亮信号 = 确认 CTA(bg-primary, portal 不在 main 内,20-wallet §4 降级不触及,保持 unglint)—— 因此"应付金额"价格(text-primary.text-lg)让位降银,数字等宽 */ body[data-un-route="topup"] [data-slot="dialog-content"] { font-variant-numeric: tabular-nums; } body[data-un-route="topup"] [data-slot="dialog-content"] .text-primary.text-lg { color: #c7c7ce; /* unsilver */ } /* ===================================================================== §9 tag=subs 路由(/subscriptions 与 /redemption-codes 管理页) 现实现是 data-table 体系(卡壳/表格/抽屉由 00/31 接管),本节仅: a) 数值列等宽对齐; b) 独立全页套餐视图的预备规则(裁决: 该语境推荐卡允许 unglint 描边;admin 表格页无套餐卡时以下规则惰性) ===================================================================== */ body[data-un-route="subs"] [data-slot="table"] { font-variant-numeric: tabular-nums; } /* 独立订阅视图推荐卡: unglint 描边 + 顶高光 0.12(DESIGN-SPEC §5.4 原案) */ body[data-un-route="subs"] .grid.grid-cols-1.gap-3 > [data-slot="card"].border-primary\/70 { border-color: rgba(237, 237, 242, 0.55); box-shadow: 0 0 0 1px rgba(237, 237, 242, 0.18), inset 0 1px 0 rgba(237, 237, 242, 0.12); } body[data-un-route="subs"] .grid.grid-cols-1.gap-3 > [data-slot="card"].border-primary\/70 [data-slot="status-badge"] { color: #ededf2; /* unglint 徽章文字(该视口唯一亮信号归属推荐卡) */ } /* 多推荐卡守卫: 第 2+ 张降回普通卡(同 §2 逻辑) */ body[data-un-route="subs"] .grid.grid-cols-1.gap-3 > [data-slot="card"].border-primary\/70 ~ [data-slot="card"].border-primary\/70 { border-color: var(--border); box-shadow: 0 0 0 1px rgba(237, 237, 242, 0.1), inset 0 1px 0 rgba(237, 237, 242, 0.06); } body[data-un-route="subs"] .grid.grid-cols-1.gap-3 > [data-slot="card"].border-primary\/70 ~ [data-slot="card"].border-primary\/70 [data-slot="status-badge"] { color: #c7c7ce; } /* 非推荐卡的价格/Check(.text-primary)→ unsilver,守一屏一信号 */ body[data-un-route="subs"] .grid.grid-cols-1.gap-3 > [data-slot="card"]:not(.border-primary\/70) .text-primary { color: #c7c7ce; } /* ================================================================ >>> PART: 30-pricing.css ================================================================ */ /* ===================================================================== unsigned 中转站 · 30-pricing.css —— 公开定价页(/pricing 模型广场) --------------------------------------------------------------------- 作用域: body[data-un-route="pricing"](00-runtime.js 写入;html 同步带 .un-route-pricing)。拼接顺序在 21-subs.css 之后、31-chrome.css 之前。事实来源: features/pricing/*(index.tsx / model-card.tsx / pricing-table.tsx / pricing-toolbar.tsx / pricing-sidebar.tsx / search-bar.tsx)+ index.356d257af7.css 逐一 grep 验证(h-[600px] / max-w-[1800px] / bg-muted\/60 / hover\:bg-muted\/20 / grid-cols-[330px… 均存在)。纪律要点(DESIGN-SPEC §5.5): 定价页是信息页,零 unglint 面积信号—— 页内唯一保留的 unglint 是 PublicHeader 的「登录」CTA(不在 main 内, 不受本文件降级规则影响)。与 21-subs.css 的关系: /pricing 没有订阅套餐卡(那在 /wallet); 本页"套餐卡形态" = 模型卡,按同一套视觉词汇独立实现 (unwell 面 + 发丝线 + 顶边 specular),不依赖 21 的类名 ⇒ 无加载顺序耦合。 ===================================================================== */ /* ===================================================================== §1 彩色氛围层中和(风险清单 #2) 锚点: features/pricing/index.tsx 164-178 行 aria-hidden 装饰层, 内联 style 三段 oklch 彩色 radial-gradient。display 未内联 ⇒ 类选择器即可杀。 .fixed 的 PublicHeader 不带 .absolute,不会误伤。 ===================================================================== */ body[data-un-route="pricing"] div[aria-hidden].pointer-events-none.absolute.inset-x-0.top-0 { display: none; } /* ===================================================================== §2 英雄区 + 搜索 h1/统计文案吃 token(unink/unmuted)。搜索框是裸 input(非 data-slot=input, search-bar.tsx 55-68 行),单独铺 unwell 半透明面;其 focus:ring-primary/20 编译后即 unglint 20% 银环,无需覆盖。 ===================================================================== */ body[data-un-route="pricing"] header input[type="text"] { background-color: rgba(17, 17, 20, 0.8); /* unwell @80%,§4.2 同款 */ border-color: var(--input); transition: border-color 0.15s ease-out, box-shadow 0.15s ease-out; } /* placeholder 原生 placeholder:text-muted-foreground/50 在输入面上 ≈3.1:1, 低于次要文字 4.5:1 门禁 → 提到全值 unmuted(6.75:1) */ body[data-un-route="pricing"] header input[type="text"]::placeholder { color: var(--muted-foreground); } /* 数字统计(模型数)与全页货币数字: 等宽数位 */ body[data-un-route="pricing"] .font-mono, body[data-un-route="pricing"] .tabular-nums { font-variant-numeric: tabular-nums; } /* ===================================================================== §3 页面级亮信号降级(零 unglint 面积信号) 命中: 工具栏分段控件活动项(pricing-toolbar.tsx 122 行 'bg-primary text-primary-foreground shadow-sm')、卡片/表格区任何 default 按钮。(0,2,2) 压过 .bg-primary/hover 派生 (≤0,2,0)。 PublicHeader 登录 CTA 在 main 之外,保持 unglint。 ===================================================================== */ body[data-un-route="pricing"] main .bg-primary { background-color: var(--secondary); /* unghost */ background-image: none; /* 撤销 00-tokens 的主按钮金属高光 */ color: var(--foreground); /* unink */ box-shadow: inset 0 1px 0 rgba(237, 237, 242, 0.08); } /* text-primary 链接/数值 → unsilver(信息页不占亮信号预算) */ body[data-un-route="pricing"] main .text-primary { color: var(--chart-2); /* #c7c7ce unsilver */ } /* ===================================================================== §4 工具栏与筛选侧栏表面(裸 div.rounded-xl.border / aside.rounded-xl.border) 第一级表面 unwell + 发丝线 + 顶边 specular(§4.3 卡片同款,比玻璃低一档) ===================================================================== */ body[data-un-route="pricing"] main > .rounded-xl.border, body[data-un-route="pricing"] aside.rounded-xl.border { background-color: var(--card); /* unwell #111114 */ border-color: var(--border); box-shadow: inset 0 1px 0 rgba(237, 237, 242, 0.06); } /* 分段控件容器(bg-muted/60 胶囊)在 unwell 面上退暗一档,凹槽感 */ body[data-un-route="pricing"] main .bg-muted\/60 { background-color: rgba(10, 10, 11, 0.6); /* unblack @60% */ } /* ===================================================================== §5 模型卡(裸 div.group.rounded-xl.border,非 data-slot=card) 与订阅套餐卡同一视觉词汇: unwell 面 + 发丝线 + 顶边 specular; hover 只提亮发丝线与底色(禁位移/禁 drop-shadow)。本规则特异性高于 hover:bg-muted/20 (0,2,0) ⇒ 自带 hover 一并接管。 ===================================================================== */ body[data-un-route="pricing"] main .group.rounded-xl.border { background-color: var(--card); border-color: var(--border); box-shadow: inset 0 1px 0 rgba(237, 237, 242, 0.06); } @media (prefers-reduced-motion: no-preference) { body[data-un-route="pricing"] main .group.rounded-xl.border { transition: border-color 150ms ease, background-color 150ms ease; } } body[data-un-route="pricing"] main .group.rounded-xl.border:hover { background-color: var(--table-header-hover); /* #16161a 提亮半档 */ border-color: rgba(237, 237, 242, 0.2); } /* 卡内「详情/复制」小按钮(裸 button.rounded-md.border) */ body[data-un-route="pricing"] main .group.rounded-xl.border button.rounded-md.border { border-color: var(--border); } body[data-un-route="pricing"] main .group.rounded-xl.border button.rounded-md.border:hover { border-color: rgba(237, 237, 242, 0.2); } /* ===================================================================== §6 价格表(表格视图,data-table 体系) 斑马纹 unwell/unsurface + 表头发丝线;容器发丝线圆角(DataTableView wrapper = div.overflow-hidden.rounded-lg.border)。行 hover 需自带(斑马纹特异性 (0,3,3) 已压过组件 hover 工具类)。 ===================================================================== */ body[data-un-route="pricing"] .overflow-hidden.rounded-lg.border { background-color: var(--card); border-color: var(--border); } body[data-un-route="pricing"] [data-slot="table-header"] { background-color: var(--table-header); /* unwell */ } body[data-un-route="pricing"] [data-slot="table-header"] tr { border-bottom: 1px solid rgba(237, 237, 242, 0.14); /* 表头发丝线(unrule 档) */ } body[data-un-route="pricing"] [data-slot="table"] tbody tr:nth-child(odd) { background-color: var(--card); /* unwell #111114 */ } body[data-un-route="pricing"] [data-slot="table"] tbody tr:nth-child(even) { background-color: var(--popover); /* unsurface #141418 */ } body[data-un-route="pricing"] [data-slot="table"] tbody tr:hover { background-color: var(--muted); /* #1e1e23,两种斑马底上均可辨 */ } body[data-un-route="pricing"] [data-slot="table"] tbody tr[data-state="selected"] { background-color: var(--muted); } /* 单元格价格数字: unink + 等宽(§2 的 .font-mono 规则已覆盖数位;此处仅色) */ body[data-un-route="pricing"] [data-slot="table-cell"] .font-mono { color: var(--foreground); } /* ===================================================================== §7 reduced-motion: 本文件新增过渡全部即时 ===================================================================== */ @media (prefers-reduced-motion: reduce) { body[data-un-route="pricing"] header input[type="text"], body[data-un-route="pricing"] main .group.rounded-xl.border { transition: none; } } /* ================================================================ >>> PART: 31-chrome.css ================================================================ */ /* ===================================================================== unsigned 中转站 · 31-chrome.css —— 控制台整体外壳 + 全站兜底暗场化 --------------------------------------------------------------------- 作用域: 控制台外壳选择器天然只存在于 AuthenticatedLayout DOM (sidebar-wrapper 体系),无需路由前缀 —— 这同时覆盖 /wallet(topup)、 /subscriptions(subs)等 data-un-route ≠ "console" 但同壳的页面 (runtime 的 body 标记是单值,html 类 un-route-console 才是并集)。兜底层(§7-§9)全局生效,保证未专门设计的页面(dashboard/playground/ admin/home)整体和谐。拼接顺序: 最后一件。事实来源: components/ui/sidebar.tsx / breadcrumb.tsx / drawer.tsx / progress.tsx、components/data-table/core/pagination.tsx、 components/layout/components/{header,app-header,public-header}.tsx; 构建 CSS 已验证: @container\/pagination、backdrop-blur-2xl、 md:peer-data-[variant=inset]:shadow-sm、data-slot=progress-indicator、 bg-clip-text、bg-gradient-to-r 等锚点均存在。与 00-tokens-base.css 的分工: 顶栏玻璃、活动侧栏项银左缘、弹层玻璃、卡片 hover 已由地基完成 —— 本文件绝不重复定义,只补外壳与兜底。 ===================================================================== */ /* ===================================================================== §1 公共页固定顶栏(PublicHeader,pricing/home/about 共用) scrolled 态胶囊自带 bg-background/60 + backdrop-blur-2xl(40px,超预算) + 双层 drop-shadow(违反纪律)。锚点 .backdrop-blur-2xl 仅 scrolled 时存在 ⇒ 非 scrolled 态零 backdrop-filter,不占预算。 (0,5,2) 压过全部工具类;box-shadow 直接声明接管 ring/shadow 合成链。 ===================================================================== */ header.pointer-events-none.fixed.inset-x-0.top-0 nav.backdrop-blur-2xl { background-color: rgba(10, 10, 11, 0.72); -webkit-backdrop-filter: blur(16px) saturate(1); backdrop-filter: blur(16px) saturate(1); box-shadow: 0 0 0 1px var(--border), inset 0 1px 0 rgba(237, 237, 242, 0.08); /* 发丝线 + 顶边 specular 替代阴影 */ } /* 移动端全屏菜单遮罩(public-header.tsx 343 行: bg-background/98 + fixed inset-0 + backdrop-blur-2xl): 98% 不透明底上 40px blur 纯耗 GPU 且超出 14-20px 纪律带宽 → 摘除 blur(视觉无损,token 已保证底色为 unblack) */ div.bg-background\/98.fixed.inset-0 { -webkit-backdrop-filter: none; backdrop-filter: none; } /* ===================================================================== §2 侧边栏外壳任务口径: 侧栏 unwell 面(--sidebar 变量本身必须保持 unblack —— body has-[div[data-variant=inset]]:bg-sidebar 会把它当控制台外框底色, 改变量会漏色,所以只给 sidebar-inner 铺面)。选中项银左缘由 00-tokens-base §6 负责,此处不重复。 ===================================================================== */ [data-slot="sidebar-inner"] { background-color: var(--card); /* unwell #111114,盖过 .bg-sidebar 工具类 */ box-shadow: inset 0 1px 0 rgba(237, 237, 242, 0.06); } /* inset 变体(线上默认): 容器自带 p-2 浮岛间距 ⇒ 补圆角 + 发丝线成板 */ [data-slot="sidebar"][data-variant="inset"] [data-slot="sidebar-inner"] { border: 1px solid var(--sidebar-border); border-radius: 12px; } /* 非 inset 变体兜底: 右缘发丝线 */ [data-slot="sidebar"][data-variant="sidebar"] [data-slot="sidebar-container"] { border-color: var(--sidebar-border); } /* 分组标题 12px 地板(nav-group 的 text-[11px] 低于纪律下限)+ 对比度修复 (原 text-muted-foreground/70 ≈4.9:1 → 提为全值 unmuted 7:1)。锚点三保险: SidebarGroupLabel 走 useRender,slot/sidebar 两个 state 键与 sidebar-menu-button 同机制(后者 data-sidebar 已被 PAGE-MAP DOM 证实), 另挂 .text-\[11px\] 类锚兜底(sidebar 内该类唯一属于分组标题) */ [data-slot="sidebar-group-label"], [data-sidebar="group-label"], [data-slot="sidebar"] .text-\[11px\] { font-size: 12px; color: var(--muted-foreground); } /* 折叠轨道 hover 指示线 */ [data-slot="sidebar-rail"]:hover::after { background-color: var(--sidebar-border); } /* ===================================================================== §3 主内容面(sidebar-inset)与页脚 md+ 下 tailwind 的 peer-data-[variant=inset]:shadow-sm 特异性 (0,2,0) 会压过地基的 main[data-slot=…] (0,1,1) ⇒ 此处以 (0,2,1) 终审: 禁 drop-shadow,层次 = unblack 场上 1px 发丝线圈。 ===================================================================== */ [data-slot="sidebar-wrapper"] main[data-slot="sidebar-inset"] { background-color: var(--background); box-shadow: 0 0 0 1px var(--border); } /* ===================================================================== §4 面包屑(SectionPageLayout.Breadcrumb 槽位;BreadcrumbLink 同 Badge 走 useRender 无 data-slot 属性 ⇒ 锚 list 内 a) ===================================================================== */ [data-slot="breadcrumb"], [data-slot="breadcrumb-list"] { color: var(--muted-foreground); } [data-slot="breadcrumb-list"] a { color: var(--muted-foreground); transition: color 0.15s ease-out; } [data-slot="breadcrumb-list"] a:hover { color: var(--foreground); } [data-slot="breadcrumb-page"] { color: var(--foreground); } [data-slot="breadcrumb-separator"] { color: #3a3a41; /* unrule */ } /* ===================================================================== §5 数据表格(keys / usage-logs / subscriptions / redemption-codes / channels / users … 全部 data-table 体系统一暗场) 30-pricing 的斑马纹规则特异性更高,不受本节影响。 ===================================================================== */ /* DataTableView 外框(div.overflow-hidden.rounded-lg.border) */ .overflow-hidden.rounded-lg.border:has([data-slot="table"]) { background-color: var(--card); border-color: var(--border); } [data-slot="table-header"] { background-color: var(--table-header); } [data-slot="table-header"] tr { border-bottom: 1px solid rgba(237, 237, 242, 0.14); /* 表头发丝线 */ } [data-slot="table"] tbody tr:hover { background-color: var(--table-header-hover); /* #16161a */ } [data-slot="table"] tbody tr[data-state="selected"] { background-color: var(--muted); } /* —— 分页器(data-table/core/pagination.tsx,容器类 @container/pagination) 当前页按钮是 default 变体(bg-primary)⇒ 每张表格页会多出一枚 unglint 面积信号,违反预算 —— 统一降级为 unghost 抬面 + unink 数字 */ .\@container\/pagination [data-slot="button"].bg-primary { background-color: var(--secondary); background-image: none; /* 撤销地基的主按钮金属高光 */ color: var(--foreground); box-shadow: inset 0 1px 0 rgba(237, 237, 242, 0.08); } /* ===================================================================== §6 Drawer(vaul;模型详情抽屉 / 移动端抽屉)—— 不透明第一级表面, 不进玻璃白名单(遮罩同 dialog 规格) ===================================================================== */ [data-slot="drawer-overlay"] { background-color: rgba(10, 10, 11, 0.72); /* 源码遮罩带 supports-backdrop-filter:backdrop-blur-xs → 摘除, 遮罩不进玻璃白名单(与 dialog-overlay 同规格) */ -webkit-backdrop-filter: none; backdrop-filter: none; } [data-slot="drawer-content"] { background-color: var(--card); border-color: var(--border); } /* ===================================================================== §7 进度条(keys 配额列 / wallet 订阅用量) 默认 indicator = bg-primary(unglint)且一屏可出现多条 ⇒ 统一银灰; 语义例外经由父级 arbitrary-variant 类名识别(api-keys-columns.tsx: '[&_[data-slot=progress-indicator]]:bg-rose-500' 等,类属性子串可匹配), critical 保低饱和红、low 保压饱和 amber。同为 !important 时源序后者胜。 ===================================================================== */ [data-slot="progress-indicator"] { background-color: var(--chart-2) !important; /* unsilver */ } [class*="bg-amber-500"] [data-slot="progress-indicator"] { background-color: var(--warning) !important; /* #d9a05b */ } [class*="bg-rose-500"] [data-slot="progress-indicator"] { background-color: var(--destructive) !important; /* #e5717a */ } /* ===================================================================== §8 全站彩色工具类闸门(兜底层核心) 源码在 keys/pricing 详情/home 等处直写 tailwind 色相工具类 (emerald/blue/rose/amber…),变量层管不到 ⇒ 按语义归并: - 冷色/装饰色 → 银灰(text)/中性 tint(bg)/发丝线(border) - red/rose → 低饱和红(保留错误语义,防误操作纪律) - amber/yellow/orange 文字 → 银灰(装饰居多;真警示走 --warning 变量, 不受影响);背景/描边 → 中性(进度条例外已在 §7 更晚声明接管) text/border 用 [class*=](需连变体前缀一并压住); bg 用 [class^=]/[class*=" "](整 token 匹配,避免误伤挂在父级的 [&_…]:bg-rose-500 这类 arbitrary-variant 载体类)。 !important: 必须压过 .dark\:… (0,2,0) 变体与 hover 态。 ===================================================================== */ /* —— 文字: 冷色/装饰 → unsilver —— */ [class*="text-emerald-"], [class*="text-green-"], [class*="text-teal-"], [class*="text-lime-"], [class*="text-cyan-"], [class*="text-sky-"], [class*="text-blue-"], [class*="text-indigo-"], [class*="text-violet-"], [class*="text-purple-"], [class*="text-fuchsia-"], [class*="text-pink-"], [class*="text-yellow-"], [class*="text-orange-"] { color: #c7c7ce !important; } /* —— 文字: 红族 → 低饱和红(语义保留) —— */ [class*="text-red-"], [class*="text-rose-"] { color: #e5717a !important; } /* —— 背景: 冷色/装饰 → 中性 tint —— */ [class^="bg-emerald-"], [class*=" bg-emerald-"], [class^="bg-green-"], [class*=" bg-green-"], [class^="bg-teal-"], [class*=" bg-teal-"], [class^="bg-lime-"], [class*=" bg-lime-"], [class^="bg-cyan-"], [class*=" bg-cyan-"], [class^="bg-sky-"], [class*=" bg-sky-"], [class^="bg-blue-"], [class*=" bg-blue-"], [class^="bg-indigo-"], [class*=" bg-indigo-"], [class^="bg-violet-"], [class*=" bg-violet-"], [class^="bg-purple-"], [class*=" bg-purple-"], [class^="bg-fuchsia-"], [class*=" bg-fuchsia-"], [class^="bg-pink-"], [class*=" bg-pink-"], [class^="bg-amber-"], [class*=" bg-amber-"], [class^="bg-yellow-"], [class*=" bg-yellow-"], [class^="bg-orange-"], [class*=" bg-orange-"] { background-color: rgba(237, 237, 242, 0.08) !important; } /* —— 背景: 红族 → 低饱和红 tint —— */ [class^="bg-red-"], [class*=" bg-red-"], [class^="bg-rose-"], [class*=" bg-rose-"] { background-color: rgba(229, 113, 122, 0.14) !important; } /* —— 背景: dark:/hover: 变体同闸(源码 70+ 处 dark:bg-* 彩底,强制 .dark 下全部生效,整 token 匹配抓不到)。前缀串 "dark:bg-x-"/"hover:bg-x-" 不会出现在 [&_…]:bg-* 载体类里(载体无这些前缀),§7 进度条例外不受误伤; dark:hover:bg-* 含 "hover:bg-" 子串,一并命中 —— */ [class*="dark:bg-emerald-"], [class*="hover:bg-emerald-"], [class*="dark:bg-green-"], [class*="hover:bg-green-"], [class*="dark:bg-teal-"], [class*="hover:bg-teal-"], [class*="dark:bg-lime-"], [class*="hover:bg-lime-"], [class*="dark:bg-cyan-"], [class*="hover:bg-cyan-"], [class*="dark:bg-sky-"], [class*="hover:bg-sky-"], [class*="dark:bg-blue-"], [class*="hover:bg-blue-"], [class*="dark:bg-indigo-"], [class*="hover:bg-indigo-"], [class*="dark:bg-violet-"], [class*="hover:bg-violet-"], [class*="dark:bg-purple-"], [class*="hover:bg-purple-"], [class*="dark:bg-fuchsia-"], [class*="hover:bg-fuchsia-"], [class*="dark:bg-pink-"], [class*="hover:bg-pink-"], [class*="dark:bg-amber-"], [class*="hover:bg-amber-"], [class*="dark:bg-yellow-"], [class*="hover:bg-yellow-"], [class*="dark:bg-orange-"], [class*="hover:bg-orange-"] { background-color: rgba(237, 237, 242, 0.08) !important; } [class*="dark:bg-red-"], [class*="hover:bg-red-"], [class*="dark:bg-rose-"], [class*="hover:bg-rose-"] { background-color: rgba(229, 113, 122, 0.14) !important; } /* 孤例: system-tasks-panel 的 [&_span]:bg-sky-500 状态点(载体前缀闸抓不到) → 点位灰化为 unsteel;作用域与原工具类一致(该载体下全部 span) */ [class*="[&_span]:bg-sky-"] span { background-color: #85858d !important; } /* 彩色 ring: 仅 amber 族在源码出现(home feature 卡 / 表单 dirty 徽标), 均为装饰性 1px 环 → 压成发丝线中性环(--tw-ring-color 是 ring 合成源) */ [class*="ring-amber-"] { --tw-ring-color: rgba(237, 237, 242, 0.14) !important; } /* —— 描边: 冷色/装饰 → 发丝线;红族 → 低饱和红线 —— */ [class*="border-emerald-"], [class*="border-green-"], [class*="border-teal-"], [class*="border-lime-"], [class*="border-cyan-"], [class*="border-sky-"], [class*="border-blue-"], [class*="border-indigo-"], [class*="border-violet-"], [class*="border-purple-"], [class*="border-fuchsia-"], [class*="border-pink-"], [class*="border-amber-"], [class*="border-yellow-"], [class*="border-orange-"] { border-color: var(--border) !important; } [class*="border-red-"], [class*="border-rose-"] { border-color: rgba(229, 113, 122, 0.35) !important; } /* ===================================================================== §9 渐变闸门(home hero/cta/stat 等装饰渐变) 渐变文字(bg-clip-text + text-transparent)不能直接 none —— 文字会消失, 改银白渐变;其余装饰渐变直接清除,背景回落各自 bg-color(§8 已灰)。 ===================================================================== */ [class*="bg-clip-text"][class*="bg-gradient-to-"] { background-image: linear-gradient(135deg, #ededf2 0%, #c7c7ce 100%) !important; } [class*="bg-gradient-to-"]:not([class*="bg-clip-text"]) { background-image: none !important; } /* ===================================================================== §10 对比度与字号物理门禁(全站兜底) - text-muted-foreground/40·50·60 派生在 unblack 场 ≈2.4-3.6:1,跌破次要文字 4.5:1 门禁 → 统一钳到 uncomment #85858D(5.3:1 on unblack)。 /30 是纯装饰分隔符(·/—)不动;disabled: 变体是独立 token 不受影响 (禁用态豁免);/70·/80 本身 ≥4.9:1 保留层次。 - 字号地板 12px: text-[9px]/[10px]/[11px] 全部提为 12px(pricing 工具栏计数徽章、侧栏分组标题、playground 参数计数点等;构建 CSS 三类均存在, 8px 不存在)。若个别微徽章溢出由 QA 回报个案处理。 ===================================================================== */ .text-muted-foreground\/40, .text-muted-foreground\/50, .text-muted-foreground\/60 { color: #85858d; } .text-\[9px\], .text-\[10px\], .text-\[11px\] { font-size: 12px; } /* ===================================================================== §11 reduced-motion: 本文件新增过渡全部即时 ===================================================================== */ @media (prefers-reduced-motion: reduce) { [data-slot="breadcrumb-list"] a { transition: none; } } /* ================================================================ >>> PART: 40-qa-fixes.css ================================================================ */ /* ===================================================================== unsigned 中转站 · 40-qa-fixes.css —— 浏览器 QA 视觉复核修正层 --------------------------------------------------------------------- 来源: 本机 headless 浏览器逐页 QA(login/signup/wallet/pricing/home, 桌面 1440 + 移动 390),对照品牌纪律「纯灰阶 · 每视口唯一亮信号」发现的三处残留色相/品牌泄漏。本文件在合并顺序中【最后】加载,故: - 对 app 的 dark 工具类(特异性 (0,2,0))用同/高特异性 + !important 覆盖; - 对元素【行内 style】(如头像哈希色)必须 !important 才能压过。刻意与语义纪律一致: 保留 --destructive 低饱和红(真错误必须可见), 仅中和「装饰性」暖色(warning 徽章)与「按用户名哈希生成」的头像随机色。 ===================================================================== */ /* --------------------------------------------------------------------- QA-1 · 导航头像回退底色泄漏(全站认证页可见) 现象: [data-slot="avatar-fallback"] 带行内 style `background-color: rgb(141,55,185); color:white`(new-api 按用户名哈希生成的随机品牌色,紫/蓝/绿等),是灰阶场里唯一的高彩块。处置: 强制炭灰面 + 银字 + 发丝线,与玻璃体系同源;!important 压行内 style。 --------------------------------------------------------------------- */ [data-slot="avatar-fallback"] { background-color: #1b1b1f !important; background-image: linear-gradient(180deg, #232328 0%, #141418 100%) !important; color: #c7c7ce !important; box-shadow: inset 0 0 0 1px rgba(237, 237, 242, 0.10) !important; font-weight: 600 !important; } /* 头像根框的发丝线,让灰阶头像仍有边界(部分皮肤用 ring) */ [data-slot="avatar"] { box-shadow: inset 0 0 0 1px rgba(58, 58, 65, 0.9); } /* --------------------------------------------------------------------- QA-2 · warning 语义色被【装饰性】使用导致的暖色泄漏现象: 定价/模型广场页 "Dynamic Pricing" 徽章用 Badge 的 warning 变体, text-warning = --warning(#d9a05b 琥珀),成为整页唯一色相,且它标注的是"动态定价"这种非警示信息,违反「每视口唯一亮信号=银白」。处置: 把 text-warning / bg-warning 的【装饰用法】中和为银灰面。真正的告警(表单错误/额度不足)在 new-api 里走 --destructive(低饱和红, 本层不动),故中和 warning 不损失关键可用性信号。用 [class*=] 属性选择器 + !important 覆盖 app 的 dark:text-* 工具类。 --------------------------------------------------------------------- */ [class*="text-warning"] { color: #c7c7ce !important; } /* warning 徽章/标签的浅色底 → 中性表面(第二级),边界走发丝线 */ [class*="bg-warning"] { background-color: #141418 !important; border-color: rgba(237, 237, 242, 0.12) !important; } /* Badge warning 变体常同时带 border-warning/ring-warning,一并去色相 */ [data-slot="badge"][class*="warning"], [data-slot="badge"] [class*="warning"] { border-color: rgba(237, 237, 242, 0.14) !important; } /* --------------------------------------------------------------------- QA-3 · amber/warning 图标底色兜底(dynamic-pricing-breakdown 等处的 size-6 rounded-lg bg-amber-*/text-amber-* 图标章) 现象: 展开"动态定价明细"时有 bg-amber-500/20 的小图标块。处置: 图标块底色转中性,图标转银,保持信息可读、去除色相。 --------------------------------------------------------------------- */ [class*="bg-amber"], [class*="bg-orange"] { background-color: rgba(237, 237, 242, 0.08) !important; } [class*="text-orange"] { color: #c7c7ce !important; } /* ================================================================ >>> PART: 50-premium.css ================================================================ */ /* ===================================================================== unsigned 中转站 · 50-premium.css —— 高级化迭代层 (v2) --------------------------------------------------------------------- 目标(用户四维度): 排版 · 高级感 · 科技感 · 简洁感。参考: 月之暗面 moonshot.cn 的高级黑 —— 纯黑场 + 日食径向光环 + 灰阶→彩色 hover + 轻字重大留白 + 极简 pill + 精修玻璃。保留 unsigned 银黑愿景(灰阶纪律 + 每视口唯一亮信号),只把"质感"拉满。合并顺序最后一件 → 同/高特异性 + !important 覆盖前面各层与 app 工具类。本层新增语义 token(集中定义,便于统一调参): ===================================================================== */ :root, html.dark, body[data-theme-preset] { /* —— 更深的纯黑场与精修表面阶梯(灰阶,无色相) —— */ --un-void: #060607; /* 页面场(比 v1 #0A0A0B 更深,近纯黑) */ --un-surface-1: #0d0d0f; /* 第一级表面 */ --un-surface-2: #151518; /* 第二级表面/卡面 */ --un-surface-3: #1c1c20; /* 第三级(悬浮/选中) */ --un-hair: rgba(255, 255, 255, 0.075); /* 发丝线 */ --un-hair-strong: rgba(255, 255, 255, 0.14); --un-specular: rgba(255, 255, 255, 0.10); /* 顶边高光 */ --un-ink: #f5f5f3; /* 正文 */ --un-silver: #c9c9d0; /* 次级银 */ --un-muted: #8a8a93; /* 静默 */ --un-faint: #5c5c64; /* 极弱(占位/分隔) */ --un-glint: #ffffff; /* 唯一亮信号(纯白,比 v1 更亮更贵) */ --un-mono: "SF Mono", "JetBrains Mono", "Roboto Mono", ui-monospace, Menlo, monospace; --un-ease: cubic-bezier(0.22, 1, 0.36, 1); /* premium ease-out */ } /* 把新场色接回 app 的 shadcn 变量组(灰阶重映射,加深) */ html.dark, body[data-theme-preset] { --background: var(--un-void) !important; --card: var(--un-surface-2) !important; --popover: var(--un-surface-2) !important; --muted: var(--un-surface-1) !important; --border: var(--un-hair) !important; --input: var(--un-hair-strong) !important; --foreground: var(--un-ink) !important; --muted-foreground: var(--un-muted) !important; --ring: rgba(255, 255, 255, 0.28) !important; } /* 页面场兜底(防任何层露出旧色) */ html.dark body, body[data-unsigned] { background-color: var(--un-void) !important; } /* ===================================================================== §1 · 排版 —— 轻字重 · 大字阶 · 讲究的字距(premium 的第一信号) ===================================================================== */ body[data-unsigned] { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; } /* 大标题: 更轻的字重 + 收紧字距 + 略降行高(Moonshot 的克制感) 用 [class~=] 精确 token —— 避免误伤 md:text-3xl 等响应式变体(codex 审查) */ body[data-unsigned] h1, body[data-unsigned] h2, body[data-unsigned] [class~="text-4xl"], body[data-unsigned] [class~="text-5xl"], body[data-unsigned] [class~="text-3xl"] { font-weight: 400 !important; letter-spacing: -0.02em !important; line-height: 1.08 !important; color: var(--un-ink) !important; } body[data-unsigned] [class~="text-2xl"], body[data-unsigned] [class~="text-xl"] { font-weight: 500 !important; letter-spacing: -0.01em !important; } /* eyebrow / 小标签 / 导航 / 表头: 大写 + 慷慨字距 + 静默色(高级感核心手法) */ body[data-unsigned] [class~="uppercase"], body[data-unsigned] thead th { letter-spacing: 0.18em !important; font-weight: 500 !important; } /* 数字/价格/技术标签走等宽(科技感) */ body[data-unsigned] [class~="tabular-nums"], body[data-unsigned] [class~="font-mono"], body[data-unsigned] code, body[data-unsigned] pre, .un-route-wallet [data-slot="card"] [class~="text-3xl"], .un-route-wallet [data-slot="card"] [class~="text-4xl"] { font-family: var(--un-mono) !important; letter-spacing: -0.01em !important; font-variant-numeric: tabular-nums; } /* ===================================================================== §2 · 招牌日食光环层(#un-aura) —— Moonshot 的灵魂元素纯 CSS 绘制: 中心暗盘 + 一圈冷白光环 rim + 大范围柔光晕 + 细颗粒。默认隐藏,仅 auth / home / pricing 路由显现(强度递减)。 ===================================================================== */ #un-aura { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; opacity: 0; transition: opacity 1.2s var(--un-ease); contain: strict; } /* halo: 日食光环本体(径向 rim of light + 外扩柔光) */ #un-aura > span:first-child { position: absolute; left: 50%; top: 38%; width: min(78vw, 940px); aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%; background: /* 极外层柔光晕(冷白,极低透明) */ radial-gradient(circle at 50% 50%, rgba(233, 233, 242, 0.10) 0%, rgba(233, 233, 242, 0.05) 28%, rgba(233, 233, 242, 0.015) 46%, transparent 62%), /* 光环 rim: 亮环由一条窄的径向亮带构成 */ radial-gradient(circle at 50% 50%, transparent 39.6%, rgba(214, 216, 226, 0.10) 40.4%, rgba(244, 245, 250, 0.42) 42.2%, rgba(255, 255, 255, 0.62) 43%, rgba(244, 245, 250, 0.30) 44%, rgba(180, 182, 194, 0.06) 46.5%, transparent 50%); filter: blur(0.4px); will-change: transform, opacity; animation: un-aura-breathe 12s ease-in-out infinite; } /* grain: 极细胶片颗粒 + 一处 specular glint(镜头眩光点) */ #un-aura > span:last-child { position: absolute; left: 50%; top: 38%; width: min(78vw, 940px); aspect-ratio: 1; transform: translate(-50%, -50%) rotate(-24deg); border-radius: 50%; /* glint: 光环右下一点高光,模拟镜头眩光 */ background: radial-gradient(circle at 71% 66%, rgba(255, 255, 255, 0.85) 0%, rgba(255, 255, 255, 0.35) 0.5%, transparent 2.4%); mix-blend-mode: screen; animation: un-aura-glint 12s ease-in-out infinite; } @keyframes un-aura-breathe { 0%, 100% { transform: translate(-50%, -50%) scale(1); opacity: 0.9; } 50% { transform: translate(-50%, -50%) scale(1.035); opacity: 1; } } @keyframes un-aura-glint { 0%, 100% { opacity: 0.55; } 50% { opacity: 0.9; } } /* 路由级显隐与强度。 fixed #un-aura 只在【内容层透明】的 auth 页真正可见并作为主光环; home/pricing 的内容层是不透明 .bg-background,fixed 光环被其盖住 → 这两页的招牌光环改由 .bg-background 的 background-image 承载(见下), 故此处把 home/pricing 的 fixed aura 关掉,避免"双光环叠加发雾"(codex 审查)。 */ html.un-route-auth #un-aura { opacity: 1; } html.un-route-home #un-aura, html.un-route-pricing #un-aura { opacity: 0; } /* 顶部微暗渐晕(vignette): 仅 auth/home(内容层透明或已受控), 不施于 console/pricing 等数据页,避免压暗表格/卡片边缘内容(codex 审查)。 */ html.un-route-auth body[data-unsigned]::after, html.un-route-home body[data-unsigned]::after { content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none; background: radial-gradient(120% 80% at 50% 0%, transparent 45%, rgba(6, 6, 7, 0.5) 100%); } /* 首页/营销页的主背景层(.bg-background)是不透明的,会盖住 fixed 光环。故把招牌辉光直接叠进它的 background-image: 顶部日食式冷白光环 + 深黑底。同时把该层统一到更深的 void 黑(修 --background 在深层解析回退到旧值的问题)。 */ html.un-route-home [class*="bg-background"] { background-color: var(--un-void) !important; background-image: radial-gradient(58% 42% at 50% 8%, rgba(233, 233, 242, 0.09) 0%, rgba(233, 233, 242, 0.035) 34%, transparent 60%), radial-gradient(closest-side circle at 50% 8%, transparent 40.5%, rgba(244, 245, 250, 0.28) 42.3%, rgba(255, 255, 255, 0.42) 43.2%, rgba(200, 202, 212, 0.10) 45%, transparent 50%) !important; background-repeat: no-repeat !important; background-size: 100% 1100px, 1500px 1500px !important; background-position: 50% 0, 50% -560px !important; } /* ===================================================================== §3 · 玻璃/表面精修(性能分层,codex 审查采纳) - 普通卡(可能一屏几十张,如仪表盘/钱包): 近实色黑灰面 + 顶边高光 + 发丝线, 【不用 backdrop-filter】,避免多层模糊拖垮 GPU。 - 真·玻璃(每视口至多 1-2 个): 仅 dialog / popover / select 弹层用 blur。认证主卡与顶栏的 blur 各自在 §6 / §7 定义(也是每视口 1 个)。 ===================================================================== */ body[data-unsigned] [data-slot="card"] { background: linear-gradient(180deg, rgba(255, 255, 255, 0.028) 0%, rgba(255, 255, 255, 0) 42%), #131316 !important; border: 1px solid var(--un-hair) !important; box-shadow: inset 0 1px 0 0 var(--un-specular), 0 1px 0 0 rgba(0, 0, 0, 0.4), 0 24px 60px -30px rgba(0, 0, 0, 0.85) !important; border-radius: 16px !important; } /* 弹层才是真玻璃(每视口至多 1-2 个,性能可控) */ body[data-unsigned] [data-slot="dialog-content"], body[data-unsigned] [data-slot="popover-content"], body[data-unsigned] [data-slot="select-content"], body[data-unsigned] [data-slot="dropdown-menu-content"] { background: linear-gradient(180deg, rgba(255, 255, 255, 0.03) 0%, rgba(255, 255, 255, 0) 42%), rgba(19, 19, 22, 0.82) !important; backdrop-filter: blur(20px) saturate(1.05) !important; -webkit-backdrop-filter: blur(20px) saturate(1.05) !important; border: 1px solid var(--un-hair) !important; box-shadow: inset 0 1px 0 0 var(--un-specular), 0 24px 60px -30px rgba(0, 0, 0, 0.85) !important; border-radius: 16px !important; } /* ===================================================================== §4 · 灰阶 → 彩色 hover —— Moonshot 研究板的招牌交互模型/厂商卡默认去饱和+压暗;hover 恢复彩色+提亮+微升+光环边。厂商 logo 默认灰度,hover 出彩(顺带优雅解决第三方彩色 logo 的色相问题)。 ===================================================================== */ /* 定价模型卡根 = .group.rounded-xl.border(用 [class~=] 精确 token + 验证 border, 避免任意 rounded 分组被误当模型卡 —— codex 审查) */ .un-route-pricing .group[class~="rounded-xl"][class~="border"], .un-route-pricing [data-slot="card"], .un-route-home [data-slot="card"] { transition: transform 0.5s var(--un-ease), box-shadow 0.5s var(--un-ease), border-color 0.5s var(--un-ease), background-color 0.5s var(--un-ease) !important; } /* 厂商 logo: 仅作用于「bg-muted 头像盒」内的图形(模型卡左上的品牌 logo 槽), 不再用裸 size-N 当 logo 标记 —— 功能图标(chevron/copy)在 text-muted-foreground 容器里,不会被命中(codex 审查)。灰阶 hover 出彩,兼作第三方彩色 logo 的收敛。 */ .un-route-pricing .group[class~="rounded-xl"] [class*="bg-muted"][class*="size-"] svg, .un-route-pricing .group[class~="rounded-xl"] [class*="bg-muted"][class*="size-"] img { filter: grayscale(1) brightness(0.92) !important; opacity: 0.82 !important; transition: filter 0.55s var(--un-ease), opacity 0.55s var(--un-ease) !important; } /* 出彩: 卡片 hover 或键盘 focus-within(无障碍对等,codex 审查) */ .un-route-pricing .group[class~="rounded-xl"]:hover [class*="bg-muted"][class*="size-"] svg, .un-route-pricing .group[class~="rounded-xl"]:hover [class*="bg-muted"][class*="size-"] img, .un-route-pricing .group[class~="rounded-xl"]:focus-within [class*="bg-muted"][class*="size-"] svg, .un-route-pricing .group[class~="rounded-xl"]:focus-within [class*="bg-muted"][class*="size-"] img { filter: grayscale(0) brightness(1) !important; opacity: 1 !important; } /* 卡片 hover / focus-within: 提亮面 + 微升 + 光环边 + 加深投影 */ .un-route-pricing .group[class~="rounded-xl"][class~="border"]:hover, .un-route-pricing .group[class~="rounded-xl"][class~="border"]:focus-within, .un-route-pricing [data-slot="card"]:hover, .un-route-home [data-slot="card"]:hover { transform: translateY(-3px) !important; border-color: var(--un-hair-strong) !important; background: linear-gradient(180deg, rgba(255, 255, 255, 0.045) 0%, rgba(255, 255, 255, 0) 45%), #18181c !important; box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.14), 0 30px 70px -28px rgba(0, 0, 0, 0.9), 0 0 0 1px rgba(255, 255, 255, 0.04) !important; } /* ===================================================================== §5 · 极简 pill 按钮 + 精修输入框主按钮=纯白 pill(唯一亮信号);次按钮=描边 pill;输入=玻璃底+银环 focus。 ===================================================================== */ /* 用 [class~=] 精确 token —— 避免 hover:bg-primary/80、dark:bg-primary 等变体把非主按钮误判为白 CTA(codex 审查)。主=bg-primary,次=bg-secondary,描边=border-input。绝不用 [class*="outline"](会命中 outline-none)。 */ /* 主 CTA: 纯白 pill,黑字(唯一亮信号),hover 微亮上浮 */ body[data-unsigned] button[class~="bg-primary"], body[data-unsigned] a[class~="bg-primary"][class~="inline-flex"] { background: var(--un-glint) !important; color: #08080a !important; border: 1px solid transparent !important; border-radius: 999px !important; font-weight: 600 !important; letter-spacing: 0.01em !important; transition: transform 0.35s var(--un-ease), box-shadow 0.35s var(--un-ease), background-color 0.35s var(--un-ease) !important; } body[data-unsigned] button[class~="bg-primary"] svg, body[data-unsigned] a[class~="bg-primary"] svg { color: #08080a !important; } body[data-unsigned] button[class~="bg-primary"]:hover, body[data-unsigned] a[class~="bg-primary"][class~="inline-flex"]:hover { background: #ffffff !important; transform: translateY(-1px) !important; box-shadow: 0 10px 32px -12px rgba(255, 255, 255, 0.45) !important; } /* 键盘焦点: 用独立 outline,不与 hover 的 box-shadow 争用 → focus ring 不会被 hover 阴影盖掉(codex 审查)。所有按钮/链接通用。 */ body[data-unsigned] button:focus-visible, body[data-unsigned] a[class~="inline-flex"]:focus-visible, body[data-unsigned] [data-slot="button"]:focus-visible { outline: 2px solid rgba(255, 255, 255, 0.85) !important; outline-offset: 2px !important; } /* 次按钮 / 描边变体: 描边 pill(玻璃底,银字) */ body[data-unsigned] button[class~="bg-secondary"], body[data-unsigned] button[class~="border-input"]:not([class~="bg-primary"]), body[data-unsigned] a[class~="border-input"][class~="inline-flex"]:not([class~="bg-primary"]) { background: rgba(255, 255, 255, 0.025) !important; border: 1px solid var(--un-hair-strong) !important; border-radius: 999px !important; color: var(--un-silver) !important; transition: border-color 0.35s var(--un-ease), background-color 0.35s var(--un-ease), color 0.35s var(--un-ease) !important; } body[data-unsigned] button[class~="bg-secondary"]:hover, body[data-unsigned] button[class~="border-input"]:not([class~="bg-primary"]):hover, body[data-unsigned] a[class~="border-input"][class~="inline-flex"]:not([class~="bg-primary"]):hover { border-color: rgba(255, 255, 255, 0.34) !important; background: rgba(255, 255, 255, 0.055) !important; color: var(--un-ink) !important; } /* 输入框: 仅文本型控件(排除 checkbox/radio/range/file/color,codex 审查)。边界用近实色 #45454c(vs 深底 ≈3:1,满足 WCAG 1.4.11 非文本 UI), placeholder 提到 4.5:1,focus 显著加强(独立 outline + 银环)。 */ body[data-unsigned] input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="color"]):not([type="submit"]):not([type="button"]), body[data-unsigned] textarea, body[data-unsigned] [data-slot="select-trigger"] { background: rgba(255, 255, 255, 0.03) !important; border: 1px solid #45454c !important; /* ≈3:1 vs 输入底,清晰可发现 */ border-radius: 12px !important; color: var(--un-ink) !important; transition: border-color 0.3s var(--un-ease), box-shadow 0.3s var(--un-ease), background-color 0.3s var(--un-ease) !important; } body[data-unsigned] input::placeholder, body[data-unsigned] textarea::placeholder { color: #85858d !important; /* ≈4.6:1,可读且仍静默 */ opacity: 1 !important; } body[data-unsigned] input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="color"]):focus, body[data-unsigned] input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="color"]):focus-visible, body[data-unsigned] textarea:focus, body[data-unsigned] [data-slot="select-trigger"]:focus, body[data-unsigned] [data-slot="select-trigger"]:focus-visible { outline: none !important; border-color: rgba(255, 255, 255, 0.72) !important; /* focus 边界醒目 */ background: rgba(255, 255, 255, 0.055) !important; box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.20) !important; /* 银环,肉眼可辨 */ } /* ===================================================================== §6 · 认证页招牌构图 —— 玻璃卡浮于日食光环之上,大留白,标语一次 ===================================================================== */ /* 表单外层容器 → 玻璃卡(auth 页无内置 card,这里造一张) */ html.un-route-auth [data-unsigned] .mx-auto.flex.w-full.flex-col.justify-center, html.un-route-auth .relative.grid.h-svh > div > .mx-auto { position: relative; z-index: 1; padding: 2.75rem 2.5rem !important; background: linear-gradient(180deg, rgba(255, 255, 255, 0.03) 0%, rgba(255, 255, 255, 0) 44%), rgba(15, 15, 18, 0.66) !important; backdrop-filter: blur(22px) saturate(1.04) !important; -webkit-backdrop-filter: blur(22px) saturate(1.04) !important; border: 1px solid var(--un-hair) !important; border-radius: 20px !important; box-shadow: inset 0 1px 0 0 var(--un-specular), 0 40px 120px -50px rgba(0, 0, 0, 0.95) !important; } /* 认证页标题更克制 */ html.un-route-auth h1 { font-size: 1.6rem !important; font-weight: 500 !important; letter-spacing: -0.015em !important; } /* ===================================================================== §7 · 留白与节奏 —— 更从容的呼吸(简洁感靠留白,不靠删内容) ===================================================================== */ .un-route-pricing [data-slot="card"] { padding: 1.35rem !important; } /* 顶栏: 降为半透明玻璃,发丝线底,更薄更轻 */ body[data-unsigned] header[class*="sticky"], body[data-unsigned] [data-slot="sidebar"] + div > header, body[data-unsigned] header:first-of-type { background: rgba(6, 6, 7, 0.55) !important; backdrop-filter: blur(16px) saturate(1.02) !important; -webkit-backdrop-filter: blur(16px) saturate(1.02) !important; border-bottom: 1px solid var(--un-hair) !important; } /* 侧边栏: 第一级表面,发丝右缘 */ body[data-unsigned] [data-slot="sidebar"], body[data-unsigned] [data-sidebar="sidebar"] { background: var(--un-surface-1) !important; border-right: 1px solid var(--un-hair) !important; } /* 分隔线统一发丝化 */ body[data-unsigned] [data-slot="separator"], body[data-unsigned] hr { background-color: var(--un-hair) !important; border-color: var(--un-hair) !important; } /* ===================================================================== §8 · reduced-motion —— 光环静止,过渡即时(尊重系统偏好) ===================================================================== */ @media (prefers-reduced-motion: reduce) { #un-aura > span:first-child, #un-aura > span:last-child { animation: none !important; } body[data-unsigned] *, .un-route-pricing [data-slot="card"], #un-aura { transition-duration: 0.01ms !important; } } /* 移动端: 光环收敛,并【真正关闭】所有 backdrop-filter(性能 + 可读性,codex 审查) */ @media (max-width: 640px) { #un-aura > span:first-child { top: 26%; width: 120vw; } #un-aura > span:last-child { top: 26%; width: 120vw; } html.un-route-auth [data-unsigned] .mx-auto.flex.w-full.flex-col.justify-center { padding: 2rem 1.4rem !important; border-radius: 16px !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; background: rgba(16, 16, 19, 0.94) !important; } body[data-unsigned] [data-slot="dialog-content"], body[data-unsigned] [data-slot="popover-content"], body[data-unsigned] [data-slot="select-content"], body[data-unsigned] [data-slot="dropdown-menu-content"], body[data-unsigned] header[class*="sticky"], body[data-unsigned] header:first-of-type { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; background: rgba(13, 13, 15, 0.96) !important; } } /* ================================================================ >>> PART: 60-motion.css ================================================================ */ /* ===================================================================== unsigned 中转站 · 60-motion.css —— 富动态交互层(合并序最后一件) --------------------------------------------------------------------- 在既有高级黑之上再叠一层"活"的细节,抄月之暗面 moonshot.cn 与 xAI/Grok 的克制动态: 光标聚光卡 · 磁吸扫光 CTA · 中心展开导航下划线 · 缩小并微动的厂商图标 · 极细颗粒噪声 · 缓旋日食微光 · 进场 reveal。纪律(全篇恪守): - 只用 transform / opacity 做动画(合成层,无 layout / paint 抖动); - 灰阶纪律,无任何彩色色相(高光=极淡冷白,唯一亮=纯白); - 零外部资源: 无 @import,无 url()(噪声用纯 CSS 重复渐变,非 SVG 数据 URI, 以满足 validate.py "url() 总数为 0" 硬门禁); - reduced-motion 下一切静止/即时; - 运行时写入的 CSS 变量: --mx/--my(光标相对卡片,px)、 --un-mag-x/--un-mag-y(主 CTA 磁吸位移,px);均带兜底值,JS 缺席不塌。依赖变量(50-premium 定义,合并序在前,稳定可用): --un-ease --un-hair --un-hair-strong --un-glint --un-void。 ===================================================================== */ /* 运行时写入变量的默认值(JS 缺席即回落到这些静止值;同时满足 var() 引用审计): --mx/--my 光标相对卡片位置(默认居中,配合 opacity:0 = 不可见); --un-mag-x/--un-mag-y 主 CTA 磁吸位移(默认 0 = 不位移)。 */ :root { --mx: 50%; --my: 50%; --un-mag-x: 0px; --un-mag-y: 0px; } /* ===================================================================== §1 · 光标追踪聚光卡 —— 一层随光标移动的极淡冷白高光(mix-blend screen) 作用域: 首页 / 定价页的卡片与定价模型卡(与 50-premium 卡片提升同域, 不外溢到控制台数据卡,降低评审面)。实现: 卡内 ::before 承载 radial-gradient,位置由 --mx/--my 驱动; z-index:-1 + isolation:isolate → 严格位于卡面之上、内容之下(screen 与卡面深黑相乘出冷光,绝不压文字);默认 opacity:0,hover 才点亮。 ===================================================================== */ .un-route-home [data-slot="card"], .un-route-pricing [data-slot="card"], .un-route-pricing .group[class~="rounded-xl"][class~="border"] { position: relative; isolation: isolate; } .un-route-home [data-slot="card"]::before, .un-route-pricing [data-slot="card"]::before, .un-route-pricing .group[class~="rounded-xl"][class~="border"]::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none; background: radial-gradient( circle 190px at var(--mx, 50%) var(--my, 50%), rgba(224, 229, 242, 0.11) 0%, rgba(210, 216, 232, 0.045) 42%, transparent 70% ); mix-blend-mode: screen; opacity: 0; transition: opacity 0.45s var(--un-ease); } .un-route-home [data-slot="card"]:hover::before, .un-route-pricing [data-slot="card"]:hover::before, .un-route-pricing .group[class~="rounded-xl"][class~="border"]:hover::before, .un-route-home [data-slot="card"]:focus-within::before, .un-route-pricing [data-slot="card"]:focus-within::before, .un-route-pricing .group[class~="rounded-xl"][class~="border"]:focus-within::before { opacity: 1; } /* ===================================================================== §2 · 磁吸 + 扫光按钮 a) 主 CTA(纯白 pill,唯一亮信号): 磁吸位移由 JS 写 --un-mag-x/-y(≤4px), CSS 以 !important 接管 transform(压过 50-premium 的 hover 抬升,并把 -1px 抬升并入 hover 分支,二者不再互斥);一道斜向暗色高光扫过(::after)。 b) 次按钮: hover 发丝边更亮 + 一圈极淡外环(50-premium 已提亮边色,此处只加细微外环强化"被点亮"感)。 ===================================================================== */ /* 主 CTA: 磁吸 transform 接管(带兜底 0,JS 缺席=不位移) */ body[data-unsigned] button[class~="bg-primary"], body[data-unsigned] a[class~="bg-primary"][class~="inline-flex"] { position: relative; overflow: hidden; /* 裁切扫光带到 pill 形;outline/box-shadow 在外框外,不受裁切 */ transform: translate(var(--un-mag-x, 0px), var(--un-mag-y, 0px)) !important; } body[data-unsigned] button[class~="bg-primary"]:hover, body[data-unsigned] a[class~="bg-primary"][class~="inline-flex"]:hover { transform: translate(var(--un-mag-x, 0px), calc(var(--un-mag-y, 0px) - 1px)) !important; } /* 扫光带: 白 pill 上一道极淡暗色斜向反光,hover 时自左掠过一次 */ body[data-unsigned] button[class~="bg-primary"]::after, body[data-unsigned] a[class~="bg-primary"][class~="inline-flex"]::after { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; background: linear-gradient( 115deg, transparent 32%, rgba(6, 6, 7, 0.10) 47%, rgba(6, 6, 7, 0.16) 50%, rgba(6, 6, 7, 0.10) 53%, transparent 68% ); transform: translateX(-160%); } body[data-unsigned] button[class~="bg-primary"]:hover::after, body[data-unsigned] a[class~="bg-primary"][class~="inline-flex"]:hover::after { animation: un-sweep 0.9s var(--un-ease); } @keyframes un-sweep { from { transform: translateX(-160%); } to { transform: translateX(160%); } } /* 次按钮 hover: 发丝边被点亮时补一圈极淡外环(纯灰阶) */ body[data-unsigned] button[class~="bg-secondary"]:hover, body[data-unsigned] button[class~="border-input"]:not([class~="bg-primary"]):hover, body[data-unsigned] a[class~="border-input"][class~="inline-flex"]:not([class~="bg-primary"]):hover { box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.10), 0 6px 22px -14px rgba(255, 255, 255, 0.30) !important; } /* ===================================================================== §3 · 导航动画下划线 —— 公共顶栏文本链接 hover 自中心展开的发丝下划线锚点: 公共顶栏(pricing/home/about)固定 header 内 nav 的文本链接 (text-[13px] font-medium),天然排除 logo(无此类)与 Sign in(text-xs 的 bg-primary 按钮)。scaleX(0→1) 只动 transform。 ===================================================================== */ body[data-unsigned] header.pointer-events-none.fixed nav a[class*="text-[13px]"] { position: relative; } body[data-unsigned] header.pointer-events-none.fixed nav a[class*="text-[13px]"]::after { content: ""; position: absolute; left: 50%; bottom: 3px; width: calc(100% - 24px); /* 让开左右各 px-3=12px 内边距,与文字等宽 */ height: 1px; background: var(--un-hair-strong); transform: translateX(-50%) scaleX(0); transform-origin: center; transition: transform 0.42s var(--un-ease); pointer-events: none; } body[data-unsigned] header.pointer-events-none.fixed nav a[class*="text-[13px]"]:hover::after, body[data-unsigned] header.pointer-events-none.fixed nav a[class*="text-[13px]"]:focus-visible::after { transform: translateX(-50%) scaleX(1); } /* ===================================================================== §4 · 厂商图标缩小 + 微动模型卡左上头像盒 bg-muted/40 size-9(sm:size-10)→ 收到约 size-7(1.75rem), 内嵌 28px lobe 图标同步收到 1.4rem,给纯黑场更多留白;卡 hover 时头像盒轻微放大(scale 1.08,只动 transform)。灰阶→彩色出彩仍由 50-premium 承接。 ===================================================================== */ .un-route-pricing .group[class~="rounded-xl"] [class*="bg-muted"][class~="size-9"] { width: 1.75rem !important; /* size-7,压过 size-9 与 sm:size-10(!important 跨媒体查询取胜) */ height: 1.75rem !important; border-radius: 9px !important; transition: transform 0.4s var(--un-ease) !important; } .un-route-pricing .group[class~="rounded-xl"] [class*="bg-muted"][class~="size-9"] svg, .un-route-pricing .group[class~="rounded-xl"] [class*="bg-muted"][class~="size-9"] img { width: 1.4rem !important; /* 22px,盒内留一圈呼吸 */ height: 1.4rem !important; } .un-route-pricing .group[class~="rounded-xl"]:hover [class*="bg-muted"][class~="size-9"], .un-route-pricing .group[class~="rounded-xl"]:focus-within [class*="bg-muted"][class~="size-9"] { transform: scale(1.08) !important; } /* ===================================================================== §5 · 细颗粒噪声层 —— 纯 CSS 重复径向点阵(非 url()/SVG,满足零资产门禁) 两层不同步长(3px / 5px)的极小点阵互相拍频 → 伪随机颗粒感;满屏 fixed, opacity 极低(~0.025),mix-blend overlay,让纯黑不死板。静态(含 reduced-motion)。 body[data-unsigned]::before 全站唯一,不与 50-premium 的 ::after 暗角冲突。 ===================================================================== */ body[data-unsigned]::before { content: ""; position: fixed; inset: 0; z-index: 2147483000; /* 覆于全部内容之上;pointer-events:none 不拦交互 */ pointer-events: none; opacity: 0.025; mix-blend-mode: overlay; background-image: radial-gradient(rgba(255, 255, 255, 0.85) 0.55px, transparent 0.6px), radial-gradient(rgba(255, 255, 255, 0.6) 0.5px, transparent 0.6px); background-size: 3px 3px, 5px 5px; background-position: 0 0, 1px 2px; contain: strict; } /* ===================================================================== §6 · 日食光环增强 —— 仅 auth: 一层极缓慢旋转的 conic 微光,叠在 #un-aura 环上 mask 把 conic 收束成一条环带(贴合 ~42% 的日食 rim),72s 匀速自转,只动 transform。#un-aura 容器 opacity 已按路由门控,非 auth 时整层不可见,双重保险。 ===================================================================== */ html.un-route-auth #un-aura::before { content: ""; position: absolute; left: 50%; top: 38%; width: min(78vw, 940px); aspect-ratio: 1; border-radius: 50%; transform: translate(-50%, -50%); background: conic-gradient( from 0deg, transparent 0deg, rgba(255, 255, 255, 0.055) 55deg, transparent 120deg, rgba(255, 255, 255, 0.03) 200deg, transparent 262deg, rgba(255, 255, 255, 0.05) 320deg, transparent 360deg ); -webkit-mask: radial-gradient(circle, transparent 38%, #000 41.5%, #000 47%, transparent 55%); mask: radial-gradient(circle, transparent 38%, #000 41.5%, #000 47%, transparent 55%); mix-blend-mode: screen; will-change: transform; animation: un-aura-spin 72s linear infinite; } @keyframes un-aura-spin { to { transform: translate(-50%, -50%) rotate(360deg); } } /* ===================================================================== §7 · 进场 reveal —— .un-reveal 初始下沉+透明,入视口加 .in 归位关键安全: 初始隐藏态挂在 html.un-motion 前置类(JS 启动即加)之下 → JS 缺席时 .un-reveal 无隐藏态,内容始终可见,绝不"白屏吞内容"。 ===================================================================== */ html.un-motion .un-reveal { opacity: 0; transform: translateY(8px); transition: opacity 0.7s var(--un-ease), transform 0.7s var(--un-ease); will-change: opacity, transform; } html.un-motion .un-reveal.in { opacity: 1; transform: none; } /* ===================================================================== §8 · reduced-motion —— 一切静止/即时,不吞内容 ===================================================================== */ @media (prefers-reduced-motion: reduce) { /* 聚光卡: 仍可 hover 亮起,但去掉过渡(即时),避免运动 */ .un-route-home [data-slot="card"]::before, .un-route-pricing [data-slot="card"]::before, .un-route-pricing .group[class~="rounded-xl"][class~="border"]::before { transition: none !important; } /* 扫光/自转/下划线过渡全部静止 */ body[data-unsigned] button[class~="bg-primary"]::after, body[data-unsigned] a[class~="bg-primary"][class~="inline-flex"]::after { display: none !important; } html.un-route-auth #un-aura::before { animation: none !important; } body[data-unsigned] header.pointer-events-none.fixed nav a[class*="text-[13px]"]::after { transition: none !important; } .un-route-pricing .group[class~="rounded-xl"] [class*="bg-muted"][class~="size-9"] { transition: none !important; } /* reveal: 直接呈现,永不隐藏 */ html.un-motion .un-reveal { opacity: 1 !important; transform: none !important; transition: none !important; } } /* ===================================================================== §9 · 移动端: 关闭满屏噪声混合层(省合成)+ 收敛磁吸(触屏无 hover 意义) ===================================================================== */ @media (max-width: 640px) { body[data-unsigned]::before { display: none !important; } }