/* ============================================================ FFG Pro 设计变量层（Design Tokens） - 明暗双主题：[data-theme="light"|"dark"] 挂在 上 - 点睛色 = 品牌 logo 红 #B91F33；辅助金 #CCBD9B - 所有组件只引用本文件的变量，禁止散落裸色值 ============================================================ */ :root { /* ---- 品牌色 ---- */ --ffg-red: #B91F33; /* logo 红，点睛色 */ --ffg-red-deep: #8F1828; /* 红色 hover/深态 */ --ffg-red-soft: rgba(185, 31, 51, .08); /* 红色淡底 */ --ffg-gold: #CCBD9B; /* logo 辅色金 */ --ffg-gold-deep: #A89A74; /* ---- 浅色主题（默认） ---- */ --bg-page: #FFFFFF; --bg-soft: #F7F5F2; /* 暖纸色区块 */ --bg-card: #FFFFFF; --bg-glass: rgba(255, 255, 255, .78); --bg-header: rgba(255, 255, 255, .82); --text-main: #171412; --text-sub: #57504A; --text-mute: #8A8178; --line: #EAE5DE; --line-strong: #D8D1C6; --shadow-card: 0 1px 2px rgba(23, 20, 18, .04), 0 8px 24px rgba(23, 20, 18, .06); --shadow-lift: 0 2px 6px rgba(23, 20, 18, .06), 0 16px 40px rgba(23, 20, 18, .10); --shadow-glass: 0 8px 32px rgba(23, 20, 18, .10); --hero-mask: linear-gradient(180deg, rgba(15, 13, 12, .42) 0%, rgba(15, 13, 12, .72) 100%); /* ---- 字体 ---- */ --font-body: "Noto Sans SC", "PingFang SC", "Microsoft YaHei", "Helvetica Neue", Arial, sans-serif; --font-display: "Barlow Condensed", "Noto Sans SC", "PingFang SC", sans-serif; /* ---- 字阶（紧凑舒适） ---- */ --fs-h1: clamp(30px, 5vw, 52px); --fs-h2: clamp(24px, 3.2vw, 36px); --fs-h3: 20px; --fs-body: 15px; --fs-small: 13px; --lh-body: 1.75; /* ---- 间距（4px 基栅） ---- */ --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 64px; --section-gap: clamp(56px, 8vw, 96px); /* ---- 结构 ---- */ --wrap: 1200px; --radius-s: 8px; --radius-m: 14px; --radius-l: 20px; /* ---- 动效 ---- */ --ease: cubic-bezier(.4, 0, .2, 1); --dur-fast: 180ms; --dur-mid: 280ms; /* ---- 层级标尺 ---- */ --z-content: 10; --z-sticky: 20; --z-header: 30; --z-overlay: 40; --z-drawer: 50; } [data-theme="dark"] { --bg-page: #0F0D0C; --bg-soft: #161312; --bg-card: #1A1614; --bg-glass: rgba(26, 22, 20, .72); --bg-header: rgba(15, 13, 12, .78); --text-main: #F3EFE9; --text-sub: #C9C0B6; --text-mute: #8A8178; --line: #2A2521; --line-strong: #3B342E; --shadow-card: 0 1px 2px rgba(0, 0, 0, .30), 0 8px 24px rgba(0, 0, 0, .28); --shadow-lift: 0 2px 6px rgba(0, 0, 0, .34), 0 16px 40px rgba(0, 0, 0, .42); --shadow-glass: 0 8px 32px rgba(0, 0, 0, .45); --hero-mask: linear-gradient(180deg, rgba(8, 6, 5, .50) 0%, rgba(8, 6, 5, .82) 100%); } /* ---- 基础重置（主题内自洽，不依赖 bootstrap/normalize） ---- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } body { margin: 0; font-family: var(--font-body); font-size: var(--fs-body); line-height: var(--lh-body); color: var(--text-main); background: var(--bg-page); transition: background-color var(--dur-mid) var(--ease), color var(--dur-mid) var(--ease); } img, video { max-width: 100%; display: block; } a { color: inherit; text-decoration: none; transition: color var(--dur-fast) var(--ease); } ul, ol, p, h1, h2, h3, h4 { margin: 0; padding: 0; } li { list-style: none; } button, input, textarea { font: inherit; color: inherit; } :focus-visible { outline: 2px solid var(--ffg-red); outline-offset: 2px; border-radius: 2px; } .wrap { max-width: var(--wrap); margin-inline: auto; padding-inline: 20px; } /* ---- 无障碍：尊重减弱动效 ---- */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } }