/* Archivo Black by Omnibus-Type, licensed under the SIL Open Font License 1.1. */ @font-face { font-family: "Archivo Black Embedded"; font-style: normal; font-weight: 400; font-display: swap; src: url("data:font/woff2;base64,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") format("woff2"); } :root { --blue: #2c5282; --blue-deep: #1a365d; --night: #1a202c; --panel: rgba(30, 40, 70, 0.82); --panel-solid: #1e2846; --panel-deep: #151d34; --line: rgba(255, 255, 255, 0.11); --line-strong: rgba(255, 255, 255, 0.2); --white: #ffffff; --copy: #cbd5e0; --muted: #94a3b8; --dim: #66758d; --indigo: #667eea; --indigo-bright: #8a9bff; --yellow: #eab308; --green: #68d391; --shadow: 0 28px 80px rgba(3, 8, 24, 0.38); --radius-lg: 28px; --radius-md: 18px; --page: min(1180px, calc(100% - 40px)); } * { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; background: var(--night); } body { min-height: 100vh; overflow-x: hidden; color: var(--copy); background: radial-gradient(circle at 78% 7%, rgba(102, 126, 234, 0.23), transparent 26rem), radial-gradient(circle at 12% 37%, rgba(75, 108, 169, 0.18), transparent 30rem), linear-gradient(180deg, var(--blue) 0%, var(--blue-deep) 23%, var(--night) 59%, #121722 100%); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 16px; line-height: 1.6; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } body::before { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: 0.32; background-image: radial-gradient(circle at 20% 20%, rgba(255,255,255,.08) 0 1px, transparent 1.5px), radial-gradient(circle at 80% 55%, rgba(255,255,255,.06) 0 1px, transparent 1.5px); background-position: 0 0, 9px 13px; background-size: 24px 24px, 31px 31px; mask-image: linear-gradient(to bottom, black, transparent 75%); } a { color: inherit; } button, a { -webkit-tap-highlight-color: transparent; } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } .skip-link { position: fixed; top: 12px; left: 12px; z-index: 100; padding: 10px 16px; border-radius: 999px; color: var(--white); background: var(--panel-solid); transform: translateY(-160%); transition: transform .2s ease; } .skip-link:focus { transform: translateY(0); } .shell { width: var(--page); margin-inline: auto; } .site-header { position: absolute; top: 0; left: 0; width: 100%; z-index: 20; padding: max(22px, env(safe-area-inset-top)) 0 0; } .nav { display: flex; align-items: center; justify-content: space-between; gap: 24px; } .band-mark { color: var(--white); font-size: 14px; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; } .archive-tag { display: inline-flex; align-items: center; gap: 9px; padding: 8px 13px; border: 1px solid var(--line); border-radius: 999px; color: var(--copy); background: rgba(18, 26, 48, 0.38); backdrop-filter: blur(12px); font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; } .archive-tag::before, .eyebrow::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--yellow); box-shadow: 0 0 0 5px rgba(234, 179, 8, .1), 0 0 18px rgba(234, 179, 8, .55); } .hero { position: relative; display: grid; align-items: center; min-height: calc(100svh - 70px); /* the shared header sits above, in flow */ padding: 40px 0 88px; } .hero-grid { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(330px, .72fr); align-items: center; gap: clamp(48px, 8vw, 110px); } .eyebrow, .section-label { display: flex; align-items: center; gap: 12px; margin-bottom: 24px; color: var(--yellow); font-size: 12px; font-weight: 800; letter-spacing: .17em; text-transform: uppercase; } .hero h1 { max-width: 780px; color: var(--white); font-size: clamp(4.4rem, 8.6vw, 8.2rem); font-weight: 800; letter-spacing: -.07em; line-height: .84; text-wrap: balance; } .hero h1 span { display: block; color: transparent; font-family: "Archivo Black Embedded", "Arial Black", Arial, sans-serif; font-weight: 400; letter-spacing: -.035em; line-height: .9; -webkit-text-stroke: 1.5px rgba(255, 255, 255, .62); } .hero-lede { max-width: 650px; margin-top: 32px; color: var(--copy); font-size: clamp(1.05rem, 1.7vw, 1.3rem); line-height: 1.55; } .hero-lede strong { color: var(--white); font-weight: 700; } .hero-meta { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 32px; } .hero-meta span { padding: 9px 13px; border: 1px solid var(--line); border-radius: 999px; color: var(--copy); background: rgba(255, 255, 255, .045); font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; } .hero-link { display: inline-flex; align-items: center; gap: 12px; margin-top: 36px; color: var(--white); font-size: 14px; font-weight: 700; text-decoration: none; } .hero-link .arrow { display: grid; place-items: center; width: 34px; height: 34px; border: 1px solid var(--line-strong); border-radius: 50%; background: rgba(255,255,255,.055); transition: transform .2s ease, background .2s ease; } .hero-link:hover .arrow, .hero-link:focus-visible .arrow { background: var(--indigo); transform: translateY(3px); } .primary-cta { display: inline-flex; align-items: center; gap: 12px; margin-top: 36px; padding: 14px 19px 14px 22px; border: 1px solid rgba(234, 179, 8, .46); border-radius: 999px; color: #151515; background: var(--yellow); box-shadow: 0 16px 36px rgba(10, 15, 30, .24); font-size: 14px; font-weight: 850; text-decoration: none; transition: transform .2s ease, box-shadow .2s ease, background .2s ease; } .primary-cta:hover, .primary-cta:focus-visible { background: #f3c62b; box-shadow: 0 20px 44px rgba(10, 15, 30, .34); transform: translateY(-2px); } .primary-cta span { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; color: var(--white); background: rgba(21, 21, 21, .88); font-size: 16px; } .release-wrap { position: relative; isolation: isolate; } .release-wrap::before { content: ""; position: absolute; z-index: -1; inset: 10% -16% -8%; border-radius: 50%; background: rgba(102, 126, 234, .31); filter: blur(58px); } .release-card { position: relative; overflow: hidden; padding: 18px; border: 1px solid rgba(255,255,255,.15); border-radius: var(--radius-lg); background: linear-gradient(155deg, rgba(40, 53, 93, .96), rgba(19, 26, 49, .96)); box-shadow: 0 34px 85px rgba(7, 12, 30, .52), 0 0 85px rgba(102, 126, 234, .2); transform: rotate(2.2deg); } .release-card::after { content: ""; position: absolute; inset: -30% auto auto -70%; width: 56%; height: 180%; pointer-events: none; background: linear-gradient(90deg, transparent, rgba(255,255,255,.11), transparent); transform: rotate(22deg); animation: card-shine 8s 1.5s ease-in-out infinite; } .record-art { position: relative; display: flex; min-height: 350px; overflow: hidden; align-items: flex-end; padding: 24px; border: 1px solid rgba(255,255,255,.12); border-radius: 19px; background: linear-gradient(180deg, rgba(4, 8, 21, .08), rgba(3, 6, 16, .84)), radial-gradient(ellipse at 25% 8%, rgba(138,155,255,.85), transparent 24%), radial-gradient(ellipse at 76% 12%, rgba(234,179,8,.62), transparent 22%), linear-gradient(135deg, #304b7e 0%, #1e294c 46%, #0f1527 100%); } .record-art::before, .record-art::after { content: ""; position: absolute; top: -70px; width: 120px; height: 430px; opacity: .42; filter: blur(7px); background: linear-gradient(to bottom, rgba(255,255,255,.75), transparent 72%); clip-path: polygon(44% 0, 56% 0, 100% 100%, 0 100%); } .record-art::before { left: 12%; transform: rotate(-14deg); } .record-art::after { right: 8%; transform: rotate(17deg); } .stage-lines { position: absolute; inset: 0; opacity: .22; background: repeating-linear-gradient(90deg, transparent 0 42px, rgba(255,255,255,.1) 43px), linear-gradient(0deg, rgba(255,255,255,.08) 1px, transparent 1px); background-size: auto, 100% 42px; transform: perspective(380px) rotateX(58deg) scale(1.7) translateY(25%); transform-origin: bottom; } .art-copy { position: relative; z-index: 2; } .art-kicker { color: var(--yellow); font-size: 10px; font-weight: 800; letter-spacing: .2em; text-transform: uppercase; } .art-title { max-width: 320px; margin-top: 7px; color: var(--white); font-size: clamp(2rem, 4vw, 3.5rem); font-weight: 800; letter-spacing: -.055em; line-height: .95; } .record-details { padding: 20px 8px 4px; } .record-topline { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; } .record-title { color: var(--white); font-size: 18px; font-weight: 750; line-height: 1.2; } .record-subtitle { margin-top: 4px; color: var(--yellow); font-size: 13px; } .fidelity { flex: 0 0 auto; padding: 6px 9px; border: 1px solid rgba(104, 211, 145, .28); border-radius: 999px; color: var(--green); background: rgba(104, 211, 145, .08); font-size: 9px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; } .waveform { display: flex; height: 54px; align-items: center; gap: 3px; margin-top: 18px; } .waveform span { flex: 1 1 0; height: calc(var(--h) * 1%); min-height: 4px; border-radius: 999px; background: linear-gradient(180deg, var(--indigo-bright), var(--indigo)); opacity: .72; transform-origin: center; animation: wave-pulse 1.5s calc(var(--i) * -41ms) ease-in-out infinite alternate; } .record-foot { display: flex; justify-content: space-between; margin-top: 10px; color: var(--muted); font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; } .scroll-cue { position: absolute; bottom: 28px; left: 50%; width: 1px; height: 42px; overflow: hidden; background: rgba(255,255,255,.15); } .scroll-cue::after { content: ""; position: absolute; inset: -100% 0 auto; height: 70%; background: var(--white); animation: scroll-cue 2s ease-in-out infinite; } main { overflow: hidden; } .section { position: relative; padding: clamp(92px, 12vw, 160px) 0; } .section-label { margin-bottom: 20px; } .section-label::before { content: ""; width: 34px; height: 1px; background: var(--yellow); } .display { max-width: 930px; color: var(--white); font-size: clamp(3rem, 7vw, 6.6rem); font-weight: 800; letter-spacing: -.065em; line-height: .93; text-wrap: balance; } .section-copy { max-width: 690px; margin-top: 32px; color: var(--copy); font-size: clamp(1.05rem, 1.8vw, 1.3rem); line-height: 1.65; } .section-copy strong { color: var(--white); } .opening { padding-top: clamp(120px, 15vw, 190px); } .opening::before { content: ""; position: absolute; top: 3%; right: -18%; width: 44vw; height: 44vw; border: 1px solid rgba(102,126,234,.16); border-radius: 50%; box-shadow: 0 0 0 50px rgba(102,126,234,.035), 0 0 0 110px rgba(102,126,234,.025), 0 0 110px rgba(102,126,234,.13); } .moment-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 72px; } .moment-card { min-height: 255px; padding: 28px; border: 1px solid var(--line); border-radius: var(--radius-md); background: rgba(30, 40, 70, .58); backdrop-filter: blur(12px); transition: transform .3s ease, border-color .3s ease, background .3s ease; } .moment-card:hover { transform: translateY(-5px); border-color: rgba(138,155,255,.35); background: rgba(38, 51, 89, .74); } .moment-number { color: var(--yellow); font-size: 11px; font-weight: 800; letter-spacing: .16em; } .moment-card h3 { margin-top: 46px; color: var(--white); font-size: 22px; letter-spacing: -.025em; line-height: 1.2; } .moment-card p { margin-top: 14px; color: var(--muted); font-size: 15px; line-height: 1.6; } .official-grid, .support-grid { display: grid; grid-template-columns: minmax(0, 760px); align-items: center; gap: clamp(54px, 9vw, 130px); } .proof-card { position: relative; padding: 30px; overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius-lg); background: linear-gradient(145deg, rgba(43, 58, 102, .72), rgba(18, 25, 46, .92)); box-shadow: var(--shadow); } .proof-card::before { content: ""; position: absolute; top: -70px; right: -70px; width: 190px; height: 190px; border-radius: 50%; background: rgba(102,126,234,.25); filter: blur(38px); } .proof-kicker { color: var(--muted); font-size: 10px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; } .proof-title { margin-top: 12px; color: var(--white); font-size: clamp(1.8rem, 3vw, 2.7rem); font-weight: 800; letter-spacing: -.045em; line-height: 1; } .proof-list { display: grid; gap: 12px; margin-top: 34px; list-style: none; } .proof-list li { display: flex; align-items: center; gap: 13px; padding: 14px 16px; border: 1px solid rgba(255,255,255,.075); border-radius: 12px; color: var(--copy); background: rgba(255,255,255,.035); font-size: 14px; } .proof-list li::before { content: ""; width: 9px; height: 9px; flex: 0 0 auto; border: 2px solid var(--green); border-radius: 50%; box-shadow: 0 0 14px rgba(104,211,145,.28); } .proof-stamp { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-top: 32px; padding-top: 22px; border-top: 1px solid var(--line); } .signature { color: var(--white); font-size: 15px; font-weight: 750; } .approved { color: var(--green); font-size: 10px; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; } .exclusive { padding-block: clamp(100px, 14vw, 180px); } .exclusive-panel { position: relative; padding: clamp(38px, 7vw, 82px); overflow: hidden; border: 1px solid rgba(255,255,255,.12); border-radius: var(--radius-lg); background: linear-gradient(120deg, rgba(38, 54, 96, .94), rgba(17, 24, 44, .96)), var(--panel-solid); box-shadow: var(--shadow); } .exclusive-panel::after { content: "ONLY HERE"; position: absolute; right: -3%; bottom: -7%; color: rgba(255,255,255,.025); font-size: clamp(5rem, 13vw, 11rem); font-weight: 900; letter-spacing: -.08em; line-height: 1; white-space: nowrap; } .exclusive-platforms { position: relative; z-index: 1; display: flex; flex-wrap: wrap; gap: 10px; margin-top: 40px; } .exclusive-platforms span { position: relative; padding: 11px 15px; overflow: hidden; border: 1px solid var(--line); border-radius: 999px; color: var(--muted); background: rgba(0,0,0,.11); font-size: 12px; font-weight: 700; } .exclusive-platforms span::after { content: ""; position: absolute; top: 50%; left: 8%; width: 84%; height: 1px; background: rgba(234,179,8,.84); transform: rotate(-7deg); } .connection { position: relative; min-height: 330px; padding: 40px 34px; border: 1px solid var(--line); border-radius: var(--radius-lg); background: rgba(24, 33, 59, .72); box-shadow: var(--shadow); } .connection-title { color: var(--muted); font-size: 10px; font-weight: 800; letter-spacing: .16em; text-align: center; text-transform: uppercase; } .connection-flow { position: absolute; inset: 80px 34px 36px; display: flex; align-items: center; justify-content: space-between; gap: 18px; } .connection-node { position: relative; z-index: 2; display: grid; place-items: center; width: 120px; aspect-ratio: 1; border: 1px solid rgba(255,255,255,.16); border-radius: 50%; color: var(--white); background: linear-gradient(145deg, #2a3967, #171f39); box-shadow: 0 16px 40px rgba(5,10,25,.36); font-size: 13px; font-weight: 800; letter-spacing: .11em; text-align: center; text-transform: uppercase; } .connection-node:last-child { border-color: rgba(102,126,234,.5); box-shadow: 0 0 40px rgba(102,126,234,.24); } .connection-line { position: relative; flex: 1; height: 1px; overflow: visible; background: linear-gradient(90deg, var(--yellow), var(--indigo-bright)); } .connection-line::after { content: ""; position: absolute; top: 50%; left: 0; width: 8px; height: 8px; border-radius: 50%; background: var(--white); box-shadow: 0 0 14px var(--indigo-bright); transform: translate(-50%, -50%); animation: direct-line 2.8s ease-in-out infinite; } .connection-caption { position: absolute; bottom: 14px; left: 50%; width: 100%; color: var(--green); font-size: 10px; font-weight: 800; letter-spacing: .13em; text-align: center; text-transform: uppercase; transform: translateX(-50%); } .notify { padding-top: clamp(90px, 12vw, 155px); padding-bottom: clamp(110px, 15vw, 190px); } .notify-panel { position: relative; display: grid; grid-template-columns: minmax(0, .88fr) minmax(360px, .72fr); gap: clamp(44px, 8vw, 105px); align-items: center; padding: clamp(34px, 6vw, 74px); overflow: hidden; border: 1px solid rgba(255, 255, 255, .13); border-radius: var(--radius-lg); background: radial-gradient(circle at 8% 5%, rgba(102, 126, 234, .28), transparent 24rem), linear-gradient(135deg, rgba(38, 53, 95, .96), rgba(17, 24, 44, .98)); box-shadow: var(--shadow); } .notify-panel::after { content: "ONE TEXT"; position: absolute; right: -1%; bottom: -4%; color: rgba(255, 255, 255, .024); font-size: clamp(5rem, 11vw, 9.5rem); font-weight: 900; letter-spacing: -.07em; line-height: 1; pointer-events: none; white-space: nowrap; } .notify-copy, .signup-card { position: relative; z-index: 1; } .notify .display { font-size: clamp(3.1rem, 6vw, 5.8rem); } .notify-promise { max-width: 570px; margin-top: 28px; color: var(--copy); font-size: clamp(1.05rem, 1.6vw, 1.22rem); line-height: 1.65; } .sender-note { display: inline-flex; align-items: center; gap: 10px; margin-top: 28px; padding: 10px 13px; border: 1px solid rgba(255, 255, 255, .1); border-radius: 11px; color: var(--muted); background: rgba(255, 255, 255, .04); font-size: 12px; } .sender-note::before { content: ""; width: 8px; height: 8px; flex: 0 0 auto; border-radius: 50%; background: var(--green); box-shadow: 0 0 14px rgba(104, 211, 145, .42); } .sender-note strong { color: var(--white); } .signup-card { padding: 28px; border: 1px solid rgba(255, 255, 255, .15); border-radius: 22px; background: rgba(12, 18, 34, .8); box-shadow: 0 24px 58px rgba(3, 7, 18, .38); backdrop-filter: blur(16px); } .signup-progress { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; margin-bottom: 28px; } .progress-segment { height: 3px; overflow: hidden; border-radius: 999px; background: rgba(255, 255, 255, .1); } .progress-segment.is-complete, .progress-segment.is-current { background: var(--yellow); } .form-step[hidden] { display: none; } .form-kicker { color: var(--yellow); font-size: 10px; font-weight: 800; letter-spacing: .15em; text-transform: uppercase; } .form-title { margin-top: 10px; color: var(--white); font-size: clamp(1.65rem, 3vw, 2.2rem); font-weight: 800; letter-spacing: -.04em; line-height: 1.08; } .form-intro { margin-top: 12px; color: var(--muted); font-size: 14px; line-height: 1.55; } .form-intro strong { color: var(--white); } .field-group { margin-top: 24px; } .field-label { display: block; margin-bottom: 8px; color: var(--copy); font-size: 12px; font-weight: 750; } .form-input { width: 100%; min-height: 52px; padding: 0 15px; border: 1px solid rgba(255, 255, 255, .15); border-radius: 12px; outline: none; color: var(--white); background: rgba(255, 255, 255, .055); font: inherit; font-size: 16px; transition: border-color .2s ease, box-shadow .2s ease; } .form-input::placeholder { color: #708098; } .form-input:focus { border-color: rgba(138, 155, 255, .78); box-shadow: 0 0 0 4px rgba(102, 126, 234, .14); } .form-error { min-height: 21px; margin-top: 7px; color: #fca5a5; font-size: 12px; } .form-button, .contact-button { display: inline-flex; width: 100%; min-height: 52px; align-items: center; justify-content: center; gap: 9px; border: 0; border-radius: 12px; color: #151515; background: var(--yellow); cursor: pointer; font: inherit; font-size: 14px; font-weight: 850; text-align: center; text-decoration: none; transition: transform .2s ease, background .2s ease; } .form-button:hover, .form-button:focus-visible, .contact-button:hover, .contact-button:focus-visible { background: #f3c62b; transform: translateY(-1px); } .consent-copy, .prototype-note { margin-top: 13px; color: var(--dim); font-size: 10px; line-height: 1.5; } .prototype-note { padding-top: 12px; border-top: 1px solid rgba(255, 255, 255, .075); text-align: center; } .text-actions { display: flex; justify-content: space-between; gap: 18px; margin-top: 15px; } .text-button { border: 0; color: var(--muted); background: transparent; cursor: pointer; font: inherit; font-size: 12px; text-decoration: underline; text-decoration-color: rgba(148, 163, 184, .46); text-underline-offset: 3px; } .text-button:hover, .text-button:focus-visible { color: var(--white); } .message-preview { margin: 20px 0 22px; padding: 14px; border: 1px solid rgba(255, 255, 255, .08); border-radius: 14px; background: rgba(255, 255, 255, .035); } .message-from { color: var(--green); font-size: 9px; font-weight: 850; letter-spacing: .12em; text-transform: uppercase; } .message-bubble { margin-top: 8px; color: var(--copy); font-size: 12px; line-height: 1.5; } .success-icon { display: grid; width: 48px; height: 48px; place-items: center; margin-bottom: 20px; border: 1px solid rgba(104, 211, 145, .38); border-radius: 50%; color: var(--night); background: var(--green); box-shadow: 0 0 26px rgba(104, 211, 145, .2); font-size: 22px; font-weight: 900; } .contact-explainer { margin: 12px 0 18px; color: var(--muted); font-size: 12px; line-height: 1.5; } .restart-button { display: block; margin: 17px auto 0; } .crowd { position: relative; padding-block: clamp(130px, 18vw, 220px); text-align: center; } .crowd::before { content: ""; position: absolute; inset: 15% 0 0; z-index: -1; background: radial-gradient(ellipse at 50% 40%, rgba(102,126,234,.25), transparent 38%), linear-gradient(to bottom, transparent, rgba(5,9,18,.58)); } .crowd .section-label { justify-content: center; } .crowd .display { margin-inline: auto; } .crowd .section-copy { margin-inline: auto; } .crowd-line { width: min(520px, 90%); height: 92px; margin: 60px auto 0; opacity: .6; background: radial-gradient(circle at 4% 100%, #0a0f1b 0 24px, transparent 25px), radial-gradient(circle at 15% 100%, #0a0f1b 0 38px, transparent 39px), radial-gradient(circle at 28% 100%, #0a0f1b 0 30px, transparent 31px), radial-gradient(circle at 42% 100%, #0a0f1b 0 45px, transparent 46px), radial-gradient(circle at 58% 100%, #0a0f1b 0 35px, transparent 36px), radial-gradient(circle at 71% 100%, #0a0f1b 0 43px, transparent 44px), radial-gradient(circle at 85% 100%, #0a0f1b 0 29px, transparent 30px), radial-gradient(circle at 97% 100%, #0a0f1b 0 36px, transparent 37px); } .closing { min-height: 80svh; display: grid; place-items: center; padding: 120px 0; text-align: center; } .closing-inner { max-width: 980px; } .closing-kicker { color: var(--yellow); font-size: 12px; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; } .closing h2 { margin-top: 22px; color: var(--white); font-size: clamp(4rem, 9vw, 8rem); font-weight: 800; letter-spacing: -.075em; line-height: .86; text-wrap: balance; } .closing p { max-width: 700px; margin: 34px auto 0; color: var(--copy); font-size: clamp(1.05rem, 1.8vw, 1.25rem); } .event-lockup { display: inline-flex; flex-wrap: wrap; justify-content: center; gap: 9px 16px; margin-top: 50px; padding: 15px 22px; border: 1px solid var(--line); border-radius: 999px; color: var(--white); background: rgba(255,255,255,.04); font-size: 12px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; } .event-lockup span + span::before { content: "·"; margin-right: 16px; color: var(--yellow); } footer { width: var(--page); margin: 0 auto; padding: 32px 0 max(38px, env(safe-area-inset-bottom)); border-top: 1px solid var(--line); color: var(--dim); font-size: 11px; font-weight: 700; letter-spacing: .12em; text-align: center; text-transform: uppercase; } .reveal { opacity: 0; transform: translateY(24px); transition: opacity .75s ease, transform .75s cubic-bezier(.2,.65,.3,1); } .reveal.is-visible { opacity: 1; transform: translateY(0); } .delay-1 { transition-delay: .08s; } .delay-2 { transition-delay: .16s; } .delay-3 { transition-delay: .24s; } @keyframes wave-pulse { from { transform: scaleY(.65); opacity: .5; } to { transform: scaleY(1); opacity: .9; } } @keyframes card-shine { 0%, 64% { transform: translateX(0) rotate(22deg); } 84%, 100% { transform: translateX(430%) rotate(22deg); } } @keyframes scroll-cue { 0% { transform: translateY(0); } 100% { transform: translateY(290%); } } @keyframes direct-line { 0% { left: 0; opacity: 0; } 15% { opacity: 1; } 85% { opacity: 1; } 100% { left: 100%; opacity: 0; } } @media (max-width: 900px) { .hero { padding-top: 32px; } .hero-grid, .official-grid, .support-grid, .notify-panel { grid-template-columns: 1fr; } .hero-grid { gap: 70px; } .release-wrap { width: min(470px, 94%); margin-inline: auto; } .release-card { transform: rotate(1deg); } .official-grid, .support-grid, .notify-panel { gap: 58px; } .moment-grid { grid-template-columns: 1fr; } .moment-card { min-height: 0; } .moment-card h3 { margin-top: 30px; } .proof-card, .connection { width: min(540px, 100%); } .scroll-cue { display: none; } } @media (max-width: 600px) { :root { --page: min(100% - 28px, 1180px); --radius-lg: 22px; } .archive-tag { padding: 7px 10px; font-size: 9px; } .band-mark { font-size: 12px; } .hero { padding-bottom: 54px; } .hero h1 { font-size: clamp(3.7rem, 20vw, 5.8rem); } .hero-lede { margin-top: 24px; } .record-art { min-height: 300px; } .record-topline, .proof-stamp { align-items: flex-start; flex-direction: column; } .fidelity { align-self: flex-start; } .display { font-size: clamp(2.9rem, 15vw, 5rem); } .section-copy { margin-top: 24px; } .moment-grid { margin-top: 48px; } .exclusive-panel, .proof-card, .notify-panel, .signup-card { padding: 28px 22px; } .connection { min-height: 290px; padding-inline: 20px; } .connection-flow { inset-inline: 20px; } .connection-node { width: 96px; font-size: 11px; } .event-lockup { display: grid; border-radius: 18px; } .event-lockup span + span::before { display: none; } } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; } .reveal { opacity: 1; transform: none; } } /* ── After-release additions (from after_release.html) ── */ .primary-cta .cta-price { width: auto; min-width: 42px; padding-inline: 9px; font-size: 12px; } .purchase-details { display: grid; gap: 11px; margin: 25px 0; padding: 0; list-style: none; } .purchase-details li { display: flex; align-items: center; gap: 11px; color: var(--copy); font-size: 13px; } .purchase-details li::before { content: "✓"; display: grid; width: 20px; height: 20px; flex: 0 0 auto; place-items: center; border: 1px solid rgba(104, 211, 145, .3); border-radius: 50%; color: var(--green); background: rgba(104, 211, 145, .07); font-size: 10px; font-weight: 900; } .purchase-total { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin: 26px 0 20px; padding-top: 22px; border-top: 1px solid rgba(255, 255, 255, .1); } .purchase-total-label { color: var(--muted); font-size: 11px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; } .purchase-price { color: var(--white); /* Same size as the card's .form-title, so the total reads as a line item rather than shouting over the show name. */ font-size: clamp(1.65rem, 3vw, 2.2rem); font-weight: 850; letter-spacing: -.055em; line-height: .9; } .payment-note { margin-top: 13px; color: var(--dim); font-size: 10px; line-height: 1.5; text-align: center; } /* The outlined second line runs smaller than the solid first, as in the prototypes — both headlines are long enough that at full size the hero would tower over the mockup beside it. The released line ("Hear it again.") is short enough to hold on one line; the pre-release one wraps and must not be pinned. */ .hero h1 span { font-size: .78em; } body.released .hero h1 span { white-space: nowrap; } @media (max-width: 600px) { .hero h1 span { font-size: .86em; } body.released .hero h1 span { white-space: normal; } } /* ═══════════════════════════════════════════════════════════════════════ Site integration. Everything above is the prototype stylesheet (before_release.html + the after-release additions); everything below adapts it to this app: style.css loads first (the phone mockup lives there), so a few of its element rules need putting back, and the signup card gains the pieces the real flow has that the prototype's didn't (consent tick, spinner button, four-cell PIN input). ═══════════════════════════════════════════════════════════════════ */ /* style.css paints the old blue gradient on body and centers header/ footer; the prototype's background/layout must win. */ body { background: radial-gradient(circle at 78% 7%, rgba(102, 126, 234, 0.23), transparent 26rem), radial-gradient(circle at 12% 37%, rgba(75, 108, 169, 0.18), transparent 30rem), linear-gradient(180deg, var(--blue) 0%, var(--blue-deep) 23%, var(--night) 59%, #121722 100%); background-attachment: scroll; } header.site-header { text-align: left; padding: 0; margin: 0; } main { display: block; } /* The hero's media column is the real product mockup, not the prototype's record card. The wrap keeps the prototype's indigo glow (::before). */ #player_mockup { display: flex; justify-content: center; } #player_mockup .phone-preview-wrap { margin: 0; /* Casually dropped on the page, like the prototype's record card (which leans 2.2deg the same way). Static — never animated here (see docs/ios_animation_compositing.md). */ transform: rotate(3deg); } /* Four-cell PIN input (ported from the /verify page). Sized like the prototype's .form-input, one digit per cell. */ .pin-inputs { display: flex; gap: 10px; justify-content: flex-start; margin-top: 6px; } .pin-inputs .digit-input { width: 54px; height: 58px; text-align: center; font-size: 24px; font-weight: 700; color: var(--white); background: rgba(11, 16, 32, 0.72); border: 1px solid var(--line-strong); border-radius: 12px; outline: none; transition: border-color .15s ease, box-shadow .15s ease; } .pin-inputs .digit-input:focus { border-color: var(--indigo-bright); box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.28); } /* The carrier-consent tick (style.css draws the checkbox); its text must read on the signup card's dark panel. */ .signup-card .sms-consent-wrap { margin-top: 16px; } .signup-card .sms-consent-text { color: var(--muted); } /* style.css styles #phone-continue-btn by id (the old card's hug-the-label pill); on this page it is a prototype .form-button and must span the card. Same-specificity override wins because this sheet loads later. */ #phone-continue-btn, #code-submit-btn { display: inline-flex; width: 100%; margin: 18px auto 0; border-radius: 12px; } /* Submit buttons double as their own progress indicator: the label is swapped for a spinner while a request is in flight (same pattern as style.css's .btn.is-working, restated here for .form-button). */ .form-button, .contact-button { position: relative; } .form-button:disabled, .contact-button:disabled { opacity: .55; cursor: default; transform: none; } .form-button.is-working .form-button-label, .contact-button.is-working .form-button-label { visibility: hidden; } .form-button .form-button-spinner, .contact-button .form-button-spinner { display: none; position: absolute; top: 50%; left: 50%; width: 18px; height: 18px; margin: -9px 0 0 -9px; border: 2px solid rgba(10, 14, 26, 0.35); border-top-color: #0a0e1a; border-radius: 50%; animation: form-btn-spin .7s linear infinite; } .form-button.is-working .form-button-spinner, .contact-button.is-working .form-button-spinner { display: block; } @keyframes form-btn-spin { to { transform: rotate(360deg); } } /* The hidden verification fallback occupies the summary card's grid slot when a never-verified visitor taps Continue (see index.js). The contact button's inline-flex would likewise beat the hidden attribute after the fan taps it. */ #verify-fallback[hidden] { display: none; } .contact-button[hidden] { display: none; } /* One quiet line under the PIN actions ("PIN sent again."). */ .form-note { margin-top: 10px; font-size: 13px; color: var(--green); min-height: 1.2em; } /* The fan photos from the event settings, riding along under the story copy (style.css's .intro-photos strip, constrained to the shell). */ .story-photos { margin-top: 28px; } /* Hebrew events: copy blocks carry dir="rtl" individually; flex rows that must mirror do it here. */ body.lang-he .hero-copy, body.lang-he .section-label, body.lang-he .display, body.lang-he .section-copy, body.lang-he .notify-copy, body.lang-he .signup-card { direction: rtl; text-align: right; } body.lang-he .pin-inputs { direction: ltr; justify-content: flex-end; } body.lang-he .text-actions { justify-content: flex-end; } /* The no-event fallback page: the same signup card, alone and centered. */ .fallback-shell { width: var(--page); margin: 60px auto; max-width: 560px; } /* Breathing room between "Registration complete" and Tell a friend. */ #tell-friend-btn { margin-top: 18px; } /* ── The event QR, closing the page ── Amber glow pulses via a pseudo-element's OPACITY (compositor-only), not by animating box-shadow — repainting a large blur every frame is the kind of jank docs/ios_animation_compositing.md exists for. */ .qr-section { padding: 0 0 72px; } /* Hug the signup card above: the notify section's own bottom padding is stage-sized (up to 190px); with the QR closing the page it shrinks. */ .notify { padding-bottom: 48px; } .qr-panel { display: flex; flex-direction: column; align-items: center; gap: 18px; } .qr-frame { position: relative; padding: 16px; background: #ffffff; border: 3px solid var(--yellow); border-radius: 22px; box-shadow: 0 0 22px rgba(234, 179, 8, 0.35); } .qr-frame::after { content: ""; position: absolute; inset: -3px; border-radius: 22px; pointer-events: none; box-shadow: 0 0 46px 8px rgba(234, 179, 8, 0.55); opacity: 0; animation: qr-glow 2.4s ease-in-out infinite; } @keyframes qr-glow { 0%, 100% { opacity: 0; } 50% { opacity: 1; } } .qr-img { display: block; width: min(260px, 60vw); height: auto; } .qr-caption { color: var(--muted); font-size: 13px; letter-spacing: .08em; text-transform: uppercase; } @media (prefers-reduced-motion: reduce) { .qr-frame::after { animation: none; opacity: .6; } } /* ── Library mode (/library) and the login header (/login) ── The signed-in fan's home: their recordings, then what else the same artists have on sale. Same tokens and type as the event page so the two read as one product; mobile-first, one column, two from 720px up. */ /* Same control as the library's ghost button (.lib-btn-ghost). */ .nav-library { margin-left: auto; display: inline-flex; align-items: center; min-height: 34px; padding: 0 14px; border: 1px solid var(--line-strong); border-radius: 8px; color: var(--copy); font-size: 13px; font-weight: 700; text-decoration: none; white-space: nowrap; } .nav-library:hover { color: var(--white); border-color: var(--indigo-bright); } body.lang-he .nav-library { margin-left: 0; margin-right: auto; } .login-header .nav { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; } .login-header .band-mark { text-decoration: none; color: inherit; } .library-page .band-mark { text-decoration: none; color: inherit; } .lib-signed-in { margin-left: auto; display: flex; align-items: center; gap: 10px; color: var(--muted); font-size: 13px; } .lib-signed-in strong { color: var(--copy); font-weight: 600; } .lib-logout { margin: 0; } .lib-logout .text-button { min-height: 44px; padding: 0 4px; } .lib-main { padding-top: 8px; padding-bottom: 48px; } .lib-section { margin-top: 28px; } .lib-section .section-label { margin-bottom: 14px; } .lib-grid { display: grid; grid-template-columns: 1fr; gap: 14px; } @media (min-width: 720px) { .lib-grid { grid-template-columns: 1fr 1fr; } } .lib-card { display: flex; align-items: stretch; gap: 14px; padding: 14px; background: var(--panel); border: 1px solid var(--line); border-radius: 10px; box-shadow: var(--shadow); } /* Every poster is the same square, whatever its shape: a fixed 112px tile, image cropped to fit (aspect ratio preserved). Out of flow, so the image's own size never affects the card. */ .lib-card-art { position: relative; align-self: center; flex: 0 0 112px; width: 112px; height: 112px; border-radius: 8px; overflow: hidden; background: var(--panel-deep); border: 1px solid var(--line); } .lib-card-art img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; } .lib-card-art-fallback { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: var(--dim); } .lib-card-body { flex: 1 1 auto; } .lib-card-art-fallback svg { width: 34px; height: 34px; } .lib-card-body { min-width: 0; display: flex; flex-direction: column; gap: 3px; } .lib-card-artist { font-size: 11px; letter-spacing: 1.2px; text-transform: uppercase; color: var(--indigo-bright); } .lib-card-title { margin: 0; font-family: 'Outfit', 'Rubik', -apple-system, sans-serif; font-size: 18px; font-weight: 700; line-height: 1.2; color: var(--white); overflow-wrap: anywhere; } .lib-card-meta { font-size: 13px; color: var(--muted); } .lib-card-actions { margin-top: auto; padding-top: 10px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .lib-price { font-size: 15px; font-weight: 700; color: var(--white); } .lib-badge { font-size: 11px; letter-spacing: 1px; text-transform: uppercase; color: var(--yellow); border: 1px solid rgba(234, 179, 8, .4); border-radius: 999px; padding: 4px 10px; } .lib-btn { display: inline-flex; align-items: center; gap: 6px; min-height: 34px; padding: 0 14px; border: 0; /*