/* * Game Atlas (/atlas) — styles for BOTH the static, JS-less fallback catalogue * and the container the live 3D world (src/ui/atlas/) mounts into. Layered on * /legal/legal.css (typography, .wrap, .doc-head, .lead, footer). The fallback * is a spatial, colour-clustered card layout — deliberately not a plain table — * so it reads as a map even without WebGL. */ /* ── the stage ─────────────────────────────────────────────────────── */ /* Full-bleed band (like the workshop office) so the 3D world can breathe. */ .atlas-stage { width: 100vw; margin-left: calc(50% - 50vw); padding: 8px 0 24px; } /* When the live scene mounts, the stage is marked .enhanced: the static fallback is visually removed and the scene host (prepended by src/pages/atlas.jsx) takes over. Without JS / WebGL the fallback simply stays. NB: visually-hidden — NOT display:none — so the full genre catalogue stays in the accessibility tree for screen-reader users (the 3D scene is pointer-only and marked aria-hidden). */ .atlas-stage.enhanced .atlas-fallback { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; } .atlas-scene-host { display: block; } /* Pre-paint: avoid a flash of the static catalogue before the 3D mounts. The inline hint in the page adds .atlas-will-enhance to on capable desktops (WebGL + non-touch width) BEFORE first paint. Until the live scene marks the stage .enhanced, collapse the card catalogue and show the scene band's own backdrop, so the world fades in over its own space instead of after a blink of cards. If the hint is blocked (CSP) or the bundle never mounts (a safety timeout in the hint clears the class), none of this applies and the field guide shows. */ .atlas-will-enhance .atlas-stage:not(.enhanced) .atlas-fallback { display: none; } .atlas-will-enhance .atlas-stage:not(.enhanced) { min-height: min(78vh, 820px); background: radial-gradient(120% 90% at 50% 0%, #0b0d1a 0%, #05060c 60%, #04050a 100%); border-top: 1px solid rgba(255, 255, 255, 0.06); border-bottom: 1px solid rgba(255, 255, 255, 0.06); } /* Gentle fade as the live scene takes over the reserved band. */ .atlas-scene-host { animation: atlas-scene-in 0.4s ease both; } @keyframes atlas-scene-in { from { opacity: 0; } to { opacity: 1; } } @media (prefers-reduced-motion: reduce) { .atlas-scene-host { animation: none; } } .atlas-scene { position: relative; /* Own stacking context: drei labels get per-frame z-index up to 200, which would otherwise paint over the sticky site header (z-index 15). z-index:0 here confines the whole band — labels included — beneath the header. */ z-index: 0; width: 100%; height: min(78vh, 820px); background: radial-gradient(120% 90% at 50% 0%, #0b0d1a 0%, #05060c 60%, #04050a 100%); border-top: 1px solid rgba(255, 255, 255, 0.06); border-bottom: 1px solid rgba(255, 255, 255, 0.06); overflow: hidden; touch-action: none; } .atlas-scene canvas { display: block; outline: none; } /* ── in-scene DOM labels (drei ) ─────────────────────────────── */ .atlas-fam-label { --c: #8ea2ff; white-space: nowrap; font-size: 0.82rem; font-weight: 600; letter-spacing: 0.09em; text-transform: uppercase; color: var(--c); text-shadow: 0 0 12px color-mix(in srgb, var(--c) 55%, transparent), 0 1px 3px #000; user-select: none; } .atlas-node-label { user-select: none; } .atlas-node-label .nl { --c: #fff; display: inline-block; white-space: nowrap; transform: translateZ(0); font-size: 0.72rem; font-weight: 500; color: rgba(255, 255, 255, 0.9); text-shadow: 0 1px 3px #000, 0 0 8px #000; transition: color 0.2s, opacity 0.2s, transform 0.2s; } .atlas-node-label .nl.on { color: #fff; font-size: 0.8rem; text-shadow: 0 0 10px color-mix(in srgb, var(--c) 70%, transparent), 0 1px 3px #000; transform: scale(1.06); } .atlas-node-label .nl.dim { opacity: 0.4; } /* ── fallback catalogue ────────────────────────────────────────────── */ .atlas-fallback { max-width: 1080px; margin: 0 auto; padding: 8px 20px 0; display: grid; gap: 40px; } .fam { --fam: #8ea2ff; border-top: 2px solid color-mix(in srgb, var(--fam) 70%, transparent); padding-top: 18px; } .fam-head { margin-bottom: 18px; } .fam-title { margin: 0; font-size: clamp(1.3rem, 1rem + 1.4vw, 1.9rem); letter-spacing: 0.01em; color: var(--fam); } .fam-blurb { margin: 4px 0 0; color: rgba(255, 255, 255, 0.62); font-size: 0.98rem; max-width: 56ch; } .type-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; } .type-card { position: relative; padding: 18px 18px 16px; border-radius: 14px; background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(255, 255, 255, 0.08); border-left: 3px solid var(--fam); scroll-margin-top: 90px; } .type-name { margin: 0; font-size: 1.12rem; line-height: 1.25; } .type-tagline { margin: 3px 0 10px; color: var(--fam); font-size: 0.92rem; font-style: italic; } .type-def { margin: 0 0 10px; font-size: 0.95rem; color: rgba(255, 255, 255, 0.82); } .type-eg { margin: 0 0 12px; font-size: 0.86rem; color: rgba(255, 255, 255, 0.6); } .type-eg span { text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.7rem; color: rgba(255, 255, 255, 0.56); /* >= 4.5:1 on the card background */ margin-right: 4px; } /* Exemplar games → Steam search. Underline-on-hover, family-tinted. */ .type-eg a.eg-link, .p-eg a.eg-link { color: inherit; text-decoration: none; border-bottom: 1px dotted currentColor; transition: color 0.15s; } .type-eg a.eg-link:hover, .p-eg a.eg-link:hover { color: var(--fam, #8ea2ff); border-bottom-style: solid; } /* Sub-genre chips → Steam tag pages. */ .sg-row { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 8px; margin-top: 12px; } .sg-label { text-transform: uppercase; letter-spacing: 0.06em; font-size: 0.64rem; color: rgba(255, 255, 255, 0.6); flex: 0 0 auto; } .sg-chips { display: flex; flex-wrap: wrap; gap: 6px; } .sg-chip { display: inline-block; padding: 3px 9px; border-radius: 999px; font-size: 0.72rem; line-height: 1.3; color: rgba(255, 255, 255, 0.82); text-decoration: none; background: color-mix(in srgb, var(--fam, #8ea2ff) 12%, transparent); border: 1px solid color-mix(in srgb, var(--fam, #8ea2ff) 38%, transparent); transition: background 0.15s, color 0.15s, border-color 0.15s; } .sg-chip:hover { color: #fff; background: color-mix(in srgb, var(--fam, #8ea2ff) 26%, transparent); border-color: color-mix(in srgb, var(--fam, #8ea2ff) 65%, transparent); } /* Browse-the-genre-on-Steam call to action. */ .steam-browse { display: inline-block; margin-top: 14px; font-size: 0.78rem; font-weight: 500; color: var(--fam, #8ea2ff); text-decoration: none; border-bottom: 1px solid transparent; } .steam-browse:hover { border-bottom-color: currentColor; } /* The AI-brief — a tidy two-column definition list. */ .brief { margin: 0; display: grid; grid-template-columns: minmax(84px, auto) 1fr; gap: 4px 12px; font-size: 0.85rem; border-top: 1px dashed rgba(255, 255, 255, 0.1); padding-top: 10px; } .brief dt { color: rgba(255, 255, 255, 0.5); text-transform: uppercase; letter-spacing: 0.05em; font-size: 0.68rem; line-height: 1.5; padding-top: 2px; } .brief dd { margin: 0; color: rgba(255, 255, 255, 0.86); } /* ── outro / brief template ────────────────────────────────────────── */ .atlas-outro { max-width: 760px; margin: 44px auto 0; padding: 0 20px; } .atlas-outro h2 { margin: 0 0 10px; } .atlas-outro pre { background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 12px; padding: 16px 18px; overflow-x: auto; font-size: 0.85rem; line-height: 1.7; } .atlas-outro code { color: rgba(255, 255, 255, 0.9); } .atlas-phase2 { margin-top: 14px; font-size: 0.9rem; color: rgba(255, 255, 255, 0.55); font-style: italic; } /* ── live-scene overlay UI (used by src/ui/atlas/) ─────────────────── */ .atlas-hint { position: absolute; left: 16px; bottom: 14px; margin: 0; font-size: 0.8rem; color: rgba(255, 255, 255, 0.55); pointer-events: none; user-select: none; } .atlas-panel { position: absolute; top: 0; right: 0; /* Above the label chips (z-index up to 200) within the band's stacking context. */ z-index: 300; width: min(380px, 88%); height: 100%; overflow-y: auto; padding: 22px 22px 28px; background: rgba(6, 8, 16, 0.82); backdrop-filter: blur(10px); border-left: 1px solid rgba(255, 255, 255, 0.1); box-shadow: -20px 0 50px rgba(0, 0, 0, 0.4); transform: translateX(100%); transition: transform 0.32s cubic-bezier(0.22, 1, 0.36, 1); } .atlas-panel.open { transform: translateX(0); } .atlas-panel[hidden] { display: none; } .atlas-panel .p-close { position: absolute; top: 12px; right: 14px; background: none; border: none; color: rgba(255, 255, 255, 0.6); font-size: 1.5rem; line-height: 1; cursor: pointer; padding: 4px 8px; } .atlas-panel .p-close:hover { color: #fff; } .atlas-panel .p-fam { text-transform: uppercase; letter-spacing: 0.09em; font-size: 0.68rem; margin: 0 0 6px; } .atlas-panel h3 { margin: 0 0 4px; font-size: 1.4rem; } .atlas-panel .p-tag { margin: 0 0 14px; font-style: italic; } .atlas-panel .p-def { margin: 0 0 12px; color: rgba(255, 255, 255, 0.85); font-size: 0.94rem; } .atlas-panel .p-eg { margin: 0 0 16px; font-size: 0.84rem; color: rgba(255, 255, 255, 0.6); } @media (prefers-reduced-motion: reduce) { .atlas-panel { transition: none; } }