(.hero's parent) — not .hero itself. main gets no size from CSS otherwise, so it was sizing to its content (i.e. to .hero's natural height) regardless of the space left after the header and footer, and .hero — never itself squeezed — had nothing to shrink against. Basis 0 hands main exactly the leftover space up front (the default flex-basis:auto would size it from content first, the same bug one level up); making main a column flex context in turn lets .hero fill that with flex:1 1 auto + min-height:0. */ body.is-single-screen main{ flex:1 1 0%; min-height:0; display:flex; flex-direction:column; } body.is-single-screen .hero{ flex:1 1 auto; min-height:0; height:auto; } body.is-single-screen .site-footer{ flex:0 0 auto; } @media (max-height: 420px){ /* Absolute last resort: on a genuinely tiny viewport, let this page scroll rather than clip content — but per Jack's instruction this page stays one-screen-no-scroll at every normal width and height, shrinking its type and spacing to fit rather than reflowing to a taller stack. */ body.is-single-screen{ height:auto; overflow:visible; } } /* ---- Site header ------------------------------------------------------------ */ .site-header{ position:fixed; inset-block-start:0; inset-inline:0; z-index:40; padding-block: clamp(.5rem, 1.3vh, 1rem); } .site-header .container{ display:flex; align-items:center; justify-content:space-between; gap:1rem; } .site-header__social{ display:flex; align-items:center; gap:.6em; font-size:.72rem; letter-spacing:.16em; text-transform:uppercase; color:var(--grey); border:1px solid var(--line-strong); border-radius: var(--radius); padding:.65em 1.1em; transition: border-color var(--speed-fast) var(--ease), color var(--speed-fast) var(--ease); } .site-header__social:hover{ border-color:var(--white); color:var(--white); } /* ---- Footer -------------------------------------------------------------------- */ .site-footer{ border-top:1px solid var(--line); padding-block: clamp(.85rem, 2vh, 1.5rem); background: var(--black); } .site-footer .container{ display:flex; flex-wrap:wrap; gap:1rem 2rem; align-items:center; justify-content:space-between; font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color:var(--grey); } .site-footer__links{ display:flex; flex-wrap:wrap; gap:1.5rem; } .site-footer__links a{ color:var(--grey); transition: color var(--speed-fast) var(--ease); } .site-footer__links a:hover{ color:var(--white); } .site-footer strong{ color:var(--white); } /* ---- Coming soon / hero ------------------------------------------------------- */ .hero{ position:relative; min-height:100vh; display:flex; align-items:center; overflow:hidden; padding-block: calc(var(--fit-scale, 1) * clamp(3.4rem, 7.5vh, 6.25rem)) calc(var(--fit-scale, 1) * clamp(.6rem, 1.6vh, 1.5rem)); } .hero__media{ /* Constrained to the left (text) column's width rather than the full hero — this keeps the photo itself (and Jack in it) physically out of the form-box area, so it can never end up behind it at any viewport size, without fiddly object-position tuning. Full-bleed again on mobile, where the form sits below the text instead of beside it. */ position:absolute; top:0; left:0; bottom:0; width: min(60%, 900px); overflow:hidden; z-index:0; } .hero__media img{ width:100%; height:100%; object-fit:cover; object-position: 50% 6%; /* Zoomed in a touch from a plain cover-fit, anchored near the top so it grows mainly downward — enough to make him more prominent without pushing his (already tightly-budgeted) hands down into the SET-PIECE ACADEMY wordmark above the fold. */ transform: scale(1.2); transform-origin: 50% 3%; opacity:.4; } .hero__media::after{ content:""; position:absolute; inset:0; background: linear-gradient(100deg, var(--black) 0%, rgba(10,10,11,.5) 40%, rgba(10,10,11,.85) 100%), linear-gradient(to top, var(--black) 0%, rgba(10,10,11,0) 22%); } .hero__content{ position:relative; z-index:1; width:100%; height:100%; display:flex; align-items:center; } .hero__grid{ display:grid; grid-template-columns: minmax(0,1.15fr) minmax(0,1fr); gap: calc(var(--fit-scale, 1) * clamp(.9rem, 3vw, 4rem)); align-items:center; width:100%; max-width:100%; } .hero__form-col{ background: rgba(10,10,11,.55); border: 1px solid var(--line-strong); border-radius: var(--radius); padding: calc(var(--fit-scale, 1) * clamp(1.25rem, 3.4vh, 2.25rem)) calc(var(--fit-scale, 1) * clamp(1.25rem, 2.6vw, 2.1rem)); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); } .hero__tagline{ margin-block: calc(var(--fit-scale, 1) * clamp(.9rem, 2.8vh, 1.9rem)) calc(var(--fit-scale, 1) * clamp(.4rem, 1.4vh, 1rem)); font-size: calc(var(--fit-scale, 1) * clamp(.62rem, .8vw + .6vh, .9rem)); letter-spacing:.2em; text-transform:uppercase; color:var(--white); display:flex; flex-wrap:wrap; justify-content:center; gap:.6em; white-space:nowrap; } /* "Coming Soon." sits below the wordmark, not competing with it, but reads as full-brightness white now rather than a muted grey caption. */ .hero h1{ font-family: var(--font-display); font-size: calc(var(--fit-scale, 1) * clamp(1.4rem, 1vw + 2vh, 2.6rem)); line-height:1; text-transform:uppercase; letter-spacing:.03em; color: var(--white); } .hero__lede{ margin-block: calc(var(--fit-scale, 1) * clamp(.5rem, 1.8vh, 1.25rem)) 0; margin-inline:auto; max-width:34em; font-size: calc(var(--fit-scale, 1) * clamp(.78rem, .5vw + .6vh, 1.02rem)); color: var(--grey); text-transform:uppercase; letter-spacing:.02em; } .hero__meta{ position:absolute; right: var(--gutter); top:50%; transform:translateY(-50%); display:none; text-align:right; font-size:.72rem; letter-spacing:.18em; text-transform:uppercase; color:var(--grey); border-inline-end:1px solid var(--line-strong); padding-inline-end:1.25rem; } @media (min-width:1200px){ .hero__meta{ display:block; } } /* ---- Be-first / form section -------------------------------------------------- */ .signup{ margin-block-start: calc(var(--fit-scale, 1) * clamp(.6rem, 1.8vh, 1.25rem)); max-width: 560px; } .signup__eyebrow{ font-family: var(--font-display); font-size: calc(var(--fit-scale, 1) * clamp(1.2rem, 1.1vw + 1.9vh, 2.1rem)); text-transform:uppercase; letter-spacing:.01em; } .signup__intro{ color:var(--grey); margin-block-start:.3rem; max-width:none; font-size: calc(var(--fit-scale, 1) * clamp(.64rem, .52vh + .26vw, .78rem)); line-height:1.4; text-transform:uppercase; letter-spacing:.03em; text-wrap: balance; } .field-grid{ display:grid; grid-template-columns: 1fr 1fr; gap: calc(var(--fit-scale, 1) * clamp(.4rem, 1.15vh, .85rem)) calc(var(--fit-scale, 1) * 1.1rem); margin-block-start: calc(var(--fit-scale, 1) * clamp(.55rem, 1.5vh, 1.1rem)); } .field-grid .field--full{ grid-column: 1 / -1; } .field{ display:flex; flex-direction:column; gap:.24rem; } .field label{ font-size: calc(var(--fit-scale, 1) * .66rem); letter-spacing:.12em; text-transform:uppercase; color:var(--grey); } .field input, .field select, .field textarea{ background:transparent; border:none; border-bottom:1px solid var(--line-strong); color:var(--white); padding: calc(var(--fit-scale, 1) * clamp(.25rem, .65vh, .42rem)) .1rem; border-radius:0; font-size: calc(var(--fit-scale, 1) * clamp(.86rem, .55vh + .4vw, .98rem)); transition: border-color var(--speed-fast) var(--ease); } .field select{ appearance:none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23a3a3a8' stroke-width='1.4' fill='none' fill-rule='evenodd'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position: right .2rem center; padding-inline-end:1.25rem; } .field select option{ background: var(--charcoal); color:var(--white); } .field textarea{ resize:vertical; min-height: calc(var(--fit-scale, 1) * clamp(1.9rem, 3.8vh, 2.9rem)); border:1px solid var(--line-strong); padding: calc(var(--fit-scale, 1) * .45rem) calc(var(--fit-scale, 1) * .65rem); } .field input:focus, .field select:focus, .field textarea:focus{ border-color: var(--white); } .field input::placeholder, .field textarea::placeholder{ color: var(--grey-dim); } .consent-prompt{ margin-block-start: calc(var(--fit-scale, 1) * clamp(.6rem, 1.4vh, 1rem)); } .consent-prompt strong{ display:block; font-size: calc(var(--fit-scale, 1) * .78rem); color:var(--white); margin-block-end:.25rem; } .consent-prompt span{ display:block; font-size: calc(var(--fit-scale, 1) * .68rem); color:var(--grey); line-height:1.45; } .consent-group{ display:flex; flex-direction:column; gap: calc(var(--fit-scale, 1) * .5rem); margin-block-start: calc(var(--fit-scale, 1) * clamp(.5rem, 1.2vh, .9rem)); } .field-check{ display:flex; align-items:flex-start; gap:.55rem; font-size: calc(var(--fit-scale, 1) * .72rem); line-height:1.3; color:var(--grey); } .field-check span[data-consent-text]{ text-wrap: balance; } .field-check input{ margin-block-start:.2rem; width:.95rem; height:.95rem; accent-color:var(--white); flex-shrink:0; } .field-check a{ color:var(--white); text-decoration:underline; text-underline-offset:2px; } .field-hint{ font-size:.72rem; color:var(--grey-dim); margin-block-start:.35rem; } .field-check-error{ font-size: calc(var(--fit-scale, 1) * .85rem); color:#e7e7ea; font-weight:600; background: rgba(255,255,255,.06); border:1px solid var(--line-strong); border-radius:var(--radius); padding:.85rem 1rem; margin-block:.4rem 0; } .signup__legal{ margin-block-start: calc(var(--fit-scale, 1) * clamp(.35rem, 1vh, .8rem)); font-size: calc(var(--fit-scale, 1) * .64rem); color:var(--grey-dim); line-height:1.5; } .signup__legal a{ color:var(--grey); text-decoration:underline; text-underline-offset:2px; } .signup__legal a:hover{ color:var(--white); } .signup__submit{ margin-block-start: calc(var(--fit-scale, 1) * clamp(.75rem, 2vh, 1.5rem)); } .form-error{ color:#e7e7ea; background: rgba(255,255,255,.06); border:1px solid var(--line-strong); border-radius:var(--radius); padding:.85rem 1rem; font-size:.85rem; margin-block-start:1.25rem; } /* ---- Success state ------------------------------------------------------------ */ .success-panel{ max-width:560px; text-align:center; margin-inline:auto; } .success-panel .btn-row{ justify-content:center; } .success-panel h2{ font-family: var(--font-display); font-size: clamp(1.3rem, 4.4vw, 2.15rem); text-transform:uppercase; line-height:1.15; text-align:center; } .success-panel h2 span{ display:block; white-space:nowrap; } .success-panel p{ color:var(--grey); margin-block-start:1rem; max-width:32em; margin-inline:auto; } .success-panel .tagline{ display:block; margin-block-start:1.5rem; font-size:.78rem; letter-spacing:.22em; text-transform:uppercase; color:var(--white); } .success-panel .btn-row{ margin-block-start:2rem; } /* ---- Responsive ------------------------------------------------------------------ */ /* Between phone width and ~860px the hero stays two-column and shrinks instead of scrolling (see --fit-scale above). Below MOBILE_BREAKPOINT (700px — kept in sync with js/main.js's MOBILE_SCROLL_QUERY) that trade stops being worth it: cramming two columns into a phone-width screen means unreadably small type, so per Jack's request the mobile layout drops the single-screen lock and scrolls normally instead, at a comfortable, un-shrunk size. */ @media (max-width: 860px){ .hero__media{ width: min(66%, 620px); } .site-footer .container{ flex-wrap:wrap; gap:.5rem .75rem; } } @media (max-width: 700px), (hover: none) and (pointer: coarse){ /* The width condition covers ordinary narrow viewports; the hover/pointer condition is a safety net for touch devices whose browser or embedded webview reports a wider viewport than the screen actually is (this has caused the page to render as a blank, clipped single-screen on some phones) — any touchscreen gets the normal scrolling layout regardless of reported width. */ body.is-single-screen{ height:auto; overflow:visible; } .hero{ align-items:flex-start; padding-block: clamp(6rem, 18vh, 8rem) 3rem; min-height:0; } .hero__grid{ grid-template-columns:1fr; } .field-grid{ grid-template-columns:1fr; } .site-footer .container{ flex-direction:column; align-items:flex-start; gap:.75rem; } .hero__media{ width:100%; } /* Full-bleed background behind the whole scrolling page again (like the original), just recentred — at this narrow-and-very-tall cover crop the old 58% x sat past Jack's right shoulder, showing mostly empty pitch/ crowd behind him rather than Jack himself. Shifted left onto his actual centre so he reads as sitting behind the text instead of off to the side. */ .hero__media img{ object-position: 42% 15%; opacity:.35; } } /* ---- Legal / placeholder pages ---------------------------------------------------- */ .legal-page{ padding-block:9rem 6rem; min-height:100vh; } .legal-page h1{ font-family: var(--font-display); font-size: clamp(2.2rem,5vw,3.2rem); text-transform:uppercase; } .legal-page .flag{ margin-block:1.5rem 2rem; padding:1rem 1.25rem; border:1px solid var(--line-strong); border-radius:var(--radius); color:var(--grey); font-size:.9rem; max-width:48em; } .legal-page section{ margin-block-start:2rem; max-width:60em; } .legal-page h2{ font-family: var(--font-body); font-size:1.1rem; letter-spacing:.04em; text-transform:uppercase; margin-block-end:.6rem; } .legal-page p{ color:var(--grey); margin-block-end:1rem; max-width:60em; } .legal-page .meta{ color:var(--grey); font-size:.85rem; margin-block:.5rem 0; } .legal-page a{ color:var(--white); text-decoration:underline; text-underline-offset:2px; } .legal-page a:hover{ color:var(--grey); } .legal-page ul{ list-style:disc; padding-inline-start:1.2em; margin-block-end:1rem; max-width:60em; } .legal-page ul li{ color:var(--grey); margin-block-end:.45rem; } .legal-page ul li:last-child{ margin-block-end:0; } .legal-page ul li strong{ color:var(--white); } .legal-page .table-wrap{ overflow-x:auto; margin-block:.25rem 1rem; max-width:60em; } .legal-page table{ border-collapse:collapse; width:100%; min-width:36em; font-size:.9rem; } .legal-page th, .legal-page td{ text-align:left; vertical-align:top; padding:.65rem .8rem; border:1px solid var(--line); color:var(--grey); } .legal-page th{ font-family: var(--font-body); font-size:.72rem; letter-spacing:.08em; text-transform:uppercase; color:var(--white); background:var(--charcoal); }