/* ========================================================= CYBERBILL AFRICA PRODUCT THEME SYSTEM ========================================================= Purpose: - Keeps the CyberBill Africa corporate theme global. - Gives individual SaaS products their own identity. - Uses CSS variables so shared components automatically inherit the active product theme. Available themes: - PolitiCore - GovCore - EduCore AI - LearnCore Usage: or: ========================================================= */ /* ========================================================= BASE PRODUCT THEME SYSTEM ========================================================= */ .product-theme { /* Shared product colors */ --secondary: #0f2744; --secondary-light: #1e3a5f; --product-background: #f8fafc; --product-surface: #ffffff; --product-text: #111827; --product-text-muted: #6b7280; --product-border: #e5e7eb; --product-info: #2f80ed; --product-success: #22c55e; --product-warning: #f59e0b; --product-danger: #dc2626; } /* ========================================================= POLITICORE --------------------------------------------------------- Political intelligence / governance / civic technology Primary: Emerald Green Secondary: Deep Navy Personality: - Trust - Governance - Intelligence - National identity - Professionalism - Non-partisan technology ========================================================= */ .politicore-theme { --primary: #0e8a52; --primary-dark: #0b6a3f; --primary-light: #27ae60; --secondary: #0f2744; --secondary-light: #1e3a5f; --product-background: #f8fafc; --product-surface: #ffffff; --product-text: #111827; --product-text-muted: #6b7280; --product-border: #e5e7eb; --product-info: #2f80ed; --product-success: #22c55e; --product-warning: #f59e0b; --product-danger: #dc2626; } /* --------------------------------------------------------- POLITICORE HERO --------------------------------------------------------- */ .politicore-theme .brand-hero, .politicore-theme .brand-hero-dark { background: linear-gradient(135deg, #0f2744 0%, #143a66 50%, #0b2038 100%); } /* --------------------------------------------------------- POLITICORE CTA --------------------------------------------------------- */ .politicore-theme .brand-cta { background: linear-gradient(135deg, #0f2744 0%, #143a66 100%); } /* --------------------------------------------------------- POLITICORE SECTION BADGE --------------------------------------------------------- */ .politicore-theme .section-badge { color: #0e8a52; background: rgba(14, 138, 82, 0.08); border-color: rgba(14, 138, 82, 0.15); } /* --------------------------------------------------------- POLITICORE NAVIGATION ACTIVE STATE --------------------------------------------------------- */ .politicore-theme .navbar-light .navbar-nav .nav-link:hover, .politicore-theme .navbar-light .navbar-nav .nav-link.active { color: #0e8a52; } /* --------------------------------------------------------- POLITICORE PRODUCT ACCENT --------------------------------------------------------- */ .politicore-theme .brand-accent-left { border-left-color: #0e8a52; } /* ========================================================= GOVCORE --------------------------------------------------------- Government / public administration / institutional technology Primary: Government Blue Personality: - Stability - Public service - Institutional trust - Administration - Security ========================================================= */ .govcore-theme { --primary: #2563eb; --primary-dark: #1d4ed8; --primary-light: #60a5fa; --secondary: #0f2744; --secondary-light: #1e3a5f; --product-background: #f8fafc; --product-surface: #ffffff; --product-text: #111827; --product-text-muted: #6b7280; --product-border: #e5e7eb; --product-info: #2563eb; --product-success: #16a34a; --product-warning: #f59e0b; --product-danger: #dc2626; } /* --------------------------------------------------------- GOVCORE HERO --------------------------------------------------------- */ .govcore-theme .brand-hero, .govcore-theme .brand-hero-dark { background: linear-gradient(135deg, #0f2744 0%, #1e3a5f 50%, #173b6d 100%); } /* --------------------------------------------------------- GOVCORE CTA --------------------------------------------------------- */ .govcore-theme .brand-cta { background: linear-gradient(135deg, #1d4ed8 0%, #2563eb 100%); } /* --------------------------------------------------------- GOVCORE BADGE --------------------------------------------------------- */ .govcore-theme .section-badge { color: #2563eb; background: rgba(37, 99, 235, 0.08); border-color: rgba(37, 99, 235, 0.15); } /* --------------------------------------------------------- GOVCORE NAVIGATION --------------------------------------------------------- */ .govcore-theme .navbar-light .navbar-nav .nav-link:hover, .govcore-theme .navbar-light .navbar-nav .nav-link.active { color: #2563eb; } /* ========================================================= EDUCORE AI --------------------------------------------------------- AI + education + innovation Primary: Purple Personality: - Artificial intelligence - Innovation - Learning - Creativity - Future technology ========================================================= */ .educore-theme { --primary: #7c3aed; --primary-dark: #5b21b6; --primary-light: #a855f7; --secondary: #312e81; --secondary-light: #4c1d95; --product-background: #faf9ff; --product-surface: #ffffff; --product-text: #18181b; --product-text-muted: #71717a; --product-border: #e4e4e7; --product-info: #6366f1; --product-success: #22c55e; --product-warning: #f59e0b; --product-danger: #dc2626; } /* --------------------------------------------------------- EDUCORE HERO --------------------------------------------------------- */ .educore-theme .brand-hero, .educore-theme .brand-hero-dark { background: linear-gradient(135deg, #312e81 0%, #5b21b6 50%, #4c1d95 100%); } /* --------------------------------------------------------- EDUCORE CTA --------------------------------------------------------- */ .educore-theme .brand-cta { background: linear-gradient(135deg, #5b21b6 0%, #7c3aed 100%); } /* --------------------------------------------------------- EDUCORE BADGE --------------------------------------------------------- */ .educore-theme .section-badge { color: #7c3aed; background: rgba(124, 58, 237, 0.08); border-color: rgba(124, 58, 237, 0.15); } /* --------------------------------------------------------- EDUCORE NAVIGATION --------------------------------------------------------- */ .educore-theme .navbar-light .navbar-nav .nav-link:hover, .educore-theme .navbar-light .navbar-nav .nav-link.active { color: #7c3aed; } /* ========================================================= LEARNCORE --------------------------------------------------------- Learning / professional development / engagement Primary: Amber / Orange Personality: - Energy - Growth - Learning - Accessibility - Engagement ========================================================= */ .learncore-theme { --primary: #f59e0b; --primary-dark: #d97706; --primary-light: #fbbf24; --secondary: #78350f; --secondary-light: #92400e; --product-background: #fffbeb; --product-surface: #ffffff; --product-text: #1f2937; --product-text-muted: #6b7280; --product-border: #e5e7eb; --product-info: #2563eb; --product-success: #16a34a; --product-warning: #d97706; --product-danger: #dc2626; } /* --------------------------------------------------------- LEARNCORE HERO --------------------------------------------------------- */ .learncore-theme .brand-hero, .learncore-theme .brand-hero-dark { background: linear-gradient(135deg, #78350f 0%, #92400e 50%, #b45309 100%); } /* --------------------------------------------------------- LEARNCORE CTA --------------------------------------------------------- */ .learncore-theme .brand-cta { background: linear-gradient(135deg, #d97706 0%, #f59e0b 100%); } /* --------------------------------------------------------- LEARNCORE BADGE --------------------------------------------------------- */ .learncore-theme .section-badge { color: #d97706; background: rgba(245, 158, 11, 0.1); border-color: rgba(245, 158, 11, 0.18); } /* --------------------------------------------------------- LEARNCORE NAVIGATION --------------------------------------------------------- */ .learncore-theme .navbar-light .navbar-nav .nav-link:hover, .learncore-theme .navbar-light .navbar-nav .nav-link.active { color: #d97706; } /* ========================================================= PRODUCT-SPECIFIC SURFACE COLORS ========================================================= */ .politicore-theme .product-surface { background-color: #f8fafc; } .govcore-theme .product-surface { background-color: #f8fafc; } .educore-theme .product-surface { background-color: #faf9ff; } .learncore-theme .product-surface { background-color: #fffbeb; } /* ========================================================= PRODUCT-SPECIFIC SOFT BACKGROUNDS ========================================================= */ .politicore-theme .product-soft-bg { background-color: rgba(14, 138, 82, 0.05); } .govcore-theme .product-soft-bg { background-color: rgba(37, 99, 235, 0.05); } .educore-theme .product-soft-bg { background-color: rgba(124, 58, 237, 0.05); } .learncore-theme .product-soft-bg { background-color: rgba(245, 158, 11, 0.06); } /* ========================================================= PRODUCT-SPECIFIC HERO DECORATION ========================================================= */ .politicore-theme .product-hero-glow { background: rgba(39, 174, 96, 0.18); } .govcore-theme .product-hero-glow { background: rgba(96, 165, 250, 0.18); } .educore-theme .product-hero-glow { background: rgba(168, 85, 247, 0.18); } .learncore-theme .product-hero-glow { background: rgba(251, 191, 36, 0.18); } /* ========================================================= PRODUCT CARD ACCENTS ========================================================= */ .politicore-theme .product-card-accent { border-top: 3px solid #0e8a52; } .govcore-theme .product-card-accent { border-top: 3px solid #2563eb; } .educore-theme .product-card-accent { border-top: 3px solid #7c3aed; } .learncore-theme .product-card-accent { border-top: 3px solid #f59e0b; } /* ========================================================= PRODUCT THEME - SELECTION COLOR ========================================================= */ .politicore-theme ::selection { background: #0e8a52; color: #ffffff; } .govcore-theme ::selection { background: #2563eb; color: #ffffff; } .educore-theme ::selection { background: #7c3aed; color: #ffffff; } .learncore-theme ::selection { background: #f59e0b; color: #ffffff; } /* ========================================================= PRODUCT THEME - SCROLLBAR ========================================================= */ .politicore-theme::-webkit-scrollbar-thumb { background: #0e8a52; } .govcore-theme::-webkit-scrollbar-thumb { background: #2563eb; } .educore-theme::-webkit-scrollbar-thumb { background: #7c3aed; } .learncore-theme::-webkit-scrollbar-thumb { background: #f59e0b; } /* ========================================================= MOBILE PRODUCT HERO ========================================================= */ @media (max-width: 768px) { .product-theme .brand-hero { min-height: 70vh; } }