/* ========================================================================== LordHoell on the glass One fixed canvas, below the bar and above the page, that never takes a click. The element is created by js/lord.js. ========================================================================== */ /* Pinned by its edges rather than given a height, so it always matches the visible viewport — a `calc(100% - …)` on a phone measures the address bar in or out. */ #lord-stage { position: fixed; top: var(--nav-h, 97px); right: 0; bottom: 0; left: 0; z-index: 20; /* over the page, under the bar (1000) and the modals (2000) */ pointer-events: none; /* every click on this page still belongs to the page */ overflow: hidden; opacity: 0; transition: opacity 700ms ease; } /* He fades in once he has actually walked on, so a slow engine load is a page without him rather than a page with a half-drawn one. */ #lord-stage[data-ready="true"] { opacity: 1; } /* The engine mounts here — it looks this id up by name and falls back to without it. */ #lord-stage #zspr-stage { position: absolute; inset: 0; } #lord-stage canvas { position: absolute; left: 0; bottom: 0; width: 100%; height: auto; image-rendering: pixelated; transition: opacity 220ms ease; } /* He may walk past a button; he may not sit on its label. js/lord.js sets this while any part of him is over something clickable or a heading. */ #lord-stage.is-over-control canvas { opacity: 0.45; } /* His voice. Short, and it follows him — he never stops on top of a control, so it never lands on one either. */ #lord-say { position: absolute; z-index: 1; display: none; transform: translate(-50%, -100%); padding: 5px 12px; border-radius: 999px; background: rgba(10, 10, 15, 0.92); border: 1px solid rgba(74, 158, 255, 0.5); color: #e8eefc; font: 600 12px/1.5 'Exo 2', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; white-space: nowrap; box-shadow: 0 6px 20px rgba(0, 0, 0, 0.45); } /* Hovering him is the only affordance he has, since the canvas cannot carry a cursor of its own without taking the click as well. Touch gets a tap instead. */ html.lord-hot body { cursor: pointer; } @media (prefers-reduced-motion: reduce) { #lord-stage { display: none; } }