/* ============================================================================ * 落地页 —— 样式（品牌名不在此文件出现，一律来自 config.js） * ---------------------------------------------------------------------------- * 零依赖：无外部字体、无外部图片、无 CDN。图形一律用 CSS 绘制。 * 设计原则：排版克制（正式文件感）+ 内容荒诞（正经地胡说）。 * ========================================================================== */ /* -------------------------------------------------------------------------- * 设计令牌 * ------------------------------------------------------------------------ */ :root { --bg: #06070a; --bg-soft: #0a0c11; --bg-doc: #0b0d13; --line: #1e232d; --line-soft: #14181f; --fg: #e9edf3; --fg-dim: #949eae; --fg-faint: #616b7a; --acc: #a8ff3d; /* 酸性绿：主色，克制使用 */ --acc-deep: #4f7d17; --acc-glow: rgba(168, 255, 61, 0.16); --violet: #8b5cff; /* 电光紫：仅用于主标题故障偏移 */ --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; --wrap: 1080px; --sp: clamp(60px, 8vw, 112px); } /* -------------------------------------------------------------------------- * 基础 * ------------------------------------------------------------------------ */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 84px; /* 保险：彻底禁止「页面被左右拖动」 为什么用 clip 而不是 hidden： overflow-x: hidden 会创建滚动容器，**破坏顶栏的 position: sticky**； overflow-x: clip 只裁剪、不创建滚动容器，吸顶照常工作。 为什么还要 overscroll-behavior： 挡住触控板/鼠标横向滑动的「橡皮筋回弹」与浏览器的左右滑动返回手势。 */ overflow-x: clip; overscroll-behavior: none; /* 手势只允许纵向（保留双指缩放，不影响手机可访问性） */ touch-action: pan-y pinch-zoom; } body { margin: 0; max-width: 100%; overflow-x: clip; overscroll-behavior: none; touch-action: pan-y pinch-zoom; background: var(--bg); background-image: radial-gradient(900px 520px at 50% -12%, rgba(139, 92, 255, 0.07), transparent 68%), radial-gradient(700px 420px at 12% 8%, rgba(168, 255, 61, 0.04), transparent 70%); color: var(--fg); font-family: var(--mono); font-size: 16px; line-height: 1.8; letter-spacing: 0.01em; -webkit-font-smoothing: antialiased; } /* 语言引导遮罩（防「先闪一屏源码中文」） 默认语言是英文，而 HTML 正文原文是中文 ⇒ index.html 的 里那段行内 脚本会在解析到 body 之前给 加 .i18n-booting，app.js 的 applyLang() 跑完再移除。 ⚠️ 这个类**只由那段 JS 添加**：禁用 JS / 脚本被拦时它永远不存在， 访客照常看到中文原文，不会出现空白页。 */ html.i18n-booting body { visibility: hidden; } h1, h2, h3 { margin: 0; font-weight: 700; line-height: 1.2; } p { margin: 0; } dl, dd, ol, ul { margin: 0; } ol, ul { padding: 0; list-style: none; } b { font-weight: 700; } a { color: var(--fg); text-decoration: none; } a:hover { color: var(--acc); } :focus-visible { outline: 2px solid var(--acc); outline-offset: 3px; } .wrap { width: min(var(--wrap), 100% - 2.6rem); margin-inline: auto; } .tiny { margin-top: 1.6rem; color: var(--fg-faint); font-size: 0.76rem; letter-spacing: 0.02em; } .num { font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; } .skip { position: absolute; left: -9999px; top: 0; padding: 0.6rem 1rem; background: var(--acc); color: #06070a; } .skip:focus { left: 12px; top: 12px; z-index: 40; } /* -------------------------------------------------------------------------- * 顶栏 * ------------------------------------------------------------------------ */ .top { position: sticky; top: 0; z-index: 30; border-bottom: 1px solid var(--line-soft); background: rgba(6, 7, 10, 0.86); backdrop-filter: blur(10px); } .top__in { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 62px; } .brand { font-weight: 700; letter-spacing: 0.14em; font-size: 0.9rem; white-space: nowrap; } .brand__tick { color: var(--acc); margin-left: 0.5em; } .top__nav { display: flex; align-items: center; gap: clamp(0.7rem, 2vw, 1.4rem); font-size: 0.8rem; color: var(--fg-dim); } .top__nav > a:not(.btn) { color: var(--fg-dim); } .top__nav > a:not(.btn):hover { color: var(--acc); } /* -------------------------------------------------------------------------- * 顶栏语言切换按钮（中 / EN） * 为什么是