/* ===================================================================== * 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%); /* v55gc: Public CTA buttons — 對齊全站 cosmic green-cyan brand。 * 原本 galaxy 用 nebula 紫粉漸層 (#ff9be7 / #c4b0ff / #8ae5ff)， * 跟 ship-request / shipping-addr / inventory v55fj+ 設計脫節。 * customer-login「登入」button 看起來像粉紅紫，user 覺得突兀。 * 改 cosmic green-cyan 跟其他頁主 CTA 一致。 */ --public-btn-primary-bg: linear-gradient(135deg, #00ff88 0%, #38bdf8 100%); --public-btn-primary-border: rgba(78, 255, 195, 0.45); --public-btn-primary-color: #07121d; --public-btn-primary-shadow: 0 16px 32px rgba(0, 255, 136, 0.32); --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) { /* Phase B+ (2026-05-01): 中間插一層 var(--galaxy-theme-bg-image, none) 讓 admin 在 /admin-ads 上傳 homepage.theme.galaxy.bg slot 後， image-assets-loader 會注入 CSS 變數，admin 圖會疊在紫色漸層下方。沒上傳時 fallback 到 none → 維持純 CSS 漸層的原 galaxy 視覺 */ /* R501be angry-cartwright (2026-05-16): 拿掉 'fixed !important' (在 shorthand * 跟 background-attachment 各 1 處), CLAUDE.md skill mobile-lag-check 跟 * ios-safari-overflow-scroll-lock 都明確: body 加 background-attachment: fixed * 是 iOS Safari + 桌機重渲染卡頓的元兇. * User: 「首頁往下的時候滑到一半常常直接卡住完全不能動」. * 改成預設 scroll (跟著 page scroll), 視覺幾乎無感差 (gradient 仍鋪滿 viewport, * 但跟著文檔 scroll 而不是 viewport-pinned) → 解 scroll lag. * SENTINEL: galaxy-bg-no-attachment-fixed-r501be */ 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%), var(--galaxy-theme-bg-image, none), linear-gradient(180deg, var(--bg-top) 0%, var(--bg-mid) 22%, var(--bg-deep) 55%, var(--bg) 100%) !important; background-size: auto, auto, auto, cover, auto !important; background-position: center top, center top, center top, center center, center top !important; background-attachment: scroll !important; color: var(--ink); } /* 🚨 v25 FIX (2026-05-01): 之前無條件 display: none 把 .ocean-effects 整個 * 隱藏，導致 admin 上傳背景圖也看不到（user 報「背景沒換」第二層真兇）。 * 改成只在沒 inline bg-image 時才隱藏： * - 沒上傳 admin override → bg-switcher.js 把預設 fallback 設 inline bg-image * → :not 條件不命中 → 規則不套 → ocean-effects 顯示預設海底圖 * - 有上傳 → URL 不同 → 顯示用戶上傳的圖 * 真的想完全純漸層的話（galaxy 純粹 nebula）需另外加 ?bg=galaxy URL param。 */ body.galaxy .ocean-effects:not([style*="background-image"]) { 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 ---- * 🚨 v24 FIX: 只有「沒 inline bg-image」時才套這條 (= admin 沒上傳 → 用 galaxy 漸層)。 * admin 從 /admin-ads 上傳 homepage.background.v1/v2/v3 → bg-switcher.js 會 set * inline style="background-image: url(...)" → :not 跳過這 rule → 上傳的圖顯示。 * 之前 (v23 以前) 這條無條件 !important 蓋過 inline style，user 上傳完仍然不變 * → 「背景沒換」bug 來源。 */ body.galaxy .underwater-bg:not([style*="background-image"]), body.galaxy .home-hero-bg:not([style*="background-image"]), body.galaxy [data-image-slot-bg*="homepage.background"]:not([style*="background-image"]), body.galaxy [data-image-slot-bg*="underwater"]:not([style*="background-image"]) { 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; }