/* ======================================== THEME VARIANTS 通过 切换主题 覆盖 style.css 中的 :root 变量 ======================================== */ /* 默认：深空蓝（青蓝渐变） - 无需覆盖，保留 style.css 默认值 */ /* 紫罗兰主题 */ [data-theme="purple"] { --primary: #a855f7; --primary-dark: #7e22ce; --accent: #e879f9; --glow-blue: rgba(168, 85, 247, 0.18); --bg-dark: #0d0b1a; --bg-card: #1a1530; --bg-card-hover: #241d42; --border: rgba(168, 85, 247, 0.08); } /* 翡翠绿主题 */ [data-theme="emerald"] { --primary: #10b981; --primary-dark: #047857; --accent: #34d399; --glow-blue: rgba(16, 185, 129, 0.18); --bg-dark: #071613; --bg-card: #0f2a22; --bg-card-hover: #153c30; --border: rgba(16, 185, 129, 0.08); } /* 珊瑚橙主题 */ [data-theme="coral"] { --primary: #fb7185; --primary-dark: #e11d48; --accent: #fda4af; --glow-blue: rgba(251, 113, 133, 0.18); --bg-dark: #1a0d10; --bg-card: #2a141a; --bg-card-hover: #3d1d25; --border: rgba(251, 113, 133, 0.08); } /* 琥珀金主题 */ [data-theme="amber"] { --primary: #f59e0b; --primary-dark: #b45309; --accent: #fbbf24; --glow-blue: rgba(245, 158, 11, 0.18); --bg-dark: #1a1308; --bg-card: #2a1f10; --bg-card-hover: #3d2d17; --border: rgba(245, 158, 11, 0.08); } /* ================= 明亮模式 ================= */ [data-theme="light"] { --primary: #0284c7; --primary-dark: #075985; --accent: #0891b2; --accent-purple: #7c3aed; --accent-green: #059669; --bg-dark: #f8fafc; --bg-card: #ffffff; --bg-card-hover: #f1f5f9; --text-primary: #0f172a; --text-secondary: #475569; --text-muted: #94a3b8; --border: rgba(15, 23, 42, 0.08); --glow-blue: rgba(2, 132, 199, 0.1); --glow-purple: rgba(124, 58, 237, 0.1); --glow-green: rgba(5, 150, 105, 0.1); --shadow: 0 4px 24px rgba(15, 23, 42, 0.08); } /* Light 模式下 header 适配 */ [data-theme="light"] .header.scrolled { background: rgba(255, 255, 255, 0.85); border-bottom: 1px solid rgba(15, 23, 42, 0.06); } [data-theme="light"] .logo-cn { background: linear-gradient(135deg, #0284c7, #0891b2); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } [data-theme="light"] .text-gradient { background: linear-gradient(135deg, #0f172a 0%, #0284c7 50%, #0891b2 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } [data-theme="light"] .hero-gradient { background: radial-gradient(ellipse 60% 50% at 20% 50%, rgba(2, 132, 199, 0.08) 0%, transparent 60%), radial-gradient(ellipse 40% 60% at 80% 30%, rgba(124, 58, 237, 0.05) 0%, transparent 60%); } [data-theme="light"] #particleCanvas { opacity: 0.4; } [data-theme="light"] .footer { background: rgba(255, 255, 255, 0.6); } [data-theme="light"] .dropdown-mega { background: rgba(255, 255, 255, 0.98); box-shadow: 0 20px 60px rgba(15, 23, 42, 0.1); } [data-theme="light"] .main-nav { background: rgba(255, 255, 255, 0.98); } [data-theme="light"] .product-card, [data-theme="light"] .brand-card, [data-theme="light"] .service-card, [data-theme="light"] .feature-card, [data-theme="light"] .brand-detail-card, [data-theme="light"] .news-card, [data-theme="light"] .stat-card-admin, [data-theme="light"] .contact-card, [data-theme="light"] .value-card, [data-theme="light"] .cta-card, [data-theme="light"] .panel-header, [data-theme="light"] .form-container { box-shadow: 0 4px 20px rgba(15, 23, 42, 0.06); } [data-theme="light"] .brand-logo-placeholder { background: rgba(15, 23, 42, 0.03); } [data-theme="light"] .tabs-nav, [data-theme="light"] .partner-item { background: #ffffff; } [data-theme="light"] .news-thumb { background: linear-gradient(135deg, rgba(2, 132, 199, 0.08), rgba(124, 58, 237, 0.06)); } [data-theme="light"] .news-thumb .news-date { background: rgba(255, 255, 255, 0.85); color: #475569; } [data-theme="light"] .article-hero { background: linear-gradient(135deg, rgba(2, 132, 199, 0.08), rgba(124, 58, 237, 0.06)); } [data-theme="light"] .article-body blockquote { background: #f1f5f9; }