/* ============================================================ XXL Freshman Class 2026 — Stylesheet Fonts: Bangers (display) + Nunito (body) via Google Fonts Colors: #fece26 yellow | #485dac blue | #e772ae pink | #37a681 green ============================================================ */ @import url('https://fonts.googleapis.com/css2?family=Mouse+Memoirs&family=Nunito:wght@400;700;800;900&display=swap'); /* ─── VARIABLES ─── */ :root { --yellow: #fece26; --blue: #485dac; --pink: #e772ae; --green: #37a681; --black: #1a1a1a; --white: #ffffff; --cream: #fff5d9; --cream-2: #ffeec5; --border: 3px solid #1a1a1a; --border-thick: 5px solid #1a1a1a; --shadow: 5px 5px 0 #1a1a1a; --shadow-lg: 8px 8px 0 #1a1a1a; --shadow-xl: 12px 12px 0 #1a1a1a; --font-display: 'Mouse Memoirs', 'Bangers', cursive; --font-body: 'Nunito', sans-serif; --max-width: 1200px; } /* ─── RESET ─── */ #xxl-freshman-mount *, #xxl-freshman-mount *::before, #xxl-freshman-mount *::after { box-sizing: border-box; margin: 0; padding: 0; } /* ─── BASE ─── */ /* Prevent horizontal scroll caused by any decorations/transforms bleeding past the viewport. Targets only this page (#xxl-freshman-mount), and also via :has() because iOS Safari sometimes ignores overflow-x on body alone. */ html:has(#xxl-freshman-mount) { overflow-x: clip; max-width: 100vw; } #xxl-freshman-mount { overflow-x: hidden; /* fallback */ overflow-x: clip; /* preferred — doesn't create a scroll container */ max-width: 100vw; width: 100%; position: relative; } #xxl-freshman-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; } #xxl-freshman-mount img { display: block; max-width: 100%; height: auto; } /* ─── SECTIONS ─── */ #xxl-freshman-mount .section { position: relative; z-index: 0; padding: 100px 24px; overflow: hidden; overflow: clip; } #xxl-freshman-mount .section-header-row { text-align: center; margin-bottom: 64px; position: relative; z-index: 2; } /* Archive section: tighter spacing between header row and the scrollable strip */ #xxl-freshman-mount .section--archive .section-header-row { margin-bottom: 20px; } #xxl-freshman-mount .section-deco { position: absolute; inset: 0; pointer-events: none; z-index: 0; overflow: hidden; } /* ─── BADGES (marker-stripe / hand-cut sticker style) ─── */ #xxl-freshman-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); } #xxl-freshman-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); } /* squiggle under each badge ("The Class" / "Watch" / "The Vault") removed per request */ #xxl-freshman-mount .badge--blue { color: var(--white); } #xxl-freshman-mount .badge--pink { color: var(--white); } #xxl-freshman-mount .badge--green { color: var(--white); } #xxl-freshman-mount .badge--yellow { color: var(--black); } /* Artist section's "The Class" badge — larger than other section badges */ #xxl-freshman-mount .section--artists .badge { font-size: 2.25rem; } #xxl-freshman-mount .badge--blue::before { background: var(--blue); } #xxl-freshman-mount .badge--pink::before { background: var(--pink); } #xxl-freshman-mount .badge--green::before { background: var(--green); } #xxl-freshman-mount .badge--yellow::before { background: var(--yellow); } /* ─── SECTION TITLES ─── */ #xxl-freshman-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); } /* The italic word ("Freshmen", "Cypher", "Archives") gets a yellow fill with a chunky black outline. paint-order: stroke fill ensures the stroke is painted UNDER the fill, so visually the stroke appears only on the OUTSIDE of each letter shape — letters stay full-weight and readable at any size. */ #xxl-freshman-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); } #xxl-freshman-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; } #xxl-freshman-mount .section-title--light { color: var(--white); } /* On the cypher's blue bg, fill the em with blue so the word reads as black-outlined (fill matches background, outline + shadow do the visual work) */ #xxl-freshman-mount .section-title--light em { color: var(--blue); } #xxl-freshman-mount .section-title--light::after { background-image: url("data:image/svg+xml;utf8,"); } #xxl-freshman-mount .section-subtitle { font-size: 1.6rem; font-weight: 800; color: var(--black); margin-top: 14px; } /* ─── PARALLAX BACKGROUND CONTAINERS ─── */ #xxl-freshman-mount .parallax-bg { position: absolute; inset: 0; pointer-events: none; overflow: hidden; z-index: 0; } /* ─── BLOBS ─── */ #xxl-freshman-mount .blob { position: absolute; border: var(--border); opacity: 0.65; will-change: transform; } /* Header blobs */ #xxl-freshman-mount .blob--a { width: 540px; height: 540px; background: var(--yellow); top: -150px; left: -130px; border-radius: 40% 60% 70% 30% / 40% 50% 60% 50%; } #xxl-freshman-mount .blob--b { width: 400px; height: 400px; background: var(--pink); top: 30px; right: -110px; border-radius: 70% 30% 50% 50% / 30% 60% 40% 70%; } #xxl-freshman-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; } /* Footer blobs */ #xxl-freshman-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; } #xxl-freshman-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; } /* ─── DECORATIVE ELEMENTS (splats, bolts, squiggles, swirls, zigzags, pluses) ─── */ #xxl-freshman-mount .deco-star, #xxl-freshman-mount .deco-bolt, #xxl-freshman-mount .deco-squiggle, #xxl-freshman-mount .deco-swirl, #xxl-freshman-mount .deco-zigzag, #xxl-freshman-mount .deco-plus { position: absolute; overflow: visible; will-change: transform; } /* Splat (uses .deco-star class for backwards compat) */ #xxl-freshman-mount .deco-star polygon { stroke: var(--black); stroke-width: 4; } #xxl-freshman-mount .deco-bolt polygon { stroke: var(--black); stroke-width: 4; fill: var(--yellow); } #xxl-freshman-mount .deco-plus polygon { stroke: var(--black); stroke-width: 4; } /* Swirls — for sections on light bg */ #xxl-freshman-mount .deco-swirl path { stroke: var(--black); } /* Swirls inside dark sections (cypher, footer) override stroke to white */ #xxl-freshman-mount .section--cypher .deco-swirl path, #xxl-freshman-mount .section--footer .deco-swirl path, #xxl-freshman-mount .section--cypher .deco-zigzag polyline, #xxl-freshman-mount .section--footer .deco-zigzag polyline { stroke: var(--white); opacity: 0.5; } /* Header decorations — pushed to edges and corners so they don't overlap the logo or intro */ #xxl-freshman-mount .star--h1 { width: 110px; height: 110px; top: 8%; right: 4%; } #xxl-freshman-mount .star--h1 polygon { fill: var(--yellow); } #xxl-freshman-mount .star--h2 { width: 80px; height: 80px; bottom: 6%; right: 8%; } #xxl-freshman-mount .star--h2 polygon { fill: var(--pink); } #xxl-freshman-mount .deco-bolt--h1 { width: 55px; height: 110px; top: 14%; left: 3%; transform: rotate(-18deg); } #xxl-freshman-mount .deco-squiggle--h1 { width: 180px; height: 26px; bottom: 8%; left: 4%; transform: rotate(12deg); } #xxl-freshman-mount .deco-swirl--h1 { width: 95px; height: 95px; top: 4%; left: 7%; transform: rotate(-22deg); } #xxl-freshman-mount .deco-zigzag--h1 { width: 200px; height: 24px; bottom: 22%; right: 3%; transform: rotate(-7deg); } #xxl-freshman-mount .deco-plus--h1 { width: 56px; height: 56px; top: 35%; right: 6%; fill: var(--green); transform: rotate(20deg); } /* Artists section — additional shapes scattered between rows on the side margins */ #xxl-freshman-mount .deco-float--swirl-a { width: 90px; height: 90px; top: 38%; right: 1.5%; transform: rotate(28deg); } #xxl-freshman-mount .deco-float--swirl-b { width: 80px; height: 80px; bottom: 22%; left: 1%; transform: rotate(-38deg); } #xxl-freshman-mount .deco-float--zigzag-a { width: 180px; height: 22px; top: 70%; left: 2%; transform: rotate(-14deg); } #xxl-freshman-mount .deco-float--zigzag-b { width: 160px; height: 22px; top: 52%; right: 2%; transform: rotate(15deg); } #xxl-freshman-mount .deco-float--plus-a { width: 50px; height: 50px; top: 78%; right: 8%; fill: var(--pink); transform: rotate(15deg); } /* Cypher — additional shapes */ #xxl-freshman-mount .deco-float--c4 { width: 90px; height: 90px; top: 38%; left: 5%; transform: rotate(-15deg); opacity: 0.5; } #xxl-freshman-mount .deco-float--c5 { width: 220px; height: 26px; bottom: 18%; left: 8%; transform: rotate(-6deg); opacity: 0.5; } #xxl-freshman-mount .deco-float--c6 { width: 50px; height: 50px; top: 22%; right: 14%; fill: var(--yellow); transform: rotate(15deg); } /* Archive — additional shapes */ #xxl-freshman-mount .deco-float--a3 { width: 110px; height: 110px; top: 65%; right: 5%; transform: rotate(-20deg); } #xxl-freshman-mount .deco-float--a4 { width: 220px; height: 26px; top: 18%; left: 8%; transform: rotate(6deg); } #xxl-freshman-mount .deco-float--a5 { width: 56px; height: 56px; bottom: 8%; left: 10%; fill: var(--green); transform: rotate(20deg); } /* Footer — additional shapes */ #xxl-freshman-mount .deco-float--f2 { width: 100px; height: 100px; top: 18%; right: 8%; transform: rotate(20deg); } #xxl-freshman-mount .deco-float--f3 { width: 220px; height: 26px; bottom: 14%; left: 10%; transform: rotate(-6deg); } #xxl-freshman-mount .deco-float--f4 { width: 56px; height: 56px; bottom: 28%; right: 18%; fill: var(--pink); transform: rotate(15deg); } /* Floating decorations in artists section — far edges only. deco-float--1 (green splat) is pushed well below the first artist's "01" number. */ #xxl-freshman-mount .deco-float--1 { width: 80px; height: 80px; top: 28%; left: 1%; } #xxl-freshman-mount .deco-float--1 polygon { fill: var(--green); } #xxl-freshman-mount .deco-float--2 { width: 45px; height: 90px; top: 18%; right: 1.5%; transform: rotate(22deg); } #xxl-freshman-mount .deco-float--3 { width: 160px; height: 24px; bottom: 5%; left: 2%; transform: rotate(-12deg); } /* Cypher floating decos */ #xxl-freshman-mount .deco-float--c1 { width: 90px; height: 90px; top: 8%; left: 6%; } #xxl-freshman-mount .deco-float--c1 polygon { fill: var(--yellow); } #xxl-freshman-mount .deco-float--c2 { width: 70px; height: 70px; bottom: 12%; right: 8%; } #xxl-freshman-mount .deco-float--c2 polygon { fill: var(--pink); } #xxl-freshman-mount .deco-float--c3 { width: 50px; height: 100px; top: 30%; right: 5%; transform: rotate(20deg); } /* Archive floating decos */ #xxl-freshman-mount .deco-float--a1 { width: 80px; height: 80px; top: 12%; right: 6%; } #xxl-freshman-mount .deco-float--a1 polygon { fill: var(--blue); } #xxl-freshman-mount .deco-float--a2 { width: 200px; height: 30px; bottom: 30%; left: 4%; transform: rotate(-6deg); } /* Footer stars/bolts */ #xxl-freshman-mount .star--f1 { width: 110px; height: 110px; top: 50px; left: 18%; animation: spin-slow 22s linear infinite; } #xxl-freshman-mount .star--f1 polygon { fill: var(--yellow); } #xxl-freshman-mount .star--f2 { width: 65px; height: 65px; bottom: 70px; right: 15%; animation: spin-slow 32s linear infinite reverse; } #xxl-freshman-mount .star--f2 polygon { fill: var(--pink); } #xxl-freshman-mount .deco-float--f1 { width: 50px; height: 100px; top: 30%; right: 8%; transform: rotate(-15deg); } @keyframes spin-slow { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } /* ─── SECTION DIVIDERS — solid color band, thick black borders, chaotic interior ─── */ #xxl-freshman-mount .divider { position: relative; height: 90px; z-index: 0; border-top: var(--border-thick); border-bottom: var(--border-thick); overflow: hidden; overflow: clip; } #xxl-freshman-mount .divider--blue { background: var(--blue); } #xxl-freshman-mount .divider--green { background: var(--green); } #xxl-freshman-mount .divider--pink { background: var(--pink); } /* Pink divider variant with the merch CTA — tee bursts out of the pink band */ #xxl-freshman-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; } /* Tee + button container — row-reverse puts button on left, tee on right */ #xxl-freshman-mount .merch-stage { position: relative; z-index: 4; display: flex; flex-direction: row-reverse; align-items: center; justify-content: center; gap: 40px; } /* T-shirt image — much bigger now so it busts out of the divider band */ #xxl-freshman-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)); } /* ─── MERCH BUTTON in the pink divider ─── */ #xxl-freshman-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; } #xxl-freshman-mount .merch-arrow { display: inline-block; transition: transform 0.2s ease; } /* Big starburst behind the button — gives the button a "blew out of nowhere" energy */ #xxl-freshman-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; } @keyframes merch-burst-spin { from { transform: rotate(8deg); } to { transform: rotate(368deg); } } #xxl-freshman-mount .merch-btn:hover { transform: rotate(-1.5deg) translate(-3px, -3px); box-shadow: 12px 12px 0 var(--black); } #xxl-freshman-mount .merch-btn:hover .merch-arrow { transform: translateX(6px); } #xxl-freshman-mount .divider-pattern { position: absolute; inset: 0; } /* Each pattern stacks 3+ different shapes (bolts, squiggles, swirls) at varied sizes + offsets so the divider feels chaotic instead of grid-aligned. */ /* BLUE divider — repeating white bolts only */ #xxl-freshman-mount .divider-pattern--bolts { background-image: url("data:image/svg+xml;utf8,"); background-size: 25px; background-repeat: repeat; background-position: center; } /* GREEN divider — repeating white wavy squiggles only */ #xxl-freshman-mount .divider-pattern--squiggles { background-image: url("data:image/svg+xml;utf8,"); background-size: 65px; background-repeat: repeat; background-position: center; } /* PINK divider — repeating black swirl loops only */ #xxl-freshman-mount .divider-pattern--swirls { background-image: url("data:image/svg+xml;utf8,"); background-size: 45px; background-repeat: repeat; background-position: center; } /* ─── ────────────────── HEADER ────────────────── ─── */ #xxl-freshman-mount .section--header { min-height: auto; display: flex; align-items: center; justify-content: center; padding: 20px 24px 90px; } #xxl-freshman-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; } #xxl-freshman-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; } #xxl-freshman-mount .header-logo, #xxl-freshman-mount .header-logo-wrap picture, #xxl-freshman-mount .header-logo-wrap img { display: block; width: 100%; max-width: 820px; height: auto; margin: 0 auto; } #xxl-freshman-mount .header-logo-wrap img { filter: drop-shadow(6px 6px 0 rgba(26, 26, 26, 0.75)); } @keyframes logo-wobble { 0%, 100% { transform: rotate(-1deg) scale(1); } 50% { transform: rotate(1.5deg) scale(1.02); } } #xxl-freshman-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; } #xxl-freshman-mount .title-xxl { font-size: clamp(5rem, 18vw, 11rem); color: var(--black); display: block; text-shadow: 6px 6px 0 var(--yellow); } #xxl-freshman-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); } #xxl-freshman-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); } #xxl-freshman-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); } #xxl-freshman-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; } /* ─── ────────────────── ARTISTS — vertical alternating ────────────────── ─── */ #xxl-freshman-mount .section--artists { background: transparent; padding-top: 70px; padding-bottom: 70px; } #xxl-freshman-mount .artists-vertical { max-width: 1100px; margin: 0 auto; position: relative; z-index: 2; } #xxl-freshman-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); } #xxl-freshman-mount .artist-row.is-visible { opacity: 1; transform: translateY(0); } #xxl-freshman-mount .artist-row:last-child { margin-bottom: 20px; } #xxl-freshman-mount .artist-row[data-side="left"] .artist-image-side { grid-column: 1; grid-row: 1; } #xxl-freshman-mount .artist-row[data-side="left"] .artist-info-side { grid-column: 2; grid-row: 1; } #xxl-freshman-mount .artist-row[data-side="right"] .artist-image-side { grid-column: 2; grid-row: 1; } #xxl-freshman-mount .artist-row[data-side="right"] .artist-info-side { grid-column: 1; grid-row: 1; text-align: right; } #xxl-freshman-mount .artist-row[data-side="right"] .artist-info-side .artist-bio { margin-left: auto; } /* Numbers removed per request — keeping CSS for easy revert */ #xxl-freshman-mount .artist-number { display: none; } #xxl-freshman-mount .artist-row[data-side="left"] .artist-number { left: -10px; } #xxl-freshman-mount .artist-row[data-side="right"] .artist-number { right: -10px; } /* Image side */ #xxl-freshman-mount .artist-image-side { position: relative; padding: 20px; } /* Spike-shaped blob behind each artist image. Hidden behind the frame at rest (small scale), grows and pokes out on row hover. */ #xxl-freshman-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); } #xxl-freshman-mount .artist-row[data-color="yellow"] .artist-blob { background: var(--yellow); } #xxl-freshman-mount .artist-row[data-color="blue"] .artist-blob { background: var(--blue); } #xxl-freshman-mount .artist-row[data-color="pink"] .artist-blob { background: var(--pink); } #xxl-freshman-mount .artist-row[data-color="green"] .artist-blob { background: var(--green); } /* Frame border + drop-shadow match the spike color of each row; background matches so sub-pixel gaps at rotated corners blend in. */ #xxl-freshman-mount .artist-row[data-color="yellow"] .artist-img-frame { border-color: var(--yellow); box-shadow: 12px 12px 0 var(--yellow); background: var(--yellow); } #xxl-freshman-mount .artist-row[data-color="blue"] .artist-img-frame { border-color: var(--blue); box-shadow: 12px 12px 0 var(--blue); background: var(--blue); } #xxl-freshman-mount .artist-row[data-color="pink"] .artist-img-frame { border-color: var(--pink); box-shadow: 12px 12px 0 var(--pink); background: var(--pink); } #xxl-freshman-mount .artist-row[data-color="green"] .artist-img-frame { border-color: var(--green); box-shadow: 12px 12px 0 var(--green); background: var(--green); } /* Mirror the spike on right-side rows so adjacent rows look distinct */ #xxl-freshman-mount .artist-row[data-side="right"] .artist-blob { transform: scale(0.55) scaleX(-1); } #xxl-freshman-mount .artist-row:hover .artist-blob { transform: scale(1.18) rotate(6deg); } #xxl-freshman-mount .artist-row[data-side="right"]:hover .artist-blob { transform: scale(1.18) scaleX(-1) rotate(-6deg); } #xxl-freshman-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(--black); font-size: 0; line-height: 0; } #xxl-freshman-mount .artist-row[data-side="right"] .artist-img-frame { transform: rotate(2deg); } #xxl-freshman-mount .artist-row:hover .artist-img-frame { transform: rotate(0deg) scale(1.02); } #xxl-freshman-mount .artist-img-frame img:not(.artist-badge) { display: block; width: 100%; height: auto; object-fit: cover; } /* The image is wrapped in an so the whole frame is clickable */ #xxl-freshman-mount .artist-link { display: block; text-decoration: none; color: inherit; position: relative; z-index: 2; } /* Starburst-shaped overlay badge on top-right of artist images (used on the 10th Spot Winner and Cypher Producer artists) */ #xxl-freshman-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; } #xxl-freshman-mount .artist-badge .badge-line-1 { display: block; font-size: 0.95em; } #xxl-freshman-mount .artist-badge .badge-line-2 { display: block; font-size: 1.15em; } /* Variants */ #xxl-freshman-mount .artist-badge--winner { background: #ed1b24; color: var(--white); } /* Winner image badge — the 10thspotwinner.png is the starburst shape itself; clear the CSS clip-path, background and text layout from the base rule. 75px matches the visual weight of the clipped 130px text starburst. */ #xxl-freshman-mount .artist-badge--winner-img { clip-path: none; background: none; padding: 0; object-fit: contain; width: 125px; height: 125px; top: -20px; right: -20px; } /* Producer image badge — same treatment as winner-img */ #xxl-freshman-mount .artist-badge--producer-img { clip-path: none; background: none; padding: 0; object-fit: contain; width: 125px; height: 125px; top: -20px; right: -20px; } #xxl-freshman-mount .artist-badge--producer { background: var(--yellow); color: var(--black); transform: rotate(10deg); } @keyframes badge-wobble { 0%, 100% { transform: rotate(-12deg) scale(1); } 50% { transform: rotate(-8deg) scale(1.05); } } #xxl-freshman-mount .artist-badge--producer { animation-name: badge-wobble-rev; } @keyframes badge-wobble-rev { 0%, 100% { transform: rotate(10deg) scale(1); } 50% { transform: rotate(6deg) scale(1.05); } } /* Artist CTA button — links to individual artist page */ #xxl-freshman-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; } #xxl-freshman-mount .artist-cta::after { content: '\2192'; display: inline-block; transition: transform 0.2s ease; } #xxl-freshman-mount .artist-cta:hover { transform: translate(-2px, -2px) rotate(-1deg); box-shadow: 8px 8px 0 var(--black); } #xxl-freshman-mount .artist-cta:hover::after { transform: translateX(4px); } #xxl-freshman-mount .artist-row[data-color="yellow"] .artist-cta { background: var(--yellow); color: var(--black); } #xxl-freshman-mount .artist-row[data-color="blue"] .artist-cta { background: var(--blue); color: var(--white); } #xxl-freshman-mount .artist-row[data-color="pink"] .artist-cta { background: var(--pink); color: var(--white); } #xxl-freshman-mount .artist-row[data-color="green"] .artist-cta { background: var(--green); color: var(--white); } /* Decorative element near image */ #xxl-freshman-mount .artist-deco-star, #xxl-freshman-mount .artist-deco-bolt { position: absolute; z-index: 3; overflow: visible; filter: drop-shadow(3px 3px 0 var(--black)); } #xxl-freshman-mount .artist-deco-star { width: 80px; height: 80px; top: -10px; right: -5px; } #xxl-freshman-mount .artist-deco-star polygon { stroke: var(--black); stroke-width: 4; } #xxl-freshman-mount .artist-row[data-side="left"] .artist-deco-star { right: -5px; top: -5px; } #xxl-freshman-mount .artist-row[data-side="right"] .artist-deco-star { left: -5px; right: auto; top: -5px; } #xxl-freshman-mount .artist-row[data-color="yellow"] .artist-deco-star polygon { fill: var(--pink); } #xxl-freshman-mount .artist-row[data-color="pink"] .artist-deco-star polygon { fill: var(--yellow); } #xxl-freshman-mount .artist-deco-bolt { width: 50px; height: 100px; top: -25px; filter: drop-shadow(3px 3px 0 var(--black)); transform: rotate(-15deg); } #xxl-freshman-mount .artist-row[data-side="left"] .artist-deco-bolt { right: -10px; } #xxl-freshman-mount .artist-row[data-side="right"] .artist-deco-bolt { left: -10px; } #xxl-freshman-mount .artist-row[data-color="blue"] .artist-deco-bolt polygon { fill: var(--yellow); } #xxl-freshman-mount .artist-row[data-color="green"] .artist-deco-bolt polygon { fill: var(--yellow); } /* Info side */ #xxl-freshman-mount .artist-info-side { position: relative; z-index: 2; } #xxl-freshman-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); } /* Scale the ★ to match the cap height of Mouse Memoirs — the unicode star is served from a fallback font and renders shorter than the display letters, so we bump it 1.35x and nudge alignment so it sits on the same baseline. */ #xxl-freshman-mount .artist-tag .tag-star { display: inline-block; font-size: 1.35em; line-height: 0.7; vertical-align: -0.03em; margin-right: 0.05em; } #xxl-freshman-mount .artist-row[data-side="right"] .artist-tag { transform: rotate(2deg); } #xxl-freshman-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; } /* Artist name drop-shadow per row color. Blue rows get a LIGHTER blue (#7a8eda) so the dark name + dark shadow combo doesn't muddy together. */ #xxl-freshman-mount .artist-row[data-color="blue"] .artist-name { text-shadow: 4px 4px 0 #7a8eda; color: var(--black); } #xxl-freshman-mount .artist-row[data-color="pink"] .artist-name { text-shadow: 4px 4px 0 var(--pink); } #xxl-freshman-mount .artist-row[data-color="green"] .artist-name { text-shadow: 4px 4px 0 var(--green); } #xxl-freshman-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); } #xxl-freshman-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; } #xxl-freshman-mount .artist-squiggle { width: 200px; height: 20px; display: block; margin-top: 28px; } #xxl-freshman-mount .artist-row[data-side="right"] .artist-squiggle { margin-left: auto; } /* ─── ────────────────── CYPHER / TV ────────────────── ─── */ #xxl-freshman-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; } #xxl-freshman-mount .tv-wrap { max-width: 700px; margin: 0 auto; position: relative; z-index: 2; } #xxl-freshman-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)); } @keyframes pulse-rotate { 0%, 100% { transform: rotate(8deg) scale(1); } 50% { transform: rotate(-4deg) scale(1.08); } } #xxl-freshman-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; } #xxl-freshman-mount .tv-antennas { display: flex; justify-content: center; align-items: flex-end; height: 80px; position: relative; margin-bottom: -3px; } #xxl-freshman-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; } #xxl-freshman-mount .antenna { position: absolute; bottom: 15px; width: 7px; background: var(--black); border-radius: 4px; } #xxl-freshman-mount .antenna--left { height: 68px; left: calc(50% - 26px); transform-origin: bottom center; transform: rotate(-28deg); } #xxl-freshman-mount .antenna--right { height: 68px; left: calc(50% + 19px); transform-origin: bottom center; transform: rotate(28deg); } #xxl-freshman-mount .tv-body { background: var(--yellow); border: var(--border-thick); border-radius: 18px 18px 14px 14px; padding: 18px 18px 16px; position: relative; } #xxl-freshman-mount .tv-screen-wrap { background: #000; border: var(--border-thick); border-radius: 10px; overflow: hidden; aspect-ratio: 16 / 9; } #xxl-freshman-mount .tv-screen-wrap { position: relative; } #xxl-freshman-mount .tv-screen-wrap iframe { width: 100%; height: 100%; display: block; } /* "Coming Soon" placeholder — fills the TV screen until videos are loaded */ #xxl-freshman-mount .tv-screen-wrap .tv-coming-soon { position: absolute; inset: 0; background: #000; display: flex; align-items: center; justify-content: center; text-align: center; padding: 20px; } #xxl-freshman-mount .tv-coming-soon span { font-family: 'Mouse Memoirs', 'Impact', sans-serif; font-size: clamp(28px, 6vw, 64px); letter-spacing: 0.06em; text-transform: uppercase; color: #fece26; text-shadow: 3px 3px 0 #1a1a1a; } /* Fullscreen / expand button overlay — sits on top of the TV screen */ #xxl-freshman-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; } #xxl-freshman-mount .tv-fullscreen-btn:hover, #xxl-freshman-mount .tv-fullscreen-btn:focus-visible { background: rgba(0, 0, 0, 0.92); transform: scale(1.06); outline: none; } #xxl-freshman-mount .tv-fullscreen-btn svg { width: 18px; height: 18px; } /* ─── CYPHER LIGHTBOX MODAL — used for both desktop AND mobile ─── */ .cypher-modal { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.55); z-index: 99999; display: flex; align-items: center; justify-content: center; padding: 60px 40px; } .cypher-modal[hidden] { display: none; } .cypher-modal .modal-content { width: 100%; max-width: 960px; aspect-ratio: 16 / 9; background: #000; border-radius: 6px; overflow: hidden; box-shadow: 0 24px 70px rgba(0, 0, 0, 0.5); } .cypher-modal .modal-iframe { width: 100%; height: 100%; display: block; border: none; } .cypher-modal .modal-close { position: absolute; top: 24px; right: 24px; width: 64px; height: 64px; padding: 0; background: var(--white); color: var(--black); border: 5px solid var(--black); border-radius: 50%; font-family: var(--font-display); font-size: 4.2rem; font-weight: 700; line-height: 1; cursor: pointer; box-shadow: 6px 6px 0 var(--black); transition: transform 0.15s ease; z-index: 1; } /* :hover wrapped so touch devices don't need two taps */ @media (hover: hover) { .cypher-modal .modal-close:hover { transform: rotate(8deg) scale(1.08); outline: none; } } .cypher-modal .modal-close:focus-visible { transform: rotate(8deg) scale(1.08); outline: none; } @media (max-width: 640px) { /* Hide the custom expand button on mobile — YouTube's native fullscreen button (in the player's chrome) gives a better mobile experience. */ #xxl-freshman-mount .tv-fullscreen-btn { display: none; } /* Modal styles below kept as a safety net (e.g. desktop browser resized to mobile width with the modal already open) but the modal won't open from mobile interactions. */ .cypher-modal { padding: 16px; } .cypher-modal .modal-content { max-width: 100%; } .cypher-modal .modal-close { top: 14px; right: 14px; width: 50px; height: 50px; font-size: 3rem; border-width: 4px; box-shadow: 4px 4px 0 var(--black); } } #xxl-freshman-mount .tv-controls { display: flex; align-items: center; gap: 14px; margin-top: 14px; padding: 0 4px; } #xxl-freshman-mount .tv-knobs { display: flex; align-items: center; gap: 10px; } #xxl-freshman-mount .knob { background: #111; border-radius: 50%; border: 3px solid #444; position: relative; flex-shrink: 0; } #xxl-freshman-mount .knob::after { content: ''; position: absolute; top: 50%; left: 50%; width: 3px; height: 38%; background: #777; transform: translate(-50%, -50%); border-radius: 2px; } #xxl-freshman-mount .knob--big { width: 38px; height: 38px; } #xxl-freshman-mount .knob--small { width: 26px; height: 26px; } #xxl-freshman-mount .tv-speaker { flex: 1; display: flex; flex-direction: column; gap: 5px; } #xxl-freshman-mount .speaker-row { display: flex; gap: 5px; } #xxl-freshman-mount .speaker-dot { width: 7px; height: 7px; background: var(--black); border-radius: 50%; opacity: 0.6; } #xxl-freshman-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; } /* Puma Suede sponsor logo — sits inline between the speaker and XXL TV brand */ #xxl-freshman-mount .tv-puma-logo { display: block; width: 200px; height: auto; margin: 0 10px; flex-shrink: 0; } @media (max-width: 640px) { #xxl-freshman-mount .tv-puma-logo { width: 120px; margin: 0 6px; } } #xxl-freshman-mount .tv-brand i { font-style: italic; } #xxl-freshman-mount .tv-legs { display: flex; justify-content: space-around; padding: 0 80px; } #xxl-freshman-mount .tv-leg { width: 22px; height: 32px; background: var(--black); border-radius: 0 0 6px 6px; position: relative; } #xxl-freshman-mount .tv-leg::after { content: ''; position: absolute; bottom: 0; left: -8px; width: 38px; height: 7px; background: var(--black); border-radius: 4px; } /* ─── CYPHER REMOTE — vertical remote shell, held by a cartoon hand ─── */ #xxl-freshman-mount .remote-stage { position: relative; margin: 50px auto 0; max-width: 700px; } #xxl-freshman-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; } #xxl-freshman-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; } #xxl-freshman-mount .remote-brand i { font-style: italic; } #xxl-freshman-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; } #xxl-freshman-mount .remote-buttons { display: flex; flex-direction: row; flex-wrap: nowrap; gap: 8px; margin-bottom: 14px; justify-content: space-between; } #xxl-freshman-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; } #xxl-freshman-mount .channel-btn .ch-num { font-family: var(--font-display); font-size: 2.6rem; line-height: 1; color: var(--black); letter-spacing: 0.04em; } #xxl-freshman-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%; } #xxl-freshman-mount .channel-btn:hover { transform: translate(-2px, -2px) rotate(-1.5deg); box-shadow: 8px 8px 0 var(--black); background: var(--yellow); } #xxl-freshman-mount .channel-btn.is-active { background: var(--yellow); transform: translate(2px, 2px) rotate(1deg); box-shadow: 2px 2px 0 var(--black); } #xxl-freshman-mount .channel-btn.is-active .ch-num { color: var(--black); } #xxl-freshman-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; } #xxl-freshman-mount .now-playing-title { color: var(--blue); font-family: var(--font-display); font-size: 2.05rem; letter-spacing: 0.05em; margin-left: 4px; } #xxl-freshman-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; } /* Make sure the remote's own bottom-corners curve plays nicely with the fingers gripping over them — the hand has its own outline so they read as separate. */ /* ─── ────────────────── ARCHIVE ────────────────── ─── */ #xxl-freshman-mount .section--archive { background: transparent; } #xxl-freshman-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; } #xxl-freshman-mount .archive-scroll-outer:active { cursor: grabbing; } #xxl-freshman-mount .archive-scroll-outer::-webkit-scrollbar { height: 6px; } #xxl-freshman-mount .archive-scroll-outer::-webkit-scrollbar-track { background: rgba(0,0,0,0.1); border-radius: 3px; } #xxl-freshman-mount .archive-scroll-outer::-webkit-scrollbar-thumb { background: var(--black); border-radius: 3px; } #xxl-freshman-mount .archive-track { display: flex; gap: 22px; padding: 8px 32px; width: max-content; } #xxl-freshman-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; } #xxl-freshman-mount .archive-cover:nth-child(odd) .cover-img-wrap { transform: rotate(-1.5deg); } #xxl-freshman-mount .archive-cover:nth-child(even) .cover-img-wrap { transform: rotate(1.5deg); } #xxl-freshman-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; } #xxl-freshman-mount .cover-img-wrap img { height: 100%; width: auto; object-fit: cover; display: block; transition: transform 0.35s ease; pointer-events: none; } #xxl-freshman-mount .cover-label { display: block; text-align: center; padding: 12px 6px 0; } #xxl-freshman-mount .cover-year { font-family: var(--font-display); font-size: 1.75rem; color: var(--black); letter-spacing: 0.1em; } #xxl-freshman-mount .archive-cover:hover .cover-img-wrap { transform: rotate(0deg) translateY(-6px); box-shadow: var(--shadow-lg); } #xxl-freshman-mount .archive-cover:hover .cover-img-wrap img { transform: scale(1.04); } #xxl-freshman-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; } /* ─── ────────────────── FOOTER ────────────────── ─── */ #xxl-freshman-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; } #xxl-freshman-mount .footer-inner { position: relative; z-index: 2; } #xxl-freshman-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; } #xxl-freshman-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); } #xxl-freshman-mount .footer-sub { font-size: 1.25rem; color: #aaa; font-weight: 700; max-width: 460px; margin: 0 auto 44px; line-height: 1.7; } #xxl-freshman-mount .footer-dots { display: flex; justify-content: center; gap: 18px; } #xxl-freshman-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; } #xxl-freshman-mount .dot:hover { transform: scale(1.4) rotate(15deg); } #xxl-freshman-mount .dot--yellow { background: var(--yellow); } #xxl-freshman-mount .dot--blue { background: var(--blue); } #xxl-freshman-mount .dot--pink { background: var(--pink); } #xxl-freshman-mount .dot--green { background: var(--green); } /* ─── REVEAL (used for non-artist items) ─── */ #xxl-freshman-mount .reveal-item { opacity: 0; transform: translateY(40px); transition: opacity 0.6s ease, transform 0.6s cubic-bezier(.22,.84,.44,1); } #xxl-freshman-mount .reveal-item.is-visible { opacity: 1; transform: translateY(0); } #xxl-freshman-mount .archive-track .reveal-item { transition-delay: 0.04s; } /* ─── RESPONSIVE ─── */ @media (max-width: 900px) { #xxl-freshman-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; } #xxl-freshman-mount .artists-vertical { overflow: visible; } /* On mobile/tablet there's no hover, so show the spike already popped out */ #xxl-freshman-mount .artist-blob { transform: scale(1.15) rotate(6deg); } #xxl-freshman-mount .artist-row[data-side="right"] .artist-blob { transform: scale(1.15) scaleX(-1) rotate(-6deg); } #xxl-freshman-mount .artist-row[data-side="left"] .artist-image-side, #xxl-freshman-mount .artist-row[data-side="right"] .artist-image-side { grid-column: 1; grid-row: 1; } #xxl-freshman-mount .artist-row[data-side="left"] .artist-info-side, #xxl-freshman-mount .artist-row[data-side="right"] .artist-info-side { grid-column: 1; grid-row: 2; text-align: left; } #xxl-freshman-mount .artist-row[data-side="right"] .artist-bio, #xxl-freshman-mount .artist-row[data-side="right"] .artist-squiggle { margin-left: 0; } #xxl-freshman-mount .artist-number { top: -32px; font-size: 5rem; } #xxl-freshman-mount .artist-row[data-side="left"] .artist-number { left: 0; } #xxl-freshman-mount .artist-row[data-side="right"] .artist-number { right: 0; } } @media (max-width: 640px) { #xxl-freshman-mount .section { padding: 50px 16px; } #xxl-freshman-mount .section-header-row { margin-bottom: 36px; } #xxl-freshman-mount .header-intro { font-size: 1.3rem; padding: 18px 22px; line-height: 1.55; } #xxl-freshman-mount .header-logo { max-width: 320px; } #xxl-freshman-mount .header-inner { gap: 22px; } #xxl-freshman-mount .section-title { font-size: clamp(2.6rem, 12vw, 4rem); } #xxl-freshman-mount .badge { font-size: 1.45rem; padding: 7px 22px 5px; margin-bottom: 18px; } #xxl-freshman-mount .tv-wrap { padding: 0; } #xxl-freshman-mount .tv-antennas { height: 50px; } #xxl-freshman-mount .antenna { height: 44px; width: 5px; } #xxl-freshman-mount .antenna-base { width: 44px; height: 12px; } #xxl-freshman-mount .tv-body { padding: 12px 12px 10px; } #xxl-freshman-mount .tv-controls { gap: 10px; margin-top: 10px; } #xxl-freshman-mount .knob--big { width: 28px; height: 28px; } #xxl-freshman-mount .knob--small { width: 20px; height: 20px; } #xxl-freshman-mount .tv-brand { font-size: 1.4rem; padding: 6px 10px 4px; } #xxl-freshman-mount .tv-legs { padding: 0 50px; } #xxl-freshman-mount .tv-leg { width: 16px; height: 22px; } #xxl-freshman-mount .cover-img-wrap { height: 215px; } #xxl-freshman-mount .cover-year { font-size: 1.4rem; } #xxl-freshman-mount .section--header { padding: 20px 16px 50px; } #xxl-freshman-mount .cypher-burst { width: 110px; height: 110px; right: -20px; top: -10px; } #xxl-freshman-mount .artist-image-side { padding: 16px; } #xxl-freshman-mount .artist-img-frame { max-width: 100%; } #xxl-freshman-mount .artist-name { font-size: clamp(3.6rem, 12vw, 5rem); margin-bottom: 12px; } #xxl-freshman-mount .artist-hometown { font-size: 1.55rem; padding: 5px 18px; } #xxl-freshman-mount .artist-bio { font-size: 1.4rem; line-height: 1.55; padding: 16px 20px; } /* Mobile: float the "★ Class of '26" tag onto the bottom-right of the image, and push the artist content down so longer names don't collide with the tag */ #xxl-freshman-mount .artist-info-side { position: relative; padding-top: 42px; } #xxl-freshman-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); } #xxl-freshman-mount .artist-cta { font-size: 2rem; padding: 7px 20px 5px; } /* Remote mobile sizing */ #xxl-freshman-mount .remote-stage { margin-top: 30px; max-width: 100%; } #xxl-freshman-mount .cypher-remote { padding: 14px 12px 14px; } #xxl-freshman-mount .remote-brand { font-size: 1.95rem; } #xxl-freshman-mount .remote-eyebrow { font-size: 1.15rem; margin-bottom: 12px; padding-bottom: 8px; } #xxl-freshman-mount .remote-buttons { gap: 5px; } #xxl-freshman-mount .channel-btn { padding: 8px 4px 6px; } #xxl-freshman-mount .channel-btn .ch-num { font-size: 2rem; } #xxl-freshman-mount .channel-btn .ch-label { font-size: 0.85rem; } #xxl-freshman-mount .now-playing-title { font-size: 1.65rem; } #xxl-freshman-mount .remote-now-playing { font-size: 1.15rem; padding-top: 8px; } #xxl-freshman-mount .artist-deco-star { width: 60px; height: 60px; } #xxl-freshman-mount .artist-deco-bolt { width: 38px; height: 76px; } #xxl-freshman-mount .footer-eyebrow { font-size: 1rem; } #xxl-freshman-mount .footer-headline { font-size: clamp(3.4rem, 15vw, 5.6rem); text-shadow: 4px 4px 0 var(--pink), 8px 8px 0 var(--blue); } #xxl-freshman-mount .footer-sub { font-size: 1.1rem; margin-bottom: 32px; } #xxl-freshman-mount .dot { width: 18px; height: 18px; } #xxl-freshman-mount .divider { height: 70px; } #xxl-freshman-mount .divider--with-cta { height: auto; padding: 28px 16px; } #xxl-freshman-mount .merch-stage { flex-direction: column; gap: 0; } /* Tee: bigger, pops out the top of the divider, and the button overlays the tee's bottom so it stays clickable */ #xxl-freshman-mount .merch-tee { width: 300px; margin-top: -50px; margin-bottom: -50px; position: relative; z-index: 1; } #xxl-freshman-mount .merch-btn { position: relative; z-index: 2; } #xxl-freshman-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; } /* Reduce the giant decorative shapes scattered across sections */ #xxl-freshman-mount .deco-star, #xxl-freshman-mount .deco-bolt, #xxl-freshman-mount .deco-swirl, #xxl-freshman-mount .deco-zigzag, #xxl-freshman-mount .deco-squiggle { transform: scale(0.65); } #xxl-freshman-mount .blob { opacity: 0.45; } } @media (max-width: 400px) { #xxl-freshman-mount .cover-img-wrap { height: 188px; } #xxl-freshman-mount .header-logo { max-width: 280px; } #xxl-freshman-mount .artist-img-frame { max-width: 100%; } #xxl-freshman-mount .footer-headline { font-size: clamp(3rem, 15vw, 4.4rem); } } /* ============================================================ MOBILE APP STYLES — Townsquare app webview The app wraps post content in
(no #xxl-freshman-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-freshman-mount *, html.xxl-is-app #xxl-freshman-mount *::before, html.xxl-is-app #xxl-freshman-mount *::after { box-sizing: border-box; margin: 0; padding: 0; } html.xxl-is-app #xxl-freshman-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-freshman-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-freshman-mount img { display: block; max-width: 100%; height: auto; } html.xxl-is-app #xxl-freshman-mount .section { position: relative; z-index: 0; padding: 100px 24px; overflow: hidden; overflow: clip; } html.xxl-is-app #xxl-freshman-mount .section-header-row { text-align: center; margin-bottom: 64px; position: relative; z-index: 2; } html.xxl-is-app #xxl-freshman-mount .section--archive .section-header-row { margin-bottom: 20px; } html.xxl-is-app #xxl-freshman-mount .section-deco { position: absolute; inset: 0; pointer-events: none; z-index: 0; overflow: hidden; } html.xxl-is-app #xxl-freshman-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-freshman-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-freshman-mount .badge--blue { color: var(--white); } html.xxl-is-app #xxl-freshman-mount .badge--pink { color: var(--white); } html.xxl-is-app #xxl-freshman-mount .badge--green { color: var(--white); } html.xxl-is-app #xxl-freshman-mount .badge--yellow { color: var(--black); } html.xxl-is-app #xxl-freshman-mount .section--artists .badge { font-size: 2.25rem; } html.xxl-is-app #xxl-freshman-mount .badge--blue::before { background: var(--blue); } html.xxl-is-app #xxl-freshman-mount .badge--pink::before { background: var(--pink); } html.xxl-is-app #xxl-freshman-mount .badge--green::before { background: var(--green); } html.xxl-is-app #xxl-freshman-mount .badge--yellow::before { background: var(--yellow); } html.xxl-is-app #xxl-freshman-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-freshman-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-freshman-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-freshman-mount .section-title--light { color: var(--white); } html.xxl-is-app #xxl-freshman-mount .section-title--light em { color: var(--blue); } html.xxl-is-app #xxl-freshman-mount .section-title--light::after { background-image: url("data:image/svg+xml;utf8,"); } html.xxl-is-app #xxl-freshman-mount .section-subtitle { font-size: 1.6rem; font-weight: 800; color: var(--black); margin-top: 14px; } html.xxl-is-app #xxl-freshman-mount .parallax-bg { position: absolute; inset: 0; pointer-events: none; overflow: hidden; z-index: 0; } html.xxl-is-app #xxl-freshman-mount .blob { position: absolute; border: var(--border); opacity: 0.65; will-change: transform; } html.xxl-is-app #xxl-freshman-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-freshman-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-freshman-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-freshman-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-freshman-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-freshman-mount .deco-star, html.xxl-is-app #xxl-freshman-mount .deco-bolt, html.xxl-is-app #xxl-freshman-mount .deco-squiggle, html.xxl-is-app #xxl-freshman-mount .deco-swirl, html.xxl-is-app #xxl-freshman-mount .deco-zigzag, html.xxl-is-app #xxl-freshman-mount .deco-plus { position: absolute; overflow: visible; will-change: transform; } html.xxl-is-app #xxl-freshman-mount .deco-star polygon { stroke: var(--black); stroke-width: 4; } html.xxl-is-app #xxl-freshman-mount .deco-bolt polygon { stroke: var(--black); stroke-width: 4; fill: var(--yellow); } html.xxl-is-app #xxl-freshman-mount .deco-plus polygon { stroke: var(--black); stroke-width: 4; } html.xxl-is-app #xxl-freshman-mount .deco-swirl path { stroke: var(--black); } html.xxl-is-app #xxl-freshman-mount .section--cypher .deco-swirl path, html.xxl-is-app #xxl-freshman-mount .section--footer .deco-swirl path, html.xxl-is-app #xxl-freshman-mount .section--cypher .deco-zigzag polyline, html.xxl-is-app #xxl-freshman-mount .section--footer .deco-zigzag polyline { stroke: var(--white); opacity: 0.5; } html.xxl-is-app #xxl-freshman-mount .star--h1 { width: 110px; height: 110px; top: 8%; right: 4%; } html.xxl-is-app #xxl-freshman-mount .star--h1 polygon { fill: var(--yellow); } html.xxl-is-app #xxl-freshman-mount .star--h2 { width: 80px; height: 80px; bottom: 6%; right: 8%; } html.xxl-is-app #xxl-freshman-mount .star--h2 polygon { fill: var(--pink); } html.xxl-is-app #xxl-freshman-mount .deco-bolt--h1 { width: 55px; height: 110px; top: 14%; left: 3%; transform: rotate(-18deg); } html.xxl-is-app #xxl-freshman-mount .deco-squiggle--h1 { width: 180px; height: 26px; bottom: 8%; left: 4%; transform: rotate(12deg); } html.xxl-is-app #xxl-freshman-mount .deco-swirl--h1 { width: 95px; height: 95px; top: 4%; left: 7%; transform: rotate(-22deg); } html.xxl-is-app #xxl-freshman-mount .deco-zigzag--h1 { width: 200px; height: 24px; bottom: 22%; right: 3%; transform: rotate(-7deg); } html.xxl-is-app #xxl-freshman-mount .deco-plus--h1 { width: 56px; height: 56px; top: 35%; right: 6%; fill: var(--green); transform: rotate(20deg); } html.xxl-is-app #xxl-freshman-mount .deco-float--swirl-a { width: 90px; height: 90px; top: 38%; right: 1.5%; transform: rotate(28deg); } html.xxl-is-app #xxl-freshman-mount .deco-float--swirl-b { width: 80px; height: 80px; bottom: 22%; left: 1%; transform: rotate(-38deg); } html.xxl-is-app #xxl-freshman-mount .deco-float--zigzag-a { width: 180px; height: 22px; top: 70%; left: 2%; transform: rotate(-14deg); } html.xxl-is-app #xxl-freshman-mount .deco-float--zigzag-b { width: 160px; height: 22px; top: 52%; right: 2%; transform: rotate(15deg); } html.xxl-is-app #xxl-freshman-mount .deco-float--plus-a { width: 50px; height: 50px; top: 78%; right: 8%; fill: var(--pink); transform: rotate(15deg); } html.xxl-is-app #xxl-freshman-mount .deco-float--c4 { width: 90px; height: 90px; top: 38%; left: 5%; transform: rotate(-15deg); opacity: 0.5; } html.xxl-is-app #xxl-freshman-mount .deco-float--c5 { width: 220px; height: 26px; bottom: 18%; left: 8%; transform: rotate(-6deg); opacity: 0.5; } html.xxl-is-app #xxl-freshman-mount .deco-float--c6 { width: 50px; height: 50px; top: 22%; right: 14%; fill: var(--yellow); transform: rotate(15deg); } html.xxl-is-app #xxl-freshman-mount .deco-float--a3 { width: 110px; height: 110px; top: 65%; right: 5%; transform: rotate(-20deg); } html.xxl-is-app #xxl-freshman-mount .deco-float--a4 { width: 220px; height: 26px; top: 18%; left: 8%; transform: rotate(6deg); } html.xxl-is-app #xxl-freshman-mount .deco-float--a5 { width: 56px; height: 56px; bottom: 8%; left: 10%; fill: var(--green); transform: rotate(20deg); } html.xxl-is-app #xxl-freshman-mount .deco-float--f2 { width: 100px; height: 100px; top: 18%; right: 8%; transform: rotate(20deg); } html.xxl-is-app #xxl-freshman-mount .deco-float--f3 { width: 220px; height: 26px; bottom: 14%; left: 10%; transform: rotate(-6deg); } html.xxl-is-app #xxl-freshman-mount .deco-float--f4 { width: 56px; height: 56px; bottom: 28%; right: 18%; fill: var(--pink); transform: rotate(15deg); } html.xxl-is-app #xxl-freshman-mount .deco-float--1 { width: 80px; height: 80px; top: 28%; left: 1%; } html.xxl-is-app #xxl-freshman-mount .deco-float--1 polygon { fill: var(--green); } html.xxl-is-app #xxl-freshman-mount .deco-float--2 { width: 45px; height: 90px; top: 18%; right: 1.5%; transform: rotate(22deg); } html.xxl-is-app #xxl-freshman-mount .deco-float--3 { width: 160px; height: 24px; bottom: 5%; left: 2%; transform: rotate(-12deg); } html.xxl-is-app #xxl-freshman-mount .deco-float--c1 { width: 90px; height: 90px; top: 8%; left: 6%; } html.xxl-is-app #xxl-freshman-mount .deco-float--c1 polygon { fill: var(--yellow); } html.xxl-is-app #xxl-freshman-mount .deco-float--c2 { width: 70px; height: 70px; bottom: 12%; right: 8%; } html.xxl-is-app #xxl-freshman-mount .deco-float--c2 polygon { fill: var(--pink); } html.xxl-is-app #xxl-freshman-mount .deco-float--c3 { width: 50px; height: 100px; top: 30%; right: 5%; transform: rotate(20deg); } html.xxl-is-app #xxl-freshman-mount .deco-float--a1 { width: 80px; height: 80px; top: 12%; right: 6%; } html.xxl-is-app #xxl-freshman-mount .deco-float--a1 polygon { fill: var(--blue); } html.xxl-is-app #xxl-freshman-mount .deco-float--a2 { width: 200px; height: 30px; bottom: 30%; left: 4%; transform: rotate(-6deg); } html.xxl-is-app #xxl-freshman-mount .star--f1 { width: 110px; height: 110px; top: 50px; left: 18%; animation: spin-slow 22s linear infinite; } html.xxl-is-app #xxl-freshman-mount .star--f1 polygon { fill: var(--yellow); } html.xxl-is-app #xxl-freshman-mount .star--f2 { width: 65px; height: 65px; bottom: 70px; right: 15%; animation: spin-slow 32s linear infinite reverse; } html.xxl-is-app #xxl-freshman-mount .star--f2 polygon { fill: var(--pink); } html.xxl-is-app #xxl-freshman-mount .deco-float--f1 { width: 50px; height: 100px; top: 30%; right: 8%; transform: rotate(-15deg); } html.xxl-is-app #xxl-freshman-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-freshman-mount .divider--blue { background: var(--blue); } html.xxl-is-app #xxl-freshman-mount .divider--green { background: var(--green); } html.xxl-is-app #xxl-freshman-mount .divider--pink { background: var(--pink); } html.xxl-is-app #xxl-freshman-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-freshman-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-freshman-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-freshman-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-freshman-mount .merch-arrow { display: inline-block; transition: transform 0.2s ease; } html.xxl-is-app #xxl-freshman-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-freshman-mount .merch-btn:hover { transform: rotate(-1.5deg) translate(-3px, -3px); box-shadow: 12px 12px 0 var(--black); } html.xxl-is-app #xxl-freshman-mount .merch-btn:hover .merch-arrow { transform: translateX(6px); } html.xxl-is-app #xxl-freshman-mount .divider-pattern { position: absolute; inset: 0; } html.xxl-is-app #xxl-freshman-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-freshman-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-freshman-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-freshman-mount .section--header { min-height: auto; display: flex; align-items: center; justify-content: center; padding: 20px 24px 90px; } html.xxl-is-app #xxl-freshman-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-freshman-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-freshman-mount .header-logo, html.xxl-is-app #xxl-freshman-mount .header-logo-wrap picture, html.xxl-is-app #xxl-freshman-mount .header-logo-wrap img { display: block; width: 100%; max-width: 820px; height: auto; margin: 0 auto; } html.xxl-is-app #xxl-freshman-mount .header-logo-wrap img { filter: drop-shadow(6px 6px 0 rgba(26, 26, 26, 0.75)); } html.xxl-is-app #xxl-freshman-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-freshman-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-freshman-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-freshman-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-freshman-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-freshman-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-freshman-mount .section--artists { background: transparent; padding-top: 70px; padding-bottom: 70px; } html.xxl-is-app #xxl-freshman-mount .artists-vertical { max-width: 1100px; margin: 0 auto; position: relative; z-index: 2; } html.xxl-is-app #xxl-freshman-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-freshman-mount .artist-row.is-visible { opacity: 1; transform: translateY(0); } html.xxl-is-app #xxl-freshman-mount .artist-row:last-child { margin-bottom: 20px; } html.xxl-is-app #xxl-freshman-mount .artist-row[data-side="left"] .artist-image-side { grid-column: 1; grid-row: 1; } html.xxl-is-app #xxl-freshman-mount .artist-row[data-side="left"] .artist-info-side { grid-column: 2; grid-row: 1; } html.xxl-is-app #xxl-freshman-mount .artist-row[data-side="right"] .artist-image-side { grid-column: 2; grid-row: 1; } html.xxl-is-app #xxl-freshman-mount .artist-row[data-side="right"] .artist-info-side { grid-column: 1; grid-row: 1; text-align: right; } html.xxl-is-app #xxl-freshman-mount .artist-row[data-side="right"] .artist-info-side .artist-bio { margin-left: auto; } html.xxl-is-app #xxl-freshman-mount .artist-number { display: none; } html.xxl-is-app #xxl-freshman-mount .artist-row[data-side="left"] .artist-number { left: -10px; } html.xxl-is-app #xxl-freshman-mount .artist-row[data-side="right"] .artist-number { right: -10px; } html.xxl-is-app #xxl-freshman-mount .artist-image-side { position: relative; padding: 20px; } html.xxl-is-app #xxl-freshman-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-freshman-mount .artist-row[data-color="yellow"] .artist-blob { background: var(--yellow); } html.xxl-is-app #xxl-freshman-mount .artist-row[data-color="blue"] .artist-blob { background: var(--blue); } html.xxl-is-app #xxl-freshman-mount .artist-row[data-color="pink"] .artist-blob { background: var(--pink); } html.xxl-is-app #xxl-freshman-mount .artist-row[data-color="green"] .artist-blob { background: var(--green); } html.xxl-is-app #xxl-freshman-mount .artist-row[data-color="yellow"] .artist-img-frame { border-color: var(--yellow); box-shadow: 12px 12px 0 var(--yellow); background: var(--yellow); } html.xxl-is-app #xxl-freshman-mount .artist-row[data-color="blue"] .artist-img-frame { border-color: var(--blue); box-shadow: 12px 12px 0 var(--blue); background: var(--blue); } html.xxl-is-app #xxl-freshman-mount .artist-row[data-color="pink"] .artist-img-frame { border-color: var(--pink); box-shadow: 12px 12px 0 var(--pink); background: var(--pink); } html.xxl-is-app #xxl-freshman-mount .artist-row[data-color="green"] .artist-img-frame { border-color: var(--green); box-shadow: 12px 12px 0 var(--green); background: var(--green); } html.xxl-is-app #xxl-freshman-mount .artist-row[data-side="right"] .artist-blob { transform: scale(0.55) scaleX(-1); } html.xxl-is-app #xxl-freshman-mount .artist-row:hover .artist-blob { transform: scale(1.18) rotate(6deg); } html.xxl-is-app #xxl-freshman-mount .artist-row[data-side="right"]:hover .artist-blob { transform: scale(1.18) scaleX(-1) rotate(-6deg); } html.xxl-is-app #xxl-freshman-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(--black); font-size: 0; line-height: 0; } html.xxl-is-app #xxl-freshman-mount .artist-row[data-side="right"] .artist-img-frame { transform: rotate(2deg); } html.xxl-is-app #xxl-freshman-mount .artist-row:hover .artist-img-frame { transform: rotate(0deg) scale(1.02); } html.xxl-is-app #xxl-freshman-mount .artist-img-frame img:not(.artist-badge) { display: block; width: 100%; height: auto; object-fit: cover; } html.xxl-is-app #xxl-freshman-mount .artist-link { display: block; text-decoration: none; color: inherit; position: relative; z-index: 2; } html.xxl-is-app #xxl-freshman-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-freshman-mount .artist-badge .badge-line-1 { display: block; font-size: 0.95em; } html.xxl-is-app #xxl-freshman-mount .artist-badge .badge-line-2 { display: block; font-size: 1.15em; } html.xxl-is-app #xxl-freshman-mount .artist-badge--winner { background: #ed1b24; color: var(--white); } html.xxl-is-app #xxl-freshman-mount .artist-badge--producer { background: var(--yellow); color: var(--black); transform: rotate(10deg); } html.xxl-is-app #xxl-freshman-mount .artist-badge--producer { animation-name: badge-wobble-rev; } html.xxl-is-app #xxl-freshman-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-freshman-mount .artist-cta::after { content: '\2192'; display: inline-block; transition: transform 0.2s ease; } html.xxl-is-app #xxl-freshman-mount .artist-cta:hover { transform: translate(-2px, -2px) rotate(-1deg); box-shadow: 8px 8px 0 var(--black); } html.xxl-is-app #xxl-freshman-mount .artist-cta:hover::after { transform: translateX(4px); } html.xxl-is-app #xxl-freshman-mount .artist-row[data-color="yellow"] .artist-cta { background: var(--yellow); color: var(--black); } html.xxl-is-app #xxl-freshman-mount .artist-row[data-color="blue"] .artist-cta { background: var(--blue); color: var(--white); } html.xxl-is-app #xxl-freshman-mount .artist-row[data-color="pink"] .artist-cta { background: var(--pink); color: var(--white); } html.xxl-is-app #xxl-freshman-mount .artist-row[data-color="green"] .artist-cta { background: var(--green); color: var(--white); } html.xxl-is-app #xxl-freshman-mount .artist-deco-star, html.xxl-is-app #xxl-freshman-mount .artist-deco-bolt { position: absolute; z-index: 3; overflow: visible; filter: drop-shadow(3px 3px 0 var(--black)); } html.xxl-is-app #xxl-freshman-mount .artist-deco-star { width: 80px; height: 80px; top: -10px; right: -5px; } html.xxl-is-app #xxl-freshman-mount .artist-deco-star polygon { stroke: var(--black); stroke-width: 4; } html.xxl-is-app #xxl-freshman-mount .artist-row[data-side="left"] .artist-deco-star { right: -5px; top: -5px; } html.xxl-is-app #xxl-freshman-mount .artist-row[data-side="right"] .artist-deco-star { left: -5px; right: auto; top: -5px; } html.xxl-is-app #xxl-freshman-mount .artist-row[data-color="yellow"] .artist-deco-star polygon { fill: var(--pink); } html.xxl-is-app #xxl-freshman-mount .artist-row[data-color="pink"] .artist-deco-star polygon { fill: var(--yellow); } html.xxl-is-app #xxl-freshman-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-freshman-mount .artist-row[data-side="left"] .artist-deco-bolt { right: -10px; } html.xxl-is-app #xxl-freshman-mount .artist-row[data-side="right"] .artist-deco-bolt { left: -10px; } html.xxl-is-app #xxl-freshman-mount .artist-row[data-color="blue"] .artist-deco-bolt polygon { fill: var(--yellow); } html.xxl-is-app #xxl-freshman-mount .artist-row[data-color="green"] .artist-deco-bolt polygon { fill: var(--yellow); } html.xxl-is-app #xxl-freshman-mount .artist-info-side { position: relative; z-index: 2; } html.xxl-is-app #xxl-freshman-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-freshman-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-freshman-mount .artist-row[data-side="right"] .artist-tag { transform: rotate(2deg); } html.xxl-is-app #xxl-freshman-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-freshman-mount .artist-row[data-color="blue"] .artist-name { text-shadow: 4px 4px 0 #7a8eda; color: var(--black); } html.xxl-is-app #xxl-freshman-mount .artist-row[data-color="pink"] .artist-name { text-shadow: 4px 4px 0 var(--pink); } html.xxl-is-app #xxl-freshman-mount .artist-row[data-color="green"] .artist-name { text-shadow: 4px 4px 0 var(--green); } html.xxl-is-app #xxl-freshman-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-freshman-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-freshman-mount .artist-squiggle { width: 200px; height: 20px; display: block; margin-top: 28px; } html.xxl-is-app #xxl-freshman-mount .artist-row[data-side="right"] .artist-squiggle { margin-left: auto; } html.xxl-is-app #xxl-freshman-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-freshman-mount .tv-wrap { max-width: 700px; margin: 0 auto; position: relative; z-index: 2; } html.xxl-is-app #xxl-freshman-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-freshman-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-freshman-mount .tv-antennas { display: flex; justify-content: center; align-items: flex-end; height: 80px; position: relative; margin-bottom: -3px; } html.xxl-is-app #xxl-freshman-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-freshman-mount .antenna { position: absolute; bottom: 15px; width: 7px; background: var(--black); border-radius: 4px; } html.xxl-is-app #xxl-freshman-mount .antenna--left { height: 68px; left: calc(50% - 26px); transform-origin: bottom center; transform: rotate(-28deg); } html.xxl-is-app #xxl-freshman-mount .antenna--right { height: 68px; left: calc(50% + 19px); transform-origin: bottom center; transform: rotate(28deg); } html.xxl-is-app #xxl-freshman-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-freshman-mount .tv-screen-wrap { background: #000; border: var(--border-thick); border-radius: 10px; overflow: hidden; aspect-ratio: 16 / 9; } html.xxl-is-app #xxl-freshman-mount .tv-screen-wrap { position: relative; } html.xxl-is-app #xxl-freshman-mount .tv-screen-wrap iframe { width: 100%; height: 100%; display: block; } html.xxl-is-app #xxl-freshman-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-freshman-mount .tv-fullscreen-btn:hover, html.xxl-is-app #xxl-freshman-mount .tv-fullscreen-btn:focus-visible { background: rgba(0, 0, 0, 0.92); transform: scale(1.06); outline: none; } html.xxl-is-app #xxl-freshman-mount .tv-fullscreen-btn svg { width: 18px; height: 18px; } html.xxl-is-app #xxl-freshman-mount .tv-controls { display: flex; align-items: center; gap: 14px; margin-top: 14px; padding: 0 4px; } html.xxl-is-app #xxl-freshman-mount .tv-knobs { display: flex; align-items: center; gap: 10px; } html.xxl-is-app #xxl-freshman-mount .knob { background: #111; border-radius: 50%; border: 3px solid #444; position: relative; flex-shrink: 0; } html.xxl-is-app #xxl-freshman-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-freshman-mount .knob--big { width: 38px; height: 38px; } html.xxl-is-app #xxl-freshman-mount .knob--small { width: 26px; height: 26px; } html.xxl-is-app #xxl-freshman-mount .tv-speaker { flex: 1; display: flex; flex-direction: column; gap: 5px; } html.xxl-is-app #xxl-freshman-mount .speaker-row { display: flex; gap: 5px; } html.xxl-is-app #xxl-freshman-mount .speaker-dot { width: 7px; height: 7px; background: var(--black); border-radius: 50%; opacity: 0.6; } html.xxl-is-app #xxl-freshman-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-freshman-mount .tv-puma-logo { display: block; width: 200px; height: auto; margin: 0 10px; flex-shrink: 0; } html.xxl-is-app #xxl-freshman-mount .tv-brand i { font-style: italic; } html.xxl-is-app #xxl-freshman-mount .tv-legs { display: flex; justify-content: space-around; padding: 0 80px; } html.xxl-is-app #xxl-freshman-mount .tv-leg { width: 22px; height: 32px; background: var(--black); border-radius: 0 0 6px 6px; position: relative; } html.xxl-is-app #xxl-freshman-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-freshman-mount .remote-stage { position: relative; margin: 50px auto 0; max-width: 700px; } html.xxl-is-app #xxl-freshman-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-freshman-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-freshman-mount .remote-brand i { font-style: italic; } html.xxl-is-app #xxl-freshman-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-freshman-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-freshman-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-freshman-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-freshman-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-freshman-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-freshman-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-freshman-mount .channel-btn.is-active .ch-num { color: var(--black); } html.xxl-is-app #xxl-freshman-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-freshman-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-freshman-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-freshman-mount .section--archive { background: transparent; } html.xxl-is-app #xxl-freshman-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-freshman-mount .archive-scroll-outer:active { cursor: grabbing; } html.xxl-is-app #xxl-freshman-mount .archive-scroll-outer::-webkit-scrollbar { height: 6px; } html.xxl-is-app #xxl-freshman-mount .archive-scroll-outer::-webkit-scrollbar-track { background: rgba(0,0,0,0.1); border-radius: 3px; } html.xxl-is-app #xxl-freshman-mount .archive-scroll-outer::-webkit-scrollbar-thumb { background: var(--black); border-radius: 3px; } html.xxl-is-app #xxl-freshman-mount .archive-track { display: flex; gap: 22px; padding: 8px 32px; width: max-content; } html.xxl-is-app #xxl-freshman-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-freshman-mount .archive-cover:nth-child(odd) .cover-img-wrap { transform: rotate(-1.5deg); } html.xxl-is-app #xxl-freshman-mount .archive-cover:nth-child(even) .cover-img-wrap { transform: rotate(1.5deg); } html.xxl-is-app #xxl-freshman-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-freshman-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-freshman-mount .cover-label { display: block; text-align: center; padding: 12px 6px 0; } html.xxl-is-app #xxl-freshman-mount .cover-year { font-family: var(--font-display); font-size: 1.75rem; color: var(--black); letter-spacing: 0.1em; } html.xxl-is-app #xxl-freshman-mount .archive-cover:hover .cover-img-wrap { transform: rotate(0deg) translateY(-6px); box-shadow: var(--shadow-lg); } html.xxl-is-app #xxl-freshman-mount .archive-cover:hover .cover-img-wrap img { transform: scale(1.04); } html.xxl-is-app #xxl-freshman-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-freshman-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-freshman-mount .footer-inner { position: relative; z-index: 2; } html.xxl-is-app #xxl-freshman-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-freshman-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-freshman-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-freshman-mount .footer-dots { display: flex; justify-content: center; gap: 18px; } html.xxl-is-app #xxl-freshman-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-freshman-mount .dot:hover { transform: scale(1.4) rotate(15deg); } html.xxl-is-app #xxl-freshman-mount .dot--yellow { background: var(--yellow); } html.xxl-is-app #xxl-freshman-mount .dot--blue { background: var(--blue); } html.xxl-is-app #xxl-freshman-mount .dot--pink { background: var(--pink); } html.xxl-is-app #xxl-freshman-mount .dot--green { background: var(--green); } html.xxl-is-app #xxl-freshman-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-freshman-mount .reveal-item.is-visible { opacity: 1; transform: translateY(0); } html.xxl-is-app #xxl-freshman-mount .archive-track .reveal-item { transition-delay: 0.04s; } /* App: mobile-breakpoint overrides applied unconditionally */ html.xxl-is-app #xxl-freshman-mount .tv-fullscreen-btn { display: none; } html.xxl-is-app #xxl-freshman-mount .tv-puma-logo { width: 120px; margin: 0 6px; } html.xxl-is-app #xxl-freshman-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-freshman-mount .artists-vertical { overflow: visible; } html.xxl-is-app #xxl-freshman-mount .artist-blob { transform: scale(1.15) rotate(6deg); } html.xxl-is-app #xxl-freshman-mount .artist-row[data-side="right"] .artist-blob { transform: scale(1.15) scaleX(-1) rotate(-6deg); } html.xxl-is-app #xxl-freshman-mount .artist-row[data-side="left"] .artist-image-side, html.xxl-is-app #xxl-freshman-mount .artist-row[data-side="right"] .artist-image-side { grid-column: 1; grid-row: 1; } html.xxl-is-app #xxl-freshman-mount .artist-row[data-side="left"] .artist-info-side, html.xxl-is-app #xxl-freshman-mount .artist-row[data-side="right"] .artist-info-side { grid-column: 1; grid-row: 2; text-align: left; } html.xxl-is-app #xxl-freshman-mount .artist-row[data-side="right"] .artist-bio, html.xxl-is-app #xxl-freshman-mount .artist-row[data-side="right"] .artist-squiggle { margin-left: 0; } html.xxl-is-app #xxl-freshman-mount .artist-number { top: -32px; font-size: 5rem; } html.xxl-is-app #xxl-freshman-mount .artist-row[data-side="left"] .artist-number { left: 0; } html.xxl-is-app #xxl-freshman-mount .artist-row[data-side="right"] .artist-number { right: 0; } html.xxl-is-app #xxl-freshman-mount .section { padding: 50px 16px; } html.xxl-is-app #xxl-freshman-mount .section-header-row { margin-bottom: 36px; } html.xxl-is-app #xxl-freshman-mount .header-intro { font-size: 1.3rem; padding: 18px 22px; line-height: 1.55; } html.xxl-is-app #xxl-freshman-mount .header-logo { max-width: 320px; } html.xxl-is-app #xxl-freshman-mount .header-inner { gap: 22px; } html.xxl-is-app #xxl-freshman-mount .section-title { font-size: clamp(2.6rem, 12vw, 4rem); } html.xxl-is-app #xxl-freshman-mount .badge { font-size: 1.45rem; padding: 7px 22px 5px; margin-bottom: 18px; } html.xxl-is-app #xxl-freshman-mount .tv-wrap { padding: 0; } html.xxl-is-app #xxl-freshman-mount .tv-antennas { height: 50px; } html.xxl-is-app #xxl-freshman-mount .antenna { height: 44px; width: 5px; } html.xxl-is-app #xxl-freshman-mount .antenna-base { width: 44px; height: 12px; } html.xxl-is-app #xxl-freshman-mount .tv-body { padding: 12px 12px 10px; } html.xxl-is-app #xxl-freshman-mount .tv-controls { gap: 10px; margin-top: 10px; } html.xxl-is-app #xxl-freshman-mount .knob--big { width: 28px; height: 28px; } html.xxl-is-app #xxl-freshman-mount .knob--small { width: 20px; height: 20px; } html.xxl-is-app #xxl-freshman-mount .tv-brand { font-size: 1.4rem; padding: 6px 10px 4px; } html.xxl-is-app #xxl-freshman-mount .tv-legs { padding: 0 50px; } html.xxl-is-app #xxl-freshman-mount .tv-leg { width: 16px; height: 22px; } html.xxl-is-app #xxl-freshman-mount .cover-img-wrap { height: 215px; } html.xxl-is-app #xxl-freshman-mount .cover-year { font-size: 1.4rem; } html.xxl-is-app #xxl-freshman-mount .section--header { padding: 20px 16px 50px; } html.xxl-is-app #xxl-freshman-mount .cypher-burst { width: 110px; height: 110px; right: -20px; top: -10px; } html.xxl-is-app #xxl-freshman-mount .artist-image-side { padding: 16px; } html.xxl-is-app #xxl-freshman-mount .artist-img-frame { max-width: 100%; } html.xxl-is-app #xxl-freshman-mount .artist-name { font-size: clamp(3.6rem, 12vw, 5rem); margin-bottom: 12px; } html.xxl-is-app #xxl-freshman-mount .artist-hometown { font-size: 1.55rem; padding: 5px 18px; } html.xxl-is-app #xxl-freshman-mount .artist-bio { font-size: 1.4rem; line-height: 1.55; padding: 16px 20px; } html.xxl-is-app #xxl-freshman-mount .artist-info-side { position: relative; padding-top: 42px; } html.xxl-is-app #xxl-freshman-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-freshman-mount .artist-cta { font-size: 2rem; padding: 7px 20px 5px; } html.xxl-is-app #xxl-freshman-mount .remote-stage { margin-top: 30px; max-width: 100%; } html.xxl-is-app #xxl-freshman-mount .cypher-remote { padding: 14px 12px 14px; } html.xxl-is-app #xxl-freshman-mount .remote-brand { font-size: 1.95rem; } html.xxl-is-app #xxl-freshman-mount .remote-eyebrow { font-size: 1.15rem; margin-bottom: 12px; padding-bottom: 8px; } html.xxl-is-app #xxl-freshman-mount .remote-buttons { gap: 5px; } html.xxl-is-app #xxl-freshman-mount .channel-btn { padding: 8px 4px 6px; } html.xxl-is-app #xxl-freshman-mount .channel-btn .ch-num { font-size: 2rem; } html.xxl-is-app #xxl-freshman-mount .channel-btn .ch-label { font-size: 0.85rem; } html.xxl-is-app #xxl-freshman-mount .now-playing-title { font-size: 1.65rem; } html.xxl-is-app #xxl-freshman-mount .remote-now-playing { font-size: 1.15rem; padding-top: 8px; } html.xxl-is-app #xxl-freshman-mount .artist-deco-star { width: 60px; height: 60px; } html.xxl-is-app #xxl-freshman-mount .artist-deco-bolt { width: 38px; height: 76px; } html.xxl-is-app #xxl-freshman-mount .footer-eyebrow { font-size: 1rem; } html.xxl-is-app #xxl-freshman-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-freshman-mount .footer-sub { font-size: 1.1rem; margin-bottom: 32px; } html.xxl-is-app #xxl-freshman-mount .dot { width: 18px; height: 18px; } html.xxl-is-app #xxl-freshman-mount .divider { height: 70px; } html.xxl-is-app #xxl-freshman-mount .divider--with-cta { height: auto; padding: 28px 16px; } html.xxl-is-app #xxl-freshman-mount .merch-stage { flex-direction: column; gap: 0; } html.xxl-is-app #xxl-freshman-mount .merch-tee { width: 300px; margin-top: -50px; margin-bottom: -50px; position: relative; z-index: 1; } html.xxl-is-app #xxl-freshman-mount .merch-btn { position: relative; z-index: 2; } html.xxl-is-app #xxl-freshman-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-freshman-mount .deco-star, html.xxl-is-app #xxl-freshman-mount .deco-bolt, html.xxl-is-app #xxl-freshman-mount .deco-swirl, html.xxl-is-app #xxl-freshman-mount .deco-zigzag, html.xxl-is-app #xxl-freshman-mount .deco-squiggle { transform: scale(0.65); } html.xxl-is-app #xxl-freshman-mount .blob { opacity: 0.45; } html.xxl-is-app #xxl-freshman-mount .cover-img-wrap { height: 188px; } html.xxl-is-app #xxl-freshman-mount .header-logo { max-width: 280px; } html.xxl-is-app #xxl-freshman-mount .artist-img-frame { max-width: 100%; } html.xxl-is-app #xxl-freshman-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-freshman-mount .section--spotlight .badge, html.xxl-is-app #xxl-freshman-mount .section--spotlight .badge { font-size: 2rem; } #xxl-freshman-mount .section--spotlight, html.xxl-is-app #xxl-freshman-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-freshman-mount .spotlight-inner, html.xxl-is-app #xxl-freshman-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-freshman-mount .spotlight-image-wrap, html.xxl-is-app #xxl-freshman-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-freshman-mount .spotlight-image-wrap .spotlight-image, html.xxl-is-app #xxl-freshman-mount .spotlight-image-wrap .spotlight-image { display: block; width: 100%; height: auto; border: 2px solid #1a1a1a; } #xxl-freshman-mount .spotlight-image, html.xxl-is-app #xxl-freshman-mount .spotlight-image { display: block; width: 100%; height: auto; } #xxl-freshman-mount .spotlight-eyebrow, html.xxl-is-app #xxl-freshman-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-freshman-mount .spotlight-eyebrow .tag-star, html.xxl-is-app #xxl-freshman-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-freshman-mount .spotlight-headline, html.xxl-is-app #xxl-freshman-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-freshman-mount .spotlight-headline em, html.xxl-is-app #xxl-freshman-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-freshman-mount .spotlight-text, html.xxl-is-app #xxl-freshman-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-freshman-mount .spotlight-buttons, html.xxl-is-app #xxl-freshman-mount .spotlight-buttons { display: flex; flex-direction: column; gap: 14px; align-items: stretch; min-width: 220px; } #xxl-freshman-mount .spotlight-btn, html.xxl-is-app #xxl-freshman-mount .spotlight-btn { justify-content: center; text-align: center; white-space: nowrap; } #xxl-freshman-mount .spotlight-btn, html.xxl-is-app #xxl-freshman-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-freshman-mount .spotlight-btn--primary, html.xxl-is-app #xxl-freshman-mount .spotlight-btn--primary { background: var(--blue); color: var(--white); } #xxl-freshman-mount .spotlight-btn--secondary, html.xxl-is-app #xxl-freshman-mount .spotlight-btn--secondary { background: var(--yellow); color: var(--black); } #xxl-freshman-mount .spotlight-btn:hover, html.xxl-is-app #xxl-freshman-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-freshman-mount .spotlight-content, html.xxl-is-app #xxl-freshman-mount .spotlight-content { display: contents; } #xxl-freshman-mount .spotlight-inner, html.xxl-is-app #xxl-freshman-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-freshman-mount .spotlight-badge, html.xxl-is-app #xxl-freshman-mount .spotlight-badge { grid-area: badge; justify-self: center; margin-bottom: 0; } #xxl-freshman-mount .spotlight-image-wrap, html.xxl-is-app #xxl-freshman-mount .spotlight-image-wrap { grid-area: image; max-width: 200px; align-self: center; padding: 7px 7px 30px; } #xxl-freshman-mount .spotlight-headline, html.xxl-is-app #xxl-freshman-mount .spotlight-headline { grid-area: name; margin-bottom: 0; } #xxl-freshman-mount .spotlight-text, html.xxl-is-app #xxl-freshman-mount .spotlight-text { grid-area: text; margin-bottom: 0; } #xxl-freshman-mount .spotlight-buttons, html.xxl-is-app #xxl-freshman-mount .spotlight-buttons { grid-area: buttons; flex-direction: row; flex-wrap: wrap; min-width: 0; } } @media (max-width: 480px) { #xxl-freshman-mount .spotlight-inner, html.xxl-is-app #xxl-freshman-mount .spotlight-inner { grid-template-columns: 130px 1fr; gap: 14px 24px; } #xxl-freshman-mount .spotlight-image-wrap, html.xxl-is-app #xxl-freshman-mount .spotlight-image-wrap { max-width: 130px; } #xxl-freshman-mount .spotlight-buttons, html.xxl-is-app #xxl-freshman-mount .spotlight-buttons { flex-direction: column; } } @media (max-width: 640px) { #xxl-freshman-mount .section--spotlight, html.xxl-is-app #xxl-freshman-mount .section--spotlight { padding-top: 50px; padding-bottom: 24px; } #xxl-freshman-mount .spotlight-headline, html.xxl-is-app #xxl-freshman-mount .spotlight-headline { font-size: clamp(2.6rem, 11vw, 4rem); } #xxl-freshman-mount .spotlight-text, html.xxl-is-app #xxl-freshman-mount .spotlight-text { font-size: 1.15rem; padding: 14px 18px; } #xxl-freshman-mount .spotlight-btn, html.xxl-is-app #xxl-freshman-mount .spotlight-btn { font-size: 1.8rem; padding: 10px 20px 8px; } #xxl-freshman-mount .spotlight-buttons, html.xxl-is-app #xxl-freshman-mount .spotlight-buttons { gap: 10px; } #xxl-freshman-mount .spotlight-eyebrow, html.xxl-is-app #xxl-freshman-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-freshman-mount .spotlight-content { display: contents; } html.xxl-is-app #xxl-freshman-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-freshman-mount .spotlight-badge { grid-area: badge; justify-self: center; margin-bottom: 0; } html.xxl-is-app #xxl-freshman-mount .spotlight-image-wrap { grid-area: image; max-width: 150px; align-self: center; padding: 7px 7px 30px; } html.xxl-is-app #xxl-freshman-mount .spotlight-headline { grid-area: name; margin-bottom: 0; } html.xxl-is-app #xxl-freshman-mount .spotlight-text { grid-area: text; margin-bottom: 0; } html.xxl-is-app #xxl-freshman-mount .spotlight-buttons { grid-area: buttons; flex-direction: row; flex-wrap: wrap; min-width: 0; } html.xxl-is-app #xxl-freshman-mount .section--spotlight { padding-top: 50px; padding-bottom: 24px; } html.xxl-is-app #xxl-freshman-mount .spotlight-headline { font-size: clamp(2.6rem, 11vw, 4rem); } html.xxl-is-app #xxl-freshman-mount .spotlight-text { font-size: 1.15rem; padding: 14px 18px; } html.xxl-is-app #xxl-freshman-mount .spotlight-btn { font-size: 1.8rem; padding: 10px 20px 8px; } html.xxl-is-app #xxl-freshman-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-freshman-mount .artist-cover-section, html.xxl-is-app #xxl-freshman-mount .artist-cover-section { padding: 80px 24px 80px; position: relative; z-index: 0; } #xxl-freshman-mount .cover-stage, html.xxl-is-app #xxl-freshman-mount .cover-stage { display: flex; justify-content: center; align-items: center; margin: 36px auto 0; max-width: 720px; } #xxl-freshman-mount .cover-trigger, html.xxl-is-app #xxl-freshman-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-freshman-mount .cover-trigger:hover, html.xxl-is-app #xxl-freshman-mount .cover-trigger:hover { transform: translate(-3px, -3px) rotate(0deg); } #xxl-freshman-mount .cover-frame-img, html.xxl-is-app #xxl-freshman-mount .cover-frame-img { display: block; width: 100%; height: auto; } #xxl-freshman-mount .cover-zoom-hint, html.xxl-is-app #xxl-freshman-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-freshman-mount .cover-zoom-hint svg, html.xxl-is-app #xxl-freshman-mount .cover-zoom-hint svg { width: 22px; height: 22px; fill: var(--yellow); } @media (max-width: 640px) { #xxl-freshman-mount .artist-cover-section, html.xxl-is-app #xxl-freshman-mount .artist-cover-section { padding: 50px 16px; } #xxl-freshman-mount .cover-zoom-hint, html.xxl-is-app #xxl-freshman-mount .cover-zoom-hint { right: 10px; bottom: 10px; padding: 7px 14px 5px; gap: 6px; } #xxl-freshman-mount .cover-zoom-hint svg, html.xxl-is-app #xxl-freshman-mount .cover-zoom-hint svg { width: 18px; height: 18px; } } /* App always renders mobile-style */ html.xxl-is-app #xxl-freshman-mount .artist-cover-section { padding: 50px 16px; } html.xxl-is-app #xxl-freshman-mount .cover-zoom-hint { right: 10px; bottom: 10px; padding: 7px 14px 5px; gap: 6px; } html.xxl-is-app #xxl-freshman-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; } } /* ============================================================ TOWNSQUARE WORDPRESS HOST OVERRIDES Target page chrome OUTSIDE the mount so the WP post title and default content padding don't interfere with the full-bleed component layout. Each selector is :has()-scoped to ONLY apply on pages that include #xxl-freshman-mount. ============================================================ */ /* Reset z-index on host page chrome so our parallax / modals can sit on top */ body:has(#xxl-freshman-mount) section, body:has(#xxl-freshman-mount) .divider, body:has(#xxl-freshman-mount) .footer-inner { z-index: 0; } /* Tighten the WP post wrapper's default padding around our mount */ .main-content > .wrapper.post-wrapper:has(#xxl-freshman-mount) .content { padding: 0; } /* Hide the WP-generated page title — the component renders its own */ .page-header:has(+ * #xxl-freshman-mount), body:has(#xxl-freshman-mount) .page-header, body:has(#xxl-freshman-mount) h1.article, body:has(#xxl-freshman-mount) h2.article { display: none; } /* Zero out mobile-side padding so the layout goes full-bleed */ .mobile .post:has(#xxl-freshman-mount) .content-wrap, .mobile .main-content > .wrapper.post-wrapper:has(#xxl-freshman-mount) .content, body:has(#xxl-freshman-mount) { padding: 0; } /* In the app webview, the article wrapper paints its own bg; clear it */ .mainContent article:has(#xxl-freshman-mount) { background-color: unset; } /* ============================================================ PAGE-LEVEL OVERFLOW GUARD Lock horizontal overflow at the html + body level whenever the mount is on the page. (iOS Safari ignores overflow-x on body alone — set it on too.) Mount itself also has overflow-x: clip; these are belt-and-suspenders. ============================================================ */ html:has(#xxl-freshman-mount), body:has(#xxl-freshman-mount) { overflow-x: hidden; /* fallback */ overflow-x: clip; max-width: 100vw; } /* ============================================================ TOWNSQUARE APP — HIDE DUPLICATE ARTICLE-THUMBNAIL HERO The Townsquare mobile app drops a
above the .mainContent wrapper, hoisting whatever featured image is set on the WP post. Our component renders its own header / hero, so the app's auto-injected one duplicates it. The figure lives OUTSIDE .mainContent, so descendant selectors off .mainContent can't reach it — scope to html.xxl-is-app (set by script.js boot) and gate with :has(#xxl-freshman-mount) so the rule only fires on app pages that include this component. ============================================================ */ html.xxl-is-app:has(#xxl-freshman-mount) figure.article-thumbnail:first-of-type { display: none !important; } /* Townsquare Wordpress Specfic Styles */ section, .divider, .footer-inner { z-index: 0; } .main-content > .wrapper.post-wrapper .content { padding: 10px; } .page-header, h1.article, h2.article { display: none; } .mobile .post .content-wrap, .mobile .main-content > .wrapper.post-wrapper .content, body { padding: 0px; } .mainContent article { background-color: unset; } /* ============================================================ SHARE BAR — sits between hero header and first blue divider Comic-shadow pill buttons matching the page's CTA style. ============================================================ */ #xxl-freshman-mount .section--share { background: #fece26; padding: 26px 20px 38px; text-align: center; /* No z-index / positioning — let the host's `section { z-index: 0 }` rule apply so the section scrolls UNDER the website's sticky menu. */ } #xxl-freshman-mount .share-inner { display: flex; flex-direction: column; align-items: center; gap: 14px; max-width: 720px; margin: 0 auto; } #xxl-freshman-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-freshman-mount .share-buttons { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; } #xxl-freshman-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-freshman-mount .share-btn:hover { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 0 #1a1a1a; background: #fff7d6; } } #xxl-freshman-mount .share-btn:focus-visible { outline: 3px dashed #485dac; outline-offset: 3px; } #xxl-freshman-mount .share-btn:active { transform: translate(2px, 2px); box-shadow: 0 0 0 0 #1a1a1a; } #xxl-freshman-mount .share-icon { display: block; flex: 0 0 auto; } #xxl-freshman-mount .share-btn--facebook .share-icon { color: #1877F2; } #xxl-freshman-mount .share-btn--twitter .share-icon { color: #1DA1F2; } @media (max-width: 600px) { #xxl-freshman-mount .section--share { padding: 20px 16px 30px; } #xxl-freshman-mount .share-label { font-size: 26px; } #xxl-freshman-mount .share-buttons { flex-wrap: nowrap; width: 100%; gap: 10px; } #xxl-freshman-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-freshman-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 that, so hide the theme's version. This CSS file only loads on this post (via the Custom HTML ), so the rule is effectively scoped to this page. ============================================================ */ .social-share { display: none !important; } [id^="primis_container_div_"] > div:first-child { bottom: 50px !important; top: unset !important; } .tv-puma-logo { display: none !important; }