/* ========================================================================== Gelora — Public Site (landing + booking pelanggan) Bootstrap 5 (CDN) untuk struktur/komponen, variabel & class di sini untuk identitas brand "Court & Cue" — konsisten dengan app internal (public/css/app.css) tanpa saling bergantung (dua front, satu warna). ========================================================================== */ :root { /* --- Warna brand: TIDAK ikut berubah antar tema ------------------------- Teal tetap warna utama (kain billiard / court padel). Amber sengaja dipakai tipis-tipis saja sebagai aksen — bukan warna dominan. */ --g-primary-500: #14B8A6; --g-primary-600: #0D9488; --g-primary-700: #0F766E; --g-accent-500: #F59E0B; --g-accent-600: #D97706; --g-info-500: #2563EB; /* --- Token semantik: DIBALIK oleh tema gelap di bawah ------------------- Semua komponen memakai token ini, bukan hex mentah, supaya menambah tema cukup mengubah blok ini saja. */ --g-bg: #F5F7F8; /* latar halaman */ --g-surface: #FFFFFF; /* kartu / panel */ --g-surface-2: #F8FAFC; /* panel bertingkat (mis. isi accordion) */ --g-ink-900: #0F172A; /* teks utama */ --g-ink-700: #334155; --g-ink-600: #475569; /* teks sekunder */ --g-ink-300: #CBD5E1; --g-ink-200: #E2E8F0; /* garis & pemisah */ --g-primary-50: #F0FDFA; /* isian lembut warna brand */ --g-primary-100: #CCFBF1; /* Warna brand khusus TEKS di atas latar halaman/kartu. Dipisah dari --g-primary-700 karena teal tua itu hanya terbaca di latar terang; di tema gelap ia jadi 1,2:1 alias tak terbaca. Lihat blok tema gelap. */ --g-brand-ink: var(--g-primary-700); --g-on-brand: #FFFFFF; /* teks di atas bidang brand */ --g-shadow-sm: 0 8px 22px rgb(15 23 42 / 0.07); --g-shadow: 0 20px 48px rgb(15 23 42 / 0.10); --g-scrim: rgb(255 255 255 / .82); /* navbar tembus pandang */ /* Permukaan yang SELALU gelap di kedua tema (footer, blok jeda gaya Gorent). Tidak boleh pakai --g-ink-900: token itu dibalik jadi terang di tema gelap. */ --g-always-dark: #131222; /* Pasangan warna status. Dipisah supaya versi gelapnya bisa diatur sendiri — tint terang + teks cokelat tua mustahil terbaca di latar gelap. */ --g-warn-bg: #FFFBEB; --g-warn-border: #FDE68A; --g-warn-ink: #92400E; --g-warn-strong: #B45309; --g-danger-bg: #FEF2F2; --g-danger-border: #FECACA; --g-danger-ink: #991B1B; --g-danger-strong: #DC2626; --g-success-bg: #DCFCE7; --g-success-ink: #047857; /* Tepi & radius kartu — di tema terang masih pakai garis tipis, di tema gelap garisnya dihilangkan mengikuti Gorent (lihat blok dark di bawah). */ --g-card-border: var(--g-ink-200); --g-card-radius: 20px; /* Latar section berselang-seling. Dijadikan token tersendiri karena di tema gelap nilainya TIDAK boleh sama dengan --g-surface: kalau sama, kartu dan section-nya sewarna dan kartunya seolah menyatu dengan latar. */ --g-section-tint: #FFFFFF; /* Satu kurva untuk semua gerak (expo-out). Dipakai bersama supaya seluruh halaman terasa satu irama, bukan tiap komponen punya timing sendiri. */ --g-ease: cubic-bezier(.16, 1, .3, 1); --g-radius-sm: 10px; --g-radius-md: 14px; --g-radius-lg: 26px; --g-radius-xl: 32px; --g-bottomnav-height: 74px; color-scheme: light; } /* Tema gelap. Dipilih lewat atribut data-theme di (disetel skrip anti-kedip di ), jadi pilihan pengguna selalu menang atas preferensi sistem — dan tidak ada kedipan putih saat halaman dimuat. */ :root[data-theme="dark"] { /* Nilai diambil langsung dari Gorent versi gelap supaya rasanya sama: dasar #131222, permukaan kartu #1B1A28, teks sekunder abu hangat #868689. */ --g-bg: #131222; --g-surface: #1B1A28; --g-surface-2: #23222F; --g-ink-900: #FFFFFF; --g-ink-700: #C9C9CC; --g-ink-600: #868689; --g-ink-300: #3A3947; --g-ink-200: #2C2B39; /* Border kartu di tema gelap: garis rambut, BUKAN transparan. Sebelumnya transparan mengikuti Gorent, tapi di section berlatar --g-surface kartunya jadi sewarna dengan latarnya dan batas kartu hilang sama sekali. Garis rambut 7% putih memulihkan batas itu tanpa terlihat sebagai kotak bergaris. */ --g-card-border: rgb(255 255 255 / .10); --g-card-radius: 20px; /* Lebih gelap dari --g-surface (#1B1A28) supaya kartu tetap menonjol di atasnya. */ --g-section-tint: #100F1E; /* Digelapkan dari #10302D: teks sekunder (--g-ink-600) di atasnya cuma 3,9:1 — kena di baris alamat cabang terpilih, harga menu, dan catatan ringkasan. Nilai ini memberi 4,75:1, cukup bermargin (percobaan di #0B2422 masih meleset tipis di 4,49:1). */ --g-primary-50: #0A211F; --g-primary-100: #14403B; /* Teal muda: 9,7:1 di atas latar gelap (versus 3,37:1 milik --g-primary-700 di navbar dan 1,22:1 di badan kartu). */ --g-brand-ink: #2DD4BF; /* Di latar hampir hitam, bayangan hitam tidak terlihat sama sekali — itulah sebab kartu terasa menyatu dengan halaman. Yang memisahkan kartu di UI gelap adalah GARIS SOROT setipis 1px di tepi atasnya (seolah kena cahaya dari atas), bukan bayangannya. Keduanya dijadikan satu token supaya semua kartu ikut tanpa perlu diubah satu per satu. */ --g-shadow-sm: inset 0 1px 0 rgb(255 255 255 / .06), 0 12px 30px rgb(0 0 0 / 0.42); --g-shadow: inset 0 1px 0 rgb(255 255 255 / .09), 0 26px 60px rgb(0 0 0 / 0.55); --g-scrim: rgb(19 18 34 / .85); --g-warn-bg: #3A2A0B; --g-warn-border: #5C4410; --g-warn-ink: #FCD34D; --g-warn-strong: #FBBF24; --g-danger-bg: #3B1414; --g-danger-border: #5C1D1D; --g-danger-ink: #FCA5A5; --g-danger-strong: #F87171; --g-success-bg: #0C3A2A; --g-success-ink: #34D399; color-scheme: dark; } body.pub-body { font-family: "Plus Jakarta Sans", "Inter", system-ui, sans-serif; background: var(--g-bg); color: var(--g-ink-900); padding-bottom: 0; min-height: 100vh; display: flex; flex-direction: column; } .pub-main { flex: 1 0 auto; } /* ---- Form controls (global polish, semua halaman) ----------------------- */ .pub-body .form-control, .pub-body .form-select { border-radius: var(--g-radius-sm); border: 1.5px solid var(--g-ink-200); padding: 10px 14px; } .pub-body .form-control:focus, .pub-body .form-select:focus { border-color: var(--g-primary-500); box-shadow: 0 0 0 4px rgb(20 184 166 / .12); } /* .text-muted milik Bootstrap dipatok ke rgba(33,37,41,.75) — abu tua yang TIDAK ikut atribut data-theme kita. Di tema gelap teks itu jadi 1,08:1 di atas kartu alias tidak terbaca (kena di seluruh keterangan jam & satuan pada Daftar Harga). Dialihkan ke token kita sendiri. */ .pub-body .text-muted { color: var(--g-ink-600) !important; } /* Sama dengan .text-muted: warna utilitas Bootstrap ini dipatok untuk tema terang dan tidak ikut data-theme kita. */ .pub-body .text-danger { color: var(--g-danger-strong) !important; } .pub-body .text-success { color: var(--g-success-ink) !important; } /* Label kecil (nilai voucher, penanda). Menggantikan .badge.text-bg-light bawaan Bootstrap yang latarnya selalu abu terang. */ .pub-chip { display: inline-block; padding: 3px 10px; border-radius: 999px; background: var(--g-primary-50); color: var(--g-brand-ink); font-size: 12px; font-weight: 800; letter-spacing: .02em; font-variant-numeric: tabular-nums; } /* ---- Judul section bergaya Gorent: uppercase, tebal, rapat --------------- */ .pub-section-title { text-transform: uppercase; letter-spacing: -.015em; line-height: 1.06; font-size: clamp(1.9rem, 3.6vw, 3rem); } .pub-hero__slide h1 { text-transform: uppercase; letter-spacing: -.02em; line-height: 1.02; font-weight: 800; font-size: clamp(2.3rem, 5.4vw, 4.2rem); } /* ---- Marquee nama olahraga (pemisah antar-section) ----------------------- */ .pub-marquee { background: var(--g-always-dark); color: #fff; overflow: hidden; padding: 20px 0; border-top: 1px solid rgb(255 255 255 / .08); border-bottom: 1px solid rgb(255 255 255 / .08); /* Tepi kiri-kanan dipudarkan supaya teks tidak terpotong mendadak di batas layar — pitanya jadi terasa berjalan dari luar bingkai, bukan terguntung. */ -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 9%, #000 91%, transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 9%, #000 91%, transparent 100%); } .pub-marquee__track { display: flex; align-items: center; gap: 40px; width: max-content; animation: pub-marquee-scroll 26s linear infinite; } .pub-marquee:hover .pub-marquee__track { animation-play-state: paused; } .pub-marquee__item { display: inline-flex; align-items: center; gap: 14px; font-size: clamp(1.1rem, 2.2vw, 1.7rem); font-weight: 800; text-transform: uppercase; letter-spacing: .02em; white-space: nowrap; } .pub-marquee__item i { color: var(--g-primary-500); font-size: .8em; } .pub-marquee__sep { color: var(--g-accent-500); font-size: .7em; } @keyframes pub-marquee-scroll { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-50%, 0, 0); } } @media (prefers-reduced-motion: reduce) { /* Teks berjalan terus itu mengganggu buat sebagian orang — dihentikan total. */ .pub-marquee__track { animation: none; width: 100%; justify-content: center; flex-wrap: wrap; } } /* ---- Hero halaman-dalam (Tentang, Kontak) ------------------------------- */ .pub-pagehero { position: relative; isolation: isolate; overflow: hidden; padding: clamp(80px, 11vh, 128px) 0 clamp(64px, 8vh, 92px); color: #fff; background: #08090F; /* Perlakuan foto disamakan dengan hero beranda: scrim NETRAL berarah, bukan tint teal 93% yang dulu dipakai di sini dan membuat fotonya jadi bidang hijau berlumpur. */ background-image: linear-gradient(96deg, rgb(6 8 16 / .93) 0%, rgb(6 8 16 / .86) 26%, rgb(6 8 16 / .70) 46%, rgb(6 8 16 / .34) 62%, rgb(6 8 16 / .10) 78%, rgb(6 8 16 / .30) 100%), var(--slide-photo, none); background-size: cover, cover; background-position: center, center; } /* Bloom brand tipis, sama seperti hero beranda (menyala di atas foto, bukan menutupinya). */ .pub-pagehero::after { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; background: radial-gradient(74% 70% at 86% 16%, rgb(20 184 166 / .30), transparent 62%); mix-blend-mode: screen; } .pub-pagehero > .container { position: relative; z-index: 1; } /* Garis aksen yang sama dengan hero beranda — penanda keluarga desain. */ .pub-pagehero__eyebrow::before { content: ""; display: block; width: 54px; height: 3px; border-radius: 3px; background: var(--g-accent-500); margin-bottom: 18px; } .pub-pagehero__eyebrow { display: inline-block; margin-bottom: 10px; font-size: 12px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--g-primary-500); } .pub-pagehero h1 { font-weight: 800; text-transform: uppercase; letter-spacing: -.02em; line-height: 1.05; margin: 0 0 12px; font-size: clamp(1.9rem, 4.4vw, 3.2rem); /* Wajib dibatasi: scrim hanya pekat sampai ~46% lebar layar. Tanpa batas ini judul menjulur ke bagian yang hampir bening dan kontrasnya jatuh ke 1.8:1 di atas foto yang terang. */ max-width: 17ch; } .pub-pagehero p { color: rgb(255 255 255 / .84); max-width: 50ch; margin: 0 0 18px; } .pub-breadcrumb { display: flex; align-items: center; gap: 10px; font-size: 13px; color: rgb(255 255 255 / .7); } .pub-breadcrumb a { color: rgb(255 255 255 / .7); text-decoration: none; } .pub-breadcrumb a:hover { color: #fff; } .pub-breadcrumb i { font-size: 9px; } /* ---- Media & daftar fitur halaman Tentang ------------------------------- Susunannya meniru blok "About" milik Nauka: foto utama masuk dari samping, lalu ada elemen kecil yang mengambang menumpuk di tepinya (di Nauka berupa siluet kapal ber-float-bob-x). Di sini elemen itu diisi angka nyata dari data, jadi hiasannya sekalian membawa informasi. */ .pub-about-figure { position: relative; padding-bottom: 34px; padding-right: 22px; } .pub-about-media { border-radius: var(--g-card-radius); overflow: hidden; box-shadow: var(--g-shadow-sm); } .pub-about-media img { width: 100%; height: 100%; object-fit: cover; display: block; aspect-ratio: 4 / 3; } /* Bidang warna brand di belakang foto — memberi kedalaman, seperti bentuk latar yang selalu ada di balik foto utama Nauka. */ .pub-about-figure::before { content: ""; position: absolute; z-index: 0; left: -18px; bottom: 8px; width: 58%; height: 62%; border-radius: var(--g-card-radius); background: linear-gradient(150deg, rgb(20 184 166 / .30), rgb(245 158 11 / .16)); filter: blur(2px); } .pub-about-media { position: relative; z-index: 1; } .pub-about-badge { position: absolute; z-index: 2; right: 0; bottom: 0; background: var(--g-surface); border: 1px solid var(--g-card-border); box-shadow: var(--g-shadow); border-radius: var(--g-card-radius); padding: 18px 22px; min-width: 168px; display: flex; align-items: center; gap: 14px; } .pub-about-badge__icon { width: 44px; height: 44px; border-radius: 14px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-size: 17px; background: var(--g-primary-50); color: var(--g-primary-600); } .pub-about-badge__num { font-size: 1.6rem; font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; } .pub-about-badge__label { font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--g-ink-600); margin-top: 4px; } @media (max-width: 575.98px) { .pub-about-figure { padding-bottom: 0; padding-right: 0; } .pub-about-badge { position: static; margin-top: 16px; } .pub-about-figure::before { display: none; } } .pub-feature-list { display: grid; gap: 18px; } .pub-feature-list__item { display: flex; gap: 14px; align-items: flex-start; } .pub-feature-list__item > span { width: 42px; height: 42px; flex-shrink: 0; border-radius: 12px; display: flex; align-items: center; justify-content: center; background: var(--g-primary-50); color: var(--g-primary-600); } .pub-feature-list__item strong { display: block; margin-bottom: 2px; } .pub-feature-list__item p { margin: 0; font-size: 14px; color: var(--g-ink-600); } /* ---- Kartu statistik ---------------------------------------------------- */ .pub-stat-card { background: var(--g-surface); border: 1px solid var(--g-card-border); box-shadow: var(--g-shadow-sm); border-radius: var(--g-card-radius); padding: 30px 24px; text-align: center; height: 100%; } .pub-stat-card__icon { width: 54px; height: 54px; border-radius: 50%; margin: 0 auto 14px; display: flex; align-items: center; justify-content: center; font-size: 20px; background: var(--g-primary-50); color: var(--g-primary-600); } .pub-stat-card__num { font-size: 2.4rem; font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; } .pub-stat-card__label { margin-top: 6px; font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--g-ink-600); } /* ---- Baris kontak ------------------------------------------------------- */ .pub-contact-row { display: flex; align-items: flex-start; gap: 11px; padding: 9px 0; font-size: 14px; color: var(--g-ink-600); } .pub-contact-row i { color: var(--g-primary-600); margin-top: 3px; flex-shrink: 0; width: 16px; } .pub-contact-row a { color: var(--g-ink-900); font-weight: 700; text-decoration: none; } .pub-contact-row a:hover { color: var(--g-primary-600); } /* ---- Pita CTA penutup --------------------------------------------------- */ .pub-cta-band { position: relative; overflow: hidden; border-radius: var(--g-radius-xl); padding: 58px 24px; text-align: center; color: #fff; background: radial-gradient(90% 140% at 10% 0%, rgb(20 184 166 / .5), transparent 60%), linear-gradient(155deg, var(--g-primary-700), var(--g-primary-500) 78%); } .pub-cta-band h2, .pub-cta-band p, .pub-cta-band .btn { position: relative; z-index: 2; } /* Stempel bundar berputar. Ini padanan "rotate-me" milik Nauka (teks melingkar yang berputar 24 detik sekali) — tapi digambar dengan SVG textPath, bukan library circleType + lettering. Murni hiasan: aria-hidden, dan kalau animasinya mati ia cuma berhenti berputar. */ .pub-seal { position: absolute; z-index: 1; right: clamp(20px, 4vw, 56px); top: 50%; transform: translateY(-50%); width: 132px; height: 132px; display: flex; align-items: center; justify-content: center; pointer-events: none; } .pub-seal svg { width: 100%; height: 100%; animation: pub-rotate 26s linear infinite; } .pub-seal text { font-size: 15.5px; font-weight: 800; letter-spacing: .1em; fill: rgb(255 255 255 / .82); text-transform: uppercase; } .pub-seal__core { position: absolute; width: 54px; height: 54px; border-radius: 50%; background: rgb(255 255 255 / .16); border: 1px solid rgb(255 255 255 / .34); display: flex; align-items: center; justify-content: center; font-size: 16px; } @media (max-width: 991.98px) { .pub-seal { display: none; } } @media (prefers-reduced-motion: reduce) { .pub-seal svg { animation: none; } } /* Sapuan cahaya melintas saat tombol disorot — detail kecil khas template kelas atas (Nauka menyebutnya keyframe "shine"). */ .btn-gelora, .btn-gelora-accent { position: relative; overflow: hidden; } .btn-gelora > *, .btn-gelora-accent > * { position: relative; z-index: 1; } .btn-gelora::after, .btn-gelora-accent::after { content: ""; position: absolute; top: 0; bottom: 0; left: -70%; width: 42%; background: linear-gradient(100deg, transparent, rgb(255 255 255 / .5), transparent); transform: skewX(-18deg); pointer-events: none; } .btn-gelora:hover::after, .btn-gelora-accent:hover::after { animation: pub-shine .85s var(--g-ease); } @keyframes pub-shine { to { left: 130%; } } @media (prefers-reduced-motion: reduce) { .btn-gelora:hover::after, .btn-gelora-accent:hover::after { animation: none; } } .pub-cta-band h2 { font-weight: 800; text-transform: uppercase; letter-spacing: -.01em; margin-bottom: 10px; } .pub-cta-band p { color: rgb(255 255 255 / .9); margin-bottom: 22px; } /* ---- Bar utilitas atas (pola Gorent) ------------------------------------ */ .pub-utilitybar { background: var(--g-always-dark); color: rgb(255 255 255 / .72); font-size: 13px; } .pub-utilitybar .container { display: flex; align-items: center; justify-content: space-between; gap: 16px; /* Dulu isinya menempel ke tepi atas & bawah bar (min-height 42px, padding 0). Ruang napas ini yang bikin bar atas terbaca rapi, bukan sekadar sempit. */ padding-top: 11px; padding-bottom: 11px; min-height: 0; } .pub-utilitybar__info { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; } .pub-utilitybar__info a, .pub-utilitybar__info span { color: inherit; text-decoration: none; display: inline-flex; align-items: center; gap: 7px; } .pub-utilitybar__info a:hover { color: #fff; } .pub-utilitybar__info i { color: var(--g-primary-500); } .pub-theme-toggle { display: inline-flex; align-items: center; gap: 8px; background: rgb(255 255 255 / .1); border: 1px solid rgb(255 255 255 / .18); color: rgb(255 255 255 / .9); border-radius: 999px; padding: 5px 14px; font-size: 12px; font-weight: 700; transition: background .15s ease; } .pub-theme-toggle:hover { background: rgb(255 255 255 / .2); color: #fff; } /* Hanya satu ikon yang tampil, mengikuti tema aktif. */ :root[data-theme="dark"] .pub-theme-toggle [data-theme-icon-dark], :root:not([data-theme="dark"]) .pub-theme-toggle [data-theme-icon-light] { display: none; } @media (max-width: 767.98px) { /* Kontak disembunyikan; tombol tema tetap terjangkau tanpa mengubah bottom-nav. */ .pub-utilitybar__info { display: none; } .pub-utilitybar .container { justify-content: flex-end; padding-top: 9px; padding-bottom: 9px; } } /* ---- Navbar (desktop) --------------------------------------------------- */ .pub-navbar { background: var(--g-scrim); backdrop-filter: blur(14px) saturate(1.4); box-shadow: 0 1px 0 var(--g-card-border); /* Menimpa .py-3 Bootstrap: 16px terlalu rapat untuk brand + tombol pil. */ padding-top: 18px !important; padding-bottom: 18px !important; } /* Garis bawah tipis menyala di bawah item aktif — penanda posisi yang lebih halus daripada mengandalkan perbedaan warna teks saja. */ .pub-navbar .nav-link { position: relative; transition: color .25s var(--g-ease); } .pub-navbar .nav-link::after { content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 2px; border-radius: 2px; background: var(--g-primary-500); transform: scaleX(0); transform-origin: left; transition: transform .3s var(--g-ease); } .pub-navbar .nav-link.active::after, .pub-navbar .nav-link:hover::after { transform: scaleX(1); } .pub-navbar .navbar-brand { font-weight: 800; font-size: 1.25rem; color: var(--g-ink-900) !important; display: flex; align-items: center; gap: 8px; } .pub-navbar .navbar-brand .brand-mark { display: block; flex-shrink: 0; } .pub-navbar .nav-link { font-weight: 600; color: var(--g-ink-700) !important; } .pub-navbar .nav-link.active, .pub-navbar .nav-link:hover { color: var(--g-brand-ink) !important; } /* ---- Buttons -------------------------------------------------------------*/ /* Detail-detail kecil yang bikin tombol terasa digarap: bayangan berwarna senada (bukan abu-abu), naik sedikit saat disorot, dan menekan balik saat diklik. Semua pakai kurva gerak yang sama dengan komponen lain. */ .btn-gelora, .btn-gelora-accent, .btn-gelora-outline { transition: background .3s var(--g-ease), border-color .3s var(--g-ease), color .3s var(--g-ease), transform .3s var(--g-ease), box-shadow .3s var(--g-ease); } .btn-gelora:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgb(13 148 136 / .34); } .btn-gelora-accent:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgb(217 119 6 / .34); } .btn-gelora-outline:hover{ transform: translateY(-2px); } .btn-gelora:active, .btn-gelora-accent:active, .btn-gelora-outline:active { transform: translateY(0) scale(.985); box-shadow: none; } /* Cincin fokus keyboard yang konsisten di seluruh situs publik. Bootstrap menghapusnya di beberapa varian tombol; ini mengembalikannya. */ .pub-body a:focus-visible, .pub-body button:focus-visible, .pub-body select:focus-visible, .pub-body input:focus-visible, .pub-body summary:focus-visible { outline: 2px solid var(--g-primary-500); outline-offset: 3px; border-radius: var(--g-radius-sm); } /* Di atas hero berfoto, cincin teal kurang terbaca — pakai putih. */ .pub-hero a:focus-visible, .pub-hero button:focus-visible { outline-color: #fff; } @media (prefers-reduced-motion: reduce) { .btn-gelora, .btn-gelora-accent, .btn-gelora-outline { transition: none; } .btn-gelora:hover, .btn-gelora-accent:hover, .btn-gelora-outline:hover { transform: none; } } /* Teks tombol utama memakai TINTA GELAP, bukan putih. Putih di atas teal-500 cuma 2,5:1 dan di atas amber-500 cuma 2,2:1 — dua- duanya jauh di bawah ambang baca. Menggelapkan isian sampai putih terbaca berarti mengubah teal jadi hijau tua dan amber jadi cokelat, yaitu membuang warna brand-nya. Tinta gelap menyelesaikan keduanya: warnanya tetap terang dan kontrasnya jadi 6:1 (teal) dan 7,9:1 (amber). Pola ini juga yang dipakai Gorent pada tombol kuningnya. Warnanya ditulis tetap (bukan token --g-ink) karena isian tombol tidak berubah antar tema. */ .btn-gelora { background: var(--g-primary-500); border-color: var(--g-primary-500); color: #04302B; font-weight: 700; border-radius: 999px; padding: 10px 22px; } .btn-gelora:hover, .btn-gelora:focus { /* Menyala saat disorot, bukan menggelap — kalau menggelap, tinta gelapnya yang jadi tidak terbaca. */ background: #2DD4BF; border-color: #2DD4BF; color: #04302B; } .btn-gelora-accent { background: var(--g-accent-500); border-color: var(--g-accent-500); color: #2B1A02; font-weight: 700; border-radius: 999px; padding: 10px 22px; } .btn-gelora-accent:hover, .btn-gelora-accent:focus { background: #FBBF24; border-color: #FBBF24; color: #2B1A02; } .btn-gelora-outline { background: transparent; border: 1.5px solid var(--g-ink-300); color: var(--g-ink-900); font-weight: 700; border-radius: 999px; padding: 9px 20px; } .btn-gelora-outline:hover { background: var(--g-ink-900); border-color: var(--g-ink-900); color: #fff; } .btn-gelora-dark { background: var(--g-ink-900); border-color: var(--g-ink-900); color: #fff; font-weight: 700; border-radius: 999px; padding: 10px 22px; } .btn-gelora-dark:hover { background: #000; border-color: #000; color: #fff; } /* Circular icon button (dipakai di search bar & hover overlay kartu) */ .pub-btn-circle { width: 52px; height: 52px; border-radius: 50%; background: var(--g-accent-500); color: #fff; display: inline-flex; align-items: center; justify-content: center; border: none; flex-shrink: 0; transition: background .15s ease, transform .15s ease; } .pub-btn-circle:hover { background: var(--g-accent-600); transform: scale(1.05); color: #fff; } /* Hitung mundur batas waktu bayar di halaman receipt. */ .pub-countdown { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px; margin-bottom: 14px; border-radius: var(--g-radius-md); background: var(--g-warn-bg); border: 1px solid var(--g-warn-border); } .pub-countdown__label { font-size: 13px; font-weight: 700; color: var(--g-warn-ink); } .pub-countdown__time { font-size: 22px; font-weight: 800; color: var(--g-warn-strong); font-variant-numeric: tabular-nums; letter-spacing: .02em; } .pub-countdown.is-urgent { background: var(--g-danger-bg); border-color: var(--g-danger-border); } .pub-countdown.is-urgent .pub-countdown__label { color: var(--g-danger-ink); } .pub-countdown.is-urgent .pub-countdown__time { color: var(--g-danger-strong); } /* ---- Kartu daftar harga (dari rate_cards asli) -------------------------- */ .pub-price-card { background: var(--g-surface); border: 1px solid var(--g-card-border); box-shadow: var(--g-shadow-sm); border-radius: var(--g-card-radius); padding: 26px; height: 100%; } .pub-price-card__head { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; } .pub-price-card__head h5 { font-weight: 800; margin: 0 0 2px; } .pub-price-card__icon { width: 46px; height: 46px; border-radius: var(--g-radius-md); flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-size: 20px; } .pub-price-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 0; border-top: 1px solid var(--g-ink-200); } .pub-price-row__amount { font-weight: 800; color: var(--g-ink-900); white-space: nowrap; font-variant-numeric: tabular-nums; } .pub-price-row__amount span { font-weight: 600; font-size: 12px; color: var(--g-ink-600); } .pub-peak-tag { display: inline-block; margin-left: 6px; padding: 1px 7px; border-radius: 999px; background: var(--g-warn-bg); color: var(--g-warn-ink); font-size: 10px; font-weight: 800; text-transform: uppercase; } /* ---- FAQ (pakai
bawaan: bisa dibuka tanpa JS & aksesibel) ------ Tata letak dipecah dua kolom: kiri judul + jalan keluar kalau jawabannya tidak ada, kanan daftar pertanyaannya. Sebelumnya satu kolom 760px di tengah, menyisakan bidang kosong lebar di kiri-kanan pada layar desktop. */ .pub-faq-split { display: grid; grid-template-columns: minmax(0, .78fr) minmax(0, 1.22fr); gap: clamp(28px, 5vw, 72px); align-items: start; } .pub-faq-split__aside { position: sticky; top: 104px; } .pub-faq-split__aside p { color: var(--g-ink-600); font-size: 14.5px; line-height: 1.7; } @media (max-width: 991.98px) { .pub-faq-split { grid-template-columns: 1fr; gap: 28px; } .pub-faq-split__aside { position: static; } } .pub-faq { max-width: 760px; } .pub-faq__item { background: var(--g-surface); border: 1px solid var(--g-card-border); box-shadow: var(--g-shadow-sm); border-radius: var(--g-card-radius); margin-bottom: 12px; overflow: hidden; transition: border-color .3s var(--g-ease); } .pub-faq__item[open] { border-color: var(--g-primary-500); } .pub-faq__item summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 20px; font-weight: 700; cursor: pointer; list-style: none; color: var(--g-ink-900); } .pub-faq__item summary::-webkit-details-marker { display: none; } .pub-faq__item summary i { color: var(--g-primary-600); transition: transform .2s ease; flex-shrink: 0; } .pub-faq__item[open] summary i { transform: rotate(180deg); } .pub-faq__item[open] summary { border-bottom: 1px solid var(--g-ink-200); } .pub-faq__item p { margin: 0; padding: 16px 20px; color: var(--g-ink-600); font-size: 14px; line-height: 1.65; } @media (prefers-reduced-motion: reduce) { .pub-faq__item summary i { transition: none; } } /* Eyebrow di atas judul section — memberi konteks singkat sebelum heading, sekaligus bikin jeda antar-section lebih terbaca. */ .pub-eyebrow { display: inline-block; margin-bottom: 8px; font-size: 12px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; /* --g-primary-600 hanya 3,5:1 di atas putih — kurang untuk teks 12px. --g-brand-ink teal tua di tema terang, teal muda di tema gelap. */ color: var(--g-brand-ink); } /* Baris penjelas di bawah search bar hero — menyampaikan aturan main (DP, e-ticket, pre-order) sebelum orang masuk ke wizard. */ .pub-trust-row { display: flex; flex-wrap: wrap; gap: 8px 22px; justify-content: center; margin-top: 18px; font-size: 13px; color: var(--g-ink-600); } .pub-trust-row span { display: inline-flex; align-items: center; gap: 7px; } .pub-trust-row i { color: var(--g-primary-600); } /* ---- Placeholder media berbrand ----------------------------------------- Menggantikan foto stok acak (picsum.photos) yang dulu dipakai. Venue belum punya foto asli, dan memasang foto random yang tidak ada hubungannya dengan tempatnya justru bikin halaman terasa palsu. Jadi: bidang gradient brand + ikon yang relevan (tipe fasilitas / cabang / menu). Jujur sebagai placeholder, tanpa request eksternal, dan ukurannya pasti jadi tidak ada layout shift. Begitu ada foto asli, tinggal ganti elemen ini dengan . */ .pub-ph { position: relative; overflow: hidden; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; background: linear-gradient(140deg, var(--ph-a) 0%, var(--ph-b) 100%); color: rgb(255 255 255 / .62); } /* Kilau lembut, bukan garis diagonal. Garis-garis tadinya dipakai agar bidang tidak terlihat datar, tapi hasilnya justru terbaca sebagai pola cetak. */ .pub-ph::after { content: ""; position: absolute; inset: 0; background: radial-gradient(80% 70% at 22% 12%, rgb(255 255 255 / .16), transparent 60%), radial-gradient(70% 80% at 88% 96%, rgb(0 0 0 / .22), transparent 62%); } .pub-ph i { position: relative; z-index: 1; } .pub-ph-sm i { font-size: 18px; } .pub-ph-md i { font-size: 34px; } .pub-ph-lg i { font-size: 54px; } /* Varian warna deterministik (dipilih dari id entitas) — semuanya dalam rentang brand, jadi grid kartu terlihat bervariasi tapi tetap satu keluarga. */ .pub-ph--v0 { --ph-a: #14B8A6; --ph-b: #0F766E; } .pub-ph--v1 { --ph-a: #2563EB; --ph-b: #1E3A8A; } .pub-ph--v2 { --ph-a: #D97706; --ph-b: #92400E; } .pub-ph--v3 { --ph-a: #0F766E; --ph-b: #134E4A; } .pub-ph--v4 { --ph-a: #475569; --ph-b: #1E293B; } /* ========================================================================== HERO — full-bleed, foto sebagai bintang -------------------------------------------------------------------------- Versi sebelumnya adalah kartu rounded di dalam .container setinggi 560px dengan tint warna 92% menutupi fotonya. Akibatnya: (1) terbaca sebagai banner iklan, bukan hero; (2) fotonya hilang jadi bidang cokelat/teal berlumpur; (3) separuh kanan menganga kosong; (4) search bar menabrak batas bawahnya. Sekarang: hero melebar penuh setinggi ~88vh, fotonya dibiarkan terlihat (scrim netral BERARAH — pekat hanya di kolom teks), warna brand masuk sebagai bloom tipis ber-blend "screen" (menyala, bukan melumpuri), dan bidang kanan diisi panel cek jadwal yang tetap ada di semua slide. ========================================================================== */ .pub-hero-section { padding: 0; } .pub-hero { position: relative; isolation: isolate; /* kurung mix-blend-mode bloom di dalam hero */ overflow: hidden; color: #fff; background: #08090F; /* dasar sebelum foto termuat — bukan putih */ min-height: clamp(580px, 88vh, 920px); display: flex; align-items: center; padding: clamp(56px, 7vh, 96px) 0 clamp(104px, 13vh, 148px); } /* --- Lapisan foto. Satu elemen per slide, ditumpuk & di-crossfade. -------- */ .pub-hero__bg { position: absolute; inset: -9% -2%; /* sengaja lebih tinggi dari bingkainya: menyediakan ruang gerak parallax (maks. 40px, lihat public.js) supaya tepi atas/bawah tidak pernah bocor */ z-index: 0; background-image: var(--slide-photo, none); background-size: cover; background-position: center; background-repeat: no-repeat; opacity: 0; transform: translate3d(0, var(--parallax-bg, 0), 0) scale(1.05); /* Silang-pudar panjang (1.2s) — pergantian foto jadi terasa sinematik, bukan seperti banner berganti. */ transition: opacity 1.2s var(--g-ease); } /* Ken Burns: foto aktif merayap membesar perlahan selama tayang. Inilah yang membuat hero berfoto terasa "hidup" tanpa gerak yang mengganggu. Aman kalau animasi tidak jalan sama sekali: fill-mode-nya "forwards" saja, jadi keadaan awal elemen tetap keadaan normal (terlihat), bukan tersembunyi. */ .pub-hero__bg.is-active { opacity: 1; animation: pub-hero-kenburns 11s ease-out forwards; } @keyframes pub-hero-kenburns { from { transform: translate3d(0, var(--parallax-bg, 0), 0) scale(1.05); } to { transform: translate3d(0, var(--parallax-bg, 0), 0) scale(1.15); } } /* Bloom warna brand. mix-blend-mode: screen = cahaya berwarna DI ATAS foto, jadi warnanya menyala tanpa menutup detail — beda dengan tint pekat lama yang membuat foto padel biru bertemu amber jadi cokelat lumpur. */ .pub-hero__bg::after { content: ""; position: absolute; inset: 0; background: radial-gradient(74% 64% at 84% 14%, var(--slide-bloom, rgb(20 184 166 / .30)), transparent 62%); mix-blend-mode: screen; } .pub-hero__bg.theme-teal { --slide-bloom: rgb(20 184 166 / .34); } .pub-hero__bg.theme-amber { --slide-bloom: rgb(245 158 11 / .26); } .pub-hero__bg.theme-ink { --slide-bloom: rgb(148 163 184 / .24); } /* --- Scrim keterbacaan. Netral (bukan berwarna) dan BERARAH: pekat di kiri tempat teks berada, hampir bening di kanan supaya fotonya benar-benar kelihatan. Ditambah gradasi bawah agar menyambung ke section berikutnya. */ .pub-hero__scrim { position: absolute; inset: 0; z-index: 1; pointer-events: none; background: /* Titik-titik henti diukur, bukan dikira: pekat sampai ~46% (batas kanan teks terpanjang) lalu turun cepat, sehingga 40% kanan bingkai hampir bening dan fotonya benar-benar terlihat. Lihat catatan verifikasi: kontras terburuk teks putih di seluruh foto slide ±7:1. */ linear-gradient(96deg, rgb(6 8 16 / .93) 0%, rgb(6 8 16 / .86) 26%, rgb(6 8 16 / .70) 46%, rgb(6 8 16 / .34) 62%, rgb(6 8 16 / .10) 78%, rgb(6 8 16 / .30) 100%), linear-gradient(to top, rgb(6 8 16 / .82) 0%, rgb(6 8 16 / .10) 34%, transparent 55%); } /* Vignette. Menggantikan tekstur garis diagonal yang dulu ditumpuk di sini — garis-garis itu terbaca sebagai pola cetak di atas foto dan justru merusak kesan fotografisnya. Vignette melakukan pekerjaan yang sama (menahan mata di tengah, meredam tepi) tanpa meninggalkan jejak yang kelihatan. */ .pub-hero__scrim::after { content: ""; position: absolute; inset: 0; background: radial-gradient(122% 92% at 50% 44%, transparent 40%, rgb(4 5 12 / .42) 100%); } /* --- Isi hero: dua kolom. Kiri naratif (berganti tiap slide), kanan panel cek jadwal yang TIDAK ikut berganti — jadi slide promo pun tidak pernah terlihat separuh kosong seperti sebelumnya. */ .pub-hero__inner { position: relative; z-index: 2; display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(300px, .88fr); gap: clamp(28px, 4.5vw, 72px); align-items: center; } .pub-hero__copy { display: grid; /* slide ditumpuk di sel yang sama: tinggi mengikuti slide terpanjang, tidak melompat saat berganti */ transform: translate3d(0, var(--parallax-content, 0), 0); opacity: var(--parallax-fade, 1); } .pub-hero__slide { grid-area: 1 / 1; opacity: 0; visibility: hidden; transform: translateY(16px); transition: opacity .6s ease, transform .6s cubic-bezier(.16, 1, .3, 1); } .pub-hero__slide.is-active { opacity: 1; visibility: visible; transform: none; } /* --- Koreografi masuk isi hero (pola Nauka) ------------------------------- Di Nauka tiap bagian slide masuk dari arah berbeda dan bergantian: judul turun dari atas, paragraf datang dari kanan, tombol naik dari bawah, dengan jeda 1000/1000/1500ms. Di sini arahnya ditiru, durasinya dipendekkan supaya tidak menahan orang yang mau langsung booking. PENTING soal keamanan: keadaan tersembunyi HANYA berlaku selama kelas .is-entering menempel, dan kelas itu dilepas paksa oleh setTimeout di home.blade.php setelah 1,3 detik. Jadi kalau animasi tidak pernah berjalan (tab latar, webview tanpa compositing) isinya tetap muncul — cuma tanpa animasi. Tanpa JS sama sekali, kelasnya tidak pernah terpasang dan isinya langsung terlihat. Tidak ada jalur yang berakhir "teks hilang". */ .pub-hero:is(.is-entering, .is-swapping) .pub-hero__slide.is-active > * { opacity: 0; transition: opacity .8s var(--g-ease), transform .8s var(--g-ease); } /* Catatan: pengait di sini WAJIB kelas sendiri (.pub-hero__badges, .pub-hero__actions). Versi pertama memakai .d-flex:first-of-type / :last-of-type — dan itu tidak pernah cocok, karena :first-of-type menyaring berdasarkan TIPE elemen (div), bukan kelas: div pertama di dalam slide adalah .pub-hero__rule, div terakhir adalah .pub-hero-stats. */ .pub-hero:is(.is-entering, .is-swapping) .pub-hero__slide.is-active > .pub-hero__rule { transform: scaleX(0); transform-origin: left; } .pub-hero:is(.is-entering, .is-swapping) .pub-hero__slide.is-active > .pub-hero__badges { transform: translateY(-26px); } .pub-hero:is(.is-entering, .is-swapping) .pub-hero__slide.is-active > h1 { transform: translateY(-38px); } .pub-hero:is(.is-entering, .is-swapping) .pub-hero__slide.is-active > p.lead { transform: translateX(64px); } .pub-hero:is(.is-entering, .is-swapping) .pub-hero__slide.is-active > .pub-hero__actions{ transform: translateY(30px); } .pub-hero:is(.is-entering, .is-swapping) .pub-hero__slide.is-active > .pub-hero-stats { transform: translateY(24px); } /* Jeda bertingkat dipasang saat kelasnya DILEPAS — itulah arah transisi yang kelihatan oleh pengguna (dari tersembunyi menuju tampil). */ .pub-hero__slide.is-active > .pub-hero__rule { transition: opacity .7s var(--g-ease) .05s, transform .7s var(--g-ease) .05s; } .pub-hero__slide.is-active > .pub-hero__badges { transition: opacity .7s var(--g-ease) .12s, transform .7s var(--g-ease) .12s; } .pub-hero__slide.is-active > h1 { transition: opacity .8s var(--g-ease) .20s, transform .8s var(--g-ease) .20s; } .pub-hero__slide.is-active > p.lead { transition: opacity .8s var(--g-ease) .32s, transform .8s var(--g-ease) .32s; } .pub-hero__slide.is-active > .pub-hero__actions { transition: opacity .7s var(--g-ease) .44s, transform .7s var(--g-ease) .44s; } .pub-hero__slide.is-active > .pub-hero-stats { transition: opacity .7s var(--g-ease) .54s, transform .7s var(--g-ease) .54s; } /* Panel cek jadwal ikut masuk sekali saja saat halaman dibuka — bukan tiap slide berganti, karena panelnya memang tidak ikut berganti. */ .pub-hero.is-entering .pub-hero__panel { opacity: 0; transform: translateX(48px); } .pub-hero__panel { transition: opacity .9s var(--g-ease) .30s, transform .9s var(--g-ease) .30s; } .pub-hero.is-entering .pub-hero__scroll { opacity: 0; } .pub-hero__scroll { transition: opacity .6s var(--g-ease) .7s, color .3s var(--g-ease); } @media (prefers-reduced-motion: reduce) { .pub-hero:is(.is-entering, .is-swapping) .pub-hero__slide.is-active > *, .pub-hero.is-entering .pub-hero__panel, .pub-hero.is-entering .pub-hero__scroll { opacity: 1; transform: none; transition: none; } } /* Garis aksen tipis di atas eyebrow — satu-satunya tempat amber tampil sebagai bidang penuh di hero. Sengaja kecil: amber aksen, bukan dominan. */ .pub-hero__rule { width: 54px; height: 3px; border-radius: 3px; background: var(--g-accent-500); margin-bottom: 20px; } .pub-hero .hero-badge { background: rgb(255 255 255 / .12); border: 1px solid rgb(255 255 255 / .28); backdrop-filter: blur(8px); border-radius: 999px; padding: 7px 18px; font-size: 13px; font-weight: 700; display: inline-block; } .pub-hero h1 { font-weight: 800; /* Naik dari 4.4rem → 5.2rem dan line-height dirapatkan: skala editorial, bukan skala banner. */ font-size: clamp(2.5rem, 5.6vw, 5.2rem); line-height: .98; letter-spacing: -.028em; text-transform: uppercase; max-width: 14ch; /* dipaksa pecah 2–3 baris, jadi blok teks punya bentuk — bukan satu garis panjang */ } .pub-hero p.lead { color: rgb(255 255 255 / .88); font-size: 1.06rem; line-height: 1.6; max-width: 46ch; } .pub-hero-stats { display: flex; gap: 0; margin-top: 30px; flex-wrap: wrap; border-top: 1px solid rgb(255 255 255 / .16); padding-top: 20px; } .pub-hero-stats > div { padding-right: 28px; margin-right: 28px; border-right: 1px solid rgb(255 255 255 / .16); } .pub-hero-stats > div:last-child { border-right: none; margin-right: 0; padding-right: 0; } .pub-hero-stats .stat-num { font-size: 1.7rem; font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; } .pub-hero-stats .stat-label { font-size: 12px; color: rgb(255 255 255 / .72); margin-top: 5px; } /* --- Panel kaca "cek jadwal". Menggantikan search bar yang dulu melayang menabrak batas bawah hero. Di sini ia punya tempat sendiri, mengisi bidang kanan yang tadinya kosong, sekaligus menjawab pertanyaan yang paling sering ditanyakan orang: "jam segini kosong tidak?". */ .pub-hero__panel { /* Dibatasi lebarnya lalu didorong ke tepi kanan: dua kolom isian tidak perlu 540px, dan sisanya jadi jendela tempat fotonya benar-benar terlihat. */ width: 100%; max-width: 440px; justify-self: end; background: rgb(255 255 255 / .09); border: 1px solid rgb(255 255 255 / .18); backdrop-filter: blur(20px) saturate(1.25); border-radius: var(--g-radius-lg); padding: clamp(22px, 2.2vw, 30px); box-shadow: 0 32px 72px rgb(0 0 0 / .42); /* Supaya kalender bawaan browser pada input[type=date] ikut gelap — tanpa ini ikon pemilih tanggalnya jadi gelap-di-atas-gelap. */ color-scheme: dark; } .pub-hero__panel h2 { font-size: 1.05rem; font-weight: 800; margin: 0 0 4px; text-transform: uppercase; letter-spacing: .01em; } .pub-hero__panel .panel-note { font-size: 12.5px; color: rgb(255 255 255 / .68); margin-bottom: 18px; } .pub-hero__panel .field { margin-bottom: 14px; } .pub-hero__panel .field label { display: block; font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: rgb(255 255 255 / .66); margin-bottom: 6px; } .pub-hero__panel .field select, .pub-hero__panel .field input { width: 100%; border-radius: var(--g-radius-sm); border: 1px solid rgb(255 255 255 / .22); background: rgb(8 10 18 / .42); color: #fff; font-weight: 700; font-size: 15px; padding: 11px 13px; min-height: 46px; /* target sentuh nyaman di HP */ } .pub-hero__panel .field select option { color: #0F172A; } .pub-hero__panel .field select:focus, .pub-hero__panel .field input:focus { outline: none; border-color: var(--g-primary-500); box-shadow: 0 0 0 4px rgb(20 184 166 / .22); } .pub-hero__panel .btn { width: 100%; margin-top: 4px; } /* --- Pita kepercayaan di dasar hero + kendali slider di sisi kanannya. ---- */ .pub-hero__foot { position: absolute; left: 0; right: 0; bottom: 0; z-index: 3; border-top: 1px solid rgb(255 255 255 / .14); background: rgb(6 8 16 / .38); backdrop-filter: blur(12px); } .pub-hero__foot > .container { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding-top: 15px; padding-bottom: 15px; } .pub-hero__foot .pub-trust-row { margin-top: 0; justify-content: flex-start; color: rgb(255 255 255 / .82); gap: 8px 26px; } .pub-hero__foot .pub-trust-row i { color: var(--g-primary-500); } .pub-hero__nav { width: 40px; height: 40px; border-radius: 50%; background: rgb(255 255 255 / .12); border: 1px solid rgb(255 255 255 / .26); color: #fff; display: inline-flex; align-items: center; justify-content: center; transition: background .15s ease; } .pub-hero__nav:hover { background: rgb(255 255 255 / .28); } .pub-hero__controls { display: flex; align-items: center; gap: 12px; flex-shrink: 0; } .pub-hero__dots { display: flex; gap: 8px; } .pub-hero__dot { width: 9px; height: 9px; border-radius: 50%; padding: 0; background: rgb(255 255 255 / .38); border: none; transition: width .25s ease, background .25s ease; } .pub-hero__dot.is-active { width: 26px; border-radius: 999px; background: #fff; } /* Di perangkat sentuh, kendali slider & tombol tema diperbesar area sentuhnya. Titik indikator memakai background-clip: content-box, jadi bidang yang bisa ditekan jadi 45px sementara bulatan yang terlihat tetap 9px — tidak ada yang berubah secara tampilan. Di perangkat berpenunjuk (mouse) ukuran ringkasnya dipertahankan; ambang 44px memang untuk jari, bukan kursor. */ @media (pointer: coarse), (max-width: 767.98px) { /* box-sizing WAJIB content-box di sini: dengan border-box bawaan Bootstrap, padding 18px memakan habis tinggi 9px-nya sehingga bulatannya jadi setinggi 0px alias hilang sama sekali. */ .pub-hero__dot { box-sizing: content-box; padding: 18px 6px; background-clip: content-box; } .pub-hero__nav { width: 44px; height: 44px; } .pub-theme-toggle { min-height: 44px; } .pub-hero__controls { gap: 8px; } } /* Petunjuk gulir. Dulu hanya teks polos, jadi tidak terbaca sebagai sesuatu yang bisa diklik. Sekarang tombol bulat bergaris rambut + label. */ .pub-hero__scroll { display: inline-flex; align-items: center; gap: 14px; justify-self: start; /* jangan direntang oleh grid kolom teks */ margin-top: 30px; font-size: 11.5px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: rgb(255 255 255 / .62); text-decoration: none; transition: color .3s var(--g-ease); } .pub-hero__scroll-dot { width: 46px; height: 46px; border-radius: 50%; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; border: 1px solid rgb(255 255 255 / .28); background: rgb(255 255 255 / .06); backdrop-filter: blur(8px); transition: background .35s var(--g-ease), border-color .35s var(--g-ease), transform .35s var(--g-ease); } .pub-hero__scroll-dot i { font-size: 13px; color: #fff; animation: pub-hero-bob 2.2s ease-in-out infinite; } .pub-hero__scroll:hover { color: #fff; } .pub-hero__scroll:hover .pub-hero__scroll-dot { background: var(--g-primary-500); border-color: var(--g-primary-500); transform: translateY(3px); } @keyframes pub-hero-bob { 0%, 100% { transform: translateY(-2px); } 50% { transform: translateY(3px); } } @media (max-width: 991.98px) { .pub-hero__inner { grid-template-columns: 1fr; gap: 32px; } .pub-hero__panel { max-width: 520px; justify-self: start; } /* Scrim BERARAH hanya benar selama teks menempati kolom kiri. Begitu tata letaknya jadi satu kolom, teks memenuhi lebar layar dan menjulur ke bagian scrim yang hampir bening — kontrasnya terukur jatuh ke 1,8:1. Di bawah 992px scrim-nya diganti jadi tegak dan rata. */ .pub-hero__scrim { background: linear-gradient(180deg, rgb(6 8 16 / .88) 0%, rgb(6 8 16 / .80) 46%, rgb(6 8 16 / .90) 100%); } } } @media (max-width: 767.98px) { .pub-hero { min-height: 0; padding: 40px 0 0; /* Di HP pita bawah dilepas dari position:absolute menjadi aliran normal. Tanpa flex-direction: column ia akan berdiri sebagai KOLOM KEDUA di sebelah isi hero (keduanya jadi flex item sebaris) dan memampatkan teks jadi ±211px. */ flex-direction: column; align-items: stretch; } .pub-hero__copy { min-height: 0; } .pub-hero h1 { max-width: none; } .pub-hero__scroll { display: none; } .pub-hero__foot { position: static; margin-top: 34px; background: rgb(6 8 16 / .5); } .pub-hero__foot > .container { flex-direction: column; align-items: flex-start; } .pub-hero__panel { max-width: none; } .pub-hero__foot .pub-trust-row { font-size: 12.5px; } .pub-hero-stats > div { padding-right: 18px; margin-right: 18px; } } /* Kalau pengguna minta gerak dikurangi: tanpa transisi, tanpa bobbing, tanpa parallax (autoplay-nya dimatikan di JS). */ @media (prefers-reduced-motion: reduce) { .pub-hero__slide, .pub-hero__bg, .pub-hero__dot { transition: none; } .pub-hero__bg.is-active { animation: none; } /* tanpa Ken Burns */ .pub-hero__scroll-dot i { animation: none; } } /* ---- Sections --------------------------------------------------------- */ .pub-section { padding: 76px 0; } /* Latar berselang-seling supaya batas antar-section kebaca dan halaman tidak terasa sebagai satu bidang panjang tanpa jeda. Body sudah abu-abu lembut (--g-bg), jadi section selang-seling dibuat PUTIH agar kontrasnya terlihat. */ .pub-section--tint { background: var(--g-section-tint); } /* ---- Reveal saat discroll ------------------------------------------------ Kelas .reveal-on dipasang JS di ; tanpa JS elemen tetap terlihat, jadi konten tidak pernah hilang kalau skripnya gagal dimuat. */ .reveal-on [data-reveal] { opacity: 0; transform: translateY(28px); /* Durasi dipanjangkan & kurvanya disamakan dengan komponen lain. Nauka memakai 1500ms; 0,9s terasa mewah tanpa bikin orang menunggu. */ transition: opacity .9s var(--g-ease), transform .9s var(--g-ease); transition-delay: var(--reveal-delay, 0ms); will-change: opacity, transform; } /* Arah masuk bisa dipilih per elemen (pola fadeInLeft/Right/Up milik Nauka). Dipakai untuk bikin dua kolom saling mendekat, bukan semuanya naik seragam. */ .reveal-on [data-reveal="right"] { transform: translateX(56px); } .reveal-on [data-reveal="left"] { transform: translateX(-56px); } .reveal-on [data-reveal="scale"] { transform: scale(.93); } .reveal-on [data-reveal].is-revealed { opacity: 1; transform: none; } /* Di layar sempit, geser MENDATAR diganti geser tegak. ------------------------------------------------------------------------- Elemen yang belum tersingkap menahan transform awalnya, dan di bawah lipatan halaman jumlahnya banyak. Pada desktop translateX(56px) tidak terasa karena masih ada ruang di kanan; pada 390px ia mendorong kolom selebar layar ke x=56 sehingga tepi kanannya di 446 — SELURUH halaman jadi bisa digeser ke samping, dan itu terjadi bahkan sebelum pengguna menyentuh apa pun. Terukur: scrollWidth beranda 446 vs viewport 390. Arah masuk kiri/kanan memang untuk "dua kolom saling mendekat" — begitu kolomnya menumpuk di HP, maknanya hilang, jadi tidak ada yang dikorbankan dengan menyeragamkannya menjadi naik. */ @media (max-width: 767.98px) { .reveal-on [data-reveal="right"], .reveal-on [data-reveal="left"] { transform: translateY(28px); } } /* Gutter g-5 (3rem) memakai margin negatif 24px per sisi, sementara .container hanya punya padding 12px untuk menyerapnya — sisa 12px per sisi lolos dan melebarkan halaman 24px. Di HP kolomnya menumpuk, jadi gutter mendatar sebesar itu memang tidak ada gunanya. Terukur: /tentang scrollWidth 458. */ @media (max-width: 767.98px) { .row.g-5, .row.gx-5 { --bs-gutter-x: 1.5rem; } } @media (prefers-reduced-motion: reduce) { .reveal-on [data-reveal] { opacity: 1; transform: none; transition: none; } } /* ---- Gerak mengambang & berputar (kosakata "float-bob" ala Nauka) -------- Nauka memakainya untuk elemen hias (siluet kapal, bentuk-bentuk latar) yang naik-turun pelan supaya halaman tidak terasa mati. Miliknya 2s linear — di sini diperlambat & diberi ease-in-out supaya gerakannya bernapas, bukan berdetak. Elemen yang memakainya SELALU dekoratif: kalau animasinya tidak jalan, tidak ada isi yang hilang. */ @keyframes pub-bob-y { 0%, 100% { transform: translateY(-9px); } 50% { transform: translateY(5px); } } @keyframes pub-bob-x { 0%, 100% { transform: translateX(-8px); } 50% { transform: translateX(5px); } } @keyframes pub-rotate { to { transform: rotate(360deg); } } .pub-float-y { animation: pub-bob-y 3.6s ease-in-out infinite; } .pub-float-x { animation: pub-bob-x 4.2s ease-in-out infinite; } @media (prefers-reduced-motion: reduce) { .pub-float-y, .pub-float-x { animation: none; } } /* ---- Kartu tipe fasilitas ------------------------------------------------ */ .pub-type-card { display: flex; flex-direction: column; height: 100%; background: var(--g-surface); border: 1px solid var(--g-card-border); border-radius: var(--g-card-radius); overflow: hidden; text-decoration: none; color: inherit; transition: transform .45s var(--g-ease), box-shadow .45s var(--g-ease), border-color .3s var(--g-ease); } .pub-type-card:hover { transform: translateY(-6px); box-shadow: var(--g-shadow); border-color: var(--g-primary-500); color: inherit; } .pub-type-card__media { position: relative; aspect-ratio: 16 / 7; overflow: hidden; } .pub-type-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .7s var(--g-ease); } .pub-type-card:hover .pub-type-card__media img { transform: scale(1.06); } /* Gradasi tipis di kaki foto supaya foto menyatu ke badan kartu, tidak terpotong sebagai dua bidang yang ditempel. */ .pub-type-card__media::after { content: ""; position: absolute; inset: auto 0 0 0; height: 42%; z-index: 1; background: linear-gradient(to top, rgb(0 0 0 / .28), transparent); pointer-events: none; } .pub-type-card__media .pub-ph { position: absolute; inset: 0; } .pub-type-card__mode { position: absolute; top: 12px; left: 12px; z-index: 2; background: rgb(255 255 255 / .95); color: var(--g-primary-700); font-size: 11px; font-weight: 800; padding: 4px 10px; border-radius: 999px; } .pub-type-card__body { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 18px 20px 12px; } .pub-type-card__body h5 { font-weight: 800; margin: 0 0 2px; } .pub-type-card__meta { font-size: 13px; color: var(--g-ink-600); } .pub-type-card__price { text-align: right; font-weight: 800; color: var(--g-ink-900); white-space: nowrap; font-variant-numeric: tabular-nums; } .pub-type-card__price span { display: block; font-size: 11px; font-weight: 600; color: var(--g-ink-600); text-transform: uppercase; letter-spacing: .05em; } .pub-type-card__go { margin-top: auto; padding: 12px 20px 18px; font-size: 13px; font-weight: 800; color: var(--g-brand-ink); display: flex; align-items: center; gap: 8px; } .pub-type-card__go i { transition: transform .2s ease; } .pub-type-card:hover .pub-type-card__go i { transform: translateX(4px); } @media (prefers-reduced-motion: reduce) { .pub-type-card, .pub-type-card__go i { transition: none; } .pub-type-card:hover { transform: none; } } .pub-section-title { font-weight: 800; color: var(--g-ink-900); letter-spacing: -.01em; } .pub-section-subtitle { color: var(--g-ink-600); } .pub-card { background: var(--g-surface); border-radius: var(--g-radius-lg); box-shadow: var(--g-shadow-sm); border: 1px solid var(--g-ink-200); height: 100%; transition: transform .15s ease, box-shadow .15s ease; } .pub-card:hover { transform: translateY(-4px); box-shadow: var(--g-shadow); } .pub-card .pub-card-icon { width: 52px; height: 52px; border-radius: 16px; background: var(--g-primary-50); color: var(--g-primary-600); display: flex; align-items: center; justify-content: center; font-size: 22px; } /* Browse-by-type: chip kecil bulat dengan gambar + label */ .pub-type-chip { display: block; text-align: center; text-decoration: none; color: inherit; } .pub-type-chip .thumb { width: 100%; aspect-ratio: 1 / 1; border-radius: var(--g-radius-lg); overflow: hidden; box-shadow: var(--g-shadow-sm); position: relative; transition: transform .18s ease, box-shadow .18s ease; } .pub-type-chip:hover .thumb { transform: translateY(-4px); box-shadow: var(--g-shadow); } .pub-type-chip .thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .35s ease; } .pub-type-chip:hover .thumb img { transform: scale(1.08); } .pub-type-chip .thumb .badge-mode { position: absolute; bottom: 8px; left: 8px; right: 8px; background: rgb(255 255 255 / .95); color: var(--g-primary-700); font-size: 10px; font-weight: 800; text-align: center; padding: 3px 6px; border-radius: 999px; } .pub-type-chip .label { margin-top: 12px; font-weight: 800; color: var(--g-ink-900); } .pub-type-chip .sub { font-size: 12px; color: var(--g-ink-600); } /* Destinasi/cabang: kartu gambar besar, teks overlay gradient */ .pub-dest-card { position: relative; border-radius: var(--g-card-radius); overflow: hidden; box-shadow: var(--g-shadow-sm); display: block; height: 100%; /* 280px di kartu selebar 636px (2 cabang = 2 kolom) menghasilkan potongan 2,3:1 — terbaca sebagai potongan panel foto memanjang, bukan kartu. Diperdalam supaya proporsinya jadi kartu betulan. */ min-height: clamp(340px, 30vw, 440px); color: #fff; text-decoration: none; border: 1px solid var(--g-card-border); transition: transform .45s var(--g-ease), box-shadow .45s var(--g-ease); } .pub-dest-card:hover { transform: translateY(-6px); box-shadow: var(--g-shadow); color: #fff; } .pub-dest-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .7s var(--g-ease); } @media (prefers-reduced-motion: reduce) { .pub-type-card__media img, .pub-dest-card img { transition: none; } .pub-type-card:hover .pub-type-card__media img { transform: none; } } .pub-dest-card:hover img { transform: scale(1.06); } .pub-dest-card::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgb(15 23 42 / .82) 0%, rgb(15 23 42 / .05) 55%, transparent 75%); } .pub-dest-card .content { position: relative; z-index: 2; padding: 20px; margin-top: auto; align-self: flex-end; } .pub-dest-card { display: flex; flex-direction: column; justify-content: flex-end; } .pub-dest-card .content h5 { font-weight: 800; margin-bottom: 4px; } .pub-dest-card .content p { font-size: 13px; color: rgb(255 255 255 / .85); margin-bottom: 0; } .pub-dest-card__status { margin-top: 8px !important; font-weight: 700; color: #6EE7B7 !important; } .pub-dest-card .arrow-btn { position: absolute; top: 16px; right: 16px; z-index: 3; width: 40px; height: 40px; border-radius: 50%; background: rgb(255 255 255 / .92); color: var(--g-ink-900); display: flex; align-items: center; justify-content: center; transition: background .15s ease, transform .15s ease; } .pub-dest-card:hover .arrow-btn { background: var(--g-accent-500); color: #fff; transform: rotate(45deg); } /* Image cards (dipakai di step 2 wizard: fasilitas) */ .pub-media-card { background: var(--g-surface); border-radius: var(--g-radius-lg); box-shadow: var(--g-shadow-sm); overflow: hidden; height: 100%; transition: transform .18s ease, box-shadow .18s ease; display: flex; flex-direction: column; } .pub-media-card:hover { transform: translateY(-6px); box-shadow: var(--g-shadow); } .pub-media-card .pub-media-thumb { position: relative; aspect-ratio: 4 / 3; overflow: hidden; } .pub-media-card .pub-media-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .35s ease; } .pub-media-card:hover .pub-media-thumb img { transform: scale(1.08); } .pub-media-card .pub-media-badge { position: absolute; top: 12px; left: 12px; background: rgb(255 255 255 / .95); color: var(--g-primary-700); font-size: 11px; font-weight: 800; padding: 4px 10px; border-radius: 999px; } .pub-media-card .pub-media-body { padding: 18px; flex: 1; display: flex; flex-direction: column; } .pub-step-num { width: 40px; height: 40px; border-radius: 50%; background: var(--g-accent-500); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 800; flex-shrink: 0; } /* ---- Alur booking (section "Cara Booking") ------------------------------ Sebelumnya tiga angka telanjang berjajar di pita selebar halaman — banyak udara, sedikit isi. Sekarang kartu bernomor dengan ikon, dihubungkan garis tipis supaya terbaca sebagai satu urutan, bukan tiga hal terpisah. */ .pub-flow { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; } .pub-flow__item { position: relative; background: var(--g-surface); border: 1px solid var(--g-card-border); border-radius: var(--g-card-radius); padding: 26px 22px 24px; box-shadow: var(--g-shadow-sm); height: 100%; } /* Garis penghubung antar-kartu. Digambar dari kartu ke kartu berikutnya, jadi kartu terakhir tidak menjulurkan garis ke ruang kosong. */ .pub-flow__item:not(:last-child)::after { content: ""; position: absolute; z-index: 0; top: 52px; right: -20px; width: 20px; height: 2px; background: var(--g-ink-200); } .pub-flow__icon { width: 52px; height: 52px; border-radius: 16px; display: flex; align-items: center; justify-content: center; background: var(--g-primary-50); color: var(--g-primary-600); font-size: 20px; margin-bottom: 16px; } .pub-flow__num { position: absolute; top: 22px; right: 22px; font-size: 30px; font-weight: 800; line-height: 1; color: var(--g-ink-900); opacity: .12; font-variant-numeric: tabular-nums; } .pub-flow__item h6 { font-weight: 800; margin-bottom: 6px; } .pub-flow__item p { color: var(--g-ink-600); font-size: 13.5px; line-height: 1.6; margin: 0; } @media (max-width: 991.98px) { .pub-flow { grid-template-columns: repeat(2, minmax(0, 1fr)); } /* Garis horizontal hanya benar untuk kartu yang punya tetangga di kanan. */ .pub-flow__item:nth-child(2n)::after { display: none; } } @media (max-width: 575.98px) { .pub-flow { grid-template-columns: 1fr; } .pub-flow__item::after { display: none !important; } } /* ---- Footer ------------------------------------------------------------ */ .pub-footer { background: var(--g-always-dark); color: rgb(255 255 255 / .7); padding: 48px 0 24px; flex-shrink: 0; } .pub-footer h5 { color: #fff; font-weight: 800; } .pub-footer a { color: rgb(255 255 255 / .7); text-decoration: none; } .pub-footer a:hover { color: #fff; } .pub-footer h5 .brand-mark { display: inline-block; vertical-align: -7px; } /* ---- Bottom nav (mobile only) — floating pill, logika tetap link biasa -- */ .pub-bottomnav { display: none; } @media (max-width: 767.98px) { body.pub-body { padding-bottom: calc(var(--g-bottomnav-height) + 14px); } .pub-navbar { display: none; } .pub-bottomnav { display: flex; position: fixed; left: 12px; right: 12px; bottom: 12px; height: var(--g-bottomnav-height); background: var(--g-scrim); backdrop-filter: blur(10px); border-radius: 999px; z-index: 1030; box-shadow: 0 12px 32px rgb(15 23 42 / .18); padding: 0 6px; } .pub-bottomnav a { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; font-size: 10.5px; font-weight: 700; color: var(--g-ink-600); text-decoration: none; margin: 8px 2px; border-radius: 999px; transition: background .15s ease, color .15s ease; } .pub-bottomnav a i { font-size: 17px; } .pub-bottomnav a.active { color: #fff; background: var(--g-primary-500); } /* Aturan mobile hero yang lama (kartu rounded 460px + search bar melayang) dihapus: hero sekarang full-bleed dan diatur di blok media-query miliknya sendiri. Kalau dibiarkan, aturan ini menang karena letaknya lebih bawah dan mengembalikan padding 20px yang memampatkan isinya. */ } @media (min-width: 768px) { .pub-mobile-only { display: none !important; } } /* ---- Auth cards (login/register) ---------------------------------------*/ .pub-auth-wrap { min-height: calc(100vh - 200px); display: flex; align-items: center; justify-content: center; padding: 40px 16px; } .pub-auth-card { width: 100%; max-width: 420px; background: var(--g-surface); border-radius: var(--g-radius-lg); box-shadow: var(--g-shadow); padding: 36px; } /* ---- Booking wizard ------------------------------------------------------*/ /* ========================================================================== HALAMAN BOOKING (wizard 5 langkah) -------------------------------------------------------------------------- Sebelumnya halaman ini satu-satunya yang belum ikut tema: judul telanjang tanpa page-hero, tombol abu-abu bawaan Bootstrap, dan tidak ada penunjuk posisi sama sekali padahal langkahnya lima. Di sini ditata ulang jadi dua kolom — langkahnya di kiri, ringkasan yang menempel di kanan. ========================================================================== */ .pub-booking { display: grid; grid-template-columns: minmax(0, 1fr) 348px; gap: 28px; align-items: start; } @media (max-width: 991.98px) { .pub-booking { grid-template-columns: 1fr; } } .pub-booking-panel { background: var(--g-surface); border: 1px solid var(--g-card-border); box-shadow: var(--g-shadow-sm); border-radius: var(--g-card-radius); padding: clamp(20px, 2.4vw, 30px); } .pub-booking-panel__head { margin-bottom: 20px; } .pub-booking-panel__head h2 { font-size: 1.32rem; font-weight: 800; margin: 0 0 4px; text-transform: uppercase; letter-spacing: -.01em; } .pub-booking-panel__head p { margin: 0; color: var(--g-ink-600); font-size: 14px; line-height: 1.6; } .pub-booking-panel__foot { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 26px; padding-top: 20px; border-top: 1px solid var(--g-ink-200); flex-wrap: wrap; } /* ---- Penunjuk langkah --------------------------------------------------- */ .pub-steps { display: flex; margin-bottom: 26px; counter-reset: step; } .pub-steps__item { flex: 1 1 0; min-width: 0; position: relative; display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; } /* Garis penghubung digambar ke item BERIKUTNYA, jadi item terakhir tidak menjulurkan garis ke ruang kosong. */ .pub-steps__item:not(:last-child)::after { content: ""; position: absolute; z-index: 0; top: 19px; left: calc(50% + 24px); right: calc(-50% + 24px); height: 2px; background: var(--g-ink-200); transition: background .4s var(--g-ease); } .pub-steps__item.is-done::after { background: var(--g-primary-500); } .pub-steps__dot { position: relative; z-index: 1; width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 14px; background: var(--g-surface); color: var(--g-ink-600); border: 2px solid var(--g-ink-200); transition: background .35s var(--g-ease), border-color .35s var(--g-ease), color .35s var(--g-ease); } .pub-steps__label { font-size: 11.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--g-ink-600); line-height: 1.3; } .pub-steps__item.is-current .pub-steps__dot { background: var(--g-primary-500); border-color: var(--g-primary-500); color: #04302B; box-shadow: 0 0 0 5px rgb(20 184 166 / .18); } .pub-steps__item.is-current .pub-steps__label { color: var(--g-brand-ink); } .pub-steps__item.is-done .pub-steps__dot { background: var(--g-primary-50); border-color: var(--g-primary-500); color: var(--g-brand-ink); } .pub-steps__count { display: none; font-size: 13px; font-weight: 700; color: var(--g-ink-600); } @media (max-width: 575.98px) { /* Di layar sempit label lima langkah jadi berdesakan sampai tak terbaca — diganti keterangan "Langkah N dari 5" di bawah barisan titiknya. */ .pub-steps__label { display: none; } .pub-steps__dot { width: 34px; height: 34px; font-size: 13px; } .pub-steps__item:not(:last-child)::after { top: 16px; left: calc(50% + 21px); right: calc(-50% + 21px); } .pub-steps__count { display: block; text-align: center; margin-top: -14px; margin-bottom: 20px; } } @media (prefers-reduced-motion: reduce) { .pub-steps__dot, .pub-steps__item::after { transition: none; } } /* ---- Ringkasan menempel ------------------------------------------------- */ .pub-booking-aside { position: sticky; top: 96px; background: var(--g-surface); border: 1px solid var(--g-card-border); box-shadow: var(--g-shadow-sm); border-radius: var(--g-card-radius); padding: 24px; } @media (max-width: 991.98px) { .pub-booking-aside { position: static; } } .pub-booking-aside h3 { font-size: 1rem; font-weight: 800; text-transform: uppercase; letter-spacing: .02em; margin: 0 0 4px; } .pub-booking-aside__note { font-size: 12.5px; color: var(--g-ink-600); margin-bottom: 18px; } .pub-summary-row { display: flex; justify-content: space-between; align-items: baseline; gap: 14px; padding: 10px 0; border-bottom: 1px dashed var(--g-ink-200); font-size: 14px; } .pub-summary-row:last-of-type { border-bottom: none; } .pub-summary-row__key { color: var(--g-ink-600); flex-shrink: 0; } .pub-summary-row__val { font-weight: 700; text-align: right; color: var(--g-ink-900); min-width: 0; } /* Nilai yang belum diisi tampil sebagai garis putus, bukan kosong melompong — pengguna jadi tahu baris itu memang akan terisi nanti. */ .pub-summary-row__val.is-empty { color: var(--g-ink-300); font-weight: 600; } .pub-summary-total { margin-top: 16px; padding: 16px; border-radius: var(--g-radius-md); background: var(--g-primary-50); } .pub-summary-total .k { font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: var(--g-brand-ink); } .pub-summary-total .v { font-size: 1.5rem; font-weight: 800; color: var(--g-ink-900); font-variant-numeric: tabular-nums; line-height: 1.15; margin-top: 2px; } .pub-summary-total .s { font-size: 12px; color: var(--g-ink-600); margin-top: 4px; } /* ---- Pemberitahuan (menggantikan .alert bawaan Bootstrap, yang warnanya dipatok terang dan tidak ikut tema gelap) ------------------------------- */ .pub-alert { display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; border-radius: var(--g-radius-md); font-size: 14px; line-height: 1.55; margin-bottom: 20px; border: 1px solid transparent; } .pub-alert i { margin-top: 2px; flex-shrink: 0; } .pub-alert--danger { background: var(--g-danger-bg); border-color: var(--g-danger-border); color: var(--g-danger-ink); } .pub-alert--info { background: var(--g-primary-50); border-color: var(--g-primary-100); color: var(--g-ink-900); } .pub-alert--warn { background: var(--g-warn-bg); border-color: var(--g-warn-border); color: var(--g-warn-ink); } .pub-alert--success { background: var(--g-success-bg); border-color: transparent; color: var(--g-success-ink); } /* Varian d-block dipakai kalau isinya berupa daftar/beberapa baris, bukan satu kalimat di samping ikon. */ .pub-alert.d-block i { margin-right: 4px; } /* ---- E-ticket ----------------------------------------------------------- */ .pub-ticket-qr { display: flex; align-items: center; justify-content: center; width: fit-content; margin: 0 auto; padding: 14px; border-radius: var(--g-radius-md); /* QR harus SELALU hitam di atas putih supaya terbaca pemindai — jangan ikut token tema, karena di tema gelap latarnya akan jadi hitam juga. */ background: #fff; box-shadow: var(--g-shadow-sm); } .pub-ticket-qr img, .pub-ticket-qr canvas { display: block; } .pub-ticket-code { margin-top: 14px; font-size: 22px; font-weight: 800; letter-spacing: .22em; font-variant-numeric: tabular-nums; color: var(--g-ink-900); } /* ---- Tombol jam & durasi ------------------------------------------------ Dulu memakai .btn-outline-secondary bawaan Bootstrap — abu-abu, di luar palet, dan di tema gelap tepinya nyaris hilang. */ .pub-slot-btn { border-radius: 999px; border: 1.5px solid var(--g-ink-200); background: var(--g-surface); color: var(--g-ink-900); font-weight: 700; font-size: 13.5px; padding: 8px 16px; min-height: 40px; font-variant-numeric: tabular-nums; transition: border-color .25s var(--g-ease), background .25s var(--g-ease), color .25s var(--g-ease); } .pub-slot-btn:hover:not(:disabled) { border-color: var(--g-primary-500); color: var(--g-brand-ink); } .pub-slot-btn:disabled { opacity: .42; cursor: not-allowed; } .pub-slot-btn.is-selected { background: var(--g-primary-500); border-color: var(--g-primary-500); color: #04302B; } @media (pointer: coarse) { .pub-slot-btn { min-height: 44px; } } /* ---- Baris menu F&B ----------------------------------------------------- */ .pub-addon-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 12px; border: 1px solid var(--g-ink-200); border-radius: var(--g-radius-md); transition: border-color .25s var(--g-ease); } .pub-addon-row.has-qty { border-color: var(--g-primary-500); background: var(--g-primary-50); } .pub-addon-row__info { display: flex; align-items: center; gap: 10px; min-width: 0; } .pub-addon-row__name { font-weight: 700; font-size: 14px; } .pub-addon-row__price { font-size: 12.5px; color: var(--g-ink-600); font-variant-numeric: tabular-nums; } .pub-addon-row__qty { display: flex; align-items: center; gap: 6px; flex-shrink: 0; } .pub-qty-btn { width: 34px; height: 34px; border-radius: 50%; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; border: 1.5px solid var(--g-ink-200); background: var(--g-surface); color: var(--g-ink-900); font-size: 12px; transition: border-color .2s var(--g-ease), background .2s var(--g-ease), color .2s var(--g-ease); } .pub-qty-btn:hover { border-color: var(--g-primary-500); color: var(--g-brand-ink); } .pub-addon-qty { min-width: 22px; text-align: center; font-weight: 800; font-variant-numeric: tabular-nums; } @media (pointer: coarse) { .pub-qty-btn { width: 40px; height: 40px; } } /* Tombol hapus pada chip tanggal tambahan member. */ .btn-close-chip { border: none; background: transparent; padding: 0; line-height: 1; color: inherit; font-size: 16px; opacity: .65; cursor: pointer; } .btn-close-chip:hover { opacity: 1; } @media (pointer: coarse) { .btn-close-chip { padding: 6px; } } .pub-addon-group-title { font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--g-brand-ink); margin: 18px 0 10px; } /* ---- Baris fasilitas terpilih ------------------------------------------- */ .pub-picked-bar { display: flex; align-items: center; gap: 12px; padding: 14px 16px; margin-top: 18px; border-radius: var(--g-radius-md); background: var(--g-primary-50); border: 1px solid var(--g-primary-100); } .pub-picked-bar i { color: var(--g-brand-ink); } .pub-field-label { display: block; font-size: 11.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--g-ink-600); margin-bottom: 8px; } /* Tautan di dalam teks panel booking. Tanpa ini warnanya jatuh ke bawaan Bootstrap (biru) yang di tema gelap cuma 3,8:1. */ .pub-booking-panel a:not(.btn) { color: var(--g-brand-ink); font-weight: 700; text-decoration: none; } .pub-booking-panel a:not(.btn):hover { text-decoration: underline; } .pub-wizard-step { display: none; } .pub-wizard-step.active { display: block; } .pub-facility-pick { border: 2px solid var(--g-ink-200); border-radius: var(--g-radius-md); padding: 14px; cursor: pointer; transition: border-color .15s ease, background .15s ease; } .pub-facility-pick:hover { border-color: var(--g-primary-500); } .pub-facility-pick.is-selected { border-color: var(--g-primary-500); background: var(--g-primary-50); } /* Aturan .pub-slot-btn lama dihapus dari sini — versinya ada di blok "HALAMAN BOOKING" di atas. Yang lama memakai `color: #fff !important` di atas teal-500, cuma 2,49:1, dan `!important`-nya menang atas versi baru. */ /* Fasilitas: kartu list dengan foto */ .pub-facility-card { border: 2px solid var(--g-ink-200); border-radius: var(--g-radius-md); overflow: hidden; cursor: pointer; transition: border-color .15s ease, transform .15s ease; background: var(--g-surface); } .pub-facility-card:hover { transform: translateY(-3px); } .pub-facility-card.is-selected { border-color: var(--g-primary-500); box-shadow: 0 0 0 3px rgb(20 184 166 / .15); } .pub-facility-card img, .pub-facility-card .pub-ph { width: 100%; height: 130px; object-fit: cover; } /* Status ketersediaan eksplisit (bukan hanya badge warna) — ikon + teks, supaya tetap terbaca tanpa mengandalkan warna saja. */ .pub-facility-card__status { margin-top: 8px; font-size: 12px; font-weight: 700; display: flex; align-items: center; gap: 6px; } .pub-facility-card__status.is-open { color: var(--g-success-ink); } .pub-facility-card__status.is-full { color: var(--g-ink-600); } .pub-facility-card .body { padding: 12px 14px; } .pub-facility-card .avail-badge { font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 999px; } .avail-badge.avail-yes { background: var(--g-success-bg); color: var(--g-success-ink); } .avail-badge.avail-no { background: var(--g-danger-bg); color: var(--g-danger-ink); } /* View toggle (List / Denah) */ .pub-view-toggle .btn { font-weight: 700; border-radius: 999px !important; } /* Tinta gelap, bukan putih — putih di atas teal-500 cuma 2,49:1. */ .pub-view-toggle .btn.active { background: var(--g-primary-500); color: #04302B; border-color: var(--g-primary-500); } /* Denah publik (reuse visual language dari admin, versi ringan) */ .pub-floorplan-tabs { display: flex; gap: 8px; margin-bottom: 14px; flex-wrap: wrap; } .pub-floorplan-tab { padding: 7px 16px; border-radius: 999px; font-weight: 700; font-size: 13px; background: var(--g-surface); border: 1.5px solid var(--g-ink-300); color: var(--g-ink-700); cursor: pointer; } .pub-floorplan-tab.active { background: var(--g-primary-500); border-color: var(--g-primary-500); color: #fff; } .pub-floorplan-canvas { position: relative; background: linear-gradient(var(--g-ink-200) 1px, transparent 1px), linear-gradient(90deg, var(--g-ink-200) 1px, transparent 1px); background-size: 24px 24px; background-color: var(--g-surface-2); border-radius: var(--g-radius-lg); border: 1px solid var(--g-ink-200); overflow: auto; min-height: 380px; } .pub-floorplan-unit { position: absolute; display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 2px; border-radius: 8px; color: #fff; font-size: 11px; font-weight: 700; cursor: pointer; box-shadow: 0 2px 8px rgb(15 23 42 / .15); border: 2px solid rgb(255 255 255 / .6); padding: 4px; text-align: center; user-select: none; transition: transform .12s ease; } .pub-floorplan-unit:hover { transform: scale(1.04); } .pub-floorplan-unit.shape-circle { border-radius: 50%; } .pub-floorplan-unit.avail-yes { background: var(--g-primary-500); } .pub-floorplan-unit.avail-no { background: #94A3B8; } .pub-floorplan-unit.is-selected { outline: 3px solid var(--g-accent-500); outline-offset: 2px; } .pub-floorplan-legend { display: flex; gap: 16px; flex-wrap: wrap; margin-top: 12px; font-size: 12px; color: var(--g-ink-600); } .pub-floorplan-legend__dot { width: 10px; height: 10px; border-radius: 3px; display: inline-block; margin-right: 4px; } /* ---- Receipt -------------------------------------------------------------*/ /* Pembungkus halaman receipt. Kartunya sendiri sekarang .pub-booking-panel (isinya dipecah jadi beberapa panel: ringkasan, pembayaran, e-ticket), jadi di sini tinggal mengatur lebar bacanya. */ .pub-receipt { max-width: 560px; margin: 0 auto; } .status-pill { display: inline-block; padding: 4px 14px; border-radius: 999px; font-weight: 700; font-size: 13px; } .status-pill.pending { background: var(--g-warn-bg); color: var(--g-warn-ink); } /* Hijau terangnya dulu ditulis tetap (#DCFCE7/#166534) sehingga di tema gelap jadi bidang terang yang menyala sendirian — sekarang ikut token status. */ .status-pill.confirmed { background: var(--g-success-bg); color: var(--g-success-ink); } /* ---- Membership: status & paket langganan -------------------------------*/ /* Banner status member (halaman Akun > Membership). Aktif = gradien brand, belum member = kartu netral. Dibuat sebagai kartu flex yang melipat rapi di layar sempit. */ .pub-member-banner { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; background: var(--g-surface); border: 1px solid var(--g-card-border); border-radius: var(--g-radius-md); padding: 18px 20px; box-shadow: var(--g-shadow-sm); } .pub-member-banner--active { background: linear-gradient(120deg, var(--g-primary-700), var(--g-primary-500)); border-color: transparent; color: var(--g-on-brand); } .pub-member-banner--active .pub-member-banner__body { color: var(--g-on-brand); } .pub-member-banner--active .pub-member-banner__eyebrow, .pub-member-banner--active .pub-member-banner__meta { color: rgb(255 255 255 / .82); } .pub-member-banner__icon { width: 52px; height: 52px; border-radius: 14px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-size: 22px; background: var(--g-primary-100); color: var(--g-brand-ink); } .pub-member-banner--active .pub-member-banner__icon { background: rgb(255 255 255 / .18); color: #fff; } .pub-member-banner__body { flex: 1; min-width: 200px; } .pub-member-banner__eyebrow { font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--g-ink-600); } .pub-member-banner__title { margin: 2px 0 4px; font-size: 19px; font-weight: 800; } .pub-member-banner__meta { font-size: 13.5px; color: var(--g-ink-600); } .pub-member-banner__days { display: inline-block; margin-left: 6px; padding: 2px 10px; border-radius: 999px; background: rgb(255 255 255 / .2); font-weight: 800; } .pub-member-banner--active .btn-gelora-outline { background: rgb(255 255 255 / .14) !important; border-color: rgb(255 255 255 / .45) !important; color: #fff !important; } .pub-member-banner--active .btn-gelora-outline:hover { background: rgb(255 255 255 / .26) !important; } /* Strip saldo di atas daftar paket */ .pub-wallet-strip { margin-top: 24px; padding: 14px 18px; background: var(--g-surface); border: 1px dashed var(--g-ink-300); border-radius: var(--g-radius-sm); } .pub-wallet-strip__balance { font-size: 22px; font-weight: 800; font-variant-numeric: tabular-nums; color: var(--g-brand-ink); } /* Kartu paket langganan */ .pub-plan-card { position: relative; display: flex; flex-direction: column; height: 100%; background: var(--g-surface); border: 1px solid var(--g-card-border); border-radius: var(--g-radius-md); padding: 22px 20px; box-shadow: var(--g-shadow-sm); transition: transform .2s var(--g-ease), box-shadow .2s var(--g-ease), border-color .2s ease; } .pub-plan-card:hover { transform: translateY(-4px); box-shadow: var(--g-shadow); } .pub-plan-card.is-current { border-color: var(--g-primary-500); box-shadow: 0 0 0 3px var(--g-primary-100), var(--g-shadow); } .pub-plan-card.is-sold-out { opacity: .72; } .pub-plan-card__flag { position: absolute; top: -11px; right: 16px; padding: 4px 12px; border-radius: 999px; background: var(--g-accent-500); color: #2B1A02; font-size: 11.5px; font-weight: 800; letter-spacing: .03em; box-shadow: var(--g-shadow-sm); } .pub-plan-card__flag--muted { background: var(--g-ink-300); color: var(--g-ink-700); } .pub-plan-card__head { display: flex; align-items: center; justify-content: space-between; gap: 8px; } .pub-plan-card__name { margin: 0; font-size: 18px; font-weight: 800; } .pub-plan-card__discount { padding: 3px 10px; border-radius: 999px; background: var(--g-success-bg); color: var(--g-success-ink); font-size: 12px; font-weight: 800; } .pub-plan-card__price { margin: 10px 0 4px; display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; } .pub-plan-card__price .amount { font-size: 26px; font-weight: 800; font-variant-numeric: tabular-nums; } .pub-plan-card__price .period { font-size: 13px; color: var(--g-ink-600); font-weight: 600; } .pub-plan-card__list { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; flex: 1; } .pub-plan-card__list li { display: flex; gap: 9px; font-size: 13.5px; color: var(--g-ink-700); line-height: 1.45; } .pub-plan-card__list i { flex-shrink: 0; margin-top: 3px; width: 15px; text-align: center; color: var(--g-primary-500); font-size: 12px; } .pub-plan-card .btn { min-height: 44px; } /* Fitur yang terkunci di tier dasar (mis. Reguler): booking beberapa tanggal. Ditampilkan sebagai baris kunci, bukan hilang dari layar, supaya keuntungan paket di atasnya tetap terlihat dan bisa mendorong upgrade. */ .pub-plan-card__list li.is-locked { color: var(--g-ink-600); } .pub-plan-card__list li.is-locked i { color: var(--g-ink-300); } .pub-plan-card__list li.is-locked span { text-decoration: line-through; text-decoration-color: rgb(148 163 184 / .55); } .pub-plan-card__list li.is-unlocked i { color: var(--g-accent-500); } /* Kartu ajakan di halaman booking untuk member tier dasar yang belum punya hak booking beberapa tanggal. */ .pub-lock-card { display: flex; gap: 14px; align-items: flex-start; background: linear-gradient(135deg, rgb(241 245 249 / .85), rgb(226 232 240 / .85)); border: 1px dashed var(--g-ink-300); border-radius: var(--g-radius-lg); padding: 16px 18px; } .pub-lock-card__icon { width: 42px; height: 42px; border-radius: 12px; flex-shrink: 0; display: grid; place-items: center; background: var(--g-ink-200); color: var(--g-ink-600); } @media (max-width: 575px) { .pub-plan-card__price .amount { font-size: 23px; } } /* ========================================================================== HALAMAN AKUN PELANGGAN — kepadatan kartu -------------------------------------------------------------------------- Dua masalah tata letak yang terlihat jelas begitu datanya sedikit: 1. Kartu "Voucher Aktif" memakai .h-100 supaya tingginya sama dengan kartu Membership dan Wallet di sebelahnya. Kalau isinya cuma satu kalimat ("Belum ada voucher aktif"), kalimat itu menempel di atas dan menyisakan rongga putih setinggi 250px di bawahnya. Isi kartu sekarang diregangkan sebagai kolom flex, dan keadaan kosongnya ditaruh di tengah — rongganya jadi terbaca sebagai ruang yang disengaja, bukan sebagai kartu rusak. 2. Tiap baris riwayat booking menumpuk lencana status DI ATAS tombol "Lihat Receipt", jadi satu baris berisi tiga baris teks tumbuh setinggi ~130px. Di layar lebar keduanya sekarang berdampingan. ========================================================================== */ .pub-booking-panel.h-100 { display: flex; flex-direction: column; } .pub-booking-panel.h-100 > :last-child { margin-bottom: 0; } /* Keadaan kosong di dalam kartu setinggi penuh. */ .pub-panel-empty { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; text-align: center; padding: 18px 8px; color: var(--g-ink-600); } .pub-panel-empty i { font-size: 26px; color: var(--g-ink-300); } .pub-panel-empty p { margin: 0; font-size: 13.5px; max-width: 26ch; } /* ---- Baris riwayat booking --------------------------------------------- */ .pub-booking-row { padding: 16px 18px; } .pub-booking-row__body { min-width: 0; } .pub-booking-row__side { display: flex; align-items: center; gap: 10px; flex-shrink: 0; } @media (max-width: 575.98px) { .pub-booking-row__side { width: 100%; justify-content: space-between; } }