Spaces:
Running on Zero
Running on Zero
| /* ============================================================================= | |
| base.css · reset、字体、排版基础 | |
| ============================================================================= */ | |
| /* ── 字体 ──────────────────────────────────────────────────────────────────── | |
| 自托管，不走 CDN：Google Fonts 在中国大陆被墙，jsdelivr 也不稳。 | |
| unicode-range 必须写 —— 保证中英混排时英文一定落在 Instrument Sans 上， | |
| 不会被中文字体里的拉丁字形接管（中英混排最常见的翻车点）。 */ | |
| @font-face { | |
| font-family: "Instrument Sans"; | |
| font-style: normal; | |
| font-weight: 400 700; /* 可变字重，一个 30KB 文件覆盖全部 */ | |
| font-display: swap; | |
| src: url("../fonts/instrument-sans-latin-wght-normal.woff2") format("woff2-variations"); | |
| unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, | |
| U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, | |
| U+2212, U+2215, U+FEFF, U+FFFD; | |
| } | |
| @font-face { | |
| font-family: "Instrument Serif"; | |
| font-style: italic; | |
| font-weight: 400; | |
| font-display: swap; | |
| src: url("../fonts/instrument-serif-latin-400-italic.woff2") format("woff2"); | |
| unicode-range: U+0000-00FF, U+2000-206F; | |
| } | |
| *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } | |
| /* hidden 属性必须能压过组件自己的 display。 | |
| UA 样式表里的 [hidden]{display:none} 特异性只有 0-1-0， | |
| 任何 .field{display:flex} 都会把它盖掉 —— 元素会"逻辑上隐藏、视觉上还在"。 */ | |
| [hidden] { display: none ; } | |
| html { | |
| -webkit-text-size-adjust: 100%; | |
| scroll-behavior: smooth; | |
| } | |
| html, body { height: 100%; } | |
| body { | |
| font-family: var(--font-sans); | |
| background: var(--field); | |
| color: var(--ink); | |
| font-size: var(--fs-body); | |
| line-height: var(--lh-normal); | |
| letter-spacing: var(--tr-body); | |
| -webkit-font-smoothing: antialiased; | |
| -moz-osx-font-smoothing: grayscale; | |
| overflow: hidden; /* 应用外壳自己管滚动 */ | |
| } | |
| img, svg, video, canvas { display: block; max-width: 100%; } | |
| img { background: var(--field-sunk); } /* 加载中不留白洞 */ | |
| button, input, textarea, select { | |
| font: inherit; | |
| color: inherit; | |
| letter-spacing: inherit; | |
| } | |
| button { background: none; border: 0; cursor: pointer; } | |
| button:disabled { cursor: not-allowed; } | |
| a { color: inherit; text-decoration: none; } | |
| textarea { resize: none; } | |
| /* 键盘焦点：墨色实线，任何底色上都清楚。鼠标点击不出现。 */ | |
| :focus-visible { | |
| outline: 2px solid var(--ink); | |
| outline-offset: 2px; | |
| border-radius: var(--r-sm); | |
| } | |
| ::selection { background: var(--bronze-wash); } | |
| .sr-only { | |
| position: absolute; width: 1px; height: 1px; | |
| padding: 0; margin: -1px; overflow: hidden; | |
| clip-path: inset(50%); white-space: nowrap; border: 0; | |
| } | |
| /* 时间码、时长、计数一律用等宽数字，不用等宽字体 —— | |
| 等宽字体会让播放器带上"终端工具"的味道，和 Apple 观感相反。 */ | |
| .tnum { font-variant-numeric: tabular-nums; } | |
| /* 细滚动条，不抢视觉 */ | |
| * { scrollbar-width: thin; scrollbar-color: var(--rule-strong) transparent; } | |
| *::-webkit-scrollbar { width: 10px; height: 10px; } | |
| *::-webkit-scrollbar-track { background: transparent; } | |
| *::-webkit-scrollbar-thumb { | |
| background: var(--rule-strong); | |
| border: 3px solid transparent; | |
| border-radius: 99px; | |
| background-clip: content-box; | |
| } | |
| *::-webkit-scrollbar-thumb:hover { background: var(--ink-4); background-clip: content-box; } | |
| /* ── 通用排版件 ──────────────────────────────────────────────────────────── */ | |
| .eyebrow { | |
| font-size: var(--fs-eyebrow); | |
| font-weight: var(--fw-semi); | |
| letter-spacing: var(--tr-eyebrow); | |
| text-transform: uppercase; | |
| color: var(--bronze); | |
| display: inline-flex; | |
| align-items: center; | |
| gap: 9px; | |
| font-family: var(--font-mono); | |
| } | |
| .eyebrow::before { | |
| content: ""; | |
| width: 18px; height: 1.5px; | |
| background: var(--bronze); | |
| flex: none; | |
| } | |
| .page-title { | |
| font-size: var(--fs-h1); | |
| font-weight: var(--fw-semi); | |
| letter-spacing: var(--tr-h1); | |
| line-height: var(--lh-snug); | |
| } | |
| .page-lead { | |
| font-size: var(--fs-lead); | |
| color: var(--ink-2); | |
| margin-top: 10px; | |
| max-width: 62ch; | |
| line-height: 1.6; | |
| } | |
| .icon { width: 18px; height: 18px; flex: none; } | |
| .icon-sm { width: 15px; height: 15px; flex: none; } | |
| @media (prefers-reduced-motion: reduce) { | |
| html { scroll-behavior: auto; } | |
| } | |