/* ═══════════════════════════════════════════════════════════ WPSlash Theme — Centralized Color System Usage: - Default: Light theme (white backgrounds, dark text) - Add data-theme="dark" to for dark mode - Plugin landing pages set dark mode via inline attribute ═══════════════════════════════════════════════════════════ */ /* ── Light Theme (default) ── */ :root { /* Backgrounds */ --wps-bg: #ffffff; --wps-bg-alt: #f8f9fb; --wps-bg-card: #ffffff; --wps-bg-hover: rgba(0, 0, 0, 0.03); /* Surfaces (header, footer, drawers) */ --wps-surface: #ffffff; --wps-surface-alt: #f3f4f6; --wps-surface-glass: rgba(255, 255, 255, 0.85); /* Text */ --wps-text: #111827; --wps-text-2: #374151; --wps-text-3: #6b7280; --wps-text-4: #9ca3af; /* Borders */ --wps-border: rgba(0, 0, 0, 0.08); --wps-border-2: rgba(0, 0, 0, 0.12); /* Accent (blue) */ --wps-accent: #2563eb; --wps-accent-hover: #1d4ed8; --wps-accent-light: #60a5fa; --wps-accent-glow: rgba(37, 99, 235, 0.12); --wps-accent-text: #2563eb; /* Header-specific */ --wps-header-bg: #ffffff; --wps-header-border: rgba(0, 0, 0, 0.06); --wps-header-text: #374151; --wps-header-text-hover: #111827; --wps-header-text-muted: #6b7280; /* Footer-specific (light) */ --wps-footer-bg: #f9fafb; --wps-footer-text: #111827; --wps-footer-text-2: #6b7280; --wps-footer-border: rgba(0, 0, 0, 0.08); /* Dropdown */ --wps-dropdown-bg: #ffffff; --wps-dropdown-border: rgba(0, 0, 0, 0.08); --wps-dropdown-shadow: 0 12px 40px rgba(0, 0, 0, 0.12); --wps-dropdown-hover: rgba(99, 102, 241, 0.06); /* Mobile Drawer */ --wps-drawer-bg: #ffffff; --wps-drawer-border: rgba(0, 0, 0, 0.08); --wps-drawer-overlay: rgba(0, 0, 0, 0.4); /* Status */ --wps-success: #10b981; --wps-error: #ef4444; --wps-warning: #f59e0b; /* Shadows */ --wps-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08); --wps-shadow-md: 0 4px 16px rgba(0, 0, 0, 0.10); --wps-shadow-lg: 0 12px 40px rgba(0, 0, 0, 0.12); /* ── Homepage ── */ /* Hero gradient — soft blue-to-teal, clean & inviting */ --wps-hero-from: #2563eb; --wps-hero-to: #0891b2; --wps-hero-text: #ffffff; --wps-hero-text-2: #dbeafe; --wps-hero-cta-bg: #1e3a5f; --wps-hero-cta-bg-hover: #1e40af; --wps-hero-wave: #ffffff; /* Section backgrounds */ --wps-section-bg: #ffffff; --wps-section-bg-alt: #f9fafb; /* Headings & body text */ --wps-heading: #1f2937; --wps-body: #4b5563; --wps-body-light: #6b7280; /* Cards */ --wps-card-bg: #ffffff; --wps-card-border: #f3f4f6; --wps-card-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.08); --wps-card-shadow-hover: 0 10px 25px -3px rgba(0, 0, 0, 0.12); /* Links */ --wps-link: #2563eb; --wps-link-hover: #1d4ed8; /* Badges & tags */ --wps-badge-bg: #eff6ff; --wps-badge-text: #2563eb; --wps-badge-bg-2: #ecfeff; --wps-badge-text-2: #0891b2; /* Accent bar / decorative */ --wps-bar: #2563eb; /* Price tags */ --wps-price-bg: #f3f4f6; --wps-price-text: #1f2937; /* Stars */ --wps-star: #fbbf24; --wps-star-label: #6b7280; /* Featured section */ --wps-featured-bg-from: #eff6ff; --wps-featured-bg-to: #ecfeff; --wps-featured-border: #f3f4f6; --wps-featured-badge-bg: #2563eb; --wps-featured-badge-text: #ffffff; --wps-featured-icon-bg: #dbeafe; --wps-featured-icon: #2563eb; /* CTA section */ --wps-cta-from: #2563eb; --wps-cta-to: #0891b2; --wps-cta-text: #ffffff; --wps-cta-btn-bg: #ffffff; --wps-cta-btn-text: #2563eb; --wps-cta-btn-bg-2: #1e40af; --wps-cta-btn-text-2: #ffffff; /* Decorative dots */ --wps-dot-color: #ffffff; } /* ── Dark Theme ── */ [data-theme="dark"] { /* Backgrounds */ --wps-bg: #0f1117; --wps-bg-alt: #161921; --wps-bg-card: #1c1f2a; --wps-bg-hover: rgba(255, 255, 255, 0.04); /* Surfaces */ --wps-surface: #0f1117; --wps-surface-alt: #161921; --wps-surface-glass: rgba(15, 17, 23, 0.92); /* Text */ --wps-text: #f0f1f3; --wps-text-2: #d4d6dd; --wps-text-3: #a3a7b8; --wps-text-4: #5c6178; /* Borders */ --wps-border: rgba(255, 255, 255, 0.06); --wps-border-2: rgba(255, 255, 255, 0.09); /* Accent */ --wps-accent: #6366f1; --wps-accent-hover: #4f46e5; --wps-accent-light: #818cf8; --wps-accent-glow: rgba(99, 102, 241, 0.12); --wps-accent-text: #818cf8; /* Header-specific */ --wps-header-bg: #0f1117; --wps-header-border: rgba(255, 255, 255, 0.06); --wps-header-text: #d4d6dd; --wps-header-text-hover: #f0f1f3; --wps-header-text-muted: #a3a7b8; /* Footer-specific */ --wps-footer-bg: #0a0c10; --wps-footer-text: #d1d5db; --wps-footer-text-2: #6b7280; --wps-footer-border: rgba(255, 255, 255, 0.06); /* Dropdown */ --wps-dropdown-bg: #161921; --wps-dropdown-border: rgba(255, 255, 255, 0.09); --wps-dropdown-shadow: 0 12px 40px rgba(0, 0, 0, 0.35); --wps-dropdown-hover: rgba(99, 102, 241, 0.08); /* Mobile Drawer */ --wps-drawer-bg: #0f1117; --wps-drawer-border: rgba(255, 255, 255, 0.09); --wps-drawer-overlay: rgba(0, 0, 0, 0.45); /* Shadows */ --wps-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.3); --wps-shadow-md: 0 4px 16px rgba(0, 0, 0, 0.35); --wps-shadow-lg: 0 12px 40px rgba(0, 0, 0, 0.4); /* ── Homepage (dark) ── */ --wps-hero-from: #312e81; --wps-hero-to: #581c87; --wps-hero-text: #f0f1f3; --wps-hero-text-2: #a5b4fc; --wps-hero-cta-bg: rgba(255, 255, 255, 0.12); --wps-hero-cta-bg-hover: rgba(255, 255, 255, 0.18); --wps-hero-wave: #0f1117; --wps-section-bg: #0f1117; --wps-section-bg-alt: #161921; --wps-heading: #f0f1f3; --wps-body: #a3a7b8; --wps-body-light: #7c8098; --wps-card-bg: #1c1f2a; --wps-card-border: rgba(255, 255, 255, 0.06); --wps-card-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.3); --wps-card-shadow-hover: 0 10px 25px -3px rgba(0, 0, 0, 0.4); --wps-link: #818cf8; --wps-link-hover: #a5b4fc; --wps-badge-bg: rgba(99, 102, 241, 0.15); --wps-badge-text: #818cf8; --wps-badge-bg-2: rgba(168, 85, 247, 0.15); --wps-badge-text-2: #c084fc; --wps-bar: #6366f1; --wps-price-bg: rgba(255, 255, 255, 0.08); --wps-price-text: #f0f1f3; --wps-star: #fbbf24; --wps-star-label: #7c8098; --wps-featured-bg-from: rgba(99, 102, 241, 0.08); --wps-featured-bg-to: rgba(168, 85, 247, 0.08); --wps-featured-border: rgba(255, 255, 255, 0.06); --wps-featured-badge-bg: #6366f1; --wps-featured-badge-text: #ffffff; --wps-featured-icon-bg: rgba(99, 102, 241, 0.15); --wps-featured-icon: #818cf8; --wps-cta-from: #312e81; --wps-cta-to: #581c87; --wps-cta-text: #f0f1f3; --wps-cta-btn-bg: rgba(255, 255, 255, 0.12); --wps-cta-btn-text: #ffffff; --wps-cta-btn-bg-2: rgba(255, 255, 255, 0.08); --wps-cta-btn-text-2: #f0f1f3; --wps-dot-color: rgba(255, 255, 255, 0.6); }