/* ============================================================ PIANO PEOPLE IN THE PARK - London Signup page. Visual language taken straight from the client's own assets: the green London-skyline paper (Desktop.jpg / Mobile.jpg) and the tangerine, black-outlined wordmark. Every colour below was sampled out of those files, not chosen. Signature: the panel's foot is the client's own London line-work, lifted out of their background art and faded up into the black. Form controls take their shape from the wordmark rather than from the poster's rectangles - the logotype is all soft rounded terminals, so the fields and the button are rounded to match, and they carry the wordmark's construction inverted: dark fill, warm keyline. ============================================================ */ :root { /* sampled from Desktop-scaled.jpg / Mobile.jpg / the supplied logo.png */ --park: #019B4B; /* the park green field */ --park-dark: #017038; /* pressed / deeper green */ --ink: #043F22; /* skyline line-work, darkened for type */ --tangerine: #FD6128; /* wordmark orange */ --keys: #FFFB3E; /* line-up yellow */ --night: #0A0B0A; /* poster black - the panel ground */ --chalk: #FFFFFF; --muted: rgba(255, 255, 255, 0.64); --hairline: rgba(255, 255, 255, 0.16); /* Warm off-black fields, keylined in the wordmark's orange. Opaque, so the autofill shadow colour is simply the field colour - nothing to composite, and an autofilled field cannot drift out of step with the empty one beside it. */ --field: #1C1D20; --field-hi: #26272B; /* focused / hovered */ --field-flat: #1C1D20; --field-line: rgba(253, 97, 40, 0.55); --field-hint: rgba(255, 255, 255, 0.46); --radius: 14px; --pad: clamp(1rem, 3.5vw, 2.25rem); --display: "Anton", "Arial Narrow", Impact, sans-serif; --font: "Archivo", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, Arial, sans-serif; } @font-face { font-family: "Anton"; src: url("/assets/fonts/Anton-400.woff2?v=20260828-16") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: "Archivo"; src: url("/assets/fonts/Archivo-var.woff2?v=20260828-16") format("woff2-variations"); font-weight: 100 900; font-style: normal; font-display: swap; } *, *::before, *::after { box-sizing: border-box; } /* The base colour lives on . Never put it on : an opaque body paints over the z-index:-1 .bg layer and the scene disappears. */ html { background: var(--park); -webkit-text-size-adjust: 100%; } body { margin: 0; background: transparent; color: var(--chalk); font-family: var(--font); font-size: 16px; line-height: 1.55; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } img { max-width: 100%; height: auto; display: block; } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* Honeypot. display:none only - off-screen positioning gets autofilled by Chrome/Edge, which silently blocks real signups. */ .hp-row { display: none !important; } a { color: inherit; } :focus-visible { outline: 3px solid var(--keys); outline-offset: 3px; } /* ============================================================ BACKGROUND - the client's own scene. The desktop crop is theirs untouched. The MOBILE one is rebuilt: their Mobile.jpg stacks a large flat green area above the skyline, so on a phone the whole top of the page - where the lockup sits - was bare colour. This one takes a full-height slice of the DESKTOP art (aspect 0.703, so it lands at native resolution rather than upscaled) for the bottom 80%, over one uniform green paper ground, with a complete band of their own clouds and birds lifted in above it. Every mark is composited as alpha line-work on that single ground, so there are no pasted rectangles and no seams. ============================================================ */ .bg { position: fixed; inset: 0; z-index: -1; background-color: var(--park); background-repeat: no-repeat; background-position: center bottom; background-size: cover; background-image: url("/assets/images/bg-mobile.webp?v=20260828-16"); } /* Keyed on aspect ratio alone, deliberately: width-only breakpoints leave gaps at squarish window shapes where neither crop applies. */ @media (max-width: 500px) and (max-aspect-ratio: 7/10) { .bg { background-image: url("/assets/images/bg-mobile-sm.webp?v=20260828-16"); } } @media (min-aspect-ratio: 7/10) { .bg { background-image: url("/assets/images/bg-desktop-sm.webp?v=20260828-16"); } } @media (min-aspect-ratio: 7/10) and (min-width: 1501px) { .bg { background-image: url("/assets/images/bg-desktop.webp?v=20260828-16"); } } /* ============================================================ SHEET / STAGE ============================================================ */ .sheet { min-height: 100svh; display: flex; flex-direction: column; padding: var(--pad); gap: clamp(1.25rem, 3vw, 2rem); } .stage { flex: 1 1 auto; display: flex; align-items: center; justify-content: center; min-height: 0; } .stage__inner { width: 100%; max-width: 1180px; margin: 0 auto; display: flex; flex-direction: column; align-items: center; gap: clamp(1.75rem, 5vw, 2.75rem); } /* ============================================================ BRAND COLUMN - the client lockup over the scene ============================================================ */ .brand { width: 100%; max-width: 560px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: clamp(0.85rem, 2.6vw, 1.3rem); } .brand__lockup { width: min(100%, 480px); height: auto; } /* "LONDON" set the way the poster sets it: yellow on a hard black tag. */ .brand__place { margin: 0; align-self: center; background: var(--night); color: var(--keys); font-family: var(--display); font-size: clamp(0.85rem, 2.6vw, 1.05rem); line-height: 1; letter-spacing: 0.22em; text-transform: uppercase; padding: 0.55em 0.5em 0.5em 0.72em; } /* House mark beside the strapline. The two read as one lockup, so they sit in their own flex row - which also keeps the text left-ranged against the mark even while .brand is centre-aligned in the portrait flow. */ .brand__foot { display: flex; align-items: center; gap: clamp(0.45rem, 1.3vw, 0.75rem); text-align: left; max-width: 100%; } .brand__mark { flex: 0 0 auto; width: auto; height: clamp(52px, 11.6vw, 81px); } /* The client's own strapline, given the wordmark's outlined treatment. paint-order puts the stroke behind the fill so Anton keeps its weight. */ .brand__line { margin: 0; font-family: var(--display); font-size: clamp(1.35rem, 5.6vw, 2.35rem); line-height: 1.02; letter-spacing: 0.005em; text-transform: uppercase; color: var(--chalk); -webkit-text-stroke: 3px var(--night); paint-order: stroke fill; } /* ============================================================ PANEL - the poster's black block, footed with the London line-work ============================================================ */ .signup { width: 100%; max-width: 480px; display: flex; flex-direction: column; align-items: stretch; gap: 1rem; } /* Layered shadow rather than one big blur: a tight contact shadow anchors the block to the page, the wider layers give it height. Tinted green-black, not neutral black - a grey shadow on a mid-green field reads as dirt. The inset hairline keeps the top edge crisp where the shadow cannot reach. */ .panel { position: relative; background: var(--night); isolation: isolate; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07), 0 1px 2px rgba(1, 32, 16, 0.40), 0 6px 14px rgba(1, 32, 16, 0.34), 0 18px 36px rgba(1, 32, 16, 0.38), 0 44px 84px rgba(1, 32, 16, 0.50); } .panel__inner { padding: clamp(1.4rem, 4.4vw, 2rem) clamp(1.4rem, 4.4vw, 2rem) clamp(1rem, 3vw, 1.35rem); } /* The client's London line-work as the block's bottom edge. The PNG carries its own top-to-bottom alpha fade, so the cropped spires dissolve into the panel rather than ending in a hard cut - and no CSS mask is needed. */ .panel__skyline { height: clamp(58px, 15vw, 84px); background-image: url("/assets/images/skyline-band.png?v=20260828-16"); background-repeat: no-repeat; background-position: center bottom; background-size: cover; } .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; } /* A solid tangerine tag - the same device as the black LONDON tag in the brand column, in the opposite colourway, so the two columns rhyme. */ .panel__eyebrow { display: inline-block; margin: 0 0 0.85rem; background: var(--tangerine); color: var(--night); font-family: var(--display); font-size: 0.78rem; line-height: 1; letter-spacing: 0.22em; text-transform: uppercase; padding: 0.55em 0.5em 0.5em 0.72em; } .panel__title { margin: 0 0 0.7rem; font-family: var(--display); font-size: clamp(1.85rem, 6.6vw, 2.6rem); line-height: 0.98; letter-spacing: 0.005em; text-transform: uppercase; color: var(--chalk); text-wrap: balance; } .panel__title em { font-style: normal; color: var(--tangerine); } .panel__lede { margin: 0 0 1.4rem; color: var(--muted); font-size: 0.95rem; line-height: 1.6; } .panel__lede strong { color: var(--chalk); font-weight: 600; } /* Class-based only. A state-scoped element rule (.panel__success p {...}) would out-specify .panel__eyebrow and resize it in that state. */ .panel__success-note { margin: 0 0 1rem; color: var(--keys); font-size: 0.95rem; } /* ============================================================ FORM ============================================================ */ .form__row { margin-bottom: 0.85rem; } /* Labels stay for screen readers; placeholders carry the meaning visually. */ .form__label { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; } /* The wordmark is a dark keyline around a warm fill, with soft rounded terminals. The fields are that construction inverted: warm off-black fill, orange keyline, same roundness. The inset highlight is a single hairline at the top edge, so the field reads as cut into the panel rather than painted on it - no gradient, nothing glassy. */ .form__input { width: 100%; padding: 0.95rem 1rem; background: var(--field); border: 2px solid var(--field-line); border-radius: var(--radius); color: var(--chalk); font-family: var(--font); font-size: 1rem; font-weight: 500; line-height: 1.3; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07); transition: background-color 0.14s ease, border-color 0.14s ease, box-shadow 0.14s ease; } .form__input::placeholder { color: var(--field-hint); font-weight: 400; } .form__input:hover { background: var(--field-hi); border-color: rgba(253, 97, 40, 0.8); } .form__input:focus { outline: none; background: var(--field-hi); border-color: var(--tangerine); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07), 0 0 0 3px rgba(253, 97, 40, 0.28); } .form__input:focus-visible { outline: none; } .form__input--otp { font-family: var(--display); font-size: 1.75rem; letter-spacing: 0.42em; text-align: center; padding-left: 1rem; } /* Chrome paints autofilled fields pale lavender and ignores `background`; the only override is a huge inset shadow. The fields are opaque, so the shadow colour is just the field colour - nothing to composite. */ .form__input:-webkit-autofill, .form__input:-webkit-autofill:hover, .form__input:-webkit-autofill:focus, .form__input:-webkit-autofill:active { -webkit-box-shadow: 0 0 0 1000px var(--field-flat) inset !important; box-shadow: 0 0 0 1000px var(--field-flat) inset !important; -webkit-text-fill-color: var(--chalk) !important; caret-color: var(--chalk); transition: background-color 9999s ease-in-out 0s; } /* ...but that rule is !important, so it swallows the focus ring, which is also a box-shadow. The border still changes, and this restates the halo. */ .form__input:-webkit-autofill:focus { outline: 2px solid var(--tangerine); outline-offset: 1px; } .form__error { margin: 0.4rem 0 0; color: var(--keys); font-size: 0.82rem; line-height: 1.4; } .form__error--global { margin-top: 0.8rem; } .form__row--check { margin: 1.05rem 0 1.25rem; } .form__check { display: flex; align-items: flex-start; gap: 0.7rem; color: var(--muted); font-size: 0.8rem; line-height: 1.5; cursor: pointer; } .form__check input[type="checkbox"] { flex: 0 0 auto; width: 20px; height: 20px; margin: 1px 0 0; accent-color: var(--tangerine); color-scheme: light; cursor: pointer; } .form__check a { color: var(--chalk); text-underline-offset: 3px; } .form__check a:hover { color: var(--keys); } /* --- buttons: the client's own ticket button, recoloured for the panel --- */ .btn { display: flex; align-items: center; justify-content: center; gap: 0.55rem; width: 100%; padding: 1rem 1.1rem; border: 0; border-radius: var(--radius); background: var(--tangerine); color: var(--night); font-family: var(--display); font-size: clamp(0.95rem, 3.4vw, 1.12rem); line-height: 1; letter-spacing: clamp(0.05em, 0.5vw, 0.13em); text-transform: uppercase; text-align: center; text-decoration: none; white-space: nowrap; cursor: pointer; transition: background-color 0.15s ease, transform 0.08s ease; } .btn:hover { background: var(--keys); } .btn:active { transform: translateY(1px); } .btn[disabled], .btn[aria-busy="true"] { opacity: 0.6; cursor: progress; } .btn__text { display: inline-block; } .form__resend { margin: 0.95rem 0 0; color: var(--muted); font-size: 0.82rem; text-align: center; } .form__resend-btn { background: none; border: 0; padding: 0; color: var(--keys); font: inherit; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; } .form__resend-btn:hover { color: var(--chalk); } /* ============================================================ intl-tel-input v25 overrides ============================================================ */ .iti { width: 100%; display: block; } .iti input { padding-left: calc(52px + 0.7rem); } /* repadPhone() re-measures at runtime */ .iti__country-container { z-index: 3; } /* The chip is absolutely positioned over the field's left edge, so it has to be inset and rounded or it pokes out of the field's corner. */ .iti__selected-country { border-radius: calc(var(--radius) - 2px) 0 0 calc(var(--radius) - 2px); } .iti__selected-country-primary { padding: 0 0.35rem 0 1.05rem; } /* The country chip sits inside the field, so it follows the field's colours. */ .iti__selected-dial-code { color: var(--field-hint); font-size: 0.95rem; } .iti__selected-country:hover, .iti__selected-country-primary:hover { background: rgba(255, 255, 255, 0.07); } .iti__arrow { border-top-color: var(--field-hint); } .iti__arrow--up { border-bottom-color: var(--field-hint); } .iti--inline-dropdown .iti__dropdown-content { z-index: 50; background: #1C1D20; border: 2px solid var(--field-line); border-radius: var(--radius); overflow: hidden; color: var(--chalk); box-shadow: 0 22px 48px rgba(0, 0, 0, 0.6); } /* Vertical padding only - the 30px/32px horizontal reservation belongs to the vendor's absolutely positioned search icon and clear button. A padding SHORTHAND without it puts the magnifying glass on top of the word. */ .iti__search-input { padding: 12px 30px 12px 32px; background: rgba(255, 255, 255, 0.05); border: none; border-bottom: 2px solid var(--field-line); color: var(--chalk); font-family: var(--font); font-size: 15px; } .iti__search-input::placeholder { color: var(--field-hint); } .iti__search-input:focus { outline: none; border-bottom-color: var(--tangerine); } .iti__country-list { background: transparent; } .iti__country { padding: 9px 13px; font-size: 14.5px; } .iti__country.iti__highlight { background: rgba(253, 97, 40, 0.22); } .iti__country:hover { background: rgba(253, 97, 40, 0.12); } .iti__dial-code { color: var(--field-hint); } /* The hidden state lives in the vendor stylesheet; until that loads the whole country list flashes open on first paint. */ .iti__dropdown-content.iti__hide { display: none !important; } /* ============================================================ FOOTER ============================================================ */ /* A full-bleed black bar, not type sitting on the green. Dark ink on the park green only reached 3.4:1 and white only 3.6:1 - neither passes for text this small - and the Furiosa mark is white artwork, so it was washing out on the green too. The negative margin cancels the sheet padding so the bar runs to the viewport edges; both come from --pad so they cannot drift apart. */ .foot { flex-shrink: 0; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5rem 1.25rem; margin: 0 calc(-1 * var(--pad)) calc(-1 * var(--pad)); padding: 0.85rem var(--pad); background: var(--night); color: rgba(255, 255, 255, 0.74); font-size: 0.74rem; line-height: 1.4; } .foot__left { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 1rem; } .foot__legal { margin: 0; } .foot a { color: rgba(255, 255, 255, 0.74); text-decoration: none; } .foot a:hover { color: var(--tangerine); text-decoration: underline; text-underline-offset: 3px; } /* House pattern: the built-by credit sits in a pill. The avatar PNG is white artwork on transparency - there is no plate baked into it, so the pill has to be drawn here or the mark reads as loose type on the bar. */ .site-built { margin: 0; } .site-built a { display: inline-flex; align-items: center; gap: 0.45rem; padding: 0.3rem 0.8rem; border: 2px solid rgba(255, 255, 255, 0.22); border-radius: 999px; color: rgba(255, 255, 255, 0.74); transition: border-color 0.15s ease, color 0.15s ease; } .site-built a:hover { border-color: var(--tangerine); color: var(--chalk); text-decoration: none; } .site-built img { display: inline-block; height: 13px; width: auto; opacity: 0.92; vertical-align: middle; } /* Phones: the bar has no room for a justified row, so the three items stack and centre. Placed after the base .foot rules - media queries add no specificity, so source order is what decides this. */ @media (max-width: 700px) { .foot { flex-direction: column; justify-content: center; text-align: center; gap: 0.7rem; padding: 1rem var(--pad) 1.05rem; } .foot__left { flex-direction: column; align-items: center; gap: 0.6rem; } } /* ============================================================ LAYOUT - two columns from 7/10 aspect + 768px, stacked below. Aspect ratio, not width alone: width-only breakpoints leave a gap at squarish window shapes where neither treatment applies. ============================================================ */ @media (min-width: 768px) and (min-aspect-ratio: 7/10) { .stage__inner { flex-direction: row; align-items: center; justify-content: space-between; gap: clamp(2rem, 5vw, 4.5rem); } .brand { flex: 1 1 52%; max-width: none; text-align: left; align-items: flex-start; } .brand__place { align-self: flex-start; } .brand__lockup { width: min(100%, 520px); } /* Desktop only: mark scaled to sit against the two-line strapline as one lockup, and pulled in tight now that the PNG is trimmed to its ink. */ .brand__foot { gap: clamp(0.6rem, 1.1vw, 1.05rem); } .brand__mark { height: clamp(92px, 8.2vw, 124px); } .signup { flex: 0 1 460px; max-width: 460px; margin: 0 auto; } .panel { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07), 0 2px 3px rgba(1, 32, 16, 0.42), 0 8px 18px rgba(1, 32, 16, 0.36), 0 24px 48px rgba(1, 32, 16, 0.42), 0 60px 110px rgba(1, 32, 16, 0.55); } .panel__title { font-size: clamp(2rem, 2.9vw, 2.7rem); } } @media (min-width: 1100px) and (min-aspect-ratio: 7/10) { .brand__lockup { width: min(100%, 580px); } .brand__line { font-size: clamp(2.1rem, 2.9vw, 2.8rem); } } /* Landscape phones satisfy the desktop width/aspect conditions but have almost no height. Placed AFTER the desktop blocks so it wins at equal specificity. */ @media (min-width: 640px) and (min-aspect-ratio: 7/10) and (max-height: 520px) { .sheet { padding: 0.7rem 1rem; gap: 0.7rem; } .stage { align-items: flex-start; } .stage__inner { flex-direction: row; align-items: start; gap: 1.5rem; min-height: 0; } .brand { flex: 0 1 auto; max-width: 44%; gap: 0.55rem; min-height: 0; } .brand__lockup { width: 100%; max-width: none; max-height: calc(100svh - 190px); object-fit: contain; } .brand__place { font-size: 0.72rem; padding: 0.45em 0.4em 0.4em 0.6em; } .brand__foot { gap: 0.4rem; } .brand__mark { height: clamp(36px, 6.2vw, 47px); } .brand__line { font-size: clamp(1.05rem, 2.6vw, 1.5rem); -webkit-text-stroke-width: 2px; } .signup { flex: 1 1 auto; max-width: 420px; gap: 0.6rem; } .panel__inner { padding: 0.85rem 1rem 0.8rem; } .panel__skyline { height: 32px; } .panel__eyebrow { margin-bottom: 0.5rem; font-size: 0.68rem; } .panel__title { font-size: clamp(1.2rem, 2.6vw, 1.6rem); margin-bottom: 0.4rem; } .panel__lede { margin-bottom: 0.8rem; font-size: 0.82rem; line-height: 1.45; } .form__row { margin-bottom: 0.5rem; } :root { --radius: 11px; } .form__input { padding: 0.6rem 0.8rem; font-size: 0.95rem; } .form__row--check { margin: 0.7rem 0 0.8rem; } .form__check { font-size: 0.72rem; } .btn { padding: 0.7rem 1rem; } .form__input--otp { font-size: 1.25rem; } .foot { font-size: 0.66rem; padding: 0.5rem 1rem; } } /* Very short viewports in portrait too (e.g. 320x480 with the keyboard up) */ @media (max-aspect-ratio: 7/10) and (max-height: 620px) { .brand__lockup { width: min(78%, 360px); } .brand__mark { height: clamp(43px, 8.9vw, 60px); } .brand__line { font-size: clamp(1.15rem, 4.8vw, 1.6rem); } } /* ============================================================ MOTION - one page-load reveal, nothing else ============================================================ */ @keyframes rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } } .brand { animation: rise 0.55s cubic-bezier(0.22, 0.7, 0.3, 1) both; } .signup { animation: rise 0.55s cubic-bezier(0.22, 0.7, 0.3, 1) 0.1s both; } .foot { animation: rise 0.55s cubic-bezier(0.22, 0.7, 0.3, 1) 0.2s both; } /* ============================================================ ACCESSIBILITY ============================================================ */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } .brand, .signup, .foot { animation: none; opacity: 1; transform: none; } } @media (forced-colors: active) { .panel { border: 1px solid CanvasText; } .btn { border: 1px solid ButtonText; } }