/* ===================== Coming soon — showpiece ===================== */ .cs { position: relative; min-height: 100vh; background: var(--orange); color: var(--navy); display: flex; flex-direction: column; overflow: hidden; } /* the spot, as a diagram framing the conversion card */ /* width:100% + max-width (not width:420px) so the card shrinks on narrow screens instead of forcing its grid track — and the whole page — to 420px. */ .cs-card-wrap { position: relative; width: 100%; max-width: 420px; margin-inline: auto; } .cs-orbit { position: absolute; left: 50%; top: 50%; width: 134%; aspect-ratio: 1; transform: translate(-50%,-50%); pointer-events: none; z-index: 0; } .cs-orbit .ring { position: absolute; inset: 0; border: 1px solid rgba(23,32,41,0.26); border-radius: 50%; } .cs-orbit .ring.r2 { inset: 13%; } .cs-orbit .ring.r3 { inset: 28%; } .cs-spin { position: absolute; inset: 0; animation: csSpin 90s linear infinite; } .cs-spin.rev { animation-duration: 120s; animation-direction: reverse; } @keyframes csSpin { to { transform: rotate(360deg); } } /* topics as graphic nodes sitting on the orbit ring */ /* topics as nodes sitting ON the orbit ring, scattered, labels reading outward */ .cs-marks { position: absolute; left: 50%; top: 50%; width: 134%; aspect-ratio: 1; transform: translate(-50%,-50%); pointer-events: none; z-index: 2; } .cs-mark { position: absolute; transform: translate(-50%,-50%); } .cs-mark .node { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); width: 9px; height: 9px; border-radius: 50%; background: var(--c); opacity: 0.85; box-shadow: 0 0 0 4px rgba(236,236,228,0.16); } .cs-mark .label { position: absolute; top: 50%; transform: translateY(-50%); font-family: var(--font-kicker); font-weight: 600; text-transform: uppercase; letter-spacing: 0.12em; font-size: 0.64rem; color: rgba(23,32,41,0.66); white-space: nowrap; } .cs-mark.to-left .label { right: 17px; text-align: right; } .cs-mark.to-right .label { left: 17px; } .cs-mark::after { content: ""; position: absolute; top: 50%; width: 9px; height: 1px; background: rgba(23,32,41,0.26); transform: translateY(-50%); } .cs-mark.to-left::after { right: 6px; } .cs-mark.to-right::after { left: 6px; } /* Labels sit as points ON the outer orbit ring (right arc); only show where they fit cleanly (≥1520px) so they never clip at the viewport edge. */ @media (max-width: 1519px){ .cs-marks { display: none; } } .cs-top { position: relative; z-index: 2; padding: 30px 0; } .cs-topbar { display: flex; align-items: center; justify-content: space-between; gap: 18px; } .cs-top img { height: 34px; width: auto; display: block; } .cs-top .cs-tag { font-family: var(--font-kicker); font-weight: 600; text-transform: uppercase; letter-spacing: 0.16em; font-size: 0.72rem; color: var(--navy); display: inline-flex; align-items: center; gap: 0.7em; } .cs-top .cs-tag::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--teal); display: inline-block; } @media (max-width: 600px){ /* let the date tag wrap under the logo instead of being hidden */ .cs-topbar { flex-wrap: wrap; gap: 8px 16px; } .cs-top .cs-tag { font-size: 0.64rem; } /* pull the hero content up to the top instead of vertically centering it */ .cs-main { align-items: flex-start; padding-block: 14px 40px; } } .cs-main { position: relative; z-index: 2; flex: 1; display: flex; align-items: center; padding-block: clamp(28px, 5vh, 64px); } .cs-grid { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: clamp(40px, 6vw, 96px); align-items: center; width: 100%; } /* grid items default to min-width:auto, which lets wide content (the countdown row, the non-wrapping reveal line) blow the track past the viewport on small screens. min-width:0 lets them shrink so nothing gets clipped. */ .cs-grid > * { min-width: 0; } @media (max-width: 940px){ .cs-grid { grid-template-columns: 1fr; gap: 44px; } } /* ---- left: the arc ---- */ .cs-arc { margin-bottom: 28px; } .cs-arc .beat { display: block; font-family: var(--font-head); font-weight: var(--tw-head-weight); font-size: clamp(2.3rem, 6vw, 5rem); line-height: 1.02; letter-spacing: -0.03em; } .cs-arc .beat.dim { color: rgba(23,32,41,0.85); } /* was 0.48 — failed 3:1 large-text on orange */ .cs-arc .beat.lit { color: var(--navy); } .cs-arc .beat.brand { margin-top: 0.12em; } .cs-arc .arc-logo { height: clamp(2.4rem, 6.6vw, 5.4rem); width: auto; display: block; } .cs-intro { font-family: var(--font-head); font-weight: 300; font-size: clamp(1.12rem, 1.5vw, 1.4rem); line-height: 1.5; color: rgba(23,32,41,0.82); max-width: 46ch; } .cs-kicker { font-family: var(--font-kicker); font-weight: 600; text-transform: uppercase; letter-spacing: 0.2em; font-size: 0.74rem; color: var(--navy); margin-bottom: 22px; } /* entrance (respects reduced motion) */ .fade { opacity: 0; transform: translateY(22px); animation: csIn .9s cubic-bezier(.2,.7,.2,1) forwards; } .fade.d1 { animation-delay: .12s; } .fade.d2 { animation-delay: .26s; } .fade.d3 { animation-delay: .4s; } .cs-arc .beat, .cs-arc .brand { opacity: 0; transform: translateY(22px); animation: csIn .9s cubic-bezier(.2,.7,.2,1) forwards; } .cs-arc .beat:nth-child(1){animation-delay:.2s}.cs-arc .beat:nth-child(2){animation-delay:.42s}.cs-arc .beat:nth-child(3){animation-delay:.64s}.cs-arc .beat.brand{animation-delay:.9s} @keyframes csIn { to { opacity: 1; transform: none; } } @media (prefers-reduced-motion: reduce) { .fade, .cs-arc .beat, .cs-arc .brand { opacity: 1; transform: none; animation: none; } .cs-spin { animation: none; } } /* ---- right: the conversion card ---- */ .cs-card { position: relative; z-index: 1; background: var(--navy); color: var(--cream); padding: clamp(28px, 3.4vw, 46px); box-shadow: 0 50px 100px -40px rgba(23,32,41,0.6); } .cs-card .cs-card-kick { font-family: var(--font-kicker); font-weight: 600; text-transform: uppercase; letter-spacing: 0.18em; font-size: 0.7rem; color: var(--orange); } .cs-reveal-line { display: flex; align-items: baseline; gap: 12px; margin-top: 12px; } .cs-reveal-line .big { font-family: var(--font-head); font-weight: 300; font-size: clamp(1.8rem, 3vw, 2.5rem); line-height: 1; letter-spacing: -0.02em; color: #fff; } .cs-reveal-line .at { font-family: var(--font-kicker); font-weight: 600; text-transform: uppercase; letter-spacing: 0.12em; font-size: 0.74rem; color: rgba(236,236,228,0.7); } .cs-countdown { display: flex; gap: clamp(8px, 1.4vw, 18px); align-items: flex-start; margin-top: 26px; } .cs-card .cd-unit { display: flex; flex-direction: column; align-items: center; min-width: 52px; } .cs-card .cd-num { font-family: var(--font-head); font-weight: 300; font-size: clamp(2rem, 3.4vw, 3rem); line-height: 1; letter-spacing: -0.02em; color: #fff; font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; } .cs-card .cd-lab { font-family: var(--font-kicker); font-weight: 600; text-transform: uppercase; letter-spacing: 0.14em; font-size: 0.58rem; margin-top: 10px; color: var(--orange); } .cs-card .cd-sep { font-family: var(--font-head); font-weight: 300; font-size: clamp(1.6rem, 2.6vw, 2.2rem); line-height: 1; color: rgba(236,236,228,0.28); align-self: flex-start; } .cs-divider { height: 1px; background: rgba(236,236,228,0.16); margin: clamp(24px, 3vw, 34px) 0; border: 0; } .cs-form-h { font-family: var(--font-head); font-weight: 400; font-size: 1.5rem; line-height: 1.1; color: #fff; } .cs-form-sub { color: rgba(236,236,228,0.72); margin-top: 6px; font-size: 0.98rem; } .cs-form { display: grid; gap: 12px; margin-top: 20px; } .cs-form .row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } .cs-form input { width: 100%; padding: 15px 16px; border: 1.5px solid rgba(236,236,228,0.28); background: rgba(255,255,255,0.04); font-family: var(--font-body); font-size: 1rem; color: #fff; transition: border-color .2s ease, background .2s ease; } .cs-form input::placeholder { color: rgba(236,236,228,0.5); } .cs-form input:focus { outline: none; border-color: var(--orange); background: rgba(255,255,255,0.08); box-shadow: 0 0 0 3px rgba(233,133,0,0.2); } .cs-form button { width: 100%; justify-content: center; } .cs-form button:disabled { cursor: default; } /* consent checkbox */ .cs-consent { display: flex; align-items: flex-start; gap: 10px; cursor: pointer; margin-top: 2px; } .cs-consent input { appearance: none; -webkit-appearance: none; flex: none; width: 18px; height: 18px; margin-top: 1px; border: 1.5px solid rgba(236,236,228,0.4); background: rgba(255,255,255,0.04); display: grid; place-content: center; cursor: pointer; transition: border-color .2s ease, background .2s ease; } .cs-consent input::before { content: ""; width: 10px; height: 10px; transform: scale(0); transition: transform .15s ease; box-shadow: inset 1em 1em var(--orange); clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%); } .cs-consent input:checked { border-color: var(--orange); background: rgba(233,133,0,0.12); } .cs-consent input:checked::before { transform: scale(1); } .cs-consent input:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(233,133,0,0.3); } .cs-consent.invalid input { border-color: #ffb4a8; box-shadow: 0 0 0 3px rgba(255,180,168,0.25); } .cs-consent span { font-size: 0.84rem; line-height: 1.45; color: rgba(236,236,228,0.72); } .cs-consent a { color: var(--cream); border-bottom: 1px solid rgba(236,236,228,0.4); } .cs-consent a:hover { color: #fff; border-color: #fff; } .cs-reassure { font-family: var(--font-kicker); font-weight: 500; text-transform: uppercase; letter-spacing: 0.1em; font-size: 0.62rem; color: rgba(236,236,228,0.6); margin-top: 14px; text-align: center; } .cs-msg { font-family: var(--font-kicker); font-weight: 600; text-transform: uppercase; letter-spacing: 0.1em; font-size: 0.72rem; color: var(--orange); margin-top: 16px; text-align: center; min-height: 1em; opacity: 0; transition: opacity .35s ease; } .cs-msg.show { opacity: 1; } .cs-msg.is-error { color: #ffb4a8; } /* ---- small screens: keep the card and everything in it inside the viewport ---- */ @media (max-width: 560px){ .cs-card { padding: 26px 20px; } /* let the date + "at noon ET" wrap instead of overflowing on one line */ .cs-reveal-line { flex-wrap: wrap; gap: 2px 10px; } /* countdown shares the row evenly and is allowed to shrink */ .cs-countdown { gap: 6px; } .cs-card .cd-unit { min-width: 0; flex: 1 1 0; } .cs-card .cd-num { font-size: clamp(1.5rem, 9vw, 2.4rem); } .cs-card .cd-lab { font-size: 0.52rem; letter-spacing: 0.1em; } .cs-card .cd-sep { align-self: flex-start; } /* headline arc: bigger and roomier on small screens */ .cs-arc { margin-bottom: 34px; } .cs-arc .beat { font-size: clamp(2.45rem, 10vw, 3rem); line-height: 1.18; } .cs-arc .beat.brand { margin-top: 0.34em; } .cs-arc .arc-logo { height: clamp(2.9rem, 12vw, 3.9rem); } } @media (max-width: 420px){ .cs-form .row2 { grid-template-columns: 1fr; } } /* ---- footer ---- */ .cs-foot { position: relative; z-index: 2; padding: 26px 0 32px; } .cs-footbar { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; } /* footer quick links — sits on its own centered row above tagline/social/copy */ .cs-foot-nav { flex-basis: 100%; display: flex; justify-content: center; flex-wrap: wrap; gap: 28px; margin-bottom: 4px; } .cs-foot-nav a { font-family: var(--font-kicker); font-weight: 600; text-transform: uppercase; letter-spacing: 0.12em; font-size: 0.72rem; color: var(--navy); transition: color .2s ease; } .cs-foot-nav a:hover { color: var(--teal); } .cs-foot .tagline { font-family: var(--font-kicker); font-weight: 600; text-transform: uppercase; letter-spacing: 0.14em; font-size: 0.72rem; color: var(--navy); } .cs-foot .copy { font-size: 0.84rem; color: var(--navy); } .cs-social { display: flex; gap: 8px; } .cs-social a { width: 42px; height: 42px; border: 1px solid rgba(23,32,41,0.3); display: grid; place-items: center; color: var(--navy); transition: background .2s ease, color .2s ease, border-color .2s ease, transform .2s ease; } .cs-social a:hover { background: var(--navy); border-color: var(--navy); color: var(--orange); transform: translateY(-3px); } .cs-social svg { width: 18px; height: 18px; display: block; } @media (max-width: 760px){ .cs-footbar { justify-content: center; text-align: center; } }