/** * Multi-Company Theme Definitions * * Themes are applied via data-theme attribute on element. * Default (no attribute) = Public/Logged out gray theme * * Companies: * - berryworld: #792482 (Purple) * - prepworld: #BBD147 (Green) * - poupart: #8A2550 (Magenta) * - unknown: #1F85CC (Blue) - for unrecognized domains */ /* ============================================ DEFAULT THEME (Public / Logged Out) Primary: #C9C9C9 (Gray) ============================================ */ :root { /* Primary brand color and opacity variants */ --brand-primary: #C9C9C9; --brand-primary-rgb: 201, 201, 201; --brand-primary-05: rgba(201, 201, 201, 0.05); --brand-primary-10: rgba(201, 201, 201, 0.1); --brand-primary-20: rgba(201, 201, 201, 0.2); --brand-primary-30: rgba(201, 201, 201, 0.3); --brand-primary-40: rgba(201, 201, 201, 0.4); --brand-primary-50: rgba(201, 201, 201, 0.5); --brand-primary-60: rgba(201, 201, 201, 0.6); --brand-primary-70: rgba(201, 201, 201, 0.7); --brand-primary-80: rgba(201, 201, 201, 0.8); --brand-primary-90: rgba(201, 201, 201, 0.9); /* Light and dark variants */ --brand-primary-light: #DEDEDE; --brand-primary-dark: #A0A0A0; /* Background colors */ --brand-bg: #f5f5f5; --brand-bg-gradient-end: #e8e8e8; /* Text colors */ --brand-text-dark: #333333; --brand-text-light: #666666; /* Utility colors */ --brand-white: #ffffff; } /* ============================================ BERRYWORLD THEME Primary: #792482 (Purple) ============================================ */ [data-theme="berryworld"] { --brand-primary: #792482; --brand-primary-rgb: 121, 36, 130; --brand-primary-05: rgba(121, 36, 130, 0.05); --brand-primary-10: rgba(121, 36, 130, 0.1); --brand-primary-20: rgba(121, 36, 130, 0.2); --brand-primary-30: rgba(121, 36, 130, 0.3); --brand-primary-40: rgba(121, 36, 130, 0.4); --brand-primary-50: rgba(121, 36, 130, 0.5); --brand-primary-60: rgba(121, 36, 130, 0.6); --brand-primary-70: rgba(121, 36, 130, 0.7); --brand-primary-80: rgba(121, 36, 130, 0.8); --brand-primary-90: rgba(121, 36, 130, 0.9); --brand-primary-light: #9d4aaa; --brand-primary-dark: #5a1a61; --brand-bg: #f8f4f9; --brand-bg-gradient-end: #ede4f0; --brand-text-dark: #2d1830; --brand-text-light: #6b4d70; } /* ============================================ PREPWORLD THEME Primary: #BBD147 (Green) ============================================ */ [data-theme="prepworld"] { --brand-primary: #BBD147; --brand-primary-rgb: 187, 209, 71; --brand-primary-05: rgba(187, 209, 71, 0.05); --brand-primary-10: rgba(187, 209, 71, 0.1); --brand-primary-20: rgba(187, 209, 71, 0.2); --brand-primary-30: rgba(187, 209, 71, 0.3); --brand-primary-40: rgba(187, 209, 71, 0.4); --brand-primary-50: rgba(187, 209, 71, 0.5); --brand-primary-60: rgba(187, 209, 71, 0.6); --brand-primary-70: rgba(187, 209, 71, 0.7); --brand-primary-80: rgba(187, 209, 71, 0.8); --brand-primary-90: rgba(187, 209, 71, 0.9); --brand-primary-light: #cde06a; --brand-primary-dark: #9ab82e; --brand-bg: #f9fbf4; --brand-bg-gradient-end: #f0f4e4; --brand-text-dark: #2d3318; --brand-text-light: #5a6b35; } /* ============================================ POUPART 1895 THEME Primary: #8A2550 (Magenta) ============================================ */ [data-theme="poupart"] { --brand-primary: #8A2550; --brand-primary-rgb: 138, 37, 80; --brand-primary-05: rgba(138, 37, 80, 0.05); --brand-primary-10: rgba(138, 37, 80, 0.1); --brand-primary-20: rgba(138, 37, 80, 0.2); --brand-primary-30: rgba(138, 37, 80, 0.3); --brand-primary-40: rgba(138, 37, 80, 0.4); --brand-primary-50: rgba(138, 37, 80, 0.5); --brand-primary-60: rgba(138, 37, 80, 0.6); --brand-primary-70: rgba(138, 37, 80, 0.7); --brand-primary-80: rgba(138, 37, 80, 0.8); --brand-primary-90: rgba(138, 37, 80, 0.9); --brand-primary-light: #ad4a73; --brand-primary-dark: #6a1c3d; --brand-bg: #fbf4f7; --brand-bg-gradient-end: #f4e4ec; --brand-text-dark: #331820; --brand-text-light: #704d5a; } /* ============================================ UNKNOWN DOMAIN THEME Primary: #1F85CC (Blue) ============================================ */ [data-theme="unknown"] { --brand-primary: #1F85CC; --brand-primary-rgb: 31, 133, 204; --brand-primary-05: rgba(31, 133, 204, 0.05); --brand-primary-10: rgba(31, 133, 204, 0.1); --brand-primary-20: rgba(31, 133, 204, 0.2); --brand-primary-30: rgba(31, 133, 204, 0.3); --brand-primary-40: rgba(31, 133, 204, 0.4); --brand-primary-50: rgba(31, 133, 204, 0.5); --brand-primary-60: rgba(31, 133, 204, 0.6); --brand-primary-70: rgba(31, 133, 204, 0.7); --brand-primary-80: rgba(31, 133, 204, 0.8); --brand-primary-90: rgba(31, 133, 204, 0.9); --brand-primary-light: #4da3e0; --brand-primary-dark: #1766a3; --brand-bg: #f4f8fb; --brand-bg-gradient-end: #e4eef4; --brand-text-dark: #18293d; --brand-text-light: #4d6a85; } /* ============================================ THEME SWITCHER UI ============================================ */ .theme-switcher { position: fixed; bottom: 20px; right: 20px; display: flex; gap: 8px; z-index: 9999; padding: 8px 12px; background: rgba(255, 255, 255, 0.9); border-radius: 20px; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); backdrop-filter: blur(10px); } .theme-dot { width: 20px; height: 20px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, 0.8); background-color: var(--dot-color); cursor: pointer; transition: transform 0.2s ease, box-shadow 0.2s ease; position: relative; } .theme-dot:hover { transform: scale(1.2); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2); } .theme-dot:focus { outline: none; box-shadow: 0 0 0 3px rgba(var(--brand-primary-rgb), 0.3); } /* Tooltip styling */ .theme-dot::after { content: attr(title); position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%); padding: 4px 8px; background: #333; color: white; font-size: 11px; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; border-radius: 4px; white-space: nowrap; opacity: 0; visibility: hidden; transition: opacity 0.2s ease, visibility 0.2s ease; margin-bottom: 6px; pointer-events: none; } .theme-dot:hover::after { opacity: 1; visibility: visible; } /* Active indicator */ .theme-dot.active { box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.2); } /* Responsive adjustments */ @media (max-width: 480px) { .theme-switcher { bottom: 10px; right: 10px; padding: 6px 10px; } .theme-dot { width: 16px; height: 16px; } }