/* ===================================================================== * Galaxy / Lumina theme override for all NON-ADMIN public pages. * * Loads AFTER styles.css on 23 frontend HTML files. Admin pages do NOT * include this file so they keep the cyan/neon-green cosmic theme. * * Applied via (higher specificity than :root). * ===================================================================== */ /* ---- Palette tokens (override cosmic cyan/green → galaxy nebula) ---- */ body.galaxy { --bg: #0a0520; --bg-deep: #140a36; --bg-mid: #231355; --bg-top: #2f1d66; --card: rgba(35, 19, 85, 0.72); --card-hi: rgba(46, 28, 107, 0.85); --ink: #f6f2ff; --muted: rgba(246, 242, 255, 0.72); --text: var(--ink); --text-muted: var(--muted); --text-primary: var(--ink); --accent: #ff9be7; --accent-soft: rgba(255, 155, 231, 0.18); --accent-cyan: #8ae5ff; --accent-gold: #e9b8ff; --border: rgba(196, 176, 255, 0.22); --line: var(--border); --nebula: linear-gradient(135deg, #ff9be7 0%, #c4b0ff 50%, #8ae5ff 100%); /* Public CTA buttons */ --public-btn-primary-bg: linear-gradient(135deg, #ff9be7 0%, #c4b0ff 50%, #8ae5ff 100%); --public-btn-primary-border: rgba(233, 184, 255, 0.45); --public-btn-primary-color: #1b0f42; --public-btn-primary-shadow: 0 16px 32px rgba(233, 184, 255, 0.28); --public-btn-ghost-bg: rgba(35, 19, 85, 0.72); --public-btn-ghost-border: rgba(196, 176, 255, 0.30); --public-btn-ghost-color: #f6f2ff; --public-btn-ghost-shadow: 0 12px 30px rgba(32, 8, 60, 0.35); --public-btn-chip-bg: rgba(35, 19, 85, 0.85); --public-btn-chip-border: rgba(196, 176, 255, 0.30); } /* ---- Body backdrop: replace any solid / underwater-bg with galaxy nebula ---- * NOTE: styles.css line 46135 has * body:has(.page.home-page--catalog) { background: #164d76 !important } * specificity (0,2,0). We beat it with (0,3,0) + !important: * body.galaxy:has(.page.home-page--catalog) etc. Plus explicit body.galaxy. */ body.galaxy, body.galaxy:has(.page.home-page--catalog), body.frontend-theme-default.galaxy:has(.page.home-page--catalog) { background: radial-gradient(ellipse 80% 60% at 50% -8%, rgba(196, 176, 255, 0.38), transparent 70%), radial-gradient(ellipse 70% 40% at 80% 15%, rgba(255, 155, 231, 0.22), transparent 65%), radial-gradient(ellipse 70% 45% at 15% 80%, rgba(138, 229, 255, 0.22), transparent 65%), linear-gradient(180deg, var(--bg-top) 0%, var(--bg-mid) 22%, var(--bg-deep) 55%, var(--bg) 100%) fixed !important; background-attachment: fixed !important; color: var(--ink); } /* Hide the underwater photo layer (.ocean-effects) entirely on galaxy — * it's a fixed-position
that stretches a ocean image edge-to-edge * using !important so we must kill it explicitly. */ body.galaxy .ocean-effects { display: none !important; background-image: none !important; } /* Hero carousel banner may have its own high-specificity bg — flatten to glass */ body.galaxy .home-hero-catalog, body.galaxy .home-hero-catalog__banner, body.galaxy .banner.carousel.home-hero-catalog__banner, body.galaxy .banner.carousel { background: radial-gradient(ellipse 80% 70% at 50% 0%, rgba(196, 176, 255, 0.28), transparent 75%), linear-gradient(180deg, rgba(35, 19, 85, 0.8), rgba(20, 10, 54, 0.9)) !important; border: 1px solid rgba(196, 176, 255, 0.3) !important; } /* Mode-section cards — often set via body:has() selectors */ body.galaxy .home-mode-section, body.galaxy .home-mode-grid, body.galaxy .home-mode-head { background: transparent !important; } body.galaxy .home-mode-head h2, body.galaxy .home-mode-head .section-title { color: var(--ink) !important; } /* ---- Cards ---- */ body.galaxy .card, body.galaxy .pool-card, body.galaxy .section-card, body.galaxy .dashboard-card, body.galaxy .panel { background: linear-gradient(180deg, rgba(35, 19, 85, 0.75), rgba(20, 10, 54, 0.80)) !important; border-color: rgba(196, 176, 255, 0.28) !important; box-shadow: 0 14px 32px rgba(32, 8, 60, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.06) !important; color: var(--ink); } /* ---- Primary buttons / CTAs ---- */ body.galaxy .btn-primary, body.galaxy button[type="submit"], body.galaxy .public-btn-primary, body.galaxy .cta-primary { background: var(--public-btn-primary-bg) !important; color: var(--public-btn-primary-color) !important; border-color: var(--public-btn-primary-border) !important; box-shadow: var(--public-btn-primary-shadow) !important; } /* ---- Links / accents ---- */ body.galaxy a { color: var(--accent-cyan); } body.galaxy a:hover { color: var(--accent); } /* ---- Form inputs — dark glass ---- */ body.galaxy input[type="text"], body.galaxy input[type="email"], body.galaxy input[type="password"], body.galaxy input[type="search"], body.galaxy input[type="number"], body.galaxy input[type="tel"], body.galaxy textarea, body.galaxy select { background: rgba(14, 7, 38, 0.65) !important; border-color: rgba(196, 176, 255, 0.30) !important; color: var(--ink) !important; } body.galaxy input::placeholder, body.galaxy textarea::placeholder { color: var(--text-muted); } /* ---- Hero images / backgrounds inherit galaxy bg if underwater-bg-* missing ---- */ body.galaxy .underwater-bg, body.galaxy .home-hero-bg, body.galaxy [data-image-slot-bg*="homepage.background"], body.galaxy [data-image-slot-bg*="underwater"] { background-image: none !important; background-color: transparent !important; } /* ---- Sparkle decoration layer (opt-in via
) ---- */ body.galaxy .galaxy-stars { position: fixed; inset: 0; pointer-events: none; z-index: 0; overflow: hidden; } body.galaxy .galaxy-stars::before, body.galaxy .galaxy-stars::after { content: ""; position: absolute; inset: 0; background-image: radial-gradient(1px 1px at 12% 18%, rgba(255,255,255,0.85), transparent 60%), radial-gradient(1px 1px at 28% 68%, rgba(255,255,255,0.7), transparent 60%), radial-gradient(1.5px 1.5px at 52% 42%, rgba(233,184,255,0.9), transparent 60%), radial-gradient(1px 1px at 78% 14%, rgba(138,229,255,0.8), transparent 60%), radial-gradient(1px 1px at 88% 82%, rgba(255,255,255,0.7), transparent 60%), radial-gradient(1.5px 1.5px at 18% 92%, rgba(196,176,255,0.8), transparent 60%), radial-gradient(1px 1px at 62% 22%, rgba(138,229,255,0.75), transparent 60%); animation: galaxy-twinkle 4s ease-in-out infinite; } body.galaxy .galaxy-stars::after { animation-delay: 2s; transform: rotate(30deg) scale(1.1); } @keyframes galaxy-twinkle { 0%, 100% { opacity: 0.55; } 50% { opacity: 1.0; } } @media (prefers-reduced-motion: reduce) { body.galaxy .galaxy-stars::before, body.galaxy .galaxy-stars::after { animation: none; } } /* ---- Scrollbar (webkit) tuned to nebula ---- */ body.galaxy::-webkit-scrollbar { width: 10px; } body.galaxy::-webkit-scrollbar-track { background: #140a36; } body.galaxy::-webkit-scrollbar-thumb { background: linear-gradient(180deg, #c4b0ff, #8ae5ff); border-radius: 999px; } /* ---- Theme-color fallback for outer Chrome chrome (html[data-theme="galaxy"]) ---- */ html[data-theme="galaxy"] { color-scheme: dark; }