* { margin: 0; padding: 0; box-sizing: border-box; } :root { /* Palet premium VOLUPO */ --navy: #0F2D6B; /* Primary / logo / surface gelap */ --ocean: #1495FF; /* Secondary / focus / aksen */ --emerald: #0E8A74; /* Accent */ --coral: #FF6B4A; /* CTA */ --coral-hover: #F75A36; /* CTA hover */ --coral-pressed: #E84A27;/* CTA ditekan */ --bg: #FFFDF8; /* Background halaman */ --card: #FFFFFF; /* Background kartu */ --text: #1E293B; /* Teks utama */ --text-2: #64748B; /* Teks sekunder */ --border: #E8ECEF; /* Garis tepi */ /* --gold DIHAPUS dari pemakaian: bukan bagian palet resmi Volupo dan bertabrakan dengan coral. Dibiarkan sebagai catatan agar tidak dihidupkan lagi. */ /* Alias lama -> dipetakan ke palet baru (agar seluruh style ikut berubah) */ --ink: #0F2D6B; /* dulu teal gelap -> kini navy */ --sea-deep: #0B2350; /* navy lebih gelap */ --sand: #FFFDF8; /* -> background baru */ --palm: #0E8A74; /* -> emerald */ } /* Penjaga agar tidak ada scroll horizontal. PENTING: `overflow-x: hidden` pada membuat html jadi kontainer scroll sendiri, dan itu MEMATAHKAN `position: sticky` pada .topbar (header hanyut ke atas saat digulir, terlihat jelas di HP). `overflow-x: clip` memotong luapan tanpa membuat kontainer scroll, sehingga sticky tetap bekerja. `hidden` dipertahankan sebagai cadangan untuk peramban lama yang belum mengenal `clip`. */ html, body { overflow-x: hidden; max-width: 100%; } @supports (overflow-x: clip) { html, body { overflow-x: clip; } } body { font-family: 'Inter', sans-serif; background-color: var(--bg); color: var(--text); position: relative; } h1, h2, h3 { font-family: 'Fraunces', serif; } .eyebrow { font-family: 'Space Grotesk', monospace; font-size: 12px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--coral); font-weight: 600; } /* HERO EYEBROW Dulu: Fraunces italic 22px warna emas (--gold). Diganti karena tiga alasan: (1) emas bukan bagian palet Volupo dan bertabrakan dengan coral pada tombol di bawahnya; (2) ukurannya nyaris sebesar h1 sehingga hero punya DUA judul yang berebut perhatian — desain premium hanya punya satu titik fokus; (3) kombinasi tebal + miring + emas adalah bahasa visual brosur diskon. Sekarang: huruf kapital kecil berjarak longgar, putih transparan — mendukung, bukan bersaing. */ .hero-tagline { display: inline-block; font-family: 'Inter', sans-serif; font-size: 13px; font-weight: 500; font-style: normal; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(255,255,255,0.72); margin-bottom: 10px; text-shadow: 0 1px 8px rgba(0,0,0,0.35); animation: fadeInUp 0.7s ease both; } /* TOPBAR */ .topbar { display: flex; align-items: center; justify-content: space-between; padding: 16px 24px; background-color: #FFFFFF; box-shadow: 0 2px 12px rgba(11,61,58,0.08); position: sticky; top: 0; z-index: 10; } .topbar .logo { display: flex; align-items: center; flex-shrink: 0; } .topbar .logo img { height: 44px; width: auto; display: block; } .topbar-left { flex: 1; display: flex; align-items: center; justify-content: flex-start; } .topbar-icons { flex: 1; display: flex; align-items: center; justify-content: flex-end; gap: 2px; } .icon-btn { background: none; border: none; color: var(--ink); cursor: pointer; width: 42px; height: 42px; padding: 0; border-radius: 50%; display: flex; align-items: center; justify-content: center; transition: background-color 0.15s; } .icon-btn:hover { background: rgba(11,61,58,0.06); } .icon-btn:active { background: rgba(11,61,58,0.12); } .icon-btn svg { width: 24px; height: 24px; display: block; } /* header mengecil rapi di layar HP */ @media (max-width: 600px) { .topbar { padding: 10px 12px; } .topbar .logo img { height: 38px; } .icon-btn { width: 40px; height: 40px; } .icon-btn svg { width: 23px; height: 23px; } .search-card { margin: -80px 14px 50px; padding: 20px 18px 26px; } .category-row { gap: 20px 16px; } } /* HAMBURGER MENU DRAWER (geser dari kiri) */ .menu-panel { position: fixed; top: 0; left: -300px; width: 280px; height: 100%; background: white; box-shadow: 4px 0 24px rgba(11,61,58,0.15); z-index: 150; display: flex; flex-direction: column; transition: left 0.3s ease; } .menu-panel.open { left: 0; } .menu-header { display: flex; justify-content: space-between; align-items: center; padding: 20px; background: var(--ink); color: var(--sand); } .menu-title { font-family: 'Fraunces', serif; font-size: 20px; font-weight: 600; } .menu-header .close-btn { color: var(--sand); } .menu-scroll { flex: 1; overflow-y: auto; padding: 8px 0 16px; } .menu-link { display: flex; align-items: center; gap: 12px; padding: 12px 24px; font-size: 14.5px; font-weight: 500; color: var(--text); text-decoration: none; cursor: pointer; border-left: 3px solid transparent; transition: background-color 0.15s, border-color 0.15s, color 0.15s; } .menu-link:hover { background: var(--sand); border-left-color: var(--coral); color: var(--ink); } .menu-ico { width: 22px; text-align: center; font-size: 16px; flex-shrink: 0; } .menu-divider { height: 1px; background: rgba(11,61,58,0.1); margin: 8px 24px; } .menu-logout { color: #c0392b; font-weight: 600; } .menu-logout:hover { background: #fdecea; border-left-color: #c0392b; color: #c0392b; } .menu-overlay { position: fixed; inset: 0; background: rgba(11,61,58,0.5); z-index: 140; opacity: 0; visibility: hidden; transition: opacity 0.3s ease, visibility 0.3s ease; } .menu-overlay.open { opacity: 1; visibility: visible; } /* HERO */ .hero { position: relative; overflow: hidden; color: #FFFFFF; text-align: center; padding: 70px 20px 130px; animation: fadeIn 0.6s ease; } /* SLIDESHOW HERO (gambar bergantian) */ .hero-slides { position: absolute; inset: 0; z-index: 0; /* Latar dasar navy pekat — hanya terlihat di kunjungan PERTAMA selagi gambar diunduh. Sengaja gelap & rata (bukan gradien terang) supaya menyatu dengan lapisan gelap di atas gambar; saat slide masuk, peralihannya nyaris tak terasa. */ background: #0B2350; } .hero-slide { position: absolute; inset: 0; background-size: cover; background-position: center; opacity: 0; transition: opacity 1.2s ease-in-out; /* LAPIS 1 dari 3 — NORMALISASI EKSPOSUR. Masalahnya: satu scrim tetap tidak bisa melayani semua foto. Foto langit/pantai siang hari jauh lebih terang daripada foto hutan/air terjun, jadi scrim yang pas untuk yang gelap akan terlalu tipis untuk yang terang — teks putih ikut naik-turun keterbacaannya. Menurunkan brightness DI GAMBAR memangkas selisih itu lebih dulu, sebelum scrim bekerja. Saturasi & kontras dinaikkan sedikit supaya foto tidak terlihat kusam setelah diredupkan. */ filter: brightness(0.84) saturate(1.08) contrast(1.03); } .hero-slide.active { opacity: 1; } /* lapisan gelap agar teks tetap terbaca di atas gambar */ .hero::before { content: ""; position: absolute; inset: 0; z-index: 1; /* LAPIS 2 dari 3 — SCRIM VERTIKAL. Bernuansa navy, bukan hitam: hitam membuat foto terasa seperti template stok, navy menjaga warnanya tetap milik merek. Bagian bawah paling gelap karena di situlah subjudul & tombol jatuh, dan bagian bawah foto biasanya paling ramai (buih, pasir, dedaunan). Angkanya diturunkan sedikit dari sebelumnya karena kini ada dua lapisan lain yang membantu — kalau ketiganya terlalu kuat, fotonya jadi tak terlihat. */ background: linear-gradient(180deg, rgba(15,45,107,0.50) 0%, rgba(15,45,107,0.26) 40%, rgba(15,45,107,0.66) 100%); } /* LAPIS 3 dari 3 — VIGNETTE DI BELAKANG TEKS. Scrim vertikal memperlakukan seluruh lebar layar sama rata, padahal yang perlu dilindungi hanyalah kolom teks di tengah. Gradien radial ini menggelapkan tepat di belakang tulisan dan memudar habis di tepi, sehingga foto tetap terlihat cerah di sisi kiri-kanan. Inilah yang membuat teks bertahan pada foto langit terang: pelindungnya IKUT teks, bukan menyelimuti seluruh gambar. */ .hero::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: radial-gradient( ellipse 78% 62% at 50% 42%, rgba(9,22,54,0.42) 0%, rgba(9,22,54,0.24) 45%, rgba(9,22,54,0.00) 78%); } .hero-content { position: relative; z-index: 2; } .hero h1 { font-size: 46px; font-weight: 600; /* Fraunges ukuran besar butuh baris RAPAT. line-height 1.15 membuat judul terlihat mengambang; 1.05 + letter-spacing negatif membuatnya terbaca sebagai satu blok padat. */ line-height: 1.05; letter-spacing: -0.02em; margin: 10px 0 16px; color: #FFFFFF; /* Bayangan dikurangi karena scrim sudah menangani keterbacaan. Bayangan tebal di atas lapisan gelap membuat huruf terlihat kabur, bukan tajam. */ text-shadow: 0 2px 10px rgba(9,22,54,0.35); animation: fadeInUp 0.7s ease 0.1s both; } .hero p { font-size: 16px; line-height: 1.55; color: rgba(255,255,255,0.88); text-shadow: 0 1px 8px rgba(9,22,54,0.35); max-width: 420px; margin: 0 auto 26px; animation: fadeInUp 0.7s ease 0.25s both; } /* CTA HERO — PUTIH, bukan coral. Coral penuh warna di atas foto terbaca seperti banner iklan, dan warnanya bertabrakan dengan jaket pelampung oranye di foto. Putih pekat di atas scrim navy justru kontras paling tinggi sekaligus terkesan paling mahal. Coral TETAP dipakai di dalam halaman (harga, tombol pesan), tempat ia berdiri di atas latar terang dan bekerja baik. Radius diturunkan dari pil penuh ke 12px: bentuk pil terasa ramah/kasual, sudut sedang terasa tegas. */ .cta { background-color: #FFFFFF; color: var(--navy); border: none; border-radius: 12px; padding: 15px 32px; font-size: 15px; font-weight: 600; letter-spacing: 0.01em; cursor: pointer; animation: fadeInUp 0.7s ease 0.4s both; box-shadow: 0 8px 24px rgba(9,22,54,0.28); transition: transform 0.25s ease, background-color 0.25s ease, box-shadow 0.25s ease; } .cta:hover { background-color: #F4F7FB; transform: translateY(-2px); box-shadow: 0 14px 30px rgba(9,22,54,0.34); } .cta:active { background-color: var(--coral-pressed); transform: translateY(0); box-shadow: 0 4px 12px rgba(255,107,74,0.30); } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } @keyframes fadeInUp { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } } /* FLOATING SEARCH CARD */ .search-card { background: white; max-width: 760px; margin: -90px auto 60px; border-radius: 22px; box-shadow: 0 20px 48px rgba(11,61,58,0.16); padding: 24px 24px 30px; position: relative; z-index: 2; } /* SEARCH BAR (premium) */ .search-bar { display: flex; align-items: center; gap: 12px; height: 58px; background: white; border: 1.5px solid var(--border); border-radius: 30px; padding: 0 8px 0 20px; box-shadow: 0 4px 14px rgba(15,45,107,0.05); transition: border-color 0.25s ease, box-shadow 0.25s ease; animation: fadeIn 0.5s ease both; } .search-bar:focus-within { border-color: var(--ocean); box-shadow: 0 6px 22px rgba(20,149,255,0.18); } .search-ico { width: 20px; height: 20px; color: #9aa5a3; flex-shrink: 0; } .search-bar input { border: none; outline: none; font-size: 15px; flex: 1; min-width: 0; font-family: 'Inter', sans-serif; color: var(--text); background: transparent; } .filter-btn { width: 42px; height: 42px; border-radius: 50%; border: none; background: var(--sand); color: var(--ink); display: flex; align-items: center; justify-content: center; cursor: pointer; flex-shrink: 0; transition: background-color 0.2s ease, transform 0.25s ease; } .filter-btn:hover { background: #eef3f1; transform: scale(1.05); } .filter-btn:active { transform: scale(0.95); } .filter-btn svg { width: 20px; height: 20px; } /* SEARCH BUTTON + AUTOSUGGEST */ .search-wrap { position: relative; } .search-go { flex-shrink: 0; border: none; cursor: pointer; background: var(--coral); color: #fff; font-weight: 700; font-size: 14px; height: 44px; padding: 0 22px; border-radius: 24px; font-family: 'Inter', sans-serif; transition: background-color .2s ease, transform .2s ease; } .search-go:hover { background: #F75A36; } .search-go:active { transform: scale(.96); } .search-go:disabled { opacity: .6; cursor: default; } .search-suggest { position: absolute; top: calc(100% + 8px); left: 0; right: 0; background: #fff; border: 1px solid var(--border); border-radius: 18px; box-shadow: 0 14px 40px rgba(15,45,107,.14); padding: 6px; max-height: 340px; overflow-y: auto; z-index: 60; display: none; } .search-suggest.open { display: block; } .sg-item { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 12px; cursor: pointer; font-size: 14px; color: var(--text); } .sg-item:hover, .sg-item.active { background: var(--sand); } .sg-ico { width: 22px; text-align: center; flex-shrink: 0; } .sg-item .sg-sub { color: #9aa5a3; font-size: 12px; margin-left: auto; } @media (max-width: 640px) { .search-bar { gap: 8px; padding: 0 6px 0 16px; } .search-go { padding: 0 16px; font-size: 13px; } .filter-btn { display: none; } } /* TRENDING SEARCHES */ .trending { margin-top: 22px; animation: slideInLeft 0.5s ease both; } .trending-title { font-size: 13px; font-weight: 700; letter-spacing: 0.2px; color: var(--text); margin-bottom: 12px; display: flex; align-items: center; gap: 6px; } .trending-chips { display: flex; flex-wrap: wrap; gap: 9px; } .chip { background: white; border: 1.5px solid var(--border); border-radius: 999px; padding: 8px 15px; font-size: 13px; font-weight: 500; font-family: 'Inter', sans-serif; color: var(--text); cursor: pointer; box-shadow: 0 1px 4px rgba(11,61,58,0.05); white-space: nowrap; transition: transform 0.25s ease, background-color 0.25s ease, border-color 0.25s ease, color 0.25s ease; } .chip:hover { transform: scale(1.05); border-color: #d3dbd9; } .chip:active { transform: scale(0.95); } .chip.selected { background: var(--coral); border-color: var(--coral); color: white; } /* CATEGORIES (ikon gradasi emerald -> ocean) */ .category-row { display: flex; justify-content: center; flex-wrap: wrap; gap: 24px 22px; margin-top: 30px; } .category-item { display: flex; flex-direction: column; align-items: center; gap: 10px; width: 78px; text-align: center; cursor: pointer; opacity: 0; animation: popIn 0.4s ease forwards; } .category-item:nth-child(1) { animation-delay: 0.05s; } .category-item:nth-child(2) { animation-delay: 0.12s; } .category-item:nth-child(3) { animation-delay: 0.19s; } .category-item:nth-child(4) { animation-delay: 0.26s; } .category-item:nth-child(5) { animation-delay: 0.33s; } .category-item:nth-child(6) { animation-delay: 0.40s; } .category-icon { width: 64px; height: 64px; border-radius: 50%; background: linear-gradient(140deg, var(--emerald) 0%, var(--ocean) 100%); color: white; display: flex; align-items: center; justify-content: center; box-shadow: 0 8px 18px rgba(20,149,255,0.26); transition: transform 0.25s ease, box-shadow 0.25s ease; } .category-icon svg { width: 30px; height: 30px; } .category-item:hover .category-icon { transform: scale(1.05); box-shadow: 0 12px 24px rgba(20,149,255,0.32); } .category-item:active .category-icon { transform: scale(0.95); } .category-item span { font-size: 12px; color: var(--ink); font-weight: 600; } @keyframes slideInLeft { from { opacity: 0; transform: translateX(-22px); } to { opacity: 1; transform: translateX(0); } } @keyframes popIn { from { opacity: 0; transform: translateY(10px) scale(0.9); } to { opacity: 1; transform: translateY(0) scale(1); } } /* SECTION HEADER */ .section-header { display: flex; justify-content: space-between; align-items: flex-end; max-width: 1000px; margin: 0 auto 20px; padding: 0 20px; } .section-header h2 { font-size: 24px; margin-top: 4px; } .section-header a { font-size: 13px; color: var(--coral); text-decoration: none; font-weight: 600; transition: color 0.2s ease; } .section-header a:hover { color: var(--coral-hover); } /* DESTINASI */ .destinasi-section { padding: 20px 0 50px; } .destinasi-scroll { display: flex; gap: 16px; overflow-x: auto; padding: 4px 20px 10px; max-width: 1000px; margin: 0 auto; } .destinasi-card { /* Warna dasar selagi gambar belum dimuat (lazyBg). Abu NETRAL (bukan biru/hijau merek) supaya tidak terbaca sebagai kedipan, tapi cukup GELAP karena nama destinasi di atasnya berwarna putih dan lapisan gelapnya baru menyala setelah foto siap. */ background-color: #4A453F; min-width: 170px; height: 210px; border-radius: 16px; display: flex; flex-direction: column; justify-content: flex-end; padding: 16px; color: white; flex-shrink: 0; background-size: cover; background-position: center; position: relative; overflow: hidden; cursor: pointer; transition: transform 0.25s ease, box-shadow 0.25s ease; } .destinasi-card:hover { transform: translateY(-6px); box-shadow: 0 14px 30px rgba(11,61,58,0.24); } .destinasi-card::after { content: ""; position: absolute; inset: 0; /* Muncul setelah fotonya siap (.img-ready) — kalau selalu tampil, kartu yang gambarnya belum termuat jadi kotak berwarna pekat, dan itu terbaca sebagai kedipan. */ opacity: 0; transition: opacity .35s ease; background: linear-gradient(to top, rgba(11,61,58,0.75), rgba(11,61,58,0) 60%); } .destinasi-card.img-ready::after { opacity: 1; } .destinasi-name, .destinasi-count { position: relative; z-index: 1; } .destinasi-name { font-family: 'Fraunces', serif; font-size: 19px; font-weight: 600; } .destinasi-count { font-family: 'Space Grotesk', monospace; font-size: 12px; opacity: 0.9; } /* TICKET CARDS (signature element) */ .wahana-list { padding: 20px 0 70px; } .ticket-container { display: flex; justify-content: center; gap: 28px; flex-wrap: wrap; max-width: 1000px; margin: 0 auto; padding: 0 20px; } .ticket-card { background: white; border-radius: 16px; width: 260px; box-shadow: 0 8px 24px rgba(11,61,58,0.12); display: flex; flex-direction: column; transition: transform 0.2s; } .ticket-card:hover { transform: translateY(-6px); } .ticket-card.clickable { cursor: pointer; } .ticket-image { height: 140px; width: 100%; border-radius: 16px 16px 0 0; background-size: cover; background-position: center; /* Abu netral, bukan emerald pekat. Sejak gambar dimuat saat mendekati layar (lazyBg), warna dasar ini terlihat lebih lama — warna mencolok jadi terbaca sebagai kedipan. */ background-color: #EDEAE5; position: relative; } .wish-btn { position: absolute; top: 10px; right: 10px; width: 36px; height: 36px; border: none; border-radius: 50%; background: #FFFFFF; cursor: pointer; display: flex; align-items: center; justify-content: center; box-shadow: 0 2px 10px rgba(15,45,107,0.16); transition: transform 0.25s ease, background-color 0.25s ease; } .wish-btn svg { width: 18px; height: 18px; fill: none; stroke: var(--text-2); stroke-width: 2; transition: stroke 0.25s ease, fill 0.25s ease; } .wish-btn:hover { transform: scale(1.08); background: var(--coral); } .wish-btn:hover svg { stroke: #FFFFFF; } .wish-btn:active { transform: scale(0.95); } /* Saat aktif (sudah di wishlist): latar coral, heart putih terisi */ .wish-btn.active { background: var(--coral); box-shadow: 0 4px 14px rgba(255,107,74,0.36); } .wish-btn.active svg { stroke: #FFFFFF; fill: #FFFFFF; } /* BADGE premium */ .badge { position: absolute; top: 10px; left: 10px; z-index: 1; background: var(--coral); color: #FFFFFF; font-size: 11px; font-weight: 600; letter-spacing: 0.2px; padding: 5px 11px; border-radius: 999px; box-shadow: 0 2px 10px rgba(255,107,74,0.34); } .ticket-body { padding: 16px 18px 6px; } .ticket-body h3 { font-size: 17px; margin-bottom: 6px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .ticket-body p { font-size: 13.5px; color: #5b6b69; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .tk-more { display: inline-block; margin-top: 6px; font-size: 13px; font-weight: 600; color: #1495FF; text-decoration: none; transition: color 0.2s ease; } .tk-more:hover { color: #0E8A74; } .ticket-stub { position: relative; display: flex; align-items: center; justify-content: space-between; margin-top: auto; padding: 18px 18px 16px; border-top: 2px dashed rgba(11,61,58,0.2); } .ticket-stub::before, .ticket-stub::after { content: ""; position: absolute; top: -12px; width: 24px; height: 24px; border-radius: 50%; background: var(--sand); } .ticket-stub::before { left: -12px; } .ticket-stub::after { right: -12px; } .ticket-price { font-family: 'Space Grotesk', monospace; font-weight: 600; font-size: 15px; color: var(--ink); } .ticket-stub button { background-color: var(--coral); color: white; border: none; border-radius: 20px; padding: 8px 18px; font-size: 13px; font-weight: 600; cursor: pointer; box-shadow: 0 4px 10px rgba(255,107,74,0.25); transition: background-color 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease; } .ticket-stub button:hover { background-color: var(--coral-hover); transform: translateY(-2px); box-shadow: 0 8px 18px rgba(255,107,74,0.34); } .ticket-stub button:active { background-color: var(--coral-pressed); transform: translateY(0); } footer { text-align: center; padding: 26px; background-color: var(--ink); color: #d6def0; font-size: 13px; } /* CART */ .cart-btn { position: relative; } .cart-badge { position: absolute; top: 5px; right: 4px; background: var(--coral); color: white; font-size: 10px; font-weight: 600; width: 16px; height: 16px; border-radius: 50%; display: flex; align-items: center; justify-content: center; } .cart-panel { position: fixed; top: 0; right: -340px; width: 320px; height: 100%; background: white; box-shadow: -4px 0 24px rgba(11,61,58,0.15); z-index: 100; display: flex; flex-direction: column; transition: right 0.3s ease; } .cart-panel.open { right: 0; } .cart-header { display: flex; justify-content: space-between; align-items: center; padding: 20px; border-bottom: 1px solid #eee; } .cart-header h3 { font-size: 18px; } .close-btn { background: none; border: none; font-size: 16px; cursor: pointer; color: var(--text); } .cart-items { flex: 1; overflow-y: auto; padding: 16px 20px; } .cart-empty { color: #999; font-size: 14px; } .cart-item { display: flex; justify-content: space-between; align-items: center; padding: 10px 0; border-bottom: 1px solid #f2f2f2; } .cart-item-name { font-size: 14px; font-weight: 500; } .cart-item-price { font-family: 'Space Grotesk', monospace; font-size: 13px; color: var(--palm); } .cart-item-remove { background: none; border: none; color: #c0392b; font-size: 12px; cursor: pointer; margin-left: 10px; } .cart-footer { padding: 18px 20px; border-top: 1px solid #eee; } .cart-total-row { display: flex; justify-content: space-between; font-weight: 600; margin-bottom: 14px; font-family: 'Space Grotesk', monospace; } .cart-checkout-btn { width: 100%; background-color: var(--coral); color: white; border: none; border-radius: 24px; padding: 12px; font-size: 14px; font-weight: 600; cursor: pointer; box-shadow: 0 6px 16px rgba(255,107,74,0.28); transition: background-color 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease; } .cart-checkout-btn:hover { background-color: var(--coral-hover); transform: translateY(-2px); box-shadow: 0 10px 24px rgba(255,107,74,0.36); } .cart-checkout-btn:active { background-color: var(--coral-pressed); transform: translateY(0); } /* LANGUAGE MODAL */ .lang-modal { position: fixed; inset: 0; background: rgba(11,61,58,0.55); display: flex; align-items: center; justify-content: center; z-index: 200; opacity: 1; visibility: visible; transition: opacity 0.25s ease, visibility 0.25s ease; } .lang-modal.hidden { opacity: 0; visibility: hidden; } .lang-box { background: white; border-radius: 18px; padding: 32px 28px; text-align: center; max-width: 320px; box-shadow: 0 20px 50px rgba(0,0,0,0.25); } .lang-icon { font-size: 32px; margin-bottom: 10px; } .lang-box h3 { font-family: 'Inter', sans-serif; font-size: 15px; font-weight: 600; color: var(--text); margin-bottom: 20px; } .lang-options { display: flex; flex-direction: column; gap: 10px; } .lang-options button { background: var(--sand); border: 1.5px solid rgba(47,111,98,0.2); border-radius: 10px; padding: 12px; font-size: 14px; font-weight: 500; cursor: pointer; transition: background-color 0.15s, border-color 0.15s; } .lang-options button:hover { background: white; border-color: var(--coral); } /* AUTH / PROFILE MODAL */ /* ========================================================================= MODAL MASUK — GLASSMORPHISM Palet: navy #0F2D6B (judul), ocean #1495FF (aksen), putih lembut (permukaan). Tidak ada abu netral keras di mana pun — setiap abu di sini adalah navy yang diencerkan, itu yang membuat seluruh kotak terasa satu keluarga warna. ========================================================================= */ .auth-modal { position: fixed; inset: 0; /* TANPA BLUR di latar (permintaan user) — foto Bali tetap tajam dan sepenuhnya dikenali. Karena blur tak lagi ikut memisahkan lapisan, gelapnya dinaikkan sedikit (0.42 → 0.52) agar kotak putih tetap menonjol di atas foto terang. Kalau nanti terasa terlalu gelap, turunkan angka ini ke 0.45. */ background: rgba(9,22,54,0.52); display: flex; align-items: center; justify-content: center; z-index: 200; padding: 20px; opacity: 0; visibility: hidden; transition: opacity 0.32s cubic-bezier(.22,.8,.28,1), visibility 0.32s; } .auth-modal.open { opacity: 1; visibility: visible; } .auth-box { position: relative; /* TANPA blur sama sekali — halaman di belakang modal tetap tajam seluruhnya, termasuk bagian yang tertutup kotak ini (permintaan user). Karena backdrop-filter dilepas, putihnya dinaikkan ke 97%: pada 93% tanpa blur, foto di belakang menembus sebagai bercak warna yang mengotori teks. Kesan "kaca" kini datang dari tepi & bayangan saja, bukan dari buram. */ background: rgba(255,255,255,0.97); /* Tepi kaca: garis putih tipis di luar + kilau putih di baris pertama dalam. Inilah yang membedakan "kaca" dari "kotak putih transparan". */ border: 1px solid rgba(255,255,255,0.55); border-radius: 30px; box-shadow: inset 0 1px 0 rgba(255,255,255,0.9), 0 1px 2px rgba(15,45,107,0.04), 0 32px 80px -12px rgba(9,22,54,0.30); padding: 44px 32px 28px; text-align: center; max-width: 400px; width: 100%; animation: authRise 0.42s cubic-bezier(.16,.84,.24,1) both; } @keyframes authRise { from { opacity: 0; transform: translateY(18px) scale(0.97); } to { opacity: 1; transform: translateY(0) scale(1); } } /* Tombol tutup: lingkaran tembus pandang, bukan tanda silang telanjang. 44px = ukuran sasaran sentuh minimum yang nyaman untuk ibu jari. */ .auth-close { position: absolute; top: 16px; right: 16px; width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; background: rgba(15,45,107,0.06); border: 1px solid rgba(15,45,107,0.05); border-radius: 50%; font-size: 15px; line-height: 1; color: rgba(15,45,107,0.55); cursor: pointer; transition: background-color .2s ease, color .2s ease, transform .2s ease; } .auth-close:hover { background: rgba(15,45,107,0.11); color: var(--navy); transform: rotate(90deg); } /* LOGO. Gaya teks di bawah hanya CADANGAN kalau isinya masih tulisan biasa. Yang sebenarnya dipakai adalah aturan .auth-logo img — pasang logo Volupo di index.html (pakai src yang sama dengan logo di topbar). */ .auth-logo { font-family: 'Inter', sans-serif; font-size: 11.5px; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ocean); margin-bottom: 18px; line-height: 1; } .auth-logo img { height: 34px; width: auto; display: block; margin: 0 auto; } .auth-box h3 { font-family: 'Fraunces', serif; font-size: 30px; font-weight: 600; line-height: 1.12; letter-spacing: -0.015em; color: var(--navy); margin-bottom: 12px; } .auth-sub { font-size: 14.5px; font-weight: 500; color: rgba(15,45,107,0.62); margin-bottom: 32px; line-height: 1.55; padding: 0 6px; } .auth-provider { display: flex; align-items: center; justify-content: center; gap: 12px; width: 100%; min-height: 59px; background: #FFFFFF; /* Garis tepi = navy diencerkan, bukan abu netral. Abu murni di atas permukaan kaca terlihat kotor karena tidak sewarna dengan apa pun di sekitarnya. */ border: 1px solid rgba(15,45,107,0.10); border-radius: 19px; padding: 0 18px; font-size: 15.5px; font-weight: 600; font-family: 'Inter', sans-serif; color: var(--navy); cursor: pointer; margin-bottom: 12px; box-shadow: 0 1px 2px rgba(15,45,107,0.05); transition: border-color .22s ease, box-shadow .22s ease, transform .22s cubic-bezier(.2,.8,.3,1), background-color .22s ease; } /* Google diberi bobot sedikit lebih: itu jalur yang dipakai hampir semua orang, dan tiga tombol yang persis serupa memaksa mata membaca ketiganya dulu. */ .auth-provider.google { border-color: rgba(15,45,107,0.16); box-shadow: 0 2px 6px rgba(15,45,107,0.07); } /* Elevasi saat disentuh: terangkat sedikit, bayangan melebar & MELEMBUT. Bayangan yang cuma membesar tanpa melembut terasa murah. */ .auth-provider:hover { border-color: rgba(20,149,255,0.45); background: #FCFDFF; transform: translateY(-2px); box-shadow: 0 10px 26px -6px rgba(20,149,255,0.26); } .auth-provider:active { transform: translateY(0) scale(0.988); box-shadow: 0 2px 6px rgba(15,45,107,0.10); transition-duration: .08s; } .auth-provider:focus-visible { outline: 2px solid var(--ocean); outline-offset: 3px; } .auth-ico { font-size: 20px; width: 22px; height: 22px; display: flex; align-items: center; justify-content: center; flex: none; } /* Satu keluarga ikon (Lucide: garis 2px, ujung & sudut membulat), disuntik sebagai SVG lewat CSS sehingga index.html tidak perlu disentuh. Emoji aslinya dikecilkan ke nol, bukan disembunyikan, agar kotaknya tetap menjaga perataan teks. */ .auth-provider:not(.google) .auth-ico { font-size: 0; background-repeat: no-repeat; background-position: center; background-size: 22px 22px; } /* Tombol ke-2 = Email, ke-3 = Telepon. Kalau tertukar di halamanmu, tukar angkanya. */ #auth-choose .auth-provider:nth-of-type(2) .auth-ico { background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230F2D6B' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='4' width='20' height='16' rx='3'/%3E%3Cpath d='m22 7.5-9.03 5.74a1.94 1.94 0 0 1-2.06 0L2 7.5'/%3E%3C/svg%3E"); } #auth-choose .auth-provider:nth-of-type(3) .auth-ico { background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230F2D6B' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5' y='2' width='14' height='20' rx='3.5'/%3E%3Cpath d='M12.5 18.2h-1'/%3E%3C/svg%3E"); } /* SATU pengecualian yang disengaja: penanda G tetap berwarna merek Google. Orang memindai layar login mencari warna itu; mengubahnya jadi garis navy membuat tombol utama hilang dari radar. */ .auth-provider.google .auth-ico { font-family: 'Inter', sans-serif; font-weight: 700; font-size: 19px; line-height: 22px; color: #4285F4; } .auth-form { display: none; } .auth-form input { width: 100%; min-height: 56px; background: #FFFFFF; border: 1px solid rgba(15,45,107,0.10); border-radius: 19px; padding: 0 18px; font-size: 15px; font-family: 'Inter', sans-serif; color: var(--navy); margin-bottom: 12px; outline: none; transition: border-color .2s ease, box-shadow .2s ease; } .auth-form input::placeholder { color: rgba(15,45,107,0.38); } .auth-form input:focus { border-color: var(--ocean); box-shadow: 0 0 0 4px rgba(20,149,255,0.13); } .auth-submit { width: 100%; min-height: 59px; background: var(--coral); color: white; border: none; border-radius: 19px; padding: 0 18px; font-size: 15.5px; font-weight: 600; font-family: 'Inter', sans-serif; cursor: pointer; box-shadow: 0 6px 18px -4px rgba(255,107,74,0.42); transition: background-color .22s ease, transform .22s cubic-bezier(.2,.8,.3,1), box-shadow .22s ease; } .auth-submit:hover { background: var(--coral-hover); transform: translateY(-2px); box-shadow: 0 12px 28px -6px rgba(255,107,74,0.5); } .auth-submit:active { background: var(--coral-pressed); transform: translateY(0) scale(0.988); transition-duration: .08s; } .auth-submit-outline { background: #FFFFFF; color: var(--coral); border: 1px solid rgba(255,107,74,0.4); margin-top: 10px; box-shadow: 0 1px 2px rgba(15,45,107,0.05); } .auth-submit-outline:hover { background: #FFF7F5; box-shadow: 0 10px 24px -8px rgba(255,107,74,0.32); } .auth-back { width: 100%; background: none; border: none; color: rgba(15,45,107,0.55); font-size: 13.5px; font-weight: 500; cursor: pointer; margin-top: 16px; padding: 10px; border-radius: 12px; transition: color .2s ease, background-color .2s ease; } .auth-back:hover { color: var(--navy); background: rgba(15,45,107,0.05); } .auth-note { font-size: 11.5px; color: rgba(15,45,107,0.42); line-height: 1.6; margin-top: 26px; padding-top: 20px; /* Pemisah dibuat memudar di kedua ujung — garis lurus penuh terasa kaku dan memotong kotak jadi dua bagian yang tak berhubungan. */ border-top: none; position: relative; } .auth-note::before { content: ""; position: absolute; top: 0; left: 8%; right: 8%; height: 1px; background: linear-gradient(90deg, rgba(15,45,107,0) 0%, rgba(15,45,107,0.12) 50%, rgba(15,45,107,0) 100%); } /* Layar sempit: sudut & jarak dikecilkan sedikit supaya kotak tidak menyesakkan, tapi tinggi tombol DIPERTAHANKAN — di HP justru itu yang paling terasa. */ @media (max-width: 400px) { .auth-modal { padding: 16px; } .auth-box { padding: 36px 22px 24px; border-radius: 26px; } .auth-box h3 { font-size: 26px; } .auth-sub { margin-bottom: 26px; font-size: 14px; } } /* Menghormati pengguna yang mematikan animasi di setelan perangkatnya. */ @media (prefers-reduced-motion: reduce) { .auth-box { animation: none; } .auth-provider, .auth-submit, .auth-close { transition-duration: .01ms; } } .profile-avatar { width: 64px; height: 64px; border-radius: 50%; background: var(--palm); color: white; font-family: 'Fraunces', serif; font-size: 28px; font-weight: 600; display: flex; align-items: center; justify-content: center; margin: 0 auto 14px; } .auth-logout { width: 100%; background: none; border: 1.5px solid #f0c4b8; color: #c0392b; border-radius: 12px; padding: 12px; font-size: 14px; font-weight: 600; font-family: 'Inter', sans-serif; cursor: pointer; margin-top: 10px; transition: background-color 0.15s; } .auth-logout:hover { background: #fdecea; } /* titik penanda kalau sudah login */ #account-btn.logged-in::after { content: ""; position: absolute; top: 7px; right: 8px; width: 8px; height: 8px; border-radius: 50%; background: #34C759; border: 1.5px solid white; } #account-btn { position: relative; } /* WISHLIST */ .wishlist-items { text-align: left; max-height: 320px; overflow-y: auto; margin-top: 8px; } .wishlist-empty { color: #999; font-size: 14px; text-align: center; padding: 24px 0; } .wishlist-item { display: flex; justify-content: space-between; align-items: center; padding: 12px 4px; border-bottom: 1px solid #f0f0f0; } .wishlist-item-name { font-size: 14px; font-weight: 500; color: var(--text); } .wishlist-item-price { font-family: 'Space Grotesk', monospace; font-size: 12px; color: var(--palm); } .wishlist-remove { background: none; border: none; color: #c0392b; font-size: 16px; cursor: pointer; padding: 4px 8px; } /* PEMESANAN (booking modal) */ .booking-label { display: block; text-align: left; font-size: 12px; font-weight: 600; color: var(--text); margin: 14px 0 6px; } .booking-input { width: 100%; border: 1.5px solid rgba(47,111,98,0.25); border-radius: 12px; padding: 12px 14px; font-size: 14px; font-family: 'Inter', sans-serif; color: var(--text); outline: none; } .booking-input:focus { border-color: var(--ocean); } .qty-row { display: flex; align-items: center; justify-content: center; gap: 24px; } .qty-btn { width: 40px; height: 40px; border-radius: 50%; border: 1.5px solid rgba(47,111,98,0.3); background: white; font-size: 20px; color: var(--ink); cursor: pointer; display: flex; align-items: center; justify-content: center; transition: border-color 0.15s, background-color 0.15s; } .qty-btn:hover { border-color: var(--coral); background: var(--sand); } .qty-num { font-family: 'Space Grotesk', monospace; font-size: 20px; font-weight: 600; min-width: 32px; text-align: center; } .booking-total-row { display: flex; justify-content: space-between; align-items: center; font-family: 'Space Grotesk', monospace; font-weight: 600; font-size: 16px; color: var(--ink); margin: 18px 0 16px; } .cart-item-meta { font-size: 11.5px; color: #8a9997; margin: 2px 0; } /* PLACEHOLDER LOADING AKTIVITAS */ .loading-note { width: 100%; text-align: center; color: var(--text-2); font-size: 14px; padding: 20px 0; } /* PANEL ADMIN */ .admin-box { max-width: 440px; max-height: 86vh; overflow-y: auto; text-align: left; } .admin-box h3 { text-align: center; } .admin-box .auth-sub { text-align: center; } .admin-divider { height: 1px; background: var(--border); margin: 22px 0 14px; } .admin-list-title { font-size: 13px; font-weight: 700; color: var(--text); margin-bottom: 10px; } .admin-list { display: flex; flex-direction: column; gap: 8px; } .admin-item { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 12px; border: 1.5px solid var(--border); border-radius: 12px; } .admin-item-info { min-width: 0; } .admin-item-name { font-size: 13.5px; font-weight: 600; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .admin-item-price { font-family: 'Space Grotesk', monospace; font-size: 12px; color: var(--emerald); } .admin-item-actions { display: flex; gap: 6px; flex-shrink: 0; } .admin-edit, .admin-del { border: none; border-radius: 8px; padding: 6px 10px; font-size: 12px; font-weight: 600; cursor: pointer; transition: background-color 0.2s ease; } .admin-edit { background: #eef4fb; color: var(--ocean); } .admin-edit:hover { background: #dcebfb; } .admin-del { background: #fdecea; color: #c0392b; } .admin-del:hover { background: #fbdcd8; } .admin-empty { font-size: 13px; color: var(--text-2); text-align: center; padding: 10px 0; } /* Mobile: kartu aktivitas mengisi lebar (ditaruh di akhir agar menang cascade) */ @media (max-width: 600px) { .ticket-container { gap: 18px; padding: 0 16px; } .ticket-card { width: 100%; max-width: 100%; } }