/* ========================================================================== SHOULDCAST THEME OVERRIDES Each theme overrides the semantic CSS variables defined in design-system.css. Applied via [data-theme="..."] on the element. ========================================================================== */ /* ============================================================ THEME: Cyber Cinema (Default / Purple Cyberpunk) ============================================================ */ [data-theme="cyber"], :root { /* Accent & Color Scheme */ --geek-accent: #8A2BE2; --accent-base-color: #8A2BE2; --accent-text-color: #ffffff; --geek-accent-rgb: 138, 43, 226; --geek-accent-light: #B066FF; --geek-accent-alt: #EA00D9; --geek-highlight: #00FFF0; --geek-black: #0a0514; --geek-dark-bg: rgba(10, 5, 20, 0.7); --geek-nav-bg: rgba(15, 10, 30, 0.7); --geek-header-bg: rgba(15, 10, 30, 0.7); --geek-footer-bg: rgba(10, 5, 20, 0.95); --geek-body-bg: #0f0a1e; /* Effects & Glass */ --neon-glow: 0 0 15px rgba(138, 43, 226, 0.5); --neon-glow-strong: 0 0 25px rgba(138, 43, 226, 0.6); --glass-border: 1px solid rgba(138, 43, 226, 0.2); --glass-border-color: rgba(138, 43, 226, 0.2); --glass-active-bg: rgba(138, 43, 226, 0.12); --glass-blur-value: blur(25px); /* Navigation */ --nav-active-border: var(--geek-highlight); --nav-active-color: var(--geek-highlight); --nav-active-glow: rgba(0, 255, 240, 0.4); --hub-nav-active-color: var(--geek-accent-alt); --hub-nav-active-bg: rgba(234, 0, 217, 0.1); --hub-nav-active-glow: rgba(234, 0, 217, 0.2); /* Custom Design Tokens */ --logo-orb-color: #8A2BE2; --pill-gradient: linear-gradient(135deg, #8A2BE2, #EA00D9); --pill-inner-bg: #0f0a1e; --metric-gradient: linear-gradient(90deg, #8A2BE2, #EA00D9); --auth-gradient: radial-gradient(circle at center, rgba(138, 43, 226, 0.05) 0%, transparent 70%); --auth-btn-gradient: linear-gradient(135deg, #8A2BE2, #EA00D9); --auth-btn-shadow: rgba(138, 43, 226, 0.3); --auth-btn-shadow-hover: rgba(138, 43, 226, 0.5); --auth-link-color: #EA00D9; --auth-link-hover: #B066FF; --tab-selected-color: var(--geek-highlight); --comment-border: #8A2BE2; /* Structural Variables */ --theme-font-family: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif; --theme-font-heading: 'Plus Jakarta Sans', system-ui, sans-serif; --theme-font-weight-heading: 900; --theme-text-transform-heading: uppercase; --theme-letter-spacing-heading: 2px; --theme-border-radius-card: 16px; --theme-border-radius-control: 30px; --theme-border-radius-menu: 20px; --theme-box-shadow-card: 0 15px 35px rgba(0,0,0,0.4); --theme-card-bg-gradient: none; --theme-scanlines-opacity: 0.1; --theme-scanlines-pattern: repeating-linear-gradient(0deg, rgba(255,255,255,0.03) 0px, rgba(255,255,255,0.03) 1px, transparent 1px, transparent 2px); /* Fluent UI v5 Design Token Overrides */ --fontFamilyBase: var(--theme-font-family); --borderRadiusMedium: var(--theme-border-radius-control, 6px); --accent-base-color: var(--accent-base-color) !important; --accent-fill-rest: var(--geek-accent) !important; --accent-fill-hover: var(--geek-accent-light) !important; --accent-fill-active: var(--geek-accent-light) !important; --accent-foreground-rest: var(--geek-accent-alt) !important; --accent-foreground-hover: var(--geek-accent-light) !important; --accent-foreground-active: var(--geek-accent-light) !important; /* Modern Fluent UI v5 Brand/Accent Tokens */ --colorBrandBackground: var(--geek-accent) !important; --colorBrandBackgroundHover: var(--geek-accent-light) !important; --colorBrandBackgroundPressed: var(--geek-accent-light) !important; --colorBrandBackgroundSelected: var(--geek-accent) !important; --colorNeutralForegroundOnBrand: var(--accent-text-color, #ffffff) !important; /* Theme Error & Validation Styling */ --error-color: #EA00D9; --error-glow: 0 0 10px rgba(234, 0, 217, 0.45); /* Theme Toast colors */ --success-color: #00FF66; --warning-color: #FFD23F; --info-color: #00FFF0; } /* ============================================================ THEME: Obsidian Spotlight Deep matte black + warm amber projector light ============================================================ */ [data-theme="spotlight"] { --geek-accent: #E8A020; --accent-base-color: #E8A020; --accent-text-color: #080808; --geek-accent-rgb: 232, 160, 32; --geek-accent-light: #F5C842; --geek-accent-alt: #D4621A; --geek-highlight: #FFDE7A; --geek-black: #080808; --geek-dark-bg: rgba(8, 8, 8, 0.75); --geek-nav-bg: rgba(14, 11, 6, 0.8); --geek-header-bg: rgba(14, 11, 6, 0.8); --geek-footer-bg: rgba(8, 8, 8, 0.95); --geek-body-bg: #0e0b06; --neon-glow: 0 0 15px rgba(232, 160, 32, 0.45); --neon-glow-strong: 0 0 28px rgba(232, 160, 32, 0.6); --glass-border: 1px solid rgba(232, 160, 32, 0.18); --glass-border-color: rgba(232, 160, 32, 0.18); --glass-active-bg: rgba(232, 160, 32, 0.1); --glass-blur-value: blur(25px); --nav-active-border: var(--geek-highlight); --nav-active-color: var(--geek-highlight); --nav-active-glow: rgba(255, 222, 122, 0.4); --hub-nav-active-color: var(--geek-accent); --hub-nav-active-bg: rgba(232, 160, 32, 0.1); --hub-nav-active-glow: rgba(232, 160, 32, 0.2); --logo-orb-color: #E8A020; --pill-gradient: linear-gradient(135deg, #E8A020, #D4621A); --pill-inner-bg: #0e0b06; --metric-gradient: linear-gradient(90deg, #E8A020, #F5C842); --auth-gradient: radial-gradient(circle at center, rgba(232, 160, 32, 0.05) 0%, transparent 70%); --auth-btn-gradient: linear-gradient(135deg, #E8A020, #D4621A); --auth-btn-shadow: rgba(232, 160, 32, 0.3); --auth-btn-shadow-hover: rgba(232, 160, 32, 0.5); --auth-link-color: #E8A020; --auth-link-hover: #F5C842; --tab-selected-color: var(--geek-highlight); --comment-border: #E8A020; /* Structural Variables */ --theme-font-family: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif; --theme-font-heading: 'Plus Jakarta Sans', system-ui, sans-serif; --theme-font-weight-heading: 900; --theme-text-transform-heading: uppercase; --theme-letter-spacing-heading: 2px; --theme-border-radius-card: 16px; --theme-border-radius-control: 30px; --theme-border-radius-menu: 20px; --theme-box-shadow-card: 0 15px 35px rgba(0,0,0,0.4); --theme-card-bg-gradient: none; --theme-scanlines-opacity: 0.1; --theme-scanlines-pattern: repeating-linear-gradient(0deg, rgba(255,255,255,0.03) 0px, rgba(255,255,255,0.03) 1px, transparent 1px, transparent 2px); --fontFamilyBase: var(--theme-font-family); --borderRadiusMedium: 6px; /* Theme Error & Validation Styling */ --error-color: #D4621A; --error-glow: 0 0 10px rgba(212, 98, 26, 0.45); /* Theme Toast colors */ --success-color: #2EB872; --warning-color: #E8A020; --info-color: #3399FF; } /* ============================================================ THEME: Ember Warm obsidian base + fire-orange passion ============================================================ */ [data-theme="ember"] { --geek-accent: #FF6B35; --accent-base-color: #FF6B35; --accent-text-color: #ffffff; --geek-accent-rgb: 255, 107, 53; --geek-accent-light: #FF9A6C; --geek-accent-alt: #FF2D55; --geek-highlight: #FFD23F; --geek-black: #0a0806; --geek-dark-bg: rgba(10, 8, 6, 0.75); --geek-nav-bg: rgba(16, 10, 6, 0.8); --geek-header-bg: rgba(16, 10, 6, 0.8); --geek-footer-bg: rgba(10, 8, 6, 0.95); --geek-body-bg: #100a06; --neon-glow: 0 0 15px rgba(255, 107, 53, 0.45); --neon-glow-strong: 0 0 28px rgba(255, 107, 53, 0.65); --glass-border: 1px solid rgba(255, 107, 53, 0.18); --glass-border-color: rgba(255, 107, 53, 0.18); --glass-active-bg: rgba(255, 107, 53, 0.1); --glass-blur-value: blur(25px); --nav-active-border: var(--geek-highlight); --nav-active-color: var(--geek-highlight); --nav-active-glow: rgba(255, 210, 63, 0.4); --hub-nav-active-color: var(--geek-accent); --hub-nav-active-bg: rgba(255, 107, 53, 0.1); --hub-nav-active-glow: rgba(255, 107, 53, 0.2); --logo-orb-color: #FF6B35; --pill-gradient: linear-gradient(135deg, #FF6B35, #FF2D55); --pill-inner-bg: #100a06; --metric-gradient: linear-gradient(90deg, #FF6B35, #FFD23F); --auth-gradient: radial-gradient(circle at center, rgba(255, 107, 53, 0.05) 0%, transparent 70%); --auth-btn-gradient: linear-gradient(135deg, #FF6B35, #FF2D55); --auth-btn-shadow: rgba(255, 107, 53, 0.3); --auth-btn-shadow-hover: rgba(255, 107, 53, 0.5); --auth-link-color: #FF6B35; --auth-link-hover: #FF9A6C; --tab-selected-color: var(--geek-highlight); --comment-border: #FF6B35; /* Structural Variables */ --theme-font-family: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif; --theme-font-heading: 'Plus Jakarta Sans', system-ui, sans-serif; --theme-font-weight-heading: 900; --theme-text-transform-heading: uppercase; --theme-letter-spacing-heading: 2px; --theme-border-radius-card: 16px; --theme-border-radius-control: 30px; --theme-border-radius-menu: 20px; --theme-box-shadow-card: 0 15px 35px rgba(0,0,0,0.4); --theme-card-bg-gradient: none; --theme-scanlines-opacity: 0.1; --theme-scanlines-pattern: repeating-linear-gradient(0deg, rgba(255,255,255,0.03) 0px, rgba(255,255,255,0.03) 1px, transparent 1px, transparent 2px); --fontFamilyBase: var(--theme-font-family); --borderRadiusMedium: 6px; /* Theme Error & Validation Styling */ --error-color: #FF2D55; --error-glow: 0 0 10px rgba(255, 45, 85, 0.45); /* Theme Toast colors */ --success-color: #10B981; --warning-color: #FF6B35; --info-color: #60A5FA; } /* ============================================================ NEW THEME: The Criterion Film Editorial / Literary / Monochromatic Editorial ============================================================ */ [data-theme="criterion"] { --geek-accent: #E5E5E5; --accent-base-color: #E5E5E5; --accent-text-color: #0A0A0A; --geek-accent-rgb: 229, 229, 229; --geek-accent-light: #FFFFFF; --geek-accent-alt: #999999; --geek-highlight: #CCCCCC; --geek-black: #0A0A0A; --geek-dark-bg: #121212; --geek-nav-bg: #181818; --geek-header-bg: #121212; --geek-footer-bg: #0A0A0A; --geek-body-bg: #0d0c0a; /* Warm near-black film-stock background */ --neon-glow: none; --neon-glow-strong: none; --glass-border: 1px solid #2A2A2A; --glass-border-color: #2A2A2A; --glass-active-bg: #222222; --glass-blur-value: none; --nav-active-border: #FFFFFF; --nav-active-color: #FFFFFF; --nav-active-glow: none; --hub-nav-active-color: #FFFFFF; --hub-nav-active-bg: #1E1E1E; --hub-nav-active-glow: none; --logo-orb-color: #E5E5E5; --pill-gradient: none; --pill-inner-bg: #121212; --metric-gradient: linear-gradient(90deg, #555555, #CCCCCC); --auth-gradient: none; --auth-btn-gradient: none; --auth-btn-shadow: none; --auth-btn-shadow-hover: none; --auth-link-color: #CCCCCC; --auth-link-hover: #FFFFFF; /* Structural Variables */ --theme-font-family: 'Plus Jakarta Sans', system-ui, sans-serif; --theme-font-heading: 'DM Serif Display', Georgia, serif; --theme-font-weight-heading: 400; --theme-text-transform-heading: none; --theme-letter-spacing-heading: 0.5px; --theme-border-radius-card: 2px; /* Extremely sharp flat styling */ --theme-border-radius-control: 2px; --theme-border-radius-menu: 2px; --theme-box-shadow-card: 0 4px 20px rgba(0,0,0,0.8); --theme-card-bg-gradient: none; --theme-scanlines-opacity: 0.03; /* Film grain texture instead of scanlines */ --theme-scanlines-pattern: radial-gradient(circle, rgba(255,255,255,0.15) 1px, transparent 1px); /* Fluent UI v5 Design Token Overrides */ --fontFamilyBase: var(--theme-font-family); --borderRadiusMedium: 2px; --control-corner-radius: 2px; /* Theme Error & Validation Styling */ --error-color: #B5524C; /* Soft, warm muted brick-red for validation errors */ --error-glow: none; /* No neon glow on Criterion */ /* Theme Toast colors */ --success-color: #5A8F76; --warning-color: #C29F5C; --info-color: #999999; } /* ============================================================ NEW THEME: The Marquee Art Deco Cinema / Classic Hollywood Red & Gold ============================================================ */ [data-theme="marquee"] { --geek-accent: #D4AF37; --accent-base-color: #D4AF37; --accent-text-color: #0C0608; /* Metallic Gold */ --geek-accent-rgb: 212, 175, 55; --geek-accent-light: #F3E5AB; --geek-accent-alt: #800020; /* Deep Burgundy Crimson */ --geek-highlight: #FFDF70; --geek-black: #0C0608; --geek-dark-bg: rgba(20, 6, 10, 0.85); --geek-nav-bg: rgba(35, 10, 18, 0.9); --geek-header-bg: rgba(35, 10, 18, 0.9); --geek-footer-bg: rgba(15, 4, 7, 0.98); --geek-body-bg: #16080C; --neon-glow: 0 0 12px rgba(212, 175, 55, 0.35); --neon-glow-strong: 0 0 25px rgba(212, 175, 55, 0.5); --glass-border: 1px solid rgba(212, 175, 55, 0.25); --glass-border-color: rgba(212, 175, 55, 0.25); --glass-active-bg: rgba(212, 175, 55, 0.08); --glass-blur-value: blur(15px); --nav-active-border: var(--geek-accent); --nav-active-color: var(--geek-accent-light); --nav-active-glow: rgba(212, 175, 55, 0.3); --hub-nav-active-color: var(--geek-accent); --hub-nav-active-bg: rgba(212, 175, 55, 0.08); --hub-nav-active-glow: rgba(212, 175, 55, 0.15); --logo-orb-color: #D4AF37; --pill-gradient: linear-gradient(135deg, #D4AF37, #800020); --pill-inner-bg: #16080C; --metric-gradient: linear-gradient(90deg, #800020, #D4AF37); --auth-gradient: radial-gradient(circle at center, rgba(128, 0, 32, 0.1) 0%, transparent 70%); --auth-btn-gradient: linear-gradient(135deg, #D4AF37, #800020); --auth-btn-shadow: rgba(128, 0, 32, 0.4); --auth-btn-shadow-hover: rgba(212, 175, 55, 0.4); --auth-link-color: #D4AF37; --auth-link-hover: #F3E5AB; --tab-selected-color: var(--geek-accent); --comment-border: #D4AF37; /* Structural Variables */ --theme-font-family: 'Plus Jakarta Sans', system-ui, sans-serif; --theme-font-heading: 'Bebas Neue', Impact, sans-serif; --theme-font-weight-heading: 400; --theme-text-transform-heading: uppercase; --theme-letter-spacing-heading: 3px; --theme-border-radius-card: 0px; /* Angular geometric art-deco style */ --theme-border-radius-control: 0px; --theme-border-radius-menu: 0px; --theme-box-shadow-card: 0 10px 30px rgba(0,0,0,0.6), inset 0 0 15px rgba(212,175,55,0.05); --theme-card-bg-gradient: linear-gradient(180deg, rgba(30,10,15,0.5) 0%, rgba(15,5,8,0.8) 100%); --theme-scanlines-opacity: 0.12; --theme-scanlines-pattern: repeating-linear-gradient(90deg, rgba(212,175,55,0.02) 0px, rgba(212,175,55,0.02) 1px, transparent 1px, transparent 4px); /* Fluent UI v5 Design Token Overrides */ --fontFamilyBase: var(--theme-font-family); --borderRadiusMedium: 0px; --control-corner-radius: 0px; /* Theme Error & Validation Styling */ --error-color: #800020; /* Deep Burgundy Crimson */ --error-glow: 0 0 8px rgba(128, 0, 32, 0.4); /* Theme Toast colors */ --success-color: #2E7D32; --warning-color: #D4AF37; --info-color: #A89F91; } /* ============================================================ NEW THEME: The Reel Analog Cinephile / Kodak Warm Film Roll ============================================================ */ [data-theme="reel"] { --geek-accent: #FF9F1C; --accent-base-color: #FF9F1C; --accent-text-color: #110B05; /* Kodachrome Gold/Orange */ --geek-accent-rgb: 255, 159, 28; --geek-accent-light: #FFBF69; --geek-accent-alt: #2EC4B6; /* Teal complementary */ --geek-highlight: #CBF3F0; --geek-black: #110B05; --geek-dark-bg: rgba(25, 20, 15, 0.8); --geek-nav-bg: rgba(35, 28, 20, 0.85); --geek-header-bg: rgba(35, 28, 20, 0.85); --geek-footer-bg: rgba(17, 11, 5, 0.96); --geek-body-bg: #1C140E; /* Dark Sepia Warm Film Base */ --neon-glow: none; --neon-glow-strong: none; --glass-border: 1px solid rgba(255, 159, 28, 0.2); --glass-border-color: rgba(255, 159, 28, 0.2); --glass-active-bg: rgba(255, 159, 28, 0.1); --glass-blur-value: blur(20px); --nav-active-border: var(--geek-accent); --nav-active-color: var(--geek-accent); --nav-active-glow: none; --hub-nav-active-color: var(--geek-accent); --hub-nav-active-bg: rgba(255, 159, 28, 0.08); --hub-nav-active-glow: none; --logo-orb-color: #FF9F1C; --pill-gradient: linear-gradient(135deg, #FF9F1C, #2EC4B6); --pill-inner-bg: #1C140E; --metric-gradient: linear-gradient(90deg, #FF9F1C, #FFBF69); --auth-gradient: radial-gradient(circle at center, rgba(255, 159, 28, 0.06) 0%, transparent 70%); --auth-btn-gradient: linear-gradient(135deg, #FF9F1C, #FFBF69); --auth-btn-shadow: rgba(255, 159, 28, 0.2); --auth-btn-shadow-hover: rgba(255, 159, 28, 0.35); --auth-link-color: #FF9F1C; --auth-link-hover: #FFBF69; --tab-selected-color: var(--geek-accent); --comment-border: #FF9F1C; /* Structural Variables */ --theme-font-family: 'Plus Jakarta Sans', system-ui, sans-serif; --theme-font-heading: 'Plus Jakarta Sans', system-ui, sans-serif; --theme-font-weight-heading: 800; --theme-text-transform-heading: uppercase; --theme-letter-spacing-heading: 1.5px; --theme-border-radius-card: 8px; /* Classic rounded soft look */ --theme-border-radius-control: 8px; --theme-border-radius-menu: 12px; --theme-box-shadow-card: 0 12px 28px rgba(0,0,0,0.5); --theme-card-bg-gradient: none; --theme-scanlines-opacity: 0.04; --theme-scanlines-pattern: repeating-linear-gradient(0deg, rgba(255,159,28,0.03) 0px, rgba(255,159,28,0.03) 1px, transparent 1px, transparent 3px); /* Fluent UI v5 Design Token Overrides */ --fontFamilyBase: var(--theme-font-family); --borderRadiusMedium: 8px; --control-corner-radius: 8px; /* Theme Error & Validation Styling */ --error-color: #e76f51; /* Kodachrome warm orange-red */ --error-glow: none; /* Theme Toast colors */ --success-color: #2EC4B6; --warning-color: #FF9F1C; --info-color: #CBF3F0; } /* ============================================================ VALIDATION STYLE SYSTEM OVERRIDES ============================================================ */ .validation-message { color: var(--error-color, #EA00D9) !important; font-size: 0.75rem !important; margin-top: -2px !important; margin-bottom: 2px !important; font-weight: 600 !important; display: block !important; text-align: left !important; animation: sc-validation-slide-down 0.2s ease-out; } /* Style input borders on error (target only inner control, not host container) */ fluent-text-field.invalid::part(control), fluent-text-input.invalid::part(control), fluent-text-area.invalid::part(control), fluent-number-input.invalid::part(control), select.invalid { --stroke-width: 2px !important; border-color: var(--error-color, #EA00D9) !important; box-shadow: var(--error-glow, 0 0 10px rgba(234, 0, 217, 0.45)) !important; } /* Style label text on validation error */ fluent-text-field.invalid::part(label), fluent-text-input.invalid::part(label), fluent-text-area.invalid::part(label), fluent-number-input.invalid::part(label) { color: var(--error-color, #EA00D9) !important; font-weight: 600 !important; } /* Add custom required indicator asterisk that starts matching label color */ fluent-text-field[required]::part(label)::after, fluent-text-input[required]::part(label)::after, fluent-text-area[required]::part(label)::after, fluent-number-input[required]::part(label)::after, [slot='label']::after { color: inherit !important; opacity: 0.6 !important; font-weight: bold !important; transition: color 0.2s ease, opacity 0.2s ease; } /* Turn required indicator asterisk to error color on invalid fields */ fluent-text-field.invalid[required]::part(label)::after, fluent-text-input.invalid[required]::part(label)::after, fluent-text-area.invalid[required]::part(label)::after, fluent-number-input.invalid[required]::part(label)::after, .invalid [slot='label']::after { color: var(--error-color, #EA00D9) !important; opacity: 1 !important; } @keyframes sc-validation-slide-down { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } } /* Prevent dismiss on overlay click for Fluent Dialog and Fluent Drawer */ fluent-dialog::part(overlay), fluent-drawer::part(overlay) { pointer-events: none; }