/* ---------------------------------------------------------------- * * Main menu * * Laid out inside a 1440x900 stage, the size the screen was drawn at, * so every offset below is a design pixel. The stage is centred in the * viewport by .main-menu-page itself (not by the body rule in style.css, * which the 404 screens use); the media query at the bottom unpins it * for narrow screens. * * Every selector here is scoped under .main-menu-page. The menu now shares * a document with not-found.css, and the two stylesheets both use .content, * .eyebrow, .eyebrow-line, .eyebrow-text and .logo for different things -- * the prefix keeps each set inside its own screen. * ---------------------------------------------------------------- */ /* The wrapper that used to be : a fixed layer over the 404 screens, above #the-question (z-index 200). Hidden by visibility rather than by display, so the backdrop photos are fetched during the intro and are already decoded when the fade starts; visibility also keeps the links, field and button out of the tab order until then. The visibility transition is stepped -- delayed to the end of the fade on the way in from hidden, immediate on the way out -- so the menu is interactive only once it is actually on screen. */ .main-menu-page { position: fixed; inset: 0; z-index: 300; display: flex; align-items: center; justify-content: center; overflow: hidden; opacity: 0; visibility: hidden; transition: opacity 800ms ease-out, visibility 0s linear 800ms; } .main-menu-page.revealed { opacity: 1; visibility: visible; transition: opacity 800ms ease-out, visibility 0s; } /* ---------------------------------------------------------------- * * Backdrop * ---------------------------------------------------------------- */ /* Sized against the viewport rather than the stage: on a screen bigger than 1440x900 the room should still reach the edges. The two layers keep the proportions they were composed at, expressed as percentages of the viewport so 1440x900 reproduces the drawing exactly (e.g. the room's 1714px = 119.028% of 1440). z-index 0 rather than -1: it has to sit behind #main-menu but in front of the 404 screens this layer covers, and a negative index would drop it behind them the moment the fade reaches opacity: 1 and .main-menu-page stops being a stacking context. The opaque base colour is what hides them. */ .main-menu-page .backdrop { position: fixed; inset: 0; z-index: 0; overflow: hidden; background-color: #efeee7; } .main-menu-page .backdrop-room, .main-menu-page .backdrop-paper { position: absolute; background-position: center; background-size: cover; background-repeat: no-repeat; } /* Mirrored: the photo's window is on the left, and the screen wants the light coming in from the top right, across the empty half of the layout. */ .main-menu-page .backdrop-room { left: -14.167%; /* -204px */ top: -0.111%; /* -1px */ width: 119.028%; /* 1714px */ height: 106.778%; /* 961px */ background-image: url("../img/room.124fae920ae5.webp"); transform: scaleX(-1); /* Held right back: at full strength the photo reads as a photograph behind the text. At 30% it survives only as the light and the window bars falling across the paper, which is all the screen wants from it. */ opacity: 0.8; } /* Multiplied over the room so the paper grain darkens the photo instead of covering it: the shadows keep their shape and pick up the texture. The blend is contained by .backdrop's own stacking context, so it reaches the room only -- never the 404 screens underneath. */ .main-menu-page .backdrop-paper { left: -4.792%; /* -69px */ top: -5%; /* -45px */ width: 107.014%; /* 1541px */ height: 114.111%; /* 1027px */ background-image: url("../img/white-crumpled-paper.9072c1d09528.webp"); mix-blend-mode: multiply; } /* ---------------------------------------------------------------- * * Stage * ---------------------------------------------------------------- */ .main-menu-page #main-menu { position: relative; z-index: 1; width: 1440px; height: 900px; flex: none; } .main-menu-page #main-menu .logo { position: absolute; top: 27px; left: 155px; width: 118px; height: 118px; } /* ---------------------------------------------------------------- * * Top navigation * ---------------------------------------------------------------- */ .main-menu-page .top-nav { position: absolute; top: 69px; right: 164px; display: flex; gap: 20px; } /* Same chip as .find-error / .scroll-down in not-found.css: a hairline box over a barely-there frosted panel, so it sits on the paper without blocking the shadows crossing behind it. */ .main-menu-page .chip { display: inline-flex; align-items: center; justify-content: center; gap: 10px; height: 44px; padding: 0 22px; border: 1px solid rgba(89, 89, 89, 0.4); border-radius: 3px; background: rgba(239, 238, 231, 0.2); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); font-family: "Iosevka Charon Mono", monospace; font-weight: 500; font-size: 16px; line-height: 1; color: #595959; text-decoration: none; white-space: nowrap; cursor: pointer; transition: border-color 200ms ease-out, color 200ms ease-out, background-color 200ms ease-out; } .main-menu-page .chip:hover { border-color: rgba(89, 89, 89, 0.75); background: rgba(239, 238, 231, 0.45); } /* The one call to action on the page, so it takes the accent border. The label stays grey: only the frame and the arrow carry the red. */ .main-menu-page .chip-accent { border-color: rgba(218, 30, 55, 0.5); } .main-menu-page .chip-accent .arrow { color: #da1e37; } .main-menu-page .chip-accent:hover { border-color: rgba(218, 30, 55, 0.85); background: rgba(218, 30, 55, 0.06); } /* ---------------------------------------------------------------- * * Content column * ---------------------------------------------------------------- */ /* Each block is pinned to the baseline grid it was drawn on rather than stacked in flow, so a font swapping in can't push the ones below it. */ .main-menu-page .content { position: absolute; left: 162px; top: 0; width: 700px; } .main-menu-page .content > * { position: absolute; left: 0; top: 0; width: 100%; } .main-menu-page .headline { top: 231px; font-family: "Lora", Georgia, serif; font-weight: 400; font-size: 43px; line-height: 1; letter-spacing: -0.01em; color: #1a1c20; } .main-menu-page .lede { top: 310px; font-family: "General Sans", sans-serif; font-weight: 400; font-size: 18px; line-height: 36px; color: #1a1c20; } /* The one line that names the whole point of the club, so it changes voice: the serif of the headline, in bold, inside the sans paragraph. */ .main-menu-page .lede strong { font-family: "Lora", Georgia, serif; font-weight: 600; font-size: 17.75px; } /* ---------------------------------------------------------------- * * Next session * ---------------------------------------------------------------- */ .main-menu-page .session { top: 479px; } /* The 404 screen has an .eyebrow too, at its own size and spacing; both are scoped, so neither reaches the other. */ .main-menu-page .eyebrow { display: flex; align-items: center; gap: 28px; margin: 0 0 12px; } .main-menu-page .eyebrow-line { display: inline-block; width: 62px; height: 1.5px; background: #da1e37; } .main-menu-page .eyebrow-text { font-family: "Iosevka Charon Mono", monospace; font-weight: 500; font-size: 16px; letter-spacing: 0.2em; text-transform: uppercase; color: #da1e37; } .main-menu-page .session-title { font-family: "General Sans", sans-serif; font-weight: 500; font-size: 24px; line-height: 1; color: #1a1c20; margin: 0 0 21px; } .main-menu-page .session-meta { font-family: "General Sans", sans-serif; font-weight: 400; font-size: 18px; line-height: 1; letter-spacing: 0.1em; color: #1a1c20; } /* ---------------------------------------------------------------- * * Sign-up * ---------------------------------------------------------------- */ .main-menu-page .signup { top: 626px; } /* Ruled like a line on a form rather than boxed, so the field reads as something to write on. */ .main-menu-page .email { display: block; width: 208px; padding: 0 0 10px 11px; border: none; border-bottom: 1px solid rgba(26, 28, 32, 0.12); border-radius: 0; background: transparent; font-family: "Iosevka Charon Mono", monospace; font-weight: 500; font-size: 18px; line-height: 1; color: #1a1c20; transition: border-color 200ms ease-out; } .main-menu-page .email::placeholder { color: #595959; opacity: 1; } .main-menu-page .email:focus { outline: none; border-bottom-color: #da1e37; } .main-menu-page .subscribe { display: flex; align-items: center; gap: 12px; margin-top: 22px; font-family: "General Sans", sans-serif; font-weight: 500; font-size: 15px; line-height: 1; color: #1a1c20; cursor: pointer; } .main-menu-page .subscribe input { appearance: none; -webkit-appearance: none; flex: none; width: 17px; height: 17px; margin: 0; border: 1px solid rgba(26, 28, 32, 0.17); border-radius: 2px; background: #fff; cursor: pointer; transition: border-color 200ms ease-out, background-color 200ms ease-out; } .main-menu-page .subscribe input:checked { border-color: #da1e37; background-color: #da1e37; /* The tick is drawn rather than typed so it can't inherit a missing glyph. */ background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 6.2 4.9 8.6 9.5 3.6' fill='none' stroke='%23fff' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: center; } .main-menu-page .subscribe input:focus-visible { outline: 2px solid #da1e37; outline-offset: 2px; } /* The same chip as the navigation, given the width the drawing gives it. */ .main-menu-page .seat { position: absolute; top: 91px; left: 0; display: inline-flex; align-items: center; justify-content: flex-start; gap: 24px; width: 179px; height: 44px; padding: 0 15px; border: 1px solid rgba(89, 89, 89, 0.08); border-radius: 3px; background: rgba(239, 238, 231, 0.2); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); font-family: "Iosevka Charon Mono", monospace; font-weight: 500; font-size: 16px; line-height: 1; color: #595959; white-space: nowrap; cursor: pointer; transition: border-color 200ms ease-out, background-color 200ms ease-out; } /* Held back until hover: at rest it is only a hint that the button leads somewhere. */ .main-menu-page .seat .arrow { color: rgba(89, 89, 89, 0.4); transition: color 200ms ease-out, transform 200ms ease-out; } .main-menu-page .seat:hover { border-color: rgba(89, 89, 89, 0.5); background: rgba(239, 238, 231, 0.45); } .main-menu-page .seat:hover .arrow { color: #da1e37; transform: translateX(3px); } /* ---------------------------------------------------------------- * * The answer to the form * * A saved seat leaves nothing left to fill in, so the note takes the form's * place rather than joining it: the fields fade out, and only once they are * gone does the note fade in where the address line was. .settled then takes * them out of flow -- it lands on the same beat as the note appearing, so the * reflow it causes below the design size happens while nothing is visible. * * A rejected address is the other case: the form is still there to be fixed, * so it stays and the note goes underneath the button. * ---------------------------------------------------------------- */ .main-menu-page .signup-fields { transition: opacity 400ms ease-out; } .main-menu-page .signup.saved .signup-fields { opacity: 0; pointer-events: none; } .main-menu-page .signup.saved.settled .signup-fields { display: none; } /* While the POST is in flight: dimmed, and no second press. */ .main-menu-page .signup.sending .signup-fields { opacity: 0.5; pointer-events: none; } .main-menu-page .signup-note { position: absolute; left: 0; width: 340px; margin: 0; font-family: "General Sans", sans-serif; font-weight: 500; opacity: 0; transition: opacity 400ms ease-out; } /* Where the address line was, at the size of the session above it. */ .main-menu-page .signup.saved .signup-note { top: 0; font-size: 18px; line-height: 30px; color: #1a1c20; opacity: 1; transition-delay: 400ms; /* held back until the fields have gone */ } .main-menu-page .signup.failed .signup-note { top: 149px; font-size: 15px; line-height: 22px; color: #da1e37; opacity: 1; } /* ---------------------------------------------------------------- * * Below the design size * * The stage is unpinned and everything falls back into flow: the absolute * offsets above only make sense at the 1440px they were drawn for, and * anything narrower would crop them. The shape of the screen survives -- * mark top left, navigation top right, one column under it. * * The layer stays fixed to the viewport, so the column scrolls inside it * (the body is overflow:hidden for the 404 screens above). * ---------------------------------------------------------------- */ @media (max-width: 1439px) { .main-menu-page { display: block; overflow-y: auto; } .main-menu-page #main-menu { width: 100%; height: auto; min-height: 100vh; padding: 36px clamp(24px, 5vw, 90px) 80px; } .main-menu-page #main-menu .logo { position: static; display: block; width: 96px; height: 96px; } .main-menu-page .top-nav { top: 46px; right: clamp(24px, 5vw, 90px); } .main-menu-page .content, .main-menu-page .content > *, .main-menu-page .seat { position: static; width: auto; } .main-menu-page .content { margin-top: 64px; max-width: 620px; } .main-menu-page .headline { font-size: clamp(34px, 5vw, 43px); } .main-menu-page .lede { margin-top: 30px; } .main-menu-page .session { margin-top: 52px; } .main-menu-page .signup { margin-top: 46px; } .main-menu-page .email { width: min(100%, 320px); } .main-menu-page .seat { margin-top: 30px; } /* Back in flow: the saved note simply stands where the fields stood (they are display:none by the time it shows), the rejected one under them. */ .main-menu-page .signup-note { position: static; width: auto; } .main-menu-page .signup.failed .signup-note { margin-top: 22px; } } /* Under a phone-ish width the navigation can no longer share the top line with the mark, so it drops beneath it and the type steps down a size. */ @media (max-width: 720px) { .main-menu-page #main-menu { padding: 32px 24px 64px; } .main-menu-page #main-menu .logo { width: 88px; height: 88px; } .main-menu-page .top-nav { position: static; flex-wrap: wrap; gap: 12px; margin-top: 30px; } .main-menu-page .chip { height: 40px; padding: 0 18px; font-size: 14px; } .main-menu-page .content { margin-top: 48px; } .main-menu-page .lede { font-size: 17px; line-height: 32px; } .main-menu-page .lede strong { font-size: 16.75px; } .main-menu-page .eyebrow { gap: 18px; } .main-menu-page .eyebrow-text { font-size: 14px; } .main-menu-page .session-title { font-size: clamp(20px, 5vw, 24px); line-height: 1.25; } .main-menu-page .session-meta { font-size: 17px; } }