/* ============================================================ VR Fun House Bangkok — WordPress Theme v2 Design system matching original HTML site exactly ============================================================ */ @import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Inter:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,400&display=swap'); /* ── Tokens ─────────────────────────────────────────── */ :root { --bg: #060610; --bg2: #0b0b1a; --bg3: #0e0e20; --cyan: #21d7e8; --pink: #ff3dec; --white: #ffffff; --text: rgba(255,255,255,.9); --muted: rgba(255,255,255,.5); --card: rgba(12,12,28,1); --card-b: rgba(255,255,255,.1); --font-d: 'Bebas Neue', Impact, sans-serif; --font-b: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --r: 12px; --max: 1280px; --nav-h: 72px; } /* ── Reset ──────────────────────────────────────────── */ *,*::before,*::after { margin:0; padding:0; box-sizing:border-box; } html { scroll-behavior:smooth; -webkit-text-size-adjust:100%; } body { font-family: var(--font-b); background: var(--bg); color: var(--text); line-height: 1.78; font-size: 17px; overflow-x: hidden; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } img { max-width:100%; height:auto; display:block; } a { color:var(--cyan); text-decoration:none; transition:opacity .2s; } a:hover { opacity:.8; } button { font-family:var(--font-b); } address { font-style:normal; } /* ── Scrollbar ──────────────────────────────────────── */ ::-webkit-scrollbar { width:4px; } ::-webkit-scrollbar-track { background:var(--bg); } ::-webkit-scrollbar-thumb { background:var(--cyan); border-radius:2px; } /* ── Translate bar hide ─────────────────────────────── */ .goog-te-banner-frame.skiptranslate, .goog-te-gadget-icon { display:none !important; } body { top:0 !important; } .goog-te-gadget { font-size:0 !important; } /* ── Utilities ──────────────────────────────────────── */ .container { max-width:var(--max); margin:0 auto; padding:0 2rem; } .text-gradient { background: linear-gradient(90deg, var(--cyan), var(--pink)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .section-label { font-size:.7rem; letter-spacing:3.5px; text-transform:uppercase; color:var(--cyan); margin-bottom:.85rem; display:block; font-weight:700; } .section-header { text-align:center; margin-bottom:1.75rem; } .section-title { font-family:var(--font-d); font-size:clamp(2.8rem,5.5vw,4.5rem); text-transform:uppercase; line-height:1.0; letter-spacing:.5px; } .section-sub { color:var(--muted); font-size:1.05rem; margin-top:.85rem; max-width:580px; margin-left:auto; margin-right:auto; line-height:1.72; } .page-title { font-family:var(--font-d); font-size:clamp(2.8rem,6vw,5rem); text-transform:uppercase; line-height:1; letter-spacing:.5px; } .page-sub { color:var(--muted); font-size:1.05rem; max-width:600px; margin:.75rem auto 0; line-height:1.72; } .section { padding:3.5rem 0; } .section-alt { background:linear-gradient(180deg,var(--bg2) 0%,var(--bg) 100%); } /* ── Animations ─────────────────────────────────────── */ @keyframes fadeUp { from{opacity:0;transform:translateY(24px)} to{opacity:1;transform:translateY(0)} } @keyframes glowPulse { 0%,100%{box-shadow:0 0 20px rgba(33,215,232,.15)} 50%{box-shadow:0 0 40px rgba(33,215,232,.35)} } @keyframes shimmer { 0%{background-position:-200% center} 100%{background-position:200% center} } @keyframes scanLine { 0%{transform:translateY(-100%)} 100%{transform:translateY(100vh)} } /* animate-in: visible by default. JS adds .js-animate class to to enable animations */ .animate-in { opacity:1; transform:none; transition:opacity .55s ease, transform .55s ease; } .js-animate .animate-in { opacity:0; transform:translateY(20px); } .js-animate .animate-in.visible { opacity:1; transform:translateY(0); } .js-animate .animate-in:nth-child(2){transition-delay:.08s} .js-animate .animate-in:nth-child(3){transition-delay:.16s} .js-animate .animate-in:nth-child(4){transition-delay:.24s} /* ── Nav ────────────────────────────────────────────── */ .nav { position:fixed; top:0; left:0; right:0; z-index:9990; height:var(--nav-h); background:rgba(6,6,16,.88); backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px); border-bottom:1px solid rgba(255,255,255,.07); transition:background .3s, box-shadow .3s; } .nav.scrolled { background:rgba(6,6,16,.97); box-shadow:0 4px 24px rgba(0,0,0,.4); } .nav-inner { max-width:var(--max); margin:0 auto; padding:0 2rem; height:100%; display:flex; align-items:center; justify-content:space-between; gap:2rem; } .nav-logo { display:flex; align-items:center; flex-shrink:0; } .nav-logo img { height:44px; width:auto; } .nav-links-desktop { display:flex; align-items:center; gap:2rem; } /* desktop nav links */ .nav-link { font-size:.87rem; font-weight:600; letter-spacing:.3px; color:rgba(255,255,255,.72); transition:color .2s; white-space:nowrap; position:relative; padding-bottom:2px; } .nav-link:hover { color:var(--cyan); opacity:1; } .nav-link.active { color:var(--cyan); } .nav-link.active::after { content:''; position:absolute; bottom:-2px; left:0; right:0; height:2px; background:var(--cyan); border-radius:2px; } .nav-right { display:flex; align-items:center; gap:1.25rem; } .nav-cta { display:none; } @media(min-width:900px){.nav-cta{display:flex;}} /* ── Language switcher ──────────────────────────────── */ .lang-switcher { display:flex; align-items:center; gap:.35rem; } .lang-btn { padding:.3rem .65rem; border-radius:5px; border:1px solid rgba(255,255,255,.2); background:transparent; color:rgba(255,255,255,.6); font-size:.72rem; font-weight:700; letter-spacing:.5px; cursor:pointer; transition:all .2s; font-family:var(--font-b); } .lang-btn:hover { border-color:var(--cyan); color:var(--cyan); } /* ── Mobile menu ────────────────────────────────────── */ .menu-button { display:none; background:none; border:none; cursor:pointer; padding:.4rem; } /* mobile nav handled by #navMobilePanel - see header.php */ /* mobile nav links handled by .nav-mob-link in header.php */ @media(max-width:899px){ .nav-links-desktop { display:none!important; } .menu-button { display:flex!important; align-items:center; justify-content:center; } .nav-right { gap:.6rem; } .nav-inner { padding:0 1.25rem; } .nav-logo img { height:38px; } /* nav-cta handled in nav-right, hidden on mobile by default .nav-cta{display:none} */ .lang-switcher { gap:.25rem; } .lang-btn { padding:.25rem .5rem; font-size:.68rem; } } /* ── Buttons ────────────────────────────────────────── */ .btn-primary { display:inline-flex; align-items:center; gap:.6rem; padding:.65rem 1.4rem; border-radius:8px; border:none; background:linear-gradient(90deg,var(--cyan) 0%,#5ef0ff 50%,var(--cyan) 100%); background-size:200% auto; color:#060610; font-size:.8rem; font-weight:700; letter-spacing:1.2px; text-transform:uppercase; cursor:pointer; transition:background-position .4s, box-shadow .25s; text-decoration:none; white-space:nowrap; } .btn-primary:hover { background-position:right center; box-shadow:0 8px 28px rgba(33,215,232,.4); opacity:1; color:#060610; } .btn-primary.btn-lg { padding:.75rem 1.75rem; font-size:.85rem; } .btn-outline { display:inline-flex; align-items:center; gap:.5rem; padding:.65rem 1.35rem; border-radius:8px; border:1.5px solid rgba(255,255,255,.22); background:transparent; color:var(--white); font-size:.8rem; font-weight:600; letter-spacing:.4px; cursor:pointer; transition:border-color .2s, color .2s; text-decoration:none; white-space:nowrap; } .btn-outline:hover { border-color:var(--cyan); color:var(--cyan); opacity:1; } .btn-wa { display:inline-flex; align-items:center; gap:.6rem; padding:.65rem 1.35rem; border-radius:8px; background:#25D366; color:#fff; font-size:.8rem; font-weight:700; letter-spacing:.4px; text-decoration:none; transition:box-shadow .25s; white-space:nowrap; } .btn-wa:hover { box-shadow:0 6px 24px rgba(37,211,102,.4); opacity:1; color:#fff; } body { padding-top:var(--nav-h); } /* ── Hero ───────────────────────────────────────────── */ .hero { position:relative; overflow:hidden; padding:0; min-height:auto; display:flex; align-items:stretch; background:var(--bg); } .hero-bg { display:none; } .hero .container { position:relative; z-index:1; padding-top:0; padding-bottom:0; } .hero-inner { display:grid; grid-template-columns:1fr 1fr; gap:0; align-items:stretch; background:rgba(10,10,24,.98); border:1px solid rgba(255,255,255,.07); border-radius:18px; overflow:hidden; margin:1.5rem 0; min-height:520px; } .hero-content { display:flex; flex-direction:column; align-items:flex-start; padding:2.5rem 2.5rem 2.5rem 3rem; justify-content:center; background:rgba(10,10,24,.98); min-height:520px; } .hero-badge-wrap { display:inline-flex; align-items:center; gap:.6rem; padding:.5rem 1.2rem; border-radius:6px; border:1px solid rgba(33,215,232,.35); background:rgba(33,215,232,.08); font-size:.68rem; font-weight:700; letter-spacing:2.5px; text-transform:uppercase; color:rgba(255,255,255,.85); margin-bottom:1.5rem; } .hero-badge-dot { width:8px; height:8px; border-radius:50%; background:var(--cyan); box-shadow:0 0 8px var(--cyan); animation:glowPulse 2s infinite; flex-shrink:0; } .hero-title { font-family:var(--font-d); font-size:clamp(4.2rem,8vw,7.5rem); line-height:.9; text-transform:uppercase; margin-bottom:1.1rem; } .hero-title .line1 { display:block; color:var(--white); } .hero-title .line2 { display:block; color:var(--cyan); text-shadow:0 0 60px rgba(33,215,232,.4); } .hero-subtitle { font-size:.95rem; color:var(--muted); margin-bottom:1.75rem; max-width:420px; line-height:1.7; } /* CJK languages: hero text doesn't uppercase so clamp differently */ body.lang-zh .hero-title, body.lang-th .hero-title, body.lang-ja .hero-title { font-size:clamp(3rem,6vw,5.5rem); line-height:1.1; font-family:var(--font-b,sans-serif); text-transform:none; letter-spacing:0; } body.lang-zh .hero-subtitle, body.lang-th .hero-subtitle, body.lang-ja .hero-subtitle { max-width:520px; font-size:1rem; } .hero-actions { display:flex; gap:1rem; margin-bottom:2.5rem; flex-wrap:wrap; } .hero-stats { display:grid; grid-template-columns:repeat(4,1fr); gap:.5rem; width:100%; } .hero-stat-pill { display:flex; flex-direction:column; align-items:center; justify-content:center; padding:.85rem .5rem; border-radius:8px; gap:.3rem; background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.1); text-align:center; } .hero-stat-num { font-family:var(--font-d); font-size:1.6rem; color:var(--cyan); line-height:1; } .hero-stat-label { font-size:.6rem; text-transform:uppercase; letter-spacing:1px; color:var(--muted); line-height:1.35; } /* ── Hero visual ────────────────────────────────────── */ .hero-visual { position:relative; overflow:hidden; display:flex; flex-direction:column; min-height:520px; } .hero-card-grid { display:grid; grid-template-columns:1fr; gap:3px; height:100%; } .hero-card-row { display:grid; grid-template-columns:1fr 1fr; gap:3px; } .hero-card { position:relative; border-radius:14px; overflow:hidden; cursor:pointer; transition:transform .3s; background:var(--bg3); } .hero-card:hover { transform:scale(1.02); } .hero-card-large { aspect-ratio:auto; min-height:300px; flex:1; } .hero-card-row .hero-card { aspect-ratio:4/3; } .hero-card img { width:100%; height:100%; object-fit:cover; } .hero-card-overlay { position:absolute; inset:0; background:linear-gradient(180deg,transparent 40%,rgba(0,0,0,.7)); } .hero-card-label { position:absolute; bottom:.75rem; left:.85rem; font-family:var(--font-d); font-size:.85rem; text-transform:uppercase; letter-spacing:1px; color:#fff; } .hero-card-play { position:absolute; bottom:.85rem; right:.85rem; width:40px; height:40px; border-radius:50%; background:rgba(33,215,232,.75); backdrop-filter:blur(4px); display:flex; align-items:center; justify-content:center; color:#060610; transition:transform .2s, background .2s; } .hero-card:hover .hero-card-play { background:var(--cyan); transform:scale(1.1); } /* ── Trust strip ────────────────────────────────────── */ .trust-strip { padding:1.25rem 0; border-top:1px solid rgba(255,255,255,.07); border-bottom:1px solid rgba(255,255,255,.07); background:rgba(255,255,255,.02); } .trust-inner { display:flex; align-items:center; justify-content:center; gap:3rem; flex-wrap:wrap; } .trust-item { display:flex; align-items:center; gap:.85rem; } .trust-icon-wrap { width:40px; height:40px; border-radius:10px; background:rgba(33,215,232,.08); border:1px solid rgba(33,215,232,.18); display:flex; align-items:center; justify-content:center; flex-shrink:0; } .trust-text-main { font-weight:700; font-size:.9rem; color:var(--white); } .trust-text-sub { font-size:.72rem; color:var(--muted); } /* ── Experience cards ───────────────────────────────── */ .exp-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1.5rem; } .exp-grid-full { grid-template-columns:repeat(3,1fr); } .exp-card { background:var(--card); border:1px solid rgba(255,255,255,.07); border-radius:16px; overflow:hidden; display:flex; flex-direction:column; transition:transform .3s, border-color .3s; } .exp-card:hover { transform:translateY(-5px); border-color:rgba(33,215,232,.3); } .exp-card-img { position:relative; aspect-ratio:16/10; overflow:hidden; cursor:pointer; background:var(--bg3); } .exp-card-img img { width:100%; height:100%; object-fit:cover; transition:transform .5s; position:relative; z-index:1; display:block; } .exp-card:hover .exp-card-img img { transform:scale(1.05); filter:brightness(1); } .exp-card-overlay { position:absolute; inset:0; background:linear-gradient(180deg,transparent 50%,rgba(0,0,0,.6)); z-index:5; pointer-events:none; } .exp-card-play { position:absolute; bottom:.75rem; right:.75rem; width:44px; height:44px; border-radius:50%; background:rgba(33,215,232,.85); display:flex; align-items:center; justify-content:center; color:#060610; opacity:0; transform:scale(.85); transition:all .25s; } .exp-card:hover .exp-card-play { opacity:1; transform:scale(1); } .exp-card-tags { position:absolute; top:.75rem; left:.75rem; display:flex; gap:.35rem; flex-wrap:wrap; } .exp-tag { font-size:.58rem; font-weight:700; letter-spacing:1px; text-transform:uppercase; padding:.2rem .6rem; border-radius:4px; } .exp-tag[data-cat="Multiplayer"] { background:#0e6b6b; color:#aff5f5; border:1px solid #21d7e8; } .exp-tag[data-cat="Shooting"] { background:#7a1050; color:#ffb3e6; border:1px solid #ff3dec; } .exp-tag[data-cat="Adventure"] { background:#7a4500; color:#ffd9a0; border:1px solid #f59e0b; } .exp-tag[data-cat="Space"] { background:#2d1a7a; color:#c4b5fd; border:1px solid #8b5cf6; } .exp-tag { background:#1a3a3a; color:#7de8e8; border:1px solid rgba(33,215,232,.4); } .exp-card-age { position:absolute; top:.75rem; right:.75rem; padding:.25rem .65rem; border-radius:100px; background:linear-gradient(90deg,var(--pink),#c0159b); color:#fff; font-size:.6rem; font-weight:700; letter-spacing:.5px; } .exp-card-body { padding:1.25rem 1.35rem; display:flex; flex-direction:column; flex:1; gap:.6rem; } .exp-card-title { font-size:1.05rem; font-weight:700; color:var(--white); } .exp-card-desc { color:var(--muted); font-size:.9rem; line-height:1.65; flex:1; } .exp-card-meta { display:flex; gap:1.1rem; font-size:.72rem; text-transform:uppercase; letter-spacing:1px; color:var(--muted); font-weight:600; } .exp-card-meta span { display:flex; align-items:center; gap:.35rem; } .exp-card-meta svg { color:var(--cyan); flex-shrink:0; } .exp-card-btn { display:block; text-align:center; padding:.7rem; border-radius:8px; border:1px solid rgba(33,215,232,.3); color:var(--cyan); font-size:.78rem; font-weight:700; letter-spacing:2px; text-transform:uppercase; transition:all .2s; margin-top:.25rem; } .exp-card-btn:hover { background:var(--cyan); color:#060610; opacity:1; } /* ── Filter bar ─────────────────────────────────────── */ .filter-bar { display:flex; gap:.65rem; flex-wrap:wrap; justify-content:center; margin-bottom:2.25rem; } .filter-btn { padding:.5rem 1.2rem; border-radius:100px; border:1px solid rgba(255,255,255,.15); background:transparent; color:var(--muted); font-size:.82rem; font-weight:600; cursor:pointer; transition:all .2s; font-family:var(--font-b); } .filter-btn:hover { border-color:rgba(33,215,232,.4); color:var(--text); } .filter-btn.active { background:rgba(33,215,232,.12); border-color:var(--cyan); color:var(--cyan); } /* ── Pricing tabs ───────────────────────────────────── */ .pricing-tabs { display:flex; gap:.75rem; justify-content:center; margin-bottom:2.5rem; flex-wrap:wrap; } .pricing-tab-row { display:flex; gap:.75rem; justify-content:center; margin-bottom:2.5rem; flex-wrap:wrap; } .ptab,.pricing-tab { display:inline-flex; align-items:center; gap:.5rem; padding:.7rem 1.75rem; border-radius:100px; border:2px solid rgba(255,255,255,.15); background:transparent; color:rgba(255,255,255,.55); font-family:var(--font-b); font-size:.9rem; font-weight:600; cursor:pointer; transition:all .22s; } .ptab:hover,.pricing-tab:hover { border-color:rgba(33,215,232,.45); color:var(--white); } .ptab.active,.pricing-tab.active { background:var(--cyan); border-color:var(--cyan); color:#060610; font-weight:700; } /* ── Pricing cards ──────────────────────────────────── */ .pricing-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1.35rem; margin-bottom:2.5rem; } .pricing-full-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1.35rem; margin-bottom:2.5rem; } .pricing-full-grid--kids { grid-template-columns:repeat(4,1fr); } .price-card,.pricing-card { position:relative; padding:2rem 1.5rem; text-align:center; border:1px solid rgba(255,255,255,.09); border-radius:16px; background:rgba(12,12,28,.98); transition:transform .28s, border-color .28s; display:flex; flex-direction:column; align-items:center; } .price-card::before,.pricing-card::before { content:''; position:absolute; top:0; left:0; right:0; height:3px; background:rgba(255,255,255,.07); border-radius:16px 16px 0 0; } .price-card.featured::before,.pricing-card.pop::before { background:linear-gradient(90deg,var(--cyan),var(--pink)); } .price-card:hover,.pricing-card:hover { transform:translateY(-5px); border-color:rgba(33,215,232,.28); } .price-card.featured,.pricing-card.pop { border-color:rgba(33,215,232,.28); background:rgba(33,215,232,.04); } .price-pop-badge,.pricing-badge { position:absolute; top:-.65rem; left:50%; transform:translateX(-50%); background:linear-gradient(90deg,var(--cyan),var(--pink)); color:var(--bg); font-size:.55rem; font-weight:700; letter-spacing:1.5px; text-transform:uppercase; padding:.2rem .65rem; border-radius:2px; white-space:nowrap; } .price-name,.pc-adv { font-family:var(--font-d); font-size:1.4rem; text-transform:uppercase; margin-bottom:.3rem; letter-spacing:.5px; } .price-amount,.pc-price { font-family:var(--font-d); font-size:3.5rem; color:var(--cyan); line-height:1; margin:.5rem 0; } .price-amount small { font-size:1.8rem; } .price-per,.pc-pp { color:var(--muted); font-size:.8rem; margin-bottom:.6rem; } .price-savings { font-size:.75rem; color:var(--pink); font-weight:700; margin-bottom:1rem; } .price-features { list-style:none; text-align:left; width:100%; margin-bottom:1.5rem; flex:1; } .price-features li { display:flex; align-items:center; gap:.6rem; padding:.4rem 0; border-bottom:1px solid rgba(255,255,255,.04); font-size:.86rem; color:var(--muted); } .price-features li::before { content:'✓'; color:var(--cyan); font-weight:700; flex-shrink:0; } .pc-btn,.price-btn { display:block; width:100%; padding:.75rem; border-radius:8px; border:1.5px solid rgba(33,215,232,.35); color:var(--cyan); font-size:.8rem; font-weight:700; letter-spacing:1.5px; text-transform:uppercase; transition:all .2s; text-align:center; text-decoration:none; cursor:pointer; background:transparent; font-family:var(--font-b); margin-top:auto; } .pc-btn:hover,.price-btn:hover { background:var(--cyan); color:#060610; border-color:var(--cyan); opacity:1; } .pricing-card.pop .pc-btn, .price-card.featured .price-btn { background:var(--cyan); color:#060610; border-color:var(--cyan); } /* ── Kids pricing banner ────────────────────────────── */ .kids-pricing-banner { display:flex; align-items:center; gap:.75rem; background:linear-gradient(135deg,rgba(238,65,153,.08),rgba(33,215,232,.06)); border:1px solid rgba(238,65,153,.2); border-radius:var(--r); padding:1rem 1.4rem; margin-bottom:2rem; font-size:.9rem; color:var(--muted); } .kids-pricing-banner strong { color:var(--pink); } /* ── Note box ───────────────────────────────────────── */ .note-box { background:rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.08); border-radius:14px; padding:2rem; text-align:center; margin-bottom:1.5rem; } /* ── Why grid ───────────────────────────────────────── */ .why-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:1.5rem; } .why-card { background:rgba(12,12,28,.98); border:1px solid rgba(255,255,255,.07); border-radius:16px; padding:2rem 1.75rem; transition:border-color .25s, transform .25s; } .why-card:hover { border-color:rgba(33,215,232,.3); transform:translateY(-4px); } .why-icon { width:52px; height:52px; border-radius:12px; background:rgba(33,215,232,.08); border:1px solid rgba(33,215,232,.18); display:flex; align-items:center; justify-content:center; margin-bottom:1.1rem; } .why-title { font-size:.82rem; font-weight:800; text-transform:uppercase; letter-spacing:2px; color:var(--cyan); margin-bottom:.75rem; } .why-desc { color:var(--muted); font-size:.9rem; line-height:1.7; } /* ── Reviews ────────────────────────────────────────── */ .reviews-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1.5rem; } .review-card { background:rgba(12,12,28,.98); border:1px solid rgba(255,255,255,.07); border-radius:16px; padding:1.5rem; } .review-header { display:flex; align-items:center; gap:.85rem; margin-bottom:.85rem; } .reviewer-avatar { width:44px; height:44px; border-radius:50%; background:linear-gradient(135deg,var(--cyan),var(--pink)); display:flex; align-items:center; justify-content:center; font-family:var(--font-d); font-size:1.2rem; color:#060610; flex-shrink:0; } .reviewer-name { font-weight:700; font-size:.95rem; color:var(--white); } .reviewer-origin { font-size:.75rem; color:var(--muted); margin-top:.15rem; } .review-stars { color:#FFD700; font-size:1rem; letter-spacing:1px; margin-bottom:.75rem; } .review-text { color:var(--muted); font-size:.88rem; line-height:1.7; font-style:italic; } /* ── How it works ───────────────────────────────────── */ .how-strip { display:grid; grid-template-columns:repeat(4,1fr); gap:2rem; position:relative; } .how-strip::before { content:''; position:absolute; top:24px; left:12.5%; right:12.5%; height:1px; background:linear-gradient(90deg,transparent,rgba(33,215,232,.3),transparent); } .how-step { text-align:center; position:relative; } .how-num { font-family:var(--font-d); font-size:2.5rem; color:rgba(33,215,232,.25); margin-bottom:.75rem; } .how-strip-title { font-size:.95rem; font-weight:700; color:var(--white); margin-bottom:.5rem; } .how-strip-desc { font-size:.9rem; color:var(--muted); line-height:1.65; } /* ── Tourist / visitor cards ────────────────────────── */ .tourist-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1.5rem; } @media(max-width:900px){.tourist-grid{grid-template-columns:repeat(2,1fr)!important}} @media(max-width:600px){.tourist-grid{grid-template-columns:1fr!important}} .tourist-card { background:rgba(12,12,28,.98); border:1px solid rgba(255,255,255,.07); border-radius:16px; overflow:hidden; transition:border-color .25s, transform .25s; } .tourist-card:hover { border-color:rgba(33,215,232,.3); transform:translateY(-4px); } .tourist-card-img { aspect-ratio:16/9; overflow:hidden; background:var(--bg3); position:relative; cursor:pointer; } .tourist-card-img img { width:100%; height:100%; object-fit:cover; transition:transform .5s; position:relative; z-index:1; display:block; } .tourist-card:hover .tourist-card-img img { transform:scale(1.05); } .tourist-card-body { padding:1.5rem; } .tourist-card-title { font-size:.75rem; font-weight:800; text-transform:uppercase; letter-spacing:2.5px; color:var(--cyan); margin-bottom:.6rem; } .tourist-card-desc { color:var(--muted); font-size:.9rem; line-height:1.65; margin-bottom:.85rem; } .tourist-card-link { font-size:.82rem; font-weight:700; color:var(--cyan); letter-spacing:.5px; } /* ── CTA section ────────────────────────────────────── */ .cta-section { padding:5rem 0; } .cta-box { background:linear-gradient(135deg,rgba(33,215,232,.08),rgba(238,65,153,.05)); border:1px solid rgba(255,255,255,.1); border-radius:20px; padding:4rem 2rem; text-align:center; position:relative; overflow:hidden; } .cta-box::before { content:''; position:absolute; top:-50%; left:-50%; width:200%; height:200%; background:radial-gradient(circle at center,rgba(33,215,232,.04) 0%,transparent 60%); } .cta-box h2 { font-family:var(--font-d); font-size:clamp(2.5rem,5vw,4rem); text-transform:uppercase; position:relative; margin-bottom:.75rem; } .cta-box p { color:var(--muted); font-size:1.05rem; margin-bottom:2rem; position:relative; max-width:560px; margin-left:auto; margin-right:auto; } .cta-actions { display:flex; gap:1rem; justify-content:center; flex-wrap:wrap; position:relative; } /* ── Footer ─────────────────────────────────────────── */ .footer { background:rgba(6,6,8,.98); border-top:1px solid rgba(255,255,255,.07); padding:4rem 0 0; } .footer-grid { display:grid; grid-template-columns:2fr 1fr 1fr 1.5fr; gap:3rem; margin-bottom:3rem; } .footer-logo { height:44px; width:auto; margin-bottom:1rem; } .footer-brand p { color:var(--muted); font-size:.88rem; line-height:1.75; margin-bottom:1.25rem; } .footer-title { font-family:var(--font-d); font-size:.85rem; text-transform:uppercase; letter-spacing:2px; color:var(--white); margin-bottom:1rem; } .footer-links { display:flex; flex-direction:column; gap:.5rem; } .footer-links a { color:var(--muted); font-size:.88rem; transition:color .2s; } .footer-links a:hover { color:var(--cyan); opacity:1; } .footer-address { color:var(--muted); font-size:.88rem; line-height:1.9; margin-bottom:1rem; } .footer-hours{display:table;border-collapse:separate;border-spacing:0 .35rem;font-size:.85rem;margin-bottom:.85rem;width:auto} .footer-hours-row{display:table-row} .footer-hours-label,.footer-hours-val{display:table-cell;vertical-align:middle;white-space:nowrap} .footer-hours-label{color:var(--muted);padding-right:1.5rem;font-size:.82rem;font-weight:500} .footer-hours-val{color:var(--white);font-weight:700;font-size:.85rem;letter-spacing:.01em} .footer-hours-row--we .footer-hours-label,.footer-hours-row--we .footer-hours-val{color:var(--cyan)} .footer-social { display:flex; gap:.65rem; margin-top:.85rem; } .footer-social a { width:34px; height:34px; border-radius:8px; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.1); display:flex; align-items:center; justify-content:center; color:rgba(255,255,255,.6); transition:all .2s; } .footer-social a:hover { background:rgba(33,215,232,.12); border-color:var(--cyan); color:var(--cyan); opacity:1; } .footer-book-links { display:flex; flex-direction:column; gap:.5rem; } .footer-book-link { display:flex; align-items:center; gap:.65rem; padding:.65rem 1rem; border-radius:8px; font-size:.84rem; font-weight:600; text-decoration:none; transition:all .2s; } .footer-book-link.wa { background:rgba(37,211,102,.1); color:#25D366; border:1px solid rgba(37,211,102,.2); } .footer-book-link.line { background:rgba(0,195,0,.1); color:#00C300; border:1px solid rgba(0,195,0,.2); } .footer-book-link.ph { background:rgba(33,215,232,.06); color:var(--cyan); border:1px solid rgba(33,215,232,.15); } .footer-book-link.wc { background:rgba(255,255,255,.04); color:rgba(255,255,255,.6); border:1px solid rgba(255,255,255,.1); } .footer-book-link:hover { transform:translateX(3px); opacity:1; } .lift-badge { display:inline-flex; align-items:center; gap:.4rem; padding:.35rem .75rem; background:rgba(255,215,0,.08); border:1px solid rgba(255,215,0,.2); border-radius:6px; font-size:.72rem; font-weight:700; color:#FFD700; } .footer-bottom { border-top:1px solid rgba(255,255,255,.07); padding:1.25rem 0; display:flex; justify-content:space-between; align-items:center; font-size:.78rem; color:rgba(255,255,255,.3); flex-wrap:wrap; gap:.5rem; } .footer-badge { display:flex; align-items:center; gap:.35rem; } /* ── Floating WhatsApp ──────────────────────────────── */ .wa-float { position:fixed; bottom:1.75rem; right:1.75rem; z-index:9990; width:58px; height:58px; background:#25D366; border-radius:50%; display:flex; align-items:center; justify-content:center; box-shadow:0 4px 20px rgba(37,211,102,.5); transition:transform .25s; } .wa-float:hover { transform:scale(1.1); opacity:1; } /* ── Video modal ────────────────────────────────────── */ .video-modal { display:none; position:fixed; inset:0; z-index:99999; background:rgba(0,0,0,.9); align-items:center; justify-content:center; padding:1rem; } .video-modal-inner { position:relative; width:100%; max-width:900px; } .video-modal-close { position:absolute; top:-44px; right:0; background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.2); border-radius:8px; color:#fff; font-size:1rem; padding:.4rem .9rem; cursor:pointer; transition:background .2s; } .video-modal-close:hover { background:rgba(255,255,255,.2); } /* ── Page header ────────────────────────────────────── */ .page-header { padding:2.5rem 0 1.75rem; text-align:center; position:relative; overflow:hidden; } .page-header::before { content:''; position:absolute; inset:0; background:radial-gradient(ellipse 60% 80% at 50% 50%,rgba(33,215,232,.05) 0%,transparent 70%); pointer-events:none; } .page-header .container { position:relative; z-index:1; } /* ── Mode cards (booking step 1) ────────────────────── */ .mode-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; margin-bottom:1.5rem; } .mode-card { padding:1.4rem 1.1rem; border:2px solid rgba(255,255,255,.09); border-radius:14px; background:rgba(255,255,255,.02); cursor:pointer; text-align:center; transition:all .25s; position:relative; } .mode-card:hover { border-color:rgba(33,215,232,.35); background:rgba(33,215,232,.04); } .mode-card.sel { border-color:var(--cyan); background:rgba(33,215,232,.07); box-shadow:0 0 0 1px rgba(33,215,232,.2); } .mode-card.pop { border-color:rgba(33,215,232,.3); } .mode-pop-badge { position:absolute; top:-.7rem; left:50%; transform:translateX(-50%); background:linear-gradient(90deg,var(--cyan),var(--pink)); color:var(--bg); font-size:.55rem; font-weight:700; letter-spacing:1.5px; text-transform:uppercase; padding:.2rem .65rem; border-radius:20px; white-space:nowrap; } .mode-icon-wrap { width:52px; height:52px; border-radius:12px; background:rgba(33,215,232,.08); border:1px solid rgba(33,215,232,.18); display:flex; align-items:center; justify-content:center; margin:0 auto .75rem; } .mode-name { font-family:var(--font-d); font-size:.95rem; text-transform:uppercase; letter-spacing:.5px; margin-bottom:.25rem; } .mode-count { font-size:.75rem; color:var(--muted); margin-bottom:.5rem; } .mode-price { font-family:var(--font-d); font-size:1.3rem; color:var(--cyan); } .mode-price small { font-size:.62rem; font-family:var(--font-b); color:var(--muted); display:block; margin-top:.05rem; } /* ── Booking panel ──────────────────────────────────── */ .bk-panel { display:grid; grid-template-columns:1fr 280px; gap:2rem; align-items:start; } .bk-steps { grid-column:1/-1; display:flex; align-items:center; justify-content:center; gap:0; padding:1.5rem 2rem; background:rgba(10,10,24,.98); border:1px solid rgba(255,255,255,.08); border-radius:16px; } .bk-step { display:flex; flex-direction:column; align-items:center; gap:.35rem; } .bk-step span { width:38px; height:38px; border-radius:50%; border:2px solid rgba(255,255,255,.15); background:rgba(255,255,255,.04); display:flex; align-items:center; justify-content:center; font-size:.82rem; font-weight:700; color:rgba(255,255,255,.4); transition:all .3s; font-family:var(--font-b); } .bk-step small { font-size:.62rem; text-transform:uppercase; letter-spacing:1px; color:rgba(255,255,255,.35); white-space:nowrap; } .bk-step.active span { border-color:var(--cyan); background:rgba(33,215,232,.15); color:var(--cyan); } .bk-step.done span { border-color:var(--cyan); background:var(--cyan); color:#060610; } .bk-step-line { flex:1; height:1px; background:rgba(255,255,255,.1); min-width:24px; max-width:64px; } .bk-content { background:rgba(10,10,24,.98); border:1px solid rgba(255,255,255,.08); border-radius:18px; padding:2rem 2.25rem; } .bk-panel-title { font-family:var(--font-d); font-size:1.5rem; text-transform:uppercase; margin-bottom:1.25rem; color:var(--white); letter-spacing:.5px; } .bk-sublabel { font-size:.72rem; font-weight:700; text-transform:uppercase; letter-spacing:2px; color:var(--muted); margin-bottom:.75rem; display:block; } /* ── Guest counters ─────────────────────────────────── */ .guest-counters { display:grid; grid-template-columns:1fr 1fr; gap:1rem; margin-bottom:1.5rem; } .gc-box { background:rgba(255,255,255,.03); border:1.5px solid rgba(255,255,255,.1); border-radius:14px; padding:1.1rem 1.25rem; transition:border-color .2s; } .gc-adults { border-color:rgba(33,215,232,.3); } .gc-label { font-size:.7rem; font-weight:800; text-transform:uppercase; letter-spacing:2px; margin-bottom:.7rem; } .gc-label-adult { color:var(--cyan); } .gc-label-kids { color:var(--pink); } .gc-ctrl { display:flex; align-items:center; gap:.85rem; } .gc-btn { width:40px; height:40px; border-radius:10px; border:1.5px solid rgba(255,255,255,.2); background:transparent; color:var(--white); font-size:1.35rem; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:all .2s; } .gc-btn:hover { border-color:var(--cyan); color:var(--cyan); background:rgba(33,215,232,.08); } .gc-num { font-family:var(--font-d); font-size:3rem; line-height:1; min-width:56px; text-align:center; } .gc-num.adult { color:var(--cyan); } .gc-num.kids { color:var(--pink); } .gc-price { font-size:.75rem; color:var(--muted); margin-top:.5rem; } .gc-price strong { color:var(--white); } /* ── Booking total row ──────────────────────────────── */ .bk-total-row { display:flex; align-items:center; justify-content:space-between; background:rgba(33,215,232,.04); border:1px solid rgba(33,215,232,.15); border-radius:12px; padding:1.1rem 1.4rem; margin:1.25rem 0; gap:.75rem; flex-wrap:wrap; } .bk-total-label { font-size:.82rem; color:var(--muted); font-weight:600; } .bk-total-breakdown { font-size:.78rem; color:var(--muted); margin-top:.2rem; } .bk-total-amt { font-family:var(--font-d); font-size:2.2rem; background:linear-gradient(90deg,var(--cyan),var(--pink)); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; } /* ── Booking nav ────────────────────────────────────── */ .nav-row { display:flex; justify-content:space-between; align-items:center; margin-top:1.75rem; gap:1rem; flex-wrap:wrap; } .btn-next { padding:.9rem 1.9rem; background:linear-gradient(90deg,var(--cyan),#5ef0ff,var(--cyan)); background-size:200%; color:#060610; border:none; border-radius:10px; font-weight:800; font-size:.83rem; letter-spacing:2px; text-transform:uppercase; cursor:pointer; transition:background-position .4s,box-shadow .25s; display:inline-flex; align-items:center; gap:.5rem; font-family:var(--font-b); } .btn-next:hover { background-position:right center; box-shadow:0 8px 28px rgba(33,215,232,.45); } .btn-next:disabled { opacity:.35; cursor:not-allowed; } .btn-back { padding:.75rem 1.4rem; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.12); border-radius:10px; color:rgba(255,255,255,.7); font-size:.85rem; cursor:pointer; transition:all .2s; font-family:var(--font-b); } .btn-back:hover { background:rgba(255,255,255,.1); color:var(--white); } .btn-confirm { padding:.9rem 2.25rem; background:linear-gradient(90deg,#25D366,#1da851); color:#fff; border:none; border-radius:10px; font-weight:800; font-size:.88rem; cursor:pointer; display:inline-flex; align-items:center; gap:.5rem; transition:box-shadow .25s; font-family:var(--font-b); letter-spacing:.5px; } .btn-confirm:hover { box-shadow:0 6px 24px rgba(37,211,102,.45); } .btn-outline-sm { padding:.6rem 1.15rem; border:1px solid rgba(255,255,255,.2); border-radius:8px; background:transparent; color:var(--muted); font-size:.82rem; cursor:pointer; transition:all .2s; font-family:var(--font-b); } .btn-outline-sm:hover { border-color:var(--cyan); color:var(--cyan); } /* ── Notice box ─────────────────────────────────────── */ .notice-box { display:flex; gap:.8rem; align-items:flex-start; padding:1rem 1.2rem; background:rgba(33,215,232,.04); border:1px solid rgba(33,215,232,.15); border-radius:10px; font-size:.87rem; color:var(--muted); line-height:1.6; } .notice-box svg { flex-shrink:0; color:var(--cyan); margin-top:2px; } .notice-pay { background:rgba(255,215,0,.05); border-color:rgba(255,215,0,.2); } .notice-pay svg { color:#FFD700; } /* ── Booking sidebar ────────────────────────────────── */ .bk-sidebar { background:rgba(10,10,24,.98); border:1px solid rgba(255,255,255,.08); border-radius:16px; padding:1.5rem; align-self:start; position:sticky; top:calc(var(--nav-h) + 1rem); } .sum-label { font-family:var(--font-d); font-size:1.1rem; text-transform:uppercase; margin-bottom:1.1rem; color:var(--white); letter-spacing:.5px; } .sum-row { display:flex; justify-content:space-between; padding:.55rem 0; border-bottom:1px solid rgba(255,255,255,.06); font-size:.85rem; } .sum-row span:first-child { color:var(--muted); } .sum-row span:last-child { color:var(--white); font-weight:600; text-align:right; max-width:155px; } .sum-divider { border-top:1px solid rgba(255,255,255,.12); margin:.5rem 0; } .sum-total span:last-child { color:var(--cyan) !important; font-family:var(--font-d); font-size:1.2rem; } /* ── Booking details rows ───────────────────────────── */ .booking-details { display:flex; flex-direction:column; gap:.4rem; } .detail-row { display:flex; justify-content:space-between; padding:.65rem 1rem; background:rgba(255,255,255,.03); border-radius:8px; font-size:.88rem; gap:1rem; } .detail-label { color:var(--muted); flex-shrink:0; } .detail-val { color:var(--white); font-weight:600; text-align:right; } /* ── Confirmation ───────────────────────────────────── */ .confirm-wrap { text-align:center; padding:1.5rem 0 2.5rem; } .confirm-icon { width:84px; height:84px; background:linear-gradient(135deg,var(--cyan),var(--pink)); border-radius:50%; display:flex; align-items:center; justify-content:center; margin:0 auto 1.75rem; box-shadow:0 8px 40px rgba(33,215,232,.4); } .confirm-ref { font-family:var(--font-d); font-size:1.8rem; color:var(--cyan); background:rgba(33,215,232,.08); border:1px solid rgba(33,215,232,.25); border-radius:10px; padding:.5rem 2rem; display:inline-block; letter-spacing:1px; } /* ── Game select ────────────────────────────────────── */ .game-select-header { margin-bottom:1rem; font-size:.9rem; color:var(--cyan); font-weight:700; } .game-select-grid { display:grid; grid-template-columns:1fr 1fr; gap:.75rem; max-height:440px; overflow-y:auto; padding-right:.25rem; } .game-select-item { display:flex; align-items:center; gap:.9rem; padding:.8rem 1rem; background:rgba(255,255,255,.03); border:1.5px solid rgba(255,255,255,.08); border-radius:10px; cursor:pointer; transition:all .2s; } .game-select-item:hover { border-color:rgba(33,215,232,.3); background:rgba(33,215,232,.03); } .game-select-item.selected { border-color:var(--cyan); background:rgba(33,215,232,.08); } .game-select-item img { width:60px; height:60px; object-fit:cover; border-radius:8px; flex-shrink:0; background:var(--bg3); } .game-select-name { font-size:.88rem; font-weight:700; color:var(--white); margin-bottom:.15rem; } .game-select-meta { font-size:.72rem; color:var(--muted); } .game-select-check { margin-left:auto; width:24px; height:24px; border-radius:50%; border:1.5px solid rgba(255,255,255,.2); display:flex; align-items:center; justify-content:center; flex-shrink:0; transition:all .2s; } .game-select-item.selected .game-select-check { background:var(--cyan); border-color:var(--cyan); } /* ── Calendar ───────────────────────────────────────── */ .cal-wrap { background:rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.08); border-radius:14px; padding:1.35rem; } .cal-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:1.1rem; } .cal-month-label { font-family:var(--font-d); font-size:1.25rem; text-transform:uppercase; color:var(--white); } .cal-nav { background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.12); border-radius:7px; color:var(--white); font-size:1.4rem; line-height:1; padding:.2rem .75rem; cursor:pointer; transition:background .2s; } .cal-nav:hover { background:rgba(255,255,255,.12); } .cal-weekdays { display:grid; grid-template-columns:repeat(7,1fr); text-align:center; margin-bottom:.5rem; } .cal-weekdays span { font-size:.68rem; color:var(--muted); font-weight:700; text-transform:uppercase; letter-spacing:.5px; padding:.4rem 0; } .cal-days { display:grid; grid-template-columns:repeat(7,1fr); gap:3px; } .cal-day { aspect-ratio:1; display:flex; align-items:center; justify-content:center; border-radius:9px; font-size:.88rem; cursor:pointer; transition:all .2s; font-weight:500; } .cal-day:not(.cal-empty):not(.cal-past):hover { background:rgba(33,215,232,.15); color:var(--cyan); } .cal-day.cal-today { color:var(--pink); font-weight:800; } .cal-day.cal-selected { background:var(--cyan); color:#060610; font-weight:800; } .cal-day.cal-past,.cal-day.cal-empty { color:rgba(255,255,255,.2); cursor:default; } .time-slots-wrap { margin-top:1.1rem; } .time-slots-label { font-size:.7rem; font-weight:800; text-transform:uppercase; letter-spacing:2px; color:var(--muted); margin-bottom:.75rem; } .time-slots-grid { display:flex; flex-wrap:wrap; gap:.5rem; } .time-slot { padding:.55rem 1rem; background:rgba(33,215,232,.08); color:var(--cyan); border-radius:8px; font-size:.85rem; font-weight:700; cursor:pointer; border:1.5px solid rgba(33,215,232,.2); transition:all .2s; } .time-slot:hover { background:rgba(33,215,232,.2); border-color:var(--cyan); } .time-slot.selected { background:var(--cyan); color:#060610; border-color:var(--cyan); } /* ── Info form ──────────────────────────────────────── */ .info-form { display:flex; flex-direction:column; gap:1rem; } .form-group { display:flex; flex-direction:column; gap:.4rem; } .form-label { font-size:.78rem; font-weight:700; text-transform:uppercase; letter-spacing:1.5px; color:rgba(255,255,255,.5); } .form-input,.form-textarea { padding:.85rem 1rem; background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.12); border-radius:10px; color:var(--white); font-size:.95rem; font-family:var(--font-b); transition:border-color .2s, background .2s; outline:none; } .form-input:focus,.form-textarea:focus { border-color:var(--cyan); background:rgba(33,215,232,.04); } .form-input::placeholder,.form-textarea::placeholder { color:rgba(255,255,255,.28); } .form-textarea { resize:vertical; min-height:100px; } /* ── Stripe payment ─────────────────────────────────── */ .stripe-wrap { margin:1.25rem 0; } .stripe-wrap label { font-size:.78rem; font-weight:700; text-transform:uppercase; letter-spacing:1.5px; color:rgba(255,255,255,.5); display:block; margin-bottom:.5rem; } #stripe-card-element { padding:.9rem 1rem; background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.12); border-radius:10px; transition:border-color .2s; } #stripe-card-element.StripeElement--focus { border-color:var(--cyan); } #stripe-card-errors { color:#ff6b6b; font-size:.82rem; margin-top:.4rem; min-height:1.2rem; } .payment-methods { display:flex; gap:.75rem; margin-bottom:1.25rem; } .pay-method-btn { flex:1; padding:.85rem; border:2px solid rgba(255,255,255,.1); border-radius:10px; background:rgba(255,255,255,.03); color:var(--muted); font-size:.85rem; font-weight:600; cursor:pointer; transition:all .2s; text-align:center; font-family:var(--font-b); } .pay-method-btn.active { border-color:var(--cyan); background:rgba(33,215,232,.08); color:var(--cyan); } .pay-method-btn:hover { border-color:rgba(33,215,232,.3); color:var(--text); } /* ── Partner pages ──────────────────────────────────── */ .partner-hero { padding:5rem 0 3rem; text-align:center; position:relative; overflow:hidden; } .partner-hero::before { content:''; position:absolute; inset:0; background:radial-gradient(ellipse 80% 80% at 50% 50%,rgba(33,215,232,.06) 0%,transparent 70%); pointer-events:none; } .partner-hero .container { position:relative; z-index:1; } .partner-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1.5rem; } .partner-card { background:rgba(12,12,28,.98); border:1px solid rgba(255,255,255,.08); border-radius:18px; overflow:hidden; transition:transform .3s, border-color .3s; display:flex; flex-direction:column; } .partner-card:hover { transform:translateY(-5px); border-color:rgba(33,215,232,.3); } .partner-card-img { aspect-ratio:16/9; overflow:hidden; background:var(--bg3); position:relative; cursor:pointer; } .partner-card-img img { width:100%; height:100%; object-fit:cover; transition:transform .5s; position:relative; z-index:1; display:block; } .partner-card:hover .partner-card-img img { transform:scale(1.05); } .partner-card-body { padding:1.75rem; flex:1; display:flex; flex-direction:column; } .partner-card-tag { font-size:.65rem; font-weight:700; text-transform:uppercase; letter-spacing:2px; color:var(--cyan); margin-bottom:.6rem; } .partner-card-title { font-family:var(--font-d); font-size:1.6rem; text-transform:uppercase; color:var(--white); margin-bottom:.75rem; line-height:1.1; } .partner-card-desc { color:var(--muted); font-size:.9rem; line-height:1.7; flex:1; margin-bottom:1.25rem; } .partner-card-earnings { background:rgba(33,215,232,.06); border:1px solid rgba(33,215,232,.15); border-radius:8px; padding:.75rem 1rem; font-size:.85rem; margin-bottom:1.25rem; } .partner-card-earnings strong { color:var(--cyan); font-size:1rem; } .partner-prog-grid { display:grid; grid-template-columns:1fr 1fr; gap:1rem; margin-top:2rem; } .partner-prog-card { background:rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.08); border-radius:12px; padding:1.25rem; } .partner-prog-title { font-size:.78rem; font-weight:700; text-transform:uppercase; letter-spacing:1.5px; color:var(--cyan); margin-bottom:.5rem; } .partner-pricing-table { width:100%; border-collapse:collapse; font-size:.88rem; margin:1.5rem 0; } .partner-pricing-table th { padding:.7rem 1rem; background:rgba(33,215,232,.08); color:var(--white); font-weight:700; text-align:left; border-bottom:1px solid rgba(33,215,232,.2); font-size:.78rem; text-transform:uppercase; letter-spacing:1px; } .partner-pricing-table td { padding:.65rem 1rem; border-bottom:1px solid rgba(255,255,255,.06); color:var(--muted); } .partner-pricing-table tr:last-child td { border-bottom:none; } .partner-pricing-table td:last-child { color:var(--cyan); font-weight:700; font-family:var(--font-d); font-size:1rem; } .partner-pricing-table tr.highlight td { background:rgba(33,215,232,.04); } .partner-form-wrap { background:rgba(12,12,28,.98); border:1px solid rgba(255,255,255,.08); border-radius:18px; padding:2.5rem; } .partner-form-wrap h3 { font-family:var(--font-d); font-size:1.8rem; text-transform:uppercase; margin-bottom:.5rem; } /* ── Contact page ───────────────────────────────────── */ .contact-grid { display:grid; grid-template-columns:1fr 1fr; gap:3rem; align-items:start; } .contact-block { margin-bottom:2rem; } .contact-block h3 { font-family:var(--font-d); font-size:1.2rem; text-transform:uppercase; letter-spacing:.5px; margin-bottom:.85rem; color:var(--white); } .hours-grid { display:flex; flex-direction:column; gap:.3rem; } .hours-row { display:flex; justify-content:space-between; padding:.5rem 0; border-bottom:1px solid rgba(255,255,255,.06); font-size:.9rem; } .booking-channels { display:flex; flex-direction:column; gap:.5rem; } .channel-btn { display:flex; align-items:center; gap:.9rem; padding:.9rem 1.15rem; border-radius:10px; font-size:.9rem; font-weight:600; text-decoration:none; transition:transform .2s, box-shadow .2s; } .channel-btn:hover { transform:translateX(4px); opacity:1; } .wa-btn { background:rgba(37,211,102,.1); color:#25D366; border:1px solid rgba(37,211,102,.25); } .line-btn { background:rgba(0,195,0,.08); color:#00C300; border:1px solid rgba(0,195,0,.2); } .email-btn { background:rgba(33,215,232,.06); color:var(--cyan); border:1px solid rgba(33,215,232,.18); } .phone-btn { background:rgba(255,255,255,.04); color:rgba(255,255,255,.8); border:1px solid rgba(255,255,255,.1); } .arrive-item { padding:.6rem 0; border-bottom:1px solid rgba(255,255,255,.06); font-size:.88rem; color:var(--muted); line-height:1.6; } .arrive-item strong { color:var(--white); display:block; } /* ── Safety / FAQ ───────────────────────────────────── */ .two-col-grid { display:grid; grid-template-columns:1fr 1fr; gap:1.25rem; } .policy-card { background:rgba(12,12,28,.98); border:1px solid rgba(255,255,255,.08); border-radius:14px; padding:1.65rem; } .policy-card-title { display:flex; align-items:center; gap:.65rem; font-size:.95rem; font-weight:700; color:var(--white); margin-bottom:1rem; } .policy-list { list-style:none; padding:0; display:flex; flex-direction:column; gap:.5rem; } .policy-list li { font-size:.9rem; color:var(--muted); padding-left:1.1rem; position:relative; line-height:1.65; } .policy-list li::before { content:'·'; position:absolute; left:0; color:var(--cyan); font-size:1.3rem; line-height:1.2; } .cancel-box { background:rgba(12,12,28,.98); border:1px solid rgba(255,255,255,.08); border-radius:16px; padding:2rem; margin-bottom:2rem; } .cancel-title { font-family:var(--font-d); font-size:1.4rem; text-transform:uppercase; color:var(--white); margin-bottom:1.25rem; } .cancel-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1.25rem; margin-bottom:1rem; } .cancel-item { display:flex; align-items:flex-start; gap:.75rem; } .cancel-item svg { flex-shrink:0; margin-top:3px; } .cancel-item strong { display:block; color:var(--white); font-size:.9rem; margin-bottom:.2rem; } .cancel-item span { font-size:.82rem; color:var(--muted); } .faq-list { display:flex; flex-direction:column; gap:.5rem; } .faq-item { background:rgba(12,12,28,.98); border:1px solid rgba(255,255,255,.08); border-radius:12px; overflow:hidden; transition:border-color .2s; } .faq-item.open { border-color:rgba(33,215,232,.3); } .faq-q { width:100%; text-align:left; padding:1.1rem 1.35rem; background:transparent; border:none; color:var(--white); font-size:.95rem; font-weight:600; cursor:pointer; display:flex; justify-content:space-between; align-items:center; gap:1rem; font-family:var(--font-b); } .faq-icon { flex-shrink:0; transition:transform .25s; color:var(--muted); } .faq-item.open .faq-icon { transform:rotate(180deg); color:var(--cyan); } .faq-a { max-height:0; overflow:hidden; transition:max-height .35s ease; } .faq-item.open .faq-a { max-height:320px; } .faq-a p { padding:.25rem 1.35rem 1.25rem; color:var(--muted); font-size:.9rem; line-height:1.72; } /* ── Rates notes ────────────────────────────────────── */ .rates-notes { display:grid; grid-template-columns:1fr 1fr; gap:.85rem; margin-top:2.5rem; } .rates-note { padding:1.1rem 1.35rem; background:rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.08); border-radius:10px; font-size:.9rem; color:var(--muted); line-height:1.65; } .rates-note strong { color:var(--white); } /* ── Responsive ─────────────────────────────────────── */ @media(max-width:1100px){ .why-grid { grid-template-columns:repeat(2,1fr); } .reviews-grid { grid-template-columns:repeat(2,1fr); } .pricing-full-grid { grid-template-columns:repeat(2,1fr); } .partner-grid { grid-template-columns:repeat(2,1fr); } .footer-grid { grid-template-columns:1fr 1fr; } } @media(max-width:900px){ /* Hero: flex column, video on TOP, content below */ .hero-inner { display:flex; flex-direction:column; border-radius:12px; } .hero-visual { display:block; order:1; height:200px; flex-shrink:0; width:100%; } .hero-content { order:2; padding:2rem 1.5rem; } /* hero-visual is display:block on mobile so flex:1 on the child does nothing — give it explicit height */ .hero-video-wrap { border-radius:12px 12px 0 0; height:100%; width:100%; display:block; } .hero { min-height:auto; padding:1.5rem 0 1.5rem; } .how-strip { grid-template-columns:1fr 1fr; } .bk-panel { grid-template-columns:1fr; } .bk-sidebar { display:none; } .contact-grid { grid-template-columns:1fr; } .two-col-grid { grid-template-columns:1fr; } .cancel-grid { grid-template-columns:1fr; } .rates-notes { grid-template-columns:1fr; } .game-select-grid { grid-template-columns:1fr; } .exp-grid,.exp-grid-full { grid-template-columns:repeat(2,1fr); } .tourist-grid { grid-template-columns:1fr; } } @media(max-width:700px){ .trust-inner { gap:1.5rem; } .hero-stats { gap:.5rem; } .pricing-grid,.pricing-full-grid { grid-template-columns:1fr 1fr; } .pricing-full-grid--kids { grid-template-columns:1fr 1fr; } .partner-grid { grid-template-columns:1fr; } .partner-prog-grid { grid-template-columns:1fr; } .footer-grid { grid-template-columns:1fr; } } @media(max-width:600px){ .guest-counters { grid-template-columns:1fr; } .mode-grid { grid-template-columns:1fr 1fr; } .bk-steps { overflow-x:auto; justify-content:flex-start; padding:1rem; } .bk-step small { display:none; } .exp-grid,.exp-grid-full { grid-template-columns:1fr 1fr; } .why-grid { grid-template-columns:1fr; } .reviews-grid { grid-template-columns:1fr; } .how-strip { grid-template-columns:1fr; } .pricing-grid,.pricing-full-grid { grid-template-columns:1fr; } .hero-title { font-size:clamp(3.5rem,15vw,6rem); } .bk-content { padding:1.5rem; } /* Mobile spacing — reduce top padding on page headers */ .page-header { padding:1.75rem 0 1.5rem !important; } .page-title { font-size:clamp(2rem,10vw,3rem); } .page-sub { font-size:.9rem; margin-top:.5rem; } /* Exp cards: 2 col on small mobile for better density */ .exp-card-body { padding:1rem 1.1rem; } .exp-card-play { opacity:1; transform:scale(1); } /* Nav: reduce height on small screens */ :root { --nav-h: 60px; } } @media(max-width:420px){ .exp-grid,.exp-grid-full { grid-template-columns:1fr; } } /* No hyphens globally */ *, *::before, *::after { hyphens: none; -webkit-hyphens: none; } /* Polylang language dropdown */ .lang-dropdown { position:relative; } .lang-drop-btn { display:flex; align-items:center; gap:.4rem; padding:.35rem .75rem; border-radius:7px; border:1px solid rgba(255,255,255,.2); background:transparent; color:rgba(255,255,255,.82); font-size:.78rem; font-weight:700; cursor:pointer; transition:all .2s; font-family:var(--font-b); white-space:nowrap; } .lang-drop-btn:hover { border-color:var(--cyan); color:var(--cyan); } .lang-name { letter-spacing:.5px; } .lang-flag { font-size:.85rem; line-height:1; } .lang-caret { transition:transform .2s; flex-shrink:0; } .lang-dropdown.open .lang-caret { transform:rotate(180deg); } .lang-drop-menu { position:absolute; top:calc(100% + .5rem); right:0; background:rgba(10,10,22,.98); border:1px solid rgba(255,255,255,.12); border-radius:10px; padding:.35rem; min-width:180px; z-index:10000; opacity:0; pointer-events:none; transform:translateY(-6px); transition:opacity .2s, transform .2s; box-shadow:0 8px 32px rgba(0,0,0,.5); } .lang-dropdown.open .lang-drop-menu { opacity:1; pointer-events:all; transform:translateY(0); } .lang-drop-item { display:flex; align-items:center; gap:.65rem; padding:.6rem .85rem; border-radius:7px; font-size:.84rem; color:rgba(255,255,255,.75); text-decoration:none; transition:background .15s, color .15s; cursor:pointer; } .lang-drop-item:hover { background:rgba(33,215,232,.1); color:var(--white); opacity:1; } .lang-drop-item.active { color:var(--cyan); font-weight:600; } .lang-drop-item svg { margin-left:auto; flex-shrink:0; } /* Contact page */ .contact-grid { display:grid; grid-template-columns:1fr 1fr; gap:2.5rem; align-items:start; } .contact-left { display:flex; flex-direction:column; gap:1.1rem; } .contact-right { display:flex; flex-direction:column; gap:0; position:sticky; top:calc(var(--nav-h)+1.5rem); } .cinfo-card { background:rgba(12,12,28,.98); border:1px solid rgba(255,255,255,.08); border-radius:14px; padding:1.4rem 1.5rem; } .cinfo-form-card { padding:1.4rem 1.5rem; } .cinfo-card-head { display:flex; align-items:center; gap:.65rem; font-family:var(--font-d); font-size:1rem; text-transform:uppercase; letter-spacing:.5px; color:var(--white); margin-bottom:1rem; } .cinfo-address { color:var(--muted); font-size:.9rem; line-height:1.95; margin-bottom:.85rem; font-style:normal; } .cinfo-lift-warn { display:flex; align-items:center; gap:.5rem; padding:.6rem .9rem; background:rgba(255,215,0,.07); border:1px solid rgba(255,215,0,.2); border-radius:7px; font-size:.8rem; color:#FFD700; font-weight:600; } .cinfo-hours { display:flex; flex-direction:column; gap:0; } .cinfo-hours-row { display:flex; justify-content:space-between; padding:.5rem 0; border-bottom:1px solid rgba(255,255,255,.06); font-size:.88rem; } .cinfo-hours-row:last-child { border-bottom:none; } .cinfo-hours-row span { color:var(--muted); } .cinfo-hours-row strong { color:var(--white); } .cinfo-hours-row.cyan span, .cinfo-hours-row.cyan strong { color:var(--cyan); } .cinfo-channels { display:flex; flex-direction:column; gap:.5rem; } .cinfo-channel { display:flex; align-items:center; gap:.85rem; padding:.8rem 1rem; border-radius:10px; font-size:.88rem; text-decoration:none; transition:all .2s; border:1px solid transparent; } .cinfo-channel:hover { transform:translateX(3px); opacity:1; } .cinfo-channel span { display:flex; flex-direction:column; } .cinfo-channel strong { font-size:.88rem; color:var(--white); } .cinfo-channel small { font-size:.76rem; color:var(--muted); margin-top:.1rem; } .cinfo-channel.wa { background:rgba(37,211,102,.08); border-color:rgba(37,211,102,.2); color:#25D366; } .cinfo-channel.line { background:rgba(0,195,0,.06); border-color:rgba(0,195,0,.2); color:#00C300; } .cinfo-channel.phone{ background:rgba(33,215,232,.06); border-color:rgba(33,215,232,.15); color:var(--cyan); } .cinfo-channel.email{ background:rgba(255,255,255,.04); border-color:rgba(255,255,255,.1); color:rgba(255,255,255,.75); } .cf-row { display:grid; grid-template-columns:1fr 1fr; gap:1rem; } .req { color:var(--cyan); } .cmap-wrap { border-radius:14px; overflow:hidden; border:1px solid rgba(255,255,255,.08); } .cmap-inner { overflow:hidden; height:300px; border-radius:14px 14px 0 0; } .cmap-open-link { display:flex; align-items:center; gap:.5rem; padding:.85rem 1.2rem; background:rgba(12,12,28,.98); color:var(--cyan); font-size:.87rem; font-weight:600; text-decoration:none; border-top:1px solid rgba(255,255,255,.08); transition:background .2s; } .cmap-open-link:hover { background:rgba(33,215,232,.06); opacity:1; } .arrive-list { display:flex; flex-direction:column; gap:0; } .arrive-item { padding:.7rem 0; border-bottom:1px solid rgba(255,255,255,.06); font-size:.88rem; color:var(--muted); line-height:1.6; } .arrive-item:last-child { border-bottom:none; } .arrive-mode { font-weight:700; color:var(--white); font-size:.82rem; text-transform:uppercase; letter-spacing:.8px; margin-bottom:.2rem; } @media(max-width:900px){ .contact-grid{grid-template-columns:1fr} .contact-right{position:static} .cf-row{grid-template-columns:1fr} } /* Booking page package selector */ .bk-pkg-wrap { background:rgba(10,10,24,.98); border:1px solid rgba(255,255,255,.08); border-radius:18px; margin-bottom:1.5rem; overflow:hidden; } .bk-pkg-inner { padding:2rem 2.25rem; } .bk-section-label { display:flex; align-items:center; gap:.6rem; font-family:var(--font-d); font-size:1.15rem; text-transform:uppercase; letter-spacing:.5px; color:var(--white); margin-bottom:1.1rem; } .bk-counters-row { display:grid; grid-template-columns:1fr 1fr; gap:1rem; margin-bottom:1rem; } .bk-counter-box { border:2px solid rgba(255,255,255,.09); border-radius:14px; padding:1.1rem 1.25rem; transition:border-color .2s, background .2s; } .bk-counter-box.adult.active { border-color:rgba(33,215,232,.5); background:rgba(33,215,232,.04); } .bk-counter-box.kids.active { border-color:rgba(255,61,236,.5); background:rgba(255,61,236,.04); } .bk-counter-label { font-size:.72rem; font-weight:800; text-transform:uppercase; letter-spacing:2px; margin-bottom:.75rem; } .bk-counter-box.adult .bk-counter-label { color:var(--cyan); } .bk-counter-box.kids .bk-counter-label { color:var(--pink); } .bk-counter-box.adult .bk-counter-label span, .bk-counter-box.kids .bk-counter-label span { font-weight:400; letter-spacing:0; text-transform:none; color:var(--muted); font-size:.72rem; } .bk-counter-ctrl { display:flex; align-items:center; gap:.85rem; } .bk-cnt-btn { width:38px; height:38px; border-radius:9px; border:1.5px solid rgba(255,255,255,.18); background:transparent; color:var(--white); cursor:pointer; display:flex; align-items:center; justify-content:center; transition:all .2s; } .bk-cnt-btn:hover { border-color:var(--cyan); color:var(--cyan); background:rgba(33,215,232,.08); } .bk-cnt-num { font-family:var(--font-d); font-size:3.2rem; line-height:1; min-width:56px; text-align:center; color:var(--white); } .bk-cnt-num.kids { color:var(--pink); } .bk-counter-box.adult.active .bk-cnt-num { color:var(--cyan); } .bk-prompt { color:var(--muted); font-size:.9rem; padding:.85rem 1rem; background:rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.07); border-radius:9px; text-align:center; } .bk-adv-group-label { font-size:.72rem; font-weight:800; text-transform:uppercase; letter-spacing:2px; margin-bottom:.85rem; margin-top:.25rem; } .bk-adv-group-label.adult { color:var(--cyan); } .bk-adv-group-label.kids { color:var(--pink); } .bk-adv-grid { display:grid; grid-template-columns:repeat(6,1fr); gap:.6rem; margin-bottom:1.25rem; } .bk-adv-card { position:relative; padding:.9rem .5rem .7rem; border:2px solid rgba(255,255,255,.09); border-radius:11px; background:rgba(255,255,255,.02); cursor:pointer; text-align:center; transition:all .22s; } .bk-adv-card:hover { border-color:rgba(33,215,232,.4); background:rgba(33,215,232,.05); } .bk-adv-card.sel { border-color:var(--cyan); background:rgba(33,215,232,.1); box-shadow:0 0 0 1px rgba(33,215,232,.25); } .bk-adv-badge { position:absolute; top:-.6rem; left:50%; transform:translateX(-50%); background:linear-gradient(90deg,var(--cyan),var(--pink)); color:#060610; font-size:.45rem; font-weight:700; letter-spacing:1px; text-transform:uppercase; padding:.15rem .5rem; border-radius:20px; white-space:nowrap; } .bk-adv-num { font-family:var(--font-d); font-size:1.5rem; color:var(--white); line-height:1; margin-bottom:.1rem; } .bk-adv-card.sel .bk-adv-num { color:var(--cyan); } .bk-adv-label { font-size:.55rem; text-transform:uppercase; letter-spacing:.5px; color:var(--muted); margin-bottom:.35rem; } .bk-adv-price { font-size:.72rem; font-weight:700; color:var(--cyan); } .bk-total-display { display:flex; align-items:center; justify-content:space-between; background:rgba(33,215,232,.04); border:1px solid rgba(33,215,232,.18); border-radius:11px; padding:1rem 1.35rem; margin-bottom:.85rem; flex-wrap:wrap; gap:.75rem; } .bk-total-lbl { font-size:.78rem; color:var(--muted); font-weight:600; text-transform:uppercase; letter-spacing:1px; } .bk-total-breakdown { font-size:.8rem; color:var(--muted); margin-top:.2rem; } .bk-total-amt { font-family:var(--font-d); font-size:2.2rem; background:linear-gradient(90deg,var(--cyan),var(--pink)); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; } .bk-proceed-info { display:flex; align-items:center; gap:.6rem; font-size:.83rem; color:var(--muted); margin-bottom:1rem; } .bk-proceed-info svg { flex-shrink:0; color:var(--cyan); } .bk-proceed-btn { display:flex; align-items:center; justify-content:center; gap:.65rem; width:100%; padding:1rem; border:none; border-radius:10px; background:linear-gradient(90deg,var(--cyan),#5ef0ff,var(--cyan)); background-size:200%; color:#060610; font-weight:800; font-size:.9rem; letter-spacing:1.5px; text-transform:uppercase; cursor:pointer; transition:background-position .4s, box-shadow .25s; font-family:var(--font-b); } .bk-proceed-btn:hover { background-position:right center; box-shadow:0 8px 28px rgba(33,215,232,.4); } .bk-age-notice { display:flex; align-items:flex-start; gap:.65rem; padding:.85rem 1rem; background:rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.07); border-radius:9px; font-size:.82rem; color:var(--muted); margin-top:1rem; } .bk-age-notice svg { flex-shrink:0; color:var(--cyan); margin-top:2px; } .bk-lp-wrap { background:rgba(10,10,24,.98); border:1px solid rgba(255,255,255,.08); border-radius:18px; overflow:hidden; scroll-margin-top:90px; } .bk-lp-header { display:flex; align-items:center; gap:.65rem; padding:1.4rem 2rem; border-bottom:1px solid rgba(255,255,255,.07); font-family:var(--font-d); font-size:1.1rem; text-transform:uppercase; letter-spacing:.5px; color:var(--white); background:rgba(255,255,255,.02); } @media(max-width:900px){ .bk-adv-grid{grid-template-columns:repeat(4,1fr)} } @media(max-width:600px){ .bk-counters-row{grid-template-columns:1fr} .bk-adv-grid{grid-template-columns:repeat(3,1fr)} } /* ── v4 Polylang flag image fixes ───────────────────── */ .lang-drop-btn img, .lang-drop-item img { width: 20px; height: 14px; border-radius: 2px; object-fit: cover; display: inline-block; vertical-align: middle; flex-shrink: 0; } .lang-drop-item { font-size: .84rem; } /* Ensure flag + text gap is clean */ .lang-drop-btn { gap: .5rem; } .lang-drop-item { gap: .7rem; } /* ── v4 Nav: Book Now before lang on desktop ─────────── */ /* nav-right order: btn-primary | lang-dropdown | menu-button */ .nav-right .btn-primary.nav-cta { order: 1; } .nav-right .lang-dropdown { order: 2; } .nav-right .menu-button { order: 3; } /* ── v4 Booking page polish ──────────────────────────── */ /* Tighten the adventure grid on large screens to be more scannable */ .bk-adv-grid { grid-template-columns: repeat(6, 1fr); } /* LatePoint wrap — remove double border / give it breathing room */ .bk-lp-wrap { margin-top: 0; box-shadow: 0 0 60px rgba(33,215,232,.05); } /* Step connector line in booking */ .bk-section-label { padding-bottom: .75rem; border-bottom: 1px solid rgba(255,255,255,.06); margin-bottom: 1.35rem; } /* ── v4 Contact page — info card improvements ────────── */ .cinfo-card { transition: border-color .2s; } .cinfo-card:hover { border-color: rgba(33,215,232,.22); } .cinfo-card-head { display: flex; align-items: center; gap: .6rem; font-family: var(--font-d); font-size: .9rem; text-transform: uppercase; letter-spacing: 1px; color: var(--white); margin-bottom: 1rem; padding-bottom: .75rem; border-bottom: 1px solid rgba(255,255,255,.06); } /* Contact channel buttons — polish */ .cinfo-channels { display: flex; flex-direction: column; gap: .6rem; } .cinfo-channel { display: flex; align-items: center; gap: .85rem; padding: .85rem 1rem; border-radius: 10px; font-size: .9rem; font-weight: 600; text-decoration: none; border: 1px solid transparent; transition: transform .2s, box-shadow .2s, border-color .2s; } .cinfo-channel:hover { transform: translateX(4px); opacity: 1; } .cinfo-channel span { display: flex; flex-direction: column; } .cinfo-channel strong { font-size: .88rem; } .cinfo-channel small { font-size: .78rem; opacity: .75; font-weight: 400; } .cinfo-channel.wa { background: rgba(37,211,102,.08); border-color: rgba(37,211,102,.2); color: #25D366; } .cinfo-channel.line { background: rgba(0,195,0,.06); border-color: rgba(0,195,0,.2); color: #00C300; } .cinfo-channel.phone{ background: rgba(33,215,232,.06); border-color: rgba(33,215,232,.15); color: var(--cyan); } .cinfo-channel.email{ background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.1); color: rgba(255,255,255,.75); } .cinfo-channel.wa:hover { box-shadow: 0 4px 20px rgba(37,211,102,.2); } .cinfo-channel.line:hover { box-shadow: 0 4px 20px rgba(0,195,0,.15); } .cinfo-channel.phone:hover,.cinfo-channel.email:hover { box-shadow: 0 4px 20px rgba(33,215,232,.12); } /* How-to-arrive items */ .arrive-mode { font-size: .75rem; font-weight: 800; text-transform: uppercase; letter-spacing: 1px; color: var(--cyan); margin-bottom: .2rem; } /* Map inner height */ .cmap-inner { height: 320px; } /* ── v4 Footer — no hyphens, tighter spacing ─────────── */ .footer-brand p { hyphens: none; -webkit-hyphens: none; line-height: 1.8; } /* ── v4 LatePoint form wrapper — flush integration ───── */ .latepoint-w { border-radius: 0 !important; } .bk-lp-wrap .latepoint-w { border: none !important; background: transparent !important; } /* ── v4 Mobile nav — lang dropdown in mobile menu ───── */ @media(max-width:899px){ .nav-right .lang-dropdown { /* Show in mobile nav-right area */ display: flex; } .lang-drop-menu { right: 0; } } /* ════════════════════════════════════════════════ v5 additions — nav layout, booking, tags, contact ════════════════════════════════════════════════ */ /* ── Nav: logo left, centre group, right lang ──── */ .nav-centre { display:flex; align-items:center; gap:2rem; flex:1; justify-content:center; } .nav-inner { justify-content:space-between; } /* ── Exp tags — solid readable colors (screenshot match) ── */ .exp-tag { font-size:.6rem; font-weight:700; letter-spacing:.8px; text-transform:uppercase; padding:.22rem .65rem; border-radius:4px; display:inline-flex; align-items:center; } .exp-tag[data-cat="Multiplayer"] { background:#0d5f6e; color:#7df4ff; border:1px solid rgba(33,215,232,.5); } .exp-tag[data-cat="Shooting"] { background:#720c55; color:#ffaad8; border:1px solid rgba(255,61,236,.5); } .exp-tag[data-cat="Adventure"] { background:#6b3d00; color:#ffc870; border:1px solid rgba(245,158,11,.5); } .exp-tag[data-cat="Space"] { background:#2c1778; color:#c4b5fd; border:1px solid rgba(139,92,246,.5); } /* ── Booking page v5 ─────────────────────────── */ .bk-price-strip { background:rgba(8,8,20,1); border-bottom:1px solid rgba(255,255,255,.07); padding:.85rem 0; } .bk-price-strip-inner { display:flex; align-items:center; justify-content:center; gap:1.5rem; flex-wrap:wrap; font-size:.82rem; } .bk-price-strip-group { display:flex; align-items:center; gap:.55rem; flex-wrap:wrap; } .bk-ps-label { color:var(--muted); font-weight:600; font-size:.78rem; text-transform:uppercase; letter-spacing:.5px; } .bk-ps-item { color:var(--white); font-weight:600; } .bk-ps-item em { color:var(--muted); font-style:normal; font-weight:400; font-size:.75rem; } .bk-ps-sep { color:rgba(255,255,255,.2); } .bk-ps-highlight { color:var(--cyan); font-weight:700; } .bk-ps-divider { width:1px; height:16px; background:rgba(255,255,255,.15); } .bk-ps-link { color:var(--cyan); font-size:.78rem; border:1px solid rgba(33,215,232,.3); border-radius:5px; padding:.2rem .7rem; transition:all .2s; white-space:nowrap; } .bk-ps-link:hover { background:rgba(33,215,232,.08); opacity:1; } /* Step cards */ .bk-step-card { background:rgba(10,10,22,1); border:1px solid rgba(255,255,255,.09); border-radius:16px; padding:2rem 2.25rem; margin-bottom:1.25rem; transition:border-color .3s, opacity .3s; } .bk-step-card.bk-step-locked { opacity:.45; pointer-events:none; } .bk-step-head { display:flex; align-items:flex-start; gap:1rem; margin-bottom:1.75rem; } .bk-step-num { width:36px; height:36px; border-radius:50%; background:linear-gradient(135deg,var(--cyan),#5ef0ff); color:#060610; font-family:var(--font-d); font-size:1.2rem; display:flex; align-items:center; justify-content:center; flex-shrink:0; } .bk-step-card.bk-step-locked .bk-step-num { background:rgba(255,255,255,.15); color:rgba(255,255,255,.4); } .bk-step-title { font-family:var(--font-d); font-size:1.35rem; text-transform:uppercase; letter-spacing:.5px; color:var(--white); margin-bottom:.2rem; } .bk-step-sub { font-size:.88rem; color:var(--muted); line-height:1.55; } .bk-step-empty { padding:1.5rem; text-align:center; color:var(--muted); font-size:.9rem; background:rgba(255,255,255,.02); border-radius:10px; border:1px dashed rgba(255,255,255,.1); } /* Guest counters v5 */ .bk-counters-row { display:grid; grid-template-columns:1fr 1fr; gap:1rem; margin-bottom:1.25rem; } .bk-counter-box { display:flex; align-items:center; gap:1rem; padding:1.25rem 1.5rem; border:2px solid rgba(255,255,255,.1); border-radius:14px; background:rgba(255,255,255,.02); transition:all .25s; } .bk-counter-box.active { background:rgba(33,215,232,.04); } .bk-counter-box.adult.active { border-color:rgba(33,215,232,.45); } .bk-counter-box.kids.active { border-color:rgba(255,61,236,.45); } .bk-counter-box-icon { width:44px; height:44px; border-radius:12px; background:rgba(33,215,232,.1); border:1px solid rgba(33,215,232,.2); display:flex; align-items:center; justify-content:center; color:var(--cyan); flex-shrink:0; } .bk-counter-box-icon.kids { background:rgba(255,61,236,.1); border-color:rgba(255,61,236,.2); color:var(--pink); } .bk-counter-info { flex:1; } .bk-counter-label { font-weight:700; font-size:.9rem; color:var(--white); } .bk-counter-label.kids { color:var(--pink); } .bk-counter-age { font-size:.75rem; color:var(--muted); margin-top:.15rem; } .bk-counter-ctrl { display:flex; align-items:center; gap:.75rem; flex-shrink:0; } .bk-cnt-btn { width:36px; height:36px; border-radius:8px; border:1.5px solid rgba(255,255,255,.18); background:transparent; color:var(--white); cursor:pointer; display:flex; align-items:center; justify-content:center; transition:all .2s; } .bk-cnt-btn:hover { border-color:var(--cyan); color:var(--cyan); background:rgba(33,215,232,.08); } .bk-cnt-btn.plus:hover { border-color:var(--cyan); background:var(--cyan); color:#060610; } .bk-cnt-btn.plus.kids:hover { border-color:var(--pink); background:var(--pink); color:#fff; } .bk-cnt-num { font-family:var(--font-d); font-size:2.8rem; line-height:1; min-width:48px; text-align:center; color:var(--white); } .bk-cnt-num.kids { color:var(--pink); } .bk-counter-box.adult.active .bk-cnt-num { color:var(--cyan); } .bk-age-notice { display:flex; align-items:flex-start; gap:.65rem; padding:.9rem 1.1rem; background:rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.08); border-radius:9px; font-size:.83rem; color:var(--muted); line-height:1.6; } .bk-age-notice svg { flex-shrink:0; color:var(--cyan); margin-top:2px; } /* Adventure grids */ .bk-adv-section { margin-bottom:1.5rem; } .bk-adv-section:last-of-type { margin-bottom:1rem; } .bk-adv-section-label { display:flex; align-items:center; gap:.5rem; font-size:.75rem; font-weight:700; text-transform:uppercase; letter-spacing:1.5px; margin-bottom:.85rem; } .bk-adv-section-label.adult { color:var(--cyan); } .bk-adv-section-label.kids { color:var(--pink); } .bk-adv-grid { display:grid; grid-template-columns:repeat(6,1fr); gap:.6rem; } .bk-adv-btn { position:relative; padding:1rem .4rem .8rem; border:2px solid rgba(255,255,255,.1); border-radius:11px; background:rgba(255,255,255,.02); cursor:pointer; text-align:center; transition:all .22s; display:flex; flex-direction:column; align-items:center; gap:.2rem; } .bk-adv-btn:hover { border-color:rgba(33,215,232,.4); background:rgba(33,215,232,.06); transform:translateY(-2px); } .bk-adv-btn.sel { border-color:var(--cyan); background:rgba(33,215,232,.12); box-shadow:0 0 0 1px rgba(33,215,232,.3); } .bk-adv-btn.popular.sel,.bk-adv-btn.best.sel { border-color:var(--cyan); } .bk-adv-pop-badge { position:absolute; top:-.65rem; left:50%; transform:translateX(-50%); font-size:.45rem; font-weight:700; letter-spacing:1px; text-transform:uppercase; padding:.18rem .55rem; border-radius:20px; white-space:nowrap; background:linear-gradient(90deg,var(--cyan),#5ef0ff); color:#060610; } .bk-adv-pop-badge.best { background:linear-gradient(90deg,var(--pink),#c0159b); color:#fff; } .bk-adv-n { font-family:var(--font-d); font-size:1.5rem; color:var(--white); line-height:1; } .bk-adv-btn.sel .bk-adv-n { color:var(--cyan); } .bk-adv-label { font-size:.55rem; text-transform:uppercase; letter-spacing:.5px; color:var(--muted); } .bk-adv-price { font-size:.7rem; font-weight:700; color:var(--cyan); } /* Total bar + proceed */ .bk-total-bar { display:flex; align-items:center; justify-content:space-between; background:rgba(33,215,232,.04); border:1px solid rgba(33,215,232,.2); border-radius:12px; padding:1rem 1.5rem; margin:1rem 0; flex-wrap:wrap; gap:.75rem; } .bk-total-bar-label { font-size:.78rem; font-weight:700; text-transform:uppercase; letter-spacing:1px; color:var(--muted); margin-bottom:.2rem; } .bk-total-bar-breakdown { font-size:.82rem; color:var(--muted); } .bk-total-bar-amount { font-family:var(--font-d); font-size:2.2rem; background:linear-gradient(90deg,var(--cyan),var(--pink)); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; white-space:nowrap; } .bk-proceed-btn { display:flex; align-items:center; justify-content:center; gap:.75rem; width:100%; padding:1.1rem; border:none; border-radius:11px; background:linear-gradient(90deg,var(--cyan),#5ef0ff,var(--cyan)); background-size:200%; color:#060610; font-weight:800; font-size:.9rem; letter-spacing:1.5px; text-transform:uppercase; cursor:pointer; transition:background-position .4s, box-shadow .25s, transform .2s; font-family:var(--font-b); } .bk-proceed-btn:hover { background-position:right center; box-shadow:0 8px 32px rgba(33,215,232,.45); transform:translateY(-1px); } .bk-lp-loading { display:flex; align-items:center; justify-content:center; gap:1rem; padding:2.5rem; color:var(--muted); font-size:.9rem; } .bk-lp-spinner { width:28px; height:28px; border:2.5px solid rgba(33,215,232,.25); border-top-color:var(--cyan); border-radius:50%; animation:spin .7s linear infinite; flex-shrink:0; } @keyframes spin{to{transform:rotate(360deg)}} .bk-lp-embed { margin-top:1.5rem; } .bk-lp-summary { background:rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.09); border-radius:12px; padding:1.25rem 1.5rem; margin-bottom:1.25rem; } .bk-lp-summary-row { display:flex; justify-content:space-between; align-items:flex-start; padding:.5rem 0; border-bottom:1px solid rgba(255,255,255,.06); font-size:.88rem; } .bk-lp-summary-row:last-of-type { border-bottom:none; } .bk-lp-summary-row span:first-child { color:var(--muted); } .bk-lp-summary-row span:last-child { color:var(--white); font-weight:600; text-align:right; max-width:240px; } .bk-lp-summary-row.total span:last-child { color:var(--cyan); font-family:var(--font-d); font-size:1.15rem; } .bk-lp-summary-note { font-size:.8rem; color:var(--muted); margin-top:.75rem; padding-top:.75rem; border-top:1px solid rgba(255,255,255,.06); } .bk-lp-fallback { padding:2rem; text-align:center; background:rgba(255,255,255,.03); border:1px dashed rgba(255,255,255,.12); border-radius:12px; color:var(--muted); font-size:.9rem; line-height:1.7; } .bk-lp-fallback a { color:var(--cyan); } /* ── Safety & FAQ: online payment updated ─────── */ /* (handled in page-safety.php copy) */ /* ── Responsive ──────────────────────────────── */ @media(max-width:900px){ .nav-centre { gap:1rem; } .bk-counters-row { grid-template-columns:1fr; } .bk-adv-grid { grid-template-columns:repeat(4,1fr); } .bk-step-card { padding:1.5rem; } } @media(max-width:600px){ .bk-adv-grid { grid-template-columns:repeat(3,1fr); } .bk-counter-box { flex-wrap:wrap; } .bk-price-strip-inner { gap:.75rem; font-size:.75rem; } /* nav handled by #navMobilePanel */ } /* ════════════════════════════════════════ v5.1 — booking, filter buttons, hero fixes ════════════════════════════════════════ */ /* ── body padding set once at line 161 — duplicate removed ── */ /* .hero padding preserved from original rules above */ /* ── Filter bar — match screenshot ──────── */ .filter-bar { display:flex; gap:.6rem; flex-wrap:wrap; justify-content:center; margin-bottom:2.25rem; } .filter-btn { padding:.55rem 1.35rem; border-radius:100px; border:1.5px solid rgba(255,255,255,.18); background:transparent; color:rgba(255,255,255,.65); font-size:.83rem; font-weight:600; cursor:pointer; transition:all .2s; font-family:var(--font-b); } .filter-btn:hover { border-color:var(--cyan); color:var(--white); background:rgba(33,215,232,.07); } .filter-btn.active { background:var(--cyan); border-color:var(--cyan); color:#060610; font-weight:700; } /* ── Booking step cards v5.1 ─────────────── */ .bk-step-card { background:rgba(10,10,22,1); border:1px solid rgba(255,255,255,.1); border-radius:16px; padding:2rem 2.25rem; margin-bottom:1.25rem; transition:border-color .3s, opacity .3s; } .bk-step-card.bk-step-locked { opacity:.4; pointer-events:none; } .bk-step-head { display:flex; align-items:flex-start; gap:1.1rem; margin-bottom:1.75rem; } .bk-step-num { min-width:38px; height:38px; border-radius:50%; border:2px solid rgba(255,255,255,.2); background:transparent; color:rgba(255,255,255,.35); font-family:var(--font-d); font-size:1.1rem; display:flex; align-items:center; justify-content:center; flex-shrink:0; transition:all .3s; } .bk-step-num.active { border-color:var(--cyan); background:var(--cyan); color:#060610; } .bk-step-title { font-family:var(--font-d); font-size:1.35rem; text-transform:uppercase; letter-spacing:.5px; color:var(--white); margin-bottom:.25rem; } .bk-step-sub { font-size:.88rem; color:var(--muted); line-height:1.55; } .bk-step-empty { padding:1.5rem; text-align:center; color:var(--muted); font-size:.88rem; background:rgba(255,255,255,.02); border:1px dashed rgba(255,255,255,.1); border-radius:10px; } /* ── Counters v5.1 ──────────────────────── */ .bk-counters-row { display:grid; grid-template-columns:1fr 1fr; gap:1rem; margin-bottom:1.25rem; } .bk-counter-box { display:flex; align-items:center; gap:1rem; padding:1.35rem 1.5rem; border:2px solid rgba(255,255,255,.1); border-radius:14px; background:rgba(255,255,255,.02); transition:border-color .25s, background .25s; cursor:default; } .bk-counter-box.adult.active { border-color:rgba(33,215,232,.55); background:rgba(33,215,232,.05); } .bk-counter-box.kids.active { border-color:rgba(175,0,255,.55); background:rgba(175,0,255,.05); } .bk-counter-icon-wrap { width:46px; height:46px; border-radius:12px; flex-shrink:0; display:flex; align-items:center; justify-content:center; background:rgba(33,215,232,.12); border:1px solid rgba(33,215,232,.25); color:var(--cyan); } .bk-counter-icon-wrap.kids { background:rgba(175,0,255,.12); border-color:rgba(175,0,255,.3); color:#bf7fff; } .bk-counter-text { flex:1; } .bk-counter-name { font-weight:700; font-size:.92rem; color:var(--white); margin-bottom:.15rem; } .bk-counter-name.kids { color:#bf7fff; } .bk-counter-age { font-size:.75rem; color:var(--muted); } .bk-counter-ctrl { display:flex; align-items:center; gap:.75rem; flex-shrink:0; } .bk-cnt-btn { width:36px; height:36px; border-radius:8px; border:1.5px solid rgba(255,255,255,.2); background:transparent; color:var(--white); cursor:pointer; display:flex; align-items:center; justify-content:center; transition:all .2s; } .bk-cnt-btn:hover { border-color:var(--cyan); color:var(--cyan); background:rgba(33,215,232,.08); } .bk-cnt-btn.plus.adult:hover { background:var(--cyan); border-color:var(--cyan); color:#060610; } .bk-cnt-btn.plus.kids:hover { background:#bf7fff; border-color:#bf7fff; color:#060610; } .bk-cnt-num { font-family:var(--font-d); font-size:2.8rem; line-height:1; min-width:50px; text-align:center; color:rgba(255,255,255,.3); transition:color .2s; } .bk-cnt-num.adult.has-val { color:var(--cyan); } .bk-cnt-num.kids.has-val { color:#bf7fff; } /* ── Adventure grid v5.1 ────────────────── */ .bk-adv-section { margin-bottom:1.5rem; } .bk-adv-sect-lbl { display:flex; align-items:center; gap:.5rem; font-size:.72rem; font-weight:700; text-transform:uppercase; letter-spacing:1.5px; margin-bottom:.85rem; } .bk-adv-sect-lbl.adult { color:var(--cyan); } .bk-adv-sect-lbl.kids { color:#bf7fff; } .bk-adv-grid { display:grid; grid-template-columns:repeat(6,1fr); gap:.55rem; } /* Adventure card */ .bk-adv-btn { position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:1rem .35rem .8rem; border:2px solid rgba(255,255,255,.1); border-radius:12px; background:rgba(255,255,255,.03); cursor:pointer; text-align:center; transition:border-color .2s, background .2s, transform .15s; gap:.18rem; } .bk-adv-btn:hover { border-color:rgba(33,215,232,.5); background:rgba(33,215,232,.07); transform:translateY(-2px); } .bk-adv-btn.sel { border-color:var(--cyan) !important; background:rgba(33,215,232,.14) !important; box-shadow:0 0 0 1px rgba(33,215,232,.35); } .bk-adv-badge { position:absolute; top:-.65rem; left:50%; transform:translateX(-50%); font-size:.45rem; font-weight:700; letter-spacing:1px; text-transform:uppercase; padding:.18rem .55rem; border-radius:20px; white-space:nowrap; background:linear-gradient(90deg,var(--cyan),#5ef0ff); color:#060610; } .bk-adv-badge.best { background:linear-gradient(90deg,var(--pink),#c0159b); color:#fff; } .bk-adv-n { font-family:var(--font-d); font-size:1.6rem; color:var(--white); line-height:1; } .bk-adv-btn.sel .bk-adv-n { color:var(--cyan); } .bk-adv-lbl { font-size:.52rem; text-transform:uppercase; letter-spacing:.5px; color:var(--muted); } .bk-adv-price { font-size:.72rem; font-weight:700; color:var(--cyan); } .bk-adv-btn.sel .bk-adv-price { color:var(--white); } /* ── Total bar ──────────────────────────── */ .bk-total-bar { display:flex; align-items:center; justify-content:space-between; background:rgba(33,215,232,.05); border:1px solid rgba(33,215,232,.2); border-radius:12px; padding:1.1rem 1.5rem; margin:1.1rem 0; flex-wrap:wrap; gap:.75rem; } .bk-total-bar-lbl { font-size:.72rem; font-weight:700; text-transform:uppercase; letter-spacing:1px; color:var(--muted); margin-bottom:.2rem; } .bk-total-bar-breakdown { font-size:.83rem; color:var(--muted); } .bk-total-bar-amt { font-family:var(--font-d); font-size:2.4rem; background:linear-gradient(90deg,var(--cyan),var(--pink)); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; white-space:nowrap; } /* ── Proceed button ─────────────────────── */ .bk-proceed-btn { display:flex; align-items:center; justify-content:center; gap:.75rem; width:100%; padding:1.1rem; border:none; border-radius:11px; background:linear-gradient(90deg,var(--cyan),#5ef0ff,var(--cyan)); background-size:200%; color:#060610; font-weight:800; font-size:.9rem; letter-spacing:1.5px; text-transform:uppercase; cursor:pointer; transition:background-position .4s, box-shadow .25s, transform .15s; font-family:var(--font-b); } .bk-proceed-btn:hover { background-position:right center; box-shadow:0 8px 32px rgba(33,215,232,.45); transform:translateY(-1px); } /* ── LatePoint embed section ────────────── */ .bk-lp-embed { margin-top:1.5rem; } .bk-lp-loading { display:flex; align-items:center; justify-content:center; gap:1rem; padding:3rem; color:var(--muted); font-size:.9rem; } .bk-lp-spinner { width:28px; height:28px; border:3px solid rgba(33,215,232,.2); border-top-color:var(--cyan); border-radius:50%; animation:spin .7s linear infinite; flex-shrink:0; } @keyframes spin{to{transform:rotate(360deg)}} .bk-lp-summary { background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.09); border-radius:12px; padding:1.25rem 1.5rem; margin-bottom:1.25rem; } .bk-lp-sum-row { display:flex; justify-content:space-between; align-items:flex-start; padding:.5rem 0; border-bottom:1px solid rgba(255,255,255,.06); font-size:.88rem; } .bk-lp-sum-row:last-of-type { border-bottom:none; } .bk-lp-sum-row span:first-child { color:var(--muted); flex-shrink:0; margin-right:1rem; } .bk-lp-sum-row span:last-child { color:var(--white); font-weight:600; text-align:right; } .bk-lp-sum-row.total span:last-child { color:var(--cyan); font-family:var(--font-d); font-size:1.15rem; } .bk-lp-sum-note { font-size:.8rem; color:var(--muted); margin-top:.75rem; padding-top:.75rem; border-top:1px solid rgba(255,255,255,.06); } .bk-lp-fallback { padding:2.5rem; text-align:center; background:rgba(255,255,255,.03); border:1px dashed rgba(255,255,255,.12); border-radius:12px; color:var(--muted); font-size:.92rem; line-height:1.7; } .bk-lp-fallback a { color:var(--cyan); font-weight:600; } /* ── Responsive ─────────────────────────── */ @media(max-width:1024px){ .bk-adv-grid{grid-template-columns:repeat(6,1fr);} } @media(max-width:900px){ .bk-counters-row{grid-template-columns:1fr;} .bk-adv-grid{grid-template-columns:repeat(4,1fr);} .bk-step-card{padding:1.5rem 1.25rem;} .hero-inner{display:flex;flex-direction:column;} .hero-visual{display:block!important;order:1;height:200px;flex-shrink:0;} .hero-video-wrap{border-radius:12px 12px 0 0;height:100%!important;width:100%;display:block!important;} .hero-content{order:2!important;} .hero-stats{grid-template-columns:repeat(4,1fr);} } @media(max-width:600px){ .bk-adv-grid{grid-template-columns:repeat(3,1fr);} .hero-stats{grid-template-columns:repeat(2,1fr);} .bk-price-strip-inner{flex-direction:column;gap:.75rem;align-items:flex-start;} } /* ── FluentBooking dark skin ─────────────────────────── */ .vrfh-fluent-booking-wrap .fc-booking-form, .vrfh-fluent-booking-wrap .fluent-booking-app { background: transparent !important; color: rgba(255,255,255,.88) !important; font-family: var(--font-b) !important; } .vrfh-fluent-booking-wrap .fc-host-card, .vrfh-fluent-booking-wrap .fc-slot-picker, .vrfh-fluent-booking-wrap .fc-booking-card { background: rgba(12,12,28,.98) !important; border: 1px solid rgba(255,255,255,.09) !important; border-radius: 12px !important; color: rgba(255,255,255,.88) !important; } .vrfh-fluent-booking-wrap .fc-btn-primary, .vrfh-fluent-booking-wrap button[type="submit"] { background: linear-gradient(90deg,#21d7e8,#5ef0ff,#21d7e8) !important; background-size: 200% !important; color: #060610 !important; border: none !important; border-radius: 9px !important; font-weight: 700 !important; } .vrfh-fluent-booking-wrap .fc-btn-primary:hover { background-position: right center !important; } .vrfh-fluent-booking-wrap input, .vrfh-fluent-booking-wrap textarea, .vrfh-fluent-booking-wrap select { background: rgba(255,255,255,.05) !important; border: 1px solid rgba(255,255,255,.12) !important; border-radius: 8px !important; color: rgba(255,255,255,.88) !important; } .vrfh-fluent-booking-wrap input:focus, .vrfh-fluent-booking-wrap textarea:focus { border-color: #21d7e8 !important; outline: none !important; } .vrfh-fluent-booking-wrap label, .vrfh-fluent-booking-wrap .fc-label { color: rgba(255,255,255,.5) !important; } .vrfh-fluent-booking-wrap .fc-slot-item:hover { background: rgba(33,215,232,.1) !important; border-color: #21d7e8 !important; } .vrfh-fluent-booking-wrap .fc-slot-item.active, .vrfh-fluent-booking-wrap .fc-slot-item.selected { background: #21d7e8 !important; color: #060610 !important; border-color: #21d7e8 !important; } /* Calendar */ .vrfh-fluent-booking-wrap .fc-calendar-header { color: #fff !important; } .vrfh-fluent-booking-wrap .fc-calendar-day.available:hover { background: rgba(33,215,232,.15) !important; color: #21d7e8 !important; } .vrfh-fluent-booking-wrap .fc-calendar-day.selected { background: #21d7e8 !important; color: #060610 !important; } /* ── 2-card hero grid ─────────────────────────────── */ .hero-card-grid-2 { display:grid; grid-template-columns:1fr 1fr; grid-template-rows:1fr; gap:4px; height:100%; min-height:440px; border-radius:14px; overflow:hidden; } .hero-card-half { position:relative; overflow:hidden; cursor:pointer; background:var(--bg3); min-height:440px; } .hero-card-half img { width:100%; height:100%; object-fit:cover; object-position:center 30%; display:block; transition:transform .5s, filter .3s; filter:brightness(.88); } .hero-card-half:hover img { transform:scale(1.04); filter:brightness(1); } .hero-card-half .hero-card-overlay { position:absolute; inset:0; background:linear-gradient(180deg,transparent 45%,rgba(0,0,0,.55)); } .hero-card-half .hero-card-play { position:absolute; bottom:1rem; right:1rem; width:44px; height:44px; border-radius:50%; background:rgba(33,215,232,.82); backdrop-filter:blur(4px); display:flex; align-items:center; justify-content:center; color:#060610; opacity:0; transform:scale(.85); transition:opacity .25s, transform .25s; } .hero-card-half:hover .hero-card-play { opacity:1; transform:scale(1); } @media(max-width:600px) { .hero-card-grid-2 { grid-template-columns:1fr; min-height:260px; } .hero-card-half { min-height:200px; } } /* ── Hero 2-card pair (v6) ───────────────────────────── */ .hero-card-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; height: 100%; min-height: 420px; border-radius: 18px; overflow: hidden; background: rgba(10,10,22,0.98); padding: 6px; box-sizing: border-box; } .hero-card-pair .hero-card { aspect-ratio: auto; min-height: 0; height: 100%; border-radius: 12px; overflow: hidden; } .hero-card-pair .hero-card img { width: 100%; height: 100%; object-fit: cover; object-position: center; } @media (max-width: 768px) { .hero-card-pair { grid-template-columns: 1fr; min-height: 280px; } .hero-card-pair .hero-card:last-child { display: none; } } /* ════════════════════════════════════════════════════════════ VRFH ADDITIONS — appended to original, never replacing ════════════════════════════════════════════════════════════ */ /* ── exp-card-meta: Age + Players strip below image ─────── */ .exp-card-meta { display:flex; align-items:center; gap:1.1rem; font-size:.72rem; font-weight:600; text-transform:uppercase; letter-spacing:.06em; color:rgba(255,255,255,.5); padding-bottom:.5rem; border-bottom:1px solid rgba(255,255,255,.06); } .exp-card-meta span { display:flex; align-items:center; gap:.35rem; } .exp-card-meta svg { color:var(--cyan); flex-shrink:0; } .exp-card-tags,.exp-card-age,.exp-card-play { display:none !important; } /* ── Hero video ─────────────────────────────────────────── */ /* Desktop only: hero-visual fills the grid cell via min-height */ @media(min-width:900px){ .hero-visual { display:flex; flex-direction:column; min-height:420px; } } .hero-video-wrap { flex:1; position:relative; min-height:0; width:100%; overflow:hidden; background:#060610; } /* Poster image — always visible as base layer */ .hero-poster-img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center; display:block; z-index:0; } /* Poster is a real at z-index:0; video overlays it at z-index:1 */ .hero-video { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center; display:block; pointer-events:none; z-index:1; /* opacity managed by JS — fades from 0→1 when playing */ } .hero-video-overlay { position:absolute; inset:0; background:linear-gradient(90deg,rgba(6,6,16,.4) 0%,transparent 25%), linear-gradient(180deg,transparent 60%,rgba(0,0,0,.4)); pointer-events:none; z-index:2; } /* ── Hover video on all cards ───────────────────────────── */ .card-hover-video { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center; opacity:0; transition:opacity .4s ease; pointer-events:none; display:block; z-index:10; /* sits above img (z-index:1) and overlay */ } /* Root card hover triggers (JS also fires mouseenter on card root) */ .exp-card:hover .card-hover-video, .tourist-card:hover .card-hover-video, .partner-card:hover .card-hover-video { opacity:1; } /* Img container hover triggers (CSS-only fallback) */ .exp-card-img:hover .card-hover-video, .partner-card-img:hover .card-hover-video, .tourist-card-img:hover .card-hover-video { opacity:1; } /* Position context — every image container must be relative so video uses it as origin */ .exp-card-img, .partner-card-img, .tourist-card-img { position:relative; overflow:hidden; } /* Img z-index below video */ .exp-card-img img, .partner-card-img img, .tourist-card-img img { position:relative; z-index:1; width:100%; height:100%; object-fit:cover; } /* ── Privacy page mobile ────────────────────────────────── */ @media(max-width:899px){ .pp-content-grid{grid-template-columns:1fr!important;gap:1rem!important} .pp-sidebar-wrap{display:none!important} } /* ── Partner form/table mobile ──────────────────────────── */ @media(max-width:767px){ .partner-form-row{grid-template-columns:1fr!important;gap:.75rem!important} .partner-pricing-two-col{grid-template-columns:1fr!important;gap:1.25rem!important} .partner-pricing-table{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch;white-space:nowrap;font-size:.82rem} } /* ── Mobile responsive additions ───────────────────────── */ @media(max-width:899px){ .nav-right .nav-cta,.nav-right .btn-primary{display:none!important} .nav-right{gap:.5rem;margin-left:auto} .nav-inner{padding:0 1rem!important} .menu-button{display:flex!important;width:40px;height:40px;align-items:center;justify-content:center} /* Hero: video FIRST, then content below — column layout top-to-bottom */ .hero-inner{display:flex!important;flex-direction:column!important;grid-template-columns:unset!important} .hero-visual{display:block!important;height:200px!important;width:100%;flex-shrink:0;order:1!important} /* hero-video-wrap must fill its block parent (display:block, height:200px) */ .hero-video-wrap{height:100%!important;width:100%;display:block!important;border-radius:12px 12px 0 0} .hero-content{order:2!important} /* Title on one line */ .hero-title{font-size:clamp(2.6rem,11vw,4.5rem)!important;white-space:nowrap!important} .hero-title .line1,.hero-title .line2{display:inline!important} .hero-title .line1::after{content:' '} } @media(max-width:600px){ .hero-visual{height:170px!important} .trust-strip{overflow-x:auto;-webkit-overflow-scrolling:touch} .trust-inner{flex-wrap:nowrap;justify-content:flex-start;padding:0 1rem;width:max-content;min-width:100%} .trust-item{flex-shrink:0} .hero-actions{flex-direction:column;align-items:stretch} .hero-actions .btn-primary,.hero-actions .btn-outline{max-width:100%;justify-content:center} .exp-grid,.exp-grid-full{grid-template-columns:repeat(2,1fr)} .cta-actions{flex-direction:column;align-items:stretch;gap:.75rem} .cta-actions .btn-primary,.cta-actions .btn-wa{justify-content:center;width:100%} .gc-tiers-grid{grid-template-columns:1fr!important;gap:.85rem!important} #vrfhGcModal{padding:.5rem!important;align-items:flex-end!important} #vrfhGcModal > div{border-radius:18px 18px 0 0!important;max-height:92vh!important;overflow-y:auto!important;padding:1.5rem 1.1rem 2rem!important} .vrfhb-adv-grid{grid-template-columns:repeat(3,1fr)!important;gap:.5rem!important} .vrfhb-adv-tile{padding:.65rem .35rem!important} .vrfhb-pay-opts{flex-direction:column!important;gap:.5rem!important} .wa-float{width:50px;height:50px;bottom:1.25rem;right:1.25rem} table{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch} } html,body{overflow-x:hidden;max-width:100%} img,video,iframe{max-width:100%} /* ── Progress bar lines ─────────────────────────────────── */ .vrfhb-prog-line-done{background:var(--cyan)!important} .vrfhb-step.vrfhb-prog-done .vrfhb-prog-num{background:var(--cyan);border-color:var(--cyan);color:#060610} /* ── Slot loading states ────────────────────────────────── */ .vrfhb-slots-loading{display:flex;align-items:center;gap:.65rem;color:var(--muted);font-size:.88rem;padding:.5rem 0} .vrfhb-slots-err{color:rgba(255,107,107,.85);font-size:.85rem;padding:.5rem .75rem;background:rgba(255,107,107,.07);border:1px solid rgba(255,107,107,.2);border-radius:8px} /* ── Step 1 confirm block ───────────────────────────────── */ .vrfhb-step1-confirm{margin-top:1.5rem;padding:1.25rem 1.5rem;background:rgba(33,215,232,.06);border:1px solid rgba(33,215,232,.2);border-radius:14px;display:flex;flex-direction:column;gap:1rem} .vrfhb-step1-summary{font-size:.9rem;color:rgba(255,255,255,.75);font-weight:600} .vrfhb-step1-summary::before{content:'✓ ';color:var(--cyan);font-weight:800} .vrfhb-step1-confirm .vrfhb-btn-next{align-self:flex-start;width:100%;justify-content:center} @keyframes vrfhSpin{to{transform:rotate(360deg)}} /* Mobile CTA fix */ @media(max-width:600px){ .cta-box { padding:2.5rem 1.25rem; border-radius:14px; } .cta-box h2 { font-size:clamp(1.8rem,9vw,2.8rem); } .cta-box p { font-size:.9rem; margin-bottom:1.25rem; } } @media(max-width:600px){ .exp-card-meta { gap:.65rem; flex-wrap:wrap; font-size:.68rem; } .exp-card-desc { -webkit-line-clamp:3; display:-webkit-box; -webkit-box-orient:vertical; overflow:hidden; } .exp-card-body { padding:1rem; gap:.5rem; } .exp-card-title { font-size:.9rem; } } /* Rates page included grid */ @media(max-width:600px){ .rates-included-grid { grid-template-columns:1fr!important; gap:.65rem!important; } .rates-included-grid > div { font-size:.85rem; } } @media(max-width:600px){ .cta-box .btn-primary { font-size:.78rem; padding:.9rem 1rem; letter-spacing:.08em; white-space:normal; text-align:center; } .cta-box .btn-wa { font-size:.88rem; } .cta-box h2 { font-size:clamp(1.8rem,9vw,2.8rem); } } @media(max-width:600px){ .exp-grid, .exp-grid-full { grid-template-columns:1fr!important; } .exp-card-desc { overflow:visible; display:block; -webkit-line-clamp:unset; } } /* CTA: prevent duplicate if both title parts render */ @media(max-width:899px){ .cta-box h2 { font-size:clamp(1.8rem,8vw,2.8rem); line-height:1.15; } } /* Mobile buttons — wrap text, full width CTAs */ @media(max-width:600px){ .btn-primary,.btn-outline,.btn-wa { white-space:normal; text-align:center; justify-content:center; padding:.65rem 1rem; font-size:.78rem; } .btn-primary.btn-lg { padding:.7rem 1.1rem; font-size:.8rem; } .hero-actions .btn-primary, .hero-actions .btn-outline { width:100%; } .cta-actions .btn-primary, .cta-actions .btn-wa { width:100%; } } /* ══════════════════════════════════════════════════════ MOBILE COMPREHENSIVE — Nov 2026 audit Ensures every page, form, table and dropdown stays contained on screens 320–600px wide. ══════════════════════════════════════════════════════ */ /* Universal: prevent any element from exceeding viewport width */ @media(max-width:600px){ html, body { overflow-x:hidden; max-width:100%; } img, video, iframe, table { max-width:100%; } .container { padding-left:1rem; padding-right:1rem; } } /* Language dropdown — fix size on small screens (was overflowing nav) */ @media(max-width:480px){ .lang-drop-btn { padding:.3rem .55rem; font-size:.7rem; gap:.3rem; } .vrfh-flag { width:18px; height:13px; } .lang-drop-menu { right:0; left:auto; min-width:140px; max-width:calc(100vw - 2rem); } } /* Gradient page titles — ensure they wrap on narrow screens */ @media(max-width:480px){ .page-title { font-size:clamp(1.8rem,9vw,2.6rem); line-height:1.1; word-wrap:break-word; } .page-title .text-gradient { display:inline; } } /* Tables — partner pricing & policy tables horizontally scroll instead of overflow */ @media(max-width:600px){ .partner-pricing-table, .pp-prose table { display:block; overflow-x:auto; -webkit-overflow-scrolling:touch; white-space:nowrap; } .partner-pricing-table th, .partner-pricing-table td { padding:.5rem .65rem !important; font-size:.78rem; } } /* Forms — every input/textarea/select stays full width */ @media(max-width:600px){ .form-input, .form-textarea, input[type="text"], input[type="email"], input[type="tel"], input[type="number"], input[type="url"], input[type="password"], textarea, select { max-width:100%; box-sizing:border-box; font-size:16px !important; /* iOS no-zoom */ } .partner-form-row, .cf-row { grid-template-columns:1fr !important; gap:.75rem !important; } } /* Booking shortcode — prevent overflow on small phones */ @media(max-width:480px){ .vrfhb-wrap { padding:.75rem !important; } .vrfhb-progress { gap:.25rem; } .vrfhb-prog-label { font-size:.55rem; } .vrfhb-prog-num { width:24px; height:24px; font-size:.75rem; } .vrfhb-guest-row { grid-template-columns:1fr !important; gap:.75rem; } .vrfhb-adv-grid { grid-template-columns:repeat(4,1fr) !important; gap:.4rem; } .vrfhb-cal-cells > * { min-height:34px; font-size:.78rem; } .vrfhb-hours-grid { grid-template-columns:repeat(3,1fr); } } /* Gift card grid — single column on phones, tighter spacing */ @media(max-width:480px){ .gcv2-grid { grid-template-columns:1fr !important; gap:1.25rem; } .gcv2-custom { padding:1.25rem !important; } .gcv2-custom-input-row { flex-direction:column; align-items:stretch; gap:.6rem; } .gcv2-custom-wa-btn { width:100%; text-align:center; } } /* Gift card modal — fit screen on phones */ @media(max-width:600px){ #vrfhGcModal > div { padding:1.25rem !important; max-height:95vh; } #gcModalTitle { font-size:1.15rem !important; } } /* Pricing tabs — wrap properly on small screens */ @media(max-width:480px){ .pricing-tab-row { flex-direction:column; gap:.6rem; } .pricing-tab { width:100%; justify-content:center; padding:.65rem; font-size:.85rem; } } /* Pricing full grid on phones */ @media(max-width:480px){ .pricing-full-grid, .pricing-full-grid--kids { grid-template-columns:1fr !important; gap:.85rem; } .price-card { padding:1.1rem !important; } } /* Contact channels — stack on phones */ @media(max-width:480px){ .cinfo-channel { padding:.65rem .85rem; font-size:.85rem; } .cinfo-channels { gap:.5rem; } } /* Map iframe — never overflow */ @media(max-width:600px){ .cmap-inner { height:280px !important; } .cmap-inner iframe { height:280px !important; } } /* Privacy policy — sidebar hidden, content fits */ @media(max-width:899px){ .pp-section { padding:1.1rem 1.2rem !important; } } @media(max-width:600px){ .pp-prose h2 { font-size:1.45rem !important; } .pp-prose p, .pp-prose ul { font-size:.88rem !important; } } /* FAQ — buttons readable on phones */ @media(max-width:480px){ .faq-q { font-size:.92rem; padding:.85rem 1rem; } .faq-a p { font-size:.85rem; } } /* Trust strip — wrap to 2 cols on phones */ @media(max-width:600px){ .trust-inner { grid-template-columns:1fr 1fr !important; gap:.85rem !important; } .trust-text-main { font-size:.82rem; } .trust-text-sub { font-size:.7rem; } } /* Hero stat pills — wrap properly */ @media(max-width:480px){ .hero-stats { grid-template-columns:1fr 1fr; gap:.5rem; } .hero-stat-pill { padding:.55rem .75rem; } .hero-stat-num { font-size:1.1rem; } .hero-stat-label { font-size:.62rem; } } /* Reviews grid — single column on phones */ @media(max-width:600px){ .reviews-grid { grid-template-columns:1fr !important; } } /* Footer — wrap properly, channels stack */ @media(max-width:600px){ .footer-grid { grid-template-columns:1fr !important; gap:1.75rem; } .footer-book-link { font-size:.85rem; padding:.6rem .75rem; } } /* Safety policy grid */ @media(max-width:600px){ .policy-grid, .two-col-grid { grid-template-columns:1fr !important; } .cancel-grid { grid-template-columns:1fr !important; gap:.85rem; } .cancel-item { padding:.65rem; } } /* Partner cards & form */ @media(max-width:600px){ .partner-grid { grid-template-columns:1fr !important; } .partner-card-img { height:200px; } } /* Make sure the page-header label/title/sub never overflow */ @media(max-width:600px){ .page-header { padding:2.5rem 0 1.75rem; } .page-header .section-label { font-size:.7rem; } .page-header .page-sub { font-size:.92rem; line-height:1.5; padding:0 .5rem; } } /* WeChat QR modal — fit screen */ @media(max-width:480px){ #wechatQRModal > div { padding:1.25rem !important; max-width:calc(100vw - 2rem); } } /* Pricing strip on booking page */ @media(max-width:600px){ .bk-price-strip-inner { flex-direction:column; gap:.4rem; align-items:flex-start; padding:.85rem 1rem; } .bk-ps-divider { display:none; } .bk-ps-link { align-self:stretch; text-align:center; } } /* Touch-friendly tap targets — minimum 44x44 (Apple guideline) */ @media(max-width:600px){ .nav-link, .nav-mob-link, .footer-links a, .price-btn, .btn-primary, .btn-outline, .btn-wa, .lang-drop-item { min-height:44px; } } /* ── Booking: payment method toggle (Pay Online / Reserve) ── */ .vrfhb-pay-method-toggle { display: flex; gap: .5rem; margin-bottom: 1rem; flex-wrap: wrap; } .vrfhb-pay-method-btn { flex: 1; min-width: 140px; display: flex; align-items: center; justify-content: center; gap: .5rem; padding: .75rem 1rem; border-radius: 10px; border: 1.5px solid rgba(255,255,255,.15); background: rgba(255,255,255,.04); color: rgba(255,255,255,.6); font-size: .82rem; font-weight: 600; cursor: pointer; transition: all .2s; } .vrfhb-pay-method-btn:hover { border-color: rgba(33,215,232,.4); color: #fff; } .vrfhb-pay-method-btn.active { border-color: var(--cyan); background: rgba(33,215,232,.08); color: #fff; } .vrfhb-pay-method-btn.reserve-active { border-color: var(--pink); background: rgba(238,65,153,.08); color: #fff; } @media(max-width:480px){ .vrfhb-pay-method-btn { font-size: .76rem; padding: .65rem .75rem; } } /* Booking: fee disclaimer row — subtle, italic */ .vrfhb-fee-note { font-size:.8rem !important; } .vrfhb-fee-note > span:first-child { color:rgba(255,255,255,.5) !important; } /* ── Section spacing tightening (mobile) ─────────── */ @media(max-width:768px){ .section { padding:2.25rem 0; } .page-header { padding:2rem 0 1.25rem !important; } .section-header { margin-bottom:1.25rem; } .cta-section { padding:2.5rem 0; } } @media(max-width:480px){ .section { padding:1.75rem 0; } .page-header { padding:1.5rem 0 1rem !important; } .section-header { margin-bottom:1rem; } /* Ensure all text fits inside buttons */ .btn-primary, .btn-outline, .exp-card-btn, .price-btn { font-size:.8rem; padding:.7rem 1rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%; } .bk-price-strip-inner { font-size:.8rem; padding:.75rem; } /* Forms contained on mobile */ .vrfhb-wrap, .vrfhb-panel, .vrfhb-fields-grid { max-width:100%; box-sizing:border-box; } .vrfhb-field input, .vrfhb-field select, .vrfhb-field textarea, input[type="text"], input[type="email"], input[type="tel"], input[type="number"], textarea, select { max-width:100%; box-sizing:border-box; font-size:16px !important; } } /* ── Active page nav indicator ─────────────────────── */ .nav-mob-link.active { color:var(--cyan) !important; background:rgba(33,215,232,.08); } .nav-mob-link { padding:.7rem 1.25rem; font-size:.9rem; font-weight:600; color:rgba(255,255,255,.75); transition:all .2s; border-radius:8px; display:block; } .nav-mob-link:hover { color:var(--cyan); background:rgba(33,215,232,.06); } /* Book Now button active state */ .btn-primary.nav-cta.active { box-shadow:0 0 0 2px rgba(33,215,232,.5); } /* ═══════════════════════════════════════════════════════════ MOBILE FIXES — comprehensive gap, overflow, touch fixes ═══════════════════════════════════════════════════════════ */ /* ── Kill excessive section gaps on mobile ─────────── */ @media(max-width:768px){ .cta-section { padding:1.75rem 0 !important; } .cta-box { padding:2rem 1.25rem !important; } .cta-box p { margin-bottom:1.25rem; } /* Remove large bottom margins from last elements before section boundary */ .exp-grid + *, .exp-grid-full + * { margin-top:0 !important; } .note-box { margin-top:1rem !important; margin-bottom:0 !important; } /* Remove section padding-top when immediately after another section */ .section + .section, .section + .cta-section, .cta-section + .section { padding-top:1.25rem !important; } /* How It Works section */ .how-grid { gap:1.5rem; } /* Pricing section header gap */ .pricing-section .section-header { margin-bottom:1.25rem; } } @media(max-width:480px){ /* All sections: uniform tight spacing */ .section { padding:1.25rem 0 !important; } .cta-section { padding:1.25rem 0 !important; } .section-header { margin-bottom:.85rem !important; } .page-header { padding:1.25rem 0 .85rem !important; } /* Specific oversized sections */ .reviews-section { padding:1.25rem 0 !important; } .how-it-works-section { padding:1.25rem 0 !important; } .pricing-section { padding:1.25rem 0 !important; } .experiences-section { padding:1.25rem 0 !important; } .tourist-section { padding:1.25rem 0 !important; } /* Note boxes at end of sections */ .note-box { padding:1rem !important; margin-top:.75rem !important; } .note-box .btn-outline, .note-box .btn-primary { width:100%; text-align:center; box-sizing:border-box; } } /* ── Booking: guest cards contained on mobile ──────── */ @media(max-width:600px){ .vrfhb-wrap { overflow:hidden; max-width:100vw; box-sizing:border-box; } .vrfhb-panel { overflow:hidden; box-sizing:border-box; } .vrfhb-guest-row { display:flex !important; flex-direction:column !important; gap:.75rem; } .vrfhb-guest-card { width:100% !important; box-sizing:border-box !important; display:flex !important; flex-direction:row; align-items:center; gap:.75rem; padding:.9rem !important; } .vrfhb-guest-info { flex:1; min-width:0; } .vrfhb-guest-name { font-size:.95rem; } .vrfhb-guest-age { font-size:.78rem; line-height:1.3; } .vrfhb-counter { flex-shrink:0; gap:.4rem; } .vrfhb-counter-btn { width:34px !important; height:34px !important; font-size:1.1rem; } .vrfhb-counter-val { min-width:28px; font-size:1rem; } /* Fields grid single column */ .vrfhb-fields-grid { display:flex !important; flex-direction:column !important; gap:.75rem; } .vrfhb-field { width:100% !important; box-sizing:border-box; } .vrfhb-field input, .vrfhb-field select, .vrfhb-field textarea { width:100% !important; box-sizing:border-box !important; font-size:16px !important; } /* Gift card row: input + apply button contained */ .vrfhb-gc-row { display:flex !important; gap:.4rem !important; } .vrfhb-gc-input { flex:1 !important; min-width:0 !important; } .vrfhb-gc-apply-btn { flex-shrink:0 !important; white-space:nowrap; padding:.6rem .75rem !important; font-size:.78rem !important; } /* Pay method toggle */ .vrfhb-pay-method-toggle { flex-direction:column !important; gap:.5rem !important; } .vrfhb-pay-method-btn { width:100% !important; min-width:0 !important; } } /* ── Experiences page: remove gap after card grid ──── */ @media(max-width:600px){ #vrfhExpGrid { margin-bottom:.5rem !important; } .exp-grid, .exp-grid-full { margin-bottom:.5rem !important; } } /* ── Safety page FAQ: remove footer gap ─────────────── */ @media(max-width:600px){ .faq-list { margin-bottom:.5rem !important; } .faq-list + * { margin-top:.5rem !important; } } /* ── Gift cards: remove bottom gap before footer ────── */ @media(max-width:600px){ .gcv2-faq, .gc-faq { margin-bottom:.5rem !important; } .gcv2-faq + *, .gc-faq + * { margin-top:.5rem !important; } } /* ── CTA button overflow fix (image 3) ──────────────── */ @media(max-width:480px){ .cta-section .container { padding:0 1rem; } .cta-box .btn-primary, .cta-box .btn-wa { width:100% !important; box-sizing:border-box !important; white-space:normal !important; text-align:center; word-break:break-word; } } /* ── First-tap mobile hover (touch devices) ─────────── */ @media(hover:none),(pointer:coarse){ /* Cards: show video on first touch, not second */ .exp-card:active .card-hover-video, .tourist-card:active .card-hover-video, .partner-card:active .card-hover-video { opacity:1; } /* Prevent scale transforms requiring hover on touch */ .exp-card:hover { transform:none; } } /* ── Rates/Experiences page: ensure note box no gap ─── */ @media(max-width:600px){ [style*="margin-top:2.5rem"] { margin-top:.75rem !important; } [style*="padding-top:2rem"] { padding-top:1rem !important; } [style*="margin-bottom:1.5rem"] { margin-bottom:.5rem !important; } } /* vrfh-overflow-fix-v4 */ html { overflow-x: clip; } body { overflow-x: clip; position: relative; } *, *::before, *::after { box-sizing: border-box; } .hero { max-width: 100vw; overflow: hidden; } .hero-media { overflow: hidden; } .hero-media img, .hero-media video { max-width: 100%; } @media (max-width: 768px) { .hero-grid { grid-template-columns: 1fr !important; } .hero-media { display: none; } .exp-cards, .why-grid, .how-strip, .tourist-cards, .partner-cards, .price-grid { grid-template-columns: 1fr !important; } } /* Performance: preload hint classes */ .vrfh-fonts-cjk { font-display: swap; }