/** * EventMaat Multi-Brand Theme System * * Based on Theme Factory Skill - 3 Brand Variants * * Usage: * 1. Add data-brand="lanternmate|decomaat|vlaggenmaat" to or * 2. CSS variables automatically cascade to all components * * @package EventMaat Theme * @version 35.0.0 */ /* ============================================ BASE DESIGN TOKENS (Shared) ============================================ */ :root { /* Typography */ --font-display: 'Cormorant Garamond', Georgia, serif; --font-body: 'Plus Jakarta Sans', system-ui, sans-serif; /* Spacing */ --space-xs: 0.25rem; --space-sm: 0.5rem; --space-md: 1rem; --space-lg: 1.5rem; --space-xl: 2rem; --space-2xl: 3rem; /* Radii */ --radius-sm: 0.5rem; --radius-md: 0.75rem; --radius-lg: 1rem; --radius-xl: 1.5rem; --radius-2xl: 2rem; --radius-full: 9999px; /* Shadows */ --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05); --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1); --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.2); --shadow-xl: 0 25px 50px -12px rgba(0, 0, 0, 0.5); /* Transitions */ --transition-fast: 150ms ease; --transition-base: 300ms ease; --transition-slow: 500ms ease; /* Default to Lanternmate */ --brand-primary: #d4af37; --brand-primary-light: #e6c555; --brand-bg-dark: #0f1423; --brand-bg-panel: #1a1f35; --brand-bg-elevated: #252b42; --brand-border: #2a3050; --brand-text: #ffffff; --brand-text-muted: rgba(255, 255, 255, 0.6); --brand-text-subtle: rgba(255, 255, 255, 0.4); --brand-glow: 0 0 40px rgba(212, 175, 55, 0.15); } /* ============================================ BRAND: LANTERNMATE Golden Warmth - Vietnamese Lantern Aesthetic ============================================ */ [data-brand="lanternmate"], .brand-lanternmate { --brand-primary: #d4af37; --brand-primary-light: #e6c555; --brand-primary-dark: #b8942e; --brand-bg-dark: #0f1423; --brand-bg-panel: #1a1f35; --brand-bg-elevated: #252b42; --brand-border: #2a3050; --brand-accent: #f59e0b; --brand-glow: 0 0 40px rgba(212, 175, 55, 0.15); /* Semantic */ --color-success: #22c55e; --color-warning: #f59e0b; --color-error: #ef4444; --color-info: #3b82f6; } /* ============================================ BRAND: DECOMAAT Fresh Teal - Modern Event Decoration ============================================ */ [data-brand="decomaat"], .brand-decomaat { --brand-primary: #2dd4bf; --brand-primary-light: #5eead4; --brand-primary-dark: #14b8a6; --brand-bg-dark: #0f172a; --brand-bg-panel: #1e293b; --brand-bg-elevated: #334155; --brand-border: #475569; --brand-accent: #06b6d4; --brand-glow: 0 0 40px rgba(45, 212, 191, 0.15); /* Text adjustments for teal brand */ --brand-text: #f8fafc; --brand-text-muted: rgba(248, 250, 252, 0.7); --brand-text-subtle: rgba(248, 250, 252, 0.5); } /* ============================================ BRAND: VLAGGENMAAT Bold Red - Patriotic Flag Rental ============================================ */ [data-brand="vlaggenmaat"], .brand-vlaggenmaat { --brand-primary: #ef4444; --brand-primary-light: #f87171; --brand-primary-dark: #dc2626; --brand-bg-dark: #1e293b; --brand-bg-panel: #1f2937; --brand-bg-elevated: #374151; --brand-border: #4b5563; --brand-accent: #f97316; --brand-glow: 0 0 40px rgba(239, 68, 68, 0.15); /* Text adjustments */ --brand-text: #f9fafb; --brand-text-muted: rgba(249, 250, 251, 0.7); --brand-text-subtle: rgba(249, 250, 251, 0.5); } /* ============================================ UTILITY CLASSES ============================================ */ /* Backgrounds */ .bg-brand-dark { background-color: var(--brand-bg-dark); } .bg-brand-panel { background-color: var(--brand-bg-panel); } .bg-brand-elevated { background-color: var(--brand-bg-elevated); } .bg-brand-primary { background-color: var(--brand-primary); } /* Text Colors */ .text-brand-primary { color: var(--brand-primary); } .text-brand { color: var(--brand-text); } .text-brand-muted { color: var(--brand-text-muted); } .text-brand-subtle { color: var(--brand-text-subtle); } /* Borders */ .border-brand { border-color: var(--brand-border); } .border-brand-primary { border-color: var(--brand-primary); } /* Interactive States */ .hover\:bg-brand-primary:hover { background-color: var(--brand-primary); } .hover\:text-brand-primary:hover { color: var(--brand-primary); } .hover\:border-brand-primary:hover { border-color: var(--brand-primary); } /* Focus States */ .focus\:ring-brand:focus { outline: none; box-shadow: 0 0 0 3px rgba(var(--brand-primary), 0.3); } /* Glow Effect */ .glow-brand { box-shadow: var(--brand-glow); } /* Typography */ .font-display { font-family: var(--font-display); } .font-body { font-family: var(--font-body); } /* ============================================ COMPONENT DEFAULTS Apply brand colors to common elements ============================================ */ /* Links */ a { color: var(--brand-primary); transition: color var(--transition-fast); } a:hover { color: var(--brand-primary-light); } /* Buttons - Primary */ .btn-primary, button[type="submit"]:not(.custom-btn) { background-color: var(--brand-primary); color: var(--brand-bg-dark); border-radius: var(--radius-lg); font-family: var(--font-body); font-weight: 600; transition: all var(--transition-base); } .btn-primary:hover, button[type="submit"]:not(.custom-btn):hover { background-color: var(--brand-primary-light); transform: translateY(-2px); box-shadow: var(--brand-glow); } /* Buttons - Secondary */ .btn-secondary { background-color: transparent; color: var(--brand-primary); border: 1px solid var(--brand-primary); border-radius: var(--radius-lg); } .btn-secondary:hover { background-color: rgba(var(--brand-primary), 0.1); } /* Cards */ .card { background-color: var(--brand-bg-panel); border: 1px solid var(--brand-border); border-radius: var(--radius-xl); } .card:hover { border-color: var(--brand-primary); box-shadow: var(--shadow-lg), var(--brand-glow); } /* Forms */ input[type="text"], input[type="email"], input[type="password"], input[type="search"], input[type="number"], textarea, select { background-color: var(--brand-bg-panel); border: 1px solid var(--brand-border); color: var(--brand-text); border-radius: var(--radius-lg); font-family: var(--font-body); transition: all var(--transition-fast); } input:focus, textarea:focus, select:focus { border-color: var(--brand-primary); box-shadow: var(--brand-glow); outline: none; } input::placeholder, textarea::placeholder { color: var(--brand-text-subtle); } /* Selection */ ::selection { background-color: var(--brand-primary); color: var(--brand-bg-dark); } /* ============================================ WOOCOMMERCE OVERRIDES ============================================ */ /* Product Price */ .woocommerce .price, .woocommerce .amount { color: var(--brand-primary) !important; font-family: var(--font-body); } /* Add to Cart */ .woocommerce .button, .woocommerce a.button, .woocommerce button.button { background-color: var(--brand-primary) !important; color: var(--brand-bg-dark) !important; border-radius: var(--radius-lg) !important; } .woocommerce .button:hover, .woocommerce a.button:hover, .woocommerce button.button:hover { background-color: var(--brand-primary-light) !important; } /* Notices */ .woocommerce-message { background-color: var(--brand-bg-panel) !important; border-color: var(--color-success) !important; color: var(--brand-text) !important; } .woocommerce-error { background-color: var(--brand-bg-panel) !important; border-color: var(--color-error) !important; color: var(--brand-text) !important; } /* ============================================ ANIMATIONS ============================================ */ @keyframes fade-in-up { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } @keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } } @keyframes glow-pulse { 0%, 100% { box-shadow: var(--brand-glow); } 50% { box-shadow: 0 0 60px rgba(var(--brand-primary), 0.25); } } .animate-fade-in-up { animation: fade-in-up 0.6s ease-out forwards; } .animate-float { animation: float 8s ease-in-out infinite; } .animate-glow-pulse { animation: glow-pulse 3s ease-in-out infinite; }