/* public/css/bg-asteroids.css - asteroid visuals (REPLACEMENT) */ /* ---- Full-viewport overlay (created by JS for full mode) ---- */ .kq-bg-asteroids-overlay { position: fixed; inset: 0; width: 100vw; height: 100vh; z-index: 0; /* low: content should sit above */ pointer-events: none; overflow: hidden; /* space / galaxy background */ background: radial-gradient(circle at 20% 10%, rgba(140,40,180,0.06), transparent 12%), radial-gradient(circle at 80% 70%, rgba(10,120,200,0.03), transparent 10%), linear-gradient(180deg,#020317,#021021 60%); linear-gradient(160deg, rgba(8,6,16,0.04), rgba(30,18,60,0.06)); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* Canvas fills overlay */ .kq-bg-asteroids-overlay .kq-bg-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; pointer-events: none; opacity: 0.82; /* dim so content above remains readable */ } /* Attached overlays use same visual */ .kq-bg-asteroids-overlay[data-kq-bg-attached="1"] { background: radial-gradient(circle at 20% 10%, rgba(140,40,180,0.06), transparent 12%), radial-gradient(circle at 80% 70%, rgba(10,120,200,0.03), transparent 10%), linear-gradient(180deg,#020317,#021021 60%); } /* Section (scoped) visuals only when explicitly set mode=section */ .kq-bg-section.kq-bg-asteroids[data-kq-bg-mode="section"] { background: radial-gradient(circle at 20% 10%, rgba(140,40,180,0.045), transparent 12%), radial-gradient(circle at 80% 70%, rgba(10,120,200,0.02), transparent 10%), linear-gradient(180deg,#020317,#021021 60%); color: #e9f3ff; } .kq-bg-section.kq-bg-asteroids[data-kq-bg-mode="section"] .kq-bg-canvas { opacity: 0.88; } /* IMPORTANT: keep section wrapper transparent for full/attached modes so overlay visuals show through */ .kq-bg-section.kq-bg-asteroids, .kq-bg-section.kq-bg-asteroids[data-kq-bg-mode="full"], .kq-bg-section.kq-bg-asteroids[data-kq-bg-mode="attached"] { background: transparent !important; color: inherit; } /* Rocket (jet) — visuals applied in all modes */ .kq-bg-asteroids-overlay .kq-bg-rocket, .kq-bg-section.kq-bg-asteroids[data-kq-bg-mode="section"] .kq-bg-rocket, .kq-bg-section.kq-bg-asteroids[data-kq-bg-mode="attached"] .kq-bg-rocket { width:56px; height:22px; display:flex; align-items:center; justify-content:center; pointer-events: auto; /* allow drag on rocket element */ user-select: none; touch-action: none; opacity: 0.96; transform-origin: 50% 50%; } /* Jet art */ .kq-bg-asteroids-overlay .kq-bg-rocket .r-shape, .kq-bg-section.kq-bg-asteroids .kq-bg-rocket .r-shape { width:0;height:0; border-left:36px solid rgba(255,255,255,0.95); border-top:12px solid transparent; border-bottom:12px solid transparent; filter: drop-shadow(0 6px 20px rgba(0,0,0,0.25)); } .kq-bg-asteroids-overlay .kq-bg-rocket .r-tail, .kq-bg-section.kq-bg-asteroids .kq-bg-rocket .r-tail { position:absolute; left:-12px; width:18px; height:10px; border-radius:10px; background:linear-gradient(90deg,#ffb84d,#fff1c2); opacity:0.95; transform:translateX(-50%); } .kq-bg-asteroids-overlay .kq-bg-rocket { cursor: grab; } .kq-bg-asteroids-overlay .kq-bg-rocket.kq-dragging { cursor: grabbing; } /* ensure leaderboard and other content sit above overlay */ .kq-bg-section .kq-bg-content, .kq-leaderboard { position: relative; z-index: 100 !important; /* ensure content is on top */ } /* keep WP adminbar above overlay for debugging */ #wpadminbar { z-index: 100000 !important; position: relative; } /* responsive tweak */ @media (max-width:760px) { .kq-bg-asteroids-overlay .kq-bg-rocket, .kq-bg-section.kq-bg-asteroids .kq-bg-rocket { left: 6% !important; transform: scale(0.92); } } /* ========== THEME-FIX: temporary style overrides while overlay is active ========== */ /* These only apply when .kq-bg-active is present on (set by JS). Remove this block if you switch themes. */ .kq-bg-active .single-page-detail, .kq-bg-active .single-news, .kq-bg-active .news-content, .kq-bg-active .site-main, .kq-bg-active #primary, .kq-bg-active .site-content, .kq-bg-active .entry-content, .kq-bg-active .page-content { /* neutralize theme block backgrounds so overlay sits visually above page background */ background-color: transparent !important; background-image: none !important; box-shadow: none !important; /* subtle dark translucent layer so text remains readable without brightening */ background: rgba(0,0,0,0.03) !important; /* neutralize immediate child panels that might be solid-colored */ .kq-bg-active .single-page-detail > *, .kq-bg-active .single-news > *, .kq-bg-active .news-content > * { background-color: transparent !important; background-image: none !important; } /* keep adminbar visible */ .kq-bg-active #wpadminbar { z-index: 100000 !important; position: relative !important; }