/* ══════════════════════════════════════════════════════════════ Seevuln Website Theme System v1.0 管理端可切换四套官网主题：Ocean / Steel / Gold / Teal 切换方式： 持久化：localStorage key "seevuln-site-theme" ══════════════════════════════════════════════════════════════ */ /* ═══════════ SHARED TOKENS (ALL THEMES) ═══════════ */ :root { /* Typography */ --site-font-sans: 'Inter', 'PingFang SC', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --site-font-mono: 'JetBrains Mono', 'Fira Code', monospace; --site-text-xs: 0.75rem; --site-text-sm: 0.875rem; --site-text-base: 1rem; --site-text-lg: 1.125rem; --site-text-xl: 1.25rem; --site-text-2xl: 1.5rem; --site-text-3xl: 2rem; --site-text-4xl: 2.5rem; --site-text-5xl: 3.5rem; --site-font-normal: 400; --site-font-medium: 500; --site-font-semibold: 600; --site-font-bold: 700; --site-font-extrabold: 800; --site-leading-tight: 1.15; --site-leading-normal: 1.5; --site-leading-relaxed: 1.75; /* Spacing */ --site-space-1: 4px; --site-space-2: 8px; --site-space-3: 12px; --site-space-4: 16px; --site-space-5: 20px; --site-space-6: 24px; --site-space-8: 32px; --site-space-10: 40px; --site-space-12: 48px; --site-space-16: 64px; --site-space-20: 80px; --site-space-24: 96px; /* Radii — sharp, professional */ --site-radius-sm: 2px; --site-radius-md: 4px; --site-radius-lg: 6px; --site-radius-xl: 8px; /* Shadows */ --site-shadow-sm: 0 1px 3px rgba(0,0,0,0.06); --site-shadow-md: 0 4px 6px rgba(0,0,0,0.05), 0 2px 4px rgba(0,0,0,0.04); --site-shadow-lg: 0 10px 15px rgba(0,0,0,0.06), 0 4px 6px rgba(0,0,0,0.04); --site-shadow-xl: 0 20px 40px rgba(0,0,0,0.08); --site-shadow-glow: 0 0 0 3px var(--site-accent-glow); /* Motion */ --site-duration-fast: 150ms; --site-duration-normal: 250ms; --site-duration-slow: 400ms; --site-ease-out: cubic-bezier(0.16, 1, 0.3, 1); --site-ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); /* Light surfaces (shared across all themes) */ --site-surface-0: #F8FAFB; --site-surface-1: #FFFFFF; --site-surface-2: #F3F5F7; --site-border: #E5E7EB; --site-text-primary: #111827; --site-text-secondary: #4B5563; --site-text-muted: #9CA3AF; /* Product color badges (semantic, shared) */ --site-prod-aegis: #1A6FF5; --site-prod-aegis-bg: #EEF4FF; --site-prod-asm: #059669; --site-prod-asm-bg: #ECFDF5; --site-prod-dp: #7C3AED; --site-prod-dp-bg: #F5F3FF; --site-prod-zprobe: #F97316; --site-prod-zprobe-bg: #FFF7ED; } /* ═══════════ THEME: Ocean Blue (default) — 方案 A 皓空深蓝 ═══════════ */ [data-theme="ocean"] { --site-hero-bg: linear-gradient(160deg, #0B1E3F 0%, #1A3A6B 50%, #0B1E3F 100%); --site-nav-bg: transparent; --site-nav-border: transparent; --site-accent: #00C2FF; --site-accent-light: rgba(0,194,255,0.12); --site-accent-glow: rgba(0,194,255,0.15); --site-accent-gradient: linear-gradient(135deg, #00C2FF, #0090CC); --site-cta-bg: linear-gradient(135deg, #00C2FF, #0090CC); --site-cta-color: #0B1E3F; --site-hero-text: #E5E7EB; --site-hero-text-muted: rgba(229,231,235,0.55); --site-tag-bg: rgba(0,194,255,0.12); --site-tag-color: #00C2FF; --site-tag-border: rgba(0,194,255,0.2); --site-card-hover-border: #00C2FF; --site-card-hover-shadow: 0 0 30px rgba(0,194,255,0.08); --site-stats-accent: #00C2FF; --site-footer-text: #6B7280; } /* ═══════════ THEME: Steel Orange — 方案 C 锖蓝暖橙 ═══════════ */ [data-theme="steel"] { --site-hero-bg: linear-gradient(160deg, #1A2332 0%, #2D3F50 50%, #1A2332 100%); --site-nav-bg: transparent; --site-nav-border: transparent; --site-accent: #FF6B35; --site-accent-light: rgba(255,107,53,0.1); --site-accent-glow: rgba(255,107,53,0.12); --site-accent-gradient: linear-gradient(135deg, #FF6B35, #E85D2C); --site-accent-secondary: #2EC4B6; --site-cta-bg: #FF6B35; --site-cta-color: #FFFFFF; --site-hero-text: #F1F5F9; --site-hero-text-muted: rgba(241,245,249,0.5); --site-tag-bg: rgba(255,107,53,0.1); --site-tag-color: #FF6B35; --site-tag-border: rgba(255,107,53,0.2); --site-card-hover-border: #FF6B35; --site-card-hover-shadow: 0 0 30px rgba(255,107,53,0.08); --site-stats-accent: #2EC4B6; --site-footer-text: #6B7280; } /* ═══════════ THEME: Black Gold — 方案 D 玄墨鎏金 ═══════════ */ [data-theme="gold"] { --site-hero-bg: linear-gradient(160deg, #0A0A0A 0%, #1A1A1A 40%, #0D0D0D 100%); --site-nav-bg: transparent; --site-nav-border: transparent; --site-accent: #D4A843; --site-accent-light: rgba(212,168,67,0.1); --site-accent-glow: rgba(212,168,67,0.12); --site-accent-gradient: linear-gradient(135deg, #D4A843, #B8922E); --site-accent-secondary: #F5E6C8; --site-cta-bg: linear-gradient(135deg, #D4A843, #B8922E); --site-cta-color: #0A0A0A; --site-hero-text: #E8E0D0; --site-hero-text-muted: rgba(232,224,208,0.5); --site-tag-bg: rgba(212,168,67,0.1); --site-tag-color: #D4A843; --site-tag-border: rgba(212,168,67,0.25); --site-card-hover-border: #D4A843; --site-card-hover-shadow: 0 0 30px rgba(212,168,67,0.08); --site-stats-accent: #D4A843; --site-footer-text: #8B8070; --site-logo-gradient: linear-gradient(135deg, #D4A843, #F5E6C8); } /* ═══════════ THEME: Deep Teal — 方案 G 深渊翡翠 ═══════════ */ [data-theme="teal"] { --site-hero-bg: linear-gradient(160deg, #061A1A 0%, #0D2C2C 50%, #061A1A 100%); --site-nav-bg: transparent; --site-nav-border: transparent; --site-accent: #00E5A0; --site-accent-light: rgba(0,229,160,0.1); --site-accent-glow: rgba(0,229,160,0.1); --site-accent-gradient: linear-gradient(135deg, #00E5A0, #00B87A); --site-accent-secondary: #00C896; --site-cta-bg: linear-gradient(135deg, #00E5A0, #00B87A); --site-cta-color: #061A1A; --site-hero-text: #C8E8D8; --site-hero-text-muted: rgba(200,232,216,0.5); --site-tag-bg: rgba(0,229,160,0.1); --site-tag-color: #00E5A0; --site-tag-border: rgba(0,229,160,0.2); --site-card-hover-border: #00E5A0; --site-card-hover-shadow: 0 0 30px rgba(0,229,160,0.06); --site-stats-accent: #00E5A0; --site-footer-text: #7A8A80; } /* ═══════════ COMPONENT STYLES USING TOKENS ═══════════ */ /* Nav */ .site-nav { display: flex; justify-content: space-between; align-items: center; padding: 16px 60px; position: relative; z-index: 10; } .site-nav-logo { font-size: 20px; font-weight: 700; letter-spacing: -0.5px; color: var(--site-hero-text); } [data-theme="gold"] .site-nav-logo { background: var(--site-logo-gradient); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .site-nav-links { display: flex; gap: 32px; list-style: none; font-size: 14px; } .site-nav-links a { text-decoration: none; color: var(--site-hero-text-muted); transition: color 0.2s; } .site-nav-links a:hover { color: var(--site-hero-text); } .site-nav-cta { padding: 8px 20px; border-radius: var(--site-radius-md); font-size: 13px; font-weight: 600; text-decoration: none; border: 1.5px solid var(--site-accent); color: var(--site-accent); transition: background 0.2s, color 0.2s; } .site-nav-cta:hover { background: var(--site-accent-light); } /* Hero */ .site-hero { padding: 100px 60px 120px; position: relative; z-index: 1; background: var(--site-hero-bg); color: var(--site-hero-text); overflow: hidden; } .site-hero::before { content: ''; position: absolute; top: -30%; right: -15%; width: 550px; height: 550px; background: radial-gradient(circle, var(--site-accent-glow) 0%, transparent 70%); } .site-hero-badge { display: inline-block; padding: 6px 16px; border-radius: 20px; font-size: 13px; font-weight: 500; margin-bottom: 24px; background: var(--site-tag-bg); color: var(--site-tag-color); border: 1px solid var(--site-tag-border); } .site-hero h1 { font-size: clamp(36px, 5vw, 56px); font-weight: 800; line-height: var(--site-leading-tight); letter-spacing: -1px; max-width: 720px; margin-bottom: 20px; } .site-hero h1 .hl { color: var(--site-accent); } .site-hero p { font-size: 18px; line-height: 1.7; max-width: 560px; margin-bottom: 36px; color: var(--site-hero-text-muted); } .site-hero-buttons { display: flex; gap: 16px; flex-wrap: wrap; } .site-btn-primary { padding: 14px 32px; border-radius: var(--site-radius-md); font-size: 15px; font-weight: 600; text-decoration: none; border: none; background: var(--site-cta-bg); color: var(--site-cta-color); cursor: pointer; transition: transform var(--site-duration-fast), box-shadow var(--site-duration-fast); } .site-btn-primary:hover { transform: translateY(-1px); box-shadow: 0 8px 25px rgba(0,0,0,0.15); } .site-btn-ghost { padding: 14px 32px; border-radius: var(--site-radius-md); font-size: 15px; font-weight: 600; text-decoration: none; background: transparent; border: 1.5px solid rgba(255,255,255,0.2); color: var(--site-hero-text); cursor: pointer; transition: border-color var(--site-duration-fast); } .site-btn-ghost:hover { border-color: rgba(255,255,255,0.45); } .site-hero-stats { display: flex; gap: 48px; margin-top: 60px; padding-top: 32px; border-top: 1px solid rgba(255,255,255,0.08); } .site-stat-num { font-size: 32px; font-weight: 700; letter-spacing: -0.5px; } .site-stat-label { font-size: 13px; color: var(--site-hero-text-muted); margin-top: 4px; } .site-stat-num.accent { color: var(--site-stats-accent); } /* Light sections */ .site-section-light { padding: 80px 60px; background: var(--site-surface-0); } .site-section-white { padding: 80px 60px; background: var(--site-surface-1); } .site-section-label { font-size: 14px; font-weight: 600; text-transform: uppercase; letter-spacing: 2px; color: var(--site-text-muted); margin-bottom: 8px; } .site-section-title { font-size: 32px; font-weight: 700; letter-spacing: -0.5px; color: var(--site-text-primary); margin-bottom: 40px; } /* Product cards */ .site-product-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; } .site-product-card { padding: 28px 24px; border-radius: var(--site-radius-lg); border: 1px solid var(--site-border); background: var(--site-surface-1); transition: all var(--site-duration-normal); } .site-product-card:hover { border-color: var(--site-card-hover-border); box-shadow: var(--site-card-hover-shadow); } .site-product-card h3 { font-size: 17px; font-weight: 600; margin: 12px 0 6px; color: var(--site-text-primary); } .site-product-card p { font-size: 14px; color: var(--site-text-secondary); line-height: 1.6; } /* Service cards */ .site-service-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; } .site-service-card { padding: 28px 24px; border-radius: var(--site-radius-lg); border: 1px solid var(--site-border); background: var(--site-surface-1); transition: all var(--site-duration-normal); } .site-service-card:hover { transform: translateY(-3px); box-shadow: var(--site-shadow-lg); border-color: var(--site-accent); } .site-service-card h3 { font-size: 17px; font-weight: 600; margin-bottom: 8px; color: var(--site-text-primary); } .site-service-card p { font-size: 14px; color: var(--site-text-secondary); line-height: 1.6; } /* Footer */ .site-footer { padding: 40px 60px; color: var(--site-footer-text); display: flex; justify-content: space-between; align-items: center; font-size: 13px; border-top: 1px solid var(--site-border); } /* Theme Switcher (Admin Panel) */ .site-theme-switcher { position: fixed; bottom: 24px; right: 24px; z-index: 9999; display: flex; gap: 6px; padding: 8px 12px; background: rgba(0,0,0,0.85); border-radius: 24px; box-shadow: 0 4px 20px rgba(0,0,0,0.3); backdrop-filter: blur(10px); } .site-theme-swatch { width: 28px; height: 28px; border-radius: 50%; border: 2px solid transparent; cursor: pointer; transition: transform var(--site-duration-fast), border-color var(--site-duration-fast); position: relative; } .site-theme-swatch:hover { transform: scale(1.15); } .site-theme-swatch.active { border-color: #fff; box-shadow: 0 0 12px rgba(255,255,255,0.3); } .site-theme-swatch[data-value="ocean"] { background: linear-gradient(135deg, #0B1E3F, #00C2FF); } .site-theme-swatch[data-value="steel"] { background: linear-gradient(135deg, #1A2332, #FF6B35); } .site-theme-swatch[data-value="gold"] { background: linear-gradient(135deg, #0A0A0A, #D4A843); } .site-theme-swatch[data-value="teal"] { background: linear-gradient(135deg, #061A1A, #00E5A0); } .site-theme-label { color: #fff; font-size: 11px; font-weight: 600; display: flex; align-items: center; padding: 0 4px; } /* Responsive */ @media (max-width: 1024px) { .site-product-grid { grid-template-columns: repeat(2, 1fr); } .site-service-grid { grid-template-columns: 1fr; } .site-nav { padding: 12px 24px; } .site-nav-links { display: none; } .site-hero { padding: 60px 24px 80px; } .site-section-light, .site-section-white { padding: 48px 24px; } .site-hero-stats { flex-wrap: wrap; gap: 24px; } }