/* ========================================================== StayFrame Builder — generated stylesheet Theme: Dark Editorial Hotel Container utilities allowed: .container, .container-full Fonts: Google Fonts (loaded in ) ========================================================== */ :root { --color-body-background: #080705; --color-section-background: #0d0c09; --color-surface: #15120f; --color-surface-2: #201a14; --color-text: #f8efe2; --color-text-soft: #d2bfa2; --color-muted: #b9aa9a; --color-border: rgba(248, 239, 226, 0.18); --color-border-dark: rgba(5, 4, 3, 0.16); --color-accent: #b94a33; --color-accent-dark: #8f3424; --color-secondary: #bd9a5f; --color-foreground: #050403; --color-white: #df9d9d; --container-width: 1440px; --container-padding: 28px; --section-padding: 112px; --header-height: 88px; --hero-height: 780px; --page-hero-height: 520px; --room-image-height: clamp(360px, 34vw, 500px); --room-detail-image-height: clamp(380px, 40vw, 500px); --map-height: 520px; --font-size-body: 16px; --font-size-small: 13px; --font-size-eyebrow: 11px; --font-size-nav: 12px; --font-size-button: 12px; --font-size-h1: clamp(104px, 15vw, 212px); --font-size-page-h1: clamp(76px, 9vw, 148px); --font-size-h2: 64px; --font-size-h3: 42px; --font-size-paragraph: 18px; --font-size-card-title: 34px; --font-size-room-title: 46px; --font-size-quote: clamp(52px, 6vw, 104px); --font-size-footer-brand: 36px; --font-heading-weight: 600; --radius-button: 999px; --radius-field: 16px; --radius-card: 0px; --radius-panel: 28px; --radius-image: 0px; --transition-fast: 180ms ease; --transition-default: 260ms ease; --transition-slow: 760ms ease; --shadow-panel: 0 28px 90px rgba(0, 0, 0, 0.38); --header-background: rgba(8, 7, 5, 0.9); --header-text: #f8efe2; --footer-background: #050403; --footer-text: #e5d8c5; --font-heading: 'EB Garamond', serif; --font-body: 'Cardo', serif; --font-accent: 'GFS Didot', serif; } * { box-sizing: border-box; } html { min-width: 320px; scroll-behavior: smooth; background: var(--color-body-background); } html, body { width: 100%; max-width: 100%; margin: 0; overflow-x: clip; background: var(--color-body-background); color: var(--color-text); font-family: var(--font-body); font-size: var(--font-size-body); line-height: 1.7; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; } @supports not (overflow: clip) { html, body { overflow-x: hidden; } } body.is-menu-open { overflow: hidden; } img, picture, svg, video, iframe { display: block; max-width: 100%; } img { height: auto; } a { color: inherit; text-decoration: none; } button, input, select, textarea { font-family: var(--font-body); font-size: inherit; } button { cursor: pointer; } ::selection { background: var(--color-accent); color: var(--color-text); } /* ========================================================== CONTAINERS — only .container and .container-full are allowed ========================================================== */ .container { width: 100%; max-width: var(--container-width); margin-inline: auto; padding-inline: var(--container-padding); } .container-full { width: 100%; max-width: 100%; margin-inline: auto; padding-inline: 0; } .skip-link { position: fixed; left: 16px; top: 16px; z-index: 9999; padding: 10px 14px; border-radius: var(--radius-button); background: var(--color-text); color: var(--color-foreground); transform: translateY(-160%); transition: transform var(--transition-default); } .skip-link:focus { transform: translateY(0); } .screen-reader-text { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* ========================================================== HEADER ========================================================== */ .site-header { position: fixed; top: 0; left: 0; right: 0; z-index: 1001; min-height: var(--header-height); background: var(--header-background); border-bottom: 1px solid var(--color-border); backdrop-filter: blur(18px); color: var(--header-text); } .site-header__wrapper { min-height: var(--header-height); display: flex; align-items: center; justify-content: space-between; gap: 24px; min-width: 0; } .site-brand { display: inline-flex; align-items: center; min-width: 0; gap: 14px; padding: 0; border: 0; background: transparent; color: inherit; text-align: left; } .site-brand__mark { display: grid; place-items: center; width: 48px; height: 48px; flex: 0 0 48px; border: 1px solid currentColor; border-radius: 50%; font-family: var(--font-heading); font-size: 20px; font-weight: 700; line-height: 1; } .site-brand__name { display: block; max-width: 280px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: var(--font-heading); font-size: 28px; font-weight: 600; line-height: 1; letter-spacing: 0.01em; } .site-brand__label { display: block; margin-top: 4px; color: var(--color-muted); font-size: 10px; font-weight: 800; letter-spacing: 0.22em; line-height: 1; text-transform: uppercase; } .site-brand--image { padding: 6px 0; } .site-brand__image { display: block; height: clamp(40px, 5vw, 56px); width: auto; max-width: 240px; object-fit: contain; } .site-footer__brand--image { display: block; height: clamp(38px, 4vw, 56px); width: auto; max-width: 220px; object-fit: contain; } .site-header__toggle { position: relative; display: none; width: 48px; height: 48px; flex: 0 0 48px; place-items: center; overflow: hidden; border: 1px solid var(--color-border); border-radius: 50%; background: transparent; color: inherit; } .site-header__toggle-line { position: absolute; left: 50%; top: 50%; display: block; width: 21px; height: 1px; background: currentColor; transform: translate(-50%, -50%); transform-origin: center; transition: transform var(--transition-default), opacity var(--transition-default); } .site-header__toggle-line:nth-child(1) { transform: translate(-50%, calc(-50% - 7px)); } .site-header__toggle-line:nth-child(3) { transform: translate(-50%, calc(-50% + 7px)); } body.is-menu-open .site-header__toggle-line:nth-child(1) { transform: translate(-50%, -50%) rotate(45deg); } body.is-menu-open .site-header__toggle-line:nth-child(2) { opacity: 0; transform: translate(-50%, -50%) scaleX(0); } body.is-menu-open .site-header__toggle-line:nth-child(3) { transform: translate(-50%, -50%) rotate(-45deg); } .site-nav { display: flex; align-items: center; gap: 6px; min-width: 0; } .site-nav__link { display: inline-flex; align-items: center; justify-content: center; min-height: 42px; padding: 0 12px; border: 0; border-radius: var(--radius-button); background: transparent; color: var(--color-text-soft); font-family: var(--font-body); font-size: var(--font-size-nav); font-weight: 800; letter-spacing: 0.14em; line-height: 1; text-transform: uppercase; transition: color var(--transition-default), background var(--transition-default); } .site-nav__link:hover, .site-nav__link--active { background: var(--color-border); color: var(--header-text); } .language-switcher { display: inline-flex; align-items: center; gap: 4px; margin-left: 6px; padding: 4px; border: 1px solid var(--color-border); border-radius: var(--radius-button); } .language-switcher__link { display: inline-flex; align-items: center; justify-content: center; min-width: 34px; min-height: 32px; border-radius: var(--radius-button); color: var(--color-muted); font-size: 11px; font-weight: 800; letter-spacing: 0.1em; } .language-switcher__link--active { background: var(--color-text); color: var(--color-foreground); } /* ========================================================== BUTTONS ========================================================== */ .button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 54px; padding: 0 26px; border: 1px solid transparent; border-radius: var(--radius-button); font-family: var(--font-body); font-size: var(--font-size-button); font-weight: 800; letter-spacing: 0.15em; line-height: 1; text-transform: uppercase; transition: transform var(--transition-default), background var(--transition-default), color var(--transition-default), border-color var(--transition-default); } .button:hover { transform: translateY(-2px); } .button--small { min-height: 42px; padding-inline: 18px; font-size: 11px; } .button--dark { background: var(--color-accent); color: var(--color-text); } .button--dark:hover { background: var(--color-accent-dark); } .button--outline { background: rgba(5, 4, 3, 0.22); border-color: var(--color-border); color: var(--color-text); backdrop-filter: blur(12px); } .button--text { min-height: auto; padding: 0; border: 0; border-radius: 0; background: transparent; color: var(--color-secondary); } /* ========================================================== SECTIONS / HEADINGS ========================================================== */ .section { position: relative; padding-block: var(--section-padding); } .section--no-padding { padding-block: 0; } .section--surface { background: var(--color-body-background); } .section--soft { background: var(--color-section-background); } .section--border-top { border-top: 1px solid var(--color-border); } .eyebrow { margin: 0 0 18px; color: var(--color-secondary); font-family: var(--font-body); font-size: var(--font-size-eyebrow); font-weight: 800; letter-spacing: 0.28em; line-height: 1; text-transform: uppercase; } .section-heading { max-width: 820px; margin-bottom: 48px; } .section-heading--center { margin-inline: auto; text-align: center; } .section-heading__title, .booking-widget__title, .story-layout__title, .room-detail__title, .location-layout__title, .contact-layout__title, .cta__title { margin: 0; font-family: var(--font-heading); font-size: var(--font-size-h2); font-weight: var(--font-heading-weight, 600); letter-spacing: -0.045em; line-height: 0.95; } .section-heading__text, .hero__text, .page-hero__text, .story-layout__text, .room-detail__text, .location-card__text, .booking-widget__text, .contact-layout__text, .cta__text, .attraction-card__text, .testimonial-card__text, .faq-item__answer, .site-footer__text, .site-footer__contact-text { margin: 20px 0 0; color: var(--color-muted); font-size: var(--font-size-paragraph); line-height: 1.72; } .site-main { background: var(--color-body-background); } .site-page { display: none; } .site-page--active { display: block; } /* ========================================================== HERO ========================================================== */ .hero { position: relative; min-height: var(--hero-height); overflow: hidden; isolation: isolate; z-index: 250; } .hero::after, .page-hero-section::after, .cta::after { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(5, 4, 3, 0.58), rgba(5, 4, 3, 0.72)); } .hero__slider, .hero__slide, .hero__image { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; } .hero__slide { opacity: 0; transition: opacity 1000ms ease; } .hero__slide--active { opacity: 1; } .hero__image { object-fit: cover; transform: scale(1.02); } .hero__wrapper { min-height: var(--hero-height); display: flex; align-items: center; justify-content: center; padding: 170px 0 100px; text-align: center; } .hero__content { max-width: 860px; margin-inline: auto; } .hero__pretitle, .hero__subtitle { display: block; color: var(--color-secondary); font-family: var(--font-body); font-size: 14px; font-weight: 800; letter-spacing: 0.28em; line-height: 1.3; text-transform: uppercase; } .hero__title { margin: 18px 0 20px; font-family: var(--font-heading); font-size: var(--font-size-h1); font-weight: var(--font-heading-weight, 600); letter-spacing: -0.07em; line-height: 0.78; color: var(--color-text); } .hero__text { max-width: 680px; margin-inline: auto; color: var(--color-text-soft); } .hero__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 34px; } .hero__contact-rail { position: absolute; right: var(--container-padding); bottom: 28px; display: flex; flex-wrap: wrap; gap: 10px; } .contact-pill { display: inline-flex; align-items: center; gap: 8px; min-height: 42px; padding: 0 16px; border: 1px solid var(--color-border); border-radius: var(--radius-button); background: rgba(5, 4, 3, 0.35); color: var(--color-text); font-size: 12px; font-weight: 700; backdrop-filter: blur(12px); } .contact-pill__icon { width: 9px; height: 9px; border-radius: 50%; background: var(--color-secondary); } /* ========================================================== BOOKING STRIP ========================================================== */ .booking-strip { position: relative; z-index: 1; padding-block: clamp(34px, 5vw, 72px); background: var(--color-body-background); } .booking-widget { position: relative; display: grid; grid-template-columns: minmax(280px, 390px) minmax(0, 1fr); gap: 0; overflow: hidden; border: 1px solid var(--color-border); border-radius: var(--radius-panel); background: #f7efe4; color: var(--color-foreground); box-shadow: var(--shadow-panel); } .booking-widget__intro { display: flex; flex-direction: column; justify-content: center; padding: clamp(28px, 3.4vw, 58px); border-right: 1px solid rgba(5, 4, 3, 0.12); background: radial-gradient(circle at 20% 8%, rgba(189, 154, 95, 0.22), transparent 32%), linear-gradient(145deg, #fff9ef 0%, #efe3d0 100%); } .booking-widget__intro .eyebrow { color: var(--color-secondary); } .booking-widget__title { max-width: 330px; font-family: var(--font-heading); font-size: clamp(56px, 5vw, 88px); letter-spacing: -0.06em; line-height: 0.82; color: var(--color-foreground); } .booking-widget__text { max-width: 330px; color: rgba(5, 4, 3, 0.62); font-size: 15px; line-height: 1.65; } .booking-form { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 16px; align-self: stretch; padding: clamp(24px, 3vw, 44px); background: linear-gradient(180deg, rgba(255,255,255,0.7), rgba(255,255,255,0.34)); } .booking-form__field { min-width: 0; } .booking-form__field--date, .booking-form__field--room, .booking-form__field--promo { grid-column: span 2; } .booking-form__submit { grid-column: span 2; align-self: end; } .booking-form__label, .contact-form__label { display: block; margin-bottom: 8px; color: rgba(5, 4, 3, 0.82); font-family: var(--font-body); font-size: var(--font-size-eyebrow); font-weight: 800; letter-spacing: 0.18em; line-height: 1.2; text-transform: uppercase; } .booking-form__input { width: 100%; min-height: 64px; padding: 0 16px; border: 1px solid rgba(5, 4, 3, 0.14); border-radius: var(--radius-field); background: rgba(255, 252, 246, 0.94); color: var(--color-foreground); outline: 0; box-shadow: inset 0 1px 0 rgba(255,255,255,0.9), 0 12px 26px rgba(5, 4, 3, 0.06); transition: border-color var(--transition-default), box-shadow var(--transition-default), background var(--transition-default); } .booking-form__input:focus { border-color: var(--color-accent); background: var(--color-white); box-shadow: 0 0 0 4px rgba(0, 0, 0, 0.05); } .booking-form__submit { min-height: 64px; border-radius: var(--radius-button); background: linear-gradient(135deg, var(--color-accent), var(--color-accent-dark)); color: var(--color-text); box-shadow: 0 18px 38px rgba(0, 0, 0, 0.18); } /* ========================================================== STORY / INFO LIST ========================================================== */ .story-layout, .location-layout, .contact-layout { display: grid; grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr); gap: clamp(48px, 6vw, 88px); align-items: center; } .story-layout__media { position: relative; } .story-layout__image { width: 100%; aspect-ratio: 4 / 5; max-height: 720px; object-fit: cover; border-radius: var(--radius-image); } .story-layout__stamp { position: absolute; right: -28px; bottom: 36px; display: grid; place-items: center; width: 124px; height: 124px; border: 1px solid var(--color-text); border-radius: 50%; background: rgba(5, 4, 3, 0.65); color: var(--color-text); font-family: var(--font-heading); font-size: 34px; } .info-list { display: grid; gap: 14px; margin-top: 32px; } .info-list__item { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding-bottom: 14px; border-bottom: 1px solid var(--color-border); } .info-list__label { color: var(--color-secondary); font-size: var(--font-size-eyebrow); font-weight: 800; letter-spacing: 0.18em; text-transform: uppercase; } .info-list__text { color: var(--color-text-soft); text-align: right; } /* ========================================================== SLIDERS (rooms, testimonials) ========================================================== */ .slider { --slider-gap: 24px; --slider-gap-local: var(--slider-gap); position: relative; width: 100%; max-width: 100%; } .slider__viewport { width: 100%; max-width: 100%; overflow: hidden; } .slider__track { display: flex; flex-wrap: nowrap; gap: var(--slider-gap-local); width: 100%; max-width: none; transform: translate3d(0, 0, 0); transition: transform 620ms cubic-bezier(0.22, 1, 0.36, 1); will-change: transform; touch-action: pan-y; } .slider__track[data-slider-track] [data-slider-slide] { flex: 0 0 calc((100% - (var(--slider-gap-local) * 2)) / 3); max-width: calc((100% - (var(--slider-gap-local) * 2)) / 3); min-width: 0; box-sizing: border-box; } .slider__controls { display: flex; justify-content: center; gap: 10px; margin-top: 22px; } .slider__button { display: grid; place-items: center; width: 48px; height: 48px; border: 1px solid var(--color-border); border-radius: 50%; background: transparent; color: var(--color-text); font-size: 22px; line-height: 1; transition: background var(--transition-default), color var(--transition-default); } .slider__button:hover { background: var(--color-text); color: var(--color-foreground); } .slider--is-static .slider__controls, .slider--is-static .slider__controls[hidden] { display: none; } .slider--is-active .slider__controls { display: flex; justify-content: center; } .section--rooms .container-full { padding-inline: 0; } .section--rooms .slider .slider__viewport { padding-inline: var(--container-padding); } .section--rooms .slider__controls { padding-inline: var(--container-padding); } .testimonial-card, .room-card { width: 100%; height: auto; } /* ========================================================== ROOM CARD ========================================================== */ .room-card { display: grid; height: 100%; width: 100%; overflow: hidden; border: 1px solid var(--color-border); border-radius: var(--radius-card); background: var(--color-surface); } .room-card__media, .room-gallery-box { position: relative; display: block; overflow: hidden; height: var(--room-image-height); max-height: 480px; background: var(--color-surface-2); } .room-gallery-box { height: var(--room-detail-image-height); } .room-media-slider, .room-media-slider__slide { position: absolute; inset: 0; } .room-media-slider__slide { opacity: 0; transform: scale(1.015); transition: opacity var(--transition-slow), transform 900ms ease; } .room-media-slider__slide--active { opacity: 1; transform: scale(1); } .room-media-slider__image, .room-card__media > img, .room-detail__image { width: 100%; height: 100%; object-fit: cover; transition: transform 700ms ease; } .room-card__media::after, .room-gallery-box::after { content: ''; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(5, 4, 3, 0.04), rgba(5, 4, 3, 0.48)); opacity: 0; pointer-events: none; transition: opacity var(--transition-default); } .room-card:hover .room-card__media::after, .room-card:focus-within .room-card__media::after, .room-gallery-box:hover::after, .room-gallery-box:focus-within::after { opacity: 1; } .room-card:hover .room-media-slider__image, .room-gallery-box:hover .room-media-slider__image { transform: scale(1.04); } .room-card__gallery-button { position: absolute; left: 50%; top: 50%; z-index: 3; display: grid; place-items: center; width: 118px; height: 118px; padding: 14px; border: 1px solid rgba(248, 239, 226, 0.68); border-radius: 50%; background: rgba(5, 4, 3, 0.74); color: var(--color-text); font-size: 10px; font-weight: 800; letter-spacing: 0.14em; line-height: 1.15; text-align: center; text-decoration: none; text-transform: uppercase; opacity: 0; transform: translate(-50%, -50%) scale(0.86); pointer-events: auto; backdrop-filter: blur(12px); transition: opacity var(--transition-default), transform var(--transition-default), background var(--transition-default); } .room-card:hover .room-card__gallery-button, .room-card:focus-within .room-card__gallery-button, .room-gallery-box:hover .room-card__gallery-button, .room-gallery-box:focus-within .room-card__gallery-button { opacity: 1; transform: translate(-50%, -50%) scale(1); } .room-card__gallery-button:hover { background: var(--color-accent); } .lightbox-source { display: none; } .room-card__body { display: grid; gap: 14px; padding: 28px; } .room-card__meta, .room-detail__meta { color: var(--color-secondary); font-size: var(--font-size-eyebrow); font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; } .room-card__title { margin: 0; font-family: var(--font-heading); font-size: var(--font-size-room-title); font-weight: var(--font-heading-weight, 600); letter-spacing: -0.045em; line-height: 0.92; } .room-card__text { margin: 0; color: var(--color-muted); } .room-card__best { margin: -2px 0 0; color: var(--color-text-soft); font-size: 14px; line-height: 1.55; } .room-card__footer { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding-top: 12px; border-top: 1px solid var(--color-border); } .room-card__price { color: var(--color-text); font-weight: 800; } /* ========================================================== ROOM DETAIL (rooms page) ========================================================== */ .room-detail-list { display: grid; gap: 84px; } .room-detail { display: grid; grid-template-columns: minmax(0, 0.95fr) minmax(0, 1fr); gap: clamp(38px, 6vw, 84px); align-items: center; } .room-detail:nth-child(even) .room-detail__media { order: 2; } .room-detail__features { display: flex; flex-wrap: wrap; gap: 10px; padding: 0; margin: 28px 0 32px; list-style: none; } .room-detail__feature { padding: 9px 14px; border: 1px solid var(--color-border); border-radius: var(--radius-button); color: var(--color-text-soft); font-size: 13px; font-weight: 700; } /* ========================================================== AMENITIES + ATTRACTIONS ========================================================== */ .amenity-grid, .attractions-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; } .amenity-card, .attraction-card, .testimonial-card, .contact-info, .contact-form-card, .location-card, .faq-item { border: 1px solid var(--color-border); background: var(--color-surface); } .amenity-card, .attraction-card, .testimonial-card { min-height: 290px; display: flex; flex-direction: column; justify-content: flex-start; padding: 30px; } .amenity-card__icon, .attraction-card__number { color: var(--color-secondary); font-family: var(--font-heading); font-size: 56px; line-height: 0.9; } .amenity-card__title, .attraction-card__title, .testimonial-card__name { margin: 30px 0 12px; font-family: var(--font-heading); font-size: var(--font-size-card-title); font-weight: var(--font-heading-weight, 600); letter-spacing: -0.035em; line-height: 1; } .amenity-card__text, .attraction-card__text, .testimonial-card__details { margin: 0; color: var(--color-muted); } .testimonial-card { height: 100%; } .testimonial-card__rating { color: var(--color-secondary); letter-spacing: 0.2em; } .testimonial-card__text { color: var(--color-text-soft); } /* ========================================================== CTA / PAGE HERO / IMAGE-QUOTE ========================================================== */ .cta, .page-hero-section { position: relative; overflow: hidden; isolation: isolate; background-image: var(--cta-background, var(--image-background)); background-position: center; background-size: cover; } .cta { min-height: 560px; } .cta__wrapper { min-height: inherit; display: flex; align-items: center; justify-content: center; padding-block: 110px; text-align: center; } .cta__content { max-width: 880px; } .cta__actions { display: flex; justify-content: center; flex-wrap: wrap; gap: 12px; margin-top: 34px; } .page-hero-section { min-height: var(--page-hero-height); display: flex; align-items: center; } .page-hero { max-width: 980px; padding-block: 110px; } .page-hero__title { margin: 0; font-family: var(--font-heading); font-size: var(--font-size-page-h1); font-weight: var(--font-heading-weight, 600); letter-spacing: -0.065em; line-height: 0.82; color: var(--color-text); } /* ========================================================== GALLERY MARQUEE + GRID ========================================================== */ .gallery-marquee { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); position: relative; z-index: 1; } .gallery-marquee__item { display: block; min-height: 460px; overflow: hidden; } .gallery-marquee__item:nth-child(even) { transform: translateY(56px); } .gallery-marquee__image, .gallery-grid__image { width: 100%; height: 100%; object-fit: cover; transition: transform 700ms ease; } .gallery-marquee__item:hover .gallery-marquee__image, .gallery-grid__item:hover .gallery-grid__image { transform: scale(1.04); } .gallery-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 16px; } .gallery-grid__item { grid-column: span 4; min-height: 360px; overflow: hidden; } .gallery-grid__item--wide { grid-column: span 8; } /* ========================================================== LOCATION + CONTACT ========================================================== */ .location-card, .contact-info, .contact-form-card { padding: 34px; } .location-card { height: 100%; } .section--contact .contact-info { height: 100%; } .map-frame { width: 100%; height: var(--map-height); overflow: hidden; border: 1px solid var(--color-border); } .map-frame__iframe { width: 100%; height: 100%; border: 0; filter: grayscale(1) contrast(1.06) brightness(0.86); } .contact-list, .site-footer__contact-list { display: grid; gap: 6px; padding: 0; margin: 24px 0 0; list-style: none; } .contact-list__label, .site-footer__heading { display: block; color: var(--color-secondary); font-family: var(--font-body); font-size: var(--font-size-eyebrow); font-weight: 800; letter-spacing: 0.18em; text-transform: uppercase; } .contact-list__link, .contact-list__text, .site-footer__contact-link, .site-footer__contact-text { color: var(--color-text-soft); font-size: 16px; } .contact-list__item { display: grid; gap: 5px; } .contact-info .button { margin-top: 30px; } .contact-form { display: grid; gap: 14px; } .contact-form__row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; } .contact-form__field { min-width: 0; } .contact-form__label { color: var(--color-secondary); } .contact-form__input { width: 100%; min-height: 58px; padding: 0 16px; border: 1px solid var(--color-border); border-radius: var(--radius-field); background: rgba(248, 239, 226, 0.08); color: var(--color-text); outline: 0; transition: border-color var(--transition-default), background var(--transition-default); } .contact-form__input--textarea { min-height: 160px; padding-block: 14px; resize: vertical; } .contact-form__input::placeholder { color: rgba(248, 239, 226, 0.45); } .contact-form__input:hover { background: rgba(248, 239, 226, 0.12); border-color: rgba(248, 239, 226, 0.28); } .contact-form__input:focus { border-color: var(--color-accent); background: rgba(248, 239, 226, 0.14); } .contact-form-card__title { margin: 0 0 26px; font-family: var(--font-heading); font-size: var(--font-size-h3); font-weight: var(--font-heading-weight, 600); letter-spacing: -0.04em; line-height: 1; } .contact-page-faq { padding-top: 0; } /* ========================================================== FAQ ========================================================== */ .faq-list { display: grid; gap: 12px; } .faq-item__question { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 24px 28px; border: 0; background: transparent; color: var(--color-text); text-align: left; } .faq-item__title { font-family: var(--font-heading); font-size: 28px; font-weight: var(--font-heading-weight, 600); } .faq-item__icon { color: var(--color-secondary); font-size: 28px; line-height: 1; } .faq-item__answer { max-width: 860px; padding: 0 28px 26px; margin-top: 0; } /* ========================================================== FOOTER ========================================================== */ .site-footer { padding-block: 72px 30px; border-top: 1px solid var(--color-border); background: var(--footer-background); color: var(--footer-text); } .site-footer__wrapper { display: grid; grid-template-columns: minmax(0, 1.35fr) repeat(3, minmax(160px, 0.65fr)); gap: 38px; } .site-footer__brand { display: block; font-family: var(--font-heading); font-size: var(--font-size-footer-brand); line-height: 1; } .site-footer__text { max-width: 460px; font-size: 15px; } .site-footer__links { display: grid; gap: 10px; margin-top: 18px; } .site-footer__link { padding: 0; border: 0; background: transparent; color: var(--footer-text); text-align: left; line-height: 1.2; font-family: var(--font-body); font-size: 15px; } .site-footer__bottom { display: flex; justify-content: space-between; gap: 20px; margin-top: 56px; padding-top: 24px; border-top: 1px solid var(--color-border); color: var(--color-muted); font-size: 13px; } .legal-links { display: inline-flex; flex-wrap: wrap; gap: 12px; } .legal-links a { color: var(--color-muted); text-decoration: none; } .legal-links a:hover { color: var(--footer-text); } /* ========================================================== MOBILE STICKY BOOKING CTA ========================================================== */ .mobile-booking-cta { position: fixed; left: max(16px, var(--container-padding)); right: max(16px, var(--container-padding)); bottom: calc(14px + env(safe-area-inset-bottom, 0px)); z-index: 220; display: none; align-items: center; justify-content: center; min-height: 56px; padding: 0 22px; border: 1px solid var(--color-border); border-radius: var(--radius-button); background: linear-gradient(135deg, var(--color-accent), var(--color-accent-dark)); color: var(--color-text); font-family: var(--font-body); font-size: 12px; font-weight: 800; letter-spacing: 0.16em; line-height: 1; text-align: center; text-transform: uppercase; box-shadow: 0 20px 44px rgba(0, 0, 0, 0.38); } /* ========================================================== CUSTOM HTML / SCRIPT EMBED HELPERS ========================================================== */ .custom-embed, .custom-html-block { width: 100%; } .custom-embed__iframe { width: 100%; border: 0; display: block; } /* ========================================================== REDUCED MOTION ========================================================== */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto; animation-duration: 0.01ms; animation-iteration-count: 1; transition-duration: 0.01ms; } } /* ========================================================== TABLET BREAKPOINT ========================================================== */ @media (max-width: 1180px) { :root { --section-padding: 84px; --header-height: 76px; --font-size-h2: 56px; } .site-header .container { max-width: 100%; } .site-header__toggle { display: grid; } .site-nav { position: fixed; inset: var(--header-height) 0 0 0; z-index: 199; width: 100%; max-width: 100%; height: calc(100dvh - var(--header-height)); display: grid; align-content: start; gap: 0; padding: 0; overflow-x: hidden; overflow-y: auto; background: var(--color-body-background); border-top: 1px solid var(--color-border); opacity: 0; visibility: hidden; pointer-events: none; transition: opacity var(--transition-default), visibility var(--transition-default); overscroll-behavior: contain; } body.is-menu-open .site-nav { opacity: 1; visibility: visible; pointer-events: auto; } .site-nav__link { width: 100%; justify-content: flex-start; min-height: 82px; padding: 0 var(--container-padding); border-radius: 0; border-bottom: 1px solid var(--color-border); font-family: var(--font-heading); font-size: clamp(32px, 9vw, 52px); font-weight: var(--font-heading-weight, 600); letter-spacing: -0.045em; line-height: 1; text-align: left; text-transform: none; } .language-switcher { width: fit-content; margin: 26px var(--container-padding) 14px; } .site-nav .button { width: auto; margin: 18px var(--container-padding) 38px; padding: 24px 16px; font-size: 16px; } .booking-widget, .story-layout, .location-layout, .contact-layout, .room-detail, .room-detail:nth-child(even) { grid-template-columns: 1fr; } .booking-widget__intro { border-right: 0; border-bottom: 1px solid rgba(5, 4, 3, 0.12); } .room-detail:nth-child(even) .room-detail__media { order: initial; } .booking-form { grid-template-columns: repeat(2, minmax(0, 1fr)); } .booking-form__field, .booking-form__field--date, .booking-form__field--room, .booking-form__field--promo, .booking-form__submit { grid-column: span 1; } .amenity-grid, .attractions-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .gallery-marquee { grid-template-columns: repeat(2, minmax(0, 1fr)); } .gallery-grid__item, .gallery-grid__item--wide { grid-column: span 6; } .site-footer__wrapper { grid-template-columns: 1fr 1fr; } .site-footer__column--brand { grid-column: 1 / -1; } } /* ========================================================== MOBILE BREAKPOINT ========================================================== */ @media (max-width: 720px) { :root { --container-padding: 18px; --section-padding: 66px; --hero-height: 720px; --page-hero-height: 440px; --font-size-h2: 44px; --font-size-h3: 34px; --font-size-paragraph: 16px; --font-size-room-title: 38px; --map-height: 420px; } body { padding-bottom: 96px; } .site-brand__mark { width: 42px; height: 42px; flex-basis: 42px; font-size: 18px; } .site-brand__name { max-width: min(190px, 52vw); font-size: 24px; } .site-brand__label { font-size: 9px; } .hero__wrapper { padding-block: 120px 154px; } .hero__contact-rail { right: auto; left: var(--container-padding); justify-content: flex-start; } .booking-widget { border-radius: 22px; } .booking-widget__intro, .booking-form { padding: 24px; } .booking-form, .contact-form__row { grid-template-columns: 1fr; } .booking-form__field, .booking-form__field--date, .booking-form__field--room, .booking-form__field--promo, .booking-form__submit { grid-column: 1 / -1; } .booking-widget__title { font-size: 50px; } .story-layout__stamp { right: 16px; bottom: 16px; width: 88px; height: 88px; font-size: 26px; } .amenity-grid, .attractions-grid, .gallery-marquee { grid-template-columns: 1fr; } .gallery-marquee__item:nth-child(even) { transform: none; } .gallery-grid { grid-template-columns: 1fr; } .gallery-grid__item, .gallery-grid__item--wide { grid-column: auto; } .room-card__gallery-button { width: 104px; height: 104px; opacity: 1; transform: translate(-50%, -50%) scale(1); } .room-card__footer, .info-list__item, .site-footer__bottom { align-items: flex-start; flex-direction: column; } .info-list__item { display: grid; } .info-list__text { text-align: left; } .location-card, .contact-info, .contact-form-card { padding: 24px; } .cta { min-height: 460px; } .cta__wrapper { padding-block: 76px; } .site-footer__wrapper { grid-template-columns: 1fr; } .mobile-booking-cta { display: inline-flex; } } .room-card__media-placeholder { width: 100%; min-height: var(--room-image-height); background: var(--color-surface-2); } /* ========================================================== ROOM CARD VARIANTS ========================================================== */ /* Variant: overlay — content sits on top of the image with a gradient. */ .room-card--overlay { position: relative; display: block; background: var(--color-foreground); color: var(--color-text); min-height: clamp(420px, 42vw, 580px); } .slider--cards-overlay .room-card--overlay { min-height: clamp(420px, 42vw, 580px); } .room-card--overlay .room-card__media, .room-card--overlay .room-gallery-box { position: absolute; inset: 0; height: 100%; max-height: none; } .room-card--overlay .room-card__media::after { background: linear-gradient(180deg, rgba(5, 4, 3, 0) 32%, rgba(5, 4, 3, 0.78) 100%); opacity: 1; } .room-card--overlay .room-card__body { position: absolute; inset: auto 0 0 0; z-index: 2; gap: 10px; padding: clamp(22px, 3vw, 36px); background: transparent; color: var(--color-text); } .room-card--overlay .room-card__title { color: var(--color-text); } .room-card--overlay .room-card__meta { color: var(--color-secondary); } .room-card--overlay .room-card__text, .room-card--overlay .room-card__best { color: rgba(248, 239, 226, 0.78); } .room-card--overlay .room-card__footer { border-top: 1px solid rgba(248, 239, 226, 0.22); } .room-card--overlay .room-card__price { color: var(--color-text); } /* Variant: horizontal — image left, content right. Falls back to stack on tablet so the cards don't squish. */ .room-card--horizontal { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); align-items: stretch; min-height: clamp(320px, 28vw, 460px); } .slider--cards-horizontal .room-card--horizontal { min-height: clamp(320px, 28vw, 460px); } .room-card--horizontal .room-card__media, .room-card--horizontal .room-gallery-box { height: auto; min-height: var(--room-image-height); max-height: none; } .room-card--horizontal .room-card__body { padding: clamp(24px, 2.6vw, 40px); align-content: center; } @media (max-width: 1180px) { .room-card--horizontal { grid-template-columns: 1fr; } .room-card--horizontal .room-card__media, .room-card--horizontal .room-gallery-box { height: var(--room-image-height); } } /* ========================================================== BOOKING FORM VARIANTS ========================================================== */ /* Variant 2: inline pill bar — full-width single row, Booking.com vibe. */ .booking-strip--inline-bar .booking-widget { grid-template-columns: 1fr; background: transparent; border: 0; box-shadow: none; } .booking-strip--inline-bar .booking-widget__intro { padding-block: 0 18px; border-right: 0; background: transparent; text-align: center; align-items: center; } .booking-strip--inline-bar .booking-widget__title { margin-inline: auto; max-width: none; font-size: clamp(40px, 4vw, 64px); } .booking-strip--inline-bar .booking-widget__text { margin-inline: auto; } .booking-strip--inline-bar .booking-form { display: flex; flex-wrap: wrap; align-items: stretch; gap: 0; padding: 8px; border: 1px solid rgba(5, 4, 3, 0.12); border-radius: 999px; background: var(--color-white); box-shadow: var(--shadow-panel); } .booking-strip--inline-bar .booking-form__field { flex: 1 1 130px; min-width: 0; padding: 8px 18px; border-right: 1px solid rgba(5, 4, 3, 0.08); } .booking-strip--inline-bar .booking-form__field:last-of-type { border-right: 0; } .booking-strip--inline-bar .booking-form__field--date, .booking-strip--inline-bar .booking-form__field--room, .booking-strip--inline-bar .booking-form__field--promo { grid-column: auto; } .booking-strip--inline-bar .booking-form__label { margin-bottom: 2px; font-size: 9px; letter-spacing: 0.16em; color: rgba(5, 4, 3, 0.6); } .booking-strip--inline-bar .booking-form__input { min-height: 36px; padding: 0; border: 0; background: transparent; box-shadow: none; border-radius: 0; font-size: 14px; } .booking-strip--inline-bar .booking-form__input:focus { background: transparent; box-shadow: none; } .booking-strip--inline-bar .booking-form__submit { flex: 0 0 auto; align-self: stretch; min-height: auto; padding: 0 32px; margin: 0; border-radius: 999px; } @media (max-width: 1180px) { .booking-strip--inline-bar .booking-form { border-radius: 22px; flex-direction: column; padding: 10px; } .booking-strip--inline-bar .booking-form__field { border-right: 0; border-bottom: 1px solid rgba(5, 4, 3, 0.08); padding: 12px 16px; } .booking-strip--inline-bar .booking-form__field:last-of-type { border-bottom: 0; } .booking-strip--inline-bar .booking-form__submit { width: 100%; min-height: 56px; padding: 14px; } } /* Variant 3: stacked card — intro on top, fields below. */ .booking-strip--stacked-card .booking-widget { grid-template-columns: 1fr; } .booking-strip--stacked-card .booking-widget__intro { border-right: 0; border-bottom: 1px solid rgba(5, 4, 3, 0.12); text-align: center; align-items: center; } .booking-strip--stacked-card .booking-widget__title { max-width: none; margin-inline: auto; } .booking-strip--stacked-card .booking-widget__text { margin-inline: auto; } .booking-strip--stacked-card .booking-form { grid-template-columns: repeat(3, minmax(0, 1fr)); } .booking-strip--stacked-card .booking-form__field--date, .booking-strip--stacked-card .booking-form__field--room, .booking-strip--stacked-card .booking-form__field--promo { grid-column: span 1; } .booking-strip--stacked-card .booking-form__submit { grid-column: 1 / -1; } @media (max-width: 720px) { .booking-strip--stacked-card .booking-form { grid-template-columns: 1fr; } } /* ========================================================== PROJECT CUSTOM CSS ========================================================== */ .site-nav__link--active { background-color: transparent; }