(no #xxl-artist-mount on body, no .pod-content), so we duplicate our visual rules under that scope. Mobile-breakpoint styles are baked in as the defaults so the app always renders at the "mobile" look regardless of webview width. ============================================================ */ html.xxl-is-app #xxl-artist-mount *, html.xxl-is-app #xxl-artist-mount *::before, html.xxl-is-app #xxl-artist-mount *::after { box-sizing: border-box; margin: 0; padding: 0; } html.xxl-is-app #xxl-artist-mount { overflow-x: hidden; /* fallback */ overflow-x: clip; /* preferred — doesn't create a scroll container */ max-width: 100vw; width: 100%; position: relative; } html.xxl-is-app #xxl-artist-mount { font-family: var(--font-body); color: var(--black); overflow-x: hidden; overflow-x: clip; max-width: 100%; position: relative; line-height: 1.6; background-color: var(--yellow); background-image: url("https://townsquare.media/site/956/files/2026/04/attachment-10thspotbg.jpg"); background-repeat: repeat; background-position: center top; background-size: 900px auto; /* JS updates background-position-y on scroll for parallax — see script.js */ background-attachment: scroll; } html.xxl-is-app #xxl-artist-mount img { display: block; max-width: 100%; height: auto; } html.xxl-is-app #xxl-artist-mount .section { position: relative; z-index: 0; padding: 100px 24px; overflow: hidden; overflow: clip; } html.xxl-is-app #xxl-artist-mount .section-header-row { text-align: center; margin-bottom: 64px; position: relative; z-index: 2; } html.xxl-is-app #xxl-artist-mount .section--archive .section-header-row { margin-bottom: 20px; } html.xxl-is-app #xxl-artist-mount .section-deco { position: absolute; inset: 0; pointer-events: none; z-index: 0; overflow: hidden; } html.xxl-is-app #xxl-artist-mount .badge { display: inline-block; font-family: var(--font-display); font-size: 1.95rem; letter-spacing: 0.14em; padding: 10px 30px 8px; margin-bottom: 26px; text-transform: uppercase; position: relative; z-index: 1; background: transparent; border: none; border-radius: 0; box-shadow: none; transform: rotate(-2.5deg); } html.xxl-is-app #xxl-artist-mount .badge::before { content: ''; position: absolute; inset: -2px -10px; z-index: -2; border: var(--border-thick); box-shadow: 5px 5px 0 var(--black); clip-path: polygon(2% 8%, 96% 0%, 100% 92%, 4% 100%); transform: skewX(-7deg); } html.xxl-is-app #xxl-artist-mount .badge--blue { color: var(--white); } html.xxl-is-app #xxl-artist-mount .badge--pink { color: var(--white); } html.xxl-is-app #xxl-artist-mount .badge--green { color: var(--white); } html.xxl-is-app #xxl-artist-mount .badge--yellow { color: var(--black); } html.xxl-is-app #xxl-artist-mount .section--artists .badge { font-size: 2.25rem; } html.xxl-is-app #xxl-artist-mount .badge--blue::before { background: var(--blue); } html.xxl-is-app #xxl-artist-mount .badge--pink::before { background: var(--pink); } html.xxl-is-app #xxl-artist-mount .badge--green::before { background: var(--green); } html.xxl-is-app #xxl-artist-mount .badge--yellow::before { background: var(--yellow); } html.xxl-is-app #xxl-artist-mount .section-title { font-family: var(--font-display); font-size: clamp(3.4rem, 7vw, 6.5rem); letter-spacing: 0.05em; line-height: 1; color: var(--black); } html.xxl-is-app #xxl-artist-mount .section-title em { font-style: normal; color: var(--yellow); -webkit-text-stroke: 4px var(--black); paint-order: stroke fill; text-shadow: 5px 5px 0 var(--black); display: inline-block; transform: rotate(-1.5deg); } html.xxl-is-app #xxl-artist-mount .section-title::after { content: ''; display: block; width: 220px; height: 16px; margin: 14px auto 0; background-image: url("data:image/svg+xml;utf8,"); background-repeat: no-repeat; background-size: contain; background-position: center; } html.xxl-is-app #xxl-artist-mount .section-title--light { color: var(--white); } html.xxl-is-app #xxl-artist-mount .section-title--light em { color: var(--blue); } html.xxl-is-app #xxl-artist-mount .section-title--light::after { background-image: url("data:image/svg+xml;utf8,"); } html.xxl-is-app #xxl-artist-mount .section-subtitle { font-size: 1.6rem; font-weight: 800; color: var(--black); margin-top: 14px; } html.xxl-is-app #xxl-artist-mount .parallax-bg { position: absolute; inset: 0; pointer-events: none; overflow: hidden; z-index: 0; } html.xxl-is-app #xxl-artist-mount .blob { position: absolute; border: var(--border); opacity: 0.65; will-change: transform; } html.xxl-is-app #xxl-artist-mount .blob--a { width: 540px; height: 540px; background: var(--yellow); top: -150px; left: -130px; border-radius: 40% 60% 70% 30% / 40% 50% 60% 50%; } html.xxl-is-app #xxl-artist-mount .blob--b { width: 400px; height: 400px; background: var(--pink); top: 30px; right: -110px; border-radius: 70% 30% 50% 50% / 30% 60% 40% 70%; } html.xxl-is-app #xxl-artist-mount .blob--c { width: 320px; height: 320px; background: var(--green); bottom: -90px; left: 30%; border-radius: 50% 50% 30% 70% / 50% 70% 30% 50%; opacity: 0.5; } html.xxl-is-app #xxl-artist-mount .blob--fa { width: 480px; height: 480px; background: var(--green); bottom: -120px; right: -120px; border-radius: 40% 60% 70% 30% / 40% 50% 60% 50%; opacity: 0.45; } html.xxl-is-app #xxl-artist-mount .blob--fb { width: 320px; height: 320px; background: var(--blue); top: 20px; left: -80px; border-radius: 70% 30% 50% 50% / 30% 60% 40% 70%; opacity: 0.45; } html.xxl-is-app #xxl-artist-mount .deco-star, html.xxl-is-app #xxl-artist-mount .deco-bolt, html.xxl-is-app #xxl-artist-mount .deco-squiggle, html.xxl-is-app #xxl-artist-mount .deco-swirl, html.xxl-is-app #xxl-artist-mount .deco-zigzag, html.xxl-is-app #xxl-artist-mount .deco-plus { position: absolute; overflow: visible; will-change: transform; } html.xxl-is-app #xxl-artist-mount .deco-star polygon { stroke: var(--black); stroke-width: 4; } html.xxl-is-app #xxl-artist-mount .deco-bolt polygon { stroke: var(--black); stroke-width: 4; fill: var(--yellow); } html.xxl-is-app #xxl-artist-mount .deco-plus polygon { stroke: var(--black); stroke-width: 4; } html.xxl-is-app #xxl-artist-mount .deco-swirl path { stroke: var(--black); } html.xxl-is-app #xxl-artist-mount .section--cypher .deco-swirl path, html.xxl-is-app #xxl-artist-mount .section--footer .deco-swirl path, html.xxl-is-app #xxl-artist-mount .section--cypher .deco-zigzag polyline, html.xxl-is-app #xxl-artist-mount .section--footer .deco-zigzag polyline { stroke: var(--white); opacity: 0.5; } html.xxl-is-app #xxl-artist-mount .star--h1 { width: 110px; height: 110px; top: 8%; right: 4%; } html.xxl-is-app #xxl-artist-mount .star--h1 polygon { fill: var(--yellow); } html.xxl-is-app #xxl-artist-mount .star--h2 { width: 80px; height: 80px; bottom: 6%; right: 8%; } html.xxl-is-app #xxl-artist-mount .star--h2 polygon { fill: var(--pink); } html.xxl-is-app #xxl-artist-mount .deco-bolt--h1 { width: 55px; height: 110px; top: 14%; left: 3%; transform: rotate(-18deg); } html.xxl-is-app #xxl-artist-mount .deco-squiggle--h1 { width: 180px; height: 26px; bottom: 8%; left: 4%; transform: rotate(12deg); } html.xxl-is-app #xxl-artist-mount .deco-swirl--h1 { width: 95px; height: 95px; top: 4%; left: 7%; transform: rotate(-22deg); } html.xxl-is-app #xxl-artist-mount .deco-zigzag--h1 { width: 200px; height: 24px; bottom: 22%; right: 3%; transform: rotate(-7deg); } html.xxl-is-app #xxl-artist-mount .deco-plus--h1 { width: 56px; height: 56px; top: 35%; right: 6%; fill: var(--green); transform: rotate(20deg); } html.xxl-is-app #xxl-artist-mount .deco-float--swirl-a { width: 90px; height: 90px; top: 38%; right: 1.5%; transform: rotate(28deg); } html.xxl-is-app #xxl-artist-mount .deco-float--swirl-b { width: 80px; height: 80px; bottom: 22%; left: 1%; transform: rotate(-38deg); } html.xxl-is-app #xxl-artist-mount .deco-float--zigzag-a { width: 180px; height: 22px; top: 70%; left: 2%; transform: rotate(-14deg); } html.xxl-is-app #xxl-artist-mount .deco-float--zigzag-b { width: 160px; height: 22px; top: 52%; right: 2%; transform: rotate(15deg); } html.xxl-is-app #xxl-artist-mount .deco-float--plus-a { width: 50px; height: 50px; top: 78%; right: 8%; fill: var(--pink); transform: rotate(15deg); } html.xxl-is-app #xxl-artist-mount .deco-float--c4 { width: 90px; height: 90px; top: 38%; left: 5%; transform: rotate(-15deg); opacity: 0.5; } html.xxl-is-app #xxl-artist-mount .deco-float--c5 { width: 220px; height: 26px; bottom: 18%; left: 8%; transform: rotate(-6deg); opacity: 0.5; } html.xxl-is-app #xxl-artist-mount .deco-float--c6 { width: 50px; height: 50px; top: 22%; right: 14%; fill: var(--yellow); transform: rotate(15deg); } html.xxl-is-app #xxl-artist-mount .deco-float--a3 { width: 110px; height: 110px; top: 65%; right: 5%; transform: rotate(-20deg); } html.xxl-is-app #xxl-artist-mount .deco-float--a4 { width: 220px; height: 26px; top: 18%; left: 8%; transform: rotate(6deg); } html.xxl-is-app #xxl-artist-mount .deco-float--a5 { width: 56px; height: 56px; bottom: 8%; left: 10%; fill: var(--green); transform: rotate(20deg); } html.xxl-is-app #xxl-artist-mount .deco-float--f2 { width: 100px; height: 100px; top: 18%; right: 8%; transform: rotate(20deg); } html.xxl-is-app #xxl-artist-mount .deco-float--f3 { width: 220px; height: 26px; bottom: 14%; left: 10%; transform: rotate(-6deg); } html.xxl-is-app #xxl-artist-mount .deco-float--f4 { width: 56px; height: 56px; bottom: 28%; right: 18%; fill: var(--pink); transform: rotate(15deg); } html.xxl-is-app #xxl-artist-mount .deco-float--1 { width: 80px; height: 80px; top: 28%; left: 1%; } html.xxl-is-app #xxl-artist-mount .deco-float--1 polygon { fill: var(--green); } html.xxl-is-app #xxl-artist-mount .deco-float--2 { width: 45px; height: 90px; top: 18%; right: 1.5%; transform: rotate(22deg); } html.xxl-is-app #xxl-artist-mount .deco-float--3 { width: 160px; height: 24px; bottom: 5%; left: 2%; transform: rotate(-12deg); } html.xxl-is-app #xxl-artist-mount .deco-float--c1 { width: 90px; height: 90px; top: 8%; left: 6%; } html.xxl-is-app #xxl-artist-mount .deco-float--c1 polygon { fill: var(--yellow); } html.xxl-is-app #xxl-artist-mount .deco-float--c2 { width: 70px; height: 70px; bottom: 12%; right: 8%; } html.xxl-is-app #xxl-artist-mount .deco-float--c2 polygon { fill: var(--pink); } html.xxl-is-app #xxl-artist-mount .deco-float--c3 { width: 50px; height: 100px; top: 30%; right: 5%; transform: rotate(20deg); } html.xxl-is-app #xxl-artist-mount .deco-float--a1 { width: 80px; height: 80px; top: 12%; right: 6%; } html.xxl-is-app #xxl-artist-mount .deco-float--a1 polygon { fill: var(--blue); } html.xxl-is-app #xxl-artist-mount .deco-float--a2 { width: 200px; height: 30px; bottom: 30%; left: 4%; transform: rotate(-6deg); } html.xxl-is-app #xxl-artist-mount .star--f1 { width: 110px; height: 110px; top: 50px; left: 18%; animation: spin-slow 22s linear infinite; } html.xxl-is-app #xxl-artist-mount .star--f1 polygon { fill: var(--yellow); } html.xxl-is-app #xxl-artist-mount .star--f2 { width: 65px; height: 65px; bottom: 70px; right: 15%; animation: spin-slow 32s linear infinite reverse; } html.xxl-is-app #xxl-artist-mount .star--f2 polygon { fill: var(--pink); } html.xxl-is-app #xxl-artist-mount .deco-float--f1 { width: 50px; height: 100px; top: 30%; right: 8%; transform: rotate(-15deg); } html.xxl-is-app #xxl-artist-mount .divider { position: relative; height: 90px; z-index: 0; border-top: var(--border-thick); border-bottom: var(--border-thick); overflow: hidden; overflow: clip; } html.xxl-is-app #xxl-artist-mount .divider--blue { background: var(--blue); } html.xxl-is-app #xxl-artist-mount .divider--green { background: var(--green); } html.xxl-is-app #xxl-artist-mount .divider--pink { background: var(--pink); } html.xxl-is-app #xxl-artist-mount .divider--with-cta { height: 220px; display: flex; align-items: center; justify-content: center; /* Override the base divider's clip so the big tee can extend above/below */ overflow: visible; } html.xxl-is-app #xxl-artist-mount .merch-stage { position: relative; z-index: 4; display: flex; flex-direction: row-reverse; align-items: center; justify-content: center; gap: 40px; } html.xxl-is-app #xxl-artist-mount .merch-tee { width: 380px; height: auto; display: block; animation: logo-wobble 6s ease-in-out infinite; flex-shrink: 0; filter: drop-shadow(6px 6px 0 rgba(26, 26, 26, 0.75)); } html.xxl-is-app #xxl-artist-mount .merch-btn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 12px; text-decoration: none; font-family: var(--font-display); font-size: 2.6rem; letter-spacing: 0.05em; line-height: 1; color: var(--black); background: var(--yellow); text-align: center; text-transform: uppercase; white-space: nowrap; padding: 18px 36px 14px; border: 5px solid var(--black); border-radius: 8px; transform: rotate(-3deg); box-shadow: 8px 8px 0 var(--black); transition: transform 0.22s ease, box-shadow 0.22s ease; cursor: pointer; } html.xxl-is-app #xxl-artist-mount .merch-arrow { display: inline-block; transition: transform 0.2s ease; } html.xxl-is-app #xxl-artist-mount .merch-burst { position: absolute; inset: -38px -52px; z-index: -1; background: var(--white); border: 5px solid var(--black); filter: drop-shadow(6px 6px 0 var(--black)); clip-path: polygon( 50% 0%, 58% 18%, 75% 4%, 73% 22%, 92% 12%, 84% 32%, 100% 30%, 86% 46%, 100% 60%, 86% 60%, 96% 80%, 76% 74%, 82% 96%, 60% 82%, 50% 100%, 40% 82%, 18% 96%, 24% 74%, 4% 80%, 14% 60%, 0% 60%, 14% 46%, 0% 30%, 16% 30%, 8% 12%, 27% 22%, 25% 4%, 42% 18% ); transform: rotate(8deg); animation: merch-burst-spin 14s linear infinite; } html.xxl-is-app #xxl-artist-mount .merch-btn:hover { transform: rotate(-1.5deg) translate(-3px, -3px); box-shadow: 12px 12px 0 var(--black); } html.xxl-is-app #xxl-artist-mount .merch-btn:hover .merch-arrow { transform: translateX(6px); } html.xxl-is-app #xxl-artist-mount .divider-pattern { position: absolute; inset: 0; } html.xxl-is-app #xxl-artist-mount .divider-pattern--bolts { background-image: url("data:image/svg+xml;utf8,"); background-size: 25px; background-repeat: repeat; background-position: center; } html.xxl-is-app #xxl-artist-mount .divider-pattern--squiggles { background-image: url("data:image/svg+xml;utf8,"); background-size: 65px; background-repeat: repeat; background-position: center; } html.xxl-is-app #xxl-artist-mount .divider-pattern--swirls { background-image: url("data:image/svg+xml;utf8,"); background-size: 45px; background-repeat: repeat; background-position: center; } html.xxl-is-app #xxl-artist-mount .section--header { min-height: auto; display: flex; align-items: center; justify-content: center; padding: 80px 24px 90px; } html.xxl-is-app #xxl-artist-mount .header-inner { position: relative; z-index: 2; max-width: var(--max-width); margin: 0 auto; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 24px; } html.xxl-is-app #xxl-artist-mount .header-logo-wrap { margin: 0; padding: 0; line-height: 0; display: block; position: relative; z-index: 2; animation: logo-wobble 6s ease-in-out infinite; } html.xxl-is-app #xxl-artist-mount .header-logo, html.xxl-is-app #xxl-artist-mount .header-logo-wrap picture, html.xxl-is-app #xxl-artist-mount .header-logo-wrap img { display: block; width: 100%; max-width: 820px; height: auto; margin: 0 auto; } html.xxl-is-app #xxl-artist-mount .header-logo-wrap img { filter: drop-shadow(6px 6px 0 rgba(26, 26, 26, 0.75)); } html.xxl-is-app #xxl-artist-mount .header-title { font-family: var(--font-display); line-height: 0.9; letter-spacing: 0.03em; display: flex; flex-direction: column; align-items: center; gap: 4px; } html.xxl-is-app #xxl-artist-mount .title-xxl { font-size: clamp(5rem, 18vw, 11rem); color: var(--black); display: block; text-shadow: 6px 6px 0 var(--yellow); } html.xxl-is-app #xxl-artist-mount .title-freshman { font-size: clamp(2.8rem, 9vw, 6.5rem); color: var(--blue); -webkit-text-stroke: 2px var(--black); display: block; transform: rotate(-1.5deg); } html.xxl-is-app #xxl-artist-mount .title-class { font-size: clamp(2.2rem, 6vw, 4.5rem); color: var(--pink); -webkit-text-stroke: 2px var(--black); display: block; transform: rotate(1deg); } html.xxl-is-app #xxl-artist-mount .title-year { font-size: clamp(4rem, 12vw, 8.5rem); color: var(--yellow); -webkit-text-stroke: 3px var(--black); background: var(--black); padding: 4px 28px; margin-top: 8px; display: inline-block; transform: rotate(-2deg); box-shadow: var(--shadow-lg); } html.xxl-is-app #xxl-artist-mount .header-intro { max-width: 820px; font-size: 1.5rem; font-weight: 700; line-height: 1.6; background: var(--white); border: var(--border-thick); box-shadow: var(--shadow); padding: 28px 38px; transform: rotate(0.5deg); position: relative; z-index: 2; border-radius: 8px; } html.xxl-is-app #xxl-artist-mount .section--artists { background: transparent; padding-top: 70px; padding-bottom: 70px; } html.xxl-is-app #xxl-artist-mount .artists-vertical { max-width: 1100px; margin: 0 auto; position: relative; z-index: 2; } html.xxl-is-app #xxl-artist-mount .artist-row { display: grid; grid-template-columns: 1fr 1fr; gap: 50px; align-items: center; margin-bottom: 80px; position: relative; opacity: 0; transform: translateY(50px); transition: opacity 0.7s ease, transform 0.7s cubic-bezier(.22,.84,.44,1); } html.xxl-is-app #xxl-artist-mount .artist-row.is-visible { opacity: 1; transform: translateY(0); } html.xxl-is-app #xxl-artist-mount .artist-row:last-child { margin-bottom: 20px; } html.xxl-is-app #xxl-artist-mount .artist-row[data-side="left"] .artist-image-side { grid-column: 1; grid-row: 1; } html.xxl-is-app #xxl-artist-mount .artist-row[data-side="left"] .artist-info-side { grid-column: 2; grid-row: 1; } html.xxl-is-app #xxl-artist-mount .artist-row[data-side="right"] .artist-image-side { grid-column: 2; grid-row: 1; } html.xxl-is-app #xxl-artist-mount .artist-row[data-side="right"] .artist-info-side { grid-column: 1; grid-row: 1; text-align: right; } html.xxl-is-app #xxl-artist-mount .artist-row[data-side="right"] .artist-info-side .artist-bio { margin-left: auto; } html.xxl-is-app #xxl-artist-mount .artist-number { display: none; } html.xxl-is-app #xxl-artist-mount .artist-row[data-side="left"] .artist-number { left: -10px; } html.xxl-is-app #xxl-artist-mount .artist-row[data-side="right"] .artist-number { right: -10px; } html.xxl-is-app #xxl-artist-mount .artist-image-side { position: relative; padding: 20px; } html.xxl-is-app #xxl-artist-mount .artist-blob { position: absolute; inset: 0; z-index: 0; clip-path: url(#xxl-spike-clip); transform: scale(0.55); transform-origin: center center; transition: transform 0.5s cubic-bezier(.34, 1.4, .64, 1); } html.xxl-is-app #xxl-artist-mount .artist-row[data-color="yellow"] .artist-blob { background: var(--yellow); } html.xxl-is-app #xxl-artist-mount .artist-row[data-color="blue"] .artist-blob { background: var(--blue); } html.xxl-is-app #xxl-artist-mount .artist-row[data-color="pink"] .artist-blob { background: var(--pink); } html.xxl-is-app #xxl-artist-mount .artist-row[data-color="green"] .artist-blob { background: var(--green); } html.xxl-is-app #xxl-artist-mount .artist-row[data-color="yellow"] .artist-img-frame { border-color: var(--yellow); box-shadow: 12px 12px 0 var(--yellow); } html.xxl-is-app #xxl-artist-mount .artist-row[data-color="blue"] .artist-img-frame { border-color: var(--blue); box-shadow: 12px 12px 0 var(--blue); } html.xxl-is-app #xxl-artist-mount .artist-row[data-color="pink"] .artist-img-frame { border-color: var(--pink); box-shadow: 12px 12px 0 var(--pink); } html.xxl-is-app #xxl-artist-mount .artist-row[data-color="green"] .artist-img-frame { border-color: var(--green); box-shadow: 12px 12px 0 var(--green); } html.xxl-is-app #xxl-artist-mount .artist-row[data-side="right"] .artist-blob { transform: scale(0.55) scaleX(-1); } html.xxl-is-app #xxl-artist-mount .artist-row:hover .artist-blob { transform: scale(1.18) rotate(6deg); } html.xxl-is-app #xxl-artist-mount .artist-row[data-side="right"]:hover .artist-blob { transform: scale(1.18) scaleX(-1) rotate(-6deg); } html.xxl-is-app #xxl-artist-mount .artist-img-frame { position: relative; z-index: 2; border: var(--border-thick); box-shadow: var(--shadow-xl); overflow: hidden; width: 100%; max-width: 100%; margin: 0 auto; transform: rotate(-2deg); transition: transform 0.4s ease; background: var(--yellow); font-size: 0; line-height: 0; } html.xxl-is-app #xxl-artist-mount .artist-row[data-side="right"] .artist-img-frame { transform: rotate(2deg); } html.xxl-is-app #xxl-artist-mount .artist-row:hover .artist-img-frame { transform: rotate(0deg) scale(1.02); } html.xxl-is-app #xxl-artist-mount .artist-img-frame img { display: block; width: 100%; height: auto; object-fit: cover; } html.xxl-is-app #xxl-artist-mount .artist-link { display: block; text-decoration: none; color: inherit; position: relative; z-index: 2; } html.xxl-is-app #xxl-artist-mount .artist-badge { position: absolute; top: -22px; right: -22px; width: 130px; height: 130px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; font-family: var(--font-display); font-size: 2rem; line-height: 1; letter-spacing: 0.01em; text-transform: uppercase; padding: 16px 8px; z-index: 6; pointer-events: none; /* 20-point starburst shape */ clip-path: polygon( 50% 0%, 58% 14%, 70% 4%, 73% 22%, 86% 16%, 82% 32%, 96% 30%, 86% 44%, 100% 50%, 86% 56%, 96% 70%, 82% 68%, 86% 84%, 73% 78%, 70% 96%, 58% 86%, 50% 100%, 42% 86%, 30% 96%, 27% 78%, 14% 84%, 18% 68%, 4% 70%, 14% 56%, 0% 50%, 14% 44%, 4% 30%, 18% 32%, 14% 16%, 27% 22%, 30% 4%, 42% 14% ); filter: drop-shadow(4px 4px 0 var(--black)); transform: rotate(-12deg); animation: badge-wobble 5s ease-in-out infinite; } html.xxl-is-app #xxl-artist-mount .artist-badge .badge-line-1 { display: block; font-size: 0.95em; } html.xxl-is-app #xxl-artist-mount .artist-badge .badge-line-2 { display: block; font-size: 1.15em; } html.xxl-is-app #xxl-artist-mount .artist-badge--winner { background: #ed1b24; color: var(--white); } html.xxl-is-app #xxl-artist-mount .artist-badge--producer { background: var(--yellow); color: var(--black); transform: rotate(10deg); } html.xxl-is-app #xxl-artist-mount .artist-badge--producer { animation-name: badge-wobble-rev; } html.xxl-is-app #xxl-artist-mount .artist-cta { display: inline-flex; align-items: center; gap: 10px; font-family: var(--font-display); font-size: 2rem; letter-spacing: 0.05em; text-transform: uppercase; text-decoration: none; background: var(--black); color: var(--yellow); padding: 8px 22px 6px; border: var(--border-thick); border-radius: 6px; box-shadow: 5px 5px 0 var(--black); transition: transform 0.18s ease, box-shadow 0.18s ease; cursor: pointer; margin-top: 4px; } html.xxl-is-app #xxl-artist-mount .artist-cta::after { content: '\2192'; display: inline-block; transition: transform 0.2s ease; } html.xxl-is-app #xxl-artist-mount .artist-cta:hover { transform: translate(-2px, -2px) rotate(-1deg); box-shadow: 8px 8px 0 var(--black); } html.xxl-is-app #xxl-artist-mount .artist-cta:hover::after { transform: translateX(4px); } html.xxl-is-app #xxl-artist-mount .artist-row[data-color="yellow"] .artist-cta { background: var(--yellow); color: var(--black); } html.xxl-is-app #xxl-artist-mount .artist-row[data-color="blue"] .artist-cta { background: var(--blue); color: var(--white); } html.xxl-is-app #xxl-artist-mount .artist-row[data-color="pink"] .artist-cta { background: var(--pink); color: var(--white); } html.xxl-is-app #xxl-artist-mount .artist-row[data-color="green"] .artist-cta { background: var(--green); color: var(--white); } html.xxl-is-app #xxl-artist-mount .artist-deco-star, html.xxl-is-app #xxl-artist-mount .artist-deco-bolt { position: absolute; z-index: 3; overflow: visible; filter: drop-shadow(3px 3px 0 var(--black)); } html.xxl-is-app #xxl-artist-mount .artist-deco-star { width: 80px; height: 80px; top: -10px; right: -5px; } html.xxl-is-app #xxl-artist-mount .artist-deco-star polygon { stroke: var(--black); stroke-width: 4; } html.xxl-is-app #xxl-artist-mount .artist-row[data-side="left"] .artist-deco-star { right: -5px; top: -5px; } html.xxl-is-app #xxl-artist-mount .artist-row[data-side="right"] .artist-deco-star { left: -5px; right: auto; top: -5px; } html.xxl-is-app #xxl-artist-mount .artist-row[data-color="yellow"] .artist-deco-star polygon { fill: var(--pink); } html.xxl-is-app #xxl-artist-mount .artist-row[data-color="pink"] .artist-deco-star polygon { fill: var(--yellow); } html.xxl-is-app #xxl-artist-mount .artist-deco-bolt { width: 50px; height: 100px; top: -25px; filter: drop-shadow(3px 3px 0 var(--black)); transform: rotate(-15deg); } html.xxl-is-app #xxl-artist-mount .artist-row[data-side="left"] .artist-deco-bolt { right: -10px; } html.xxl-is-app #xxl-artist-mount .artist-row[data-side="right"] .artist-deco-bolt { left: -10px; } html.xxl-is-app #xxl-artist-mount .artist-row[data-color="blue"] .artist-deco-bolt polygon { fill: var(--yellow); } html.xxl-is-app #xxl-artist-mount .artist-row[data-color="green"] .artist-deco-bolt polygon { fill: var(--yellow); } html.xxl-is-app #xxl-artist-mount .artist-info-side { position: relative; z-index: 2; } html.xxl-is-app #xxl-artist-mount .artist-tag { display: inline-block; font-family: var(--font-display); font-size: 1.95rem; letter-spacing: 0.1em; background: var(--black); color: var(--yellow); padding: 7px 22px; margin-bottom: 18px; border-radius: 4px; transform: rotate(-2deg); box-shadow: 3px 3px 0 var(--black); } html.xxl-is-app #xxl-artist-mount .artist-tag .tag-star { display: inline-block; font-size: 1.35em; line-height: 0.7; vertical-align: -0.03em; margin-right: 0.05em; } html.xxl-is-app #xxl-artist-mount .artist-row[data-side="right"] .artist-tag { transform: rotate(2deg); } html.xxl-is-app #xxl-artist-mount .artist-name { font-family: var(--font-display); font-size: clamp(3.4rem, 6.5vw, 5.2rem); letter-spacing: 0.04em; line-height: 0.95; margin-bottom: 14px; color: var(--black); text-shadow: 4px 4px 0 currentColor; } html.xxl-is-app #xxl-artist-mount .artist-row[data-color="blue"] .artist-name { text-shadow: 4px 4px 0 #7a8eda; color: var(--black); } html.xxl-is-app #xxl-artist-mount .artist-row[data-color="pink"] .artist-name { text-shadow: 4px 4px 0 var(--pink); } html.xxl-is-app #xxl-artist-mount .artist-row[data-color="green"] .artist-name { text-shadow: 4px 4px 0 var(--green); } html.xxl-is-app #xxl-artist-mount .artist-hometown { font-family: var(--font-display); font-size: 1.75rem; letter-spacing: 0.06em; margin-bottom: 22px; display: inline-block; padding: 5px 20px; border: var(--border); border-radius: 999px; background: var(--white); box-shadow: 3px 3px 0 var(--black); } html.xxl-is-app #xxl-artist-mount .artist-bio { font-size: 1.5rem; line-height: 1.6; color: var(--black); font-weight: 700; max-width: 540px; margin-bottom: 24px; background: var(--white); padding: 18px 24px; border-radius: 6px; } html.xxl-is-app #xxl-artist-mount .artist-squiggle { width: 200px; height: 20px; display: block; margin-top: 28px; } html.xxl-is-app #xxl-artist-mount .artist-row[data-side="right"] .artist-squiggle { margin-left: auto; } html.xxl-is-app #xxl-artist-mount .section--cypher { background-color: var(--blue); background-image: repeating-linear-gradient( 45deg, rgba(255, 255, 255, 0.04) 0, rgba(255, 255, 255, 0.04) 10px, transparent 10px, transparent 20px ); border-top: var(--border-thick); border-bottom: var(--border-thick); padding-bottom: 120px; } html.xxl-is-app #xxl-artist-mount .tv-wrap { max-width: 700px; margin: 0 auto; position: relative; z-index: 2; } html.xxl-is-app #xxl-artist-mount .cypher-burst { position: absolute; width: 220px; height: 220px; top: -50px; right: -80px; fill: var(--yellow); stroke: var(--black); stroke-width: 3; z-index: 1; animation: pulse-rotate 8s ease-in-out infinite; filter: drop-shadow(5px 5px 0 var(--black)); } html.xxl-is-app #xxl-artist-mount .tv-set { position: relative; transition: transform 0.3s ease; filter: drop-shadow(8px 8px 0 rgba(0, 0, 0, 0.55)); z-index: 2; } html.xxl-is-app #xxl-artist-mount .tv-antennas { display: flex; justify-content: center; align-items: flex-end; height: 80px; position: relative; margin-bottom: -3px; } html.xxl-is-app #xxl-artist-mount .antenna-base { position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); width: 64px; height: 16px; background: var(--black); border-radius: 4px 4px 0 0; } html.xxl-is-app #xxl-artist-mount .antenna { position: absolute; bottom: 15px; width: 7px; background: var(--black); border-radius: 4px; } html.xxl-is-app #xxl-artist-mount .antenna--left { height: 68px; left: calc(50% - 26px); transform-origin: bottom center; transform: rotate(-28deg); } html.xxl-is-app #xxl-artist-mount .antenna--right { height: 68px; left: calc(50% + 19px); transform-origin: bottom center; transform: rotate(28deg); } html.xxl-is-app #xxl-artist-mount .tv-body { background: var(--yellow); border: var(--border-thick); border-radius: 18px 18px 14px 14px; padding: 18px 18px 16px; position: relative; } html.xxl-is-app #xxl-artist-mount .tv-screen-wrap { background: #000; border: var(--border-thick); border-radius: 10px; overflow: hidden; aspect-ratio: 16 / 9; } html.xxl-is-app #xxl-artist-mount .tv-screen-wrap { position: relative; } html.xxl-is-app #xxl-artist-mount .tv-screen-wrap iframe { width: 100%; height: 100%; display: block; } html.xxl-is-app #xxl-artist-mount .tv-fullscreen-btn { position: absolute; bottom: 15px; right: 8px; width: 38px; height: 38px; padding: 0; display: inline-flex; align-items: center; justify-content: center; background: rgba(0, 0, 0, 0.65); color: var(--white); border: 2px solid var(--white); border-radius: 6px; cursor: pointer; z-index: 5; transition: background 0.15s ease, transform 0.15s ease; } html.xxl-is-app #xxl-artist-mount .tv-fullscreen-btn:hover, html.xxl-is-app #xxl-artist-mount .tv-fullscreen-btn:focus-visible { background: rgba(0, 0, 0, 0.92); transform: scale(1.06); outline: none; } html.xxl-is-app #xxl-artist-mount .tv-fullscreen-btn svg { width: 18px; height: 18px; } html.xxl-is-app #xxl-artist-mount .tv-controls { display: flex; align-items: center; gap: 14px; margin-top: 14px; padding: 0 4px; } html.xxl-is-app #xxl-artist-mount .tv-knobs { display: flex; align-items: center; gap: 10px; } html.xxl-is-app #xxl-artist-mount .knob { background: #111; border-radius: 50%; border: 3px solid #444; position: relative; flex-shrink: 0; } html.xxl-is-app #xxl-artist-mount .knob::after { content: ''; position: absolute; top: 50%; left: 50%; width: 3px; height: 38%; background: #777; transform: translate(-50%, -50%); border-radius: 2px; } html.xxl-is-app #xxl-artist-mount .knob--big { width: 38px; height: 38px; } html.xxl-is-app #xxl-artist-mount .knob--small { width: 26px; height: 26px; } html.xxl-is-app #xxl-artist-mount .tv-speaker { flex: 1; display: flex; flex-direction: column; gap: 5px; } html.xxl-is-app #xxl-artist-mount .speaker-row { display: flex; gap: 5px; } html.xxl-is-app #xxl-artist-mount .speaker-dot { width: 7px; height: 7px; background: var(--black); border-radius: 50%; opacity: 0.6; } html.xxl-is-app #xxl-artist-mount .tv-brand { font-family: var(--font-display); font-size: 1.85rem; letter-spacing: 0.08em; color: var(--white); background: #ed1b24; text-align: center; line-height: 1; padding: 8px 14px 6px; border: 3px solid var(--black); border-radius: 6px; box-shadow: 3px 3px 0 var(--black); margin-left: auto; } html.xxl-is-app #xxl-artist-mount .tv-puma-logo { display: block; width: 200px; height: auto; margin: 0 10px; flex-shrink: 0; } html.xxl-is-app #xxl-artist-mount .tv-brand i { font-style: italic; } html.xxl-is-app #xxl-artist-mount .tv-legs { display: flex; justify-content: space-around; padding: 0 80px; } html.xxl-is-app #xxl-artist-mount .tv-leg { width: 22px; height: 32px; background: var(--black); border-radius: 0 0 6px 6px; position: relative; } html.xxl-is-app #xxl-artist-mount .tv-leg::after { content: ''; position: absolute; bottom: 0; left: -8px; width: 38px; height: 7px; background: var(--black); border-radius: 4px; } html.xxl-is-app #xxl-artist-mount .remote-stage { position: relative; margin: 50px auto 0; max-width: 700px; } html.xxl-is-app #xxl-artist-mount .cypher-remote { position: relative; z-index: 3; text-align: center; color: var(--black); background: var(--yellow); border: var(--border-thick); box-shadow: 6px 6px 0 var(--black); border-radius: 18px; padding: 18px 18px 20px; } html.xxl-is-app #xxl-artist-mount .remote-brand { font-family: var(--font-display); font-size: 2.6rem; letter-spacing: 0.12em; color: var(--black); margin-bottom: 6px; text-transform: uppercase; } html.xxl-is-app #xxl-artist-mount .remote-brand i { font-style: italic; } html.xxl-is-app #xxl-artist-mount .remote-eyebrow { font-family: var(--font-body); font-size: 1.4rem; letter-spacing: 0.16em; color: rgba(0, 0, 0, 0.75); margin-bottom: 18px; padding-bottom: 14px; border-bottom: 3px dashed rgba(0, 0, 0, 0.35); text-transform: uppercase; font-weight: 800; } html.xxl-is-app #xxl-artist-mount .remote-buttons { display: flex; flex-direction: row; flex-wrap: nowrap; gap: 8px; margin-bottom: 14px; justify-content: space-between; } html.xxl-is-app #xxl-artist-mount .channel-btn { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; padding: 10px 6px 8px; font-family: var(--font-display); font-size: 0.9rem; letter-spacing: 0.04em; background: var(--white); color: var(--black); border: var(--border); border-radius: 8px; box-shadow: 3px 3px 0 var(--black); cursor: pointer; transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease; font-weight: 700; text-transform: uppercase; user-select: none; } html.xxl-is-app #xxl-artist-mount .channel-btn .ch-num { font-family: var(--font-display); font-size: 2.6rem; line-height: 1; color: var(--black); letter-spacing: 0.04em; } html.xxl-is-app #xxl-artist-mount .channel-btn .ch-label { font-family: var(--font-body); font-size: 1.05rem; font-weight: 800; letter-spacing: 0.03em; color: #333; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; } html.xxl-is-app #xxl-artist-mount .channel-btn:hover { transform: translate(-2px, -2px) rotate(-1.5deg); box-shadow: 8px 8px 0 var(--black); background: var(--yellow); } html.xxl-is-app #xxl-artist-mount .channel-btn.is-active { background: var(--yellow); transform: translate(2px, 2px) rotate(1deg); box-shadow: 2px 2px 0 var(--black); } html.xxl-is-app #xxl-artist-mount .channel-btn.is-active .ch-num { color: var(--black); } html.xxl-is-app #xxl-artist-mount .remote-now-playing { font-family: var(--font-body); font-size: 1rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(255, 255, 255, 0.75); margin: 0; } html.xxl-is-app #xxl-artist-mount .now-playing-title { color: var(--blue); font-family: var(--font-display); font-size: 2.05rem; letter-spacing: 0.05em; margin-left: 4px; } html.xxl-is-app #xxl-artist-mount .remote-now-playing { color: rgba(0, 0, 0, 0.75); border-top: 3px dashed rgba(0, 0, 0, 0.35); padding-top: 12px; margin-top: 4px; font-size: 1.4rem; font-weight: 800; } html.xxl-is-app #xxl-artist-mount .section--archive { background: transparent; } html.xxl-is-app #xxl-artist-mount .archive-scroll-outer { overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; padding: 16px 0 24px; cursor: grab; position: relative; z-index: 2; } html.xxl-is-app #xxl-artist-mount .archive-scroll-outer:active { cursor: grabbing; } html.xxl-is-app #xxl-artist-mount .archive-scroll-outer::-webkit-scrollbar { height: 6px; } html.xxl-is-app #xxl-artist-mount .archive-scroll-outer::-webkit-scrollbar-track { background: rgba(0,0,0,0.1); border-radius: 3px; } html.xxl-is-app #xxl-artist-mount .archive-scroll-outer::-webkit-scrollbar-thumb { background: var(--black); border-radius: 3px; } html.xxl-is-app #xxl-artist-mount .archive-track { display: flex; gap: 22px; padding: 8px 32px; width: max-content; } html.xxl-is-app #xxl-artist-mount .archive-cover { scroll-snap-align: start; flex-shrink: 0; /* width is determined by the image's natural aspect ratio at a fixed height, so wide cover scans (e.g. 2:1) display in full instead of being cropped */ width: auto; user-select: none; } html.xxl-is-app #xxl-artist-mount .archive-cover:nth-child(odd) .cover-img-wrap { transform: rotate(-1.5deg); } html.xxl-is-app #xxl-artist-mount .archive-cover:nth-child(even) .cover-img-wrap { transform: rotate(1.5deg); } html.xxl-is-app #xxl-artist-mount .cover-img-wrap { position: relative; border: var(--border-thick); box-shadow: var(--shadow); overflow: hidden; border-radius: 4px; height: 270px; /* fixed height — width scales to image aspect ratio */ width: auto; transition: box-shadow 0.25s ease, transform 0.25s ease; } html.xxl-is-app #xxl-artist-mount .cover-img-wrap img { height: 100%; width: auto; object-fit: cover; display: block; transition: transform 0.35s ease; pointer-events: none; } html.xxl-is-app #xxl-artist-mount .cover-label { display: block; text-align: center; padding: 12px 6px 0; } html.xxl-is-app #xxl-artist-mount .cover-year { font-family: var(--font-display); font-size: 1.75rem; color: var(--black); letter-spacing: 0.1em; } html.xxl-is-app #xxl-artist-mount .archive-cover:hover .cover-img-wrap { transform: rotate(0deg) translateY(-6px); box-shadow: var(--shadow-lg); } html.xxl-is-app #xxl-artist-mount .archive-cover:hover .cover-img-wrap img { transform: scale(1.04); } html.xxl-is-app #xxl-artist-mount .archive-hint { text-align: center; font-family: var(--font-display); font-size: 2rem; letter-spacing: 0.18em; color: var(--black); margin-top: 20px; position: relative; z-index: 2; } html.xxl-is-app #xxl-artist-mount .section--footer { background-color: var(--black); background-image: radial-gradient(circle, rgba(255, 255, 255, 0.05) 1.5px, transparent 1.8px); background-size: 30px 30px; color: var(--white); min-height: 460px; display: flex; align-items: center; justify-content: center; text-align: center; padding: 120px 24px; } html.xxl-is-app #xxl-artist-mount .footer-inner { position: relative; z-index: 2; } html.xxl-is-app #xxl-artist-mount .footer-eyebrow { font-family: var(--font-body); font-size: 1.1rem; font-weight: 800; color: #888; letter-spacing: 0.12em; text-transform: uppercase; margin-bottom: 20px; } html.xxl-is-app #xxl-artist-mount .footer-headline { font-family: var(--font-display); font-size: clamp(4.5rem, 15vw, 11.5rem); letter-spacing: 0.04em; line-height: 0.9; color: var(--yellow); margin-bottom: 30px; text-shadow: 6px 6px 0 var(--pink), 12px 12px 0 var(--blue); } html.xxl-is-app #xxl-artist-mount .footer-sub { font-size: 1.25rem; color: #aaa; font-weight: 700; max-width: 460px; margin: 0 auto 44px; line-height: 1.7; } html.xxl-is-app #xxl-artist-mount .footer-dots { display: flex; justify-content: center; gap: 18px; } html.xxl-is-app #xxl-artist-mount .dot { width: 24px; height: 24px; border-radius: 50%; border: 3px solid rgba(255, 255, 255, 0.4); display: inline-block; transition: transform 0.2s ease; } html.xxl-is-app #xxl-artist-mount .dot:hover { transform: scale(1.4) rotate(15deg); } html.xxl-is-app #xxl-artist-mount .dot--yellow { background: var(--yellow); } html.xxl-is-app #xxl-artist-mount .dot--blue { background: var(--blue); } html.xxl-is-app #xxl-artist-mount .dot--pink { background: var(--pink); } html.xxl-is-app #xxl-artist-mount .dot--green { background: var(--green); } html.xxl-is-app #xxl-artist-mount .reveal-item { opacity: 0; transform: translateY(40px); transition: opacity 0.6s ease, transform 0.6s cubic-bezier(.22,.84,.44,1); } html.xxl-is-app #xxl-artist-mount .reveal-item.is-visible { opacity: 1; transform: translateY(0); } html.xxl-is-app #xxl-artist-mount .archive-track .reveal-item { transition-delay: 0.04s; } /* App: mobile-breakpoint overrides applied unconditionally */ html.xxl-is-app #xxl-artist-mount .tv-fullscreen-btn { display: none; } html.xxl-is-app #xxl-artist-mount .tv-puma-logo { width: 120px; margin: 0 6px; } html.xxl-is-app #xxl-artist-mount .artist-row { grid-template-columns: 1fr; gap: 20px; margin-bottom: 60px; /* skip the scroll reveal on mobile/tablet — show immediately */ opacity: 1; transform: none; transition: none; /* allow spike to extend past row edges — body's overflow-x: clip still prevents page-level horizontal scroll */ overflow: visible; } html.xxl-is-app #xxl-artist-mount .artists-vertical { overflow: visible; } html.xxl-is-app #xxl-artist-mount .artist-blob { transform: scale(1.15) rotate(6deg); } html.xxl-is-app #xxl-artist-mount .artist-row[data-side="right"] .artist-blob { transform: scale(1.15) scaleX(-1) rotate(-6deg); } html.xxl-is-app #xxl-artist-mount .artist-row[data-side="left"] .artist-image-side, html.xxl-is-app #xxl-artist-mount .artist-row[data-side="right"] .artist-image-side { grid-column: 1; grid-row: 1; } html.xxl-is-app #xxl-artist-mount .artist-row[data-side="left"] .artist-info-side, html.xxl-is-app #xxl-artist-mount .artist-row[data-side="right"] .artist-info-side { grid-column: 1; grid-row: 2; text-align: left; } html.xxl-is-app #xxl-artist-mount .artist-row[data-side="right"] .artist-bio, html.xxl-is-app #xxl-artist-mount .artist-row[data-side="right"] .artist-squiggle { margin-left: 0; } html.xxl-is-app #xxl-artist-mount .artist-number { top: -32px; font-size: 5rem; } html.xxl-is-app #xxl-artist-mount .artist-row[data-side="left"] .artist-number { left: 0; } html.xxl-is-app #xxl-artist-mount .artist-row[data-side="right"] .artist-number { right: 0; } html.xxl-is-app #xxl-artist-mount .section { padding: 50px 16px; } html.xxl-is-app #xxl-artist-mount .section-header-row { margin-bottom: 36px; } html.xxl-is-app #xxl-artist-mount .header-intro { font-size: 1.3rem; padding: 18px 22px; line-height: 1.55; } html.xxl-is-app #xxl-artist-mount .header-logo { max-width: 320px; } html.xxl-is-app #xxl-artist-mount .header-inner { gap: 22px; } html.xxl-is-app #xxl-artist-mount .section-title { font-size: clamp(2.6rem, 12vw, 4rem); } html.xxl-is-app #xxl-artist-mount .badge { font-size: 1.45rem; padding: 7px 22px 5px; margin-bottom: 18px; } html.xxl-is-app #xxl-artist-mount .tv-wrap { padding: 0; } html.xxl-is-app #xxl-artist-mount .tv-antennas { height: 50px; } html.xxl-is-app #xxl-artist-mount .antenna { height: 44px; width: 5px; } html.xxl-is-app #xxl-artist-mount .antenna-base { width: 44px; height: 12px; } html.xxl-is-app #xxl-artist-mount .tv-body { padding: 12px 12px 10px; } html.xxl-is-app #xxl-artist-mount .tv-controls { gap: 10px; margin-top: 10px; } html.xxl-is-app #xxl-artist-mount .knob--big { width: 28px; height: 28px; } html.xxl-is-app #xxl-artist-mount .knob--small { width: 20px; height: 20px; } html.xxl-is-app #xxl-artist-mount .tv-brand { font-size: 1.4rem; padding: 6px 10px 4px; } html.xxl-is-app #xxl-artist-mount .tv-legs { padding: 0 50px; } html.xxl-is-app #xxl-artist-mount .tv-leg { width: 16px; height: 22px; } html.xxl-is-app #xxl-artist-mount .cover-img-wrap { height: 215px; } html.xxl-is-app #xxl-artist-mount .cover-year { font-size: 1.4rem; } html.xxl-is-app #xxl-artist-mount .section--header { padding: 40px 16px 50px; } html.xxl-is-app #xxl-artist-mount .cypher-burst { width: 110px; height: 110px; right: -20px; top: -10px; } html.xxl-is-app #xxl-artist-mount .artist-image-side { padding: 16px; } html.xxl-is-app #xxl-artist-mount .artist-img-frame { max-width: 100%; } html.xxl-is-app #xxl-artist-mount .artist-name { font-size: clamp(3.6rem, 12vw, 5rem); margin-bottom: 12px; } html.xxl-is-app #xxl-artist-mount .artist-hometown { font-size: 1.55rem; padding: 5px 18px; } html.xxl-is-app #xxl-artist-mount .artist-bio { font-size: 1.4rem; line-height: 1.55; padding: 16px 20px; } html.xxl-is-app #xxl-artist-mount .artist-info-side { position: relative; padding-top: 42px; } html.xxl-is-app #xxl-artist-mount .artist-tag { position: absolute; top: 0; right: 24px; transform: translateY(-30%) rotate(-3deg); margin: 0; z-index: 5; font-size: 1.75rem; padding: 6px 18px; box-shadow: 4px 4px 0 var(--black); } html.xxl-is-app #xxl-artist-mount .artist-cta { font-size: 2rem; padding: 7px 20px 5px; } html.xxl-is-app #xxl-artist-mount .remote-stage { margin-top: 30px; max-width: 100%; } html.xxl-is-app #xxl-artist-mount .cypher-remote { padding: 14px 12px 14px; } html.xxl-is-app #xxl-artist-mount .remote-brand { font-size: 1.95rem; } html.xxl-is-app #xxl-artist-mount .remote-eyebrow { font-size: 1.15rem; margin-bottom: 12px; padding-bottom: 8px; } html.xxl-is-app #xxl-artist-mount .remote-buttons { gap: 5px; } html.xxl-is-app #xxl-artist-mount .channel-btn { padding: 8px 4px 6px; } html.xxl-is-app #xxl-artist-mount .channel-btn .ch-num { font-size: 2rem; } html.xxl-is-app #xxl-artist-mount .channel-btn .ch-label { font-size: 0.85rem; } html.xxl-is-app #xxl-artist-mount .now-playing-title { font-size: 1.65rem; } html.xxl-is-app #xxl-artist-mount .remote-now-playing { font-size: 1.15rem; padding-top: 8px; } html.xxl-is-app #xxl-artist-mount .artist-deco-star { width: 60px; height: 60px; } html.xxl-is-app #xxl-artist-mount .artist-deco-bolt { width: 38px; height: 76px; } html.xxl-is-app #xxl-artist-mount .footer-eyebrow { font-size: 1rem; } html.xxl-is-app #xxl-artist-mount .footer-headline { font-size: clamp(3.4rem, 15vw, 5.6rem); text-shadow: 4px 4px 0 var(--pink), 8px 8px 0 var(--blue); } html.xxl-is-app #xxl-artist-mount .footer-sub { font-size: 1.1rem; margin-bottom: 32px; } html.xxl-is-app #xxl-artist-mount .dot { width: 18px; height: 18px; } html.xxl-is-app #xxl-artist-mount .divider { height: 70px; } html.xxl-is-app #xxl-artist-mount .divider--with-cta { height: auto; padding: 28px 16px; } html.xxl-is-app #xxl-artist-mount .merch-stage { flex-direction: column; gap: 0; } html.xxl-is-app #xxl-artist-mount .merch-tee { width: 300px; margin-top: -50px; margin-bottom: -50px; position: relative; z-index: 1; } html.xxl-is-app #xxl-artist-mount .merch-btn { position: relative; z-index: 2; } html.xxl-is-app #xxl-artist-mount .merch-btn { font-size: 1.85rem; padding: 14px 22px 12px; border-width: 4px; box-shadow: 6px 6px 0 var(--black); white-space: normal; text-align: center; } html.xxl-is-app #xxl-artist-mount .deco-star, html.xxl-is-app #xxl-artist-mount .deco-bolt, html.xxl-is-app #xxl-artist-mount .deco-swirl, html.xxl-is-app #xxl-artist-mount .deco-zigzag, html.xxl-is-app #xxl-artist-mount .deco-squiggle { transform: scale(0.65); } html.xxl-is-app #xxl-artist-mount .blob { opacity: 0.45; } html.xxl-is-app #xxl-artist-mount .cover-img-wrap { height: 188px; } html.xxl-is-app #xxl-artist-mount .header-logo { max-width: 280px; } html.xxl-is-app #xxl-artist-mount .artist-img-frame { max-width: 100%; } html.xxl-is-app #xxl-artist-mount .footer-headline { font-size: clamp(3rem, 15vw, 4.4rem); } .post .content-footer { padding: 20px; } .sbn-widget-container { padding: 10px; } /* ============================================================ SPOTLIGHT SECTION — today's cypher drop highlight Sits above "Meet the Freshmen"; image left, copy/buttons right. ============================================================ */ #xxl-artist-mount .section--spotlight .badge, html.xxl-is-app #xxl-artist-mount .section--spotlight .badge { font-size: 2rem; } #xxl-artist-mount .section--spotlight, html.xxl-is-app #xxl-artist-mount .section--spotlight { padding-top: 70px; padding-bottom: 70px; background-color: var(--green); background-image: repeating-linear-gradient( 45deg, rgba(255, 255, 255, 0.06) 0, rgba(255, 255, 255, 0.06) 10px, transparent 10px, transparent 20px ); border-top: var(--border-thick); border-bottom: var(--border-thick); } #xxl-artist-mount .spotlight-inner, html.xxl-is-app #xxl-artist-mount .spotlight-inner { max-width: 1200px; margin: 0 auto; display: grid; grid-template-columns: 240px 1fr auto; gap: 36px; align-items: center; } /* Polaroid frame — white card with extra-thick bottom strip */ #xxl-artist-mount .spotlight-image-wrap, html.xxl-is-app #xxl-artist-mount .spotlight-image-wrap { position: relative; background: var(--white); padding: 12px 12px 52px; border: 5px solid var(--black); border-radius: 4px; box-shadow: 8px 8px 0 #1a1a1a; transform: rotate(-4deg); width: 100%; max-width: 240px; margin: 0; } #xxl-artist-mount .spotlight-image-wrap .spotlight-image, html.xxl-is-app #xxl-artist-mount .spotlight-image-wrap .spotlight-image { display: block; width: 100%; height: auto; border: 2px solid #1a1a1a; } #xxl-artist-mount .spotlight-image, html.xxl-is-app #xxl-artist-mount .spotlight-image { display: block; width: 100%; height: auto; } #xxl-artist-mount .spotlight-eyebrow, html.xxl-is-app #xxl-artist-mount .spotlight-eyebrow { display: inline-block; font-family: var(--font-display); font-size: 1.45rem; letter-spacing: 0.12em; background: var(--black); color: var(--yellow); padding: 7px 22px; margin-bottom: 18px; border-radius: 4px; transform: rotate(-2deg); box-shadow: 3px 3px 0 var(--black); text-transform: uppercase; } #xxl-artist-mount .spotlight-eyebrow .tag-star, html.xxl-is-app #xxl-artist-mount .spotlight-eyebrow .tag-star { display: inline-block; font-size: 1.35em; line-height: 0.7; vertical-align: -0.03em; margin-right: 0.15em; } #xxl-artist-mount .spotlight-headline, html.xxl-is-app #xxl-artist-mount .spotlight-headline { font-family: var(--font-display); font-size: clamp(3rem, 6vw, 5rem); line-height: 1; letter-spacing: 0.04em; margin-bottom: 18px; color: var(--white); text-shadow: 5px 5px 0 var(--black); text-transform: none; } #xxl-artist-mount .spotlight-headline em, html.xxl-is-app #xxl-artist-mount .spotlight-headline em { font-style: normal; color: var(--yellow); -webkit-text-stroke: 4px var(--black); paint-order: stroke fill; text-shadow: 5px 5px 0 var(--black); display: inline-block; transform: rotate(-1.5deg); } #xxl-artist-mount .spotlight-text, html.xxl-is-app #xxl-artist-mount .spotlight-text { font-size: 1.3rem; line-height: 1.6; margin-bottom: 24px; font-weight: 600; max-width: 560px; color: var(--black); background: var(--white); padding: 16px 22px; border-radius: 6px; } #xxl-artist-mount .spotlight-buttons, html.xxl-is-app #xxl-artist-mount .spotlight-buttons { display: flex; flex-direction: column; gap: 14px; align-items: stretch; min-width: 220px; } #xxl-artist-mount .spotlight-btn, html.xxl-is-app #xxl-artist-mount .spotlight-btn { justify-content: center; text-align: center; white-space: nowrap; } #xxl-artist-mount .spotlight-btn, html.xxl-is-app #xxl-artist-mount .spotlight-btn { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-display); font-size: 1.8rem; letter-spacing: 0.05em; text-decoration: none; text-transform: uppercase; padding: 12px 26px 10px; border: var(--border-thick); border-radius: 6px; box-shadow: 5px 5px 0 var(--black); transition: transform 0.18s ease, box-shadow 0.18s ease; cursor: pointer; line-height: 1; } #xxl-artist-mount .spotlight-btn--primary, html.xxl-is-app #xxl-artist-mount .spotlight-btn--primary { background: var(--blue); color: var(--white); } #xxl-artist-mount .spotlight-btn--secondary, html.xxl-is-app #xxl-artist-mount .spotlight-btn--secondary { background: var(--yellow); color: var(--black); } #xxl-artist-mount .spotlight-btn:hover, html.xxl-is-app #xxl-artist-mount .spotlight-btn:hover { transform: translate(-2px, -2px); box-shadow: 8px 8px 0 var(--black); } @media (max-width: 1024px) { /* Mobile/tablet: promote the inner content's children to be direct grid items so we can lay them out independently — badge centered on its own row, image left, name+text right, buttons below */ #xxl-artist-mount .spotlight-content, html.xxl-is-app #xxl-artist-mount .spotlight-content { display: contents; } #xxl-artist-mount .spotlight-inner, html.xxl-is-app #xxl-artist-mount .spotlight-inner { grid-template-columns: 200px 1fr; grid-template-areas: "badge badge" "image name" "image text" "buttons buttons"; gap: 18px 36px; align-items: start; } #xxl-artist-mount .spotlight-badge, html.xxl-is-app #xxl-artist-mount .spotlight-badge { grid-area: badge; justify-self: center; margin-bottom: 0; } #xxl-artist-mount .spotlight-image-wrap, html.xxl-is-app #xxl-artist-mount .spotlight-image-wrap { grid-area: image; max-width: 200px; align-self: center; padding: 7px 7px 30px; } #xxl-artist-mount .spotlight-headline, html.xxl-is-app #xxl-artist-mount .spotlight-headline { grid-area: name; margin-bottom: 0; } #xxl-artist-mount .spotlight-text, html.xxl-is-app #xxl-artist-mount .spotlight-text { grid-area: text; margin-bottom: 0; } #xxl-artist-mount .spotlight-buttons, html.xxl-is-app #xxl-artist-mount .spotlight-buttons { grid-area: buttons; flex-direction: row; flex-wrap: wrap; min-width: 0; } } @media (max-width: 480px) { #xxl-artist-mount .spotlight-inner, html.xxl-is-app #xxl-artist-mount .spotlight-inner { grid-template-columns: 130px 1fr; gap: 14px 24px; } #xxl-artist-mount .spotlight-image-wrap, html.xxl-is-app #xxl-artist-mount .spotlight-image-wrap { max-width: 130px; } #xxl-artist-mount .spotlight-buttons, html.xxl-is-app #xxl-artist-mount .spotlight-buttons { flex-direction: column; } } @media (max-width: 640px) { #xxl-artist-mount .section--spotlight, html.xxl-is-app #xxl-artist-mount .section--spotlight { padding-top: 50px; padding-bottom: 24px; } #xxl-artist-mount .spotlight-headline, html.xxl-is-app #xxl-artist-mount .spotlight-headline { font-size: clamp(2.6rem, 11vw, 4rem); } #xxl-artist-mount .spotlight-text, html.xxl-is-app #xxl-artist-mount .spotlight-text { font-size: 1.15rem; padding: 14px 18px; } #xxl-artist-mount .spotlight-btn, html.xxl-is-app #xxl-artist-mount .spotlight-btn { font-size: 1.8rem; padding: 10px 20px 8px; } #xxl-artist-mount .spotlight-buttons, html.xxl-is-app #xxl-artist-mount .spotlight-buttons { gap: 10px; } #xxl-artist-mount .spotlight-eyebrow, html.xxl-is-app #xxl-artist-mount .spotlight-eyebrow { font-size: 1.2rem; } } /* App view always uses the compact spotlight layout: badge centered at top, image left + content right (badge promoted out via display:contents so it can break to its own full-width row), buttons below. */ html.xxl-is-app #xxl-artist-mount .spotlight-content { display: contents; } html.xxl-is-app #xxl-artist-mount .spotlight-inner { grid-template-columns: 150px 1fr; grid-template-areas: "badge badge" "image name" "image text" "buttons buttons"; gap: 14px 28px; align-items: start; } html.xxl-is-app #xxl-artist-mount .spotlight-badge { grid-area: badge; justify-self: center; margin-bottom: 0; } html.xxl-is-app #xxl-artist-mount .spotlight-image-wrap { grid-area: image; max-width: 150px; align-self: center; padding: 7px 7px 30px; } html.xxl-is-app #xxl-artist-mount .spotlight-headline { grid-area: name; margin-bottom: 0; } html.xxl-is-app #xxl-artist-mount .spotlight-text { grid-area: text; margin-bottom: 0; } html.xxl-is-app #xxl-artist-mount .spotlight-buttons { grid-area: buttons; flex-direction: row; flex-wrap: wrap; min-width: 0; } html.xxl-is-app #xxl-artist-mount .section--spotlight { padding-top: 50px; padding-bottom: 24px; } html.xxl-is-app #xxl-artist-mount .spotlight-headline { font-size: clamp(2.6rem, 11vw, 4rem); } html.xxl-is-app #xxl-artist-mount .spotlight-text { font-size: 1.15rem; padding: 14px 18px; } html.xxl-is-app #xxl-artist-mount .spotlight-btn { font-size: 1.8rem; padding: 10px 20px 8px; } html.xxl-is-app #xxl-artist-mount .spotlight-eyebrow { font-size: 1.2rem; } /* ============================================================ COVER SECTION — magazine cover w/ click-to-enlarge lightbox Sits between the pink merch divider and the archive section. ============================================================ */ #xxl-artist-mount .artist-cover-section, html.xxl-is-app #xxl-artist-mount .artist-cover-section { padding: 80px 24px 80px; position: relative; z-index: 0; } #xxl-artist-mount .cover-stage, html.xxl-is-app #xxl-artist-mount .cover-stage { display: flex; justify-content: center; align-items: center; margin: 36px auto 0; max-width: 720px; } #xxl-artist-mount .cover-trigger, html.xxl-is-app #xxl-artist-mount .cover-trigger { position: relative; display: block; width: 100%; max-width: 520px; padding: 0; background: var(--white); border: var(--border-thick); border-radius: 8px; box-shadow: var(--shadow-xl); cursor: zoom-in; transform: rotate(-1.5deg); transition: transform 0.18s ease, box-shadow 0.18s ease; overflow: hidden; font-family: inherit; } #xxl-artist-mount .cover-trigger:hover, html.xxl-is-app #xxl-artist-mount .cover-trigger:hover { transform: translate(-3px, -3px) rotate(0deg); } #xxl-artist-mount .cover-frame-img, html.xxl-is-app #xxl-artist-mount .cover-frame-img { display: block; width: 100%; height: auto; } #xxl-artist-mount .cover-zoom-hint, html.xxl-is-app #xxl-artist-mount .cover-zoom-hint { position: absolute; right: 16px; bottom: 16px; display: inline-flex; align-items: center; gap: 10px; font-family: var(--font-display); font-size: clamp(1.4rem, 2.2vw, 1.9rem); letter-spacing: 0.08em; text-transform: uppercase; background: var(--black); color: var(--yellow); padding: 10px 20px 8px; border-radius: 6px; box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.5); transform: rotate(2deg); } #xxl-artist-mount .cover-zoom-hint svg, html.xxl-is-app #xxl-artist-mount .cover-zoom-hint svg { width: 22px; height: 22px; fill: var(--yellow); } @media (max-width: 640px) { #xxl-artist-mount .artist-cover-section, html.xxl-is-app #xxl-artist-mount .artist-cover-section { padding: 50px 16px; } #xxl-artist-mount .cover-zoom-hint, html.xxl-is-app #xxl-artist-mount .cover-zoom-hint { right: 10px; bottom: 10px; padding: 7px 14px 5px; gap: 6px; } #xxl-artist-mount .cover-zoom-hint svg, html.xxl-is-app #xxl-artist-mount .cover-zoom-hint svg { width: 18px; height: 18px; } } /* App always renders mobile-style */ html.xxl-is-app #xxl-artist-mount .artist-cover-section { padding: 50px 16px; } html.xxl-is-app #xxl-artist-mount .cover-zoom-hint { right: 10px; bottom: 10px; padding: 7px 14px 5px; gap: 6px; } html.xxl-is-app #xxl-artist-mount .cover-zoom-hint svg { width: 18px; height: 18px; } /* ─── GENERIC IMAGE LIGHTBOX MODAL ─── Triggered by any element with [data-image-src]. Body-level after JS moves it; unscoped so it works regardless of WP wrapper. */ .image-modal { display: none; position: fixed; inset: 0; z-index: 99999; background: rgba(0, 0, 0, 0.92); align-items: center; justify-content: center; padding: 40px 24px; } .image-modal.is-open { display: flex; } .image-modal-content { position: relative; max-width: 92vw; max-height: 88vh; display: flex; align-items: center; justify-content: center; } .image-modal-img { display: block; max-width: 92vw; max-height: 88vh; width: auto; height: auto; border: 5px solid #1a1a1a; border-radius: 6px; box-shadow: 12px 12px 0 #1a1a1a; background: #ffffff; } .image-modal-close { position: absolute; top: 18px; right: 18px; width: 50px; height: 50px; background: #fece26; color: #1a1a1a; border: 5px solid #1a1a1a; border-radius: 50%; font-family: 'Mouse Memoirs', 'Bangers', cursive; font-size: 5rem; cursor: pointer; box-shadow: 4px 4px 0 #1a1a1a; display: flex; align-items: center; justify-content: center; z-index: 1; line-height: 1; } /* :hover wrapped in (hover: hover) so touch devices don't trigger a "phantom hover" on first tap (which would require a second tap to actually close) */ @media (hover: hover) { .image-modal-close:hover { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 #1a1a1a; } } @media (max-width: 720px) { .image-modal-close { width: 42px; height: 42px; font-size: 1.7rem; border-width: 4px; box-shadow: 3px 3px 0 #1a1a1a; } .image-modal { padding: 20px 14px; } } /* ============================================================ LOCKED-NOTICE (preview phase only) Stands in for the stats / truth / cypher sections during pre-launch. ============================================================ */ #xxl-artist-mount .artist-locked-notice { padding: 100px 24px; text-align: center; } #xxl-artist-mount .artist-locked-notice .section-title { font-size: clamp(2.6rem, 5vw, 4.5rem); } html.xxl-is-app #xxl-artist-mount .artist-locked-notice { padding: 70px 18px; } html.xxl-is-app #xxl-artist-mount .artist-locked-notice .section-title { font-size: 2.4rem; } /* ============================================================ TOWNSQUARE WORDPRESS HOST OVERRIDES These intentionally target page chrome OUTSIDE the mount so the WP post title and default content padding don't interfere with the full-bleed artist-page layout. Each selector is :has()-scoped to ONLY apply on pages that include #xxl-artist-mount, so this CSS file is safe to share across the site. ============================================================ */ /* Reset z-index on host page chrome so our parallax / modals can sit on top */ body:has(#xxl-artist-mount) section, body:has(#xxl-artist-mount) .divider, body:has(#xxl-artist-mount) .footer-inner { z-index: 0; } /* Hide the WP-generated page title — the artist hero is the title */ .page-header:has(+ * #xxl-artist-mount), body:has(#xxl-artist-mount) .page-header, body:has(#xxl-artist-mount) h1.article, body:has(#xxl-artist-mount) h2.article { display: none; } /* Zero out mobile-side padding from the WP / theme so the hero goes full-bleed */ .mobile .post:has(#xxl-artist-mount) .content-wrap, .mobile .main-content > .wrapper.post-wrapper:has(#xxl-artist-mount) .content, body:has(#xxl-artist-mount) { padding: 0; } /* In the app webview, the article wrapper paints its own background; clear it */ .mainContent article:has(#xxl-artist-mount) { background-color: unset; } /* ============================================================ PAGE-LEVEL OVERFLOW GUARD When the artist mount is on the page, lock horizontal overflow at the html + body level. (iOS Safari ignores overflow-x on body alone, so we set it on too via :has().) The mount itself also has overflow-x: clip — these are belt-and-suspenders. ============================================================ */ html:has(#xxl-artist-mount), body:has(#xxl-artist-mount) { overflow-x: hidden; /* fallback for browsers w/o `clip` */ overflow-x: clip; max-width: 100vw; } /* ============================================================ STACKING CONTEXT ISOLATION The Townsquare WP site menu (#site-menu-wrapper) is position:sticky with z-index:1. Without isolation, our mount's positioned descendants (hero number z-index:2, artist-badge z-index:6, etc.) escape the mount and compete with the menu at the page level — painting over it on scroll. `isolation: isolate` creates a self-contained stacking context for the mount so its descendants never render above the menu. Modals (.cypher-modal / .image-modal) are moved to by JS, so they sit outside this stacking context and can still cover the menu when open — which is correct (fullscreen lightboxes should). ============================================================ */ #xxl-artist-mount { isolation: isolate; } /* ============================================================ APP-ONLY: hide the duplicate article thumbnail The Townsquare mobile app webview injects a figure.article-thumbnail ABOVE .mainContent — it lives outside our mount, so a descendant selector can't reach it. We target it via the html.xxl-is-app marker the boot script adds when .mainContent is detected. Pattern documented in ~/Desktop/APP-CSS-HANDOFF.md ("When the element you want to target lives OUTSIDE .mainContent"). Pairing the JS-marker rule with a :has() variant: the JS class is added by deferred script, leaving a brief FOUC window where the figure is visible. :has(.mainContent) hides it instantly in modern webviews (iOS 15.4+ / Android WebView 105+); JS class is the fallback for older webviews. ============================================================ */ html.xxl-is-app figure.article-thumbnail:first-of-type, html:has(.mainContent) figure.article-thumbnail:first-of-type { display: none !important; } /* ============================================================ SHARE BAR — sits right below the hero on both phases Comic-shadow pill buttons matching the page's CTA style. ============================================================ */ #xxl-artist-mount .section--share { background: #fece26; padding: 26px 20px 38px; text-align: center; /* No z-index / positioning — host's `section { z-index: 0 }` rule applies so the section scrolls UNDER the website's sticky menu. */ } #xxl-artist-mount .share-inner { display: flex; flex-direction: column; align-items: center; gap: 14px; max-width: 720px; margin: 0 auto; } #xxl-artist-mount .share-label { font-family: 'Mouse Memoirs', 'Impact', sans-serif; font-size: 32px; line-height: 1; letter-spacing: 0.04em; color: #1a1a1a; text-transform: uppercase; } #xxl-artist-mount .share-buttons { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; } #xxl-artist-mount .share-btn { display: inline-flex; align-items: center; gap: 10px; padding: 10px 22px; background: #ffffff; border: 3px solid #1a1a1a; border-radius: 999px; box-shadow: 4px 4px 0 0 #1a1a1a; font-family: 'Mouse Memoirs', 'Impact', sans-serif; font-size: 22px; letter-spacing: 0.04em; color: #1a1a1a; text-decoration: none; text-transform: uppercase; cursor: pointer; transition: transform 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease; -webkit-tap-highlight-color: transparent; } @media (hover: hover) { #xxl-artist-mount .share-btn:hover { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 0 #1a1a1a; background: #fff7d6; } } #xxl-artist-mount .share-btn:focus-visible { outline: 3px dashed #485dac; outline-offset: 3px; } #xxl-artist-mount .share-btn:active { transform: translate(2px, 2px); box-shadow: 0 0 0 0 #1a1a1a; } #xxl-artist-mount .share-icon { display: block; flex: 0 0 auto; } #xxl-artist-mount .share-btn--facebook .share-icon { color: #1877F2; } #xxl-artist-mount .share-btn--twitter .share-icon { color: #1DA1F2; } @media (max-width: 600px) { #xxl-artist-mount .section--share { padding: 20px 16px 30px; } #xxl-artist-mount .share-label { font-size: 26px; } #xxl-artist-mount .share-buttons { flex-wrap: nowrap; width: 100%; gap: 10px; } #xxl-artist-mount .share-btn { flex: 1 1 0; min-width: 0; justify-content: center; font-size: 18px; padding: 8px 12px; white-space: nowrap; } } /* App webview: slightly tighter padding to match other sections in-app */ html.xxl-is-app #xxl-artist-mount .section--share { padding: 20px 16px 30px; } /* ============================================================ HIDE TOWNSQUARE'S DEFAULT SHARE BAR The WP theme injects above the article content with its own FB/Twitter/etc. buttons. Our in-page share bar replaces it. This CSS file only loads on artist posts (via the Custom HTML ), so the rule is effectively scoped to them. ============================================================ */ .social-share { display: none !important; } [id^="primis_container_div_"] > div:first-child { bottom: 50px !important; top: unset !important; } .tv-puma-logo { display: none !important; }