/** * Event Branding Theme System * * Provides preset color themes for third-party event branding. * All themes use CSS variables with fallbacks to BoutiqueMatch defaults. * * Usage: Apply theme class to or event container when branding is enabled. */ /* ============================================================ Base Theme Variables (BoutiqueMatch Default) ============================================================ */ :root { /* BoutiqueMatch Default Theme */ --bm-bg: #ffffff; --bm-primary: #f472b6; --bm-primary-dark: #c91d68; --bm-primary-light: #fbcfe8; --bm-accent: #fbcfe8; --bm-card-bg: #ffffff; --bm-text: #111827; --bm-text-secondary: #374151; --bm-text-muted: #6b7280; --bm-button: #f472b6; --bm-button-hover: #c91d68; --bm-button-text: #ffffff; --bm-border: #f3f4f6; --bm-shadow: rgba(0, 0, 0, 0.1); } /* ============================================================ Theme: Elegant Pink ============================================================ */ html.theme-elegant-pink, .theme-elegant-pink { --bm-bg: #fef7f0; --bm-primary: #db2777; --bm-primary-dark: #be185d; --bm-primary-light: #f9a8d4; --bm-accent: #fce7f3; --bm-card-bg: #ffffff; --bm-text: #1f2937; --bm-text-secondary: #4b5563; --bm-text-muted: #9ca3af; --bm-button: #db2777; --bm-button-hover: #be185d; --bm-button-text: #ffffff; --bm-border: #fce7f3; --bm-shadow: rgba(219, 39, 119, 0.15); } /* ============================================================ Theme: Ocean Blue ============================================================ */ html.theme-ocean-blue, .theme-ocean-blue { --bm-bg: #f0f9ff; --bm-primary: #3b82f6; --bm-primary-dark: #2563eb; --bm-primary-light: #93c5fd; --bm-accent: #dbeafe; --bm-card-bg: #ffffff; --bm-text: #1e293b; --bm-text-secondary: #475569; --bm-text-muted: #64748b; --bm-button: #3b82f6; --bm-button-hover: #2563eb; --bm-button-text: #ffffff; --bm-border: #e0e7ff; --bm-shadow: rgba(59, 130, 246, 0.15); } /* ============================================================ Theme: Forest Green ============================================================ */ html.theme-forest-green, .theme-forest-green { --bm-bg: #f0fdf4; --bm-primary: #10b981; --bm-primary-dark: #059669; --bm-primary-light: #6ee7b7; --bm-accent: #d1fae5; --bm-card-bg: #ffffff; --bm-text: #1f2937; --bm-text-secondary: #374151; --bm-text-muted: #6b7280; --bm-button: #10b981; --bm-button-hover: #059669; --bm-button-text: #ffffff; --bm-border: #d1fae5; --bm-shadow: rgba(16, 185, 129, 0.15); } /* ============================================================ Theme: Sunset Orange ============================================================ */ html.theme-sunset-orange, .theme-sunset-orange { --bm-bg: #fff7ed; --bm-primary: #f97316; --bm-primary-dark: #ea580c; --bm-primary-light: #fdba74; --bm-accent: #fed7aa; --bm-card-bg: #ffffff; --bm-text: #1f2937; --bm-text-secondary: #374151; --bm-text-muted: #6b7280; --bm-button: #f97316; --bm-button-hover: #ea580c; --bm-button-text: #ffffff; --bm-border: #fed7aa; --bm-shadow: rgba(249, 115, 22, 0.15); } /* ============================================================ Theme: Royal Purple ============================================================ */ html.theme-royal-purple, .theme-royal-purple { --bm-bg: #faf5ff; --bm-primary: #9333ea; --bm-primary-dark: #7e22ce; --bm-primary-light: #c084fc; --bm-accent: #e9d5ff; --bm-card-bg: #ffffff; --bm-text: #1f2937; --bm-text-secondary: #374151; --bm-text-muted: #6b7280; --bm-button: #9333ea; --bm-button-hover: #7e22ce; --bm-button-text: #ffffff; --bm-border: #e9d5ff; --bm-shadow: rgba(147, 51, 234, 0.15); } /* ============================================================ Theme: Classic Red ============================================================ */ html.theme-classic-red, .theme-classic-red { --bm-bg: #fef2f2; --bm-primary: #ef4444; --bm-primary-dark: #dc2626; --bm-primary-light: #fca5a5; --bm-accent: #fee2e2; --bm-card-bg: #ffffff; --bm-text: #1f2937; --bm-text-secondary: #374151; --bm-text-muted: #6b7280; --bm-button: #ef4444; --bm-button-hover: #dc2626; --bm-button-text: #ffffff; --bm-border: #fee2e2; --bm-shadow: rgba(239, 68, 68, 0.15); } /* ============================================================ Utility Classes for Branded Elements ============================================================ */ .branded-bg { background-color: var(--bm-bg, #ffffff); } .branded-primary { color: var(--bm-primary, #f472b6); } .branded-primary-bg { background-color: var(--bm-primary, #f472b6); } .branded-button { background-color: var(--bm-button, #f472b6); color: var(--bm-button-text, #ffffff); border-color: var(--bm-button, #f472b6); } .branded-button:hover { background-color: var(--bm-button-hover, #c91d68); border-color: var(--bm-button-hover, #c91d68); } .branded-card { background-color: var(--bm-card-bg, #ffffff); border-color: var(--bm-border, #f3f4f6); box-shadow: 0 1px 3px var(--bm-shadow, rgba(0, 0, 0, 0.1)); } .branded-text { color: var(--bm-text, #111827); } .branded-text-secondary { color: var(--bm-text-secondary, #374151); } .branded-text-muted { color: var(--bm-text-muted, #6b7280); } /* ============================================================ Powered by BoutiqueMatch Footer ============================================================ */ .branded-footer { background-color: var(--bm-card-bg, #ffffff); border-top: 1px solid var(--bm-border, #f3f4f6); color: var(--bm-text-muted, #6b7280); font-size: 0.875rem; padding: 1rem; text-align: center; } .branded-footer a { color: var(--bm-primary, #f472b6); text-decoration: none; } .branded-footer a:hover { color: var(--bm-primary-dark, #c91d68); text-decoration: underline; }