/* Spot Landing — base styles. Theme vars are set on and can be swapped live. */ :root { /* Default: mint-forward */ --primary: oklch(0.78 0.12 175); --primary-strong: oklch(0.62 0.14 175); --primary-soft: oklch(0.95 0.04 175); --accent: oklch(0.52 0.17 285); --accent-soft: oklch(0.94 0.03 285); --bridge: oklch(0.88 0.07 220); --ink: oklch(0.22 0.02 260); --ink-soft: oklch(0.42 0.02 260); --ink-mute: oklch(0.62 0.015 260); --rule: oklch(0.92 0.005 260); --bg: oklch(0.985 0.005 180); --surface: #ffffff; --surface-2: oklch(0.975 0.008 180); --radius-sm: 10px; --radius: 18px; --radius-lg: 26px; --pill: 999px; --shadow-sm: 0 1px 2px rgba(10, 20, 40, 0.04), 0 2px 8px rgba(10, 20, 40, 0.04); --shadow: 0 2px 6px rgba(10, 20, 40, 0.04), 0 16px 40px -12px rgba(10, 20, 40, 0.12); --shadow-lg: 0 4px 10px rgba(10, 20, 40, 0.05), 0 30px 60px -20px rgba(10, 20, 40, 0.18); --font-head: "Sora", ui-sans-serif, system-ui, sans-serif; --font-body: "Inter", ui-sans-serif, system-ui, sans-serif; --maxw: 1200px; } [data-theme="indigo"] { --primary: oklch(0.52 0.17 285); --primary-strong: oklch(0.42 0.18 285); --primary-soft: oklch(0.94 0.03 285); --accent: oklch(0.72 0.13 175); --accent-soft: oklch(0.95 0.04 175); --bridge: oklch(0.85 0.08 240); } [data-theme="balanced"] { --primary: oklch(0.72 0.13 200); --primary-strong: oklch(0.56 0.15 210); --primary-soft: oklch(0.95 0.04 200); --accent: oklch(0.52 0.17 285); --accent-soft: oklch(0.94 0.03 285); --bridge: oklch(0.86 0.08 210); } [data-font="fraunces"] { --font-head: "Fraunces", Georgia, serif; } [data-font="grotesk"] { --font-head: "Space Grotesk", ui-sans-serif, system-ui, sans-serif; } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; } body { font-family: var(--font-body); color: var(--ink); background: var(--bg); -webkit-font-smoothing: antialiased; font-size: 16px; line-height: 1.55; } h1, h2, h3, h4 { font-family: var(--font-head); color: var(--ink); letter-spacing: -0.02em; margin: 0; text-wrap: balance; } [data-font="fraunces"] h1, [data-font="fraunces"] h2 { letter-spacing: -0.028em; font-weight: 700; font-variation-settings: "SOFT" 100, "opsz" 144, "WONK" 1; } [data-font="fraunces"] h1 { font-weight: 800; } [data-font="fraunces"] h1 em, [data-font="fraunces"] h2 em { font-style: italic !important; font-variation-settings: "SOFT" 100, "opsz" 144, "WONK" 1; letter-spacing: -0.015em; } p { margin: 0; text-wrap: pretty; } a { color: inherit; text-decoration: none; } .container { max-width: var(--maxw); margin: 0 auto; padding: 0 24px; } @media (max-width: 700px) { .container { padding: 0 18px; } } /* Buttons */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 12px 22px; border-radius: var(--pill); font-family: var(--font-body); font-weight: 600; font-size: 15px; cursor: pointer; border: 1px solid transparent; transition: transform 0.15s ease, box-shadow 0.2s ease, background 0.2s ease, color 0.2s ease, border-color 0.2s ease; white-space: nowrap; line-height: 1; } .btn:active { transform: translateY(1px); } .btn-primary { background: var(--ink); color: white; } .btn-primary:hover { background: oklch(0.14 0.02 260); box-shadow: var(--shadow); } .btn-mint { background: var(--primary); color: var(--ink); } .btn-mint:hover { box-shadow: 0 10px 24px -8px color-mix(in oklch, var(--primary) 60%, transparent); } .btn-ghost { background: transparent; color: var(--ink); border-color: var(--rule); } .btn-ghost:hover { border-color: var(--ink); background: var(--surface); } .btn-white { background: white; color: var(--ink); border-color: var(--rule); } .btn-white:hover { box-shadow: var(--shadow); } .btn-lg { padding: 16px 28px; font-size: 16px; } .btn-sm { padding: 9px 16px; font-size: 13px; } /* Chips */ .chip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: var(--pill); background: var(--surface); border: 1px solid var(--rule); font-size: 13px; font-weight: 500; color: var(--ink-soft); } .chip-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--primary); } .chip-mint { background: var(--primary-soft); border-color: transparent; color: var(--ink); } .chip-indigo { background: var(--accent-soft); border-color: transparent; color: var(--accent); } /* Cards */ .card { background: var(--surface); border-radius: var(--radius); border: 1px solid var(--rule); padding: 28px; transition: transform 0.2s ease, box-shadow 0.2s ease; } .card-soft { background: var(--surface-2); border-radius: var(--radius); padding: 28px; } /* Section spacing */ section { padding: 96px 0; } @media (max-width: 780px) { section { padding: 64px 0; } } .eyebrow { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--primary-strong); } .eyebrow::before { content: ""; width: 24px; height: 1px; background: var(--primary-strong); } .section-head { margin-bottom: 56px; max-width: 680px; } .section-head h2 { font-size: clamp(30px, 3.6vw, 44px); line-height: 1.2; margin-top: 12px; text-wrap: balance; padding-bottom: 0.1em; } .section-head p { color: var(--ink-soft); font-size: 18px; margin-top: 24px; line-height: 1.55; } /* Placeholder photo tiles */ .ph { position: relative; background: repeating-linear-gradient( 135deg, color-mix(in oklch, var(--primary-soft) 80%, white) 0 12px, color-mix(in oklch, var(--primary-soft) 60%, white) 12px 24px ); border-radius: var(--radius); overflow: hidden; color: var(--ink-soft); display: flex; align-items: flex-end; padding: 14px; font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 11px; letter-spacing: 0.02em; border: 1px solid var(--rule); } .ph.alt { background: repeating-linear-gradient( 135deg, color-mix(in oklch, var(--accent-soft) 80%, white) 0 12px, color-mix(in oklch, var(--accent-soft) 60%, white) 12px 24px ); } .ph.bridge { background: repeating-linear-gradient( 135deg, color-mix(in oklch, var(--bridge) 50%, white) 0 12px, color-mix(in oklch, var(--bridge) 30%, white) 12px 24px ); } .ph-label { background: rgba(255,255,255,0.85); backdrop-filter: blur(6px); padding: 4px 8px; border-radius: 6px; color: var(--ink-soft); } /* Real photo tile */ .photo { position: relative; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--rule); background: var(--surface-2); min-width: 0; min-height: 0; } .photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; } .photo .cap { position: absolute; left: 12px; top: 12px; background: rgba(255,255,255,0.92); backdrop-filter: blur(6px); padding: 5px 10px; border-radius: 999px; font-size: 11px; font-weight: 600; color: var(--ink); letter-spacing: 0.02em; } /* Tighter, less crowded hero stickers on mobile */ @media (max-width: 700px) { .hero-sticker { padding: 7px 10px !important; font-size: 11px !important; gap: 6px !important; border-width: 2px !important; border-radius: 12px !important; } .hero-sticker svg { width: 12px !important; height: 12px !important; } .photo .cap { font-size: 10px; padding: 4px 8px; left: 8px; top: 8px; } } /* Divider */ .rule { height: 1px; background: var(--rule); border: 0; } /* Visually hidden */ .sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); border: 0; } /* Focus */ :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; } /* Fade animation */ @keyframes fadeUp { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } } .fade-in { animation: fadeUp 0.35s ease-out both; } /* Scroll smooth */ html { scroll-behavior: smooth; } /* Marquee */ @keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } } /* Accordion */ details.faq { border-top: 1px solid var(--rule); padding: 20px 0; } details.faq[open] summary .plus { transform: rotate(45deg); } details.faq summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 16px; font-family: var(--font-head); font-size: 20px; font-weight: 500; color: var(--ink); } details.faq summary::-webkit-details-marker { display: none; } details.faq .plus { width: 28px; height: 28px; border-radius: 50%; border: 1px solid var(--rule); display: grid; place-items: center; transition: transform 0.2s ease; font-size: 16px; color: var(--ink-soft); } details.faq p { margin-top: 12px; color: var(--ink-soft); max-width: 70ch; } /* Hero animated gradient party blobs */ .hero { position: relative; overflow: hidden; isolation: isolate; /* Pull hero up behind sticky header so blobs show through glass */ margin-top: -72px; padding-top: 128px !important; } /* Festival photo background — always fills the entire hero section at every breakpoint via `cover`. Side-cropping is preferred over a vertical cutoff. */ .hero::before { content: ""; position: absolute; inset: 0; background-image: url('/images/hero-bg.webp'); background-size: cover; background-position: center center; background-repeat: no-repeat; opacity: 0.24; z-index: -1; pointer-events: none; } @media (max-width: 700px) { .hero::before { background-image: url('/images/hero-bg-mobile.webp'); background-position: center bottom; opacity: 0.42; } } .hero .container { position: relative; z-index: 2; } .hero-blobs { position: absolute; inset: -12%; z-index: 0; pointer-events: none; filter: blur(60px) saturate(1.4); opacity: 0.9; contain: layout paint; } .hero-blob { position: absolute; width: 40vw; height: 40vw; max-width: 640px; max-height: 640px; border-radius: 50%; mix-blend-mode: multiply; will-change: transform; } .hero-blob.b1 { top: -8%; left: -6%; background: radial-gradient(circle at 30% 30%, var(--primary) 0%, transparent 68%); animation: blobA 22s ease-in-out infinite; } .hero-blob.b2 { top: 30%; right: -8%; background: radial-gradient(circle at 50% 50%, var(--accent) 0%, transparent 65%); animation: blobB 26s ease-in-out infinite; } .hero-blob.b3 { bottom: -14%; left: 22%; width: 48vw; height: 48vw; background: radial-gradient(circle at 50% 50%, var(--bridge) 0%, transparent 65%); animation: blobC 30s ease-in-out infinite; } .hero-blob.b4 { top: 8%; left: 38%; width: 28vw; height: 28vw; background: radial-gradient(circle at 50% 50%, color-mix(in oklch, var(--primary) 70%, var(--accent)) 0%, transparent 65%); animation: blobD 24s ease-in-out infinite; } /* Seamless: each keyframe cycle returns to 0,0 */ @keyframes blobA { 0% { transform: translate(0, 0) scale(1); } 25% { transform: translate(14vw, 6vh) scale(1.12); } 50% { transform: translate(22vw, -4vh) scale(0.92); } 75% { transform: translate(8vw, 10vh) scale(1.05); } 100% { transform: translate(0, 0) scale(1); } } @keyframes blobB { 0% { transform: translate(0, 0) scale(1); } 25% { transform: translate(-12vw, 8vh) scale(0.95); } 50% { transform: translate(-20vw, -6vh) scale(1.15); } 75% { transform: translate(-6vw, 12vh) scale(1.05); } 100% { transform: translate(0, 0) scale(1); } } @keyframes blobC { 0% { transform: translate(0, 0) scale(1); } 25% { transform: translate(10vw, -8vh) scale(1.08); } 50% { transform: translate(-8vw, -14vh) scale(0.92); } 75% { transform: translate(-14vw, -4vh) scale(1.12); } 100% { transform: translate(0, 0) scale(1); } } @keyframes blobD { 0% { transform: translate(0, 0) scale(1); } 25% { transform: translate(6vw, 10vh) scale(1.1); } 50% { transform: translate(-4vw, 16vh) scale(0.88); } 75% { transform: translate(-10vw, 4vh) scale(1.05); } 100% { transform: translate(0, 0) scale(1); } } @media (prefers-reduced-motion: reduce) { .hero-blob { animation: none !important; } } [data-hero="dark"] .hero-blobs { opacity: 0.55; filter: blur(90px) saturate(1.5); } [data-hero="dark"] .hero-blob { mix-blend-mode: screen; } [data-hero="dark"] .hero h1, [data-hero="dark"] .hero .sub { color: white; } [data-hero="dark"] .hero .sub { color: oklch(0.82 0.02 260); } [data-hero="dark"] .hero .chip { background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.14); color: rgba(255,255,255,0.9); } [data-hero="dark"] .hero .chip-dot { background: var(--primary); } [data-hero="dark"] .hero .btn-ghost { color: white; border-color: rgba(255,255,255,0.25); } [data-hero="dark"] .hero .btn-ghost:hover { background: rgba(255,255,255,0.08); border-color: white; } [data-hero="dark"] .hero .ph { border-color: rgba(255,255,255,0.08); } [data-hero="dark"] .hero .event-meta { background: rgba(255,255,255,0.05); border-color: rgba(255,255,255,0.12); } [data-hero="dark"] .hero .event-meta span { color: oklch(0.85 0.02 260); } [data-hero="dark"] .hero .event-meta strong { color: white; } /* ============================================ PARTY BACKGROUNDS — site-wide festive system Drop .party-bg on a
, add a variant class, and nest
with 2–3 .party-blob children. ============================================ */ .party-bg { position: relative; overflow: hidden; isolation: isolate; } .party-bg > .container, .party-bg > * { position: relative; z-index: 2; } .party-bg > .party-bg__blobs { z-index: 0; } /* ---------- Edge feather — softens seams between sections ---------- Subtle, narrow edges only (~56px), so text inside the section is never washed out. Dark sections get a dark-matched feather (no white bleach). Two adjacent LIGHT sections overlap their fades → seamless blend. A LIGHT→DARK boundary stays intentional: each side softens within its own color family instead of bleaching across the seam. */ .party-bg::before { content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 1; background: linear-gradient( to bottom, rgba(255, 255, 255, 0.55) 0, rgba(255, 255, 255, 0.2) 28px, rgba(255, 255, 255, 0) 60px, rgba(255, 255, 255, 0) calc(100% - 60px), rgba(255, 255, 255, 0.2) calc(100% - 28px), rgba(255, 255, 255, 0.55) 100% ); } /* Dark sections: fade to the ink's OWN color (darker at the edge), so the top + bottom 56px gently vignette inward instead of washing out text. */ .party-bg--dark::before { background: linear-gradient( to bottom, oklch(0.14 0.02 260 / 0.75) 0, oklch(0.14 0.02 260 / 0.35) 28px, oklch(0.14 0.02 260 / 0) 64px, oklch(0.14 0.02 260 / 0) calc(100% - 64px), oklch(0.14 0.02 260 / 0.35) calc(100% - 28px), oklch(0.14 0.02 260 / 0.75) 100% ); } .party-bg__blobs { position: absolute; inset: -10%; pointer-events: none; filter: blur(56px) saturate(1.45); opacity: 0.85; contain: layout paint; } .party-blob { position: absolute; border-radius: 50%; mix-blend-mode: multiply; will-change: transform; } /* ---------- WARM variant (peach / bridge / accent) ---------- */ .party-bg--warm { background: radial-gradient(ellipse 80% 70% at 100% 0%, color-mix(in oklch, var(--accent) 22%, transparent) 0%, transparent 55%), radial-gradient(ellipse 70% 60% at 0% 100%, color-mix(in oklch, var(--bridge) 28%, transparent) 0%, transparent 55%), linear-gradient(135deg, color-mix(in oklch, var(--accent-soft) 90%, white) 0%, color-mix(in oklch, var(--bridge) 22%, white) 100%); } .party-bg--warm .party-blob.p1 { width: 36vw; height: 36vw; top: -6%; left: -4%; background: radial-gradient(circle at 40% 40%, color-mix(in oklch, var(--bridge) 90%, var(--accent)) 0%, transparent 65%); animation: partyDriftA 28s ease-in-out infinite; } .party-bg--warm .party-blob.p2 { width: 30vw; height: 30vw; top: 20%; right: -6%; background: radial-gradient(circle at 50% 50%, color-mix(in oklch, var(--accent) 60%, var(--bridge)) 0%, transparent 65%); animation: partyDriftB 34s ease-in-out infinite; } .party-bg--warm .party-blob.p3 { width: 40vw; height: 40vw; bottom: -18%; left: 30%; background: radial-gradient(circle at 50% 50%, color-mix(in oklch, var(--primary) 45%, var(--bridge)) 0%, transparent 65%); animation: partyDriftC 32s ease-in-out infinite; } /* ---------- COOL variant (mint / indigo) ---------- */ .party-bg--cool { background: radial-gradient(ellipse 80% 70% at 0% 0%, color-mix(in oklch, var(--primary) 24%, transparent) 0%, transparent 55%), radial-gradient(ellipse 70% 60% at 100% 100%, color-mix(in oklch, var(--accent) 20%, transparent) 0%, transparent 55%), linear-gradient(135deg, color-mix(in oklch, var(--primary-soft) 95%, white) 0%, color-mix(in oklch, var(--accent-soft) 55%, white) 100%); } .party-bg--cool .party-blob.p1 { width: 34vw; height: 34vw; top: 10%; left: -8%; background: radial-gradient(circle at 50% 50%, var(--primary) 0%, transparent 65%); animation: partyDriftB 30s ease-in-out infinite; } .party-bg--cool .party-blob.p2 { width: 38vw; height: 38vw; top: -10%; right: -10%; background: radial-gradient(circle at 50% 50%, color-mix(in oklch, var(--accent) 70%, var(--primary)) 0%, transparent 65%); animation: partyDriftA 36s ease-in-out infinite; } .party-bg--cool .party-blob.p3 { width: 30vw; height: 30vw; bottom: -12%; left: 20%; background: radial-gradient(circle at 50% 50%, var(--bridge) 0%, transparent 65%); animation: partyDriftC 28s ease-in-out infinite; } /* ---------- SOFT variant (low-key tint, 1 blob) ---------- */ .party-bg--soft { background: radial-gradient(ellipse 90% 80% at 50% 0%, color-mix(in oklch, var(--bridge) 34%, transparent) 0%, transparent 60%), linear-gradient(180deg, color-mix(in oklch, var(--primary-soft) 55%, white) 0%, color-mix(in oklch, var(--accent-soft) 40%, white) 100%); } .party-bg--soft .party-bg__blobs { opacity: 0.72; filter: blur(70px) saturate(1.35); } .party-bg--soft .party-blob.p1 { width: 44vw; height: 44vw; top: -10%; right: -12%; background: radial-gradient(circle at 50% 50%, color-mix(in oklch, var(--primary) 55%, var(--bridge)) 0%, transparent 65%); animation: partyDriftA 40s ease-in-out infinite; } .party-bg--soft .party-blob.p2 { width: 36vw; height: 36vw; bottom: -14%; left: -8%; background: radial-gradient(circle at 50% 50%, color-mix(in oklch, var(--accent) 40%, var(--bridge)) 0%, transparent 65%); animation: partyDriftC 44s ease-in-out infinite; } /* ---------- DARK variant (ink + glowing orbs) ---------- */ .party-bg--dark { background: var(--ink); color: white; } .party-bg--dark .party-bg__blobs { opacity: 0.5; filter: blur(70px) saturate(1.6); } .party-bg--dark .party-blob { mix-blend-mode: screen; } .party-bg--dark .party-blob.p1 { width: 38vw; height: 38vw; top: -10%; left: -6%; background: radial-gradient(circle at 50% 50%, var(--primary) 0%, transparent 62%); animation: partyDriftB 30s ease-in-out infinite; } .party-bg--dark .party-blob.p2 { width: 34vw; height: 34vw; top: 20%; right: -8%; background: radial-gradient(circle at 50% 50%, var(--accent) 0%, transparent 62%); animation: partyDriftA 34s ease-in-out infinite; } .party-bg--dark .party-blob.p3 { width: 30vw; height: 30vw; bottom: -14%; left: 35%; background: radial-gradient(circle at 50% 50%, var(--bridge) 0%, transparent 62%); animation: partyDriftC 28s ease-in-out infinite; } /* ---------- CONFETTI overlay (tiny static dots, optional add-on) ---------- */ .party-bg--confetti::after { content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none; background-image: radial-gradient(circle, color-mix(in oklch, var(--primary) 75%, transparent) 1.6px, transparent 2.2px), radial-gradient(circle, color-mix(in oklch, var(--accent) 70%, transparent) 1.6px, transparent 2.2px), radial-gradient(circle, color-mix(in oklch, var(--bridge) 80%, transparent) 1.4px, transparent 2.2px); background-size: 120px 120px, 180px 180px, 150px 150px; background-position: 0 0, 40px 60px, 90px 30px; opacity: 0.7; } .party-bg--dark.party-bg--confetti::after { background-image: radial-gradient(circle, color-mix(in oklch, var(--primary) 80%, transparent) 1.5px, transparent 2px), radial-gradient(circle, color-mix(in oklch, var(--accent) 80%, transparent) 1.5px, transparent 2px), radial-gradient(circle, rgba(255,255,255,0.4) 1px, transparent 2px); opacity: 0.35; } /* ---------- Shared keyframes (seamless, return to origin) ---------- */ @keyframes partyDriftA { 0% { transform: translate(0, 0) scale(1); } 25% { transform: translate(8vw, 6vh) scale(1.1); } 50% { transform: translate(14vw, -4vh) scale(0.92); } 75% { transform: translate(4vw, 8vh) scale(1.05); } 100% { transform: translate(0, 0) scale(1); } } @keyframes partyDriftB { 0% { transform: translate(0, 0) scale(1); } 25% { transform: translate(-10vw, 6vh) scale(0.95); } 50% { transform: translate(-14vw, -4vh) scale(1.12); } 75% { transform: translate(-4vw, 10vh) scale(1.05); } 100% { transform: translate(0, 0) scale(1); } } @keyframes partyDriftC { 0% { transform: translate(0, 0) scale(1); } 25% { transform: translate(6vw, -8vh) scale(1.08); } 50% { transform: translate(-6vw, -12vh) scale(0.92); } 75% { transform: translate(-10vw, -2vh) scale(1.1); } 100% { transform: translate(0, 0) scale(1); } } @media (prefers-reduced-motion: reduce) { .party-blob { animation: none !important; } } /* ============================================ HERO ENTRANCE CHOREOGRAPHY ============================================ */ .hero-enter .hero-reveal { opacity: 0; transform: translateY(14px); animation: heroReveal 0.7s cubic-bezier(0.2, 0.65, 0.3, 1) forwards; animation-delay: var(--d, 0ms); } @keyframes heroReveal { to { opacity: 1; transform: translateY(0); } } /* Word-by-word headline */ .hero-headline { display: flex; flex-wrap: wrap; gap: 0.08em 0.3em; line-height: 1.02; } .hero-word-wrap { display: inline-block; line-height: 1.02; } .hero-enter .hero-word { display: inline-block; transform: translateY(110%) rotate(4deg); opacity: 0; animation: heroWordRise 0.75s cubic-bezier(0.22, 1, 0.36, 1) forwards; animation-delay: var(--d, 0ms); will-change: transform; } @keyframes heroWordRise { to { transform: translateY(0) rotate(0); opacity: 1; } } /* Photo collage tiles snap in */ .hero-enter .photo { opacity: 0; transform: scale(0.92) rotate(var(--r, 0deg)); animation: heroTile 0.8s cubic-bezier(0.2, 0.9, 0.25, 1.1) forwards; animation-delay: calc(800ms + var(--i, 0) * 90ms); } @keyframes heroTile { to { opacity: 1; transform: scale(1) rotate(var(--rEnd, 0deg)); } } /* Stickers pop in with bounce */ .hero-enter .hero-sticker { opacity: 0; transform: scale(0.4) rotate(var(--rStart, 0deg)); animation: heroSticker 0.65s cubic-bezier(0.34, 1.56, 0.64, 1) forwards; animation-delay: var(--d, 1100ms); } @keyframes heroSticker { to { opacity: 1; transform: scale(1) rotate(var(--rEnd, 0deg)); } } @media (prefers-reduced-motion: reduce) { .hero-enter .hero-reveal, .hero-enter .hero-word, .hero-enter .photo, .hero-enter .hero-sticker { animation: none !important; opacity: 1 !important; transform: none !important; } } /* ============================================ DECORATIVE SYSTEMS (non-blob variety) ============================================ */ /* --- Brutalist numbered FAQ --- */ .faq-numbered summary { display: grid !important; grid-template-columns: auto 1fr auto; gap: 20px; align-items: baseline; } .faq-num { font-family: var(--font-head); font-weight: 800; font-size: clamp(36px, 4vw, 52px); line-height: 0.9; color: transparent; -webkit-text-stroke: 1.5px var(--ink); letter-spacing: -0.04em; font-variation-settings: "SOFT" 100, "opsz" 144, "WONK" 1; font-style: italic; transition: all 0.3s ease; min-width: 1.8em; } details.faq[open] .faq-num { color: var(--accent); -webkit-text-stroke: 0; } .faq-q { font-size: 18px; font-weight: 600; color: var(--ink); align-self: center; line-height: 1.3; } details.faq[open] .faq-q { color: var(--ink); } details.faq .plus { align-self: center; } /* --- Oversized decorative Fraunces quotation mark --- */ .deco-quote { position: absolute; font-family: "Fraunces", Georgia, serif; font-style: italic; font-weight: 800; font-variation-settings: "SOFT" 100, "opsz" 144, "WONK" 1; color: color-mix(in oklch, var(--primary) 25%, transparent); line-height: 0.6; pointer-events: none; user-select: none; z-index: 0; } /* --- Tilted marquee belt --- */ .tilt-belt { transform: rotate(-1.2deg); transform-origin: center; } .tilt-belt-reverse { transform: rotate(1deg); } /* --- Stamp/sticker accent (used on Highlights) --- */ .stamp { position: absolute; top: -14px; right: -14px; background: var(--accent); color: white; padding: 6px 14px; border-radius: 4px; font-family: var(--font-body); font-weight: 700; font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; transform: rotate(6deg); box-shadow: 0 6px 20px -4px color-mix(in oklch, var(--accent) 60%, transparent); z-index: 3; border: 2px solid white; } /* --- Tilted tiles helpers --- */ .tilt-neg { transform: rotate(-1.2deg); } .tilt-pos { transform: rotate(1.2deg); } .tilt-neg-strong { transform: rotate(-3deg); } .tilt-pos-strong { transform: rotate(2.5deg); } /* Polaroid treatment for gallery photos */ .polaroid { background: white; padding: 10px 10px 38px; border-radius: 2px; box-shadow: 0 10px 30px -8px rgba(14,20,28,0.25); position: relative; } .polaroid img { display: block; width: 100%; height: 100%; object-fit: cover; } .polaroid .tape { position: absolute; top: -10px; left: 50%; transform: translateX(-50%) rotate(-2deg); width: 80px; height: 22px; background: color-mix(in oklch, var(--bridge) 60%, white); opacity: 0.7; box-shadow: 0 2px 4px rgba(14,20,28,0.08); } /* Hero editorial eyebrow — replaces the heavy chip */ .hero-eyebrow { display: inline-flex; align-items: center; gap: 10px; font-size: 12px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-soft); font-family: var(--font-body); } .hero-eyebrow__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--primary); box-shadow: 0 0 0 4px color-mix(in oklch, var(--primary) 22%, transparent); animation: eyebrowPulse 2.8s ease-in-out infinite; flex-shrink: 0; } @keyframes eyebrowPulse { 0%, 100% { box-shadow: 0 0 0 4px color-mix(in oklch, var(--primary) 22%, transparent); } 50% { box-shadow: 0 0 0 7px color-mix(in oklch, var(--primary) 8%, transparent); } } .hero-eyebrow svg { color: var(--primary-strong); opacity: 0.9; } [data-hero="dark"] .hero-eyebrow { color: rgba(255,255,255,0.75); } [data-hero="dark"] .hero-eyebrow svg { color: var(--primary); opacity: 1; } @media (prefers-reduced-motion: reduce) { .hero-eyebrow__dot { animation: none; } } /* ============================================ APP STORE / GOOGLE PLAY BADGES (3D glossy) ============================================ */ .store-btn { display: inline-flex; align-items: center; gap: 12px; padding: 12px 22px; background: linear-gradient(180deg, #2a2e36 0%, #0c0f14 100%); color: white; border-radius: 14px; text-decoration: none; position: relative; overflow: hidden; min-width: 180px; box-shadow: inset 0 1px 0 rgba(255,255,255,0.18), inset 0 -1px 0 rgba(0,0,0,0.5), 0 1px 2px rgba(0,0,0,0.1), 0 6px 14px -4px rgba(0,0,0,0.35), 0 14px 28px -10px rgba(0,0,0,0.3); transition: transform 0.2s cubic-bezier(.22,1,.36,1), box-shadow 0.2s ease; transform: translateZ(0); } .store-btn::before { /* specular highlight (top gloss) */ content: ''; position: absolute; inset: 1px 1px auto 1px; height: 48%; border-radius: 13px 13px 40% 40% / 13px 13px 18% 18%; background: linear-gradient(180deg, rgba(255,255,255,0.22) 0%, rgba(255,255,255,0.06) 70%, transparent 100%); pointer-events: none; } .store-btn::after { /* soft side gleam on hover */ content: ''; position: absolute; top: 0; left: -60%; width: 50%; height: 100%; background: linear-gradient(100deg, transparent 0%, rgba(255,255,255,0.22) 50%, transparent 100%); transform: skewX(-20deg); opacity: 0; transition: left 0.6s ease, opacity 0.4s ease; pointer-events: none; } .store-btn:hover { transform: translateY(-2px); box-shadow: inset 0 1px 0 rgba(255,255,255,0.22), inset 0 -1px 0 rgba(0,0,0,0.5), 0 2px 4px rgba(0,0,0,0.12), 0 10px 22px -6px rgba(0,0,0,0.4), 0 22px 40px -14px rgba(0,0,0,0.35); } .store-btn:hover::after { left: 140%; opacity: 1; } .store-btn:active { transform: translateY(0); box-shadow: inset 0 2px 4px rgba(0,0,0,0.4), inset 0 -1px 0 rgba(255,255,255,0.1), 0 1px 2px rgba(0,0,0,0.2); } .store-btn__icon { flex-shrink: 0; filter: drop-shadow(0 1px 0 rgba(0,0,0,0.3)); position: relative; z-index: 1; } .store-btn__text { display: flex; flex-direction: column; line-height: 1.1; position: relative; z-index: 1; text-align: left; } .store-btn__over { font-size: 10px; font-weight: 500; letter-spacing: 0.02em; opacity: 0.82; text-transform: none; } .store-btn__name { font-size: 17px; font-weight: 700; letter-spacing: -0.01em; font-family: var(--font-body); } .store-btn--android .store-btn__icon { filter: drop-shadow(0 1px 2px rgba(0,0,0,0.4)); } /* ============================================ STANDALONE QR (below download buttons) ============================================ */ .qr-standalone { position: relative; width: 180px; height: 180px; margin: 28px auto 0; cursor: pointer; transition: transform 0.5s cubic-bezier(.22,1,.36,1), filter 0.5s ease; perspective: 800px; } .qr-standalone__flat, .qr-standalone__3d { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: 10px; display: block; transition: opacity 0.5s cubic-bezier(.22,1,.36,1), transform 0.7s cubic-bezier(.22,1,.36,1); backface-visibility: hidden; } .qr-standalone__3d { opacity: 0; transform: rotateX(14deg) rotateY(-10deg) scale(0.94); transform-origin: center; } .qr-standalone:hover { transform: translateY(-4px); filter: drop-shadow(0 22px 40px rgba(10, 20, 40, 0.22)); } .qr-standalone:hover .qr-standalone__flat { opacity: 0; transform: scale(0.96); } .qr-standalone:hover .qr-standalone__3d { opacity: 1; transform: rotateX(10deg) rotateY(-6deg) scale(1.08); } @media (max-width: 900px) { .qr-standalone { display: none; } } @media (prefers-reduced-motion: reduce) { .qr-standalone, .qr-standalone__flat, .qr-standalone__3d { transition: none !important; } } /* legacy qr-card (no longer used) */ .qr-card { display: flex; align-items: center; gap: 12px; padding: 10px 14px; background: white; border-radius: var(--radius); border: 1px solid var(--rule); cursor: pointer; transition: box-shadow 0.35s ease, transform 0.35s cubic-bezier(.22,1,.36,1); } .qr-card:hover { box-shadow: 0 14px 32px -10px rgba(10, 20, 40, 0.22), 0 4px 10px rgba(10, 20, 40, 0.08); transform: translateY(-2px); } .qr-card__img { position: relative; width: 48px; height: 48px; flex-shrink: 0; } .qr-card__flat, .qr-card__3d { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: 6px; display: block; transition: opacity 0.45s cubic-bezier(.22,1,.36,1), transform 0.6s cubic-bezier(.22,1,.36,1); backface-visibility: hidden; } .qr-card__3d { opacity: 0; transform: rotateX(18deg) rotateY(-12deg) scale(0.92); transform-origin: center; } .qr-card:hover .qr-card__flat { opacity: 0; transform: scale(0.94); } .qr-card:hover .qr-card__3d { opacity: 1; transform: rotateX(12deg) rotateY(-8deg) scale(1.06); } @media (prefers-reduced-motion: reduce) { .qr-card, .qr-card__flat, .qr-card__3d { transition: none !important; } } /* ========================================================================== PAST MEETUPS — polaroid cork-board wall Real flyers from past Spot meetups pinned up like a cork board. ========================================================================== */ .past-meetups { /* soft parchment warmth on top of .party-bg--soft so it doesn't look white */ background: radial-gradient(1200px 480px at 80% -10%, rgba(255, 200, 120, 0.08), transparent 60%), radial-gradient(900px 400px at 10% 110%, rgba(180, 120, 200, 0.06), transparent 60%), var(--bg); } /* Polaroid belt — full-bleed horizontal marquee. Same seamless-loop trick as SponsorLogos: array is duplicated in JSX, the track animates -50% over N seconds and restarts. */ .polaroid-belt { position: relative; z-index: 2; overflow: hidden; padding: 24px 0 28px; /* breathing room for hover-lift + tilt */ margin: 0 -6%; /* bleed past container */ /* soft edge fade so cards dissolve at the sides */ -webkit-mask-image: linear-gradient( to right, transparent 0, #000 6%, #000 94%, transparent 100% ); mask-image: linear-gradient( to right, transparent 0, #000 6%, #000 94%, transparent 100% ); } .polaroid-track { display: flex; gap: 40px; width: max-content; animation: marquee 70s linear infinite; will-change: transform; } .polaroid-belt:hover .polaroid-track { animation-play-state: paused; } /* Individual polaroid — FIXED HEIGHT, VARIABLE WIDTH. Width is driven by the photo's natural aspect-ratio (passed in as --aspect from JSX). Each flyer fills its frame edge-to-edge, no white mat, no gaps. Photos of different aspects give the belt an organic rhythm — like real prints pinned to a cork board. */ .polaroid { --rot: 0deg; --aspect: 1; --photo-h: 240px; flex: 0 0 auto; margin: 0; background: #fff; padding: 12px 12px 14px; border-radius: 3px; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08), 0 14px 28px -14px rgba(0, 0, 0, 0.25), 0 26px 50px -28px rgba(0, 0, 0, 0.22); transform: rotate(var(--rot)); transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.4s ease; position: relative; display: flex; flex-direction: column; will-change: transform; } /* subtle paper tint variation — different polaroids printed on slightly different paper stocks */ .polaroid:nth-child(3n) { background: #fefcf7; } .polaroid:nth-child(5n) { background: #fdfdfb; } .polaroid:hover { transform: rotate(0deg) translateY(-6px) scale(1.05); z-index: 10; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 22px 44px -18px rgba(0, 0, 0, 0.35), 0 44px 80px -40px rgba(0, 0, 0, 0.28); } /* Photo area — fixed height, width derived from aspect-ratio. aspect-ratio wins over width so the container sizes to (height * aspect). */ .polaroid-photo { height: var(--photo-h); aspect-ratio: var(--aspect); overflow: hidden; border-radius: 1px; position: relative; background: #f3f1ec; /* only visible if an image fails; no more mat */ } .polaroid-photo img { width: 100%; height: 100%; object-fit: cover; display: block; } /* Caption width tracks the photo width so the card looks intentional at any aspect — no overhanging text, no squeezed labels. */ .polaroid figcaption { min-width: 0; max-width: calc(var(--photo-h) * var(--aspect)); } /* Caption below */ .polaroid figcaption { padding: 12px 4px 0; display: flex; flex-direction: column; gap: 2px; text-align: center; font-family: var(--font-serif); } .polaroid .cap-title { font-style: italic; font-size: 17px; color: var(--ink); line-height: 1.2; } .polaroid .cap-sub { font-size: 12px; color: var(--ink-mute); letter-spacing: 0.02em; } /* Tape decoration */ .tape { position: absolute; top: -8px; width: 64px; height: 20px; background: linear-gradient( to right, rgba(255, 240, 150, 0.55) 0%, rgba(255, 240, 150, 0.82) 20%, rgba(255, 240, 150, 0.82) 80%, rgba(255, 240, 150, 0.55) 100% ); border-left: 1px dashed rgba(0, 0, 0, 0.06); border-right: 1px dashed rgba(0, 0, 0, 0.06); box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); z-index: 2; } .tape-left { left: 10px; transform: rotate(-14deg); } .tape-right { right: 10px; transform: rotate(14deg); } /* Pushpin */ .pushpin { position: absolute; top: -6px; left: 50%; transform: translateX(-50%); width: 14px; height: 14px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #ff9090 0%, #e23a3f 55%, #8a1519 100%); box-shadow: 0 3px 5px rgba(0, 0, 0, 0.35), inset 0 1px 1.5px rgba(255, 255, 255, 0.6), inset 0 -2px 3px rgba(0, 0, 0, 0.35); z-index: 3; } .pushpin::after { content: ''; position: absolute; left: 50%; top: 50%; width: 2px; height: 2px; border-radius: 50%; background: rgba(255, 255, 255, 0.8); transform: translate(-50%, -50%); filter: blur(0.5px); } /* Responsive belt tuning — smaller photos, faster loop on smaller screens. We only change --photo-h; the aspect-ratio rule derives each card's width. */ @media (max-width: 820px) { .polaroid { --photo-h: 200px; padding: 10px 10px 12px; } .polaroid-track { gap: 32px; animation-duration: 60s; } .polaroid-belt { margin: 0 -4%; padding: 20px 0 24px; } } @media (max-width: 520px) { .polaroid { --photo-h: 170px; } .polaroid-track { gap: 24px; animation-duration: 50s; } .polaroid-belt { margin: 0 -20px; } .polaroid .cap-title { font-size: 15px; } .polaroid .cap-sub { font-size: 11px; } } @media (prefers-reduced-motion: reduce) { .polaroid-track { animation: none; } .polaroid { transition: none; } .polaroid:hover { transform: rotate(var(--rot)); } } /* ========================================================================== PAST ACTIVATIONS — receipts strip inside the dark Sponsors section ========================================================================== */ .past-activations { color: white; } .activation-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; align-items: stretch; } .activation-card { border-radius: var(--radius); border: 1px solid rgba(255, 255, 255, 0.08); background: rgba(255, 255, 255, 0.04); overflow: hidden; display: flex; flex-direction: column; } /* Flyers are the content — never crop them. The container takes each flyer's natural aspect ratio so the image fills edge-to-edge, no top/bottom dark mat. */ .activation-photo { --aspect: 1.78; position: relative; overflow: hidden; aspect-ratio: var(--aspect); background: #0a0a0c; } .activation-photo img { width: 100%; height: 100%; object-fit: contain; /* never crop the flyer; container aspect already matches */ display: block; } .activation-meta { padding: 14px 16px 16px; background: rgba(0, 0, 0, 0.25); border-top: 1px solid rgba(255, 255, 255, 0.08); } .activation-partner { font-family: var(--font-head); font-weight: 700; font-size: 15px; color: white; letter-spacing: -0.01em; margin: 0; } .activation-event { font-size: 12px; color: rgba(255, 255, 255, 0.65); margin: 2px 0 0; letter-spacing: 0.01em; } @media (max-width: 960px) { .activation-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 480px) { .activation-grid { grid-template-columns: 1fr; } } /* Mobile hero — center content, kill the redundant Buy tickets (sticky CTA covers it), and put Sponsor + Vendor in a 2-col equal grid */ @media (max-width: 700px) { .hero { text-align: center; } .hero-eyebrow { justify-content: center; flex-wrap: wrap; } .hero-headline { justify-content: center; max-width: 100%; } .hero .sub { margin-left: auto !important; margin-right: auto !important; } .hero-ctas { display: grid !important; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important; gap: 10px !important; justify-items: stretch; align-items: stretch; width: 100%; max-width: 100%; } .hero-ctas .hero-cta-primary { display: none !important; } .hero-ctas .hero-cta-ghost { width: 100% !important; min-width: 0 !important; min-height: 52px !important; margin: 0 !important; padding: 14px 12px !important; font-size: 15px !important; white-space: normal !important; justify-content: center; text-align: center; } /* Center the chips row on mobile too */ .hero .chip { justify-content: center; } .hero .hero-reveal[style*="flex-wrap: wrap"] { justify-content: center; } }