/* The WebGL canvas, and what the page does once it is up. Everything else about the stage is in public/js/stage/. */ .stage canvas{ position:absolute; top:0; left:0; /* The canvas is up to K-1 device pixels WIDER AND TALLER THAN THE VIEWPORT on purpose, which is what makes one art pixel exactly K device pixels at every window size. The global img,video,canvas{max-width:100%} in base.css would squash it back to the viewport width and put every pixel on a fractional scale, so it has to be turned off here. #stage is fixed and clips the overhang. This is trap 4 in build-notes.md, in its natural habitat. */ max-width:none; image-rendering:pixelated; } /* The four heroes in the hero section exist twice: as in the markup, so the page works with no JavaScript and no WebGL, and as sprites in the 3D corridor. The class goes on once the sprites have actually decoded, so there is never a moment with neither. Hidden, not removed: it is still the fallback, and it still has the alt text. The class is `stage-on`, not `stage`. `.stage` is already the box the canvas lives in, and it is position:fixed with overflow:hidden. Put that class on and the whole document becomes fixed and will not scroll at all. */ html.stage-on [data-stage-fallback="hero"]{ display:none; } /* The same deal for station 2: the camp is two flat screenshots in the markup and the real clearing, assembled out of the loose files, in the scene. IT GOES ON THE SAME CLASS AS THE HERO'S, on purpose, even though the camp's own art loads later. The two screenshots are 748px tall, so taking them out of the document takes 707px of height out of it, and doing that halfway down a scroll would move every trigger below it under the visitor's feet. The hero's handover already happens during the load, and ScrollTrigger is refreshed right after it, so this rides along with that one. */ html.stage-on [data-stage-fallback="camp"]{ display:none; } /* And station 3: the strip of six small screenshots is what the section is with no WebGL, and the six slabs turning in the scene are what it is with. Hidden on the same class as the other two, at boot, for the same reason: the strip is over 460px tall and taking that out of the document halfway down a scroll would move every trigger below it. The six labels that ride with the slabs carry the names the strip's captions carry. */ html.stage-on [data-stage-fallback="screens"]{ display:none; } /* And station 4: a still row of goblins and one still chieftain is what the Hollowlands is with no WebGL, and the party, the horde and the boss in the scene are what it is with. Hidden on the same class as the other three, at boot, for the same reason: it is about 700px tall and taking that out of the document halfway down a scroll would move every trigger below it. */ html.stage-on [data-stage-fallback="world"]{ display:none; }