/* rooms — section styles (loaded from by build.py) */ #vp-rooms, #vp-rooms * { box-sizing:border-box; } #vp-rooms { width:100vw; margin-left:calc(50% - 50vw); padding:96px 0 0; background:var(--color-bg); color:var(--color-text); font-family:var(--font-body); } #vp-rooms .vp-rooms__inner { width:var(--vp-page); margin:auto; } #vp-rooms .vp-rooms__top { display:flex; align-items:end; justify-content:space-between; flex-wrap:wrap; gap:16px 32px; margin-bottom:26px; } #vp-rooms h2 { margin:0; font-family:var(--font-heading); font-weight:var(--font-heading-weight); font-size:clamp(34px,3.4vw,44px); line-height:1.04; letter-spacing:-.02em; } #vp-rooms .vp-rooms__lead { max-width:460px; margin:0; color:color-mix(in srgb, var(--color-text) 75%, transparent); font-size:18px; line-height:1.55; } /* ---------------------------------------------------------------- filter -- */ #vp-rooms .vp-rooms__filter { display:flex; align-items:center; flex-wrap:wrap; gap:8px; margin-bottom:26px; padding:16px 20px; border-radius:999px; background:var(--color-surface); } #vp-rooms .vp-people-filter__label { margin-right:8px; color:color-mix(in srgb, var(--color-text) 60%, transparent); font-size:13px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; } #vp-rooms .vp-rooms__filter .vp-chip { min-height:44px; } #vp-rooms .vp-people-filter__count { margin-left:auto; padding-left:16px; color:color-mix(in srgb, var(--color-text) 60%, transparent); font-size:14px; font-weight:600; white-space:nowrap; } /* ----------------------------------------------------------------- cards -- */ #vp-rooms .vp-room-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; } #vp-rooms .vp-room { display:flex; flex-direction:column; overflow:hidden; border-radius:var(--radius-lg); background:var(--color-surface); box-shadow:var(--shadow-sm); } /* Nine covers are five megabytes, so each one fades in when its card comes near the screen (assets/js/lazy-bg.js) — and only the first time. */ #vp-rooms .vp-room__image { height:230px; background-position:center; background-size:cover; background-color:var(--color-neutral-300); filter:saturate(.6) contrast(.85) brightness(1.1) opacity(.94); opacity:0; transition:opacity .3s ease; } #vp-rooms .vp-room__image.is-loaded { opacity:1; } #vp-rooms .vp-room__body { flex:1; display:flex; flex-direction:column; padding:24px 26px 26px; } #vp-rooms .vp-room__meta { display:flex; align-items:center; flex-wrap:wrap; gap:8px; margin-bottom:12px; } #vp-rooms .vp-room__tag { padding:5px 12px; border-radius:999px; background:var(--color-accent-2-200); color:var(--color-accent-2-800); font-size:11px; font-weight:700; } #vp-rooms .vp-room__capacity { color:color-mix(in srgb, var(--color-text) 60%, transparent); font-size:13px; } #vp-rooms .vp-room h3 { margin:0 0 8px; font-family:var(--font-heading); font-weight:var(--font-heading-weight); font-size:23px; line-height:1.2; } #vp-rooms .vp-room__excerpt { flex:1; margin:0; color:color-mix(in srgb, var(--color-text) 70%, transparent); font-size:14px; line-height:1.5; } #vp-rooms .vp-room__bottom { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:12px; margin-top:20px; padding-top:18px; border-top:1px solid var(--color-divider); } #vp-rooms .vp-room__price { display:flex; flex-direction:column; gap:2px; } #vp-rooms .vp-room__price b { font-family:var(--font-heading); font-weight:var(--font-heading-weight); font-size:20px; } #vp-rooms .vp-room__price span { color:color-mix(in srgb, var(--color-text) 55%, transparent); font-size:12px; } #vp-rooms .vp-room__actions { display:flex; gap:8px; } #vp-rooms .vp-room__actions .vp-btn { padding:11px 18px; font-size:14px; white-space:nowrap; } #vp-rooms .vp-rooms__empty { margin:8px 0 0; color:color-mix(in srgb, var(--color-text) 65%, transparent); font-size:17px; line-height:1.55; } /* ------------------------------------------------------------------ help -- */ #vp-rooms .vp-rooms__help { margin-top:32px; padding:48px 52px; border-radius:var(--radius-lg); background:var(--color-accent-200); color:var(--color-accent-900); } #vp-rooms .vp-rooms__help h3 { margin:0; color:var(--color-text); font-family:var(--font-heading); font-weight:var(--font-heading-weight); font-size:32px; line-height:1.08; } #vp-rooms .vp-rooms__help p { max-width:520px; margin:14px 0 26px; font-size:17px; line-height:1.6; } #vp-rooms .vp-rooms__helpActions { display:flex; flex-wrap:wrap; gap:12px; } #vp-rooms .vp-rooms__helpActions .vp-btn { padding:15px 28px; font-size:16px; } #vp-rooms .vp-rooms__ask { border-color:var(--color-accent-900); color:var(--color-accent-900); } /* Та же кнопка, что и была ссылкой в телеграм, — теперь открывает чат поддержки прямо здесь; фон у неё свой, а не браузерный. */ #vp-rooms button.vp-rooms__ask { background:transparent; } /* ------------------------------------------------------------- the sheet -- */ /* The sheet lives outside #vp-rooms, and the Tilda reset below it still sets `box-sizing: content-box` on everything — without this the full-width booking button is its padding wider than the column and pushes the sheet sideways. */ #vp-room-modal, #vp-room-modal *, #vp-room-photo-lightbox, #vp-room-photo-lightbox * { box-sizing:border-box; } #vp-room-modal { position:fixed; inset:0; z-index:200; display:none; padding:32px; background:color-mix(in srgb, var(--color-neutral-900) 62%, transparent); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); font-family:var(--font-body); } #vp-room-modal.is-open { display:grid; place-items:center; } #vp-room-modal .vp-modal__box { width:min(1060px,100%); max-height:calc(100vh - 64px); overflow:auto; display:grid; grid-template-columns:1fr 1fr; border-radius:var(--radius-lg); background:var(--color-bg); color:var(--color-text); box-shadow:var(--shadow-lg); } #vp-room-modal .vp-modal__image { min-height:520px; background-position:center; background-size:cover; background-color:var(--color-neutral-300); filter:saturate(.6) contrast(.85) brightness(1.1) opacity(.94); position:relative; } /* Only a mouse opens the picture full screen (assets/js/sections/rooms.js), so only a mouse is promised it. */ @media (hover:hover) and (pointer:fine) { #vp-room-modal .vp-modal__image { cursor:zoom-in; } } #vp-room-modal .vp-modal__room-thumbs { position:absolute; inset:auto 16px 16px; display:flex; flex-wrap:wrap; gap:8px; } #vp-room-modal .vp-modal__room-thumbs button { width:52px; height:40px; padding:0; border:2px solid transparent; border-radius:var(--radius-sm); background-position:center; background-size:cover; cursor:pointer; } #vp-room-modal .vp-modal__room-thumbs button.is-active { border-color:var(--color-bg); } #vp-room-modal .vp-modal__info { position:relative; padding:44px 46px 40px; display:flex; flex-direction:column; } #vp-room-modal .vp-modal__close { position:absolute; top:20px; right:20px; width:40px; height:40px; border:1px solid var(--color-divider); border-radius:50%; background:var(--color-bg); color:var(--color-text); font-size:22px; line-height:1; cursor:pointer; } #vp-room-modal .vp-modal__close:hover { background:color-mix(in srgb, var(--color-text) 7%, transparent); } #vp-room-modal .vp-modal__pre { display:inline-flex; align-self:flex-start; margin:0 0 14px; padding:5px 12px; border-radius:999px; background:var(--color-accent-2-200); color:var(--color-accent-2-800); font-size:11px; font-weight:700; } #vp-room-modal h3 { margin:0; font-family:var(--font-heading); font-weight:var(--font-heading-weight); font-size:40px; line-height:1.04; } #vp-room-modal .vp-modal__meta { margin-top:10px; display:flex; align-items:center; gap:8px; font-size:15px; font-weight:600; } #vp-room-modal .vp-modal__description { margin:14px 0 20px; color:color-mix(in srgb, var(--color-text) 76%, transparent); font-size:16px; line-height:1.6; } #vp-room-modal .vp-modal__features { display:grid; grid-template-columns:1fr 1fr; gap:10px 20px; padding:18px 0; border-top:1px solid var(--color-divider); border-bottom:1px solid var(--color-divider); } #vp-room-modal .vp-modal__features span { display:flex; align-items:flex-start; gap:10px; font-size:14px; line-height:1.4; } #vp-room-modal .vp-modal__features span:before { content:""; width:6px; height:6px; margin-top:7px; flex:none; border-radius:50%; background:var(--color-accent-2-600); } #vp-room-modal .vp-modal__rates { margin-top:20px; padding:22px 24px; border-radius:var(--radius-md); background:var(--color-surface); } #vp-room-modal .vp-modal__rates h4 { margin:0 0 12px; color:color-mix(in srgb, var(--color-text) 58%, transparent); font-family:var(--font-body); font-size:12px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; } #vp-room-modal .vp-modal__rate-group + .vp-modal__rate-group { margin-top:14px; } #vp-room-modal .vp-modal__rate-group b { display:block; margin-bottom:2px; font-size:14px; font-weight:700; } #vp-room-modal .vp-modal__rate-group span { display:flex; align-items:baseline; justify-content:space-between; gap:16px; font-size:14px; line-height:1.9; } #vp-room-modal .vp-modal__book { margin-top:auto; padding:16px; width:100%; } #vp-room-modal .vp-modal__rates + .vp-modal__book { margin-top:22px; } /* The lightbox over the sheet (built by rooms.js) */ #vp-room-photo-lightbox { position:fixed; inset:0; z-index:300; display:none; place-items:center; padding:32px; background:color-mix(in srgb, var(--color-neutral-900) 88%, transparent); } #vp-room-photo-lightbox.is-open { display:grid; } #vp-room-photo-lightbox img { max-width:100%; max-height:calc(100vh - 64px); border-radius:var(--radius-md); } #vp-room-photo-lightbox button { position:absolute; top:24px; right:24px; width:44px; height:44px; border:1px solid color-mix(in srgb, var(--color-neutral-100) 30%, transparent); border-radius:50%; background:transparent; color:var(--color-neutral-100); font-size:24px; line-height:1; cursor:pointer; } /* ---------------------------------------------------------------- narrow -- */ @media (max-width:1100px) { #vp-rooms .vp-room-grid { grid-template-columns:repeat(2,1fr); } } @media (max-width:980px) { #vp-rooms { padding-top:64px; } #vp-room-modal { padding:0; } #vp-room-modal .vp-modal__box { max-height:100vh; height:100%; grid-template-columns:1fr; border-radius:0; align-content:start; } #vp-room-modal .vp-modal__image { min-height:280px; } #vp-room-modal .vp-modal__info { padding:26px 20px calc(24px + env(safe-area-inset-bottom, 0px)); } #vp-room-modal h3 { font-size:32px; } #vp-room-modal .vp-modal__features { grid-template-columns:1fr; } /* The sheet is the whole screen here and it scrolls as one column, so the cross sits in the corner of the screen — pinned to the info panel it rides the scroll and lands on the room name. */ #vp-room-modal .vp-modal__close { position:fixed; z-index:2; top:calc(14px + env(safe-area-inset-top, 0px)); right:14px; width:44px; height:44px; background:color-mix(in srgb, var(--color-neutral-900) 62%, transparent); border-color:transparent; color:var(--color-neutral-100); } } @media (max-width:780px) { #vp-rooms { padding-top:48px; } #vp-rooms .vp-rooms__inner { width:calc(100% - 32px); } #vp-rooms .vp-rooms__lead { font-size:15px; } #vp-rooms .vp-rooms__filter { padding:0; border-radius:0; background:transparent; } #vp-rooms .vp-people-filter__label { width:100%; margin:0 0 4px; font-size:11px; } #vp-rooms .vp-rooms__filter .vp-chip { min-height:48px; flex:1 1 30%; } #vp-rooms .vp-people-filter__count { width:100%; margin:4px 0 0; padding:0; } #vp-rooms .vp-room-grid { grid-template-columns:1fr; gap:16px; } #vp-rooms .vp-room__image { height:190px; } #vp-rooms .vp-room__body { padding:18px 20px 20px; } #vp-rooms .vp-room h3 { font-size:22px; } #vp-rooms .vp-room__actions { flex:1; } #vp-rooms .vp-room__actions .vp-btn { flex:1; min-height:48px; } #vp-rooms .vp-rooms__help { padding:28px 22px; } #vp-rooms .vp-rooms__help h3 { font-size:24px; } #vp-rooms .vp-rooms__help p { margin:12px 0 20px; font-size:15px; } #vp-rooms .vp-rooms__helpActions .vp-btn { flex:1; min-height:50px; padding:0 16px; font-size:15px; } /* The room sheet keeps its booking button under the thumb. */ #vp-room-modal .vp-modal__book { position:sticky; bottom:calc(4px + env(safe-area-inset-bottom, 0px)); min-height:54px; padding:0 20px; box-shadow:0 6px 20px color-mix(in srgb, var(--color-neutral-900) 24%, transparent); } }