/* ═══════════════════════════════════════════════════════════════════════════ Smart Hotel Theme — TIME Hotels–inspired luxury solo-hotel design Palette: obsidian black, brushed gold, warm ivory canvas. ═══════════════════════════════════════════════════════════════════════════ */ :root { /* Brand / content ink (flips in night mode) */ --sht-primary: #0b0b0b; --sht-primary-soft: #1a1a1a; --sht-on-primary: #ffffff; /* Always-dark luxury panels (footer, CTA, booking bar) */ --sht-panel: #0b0b0b; --sht-panel-soft: #1a1a1a; --sht-on-panel: #ffffff; --sht-accent: #c4a35a; --sht-accent-dark: #a8883f; --sht-accent-ink: #8a7032; --sht-bg: #f5f1ea; --sht-surface: #ffffff; --sht-ink: #141414; --sht-muted: #6b6560; --sht-border: #ddd5c8; --sht-success: #2d6a4f; --sht-danger: #a83232; --sht-skeleton-a: #e8e0d2; --sht-skeleton-b: #f5f1ea; --sht-font-head: 'Cormorant Garamond', Georgia, 'Times New Roman', serif; --sht-font-body: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --sht-header-h: 78px; --sht-s1: 4px; --sht-s2: 8px; --sht-s3: 12px; --sht-s4: 16px; --sht-s5: 20px; --sht-s6: 32px; --sht-s7: 48px; --sht-s8: 64px; --sht-s9: 96px; --sht-r-sm: 0; --sht-r-md: 0; --sht-r-lg: 0; --sht-shadow: 0 8px 32px rgba(11, 11, 11, .08); --sht-shadow-lift: 0 20px 48px rgba(11, 11, 11, .14); } /* Full-site day / night palettes (class on ) */ html.sht-day { color-scheme: light; --sht-primary: #0b0b0b; --sht-primary-soft: #1a1a1a; --sht-on-primary: #ffffff; --sht-panel: #0b0b0b; --sht-panel-soft: #1a1a1a; --sht-on-panel: #ffffff; --sht-accent: #c4a35a; --sht-accent-dark: #a8883f; --sht-accent-ink: #8a7032; --sht-bg: #f7f3ec; --sht-surface: #ffffff; --sht-ink: #141414; --sht-muted: #6b6560; --sht-border: #ddd5c8; --sht-skeleton-a: #e8e0d2; --sht-skeleton-b: #f7f3ec; --sht-shadow: 0 8px 32px rgba(11, 11, 11, .08); --sht-shadow-lift: 0 20px 48px rgba(11, 11, 11, .14); } html.sht-night { color-scheme: dark; --sht-primary: #f0ebe3; --sht-primary-soft: #2a2622; --sht-on-primary: #121110; --sht-panel: #0a0908; --sht-panel-soft: #161412; --sht-on-panel: #f5f1ea; --sht-accent: #d4b56a; --sht-accent-dark: #c4a35a; --sht-accent-ink: #e0c57a; --sht-bg: #121110; --sht-surface: #1c1a17; --sht-ink: #ebe6de; --sht-muted: #a8a29a; --sht-border: #322e29; --sht-danger: #e07070; --sht-skeleton-a: #252220; --sht-skeleton-b: #1c1a17; --sht-shadow: 0 8px 32px rgba(0, 0, 0, .45); --sht-shadow-lift: 0 20px 48px rgba(0, 0, 0, .55); } /* ── Reset-ish base ─────────────────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; } } body { margin: 0; font-family: var(--sht-font-body); font-size: 15px; font-weight: 400; line-height: 1.7; color: var(--sht-ink); background: var(--sht-bg); -webkit-font-smoothing: antialiased; transition: background-color .45s ease, color .45s ease; } img { max-width: 100%; height: auto; display: block; } a { color: var(--sht-primary); text-decoration-thickness: 1px; text-underline-offset: 3px; } a:hover { color: var(--sht-accent-ink); } h1, h2, h3, h4, h5 { font-family: var(--sht-font-head); font-weight: 500; line-height: 1.15; color: var(--sht-primary); margin: 0 0 .45em; overflow-wrap: break-word; letter-spacing: .01em; } h1 { font-size: clamp(2.4rem, 5.5vw, 4rem); } h2 { font-size: clamp(1.9rem, 3.8vw, 2.85rem); } h3 { font-size: clamp(1.35rem, 2.5vw, 1.85rem); } h4 { font-size: clamp(1.05rem, 1.6vw, 1.25rem); } p { margin: 0 0 1em; } :focus-visible { outline: 2px solid var(--sht-accent); outline-offset: 3px; } /* Fixed header offset — inner pages only */ body:not(.home) #sht-main { padding-top: var(--sht-header-h); } body.home #sht-main { padding-top: 0; } .skip-link { position: absolute; left: -9999px; top: 0; z-index: 10000; background: var(--sht-primary); color: #fff; padding: 10px 18px; } .skip-link:focus { left: 0; } .screen-reader-text { border: 0; clip: rect(1px, 1px, 1px, 1px); clip-path: inset(50%); height: 1px; width: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; } /* ── Layout primitives ──────────────────────────────────────────────────── */ .sht-container { max-width: 1280px; margin: 0 auto; padding: 0 var(--sht-s5); } .sht-section { padding: var(--sht-s8) 0; } .sht-section--tight { padding: var(--sht-s7) 0; } .sht-section--alt { background: var(--sht-surface); } .sht-section--dark { background: var(--sht-panel); color: rgba(255, 255, 255, .82); } .sht-section--dark h1, .sht-section--dark h2, .sht-section--dark h3, .sht-section--dark h4 { color: var(--sht-on-panel); } .sht-section--dark .sht-section-label { color: var(--sht-accent); } .sht-section--dark .sht-section-sub { color: rgba(255, 255, 255, .62); } .sht-section-head { max-width: 680px; margin: 0 auto var(--sht-s7); text-align: center; } .sht-section-label { display: inline-block; letter-spacing: .28em; text-transform: uppercase; font-family: var(--sht-font-body); font-size: .68rem; font-weight: 600; color: var(--sht-accent-ink); margin-bottom: var(--sht-s3); } .sht-section-label::after { content: ""; display: block; width: 48px; height: 1px; background: var(--sht-accent); margin: 12px auto 0; } .sht-section-sub { color: var(--sht-muted); font-size: 1rem; max-width: 560px; margin-left: auto; margin-right: auto; } .sht-grid { display: grid; gap: var(--sht-s5); grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); } /* ── Buttons — sharp gold CTAs ──────────────────────────────────────────── */ .sht-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; background: rgba(240, 245, 250, 0.6); /* rgba(212, 181, 106, 0.5); */ backdrop-filter: blur(10px); color: var(--sht-panel); border:0px solid var(--sht-accent); font: 600 .78rem / 1 var(--sht-font-body); letter-spacing: .14em; text-transform: uppercase; padding: 15px 32px; border-radius: 5px; cursor: pointer; text-decoration: none; transition: background .2s ease, color .2s ease, border-color .2s ease, transform .18s ease; } .sht-btn:hover { background: var(--sht-accent-dark); border-color: var(--sht-accent-dark); color: var(--sht-panel); transform: translateY(-1px); } .sht-btn-outline { background: transparent; color: var(--sht-primary); border: 1px solid var(--sht-primary); } .sht-btn-outline:hover { background: var(--sht-primary); color: var(--sht-on-primary); transform: none; } .sht-btn-ghost { background: transparent; color: var(--sht-accent-ink); border: 1px solid var(--sht-accent); } .sht-btn-ghost:hover { background: var(--sht-accent); color: var(--sht-panel); } .sht-btn-light { background: var(--sht-surface); color: var(--sht-panel); border-color: var(--sht-surface); } .sht-btn-light:hover { background: var(--sht-bg); border-color: var(--sht-bg); color: var(--sht-primary); } .sht-btn:disabled { opacity: .5; cursor: not-allowed; transform: none; } /* ── Cards ──────────────────────────────────────────────────────────────── */ .sht-card { background: var(--sht-surface); border: 1px solid var(--sht-border); border-radius: 0; box-shadow: var(--sht-shadow); overflow: hidden; transition: transform .25s ease, box-shadow .25s ease; } .sht-card:hover { transform: translateY(-4px); box-shadow: var(--sht-shadow-lift); } /* ── Header — frosted glass + day/night + left drawer ───────────────────── */ .sht-header { position: fixed; top: 0; left: 0; right: 0; z-index: 990; border-bottom: 1px solid rgba(255, 255, 255, .08); transition: border-color .4s ease, box-shadow .4s ease; } .sht-header::before { content: ""; position: absolute; inset: 0; z-index: -1; background: rgba(11, 11, 11, .42); backdrop-filter: blur(16px) saturate(1.2); -webkit-backdrop-filter: blur(16px) saturate(1.2); transition: background .4s ease; } body.sht-header-stuck .sht-header::before, .sht-header.is-stuck::before { background: rgba(11, 11, 11, .78); } body.sht-header-stuck .sht-header, .sht-header.is-stuck { border-bottom-color: rgba(196, 163, 90, .28); box-shadow: 0 8px 32px rgba(0, 0, 0, .28); } /* Day mode — lighter glass */ html.sht-day .sht-header::before { background: rgba(245, 241, 234, .55); } html.sht-day .sht-header { border-bottom-color: rgba(11, 11, 11, .08); } html.sht-day body.sht-header-stuck .sht-header::before, html.sht-day .sht-header.is-stuck::before { background: rgba(245, 241, 234, .88); } html.sht-day body.sht-header-stuck .sht-header, html.sht-day .sht-header.is-stuck { border-bottom-color: rgba(196, 163, 90, .35); box-shadow: 0 8px 28px rgba(0, 0, 0, .08); } /* Over the dark hero, day mode still needs readable light text until scrolled */ html.sht-day body.home:not(.sht-header-stuck) .sht-header::before { background: rgba(11, 11, 11, .28); } html.sht-day body.home:not(.sht-header-stuck) .sht-header { border-bottom-color: rgba(255, 255, 255, .1); } .sht-header-inner { display: flex; align-items: center; gap: var(--sht-s4); min-height: var(--sht-header-h); position: relative; } .sht-brand img { max-height: 48px; width: auto; filter: brightness(0) invert(1); transition: filter .35s ease; } html.sht-day body:not(.home) .sht-brand img, html.sht-day body.sht-header-stuck .sht-brand img { filter: none; } .sht-brand-name { font-family: var(--sht-font-head); font-size: 1.55rem; font-weight: 500; color: #fff; line-height: 1.1; letter-spacing: .04em; transition: color .35s ease; } html.sht-day body:not(.home) .sht-brand-name, html.sht-day body.sht-header-stuck .sht-brand-name { color: var(--sht-primary); } .sht-brand-tag { display: block; font-family: var(--sht-font-body); font-size: .58rem; letter-spacing: .22em; text-transform: uppercase; color: var(--sht-accent); font-weight: 600; margin-top: 2px; } /* Floating day/night widget (outside header) */ .sht-float-theme { position: fixed; right: 16px; top: 30%; transform: translateY(-50%); z-index: 980; display: flex; flex-direction: column; align-items: center; gap: 5px; transition: opacity .35s ease, transform .35s ease; } html.sht-theme-widget-hidden .sht-float-theme { opacity: 0; pointer-events: none; transform: translateY(-50%) translateX(24px); } .sht-float-theme-close { width: 22px; height: 22px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .35); background: rgba(11, 11, 11, .55); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); color: rgba(255, 255, 255, .88); font-size: .85rem; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; padding: 0; transition: border-color .2s ease, color .2s ease, background .2s ease; } .sht-float-theme-close:hover { border-color: var(--sht-accent); color: var(--sht-accent); } html.sht-day .sht-float-theme-close { border-color: rgba(11, 11, 11, .2); background: rgba(245, 241, 234, .75); color: var(--sht-primary); } .sht-float-theme-show { position: fixed; right: 0; top: 30%; transform: translateY(-50%); z-index: 979; width: 28px; height: 50px; border: 1px solid rgba(255, 255, 255, .28); border-right: 0; border-radius: 50px 0 0 50px; background: rgba(11, 11, 11, .55); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); color: var(--sht-accent); font-size: .9rem; cursor: pointer; align-items: center; justify-content: center; display: none; padding: 0; transition: background .2s ease, color .2s ease; } .sht-float-theme-show:hover { color: #fff; background: rgba(11, 11, 11, .72); } html.sht-theme-widget-hidden .sht-float-theme-show { display: flex; } html.sht-theme-widget-hidden .sht-float-theme-show[hidden] { display: flex !important; } html.sht-day .sht-float-theme-show { background: rgba(245, 241, 234, .82); border-color: rgba(11, 11, 11, .12); color: var(--sht-accent-ink); } .sht-daynight { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .35); background: rgba(11, 11, 11, .45); backdrop-filter: blur(12px) saturate(1.2); -webkit-backdrop-filter: blur(12px) saturate(1.2); color: #fff; cursor: pointer; position: relative; box-shadow: 0 4px 20px rgba(0, 0, 0, .25); transition: border-color .25s, background .25s, color .25s, box-shadow .25s; } .sht-daynight:hover { border-color: var(--sht-accent); color: var(--sht-accent); box-shadow: 0 6px 24px rgba(0, 0, 0, .32); } html.sht-day .sht-daynight { border-color: rgba(11, 11, 11, .18); background: rgba(245, 241, 234, .72); color: var(--sht-primary); } .sht-daynight-sun, .sht-daynight-moon { position: absolute; font-size: 1.05rem; line-height: 1; transition: opacity .25s, transform .25s; } html.sht-night .sht-daynight-sun { opacity: 0; transform: scale(.6) rotate(-40deg); } html.sht-night .sht-daynight-moon { opacity: 1; transform: none; } html.sht-day .sht-daynight-sun { opacity: 1; transform: none; } html.sht-day .sht-daynight-moon { opacity: 0; transform: scale(.6) rotate(40deg); } /* Nav lives outside
— desktop fixed top bar, mobile left drawer */ .sht-nav { display: flex; align-items: center; gap: var(--sht-s5); } .sht-nav-drawer-head { display: none; } .sht-nav-list { display: flex; align-items: center; gap: 2px; list-style: none; margin: 0; padding: 0; } .sht-nav-list li { position: relative; } .sht-nav-list a { display: block; padding: 10px 14px; font-size: .72rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: rgba(255, 255, 255, .9); text-decoration: none; transition: color .2s ease; } html.sht-day body:not(.home) .sht-nav-list a, html.sht-day body.sht-header-stuck .sht-nav-list a { color: rgba(11, 11, 11, .78); } .sht-nav-list a:hover, .sht-nav-list .current-menu-item > a, .sht-nav-list .current_page_item > a { color: var(--sht-accent); } .sht-nav-list .sub-menu { display: none; position: absolute; top: 100%; left: 0; min-width: 220px; background: rgba(11, 11, 11, .92); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border: 1px solid rgba(196, 163, 90, .3); box-shadow: var(--sht-shadow-lift); list-style: none; padding: 8px 0; margin: 0; z-index: 50; } html.sht-day .sht-nav-list .sub-menu { background: rgba(245, 241, 234, .96); border-color: rgba(11, 11, 11, .1); } .sht-nav-list .sub-menu a { color: rgba(255, 255, 255, .85); padding: 10px 18px; } html.sht-day .sht-nav-list .sub-menu a { color: rgba(11, 11, 11, .8); } .sht-nav-list .sub-menu a:hover { color: var(--sht-accent); background: rgba(255, 255, 255, .04); } .sht-nav-list li:hover > .sub-menu, .sht-nav-list li:focus-within > .sub-menu { display: block; } .sht-header-phone { font-size: .78rem; font-weight: 600; letter-spacing: .06em; color: rgba(255, 255, 255, .88); text-decoration: none; white-space: nowrap; transition: color .2s ease; } html.sht-day body:not(.home) .sht-header-phone, html.sht-day body.sht-header-stuck .sht-header-phone { color: rgba(11, 11, 11, .75); } .sht-header-phone:hover { color: var(--sht-accent); } .sht-nav .sht-btn { padding: 12px 22px; font-size: .72rem; } .sht-nav-toggle { display: none; background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .35); width: 46px; height: 42px; cursor: pointer; padding: 0; align-items: center; justify-content: center; transition: border-color .2s ease, background .2s; } html.sht-day body:not(.home) .sht-nav-toggle, html.sht-day body.sht-header-stuck .sht-nav-toggle { border-color: rgba(11, 11, 11, .2); background: rgba(11, 11, 11, .04); } .sht-nav-toggle span { display: block; width: 22px; height: 1px; background: #fff; position: relative; transition: background .2s; } html.sht-day body:not(.home) .sht-nav-toggle span, html.sht-day body:not(.home) .sht-nav-toggle span::before, html.sht-day body:not(.home) .sht-nav-toggle span::after, html.sht-day body.sht-header-stuck .sht-nav-toggle span, html.sht-day body.sht-header-stuck .sht-nav-toggle span::before, html.sht-day body.sht-header-stuck .sht-nav-toggle span::after { background: var(--sht-primary); } .sht-nav-toggle span::before, .sht-nav-toggle span::after { content: ""; position: absolute; left: 0; width: 22px; height: 1px; background: #fff; transition: transform .25s; } .sht-nav-toggle span::before { top: -7px; } .sht-nav-toggle span::after { top: 7px; } .sht-nav-toggle[aria-expanded="true"] span { background: transparent; } .sht-nav-toggle[aria-expanded="true"] span::before { transform: translateY(7px) rotate(45deg); } .sht-nav-toggle[aria-expanded="true"] span::after { transform: translateY(-7px) rotate(-45deg); } .sht-nav-backdrop { display: none; position: fixed; inset: 0; z-index: 994; background: rgba(0, 0, 0, .5); backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); opacity: 0; transition: opacity .35s ease; } .sht-nav-backdrop.is-open { display: block; opacity: 1; } @media (min-width: 941px) { .sht-nav { position: fixed; top: 0; left: 50%; transform: translateX(-50%); width: 100%; max-width: 1280px; z-index: 995; min-height: var(--sht-header-h); padding: 0 var(--sht-s5); background: transparent; pointer-events: none; justify-content: flex-end; } .sht-nav > * { pointer-events: auto; } } @media (max-width: 940px) { /* Transparent mobile header; logo centered with soft shadow */ .sht-header { border-bottom-color: transparent; border-bottom: none; box-shadow: none; } .sht-header::before { background: transparent !important; backdrop-filter: none; -webkit-backdrop-filter: none; border-bottom: none; } body.sht-header-stuck .sht-header, .sht-header.is-stuck { border-bottom-color: transparent; box-shadow: none; } body.sht-header-stuck .sht-header::before, .sht-header.is-stuck::before { background: rgba(11, 11, 11, .22) !important; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); } html.sht-day body.sht-header-stuck .sht-header::before, html.sht-day .sht-header.is-stuck::before { background: rgba(245, 241, 234, .18) !important; } .sht-header-inner { justify-content: center; position: relative; } .sht-brand { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 1; display: flex; align-items: center; justify-content: center; max-width: min(56vw, 190px); } .sht-brand .custom-logo-link { display: flex; align-items: center; justify-content: center; } .sht-brand img, .sht-brand .custom-logo { max-height: 28px; width: auto; max-width: 100%; filter: brightness(0) invert(1) drop-shadow(0 2px 4px rgba(0, 0, 0, .55)) drop-shadow(0 6px 14px rgba(0, 0, 0, .35)); } html.sht-day body:not(.home) .sht-brand img, html.sht-day body:not(.home) .sht-brand .custom-logo, html.sht-day body.sht-header-stuck .sht-brand img, html.sht-day body.sht-header-stuck .sht-brand .custom-logo { filter: drop-shadow(0 2px 4px rgba(0, 0, 0, .35)) drop-shadow(0 4px 10px rgba(0, 0, 0, .2)); } .sht-brand-name { font-size: 1.05rem; text-align: center; text-shadow: 0 2px 8px rgba(0, 0, 0, .55), 0 1px 2px rgba(0, 0, 0, .4); } .sht-nav-toggle { display: inline-flex; margin-left: auto; margin-right: -10px; z-index: 2; border-radius: 50%; backdrop-filter: blur(5px); } .sht-header-phone { display: none; } /* shown inside drawer */ .sht-nav { display: flex; position: fixed; top: 0; left: 0; height: 100dvh; width: min(320px, 86vw); z-index: 996; background: rgba(11, 11, 11, .6); backdrop-filter: blur(20px) saturate(1.2); -webkit-backdrop-filter: blur(20px) saturate(1.2); border-right: 1px solid rgba(196, 163, 90, .3); box-shadow: 16px 0 48px rgba(0, 0, 0, .4); padding: 0 0 28px; flex-direction: column; align-items: stretch; gap: 0; transform: translate3d(-105%, 0, 0); transition: transform .4s cubic-bezier(.22, 1, .36, 1); overflow-y: auto; -webkit-overflow-scrolling: touch; pointer-events: auto; } html.sht-day .sht-nav { background: rgba(245, 241, 234, .96); border-right-color: rgba(11, 11, 11, .1); box-shadow: 16px 0 48px rgba(0, 0, 0, .12); } .sht-nav.is-open { transform: translate3d(0, 0, 0); } .sht-nav-drawer-head { display: flex; align-items: center; justify-content: space-between; padding: 22px 22px 18px; border-bottom: 1px solid rgba(255, 255, 255, .1); margin-bottom: 8px; } html.sht-day .sht-nav-drawer-head { border-bottom-color: rgba(11, 11, 11, .08); } .sht-nav-drawer-title { font-family: var(--sht-font-head); font-size: 1.35rem; color: #fff; letter-spacing: .04em; } html.sht-day .sht-nav-drawer-title { color: var(--sht-primary); } .sht-nav-close { width: 40px; height: 40px; border: 1px solid rgba(255, 255, 255, .3); background: transparent; color: #fff; font-size: 1.5rem; line-height: 1; cursor: pointer; } html.sht-day .sht-nav-close { border-color: rgba(11, 11, 11, .2); color: var(--sht-primary); } .sht-nav-list { flex-direction: column; align-items: stretch; gap: 0; padding: 0 8px; } .sht-nav-list a { padding: 16px 14px; font-size: .82rem; border-bottom: 1px solid rgba(255, 255, 255, .08); color: rgba(255, 255, 255, .92); } html.sht-day .sht-nav-list a { color: rgba(11, 11, 11, .85); border-bottom-color: rgba(11, 11, 11, .08); } .sht-nav-list .sub-menu { display: block; position: static; box-shadow: none; border: 0; padding: 0 0 0 12px; background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; } .sht-nav .sht-header-phone { display: block; padding: 16px 22px 8px; color: rgba(255, 255, 255, .8); } html.sht-day .sht-nav .sht-header-phone { color: rgba(11, 11, 11, .7); } .sht-nav .sht-btn { margin: 16px 22px 0; width: calc(100% - 44px); } body.sht-nav-lock { overflow: hidden; } } /* ── Hero / slider (desktop full-bleed; mobile balanced height) ─────────── */ .sht-hero { position: relative; min-height: 100vh; min-height: 100svh; color: #fff; overflow: hidden; } .sht-slides { position: absolute; inset: 0; overflow: hidden; } .sht-slide { position: absolute; inset: 0; display: flex; align-items: center; background: var(--sht-primary); opacity: 0; visibility: hidden; transition: opacity 1s ease, visibility 1s; } .sht-slide.is-active { opacity: 1; visibility: visible; z-index: 1; } .sht-slide-v1 { background-color: #0b0b0b; } .sht-slide-v2 { background-color: #151515; } .sht-slide-v3 { background-color: #1a1814; } .sht-slide-v4 { background-color: #12140f; } .sht-slide-v5 { background-color: #0e1218; } .sht-slide-v6 { background-color: #16120e; } .sht-slide-v7 { background-color: #101414; } .sht-slide-v8 { background-color: #141018; } .sht-slide-bg { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; pointer-events: none; } .sht-slide::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient( 180deg, rgba(11, 11, 11, .45) 0%, rgba(11, 11, 11, .25) 40%, rgba(11, 11, 11, .72) 100% ); } .sht-hero-inner { position: relative; z-index: 2; width: 100%; padding: calc(var(--sht-header-h) + var(--sht-s8)) 0 160px; text-align: center; } .sht-hero .sht-section-label { color: var(--sht-accent); } .sht-hero .sht-section-label::after { background: var(--sht-accent); margin-left: auto; margin-right: auto; } .sht-hero-title { font-size: clamp(2.5rem, 6vw, 4.2rem); line-height: 1.08; color: #fff; max-width: 860px; margin: 0 auto .4em; font-weight: 400; text-shadow: 0 2px 40px rgba(0, 0, 0, .4); } .sht-slide.is-active .sht-hero-title, .sht-slide.is-active .sht-hero-sub { animation: sht-slide-up 1s ease both; } .sht-slide.is-active .sht-hero-sub { animation-delay: .18s; } /* Hide hero "Book Your Stay" once the booking form is shown */ .sht-hero.is-booking-open .sht-book-now { display: none !important; } @keyframes sht-slide-up { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } } .sht-hero-sub { font-size: clamp(.95rem, 1.5vw, 1.15rem); font-weight: 400; color: rgba(255, 255, 255, .78); max-width: 540px; margin: 0 auto var(--sht-s6); letter-spacing: .02em; } /* Slide overlay portrait frame */ .sht-slide-overlay { position: absolute; z-index: 1; inset: 0; display: flex; align-items: center; justify-content: flex-end; padding: 0 clamp(24px, 5vw, 80px) 160px 0; pointer-events: none; } .sht-slide-overlay[hidden] { display: none !important; } .sht-slide-overlay::before { content: ""; position: absolute; z-index: 0; width: min(380px, 34vw); height: min(500px, 58vh); right: clamp(48px, 6vw, 96px); top: 50%; transform: translateY(-52%); border: 1px solid var(--sht-accent); opacity: .7; } .sht-slide-overlay img { position: relative; z-index: 1; display: block; width: min(360px, 32vw); max-height: min(500px, 56vh); object-fit: cover; border: 4px solid rgba(255, 255, 255, .9); box-shadow: 0 32px 72px rgba(0, 0, 0, .55); } .sht-slide.has-overlay .sht-hero-inner { text-align: left; } .sht-slide.has-overlay .sht-hero-text { max-width: min(540px, 46%); } .sht-slide.has-overlay .sht-hero-title, .sht-slide.has-overlay .sht-hero-sub { margin-left: 0; margin-right: 0; } .sht-slide.has-overlay .sht-section-label::after { margin-left: 0; } .sht-slide.is-active .sht-slide-overlay:not([hidden]) { animation: sht-overlay-in 1s ease .25s both; } @keyframes sht-overlay-in { from { opacity: 0; transform: translateX(32px); } to { opacity: 1; transform: none; } } @media (max-width: 960px) { .sht-slide-overlay { justify-content: center; align-items: flex-end; padding: 0 16px 120px; } .sht-slide-overlay::before { width: min(200px, 52vw); height: min(260px, 32vh); right: auto; left: 50%; top: auto; bottom: 128px; transform: translateX(-42%); } .sht-slide-overlay img { width: min(190px, 48vw); max-height: min(250px, 30vh); } .sht-slide.has-overlay .sht-hero-inner { text-align: center; padding-bottom: clamp(240px, 40vh, 340px); } .sht-slide.has-overlay .sht-hero-text { max-width: 640px; margin: 0 auto; } .sht-slide.has-overlay .sht-hero-title, .sht-slide.has-overlay .sht-hero-sub { margin-left: auto; margin-right: auto; } .sht-slide.has-overlay .sht-section-label::after { margin-left: auto; } .sht-slide.is-active .sht-slide-overlay:not([hidden]) { animation-name: sht-slide-up; } } @media (max-width: 480px) { .sht-slide-overlay { display: none !important; } .sht-slide.has-overlay .sht-hero-inner { padding-bottom: 160px; } } /* Slider controls — modern glass chevrons + dots */ .sht-slider-arrow { position: absolute; top: 50%; transform: translateY(-50%); z-index: 3; width: 52px; height: 52px; padding: 0; border: 1px solid rgba(255, 255, 255, .35); border-radius: 50%; background: rgba(11, 11, 11, .42); backdrop-filter: blur(10px) saturate(1.2); -webkit-backdrop-filter: blur(10px) saturate(1.2); color: #fff; cursor: pointer; display: flex; align-items: center; justify-content: center; box-shadow: 0 8px 28px rgba(0, 0, 0, .35); /* Hidden until wanted — see the reveal rule below. */ opacity: 0; pointer-events: none; transition: background .25s ease, border-color .25s ease, color .25s ease, transform .25s ease, box-shadow .25s ease, opacity .3s ease; } /* The arrows stay out of the way of the hero imagery and appear when the guest reaches for them: pointer over the slider, keyboard focus inside it, or a touch anywhere on it (JS adds .is-touch-active). Dots remain always visible, so the slider never looks non-interactive. */ .sht-slider:hover .sht-slider-arrow, .sht-slider:focus-within .sht-slider-arrow, .sht-slider.is-touch-active .sht-slider-arrow { opacity: 1; pointer-events: auto; } .sht-slider-arrow::before { content: none; } .sht-slider-arrow svg { display: block; flex-shrink: 0; } .sht-slider-arrow:hover { background: var(--sht-accent); border-color: var(--sht-accent); color: var(--sht-panel); transform: translateY(-50%) scale(1.05); box-shadow: 0 12px 32px rgba(0, 0, 0, .4); } .sht-slider-arrow:focus-visible { outline: 2px solid var(--sht-accent); outline-offset: 3px; } .sht-slider-prev { left: clamp(12px, 3vw, 36px); } .sht-slider-next { right: clamp(12px, 3vw, 36px); } .sht-slider-dots { position: absolute; left: 50%; transform: translateX(-50%); bottom: 130px; z-index: 3; display: flex; gap: 8px; align-items: center; } .sht-hero:not(:has(+ .sht-booking-bar-anchor)) .sht-slider-dots { bottom: 36px; } .sht-slider-dot { width: 28px; height: 2px; border: 0; padding: 0; cursor: pointer; background: rgba(255, 255, 255, .35); transition: background .25s ease, width .25s ease; } .sht-slider-dot.is-active { background: var(--sht-accent); width: 44px; } @media (max-width: 860px) { .sht-slider-arrow { width: 44px; height: 44px; } .sht-slider-arrow svg { width: 18px; height: 18px; } .sht-slider-prev { left: 10px; } .sht-slider-next { right: 10px; } } @media (prefers-reduced-motion: reduce) { .sht-slide { transition: none; } .sht-slide.is-active .sht-hero-title, .sht-slide.is-active .sht-hero-sub, .sht-slide.is-active .sht-slide-overlay:not([hidden]) { animation: none; } } /* Mobile: hero = 50% viewport; centered compact copy + smaller CTA */ @media (max-width: 768px) { .sht-hero { min-height: 0; height: 50vh; height: 50svh; max-height: none; } .sht-hero-inner { padding: calc(var(--sht-header-h) + 12px) 16px 40px; display: flex; align-items: center; justify-content: center; min-height: 100%; box-sizing: border-box; text-align: center; } .sht-hero-text { width: 100%; max-width: 28rem; margin: 0 auto; text-align: center; } .sht-hero .sht-section-label { margin-bottom: 4px; font-size: .62rem; letter-spacing: .16em; } .sht-hero .sht-section-label::after { margin-top: 4px; width: 28px; } .sht-hero-title { font-size: clamp(1.45rem, 6vw, 2rem); margin: 0 auto .15em; line-height: 1.12; } .sht-hero-sub { font-size: .82rem; line-height: 1.4; max-width: 32ch; margin: 0 auto 10px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .sht-hero .sht-book-now, .sht-hero .sht-btn.sht-book-now { padding: 9px 16px; font-size: .62rem; letter-spacing: .12em; min-height: 0; } .sht-slider-dots { bottom: 14px; } .sht-hero:not(:has(+ .sht-booking-bar-anchor)) .sht-slider-dots { bottom: 12px; } .sht-hero + .sht-booking-bar-anchor .sht-booking-bar-wrap, .sht-hero .sht-booking-bar-wrap { margin-top: -28px; } .sht-slide.has-overlay .sht-hero-inner { padding-bottom: 40px; } .sht-slide.has-overlay .sht-hero-text { max-width: 28rem; } } /* ── Dark booking bar — gold labels ─────────────────────────────────────── */ .sht-booking-bar-wrap { position: relative; z-index: 5; } .sht-hero + .sht-booking-bar-anchor .sht-booking-bar-wrap, .sht-hero .sht-booking-bar-wrap { margin-top: -88px; } .sht-booking-bar { display: grid; gap: var(--sht-s3); grid-template-columns: 1.1fr 1.1fr .7fr .7fr .7fr auto; align-items: end; background: var(--sht-panel); border: 1px solid rgba(196, 163, 90, .35); box-shadow: 0 24px 64px rgba(0, 0, 0, .4); padding: var(--sht-s5) var(--sht-s5) var(--sht-s4); } .sht-bb-field label { display: block; font-size: .62rem; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--sht-accent); margin-bottom: 6px; } .sht-bb-field input[type="date"], .sht-bb-stepper { width: 100%; border: 1px solid rgba(255, 255, 255, .15); border-radius: 0; background: rgba(255, 255, 255, .15); font: 500 .9rem var(--sht-font-body); color: #fff; padding: 11px 12px; min-height: 46px; } .sht-bb-field input[type="date"]::-webkit-calendar-picker-indicator { filter: invert(1); opacity: .7; } .sht-bb-stepper { display: flex; align-items: center; justify-content: space-between; padding: 4px 6px; } .sht-bb-stepper button { width: 32px; height: 32px; border: 1px solid rgba(196, 163, 90, .5); background: transparent; font-size: 1rem; line-height: 1; cursor: pointer; color: var(--sht-accent); transition: background .18s ease, color .18s ease; } .sht-bb-stepper button:hover { background: var(--sht-accent); color: var(--sht-panel); } .sht-bb-stepper output { font-weight: 600; min-width: 22px; text-align: center; color: #fff; } .sht-booking-bar .sht-btn { min-height: 46px; white-space: nowrap; align-self: end; } .sht-bb-error { grid-column: 1 / -1; color: #e88; font-size: .85rem; font-weight: 500; margin: 2px 2px 0; } @media (max-width: 1080px) { .sht-booking-bar { grid-template-columns: 1fr 1fr 1fr; } .sht-booking-bar .sht-btn { grid-column: 1 / -1; } } @media (max-width: 620px) { .sht-booking-bar { grid-template-columns: 1fr 1fr; } } /* Availability results */ .sht-avail-results { margin-top: var(--sht-s6); } .sht-avail-results[aria-busy="true"] { opacity: .7; } .sht-avail-note { text-align: center; color: var(--sht-muted); margin: var(--sht-s4) 0; } .sht-skeleton { height: 210px; background: linear-gradient(100deg, var(--sht-skeleton-a) 30%, var(--sht-skeleton-b) 50%, var(--sht-skeleton-a) 70%); background-size: 200% 100%; animation: sht-shimmer 1.2s infinite linear; } @keyframes sht-shimmer { to { background-position: -200% 0; } } /* ── Welcome grid ───────────────────────────────────────────────────────── */ .sht-welcome-grid { display: grid; grid-template-columns: 1.05fr 1fr; gap: var(--sht-s7); align-items: center; } .sht-welcome-media { overflow: hidden; position: relative; } .sht-welcome-media::after { content: ""; position: absolute; inset: 0; border: 1px solid var(--sht-accent); transform: translate(16px, 16px); pointer-events: none; } .sht-welcome-media img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; } .sht-welcome-copy .sht-section-label::after { margin-left: 0; } .sht-welcome-copy h2 { margin-bottom: .6em; } @media (max-width: 860px) { .sht-welcome-grid { grid-template-columns: 1fr; } .sht-welcome-media::after { display: none; } } /* ── Offers & showroom rails (Momo-style) ───────────────────────────────── */ .sht-offers-rail-section { padding-top: var(--sht-s7); padding-bottom: var(--sht-s6); } .sht-offers-rail-head { text-align: center; margin-bottom: var(--sht-s5); } .sht-offers-rail-title { font-family: var(--sht-font-head); font-size: clamp(1.8rem, 3.2vw, 2.6rem); font-weight: 500; margin: 0; color: var(--sht-primary); } .sht-rail-wrap { position: relative; display: flex; align-items: center; gap: 8px; } .sht-offer-rail, .sht-showroom-rail { display: flex; gap: 18px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; -webkit-overflow-scrolling: touch; padding: 6px 4px 16px; flex: 1; /* Desktop: hide until hover (see media queries below) */ scrollbar-width: none; -ms-overflow-style: none; } .sht-offer-rail::-webkit-scrollbar, .sht-showroom-rail::-webkit-scrollbar { height: 0; background: transparent; } .sht-offer-rail::-webkit-scrollbar-thumb, .sht-showroom-rail::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--sht-accent) 55%, transparent); border-radius: 4px; } /* Desktop / mouse: show thin scrollbar only while hovering the rail */ @media (hover: hover) and (pointer: fine) { .sht-rail-wrap:hover .sht-offer-rail, .sht-rail-wrap:hover .sht-showroom-rail, .sht-offer-rail:hover, .sht-showroom-rail:hover, .sht-offer-rail:focus-visible, .sht-showroom-rail:focus-visible { scrollbar-width: thin; } .sht-rail-wrap:hover .sht-offer-rail::-webkit-scrollbar, .sht-rail-wrap:hover .sht-showroom-rail::-webkit-scrollbar, .sht-offer-rail:hover::-webkit-scrollbar, .sht-showroom-rail:hover::-webkit-scrollbar, .sht-offer-rail:focus-visible::-webkit-scrollbar, .sht-showroom-rail:focus-visible::-webkit-scrollbar { height: 6px; } } /* Touch / mobile: keep a thin scrollbar (no reliable hover) */ @media (hover: none), (pointer: coarse) { .sht-offer-rail, .sht-showroom-rail { scrollbar-width: thin; } .sht-offer-rail::-webkit-scrollbar, .sht-showroom-rail::-webkit-scrollbar { height: 6px; } } .sht-offer-tile { flex: 0 0 min(420px, 78vw); scroll-snap-align: start; display: block; overflow: hidden; border: 1px solid var(--sht-border); background: var(--sht-surface); text-decoration: none; color: inherit; position: relative; transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease; } .sht-offer-tile:hover { transform: translateY(-3px); box-shadow: var(--sht-shadow-lift); border-color: var(--sht-accent); } .sht-offer-tile img { width: 100%; height: 220px; object-fit: cover; display: block; } .sht-offer-tile-cap { display: block; padding: 14px 16px 16px; background: var(--sht-surface); border-top: 1px solid var(--sht-border); } .sht-offer-tile-title { display: block; font-family: var(--sht-font-head); font-size: 1.2rem; font-weight: 500; color: var(--sht-primary); line-height: 1.3; } /* Offers page — alternating image / copy rows */ .sht-offers-page { padding-top: var(--sht-s7); } .sht-offer-row { display: grid; grid-template-columns: 1.05fr 1fr; gap: var(--sht-s7); align-items: center; margin-bottom: var(--sht-s8); } .sht-offer-row.is-flip .sht-offer-row-media { order: 2; } .sht-offer-row.is-flip .sht-offer-row-copy { order: 1; } .sht-offer-row-media { overflow: hidden; border: 1px solid var(--sht-border); background: var(--sht-panel); min-height: 280px; } .sht-offer-row-media img { width: 100%; height: 100%; min-height: 320px; object-fit: cover; display: block; } .sht-offer-row-copy .sht-section-label::after { margin-left: 0; } .sht-offer-row-copy h2 { margin: 0 0 .45em; font-size: clamp(1.7rem, 2.8vw, 2.4rem); } .sht-offer-row-copy p { color: var(--sht-muted); font-size: 1rem; line-height: 1.75; margin: 0 0 var(--sht-s5); white-space: pre-line; } .sht-offer-row-actions { display: flex; flex-wrap: wrap; gap: 12px; } @media (max-width: 860px) { .sht-offer-row, .sht-offer-row.is-flip { grid-template-columns: 1fr; } .sht-offer-row.is-flip .sht-offer-row-media, .sht-offer-row.is-flip .sht-offer-row-copy { order: initial; } .sht-offer-row-media img { min-height: 220px; } } /* Availability bar — reveal-on-book mode (full bar under slider, not clipped) */ .sht-booking-bar-anchor.is-avail-hidden { display: none !important; } .sht-hero + .sht-booking-bar-anchor.is-avail-revealed { display: block; position: relative; z-index: 8; animation: sht-avail-in .4s ease both; } .sht-hero + .sht-booking-bar-anchor.is-avail-revealed .sht-booking-bar-wrap { /* Sit under the hero; keep overlap but leave room so the full form is in view */ margin-top: -64px; padding-bottom: 8px; scroll-margin-top: calc(var(--sht-header-h) + 20px); } .sht-hero + .sht-booking-bar-anchor.is-avail-revealed .sht-booking-bar { position: relative; z-index: 8; } .sht-booking-bar-anchor.is-avail-revealed #sht-booking-bar { scroll-margin-top: calc(var(--sht-header-h) + 24px); } @keyframes sht-avail-in { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: none; } } @media (max-width: 860px) { .sht-hero + .sht-booking-bar-anchor.is-avail-revealed .sht-booking-bar-wrap { margin-top: -40px; } } .sht-rail-prev, .sht-rail-next { flex: 0 0 42px; width: 42px; height: 42px; border: 1px solid var(--sht-border); background: var(--sht-surface); color: var(--sht-primary); font-size: 1.6rem; line-height: 1; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: border-color .2s ease, color .2s ease, background .2s ease; } .sht-rail-prev:hover, .sht-rail-next:hover { border-color: var(--sht-accent); color: var(--sht-accent-ink); } @media (max-width: 700px) { .sht-rail-prev, .sht-rail-next { display: none; } .sht-offer-tile img { height: 180px; } } /* Best Rooms and Suites */ .sht-showrooms-section { padding-top: var(--sht-s6); } .sht-showrooms-head { margin-bottom: var(--sht-s6); } .sht-showrooms-head-grid { display: grid; grid-template-columns: 1fr 1.1fr; gap: var(--sht-s6); align-items: start; } .sht-showrooms-head-grid h2 { margin: 0; font-size: clamp(2rem, 3.6vw, 2.9rem); } .sht-showrooms-intro { margin: 0; color: var(--sht-muted); font-size: 1rem; line-height: 1.75; } @media (max-width: 860px) { .sht-showrooms-head-grid { grid-template-columns: 1fr; gap: var(--sht-s3); } } .sht-showroom-card { flex: 0 0 min(360px, 82vw); scroll-snap-align: start; margin: 0; } .sht-showroom-open { display: flex; flex-direction: column; width: 100%; height: 100%; padding: 0; border: 1px solid var(--sht-border); background: var(--sht-surface); cursor: pointer; text-align: left; color: inherit; font: inherit; transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease; } .sht-showroom-open:hover { transform: translateY(-3px); box-shadow: var(--sht-shadow-lift); border-color: var(--sht-accent); } .sht-showroom-media { display: block; aspect-ratio: 16 / 10; overflow: hidden; background: var(--sht-panel); } .sht-showroom-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .45s ease; } .sht-showroom-open:hover .sht-showroom-media img { transform: scale(1.04); } .sht-showroom-body { display: flex; flex-direction: column; gap: 8px; padding: var(--sht-s4) var(--sht-s4) var(--sht-s5); } .sht-showroom-name { font-family: var(--sht-font-head); font-size: 1.45rem; color: var(--sht-primary); font-weight: 500; } .sht-showroom-excerpt { font-size: .9rem; color: var(--sht-muted); line-height: 1.6; } /* Room detail modal */ .sht-room-modal { position: fixed; inset: 0; z-index: 100050; display: none; align-items: center; justify-content: center; padding: 24px; } .sht-room-modal.is-open { display: flex; } .sht-room-modal__overlay { position: absolute; inset: 0; background: rgba(11, 11, 11, .72); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); } .sht-room-modal__dialog { position: relative; z-index: 1; width: min(920px, 100%); max-height: min(90vh, 880px); overflow: auto; background: var(--sht-surface); border: 1px solid var(--sht-border); box-shadow: var(--sht-shadow-lift); display: grid; grid-template-columns: 1.05fr 1fr; } .sht-room-modal__close { position: absolute; top: 10px; right: 12px; z-index: 2; width: 40px; height: 40px; border: 1px solid var(--sht-border); background: var(--sht-surface); color: var(--sht-primary); font-size: 1.5rem; line-height: 1; cursor: pointer; } .sht-room-modal__media { background: var(--sht-panel); min-height: 280px; } .sht-room-modal__media img { width: 100%; height: 100%; min-height: 280px; object-fit: cover; display: block; } .sht-room-modal__body { padding: var(--sht-s6) var(--sht-s5); display: flex; flex-direction: column; gap: 14px; } .sht-room-modal__title { margin: 0; font-size: clamp(1.6rem, 2.4vw, 2.1rem); color: var(--sht-primary); } .sht-room-modal__text { color: var(--sht-muted); font-size: .95rem; line-height: 1.75; white-space: pre-line; } .sht-room-modal__actions { margin-top: auto; padding-top: 8px; } .sht-room-modal__book { width: 100%; } body.sht-room-modal-lock { overflow: hidden; } @media (max-width: 800px) { .sht-room-modal__dialog { grid-template-columns: 1fr; } .sht-room-modal__media img { min-height: 200px; max-height: 240px; } } /* ── Unique accordion ───────────────────────────────────────────────────── */ .sht-unique-list { max-width: 820px; margin: 0 auto; border-top: 1px solid var(--sht-border); } .sht-unique-item { border-bottom: 1px solid var(--sht-border); } .sht-unique-item button { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: var(--sht-s4); padding: var(--sht-s5) 0; background: none; border: 0; cursor: pointer; font-family: var(--sht-font-head); font-size: 1.35rem; font-weight: 500; color: var(--sht-primary); text-align: left; transition: color .2s ease; } .sht-unique-item button span { flex: 0 0 auto; font-family: var(--sht-font-body); font-size: 1.4rem; font-weight: 300; color: var(--sht-accent); line-height: 1; transition: transform .25s ease; } .sht-unique-item.is-open button { color: var(--sht-accent-ink); } .sht-unique-item.is-open button span { transform: rotate(45deg); } .sht-unique-panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .3s ease; } .sht-unique-panel[hidden] { display: none; } .sht-unique-item.is-open .sht-unique-panel { grid-template-rows: 1fr; } .sht-unique-panel-inner { overflow: hidden; min-height: 0; } .sht-unique-panel-inner > p { margin: 0; padding: 0 0 var(--sht-s5); color: var(--sht-muted); font-size: .95rem; max-width: 680px; } /* ── Location grid ──────────────────────────────────────────────────────── */ .sht-location-grid { display: grid; grid-template-columns: 1fr 1fr; min-height: 520px; } .sht-location-media { background: var(--sht-primary-soft) center / cover no-repeat; min-height: 360px; } .sht-location-copy { display: flex; flex-direction: column; justify-content: center; padding: var(--sht-s7) clamp(var(--sht-s5), 6vw, var(--sht-s8)); background: var(--sht-bg); } .sht-location-copy .sht-section-label::after { margin-left: 0; } .sht-location-copy h2 { margin-bottom: .5em; } .sht-location-copy .sht-btn { align-self: flex-start; margin-top: var(--sht-s3); } @media (max-width: 860px) { .sht-location-grid { grid-template-columns: 1fr; } .sht-location-media { min-height: 280px; } } /* ── Gallery mosaic ─────────────────────────────────────────────────────── */ .sht-gallery-mosaic { display: grid; grid-template-columns: repeat(4, 1fr); grid-template-rows: repeat(2, 220px); gap: 4px; } .sht-gallery-mosaic figure { margin: 0; overflow: hidden; position: relative; } .sht-gallery-mosaic figure:nth-child(1) { grid-column: 1 / 3; grid-row: 1 / 3; } .sht-gallery-mosaic figure:nth-child(2) { grid-column: 3; grid-row: 1; } .sht-gallery-mosaic figure:nth-child(3) { grid-column: 4; grid-row: 1 / 3; } .sht-gallery-mosaic figure:nth-child(4) { grid-column: 3; grid-row: 2; } .sht-gallery-mosaic img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease, opacity .3s ease; } .sht-gallery-mosaic figure:hover img { transform: scale(1.04); opacity: .92; } .sht-section--dark .sht-socials a { border-color: rgba(196, 163, 90, .4); color: var(--sht-accent); background: transparent; } .sht-section--dark .sht-socials a:hover { background: var(--sht-accent); color: var(--sht-primary); } @media (max-width: 760px) { .sht-gallery-mosaic { grid-template-columns: 1fr 1fr; grid-template-rows: repeat(3, 180px); } .sht-gallery-mosaic figure:nth-child(1) { grid-column: 1 / -1; grid-row: 1; } .sht-gallery-mosaic figure:nth-child(2) { grid-column: 1; grid-row: 2; } .sht-gallery-mosaic figure:nth-child(3) { grid-column: 2; grid-row: 2 / 4; } .sht-gallery-mosaic figure:nth-child(4) { grid-column: 1; grid-row: 3; } } /* ── Room cards ─────────────────────────────────────────────────────────── */ .sht-room-card { display: flex; flex-direction: column; } .sht-room-media { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: var(--sht-panel); } .sht-room-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .55s ease; } .sht-room-card:hover .sht-room-media img { transform: scale(1.05); } .sht-room-media-fallback { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; font-size: 3rem; color: rgba(196, 163, 90, .7); background: linear-gradient(145deg, var(--sht-panel) 0%, var(--sht-panel-soft) 100%); } .sht-room-badge { position: absolute; top: 14px; left: 14px; background: var(--sht-accent); color: var(--sht-panel); font-size: .6rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; padding: 7px 14px; z-index: 3; } .sht-room-badge--scarce { background: #1f7a3a; color: #fff; } .sht-room-body { padding: var(--sht-s5); display: flex; flex-direction: column; gap: 10px; flex: 1; } .sht-room-body h3, .sht-room-title { margin: 0; font-size: 1.25rem; color: var(--sht-accent-ink); text-transform: uppercase; letter-spacing: .04em; } .sht-room-desc { color: var(--sht-muted); font-size: .92rem; margin: 0; } .sht-room-meta { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: .82rem; color: var(--sht-muted); } .sht-room-meta span { display: inline-flex; align-items: center; gap: 6px; } .sht-room-price { font-size: .88rem; color: var(--sht-ink); margin: 0; } .sht-room-price b { font-family: var(--sht-font-head); font-size: 1.55rem; color: var(--sht-ink); font-weight: 700; margin-right: 4px; } .sht-room-price-note { margin: 0; font-size: .8rem; color: var(--sht-muted); } .sht-room-actions { display: flex; gap: 10px; } .sht-room-actions .sht-btn { flex: 1; padding: 12px 10px; font-size: .68rem; } /* v2 catalogue / booking result cards */ .sht-room-card--v2 { background: var(--sht-surface); border-radius: 14px; overflow: hidden; box-shadow: 0 8px 28px rgba(20, 20, 20, .08); border: 1px solid var(--sht-border); cursor: pointer; } .sht-room-card--v2:hover .sht-room-media img { transform: none; } .sht-room-scrub { cursor: ew-resize; } .sht-room-scrub-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .12s ease; pointer-events: none; } .sht-room-scrub-img.is-active { opacity: 1; z-index: 1; } .sht-room-scrub-track { position: absolute; left: 10px; right: 10px; bottom: 10px; z-index: 3; display: flex; gap: 4px; } .sht-room-scrub-seg { flex: 1; height: 3px; border-radius: 2px; background: rgba(255,255,255,.55); } .sht-room-scrub-seg.is-active { background: var(--sht-accent); } .sht-room-amen-bar { position: absolute; top: 12px; right: 12px; z-index: 3; display: flex; align-items: center; gap: 6px; background: rgba(255,255,255,.92); border-radius: 6px; padding: 6px 8px; color: #5a5a5a; } .sht-room-amen-ico { display: inline-flex; align-items: center; justify-content: center; line-height: 0; } .sht-amen-ico { display: block; flex-shrink: 0; } .sht-room-title-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; } .sht-room-more { flex-shrink: 0; width: 34px; height: 34px; border-radius: 50%; border: 1.5px solid var(--sht-accent-ink); background: transparent; color: var(--sht-accent-ink); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; padding: 0; } .sht-room-more:hover { background: rgba(196, 163, 90, .12); } .sht-btn-accent, .sht-room-check-price, .sht-room-select { background: var(--sht-accent) !important; border-color: var(--sht-accent) !important; color: #fff !important; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; padding: 8px 10px !important; font-size: .65rem !important; line-height: 1.2 !important; border-radius: 5px; box-shadow: 0 2px 8px rgba(196, 163, 90, .28); } .sht-btn-accent:hover, .sht-room-check-price:hover, .sht-room-select:hover { background: var(--sht-accent-dark) !important; border-color: var(--sht-accent-dark) !important; } .sht-room-cta-row { display: flex; align-items: stretch; gap: 8px; margin-top: 4px; } .sht-room-cta-row .sht-room-select { flex: 0 0 35%; width: 35%; max-width: 35%; } .sht-room-cta-row .sht-room-check-price { flex: 1 1 auto; width: auto; min-width: 0; } /* Price is hidden until Check Price — never override [hidden] with display:flex */ .sht-room-price-block { padding: 8px 0 2px; border-top: 1px solid var(--sht-border); flex-direction: column; gap: 4px; } .sht-room-price-block[hidden], .sht-room-price-block[aria-hidden="true"] { display: none !important; } .sht-room-card.is-price-open .sht-room-price-block { display: flex !important; } .sht-grid--rooms { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: var(--sht-s5); } /* Room detail modal */ body.sht-modal-open { overflow: hidden; } .sht-room-modal { position: fixed; inset: 0; z-index: 100050; display: none; align-items: center; justify-content: center; padding: 24px; background: rgba(11, 11, 11, .55); } .sht-room-modal.is-open { display: flex; } .sht-room-modal-panel { width: min(920px, 100%); max-height: min(92vh, 900px); overflow: auto; background: #f3f3f3; border-radius: 14px; box-shadow: 0 24px 64px rgba(0,0,0,.28); padding: 22px 24px 20px; /* Desktop: hide scrollbar until hover (only draws when content overflows) */ scrollbar-width: none; -ms-overflow-style: none; } .sht-room-modal-panel::-webkit-scrollbar { width: 0; height: 0; background: transparent; } .sht-room-modal-panel::-webkit-scrollbar-thumb { background: rgba(0, 0, 0, .28); border-radius: 4px; } @media (hover: hover) and (pointer: fine) { .sht-room-modal-panel:hover, .sht-room-modal-panel:focus-within { scrollbar-width: thin; } .sht-room-modal-panel:hover::-webkit-scrollbar, .sht-room-modal-panel:focus-within::-webkit-scrollbar { width: 6px; height: 6px; } } @media (hover: none), (pointer: coarse) { .sht-room-modal-panel { scrollbar-width: thin; } .sht-room-modal-panel::-webkit-scrollbar { width: 6px; height: 6px; } } .sht-room-modal-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; } .sht-room-modal-head h2 { margin: 0; font-family: var(--sht-font-head); font-size: 1.8rem; font-weight: 600; color: var(--sht-ink); } .sht-room-modal-close { width: 36px; height: 36px; border: none; background: transparent; font-size: 28px; line-height: 1; cursor: pointer; color: #666; } .sht-rdm-fallback { min-height: 200px; display: flex; align-items: center; justify-content: center; background: #1a1a1a; border-radius: 8px; font-size: 2rem; margin-bottom: 16px; } .sht-rdm-mosaic { display: grid; grid-template-columns: 1.35fr 1.15fr .72fr; grid-template-rows: 1fr; gap: 8px; margin-bottom: 16px; min-height: 240px; } .sht-rdm-mosaic.is-single { grid-template-columns: 1fr; } .sht-rdm-mosaic.is-duo { grid-template-columns: 1fr 1fr; } .sht-rdm-mosaic figure { margin: 0; overflow: hidden; border-radius: 6px; background: #222; } .sht-rdm-mosaic img { width: 100%; height: 100%; object-fit: cover; display: block; } .sht-rdm-mosaic .is-main, .sht-rdm-mosaic .is-side { min-height: 240px; } .sht-rdm-mosaic .is-main img, .sht-rdm-mosaic .is-side img { min-height: 240px; } .sht-rdm-stack { display: grid; grid-template-rows: 1fr 1fr; gap: 8px; min-height: 240px; } .sht-rdm-stack figure { min-height: 0; } @media (max-width: 720px) { .sht-rdm-mosaic { grid-template-columns: 1fr 1fr; min-height: 0; } .sht-rdm-mosaic .is-main { grid-column: 1 / -1; min-height: 180px; } .sht-rdm-mosaic .is-main img { min-height: 180px; } .sht-rdm-mosaic .is-side { min-height: 120px; } .sht-rdm-mosaic .is-side img { min-height: 120px; } .sht-rdm-stack { min-height: 120px; } } .sht-room-modal-summary { display: grid; grid-template-columns: minmax(180px, .9fr) 1.3fr; gap: 16px; margin-bottom: 14px; } @media (max-width: 720px) { .sht-room-modal-summary { grid-template-columns: 1fr; } } .sht-room-modal-facts { display: flex; flex-direction: column; gap: 8px; font-size: .92rem; color: #444; } .sht-room-modal-desc { margin: 0; color: #555; line-height: 1.55; font-size: .95rem; } .sht-room-modal-tags { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 18px; } .sht-rdm-tag { display: inline-flex; align-items: center; gap: 7px; background: #e8e8e8; border-radius: 8px; padding: 8px 12px; font-size: .82rem; color: #444; } .sht-rdm-tag .sht-amen-ico { color: #666; } .sht-room-modal-amenities { margin-bottom: 4px; } .sht-room-modal-amenities h3 { margin: 0 0 10px; font-size: .95rem; text-transform: uppercase; letter-spacing: .08em; color: #333; } .sht-rdm-amen-flat { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 8px 18px; } .sht-rdm-amen-flat li, .sht-rdm-amen-col li { display: flex; align-items: flex-start; gap: 8px; padding-left: 0; font-size: .88rem; color: #444; line-height: 1.4; } .sht-rdm-amen-flat li::before, .sht-rdm-amen-col li::before { content: none; } .sht-rdm-amen-flat .sht-amen-ico, .sht-rdm-amen-col .sht-amen-ico { margin-top: 2px; color: #777; flex-shrink: 0; } .sht-rdm-amen-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 18px 22px; } .sht-rdm-amen-col h4 { margin: 0 0 8px; font-size: .78rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: #333; } .sht-rdm-amen-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; } .sht-room-modal-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 12px; margin-top: 18px; padding-top: 14px; border-top: 1px solid #ddd; } .sht-room-modal-price { margin-right: auto; display: none; } .sht-room-modal.is-price-open .sht-room-modal-price, .sht-room-modal-price:not([hidden]) { display: block; } .sht-room-modal-price[hidden] { display: none !important; } .sht-room-modal-price b { font-size: 1.35rem; } .sht-room-modal-price small { display: block; color: #777; font-size: .8rem; } .sht-room-modal-cta { display: flex; align-items: stretch; gap: 8px; width: min(360px, 100%); } .sht-room-modal-cta #sht-rdm-book { flex: 0 0 35%; width: 35%; } .sht-room-modal-cta #sht-rdm-check { flex: 1 1 auto; min-width: 0; } .sht-room-modal-cta .sht-btn { padding: 8px 10px !important; font-size: .65rem !important; line-height: 1.2 !important; } /* Filter pills */ .sht-filter-pills { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-bottom: var(--sht-s6); } .sht-filter-pills button { background: transparent; border: 1px solid var(--sht-border); padding: 10px 24px; font: 600 .72rem var(--sht-font-body); letter-spacing: .1em; text-transform: uppercase; color: var(--sht-muted); cursor: pointer; transition: all .2s ease; } .sht-filter-pills button:hover { border-color: var(--sht-accent); color: var(--sht-accent-ink); } .sht-filter-pills button.is-active { background: var(--sht-panel); border-color: var(--sht-panel); color: var(--sht-on-panel); } /* ── Single room ────────────────────────────────────────────────────────── */ .sht-room-single { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: var(--sht-s6); align-items: start; } @media (max-width: 940px) { .sht-room-single { grid-template-columns: 1fr; } } .sht-gallery-main { overflow: hidden; aspect-ratio: 3 / 2; background: var(--sht-panel); cursor: zoom-in; } .sht-gallery-main img, .sht-gallery-main .sht-room-media-fallback { width: 100%; height: 100%; object-fit: cover; } .sht-gallery-thumbs { display: grid; grid-template-columns: repeat(auto-fill, minmax(90px, 1fr)); gap: 8px; margin-top: 10px; } .sht-gallery-thumbs button { padding: 0; border: 2px solid transparent; overflow: hidden; cursor: pointer; background: none; aspect-ratio: 4/3; } .sht-gallery-thumbs button.is-active { border-color: var(--sht-accent); } .sht-gallery-thumbs img { width: 100%; height: 100%; object-fit: cover; } .sht-room-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: var(--sht-s3); margin: var(--sht-s5) 0; } .sht-fact { background: var(--sht-surface); border: 1px solid var(--sht-border); padding: 16px 18px; } .sht-fact b { display: block; font-size: .62rem; letter-spacing: .14em; text-transform: uppercase; color: var(--sht-accent-ink); margin-bottom: 5px; font-weight: 600; } .sht-fact span { font-weight: 600; font-size: .92rem; } .sht-feature-list { list-style: none; padding: 0; margin: var(--sht-s4) 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 8px 24px; } .sht-feature-list li { padding-left: 26px; position: relative; font-size: .93rem; } .sht-feature-list li::before { content: "—"; position: absolute; left: 0; color: var(--sht-accent); font-weight: 600; } .sht-scarcity { color: var(--sht-danger); font-size: .86rem; font-weight: 600; } .sht-policy-box { background: rgba(196, 163, 90, .1); border: 1px solid rgba(196, 163, 90, .3); padding: var(--sht-s4) var(--sht-s5); color: var(--sht-accent-ink); font-size: .9rem; margin: var(--sht-s5) 0; } .sht-book-panel { position: sticky; top: calc(var(--sht-header-h) + 20px); } .sht-book-panel .sht-card { padding: var(--sht-s5); overflow: visible; } .sht-book-panel .sht-room-price { margin: 0 0 var(--sht-s4); } .sht-book-panel .sht-btn { width: 100%; } .sht-book-panel .sht-chat-link { display: block; text-align: center; margin-top: 14px; font-size: .85rem; } @media (max-width: 940px) { .sht-book-panel { position: fixed; left: 0; right: 0; bottom: 0; z-index: 980; } .sht-book-panel .sht-card { border-radius: 0; display: flex; align-items: center; gap: 14px; padding: 12px 18px; margin: 0; border-left: 0; border-right: 0; border-bottom: 0; } .sht-book-panel .sht-card:hover { transform: none; } .sht-book-panel .sht-room-price { margin: 0; flex: 1; } .sht-book-panel .sht-btn { width: auto; } .sht-book-panel .sht-chat-link { display: none; } body.sht-has-bookbar { padding-bottom: 84px; } } /* Lightbox */ .sht-lightbox { position: fixed; inset: 0; z-index: 100000; background: rgba(11, 11, 11, .94); display: none; align-items: center; justify-content: center; padding: 4vmin; } .sht-lightbox.is-open { display: flex; } .sht-lightbox img { max-width: 100%; max-height: 100%; object-fit: contain; } .sht-lightbox-close { position: absolute; top: 18px; right: 22px; background: none; border: 0; color: var(--sht-accent); font-size: 2.4rem; line-height: 1; cursor: pointer; padding: 6px; } .sht-lightbox-nav { position: absolute; top: 50%; transform: translateY(-50%); background: transparent; border: 1px solid var(--sht-accent); color: var(--sht-accent); font-size: 1.6rem; width: 52px; height: 52px; cursor: pointer; } .sht-lightbox-prev { left: 18px; } .sht-lightbox-next { right: 18px; } .sht-lightbox-nav:hover { background: var(--sht-accent); color: var(--sht-panel); } /* ── Amenities ──────────────────────────────────────────────────────────── */ .sht-amenities-grid { display: grid; gap: var(--sht-s4); grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); } .sht-amenity { display: flex; gap: 16px; align-items: flex-start; background: var(--sht-surface); border: 1px solid var(--sht-border); padding: var(--sht-s5); transition: border-color .2s ease, transform .2s ease; } .sht-amenity:hover { border-color: var(--sht-accent); transform: translateY(-2px); } .sht-amenity-icon { font-size: 1.4rem; width: 48px; height: 48px; flex: 0 0 48px; display: flex; align-items: center; justify-content: center; border: 1px solid rgba(196, 163, 90, .35); color: var(--sht-accent-ink); } .sht-amenity h4 { margin: 0 0 4px; font-family: var(--sht-font-body); font-weight: 600; font-size: .95rem; color: var(--sht-ink); } .sht-amenity p { margin: 0; font-size: .84rem; color: var(--sht-muted); } .sht-amenity-price { font-size: .78rem; color: var(--sht-accent-ink); font-weight: 600; letter-spacing: .04em; } /* ── Split sections ─────────────────────────────────────────────────────── */ .sht-split { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sht-s7); align-items: center; } @media (max-width: 860px) { .sht-split { grid-template-columns: 1fr; } } .sht-split-media { overflow: hidden; position: relative; aspect-ratio: 4/3; } .sht-split-media::after { content: ""; position: absolute; bottom: -12px; right: -12px; width: 60%; height: 60%; border: 1px solid var(--sht-accent); pointer-events: none; } .sht-split-media img { width: 100%; height: 100%; object-fit: cover; } .sht-split-media-fallback { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; font-size: 4rem; background: linear-gradient(145deg, var(--sht-panel), var(--sht-panel-soft)); color: rgba(196, 163, 90, .65); } /* ── Menu (F&B) ─────────────────────────────────────────────────────────── */ .sht-menu-tabs { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-bottom: var(--sht-s6); } .sht-menu-section + .sht-menu-section { margin-top: var(--sht-s7); } .sht-menu-cat-title { text-align: center; position: relative; margin-bottom: var(--sht-s5); } .sht-menu-items { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: var(--sht-s4) var(--sht-s6); max-width: 980px; margin: 0 auto; } .sht-menu-item { display: flex; gap: 12px; align-items: baseline; } .sht-menu-item-icon { flex: 0 0 auto; } .sht-menu-item-name { font-weight: 600; font-family: var(--sht-font-head); font-size: 1.1rem; } .sht-menu-item-dots { flex: 1; border-bottom: 1px dotted var(--sht-border); transform: translateY(-4px); min-width: 24px; } .sht-menu-item-price { font-weight: 700; color: var(--sht-accent-ink); white-space: nowrap; font-family: var(--sht-font-head); font-size: 1.1rem; } .sht-menu-item-desc { flex-basis: 100%; font-size: .84rem; color: var(--sht-muted); margin: -4px 0 0; } .sht-menu-item-row { display: flex; gap: 12px; align-items: baseline; flex-wrap: wrap; } /* ── Stats band ─────────────────────────────────────────────────────────── */ .sht-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: var(--sht-s5); text-align: center; } .sht-stat b { display: block; font-family: var(--sht-font-head); font-size: 2.8rem; color: var(--sht-accent-ink); line-height: 1.05; font-weight: 500; } .sht-stat span { color: var(--sht-muted); font-size: .82rem; letter-spacing: .04em; } /* ── CTA band ───────────────────────────────────────────────────────────── */ .sht-cta-band { background: var(--sht-panel); color: rgba(255, 255, 255, .82); text-align: center; padding: var(--sht-s9) 0; position: relative; overflow: hidden; } .sht-cta-band::before { content: ""; position: absolute; inset: -40% auto auto 50%; transform: translateX(-50%); width: 600px; height: 600px; background: radial-gradient(circle, rgba(196, 163, 90, .12), transparent 65%); pointer-events: none; } .sht-cta-band::after { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent, var(--sht-accent), transparent); } .sht-cta-band h2 { color: var(--sht-on-panel); position: relative; } .sht-cta-band p, .sht-cta-band .sht-cta-sub { color: rgba(255, 255, 255, .72); position: relative; } .sht-cta-actions { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; margin-top: var(--sht-s5); position: relative; } .sht-cta-band .sht-btn-outline { color: #fff; border-color: rgba(196, 163, 90, .6); } .sht-cta-band .sht-btn-outline:hover { background: var(--sht-accent); color: var(--sht-panel); border-color: var(--sht-accent); } /* ── Page hero band ─────────────────────────────────────────────────────── */ .sht-page-hero { background: var(--sht-panel); color: #fff; padding: calc(var(--sht-s8) + var(--sht-s4)) 0 var(--sht-s7); text-align: center; position: relative; } .sht-page-hero::after { content: ""; position: absolute; bottom: 0; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent, var(--sht-accent), transparent); } .sht-page-hero h1 { color: #fff; margin-bottom: .25em; } .sht-page-hero .sht-breadcrumb { color: rgba(255, 255, 255, .6); font-size: .78rem; letter-spacing: .08em; text-transform: uppercase; } .sht-page-hero .sht-breadcrumb a { color: var(--sht-accent); text-decoration: none; } /* ── Contact ────────────────────────────────────────────────────────────── */ .sht-contact-grid { display: grid; grid-template-columns: 1fr 1.2fr; gap: var(--sht-s6); align-items: start; } @media (max-width: 860px) { .sht-contact-grid { grid-template-columns: 1fr; } } .sht-contact-list { list-style: none; margin: 0 0 var(--sht-s5); padding: 0; display: grid; gap: 16px; } .sht-contact-list li { display: flex; gap: 16px; align-items: flex-start; } .sht-contact-list .ico { flex: 0 0 44px; width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; border: 1px solid rgba(196, 163, 90, .35); font-size: 1.1rem; color: var(--sht-accent-ink); } .sht-contact-list b { display: block; font-size: .62rem; letter-spacing: .14em; text-transform: uppercase; color: var(--sht-accent-ink); font-weight: 600; } .sht-map-embed { overflow: hidden; border: 1px solid var(--sht-border); min-height: 320px; } .sht-map-embed iframe { width: 100%; height: 100%; min-height: 380px; border: 0; display: block; } .sht-socials { display: flex; gap: 10px; justify-content: center; } .sht-socials a { width: 42px; height: 42px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--sht-border); text-decoration: none; font-size: .95rem; color: var(--sht-primary); background: transparent; transition: background .2s ease, border-color .2s ease, color .2s ease; } .sht-socials a:hover { background: var(--sht-accent); border-color: var(--sht-accent); color: var(--sht-panel); } /* ── Placeholder ────────────────────────────────────────────────────────── */ .sht-placeholder { border: 1px dashed var(--sht-border); text-align: center; padding: var(--sht-s7) var(--sht-s5); color: var(--sht-muted); background: color-mix(in srgb, var(--sht-surface) 70%, transparent); } .sht-placeholder .ico { font-size: 2.2rem; display: block; margin-bottom: 8px; } /* ── Footer ─────────────────────────────────────────────────────────────── */ .sht-footer { background: var(--sht-panel); color: rgba(255, 255, 255, .68); margin-top: var(--sht-s8); border-top: 1px solid rgba(196, 163, 90, .25); } body.sht-no-footer-gap .sht-footer { margin-top: 0; } .sht-footer a { color: rgba(255, 255, 255, .82); text-decoration: none; transition: color .2s ease; } .sht-footer a:hover { color: var(--sht-accent); } .sht-footer-main { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: var(--sht-s6); padding: var(--sht-s7) 0; } @media (max-width: 940px) { .sht-footer-main { grid-template-columns: 1fr 1fr; } } @media (max-width: 560px) { .sht-footer-main { grid-template-columns: 1fr; } } .sht-footer h4 { color: var(--sht-accent); font-family: var(--sht-font-body); font-size: .68rem; letter-spacing: .18em; text-transform: uppercase; margin-bottom: var(--sht-s4); font-weight: 600; } .sht-footer-brand { font-family: var(--sht-font-head); font-size: 1.65rem; color: #fff; font-weight: 500; margin-bottom: 12px; letter-spacing: .02em; } .sht-footer-about { font-size: .88rem; line-height: 1.75; } .sht-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; font-size: .88rem; } .sht-footer-contact li { display: flex; gap: 10px; } .sht-footer-bottom { border-top: 1px solid rgba(255, 255, 255, .1); padding: var(--sht-s4) 0; display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; font-size: .72rem; letter-spacing: .04em; color: rgba(255, 255, 255, .45); } /* ── Content fallbacks ──────────────────────────────────────────────────── */ .sht-content { padding: var(--sht-s7) 0 var(--sht-s8); } .sht-prose { max-width: 760px; margin: 0 auto; } .sht-prose img { border: 1px solid var(--sht-border); } .sht-post-list { display: grid; gap: var(--sht-s5); grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); } .sht-post-card { padding: var(--sht-s5); } .sht-post-card h3 a { text-decoration: none; } .sht-post-meta { font-size: .72rem; color: var(--sht-muted); text-transform: uppercase; letter-spacing: .12em; } .sht-pagination { display: flex; gap: 8px; justify-content: center; margin-top: var(--sht-s6); } .sht-pagination .page-numbers { display: inline-flex; min-width: 40px; height: 40px; align-items: center; justify-content: center; border: 1px solid var(--sht-border); text-decoration: none; padding: 0 10px; transition: background .2s ease, color .2s ease; } .sht-pagination .current { background: var(--sht-panel); color: var(--sht-on-panel); border-color: var(--sht-panel); } /* WP core alignment/classes */ .alignwide { margin-left: calc(50% - min(50vw, 620px)); margin-right: calc(50% - min(50vw, 620px)); width: auto; max-width: none; } .alignfull { margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); width: auto; max-width: none; } .wp-caption, .wp-caption-text, .sticky, .gallery-caption, .bypostauthor { display: block; } /* ── Reveal on scroll ───────────────────────────────────────────────────── */ .sht-reveal { opacity: 0; transform: translateY(28px); transition: opacity .75s ease, transform .75s ease; } .sht-reveal.is-visible { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { .sht-reveal { opacity: 1; transform: none; } } /* ── Site-wide forms / content (follow day-night tokens) ────────────────── */ .sht-content input[type="text"], .sht-content input[type="email"], .sht-content input[type="tel"], .sht-content input[type="url"], .sht-content input[type="number"], .sht-content input[type="search"], .sht-content input[type="date"], .sht-content textarea, .sht-content select, .sht-prose input[type="text"], .sht-prose input[type="email"], .sht-prose input[type="tel"], .sht-prose textarea, .sht-prose select, .sht-contact-grid input, .sht-contact-grid textarea, .sht-contact-grid select { background: var(--sht-surface); color: var(--sht-ink); border: 1px solid var(--sht-border); border-radius: 0; padding: 12px 14px; font: 400 .95rem var(--sht-font-body); transition: border-color .2s ease, background .35s ease, color .35s ease; } .sht-content input:focus, .sht-content textarea:focus, .sht-content select:focus, .sht-prose input:focus, .sht-prose textarea:focus, .sht-contact-grid input:focus, .sht-contact-grid textarea:focus { outline: none; border-color: var(--sht-accent); } .sht-content table, .sht-prose table { border-color: var(--sht-border); } .sht-content th, .sht-prose th { background: var(--sht-surface); color: var(--sht-primary); } .sht-content td, .sht-prose td { border-color: var(--sht-border); color: var(--sht-ink); } .sht-policy-box { transition: background .35s ease, border-color .35s ease, color .35s ease; } html.sht-night .sht-policy-box { background: rgba(212, 181, 106, .12); border-color: rgba(212, 181, 106, .35); } html.sht-night .sht-card, html.sht-night .sht-amenity, html.sht-night .sht-fact { background: var(--sht-surface); border-color: var(--sht-border); } html.sht-night .sht-section--alt { background: var(--sht-surface); } /* ── RTL sanity ─────────────────────────────────────────────────────────── */ body.rtl .sht-brand { margin-right: 0; margin-left: auto; } body.rtl .sht-feature-list li { padding-left: 0; padding-right: 26px; } body.rtl .sht-feature-list li::before { left: auto; right: 0; } body.rtl .sht-welcome-copy .sht-section-label::after, body.rtl .sht-location-copy .sht-section-label::after { margin-left: auto; margin-right: 0; }