/* Haven TwinScreen Jumbotron — public styles. Nothing here applies unless .ts-live is on and .ts-band on the measured band, both of which the renderer adds only for a resolved live campaign. Campaign-off = zero effect. */ /* ---- host: absolutely positioned inside the measured band → zero layout cost, zero CLS ---- */ .ts-band{position:relative} .ts-host{--ts-px:0px;--ts-py:0px;font-family:'Helvetica Neue',Helvetica,Arial,sans-serif} .ts-host--desktop{position:absolute;inset:0;pointer-events:none;z-index:2} .ts-host--desktop .ts-wing{pointer-events:auto} .ts-host--desktop .ts-wing{position:absolute;top:50%;transform:translateY(-50%);width:var(--ts-w);display:grid;gap:8px} .ts-host--desktop .ts-wing--left{left:var(--ts-edge)} .ts-host--desktop .ts-wing--right{right:var(--ts-edge)} .ts-frame{position:relative;width:100%;height:var(--ts-h);overflow:hidden;border-radius:6px;background:#07131A;box-shadow:0 10px 34px rgba(4,26,38,.38),inset 0 0 0 1px rgba(255,255,255,.14)} .ts-vid{width:100%;height:100%;object-fit:cover;display:block} .ts-scrim{position:absolute;inset:0;background:linear-gradient(0deg,rgba(6,18,26,.86),rgba(6,18,26,.12) 52%,transparent);pointer-events:none} /* ---- disclosure: always available, never the visual headline ---- */ .ts-disclosure{position:absolute;left:50%;bottom:6px;transform:translateX(-50%);margin:0;font-size:11px;font-weight:700;letter-spacing:.05em;color:rgba(255,255,255,.9);display:flex;align-items:center;gap:7px;white-space:nowrap;text-shadow:0 1px 2px rgba(0,0,0,.5);pointer-events:none;z-index:3} .ts-disclosure__pill{background:rgba(255,255,255,.94);color:#0E1216;border-radius:999px;padding:2px 9px;font-size:10px;font-weight:900;letter-spacing:.11em;text-transform:uppercase;box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 1px 2px rgba(0,0,0,.28)} .ts-fixture{position:absolute;left:50%;bottom:-19px;transform:translateX(-50%);margin:0;font-size:10.5px;font-weight:800;letter-spacing:.06em;color:#0B3D57;background:rgba(255,255,255,.92);border-radius:999px;padding:2px 10px;white-space:nowrap;pointer-events:none;z-index:3} /* ---- CTA + mute: pill rule (light-catching edge, inset highlight, restrained shadow) ---- */ .ts-cta{justify-self:center;display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 20px;border-radius:999px;background:#fff;color:#0E1216;font-size:15px;font-weight:900;letter-spacing:-0.01em;text-decoration:none;box-shadow:inset 0 1px 0 rgba(255,255,255,.95),inset 0 -1px 0 rgba(0,0,0,.08),0 4px 12px rgba(4,26,38,.3);transition:transform .16s cubic-bezier(.2,.8,.2,1),box-shadow .16s} .ts-cta:hover{transform:translateY(-2px);box-shadow:inset 0 1px 0 rgba(255,255,255,.95),0 8px 20px rgba(4,26,38,.4);text-decoration:none;color:#0E1216} .ts-cta:active{transform:scale(.98)} .ts-cta:focus-visible{outline:3px solid #fff;outline-offset:3px} .ts-mute{position:absolute;right:8px;top:8px;z-index:4;width:44px;height:44px;border-radius:999px;border:0;background:rgba(10,24,32,.72);color:#fff;font-size:15px;cursor:pointer;box-shadow:inset 0 1px 0 rgba(255,255,255,.28),0 2px 8px rgba(0,0,0,.34)} .ts-mute:focus-visible{outline:3px solid #fff;outline-offset:2px} /* ---- fixture creative compositions ---- */ .ts-fx{position:absolute;inset:0;display:grid;place-items:center;background:radial-gradient(120% 90% at 50% 12%,#0D3450,#061620 68%);overflow:hidden} .ts-fx::before{content:"";position:absolute;inset:-20%;background:linear-gradient(104deg,transparent 38%,color-mix(in oklab,var(--ts-accent) 26%,transparent) 50%,transparent 62%);animation:ts-sweep 6.4s cubic-bezier(.4,0,.3,1) infinite;pointer-events:none} .ts-fx::after{content:"";position:absolute;inset:0;background:radial-gradient(88% 74% at 50% 44%,transparent 42%,rgba(3,10,15,.62));pointer-events:none} @keyframes ts-sweep{0%,58%{transform:translateX(-64%)}88%,100%{transform:translateX(64%)}} .ts-wing--right .ts-fx::before{animation-delay:1.1s} .ts-type{position:absolute;left:0;right:0;bottom:0;display:grid;gap:3px;padding:14px 16px;text-align:left;z-index:2} .ts-eyebrow{font-size:10.5px;font-weight:900;letter-spacing:.14em;text-transform:uppercase;color:var(--ts-accent)} .ts-head{font-size:clamp(15px,2.1vw,21px);font-weight:900;letter-spacing:-0.02em;line-height:1.06;color:#fff;text-wrap:balance} .ts-sub{font-size:12.5px;font-weight:700;color:rgba(255,255,255,.82)} .ts-bars{display:flex;align-items:flex-end;gap:5px;height:44%} .ts-bars i{width:8px;background:linear-gradient(180deg,var(--ts-accent),rgba(255,255,255,.25));border-radius:3px;animation:ts-eq 1.15s ease-in-out infinite} .ts-bars i:nth-child(1){height:38%;animation-delay:0s}.ts-bars i:nth-child(2){height:72%;animation-delay:.11s}.ts-bars i:nth-child(3){height:52%;animation-delay:.22s}.ts-bars i:nth-child(4){height:88%;animation-delay:.33s}.ts-bars i:nth-child(5){height:46%;animation-delay:.44s}.ts-bars i:nth-child(6){height:66%;animation-delay:.55s}.ts-bars i:nth-child(7){height:34%;animation-delay:.66s} @keyframes ts-eq{0%,100%{transform:scaleY(.55)}50%{transform:scaleY(1)}} .ts-disc{width:44%;aspect-ratio:1;border-radius:50%;background:conic-gradient(from 0deg,#0B2233,#123E58,#0B2233);box-shadow:0 0 0 2px rgba(255,255,255,.12),0 12px 30px rgba(0,0,0,.5);display:grid;place-items:center;animation:ts-spin 7s linear infinite;margin-bottom:14%} .ts-disc i{width:30%;aspect-ratio:1;border-radius:50%;background:var(--ts-accent);box-shadow:inset 0 0 0 3px rgba(0,0,0,.35)} @keyframes ts-spin{to{transform:rotate(360deg)}} .ts-grooves{width:70%;aspect-ratio:1;border-radius:50%;display:grid;place-items:center;margin-bottom:16%} .ts-grooves i{position:absolute;border-radius:50%;border:1px solid rgba(255,255,255,.16);animation:ts-ring 3.4s ease-out infinite} .ts-grooves i:nth-child(1){width:30%;aspect-ratio:1;animation-delay:0s}.ts-grooves i:nth-child(2){width:50%;aspect-ratio:1;animation-delay:.5s}.ts-grooves i:nth-child(3){width:70%;aspect-ratio:1;animation-delay:1s}.ts-grooves i:nth-child(4){width:90%;aspect-ratio:1;animation-delay:1.5s} @keyframes ts-ring{0%{opacity:0;transform:scale(.86)}30%{opacity:1}100%{opacity:0;transform:scale(1.1)}} /* FutureShock depth: three planes, bounded approach, foreground may break the frame */ .ts-frame:has(.ts-depth),.ts-frame:has(.ts-sleeve){overflow:visible} .ts-depth,.ts-sleeve{position:absolute;inset:0;display:grid;place-items:center;transform-style:preserve-3d;perspective:640px} .ts-depth i,.ts-sleeve i{position:absolute;border-radius:8px} .ts-p3{width:78%;height:62%;background:linear-gradient(160deg,#0A2B40,#061620);box-shadow:inset 0 0 0 1px rgba(255,255,255,.08);transform:translate3d(calc(var(--ts-px)*.3),calc(var(--ts-py)*.3),-40px)} .ts-p2{width:56%;height:46%;background:linear-gradient(160deg,#12557C,#0A2B40);box-shadow:0 12px 26px rgba(0,0,0,.45);transform:translate3d(calc(var(--ts-px)*.7),calc(var(--ts-py)*.7),0)} .ts-p1{width:34%;height:34%;background:linear-gradient(160deg,var(--ts-accent),#0B7FB8);box-shadow:0 18px 40px rgba(0,0,0,.55),inset 0 1px 0 rgba(255,255,255,.5);animation:ts-approach 4.6s cubic-bezier(.36,.06,.24,1) infinite;transform-origin:50% 60%} @keyframes ts-approach{0%,62%{transform:translate3d(var(--ts-px),var(--ts-py),0) scale(1)}76%{transform:translate3d(var(--ts-px),calc(var(--ts-py) - var(--ts-pop,14px)),0) scale(1.28)}100%{transform:translate3d(var(--ts-px),var(--ts-py),0) scale(1)}} .ts-sleeve i:nth-child(1){width:52%;height:52%;background:linear-gradient(150deg,#123E58,#07131A);transform:translate(-9%,-6%) rotate(-6deg);box-shadow:0 14px 30px rgba(0,0,0,.5)} .ts-sleeve i:nth-child(2){width:52%;height:52%;background:linear-gradient(150deg,var(--ts-accent),#0B5F87);transform:translate(9%,6%) rotate(5deg);box-shadow:0 16px 34px rgba(0,0,0,.55),inset 0 1px 0 rgba(255,255,255,.4)} /* Portal Reveal */ .ts-portal{position:absolute;inset:0;display:grid;place-items:center} .ts-portal i{position:absolute;border-radius:50%;border:2px solid var(--ts-accent);opacity:.5;animation:ts-portal 3.2s ease-in-out infinite} .ts-portal i:nth-child(1){width:26%;aspect-ratio:1;animation-delay:0s}.ts-portal i:nth-child(2){width:46%;aspect-ratio:1;animation-delay:.36s}.ts-portal i:nth-child(3){width:66%;aspect-ratio:1;animation-delay:.72s} .ts-portal--out i{border-style:dashed} @keyframes ts-portal{0%,100%{transform:scale(.9);opacity:.28}50%{transform:scale(1.04);opacity:.85}} /* ToonShift review frames */ .ts-toon{position:absolute;inset:0;display:grid;place-items:center} .ts-toon i{width:46%;aspect-ratio:3/4;border-radius:10px 10px 40% 40%;background:linear-gradient(170deg,color-mix(in oklab,var(--ts-accent) 46%,#0A2130),#0A2130);box-shadow:inset 0 0 0 1px rgba(255,255,255,.14);margin-bottom:12%} .ts-toon--out i{background:repeating-linear-gradient(135deg,color-mix(in oklab,var(--ts-accent) 20%,#120A18) 0 5px,color-mix(in oklab,var(--ts-accent) 52%,#120A18) 5px 10px);box-shadow:inset 0 0 0 3px #fff,0 10px 26px rgba(0,0,0,.5)} /* Type Blast: copy is a motion layer, never baked into media */ .ts-variant--type .ts-fx{background:linear-gradient(150deg,#0B3D57,#061620)} .ts-fx[data-fx^="type-"]::marker{content:""} .ts-rules{position:absolute;left:0;right:0;top:16%;display:grid;gap:9px;padding:0 16px} .ts-rules i{height:3px;border-radius:2px;background:var(--ts-accent);transform-origin:0 50%;animation:ts-rule .62s cubic-bezier(.2,.8,.2,1) both} .ts-rules i:nth-child(1){width:64%;animation-delay:.06s}.ts-rules i:nth-child(2){width:42%;opacity:.62;animation-delay:.16s}.ts-rules i:nth-child(3){width:78%;opacity:.34;animation-delay:.26s} @keyframes ts-rule{from{transform:scaleX(0)}to{transform:scaleX(1)}} .ts-variant--type .ts-type,.ts-2nd--type .ts-type{position:absolute;inset:auto 0 0 0} .ts-variant--type .ts-head,.ts-2nd--type .ts-head{animation:ts-punch .72s cubic-bezier(.2,.8,.2,1) .18s both} .ts-variant--type .ts-sub,.ts-2nd--type .ts-sub{animation:ts-punch .72s cubic-bezier(.2,.8,.2,1) .34s both} .ts-variant--type .ts-eyebrow,.ts-2nd--type .ts-eyebrow{animation:ts-track .8s cubic-bezier(.2,.8,.2,1) both} @keyframes ts-punch{from{opacity:0;transform:translateY(10px) scale(.97)}to{opacity:1;transform:none}} @keyframes ts-track{from{opacity:0;letter-spacing:.34em}to{opacity:1;letter-spacing:.14em}} /* Drop Clock */ .ts-clock{position:absolute;left:0;right:0;top:14px;display:grid;justify-items:center;gap:2px;z-index:2} .ts-clock__lbl{font-size:10.5px;font-weight:900;letter-spacing:.14em;text-transform:uppercase;color:var(--ts-accent,#18AFEE)} .ts-clock__t{font-size:clamp(20px,3vw,30px);font-weight:900;letter-spacing:-0.02em;color:#fff;font-variant-numeric:tabular-nums} .ts-clock__t--out{font-size:clamp(15px,2vw,19px)} .ts-clock.is-out .ts-clock__lbl{color:#fff} /* ---- mobile: authored paired band under the header, never a desktop crop ---- */ .ts-host--mobile{position:relative;background:#061620;padding:12px 12px 24px;border-top:2px solid rgba(24,175,238,.5)} .ts-host--mobile .ts-panels{display:grid;grid-template-columns:1fr 1fr;gap:10px} .ts-host--mobile .ts-wing{display:grid;gap:8px;min-width:0} .ts-host--mobile .ts-frame{height:auto;aspect-ratio:16/9;min-height:74px} .ts-host--mobile .ts-cta{min-height:44px;font-size:13.5px;padding:0 14px;width:100%;justify-content:center} .ts-host--mobile .ts-disclosure{position:static;transform:none;justify-content:center;margin-top:12px;white-space:normal;text-align:center;text-shadow:none} .ts-host--mobile .ts-fixture{position:static;transform:none;margin:8px auto 0;display:block;width:max-content;max-width:100%;white-space:normal;text-align:center} .ts-host--mobile .ts-head{font-size:13px} .ts-host--mobile .ts-eyebrow{font-size:9px} .ts-host--mobile .ts-sub{display:none} @media (max-width:360px){.ts-host--mobile .ts-type{padding:8px 9px}.ts-host--mobile .ts-head{font-size:11.5px}.ts-host--mobile .ts-cta{font-size:12.5px;padding:0 10px}} @media (max-width:340px){.ts-host--mobile .ts-type{display:none}} /* ---- tablet: compact paired composition, never postage stamps ---- */ .ts-host--tablet{position:relative;background:#061620;padding:14px 16px 26px;border-top:2px solid rgba(24,175,238,.5)} .ts-host--tablet .ts-panels{display:grid;grid-template-columns:1fr 1fr;gap:14px;max-width:820px;margin:0 auto} .ts-host--tablet .ts-wing{display:grid;gap:9px;min-width:0} .ts-host--tablet .ts-frame{height:auto;aspect-ratio:16/9} .ts-host--tablet .ts-cta{width:100%;justify-content:center} .ts-host--tablet .ts-disclosure{position:static;transform:none;justify-content:center;margin-top:12px;text-shadow:none} .ts-host--tablet .ts-fixture{position:static;transform:none;margin:8px auto 0;display:block;width:max-content} /* ---- motion safety ---- Pause the LOOPING decoration only. One-shot entry animations must never be frozen at frame 0, or copy with fill:both would sit invisible until the module scrolls into view. */ .ts-host.is-paused .ts-bars i,.ts-host:not(.is-viewable) .ts-bars i, .ts-host.is-paused .ts-disc,.ts-host:not(.is-viewable) .ts-disc, .ts-host.is-paused .ts-grooves i,.ts-host:not(.is-viewable) .ts-grooves i, .ts-host.is-paused .ts-p1,.ts-host:not(.is-viewable) .ts-p1, .ts-host.is-paused .ts-portal i,.ts-host:not(.is-viewable) .ts-portal i, .ts-host.is-paused .ts-fx::before,.ts-host:not(.is-viewable) .ts-fx::before{animation-play-state:paused!important} @media (prefers-reduced-motion:reduce){.ts-host *{animation:none!important;transition:none!important}.ts-host{--ts-px:0px;--ts-py:0px}.ts-p1{transform:none}} .ts-host.is-reduced *{animation:none!important} .ts-host.is-reduced .ts-frame{overflow:hidden} /* ---- per-site identity: each brand keeps its own accent; the three never merge into one skin ---- */ .ts-site--raphaven .ts-fx{background:radial-gradient(120% 90% at 50% 12%,#3A0C0E,#140506 68%)} .ts-site--raphaven .ts-frame{background:#140506} .ts-site--musichaven .ts-fx{background:radial-gradient(120% 90% at 50% 12%,#4A2A60,#241733 68%)} .ts-site--musichaven .ts-frame{background:#241733} .ts-site--musichaven .ts-host--mobile,.ts-site--musichaven.ts-host--mobile,.ts-site--musichaven.ts-host--tablet{background:#241733} .ts-site--raphaven.ts-host--mobile,.ts-site--raphaven.ts-host--tablet{background:#140506} .ts-host.is-preview .ts-frame{outline:2px dashed rgba(255,196,0,.8);outline-offset:2px} .ts-host.is-preview .ts-fixture{background:#FDF0D5;color:#7A5A11}