/* ═══════════════════════════════════════════════════════════════ UKPC Website - Dark Mode Theme Applied via [data-theme="dark"] on ═══════════════════════════════════════════════════════════════ */ [data-theme="dark"] { /* Brand Colours (brightened for dark backgrounds) */ --ukpc-purple: #8B6BBF; --ukpc-purple-light: #A88ED6; --ukpc-purple-dark: #6B3FA0; --ukpc-magenta: #FF3D7F; --ukpc-magenta-light: #FF6B9D; --ukpc-magenta-dark: #EC006B; --ukpc-amber: #FFB84D; --ukpc-amber-light: #FFD080; --ukpc-amber-dark: #F0960B; --ukpc-green: #4FD9A0; --ukpc-green-light: #6FE8B5; --ukpc-green-dark: #3CA970; /* Surfaces */ --surface-0: #0F1117; --surface-1: #16191F; --surface-2: #1D2028; --surface-3: #2A2D36; --surface-elevated: #1D2028; /* Text */ --text-primary: #F0F0F2; --text-secondary: #A0A3AB; --text-tertiary: #6B6E78; --text-inverse: #0F1117; /* Gradients */ --gradient-hero: linear-gradient(135deg, #0F1117 0%, #1A1030 40%, #251845 100%); --gradient-brand-subtle: linear-gradient(135deg, rgba(139,107,191,0.08) 0%, rgba(255,61,127,0.08) 100%); /* Shadows */ --shadow-sm: 0 2px 8px rgba(0,0,0,0.3); --shadow-md: 0 8px 30px rgba(0,0,0,0.4); --shadow-lg: 0 20px 60px rgba(0,0,0,0.5); --shadow-xl: 0 30px 80px rgba(0,0,0,0.6); --shadow-glow-purple: 0 0 40px rgba(139,107,191,0.3); --shadow-glow-magenta: 0 0 40px rgba(255,61,127,0.25); } /* ━━━ THEME-ADAPTIVE LOGO ━━━ */ /* Logo swap handled via JS (data-light-src / data-dark-src) */ /* ━━━ NAVIGATION ━━━ */ [data-theme="dark"] .utility-bar { background: #0A0B0F; border-bottom: 1px solid rgba(255,255,255,0.05); } [data-theme="dark"] .primary-nav { background: var(--surface-0); border-bottom-color: var(--surface-3); } [data-theme="dark"] .site-header.is-scrolled .primary-nav { background: rgba(15,17,23,0.95); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); } [data-theme="dark"] .logo__name { color: var(--text-primary); } [data-theme="dark"] .nav-link { color: var(--text-secondary); } [data-theme="dark"] .nav-link:hover { color: var(--text-primary); background: var(--surface-2); } [data-theme="dark"] .nav-link--cta { background: var(--ukpc-purple); color: white !important; } [data-theme="dark"] .nav-link--cta:hover { background: var(--ukpc-purple-light); } [data-theme="dark"] .hamburger__line { background: var(--text-primary); } /* ━━━ THEME TOGGLE ━━━ */ [data-theme="dark"] .theme-toggle { border-color: rgba(255,255,255,0.25); background: rgba(255,255,255,0.1); color: #FFFFFF; } [data-theme="dark"] .theme-toggle:hover { background: rgba(255,255,255,0.18); border-color: var(--ukpc-amber); color: var(--ukpc-amber); } /* ━━━ MEGA MENU ━━━ */ [data-theme="dark"] .mega-menu__panel { background: var(--surface-0); box-shadow: -10px 0 40px rgba(0,0,0,0.5); } [data-theme="dark"] .mega-menu__close { border-color: var(--surface-3); color: var(--text-primary); } [data-theme="dark"] .mega-menu__close:hover { background: var(--surface-2); } [data-theme="dark"] .mega-menu__section-title { color: var(--text-tertiary); border-bottom-color: var(--surface-3); } [data-theme="dark"] .mega-menu__link { color: var(--text-primary); border-bottom-color: var(--surface-2); } [data-theme="dark"] .mega-menu__link:hover { color: var(--ukpc-purple-light); } /* ━━━ HERO ━━━ */ [data-theme="dark"] .hero__gradient { background: linear-gradient(135deg, #0A0B0F 0%, #1A0F2E 40%, #2D1652 100%); } [data-theme="dark"] .hero__pattern { background-image: radial-gradient(circle at 20% 80%, rgba(139,107,191,0.25) 0%, transparent 50%), radial-gradient(circle at 80% 20%, rgba(255,61,127,0.12) 0%, transparent 50%), radial-gradient(circle at 60% 60%, rgba(79,217,160,0.08) 0%, transparent 40%); } /* ━━━ IMPACT TICKER ━━━ */ [data-theme="dark"] .impact-ticker { background: var(--surface-0); border-bottom-color: var(--surface-3); } [data-theme="dark"] .impact-ticker__number { color: var(--text-primary); } [data-theme="dark"] .impact-ticker__divider { background: var(--surface-3); } /* ━━━ VISION / MISSION ━━━ */ [data-theme="dark"] .vision-mission { background: var(--surface-1); } [data-theme="dark"] .vision-card { background: var(--surface-0); border-color: var(--surface-3); } [data-theme="dark"] .vision-card:hover { border-color: var(--surface-3); box-shadow: var(--shadow-lg); } [data-theme="dark"] .vision-card__icon { background: var(--surface-2); } [data-theme="dark"] .vision-card__heading { color: var(--text-primary); } [data-theme="dark"] .vision-card__text { color: var(--text-secondary); } /* ━━━ QUOTE BANDS ━━━ */ [data-theme="dark"] .quote-band--purple { background: #2D1652; } [data-theme="dark"] .quote-band--green { background: #1A3D2D; } [data-theme="dark"] .quote-band--magenta { background: #4D0030; } /* ━━━ DOMAINS ━━━ */ [data-theme="dark"] .domains { background: var(--surface-0); } [data-theme="dark"] .domain-card { background: var(--surface-1); border-color: var(--surface-3); } [data-theme="dark"] .domain-card:hover { background: var(--surface-2); border-color: transparent; } [data-theme="dark"] .domain-card__icon { background: var(--surface-2); } [data-theme="dark"] .domain-card__title { color: var(--text-primary); } [data-theme="dark"] .domain-card__desc { color: var(--text-secondary); } [data-theme="dark"] .domain-card__link { border-color: var(--surface-3); color: var(--text-tertiary); } /* ━━━ CONSTITUENCIES ━━━ */ [data-theme="dark"] .constituencies__bg { background: linear-gradient(135deg, #0A0B0F 0%, #1A0F2E 50%, #0A0B0F 100%); } [data-theme="dark"] .constituency-card { background: rgba(255,255,255,0.04); border-color: rgba(255,255,255,0.08); } [data-theme="dark"] .constituency-card:hover { background: rgba(255,255,255,0.07); border-color: rgba(255,255,255,0.15); } /* ━━━ TIMELINE ━━━ */ [data-theme="dark"] .timeline-section { background: var(--surface-1); } [data-theme="dark"] .timeline__line { background: var(--surface-3); } [data-theme="dark"] .timeline__dot { border-color: var(--surface-1); } [data-theme="dark"] .timeline__content { background: var(--surface-0); border-color: var(--surface-3); } [data-theme="dark"] .timeline__content:hover { box-shadow: var(--shadow-md); } [data-theme="dark"] .timeline__year { color: var(--ukpc-purple-light); } [data-theme="dark"] .timeline__title { color: var(--text-primary); } /* ━━━ VALUES ━━━ */ [data-theme="dark"] .values { background: var(--surface-0); } [data-theme="dark"] .value-card { background: var(--surface-1); border-color: var(--surface-3); } [data-theme="dark"] .value-card:hover { background: var(--surface-2); } [data-theme="dark"] .value-card__title { color: var(--text-primary); } [data-theme="dark"] .value-card p { color: var(--text-secondary); } /* ━━━ PILLARS ━━━ */ [data-theme="dark"] .pillars__bg { background: linear-gradient(135deg, #0A0B0F 0%, #1A0F2E 50%, #0A0B0F 100%); } /* ━━━ CTA SECTION ━━━ */ [data-theme="dark"] .cta-section { background: var(--surface-1); } [data-theme="dark"] .cta-section__inner { background: linear-gradient(135deg, #0A0B0F 0%, #1A0F2E 50%, #251845 100%); border: 1px solid var(--surface-3); } /* ━━━ FOOTER ━━━ */ [data-theme="dark"] .site-footer { background: #0A0B0F; } /* Footer logo swap handled via JS */ [data-theme="dark"] .site-footer__grid { border-bottom-color: rgba(255,255,255,0.06); } /* ━━━ SECTION HELPERS ━━━ */ [data-theme="dark"] .section-heading { color: var(--text-primary); } [data-theme="dark"] .section-heading__accent { color: var(--ukpc-magenta-light); } [data-theme="dark"] .section-intro { color: var(--text-secondary); } [data-theme="dark"] .section-label { color: var(--text-tertiary); } /* ━━━ TEXT LINK ━━━ */ [data-theme="dark"] .text-link { color: var(--ukpc-purple-light); } [data-theme="dark"] .text-link:hover { color: var(--ukpc-magenta-light); } /* ━━━ BUTTONS (dark overrides) ━━━ */ [data-theme="dark"] .btn--primary { background: var(--ukpc-magenta); border-color: var(--ukpc-magenta); } [data-theme="dark"] .btn--primary:hover { background: var(--ukpc-magenta-light); border-color: var(--ukpc-magenta-light); } [data-theme="dark"] .btn--secondary { background: var(--ukpc-purple); border-color: var(--ukpc-purple); } [data-theme="dark"] .btn--secondary:hover { background: var(--ukpc-purple-light); border-color: var(--ukpc-purple-light); } /* ━━━ MOBILE NAV ━━━ */ [data-theme="dark"] .mobile-nav__panel { background: var(--surface-0); } [data-theme="dark"] .mobile-nav__link { color: var(--text-primary); border-bottom-color: var(--surface-2); } [data-theme="dark"] .mobile-nav__link:hover { color: var(--ukpc-purple-light); } /* ━━━ DECORATIVE BACKGROUND ELEMENTS (Dark Mode) ━━━ */ /* Subtle Gradient Section Backgrounds */ [data-theme="dark"] .vision-mission { background: linear-gradient(135deg, rgba(139,107,191,0.05) 0%, rgba(255,61,127,0.05) 100%); } [data-theme="dark"] .domains { background: linear-gradient(135deg, rgba(139,107,191,0.06) 0%, rgba(79,217,160,0.06) 100%); } [data-theme="dark"] .values { background: linear-gradient(135deg, rgba(255,61,127,0.05) 0%, rgba(255,184,77,0.05) 100%); } [data-theme="dark"] .timeline-section { background: linear-gradient(135deg, rgba(139,107,191,0.04) 0%, rgba(79,217,160,0.04) 100%); } [data-theme="dark"] .cta-section { background: linear-gradient(135deg, rgba(255,184,77,0.05) 0%, rgba(255,61,127,0.05) 100%); } /* Floating Decorative Orbs Dark Mode */ [data-theme="dark"] .vision-mission::before { background: radial-gradient(circle, var(--ukpc-purple) 0%, transparent 70%); opacity: 0.08; } [data-theme="dark"] .vision-mission::after { background: radial-gradient(circle, var(--ukpc-magenta) 0%, transparent 70%); opacity: 0.07; } [data-theme="dark"] .domains::before { background: radial-gradient(circle, var(--ukpc-green) 0%, transparent 70%); opacity: 0.09; } [data-theme="dark"] .domains::after { background: radial-gradient(circle, var(--ukpc-amber) 0%, transparent 70%); opacity: 0.08; } [data-theme="dark"] .values::before { background: radial-gradient(circle, var(--ukpc-magenta) 0%, transparent 70%); opacity: 0.07; } [data-theme="dark"] .values::after { background: radial-gradient(circle, var(--ukpc-amber) 0%, transparent 70%); opacity: 0.08; } [data-theme="dark"] .timeline-section::before { background: radial-gradient(circle, var(--ukpc-purple) 0%, transparent 70%); opacity: 0.07; } [data-theme="dark"] .timeline-section::after { background: radial-gradient(circle, var(--ukpc-green) 0%, transparent 70%); opacity: 0.08; } [data-theme="dark"] .cta-section::before { background: radial-gradient(circle, var(--ukpc-amber) 0%, transparent 70%); opacity: 0.08; } [data-theme="dark"] .cta-section::after { background: radial-gradient(circle, var(--ukpc-purple) 0%, transparent 70%); opacity: 0.07; } /* Enhanced Card Hover Glow Effects Dark Mode */ [data-theme="dark"] .vision-card:hover { box-shadow: 0 8px 40px rgba(139,107,191,0.25), 0 0 30px rgba(139,107,191,0.15); } [data-theme="dark"] .domain-card:hover { box-shadow: 0 8px 40px rgba(79,217,160,0.2), 0 0 25px rgba(79,217,160,0.12); } [data-theme="dark"] .value-card:hover { box-shadow: 0 8px 40px rgba(255,61,127,0.2), 0 0 25px rgba(255,61,127,0.12); } [data-theme="dark"] .timeline__content:hover { box-shadow: 0 12px 50px rgba(139,107,191,0.25), 0 0 30px rgba(139,107,191,0.15); } /* ━━━ REDUCED MOTION ━━━ */ @media (prefers-reduced-motion: reduce) { [data-theme="dark"] * { transition-duration: 0.01ms !important; } }