/* ========================================================================== 维吾尔文智能校对系统 · 产品门户样式 -------------------------------------------------------------------------- 设计对齐主应用（同色板 / 同圆角 / 同字体栈），但门户是**独立页面**， 不加载 app.css —— 避免主应用样式改动意外破坏门户（反之亦然）。 三个必须小心的点（都是本页真踩过的）： 1. **方向**：门户必须显式 `dir="ltr"`。主应用是 dir=rtl，若门户继承 或被浏览器判定为 RTL，整个 hero / 网格会左右镜像，中文段落里的 标点也会跑到行首。维文片段一律用 `.uq` 局部 `dir="rtl"`。 2. **中英切换后的行高**：英文换行点与中文完全不同（中文按字断行、 英文按词断行），`.lede` 之类多行段落必须给足 max-width， 否则英文会拉出很长的"一行一个字"的窄条。 3. **截图高矮不齐**：六张截图内容高度不同，若用 `space-between` 会让卡片内部元素错位。统一用 `object-fit: cover` + 固定 `aspect-ratio`，保证网格横平竖直。 ========================================================================== */ :root { color-scheme: light; /* 字体：与主应用同一套（门户是独立页面，故此处重复声明而非 @import， 避免多一次请求；维文字体路径改为 ../fonts/ 相对门户目录） */ /* 【全站统一使用 UKIJCJK】 与主应用 app.css 保持**完全一致**的字体链：UKIJCJK 优先， 维文字体次之，中文字体最后兜底。门户虽是独立页面，但用户 从门户点进主应用时会看到同一套字形，不会"换个页面像换了个产品"。 详见 app.css 的 --ui-ukij 注释。 */ --ui-ukij: "UKIJCJK", "UKIJ Tuz Tom", "Alkatip Basma Tom", "Noto Naskh Arabic", "Scheherazade New", "Amiri", "PingFang SC", "Microsoft YaHei", "Segoe UI", system-ui, sans-serif; --mono-uy: "UKIJCJK", "UKIJ Tuz Tom", "Alkatip Basma Tom", "Noto Naskh Arabic", "Scheherazade New", "Amiri", "Times New Roman", serif; --ui: var(--ui-ukij); /* 维文界面整体字体：直接用正字法友好的阿拉伯字体栈， 让整页文字（含标题/正文）在 lang=ug 时都走这一套。 */ --ui-ug: "UKIJCJK", "UKIJ Tuz Tom", "Alkatip Basma Tom", "Noto Naskh Arabic", "Scheherazade New", "Amiri", serif; /* 代码/命令用等宽；维文绝不能用等宽（会破坏连写）。 UKIJCJK 放在等宽字体**之后**：等宽的价值是宽度一致（路径/版本号 对齐），而它是比例字体，放首位会让这些内容参差不齐。 */ --mono: "SFMono-Regular", "JetBrains Mono", Consolas, "Courier New", "UKIJCJK", monospace; /* 中性色阶（与主应用 app.css 同一套值，保证两页观感一致） */ --bg: #f4f6f9; --panel: #ffffff; --border: #e4e9f0; --border-strong: #cfd6e0; --text: #1f2430; --text-dim: #6b7480; --text-faint: #9aa4b2; --primary: #1565c0; --primary-dark: #0d47a1; --primary-soft: #e8f1fd; --primary-line: #c5dcf7; --on-primary: #ffffff; /* 导航链接的悬停底色。 原先在 `.p-nav a:hover` 里写死 #eef3fa（浅色模式的值）， 暗色模式下会变成刺眼的浅蓝色块。抽成变量后两种主题各自取值。 */ --hover-nav: #eef3fa; --error: #e53935; --warning: #fb8c00; --warning-dark: #b26a00; --info: #1e88e5; --ok: #2e7d32; --radius-sm: 6px; --radius: 10px; --radius-lg: 16px; --radius-pill: 999px; --shadow-sm: 0 1px 3px rgba(20, 30, 50, .08); --shadow: 0 1px 3px rgba(20, 30, 50, .08), 0 4px 16px rgba(20, 30, 50, .06); --shadow-lg: 0 8px 32px rgba(20, 30, 50, .14); --shadow-focus: 0 0 0 3px rgba(21, 101, 192, .28); --dur-fast: .15s; --dur: .18s; --ease: cubic-bezier(.4, 0, .2, 1); --maxw: 1160px; } /* ========================================================================== 深色模式（门户） -------------------------------------------------------------------------- 与主应用同一套规则：属性驱动（），无属性时跟随系统。 门户是"分享给客户看"的页面，深色下尤其要保证**截图**（多是浅色 UI 截图） 仍然清晰 —— 故截图卡片在深色下保留浅色垫底（见 .p-shot-img 的 background）。 ========================================================================== */ [data-theme="dark"] { color-scheme: dark; --bg: #12161f; --panel: #1a1f2a; --border: #2c3442; --border-strong: #3b4553; --text: #e4e8f0; --text-dim: #98a3b3; --text-faint: #6b7686; --primary: #6fb3ff; --primary-dark: #9ccbff; --primary-soft: #16283f; --primary-line: #2b4a6e; --on-primary: #0b1220; --hover-nav: #26303f; --error: #ff6b6b; --warning: #ffb74d; --warning-dark: #ffd08a; --info: #64b5f6; --ok: #81c995; --shadow-sm: 0 1px 2px rgba(0,0,0,.4); --shadow: 0 1px 3px rgba(0,0,0,.45), 0 6px 20px rgba(0,0,0,.35); --shadow-lg: 0 10px 40px rgba(0,0,0,.55); --shadow-focus: 0 0 0 3px rgba(111,179,255,.4); } @media (prefers-color-scheme: dark) { :root:not([data-theme]) { color-scheme: dark; --bg: #12161f; --panel: #1a1f2a; --border: #2c3442; --border-strong: #3b4553; --text: #e4e8f0; --text-dim: #98a3b3; --text-faint: #6b7686; --primary: #6fb3ff; --primary-dark: #9ccbff; --primary-soft: #16283f; --primary-line: #2b4a6e; --on-primary: #0b1220; --hover-nav: #26303f; --error: #ff6b6b; --warning: #ffb74d; --warning-dark: #ffd08a; --info: #64b5f6; --ok: #81c995; --shadow-sm: 0 1px 2px rgba(0,0,0,.4); --shadow: 0 1px 3px rgba(0,0,0,.45), 0 6px 20px rgba(0,0,0,.35); --shadow-lg: 0 10px 40px rgba(0,0,0,.55); --shadow-focus: 0 0 0 3px rgba(111,179,255,.4); } } * { box-sizing: border-box; } /* 维文正文字体：与主应用同一字体文件（门户在 /static/portal/ 下， 故字体路径上跳一级）。门户里维文只出现在少量片段（品牌名、示例行）， 但正字法渲染同样必须正确。 */ @font-face { font-family: "UKIJCJK"; /* 【同时声明 woff2 与 ttf】浏览器取第一个**能解码**的源， 故 woff2（体积小）在前、ttf（原始格式，免转换）兜底。 与主应用 app.css 的声明保持完全一致 —— 两处若不一致， 门户与主应用会出现不同字形。 */ src: url("/static/fonts/UKIJCJK.woff2") format("woff2"), url("/static/fonts/UKIJCJK.ttf") format("truetype"); font-weight: 400; font-style: normal; font-display: swap; /* 不写 unicode-range：与主应用一致，让本字体覆盖全部字符 （含汉字），实现"全系统统一字体"。详见 app.css 同名注释。 */ } html { scroll-behavior: smooth; } /* 可访问性：焦点环 + 减动效 + 屏幕阅读器工具类 */ :focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; border-radius: var(--radius-sm); } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; } } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; } .skip-link { position: absolute; left: 50%; top: -100px; transform: translateX(-50%); z-index: 300; background: var(--primary); color: var(--on-primary); padding: 10px 20px; border-radius: 0 0 var(--radius) var(--radius); font-size: 14px; font-weight: 600; text-decoration: none; transition: top var(--dur) var(--ease); } .skip-link:focus { top: 0; } body { margin: 0; background: var(--bg); color: var(--text); font-family: var(--ui); font-size: 15px; line-height: 1.7; /* 【不要把 direction 写死成 ltr】 这里曾经是 `direction: ltr`，在双语（中/英）时代没问题。 但 direction 是**继承属性**：在 body 上显式声明 ltr 会硬编码整页方向， portal.js 给 设的 dir="rtl" 到 body 这一层就被覆盖了 —— 实测维文模式下的症状是：documentElement.dir 确实是 rtl、 body 的 computed direction 却仍是 ltr，于是 .wrap / h1 / .p-lede 全部左对齐，RTL 只有 一层是"对的"。 正确做法是这里**不声明** direction，让它继承 的 dir （portal.js 会同步 documentElement.dir）。单独需要 LTR 的片段 （接口路径、版本号、拉丁技术标签）再用 .uq / code 等局部覆盖。 */ } /* 维文：局部 RTL + 用支持正字法连写的字体（不能用等宽字体） */ .uq { direction: rtl; unicode-bidi: isolate; font-family: var(--mono-uy); line-height: 2.1; } .wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 24px; } /* ============================================================ 顶栏 */ .p-top { position: sticky; top: 0; z-index: 60; /* 半透明毛玻璃：深浅两态都不能写死白色，故用 color-mix 派生自 --panel */ background: color-mix(in srgb, var(--panel) 92%, transparent); backdrop-filter: saturate(1.6) blur(10px); border-bottom: 1px solid var(--border); } .p-top-in { max-width: var(--maxw); margin: 0 auto; padding: 12px 24px; display: flex; align-items: center; gap: 16px; flex-wrap: wrap; } .p-logo { display: flex; align-items: center; gap: 11px; text-decoration: none; color: inherit; } .p-logo-mark { width: 38px; height: 38px; flex: none; border-radius: 11px; background: linear-gradient(135deg, var(--primary), #4a90d9); color: #fff; display: grid; place-items: center; font-family: var(--mono-uy); font-size: 22px; font-weight: 700; box-shadow: 0 3px 10px rgba(21, 101, 192, .28); } .p-logo-txt { display: flex; flex-direction: column; line-height: 1.25; } .p-logo-txt b { font-size: 15px; } .p-logo-txt span { font-size: 11.5px; color: var(--text-dim); letter-spacing: .3px; } .p-nav { margin-left: auto; display: flex; align-items: center; gap: 4px; flex-wrap: wrap; } /* 导航链接的默认样式（浅灰文字）。 【注意特异性陷阱】这里的 `.p-nav a` 是 (0,1,1)， 比下面 `.p-enter` 的 (0,1,0) **更高**，会覆盖后者的文字颜色。 因此凡是长在 .p-nav 里、但自带底色的按钮（.p-enter）， 必须用同等或更高的特异性重新声明颜色，否则会出现 「蓝底 + 灰字」——对比度不足，看起来像按钮没启用。 实测：暗色模式下 .p-enter 的文字被这条规则改成了 --text-dim(#98a3b3)，而它本该是 --on-primary。 */ .p-nav a { color: var(--text-dim); text-decoration: none; font-size: 13.5px; padding: 6px 11px; border-radius: 8px; white-space: nowrap; transition: background .15s, color .15s; } /* 悬停底色用变量而不是写死 #eef3fa：后者是**浅色模式**的值， 暗色模式下它会变成刺眼的浅蓝块。 */ .p-nav a:hover { background: var(--hover-nav); color: var(--primary); } /* 语言切换：两颗药丸，当前语言实心 */ .p-lang { display: inline-flex; border: 1px solid var(--border-strong); border-radius: 9px; overflow: hidden; margin-left: 6px; } .p-lang button { border: 0; background: var(--panel); color: var(--text-dim); font: inherit; font-size: 13px; padding: 6px 14px; cursor: pointer; transition: background .15s, color .15s; } .p-lang button + button { border-left: 1px solid var(--border-strong); } .p-lang button[aria-pressed="true"] { background: var(--primary); color: var(--on-primary); font-weight: 600; } .p-lang button:not([aria-pressed="true"]):hover { background: var(--primary-soft); } /* 登录 / 注册：次级按钮，视觉权重低于「进入系统」， 避免和主 CTA 抢注意力 */ /* 【特异性说明】这三个按钮都长在