/* ========================================================================== Cleared To Land — landing page ========================================================================== */ :root{ --bg:#050505; --fg:#f2f2f2; --line:rgba(255,255,255,.12); --line-strong:rgba(255,255,255,.16); --mono:'IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; --sans:Archivo,'Helvetica Neue',Helvetica,Arial,sans-serif; --gutter:clamp(18px,4vw,56px); } *,*::before,*::after{box-sizing:border-box} html{-webkit-text-size-adjust:100%;scroll-behavior:smooth} body{ margin:0; /* The glow lives on so it spans the full window width. Painting it on .page instead cut it off at the max-width edge on wide screens. */ background-color:var(--bg); background-image:radial-gradient(120% 70% at 50% -10%,rgba(255,255,255,.07),rgba(255,255,255,0) 60%); background-repeat:no-repeat; color:var(--fg); font-family:var(--sans); -webkit-font-smoothing:antialiased; -webkit-tap-highlight-color:transparent; overflow-x:hidden; } a{color:var(--fg);text-decoration:none} a:hover{color:#fff} img{max-width:100%} ::selection{background:#fff;color:#000} :focus-visible{outline:1px solid #fff;outline-offset:3px} .mono{font-family:var(--mono)} .page{ min-height:100vh; /* svh keeps the first screen honest on iOS/Android, where the URL bar makes 100vh taller than the visible viewport. */ min-height:100svh; max-width:1680px; margin:0 auto; /* Safe-area insets matter on notched phones in landscape. */ padding-left:max(var(--gutter),env(safe-area-inset-left)); padding-right:max(var(--gutter),env(safe-area-inset-right)); } @keyframes ctlblink{0%,55%{opacity:1}56%,100%{opacity:.15}} @keyframes ctlsweep{0%{transform:translateX(-120%)}100%{transform:translateX(520%)}} /* --------------------------------------------------------------- header -- */ .hd{ display:flex;align-items:center;justify-content:space-between; gap:16px;flex-wrap:wrap; padding:18px 0; border-bottom:1px solid var(--line); } .hd__brand{display:flex;align-items:center;gap:12px} .hd__mark{width:22px;height:22px;display:block;opacity:.95} .hd__name{font-size:11px;letter-spacing:.22em;color:rgba(255,255,255,.75)} .hd__status{ margin:0; display:flex;align-items:center;gap:10px; font-size:11px;letter-spacing:.18em;color:rgba(255,255,255,.55); } .dot{width:6px;height:6px;border-radius:50%;background:#fff;display:inline-block;flex:none} .dot--blink{animation:ctlblink 2.4s steps(1,end) infinite} /* ----------------------------------------------------------------- hero -- */ .hero{ display:flex;flex-direction:column;align-items:center;text-align:center; padding:clamp(56px,11vw,132px) 0 clamp(40px,7vw,80px); } .hero__mark{ width:clamp(46px,7vw,74px);height:auto;display:block; margin-bottom:clamp(26px,4vw,44px);opacity:.92; } .hero__title{margin:0;line-height:0} .hero__wordmark{width:min(86vw,700px);height:auto;display:block} .hero__tag{ margin:clamp(26px,4vw,40px) 0 0; font-size:clamp(10px,1.6vw,12px);letter-spacing:.34em; color:rgba(255,255,255,.62);text-transform:uppercase; } .hero__meta{ margin:18px 0 0; display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:14px; font-size:11px;letter-spacing:.18em;color:rgba(255,255,255,.38); } .rule{width:14px;height:1px;background:rgba(255,255,255,.28)} /* ---------------------------------------------------------------- panel -- */ .panel{ position:relative;overflow:hidden; border:1px solid var(--line-strong); background:linear-gradient(180deg,#101010,#080808); box-shadow:inset 0 1px 0 rgba(255,255,255,.09),inset 0 -14px 28px rgba(0,0,0,.7); display:flex;flex-wrap:wrap;align-items:stretch; } .panel__sweep{ position:absolute;top:0;left:0;width:24%;height:100%; background:linear-gradient(90deg,rgba(255,255,255,0),rgba(255,255,255,.05),rgba(255,255,255,0)); animation:ctlsweep 7s linear infinite;pointer-events:none; } .panel__fcu{ display:flex;align-items:center;gap:14px; padding:0 clamp(16px,2vw,24px); border-right:1px solid var(--line); } .knob{ width:34px;height:34px;border-radius:50%; border:1px solid rgba(255,255,255,.3); background:radial-gradient(circle at 32% 28%,#2a2a2a,#0d0d0d 70%); box-shadow:0 1px 0 rgba(255,255,255,.12); display:flex;align-items:center;justify-content:center; transition:transform .4s ease;flex:none; } .knob__needle{width:1px;height:12px;background:rgba(255,255,255,.7);margin-bottom:12px} .panel__fcu:hover .knob{transform:rotate(38deg)} .panel__label{ display:block;font-size:9.5px;letter-spacing:.24em;color:rgba(255,255,255,.4); } .cell{ flex:1 1 96px;min-width:92px; padding:14px clamp(11px,1.4vw,16px); border-right:1px solid var(--line); transition:background .25s ease; } .cell:hover{background:rgba(255,255,255,.05)} .cell .panel__label{letter-spacing:.24em;margin-bottom:8px} .cell--alt{flex:1 1 118px;min-width:112px} .cell--vs{flex:1 1 112px;min-width:106px} .readout{ position:relative;display:inline-block; font-size:clamp(19px,2.4vw,26px);letter-spacing:.06em; font-variant-numeric:tabular-nums; color:#fff;text-shadow:0 0 14px rgba(255,255,255,.35); } .readout__ghost{position:absolute;inset:0;color:rgba(255,255,255,.07);text-shadow:none} .ap{ flex:1 0 132px;min-height:52px; display:flex;align-items:center;justify-content:center;gap:10px; padding:10px clamp(14px,1.8vw,20px); background:transparent; border:0;border-left:1px solid var(--line);border-top:1px solid rgba(255,255,255,.06); color:inherit;cursor:pointer; font-family:var(--mono);font-size:11px;letter-spacing:.2em; transition:background .25s ease; } .ap:hover{background:rgba(255,255,255,.07)} .ap__bar{width:26px;height:7px;flex:none;transition:background .25s ease,box-shadow .25s ease} .ap__txt{transition:color .25s ease} .ap.is-on .ap__bar{background:#fff;box-shadow:0 0 12px rgba(255,255,255,.6)} .ap.is-on .ap__txt{color:#fff} .ap:not(.is-on) .ap__bar{background:rgba(255,255,255,.16)} .ap:not(.is-on) .ap__txt{color:rgba(255,255,255,.42)} .panel__hint{ margin:0; flex:1 1 100%; display:flex;align-items:center;justify-content:space-between;gap:12px; padding:9px clamp(14px,1.8vw,20px); border-top:1px solid rgba(255,255,255,.1); background:rgba(255,255,255,.02); font-size:9.5px;letter-spacing:.2em;color:rgba(255,255,255,.42); } .leds{display:flex;align-items:center;gap:6px;flex:none} .led{width:5px;height:5px;display:block} .led--1{background:rgba(255,255,255,.85);animation:ctlblink 1.7s steps(1,end) infinite} .led--2{background:rgba(255,255,255,.5);animation:ctlblink 2.3s steps(1,end) infinite} .led--3{background:rgba(255,255,255,.3);animation:ctlblink 3.1s steps(1,end) infinite} /* ----------------------------------------------------------------- sets -- */ .sets{padding:clamp(44px,7vw,84px) 0 clamp(30px,5vw,56px)} .sets__head{ display:flex;align-items:baseline;justify-content:space-between; gap:20px;flex-wrap:wrap;margin-bottom:clamp(26px,4vw,42px); } .sets__title{ margin:0; font-size:clamp(30px,6.4vw,64px);line-height:.94;letter-spacing:-.03em; font-weight:600;text-transform:uppercase; } .sets__sub{ display:block;margin-top:12px; font-size:11px;letter-spacing:.2em;color:rgba(255,255,255,.35); } .sets__count{font-size:11px;letter-spacing:.2em;color:rgba(255,255,255,.45)} .sets__grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(min(320px,100%),1fr)); gap:clamp(18px,2.6vw,30px); } .card{border:1px solid rgba(255,255,255,.14);background:#0a0a0a} .card__media{position:relative;aspect-ratio:16/9;background:#000;overflow:hidden} .card__media iframe{position:absolute;inset:0;width:100%;height:100%;border:0} .facade{ position:absolute;inset:0;width:100%;height:100%; display:flex;align-items:center;justify-content:center; padding:0;border:0;background:transparent;color:inherit;cursor:pointer; } .facade__watermark{position:absolute;width:34%;opacity:.1} .facade__poster{ position:absolute;inset:0; background-size:cover;background-position:center; filter:grayscale(1) contrast(1.08) brightness(.78); transition:filter .4s ease,transform .5s ease; } .facade__scrim{position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.15),rgba(0,0,0,.6))} .facade:hover .facade__poster{filter:grayscale(1) contrast(1.08) brightness(.92);transform:scale(1.02)} .play{ position:relative; display:flex;align-items:center;justify-content:center; width:clamp(58px,7vw,76px);height:clamp(58px,7vw,76px); border:1px solid rgba(255,255,255,.75);border-radius:50%; background:rgba(0,0,0,.35); -webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px); transition:background .25s ease,transform .25s ease,color .25s ease; } .play__tri{ width:0;height:0; border-left:14px solid currentColor; border-top:9px solid transparent;border-bottom:9px solid transparent; margin-left:4px; } .facade:hover .play,.facade:focus-visible .play{background:#fff;color:#050505;transform:scale(1.06)} .facade__cta{ position:absolute;left:14px;bottom:12px; font-size:10px;letter-spacing:.2em;color:rgba(255,255,255,.8); } .card__body{padding:clamp(16px,2.2vw,24px);display:flex;flex-direction:column;gap:12px} .card__meta{ margin:0; display:flex;align-items:baseline;justify-content:space-between;gap:12px; font-size:10.5px;letter-spacing:.2em;color:rgba(255,255,255,.45); } .card__artist{ margin:0; font-size:clamp(22px,3vw,32px);line-height:1.05;letter-spacing:-.02em; font-weight:600;text-transform:uppercase; } .card__venue{ margin:0; font-size:11.5px;line-height:1.6;letter-spacing:.06em;color:rgba(255,255,255,.55); } /* --------------------------------------------------- about / channels --- */ .eyebrow{ display:block;margin:0 0 22px; font-size:11px;font-weight:400;letter-spacing:.2em;color:rgba(255,255,255,.45); } .info{ padding:clamp(30px,5vw,56px) 0 clamp(44px,7vw,80px); border-top:1px solid var(--line); display:grid;grid-template-columns:repeat(auto-fit,minmax(min(280px,100%),1fr)); gap:clamp(26px,4vw,60px); } .info__lead{ margin:0; font-size:clamp(17px,2vw,22px);line-height:1.45;letter-spacing:-.01em; color:rgba(255,255,255,.92);max-width:34ch;text-wrap:pretty; } .info__note{ margin:18px 0 0; font-size:12px;line-height:1.7;letter-spacing:.04em; color:rgba(255,255,255,.5);max-width:40ch;text-wrap:pretty; } .chan{display:flex;flex-direction:column} .chan__row{ display:flex;align-items:center;justify-content:space-between;gap:16px; padding:clamp(18px,2.6vw,26px) 4px; border-top:1px solid var(--line); transition:padding-left .3s ease,background .3s ease; } .chan__row:last-child{border-bottom:1px solid var(--line)} .chan__row:hover{padding-left:18px;background:rgba(255,255,255,.05)} .chan__name{ font-size:clamp(19px,3vw,30px);font-weight:500;letter-spacing:-.01em;text-transform:uppercase; } .chan__meta{ display:flex;align-items:center;gap:14px; font-size:11px;letter-spacing:.16em;color:rgba(255,255,255,.5); text-align:right; } .chan__arrow{font-size:15px;color:#fff} /* ----------------------------------------------------------------- crew -- */ .crew{padding:0 0 clamp(44px,7vw,80px)} .crew__list{ margin:0;padding:0;list-style:none; display:flex;flex-wrap:wrap;gap:10px 12px; } .crew__tag{ font-size:12px;letter-spacing:.16em;color:rgba(255,255,255,.72); border:1px solid var(--line-strong);padding:9px 14px; } /* --------------------------------------------------------------- footer -- */ .ft{ border-top:1px solid var(--line); padding:clamp(30px,4vw,48px) 0 clamp(34px,5vw,54px); display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:28px; } .ft__coords{display:flex;flex-direction:column;gap:14px} .ft__coords img{width:min(74vw,300px);height:auto;opacity:.55;display:block} .ft__copy{ margin:0; display:flex;align-items:center;gap:12px; font-size:10.5px;letter-spacing:.2em;color:rgba(255,255,255,.4); } .ft__copy img{width:16px;height:16px;opacity:.5} /* ======================================================================== Phones — the flight panel is dropped ======================================================================== */ /* The FCU is a pointer toy: it steers from cursor position and needs room for five readouts side by side. A phone has neither, so the panel is dropped there rather than squeezed into a grid — app.js stops its loop to match. */ @media (max-width:820px){ .panel{display:none} } /* A phone in landscape is wide enough to dodge the rule above but is still a phone: no hover, and a viewport too short to spend on instruments. */ @media (hover:none) and (max-height:560px){ .panel{display:none} } /* ======================================================================== Mobile — <= 640px ======================================================================== */ @media (max-width:640px){ /* Slightly tighter frame than the desktop clamp floor, and display type that scales with the screen instead of sitting at its minimum: at 390px the shared clamps left every heading small relative to the page. */ :root{--gutter:20px} /* Header: brand on one line, status flush left underneath. */ .hd{padding:16px 0;gap:10px} .hd__status{ width:100%; font-size:9.5px;letter-spacing:.16em; } /* No panel underneath, so the hero gives back some bottom padding and the sets section opens the page instead. */ .hero{padding:clamp(40px,13vw,68px) 0 clamp(24px,7vw,42px)} .hero__mark{width:42px;margin-bottom:clamp(22px,6vw,34px)} .hero__wordmark{width:min(100%,460px)} .hero__tag{margin-top:clamp(22px,6vw,32px);font-size:9.5px;letter-spacing:.28em} .hero__meta{margin-top:14px;gap:8px 10px;font-size:9.5px;letter-spacing:.14em} .rule{width:10px} .sets{padding:clamp(34px,10vw,58px) 0 clamp(26px,7vw,44px)} .sets__head{gap:14px;margin-bottom:clamp(22px,6vw,34px)} .sets__title{font-size:clamp(34px,11vw,52px);line-height:.92} .sets__sub{font-size:9.5px;letter-spacing:.16em;margin-top:10px} .sets__count{font-size:9.5px;letter-spacing:.16em} /* 3:2 artwork stands up better in a single column than a wide 16:9 strip; the embed goes back to 16:9 on play so the video is not letterboxed. */ .card__media{aspect-ratio:3/2} .card__media.is-playing{aspect-ratio:16/9} .facade__watermark{width:42%} .facade__cta{left:12px;bottom:10px;font-size:9px;letter-spacing:.16em} .card__body{padding:16px;gap:10px} .card__artist{font-size:clamp(24px,7.4vw,34px)} .card__venue{font-size:11px} .eyebrow{margin-bottom:18px;font-size:10px} .info{padding:clamp(26px,8vw,44px) 0 clamp(34px,9vw,58px);gap:32px} .info__lead{font-size:clamp(18px,4.8vw,22px);line-height:1.4;max-width:30ch} .info__note{margin-top:14px;font-size:11px;max-width:34ch} /* Channel rows stack so long handles never squeeze the label. */ .chan__row{ flex-direction:column;align-items:flex-start;gap:8px; padding:18px 2px; } .chan__row:hover{padding-left:12px} .chan__name{font-size:clamp(21px,6.6vw,28px)} .chan__meta{gap:10px;font-size:10px;letter-spacing:.14em;text-align:left} .crew{padding-bottom:clamp(34px,9vw,58px)} .crew__tag{font-size:10.5px;letter-spacing:.14em;padding:8px 12px} .ft{padding:clamp(26px,7vw,42px) 0 clamp(30px,8vw,46px);gap:22px} /* Home-indicator clearance on iOS. */ .ft{padding-bottom:calc(clamp(30px,8vw,46px) + env(safe-area-inset-bottom))} .ft__coords img{width:min(82vw,260px)} .ft__copy{font-size:9.5px;letter-spacing:.16em} } /* Very narrow phones */ @media (max-width:360px){ .hd__name{font-size:10px;letter-spacing:.18em} .sets__title{font-size:32px} .crew__tag{font-size:10px;padding:7px 10px} } /* Touch devices have no hover: keep the play button legible. */ @media (hover:none){ .facade__poster{filter:grayscale(1) contrast(1.08) brightness(.85)} .chan__row:hover{padding-left:4px;background:transparent} } @media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} .panel__sweep,.dot--blink,.led{animation:none} .panel__sweep{opacity:0} *,*::before,*::after{transition-duration:.01ms !important} }