/* The challenge box and its video lightbox. Loaded by two pages that share almost nothing else: the homepage, which has the panel script behind it, and /leaderboard, which is server-rendered and ships no module at all. So everything here is plain CSS over static markup, and it borrows .eyebrow, .button, .landing-cta and .landing-lead from landing.css, which both pages already load before this file. */ .challenge-promo { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 40px; align-items: center; margin-top: 52px; padding: 30px 32px; border: 1px solid #4b3f85; border-radius: var(--radius); background: linear-gradient(150deg, #241d47, #151129 70%); } /* The prize is the only thing on the page competing with the h1 for a first read, so it gets the gold the leaderboard already uses for the prize figure rather than the purple everything else here is painted in. */ .challenge-promo h2 { margin: 8px 0 0; color: #ffd479; font-size: clamp(23px, 3.2vw, 32px); font-weight: 800; line-height: 1.5; } .challenge-promo .landing-lead { margin-top: 14px; font-size: 13.5px; line-height: 2.1; } .challenge-promo-cta { margin-top: 26px; } .challenge-promo-note { display: block; margin-top: 14px; color: var(--muted); font-size: 11.5px; } /* 16:9 held by the aspect-ratio rather than by the image's own height, so the row never reflows between the layout and the picture arriving — this box sits above the fold on a phone and a late shift here pushes the whole page down under the reader's thumb. */ .challenge-video { position: relative; display: block; overflow: hidden; aspect-ratio: 16 / 9; border-radius: 14px; border: 1px solid #3a3358; background: #0d0b19; transition: transform .2s, border-color .2s; } .challenge-video img { display: block; width: 100%; height: 100%; object-fit: cover; } .challenge-video:hover, .challenge-video:focus-visible { transform: translateY(-3px); border-color: #7c5cff; } .challenge-video:focus-visible { outline: 2px solid #a48bff; outline-offset: 3px; } .challenge-video-play { position: absolute; inset: 0; display: grid; place-items: center; /* Not decoration: the thumbnail's own subject is bright and the glyph sits on top of it. */ background: radial-gradient(ellipse at center, #0d0b1966, transparent 62%); } .challenge-video-play svg { width: clamp(54px, 9vw, 68px); height: auto; filter: drop-shadow(0 6px 18px #0009); } .challenge-video-play-shell { fill: #1c1733cc; transition: fill .2s; } .challenge-video-play-arrow { fill: #fff; } .challenge-video:hover .challenge-video-play-shell, .challenge-video:focus-visible .challenge-video-play-shell { fill: #ff0033e6; } /* ---- The lightbox ---------------------------------------------------------------------------- Built by challenge-video.js and appended to , so none of this can rely on being inside .landing or on any of the shell's stacking contexts. */ /* The vertical padding is not symmetric decoration: the close button hangs outside the stage, above it on a desktop and below it on a phone, and this is the gutter it hangs into. */ .challenge-lightbox { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; padding: 68px 22px 22px; background: #06050ded; backdrop-filter: blur(6px); animation: challenge-lightbox-in .18s ease-out; } @keyframes challenge-lightbox-in { from { opacity: 0; } } /* The stage is the positioning context; the frame is the clipped one. Keeping them separate is what lets the close button sit outside the video without overflow:hidden painting it away. The second width term is the one that matters on a phone held sideways to watch something: a 16:9 box sized purely from the width is taller than a 390px-high viewport, and the video would run off both ends of the screen with the controls among the parts that went missing. */ .challenge-lightbox-stage { position: relative; width: min(1040px, 100%, (100dvh - 110px) * 16 / 9); } .challenge-lightbox-frame { position: relative; aspect-ratio: 16 / 9; border-radius: 14px; overflow: hidden; background: #000; box-shadow: 0 30px 80px #000000a6; } .challenge-lightbox iframe { display: block; width: 100%; height: 100%; border: 0; } /* Always outside the frame, never on top of it: the player draws its own title bar, CC and settings buttons across the same corner, and a close button laid over them is both hard to hit and taking a tap away from a control that was already there. Above the video on a desktop, below it on a phone — where the frame is nearly the full width, the room left over is underneath. Lit rather than tinted. The first version was #17142a on a near-black backdrop, which measured fine and disappeared completely: nothing else on the screen is that dark, so there was no edge for an eye to find. */ .challenge-lightbox-close { position: absolute; top: -50px; inset-inline-end: 0; display: grid; place-items: center; width: 40px; height: 40px; border: 1px solid #6d61ab; border-radius: 11px; background: #2a2450; color: #fff; font-size: 22px; line-height: 1; box-shadow: 0 6px 18px #00000059; } .challenge-lightbox-close:hover { border-color: #a48bff; background: #4a3a99; } .challenge-lightbox-close:focus-visible { outline: 2px solid #a48bff; outline-offset: 3px; } /* The fallback the lightbox falls back to. YouTube is not reachable on every network our readers are on, and a frame that never loads is an empty black rectangle with nothing to do next — this sits behind it and is only ever seen when the frame failed to paint over it. */ .challenge-lightbox-fallback { position: absolute; inset: 0; z-index: -1; display: grid; align-content: center; justify-items: center; gap: 14px; padding: 24px; text-align: center; } .challenge-lightbox-fallback p { margin: 0; max-width: 420px; color: var(--muted); font-size: 13px; line-height: 2.1; } @media (max-width: 900px) { .challenge-promo { grid-template-columns: minmax(0, 1fr); gap: 26px; padding: 24px 20px; margin-top: 56px; } /* Picture first on a phone: it carries the offer in one glance, and the paragraph under it is read by somebody the picture has already stopped. */ .challenge-promo .challenge-video { order: -1; } .challenge-promo-cta { width: 100%; justify-content: center; } } @media (max-width: 620px) { .challenge-lightbox { padding: 14px 14px 72px; } /* Under the video and centred, which is also where a thumb already is. */ .challenge-lightbox-close { top: auto; bottom: -58px; inset-inline: 0; margin: 0 auto; width: 46px; height: 46px; } } /* A reader who asked for less motion still gets the lightbox, without the fade or the card lifting under their pointer. */ @media (prefers-reduced-motion: reduce) { .challenge-lightbox { animation: none; } .challenge-video { transition: border-color .2s; } .challenge-video:hover, .challenge-video:focus-visible { transform: none; } }