/* ================================================================ * KYROC · KS100 深色模式 单一真源 (SSOT) * ---------------------------------------------------------------- * 本文件集中定义「移动端深色模式」(prefers-color-scheme: dark) * AND (max-width: 768px) 下的全部颜色 token。 * * 使用约定（铁律）： * · 各 ks100 深色块一律用 var(--token) 引用此处值，禁止再写死 hex； * 改一处即可全站（product-intro / quick-start / use-cases / * popup-menu 顶栏与弹菜单）同步，杜绝固定色漂移。 * · 本文件由 product-intro.css / quick-start.css / use-cases.css * （@import url('theme-toggle.css');）与 popup-menu.css * （@import url('ks100/theme-toggle.css');）引入。 * · 整段包在媒体查询内，浅色模式（或非移动端）下这些深色 token * 完全不生效，绝不反向污染浅色配色。 * ================================================================ */ @media (prefers-color-scheme: dark) and (max-width: 768px) { :root { color-scheme: dark; /* ===== 品牌色 ===== */ --brand-primary: #4A90E2; /* 浅 #1976D2 → 深色提亮更跳 */ --brand-primary-soft: #6BA5F7; /* 浅 #4285F4 */ --brand-primary-hover: #3B82F6; /* 浅 #1565C0 */ --brand-primary-deep: #3B82F6; /* 浅 #0E5BA8 */ --brand-primary-bg: #1E3A5F; /* 浅 #EBF3FF */ --brand-alpha-06: rgba(74, 144, 226, 0.08); --brand-alpha-08: rgba(74, 144, 226, 0.10); --brand-alpha-12: rgba(74, 144, 226, 0.15); /* ===== 文字色 ===== */ --text-primary: #E0E0E0; /* 浅 #0B1220 */ --text-secondary: #CFD8DC; /* 浅 #556675 */ --text-faint: #90A4AE; /* 浅 #9AA6B2 */ --sd-text-primary: #E0E0E0; /* 浅 #1E293B */ --sd-text-secondary: #CFD8DC; /* 浅 #64748B */ --color-text-secondary: #CFD8DC; /* 浅 #666666 */ /* ===== 表面 / 背景 ===== */ --surface-page: #121418; /* 浅 #FFFFFF */ --surface-card: #1E2229; /* 浅 #FAFBFD */ --surface-body: #1A1D24; /* 浅 #F6F9FD */ --surface-body-alt: #22262E; /* 浅 #F8FAFC */ --surface-bg-alt: #1E3A5F; /* 浅 #F0F5FA */ --bg-light: #1A1D24; /* 浅 #F8FAFC */ /* ===== 边框 / 线条 ===== */ --line-default: #455A64; /* 浅 #E2E8F0 */ --line-subtle: #3D4F5F; /* 浅 #EEF2F7 */ --line-faint: #35454F; /* 浅 #EDF0F5 */ /* ===== 语义色 ===== */ --primary: #5A9FF6; /* 浅 #3B82F6 */ --primary-dark: #4A8FE6; /* 浅 #2563EB */ --secondary: #818CF8; /* 浅 #6366F1 */ --success: #34D399; /* 浅 #10B981 */ /* ===== 深色专用扩展 token（无浅色对应，仅供深色块引用） ===== 以下值原为各文件深色块里写死的 hex/rgba，现全部归一到此处， 唯一真源，杜绝散装副本。 */ --menu-line: #FFFFFF; /* 汉堡三线 / KS100 标题：深底上需比 #E0E0E0 更亮才识别清楚 */ --popup-border: #333A45; /* 弹菜单链接/分隔边框 */ --disabled-arrow: #546E7A; /* 下一页(禁用态)箭头，弱可见 */ --surface-elevated: #2A3038; /* 图标渐变末端 / ghost 按钮描边 */ --surface-card-active: #252C35; /* ghost 按钮 :active 底色 */ --final-gradient-from: #1A2233; /* 收尾 CTA 渐变起点（终点 #1A237E 两模式共用，不在此覆盖） */ --hero-glow-1: rgba(74, 144, 226, 0.20); /* hero 径向光晕 1 */ --hero-glow-2: rgba(74, 144, 226, 0.14); /* hero 径向光晕 2 */ --card-glow: rgba(79, 195, 247, 0.30); /* 卡片青蓝补光（基础态） */ --card-glow-soft: rgba(79, 195, 247, 0.20); /* 卡片青蓝补光（柔态） */ --card-glow-hover: rgba(79, 195, 247, 0.40); /* 卡片青蓝补光（hover） */ --card-glow-active: rgba(79, 195, 247, 0.50); /* 卡片青蓝补光（active） */ --brand-alpha-24: rgba(74, 144, 226, 0.24); /* 主按钮按下光晕 */ --brand-alpha-30: rgba(74, 144, 226, 0.30); /* 主按钮 / 卡片品牌光晕 */ --brand-alpha-42: rgba(74, 144, 226, 0.42); /* 卡片按下品牌光晕 */ --uc-page-bg: #1C2838; /* use-cases 暗色页面背景（参考图采样） */ /* use-cases 暗底上的浅蓝强调元素（单一真源） */ --uc-carousel-bg: #D6EAF8; /* 轮播图背景 */ --uc-pill-bg: #BBDEFB; /* 胶囊标签背景 */ --uc-card-bg: #C5E1F5; /* 提示/卡片背景 */ --uc-accent-border: #B3D4FC; /* 胶囊/卡片极细边框 */ --uc-title-color: #212121; /* 浅蓝底标题：深黑 */ --uc-desc-color: #616161; /* 浅蓝底说明文：深灰 */ /* use-cases 暗底 slate 层级（单一真源） */ --uc-hero-bg: #151921; /* Hero 区域背景 */ --uc-feature-bg: #1E2430; /* 功能卡片背景 */ --uc-feature-bg-active: #232B3E; /* 功能卡片选中态 */ --uc-capsule-btn: #2D3748; /* 胶囊按钮背景 */ --uc-icon: #90CDF4; /* 图标（浅蓝） */ --uc-num: #60A5FA; /* 详情小标题编号（品牌浅蓝） */ --uc-title-white: #FFFFFF; /* 主标题纯白 */ --uc-body: #A0AEC0; /* 正文浅灰 */ /* software-download 弹窗（暂未完工 / 下载提示）深色灰黑风 */ --sd-toast-icon-bg: linear-gradient(135deg, var(--surface-elevated), var(--surface-card-active)); --sd-toast-countdown-bg: var(--surface-elevated); --sd-toast-countdown-color: var(--text-secondary); --sd-toast-shadow: 0 25px 60px rgba(0, 0, 0, 0.5), 0 0 40px rgba(0, 0, 0, 0.2); /* software-download 下载完成提示（参考 product-intro 灵动风格） */ --sd-download-toast-bg: rgba(18, 18, 26, 0.98); --sd-download-toast-border: rgba(99, 102, 241, 0.3); --sd-download-toast-shadow: 0 25px 60px rgba(0, 0, 0, 0.5), 0 0 40px rgba(99, 102, 241, 0.15); --sd-download-icon-bg: linear-gradient(135deg, #10b981, #34d399); --sd-download-title-color: #f1f5f9; --sd-download-subtitle-color: rgba(241, 245, 249, 0.75); --sd-download-guidance-bg: rgba(99, 102, 241, 0.1); --sd-download-guidance-text: rgba(241, 245, 249, 0.85); --sd-download-guidance-highlight: #818cf8; --sd-download-action-hint-border: rgba(255, 255, 255, 0.08); --sd-download-action-hint-color: #94a3b8; --sd-download-countdown-bg: rgba(99, 102, 241, 0.2); --sd-download-countdown-color: #818cf8; --sd-download-close-btn-bg: rgba(255, 255, 255, 0.08); --sd-download-close-btn-active-bg: rgba(255, 255, 255, 0.15); --sd-download-close-btn-color: #94a3b8; } /* ============================================================ 全站通用兜底：覆盖各页写死的浅色大背景，防止深色模式下露出白底 ============================================================ */ /* 移动端内容包装器（很多页面写死 #FFFFFF） */ .mobile-content { background-color: var(--surface-page) !important; } /* 顶部装饰舞台 / 页面背景渐变（写死蓝白渐变） */ .hex-stage, .page-bg-gradient { background: var(--surface-page) !important; } /* 顶部栏（兜底，与 popup-menu.css 真源一致） */ .header-menu-2 { background-color: var(--surface-page) !important; } }