/** * MindStage Theme Variables * * This file defines CSS custom properties (variables) for each theme. * Themes are applied via data-theme attribute on the element. * * Usage in templates: * * * Themes: * - main: Default purple/violet (general audience) * - anime: Pink/sakura-inspired (anime/manga fans) * - red: Deep red/dark (mature content) */ /* ========================================================================== BASE THEME (Main) - Default ========================================================================== */ :root, [data-theme="main"] { /* Primary palette - matches prod base_modern.html */ --theme-primary: #7c9cff; --theme-primary-hover: #6b8df4; --theme-primary-light: rgba(124, 156, 255, 0.1); --theme-primary-rgb: 124, 156, 255; /* Secondary palette */ --theme-secondary: #9b59b6; --theme-secondary-hover: #8e44ad; /* Accent colors */ --theme-accent: #9bffdc; --theme-accent-hover: #80ffdb; --theme-accent-rgb: 155, 255, 220; /* Background colors */ --theme-bg-primary: #0a0b0f; --theme-bg-secondary: #14151a; --theme-bg-card: rgba(255, 255, 255, 0.05); --theme-bg-elevated: rgba(255, 255, 255, 0.08); --theme-bg-navbar: rgba(255, 255, 255, 0.95); /* Text colors */ --theme-text-primary: #e7e7ee; --theme-text-secondary: #a0a0a8; --theme-text-muted: #6c6c74; --theme-text-on-primary: #ffffff; /* Border colors */ --theme-border: rgba(255, 255, 255, 0.1); --theme-border-focus: var(--theme-primary); /* Shadows */ --theme-shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.15); --theme-shadow-md: 0 5px 15px rgba(0, 0, 0, 0.2); --theme-shadow-lg: 0 10px 30px rgba(0, 0, 0, 0.25); --theme-shadow-primary: 0 5px 15px rgba(124, 156, 255, 0.3); /* Gradients */ --theme-gradient-primary: linear-gradient(135deg, #667eea 0%, #764ba2 100%); --theme-gradient-bg: linear-gradient(180deg, var(--theme-bg-primary) 0%, var(--theme-bg-secondary) 100%); /* Component-specific */ --theme-card-bg: var(--theme-bg-card); --theme-input-bg: rgba(255, 255, 255, 0.05); --theme-input-border: rgba(255, 255, 255, 0.15); /* Typography */ --theme-font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; /* Transitions */ --theme-transition-fast: 0.15s ease; --theme-transition-normal: 0.3s ease; /* Logo/branding */ --theme-logo-filter: none; --theme-brand-name: "MindStage"; } /* ========================================================================== ANIME THEME - Japanese Traditional aesthetic Inspired by: 藍 (indigo), 朱 (vermillion), 金 (gold) ========================================================================== */ [data-theme="anime"] { /* Primary palette - Indigo (藍色 ai-iro) */ --theme-primary: #5563c1; --theme-primary-hover: #6b7dd4; --theme-primary-light: rgba(85, 99, 193, 0.15); --theme-primary-rgb: 85, 99, 193; /* Secondary palette - Vermillion (朱色 shu-iro) */ --theme-secondary: #c53030; --theme-secondary-hover: #e53e3e; /* Accent colors - Gold (金色 kin-iro) */ --theme-accent: #d69e2e; --theme-accent-hover: #ecc94b; --theme-accent-rgb: 214, 158, 46; /* Background colors - Deep ink wash feel */ --theme-bg-primary: #0a0c14; --theme-bg-secondary: #111827; --theme-bg-card: rgba(85, 99, 193, 0.05); --theme-bg-elevated: rgba(85, 99, 193, 0.08); --theme-bg-navbar: rgba(17, 24, 39, 0.95); /* Text colors - Warm parchment tones */ --theme-text-primary: #f7f5f0; --theme-text-secondary: #c4bfb5; --theme-text-muted: #8a8578; --theme-text-on-primary: #ffffff; /* Border colors */ --theme-border: rgba(85, 99, 193, 0.2); --theme-border-focus: var(--theme-primary); /* Shadows - Subtle indigo tint */ --theme-shadow-sm: 0 2px 8px rgba(85, 99, 193, 0.12); --theme-shadow-md: 0 5px 15px rgba(85, 99, 193, 0.18); --theme-shadow-lg: 0 10px 30px rgba(17, 24, 39, 0.4); --theme-shadow-primary: 0 5px 20px rgba(85, 99, 193, 0.35); /* Gradients - Traditional feel */ --theme-gradient-primary: linear-gradient(135deg, #5563c1 0%, #3d4a8a 100%); --theme-gradient-bg: linear-gradient(180deg, #0a0c14 0%, #151c2c 100%); /* Component-specific */ --theme-card-bg: rgba(85, 99, 193, 0.04); --theme-input-bg: rgba(85, 99, 193, 0.06); --theme-input-border: rgba(85, 99, 193, 0.25); /* Japanese traditional additions */ --theme-vermillion: #c53030; --theme-gold: #d69e2e; --theme-indigo-deep: #3d4a8a; /* Logo filter */ --theme-logo-filter: hue-rotate(220deg) saturate(0.9); --theme-brand-name: "MindStage Anime"; } /* ========================================================================== RED THEME - Noir Cabaret (Moulin Rouge meets Blade Runner) ========================================================================== */ [data-theme="red"] { /* Primary palette - Vibrant crimson (readable on dark) */ --theme-primary: #e63950; --theme-primary-hover: #ff4d6a; --theme-primary-light: rgba(230, 57, 80, 0.18); --theme-primary-rgb: 230, 57, 80; /* Secondary palette - Deep bordeaux */ --theme-secondary: #6b0f1a; --theme-secondary-hover: #8b1a2a; /* Accent colors - Neon cyan (Blade Runner glow) */ --theme-accent: #00d4ff; --theme-accent-hover: #40e0ff; --theme-accent-rgb: 0, 212, 255; /* Background colors - Pure noir black */ --theme-bg-primary: #050505; --theme-bg-secondary: #0a0a0a; --theme-bg-card: rgba(230, 57, 80, 0.05); --theme-bg-elevated: rgba(230, 57, 80, 0.08); --theme-bg-navbar: rgba(5, 5, 5, 0.98); /* Text colors - Cool white */ --theme-text-primary: #f0f0f5; --theme-text-secondary: #a8a8b0; --theme-text-muted: #606068; --theme-text-on-primary: #ffffff; /* Border colors */ --theme-border: rgba(230, 57, 80, 0.2); --theme-border-focus: var(--theme-accent); /* Shadows - Dual neon glow */ --theme-shadow-sm: 0 2px 8px rgba(230, 57, 80, 0.15); --theme-shadow-md: 0 5px 15px rgba(230, 57, 80, 0.25); --theme-shadow-lg: 0 10px 30px rgba(0, 0, 0, 0.6); --theme-shadow-primary: 0 5px 25px rgba(230, 57, 80, 0.45); /* Gradients - Velvet curtain */ --theme-gradient-primary: linear-gradient(135deg, #e63950 0%, #a41034 100%); --theme-gradient-bg: linear-gradient(180deg, #050505 0%, #0a0808 100%); /* Component-specific */ --theme-card-bg: rgba(230, 57, 80, 0.05); --theme-input-bg: rgba(230, 57, 80, 0.08); --theme-input-border: rgba(230, 57, 80, 0.3); /* Noir cabaret additions */ --theme-neon-cyan: #00d4ff; --theme-velvet: #a41034; --theme-noir: #050505; /* Logo filter */ --theme-logo-filter: hue-rotate(340deg) saturate(1.3) brightness(0.95); --theme-brand-name: "MindStage Red"; } /* ========================================================================== THEME-AWARE COMPONENT STYLES These override Bootstrap and base styles to use theme variables ========================================================================== */ /* Body */ body { background: var(--theme-bg-primary); color: var(--theme-text-primary); font-family: var(--theme-font-family); } /* Primary buttons */ .btn-primary, .btn-theme-primary { background: var(--theme-primary); border-color: var(--theme-primary); color: var(--theme-text-on-primary); } .btn-primary:hover, .btn-theme-primary:hover { background: var(--theme-primary-hover); border-color: var(--theme-primary-hover); box-shadow: var(--theme-shadow-primary); } .btn-primary:focus, .btn-theme-primary:focus { box-shadow: 0 0 0 0.25rem rgba(var(--theme-primary-rgb), 0.5); } /* Accent buttons (Play, CTA) */ .btn-accent, .btn-play { background: var(--theme-accent); color: var(--theme-text-on-primary); } .btn-accent:hover, .btn-play:hover { background: var(--theme-accent-hover); box-shadow: 0 5px 15px rgba(var(--theme-accent-rgb), 0.3); } /* Cards */ .card, .theme-card { background: var(--theme-card-bg); border: 1px solid var(--theme-border); box-shadow: var(--theme-shadow-sm); } .card:hover, .theme-card:hover { box-shadow: var(--theme-shadow-md); border-color: var(--theme-primary-light); } /* Form inputs */ .form-control, .form-select { background: var(--theme-input-bg); border-color: var(--theme-input-border); color: var(--theme-text-primary); } .form-control:focus, .form-select:focus { border-color: var(--theme-border-focus); box-shadow: 0 0 0 0.2rem rgba(var(--theme-primary-rgb), 0.25); background: var(--theme-input-bg); } .form-control::placeholder { color: var(--theme-text-muted); } /* Links */ a { color: var(--theme-primary); transition: color var(--theme-transition-fast); } a:hover { color: var(--theme-primary-hover); } /* Navbar */ .navbar.theme-aware { background: var(--theme-bg-navbar); backdrop-filter: blur(10px); } .navbar-brand { color: var(--theme-primary) !important; } /* Account avatar */ .account-avatar { background: var(--theme-primary); } .account-avatar:hover { background: var(--theme-primary-hover); } /* Dropdown menus */ .dropdown-menu { background: var(--theme-bg-elevated); border: 1px solid var(--theme-border); } .dropdown-item { color: var(--theme-text-primary); } .dropdown-item:hover, .dropdown-item:focus { background: var(--theme-primary-light); color: var(--theme-primary); } .dropdown-item.active { background: var(--theme-primary); color: var(--theme-text-on-primary); } /* Badges */ .badge.bg-primary, .badge-primary { background: var(--theme-primary) !important; } /* Progress bars */ .progress-bar { background: var(--theme-primary); } /* Selection highlight */ ::selection { background: var(--theme-primary); color: var(--theme-text-on-primary); } /* ========================================================================== ANIME-SPECIFIC DECORATIVE ELEMENTS (Japanese Traditional) ========================================================================== */ [data-theme="anime"] .theme-decoration::before { content: '◆'; color: var(--theme-gold); margin-right: 0.5em; } [data-theme="anime"] .theme-decoration::after { content: '◆'; color: var(--theme-gold); margin-left: 0.5em; } /* Traditional glow effect on hover for featured items */ [data-theme="anime"] .card-featured:hover { animation: traditional-glow 0.6s ease-in-out; } @keyframes traditional-glow { 0%, 100% { box-shadow: var(--theme-shadow-md); } 50% { box-shadow: 0 0 20px var(--theme-gold), 0 0 40px var(--theme-indigo-deep); } } /* ========================================================================== RED THEME - Noir Cabaret aesthetic elements ========================================================================== */ [data-theme="red"] .navbar.theme-aware { border-bottom: 1px solid rgba(230, 57, 80, 0.3); } [data-theme="red"] .card-featured { border: 1px solid rgba(230, 57, 80, 0.25); } /* Neon glow effect on hover for featured items */ [data-theme="red"] .card-featured:hover { animation: neon-pulse 0.8s ease-in-out; } @keyframes neon-pulse { 0%, 100% { box-shadow: var(--theme-shadow-md); } 50% { box-shadow: 0 0 15px var(--theme-velvet), 0 0 30px var(--theme-neon-cyan); } }