/* ============================================================ SUN文案引擎 · 设计 Token v3 深炭黑 + 暖沙灰 · 深色极简作品集 + 沉浸暖调营销页 Design Tokens v3.0 — Warm Charcoal & Sand, dark-first, light-ready ============================================================ */ /* ------------------------------------------------------------ 响应式断点规范（单一事实源） CSS 变量不能用于 @media 条件表达式，此注释为查阅用。 全站所有 @media 必须严格使用下列四档之一： 手机 : max-width: 767px 平板竖 : 768 ~ 1023px 平板横 : 1024 ~ 1279px (min-width:1024px and max-width:1279px) 桌面 : min-width: 1280px 严禁出现 599 / 414 / 480 等中间魔法数。 ------------------------------------------------------------ */ :root { /* ---------- 品牌暖沙灰（替代紫蓝渐变） ---------- */ --brand-from: #C4B09A; /* 暖沙灰 */ --brand-to: #9E8E80; /* 深沙棕 */ --brand-grad: linear-gradient(135deg, #C4B09A 0%, #9E8E80 100%); --brand-grad-soft: linear-gradient(135deg, rgba(196, 176, 154, 0.14) 0%, rgba(158, 142, 128, 0.14) 100%); --brand-grad-text: linear-gradient(135deg, #D9C8B6 0%, #B8A690 100%); --color-primary: #C4B09A; /* 暖沙灰 */ --color-primary-hover: #D4C0AA; /* 浅沙 */ --color-primary-active: #A89480; /* 深沙 */ --color-primary-light: rgba(196, 176, 154, 0.12); --color-primary-glow: rgba(196, 176, 154, 0.22); /* ---------- 状态色（低饱和，深色友好） ---------- */ --color-success: #7EA68A; /* muted sage */ --color-success-light: rgba(126, 166, 138, 0.12); --color-warning: #C9A46D; /* muted amber */ --color-warning-light: rgba(201, 164, 109, 0.12); --color-danger: #C96B6B; /* muted rose */ --color-danger-light: rgba(201, 107, 107, 0.12); --color-info: #7A9AB0; /* muted slate blue */ --color-info-light: rgba(122, 154, 176, 0.12); /* 兼容旧引用 */ --color-gold: #C9A46D; --color-purple: #B8A690; /* ---------- 中性色（深色默认：深炭黑 + 暖白） ---------- */ --color-bg: #111113; /* 主背景：极深炭黑 */ --color-bg-2: #16161A; /* 次背景 */ --color-surface: #1A1A1F; /* 卡片/面板 */ --color-surface-1: #1F1F25; /* 抬升一层 */ --color-surface-2: #25252C; /* 再抬升 */ --color-surface-3: #2C2C34; /* 最高层 / 选中态 */ --color-border: rgba(242, 240, 237, 0.08); --color-border-strong:rgba(242, 240, 237, 0.15); --color-text-primary: #F2F0ED; /* 暖白 */ --color-text-secondary:#9E9A94; /* 暖灰 */ --color-text-muted: #6B6760; /* 次要灰 */ /* 玻璃拟态：用于导航/顶栏/模态 */ --glass-bg: rgba(26, 26, 31, 0.78); --glass-border: rgba(242, 240, 237, 0.09); --glass-blur: 20px; /* ---------- 间距（4px 基线） ---------- */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px; --space-12: 48px; --space-14: 56px; --space-16: 64px; --space-18: 72px; --space-20: 80px; --space-24: 96px; --space-32: 128px; /* ---------- 圆角（更克制） ---------- */ --radius-sm: 4px; --radius-md: 8px; --radius-lg: 12px; --radius-xl: 20px; --radius-2xl: 28px; --radius-full: 9999px; /* ---------- 字体（系统字体栈，零网络请求，商用安全）---------- 苹果设备→苹方 / Windows→微软雅黑 / Android→思源黑体 / 兜底→Arial 所有字体随系统授权给最终用户，调用系统字体不构成商业发布，无侵权风险 */ --font-display-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Microsoft YaHei', 'Source Han Sans SC', 'Noto Sans CJK SC', Arial, sans-serif; --font-display-serif: Georgia, 'Songti SC', 'SimSun', serif; --font-body: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Microsoft YaHei', 'Source Han Sans SC', 'Noto Sans CJK SC', Arial, sans-serif; --font-mono: 'SF Mono', 'JetBrains Mono', Consolas, 'Courier New', monospace; --font-display: var(--font-display-sans); /* 字号阶梯 */ --fs-xs: 0.75rem; /* 12 */ --fs-sm: 0.875rem; /* 14 */ --fs-base: 1rem; /* 16 */ --fs-lg: 1.125rem; /* 18 */ --fs-xl: 1.25rem; /* 20 */ --fs-2xl: 1.5rem; /* 24 */ --fs-3xl: clamp(1.75rem, 2.5vw, 2.25rem); --fs-4xl: clamp(2.25rem, 4.5vw, 3.5rem); --fs-5xl: clamp(2.75rem, 6vw, 4.5rem); --fs-display: clamp(3rem, 9vw, 6.5rem); /* 行高 */ --lh-tight: 1.05; --lh-snug: 1.25; --lh-base: 1.55; --lh-loose: 1.75; /* 字距 */ --letter-tight: -0.02em; --letter-snug: -0.01em; --letter-wide: 0.04em; --letter-wider: 0.16em; /* ---------- 布局 ---------- */ --container-max: 1440px; --container-narrow: 880px; --container-pad: clamp(20px, 4vw, 48px); --header-h: 72px; --side-w: 248px; --side-w-collapsed: 80px; /* ---------- 动效 ---------- */ --ease-out: cubic-bezier(0.22, 1, 0.36, 1); --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); --dur-fast: 150ms; --dur-base: 250ms; --dur-slow: 450ms; --dur-slower: 800ms; /* ---------- 阴影（中性投影，无彩色光晕） ---------- */ --shadow-glow: 0 0 60px rgba(196, 176, 154, 0.14); --shadow-glow-strong: 0 0 80px rgba(196, 176, 154, 0.20); --shadow-card: 0 1px 0 rgba(255, 255, 255, 0.03) inset, 0 4px 20px rgba(0, 0, 0, 0.32); --shadow-elevated: 0 1px 0 rgba(255, 255, 255, 0.04) inset, 0 12px 40px rgba(0, 0, 0, 0.42); --shadow-brand: 0 8px 32px rgba(196, 176, 154, 0.18); /* ---------- 卡片视觉规范（统一全站卡片底色/边框/圆角/阴影） ---------- .card / .glow-card / .feature-card / .qr-card / .gen-main-card / .gen-prompt-card / .auth-card / .prompt-card 均引用此组 token。 各卡片保留各自的 padding 与特殊视觉（渐变/透明背景等），仅统一基础规范。 */ --card-bg: var(--color-surface); --card-border: var(--color-border); --card-border-hover: var(--color-border-strong); --card-radius: var(--radius-lg); --card-shadow: var(--shadow-card); --card-shadow-hover: var(--shadow-elevated); --card-padding: var(--space-6); /* ---------- 状态边框色（toast / badge 通用，跟随主题切换） ---------- .toast--success/--error/--warning、.toast-err/.toast-warn、 .badge--success/--warning/--danger、.badge.green/.red/.gold/... 均引用此组 token。 统一替代原硬编码 rgba，确保全站状态色一致并跟随主题切换。 */ --state-border-success: rgba(126, 166, 138, 0.40); --state-border-warning: rgba(201, 164, 109, 0.40); --state-border-danger: rgba(201, 107, 107, 0.40); --state-border-info: rgba(127, 158, 200, 0.40); /* ---------- Z-Index ---------- */ --z-header: 50; --z-overlay: 80; --z-modal: 100; --z-toast: 120; /* ---------- 装饰：极简网格/噪点 ---------- */ --bg-grid: linear-gradient(rgba(242,240,237,0.02) 1px, transparent 1px) 0 0 / 48px 48px, linear-gradient(90deg, rgba(242,240,237,0.02) 1px, transparent 1px) 0 0 / 48px 48px; --bg-radial: radial-gradient(ellipse 80% 50% at 50% -10%, rgba(196,176,154,0.10), transparent 60%); --noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.035 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); } /* ============================================================ 浅色主题 —— 在 上设置 data-theme="light" ============================================================ */ [data-theme="light"] { --color-primary: #8B6F52; /* 深沙棕 */ --color-primary-hover: #A08260; /* 浅沙棕 */ --color-primary-active: #6F563C; /* 更深沙棕 */ --color-primary-light: rgba(139, 111, 82, 0.10); --color-primary-glow: rgba(139, 111, 82, 0.16); --brand-from: #8B6F52; --brand-to: #6F563C; --brand-grad: linear-gradient(135deg, #8B6F52 0%, #6F563C 100%); --brand-grad-soft: linear-gradient(135deg, rgba(139, 111, 82, 0.12) 0%, rgba(111, 86, 60, 0.12) 100%); --brand-grad-text: linear-gradient(135deg, #A08260 0%, #6F563C 100%); --color-success: #4A7C59; --color-success-light: rgba(74, 124, 89, 0.10); --color-warning: #A67C3A; --color-warning-light: rgba(166, 124, 58, 0.10); --color-danger: #B54B4B; --color-danger-light: rgba(181, 75, 75, 0.10); --color-info: #4A6D85; --color-info-light: rgba(74, 109, 133, 0.10); --state-border-success: rgba(74, 124, 89, 0.40); --state-border-warning: rgba(166, 124, 58, 0.40); --state-border-danger: rgba(181, 75, 75, 0.40); --state-border-info: rgba(56, 95, 142, 0.40); --color-gold: #A67C3A; --color-purple: #8B6F52; --color-bg: #F7F4F0; /* 暖米白 */ --color-bg-2: #EFEBE5; /* 浅暖灰 */ --color-surface: #FFFFFF; --color-surface-1: #F7F4F0; --color-surface-2: #EFEBE5; --color-surface-3: #E6E1DA; --color-border: rgba(26, 24, 20, 0.08); --color-border-strong:rgba(26, 24, 20, 0.16); --color-text-primary: #1A1814; /* 深炭 */ --color-text-secondary:#5A564E; --color-text-muted: #8A8680; --glass-bg: rgba(255, 255, 255, 0.78); --glass-border: rgba(26, 24, 20, 0.08); --shadow-glow: 0 0 60px rgba(139, 111, 82, 0.12); --shadow-glow-strong: 0 0 80px rgba(139, 111, 82, 0.18); --shadow-card: 0 1px 0 rgba(255, 255, 255, 0.6) inset, 0 4px 16px rgba(26, 24, 20, 0.06); --shadow-elevated: 0 1px 0 rgba(255, 255, 255, 0.8) inset, 0 16px 48px rgba(26, 24, 20, 0.10); --shadow-brand: 0 8px 32px rgba(139, 111, 82, 0.16); --bg-grid: linear-gradient(rgba(26,24,20,0.03) 1px, transparent 1px) 0 0 / 48px 48px, linear-gradient(90deg, rgba(26,24,20,0.03) 1px, transparent 1px) 0 0 / 48px 48px; --bg-radial: radial-gradient(ellipse 80% 50% at 50% -10%, rgba(139,111,82,0.08), transparent 60%); --noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.02 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); } /* 兼容旧写法：body.light-mode（部分页面历史用法） */ body.light-mode { --color-primary: #8B6F52; --color-primary-hover: #A08260; --color-bg: #F7F4F0; --color-bg-2: #EFEBE5; --color-surface: #FFFFFF; --color-surface-1: #F7F4F0; --color-surface-2: #EFEBE5; --color-surface-3: #E6E1DA; --color-border: rgba(26, 24, 20, 0.08); --color-border-strong: rgba(26, 24, 20, 0.16); --color-text-primary: #1A1814; --color-text-secondary: #5A564E; --color-text-muted: #8A8680; } /* ---------- 平滑主题过渡 ---------- */ html { transition: background-color var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out); } /* ---------- 减少动效偏好 ---------- */ @media (prefers-reduced-motion: reduce) { :root { --dur-fast: 1ms; --dur-base: 1ms; --dur-slow: 1ms; --dur-slower: 1ms; } }