:root{ --bg:#F1F3EE; /* misty cool off-white */ --bg-2:#E7EBE3; /* deeper stone (alt sections) */ --ink:#1B2620; /* green-charcoal text */ --ink-soft:#54605A; /* muted body */ --line:#D5DAD0; /* hairlines on light */ --teal:#143A31; /* deep tropical teal-green */ --teal-deep:#0E2A23; --sage:#7C9184; --gold:#B08D4C; /* brass — garis, ikon, aksen dekoratif */ --gold-ink:#806632; /* brass gelap — HANYA untuk teks di latar terang. #B08D4C cuma 2.57:1 terhadap --bg-2, gagal WCAG AA. Yang ini 4.86:1 di --bg dan 4.50:1 di --bg-2. */ --gold-lt:#CBAE72; --cream:#F3EFE6; /* text on dark */ --cream-soft:#C9C6B8; --aqua:#9FC6BE; --olive:#5d7440; --hero-cream:#EFEEE5; --serif:'Cormorant Garamond',Georgia,serif; --display2:'Fraunces',Georgia,serif; --sans:'Jost',system-ui,-apple-system,sans-serif; --pad: clamp(1.25rem, 5vw, 4.5rem); --sec: clamp(4.5rem, 9vw, 8rem); --maxw: 1220px; } *{box-sizing:border-box;margin:0;padding:0} html{scroll-behavior:smooth} body{ font-family:var(--sans); background:var(--bg); color:var(--ink); font-weight:300; line-height:1.65; -webkit-font-smoothing:antialiased; overflow-x:hidden; } img{max-width:100%;display:block} a{color:inherit;text-decoration:none} ::selection{background:var(--gold);color:var(--cream)} .wrap{max-width:var(--maxw);margin:0 auto;padding-inline:var(--pad)} /* ---------- shared type ---------- */ .eyebrow{ font-family:var(--sans); font-size:.7rem; font-weight:400; letter-spacing:.34em; text-transform:uppercase; color:var(--gold); display:inline-flex; align-items:center; gap:.85rem; } .eyebrow::before{ content:"";width:26px;height:1px;background:var(--gold);opacity:.7; } .eyebrow.center{justify-content:center} h1,h2,h3{font-family:var(--serif);font-weight:400;line-height:1.06;letter-spacing:.005em} .lead{font-size:1.06rem;color:var(--ink-soft);max-width:44ch;font-weight:300} /* ---------- buttons ---------- */ .btn{ font-family:var(--sans);font-size:.74rem;letter-spacing:.22em;text-transform:uppercase; font-weight:400;display:inline-flex;align-items:center;gap:.6rem;cursor:pointer; padding:.95rem 1.7rem;border-radius:2px;border:1px solid transparent; transition:background .35s ease,color .35s ease,border-color .35s ease,transform .35s ease; background:none; } .btn--gold{background:var(--gold);color:var(--cream)} .btn--gold:hover{background:var(--teal);color:var(--cream)} .btn--outline{border-color:var(--ink);color:var(--ink)} .btn--outline:hover{background:var(--ink);color:var(--bg)} .btn--ghost-lt{border-color:rgba(243,239,230,.5);color:var(--cream)} .btn--ghost-lt:hover{background:var(--cream);color:var(--teal);border-color:var(--cream)} .arrow-link{ font-family:var(--sans);font-size:.74rem;letter-spacing:.2em;text-transform:uppercase; color:var(--gold);display:inline-flex;align-items:center;gap:.6rem;transition:gap .3s ease; } .arrow-link:hover{gap:1rem} .arrow-link .ln{width:24px;height:1px;background:currentColor;display:inline-block} /* ---------- header ---------- */ header{ position:fixed;top:0;left:0;right:0;z-index:60; padding:1.5rem 0; transition:background .4s ease,padding .4s ease,box-shadow .4s ease; } header .bar{display:flex;align-items:center;justify-content:space-between;gap:2rem} /* Wordmark kini PNG, bukan teks — dirender dari font yang sama supaya tampilannya identik, tapi tidak lagi bergantung pada Google Fonts selesai memuat. Tinggi dikunci, lebar mengikuti rasio. */ .brand{display:flex;align-items:center;line-height:1;color:var(--ink);transition:opacity .4s ease} .brand img{height:42px;width:auto;display:block} .brand:hover{opacity:.72} .f-brand .f-logo{height:50px;width:auto;display:block;margin-bottom:1.15rem} @media(max-width:560px){.brand img{height:34px}} .brand .name{font-family:var(--serif);font-size:1.55rem;font-weight:500;letter-spacing:.02em} .brand .sub{font-family:var(--sans);font-size:.56rem;letter-spacing:.42em;text-transform:uppercase;margin-top:.4rem;opacity:.85} nav.main{display:flex;align-items:center;gap:2.2rem} nav.main a{ font-family:var(--sans);font-size:.76rem;letter-spacing:.18em;text-transform:uppercase; font-weight:400;color:var(--ink);opacity:.82;position:relative;padding:.2rem 0;transition:opacity .3s ease; } nav.main a::after{content:"";position:absolute;left:0;bottom:-3px;height:1px;width:0;background:var(--gold);transition:width .3s ease} nav.main a:hover{opacity:1} nav.main a:hover::after{width:100%} .nav-cta{display:flex;align-items:center;gap:1.4rem} /* scrolled state */ header.scrolled{background:var(--bg);padding:1rem 0;box-shadow:0 1px 0 var(--line)} header.scrolled .brand{color:var(--ink)} header.scrolled nav.main a{color:var(--ink)} header.scrolled .btn--book{background:var(--olive);color:var(--cream);border-color:transparent} header.scrolled .btn--book:hover{background:var(--teal);color:var(--cream)} header.scrolled .hamburger span{background:var(--ink)} .btn--book{background:var(--olive);color:var(--cream);border:1px solid transparent;border-radius:999px} .btn--book:hover{background:var(--teal);color:var(--cream)} /* hamburger */ .hamburger{display:none;flex-direction:column;gap:5px;background:none;border:0;cursor:pointer;padding:6px} .hamburger span{display:block;width:26px;height:1.5px;background:var(--ink);transition:transform .35s ease,opacity .3s ease,background .4s ease} .hamburger.open span:nth-child(1){transform:translateY(6.5px) rotate(45deg)} .hamburger.open span:nth-child(2){opacity:0} .hamburger.open span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)} /* mobile panel */ .mobile-menu{ position:fixed;inset:0 0 0 0;background:var(--teal);z-index:55; display:flex;flex-direction:column;justify-content:center;gap:.4rem;padding:var(--pad); transform:translateY(-100%);transition:transform .5s cubic-bezier(.7,0,.2,1); } .mobile-menu.open{transform:translateY(0)} .mobile-menu a{ font-family:var(--serif);font-size:2.4rem;color:var(--cream);font-weight:400; padding:.5rem 0;border-bottom:1px solid rgba(243,239,230,.12); } .mobile-menu a .idx{font-family:var(--sans);font-size:.7rem;letter-spacing:.2em;color:var(--gold);margin-right:1rem;vertical-align:middle} .mobile-menu .mm-book{margin-top:2rem;align-self:flex-start} /* ---------- hero (video full-bleed) ---------- Video mengisi seluruh section edge-to-edge setinggi layar; header melayang di atasnya. Teks di tengah dengan scrim gelap tipis. */ .hero{position:relative;background:var(--hero-cream);padding-top:clamp(7rem,13vh,9.5rem);padding-bottom:clamp(3rem,6vw,5rem);overflow:hidden} .hero .wrap{position:relative;z-index:2} .hero-title{font-family:var(--display2);text-align:center;text-transform:uppercase;font-weight:500;color:var(--ink);line-height:.96;letter-spacing:-.005em;font-size:clamp(2.5rem,8.6vw,6.6rem);margin:0 auto clamp(1.4rem,3vw,2.4rem);max-width:16ch} .hero--full{ min-height:100vh;min-height:100svh; /* svh: tidak melonjak saat bar URL mobile muncul/hilang */ padding:0;background:var(--teal-deep); display:flex;align-items:center;justify-content:center;text-align:center; } .hero--full .hero-bg{ position:absolute;inset:0;width:100%;height:100%; object-fit:cover;object-position:center;z-index:0; } /* Scrim: gelap di atas (agar header terbaca) dan bawah, sedang di tengah (agar judul putih terbaca) — video daylight cukup terang. */ .hero--full .hero-scrim{ position:absolute;inset:0;z-index:1;pointer-events:none; background:linear-gradient(180deg, rgba(14,42,35,.58) 0%, rgba(14,42,35,.30) 26%, rgba(14,42,35,.32) 60%, rgba(14,42,35,.66) 100%); } .hero--full .hero-inner{position:relative;z-index:2} .hero--full .hero-kicker{color:var(--gold-lt)} .hero--full .hero-title{color:var(--cream);text-shadow:0 2px 24px rgba(12,32,26,.4)} .hero--full .hero-sub{color:rgba(243,239,230,.92);max-width:46ch} /* Indikator gulir kecil di bawah hero. */ .hero-scroll{position:absolute;left:50%;bottom:clamp(1.4rem,4vh,2.6rem);transform:translateX(-50%); z-index:2;width:26px;height:42px;border:1.5px solid rgba(243,239,230,.6);border-radius:999px; display:grid;place-items:start center;padding-top:8px} .hero-scroll span{width:3px;height:8px;border-radius:2px;background:var(--cream); animation:heroScroll 1.8s ease-in-out infinite} @keyframes heroScroll{0%{opacity:0;transform:translateY(-3px)}40%{opacity:1}80%{opacity:0;transform:translateY(9px)}100%{opacity:0}} @media(max-width:560px){.hero-scroll{display:none}} /* Header melayang TERANG di atas video hero (khusus beranda, belum discroll). Begitu discroll, .scrolled mengembalikannya ke krem + teks gelap seperti halaman lain. Wordmark ikut ditukar gelap<->terang. */ .brand .wm-light{display:none} body.page-index header:not(.scrolled) .brand .wm-dark{display:none} body.page-index header:not(.scrolled) .brand .wm-light{display:block} body.page-index header:not(.scrolled) nav.main a{color:var(--cream);opacity:.92} body.page-index header:not(.scrolled) nav.main a:hover{opacity:1} body.page-index header:not(.scrolled) .hamburger span{background:var(--cream)} /* Beranda: video hero tak punya padding bawah, jadi pita search form perlu jarak atas sendiri. Halaman lain mengambil jarak dari page-head di atasnya. */ body.page-index .searchband{padding-top:clamp(2rem,4vw,3rem)} /* ---------- sanctuary (cinematic) ---------- */ .sanctuary{position:relative;overflow:hidden;color:var(--cream);padding-block:clamp(4.5rem,10vw,8rem);background-position:center;background-size:cover;background-repeat:no-repeat} .sanctuary .s-scrim{position:absolute;inset:0;z-index:0;background: linear-gradient(180deg,rgba(10,32,27,.80),rgba(10,32,27,.60) 45%,rgba(10,32,27,.88)), linear-gradient(105deg,rgba(20,58,49,.55),rgba(20,58,49,.10))} .sanctuary .s-grain{position:absolute;inset:0;z-index:1;opacity:.5;mix-blend-mode:overlay;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.4'/%3E%3C/svg%3E")} .sanctuary .s-inner{position:relative;z-index:2} .sanctuary .eyebrow{color:var(--gold-lt)} .sanctuary h2{font-size:clamp(2.3rem,5vw,3.9rem);margin:1.1rem 0 1.3rem;max-width:16ch;color:var(--cream)} .sanctuary h2 .amp{color:var(--gold-lt);font-style:italic} .sanctuary .s-lead{max-width:56ch;font-size:1.08rem;color:rgba(243,239,230,.85);font-weight:300;margin-bottom:clamp(2.5rem,5vw,3.5rem)} .sanctuary .s-stats{display:grid;grid-template-columns:repeat(5,1fr);gap:1.1rem;align-items:stretch} .sanctuary .s-stat{padding:1.6rem 1.4rem;border-top:1px solid rgba(203,174,114,.4)} .sanctuary .s-stat .n{font-family:var(--serif);font-size:clamp(2.6rem,5vw,3.7rem);line-height:1;color:var(--cream)} .sanctuary .s-stat .n span{font-family:var(--sans);font-size:.9rem;font-weight:300;letter-spacing:.08em;margin-left:.35rem;color:var(--gold-lt)} .sanctuary .s-stat .l{font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;color:rgba(243,239,230,.7);margin-top:.9rem} .sanctuary .s-stat.box{background:var(--gold);border-top:0;border-radius:12px} .sanctuary .s-stat.box .n{color:var(--teal-deep)} .sanctuary .s-stat.box .n span{color:rgba(14,42,35,.65)} .sanctuary .s-stat.box .l{color:rgba(14,42,35,.7)} @media(max-width:980px){.sanctuary .s-stats{grid-template-columns:repeat(3,1fr)}} @media(max-width:560px){.sanctuary .s-stats{grid-template-columns:repeat(2,1fr)}} /* photo placeholder system (swap with real photos) */ .ph{position:relative;overflow:hidden;border-radius:3px;background:var(--sage)} .ph::after{content:"";position:absolute;inset:0;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");opacity:.13;mix-blend-mode:overlay;pointer-events:none} .ph--garden{background:radial-gradient(120% 100% at 70% 20%,#8fae8f,transparent 60%),linear-gradient(150deg,#5f7d5f,#324a34)} .ph--pool{background:radial-gradient(120% 100% at 30% 15%,rgba(159,198,190,.7),transparent 55%),linear-gradient(160deg,#2c6a5e,#0f2f28)} .ph--room{background:radial-gradient(120% 100% at 75% 20%,rgba(203,174,114,.55),transparent 60%),linear-gradient(155deg,#9a8f7c,#54473a)} .ph--villa{background:radial-gradient(120% 100% at 25% 20%,rgba(203,174,114,.45),transparent 55%),linear-gradient(150deg,#3a6a5c,#123027)} .ph--dining{background:radial-gradient(130% 110% at 80% 15%,rgba(214,164,92,.5),transparent 55%),linear-gradient(150deg,#2a453d,#0e211c)} .ph--spa{background:radial-gradient(120% 100% at 25% 20%,rgba(159,198,190,.55),transparent 55%),linear-gradient(155deg,#8ca79b,#4a655b)} .ph .cap{position:absolute;left:1.2rem;bottom:1.1rem;z-index:2;font-size:.58rem;letter-spacing:.24em;text-transform:uppercase;color:rgba(243,239,230,.8)} /* ---------- rooms (listing cards) ---------- */ .villas{padding-block:var(--sec);background:var(--bg-2)} .sec-head{display:flex;justify-content:space-between;align-items:flex-end;gap:2rem;flex-wrap:wrap;margin-bottom:clamp(2.5rem,5vw,4rem)} .sec-head h2{font-size:clamp(2.2rem,4.6vw,3.6rem);margin-top:1rem} .cards{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1.2rem,2.5vw,1.8rem)} /* Empat kartu: 2x2, bukan 3+1 yatim. Lebar dibatasi agar tiap kartu tetap sebesar kartu di grid 3 kolom. Di <=880px keduanya jatuh ke 1 kolom. */ .cards--four{grid-template-columns:repeat(2,1fr);max-width:920px;margin-inline:auto} /* Lima kartu (Standard + Deluxe + Executive + dua villa). Flexbox rata tengah, jadi baris kedua yang cuma dua kartu tetap di tengah, bukan menggantung ke kiri. Lebar minimum 280px membuat kartu turun ke dua lalu satu kolom sendiri saat layar menyempit. */ .cards--flow{display:flex;flex-wrap:wrap;justify-content:center} .cards--flow > .card{flex:0 1 clamp(280px,30%,360px)} .card{position:relative;overflow:hidden;border-radius:16px;aspect-ratio:4/5;display:flex;flex-direction:column;justify-content:flex-end;background-size:cover;background-position:center;background-repeat:no-repeat;transition:transform .5s cubic-bezier(.2,.7,.2,1),box-shadow .5s ease;box-shadow:0 18px 44px -30px rgba(20,58,49,.55)} .card:hover{transform:translateY(-8px);box-shadow:0 30px 58px -30px rgba(20,58,49,.5)} .card .c-scrim{position:absolute;inset:0;z-index:1;background:linear-gradient(to top,rgba(12,32,26,.95) 0%,rgba(12,32,26,.78) 20%,rgba(12,32,26,.2) 46%,transparent 66%)} .card .badge{position:absolute;top:15px;left:15px;z-index:3;display:inline-flex;align-items:center;gap:.4rem;background:var(--cream);color:var(--ink);font-family:var(--sans);font-size:.72rem;font-weight:400;padding:.5rem .9rem;border-radius:999px;box-shadow:0 4px 16px rgba(0,0,0,.2)} .card .badge .st{color:var(--gold);font-size:.82rem;line-height:1} .card .c-content{position:relative;z-index:2;padding:clamp(1.15rem,1.8vw,1.5rem);color:var(--cream)} .card .c-row{display:flex;justify-content:space-between;align-items:flex-end;gap:.8rem} /* Harga tidak lagi dicetak di kartu (lihat data/rooms.php), jadi nama kamar naik mengambil alih bobot visual yang dulu dipegang baris harga. Tanpa pembesaran ini sudut kiri-bawah kartu jadi ringan sebelah terhadap .c-stats di kanan, yang ukurannya tidak berubah. */ .card .c-name{font-family:var(--serif);font-size:clamp(1.3rem,1.7vw,1.5rem);color:var(--cream);line-height:1.15} .card .c-name small{display:block;font-family:var(--sans);font-size:.78rem;font-weight:300;color:rgba(243,239,230,.62);margin-top:.15rem} .card .c-stats{display:flex;align-items:flex-end;gap:.9rem;flex-shrink:0} .card .c-stat .sv{display:flex;align-items:center;gap:.35rem;font-family:var(--sans);font-weight:500;font-size:1.02rem;white-space:nowrap} .card .c-stat .sv svg{width:16px;height:16px;color:rgba(243,239,230,.72)} .card .c-stat .sl{font-size:.6rem;letter-spacing:.13em;text-transform:uppercase;color:rgba(243,239,230,.6);margin-top:.25rem} .card .c-vline{width:1px;align-self:stretch;background:rgba(243,239,230,.22)} .card .c-divider{height:1px;background:rgba(243,239,230,.2);margin:.95rem 0 .8rem} .card .c-foot{display:flex;align-items:center;gap:.45rem;font-family:var(--sans);font-size:.8rem;color:rgba(243,239,230,.66)} .card .c-foot .st{color:var(--gold)} .card .c-foot b{color:var(--cream);font-weight:500} /* ---------- feature bands ---------- */ .feature{display:grid;grid-template-columns:1fr 1fr;align-items:stretch;min-height:min(88vh,720px)} .feature .ph{border-radius:0} .feature .f-text{display:flex;flex-direction:column;justify-content:center;padding:clamp(2.5rem,6vw,6rem)} .feature.dark{background:var(--teal);color:var(--cream)} .feature.dark .f-text h2{color:var(--cream)} .feature.dark .lead{color:rgba(243,239,230,.8)} .feature.light{background:var(--bg)} .feature h2{font-size:clamp(2.2rem,4.4vw,3.4rem);margin:1.1rem 0 1.4rem} .feature .lead{margin-bottom:2rem;max-width:40ch} .feature .rev-order{order:-1} /* image first on desktop */ .feature.dark .arrow-link{color:var(--gold-lt)} /* ---------- amenities strip (beranda) ---------- Dulu kelasnya .amen dan itu BENTROK: .amen dipakai lagi di baris ~583 untuk satu butir amenity di halaman kamar, dengan padding-top:1rem. Aturan yang belakangan menang, jadi strip beranda kehilangan padding atasnya sementara padding bawahnya tetap — timpang, dan itu yang terlihat aneh. Namanya kini .amen-strip, tidak lagi beririsan. Titik bulat kecil diganti ikon, mengikuti .facility di halaman Rooms supaya bahasa visualnya sama di seluruh situs. Delapan butir dalam grid 4 kolom: dua baris penuh, tanpa butir yatim di baris terakhir. */ .amen-strip{padding-block:clamp(2.6rem,5vw,3.6rem); border-top:1px solid var(--line);border-bottom:1px solid var(--line)} .amen-strip ul{list-style:none;display:grid;grid-template-columns:repeat(4,1fr); gap:clamp(1.6rem,3vw,2.4rem) clamp(1rem,2vw,1.6rem)} .amen-strip li{display:flex;flex-direction:column;align-items:center;text-align:center;gap:.7rem} .amen-strip svg{width:26px;height:26px;color:var(--gold);flex:none} .amen-strip span{font-size:.7rem;letter-spacing:.16em;text-transform:uppercase; color:var(--ink-soft);line-height:1.45} @media(max-width:820px){ .amen-strip ul{grid-template-columns:repeat(2,1fr)} } /* ---------- gallery ---------- */ .gallery{padding-block:var(--sec)} .g-grid{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:190px;gap:clamp(.6rem,1.4vw,1rem);margin-top:clamp(2rem,4vw,3rem)} .g-grid .ph{border-radius:11px} .g-grid .g1{grid-column:span 2;grid-row:span 2} .g-grid .g4{grid-column:span 2} .g-grid .g6{grid-row:span 2} /* ---------- quote ---------- */ .quote{padding-block:var(--sec);background:var(--teal);color:var(--cream);text-align:center} .quote .mark{font-family:var(--serif);font-size:5rem;color:var(--gold);line-height:.5;opacity:.8} .quote blockquote{font-family:var(--serif);font-size:clamp(1.7rem,3.6vw,2.9rem);font-weight:300;font-style:italic;line-height:1.3;max-width:20ch;margin:1.5rem auto 2rem} .quote .by{font-size:.72rem;letter-spacing:.24em;text-transform:uppercase;color:var(--cream-soft)} .quote .by b{color:var(--gold-lt);font-weight:400} /* ---------- reviews (tamu asli) ---------- */ .reviews{padding-block:var(--sec);background:var(--teal);color:var(--cream)} .reviews .sec-head.center{justify-content:center;text-align:center} .reviews .sec-head h2{color:var(--cream);margin-top:.6rem} .review-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1.2rem,2.5vw,1.8rem)} .review-card{ background:rgba(243,239,230,.055); border:1px solid rgba(243,239,230,.14); border-radius:16px; padding:clamp(1.5rem,2.4vw,2.1rem); display:flex;flex-direction:column;gap:1rem; transition:transform .5s cubic-bezier(.2,.7,.2,1),box-shadow .5s ease; } .review-card:hover{transform:translateY(-6px);box-shadow:0 24px 44px -28px rgba(0,0,0,.55)} .review-stars{color:var(--gold-lt);font-size:.82rem;letter-spacing:3px;line-height:1} .review-card blockquote{ font-family:var(--serif);font-size:clamp(1.12rem,1.7vw,1.4rem); font-weight:300;font-style:italic;line-height:1.42;color:var(--cream); } .review-card figcaption{ font-size:.72rem;letter-spacing:.2em;text-transform:uppercase; color:var(--cream-soft);margin-top:auto; } .review-card .rv-meta{ display:block;margin-top:.45rem;font-size:.64rem;letter-spacing:.14em; color:rgba(201,198,184,.55); } @media(max-width:860px){ .review-grid{grid-template-columns:1fr;max-width:480px;margin-inline:auto} } /* ---------- cta ---------- */ .cta{position:relative;overflow:hidden;color:var(--cream);text-align:center;padding-block:clamp(5rem,10vw,9rem)} .cta .ph{position:absolute;inset:0;border-radius:0;z-index:0} .cta .ph::before{content:"";position:absolute;inset:0;background:rgba(14,42,35,.5);z-index:1} .cta .inner{position:relative;z-index:2} .cta h2{font-size:clamp(2.6rem,6vw,5rem);margin:1.3rem 0 1.2rem;font-weight:400} .cta p{max-width:38ch;margin:0 auto 2.4rem;color:rgba(243,239,230,.85)} /* ---------- footer ---------- */ footer{background:var(--teal-deep);color:var(--cream-soft);padding-block:clamp(3.5rem,6vw,5rem) 2rem} .f-top{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.2fr;gap:2.5rem} .f-brand .name{font-family:var(--serif);font-size:1.8rem;color:var(--cream);font-weight:500} .f-brand .sub{font-size:.56rem;letter-spacing:.4em;text-transform:uppercase;margin-top:.5rem;color:var(--gold-lt)} .f-brand p{margin-top:1.3rem;max-width:30ch;font-size:.9rem;line-height:1.7} .f-col h4{font-family:var(--sans);font-size:.66rem;letter-spacing:.24em;text-transform:uppercase;color:var(--cream);font-weight:400;margin-bottom:1.3rem} .f-col a,.f-col p{display:block;font-size:.9rem;margin-bottom:.7rem;color:var(--cream-soft);transition:color .3s ease} .f-col a:hover{color:var(--gold-lt)} .f-news{display:flex;border-bottom:1px solid rgba(243,239,230,.25);padding-bottom:.5rem;margin-top:.4rem} .f-news input{flex:1;background:none;border:0;color:var(--cream);font-family:var(--sans);font-size:.9rem;padding:.3rem 0} .f-news input::placeholder{color:rgba(201,198,184,.6)} .f-news input:focus{outline:none} .f-news button{background:none;border:0;color:var(--gold-lt);cursor:pointer;font-size:1.2rem;padding:0 .3rem} .f-bottom{margin-top:clamp(3rem,5vw,4rem);padding-top:1.6rem;border-top:1px solid rgba(243,239,230,.12);display:flex;justify-content:space-between;align-items:center;gap:1rem;flex-wrap:wrap;font-size:.76rem;letter-spacing:.1em} .f-bottom .ig{display:inline-flex;align-items:center;gap:.6rem;color:var(--cream);text-transform:uppercase;letter-spacing:.18em;font-size:.7rem} .f-bottom .ig svg{width:16px;height:16px} /* ---------- reveal animation ---------- */ .reveal{opacity:0;transform:translateY(26px);transition:opacity .9s ease,transform .9s cubic-bezier(.2,.7,.2,1)} .reveal.in{opacity:1;transform:none} /* ---------- responsive ---------- */ @media(max-width:980px){ .f-top{grid-template-columns:1fr 1fr} .g-grid{grid-template-columns:repeat(2,1fr)} } @media(max-width:880px){ nav.main,.nav-cta .btn--book{display:none} .hamburger{display:flex} .story .grid{grid-template-columns:1fr} .story .ph{aspect-ratio:16/10;order:-1} .cards{grid-template-columns:1fr;max-width:420px;margin-inline:auto} .card .desc{min-height:0} .feature{grid-template-columns:1fr} .feature .ph{min-height:52vh} .feature .rev-order{order:0} } @media(max-width:720px){ .booking{grid-template-columns:1fr 1fr;max-width:460px} .booking .field:nth-child(3){grid-column:span 2} .booking .go{grid-column:span 2;margin:.9rem} .g-grid .g1{grid-column:span 2;grid-row:span 1} .g-grid .g4{grid-column:span 2} .story .meta{gap:2rem} } @media(max-width:460px){ .booking{grid-template-columns:1fr} .booking .field{grid-column:span 1 !important} .booking .field:nth-child(3){grid-column:span 1} .amen-strip ul{gap:1.4rem 1rem} } @media(prefers-reduced-motion:reduce){ *{scroll-behavior:auto !important} .hero-bg,.hero-bg::before,.scrollcue .dot::after{animation:none} .reveal{opacity:1;transform:none;transition:none} } :focus-visible{outline:2px solid var(--gold);outline-offset:3px} /* inner pages */ .page-head{background:var(--hero-cream);padding-top:clamp(8rem,16vh,11rem);padding-bottom:clamp(2.8rem,6vw,4.5rem);text-align:center} .page-head h1{font-family:var(--display2);text-transform:uppercase;font-weight:500;color:var(--ink);line-height:1;letter-spacing:-.005em;font-size:clamp(2.5rem,7vw,5.2rem);margin:1.1rem 0} .page-head .ph-lead{max-width:54ch;margin:0 auto;color:var(--ink-soft);font-size:1.08rem;font-weight:300} nav.main{gap:1.5rem} nav.main a{font-size:.72rem;letter-spacing:.14em} nav.main a.active{opacity:1} nav.main a.active::after{width:100%} @media(max-width:1080px){nav.main{gap:1.05rem}nav.main a{font-size:.66rem;letter-spacing:.08em}} .section{padding-block:clamp(3.5rem,7vw,6rem)} .prose-list{max-width:780px;margin:0 auto;list-style:none;padding:0} .trow{display:flex;justify-content:space-between;align-items:flex-start;gap:1.5rem;padding:1.25rem 0;border-bottom:1px solid var(--line);transition:padding-left .35s ease} .trow:hover{padding-left:.6rem} .trow h4{font-family:var(--serif);font-size:1.4rem;color:var(--ink);font-weight:500;line-height:1.1} .trow .tmeta{font-size:.92rem;color:var(--ink-soft);margin-top:.3rem;max-width:48ch;font-weight:300} .trow .tprice{font-family:var(--serif);font-size:1.2rem;color:var(--teal);white-space:nowrap;text-align:right} .trow .tprice span{display:block;font-family:var(--sans);font-size:.58rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-soft);margin-top:.25rem} /* Tata letak .pg-grid didefinisikan di bawah, di blok galeri — dulu CSS columns, sekarang baris terjustifikasi. */ /* ---------- FAQ ----------
/ bawaan peramban, tanpa JavaScript sama sekali: buka-tutup, fokus keyboard, dan pembaca layar sudah ditangani. Isinya tetap ada di DOM saat tertutup, jadi Google tetap membacanya. */ /* ---------- breadcrumb ---------- Duduk di atas .page-head, di latar krem yang sama, jadi tidak terlihat seperti pita tambahan. Pemisahnya digambar CSS (bukan karakter di markup) supaya pembaca layar hanya mendengar nama halamannya. */ .crumbs{background:var(--hero-cream);padding-top:clamp(6.5rem,13vh,9rem)} /* Dua hal yang gampang salah di sini. margin-block, BUKAN margin. Menulis margin:0 menimpa margin:0 auto milik .wrap, sehingga daftarnya berhenti terpusat dan menempel ke tepi kiri layar — jauh dari wordmark dan dari seluruh isi halaman. Baru kelihatan di layar lebih lebar dari --maxw, jadi mudah lolos. justify-content:center karena seisi .page-head di bawahnya memang rata tengah: eyebrow, judul, dan lead. Breadcrumb rata kiri di atas tumpukan yang seluruhnya terpusat terbaca sebagai elemen nyasar, bukan bagian dari komposisinya. */ .crumbs ol{list-style:none;margin-block:0;display:flex;flex-wrap:wrap; justify-content:center;align-items:center;gap:.1rem .55rem; font-family:var(--sans);font-size:.72rem;letter-spacing:.1em; text-transform:uppercase;color:var(--ink-soft)} .crumbs li{display:flex;align-items:center;gap:.55rem} .crumbs li+li::before{content:"";width:4px;height:4px;border-radius:50%;background:var(--line)} .crumbs a{color:var(--ink-soft);transition:color .3s ease} .crumbs a:hover{color:var(--gold-ink)} .crumbs [aria-current]{color:var(--ink)} /* Breadcrumb sudah menyediakan jarak dari header, jadi page-head di bawahnya tidak perlu lagi. Tanpa ini judul halaman terdorong jauh. */ .crumbs + .page-head{padding-top:clamp(1.4rem,3vw,2.2rem)} /* Jejak versi WordPress dikeluarkan Rank Math sebagai

berisi dan pemisah teks — bukan

    seperti versi situs induk. Aturan ini menyamakan tampilannya tanpa menyentuh keluaran plugin. */ .crumbs--wp .wrap{padding-inline:var(--pad)} /* text-align:center menyamakannya dengan versi situs induk. Rank Math mengeluarkan

    berisi , bukan

      flex, jadi centering-nya lewat text-align — bukan justify-content. */ .crumbs--wp p,.crumbs--wp nav{margin:0;text-align:center;font-family:var(--sans); font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-soft)} .crumbs--wp a{color:var(--ink-soft);transition:color .3s ease} .crumbs--wp a:hover{color:var(--gold-ink)} .crumbs--wp .separator{color:var(--line);padding:0 .35rem} .crumbs--wp .last{color:var(--ink)} /* Blok "kenapa pesan di sini" pada halaman pemesanan. Ada agar halaman punya isi yang bisa dirayapi Google — sebelumnya badan halamannya hanya satu div kosong yang diisi JavaScript Exely. */ .booking-why{background:var(--bg-2)} .bw-grid{display:grid;grid-template-columns:1fr 1.15fr;gap:clamp(2rem,5vw,4.5rem);align-items:start} .bw-list{list-style:none;margin:0;padding:0} .bw-list li{padding:.85rem 0 .85rem 1.6rem;border-bottom:1px solid var(--line);position:relative; color:var(--ink-soft);font-size:.98rem;font-weight:300;line-height:1.65} .bw-list li:last-child{border-bottom:0} .bw-list li::before{content:"";position:absolute;left:0;top:1.32em;width:6px;height:6px; border-radius:50%;background:var(--gold)} .bw-list b{color:var(--ink);font-weight:500} .bw-foot{margin-top:clamp(1.8rem,3.5vw,2.6rem);padding-top:1.4rem;border-top:1px solid var(--line); color:var(--ink-soft);font-size:.94rem;display:flex;flex-wrap:wrap;gap:.5rem 1.2rem;align-items:center} @media(max-width:820px){.bw-grid{grid-template-columns:1fr;gap:1.8rem}} .faq-list{max-width:780px;margin:0 auto} .faq-item{border-bottom:1px solid var(--line)} .faq-item summary{list-style:none;cursor:pointer;padding:1.25rem 2.6rem 1.25rem 0;position:relative; font-family:var(--serif);font-size:clamp(1.15rem,1.9vw,1.4rem);color:var(--ink);font-weight:500; line-height:1.3;transition:color .3s ease} .faq-item summary::-webkit-details-marker{display:none} .faq-item summary:hover{color:var(--teal)} .faq-item summary:focus-visible{outline:2px solid var(--olive);outline-offset:3px;border-radius:3px} /* Tanda plus jadi minus saat terbuka. Dibuat dari dua garis supaya tidak bergantung pada font ikon apa pun. */ .faq-item summary::before,.faq-item summary::after{content:"";position:absolute;right:.35rem;top:50%; background:var(--gold);transition:transform .3s cubic-bezier(.2,.7,.2,1),opacity .3s ease} .faq-item summary::before{width:14px;height:1.5px;transform:translateY(-50%)} .faq-item summary::after{width:1.5px;height:14px;right:calc(.35rem + 6.25px);transform:translateY(-50%)} .faq-item[open] summary::after{transform:translateY(-50%) rotate(90deg);opacity:0} .faq-a{padding:0 2.6rem 1.5rem 0} .faq-a p{color:var(--ink-soft);font-size:1rem;font-weight:300;line-height:1.75;max-width:64ch;margin:0} .faq-more{text-align:center;margin-top:clamp(2.2rem,4vw,3rem);color:var(--ink-soft);font-size:.96rem} .faq-more .arrow-link{margin-left:.4rem} @media(prefers-reduced-motion:reduce){.faq-item summary::before,.faq-item summary::after{transition:none}} .trio{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1.5rem,3vw,2.8rem);margin-top:clamp(2rem,4vw,3rem)} .trio .ic{width:40px;height:40px;color:var(--gold)} .trio h4{font-family:var(--serif);font-size:1.55rem;color:var(--ink);margin:.9rem 0 .5rem;font-weight:500} .trio p{color:var(--ink-soft);font-size:.96rem;font-weight:300;max-width:34ch} .trio>div{transition:transform .5s ease} .trio>div:hover{transform:translateY(-6px)} @media(max-width:760px){.trio{grid-template-columns:1fr;gap:2rem}} /* hero heading + subheading */ /* Baris kecil DI DALAM h1. Dipakai beranda ("Grand Kesambi Resort & Villa" di atas baris display) dan About ("The story of"). Audit SEO Exely meminta branded keyword ada di h1; ini caranya tanpa mengubah tipografi Fraunces kapital yang jadi ciri situs. */ .h1-lede{display:block;font-family:var(--serif);text-transform:none;font-weight:400; font-size:clamp(1rem,2.3vw,1.6rem);letter-spacing:.01em;line-height:1.2; margin-bottom:clamp(.45rem,1.2vw,.85rem);opacity:.9} /* Nama resort itu panjang; tanpa ini ia pecah jadi tiga baris di desktop. */ .page-head h1.page-head--brand{font-size:clamp(2rem,5.4vw,4rem);max-width:17ch;margin-inline:auto} .hero-kicker{display:block;text-align:center;font-family:var(--sans);font-size:.7rem;letter-spacing:.32em;text-transform:uppercase;color:var(--olive);margin-bottom:1.1rem} .hero-sub{text-align:center;max-width:48ch;margin:0 auto clamp(2rem,4vw,3rem);color:var(--ink-soft);font-size:1.06rem;font-weight:300} /* filter bar */ .filter-bar{display:flex;flex-wrap:wrap;gap:.6rem;justify-content:center;margin-bottom:clamp(2rem,4vw,3rem)} .filter-btn{font-family:var(--sans);font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;padding:.6rem 1.2rem;border-radius:999px;border:1px solid var(--line);background:transparent;color:var(--ink-soft);cursor:pointer;transition:all .3s ease} .filter-btn:hover{border-color:var(--olive);color:var(--ink);transform:translateY(-2px)} .filter-btn.active{background:var(--olive);color:var(--cream);border-color:transparent} /* facilities icon grid */ .facilities{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(1rem,2.2vw,1.6rem)} .facility{text-align:center;padding:1.7rem 1rem;background:var(--bg);border-radius:14px;transition:transform .5s cubic-bezier(.2,.7,.2,1),box-shadow .5s ease} .facility:hover{transform:translateY(-6px);box-shadow:0 20px 40px -26px rgba(20,58,49,.4)} .facility svg{width:32px;height:32px;color:var(--gold)} .facility h4{font-family:var(--serif);font-size:1.12rem;margin-top:.75rem;color:var(--ink);font-weight:500} @media(max-width:820px){.facilities{grid-template-columns:repeat(2,1fr)}} /* blog */ .blog-feature{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(1.5rem,3vw,3rem);align-items:center;margin-bottom:clamp(2.5rem,5vw,4rem)} .blog-feature .bimg{aspect-ratio:4/3;border-radius:16px;background-size:cover;background-position:center} .blog-feature h2{font-size:clamp(1.8rem,3.5vw,2.8rem);margin:.7rem 0 1rem;font-family:var(--serif);color:var(--ink)} .blog-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1.4rem,3vw,2rem)} .blog-card{display:flex;flex-direction:column;background:var(--bg);border-radius:14px;overflow:hidden;transition:transform .5s cubic-bezier(.2,.7,.2,1),box-shadow .5s ease} .blog-card:hover{transform:translateY(-8px);box-shadow:0 26px 50px -30px rgba(20,58,49,.42)} .blog-card .bimg{aspect-ratio:16/10;background-size:cover;background-position:center} .blog-card .bbody{padding:1.4rem 1.4rem 1.5rem;display:flex;flex-direction:column;flex:1} .bcat{font-size:.62rem;letter-spacing:.18em;text-transform:uppercase;color:var(--gold)} .blog-card h3{font-family:var(--serif);font-size:1.35rem;color:var(--ink);margin:.5rem 0 .55rem;line-height:1.15;font-weight:500} .blog-card p{font-size:.9rem;color:var(--ink-soft);font-weight:300;flex:1} /* Kartu promo memakai kerangka .blog-card. Bedanya cuma daftar isi paket di badannya, dan gambar promo Exely yang rasionya tidak seragam — .offer-card memberinya rasio tetap supaya barisnya tetap rata. */ .offer-card .bimg{aspect-ratio:4/3;background-color:var(--bg-2)} .offer-list{list-style:none;margin:.7rem 0 0;padding:0;font-size:.86rem;color:var(--ink-soft);font-weight:300} .offer-list li{position:relative;padding-left:1.05rem;margin-bottom:.32rem;line-height:1.5} .offer-list li::before{content:"";position:absolute;left:0;top:.55em;width:5px;height:5px;border-radius:50%;background:var(--gold);opacity:.75} .blog-card .bmeta{margin-top:1rem;font-size:.72rem;color:var(--ink-soft);display:flex;justify-content:space-between;align-items:center;border-top:1px solid var(--line);padding-top:.85rem} .blog-card .bmeta a{color:var(--gold);text-transform:uppercase;letter-spacing:.14em;font-size:.66rem} @media(max-width:860px){.blog-grid{grid-template-columns:repeat(2,1fr)}.blog-feature{grid-template-columns:1fr}} @media(max-width:560px){.blog-grid{grid-template-columns:1fr;max-width:420px;margin-inline:auto}} /* contact */ .contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,4vw,4rem);align-items:start} .ci-row{padding:1.15rem 0;border-bottom:1px solid var(--line)} .ci-row .l{font-size:.62rem;letter-spacing:.18em;text-transform:uppercase;color:var(--gold);margin-bottom:.4rem} .ci-row .v{font-family:var(--serif);font-size:1.25rem;color:var(--ink);line-height:1.3} .ci-row .v a{color:inherit} .contact-map{position:relative;border-radius:16px;overflow:hidden;min-height:360px;background:linear-gradient(150deg,#8ca79b,#4a655b)} .map-link{position:absolute;left:50%;bottom:1rem;transform:translateX(-50%);z-index:2; background:var(--bg);color:var(--ink);border:1px solid var(--line);padding:.62rem 1.15rem; border-radius:999px;text-decoration:none;font-family:var(--sans);font-size:.72rem; letter-spacing:.14em;text-transform:uppercase;white-space:nowrap; box-shadow:0 12px 26px -14px rgba(20,58,49,.5); transition:transform .45s cubic-bezier(.2,.7,.2,1),box-shadow .45s ease} .map-link:hover{transform:translateX(-50%) translateY(-3px);box-shadow:0 18px 32px -14px rgba(20,58,49,.55)} .contact-map iframe{width:100%;height:100%;min-height:360px;border:0;display:block} .cform{margin-top:1.6rem;display:grid;gap:.9rem} .cform input,.cform textarea{font-family:var(--sans);font-size:.95rem;padding:.9rem 1rem;border:1px solid var(--line);border-radius:10px;background:var(--bg);color:var(--ink);width:100%} .cform textarea{min-height:120px;resize:vertical} .cform input:focus,.cform textarea:focus{outline:none;border-color:var(--olive)} .cform button{justify-self:start} @media(max-width:820px){.contact-grid{grid-template-columns:1fr}} /* chatbot */ .chat-fab{position:fixed;right:22px;bottom:22px;z-index:2147483645;width:60px;height:60px;border-radius:50%;background:var(--olive);color:var(--cream);border:0;cursor:pointer;box-shadow:0 12px 30px rgba(20,58,49,.35);display:grid;place-items:center;transition:transform .3s ease,background .3s ease} .chat-fab:hover{transform:scale(1.08);background:var(--teal)} .chat-fab svg{width:26px;height:26px} /* z-index harus di atas widget promo Exely. Exely menyuntikkan widget-nya sendiri pada z-index 2147483641 — hampir setinggi yang diizinkan CSS — dan dengan nilai lama (91) ia menutupi jendela chat sehingga tulisannya tidak terbaca. Nilai di sini sengaja di bawah 2147483647 supaya masih ada ruang di atas kita. Panel dijadikan flex kolom supaya daftar pesan bisa menyusut sendiri saat layar pendek; tanpa itu, panel tumbuh melewati atas layar dan menempel ke bilah URL di ponsel. */ .chat-panel{position:fixed;right:22px;bottom:94px;z-index:2147483646;width:min(340px,calc(100vw - 44px)); display:flex;flex-direction:column; max-height:calc(100vh - 8rem);max-height:calc(100svh - 8rem); background:var(--bg);border-radius:18px;box-shadow:0 30px 60px -24px rgba(14,42,35,.5);overflow:hidden; transform:translateY(16px) scale(.96);opacity:0;pointer-events:none; transition:transform .35s cubic-bezier(.2,.7,.2,1),opacity .3s ease} .chat-panel.open{transform:none;opacity:1;pointer-events:auto} .chat-head{background:var(--teal);color:var(--cream);padding:1.1rem 1.3rem} .chat-head .ch-name{font-family:var(--serif);font-size:1.2rem} .chat-head .ch-status{font-size:.68rem;color:var(--gold-lt);margin-top:.25rem;display:flex;align-items:center;gap:.4rem} .chat-head .dot{width:7px;height:7px;border-radius:50%;background:#7fc98a;display:inline-block} /* Tinggi 250px yang lama sudah cukup waktu balasannya satu kalimat kalengan. Sekarang bot mengutip tarif, menyebut rate plan, dan menambahkan tombol pesan — tiga baris pertama saja sudah memenuhi kotaknya, dan tamu harus menggulir untuk melihat tombolnya. */ /* flex:1 1 auto + min-height:0 membuat daftar pesan menyusut lebih dulu saat layar pendek, bukan mendorong panel keluar layar. min-height 240px yang lama justru mengunci tinggi minimum dan menyebabkan panel menempel ke bilah URL di ponsel kecil. */ .chat-msgs{padding:1.1rem;height:min(56vh,420px);flex:1 1 auto;min-height:0;overflow-y:auto;display:flex;flex-direction:column;gap:.65rem;background:var(--bg-2);overscroll-behavior:contain} .chat-head,.chat-chips,.chat-input,.chat-foot{flex:0 0 auto} /* white-space:pre-wrap WAJIB. Model memisahkan daftar dan paragraf dengan baris baru, dan tanpa ini HTML meruntuhkan semuanya jadi satu blok — "1. Standard Room ... 2. Deluxe ..." menyambung tanpa jeda dan nyaris tidak terbaca. */ .chat-msgs .m{max-width:82%;padding:.7rem .9rem;border-radius:14px;font-size:.88rem;line-height:1.5;white-space:pre-wrap;word-break:break-word} .chat-msgs .bot{background:var(--bg);color:var(--ink);align-self:flex-start;border-bottom-left-radius:4px} .chat-msgs .me{background:var(--olive);color:var(--cream);align-self:flex-end;border-bottom-right-radius:4px} .chat-input{display:flex;border-top:1px solid var(--line);background:var(--bg)} .chat-input input{flex:1;border:0;padding:.9rem 1rem;font-family:var(--sans);font-size:.9rem;background:transparent;color:var(--ink)} .chat-input input:focus{outline:none} .chat-input button{border:0;background:transparent;color:var(--olive);font-size:1.15rem;padding:0 1rem;cursor:pointer} .chat-input button:disabled{opacity:.4;cursor:default} .chat-mic{color:var(--ink-soft);padding:0 .5rem} .chat-mic svg{width:19px;height:19px;display:block} .chat-mic.is-on{color:#b3392f} .chat-mic.is-on svg{animation:gkmic 1.2s ease-in-out infinite} @keyframes gkmic{0%,100%{opacity:1}50%{opacity:.35}} @media(prefers-reduced-motion:reduce){.chat-mic.is-on svg{animation:none}} /* Foto yang dikirim bot di dalam gelembung */ .chat-msgs .m-shots{display:grid;grid-template-columns:1fr 1fr;gap:.35rem;margin-top:.55rem} .chat-msgs .m-shots img{width:100%;height:92px;object-fit:cover;border-radius:9px;display:block;background:var(--bg-2)} .chat-msgs .m-shots a{display:block;border-radius:9px;overflow:hidden} .chat-msgs .m-shots a:focus-visible{outline:2px solid var(--olive);outline-offset:2px} /* Tautan di dalam gelembung bot. WAJIB ADA. Tanpa aturan ini tautan mewarisi warna teks biasa dan tamu tidak sadar kalimat "Booking link" bisa diklik — terbukti terjadi: tamu bertanya "mana link tautannya" padahal tautannya sudah di depan matanya. Kontras lebih penting daripada kerapian di sini. */ .chat-msgs .bot a{ color:var(--gold-ink);font-weight:500; text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:2px; word-break:break-word; } .chat-msgs .bot a:hover{color:var(--teal);text-decoration-thickness:2px} .chat-msgs .bot a:focus-visible{outline:2px solid var(--olive);outline-offset:2px;border-radius:3px} /* Tautan pemesanan tampil sebagai tombol, bukan sekadar teks bergaris. Diberi kelas oleh main.js saat URL-nya menuju mesin pemesanan. */ /* Tombol pesan mengambil barisnya sendiri. Sebagai inline-flex ia menyelip di tengah kalimat — pada jawaban yang memuat beberapa tipe kamar hasilnya "1. Standard Room [tombol] . 2. Deluxe ...", dan tidak ada yang bisa dibaca. */ .chat-msgs .bot a.m-cta{ display:flex;align-items:center;justify-content:center;gap:.4rem; width:fit-content;margin:.5rem 0 .7rem; background:var(--olive);color:var(--cream);text-decoration:none;font-weight:500; padding:.5rem .95rem;border-radius:999px;font-size:.83rem; white-space:nowrap; transition:background .3s ease,transform .3s ease; } .chat-msgs .bot a.m-cta:last-child{margin-bottom:0} .chat-msgs .bot a.m-cta::after{content:"\2192"} .chat-msgs .bot a.m-cta:hover{background:var(--teal);color:var(--cream);transform:translateY(-1px)} /* Titik mengetik */ .chat-msgs .m--wait{display:flex;gap:4px;align-items:center;padding:.8rem .95rem} .chat-msgs .m--wait i{width:6px;height:6px;border-radius:50%;background:var(--sage);display:block;animation:gkdot 1.1s infinite ease-in-out} .chat-msgs .m--wait i:nth-child(2){animation-delay:.16s} .chat-msgs .m--wait i:nth-child(3){animation-delay:.32s} @keyframes gkdot{0%,60%,100%{opacity:.25;transform:translateY(0)}30%{opacity:1;transform:translateY(-3px)}} /* Saran pertanyaan pembuka. Layar chat yang kosong membuat orang tidak tahu harus bertanya apa; tiga pilihan menghapus keraguan itu. */ .chat-chips{display:flex;flex-wrap:wrap;gap:.4rem;padding:0 1.1rem .9rem;background:var(--bg-2)} .chat-chips button{ border:1px solid var(--line);background:var(--bg);color:var(--ink); font-family:var(--sans);font-size:.78rem;padding:.4rem .8rem;border-radius:999px; cursor:pointer;transition:background .3s ease,border-color .3s ease; } .chat-chips button:hover{background:var(--olive);color:var(--cream);border-color:transparent} /* Jalur ke manusia, selalu terlihat di kaki panel */ .chat-foot{display:flex;align-items:center;justify-content:center;gap:.45rem; padding:.6rem 1rem;background:var(--bg);border-top:1px solid var(--line); font-size:.76rem;color:var(--ink-soft)} .chat-foot a{display:inline-flex;align-items:center;gap:.35rem;color:#1f7a44;font-weight:500;text-decoration:none} .chat-foot a:hover{text-decoration:underline} .chat-foot svg{width:14px;height:14px} /* Ponsel: panel melebar hampir penuh, dan diberi jarak yang cukup dari atas layar supaya tidak menempel ke bilah URL. 100svh dipakai karena 100vh di ponsel mengabaikan bilah alamat yang bisa muncul-hilang. */ @media(max-width:560px){ .chat-panel{left:12px;right:12px;width:auto;bottom:84px; max-height:calc(100vh - 8.5rem);max-height:calc(100svh - 8.5rem)} .chat-msgs{height:auto;padding:.9rem} .chat-fab{right:16px;bottom:16px;width:54px;height:54px} .chat-panel.chat--left{left:12px;right:12px} } /* Di halaman pemesanan widget digeser ke kiri. Pojok kanan bawah adalah tempat tombol lanjut mesin pemesanan Exely; dulu chat dimatikan di sana karena tabrakan itu, padahal justru halaman ini yang paling butuh — tamu tiba lewat tautan dari dalam chat. */ .chat-fab.chat--left{right:auto;left:22px} .chat-panel.chat--left{right:auto;left:22px} /* Lencana pesan belum dibaca pada tombol chat. Tidak perlu position:relative di sini — .chat-fab sudah position:fixed, dan itu pun menampung anak absolute. Menambahkannya justru menimpa fixed, dan tombolnya ikut menggulir bersama halaman. */ .chat-badge{ position:absolute;top:-2px;right:-2px;min-width:22px;height:22px;padding:0 5px; border-radius:999px;background:#b3392f;color:#fff;border:2px solid var(--bg); font-family:var(--sans);font-size:.7rem;font-weight:700;line-height:1; display:none;align-items:center;justify-content:center; font-variant-numeric:tabular-nums; } .chat-fab.has-unread .chat-badge{display:flex;animation:gkpop .35s cubic-bezier(.2,.7,.2,1)} @keyframes gkpop{from{transform:scale(.4);opacity:0}to{transform:scale(1);opacity:1}} @media(prefers-reduced-motion:reduce){ .chat-fab.has-unread .chat-badge,.chat-msgs .m--wait i{animation:none} } /* ═════════════════════════════════════════════════════════════════ PARALLAX Dulu memakai background-attachment:fixed. Itu memaksa browser melukis ulang lapisan tiap frame scroll — sumber jank-nya, dan iOS Safari tidak mendukungnya sama sekali. Sekarang: lapisan ::before yang digeser dengan transform, jadi dikomposit GPU dan mulus. Nilai --px diisi main.js. Tanpa JS lapisan diam dan tetap tampil benar, jadi ini aman kalau script gagal dimuat. ═════════════════════════════════════════════════════════════════ */ /* background-attachment:fixed mengunci latar ke viewport, jadi saat band melintas 1620px foto ikut tampak bergeser 1620px — rasio 1:1. Sempat diganti lapisan ::before yang digeser transform, tapi cara itu hanya sanggup rasio ~0.18; menyamai 1:1 butuh lapisan setinggi 325% sehingga fotonya ter-crop parah. Alasan penggantian dulu adalah dugaan jank — dan pengukuran membantahnya: scroll 3200px di Edge menghasilkan 60fps dengan 0% frame melewati 20ms, identik dengan versi transform. Tetap dibatasi min-width:769px. iOS Safari tidak mendukung fixed dan di sana justru benar-benar tersendat, jadi mobile sengaja tanpa parallax. */ @media(min-width:769px){.sanctuary,.cta .ph,.feature .ph{background-attachment:fixed !important}} /* ── Kartu kamar: hover ────────────────────────────────────────── Kartu sekarang tautan ke halaman kamar, jadi hover-nya harus jelas mengundang klik: foto membesar pelan, kartu terangkat, bayangan dalam, dan garis emas tipis muncul di tepi. */ .card{text-decoration:none;color:inherit;will-change:transform; transition:transform .6s cubic-bezier(.2,.7,.2,1),box-shadow .6s cubic-bezier(.2,.7,.2,1)} .card::before{content:"";position:absolute;inset:0;z-index:0; background-image:inherit;background-size:cover;background-position:center;background-repeat:no-repeat; transform:scale(1);transition:transform 1.2s cubic-bezier(.2,.7,.2,1);will-change:transform} .card::after{content:"";position:absolute;inset:0;z-index:3;border-radius:inherit;pointer-events:none; box-shadow:inset 0 0 0 1px rgba(203,174,114,0);transition:box-shadow .6s ease} .card .c-scrim{transition:opacity .6s ease} .card:hover,.card:focus-visible{transform:translateY(-10px); box-shadow:0 38px 72px -34px rgba(20,58,49,.62)} .card:hover::before,.card:focus-visible::before{transform:scale(1.085)} .card:hover::after,.card:focus-visible::after{box-shadow:inset 0 0 0 1px rgba(203,174,114,.55)} .card:hover .c-scrim,.card:focus-visible .c-scrim{opacity:.93} .card:focus-visible{outline:2px solid var(--gold);outline-offset:4px} /* ── Foto yang bisa dibuka ───────────────────────────────────────── */ /* Grid galeri: baris terjustifikasi (lihat gallery.js), bukan CSS columns. Dengan columns, isi mengalir turun kolom 1 lalu pindah ke kolom 2 dan 3, sehingga tiap batch baru seolah muncul di kanan alih-alih menyambung ke bawah. Tinggi dan lebar tiap diatur inline oleh gallery.js. */ .pg-grid{display:flex;flex-direction:column;gap:14px; max-width:var(--maxw);margin:0 auto} /* nowrap wajib: lebar tiap baris sudah dihitung pas oleh gallery.js. Kalau boleh wrap, selisih sub-piksel bikin foto terakhir jatuh ke baris berikutnya dan grid runtuh jadi satu kolom. */ .pg-row{display:flex;gap:14px;justify-content:flex-start;flex-wrap:nowrap} .pg-grid img,.g-grid .ph{cursor:zoom-in} .pg-grid img{display:block;border-radius:12px;object-fit:cover;flex:none; opacity:0;transform:translateY(16px); transition:opacity .55s ease,transform .55s cubic-bezier(.2,.7,.2,1),box-shadow .5s ease} .pg-grid img.in{opacity:1;transform:translateY(0)} .pg-grid img.in:hover{transform:translateY(-4px) scale(1.015); box-shadow:0 26px 48px -26px rgba(20,58,49,.5)} .g-grid .ph{transition:transform .6s cubic-bezier(.2,.7,.2,1),box-shadow .6s ease} .g-grid .ph::before{content:"";position:absolute;inset:0;z-index:0; background-image:inherit;background-size:cover;background-position:center;background-repeat:no-repeat; transform:scale(1);transition:transform 1.15s cubic-bezier(.2,.7,.2,1)} .g-grid .ph::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none; background:rgba(12,32,26,0);transition:background .5s ease} .g-grid .ph:hover{box-shadow:0 26px 50px -28px rgba(20,58,49,.55)} .g-grid .ph:hover::before{transform:scale(1.075)} .g-grid .ph:hover::after{background:rgba(12,32,26,.14)} /* ── Spinner (dipakai lightbox dan galeri) ───────────────────────── */ .spin{width:24px;height:24px;border-radius:50%;flex:none; border:2px solid rgba(243,239,230,.22);border-top-color:var(--gold-lt); animation:spin .8s linear infinite} @keyframes spin{to{transform:rotate(360deg)}} .g-loader{display:flex;align-items:center;justify-content:center;gap:.75rem;height:70px; font-family:var(--sans);font-size:.72rem;letter-spacing:.18em;text-transform:uppercase; color:var(--ink-soft);opacity:0;transition:opacity .3s ease} .g-loader.on{opacity:1} .g-loader .spin{border-color:rgba(27,38,32,.16);border-top-color:var(--olive)} /* ── Lightbox ────────────────────────────────────────────────────── */ /* Lightbox harus di atas SEMUANYA, termasuk jendela chat. Nilai 200 sudah cukup selama fotonya hanya ada di halaman galeri dan halaman kamar. Sejak chatbot ikut mengirim foto, ia harus melampaui panel chat di 2147483646 — kalau tidak, foto yang dibuka dari dalam chat justru muncul di BELAKANG chat-nya. Ini nilai z-index tertinggi yang diizinkan CSS, dan memang tidak boleh ada apa pun di atasnya. */ .lb{position:fixed;inset:0;z-index:2147483647;display:flex;align-items:center;justify-content:center; background:rgba(9,20,17,.95);opacity:0;visibility:hidden; transition:opacity .4s ease,visibility .4s} .lb.open{opacity:1;visibility:visible} .lb-stage{position:relative;width:100%;height:100%;display:flex;align-items:center; justify-content:center;padding:clamp(3.2rem,7vw,4.5rem) clamp(1rem,7vw,5rem);overflow:hidden} .lb-img{max-width:100%;max-height:100%;object-fit:contain;border-radius:4px; box-shadow:0 40px 90px -40px rgba(0,0,0,.85);cursor:zoom-in; user-select:none;-webkit-user-drag:none; opacity:0;transform:translateX(var(--sx,0)) scale(.965); transition:opacity .38s ease,transform .5s cubic-bezier(.2,.7,.2,1)} .lb-img.ready{opacity:1;transform:translateX(0) scale(1)} .lb-img.zoom{cursor:zoom-out;transform:scale(2.1);transition:transform .5s cubic-bezier(.2,.7,.2,1)} /* pointer-events:none wajib — spinner ber-opacity:0 tetap menangkap klik dan persis menutupi titik tengah foto, sehingga klik-untuk-zoom mati. */ .lb-spin{position:absolute;z-index:1;opacity:0;pointer-events:none;transition:opacity .25s ease} .lb-spin.on{opacity:1} .lb-btn{position:absolute;z-index:3;width:clamp(42px,5vw,54px);height:clamp(42px,5vw,54px); border-radius:50%;border:1px solid rgba(243,239,230,.24);background:rgba(9,20,17,.45); color:var(--cream);cursor:pointer;display:flex;align-items:center;justify-content:center; transition:background .3s ease,border-color .3s ease,transform .3s cubic-bezier(.2,.7,.2,1)} .lb-btn svg{width:40%;height:40%} .lb-btn:hover{background:rgba(243,239,230,.15);border-color:rgba(243,239,230,.55)} .lb-btn:focus-visible{outline:2px solid var(--gold-lt);outline-offset:3px} .lb-prev,.lb-next{top:50%;margin-top:calc(clamp(42px,5vw,54px) / -2)} .lb-prev{left:clamp(.5rem,2vw,1.6rem)} .lb-prev:hover{transform:translateX(-3px)} .lb-next{right:clamp(.5rem,2vw,1.6rem)} .lb-next:hover{transform:translateX(3px)} .lb-close{top:clamp(.7rem,2vw,1.4rem);right:clamp(.7rem,2vw,1.4rem)} .lb-close:hover{transform:rotate(90deg)} .lb-cap{position:absolute;left:0;right:0;bottom:clamp(.7rem,2.4vw,1.5rem);z-index:3; text-align:center;color:var(--cream-soft);font-family:var(--sans); font-size:.74rem;letter-spacing:.16em;text-transform:uppercase;pointer-events:none} .lb-cap b{color:var(--cream);font-weight:400} body.lb-open{overflow:hidden} @media(max-width:560px){ .lb-prev,.lb-next{top:auto;bottom:3.4rem;margin-top:0} .lb-cap{bottom:1rem} } /* ── Perpindahan filter (Dining, Spa, Galeri) ───────────────────── Sebelumnya display di-set langsung tanpa transisi sehingga baris berkedip kasar. Sekarang keluar dulu, baru masuk bertahap. */ .trow{transition:opacity .32s ease,transform .32s cubic-bezier(.2,.7,.2,1)} .trow.f-out{opacity:0;transform:translateY(8px)} .trow.f-in{animation:rowIn .55s cubic-bezier(.2,.7,.2,1) both;animation-delay:var(--d,0ms)} @keyframes rowIn{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}} .filter-btn{transition:background .35s ease,color .35s ease,border-color .35s ease} .pg-grid.swapping{opacity:0;transform:translateY(10px)} .pg-grid{transition:opacity .3s ease,transform .3s cubic-bezier(.2,.7,.2,1)} /* ═════════════════════════════════════════════════════════════════ HALAMAN DETAIL KAMAR (room-*.html) ═════════════════════════════════════════════════════════════════ */ .rg-grid{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:210px; gap:clamp(.5rem,1.2vw,.85rem)} .rg-grid img{width:100%;height:100%;object-fit:cover;display:block;border-radius:12px; cursor:zoom-in;transition:transform .6s cubic-bezier(.2,.7,.2,1),box-shadow .6s ease} .rg-grid img:hover{transform:translateY(-4px) scale(1.012); box-shadow:0 26px 48px -26px rgba(20,58,49,.5)} .rg-grid img:nth-child(1){grid-column:span 2;grid-row:span 2} .rg-grid img:nth-child(6){grid-column:span 2} .room-body{display:grid;grid-template-columns:1.55fr .95fr; gap:clamp(2rem,5vw,4.5rem);align-items:start} .room-prose p{font-size:1.02rem;line-height:1.85;color:var(--ink-soft);margin-bottom:1.15rem} .room-prose p:first-child{font-family:var(--serif);font-size:clamp(1.25rem,2vw,1.55rem); line-height:1.6;color:var(--ink)} .book-card{position:sticky;top:110px;background:var(--bg-2);border:1px solid var(--line); border-radius:16px;padding:clamp(1.4rem,2.4vw,2rem)} /* Dulu .bc-price berisi tarif per malam. Harga sudah dicabut seluruhnya (lihat data/rooms.php); judul ini menggantikannya supaya panel tidak langsung dibuka oleh tabel spesifikasi tanpa kepala. */ .book-card .bc-title{font-family:var(--serif);font-size:1.5rem;color:var(--ink);line-height:1.15} .book-card .bc-specs{margin:1.4rem 0;border-top:1px solid var(--line)} .book-card .bc-row{display:flex;justify-content:space-between;gap:1rem; padding:.72rem 0;border-bottom:1px solid var(--line);font-size:.9rem} .book-card .bc-row .k{color:var(--ink-soft)} .book-card .bc-row .v{color:var(--ink)} .book-card .btn{width:100%;justify-content:center;text-align:center} .book-card .bc-note{margin-top:.9rem;font-size:.76rem;color:var(--ink-soft);text-align:center} /* Sisa kamar malam ini. Muncul hanya kalau tersisa tiga atau kurang, dan angkanya benar-benar dari Exely — urgensi yang bisa dibuktikan. */ .book-card .bc-left{ margin-bottom:.7rem;text-align:center;font-size:.74rem;font-weight:600; letter-spacing:.1em;text-transform:uppercase;color:var(--gold-ink); } .amen-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(1rem,2.2vw,1.7rem)} .amen{border-top:1px solid var(--line);padding-top:1rem} .amen h4{font-family:var(--sans);font-weight:500;font-size:.88rem;color:var(--ink); margin-bottom:.35rem;letter-spacing:.01em} .amen p{font-size:.82rem;line-height:1.6;color:var(--ink-soft)} .room-nav{display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap; border-top:1px solid var(--line);padding-top:1.6rem;margin-top:clamp(2.5rem,5vw,4rem)} /* ═════════════════════════════════════════════════════════════════ HALAMAN ARTIKEL (post-*.html) ═════════════════════════════════════════════════════════════════ */ .post-meta{display:flex;justify-content:center;gap:.7rem;align-items:center; font-family:var(--sans);font-size:.74rem;letter-spacing:.16em;text-transform:uppercase; color:var(--ink-soft);margin-top:1.4rem} .post-meta .dot{width:3px;height:3px;border-radius:50%;background:var(--gold);flex:none} .post-hero{width:100%;aspect-ratio:16/8;object-fit:cover;display:block;border-radius:16px} .post-body{max-width:68ch;margin:0 auto} .post-body p{font-size:1.06rem;line-height:1.88;color:var(--ink-soft);margin-bottom:1.5rem} .post-body p:first-of-type{font-family:var(--serif);font-size:clamp(1.3rem,2.2vw,1.62rem); line-height:1.6;color:var(--ink)} .post-body .pull{font-family:var(--serif);font-size:clamp(1.5rem,3vw,2.15rem); line-height:1.35;color:var(--teal);text-align:center; margin:clamp(2.2rem,5vw,3.5rem) 0;padding:clamp(1.6rem,3vw,2.4rem) 0; border-top:1px solid var(--line);border-bottom:1px solid var(--line)} /* Ajakan memesan di akhir artikel jurnal (audit SEO Exely, Agustus 2026). Sengaja kotak terang bertepi, BUKAN salinan .cta — band itu foto gelap selebar layar dan sudah muncul di footer tiap halaman jurnal. Dua band identik beruntun membuat halaman terasa memohon. */ .post-cta{margin-top:clamp(2.5rem,5vw,3.4rem);padding:clamp(1.6rem,3.2vw,2.4rem); background:var(--bg-2);border:1px solid var(--line);border-radius:14px;text-align:center} .post-cta h3{font-family:var(--serif);font-size:clamp(1.5rem,2.6vw,1.95rem);color:var(--ink); font-weight:500;margin:.7rem 0 .6rem;line-height:1.15} .post-cta p{font-size:.99rem;color:var(--ink-soft);max-width:44ch;margin:0 auto 1.5rem} .post-cta .eyebrow{justify-content:center} .post-back{display:flex;justify-content:center;margin-top:clamp(2.5rem,5vw,3.5rem)} /* Seluruh kartu blog bisa diklik lewat tautan "Read more" yang sudah ada — lapisan ::after menutupi kartu. Menghindari bersarang, yang HTML-nya tidak sah, dan tidak butuh JS. */ .blog-card,.blog-feature{position:relative} .blog-card .bmeta a::after,.blog-feature .arrow-link::after{content:"";position:absolute;inset:0;z-index:1} .blog-card{transition:transform .55s cubic-bezier(.2,.7,.2,1),box-shadow .55s ease} .blog-card:hover{transform:translateY(-6px);box-shadow:0 30px 56px -30px rgba(20,58,49,.5)} .blog-card .bimg{transition:transform 1.1s cubic-bezier(.2,.7,.2,1)} .blog-card:hover .bimg{transform:scale(1.05)} .blog-card{overflow:hidden} @media(max-width:980px){ .rg-grid{grid-template-columns:repeat(2,1fr);grid-auto-rows:200px} .rg-grid img:nth-child(1){grid-column:span 2;grid-row:span 1} .rg-grid img:nth-child(6){grid-column:span 1} .amen-grid{grid-template-columns:repeat(2,1fr)} } @media(max-width:880px){ .room-body{grid-template-columns:1fr} .book-card{position:static} } @media(max-width:560px){ .rg-grid{grid-template-columns:1fr;grid-auto-rows:230px} .rg-grid img:nth-child(1){grid-column:span 1} .amen-grid{grid-template-columns:1fr} } /* ═════════════════════════════════════════════════════════════════ PERBAIKAN RESPONSIF & KETERBACAAN ═════════════════════════════════════════════════════════════════ */ /* 1. Menu mobile bocor. Sebelumnya keadaan tertutup hanya translateY(-100%) tanpa disembunyikan. Karena isinya (9 tautan + tombol) bisa lebih tinggi dari viewport, flex centering membuatnya meluber keluar kotak — dan kotak itu cuma digeser setinggi satu viewport, jadi luberannya jatuh kembali ke layar. Itu sebabnya tombol Book Now muncul mengambang di bawah header. Sekarang: benar-benar disembunyikan saat tertutup, dan bisa discroll kalau isinya kepanjangan. */ .mobile-menu{ z-index:70; /* di atas header (60), dulu 55 — itu sebabnya logo tembus ke menu */ justify-content:flex-start; padding-block:5.5rem 3rem; overflow-y:auto; overscroll-behavior:contain; visibility:hidden;pointer-events:none; transition:transform .5s cubic-bezier(.7,0,.2,1),visibility .5s; } .mobile-menu.open{visibility:visible;pointer-events:auto} /* Header disembunyikan selagi menu terbuka supaya logo tidak menimpa daftar menu. Tombol tutup disuntikkan main.js ke dalam menu. */ body.menu-open header{opacity:0;pointer-events:none} /* FAB chat z-index-nya 90, di atas menu — ikut disembunyikan supaya tidak mengambang menutupi daftar menu. */ body.menu-open .chat-fab,body.menu-open .chat-panel{opacity:0;pointer-events:none} .chat-fab{transition:transform .3s ease,background .3s ease,opacity .3s ease} header{transition:background .4s ease,padding .4s ease,box-shadow .4s ease,opacity .3s ease} .mm-close{position:absolute;top:1.15rem;right:var(--pad);z-index:2; width:46px;height:46px;border:1px solid rgba(243,239,230,.28);border-radius:50%; background:none;color:var(--cream);cursor:pointer;display:grid;place-items:center; transition:background .3s ease,transform .3s ease} .mm-close:hover{background:rgba(243,239,230,.12);transform:rotate(90deg)} .mm-close svg{width:19px;height:19px} /* .mobile-menu a menetapkan padding:.5rem 0 dan itu menimpa padding milik .btn karena selektornya lebih spesifik — akibatnya tombol Book Now di menu mobile kehilangan padding kiri-kanan dan tidak terlihat seperti tombol. Dikembalikan di sini dengan spesifisitas yang cukup. */ .mobile-menu a.mm-book{ margin-top:2.2rem;align-self:flex-start; padding:1rem 2.1rem;border-bottom:0;border-radius:999px; background:var(--olive);color:var(--cream);border-color:transparent; min-height:48px;display:inline-flex;align-items:center;justify-content:center; } .mobile-menu a.mm-book:hover{background:var(--cream);color:var(--teal)} /* 2. Teks fasilitas di band gelap. .amen dirancang untuk latar terang, tapi dipakai di dalam .feature.dark — hijau-arang di atas teal gelap, rasio 1.25:1, praktis tak terbaca. */ .feature.dark .amen{border-top-color:rgba(243,239,230,.22)} .feature.dark .amen h4{color:var(--cream)} .feature.dark .amen p{color:rgba(243,239,230,.74)} /* 3. Label emas di latar terang memakai varian gelap agar lolos AA. Garis dekoratif ::before tetap emas cerah. */ .eyebrow{color:var(--gold-ink)} .eyebrow::before{background:var(--gold)} .bcat,.blog-card .bmeta a,.contact-info .l{color:var(--gold-ink)} /* Di latar gelap emas cerah justru yang kontras — kembalikan. */ .sanctuary .eyebrow,.cta .eyebrow,.feature.dark .eyebrow, .mobile-menu .eyebrow{color:var(--gold-lt)} .sanctuary .eyebrow::before,.cta .eyebrow::before, .feature.dark .eyebrow::before{background:var(--gold-lt)} /* 4. Target sentuh minimal 44px di layar sentuh (WCAG 2.5.5). */ .hamburger{min-width:44px;min-height:44px;align-items:center;justify-content:center} .f-news{align-items:center} .f-news input{min-height:44px} .f-news button{min-width:44px;min-height:44px;display:grid;place-items:center} @media(max-width:880px){ .footer-nav a,.f-col a{min-height:40px;display:flex;align-items:center} .ci-row .v a{min-height:40px;display:inline-flex;align-items:center} } /* 5. Pil filter terasa sesak dan terlalu pendek untuk disentuh. Padding dilonggarkan dan tingginya dinaikkan ke 44px. */ .filter-btn{padding:.82rem 1.5rem;min-height:44px;display:inline-flex; align-items:center;justify-content:center} .filter-bar{gap:.6rem;flex-wrap:wrap} /* 6. Tautan teks: minimal 24px tinggi (WCAG 2.5.8 AA). */ .arrow-link,.ig,.bmeta a,.bcat{min-height:24px;align-items:center} .arrow-link,.ig,.bmeta a{display:inline-flex} /* 7. Kicker hero 4.47:1 — meleset tipis dari 4.5. Olive digelapkan sedikit khusus untuk teks kecil ini. */ .hero-kicker{color:#55693a} /* 8. FOOTER MEMBUAT HALAMAN MELAR DI PONSEL 360-393px. .f-top berhenti di 2 kolom (media 980px). Di layar 360px ruangnya cuma ~305px, sedangkan kolom newsletter butuh ~182px dan kolom tautan ~152px: total 374px. Item grid punya min-width:auto bawaan sehingga menolak menyusut, dokumen melar ke 394px, dan halaman jadi bisa digeser ke samping — itu "gap" yang terlihat di ponsel. HP >=412px kebetulan muat, makanya sebagian terlihat normal. */ .f-top > *{min-width:0} .f-news input{min-width:0} @media(max-width:620px){ .f-top{grid-template-columns:1fr;gap:2.2rem} } /* Jaring pengaman: tidak ada satu pun elemen boleh melebihi lebar layar. */ html{overflow-x:hidden} /* 9. FOTO LATAR DITUNDA MUAT. Beranda sempat menarik 5 MB sekaligus karena 13 foto dipasang lewat background-image, yang tidak punya loading="lazy" seperti . URL-nya kini disimpan di --bg. Browser TIDAK mengunduh url() di dalam custom property sampai property itu dipakai, jadi fotonya baru diambil ketika main.js menambahkan .bg-in saat elemen mendekati layar. Blok