初始化提交

frontend/design/_base.css

@@ -0,0 +1,95 @@
+/* ============================================================
+ * design/_base.css — 原型共享基底
+ * ============================================================
+ *
+ * 用途：供 design/*.html 原型 <link> 引用。集中此前在每个原型
+ *       <style> 里字面重复的 reset / body / 极光铜晕 / 字体类 /
+ *       reduced-motion，消除 24 份副本。
+ *
+ * 依赖：必须在本文件之前 <link href="tokens.css"> —— 下方的
+ *       body 背景与极光底色均引用 token 变量。
+ *
+ * 字体策略：与生产 src/styles/globals.css 的 --font-sans 对齐，
+ *           优先系统字体，避免 CJK 网页字体（15MB+）。
+ *           .serif 用宋族做显示字，.mono 用 JetBrains Mono 做数据/标签。
+ * ============================================================ */
+
+* {
+  box-sizing: border-box;
+}
+html,
+body {
+  height: 100%;
+}
+
+body {
+  margin: 0;
+  background: var(--ink);
+  color: var(--fg);
+  font-family:
+    -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei",
+    "Helvetica Neue", system-ui, sans-serif;
+  font-size: 15px;
+  line-height: 1.6;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  overflow-x: hidden;
+}
+
+/* 极光铜晕：铜绿主导，把暗底拉向 verdigris-on-bronze。
+ * 各原型此前字面一致，固定为设计语言的氛围底色。 */
+body::before {
+  content: "";
+  position: fixed;
+  inset: -10vmax;
+  z-index: -1;
+  background:
+    radial-gradient(
+      54vmax 54vmax at 12% 4%,
+      rgba(111, 163, 137, 0.2),
+      transparent 60%
+    ),
+    radial-gradient(
+      40vmax 40vmax at 92% 8%,
+      rgba(201, 162, 74, 0.1),
+      transparent 60%
+    ),
+    radial-gradient(
+      60vmax 60vmax at 50% 112%,
+      rgba(184, 57, 46, 0.06),
+      transparent 60%
+    );
+  filter: blur(28px);
+  pointer-events: none;
+}
+
+.serif {
+  font-family:
+    "Songti SC", "STSong", "Source Han Serif SC", "Noto Serif SC", serif;
+}
+.mono {
+  font-family: "JetBrains Mono", "SF Mono", ui-monospace, monospace;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  *,
+  *::before,
+  *::after {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+  }
+}
+
+/* iframe 缩略图态：被 index.html 的 live <iframe> 嵌入时（_theme.js 加 .in-frame），
+   动画瞬间完成到末态、过渡归零——避免 25 个缩略图同时持续重绘耗 CPU。
+   用 duration 归零而非 play-state:paused：确保入场动画（如 opacity 0→1）跑到
+   末帧可见态，不会停在首帧导致元素消失。JS（rAF/setTimeout）驱动的动画
+   （仅 chat）开销可控，不在此处理。 */
+.in-frame *,
+.in-frame *::before,
+.in-frame *::after {
+  animation-duration: 0.001s !important;
+  animation-delay: 0s !important;
+  transition-duration: 0.001s !important;
+}