/* ========================================================================== base.css — Sywen's Space 视觉基础 1. Token 注册表（颜色与主题、字体与字号、空间与宽度、线条阴影圆角、装饰、动效、层级） 2. 响应式 Token 3. 重置与基础排版 4. 焦点、跳转链接与辅助技术工具类 5. 减少动态效果 依据：DESIGN_SPEC.md §4、§5、§6、§7、§8、§14、§15、§16。 主题契约：根元素 ；未设置时跟随系统 prefers-color-scheme。 ========================================================================== */ /* ========================================================================== 1. Token 注册表 ========================================================================== */ :root { /* 颜色：浅色主题（DESIGN_SPEC §4） */ --color-paper: #F7F3EA; --color-surface: #FFFCF5; --color-ink: #242424; --color-muted: #625F59; --color-rule: #D6CFC2; --color-accent: #D9E8EC; --color-note: #F0E1AC; --color-shadow: #242424; --color-art-paper: #FFFFFF; --color-focus: var(--color-ink); --color-link: var(--color-ink); --color-selection: var(--color-note); /* 字体（§5.1）：不加载远程字体 */ --font-ui: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", "Noto Sans CJK SC", sans-serif; --font-brand: Georgia, "Times New Roman", serif; --font-code: Consolas, "SFMono-Regular", "Liberation Mono", monospace; /* 字号（§5.2，移动优先；Tablet/Desktop 在 §2 覆盖） */ --text-hero: clamp(34px, calc(7.222px + 8.368vw), 60px); --text-page-title: clamp(30px, calc(24.545px + 1.705vw), 42px); --text-h2: 24px; --text-h3: 20px; --text-entry-title: 20px; --text-ui: 16px; --text-body: 17px; --text-meta: 14px; --text-code: 14px; --text-brand: 24px; /* 行高与字重（§16.1） */ --leading-hero: 1.2; --leading-title: 1.3; --leading-h2: 1.4; --leading-heading: 1.5; --leading-meta: 1.6; --leading-ui: 1.65; --leading-code: 1.7; --leading-body: 1.85; --weight-regular: 400; --weight-medium: 600; --weight-bold: 700; /* 间距（§16.1）：只使用 4/8/12/16/24/32/48/64 */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-6: 24px; --space-8: 32px; --space-12: 48px; --space-16: 64px; /* 宽度与响应式尺寸（§6.1、§16.1） */ --width-site: 1120px; --width-reading: 740px; --width-search: 560px; --width-status-page: 640px; --gutter: 16px; --section-gap: 48px; --hero-gap: 24px; --entry-date-width: 88px; --hero-art-height: 220px; --about-art-height: 220px; --status-art-height: 180px; --avatar-size: 64px; /* 线条、圆角、阴影（§7、§16.2） */ --line-thin: 1px; --line-strong: 2px; --radius-none: 0px; --radius-small: 2px; --radius-control: 4px; --shadow-none: none; --shadow-control: 3px 3px 0 0 var(--color-shadow); --shadow-emphasis: 4px 4px 0 0 var(--color-shadow); --shadow-pressed: 2px 2px 0 0 var(--color-shadow); /* 焦点与控件尺寸 */ --focus-width: 3px; --focus-offset: 4px; --control-min-height: 44px; --icon-size: 20px; /* 菜单、提示与浮动控件（§12.2、§12.3） */ --menu-width: 224px; --menu-item-min-height: 40px; --menu-edge-gap: 8px; --menu-padding: 8px; --notice-width: 360px; --copy-panel-width: 420px; --float-edge-gap: 16px; /* 装饰预算（§8） */ --tape-width: 48px; --tape-height: 16px; --decoration-angle: -1deg; --dot-area-size: 64px; --dot-size: 1px; --dot-gap: 8px; --dot-opacity: 0.08; /* 动效（§15、§16.2） */ --motion-fast: 120ms; --motion-normal: 180ms; --motion-ease: ease-out; --press-shift: 1px; --press-shift-strong: 2px; /* 层级（§16.3） */ --z-content: 0; --z-floating: 30; --z-progress: 40; --z-menu: 100; --z-panel: 110; } /* 颜色：显式浅色主题。值同 :root 默认，保留用于表达“已主动选择浅色”。 */ :root[data-theme="light"] { color-scheme: light; --color-paper: #F7F3EA; --color-surface: #FFFCF5; --color-ink: #242424; --color-muted: #625F59; --color-rule: #D6CFC2; --color-accent: #D9E8EC; --color-note: #F0E1AC; --color-shadow: #242424; --color-art-paper: #FFFFFF; --color-focus: var(--color-ink); --color-link: var(--color-ink); --color-selection: var(--color-note); } /* 颜色：深色主题（用户或页面显式选择，优先于系统偏好） */ :root[data-theme="dark"] { color-scheme: dark; --color-paper: #202223; --color-surface: #292C2E; --color-ink: #F2EEE5; --color-muted: #BBB6AC; --color-rule: #494D4F; --color-accent: #344B53; --color-note: #50482E; --color-shadow: #111314; --color-art-paper: #FFFFFF; --color-focus: var(--color-ink); --color-link: var(--color-ink); --color-selection: var(--color-note); } /* 颜色：未主动选择时跟随系统（原规划主题顺序第二级），放在最后以保证优先于默认浅色 */ @media (prefers-color-scheme: dark) { :root:not([data-theme]) { color-scheme: dark; --color-paper: #202223; --color-surface: #292C2E; --color-ink: #F2EEE5; --color-muted: #BBB6AC; --color-rule: #494D4F; --color-accent: #344B53; --color-note: #50482E; --color-shadow: #111314; --color-art-paper: #FFFFFF; --color-focus: var(--color-ink); --color-link: var(--color-ink); --color-selection: var(--color-note); } } /* ========================================================================== 2. 响应式 Token（§5.2、§6、§14）：移动优先，只使用 768px / 1024px 断点 ========================================================================== */ @media (min-width: 768px) { :root { --gutter: 24px; --entry-date-width: 88px; --hero-art-height: 300px; --about-art-height: 240px; --status-art-height: 240px; --text-h2: 28px; --text-entry-title: 22px; --text-body: 18px; --text-code: 15px; --text-brand: 28px; --avatar-size: 80px; } } @media (min-width: 1024px) { :root { --gutter: 32px; --section-gap: 64px; --hero-gap: 48px; --entry-date-width: 112px; --hero-art-height: 360px; --about-art-height: 300px; --status-art-height: 240px; --avatar-size: 80px; } } /* ========================================================================== 3. 重置与基础排版 ========================================================================== */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; background-color: var(--color-paper); color-scheme: light; } /* 隐藏属性始终生效：增强控件在被脚本显示前不参与布局与 Tab 顺序（Plan.md 一·2、§15） */ [hidden] { display: none !important; } body { margin: 0; min-height: 100%; background-color: var(--color-paper); color: var(--color-ink); font-family: var(--font-ui); font-size: var(--text-ui); font-weight: var(--weight-regular); line-height: var(--leading-ui); overflow-wrap: break-word; } /* 主题切换只过渡页面底色与文字色，避免插画纸面随主题闪变（§15） */ html, body { transition: background-color var(--motion-normal) var(--motion-ease), color var(--motion-normal) var(--motion-ease); } h1, h2, h3, h4 { margin: 0 0 var(--space-3); font-weight: var(--weight-bold); } /* 标题紧接区块开头时取消多余前距 */ h1:first-child, h2:first-child, h3:first-child { margin-top: 0; } h2 { font-size: var(--text-h2); line-height: var(--leading-h2); } h3 { font-size: var(--text-h3); line-height: var(--leading-heading); } p { margin: 0 0 var(--space-6); } p:last-child { margin-bottom: 0; } ul, ol { margin: 0 0 var(--space-6); padding-left: var(--space-6); } li + li { margin-top: var(--space-2); } ul li::marker, ol li::marker { color: var(--color-ink); } a { color: var(--color-link); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; } a:hover { text-decoration-thickness: 2px; } img { max-width: 100%; height: auto; } code, pre { font-family: var(--font-code); font-size: var(--text-code); line-height: var(--leading-code); } code { padding: 2px 4px; border-radius: var(--radius-small); background-color: var(--color-surface); } blockquote { margin: 0 0 var(--space-6); padding-left: var(--space-4); border-left: var(--line-strong) solid var(--color-ink); } strong { font-weight: var(--weight-bold); } ::selection { background-color: var(--color-selection); color: var(--color-ink); } /* 内联图标统一 24×24 视框、2px 描边（§3.3、§7） */ .icon { width: var(--icon-size); height: var(--icon-size); fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: none; } /* 显式隐藏的装饰图标：保留结构与描边，但不呈现 */ .icon--hidden { opacity: 0; } /* ========================================================================== 4. 焦点、跳转链接与辅助技术工具类（§15） ========================================================================== */ :focus-visible { outline: var(--focus-width) solid var(--color-focus); outline-offset: var(--focus-offset); } :focus:not(:focus-visible) { outline: none; } /* 跳到主要内容：默认移出视口，聚焦时出现在左上并置于面板层级 */ .skip-link { position: absolute; left: var(--space-4); top: var(--space-4); transform: translateY(calc(-1 * (100% + var(--space-8)))); z-index: var(--z-panel); padding: var(--space-3) var(--space-4); border: var(--line-strong) solid var(--color-ink); border-radius: var(--radius-control); background-color: var(--color-note); color: var(--color-ink); font-weight: var(--weight-medium); text-decoration: none; } .skip-link:focus-visible { transform: none; } /* 跳过链接的目标：可编程聚焦但不显示轮廓，避免误导为可操作控件 */ main:focus { outline: none; } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; } /* ========================================================================== 5. 减少动态效果（§15）：取消非必要过渡、位移、旋转与平滑滚动 ========================================================================== */ @media (prefers-reduced-motion: reduce) { :root { --motion-fast: 0ms; --motion-normal: 0ms; --press-shift: 0px; --press-shift-strong: 0px; --decoration-angle: 0deg; } html { scroll-behavior: auto; } *, *::before, *::after { transition-duration: 0ms !important; animation-duration: 0ms !important; animation-iteration-count: 1 !important; } }