/* ========================================================================== gate.css — the phone door, from Figma 14790:29095 (402 x 874). WHAT THIS IS FOR. The phone layout is finished and it is not going to be shown. Deleting it would be the easy way and the wrong one — it is three hundred lines of measured work and it will be wanted again — so instead the site puts a door in front of it. css/mobile.css stays linked, stays untouched, and simply has nothing on screen to style. AND IT MAKES THE PHONE FASTER, NOT SLOWER, which is the part worth being clear about. The door is not a sheet laid OVER a running site: the container is display:none, so nothing inside it is laid out or painted, and js/lifecycle.js does not mount the page's modules at all. On a phone this site is otherwise several WebGL contexts and a handful of animation loops. Behind this door there is one canvas. Desktop pays nothing whatsoever — every rule below is inside a media query it never matches. TO SEE THE PHONE LAYOUT ANYWAY, put ?mobile in the URL. The door steps aside and the site comes up as it always did. That is what "hidden, not deleted" means in practice: one query string away, for you, and unreachable for everybody else. ========================================================================== */ /* THE DOOR IS INVISIBLE UNTIL THE FLAG SAYS OTHERWISE, and the flag is set in the before the first paint — see the inline script in each page. A door decided in JS after load is a door you watch swing shut. */ .gate{ display: none; } html.is-gated .gate{ display: block; position: fixed; inset: 0; z-index: 2147483000; /* above the transition cover, which is the tallest thing the site otherwise paints */ background: var(--ui-red, #e8271c); overflow: hidden; /* The page underneath cannot be scrolled to, so the door must not bounce either — on iOS a fixed element still rubber-bands without this. */ overscroll-behavior: none; touch-action: none; } /* EVERYTHING ELSE, OFF. `display:none` and not `visibility:hidden` or an opacity: those two keep the box, and keeping the box means the phone still lays out, still composites, and every canvas inside still has a size worth drawing into. None is the only one of the three that actually stops work. */ html.is-gated body > [data-barba="container"], html.is-gated [data-barba="wrapper"] > main, html.is-gated .grain, html.is-gated .loader, html.is-gated .tn{ display: none !important; } /* THE GROUND. js/work-cursor.js mounts its character field into this element when the door is up — the same blob as every other page, not a picture of one. It is the only canvas running on a phone. */ .gate__bg{ position: absolute; inset: 0; z-index: 0; pointer-events: none; } .gate__bg canvas{ position: absolute; inset: 0; width: 100%; height: 100%; } /* THE MARK, DEAD CENTRE. Figma puts the 128px logo at (137, 373) in a 402 x 874 frame — 137 + 64 = 201 and 373 + 64 = 437, exactly half of each side. So it is centred, and it is written as centred rather than as those two numbers, which would only be centred on a 402 x 874 phone. THE LOGO IS CENTRED, NOT THE PAIR. Wrapping the mark and the line in one centred block sits the block's middle on the screen's middle, which pushes the logo seventeen pixels high — measured, 420 against 437. The design centres the MARK and hangs the line off it, so that is what this does. */ html.is-gated .gate__logo{ position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 1; display: block; /* BOTH AXES SAID OUT LOUD. css/base.css carries `img{ max-width: 100% }`, which is right everywhere else and here quietly squeezed the mark to its parent's 107px — 107 x 128, measured. Nothing about this one is inherited. */ width: 128px; height: 128px; max-width: none; } /* 515 - 501 = 14 under the mark, and the mark's bottom is half the frame plus half of 128. Three lines on a 10px lead; the design reports the block as 30 tall, which is those three lines and nothing else. */ html.is-gated .gate__say{ position: absolute; left: 50%; top: calc(50% + 64px + 14px); transform: translateX(-50%); z-index: 1; margin: 0; width: 107px; text-align: center; color: #ffffff; font: 7.5px/10px 'PP Supply Mono', ui-monospace, monospace; text-transform: uppercase; letter-spacing: 0; } /* 854 + 10 = 864 in an 874 frame: ten pixels off the bottom. Written from the BOTTOM for the reason css/mobile.css gives at its head — a phone is never 874 tall, the address bar sees to that, so a distance from the bottom is the only one that survives it. */ html.is-gated .gate__foot{ position: absolute; left: 50%; bottom: 10px; transform: translateX(-50%); z-index: 1; margin: 0; width: 107px; text-align: center; color: #ffffff; font: 7.5px/10px 'PP Supply Mono', ui-monospace, monospace; text-transform: uppercase; }