/* UX-S hero arcade — the hero section's media is a Space Invaders game. Activated by invaders.js adding .uxs-arcade to . Without JS (or with reduced motion) the original hero renders untouched. */ /* The hero copy stays — the game replaces the visual column. */ html.uxs-arcade .hero-visual { display: none; } html.uxs-arcade .hero-grid { pointer-events: none; position: relative; z-index: 3; align-items: end; } html.uxs-arcade .hero-copy { padding-bottom: 1.6rem; } @media (max-width: 900px) { html.uxs-arcade .hero-copy { padding-bottom: 6.5rem; } } html.uxs-arcade .hero-copy a, html.uxs-arcade .hero-copy button { pointer-events: auto; } /* Compact copy lockup — the game is the hero media, the text is the caption. Two-line headline, short description, tight rhythm. */ html.uxs-arcade .hero-copy .eyebrow { margin: 0 0 1.1rem; } html.uxs-arcade .hero h1 { max-width: 24em; font-size: clamp(1.6rem, 2.15vw, 2.1rem); line-height: 1.22; letter-spacing: -0.035em; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; } html.uxs-arcade .hero-copy > p { max-width: 46em; margin: 1rem 0 0; font-size: 0.95rem; line-height: 1.65; color: #a9a9a9; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; } html.uxs-arcade .hero-actions { margin-top: 1.7rem; gap: 0.6rem; } @media (max-width: 900px) { html.uxs-arcade .hero h1 { font-size: clamp(1.45rem, 4.6vw, 1.8rem); -webkit-line-clamp: 3; } html.uxs-arcade .hero-copy > p { -webkit-line-clamp: 3; } } /* ---------- game layer ---------- */ .uxs-arcade-layer { position: absolute; inset: 0; z-index: 2; touch-action: pan-y; cursor: crosshair; } .uxs-arcade-layer canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; transition: opacity 0.35s ease; } .uxs-arcade-layer.is-paused canvas { opacity: 0.3; } /* Cinematic wash so the headline reads over the action. */ .uxs-arcade-layer::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(97deg, #050505db 0%, #05050591 26%, #05050500 52%); } @media (max-width: 900px) { .uxs-arcade-layer::after { background: linear-gradient(180deg, #050505e8 8%, #050505a6 42%, #05050514 70%); } } /* ---------- HUD ---------- */ .uxs-hud { position: absolute; inset: 0; z-index: 2; pointer-events: none; font: 500 0.62rem var(--font-geist-mono, ui-monospace, monospace); letter-spacing: 0.14em; text-transform: uppercase; color: #a9a9a9; } /* Stats — top right, clear of the copy column. */ .uxs-hud-row { position: absolute; top: 6.6rem; right: clamp(1.4rem, 4vw, 4rem); display: flex; flex-direction: column; align-items: flex-end; gap: 0.6rem; text-align: right; } .uxs-hud-row p { margin: 0; } .uxs-hud-score strong, .uxs-hud-wave strong { color: var(--off, #f7f7f5); font-weight: 500; margin-left: 0.55em; } .uxs-hud-score span + span, .uxs-hud-wave span + span { margin-left: 1.5em; } .uxs-hud-lives { display: inline-flex; gap: 0.45em; margin-left: 0.9em; vertical-align: -0.14em; } .uxs-hud-lives svg { width: 15px; height: 11px; display: block; opacity: 0.9; } .uxs-hud-lives svg.is-spent { opacity: 0.22; } /* Bottom line — attract hint or controls. */ .uxs-hud-hint { position: absolute; bottom: 4.6rem; right: clamp(1.4rem, 4vw, 4rem); left: auto; max-width: 340px; text-align: right; color: #8f8f8f; animation: uxs-hint-pulse 2.6s ease-in-out infinite; } .uxs-hud-hint b { color: var(--off, #f7f7f5); font-weight: 500; } @keyframes uxs-hint-pulse { 0%, 100% { opacity: 0.55; } 50% { opacity: 1; } } /* Center banner — wave changes, game over. Display voice: the site's own face. */ .uxs-hud-banner { position: absolute; top: 44%; left: 0; right: 0; text-align: center; transform: translateY(-50%); font-family: inherit; font-size: clamp(1.5rem, 3.2vw, 2.6rem); font-weight: 500; letter-spacing: 0.22em; text-transform: uppercase; color: var(--off, #f7f7f5); text-shadow: 0 2px 24px #050505; opacity: 0; transition: opacity 0.45s ease; } .uxs-hud-banner.is-visible { opacity: 1; } .uxs-hud-banner small { display: block; margin-top: 1.1em; font: 500 0.62rem var(--font-geist-mono, ui-monospace, monospace); letter-spacing: 0.18em; color: #8f8f8f; } /* ---------- overlays: buttons + panels (above the copy) ---------- */ .uxs-overlays { position: absolute; inset: 0; z-index: 4; pointer-events: none; font: 500 0.62rem var(--font-geist-mono, ui-monospace, monospace); letter-spacing: 0.14em; text-transform: uppercase; } .uxs-controls { position: absolute; right: clamp(1.4rem, 4vw, 4rem); bottom: 1.45rem; display: flex; gap: 0.55rem; } .uxs-btn { pointer-events: auto; appearance: none; background: #ffffff10; border: 1px solid #ffffff2b; color: #e8e8e3; border-radius: 99px; padding: 0.55rem 1rem; font: inherit; letter-spacing: inherit; text-transform: inherit; cursor: pointer; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); transition: background 0.25s ease, border-color 0.25s ease; } .uxs-btn:hover { background: #ffffff22; border-color: #ffffff4d; } .uxs-btn:focus-visible { outline: 1px solid #ffffffad; outline-offset: 3px; } .uxs-btn.is-hidden { display: none; } /* Panels — pause / high scores / initials entry. */ .uxs-panel { pointer-events: auto; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: min(340px, 88vw); background: #0d0d0de6; border: 1px solid #ffffff1f; border-radius: 1.1rem; padding: 1.7rem 1.7rem 1.5rem; backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); box-shadow: 0 24px 80px #0000006e; text-align: center; display: none; } .uxs-panel.is-open { display: block; } .uxs-panel h3 { margin: 0 0 0.4rem; font-family: inherit; font-size: 1.05rem; font-weight: 500; letter-spacing: 0.26em; color: var(--off, #f7f7f5); } .uxs-panel-sub { margin: 0 0 1.2rem; color: #8f8f8f; } .uxs-panel .uxs-btn + .uxs-btn { margin-left: 0.5rem; } .uxs-panel-actions { margin-top: 1.3rem; } /* score table */ .uxs-scores-list { list-style: none; margin: 0 0 0.2rem; padding: 0; text-align: left; } .uxs-scores-list li { display: flex; align-items: baseline; gap: 1.1em; padding: 0.52rem 0.1rem; border-bottom: 1px dashed #ffffff1a; color: #b8b8b8; } .uxs-scores-list li:first-child { color: var(--off, #f7f7f5); } .uxs-scores-list .uxs-rank { width: 1.6em; color: #6d6d6d; } .uxs-scores-list .uxs-name { letter-spacing: 0.34em; } .uxs-scores-list .uxs-pts { margin-left: auto; } .uxs-scores-list .uxs-wv { color: #6d6d6d; } .uxs-scores-empty { color: #6d6d6d; padding: 0.8rem 0 0.4rem; } /* initials entry */ .uxs-initials input { width: 5.4ch; margin: 0.5rem 0 0.2rem; padding: 0.42rem 0 0.42rem 0.55ch; text-align: center; font: 600 1.35rem var(--font-geist-mono, ui-monospace, monospace); letter-spacing: 0.55ch; text-transform: uppercase; color: #fff; background: #ffffff0d; border: 1px solid #ffffff2b; border-radius: 0.55rem; outline: none; caret-color: #fff; } .uxs-initials input:focus { border-color: #ffffff70; } /* ---------- the dash: ship <-> journey traveler ---------- */ html.uxs-ship-docked .journey-path__traveler { opacity: 0 !important; } .uxs-dash { position: fixed; top: 0; left: 0; z-index: 40; width: 58px; height: 43px; margin: -22px 0 0 -29px; pointer-events: none; will-change: transform; filter: drop-shadow(0 5px 7px #00000047); } .uxs-dash svg { width: 100%; height: 100%; display: block; overflow: visible; } .uxs-dash .uxs-dash-trail { position: absolute; top: 50%; right: 46px; width: 26px; height: 16px; transform: translateY(-50%); } .uxs-dash .uxs-dash-trail i { position: absolute; right: 0; width: 100%; height: 1px; border-radius: 2px; background: linear-gradient(90deg, #0000, #c9c9c7d9); } .uxs-dash .uxs-dash-trail i:first-child { top: 2px; width: 70%; } .uxs-dash .uxs-dash-trail i:nth-child(2) { top: 7px; } .uxs-dash .uxs-dash-trail i:last-child { top: 13px; width: 70%; } /* ---------- small screens ---------- */ @media (max-width: 900px) { .uxs-hud-row { top: 5.6rem; } .uxs-hud-hint { bottom: 4.4rem; left: 0; right: 0; max-width: none; text-align: center; padding: 0 1.2rem; } .uxs-controls { right: 50%; transform: translateX(50%); } }