/* ============================================================ Footer Heart Arcade Shooter — Easter Egg Loaded unconditionally site-wide (see functions.php), fully inert until the footer heart is clicked. Self-contained: own keyframe names, own z-index outlier, own copy of anything borrowed from elsewhere on the site — this theme's "duplicate, don't share" convention for anything feature-specific. ============================================================ */ /* ── Footer heart trigger — lives inside .footer-text / .ha-footer's existing

, must be visually identical to the old plain-text heart at rest on every device (button renders in markup unconditionally, JS only arms it with .is-armed on hover-capable devices). ────────── */ .footer-heart-trigger { background: none; border: none; padding: 0; margin: 0; font: inherit; color: inherit; line-height: inherit; cursor: default; -webkit-appearance: none; appearance: none; } .footer-heart-trigger.is-armed { cursor: pointer; transition: transform 0.2s ease, color 0.2s ease; display: inline-block; } .footer-heart-trigger.is-armed:hover, .footer-heart-trigger.is-armed:focus-visible { color: #e6a533; transform: scale(1.25); } /* ── Root overlay — a single fixed container appended to only while the game is mounted. z-index is a deliberate, large outlier: it must clear WordPress core's #wpadminbar (z-index 99999, not accounted for anywhere else in this theme) with real margin, on top of every sitewide/home-alt-local stacking value already in use (highest existing value found anywhere in the theme is 1001). ───── */ #eeg-root { position: fixed; inset: 0; z-index: 999999999; font-family: 'Barlow Condensed', sans-serif; } /* Real site chrome is suppressed (not removed) for the session so it can't be reached/tabbed into behind the overlay, and restored in one guaranteed step by removing this single class on cleanup. */ body.eeg-active .nav-hamburger, body.eeg-active .nav-menu-wrap, body.eeg-active .ha-hamburger, body.eeg-active .ha-menu, body.eeg-active #wpadminbar { visibility: hidden !important; pointer-events: none !important; } /* ── Game canvas — pure rendering surface, never receives pointer events (this game is keyboard-only by design; #eeg-root itself, left at the pointer-events default, is what blocks stray clicks from reaching real page content while mounted). Reasserts display:block the same way about-constellation.js's resizeCanvas() does, guarding against the documented Safari quirk where reassigning canvas.width/height elsewhere in this theme has silently set display:none. ─────────────────────────────────────── */ #eeg-canvas { position: fixed; inset: 0; width: 100%; height: 100%; display: block; pointer-events: none; background: transparent; } /* ── Ship clone — the activation-sequence element that grows out of the real heart button and becomes the player ship. Positioned via inline left/top/width/height written by JS from the real button's live getBoundingClientRect(), animated via the Web Animations API (a deliberate one-shot exception to this codebase's per-frame-lerp convention, justified for a single intro transform, not a continuous simulation loop). ──────────────────────────────────── */ .eeg-ship-clone { position: fixed; pointer-events: none; line-height: 1; will-change: transform; z-index: 2; } /* ── HUD — persistent logo + LED score readout, painted after the canvas in DOM order so it's never covered by gameplay regardless of what the canvas draws. Deliberately its own independent logo (not a dependency on the real site header staying visible/in any particular scroll state — see plan doc for why). ─────────────── */ .eeg-hud { position: fixed; top: 24px; left: 24px; z-index: 3; display: flex; align-items: center; gap: 18px; pointer-events: none; } .eeg-hud-logo { height: 34px; width: auto; display: block; } .eeg-hud-logo .ha-logo-dot { fill: #e6a533; } .eeg-hud-score { font-family: 'Courier New', ui-monospace, monospace; font-weight: 700; font-size: 22px; letter-spacing: 3px; color: #ff9d2e; text-shadow: 0 0 6px rgba(255, 157, 46, 0.85), 0 0 14px rgba(255, 157, 46, 0.5); background: rgba(7, 3, 11, 0.6); border: 1px solid rgba(255, 157, 46, 0.35); border-radius: 4px; padding: 6px 12px; } /* ── Instructions / color-pick panel — slides in from the left (mirrors the heart's own position on the right), same easing curve this codebase already standardizes on for every latched CSS-transition reveal (intro/work-section reveals on home-alt). ─────────────────── */ .eeg-panel { position: fixed; top: 0; left: 0; bottom: 0; width: min(360px, 88vw); z-index: 4; background: #07030b; border-right: 1px solid rgba(230, 165, 51, 0.25); padding: 40px 32px; display: flex; flex-direction: column; gap: 28px; color: #f9f5ed; transform: translateX(-100%); transition: transform 0.8s cubic-bezier(0.22, 1, 0.36, 1); overflow-y: auto; } .eeg-panel.is-open { transform: translateX(0); } .eeg-panel h2 { font-size: 32px; font-weight: 800; text-transform: uppercase; color: #e6a533; margin: 0; } .eeg-panel-controls { display: flex; flex-direction: column; gap: 10px; font-size: 16px; font-weight: 700; text-transform: uppercase; } .eeg-panel-controls span { color: #e6a533; margin-right: 8px; } .eeg-swatches { display: flex; gap: 14px; flex-wrap: wrap; } .eeg-swatch { width: 40px; height: 40px; border-radius: 50%; border: 3px solid transparent; background: var(--eeg-color, #e6a533); cursor: pointer; padding: 0; transition: transform 0.2s ease, border-color 0.2s ease; } .eeg-swatch:hover { transform: scale(1.1); } .eeg-swatch.is-selected { border-color: #f9f5ed; transform: scale(1.15); } .eeg-launch-btn { font-family: 'Barlow Condensed', sans-serif; font-weight: 800; text-transform: uppercase; font-size: 20px; letter-spacing: 1px; background: #e6a533; color: #07030b; border: none; border-radius: 4px; padding: 14px 24px; cursor: pointer; transition: transform 0.2s ease, background 0.2s ease; margin-top: auto; } .eeg-launch-btn:hover { transform: scale(1.03); background: #f9c368; } /* ── Hit / destroy reactions on real page content ────────────────── */ @keyframes eeg-shake { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-4px) rotate(-0.5deg); } 75% { transform: translateX(4px) rotate(0.5deg); } } .eeg-hit { animation: eeg-shake 0.15s ease-in-out; } .eeg-destroyed { transition: opacity 0.4s ease, transform 0.4s ease; opacity: 0 !important; transform: scale(0.7) rotate(8deg); pointer-events: none !important; } /* ── Fullscreen game-over / leaderboard ceremony screen — the real closing beat. Opaque (not floated over live page content), so it genuinely reads as "the game has run its course." Reuses the same animated multi-stop gradient treatment already established elsewhere on this site (home-alt's orb-bg, about's ambient glow) as its own independent copy, per this theme's "duplicate, don't share" convention — named distinctly (eeg-colorFlow) to avoid any global @keyframes collision with those other copies. ───────────────────── */ @keyframes eeg-colorFlow { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } .eeg-gameover { position: fixed; inset: 0; z-index: 5; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 20px; text-align: center; color: #f9f5ed; background: #07030b; } .eeg-gameover::before { content: ''; position: absolute; inset: 0; background: linear-gradient(135deg, #e8321f, #a428d4, #0d5fa3, #0a9e73, #f56000, #e8321f); background-size: 400% 400%; animation: eeg-colorFlow 20s ease infinite; opacity: 0.25; z-index: -1; } .eeg-gameover-title { font-size: clamp(56px, 12vw, 140px); font-weight: 800; text-transform: uppercase; color: #e6a533; line-height: 0.9; margin: 0; } .eeg-gameover-score { font-family: 'Courier New', ui-monospace, monospace; font-size: clamp(20px, 3vw, 32px); letter-spacing: 3px; color: #ff9d2e; text-shadow: 0 0 8px rgba(255, 157, 46, 0.7); } .eeg-gameover-newhigh { font-size: 16px; font-weight: 800; letter-spacing: 2px; text-transform: uppercase; color: #0a9e73; } .eeg-gameover-form { display: flex; gap: 10px; align-items: center; } .eeg-gameover-form input[type="text"] { font-family: 'Barlow Condensed', sans-serif; font-weight: 700; text-transform: uppercase; font-size: 18px; letter-spacing: 2px; background: rgba(249, 245, 237, 0.08); border: 1px solid rgba(230, 165, 51, 0.4); color: #f9f5ed; border-radius: 4px; padding: 10px 14px; width: 160px; text-align: center; } .eeg-gameover-leaderboard { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; font-family: 'Courier New', ui-monospace, monospace; font-size: 15px; letter-spacing: 1px; min-width: 260px; } .eeg-gameover-leaderboard li { display: flex; justify-content: space-between; gap: 24px; color: rgba(249, 245, 237, 0.75); } .eeg-gameover-leaderboard li.is-you { color: #e6a533; font-weight: 700; } .eeg-gameover-continue { font-size: 13px; letter-spacing: 2px; text-transform: uppercase; color: rgba(249, 245, 237, 0.5); margin-top: 12px; }