/* Projector screen. The only visual requirement is being readable from the back of the room: everything is sized in viewport units, because the projector on the day could have any resolution. White background and black QR on purpose — the inverse confuses the camera on some phones. */ /* `:has` instead of a class on the : there is a single layout for the whole app, and the body's default margin would put a scrollbar on a screen nobody is going to scroll. */ body:has(.projector) { margin: 0; background: #fff; } .projector { box-sizing: border-box; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1.5vh; min-height: 100vh; padding: 3vh 2vw; font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; color: #1a1a1a; text-align: center; } .projector__event { margin: 0; font-size: clamp(1.5rem, 4vh, 3rem); line-height: 1.1; } .projector__call { margin: 0; font-size: clamp(1rem, 2.6vh, 1.75rem); color: #4a4a4a; } .projector__code { display: block; line-height: 0; } /* The QR eats whatever height is left over: it is the thing that has to be scanned from a distance. */ .projector__qr { width: min(62vh, 80vw); height: auto; } .projector__scoreboard { display: flex; align-items: baseline; gap: clamp(0.5rem, 1.5vh, 1.25rem); margin: 0; } .projector__count { font-size: clamp(2rem, 9vh, 6rem); font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; color: #9c1420; } .projector__label { font-size: clamp(1rem, 3vh, 2rem); color: #4a4a4a; } /* Registrations closed. The organiser is across the room, next to the door, and has to be able to tell at a glance: the word takes the place of the call to action, at the size of a headline, and the QR behind it goes quiet without disappearing — it is still the way back the moment the door reopens. No animation: nothing on this screen may blink for four hours. */ .projector__closed { margin: 0; padding: 0.25em 0.75em; border-radius: 0.15em; background: #9c1420; color: #fff; font-size: clamp(1.5rem, 5vh, 3.5rem); font-weight: 800; letter-spacing: 0.02em; line-height: 1.1; } .projector--closed .projector__qr { opacity: 0.25; }