/* ========================================================= Scravel — Shared Frontend Stylesheet Combines styles for: body.page-trip-detail -> trip detail / listing detail page body.page-home -> homepage / venue listing page Each page's tag must carry its matching class so rules stay scoped and don't collide between pages. ========================================================= */ /* ---------- Trip Detail Page (body.page-trip-detail) ---------- */ body.page-trip-detail *, body.page-trip-detail *::before, body.page-trip-detail *::after { box-sizing: border-box; margin: 0; padding: 0; } body.page-trip-detail { --red: #E8192C; --dark: #1A1A2E; --text: #333333; --muted: #6B7280; --light-bg: #F9F9F9; --border: #E5E7EB; --white: #FFFFFF; --font: 'Poppins', sans-serif; } body.page-trip-detail { font-family: var(--font); color: var(--text); background: var(--white); font-size: 14px; } body.page-trip-detail a { text-decoration: none; color: inherit; } body.page-trip-detail nav { display: flex; align-items: center; justify-content: space-between; padding: 0 60px; height: 64px; background: var(--red); position: sticky; top: 0; z-index: 100; } body.page-trip-detail .nav-logo { display: flex; align-items: center; gap: 8px; } body.page-trip-detail .nav-logo .logo-icon { width: 36px; height: 36px; border-radius: 50%; background: white; display: flex; align-items: center; justify-content: center; } body.page-trip-detail .nav-logo .logo-icon svg { width: 20px; height: 20px; fill: var(--red); } body.page-trip-detail .nav-logo span { font-size: 13px; font-weight: 700; color: white; letter-spacing: 0.02em; } body.page-trip-detail .nav-logo small { display: block; font-size: 8px; font-weight: 500; color: rgba(255,255,255,0.8); letter-spacing: 0.1em; text-transform: uppercase; } body.page-trip-detail .nav-links { display: flex; gap: 32px; } body.page-trip-detail .nav-links a { font-size: 13px; font-weight: 500; color: rgba(255,255,255,0.9); transition: color 0.2s; } body.page-trip-detail .nav-links a:hover { color: white; } body.page-trip-detail .nav-actions { display: flex; align-items: center; gap: 16px; } body.page-trip-detail .btn-login { font-size: 13px; font-weight: 500; color: white; } body.page-trip-detail .btn-try { background: white; color: var(--red); border: none; border-radius: 6px; padding: 8px 20px; font-size: 13px; font-weight: 600; cursor: pointer; font-family: var(--font); } body.page-trip-detail .page-wrapper { max-width: 1200px; margin: 0 auto; padding: 36px 24px; } body.page-trip-detail .content-grid { display: grid; grid-template-columns: 1fr 320px; gap: 32px; align-items: start; } body.page-trip-detail h1.trip-title { font-size: 28px; font-weight: 700; margin-bottom: 8px; } body.page-trip-detail .trip-meta { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--muted); margin-bottom: 6px; flex-wrap: wrap; } body.page-trip-detail .trip-meta svg { width: 14px; height: 14px; fill: var(--red); } body.page-trip-detail .badge { display: inline-block; background: #FEF2F2; color: var(--red); border-radius: 20px; padding: 2px 10px; font-size: 11px; font-weight: 600; margin-right: 6px; margin-bottom: 4px; } body.page-trip-detail .trip-badges { margin-bottom: 12px; } body.page-trip-detail .trip-stars { display: flex; align-items: center; gap: 4px; } body.page-trip-detail .trip-stars svg { width: 14px; height: 14px; fill: #FBBF24; } body.page-trip-detail .trip-stars span { font-size: 13px; color: var(--muted); } body.page-trip-detail .gallery { margin-bottom: 28px; } body.page-trip-detail .gallery-main { width: 100%; height: 340px; border-radius: 12px; overflow: hidden; background: #1a1a2e; position: relative; margin-bottom: 10px; cursor: pointer; } body.page-trip-detail .gallery-main img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.3s; } body.page-trip-detail .gallery-main img:hover { transform: scale(1.02); } body.page-trip-detail .gallery-thumbs { display: flex; gap: 8px; } body.page-trip-detail .gallery-thumbs div { flex: 1; height: 72px; border-radius: 8px; overflow: hidden; background: #ccc; cursor: pointer; border: 2px solid transparent; transition: border-color 0.2s; } body.page-trip-detail .gallery-thumbs div.active { border-color: var(--red); } body.page-trip-detail .gallery-thumbs div img { width: 100%; height: 100%; object-fit: cover; } body.page-trip-detail .section-title { font-size: 17px; font-weight: 700; margin-bottom: 14px; color: var(--dark); padding-bottom: 10px; border-bottom: 1px solid var(--border); } body.page-trip-detail .description { margin-bottom: 30px; } body.page-trip-detail .description p { font-size: 13.5px; line-height: 1.8; color: #444; margin-bottom: 14px; } body.page-trip-detail .activity-section { margin-bottom: 30px; } body.page-trip-detail .activity-sub { font-size: 14px; font-weight: 600; margin-bottom: 10px; color: var(--dark); } body.page-trip-detail .activity-list { list-style: none; } body.page-trip-detail .activity-list li { display: flex; align-items: flex-start; gap: 10px; font-size: 13px; color: #444; margin-bottom: 8px; line-height: 1.5; } body.page-trip-detail .activity-list li::before { content: ""; flex-shrink: 0; width: 7px; height: 7px; border-radius: 50%; background: var(--red); margin-top: 5px; } body.page-trip-detail .includes-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 30px; } body.page-trip-detail .includes-col h4 { font-size: 14px; font-weight: 600; margin-bottom: 10px; color: var(--dark); } body.page-trip-detail .includes-col ul { list-style: none; } body.page-trip-detail .includes-col ul li { display: flex; align-items: flex-start; gap: 8px; font-size: 13px; color: #444; margin-bottom: 7px; line-height: 1.5; } body.page-trip-detail .includes-col ul li .check { color: #10B981; font-weight: 700; } body.page-trip-detail .includes-col ul li .cross { color: var(--red); font-weight: 700; } body.page-trip-detail .safety-section { margin-bottom: 30px; } body.page-trip-detail .safety-sub { font-size: 14px; font-weight: 600; margin-bottom: 10px; color: var(--dark); } body.page-trip-detail .safety-list { list-style: none; } body.page-trip-detail .safety-list li { display: flex; align-items: flex-start; gap: 10px; font-size: 13px; color: #444; margin-bottom: 8px; line-height: 1.5; } body.page-trip-detail .safety-list li::before { content: "✓"; color: #10B981; font-weight: 700; margin-top: 1px; } body.page-trip-detail .details-section { margin-bottom: 30px; } body.page-trip-detail .details-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; } body.page-trip-detail .detail-item h4 { font-size: 13px; font-weight: 600; margin-bottom: 6px; color: var(--dark); } body.page-trip-detail .detail-item p, body.page-trip-detail .detail-item ul { font-size: 13px; color: #444; list-style: none; } body.page-trip-detail .detail-item ul li { margin-bottom: 3px; } body.page-trip-detail .map-section { margin-bottom: 30px; } body.page-trip-detail .map-link { font-size: 13px; color: var(--red); font-weight: 500; display: inline-flex; align-items: center; gap: 6px; margin-bottom: 10px; } body.page-trip-detail .map-link svg { width: 14px; height: 14px; fill: var(--red); } body.page-trip-detail .map-placeholder { width: 100%; height: 220px; border-radius: 10px; overflow: hidden; border: 1px solid var(--border); } body.page-trip-detail .map-placeholder iframe { width: 100%; height: 100%; border: none; } body.page-trip-detail .map-no-embed { display: flex; align-items: center; justify-content: center; width: 100%; height: 220px; border-radius: 10px; border: 1px solid var(--border); background: var(--light-bg); } body.page-trip-detail .map-no-embed a { background: var(--red); color: #fff; font-size: 13px; font-weight: 600; padding: 10px 22px; border-radius: 8px; display: inline-flex; align-items: center; gap: 8px; } body.page-trip-detail .map-no-embed a svg { width: 16px; height: 16px; fill: #fff; } body.page-trip-detail .enquiry-card { background: var(--white); border: 1px solid var(--border); border-radius: 14px; padding: 24px; box-shadow: 0 4px 20px rgba(0,0,0,0.07); position: sticky; top: 80px; } body.page-trip-detail .enquiry-card h3 { font-size: 16px; font-weight: 700; margin-bottom: 20px; } body.page-trip-detail .form-group { margin-bottom: 16px; } body.page-trip-detail .form-group label { display: block; font-size: 12px; font-weight: 600; color: var(--muted); margin-bottom: 6px; } body.page-trip-detail .form-group input, body.page-trip-detail .form-group select, body.page-trip-detail .form-group textarea { width: 100%; padding: 10px 12px; border: 1px solid var(--border); border-radius: 8px; font-size: 13px; color: var(--text); font-family: var(--font); background: var(--white); appearance: none; transition: border-color .2s; } body.page-trip-detail .form-group input:focus, body.page-trip-detail .form-group select:focus, body.page-trip-detail .form-group textarea:focus { outline: none; border-color: var(--red); box-shadow: 0 0 0 3px rgba(232,25,44,.08); } body.page-trip-detail .form-group .input-icon { position: relative; } body.page-trip-detail .form-group .input-icon input { padding-right: 36px; } body.page-trip-detail .form-group .input-icon svg { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); width: 16px; height: 16px; fill: var(--muted); pointer-events: none; } body.page-trip-detail .facilities-row { display: flex; gap: 8px; flex-wrap: wrap; } body.page-trip-detail .facility-chip { display: inline-flex; align-items: center; gap: 5px; border: 1.5px solid var(--border); border-radius: 20px; padding: 6px 14px; font-size: 12px; font-weight: 500; color: var(--muted); background: var(--white); cursor: pointer; user-select: none; transition: border-color 0.18s, background 0.18s, color 0.18s; } body.page-trip-detail .facility-chip:hover { border-color: #f0aab0; color: var(--text); } body.page-trip-detail .facility-chip.selected { border-color: var(--red); background: #FEF2F2; color: var(--red); font-weight: 600; } body.page-trip-detail .facility-chip .chip-check { display: none; font-size: 11px; font-weight: 700; } body.page-trip-detail .facility-chip.selected .chip-check { display: inline; } body.page-trip-detail .btn-submit { width: 100%; padding: 13px; background: var(--red); color: white; border: none; border-radius: 8px; font-size: 14px; font-weight: 600; cursor: pointer; font-family: var(--font); transition: background 0.2s, transform .1s; } body.page-trip-detail .btn-submit:hover { background: #c8102a; } body.page-trip-detail .btn-submit:active { transform: scale(.98); } body.page-trip-detail .btn-submit:disabled { background: #ccc; cursor: not-allowed; } body.page-trip-detail .card-alert { padding: 12px 14px; border-radius: 8px; font-size: 13px; font-weight: 500; margin-bottom: 18px; display: flex; align-items: flex-start; gap: 10px; } body.page-trip-detail .card-alert-success { background: #f0fdf4; border: 1px solid #bbf7d0; color: #15803d; } body.page-trip-detail .card-alert-error { background: #fef2f2; border: 1px solid #fecaca; color: #dc2626; } body.page-trip-detail .card-alert svg { width: 16px; height: 16px; flex-shrink: 0; margin-top: 1px; } body.page-trip-detail .field-error { font-size: 11px; color: #dc2626; margin-top: 4px; display: block; } body.page-trip-detail .input-error { border-color: #dc2626 !important; } body.page-trip-detail .trip-section { padding: 60px 0 40px; background: var(--light-bg); } body.page-trip-detail .trip-section-inner { max-width: 1200px; margin: 0 auto; padding: 0 24px; } body.page-trip-detail .trip-header { display: flex; align-items: flex-end; justify-content: space-between; margin-bottom: 30px; } body.page-trip-detail .trip-header .label { font-size: 12px; font-weight: 700; color: var(--red); text-transform: uppercase; letter-spacing: 0.1em; } body.page-trip-detail .trip-header h2 { font-size: 32px; font-weight: 800; color: var(--dark); line-height: 1.2; } body.page-trip-detail .btn-view-more { border: 1px solid var(--border); border-radius: 20px; padding: 8px 20px; font-size: 12px; font-weight: 600; cursor: pointer; background: white; font-family: var(--font); } body.page-trip-detail .cards-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; } body.page-trip-detail .place-card { background: white; border-radius: 14px; overflow: hidden; box-shadow: 0 2px 10px rgba(0,0,0,0.06); } body.page-trip-detail .place-card-img { width: 100%; height: 160px; object-fit: cover; display: block; background: #ccc; } body.page-trip-detail .place-card-body { padding: 14px; } body.page-trip-detail .place-card-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 4px; } body.page-trip-detail .place-card-name { font-size: 14px; font-weight: 700; } body.page-trip-detail .place-card-rating { display: flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 600; } body.page-trip-detail .place-card-rating svg { width: 12px; height: 12px; fill: #FBBF24; } body.page-trip-detail .place-card-duration { font-size: 11px; color: var(--muted); margin-bottom: 10px; } body.page-trip-detail .card-tags { font-size: 10px; color: var(--muted); } body.page-trip-detail .card-tags span { display: block; } body.page-trip-detail .app-banner { background: linear-gradient(135deg, #1A1A2E 60%, #2d2d4e); color: white; padding: 60px 0; } body.page-trip-detail .app-banner-inner { max-width: 1200px; margin: 0 auto; padding: 0 24px; display: grid; grid-template-columns: 180px 1fr auto; gap: 48px; align-items: center; } body.page-trip-detail .app-phone { width: 160px; background: #2a2a4a; border-radius: 20px; height: 280px; display: flex; align-items: center; justify-content: center; overflow: hidden; } body.page-trip-detail .app-phone-screen { width: 140px; height: 260px; background: white; border-radius: 14px; padding: 12px; display: flex; flex-direction: column; gap: 6px; } body.page-trip-detail .phone-top { display: flex; align-items: center; gap: 6px; margin-bottom: 4px; } body.page-trip-detail .phone-top .dot { width: 28px; height: 28px; border-radius: 50%; background: var(--red); } body.page-trip-detail .phone-top span { font-size: 7px; font-weight: 700; color: var(--red); } body.page-trip-detail .phone-img-placeholder { width: 100%; height: 70px; border-radius: 8px; background: #e5e7eb; } body.page-trip-detail .phone-row { display: flex; gap: 4px; } body.page-trip-detail .phone-card { flex: 1; height: 40px; border-radius: 6px; background: #f3f4f6; } body.page-trip-detail .app-text h2 { font-size: 28px; font-weight: 800; margin-bottom: 12px; } body.page-trip-detail .app-text p { font-size: 13px; color: #cbd5e1; line-height: 1.7; max-width: 420px; margin-bottom: 20px; } body.page-trip-detail .app-input-row { display: flex; gap: 10px; margin-bottom: 14px; } body.page-trip-detail .tab-btns { display: flex; background: #2a2a4a; border-radius: 6px; overflow: hidden; margin-bottom: 10px; } body.page-trip-detail .tab-btns button { flex: 1; padding: 7px 16px; font-size: 12px; font-weight: 600; border: none; cursor: pointer; font-family: var(--font); background: transparent; color: #94a3b8; } body.page-trip-detail .tab-btns button.active { background: var(--red); color: white; } body.page-trip-detail .app-input { flex: 1; padding: 10px 14px; border-radius: 6px; border: none; font-size: 13px; font-family: var(--font); } body.page-trip-detail .btn-search { background: var(--red); color: white; border: none; padding: 10px 18px; border-radius: 6px; font-size: 13px; font-weight: 600; cursor: pointer; font-family: var(--font); } body.page-trip-detail .store-btns { display: flex; flex-direction: column; gap: 10px; } body.page-trip-detail .store-btn { display: flex; align-items: center; gap: 10px; background: #222240; border-radius: 8px; padding: 8px 14px; min-width: 140px; } body.page-trip-detail .store-btn svg { width: 22px; height: 22px; fill: white; } body.page-trip-detail .store-btn-text small { display: block; font-size: 9px; color: #94a3b8; } body.page-trip-detail .store-btn-text span { font-size: 13px; font-weight: 700; color: white; } body.page-trip-detail footer { background: white; border-top: 1px solid var(--border); padding: 48px 0 24px; } body.page-trip-detail .footer-inner { max-width: 1200px; margin: 0 auto; padding: 0 24px; } body.page-trip-detail .footer-top { display: grid; grid-template-columns: 220px 1fr 1fr auto; gap: 40px; margin-bottom: 36px; } body.page-trip-detail .footer-brand .logo-row { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; } body.page-trip-detail .footer-brand .logo-circle { width: 36px; height: 36px; border-radius: 50%; background: var(--red); display: flex; align-items: center; justify-content: center; } body.page-trip-detail .footer-brand .logo-circle svg { width: 20px; height: 20px; fill: white; } body.page-trip-detail .footer-brand .brand-text { font-size: 12px; font-weight: 700; color: var(--red); } body.page-trip-detail .footer-brand .brand-sub { font-size: 8px; font-weight: 500; color: var(--muted); letter-spacing: 0.1em; text-transform: uppercase; } body.page-trip-detail .footer-brand p { font-size: 12px; color: var(--muted); line-height: 1.7; margin-top: 8px; } body.page-trip-detail .footer-col h4 { font-size: 13px; font-weight: 700; margin-bottom: 14px; } body.page-trip-detail .footer-col ul { list-style: none; } body.page-trip-detail .footer-col ul li { margin-bottom: 8px; } body.page-trip-detail .footer-col ul li a { font-size: 12px; color: var(--muted); transition: color 0.2s; } body.page-trip-detail .footer-col ul li a:hover { color: var(--red); } body.page-trip-detail .footer-contact h4 { font-size: 13px; font-weight: 700; margin-bottom: 14px; } body.page-trip-detail .footer-contact p { font-size: 12px; color: var(--muted); display: flex; align-items: center; gap: 6px; } body.page-trip-detail .footer-contact p svg { width: 14px; height: 14px; fill: var(--red); } body.page-trip-detail .footer-bottom { border-top: 1px solid var(--border); padding-top: 20px; text-align: center; font-size: 11.5px; color: var(--muted); } body.page-trip-detail .footer-bottom span { color: var(--red); } body.page-trip-detail .bottom-bar { background: white; border-top: 1px solid var(--border); display: flex; justify-content: space-between; align-items: center; padding: 10px 60px; font-size: 12px; color: var(--muted); } body.page-trip-detail .bottom-bar .bb-logo { display: flex; align-items: center; gap: 8px; } body.page-trip-detail .bottom-bar .bb-logo .lc { width: 28px; height: 28px; border-radius: 50%; background: var(--red); display: flex; align-items: center; justify-content: center; } body.page-trip-detail .bottom-bar .bb-logo .lc svg { width: 16px; height: 16px; fill: white; } body.page-trip-detail .bottom-bar .bb-logo span { font-size: 11px; font-weight: 700; color: var(--red); } @media(max-width:900px) { body.page-trip-detail .content-grid { grid-template-columns: 1fr; } body.page-trip-detail .enquiry-card { position: static; } body.page-trip-detail nav { padding: 0 20px; } body.page-trip-detail .nav-links { display: none; } } /* ---------- Home / Listing Page (body.page-home) ---------- */ body.page-home *, body.page-home *::before, body.page-home *::after {box-sizing:border-box;margin:0;padding:0} body.page-home {--red:#e03a2f;--white:#fff;--nav-h:64px;--pad:60px} body.page-home {font-family:Poppins,sans-serif;overflow-x:hidden;background:#f5f5f5;color:#111} body.page-home nav {position:fixed;top:0;left:0;right:0;height:var(--nav-h);z-index:100;display:flex;align-items:center;justify-content:space-between;padding:0 var(--pad);background:transparent;transition:background .35s ease} body.page-home nav.scrolled {background:var(--red)} body.page-home .nav-logo {display:flex;align-items:center;gap:10px;text-decoration:none} body.page-home .hamburger {display:none;flex-direction:column;gap:5px;cursor:pointer;padding:4px;background:none;border:0} body.page-home .hamburger span {width:24px;height:2px;background:#fff;border-radius:2px;transition:all .3s;display:block} body.page-home .hamburger.open span:nth-child(1) {transform:translateY(7px) rotate(45deg)} body.page-home .hamburger.open span:nth-child(2) {opacity:0} body.page-home .hamburger.open span:nth-child(3) {transform:translateY(-7px) rotate(-45deg)} body.page-home .nav-links {display:flex;align-items:center;gap:36px;list-style:none} body.page-home .nav-links a {text-decoration:none;font-size:14px;font-weight:500;color:var(--white);transition:opacity .2s} body.page-home .nav-links a:hover {opacity:.75} body.page-home .nav-links a.active {font-weight:700;border-bottom:2px solid var(--white);padding-bottom:2px} body.page-home .hero {position:relative;width:100%;height:100vh;min-height:520px;display:flex;flex-direction:column;justify-content:center;overflow:hidden} body.page-home .hero-bg {position:absolute;inset:0;background:linear-gradient(to right,rgba(10,20,40,.55),rgba(10,20,40,.15) 60%,transparent),url('https://images.unsplash.com/photo-1506905925346-21bda4d32df4?w=1600&q=80') center/cover no-repeat} body.page-home .hero-content {position:relative;z-index:2;padding:calc(var(--nav-h) + 40px) var(--pad) 0} body.page-home .hero-content h1 {font-size:clamp(28px,5vw,58px);font-weight:800;color:#fff;line-height:1.15;margin-bottom:32px} body.page-home .hero-content h1 span {color:var(--red)} body.page-home .search-bar {display:flex;align-items:center;background:rgba(255,255,255,.18);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-radius:40px;overflow:hidden;width:100%;height:54px;padding:0 8px 0 20px;border:1px solid rgba(255,255,255,.25)} body.page-home .search-bar svg {flex-shrink:0;color:rgba(255,255,255,.75);width:18px;height:18px;margin-right:10px} body.page-home .search-bar input {flex:1;background:transparent;border:0;outline:0;color:#fff;font-family:Poppins,sans-serif;font-size:14px;min-width:0} body.page-home .search-bar input::placeholder {color:rgba(255,255,255,.65)} body.page-home .search-btn {background:#fff;color:#1a1a2e;border:0;border-radius:30px;padding:0 22px;height:40px;font-family:Poppins,sans-serif;font-size:13px;font-weight:600;cursor:pointer;white-space:nowrap;flex-shrink:0} body.page-home .search-btn:hover {background:var(--red);color:#fff} body.page-home .categories {position:relative;z-index:2;padding:40px var(--pad) 0} body.page-home .categories h3 {font-size:17px;font-weight:700;color:#fff;margin-bottom:20px} body.page-home .cat-row {display:flex;align-items:center} body.page-home .cat-items {display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;flex:1} body.page-home .cat-items::-webkit-scrollbar {display:none} body.page-home .cat-item {display:flex;flex-direction:column;align-items:center;gap:8px;padding:12px 14px 10px;border-radius:10px;cursor:pointer;transition:background .2s;min-width:70px;border-bottom:3px solid transparent;color:rgba(255,255,255,.72)} body.page-home .cat-item:hover {background:rgba(255,255,255,.1)} body.page-home .cat-item.active {color:#fff;border-bottom-color:#fff} body.page-home .cat-icon {font-size:22px;line-height:1;display:flex;align-items:center;justify-content:center;height:28px} body.page-home .cat-icon img {width:24px;height:24px;object-fit:contain;filter:drop-shadow(0 0 2px rgba(0,0,0,.4));} body.page-home .cat-label {font-size:11px;font-weight:500;white-space:nowrap} body.page-home .cat-arrow {width:32px;height:32px;border-radius:50%;background:rgba(255,255,255,.15);border:1px solid rgba(255,255,255,.3);display:flex;align-items:center;justify-content:center;cursor:pointer;color:#fff;font-size:16px;flex-shrink:0;margin-left:12px} body.page-home .section2 {background:#f5f5f5;padding:60px var(--pad);display:flex;gap:28px;align-items:flex-start} body.page-home .sidebar {width:200px;flex-shrink:0;background:#fff;border-radius:10px;overflow:hidden;box-shadow:0 2px 10px rgba(0,0,0,.06);position:sticky;top:calc(var(--nav-h) + 16px)} body.page-home .sidebar-header {background:var(--red);color:#fff;font-size:13.5px;font-weight:700;padding:12px 16px;letter-spacing:.4px} body.page-home .filter-group {border-bottom:1px solid #ebebeb;padding:13px 16px} body.page-home .filter-group:last-child {border-bottom:0} body.page-home .filter-group-title {display:flex;align-items:center;justify-content:space-between;font-size:12.5px;font-weight:600;color:#222;margin-bottom:10px;cursor:pointer;user-select:none} body.page-home .filter-group-title svg {width:13px;height:13px;color:#999} body.page-home .filter-option {display:flex;align-items:center;gap:8px;margin-bottom:7px;font-size:12px;color:#444;cursor:pointer} body.page-home .filter-option input[type=checkbox] {accent-color:var(--red);width:13px;height:13px;cursor:pointer;flex-shrink:0} body.page-home .show-more {font-size:11.5px;color:var(--red);font-weight:600;cursor:pointer;margin-top:2px;display:inline-block} body.page-home .filter-overlay {display:none;position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:200} body.page-home .filter-overlay.open {display:block} body.page-home .filter-toggle-btn {display:none;align-items:center;gap:8px;background:var(--red);color:#fff;border:0;border-radius:8px;padding:10px 18px;font-family:Poppins,sans-serif;font-size:13px;font-weight:600;cursor:pointer;margin-bottom:16px} body.page-home .filter-toggle-btn svg {width:16px;height:16px} body.page-home .sidebar-close {display:none;background:none;border:0;font-size:22px;cursor:pointer;color:#fff;line-height:1} body.page-home .listings {flex:1;display:flex;flex-direction:column;gap:16px;min-width:0} body.page-home .no-results {text-align:center;padding:60px 20px;color:#999;font-size:15px;background:#fff;border-radius:12px} body.page-home .venue-card {background:#fff;border-radius:12px;display:flex;overflow:hidden;box-shadow:0 2px 10px rgba(0,0,0,.06);transition:box-shadow .25s,transform .25s;cursor:pointer} body.page-home .venue-card:hover {box-shadow:0 8px 28px rgba(0,0,0,.12);transform:translateY(-2px)} body.page-home .venue-img {width:220px;min-height:180px;flex-shrink:0;object-fit:cover;display:block;align-self:stretch} body.page-home .venue-body {padding:18px 20px;display:flex;flex-direction:column;justify-content:space-between;flex:1;min-width:0} body.page-home .venue-top {display:flex;flex-direction:column;gap:7px} body.page-home .venue-badge-row {display:flex;align-items:center;gap:10px;flex-wrap:wrap} body.page-home .badge {background:var(--red);color:#fff;font-size:9.5px;font-weight:700;padding:4px 10px;border-radius:4px;text-transform:uppercase;letter-spacing:.5px;white-space:nowrap} body.page-home .stars {display:flex;align-items:center;gap:2px;color:#f5a623;font-size:13px} body.page-home .review-count {font-size:11px;color:#999} body.page-home .venue-name {font-size:17px;font-weight:700;color:#1a1a1a;line-height:1.2} body.page-home .venue-desc {font-size:12px;color:#777;line-height:1.7;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden} body.page-home .venue-meta {display:flex;align-items:center;gap:16px;margin-top:14px;flex-wrap:wrap} body.page-home .meta-item {display:flex;align-items:center;gap:5px;font-size:11.5px;color:#555;font-weight:500} body.page-home .meta-item svg {width:14px;height:14px;color:#888;flex-shrink:0} body.page-home .load-more-wrap {display:flex;justify-content:center;margin-top:8px} body.page-home .load-more-btn {border:1.5px solid var(--red);color:var(--red);background:transparent;font-family:Poppins,sans-serif;font-size:13.5px;font-weight:600;padding:12px 60px;border-radius:30px;cursor:pointer} body.page-home .load-more-btn:hover {background:var(--red);color:#fff} body.page-home .load-more-btn:disabled {opacity:.4;cursor:default} body.page-home .load-more-btn:disabled:hover {background:transparent;color:var(--red)} body.page-home .section3, body.page-home .section4 {background:#fff;padding:60px var(--pad);overflow:hidden} body.page-home .s3-header {display:flex;align-items:flex-end;justify-content:space-between;margin-bottom:40px;gap:16px} body.page-home .s3-eyebrow {font-size:15px;color:#222;font-style:italic;margin-bottom:2px} body.page-home .s3-heading {font-size:clamp(28px,4vw,48px);font-weight:800;line-height:1.1;color:#111} body.page-home .s3-heading span {color:var(--red)} body.page-home .view-more-btn {border:1.5px solid #111;color:#111;background:transparent;font-family:Poppins,sans-serif;font-size:12px;font-weight:600;padding:10px 28px;border-radius:30px;cursor:pointer;letter-spacing:.5px;white-space:nowrap} body.page-home .view-more-btn:hover {background:var(--red);color:#fff;border-color:var(--red)} body.page-home .place-track {display:flex;gap:22px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;padding-bottom:8px} body.page-home .place-track::-webkit-scrollbar {display:none} body.page-home .place-card {background:#fff;border-radius:16px;box-shadow:0 2px 14px rgba(0,0,0,.08);min-width:260px;max-width:260px;flex-shrink:0;scroll-snap-align:start;overflow:hidden;transition:box-shadow .25s,transform .25s;cursor:pointer} body.page-home .place-card:hover {box-shadow:0 8px 30px rgba(0,0,0,.14);transform:translateY(-4px)} body.page-home .place-img-wrap {position:relative;width:100%;height:180px;overflow:hidden} body.page-home .place-img-wrap img {width:100%;height:100%;object-fit:cover;display:block;transition:transform .4s} body.page-home .place-card:hover .place-img-wrap img {transform:scale(1.05)} body.page-home .place-heart {position:absolute;top:12px;right:12px;width:32px;height:32px;background:rgba(255,255,255,.85);border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer} body.page-home .place-heart svg {width:16px;height:16px;color:#555} body.page-home .place-heart.liked svg {color:var(--red);fill:var(--red)} body.page-home .place-body {padding:16px 16px 18px} body.page-home .place-name-row {display:flex;align-items:center;justify-content:space-between;margin-bottom:4px;gap:8px} body.page-home .place-name {font-size:16px;font-weight:700;color:#111;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} body.page-home .place-rating {display:flex;align-items:center;gap:4px;font-size:13px;font-weight:600;color:#111} body.page-home .place-rating svg {width:14px;height:14px;fill:#f5a623;color:#f5a623} body.page-home .place-duration {font-size:12px;color:#888;margin-bottom:14px} body.page-home .place-icons {display:flex;gap:16px;margin-bottom:4px;padding-bottom:10px;border-bottom:1px solid #f0f0f0;flex-wrap:wrap} body.page-home .place-icon-item {display:flex;flex-direction:column;align-items:center;gap:4px} body.page-home .place-icon-item svg {width:20px;height:20px;color:#888} body.page-home .place-icon-item span {font-size:10px;color:#777;text-align:center;line-height:1.3} body.page-home .place-bullets {list-style:none;margin-top:10px;display:flex;flex-direction:column;gap:4px} body.page-home .place-bullets li {font-size:11.5px;color:#555;display:flex;align-items:center;gap:6px} body.page-home .place-bullets li::before {content:'';width:5px;height:5px;border-radius:50%;background:#ccc;flex-shrink:0} body.page-home .s4-heading {text-align:center;font-size:clamp(20px,3vw,36px);font-weight:700;color:#111;margin-bottom:44px} body.page-home .insights-grid {display:grid;grid-template-columns:repeat(3,1fr);gap:28px;margin:0 0 48px} body.page-home .insight-card {display:flex;flex-direction:column;cursor:pointer} body.page-home .insight-img-wrap {width:100%;height:210px;border-radius:14px;overflow:hidden;margin-bottom:16px} body.page-home .insight-img-wrap img {width:100%;height:100%;object-fit:cover;display:block;transition:transform .4s} body.page-home .insight-card:hover img {transform:scale(1.05)} body.page-home .insight-tag {display:inline-block;border:1px solid #ccc;color:#444;font-size:11px;font-weight:500;padding:4px 12px;border-radius:20px;margin-bottom:10px;width:fit-content} body.page-home .insight-title {font-size:14.5px;font-weight:600;color:#111;line-height:1.55;margin-bottom:10px} body.page-home .insight-read {font-size:13px;font-weight:600;color:var(--red);text-decoration:none} body.page-home .s4-cta-wrap {display:flex;justify-content:center} body.page-home .blog-btn {background:var(--red);color:#fff;border:0;font-family:Poppins,sans-serif;font-size:14px;font-weight:600;padding:14px 42px;border-radius:30px;cursor:pointer} body.page-home .footer { background: #f3f3f3; color: #222; padding: 58px var(--pad) 26px; } body.page-home .footer-top { display: grid; grid-template-columns: 1.25fr .8fr .9fr 1fr; gap: clamp(34px, 6vw, 86px); align-items: start; } body.page-home .footer-logo { width: 184px; height: auto; margin-bottom: 20px; } body.page-home .footer-desc { max-width: 240px; color: #555; font-size: 13px; line-height: 1.65; } body.page-home .footer h4 { margin-bottom: 22px; color: #232323; font-size: 10px; font-weight: 900; letter-spacing: .22em; text-transform: uppercase; } body.page-home .footer-links { display: grid; gap: 18px; list-style: none; } body.page-home .footer-links a, body.page-home .footer-contact { color: #222; font-size: 14px; line-height: 1.2; } body.page-home .footer-links a:hover { color: var(--red); } body.page-home .mail-line { display: flex; align-items: center; gap: 9px; margin-bottom: 38px; } body.page-home .mail-line svg { width: 14px; height: 14px; flex: 0 0 auto; } body.page-home .made { color: #555; font-size: 14px; } body.page-home .made span { color: #ff7a00; font-weight: 900; } body.page-home .footer-divider { height: 1px; background: var(--line); margin: 62px 0 30px; } body.page-home .footer-bottom { display: grid; grid-template-columns: 1fr auto 1fr; align-items: end; gap: 20px; } body.page-home .footer-bottom-logo { width: 78px; height: auto; margin-bottom: 10px; } body.page-home .footer-copy { color: #555; font-size: 12px; } body.page-home .footer-actions { justify-self: end; display: flex; gap: 12px; } body.page-home .footer-btn { min-width: 78px; border-radius: 11px; padding: 12px 20px; font-size: 12px; font-weight: 700; box-shadow: 0 3px 0 #8a1217; } body.page-home .footer-btn.login { border: 2px solid var(--red); background: var(--red); color: #fff; } body.page-home .footer-btn.try { border: 2px solid var(--red); background: var(--red); color: #fff; } @media(max-width:1024px) { body.page-home {--pad:32px} body.page-home .nav-links {gap:20px} body.page-home .insights-grid {grid-template-columns:repeat(2,1fr)} } @media(max-width:768px) { body.page-home {--pad:20px} body.page-home .hamburger {display:flex} body.page-home .nav-links {position:fixed;top:var(--nav-h);left:0;right:0;background:var(--red);flex-direction:column;align-items:flex-start;gap:0;padding:12px 0 20px;transform:translateY(-120%);transition:transform .3s;z-index:99;box-shadow:0 8px 24px rgba(0,0,0,.2)} body.page-home .nav-links.open {transform:translateY(0)} body.page-home .nav-links li {width:100%} body.page-home .nav-links a {display:block;padding:12px 24px;font-size:15px;border-bottom:1px solid rgba(255,255,255,.1)} body.page-home .hero {min-height:100svh} body.page-home .categories {padding:28px var(--pad) 0} body.page-home .section2 {flex-direction:column;padding:24px var(--pad);gap:0} body.page-home .filter-toggle-btn {display:flex} body.page-home .sidebar {position:fixed;left:0;top:0;bottom:0;width:280px;z-index:201;border-radius:0;transform:translateX(-100%);transition:transform .3s;overflow-y:auto} body.page-home .sidebar.open {transform:translateX(0)} body.page-home .sidebar-header {display:flex;align-items:center;justify-content:space-between;padding-right:14px} body.page-home .sidebar-close {display:inline-block} body.page-home .venue-card {flex-direction:column} body.page-home .venue-img {width:100%;height:200px} body.page-home .section3, body.page-home .section4 {padding:44px var(--pad)} body.page-home .s3-header {flex-direction:column;align-items:flex-start;gap:16px} body.page-home .insights-grid {grid-template-columns:1fr;gap:24px} body.page-home .footer {padding:40px var(--pad) 24px} body.page-home .footer-bottom {flex-direction:column;align-items:flex-start;gap:14px} } @media(max-width:480px) { body.page-home {--pad:16px} body.page-home .hero-content h1 {font-size:28px} body.page-home .venue-img {height:170px} }