/* ============================================= Seedance2Prompt.org — 设计系统变量 配色直接取自 apple.com 真实 CSS 来源：--color-fill / --gray1~3 / CTA 按钮色 ============================================= */ /* ===== 暗色模式（默认） ===== */ :root, [data-theme="dark"] { /* —— 背景色系 apple.com 暗色区域：#000000 --color-fill-secondary: #161617 --color-fill-tertiary: #1d1d1f —— */ --bg-primary: #000000; --bg-secondary: #161617; --bg-tertiary: #1d1d1f; --bg-card: #161617; --bg-card-hover: #1d1d1f; /* —— 文字色系 apple.com: --gray1 #f5f5f7 / --gray2 #86868b / --gray3 #1d1d1f 暗模式主文字 = gray1, 二级 = #a1a1a6, 三级 = #98989d #98989d 确保在 card (#161617) 上也有 5.1:1 对比度 —— */ --text-primary: #f5f5f7; --text-secondary: #a1a1a6; --text-muted: #98989d; /* —— 主强调色 apple.com 暗色链接：#2997ff apple.com CTA 按钮：#0071e3 —— */ --accent-primary: #2997ff; /* —— 辅助强调色（Apple HIG system colors dark mode） —— */ --accent-blue: #0a84ff; --accent-green: #30d158; --accent-red: #ff453a; --accent-purple: #bf5af2; --accent-yellow: #ffd60a; --accent-orange: #ff9f0a; --accent-teal: #64d2ff; /* —— 渐变 Apple CTA 按钮 = 纯色 #0071e3，不用渐变 这里用极微妙的同色调渐变保留立体感 —— */ --gradient-main: linear-gradient(135deg, #0077ed 0%, #0071e3 100%); --gradient-subtle: linear-gradient(135deg, rgba(0,113,227,0.06), rgba(0,119,237,0.04)); --gradient-card: linear-gradient(145deg, #161617, #1d1d1f); /* —— 边框 apple.com separator: rgba(255,255,255,0.08) —— */ --border-color: rgba(255,255,255,0.08); --border-glow: rgba(0,113,227,0.4); /* —— 语义色映射 —— */ --color-subject: var(--accent-primary); --color-motion: var(--accent-green); --color-camera: var(--accent-teal); --color-style: var(--accent-purple); --color-scene: var(--accent-orange); /* —— Badge 背景/边框（基于 accent 色的低透明度，适当提高以衬托文字） —— */ --badge-primary-bg: rgba(41,151,255,0.14); --badge-primary-border: rgba(41,151,255,0.28); --badge-primary-text: var(--accent-primary); --badge-blue-bg: rgba(10,132,255,0.12); --badge-blue-border: rgba(10,132,255,0.24); --badge-blue-text: var(--accent-blue); --badge-red-bg: rgba(255,69,58,0.12); --badge-red-border: rgba(255,69,58,0.24); --badge-red-text: var(--accent-red); --badge-green-bg: rgba(48,209,88,0.12); --badge-green-border: rgba(48,209,88,0.24); --badge-green-text: var(--accent-green); /* —— 按钮/交互反馈 —— */ --glow-primary: rgba(0,113,227,0.2); --glow-blue: rgba(10,132,255,0.15); --focus-ring: rgba(0,113,227,0.35); /* —— 微调半透明色 —— */ --btn-secondary-border: rgba(255,255,255,0.16); --btn-secondary-hover-bg: rgba(0,113,227,0.1); --prompt-copy-hover-bg: rgba(0,113,227,0.15); --formula-block-bg: linear-gradient(145deg, rgba(0,113,227,0.04), rgba(10,132,255,0.03)); --formula-block-border: rgba(0,113,227,0.18); --badge-yellow-bg: rgba(255,214,10,0.1); --keyword-hover-bg: rgba(0,113,227,0.08); --card-hover-shadow: rgba(0,0,0,0.5); --pricing-feature-border: rgba(255,255,255,0.06); --code-bg: rgba(10,132,255,0.08); --word-pill-hover-bg: rgba(0,113,227,0.1); --tip-box-bg: rgba(48,209,88,0.06); --tip-box-border: rgba(48,209,88,0.2); /* —— 组件局部色 —— */ --nav-bg: rgba(0,0,0,0.8); --nav-border: rgba(255,255,255,0.06); --prompt-header-bg: rgba(255,255,255,0.04); --prompt-tag-bg: rgba(255,255,255,0.06); --section-accent-mid: rgba(0,113,227,0.02); --divider-color-left: rgba(10,132,255,0.12); --divider-color-center: rgba(41,151,255,0.6); --divider-color-right: rgba(10,132,255,0.12); --selection-bg: rgba(0,113,227,0.4); --table-hover-bg: rgba(255,255,255,0.03); --table-header-border: var(--accent-primary); --pricing-featured-glow: rgba(0,113,227,0.08); --testimonial-quote: rgba(41,151,255,0.1); --grid-line: rgba(255,255,255,0.03); --glow-orb-1: rgba(0,113,227,0.05); --glow-orb-2: rgba(10,132,255,0.03); --glow-orb-3: rgba(48,209,88,0.02); /* —— 按钮文字色 —— */ --btn-text-on-gradient: #ffffff; /* —— 字体 apple.com 用 SF Pro，公开可用的 fallback 链 —— */ --font-display: -apple-system, BlinkMacSystemFont, 'SF Pro Display', system-ui, 'Helvetica Neue', sans-serif; --font-body: -apple-system, BlinkMacSystemFont, 'SF Pro Text', system-ui, 'Helvetica Neue', sans-serif; --font-mono: 'SF Mono', 'JetBrains Mono', 'Fira Code', 'Menlo', monospace; /* —— 布局 —— */ --max-width: 1200px; --section-padding: 96px 0; --radius-sm: 8px; --radius-md: 12px; --radius-lg: 20px; --radius-xl: 28px; /* —— 主题切换按钮 —— */ --theme-toggle-bg: rgba(255,255,255,0.06); --theme-toggle-border: rgba(255,255,255,0.12); --theme-toggle-hover: rgba(0,113,227,0.15); /* —— 旧变量名兼容映射 —— */ --accent-cyan: var(--accent-teal); --accent-magenta: var(--accent-red); } /* ===== 明亮模式 ===== */ [data-theme="light"] { /* —— 背景色系 apple.com: #ffffff 主背景 / #f5f5f7 灰色区间 --color-fill-gray: #f5f5f7 —— */ --bg-primary: #ffffff; --bg-secondary: #f5f5f7; --bg-tertiary: #e8e8ed; --bg-card: #ffffff; --bg-card-hover: #f5f5f7; /* —— 文字色系 apple.com: --gray3 #1d1d1f / --gray2 #6e6e73 二级 #515154 (7.3:1 on white) 确保段落正文可读 三级 #6e6e73 (5.0:1 on white) 通过 WCAG AA —— */ --text-primary: #1d1d1f; --text-secondary: #515154; --text-muted: #6e6e73; /* —— 主强调色 apple.com CTA按钮 / 链接：#0066cc（链接）/ #0071e3（按钮） —— */ --accent-primary: #0066cc; /* —— 辅助强调色（Apple HIG system colors light mode） —— */ --accent-blue: #007aff; --accent-green: #34c759; --accent-red: #ff3b30; --accent-purple: #af52de; --accent-yellow: #ff9500; --accent-orange: #ff9500; --accent-teal: #5ac8fa; /* —— 渐变（纯蓝，同色调微妙变化） —— */ --gradient-main: linear-gradient(135deg, #0077ed 0%, #0071e3 100%); --gradient-subtle: linear-gradient(135deg, rgba(0,113,227,0.04), rgba(0,119,237,0.03)); --gradient-card: linear-gradient(145deg, #ffffff, #f9f9fb); /* —— 边框 —— */ --border-color: rgba(0,0,0,0.08); --border-glow: rgba(0,102,204,0.3); /* —— Badge 背景/边框（轻微提高不透明度增强文字衬托） —— */ --badge-primary-bg: rgba(0,102,204,0.1); --badge-primary-border: rgba(0,102,204,0.2); --badge-primary-text: var(--accent-primary); --badge-blue-bg: rgba(0,122,255,0.1); --badge-blue-border: rgba(0,122,255,0.2); --badge-blue-text: var(--accent-blue); --badge-red-bg: rgba(255,59,48,0.1); --badge-red-border: rgba(255,59,48,0.2); --badge-red-text: var(--accent-red); --badge-green-bg: rgba(52,199,89,0.1); --badge-green-border: rgba(52,199,89,0.2); --badge-green-text: var(--accent-green); /* —— 按钮/交互反馈 —— */ --glow-primary: rgba(0,102,204,0.15); --glow-blue: rgba(0,122,255,0.12); --focus-ring: rgba(0,102,204,0.25); /* —— 微调半透明色 —— */ --btn-secondary-border: rgba(0,0,0,0.15); --btn-secondary-hover-bg: rgba(0,102,204,0.06); --prompt-copy-hover-bg: rgba(0,102,204,0.1); --formula-block-bg: linear-gradient(145deg, rgba(0,102,204,0.03), rgba(0,122,255,0.02)); --formula-block-border: rgba(0,102,204,0.15); --badge-yellow-bg: rgba(255,149,0,0.1); --keyword-hover-bg: rgba(0,102,204,0.05); --card-hover-shadow: rgba(0,0,0,0.08); --pricing-feature-border: rgba(0,0,0,0.06); --code-bg: rgba(0,122,255,0.06); --word-pill-hover-bg: rgba(0,102,204,0.06); --tip-box-bg: rgba(52,199,89,0.06); --tip-box-border: rgba(52,199,89,0.18); /* —— 组件局部色 —— */ --nav-bg: rgba(255,255,255,0.88); --nav-border: rgba(0,0,0,0.06); --prompt-header-bg: rgba(0,0,0,0.02); --prompt-tag-bg: rgba(0,0,0,0.04); --section-accent-mid: rgba(0,102,204,0.015); --divider-color-left: rgba(0,122,255,0.1); --divider-color-center: rgba(0,102,204,0.5); --divider-color-right: rgba(0,122,255,0.1); --selection-bg: rgba(0,102,204,0.3); --table-hover-bg: rgba(0,0,0,0.02); --table-header-border: var(--accent-primary); --pricing-featured-glow: rgba(0,102,204,0.04); --testimonial-quote: rgba(0,102,204,0.08); --grid-line: rgba(0,0,0,0.04); --glow-orb-1: rgba(0,102,204,0.04); --glow-orb-2: rgba(0,122,255,0.03); --glow-orb-3: rgba(52,199,89,0.02); /* —— 按钮文字色 —— */ --btn-text-on-gradient: #ffffff; /* —— 主题切换按钮 —— */ --theme-toggle-bg: rgba(0,0,0,0.04); --theme-toggle-border: rgba(0,0,0,0.1); --theme-toggle-hover: rgba(0,102,204,0.1); }