/* ===== The door: a matrix screen, the ticket, and the terms ================================ * Loaded with invite.css by the invite modal (and by the /t/ share page). Self-contained in the * sense that every token has a fallback, so the share page renders without styles.css. * * Palette: THE SITE'S OWN. The matte, green-biased black ramp the logo sits on, the brand acid green * as the thing that glows, near-white text. It used to be a synthwave sunset (indigo, magenta, cyan) * wrapped around a $GWC ticket; the door now looks like the house it opens. Gold is still reserved for * the OG countdown, so "time is running out" never shares a colour with "this is yours". */ :root { /* the text-size floor, as in styles.css — these pages load this sheet alone */ --text-floor: clamp(14px, calc(14px + (100vw - 375px) * 0.01252), 19pt); --text-base: clamp(1rem, calc(1rem + (100vw - 375px) * 0.00442), 1.25rem); --g-ink: var(--ink, #050604); /* the far end of the grid */ --g-ink-2: var(--ink-2, #0c0e09); --g-ink-3: var(--ink-3, #14170f); --g-focus: var(--focus, #f2f6ec); /* never accent-derived, as on the rest of the site */ /* The TYPE on every green control. Not --g-ink: that follows the reader's background preference (prefs.js moves --ink), and a label must stay dark on green whatever the page behind it is. --ctl-ink is the site's own label ink, which prefs.js never touches. */ --g-on: var(--ctl-ink, #020301); /* The site's green, not a copy of it. Inside the modal styles.css is loaded and these resolve to the live --green family — prefs.js's per-reader accent included — so a rebrand or an accent change reaches the ticket. The literals only carry the standalone pages (privacy, terms, the gate redirect), none of which draws a control from this file. */ --g-green: var(--green, #a8ce00); /* the site's green */ --g-green-hi: var(--green-bright, #c6f000); --g-green-lo: var(--green-dark, var(--g-green)); /* ghost / spent fill (and the disabled fallback when styles.css is absent) — black type clears it at 6.3:1 */ --g-gold: #ffb340; --g-text: var(--text, #f2f6ec); --g-dim: var(--text-dim, #b6beac); --g-paper: var(--ink-2, #0c0e09); /* the matrix grid every control on the site wears (styles.css --mx-*), aliased so the same tile renders when this file is loaded on its own: the same lines, cells, halo and pitch */ --gmx-line: var(--mx-line, color-mix(in srgb, var(--g-ink) 26%, transparent)); --gmx-cell: var(--mx-cell, var(--g-green-hi)); --gmx-glow: var(--mx-glow, color-mix(in srgb, var(--g-green-hi) 55%, transparent)); --gmx-size: var(--mx-size, 7px); } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; } html { font-size: var(--text-base); } body { font-size: max(var(--text-floor), 1rem); line-height: 1.5; } body.gate { min-height: 100vh; background: var(--g-ink); color: var(--g-text); font-family: 'Rubik', system-ui, -apple-system, 'Segoe UI', sans-serif; overflow-x: hidden; } /* ---- the screen: matrix rain, a green glow, and a horizon grid ---- */ /* Above the sky, below everything else. Both are fixed, so without this the sky — which comes later in the DOM — paints its opaque gradient straight over the rain and hides it completely. */ #gate-bg { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; z-index: 1; display: block; } .gate-sky { position: fixed; inset: 0; z-index: 0; pointer-events: none; background: radial-gradient(120% 80% at 50% 80%, color-mix(in srgb, var(--g-green) 16%, transparent) 0%, transparent 60%), radial-gradient(90% 60% at 50% 100%, color-mix(in srgb, var(--g-green-hi) 10%, transparent) 0%, transparent 65%), linear-gradient(180deg, var(--g-ink) 0%, var(--g-ink-2) 55%, var(--g-ink-3) 100%); } /* scanlines: the CRT the whole thing is supposedly on */ .gate-scan { position: fixed; inset: 0; z-index: 3; pointer-events: none; opacity: 0.16; background: repeating-linear-gradient(180deg, rgba(0,0,0,0) 0 2px, rgba(0,0,0,0.55) 2px 4px); } .gate-vig { position: fixed; inset: 0; z-index: 3; pointer-events: none; background: radial-gradient(120% 90% at 50% 45%, transparent 45%, rgba(0,0,0,0.65) 100%); } /* ---- layout ---- */ .gate-wrap { position: relative; z-index: 4; min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1.4rem; padding: 2.2rem 1.1rem 3rem; text-align: center; } .gate-kicker { font-size: max(var(--text-floor), 0.72rem); letter-spacing: 0.34em; text-transform: uppercase; color: var(--g-green-hi); margin: 0; font-weight: 700; text-shadow: 0 0 14px color-mix(in srgb, var(--g-green) 45%, transparent); } .gate-title { font-family: 'Luckiest Guy', cursive; margin: 0; font-size: max(var(--text-floor), clamp(2rem, 8vw, 3.6rem)); line-height: 1.02; letter-spacing: 0.012em; color: var(--g-text); text-wrap: balance; text-shadow: 0 0 18px color-mix(in srgb, var(--g-green) 35%, transparent), 0 3px 0 var(--g-ink); } .gate-title .hl { color: var(--g-green-hi); text-shadow: 0 0 18px color-mix(in srgb, var(--g-green) 60%, transparent), 0 3px 0 var(--green-dark, #7e9a00); } .gate-sub { margin: 0; max-width: 34rem; color: var(--g-dim); line-height: 1.6; font-size: max(var(--text-floor), 0.96rem); } .gate-sub b { color: var(--g-text); } /* ---- the ticket ------------------------------------------------------ A real ticket: a body, a perforation, and a stub. The notches are two circles punched out of the background colour at the seam. */ .ticket-stage { perspective: 1400px; width: min(100%, 46rem); } .ticket { position: relative; width: 100%; display: grid; grid-template-columns: minmax(0, 1fr) 10.5rem; border-radius: 16px; overflow: hidden; background: linear-gradient(135deg, var(--g-ink-3) 0%, var(--g-ink-2) 55%, var(--g-ink) 100%); box-shadow: 0 30px 70px -20px rgba(0,0,0,0.85), 0 0 0 1.5px color-mix(in srgb, var(--g-green) 45%, transparent), 0 0 42px color-mix(in srgb, var(--g-green) 20%, transparent); transform-style: preserve-3d; transition: transform 220ms ease; animation: ticket-float 7s ease-in-out infinite; cursor: pointer; text-align: left; color: inherit; font: inherit; border: 0; padding: 0; } @keyframes ticket-float { 0%, 100% { transform: translateY(0) rotateX(0deg); } 50% { transform: translateY(-12px) rotateX(1.4deg); } } .ticket:focus-visible { outline: 3px solid var(--g-focus); outline-offset: 5px; } /* the sheen — a slow sweep of green light across the face */ .ticket::after { content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 4; background: linear-gradient(115deg, transparent 18%, color-mix(in srgb, var(--g-green) 8%, transparent) 32%, color-mix(in srgb, var(--g-text) 7%, transparent) 44%, color-mix(in srgb, var(--g-green) 14%, transparent) 52%, color-mix(in srgb, var(--g-green-hi) 20%, transparent) 58%, transparent 74%); background-size: 260% 260%; animation: holo 6.5s linear infinite; mix-blend-mode: screen; } @keyframes holo { 0% { background-position: 120% 0; } 100% { background-position: -60% 0; } } .tk-body { display: block; position: relative; z-index: 2; padding: 1.15rem 1.25rem; min-width: 0; } .tk-stub { position: relative; z-index: 2; padding: 1.15rem 0.8rem; background: rgba(0,0,0,0.26); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.5rem; text-align: center; } /* the perforation between body and stub */ .tk-perf { position: absolute; top: 0; bottom: 0; right: 10.5rem; z-index: 3; width: 0; border-left: 2.5px dashed color-mix(in srgb, var(--g-green) 30%, transparent); } .tk-notch { position: absolute; right: calc(10.5rem - 9px); z-index: 3; width: 18px; height: 18px; border-radius: 50%; background: var(--g-ink); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--g-green) 12%, transparent); } .tk-notch.top { top: -9px; } .tk-notch.bot { bottom: -9px; } .tk-top { display: flex; align-items: center; gap: 0.55rem; } /* The ticket lives inside a