/* ============================================================================ livery.css - THE LIVERY ============================================================================ IN THE PARK: a park's livery is its colours and its look, on every hut, every sign and every uniform. TECHNICALLY: the one stylesheet of the site. THE RULES OF THE LOOK, which are the game's own square corners everywhere no border-radius one hard shadow, two pixels no blur, no glow flat colours no gradient on anything a state changes in one step no fading from one to the other the game's pictures at whole sizes a half, a quarter - never stretched the studio's own letters two letter files cast from the studio's alphabet; nothing is fetched from anybody else a letter at a whole size a cell of a letter is 2, 4 or 6 pixels, never a size in between GLOSSARY - every name, and what it is park the whole page gates-shut the page while the words are being filled in forecourt the front of the park: the promenade, and what is laid over its two top corners bare a forecourt with no promenade (the page for a wrong address) gate-sign the park's name, FunParks, in block letters on its board: it hangs in the middle of the promenade, over the gate. It is the page's title studio-crest the studio's mark, over the promenade's top left corner; it leads to the founder's words leaflet-rack the language button and its list, over the promenade's top right corner leaflet-rack-sign the button itself leaflets the list leaflet one language; in-use is the one being spoken promenade the living strip promenade-view its canvas promenade-still Steam's picture of the park, when the strip is shut alive the promenade once it moves guest-lines what the guests say (never shown as a list) guest-bubble the line somebody is saying, above their head billboard the game's presentation billboard-pitch the short description: the one paragraph of the billboard billboard-motto "Your park. Your vision. Open the gates!", on its plank, right below the promenade exhibits what is the game's own, shown: the exhibits, one under the other exhibit one of them: a view and a plate view-left, view-right which side its view stands on, from 760 pixels of window: the exhibits take turns from-afar, from-close how much of the park its view shows: a whole pen or a whole roundabout seen from afar, a stretch of path seen from close exhibit-view the frame of its picture exhibit-still one moment of its story, as a picture that stands still: what the view shows while its story cannot be played staged a view once exhibits.js plays its story in it exhibit-sheet the sheet the picture is painted on exhibit-shout the word the game shouts at a catch, laid over the view exhibit-plate the words beside the view exhibit-sign its sign: a heading of the owner's text for Steam, or a sign the owner gave for this site exhibit-words its sentence: one of the owner's, word for word ticket-office the frame of the Steam button, a first time: right under the short description. It holds the button and nothing else ticket-booth the frame of the Steam button, a second time: under the exhibits, where it has stood since the first day ticket the Steam button. It stands twice and has one gate, written once, on the billboard (data-steam-gate): closed, wishlist or open ticket-word its label, one for each state of the gate opening-day the opening day, under the second button. OFF THE PAGE since 2026-10-04, until the day is known: its rule waits for it, below notice-board the facts notice one fact signposts the links signpost one link; its gate is open or closed company-mark a signpost that shows a company's own logo mark-of-discord Discord's symbol, as Discord gives it mark-of-youtube YouTube's icon, as YouTube gives it signpost-note "opening soon", shown while the gate is closed founders-plaque the founder's words, said in a bubble, and his name. It stands before the signposts founders-words the words themselves: they are the bubble founders-name the signature, under the bubble's tail waiting the plaque while the visitor has not come to it spoken the plaque once the visitor has: it pops up exit-gate the bottom of the page small-print the rights line regulations-sign the link "Legal notice", in the foot of the page park-regulations the legal notice: a pop-up over the page, open while the address ends with #park-regulations regulations-veil what darkens the page behind the notice; a press on it shuts the notice regulations-board the board the notice is written on, in the middle of the window regulations-title its title regulations-text its text regulations-close "Close", under the text services-sign a link of the notice that leads to guest services: "Send us a message" guest-services the form to send the studio a message: the second pop-up, open while the address ends with #guest-services services-veil what darkens the page behind it services-board its board, which is the form itself services-title its title services-label what a field is for, over the field services-address the field for the visitor's own address services-words the field for their message services-decoy a field no visitor sees: a program that fills every field of a form fills it, and gives itself away services-word one of the lines the form says over its levers: sent, check the address, write a message, the site's mail is down, try again, a copy on one's own machine said the one line of them that is shown services-levers its two levers, side by side services-press "Send" services-close "Close" OFF THE PAGE SINCE 2026-09-29, on the owner's word, and their rules with them: the programme and its signs, the postcard rack and its three pictures, the binoculars that showed one of them large. OFF THE PAGE SINCE 2026-10-04, on the owner's word ("Off the page for now"), and its rules with it: the newsletter, which stood among the signposts, with its sign, its field, its button, its decoy, its lines and the envelope before its name. It comes back with a newsletter that works. TO CHANGE THE USUAL THINGS A colour? The list just below: change it once, it changes everywhere. A letter? Not here. The letters are drawn in Website/review/alphabet.json and cast by the site's tool: python3 .../Website/tools/site.py cast A size of letters? Only the sizes listed under THE LETTERS, below. ============================================================================ */ /* ============================================ THE COLOURS - each is one the game uses ============================================ */ :root { --night-lawn: #0b1a10; /* the page behind the park, the game's loading screen */ --chalk: #e8e6dc; /* the game's text */ --hut-wall: rgba(10, 22, 14, 0.94); /* a panel of the game */ --hut-trim: #3b5b3b; /* its border */ --lever: #24402c; /* a button */ --lever-rim: #4b7a55; /* its border */ --lever-lit: #33573c; /* under the pointer */ --lever-pulled: #5b9a4a; /* pressed */ --banner-ink: #bfe3b4; /* the start screen's title */ --banner-ink-soft: #9ec9a0; /* its subtitle */ --sign-gold: #ffe680; /* names; FunParks on the gate's board */ --board-dark: #5a3d22; /* the gate's wooden board */ --board-light: #8a6236; --lamp-gold: #ffd166; /* the ring round a caught vandal */ --takings: #9ee493; /* money coming in: what went well */ --wont-work: #ff7b6b; /* the game's red, kept for "will not work" */ --night-veil: rgba(8, 12, 42, 0.62); /* the night over the park, at its darkest */ --water-glint: #8fd0ff; /* a link */ --wordmark-cream: #ffecaa; /* the wordmark's letters */ --wordmark-edge: #142014; /* their outline */ --grass: #5faa4e; /* the lawn */ --bubble-night: rgba(18, 22, 40, 0.94); /* the game's small sign over a head */ --bubble-rim: #aab4e8; --bubble-ink: #eef1ff; --speech-paper: #fbf9f4; /* the paper of the founder's bubble: the lit edge of the game's signpost */ --speech-contour: #1e1e1e; /* its contour: the dark contour of every drawing of the game */ --speech-ink: #2a1a0a; /* the words on it: the ink of the game's signpost */ --hard-shadow: #050c07; /* the one shadow, two pixels down and across */ /* the letters: the studio's two hands first, then the visitor's own, should a letter file fail to come */ --sign-painter: "GG Sign Painter", "DejaVu Sans", Verdana, Geneva, sans-serif; --notice-writer: "GG Notice Writer", "DejaVu Sans", Verdana, Geneva, sans-serif; /* the visitor's own letters: the legal notice, the line a guest says, and Chinese */ --letters: "DejaVu Sans", Verdana, Geneva, sans-serif; --letters-zh: "DejaVu Sans", Verdana, Geneva, "PingFang SC", "Microsoft YaHei", "Noto Sans CJK SC", sans-serif; } /* ============================================ THE LETTERS - the studio's own alphabet Two letter files, cast from the grids of the alphabet by the site's own tool (tools/foundry.py). Nothing is fetched from anybody else. GG Sign Painter the bold hand, painted as blocks: a lit top, a shaded side, a dark rim. Titles, buttons, signposts. Its colours are its own: the stylesheet cannot change them. GG Notice Writer the thin hand, for sentences. It takes the colour the stylesheet gives the words. A LETTER IS MADE OF CELLS, AND A CELL IS A WHOLE NUMBER OF PIXELS. So a size is never chosen freely: it is the height of the hand in cells, times the pixels of one cell. the bold hand is 15 cells high 90px is 6 pixels a cell 60px is 4 pixels a cell 30px is 2 pixels a cell the thin hand is 12 cells high 24px is 2 pixels a cell The height of a line leaves room between two lines: 3 cells for the bold hand, whose blocks reach under the line, 2 cells for the thin one. bold, 90px: a line of 108px bold, 60px: a line of 72px bold, 30px: a line of 36px thin, 24px: a line of 28px Any other size falls between two pixels and blurs the letters. Both files say they are of every weight, and the page asks for no thickening: a browser that thickens a letter by itself smears it. WHAT STANDS AFTER THE QUESTION MARK makes the address of a letter file a new one, so that a browser which kept the letter files of the first day asks for these. It is the same as in index.html, which says why, and the same as where the page asks for the letter files ahead. ============================================ */ @font-face { font-family: "GG Sign Painter"; src: url("signage/sign-painter.woff?as-of=2026-09-28") format("woff"); font-weight: 100 900; font-style: normal; font-display: block; } @font-face { font-family: "GG Notice Writer"; src: url("signage/notice-writer.woff?as-of=2026-09-28") format("woff"); font-weight: 100 900; font-style: normal; font-display: block; } /* ============================================ THE WHOLE PARK ============================================ */ * { box-sizing: border-box; } [hidden] { display: none !important; } html { background: var(--night-lawn); } .gates-shut body { visibility: hidden; } /* a phone does not make the letters larger by itself: a size it chose would fall between two pixels */ html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; } .park { /* the hands and their sizes, named once: every block of words below takes them from here */ --thin: var(--notice-writer); --thin-size: 24px; /* the thin hand, 2 pixels a cell */ --thin-line: 28px; --bold: var(--sign-painter); --bold-size: 30px; /* the bold hand on a button or a sign, 2 pixels a cell */ --bold-line: 36px; --title-size: 30px; /* the bold hand in a title: on a narrow screen, 2 pixels a cell */ --title-line: 36px; --bold-weight: normal; /* THE PARK'S NAME OVER THE GATE. It hangs in the promenade, so it is made of the promenade's own pixels. One of those is 2 pixels of the screen, and 3 in a window of 1400 pixels and more. A cell of the name's letters is two of them. In a window narrower than 480 pixels it is one of them, or the name would reach the studio's mark. the window a pixel of the promenade a cell the letters a line from the top under 480 pixels 2 2 30 36 24 480 to 1399 2 4 60 72 8 1400 and more 3 6 90 108 9 */ --promenade-pixel: 2px; --name-cell: 2px; --name-size: 30px; /* 15 cells */ --name-line: 36px; /* 18 cells */ --name-top: 24px; /* how far under the promenade's top the name's board hangs */ margin: 0; background: var(--night-lawn); color: var(--chalk); font-family: var(--thin); font-size: var(--thin-size); line-height: var(--thin-line); font-weight: normal; font-synthesis: none; /* no browser thickens or slants a letter by itself */ font-kerning: none; font-variant-ligatures: none; letter-spacing: 0; } @media (min-width: 480px) { .park { --name-cell: 4px; --name-size: 60px; --name-line: 72px; --name-top: 8px; /* level with the studio's mark */ } } @media (min-width: 760px) { .park { --title-size: 60px; /* a title on a wide screen, 4 pixels a cell */ --title-line: 72px; } } @media (min-width: 1400px) { .park { --promenade-pixel: 3px; /* the promenade is shown three times from this width */ --name-cell: 6px; --name-size: 90px; --name-line: 108px; --name-top: 9px; /* 3 of the promenade's pixels */ } } /* Chinese is outside the studio's alphabet: it keeps the visitor's own letters, at their own sizes */ html:lang(zh) .park { --thin: var(--letters-zh); --thin-size: 16px; --thin-line: 28px; --bold: var(--letters-zh); --bold-size: 19px; --bold-line: 30px; --title-size: 22px; --title-line: 36px; --bold-weight: bold; font-synthesis: weight style; } a { color: var(--water-glint); } img { max-width: 100%; } :focus-visible { outline: 2px solid var(--lamp-gold); outline-offset: 2px; } /* ============================================ THE FORECOURT - the front of the park NOTHING STANDS ABOVE THE PROMENADE (the owner, 2026-09-28). The studio's mark is laid over its top left corner and the languages over its top right one, two cells of the promenade's people and trees from its edges. ============================================ */ .forecourt { position: relative; } /* the page for a wrong address has no promenade: its forecourt is as high as the park's name on its board, and 12 pixels more */ .forecourt.bare { min-height: calc(var(--name-top) + var(--name-line) + 6 * var(--promenade-pixel) + 12px); } /* THE PARK'S NAME, in the studio's block letters on a board of the gate's timber. It hangs in the middle of the promenade, over the gate (the owner, 2026-09-28: "move it up in the middle of the promenade"). It is laid over the promenade as the studio's mark is: the promenade itself is as it was. THE LETTERS ARE BLOCKS: a lit top, a shaded side and a dark rim. They are in the letter file, and no rule here paints them. ITS BOARD, measured in the promenade's own pixels its edge 1 its margins 6 to the left and to the right of the letters, 2 above and under them its shadow 1 down and 1 across its width "FunParks" is 71 cells of letters wide. THE NUMBER 71 IS THE WIDTH OF THESE EIGHT LETTERS IN THE ALPHABET: the site's tool counts them again and refuses another. From 480 pixels of window the board hides the gate's own small board. In a narrower window it is narrower than that one, and hangs on it. IT LIES OVER THE PROMENADE AND UNDER WHAT A GUEST SAYS (z-index 1, the line a guest says has 2): a guest who passes under the gate speaks a little over the foot of the board, and the whole line is read. */ .gate-sign { --board-wide: calc(71 * var(--name-cell) + 14 * var(--promenade-pixel)); position: absolute; top: var(--name-top); left: calc(50% - var(--board-wide) / 2); z-index: 1; box-sizing: content-box; width: calc(71 * var(--name-cell)); margin: 0; padding: calc(2 * var(--promenade-pixel)) calc(6 * var(--promenade-pixel)); background: var(--board-light); border: var(--promenade-pixel) solid var(--board-dark); box-shadow: var(--promenade-pixel) var(--promenade-pixel) 0 var(--hard-shadow); color: var(--wordmark-cream); font-family: var(--sign-painter); /* the park's name is in the studio's letters in every language */ font-size: var(--name-size); line-height: var(--name-line); font-weight: normal; white-space: nowrap; } /* OVER THE MIDDLE OF THE GATE, to the pixel. The promenade stands its gate on the middle of the window, taken up to the next of its own pixels that can be halved: the first length below. The second is half the board, taken down to one of the promenade's pixels. The board then lies on the promenade's pixels, and its letters on whole pixels of the screen. A browser that does not know round() keeps the rule above: the board hangs in the middle of the window, within a pixel of the gate's. */ @supports (left: round(up, 1px, 2px)) { .gate-sign { left: calc(round(up, 100%, 2 * var(--promenade-pixel)) / 2 - round(down, var(--board-wide) / 2, var(--promenade-pixel))); } } /* THE TOP LEFT CORNER (the owner, 2026-09-28, of a page that had it on the right: "gg stil at the wrong corner") */ .studio-crest { position: absolute; top: 8px; left: 8px; z-index: 3; display: block; border: 2px solid var(--hut-trim); box-shadow: 2px 2px 0 var(--hard-shadow); line-height: 0; } .studio-crest:hover { border-color: var(--lever-pulled); } .studio-crest img { width: 46px; /* a quarter of the picture */ height: 46px; } /* ============================================ THE LEAFLET RACK - the languages ============================================ */ /* the top right corner, since the studio's mark has the left one */ .leaflet-rack { position: absolute; top: 8px; right: 8px; z-index: 4; } .leaflet-rack-sign, .leaflet { padding: 6px 12px; background: var(--lever); border: 2px solid var(--lever-rim); color: var(--chalk); font-family: inherit; font-size: var(--thin-size); line-height: var(--thin-line); cursor: pointer; } .leaflet-rack-sign { box-shadow: 2px 2px 0 var(--hard-shadow); } .leaflet-rack-sign:hover, .leaflet:hover { background: var(--lever-lit); } .leaflets { position: absolute; right: 0; top: 100%; z-index: 5; margin: 4px 0 0; padding: 6px; list-style: none; background: var(--hut-wall); border: 2px solid var(--hut-trim); box-shadow: 2px 2px 0 var(--hard-shadow); } .leaflet { display: block; width: 100%; margin: 2px 0; text-align: left; white-space: nowrap; } .leaflet.in-use { background: var(--lever-pulled); color: var(--night-lawn); } /* ============================================ THE PROMENADE - the living strip ============================================ */ .promenade { position: relative; height: 252px; /* 126 of the game's pixels, shown double */ overflow: hidden; background: var(--grass); border-bottom: 2px solid var(--hut-trim); } .promenade-view { display: block; image-rendering: pixelated; } /* Steam's picture of the park fills the whole strip, from its top left corner. It is laid over whatever else is in the strip: with scripts off, the empty sheet the promenade would have been painted on is still there, 150 pixels high, and without this the picture hung under it, behind an empty green band across the whole page (seen by the owner, 2026-09-28). */ .promenade-still { position: absolute; top: 0; left: 0; display: block; width: 100%; height: 100%; max-width: none; object-fit: cover; } .promenade.alive { cursor: default; } .guest-lines { display: none; } /* THE PROMENADE IS NOT TO BE CHANGED (the owner, 2026-09-28). The line a guest says keeps the letters it had when the owner looked at it: the visitor's own, at the sizes below. */ .guest-bubble { position: absolute; z-index: 2; margin: 0; padding: 2px 9px; transform: translate(-50%, -100%); background: var(--bubble-night); border: 1px solid var(--bubble-rim); color: var(--bubble-ink); font-family: var(--letters); font-size: 13px; font-weight: bold; font-synthesis: weight style; line-height: 1.55; white-space: nowrap; pointer-events: none; } html:lang(zh) .guest-bubble { font-family: var(--letters-zh); line-height: 1.75; } @media (min-width: 1400px) { .promenade { height: 378px; } /* shown three times */ .guest-bubble { font-size: 15px; } } /* ============================================ THE BILLBOARD - the game ============================================ */ .billboard { --as-wide-as: 1000px; max-width: var(--as-wide-as); margin: 0 auto; padding: 16px 16px 8px; /* 16 above: how far under the promenade's foot the motto hangs */ text-align: center; } /* THE LETTERS STAND ON WHOLE PIXELS. A line of words is an even number of pixels wide, and it is set in the middle of its block: so the block itself is made an even number of pixels wide, and begins on an even pixel, whatever the width of the window. That is what the two lines with round() and mod() do. They are asked only of a browser that knows them. Another keeps the rule above, and the page is the same to within half a pixel. (Until 2026-09-28 the two lines stood in the rule above: a browser that did not know them would have lost its left margin, and set the billboard against the left edge.) */ @supports (margin-left: round(down, 1px, 2px)) and (padding-right: mod(3px, 2px)) { .billboard { margin-left: round(down, calc((100% - min(var(--as-wide-as), 100%)) / 2), 2px); padding-right: calc(16px + mod(min(var(--as-wide-as), 100%), 2px)); } } /* THE ONE PARAGRAPH OF THE BILLBOARD. The welcome stood under it until 2026-09-29; the owner: "I said these two paragraph are two much text !" It has the room under it that the welcome had. */ .billboard-pitch { margin: 0 auto 18px; max-width: 840px; color: var(--banner-ink); } /* THE MOTTO, "Your park. Your vision. Open the gates!": painted on a plank of the gate's timber, in the bold hand at the size of a title. IT HANGS RIGHT BELOW THE PROMENADE AND DOES NOT TOUCH IT (the owner, 2026-09-28): it is the first thing of the billboard, so it hangs as far under the promenade's foot as the billboard has room above, 16 pixels. It has no room of its own above: a room here would be added to that one. */ .billboard-motto { display: inline-block; margin: 0 0 22px; padding: 8px 16px; background: var(--board-light); border: 2px solid var(--board-dark); box-shadow: 2px 2px 0 var(--hard-shadow); color: var(--wordmark-cream); font-family: var(--bold); font-size: var(--title-size); line-height: var(--title-line); font-weight: var(--bold-weight); } /* ============================================ THE EXHIBITS - what is the game's own, shown The owner, 2026-09-28: "One graph left and its compagnong sdentence right, then graph right and sentence left ansd so on." AN EXHIBIT is a view and a plate. The view is a picture that moves (exhibits.js); the plate carries a sign, in the bold hand on the gate's timber, and one sentence, in the thin hand. A VIEW SHOWS SO MUCH OF THE PARK, IN THE GAME'S OWN PIXELS, AND EACH OF THEM IS SHOWN AS A WHOLE NUMBER OF PIXELS OF THE SCREEN. Its frame is 2 pixels all round. FROM CLOSE, the stretch of path where the vandal is caught: 116 of the game's pixels by 72. the window a pixel of the game the view with its frame under 400 pixels 2 232 by 144 236 by 148 400 to 999 3 348 by 216 352 by 220 1000 to 1559 4 464 by 288 468 by 292 1560 and more 6 696 by 432 700 by 436 FROM AFAR, the pen seen whole, and the roundabout seen whole: 156 of the game's pixels by 108. The owner, 2026-09-29: "Can you dezoom a bit on the Creature to care for animation ? SO we can see the entire pen." the window a pixel of the game the view with its frame under 352 pixels 1 156 by 108 160 by 112 352 to 999 2 312 by 216 316 by 220 1000 to 1559 3 468 by 324 472 by 328 1560 and more 4 624 by 432 628 by 436 THE SAME STEPS ARE WRITTEN IN THE SKETCH of each story, under "view" (Website/review/exhibits-sketch.json), and the site's tool measures in the browser that the page keeps to them. To change a step: here and there. HOW IT IS WRITTEN. An exhibit says how much its view shows (--seen-wide, --seen-deep) and how large a pixel of the game is shown (--a-pixel); the sheet is as wide as the one times the other. FROM 760 PIXELS OF WINDOW a view and its plate stand side by side, 32 pixels apart: view-left has its view on the left, view-right on the right, and the exhibits take turns. The words of a plate begin at its left edge. In a narrower window the view stands above its plate, both in the middle. EVERY LENGTH HERE IS EVEN, so that the letters stand on whole pixels wherever a view and a plate are set in the middle of something. A STILL WHERE THE STORY CANNOT BE PLAYED (the owner, 2026-09-29: "Only hadd a still of each animation in case animation does not work"). A view holds two things of one size: a picture that stands still, one moment of its story, and the sheet its story is painted on. The still is what is shown, until exhibits.js has staged the view and painted its first picture; then the sheet is. With scripts off, in a browser that cannot paint, or when the script breaks, the still stays. A still is as many pixels as its view shows of the game's, 156 by 108 or 116 by 72, and each is shown as the same whole square as on the sheet. ============================================ */ .exhibits { margin: 8px 0 0; } .exhibit { display: flex; flex-direction: column; align-items: center; margin: 0 0 32px; } .exhibit-view { position: relative; flex: none; overflow: hidden; margin: 0 0 14px; background: var(--grass); border: 2px solid var(--hut-trim); box-shadow: 2px 2px 0 var(--hard-shadow); line-height: 0; } /* the still is shown while the view is not staged, the sheet once it is */ .exhibit-view.staged .exhibit-still { display: none; } .exhibit-view.staged .exhibit-sheet { display: block; } .exhibit.from-close { --seen-wide: 116; --seen-deep: 72; --a-pixel: 2px; /* a pixel of the game is 2 of the screen */ } .exhibit.from-afar { --seen-wide: 156; --seen-deep: 108; --a-pixel: 1px; } .exhibit-sheet { display: none; /* until its view is staged */ width: calc(var(--seen-wide) * var(--a-pixel)); height: calc(var(--seen-deep) * var(--a-pixel)); image-rendering: pixelated; } .exhibit-still { display: block; width: calc(var(--seen-wide) * var(--a-pixel)); height: calc(var(--seen-deep) * var(--a-pixel)); max-width: none; /* a still is never squeezed: its pixels stay whole squares */ image-rendering: pixelated; } .exhibit-plate { align-self: stretch; } /* the sign of an exhibit: a plank of the gate's timber, in the bold hand */ .exhibit-sign { display: inline-block; margin: 0 0 12px; padding: 6px 12px; background: var(--board-light); border: 2px solid var(--board-dark); box-shadow: 2px 2px 0 var(--hard-shadow); color: var(--wordmark-cream); font-family: var(--bold); font-size: var(--bold-size); line-height: var(--bold-line); font-weight: var(--bold-weight); } .exhibit-words { margin: 0; } /* THE WORD THE GAME SHOUTS AT A CATCH, laid over the view in the studio's block letters. exhibits.js says where its middle hangs, on even pixels; the word is an even number of pixels wide and its line 36 high, so its letters stand on whole pixels. */ .exhibit-shout { position: absolute; z-index: 1; margin: 0; transform: translate(-50%, -50%); color: var(--wordmark-cream); font-family: var(--bold); font-size: var(--bold-size); line-height: var(--bold-line); font-weight: var(--bold-weight); white-space: nowrap; pointer-events: none; } @media (min-width: 352px) { .exhibit.from-afar { --a-pixel: 2px; } } @media (min-width: 400px) { .exhibit.from-close { --a-pixel: 3px; } } @media (min-width: 760px) { .exhibit { gap: 32px; text-align: left; } .exhibit.view-left { flex-direction: row; } .exhibit.view-right { flex-direction: row-reverse; } .exhibit-view { margin: 0; } .exhibit-plate { flex: 1 1 0; align-self: center; min-width: 0; } } @media (min-width: 1000px) { .exhibit.from-close { --a-pixel: 4px; } .exhibit.from-afar { --a-pixel: 3px; } } @media (min-width: 1560px) { .exhibit.from-close { --a-pixel: 6px; } .exhibit.from-afar { --a-pixel: 4px; } } /* THE PROGRAMME STOOD HERE until 2026-09-29: the signs that had no picture. The owner deleted its last two "for now", and "Design it your way" is the sign of the third exhibit. The Steam button follows the last exhibit, 32 pixels under it. */ /* ============================================ THE TICKET OFFICE AND THE TICKET BOOTH - Steam THE BUTTON TO STEAM STANDS TWICE (the owner, 2026-10-04, asked where it should stand from the day it says "Wishlist on Steam": "Twice"). the ticket office right under the short description: 18 pixels under it, the room the description has under itself, and 26 above the first exhibit. On a desk a visitor sees it without scrolling the ticket booth under the three exhibits, where the button has stood since the first day: on a desk a visitor scrolls two screens to reach it THE TWO HAVE ONE LOOK AND ONE GATE. Every rule of the button is written for `ticket`, and none for a ticket in one of its two frames: what one shows, the other shows. Every length is even, as everywhere on the billboard: a button is set in the middle of the page, and its letters stand on whole pixels. ============================================ */ .ticket-office { margin: 0 0 26px; } .ticket-booth { margin: 0 0 18px; } .ticket { display: inline-block; padding: 12px 28px; background: var(--lever); border: 2px solid var(--lever-rim); box-shadow: 2px 2px 0 var(--hard-shadow); color: var(--wordmark-cream); font-family: var(--bold); font-size: var(--bold-size); line-height: var(--bold-line); font-weight: var(--bold-weight); text-decoration: none; } .ticket:hover { background: var(--lever-lit); } .ticket:active { background: var(--lever-pulled); box-shadow: none; transform: translate(2px, 2px); } /* ONE WORD OPENS BOTH BUTTONS (the owner, 2026-10-04, was told: "One word still opens both"). The gate of the two is written once, on the billboard, as data-steam-gate: closed, wishlist or open. The rules below read it there. None reads a word on a ticket, and none names one ticket apart from the other: so the two show the same label and the same look, with scripts off too. The site's tool refuses a rule that would show a label any other way. the label that goes with the gate's state, and only that one */ .ticket-word { display: none; } [data-steam-gate="closed"] .ticket-word[data-when="closed"], [data-steam-gate="wishlist"] .ticket-word[data-when="wishlist"], [data-steam-gate="open"] .ticket-word[data-when="open"] { display: inline; } /* A closed gate leads nowhere. The block letters keep their own colours, so it is the button that shows it: the colour of a hut's wall, and flat, with no shadow under it. */ [data-steam-gate="closed"] .ticket, .signpost[data-gate="closed"] { background: var(--hut-wall); border-color: var(--hut-trim); box-shadow: none; cursor: default; pointer-events: none; } /* THE OPENING DAY, under the button of the ticket booth. THE LINE IS OFF THE PAGE since 2026-10-04: the day it named can no longer be met, and the owner chose "No day now". THIS RULE WAITS FOR IT: the line comes back the day the game's page on Steam is public, and wears it again. It is the one rule of this livery that nothing wears, and the site's tool knows it by name (Website/README.md, "The opening day"). */ .opening-day { margin: 10px 0 0; color: var(--banner-ink-soft); } /* ============================================ THE NOTICE BOARD - the facts ============================================ */ .notice-board { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 18px; margin: 0 0 26px; padding: 0; list-style: none; color: var(--banner-ink-soft); } .notice { white-space: nowrap; } /* THE POSTCARD RACK STOOD HERE until 2026-09-29: three pictures of Steam. The owner: "Why are the three postcard stil on that page ?" The pictures that move have their place. */ /* on the widest screens the billboard is wider */ @media (min-width: 1560px) { .billboard { --as-wide-as: 1520px; } } /* ============================================ THE SIGNPOSTS - where to find us ============================================ */ .signposts { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 10px; margin: 8px 0 26px; /* 8 above: the empty top of YouTube's picture reaches 11 over the row */ } .signpost { display: inline-block; padding: 8px 16px; background: var(--lever); border: 2px solid var(--lever-rim); box-shadow: 2px 2px 0 var(--hard-shadow); color: var(--wordmark-cream); font-family: var(--bold); font-size: var(--bold-size); line-height: var(--bold-line); font-weight: var(--bold-weight); text-decoration: none; vertical-align: top; } .signpost:hover { background: var(--lever-lit); } .signpost:active { background: var(--lever-pulled); box-shadow: none; transform: translate(2px, 2px); } /* "opening soon", under the name, in the thin hand */ .signpost-note { display: none; color: var(--banner-ink-soft); font-family: var(--thin); font-size: var(--thin-size); line-height: var(--thin-line); font-weight: normal; } .signpost[data-gate="closed"] .signpost-note { display: block; } /* THE NEWSLETTER STOOD HERE until 2026-10-04, in a row of its own under the two logos: its sign on a plank, its field, its button, the line it said under them, and the envelope before its name. Its form failed on the live site, and the owner chose: "Off the page for now". Its rules left the livery with it, the envelope's too: nothing else wore them. They come back with a newsletter that works; the site's tool refuses them back until then. */ /* A COMPANY'S OWN LOGO, SHOWN AS THE COMPANY GIVES IT (the owner, 2026-09-28: "use original logos, no name next to it, just clickable logos"). Nothing touches it and nothing is laid on it: no board, no frame, no shadow, empty space above it and on both sides. It is never made smaller than the company allows, never recoloured, never made into pixels. "opening soon" stands under it while its gate is closed, 8 pixels under the logo itself. Both signposts are 300 pixels wide, the logo in the middle of each. */ .signpost.company-mark, .signpost.company-mark[data-gate="closed"], .signpost.company-mark:hover, .signpost.company-mark:active { width: 300px; padding: 16px 24px; background: none; border: 0; box-shadow: none; transform: none; } .company-mark img { display: block; max-width: none; } /* THE TWO LOGOS ARE EQUALLY HIGH, THEY STAND ON ONE LINE, AND "opening soon" IS AT ONE LEVEL UNDER BOTH. The owner, 2026-09-28: "opening soon under the youtube symbol should move up to be at the same level as the one from Discord". And, the same evening: "Discord and youtube symbols should have same height while maintaining their text below on the same height". YouTube's picture carries empty space of its own round the icon, Discord's carries none (`site.py marks --measure` reads it off the pictures). So the two are measured by THE LOGO ITSELF, not by the edge of its picture: the logo itself is 100 pixels high Discord's symbol is its whole picture, a quarter of it. YouTube's icon is 579 of the 1075 pixels of its picture: the picture is shown 186 high, and the icon is then 100.2 the two begin 32 pixels down and end 132 down, YouTube's within a tenth of a pixel "opening soon" begins 140 down 8 pixels under the foot of each logo The pictures are not touched. Each is shown smaller than it is, in its own proportions: YouTube's is 217 by 186 where its proportions make 217.1. The room round YouTube's is made smaller, and part of its empty space lies outside the signpost, where nothing shows. the picture the logo itself room above room under Discord's symbol 132 by 100 all of it 16 8 YouTube's icon 217 by 186 42.9 to 143.1 down -27 -35 Each signpost is 184 pixels high, an even number, as it is 300 wide: the words beside the logos and under them stand on whole pixels. UNTIL THAT EVENING YouTube's picture was shown at a fifth, 251 by 215: its icon was 115.8 high beside a symbol of 100. */ .mark-of-discord { margin: 16px 60px 8px; } /* 132 by 100, in a space 252 wide */ .mark-of-youtube { margin: -27px 18px -35px 17px; } /* 217 by 186, in a space 252 wide */ /* ============================================ THE STUDIO'S ADDRESS IS SHOWN NOWHERE The owner, 2026-09-28: "I told you email should not be visible". No rule of this livery writes it on the screen, and none can: since the evening of 2026-09-29 the page keeps nothing of it, not even in pieces. ============================================ */ /* ============================================ THE FOUNDER'S PLAQUE - his words, said in a bubble The owner, 2026-09-28: "Quotasation must look more like a quote maybe as a talkin bubble low pixel based on french bande dessinnee and appears when scrolling down". THE BUBBLE IS DRAWN IN WHOLE PIXELS, each 2 pixels of the screen, as a letter's cell is. Nothing of it is a picture: the livery cuts it out of two flat colours. its paper light, as the paper of a comic strip its contour one pixel, dark, as round every drawing of the game its corners in steps, where a rule would round them: from the corner inward, the contour runs . . . # # . # # . . . # . . . # . . . . its tail under its left end, 12 pixels by 12. It opens the bubble's contour and points at the founder's name: # . . . . . . . . . . # the bubble's own foot, opened # . . . . . . . . . # # . . . . . . . . # # . . . . . . . # # . . . . . . # # . . . . . # # . . . . # # . . . # # . . # # . # # # # IT APPEARS WHEN THE VISITOR COMES TO IT (plaque.js): it waits, unseen, until a quarter of it is in the window, and then pops up in three pictures, a tenth of a second each: 6 pixels low, 2 pixels high, in its place. No fading: a state changes in one step. A visitor who asked their device for less motion sees it appear in its place, at once. With scripts off it is there from the start. ============================================ */ .founders-plaque { max-width: 640px; /* a bubble is no banner: the founder's words take three lines on a desk */ margin: 0 auto 30px; padding: 0; scroll-margin-top: 20px; /* the studio's mark leads here */ text-align: left; } /* it waits for the visitor */ .founders-plaque.waiting { opacity: 0; } /* the visitor has come: it pops up */ .founders-plaque.spoken { animation: the-bubble-pops 0.3s steps(1, end) backwards; } @keyframes the-bubble-pops { 0% { transform: translateY(6px); } 34% { transform: translateY(-2px); } 67% { transform: translateY(0); } 100% { transform: translateY(0); } } @media (prefers-reduced-motion: reduce) { .founders-plaque.spoken { animation: none; } } /* THE BUBBLE: the contour's colour, cut to the bubble's outline; and over it the paper, cut one pixel smaller all round. The words stand on the paper. */ .founders-words { position: relative; z-index: 0; margin: 0; padding: 14px 20px; background: var(--speech-contour); color: var(--speech-ink); text-align: center; clip-path: polygon( 6px 0, calc(100% - 6px) 0, calc(100% - 6px) 2px, calc(100% - 2px) 2px, calc(100% - 2px) 6px, 100% 6px, 100% calc(100% - 6px), calc(100% - 2px) calc(100% - 6px), calc(100% - 2px) calc(100% - 2px), calc(100% - 6px) calc(100% - 2px), calc(100% - 6px) 100%, 6px 100%, 6px calc(100% - 2px), 2px calc(100% - 2px), 2px calc(100% - 6px), 0 calc(100% - 6px), 0 6px, 2px 6px, 2px 2px, 6px 2px); } .founders-words::before { content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: -1; background: var(--speech-paper); clip-path: polygon( 6px 2px, calc(100% - 6px) 2px, calc(100% - 6px) 4px, calc(100% - 4px) 4px, calc(100% - 4px) 6px, calc(100% - 2px) 6px, calc(100% - 2px) calc(100% - 6px), calc(100% - 4px) calc(100% - 6px), calc(100% - 4px) calc(100% - 4px), calc(100% - 6px) calc(100% - 4px), calc(100% - 6px) calc(100% - 2px), 6px calc(100% - 2px), 6px calc(100% - 4px), 4px calc(100% - 4px), 4px calc(100% - 6px), 2px calc(100% - 6px), 2px 6px, 4px 6px, 4px 4px, 6px 4px); } /* THE FOUNDER'S NAME, under the bubble's tail. The tail is drawn above the name: 24 pixels by 24, its first row on the bubble's own foot, which it opens. */ .founders-name { position: relative; margin: 24px 0 0; /* the tail reaches 22 under the bubble's foot */ padding: 0 0 0 8px; color: var(--wordmark-cream); font-family: var(--bold); font-size: var(--bold-size); line-height: var(--bold-line); font-weight: var(--bold-weight); text-align: left; } .founders-name::before, .founders-name::after { content: ""; position: absolute; top: -26px; /* 24 of room above the name, and the 2 of the bubble's foot */ left: 40px; width: 24px; height: 24px; } /* the tail's contour */ .founders-name::before { background: var(--speech-contour); clip-path: polygon( 0 2px, 22px 2px, 22px 4px, 20px 4px, 20px 6px, 18px 6px, 18px 8px, 16px 8px, 16px 10px, 14px 10px, 14px 12px, 12px 12px, 12px 14px, 10px 14px, 10px 16px, 8px 16px, 8px 18px, 6px 18px, 6px 20px, 4px 20px, 4px 22px, 2px 22px, 2px 24px, 0 24px); } /* the tail's paper, which opens the bubble's foot */ .founders-name::after { background: var(--speech-paper); clip-path: polygon( 2px 0, 22px 0, 22px 2px, 20px 2px, 20px 4px, 18px 4px, 18px 6px, 16px 6px, 16px 8px, 14px 8px, 14px 10px, 12px 10px, 12px 12px, 10px 12px, 10px 14px, 8px 14px, 8px 16px, 6px 16px, 6px 18px, 4px 18px, 4px 20px, 2px 20px); } /* ============================================ THE EXIT GATE - the bottom of the page ============================================ */ .exit-gate { padding: 14px 16px 22px; padding-right: calc(16px + mod(100%, 2px)); /* an even number of pixels for the words, as the billboard */ background: var(--hut-wall); border-top: 2px solid var(--hut-trim); color: var(--banner-ink-soft); text-align: center; } .small-print { margin: 0 0 8px; } /* the link that opens the legal notice */ .regulations-sign { color: var(--water-glint); } /* ============================================ THE TWO POP-UPS - the legal notice, and guest services The owner, 2026-09-29, of the notice that unfolded under the foot of the page: "make it a pop up of neew window because extending text beyond visible page is bad". And, the same evening, of a form to send the studio a message, in the place of a link that handed out its address: "do it." EACH IS SHOWN WHILE THE ADDRESS ENDS WITH ITS NAME, #park-regulations or #guest-services, and at no other time: a link leads there, "Close" and the veil lead to #the-park, the name of nothing, so that the page stays where the visitor was. No script is needed. the veil the night of the park, over the whole window: the page is seen under it, darker. A press on it shuts the pop-up the board a panel of the game in the middle of the window: square corners, a rim of 2 pixels, one hard shadow. It is never higher than the window, and the page under it keeps its length its title in the studio's bold hand, as a signpost "Close" a lever, as the Steam button is A POP-UP STANDS ON WHOLE PIXELS, or the studio's letters would blur. The room round the board is made even both ways, as the billboard's is: a pixel is added on the right in a window of an odd width, and at the foot in a window of an odd height. Every height inside a board is even. So what is left on each side of a board is a whole number of pixels. ============================================ */ .park-regulations, .guest-services { display: none; position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 20; /* over everything of the page: the promenade's highest layer is 5 */ align-items: center; justify-content: center; padding: 16px; padding-right: calc(16px + mod(100%, 2px)); padding-bottom: calc(16px + mod(100vh, 2px)); } .park-regulations:target, .guest-services:target { display: flex; } /* WITH SCRIPTS OFF the desk sends a visitor back to the page at one of the lines of guest services: the form is opened for that line. The rule stands alone: a browser that does not know :has leaves it, and keeps the rule above. */ .guest-services:has(.services-word:target) { display: flex; } .regulations-veil, .services-veil { position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: var(--night-veil); cursor: default; } /* a title, what is read or written, and the levers, one under the other */ .regulations-board, .services-board { position: relative; /* over the veil */ display: flex; flex-direction: column; width: 100%; max-width: 680px; max-height: 100%; padding: 16px 20px 20px; background: var(--night-lawn); border: 2px solid var(--lever-rim); box-shadow: 2px 2px 0 var(--hard-shadow); text-align: center; } .regulations-title, .services-title { flex: 0 0 auto; margin: 0 0 12px; color: var(--wordmark-cream); font-family: var(--bold); font-size: var(--bold-size); line-height: var(--bold-line); font-weight: var(--bold-weight); } /* THE LEGAL NOTICE: its text is what gives way when the window is low. It is scrolled, and the title and "Close" stay in sight. */ /* The legal notice keeps the visitor's own letters: it is there to be read closely and copied. A line of it is 22 pixels high, an even number, as every height of the board is. */ .regulations-text { flex: 0 1 auto; min-height: 0; overflow: auto; margin: 0 0 16px; color: var(--chalk); font-family: var(--letters); font-size: 14px; line-height: 22px; font-synthesis: weight style; text-align: left; } .regulations-text p { margin: 0 0 10px; } /* what a paragraph is about stands on a line of its own, above it */ .regulations-text strong { display: block; color: var(--banner-ink); } /* the links of the notice that lead to guest services */ .services-sign { color: var(--water-glint); } /* THE LEVERS OF THE TWO POP-UPS: "Close", and "Send". Each is 52 pixels high: a line of 36, 6 above and under it, and its rim. Under the pointer a lever is lighter, its rim too; pressed, it is the green of a pulled lever and moves into the place of its shadow. "Send" stays pulled while the letter is on its way. */ .regulations-close, .services-close, .services-press { flex: 0 0 auto; align-self: center; box-sizing: border-box; height: 52px; margin: 0; padding: 6px 16px; background: var(--lever); border: 2px solid var(--lever-rim); border-radius: 0; box-shadow: 2px 2px 0 var(--hard-shadow); color: var(--wordmark-cream); font-family: var(--bold); font-size: var(--bold-size); line-height: var(--bold-line); font-weight: var(--bold-weight); text-decoration: none; cursor: pointer; } .regulations-close:hover, .services-close:hover, .services-press:hover { background: var(--lever-lit); border-color: var(--lever-pulled); } .regulations-close:active, .services-close:active, .services-press:active, .services-board[data-letter="on-its-way"] .services-press { background: var(--lever-pulled); border-color: var(--lever-pulled); box-shadow: none; transform: translate(2px, 2px); } .services-board[data-letter="on-its-way"] .services-press { cursor: default; } /* ============================================ GUEST SERVICES - the form to send the studio a message The second pop-up. A visitor writes their own address, for the answer, and their message. NOTHING OF THE STUDIO'S ADDRESS IS ON IT, IN IT OR BEHIND IT: the form goes to the site's own desk on the server. its two fields light paper with a dark contour, as the founder's bubble: the visitor writes on them, in the thin hand. Over each, what it is for its message the field that gives way when the window is low; in a window too low for the whole form, the board is scrolled its lines one line over the levers, shown when there is something to say, and only then: the green of money coming in for a letter that left, the game's red, which it keeps for "will not work", for what went wrong, the soft ink of a note for a copy on one's own machine. The script shows one (said); with scripts off the desk sends the visitor back to the page at the line itself (:target) its decoy a field no visitor sees or reaches its levers "Send" and "Close", side by side ============================================ */ .services-board { overflow: auto; } /* THE DECOY: a field no visitor sees or reaches. It is put away to the left of the screen, where nothing shows; a program that reads the page finds a field as any other. */ .services-decoy { position: absolute; top: 0; left: -9000px; width: 10px; height: 10px; margin: 0; padding: 0; border: 0; opacity: 0; } .services-label { flex: 0 0 auto; margin: 0 0 4px; color: var(--banner-ink-soft); font-family: var(--thin); font-size: var(--thin-size); line-height: var(--thin-line); font-weight: normal; text-align: left; } .services-address, .services-words { box-sizing: border-box; width: 100%; margin: 0 0 12px; background: var(--speech-paper); border: 2px solid var(--speech-contour); border-radius: 0; box-shadow: 2px 2px 0 var(--hard-shadow); color: var(--speech-ink); font-family: var(--thin); font-size: var(--thin-size); line-height: var(--thin-line); font-weight: normal; } .services-address { flex: 0 0 auto; height: 52px; padding: 0 12px; } .services-words { flex: 1 1 auto; height: 180px; min-height: 56px; padding: 10px 12px; resize: none; /* a field pulled to an odd height by hand would leave letters between two pixels */ } .services-word { display: none; flex: 0 0 auto; margin: 0 0 12px; color: var(--banner-ink-soft); } .services-word.said, .services-word:target { display: block; } .services-word[data-word="sent"] { color: var(--takings); } .services-word[data-word="check"], .services-word[data-word="empty"], .services-word[data-word="post"], .services-word[data-word="later"] { color: var(--wont-work); } .services-levers { flex: 0 0 auto; display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; } /* ============================================ SMALL SCREENS ============================================ */ @media (max-width: 520px) { .ticket { padding: 12px 18px; } } /* UNDER 620 PIXELS OF WINDOW the park's name and the languages cannot hang side by side. Over the promenade the languages hang under the name's board, 8 pixels lower than its foot. Its foot is its top, one line of letters, its two margins of 2 of the promenade's pixels and its two edges of 1. On the page for a wrong address there is no gate to hang the name over: the languages keep their corner, and the name stands under the studio's mark, 8 pixels lower than its foot. */ @media (max-width: 619px) { .leaflet-rack { top: calc(var(--name-top) + var(--name-line) + 6 * var(--promenade-pixel) + 8px); } .forecourt.bare .leaflet-rack { top: 8px; } .forecourt.bare .gate-sign { top: 66px; } .forecourt.bare { min-height: calc(66px + var(--name-line) + 6 * var(--promenade-pixel) + 12px); } }