/* ============================================ RCF ARENA SUMMER · Stylesheet Tokens → Reset → Typography → Components → Sections → Pages → Responsive ============================================ */ /* ---------- TOKENS ---------- */ :root { /* Color */ --bg: #0B0B0C; --bg-2: #131214; --bg-3: #1B191C; --paper: #EFEAE0; --paper-2: #E3DCCD; --ink: #F4F0E8; --ink-2: #B5AFA3; --ink-dark: #0B0B0C; --mute: #6E665C; --line: rgba(244,240,232,.12); --line-strong: rgba(244,240,232,.24); --heat: #FF3B14; --heat-2: #FF6B3B; --lime: #D7FF1E; --lime-2: #C2E600; --sky: #4A6CF7; --sky-2: #6E8AFF; --pink: #FF6BAA; /* Type */ --f-display: "Anton", "Archivo Black", "Helvetica Neue", sans-serif; --f-display-2: "Archivo Black", "Helvetica Neue", sans-serif; --f-body: "Space Grotesk", "Inter", system-ui, sans-serif; --f-italic: "Instrument Serif", "Times New Roman", serif; --f-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace; /* Sizing fluid (12 → 19px base) */ --fs-base: clamp(15px, 1.05vw, 18px); --fs-body: 1rem; --fs-eyebrow: 0.72rem; --fs-small: 0.86rem; --fs-h3: clamp(1.4rem, 2.4vw, 2rem); --fs-h2: clamp(2.4rem, 6vw, 6.5rem); --fs-h1: clamp(4rem, 14vw, 16rem); --fs-mega: clamp(6rem, 22vw, 30rem); /* Spacing */ --space-1: 0.5rem; --space-2: 1rem; --space-3: 1.5rem; --space-4: 2.5rem; --space-5: 4rem; --space-6: 6rem; --space-7: 9rem; --pad-x: clamp(1.25rem, 4vw, 4rem); --radius: 14px; --radius-lg: 28px; /* Motion */ --ease-out: cubic-bezier(.2,.8,.2,1); --ease-power: cubic-bezier(.7,0,.2,1); --ease-elastic: cubic-bezier(.85,0,.15,1); --t-fast: 220ms; --t-med: 420ms; --t-slow: 900ms; } /* ---------- RESET ---------- */ *,*::before,*::after { box-sizing: border-box; } html { font-size: var(--fs-base); -webkit-text-size-adjust: 100%; -webkit-font-smoothing: antialiased; } html, body { margin: 0; padding: 0; background: var(--bg); color: var(--ink); } html { overflow-x: clip; } body { font-family: var(--f-body); font-weight: 400; font-feature-settings: "ss01","ss02","cv11"; line-height: 1.45; overflow-x: clip; } /* Custom JS cursor only hides OS cursor once .js-cursor is set on . If JS fails for any reason, OS cursor remains visible — clicks still work. */ .js-cursor body, .js-cursor a, .js-cursor button { cursor: none; } img, svg, video { display: block; max-width: 100%; } a { color: inherit; text-decoration: none; } button { background: none; border: 0; color: inherit; font: inherit; cursor: pointer; padding: 0; } ul, ol { margin: 0; padding: 0; list-style: none; } input, textarea { font: inherit; color: inherit; } ::selection { background: var(--heat); color: var(--ink-dark); } /* Custom cursor disabled on touch devices AND on narrow viewports. Also covers the cursor__photo preview overlay (created on body, separate from the .cursor element). */ @media (hover: none), (pointer: coarse), (max-width: 720px) { .cursor, .cursor__photo { display: none !important; } } /* Reduced motion — disable decorative motion, but DON'T accelerate looped animations (marquee, preloader rotator, etc.) to 0.01ms which makes them flash through cycles infinitely fast. Pause/freeze them instead. */ @media (prefers-reduced-motion: reduce) { /* One-shot transitions and most animations: skip to end almost instantly. */ *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; } /* Looped, decorative animations: pause completely so they don't cycle in 10µs. */ .marquee__row, .preloader__rotator ul, .konami-mode::before, .konami-mode .nav__sun { animation: none !important; } /* Make sure the marquee still shows readable text when paused. */ .marquee__row { transform: none !important; } /* Preloader rotator: show first item only, hide the rest */ .preloader__rotator { height: 1.4em; overflow: hidden; } .preloader__rotator ul { transform: none !important; } } /* ---------- TYPOGRAPHY HELPERS ---------- */ .eyebrow { font-family: var(--f-mono); font-size: var(--fs-eyebrow); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-2); display: inline-flex; align-items: center; gap: .6em; margin: 0; font-weight: 500; } .eyebrow .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--heat); box-shadow: 0 0 12px var(--heat); animation: pulse 1.6s var(--ease-out) infinite; } @keyframes pulse { 0%,100% { opacity: 1; transform: scale(1);} 50% {opacity:.5; transform:scale(.85);} } .italic, em { font-family: var(--f-italic); font-style: italic; font-weight: 400; letter-spacing: -.01em; } .section-title { font-family: var(--f-display); font-size: var(--fs-h2); line-height: .9; letter-spacing: -.02em; text-transform: uppercase; margin: 0; display: block; } .section-title > span { display: block; } .section-title .italic { text-transform: none; letter-spacing: -.04em; } .section-title .italic em { color: var(--heat); } .section-head { display: grid; grid-template-columns: 1fr; gap: var(--space-3); padding: var(--space-7) var(--pad-x) var(--space-4); } .section-head--right { text-align: right; } .section-head--right .eyebrow { justify-content: flex-end; } /* ---------- BUTTONS ---------- */ .btn { display: inline-flex; align-items: center; gap: .8em; padding: 0.95em 1.4em; border-radius: 999px; font-family: var(--f-body); font-weight: 600; font-size: 0.92rem; letter-spacing: .02em; text-transform: uppercase; background: var(--ink); color: var(--ink-dark); transition: transform var(--t-fast) var(--ease-out), background var(--t-fast) var(--ease-out), color var(--t-fast) var(--ease-out); white-space: nowrap; position: relative; overflow: hidden; } .btn:hover { transform: translateY(-2px); } .btn--heat { background: var(--heat); color: #fff; } .btn--lime { background: var(--lime); color: var(--ink-dark); } .btn--sky { background: var(--sky); color: #fff; } .btn--ghost { background: transparent; color: var(--ink); border: 1px solid var(--line-strong); } .btn--ghost:hover { border-color: var(--ink); } .btn--lg { padding: 1.15em 1.8em; font-size: 1rem; } .link { font-family: var(--f-body); font-weight: 500; letter-spacing: .02em; border-bottom: 1px solid currentColor; padding-bottom: 2px; transition: color var(--t-fast) var(--ease-out); } .link:hover { color: var(--heat); } /* ---------- PRELOADER ---------- */ .preloader { position: fixed; inset: 0; z-index: 1000; background: var(--bg); color: var(--ink); display: flex; flex-direction: column; pointer-events: none; } .preloader.is-done { transform: translateY(-100%); transition: transform 1.1s var(--ease-power); } .preloader__inner { flex: 1; display: grid; grid-template-rows: auto 1fr auto; padding: var(--pad-x); gap: var(--space-4); } .preloader__top { display: flex; justify-content: space-between; align-items: center; font-family: var(--f-mono); font-size: var(--fs-small); color: var(--ink-2); } .preloader__mark { display: flex; align-items: center; gap: .8em; color: var(--heat); } .preloader__mark svg { animation: spin 6s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } .preloader__center { align-self: center; text-align: center; } .preloader__counter { font-family: var(--f-display); font-size: clamp(8rem, 24vw, 20rem); line-height: .85; letter-spacing: -.04em; font-feature-settings: "tnum"; } .preloader__counter i { font-style: normal; font-size: .35em; vertical-align: top; opacity: .6; margin-left: .15em; } .preloader__rotator { height: 1.4em; overflow: hidden; font-family: var(--f-mono); font-size: var(--fs-small); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-2); margin-top: var(--space-2); } .preloader__rotator ul { animation: rotate 4s steps(4) infinite; } .preloader__rotator li { height: 1.4em; line-height: 1.4em; } @keyframes rotate { 0%,25% { transform: translateY(0); } 25.01%,50% { transform: translateY(-1.4em); } 50.01%,75% { transform: translateY(-2.8em); } 75.01%,100% { transform: translateY(-4.2em); } } .preloader__bottom { display: grid; gap: var(--space-3); } .preloader__title { font-family: var(--f-display); font-size: clamp(2rem, 6vw, 5rem); line-height: .95; letter-spacing: -.02em; text-transform: uppercase; } .preloader__title span { display: inline-block; transform: translateY(110%); opacity: 0; } .preloader__title em { color: var(--heat); text-transform: none; letter-spacing: -.04em; } .preloader.is-ready .preloader__title span { animation: rise 1s var(--ease-power) forwards; } .preloader.is-ready .preloader__title span:nth-child(2) { animation-delay: .1s; } @keyframes rise { to { transform: translateY(0); opacity: 1; } } .preloader__bar { width: 100%; height: 1px; background: var(--line); position: relative; overflow: hidden; } .preloader__bar span { position: absolute; inset: 0; right: auto; width: 0%; background: var(--heat); transition: width 80ms linear; } /* ---------- CUSTOM CURSOR ---------- */ .cursor { position: fixed; top: 0; left: 0; pointer-events: none; z-index: 9999; mix-blend-mode: difference; } .cursor__dot { position: absolute; width: 6px; height: 6px; background: #fff; border-radius: 50%; transform: translate(-50%, -50%); transition: transform var(--t-fast) var(--ease-out); } .cursor__ring { position: absolute; width: 36px; height: 36px; border: 1px solid #fff; border-radius: 50%; transform: translate(-50%, -50%) scale(1); transition: width var(--t-fast) var(--ease-out), height var(--t-fast) var(--ease-out), background var(--t-fast) var(--ease-out), opacity var(--t-fast) var(--ease-out); } .cursor__label { position: absolute; transform: translate(-50%, -150%); font-family: var(--f-mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: #fff; white-space: nowrap; opacity: 0; transition: opacity var(--t-fast) var(--ease-out); } .cursor.is-hover .cursor__ring { width: 64px; height: 64px; background: rgba(255,255,255,.08); } .cursor.is-active .cursor__ring { width: 92px; height: 92px; background: rgba(255,255,255,.18); } .cursor.is-active .cursor__label { opacity: 1; } .cursor.is-down .cursor__ring { transform: translate(-50%, -50%) scale(.7); } /* ---------- NAVIGATION ---------- */ .nav { position: fixed; top: 0; left: 0; right: 0; display: grid; grid-template-columns: auto 1fr auto; align-items: center; padding: clamp(.9rem, 1.4vw, 1.4rem) var(--pad-x); gap: var(--space-3); z-index: 100; transition: background var(--t-med) var(--ease-out), backdrop-filter var(--t-med) var(--ease-out), padding var(--t-med) var(--ease-out); } .nav.is-scrolled { background: rgba(11,11,12,.65); backdrop-filter: blur(14px) saturate(140%); -webkit-backdrop-filter: blur(14px) saturate(140%); padding-top: .8rem; padding-bottom: .8rem; border-bottom: 1px solid var(--line); } .nav__logo { display: inline-flex; align-items: center; gap: .7em; color: var(--ink); } .nav__sun { color: var(--heat); transition: transform var(--t-med) var(--ease-out); } .nav__logo:hover .nav__sun { transform: rotate(45deg); } .nav__wordmark { display: grid; line-height: 1; } .nav__wordmark strong { font-family: var(--f-display); font-weight: 400; font-size: 1.4rem; letter-spacing: .04em; } .nav__wordmark em { font-family: var(--f-italic); font-style: italic; font-size: .82rem; margin-top: -.05em; color: var(--ink-2); } .nav__links { display: flex; justify-content: center; gap: var(--space-3); font-family: var(--f-mono); font-size: 0.82rem; letter-spacing: .12em; text-transform: uppercase; } .nav__links a { position: relative; padding: .5em .2em; transition: color var(--t-fast) var(--ease-out); display: inline-block; } .nav__links a::after { content: ""; position: absolute; left: 0; right: 100%; bottom: 0; height: 1px; background: currentColor; transition: right var(--t-med) var(--ease-power); } .nav__links a:hover { color: var(--heat); } .nav__links a:hover::after { right: 0; } .nav__right { display: flex; align-items: center; gap: var(--space-2); } .nav__cta { display: inline-flex; align-items: center; gap: .6em; background: var(--heat); color: #fff; padding: .7em 1.1em; border-radius: 999px; font-family: var(--f-body); font-size: .85rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; transition: background var(--t-fast) var(--ease-out), transform var(--t-fast) var(--ease-out); } .nav__cta i { width: 8px; height: 8px; background: #fff; border-radius: 50%; animation: pulse 1.6s var(--ease-out) infinite; } .nav__cta:hover { background: var(--ink); color: var(--ink-dark); transform: translateY(-2px); } .nav__cta:hover i { background: var(--heat); } .nav__menu { display: none; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--line-strong); position: relative; } .nav__menu span { position: absolute; left: 12px; right: 12px; height: 1.5px; background: var(--ink); transition: transform var(--t-fast) var(--ease-out), top var(--t-fast) var(--ease-out); } .nav__menu span:nth-child(1) { top: 16px; } .nav__menu span:nth-child(2) { top: 24px; } .nav.is-menu-open .nav__menu span:nth-child(1) { top: 20px; transform: rotate(45deg); } .nav.is-menu-open .nav__menu span:nth-child(2) { top: 20px; transform: rotate(-45deg); } /* MENU OVERLAY */ .menu { position: fixed; inset: 0; background: var(--bg); z-index: 90; transform: translateY(-100%); transition: transform var(--t-med) var(--ease-power); /* Scroll on the menu itself so touch users can swipe-scroll anywhere in the overlay. Top padding leaves space for the close (X) button. -webkit-overflow-scrolling for iOS momentum (older Safari). touch-action: pan-y EXPLICITLY allows vertical pan inside the menu — without it, browsers may interpret the touch as a no-op on a fixed element and never trigger the scroll. */ display: block; padding: clamp(5rem, 9vh, 8rem) var(--pad-x) var(--space-5); overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; touch-action: pan-y; visibility: hidden; pointer-events: none; } .menu.is-open { transform: translateY(0); visibility: visible; pointer-events: auto; } .menu__inner { width: 100%; max-width: 1400px; margin: 0 auto; } .menu__list { border-top: 1px solid var(--line); } .menu__list li { border-bottom: 1px solid var(--line); } .menu__list a { display: flex; align-items: baseline; gap: 1em; padding: .8em 0; font-family: var(--f-display); font-size: clamp(2.5rem, 8vw, 7rem); line-height: 1; letter-spacing: -.02em; text-transform: uppercase; transition: color var(--t-fast) var(--ease-out), padding-left var(--t-med) var(--ease-power); } .menu__list a span { font-family: var(--f-mono); font-size: .8rem; letter-spacing: .12em; color: var(--ink-2); } .menu__list a:hover { color: var(--heat); padding-left: 2vw; } .menu__list .menu__sublinks { display: flex; flex-wrap: wrap; gap: .5rem; padding: 0 0 .9em 0; margin-top: -.4em; } .menu__list .menu__sublinks a { /* override the giant list anchor styling — bumped specificity */ display: inline-block; padding: .55em 1.1em; font-family: var(--f-mono); font-size: .72rem; line-height: 1; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-2); border: 1px solid var(--line); border-radius: 999px; transition: color var(--t-fast), border-color var(--t-fast), background var(--t-fast); } .menu__list .menu__sublinks a:hover { color: var(--ink-dark); background: var(--lime); border-color: var(--lime); padding-left: 1.1em; } .menu__list li:has(.menu__sublinks) { padding-bottom: 0; } .menu__meta { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-4); margin-top: var(--space-5); font-family: var(--f-mono); font-size: .9rem; color: var(--ink-2); } .menu__meta a:hover { color: var(--heat); } /* ---------- HERO ---------- */ .hero { position: relative; height: 100svh; min-height: 720px; padding: var(--pad-x); padding-top: clamp(6rem, 12vh, 9rem); display: grid; /* Without explicit columns, the auto-column sizes to the largest child's max-content. .hero__title at 64px Anton is ~491px wide on mobile, which would push every child to 491px. minmax(0, 1fr) caps the column at the parent's content width — title bleed clips visually via overflow:hidden. */ grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr auto; gap: var(--space-3); isolation: isolate; overflow: hidden; } .hero__canvas { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -2; } .hero__grain { position: absolute; inset: 0; background-image: url("data:image/svg+xml;utf8,"); opacity: 0.18; mix-blend-mode: overlay; pointer-events: none; z-index: -1; } .hero__top { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: var(--space-2); font-family: var(--f-mono); font-size: var(--fs-small); color: var(--ink-2); letter-spacing: .08em; text-transform: uppercase; } .hero__ticker { display: flex; align-items: center; gap: .8em; } .hero__ticker .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--lime); box-shadow: 0 0 12px var(--lime); animation: pulse 1.6s var(--ease-out) infinite; } .hero__ticker .sep { opacity: .35; } .hero__title { font-family: var(--f-display); font-size: var(--fs-h1); line-height: .82; letter-spacing: -.04em; text-transform: uppercase; margin: 0; align-self: center; } .hero__title .line { display: block; overflow: hidden; } .hero__title .line > span { display: inline-block; } .hero__title .italic { text-transform: none; letter-spacing: -.06em; padding-left: .15em; } .hero__meta { display: grid; grid-template-columns: repeat(4, auto); gap: var(--space-4); align-items: end; border-top: 1px solid var(--line); padding-top: var(--space-2); } .hero__meta-block p:not(.eyebrow) { font-family: var(--f-display); font-size: clamp(1.2rem, 1.8vw, 1.6rem); line-height: 1.05; letter-spacing: -.01em; text-transform: uppercase; margin: .4em 0 0; font-weight: 400; } .hero__cta-block { justify-self: end; } .hero__bottom { display: flex; justify-content: space-between; align-items: end; font-family: var(--f-mono); font-size: var(--fs-small); color: var(--ink-2); letter-spacing: .08em; text-transform: uppercase; } .hero__scroll { display: inline-flex; align-items: center; gap: .8em; margin: 0; animation: bob 2.6s var(--ease-out) infinite; } @keyframes bob { 0%,100% { transform: translateY(0);} 50% { transform: translateY(4px);} } .hero__credits { margin: 0; } /* ---------- MARQUEE ---------- */ .marquee { background: var(--ink); color: var(--ink-dark); border-block: 1px solid var(--ink); overflow: hidden; padding: var(--space-3) 0; position: relative; } .marquee__track { display: flex; width: max-content; } .marquee__row { display: flex; align-items: center; gap: var(--space-3); font-family: var(--f-display); font-size: clamp(1.6rem, 3.4vw, 3.4rem); text-transform: uppercase; letter-spacing: -.01em; white-space: nowrap; padding-right: var(--space-3); animation: marquee 50s linear infinite; } .marquee__row i { color: var(--heat); font-style: normal; font-size: .7em; font-family: var(--f-body); margin: 0 .2em; } .marquee:hover .marquee__row { animation-play-state: paused; } @keyframes marquee { to { transform: translateX(-50%); } } .marquee__track--big .marquee__row { font-size: clamp(4rem, 14vw, 16rem); letter-spacing: -.04em; } /* ---------- MANIFESTO ---------- */ .manifesto { display: grid; grid-template-columns: 1fr 4fr; gap: var(--space-4); padding: var(--space-7) var(--pad-x); border-top: 1px solid var(--line); } .manifesto__rail { padding-top: .6em; } .manifesto__lead { font-family: var(--f-display-2); font-weight: 900; font-size: clamp(1.6rem, 3vw, 3.2rem); line-height: 1.1; letter-spacing: -.02em; margin: 0 0 var(--space-5); text-wrap: balance; } .manifesto__lead em { color: var(--heat); } .manifesto__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-3); border-top: 1px solid var(--line); padding-top: var(--space-3); } .manifesto__card { padding: var(--space-3) 0; } .manifesto__card .num { font-family: var(--f-mono); font-size: .72rem; letter-spacing: .14em; color: var(--ink-2); margin: 0 0 var(--space-3); } .manifesto__card h3 { font-family: var(--f-display); font-size: clamp(1.4rem, 2.2vw, 2rem); line-height: 1; letter-spacing: -.01em; text-transform: uppercase; margin: 0 0 .5em; font-weight: 400; } .manifesto__card p { font-size: .98rem; color: var(--ink-2); line-height: 1.55; margin: 0; max-width: 32ch; } /* ---------- DATES ---------- */ .dates { background: var(--paper); color: var(--ink-dark); position: relative; } .dates .section-title .italic em { color: var(--heat); } .dates .eyebrow { color: var(--mute); } .dates .eyebrow .dot { background: var(--ink-dark); box-shadow: none; } .dates__list { border-top: 1px solid rgba(11,11,12,.15); margin: 0 var(--pad-x); } .date { border-bottom: 1px solid rgba(11,11,12,.15); position: relative; } .date__row { width: 100%; display: grid; grid-template-columns: 50px 130px 1fr 1.4fr 30px; align-items: center; gap: var(--space-3); padding: clamp(1.4rem, 2.4vw, 2.4rem) 0; text-align: left; position: relative; z-index: 2; transition: padding var(--t-med) var(--ease-power); } .date__row::before { content: ""; position: absolute; inset: 0; background: var(--ink-dark); transform: scaleY(0); transform-origin: bottom; transition: transform var(--t-med) var(--ease-power); z-index: -1; } .date.is-open .date__row::before, .date__row:hover::before { transform: scaleY(1); transform-origin: top; } .date.is-open .date__row, .date__row:hover { color: var(--paper); padding-inline: var(--space-3); } .date.is-open .date__icon svg, .date__row:hover .date__icon svg { transform: rotate(45deg); } .date__index { font-family: var(--f-mono); font-size: .72rem; letter-spacing: .14em; color: var(--mute); } .date__day { display: flex; align-items: baseline; gap: .15em; font-family: var(--f-display); letter-spacing: -.02em; text-transform: uppercase; } .date__day .num { font-size: clamp(2.4rem, 4.4vw, 4.4rem); line-height: .85; } .date__day .mo { font-size: clamp(1rem, 1.4vw, 1.4rem); margin-left: .2em; opacity: .65; } .date__name { font-family: var(--f-display); font-size: clamp(1.2rem, 1.7vw, 1.6rem); text-transform: uppercase; letter-spacing: -.01em; line-height: 1; } .date__head { font-family: var(--f-italic); font-style: italic; font-size: clamp(1.1rem, 1.6vw, 1.5rem); line-height: 1.15; text-align: right; letter-spacing: -.01em; } .date__icon svg { transition: transform var(--t-med) var(--ease-power); } /* Open panel */ .date__panel { display: grid; grid-template-columns: repeat(6, 1fr); gap: var(--space-3); padding: 0 var(--space-3) 0; background: var(--ink-dark); color: var(--paper); max-height: 0; overflow: hidden; transition: max-height var(--t-slow) var(--ease-power), padding var(--t-slow) var(--ease-power); } .date.is-open .date__panel { max-height: 800px; padding: var(--space-2) var(--space-3) var(--space-5); } .date__col p { margin: 0 0 .5em; } .date__col .eyebrow { color: rgba(239,234,224,.6); } .date__col .eyebrow .dot { background: var(--heat); } .date__col p:not(.eyebrow) { font-family: var(--f-display); font-size: clamp(1.1rem, 1.5vw, 1.5rem); line-height: 1.05; letter-spacing: -.01em; text-transform: uppercase; font-weight: 400; } .date[data-tone="heat"] .date__col .eyebrow .dot { background: var(--heat); } .date[data-tone="lime"] .date__col .eyebrow .dot { background: var(--lime); } .date[data-tone="sky"] .date__col .eyebrow .dot { background: var(--sky); } .date__buy { display: flex; flex-direction: column; gap: .35em; margin: .8em 0 0; font-size: .9rem; } .date__buy .link { font-family: var(--f-mono); font-size: .76rem; letter-spacing: .12em; text-transform: uppercase; border-bottom-color: currentColor; width: fit-content; } .date__buy-note { font-family: var(--f-mono); font-size: .68rem; letter-spacing: .1em; text-transform: uppercase; opacity: .55; } .dates__all { display: inline-flex; align-items: center; gap: .8em; margin: var(--space-5) var(--pad-x) var(--space-7); padding: 1em 1.4em; border: 1px solid rgba(11,11,12,.2); border-radius: 999px; font-family: var(--f-mono); font-size: .82rem; letter-spacing: .14em; text-transform: uppercase; transition: background var(--t-fast) var(--ease-out), color var(--t-fast) var(--ease-out); } .dates__all:hover { background: var(--ink-dark); color: var(--paper); } /* ---------- LINEUP TEASER (BENTO) ---------- */ .lineup-teaser { background: var(--bg); padding-bottom: var(--space-7); } .bento { display: grid; grid-template-columns: repeat(6, 1fr); grid-auto-rows: 220px; gap: clamp(.6rem, 1vw, 1rem); padding: 0 var(--pad-x); } .bento__card { position: relative; overflow: hidden; border-radius: var(--radius); background: var(--bg-2); display: flex; align-items: flex-end; padding: var(--space-2); transition: transform var(--t-med) var(--ease-power); isolation: isolate; grid-column: span 2; } .bento__card:hover { transform: translateY(-4px); } .bento__card--xl { grid-column: span 3; grid-row: span 2; } .bento__card--lg { grid-column: span 2; grid-row: span 2; } .bento__card--all { background: var(--paper); color: var(--ink-dark); align-items: center; justify-content: center; text-align: center; } .bento__card--all h3 { font-family: var(--f-display); font-size: clamp(1.6rem, 3vw, 2.6rem); line-height: 1; text-transform: uppercase; margin: 0; font-weight: 400; } .bento__card--all p { font-family: var(--f-mono); font-size: .8rem; letter-spacing: .14em; text-transform: uppercase; margin: .8em 0 1.2em; opacity: .7; } .bento__card--all .arrow { display: inline-block; font-size: 1.6rem; transition: transform var(--t-med) var(--ease-power); } .bento__card--all:hover .arrow { transform: translateX(8px); } .bento__poster { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding: var(--space-3); z-index: -1; overflow: hidden; } .bento__poster::before, .bento__poster::after { content: ""; position: absolute; inset: 0; z-index: -1; } .bento__poster::before { background: radial-gradient(circle at 30% 20%, var(--c1, var(--heat)) 0%, transparent 60%), radial-gradient(circle at 80% 80%, var(--c2, var(--sky)) 0%, transparent 55%), linear-gradient(135deg, var(--bg-2), var(--bg-3)); filter: saturate(1.2); transition: transform var(--t-slow) var(--ease-power), filter var(--t-slow) var(--ease-power); } .bento__poster::after { background-image: url("data:image/svg+xml;utf8,"); opacity: 0.25; mix-blend-mode: overlay; } .bento__card:hover .bento__poster::before { transform: scale(1.1) rotate(2deg); filter: saturate(1.4); } .bento__poster span { font-family: var(--f-display); font-size: clamp(2rem, 5vw, 5rem); line-height: .85; letter-spacing: -.03em; text-transform: uppercase; color: rgba(255,255,255,.96); text-align: center; text-wrap: balance; mix-blend-mode: exclusion; transform: rotate(-2deg); text-shadow: 0 2px 30px rgba(0,0,0,.4); } .bento__card[data-tone="heat"] { --c1: #FF3B14; --c2: #FF6BAA; } .bento__card[data-tone="lime"] { --c1: #D7FF1E; --c2: #4A6CF7; } .bento__card[data-tone="sky"] { --c1: #4A6CF7; --c2: #FF6BAA; } .bento__card[data-tone="ink"] { --c1: #1B191C; --c2: #FF3B14; } .bento__meta { position: relative; z-index: 2; background: rgba(11,11,12,.55); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); padding: .7em .9em; border-radius: 10px; border: 1px solid rgba(255,255,255,.12); width: fit-content; } .bento__meta--center { background: none; border: none; padding: 0; backdrop-filter: none; -webkit-backdrop-filter: none; } .bento__meta .eyebrow { color: var(--ink); opacity: .8; } .bento__meta h3 { font-family: var(--f-display); font-size: clamp(1rem, 1.4vw, 1.4rem); line-height: 1; letter-spacing: 0; text-transform: uppercase; margin: .4em 0 0; font-weight: 400; } /* ---------- STATS ---------- */ .stats { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: var(--space-6) var(--pad-x); display: grid; gap: var(--space-5); } .stats__row { display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--space-3); align-items: end; } .stat { border-top: 1px solid var(--line); padding-top: var(--space-2); } .stat .num { font-family: var(--f-display); font-size: clamp(2.6rem, 6vw, 6rem); line-height: .9; letter-spacing: -.02em; margin: 0 0 var(--space-2); font-feature-settings: "tnum"; } .stat .lbl { font-family: var(--f-mono); font-size: .78rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-2); margin: 0; } .stats__quote { max-width: 60ch; } .stats__quote p { font-family: var(--f-italic); font-style: italic; font-size: clamp(1.3rem, 2vw, 2rem); line-height: 1.25; margin: 0; color: var(--ink); } .stats__quote em { color: var(--heat); font-size: 1.4em; vertical-align: -.05em; } /* ---------- EXPERIENCE ---------- */ .experience { background: var(--paper); color: var(--ink-dark); padding-bottom: var(--space-7); } .experience .section-title .italic em { color: var(--heat); } .experience .eyebrow .dot { background: var(--ink-dark); box-shadow: none; } .experience .eyebrow { color: var(--mute); } .experience__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-2); padding: 0 var(--pad-x); } .exp-card { position: relative; padding: clamp(1.5rem, 2.5vw, 2.5rem); border-radius: var(--radius); background: var(--paper-2); overflow: hidden; isolation: isolate; min-height: 320px; display: flex; flex-direction: column; justify-content: flex-end; gap: .5em; transition: transform var(--t-med) var(--ease-power); } .exp-card:hover { transform: translateY(-4px); } .exp-card__bg { position: absolute; inset: 0; z-index: -1; background-position: center; background-size: cover; filter: saturate(.9) contrast(1.05); transition: transform var(--t-slow) var(--ease-power); } .exp-card:hover .exp-card__bg { transform: scale(1.08); } .exp-card__bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 30%, rgba(11,11,12,.55) 100%); } .exp-card[data-reveal] .eyebrow, .exp-card[data-reveal] h3, .exp-card[data-reveal] p { color: var(--paper); } .exp-card .eyebrow { color: rgba(239,234,224,.75); } .exp-card .eyebrow .dot { background: var(--lime); box-shadow: 0 0 10px var(--lime); } .exp-card h3 { font-family: var(--f-display); font-size: clamp(1.6rem, 2.6vw, 2.4rem); line-height: 1; text-transform: uppercase; letter-spacing: -.01em; margin: 0; font-weight: 400; } .exp-card p:last-of-type { font-size: .98rem; line-height: 1.5; margin: 0; max-width: 38ch; } /* Backgrounds with generative gradients */ .exp-card__bg[data-bg="food"] { background: linear-gradient(135deg, #FF3B14, #FF6BAA 60%, #4A6CF7); } .exp-card__bg[data-bg="art"] { background: linear-gradient(135deg, #4A6CF7, #1B191C 70%); } .exp-card__bg[data-bg="pre"] { background: linear-gradient(135deg, #D7FF1E, #FF3B14); } .exp-card__bg[data-bg="travel"] { background: linear-gradient(135deg, #1B191C, #4A6CF7); } .exp-card__bg[data-bg="stay"] { background: linear-gradient(135deg, #FF6BAA, #D7FF1E 80%); } .exp-card__bg[data-bg="access"] { background: linear-gradient(135deg, #0B0B0C, #FF3B14 80%); } /* ---------- TICKETS CTA ---------- */ .tickets-cta { background: var(--heat); color: #fff; padding: var(--space-7) var(--pad-x); position: relative; overflow: hidden; } .tickets-cta::before { content: ""; position: absolute; inset: 0; background-image: url("data:image/svg+xml;utf8,"); opacity: .14; mix-blend-mode: overlay; pointer-events: none; } .tickets-cta__inner { max-width: 1300px; } .tickets-cta .section-title .italic em { color: var(--lime); } .tickets-cta .eyebrow { color: rgba(255,255,255,.8); } .tickets-cta .eyebrow .dot { background: var(--lime); } .tickets-cta__lede { font-family: var(--f-italic); font-style: italic; font-size: clamp(1.2rem, 1.8vw, 1.8rem); line-height: 1.3; max-width: 52ch; margin: var(--space-3) 0 var(--space-4); color: rgba(255,255,255,.92); } .tickets-cta__actions { display: flex; flex-wrap: wrap; gap: var(--space-2); } .tickets-cta .btn--lime { background: var(--lime); color: var(--ink-dark); } /* ---------- PARTNERS ---------- */ .partners { padding-bottom: var(--space-7); } .partners__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; padding: 0 var(--pad-x); border-top: 1px solid var(--line); border-left: 1px solid var(--line); } .partner { border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: var(--space-4) var(--space-3); transition: background var(--t-fast) var(--ease-out), color var(--t-fast) var(--ease-out); } .partner:hover { background: var(--ink); color: var(--ink-dark); } .partner span { display: block; font-family: var(--f-display); font-size: clamp(1.2rem, 1.8vw, 2rem); letter-spacing: -.01em; text-transform: uppercase; line-height: 1; } .partner em { display: block; margin-top: .5em; font-family: var(--f-mono); font-size: .76rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-2); font-style: normal; } .partner:hover em { color: var(--mute); } /* ---------- NEWSLETTER ---------- */ .newsletter { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: var(--space-6) var(--pad-x); } .newsletter__inner { display: grid; grid-template-columns: 1fr 1.2fr; gap: var(--space-5); align-items: end; } .newsletter__title { font-family: var(--f-display-2); font-weight: 900; font-size: clamp(1.4rem, 2.4vw, 2.6rem); line-height: 1.1; letter-spacing: -.02em; margin: var(--space-2) 0 0; text-wrap: balance; } .newsletter__form { display: grid; grid-template-columns: 1fr auto; grid-template-rows: auto auto; gap: .6em; align-items: center; } .newsletter__form input { background: transparent; border: 0; border-bottom: 1px solid var(--line-strong); padding: 1em 0; font-family: var(--f-display); font-size: clamp(1.2rem, 2vw, 1.8rem); color: var(--ink); outline: none; transition: border-color var(--t-fast) var(--ease-out); } .newsletter__form input::placeholder { color: var(--ink-2); } .newsletter__form input:focus { border-color: var(--heat); } .newsletter__form button { grid-row: 1; } .newsletter__note { grid-column: 1 / -1; font-family: var(--f-mono); font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-2); margin: 0; } /* ---------- FOOTER ---------- */ .footer { background: var(--bg); color: var(--ink); padding-bottom: var(--space-3); position: relative; overflow: hidden; } .footer__marquee { border-bottom: 1px solid var(--line); } .footer__marquee .marquee__row { font-size: clamp(3rem, 8vw, 9rem); letter-spacing: -.03em; animation-duration: 36s; color: var(--ink); } .footer__marquee .marquee__row i { color: var(--heat); font-size: .8em; } .footer .marquee { background: var(--bg); border: 0; } .footer__grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr 1fr; gap: var(--space-4); padding: var(--space-5) var(--pad-x); } .footer__brand p { font-family: var(--f-italic); font-style: italic; font-size: 1.1rem; line-height: 1.4; margin: var(--space-2) 0 0; color: var(--ink-2); } .footer__col ul { display: grid; gap: .6em; margin-top: var(--space-2); } .footer__col a { font-family: var(--f-display); font-size: 1.2rem; text-transform: uppercase; letter-spacing: -.01em; transition: color var(--t-fast) var(--ease-out); } .footer__col a:hover { color: var(--heat); } .footer__map { display: block; margin-top: var(--space-2); aspect-ratio: 1; background: var(--bg-2); border-radius: var(--radius); overflow: hidden; color: var(--ink-2); transition: color var(--t-fast) var(--ease-out); } .footer__map:hover { color: var(--ink); } .footer__bottom { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--space-2); padding: var(--space-3) var(--pad-x); border-top: 1px solid var(--line); font-family: var(--f-mono); font-size: .76rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-2); } .footer__bottom ul { display: flex; flex-wrap: wrap; margin: -.4em -.7em; } .footer__bottom li { display: flex; } .footer__bottom a { display: inline-block; padding: .6em .7em; position: relative; z-index: 1; } .footer__bottom a:hover { color: var(--ink); } .footer__type { font-family: var(--f-display); font-size: clamp(4rem, 22vw, 28rem); line-height: .82; letter-spacing: -.05em; text-transform: uppercase; color: var(--ink); white-space: nowrap; text-align: center; margin-top: var(--space-2); opacity: .98; user-select: none; background: linear-gradient(180deg, var(--ink), transparent); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; padding: 0 var(--pad-x); } /* ---------- REVEAL UTILITIES ---------- Visible by default — JS animates from hidden state via gsap.from(). */ [data-reveal] { opacity: 1; transform: none; } /* Splitting.js character entrance — JS handles the hidden initial state via gsap.from() so chars are visible by default if JS fails. */ .section-title .char, .hero__title .char { display: inline-block; } /* ---------- RESPONSIVE ---------- */ @media (max-width: 1100px) { .hero__meta { grid-template-columns: repeat(2, 1fr); gap: var(--space-3); } .hero__cta-block { grid-column: 1 / -1; justify-self: stretch; } .hero__cta-block .btn { width: 100%; justify-content: center; } .manifesto { grid-template-columns: 1fr; } .manifesto__grid { grid-template-columns: repeat(2, 1fr); } .bento { grid-template-columns: repeat(4, 1fr); } .bento__card--xl { grid-column: span 4; grid-row: span 2; } .bento__card--lg { grid-column: span 2; grid-row: span 2; } .bento__card { grid-column: span 2; } .experience__grid { grid-template-columns: repeat(2, 1fr); } .stats__row { grid-template-columns: repeat(3, 1fr); } .partners__grid { grid-template-columns: repeat(3, 1fr); } .footer__grid { grid-template-columns: repeat(3, 1fr); } .newsletter__inner { grid-template-columns: 1fr; } .nav__links { display: none; } .nav__menu { display: inline-block; } .date__panel { grid-template-columns: repeat(3, 1fr); } .date.is-open .date__panel { max-height: 1000px; } } @media (max-width: 720px) { body { font-size: 15px; } .nav__cta { display: none; } .nav__wordmark em { display: none; } .hero { min-height: 600px; } .hero__meta { grid-template-columns: 1fr 1fr; } .date__row { grid-template-columns: 30px 1fr 30px; gap: var(--space-2); padding: 1.4rem 0; } .date__day { display: none; } .date__head { display: none; } .date__panel { grid-template-columns: repeat(2, 1fr); } .date.is-open .date__panel { max-height: 1400px; } .manifesto__grid { grid-template-columns: 1fr; } .bento { grid-auto-rows: 180px; grid-template-columns: repeat(2, 1fr); } .bento__card, .bento__card--xl, .bento__card--lg { grid-column: span 2; grid-row: span 1; } .bento__card--xl { grid-row: span 2; } .experience__grid { grid-template-columns: 1fr; } .stats__row { grid-template-columns: repeat(2, 1fr); } .partners__grid { grid-template-columns: repeat(2, 1fr); } .footer__grid { grid-template-columns: 1fr 1fr; } .footer__col--map { grid-column: 1 / -1; } .menu__meta { grid-template-columns: 1fr; } .menu__list a { font-size: clamp(2rem, 12vw, 4rem); } } /* ---------- PAGE-SPECIFIC ---------- */ .page-head { padding: clamp(8rem, 16vh, 14rem) var(--pad-x) var(--space-5); border-bottom: 1px solid var(--line); } .page-head__eyebrow { margin-bottom: var(--space-3); } .page-head h1 { font-family: var(--f-display); font-size: clamp(3rem, 11vw, 12rem); line-height: .85; letter-spacing: -.04em; text-transform: uppercase; margin: 0; } .page-head h1 .italic { letter-spacing: -.06em; } .page-head__lede { font-family: var(--f-italic); font-style: italic; font-size: clamp(1.2rem, 1.8vw, 1.8rem); max-width: 60ch; color: var(--ink-2); margin: var(--space-3) 0 0; } /* lineup page filters */ .lineup-filters { position: sticky; top: clamp(64px, 8vh, 88px); z-index: 50; display: flex; flex-wrap: wrap; gap: .6em; padding: var(--space-2) var(--pad-x); background: rgba(11,11,12,.7); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); font-family: var(--f-mono); font-size: .82rem; letter-spacing: .12em; text-transform: uppercase; } .lineup-filters button { padding: .6em 1em; border: 1px solid var(--line-strong); border-radius: 999px; transition: background var(--t-fast) var(--ease-out), color var(--t-fast) var(--ease-out), border-color var(--t-fast) var(--ease-out); } .lineup-filters button.is-on, .lineup-filters button:hover { background: var(--heat); border-color: var(--heat); color: #fff; } .artists { padding: var(--space-5) var(--pad-x) var(--space-7); display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(.6rem, 1vw, 1rem); } .artist { display: block; position: relative; aspect-ratio: 4/5; border-radius: var(--radius); overflow: hidden; isolation: isolate; background: var(--bg-2); transition: transform var(--t-med) var(--ease-power); } .artist:hover { transform: translateY(-4px); } .artist__bg { position: absolute; inset: 0; z-index: -1; } .artist__bg::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 30% 20%, var(--c1, var(--heat)) 0%, transparent 60%), radial-gradient(circle at 80% 80%, var(--c2, var(--sky)) 0%, transparent 55%), linear-gradient(135deg, var(--bg-2), var(--bg-3)); filter: saturate(1.2); transition: transform var(--t-slow) var(--ease-power); } .artist:hover .artist__bg::before { transform: scale(1.08) rotate(-1deg); } .artist__bg::after { content: ""; position: absolute; inset: 0; background-image: url("data:image/svg+xml;utf8,"); opacity: .25; mix-blend-mode: overlay; } .artist__name { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding: var(--space-3); font-family: var(--f-display); font-size: clamp(2rem, 4vw, 4.5rem); line-height: .85; letter-spacing: -.03em; text-transform: uppercase; color: #fff; text-align: center; text-wrap: balance; mix-blend-mode: exclusion; text-shadow: 0 2px 30px rgba(0,0,0,.4); } .artist__meta { position: absolute; left: var(--space-2); bottom: var(--space-2); z-index: 2; background: rgba(11,11,12,.6); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); padding: .5em .8em; border-radius: 8px; border: 1px solid rgba(255,255,255,.12); font-family: var(--f-mono); font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ink); } .artist[data-tone="heat"] .artist__bg::before { --c1: #FF3B14; --c2: #FF6BAA; } .artist[data-tone="lime"] .artist__bg::before { --c1: #D7FF1E; --c2: #4A6CF7; } .artist[data-tone="sky"] .artist__bg::before { --c1: #4A6CF7; --c2: #FF6BAA; } .artist[data-tone="ink"] .artist__bg::before { --c1: #1B191C; --c2: #FF3B14; } .artist[data-tone="pink"] .artist__bg::before { --c1: #FF6BAA; --c2: #D7FF1E; } /* Artist photo overlay — duotone-tinted to match brand */ .artist__photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; filter: grayscale(100%) contrast(1.15) brightness(.62) sepia(55%) hue-rotate(-22deg) saturate(1.5); mix-blend-mode: luminosity; opacity: .78; transition: opacity var(--t-med) var(--ease-power), transform var(--t-slow) var(--ease-power), filter var(--t-med) var(--ease-power); } .artist:hover .artist__photo { opacity: .94; transform: scale(1.04); filter: grayscale(100%) contrast(1.25) brightness(.75) sepia(60%) hue-rotate(-22deg) saturate(1.7); } .artist__name { z-index: 2; } .artist__meta { z-index: 3; } .artist__bg { z-index: -1; } /* Bento card photo overlay */ .bento__poster img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; filter: grayscale(100%) contrast(1.15) brightness(.6) sepia(50%) hue-rotate(-22deg) saturate(1.4); mix-blend-mode: luminosity; opacity: .72; transition: opacity var(--t-med) var(--ease-power), transform var(--t-slow) var(--ease-power); } .bento__card:hover .bento__poster img { opacity: .9; transform: scale(1.06); } .bento__poster span { z-index: 1; } /* RCF Arena photo backdrop on stats section */ .stats { position: relative; isolation: isolate; overflow: hidden; } .stats::before { content: ""; position: absolute; inset: 0; background: url("https://www.rcfarena.com/wp-content/uploads/2023/11/RCF-ARENA_2_IottiPavarani-Tassoni-LSA_%C2%A9HuftonCrow-scaled.jpg") center/cover no-repeat; filter: grayscale(100%) contrast(1.05) brightness(.36) sepia(45%) hue-rotate(-22deg) saturate(1.4); opacity: .55; z-index: -2; } .stats::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, var(--bg) 0%, transparent 18%, transparent 82%, var(--bg) 100%), radial-gradient(ellipse at center, transparent 0%, rgba(11,11,12,.45) 80%); z-index: -1; pointer-events: none; } @media (max-width: 900px) { .artists { grid-template-columns: repeat(2,1fr); } } @media (max-width: 540px) { .artists { grid-template-columns: 1fr; } } /* TICKETS PAGE */ .tickets { display: grid; /* Auto-fit columns: each card >= 280px wide, fills available space. This prevents 3-column layouts on narrow main areas (e.g. tickets.html where the page has a 1fr sidebar + 2fr content split, leaving only ~640px for the cards on a 1280px laptop). */ grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--space-2); padding: var(--space-5) var(--pad-x) var(--space-7); } .ticket { border: 1px solid var(--line); border-radius: var(--radius-lg); padding: var(--space-4); background: var(--bg-2); display: flex; flex-direction: column; gap: var(--space-2); position: relative; overflow: hidden; transition: transform var(--t-med) var(--ease-power), border-color var(--t-fast) var(--ease-out); /* Establish a query container so child buttons can react to the card's actual rendered width, not the viewport. */ container-type: inline-size; container-name: ticket; } .ticket:hover { transform: translateY(-4px); border-color: var(--ink-2); } .ticket--feat { background: var(--heat); color: #fff; border-color: var(--heat); } .ticket--feat .ticket__type { color: rgba(255,255,255,.85); } .ticket--feat .ticket__price { color: #fff; } /* On featured (red-bg) cards, .btn--heat would be heat-on-heat (invisible), so flip primary buy CTAs to ink-dark for contrast while keeping the SAME class in the markup. Lets us standardize all primary CTAs as `btn btn--heat`. Note: only target plain `.btn` and the specific modifier classes — DON'T apply a bare `.ticket--feat .btn` rule that would also overwrite ghost. */ .ticket--feat .btn--heat { background: var(--ink-dark); color: var(--ink); } .ticket--feat .btn--heat:hover { background: var(--ink); color: var(--ink-dark); } .ticket--feat .btn--ghost { background: transparent; color: #fff; border-color: rgba(255,255,255,.5); } .ticket--feat .btn--ghost:hover { background: rgba(255,255,255,.12); border-color: #fff; } .ticket__type { font-family: var(--f-mono); font-size: .8rem; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-2); margin: 0; } .ticket__name { font-family: var(--f-display); font-size: clamp(1.6rem, 2.6vw, 2.4rem); line-height: 1; letter-spacing: -.01em; text-transform: uppercase; margin: 0; font-weight: 400; } .ticket__price { font-family: var(--f-display); font-size: clamp(2.6rem, 5vw, 4.6rem); line-height: .9; letter-spacing: -.03em; margin: 0; } .ticket__price small { font-size: .35em; vertical-align: top; opacity: .6; margin-left: .3em; font-weight: 400; } .ticket__features { display: grid; gap: .4em; margin: 0 0 var(--space-2); } .ticket__features li { font-size: .96rem; padding-left: 1.2em; position: relative; } .ticket__features li::before { content: "✺"; color: var(--lime); position: absolute; left: 0; top: 0; font-size: .9em; } .ticket--feat .ticket__features li::before { color: var(--ink-dark); } .ticket .btn { margin-top: auto; align-self: flex-start; } /* Add-to-calendar small button — sits under the buy buttons */ .ticket .cal-btn { display: inline-flex; align-items: center; gap: .5em; align-self: flex-start; padding: .4em .8em; margin-top: .3rem; background: transparent; border: 1px dashed var(--line); border-radius: 999px; color: var(--ink-2); font-family: var(--f-mono); font-size: .68rem; letter-spacing: .12em; text-transform: uppercase; cursor: pointer; transition: color var(--t-fast), border-color var(--t-fast), background var(--t-fast); } .ticket .cal-btn:hover { color: var(--ink); border-color: var(--ink-2); border-style: solid; background: var(--bg-3); } .ticket--feat .cal-btn { color: rgba(255,255,255,.75); border-color: rgba(255,255,255,.3); } .ticket--feat .cal-btn:hover { color: #fff; border-color: #fff; background: rgba(255,255,255,.08); } @media (max-width: 900px) { .tickets { grid-template-columns: 1fr; } } /* When the card itself is narrow (regardless of viewport), stretch buttons so they never overflow. Container queries react to the card's true width. Triggers on tickets.html when the card is narrowed by the sidebar layout on laptops (1280px) AND on phones (<540px) AND on landscape tablets. */ @container ticket (max-width: 340px) { .ticket { padding: var(--space-3); } .ticket .btn { align-self: stretch; justify-content: center; padding: 0.85em 1em; font-size: 0.86rem; width: 100%; min-width: 0; } .ticket .btn span { overflow: hidden; text-overflow: ellipsis; min-width: 0; } } /* Fallback for browsers without container query support (Safari < 16, older Chrome/Firefox): use a viewport breakpoint that catches phones. */ @supports not (container-type: inline-size) { @media (max-width: 540px) { .ticket { padding: var(--space-3); } .ticket .btn { align-self: stretch; justify-content: center; padding: 0.85em 1em; font-size: 0.86rem; width: 100%; } } } /* INFO PAGE */ .info-grid { display: grid; /* minmax(0, ...) prevents grid columns from being inflated by children's intrinsic min-content widths (long unbroken strings, embedded iframes, fixed-width children). Without it, `1fr` can balloon past the parent. */ grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: var(--space-5); padding: var(--space-5) var(--pad-x) var(--space-7); } .info-nav { position: sticky; top: clamp(80px, 10vh, 120px); align-self: start; display: grid; gap: .4em; font-family: var(--f-mono); font-size: .82rem; letter-spacing: .12em; text-transform: uppercase; } .info-nav a { padding: .8em 0; border-bottom: 1px solid var(--line); transition: padding var(--t-med) var(--ease-power), color var(--t-fast) var(--ease-out); } .info-nav a:hover { padding-left: .6em; color: var(--heat); } .info-section { margin-bottom: var(--space-6); } .info-section h2 { font-family: var(--f-display); font-size: clamp(2rem, 4vw, 3.6rem); line-height: .9; letter-spacing: -.03em; text-transform: uppercase; margin: 0 0 var(--space-3); font-weight: 400; } .info-section p { font-size: 1.05rem; line-height: 1.6; max-width: 65ch; color: var(--ink-2); margin: 0 0 var(--space-2); } .info-section p strong { color: var(--ink); font-weight: 600; } .info-section ul { display: grid; gap: .5em; margin-top: var(--space-2); max-width: 65ch; } .info-section ul li { padding: .6em 0; border-bottom: 1px solid var(--line); display: grid; /* Label is auto (sizes to its short content), value takes remaining 1fr and wraps naturally when long. minmax(0, 1fr) prevents the value column from being inflated by min-content of long unbroken text. */ grid-template-columns: auto minmax(0, 1fr); gap: var(--space-2); color: var(--ink-2); } .info-section ul li strong { color: var(--ink); font-weight: 500; } .info-section ul li span { text-align: right; } /* On mobile, the auto+1fr layout still squeezes labels too tight when both label and value are long. Stack vertically below 540px. */ @media (max-width: 540px) { .info-section ul li { grid-template-columns: 1fr; gap: .25em; padding: .8em 0; } .info-section ul li span { text-align: left; color: var(--ink-2); font-size: .96em; } } .faq summary { list-style: none; cursor: pointer; padding: 1.2em 0; border-bottom: 1px solid var(--line); display: grid; grid-template-columns: 1fr auto; gap: var(--space-2); font-family: var(--f-display); font-size: clamp(1.2rem, 1.8vw, 1.6rem); text-transform: uppercase; letter-spacing: -.01em; transition: color var(--t-fast) var(--ease-out); } .faq summary::-webkit-details-marker { display: none; } .faq summary::after { content: "+"; font-family: var(--f-display); font-size: 1.2em; transition: transform var(--t-med) var(--ease-power); } .faq[open] summary::after { transform: rotate(45deg); } .faq summary:hover { color: var(--heat); } .faq[open] summary { color: var(--heat); } .faq__body { padding: var(--space-2) 0 var(--space-3); color: var(--ink-2); max-width: 65ch; line-height: 1.6; } @media (max-width: 900px) { .info-grid { grid-template-columns: minmax(0, 1fr); } .info-nav { position: relative; top: 0; display: flex; flex-wrap: wrap; gap: .4em; } .info-nav a { padding: .5em .8em; border: 1px solid var(--line); border-radius: 999px; } } /* NEWS */ .news-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-2); padding: var(--space-5) var(--pad-x) var(--space-7); } .news-card { border: 1px solid var(--line); border-radius: var(--radius); padding: var(--space-3); background: var(--bg-2); display: grid; gap: var(--space-2); transition: border-color var(--t-fast) var(--ease-out), transform var(--t-med) var(--ease-power); position: relative; overflow: hidden; } .news-card:hover { transform: translateY(-4px); border-color: var(--ink-2); } .news-card--feat { grid-column: 1 / -1; padding: var(--space-4); } .news-card__date { font-family: var(--f-mono); font-size: .78rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-2); margin: 0; } .news-card__title { font-family: var(--f-display); font-size: clamp(1.6rem, 3vw, 3rem); line-height: .95; letter-spacing: -.02em; text-transform: uppercase; margin: 0; font-weight: 400; } .news-card--feat .news-card__title { font-size: clamp(2.4rem, 5vw, 5rem); } .news-card__excerpt { color: var(--ink-2); line-height: 1.5; max-width: 60ch; margin: 0; } @media (max-width: 900px) { .news-grid { grid-template-columns: 1fr; } } /* Article page */ .article { max-width: 760px; margin: 0 auto; padding: var(--space-5) var(--pad-x) var(--space-7); font-size: 1.1rem; line-height: 1.7; color: var(--ink-2); } .article h2 { font-family: var(--f-display); font-size: clamp(1.8rem, 3vw, 2.6rem); line-height: 1; text-transform: uppercase; letter-spacing: -.02em; margin: var(--space-4) 0 var(--space-2); color: var(--ink); font-weight: 400; } .article p { margin: 0 0 var(--space-2); } .article a { color: var(--heat); border-bottom: 1px solid currentColor; } .article blockquote { font-family: var(--f-italic); font-style: italic; font-size: clamp(1.4rem, 2.4vw, 2.4rem); line-height: 1.25; border-left: 3px solid var(--heat); padding-left: 1em; margin: var(--space-4) 0; color: var(--ink); } /* ---------- ARTIST DETAIL PAGE ---------- */ .artist-page { --tone-1: var(--heat); --tone-2: var(--sky); } .artist-page[data-tone="heat"] { --tone-1: #FF3B14; --tone-2: #FF6BAA; } .artist-page[data-tone="lime"] { --tone-1: #D7FF1E; --tone-2: #4A6CF7; } .artist-page[data-tone="sky"] { --tone-1: #4A6CF7; --tone-2: #FF6BAA; } .artist-page[data-tone="ink"] { --tone-1: #1B191C; --tone-2: #FF3B14; } .artist-page[data-tone="pink"] { --tone-1: #FF6BAA; --tone-2: #D7FF1E; } .artist-hero { position: relative; isolation: isolate; min-height: 100svh; padding: clamp(7rem, 14vh, 11rem) var(--pad-x) clamp(3rem, 8vh, 6rem); display: flex; align-items: flex-end; overflow: hidden; border-bottom: 1px solid var(--line); } .artist-hero__bg { position: absolute; inset: 0; z-index: -2; background: radial-gradient(circle at 30% 20%, var(--tone-1) 0%, transparent 60%), radial-gradient(circle at 80% 80%, var(--tone-2) 0%, transparent 55%), linear-gradient(135deg, var(--bg-2), var(--bg-3)); filter: saturate(1.2); background-size: cover, cover, cover; background-position: center; background-repeat: no-repeat; } .artist-hero__bg.has-photo { background-blend-mode: luminosity; filter: saturate(1.25) brightness(.9); } .artist-hero__gradient { position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(11,11,12,.35) 0%, transparent 30%, rgba(11,11,12,.65) 100%), linear-gradient(90deg, rgba(11,11,12,.55) 0%, transparent 50%); } .artist-hero__inner { max-width: 1400px; width: 100%; } .artist-hero__name { font-family: var(--f-display); font-size: clamp(4rem, 16vw, 18rem); line-height: .82; letter-spacing: -.04em; text-transform: uppercase; margin: var(--space-2) 0; color: var(--ink); text-wrap: balance; } .artist-hero__tag { font-family: var(--f-italic); font-style: italic; font-size: clamp(1.2rem, 2vw, 1.8rem); line-height: 1.3; max-width: 50ch; color: var(--ink); margin: 0; opacity: .92; } .artist-body { display: grid; grid-template-columns: 1.6fr 1fr; gap: var(--space-5); padding: var(--space-6) var(--pad-x); border-bottom: 1px solid var(--line); } .artist-bio { font-size: 1.15rem; line-height: 1.7; color: var(--ink-2); max-width: 62ch; } .artist-bio p { margin: 0 0 var(--space-3); } .artist-bio p:first-of-type { font-family: var(--f-display-2); font-weight: 900; font-size: clamp(1.4rem, 2.4vw, 2rem); line-height: 1.25; letter-spacing: -.01em; color: var(--ink); margin-bottom: var(--space-4); text-wrap: balance; } .artist-bio em { color: var(--ink); font-style: italic; } .artist-bio strong { color: var(--ink); font-weight: 600; } .artist-main { display: grid; gap: var(--space-4); max-width: 62ch; } .artist-spotify { margin-top: var(--space-3); padding: var(--space-3); border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--bg-2); display: grid; gap: var(--space-2); position: relative; isolation: isolate; } .artist-spotify::before { content: ""; position: absolute; inset: 0; border-radius: inherit; background: radial-gradient(50% 80% at 0% 0%, rgba(30, 215, 96, .14) 0%, transparent 65%); opacity: .9; z-index: -1; } .artist-spotify .eyebrow { display: flex; align-items: center; gap: .5em; margin: 0; font-family: var(--f-mono); font-size: .68rem; letter-spacing: .18em; text-transform: uppercase; color: #1ed760; } .artist-spotify .eyebrow .dot { width: 8px; height: 8px; background: #1ed760; border-radius: 50%; } .artist-spotify__lede { margin: 0; font-size: .98rem; line-height: 1.5; color: var(--ink-2); } .artist-spotify__embed { line-height: 0; } .artist-spotify__embed iframe { border: 0; display: block; } /* Likely setlist panel */ .artist-setlist { margin-top: var(--space-3); padding: var(--space-3); border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--bg-2); display: grid; gap: var(--space-2); position: relative; isolation: isolate; } .artist-setlist::before { content: ""; position: absolute; inset: 0; background: radial-gradient(70% 60% at 100% 0%, var(--heat) 0%, transparent 65%); opacity: .08; border-radius: inherit; z-index: -1; } .artist-setlist .eyebrow { display: flex; align-items: center; gap: .5em; margin: 0; font-family: var(--f-mono); font-size: .68rem; letter-spacing: .18em; text-transform: uppercase; color: var(--heat); } .artist-setlist .eyebrow .dot { width: 8px; height: 8px; background: var(--heat); border-radius: 50%; } .artist-setlist__lede { margin: 0; font-size: .98rem; line-height: 1.55; color: var(--ink-2); } .artist-setlist__list { margin: 0; padding: 0; list-style: none; display: grid; gap: .35rem; counter-reset: setlist; } .artist-setlist__list li { display: grid; grid-template-columns: auto 1fr; align-items: baseline; gap: .9rem; padding: .5rem .7rem; background: var(--bg); border-radius: 8px; border: 1px solid var(--line); transition: border-color var(--t-fast), background var(--t-fast); } .artist-setlist__list li:hover { border-color: var(--ink-2); background: var(--bg-3); } .artist-setlist__num { font-family: var(--f-mono); font-size: .7rem; letter-spacing: .12em; color: var(--ink-2); font-weight: 600; } .artist-setlist__title { font-family: var(--f-display); font-size: clamp(1rem, 1.4vw, 1.2rem); letter-spacing: -.005em; text-transform: uppercase; color: var(--ink); font-weight: 400; } .artist-setlist__src { margin: 0; font-family: var(--f-mono); font-size: .62rem; letter-spacing: .12em; text-transform: uppercase; color: var(--mute); text-align: center; } /* Artist share poster panel */ .artist-share { margin-top: var(--space-3); padding: var(--space-3); border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--bg-2); display: grid; gap: var(--space-2); position: relative; isolation: isolate; } .artist-share::before { content: ""; position: absolute; inset: 0; background: radial-gradient(70% 60% at 0% 100%, var(--lime) 0%, transparent 65%); opacity: .08; border-radius: inherit; z-index: -1; } .artist-share .eyebrow { display: flex; align-items: center; gap: .5em; margin: 0; font-family: var(--f-mono); font-size: .68rem; letter-spacing: .18em; text-transform: uppercase; color: var(--lime); } .artist-share .eyebrow .dot { width: 8px; height: 8px; background: var(--lime); border-radius: 50%; } .artist-share__lede { margin: 0; font-size: .98rem; line-height: 1.55; color: var(--ink-2); } .artist-share__actions { display: flex; flex-wrap: wrap; gap: .6rem; } [data-artist-share-canvas] { display: none; } .artist-meta { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); align-content: start; align-self: start; position: sticky; top: clamp(80px, 10vh, 120px); } .artist-meta__block { border-top: 1px solid var(--line); padding-top: var(--space-2); } .artist-meta__block p:not(.eyebrow) { font-family: var(--f-display); font-size: clamp(1rem, 1.4vw, 1.2rem); line-height: 1.15; letter-spacing: -.01em; text-transform: uppercase; margin: .4em 0 0; font-weight: 400; } .artist-meta__block .link { font-family: var(--f-mono); font-size: .82rem; letter-spacing: .12em; text-transform: uppercase; } .artist-related { padding: var(--space-6) var(--pad-x); border-bottom: 1px solid var(--line); } .artist-related .section-title { font-size: clamp(2rem, 4vw, 3.4rem); margin: var(--space-2) 0 var(--space-4); } .artist-related__list { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: var(--space-2); } .artist-related__item { display: grid; grid-template-columns: 1fr auto; grid-template-rows: auto auto; gap: .3em var(--space-2); padding: var(--space-3); border: 1px solid var(--line); border-radius: var(--radius); background: var(--bg-2); transition: transform var(--t-med) var(--ease-power), border-color var(--t-fast) var(--ease-out), background var(--t-fast) var(--ease-out); position: relative; isolation: isolate; } .artist-related__item::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 30% 30%, var(--tone-rel-1, var(--heat)), transparent 70%); opacity: 0; z-index: -1; transition: opacity var(--t-fast) var(--ease-out); border-radius: inherit; } .artist-related__item[data-tone="heat"] { --tone-rel-1: #FF3B14; } .artist-related__item[data-tone="lime"] { --tone-rel-1: #D7FF1E; } .artist-related__item[data-tone="sky"] { --tone-rel-1: #4A6CF7; } .artist-related__item[data-tone="ink"] { --tone-rel-1: #1B191C; } .artist-related__item[data-tone="pink"] { --tone-rel-1: #FF6BAA; } .artist-related__item:hover { transform: translateY(-3px); border-color: var(--ink-2); } .artist-related__item:hover::before { opacity: .15; } .artist-related__item .eyebrow { grid-column: 1; grid-row: 1; } .artist-related__item strong { grid-column: 1; grid-row: 2; font-family: var(--f-display); font-weight: 400; font-size: clamp(1.2rem, 1.6vw, 1.5rem); line-height: 1; letter-spacing: -.01em; text-transform: uppercase; } .artist-related__item .arrow { grid-column: 2; grid-row: 1 / span 2; align-self: center; font-size: 1.4rem; transition: transform var(--t-med) var(--ease-power); } .artist-related__item:hover .arrow { transform: translateX(6px); } @media (max-width: 900px) { .artist-body { grid-template-columns: 1fr; } .artist-meta { position: relative; top: 0; grid-template-columns: 1fr 1fr; } } /* Light theme variant for inverted sections in subpages */ [data-theme="light"] { --bg: var(--paper); --bg-2: var(--paper-2); --bg-3: #D8CFBE; --ink: var(--ink-dark); --ink-2: var(--mute); --line: rgba(11,11,12,.14); --line-strong: rgba(11,11,12,.3); } /* ========== TIMETABLE ========== */ .tt-controls { position: sticky; top: clamp(64px, 8vh, 88px); z-index: 50; padding: var(--space-2) var(--pad-x); background: rgba(11,11,12,.7); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); } .tt-days { display: flex; flex-wrap: wrap; gap: .5em; font-family: var(--f-mono); font-size: .82rem; letter-spacing: .12em; text-transform: uppercase; } .tt-day { padding: .6em 1em; border: 1px solid var(--line-strong); border-radius: 999px; transition: background var(--t-fast) var(--ease-out), color var(--t-fast) var(--ease-out), border-color var(--t-fast) var(--ease-out); } .tt-day.is-on, .tt-day:hover { background: var(--heat); border-color: var(--heat); color: #fff; } .tt-grid-wrap { padding: var(--space-3) var(--pad-x) var(--space-6); overflow-x: auto; } .tt-grid { min-width: 1100px; } .tt-day-label { padding: var(--space-2) 0 var(--space-3); } .tt-table { display: grid; grid-template-columns: 180px 1fr; gap: var(--space-1); border-top: 1px solid var(--line); padding-top: var(--space-2); } .tt-rule { display: none; } .tt-hour { display: none; } .tt-stage { font-family: var(--f-display); font-size: clamp(1rem, 1.4vw, 1.4rem); text-transform: uppercase; letter-spacing: -.01em; padding: var(--space-2) var(--space-2) var(--space-2) 0; border-right: 1px solid var(--line); display: flex; align-items: center; } .tt-row { position: relative; height: 90px; background: repeating-linear-gradient( 90deg, transparent 0, transparent calc((100% / 18) - 1px), rgba(244,240,232,.06) calc((100% / 18) - 1px), rgba(244,240,232,.06) calc(100% / 18) ); border-bottom: 1px solid var(--line); } .tt-slot { position: absolute; top: 6px; bottom: 6px; border-radius: 8px; padding: .5em .8em; display: flex; flex-direction: column; justify-content: center; gap: .15em; text-decoration: none; color: var(--ink); border: 1px solid var(--line-strong); background: var(--bg-2); overflow: hidden; transition: transform var(--t-fast) var(--ease-out), border-color var(--t-fast) var(--ease-out), background var(--t-fast) var(--ease-out); isolation: isolate; } .tt-slot::before { content: ""; position: absolute; inset: 0; background: linear-gradient(135deg, var(--c1, var(--heat)) 0%, transparent 80%); opacity: .25; z-index: -1; } .tt-slot[data-tone="heat"] { --c1: #FF3B14; } .tt-slot[data-tone="lime"] { --c1: #D7FF1E; } .tt-slot[data-tone="sky"] { --c1: #4A6CF7; } .tt-slot[data-tone="ink"] { --c1: #1B191C; } .tt-slot[data-tone="pink"] { --c1: #FF6BAA; } .tt-slot:hover { transform: translateY(-2px); border-color: var(--ink-2); } a.tt-slot:hover::before { opacity: .5; } .tt-slot__time { font-family: var(--f-mono); font-size: .68rem; letter-spacing: .1em; color: var(--ink-2); text-transform: uppercase; } .tt-slot__name { font-family: var(--f-display); font-size: clamp(.95rem, 1.1vw, 1.2rem); line-height: 1; letter-spacing: -.01em; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* Sunset/sunrise markers — vertical lines spanning each stage row */ .tt-sun { position: absolute; top: -28px; /* extend above the row to host the label */ bottom: 0; width: 1px; z-index: 2; pointer-events: none; } .tt-sun--sunset { background: linear-gradient(to bottom, transparent 0%, rgba(255, 175, 72, .55) 18%, rgba(255, 175, 72, .25) 100%); } .tt-sun--sunrise { background: linear-gradient(to bottom, transparent 0%, rgba(74, 108, 247, .55) 18%, rgba(74, 108, 247, .25) 100%); } .tt-sun__label { position: absolute; top: 4px; left: 0; transform: translateX(-50%); font-family: var(--f-mono); font-size: .62rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-2); white-space: nowrap; padding: .15em .5em; border-radius: 4px; background: rgba(11, 11, 12, .85); border: 1px solid var(--line); } .tt-sun--sunset .tt-sun__label { color: #ffaf48; border-color: rgba(255, 175, 72, .3); } .tt-sun--sunrise .tt-sun__label { color: var(--sky); border-color: rgba(74, 108, 247, .3); } /* ========== VENUE MAP ========== */ .map-wrap { display: grid; grid-template-columns: 200px 1fr 320px; gap: var(--space-3); padding: var(--space-3) var(--pad-x) var(--space-6); align-items: start; } .map-legend { position: sticky; top: clamp(80px, 10vh, 120px); display: flex; flex-direction: column; gap: .4em; font-family: var(--f-mono); font-size: .78rem; letter-spacing: .1em; text-transform: uppercase; } .map-legend .eyebrow { margin-bottom: var(--space-2); } .map-filter { text-align: left; padding: .6em .9em; border: 1px solid var(--line); border-radius: 999px; background: var(--bg-2); color: var(--ink); transition: background var(--t-fast) var(--ease-out), border-color var(--t-fast) var(--ease-out); } .map-filter:hover, .map-filter.is-on { background: var(--heat); border-color: var(--heat); color: #fff; } .map-canvas { position: relative; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: linear-gradient(135deg, var(--bg-2), var(--bg-3)); aspect-ratio: 1200 / 720; } .map-canvas svg { display: block; width: 100%; height: 100%; } .map-pins { position: absolute; inset: 0; pointer-events: none; } .map-pin { position: absolute; transform: translate(-50%, -50%); pointer-events: auto; display: inline-flex; align-items: center; gap: .4em; padding: 0; background: transparent; cursor: pointer; } .map-pin > i { display: inline-block; width: 14px; height: 14px; border-radius: 50%; background: var(--heat); box-shadow: 0 0 0 0 rgba(255,59,20,.7); flex: none; transition: transform var(--t-fast) var(--ease-out), box-shadow var(--t-fast) var(--ease-out); } .map-pin > span { font-family: var(--f-mono); font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; background: rgba(11,11,12,.85); color: var(--ink); padding: .35em .6em; border-radius: 6px; white-space: nowrap; border: 1px solid var(--line); opacity: 0; transform: translateX(-4px); transition: opacity var(--t-fast) var(--ease-out), transform var(--t-fast) var(--ease-out); } .map-pin[data-cat="stage"] > i { background: var(--heat); width: 18px; height: 18px; } .map-pin[data-cat="gate"] > i { background: var(--lime); } .map-pin[data-cat="food"] > i { background: var(--pink); } .map-pin[data-cat="welfare"] > i { background: #00C878; } .map-pin[data-cat="access"] > i { background: var(--sky); } .map-pin[data-cat="parking"] > i { background: var(--ink-2); } .map-pin:hover > i, .map-pin.is-active > i { transform: scale(1.4); box-shadow: 0 0 0 8px rgba(255,59,20,.18); } .map-pin:hover > span, .map-pin.is-active > span, .map-pin.is-hover > span { opacity: 1; transform: translateX(0); } .map-pin.is-hidden { display: none; } .map-pin.is-active > i { box-shadow: 0 0 0 10px rgba(255,59,20,.25); } .map-info { position: sticky; top: clamp(80px, 10vh, 120px); padding: var(--space-3); border: 1px solid var(--line); border-radius: var(--radius); background: var(--bg-2); align-self: start; } .map-info__title { font-family: var(--f-display); font-size: clamp(1.4rem, 2vw, 1.8rem); line-height: 1; letter-spacing: -.01em; text-transform: uppercase; margin: var(--space-2) 0; font-weight: 400; } .map-info__body { font-size: .96rem; line-height: 1.55; color: var(--ink-2); } .map-info__body a { color: var(--heat); border-bottom: 1px solid currentColor; } .map-info__body strong { color: var(--ink); } @media (max-width: 1100px) { .map-wrap { grid-template-columns: 1fr; } .map-legend { position: relative; top: 0; flex-direction: row; flex-wrap: wrap; } .map-info { position: relative; top: 0; } } @media (max-width: 720px) { .map-pin > span { display: none; } } /* ========== COUNTDOWN ========== */ .countdown { display: inline-flex; align-items: baseline; gap: .6em; font-family: var(--f-mono); font-size: var(--fs-small); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2); } .countdown__nums { display: inline-flex; gap: .8em; align-items: baseline; } .countdown__num { font-family: var(--f-display); font-size: clamp(1.4rem, 2.2vw, 2rem); line-height: 1; letter-spacing: -.02em; font-feature-settings: "tnum"; color: var(--ink); display: inline-flex; align-items: baseline; gap: .15em; } .countdown__num em { font-family: var(--f-mono); font-style: normal; font-size: .35em; font-weight: normal; text-transform: uppercase; letter-spacing: .12em; color: var(--ink-2); } .countdown__sep { color: var(--ink-2); opacity: .4; } /* ========== SPOTIFY EMBED ========== */ .spotify-section { border-top: 1px solid var(--line); padding: var(--space-6) var(--pad-x); } .spotify-section__head { display: grid; gap: var(--space-3); margin-bottom: var(--space-4); max-width: 60ch; } .spotify-embed { border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: var(--bg-2); } .spotify-embed iframe { display: block; width: 100%; border: 0; border-radius: var(--radius); } /* ========== CURSOR VARIANCE PER SECTION ========== */ /* Sections can declare cursor preference via data-cursor-section attribute. The custom cursor reads it on entry and applies a class. */ .cursor.is-on-light .cursor__dot { background: var(--ink-dark); } .cursor.is-on-light .cursor__ring { border-color: var(--ink-dark); } .cursor.is-on-heat .cursor__dot { background: #fff; } .cursor.is-on-heat .cursor__ring { border-color: #fff; } .cursor.is-on-photo .cursor__ring { width: 56px; height: 56px; border-color: var(--lime); } /* Sections light bg → invert cursor */ .dates, .experience, .partners { /* paper sections */ } [data-cursor-section="paper"] { /* hooks below via JS */ } /* ========== PRESS DOWNLOADS ========== */ .press-downloads { display: grid; gap: 0; max-width: 65ch; margin-top: var(--space-2); } .press-downloads li { border-bottom: 1px solid var(--line); } .press-downloads a { display: grid; grid-template-columns: 1fr auto; grid-template-rows: auto auto; gap: .25em var(--space-2); padding: var(--space-2) 0; align-items: baseline; transition: padding-left var(--t-med) var(--ease-power), color var(--t-fast) var(--ease-out); } .press-downloads a:hover { padding-left: .5em; color: var(--heat); } .press-downloads__name { grid-column: 1; grid-row: 1; font-family: var(--f-display); font-size: clamp(1.1rem, 1.5vw, 1.4rem); text-transform: uppercase; letter-spacing: -.01em; } .press-downloads__meta { grid-column: 1; grid-row: 2; font-family: var(--f-mono); font-size: .76rem; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); } .press-downloads__arrow { grid-column: 2; grid-row: 1 / span 2; align-self: center; font-size: 1.4rem; color: var(--ink-2); transition: transform var(--t-fast) var(--ease-out), color var(--t-fast) var(--ease-out); } .press-downloads a:hover .press-downloads__arrow { transform: translateY(2px); color: var(--heat); } /* ========== PARTNERS DETAIL PAGE ========== */ .partners-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(.6rem, 1vw, 1rem); padding: var(--space-4) var(--pad-x) var(--space-5); } .partner-card { display: grid; grid-template-rows: auto 1fr auto auto; gap: var(--space-2); padding: var(--space-3); border: 1px solid var(--line); border-radius: var(--radius); background: var(--bg-2); position: relative; isolation: isolate; overflow: hidden; transition: transform var(--t-med) var(--ease-power), border-color var(--t-fast) var(--ease-out); } .partner-card::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 30% 20%, var(--c1, var(--heat)) 0%, transparent 65%), radial-gradient(circle at 80% 80%, var(--c2, var(--sky)) 0%, transparent 60%); opacity: .12; z-index: -1; transition: opacity var(--t-med) var(--ease-power); } .partner-card[data-tone="heat"] { --c1: #FF3B14; --c2: #FF6BAA; } .partner-card[data-tone="lime"] { --c1: #D7FF1E; --c2: #4A6CF7; } .partner-card[data-tone="sky"] { --c1: #4A6CF7; --c2: #FF6BAA; } .partner-card[data-tone="ink"] { --c1: #1B191C; --c2: #FF3B14; } .partner-card[data-tone="pink"] { --c1: #FF6BAA; --c2: #D7FF1E; } .partner-card:hover { transform: translateY(-4px); border-color: var(--ink-2); } .partner-card:hover::before { opacity: .25; } .partner-card h2 { font-family: var(--f-display); font-size: clamp(2rem, 3.4vw, 3rem); line-height: .9; letter-spacing: -.02em; text-transform: uppercase; margin: 0; font-weight: 400; } .partner-card p:not(.eyebrow) { font-size: .92rem; line-height: 1.45; color: var(--ink-2); margin: 0; } .partner-card .arrow { font-size: 1.4rem; align-self: end; justify-self: end; transition: transform var(--t-med) var(--ease-power); } .partner-card:hover .arrow { transform: translateX(8px); } .partners-detail { border-top: 1px solid var(--line); } .partner-detail { padding: var(--space-7) var(--pad-x); border-bottom: 1px solid var(--line); position: relative; isolation: isolate; } .partner-detail::before { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse 70% 50% at 30% 0%, var(--c1, var(--heat)) 0%, transparent 70%), radial-gradient(ellipse 60% 50% at 80% 100%, var(--c2, var(--sky)) 0%, transparent 65%); opacity: .08; z-index: -1; } .partner-detail[data-tone="heat"] { --c1: #FF3B14; --c2: #FF6BAA; } .partner-detail[data-tone="lime"] { --c1: #D7FF1E; --c2: #4A6CF7; } .partner-detail[data-tone="sky"] { --c1: #4A6CF7; --c2: #FF6BAA; } .partner-detail[data-tone="ink"] { --c1: #1B191C; --c2: #FF3B14; } .partner-detail[data-tone="pink"] { --c1: #FF6BAA; --c2: #D7FF1E; } .partner-detail__head { margin-bottom: var(--space-4); max-width: 1300px; } .partner-detail__name { font-family: var(--f-display); font-size: clamp(3rem, 9vw, 9rem); line-height: .85; letter-spacing: -.04em; text-transform: uppercase; margin: var(--space-2) 0; font-weight: 400; text-wrap: balance; } .partner-detail__tag { font-family: var(--f-italic); font-style: italic; font-size: clamp(1.2rem, 2vw, 1.8rem); line-height: 1.3; color: var(--ink); margin: 0; max-width: 50ch; } .partner-detail__body { display: grid; grid-template-columns: 1.7fr 1fr; gap: var(--space-5); align-items: start; } .partner-detail__bio { font-size: 1.08rem; line-height: 1.7; color: var(--ink-2); max-width: 65ch; } .partner-detail__bio p { margin: 0 0 var(--space-3); } .partner-detail__bio p:first-child { font-family: var(--f-display-2); font-weight: 900; font-size: clamp(1.3rem, 2.2vw, 1.8rem); line-height: 1.25; letter-spacing: -.01em; color: var(--ink); margin-bottom: var(--space-4); text-wrap: balance; } .partner-detail__bio em { color: var(--ink); font-style: italic; } .partner-detail__bio strong { color: var(--ink); font-weight: 600; } .partner-detail__meta { position: sticky; top: clamp(80px, 10vh, 120px); display: grid; gap: var(--space-3); } .partner-detail__meta > div { border-top: 1px solid var(--line); padding-top: var(--space-2); } .partner-detail__meta p:not(.eyebrow) { font-family: var(--f-display); font-size: clamp(1rem, 1.4vw, 1.3rem); line-height: 1.1; letter-spacing: -.01em; text-transform: uppercase; margin: .4em 0 0; font-weight: 400; } .partner-detail__meta .link { font-family: var(--f-mono); font-size: .82rem; letter-spacing: .12em; text-transform: uppercase; } @media (max-width: 1100px) { .partners-grid { grid-template-columns: repeat(2, 1fr); } .partner-detail__body { grid-template-columns: 1fr; } .partner-detail__meta { position: relative; top: 0; grid-template-columns: 1fr 1fr 1fr; } } @media (max-width: 540px) { .partners-grid { grid-template-columns: 1fr; } .partner-detail__meta { grid-template-columns: 1fr; } } /* Make existing index.html partner cards clickable */ a.partner { cursor: pointer; text-decoration: none; } /* ========== KONAMI EASTER EGG ========== */ .konami-mode { filter: hue-rotate(45deg) saturate(1.3) contrast(1.05); transition: filter 1.2s var(--ease-power); } .konami-mode .nav__sun { animation: spin 1.2s linear infinite; } .konami-mode::before { content: "🌞 SUMMER MODE ACTIVATED · KEEP DANCING · 🌞"; position: fixed; top: 0; left: 0; right: 0; background: var(--lime); color: var(--ink-dark); font-family: var(--f-mono); font-size: .82rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; padding: .8em var(--pad-x); z-index: 10001; text-align: center; animation: marquee 8s linear infinite; } /* ============================================ NEW FEATURES · Now Playing · My Festival · Site Search · Inventory · Cursor Photo ============================================ */ /* ---------- NOW PLAYING (day-of widget) ---------- */ .now-playing { position: fixed; bottom: clamp(16px, 2vw, 28px); right: clamp(16px, 2vw, 28px); z-index: 9000; width: min(360px, calc(100vw - 32px)); background: var(--bg-2); border: 1px solid var(--line-strong); border-radius: var(--radius); padding: 1rem 1.1rem; color: var(--ink); box-shadow: 0 24px 60px rgba(0,0,0,.45); animation: now-in .6s var(--ease-out) both; isolation: isolate; } .now-playing::before { content: ""; position: absolute; inset: 0; background: radial-gradient(120% 80% at 90% 0%, var(--heat) 0%, transparent 60%); opacity: .12; border-radius: inherit; z-index: -1; } @keyframes now-in { from { transform: translateY(20px); opacity: 0; } to { transform: translateY(0); opacity: 1; } } .now-playing .eyebrow { display: flex; align-items: center; gap: .5em; margin: 0 0 .5em; font-family: var(--f-mono); font-size: .68rem; letter-spacing: .18em; text-transform: uppercase; color: var(--heat); } .now-playing .eyebrow .dot { width: 8px; height: 8px; background: var(--heat); border-radius: 50%; box-shadow: 0 0 0 0 var(--heat); animation: pulse 1.6s var(--ease-out) infinite; } @keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(255, 59, 20, .6); } 100% { box-shadow: 0 0 0 12px rgba(255, 59, 20, 0); } } .now-playing__main { margin: 0; font-family: var(--f-display); font-size: clamp(1.4rem, 2.4vw, 1.8rem); line-height: 1; letter-spacing: -.01em; text-transform: uppercase; } .now-playing__main strong { font-weight: 400; } .now-playing__meta { margin: .25em 0 .65em; font-family: var(--f-mono); font-size: .76rem; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); } .now-playing__next { margin: 0; padding-top: .65em; border-top: 1px solid var(--line); font-size: .82rem; color: var(--ink-2); } .now-playing__next-label { font-family: var(--f-mono); font-size: .68rem; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-2); } .now-playing__next a { color: var(--ink); border-bottom: 1px solid var(--line); transition: color var(--t-fast) var(--ease-out), border-color var(--t-fast) var(--ease-out); } .now-playing__next a:hover { color: var(--lime); border-color: var(--lime); } .now-playing__close { position: absolute; top: .35em; right: .55em; width: 26px; height: 26px; font-size: 1.2rem; line-height: 1; color: var(--ink-2); border-radius: 50%; transition: color var(--t-fast), background var(--t-fast); } .now-playing__close:hover { color: var(--ink); background: var(--bg-3); } .now-playing.is-between .now-playing__main { font-size: 1.1rem; line-height: 1.2; } /* ---------- FAVORITE BUTTON (My Festival) ---------- */ .fav-btn { position: absolute; top: .65rem; right: .65rem; width: 34px; height: 34px; display: grid; place-items: center; background: rgba(11,11,12,.65); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border: 1px solid var(--line); border-radius: 50%; color: var(--ink-2); z-index: 4; transition: color var(--t-fast) var(--ease-out), background var(--t-fast) var(--ease-out), transform var(--t-fast) var(--ease-elastic), border-color var(--t-fast) var(--ease-out); } .fav-btn:hover { color: var(--ink); border-color: var(--ink-2); transform: scale(1.08); } .fav-btn.is-on { color: var(--lime); border-color: var(--lime); background: rgba(215,255,30,.12); } .fav-btn.is-on svg { animation: fav-pop .55s var(--ease-elastic); } @keyframes fav-pop { 0% { transform: scale(1); } 40% { transform: scale(1.4) rotate(-12deg); } 100% { transform: scale(1); } } /* The artist/bento cards must be position:relative for fav-btn anchoring. .tt-slot is already position:absolute in the timetable layout — that already establishes a containing block for its child absolute fav-btn, so we MUST NOT override it to position:relative or the slots stack vertically instead of laying out horizontally on the timeline row. */ .artist[id], .bento__card { position: relative; } .tt-slot .fav-btn { width: 24px; height: 24px; top: .35rem; right: .35rem; } .tt-slot .fav-btn svg { width: 12px; height: 12px; } /* ---------- TIMETABLE 'My Festival' TOGGLE ---------- */ .tt-myfest-wrap { display: flex; justify-content: flex-end; padding: .5rem var(--pad-x) 0; } .tt-myfest { display: inline-flex; align-items: center; gap: .55em; padding: .55em .9em; background: transparent; border: 1px solid var(--line); border-radius: 999px; font-family: var(--f-mono); font-size: .74rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-2); transition: color var(--t-fast), border-color var(--t-fast), background var(--t-fast); } .tt-myfest em { font-style: normal; opacity: .7; } .tt-myfest:hover { color: var(--ink); border-color: var(--ink-2); } .tt-myfest.is-on { color: var(--ink-dark); background: var(--lime); border-color: var(--lime); } .tt-grid-wrap.is-myfest .tt-slot:not(:has(.fav-btn.is-on)) { opacity: .12; pointer-events: none; filter: saturate(.4); } .tt-grid-wrap.is-myfest .tt-slot:has(.fav-btn.is-on) { outline: 2px solid var(--lime); outline-offset: 2px; } /* ---------- NAV SEARCH BUTTON ---------- */ .nav__search { display: inline-grid; place-items: center; width: 38px; height: 38px; border: 1px solid var(--line); border-radius: 50%; color: var(--ink); margin-right: .5rem; transition: color var(--t-fast), border-color var(--t-fast), transform var(--t-fast); } .nav__search:hover { color: var(--lime); border-color: var(--lime); transform: rotate(-6deg); } @media (max-width: 720px) { .nav__search { width: 34px; height: 34px; } .nav__search svg { width: 16px; height: 16px; } } /* ---------- SITE SEARCH OVERLAY ---------- */ .site-search { position: fixed; inset: 0; z-index: 10050; display: grid; place-items: start center; padding: clamp(60px, 12vh, 140px) 1rem; background: rgba(11, 11, 12, .82); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); opacity: 0; pointer-events: none; transition: opacity var(--t-med) var(--ease-out); } .site-search.is-open { opacity: 1; pointer-events: auto; } .site-search__panel { width: min(680px, 100%); background: var(--bg-2); border: 1px solid var(--line-strong); border-radius: var(--radius-lg); padding: 1.2rem 1.4rem 1rem; box-shadow: 0 50px 120px rgba(0,0,0,.6); transform: translateY(-12px); transition: transform var(--t-med) var(--ease-out); } .site-search.is-open .site-search__panel { transform: translateY(0); } .site-search__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: .7rem; } .site-search__head .eyebrow { display: flex; align-items: center; gap: .5em; color: var(--ink-2); } .site-search__head .dot { width: 8px; height: 8px; background: var(--heat); border-radius: 50%; } .site-search__close { width: 32px; height: 32px; font-size: 1.5rem; line-height: 1; color: var(--ink-2); border-radius: 50%; transition: color var(--t-fast), background var(--t-fast); } .site-search__close:hover { color: var(--ink); background: var(--bg-3); } .site-search__input { width: 100%; padding: .9em 0; background: transparent; border: 0; border-bottom: 1px solid var(--line); font-family: var(--f-display); font-size: clamp(1.6rem, 3vw, 2.2rem); letter-spacing: -.02em; text-transform: uppercase; color: var(--ink); outline: none; transition: border-color var(--t-fast); } .site-search__input:focus { border-color: var(--lime); } .site-search__input::placeholder { color: var(--mute); text-transform: none; font-family: var(--f-body); font-size: 1.1rem; letter-spacing: 0; } .site-search__results { max-height: 50vh; overflow-y: auto; margin: 0; padding: .4rem 0 0; list-style: none; } .site-search__results li { margin: 0; } .site-search__results li a { display: grid; grid-template-columns: 1fr auto; align-items: baseline; gap: 1rem; padding: .7em .8em; border-radius: 10px; color: var(--ink-2); transition: background var(--t-fast), color var(--t-fast); } .site-search__results li.is-active a, .site-search__results li a:hover { background: var(--bg-3); color: var(--ink); } .site-search__result-title { font-family: var(--f-display); font-size: 1.1rem; text-transform: uppercase; letter-spacing: -.005em; } .site-search__result-url { font-family: var(--f-mono); font-size: .7rem; letter-spacing: .12em; text-transform: uppercase; color: var(--mute); } .site-search__hint { margin: .8rem 0 0; padding-top: .7rem; border-top: 1px solid var(--line); font-family: var(--f-mono); font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; color: var(--mute); } .site-search__hint kbd { display: inline-block; padding: 2px 6px; margin: 0 2px; background: var(--bg-3); border: 1px solid var(--line); border-radius: 4px; font-family: var(--f-mono); font-size: .68rem; color: var(--ink-2); } /* ---------- TICKET INVENTORY (FOMO BARS) ---------- */ .inv-bar { position: relative; margin-top: .8rem; height: 28px; background: var(--bg-3); border: 1px solid var(--line); border-radius: 999px; overflow: hidden; isolation: isolate; } .inv-bar__fill { position: absolute; inset: 0 auto 0 0; width: 0%; background: linear-gradient(90deg, var(--lime) 0%, var(--lime-2) 100%); border-radius: inherit; z-index: 0; transition: width 1.2s var(--ease-power); } .inv-bar.is-hot .inv-bar__fill { background: linear-gradient(90deg, var(--heat-2) 0%, var(--heat) 100%); animation: hot-pulse 1.8s ease-in-out infinite alternate; } @keyframes hot-pulse { from { box-shadow: 0 0 0 rgba(255, 59, 20, .0) inset; } to { box-shadow: 0 0 24px rgba(255, 59, 20, .55) inset; } } .inv-bar__label { position: relative; z-index: 1; display: flex; align-items: center; justify-content: space-between; padding: 0 .9em; height: 100%; font-family: var(--f-mono); font-size: .68rem; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-dark); mix-blend-mode: difference; filter: invert(1); } .inv-bar__label strong { font-weight: 600; } .inv-bar.is-hot .inv-bar__label::before { content: "🔥"; margin-right: .4em; filter: none; } /* ---------- CURSOR PHOTO PREVIEW ---------- */ .cursor__photo { position: fixed; top: 0; left: 0; width: 130px; height: 130px; border-radius: 50%; background: var(--bg-3) center/cover no-repeat; /* Inline transform from JS; scale + opacity are the visible-state lever */ opacity: 0; pointer-events: none; border: 2px solid var(--ink); box-shadow: 0 14px 40px rgba(0,0,0,.5); z-index: 10000; will-change: transform, opacity; /* Hide via scale so the JS transform: translate stays untouched */ } .cursor__photo::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: 0 0 0 0 rgba(255, 59, 20, .35); transition: box-shadow var(--t-med) var(--ease-power); } .cursor__photo.is-on { opacity: 1; animation: cursor-photo-in .35s var(--ease-elastic); } @keyframes cursor-photo-in { 0% { opacity: 0; } 60% { opacity: 1; } 100% { opacity: 1; } } .cursor__photo.is-on::after { box-shadow: 0 0 0 6px rgba(255, 59, 20, .35); } /* When photo is open, soften the dot/ring/label */ .cursor.is-photo-preview .cursor__dot, .cursor.is-photo-preview .cursor__ring, .cursor.is-photo-preview .cursor__label { opacity: 0; transition: opacity var(--t-fast); } /* ---------- ARTIST CARD: PLAYING / PRIMING STATES (audio teaser) ---------- */ .artist.is-priming, .bento__card.is-priming { /* Subtle hover affordance during the 700ms hold-to-play wait — even if audio ends up blocked, the card responds. */ outline: 1px dashed var(--ink-2); outline-offset: 2px; } .artist.is-playing, .bento__card.is-playing { outline: 2px solid var(--lime); outline-offset: 4px; } .artist.is-playing::after, .bento__card.is-playing::after { content: "♪"; position: absolute; top: .65rem; left: .65rem; width: 28px; height: 28px; display: grid; place-items: center; background: var(--lime); color: var(--ink-dark); border-radius: 50%; font-size: .9rem; z-index: 5; animation: note-bounce .9s ease-in-out infinite alternate; } /* ============================================ PERSONAL WRAPPED POSTER (wrapped.html) ============================================ */ .page-wrapped { background: var(--bg); } .wrapped { padding: clamp(120px, 18vh, 200px) var(--pad-x) var(--space-7); position: relative; isolation: isolate; } .wrapped::before { content: ""; position: absolute; inset: 0; background: radial-gradient(60% 60% at 80% 0%, var(--heat) 0%, transparent 60%), radial-gradient(50% 50% at 0% 80%, var(--lime) 0%, transparent 65%); opacity: .12; z-index: -1; } .wrapped__head { max-width: 720px; margin: 0 auto var(--space-5); text-align: center; } .wrapped .eyebrow { display: inline-flex; align-items: center; gap: .5em; font-family: var(--f-mono); font-size: .72rem; letter-spacing: .18em; text-transform: uppercase; color: var(--lime); margin: 0 0 var(--space-2); } .wrapped .eyebrow .dot { width: 8px; height: 8px; background: var(--lime); border-radius: 50%; } .wrapped__title { font-family: var(--f-display); font-size: clamp(3rem, 10vw, 8rem); line-height: .85; letter-spacing: -.04em; text-transform: uppercase; margin: 0 0 var(--space-2); font-weight: 400; } .wrapped__title span { display: block; } .wrapped__title .italic { font-family: var(--f-italic); font-style: italic; text-transform: none; letter-spacing: -.01em; color: var(--ink-2); } .wrapped__title em { color: var(--lime); font-style: italic; } .wrapped__lede { font-family: var(--f-italic); font-style: italic; font-size: clamp(1.1rem, 1.6vw, 1.4rem); line-height: 1.4; color: var(--ink); max-width: 50ch; margin: 0 auto; } .wrapped__stage { max-width: 720px; margin: 0 auto; } .wrapped__empty { padding: var(--space-5); border: 1px dashed var(--line); border-radius: var(--radius-lg); background: var(--bg-2); text-align: center; display: grid; gap: var(--space-2); justify-items: center; } .wrapped__empty h2 { font-family: var(--f-display); font-size: clamp(2rem, 5vw, 3rem); line-height: 1; letter-spacing: -.02em; text-transform: uppercase; margin: 0; font-weight: 400; text-wrap: balance; } .wrapped__empty p { color: var(--ink-2); margin: 0; max-width: 50ch; } .wrapped__poster-wrap { display: grid; gap: var(--space-3); justify-items: center; } .wrapped__poster-wrap canvas { width: 100%; max-width: 540px; height: auto; border-radius: var(--radius-lg); border: 1px solid var(--line-strong); box-shadow: 0 32px 80px rgba(0, 0, 0, .55); background: var(--bg-3); } .wrapped__actions { display: flex; flex-wrap: wrap; gap: .8rem; justify-content: center; } .wrapped__count { font-family: var(--f-mono); font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-2); margin: 0; } @media (max-width: 540px) { .wrapped__actions .btn { flex: 1; justify-content: center; } } /* ============================================ FIND YOUR NIGHT QUIZ (find-your-night.html) ============================================ */ .page-quiz { background: var(--bg); } .quiz { padding: clamp(120px, 18vh, 200px) var(--pad-x) var(--space-7); min-height: 100vh; position: relative; isolation: isolate; } .quiz::before { content: ""; position: absolute; inset: 0; background: radial-gradient(60% 60% at 80% 0%, var(--heat) 0%, transparent 60%), radial-gradient(50% 50% at 0% 80%, var(--lime) 0%, transparent 60%); opacity: .12; z-index: -1; } .quiz__inner { max-width: 720px; margin: 0 auto; } .quiz .eyebrow { display: inline-flex; align-items: center; gap: .5em; font-family: var(--f-mono); font-size: .72rem; letter-spacing: .18em; text-transform: uppercase; color: var(--heat); margin: 0 0 var(--space-2); } .quiz .eyebrow .dot { width: 8px; height: 8px; background: var(--heat); border-radius: 50%; } .quiz__title { font-family: var(--f-display); font-size: clamp(3rem, 10vw, 8rem); line-height: .85; letter-spacing: -.04em; text-transform: uppercase; margin: 0 0 var(--space-2); font-weight: 400; text-wrap: balance; } .quiz__title span { display: block; } .quiz__title .italic { font-family: var(--f-italic); font-style: italic; text-transform: none; letter-spacing: -.01em; color: var(--ink-2); } .quiz__title em { color: var(--heat); font-style: italic; } .quiz__lede { font-family: var(--f-italic); font-style: italic; font-size: clamp(1.1rem, 1.6vw, 1.4rem); line-height: 1.4; color: var(--ink); max-width: 50ch; margin: 0 0 var(--space-4); } .quiz__progress { height: 4px; background: var(--bg-3); border-radius: 4px; overflow: hidden; margin: 0 0 var(--space-3); } .quiz__progress-fill { height: 100%; background: linear-gradient(90deg, var(--heat) 0%, var(--lime) 100%); transition: width .5s var(--ease-power); } .quiz__hint { font-family: var(--f-mono); font-size: .68rem; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-2); text-align: center; margin: var(--space-3) 0 0; } .quiz-q__num { font-family: var(--f-mono); font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: var(--heat); margin: 0 0 .5rem; } .quiz-q__title { font-family: var(--f-display); font-size: clamp(1.6rem, 3.5vw, 2.6rem); line-height: 1; letter-spacing: -.02em; text-transform: uppercase; margin: 0 0 var(--space-3); font-weight: 400; text-wrap: balance; } .quiz-q__options { display: grid; gap: .8rem; margin: 0; padding: 0; list-style: none; } .quiz-opt { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.2em 1.4em; background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--radius); color: var(--ink); cursor: pointer; text-align: left; transition: background var(--t-fast), border-color var(--t-fast), transform var(--t-fast); opacity: 0; } .quiz-opt:hover { background: var(--bg-3); border-color: var(--lime); transform: translateX(4px); } .quiz-opt__label { font-family: var(--f-display); font-size: clamp(1rem, 1.5vw, 1.3rem); letter-spacing: -.005em; text-transform: uppercase; } .quiz-opt__arrow { font-size: 1.4rem; color: var(--ink-2); transition: color var(--t-fast), transform var(--t-fast); } .quiz-opt:hover .quiz-opt__arrow { color: var(--lime); transform: translateX(6px); } @keyframes quizOptIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } } /* Result card */ .quiz-result { position: relative; padding: var(--space-5); border: 1px solid var(--line-strong); border-radius: var(--radius-lg); background: var(--bg-2); isolation: isolate; overflow: hidden; animation: quizResultIn .8s var(--ease-elastic) both; } @keyframes quizResultIn { from { opacity: 0; transform: translateY(20px) scale(.96); } to { opacity: 1; transform: translateY(0) scale(1); } } .quiz-result::before { content: ""; position: absolute; inset: 0; background: radial-gradient(70% 60% at 100% 0%, var(--c1, var(--heat)) 0%, transparent 60%), radial-gradient(50% 50% at 0% 100%, var(--c2, var(--lime)) 0%, transparent 60%); opacity: .14; z-index: -1; } .quiz-result[data-tone="heat"] { --c1: #FF3B14; --c2: #FF6BAA; } .quiz-result[data-tone="lime"] { --c1: #D7FF1E; --c2: #4A6CF7; } .quiz-result[data-tone="sky"] { --c1: #4A6CF7; --c2: #6E8AFF; } .quiz-result[data-tone="ink"] { --c1: #1B191C; --c2: #FF3B14; } .quiz-result[data-tone="pink"] { --c1: #FF6BAA; --c2: #4A6CF7; } .quiz-result__date { font-family: var(--f-display); font-size: clamp(4rem, 12vw, 9rem); line-height: .85; letter-spacing: -.04em; text-transform: uppercase; margin: 0; font-weight: 400; color: var(--ink); } .quiz-result__sub { font-family: var(--f-italic); font-style: italic; font-size: clamp(1.2rem, 2vw, 1.6rem); margin: .25em 0 0; color: var(--ink-2); } .quiz-result__heads { font-family: var(--f-mono); font-size: .8rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ink); margin: var(--space-2) 0 var(--space-3); } .quiz-result__tier { padding: var(--space-2) var(--space-3); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); margin: var(--space-3) 0; } .quiz-result__tier .eyebrow { color: var(--lime); margin: 0 0 .25em; } .quiz-result__tier-name { font-family: var(--f-display); font-size: clamp(1.4rem, 2.4vw, 1.8rem); text-transform: uppercase; letter-spacing: -.005em; margin: 0 0 .35em; font-weight: 400; color: var(--ink); } .quiz-result__tier-why { font-size: .96rem; color: var(--ink-2); margin: 0; } .quiz-result__cta { display: flex; flex-wrap: wrap; gap: .8rem; margin: var(--space-3) 0; } .quiz-result__alt { margin-top: var(--space-3); padding-top: var(--space-3); border-top: 1px solid var(--line); } .quiz-result__alt .eyebrow { color: var(--ink-2); margin: 0 0 .5em; } .quiz-result__alt-link { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1em 1.2em; background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius); color: var(--ink); transition: border-color var(--t-fast), background var(--t-fast); } .quiz-result__alt-link:hover { border-color: var(--ink-2); background: var(--bg-3); } .quiz-result__alt-date { font-family: var(--f-display); font-size: 1.4rem; letter-spacing: -.005em; } .quiz-result__alt-label { font-family: var(--f-mono); font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-2); flex: 1; margin-left: 1rem; } .quiz-result__alt-arrow { font-size: 1.4rem; color: var(--ink-2); } .quiz-result__retake { margin-top: var(--space-3); background: transparent; border: 1px dashed var(--line); border-radius: 999px; color: var(--ink-2); font-family: var(--f-mono); font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; padding: .55em 1.2em; cursor: pointer; transition: color var(--t-fast), border-color var(--t-fast); } .quiz-result__retake:hover { color: var(--ink); border-color: var(--ink-2); } @media (max-width: 540px) { .quiz-opt { padding: .9em 1em; } .quiz-result__cta .btn { width: 100%; justify-content: center; } } /* ============================================ TRAVEL CALCULATOR (info.html · Getting there) ============================================ */ .travel-calc { margin-top: var(--space-4); padding: var(--space-4); border: 1px solid var(--line-strong); border-radius: var(--radius-lg); background: var(--bg-2); position: relative; isolation: isolate; } .travel-calc::before { content: ""; position: absolute; inset: 0; background: radial-gradient(70% 60% at 100% 0%, var(--lime) 0%, transparent 60%); opacity: .08; border-radius: inherit; z-index: -1; } .travel-calc__head { margin-bottom: var(--space-3); } .travel-calc__head .eyebrow { display: inline-flex; align-items: center; gap: .5em; font-family: var(--f-mono); font-size: .68rem; letter-spacing: .14em; text-transform: uppercase; color: var(--lime); margin: 0 0 .5em; } .travel-calc__head .eyebrow .dot { width: 8px; height: 8px; background: var(--lime); border-radius: 50%; } .travel-calc__head h3 { font-family: var(--f-display); font-size: clamp(1.6rem, 3vw, 2.4rem); line-height: 1; letter-spacing: -.01em; text-transform: uppercase; margin: 0 0 .35em; font-weight: 400; } .travel-calc__head p { font-size: 1rem; color: var(--ink-2); margin: 0; max-width: 60ch; } .travel-calc__from { width: 100%; padding: .85em 1em; background: var(--bg-3); border: 1px solid var(--line); border-radius: 8px; color: var(--ink); font-family: var(--f-body); font-size: 1rem; appearance: none; -webkit-appearance: none; cursor: pointer; margin-bottom: var(--space-2); } .travel-calc__from:focus { outline: none; border-color: var(--lime); } .travel-calc__hint { font-family: var(--f-mono); font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: var(--mute); text-align: center; padding: var(--space-3) 0; margin: 0; } .travel-calc__lede { font-size: 1.05rem; color: var(--ink-2); margin: 0 0 var(--space-2); } .travel-calc__lede strong { color: var(--ink); font-weight: 600; } .travel-calc__lede em { font-style: normal; font-family: var(--f-mono); font-size: .8rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-2); margin-left: .5em; } .travel-options { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; } /* Bump specificity (.travel-options .travel-row, 0,2,0) so the parent rule `.info-section ul li` (0,1,2) doesn't win the cascade. That parent rule applies `1fr auto` + `padding .6em 0` + bottom border to all info- section bullet rows — but our travel rows need their own definition. Also explicitly resets the inherited border-bottom and background. */ .travel-options .travel-row { display: grid; grid-template-columns: 44px 1fr; grid-template-areas: "icon main" "icon meta"; column-gap: 1.1rem; row-gap: .35rem; align-items: center; padding: 1rem 1.2rem; border: 1px solid var(--line); border-bottom: 1px solid var(--line); border-radius: var(--radius); background: var(--bg); position: relative; transition: border-color var(--t-fast), background var(--t-fast); } .travel-row:hover { border-color: var(--ink-2); background: var(--bg-3); } .travel-row--best { border-color: var(--lime); background: rgba(215, 255, 30, .06); } .travel-row--best:hover { background: rgba(215, 255, 30, .12); } .travel-row__icon { grid-area: icon; align-self: center; font-size: 1.6rem; width: 44px; height: 44px; display: grid; place-items: center; background: var(--bg-3); border-radius: 50%; } .travel-row--best .travel-row__icon { background: rgba(215, 255, 30, .12); } .travel-row__main { grid-area: main; display: flex; align-items: baseline; flex-wrap: wrap; gap: .25em .8em; min-width: 0; } .travel-row__main strong { font-family: var(--f-display); font-size: 1.15rem; letter-spacing: -.005em; text-transform: uppercase; color: var(--ink); font-weight: 400; flex-shrink: 0; } .travel-row__main em { font-style: normal; font-family: var(--f-mono); font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2); /* Allow wrap & ellipsize gracefully */ min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; } .travel-row__meta { grid-area: meta; display: flex; flex-wrap: wrap; align-items: baseline; gap: .15em .55em; font-family: var(--f-mono); font-size: .76rem; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); } .travel-row__sep { color: var(--mute); } .travel-row__time { color: var(--ink-2); } .travel-row__price { color: var(--ink); font-weight: 600; } .travel-row__co2 { color: var(--lime); } .travel-row--best .travel-row__co2 { font-weight: 600; } .travel-row__tag { position: absolute; top: -8px; right: 1rem; background: var(--lime); color: var(--ink-dark); font-family: var(--f-mono); font-size: .62rem; letter-spacing: .14em; text-transform: uppercase; padding: .25em .7em; border-radius: 999px; font-weight: 600; } .travel-calc__note { margin: var(--space-2) 0 0; padding: .9em 1em; background: rgba(215, 255, 30, .08); border-left: 2px solid var(--lime); border-radius: 4px; font-size: .92rem; line-height: 1.5; color: var(--ink); } @media (max-width: 540px) { .travel-options .travel-row { grid-template-columns: 36px 1fr; padding: .85rem 1rem; column-gap: .8rem; } .travel-row__icon { width: 36px; height: 36px; font-size: 1.3rem; } .travel-row__main strong { font-size: 1rem; } .travel-row__meta { font-size: .7rem; } } /* ============================================ FESTIVAL MODE — global toggle (auto on show dates) ============================================ */ .nav__festival { display: inline-grid; place-items: center; width: 38px; height: 38px; border: 1px solid var(--line); border-radius: 50%; background: transparent; color: var(--ink); margin-right: .5rem; transition: color var(--t-fast), border-color var(--t-fast), background var(--t-fast), transform 1.2s var(--ease-power); } .nav__festival:hover { color: var(--lime); border-color: var(--lime); transform: rotate(45deg); } .nav__festival.is-on { color: var(--ink-dark); background: var(--heat); border-color: var(--heat); animation: festival-pulse 1.6s var(--ease-out) infinite; } @keyframes festival-pulse { 0% { box-shadow: 0 0 0 0 rgba(255, 59, 20, .6); } 100% { box-shadow: 0 0 0 12px rgba(255, 59, 20, 0); } } @media (max-width: 720px) { .nav__festival { width: 34px; height: 34px; } .nav__festival svg { width: 16px; height: 16px; } } html.festival-mode { filter: saturate(1.18) contrast(1.04); } html.festival-mode body::before { content: "🔴 LIVE · ON STAGE NOW · 🔴 LIVE · ON STAGE NOW · 🔴 LIVE · ON STAGE NOW · 🔴 LIVE · ON STAGE NOW"; display: block; position: fixed; top: 0; left: 0; right: 0; z-index: 10005; background: var(--heat); color: var(--ink-dark); font-family: var(--f-mono); font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; padding: .5em var(--pad-x); white-space: nowrap; overflow: hidden; font-weight: 700; animation: festival-marquee 22s linear infinite; text-overflow: clip; } html.festival-mode .nav { top: 24px; } @keyframes festival-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } } /* Speed up marquees in festival mode */ html.festival-mode .marquee__row { animation-duration: 28s; } /* Brighten the heat color when in mode */ html.festival-mode .hero__title em { animation: festival-glow 2.4s var(--ease-out) infinite alternate; } @keyframes festival-glow { from { text-shadow: 0 0 0 var(--heat); } to { text-shadow: 0 0 28px rgba(255, 59, 20, .8); } } /* In-mode countdown becomes a "doors open" pulse */ html.festival-mode .countdown__nums::after { content: "DOORS OPEN"; display: block; margin-top: .4em; font-family: var(--f-mono); font-size: .7rem; letter-spacing: .14em; color: var(--lime); animation: festival-pulse-text 1.8s ease-in-out infinite alternate; } @keyframes festival-pulse-text { from { opacity: .4; } to { opacity: 1; } } /* ---------- WEATHER POPOVER ---------- */ [data-weather] { border-bottom: 1px dashed transparent; transition: border-color var(--t-fast), color var(--t-fast); user-select: none; } [data-weather]:hover, [data-weather][aria-expanded="true"] { border-bottom-color: var(--ink-2); color: var(--ink); } .weather-pop { position: fixed; z-index: 9200; width: min(320px, calc(100vw - 24px)); background: var(--bg-2); border: 1px solid var(--line-strong); border-radius: var(--radius); padding: 0; box-shadow: 0 24px 60px rgba(0,0,0,.5); opacity: 0; transform: translateY(-8px); pointer-events: none; transition: opacity var(--t-med) var(--ease-out), transform var(--t-med) var(--ease-out); isolation: isolate; overflow: hidden; } .weather-pop::before { content: ""; position: absolute; inset: 0; background: radial-gradient(80% 60% at 0% 0%, var(--sky) 0%, transparent 60%); opacity: .08; z-index: -1; } .weather-pop.is-open { opacity: 1; transform: translateY(0); pointer-events: auto; } .weather-pop__head { display: flex; align-items: center; justify-content: space-between; padding: .85rem 1rem .55rem; border-bottom: 1px solid var(--line); } .weather-pop__head .eyebrow { display: inline-flex; align-items: center; gap: .5em; margin: 0; font-family: var(--f-mono); font-size: .68rem; letter-spacing: .14em; text-transform: uppercase; color: var(--sky); } .weather-pop__head .dot { width: 8px; height: 8px; background: var(--sky); border-radius: 50%; box-shadow: 0 0 0 0 var(--sky); animation: pulse 1.6s var(--ease-out) infinite; } .weather-pop__close { width: 26px; height: 26px; display: grid; place-items: center; font-size: 1.3rem; line-height: 1; color: var(--ink-2); background: transparent; border: 0; border-radius: 50%; cursor: pointer; transition: color var(--t-fast), background var(--t-fast); } .weather-pop__close:hover { color: var(--ink); background: var(--bg-3); } .weather-pop__list { margin: 0; padding: .35rem .55rem; list-style: none; display: grid; gap: .15rem; } .weather-day { display: grid; grid-template-columns: 1fr auto 1fr auto; align-items: center; gap: .8rem; padding: .55em .55em; border-radius: 8px; transition: background var(--t-fast); } .weather-day:hover { background: var(--bg-3); } .weather-day--today { background: rgba(255, 59, 20, .08); } .weather-day--today:hover { background: rgba(255, 59, 20, .14); } .weather-day__when { display: flex; flex-direction: column; gap: 0; line-height: 1.1; } .weather-day__when strong { font-family: var(--f-display); font-size: 1rem; letter-spacing: -.005em; text-transform: uppercase; color: var(--ink); font-weight: 400; } .weather-day__when em { font-family: var(--f-mono); font-style: normal; font-size: .65rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-2); } .weather-day--today .weather-day__when strong { color: var(--heat); } .weather-day__icon { font-size: 1.4rem; line-height: 1; filter: drop-shadow(0 1px 0 rgba(0,0,0,.35)); } .weather-day__temps { display: flex; align-items: baseline; gap: .4em; justify-content: flex-start; font-family: var(--f-display); } .weather-day__temps strong { font-size: 1.05rem; color: var(--ink); font-weight: 400; } .weather-day__temps em { font-size: .82rem; font-style: normal; color: var(--ink-2); } .weather-day__rain { font-family: var(--f-mono); font-size: .65rem; letter-spacing: .08em; color: var(--sky); text-align: right; min-width: 30px; } .weather-day__rain:empty { display: none; } .weather-sun { display: flex; align-items: center; justify-content: space-around; gap: .5rem; padding: .55rem 1rem; border-top: 1px solid var(--line); font-family: var(--f-mono); font-size: .68rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-2); } .weather-sun__item strong { font-family: var(--f-display); font-size: .92rem; letter-spacing: -.005em; color: var(--ink); font-weight: 400; margin: 0 .15em; } .weather-air { display: flex; align-items: center; justify-content: space-between; gap: .8rem; padding: .55rem 1rem; border-top: 1px solid var(--line); font-family: var(--f-mono); font-size: .65rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-2); } .weather-air__band { display: inline-flex; align-items: center; gap: .35em; padding: .3em .7em; border-radius: 999px; font-weight: 600; } .weather-air__band::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; } .weather-air__band--good { background: rgba(215, 255, 30, .14); color: var(--lime); } .weather-air__band--mid { background: rgba(255, 107, 170, .12); color: var(--pink); } .weather-air__band--bad { background: rgba(255, 59, 20, .14); color: var(--heat); } .weather-air__values em { font-style: normal; opacity: .6; margin: 0 .15em; } .weather-pop__src { margin: 0; padding: .55rem 1rem .7rem; border-top: 1px solid var(--line); font-family: var(--f-mono); font-size: .62rem; letter-spacing: .12em; text-transform: uppercase; color: var(--mute); text-align: center; } .weather-pop__src a { color: var(--ink-2); border-bottom: 1px solid var(--line); } .weather-pop__src a:hover { color: var(--ink); } @media (max-width: 540px) { .weather-pop { width: calc(100vw - 24px); } } /* ============================================ PWA INSTALL PROMPT (custom A2HS banner) ============================================ */ .pwa-prompt { position: fixed; bottom: clamp(12px, 2.5vw, 24px); left: 50%; transform: translateX(-50%) translateY(120%); z-index: 9300; width: min(420px, calc(100vw - 24px)); background: var(--bg-2); border: 1px solid var(--line-strong); border-radius: var(--radius); padding: 1.1rem 1.2rem 1.05rem; box-shadow: 0 30px 70px rgba(0, 0, 0, .55), 0 6px 14px rgba(255, 59, 20, .12); opacity: 0; pointer-events: none; transition: opacity var(--t-med) var(--ease-out), transform var(--t-med) var(--ease-elastic); isolation: isolate; overflow: hidden; } .pwa-prompt::before { content: ""; position: absolute; inset: 0; background: radial-gradient(70% 80% at 100% 0%, var(--heat) 0%, transparent 60%), radial-gradient(50% 60% at 0% 100%, var(--lime) 0%, transparent 60%); opacity: .14; z-index: -1; } .pwa-prompt.is-on { opacity: 1; pointer-events: auto; transform: translateX(-50%) translateY(0); } .pwa-prompt__close { position: absolute; top: .35em; right: .55em; width: 28px; height: 28px; display: grid; place-items: center; background: transparent; border: 0; font-size: 1.3rem; line-height: 1; color: var(--ink-2); border-radius: 50%; cursor: pointer; transition: color var(--t-fast), background var(--t-fast); } .pwa-prompt__close:hover { color: var(--ink); background: var(--bg-3); } .pwa-prompt__head { display: flex; align-items: center; gap: .9rem; margin-bottom: .65rem; padding-right: 28px; } .pwa-prompt__mark { width: 50px; height: 50px; display: grid; place-items: center; background: var(--heat); color: var(--ink-dark); border-radius: 12px; flex-shrink: 0; box-shadow: 0 8px 20px rgba(255, 59, 20, .35); position: relative; isolation: isolate; } .pwa-prompt__mark::after { content: ""; position: absolute; inset: -4px; border-radius: 16px; background: var(--heat); opacity: .25; z-index: -1; animation: pwa-mark-pulse 2.4s ease-in-out infinite; } @keyframes pwa-mark-pulse { 0%, 100% { transform: scale(1); opacity: .25; } 50% { transform: scale(1.12); opacity: 0; } } .pwa-prompt__brand .eyebrow { display: flex; align-items: center; gap: .5em; margin: 0 0 .15em; font-family: var(--f-mono); font-size: .65rem; letter-spacing: .14em; text-transform: uppercase; color: var(--heat); } .pwa-prompt__brand .dot { width: 6px; height: 6px; background: var(--heat); border-radius: 50%; animation: pulse 1.6s var(--ease-out) infinite; } .pwa-prompt__name { margin: 0; font-family: var(--f-display); font-size: 1.15rem; letter-spacing: -.005em; text-transform: uppercase; color: var(--ink); } .pwa-prompt__lede { margin: 0 0 .35em; font-family: var(--f-display); font-size: clamp(1.2rem, 4vw, 1.5rem); line-height: 1.05; letter-spacing: -.015em; text-transform: uppercase; color: var(--ink); } .pwa-prompt__lede em { font-family: var(--f-italic); font-style: italic; text-transform: none; letter-spacing: -.005em; color: var(--heat); } .pwa-prompt__body { margin: 0 0 .9rem; font-size: .92rem; line-height: 1.5; color: var(--ink-2); } .pwa-prompt__steps { display: grid; gap: .35rem; margin: 0 0 .9rem; padding: .7rem .85rem; background: rgba(11, 11, 12, .5); border: 1px solid var(--line); border-radius: 10px; } .pwa-prompt__steps span { display: flex; align-items: center; gap: .5em; font-family: var(--f-mono); font-size: .76rem; letter-spacing: .04em; color: var(--ink); } .pwa-prompt__steps strong { color: var(--heat); font-weight: 600; font-family: var(--f-display); font-size: .9rem; width: 18px; } .pwa-prompt__steps em { font-style: normal; color: var(--ink-2); } .pwa-prompt__steps svg { color: var(--ink); margin: 0 .15em; } .pwa-prompt__actions { display: flex; gap: .6rem; align-items: center; } .pwa-prompt__actions .btn { flex: 1; justify-content: center; padding: .8em 1.1em; font-size: .82rem; } .pwa-prompt__actions .btn--lime { position: relative; } .pwa-prompt__actions .btn--lime::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: 0 0 0 0 var(--lime); animation: pwa-cta-pulse 2.2s ease-in-out infinite; pointer-events: none; } @keyframes pwa-cta-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(215, 255, 30, .55); } 60% { box-shadow: 0 0 0 14px rgba(215, 255, 30, 0); } } @media (max-width: 540px) { .pwa-prompt { bottom: 12px; width: calc(100vw - 16px); padding: 1rem 1.1rem; } .pwa-prompt__lede { font-size: 1.2rem; } .pwa-prompt__body { font-size: .88rem; } } /* When festival mode is on, push the prompt above the LIVE banner */ html.festival-mode .pwa-prompt { bottom: clamp(48px, 7vh, 72px); } /* ---------- AUDIO HINT TOAST (autoplay blocked) ---------- */ .audio-hint { position: fixed; bottom: clamp(16px, 2vw, 28px); left: 50%; transform: translateX(-50%) translateY(20px); z-index: 9100; background: var(--bg-2); border: 1px solid var(--lime); border-radius: 999px; padding: .8em 1.4em; color: var(--ink); font-family: var(--f-mono); font-size: .76rem; letter-spacing: .12em; text-transform: uppercase; box-shadow: 0 18px 40px rgba(0,0,0,.45); opacity: 0; pointer-events: none; transition: opacity var(--t-med) var(--ease-out), transform var(--t-med) var(--ease-out); } .audio-hint span::before { content: ""; } .audio-hint.is-on { opacity: 1; transform: translateX(-50%) translateY(0); } @keyframes note-bounce { from { transform: translateY(0) scale(1); } to { transform: translateY(-3px) scale(1.08); } } @media (max-width: 720px) { .now-playing { font-size: .9rem; } .site-search__panel { padding: 1rem 1.1rem .8rem; } .site-search__hint { display: none; } } /* ============================================ GALLERY PAGE ============================================ */ .gallery-status { padding: var(--space-5) var(--pad-x) var(--space-4); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); } .gallery-status__inner { max-width: 1300px; margin: 0 auto; } .gallery-status__card { position: relative; padding: var(--space-5) var(--space-4); border: 1px solid var(--line-strong); border-radius: var(--radius-lg); background: var(--bg-2); display: grid; gap: var(--space-3); isolation: isolate; overflow: hidden; } .gallery-status__card::before { content: ""; position: absolute; inset: 0; background: radial-gradient(80% 60% at 100% 0%, var(--heat) 0%, transparent 60%), radial-gradient(60% 50% at 0% 100%, var(--lime) 0%, transparent 65%); opacity: .14; z-index: -1; } .gallery-status__card .eyebrow { color: var(--heat); display: flex; align-items: center; gap: .5em; } .gallery-status__card .eyebrow .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--heat); animation: pulse 1.6s var(--ease-out) infinite; } .gallery-status__card h2 { font-family: var(--f-display); font-size: clamp(2rem, 5vw, 4rem); line-height: .92; letter-spacing: -.02em; text-transform: uppercase; margin: 0; font-weight: 400; text-wrap: balance; } .gallery-status__card p:not(.eyebrow) { font-size: 1.05rem; line-height: 1.55; color: var(--ink-2); max-width: 70ch; margin: 0; } .gallery-status__count { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-2); margin-top: var(--space-2); } .gallery-status__count span { display: grid; gap: .25em; padding: var(--space-2); border: 1px solid var(--line); border-radius: var(--radius); background: rgba(11, 11, 12, .55); text-align: left; font-family: var(--f-mono); font-size: .68rem; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-2); } .gallery-status__count strong { font-family: var(--f-display); font-size: clamp(2rem, 4vw, 3rem); line-height: 1; letter-spacing: -.02em; font-weight: 400; color: var(--ink); } .gallery-archive { padding: var(--space-6) var(--pad-x); } .gallery-archive__head { max-width: 1300px; margin: 0 auto var(--space-5); display: grid; gap: var(--space-2); } .gallery-archive__head h2 { font-family: var(--f-display); font-size: clamp(2.5rem, 7vw, 6rem); line-height: .9; letter-spacing: -.03em; text-transform: uppercase; margin: 0; font-weight: 400; text-wrap: balance; } .gallery-archive__head h2 .italic { font-family: var(--f-italic); font-style: italic; text-transform: none; letter-spacing: -.01em; color: var(--ink-2); } .gallery-archive__head h2 em { color: var(--lime); font-style: italic; } .gallery-archive__head p { font-size: 1.08rem; line-height: 1.6; color: var(--ink-2); max-width: 65ch; } .gallery-archive__grid { max-width: 1300px; margin: 0 auto; display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-3); list-style: none; padding: 0; } .gallery-archive__cell { grid-column: span var(--span, 1); display: grid; gap: var(--space-2); } .gallery-archive__photo { position: relative; aspect-ratio: 4 / 3; border-radius: var(--radius-lg); overflow: hidden; background: var(--bg-3); isolation: isolate; transition: transform var(--t-med) var(--ease-power); } .gallery-archive__cell[style*="--span: 2"] .gallery-archive__photo { aspect-ratio: 16 / 9; } .gallery-archive__photo::before { content: ""; position: absolute; inset: 0; background: linear-gradient(135deg, var(--c1, var(--heat)) 0%, var(--c2, var(--sky)) 100%); opacity: .55; mix-blend-mode: overlay; z-index: 1; } .gallery-archive__photo::after { content: "📸"; position: absolute; bottom: 1rem; right: 1rem; font-size: 1.4rem; z-index: 2; filter: grayscale(.5); } .gallery-archive__photo--alt-1 { background: linear-gradient(120deg, #2a1c14 0%, #6b2a18 60%, #FF3B14 100%); --c1: #FF6BAA; --c2: #4A6CF7; } .gallery-archive__photo--alt-2 { background: linear-gradient(120deg, #0f0c1a 0%, #2a3162 50%, #4A6CF7 100%); --c1: #4A6CF7; --c2: #FF3B14; } .gallery-archive__photo--alt-3 { background: linear-gradient(120deg, #1c1208 0%, #5e3818 60%, #ffaf48 100%); --c1: #FF3B14; --c2: #D7FF1E; } .gallery-archive__photo--alt-4 { background: linear-gradient(120deg, #221a08 0%, #4a3812 50%, #D7FF1E 100%); --c1: #D7FF1E; --c2: #FF3B14; } .gallery-archive__photo--alt-5 { background: linear-gradient(120deg, #1a0f1e 0%, #3a1c46 60%, #FF6BAA 100%); --c1: #FF6BAA; --c2: #4A6CF7; } .gallery-archive__photo--alt-6 { background: linear-gradient(120deg, #0a1614 0%, #163e36 60%, #4A6CF7 100%); --c1: #4A6CF7; --c2: #D7FF1E; } .gallery-archive__cell:hover .gallery-archive__photo { transform: scale(1.02); } .gallery-archive__caption { display: grid; gap: .35em; } .gallery-archive__caption .eyebrow { color: var(--ink-2); font-family: var(--f-mono); font-size: .68rem; letter-spacing: .14em; text-transform: uppercase; } .gallery-archive__caption h3 { font-family: var(--f-display); font-size: clamp(1.3rem, 2vw, 1.7rem); line-height: 1; letter-spacing: -.01em; text-transform: uppercase; margin: 0; font-weight: 400; } .gallery-archive__caption p { color: var(--ink-2); font-size: .92rem; line-height: 1.5; margin: 0; } .gallery-cta { padding: var(--space-6) var(--pad-x); border-top: 1px solid var(--line); text-align: center; background: radial-gradient(60% 60% at 50% 0%, rgba(215, 255, 30, .12) 0%, transparent 70%); } .gallery-cta__inner { max-width: 720px; margin: 0 auto; display: grid; gap: var(--space-3); } .gallery-cta__inner .eyebrow { display: flex; align-items: center; justify-content: center; gap: .5em; color: var(--lime); } .gallery-cta__inner .eyebrow .dot { background: var(--lime); width: 8px; height: 8px; border-radius: 50%; } .gallery-cta h2 { font-family: var(--f-display); font-size: clamp(2.5rem, 6vw, 5rem); line-height: .92; letter-spacing: -.03em; text-transform: uppercase; margin: 0; font-weight: 400; text-wrap: balance; } .gallery-cta p { font-size: 1.05rem; line-height: 1.6; color: var(--ink-2); margin: 0; } .gallery-cta .btn { justify-self: center; margin-top: var(--space-2); } @media (max-width: 980px) { .gallery-archive__grid { grid-template-columns: repeat(2, 1fr); } .gallery-archive__cell { grid-column: span 1 !important; } .gallery-status__count { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 540px) { .gallery-archive__grid { grid-template-columns: 1fr; } } /* ============================================ MANIFESTO PAGE ============================================ */ .page-manifesto { background: var(--bg); } .manifesto-hero { padding: clamp(120px, 18vh, 220px) var(--pad-x) clamp(60px, 8vh, 100px); border-bottom: 1px solid var(--line); position: relative; isolation: isolate; overflow: hidden; } .manifesto-hero::before { content: ""; position: absolute; inset: 0; background: radial-gradient(50% 60% at 80% 0%, var(--heat) 0%, transparent 60%), radial-gradient(70% 50% at 0% 100%, var(--lime) 0%, transparent 65%); opacity: .10; z-index: -1; } .manifesto-hero .eyebrow { display: inline-flex; align-items: center; gap: .5em; font-family: var(--f-mono); font-size: .72rem; letter-spacing: .18em; text-transform: uppercase; color: var(--heat); margin: 0 0 var(--space-3); } .manifesto-hero .eyebrow .dot { width: 8px; height: 8px; background: var(--heat); border-radius: 50%; } .manifesto-hero__title { font-family: var(--f-display); font-size: clamp(3.5rem, 12vw, 13rem); line-height: .82; letter-spacing: -.04em; text-transform: uppercase; margin: 0; font-weight: 400; text-wrap: balance; } .manifesto-hero__title span { display: block; } .manifesto-hero__title .italic { font-family: var(--f-italic); font-style: italic; text-transform: none; letter-spacing: -.01em; color: var(--ink-2); } .manifesto-hero__title em { color: var(--heat); font-style: italic; } .manifesto-hero__lede { margin: var(--space-3) 0 0; max-width: 60ch; font-family: var(--f-italic); font-style: italic; font-size: clamp(1.2rem, 1.8vw, 1.6rem); line-height: 1.4; color: var(--ink); } .manifesto-section { display: grid; grid-template-columns: 220px 1fr; gap: var(--space-5); padding: var(--space-7) var(--pad-x); border-bottom: 1px solid var(--line); align-items: start; position: relative; isolation: isolate; } .manifesto-section[data-tone="lime"]::before { background: radial-gradient(50% 60% at 100% 0%, var(--lime) 0%, transparent 60%); } .manifesto-section[data-tone="sky"]::before { background: radial-gradient(50% 60% at 100% 0%, var(--sky) 0%, transparent 60%); } .manifesto-section[data-tone="heat"]::before { background: radial-gradient(50% 60% at 100% 0%, var(--heat) 0%, transparent 60%); } .manifesto-section[data-tone="ink"]::before { background: radial-gradient(50% 60% at 100% 0%, var(--ink-2) 0%, transparent 50%); } .manifesto-section[data-tone="pink"]::before { background: radial-gradient(50% 60% at 100% 0%, var(--pink) 0%, transparent 60%); } .manifesto-section[data-tone]::before { content: ""; position: absolute; inset: 0; opacity: .05; z-index: -1; } .manifesto-section__num { font-family: var(--f-display); font-size: clamp(5rem, 12vw, 12rem); line-height: .8; letter-spacing: -.04em; color: var(--ink-dark); -webkit-text-stroke: 1.5px var(--ink-2); text-stroke: 1.5px var(--ink-2); margin: 0; font-weight: 400; position: sticky; top: clamp(80px, 12vh, 140px); } .manifesto-section__body { max-width: 65ch; } .manifesto-section__body h2 { font-family: var(--f-display); font-size: clamp(2rem, 5vw, 4.5rem); line-height: .92; letter-spacing: -.03em; text-transform: uppercase; margin: 0 0 var(--space-3); font-weight: 400; text-wrap: balance; } .manifesto-section__body .lede { font-family: var(--f-italic); font-style: italic; font-size: clamp(1.3rem, 2.2vw, 1.7rem); line-height: 1.4; color: var(--ink); margin: 0 0 var(--space-3); text-wrap: balance; } .manifesto-section__body p:not(.lede) { font-size: 1.08rem; line-height: 1.7; color: var(--ink-2); margin: 0 0 var(--space-2); } .manifesto-section__body strong { color: var(--ink); font-weight: 600; } .manifesto-close { padding: var(--space-7) var(--pad-x); text-align: center; display: grid; gap: var(--space-3); justify-items: center; background: radial-gradient(80% 60% at 50% 0%, rgba(255, 59, 20, .12) 0%, transparent 70%); } .manifesto-close .eyebrow { display: inline-flex; align-items: center; gap: .5em; color: var(--lime); } .manifesto-close .eyebrow .dot { width: 8px; height: 8px; background: var(--lime); border-radius: 50%; } .manifesto-close__title { font-family: var(--f-display); font-size: clamp(2.5rem, 7vw, 6rem); line-height: .9; letter-spacing: -.03em; text-transform: uppercase; margin: 0; font-weight: 400; max-width: 18ch; text-wrap: balance; } .manifesto-close__list { max-width: 65ch; display: grid; gap: var(--space-2); text-align: left; margin: var(--space-3) 0; padding: 0; list-style: none; } .manifesto-close__list li { padding: var(--space-2); border: 1px solid var(--line); border-radius: var(--radius); background: var(--bg-2); font-size: 1rem; line-height: 1.55; color: var(--ink-2); } .manifesto-close__list strong { color: var(--ink); font-family: var(--f-display); font-size: 1.15rem; text-transform: uppercase; letter-spacing: -.005em; display: block; margin-bottom: .25em; } .manifesto-close__sign { font-family: var(--f-italic); font-style: italic; font-size: 1.1rem; color: var(--ink-2); max-width: 50ch; margin: var(--space-2) 0 0; } .btn--big { padding: 1em 2.4em; font-size: 1rem; } @media (max-width: 900px) { .manifesto-section { grid-template-columns: 1fr; gap: var(--space-2); } .manifesto-section__num { position: relative; top: 0; font-size: clamp(4rem, 18vw, 7rem); } } /* ============================================ GENRE LANDING PAGES (hiphop / dance / latin) ============================================ */ .page-genre[data-genre-tone="heat"] { --genre-c: #FF3B14; --genre-c2: #FF6BAA; } .page-genre[data-genre-tone="sky"] { --genre-c: #4A6CF7; --genre-c2: #6E8AFF; } .page-genre[data-genre-tone="pink"] { --genre-c: #FF6BAA; --genre-c2: #FF3B14; } .page-genre[data-genre-tone="lime"] { --genre-c: #D7FF1E; --genre-c2: #4A6CF7; } .genre-hero { padding: clamp(120px, 18vh, 200px) var(--pad-x) var(--space-5); border-bottom: 1px solid var(--line); position: relative; isolation: isolate; overflow: hidden; } .genre-hero::before { content: ""; position: absolute; inset: 0; background: radial-gradient(50% 60% at 90% 10%, var(--genre-c) 0%, transparent 60%), radial-gradient(60% 50% at 0% 90%, var(--genre-c2) 0%, transparent 65%); opacity: .14; z-index: -1; } .genre-hero .eyebrow { display: inline-flex; align-items: center; gap: .5em; font-family: var(--f-mono); font-size: .72rem; letter-spacing: .18em; text-transform: uppercase; color: var(--genre-c); margin: 0 0 var(--space-2); } .genre-hero .eyebrow .dot { width: 8px; height: 8px; background: var(--genre-c); border-radius: 50%; } .genre-hero__title { font-family: var(--f-display); font-size: clamp(3.5rem, 13vw, 14rem); line-height: .82; letter-spacing: -.04em; text-transform: uppercase; margin: 0; font-weight: 400; text-wrap: balance; } .genre-hero__title span { display: block; } .genre-hero__title .italic { font-family: var(--f-italic); font-style: italic; text-transform: none; letter-spacing: -.01em; color: var(--ink-2); } .genre-hero__title em { color: var(--genre-c); font-style: italic; } .genre-hero__lede { margin: var(--space-3) 0 var(--space-4); max-width: 60ch; font-family: var(--f-italic); font-style: italic; font-size: clamp(1.2rem, 1.8vw, 1.6rem); line-height: 1.4; color: var(--ink); } .genre-hero__nights { display: flex; flex-wrap: wrap; gap: var(--space-2); } .genre-hero__night { display: grid; grid-template-columns: auto auto auto; align-items: end; gap: .4em; padding: .9em 1.2em; border: 1px solid var(--line); border-radius: var(--radius); background: var(--bg-2); color: var(--ink); transition: border-color var(--t-fast), background var(--t-fast), transform var(--t-fast); } .genre-hero__night:hover { border-color: var(--genre-c); background: var(--bg-3); transform: translateY(-2px); } .genre-hero__night .num { font-family: var(--f-display); font-size: 2.2rem; line-height: 1; letter-spacing: -.02em; color: var(--genre-c); } .genre-hero__night .month { font-family: var(--f-mono); font-size: .7rem; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-2); align-self: end; padding-bottom: .25em; } .genre-hero__night .lab { font-family: var(--f-display); font-size: 1rem; text-transform: uppercase; letter-spacing: -.005em; margin-left: .8em; white-space: nowrap; align-self: end; padding-bottom: .25em; } .genre-essay { max-width: 65ch; margin: 0 auto; padding: var(--space-6) var(--pad-x); display: grid; gap: var(--space-3); border-bottom: 1px solid var(--line); } .genre-essay .lede { font-family: var(--f-italic); font-style: italic; font-size: clamp(1.3rem, 2.3vw, 1.8rem); line-height: 1.4; color: var(--ink); margin: 0; text-wrap: balance; } .genre-essay p:not(.lede) { font-size: 1.08rem; line-height: 1.7; color: var(--ink-2); margin: 0; } .genre-night { padding: var(--space-7) var(--pad-x); border-bottom: 1px solid var(--line); display: grid; grid-template-columns: 280px 1fr; gap: var(--space-5); align-items: start; position: relative; isolation: isolate; } .genre-night::before { content: ""; position: absolute; inset: 0; background: radial-gradient(60% 60% at 0% 0%, var(--c1, var(--heat)) 0%, transparent 60%), radial-gradient(40% 50% at 100% 100%, var(--c2, var(--sky)) 0%, transparent 60%); opacity: .07; z-index: -1; } .genre-night[data-tone="heat"] { --c1: #FF3B14; --c2: #FF6BAA; } .genre-night[data-tone="sky"] { --c1: #4A6CF7; --c2: #6E8AFF; } .genre-night[data-tone="pink"] { --c1: #FF6BAA; --c2: #FF3B14; } .genre-night[data-tone="lime"] { --c1: #D7FF1E; --c2: #4A6CF7; } .genre-night[data-tone="ink"] { --c1: #1B191C; --c2: var(--genre-c); } .genre-night__date { position: sticky; top: clamp(80px, 12vh, 140px); display: grid; gap: .35em; text-align: left; } .genre-night__date .eyebrow { display: flex; align-items: center; gap: .5em; font-family: var(--f-mono); font-size: .7rem; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-2); margin: 0 0 var(--space-2); } .genre-night__date .dot { width: 8px; height: 8px; background: var(--genre-c); border-radius: 50%; } .genre-night__day { font-family: var(--f-display); font-size: clamp(6rem, 14vw, 12rem); line-height: .85; letter-spacing: -.04em; margin: 0; font-weight: 400; color: var(--ink); } .genre-night__month { font-family: var(--f-italic); font-style: italic; font-size: 1.2rem; color: var(--ink-2); margin: 0; } .genre-night__body { max-width: 65ch; } .genre-night__body h2 { font-family: var(--f-display); font-size: clamp(2rem, 5vw, 4rem); line-height: .92; letter-spacing: -.03em; text-transform: uppercase; margin: 0 0 var(--space-3); font-weight: 400; text-wrap: balance; } .genre-night__body .lede { font-family: var(--f-italic); font-style: italic; font-size: clamp(1.2rem, 2vw, 1.6rem); line-height: 1.4; color: var(--ink); margin: 0 0 var(--space-3); } .genre-night__lineup { display: grid; gap: .5rem; margin: 0 0 var(--space-3); padding: 0; list-style: none; } .genre-night__lineup a { display: flex; justify-content: space-between; align-items: baseline; gap: 1em; padding: 1em 1.2em; border: 1px solid var(--line); border-radius: var(--radius); background: var(--bg-2); font-family: var(--f-display); font-size: clamp(1.1rem, 1.6vw, 1.4rem); letter-spacing: -.005em; text-transform: uppercase; color: var(--ink); transition: background var(--t-fast), border-color var(--t-fast), transform var(--t-fast); } .genre-night__lineup a:hover { background: var(--bg-3); border-color: var(--genre-c); transform: translateX(4px); } .genre-night__lineup strong { font-weight: 400; color: var(--genre-c); } .genre-night__lineup span { font-family: var(--f-mono); font-size: .7rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-2); font-weight: 400; text-align: right; white-space: nowrap; } .genre-night__note { padding: var(--space-2); border-left: 2px solid var(--genre-c); font-size: .98rem; line-height: 1.55; color: var(--ink-2); background: rgba(11,11,12,.4); margin: 0 0 var(--space-3); } .genre-night__cta { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: var(--space-2); } /* Removed duplicate .btn--ghost rule that was overriding the global one with `display: inline-block`, breaking icon+text alignment on every ghost button that contains an SVG (wrapped poster Share/Clear, etc.). Original .btn--ghost at top of file uses inherited `display: inline-flex` from .btn, which keeps SVG and span inline. */ .genre-figures { padding: var(--space-6) var(--pad-x); border-bottom: 1px solid var(--line); background: radial-gradient(60% 60% at 50% 0%, var(--genre-c) 0%, transparent 70%); background-color: rgba(0,0,0,0); background-blend-mode: normal; } .genre-figures > .eyebrow { display: inline-flex; align-items: center; gap: .5em; font-family: var(--f-mono); font-size: .72rem; letter-spacing: .18em; text-transform: uppercase; color: var(--genre-c); margin: 0 0 var(--space-2); } .genre-figures > .eyebrow .dot { width: 8px; height: 8px; background: var(--genre-c); border-radius: 50%; } .genre-figures > h2 { font-family: var(--f-display); font-size: clamp(2rem, 5vw, 4rem); line-height: .9; letter-spacing: -.03em; text-transform: uppercase; margin: 0 0 var(--space-4); font-weight: 400; max-width: 18ch; text-wrap: balance; } .genre-figures__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-2); max-width: 1300px; margin: 0 auto; } .genre-figures__grid > div { padding: var(--space-3); border: 1px solid var(--line); border-radius: var(--radius); background: var(--bg-2); } .genre-figures__num { font-family: var(--f-display); font-size: clamp(2.5rem, 5vw, 4rem); line-height: 1; letter-spacing: -.03em; color: var(--genre-c); margin: 0 0 .3em; font-weight: 400; } .genre-figures__grid p:not(.genre-figures__num) { font-size: .92rem; line-height: 1.5; color: var(--ink-2); margin: 0; } .genre-cross { padding: var(--space-6) var(--pad-x); border-bottom: 1px solid var(--line); } .genre-cross > .eyebrow { display: inline-flex; align-items: center; gap: .5em; font-family: var(--f-mono); font-size: .72rem; letter-spacing: .18em; text-transform: uppercase; color: var(--ink-2); margin: 0 0 var(--space-2); } .genre-cross > .eyebrow .dot { width: 8px; height: 8px; background: var(--genre-c); border-radius: 50%; } .genre-cross > h2 { font-family: var(--f-display); font-size: clamp(2rem, 5vw, 3.5rem); line-height: .92; letter-spacing: -.03em; text-transform: uppercase; margin: 0 0 var(--space-4); font-weight: 400; max-width: 22ch; } .genre-cross__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-2); } .genre-cross__card { padding: var(--space-3); border: 1px solid var(--line); border-radius: var(--radius); background: var(--bg-2); display: grid; gap: .5em; transition: border-color var(--t-fast), background var(--t-fast), transform var(--t-fast); } .genre-cross__card:hover { border-color: var(--genre-c); background: var(--bg-3); transform: translateY(-2px); } .genre-cross__card .eyebrow { font-family: var(--f-mono); font-size: .68rem; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-2); } .genre-cross__card h3 { font-family: var(--f-display); font-size: clamp(1.4rem, 2.4vw, 2rem); line-height: 1; letter-spacing: -.01em; text-transform: uppercase; margin: 0; font-weight: 400; } .genre-cross__card p { font-size: .92rem; line-height: 1.5; color: var(--ink-2); margin: 0; } @media (max-width: 980px) { .genre-night { grid-template-columns: 1fr; gap: var(--space-3); } .genre-night__date { position: relative; top: 0; } .genre-night__day { font-size: clamp(5rem, 22vw, 9rem); } .genre-figures__grid { grid-template-columns: repeat(2, 1fr); } .genre-cross__grid { grid-template-columns: 1fr; } } @media (max-width: 540px) { .genre-figures__grid { grid-template-columns: 1fr; } .genre-night__lineup a { flex-direction: column; align-items: flex-start; gap: .3em; } .genre-night__lineup span { text-align: left; } } /* ============================================ HOTEL BOOKING WIDGET (info.html#stay) ============================================ */ .hotel-widget { margin-top: var(--space-3); display: grid; gap: var(--space-3); } .hotel-widget__form { display: grid; /* minmax(0, 1fr) prevents date input min-content from pushing cols wider than parent */ grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) auto; gap: var(--space-2); padding: var(--space-3); border: 1px solid var(--line-strong); border-radius: var(--radius); background: var(--bg-2); align-items: end; } .hotel-widget__field { display: grid; gap: .35em; } .hotel-widget__field label { font-family: var(--f-mono); font-size: .68rem; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-2); } .hotel-widget__field input, .hotel-widget__field select { padding: .8em 1em; background: var(--bg-3); border: 1px solid var(--line); border-radius: 8px; color: var(--ink); font-family: var(--f-body); font-size: 1rem; appearance: none; -webkit-appearance: none; cursor: pointer; transition: border-color var(--t-fast); } .hotel-widget__field input:focus, .hotel-widget__field select:focus { outline: none; border-color: var(--lime); } .hotel-widget__field input::-webkit-calendar-picker-indicator { filter: invert(.8); cursor: pointer; } .hotel-widget__form .btn { white-space: nowrap; height: 100%; align-self: stretch; } .hotel-widget__results { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-2); } .hotel-card { position: relative; padding: var(--space-3); border: 1px solid var(--line); border-radius: var(--radius); background: var(--bg-2); display: grid; gap: .55em; transition: border-color var(--t-fast), background var(--t-fast), transform var(--t-fast); isolation: isolate; } .hotel-card::before { content: ""; position: absolute; inset: 0; background: radial-gradient(60% 70% at 100% 0%, var(--heat) 0%, transparent 65%); opacity: .06; border-radius: inherit; z-index: -1; transition: opacity var(--t-fast); } .hotel-card:hover { border-color: var(--ink-2); transform: translateY(-2px); } .hotel-card:hover::before { opacity: .14; } .hotel-card--alt::before { background: radial-gradient(60% 70% at 100% 0%, var(--lime) 0%, transparent 65%); } .hotel-card__type { font-family: var(--f-mono); font-size: .68rem; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-2); margin: 0; } .hotel-card__name { font-family: var(--f-display); font-size: clamp(1.3rem, 2vw, 1.7rem); line-height: 1; letter-spacing: -.01em; text-transform: uppercase; margin: 0; font-weight: 400; } .hotel-card__meta { display: flex; flex-wrap: wrap; gap: .8em; margin: .25em 0 .5em; font-family: var(--f-mono); font-size: .7rem; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); } .hotel-card__meta span { padding-right: .8em; border-right: 1px solid var(--line); } .hotel-card__meta span:last-child { border-right: 0; padding-right: 0; } .hotel-card__price { font-size: .9rem; color: var(--ink-2); margin: 0; } .hotel-card__price strong { font-family: var(--f-display); font-size: clamp(1.6rem, 2.4vw, 2.2rem); letter-spacing: -.01em; color: var(--ink); font-weight: 400; margin-right: .15em; } .hotel-card__lede { font-size: .92rem; line-height: 1.5; color: var(--ink-2); margin: 0; } .hotel-card__lede code { font-family: var(--f-mono); font-size: .82rem; background: var(--bg-3); padding: .15em .4em; border-radius: 4px; color: var(--lime); } .hotel-card .btn { justify-self: start; margin-top: .25em; } .hotel-widget__note { font-family: var(--f-mono); font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; color: var(--mute); line-height: 1.6; text-align: center; margin: 0; } @media (max-width: 900px) { .hotel-widget__form { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .hotel-widget__form .btn { grid-column: span 2; } .hotel-widget__results { grid-template-columns: minmax(0, 1fr); } } /* ============================================ PRESS RELEASE ARCHIVE Specificity bumped to .press-releases .press-release (0,2,0) so it beats `.info-section ul li` (0,1,2) which would otherwise apply 1fr-auto grid and 9px×0 padding to every

in info sections. ============================================ */ .press-releases { display: grid; gap: var(--space-2); margin: var(--space-3) 0 0; padding: 0; list-style: none; } .press-releases .press-release { position: relative; padding: var(--space-4); border: 1px solid var(--line); border-bottom: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--bg-2); display: grid; grid-template-columns: minmax(0, 1fr); gap: .8rem; isolation: isolate; transition: border-color var(--t-fast), background var(--t-fast); } .press-releases .press-release::before { content: ""; position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(135deg, var(--c1, var(--heat)) 0%, transparent 50%); opacity: .06; z-index: -1; transition: opacity var(--t-fast); } .press-releases .press-release[data-tone="heat"] { --c1: #FF3B14; } .press-releases .press-release[data-tone="lime"] { --c1: #D7FF1E; } .press-releases .press-release[data-tone="sky"] { --c1: #4A6CF7; } .press-releases .press-release[data-tone="ink"] { --c1: #1B191C; } .press-releases .press-release[data-tone="pink"] { --c1: #FF6BAA; } .press-releases .press-release:hover { border-color: var(--ink-2); } .press-releases .press-release:hover::before { opacity: .14; } .press-release__date { font-family: var(--f-mono); font-size: .7rem; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-2); margin: 0; } .press-release__title { font-family: var(--f-display); font-size: clamp(1.6rem, 3vw, 2.4rem); line-height: .95; letter-spacing: -.02em; text-transform: uppercase; margin: 0; font-weight: 400; text-wrap: balance; } .press-release__lede { font-family: var(--f-italic); font-style: italic; font-size: clamp(1rem, 1.3vw, 1.2rem); line-height: 1.5; color: var(--ink); margin: 0; } .press-release__excerpt { font-size: .95rem; line-height: 1.65; color: var(--ink-2); margin: 0; max-width: 75ch; } /* Collapse the long excerpt on mobile — 550px tall is too much. Show first 5 lines + a fade, expand on click. */ @media (max-width: 720px) { .press-release__excerpt { display: -webkit-box; -webkit-line-clamp: 5; line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden; position: relative; cursor: pointer; } .press-release__excerpt::after { content: "Read more →"; position: absolute; bottom: 0; right: 0; padding: 0 .5em 0 1.5em; font-family: var(--f-mono); font-size: .7rem; letter-spacing: .12em; text-transform: uppercase; color: var(--heat); background: linear-gradient(90deg, transparent, var(--bg-2) 30%); } .press-release__excerpt.is-open { -webkit-line-clamp: unset; line-clamp: unset; overflow: visible; } .press-release__excerpt.is-open::after { display: none; } } .press-release__meta { display: flex; flex-wrap: wrap; gap: 1.2em; margin-top: .35em; align-items: center; font-family: var(--f-mono); font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-2); } .press-release__pdf { color: var(--ink); border-bottom: 1px solid var(--line); padding-bottom: .15em; transition: color var(--t-fast), border-color var(--t-fast); } .press-release__pdf:hover { color: var(--lime); border-color: var(--lime); } /* ============================================ THREE WORLDS · GENRE NAVIGATOR (homepage) ============================================ */ .worlds { padding: var(--space-7) var(--pad-x); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: var(--bg-2); } .worlds__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-2); margin-top: var(--space-4); max-width: 1400px; margin-left: auto; margin-right: auto; } .world { position: relative; display: grid; align-content: start; gap: var(--space-2); padding: var(--space-4) var(--space-3) var(--space-3); border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--bg); color: var(--ink); isolation: isolate; overflow: hidden; transition: border-color var(--t-fast), background var(--t-fast), transform var(--t-med) var(--ease-power); min-height: 460px; } .world::before { content: ""; position: absolute; inset: 0; background: radial-gradient(60% 70% at 100% 0%, var(--c1, var(--heat)) 0%, transparent 65%), radial-gradient(50% 50% at 0% 100%, var(--c2, var(--sky)) 0%, transparent 60%); opacity: .14; z-index: -1; transition: opacity var(--t-med) var(--ease-power); } .world--hiphop { --c1: #FF3B14; --c2: #FF6BAA; } .world--dance { --c1: #4A6CF7; --c2: #6E8AFF; } .world--latin { --c1: #FF6BAA; --c2: #FF3B14; } .world:hover { border-color: var(--ink-2); transform: translateY(-3px); } .world:hover::before { opacity: .28; } .world__num { font-family: var(--f-display); font-size: clamp(3rem, 6vw, 5rem); line-height: .8; letter-spacing: -.04em; color: var(--ink-dark); -webkit-text-stroke: 1.5px var(--ink-2); text-stroke: 1.5px var(--ink-2); margin: 0; font-weight: 400; } .world__eyebrow { font-family: var(--f-mono); font-size: .68rem; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-2); margin: 0; } .world__title { font-family: var(--f-display); font-size: clamp(2rem, 3.5vw, 2.8rem); line-height: .92; letter-spacing: -.02em; text-transform: uppercase; margin: 0 0 .15em; font-weight: 400; text-wrap: balance; } .world__title-em { font-family: var(--f-italic); font-style: italic; text-transform: none; letter-spacing: -.005em; color: var(--ink-2); font-size: .82em; display: block; } .world__nights { margin: 0; padding: var(--space-2) 0 0; list-style: none; display: grid; gap: .5em; border-top: 1px solid var(--line); } .world__nights li { font-size: .9rem; line-height: 1.4; color: var(--ink-2); } .world__nights li span { font-family: var(--f-mono); font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ink); margin-right: .6em; padding: .15em .5em; background: var(--bg-3); border-radius: 4px; } .world__count { font-family: var(--f-mono); font-size: .68rem; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-2); margin: 0; padding-top: var(--space-2); border-top: 1px solid var(--line); } .world__arrow { font-family: var(--f-mono); font-size: .8rem; letter-spacing: .14em; text-transform: uppercase; color: var(--ink); align-self: end; justify-self: start; padding: .6em 1em; border: 1px solid var(--line); border-radius: 999px; margin-top: var(--space-2); transition: background var(--t-fast), border-color var(--t-fast), transform var(--t-fast); } .world:hover .world__arrow { background: var(--lime); border-color: var(--lime); color: var(--ink-dark); transform: translateX(4px); } @media (max-width: 980px) { .worlds__grid { grid-template-columns: 1fr; } .world { min-height: auto; } } .worlds__extras { max-width: 1400px; margin: var(--space-3) auto 0; display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2); } .world-extra { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 1.2rem; padding: 1.4rem 1.6rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--bg); color: var(--ink); transition: border-color var(--t-fast), background var(--t-fast), transform var(--t-fast); } .world-extra:hover { border-color: var(--lime); background: var(--bg-3); transform: translateY(-2px); } .world-extra__icon { font-size: 1.8rem; color: var(--lime); width: 44px; height: 44px; display: grid; place-items: center; background: rgba(215, 255, 30, .1); border-radius: 50%; } .world-extra__main { display: flex; flex-direction: column; gap: .15em; } .world-extra__main strong { font-family: var(--f-display); font-size: clamp(1.2rem, 1.8vw, 1.5rem); letter-spacing: -.005em; text-transform: uppercase; font-weight: 400; } .world-extra__main em { font-style: normal; font-family: var(--f-mono); font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-2); } @media (max-width: 720px) { .worlds__extras { grid-template-columns: 1fr; } }