/* ============================================================ TorontoNightclubs.com — styles.css Mobile-first. Designed for ~390px iPhone widths and up. SECTIONS 1. Variables, reset, base 2. Layout helpers (container, section, grid, visually-hidden) 3. Typography 4. Buttons, pills, tags 5. Header / nav / hamburger 6. Mobile menu (off-canvas) 7. Hero + filter bar 8. Section heading + slider arrows 9. Sliders (horizontal, snap-scroll, no scrollbar) 10. Cards: club, event, tile (vibe), area, guide 11. Finder CTA card 12. Why-us list 13. FAQ accordion 14. Footer 15. Responsive (≥640, ≥900, ≥1100) 16. Print + reduced-motion + utilities ============================================================ */ /* ========== FONT LOADING ==================================== Inter loaded for the entire site — keeps typography consistent across the picker, venue pages, placeholder pages, and homepage. Pages that need optimal font-loading performance (LCP-critical) can ALSO add the explicit tags in their for preconnect priority. The @import here guarantees no page falls back to the browser default sans-serif. */ @import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap"); /* ========== 1. VARIABLES, RESET, BASE ====================== */ :root{ /* brand */ --accent:#F81851; --accent-dark:#D10E44; --accent-tint:#FFE7EE; /* charcoal — replaces accent for non-CTA UI on venue page */ --charcoal:#1A1A1A; --charcoal-soft:#2A2A2A; /* surfaces — light */ --bg:#ffffff; --bg-soft:#F7F7F7; --bg-card:#ffffff; /* surfaces — dark (for editorial / hero-style sections) Medium-warm charcoal, NOT pure black. Lifts the dark section out of "tech dark mode" into "premium editorial spread." */ --bg-dark:#2A2A2E; --bg-dark-card:#34343A; --border-dark:#3D3D43; /* lines */ --border:#EBEBEB; --border-strong:#DDDDDD; /* text */ --text:#1A1A1A; --text-muted:#6A6A6A; --text-faint:#9C9C9C; --text-on-dark:#F4F4F5; --text-muted-on-dark:#9C9CA3; /* shadows — kept very subtle for Airbnb-feel */ --shadow-sm: 0 1px 2px rgba(0,0,0,.04), 0 1px 3px rgba(0,0,0,.05); --shadow-md: 0 6px 16px rgba(0,0,0,.06), 0 2px 4px rgba(0,0,0,.04); --shadow-lg: 0 12px 28px rgba(0,0,0,.08), 0 4px 10px rgba(0,0,0,.05); /* radius */ --r-sm:8px; --r:12px; --r-md:16px; --r-lg:20px; --r-pill:999px; /* spacing */ --container:1240px; --pad-x:20px; /* type */ --font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; } *,*::before,*::after{ box-sizing:border-box; } html{ -webkit-text-size-adjust:100%; text-size-adjust:100%; scroll-behavior:smooth; } body{ margin:0; font-family:var(--font); font-size:16px; line-height:1.5; color:var(--text); background:var(--bg); -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; /* Inter optical features: contextual alternates, tabular nums for data */ font-feature-settings:"cv11","ss01","ss03"; font-optical-sizing:auto; /* Safety belt: prevent any descendant from making the page scroll horizontally. `clip` is preferred over `hidden` because it doesn't break position:sticky on inner elements (filter chips, sticky CTA). */ overflow-x:clip; } img{ max-width:100%; height:auto; display:block; } a{ color:inherit; text-decoration:none; } a:hover{ text-decoration:none; } button{ font:inherit; cursor:pointer; } ul{ margin:0; padding:0; list-style:none; } :focus-visible{ outline:2px solid var(--accent); outline-offset:2px; border-radius:6px; } /* ========== 2. LAYOUT HELPERS ============================== */ .container{ width:100%; max-width:var(--container); margin:0 auto; padding:0 var(--pad-x); } .container-narrow{ max-width:820px; } .section{ padding:48px 0; } .section-soft{ background:var(--bg-soft); } .grid{ display:grid; gap:14px; } .visually-hidden{ position:absolute !important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; } .skip-link{ position:absolute; left:-9999px; top:0; background:#000; color:#fff; padding:10px 14px; z-index:100; border-radius:0 0 8px 0; } .skip-link:focus{ left:0; } /* ========== 3. TYPOGRAPHY ================================== */ h1,h2,h3{ margin:0 0 .35em; line-height:1.18; letter-spacing:-0.01em; color:var(--text); } h1{ font-size:30px; font-weight:700; letter-spacing:-0.02em; } h2{ font-size:24px; font-weight:700; } h3{ font-size:17px; font-weight:600; } p{ margin:0 0 1em; } small{ font-size:13px; } .eyebrow{ display:inline-block; font-size:12px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--accent); margin-bottom:8px; } /* ========== 4. BUTTONS, PILLS, TAGS ======================== */ .btn{ display:inline-flex; align-items:center; justify-content:center; gap:8px; font-weight:600; font-size:15px; padding:12px 18px; min-height:44px; /* thumb-friendly */ border-radius:var(--r-pill); border:1px solid transparent; transition:transform .15s ease, background .15s ease, box-shadow .15s ease, color .15s ease; text-decoration:none; white-space:nowrap; } .btn-primary{ background:var(--accent); color:#fff; } .btn-primary:hover{ background:var(--accent-dark); } .btn-primary:active{ transform:translateY(1px); } .btn-ghost{ background:#fff; color:var(--text); border-color:var(--border-strong); } .btn-ghost:hover{ border-color:var(--text); } .btn-lg{ padding:14px 22px; min-height:50px; font-size:16px; } .btn-block{ display:flex; width:100%; } /* Top venue-type strip (Airbnb-style icon nav with 3D PNG icons) */ .top-cats{ display:flex; align-items:flex-end; justify-content:space-between; gap:6px; margin:6px calc(-1 * var(--pad-x)) 22px; padding:4px var(--pad-x) 8px; overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none; } .top-cats::-webkit-scrollbar{ display:none; } .top-cat{ flex:1 1 0; min-width:80px; display:flex; flex-direction:column; align-items:center; padding:6px 4px 8px; text-decoration:none; color:var(--text-muted); border-bottom:2px solid transparent; transition:color .15s ease, border-color .15s ease, transform .2s ease; scroll-snap-align:start; } .top-cat:hover, .top-cat:focus-visible{ color:var(--text); border-bottom-color:var(--text); } .top-cat:hover .top-cat-img img{ transform:translateY(-2px); } .top-cat-img{ width:72px; height:72px; display:flex; align-items:center; justify-content:center; margin-bottom:6px; } .top-cat-img img{ max-width:100%; max-height:100%; object-fit:contain; filter:drop-shadow(0 6px 10px rgba(0,0,0,.10)); transition:transform .2s ease; } .top-cat-label{ font-size:13px; font-weight:600; letter-spacing:.01em; white-space:nowrap; } /* Card tags */ .tag{ display:inline-block; font-size:12px; font-weight:600; padding:3px 9px; border-radius:var(--r-pill); background:var(--bg-soft); color:var(--text); margin-right:6px; } /* ========== 5. HEADER / NAV / HAMBURGER ==================== */ .site-header{ position:sticky; top:0; z-index:50; background:rgba(255,255,255,.94); backdrop-filter:saturate(180%) blur(10px); -webkit-backdrop-filter:saturate(180%) blur(10px); border-bottom:1px solid var(--border); } .header-inner{ display:flex; align-items:center; gap:14px; height:60px; } .logo{ display:inline-flex; align-items:center; flex:0 0 auto; } .logo img{ height:22px; width:auto; /* compact on mobile */ display:block; } .primary-nav{ display:none; } /* hidden on mobile */ .header-cta{ display:none; } /* hidden on mobile */ .hamburger{ margin-left:auto; width:44px; height:44px; background:transparent; border:0; padding:0; display:inline-flex; flex-direction:column; justify-content:center; align-items:center; gap:5px; border-radius:10px; } .hamburger span{ width:22px; height:2px; background:var(--text); border-radius:2px; transition:transform .2s ease, opacity .2s ease; } .hamburger[aria-expanded="true"] span:nth-child(1){ transform:translateY(7px) rotate(45deg); } .hamburger[aria-expanded="true"] span:nth-child(2){ opacity:0; } .hamburger[aria-expanded="true"] span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); } /* ========== 6. MOBILE MENU ================================= */ .mobile-menu{ position:fixed; inset:60px 0 0 0; background:#fff; z-index:49; padding:18px var(--pad-x) 28px; border-top:1px solid var(--border); overflow-y:auto; animation:menu-in .2s ease; } .mobile-menu[hidden]{ display:none; } .mobile-menu ul{ display:flex; flex-direction:column; } .mobile-menu li a{ display:block; padding:16px 4px; font-size:18px; font-weight:600; border-bottom:1px solid var(--border); } .mobile-menu .btn{ margin-top:18px; } @keyframes menu-in{ from{ opacity:0; transform:translateY(-6px);} to{ opacity:1; transform:none;} } /* ========== 7. HERO + FILTER BAR =========================== */ .hero{ padding:28px 0 36px; background: radial-gradient(800px 320px at 85% -20%, var(--accent-tint), transparent 60%), linear-gradient(#fff,#fff); } .hero h1{ max-width:18ch; } .hero-sub{ color:var(--text-muted); font-size:16px; max-width:48ch; margin-bottom:20px; } .hero-actions{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; margin-top:8px; } .hero-link{ font-weight:600; color:var(--text); border-bottom:1px solid var(--text); padding:2px 0; } .hero-link:hover{ color:var(--accent); border-color:var(--accent); } /* ========== 7b. CATEGORY BAR (Airbnb-style) =============== */ /* Horizontal browse strip with grey line icons + label. On mobile: scrolls horizontally with snap; arrows hidden. On desktop ≥900px: appears in one line, scrolls only if overflow. Swap an inline for an when 3D icons land. */ .category-bar-wrap{ background:#fff; border-top:1px solid var(--border); border-bottom:1px solid var(--border); } .category-bar{ display:flex; align-items:flex-end; gap:28px; overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none; margin:0 calc(-1 * var(--pad-x)); padding:14px var(--pad-x) 12px; } .category-bar::-webkit-scrollbar{ display:none; } .cat-item{ flex:0 0 auto; display:flex; flex-direction:column; align-items:center; gap:8px; padding:6px 2px 10px; color:var(--text-muted); text-decoration:none; border-bottom:2px solid transparent; transition:color .15s ease, border-color .15s ease, opacity .15s ease; opacity:.78; /* Airbnb-style faded grey by default */ min-width:62px; } .cat-item:hover, .cat-item:focus-visible{ color:var(--text); opacity:1; border-bottom-color:var(--text); } .cat-item.active{ color:var(--text); opacity:1; border-bottom-color:var(--text); } .cat-icon{ display:inline-flex; align-items:center; justify-content:center; width:26px; height:26px; } .cat-icon svg{ width:100%; height:100%; display:block; } .cat-label{ font-size:12px; font-weight:600; white-space:nowrap; letter-spacing:.01em; } .cat-divider{ flex:0 0 auto; width:1px; height:36px; background:var(--border); align-self:center; margin:0 4px; } /* ========== 8. SECTION HEAD + SLIDER ARROWS ================ */ .section-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:16px; margin-bottom:18px; } .section-head p{ color:var(--text-muted); margin:0; max-width:60ch; } .section-head-simple{ display:block; } .section-head-simple p{ margin-top:6px; } .slider-arrows{ display:none; gap:8px; flex-shrink:0; } .arrow{ width:38px; height:38px; border-radius:999px; background:#fff; border:1px solid var(--border-strong); color:var(--text); display:inline-flex; align-items:center; justify-content:center; transition:border-color .15s ease, box-shadow .15s ease, transform .1s ease; } .arrow:hover{ border-color:var(--text); box-shadow:var(--shadow-sm); } .arrow:active{ transform:scale(.96); } .arrow[disabled]{ opacity:.35; cursor:not-allowed; } /* ========== 9. SLIDERS ===================================== */ .slider{ display:grid; grid-auto-flow:column; grid-auto-columns: 75%; /* peek of next card on mobile */ gap:14px; overflow-x:auto; overscroll-behavior-x:contain; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch; padding:4px 4px 18px; margin:0 calc(-1 * var(--pad-x)); padding-left:var(--pad-x); padding-right:var(--pad-x); scrollbar-width:none; } .slider::-webkit-scrollbar{ display:none; } .slider > *{ scroll-snap-align:start; } .slider-wide{ grid-auto-columns: 82%; } /* event cards a touch wider */ .slider-square{ grid-auto-columns: 70%; } /* vibe tiles snug */ /* ========== 10. CARDS ====================================== */ /* Generic card link reset */ .card{ color:var(--text); } .card:hover h3{ color:var(--accent); } /* --- Club card (image + name + meta) --- */ .club-card{ display:flex; flex-direction:column; gap:10px; } .card-img{ position:relative; aspect-ratio: 4 / 5; border-radius:var(--r-md); overflow:hidden; background:linear-gradient(135deg, #ffe7ee 0%, #fff1f4 50%, #f4f4f4 100%); } .card-img img{ width:100%; height:100%; object-fit:cover; transition:transform .35s ease; } .card-img.card-img-wide{ aspect-ratio: 16 / 10; } .card:hover .card-img img{ transform:scale(1.03); } /* Image fallback: when img fails, parent gets .img-fallback + data-letter */ .card-img.img-fallback::before{ content: attr(data-letter); position:absolute; inset:0; display:grid; place-items:center; font-size:64px; font-weight:800; color:#fff; background:linear-gradient(135deg,#F81851 0%, #FF6B95 100%); letter-spacing:-0.04em; } .card-body{ padding:0 2px; } .card-body h3{ margin:0 0 4px; font-size:16px; } .card-meta{ margin:0 0 6px; color:var(--text-muted); font-size:14px; } .card-tags{ margin:0; } /* --- Event card --- */ .event-card .card-body h3{ font-size:17px; } /* --- Vibe tile (no image, big emoji) --- */ .tile{ display:flex; flex-direction:column; justify-content:space-between; aspect-ratio: 5 / 4; padding:18px; border-radius:var(--r-md); background:#fff; border:1px solid var(--border); color:var(--text); transition:border-color .15s ease, box-shadow .15s ease, transform .15s ease; } .tile:hover{ border-color:var(--text); box-shadow:var(--shadow-md); transform:translateY(-2px); } .tile-icon{ width:32px; height:32px; color:var(--text); display:inline-flex; align-items:center; justify-content:center; } .tile-icon svg{ width:100%; height:100%; } .tile h3{ font-size:17px; margin:0; } .tile-link{ font-size:14px; font-weight:600; color:var(--accent); } /* --- Area grid --- */ .grid-areas{ grid-template-columns: 1fr; gap:12px; } .area-card{ display:flex; flex-direction:column; justify-content:space-between; min-height:140px; padding:20px; border-radius:var(--r-md); background:#fff; border:1px solid var(--border); color:var(--text); transition:border-color .15s ease, box-shadow .15s ease, transform .15s ease; } .area-card:hover{ border-color:var(--text); box-shadow:var(--shadow-md); transform:translateY(-2px); } .area-card h3{ margin:0 0 4px; } .area-card p{ margin:0; color:var(--text-muted); font-size:14px; } .area-link{ margin-top:14px; font-size:14px; font-weight:600; color:var(--accent); } /* --- Guide cards --- */ .grid-guides{ grid-template-columns: 1fr; gap:12px; } .guide-card{ display:block; padding:22px; border-radius:var(--r-md); background:#fff; border:1px solid var(--border); color:var(--text); transition:border-color .15s ease, box-shadow .15s ease, transform .15s ease; } .guide-card:hover{ border-color:var(--text); box-shadow:var(--shadow-md); transform:translateY(-2px); } .guide-eyebrow{ display:inline-block; font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--accent); margin-bottom:8px; } .guide-card h3{ margin:0 0 6px; font-size:18px; } .guide-card p{ margin:0; color:var(--text-muted); font-size:14px; } /* ========== 11. FINDER CTA ================================= */ .finder-card{ display:grid; grid-template-columns: 1fr; gap:0; background:#fff; border:1px solid var(--border); border-radius:var(--r-lg); overflow:hidden; box-shadow:var(--shadow-sm); } .finder-text{ padding:28px 22px 24px; } .finder-text h2{ font-size:24px; margin:0 0 10px; } .finder-text p{ color:var(--text-muted); max-width:46ch; margin-bottom:18px; } .finder-illu{ background:linear-gradient(135deg, #FFD8E2 0%, #FFF1F4 100%); padding:18px; display:flex; align-items:center; justify-content:center; } .finder-illu svg{ width:100%; max-width:320px; height:auto; } /* ========== 12. WHY-US LIST ================================ */ .why-list{ display:grid; grid-template-columns:1fr; gap:14px; margin-top:8px; } .why-list li{ position:relative; padding:20px 20px 20px 64px; background:#fff; border:1px solid var(--border); border-radius:var(--r-md); } .why-num{ position:absolute; left:20px; top:20px; width:32px; height:32px; display:inline-flex; align-items:center; justify-content:center; border-radius:999px; background:var(--accent-tint); color:var(--accent); font-weight:700; font-size:13px; } .why-list h3{ margin:0 0 4px; font-size:16px; } .why-list p{ margin:0; color:var(--text-muted); font-size:14.5px; } /* ========== 13. FAQ ACCORDION ============================== */ .faq-list{ margin-top:14px; } .faq-item{ background:#fff; border:1px solid var(--border); border-radius:var(--r-md); margin-bottom:10px; overflow:hidden; } .faq-item summary{ list-style:none; cursor:pointer; padding:18px 18px; font-weight:600; font-size:16px; display:flex; justify-content:space-between; align-items:center; gap:12px; } .faq-item summary::-webkit-details-marker{ display:none; } .faq-icon{ flex:0 0 auto; width:22px; height:22px; position:relative; } .faq-icon::before, .faq-icon::after{ content:""; position:absolute; inset:0; margin:auto; background:var(--text); border-radius:2px; transition:transform .2s ease; } .faq-icon::before{ width:14px; height:2px; top:0; bottom:0; left:0; right:0; } .faq-icon::after{ width:2px; height:14px; top:0; bottom:0; left:0; right:0; } .faq-item[open] .faq-icon::after{ transform:rotate(90deg); opacity:0; } .faq-answer{ padding:0 18px 18px; color:var(--text-muted); font-size:15px; } .faq-answer a{ color:var(--text); border-bottom:1px solid var(--text); } .faq-answer a:hover{ color:var(--accent); border-color:var(--accent); } /* ========== 14. FOOTER ===================================== */ .site-footer{ background:#fff; border-top:1px solid var(--border); padding:40px 0 24px; margin-top:24px; } .footer-grid{ display:grid; grid-template-columns:1fr; gap:28px; } .footer-brand .logo img{ height:22px; } .footer-tag{ margin-top:12px; color:var(--text-muted); font-size:14px; max-width:42ch; } .footer-col h3{ font-size:13px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; margin:0 0 12px; color:var(--text); } .footer-col li{ margin-bottom:10px; } .footer-col a{ color:var(--text-muted); font-size:14.5px; } .footer-col a:hover{ color:var(--accent); } .footer-bottom{ border-top:1px solid var(--border); margin-top:28px; padding-top:18px; color:var(--text-faint); font-size:13px; } /* ========== 15. RESPONSIVE ================================= */ /* ≥ 640px: small tablets */ @media (min-width:640px){ .hero{ padding:44px 0 52px; } h1{ font-size:38px; } h2{ font-size:28px; } .top-cat{ min-width:110px; } .top-cat-img{ width:96px; height:96px; } .top-cat-label{ font-size:14px; } .slider{ grid-auto-columns: 44%; } .slider-wide{ grid-auto-columns: 60%; } .slider-square{ grid-auto-columns: 36%; } .grid-areas{ grid-template-columns:1fr 1fr; } .grid-guides{ grid-template-columns:1fr 1fr; } .why-list{ grid-template-columns:1fr 1fr; } .finder-card{ grid-template-columns: 1.2fr 1fr; } .finder-text{ padding:36px 32px; } .finder-text h2{ font-size:28px; } } /* ≥ 900px: desktop nav appears */ @media (min-width:900px){ :root{ --pad-x:32px; } .header-inner{ height:72px; gap:24px; } .logo img{ height:26px; } .primary-nav{ display:flex; flex:1; justify-content:center; } .primary-nav ul{ display:flex; gap:6px; } .primary-nav a{ display:inline-block; padding:10px 14px; border-radius:var(--r-pill); font-size:15px; font-weight:500; transition:background .15s ease; } .primary-nav a:hover{ background:var(--bg-soft); } .header-cta{ display:inline-flex; } .hamburger{ display:none; } .hero{ padding:56px 0 64px; } h1{ font-size:46px; } h2{ font-size:32px; } .top-cats{ justify-content:flex-start; gap:48px; margin:14px 0 32px; padding:0; } .top-cat{ flex:0 0 auto; min-width:120px; padding-bottom:12px; } .top-cat-img{ width:108px; height:108px; } .section{ padding:64px 0; } .section-head p{ font-size:15.5px; } /* Category bar on desktop */ .category-bar{ gap:36px; padding:18px var(--pad-x) 14px; justify-content:flex-start; } .cat-icon{ width:28px; height:28px; } .cat-label{ font-size:12.5px; } .slider-arrows{ display:flex; } .slider{ grid-auto-columns: 23.5%; gap:18px; } .slider-wide{ grid-auto-columns: 32%; } .slider-square{ grid-auto-columns: 18%; } .grid-areas{ grid-template-columns:1fr 1fr 1fr 1fr; gap:16px; } .grid-areas .area-card-wide{ grid-column: span 2; } .grid-guides{ grid-template-columns:repeat(4,1fr); gap:16px; } .why-list{ grid-template-columns:repeat(3,1fr); } .why-list li:last-child{ grid-column: span 1; } .finder-card{ grid-template-columns: 1.1fr 1fr; } .finder-text{ padding:48px 44px; } .finder-text h2{ font-size:32px; } .finder-illu{ padding:36px; } .footer-grid{ grid-template-columns: 1.6fr 1fr 1fr 1fr 1fr; gap:36px; } } /* ≥ 1100px */ @media (min-width:1100px){ .hero h1{ font-size:54px; } .why-list{ grid-template-columns:repeat(5,1fr); } } /* ========== 16. UTILITIES & A11Y =========================== */ @media (prefers-reduced-motion: reduce){ *{ animation:none !important; transition:none !important; } html{ scroll-behavior:auto; } } @media print{ .site-header, .mobile-menu, .slider-arrows, .hero-actions, .hamburger{ display:none !important; } body{ background:#fff; } } /* ============================================================ ARTICLE PAGE — /best-clubs-in-toronto/ Mobile-first. Reuses homepage tokens (--accent, --text, etc.) Sections in order: A. Breadcrumb B. Article hero (heading, intro, meta, hero image) C. Quick answer box (top-10 picks) D. Sticky filter chips E. Venue list — image, head, meta rows, description, CTA F. Comparison table (responsive: stacked rows on mobile) G. How-to-choose list H. More-Toronto-nightlife internal-links grid ============================================================ */ /* ---------- A. Breadcrumb -------------------------- */ .breadcrumb{ font-size:13px; color:var(--text-muted); margin-bottom:16px; } .breadcrumb ol{ display:flex; flex-wrap:wrap; gap:6px; padding:0; margin:0; list-style:none; } .breadcrumb li:not(:last-child)::after{ content:"/"; margin-left:6px; color:var(--text-faint); } .breadcrumb a{ color:var(--text-muted); text-decoration:underline; text-decoration-color:var(--border-strong); text-underline-offset:3px; } .breadcrumb a:hover{ color:var(--text); } .breadcrumb [aria-current="page"]{ color:var(--text); font-weight:600; } /* ---------- B. Article hero ------------------------- */ .article-hero{ padding:18px 0 24px; } .article-hero h1{ font-size:30px; font-weight:800; letter-spacing:-0.02em; margin:0 0 14px; max-width:22ch; } .article-intro{ color:var(--text); font-size:16.5px; line-height:1.55; max-width:60ch; margin:0 0 14px; } .article-meta{ display:inline-flex; align-items:center; gap:6px; font-size:13px; color:var(--text-muted); margin:0 0 18px; } .article-meta svg{ flex:0 0 auto; } .article-hero-image{ position:relative; margin:0 calc(-1 * var(--pad-x)); aspect-ratio: 16 / 10; overflow:hidden; background:linear-gradient(135deg,#ffe7ee 0%,#fff1f4 50%,#f4f4f4 100%); } .article-hero-image img{ width:100%; height:100%; object-fit:cover; } .article-hero-image.img-fallback::before{ content: attr(data-letter); position:absolute; inset:0; display:grid; place-items:center; font-size:120px; font-weight:800; color:#fff; background:linear-gradient(135deg,#F81851 0%,#FF6B95 100%); } /* ---------- C. Quick answer box --------------------- */ .quick-answer{ padding:24px 0 8px; } .quick-answer h2{ font-size:22px; margin:0 0 4px; } .quick-sub{ color:var(--text-muted); font-size:14.5px; margin:0 0 16px; } .quick-picks{ display:grid; grid-template-columns:1fr; gap:8px; padding:0; margin:0; list-style:none; } .quick-picks a{ display:flex; align-items:baseline; justify-content:space-between; gap:12px; background:#fff; border:1px solid var(--border); border-radius:var(--r-md); padding:12px 14px; color:var(--text); text-decoration:none; transition:border-color .15s ease, box-shadow .15s ease; } .quick-picks a:hover{ border-color:var(--text); box-shadow:var(--shadow-sm); } .qp-label{ font-size:12px; font-weight:600; letter-spacing:.04em; text-transform:uppercase; color:var(--text-muted); flex:1 1 auto; } .qp-name{ font-weight:700; font-size:15px; color:var(--text); flex:0 0 auto; } /* ---------- D. Sticky filter chips ------------------ */ .filter-chips-wrap{ position:sticky; top:60px; /* sits below the 60px mobile header */ z-index:30; background:rgba(255,255,255,.94); backdrop-filter:saturate(180%) blur(10px); -webkit-backdrop-filter:saturate(180%) blur(10px); border-top:1px solid var(--border); border-bottom:1px solid var(--border); margin-top:8px; } .filter-chips{ display:flex; gap:8px; overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none; margin:0 calc(-1 * var(--pad-x)); padding:10px var(--pad-x); } .filter-chips::-webkit-scrollbar{ display:none; } .chip{ flex:0 0 auto; padding:8px 14px; min-height:36px; font:600 13px/1 var(--font); border-radius:var(--r-pill); border:1px solid var(--border-strong); background:#fff; color:var(--text); cursor:pointer; transition:background .15s ease, color .15s ease, border-color .15s ease; white-space:nowrap; } .chip:hover{ border-color:var(--text); } .chip.is-active{ background:var(--text); color:#fff; border-color:var(--text); } /* ---------- E. Venue list -------------------------- */ .venue-list{ padding:24px 0 16px; } .venue{ background:#fff; border-bottom:1px solid var(--border); padding:24px 0 28px; scroll-margin-top:120px; /* offset for sticky header + chips */ } .venue:first-child{ padding-top:8px; } .venue:last-of-type{ border-bottom:0; } .venue[hidden]{ display:none; } .venue-img{ position:relative; aspect-ratio: 16 / 10; border-radius:var(--r-md); overflow:hidden; background:linear-gradient(135deg,#ffe7ee 0%,#fff1f4 50%,#f4f4f4 100%); margin-bottom:14px; } .venue-img img{ width:100%; height:100%; object-fit:cover; } .venue-img.img-fallback::before{ content: attr(data-letter); position:absolute; inset:0; display:grid; place-items:center; font-size:96px; font-weight:800; color:#fff; background:linear-gradient(135deg,#F81851 0%,#FF6B95 100%); } .venue-head{ display:flex; align-items:flex-start; gap:14px; margin-bottom:8px; } .venue-rank{ flex:0 0 auto; font-size:30px; font-weight:800; line-height:1; letter-spacing:-0.04em; color:var(--accent); font-variant-numeric: tabular-nums; min-width:42px; } .venue-head h2{ font-size:22px; margin:0 0 2px; line-height:1.15; } .venue-area{ display:inline-flex; align-items:center; gap:5px; font-size:13.5px; color:var(--text-muted); margin:0; } .venue-area svg{ color:var(--text-muted); flex:0 0 auto; } .venue-verdict{ font-size:15px; font-weight:600; color:var(--text); margin:6px 0 14px; padding-left:12px; border-left:3px solid var(--accent); } .venue-meta{ display:grid; grid-template-columns:1fr; gap:6px; list-style:none; margin:0 0 14px; padding:0; } .venue-meta li{ display:flex; align-items:flex-start; gap:8px; font-size:13.5px; color:var(--text); padding:2px 0; } .venue-meta b{ font-weight:600; color:var(--text-muted); margin-right:2px; } .venue-meta .i{ color:var(--text-muted); flex:0 0 auto; margin-top:3px; } .venue-desc{ font-size:15px; line-height:1.6; color:var(--text); margin:0 0 18px; } .venue-cta{ display:flex; gap:10px; flex-wrap:wrap; } .venue-cta .btn{ flex:1 1 auto; padding:11px 16px; min-height:44px; font-size:14.5px; } .venue-empty{ text-align:center; color:var(--text-muted); padding:24px 0; } /* ---------- F. Comparison table -------------------- */ .compare-table{ margin-top:8px; } .compare-table table{ width:100%; border-collapse:collapse; background:#fff; border:1px solid var(--border); border-radius:var(--r-md); overflow:hidden; } .compare-table th, .compare-table td{ padding:12px 14px; text-align:left; font-size:14px; border-bottom:1px solid var(--border); } .compare-table th{ font-weight:700; background:#fff; font-size:12.5px; text-transform:uppercase; letter-spacing:.04em; color:var(--text-muted); } .compare-table tr:last-child td{ border-bottom:0; } .compare-table td a{ color:var(--text); font-weight:600; text-decoration:underline; text-decoration-color:var(--border-strong); text-underline-offset:3px; } .compare-table td a:hover{ color:var(--accent); text-decoration-color:var(--accent); } /* Mobile (≤700): stack each row as a card */ @media (max-width:700px){ .compare-table table, .compare-table thead, .compare-table tbody, .compare-table tr, .compare-table th, .compare-table td{ display:block; } .compare-table thead{ position:absolute; left:-9999px; top:auto; width:1px; height:1px; overflow:hidden; } .compare-table table{ background:transparent; border:0; } .compare-table tr{ background:#fff; border:1px solid var(--border); border-radius:var(--r-md); padding:12px 14px; margin-bottom:10px; } .compare-table td{ border-bottom:0; padding:3px 0; display:flex; gap:10px; font-size:14px; } .compare-table td::before{ content: attr(data-label); font-size:12px; font-weight:600; color:var(--text-muted); flex:0 0 88px; letter-spacing:.02em; text-transform:uppercase; line-height:1.55; } .compare-table td:first-child{ margin-bottom:6px; padding-bottom:8px; border-bottom:1px solid var(--border); flex-direction:column; } .compare-table td:first-child::before{ display:none; } .compare-table td:first-child a{ font-size:16px; font-weight:700; } } /* ---------- G. How to choose ----------------------- */ .choose-list{ display:grid; grid-template-columns:1fr; gap:14px; list-style:none; margin:8px 0 0; padding:0; } .choose-list li{ background:#fff; border:1px solid var(--border); border-radius:var(--r-md); padding:18px 18px; } .choose-list h3{ font-size:16px; font-weight:700; margin:0 0 6px; } .choose-list p{ font-size:14.5px; color:var(--text); margin:0; line-height:1.55; } .choose-list a{ color:var(--text); font-weight:600; text-decoration:underline; text-decoration-color:var(--border-strong); text-underline-offset:3px; } .choose-list a:hover{ color:var(--accent); text-decoration-color:var(--accent); } /* ---------- H. More nightlife grid ----------------- */ .more-grid{ display:grid; grid-template-columns:1fr; gap:10px; margin-top:8px; } .more-link{ display:flex; align-items:center; justify-content:space-between; gap:14px; background:#fff; border:1px solid var(--border); border-radius:var(--r-md); padding:16px 18px; color:var(--text); font-weight:600; font-size:15px; text-decoration:none; transition:border-color .15s ease, box-shadow .15s ease, transform .15s ease; } .more-link:hover{ border-color:var(--text); box-shadow:var(--shadow-sm); transform:translateY(-1px); } .more-link .arrow{ color:var(--accent); font-weight:700; flex:0 0 auto; } /* ---------- Tablet & desktop overrides ------------- */ @media (min-width:640px){ .article-hero h1{ font-size:38px; } .article-intro{ font-size:17px; } .article-hero-image{ aspect-ratio: 21 / 9; border-radius:var(--r-lg); margin:0; } .quick-picks{ grid-template-columns:1fr 1fr; gap:10px; } /* venue: side-by-side image + content */ .venue{ display:grid; grid-template-columns: 320px 1fr; gap:28px; align-items:start; } .venue-img{ margin-bottom:0; aspect-ratio: 4 / 5; } .venue-meta{ grid-template-columns:1fr 1fr; gap:8px 18px; } .venue-cta .btn{ flex:0 0 auto; } .choose-list{ grid-template-columns:1fr 1fr; } .more-grid{ grid-template-columns:1fr 1fr; } } @media (min-width:900px){ .article-hero{ padding:32px 0 36px; } .article-hero h1{ font-size:48px; } .article-intro{ font-size:18px; max-width:65ch; } .quick-answer h2{ font-size:28px; } .quick-picks{ grid-template-columns:repeat(2,1fr); } .filter-chips-wrap{ top:72px; } /* desktop header is 72px tall */ .venue-list{ padding:40px 0 24px; } .venue{ grid-template-columns: 380px 1fr; gap:36px; padding:32px 0 40px; } .venue-rank{ font-size:36px; min-width:54px; } .venue-head h2{ font-size:26px; } .more-grid{ grid-template-columns:repeat(3,1fr); } } /* ============================================================ VENUE PAGE — /clubs// Premium nightclub listing template (Airbnb + OpenTable hybrid). Mobile-first. Reuses homepage tokens (--accent, --text, etc.) Sections in order: V1. Venue hero (full-bleed image w/ name overlay) V2. Quick-row icon detail strip V3. Main grid (left: editorial content / right: sticky booking card) V4. Booking card (form, toggle pills, date picker quick-picks) V5. Vibe cards (music / crowd / dress / nights) V6. Photo gallery (Airbnb-style 5-image collage) V7. Map / location V8. Similar clubs (reuses .club-card from homepage) V9. Venue FAQ V10. Confirmation pages (/guestlist-confirmed, /guestlist-unavailable) ============================================================ */ /* ---------- V1. Venue hero ------------------------- */ .venue-hero{ position:relative; margin-bottom:0; } .venue-hero-img{ position:relative; aspect-ratio: 4 / 3; overflow:hidden; background:linear-gradient(135deg,#2a2a2a 0%,#1a1a1a 100%); } .venue-hero-img img{ width:100%; height:100%; object-fit:cover; display:block; } .venue-hero-img::after{ content:""; position:absolute; inset:0; background: linear-gradient(to top, rgba(0,0,0,.65) 0%, rgba(0,0,0,.20) 40%, rgba(0,0,0,.05) 70%, transparent 100%); pointer-events:none; } .venue-hero-img.img-fallback::before{ content: attr(data-letter); position:absolute; inset:0; display:grid; place-items:center; font-size:140px; font-weight:800; color:#fff; background:linear-gradient(135deg,#F81851 0%,#FF6B95 100%); z-index:0; } .venue-hero-meta{ position:absolute; left:0; right:0; bottom:0; z-index:2; padding:0 var(--pad-x) 22px; color:#fff; } .venue-hero-meta .breadcrumb{ margin:0 0 10px; color:rgba(255,255,255,.78); } .venue-hero-meta .breadcrumb a{ color:rgba(255,255,255,.85); text-decoration-color:rgba(255,255,255,.4); } .venue-hero-meta .breadcrumb a:hover{ color:#fff; } .venue-hero-meta .breadcrumb [aria-current="page"]{ color:#fff; } .venue-hero-meta .breadcrumb li:not(:last-child)::after{ color:rgba(255,255,255,.55); } .venue-hero-meta h1{ margin:0 0 6px; font-size:30px; font-weight:800; letter-spacing:-0.02em; color:#fff; text-shadow:0 2px 18px rgba(0,0,0,.35); } .venue-sub{ display:inline-flex; align-items:center; gap:6px; margin:0; font-size:14.5px; font-weight:500; color:rgba(255,255,255,.92); text-shadow:0 1px 8px rgba(0,0,0,.35); } .venue-sub svg{ flex:0 0 auto; } /* ---------- V2. Quick-row icon strip --------------- */ .venue-quick-row{ background:#fff; border-bottom:1px solid var(--border); padding:14px 0; } .qr{ display:flex; gap:14px; overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none; margin:0 calc(-1 * var(--pad-x)); padding:0 var(--pad-x); } .qr::-webkit-scrollbar{ display:none; } .qr-item{ flex:0 0 auto; display:inline-flex; align-items:center; gap:6px; font-size:13px; font-weight:500; color:var(--text); white-space:nowrap; padding:6px 0; } .qr-item svg{ color:var(--text-muted); flex:0 0 auto; } .qr-item + .qr-item{ position:relative; padding-left:14px; } .qr-item + .qr-item::before{ content:""; position:absolute; left:0; top:50%; width:3px; height:3px; background:var(--text-faint); border-radius:50%; transform:translateY(-50%); } /* ---------- V3. Main grid -------------------------- */ .venue-main{ padding:24px 0 16px; } .venue-grid{ display:grid; grid-template-columns: 1fr; gap:24px; } /* HTML order: aside FIRST so it sits at top on mobile. Desktop reorders into 2-column row below. */ .booking-aside{ order:1; } .venue-content{ order:2; } /* ---------- V4. Booking card ----------------------- */ .booking-card{ background:#fff; border:1px solid var(--border); border-radius:var(--r-md); padding:18px 18px 20px; box-shadow:var(--shadow-md); } .booking-card h2{ font-size:20px; margin:0 0 4px; } .booking-card .booking-sub{ font-size:13.5px; color:var(--text-muted); margin:0 0 16px; } /* Toggle pills (Guestlist / Bottle Service) */ .svc-toggle{ display:flex; gap:6px; background:var(--bg-soft); border-radius:var(--r-pill); padding:4px; margin-bottom:16px; } .svc-toggle button{ flex:1 1 0; padding:9px 12px; min-height:40px; background:transparent; border:0; font:600 13.5px/1 var(--font); color:var(--text-muted); border-radius:var(--r-pill); cursor:pointer; transition:background .15s ease, color .15s ease; } .svc-toggle button.is-active{ background:#fff; color:var(--text); box-shadow:var(--shadow-sm); } /* Form rows */ .form-row{ margin-bottom:14px; } .form-row.cols-2{ display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-bottom:14px; } .form-row.cols-2 > *{ margin-bottom:0; } .form-label{ display:block; font-size:12.5px; font-weight:600; color:var(--text-muted); margin:0 0 5px; letter-spacing:.02em; } .form-input, .form-select{ width:100%; min-height:46px; padding:10px 14px; font:500 15px/1.3 var(--font); color:var(--text); background:#fff; border:1px solid var(--border-strong); border-radius:12px; transition:border-color .15s ease, box-shadow .15s ease; appearance:none; -webkit-appearance:none; } .form-input:focus, .form-select:focus{ outline:none; border-color:var(--text); box-shadow:0 0 0 3px rgba(0,0,0,.05); } .form-input::placeholder{ color:var(--text-faint); } .form-select{ background-image: url("data:image/svg+xml;utf8,"); background-repeat:no-repeat; background-position:right 14px center; padding-right:38px; } .form-hint{ font-size:12.5px; color:var(--text-muted); margin:6px 0 0; } .form-error{ display:none; font-size:13px; color:#C0223D; margin:6px 0 0; } .form-row.has-error .form-input, .form-row.has-error .form-select{ border-color:#C0223D; } .form-row.has-error .form-error{ display:block; } /* Quick-pick date pills */ .date-quickpicks{ display:flex; gap:6px; overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none; padding:2px 0 8px; margin:0 -4px; scroll-padding-left:4px; } .date-quickpicks::-webkit-scrollbar{ display:none; } .date-pick{ flex:0 0 auto; display:flex; flex-direction:column; align-items:center; justify-content:center; min-width:62px; min-height:56px; padding:6px 8px; background:#fff; border:1px solid var(--border-strong); border-radius:12px; cursor:pointer; transition:border-color .15s ease, background .15s ease, color .15s ease; font-family:var(--font); } .date-pick:hover{ border-color:var(--text); } .date-pick.is-active{ background:var(--text); color:#fff; border-color:var(--text); } .date-pick-day{ font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:.04em; color:inherit; opacity:.75; } .date-pick-num{ font-size:18px; font-weight:700; line-height:1.1; margin-top:2px; } .date-pick-mo{ font-size:10.5px; font-weight:600; color:inherit; opacity:.7; margin-top:2px; text-transform:uppercase; letter-spacing:.03em; } /* Bottle-service-only minimum-spend field */ .bottle-only{ display:none; } .svc-bottle .bottle-only{ display:block; } /* Submit */ .form-submit{ width:100%; margin-top:6px; font-size:15px; font-weight:700; } .form-trust{ margin:10px 0 0; font-size:12px; color:var(--text-muted); text-align:center; } .form-trust svg{ vertical-align:-2px; margin-right:3px; color:var(--text-muted); } /* ---------- Editorial content sections ------------- */ .venue-section{ margin-bottom:28px; } .venue-section h2{ font-size:22px; margin:0 0 6px; } .venue-section p{ font-size:15.5px; line-height:1.6; color:var(--text); margin:0 0 12px; } /* ---------- V5. Vibe cards ------------------------- */ .vibe-cards{ display:grid; grid-template-columns: 1fr 1fr; gap:10px; margin-top:12px; } .vibe-card{ background:#fff; border:1px solid var(--border); border-radius:var(--r-md); padding:14px 14px 16px; } .vibe-card .vc-icon{ width:32px; height:32px; display:flex; align-items:center; justify-content:center; background:var(--bg-soft); border-radius:8px; color:var(--text); margin-bottom:8px; } .vibe-card h3{ font-size:13px; font-weight:600; text-transform:uppercase; letter-spacing:.04em; color:var(--text-muted); margin:0 0 4px; } .vibe-card p{ margin:0; font-size:14.5px; font-weight:600; color:var(--text); line-height:1.4; } /* ---------- V6. Photo gallery ---------------------- */ .gallery{ display:grid; grid-template-columns: 1fr; grid-template-rows: 220px; gap:6px; border-radius:var(--r-md); overflow:hidden; margin-top:12px; } .gallery-cell{ position:relative; background:linear-gradient(135deg,#ffe7ee 0%,#fff1f4 50%,#f4f4f4 100%); overflow:hidden; cursor:pointer; } .gallery-cell img{ width:100%; height:100%; object-fit:cover; display:block; } .gallery-cell:not(:first-child){ display:none; } .gallery-cell.img-fallback::before{ content: attr(data-letter); position:absolute; inset:0; display:grid; place-items:center; font-size:64px; font-weight:800; color:#fff; background:linear-gradient(135deg,#F81851 0%,#FF6B95 100%); } .gallery-more{ position:absolute; right:14px; bottom:14px; background:rgba(255,255,255,.94); color:var(--text); border:0; border-radius:var(--r-pill); padding:8px 14px; font:600 13px/1 var(--font); cursor:pointer; box-shadow:var(--shadow-sm); } /* ---------- V7. Map -------------------------------- */ .map-wrap{ margin-top:12px; border-radius:var(--r-md); overflow:hidden; border:1px solid var(--border); background:var(--bg-soft); } .map-wrap iframe{ display:block; width:100%; height:280px; border:0; } .address-line{ display:flex; align-items:flex-start; gap:8px; margin:14px 0 0; padding:0; font-size:14.5px; color:var(--text); } .address-line svg{ color:var(--text-muted); flex:0 0 auto; margin-top:2px; } .address-line a{ color:var(--text); text-decoration:underline; text-decoration-color:var(--border-strong); } .address-line a:hover{ color:var(--accent); text-decoration-color:var(--accent); } /* ---------- V8. Similar clubs ---------------------- */ /* Reuses .club-card from homepage. Section header below. */ .similar-clubs-grid{ display:grid; grid-template-columns: 1fr 1fr; gap:14px; margin-top:14px; } /* ---------- V10. Confirmation pages ---------------- */ .confirm-page{ padding:48px 0 64px; } .confirm-card{ max-width:620px; margin:0 auto; background:#fff; border:1px solid var(--border); border-radius:var(--r-md); padding:36px 28px; text-align:center; box-shadow:var(--shadow-sm); } .confirm-icon{ width:72px; height:72px; display:flex; align-items:center; justify-content:center; margin:0 auto 18px; border-radius:50%; background:linear-gradient(135deg,#F81851 0%,#FF6B95 100%); color:#fff; } .confirm-icon.is-warn{ background:#FFF4E5; color:#B45309; border:1px solid #FFE0B3; } .confirm-card h1{ font-size:26px; margin:0 0 8px; } .confirm-card p{ font-size:16px; line-height:1.55; color:var(--text); margin:0 0 18px; max-width:48ch; margin-left:auto; margin-right:auto; } .confirm-actions{ display:flex; gap:10px; flex-wrap:wrap; justify-content:center; margin-top:6px; } .confirm-actions .btn{ flex:1 1 200px; min-height:48px; } /* ---------- Tablet & desktop ----------------------- */ @media (min-width:640px){ .venue-hero-img{ aspect-ratio: 16 / 9; } .venue-hero-meta h1{ font-size:38px; } .vibe-cards{ grid-template-columns: repeat(4, 1fr); } /* Airbnb-style 5-image gallery: 1 large left, 4 small right */ .gallery{ grid-template-columns: 2fr 1fr 1fr; grid-template-rows: 180px 180px; gap:6px; } .gallery-cell:nth-child(1){ grid-row: 1 / 3; grid-column: 1 / 2; display:block; } .gallery-cell:nth-child(2){ grid-row: 1 / 2; grid-column: 2 / 3; display:block; } .gallery-cell:nth-child(3){ grid-row: 1 / 2; grid-column: 3 / 4; display:block; } .gallery-cell:nth-child(4){ grid-row: 2 / 3; grid-column: 2 / 3; display:block; } .gallery-cell:nth-child(5){ grid-row: 2 / 3; grid-column: 3 / 4; display:block; } .similar-clubs-grid{ grid-template-columns:repeat(3, 1fr); } .map-wrap iframe{ height:340px; } } @media (min-width:1000px){ .venue-hero-img{ aspect-ratio: 21 / 9; max-height:520px; } .venue-hero-meta{ padding-bottom:28px; } .venue-hero-meta h1{ font-size:46px; } .venue-grid{ grid-template-columns: 1fr 380px; gap:48px; align-items:start; } .venue-content{ grid-column:1; grid-row:1; order:1; } .booking-aside{ grid-column:2; grid-row:1; order:2; position:sticky; top:92px; align-self:start; } .gallery{ grid-template-rows: 220px 220px; } .similar-clubs-grid{ grid-template-columns: repeat(3, 1fr); } } /* ============================================================ Tablet & desktop overrides for venue + confirmation pages ============================================================ */ @media (min-width:640px){ .venue-hero-img{ aspect-ratio: 21 / 9; } .venue-hero-text{ padding-bottom:36px; } .venue-hero-text h1{ font-size:48px; } .venue-sub{ font-size:16px; } .quick-row{ grid-template-columns: repeat(3, 1fr); gap:18px 22px; } .form-grid{ grid-template-columns:1fr 1fr; gap:14px 16px; } .vibe-grid{ grid-template-columns:1fr 1fr; gap:14px; } .gallery{ grid-template-columns: 2fr 1fr 1fr; grid-auto-rows: 180px; } .gal-1{ grid-column: 1 / 2; grid-row: 1 / 3; } .map-wrap iframe{ height:380px; } .similar-grid{ grid-template-columns:1fr 1fr; gap:14px; } .confirm-actions{ flex-direction:row; justify-content:center; max-width:none; } .confirm-actions .btn{ flex:0 0 auto; } .confirm-card{ padding:48px 40px; } .confirm-card h1{ font-size:30px; } .sticky-book-bar{ display:none; } /* hide sticky bar on tablet+ */ } @media (min-width:900px){ .venue-hero-img{ aspect-ratio: 21 / 9; max-height:560px; } .venue-hero-text{ padding-bottom:44px; } .venue-hero-text h1{ font-size:56px; } .quick-row{ grid-template-columns: repeat(6, 1fr); gap:0 24px; } .booking-card{ padding:32px 32px; } .booking-head h2{ font-size:24px; } .vibe-grid{ grid-template-columns:repeat(4, 1fr); } .gallery{ grid-auto-rows: 220px; gap:10px; } .similar-grid{ grid-template-columns:repeat(4, 1fr); } .similar-card{ flex-direction:column; align-items:stretch; padding:0; } .sc-img, .sc-img-wide{ flex:0 0 auto; width:100%; height:auto; aspect-ratio: 4 / 3; border-radius:0; } .similar-card .sc-body{ padding:14px 16px 18px; } .similar-grid-events .similar-card{ flex-direction:column; } .similar-grid-events .sc-img-wide{ aspect-ratio: 16 / 10; } .confirm-section{ padding:80px 0 56px; } .confirm-card{ padding:56px 56px; } .confirm-card h1{ font-size:34px; } } /* ============================================================ VENUE BOOKING-CARD CSS — matches the venue.js interface (svc-toggle, svc-btn, form-row, form-label, date-picks, date-pick, bottle-only, gallery, gallery-cell) These add to the existing .booking-card / .booking-card-wrap shells already defined above. ============================================================ */ /* Service-type toggle */ .svc-toggle{ display:grid; grid-template-columns:1fr 1fr; background:var(--bg-soft); border:1px solid var(--border); border-radius:var(--r-pill); padding:4px; margin-bottom:14px; } .svc-btn{ background:transparent; border:0; padding:9px 14px; min-height:38px; font:600 13.5px/1 var(--font); color:var(--text-muted); border-radius:var(--r-pill); cursor:pointer; transition:background .15s ease, color .15s ease, box-shadow .15s ease; } .svc-btn.is-active{ background:#fff; color:var(--text); box-shadow:var(--shadow-sm); } /* Form rows */ .form-row{ margin-bottom:12px; } .form-row-2{ display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-bottom:12px; } .form-row-2 .form-label{ margin-bottom:0; } .form-label{ display:block; font-size:12px; font-weight:600; letter-spacing:.04em; text-transform:uppercase; color:var(--text-muted); margin-bottom:5px; } .form-hint{ text-transform:none; letter-spacing:0; font-weight:500; color:var(--text-faint); margin-left:6px; font-size:11.5px; } .form-row input[type="text"], .form-row input[type="tel"], .form-row input[type="email"], .form-row input[type="date"], .form-row select{ width:100%; margin-top:5px; padding:11px 12px; min-height:44px; font:400 15px/1.3 var(--font); color:var(--text); background:#fff; border:1px solid var(--border-strong); border-radius:var(--r-md); -webkit-appearance:none; appearance:none; transition:border-color .15s ease, box-shadow .15s ease; } .form-row select{ background-image: url("data:image/svg+xml;utf8,"); background-repeat:no-repeat; background-position:right 12px center; padding-right:34px; } .form-row input:focus, .form-row select:focus{ outline:none; border-color:var(--text); box-shadow:0 0 0 3px rgba(0,0,0,.08); } .form-row.has-error input, .form-row.has-error select{ border-color:#D10E44; box-shadow:0 0 0 3px rgba(209,14,68,.12); } /* Bottle-only field — hidden until form gets .svc-bottle */ .bottle-only{ display:none; } .svc-bottle .bottle-only{ display:block; } /* Date quick-picks (next 8 Fri/Sat) */ .date-picks{ display:grid; grid-template-columns: repeat(4, 1fr); gap:6px; margin-top:8px; } .date-pick{ display:flex; flex-direction:column; align-items:center; gap:0; padding:7px 4px; min-height:50px; background:#fff; border:1px solid var(--border-strong); border-radius:var(--r-md); cursor:pointer; font-family:inherit; transition:border-color .15s ease, background .15s ease, color .15s ease; } .date-pick:hover{ border-color:var(--text); } .date-pick.is-active{ background:var(--text); color:#fff; border-color:var(--text); } .date-pick-day{ font-size:10px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; opacity:.85; } .date-pick-num{ font-size:18px; font-weight:700; line-height:1.1; } .date-pick-mo{ font-size:10px; font-weight:600; letter-spacing:.05em; text-transform:uppercase; opacity:.7; } /* Submit + error */ .form-submit{ margin-top:6px; } .form-error{ margin:8px 0 0; padding:10px 12px; background:#FEEAEF; border:1px solid #FAB6C5; color:#9C0E36; font-size:13.5px; font-weight:500; border-radius:var(--r-md); } .form-fineprint{ font-size:11.5px; color:var(--text-faint); line-height:1.4; margin:10px 0 0; text-align:center; } /* Photo gallery (matches .gallery / .gallery-cell from venue.js) */ .gallery{ display:grid; grid-template-columns:1fr 1fr; gap:8px; } .gallery-cell{ position:relative; aspect-ratio:1; background:linear-gradient(135deg,#ffe7ee 0%,#fff1f4 50%,#f4f4f4 100%); border-radius:var(--r-md); overflow:hidden; cursor:zoom-in; } .gallery-cell.gallery-main{ grid-column:1 / -1; aspect-ratio: 16 / 10; } .gallery-cell img{ width:100%; height:100%; object-fit:cover; display:block; } .gallery-cell.img-fallback::before{ content: attr(data-letter); position:absolute; inset:0; display:grid; place-items:center; font-size:64px; font-weight:800; color:#fff; background:linear-gradient(135deg,#F81851 0%,#FF6B95 100%); } @media (min-width:640px){ .gallery{ grid-template-columns: 2fr 1fr 1fr; } .gallery-cell.gallery-main{ grid-column: 1 / 2; grid-row: 1 / 3; aspect-ratio:auto; } } /* ============================================================ THANK-YOU PAGES — /guestlist-confirmed/, /guestlist-unavailable/ ============================================================ */ .thanks-page{ padding:32px 0 56px; } .thanks-card{ background:#fff; border:1px solid var(--border); border-radius:var(--r-lg); padding:32px 24px; text-align:center; box-shadow:var(--shadow-sm); } .thanks-icon{ display:inline-flex; align-items:center; justify-content:center; width:64px; height:64px; border-radius:50%; background:#E8F8EE; color:#1B7F3D; margin-bottom:14px; } .thanks-icon-info{ background:#FEEAEF; color:#9C0E36; } .thanks-card h1{ font-size:26px; font-weight:800; margin:0 0 8px; letter-spacing:-0.01em; } .thanks-lead{ font-size:16px; color:var(--text); line-height:1.55; margin:0 auto 20px; max-width:50ch; } .thanks-cta{ display:flex; flex-direction:column; gap:10px; align-items:center; justify-content:center; margin-bottom:18px; } .thanks-cta .btn{ width:100%; max-width:340px; } .thanks-meta{ list-style:none; padding:0; margin:18px 0 0; font-size:13px; color:var(--text-muted); line-height:1.55; } .thanks-meta li{ margin-bottom:4px; } .thanks-extras{ margin-top:32px; } .thanks-extras h2{ font-size:18px; margin:0 0 12px; font-weight:700; } .thanks-section{ margin-top:36px; } @media (min-width:640px){ .thanks-card{ padding:48px 36px; } .thanks-card h1{ font-size:30px; } .thanks-cta{ flex-direction:row; } .thanks-cta .btn{ width:auto; } } /* ============================================================ VENUE PAGE v3 — Airbnb-density mobile-first rewrite class scheme used by /clubs//index.html Loaded AFTER v1 so new class names take precedence. Targets: smaller type, rounded-rectangle buttons, denser layout, more info per scroll. 90% of traffic is mobile. ============================================================ */ :root{ --r-btn: 10px; --r-card: 14px; --r-input: 8px; } /* ---- I. Hero (compressed) ----------------------------- */ .venue-hero{ position:relative; margin-bottom:0; } .venue-hero-img{ position:relative; width:100%; aspect-ratio: 4 / 3; overflow:hidden; background:linear-gradient(135deg,#1a1a1a 0%,#3a1a26 100%); } .venue-hero-img > img{ width:100%; height:100%; object-fit:cover; display:block; } .venue-hero-img.img-fallback::before{ content: attr(data-letter); position:absolute; inset:0; display:grid; place-items:center; font-size:120px; font-weight:800; color:#fff; background:linear-gradient(135deg,#F81851 0%,#FF6B95 100%); } .venue-hero-shade{ position:absolute; inset:0; pointer-events:none; background: linear-gradient(180deg, rgba(0,0,0,0) 35%, rgba(0,0,0,.25) 60%, rgba(0,0,0,.72) 100%); } .venue-hero-text{ position:absolute; left:0; right:0; bottom:0; padding-bottom:18px; color:#fff; z-index:2; } .venue-eyebrow{ font-size:10.5px; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:rgba(255,255,255,.92); margin:0 0 4px; } .venue-hero-text h1{ font-size:26px; font-weight:800; line-height:1.08; letter-spacing:-0.02em; margin:0 0 4px; color:#fff; text-shadow:0 2px 12px rgba(0,0,0,.35); } .venue-hero-text .venue-sub{ font-size:13px; color:rgba(255,255,255,.92); margin:0; font-weight:400; } .breadcrumb-on-dark{ color:rgba(255,255,255,.85); margin-bottom:10px; font-size:11px; } .breadcrumb-on-dark a{ color:rgba(255,255,255,.85); text-decoration-color:rgba(255,255,255,.4); } .breadcrumb-on-dark a:hover{ color:#fff; text-decoration-color:#fff; } .breadcrumb-on-dark [aria-current="page"]{ color:#fff; } .breadcrumb-on-dark li:not(:last-child)::after{ color:rgba(255,255,255,.5); } /* Status pill on hero (Open tonight, etc.) */ .hero-status{ display:inline-flex; align-items:center; gap:6px; margin-bottom:8px; padding:4px 10px; font-size:11px; font-weight:600; border-radius:var(--r-pill); background:rgba(255,255,255,.18); color:#fff; backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); } .hero-status .dot{ width:6px; height:6px; border-radius:50%; background:#42d77c; box-shadow:0 0 0 2px rgba(66,215,124,.25); } /* ---- II. Quick-action bar (under hero) ---------------- */ .qaction-bar{ display:grid; grid-template-columns:repeat(3,1fr); gap:0; background:#fff; border-bottom:1px solid var(--border); } .qaction{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px; padding:11px 6px; background:transparent; border:0; font:inherit; font-size:12px; font-weight:600; color:var(--text); text-decoration:none; cursor:pointer; border-right:1px solid var(--border); } .qaction:last-child{ border-right:0; } .qaction:hover{ background:var(--bg-soft); } .qaction svg{ color:var(--text); } .qaction small{ font-weight:500; color:var(--text-muted); font-size:10.5px; } /* ---- III. At-a-glance card ---------------------------- */ .glance{ padding:16px 0 4px; } .glance-card{ background:var(--bg-soft); border:1px solid var(--border); border-radius:var(--r-card); padding:14px 14px 12px; } .glance-head{ display:flex; align-items:center; justify-content:space-between; margin:0 0 8px; } .glance-head h2{ font-size:14px; font-weight:700; margin:0; letter-spacing:0; } .glance-rating{ display:inline-flex; align-items:center; gap:4px; font-size:13px; font-weight:600; } .glance-rating svg{ color:#1A1A1A; } .glance-list{ list-style:none; padding:0; margin:0; display:grid; grid-template-columns:1fr; gap:6px 12px; } .glance-list li{ display:grid; grid-template-columns:96px 1fr; gap:10px; font-size:13px; line-height:1.4; padding:3px 0; } .glance-list dt, .glance-list .gl-k{ color:var(--text-muted); font-weight:500; } .glance-list dd, .glance-list .gl-v{ color:var(--text); font-weight:600; margin:0; } /* ---- IV. Quick-row icon details (compact) ------------- */ .venue-quick{ background:#fff; border-bottom:1px solid var(--border); padding:14px 0 6px; } .quick-row{ display:grid; grid-template-columns:1fr 1fr; gap:12px 14px; list-style:none; margin:0; padding:0; } .quick-tile{ display:grid; grid-template-columns:22px 1fr; grid-template-rows:auto auto; column-gap:8px; align-items:center; } .quick-tile .qi{ grid-row:1 / 3; color:var(--text-muted); } .quick-tile .ql{ font-size:10.5px; font-weight:600; letter-spacing:.05em; text-transform:uppercase; color:var(--text-muted); line-height:1.2; } .quick-tile .qv{ font-size:13px; font-weight:600; color:var(--text); line-height:1.25; } /* ---- V. Booking card / form (compact rectangles) ------ */ .booking-section{ padding:18px 0 8px; } .booking-card{ background:#fff; border:1px solid var(--border); border-radius:var(--r-card); padding:16px 14px; box-shadow:var(--shadow-sm); } .booking-head h2{ font-size:17px; margin:0 0 2px; line-height:1.25; } .booking-head p{ font-size:13px; color:var(--text-muted); margin:0 0 12px; } .service-toggle{ display:grid; grid-template-columns:1fr 1fr; gap:0; background:var(--bg-soft); border:1px solid var(--border); border-radius:var(--r-btn); padding:3px; margin-bottom:14px; } .service-toggle .toggle-btn{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1px; padding:9px 8px; background:transparent; border:0; border-radius:calc(var(--r-btn) - 3px); font:inherit; cursor:pointer; color:var(--text-muted); transition:background .15s ease, color .15s ease, box-shadow .15s ease; } .service-toggle .toggle-btn span{ font-size:13.5px; font-weight:700; } .service-toggle .toggle-btn small{ font-size:10.5px; font-weight:500; opacity:.85; } .service-toggle .toggle-btn.is-active{ background:#fff; color:var(--text); box-shadow:var(--shadow-sm); } .service-toggle .toggle-btn:not(.is-active){ opacity:.6; } .service-toggle .toggle-btn.is-active{ opacity:1; } .form-grid{ display:grid; grid-template-columns:1fr 1fr; gap:10px 10px; margin-bottom:12px; } .form-grid .field{ display:flex; flex-direction:column; gap:4px; } .form-grid .field-full{ grid-column:1 / -1; } .form-grid .field > span{ font-size:11.5px; font-weight:600; color:var(--text-muted); text-transform:uppercase; letter-spacing:.05em; } /* Inline ".field-optional" tag inside a label span — sits next to the field name, signals "you can leave this blank" without shouting. */ .form-grid .field > span .field-optional{ font-weight:500; text-transform:none; letter-spacing:0; color:var(--text-muted); opacity:.7; margin-left:4px; } .form-grid .field input, .form-grid .field select{ width:100%; padding:10px 12px; min-height:40px; font:inherit; font-size:14.5px; color:var(--text); background:#fff; border:1px solid var(--border-strong); border-radius:var(--r-input); appearance:none; -webkit-appearance:none; transition:border-color .15s ease, box-shadow .15s ease; } .form-grid .field input:focus, .form-grid .field select:focus{ outline:none; border-color:var(--text); box-shadow:0 0 0 3px rgba(248,24,81,.12); } .form-grid .field select{ background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236A6A6A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 12px center; padding-right:34px; } .form-grid .field[hidden]{ display:none; } /* Submit button — RECTANGLE, not pill */ .btn-rect{ border-radius:var(--r-btn) !important; padding:13px 18px; min-height:46px; font-size:15px; font-weight:700; } .form-note{ font-size:11.5px; color:var(--text-muted); text-align:center; margin:10px 0 0; } /* ---- VI. Generic content section spacing -------------- */ .vsection{ padding:22px 0; } .vsection-soft{ background:var(--bg-soft); } .vsection > .container > h2, .vsection-head h2{ font-size:19px; font-weight:700; margin:0 0 4px; letter-spacing:-0.01em; } .vsection-head p{ font-size:13px; color:var(--text-muted); margin:0 0 14px; } /* ---- VII. Pros / Cons / Tips card --------------------- */ .pct-grid{ display:grid; grid-template-columns:1fr; gap:10px; } .pct-card{ background:#fff; border:1px solid var(--border); border-radius:var(--r-card); padding:14px; } .pct-card h3{ font-size:13px; font-weight:700; margin:0 0 10px; display:flex; align-items:center; gap:6px; } .pct-card h3 svg{ flex:0 0 auto; } .pct-good h3{ color:#1A7F37; } .pct-bad h3{ color:#A03A3A; } .pct-tip h3{ color:#8A5A00; } .pct-card ul{ list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:6px; } .pct-card li{ font-size:13.5px; line-height:1.45; color:var(--text); padding-left:14px; position:relative; } .pct-card li::before{ content:""; position:absolute; left:0; top:8px; width:6px; height:6px; border-radius:50%; } .pct-good li::before{ background:#1A7F37; } .pct-bad li::before{ background:#A03A3A; } .pct-tip li::before{ background:#8A5A00; } /* ---- VIII. About prose -------------------------------- */ .venue-prose p{ font-size:14.5px; line-height:1.6; color:var(--text); margin:0 0 10px; } .venue-prose a{ color:var(--text); font-weight:600; text-decoration:underline; text-decoration-color:var(--border-strong); text-underline-offset:3px; } .venue-prose a:hover{ color:var(--accent); text-decoration-color:var(--accent); } /* ---- IX. Vibe cards ----------------------------------- */ .vibe-grid{ display:grid; grid-template-columns:1fr; gap:10px; } .vibe-card{ background:#fff; border:1px solid var(--border); border-radius:var(--r-card); padding:14px; } .vibe-card .vc-icon{ color:var(--text-muted); margin-bottom:6px; display:block; } .vibe-card h3{ font-size:14.5px; font-weight:700; margin:0 0 4px; } .vibe-card p{ font-size:13.5px; color:var(--text); line-height:1.5; margin:0 0 8px; } .vibe-card p:last-child{ margin-bottom:0; } .vibe-card .vc-tags{ display:flex; flex-wrap:wrap; gap:5px; } .vibe-card .vc-tags .tag{ font-size:11px; padding:3px 8px; border-radius:var(--r-pill); background:var(--bg-soft); border:1px solid var(--border); color:var(--text-muted); } /* ---- X. Pricing table --------------------------------- */ .price-table{ width:100%; border-collapse:collapse; background:#fff; border:1px solid var(--border); border-radius:var(--r-card); overflow:hidden; font-size:13.5px; } .price-table th, .price-table td{ text-align:left; padding:10px 12px; border-bottom:1px solid var(--border); vertical-align:top; } .price-table tr:last-child th, .price-table tr:last-child td{ border-bottom:0; } .price-table thead th{ background:var(--bg-soft); font-size:11px; text-transform:uppercase; color:var(--text-muted); letter-spacing:.05em; font-weight:600; } .price-table td:first-child{ font-weight:600; color:var(--text); } .price-table td:last-child{ font-weight:700; color:var(--text); white-space:nowrap; text-align:right; } .price-note{ font-size:11.5px; color:var(--text-muted); margin:8px 0 0; } /* ---- XI. Timeline (when to arrive) -------------------- */ .timeline{ margin:0; padding:0; list-style:none; display:flex; flex-direction:column; gap:0; background:#fff; border:1px solid var(--border); border-radius:var(--r-card); overflow:hidden; } .timeline li{ display:grid; grid-template-columns:78px 1fr; gap:12px; align-items:start; padding:10px 12px; border-bottom:1px solid var(--border); } .timeline li:last-child{ border-bottom:0; } .timeline .tl-time{ font-size:13px; font-weight:700; color:var(--text); } .timeline .tl-what{ font-size:13px; color:var(--text); line-height:1.4; } .timeline .tl-what small{ display:block; font-size:11.5px; color:var(--text-muted); margin-top:1px; } /* ---- XII. Getting-there tiles ------------------------- */ .transit-grid{ display:grid; grid-template-columns:1fr; gap:10px; } .transit-tile{ background:#fff; border:1px solid var(--border); border-radius:var(--r-card); padding:12px 14px; display:grid; grid-template-columns:24px 1fr; gap:10px; align-items:start; } .transit-tile .tt-icon{ color:var(--text-muted); padding-top:2px; } .transit-tile h3{ font-size:11.5px; font-weight:600; text-transform:uppercase; letter-spacing:.05em; color:var(--text-muted); margin:0 0 3px; } .transit-tile p{ font-size:13.5px; color:var(--text); margin:0; line-height:1.45; } /* ---- XIII. Photo gallery ------------------------------ */ .gallery{ display:grid; grid-template-columns:1fr 1fr; grid-auto-rows:120px; gap:6px; border-radius:var(--r-card); overflow:hidden; } .gal-item{ position:relative; display:block; background:linear-gradient(135deg,#F81851 0%,#FF6B95 100%); overflow:hidden; } .gal-item img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .3s ease; } .gal-item:hover img{ transform:scale(1.04); } .gal-item.img-fallback::before{ content: attr(data-letter); position:absolute; inset:0; display:grid; place-items:center; font-size:42px; font-weight:800; color:#fff; } .gal-1{ grid-column:1 / -1; grid-row:span 2; } /* ---- XIV. Map ----------------------------------------- */ .map-wrap{ border-radius:var(--r-card); overflow:hidden; border:1px solid var(--border); background:#f5f5f5; } .map-wrap iframe{ display:block; width:100%; height:240px; border:0; } .map-note{ font-size:13px; color:var(--text-muted); margin:10px 0 0; line-height:1.5; } /* ---- XV. Comparison table (scrollable wrapper variant) ---- Scoped to .compare-wrap — a horizontally scrollable container. Without this scope the min-width:520px would force every .compare-table to overflow on mobile, even ones that use the stacked-card pattern from the @media block above. */ .compare-wrap{ overflow-x:auto; -webkit-overflow-scrolling:touch; } .compare-wrap .compare-table{ width:100%; min-width:520px; border-collapse:collapse; background:#fff; border:1px solid var(--border); border-radius:var(--r-card); overflow:hidden; font-size:13px; } .compare-wrap .compare-table th, .compare-wrap .compare-table td{ text-align:left; padding:9px 11px; border-bottom:1px solid var(--border); } .compare-wrap .compare-table thead th{ background:var(--bg-soft); font-size:11px; text-transform:uppercase; color:var(--text-muted); letter-spacing:.05em; font-weight:600; white-space:nowrap; } .compare-wrap .compare-table tbody th{ font-size:11px; text-transform:uppercase; color:var(--text-muted); letter-spacing:.05em; font-weight:600; white-space:nowrap; background:var(--bg-soft); } .compare-wrap .compare-table tr:last-child th, .compare-wrap .compare-table tr:last-child td{ border-bottom:0; } .compare-wrap .compare-table .featured{ background:#FFF1F4; } .compare-wrap .compare-table .featured-tag{ font-size:9.5px; font-weight:700; background:var(--accent); color:#fff; padding:2px 6px; border-radius:var(--r-pill); margin-left:4px; vertical-align:middle; text-transform:uppercase; letter-spacing:.05em; } /* ---- XVI. "Good for / not for" grid ------------------- */ .fit-grid{ display:grid; grid-template-columns:1fr 1fr; gap:8px; } .fit-item{ display:grid; grid-template-columns:18px 1fr; gap:8px; align-items:center; background:#fff; border:1px solid var(--border); border-radius:var(--r-input); padding:8px 10px; font-size:13px; } .fit-item.is-yes svg{ color:#1A7F37; } .fit-item.is-no svg{ color:#A03A3A; } .fit-item.is-maybe svg{ color:#8A5A00; } /* ---- XVII. Similar clubs (compact rows) --------------- */ .similar-grid{ display:grid; grid-template-columns:1fr; gap:10px; } .similar-card{ display:flex; align-items:center; gap:12px; background:#fff; border:1px solid var(--border); border-radius:var(--r-card); padding:8px; text-decoration:none; color:var(--text); transition:border-color .15s ease, box-shadow .15s ease, transform .15s ease; overflow:hidden; } .similar-card:hover{ border-color:var(--text); box-shadow:var(--shadow-sm); transform:translateY(-1px); } .similar-card .sc-img{ flex:0 0 80px; width:80px; height:80px; border-radius:calc(var(--r-card) - 4px); overflow:hidden; position:relative; background:linear-gradient(135deg,#F81851 0%,#FF6B95 100%); } .similar-card .sc-img img{ width:100%; height:100%; object-fit:cover; display:block; } .similar-card .sc-img.img-fallback::before{ content: attr(data-letter); position:absolute; inset:0; display:grid; place-items:center; font-size:30px; font-weight:800; color:#fff; } .similar-card .sc-body{ min-width:0; flex:1; } .similar-card .sc-body h3{ font-size:14.5px; font-weight:700; margin:0 0 1px; } .similar-card .sc-body p{ font-size:12.5px; color:var(--text-muted); margin:0; line-height:1.35; } .similar-card .sc-distance{ font-size:11px; color:var(--text-muted); margin-top:3px; } /* ---- XVIII. FAQ overrides for venue page -------------- */ .venue-faq .faq-item{ padding:10px 12px; } .venue-faq summary{ font-size:14px; } .venue-faq .faq-answer p{ font-size:13.5px; line-height:1.55; } /* ---- XIX. Sticky mobile book bar ---------------------- */ .sticky-book-bar{ position:fixed; left:0; right:0; bottom:0; z-index:50; display:flex; align-items:center; justify-content:space-between; gap:10px; padding:8px 14px; background:#fff; border-top:1px solid var(--border); box-shadow:0 -4px 20px rgba(0,0,0,.06); transform:translateY(0); transition:transform .25s ease, opacity .25s ease; padding-bottom: calc(8px + env(safe-area-inset-bottom)); } .sticky-book-bar.is-hidden{ transform:translateY(110%); opacity:0; pointer-events:none; } .sticky-book-bar > div{ display:flex; flex-direction:column; } .sticky-book-bar .sb-label{ font-size:13px; font-weight:700; color:var(--text); line-height:1.2; } .sticky-book-bar .sb-meta{ font-size:11px; color:var(--text-muted); line-height:1.2; } .sticky-book-bar .btn{ padding:9px 16px; min-height:38px; font-size:13.5px; border-radius:var(--r-btn); } /* ---- XX. Confirmation pages --------------------------- */ .confirm-section{ padding:36px 0 28px; } .confirm-section.confirm-soft{ background:var(--bg-soft); } .confirm-card{ background:#fff; border:1px solid var(--border); border-radius:var(--r-card); padding:26px 20px; text-align:center; box-shadow:var(--shadow-sm); } .confirm-card-soft{ background:#fff; } .confirm-card .confirm-icon{ display:inline-flex; align-items:center; justify-content:center; width:56px; height:56px; background:#E8F8EE; color:#1A7F37; border-radius:50%; margin-bottom:12px; } .confirm-card .confirm-icon-info{ background:#FFF1F4; color:var(--accent); } .confirm-card h1{ font-size:22px; font-weight:800; margin:0 0 8px; letter-spacing:-0.02em; } .confirm-lead{ font-size:14.5px; color:var(--text); max-width:50ch; margin:0 auto 18px; line-height:1.5; } .confirm-actions{ display:flex; flex-direction:column; gap:8px; align-items:stretch; max-width:340px; margin:0 auto; } .confirm-actions .btn{ border-radius:var(--r-btn); } .confirm-actions-center{ margin:24px auto 0; } .confirm-checks{ list-style:none; padding:0; margin:18px 0 0; text-align:left; font-size:13px; color:var(--text-muted); } .confirm-checks li{ position:relative; padding:5px 0 5px 24px; } .confirm-checks li::before{ content:""; position:absolute; left:6px; top:11px; width:5px; height:5px; border-radius:50%; background:var(--text-muted); } /* ============================================================ Tablet / desktop overrides for venue v3 + confirmation pages ============================================================ */ @media (min-width:640px){ .venue-hero-img{ aspect-ratio:21 / 9; } .venue-hero-text{ padding-bottom:28px; } .venue-hero-text h1{ font-size:38px; } .venue-hero-text .venue-sub{ font-size:15px; } .venue-eyebrow{ font-size:11px; } .breadcrumb-on-dark{ font-size:12px; } .qaction{ padding:14px 8px; font-size:13px; } .qaction small{ font-size:11.5px; } .quick-row{ grid-template-columns:repeat(3,1fr); gap:14px 18px; } .glance-list{ grid-template-columns:1fr 1fr; gap:6px 24px; } .vsection{ padding:32px 0; } .vsection > .container > h2, .vsection-head h2{ font-size:22px; } .pct-grid{ grid-template-columns:1fr 1fr 1fr; gap:12px; } .form-grid{ gap:12px; } .vibe-grid{ grid-template-columns:1fr 1fr; gap:12px; } .gallery{ grid-template-columns:2fr 1fr 1fr; grid-auto-rows:160px; gap:8px; } .gal-1{ grid-column:1 / 2; grid-row:1 / 3; } .map-wrap iframe{ height:340px; } .similar-grid{ grid-template-columns:1fr 1fr; gap:12px; } .transit-grid{ grid-template-columns:1fr 1fr 1fr; } .fit-grid{ grid-template-columns:repeat(3,1fr); gap:10px; } .confirm-actions{ flex-direction:row; justify-content:center; max-width:none; } .confirm-actions .btn{ flex:0 0 auto; } .confirm-card{ padding:40px 36px; } .confirm-card h1{ font-size:28px; } .sticky-book-bar{ display:none; } } @media (min-width:900px){ .venue-hero-img{ aspect-ratio:21 / 9; max-height:520px; } .venue-hero-text{ padding-bottom:36px; } .venue-hero-text h1{ font-size:48px; } .quick-row{ grid-template-columns:repeat(6,1fr); gap:0 22px; } .booking-card{ padding:24px 24px; } .booking-head h2{ font-size:20px; } .vibe-grid{ grid-template-columns:repeat(4,1fr); } .gallery{ grid-auto-rows:200px; gap:8px; } .similar-grid{ grid-template-columns:repeat(4,1fr); } .similar-card{ flex-direction:column; align-items:stretch; padding:0; } .similar-card .sc-img{ flex:0 0 auto; width:100%; height:auto; aspect-ratio:4 / 3; border-radius:0; } .similar-card .sc-body{ padding:12px 14px 14px; } .confirm-section{ padding:64px 0 48px; } .confirm-card{ padding:48px 48px; } .confirm-card h1{ font-size:32px; } } /* ---- 2-column layout at desktop ----------------------- */ @media (min-width:1000px){ .vlayout-two{ display:grid; grid-template-columns: minmax(0,1fr) 360px; gap:36px; } .vlayout-two .vlayout-aside{ align-self:start; position:sticky; top:90px; } /* On desktop, glance card is in the aside */ .vlayout-two .glance{ padding:0; } } /* ============================================================ VENUE PAGE v2 — class scheme used by /clubs//index.html Mobile-first. Airbnb-style typography & spacing. Loaded AFTER the v1 venue CSS so these definitions take precedence for the new class names. ============================================================ */ /* ---- I. Hero --------------------------------------------- */ .venue-hero{ position:relative; margin-bottom:0; } .venue-hero-img{ position:relative; width:100%; aspect-ratio: 4 / 3; overflow:hidden; background:linear-gradient(135deg,#1a1a1a 0%,#3a1a26 100%); } .venue-hero-img > img{ /* legacy single-image path (still works as fallback) */ width:100%; height:100%; object-fit:cover; display:block; } /* === HERO CAROUSEL ARCHITECTURE ============================ .hero-slides holds all slides, fades/slides between them .hero-slide one image; .is-active = currently visible .hero-shade gradient overlay for text legibility .hero-arrow prev/next buttons (hidden if <2 slides) .hero-dots pagination dots (hidden if <2 slides) JS activates carousel only when 2+ slides are present. ============================================================ */ .hero-slides{ position:absolute; inset:0; width:100%; height:100%; } .hero-slide{ position:absolute; inset:0; width:100%; height:100%; opacity:0; transition:opacity .6s ease; pointer-events:none; } .hero-slide.is-active{ opacity:1; pointer-events:auto; } .hero-slide img{ width:100%; height:100%; object-fit:cover; display:block; transform-origin:50% 55%; animation: heroZoom 24s ease-out infinite alternate; will-change:transform; } @keyframes heroZoom{ from { transform:scale(1.02); } to { transform:scale(1.10); } } @media (prefers-reduced-motion: reduce){ .hero-slide img{ animation:none; transform:none; } } .venue-hero-img.img-fallback::before{ content: attr(data-letter); position:absolute; inset:0; display:grid; place-items:center; font-size:120px; font-weight:700; color:#fff; background:linear-gradient(160deg,#1A1A1A 0%,#2A2A2D 100%); } .hero-shade{ position:absolute; inset:0; pointer-events:none; background: linear-gradient(180deg, rgba(0,0,0,0) 25%, rgba(0,0,0,.55) 60%, rgba(0,0,0,.92) 100%); } /* Prev/Next arrow buttons */ .hero-arrow{ position:absolute; top:50%; transform:translateY(-50%); width:36px; height:36px; display:none; /* JS toggles this when 2+ slides */ align-items:center; justify-content:center; background:rgba(255,255,255,.92); border:0; border-radius:50%; color:var(--charcoal); cursor:pointer; z-index:3; box-shadow:0 2px 8px rgba(0,0,0,.18); transition:background .15s ease, transform .15s ease; } .hero-arrow.is-visible{ display:inline-flex; } .hero-arrow:hover{ background:#fff; } .hero-arrow:active{ transform:translateY(-50%) scale(.95); } .hero-arrow svg{ width:18px; height:18px; } .hero-arrow-prev{ left:12px; } .hero-arrow-next{ right:12px; } @media (max-width:640px){ /* On mobile, arrows are subtler — swipe is primary */ .hero-arrow{ width:32px; height:32px; } .hero-arrow svg{ width:16px; height:16px; } } /* Pagination dots */ .hero-dots{ position:absolute; bottom:10px; left:50%; transform:translateX(-50%); display:none; /* JS toggles when 2+ slides */ gap:6px; z-index:3; } .hero-dots.is-visible{ display:flex; } .hero-dots button{ width:6px; height:6px; padding:0; background:rgba(255,255,255,.4); border:0; border-radius:50%; cursor:pointer; transition:background .2s ease, width .2s ease; } .hero-dots button.is-active{ background:#fff; width:18px; border-radius:3px; } .venue-hero-text{ position:absolute; left:0; right:0; bottom:0; padding-top:0; padding-bottom:22px; color:#fff; z-index:2; } .venue-eyebrow{ font-size:10.5px; font-weight:500; letter-spacing:.14em; text-transform:uppercase; color:rgba(255,255,255,.78); margin:0 0 6px; } .venue-hero-text h1{ font-size:30px; font-weight:600; line-height:1.05; letter-spacing:-0.025em; margin:0 0 10px; color:#fff; } .venue-hero-text .venue-sub{ font-size:13px; color:rgba(255,255,255,.85); margin:8px 0 0; display:block; font-weight:400; letter-spacing:0; text-transform:none; line-height:1.45; } .venue-hero-text .venue-rating{ font-size:13px; color:#fff; display:inline-flex; align-items:center; gap:4px; margin:6px 0 0; } .venue-hero-text .venue-rating svg{ width:13px; height:13px; } /* Hero floating action buttons (save / share) */ .venue-hero-actions{ position:absolute; top:14px; left:0; right:0; z-index:3; display:flex; justify-content:flex-end; gap:8px; pointer-events:none; } .venue-hero-actions > *{ pointer-events:auto; } .hero-icon-btn{ display:inline-flex; align-items:center; justify-content:center; width:40px; height:40px; background:rgba(255,255,255,.92); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); border:1px solid rgba(255,255,255,.4); border-radius:50%; color:var(--charcoal); cursor:pointer; transition:background .15s ease, transform .2s ease; box-shadow:0 2px 8px rgba(0,0,0,.15); } .hero-icon-btn:hover{ background:#fff; transform:scale(1.05); } .hero-icon-btn:active{ transform:scale(0.96); } .hero-icon-btn svg{ width:18px; height:18px; } .hero-icon-btn.is-saved{ color:var(--accent); } .hero-icon-btn.is-saved svg{ fill:var(--accent); stroke:var(--accent); } /* Hero meta line — rating + live status */ .hero-meta-row{ display:flex; align-items:flex-start; flex-direction:column; gap:4px; margin:0 0 8px; } .hero-rating{ display:inline-flex; align-items:center; gap:5px; font-size:13.5px; font-weight:600; color:#fff; letter-spacing:-0.01em; } .hero-rating svg{ width:14px; height:14px; color:var(--accent); } .hero-dot{ display:none; /* hidden on mobile (column layout) */ width:3px; height:3px; background:rgba(255,255,255,.45); border-radius:50%; } .hero-status{ display:inline-flex; align-items:center; gap:6px; font-size:12.5px; color:rgba(255,255,255,.85); font-weight:400; } .status-dot{ display:inline-block; width:7px; height:7px; border-radius:50%; background:#9CA3AF; box-shadow:0 0 0 0 rgba(156,163,175,.6); flex-shrink:0; } .hero-status.is-open{ color:#fff; } .hero-status.is-open .status-dot{ background:#34D399; animation: livePulse 2s ease-out infinite; } @keyframes livePulse{ 0%,100% { box-shadow:0 0 0 0 rgba(52,211,153,.5); } 50% { box-shadow:0 0 0 5px rgba(52,211,153,0); } } @media (prefers-reduced-motion: reduce){ .status-dot{ animation:none !important; } } .breadcrumb-on-dark{ color:rgba(255,255,255,.85); margin-bottom:10px; font-size:12px; } .breadcrumb-on-dark a{ color:rgba(255,255,255,.85); text-decoration-color:rgba(255,255,255,.4); } .breadcrumb-on-dark a:hover{ color:#fff; text-decoration-color:#fff; } .breadcrumb-on-dark [aria-current="page"]{ color:#fff; } .breadcrumb-on-dark li:not(:last-child)::after{ color:rgba(255,255,255,.5); } /* ---- J. Quick row (icon details) — Airbnb facets style --- */ .venue-quick{ background:#fff; border-bottom:1px solid var(--border); padding:14px 0 12px; } .quick-row{ display:grid; grid-template-columns:1fr 1fr; gap:12px 12px; list-style:none; margin:0; padding:0; } .quick-tile{ display:grid; grid-template-columns:22px 1fr; grid-template-rows:auto auto; column-gap:10px; align-items:center; } .quick-tile .qi{ grid-row:1 / 3; color:var(--text); width:22px; height:22px; display:block; } .quick-tile .ql{ font-size:10.5px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--text-muted); line-height:1.2; margin-bottom:1px; } .quick-tile .qv{ font-size:13.5px; font-weight:600; color:var(--text); line-height:1.25; } /* ---- K. Booking card / form (Airbnb-condensed) ---------- */ .booking-section{ padding:18px 0 8px; } .booking-card{ background:#fff; border:1px solid var(--border); border-radius:14px; padding:16px 14px; box-shadow: 0 1px 2px rgba(0,0,0,.03), 0 6px 24px rgba(0,0,0,.06), inset 0 1px 0 rgba(255,255,255,.6); } .booking-head h2{ font-size:17px; font-weight:600; margin:0 0 2px; letter-spacing:-0.015em; } .booking-head p{ font-size:13px; color:var(--text-muted); margin:0 0 14px; } /* Collapsed-on-mobile booking card. On mobile, the card defaults to a compact "header + Start booking" state. Tapping Start booking (or the sticky bar) expands the form. On desktop (640px+), the form is always expanded. */ .booking-expand{ display:none; width:100%; align-items:center; justify-content:center; gap:8px; background:#fff; color:var(--text); font-weight:600; font-size:14.5px; padding:14px 16px; border:1px solid var(--charcoal); border-radius:10px; cursor:pointer; transition:background .15s ease, transform .1s ease; } .booking-expand:hover{ background:var(--bg-soft); } .booking-expand:active{ transform:scale(0.98); } .booking-expand svg{ width:16px; height:16px; } /* Primary filled variant — matches the Book Now sticky bar treatment */ .booking-expand-primary{ background:var(--accent); color:#fff; border-color:var(--accent); font-size:15px; font-weight:600; padding:15px 18px; min-height:52px; letter-spacing:-0.005em; box-shadow:0 1px 2px rgba(248,24,81,.12), 0 4px 16px rgba(248,24,81,.18); } .booking-expand-primary:hover{ background:#E5154A; border-color:#E5154A; } .booking-expand-note{ display:none; font-size:11.5px; color:var(--text-muted); text-align:center; margin:8px 0 0; letter-spacing:-0.005em; } @media (max-width:639px){ .booking-card.is-collapsed-mobile .booking-expand{ display:flex; } .booking-card.is-collapsed-mobile .booking-expand-note{ display:block; } .booking-card.is-collapsed-mobile #bookingForm{ display:none; } .booking-card.is-collapsed-mobile .booking-head p{ margin-bottom:14px; } } .service-toggle{ display:grid; grid-template-columns:1fr 1fr; gap:0; background:var(--bg-soft); border:1px solid var(--border); border-radius:10px; padding:3px; margin-bottom:12px; } .service-toggle .toggle-btn{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1px; padding:8px 6px; min-height:44px; background:transparent; border:0; border-radius:8px; font:inherit; cursor:pointer; color:var(--text-muted); transition:background .15s ease, color .15s ease, box-shadow .15s ease; } .service-toggle .toggle-btn span{ font-size:13.5px; font-weight:600; } .service-toggle .toggle-btn small{ font-size:11px; font-weight:500; opacity:.85; } .service-toggle .toggle-btn:not(.is-active){ opacity:.65; } .service-toggle .toggle-btn.is-active{ background:#fff; color:var(--text); box-shadow:0 1px 3px rgba(0,0,0,.08); opacity:1; } .form-grid{ display:grid; grid-template-columns:1fr; gap:10px; margin-bottom:12px; } .form-grid .field{ display:flex; flex-direction:column; gap:4px; } .form-grid .field > span{ font-size:13px; font-weight:500; color:var(--text); letter-spacing:-0.005em; text-transform:none; } .form-grid .field input, .form-grid .field select{ width:100%; padding:10px 12px; min-height:44px; font:inherit; font-size:15px; color:var(--text); background:#fff; border:1px solid var(--border-strong); border-radius:8px; appearance:none; -webkit-appearance:none; transition:border-color .15s ease, box-shadow .15s ease; } .form-grid .field input:focus, .form-grid .field select:focus{ outline:none; border-color:var(--text); box-shadow:0 0 0 3px rgba(248,24,81,.12); } .form-grid .field select{ background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236A6A6A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 12px center; padding-right:34px; } .form-grid .field-full{ grid-column:1 / -1; } .form-grid .field[hidden]{ display:none; } .form-trust{ list-style:none; margin:0 0 10px; padding:10px 0; display:flex; flex-wrap:wrap; gap:8px 14px; border-top:1px solid var(--border); border-bottom:1px solid var(--border); justify-content:center; } .form-trust li{ display:inline-flex; align-items:center; gap:5px; font-size:11.5px; color:var(--text-muted); letter-spacing:-0.005em; font-weight:500; } .form-trust svg{ width:13px; height:13px; color:var(--charcoal); opacity:.7; flex-shrink:0; } .form-note{ font-size:11.5px; color:var(--text-muted); text-align:center; margin:10px 0 0; line-height:1.5; } /* SQUARED-OFF buttons on venue page (override pill default) */ .venue-page .btn, .booking-section .btn, .confirm-section .btn, .sticky-book-bar .btn{ border-radius:10px; } .venue-page .btn-lg, .booking-section .btn-lg, .confirm-section .btn-lg{ padding:12px 18px; min-height:48px; font-size:15px; font-weight:600; } /* === ACCENT STRATEGY ON VENUE PAGE ============================ Pink (--accent) is reserved for conversion CTAs ONLY: - .btn-book (booking form submit) - .sticky-book-bar Book Now - the Insider Tips column headline (kept as brand accent) Everywhere else demotes to charcoal so the page feels premium, not Groupon. Pink stays scarce so it carries weight when used. ============================================================ */ /* Demote header CTA to charcoal */ .venue-page .header-cta{ background:var(--charcoal); color:#fff; border-color:var(--charcoal); } .venue-page .header-cta:hover{ background:#000; border-color:#000; } /* Booking submit — KEEP pink (it's the conversion) */ .btn-book{ display:flex; width:100%; align-items:center; justify-content:center; background:var(--accent); color:#fff; font-weight:600; font-size:15px; padding:12px 18px; min-height:48px; border:0; border-radius:10px; cursor:pointer; letter-spacing:-0.005em; /* premium beveled-glass inset highlight */ box-shadow: inset 0 1px 0 rgba(255,255,255,.18), 0 1px 2px rgba(248,24,81,.25), 0 4px 12px rgba(248,24,81,.18); transition:background .15s ease, transform .15s ease, box-shadow .2s ease; } .btn-book:hover{ background:var(--accent-dark); box-shadow: inset 0 1px 0 rgba(255,255,255,.18), 0 2px 4px rgba(248,24,81,.3), 0 6px 18px rgba(248,24,81,.22); } .btn-book:active{ transform:translateY(1px); } /* Venue prose links: charcoal-driven underline, pink only on hover */ .venue-page .venue-prose a{ color:var(--text); font-weight:500; text-decoration:underline; text-decoration-color:var(--border-strong); text-underline-offset:3px; text-decoration-thickness:1px; } .venue-page .venue-prose a:hover{ color:var(--accent); text-decoration-color:var(--accent); } /* Focus rings — charcoal not pink */ .venue-page :focus-visible{ outline:2px solid var(--charcoal); outline-offset:2px; } /* Booking form keeps pink focus ring on inputs (signals where to act) */ .venue-page .form-grid .field input:focus, .venue-page .form-grid .field select:focus{ border-color:var(--charcoal); box-shadow:0 0 0 3px rgba(26,26,26,.08); } /* ---- L. Section headings (venue) ------------------------- */ .venue-page .section{ padding:24px 0; } .venue-page .section.section-soft{ background:var(--bg-soft); } /* Editorial section — Airbnb-style light card on cool-gray surface. Differentiated from --bg-soft (#F7F7F7) by being slightly cooler and slightly darker, so the editorial review reads as its own distinct space without breaking page cohesion. */ .venue-page .section.section-dark{ background-color:#E8E8EA; color:var(--text); position:relative; } .venue-page .section.section-dark .section-head h2{ color:var(--text); } .venue-page .section.section-dark .section-head p{ color:var(--text-muted); } .venue-page .section-head{ display:block; margin-bottom:14px; } .venue-page .section-head h2{ font-size:20px; font-weight:600; line-height:1.2; letter-spacing:-0.01em; margin:0 0 4px; } .venue-page .section-head p{ font-size:14px; color:var(--text-muted); margin:0; line-height:1.45; max-width:none; } /* ---- M. About prose -------------------------------------- */ .venue-prose p{ font-size:13.5px; line-height:1.5; color:var(--text); margin:0 0 12px; letter-spacing:-0.005em; } .venue-prose p:last-child{ margin-bottom:0; } .venue-prose a{ color:var(--text); font-weight:600; text-decoration:underline; text-decoration-color:var(--border-strong); text-underline-offset:3px; } .venue-prose a:hover{ color:var(--accent); text-decoration-color:var(--accent); } /* ---- N. Fact strip (At a glance) ------------------------- */ .fact-strip{ display:grid; grid-template-columns:1fr 1fr; gap:12px 16px; background:#fff; border:1px solid var(--border); border-radius:12px; padding:14px; margin:0; list-style:none; } .fact-strip li{ display:flex; flex-direction:column; gap:1px; } .fact-strip dt, .fact-strip .fact-label{ font-size:11px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--text-muted); } .fact-strip dd, .fact-strip .fact-value{ margin:0; font-size:13.5px; font-weight:600; color:var(--text); line-height:1.3; } /* ---- O. Vibe / dress / crowd cards (Airbnb amenity style) - */ .vibe-grid{ display:grid; grid-template-columns:1fr; gap:12px; } .vibe-card{ background:#fff; border:1px solid var(--border); border-radius:12px; padding:16px; transition:border-color .15s ease, box-shadow .2s ease; } .vibe-card:hover{ border-color:var(--border-strong); box-shadow:0 1px 2px rgba(0,0,0,.03), 0 4px 12px rgba(0,0,0,.04); } .vibe-card .vc-icon{ color:var(--text); margin:0 0 10px; display:block; width:24px; height:24px; opacity:.85; } .vibe-card h3{ font-size:15px; font-weight:600; line-height:1.3; margin:0 0 4px; color:var(--text); text-transform:none; letter-spacing:normal; /* override v1 */ } .vibe-card p{ font-size:14px; font-weight:400; line-height:1.5; color:var(--text-muted); margin:0 0 10px; letter-spacing:normal; } .vibe-card p:last-child{ margin-bottom:0; } .vibe-card .vc-tags{ display:flex; flex-wrap:wrap; gap:5px; margin:0; padding:0; } .vibe-card .vc-tags .tag{ font-size:11.5px; font-weight:400; padding:3px 8px; border-radius:6px; background:var(--bg-soft); color:var(--text-muted); border:1px solid var(--border); letter-spacing:normal; text-transform:none; } /* ---- P. Bottle service pricing table --------------------- */ .bottle-pricing{ display:grid; grid-template-columns:1fr; gap:10px; list-style:none; margin:0; padding:0; } .bottle-tier{ display:grid; grid-template-columns:1fr auto; align-items:start; gap:8px 12px; padding:14px; background:#fff; border:1px solid var(--border); border-radius:12px; transition:border-color .15s ease, box-shadow .2s ease, transform .2s ease; } .bottle-tier:hover{ border-color:var(--charcoal); box-shadow:0 1px 2px rgba(0,0,0,.04), 0 8px 24px rgba(0,0,0,.06); transform:translateY(-1px); } .bottle-tier.is-signature{ background: linear-gradient(135deg, rgba(248,24,81,.04) 0%, rgba(26,26,26,.02) 100%), #fff; border:1px solid var(--accent-tint); position:relative; } .bottle-tier.is-signature::before{ content:""; position:absolute; left:0; top:0; bottom:0; width:3px; border-radius:12px 0 0 12px; background:linear-gradient(180deg, var(--accent) 0%, var(--charcoal) 100%); } .bottle-tier.is-signature:hover{ border-color:var(--accent); } .bottle-tier .bt-name{ font-size:14px; font-weight:600; color:var(--text); margin:0; line-height:1.3; display:flex; flex-wrap:wrap; align-items:center; gap:8px; } .bottle-tier .bt-badge{ display:inline-flex; align-items:center; font-size:10px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; padding:2px 7px; border-radius:4px; background:var(--accent-tint); color:var(--accent); } .bottle-tier .bt-meta{ font-size:12.5px; color:var(--text-muted); margin:2px 0 0; line-height:1.4; } .bottle-tier .bt-price{ font-size:14px; font-weight:700; color:var(--text); white-space:nowrap; text-align:right; } .bottle-tier .bt-price small{ display:block; font-size:11px; font-weight:500; color:var(--text-muted); margin-top:2px; } /* Price anchoring block under bottle pricing */ .price-context{ display:grid; grid-template-columns:1fr; gap:12px; margin:14px 0 0; } .price-context > div{ padding:14px 16px; background:#fff; border:1px solid var(--border); border-radius:12px; } .price-context h3{ font-size:11.5px; font-weight:600; margin:0 0 10px; text-transform:uppercase; letter-spacing:.08em; color:var(--text-muted); } .price-context ul{ list-style:none; margin:0; padding:0; } .price-context li{ position:relative; padding:0 0 0 18px; font-size:13px; line-height:1.5; color:var(--text); margin-bottom:6px; } .price-context li:last-child{ margin-bottom:0; } .price-context li::before{ content:""; position:absolute; left:0; top:7px; width:10px; height:1px; background:var(--border-strong); } .price-context p{ font-size:13px; line-height:1.5; color:var(--text); margin:0 0 8px; } .price-context p:last-child{ margin-bottom:0; } .pc-perguest{ padding-top:8px; margin-top:8px !important; border-top:1px solid var(--border); color:var(--text-muted) !important; font-size:12.5px !important; } .bottle-note{ font-size:12.5px; color:var(--text-muted); margin:10px 0 0; line-height:1.5; } /* ---- P2. Editorial review (Our Take) -------------------- */ .editorial-review{ background:#fff; border:1px solid var(--border); border-radius:14px; padding:20px 18px; } .editorial-byline{ display:flex; align-items:center; flex-wrap:wrap; gap:8px; font-size:12px; color:var(--text-muted); margin:0 0 14px; letter-spacing:normal; } .editorial-byline .byline-dot{ display:inline-block; width:3px; height:3px; border-radius:50%; background:var(--text-muted); opacity:.55; } .editorial-score{ display:flex; align-items:baseline; gap:6px; margin:0 0 16px; padding-bottom:16px; border-bottom:1px solid var(--border); } .editorial-score .es-num{ font-size:42px; font-weight:600; line-height:1; letter-spacing:-0.035em; color:var(--text); font-variant-numeric:tabular-nums; } .editorial-score .es-out{ font-size:14px; color:var(--text-muted); margin-left:2px; } .editorial-score .es-stars{ display:inline-flex; gap:2px; margin-left:6px; align-items:center; } .editorial-score .es-stars svg{ width:15px; height:15px; } .editorial-score .es-stars .star-filled{ color:var(--accent); } .editorial-score .es-stars .star-empty{ color:var(--border-strong); } .editorial-bars{ display:grid; grid-template-columns:1fr; gap:12px; margin:0; } .editorial-bar{ display:grid; grid-template-columns:96px 1fr 32px; align-items:center; gap:12px; } .editorial-bar .eb-label{ font-size:13px; color:var(--text); font-weight:500; letter-spacing:normal; text-transform:none; } .editorial-bar .eb-track{ height:5px; background:var(--bg-soft); border-radius:999px; overflow:hidden; position:relative; } .editorial-bar .eb-fill{ position:absolute; top:0; left:0; height:100%; background:var(--text); border-radius:999px; } .editorial-bar .eb-value{ font-size:12.5px; color:var(--text-muted); font-variant-numeric:tabular-nums; text-align:right; font-weight:500; } .editorial-quote{ font-size:13.5px; line-height:1.55; color:var(--text); margin:16px 0 0; padding-top:16px; border-top:1px solid var(--border); letter-spacing:-0.005em; } .editorial-quote p{ margin:0 0 10px; } .editorial-quote p:last-child{ margin-bottom:0; } /* Bottom-line callout — pull-quote style, visually weighted */ .editorial-bottom-line{ margin-top:14px !important; padding:12px 14px; border-left:3px solid var(--accent); background:rgba(248,24,81,.04); border-radius:0 8px 8px 0; font-size:13.5px; } .section-dark .editorial-bottom-line{ background:rgba(248,24,81,.04); color:var(--text); } /* === EDITORIAL REVIEW — Airbnb-style white card on cool-gray surface === White card, soft 1px border, airy two-layer drop shadow. All inner elements use light-mode colors for proper contrast. */ .section-dark .editorial-review{ background:#FFFFFF; border:1px solid rgba(0,0,0,0.06); border-radius:16px; box-shadow: 0 2px 4px rgba(0,0,0,0.04), 0 8px 24px rgba(0,0,0,0.08); padding:22px 20px; } /* === LAUREL HEADING — Airbnb-style award framing ==================== Laurels flank the editorial heading to signal an editorial review. Soft layered drop shadow matches Airbnb's Guest Favorite treatment. */ .section-head-laurel{ margin-bottom:18px; } .section-head-laurel > p{ margin-top:6px; } .laurel-heading{ display:inline-flex; align-items:center; } .laurel-heading h2{ margin:0; flex:0 0 auto; position:relative; z-index:1; } .laurel-heading .laurel-left{ margin-right:-4px; } .laurel-heading .laurel-right{ margin-left:-4px; } .laurel-heading .laurel{ flex:0 0 auto; height:84px; width:auto; display:block; /* Airbnb-style soft layered drop shadow */ filter: drop-shadow(0 1px 1px rgba(0,0,0,0.18)) drop-shadow(0 4px 10px rgba(0,0,0,0.28)); } @media (max-width:520px){ .laurel-heading .laurel-left{ margin-right:-2px; } .laurel-heading .laurel-right{ margin-left:-2px; } .laurel-heading .laurel{ height:60px; } } .section-dark .editorial-byline{ color:var(--text-muted); } .section-dark .editorial-byline .byline-dot{ background:var(--text-muted); opacity:.6; } .section-dark .editorial-score{ border-bottom-color:var(--border); } .section-dark .editorial-score .es-num{ color:var(--text); } .section-dark .editorial-score .es-out{ color:var(--text-muted); } .section-dark .editorial-score .es-stars .star-empty{ color:#E5E5EA; } .section-dark .editorial-bar .eb-label{ color:var(--text); } .section-dark .editorial-bar .eb-track{ background:#ECECEE; } .section-dark .editorial-bar .eb-fill{ background:var(--charcoal); } .section-dark .editorial-bar .eb-value{ color:var(--text-muted); } .section-dark .editorial-quote{ color:var(--text); border-top-color:var(--border); } .section-dark .editorial-fit{ border-top-color:var(--border); } .section-dark .editorial-fit-col li{ color:var(--text); } .section-dark .editorial-fit-col.is-best h3{ color:#3F8268; } .section-dark .editorial-fit-col.is-skip h3{ color:#9A6128; } .section-dark .editorial-fit-col.is-best h3::before{ background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233F8268' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E"); } .section-dark .editorial-fit-col.is-skip h3::before{ background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239A6128' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='5' y1='12' x2='19' y2='12'/%3E%3C/svg%3E"); } .section-dark .editorial-fit-col.is-best li::before{ background:#3F8268; opacity:.55; } .section-dark .editorial-fit-col.is-skip li::before{ background:#9A6128; opacity:.55; } /* Best for / Skip if — decision-helper pair */ .editorial-fit{ display:grid; grid-template-columns:1fr; gap:16px; margin:16px 0 0; padding-top:16px; border-top:1px solid var(--border); } .editorial-fit-col h3{ font-size:11.5px; font-weight:600; margin:0 0 10px; display:flex; align-items:center; gap:8px; letter-spacing:.08em; text-transform:uppercase; color:var(--text-muted); } /* muted, magazine-editorial accents — sage + warm amber, NOT red/green */ .editorial-fit-col.is-best h3{ color:#4F8E7A; } .editorial-fit-col.is-skip h3{ color:#B8763E; } .editorial-fit-col.is-best h3::before{ content:""; display:inline-block; width:14px; height:14px; flex-shrink:0; background:no-repeat center / contain; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234F8E7A' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E"); } .editorial-fit-col.is-skip h3::before{ content:""; display:inline-block; width:14px; height:14px; flex-shrink:0; background:no-repeat center / contain; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23B8763E' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='5' y1='12' x2='19' y2='12'/%3E%3C/svg%3E"); } .editorial-fit-col ul{ list-style:none; margin:0; padding:0; } .editorial-fit-col li{ font-size:13.5px; line-height:1.55; color:var(--text); padding:0 0 0 18px; margin-bottom:8px; position:relative; } .editorial-fit-col li:last-child{ margin-bottom:0; } /* thin horizontal-line markers — magazine bullet, not colored dot */ .editorial-fit-col li::before{ content:""; position:absolute; left:0; top:10px; width:10px; height:1px; border-radius:0; background:var(--border-strong); } .editorial-fit-col.is-best li::before{ background:#4F8E7A; opacity:.55; } .editorial-fit-col.is-skip li::before{ background:#B8763E; opacity:.55; } /* ---- P3. External reviews aggregate (Google, Yelp) ------- */ .reviews-agg{ display:grid; grid-template-columns:1fr; gap:10px; margin:0; } .ra-card{ display:grid; grid-template-columns:auto auto 1fr auto; align-items:center; gap:14px; padding:14px 16px; background:#fff; border:1px solid var(--border); border-radius:12px; text-decoration:none; color:var(--text); transition:border-color .2s ease, box-shadow .2s ease, transform .2s ease; } .ra-card:hover{ border-color:var(--charcoal); box-shadow:0 1px 2px rgba(0,0,0,.04), 0 8px 24px rgba(0,0,0,.06); transform:translateY(-1px); } .ra-source{ display:flex; align-items:center; gap:8px; font-size:13.5px; font-weight:600; color:var(--text); letter-spacing:-0.005em; } .ra-logo{ width:22px; height:22px; flex-shrink:0; } .ra-score{ display:flex; align-items:center; gap:6px; } .ra-num{ font-size:18px; font-weight:600; color:var(--text); font-variant-numeric:tabular-nums; letter-spacing:-0.02em; } .ra-stars{ display:inline-flex; gap:1px; } .ra-stars svg{ width:12px; height:12px; color:var(--accent); } .ra-count{ font-size:12.5px; color:var(--text-muted); margin:0; } .ra-cta{ display:inline-flex; align-items:center; gap:5px; font-size:12.5px; font-weight:500; color:var(--text-muted); } .ra-cta svg{ width:12px; height:12px; } .reviews-agg-note{ font-size:11.5px; color:var(--text-muted); margin:12px 0 0; text-align:center; line-height:1.5; } /* Editorial caveat about public review scores at exclusive venues */ .reviews-context{ margin:14px 0 0; padding:14px 16px; background:#fff; border:1px solid var(--border); border-left:3px solid var(--charcoal); border-radius:0 12px 12px 0; } .reviews-context p{ font-size:12.5px; line-height:1.55; color:var(--text); margin:0; letter-spacing:-0.005em; } .reviews-context strong{ font-weight:600; } .reviews-context em{ font-style:italic; color:var(--text); } /* ---- Q0. Night timeline (What to expect tonight) -------- */ .night-timeline{ margin:18px 0 0; padding:18px; background:#fff; border:1px solid var(--border); border-radius:14px; } .nt-heading{ font-size:13px; font-weight:600; margin:0 0 14px; text-transform:uppercase; letter-spacing:.08em; color:var(--text-muted); } .nt-list{ list-style:none; margin:0; padding:0; position:relative; } .nt-list::before{ content:""; position:absolute; left:78px; top:6px; bottom:6px; width:1px; background:var(--border); } .nt-item{ display:grid; grid-template-columns:72px 16px 1fr; gap:0 12px; align-items:start; padding:0 0 14px; position:relative; } .nt-item:last-child{ padding-bottom:0; } .nt-time{ font-size:12.5px; font-weight:600; color:var(--text); font-variant-numeric:tabular-nums; text-align:right; padding-top:1px; letter-spacing:-0.01em; } .nt-marker{ width:11px; height:11px; margin:4px 0 0 2px; border-radius:50%; background:#fff; border:2px solid var(--border-strong); position:relative; z-index:1; } .nt-item.is-peak .nt-marker{ background:var(--accent); border-color:var(--accent); box-shadow:0 0 0 4px var(--accent-tint); } .nt-body p{ margin:0; } .nt-label{ font-size:13.5px; font-weight:600; color:var(--text); line-height:1.3; letter-spacing:-0.005em; } .nt-item.is-peak .nt-label{ color:var(--accent); } .nt-detail{ font-size:12.5px; color:var(--text-muted); line-height:1.45; margin-top:2px !important; } /* dark variant in case timeline ever moves to a dark section */ .section-dark .night-timeline{ background:var(--bg-dark-card); border-color:var(--border-dark); } .section-dark .nt-heading{ color:var(--text-muted-on-dark); } .section-dark .nt-list::before{ background:var(--border-dark); } .section-dark .nt-time{ color:var(--text-on-dark); } .section-dark .nt-marker{ background:var(--bg-dark-card); border-color:var(--border-dark); } .section-dark .nt-label{ color:var(--text-on-dark); } .section-dark .nt-detail{ color:var(--text-muted-on-dark); } /* ---- Q. Pros / Cons / Insider Tips (refined cards) ------- */ .insider-grid{ display:grid; grid-template-columns:1fr; gap:12px; } .insider-card{ background:#fff; border:1px solid var(--border); border-radius:14px; padding:18px 16px; transition:border-color .15s ease, box-shadow .2s ease; } .insider-card:hover{ border-color:var(--border-strong); box-shadow:0 1px 2px rgba(0,0,0,.03), 0 4px 12px rgba(0,0,0,.04); } .insider-card h3{ font-size:14px; font-weight:600; margin:0 0 12px; text-transform:none; letter-spacing:-0.005em; color:var(--text); display:flex; align-items:center; gap:8px; } .insider-card h3 .ic-badge{ display:inline-flex; align-items:center; justify-content:center; width:22px; height:22px; border-radius:6px; flex-shrink:0; } .insider-card h3 .ic-badge svg{ width:13px; height:13px; } .insider-card.is-pros h3 .ic-badge{ background:#EAF1ED; color:#4F8E7A; } .insider-card.is-cons h3 .ic-badge{ background:#F5EBDF; color:#B8763E; } .insider-card.is-tips h3 .ic-badge{ background:var(--accent-tint); color:var(--accent); } .insider-card ul{ list-style:none; margin:0; padding:0; } .insider-card li{ position:relative; padding:0 0 0 22px; margin-bottom:10px; font-size:13.5px; line-height:1.5; color:var(--text); } .insider-card li:last-child{ margin-bottom:0; } .insider-card li::before{ content:""; position:absolute; left:0; top:4px; width:14px; height:14px; background-repeat:no-repeat; background-position:center; background-size:contain; } .insider-card.is-pros li::before{ background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234F8E7A' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E"); } .insider-card.is-cons li::before{ background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23B8763E' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='5' y1='12' x2='19' y2='12'/%3E%3C/svg%3E"); } .insider-card.is-tips li::before{ background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23F81851' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 2l2.4 5.4 5.6.4-4.2 3.8 1.3 5.4L12 14.5 6.9 17l1.3-5.4L4 7.8l5.6-.4z'/%3E%3C/svg%3E"); top:5px; } /* ---- R. Photo gallery ------------------------------------ */ .gallery{ display:grid; grid-template-columns:1fr 1fr; grid-auto-rows:120px; gap:6px; border-radius:12px; overflow:hidden; } .gal-item{ position:relative; display:block; background:linear-gradient(160deg,#1A1A1A 0%,#2A2A2D 100%); overflow:hidden; transition:transform .15s ease; -webkit-tap-highlight-color: transparent; } .gal-item img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .4s cubic-bezier(.2,.6,.2,1); } .gal-item:hover img{ transform:scale(1.05); } .gal-item:active{ transform:scale(0.985); } /* Refined fallback — subtle gradient + small icon, NOT a giant pink monogram */ .gal-item.img-fallback{ background: radial-gradient(120% 120% at 30% 20%, rgba(255,255,255,.04), transparent 60%), linear-gradient(160deg,#161618 0%,#26262A 100%); } .gal-item.img-fallback::before{ content:""; position:absolute; inset:0; background:no-repeat center/24px 24px; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2348484F' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M23 19a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h4l2-3h6l2 3h4a2 2 0 0 1 2 2z'/%3E%3Ccircle cx='12' cy='13' r='4'/%3E%3C/svg%3E"); opacity:.9; } .gal-1{ grid-column:1 / -1; grid-row:span 2; } /* ---- S. Map / location ---------------------------------- */ .map-wrap{ border-radius:12px; overflow:hidden; border:1px solid var(--border); background:#f5f5f5; } .map-wrap iframe{ display:block; width:100%; height:260px; border:0; } .map-meta{ margin-top:12px; padding:14px; background:#fff; border:1px solid var(--border); border-radius:12px; } .map-meta .map-addr{ font-size:15px; font-weight:600; margin:0 0 2px; color:var(--text); line-height:1.3; letter-spacing:-0.01em; } .map-meta .map-cross{ font-size:13px; color:var(--text-muted); margin:0 0 14px; line-height:1.45; } .map-meta .map-facts{ list-style:none; margin:0 0 14px; padding:14px 0 0; border-top:1px solid var(--border); display:flex; flex-direction:column; gap:10px; } .map-meta .map-facts li{ display:flex; align-items:flex-start; gap:10px; font-size:13px; color:var(--text); line-height:1.5; } .map-meta .map-facts .mf-icon{ flex-shrink:0; width:18px; height:18px; color:var(--text-muted); margin-top:1px; } .map-meta .map-facts strong{ font-weight:600; } .map-actions{ display:flex; flex-wrap:wrap; gap:8px; margin-top:0; } .map-actions a{ display:inline-flex; align-items:center; gap:6px; font-size:13px; font-weight:500; color:var(--text); text-decoration:none; padding:9px 13px; background:#fff; border:1px solid var(--border-strong); border-radius:8px; transition:border-color .15s ease, background .15s ease, transform .15s ease; } .map-actions a::before{ content:""; width:14px; height:14px; flex-shrink:0; background:no-repeat center/contain; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231A1A1A' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='15 3 21 3 21 9'/%3E%3Cline x1='10' y1='14' x2='21' y2='3'/%3E%3Cpath d='M21 14v5a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5'/%3E%3C/svg%3E"); } .map-actions a:hover{ border-color:var(--charcoal); background:#FAFAFA; } /* ---- S2. Upcoming events rail (44 lineup) --------------- */ .events-rail{ display:flex; gap:12px; overflow-x:auto; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch; /* Bleed past container edges on mobile so swipe feels natural */ margin:0 calc(var(--pad-x) * -1); padding:4px var(--pad-x) 8px; scrollbar-width:none; } .events-rail::-webkit-scrollbar{ display:none; } .event-card{ flex:0 0 200px; scroll-snap-align:start; display:flex; flex-direction:column; gap:10px; } .event-card .ec-img-wrap{ position:relative; width:100%; aspect-ratio:1 / 1; border-radius:12px; overflow:hidden; background:linear-gradient(160deg,#1A1A1A 0%,#2A2A2D 100%); } .event-card .ec-img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .4s cubic-bezier(.2,.6,.2,1); } .event-card:hover .ec-img{ transform:scale(1.04); } .event-card .ec-img-wrap.ec-img-fallback::before{ content:""; position:absolute; inset:0; background:no-repeat center/28px 28px; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2348484F' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2'/%3E%3Cline x1='16' y1='2' x2='16' y2='6'/%3E%3Cline x1='8' y1='2' x2='8' y2='6'/%3E%3Cline x1='3' y1='10' x2='21' y2='10'/%3E%3C/svg%3E"); } .event-card .ec-name{ font-size:13.5px; font-weight:600; color:var(--text); margin:0; line-height:1.3; letter-spacing:-0.01em; } /* ---- S3. Plan-your-night summary box -------------------- */ .plan-section{ padding:0 0 4px; } .plan-card{ background:#fff; border:1px solid var(--border); border-left:3px solid var(--accent); border-radius:14px; padding:18px 18px 16px; box-shadow:0 1px 2px rgba(0,0,0,.03), 0 4px 16px rgba(0,0,0,.04); } .plan-card h2{ font-size:17px; font-weight:600; margin:0 0 2px; letter-spacing:-0.015em; } .plan-sub{ font-size:12.5px; color:var(--text-muted); margin:0 0 14px; line-height:1.4; } .plan-list{ list-style:none; margin:0 0 14px; padding:0; display:grid; gap:10px; } .plan-list li{ display:grid; grid-template-columns:120px 1fr; gap:10px; align-items:baseline; padding-bottom:10px; border-bottom:1px dashed var(--border); font-size:13px; line-height:1.45; } .plan-list li:last-child{ border-bottom:0; padding-bottom:0; } .pl-label{ font-size:11.5px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--text-muted); } .pl-value{ color:var(--text); font-weight:500; letter-spacing:-0.005em; } .plan-foot{ font-size:12.5px; color:var(--text-muted); margin:0; line-height:1.5; } .plan-foot a{ color:var(--text); font-weight:500; text-decoration:underline; text-decoration-color:var(--border-strong); text-underline-offset:2px; } .plan-foot a:hover{ color:var(--accent); text-decoration-color:var(--accent); } /* ---- S4. How to get in (collapsible accordion) ------------ */ .howto-list{ display:flex; flex-direction:column; gap:8px; } .howto-item{ background:#fff; border:1px solid var(--border); border-radius:12px; overflow:hidden; transition:border-color .2s ease, box-shadow .2s ease; } .howto-item[open]{ border-color:var(--border-strong); box-shadow:0 1px 2px rgba(0,0,0,.03), 0 4px 12px rgba(0,0,0,.04); } .howto-item summary{ list-style:none; display:flex; align-items:center; justify-content:space-between; gap:10px; padding:14px 16px; cursor:pointer; user-select:none; font-size:14px; font-weight:600; color:var(--text); letter-spacing:-0.005em; } .howto-item summary::-webkit-details-marker{ display:none; } .howto-item summary:hover{ background:var(--bg-soft); } .howto-icon{ flex-shrink:0; width:14px; height:14px; background:no-repeat center/contain; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231A1A1A' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E"); transition:transform .25s cubic-bezier(.2,.6,.2,1); } .howto-item[open] .howto-icon{ transform:rotate(-180deg); } .howto-body{ padding:0 16px 14px; } .howto-body ul{ list-style:none; margin:0; padding:0; } .howto-body li{ position:relative; padding:0 0 0 14px; font-size:13.5px; line-height:1.5; color:var(--text); margin-bottom:8px; } .howto-body li:last-child{ margin-bottom:0; } .howto-body li::before{ content:""; position:absolute; left:0; top:9px; width:6px; height:1px; background:var(--border-strong); } .howto-body strong{ font-weight:600; } /* ---- S5. Comparison table ----------------------------- */ .venue-compare-wrap{ border-radius:14px; border:1px solid var(--border); background:#fff; -webkit-overflow-scrolling:touch; } .venue-compare-wrap:focus-visible{ outline:2px solid var(--charcoal); outline-offset:2px; } .venue-compare{ width:100%; border-collapse:collapse; font-size:13px; } .venue-compare th, .venue-compare td{ padding:10px 12px; text-align:left; vertical-align:top; border-bottom:1px solid var(--border); letter-spacing:-0.005em; } .venue-compare thead th{ font-size:11px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--text-muted); background:var(--bg-soft); border-bottom:1px solid var(--border-strong); } .venue-compare tbody th{ font-weight:600; color:var(--text); white-space:nowrap; } .venue-compare tbody th a{ color:var(--text); text-decoration:underline; text-decoration-color:var(--border-strong); text-underline-offset:2px; } .venue-compare tbody th a:hover{ color:var(--accent); text-decoration-color:var(--accent); } .venue-compare tr:last-child td, .venue-compare tr:last-child th{ border-bottom:0; } .venue-compare tr.is-self{ background:rgba(248,24,81,.025); } .venue-compare tr.is-self th{ color:var(--accent); } /* Mobile: hide Music (col 3) and Price (col 4), show only the 3 most decision-relevant columns: Venue / Best for / Door difficulty. Music + Price are still in DOM for SEO and screen readers, they just don't render visually. */ @media (max-width:639px){ .venue-compare th:nth-child(3), .venue-compare td:nth-child(3), .venue-compare th:nth-child(4), .venue-compare td:nth-child(4){ display:none; } .venue-compare th, .venue-compare td{ padding:10px 10px; } .venue-compare tbody th{ white-space:normal; line-height:1.3; } } @media (min-width:640px){ .venue-compare-wrap{ overflow-x:auto; } .venue-compare{ min-width:560px; } } /* ---- S6. Source transparency / verify card ---------- */ .verify-card{ background:var(--bg-soft); border:1px solid var(--border); border-radius:14px; padding:18px 18px 14px; } .verify-card h2{ font-size:14px; font-weight:600; margin:0 0 10px; letter-spacing:-0.005em; } .verify-card > p{ font-size:13px; line-height:1.55; color:var(--text); margin:0 0 12px; } .verify-list{ list-style:none; margin:0 0 12px; padding:12px 0 0; border-top:1px solid var(--border); } .verify-list li{ position:relative; padding:0 0 0 14px; font-size:12.5px; line-height:1.5; color:var(--text); margin-bottom:6px; } .verify-list li:last-child{ margin-bottom:0; } .verify-list li::before{ content:""; position:absolute; left:0; top:9px; width:6px; height:1px; background:var(--border-strong); } .verify-list strong{ font-weight:600; } .verify-stamp{ font-size:11.5px; color:var(--text-muted); margin:10px 0 0; padding-top:10px; border-top:1px solid var(--border); line-height:1.5; } .verify-stamp time{ font-weight:500; color:var(--text); } /* ---- S7. Booking disclaimer ------------------------- */ .booking-disclaimer{ font-size:11.5px; color:var(--text-muted); margin:14px 0 0; line-height:1.5; text-align:center; padding:0 4px; } /* ---- S8. Events fallback variant -------------------- */ .event-card-fallback .ec-img-wrap{ background:linear-gradient(160deg,#1A1A1A 0%,#2A2A2D 100%); } .event-card .ec-meta{ font-size:12px; color:var(--text-muted); margin:2px 0 0; line-height:1.4; } .events-foot{ margin:18px 0 0; font-size:13px; text-align:center; } .events-foot a{ color:var(--text); font-weight:500; text-decoration:underline; text-decoration-color:var(--border-strong); text-underline-offset:3px; } .events-foot a:hover{ color:var(--accent); text-decoration-color:var(--accent); } /* ---- T. Similar clubs ------------------------------------ */ .similar-grid{ display:grid; grid-template-columns:1fr; gap:10px; } .similar-card{ display:flex; align-items:center; gap:12px; background:#fff; border:1px solid var(--border); border-radius:12px; padding:8px; text-decoration:none; color:var(--text); transition:border-color .2s ease, box-shadow .2s ease, transform .2s ease; overflow:hidden; -webkit-tap-highlight-color: transparent; } .similar-card:hover{ border-color:var(--charcoal); box-shadow:0 1px 2px rgba(0,0,0,.04), 0 8px 24px rgba(0,0,0,.06); transform:translateY(-2px); } .similar-card:active{ transform:translateY(0) scale(0.99); box-shadow:0 1px 2px rgba(0,0,0,.04); } .similar-card .sc-img{ flex:0 0 80px; width:80px; height:80px; border-radius:8px; overflow:hidden; position:relative; background:linear-gradient(160deg,#1F1F22 0%,#2E2E32 100%); } .similar-card .sc-img img{ width:100%; height:100%; object-fit:cover; display:block; } .similar-card .sc-img.img-fallback::before{ content: attr(data-letter); position:absolute; inset:0; display:grid; place-items:center; font-size:24px; font-weight:600; color:rgba(255,255,255,.32); letter-spacing:-0.02em; } .similar-card .sc-img-wide{ flex:0 0 110px; width:110px; aspect-ratio:16 / 10; height:auto; } .similar-card .sc-body h3{ font-size:14.5px; font-weight:600; margin:0 0 2px; line-height:1.25; letter-spacing:-0.01em; } .similar-card .sc-body p{ font-size:12.5px; color:var(--text-muted); margin:0; line-height:1.35; } /* ---- U. FAQ override on venue page ---------------------- */ .venue-page .faq-list{ margin-top:0; } .venue-page .faq-item{ background:transparent; border:0; border-bottom:1px solid var(--border); border-radius:0; margin-bottom:0; padding:0; overflow:visible; } .venue-page .faq-item:first-of-type{ border-top:1px solid var(--border); } .venue-page .faq-item summary{ font-size:14.5px; font-weight:600; line-height:1.4; cursor:pointer; list-style:none; display:flex; justify-content:space-between; align-items:flex-start; gap:12px; padding:14px 2px; } .venue-page .faq-item summary::-webkit-details-marker{ display:none; } .venue-page .faq-item .faq-answer{ padding:0 2px 14px; font-size:14px; color:var(--text); line-height:1.55; } .venue-page .faq-item .faq-answer p{ margin:0 0 8px; } .venue-page .faq-item .faq-answer p:last-child{ margin-bottom:0; } .venue-page .faq-icon{ position:relative; display:inline-block; width:16px; height:16px; flex-shrink:0; margin-top:3px; background:no-repeat center/contain; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231A1A1A' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E"); transition:transform .25s cubic-bezier(.2,.6,.2,1); } /* nuke v1 + bar pseudos on venue page */ .venue-page .faq-icon::before, .venue-page .faq-icon::after{ content:none; display:none; } .venue-page .faq-item[open] .faq-icon{ transform:rotate(-180deg); } /* ---- U2. Page updated stamp ------------------------------- */ .page-updated{ font-size:12px; color:var(--text-muted); margin:24px 0 0; text-align:center; line-height:1.5; } .page-updated time{ font-weight:500; color:var(--text); } /* ---- U4. Saved clubs grid (homepage) -------------------- */ .saved-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(240px, 1fr)); gap:14px; } .saved-card{ position:relative; background:#fff; border:1px solid var(--border); border-radius:14px; overflow:hidden; transition:border-color .2s ease, box-shadow .2s ease, transform .2s ease; } .saved-card:hover{ border-color:var(--charcoal); box-shadow:0 1px 2px rgba(0,0,0,.04), 0 8px 24px rgba(0,0,0,.06); transform:translateY(-1px); } .sv-link{ display:flex; align-items:center; gap:14px; padding:10px 56px 10px 10px; text-decoration:none; color:var(--text); } .sv-img{ flex:0 0 64px; width:64px; height:64px; border-radius:10px; overflow:hidden; position:relative; background:linear-gradient(160deg,#1F1F22 0%,#2E2E32 100%); } .sv-img img{ width:100%; height:100%; object-fit:cover; display:block; } .sv-img.sv-img-fallback::before{ content: attr(data-letter); position:absolute; inset:0; display:grid; place-items:center; color:rgba(255,255,255,.32); font-size:22px; font-weight:600; letter-spacing:-0.02em; } .sv-body h3{ font-size:14.5px; font-weight:600; margin:0 0 2px; line-height:1.25; letter-spacing:-0.01em; } .sv-area{ font-size:12.5px; color:var(--text-muted); margin:0; line-height:1.35; } .sv-remove{ position:absolute; top:50%; right:10px; transform:translateY(-50%); width:36px; height:36px; display:inline-flex; align-items:center; justify-content:center; background:transparent; border:0; cursor:pointer; color:var(--accent); border-radius:50%; transition:background .15s ease; } .sv-remove:hover{ background:var(--accent-tint); } .sv-remove svg{ width:18px; height:18px; } .section-head .link-btn{ background:none; border:0; font-size:13px; font-weight:500; color:var(--text-muted); cursor:pointer; padding:6px 10px; border-radius:6px; transition:color .15s ease, background .15s ease; } .section-head .link-btn:hover{ color:var(--text); background:var(--bg-soft); } /* ---- U3. Save toast ----------------------------------- */ .tnc-toast{ position:fixed; left:50%; bottom:90px; transform:translateX(-50%) translateY(8px); z-index:200; background:var(--charcoal); color:#fff; font-size:13.5px; font-weight:500; padding:10px 16px; border-radius:999px; box-shadow:0 8px 24px rgba(0,0,0,.25); opacity:0; transition:opacity .2s ease, transform .2s ease; pointer-events:none; letter-spacing:-0.005em; } .tnc-toast.is-visible{ opacity:1; transform:translateX(-50%) translateY(0); } @media (min-width:640px){ .tnc-toast{ bottom:32px; } /* no sticky bar on desktop */ } /* ---- V. Sticky mobile book bar --------------------------- */ .sticky-book-bar{ position:fixed; left:0; right:0; bottom:0; z-index:50; display:flex; align-items:center; justify-content:space-between; gap:10px; padding:10px 14px; background:#fff; border-top:1px solid var(--border); box-shadow:0 -4px 20px rgba(0,0,0,.06); transform:translateY(0); transition:transform .25s ease, opacity .25s ease; padding-bottom: calc(10px + env(safe-area-inset-bottom)); } .sticky-book-bar.is-hidden{ transform:translateY(110%); opacity:0; pointer-events:none; } .sticky-book-bar > div{ display:flex; flex-direction:column; min-width:0; } .sticky-book-bar .sb-label{ font-size:13.5px; font-weight:600; color:var(--text); line-height:1.2; } .sticky-book-bar .sb-meta{ font-size:11.5px; color:var(--text-muted); line-height:1.2; margin-top:1px; } .sticky-book-bar .btn{ padding:10px 16px; min-height:42px; font-size:14px; border-radius:10px; } /* ---- W. Confirmation pages ------------------------------- */ .confirm-section{ padding:40px 0 32px; } .confirm-section.confirm-soft{ background:var(--bg-soft); } .confirm-card{ background:#fff; border:1px solid var(--border); border-radius:14px; padding:28px 20px; text-align:center; box-shadow:0 6px 20px rgba(0,0,0,.06); } .confirm-card .confirm-icon{ display:inline-flex; align-items:center; justify-content:center; width:56px; height:56px; background:#E8F8EE; color:#1A7F37; border-radius:50%; margin-bottom:14px; } .confirm-card .confirm-icon-info{ background:#FFF1F4; color:var(--accent); } .confirm-card h1{ font-size:22px; font-weight:700; margin:0 0 8px; letter-spacing:-0.02em; } .confirm-lead{ font-size:15px; color:var(--text); max-width:54ch; margin:0 auto 20px; line-height:1.55; } .confirm-actions{ display:flex; flex-direction:column; gap:8px; align-items:stretch; max-width:380px; margin:0 auto; } .confirm-actions .btn{ border-radius:10px; } /* ============================================================ Tablet / desktop overrides for venue v2 ============================================================ */ @media (min-width:640px){ .venue-hero-img{ aspect-ratio:21 / 9; } .venue-hero-text{ padding-bottom:32px; } .venue-hero-text h1{ font-size:46px; letter-spacing:-0.03em; } .venue-hero-text .venue-sub{ font-size:15px; } .venue-eyebrow{ font-size:11px; } /* Hero meta — inline on tablet+ since width allows */ .hero-meta-row{ flex-direction:row; align-items:center; gap:10px; } .hero-dot{ display:inline-block; } .quick-row{ grid-template-columns:repeat(3,1fr); gap:14px 22px; } .booking-card{ padding:20px 18px; } .booking-head h2{ font-size:19px; } .form-grid{ grid-template-columns:1fr 1fr; gap:12px 14px; } .fact-strip{ grid-template-columns:repeat(3,1fr); padding:16px 18px; gap:14px 18px; } .vibe-grid{ grid-template-columns:1fr 1fr; gap:12px; } .insider-grid{ grid-template-columns:repeat(3,1fr); gap:12px; } .plan-list li{ grid-template-columns:160px 1fr; } .editorial-fit{ grid-template-columns:1fr 1fr; gap:18px; } .price-context{ grid-template-columns:1fr 1fr; gap:14px; } .reviews-agg{ grid-template-columns:1fr 1fr; gap:12px; } .bottle-pricing{ gap:8px; } .gallery{ grid-template-columns:2fr 1fr 1fr; grid-auto-rows:160px; gap:8px; } .gal-1{ grid-column:1 / 2; grid-row:1 / 3; } .map-wrap iframe{ height:340px; } .similar-grid{ grid-template-columns:1fr 1fr; gap:12px; } .confirm-actions{ flex-direction:row; justify-content:center; max-width:none; } .confirm-actions .btn{ flex:0 0 auto; } .confirm-card{ padding:40px 36px; } .confirm-card h1{ font-size:26px; } .sticky-book-bar{ display:none; } .venue-page .section{ padding:32px 0; } .venue-page .section-head h2{ font-size:24px; } .venue-prose p{ font-size:14.5px; line-height:1.6; } .editorial-quote{ font-size:14.5px; line-height:1.6; } /* Events rail becomes a grid at 640px+ */ .events-rail{ display:grid; grid-template-columns:repeat(3, 1fr); gap:16px; overflow:visible; margin:0; padding:0; } .event-card{ flex:none; } } @media (min-width:900px){ .venue-hero-img{ aspect-ratio:21 / 9; max-height:560px; } .venue-hero-text{ padding-bottom:44px; } .venue-hero-text h1{ font-size:64px; letter-spacing:-0.035em; line-height:1.02; } .venue-hero-text .venue-sub{ font-size:16px; } .venue-eyebrow{ font-size:11.5px; } .quick-row{ grid-template-columns:repeat(6,1fr); gap:0 24px; } .booking-card{ padding:24px 24px; } .booking-head h2{ font-size:20px; } .vibe-grid{ grid-template-columns:repeat(4,1fr); } .gallery{ grid-auto-rows:200px; gap:10px; } .similar-grid{ grid-template-columns:repeat(4,1fr); } .similar-card{ flex-direction:column; align-items:stretch; padding:0; } .similar-card .sc-img, .similar-card .sc-img-wide{ flex:0 0 auto; width:100%; height:auto; aspect-ratio:4 / 3; border-radius:0; } .similar-card .sc-body{ padding:12px 14px 16px; } .similar-grid-events .similar-card{ flex-direction:column; } .similar-grid-events .sc-img-wide{ aspect-ratio:16 / 10; } .events-rail{ grid-template-columns:repeat(4, 1fr); gap:18px; } .confirm-section{ padding:64px 0 48px; } .confirm-card{ padding:48px 48px; } .confirm-card h1{ font-size:30px; } .venue-page .section-head h2{ font-size:26px; } } /* ============================================================ DIRECTORY PAGE — /toronto-nightclubs/ Resy-style cards + Airbnb-style filters. Mobile-first; 2-column grid above 900px. ============================================================ */ .directory-page main{ padding-bottom:40px; } /* ---- Intro / breadcrumb ---------------------------------- */ .dir-intro{ padding:20px 0 4px; background:#fff; } .directory-page .breadcrumb{ font-size:12.5px; color:var(--text-muted); margin-bottom:8px; } .directory-page .breadcrumb ol{ list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:6px; } .directory-page .breadcrumb li:not(:last-child)::after{ content:"/"; margin-left:6px; color:var(--text-muted); opacity:.5; } .directory-page .breadcrumb a{ color:var(--text-muted); text-decoration:none; border-bottom:1px solid transparent; transition:border-color .15s ease, color .15s ease; } .directory-page .breadcrumb a:hover{ color:var(--text); border-bottom-color:var(--text); } .directory-page .breadcrumb [aria-current]{ color:var(--text); font-weight:500; } .dir-intro h1{ font-size:26px; font-weight:700; margin:0 0 8px; letter-spacing:-0.025em; line-height:1.15; } .dir-sub{ font-size:14.5px; line-height:1.55; color:var(--text-muted); margin:0; letter-spacing:-0.005em; } @media (min-width:640px){ .dir-intro h1{ font-size:34px; } .dir-sub{ font-size:16px; max-width:680px; } } /* ---- Sticky filter bar ----------------------------------- */ .dir-filterbar{ position:sticky; top:0; z-index:60; background:rgba(255,255,255,.96); backdrop-filter:saturate(150%) blur(8px); -webkit-backdrop-filter:saturate(150%) blur(8px); border-bottom:1px solid var(--border); margin-top:18px; padding:14px 0 10px; } .filter-row{ display:flex; align-items:center; gap:10px; } .filter-pills{ flex:1 1 auto; min-width:0; display:flex; gap:8px; overflow-x:auto; scrollbar-width:none; -ms-overflow-style:none; scroll-snap-type:x proximity; padding-bottom:2px; -webkit-overflow-scrolling:touch; } .filter-pills::-webkit-scrollbar{ display:none; } .filter-pill{ flex:0 0 auto; scroll-snap-align:start; display:inline-flex; align-items:center; padding:8px 14px; font-size:13px; font-weight:500; color:var(--text); background:#fff; border:1px solid var(--border); border-radius:999px; cursor:pointer; transition:background .15s ease, border-color .15s ease, color .15s ease, transform .1s ease; white-space:nowrap; letter-spacing:-0.005em; -webkit-tap-highlight-color:transparent; } .filter-pill:hover{ border-color:var(--charcoal); } .filter-pill:active{ transform:scale(0.97); } .filter-pill.is-active{ background:var(--charcoal); color:#fff; border-color:var(--charcoal); } .filter-more-btn{ flex:0 0 auto; display:inline-flex; align-items:center; gap:6px; padding:8px 14px; font-size:13px; font-weight:500; color:var(--text); background:#fff; border:1px solid var(--charcoal); border-radius:999px; cursor:pointer; transition:background .15s ease, transform .1s ease; letter-spacing:-0.005em; -webkit-tap-highlight-color:transparent; } .filter-more-btn:hover{ background:var(--bg-soft); } .filter-more-btn:active{ transform:scale(0.97); } .filter-more-btn svg{ width:14px; height:14px; } .filter-badge{ display:inline-flex; align-items:center; justify-content:center; min-width:18px; height:18px; padding:0 5px; background:var(--accent); color:#fff; font-size:11px; font-weight:600; border-radius:999px; margin-left:2px; letter-spacing:0; } .filter-badge[hidden]{ display:none !important; } .dir-count{ font-size:12.5px; color:var(--text-muted); margin:8px 0 0; letter-spacing:-0.005em; } /* ---- Results / card grid --------------------------------- */ .dir-results{ padding:18px 0; } .club-grid{ display:grid; grid-template-columns:1fr; gap:12px; } @media (min-width:900px){ .club-grid{ grid-template-columns:1fr 1fr; gap:16px; } } .dir-empty{ text-align:center; color:var(--text-muted); padding:40px 20px; font-size:14px; line-height:1.6; } .dir-empty strong{ display:block; color:var(--text); margin-bottom:4px; font-size:15px; } .dir-empty .link-btn{ background:none; border:0; color:var(--text); font-weight:500; text-decoration:underline; text-decoration-color:var(--border-strong); text-underline-offset:2px; cursor:pointer; padding:0; font-size:inherit; } .dir-empty .link-btn:hover{ color:var(--accent); text-decoration-color:var(--accent); } /* ---- Resy-style club card -------------------------------- */ /* ---- Resy-style compact card (mobile-first, dense list) ---- Pattern is a single-row tap target: [ 84px square image ][ name → cuisine/area → 1-line meta → ] No description block, no tag pills, no in-card buttons. Whole card is the link to the venue page; "Book Guestlist" lives there. Target height: ~104px on mobile. */ .dir-club-card{ position:relative; display:flex; align-items:stretch; gap:0; background:#fff; border:1px solid var(--border); border-radius:12px; overflow:hidden; transition:border-color .2s ease, box-shadow .2s ease, transform .12s ease; -webkit-tap-highlight-color:transparent; } .dir-club-card:hover{ border-color:var(--charcoal); box-shadow:0 1px 2px rgba(0,0,0,.04), 0 6px 18px rgba(0,0,0,.05); } .dir-club-card:active{ transform:scale(0.99); } /* The whole card surface is the venue link — stretches over the row */ .dir-club-card .card-link{ position:absolute; inset:0; z-index:1; } .club-img-link{ flex:0 0 auto; display:block; position:relative; width:84px; height:84px; margin:10px 0 10px 10px; border-radius:8px; overflow:hidden; z-index:2; } .club-img{ width:100%; height:100%; position:relative; overflow:hidden; background:linear-gradient(160deg,#1F1F22 0%,#2E2E32 100%); } .club-img img{ width:100%; height:100%; object-fit:cover; display:block; } .club-img.img-fallback::before{ content:attr(data-letter); position:absolute; inset:0; display:grid; place-items:center; color:rgba(255,255,255,.32); font-size:32px; font-weight:600; letter-spacing:-0.03em; } .club-body{ flex:1 1 auto; min-width:0; display:flex; flex-direction:column; justify-content:center; padding:10px 12px; gap:2px; } .club-head{ display:flex; flex-direction:column; gap:1px; min-width:0; } .club-head h3{ font-size:15px; font-weight:600; margin:0; line-height:1.2; letter-spacing:-0.015em; color:var(--text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .club-area{ display:flex; align-items:center; gap:8px; font-size:12.5px; color:var(--text-muted); margin:0; letter-spacing:-0.005em; min-width:0; } .club-area > span:first-child{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-width:0; } /* Price tier badge — pill, varies by tier */ .club-price{ flex-shrink:0; display:inline-flex; align-items:center; font-size:11px; font-weight:600; padding:2px 7px; border-radius:4px; letter-spacing:0; line-height:1.4; } .club-price.is-free{ color:#3F8268; background:#E8F4EE; } .club-price.is-paid{ color:var(--text); background:var(--bg-soft); border:1px solid var(--border); font-variant-numeric:tabular-nums; } /* Single-line meta: music genres, separated by middots. */ .club-meta-line{ font-size:11.5px; color:var(--text-muted); margin:3px 0 0; letter-spacing:-0.005em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } /* Pink Book CTA — small but unmissable. Sits above .card-link via z-index so tapping the button takes you straight to the booking flow, while tapping anywhere else opens the venue page. */ .club-cta{ position:relative; z-index:2; flex:0 0 auto; align-self:center; margin-right:10px; display:inline-flex; align-items:center; justify-content:center; padding:7px 11px; font-size:11.5px; font-weight:600; color:#fff; background:var(--accent); border:1px solid var(--accent); border-radius:6px; text-decoration:none; letter-spacing:-0.005em; white-space:nowrap; transition:background .15s ease, transform .1s ease; -webkit-tap-highlight-color:transparent; } .club-cta:hover{ background:#E5154A; border-color:#E5154A; } .club-cta:active{ transform:scale(0.96); } /* Hide the old elements we used to ship — kept here so any leftover markup in cached pages won't break, but they don't render. */ .club-desc, .club-tags, .club-tag, .club-meta, .club-actions, .club-chev{ display:none !important; } /* ---- Conversion CTA -------------------------------------- */ .dir-cta{ padding:8px 0 24px; } .dir-cta-card{ background:#fff; border:1px solid var(--border); border-radius:16px; padding:22px 20px; display:flex; flex-direction:column; gap:14px; box-shadow:0 1px 2px rgba(0,0,0,.03); } .dir-cta-card h2{ font-size:19px; font-weight:600; margin:0 0 4px; letter-spacing:-0.015em; line-height:1.25; } .dir-cta-card p{ font-size:13.5px; line-height:1.55; color:var(--text-muted); margin:0; letter-spacing:-0.005em; } .dir-cta-card .btn{ align-self:flex-start; } @media (min-width:700px){ .dir-cta-card{ flex-direction:row; align-items:center; gap:24px; padding:24px 28px; } .dir-cta-card h2{ font-size:22px; } .dir-cta-card .btn{ flex-shrink:0; } } /* ---- Internal links section ------------------------------ */ .dir-links{ padding:18px 0 32px; } .dir-links h2{ font-size:18px; font-weight:600; margin:0 0 12px; letter-spacing:-0.015em; } .dir-link-grid{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:1fr; gap:8px; } @media (min-width:700px){ .dir-link-grid{ grid-template-columns:1fr 1fr; } } .dir-link-grid a{ display:flex; justify-content:space-between; align-items:center; gap:10px; padding:14px 16px; background:#fff; border:1px solid var(--border); border-radius:10px; text-decoration:none; color:var(--text); font-size:14px; font-weight:500; transition:border-color .15s ease, color .15s ease, transform .15s ease; letter-spacing:-0.005em; } .dir-link-grid a:hover{ border-color:var(--charcoal); color:var(--accent); transform:translateY(-1px); } .dir-link-grid svg{ width:14px; height:14px; flex-shrink:0; } /* ---- Filter panel (off-canvas) --------------------------- */ .filter-panel{ position:fixed; inset:0; z-index:200; display:flex; flex-direction:column; } .filter-panel[hidden]{ display:none !important; } .filter-panel-overlay{ position:absolute; inset:0; background:rgba(0,0,0,0); transition:background .25s ease; cursor:pointer; } .filter-panel.is-open .filter-panel-overlay{ background:rgba(0,0,0,.5); } .filter-panel-inner{ position:absolute; left:0; right:0; bottom:0; max-height:88vh; background:#fff; border-radius:18px 18px 0 0; display:flex; flex-direction:column; transform:translateY(100%); transition:transform .25s cubic-bezier(.2,.6,.2,1); } .filter-panel.is-open .filter-panel-inner{ transform:translateY(0); } @media (min-width:700px){ .filter-panel-inner{ left:auto; right:0; top:0; width:420px; max-height:none; height:100%; border-radius:18px 0 0 18px; transform:translateX(100%); } .filter-panel.is-open .filter-panel-inner{ transform:translateX(0); } } .filter-panel-head{ display:flex; align-items:center; justify-content:space-between; padding:16px 18px; border-bottom:1px solid var(--border); flex-shrink:0; } .filter-panel-head h2{ font-size:17px; font-weight:600; margin:0; letter-spacing:-0.015em; } .filter-panel-close{ width:36px; height:36px; display:inline-flex; align-items:center; justify-content:center; background:#fff; border:1px solid var(--border); border-radius:50%; cursor:pointer; color:var(--text); -webkit-tap-highlight-color:transparent; } .filter-panel-close:hover{ background:var(--bg-soft); } .filter-panel-close svg{ width:16px; height:16px; } .filter-panel-body{ flex:1 1 auto; overflow-y:auto; padding:14px 18px 18px; -webkit-overflow-scrolling:touch; } .filter-group{ border:0; padding:0; margin:0 0 18px; } .filter-group:last-child{ margin-bottom:0; } .filter-group legend{ font-size:13px; font-weight:600; margin-bottom:8px; padding:0; color:var(--text); letter-spacing:-0.005em; } .filter-chip-grid{ display:flex; flex-wrap:wrap; gap:6px; } .filter-chip-grid label{ display:inline-flex; align-items:center; cursor:pointer; -webkit-tap-highlight-color:transparent; } .filter-chip-grid input[type="checkbox"]{ position:absolute; opacity:0; pointer-events:none; } .filter-chip-grid label span{ display:inline-flex; align-items:center; padding:7px 12px; font-size:12.5px; font-weight:500; background:#fff; border:1px solid var(--border); border-radius:999px; color:var(--text); transition:background .15s ease, border-color .15s ease, color .15s ease; letter-spacing:-0.005em; } .filter-chip-grid label:hover span{ border-color:var(--charcoal); } .filter-chip-grid input:checked + span{ background:var(--charcoal); color:#fff; border-color:var(--charcoal); } .filter-chip-grid input:focus-visible + span{ outline:2px solid var(--accent); outline-offset:2px; } .filter-panel-foot{ flex-shrink:0; display:flex; align-items:center; justify-content:space-between; padding:14px 18px; border-top:1px solid var(--border); gap:12px; } .btn-text{ background:none; border:0; font-size:13px; font-weight:500; color:var(--text); cursor:pointer; padding:8px 4px; text-decoration:underline; text-decoration-color:var(--border-strong); text-underline-offset:2px; } .btn-text:hover{ color:var(--accent); text-decoration-color:var(--accent); } .filter-panel-foot .btn{ flex:1 1 auto; } /* ============================================================ DIRECTORY PAGE — UPGRADES - Heart save button - Fineprint disclaimer - Stronger active pill state - Filter chip "(n)" counts + zero state ============================================================ */ /* Tiny price-tier disclaimer under the intro */ .dir-fineprint{ margin:8px 0 0; font-size:11.5px; color:var(--text-muted); letter-spacing:-0.005em; line-height:1.5; } /* Stronger active pill: charcoal fill plus subtle inner highlight */ .filter-pill.is-active{ background:var(--charcoal); color:#fff; border-color:var(--charcoal); box-shadow:0 1px 2px rgba(0,0,0,.08); } /* Filter button gets pink dot when filters active (extra signal beyond badge) */ .filter-more-btn:has(.filter-badge:not([hidden])){ border-color:var(--accent); color:var(--accent); } /* Heart save button. Sits above .card-link via z-index. */ .club-save{ position:relative; z-index:2; flex:0 0 auto; align-self:center; display:inline-flex; align-items:center; justify-content:center; width:32px; height:32px; padding:0; margin-right:6px; background:transparent; border:0; border-radius:50%; cursor:pointer; color:var(--text-muted); transition:background .15s ease, color .15s ease, transform .12s ease; -webkit-tap-highlight-color:transparent; } .club-save:hover{ background:var(--bg-soft); color:var(--text); } .club-save:active{ transform:scale(0.9); } .club-save svg{ width:18px; height:18px; fill:transparent; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; transition:fill .18s ease, stroke .18s ease, transform .15s ease; } .club-save.is-saved{ color:var(--accent); } .club-save.is-saved svg{ fill:var(--accent); stroke:var(--accent); transform:scale(1.05); } .club-save:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; } /* Featured ★ pin next to club name on partner venues */ .club-featured{ width:12px; height:12px; flex-shrink:0; color:#C99A3B; margin-right:5px; vertical-align:-1px; display:inline-block; } /* Featured card — visual signal lives on the ★ next to the name only. No corner accent or border treatment. */ .dir-club-card.is-featured{ position:relative; } /* Nights signal — small calendar icon + day-range below music meta */ .club-nights{ display:inline-flex; align-items:center; gap:4px; margin-top:2px; font-size:11px; color:var(--text-muted); letter-spacing:-0.005em; white-space:nowrap; } .club-nights svg{ width:11px; height:11px; flex-shrink:0; opacity:.7; } /* Stronger active state for filter pill — bumps from charcoal-bg to accent-pink so users can spot it at a glance while scrolling. */ .filter-pill.is-active{ background:var(--charcoal); color:#fff; border-color:var(--charcoal); box-shadow:0 0 0 1px var(--charcoal); } .filter-pill.is-active:not([data-quick="all"])::before{ content:""; display:inline-block; width:6px; height:6px; border-radius:50%; background:var(--accent); margin-right:6px; vertical-align:1px; } /* Filter chip count appearance + zero state */ .filter-chip-grid label.is-zero span{ opacity:.45; text-decoration:line-through; text-decoration-thickness:1px; } .filter-chip-grid label.is-zero{ pointer-events:none; } /* Re-enable interaction if the user already selected this option, so they can deselect it even when count is zero relative to other filters. */ .filter-chip-grid label.is-zero input:checked + span{ opacity:1; text-decoration:none; } .filter-chip-grid label.is-zero:has(input:checked){ pointer-events:auto; } /* Empty state — uppercase strong + clear-all link button */ .dir-empty{ text-align:center; padding:48px 20px; color:var(--text-muted); font-size:13.5px; line-height:1.55; letter-spacing:-0.005em; } .dir-empty strong{ display:block; color:var(--text); font-size:15px; font-weight:600; margin-bottom:6px; letter-spacing:-0.01em; } .dir-empty .link-btn{ background:none; border:0; padding:0; color:var(--accent); font-weight:500; cursor:pointer; font-size:inherit; font-family:inherit; text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:2px; } .dir-empty .link-btn:hover{ color:var(--accent-dark); } /* Tighten card-body so the heart + CTA fit alongside */ @media (max-width:380px){ .club-save{ width:28px; height:28px; margin-right:4px; } .club-save svg{ width:16px; height:16px; } .club-cta{ padding:6px 9px; font-size:11px; } } /* Empty-state filter tag highlight */ .dir-empty .empty-tag{ display:inline-block; background:var(--bg-soft); border:1px solid var(--border); padding:1px 7px; border-radius:6px; font-size:13px; color:var(--text); margin:0 2px; font-weight:500; } /* === DIRECTORY V2 — added: sort, nights, featured, panel counts === */ /* Sort + count row sits below the filter pills */ .filter-meta-row{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:8px; } .filter-meta-row .dir-count{ margin:0; flex:1 1 auto; min-width:0; } .dir-sort{ position:relative; flex:0 0 auto; display:inline-flex; align-items:center; font-size:12.5px; font-weight:500; color:var(--text); -webkit-tap-highlight-color:transparent; } .dir-sort select{ appearance:none; -webkit-appearance:none; background:#fff; border:1px solid var(--border); border-radius:999px; padding:6px 28px 6px 12px; font-size:12.5px; font-weight:500; font-family:inherit; color:var(--text); cursor:pointer; letter-spacing:-0.005em; } .dir-sort select:hover{ border-color:var(--charcoal); } .dir-sort svg{ position:absolute; right:10px; top:50%; transform:translateY(-50%); width:12px; height:12px; color:var(--text-muted); pointer-events:none; } .visually-hidden{ position:absolute !important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; } /* Active pill — make it pop more for scrolled-deep visibility */ .filter-pill.is-active{ background:var(--charcoal); color:#fff; border-color:var(--charcoal); box-shadow:0 1px 3px rgba(26,26,26,.18); } /* Nights line — small, with calendar icon */ .club-nights{ display:inline-flex; align-items:center; gap:4px; font-size:11px; color:var(--text-muted); margin-top:3px; letter-spacing:-0.005em; white-space:nowrap; } .club-nights svg{ width:11px; height:11px; flex-shrink:0; } /* Featured pin — small ★ before the venue name */ .club-featured{ display:inline-block; width:13px; height:13px; margin-right:5px; vertical-align:-1px; color:var(--accent); flex-shrink:0; } .dir-club-card.is-featured{ /* Subtle accent on the left edge — very faint, not loud */ position:relative; } /* Filter panel chip counts */ .filter-chip-grid label.is-zero span{ opacity:.4; } .filter-chip-grid label.is-zero{ pointer-events:none; } /* dir-links updated content */ .dir-links{ padding:18px 0 32px; } .dir-links h2{ font-size:18px; font-weight:600; margin:0 0 6px; letter-spacing:-0.015em; } .dir-links-sub{ font-size:13.5px; line-height:1.55; color:var(--text-muted); margin:0 0 14px; letter-spacing:-0.005em; } .dir-links-cta .btn{ display:inline-flex; align-items:center; } /* Smart empty state */ .dir-empty strong{ color:var(--text); } .dir-empty strong strong{ color:var(--accent); font-weight:600; } /* === FILTER META ROW (count + sort) ============================ */ .filter-meta-row{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:8px; } .filter-meta-row .dir-count{ margin:0; flex:1 1 auto; min-width:0; } .dir-sort{ position:relative; display:inline-flex; align-items:center; flex:0 0 auto; } .visually-hidden{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; } .dir-sort select{ appearance:none; -webkit-appearance:none; -moz-appearance:none; background:transparent; border:1px solid var(--border); border-radius:8px; padding:6px 28px 6px 12px; font-size:12.5px; font-weight:500; color:var(--text); font-family:inherit; letter-spacing:-0.005em; cursor:pointer; line-height:1.4; } .dir-sort select:hover{ border-color:var(--charcoal); } .dir-sort select:focus-visible{ outline:2px solid var(--accent); outline-offset:1px; } .dir-sort > svg{ position:absolute; right:10px; top:50%; width:12px; height:12px; color:var(--text-muted); pointer-events:none; transform:translateY(-50%); } /* === FEATURED PIN ============================================== */ .club-featured-pin{ position:absolute; top:6px; left:6px; z-index:3; display:inline-flex; align-items:center; justify-content:center; width:18px; height:18px; background:var(--accent); border-radius:50%; color:#fff; font-size:10px; pointer-events:none; box-shadow:0 1px 3px rgba(0,0,0,.2); } .club-featured-pin svg{ width:10px; height:10px; } /* === DIR-LINKS CTA WRAP (for if dir-links has a CTA inside) ==== */ .dir-links-cta{ margin-top:14px; } /* Empty state — highlight named filters */ .empty-tag{ display:inline-block; background:rgba(248,24,81,.08); color:var(--accent); border-radius:6px; padding:1px 7px; font-weight:600; font-size:13.5px; } /* ============================================================= BEST-CLUBS ARTICLE — UX/UI UPGRADE PASS Editorial styling closer to The Infatuation, mobile-first. ============================================================= */ /* --- 1. Team byline with TNC circle logo --- */ .article-byline{ display:flex; align-items:center; gap:10px; margin:14px 0 0; padding:0; font-size:14px; color:var(--text-muted); } .article-byline-avatar{ width:32px; height:32px; border-radius:50%; flex:0 0 auto; box-shadow:0 1px 2px rgba(0,0,0,.08), 0 4px 10px rgba(0,0,0,.04); } .article-byline strong{ color:var(--text); font-weight:600; } .article-byline .dot{ opacity:.5; padding:0 2px; } /* --- 2. Quick-pick thumbnails (logos beside each best-X row) --- */ .quick-picks{ list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:8px; } .quick-picks li > a{ display:flex; align-items:center; gap:14px; padding:14px 16px; background:#fff; border:1px solid var(--border); border-radius:14px; color:var(--text); text-decoration:none; transition:border-color .15s ease, transform .15s ease, box-shadow .15s ease; } .quick-picks li > a:hover{ border-color:var(--text); transform:translateY(-1px); box-shadow:0 2px 6px rgba(0,0,0,.04), 0 8px 20px rgba(0,0,0,.06); } .qp-logo{ flex:0 0 auto; width:48px; height:48px; border-radius:10px; background:#1a1a1a; display:flex; align-items:center; justify-content:center; overflow:hidden; padding:6px; } .qp-logo img{ max-width:100%; max-height:100%; width:auto; height:auto; display:block; } .qp-logo--letter{ background:linear-gradient(135deg,#2a2a2a,#1a1a1a); color:#fff; font:700 18px/1 var(--font); letter-spacing:.04em; padding:0; } .qp-text{ display:flex; flex-direction:column; min-width:0; flex:1; } .qp-label{ font-size:10.5px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--text-muted); margin-bottom:2px; } .qp-name{ font-size:16px; font-weight:600; color:var(--text); } .qp-arrow{ flex:0 0 auto; color:var(--text-muted); transition:transform .15s ease, color .15s ease; } .quick-picks li > a:hover .qp-arrow{ color:var(--text); transform:translateX(2px); } /* --- 3. Filter chips: dropdown on mobile, chip strip on desktop --- */ .filter-select-wrap{ display:none; padding:10px 0; } .filter-select{ width:100%; appearance:none; -webkit-appearance:none; -moz-appearance:none; font:600 15px/1 var(--font); color:var(--text); background:#fff url("data:image/svg+xml;utf8,") no-repeat right 14px center; border:1px solid var(--border-strong); border-radius:12px; padding:14px 44px 14px 16px; min-height:48px; } .filter-select:focus{ outline:none; border-color:var(--text); box-shadow:0 0 0 3px rgba(0,0,0,.06); } @media (max-width:700px){ .filter-chips{ display:none; } .filter-select-wrap{ display:block; } } /* --- 4. CTA buttons → rounded rectangles (was pill) --- */ .venue-cta .btn{ border-radius:12px; padding:14px 22px; font-weight:600; font-size:15px; letter-spacing:0; min-height:48px; display:inline-flex; align-items:center; justify-content:center; } .venue-cta{ display:flex; gap:10px; } .venue-cta .btn{ flex:1 1 0; } /* --- 5. Logo-on-dark placeholder for venues missing photos --- */ .venue-img.is-logo-card{ background:linear-gradient(135deg,#1f1f1f 0%,#0f0f0f 100%); display:flex; align-items:center; justify-content:center; padding:40px 32px; position:relative; overflow:hidden; } .venue-img.is-logo-card::before{ content:""; position:absolute; inset:0; background:radial-gradient(ellipse at 30% 30%, rgba(248,24,81,.10), transparent 60%); pointer-events:none; } .venue-img.is-logo-card img{ position:relative; max-width:75%; max-height:55%; width:auto; height:auto; filter:drop-shadow(0 2px 6px rgba(0,0,0,.4)); } /* --- 6. Editorial scenarios in "How to Choose" — Infatuation-style --- */ .choose-list{ list-style:none; padding:0; margin:18px 0 0; display:flex; flex-direction:column; gap:18px; } .choose-list li{ background:#fff; border:1px solid var(--border); border-radius:14px; padding:20px 20px 18px; position:relative; } .choose-list .scenario-eyebrow{ display:block; font-size:10.5px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--accent); margin-bottom:8px; } .choose-list h3{ margin:0 0 10px; font-size:18px; line-height:1.25; font-weight:800; letter-spacing:.01em; } .choose-list p{ margin:0; color:var(--text); font-size:15.5px; line-height:1.55; } .choose-list a{ color:var(--text); font-weight:700; text-decoration:underline; text-decoration-color:var(--border-strong); text-underline-offset:3px; } .choose-list a:hover{ text-decoration-color:var(--accent); color:var(--accent); } /* --- 7. Sticky dynamic Book CTA at bottom (mobile) --- */ .dyn-book-bar{ position:fixed; left:0; right:0; bottom:0; z-index:60; background:#fff; border-top:1px solid var(--border); padding:10px 16px calc(10px + env(safe-area-inset-bottom)); box-shadow:0 -2px 8px rgba(0,0,0,.04), 0 -8px 24px rgba(0,0,0,.06); transform:translateY(110%); transition:transform .25s ease; } .dyn-book-bar.is-visible{ transform:translateY(0); } .dyn-book-bar-inner{ display:flex; align-items:center; gap:12px; max-width:680px; margin:0 auto; } .dyn-book-bar-logo{ width:40px; height:40px; border-radius:10px; background:#1a1a1a; display:flex; align-items:center; justify-content:center; flex:0 0 auto; padding:5px; overflow:hidden; } .dyn-book-bar-logo img{ max-width:100%; max-height:100%; } .dyn-book-bar-logo--letter{ background:linear-gradient(135deg,#2a2a2a,#1a1a1a); color:#fff; font:700 16px/1 var(--font); padding:0; } .dyn-book-bar-text{ flex:1; min-width:0; } .dyn-book-bar-eyebrow{ display:block; font-size:10.5px; font-weight:700; letter-spacing:.10em; text-transform:uppercase; color:var(--text-muted); line-height:1; } .dyn-book-bar-name{ display:block; font-size:14px; font-weight:600; color:var(--text); line-height:1.2; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; margin-top:3px; } .dyn-book-bar-cta{ flex:0 0 auto; background:var(--accent); color:#fff; padding:12px 18px; border-radius:10px; font-size:14px; font-weight:600; text-decoration:none; white-space:nowrap; } .dyn-book-bar-cta:hover{ background:var(--accent-hover, #d80f48); } @media (min-width:701px){ .dyn-book-bar{ display:none; } } /* --- 8. FAQ icon: chevron instead of plus --- */ .faq-icon::before, .faq-icon::after{ /* override the plus to chevron */ content:""; position:absolute; background:transparent; /* remove the bar fill */ border-radius:0; width:8px; height:8px; top:50%; left:50%; border-right:2px solid var(--text); border-bottom:2px solid var(--text); transform:translate(-50%,-70%) rotate(45deg); transition:transform .25s ease; } .faq-icon::after{ display:none; } /* only need one chevron now */ .faq-item[open] .faq-icon::before{ transform:translate(-50%,-30%) rotate(-135deg); } /* --- 10. Better scroll anchor offset for sticky header+chips --- */ :target, .venue, section[id], h2[id], h3[id]{ scroll-margin-top:130px; } /* ============================================================= BEST-CLUBS ARTICLE — INFATUATION-STYLE UPPERCASE METADATA Scoped to .venue-list and .article-hero only — no leak risk. ============================================================= */ /* Pink eyebrow bar above the article H1 (mirrors Infatuation's small section-marker treatment above their guide titles). */ .article-eyebrow{ display:flex; align-items:center; gap:12px; margin:0 0 14px; padding:0; } .article-eyebrow-bar{ display:inline-block; width:36px; height:3px; background:var(--accent); border-radius:2px; flex:0 0 auto; } .article-eyebrow-text{ font-size:11.5px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--accent); } /* Venue-card metadata labels: uppercase, letter-spaced, like Infatuation's "Perfect For" / "Cuisine" rows. Values stay normal. */ .venue-list .venue-meta li b{ font-size:11.5px; font-weight:700; letter-spacing:.10em; text-transform:uppercase; color:var(--text-muted); margin-right:6px; } .venue-list .venue-meta li span{ font-size:14.5px; line-height:1.45; } /* Tighten the meta row spacing & vertical rhythm */ .venue-list .venue-meta{ display:flex; flex-direction:column; gap:8px; margin:14px 0 16px; } .venue-list .venue-meta li{ display:flex; align-items:flex-start; gap:10px; padding:0; } .venue-list .venue-meta li > span{ display:flex; flex-direction:column; gap:1px; } /* Stack the LABEL above the VALUE — editorial Infatuation feel. On mobile this reads cleaner and lets long values wrap freely. */ @media (max-width:600px){ .venue-list .venue-meta li > span{ gap:2px; } .venue-list .venue-meta li b{ display:block; margin:0 0 1px; } } /* Area name: uppercase letter-spaced (POLSON PIER, KING WEST, etc.) */ .venue-list .venue-area{ font-size:11.5px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--text-muted); display:inline-flex; align-items:center; gap:5px; margin:4px 0 0; } .venue-list .venue-area svg{ opacity:.85; } /* Browse-all-clubs link below the curated top 10 (replaces filter empty-state — power users go here for the full directory). */ .venue-list-footer{ margin:32px 0 0; text-align:center; } .venue-list-footer-link{ display:inline-flex; align-items:center; gap:8px; padding:14px 22px; border:1px solid var(--border-strong); border-radius:12px; font-weight:600; font-size:15px; color:var(--text); text-decoration:none; transition:border-color .15s ease, transform .15s ease, background .15s ease; } .venue-list-footer-link:hover{ border-color:var(--text); background:#fff; transform:translateY(-1px); } .venue-list-footer-link svg{ transition:transform .15s ease; } .venue-list-footer-link:hover svg{ transform:translateX(2px); }