/* ============================================================= 基础样式：重置 + 排版 + 全局 ============================================================= */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; } body { margin: 0; font-family: var(--font-body); font-size: var(--t-base); line-height: 1.65; color: var(--text); background: var(--bg); -webkit-font-smoothing: antialiased; transition: background var(--tf-slow), color var(--tf); } h1,h2,h3,h4 { font-family: var(--font-display); line-height: 1.15; margin: 0 0 var(--s4); font-weight: 800; letter-spacing: -.02em; } h1 { font-size: var(--t-6xl); } h2 { font-size: var(--t-4xl); } h3 { font-size: var(--t-2xl); } p { margin: 0 0 var(--s4); color: var(--text-2); } a { color: var(--primary); text-decoration: none; transition: color var(--tf-fast); } a:hover { color: var(--primary-dark); } img { max-width: 100%; display: block; } ul { margin: 0; padding: 0; list-style: none; } button { font-family: inherit; cursor: pointer; border: none; background: none; } :focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; border-radius: var(--r-sm); } /* 通用容器 */ .container { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 var(--s6); } .section { padding: var(--s20) 0; position: relative; } /* 区块分界：相邻 section 顶部发丝线，使“版本/模块”边界清晰可辨 */ .section + .section { border-top: 1px solid var(--hairline); } /* 交替色带：浅蓝灰底 + 上下清晰发丝线，使相邻模块明显可分 */ .section--soft { background: linear-gradient(180deg, #f5f8fc 0%, #ffffff 100%); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); } /* 暗轨页面：section 之间同样加发丝线，避免暗色块糊在一起 */ .track-music .section + .section { border-top: 1px solid var(--border-soft); } .track-music .section--soft { border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); } /* 暗色带（用于亮轨页面内嵌 CTA / 音乐召唤）：统一深色容器，避免在浅色页中突兀的 inline 背景 */ .band-dark { background: radial-gradient(900px 500px at 80% -10%, rgba(255,87,34,.16), transparent 60%), radial-gradient(700px 400px at 0% 120%, rgba(26,111,245,.14), transparent 60%), #0a0a0f; color: #f5f6fa; border-radius: var(--r-xl); padding: var(--s16); text-align: center; position: relative; overflow: hidden; } .band-dark h1, .band-dark h2, .band-dark h3 { color: #fff; } .band-dark .lead { color: #c2c6d2; } .band-dark .eyebrow { color: var(--accent); } /* 文本工具 */ .text-gradient { background: var(--grad-hero); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; } .eyebrow { display: inline-flex; align-items: center; gap: var(--s2); font-size: var(--t-sm); font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--primary); margin-bottom: var(--s4); } .track-music .eyebrow { color: var(--accent); } .lead { font-size: var(--t-lg); color: var(--text-2); max-width: 60ch; } .muted { color: var(--text-mute); } /* 区块标题（三段式） */ .section-head { text-align: center; max-width: 720px; margin: 0 auto var(--s12); } .section-head .eyebrow { justify-content: center; } .section-head p { margin: 0 auto; } /* 进入动画 */ @keyframes fadeUp { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } } /* 进入动画（渐进增强）： 默认可见；仅当浏览器支持 JS + IntersectionObserver 时， 由 components.js 给 加上 reveal-ready，元素才先隐藏再入场动画。 这样在无 JS / JS 加载失败 / 不支持 IO 时，内容始终完整可见。 */ .reveal { opacity: 1; } html.reveal-ready .reveal { opacity: 0; } html.reveal-ready .reveal.in { animation: fadeUp .7s var(--tf-spring) forwards; } @media (prefers-reduced-motion: reduce) { html.reveal-ready .reveal { opacity: 1; animation: none; } }