1<!doctype html> 2<html lang="en"> 3<head> 4<meta charset="utf-8" /> 5<meta name="viewport" content="width=device-width,initial-scale=1" /> 6<meta name="apple-itunes-app" content="app-id=6479909742" /> 7<meta name="msvalidate.01" content="AB03F61A12FE5240AD37B8AD9A5B4EAB" /> 8<meta name="description" content="ZONA is the nightlife app for Miami and New York: bottle service, guest lists, tickets, and VIP experiences." /> 9<link rel="canonical" href="https://getzona.app/" /> 10 11<meta property="og:type" content="website" /> 12<meta property="og:site_name" content="ZONA" /> 13<meta property="og:title" content="ZONA · Your Night Starts Here" /> 14<meta property="og:description" content="Guestlists, bottle service, VIP perks." /> 15<meta property="og:url" content="https://getzona.app/" /> 16<meta property="og:image" content="https://getzona.app/uploads/zona-share-v2.jpg" /> 17<meta property="og:image:width" content="1200" /> 18<meta property="og:image:height" content="630" /> 19<meta property="og:image:alt" content="ZONA · Your night starts here" /> 20<meta name="twitter:card" content="summary_large_image" /> 21<meta name="twitter:title" content="ZONA · Your Night Starts Here" /> 22<meta name="twitter:description" content="Guestlists, bottle service, VIP perks." /> 23<meta name="twitter:image" content="https://getzona.app/uploads/zona-share-v2.jpg" /> 24<!-- Google Analytics 4 -->
vendor: 64 bytes, lines 24-25
24 25<script async src="https://www.googletagmanager.com/gtag/js?id=
25G-C2LT67GFLS
vendor: 12 bytes, line 25
25"></script>
26<script> 27
vendor: 133 bytes, lines 27-30
27window.dataLayer = window.dataLayer || []; 28 function gtag(){dataLayer.push(arguments);} 29 gtag('js', new Date()); 30 gtag('config', '
30G-C2LT67GFLS
vendor: 4 bytes, line 30
30');
31</script>
31 32 33<title>ZONA · Miami & NYC Nightlife | Tables, Guest Lists, Tickets</title> 34<link rel="preconnect" href="https://fonts.googleapis.com"> 35<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> 36<link rel="icon" type="image/svg+xml" href="/favicon.svg?v=2">
37<script type="application/ld+json"> 38{ 39 "@context": "https://schema.org", 40 "@graph": [ 41 { 42 "@type": "Organization", 43 "@id": "https://getzona.app/#organization", 44 "name": "ZONA", 45 "legalName": "ZONA APP CORP", 46 "url": "https://getzona.app/", 47 "logo": "https://getzona.app/assets/zona-logo.png", 48 "description": "ZONA is the nightlife app for Miami and New York: bottle service, guest lists, tickets, and VIP experiences.", 49 "areaServed": [ 50 { "@type": "City", "name": "Miami" }, 51 { "@type": "City", "name": "New York" } 52 ], 53 "sameAs": [ 54 "https://apps.apple.com/us/app/zona-miami-nyc-nightlife/id6479909742", 55 "https://play.google.com/store/apps/details?id=com.myzona" 56 ] 57 }, 58 { 59 "@type": "WebSite", 60 "@id": "https://getzona.app/#website", 61 "url": "https://getzona.app/", 62 "name": "ZONA", 63 "publisher": { "@id": "https://getzona.app/#organization" } 64 }, 65 { 66 "@type": "MobileApplication", 67 "@id": "https://getzona.app/#app", 68 "name": "ZONA: Miami & NYC Nightlife", 69 "applicationCategory": "LifestyleApplication", 70 "operatingSystem": "iOS, Android", 71 "url": "https://getzona.app/", 72 "downloadUrl": [ 73 "https://apps.apple.com/us/app/zona-miami-nyc-nightlife/id6479909742", 74 "https://play.google.com/store/apps/details?id=com.myzona" 75 ], 76 "offers": { "@type": "Offer", "price": "0", "priceCurrency": "USD" }, 77 "publisher": { "@id": "https://getzona.app/#organization" } 78 } 79 ] 80} 81</script>
81 82 83<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet"> 84<style> 85 :root{ 86 --bg:#000; 87 --ink:#fff; 88 --blue:#0A3FD6; 89 --violet:#4F30EA; 90 --purple:#7229F5; 91 --pink:#7229F5; 92 --gold:#4F30EA; 93 --glass:rgba(255,255,255,0.03); 94 --glass-stroke:rgba(255,255,255,0.12); 95 --mono:'JetBrains Mono', ui-monospace, monospace; 96 } 97 *{box-sizing:border-box; margin:0; padding:0} 98 html,body{background:#000; color:#fff; font-family:'Inter',sans-serif; -webkit-font-smoothing:antialiased; overflow-x:hidden;} 99 body{line-height:1.4} 100 a{color:inherit; text-decoration:none} 101 img{max-width:100%; display:block} 102 ::selection{background:var(--purple); color:#fff} 103 104 /* ---------- Utility ---------- */ 105 .container{width:min(1280px, 92vw); margin:0 auto} 106 .mono{font-family:var(--mono); font-weight:500; letter-spacing:0.02em} 107 .cap{text-transform:uppercase} 108 109 .gradient-text{ 110 background:linear-gradient(135deg, #0A3FD6 0%, #7229F5 100%); 111 -webkit-background-clip:text; background-clip:text; color:transparent; 112 padding-right:0.08em; margin-right:-0.04em; 113 } 114 .gold-text{ 115 background:linear-gradient(135deg, #0A3FD6 0%, #7229F5 100%); 116 -webkit-background-clip:text; background-clip:text; color:transparent; 117 padding-right:0.08em; margin-right:-0.04em; 118 } 119 120 .pill{ 121 display:inline-flex; align-items:center; gap:10px; 122 padding:14px 22px; border-radius:999px; line-height:1.4; 123 font-weight:600; font-size:14px; letter-spacing:0.02em; 124 transition:transform .25s ease, box-shadow .25s ease, background .25s ease; 125 white-space:nowrap; 126 } 127 .pill.solid{ 128 color:#fff; 129 background:linear-gradient(135deg, #0A3FD6 0%, #7229F5 100%); 130 box-shadow:0 8px 30px rgba(79,48,234,0.4), inset 0 0 0 1px rgba(255,255,255,0.2); 131 } 132 .pill.solid:hover{transform:translateY(-2px); box-shadow:0 14px 40px rgba(114,41,245,0.55), inset 0 0 0 1px rgba(255,255,255,0.35)} 133 134 /* ---------- Upcoming events rows ---------- */ 135 /* .row carries position:relative/z-index:2; these are its siblings, so without 136 their own stacking the absolutely positioned .blobs paint on top of them. */ 137 .ev-row-head, .ev-row, .ev-cta{ position:relative; z-index:2; } 138 /* the visual half of this section was removed, so it is a single column now */ 139 .feature .row.one-col{ grid-template-columns:1fr; } 140 .ev-row-head{ 141 display:flex; align-items:baseline; justify-content:space-between; gap:16px; 142 width:min(1280px,92vw); margin:34px auto 12px; 143 } 144 .ev-row-head h3{ 145 margin:0; font-size:clamp(17px,2vw,21px); font-weight:600; letter-spacing:-0.01em; 146 } 147 .ev-all{ 148 font-family:var(--mono); font-size:11.5px; letter-spacing:0.1em; text-transform:uppercase; 149 color:rgba(255,255,255,0.62); text-decoration:none; white-space:nowrap; transition:color .18s ease; 150 } 151 .ev-all:hover{ color:#fff; } 152 .ev-all span{ display:inline-block; transition:transform .18s ease; } 153 .ev-all:hover span{ transform:translateX(3px); } 154 155 .ev-row{ 156 display:flex; gap:14px; overflow-x:auto; overflow-y:hidden; 157 width:min(1280px,92vw); margin:0 auto; padding:2px 0 14px; 158 scroll-snap-type:x proximity; -webkit-overflow-scrolling:touch; 159 scrollbar-width:thin; scrollbar-color:rgba(255,255,255,0.18) transparent; 160 } 161 .ev-row::-webkit-scrollbar{ height:6px; } 162 .ev-row::-webkit-scrollbar-thumb{ background:rgba(255,255,255,0.16); border-radius:99px; } 163 .ev-row::-webkit-scrollbar-track{ background:transparent; } 164 165 .ev-card{ 166 flex:0 0 auto; width:196px; scroll-snap-align:start; 167 display:flex; flex-direction:column; gap:4px; 168 text-decoration:none; color:inherit; 169 background:var(--glass); border:1px solid var(--glass-stroke); border-radius:16px; 170 padding:10px 10px 13px; transition:border-color .18s ease, transform .18s ease, background .18s ease; 171 } 172 .ev-card:hover{ 173 border-color:rgba(114,41,245,0.6); background:rgba(114,41,245,0.07); transform:translateY(-2px); 174 } 175 .ev-img{ 176 display:block; width:100%; height:auto; aspect-ratio:4/5; object-fit:cover; 177 border-radius:11px; margin-bottom:8px; background:rgba(255,255,255,0.05); 178 } 179 .ev-when{ 180 font-family:var(--mono); font-size:10.5px; letter-spacing:0.11em; text-transform:uppercase; 181 color:#9C69F8; 182 } 183 .ev-name{ 184 font-size:14.5px; font-weight:600; line-height:1.3; 185 display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; 186 } 187 .ev-event{ 188 font-size:12.5px; color:rgba(255,255,255,0.6); line-height:1.35; 189 display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; 190 } 191 .ev-from{ margin-top:auto; padding-top:6px; font-size:12px; font-weight:500; color:rgba(255,255,255,0.86); } 192 193 .ev-cta{ 194 width:min(1280px,92vw); margin:26px auto 0; 195 display:flex; flex-direction:column; align-items:flex-start; gap:8px; 196 } 197 /* The pill carries the number alone; the label sits under it, small. */ 198 .ev-cta .pill{ font-family:var(--mono); letter-spacing:0.06em; } 199 .ev-cta-note{ font-size:13px; color:rgba(255,255,255,0.62); } 200 201 @media (max-width:640px){ 202 .ev-card{ width:158px; } 203 .ev-row-head{ margin-top:26px; } 204 } 205 .pill.ghost{ 206 color:#fff; background:rgba(255,255,255,0.04); 207 border:1px solid rgba(255,255,255,0.14); 208 backdrop-filter: blur(14px); 209 } 210 .pill.ghost:hover{background:rgba(255,255,255,0.08); transform:translateY(-2px)} 211 212 /* App Store / Play Store branded buttons */ 213 .store-btn{ 214 display:inline-flex; align-items:center; gap:12px; 215 padding:12px 22px 12px 18px; 216 background:#000; 217 border:1px solid rgba(255,255,255,0.65); 218 border-radius:12px; 219 color:#fff; text-decoration:none; 220 font-family: var(--sans); 221 transition: transform .25s ease, box-shadow .25s ease, background .25s ease, border-color .25s ease; 222 min-width:180px; 223 box-shadow: 0 8px 24px rgba(0,0,0,0.4); 224 } 225 .store-btn:hover{ 226 transform:translateY(-2px); 227 background:#0a0a0a; 228 border-color:#fff;
229 box-shadow: 0 14px 32px rgba(114,41,245,0.35), 0 8px 24px rgba(0,0,0,0.5); 230 } 231 .store-btn .store-icon{ 232 width:28px; height:28px; flex-shrink:0; 233 } 234 .store-copy{ 235 display:flex; flex-direction:column; line-height:1; text-align:left; 236 } 237 .store-sm{ 238 font-size:10.5px; font-weight:500; letter-spacing:0.04em; 239 color:rgba(255,255,255,0.85); margin-bottom:3px; 240 } 241 .store-lg{ 242 font-size:18px; font-weight:600; letter-spacing:-0.01em; 243 color:#fff; 244 } 245 @media (max-width:520px){ 246 .store-btn{min-width:0; width:160px; flex:none; padding:8px 12px; gap:8px; justify-content:center} 247 .store-btn .store-icon{width:22px; height:22px} 248 .store-btn .store-sm{font-size:9px; margin-bottom:2px} 249 .store-btn .store-lg{font-size:15px} 250 .hero .ctas{flex-direction:column; align-items:center} 251 .hero-tags{display:none} 252 .hero .meta{display:none} 253 .hero h1{font-size:clamp(40px, 11vw, 120px) !important} 254 .feature h2{font-size:clamp(28px, 7.5vw, 80px) !important; letter-spacing:-0.03em !important} 255 .feature .body{font-size:15px !important} 256 .why h2{font-size:clamp(36px, 10vw, 150px) !important; letter-spacing:-0.035em !important} 257 .why .stat .n{font-size:clamp(26px, 8vw, 44px) !important} 258 .why .stat{padding:18px 12px !important} 259 .now h2{font-size:clamp(44px, 9vw, 110px) !important} 260 .now h2 .now-word{font-size:clamp(72px, 20vw, 240px) !important} 261 .tilt-stage{max-width:260px !important} 262 .why .stat:nth-child(3){grid-column:1 / -1; justify-self:center; width:calc(50% - 9px); text-align:center} 263 .feature .feat-list li:has(.d.gold){display:none} 264 } 265 266 .eyebrow{ 267 display:inline-flex; align-items:center; gap:10px; 268 font-family:var(--mono); font-size:11px; letter-spacing:0.24em; 269 text-transform:uppercase; color:rgba(255,255,255,0.6); 270 } 271 .eyebrow .dot{width:6px;height:6px;border-radius:50%; background:#7229F5; box-shadow:0 0 14px #7229F5} 272 273 /* ---------- Blobs (3D volumetric) ---------- */ 274 .blobs{position:absolute; inset:0; overflow:hidden; pointer-events:none; z-index:0} 275 .blob{ 276 position:absolute; border-radius:50%; 277 filter:blur(90px) saturate(130%); 278 mix-blend-mode:screen; 279 will-change:transform, opacity; 280 transition: transform .6s cubic-bezier(.2,.8,.2,1); 281 } 282 /* inner specular highlight to feel volumetric */ 283 .blob:before{ 284 content:""; position:absolute; inset:15% 30% 55% 20%; border-radius:50%; 285 background:radial-gradient(circle at 30% 30%, rgba(255,255,255,0.6), transparent 60%); 286 filter:blur(40px); 287 } 288 .blob.b1{width:820px;height:820px; background:radial-gradient(circle at 35% 30%, #0A3FD6 0%, rgba(10,63,214,0.4) 30%, transparent 70%); opacity:.95} 289 .blob.b2{width:760px;height:760px; background:radial-gradient(circle at 50% 50%, #7229F5 0%, rgba(114,41,245,0.45) 30%, transparent 70%); opacity:.9} 290 .blob.b3{width:720px;height:720px; background:radial-gradient(circle at 60% 40%, #7229F5 0%, rgba(114,41,245,0.4) 30%, transparent 70%); opacity:.85} 291 .blob.b4{width:580px;height:580px; background:radial-gradient(circle at 50% 50%, #4F30EA 0%, rgba(79,48,234,0.4) 30%, transparent 70%); opacity:.85} 292 .blob.b5{width:460px;height:460px; background:radial-gradient(circle at 50% 50%, #4F30EA 0%, rgba(79,48,234,0.35) 30%, transparent 72%); opacity:.75} 293 294 @keyframes drift1{ 295 0% {transform: translate(-10%, -10%) scale(1)} 296 50% {transform: translate(8%, 6%) scale(1.15)} 297 100%{transform: translate(-10%, -10%) scale(1)} 298 } 299 @keyframes drift2{ 300 0% {transform: translate(20%, 15%) scale(1.1)} 301 50% {transform: translate(-6%, -4%) scale(0.9)} 302 100%{transform: translate(20%, 15%) scale(1.1)} 303 } 304 @keyframes drift3{ 305 0% {transform: translate(-15%, 30%) scale(0.95)} 306 50% {transform: translate(12%, -8%) scale(1.2)} 307 100%{transform: translate(-15%, 30%) scale(0.95)} 308 } 309 @keyframes drift4{ 310 0% {transform: translate(40%, -20%) scale(1)} 311 50% {transform: translate(-10%, 20%) scale(1.08)} 312 100%{transform: translate(40%, -20%) scale(1)} 313 } 314 315 /* ---------- Section base ---------- */ 316 section{position:relative; overflow:hidden} 317 .section-inner{position:relative; z-index:2} 318 319 /* ---------- Nav ---------- */ 320 nav.nav{ 321 position:fixed; top:0; left:0; right:0; z-index:50; 322 display:flex; align-items:center; justify-content:space-between; 323 padding:18px clamp(20px, 4vw, 48px); 324 transition: background .35s ease, backdrop-filter .35s ease, border-color .35s ease; 325 border-bottom:1px solid transparent; 326 } 327 nav.nav.scrolled{ 328 background:rgba(5,5,5,0.8); 329 backdrop-filter: blur(20px); 330 -webkit-backdrop-filter: blur(20px); 331 border-bottom:1px solid rgba(255,255,255,0.06); 332 } 333 .nav-left{display:flex; align-items:center; gap:16px; flex:1}
334 .nav-right{display:flex; align-items:center; justify-content:flex-end; gap:16px; flex:1} 335 .nav-divider{width:1px; height:18px; background:rgba(255,255,255,0.14); flex-shrink:0} 336 @media (max-width:820px){.nav-divider{display:none}} 337 .logo{ 338 font-weight:900; font-size:22px; letter-spacing:-0.02em; 339 display:inline-flex; align-items:center; gap:10px; 340 color:#fff; text-decoration:none; 341 } 342 .logo-wordmark{ 343 font-weight:800; letter-spacing:.22em; 344 font-size:20px; color:#fff; line-height:1; 345 display:inline-block; 346 transition: filter .3s ease; 347 } 348 .logo:hover .logo-wordmark{ 349 filter: drop-shadow(0 0 14px rgba(114,41,245,0.7)); 350 } 351 .logo .mark{ 352 width:26px;height:26px; border-radius:8px; 353 background:linear-gradient(135deg,#0A3FD6,#7229F5 50%,#7229F5); 354 box-shadow: 0 6px 18px rgba(114,41,245,0.45), inset 0 0 0 1px rgba(255,255,255,0.25); 355 position:relative; 356 } 357 .logo .mark:after{ 358 content:""; position:absolute; inset:4px; border-radius:5px; 359 background:radial-gradient(circle at 30% 30%, rgba(255,255,255,0.5), transparent 55%); 360 } 361 .nav-links{display:flex; align-items:center; gap:28px; font-size:14px; color:rgba(255,255,255,0.8); flex-shrink:0} 362 .nav-links a{position:relative; padding:6px 0; transition:color .2s} 363 .nav-links a:hover{color:#fff} 364 .nav-links a:after{ 365 content:""; position:absolute; left:0; right:100%; bottom:0; height:1px; 366 background:linear-gradient(90deg,#0A3FD6,#7229F5); 367 transition:right .3s ease; 368 } 369 .nav-links a:hover:after{right:0} 370 @media (max-width:820px){ .nav-links{display:none} } 371 372 /* ---------- Site-wide chrome atmosphere ---------- */ 373 .site-bg{ 374 position:fixed; inset:0; 375 width:100vw; height:100vh; 376 object-fit:cover; 377 opacity:0; 378 transition:opacity 1s ease; 379 z-index:0; pointer-events:none; 380 will-change: transform; 381 } 382 .site-bg.mirror{ 383 transform: scaleX(-1); 384 mix-blend-mode:screen; 385 } 386 /* Videos stay invisible until truly playing â hides Safari's Low Power 387 Mode play-button overlay and lets the hero paint first */ 388 .site-bg.playing{opacity:.55} 389 .site-bg.mirror.playing{opacity:.3} 390 .site-veil{ 391 position:fixed; inset:0; z-index:1; pointer-events:none; 392 background: 393 radial-gradient(70% 60% at 50% 40%, rgba(0,0,0,0.1) 0%, rgba(0,0,0,0.5) 70%, rgba(0,0,0,0.8) 100%); 394 } 395 396 /* Hero glow, roaming light sources */ 397 .hero .blob{animation: none; opacity:.35} 398 .hero .blob.b1{animation: roam1 18s ease-in-out infinite; opacity:.4} 399 .hero .blob.b2{animation: roam2 22s ease-in-out infinite; opacity:.35} 400 .hero .blob.b3{animation: roam3 26s ease-in-out infinite; opacity:.3} 401 @keyframes roam1{ 402 0% {transform: translate(0%, 0%) scale(1)} 403 25% {transform: translate(30%, 20%) scale(1.15)} 404 50% {transform: translate(60%, -10%) scale(0.95)} 405 75% {transform: translate(20%, 30%) scale(1.2)} 406 100% {transform: translate(0%, 0%) scale(1)} 407 } 408 @keyframes roam2{ 409 0% {transform: translate(0%, 0%) scale(1.1)} 410 33% {transform: translate(-40%, 20%) scale(0.9)} 411 66% {transform: translate(-20%, -30%) scale(1.25)} 412 100% {transform: translate(0%, 0%) scale(1.1)} 413 } 414 @keyframes roam3{ 415 0% {transform: translate(0%, 0%) scale(1)} 416 40% {transform: translate(40%, -40%) scale(1.2)} 417 70% {transform: translate(-30%, -20%) scale(0.95)} 418 100% {transform: translate(0%, 0%) scale(1)} 419 } 420 /* All sections sit above atmosphere */ 421 nav.nav, section, footer{position:relative; z-index:2} 422 423 /* ---------- Hero ---------- */ 424 .hero{ 425 min-height:auto; padding:24px 0 60px; 426 display:flex; align-items:flex-start; 427 background:#000; 428 position:relative; 429 } 430 431 /* Hero dancer, right side atmosphere */ 432 .hero-dancer{ 433 position:absolute; 434 right:0; top:0; bottom:0; 435 height:100%; width:48vw; 436 object-fit:cover; object-position:45% 25%; 437 opacity:.75; 438 z-index:1; 439 pointer-events:none; 440 -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,0.4) 25%, #000 60%); 441 mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,0.4) 25%, #000 60%); 442 filter: contrast(1.1) saturate(0.9) brightness(0.9); 443 animation: dancerFloat 16s ease-in-out infinite alternate; 444 } 445 @keyframes dancerFloat{ 446 0% {transform: translateX(0) scale(1)} 447 100%{transform: translateX(-1.5%) scale(1.03)} 448 } 449 @media (max-width:820px){ .hero-dancer{opacity:.2; max-width:60vw} } 450 451 /* hero content above dancer */ 452 .hero .section-inner{position:relative; z-index:3} 453 .hero .blobs{z-index:2} 454 .hero .section-inner{width:min(1280px,92vw); margin:0 auto} 455 .hero h1{ 456 font-weight:900; letter-spacing:-0.045em; line-height:0.9; 457 font-size:clamp(44px, 8.5vw, 120px); 458 text-transform:uppercase; 459 max-width:14ch; 460 } 461 .hero h1 .line{display:block; overflow:hidden} 462 .hero h1 .word{display:inline-block; transform:translateY(110%); transition: transform 1s cubic-bezier(.2,.8,.2,1)} 463 .hero.in h1 .word{transform:translateY(0)}
464 .hero h1 .word:nth-child(1){transition-delay:.05s} 465 .hero h1 .word:nth-child(2){transition-delay:.12s} 466 .hero h1 .word:nth-child(3){transition-delay:.2s} 467 .hero h1 .word:nth-child(4){transition-delay:.28s} 468 .hero h1 .word:nth-child(5){transition-delay:.36s} 469 .hero h1 .word:nth-child(6){transition-delay:.44s} 470 471 .hero p.sub{ 472 margin-top:32px; max-width:560px; 473 font-size:clamp(16px,1.4vw,20px); font-weight:400; 474 color:rgba(255,255,255,0.72); line-height:1.5; 475 opacity:0; transform:translateY(20px); transition: all .9s cubic-bezier(.2,.8,.2,1) .5s; 476 } 477 .hero.in p.sub{opacity:1; transform:translateY(0)} 478 479 .hero .ctas{ 480 margin-top:40px; display:flex; gap:14px; flex-wrap:wrap; 481 opacity:0; transform:translateY(20px); transition: all .9s cubic-bezier(.2,.8,.2,1) .65s; 482 } 483 .hero.in .ctas{opacity:1; transform:translateY(0)} 484 485 .hero .meta{ 486 position:absolute; left:0; right:0; bottom:28px; 487 display:flex; justify-content:space-between; align-items:center; 488 padding:0 clamp(20px,4vw,48px); 489 font-family:var(--mono); font-size:11px; letter-spacing:0.2em; 490 color:rgba(255,255,255,0.45); text-transform:uppercase; z-index:3; 491 } 492 .scroll-ind{display:flex; align-items:center; gap:10px} 493 .scroll-ind .bar{width:1px; height:36px; background:linear-gradient(to bottom, transparent, rgba(255,255,255,0.6), transparent); animation:pulseBar 2s infinite} 494 @keyframes pulseBar{ 495 0%,100%{opacity:.35} 496 50%{opacity:1} 497 } 498 499 .hero-tags{ 500 margin-top:56px; 501 display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap:12px; 502 max-width:860px; 503 opacity:0; transform:translateY(20px); transition: all .9s cubic-bezier(.2,.8,.2,1) .8s; 504 } 505 .hero.in .hero-tags{opacity:1; transform:translateY(0)} 506 .hero-tag{ 507 position:relative; 508 display:flex; flex-direction:column; gap:8px; 509 padding:20px 18px; border-radius:16px; 510 background:rgba(255,255,255,0.03); 511 border:1px solid rgba(255,255,255,0.1); 512 transition: border-color .2s, background .2s; 513 } 514 .hero-tag:hover{border-color:rgba(114,41,245,0.55); background:rgba(255,255,255,0.055)} 515 .hero-tag .eyebrow{font-family:var(--mono); font-size:10.5px; letter-spacing:0.12em; text-transform:uppercase; color:rgba(255,255,255,0.45)} 516 .hero-tag .heading{font-size:17px; font-weight:700; color:#fff} 517 .hero-tag .go{font-size:13px; font-weight:600; color:var(--purple)} 518 /* Stretched-link: the card's primary CTA fills the whole card as a click 519 target, except where a more specific link (a city/platform pill) sits 520 above it in stacking order and claims that smaller area for itself. */ 521 .hero-tag .go:after{content:""; position:absolute; inset:0; z-index:1} 522 .hero-tag .works-mini{position:relative; z-index:2} 523 @media (max-width:680px){ .hero-tags{grid-template-columns:1fr} } 524 525 .hero-tag .works-mini{display:flex; flex-direction:column; gap:8px; margin:4px 0 2px} 526 .hero-tag .works-mini .wlabel{font-family:var(--mono); font-size:9px; letter-spacing:0.1em; text-transform:uppercase; color:rgba(255,255,255,0.6)} 527 .hero-tag .works-mini .wrow{display:flex; flex-wrap:wrap; gap:6px} 528 .hero-tag .works-mini .witem{ 529 display:inline-flex; align-items:center; gap:6px; 530 padding:6px 12px; border-radius:100px; 531 background:rgba(255,255,255,0.04); border:1px solid rgba(255,255,255,0.1); 532 font-size:11.5px; font-weight:600; color:rgba(255,255,255,0.85); 533 } 534 .hero-tag .works-mini .witem em{font-style:normal; font-family:var(--mono); font-size:8.5px; letter-spacing:0.05em; text-transform:uppercase; color:#C6FF3C} 535 .hero-tag .works-mini .witem.muted{opacity:0.7} 536 .hero-tag .works-mini .witem.muted em{color:rgba(255,255,255,0.6)} 537 538 /* ---------- Feature rows ---------- */ 539 .feature{padding:clamp(90px, 14vh, 160px) 0} 540 .feature .row{ 541 position:relative; z-index:2; 542 display:grid; grid-template-columns:1.05fr 1fr; gap:clamp(40px, 6vw, 96px); 543 align-items:center; 544 width:min(1280px,92vw); margin:0 auto; 545 } 546 .feature.reverse .row{grid-template-columns:1fr 1.05fr} 547 .feature.reverse .text{order:2} 548 .feature.reverse .tilt-stage, 549 .feature.reverse .phone-wrap{order:1}
550 @media (max-width:900px){ 551 .feature .row, .feature.reverse .row{grid-template-columns:1fr} 552 .feature.reverse .text{order:1} 553 .feature.reverse .tilt-stage, 554 .feature.reverse .phone-wrap{order:2} 555 } 556 557 .feature h2{ 558 font-weight:900; letter-spacing:-0.042em; line-height:0.92; 559 font-size:clamp(38px, 5.5vw, 80px); text-transform:uppercase; 560 } 561 .feature .body{ 562 margin-top:22px; max-width:46ch; color:rgba(255,255,255,0.72); 563 font-size:clamp(16px,1.25vw,19px); font-weight:400; line-height:1.55; 564 } 565 .feature .kpis{ 566 margin-top:36px; display:flex; gap:28px; flex-wrap:wrap; 567 } 568 .feature .kpi{ 569 border-left:1px solid rgba(255,255,255,0.14); padding-left:16px; 570 } 571 .feature .kpi .n{font-weight:800; font-size:28px; letter-spacing:-0.02em} 572 .feature .kpi .l{font-family:var(--mono); font-size:10px; letter-spacing:0.2em; text-transform:uppercase; color:rgba(255,255,255,0.55); margin-top:4px} 573 574 .feature .text .eyebrow{margin-bottom:22px} 575 576 .feat-list{ 577 list-style:none; padding:0; margin-top:30px; 578 display:flex; flex-direction:column; gap:14px; 579 max-width:420px; 580 } 581 .feat-list li{ 582 display:flex; align-items:center; gap:14px; 583 padding:14px 18px; border-radius:14px; 584 background:rgba(255,255,255,0.03); 585 border:1px solid rgba(255,255,255,0.08); 586 font-size:15px; font-weight:500; letter-spacing:-0.01em; 587 color:rgba(255,255,255,0.92); 588 } 589 .feat-list li em{ 590 font-style:normal; 591 font-family:var(--mono); font-size:10px; font-weight:500; 592 letter-spacing:0.18em; text-transform:uppercase; 593 color:rgba(255,255,255,0.5); margin-left:auto; 594 } 595 .feat-list li .d{ 596 width:8px; height:8px; border-radius:50%; 597 background:#7229F5; box-shadow:0 0 10px #7229F5; 598 flex-shrink:0; 599 } 600 .feat-list li .d.soon{ 601 background:transparent; 602 border:1px solid rgba(255,255,255,0.4); 603 box-shadow:none; 604 } 605 .feat-list li .d.gold{ 606 background:#E8C775; box-shadow:0 0 10px rgba(232,199,117,0.7); 607 } 608 609 /* Phone frame (frosted glass card), 3D sculptural */ 610 .phone-wrap{ 611 position:relative; 612 padding:clamp(22px, 3vw, 36px); 613 border-radius:56px; 614 background: 615 radial-gradient(140% 80% at 0% 0%, rgba(255,255,255,0.10), transparent 60%), 616 radial-gradient(120% 70% at 100% 100%, rgba(114,41,245,0.14), transparent 60%), 617 linear-gradient(160deg, rgba(255,255,255,0.08) 0%, rgba(255,255,255,0.02) 45%, rgba(79,48,234,0.05) 100%); 618 border:1px solid rgba(255,255,255,0.14); 619 backdrop-filter: blur(30px) saturate(160%); 620 -webkit-backdrop-filter: blur(30px) saturate(160%); 621 box-shadow: 622 0 60px 120px -20px rgba(10,63,214,0.35), 623 0 30px 60px -10px rgba(0,0,0,0.6), 624 inset 0 1px 0 rgba(255,255,255,0.22), 625 inset 0 -1px 0 rgba(0,0,0,0.4), 626 inset 2px 0 0 rgba(255,255,255,0.06), 627 inset -2px 0 0 rgba(0,0,0,0.3); 628 transition: transform 1.1s cubic-bezier(.2,.8,.2,1), opacity 1s ease; 629 transform-style: preserve-3d; 630 will-change: transform; 631 } 632 /* iridescent border via pseudo */ 633 .phone-wrap:before{ 634 content:""; position:absolute; inset:-1px; border-radius:57px; padding:1.5px; 635 background:conic-gradient(from 220deg, #0A3FD6, #4F30EA, #7229F5, #4F30EA, #0A3FD6, #7229F5, #0A3FD6); 636 -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); 637 mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); 638 -webkit-mask-composite: xor; 639 mask-composite: exclude; 640 opacity:.8; 641 pointer-events:none; 642 } 643 /* specular highlight that sweeps across the glass */ 644 .phone-wrap:after{ 645 content:""; position:absolute; inset:0; border-radius:56px; 646 background: 647 linear-gradient(135deg, rgba(255,255,255,0.22) 0%, rgba(255,255,255,0) 35%, rgba(255,255,255,0) 65%, rgba(255,255,255,0.1) 100%); 648 mix-blend-mode:overlay; 649 pointer-events:none; 650 opacity:.6; 651 } 652 653 /* Scroll-driven tilt (set via JS) */ 654 .tilt-stage{ 655 perspective: 1800px; 656 perspective-origin: 50% 50%; 657 position:relative; 658 width:100%; 659 max-width:400px; 660 margin-inline:auto; 661 } 662 .tilt-stage .phone-wrap{ 663 transform: rotateY(var(--tilt, 0deg)) rotateX(var(--tiltX, 0deg)) translateZ(0); 664 } 665 .slide-right{opacity:0; transform:translateX(60px)} 666 .slide-left{opacity:0; transform:translateX(-60px)} 667 .in .slide-right, .in .slide-left{opacity:1; transform:translateX(0)} 668 .slide-right, .slide-left{transition: transform 1.1s cubic-bezier(.2,.8,.2,1), opacity 1s ease;} 669 670 /* Floating glass chips around phone */ 671 .glass-chip{ 672 position:absolute; z-index:3; 673 padding:14px 16px; border-radius:18px; 674 background: 675 radial-gradient(120% 100% at 0% 0%, rgba(255,255,255,0.18), transparent 55%), 676 linear-gradient(155deg, rgba(255,255,255,0.10), rgba(255,255,255,0.02)); 677 border:1px solid rgba(255,255,255,0.22); 678 backdrop-filter: blur(22px) saturate(160%); 679 -webkit-backdrop-filter: blur(22px) saturate(160%); 680 box-shadow: 681 0 20px 40px -10px rgba(0,0,0,0.5), 682 0 6px 14px -4px rgba(10,63,214,0.3), 683 inset 0 1px 0 rgba(255,255,255,0.3), 684 inset 0 -1px 0 rgba(0,0,0,0.3); 685 color:#fff; 686 transform: translateZ(var(--chip-z, 40px)); 687 will-change: transform; 688 pointer-events:none; 689 } 690 .chip-title{font-size:13px; font-weight:600; letter-spacing:-0.01em} 691 .chip-sub{font-family:var(--mono); font-size:9px; letter-spacing:0.16em; text-transform:uppercase; color:rgba(255,255,255,0.65); margin-top:3px} 692 .chip-big{font-size:32px; font-weight:800; letter-spacing:-0.03em; line-height:1} 693 .chip-big span{font-size:16px; font-weight:500; opacity:.75} 694 .chip-row{display:flex; align-items:center; gap:10px} 695 .chip-icon{font-size:20px} 696 .chip-dot{width:10px; height:10px; border-radius:50%; background:#7229F5; box-shadow:0 0 12px #7229F5; flex-shrink:0} 697 .chip-dot.gold{background:#E8C775; box-shadow:0 0 12px rgba(232,199,117,0.8)} 698 .pulse{ 699 position:absolute; top:10px; right:10px; 700 width:8px; height:8px; border-radius:50%; 701 background:#7229F5; box-shadow:0 0 12px #7229F5; 702 } 703 .pulse:before{ 704 content:""; position:absolute; inset:-6px; border-radius:50%;
705 border:1px solid rgba(114,41,245,0.5); 706 animation: pulseRing 1.8s ease-out infinite; 707 } 708 @keyframes pulseRing{ 709 0%{transform:scale(.6); opacity:1} 710 100%{transform:scale(2.2); opacity:0} 711 } 712 713 /* Chip positions per feature, pulled around the phone */ 714 .chip-heat{top:8%; right:-14%;} 715 .chip-rate{bottom:10%; left:-16%;} 716 .chip-table{top:6%; left:-16%;} 717 .chip-bottle{bottom:14%; right:-18%;} 718 .chip-perk{top:10%; right:-16%;} 719 .chip-tap{bottom:8%; left:-14%;} 720 /* Heatmap chips, positioned near their respective pins */ 721 /* Champagne bottle sits in the Brickell cluster (lower-left of phone) */ 722 .chip-bottleservice{bottom:22%; left:-22%;} 723 /* Disco ball sits in the South Beach cluster (mid-right of phone) */ 724 .chip-skipline{top:38%; right:-22%;} 725 /* Last Call alert icon sits on the left cluster top (18m left pin) */ 726 .chip-lastcall{top:18%; left:-20%;} 727 728 /* Reserve Table button highlight, glowing animated outline over the in-app button */ 729 .reserve-highlight{ 730 position:absolute; 731 left:2%; right:2%; 732 bottom:15.5%; 733 height:8.2%; 734 border-radius:20px; 735 pointer-events:none; 736 /* static gold glow + outline */ 737 border:1.5px solid rgba(232,199,117,0.85); 738 box-shadow: 739 0 0 18px rgba(232,199,117,0.55), 740 0 0 40px rgba(232,199,117,0.25); 741 animation: reservePulse 2s ease-in-out infinite; 742 overflow:hidden; 743 } 744 /* A soft light that slides horizontally along the border to give a "moving" feel */ 745 .reserve-highlight:before{ 746 content:""; 747 position:absolute; 748 top:-2px; bottom:-2px; 749 left:-40%; width:40%; 750 background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.8) 50%, transparent 100%); 751 filter: blur(6px); 752 animation: reserveSweep 2.4s ease-in-out infinite; 753 } 754 .reserve-highlight:after{ 755 content:"Tap to reserve"; 756 position:absolute; 757 left:50%; bottom:-24px; transform:translateX(-50%); 758 font-family:var(--mono); font-size:9px; letter-spacing:0.2em; text-transform:uppercase; 759 color:#E8C775; white-space:nowrap; 760 opacity:.9; 761 } 762 @keyframes reserveSweep{ 763 0% {left:-40%} 764 100%{left:100%} 765 } 766 @keyframes reservePulse{ 767 0%,100%{ 768 box-shadow: 0 0 18px rgba(232,199,117,0.55), 0 0 40px rgba(232,199,117,0.25); 769 border-color: rgba(232,199,117,0.85); 770 } 771 50%{ 772 box-shadow: 0 0 28px rgba(232,199,117,0.85), 0 0 60px rgba(232,199,117,0.45); 773 border-color: #fff; 774 } 775 } 776 777 /* Last Call chip, urgent / warm accent */ 778 .chip-lastcall{ 779 border-color: rgba(232,199,117,0.5) !important; 780 box-shadow: 781 0 20px 40px -10px rgba(232,199,117,0.35), 782 0 6px 14px -4px rgba(232,199,117,0.3), 783 inset 0 1px 0 rgba(255,255,255,0.3), 784 inset 0 -1px 0 rgba(0,0,0,0.3) !important; 785 } 786 .chip-lastcall .chip-title{color:#E8C775} 787 .chip-lastcall #lastcall-timer{ 788 font-family:var(--mono); font-weight:600; color:#fff; 789 letter-spacing:0.02em; 790 } 791 .alert-ring{ 792 display:inline-flex; align-items:center; justify-content:center; 793 width:34px; height:34px; border-radius:50%; 794 background:rgba(232,199,117,0.18); 795 border:1px solid rgba(232,199,117,0.55); 796 font-size:16px; 797 flex-shrink:0; 798 animation: ringPulse 1.6s ease-in-out infinite; 799 } 800 @keyframes ringPulse{ 801 0%,100%{box-shadow: 0 0 0 0 rgba(232,199,117,0.5)} 802 50% {box-shadow: 0 0 0 10px rgba(232,199,117,0)} 803 } 804 @media (max-width:900px){ 805 .glass-chip{display:none} 806 } 807 808 .phone{ 809 aspect-ratio: 9 / 19.5; 810 width:100%; 811 border-radius:42px; 812 background: 813 radial-gradient(120% 80% at 50% 0%, rgba(255,255,255,0.06), transparent 60%), 814 linear-gradient(180deg,#0a0a12 0%, #05050a 100%); 815 border:1px solid rgba(255,255,255,0.1); 816 box-shadow: inset 0 0 0 1px rgba(255,255,255,0.04), inset 0 30px 60px rgba(0,0,0,0.5); 817 position:relative; overflow:hidden; 818 } 819 .phone .notch{ 820 position:absolute; top:10px; left:50%; transform:translateX(-50%); 821 width:96px; height:22px; border-radius:14px; background:#000; 822 box-shadow: inset 0 0 0 1px rgba(255,255,255,0.06); 823 } 824 .phone .status{ 825 position:absolute; top:14px; left:22px; right:22px; 826 display:flex; justify-content:space-between; align-items:center; 827 font-family:var(--mono); font-size:10px; letter-spacing:0.1em; color:rgba(255,255,255,0.75); 828 text-transform:uppercase; 829 }
830 .phone .status .signal{display:flex; gap:3px} 831 .phone .status .signal i{display:block; width:3px; background:rgba(255,255,255,0.85); border-radius:1px} 832 .phone .status .signal i:nth-child(1){height:4px} 833 .phone .status .signal i:nth-child(2){height:6px} 834 .phone .status .signal i:nth-child(3){height:8px} 835 .phone .status .signal i:nth-child(4){height:10px} 836 .phone .screen{position:absolute; inset:46px 14px 14px 14px; border-radius:32px; overflow:hidden} 837 838 /* Phone variant that hosts a real screenshot, image fills entire phone */ 839 .phone.shot{overflow:hidden} 840 .phone.shot .notch, .phone.shot .status{display:none} 841 .phone.shot .screen{ 842 position:absolute; inset:0; border-radius:42px; 843 } 844 .phone.shot .screen img{ 845 width:100%; height:100%; object-fit:cover; object-position:top center; 846 display:block; 847 } 848 849 /* ---------- iPhone 15 Pro frame (radar section) ---------- */ 850 .iphone15-wrap{position:relative} 851 .iphone15-wrap .btn-l, .iphone15-wrap .btn-r{ 852 position:absolute; width:4px; border-radius:3px; 853 background:linear-gradient(90deg,#e6e6ea,#9d9da4); 854 } 855 .iphone15-wrap .btn-l{left:-3px} 856 .iphone15-wrap .btn-r{right:-3px; top:27%; height:11%; background:linear-gradient(90deg,#9d9da4,#e6e6ea)} 857 .iphone15-wrap .b1{top:17%; height:4%} 858 .iphone15-wrap .b2{top:24%; height:7%} 859 .iphone15-wrap .b3{top:33%; height:7%} 860 .iphone15{ 861 position:relative; 862 width:100%; 863 aspect-ratio: 800 / 1640; 864 border-radius:56px; 865 background:#000; 866 border:4px solid #dcdce0; 867 box-shadow: 868 0 0 0 1px rgba(0,0,0,.9), 869 inset 0 0 0 3px #000, 870 0 60px 130px -30px rgba(114,41,245,.45), 871 0 30px 70px rgba(0,0,0,.7); 872 overflow:hidden; 873 } 874 .iphone15 img{ 875 position:absolute; inset:3px; 876 width:calc(100% - 6px); height:calc(100% - 6px); 877 object-fit:cover; 878 border-radius:50px; 879 display:block; 880 } 881 .iphone15 .island{ 882 position:absolute; top:1.6%; left:50%; transform:translateX(-50%); 883 width:28%; height:2.9%; 884 background:#000; border-radius:999px; 885 z-index:2; 886 } 887 888 /* Live radar pins (PulsingMarker, web edition) */ 889 .iphone15 .rpins{position:absolute; inset:3px; z-index:1} 890 .rpin{position:absolute; transform:translate(-50%,-50%); aspect-ratio:1; display:flex; align-items:center; justify-content:center} 891 .rpin.lg{width:10.2%} 892 .rpin.md{width:8.2%} 893 .rpin.xl{width:14.4%} 894 .rpin .rdot{ 895 position:absolute; inset:0; z-index:2; 896 background:#C6FF3C; 897 border:2px solid rgba(255,255,255,.55); 898 border-radius:50%; 899 display:flex; align-items:center; justify-content:center; 900 box-shadow:0 0 16px rgba(198,255,60,.5); 901 } 902 .rpin .rdot svg{width:56%; height:56%} 903 .rpin .ring{ 904 position:absolute; inset:0; 905 border:1.5px solid #C6FF3C; border-radius:50%; 906 opacity:0; 907 animation:radarPulse 2.4s ease-out infinite; 908 } 909 .rpin .ring:nth-child(2){animation-delay:.8s} 910 .rpin .ring:nth-child(3){animation-delay:1.6s} 911 @keyframes radarPulse{ 912 0%{transform:scale(1); opacity:0} 913 4%{opacity:.55} 914 100%{transform:scale(4); opacity:0} 915 } 916 917 /* ---------- Phone 1: Heatmap ---------- */ 918 .screen.heatmap{ 919 background: 920 radial-gradient(240px 240px at 30% 35%, rgba(114,41,245,0.55), transparent 60%), 921 radial-gradient(200px 200px at 65% 55%, rgba(114,41,245,0.55), transparent 65%), 922 radial-gradient(160px 160px at 45% 80%, rgba(10,63,214,0.55), transparent 70%), 923 linear-gradient(180deg,#08081a,#020208); 924 } 925 .screen.heatmap .grid{ 926 position:absolute; inset:0; 927 background-image: 928 linear-gradient(rgba(255,255,255,0.04) 1px, transparent 1px), 929 linear-gradient(90deg, rgba(255,255,255,0.04) 1px, transparent 1px); 930 background-size: 24px 24px; 931 mask-image: radial-gradient(ellipse at 50% 40%, #000 40%, transparent 85%); 932 } 933 .screen.heatmap .chip{ 934 position:absolute; top:14px; left:14px; 935 padding:8px 10px; border-radius:12px; 936 background:rgba(0,0,0,0.55); backdrop-filter:blur(8px); 937 border:1px solid rgba(255,255,255,0.12); 938 font-family:var(--mono); font-size:9px; letter-spacing:0.14em; 939 text-transform:uppercase; color:#fff; display:flex; gap:8px; align-items:center; 940 } 941 .screen.heatmap .chip .d{width:6px;height:6px;border-radius:50%; background:#7229F5; box-shadow:0 0 8px #7229F5; animation:pulseDot 1.6s infinite} 942 @keyframes pulseDot{ 943 0%,100%{transform:scale(1); opacity:1} 944 50%{transform:scale(1.4);
944 opacity:.6} 945 } 946 .hm-dot{position:absolute; border-radius:50%; border:1px solid rgba(255,255,255,0.5); box-shadow:0 0 0 4px rgba(255,255,255,0.06)} 947 .hm-dot .core{position:absolute; inset:0; border-radius:50%} 948 .hm-dot .ring{position:absolute; inset:-8px; border-radius:50%; border:1px solid rgba(255,255,255,0.3); animation: ring 2.6s infinite ease-out} 949 @keyframes ring{ 950 0%{transform:scale(.6); opacity:.9} 951 100%{transform:scale(1.8); opacity:0} 952 } 953 .hm-venues{ 954 position:absolute; left:12px; right:12px; bottom:12px; 955 padding:12px; border-radius:16px; 956 background:rgba(10,10,20,0.6); backdrop-filter:blur(10px); 957 border:1px solid rgba(255,255,255,0.1); 958 display:flex; flex-direction:column; gap:8px; 959 } 960 .hm-venue{display:flex; justify-content:space-between; align-items:center; font-size:11px} 961 .hm-venue .nm{font-weight:600} 962 .hm-venue .hx{font-family:var(--mono); color:rgba(255,255,255,0.7); font-size:9px; letter-spacing:0.14em; text-transform:uppercase} 963 .heat-bar{height:3px; border-radius:2px; background:rgba(255,255,255,0.08); overflow:hidden; margin-top:2px} 964 .heat-bar i{display:block; height:100%; background:linear-gradient(90deg,#0A3FD6,#4F30EA,#7229F5); border-radius:2px} 965 966 /* ---------- Phone 2: Bottle service ---------- */ 967 .screen.bottle{ 968 background: 969 radial-gradient(260px 200px at 70% 10%, rgba(114,41,245,0.55), transparent 60%), 970 linear-gradient(180deg,#0a0418,#04020a); 971 padding:16px; display:flex; flex-direction:column; gap:10px; 972 } 973 .screen.bottle .hd{display:flex; justify-content:space-between; align-items:center; margin-top:6px} 974 .screen.bottle .hd .t{font-weight:800; letter-spacing:-0.02em; font-size:16px} 975 .screen.bottle .hd .sub{font-family:var(--mono); font-size:9px; letter-spacing:0.2em; text-transform:uppercase; color:rgba(255,255,255,0.55)} 976 .tier{ 977 display:flex; justify-content:space-between; align-items:center; 978 padding:12px 14px; border-radius:14px; 979 background:rgba(255,255,255,0.03); 980 border:1px solid rgba(255,255,255,0.08); 981 } 982 .tier.accent{ 983 background:linear-gradient(100deg,rgba(114,41,245,0.18),rgba(114,41,245,0.18)); 984 border-color:rgba(114,41,245,0.4); 985 } 986 .tier .l{display:flex; flex-direction:column; gap:2px} 987 .tier .l .nm{font-weight:700; font-size:12px; letter-spacing:-0.01em} 988 .tier .l .mt{font-family:var(--mono); font-size:9px; color:rgba(255,255,255,0.6); letter-spacing:0.14em; text-transform:uppercase} 989 .tier .r{font-weight:800; font-size:13px; letter-spacing:-0.01em} 990 .tier .r .sm{font-family:var(--mono); font-size:8px; color:rgba(255,255,255,0.5); letter-spacing:0.14em; text-transform:uppercase; font-weight:500} 991 .book-btn{ 992 margin-top:auto; 993 text-align:center; padding:12px; border-radius:12px; 994 background:linear-gradient(135deg, #0A3FD6 0%, #7229F5 100%); 995 font-weight:700; font-size:12px; letter-spacing:0.04em; 996 box-shadow: 0 8px 20px rgba(114,41,245,0.4); 997 } 998 999 /* ---------- Phone 3: Wallet ---------- */ 1000 .screen.wallet{ 1001 background: 1002 radial-gradient(260px 240px at 50% 110%, rgba(79,48,234,0.45), transparent 60%), 1003 linear-gradient(180deg,#0a0214,#03010a); 1004 padding:16px; display:flex; flex-direction:column; gap:12px; 1005 } 1006 .wallet-card{ 1007 position:relative; 1008 aspect-ratio:1.6/1; border-radius:18px; 1009 background: 1010 linear-gradient(135deg,#0A3FD6 0%, #4F30EA 35%, #7229F5 65%, #4F30EA 100%); 1011 padding:14px; 1012 box-shadow: 0 12px 30px rgba(114,41,245,0.4), inset 0 0 0 1px rgba(255,255,255,0.2); 1013 overflow:hidden; 1014 display:flex; flex-direction:column; justify-content:space-between; 1015 } 1016 .wallet-card:after{ 1017 content:""; position:absolute; inset:0; 1018 background:radial-gradient(circle at 80% -10%, rgba(255,255,255,0.35), transparent 50%); 1019 } 1020 .wallet-card .top{display:flex; justify-content:space-between; align-items:center; position:relative; z-index:2} 1021 .wallet-card .top .nm{font-weight:900; letter-spacing:-0.02em; font-size:18px} 1022 .wallet-card .top .tag{font-family:var(--mono); font-size:9px; letter-spacing:0.2em; text-transform:uppercase; padding:4px 8px; border-radius:999px; background:rgba(0,0,0,0.3); border:1px solid rgba(255,255,255,0.25)} 1023 .wallet-card .bot{display:flex; justify-content:space-between; align-items:flex-end; position:relative; z-index:2} 1024 .wallet-card .bot .mem{font-family:var(--mono); font-size:10px; letter-spacing:0.22em; color:rgba(255,255,255,0.8)} 1025 .wallet-card .bot .no{font-family:var(--mono); font-weight:600; letter-spacing:0.06em; font-size:11px} 1026 .perk-list{display:flex; flex-direction:column; gap:8px} 1027 .perk{ 1028 display:flex; justify-content:space-between; align-items:center; 1029 padding:10px 12px; border-radius:12px; 1030 background:rgba(255,255,255,0.03); 1031 border:1px solid rgba(255,255,255,0.08); 1032 font-size:11px; 1033 } 1034 .perk .nm{font-weight:600} 1035 .perk .st{font-family:var(--mono); font-size:9px; letter-spacing:0.14em; text-transform:uppercase; color:rgba(255,255,255,0.7); display:flex; align-items:center; gap:6px} 1036 .perk .st .d{width:6px;height:6px;border-radius:50%; background:#4ADE80; box-shadow:0 0 8px #4ADE80} 1037 .perk .st .d.pink{background:#7229F5; box-shadow:0 0 8px #7229F5} 1038 1039 /* ---------- Why ZONA ---------- */ 1040 .why{
1041 padding:clamp(120px, 18vh, 200px) 0; 1042 text-align:center; 1043 position:relative; 1044 background:#000; 1045 } 1046 .why .conic{ 1047 position:absolute; inset:-20%; 1048 background: conic-gradient(from 0deg, 1049 #0A3FD6, #4F30EA, #7229F5, #4F30EA, #7229F5, #7229F5, #4F30EA, #0A3FD6); 1050 filter: blur(120px); 1051 opacity:.7; 1052 animation: rotConic 30s linear infinite; 1053 z-index:0; 1054 } 1055 .why .overlay{position:absolute; inset:0; background:rgba(0,0,0,0.4); z-index:1} 1056 @keyframes rotConic{ 1057 from{transform: rotate(0deg)} 1058 to{transform: rotate(360deg)} 1059 } 1060 .why .section-inner{z-index:2} 1061 .why h2{ 1062 font-weight:900; letter-spacing:-0.05em; line-height:0.88; 1063 font-size:clamp(56px, 11vw, 150px); text-transform:uppercase; 1064 } 1065 .why .body{ 1066 margin:34px auto 0; max-width:620px; color:rgba(255,255,255,0.8); 1067 font-size:clamp(17px, 1.4vw, 22px); line-height:1.5; 1068 } 1069 .why .stats{ 1070 margin-top:64px; display:grid; grid-template-columns:repeat(3,1fr); gap:18px; 1071 max-width:900px; margin-inline:auto; 1072 } 1073 .why .stat{ 1074 padding:26px 20px; border-radius:20px; 1075 background:rgba(0,0,0,0.55); backdrop-filter:blur(18px); 1076 border:1px solid rgba(255,255,255,0.1); 1077 } 1078 .why .stat .n{font-weight:900; font-size:48px; letter-spacing:-0.03em; line-height:1} 1079 .why .stat .l{font-family:var(--mono); font-size:10px; letter-spacing:0.22em; text-transform:uppercase; color:rgba(255,255,255,0.7); margin-top:10px} 1080 @media (max-width:720px){ .why .stats{grid-template-columns:repeat(2,1fr)} } 1081 1082 /* ---------- Now ---------- */ 1083 .now{ 1084 min-height:90vh; padding:clamp(100px,16vh,180px) 0; 1085 background:#000; 1086 display:flex; align-items:center; justify-content:center; 1087 text-align:center; position:relative; 1088 } 1089 .now .halo{ 1090 position:absolute; width:900px; height:900px; border-radius:50%; 1091 background: radial-gradient(circle at 50% 50%, 1092 rgba(114,41,245,0.55) 0%, rgba(114,41,245,0.3) 30%, transparent 60%); 1093 filter: blur(80px); 1094 transform: translate(-50%,-50%); 1095 pointer-events:none; z-index:0; 1096 transition: transform .25s ease-out; 1097 will-change: transform; 1098 } 1099 .now .section-inner{z-index:2; position:relative} 1100 .now h2{ 1101 font-weight:900; letter-spacing:-0.045em; line-height:0.84; 1102 font-size:clamp(60px, 8vw, 110px); text-transform:uppercase; 1103 } 1104 .now h2 .now-word{ 1105 display:block; letter-spacing:-0.06em; line-height:.8; 1106 font-size:clamp(100px, 18vw, 240px); 1107 margin-top:-10px; 1108 } 1109 .now .body{ 1110 margin:36px auto 0; max-width:560px; color:rgba(255,255,255,0.75); 1111 font-size:clamp(16px,1.25vw,19px); line-height:1.5; 1112 } 1113 .now .ctas{margin-top:44px; display:flex; gap:14px; justify-content:center; flex-wrap:wrap} 1114 1115 /* ---------- Footer ---------- */ 1116 footer{ 1117 padding:90px 0 40px; background:#000; border-top:1px solid rgba(255,255,255,0.08); 1118 position:relative; 1119 } 1120 footer .grid{ 1121 display:grid; grid-template-columns: 1.4fr 1fr 1fr 1fr 1fr; column-gap:40px; row-gap:48px; 1122 width:min(1280px,92vw); margin:0 auto; 1123 } 1124 footer h4{font-family:var(--mono); font-size:11px; letter-spacing:0.24em; text-transform:uppercase; color:rgba(255,255,255,0.5); margin-bottom:18px} 1125 footer ul{list-style:none; display:flex; flex-direction:column; gap:10px; font-size:14px} 1126 footer ul a{color:rgba(255,255,255,0.8); transition:color .2s} 1127 footer ul a:hover{color:#fff} 1128 footer .tag{margin-top:14px; color:rgba(255,255,255,0.55); max-width:32ch; line-height:1.5; font-size:14px} 1129 footer .base{ 1130 width:min(1280px,92vw); margin:60px auto 0; 1131 padding-top:24px; border-top:1px solid rgba(255,255,255,0.08); 1132 display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:12px; 1133 font-family:var(--mono); font-size:11px; letter-spacing:0.18em; text-transform:uppercase; 1134 color:rgba(255,255,255,0.5); 1135 } 1136 @media (max-width:1240px){ 1137 footer .grid{grid-template-columns:repeat(3,1fr)} 1138 footer .grid > div:first-child{grid-column:1 / -1} 1139 } 1140 @media (max-width:820px){ footer .grid{grid-template-columns:1fr} } 1141 1142 /* ---------- Reveal helpers ---------- */ 1143 .reveal{opacity:0; transform:translateY(40px); transition: all 1s cubic-bezier(.2,.8,.2,1)} 1144 .reveal.in{opacity:1; transform:none} 1145 .reveal-words .word{display:inline-block; overflow:hidden; vertical-align:bottom}
1146 .reveal-words .word span{display:inline-block; transform:translateY(110%); transition: transform .9s cubic-bezier(.2,.8,.2,1)} 1147 .reveal-words.in .word span{transform:translateY(0)} 1148 .reveal-words .word:nth-child(1) span{transition-delay:.05s} 1149 .reveal-words .word:nth-child(2) span{transition-delay:.12s} 1150 .reveal-words .word:nth-child(3) span{transition-delay:.2s} 1151 .reveal-words .word:nth-child(4) span{transition-delay:.28s} 1152 .reveal-words .word:nth-child(5) span{transition-delay:.36s} 1153 .reveal-words .word:nth-child(6) span{transition-delay:.44s} 1154 1155 /* ---------- A tiny reduce-motion safety ---------- */ 1156 @media (prefers-reduced-motion: reduce){ 1157 *{animation-duration:.001s !important; animation-iteration-count:1 !important; transition-duration:.001s !important} 1158 } 1159 1160/* Mobile hamburger */ 1161.nav-toggle{ 1162 display:none; 1163 width:44px; height:44px; border-radius:12px; 1164 background:rgba(255,255,255,0.04); 1165 border:1px solid rgba(255,255,255,0.14); 1166 color:#fff; cursor:pointer; padding:0; 1167 align-items:center; justify-content:center; 1168 backdrop-filter: blur(14px); 1169 transition: background .2s; 1170} 1171.nav-toggle:hover{background:rgba(255,255,255,0.08)} 1172.nav-toggle .bars{position:relative; width:20px; height:14px; display:block} 1173.nav-toggle .bars:before, 1174.nav-toggle .bars:after, 1175.nav-toggle .bars span{ 1176 content:""; position:absolute; left:0; right:0; height:1.5px; 1177 background:#fff; border-radius:2px; transition: transform .3s ease, opacity .2s, top .3s ease; 1178} 1179.nav-toggle .bars:before{top:0} 1180.nav-toggle .bars span{top:6px} 1181.nav-toggle .bars:after{top:12px} 1182.nav-toggle.open .bars:before{top:6px; transform:rotate(45deg)} 1183.nav-toggle.open .bars span{opacity:0} 1184.nav-toggle.open .bars:after{top:6px; transform:rotate(-45deg)} 1185 1186.mobile-menu{ 1187 position:fixed; top:0; left:0; right:0; 1188 padding:72px clamp(20px,4vw,48px) 24px; 1189 background:rgba(8,8,14,0.92); 1190 backdrop-filter: blur(28px) saturate(140%); 1191 border-bottom:1px solid rgba(255,255,255,0.1); 1192 transform: translateY(-100%); 1193 transition: transform .4s cubic-bezier(.2,.8,.2,1); 1194 z-index:40; 1195 display:flex; flex-direction:column; gap:4px; 1196} 1197.mobile-menu.open{transform: translateY(0)} 1198.mobile-menu a{ 1199 padding:14px 4px; font-size:17px; font-weight:500; 1200 color:rgba(255,255,255,0.9); text-decoration:none; 1201 border-bottom:1px solid rgba(255,255,255,0.06); 1202 transition: color .2s, padding-left .2s; 1203} 1204.mobile-menu a:last-of-type{border-bottom:none} 1205.mobile-menu a:hover, .mobile-menu a:active{color:#fff; padding-left:8px} 1206.mobile-menu .pill{margin-top:18px; justify-content:center; text-decoration:none} 1207 1208@media (max-width:820px){ 1209 .nav-toggle{display:inline-flex} 1210 .nav-right > a.pill.solid{display:none} 1211} 1212@media (min-width:821px){ 1213 .mobile-menu{display:none} 1214} 1215 1216</style> 1217</head> 1218<body> 1219 1220<video class="site-bg" autoplay loop muted playsinline preload="metadata" src="assets/zona-bg.mp4" onloadeddata="this.playbackRate=0.4"></video> 1221<video class="site-bg mirror" autoplay loop muted playsinline preload="metadata" src="assets/zona-bg.mp4" onloadeddata="this.playbackRate=0.3"></video> 1222<div class="site-veil"></div> 1223 1224<!-- NAV --> 1225<nav class="nav" id="nav" data-screen-label="Nav"> 1226 <div class="nav-left"> 1227 <a class="logo" href="/" aria-label="ZONA home"> 1228 <span class="logo-wordmark">ZONA</span> 1229 </a> 1230 <span class="nav-divider" aria-hidden="true"></span> 1231 </div> 1232 <div class="nav-links"> 1233 <a href="/partnerships">Partnerships</a> 1234 <a href="/ai">For AI</a> 1235 <a href="/ads">Advertise</a> 1236 <a href="/newsletter">Newsletter</a> 1237 <a href="/contact-us">Contact</a> 1238 </div> 1239 <div class="nav-right"> 1240 <a class="pill solid js-download-cta" href="/#download">Download</a> 1241 <button class="nav-toggle" id="navToggle" aria-label="Menu" aria-expanded="false"><span class="bars"><span></span></span></button> 1242 </div> 1243</nav> 1244<div class="mobile-menu" id="mobileMenu"> 1245 <a href="/partnerships">Partnerships</a> 1246 <a href="/ai">For AI</a> 1247 <a href="/ads">Advertise</a> 1248 <a href="/newsletter">Newsletter</a> 1249 <a href="/contact-us">Contact</a> 1250 <a class="pill solid js-download-cta" data-cta-source="mobile_menu" href="/#download">Download</a> 1251</div> 1252 1253<!-- HERO --> 1254<section class="hero reveal" id="hero" data-screen-label="01 Hero"> 1255 <div class="blobs"> 1256 <div class="blob b1" style="top:-10%; left:-5%;"></div> 1257 <div class="blob b2" style="top:30%; right:-10%;"></div> 1258 <div class="blob b3" style="bottom:-20%; left:30%;"></div> 1259 </div> 1260 <img class="hero-dancer" src="assets/hero-dancer.webp" alt="" aria-hidden="true" fetchpriority="high" /> 1261 <div class="section-inner container"> 1262 <h1 style="margin-top:24px">
1263 <span class="line"><span class="word">Nightlife,</span></span> 1264 <span class="line"><span class="word gradient-text">connected.</span></span> 1265 </h1> 1266 <p class="sub">Discover where to go, connect with venues, and access live nightlife data across Miami and New York.</p> 1267 <div class="ctas" id="download"> 1268 <a class="store-btn store-apple" href="https://apps.apple.com/us/app/zona-miami-nyc-nightlife/id6479909742" target="_blank" rel="noopener" aria-label="Download on the App Store"> 1269 <svg class="store-icon" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"> 1270 <path d="M17.05 20.28c-.98.95-2.05.86-3.08.43-1.09-.46-2.09-.48-3.24 0-1.44.62-2.2.44-3.06-.43C2.79 15.25 3.51 7.59 9.05 7.31c1.35.07 2.29.74 3.08.8 1.18-.24 2.31-.93 3.57-.84 1.51.12 2.65.72 3.4 1.8-3.12 1.87-2.38 5.98.48 7.13-.57 1.5-1.31 2.99-2.53 4.08zM12.03 7.25c-.15-2.23 1.66-4.07 3.74-4.25.29 2.58-2.34 4.5-3.74 4.25z"/> 1271 </svg> 1272 <span class="store-copy"> 1273 <span class="store-sm">Download on the</span> 1274 <span class="store-lg">App Store</span> 1275 </span> 1276 </a> 1277 <a class="store-btn store-google" href="https://play.google.com/store/apps/details?id=com.myzona" target="_blank" rel="noopener" aria-label="Get it on Google Play"> 1278 <svg class="store-icon" viewBox="0 0 512 512" aria-hidden="true"> 1279 <path fill="#00D4FF" d="M325.3 234.3L104.3 13.3c-2.5-2.5-5.8-3.9-9.3-3.9-1.4 0-2.8.2-4.1.7L325.3 234.3z"/> 1280 <path fill="#FFCE00" d="M474.6 236.8l-65.8-36.5-74.7 74.7 74.7 74.7 65.8-36.5c11.2-6.2 17.4-16.9 17.4-28.2s-6.2-22-17.4-28.2z"/> 1281 <path fill="#FF3A44" d="M325.3 277.7L90.9 502.1c3.8 1.3 8 1 11.8-1.2l306-170-83.4-53.2z"/> 1282 <path fill="#00F076" d="M90.9 9.9c-5.9 2.1-9.9 7.7-9.9 14.3v463.6c0 4.1 1.5 7.9 4.2 10.7L325.3 234.3 90.9 9.9z"/> 1283 </svg> 1284 <span class="store-copy"> 1285 <span class="store-sm">Get it on</span> 1286 <span class="store-lg">Google Play</span> 1287 </span> 1288 </a> 1289 </div> 1290 1291 <div class="hero-tags"> 1292 <div class="hero-tag"> 1293 <span class="eyebrow">Going Out</span> 1294 <span class="heading">Explore Nightlife</span> 1295 <div class="works-mini"> 1296 <span class="wlabel">Cities</span> 1297 <div class="wrow"> 1298 <a class="witem" href="/miami" data-cta-source="hero_door_explore_miami">Miami</a> 1299 <a class="witem" href="/nyc" data-cta-source="hero_door_explore_nyc">New York</a> 1300 <span class="witem muted">Los Angeles <em>Coming soon</em></span> 1301 </div> 1302 </div> 1303 <a class="go" href="/miami" data-cta-source="hero_door_explore">See what's on →</a> 1304 </div> 1305 <a class="hero-tag" href="/partnerships" data-cta-source="hero_door_venues"> 1306 <span class="eyebrow">For Partners</span> 1307 <span class="heading">Partnerships</span> 1308 <div class="works-mini"> 1309 <span class="wlabel">Platforms</span> 1310 <div class="wrow"> 1311 <span class="witem">Portal</span> 1312 <span class="witem">AI Concierge</span> 1313 <span class="witem">Advertise</span> 1314 <span class="witem">Affiliates</span> 1315 </div> 1316 </div> 1317 <span class="go">See the platforms →</span> 1318 </a> 1319 <a class="hero-tag" href="/ai" data-cta-source="hero_door_ai"> 1320 <span class="eyebrow">Building With AI</span> 1321 <span class="heading">ZONA for AI</span> 1322 <div class="works-mini"> 1323 <span class="wlabel">Works with</span> 1324 <div class="wrow"> 1325 <span class="witem">Claude <em>Live</em></span> 1326 <span class="witem">Gemini <em>Live</em></span> 1327 <span class="witem muted">ChatGPT <em>In review</em></span> 1328 <span class="witem">Custom agents <em>Live</em></span> 1329 </div> 1330 </div> 1331 <span class="go">View the MCP →</span> 1332 </a> 1333 </div> 1334 </div> 1335</section> 1336 1337<!-- RADAR --> 1338<section class="feature reveal" id="radar" data-screen-label="02 Radar" style="padding-top:clamp(40px, 6vh, 80px)">
1339 <div class="blobs"> 1340 <div class="blob b2" style="top:10%; right:-18%;"></div> 1341 <div class="blob b4" style="bottom:-20%; left:-10%;"></div> 1342 </div> 1343 <div class="row"> 1344 <div class="text"> 1345 <h2>Insider <span class="gradient-text">access</span>.</h2> 1346 <p class="body">The guestlists you want to join and the tables you want to be in.</p> 1347 </div> 1348 <div class="tilt-stage slide-right" data-tilt-dir="right"> 1349 <div class="iphone15-wrap"> 1350 <span class="btn-l b1"></span><span class="btn-l b2"></span><span class="btn-l b3"></span><span class="btn-r"></span> 1351 <div class="iphone15"> 1352 <div class="island"></div> 1353 <img src="assets/radar-map.jpg" alt="ZONA live radar map of Miami nightlife" /> 1354 <svg style="display:none" aria-hidden="true"> 1355 <symbol id="g-bottle" viewBox="0 0 24 24"><path fill="#0a0a0f" d="M10 2h4v2h-1v3l1.5 3.2v8.3a2.5 2.5 0 0 1-2.5 2.5h-2a2.5 2.5 0 0 1-2.5-2.5v-8.3L9 7V4H8V2z"/></symbol> 1356 <symbol id="g-lock" viewBox="0 0 24 24"><path fill="#0a0a0f" d="M7 10V8a5 5 0 1 1 10 0v2h.5A1.5 1.5 0 0 1 19 11.5v8A1.5 1.5 0 0 1 17.5 21h-11A1.5 1.5 0 0 1 5 19.5v-8A1.5 1.5 0 0 1 6.5 10H7zm2 0h6V8a3 3 0 1 0-6 0v2z"/></symbol> 1357 <symbol id="g-people" viewBox="0 0 24 24"><path fill="#0a0a0f" d="M9 11a4 4 0 1 0 0-8 4 4 0 0 0 0 8zm0 2c-4 0-7 2-7 5v2h14v-2c0-3-3-5-7-5zm8.5-1a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm.5 2c-1 0-2 .2-2.7.6 1.6 1.2 2.7 2.8 2.7 4.4v1H22v-1c0-2.5-2-5-4-5z"/></symbol> 1358 <symbol id="g-ticket" viewBox="0 0 24 24"><path fill="#0a0a0f" d="M22 10V6a2 2 0 0 0-2-2H4a2 2 0 0 0-2 2v4a2 2 0 0 1 0 4v4a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-4a2 2 0 0 1 0-4zm-7 7h-2v-2h2v2zm0-4h-2v-2h2v2zm0-4h-2V7h2v2z"/></symbol> 1359 </svg> 1360 <div class="rpins" aria-hidden="true"> 1361 <div class="rpin lg" style="left:31.8%; top:22.6%"><span class="ring"></span><span class="ring"></span><span class="ring"></span><span class="rdot"><svg viewBox="0 0 24 24"><use href="#g-lock"/></svg></span></div> 1362 <div class="rpin md" style="left:92%; top:19%"><span class="ring"></span><span class="ring"></span><span class="ring"></span><span class="rdot"><svg viewBox="0 0 24 24"><use href="#g-bottle"/></svg></span></div> 1363 <div class="rpin lg" style="left:93.4%; top:39.7%"><span class="ring"></span><span class="ring"></span><span class="ring"></span><span class="rdot"><svg viewBox="0 0 24 24"><use href="#g-bottle"/></svg></span></div> 1364 <div class="rpin md" style="left:13.6%; top:49.9%"><span class="ring"></span><span class="ring"></span><span class="ring"></span><span class="rdot"><svg viewBox="0 0 24 24"><use href="#g-people"/></svg></span></div> 1365 <div class="rpin lg" style="left:83.4%; top:55.8%"><span class="ring"></span><span class="ring"></span><span class="ring"></span><span class="rdot"><svg viewBox="0 0 24 24"><use href="#g-bottle"/></svg></span></div> 1366 <div class="rpin md" style="left:85.2%; top:63.7%"><span class="ring"></span><span class="ring"></span><span class="ring"></span><span class="rdot"><svg viewBox="0 0 24 24"><use href="#g-ticket"/></svg></span></div> 1367 <div class="rpin lg" style="left:20.6%; top:64.2%"><span class="ring"></span><span class="ring"></span><span class="ring"></span><span class="rdot"><svg viewBox="0 0 24 24"><use href="#g-lock"/></svg></span></div> 1368 <div class="rpin xl" style="left:19.2%; top:70%"><span class="ring"></span><span class="ring"></span><span class="ring"></span><span class="rdot"><svg viewBox="0 0 24 24"><use href="#g-lock"/></svg></span></div> 1369 </div> 1370 </div> 1371 </div> 1372 </div> 1373 </div> 1374</section> 1375 1376<!-- UPCOMING EVENTS --> 1377<section class="feature reveal" id="upcoming" data-screen-label="03 Events" style="padding-top:clamp(40px, 6vh, 80px)"> 1378 <div class="blobs"> 1379 <div class="blob b2" style="top:10%; right:-18%;"></div> 1380 <div class="blob b4" style="bottom:-20%; left:-10%;"></div> 1381 </div> 1382 <div class="row one-col"> 1383 <div class="text"> 1384 <h2>Upcoming <span class="gradient-text">events</span>.</h2> 1385 </div> 1386 </div> 1387<!-- ROWS:START rendered from GET /web/homepage-events; no build step, no cron --> 1388 <div class="ev-row-head" data-city="miami" hidden> 1389 <h3>Miami</h3> 1390 <a class="ev-all" href="/miami">See all <span aria-hidden="true">→</span></a> 1391 </div> 1392 <div class="ev-row" data-city="miami" hidden></div> 1393 <div class="ev-row-head" data-city="nyc" hidden> 1394 <h3>New York</h3> 1395 <a class="ev-all" href="/nyc">See all <span aria-hidden="true">→</span></a> 1396 </div> 1397 <div class="ev-row" data-city="nyc" hidden></div> 1398<!-- ROWS:END -->
1399<script> 1400 // The rows are fetched, not baked in. They used to be written into this file by a 1401 // 7am cron on a laptop and hand-deployed, so a missed run served last night's cards 1402 // all day (9/24, 9/25). The API decides what is sellable; this only draws it. 1403 (function () { 1404 var API = 'https://d3andjnzkitzgc.cloudfront.net'; 1405 var upcoming = document.getElementById('upcoming'); 1406 if (!upcoming) return; 1407 1408 function esc(v) { 1409 return String(v == null ? '' : v) 1410 .replace(/&/g, '&').replace(/</g, '<').replace(/>/g, '>') 1411 .replace(/"/g, '"').replace(/'/g, '''); 1412 } 1413 // Same optimizer the generated cards used, so the flyers stay 384px. 1414 function thumb(u) { 1415 return '/_next/image?url=' + encodeURIComponent(u) + '&w=384&q=75'; 1416 } 1417 function money(n) { return '$' + Number(n).toLocaleString('en-US'); } 1418 1419 function card(c) { 1420 var a = document.createElement('a'); 1421 a.className = 'ev-card'; 1422 a.setAttribute('data-night', c.night || ''); 1423 a.href = '/event/' + encodeURIComponent(c.slug); 1424 a.innerHTML = 1425 '<img class="ev-img" src="' + esc(thumb(c.image)) + '" alt="" width="384" height="480" loading="lazy" decoding="async">' + 1426 '<span class="ev-when">' + esc(c.day) + ' · ' + esc(c.date) + '</span>' + 1427 '<span class="ev-name">' + esc(c.venue) + '</span>' + 1428 '<span class="ev-event">' + esc(c.event) + '</span>' + 1429 '<span class="ev-from">Tables from ' + esc(money(c.from)) + '</span>'; 1430 return a; 1431 } 1432 1433 fetch(API + '/web/homepage-events', { headers: { 'X-App-Version': 'web' } }) 1434 .then(function (r) { return r.ok ? r.json() : null; }) 1435 .then(function (data) { 1436 if (!data) throw new Error('no data'); 1437 var total = 0; 1438 ['miami', 'nyc'].forEach(function (city) { 1439 var rows = (data[city] || []); 1440 var row = upcoming.querySelector('.ev-row[data-city="' + city + '"]'); 1441 var head = upcoming.querySelector('.ev-row-head[data-city="' + city + '"]'); 1442 if (!row || !head || !rows.length) return; 1443 rows.forEach(function (c) { if (c && c.slug && c.image) row.appendChild(card(c)); }); 1444 if (!row.children.length) return; 1445 row.hidden = false; 1446 head.hidden = false; 1447 total += row.children.length; 1448 }); 1449 // An empty section is worse than no section: hide it rather than leave a 1450 // bare heading and a scrollbar. 1451 if (!total) upcoming.hidden = true; 1452 }) 1453 .catch(function () { upcoming.hidden = true; }); 1454 })(); 1455</script>
1455 1456 <div class="ev-cta"> 1457 <a class="pill solid" href="tel:+18669023933" data-cta-source="events_row" 1458 aria-label="Call our AI Concierge at (866) 902-3933">(866) 902-3933</a> 1459 <p class="ev-cta-note" aria-hidden="true">Call our AI Concierge</p> 1460 </div> 1461</section> 1462 1463<!-- FOOTER --> 1464<footer id="partnerships" data-screen-label="07 Footer"> 1465 <div class="grid"> 1466 <div> 1467 <a class="logo" href="/" aria-label="ZONA home"> 1468 <span class="logo-wordmark">ZONA</span> 1469 </a> 1470 <p class="tag" style="margin-top:16px">Built by insiders, for insiders.</p> 1471 <p class="tag mono" style="margin-top:20px; font-size:11px; letter-spacing:0.2em; text-transform:uppercase">getzona.app/contact-us</p> 1472 </div> 1473 <div> 1474 <h4>Get the App</h4> 1475 <ul> 1476 <li><a href="https://apps.apple.com/us/app/zona-miami-nyc-nightlife/id6479909742" target="_blank" rel="noopener">iOS App Store</a></li> 1477 <li><a href="https://play.google.com/store/apps/details?id=com.myzona" target="_blank" rel="noopener">Google Play</a></li> 1478 </ul> 1479 </div> 1480 <div> 1481 <h4>Explore Miami</h4> 1482 <ul> 1483 <li><a href="https://getzona.app/miami">Miami nightlife</a></li> 1484 <li><a href="https://getzona.app/miami/browse/bottle-service">Bottle service in Miami</a></li> 1485 <li><a href="https://getzona.app/miami/browse/tonight">Tonight in Miami</a></li> 1486 </ul> 1487 </div> 1488 <div> 1489 <h4>Explore New York</h4> 1490 <ul> 1491 <li><a href="https://getzona.app/nyc">New York nightlife</a></li> 1492 <li><a href="https://getzona.app/nyc/browse/bottle-service">Bottle service in New York</a></li> 1493 <li><a href="https://getzona.app/nyc/browse/tonight">Tonight in New York</a></li> 1494 </ul> 1495 </div> 1496 <div> 1497 <h4>Company</h4> 1498 <ul> 1499 <li><a href="/terms-conditions">Terms & Conditions</a></li> 1500 <li><a href="/privacy-policy">Privacy Policy</a></li> 1501 <li><a href="/accessibility">Accessibility</a></li> 1502 <li><a href="/concierge">Concierge</a></li> 1503 <li><a href="/contact-us">Contact Us</a></li> 1504 </ul> 1505 </div> 1506 </div> 1507 <div class="base"> 1508 <span>© ZONA APP CORP</span> 1509 <span>v2.0.0</span> 1510 </div> 1511</footer> 1512
1513<script> 1514 // On reload, scroll to top instead of preserving the anchor 1515 if ('scrollRestoration' in history) history.scrollRestoration = 'manual'; 1516 if (performance.getEntriesByType('navigation')[0]?.type === 'reload' && location.hash) { 1517 history.replaceState(null, '', location.pathname); 1518 window.scrollTo(0, 0); 1519 } 1520 // Nav scroll state 1521 const nav = document.getElementById('nav'); 1522 const onScroll = () => { 1523 if (window.scrollY > 20) nav.classList.add('scrolled'); 1524 else nav.classList.remove('scrolled'); 1525 }; 1526 window.addEventListener('scroll', onScroll, {passive:true}); 1527 onScroll(); 1528 // Mobile menu toggle 1529 const navToggle = document.getElementById('navToggle'); 1530 const mobileMenu = document.getElementById('mobileMenu'); 1531 if (navToggle && mobileMenu) { 1532 const closeMenu = () => { navToggle.classList.remove('open'); mobileMenu.classList.remove('open'); navToggle.setAttribute('aria-expanded','false'); document.body.style.overflow=''; }; 1533 navToggle.addEventListener('click', () => { 1534 const isOpen = navToggle.classList.toggle('open'); 1535 mobileMenu.classList.toggle('open', isOpen); 1536 navToggle.setAttribute('aria-expanded', String(isOpen)); 1537 document.body.style.overflow = isOpen ? 'hidden' : ''; 1538 }); 1539 mobileMenu.querySelectorAll('a').forEach(a => a.addEventListener('click', closeMenu)); 1540 document.addEventListener('click', (e) => { 1541 if (!mobileMenu.classList.contains('open')) return; 1542 if (mobileMenu.contains(e.target) || navToggle.contains(e.target)) return; 1543 closeMenu(); 1544 }); 1545 document.addEventListener('keydown', (e) => { 1546 if (e.key === 'Escape' && mobileMenu.classList.contains('open')) closeMenu(); 1547 }); 1548 } 1549 1550 // Reveal on scroll 1551 const io = new IntersectionObserver((entries) => { 1552 entries.forEach(e => { 1553 if (e.isIntersecting) { 1554 e.target.classList.add('in'); 1555 // keep observed, items stay revealed; no need to unobserve 1556 } 1557 }); 1558 }, {threshold: 0.15}); 1559 document.querySelectorAll('.reveal').forEach(el => io.observe(el)); 1560 1561 // Hero pops immediately 1562 requestAnimationFrame(() => document.getElementById('hero').classList.add('in')); 1563 1564 // ---- Scroll-coupled 3D tilt + chip parallax ---- 1565 const stages = document.querySelectorAll('.tilt-stage'); 1566 const chips = document.querySelectorAll('.glass-chip'); 1567 const blobsAll = document.querySelectorAll('.blob'); 1568 const vh = () => window.innerHeight; 1569 1570 function tilt(){ 1571 const h = vh();
1572 stages.forEach(s => { 1573 const r = s.getBoundingClientRect(); 1574 const center = r.top + r.height/2; 1575 // -1 (below viewport) ⦠0 (centered) ⦠+1 (above viewport) 1576 const p = Math.max(-1, Math.min(1, (h/2 - center) / (h/2 + r.height/2))); 1577 const dir = s.dataset.tiltDir === 'left' ? -1 : 1; 1578 s.style.setProperty('--tilt', (p * 10 * dir * -1).toFixed(2) + 'deg'); 1579 s.style.setProperty('--tiltX', (p * 4).toFixed(2) + 'deg'); 1580 s.style.transform = `translateY(${(p * -16).toFixed(1)}px)`; 1581 }); 1582 chips.forEach(c => { 1583 const depth = parseFloat(c.dataset.chipDepth || 40); 1584 const r = c.getBoundingClientRect(); 1585 const h2 = vh(); 1586 const center = r.top + r.height/2; 1587 const p = (h2/2 - center) / h2; 1588 c.style.transform = `translateY(${(p * depth).toFixed(1)}px) translateZ(${Math.abs(depth)}px)`; 1589 }); 1590 blobsAll.forEach((b, i) => { 1591 if (b.closest('.hero')) return; // let hero blobs roam freely 1592 const r = b.parentElement.getBoundingClientRect(); 1593 const h2 = vh(); 1594 const center = r.top + r.height/2; 1595 const p = (h2/2 - center) / h2; 1596 const dir = (i % 2 === 0) ? 1 : -1; 1597 b.style.transform = `translate(${(p * 40 * dir).toFixed(1)}px, ${(p * -60).toFixed(1)}px) scale(${(1 + Math.abs(p)*0.05).toFixed(3)})`; 1598 }); 1599 } 1600 window.addEventListener('scroll', tilt, {passive:true}); 1601 window.addEventListener('resize', tilt); 1602 tilt(); 1603 1604 // Clean in-page anchor clicks + strip hash from URL (capture phase so nothing else beats us to it) 1605 document.addEventListener('click', (e) => { 1606 const a = e.target.closest('a[href*="#"]'); 1607 if (!a) return; 1608 const url = new URL(a.href, location.href); 1609 if (url.pathname !== location.pathname) return; 1610 const hash = url.hash; 1611 if (!hash || hash === '#') return; 1612 const target = document.querySelector(hash); 1613 if (!target) return; 1614 e.preventDefault(); 1615 target.scrollIntoView({ behavior: 'smooth', block: 'start' }); 1616 history.replaceState(null, '', location.pathname + location.search); 1617 }, true); 1618 1619 // On page load with hash (cross-page nav), scroll then strip 1620 if (location.hash) { 1621 const onloadTarget = document.querySelector(location.hash); 1622 if (onloadTarget) { 1623 requestAnimationFrame(() => { 1624 onloadTarget.scrollIntoView({ behavior: 'smooth', block: 'start' }); 1625 }); 1626 } 1627 } 1628 1629 // GA4: track App Store + Google Play clicks 1630 document.querySelectorAll('.store-btn').forEach(btn => { 1631 btn.addEventListener('click', () => { 1632 if (typeof gtag !== 'function') return; 1633 gtag('event', 'download_click', { 1634 store: btn.classList.contains('store-apple') ? 'app_store' : 'google_play', 1635 page: location.pathname 1636 }); 1637 }); 1638 }); 1639 1640 // Watchdog: strip hash from URL every animation frame. 1641 // Belt-and-suspenders in case the click interceptor is bypassed. 1642 (function watchHash(){ 1643 if (location.hash) { 1644 history.replaceState(null, '', location.pathname + location.search); 1645 } 1646 requestAnimationFrame(watchHash); 1647 })(); 1648 1649</script>
vendor: 1 bytes, line 1649
1649
1650<script src="download-cta.js"></script>
1650 1651</body> 1652</html>
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.