/* ================================================================= * Google Material Design 3 (Material You) 通用增强 * 适用于 apps/reading/ 目录下所有 HTML 页面 * 版本: v1.1.0 · 2026-06-19 * * 设计原则: * 1. 非破坏性 - 不覆盖子页面的主题色与 hero 渐变 * 2. 通用增强 - 排版、可访问性、滚动条、选择态、焦点态、按钮/卡片/标签 * 3. WCAG AA - 所有色彩组合均通过对比度校验 * * 用法: * 在 中 design-system.css 之后添加: * * ================================================================= */ /* ===== M3 Design Tokens(轻量版,仅暴露最常用变量) ===== */ :root { /* M3 Color Tokens(Material You 基底紫色) */ --md3-primary: #6750A4; --md3-on-primary: #FFFFFF; --md3-primary-container: #EADDFF; --md3-on-primary-container: #21005D; --md3-tertiary: #7D5260; --md3-tertiary-container: #FFD8E4; /* M3 Surface Tones */ --md3-surface: #FEF7FF; --md3-surface-container-low: #F7F2FA; --md3-surface-container: #F3EDF7; --md3-surface-container-high: #ECE6F0; --md3-on-surface: #1D1B20; --md3-on-surface-variant: #49454F; --md3-outline: #79747E; --md3-outline-variant: #CAC4D0; /* M3 Shape Tokens */ --md3-radius-xs: 4px; --md3-radius-sm: 8px; --md3-radius-md: 12px; --md3-radius-lg: 16px; --md3-radius-xl: 28px; --md3-radius-full: 9999px; /* M3 Elevation Tokens */ --md3-elevation-1: 0 1px 2px 0 rgba(0, 0, 0, 0.3), 0 1px 3px 1px rgba(0, 0, 0, 0.15); --md3-elevation-2: 0 1px 2px 0 rgba(0, 0, 0, 0.3), 0 2px 6px 2px rgba(0, 0, 0, 0.15); --md3-elevation-3: 0 4px 8px 3px rgba(0, 0, 0, 0.15), 0 1px 3px 0 rgba(0, 0, 0, 0.3); /* M3 Motion Tokens */ --md3-ease-standard: cubic-bezier(0.2, 0, 0, 1); --md3-ease-emphasized: cubic-bezier(0.3, 0, 0, 1); --md3-dur-short: 200ms; --md3-dur-medium: 400ms; --md3-dur-long: 500ms; } /* ===== M3 Body 全局基线(字体 + 渲染优化) ===== */ html { scroll-behavior: smooth; } body { font-family: "Noto Sans SC", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif; font-feature-settings: "kern", "liga", "calt"; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; line-height: 1.5; } /* ===== 标题字重与字距(全局排版优化) ===== */ h1, h2, h3, h4, h5, h6 { letter-spacing: -0.01em; line-height: 1.3; font-weight: 700; } /* ===== 链接过渡(全局微动效) ===== */ a { transition: color var(--md3-dur-short) var(--md3-ease-standard), opacity var(--md3-dur-short) var(--md3-ease-standard); } /* ===== 焦点态(可访问性 · M3 State Layer) ===== */ a:focus-visible, button:focus-visible, [tabindex]:focus-visible { outline: 2px solid var(--md3-primary); outline-offset: 3px; border-radius: var(--md3-radius-sm); } /* ===== 滚动条美化(Webkit + Firefox) ===== */ ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-track { background: var(--md3-surface-container-low); } ::-webkit-scrollbar-thumb { background: var(--md3-outline-variant); border-radius: var(--md3-radius-full); border: 2px solid var(--md3-surface-container-low); transition: background var(--md3-dur-short) var(--md3-ease-standard); } ::-webkit-scrollbar-thumb:hover { background: var(--md3-outline); } * { scrollbar-width: thin; scrollbar-color: var(--md3-outline-variant) var(--md3-surface-container-low); } /* ===== 选择高亮(M3 Selection) ===== */ ::selection { background: var(--md3-primary-container); color: var(--md3-on-primary-container); } ::-moz-selection { background: var(--md3-primary-container); color: var(--md3-on-primary-container); } /* ===== Reduce Motion(可访问性 - 尊重系统设置) ===== */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } /* ===== 移动端微调 ===== */ @media (max-width: 640px) { body { font-size: 15px; } h1 { font-size: clamp(1.75rem, 8vw, 2.25rem) !important; } } /* ================================================================= * M3 Typography Scale(全局排版等级 · Roboto Flex 风格) * ================================================================= */ .display-large { font-size: clamp(2.5rem, 5vw, 3.5rem); line-height: 1.12; letter-spacing: -0.02em; font-weight: 800; } .display-medium { font-size: clamp(2rem, 4vw, 2.75rem); line-height: 1.16; letter-spacing: -0.015em; font-weight: 800; } .headline-large { font-size: clamp(1.75rem, 3.5vw, 2.25rem); line-height: 1.22; letter-spacing: -0.01em; font-weight: 700; } .headline-small { font-size: 1.5rem; line-height: 1.3; letter-spacing: -0.005em; font-weight: 700; } .title-large { font-size: 1.375rem; line-height: 1.4; font-weight: 600; } .title-medium { font-size: 1.125rem; line-height: 1.45; font-weight: 600; } .body-large { font-size: 1.0625rem; line-height: 1.6; } .body-medium { font-size: 0.9375rem; line-height: 1.55; } .label-large { font-size: 0.875rem; line-height: 1.4; font-weight: 600; letter-spacing: 0.01em; } .label-medium { font-size: 0.75rem; line-height: 1.35; font-weight: 600; letter-spacing: 0.02em; } /* ================================================================= * M3 Button(统一所有页面的按钮基线) * ================================================================= */ button, .btn, .footer-nav-link, .back-to-top, a[class*="btn-"] { position: relative; overflow: hidden; isolation: isolate; cursor: pointer; -webkit-tap-highlight-color: transparent; user-select: none; } button::before, .btn::before, .footer-nav-link::before, .back-to-top::before { content: ""; position: absolute; inset: 0; background: currentColor; opacity: 0; transition: opacity var(--md3-dur-medium) var(--md3-ease-standard); pointer-events: none; z-index: -1; border-radius: inherit; } button:hover::before, .btn:hover::before, .footer-nav-link:hover::before { opacity: 0.08; } button:active::before, .btn:active::before { opacity: 0.12; } /* Filled Button(M3 Filled) */ .btn-filled { display: inline-flex; align-items: center; justify-content: center; padding: 0.625rem 1.5rem; background: var(--md3-primary); color: var(--md3-on-primary); border-radius: var(--md3-radius-full); font-weight: 600; font-size: 0.9375rem; box-shadow: var(--md3-elevation-1); transition: box-shadow var(--md3-dur-medium) var(--md3-ease-standard), transform var(--md3-dur-short) var(--md3-ease-standard); text-decoration: none; } .btn-filled:hover { box-shadow: var(--md3-elevation-2); transform: translateY(-1px); } .btn-filled:active { box-shadow: var(--md3-elevation-1); transform: translateY(0); } /* Tonal Button(M3 Tonal) */ .btn-tonal { display: inline-flex; align-items: center; justify-content: center; padding: 0.625rem 1.5rem; background: var(--md3-primary-container); color: var(--md3-on-primary-container); border-radius: var(--md3-radius-full); font-weight: 600; text-decoration: none; transition: background var(--md3-dur-short) var(--md3-ease-standard); } .btn-tonal:hover { background: color-mix(in srgb, var(--md3-primary-container) 90%, var(--md3-on-surface) 10%); } /* Outlined Button(M3 Outlined) */ .btn-outlined { display: inline-flex; align-items: center; justify-content: center; padding: 0.625rem 1.5rem; border: 1px solid var(--md3-outline); color: var(--md3-primary); border-radius: var(--md3-radius-full); font-weight: 600; background: transparent; text-decoration: none; transition: background var(--md3-dur-short) var(--md3-ease-standard); } .btn-outlined:hover { background: color-mix(in srgb, var(--md3-primary) 8%, transparent 92%); } /* Text Button(M3 Text) */ .btn-text { display: inline-flex; align-items: center; padding: 0.5rem 0.875rem; color: var(--md3-primary); border-radius: var(--md3-radius-full); font-weight: 600; text-decoration: none; transition: background var(--md3-dur-short) var(--md3-ease-standard); } .btn-text:hover { background: color-mix(in srgb, var(--md3-primary) 8%, transparent 92%); } /* ================================================================= * M3 Card(覆盖子页面的 stat-card / hover-lift 等) * ================================================================= */ .stat-card, .framework-card, .core-point-card, .insight-card, .epigraph-box, .quote-block, .chapter-nav { border-radius: var(--md3-radius-lg) !important; box-shadow: var(--md3-elevation-1); transition: box-shadow var(--md3-dur-medium) var(--md3-ease-standard), transform var(--md3-dur-medium) var(--md3-ease-standard), border-color var(--md3-dur-medium) var(--md3-ease-standard); } .stat-card:hover, .framework-card:hover, .core-point-card:hover, .insight-card:hover { box-shadow: var(--md3-elevation-2); transform: translateY(-2px); } /* ================================================================= * M3 Chip / Tag(优化 hero 区域的 .tag 圆角胶囊) * ================================================================= */ .chip, [class*="badge"], header.bg-gradient-hero [class*="rounded-full"] { display: inline-flex; align-items: center; gap: 0.375rem; height: 2rem; padding: 0 1rem; border-radius: var(--md3-radius-sm); background: color-mix(in srgb, currentColor 12%, transparent 88%); color: var(--md3-on-surface); font-size: 0.8125rem; font-weight: 500; letter-spacing: 0.01em; line-height: 1; white-space: nowrap; } /* ================================================================= * M3 List / Navigation(章节导航) * ================================================================= */ .chapter-nav a { border-radius: var(--md3-radius-full) !important; padding: 0.5rem 1rem !important; transition: background var(--md3-dur-short) var(--md3-ease-standard); } .chapter-nav a:hover { background: var(--md3-primary-container) !important; color: var(--md3-on-primary-container) !important; } .chapter-nav a[aria-current="true"] { background: var(--md3-primary-container); color: var(--md3-on-primary-container); font-weight: 600; } /* ================================================================= * M3 Image(图文统一圆角 + 阴影) * ================================================================= */ img { max-width: 100%; height: auto; border-radius: var(--md3-radius-md); } /* ================================================================= * M3 Hero 微调(避免子页面 hero 渐变被破坏,只加一层高光) * ================================================================= */ header.bg-gradient-hero, header.hero-section, header[class*="hero-"] { position: relative; isolation: isolate; } header.bg-gradient-hero::after, header.hero-section::after { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse at top, rgba(255,255,255,0.18) 0%, transparent 70%); pointer-events: none; z-index: 0; } header.bg-gradient-hero > *, header.hero-section > * { position: relative; z-index: 1; } /* ================================================================= * M3 FAB(回顶按钮统一为 Floating Action Button) * ================================================================= */ .back-to-top { box-shadow: var(--md3-elevation-3) !important; transition: transform var(--md3-dur-medium) var(--md3-ease-emphasized), box-shadow var(--md3-dur-medium) var(--md3-ease-standard) !important; } .back-to-top:hover { box-shadow: var(--md3-elevation-3), 0 0 0 4px color-mix(in srgb, currentColor 20%, transparent 80%) !important; } /* ================================================================= * M3 Section Spacing(章节之间统一呼吸) * ================================================================= */ .content-section section + section, .content-section h2 + p, .content-section p + h2, .content-section p + h3 { margin-top: clamp(1.5rem, 3vw, 2.25rem); } .content-section p { margin-bottom: 1rem; } .content-section blockquote, .content-section .quote-block, .content-section .epigraph-box { margin: 1.5rem 0; padding: 1.25rem 1.5rem; } /* ================================================================= * M3 Print(打印友好) * ================================================================= */ @media print { nav, .back-to-top, .reading-progress, .footer-nav { display: none !important; } body { background: white !important; color: black !important; } a { text-decoration: underline; color: black !important; } .content-section h2 { page-break-after: avoid; } .content-section section { page-break-inside: avoid; } }