/* ============================================================ RallyAlly — Light Theme Overlay Activated when Load AFTER style.css / customize_v2.css / customize_v2_roster.css / customize_v3.css Zero impact on original dark theme — purely additive variable override. ============================================================ */ html.light-theme { /* ── style.css Core Palette ────────────────────────────── */ --rally-plum: #F5F2EB; --rally-plum-light: #FFFFFF; --rally-plum-dark: #EBE5D8; --cloud-dancer: #2D2520; --graphite: #5C5F66; --persimmon: #e06d00; --persimmon-hover: #cc6600; --persimmon-ghost: rgba(224, 109, 0, 0.08); /* ── style.css Functional ──────────────────────────────── */ --white-pure: #2D2520; --black-pure: #FFFFFF; --graphite-light: #6B6E75; --graphite-fade: rgba(80, 83, 90, 0.10); --plum-shadow: rgba(0, 0, 0, 0.08); /* ── customize_v2.css / customize_v2_roster.css / customize_v3.css ── */ --cv2-bg: #F8F5F0; --cv2-surface: #FFFFFF; --cv2-surface-high: #F0EBE3; --cv2-border: rgba(80, 83, 90, 0.15); --cv2-border-fade: rgba(80, 83, 90, 0.08); --cv2-on-surface: #2D2520; --cv2-text-light: #2D2520; --cv2-text-muted: #6B6E75; --cv2-primary: #e06d00; --cv2-primary-hover: #cc6600; --cv2-primary-ghost: rgba(224, 109, 0, 0.08); --cv2-secondary: #7C3AED; --cv2-accent: #0D9488; --cv2-success: #16a34a; --cv2-error: #DC2626; } /* ── Customizer inputs on light surfaces ─────────────────── The base customizer stylesheet uses dark translucent fills. In light mode we need explicit field backgrounds for roster, quantity, and helper inputs. */ html.light-theme .cv2-field :is(select, input[type="text"]), html.light-theme .cv2-roster-table input, html.light-theme .cv2-material-card input, html.light-theme .ra-size-card input, html.light-theme .ra-dynamic-component .cv2-form-input { background: #FFFFFF; border-color: rgba(80, 83, 90, 0.22); color: #2D2520; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.65); } /* Quantity cells should stay clean white in the light theme. The base customizer uses a dark translucent fill, which becomes a muddy gray here. */ html.light-theme .cv2-size-cell { background: #FFFFFF; border-color: rgba(80, 83, 90, 0.22); } html.light-theme .cv2-size-cell:hover, html.light-theme .cv2-size-cell.selected { background: var(--cv2-primary-ghost); border-color: var(--cv2-primary); } html.light-theme .cv2-field :is(select, input[type="text"])::placeholder, html.light-theme .cv2-roster-table input::placeholder, html.light-theme .cv2-material-card input::placeholder, html.light-theme .ra-size-card input::placeholder, html.light-theme .ra-dynamic-component .cv2-form-input::placeholder { color: #8A8178; } html.light-theme .cv2-field :is(select, input[type="text"]):focus, html.light-theme .cv2-roster-table input:focus, html.light-theme .cv2-material-card input:focus, html.light-theme .ra-size-card input:focus, html.light-theme .ra-dynamic-component .cv2-form-input:focus { border-color: var(--cv2-primary); box-shadow: 0 0 0 3px rgba(224, 109, 0, 0.14); } /* ── Homepage hero carousel ──────────────────────────────── The carousel uses photographic, predominantly dark backgrounds. Keep its foreground inverted when the rest of the site switches to light mode so the global light-theme text variables do not reduce contrast here. ───────────────────────────────────────────────────────── */ html.light-theme .hero-slide-title { color: #FFFFFF; text-shadow: 0 2px 14px rgba(26, 16, 32, 0.72); } html.light-theme .hero-slide-subtitle { color: rgba(255, 255, 255, 0.92); text-shadow: 0 1px 10px rgba(26, 16, 32, 0.72); } html.light-theme .hero-carousel-section .btn-primary, html.light-theme .hero-carousel-section .btn-outline { color: #FFFFFF; } html.light-theme .hero-carousel-section .btn-outline { border-color: rgba(255, 255, 255, 0.9); } html.light-theme .hero-carousel-section .btn-outline:hover { color: #2D2520; background: #FFFFFF; } /* ── Photography-led page banners ────────────────────────── Subpage heroes and shop/category banners use dark photography (and, in several cases, a dark overlay). They inherit the light-theme foreground variables unless explicitly kept inverted. Restrict this to banners with an inline background image so ordinary light-surface page sections keep their dark text. */ html.light-theme .page-hero[style*="background-image"] :is(h1, h2, h3, h4, h5, h6, p, a, .btn), html.light-theme .page-banner[style*="background-image"] :is(h1, h2, h3, h4, h5, h6, p, a, .btn), html.light-theme .shop-banner[style*="background-image"] :is(h1, h2, h3, h4, h5, h6, p, a, .btn) { color: #FFFFFF !important; text-shadow: 0 2px 14px rgba(26, 16, 32, 0.72); } html.light-theme .page-hero[style*="background-image"] .hero-eyebrow { color: var(--persimmon) !important; } /* ============================================================ Theme Toggle Button — Floating palette circle (bottom-right) Visible on all pages, independent of header injection. ============================================================ */ .theme-toggle-btn { position: fixed; bottom: 24px; right: 24px; z-index: 9999; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--graphite-fade, rgba(80,83,90,0.20)); background: var(--rally-plum-light, #382C4F); color: var(--cloud-dancer, #F4EFE7); cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all var(--dur-fast, 150ms) var(--ease-out, ease); box-shadow: 0 2px 12px var(--plum-shadow, rgba(26,16,32,0.30)); } .theme-toggle-btn:hover { border-color: var(--persimmon, #ff7b00); color: var(--persimmon, #ff7b00); transform: scale(1.08); } .theme-toggle-btn .material-symbols-outlined { font-size: 22px; font-variation-settings: 'FILL' 0, 'wght' 400; } /* ── Header inline toggle button (components.js injected) ── */ .header-theme-btn { background: none; border: 1px solid var(--graphite-fade, rgba(80,83,90,0.20)); border-radius: 8px; width: 38px; height: 38px; display: flex; align-items: center; justify-content: center; cursor: pointer; color: var(--cloud-dancer, #F4EFE7); transition: all var(--dur-fast, 150ms) var(--ease-out, ease); flex-shrink: 0; } .header-theme-btn:hover { border-color: var(--persimmon, #ff7b00); color: var(--persimmon, #ff7b00); } .header-theme-btn .material-symbols-outlined { font-size: 20px; font-variation-settings: 'FILL' 0, 'wght' 400; }