/* ═══════════════════════════════════════════════════════ Design Tokens — Purple Iridescent (顶级视觉 · Dark Luxury) SSOT: ~/.agent-runtime/.../memory/dark-luxury-style.md ═══════════════════════════════════════════════════════ */ :root { /* ─── 底色 ─── */ --bg-void: #08070d; /* 极深 · hero 顶部渐变起点 */ --bg-deep: #120f17; /* 主背景 */ --bg-card: #1a1625; /* 卡片底 */ --bg-card-hover: #221a30; /* 卡片悬停 */ --bg-elevated: #2a2238; /* 浮层底 */ /* ─── 强调色（全部派生自 iri-* 主轴，保持单一来源） ─── */ --accent-purple: var(--iri-0); --accent-pink: var(--iri-2); --accent-gold: var(--iri-7); --accent-gold-bright: #e8d4a8; --accent-cyan: var(--iri-6); /* ─── 文字 ─── */ --text-primary: #fafaf7; /* 主文字 · 暖白 */ --text-secondary: #9a9aa8; --text-muted: #5a5a68; --text-accent: var(--accent-gold); --text-gold: var(--accent-gold); /* ─── 边框 ─── */ --border-subtle: rgba(255, 255, 255, 0.06); --border-medium: rgba(255, 255, 255, 0.12); --border-accent: rgba(212, 165, 116, 0.4); /* ─── 玻璃 ─── */ --glass-bg: rgba(18, 15, 23, 0.6); --glass-blur: blur(20px) saturate(180%); --glass-blur-strong: blur(32px) saturate(180%); /* ─── 字体 ─── */ --font-display: "Bricolage Grotesque", "PingFang SC", "Songti SC", "STSong", "Source Han Serif SC", "Noto Serif CJK SC", serif; --font-body: "Bricolage Grotesque", "PingFang SC", "Microsoft YaHei", "Hiragino Sans GB", sans-serif; --font-zh-serif: "Songti SC", "STSong", "Source Han Serif SC", "Noto Serif CJK SC", "SimSun", serif; --font-zh-sans: "PingFang SC", "Microsoft YaHei", "Hiragino Sans GB", sans-serif; --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace; /* ─── 字号（fluid） ─── */ --fs-hero: clamp(4rem, 12vw, 10rem); --fs-section: clamp(2.5rem, 5vw, 4.5rem); --fs-card: clamp(1.5rem, 2.5vw, 2rem); --fs-eyebrow: 0.75rem; --fs-zh-aux: clamp(1.125rem, 1.5vw, 1.5rem); --fs-stat: clamp(3rem, 6vw, 5rem); --fs-body: 1rem; --fs-small: 0.875rem; /* ─── 字距 ─── */ --tracking-tight: -0.04em; --tracking-display: -0.05em; --tracking-eyebrow: 0.3em; --tracking-wide: 0.05em; /* ─── 行高 ─── */ --lh-tight: 0.95; --lh-snug: 1.15; --lh-normal: 1.5; --lh-loose: 1.8; /* ─── 间距 ─── */ --space-xs: 0.5rem; --space-sm: 1rem; --space-md: 1.5rem; --space-lg: 2.5rem; --space-xl: 4rem; --space-2xl: 6rem; --space-3xl: 10rem; /* ─── 缓动 ─── */ --ease-luxe: cubic-bezier(0.16, 1, 0.3, 1); --ease-glide: cubic-bezier(0.65, 0, 0.35, 1); --ease-soft: cubic-bezier(0.4, 0, 0.2, 1); --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); /* ─── 持续 ─── */ --dur-quick: 250ms; --dur-smooth: 500ms; --dur-cinema: 1000ms; --dur-epic: 1800ms; /* ─── 圆角 ─── */ --radius-sm: 6px; --radius-md: 12px; --radius-lg: 20px; --radius-xl: 28px; --radius-pill: 999px; /* ─── 阴影 ─── */ --shadow-glow-purple: 0 0 40px rgba(168, 85, 247, 0.4); --shadow-glow-pink: 0 0 40px rgba(217, 70, 239, 0.3); --shadow-glow-gold: 0 0 32px rgba(212, 165, 116, 0.3); --shadow-card: 0 8px 32px rgba(0, 0, 0, 0.4); /* ─── Iridescent 8 色主轴（Purple Iridescent · 2026-06-19 统一） SSOT: 任何流体/光晕/渐变只允许引用这 8 个 token。 顺序 = 自上而下空间分布，每个 slot 的 "d" 变体是同色调暗 0.55×，做密度错落。 */ --iri-0: #a855f7; /* iri-0 · purple */ --iri-0d: #5b2e89; --iri-1: #c026d3; /* iri-1 · magenta-purple */ --iri-1d: #6b1773; --iri-2: #d946ef; /* iri-2 · pink */ --iri-2d: #7a2787; --iri-3: #ec4899; /* iri-3 · hot pink */ --iri-3d: #84264f; --iri-4: #f472b6; /* iri-4 · soft pink */ --iri-4d: #8a4068; --iri-5: #c084fc; /* iri-5 · lavender */ --iri-5d: #6b4a8a; --iri-6: #06b6d4; /* iri-6 · cyan */ --iri-6d: #0e6478; --iri-7: #d4a574; /* iri-7 · gold */ --iri-7d: #6f5639; /* ─── 渐变（全部基于 iri-*） ─── */ --gradient-iri: linear-gradient(135deg, var(--iri-0) 0%, var(--iri-2) 50%, var(--iri-6) 100%); --gradient-gold: linear-gradient(135deg, var(--iri-7) 0%, #e8d4a8 50%, var(--iri-7) 100%); --gradient-hero: radial-gradient(ellipse at top, rgba(168, 85, 247, 0.15), transparent 60%); /* ─── Metallic Champagne (奢华金属系 · 2026-06-19) 用于 Ghost Gold 按钮、golden thread 腰线、metallic reflection 描边。 */ --iri-foil-0: #f4e4c1; /* 香槟高光 */ --iri-foil-1: #d4a574; /* iri-7 香槟金（与 iri-7 同值，保持调性统一） */ --iri-foil-2: #a87a3e; /* 古铜金（深色） */ --iri-foil-3: #6f5639; /* iri-7d 古铜暗金 */ --gradient-champagne: linear-gradient(135deg, var(--iri-foil-0) 0%, var(--iri-foil-1) 35%, var(--iri-foil-2) 65%, var(--iri-foil-1) 100%); --gradient-champagne-v: linear-gradient(180deg, var(--iri-foil-0) 0%, var(--iri-foil-1) 25%, var(--iri-foil-2) 50%, var(--iri-foil-1) 75%, var(--iri-foil-0) 100%); --gradient-gold-thread: linear-gradient(90deg, transparent 0%, var(--iri-foil-2) 15%, var(--iri-foil-0) 50%, var(--iri-foil-2) 85%, transparent 100%); /* ─── 奢华阴影 ─── */ --shadow-luxe-gold: 0 0 24px rgba(212, 165, 116, 0.18), 0 4px 12px rgba(0, 0, 0, 0.5); --shadow-luxe-purple: 0 0 32px rgba(168, 85, 247, 0.25), 0 4px 12px rgba(0, 0, 0, 0.5); --shadow-text-foil: 0 1px 0 rgba(244, 228, 193, 0.4), /* 香槟高光 */ 0 -1px 0 rgba(111, 86, 57, 0.5), /* 古铜暗影 */ 0 0 24px rgba(168, 85, 247, 0.15); /* 紫光晕 */ /* ─── 玻璃（奢华感强化） ─── */ --glass-luxe-bg: rgba(18, 12, 28, 0.55); --glass-luxe-blur: blur(28px) saturate(180%); /* ─── 布局 ─── */ --container-max: 1280px; --container-pad: clamp(1.25rem, 4vw, 3rem); --section-pad-y: clamp(3rem, 7vw, 5rem); /* 2026-06-19 紧凑占位段, 减小 #about/#contact 高度 */ --hero-height: 100vh; /* ─── z-index ─── */ --z-bg: 0; --z-canvas: 1; /* Hero Beams canvas (v17) */ --z-content: 10; /* 文字 / 标题 */ --z-overlay: 100; /* skip-link / modal */ --z-nav: 999; } /* prefers-reduced-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; } }