/* ===================================================================== W2C Design Tokens ------------------------------------------------------------------- 两套主题：深色（默认）/ 浅色 / 跟随系统 切换方式：；无 data-theme 时跟随系统 ===================================================================== */ /* ---------------- 共享结构 tokens（不随主题变） ---------------- */ :root { /* 圆角 */ --radius-xs: 4px; --radius-sm: 8px; --radius-md: 12px; --radius-lg: 16px; --radius-xl: 24px; --radius-pill: 999px; /* 间距 */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-7: 28px; --space-8: 32px; --space-9: 36px; --space-10: 40px; --space-11: 44px; --space-12: 48px; --space-14: 56px; --space-16: 64px; --space-20: 80px; /* 字号 */ --fs-xs: 0.75rem; --fs-sm: 0.875rem; --fs-base: 1rem; --fs-md: 1.125rem; --fs-lg: 1.25rem; --fs-xl: 1.5rem; --fs-2xl: 2rem; --fs-3xl: 2.5rem; --fs-4xl: 3.25rem; /* 字重 */ --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; --fw-black: 800; /* 过渡 */ --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1); --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); --dur-fast: 150ms; --dur-base: 220ms; --dur-slow: 360ms; /* 布局（与 common.css 对齐） */ --container-width: 1250px; --container-narrow: 960px; --container-wide: 1440px; /* z-index */ --z-header: 1001; --z-modal: 1200; --z-toast: 1400; --z-tooltip: 1500; /* 阴影 */ --shadow-xs: 0 1px 2px rgba(10, 25, 47, 0.06); --shadow-sm: 0 2px 6px rgba(10, 25, 47, 0.08); --shadow-md: 0 6px 18px rgba(10, 25, 47, 0.10); --shadow-lg: 0 16px 40px rgba(10, 25, 47, 0.14); /* 无障碍焦点色 */ --focus-ring: 0 0 0 3px rgba(37, 211, 102, 0.35); } /* ---------------- 暗色主题（默认） ---------------- */ :root, :root[data-theme="dark"] { /* 语义色 */ --bg: #0a192f; --bg-soft: #0d2341; --surface: #11233f; --surface-2: #16304f; --surface-hover: #1a3858; --border: rgba(255, 255, 255, 0.08); --border-strong: rgba(255, 255, 255, 0.18); --text: #e6f1ff; --text-strong: #ffffff; --text-weak: #a8b2d1; --text-muted: #6f7d99; --accent: #25d366; --accent-hover: #1fb558; --accent-weak: rgba(37, 211, 102, 0.14); --accent-on: #0a192f; --info: #53bdeb; --danger: #f15c6d; --success: #25d366; --warning: #ffb547; /* 玻璃态 */ --glass-bg: rgba(255, 255, 255, 0.06); --glass-border: rgba(255, 255, 255, 0.12); --glass-shadow: rgba(0, 0, 0, 0.25); /* body 渐变 */ --bg-gradient: radial-gradient(circle at 20% 0%, #10294a 0%, #0a192f 45%, #050d1c 100%); /* 兼容旧变量（让未重构的旧 CSS 也能使用） */ --deep-blue: #0a192f; --deep-purple: #050d1c; --cyan: #25d366; --neon-blue: #53bdeb; --purple: #bd93f9; --pink: #ff79c6; --red-light: #f15c6d; --neon-pink: #ff6ec7; --white: #e6f1ff; --light-gray: #a8b2d1; --dark-gray: #333; --light-slate: #a8b2d1; --lightest-slate: #ccd6f6; color-scheme: dark; } /* ---------------- 浅色主题 ---------------- */ :root[data-theme="light"] { --bg: #f6f7fb; --bg-soft: #ffffff; --surface: #ffffff; --surface-2: #f1f3f8; --surface-hover: #e9ecf3; --border: rgba(10, 25, 47, 0.08); --border-strong: rgba(10, 25, 47, 0.18); --text: #0a192f; --text-strong: #05101f; --text-weak: #4a5775; --text-muted: #7a839b; --accent: #0e9f52; --accent-hover: #0a7e40; --accent-weak: rgba(14, 159, 82, 0.10); --accent-on: #ffffff; --info: #0b7ac8; --danger: #d23a4d; --success: #0e9f52; --warning: #b07600; --glass-bg: rgba(10, 25, 47, 0.04); --glass-border: rgba(10, 25, 47, 0.08); --glass-shadow: rgba(10, 25, 47, 0.06); --bg-gradient: linear-gradient(180deg, #ffffff 0%, #f4f5f9 100%); /* 兼容旧变量 */ --deep-blue: #f6f7fb; --deep-purple: #ffffff; --cyan: #0e9f52; --neon-blue: #0b7ac8; --white: #0a192f; --light-gray: #4a5775; --dark-gray: #05101f; --light-slate: #4a5775; --lightest-slate: #0a192f; color-scheme: light; } /* ---------------- 跟随系统 ---------------- */ @media (prefers-color-scheme: light) { :root:not([data-theme]) { --bg: #f6f7fb; --bg-soft: #ffffff; --surface: #ffffff; --surface-2: #f1f3f8; --surface-hover: #e9ecf3; --border: rgba(10, 25, 47, 0.08); --border-strong: rgba(10, 25, 47, 0.18); --text: #0a192f; --text-strong: #05101f; --text-weak: #4a5775; --text-muted: #7a839b; --accent: #0e9f52; --accent-hover: #0a7e40; --accent-weak: rgba(14, 159, 82, 0.10); --accent-on: #ffffff; --info: #0b7ac8; --glass-bg: rgba(10, 25, 47, 0.04); --glass-border: rgba(10, 25, 47, 0.08); --glass-shadow: rgba(10, 25, 47, 0.06); --bg-gradient: linear-gradient(180deg, #ffffff 0%, #f4f5f9 100%); --deep-blue: #f6f7fb; --deep-purple: #ffffff; --cyan: #0e9f52; --neon-blue: #0b7ac8; --white: #0a192f; --light-gray: #4a5775; --dark-gray: #05101f; --light-slate: #4a5775; --lightest-slate: #0a192f; color-scheme: light; } } /* ---------------- 全局重置：接入 tokens ---------------- */ html { color-scheme: light dark; } body { background: var(--bg-gradient) fixed !important; color: var(--text); /* 首屏保底：避免 fixed header 遮挡内容（JS 加载后会用精确高度覆盖） */ padding-top: 180px; overflow-x: hidden; transition: background-color var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out); } body.ad-closed, body:not(.has-ad) { padding-top: 72px; } @media (max-width: 768px) { body { padding-top: 140px; } body.ad-closed, body:not(.has-ad) { padding-top: 60px; } } @media (max-width: 480px) { body { padding-top: 130px; } body.ad-closed, body:not(.has-ad) { padding-top: 56px; } } /* 防止任意子元素造成横向溢出（严格版） */ html, body { max-width: 100vw !important; overflow-x: hidden !important; margin: 0 !important; } body { width: 100%; box-sizing: border-box; } main { max-width: 100vw; overflow-x: clip; box-sizing: border-box; } * { box-sizing: border-box; } img, video, iframe, svg, picture { max-width: 100%; } /* 轮播/flex 容器底层安全网 */ section, .section, .container { min-width: 0; } /* 滚动条（跟随主题） */ ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-track { background: var(--bg-soft); } ::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 6px; } ::-webkit-scrollbar-thumb:hover { background: var(--accent); } ::selection { background: var(--accent-weak); color: var(--accent); } /* 视觉隐藏（SEO/GEO 用） */ .visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }