is a SIBLING of .ws-header (not its ancestor), so this is safe for sticky, unlike overflow-x on . */ .ws img { max-width: 100%; display: block; } .ws a { color: inherit; text-decoration: none; } .ws h1, .ws h2, .ws h3, .ws h4 { font-family: var(--ws-font-display); line-height: var(--ws-leading-tight); font-weight: 600; margin: 0 0 var(--ws-space-3); color: var(--ws-ink); } .ws h1 { font-size: var(--ws-text-4xl); } .ws h2 { font-size: var(--ws-text-3xl); } .ws h3 { font-size: var(--ws-text-2xl); } .ws p { margin: 0 0 var(--ws-space-4); } .ws button { font-family: inherit; } .ws :focus-visible { outline: 3px solid var(--ws-gold); outline-offset: 2px; } .ws .visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; } .ws .skip-link { position: absolute; left: 1rem; top: -60px; background: var(--ws-ink); color: var(--ws-white); padding: 0.75rem 1.25rem; border-radius: var(--ws-radius-sm); z-index: 200; transition: top var(--ws-duration-fast) var(--ws-ease); } .ws .skip-link:focus { top: 1rem; } body.ws-menu-open { overflow: hidden; } @media (min-width: 768px) { .ws h1 { font-size: var(--ws-text-5xl); } .ws h2 { font-size: 2.5rem; } } .ws-container { max-width: var(--ws-container-max); margin: 0 auto; padding: 0 var(--ws-container-pad); } .ws-section { padding: var(--ws-space-9) 0; } .ws-section--sand { background: var(--ws-sand); } .ws-eyebrow { display: inline-block; font-size: var(--ws-text-xs); font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ws-gold-dark); margin-bottom: var(--ws-space-2); } .ws-section-head { text-align: center; max-width: 640px; margin: 0 auto var(--ws-space-7); } .ws-section-head p { color: var(--ws-ink-soft); } /* ============================== BUTTONS ============================== */ .ws-btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; padding: 0.9rem 1.75rem; border-radius: var(--ws-radius-pill); font-weight: 600; font-size: var(--ws-text-sm); letter-spacing: 0.02em; border: 2px solid transparent; cursor: pointer; transition: transform var(--ws-duration-fast) var(--ws-ease), box-shadow var(--ws-duration-fast) var(--ws-ease), background var(--ws-duration-fast) var(--ws-ease); min-height: 48px; } .ws-btn:hover { transform: translateY(-1px); } .ws-btn:active { transform: translateY(0); } .ws-btn--primary { background: var(--ws-gold); color: var(--ws-white); } .ws-btn--primary:hover { background: var(--ws-gold-dark); box-shadow: var(--ws-shadow-md); } .ws-btn--outline { background: transparent; border-color: var(--ws-white); color: var(--ws-white); } .ws-btn--outline:hover { background: rgba(255,255,255,0.15); } .ws-btn--ink { background: transparent; border-color: var(--ws-ink); color: var(--ws-ink); } .ws-btn--ink:hover { background: var(--ws-ink); color: var(--ws-white); } .ws-btn--block { width: 100%; } .ws-btn[disabled], .ws-btn.is-disabled { opacity: 0.5; cursor: not-allowed; transform: none; } /* ============================== HEADER ============================== */ /* Phase 7C §28: on staging only, ws-has-staging-banner shifts the sticky offset down by the red banner's real measured height (set as a CSS var by JS) so the two never overlap. On production this class is never added (the banner element doesn't exist), so top stays 0 as normal. */ .ws-header { position: sticky; top: 0; z-index: 100; background: rgba(253,249,242,0.92); backdrop-filter: blur(10px); border-bottom: 1px solid transparent; transition: box-shadow var(--ws-duration-base) var(--ws-ease), padding var(--ws-duration-base) var(--ws-ease); } body.ws-has-staging-banner { padding-top: var(--ws-staging-banner-h, 0px); } body.ws-has-staging-banner .ws-header { top: var(--ws-staging-banner-h, 0px); } .ws-header.is-scrolled { box-shadow: var(--ws-shadow-sm); border-bottom-color: var(--ws-line); } .ws-header__bar { display: flex; align-items: center; justify-content: space-between; padding: var(--ws-space-3) 0; min-height: var(--ws-header-h); transition: min-height var(--ws-duration-base) var(--ws-ease); } .ws-header.is-scrolled .ws-header__bar { min-height: var(--ws-header-h-compact); } .ws-header__logo img { height: 42px; width: auto; transition: height var(--ws-duration-base) var(--ws-ease); } .ws-header.is-scrolled .ws-header__logo img { height: 34px; } .ws-header__nav { display: none; } .ws-header__nav ul { display: flex; align-items: center; gap: var(--ws-space-6); list-style: none; margin: 0; padding: 0; } .ws-header__nav a { font-weight: 500; font-size: var(--ws-text-sm); color: var(--ws-ink); padding: 0.5rem 0; position: relative; } .ws-header__nav a::after { content:""; position:absolute; left:0; right:0; bottom:-2px; height:2px; background:var(--ws-gold); transform:scaleX(0); transition:transform var(--ws-duration-fast) var(--ws-ease); } .ws-header__nav a:hover::after, .ws-header__nav a:focus-visible::after { transform:scaleX(1); } .ws-header__actions { display: flex; align-items: center; gap: var(--ws-space-3); } .ws-header__cta { white-space: nowrap; } .ws-burger { display: inline-flex; flex-direction: column; justify-content: center; align-items: center; width: 46px; height: 46px; border-radius: var(--ws-radius-sm); border: 1px solid var(--ws-line); background: var(--ws-white); gap: 5px; cursor: pointer; } .ws-burger span { width: 20px; height: 2px; background: var(--ws-ink); transition: transform var(--ws-duration-fast) var(--ws-ease), opacity var(--ws-duration-fast) var(--ws-ease); } .ws-burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); } .ws-burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; } .ws-burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } .ws-mobile-menu { position: fixed; inset: 0; z-index: 150; visibility: hidden; } .ws-mobile-menu.is-open { visibility: visible; } .ws-mobile-menu__backdrop { position: absolute; inset: 0; background: var(--ws-overlay-backdrop); opacity: 0; transition: opacity var(--ws-duration-base) var(--ws-ease); } .ws-mobile-menu.is-open .ws-mobile-menu__backdrop { opacity: 1; } .ws-mobile-menu__panel { position: absolute; top: 0; right: 0; bottom: 0; width: min(340px, 86vw); background: var(--ws-white); padding: var(--ws-space-6) var(--ws-space-5); transform: translateX(100%); transition: transform var(--ws-duration-base) var(--ws-ease); display: flex; flex-direction: column; overflow-y: auto; } .ws-mobile-menu.is-open .ws-mobile-menu__panel { transform: translateX(0); } .ws-mobile-menu__close { align-self: flex-end; width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--ws-line); background: var(--ws-white); cursor: pointer; font-size: 1.25rem; } .ws-mobile-menu ul { list-style: none; margin: var(--ws-space-5) 0; padding: 0; } .ws-mobile-menu li { border-bottom: 1px solid var(--ws-line); } .ws-mobile-menu a { display: block; padding: var(--ws-space-4) 0; font-size: var(--ws-text-lg); font-weight: 500; } .ws-mobile-menu__cta { margin-top: auto; } @media (min-width: 1024px) { .ws-header__nav { display: block; } .ws-burger, .ws-mobile-menu { display: none; } } /* ============================== HERO ============================== */ .ws-hero { position: relative; min-height: 88vh; display: flex; align-items: flex-end; color: var(--ws-white); } .ws-hero__media { position: absolute; inset: 0; overflow: hidden; } .ws-hero__media img { width: 100%; height: 100%; object-fit: cover; } .ws-hero__media::after { content:""; position:absolute; inset:0; background: var(--ws-overlay-scrim); } .ws-hero__content { position: relative; z-index: 2; padding-bottom: var(--ws-space-9); width: 100%; } .ws-hero__eyebrow { font-size: var(--ws-text-sm); letter-spacing: 0.18em; text-transform: uppercase; font-weight: 600; opacity: 0.92; margin-bottom: var(--ws-space-3); } .ws-hero h1 { color: var(--ws-white); margin-bottom: var(--ws-space-4); text-shadow: 0 2px 20px rgba(0,0,0,0.25); } .ws-hero p { max-width: 46ch; font-size: var(--ws-text-lg); opacity: 0.95; margin-bottom: var(--ws-space-6); } .ws-hero__ctas { display: flex; flex-wrap: wrap; gap: var(--ws-space-3); margin-bottom: var(--ws-space-8); } @media (min-width: 768px) { .ws-hero { min-height: 92vh; } } .ws-hero__media video, .ws-hero__media picture { width: 100%; height: 100%; } .ws-hero__media video { object-fit: cover; } /* Hero slider (post-launch completion pass): crossfade + slow zoom, generic reusable component -- see westside_hero_slides() and westside-public.js. */ .ws-hero__slider { position: absolute; inset: 0; overflow: hidden; } .ws-hero__slide { position: absolute; inset: 0; opacity: 0; transition: opacity 1.1s ease; } .ws-hero__slide.is-active { opacity: 1; z-index: 1; } .ws-hero__slide img, .ws-hero__slide video { width: 100%; height: 100%; object-fit: cover; transform: scale(1); transition: transform 7s linear; will-change: transform; } .ws-hero__slide.is-active img, .ws-hero__slide.is-active video { transform: scale(1.08); } /* Slide video/link options (productization pass, 2026-08-31) */ .ws-hero__slide-link { position: absolute; inset: 0; z-index: 2; } .ws-hero__slider-arrow { position: absolute; top: 50%; transform: translateY(-50%); z-index: 5; width: 44px; height: 44px; border-radius: 50%; background: rgba(0,0,0,0.35); color: #fff; border: none; cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 15px; line-height: 1; transition: background var(--ws-duration-fast) var(--ws-ease); } .ws-hero__slider-arrow:hover, .ws-hero__slider-arrow:focus-visible { background: rgba(0,0,0,0.6); } .ws-hero__slider-arrow--prev { left: var(--ws-space-4); } .ws-hero__slider-arrow--next { right: var(--ws-space-4); } .ws-hero__slider-dots { position: absolute; left: 0; right: 0; bottom: 108px; z-index: 5; display: flex; justify-content: center; gap: 8px; } .ws-hero__slider-dot { width: 8px; height: 8px; padding: 0; border: none; border-radius: 50%; background: rgba(255,255,255,0.55); cursor: pointer; transition: background var(--ws-duration-fast) var(--ws-ease), transform var(--ws-duration-fast) var(--ws-ease); } .ws-hero__slider-dot.is-active { background: #fff; transform: scale(1.35); } @media (max-width: 767px) { .ws-hero__slider-arrow { width: 36px; height: 36px; font-size: 13px; top: 13vh; } .ws-hero__slider-dots { bottom: auto; top: calc(26vh - 24px); } } @media (prefers-reduced-motion: reduce) { .ws-hero__slide { transition: opacity 0.3s linear; } .ws-hero__slide img, .ws-hero__slide video { transition: none; } .ws-hero__slide.is-active img, .ws-hero__slide.is-active video { transform: none; } } /* Booking search now overlays the hero directly (post-launch completion pass) -- was a separate section below the hero before, requiring a scroll to see it on most screens. Straddles the hero's own bottom edge via the existing .ws-search translateY(50%) below, unchanged. On narrow screens the search form stacks into 5 tall rows (no room for the desktop "straddle" trick without covering the CTAs and the slider dots), so below 768px it drops out of the overlay entirely and flows normally after the hero content instead -- see the mobile block further down. */ .ws-hero__search-overlay { position: absolute; left: 0; right: 0; bottom: 0; z-index: 4; } @media (max-width: 767px) { .ws-hero { flex-direction: column; align-items: stretch; min-height: auto; padding-top: 26vh; } .ws-hero__content { padding-bottom: var(--ws-space-4); } .ws-hero p { margin-bottom: var(--ws-space-4); } .ws-hero__ctas { margin-bottom: var(--ws-space-4); } /* .ws-hero__search-overlay also carries .ws-container (max-width + margin:0 auto for its desktop centering). Once it drops to position:static here it becomes a real flex item of .ws-hero again -- and margin:auto on a flex item's cross axis overrides align-items:stretch (spec behaviour), so it was shrinking to its content's intrinsic width instead of the viewport's, pushing the two-column date fields off the right edge. width:100% forces it back to the parent's width regardless. */ .ws-hero__search-overlay { position: static; z-index: auto; padding-bottom: var(--ws-space-6); width: 100%; margin-left: 0; margin-right: 0; } .ws-hero__search-overlay .ws-search { transform: none; padding: var(--ws-space-4); } /* Compact 2-column layout for the stacked mobile form: dates share a row, guests + submit each take the full width below them -- keeps the card short enough to stay close to the fold. */ .ws-hero__search-overlay .ws-search__grid { grid-template-columns: 1fr 1fr; gap: var(--ws-space-3); } .ws-hero__search-overlay .ws-search__grid .ws-field:nth-child(3), .ws-hero__search-overlay .ws-search__grid .ws-field:nth-child(4) { grid-column: 1 / -1; } /* Grid tracks sized "1fr" still respect their content's min-content width unless the item can shrink below it -- .ws-field (and the input/select inside it) had no min-width:0, so the browser's default control sizing was winning the argument with the grid and pushing the second column off the right edge of the card. */ .ws-hero__search-overlay .ws-search__grid .ws-field { min-width: 0; } .ws-hero__search-overlay .ws-search__grid .ws-field input, .ws-hero__search-overlay .ws-search__grid .ws-field select { min-width: 0; } } /* ============================== BREADCRUMBS (Phase 7C §14) ============================== */ .ws-breadcrumbs { border-bottom: 1px solid var(--ws-line); background: var(--ws-cream); } .ws-breadcrumbs__trail { display: none; list-style: none; margin: 0; padding: var(--ws-space-3) 0; font-size: var(--ws-text-xs); color: var(--ws-ink-soft); } .ws-breadcrumbs__trail li { display: inline; } .ws-breadcrumbs__trail a { color: var(--ws-ink-soft); } .ws-breadcrumbs__trail a:hover { color: var(--ws-gold-dark); text-decoration: underline; } .ws-breadcrumbs__trail [aria-current="page"] { color: var(--ws-ink); font-weight: 600; } .ws-breadcrumbs__sep { margin: 0 0.5em; } .ws-breadcrumbs__back { display: inline-block; padding: var(--ws-space-3) 0; font-size: var(--ws-text-sm); font-weight: 600; color: var(--ws-ink-soft); } @media (min-width: 768px) { .ws-breadcrumbs__trail { display: block; } .ws-breadcrumbs__back { display: none; } } /* ============================== PAGE HERO SYSTEM (Phase 7 §14) ============================== */ .ws-page-hero { position: relative; } .ws-page-hero--full { min-height: 56vh; display: flex; align-items: flex-end; color: var(--ws-white); } .ws-page-hero--full .ws-page-hero__media { position: absolute; inset: 0; overflow: hidden; } .ws-page-hero--full .ws-page-hero__media img { width: 100%; height: 100%; object-fit: cover; } .ws-page-hero--full .ws-page-hero__media::after { content:""; position:absolute; inset:0; background: var(--ws-overlay-scrim); } .ws-page-hero--full .ws-page-hero__content { position: relative; z-index: 2; padding: var(--ws-space-8) 0; } .ws-page-hero--full h1 { color: var(--ws-white); } .ws-page-hero--full p { max-width: 50ch; opacity: 0.95; } .ws-page-hero--compact { padding: var(--ws-space-8) 0 var(--ws-space-6); background: var(--ws-sand); } .ws-page-hero--compact p { max-width: 56ch; margin-left: auto; margin-right: auto; color: var(--ws-ink-soft); } .ws-page-hero--functional { padding: var(--ws-space-7) 0 var(--ws-space-5); border-bottom: 1px solid var(--ws-line); } .ws-page-hero--functional p { color: var(--ws-ink-soft); max-width: 60ch; } /* ============================== VIDEO STORY + MODAL (Phase 7 §8/§9) ============================== */ .ws-video-story__trigger { position: relative; display: block; width: 100%; border: none; padding: 0; cursor: pointer; border-radius: var(--ws-radius-lg); overflow: hidden; aspect-ratio: 16/9; background: var(--ws-ink); } .ws-video-story__trigger img { width: 100%; height: 100%; object-fit: cover; opacity: 0.85; transition: opacity var(--ws-duration-base) var(--ws-ease); } .ws-video-story__trigger:hover img { opacity: 0.7; } .ws-video-story__play { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 84px; height: 84px; border-radius: 50%; background: rgba(255,255,255,0.92); color: var(--ws-ink); display: flex; align-items: center; justify-content: center; font-size: 1.8rem; padding-left: 6px; transition: transform var(--ws-duration-fast) var(--ws-ease); } .ws-video-story__trigger:hover .ws-video-story__play { transform: translate(-50%,-50%) scale(1.06); } .ws-video-modal { position: fixed; inset: 0; z-index: 300; display: none; align-items: center; justify-content: center; background: rgba(15,15,12,0.94); padding: var(--ws-space-4); } .ws-video-modal.is-open { display: flex; } .ws-video-modal__inner { position: relative; width: 100%; max-width: 1000px; aspect-ratio: 16/9; background: #000; } .ws-video-modal__frame, .ws-video-modal__frame video, .ws-video-modal__frame iframe { width: 100%; height: 100%; border: 0; display: block; } .ws-video-modal__close { position: absolute; top: -48px; right: 0; background: rgba(255,255,255,0.12); border: none; color: var(--ws-white); width: 40px; height: 40px; border-radius: 50%; font-size: 1.25rem; cursor: pointer; } /* ============================== INTRO / STORY FLOW HELPERS ============================== */ .ws-intro { text-align: center; max-width: 760px; margin: 0 auto; } .ws-intro p { font-size: var(--ws-text-lg); color: var(--ws-ink-soft); } /* ============================== BOOKING SEARCH ============================== */ .ws-search { position: relative; z-index: 3; background: var(--ws-white); border-radius: var(--ws-radius-lg); box-shadow: var(--ws-shadow-lg); padding: var(--ws-space-5); margin: 0 auto; transform: translateY(50%); } .ws-search__grid { display: grid; grid-template-columns: 1fr; gap: var(--ws-space-4); } .ws-field { display: flex; flex-direction: column; gap: var(--ws-space-1); text-align: left; } .ws-field label { font-size: var(--ws-text-xs); font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ws-ink-soft); } .ws-field input, .ws-field select { border: 1.5px solid var(--ws-line); border-radius: var(--ws-radius-sm); padding: 0.85rem 1rem; font-size: var(--ws-text-base); color: var(--ws-ink); background: var(--ws-white); min-height: 48px; width: 100%; } .ws-field input:focus, .ws-field select:focus { border-color: var(--ws-gold); } .ws-field--error input, .ws-field--error select { border-color: var(--ws-error); } .ws-field__error { font-size: var(--ws-text-xs); color: var(--ws-error); min-height: 1.1em; } .ws-guest-select { position: relative; } .ws-guest-summary { border: 1.5px solid var(--ws-line); border-radius: var(--ws-radius-sm); padding: 0.85rem 1rem; min-height: 48px; display:flex; align-items:center; justify-content:space-between; cursor: pointer; background: var(--ws-white); width: 100%; font-size: var(--ws-text-base); } .ws-guest-popover { position: absolute; top: calc(100% + 8px); left: 0; right: 0; background: var(--ws-white); border: 1px solid var(--ws-line); border-radius: var(--ws-radius-md); box-shadow: var(--ws-shadow-md); padding: var(--ws-space-4); z-index: 10; display: none; } .ws-guest-popover.is-open { display: block; } .ws-guest-row { display: flex; align-items: center; justify-content: space-between; padding: var(--ws-space-2) 0; } .ws-stepper { display: flex; align-items: center; gap: var(--ws-space-3); } .ws-stepper button { width: 36px; height: 36px; border-radius: 50%; border: 1.5px solid var(--ws-line); background: var(--ws-white); font-size: 1.1rem; cursor: pointer; } .ws-stepper button:disabled { opacity: 0.4; cursor: not-allowed; } .ws-stepper output { min-width: 1.5em; text-align: center; font-weight: 600; } .ws-search__submit { margin-top: var(--ws-space-2); } .ws-search__banner-error { display: none; background: var(--ws-error-bg); color: var(--ws-error); border-radius: var(--ws-radius-sm); padding: var(--ws-space-3) var(--ws-space-4); font-size: var(--ws-text-sm); margin-bottom: var(--ws-space-4); } .ws-search__banner-error.is-visible { display: block; } @media (min-width: 768px) { .ws-search { padding: var(--ws-space-6); } .ws-search__grid { grid-template-columns: repeat(4, 1fr) auto; align-items: end; gap: var(--ws-space-4); } .ws-search__submit { margin-top: 0; } } /* Phase 7 §15: persistent mobile app-like action dock — replaces the Phase 6 single-button sticky bar. Always present on mobile (not scroll-triggered) so it behaves like real app navigation, not a promo banner. */ .ws-action-dock { position: fixed; left: 0; right: 0; bottom: 0; z-index: 90; background: var(--ws-white); border-top: 1px solid var(--ws-line); box-shadow: 0 -6px 20px rgba(0,0,0,0.08); display: flex; padding-bottom: env(safe-area-inset-bottom, 0); } .ws-action-dock a { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; padding: 0.6rem 0.25rem; min-height: 56px; font-size: var(--ws-text-xs); font-weight: 600; color: var(--ws-ink); transition: color var(--ws-duration-fast) var(--ws-ease), background var(--ws-duration-fast) var(--ws-ease); } .ws-action-dock a:active { background: var(--ws-sand); } .ws-action-dock a + a { border-left: 1px solid var(--ws-line); } .ws-action-dock__icon { width: 22px; height: 22px; color: var(--ws-gold-dark); } body.ws { padding-bottom: calc(56px + env(safe-area-inset-bottom, 0)); } @media (min-width: 1024px) { .ws-action-dock { display: none; } body.ws { padding-bottom: 0; } } /* ============================== THIRD-PARTY WIDGET CONFLICT (Phase 7C §29) ============================== */ /* The floating black/green widget reported is CookieAdmin PRO's persistent "re-open cookie preferences" icon (.cookieadmin_re_consent) — a required GDPR-style consent-law control, NOT something to remove. It's fixed to the bottom of the viewport by the plugin's own JS (inline style, hence !important here to reliably win), which on mobile collides with our full-width action dock. Lifted above the dock + back-to-top button instead of removed. Left completely alone on pages without the dock. */ body.ws .cookieadmin_re_consent { bottom: calc(56px + env(safe-area-inset-bottom, 0) + var(--ws-space-3)) !important; } @media (min-width: 1024px) { body.ws .cookieadmin_re_consent { bottom: var(--ws-space-4) !important; } } /* ============================== BACK TO TOP (Phase 7C §4) ============================== */ .ws-back-to-top { position: fixed; right: var(--ws-space-4); bottom: calc(56px + env(safe-area-inset-bottom, 0) + var(--ws-space-4)); z-index: 85; width: 46px; height: 46px; border-radius: 50%; background: var(--ws-white); border: 1px solid var(--ws-line); box-shadow: var(--ws-shadow-md); display: flex; align-items: center; justify-content: center; cursor: pointer; opacity: 0; transform: translateY(8px); pointer-events: none; transition: opacity var(--ws-duration-base) var(--ws-ease), transform var(--ws-duration-base) var(--ws-ease); } .ws-back-to-top.is-visible { opacity: 1; transform: translateY(0); pointer-events: auto; } .ws-back-to-top svg { width: 20px; height: 20px; color: var(--ws-ink); } @media (min-width: 1024px) { .ws-back-to-top { bottom: var(--ws-space-5); } } @media (prefers-reduced-motion: reduce) { .ws-back-to-top { transition: opacity var(--ws-duration-fast) linear; transform: none; } } /* ============================== ROOM DISCOVERY / CARDS ============================== */ .ws-card-grid { display: grid; grid-template-columns: 1fr; gap: var(--ws-space-6); } @media (min-width: 640px) { .ws-card-grid { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1024px) { .ws-card-grid { grid-template-columns: repeat(3, 1fr); } } .ws-room-card { background: var(--ws-white); border-radius: var(--ws-radius-md); overflow: hidden; box-shadow: var(--ws-shadow-sm); transition: box-shadow 350ms var(--ws-ease), transform 350ms var(--ws-ease); display: flex; flex-direction: column; } .ws-room-card:hover { box-shadow: var(--ws-shadow-lg); transform: translateY(-4px); } @media (prefers-reduced-motion: reduce) { .ws-room-card:hover { transform: none; } } .ws-room-card__media { aspect-ratio: 4/3; overflow: hidden; } .ws-room-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 400ms var(--ws-ease); } .ws-room-card:hover .ws-room-card__media img { transform: scale(1.04); } .ws-room-card__media--placeholder { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--ws-space-2); background: linear-gradient(135deg, var(--ws-palm-light), var(--ws-sand)); color: var(--ws-ink-soft); } .ws-room-card__media--placeholder span { font-size: 2rem; } .ws-room-card__media--placeholder small { font-size: var(--ws-text-xs); } .ws-room-card__body { padding: var(--ws-space-5); display: flex; flex-direction: column; gap: var(--ws-space-2); flex: 1; } .ws-room-card__name { font-size: var(--ws-text-xl); margin: 0; } .ws-room-card__meta { font-size: var(--ws-text-sm); color: var(--ws-ink-soft); } .ws-room-card__amenities { display: flex; flex-wrap: wrap; gap: var(--ws-space-2); margin: var(--ws-space-2) 0; } .ws-chip { font-size: var(--ws-text-xs); background: var(--ws-sand); color: var(--ws-ink-soft); padding: 0.3rem 0.7rem; border-radius: var(--ws-radius-pill); } .ws-room-card__price { margin-top: auto; padding-top: var(--ws-space-3); border-top: 1px solid var(--ws-line); } .ws-room-card__price .ws-price-amount { font-family: var(--ws-font-display); font-size: var(--ws-text-2xl); color: var(--ws-ink); font-weight: 600; } .ws-room-card__price .ws-price-unit { font-size: var(--ws-text-sm); color: var(--ws-ink-soft); } .ws-room-card__price .ws-price-total { font-size: var(--ws-text-xs); color: var(--ws-ink-soft); margin-top: 2px; } .ws-room-card__actions { display: flex; gap: var(--ws-space-2); margin-top: var(--ws-space-3); } .ws-room-card__actions .ws-btn { flex: 1; padding: 0.7rem 1rem; font-size: var(--ws-text-xs); } .ws-room-card--unavailable { opacity: 0.6; } .ws-room-card__unavailable-note { font-size: var(--ws-text-xs); color: var(--ws-error); font-weight: 600; } /* ============================== RESULTS PAGE ============================== */ .ws-results-summary { background: var(--ws-sand); border-radius: var(--ws-radius-md); padding: var(--ws-space-5); display: flex; flex-wrap: wrap; gap: var(--ws-space-5); align-items: center; justify-content: space-between; margin-bottom: var(--ws-space-7); } .ws-results-summary__stats { display: flex; flex-wrap: wrap; gap: var(--ws-space-6); } .ws-results-summary__stat .label { font-size: var(--ws-text-xs); text-transform: uppercase; letter-spacing: 0.06em; color: var(--ws-ink-soft); display:block; } .ws-results-summary__stat .value { font-weight: 600; font-size: var(--ws-text-lg); } .ws-rate-breakdown { list-style: none; margin: var(--ws-space-2) 0 0; padding: 0; font-size: var(--ws-text-sm); } .ws-rate-breakdown li { display: flex; justify-content: space-between; padding: 0.3rem 0; border-bottom: 1px dashed var(--ws-line); } .ws-rate-breakdown li:last-child { border-bottom: none; font-weight: 700; padding-top: 0.5rem; } .ws-rate-toggle { background: none; border: none; color: var(--ws-gold-dark); font-size: var(--ws-text-xs); font-weight: 600; cursor: pointer; padding: 0.25rem 0; text-decoration: underline; } /* ============================== ROOM DETAIL ============================== */ .ws-gallery { display: grid; grid-template-columns: 1fr; gap: var(--ws-space-2); border-radius: var(--ws-radius-md); overflow: hidden; } .ws-gallery__main { position: relative; aspect-ratio: 16/10; overflow: hidden; cursor: zoom-in; } .ws-gallery__main img { width: 100%; height: 100%; object-fit: cover; } .ws-gallery__thumbs { display: flex; gap: var(--ws-space-2); overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 4px; } .ws-gallery__thumbs img { width: 84px; height: 64px; object-fit: cover; border-radius: var(--ws-radius-sm); flex: none; scroll-snap-align: start; cursor: pointer; opacity: 0.75; } .ws-gallery__thumbs img.is-active { opacity: 1; outline: 2px solid var(--ws-gold); } .ws-gallery__count { position: absolute; right: var(--ws-space-4); bottom: var(--ws-space-4); z-index: 2; display: inline-flex; align-items: center; gap: 6px; background: rgba(15,15,12,0.72); color: var(--ws-white); font-size: var(--ws-text-xs); font-weight: 600; padding: 0.5rem 0.85rem; border-radius: var(--ws-radius-sm); pointer-events: none; } .ws-lightbox { position: fixed; inset: 0; background: rgba(15,15,12,0.94); z-index: 300; display: none; align-items: center; justify-content: center; } .ws-lightbox.is-open { display: flex; } .ws-lightbox img { max-width: 92vw; max-height: 82vh; object-fit: contain; } .ws-lightbox__close, .ws-lightbox__prev, .ws-lightbox__next { position: absolute; background: rgba(255,255,255,0.12); border: none; color: var(--ws-white); width: 46px; height: 46px; border-radius: 50%; font-size: 1.25rem; cursor: pointer; } .ws-lightbox__close { top: var(--ws-space-4); right: var(--ws-space-4); } .ws-lightbox__prev { left: var(--ws-space-4); top: 50%; transform: translateY(-50%); } .ws-lightbox__next { right: var(--ws-space-4); top: 50%; transform: translateY(-50%); } .ws-room-detail__layout { display: grid; grid-template-columns: 1fr; gap: var(--ws-space-8); } /* Blog post body copy (productization pass, 2026-08-31) -- baseline prose styling for whatever the block/classic editor outputs, since the_content() renders unstyled HTML the theme has never had to dress before now. */ .ws-post-content { font-size: var(--ws-text-base); line-height: 1.75; color: var(--ws-ink); } .ws-post-content > * + * { margin-top: var(--ws-space-4); } .ws-post-content h2 { font-size: var(--ws-text-xl); margin-top: var(--ws-space-7); } .ws-post-content h3 { font-size: var(--ws-text-lg); margin-top: var(--ws-space-6); } .ws-post-content img { max-width: 100%; height: auto; border-radius: var(--ws-radius-md); } .ws-post-content ul, .ws-post-content ol { padding-left: 1.4em; } .ws-post-content a { color: var(--ws-gold-dark); text-decoration: underline; text-underline-offset: 2px; } .ws-post-content blockquote { border-left: 3px solid var(--ws-gold); padding-left: var(--ws-space-4); font-style: italic; color: var(--ws-ink-soft); } /* Generic, reusable "Read More" text clamp -- used for the Description on room detail pages today; any future long-text block can reuse the same data-ws-readmore / data-ws-readmore-text / data-ws-readmore-toggle markup. The toggle only appears when the text actually overflows the clamp (see initReadMore() in westside-public.js), so short copy never shows a pointless button. */ .ws-readmore__text { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; } .ws-readmore.is-expanded .ws-readmore__text { -webkit-line-clamp: unset; overflow: visible; } .ws-readmore__toggle { display: inline-block; margin-top: var(--ws-space-2); background: none; border: none; padding: 0; font-size: var(--ws-text-sm); font-weight: 700; color: var(--ws-gold-dark); cursor: pointer; text-decoration: underline; text-underline-offset: 3px; } .ws-readmore__toggle:hover, .ws-readmore__toggle:focus-visible { color: var(--ws-ink); } .ws-quick-facts { display: flex; flex-wrap: wrap; gap: var(--ws-space-5); padding: var(--ws-space-4) 0; border-top: 1px solid var(--ws-line); border-bottom: 1px solid var(--ws-line); margin: var(--ws-space-4) 0; } .ws-quick-facts__item { font-size: var(--ws-text-sm); } .ws-quick-facts__item strong { display: block; font-size: var(--ws-text-base); } .ws-amenity-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2,1fr); gap: var(--ws-space-3); } .ws-amenity-list li { font-size: var(--ws-text-sm); display: flex; align-items: center; gap: var(--ws-space-2); } .ws-amenity-list li::before { content: "✓"; color: var(--ws-palm); font-weight: 700; } .ws-booking-widget { background: var(--ws-white); border: 1px solid var(--ws-line); border-radius: var(--ws-radius-lg); padding: var(--ws-space-5); box-shadow: var(--ws-shadow-md); position: static; } @media (min-width: 1024px) { .ws-room-detail__layout { grid-template-columns: 1fr 360px; } .ws-booking-widget { position: sticky; top: calc(var(--ws-header-h-compact) + var(--ws-space-4)); } } .ws-policy-list, .ws-faq-list { list-style: none; margin: 0; padding: 0; } .ws-policy-list li { padding: var(--ws-space-2) 0; border-bottom: 1px solid var(--ws-line); font-size: var(--ws-text-sm); color: var(--ws-ink-soft); } .ws-faq-item { border-bottom: 1px solid var(--ws-line); } .ws-faq-item summary { padding: var(--ws-space-4) 0; font-weight: 600; cursor: pointer; list-style: none; display:flex; justify-content:space-between; align-items:center; } .ws-faq-item summary::-webkit-details-marker { display: none; } .ws-faq-item summary::after { content: "+"; font-size: 1.4rem; color: var(--ws-gold); } .ws-faq-item[open] summary::after { content: "–"; } .ws-faq-item p { padding-bottom: var(--ws-space-4); color: var(--ws-ink-soft); } /* ============================== RESORT EXPERIENCE ============================== */ .ws-feature-row { display: grid; grid-template-columns: 1fr; gap: var(--ws-space-6); align-items: center; } .ws-feature-row__media { border-radius: var(--ws-radius-lg); overflow: hidden; aspect-ratio: 4/3; } .ws-feature-row__media img { width: 100%; height: 100%; object-fit: cover; } @media (min-width: 1024px) { .ws-feature-row { grid-template-columns: 1fr 1fr; gap: var(--ws-space-9); } .ws-feature-row.is-reversed .ws-feature-row__media { order: 2; } } .ws-feature-row + .ws-feature-row { margin-top: var(--ws-space-9); } .ws-entry-points { display: grid; grid-template-columns: 1fr; gap: var(--ws-space-4); } @media (min-width: 640px) { .ws-entry-points { grid-template-columns: repeat(3, 1fr); } } .ws-entry-card { position: relative; border-radius: var(--ws-radius-md); overflow: hidden; aspect-ratio: 3/4; color: var(--ws-white); } .ws-entry-card img { width: 100%; height: 100%; object-fit: cover; } .ws-entry-card::after { content:""; position:absolute; inset:0; background: linear-gradient(180deg, rgba(0,0,0,0.05), rgba(0,0,0,0.65)); } .ws-entry-card__label { position: absolute; left: var(--ws-space-4); right: var(--ws-space-4); bottom: var(--ws-space-4); z-index: 2; font-family: var(--ws-font-display); font-size: var(--ws-text-xl); } /* ============================== LOCATION / CONTACT ============================== */ .ws-location { display: grid; grid-template-columns: 1fr; gap: var(--ws-space-6); } @media (min-width: 1024px) { .ws-location { grid-template-columns: 1fr 1fr; } } .ws-location__actions { display: flex; flex-wrap: wrap; gap: var(--ws-space-3); margin-top: var(--ws-space-5); } .ws-location__map { border-radius: var(--ws-radius-lg); overflow: hidden; min-height: 320px; border: 1px solid var(--ws-line); } .ws-location__map iframe { width: 100%; height: 100%; min-height: 320px; border: 0; } /* ============================== FOOTER ============================== */ .ws-footer { background: var(--ws-palm-dark); color: rgba(255,255,255,0.88); padding: var(--ws-space-9) 0 var(--ws-space-6); } .ws-footer a { color: rgba(255,255,255,0.88); } .ws-footer a:hover { color: var(--ws-gold-light); } .ws-footer__grid { display: grid; grid-template-columns: 1fr; gap: var(--ws-space-7); } @media (min-width: 768px) { .ws-footer__grid { grid-template-columns: 1.4fr 1fr 1fr 1fr; } } .ws-footer h4 { color: var(--ws-white); font-family: var(--ws-font-body); font-size: var(--ws-text-sm); text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: var(--ws-space-4); } .ws-footer ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--ws-space-2); font-size: var(--ws-text-sm); } .ws-footer__logo img { height: 40px; margin-bottom: var(--ws-space-4); filter: brightness(0) invert(1); } /* Instagram widget (productization pass, 2026-08-31) -- two contexts: sidebar (room detail, future blog posts) and footer (every page). Both render nothing when westside_setting('instagram_url') is blank, so this CSS only ever appears alongside real content. */ .ws-instagram-widget { text-align: center; } .ws-instagram-widget--sidebar { background: var(--ws-cream); border-radius: var(--ws-radius-lg); padding: var(--ws-space-6) var(--ws-space-5); margin-top: var(--ws-space-5); } .ws-instagram-widget--sidebar .ws-instagram-widget__icon { font-size: 28px; display: block; margin-bottom: var(--ws-space-2); } .ws-instagram-widget--sidebar h3 { font-size: var(--ws-text-base); margin: 0 0 var(--ws-space-1); } .ws-instagram-widget__handle { color: var(--ws-ink-soft); font-size: var(--ws-text-sm); margin: 0 0 var(--ws-space-4); } .ws-instagram-widget--footer { border-top: 1px solid rgba(255,255,255,0.15); border-bottom: 1px solid rgba(255,255,255,0.15); margin: var(--ws-space-8) 0 0; padding: var(--ws-space-6) 0; } .ws-instagram-widget--footer .ws-instagram-widget__icon { font-size: 26px; display: inline-block; vertical-align: -4px; margin-right: var(--ws-space-2); } .ws-instagram-widget--footer h3 { display: inline; font-size: var(--ws-text-lg); color: #fff; } .ws-instagram-widget--footer .ws-instagram-widget__handle { display: inline; margin: 0 0 0 var(--ws-space-2); } .ws-instagram-widget--footer .ws-btn { margin-top: var(--ws-space-4); } .ws-footer__bottom { border-top: 1px solid rgba(255,255,255,0.15); margin-top: var(--ws-space-8); padding-top: var(--ws-space-5); display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--ws-space-3); font-size: var(--ws-text-xs); color: rgba(255,255,255,0.6); } .ws-footer__credit a { color: rgba(255,255,255,0.75); text-decoration: underline; } .ws-footer__social { display: flex; gap: var(--ws-space-3); } .ws-footer__social a { width: 38px; height: 38px; border-radius: 50%; border: 1px solid rgba(255,255,255,0.3); display: flex; align-items: center; justify-content: center; } /* Phase 7 §16: centred, stacked mobile footer — not the desktop grid squeezed down. */ .ws-footer__brand { text-align: center; } .ws-footer__brand .ws-footer__logo { display: flex; justify-content: center; } .ws-footer__brand .ws-footer__social { justify-content: center; } @media (max-width: 767px) { .ws-footer h4 { text-align: center; } .ws-footer ul { align-items: center; text-align: center; } .ws-footer__bottom { flex-direction: column; align-items: center; text-align: center; } } @media (min-width: 768px) { .ws-footer__brand, .ws-footer__brand .ws-footer__logo, .ws-footer__brand .ws-footer__social { text-align: left; justify-content: flex-start; } } /* ============================== CONTACT PAGE (Phase 7 §24) ============================== */ .ws-contact-grid { display: grid; grid-template-columns: 1fr; gap: var(--ws-space-6); } @media (min-width: 1024px) { .ws-contact-grid { grid-template-columns: 1fr 1fr; } } .ws-contact-cards { display: grid; grid-template-columns: 1fr; gap: var(--ws-space-3); } @media (min-width: 640px) { .ws-contact-cards { grid-template-columns: 1fr 1fr; } } .ws-contact-card { display: flex; align-items: flex-start; gap: var(--ws-space-3); background: var(--ws-white); border: 1px solid var(--ws-line); border-radius: var(--ws-radius-md); padding: var(--ws-space-4); transition: box-shadow var(--ws-duration-fast) var(--ws-ease), transform var(--ws-duration-fast) var(--ws-ease); } .ws-contact-card:hover { box-shadow: var(--ws-shadow-sm); transform: translateY(-2px); } .ws-contact-card__icon { font-size: 1.4rem; } .ws-contact-form .wpcf7-form-control-wrap { display: block; margin-bottom: var(--ws-space-3); } .ws-contact-form input[type="text"], .ws-contact-form input[type="email"], .ws-contact-form input[type="tel"], .ws-contact-form textarea { width: 100%; border: 1.5px solid var(--ws-line); border-radius: var(--ws-radius-sm); padding: 0.85rem 1rem; font-family: var(--ws-font-body); font-size: var(--ws-text-base); background: var(--ws-white); } .ws-contact-form input:focus, .ws-contact-form textarea:focus { border-color: var(--ws-gold); outline: none; } .ws-contact-form input[type="submit"] { display: inline-flex; align-items: center; justify-content: center; padding: 0.9rem 1.75rem; border-radius: var(--ws-radius-pill); font-weight: 600; border: none; background: var(--ws-gold); color: var(--ws-white); cursor: pointer; min-height: 48px; } .ws-contact-form input[type="submit"]:hover { background: var(--ws-gold-dark); } .ws-contact-form .wpcf7-not-valid-tip { color: var(--ws-error); font-size: var(--ws-text-xs); margin-top: 2px; } .ws-contact-form .wpcf7-response-output { border-radius: var(--ws-radius-sm); padding: var(--ws-space-3); margin-top: var(--ws-space-3); font-size: var(--ws-text-sm); } /* ============================== RATE PLAN PAGE (Phase 7 §21) ============================== */ .ws-rate-plan__toolbar { display: flex; align-items: end; justify-content: space-between; gap: var(--ws-space-4); margin-bottom: var(--ws-space-4); } .ws-rate-plan__controls { display: grid; gap: var(--ws-space-2); } .ws-rate-plan__controls label { font-size: var(--ws-text-xs); color: var(--ws-ink-soft); font-weight: 700; text-transform: uppercase; letter-spacing: .08em; } .ws-rate-plan__controls select { min-width: 210px; border: 1.5px solid var(--ws-line); border-radius: var(--ws-radius-sm); padding: .75rem 2.5rem .75rem 1rem; font-size: var(--ws-text-base); background: var(--ws-white); } .ws-rate-plan__legend { display: flex; gap: var(--ws-space-5); font-size: var(--ws-text-sm); color: var(--ws-ink-soft); margin-bottom: var(--ws-space-5); flex-wrap: wrap; } .ws-rate-plan__tabs { display: flex; gap: var(--ws-space-2); margin: 0 0 var(--ws-space-5); overflow-x: auto; padding: 0 0 var(--ws-space-2); scrollbar-width: thin; } .ws-rate-plan__tab { flex: 0 0 auto; border: 1px solid var(--ws-line); border-radius: var(--ws-radius-pill); background: var(--ws-white); color: var(--ws-ink); padding: .65rem 1rem; font: inherit; font-size: var(--ws-text-sm); font-weight: 700; cursor: pointer; } .ws-rate-plan__tab:hover, .ws-rate-plan__tab.is-active { border-color: var(--ws-palm); background: var(--ws-palm); color: var(--ws-white); } .ws-rate-plan__grid { display: grid; grid-template-columns: 1fr; gap: var(--ws-space-4); } .ws-rate-card { display: flex; flex-direction: column; min-width: 0; background: var(--ws-white); border: 1px solid var(--ws-line); border-radius: var(--ws-radius-lg); padding: var(--ws-space-5); box-shadow: var(--ws-shadow-sm); } .ws-rate-card__header { margin-bottom: var(--ws-space-4); } .ws-rate-card__eyebrow, .ws-rate-card__rooms-label { display: block; color: var(--ws-gold-dark); font-size: var(--ws-text-xs); font-weight: 800; text-transform: uppercase; letter-spacing: .09em; } .ws-rate-card__title { margin: var(--ws-space-1) 0 0; font-size: clamp(1.25rem, 3vw, 1.65rem); line-height: 1.2; } .ws-rate-card__rates { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--ws-space-3); } .ws-rate-card__rate { min-width: 0; border-radius: var(--ws-radius-md); background: var(--ws-sand); padding: var(--ws-space-4); } .ws-rate-card__rate-label { display: block; color: var(--ws-ink-soft); font-size: var(--ws-text-xs); font-weight: 700; text-transform: uppercase; letter-spacing: .06em; } .ws-rate-card__amount { display: block; margin: var(--ws-space-1) 0; color: var(--ws-palm-dark); font-family: var(--ws-font-display); font-size: clamp(1.2rem, 4vw, 1.65rem); line-height: 1.15; overflow-wrap: anywhere; } .ws-rate-card__rate small { color: var(--ws-ink-soft); } .ws-rate-card__rooms { flex: 1; margin: var(--ws-space-4) 0; padding-top: var(--ws-space-4); border-top: 1px solid var(--ws-line); } .ws-rate-card__room-chips { display: flex; flex-wrap: wrap; gap: var(--ws-space-2); margin-top: var(--ws-space-2); } .ws-rate-card__room-chip { display: inline-flex; align-items: center; justify-content: center; min-width: 2.8rem; border-radius: var(--ws-radius-pill); background: var(--ws-palm-light); color: var(--ws-palm-dark); padding: .35rem .65rem; font-size: var(--ws-text-sm); font-weight: 700; } .ws-rate-card__rooms-empty { color: var(--ws-ink-soft); font-size: var(--ws-text-sm); } .ws-rate-card__cta { width: 100%; justify-content: center; } .ws-rate-plan__note { margin-top: var(--ws-space-6); color: var(--ws-ink-soft); font-size: var(--ws-text-sm); } @media (min-width: 760px) { .ws-rate-plan__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (min-width: 1180px) { .ws-rate-plan__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (max-width: 560px) { .ws-rate-plan__toolbar { align-items: stretch; flex-direction: column; } .ws-rate-plan__controls select, .ws-rate-plan__toolbar .ws-btn { width: 100%; } .ws-rate-card { padding: var(--ws-space-4); } .ws-rate-card__rates { grid-template-columns: 1fr; } } /* ============================== GALLERY PAGE (Phase 7 §13) ============================== */ .ws-gallery-filters { display: flex; flex-wrap: wrap; gap: var(--ws-space-2); justify-content: center; margin-bottom: var(--ws-space-6); } .ws-chip--filter { border: 1.5px solid var(--ws-line); background: var(--ws-white); cursor: pointer; font-weight: 600; padding: 0.5rem 1.1rem; } .ws-chip--filter.is-active { background: var(--ws-ink); color: var(--ws-white); border-color: var(--ws-ink); } /* Phase 7C §12 fix: a previous version span-2x2'd every 5th card while still forcing aspect-ratio:4/3 on it — those two constraints fight each other and produce exactly the "unused blank/cream area" defect reported. A plain uniform grid guarantees every card fills and crops identically, which matters more here than an unverifiable masonry effect. */ .ws-gallery-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--ws-space-3); } .ws-gallery-grid__item { /* Phase 7C §12 fix: this is a