/** * Multi-Day customer UI — premium neumorphism. * * Soft extruded surfaces with a paired light/dark shadow, inset states for * anything the customer can press into, and no hard borders. Mobile-first: * the base rules are the phone layout, breakpoints add the desktop columns. */ /* * Tokens are shared with .el-md-cal--neu because the UI kit attaches the * calendar popup to , outside the page wrapper, so it can escape * overflow and stacking contexts. */ .el-md, .el-md-cal--neu { --md-bg: #e2f1f5; --md-surface: #e2f1f5; --md-ink: #1e2430; --md-ink-soft: #5b6472; --md-ink-faint: #8b94a3; --md-accent: #1f7a63; --md-accent-soft: #dceee8; --md-danger: #b3261e; --md-warning: #8a5a06; --md-light: rgba(255, 255, 255, 0.92); --md-dark: rgba(151, 177, 197, 0.55); --md-out: -6px -6px 14px var(--md-light), 6px 6px 16px var(--md-dark); --md-out-sm: -3px -3px 7px var(--md-light), 3px 3px 8px var(--md-dark); --md-out-lg: -10px -10px 24px var(--md-light), 12px 12px 30px var(--md-dark); --md-in: inset -3px -3px 7px var(--md-light), inset 3px 3px 8px var(--md-dark); --md-in-deep: inset -5px -5px 12px var(--md-light), inset 5px 5px 14px var(--md-dark); --md-radius: 18px; --md-radius-sm: 12px; --md-radius-lg: 26px; } .el-md { background: var(--md-bg); color: var(--md-ink); font-size: 16px; line-height: 1.6; padding: 20px 16px 56px; } .el-md *, .el-md *::before, .el-md *::after, .el-md-cal--neu *, .el-md-cal--neu *::before, .el-md-cal--neu *::after { box-sizing: border-box; } .el-md-surface { background: var(--md-surface); border-radius: var(--md-radius); box-shadow: var(--md-out); padding: 20px; } /* ------------------------------------------------------------------- hero */ .el-md-hero { margin-bottom: 22px; } /* ------------------------------------------------------------------ */ /* Gallery — responsive bento collage, same model as One Day Trip */ /* Breakpoints: desktop >=1024 | tablet 768-1023 | mobile <768 */ /* ------------------------------------------------------------------ */ .el-md-gallery-block { margin-bottom: 20px; padding: 0; border-radius: var(--md-radius-lg); overflow: hidden; background: transparent; box-shadow: var(--md-out-lg); } .el-md-collage { display: grid; gap: 4px; width: 100%; aspect-ratio: 16 / 9; height: auto; max-height: 520px; margin: 0; padding: 0; border-radius: inherit; overflow: hidden; background: #c5d5de; box-shadow: none; } .el-md-collage__item { margin: 0; min-width: 0; min-height: 0; overflow: hidden; position: relative; border-radius: 0; background: #dbe6ee; } .el-md-collage__hit { display: block; width: 100%; height: 100%; padding: 0; margin: 0; border: 0; background: transparent; cursor: zoom-in; position: relative; overflow: hidden; border-radius: inherit; } .el-md-collage__item img { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; transition: transform 0.45s ease; } .el-md-collage__zoom { position: absolute; right: 10px; bottom: 10px; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: rgba(15, 28, 36, 0.48); backdrop-filter: blur(8px); color: #fff; opacity: 0; transform: translateY(4px); transition: opacity 0.2s ease, transform 0.2s ease; pointer-events: none; z-index: 2; } .el-md-collage__zoom svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .el-md-collage__item:hover img, .el-md-collage__hit:focus-visible img { transform: scale(1.04); } .el-md-collage__item:hover .el-md-collage__zoom, .el-md-collage__hit:focus-visible .el-md-collage__zoom { opacity: 1; transform: translateY(0); } .el-md-collage__more, .el-md-collage__badge { position: absolute; inset: 0; display: none; align-items: center; justify-content: center; margin: 0; padding: 10px 14px; border: 0; background: rgba(8, 16, 22, 0.58); color: #fff; font-size: 1rem; font-weight: 800; letter-spacing: 0.04em; text-align: center; pointer-events: none; z-index: 3; } .el-md-collage__badge { inset: auto 10px 10px auto; border-radius: 999px; background: rgba(8, 16, 22, 0.72); backdrop-filter: blur(8px); font-size: 0.78rem; letter-spacing: 0.06em; padding: 8px 12px; } /* ---- Desktop default (>=1024): set by cascade; base = desktop ---- */ .el-md-collage--n1 { grid-template-columns: 1fr; grid-template-rows: 1fr; aspect-ratio: 21 / 9; } .el-md-collage--n2 { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr; } .el-md-collage--n3 { grid-template-columns: 1.55fr 1fr; grid-template-rows: 1fr 1fr; } .el-md-collage--n3 .el-md-collage__item--1 { grid-column: 1; grid-row: 1 / span 2; } .el-md-collage--n3 .el-md-collage__item--2 { grid-column: 2; grid-row: 1; } .el-md-collage--n3 .el-md-collage__item--3 { grid-column: 2; grid-row: 2; } /* 4 photos: portrait | stacked landscapes | portrait (column width follows photo AR) */ .el-md-collage--n4 { grid-template-columns: minmax(0, calc(var(--el-md-col-a, 0.75) * 1fr)) minmax(0, calc(var(--el-md-col-b, 1.35) * 1fr)) minmax(0, calc(var(--el-md-col-c, 0.75) * 1fr)); grid-template-rows: 1fr 1fr; } .el-md-collage--n4 .el-md-collage__item--1 { grid-column: 1; grid-row: 1 / span 2; } .el-md-collage--n4 .el-md-collage__item--2 { grid-column: 2; grid-row: 1; } .el-md-collage--n4 .el-md-collage__item--3 { grid-column: 2; grid-row: 2; } .el-md-collage--n4 .el-md-collage__item--4 { grid-column: 3; grid-row: 1 / span 2; } /* 5 photos / 6+: classic bento 1 + 2x2 (columns follow photo AR) */ .el-md-collage--n5, .el-md-collage--more { grid-template-columns: minmax(0, calc(var(--el-md-col-a, 1.4) * 1fr)) minmax(0, calc(var(--el-md-col-b, 1) * 1fr)) minmax(0, calc(var(--el-md-col-c, 1) * 1fr)); grid-template-rows: 1fr 1fr; } .el-md-collage--n5 .el-md-collage__item--1, .el-md-collage--more .el-md-collage__item--1 { grid-column: 1; grid-row: 1 / span 2; } .el-md-collage--n5 .el-md-collage__item--2, .el-md-collage--more .el-md-collage__item--2 { grid-column: 2; grid-row: 1; } .el-md-collage--n5 .el-md-collage__item--3, .el-md-collage--more .el-md-collage__item--3 { grid-column: 3; grid-row: 1; } .el-md-collage--n5 .el-md-collage__item--4, .el-md-collage--more .el-md-collage__item--4 { grid-column: 2; grid-row: 2; } .el-md-collage--n5 .el-md-collage__item--5, .el-md-collage--more .el-md-collage__item--5 { grid-column: 3; grid-row: 2; } .el-md-collage--more .el-md-collage__item--5 .el-md-collage__zoom { display: none; } .el-md-collage--more .el-md-collage__more--desktop { display: flex; } /* Tablet: 768-1023 */ @media (max-width: 1023px) and (min-width: 768px) { .el-md-collage { aspect-ratio: 16 / 10; max-height: 420px; } .el-md-collage--n4 .el-md-collage__item--4, .el-md-collage--n5 .el-md-collage__item--4, .el-md-collage--n5 .el-md-collage__item--5, .el-md-collage--more .el-md-collage__item--4, .el-md-collage--more .el-md-collage__item--5 { display: none; } .el-md-collage--n4, .el-md-collage--n5, .el-md-collage--more { grid-template-columns: 1.55fr 1fr; grid-template-rows: 1fr 1fr; } .el-md-collage--n4 .el-md-collage__item--1, .el-md-collage--n5 .el-md-collage__item--1, .el-md-collage--more .el-md-collage__item--1 { grid-column: 1; grid-row: 1 / span 2; } .el-md-collage--n4 .el-md-collage__item--2, .el-md-collage--n5 .el-md-collage__item--2, .el-md-collage--more .el-md-collage__item--2 { grid-column: 2; grid-row: 1; } .el-md-collage--n4 .el-md-collage__item--3, .el-md-collage--n5 .el-md-collage__item--3, .el-md-collage--more .el-md-collage__item--3 { grid-column: 2; grid-row: 2; } .el-md-collage__more--desktop { display: none !important; } .el-md-collage--n4 .el-md-collage__more--tablet, .el-md-collage--n5 .el-md-collage__more--tablet, .el-md-collage--more .el-md-collage__more--tablet { display: flex; } } /* Mobile: < 768 */ @media (max-width: 767px) { .el-md-gallery-block { overflow: hidden; } .el-md-collage { aspect-ratio: auto; max-height: none; gap: 4px; overflow: hidden; } .el-md-collage__more--desktop, .el-md-collage__more--tablet { display: none !important; } .el-md-collage__badge--mobile { display: inline-flex; } .el-md-collage--n1, .el-md-collage--n2, .el-md-collage--n4, .el-md-collage--n5, .el-md-collage--more { grid-template-columns: 1fr; grid-template-rows: auto; } .el-md-collage--n1 .el-md-collage__item, .el-md-collage--n2 .el-md-collage__item--1, .el-md-collage--n4 .el-md-collage__item--1, .el-md-collage--n5 .el-md-collage__item--1, .el-md-collage--more .el-md-collage__item--1 { grid-column: 1; grid-row: 1; aspect-ratio: 16 / 10; } .el-md-collage--n2 .el-md-collage__item--2, .el-md-collage--n4 .el-md-collage__item--2, .el-md-collage--n4 .el-md-collage__item--3, .el-md-collage--n4 .el-md-collage__item--4, .el-md-collage--n5 .el-md-collage__item--2, .el-md-collage--n5 .el-md-collage__item--3, .el-md-collage--n5 .el-md-collage__item--4, .el-md-collage--n5 .el-md-collage__item--5, .el-md-collage--more .el-md-collage__item--2, .el-md-collage--more .el-md-collage__item--3, .el-md-collage--more .el-md-collage__item--4, .el-md-collage--more .el-md-collage__item--5 { display: none; } /* 3 photos: hero + 2 side-by-side */ .el-md-collage--n3 { grid-template-columns: 1fr 1fr; grid-template-rows: auto auto; } .el-md-collage--n3 .el-md-collage__item--1 { grid-column: 1 / span 2; grid-row: 1; aspect-ratio: 16 / 10; } .el-md-collage--n3 .el-md-collage__item--2, .el-md-collage--n3 .el-md-collage__item--3 { aspect-ratio: 4 / 3; display: block; } .el-md-collage--n3 .el-md-collage__item--2 { grid-column: 1; grid-row: 2; } .el-md-collage--n3 .el-md-collage__item--3 { grid-column: 2; grid-row: 2; } .el-md-collage--n3 .el-md-collage__badge--mobile { display: none; } } /* ------------------------------------------------------------------ */ /* Gallery lightbox — full-view slider, same behaviour as One Day Trip */ /* ------------------------------------------------------------------ */ html.el-md-gallery-open, html.el-md-gallery-open body { overflow: hidden; } .el-md-gallery-lb[hidden] { display: none !important; } .el-md-gallery-lb { position: fixed; inset: 0; z-index: 2147483000; display: grid; place-items: center; padding: 12px; box-sizing: border-box; /* Desktop: leave room for side arrows. Mobile overrides below. */ --el-md-lb-img-max-w: min(calc(100vw - 140px), 1040px); --el-md-lb-img-max-h: min(78vh, 820px); } .el-md-gallery-lb__backdrop { position: absolute; inset: 0; z-index: 0; background: rgba(8, 16, 22, 0.78); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); animation: el-md-modal-backdrop-in 0.3s ease both; } .el-md-gallery-lb__dialog { position: relative; z-index: 1; width: auto; max-width: min(96vw, 1200px); max-height: min(94vh, 960px); min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 0; box-sizing: border-box; animation: el-md-modal-dialog-in 0.38s cubic-bezier(0.22, 1, 0.36, 1) both; transform-origin: 50% 50%; pointer-events: none; } .el-md-gallery-lb__dialog > * { pointer-events: auto; } .el-md-gallery-lb__viewer { display: flex; align-items: center; justify-content: center; gap: 14px; width: auto; max-width: 100%; pointer-events: auto; } .el-md-gallery-lb__close { position: absolute; display: inline-flex !important; align-items: center; justify-content: center; top: 16px; right: 16px; width: 48px; height: 48px; margin: 0; padding: 0; border: 0; border-radius: 999px; background: rgba(15, 28, 36, 0.88) !important; color: #fff !important; box-shadow: 0 10px 28px rgba(0, 0, 0, 0.35); cursor: pointer; transition: background 0.15s ease, transform 0.15s ease; z-index: 5; appearance: none; -webkit-appearance: none; opacity: 1 !important; visibility: visible !important; pointer-events: auto; } .el-md-gallery-lb__nav { position: relative; flex: 0 0 auto; display: inline-flex !important; align-items: center; justify-content: center; top: auto; left: auto; right: auto; width: 46px; height: 46px; margin: 0; padding: 0; border: 0; border-radius: 999px; background: rgba(15, 28, 36, 0.88) !important; color: #fff !important; box-shadow: 0 10px 28px rgba(0, 0, 0, 0.35); cursor: pointer; transition: background 0.15s ease, transform 0.15s ease; z-index: 2; appearance: none; -webkit-appearance: none; opacity: 1 !important; visibility: visible !important; pointer-events: auto; transform: none; } .el-md-gallery-lb__close:hover, .el-md-gallery-lb__nav:hover { background: rgba(31, 122, 99, 0.92) !important; transform: translateY(-1px); color: #fff !important; } .el-md-gallery-lb__close svg, .el-md-gallery-lb__nav svg { width: 20px; height: 20px; display: block; fill: none !important; stroke: currentColor !important; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; } .el-md-gallery-lb__stage { margin: 0; min-width: 0; min-height: 0; flex: 0 1 auto; display: flex; align-items: center; justify-content: center; width: auto; max-width: 100%; border-radius: 0; overflow: visible; background: transparent; box-shadow: none; } .el-md-gallery-lb__img { display: block; max-width: var(--el-md-lb-img-max-w); max-height: var(--el-md-lb-img-max-h); width: auto; height: auto; object-fit: contain; object-position: center; border-radius: 14px; box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35); opacity: 0; transform: scale(0.985); transition: opacity 0.25s ease, transform 0.25s ease; } .el-md-gallery-lb__img.is-ready { opacity: 1; transform: scale(1); } .el-md-gallery-lb__foot { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; padding: 4px 8px 0; color: rgba(255, 255, 255, 0.92); text-align: center; } .el-md-gallery-lb__counter { margin: 0; font-size: 11px; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(255, 255, 255, 0.62); text-align: center; } .el-md-gallery-lb__caption { margin: 0; max-width: 36rem; font-size: 0.98rem; font-weight: 600; line-height: 1.35; text-align: center; color: rgba(255, 255, 255, 0.94); } .el-md-gallery-lb__thumbs { display: flex; justify-content: flex-start; align-items: center; gap: 10px; width: 100%; max-width: min(96vw, 1120px); min-width: 0; padding: 16px 16px 5px; box-sizing: border-box; overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; touch-action: pan-x; overscroll-behavior-x: contain; scroll-snap-type: x proximity; scroll-padding-inline: 16px; scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, 0.55) rgba(255, 255, 255, 0.14); } .el-md-gallery-lb__thumbs.is-centered { justify-content: center; scroll-snap-type: none; } .el-md-gallery-lb__thumbs.is-start { justify-content: flex-start; } .el-md-gallery-lb__thumbs.is-start .el-md-gallery-lb__thumb { scroll-snap-align: start; } .el-md-gallery-lb__thumbs::-webkit-scrollbar { height: 6px; display: block; } .el-md-gallery-lb__thumbs::-webkit-scrollbar-track { background: rgba(255, 255, 255, 0.14); border-radius: 999px; } .el-md-gallery-lb__thumbs::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.55); border-radius: 999px; } .el-md-gallery-lb__thumb { flex: 0 0 auto; width: 84px; height: 60px; padding: 0; border: 0; border-radius: 10px; overflow: hidden; opacity: 0.55; cursor: pointer; scroll-snap-align: center; background: rgba(255, 255, 255, 0.08); box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.12); transition: opacity 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease; } .el-md-gallery-lb__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; } .el-md-gallery-lb__thumb.is-active, .el-md-gallery-lb__thumb:hover { opacity: 1; transform: translateY(-1px); box-shadow: 0 0 0 2px rgba(31, 122, 99, 0.85); } @media (max-width: 1023px) { .el-md-gallery-lb__thumbs { padding-top: 18px; width: 100%; max-width: 100%; -webkit-overflow-scrolling: touch; touch-action: pan-x; } } @media (max-width: 720px) { .el-md-gallery-lb { padding: 8px; box-sizing: border-box; --el-md-lb-img-max-w: 100%; --el-md-lb-img-max-h: min(68dvh, 68vh, 640px); } .el-md-gallery-lb__dialog { padding: 0; width: 100%; max-width: 100%; min-width: 0; max-height: min(100dvh, 100vh); gap: 8px; overflow-x: hidden; overflow-y: visible; } .el-md-gallery-lb__viewer { position: relative; display: block; width: 100%; max-width: 100%; min-width: 0; overflow: visible; } .el-md-gallery-lb__stage { margin: 0; min-height: 0; min-width: 0; width: 100%; max-width: 100%; border-radius: 0; overflow: visible; display: flex; align-items: center; justify-content: center; } .el-md-gallery-lb__img { width: auto !important; max-width: 100% !important; height: auto !important; max-height: var(--el-md-lb-img-max-h) !important; object-fit: contain !important; object-position: center !important; border-radius: 12px; box-shadow: 0 16px 40px rgba(0, 0, 0, 0.35); } .el-md-gallery-lb__thumbs { width: 100%; max-width: 100%; min-width: 0; flex: 0 0 auto; align-self: stretch; } /* Arrows overlay on photo edges — neumorphism */ .el-md-gallery-lb__nav { position: absolute; top: 50%; z-index: 6; width: 42px; height: 42px; transform: translateY(-50%); background: var(--md-bg, #e2f1f5) !important; color: var(--md-accent, #1f7a63) !important; box-shadow: 5px 5px 12px rgba(0, 0, 0, 0.28), -3px -3px 8px rgba(255, 255, 255, 0.55) !important; } .el-md-gallery-lb__nav:hover, .el-md-gallery-lb__nav:active { background: var(--md-bg, #e2f1f5) !important; color: var(--md-accent, #1f7a63) !important; transform: translateY(-50%); box-shadow: inset 3px 3px 7px rgba(126, 157, 166, 0.35), inset -2px -2px 6px rgba(255, 255, 255, 0.7) !important; } .el-md-gallery-lb__nav--prev { left: 10px; right: auto; } .el-md-gallery-lb__nav--next { right: 10px; left: auto; } .el-md-gallery-lb__close { top: 10px; right: 10px; width: 44px; height: 44px; background: var(--md-bg, #e2f1f5) !important; color: var(--md-accent, #1f7a63) !important; box-shadow: 5px 5px 12px rgba(0, 0, 0, 0.28), -3px -3px 8px rgba(255, 255, 255, 0.55) !important; } .el-md-gallery-lb__close:hover { background: var(--md-bg, #e2f1f5) !important; color: var(--md-accent, #1f7a63) !important; box-shadow: inset 3px 3px 7px rgba(126, 157, 166, 0.35), inset -2px -2px 6px rgba(255, 255, 255, 0.7) !important; } .el-md-gallery-lb__foot { padding: 8px 4px 0; flex-direction: column; align-items: center; justify-content: center; gap: 4px; text-align: center; } .el-md-gallery-lb__caption { text-align: center; font-size: 0.9rem; } .el-md-gallery-lb__counter { text-align: center; } .el-md-gallery-lb__thumbs { padding: 18px 16px 5px; width: 100%; max-width: 100%; } } @keyframes el-md-modal-backdrop-in { from { opacity: 0; } to { opacity: 1; } } @keyframes el-md-modal-dialog-in { from { opacity: 0; transform: translate3d(0, 16px, 0) scale(0.985); } to { opacity: 1; transform: translate3d(0, 0, 0) scale(1); } } @media (prefers-reduced-motion: reduce) { .el-md-gallery-lb__backdrop, .el-md-gallery-lb__dialog, .el-md-gallery-lb__img, .el-md-collage__item img, .el-md-collage__zoom { animation: none !important; transition: none !important; } } .el-md-breadcrumbs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; } .el-md-breadcrumbs a { font-size: 13px; color: var(--md-accent); text-decoration: none; padding: 4px 12px; border-radius: 999px; box-shadow: var(--md-out-sm); } .el-md-hero__title { margin: 0; font-size: 27px; line-height: 1.15; font-weight: 900; font-synthesis: weight; letter-spacing: -0.02em; text-align: center; color: var(--md-ink); /* Theme fonts often stop at 700 — stroke + micro offsets thicken the glyphs */ -webkit-text-stroke: 0.55px var(--md-ink); paint-order: stroke fill; /* Soft extruded type — paired light/dark like surface neumorphism */ text-shadow: 0.35px 0 0 var(--md-ink), -0.35px 0 0 var(--md-ink), 0 0.35px 0 var(--md-ink), 0 -0.35px 0 var(--md-ink), -2px -2px 3px var(--md-light), 2px 3px 6px var(--md-dark); } .el-md-hero__meta { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin: 0 0 12px; } .el-md-pill { display: inline-flex; align-items: center; padding: 7px 15px; border-radius: var(--md-radius-sm); background: var(--md-surface); box-shadow: var(--md-out-sm); font-size: 13px; font-weight: 600; color: var(--md-ink-soft); } .el-md-hero__excerpt { margin: 0; color: var(--md-ink-soft); } /* ----------------------------------------------------------------- layout */ .el-md-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 22px; } .el-md-section { margin-bottom: 20px; } .el-md-section__title { margin: 0 0 14px; font-size: 18px; font-weight: 700; letter-spacing: -0.01em; } .el-md-prose { color: var(--md-ink-soft); } .el-md-prose > *:first-child { margin-top: 0; } .el-md-prose > *:last-child { margin-bottom: 0; } .el-md-lists { display: grid; gap: 18px; } .el-md-list h3 { margin: 0 0 8px; font-size: 14px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--md-ink-faint); } .el-md-list ul { margin: 0; padding: 0; list-style: none; } .el-md-list li { position: relative; padding: 5px 0 5px 26px; font-size: 15px; color: var(--md-ink-soft); } .el-md-list li::before { position: absolute; left: 0; top: 5px; width: 18px; height: 18px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 11px; box-shadow: var(--md-out-sm); } .el-md-list--include li::before { content: '✓'; color: var(--md-accent); } .el-md-list--exclude li::before { content: '×'; color: var(--md-danger); } .el-md-list--notes li::before { content: 'i'; color: var(--md-ink-faint); font-style: italic; } /* ------------------------------------------- include sheet (premium detail) */ .el-md-sheet--include .el-md-sheet__head { padding-bottom: 10px; } .el-md-sheet--include .el-md-sheet__head h2 { font-size: 18px; letter-spacing: -0.01em; } .el-md-sheet--include .el-md-sheet__body { display: grid; gap: 18px; padding-top: 4px; } .el-md-include-hotels { display: grid; gap: 14px; } .el-md-ihotel { overflow: hidden; border-radius: 18px; background: var(--md-surface, #fff); box-shadow: var(--md-out-sm); } .el-md-ihotel__body { padding: 14px 16px 16px; display: grid; gap: 8px; } .el-md-ihotel__stars { font-size: 12px; letter-spacing: 0.12em; color: #d8a33a; } .el-md-ihotel__name { margin: 0; font-size: 18px; font-weight: 700; letter-spacing: -0.015em; color: var(--md-ink); } .el-md-ihotel__meta { display: flex; flex-wrap: wrap; gap: 4px 12px; margin: 0; font-size: 13px; color: var(--md-ink-faint); } .el-md-ihotel__room { display: grid; gap: 2px; padding: 10px 12px; border-radius: 12px; box-shadow: var(--md-in); background: color-mix(in srgb, var(--md-accent) 6%, transparent); } .el-md-ihotel__room-label { font-size: 11px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--md-ink-faint); } .el-md-ihotel__room strong { font-size: 15px; font-weight: 700; color: var(--md-accent); } .el-md-ihotel__desc, .el-md-ihotel__note { margin: 0; font-size: 13px; line-height: 1.45; color: var(--md-ink-soft); } .el-md-ihotel__note { color: var(--md-warning, #b7791f); } .el-md-ihotel__facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 2px 0 0; } .el-md-ihotel__facts > div { padding: 8px 10px; border-radius: 10px; box-shadow: var(--md-in); } .el-md-ihotel__facts dt { margin: 0 0 2px; font-size: 10px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--md-ink-faint); } .el-md-ihotel__facts dd { margin: 0; font-size: 13px; font-weight: 600; color: var(--md-ink); } .el-md-ihotel-gallery { position: relative; } .el-md-ihotel-gallery__stage { position: relative; aspect-ratio: 16 / 10; background: color-mix(in srgb, var(--md-ink) 6%, transparent); overflow: hidden; } .el-md-ihotel-gallery__img { width: 100%; height: 100%; object-fit: cover; display: block; opacity: 0; transition: opacity 0.25s ease; } .el-md-ihotel-gallery__img.is-ready { opacity: 1; } .el-md-ihotel-gallery__nav { position: absolute; top: 50%; left: auto; right: auto; z-index: 2; display: inline-flex !important; align-items: center; justify-content: center; width: 34px !important; height: 34px !important; min-width: 34px !important; min-height: 34px !important; margin: 0 !important; padding: 0 !important; border: 0 !important; border-radius: 999px !important; background: rgba(255, 255, 255, 0.88) !important; box-shadow: var(--md-out-sm) !important; color: var(--md-ink) !important; font-size: 0 !important; line-height: 0 !important; cursor: pointer; appearance: none; -webkit-appearance: none; transform: translateY(-50%); opacity: 1 !important; visibility: visible !important; } .el-md-ihotel-gallery__nav:hover, .el-md-ihotel-gallery__nav:focus, .el-md-ihotel-gallery__nav:focus-visible, .el-md-ihotel-gallery__nav:active { background: rgba(255, 255, 255, 0.96) !important; color: var(--md-ink) !important; outline: none; } .el-md-ihotel-gallery__nav svg { width: 16px; height: 16px; display: block; fill: none !important; stroke: currentColor !important; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; pointer-events: none; } .el-md-ihotel-gallery__nav--prev { left: 10px !important; right: auto !important; } .el-md-ihotel-gallery__nav--next { right: 10px !important; left: auto !important; } .el-md-ihotel-gallery__dots { position: absolute; left: 0; right: 0; bottom: 12px; display: flex; justify-content: center; gap: 6px; pointer-events: none; } .el-md-ihotel-gallery__dot { pointer-events: auto; width: 7px; height: 7px; padding: 0; border: 0; border-radius: 999px; background: rgba(255, 255, 255, 0.55); box-shadow: 0 1px 2px rgba(16, 35, 58, 0.25); cursor: pointer; } .el-md-ihotel-gallery__dot.is-active { width: 18px; background: #fff; } .el-md-ihotel-gallery__counter { position: absolute; top: 10px; right: 10px; padding: 3px 8px; border-radius: 999px; background: rgba(16, 35, 58, 0.55); color: #fff; font-size: 11px; font-weight: 600; } .el-md-pkg-details { display: grid; gap: 12px; } .el-md-detail-block { padding: 14px 14px 12px; border-radius: 16px; background: var(--md-surface, #fff); box-shadow: var(--md-out-sm); } .el-md-detail-block__title { margin: 0 0 10px; font-size: 12px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--md-ink-faint); } .el-md-detail-block__list { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; } .el-md-detail-block__list li { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 10px; align-items: start; font-size: 14px; line-height: 1.45; color: var(--md-ink-soft); } .el-md-detail-block__mark { width: 22px; height: 22px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; box-shadow: var(--md-out-sm); background: var(--md-bg, #e2f1f5); } .el-md-detail-block--include .el-md-detail-block__mark { color: var(--md-accent); } .el-md-detail-block--exclude .el-md-detail-block__mark { color: #9a6b6b; background: color-mix(in srgb, #9a6b6b 10%, var(--md-bg, #e2f1f5)); } .el-md-detail-block--notes { background: color-mix(in srgb, var(--md-accent) 5%, var(--md-surface, #fff)); } .el-md-detail-block--notes .el-md-detail-block__mark { color: var(--md-accent); font-style: italic; } .el-md-sheet--plain .el-md-pkg-details { gap: 10px; } @media (prefers-reduced-motion: reduce) { .el-md-ihotel-gallery__img { transition: none; } } /* ------------------------------------------------------- package detail */ .el-md-hero__destination { margin: -2px 0 12px; font-size: 22px; line-height: 1.15; font-weight: 700; letter-spacing: -0.01em; text-align: center; color: var(--md-accent); } /* ------------------------------------------------ currency switcher (OD) */ /* * Markup from One Day (`el-od-currency-switcher`). Placed beside * “Harga Package” on all breakpoints. */ .el-md-currency { display: flex; justify-content: flex-end; align-items: center; gap: 10px; margin: 0; flex: none; } .el-md-currency__label { font-size: 11px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--md-ink-faint); line-height: 1; white-space: nowrap; } .el-md-pricing__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin: 0 0 14px; } .el-md-pricing__head .el-md-section__title { margin: 0; } .el-md .el-od-currency-switcher { display: inline-flex; align-items: center; gap: 4px; padding: 4px; background: var(--md-surface); border: 0; border-radius: 999px; box-shadow: var(--md-in); flex-shrink: 0; } .el-md .el-od-currency-switcher__btn { appearance: none; border: 0; background: transparent; color: var(--md-ink-soft); font-family: inherit; font-size: 11.5px; font-weight: 800; letter-spacing: 0.04em; padding: 7px 13px; border-radius: 999px; cursor: pointer; line-height: 1; transition: background 0.18s ease, color 0.18s ease, box-shadow 0.18s ease; } .el-md .el-od-currency-switcher__btn:hover { color: var(--md-accent); background: var(--md-accent-soft); } .el-md .el-od-currency-switcher__btn:focus-visible { outline: 2px solid var(--md-accent); outline-offset: 2px; } .el-md .el-od-currency-switcher__btn.is-active { background: var(--md-accent); color: #fff; box-shadow: var(--md-out-sm); } .el-md .el-od-currency-switcher__btn.is-active:hover { background: var(--md-accent); color: #fff; filter: brightness(0.95); } .el-md .el-od-currency-switcher--busy { opacity: 0.72; pointer-events: none; } .el-md-pill--link { text-decoration: none; color: var(--md-accent); } .el-md-pill--link:not(a) { cursor: default; } .el-md-pill--rating { color: var(--md-accent); } .el-md-section__sub { margin: -8px 0 14px; font-size: 13px; color: var(--md-ink-faint); } .el-md-callout { margin-bottom: 20px; padding: 16px 18px; border-radius: var(--md-radius); box-shadow: var(--md-in); background: var(--md-accent-soft); } .el-md-callout__title { margin: 0 0 6px; font-size: 14px; font-weight: 700; color: var(--md-accent); } .el-md-callout p { margin: 0; font-size: 13.5px; line-height: 1.6; color: var(--md-ink-soft); } .el-md-videolink { margin: 14px 0 0; } .el-md-videolink a { display: inline-flex; align-items: center; padding: 8px 16px; border-radius: 999px; box-shadow: var(--md-out-sm); color: var(--md-accent); font-size: 13px; font-weight: 600; text-decoration: none; } /* --------------------------------------------------------------- itinerary */ .el-md-days { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; counter-reset: none; } .el-md-day { padding: 16px; border-radius: var(--md-radius-sm); box-shadow: var(--md-in); } .el-md-day__head { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin-bottom: 10px; } .el-md-day__badge { display: inline-flex; align-items: center; padding: 5px 13px; border-radius: 999px; background: var(--md-accent); color: #fff; font-size: 11.5px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; white-space: nowrap; } .el-md-day__title { margin: 0; font-size: 15.5px; font-weight: 700; } .el-md-day__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; } .el-md-day__item { display: flex; gap: 10px; font-size: 13.5px; line-height: 1.55; color: var(--md-ink-soft); } .el-md-day__item::before { content: ''; flex: none; width: 7px; height: 7px; margin-top: 8px; border-radius: 50%; background: var(--md-accent); opacity: 0.55; } .el-md-day__time { flex: none; min-width: 52px; font-weight: 700; color: var(--md-accent); } .el-md-day__text { min-width: 0; } .el-md-day__rownote { display: block; font-size: 12.5px; color: var(--md-ink-faint); } .el-md-day__foot { display: grid; gap: 8px; margin-top: 12px; padding-top: 12px; border-top: 1px solid rgba(151, 177, 197, 0.28); } .el-md-day__note { margin: 0; font-size: 12.5px; line-height: 1.55; color: var(--md-ink-faint); } .el-md-day__video { justify-self: start; padding: 7px 14px; border-radius: 10px; box-shadow: -1px -1px 3px var(--md-light), 1px 1px 4px var(--md-dark); color: var(--md-accent); font-size: 12.5px; font-weight: 600; text-decoration: none; } /* ----------------------------------------------------------- price format */ .el-md-pricelist { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; } .el-md-pricelist__row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 15px; border-radius: var(--md-radius-sm); box-shadow: var(--md-out-sm); } .el-md-pricelist__pax { font-size: 12.5px; font-weight: 700; letter-spacing: 0.03em; text-transform: uppercase; color: var(--md-ink-soft); } .el-md-pricelist__amount { font-size: 15px; font-weight: 700; color: var(--md-accent); white-space: nowrap; } .el-md-pricelist__amount em { font-size: 11.5px; font-weight: 600; font-style: normal; color: var(--md-ink-faint); } /* ---------------------------------------------------------------- booking */ .el-md-booking { position: relative; } .el-md-controls { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-bottom: 18px; } #el-md-pricing > .el-md-controls { max-width: none; margin-bottom: 10px; } .el-md-control { display: flex; flex-direction: column; gap: 6px; } .el-md-control > span { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--md-ink-faint); } /* * Pressed-in fields. The UI kit replaces the native select and date input with * its own trigger and button, so those are the controls that carry the field * look; the native