/* Galago — reset, layout shell, typography. PRD §11/§12. */ *, *::before, *::after { box-sizing: border-box; } html, body { margin: 0; padding: 0; height: 100%; } body { font-family: var(--font-sans); font-weight: var(--fw-normal); font-size: var(--fs-md); color: var(--c-ink); background: radial-gradient(120% 120% at 50% 0%, var(--c-paper) 0%, var(--c-paper-2) 100%); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; /* Touch-first: no tap highlight, no text selection on chrome, no callout. */ -webkit-tap-highlight-color: transparent; -webkit-touch-callout: none; user-select: none; overflow-x: hidden; } h1, h2, h3 { font-weight: var(--fw-bold); line-height: 1.1; margin: 0 0 var(--sp-3); } h1 { font-size: var(--fs-2xl); } h2 { font-size: var(--fs-xl); } h3 { font-size: var(--fs-lg); } p { margin: 0 0 var(--sp-3); line-height: 1.45; } /* App root + safe-area insets for the iPad home indicator / notch. PRD §12. */ #app { min-height: 100%; min-height: 100dvh; padding: max(var(--sp-4), env(safe-area-inset-top)) max(var(--sp-4), env(safe-area-inset-right)) max(var(--sp-4), env(safe-area-inset-bottom)) max(var(--sp-4), env(safe-area-inset-left)); display: flex; flex-direction: column; } .screen { width: 100%; max-width: var(--content-max); margin: 0 auto; flex: 1; display: flex; flex-direction: column; gap: var(--sp-5); animation: screen-in var(--dur-med) var(--ease-out); } /* Screen roots take programmatic focus on every route change (router.js) so SPA navigation is announced to assistive tech. They're tabindex=-1 (not keyboard- tabbable), so suppress the UA focus ring that would otherwise draw a box around the whole page. Real interactive controls keep their :focus-visible rings. */ [tabindex='-1']:focus { outline: none; } @keyframes screen-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } } /* Top bar shared by hub screens. */ .topbar { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); flex-wrap: wrap; } .spacer { flex: 1; } .center-stack { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: var(--sp-5); } .grid { display: grid; gap: var(--sp-4); } .grid.cols-auto { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); } .visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } /* Landscape iPad (1024×768): keep hub content from getting too tall. */ @media (orientation: landscape) and (max-height: 820px) { h1 { font-size: var(--fs-xl); } } /* ---- Living biome backdrop (PRD §11). Two fixed layers behind #app, keyed by data-biome on (set by the router). ::before is the colour-matched gradient wash (the fallback, and what fills any gap); ::after is the pre-rendered habitat PHOTO (tools/capture.html bakes these from scene3d) with a built-in scrim so UI chrome stays legible over both bright and dark biomes. The hub/menu screens thus get the real biome look as a static image — zero live WebGL on the menus (fast + offline-safe); the in-app Visit still runs scene3d. */ body::before { content: ''; position: fixed; inset: 0; z-index: -3; background: radial-gradient( 130% 78% at 50% 8%, color-mix(in srgb, var(--biome, #f2c179) 32%, var(--c-paper)) 0%, transparent 58% ), linear-gradient( to bottom, var(--c-paper) 0%, color-mix(in srgb, var(--biome, #f2c179) 15%, var(--c-paper)) 44%, color-mix(in srgb, var(--biome, #f2c179) 32%, var(--c-paper)) 80%, color-mix(in srgb, var(--biome-deep, #d98f3c) 30%, var(--c-paper)) 100% ); } /* The animated WebGL biome backdrop (backdrop.js) sits ABOVE the static photo and covers it when active; when it's hidden (reduced-motion / no WebGL) the photo shows through. */ .living-backdrop { position: fixed; inset: 0; width: 100%; height: 100%; z-index: -1; pointer-events: none; display: none; /* shown by backdrop.js once a scene is built */ } /* The static baked habitat photo — the fallback shown when the animated backdrop is hidden (reduced-motion / no WebGL). Just the image; the scrim lives in .living-scrim so it covers the animated canvas too. */ body::after { content: ''; position: fixed; inset: 0; z-index: -2; pointer-events: none; background-image: var(--biome-bg, none); background-size: cover; background-position: center 64%; background-repeat: no-repeat; } /* One legibility scrim over whichever backdrop is showing (animated canvas OR the photo): darkens the top + bottom edges so the topbar/headings and action row read cleanly, while the scene stays vivid through the middle. */ .living-scrim { position: fixed; inset: 0; z-index: -1; pointer-events: none; background: linear-gradient( to bottom, rgba(20, 12, 4, 0.34) 0%, rgba(20, 12, 4, 0.06) 16%, rgba(20, 12, 4, 0) 40%, rgba(20, 12, 4, 0) 66%, rgba(20, 12, 4, 0.22) 100% ); }