/* ========================================================================== CREGasIa Hotel Styles (Home + Index + Detail) — single bundle Namespaced to avoid clashes: .hx-home, .hi-index, .hd-detail ========================================================================== */ /* ============ SHARED TOKENS / UTILITIES (scoped) ============ */ .hx-home, .hi-index, .hd-detail { isolation:isolate; font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans"; } .hx-home *, .hi-index *, .hd-detail *, .hx-home *::before, .hi-index *::before, .hd-detail *::before, .hx-home *::after, .hi-index *::after, .hd-detail *::after { box-sizing: border-box; } .hx-home a, .hi-index a, .hd-detail a { color: inherit; text-decoration: none; } /* Buttons (shared) */ .ch-btn { appearance:none; -webkit-appearance:none; border:1px solid #d1d5db; border-radius:12px; background:#fff; padding:10px 14px; cursor:pointer; font:inherit; line-height:1; } .ch-btn--primary { background:#10b981; color:#fff; border-color:#10b981; } .ch-btn--primary:hover { filter:brightness(.95); } .ch-btn--ghost { background:#fff; border:1px solid #d1d5db; } .ch-badge { font-size:12px; padding:4px 8px; border:1px solid #e5e7eb; border-radius:999px; color:#374151; } /* Section title */ .ch-title { font-weight:800; font-size:20px; margin:20px 0 10px; } /* Cards (shared base) */ .ch-card { border:1px solid #e5e7eb; border-radius:16px; overflow:hidden; background:#fff; box-shadow:0 8px 24px rgba(0,0,0,.06); transition:transform .18s ease, box-shadow .18s ease; display:flex; flex-direction:column; } .ch-card:hover { transform: translateY(-3px); box-shadow:0 14px 36px rgba(0,0,0,.10); } .ch-card__img { width:100%; aspect-ratio:4/3; object-fit:cover; display:block; } .ch-card__body { padding:10px 12px; display:flex; flex-direction:column; gap:6px; } .ch-card__title { font-weight:700; margin:2px 0 4px; } .ch-card__meta { font-size:12px; color:#4b5563; display:flex; gap:10px; flex-wrap:wrap; } /* Grids (shared) */ .ch-grid { display:grid; gap:12px; grid-template-columns: repeat(3,1fr); } @media (max-width:980px){ .ch-grid { grid-template-columns: repeat(2,1fr); } } @media (max-width:560px){ .ch-grid { grid-template-columns: 1fr; } } /* Suggest dropdown (portal fixed on ) */ #hx-sbox, #hi-sbox, #hd-sbox { display:none; position:fixed; z-index:9999; left:0; top:0; width:280px; background:#fff; border:1px solid #e5e7eb; border-radius:12px; box-shadow:0 18px 34px rgba(0,0,0,.16); max-height:min(360px,50vh); overflow:auto; } .suggest__group { padding:6px 12px; font-weight:700; font-size:12px; color:#6b7280; } .suggest__item { padding:10px 12px; display:flex; justify-content:space-between; align-items:center; cursor:pointer; } .suggest__item:hover { background:#f9fafb; } /* ========================================================================== HOME (hx-*) ========================================================================== */ .hx-home .hx-wrap { max-width:1180px; margin:0 auto; padding:16px; } /* Hero */ .hx-home .hx-hero { position:relative; border-radius:24px; overflow:visible; min-height:320px; display:grid; place-items:center; background: radial-gradient(1200px 400px at 100% 0%, rgba(37,99,235,.15), transparent 60%), radial-gradient(1200px 400px at 0% 100%, rgba(16,185,129,.18), transparent 60%), linear-gradient(135deg, #0ea5e9 0%, #2563eb 30%, #111827 100%); } .hx-home .hx-hero__inner { width:100%; max-width:980px; padding:24px; } .hx-home .hx-hero__title { color:#fff; font-weight:800; font-size:clamp(22px,3.2vw,36px); line-height:1.1; margin:6px 0 14px; text-shadow:0 2px 20px rgba(0,0,0,.25); } .hx-home .hx-hero__subtitle { color:rgba(255,255,255,.9); font-size:14px; margin-bottom:12px; } /* Search card (glass) */ .hx-home .hx-search { background:rgba(255,255,255,.92); backdrop-filter:blur(8px); border:1px solid rgba(255,255,255,.6); border-radius:16px; padding:12px; box-shadow:0 20px 50px rgba(0,0,0,.18); } .hx-home .hx-row { display:grid; grid-template-columns:1.8fr 1fr 1fr 1.1fr auto; gap:8px; } @media (max-width:980px){ .hx-home .hx-row { grid-template-columns:1fr 1fr; } } @media (max-width:560px){ .hx-home .hx-row { grid-template-columns:1fr; } } .hx-home .hx-field { display:flex; flex-direction:column; gap:6px; } .hx-home .hx-label { font-size:12px; color:#374151; } .hx-home .hx-input, .hx-home .hx-select, .hx-home .hx-num { width:100%; padding:11px 12px; border:1px solid #d1d5db; border-radius:12px; background:#fff; font:inherit; } .hx-home .hx-field.guests { min-width:220px; } .hx-home .hx-num { text-align:center; min-width:70px; color:#111; font-weight:700; } .hx-home .hx-btn { @apply ch-btn; } /* (no-op for plain CSS; kept for docs) */ /* Featured (Agoda) */ .hx-home .hx-card__price { font-weight:800; } /* LANDMARK — “Mega Mosaic” */ .hx-home .hx-land-grid{ display:grid; gap:12px; grid-template-columns:repeat(6,1fr); grid-auto-rows:130px; } @media (max-width:1180px){ .hx-home .hx-land-grid{ grid-template-columns:repeat(4,1fr); grid-auto-rows:120px; } } @media (max-width:680px){ .hx-home .hx-land-grid{ grid-template-columns:1fr; grid-auto-rows:220px; } } .hx-home .hx-land{ position:relative; border-radius:20px; overflow:hidden; background:#0b1320; box-shadow:0 14px 38px rgba(0,0,0,.18), inset 0 0 0 1px rgba(255,255,255,.06); transition:transform .2s ease, box-shadow .2s ease; } .hx-home .hx-land:hover{ transform:translateY(-2px); box-shadow:0 18px 50px rgba(0,0,0,.22), inset 0 0 0 1px rgba(255,255,255,.08); } .hx-home .hx-land img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transform:scale(1.06); transition:transform .6s ease; filter:saturate(1.02) contrast(1.02); } .hx-home .hx-land:hover img{ transform:scale(1.12); } .hx-home .hx-land::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(0,0,0,0.06) 0%, rgba(0,0,0,0.45) 55%, rgba(0,0,0,0.75) 100%); } .hx-home .hx-land__inner{ position:absolute; left:14px; right:14px; bottom:14px; z-index:2; color:#fff; display:flex; flex-direction:column; gap:6px; text-shadow:0 2px 10px rgba(0,0,0,.35); } .hx-home .hx-land__name{ font-weight:800; letter-spacing:.2px; font-size:clamp(16px,2.4vw,24px); line-height:1.1; } .hx-home .hx-land__meta{ font-size:13px; opacity:.9; display:flex; gap:10px; flex-wrap:wrap; } .hx-home .hx-land__btn{ align-self:flex-start; margin-top:4px; display:inline-block; padding:8px 12px; border-radius:12px; background:rgba(255,255,255,.16); border:1px solid rgba(255,255,255,.35); color:#fff; font-size:13px; backdrop-filter:blur(4px); transition:background .2s ease, transform .1s ease; } .hx-home .hx-land__btn:hover{ background:rgba(255,255,255,.22); } .hx-home .hx-land__btn:active{ transform:translateY(1px); } /* Mosaic spans */ .hx-home .hx-land-item:nth-child(1){ grid-column:span 4; grid-row:span 3; } .hx-home .hx-land-item:nth-child(2){ grid-column:span 2; grid-row:span 3; } .hx-home .hx-land-item:nth-child(3){ grid-column:span 3; grid-row:span 2; } .hx-home .hx-land-item:nth-child(4){ grid-column:span 3; grid-row:span 1; } .hx-home .hx-land-item:nth-child(5){ grid-column:span 2; grid-row:span 2; } .hx-home .hx-land-item:nth-child(6){ grid-column:span 2; grid-row:span 2; } .hx-home .hx-land-item:nth-child(n+7){ grid-column:span 2; grid-row:span 1; } /* ========================================================================== INDEX (hi-*) — listing kota (Agoda) ========================================================================== */ .hi-index .hi-wrap { max-width:1200px; margin:0 auto; padding:16px; } .hi-index .hi-layout { display:grid; grid-template-columns: 280px 1fr; gap:16px; } @media (max-width:980px){ .hi-index .hi-layout{ grid-template-columns:1fr; } } /* Sidebar filter */ .hi-index .hi-side { position:sticky; top:12px; align-self:start; } .hi-index .hi-filter { border:1px solid #e5e7eb; border-radius:16px; background:#fff; padding:12px; box-shadow:0 8px 24px rgba(0,0,0,.06); } .hi-index .hi-filter h4 { margin:6px 0 10px; font-size:14px; font-weight:800; } .hi-index .hi-field { display:flex; flex-direction:column; gap:6px; margin-bottom:10px; } .hi-index .hi-label { font-size:12px; color:#374151; } .hi-index .hi-input, .hi-index .hi-select, .hi-index .hi-range { width:100%; padding:10px 12px; border:1px solid #d1d5db; border-radius:10px; background:#fff; font:inherit; } .hi-index .hi-apply { width:100%; } /* Result list */ .hi-index .hi-main .ch-grid { grid-template-columns: repeat(3,1fr); } @media (max-width:980px){ .hi-index .hi-main .ch-grid { grid-template-columns: repeat(2,1fr); } } @media (max-width:560px){ .hi-index .hi-main .ch-grid { grid-template-columns: 1fr; } } .hi-index .hi-card__price { font-weight:800; } .hi-index .hi-empty { padding:16px; border:1px dashed #d1d5db; border-radius:12px; color:#6b7280; background:#fafafa; } /* Search bar atas (opsional) */ .hi-index .hi-searchbar { display:grid; grid-template-columns:1.6fr 1fr 1fr .9fr auto; gap:8px; margin-bottom:12px; } @media (max-width:980px){ .hi-index .hi-searchbar { grid-template-columns:1fr 1fr; } } @media (max-width:560px){ .hi-index .hi-searchbar { grid-template-columns:1fr; } } .hi-index .hi-picked { font-size:12px; color:#2563eb; margin-top:6px; } /* ========================================================= DETAIL PAGE (scoped) — .hd-detail ========================================================= */ .hd-detail { isolation:isolate; font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans"; width:100%; max-width:100vw; overflow-x: clip; } @supports not (overflow: clip) { .hd-detail { overflow-x: hidden; } } .hd-detail *, .hd-detail *::before, .hd-detail *::after { box-sizing: border-box; } .hd-detail a { color: inherit; text-decoration: none; } .hd-detail img, .hd-detail iframe, .hd-detail video { max-width: 100%; height: auto; display:block; } /* ===== WRAPPER & GRID ===== */ .hd-detail .hd-wrap { max-width: 1200px; margin: 0 auto; padding: 16px; } .hd-detail .hd-grid { display: grid; grid-template-columns: 1fr 340px; gap: 18px; } .hd-detail .hd-grid > * { min-width: 0; } @media (max-width: 1024px){ .hd-detail .hd-grid { grid-template-columns: 1fr; } } .hd-detail .hd-hide { display: none !important; } /* ===== BREADCRUMB ===== */ .hd-detail .breadcrumb { font-size: 12px; color: #6b7280; display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 8px; } .hd-detail .breadcrumb a { color: #111827; text-decoration: underline; } /* ===== HERO ===== */ .hd-detail .hd-hero { display: flex; flex-direction: column; gap: 6px; margin-bottom: 8px; } .hd-detail .hd-title { font-size: clamp(22px, 3vw, 32px); font-weight: 800; line-height: 1.15; margin: 0; } .hd-detail .hd-sub { color: #4b5563; } .hd-detail .hd-tags { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 6px; } .hd-detail .hd-chip { font-size: 12px; padding: 4px 10px; border: 1px solid #e5e7eb; border-radius: 999px; background: #fff; } /* ===== GALLERY (main + thumbs) ===== */ .hd-detail .hd-gallery { display: grid; grid-template-columns: 1fr; gap: 10px; } .hd-detail .hd-mainimg { position: relative; border-radius: 16px; overflow: hidden; background: #0b1320; box-shadow: 0 10px 30px rgba(0,0,0,.12); } .hd-detail .hd-mainimg img { width: 100%; height: 520px; object-fit: cover; } @media (max-width: 768px){ .hd-detail .hd-mainimg img { height: 320px; } } .hd-detail .hd-thumbs { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; } @media (max-width: 640px){ .hd-detail .hd-thumbs { grid-template-columns: repeat(4, 1fr); } } @media (max-width: 420px){ .hd-detail .hd-thumbs { grid-template-columns: repeat(3, 1fr); } } .hd-detail .hd-thumb { border-radius: 12px; overflow: hidden; cursor: pointer; border: 1px solid #e5e7eb; background: #fff; } .hd-detail .hd-thumb img { width: 100%; height: 90px; object-fit: cover; transition: transform .25s ease; } .hd-detail .hd-thumb:hover img { transform: scale(1.06); } /* ===== STICKY BOOKING CARD ===== */ .hd-detail .hd-sticky { position: sticky; top: 12px; align-self: start; } .hd-detail .hd-book { border: 1px solid #e5e7eb; border-radius: 16px; background: #fff; box-shadow: 0 10px 26px rgba(0,0,0,.08); padding: 14px; } .hd-detail .hd-book h3 { margin: 0 0 10px; font-size: 16px; font-weight: 800; } .hd-detail .hd-formrow { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } .hd-detail .hd-field { display: flex; flex-direction: column; gap: 6px; } .hd-detail .hd-label { font-size: 12px; color: #374151; } .hd-detail .hd-input { width: 100%; padding: 11px 12px; border: 1px solid #d1d5db; border-radius: 12px; background: #fff; font: inherit; } .hd-detail .hd-guest { display: flex; gap: 8px; align-items: center; } .hd-detail .hd-num { width: 100%; text-align: center; font-weight: 700; padding: 10px 12px; border: 1px solid #d1d5db; border-radius: 12px; background: #fff; } /* ===== BUTTONS ===== */ .hd-detail .hd-btn { appearance:none; border:1px solid #d1d5db; border-radius:12px; padding:10px 14px; background:#fff; cursor:pointer; transition: filter .15s ease, background-color .15s ease, border-color .15s ease, color .15s ease; } .hd-detail .hd-btn:disabled { opacity:.6; cursor:not-allowed; } .hd-detail .hd-btn--primary { background:#2563eb; border-color:#2563eb; color:#fff; } .hd-detail .hd-btn--primary:hover { filter:brightness(.97); } /* brand teal for “Lihat” buttons & Agoda button */ .hd-detail .hd-btn--brand{ background:#008080; border-color:#008080; color:#fff; } .hd-detail .hd-btn--brand:hover{ filter:brightness(.96); } .hd-detail .hd-btn--brand-ghost{ background:#fff; border-color:#008080; color:#008080; } .hd-detail .hd-btn--brand-ghost:hover{ background:#f0fdfa; } /* center wrapper untuk tombol Agoda */ .hd-detail .hd-btnwrap-center{ text-align:center; } /* tombol inline: full di mobile, auto di desktop */ .hd-detail .hd-btn--inline{ width:100%; } @media (min-width:768px){ .hd-detail .hd-btn--inline{ width:auto; min-width:200px; } } /* ===== GENERIC SECTION ===== */ .hd-detail .hd-section { margin-top: 18px; } .hd-detail .hd-h3 { font-size: 18px; font-weight: 800; margin: 0 0 8px; } .hd-detail .hd-text { color: #374151; line-height: 1.7; } /* ===== MAP ===== */ .hd-detail .hd-map { border-radius:16px; overflow:hidden; box-shadow:0 8px 24px rgba(0,0,0,.06); } .hd-detail .hd-map iframe{ width:100%; height: clamp(260px, 42vh, 520px); display:block; } /* ===== NEARBY (Agoda) — horizontal carousel ===== */ .hd-detail .hd-nearbar { display:flex; align-items:center; justify-content:space-between; gap:8px; } .hd-detail .hd-nav { display:flex; gap:8px; } .hd-detail .hd-sbtn { border:1px solid #d1d5db; border-radius:10px; background:#fff; padding:8px 10px; cursor:pointer; } .hd-detail .hd-snapwrap { position:relative; } .hd-detail .hd-snap { display:grid; grid-auto-flow: column; grid-auto-columns: minmax(280px, 320px); gap:12px; overflow:auto; scroll-snap-type:x mandatory; padding-bottom: 6px; -webkit-overflow-scrolling: touch; } .hd-detail .hd-snap::-webkit-scrollbar { height: 8px; } .hd-detail .hd-snap::-webkit-scrollbar-thumb { background:#e5e7eb; border-radius:999px; } .hd-detail .hd-card { border:1px solid #e5e7eb; border-radius:14px; overflow:hidden; background:#fff; box-shadow:0 8px 24px rgba(0,0,0,.06); scroll-snap-align: start; } .hd-detail .hd-card__img { width:100%; height:160px; object-fit:cover; } .hd-detail .hd-card__body { padding:10px 12px; } .hd-detail .ch-card__title { font-weight:700; margin-bottom:4px; } .hd-detail .hd-meta { font-size:12px; color:#4b5563; display:flex; gap:10px; flex-wrap:wrap; } .hd-detail .hd-price { font-weight:800; margin-top:6px; } /* ===== NEARBY (DB lokal) list ===== */ .hd-detail .hd-locallist { display:grid; gap:10px; } .hd-detail .hd-locitem { display:flex; gap:10px; border:1px solid #e5e7eb; border-radius:12px; padding:8px; background:#fff; } .hd-detail .hd-locitem img { width:92px; height:68px; object-fit:cover; border-radius:8px; } .hd-detail .hd-locmeta { font-size:12px; color:#6b7280; } /* ===== Minimal card (fallback message) ===== */ .hd-detail .ch-card { border:1px solid #e5e7eb; border-radius:12px; background:#fff; } .hd-detail .ch-card__body { padding:12px; } /* Posisi & ukuran tombol Cek Ketersediaan */ .hd-detail .hd-book .hd-cta{ margin-top: 16px; /* kasih jarak dari field di atas */ display: flex; justify-content: center; /* center horizontal */ } .hd-detail .hd-book .hd-cta .hd-btn{ /* mobile: full (karena .hd-btn--inline) */ } @media (min-width: 768px){ .hd-detail .hd-book .hd-cta .hd-btn{ width: auto; /* desktop: tidak 100% */ min-width: 220px; /* biar proporsional */ } }