/* ============================================================ Born on Road · Dubplate Champions · UK Tour 2026 Direction taken from the client artwork and nowhere else. The poster is a motorhome parked on a verge under a big English sky, with the tour manifest set over it. So the page is that sky: every blue below is sampled from the supplied JPEGs, and the single accent is the acid lime the artwork uses for "DUBPLATE CHAMPIONS" (#DCF60A). Type: Archivo Black for display - the poster logotype is a very heavy squared grotesque and this is its closest free relative. Archivo Narrow carries the manifest rows and the clock labels, because the poster's own date list is set narrow and bold. Archivo (regular) does the reading copy. One superfamily, three roles: the poster's own typographic system rather than a pairing imported from outside it. Signature: THE RALLY CLOCK. The artwork flanks its "UK TOUR 2026" plate with checkered-flag chevrons. That device is rebuilt in CSS and given a job - holding the time left until presale. It is the only loud thing on the page; the fields, the manifest and the footer all stay quiet so the poster and the clock carry the volume. ============================================================ */ :root { --sky-deep: #022F76; /* poster sky, top of frame - page base */ --sky-mid: #0A458C; --sky-soft: #6497C6; --navy: #03132F; /* panel base: deeper than the sky, so it sits forward */ --navy-2: #071B3E; /* field base */ --line: #14407F; /* hairline */ --line-soft: #0E2E5C; --cloud: #DCE8F6; /* body copy */ --cloud-dim: #9FB6D6; /* secondary copy */ --white: #FFFFFF; --lime: #DCF60A; /* THE accent - "DUBPLATE CHAMPIONS" */ --lime-deep: #B0EE06; --asphalt: #0B0D10; /* the poster's black plate */ --danger: #FF8577; --whatsapp: #25D366; --display: "Archivo Black", "Helvetica Neue", Arial, sans-serif; --narrow: "Archivo Narrow", "Helvetica Neue", Arial, sans-serif; --body: "Archivo", "Helvetica Neue", Arial, sans-serif; --maxw: 1180px; } *, *::before, *::after { box-sizing: border-box; } /* Base colour lives on html, NOT body: an opaque body background paints over the z-index:-2 .bg layer and the artwork disappears. */ html { -webkit-text-size-adjust: 100%; background: var(--sky-deep); overflow-x: clip; /* no sideways scroll, whatever else goes wrong */ } /* Belt and braces: some iOS Safari versions still scroll when only carries the clip, so the real overflow sources are fixed at source AND both elements are clipped. */ body { overflow-x: clip; } body { margin: 0; min-height: 100vh; font-family: var(--body); color: var(--cloud); background: transparent; display: flex; flex-direction: column; line-height: 1.5; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } /* ---------- blurred artwork background ---------- */ .bg { position: fixed; inset: 0; z-index: -2; background-color: var(--sky-deep); background-image: url("/assets/images/bg-mobile.jpg?v=20260728-48"); background-image: image-set( url("/assets/images/bg-mobile.webp?v=20260728-48") type("image/webp"), url("/assets/images/bg-mobile.jpg?v=20260728-48") type("image/jpeg")); background-position: center; background-size: cover; } @media (min-width: 880px) { .bg { background-image: url("/assets/images/bg-desktop.jpg?v=20260728-48"); background-image: image-set( url("/assets/images/bg-desktop.webp?v=20260728-48") type("image/webp"), url("/assets/images/bg-desktop.jpg?v=20260728-48") type("image/jpeg")); } } /* Scrim, deliberately light. The background is now the client's own photograph blurred (not the poster), so the van and the sky should still be readable behind the poster and the panel - it only needs pushing back far enough that the panel's dark glass reads as the front layer. */ .bg::after { content: ""; position: absolute; inset: 0; background: radial-gradient(120% 95% at 50% 12%, rgba(2,35,92,.10), rgba(1,18,52,.46) 62%, rgba(1,11,34,.68) 100%), linear-gradient(180deg, rgba(2,25,66,.14) 0%, rgba(1,13,38,.40) 100%); } /* ---------- dither layer ---------- Functional: the background is one large smooth gradient and WebP/JPEG banding shows across it without this. Kept well below a "film grain". */ .grain { position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: .04; mix-blend-mode: overlay; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); } /* ============================================================ STAGE LAYOUT ============================================================ */ .stage { flex: 1 0 auto; width: 100%; max-width: var(--maxw); margin: 0 auto; padding: clamp(20px, 4vw, 56px) clamp(16px, 4vw, 40px); display: flex; /* start, NOT center. Centring re-balances the whole row every time the panel changes height, which made the lockup, dates and credit jump on the code and thank-you steps. Anchored to the top, the panel grows and shrinks downward on its own and nothing else moves. */ align-items: flex-start; } .stage__inner { width: 100%; display: grid; /* minmax(0, 1fr), NOT 1fr. A bare 1fr track is minmax(auto, 1fr), and that auto minimum is the item's min-content - which here is a 1230px-wide image. On phones that blew the single-column track past the viewport and cut the artwork and the form off at the right edge. Every other track in this sheet already guards against it; this one was missed. */ grid-template-columns: minmax(0, 1fr); gap: clamp(26px, 4vw, 52px); align-items: center; } /* ---------- the poster ---------- Adam asked for the artwork to pop off the blur. Three stacked shadows do that better than one big one: a tight contact shadow to seat it, a mid shadow for lift, and a wide low-opacity cast so it reads as an object in front of the sky rather than a rectangle pasted onto it. The hairline ring stops the poster's own pale sky bleeding into the blurred plate. */ .poster { justify-self: center; width: 100%; max-width: 560px; } .poster__frame { position: relative; border-radius: 2px; box-shadow: 0 0 0 1px rgba(255,255,255,.10), 0 2px 6px rgba(1,10,30,.50), 0 18px 34px -8px rgba(1,10,30,.58), 0 54px 88px -26px rgba(1,8,26,.80); animation: posterIn .9s cubic-bezier(.16,.84,.36,1) both; } .poster img { display: block; width: 100%; height: auto; border-radius: 2px; } @keyframes posterIn { from { opacity: 0; transform: translateY(16px) scale(.985); } to { opacity: 1; transform: none; } } /* ============================================================ SIGNUP PANEL ============================================================ */ .panel { justify-self: center; width: 100%; max-width: 520px; position: relative; isolation: isolate; /* keeps the flag dropdown clickable */ /* FROSTED GLASS. The sky and the van read faintly through the box, so the form sits in the photograph rather than on top of it. The dark plates inside (countdown, dropdowns) and the lime CTA stay opaque, which is the poster's own logic: light field, black plates, one acid accent. */ background: rgba(255,255,255,.15); -webkit-backdrop-filter: blur(22px) saturate(1.18); backdrop-filter: blur(22px) saturate(1.18); border: 1px solid rgba(255,255,255,.26); border-radius: 8px; box-shadow: 0 30px 70px -28px rgba(1,10,30,.75), inset 0 1px 0 rgba(255,255,255,.24); animation: panelIn .9s .12s cubic-bezier(.16,.84,.36,1) both; overflow: visible; } /* top edge: sky to lime, left to right - the poster's own gradient logic */ .panel::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; border-radius: 6px 6px 0 0; background: linear-gradient(90deg, var(--sky-mid), var(--sky-soft) 42%, var(--lime-deep) 80%, var(--lime)); z-index: 0; } @keyframes panelIn { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: none; } } .panel__inner { position: relative; z-index: 1; padding: clamp(24px, 3.2vw, 38px); } /* --- state machine (app.js flips data-form-state on .panel) --- display:none, so the box is only as tall as the step it is showing. The artwork column is kept still by top-aligning .stage instead - see there. */ .panel__state { display: none; } .panel[data-form-state="idle"] .panel__idle { display: block; } .panel[data-form-state="otp"] .panel__otp { display: block; } .panel[data-form-state="success"] .panel__success { display: block; } /* ---------- eyebrow ---------- */ .eyebrow { display: flex; align-items: center; gap: 12px; margin: 0 0 18px; font-family: var(--narrow); font-weight: 700; font-size: 11px; letter-spacing: .32em; text-transform: uppercase; color: var(--lime); } .eyebrow span { flex: 0 0 26px; height: 1px; background: linear-gradient(90deg, transparent, var(--lime-deep)); } .eyebrow span:last-child { background: linear-gradient(90deg, var(--lime-deep), transparent); } .eyebrow span.eyebrow__text { flex: 0 1 auto; height: auto; background: none; } /* ============================================================ SIGNATURE - THE RALLY CLOCK The artwork's checkered chevrons, given a job. ============================================================ */ .clock { display: flex; align-items: stretch; justify-content: center; gap: 0; margin: 0 0 20px; } .clock__flag { flex: 0 1 62px; min-width: 0; align-self: stretch; /* classic checkerboard: two offset 45deg gradients */ background-color: var(--asphalt); background-image: linear-gradient(45deg, var(--lime) 25%, transparent 25%, transparent 75%, var(--lime) 75%), linear-gradient(45deg, var(--lime) 25%, transparent 25%, transparent 75%, var(--lime) 75%); background-size: 9px 9px; background-position: 0 0, 4.5px 4.5px; /* fades in from the outside, so the eye is walked toward the plate */ -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 78%); mask-image: linear-gradient(90deg, transparent 0%, #000 78%); clip-path: polygon(0 0, 82% 0, 100% 50%, 82% 100%, 0 100%); } .clock__flag--r { transform: scaleX(-1); } .clock__plate { flex: 0 1 auto; display: flex; align-items: center; gap: clamp(3px, 1.2vw, 9px); padding: 10px clamp(10px, 2.4vw, 18px) 8px; background: var(--asphalt); border-radius: 3px; box-shadow: 0 10px 24px -14px rgba(0,0,0,.9); } .clock__cell { display: flex; flex-direction: column; align-items: center; min-width: 40px; } .clock__cell b { display: block; font-family: var(--display); font-weight: 400; /* Archivo Black has a single weight */ font-size: clamp(1.5rem, 5.4vw, 2rem); line-height: 1; letter-spacing: -.01em; font-variant-numeric: tabular-nums; color: var(--lime); } .clock__cell i { display: block; margin-top: 5px; font-family: var(--narrow); font-style: normal; font-weight: 700; font-size: 9px; letter-spacing: .2em; text-transform: uppercase; color: rgba(255,255,255,.55); } .clock__sep { align-self: flex-start; margin-top: clamp(2px, .6vw, 5px); font-family: var(--display); font-size: clamp(1.1rem, 4vw, 1.5rem); line-height: 1; color: var(--lime-deep); opacity: .55; } /* the label sits ABOVE the plate - the digits must never be an unexplained number (Adam, review round 1) */ .clock__caption { margin: 0 0 8px; text-align: center; font-family: var(--narrow); font-weight: 700; font-size: 11px; letter-spacing: .26em; text-transform: uppercase; color: rgba(255,255,255,.74); } /* presale open: the plate stops counting and says so */ .clock[data-live="1"] .clock__plate { padding: 13px clamp(14px, 3vw, 24px); } .clock__live { font-family: var(--display); font-size: clamp(1rem, 3.6vw, 1.28rem); letter-spacing: .04em; text-transform: uppercase; color: var(--lime); white-space: nowrap; } /* ============================================================ ON-SALE MANIFEST Two rows because there genuinely are two moments, in order. The dashed leader is the poster's own rule-between-columns. ============================================================ */ .onsale { margin: 0 0 20px; padding: 14px 0; border-top: 1px solid rgba(255,255,255,.20); border-bottom: 1px solid rgba(255,255,255,.20); } .onsale__row { display: flex; align-items: baseline; gap: 10px; } .onsale__row + .onsale__row { margin-top: 9px; } .onsale__row::before { content: ""; order: 2; flex: 1 1 auto; height: 0; border-bottom: 1px dashed rgba(255,255,255,.30); transform: translateY(-3px); } .onsale__row dt { order: 1; flex: 0 0 auto; font-family: var(--narrow); font-weight: 700; font-size: 12px; letter-spacing: .2em; text-transform: uppercase; color: rgba(255,255,255,.72); } .onsale__row dd { order: 3; flex: 0 0 auto; margin: 0; font-family: var(--narrow); font-weight: 700; font-size: 14.5px; letter-spacing: .04em; color: var(--white); white-space: nowrap; } /* the next moment up is the one that matters */ .onsale__row[data-next="1"] dd { color: var(--lime); } .onsale__row[data-done="1"] dt, .onsale__row[data-done="1"] dd { opacity: .45; } /* ---------- titles / copy ---------- */ .panel__title { margin: 0 0 14px; font-family: var(--display); font-weight: 400; font-size: clamp(1.75rem, 5vw, 2.3rem); line-height: 1.04; letter-spacing: -.015em; color: var(--white); text-wrap: balance; } /* All panel titles in capitals (Adam): idle, OTP and success. */ .panel__title { text-transform: uppercase; } .panel__title em { font-style: normal; color: var(--lime); } .panel__title::after { content: ""; display: block; width: 100%; max-width: 200px; height: 2px; margin-top: 14px; background: linear-gradient(90deg, var(--lime), rgba(220,246,10,0)); } .sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } .panel__lede { margin: 0 0 10px; font-size: 15px; color: rgba(255,255,255,.88); max-width: 46ch; } .panel__lede--last { margin-bottom: 22px; } .panel__lede strong { color: var(--white); font-weight: 600; } .panel__success-note { margin: 0 0 12px; color: var(--lime); font-size: 15px; } /* ============================================================ FORM ============================================================ */ .form__row { position: relative; margin: 0 0 16px; } /* the focused row must sit above later rows so a dropdown is not painted over by the consent block or the submit button */ .form__row:focus-within { z-index: 20; } .form__label { display: block; margin: 0 0 7px; font-family: var(--narrow); font-size: 11px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: rgba(255,255,255,.74); } .form__input { width: 100%; font-family: var(--body); font-size: 16px; /* >=16px stops iOS zoom-on-focus */ color: var(--white); background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.26); border-radius: 5px; padding: 13px 14px; transition: border-color .15s, box-shadow .15s; } .form__input::placeholder { color: rgba(255,255,255,.55); } .form__input:focus { outline: none; border-color: var(--lime); box-shadow: 0 0 0 3px rgba(220,246,10,.16); } .form__input[aria-invalid="true"] { border-color: var(--danger); box-shadow: 0 0 0 3px rgba(255,133,119,.16); } .form__input--otp { font-family: var(--display); font-size: 1.5rem; letter-spacing: .34em; text-align: center; padding: 14px; } .form__error { margin: 6px 0 0; color: var(--danger); font-size: 13px; } .form__error--global { margin-top: 12px; } /* ---------- honeypot (spam trap) ---------- display:none, NOT left:-9999px: off-screen honeypots get autofilled by Chrome/Edge and silently block real signups. */ .hp-row { display: none !important; } /* ============================================================ DATE PICKER - custom listbox A native