/* ========================================================================== Self-hosted display font (Anton, SIL OFL) — used only for the hero headline, sparingly, per the "spend boldness in one place" principle. Self-hosted specifically to avoid an external font-CDN request slowing down page load on shared hosting. ========================================================================== */ @font-face { font-family: 'Anton'; src: url('/assets/fonts/anton-400.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; } /* ========================================================================== VibeMap design tokens ========================================================================== */ :root { --ink-night: #150F2B; --dusk: #231C42; --dusk-light: #322A54; --vibe-coral: #FF4D6D; --amber-glow: #FFB627; --signal-teal: #2CE0C1; --paper: #F6F1E7; --paper-dim: #C9C3D6; --border-subtle: var(--border-subtle); --border-medium: var(--border-medium); --shadow-soft: rgba(0,0,0,0.3); --font-display: -apple-system, "Segoe UI", "Helvetica Neue", Arial, sans-serif; --font-body: -apple-system, "Segoe UI", Roboto, Arial, sans-serif; --radius: 14px; --radius-lg: 22px; --ease: cubic-bezier(0.4, 0, 0.2, 1); } /* Light theme — only ever applied via [data-theme="light"] on , and only dashboard-shell pages (admin/business/account) ever set that attribute. The public marketing site stays dark-only intentionally, matching the nightlife brand — this never touches those pages. */ [data-theme="light"] { --ink-night: #F5F3FA; --dusk: #FFFFFF; --dusk-light: #F1EEF8; --paper: #17122A; --paper-dim: #6B6478; --border-subtle: rgba(23,18,42,0.08); --border-medium: rgba(23,18,42,0.14); --shadow-soft: rgba(23,18,42,0.1); } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; background: var(--ink-night); color: var(--paper); font-family: var(--font-body); -webkit-font-smoothing: antialiased; } a { color: inherit; text-decoration: none; } img { max-width: 100%; display: block; } /* ---- Type scale: heavy, condensed, uppercase-tracked eyebrows for personality without leaning on a novelty webfont ---- */ .eyebrow { font-family: var(--font-display); font-size: 12px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--signal-teal); } h1, h2, h3 { font-family: var(--font-display); font-weight: 800; letter-spacing: -0.02em; line-height: 1.05; margin: 0 0 0.4em; } h1 { font-size: clamp(2.4rem, 6vw, 4.2rem); } h2 { font-size: clamp(1.6rem, 3.4vw, 2.4rem); } h3 { font-size: 1.15rem; } p { line-height: 1.6; color: var(--paper-dim); } /* ========================================================================== Layout shell ========================================================================== */ .shell-header { display: flex; align-items: center; justify-content: space-between; padding: 20px 32px; position: sticky; top: 0; z-index: 40; background: rgba(21, 15, 43, 0.85); backdrop-filter: blur(10px); border-bottom: 1px solid var(--border-subtle); } .brand { font-family: var(--font-display); font-weight: 800; font-size: 1.3rem; letter-spacing: -0.02em; display: flex; align-items: center; gap: 8px; } .brand .dot { color: var(--vibe-coral); } .nav-links { display: flex; gap: 24px; align-items: center; } .nav-links a { font-size: 0.92rem; color: var(--paper-dim); font-weight: 600; white-space: nowrap; } .nav-links a:hover { color: var(--paper); } .nav-divider { width: 1px; height: 18px; background: rgba(255,255,255,0.12); display: inline-block; } .nav-toggle { display: none; flex-direction: column; justify-content: center; gap: 5px; width: 36px; height: 36px; background: transparent; border: none; cursor: pointer; padding: 0; } .nav-toggle span { display: block; width: 22px; height: 2px; background: var(--paper); border-radius: 2px; transition: transform 0.2s ease, opacity 0.2s ease; } .nav-toggle.is-active span:nth-child(1) { transform: translateY(7px) rotate(45deg); } .nav-toggle.is-active span:nth-child(2) { opacity: 0; } .nav-toggle.is-active span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } @media (max-width: 860px) { .nav-toggle { display: flex; } .nav-links { position: fixed; top: 72px; left: 12px; right: 12px; max-height: 0; overflow: hidden; background: var(--dusk); border: 1px solid var(--border-medium); border-radius: 16px; flex-direction: column; align-items: flex-start; gap: 0; padding: 0 20px; transition: max-height 0.28s var(--ease), padding 0.28s var(--ease); z-index: 39; box-shadow: 0 24px 50px rgba(0,0,0,0.5); } .nav-links.nav-open { max-height: 80vh; padding: 10px 20px; overflow-y: auto; } .nav-links a:not(.btn) { padding: 12px 0; width: 100%; border-bottom: 1px solid var(--border-subtle); } .nav-links a.btn { margin: 10px 0; } .nav-divider { display: none; } } .btn { display: inline-flex; align-items: center; gap: 8px; padding: 11px 22px; border-radius: 999px; font-weight: 700; font-size: 0.9rem; border: none; cursor: pointer; font-family: var(--font-display); transition: transform 0.15s var(--ease), background 0.15s var(--ease), border-color 0.15s var(--ease); } .btn:active { transform: scale(0.96); } .btn-primary { background: var(--vibe-coral); color: #1a0e12; } .btn-primary:hover { background: #ff6a84; transform: translateY(-1px); } .btn-ghost { background: transparent; color: var(--paper); border: 1px solid rgba(255,255,255,0.18); } .btn-ghost:hover { border-color: rgba(255,255,255,0.4); transform: translateY(-1px); } /* Consistent tactile lift across every card-like clickable element sitewide */ .trend-card, .venue-card, .list-row, .stat-card, .vibe-ticket-card, a.vibe-ticket-card { transition: transform 0.2s var(--ease), box-shadow 0.2s var(--ease), border-color 0.2s var(--ease); } a.trend-card:hover, a.venue-card:hover, a.vibe-ticket-card:hover { transform: translateY(-4px); box-shadow: 0 16px 32px rgba(0,0,0,0.35); } .list-row:hover { transform: translateX(2px); } main { min-height: 60vh; } .shell-footer { padding: 40px 32px; border-top: 1px solid var(--border-subtle); color: var(--paper-dim); font-size: 0.85rem; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 16px; } /* ========================================================================== Signature element: the pulse marker. A radiating dot whose speed/brightness maps to Vibe Score. Used on the map AND as a repeating badge on venue/event cards so the "live" feeling shows up everywhere, not just one screen. ========================================================================== */ .pulse-marker { position: relative; width: 14px; height: 14px; border-radius: 50%; background: var(--signal-teal); flex-shrink: 0; } .pulse-marker::before { content: ""; position: absolute; inset: -6px; border-radius: 50%; background: var(--signal-teal); opacity: 0.35; animation: pulse-ring 2.2s ease-out infinite; } /* Score bands recolor + retime the pulse so "very lively" visibly reads faster/brighter than "quiet" at a glance, no need to read the number. */ .pulse-marker[data-band="quiet"] { background: #6B6483; } .pulse-marker[data-band="quiet"]::before { background: #6B6483; animation-duration: 3.6s; opacity: 0.2; } .pulse-marker[data-band="moderate"] { background: var(--amber-glow); } .pulse-marker[data-band="moderate"]::before { background: var(--amber-glow); animation-duration: 2.6s; } .pulse-marker[data-band="lively"] { background: var(--signal-teal); } .pulse-marker[data-band="lively"]::before { background: var(--signal-teal); animation-duration: 1.8s; } .pulse-marker[data-band="very-lively"] { background: var(--vibe-coral); } .pulse-marker[data-band="very-lively"]::before { background: var(--vibe-coral); animation-duration: 1.1s; opacity: 0.5; } @keyframes pulse-ring { 0% { transform: scale(0.6); opacity: 0.5; } 70% { transform: scale(1.8); opacity: 0; } 100% { transform: scale(1.8); opacity: 0; } } @media (prefers-reduced-motion: reduce) { .pulse-marker::before { animation: none; opacity: 0.25; } } .vibe-badge { display: inline-flex; align-items: center; gap: 8px; font-size: 0.82rem; font-weight: 700; color: var(--paper); } /* ========================================================================== Hero entrance sequence — one deliberate, orchestrated moment on page load, not scattered scroll effects. Gated by prefers-reduced-motion. ========================================================================== */ @media (prefers-reduced-motion: no-preference) { @keyframes rise-in { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: translateY(0); } } @keyframes scale-in { from { opacity: 0; transform: scale(0.96); } to { opacity: 1; transform: scale(1); } } @keyframes pop-in { from { opacity: 0; transform: translateY(12px) scale(0.92); } to { opacity: 1; transform: translateY(0) scale(1); } } .hero-v2-text .eyebrow { animation: rise-in 0.6s var(--ease) both; } .hero-v2-text .hero-display { animation: rise-in 0.6s var(--ease) 0.08s both; } .hero-v2-text .hero-script { animation: rise-in 0.6s var(--ease) 0.16s both; } .hero-v2-text .hero-sub { animation: rise-in 0.6s var(--ease) 0.24s both; } .hero-v2-text .intent-bar { animation: rise-in 0.6s var(--ease) 0.32s both; } .hero-v2-text #surprise-me-btn { animation: rise-in 0.6s var(--ease) 0.4s both; } .hero-v2-text .category-pill-row { animation: rise-in 0.6s var(--ease) 0.48s both; } .hero-photo-frame { animation: scale-in 0.7s var(--ease) 0.1s both; } .hero-badge-pill { animation: pop-in 0.5s var(--ease) 0.6s both; } .hero-floating-stat { animation: pop-in 0.5s var(--ease) 0.75s both; } .hero-floating-ticket { animation: pop-in 0.5s var(--ease) 0.9s both; } /* ---- Sitewide scroll reveal: one subtle fade+rise per section, not per-card stagger spam. Applied deliberately via .reveal-on-scroll. ---- */ .reveal-on-scroll { opacity: 0; transform: translateY(20px); transition: opacity 0.7s var(--ease), transform 0.7s var(--ease); } .reveal-on-scroll.is-visible { opacity: 1; transform: translateY(0); } } /* ========================================================================== VIP membership card — premium gold-accented treatment, distinct from the coral primary accent used everywhere else ========================================================================== */ .vip-card { position: relative; background: linear-gradient(160deg, var(--dusk-light), var(--dusk)); border: 1px solid rgba(255,182,39,0.35); border-radius: 24px; padding: 36px 32px; margin-top: 28px; box-shadow: 0 30px 60px rgba(255,182,39,0.08); } .vip-card-price { margin-bottom: 20px; } .vip-card-amount { font-family: 'Anton', var(--font-display); font-size: 3rem; color: var(--amber-glow); line-height: 1; } .vip-card-currency { display: block; color: var(--paper-dim); font-size: 0.85rem; margin-top: 4px; } .vip-card-features { list-style: none; padding: 0; margin: 0 0 24px; text-align: left; max-width: 280px; margin-left: auto; margin-right: auto; } .vip-card-features li { padding: 8px 0; color: var(--paper-dim); border-bottom: 1px solid var(--border-subtle); } .vip-card-features li:last-child { border-bottom: none; } @media (max-width: 480px) { .vip-card { padding: 24px 20px; } .vip-card-amount { font-size: 2.4rem; } } /* ========================================================================== Homepage: live activity ticker + category quick-filter pills ========================================================================== */ .activity-ticker { max-width: 1320px; margin: 0 auto; padding: 10px 32px; font-size: 0.82rem; color: var(--paper-dim); display: flex; align-items: center; gap: 8px; transition: opacity 0.2s ease; min-height: 20px; } .ticker-time { color: var(--paper-dim); opacity: 0.7; } .category-pill-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; } /* ========================================================================== Homepage hero v2 — asymmetric layout: oversized headline left, real photography right, with floating widgets (the ticket-card signature element + a live stat) overlapping the photo edge. ========================================================================== */ .hero-v2 { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 48px; align-items: center; max-width: 1320px; margin: 0 auto; padding: 56px 32px 80px; } .hero-v2-text { max-width: 560px; } .hero-display { font-family: 'Anton', var(--font-display); font-weight: 400; font-size: clamp(3.4rem, 7.5vw, 6.2rem); line-height: 0.9; letter-spacing: 0.01em; text-transform: uppercase; margin: 14px 0 4px; color: var(--paper); } .hero-script { font-family: var(--font-display); font-style: italic; font-weight: 800; font-size: clamp(1.5rem, 2.8vw, 2.1rem); color: var(--vibe-coral); margin: 0 0 22px; letter-spacing: -0.01em; } .hero-sub { max-width: 460px; margin-bottom: 8px; } .intent-bar { display: flex; gap: 10px; background: var(--dusk); border: 1px solid var(--border-medium); padding: 8px; border-radius: 999px; max-width: 480px; } .intent-bar input { flex: 1; background: transparent; border: none; outline: none; color: var(--paper); font-size: 1rem; padding: 10px 16px; font-family: var(--font-body); } .intent-bar input::placeholder { color: var(--paper-dim); } .hero-v2 .intent-bar { margin-top: 22px; } .hero-v2-visual { position: relative; } .hero-photo-frame { position: relative; border-radius: 28px; overflow: hidden; aspect-ratio: 4 / 5; box-shadow: 0 30px 70px rgba(0,0,0,0.55); background: linear-gradient(155deg, var(--dusk-light), var(--ink-night)); } .hero-photo { width: 100%; height: 100%; object-fit: cover; display: block; } /* If the hero image hasn't been uploaded yet, fail gracefully into a themed gradient instead of a broken-image icon. */ .hero-photo-missing .hero-photo { display: none; } .hero-photo-missing::after { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 30% 20%, rgba(255,77,109,0.25), transparent 55%), radial-gradient(circle at 75% 80%, rgba(44,224,193,0.18), transparent 55%), linear-gradient(155deg, var(--dusk-light), var(--ink-night)); } .hero-badge-pill { position: absolute; top: 20px; left: 20px; z-index: 2; display: inline-flex; align-items: center; gap: 8px; background: rgba(21,15,43,0.72); backdrop-filter: blur(8px); border: 1px solid rgba(255,255,255,0.15); padding: 8px 14px; border-radius: 999px; font-size: 0.8rem; font-weight: 700; color: var(--paper); } /* ---- Live Vibe ticket card: the hero's signature element ---- Two circular notches punched into the left/right edges at the divider line mimic a real ticket stub, tying the "you're getting a live pass into what's happening" feeling directly to the product's concept. */ .vibe-ticket-card { position: relative; display: block; background: var(--dusk); border-radius: 18px; padding: 18px 20px 16px; box-shadow: 0 24px 48px rgba(0,0,0,0.5); border: 1px solid var(--border-medium); } .vibe-ticket-card::before, .vibe-ticket-card::after { content: ""; position: absolute; top: 56px; width: 22px; height: 22px; background: var(--ink-night); border-radius: 50%; } .vibe-ticket-card::before { left: -11px; } .vibe-ticket-card::after { right: -11px; } .ticket-eyebrow { font-family: var(--font-display); font-size: 0.68rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--signal-teal); } .ticket-venue-name { font-weight: 800; font-size: 1.1rem; margin-top: 4px; color: var(--paper); } .ticket-divider { border-top: 2px dashed rgba(255,255,255,0.15); margin: 14px 0 12px; } .ticket-score-row { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 0.95rem; color: var(--paper); } .ticket-score-label { color: var(--paper-dim); font-weight: 600; font-size: 0.82rem; } .hero-floating-ticket { position: absolute; bottom: -28px; left: -32px; width: 230px; z-index: 5; } .hero-floating-stat { position: absolute; top: -22px; right: -18px; z-index: 5; background: var(--dusk); border: 1px solid var(--border-medium); border-radius: 18px; padding: 14px 18px; box-shadow: 0 20px 44px rgba(0,0,0,0.45); text-align: center; } .stat-pill-value { font-family: var(--font-display); font-size: 1.6rem; font-weight: 800; color: var(--amber-glow); line-height: 1; } .stat-pill-label { font-size: 0.72rem; color: var(--paper-dim); font-weight: 600; margin-top: 4px; line-height: 1.25; } @media (max-width: 900px) { .hero-v2 { grid-template-columns: 1fr; padding: 32px 20px 64px; gap: 56px; } .hero-v2-visual { order: -1; max-width: 380px; margin: 0 auto; } .hero-floating-ticket { left: 12px; bottom: -24px; } .hero-floating-stat { right: 12px; top: -18px; } } .map-page-frame { height: calc(100vh - 73px); height: calc(100dvh - 73px); /* mobile browsers: accounts for the address bar hiding/showing, prevents the page from scrolling behind the map */ display: grid; grid-template-columns: 380px 1fr; gap: 16px; padding: 16px; box-sizing: border-box; } .map-sheet-handle { display: none; } /* desktop default — mobile media query below overrides to flex */ .more-filters-toggle-btn { display: none; margin-bottom: 12px; } .more-filters-panel { display: block; } @media (max-width: 860px) { .more-filters-toggle-btn { display: inline-flex; } .more-filters-panel { display: none; } .more-filters-panel.is-open { display: block; } } .map-canvas-wrap { position: relative; height: 100%; min-height: 0; /* prevents content from forcing the grid row taller than its allotted height */ border-radius: 18px; overflow: hidden; border: 1px solid var(--border-medium); } body.map-page-body { overflow: hidden; height: 100vh; height: 100dvh; } @media (max-width: 860px) { .map-page-frame { grid-template-columns: 1fr; grid-template-rows: 1fr; /* map now owns the whole frame — sidebar becomes an overlay, see below */ padding: 0; gap: 0; } .map-canvas-wrap { border-radius: 0; border: none; } /* edge-to-edge on mobile for max map size */ /* Sidebar becomes a bottom sheet: collapsed to just search + category chips by default (map gets ~85% of the screen), drag the handle up to reveal filters and the full venue list — same pattern as Google Maps mobile, rather than permanently reserving 45% of the screen for it. */ .map-sidebar { position: fixed; left: 0; right: 0; bottom: 0; top: auto; height: auto; max-height: 75vh; border-radius: 20px 20px 0 0; z-index: 30; transform: translateY(calc(100% - 148px)); transition: transform 0.3s var(--ease); box-shadow: 0 -10px 40px rgba(0,0,0,0.5); } .map-sidebar.sheet-expanded { transform: translateY(0); } .map-sheet-handle { display: flex; justify-content: center; padding: 8px 0 4px; cursor: pointer; margin: -20px -20px 12px; } .map-sheet-handle span { width: 40px; height: 4px; border-radius: 2px; background: rgba(255,255,255,0.25); } .more-filters-toggle-btn, #venue-list { display: none; } .map-sidebar.sheet-expanded .more-filters-toggle-btn { display: inline-flex; } .map-sidebar.sheet-expanded #venue-list { display: block; } } .map-sidebar { background: var(--dusk); overflow-y: auto; overflow-x: hidden; min-height: 0; /* prevents content from forcing the grid row taller than its allotted height */ padding: 20px; border-radius: 18px; border: 1px solid var(--border-medium); } #discovery-map { width: 100%; height: 100%; } .map-legend { position: absolute; bottom: 16px; left: 16px; z-index: 5; background: rgba(21,15,43,0.85); backdrop-filter: blur(8px); border: 1px solid var(--border-medium); border-radius: 12px; padding: 10px 14px; display: flex; flex-direction: column; gap: 6px; } .map-legend-item { display: flex; align-items: center; gap: 8px; font-size: 0.74rem; color: var(--paper-dim); } @media (max-width: 860px) { .map-legend { display: none; } /* not enough vertical room on the mobile map view */ } .filter-row { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 18px; } @media (max-width: 860px) { .filter-row { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; padding-bottom: 6px; margin-bottom: 12px; } .filter-row .filter-chip { flex-shrink: 0; } } .filter-chip { padding: 8px 14px; border-radius: 999px; background: var(--dusk-light); border: 1px solid transparent; font-size: 0.82rem; font-weight: 600; cursor: pointer; color: var(--paper-dim); } .filter-chip.active { border-color: var(--signal-teal); color: var(--signal-teal); background: rgba(44, 224, 193, 0.1); } .venue-card { display: flex; gap: 12px; padding: 14px; border-radius: var(--radius); background: var(--dusk-light); margin-bottom: 10px; cursor: pointer; border: 1px solid transparent; transition: border-color 0.15s ease; } .venue-card:hover { border-color: rgba(255,255,255,0.15); } .venue-card .meta { flex: 1; min-width: 0; } .venue-card h3 { margin: 0 0 4px; font-size: 1rem; } .venue-card .sub { font-size: 0.8rem; color: var(--paper-dim); margin-bottom: 6px; } /* ========================================================================== Homepage: real reviews, map teaser, signup strip ========================================================================== */ .review-quote-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; margin-top: 8px; } .review-quote-card { background: var(--dusk); border: 1px solid var(--border-medium); border-radius: 16px; padding: 20px; text-decoration: none; display: block; transition: transform 0.2s var(--ease), box-shadow 0.2s var(--ease); } .review-quote-stars { color: var(--amber-glow); font-size: 0.9rem; margin-bottom: 10px; letter-spacing: 2px; } .review-quote-text { color: var(--paper); font-size: 0.95rem; line-height: 1.5; margin: 0 0 14px; } .review-quote-attribution { color: var(--paper-dim); font-size: 0.8rem; font-weight: 600; } .review-quote-card:hover { transform: translateY(-4px); box-shadow: 0 16px 32px rgba(0,0,0,0.35); border-color: rgba(255,255,255,0.15); } .map-teaser-card { display: grid; grid-template-columns: 1fr 1.3fr; gap: 32px; align-items: center; background: var(--dusk); border-radius: 24px; border: 1px solid var(--border-medium); overflow: hidden; padding: 32px; } .map-teaser-visual { position: relative; height: 180px; border-radius: 16px; background: radial-gradient(circle at 30% 30%, rgba(255,77,109,0.18), transparent 55%), radial-gradient(circle at 70% 70%, rgba(44,224,193,0.15), transparent 55%), linear-gradient(155deg, var(--dusk-light), var(--ink-night)); } @media (max-width: 760px) { .map-teaser-card { grid-template-columns: 1fr; padding: 24px; } .map-teaser-visual { order: -1; } } .signup-strip { display: flex; justify-content: space-between; align-items: center; gap: 20px; background: linear-gradient(135deg, var(--dusk-light), var(--dusk)); border: 1px solid rgba(255,77,109,0.25); border-radius: 20px; padding: 28px 32px; flex-wrap: wrap; } /* ========================================================================== Events listing — date-block cards instead of generic gradient-cover cards ========================================================================== */ .event-card-list { display: flex; flex-direction: column; gap: 12px; margin-top: 8px; } .event-card-v2 { display: flex; gap: 18px; align-items: center; background: var(--dusk); border-radius: 16px; padding: 16px 20px; border: 1px solid var(--border-subtle); transition: transform 0.2s var(--ease), box-shadow 0.2s var(--ease), border-color 0.2s var(--ease); } .event-card-v2:hover { transform: translateY(-2px); border-color: rgba(255,255,255,0.15); box-shadow: 0 12px 28px rgba(0,0,0,0.3); } .event-date-block { flex-shrink: 0; width: 64px; height: 64px; border-radius: 14px; background: var(--dusk-light); display: flex; flex-direction: column; align-items: center; justify-content: center; border: 1px solid var(--border-medium); } .event-date-month { font-size: 0.68rem; font-weight: 700; letter-spacing: 0.08em; color: var(--vibe-coral); } .event-date-day { font-family: 'Anton', var(--font-display); font-size: 1.7rem; line-height: 1.1; color: var(--paper); } .event-card-v2-body { min-width: 0; flex: 1; } .event-card-v2-body h3 { margin: 0 0 4px; } .event-card-v2-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; } .event-card-v2-tags .filter-chip { padding: 5px 12px; font-size: 0.74rem; } @media (max-width: 560px) { .event-card-v2 { padding: 12px 14px; gap: 12px; } .event-date-block { width: 52px; height: 52px; } .event-date-day { font-size: 1.4rem; } } .section { max-width: 1280px; margin: 0 auto; padding: 56px 32px; } @media (max-width: 600px) { .section { padding: 32px 18px; } } /* ========================================================================== Grid sections (trending strip, category rail) ========================================================================== */ .card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 18px; margin-top: 24px; } .trend-card { background: var(--dusk); border-radius: var(--radius-lg); padding: 18px; border: 1px solid var(--border-subtle); } .trend-card .cover { height: 130px; border-radius: var(--radius); background: linear-gradient(135deg, var(--dusk-light), var(--ink-night)); margin-bottom: 14px; display: flex; align-items: flex-end; padding: 10px; } /* ========================================================================== Venue detail page — cover photo banner, ticket-card Vibe Score (reusing the homepage's signature element), two-column layout with quick facts. ========================================================================== */ .venue-cover-frame { position: relative; height: 320px; overflow: hidden; } .venue-cover-photo { width: 100%; height: 100%; object-fit: cover; display: block; } .venue-cover-frame.hero-photo-missing::after { border-radius: 0; } .venue-cover-scrim { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(21,15,43,0.15) 0%, rgba(21,15,43,0.95) 100%); } .venue-cover-content { position: absolute; bottom: 0; left: 0; right: 0; padding: 0 32px 28px; max-width: 1280px; margin: 0 auto; } .venue-title { font-family: 'Anton', var(--font-display); font-weight: 400; font-size: clamp(2.2rem, 5vw, 3.6rem); text-transform: uppercase; letter-spacing: 0.005em; line-height: 0.95; margin: 6px 0 0; } .venue-layout { display: grid; grid-template-columns: 1fr 320px; gap: 40px; align-items: start; } .venue-ticket-card { max-width: 320px; margin: 24px 0; } .venue-sidebar { display: flex; flex-direction: column; gap: 16px; } .venue-fact { display: flex; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--border-subtle); font-size: 0.88rem; } .venue-fact:last-child { border-bottom: none; } .venue-fact-label { color: var(--paper-dim); font-weight: 600; } .venue-fact-value { text-align: right; font-weight: 600; } @media (max-width: 860px) { .venue-layout { grid-template-columns: 1fr; } .venue-cover-frame { height: 220px; } .venue-cover-content { padding: 0 18px 20px; } } /* ========================================================================== Forms (auth pages) ========================================================================== */ .auth-shell { max-width: 420px; margin: 80px auto; padding: 0 24px; } /* ---- Auth v2: split layout, decorative branded panel + form ---- */ .auth-v2-shell { display: grid; grid-template-columns: 1fr 1fr; min-height: calc(100vh - 65px); } .auth-v2-panel { position: relative; background: radial-gradient(circle at 25% 20%, rgba(255,77,109,0.28), transparent 55%), radial-gradient(circle at 80% 75%, rgba(44,224,193,0.2), transparent 55%), linear-gradient(155deg, var(--dusk-light), var(--ink-night)); display: flex; align-items: center; padding: 60px; overflow: hidden; } .auth-v2-panel-content { position: relative; z-index: 2; } .auth-v2-panel .hero-script { margin: 6px 0 18px; } .auth-v2-decor { position: absolute; inset: 0; z-index: 1; } .auth-v2-decor .pulse-marker { width: 12px; height: 12px; } .auth-v2-form-side { display: flex; align-items: center; justify-content: center; padding: 40px 24px; } /* ========================================================================== Vibe Orb — the auth-page character. Peeks over the login/register card, eyes track the cursor, closes its eyes on the password field, pulses on submit. Our own reskin of a classic "watching companion" login pattern, using the site's real gradient/pulse-marker visual language rather than a borrowed mascot. ========================================================================== */ .vibe-orb-wrap { display: flex; justify-content: center; margin-top: -58px; margin-bottom: 8px; position: relative; z-index: 3; } .vibe-orb { filter: drop-shadow(0 10px 24px rgba(255,77,109,0.35)); } .orb-eye-white, .orb-pupil { transition: transform 0.25s var(--ease); transform-origin: center; } .vibe-orb.eyes-closed .orb-eye-white { transform: scaleY(0.1); } .vibe-orb.eyes-closed .orb-pupil { opacity: 0; } .orb-pulse-ring { fill: none; stroke: var(--vibe-coral); stroke-width: 2; opacity: 0; transform-origin: center; } @media (prefers-reduced-motion: no-preference) { .vibe-orb.pulsing .orb-pulse-ring { animation: orb-pulse-out 1.1s var(--ease) infinite; } @keyframes orb-pulse-out { 0% { opacity: 0.6; transform: scale(1); } 100% { opacity: 0; transform: scale(1.7); } } } @media (max-width: 900px) { .vibe-orb-wrap { margin-top: -46px; } .vibe-orb svg { width: 80px; height: 80px; } } /* ---- Button door + walker: plays while the auth form submits — the figure "walks into the night" through a small glowing door, themed to VibeMap's own "heading out" concept rather than a literal copy. ---- */ .form-submit { position: relative; display: flex; align-items: center; justify-content: center; gap: 10px; overflow: hidden; } .btn-door { display: none; position: relative; width: 30px; height: 22px; border-radius: 5px; background: rgba(21,15,43,0.35); overflow: hidden; flex-shrink: 0; } .btn-door::after { content: ""; position: absolute; top: 0; right: 3px; width: 4px; height: 100%; background: linear-gradient(180deg, #FFE9A8, #FFB627); border-radius: 2px; box-shadow: 0 0 8px rgba(255,182,39,0.8); } .btn-walker { position: absolute; bottom: 2px; left: -8px; width: 6px; height: 16px; border-radius: 3px; background: #150F2B; } .form-submit.is-loading .btn-door { display: block; } @media (prefers-reduced-motion: reduce) { .form-submit.is-loading .btn-door { display: none; } } @media (prefers-reduced-motion: no-preference) { .form-submit.is-loading .btn-walker { animation: btn-walk 0.9s ease-in-out forwards; } .form-submit.is-loading .btn-door::after { animation: btn-door-close 0.4s ease-in 0.85s forwards; } @keyframes btn-walk { 0% { left: -8px; opacity: 1; transform: scaleX(1); } 40% { transform: scaleX(0.85); } 75% { transform: scaleX(1); } 92% { left: 22px; opacity: 1; } 100% { left: 24px; opacity: 0; } } /* Starts once the walker has reached and faded (0.85s in), then the glowing slit narrows shut — the door closing behind them. */ @keyframes btn-door-close { 0% { width: 4px; opacity: 1; } 100% { width: 0; opacity: 0; } } } .auth-v2-form-card { width: 100%; max-width: 380px; } @media (max-width: 900px) { .auth-v2-shell { grid-template-columns: 1fr; min-height: auto; } .auth-v2-panel { padding: 40px 24px; min-height: 240px; } .auth-v2-panel .hero-display { font-size: 2rem !important; } } .field { margin-bottom: 16px; } .field label { display: block; font-size: 0.85rem; font-weight: 600; margin-bottom: 6px; color: var(--paper-dim); } .field input { width: 100%; padding: 12px 14px; border-radius: 10px; border: 1px solid rgba(255,255,255,0.12); background: var(--dusk); color: var(--paper); font-size: 0.95rem; } .field input:focus { outline: none; border-color: var(--signal-teal); } .form-error { background: rgba(255, 77, 109, 0.12); border: 1px solid rgba(255, 77, 109, 0.4); color: #ffb4c0; padding: 12px 14px; border-radius: 10px; font-size: 0.85rem; margin-bottom: 18px; } .form-submit { width: 100%; justify-content: center; margin-top: 8px; } /* ========================================================================== Toast notifications — replaces scattered alert()/plain-text status messages ========================================================================== */ #toast-container { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%); z-index: 100; display: flex; flex-direction: column; gap: 8px; align-items: center; pointer-events: none; width: 100%; padding: 0 16px; } .toast { background: var(--dusk-light); border: 1px solid rgba(255,255,255,0.12); color: var(--paper); padding: 12px 20px; border-radius: 999px; font-size: 0.88rem; font-weight: 600; box-shadow: 0 8px 24px rgba(0,0,0,0.35); opacity: 0; transform: translateY(10px); transition: opacity 0.25s ease, transform 0.25s ease; max-width: 420px; text-align: center; } .toast.toast-visible { opacity: 1; transform: translateY(0); } .toast.toast-success { border-color: rgba(44,224,193,0.5); } .toast.toast-success::before { content: "✓ "; color: var(--signal-teal); } .toast.toast-error { border-color: rgba(255,77,109,0.5); } .toast.toast-error::before { content: "! "; color: var(--vibe-coral); } /* ========================================================================== Shared admin/dashboard component classes — replaces ad-hoc inline styles ========================================================================== */ .stat-row { display: flex; justify-content: space-around; text-align: center; flex-wrap: wrap; gap: 16px; } .stat-row .stat-value { font-size: 1.8rem; font-weight: 800; } .stat-row .stat-label { color: var(--paper-dim); font-size: 0.8rem; margin-top: 2px; } .stat-panel { background: var(--dusk); border-radius: 16px; padding: 20px; margin-bottom: 24px; border: 1px solid var(--border-subtle); } .admin-nav-pills { display: flex; gap: 10px; margin: 14px 0 24px; flex-wrap: wrap; } .list-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 14px; background: var(--dusk); border-radius: 12px; margin-bottom: 10px; border: 1px solid transparent; transition: border-color 0.15s ease; } .list-row:hover { border-color: var(--border-medium); } .list-row .list-row-title { font-weight: 700; } .list-row .list-row-sub { color: var(--paper-dim); font-size: 0.82rem; margin-top: 3px; } .list-row .list-row-actions { display: flex; gap: 8px; flex-shrink: 0; } .empty-state { text-align: center; padding: 40px 20px; color: var(--paper-dim); background: var(--dusk); border-radius: 14px; border: 1px dashed rgba(255,255,255,0.12); } .loading-state { color: var(--paper-dim); font-size: 0.9rem; padding: 20px 0; display: flex; align-items: center; gap: 10px; } .loading-state::before { content: ""; width: 14px; height: 14px; border-radius: 50%; border: 2px solid rgba(255,255,255,0.15); border-top-color: var(--signal-teal); animation: spin 0.7s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } .select-pill { padding: 6px 10px; border-radius: 8px; background: var(--dusk-light); color: var(--paper); border: 1px solid rgba(255,255,255,0.12); font-size: 0.8rem; } /* Small utility inputs used inline across pages (search boxes, key/value pairs) */ .input-inline { padding: 12px 14px; border-radius: 10px; background: var(--dusk); color: var(--paper); border: 1px solid rgba(255,255,255,0.12); } /* ========================================================================== Dashboard shell — shared sidebar layout for Admin, Business, and Account Overview sections. Dark theme, same tokens as the rest of the site. ========================================================================== */ .dash-shell { display: flex; min-height: 100vh; } .dash-sidebar { width: 240px; flex-shrink: 0; background: var(--dusk); border-right: 1px solid var(--border-subtle); padding: 20px 16px; position: sticky; top: 0; height: 100vh; overflow-y: auto; } .dash-brand { margin-bottom: 2px; } .dash-brand-sub { color: var(--paper-dim); font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.1em; margin: 0 0 24px 2px; } .dash-nav-group-label { color: var(--paper-dim); font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.08em; margin: 18px 0 8px; padding-left: 10px; } .dash-nav-group-label:first-child { margin-top: 0; } .dash-nav-item { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 10px; color: var(--paper-dim); font-size: 0.88rem; font-weight: 600; margin-bottom: 2px; } .dash-nav-item:hover { background: var(--dusk-light); color: var(--paper); } .dash-nav-item.active { background: rgba(255,77,109,0.12); color: var(--vibe-coral); } .dash-nav-icon { font-size: 1rem; width: 20px; text-align: center; flex-shrink: 0; } .dash-content-wrap { flex: 1; min-width: 0; display: flex; flex-direction: column; } .dash-topbar { display: flex; align-items: center; justify-content: space-between; padding: 16px 28px; border-bottom: 1px solid var(--border-subtle); position: sticky; top: 0; background: rgba(21, 15, 43, 0.9); backdrop-filter: blur(8px); z-index: 10; gap: 16px; } .dash-topbar-title { font-size: 1.2rem; margin: 0; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .dash-topbar-actions { display: flex; gap: 8px; flex-shrink: 0; } .dash-sidebar-toggle { display: none; flex-direction: column; justify-content: center; gap: 5px; width: 32px; height: 32px; background: transparent; border: none; cursor: pointer; padding: 0; flex-shrink: 0; } .dash-sidebar-toggle span { display: block; width: 20px; height: 2px; background: var(--paper); border-radius: 2px; } .dash-main { padding: 24px 28px; flex: 1; } @media (max-width: 960px) { .dash-sidebar-toggle { display: flex; } .dash-sidebar { position: fixed; top: 0; left: 0; height: 100vh; height: 100dvh; z-index: 50; transform: translateX(-100%); transition: transform 0.25s ease; width: 260px; } .dash-sidebar.dash-sidebar-open { transform: translateX(0); box-shadow: 0 0 40px rgba(0,0,0,0.5); } .dash-main { padding: 18px; } .dash-topbar { padding: 14px 18px; } .dash-topbar-title { font-size: 1.05rem; } .dash-mainsite-text { display: none; } .dash-mainsite-link { padding: 8px 10px !important; } } /* ---- Stat cards ---- */ .dash-breadcrumb { font-size: 0.78rem; color: var(--paper-dim); margin-bottom: 6px; } .dash-breadcrumb span { margin: 0 4px; opacity: 0.6; } .dash-page-heading { font-family: var(--font-display); font-weight: 800; font-size: 1.7rem; margin: 2px 0 0; color: var(--paper); } .stat-card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; margin-bottom: 20px; } .stat-card { background: var(--dusk); border-radius: 16px; padding: 18px 20px 14px; border: 1px solid var(--border-subtle); } .stat-card-label-top { font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--paper-dim); margin-bottom: 10px; } .stat-card-value-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; } .stat-card-value-row .stat-card-value { font-size: 1.55rem; font-weight: 800; color: var(--paper); } .stat-card.stat-card-hero .stat-card-value-row .stat-card-value, .stat-card.stat-card-hero .stat-card-label-top { color: #1a0e12; } .stat-card-sparkline { height: 30px; width: 76px; flex-shrink: 0; } .stat-card-divider { border-top: 1px solid var(--border-subtle); margin: 14px 0 10px; } .stat-card.stat-card-hero .stat-card-divider { border-top-color: rgba(26,14,18,0.15); } .stat-card-trend-row { display: flex; align-items: center; gap: 6px; font-size: 0.78rem; color: var(--paper-dim); } .stat-card.stat-card-hero .stat-card-trend-row { color: rgba(26,14,18,0.7); } .stat-card-trend-row .up { color: var(--signal-teal); font-weight: 700; } .stat-card-trend-row .down { color: var(--vibe-coral); font-weight: 700; } .stat-card.stat-card-hero .stat-card-trend-row .up, .stat-card.stat-card-hero .stat-card-trend-row .down { color: #1a0e12; } .pending-pill-row { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 28px; } .pending-pill { flex: 1; min-width: 130px; border-radius: 14px; padding: 14px 16px; color: #1a0e12; } .pending-pill-value { font-family: 'Anton', var(--font-display); font-size: 1.5rem; line-height: 1; } .pending-pill-label { font-size: 0.75rem; font-weight: 700; margin-top: 4px; opacity: 0.85; } .stat-card.stat-card-hero { background: linear-gradient(135deg, var(--vibe-coral), #ff8a9d); border-color: transparent; } /* ========================================================================== Data table — real table markup with column headers, matching the reference dashboards, used where content is genuinely tabular (users, transactions) instead of the simpler list-row pattern for feed-like lists ========================================================================== */ .data-table-wrap { overflow-x: auto; border-radius: 14px; border: 1px solid var(--border-medium); } .data-table { width: 100%; border-collapse: collapse; min-width: 560px; } .data-table thead th { text-align: left; padding: 12px 16px; font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--paper-dim); background: var(--dusk); border-bottom: 1px solid var(--border-medium); white-space: nowrap; } .data-table tbody td { padding: 12px 16px; border-bottom: 1px solid var(--border-subtle); font-size: 0.86rem; background: var(--dusk); } .data-table tbody tr:last-child td { border-bottom: none; } .data-table tbody tr:hover td { background: var(--dusk-light); } .status-badge { padding: 4px 11px; border-radius: 999px; font-size: 0.7rem; font-weight: 700; display: inline-block; white-space: nowrap; } .status-badge.active, .status-badge.success, .status-badge.valid { background: rgba(44,224,193,0.15); color: var(--signal-teal); } .status-badge.suspended, .status-badge.pending, .status-badge.waitlisted { background: rgba(255,182,39,0.15); color: var(--amber-glow); } .status-badge.banned, .status-badge.failed, .status-badge.cancelled { background: rgba(255,77,109,0.15); color: var(--vibe-coral); } .chart-card-primary-header { display: flex; justify-content: space-between; align-items: flex-start; flex-wrap: wrap; gap: 12px; margin-bottom: 8px; } .chart-card-primary-total { font-family: var(--font-display); font-weight: 800; font-size: 1.6rem; color: var(--paper); } .chart-toggle-row { display: flex; gap: 4px; background: var(--ink-night); border-radius: 10px; padding: 4px; } .chart-toggle-btn { border: none; background: transparent; color: var(--paper-dim); font-size: 0.8rem; font-weight: 700; padding: 6px 14px; border-radius: 7px; cursor: pointer; transition: background 0.15s var(--ease), color 0.15s var(--ease); } .chart-toggle-btn.active { background: var(--vibe-coral); color: #1a0e12; } /* ---- Chart cards ---- */ .chart-card { background: var(--dusk); border-radius: 16px; padding: 20px; border: 1px solid var(--border-subtle); margin-bottom: 24px; } .chart-card h3 { margin: 0 0 16px; font-size: 1rem; } .chart-container { position: relative; height: 260px; width: 100%; } .chart-grid { display: grid; grid-template-columns: 2fr 1fr; gap: 20px; } @media (max-width: 860px) { .chart-grid { grid-template-columns: 1fr; } } @media (max-width: 420px) { .lat-lng-row { flex-direction: column; } } /* Visible keyboard focus everywhere, not just form fields */ a:focus-visible, button:focus-visible, .filter-chip:focus-visible, .venue-card:focus-visible { outline: 2px solid var(--signal-teal); outline-offset: 2px; }