/* ==========================================================
Villa Rossa Critical Recovery CSS
Purpose:
- Does not replace css/style.css
- Does not replace demos/spa-salon/spa-salon.css
- Gives the page enough grid/layout/image/header/widget styles
so the site does not collapse if a template css/js file fails.
========================================================== */
@font-face {
font-family: "PF Venue Condensed";
src: url("../fonts/PFVenueCondensed-Medium.woff") format("woff");
font-weight: 500;
font-style: normal;
font-display: swap;
}
:root {
--primary-font: "Ubuntu", Arial, Helvetica, sans-serif;
--alt-font: "PF Venue Condensed", Arial, Helvetica, sans-serif;
--base-color: #79d3e1;
--dark-gray: #232323;
--white: #fff;
--black: #111;
}
*,
*::before,
*::after {
box-sizing: border-box;
}
html {
margin: 0;
padding: 0;
overflow-y: scroll;
scrollbar-gutter: stable;
}
body {
margin: 0;
padding: 0;
overflow-x: hidden;
font-family: var(--primary-font);
color: #111;
background: #fff;
}
img {
max-width: 100%;
height: auto;
display: block;
}
a {
color: inherit;
text-decoration: none;
}
.alt-font {
font-family: var(--alt-font) !important;
}
/* ---------------- Basic Bootstrap-like grid fallback ---------------- */
.container,
.container-lg,
.container-md,
.container-sm,
.container-xl,
.container-xxl {
width: min(1170px, calc(100% - 48px));
margin-right: auto;
margin-left: auto;
}
.container-fluid {
width: 100%;
margin-right: auto;
margin-left: auto;
padding-right: 15px;
padding-left: 15px;
}
.row {
display: flex;
flex-wrap: wrap;
margin-right: -15px;
margin-left: -15px;
}
.row > * {
max-width: 100%;
padding-right: 15px;
padding-left: 15px;
}
.col,
.col-12 {
flex: 0 0 auto;
width: 100%;
}
@media (min-width: 768px) {
.col-md-5 { flex: 0 0 auto; width: 41.66666667%; }
.col-md-7 { flex: 0 0 auto; width: 58.33333333%; }
.col-md-8 { flex: 0 0 auto; width: 66.66666667%; }
.col-md-11 { flex: 0 0 auto; width: 91.66666667%; }
.col-md-12 { flex: 0 0 auto; width: 100%; }
}
@media (min-width: 992px) {
.col-lg-2 { flex: 0 0 auto; width: 16.66666667%; }
.col-lg-3 { flex: 0 0 auto; width: 25%; }
.col-lg-5 { flex: 0 0 auto; width: 41.66666667%; }
.col-lg-6 { flex: 0 0 auto; width: 50%; }
.col-lg-8 { flex: 0 0 auto; width: 66.66666667%; }
.col-lg-9 { flex: 0 0 auto; width: 75%; }
.col-lg-12 { flex: 0 0 auto; width: 100%; }
.offset-lg-1 { margin-left: 8.33333333%; }
}
@media (min-width: 1200px) {
.col-xl-5 { flex: 0 0 auto; width: 41.66666667%; }
.col-xl-6 { flex: 0 0 auto; width: 50%; }
.col-xl-8 { flex: 0 0 auto; width: 66.66666667%; }
.col-xl-12 { flex: 0 0 auto; width: 100%; }
.offset-xl-1 { margin-left: 8.33333333%; }
}
/* ---------------- Utility fallback ---------------- */
.position-relative { position: relative !important; }
.position-absolute { position: absolute !important; }
.overflow-hidden { overflow: hidden !important; }
.overflow-x-hidden { overflow-x: hidden !important; }
.top-0 { top: 0 !important; }
.left-0 { left: 0 !important; }
.start-0 { left: 0 !important; }
.bottom-minus-45px { bottom: -45px !important; }
.w-100 { width: 100% !important; }
.h-100 { height: 100% !important; }
.w-90 { width: 90% !important; }
.w-80 { width: 80% !important; }
.w-60 { width: 60% !important; }
.p-0 { padding: 0 !important; }
.p-30px { padding: 30px !important; }
.m-0 { margin: 0 !important; }
.mb-0 { margin-bottom: 0 !important; }
.mb-15px { margin-bottom: 15px !important; }
.mb-20px { margin-bottom: 20px !important; }
.mb-25px { margin-bottom: 25px !important; }
.mb-40px { margin-bottom: 40px !important; }
.mb-45px { margin-bottom: 45px !important; }
.mb-5 { margin-bottom: 3rem !important; }
.mb-10 { margin-bottom: 6rem !important; }
.mt-10 { margin-top: 6rem !important; }
.mt-15 { margin-top: 8rem !important; }
.mt-15px { margin-top: 15px !important; }
.me-25px { margin-right: 25px !important; }
.top-minus-80px { margin-top: -80px !important; }
.top-minus-150px { margin-top: -150px !important; }
.top-minus-220px { margin-top: -220px !important; }
.float-start { float: left !important; }
.float-end { float: right !important; }
.clearfix::after { display: block; clear: both; content: ""; }
.d-block { display: block !important; }
.d-inline-block { display: inline-block !important; }
.d-inline-flex { display: inline-flex !important; }
.d-flex { display: flex !important; }
.align-items-center { align-items: center !important; }
.align-items-start { align-items: flex-start !important; }
.justify-content-center { justify-content: center !important; }
.justify-content-between { justify-content: space-between !important; }
.justify-content-end { justify-content: flex-end !important; }
.justify-content-start { justify-content: flex-start !important; }
.text-center { text-align: center !important; }
.text-end { text-align: right !important; }
.text-white { color: #fff !important; }
.text-black { color: #111 !important; }
.text-dark-gray { color: var(--dark-gray) !important; }
.text-base-color { color: var(--base-color) !important; }
.bg-white { background-color: #fff !important; }
.bg-dark-gray { background-color: #232323 !important; }
.z-index-1 { z-index: 1 !important; }
.z-index-2 { z-index: 2 !important; }
.z-index-3 { z-index: 3 !important; }
.z-index-4 { z-index: 4 !important; }
.z-index-5 { z-index: 5 !important; }
.opacity-3 { opacity: .3 !important; }
.opacity-7 { opacity: .7 !important; }
.opacity-9 { opacity: .9 !important; }
.border-radius-6px { border-radius: 6px !important; }
.fs-15 { font-size: 15px !important; }
.fs-18 { font-size: 18px !important; }
.fs-20 { font-size: 20px !important; }
.fs-22 { font-size: 22px !important; }
.fs-40 { font-size: 40px !important; }
.fs-60 { font-size: clamp(34px, 5vw, 60px) !important; }
.fs-90 { font-size: clamp(48px, 7vw, 90px) !important; }
.fs-100 { font-size: clamp(54px, 8vw, 100px) !important; }
.fs-120 { font-size: clamp(64px, 10vw, 120px) !important; }
.fs-190 { font-size: clamp(90px, 15vw, 190px) !important; }
.lh-30 { line-height: 30px !important; }
.lh-90 { line-height: .9 !important; }
.ls-minus-1px { letter-spacing: -1px !important; }
.ls-minus-2px { letter-spacing: -2px !important; }
.ls-minus-5px { letter-spacing: -5px !important; }
.ls-2px { letter-spacing: 2px !important; }
.ls-8px { letter-spacing: 8px !important; }
.fw-300 { font-weight: 300 !important; }
.fw-500 { font-weight: 500 !important; }
.fw-600 { font-weight: 600 !important; }
/* ---------------- Sections / image fallback ---------------- */
.section-dark,
.section,
.big-section,
.half-section {
position: relative;
}
.big-section {
padding-top: clamp(90px, 10vw, 150px);
padding-bottom: clamp(90px, 10vw, 150px);
}
.half-section {
padding-top: clamp(70px, 7vw, 110px);
padding-bottom: clamp(70px, 7vw, 110px);
}
.full-screen {
min-height: 100vh !important;
height: 100vh !important;
}
.md-h-600px,
.sm-h-500px {
min-height: 100vh;
}
.cover-background {
background-size: cover !important;
background-position: center center !important;
background-repeat: no-repeat !important;
}
.background-repeat {
background-repeat: repeat !important;
}
.bg-gradient-sherpa-blue-black,
.opacity-light {
position: absolute;
inset: 0;
pointer-events: none;
}
.opacity-light {
opacity: .42;
}
.bg-gradient-sherpa-blue-black {
background: linear-gradient(180deg, rgba(0,0,0,.18), rgba(0,0,0,.42));
}
/* ---------------- Swiper fallback if JS/CSS is missing ---------------- */
.swiper {
position: relative;
overflow: hidden;
width: 100%;
}
.swiper-wrapper {
position: relative;
width: 100%;
height: 100%;
}
.swiper-slide {
position: relative;
width: 100%;
height: 100%;
overflow: hidden;
}
.swiper:not(.swiper-initialized) .swiper-slide:not(:first-child) {
display: none !important;
}
.swiper:not(.swiper-initialized) .swiper-wrapper {
display: block !important;
}
.swiper-pagination,
.swiper-button-prev,
.swiper-button-next {
display: none;
}
/* ---------------- Buttons fallback ---------------- */
.btn,
.btn-small,
.btn-large {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 10px;
border: 1px solid currentColor;
padding: 13px 24px;
font-family: var(--alt-font);
font-size: 17px;
line-height: 1;
text-transform: uppercase;
letter-spacing: .06em;
}
.btn-dark-gray {
background: #232323;
color: #fff;
}
.btn-base-color {
background: var(--base-color);
color: #111;
}
.btn-rounded {
border-radius: 50px;
}
/* ---------------- Header emergency support ---------------- */
.vr-header-clean {
pointer-events: none;
}
.vr-header-clean .vr-navbar-clean,
.vr-header-clean .vr-menu-trigger,
.vr-header-clean .vr-header-logo,
.vr-header-clean .vr-center-menu,
.vr-header-clean .vr-book-holder,
.vr-header-clean .vr-mobile-toggler,
.vr-header-clean .vr-mobile-nav {
pointer-events: auto;
}
.vr-header-clean .navbar-nav,
.vr-fullscreen-menu ul,
.vr-footer-menu ul,
.vr-footer-social {
list-style: none;
}
/* ---------------- Page title / slider image fallback ---------------- */
.page-title-slider-style {
position: relative;
}
.page-title-slider-style .page-title-main-img {
display: block;
width: 100%;
height: 860px;
object-fit: cover;
}
.page-title-mask-reveal {
overflow: hidden;
-webkit-clip-path: inset(7.5% 7.5% 7.5% 7.5%);
clip-path: inset(7.5% 7.5% 7.5% 7.5%);
-webkit-animation: vrMaskReveal 1800ms ease-in-out 500ms forwards;
animation: vrMaskReveal 1800ms ease-in-out 500ms forwards;
}
.villarossa-slider-mask-reveal,
.swiper-slide .cover-background[data-anime*="clipPath"] {
-webkit-animation: vrMaskReveal 1800ms ease-in-out 500ms forwards;
animation: vrMaskReveal 1800ms ease-in-out 500ms forwards;
}
@keyframes vrMaskReveal {
from {
-webkit-clip-path: inset(7.5% 7.5% 7.5% 7.5%);
clip-path: inset(7.5% 7.5% 7.5% 7.5%);
}
to {
-webkit-clip-path: inset(0% 0% 0% 0%);
clip-path: inset(0% 0% 0% 0%);
}
}
/* ---------------- Paragraph / gallery fallback ---------------- */
.villarossa-content {
font-size: 20px;
line-height: 1.7;
}
.villarossa-content p {
margin-top: 0;
margin-bottom: 1.4em;
}
.villarossa-layout-b-wood-images,
.villarossa-gallery-layout-c__photos {
position: relative;
}
.villarossa-gallery-layout-c__photo,
.villarossa-layout-b-wood-img-front,
.villarossa-layout-b-wood-img-main,
.villarossa-layout-b-wood-img-third,
.villarossa-layout-b-wood-img-fourth,
.villarossa-layout-b-wood-single {
overflow: hidden;
border-radius: 6px;
}
.villarossa-gallery-layout-c__photo img,
.villarossa-layout-b-wood-images img {
width: 100%;
border-radius: 6px;
}
/* ---------------- Footer recovery ---------------- */
.vr-footer {
background: #79d3e1 !important;
color: #111 !important;
padding: 110px 0 80px !important;
}
.vr-footer a {
color: #111 !important;
text-decoration: none;
}
.vr-footer-title {
font-family: var(--alt-font) !important;
font-size: clamp(34px, 4vw, 54px) !important;
line-height: .95 !important;
margin: 0 0 35px !important;
}
.vr-footer-newsletter-text {
max-width: 430px;
font-size: 21px;
line-height: 1.18;
margin: 0 0 25px;
}
.vr-footer-newsletter {
max-width: 440px;
display: flex;
align-items: center;
border-bottom: 1px solid rgba(17, 17, 17, .85);
margin-bottom: 70px;
}
.vr-footer-newsletter input {
width: 100%;
border: 0;
outline: none;
background: transparent;
padding: 12px 0 16px;
color: #111;
font-size: 18px;
}
.vr-footer-newsletter button {
width: 60px;
min-width: 60px;
border: 0;
background: transparent;
color: #111;
font-size: 32px;
line-height: 1;
padding: 0 0 10px;
text-align: right;
cursor: pointer;
}
.vr-footer-newsletter button::before {
content: "→";
}
.vr-footer-newsletter button i {
display: none;
}
.vr-footer-block {
padding: 16px 0;
border-bottom: 1px solid rgba(17,17,17,.85);
}
.vr-footer-block a {
display: block;
}
.vr-footer-logo img {
width: auto;
max-width: 130px;
margin: 0 auto;
}
.vr-footer-menu ul,
.vr-footer-social {
margin: 0;
padding: 0;
}
.vr-footer-social {
display: flex;
gap: 20px;
margin-bottom: 70px;
}
.vr-footer-social a {
width: 42px;
height: 42px;
border-radius: 50%;
background: #111;
color: #79d3e1 !important;
display: inline-flex;
align-items: center;
justify-content: center;
}
.vr-footer-menu a {
display: inline-block;
font-family: var(--alt-font);
font-size: 21px;
line-height: 1.1;
text-transform: uppercase;
letter-spacing: .06em;
}
.vr-footer-credit {
margin-top: 120px;
font-size: 20px;
}
/* ---------------- Responsive fallback ---------------- */
@media (max-width: 991.98px) {
.container,
.container-fluid {
width: calc(100% - 32px);
padding-left: 0;
padding-right: 0;
}
.row {
margin-left: 0;
margin-right: 0;
}
.row > * {
padding-left: 0;
padding-right: 0;
}
.d-lg-none {
display: block !important;
}
.d-lg-flex {
display: none !important;
}
.full-screen {
min-height: 640px !important;
height: 640px !important;
}
.md-h-600px {
min-height: 600px !important;
height: 600px !important;
}
.sm-h-500px {
min-height: 500px !important;
height: 500px !important;
}
.page-title-slider-style .page-title-main-img {
height: 620px;
}
.w-60,
.w-80,
.w-90,
.md-w-90,
.md-w-100 {
width: 100% !important;
}
.float-start,
.float-end {
float: none !important;
}
.top-minus-80px,
.top-minus-150px,
.top-minus-220px {
margin-top: 24px !important;
}
.vr-footer {
padding: 70px 0 55px !important;
}
}
@media (max-width: 575.98px) {
.page-title-slider-style .page-title-main-img {
height: 520px;
}
.fs-120,
.fs-100,
.fs-90 {
font-size: 52px !important;
}
.fs-60 {
font-size: 32px !important;
}
}
/* ==================== Villa Rossa async + instagram button fix ==================== */
.villarossa-stories__button {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
width: auto !important;
max-width: max-content !important;
margin-top: 34px !important;
padding: 11px 24px 10px !important;
font-size: 14px !important;
line-height: 1.1 !important;
letter-spacing: .08em !important;
text-align: center !important;
text-transform: uppercase !important;
white-space: nowrap !important;
}
@media (max-width: 575.98px) {
.villarossa-stories__button {
font-size: 13px !important;
letter-spacing: .08em !important;
padding: 10px 18px 9px !important;
}
}
@media (max-width: 991.98px) {
.villarossa-layout-b-wood-images [data-bottom-top],
.villarossa-gallery-layout-c__photos [data-bottom-top] {
transform: none !important;
}
}
/* ==================== Instagram no flip fix ==================== */
.villarossa-stories .rotate-box-style-01 .rm-rotate-box,
.villarossa-stories .rotate-box-style-01 .flipper,
.villarossa-stories .rotate-box-style-01 .thumb-wrap {
transform: none !important;
transition: none !important;
transform-style: flat !important;
perspective: none !important;
}
.villarossa-stories .rotate-box-style-01 .front {
transform: none !important;
transition: none !important;
backface-visibility: visible !important;
-webkit-backface-visibility: visible !important;
opacity: 1 !important;
z-index: 2 !important;
}
.villarossa-stories .rotate-box-style-01 .back {
display: none !important;
opacity: 0 !important;
visibility: hidden !important;
pointer-events: none !important;
}
.villarossa-stories .rotate-box-style-01:hover .flipper,
.villarossa-stories .rotate-box-style-01:hover .thumb-wrap,
.villarossa-stories .rm-rotate-box:hover .flipper,
.villarossa-stories .rm-rotate-box:hover .thumb-wrap {
transform: none !important;
}
/* ==================== OUR PHILOSOPHY real async fix ==================== */
.vr-async-photo-1,
.vr-async-photo-2,
.vr-async-photo-3,
.vr-async-photo-4 {
will-change: transform !important;
}
.vr-async-photo-1 { transition-delay: 0ms !important; }
.vr-async-photo-2 { transition-delay: 90ms !important; }
.vr-async-photo-3 { transition-delay: 170ms !important; }
.vr-async-photo-4 { transition-delay: 260ms !important; }
@media (max-width: 991.98px) {
.vr-async-photo-1,
.vr-async-photo-2,
.vr-async-photo-3,
.vr-async-photo-4 {
transform: none !important;
}
}
/* ==================== FINAL forced menu css ==================== */
#vrMenuTrigger,
.vr-menu-trigger {
pointer-events: auto !important;
cursor: pointer !important;
z-index: 1000060 !important;
}
.vr-fullscreen-menu {
display: block !important;
position: fixed !important;
inset: 0 !important;
width: 100vw !important;
height: 100vh !important;
z-index: 1000005 !important;
opacity: 0 !important;
visibility: hidden !important;
pointer-events: none !important;
transform: none !important;
transition: opacity 420ms ease, visibility 0s linear 420ms !important;
}
body.vr-menu-open .vr-fullscreen-menu {
opacity: 1 !important;
visibility: visible !important;
pointer-events: auto !important;
transition: opacity 420ms ease, visibility 0s linear 0s !important;
}
body.vr-menu-open {
overflow: hidden !important;
padding-right: 0 !important;
}
/* ==================== Slider outline button fix ==================== */
.vr-slider-outline-btn {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
margin-top: 28px !important;
margin-bottom: 22px !important;
padding: 13px 34px 12px !important;
border: 1px solid rgba(255,255,255,.92) !important;
border-radius: 0 !important;
background: transparent !important;
color: #fff !important;
font-family: var(--alt-font) !important;
font-size: 18px !important;
font-weight: 500 !important;
line-height: 1 !important;
letter-spacing: .12em !important;
text-transform: uppercase !important;
transition: background .25s ease, color .25s ease, border-color .25s ease !important;
}
.vr-slider-outline-btn:hover {
background: #fff !important;
border-color: #fff !important;
color: #111 !important;
}
.vr-slider-outline-btn i {
margin-left: 12px !important;
font-size: 14px !important;
}
@media (max-width: 575.98px) {
.vr-slider-outline-btn {
margin-top: 20px !important;
margin-bottom: 18px !important;
padding: 11px 24px 10px !important;
font-size: 15px !important;
letter-spacing: .08em !important;
}
}
/* ==================== Exact plain text no anime ==================== */
.vr-plain-text-no-fade,
.vr-plain-text-no-fade *,
.villarossa-layout-b-wood-copy .w-90.md-w-100.mb-40px.ls-2px,
.villarossa-layout-b-wood-copy .w-90.md-w-100.mb-40px.ls-2px *,
.villarossa-content,
.villarossa-content * {
opacity: 1 !important;
visibility: visible !important;
animation: none !important;
-webkit-animation: none !important;
transition-delay: 0s !important;
animation-delay: 0s !important;
-webkit-animation-delay: 0s !important;
}
.vr-plain-text-no-fade span,
.villarossa-layout-b-wood-copy .w-90.md-w-100.mb-40px.ls-2px span {
will-change: auto !important;
transform: none !important;
}
/* ==================== News cards wide two columns ==================== */
/* Bootstrap fallback: row-cols-md-2 / row-cols-lg-2 must not stack */
@media (min-width: 768px) {
.row.row-cols-md-2 > * {
flex: 0 0 auto !important;
width: 50% !important;
}
}
@media (min-width: 992px) {
.row.row-cols-lg-2 > * {
flex: 0 0 auto !important;
width: 50% !important;
}
}
/* Runtime class added by JS to every row that contains .vr-news-card */
.vr-news-wide-row {
width: min(1440px, calc(100vw - 80px)) !important;
max-width: none !important;
margin-left: 50% !important;
margin-right: 0 !important;
transform: translateX(-50%) !important;
display: grid !important;
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
column-gap: clamp(34px, 5vw, 90px) !important;
row-gap: 44px !important;
justify-content: center !important;
align-items: stretch !important;
}
.vr-news-wide-row > .col {
width: 100% !important;
max-width: none !important;
flex: none !important;
padding-left: 0 !important;
padding-right: 0 !important;
margin-bottom: 0 !important;
}
.vr-news-wide-row .vr-news-card {
width: 100% !important;
height: 100% !important;
}
.vr-news-wide-row .vr-news-image {
width: 100% !important;
}
.vr-news-wide-row .vr-news-image img {
width: 100% !important;
height: auto !important;
display: block !important;
}
/* CSS-only fallback for the exact row pasted from live HTML */
.row.row-cols-1.row-cols-lg-2.row-cols-md-2.justify-content-center:has(.vr-news-card) {
width: min(1440px, calc(100vw - 80px)) !important;
max-width: none !important;
margin-left: 50% !important;
margin-right: 0 !important;
transform: translateX(-50%) !important;
display: grid !important;
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
column-gap: clamp(34px, 5vw, 90px) !important;
row-gap: 44px !important;
}
.row.row-cols-1.row-cols-lg-2.row-cols-md-2.justify-content-center:has(.vr-news-card) > .col {
width: 100% !important;
max-width: none !important;
flex: none !important;
padding-left: 0 !important;
padding-right: 0 !important;
margin-bottom: 0 !important;
}
@media (max-width: 767.98px) {
.vr-news-wide-row,
.row.row-cols-1.row-cols-lg-2.row-cols-md-2.justify-content-center:has(.vr-news-card) {
width: calc(100vw - 32px) !important;
margin-left: 50% !important;
transform: translateX(-50%) !important;
grid-template-columns: 1fr !important;
column-gap: 0 !important;
row-gap: 34px !important;
}
}
/* ==================== Paragraph outline white buttons ==================== */
.vr-paragraph-outline-btn {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
gap: 12px !important;
width: auto !important;
max-width: max-content !important;
margin-top: 26px !important;
padding: 13px 34px 12px !important;
border: 1px solid rgba(255,255,255,.95) !important;
border-radius: 0 !important;
background: transparent !important;
color: #fff !important;
font-family: var(--alt-font) !important;
font-size: 18px !important;
font-weight: 500 !important;
line-height: 1 !important;
letter-spacing: .12em !important;
text-transform: uppercase !important;
text-decoration: none !important;
box-shadow: none !important;
transition: background .25s ease, color .25s ease, border-color .25s ease !important;
}
.vr-paragraph-outline-btn:hover,
.vr-paragraph-outline-btn:focus {
background: #fff !important;
border-color: #fff !important;
color: #111 !important;
text-decoration: none !important;
}
.vr-paragraph-outline-btn i {
color: currentColor !important;
font-size: 14px !important;
line-height: 1 !important;
}
/* Make paragraph CTA visible on light sections too by giving it a dark fallback only when section is not dark */
section:not(.bg-dark-gray):not(.section-dark):not([class*="bg-black"]) .vr-paragraph-outline-btn {
border-color: rgba(35,35,35,.9) !important;
color: #232323 !important;
}
section:not(.bg-dark-gray):not(.section-dark):not([class*="bg-black"]) .vr-paragraph-outline-btn:hover,
section:not(.bg-dark-gray):not(.section-dark):not([class*="bg-black"]) .vr-paragraph-outline-btn:focus {
background: #232323 !important;
border-color: #232323 !important;
color: #fff !important;
}
@media (max-width: 575.98px) {
.vr-paragraph-outline-btn {
margin-top: 22px !important;
padding: 11px 24px 10px !important;
font-size: 15px !important;
letter-spacing: .08em !important;
}
}
/* ==================== Emergency mobile slider repair fallback ==================== */
/* ==================== Emergency mobile slider repair ==================== */
/*
* Do NOT hide anything with [class*="pagination"].
* The home slider itself has class swiper-light-pagination.
*/
.vr-header-clean,
.vr-header-clean.header-light,
.vr-header-clean.header-dark,
.vr-header-clean.header-appear,
.vr-header-clean.header-reverse-scroll,
.vr-header-clean.sticky,
.vr-header-clean.sticky-active,
.vr-header-clean.fixed,
.vr-header-clean.fixed-top,
.vr-header-clean.sticky-header,
.vr-header-clean.bg-white,
.vr-header-clean.bg-light,
.vr-header-clean.navbar-light,
.vr-header-clean.navbar-default,
.vr-header-clean > nav,
.vr-header-clean > .navbar,
.vr-header-clean > .vr-navbar-clean,
.vr-header-clean .container,
.vr-header-clean .container-fluid,
.vr-header-clean .navbar-collapse,
.vr-header-clean .navbar-nav,
.vr-header-clean .vr-navbar-inner,
body.vr-header-scrolled .vr-header-clean,
body.vr-header-scrolled .vr-header-clean.header-light,
body.vr-header-scrolled .vr-header-clean.header-dark,
body.vr-header-scrolled .vr-header-clean.header-appear,
body.vr-header-scrolled .vr-header-clean.header-reverse-scroll,
body.vr-header-scrolled .vr-header-clean.sticky,
body.vr-header-scrolled .vr-header-clean.sticky-active,
body.vr-header-scrolled .vr-header-clean.fixed,
body.vr-header-scrolled .vr-header-clean.fixed-top,
body.vr-header-scrolled .vr-header-clean.sticky-header,
body.vr-header-scrolled .vr-header-clean.bg-white,
body.vr-header-scrolled .vr-header-clean.bg-light,
body.vr-header-scrolled .vr-header-clean.navbar-light,
body.vr-header-scrolled .vr-header-clean.navbar-default,
body.vr-header-scrolled .vr-header-clean > nav,
body.vr-header-scrolled .vr-header-clean > .navbar,
body.vr-header-scrolled .vr-header-clean > .vr-navbar-clean,
body.vr-header-scrolled .vr-header-clean .container,
body.vr-header-scrolled .vr-header-clean .container-fluid,
body.vr-header-scrolled .vr-header-clean .navbar-collapse,
body.vr-header-scrolled .vr-header-clean .navbar-nav,
body.vr-header-scrolled .vr-header-clean .vr-navbar-inner,
body.vr-menu-open .vr-header-clean,
body.vr-menu-open .vr-header-clean > nav,
body.vr-menu-open .vr-header-clean > .navbar,
body.vr-menu-open .vr-header-clean > .vr-navbar-clean,
body.vr-menu-open .vr-header-clean .container,
body.vr-menu-open .vr-header-clean .container-fluid,
body.vr-menu-open .vr-header-clean .navbar-collapse,
body.vr-menu-open .vr-header-clean .navbar-nav,
body.vr-menu-open .vr-header-clean .vr-navbar-inner {
background: transparent !important;
background-color: transparent !important;
background-image: none !important;
box-shadow: none !important;
}
.vr-sticky-glass-layer {
position: absolute !important;
inset: 0 !important;
z-index: 1 !important;
display: block !important;
opacity: 0 !important;
pointer-events: none !important;
background: rgba(0, 0, 0, .22) !important;
-webkit-backdrop-filter: blur(18px) brightness(.84) saturate(120%) !important;
backdrop-filter: blur(18px) brightness(.84) saturate(120%) !important;
transition: opacity 220ms ease !important;
}
body.vr-header-scrolled:not(.vr-menu-open) .vr-sticky-glass-layer {
opacity: 1 !important;
}
body.vr-menu-open .vr-sticky-glass-layer {
opacity: 0 !important;
}
.vr-header-clean > *:not(.vr-sticky-glass-layer):not(.vr-fullscreen-menu) {
position: relative !important;
z-index: 4 !important;
}
.vr-fullscreen-menu {
position: fixed !important;
inset: 0 !important;
display: block !important;
width: 100vw !important;
max-width: 100vw !important;
height: 100vh !important;
max-height: 100vh !important;
opacity: 0 !important;
visibility: hidden !important;
pointer-events: none !important;
z-index: 3 !important;
background: rgba(8, 8, 8, .88) !important;
transition: opacity 360ms ease, visibility 0s linear 360ms !important;
overflow-y: auto !important;
}
body.vr-menu-open .vr-fullscreen-menu {
opacity: 1 !important;
visibility: visible !important;
pointer-events: auto !important;
transition: opacity 360ms ease, visibility 0s linear 0s !important;
}
.vr-fullscreen-menu::before {
content: "";
position: fixed;
inset: 0;
z-index: 0;
background: rgba(8, 8, 8, .88) !important;
pointer-events: none;
}
.vr-fullscreen-menu > * {
position: relative !important;
z-index: 2 !important;
}
/* Hide only real bottom slider numbers/counters, not slider wrappers */
.swiper-pagination,
.swiper-pagination-bullets,
.swiper-pagination-fraction,
.swiper-pagination-current,
.swiper-pagination-total,
.swiper-pagination-progressbar,
.slider-number,
.swiper-number-pagination,
.number-pagination,
.slide-number,
.slide-count,
.slider-count,
.swiper-counter,
.vr-slider-slide-number {
display: none !important;
opacity: 0 !important;
visibility: hidden !important;
pointer-events: none !important;
}
.swiper.swiper-light-pagination {
display: block !important;
opacity: 1 !important;
visibility: visible !important;
}
@media (max-width: 991.98px) {
.vr-header-clean {
position: fixed !important;
height: 72px !important;
min-height: 72px !important;
background: transparent !important;
background-color: transparent !important;
}
.vr-header-clean > nav,
.vr-header-clean > .navbar,
.vr-header-clean > .vr-navbar-clean,
.vr-header-clean .vr-navbar-inner {
height: 72px !important;
min-height: 72px !important;
background: transparent !important;
background-color: transparent !important;
}
.vr-header-clean .vr-navbar-inner {
position: relative !important;
display: block !important;
width: 100% !important;
padding: 0 16px !important;
margin: 0 !important;
}
/* LEFT: 3-line menu */
#vrMenuTrigger,
.vr-header-clean #vrMenuTrigger,
.vr-header-clean .vr-menu-trigger {
display: inline-flex !important;
visibility: visible !important;
opacity: 1 !important;
pointer-events: auto !important;
position: absolute !important;
left: 18px !important;
top: 50% !important;
right: auto !important;
bottom: auto !important;
transform: translateY(-50%) !important;
z-index: 1000060 !important;
width: 44px !important;
min-width: 44px !important;
max-width: 44px !important;
height: 44px !important;
min-height: 44px !important;
max-height: 44px !important;
padding: 0 !important;
margin: 0 !important;
border: 0 !important;
background: transparent !important;
background-color: transparent !important;
overflow: visible !important;
}
.vr-header-clean .vr-menu-trigger-text {
display: none !important;
}
.vr-header-clean .vr-menu-trigger-lines {
display: flex !important;
flex-direction: column !important;
justify-content: center !important;
gap: 5px !important;
width: 28px !important;
min-width: 28px !important;
max-width: 28px !important;
height: 22px !important;
min-height: 22px !important;
max-height: 22px !important;
opacity: 1 !important;
visibility: visible !important;
overflow: visible !important;
}
.vr-header-clean .vr-menu-trigger-lines span,
.vr-header-clean .vr-menu-trigger-line {
display: block !important;
width: 28px !important;
min-width: 28px !important;
max-width: 28px !important;
height: 2px !important;
min-height: 2px !important;
max-height: 2px !important;
opacity: 1 !important;
visibility: visible !important;
background: #fff !important;
background-color: #fff !important;
}
/* CENTER: logo */
.vr-header-clean .vr-header-logo {
display: flex !important;
visibility: visible !important;
opacity: 1 !important;
pointer-events: auto !important;
position: absolute !important;
left: 50% !important;
top: 50% !important;
right: auto !important;
bottom: auto !important;
transform: translate(-50%, -50%) !important;
z-index: 1000055 !important;
width: auto !important;
min-width: 0 !important;
max-width: 150px !important;
height: auto !important;
min-height: 0 !important;
max-height: 62px !important;
padding: 0 !important;
margin: 0 !important;
overflow: visible !important;
background: transparent !important;
background-color: transparent !important;
}
.vr-header-clean .vr-header-logo img {
width: auto !important;
height: auto !important;
max-height: 58px !important;
opacity: 1 !important;
visibility: visible !important;
background: transparent !important;
background-color: transparent !important;
}
.vr-header-clean .vr-header-logo img.default-logo,
.vr-header-clean .vr-header-logo img.alt-logo {
display: none !important;
opacity: 0 !important;
visibility: hidden !important;
}
.vr-header-clean .vr-header-logo img.mobile-logo {
display: block !important;
opacity: 1 !important;
visibility: visible !important;
transform: scale(1) !important;
}
body.vr-header-scrolled .vr-header-clean .vr-header-logo {
transform: translate(-50%, -50%) !important;
}
body.vr-header-scrolled .vr-header-clean .vr-header-logo img.mobile-logo {
transform: scale(.85) !important;
max-height: 45px !important;
}
/* RIGHT: BOOK */
.vr-header-clean .vr-book-holder,
body.vr-header-scrolled .vr-header-clean .vr-book-holder,
body.vr-menu-open .vr-header-clean .vr-book-holder {
display: inline-flex !important;
visibility: visible !important;
opacity: 1 !important;
pointer-events: auto !important;
position: absolute !important;
right: 18px !important;
top: 50% !important;
left: auto !important;
bottom: auto !important;
transform: translateY(-50%) !important;
z-index: 1000060 !important;
width: auto !important;
min-width: 44px !important;
max-width: 78px !important;
height: 44px !important;
min-height: 44px !important;
max-height: 44px !important;
padding: 0 !important;
margin: 0 !important;
overflow: visible !important;
background: transparent !important;
background-color: transparent !important;
}
.vr-header-clean .vr-book-link,
body.vr-header-scrolled .vr-header-clean .vr-book-link,
body.vr-menu-open .vr-header-clean .vr-book-link {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
color: #fff !important;
background: transparent !important;
background-color: transparent !important;
border: 0 !important;
width: auto !important;
min-width: 44px !important;
max-width: 78px !important;
height: 44px !important;
min-height: 44px !important;
max-height: 44px !important;
padding: 0 !important;
margin: 0 !important;
font-size: 15px !important;
line-height: 1 !important;
letter-spacing: .08em !important;
text-transform: uppercase !important;
white-space: nowrap !important;
opacity: 1 !important;
visibility: visible !important;
pointer-events: auto !important;
}
.vr-header-clean .vr-center-menu,
.vr-header-clean .vr-mobile-toggler,
.vr-header-clean .navbar-toggler:not(#vrMenuTrigger),
.vr-header-clean .vr-mobile-nav,
.vr-header-clean .collapse.navbar-collapse.vr-mobile-nav {
display: none !important;
opacity: 0 !important;
visibility: hidden !important;
pointer-events: none !important;
width: 0 !important;
height: 0 !important;
max-width: 0 !important;
max-height: 0 !important;
overflow: hidden !important;
}
}
/* ==================== Menu open transparent + Home repair fallback ==================== */
/* ==================== Menu open transparent + Home repair ==================== */
/*
* Menu open: slightly more transparent fullscreen background.
* Sticky glass layer stays off while menu is open.
*/
body.vr-menu-open .vr-fullscreen-menu,
body.vr-menu-open .vr-fullscreen-menu::before {
background: rgba(8, 8, 8, .88) !important;
background-color: rgba(8, 8, 8, .88) !important;
}
body.vr-menu-open .vr-sticky-glass-layer {
opacity: 0 !important;
}
/*
* Keep the template's late sticky white background killed.
*/
.vr-header-clean,
.vr-header-clean.header-light,
.vr-header-clean.header-dark,
.vr-header-clean.header-appear,
.vr-header-clean.header-reverse-scroll,
.vr-header-clean.sticky,
.vr-header-clean.sticky-active,
.vr-header-clean.fixed,
.vr-header-clean.fixed-top,
.vr-header-clean.sticky-header,
.vr-header-clean.bg-white,
.vr-header-clean.bg-light,
.vr-header-clean.navbar-light,
.vr-header-clean.navbar-default,
.vr-header-clean > nav,
.vr-header-clean > .navbar,
.vr-header-clean > .vr-navbar-clean,
.vr-header-clean .container,
.vr-header-clean .container-fluid,
.vr-header-clean .navbar-collapse,
.vr-header-clean .navbar-nav,
.vr-header-clean .vr-navbar-inner,
body.vr-header-scrolled .vr-header-clean,
body.vr-header-scrolled .vr-header-clean.header-light,
body.vr-header-scrolled .vr-header-clean.header-dark,
body.vr-header-scrolled .vr-header-clean.header-appear,
body.vr-header-scrolled .vr-header-clean.header-reverse-scroll,
body.vr-header-scrolled .vr-header-clean.sticky,
body.vr-header-scrolled .vr-header-clean.sticky-active,
body.vr-header-scrolled .vr-header-clean.fixed,
body.vr-header-scrolled .vr-header-clean.fixed-top,
body.vr-header-scrolled .vr-header-clean.sticky-header,
body.vr-header-scrolled .vr-header-clean.bg-white,
body.vr-header-scrolled .vr-header-clean.bg-light,
body.vr-header-scrolled .vr-header-clean.navbar-light,
body.vr-header-scrolled .vr-header-clean.navbar-default,
body.vr-header-scrolled .vr-header-clean > nav,
body.vr-header-scrolled .vr-header-clean > .navbar,
body.vr-header-scrolled .vr-header-clean > .vr-navbar-clean,
body.vr-header-scrolled .vr-header-clean .container,
body.vr-header-scrolled .vr-header-clean .container-fluid,
body.vr-header-scrolled .vr-header-clean .navbar-collapse,
body.vr-header-scrolled .vr-header-clean .navbar-nav,
body.vr-header-scrolled .vr-header-clean .vr-navbar-inner {
background: transparent !important;
background-color: transparent !important;
background-image: none !important;
box-shadow: none !important;
}
/*
* Softer sticky shrink.
*/
body.vr-header-scrolled .vr-header-clean,
body.vr-header-scrolled .vr-header-clean > nav,
body.vr-header-scrolled .vr-header-clean > .navbar,
body.vr-header-scrolled .vr-header-clean > .vr-navbar-clean,
body.vr-header-scrolled .vr-header-clean .vr-navbar-inner {
height: 68px !important;
min-height: 68px !important;
}
body.vr-header-scrolled .vr-header-logo img,
body.vr-header-scrolled .vr-header-clean .vr-header-logo img {
transform: scale(.85) !important;
max-height: 72px !important;
}
/*
* Slider number/counter only. Do not hide swiper-light-pagination wrapper.
*/
.swiper-pagination,
.swiper-pagination-bullets,
.swiper-pagination-fraction,
.swiper-pagination-current,
.swiper-pagination-total,
.swiper-pagination-progressbar,
.slider-number,
.swiper-number-pagination,
.number-pagination,
.slide-number,
.slide-count,
.slider-count,
.swiper-counter,
.vr-slider-slide-number {
display: none !important;
opacity: 0 !important;
visibility: hidden !important;
pointer-events: none !important;
}
.swiper.swiper-light-pagination {
display: block !important;
opacity: 1 !important;
visibility: visible !important;
}
@media (max-width: 991.98px) {
/*
* Mobile final:
* left ☰ / center logo / right BOOK
*/
.vr-header-clean {
height: 72px !important;
min-height: 72px !important;
}
body.vr-header-scrolled .vr-header-clean,
body.vr-header-scrolled .vr-header-clean > nav,
body.vr-header-scrolled .vr-header-clean > .navbar,
body.vr-header-scrolled .vr-header-clean > .vr-navbar-clean,
body.vr-header-scrolled .vr-header-clean .vr-navbar-inner {
height: 62px !important;
min-height: 62px !important;
}
#vrMenuTrigger,
.vr-header-clean #vrMenuTrigger,
.vr-header-clean .vr-menu-trigger {
display: inline-flex !important;
visibility: visible !important;
opacity: 1 !important;
pointer-events: auto !important;
position: absolute !important;
left: 18px !important;
top: 50% !important;
right: auto !important;
bottom: auto !important;
transform: translateY(-50%) !important;
z-index: 1000060 !important;
width: 44px !important;
min-width: 44px !important;
max-width: 44px !important;
height: 44px !important;
min-height: 44px !important;
max-height: 44px !important;
padding: 0 !important;
margin: 0 !important;
border: 0 !important;
background: transparent !important;
background-color: transparent !important;
overflow: visible !important;
}
.vr-header-clean .vr-menu-trigger-text {
display: none !important;
}
.vr-header-clean .vr-menu-trigger-lines,
.vr-header-clean .vr-menu-trigger-lines span,
.vr-header-clean .vr-menu-trigger-line {
opacity: 1 !important;
visibility: visible !important;
}
.vr-header-clean .vr-menu-trigger-lines span,
.vr-header-clean .vr-menu-trigger-line {
background: #fff !important;
background-color: #fff !important;
}
.vr-header-clean .vr-header-logo {
display: flex !important;
visibility: visible !important;
opacity: 1 !important;
pointer-events: auto !important;
position: absolute !important;
left: 50% !important;
top: 50% !important;
right: auto !important;
bottom: auto !important;
transform: translate(-50%, -50%) !important;
z-index: 1000055 !important;
width: auto !important;
max-width: 150px !important;
height: auto !important;
margin: 0 !important;
padding: 0 !important;
overflow: visible !important;
background: transparent !important;
background-color: transparent !important;
}
.vr-header-clean .vr-header-logo img.default-logo,
.vr-header-clean .vr-header-logo img.alt-logo {
display: none !important;
opacity: 0 !important;
visibility: hidden !important;
}
.vr-header-clean .vr-header-logo img.mobile-logo,
.vr-header-clean .vr-header-logo img:first-child:last-child {
display: block !important;
opacity: 1 !important;
visibility: visible !important;
transform: scale(1) !important;
max-height: 58px !important;
}
body.vr-header-scrolled .vr-header-clean .vr-header-logo,
body.vr-menu-open .vr-header-clean .vr-header-logo {
transform: translate(-50%, -50%) !important;
}
body.vr-header-scrolled .vr-header-clean .vr-header-logo img.mobile-logo,
body.vr-header-scrolled .vr-header-clean .vr-header-logo img:first-child:last-child,
body.vr-header-scrolled .vr-header-clean .vr-header-logo img {
transform: scale(.85) !important;
max-height: 50px !important;
}
.vr-header-clean .vr-book-holder,
body.vr-header-scrolled .vr-header-clean .vr-book-holder,
body.vr-menu-open .vr-header-clean .vr-book-holder {
display: inline-flex !important;
visibility: visible !important;
opacity: 1 !important;
pointer-events: auto !important;
position: absolute !important;
right: 18px !important;
top: 50% !important;
left: auto !important;
bottom: auto !important;
transform: translateY(-50%) !important;
z-index: 1000060 !important;
width: auto !important;
min-width: 44px !important;
max-width: 78px !important;
height: 44px !important;
min-height: 44px !important;
max-height: 44px !important;
padding: 0 !important;
margin: 0 !important;
overflow: visible !important;
background: transparent !important;
background-color: transparent !important;
}
.vr-header-clean .vr-book-link,
body.vr-header-scrolled .vr-header-clean .vr-book-link,
body.vr-menu-open .vr-header-clean .vr-book-link {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
color: #fff !important;
background: transparent !important;
background-color: transparent !important;
border: 0 !important;
width: auto !important;
min-width: 44px !important;
max-width: 78px !important;
height: 44px !important;
min-height: 44px !important;
max-height: 44px !important;
padding: 0 !important;
margin: 0 !important;
font-size: 15px !important;
line-height: 1 !important;
letter-spacing: .08em !important;
text-transform: uppercase !important;
white-space: nowrap !important;
}
.vr-header-clean .vr-center-menu,
.vr-header-clean .vr-mobile-toggler,
.vr-header-clean .navbar-toggler:not(#vrMenuTrigger),
.vr-header-clean .vr-mobile-nav,
.vr-header-clean .collapse.navbar-collapse.vr-mobile-nav {
display: none !important;
opacity: 0 !important;
visibility: hidden !important;
pointer-events: none !important;
width: 0 !important;
height: 0 !important;
max-width: 0 !important;
max-height: 0 !important;
overflow: hidden !important;
}
}
/* ==================== Wood style photo scroll motion ==================== */
/*
* Scroll-driven image movement inspired by Wood/Salient:
* - no fade
* - opacity always 1
* - image wrappers move vertically in opposite directions
* - native page scroll remains untouched
*/
.vr-wood-photo-motion {
opacity: 1 !important;
visibility: visible !important;
will-change: transform !important;
transition: transform 80ms linear !important;
transform: translate3d(var(--vr-photo-x, 0px), var(--vr-photo-y, 0px), 0) scale(1) rotate(0deg) !important;
}
.vr-wood-photo-motion img {
opacity: 1 !important;
visibility: visible !important;
transform: none !important;
will-change: auto !important;
}
/* On mobile, keep photos stable to avoid heavy motion and layout jumps */
@media (max-width: 767.98px) {
.vr-wood-photo-motion {
transform: none !important;
transition: none !important;
}
}
/* ==================== Stay rooms anchors and stacked suites with gallery ==================== */
.vr-stay-anchor-nav-section {
position: relative;
z-index: 5;
padding: 30px 0 24px;
background: #fbf7f1;
border-bottom: 1px solid rgba(30, 24, 20, .10);
}
.vr-stay-anchor-nav {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
gap: 12px 14px;
}
.vr-stay-room-anchor-btn {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 42px;
padding: 12px 22px 10px;
border: 1px solid rgba(29, 24, 20, .55);
border-radius: 0;
background: transparent;
color: #1d1814;
font-family: var(--alt-font, inherit);
font-size: 17px;
line-height: 1;
letter-spacing: .08em;
text-transform: uppercase;
text-decoration: none !important;
transition: background-color 220ms ease, color 220ms ease, border-color 220ms ease, transform 220ms ease;
}
.vr-stay-room-anchor-btn:hover,
.vr-stay-room-anchor-btn:focus {
border-color: #1d1814;
background: #1d1814;
color: #fff;
transform: translateY(-2px);
}
.vr-stay-rooms-wrap {
position: relative;
background: #fbf7f1;
}
.vr-stay-room-item {
position: relative;
padding: 118px 0;
scroll-margin-top: 128px;
}
.vr-stay-room-item + .vr-stay-room-item {
border-top: 1px solid rgba(30, 24, 20, .10);
}
.vr-stay-room-anchor-offset {
position: absolute;
top: -122px;
left: 0;
width: 1px;
height: 1px;
pointer-events: none;
}
.vr-stay-room-gallery {
position: relative;
width: 100%;
padding-right: 52px;
}
.vr-stay-room-item--reverse .vr-stay-room-gallery {
padding-right: 0;
padding-left: 52px;
}
.vr-stay-room-photo {
position: relative;
overflow: hidden;
width: 100%;
margin: 0;
border-radius: 4px;
background: rgba(30, 24, 20, .06);
}
.vr-stay-room-photo img,
.vr-stay-room-main-img {
display: block;
width: 100%;
min-height: 520px;
object-fit: cover;
}
.vr-stay-room-main-caption {
position: absolute;
right: 24px;
bottom: 24px;
left: 24px;
z-index: 3;
max-width: 520px;
padding: 18px 22px 16px;
background: rgba(20, 17, 14, .72);
color: #fff;
backdrop-filter: blur(8px);
}
.vr-stay-room-caption-title {
display: block;
margin-bottom: 4px;
font-family: var(--alt-font, inherit);
font-size: 22px;
line-height: 1.05;
letter-spacing: .06em;
text-transform: uppercase;
}
.vr-stay-room-caption-text {
display: block;
font-size: 15px;
line-height: 1.55;
opacity: .82;
}
.vr-stay-room-thumbs {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 10px;
margin-top: 14px;
}
.vr-stay-room-thumb {
position: relative;
overflow: hidden;
height: 94px;
padding: 0;
border: 1px solid transparent;
border-radius: 3px;
background: transparent;
cursor: pointer;
}
.vr-stay-room-thumb img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
opacity: .72;
transition: opacity 220ms ease, transform 220ms ease;
}
.vr-stay-room-thumb:hover img,
.vr-stay-room-thumb.is-active img {
opacity: 1;
transform: scale(1.045);
}
.vr-stay-room-thumb.is-active {
border-color: rgba(29, 24, 20, .60);
}
.vr-stay-room-copy {
position: relative;
z-index: 2;
max-width: 520px;
padding: 0 0 0 58px;
}
.vr-stay-room-item--reverse .vr-stay-room-copy {
padding: 0 58px 0 0;
margin-left: auto;
}
.vr-stay-room-subtitle {
display: block;
margin-bottom: 18px;
color: #8d7059;
font-size: 20px;
line-height: 1;
letter-spacing: .10em;
text-transform: uppercase;
}
.vr-stay-room-title {
margin: 0 0 28px;
color: #1d1814;
font-size: clamp(56px, 6vw, 108px);
font-weight: 500;
line-height: .86;
letter-spacing: -1px;
text-transform: uppercase;
}
.vr-stay-room-summary,
.vr-stay-room-content {
color: rgba(29, 24, 20, .78);
font-size: 18px;
line-height: 1.8;
}
.vr-stay-room-summary {
margin-bottom: 20px;
}
.vr-stay-room-content p:last-child,
.vr-stay-room-summary p:last-child {
margin-bottom: 0;
}
.vr-stay-room-more-btn {
display: inline-flex;
align-items: center;
justify-content: center;
margin-top: 34px;
padding: 13px 26px 11px;
border: 1px solid rgba(29, 24, 20, .65);
color: #1d1814;
font-family: var(--alt-font, inherit);
font-size: 16px;
letter-spacing: .08em;
line-height: 1;
text-transform: uppercase;
text-decoration: none !important;
transition: background-color 220ms ease, color 220ms ease, border-color 220ms ease;
}
.vr-stay-room-more-btn:hover,
.vr-stay-room-more-btn:focus {
border-color: #1d1814;
background: #1d1814;
color: #fff;
}
@media (max-width: 1199.98px) {
.vr-stay-room-gallery,
.vr-stay-room-item--reverse .vr-stay-room-gallery {
padding-right: 30px;
padding-left: 30px;
}
.vr-stay-room-copy,
.vr-stay-room-item--reverse .vr-stay-room-copy {
padding-right: 30px;
padding-left: 30px;
}
}
@media (max-width: 991.98px) {
.vr-stay-anchor-nav-section {
padding: 22px 0 18px;
}
.vr-stay-room-anchor-btn {
min-height: 38px;
padding: 11px 17px 9px;
font-size: 15px;
}
.vr-stay-room-item {
padding: 78px 0;
scroll-margin-top: 104px;
}
.vr-stay-room-gallery,
.vr-stay-room-item--reverse .vr-stay-room-gallery {
padding-right: 0;
padding-left: 0;
margin-bottom: 42px;
}
.vr-stay-room-copy,
.vr-stay-room-item--reverse .vr-stay-room-copy {
max-width: 100%;
padding-right: 0;
padding-left: 0;
margin-left: 0;
}
.vr-stay-room-photo img,
.vr-stay-room-main-img {
min-height: 420px;
}
}
@media (max-width: 575.98px) {
.vr-stay-anchor-nav {
justify-content: flex-start;
flex-wrap: nowrap;
overflow-x: auto;
padding-bottom: 6px;
-webkit-overflow-scrolling: touch;
}
.vr-stay-room-anchor-btn {
flex: 0 0 auto;
}
.vr-stay-room-item {
padding: 58px 0;
}
.vr-stay-room-title {
font-size: 48px;
}
.vr-stay-room-photo img,
.vr-stay-room-main-img {
min-height: 330px;
}
.vr-stay-room-main-caption {
position: relative;
right: auto;
bottom: auto;
left: auto;
max-width: 100%;
background: rgba(29, 24, 20, .88);
}
.vr-stay-room-thumbs {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.vr-stay-room-thumb {
height: 76px;
}
}
/* ==================== Stay suite widgets gallery repair ==================== */
.vr-stay-anchor-nav-section--widgets {
position: relative;
z-index: 8;
padding: 34px 0 18px;
background: transparent;
}
.vr-stay-suite-widget-list {
position: relative;
z-index: 1;
}
.vr-stay-suite-widget-item {
position: relative;
display: block;
scroll-margin-top: 120px;
}
.vr-stay-suite-widget-item > section {
margin-top: 0 !important;
}
.vr-gallery-layout-a-suite {
position: relative;
overflow: visible;
}
.vr-gallery-layout-a-suite__subtitle {
display: inline-block;
margin-bottom: 12px;
font-size: 15px;
line-height: 1.2;
letter-spacing: .18em;
text-transform: uppercase;
}
.vr-gallery-layout-a-suite__title {
margin: 0 0 22px;
font-size: clamp(48px, 6vw, 104px);
line-height: .9;
letter-spacing: -.02em;
}
.vr-gallery-layout-a-suite__text {
max-width: 760px;
margin: 0 auto;
color: rgba(29, 24, 20, .78);
font-size: 18px;
line-height: 1.78;
}
.vr-gallery-layout-a-suite__text p:last-child {
margin-bottom: 0;
}
.vr-gallery-layout-a-suite__photo {
display: block;
margin: 0 0 28px;
}
.vr-gallery-layout-a-suite__photo img {
display: block;
width: 100%;
min-height: 430px;
object-fit: cover;
}
.vr-gallery-layout-a-suite__grid .col-12 .vr-gallery-layout-a-suite__photo img {
min-height: 620px;
}
.vr-gallery-layout-a-suite__button {
color: #1d1814 !important;
border-color: rgba(29, 24, 20, .58) !important;
}
.vr-gallery-layout-a-suite__button:hover,
.vr-gallery-layout-a-suite__button:focus {
color: #fff !important;
background: #1d1814 !important;
border-color: #1d1814 !important;
}
@media (max-width: 991.98px) {
.vr-stay-anchor-nav-section--widgets {
padding: 28px 0 8px;
}
.vr-stay-suite-widget-item {
scroll-margin-top: 92px;
}
.vr-gallery-layout-a-suite__title {
font-size: clamp(42px, 12vw, 72px);
}
.vr-gallery-layout-a-suite__text {
font-size: 16px;
line-height: 1.72;
}
.vr-gallery-layout-a-suite__photo img,
.vr-gallery-layout-a-suite__grid .col-12 .vr-gallery-layout-a-suite__photo img {
min-height: 360px;
}
}
@media (max-width: 575.98px) {
.vr-gallery-layout-a-suite__photo img,
.vr-gallery-layout-a-suite__grid .col-12 .vr-gallery-layout-a-suite__photo img {
min-height: 280px;
}
}
/* ==================== WI records rooms/suites from all_records part_of=3 ==================== */
.vr-records-layout-a {
position: relative;
padding: 92px 0 110px;
background: transparent;
overflow: hidden;
}
.vr-records-layout-a--stay {
padding-top: 42px;
}
.vr-records-layout-a--home {
padding-top: 110px;
}
.vr-records-overline {
display: block;
margin-bottom: 16px;
color: var(--base-color, #b88a58);
font-size: 15px;
line-height: 1.1;
letter-spacing: .18em;
text-transform: uppercase;
}
.vr-records-section-title {
margin: 0;
color: #1d1814;
font-size: clamp(58px, 8vw, 118px);
line-height: .88;
font-weight: 500;
letter-spacing: -.04em;
}
.vr-records-anchor-nav {
margin: 0 auto 72px;
}
.vr-records-list {
display: block;
}
.vr-records-item {
position: relative;
padding: 78px 0;
scroll-margin-top: 125px;
}
.vr-records-item + .vr-records-item {
border-top: 1px solid rgba(29, 24, 20, .10);
}
.vr-records-photo {
position: relative;
display: block;
margin: 0;
overflow: hidden;
border-radius: 6px;
background: rgba(29, 24, 20, .05);
}
.vr-records-photo img {
display: block;
width: 100%;
height: auto;
border-radius: 6px;
}
.vr-records-photo--main img {
aspect-ratio: 11 / 7.8;
object-fit: cover;
}
.vr-records-photo--secondary {
width: 42%;
margin-top: -120px;
margin-left: auto;
z-index: 3;
box-shadow: 0 26px 70px rgba(0, 0, 0, .14);
}
.vr-records-item--reverse .vr-records-photo--secondary {
margin-right: auto;
margin-left: 0;
}
.vr-records-copy {
padding: 0 0 0 70px;
}
.vr-records-item--reverse .vr-records-copy {
padding-right: 70px;
padding-left: 0;
}
.vr-records-subtitle {
display: block;
margin-bottom: 18px;
color: var(--base-color, #b88a58);
font-size: 15px;
line-height: 1.1;
letter-spacing: .18em;
text-transform: uppercase;
}
.vr-records-title {
margin: 0 0 26px;
color: #1d1814;
font-size: clamp(52px, 6.5vw, 92px);
line-height: .88;
font-weight: 500;
letter-spacing: -.045em;
}
.vr-records-summary,
.vr-records-content {
max-width: 520px;
color: rgba(29, 24, 20, .78);
font-size: 19px;
line-height: 1.72;
}
.vr-records-summary {
margin-bottom: 18px;
}
.vr-records-summary p:last-child,
.vr-records-content p:last-child {
margin-bottom: 0;
}
.vr-records-button {
margin-top: 34px;
}
@media (max-width: 991.98px) {
.vr-records-layout-a,
.vr-records-layout-a--home,
.vr-records-layout-a--stay {
padding: 62px 0 72px;
}
.vr-records-anchor-nav {
margin-bottom: 42px;
}
.vr-records-item {
padding: 48px 0;
scroll-margin-top: 95px;
}
.vr-records-copy,
.vr-records-item--reverse .vr-records-copy {
padding: 34px 0 0;
}
.vr-records-photo--secondary {
width: 52%;
margin-top: -70px;
}
.vr-records-title {
font-size: clamp(44px, 14vw, 70px);
}
.vr-records-summary,
.vr-records-content {
font-size: 17px;
line-height: 1.68;
}
}
@media (max-width: 575.98px) {
.vr-records-anchor-nav {
gap: 10px;
}
.vr-records-photo--secondary {
display: none;
}
}
/* ==================== Suite records carousel + BCM blocks order repair ==================== */
.vr-records-suite-gallery {
position: relative;
width: 100%;
}
.vr-records-suite-carousel {
position: relative;
overflow: hidden;
width: 100%;
border-radius: 6px;
background: rgba(29, 24, 20, .05);
}
.vr-records-suite-carousel .swiper-wrapper,
.vr-records-suite-carousel .swiper-slide {
min-height: 100%;
}
.vr-records-photo--carousel {
width: 100%;
height: 100%;
margin: 0;
border-radius: 6px;
}
.vr-records-photo--carousel img {
display: block;
width: 100%;
min-height: clamp(520px, 52vw, 760px);
aspect-ratio: 1200 / 820;
object-fit: cover;
border-radius: 6px;
}
.vr-records-photo-caption {
position: absolute;
right: 22px;
bottom: 22px;
left: 22px;
z-index: 5;
max-width: 520px;
padding: 16px 20px 14px;
background: rgba(20, 17, 14, .68);
color: rgba(255, 255, 255, .86);
backdrop-filter: blur(8px);
}
.vr-records-photo-caption strong {
display: block;
margin-bottom: 4px;
color: #fff;
font-family: var(--alt-font, inherit);
font-size: 20px;
line-height: 1.05;
letter-spacing: .06em;
text-transform: uppercase;
}
.vr-records-photo-caption span {
display: block;
font-size: 15px;
line-height: 1.55;
}
.vr-records-suite-carousel-nav {
position: absolute;
top: 50%;
z-index: 12;
display: inline-flex;
align-items: center;
justify-content: center;
width: 46px;
height: 46px;
padding: 0;
border: 1px solid rgba(255, 255, 255, .75);
border-radius: 50%;
background: rgba(20, 17, 14, .34);
cursor: pointer;
transform: translateY(-50%);
transition: background-color 220ms ease, border-color 220ms ease;
}
.vr-records-suite-carousel-nav:hover,
.vr-records-suite-carousel-nav:focus {
border-color: #fff;
background: rgba(20, 17, 14, .72);
}
.vr-records-suite-carousel-nav::before {
content: '';
display: block;
width: 11px;
height: 11px;
border-top: 2px solid #fff;
border-right: 2px solid #fff;
}
.vr-records-suite-carousel-nav--prev {
left: 22px;
}
.vr-records-suite-carousel-nav--prev::before {
transform: rotate(-135deg);
margin-left: 4px;
}
.vr-records-suite-carousel-nav--next {
right: 22px;
}
.vr-records-suite-carousel-nav--next::before {
transform: rotate(45deg);
margin-right: 4px;
}
.vr-records-suite-carousel-pagination {
position: absolute;
right: 0;
bottom: 18px;
left: 0;
z-index: 10;
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
pointer-events: auto;
}
.vr-records-suite-carousel-pagination .swiper-pagination-bullet {
width: 8px;
height: 8px;
margin: 0 !important;
border: 1px solid rgba(255, 255, 255, .85);
background: transparent;
opacity: 1;
}
.vr-records-suite-carousel-pagination .swiper-pagination-bullet-active {
background: #fff;
}
/* keep suite carousel stable; do not apply the Wood scroll transform to carousel slides */
.vr-records-suite-carousel,
.vr-records-suite-carousel .vr-records-photo,
.vr-records-suite-carousel .swiper-slide {
transform: none !important;
}
@media (max-width: 991.98px) {
.vr-records-photo--carousel img {
min-height: 430px;
}
.vr-records-photo-caption {
right: 16px;
bottom: 16px;
left: 16px;
}
}
@media (max-width: 575.98px) {
.vr-records-photo--carousel img {
min-height: 320px;
}
.vr-records-suite-carousel-nav {
width: 38px;
height: 38px;
}
.vr-records-suite-carousel-nav--prev {
left: 12px;
}
.vr-records-suite-carousel-nav--next {
right: 12px;
}
.vr-records-photo-caption {
position: relative;
right: auto;
bottom: auto;
left: auto;
max-width: 100%;
border-radius: 0 0 6px 6px;
background: rgba(20, 17, 14, .88);
}
}
/* ==================== Stay anchor buttons square corners ==================== */
.vr-stay-room-anchor-btn {
border-radius: 0 !important;
}
/* ==================== BCM order, suite carousel fallback, text button shape fix ==================== */
/* BCM/InteractiveTools drag order is visual DESC. This marker helps diagnostics confirm the active CSS. */
.vr-records-layout-a {
--vr-bcm-order-direction: desc;
background-image: url(/uploads/media/bg2.jpg);
}
/* Suite carousel must work even if the theme Swiper initializer misses this custom widget. */
.vr-records-suite-carousel.vr-suite-carousel-fallback {
overflow: hidden !important;
}
.vr-records-suite-carousel.vr-suite-carousel-fallback .swiper-wrapper {
display: flex !important;
flex-wrap: nowrap !important;
width: 100% !important;
transition: transform 520ms ease !important;
will-change: transform !important;
}
.vr-records-suite-carousel.vr-suite-carousel-fallback .swiper-slide {
display: block !important;
flex: 0 0 100% !important;
width: 100% !important;
min-width: 100% !important;
opacity: 1 !important;
visibility: visible !important;
}
.vr-records-suite-carousel-bullet {
display: block !important;
width: 8px !important;
height: 8px !important;
padding: 0 !important;
margin: 0 !important;
border: 1px solid rgba(255,255,255,.9) !important;
border-radius: 50% !important;
background: transparent !important;
cursor: pointer !important;
}
.vr-records-suite-carousel-bullet.is-active {
background: #fff !important;
}
/* Anchor buttons under page-title: square, clean, same sharp language as the site's BOOK link. */
.vr-stay-anchor-nav .vr-stay-room-anchor-btn,
.vr-records-anchor-nav .vr-stay-room-anchor-btn {
min-height: 44px !important;
padding: 0 25px !important;
border: 1px solid rgba(29,24,20,.85) !important;
border-radius: 0 !important;
background: transparent !important;
color: #1d1814 !important;
font-family: var(--alt-font, inherit) !important;
font-size: 15px !important;
font-weight: 500 !important;
line-height: 1 !important;
letter-spacing: .10em !important;
text-transform: uppercase !important;
text-decoration: none !important;
box-shadow: none !important;
transform: none !important;
}
.vr-stay-anchor-nav .vr-stay-room-anchor-btn:hover,
.vr-stay-anchor-nav .vr-stay-room-anchor-btn:focus,
.vr-records-anchor-nav .vr-stay-room-anchor-btn:hover,
.vr-records-anchor-nav .vr-stay-room-anchor-btn:focus {
background: #1d1814 !important;
border-color: #1d1814 !important;
color: #fff !important;
transform: none !important;
}
/* Only buttons that follow content/text. Do not touch the central/header menu. */
.villarossa-content .vr-paragraph-outline-btn,
.villarossa-layout-b-wood-copy .vr-paragraph-outline-btn,
.vr-records-copy .vr-paragraph-outline-btn,
.vr-gallery-layout-a-suite__text .vr-paragraph-outline-btn,
.villarossa-gallery-layout-c__button-wrap .btn,
.vr-stay-room-copy .vr-stay-room-more-btn {
min-height: 44px !important;
padding: 0 25px !important;
border-radius: 0 !important;
font-family: var(--alt-font, inherit) !important;
font-size: 15px !important;
font-weight: 500 !important;
line-height: 1 !important;
letter-spacing: .10em !important;
text-transform: uppercase !important;
box-shadow: none !important;
}
@media (max-width: 575.98px) {
.vr-stay-anchor-nav .vr-stay-room-anchor-btn,
.vr-records-anchor-nav .vr-stay-room-anchor-btn,
.villarossa-content .vr-paragraph-outline-btn,
.villarossa-layout-b-wood-copy .vr-paragraph-outline-btn,
.vr-records-copy .vr-paragraph-outline-btn,
.vr-gallery-layout-a-suite__text .vr-paragraph-outline-btn,
.villarossa-gallery-layout-c__button-wrap .btn,
.vr-stay-room-copy .vr-stay-room-more-btn {
min-height: 40px !important;
padding-right: 18px !important;
padding-left: 18px !important;
font-size: 14px !important;
letter-spacing: .08em !important;
}
}
/* ==================== STAY native gallery safe fix 20260905-stay-native-gallery-safe ==================== */
/* Home/hero slider text safety: do not allow later suite/gallery CSS or missed animations to hide slider copy. */
.swiper-light-pagination .swiper-slide .position-relative,
.swiper-light-pagination .swiper-slide .position-relative *,
.swiper-light-pagination .swiper-slide [data-anime],
.swiper-light-pagination .swiper-slide h1,
.swiper-light-pagination .swiper-slide span,
.swiper-light-pagination .swiper-slide a {
opacity: 1 !important;
visibility: visible !important;
}
.swiper-light-pagination .swiper-slide h1,
.swiper-light-pagination .swiper-slide span {
transform: none !important;
}
/* Top room anchors: flat text bar like the reference; not the central/header menu. */
.vr-stay-anchor-nav,
.vr-records-anchor-nav {
display: flex !important;
align-items: center !important;
justify-content: center !important;
flex-wrap: wrap !important;
gap: clamp(24px, 4vw, 58px) !important;
margin: 0 auto 70px !important;
padding: 28px 15px !important;
background: #f6f0e4 !important;
}
.vr-stay-anchor-nav .vr-stay-room-anchor-btn,
.vr-records-anchor-nav .vr-stay-room-anchor-btn {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
min-height: 0 !important;
height: auto !important;
padding: 0 !important;
border: 0 !important;
border-radius: 0 !important;
background: transparent !important;
color: rgba(29,24,20,.70) !important;
font-family: var(--alt-font, inherit) !important;
font-size: 16px !important;
font-weight: 500 !important;
line-height: 1 !important;
letter-spacing: .10em !important;
text-transform: uppercase !important;
text-decoration: none !important;
box-shadow: none !important;
transform: none !important;
}
.vr-stay-anchor-nav .vr-stay-room-anchor-btn:hover,
.vr-stay-anchor-nav .vr-stay-room-anchor-btn:focus,
.vr-records-anchor-nav .vr-stay-room-anchor-btn:hover,
.vr-records-anchor-nav .vr-stay-room-anchor-btn:focus {
background: transparent !important;
color: #1d1814 !important;
transform: none !important;
}
/* Suite gallery: native carousel only; no Swiper init, no theme conflict. */
.vr-records-suite-gallery--native {
position: relative !important;
width: 100% !important;
}
.vr-records-suite-carousel--native {
position: relative !important;
overflow: hidden !important;
width: 100% !important;
border-radius: 0 !important;
background: transparent !important;
}
.vr-records-suite-gallery--native .vr-records-suite-track {
display: flex !important;
flex-wrap: nowrap !important;
width: 100% !important;
height: 100% !important;
transform: translate3d(0,0,0);
transition: transform 560ms ease !important;
will-change: transform !important;
}
.vr-records-suite-gallery--native .vr-records-suite-slide {
display: block !important;
flex: 0 0 100% !important;
width: 100% !important;
min-width: 100% !important;
height: auto !important;
margin: 0 !important;
opacity: 1 !important;
visibility: visible !important;
overflow: hidden !important;
border-radius: 0 !important;
transform: none !important;
}
.vr-records-suite-gallery--native .vr-records-suite-slide img {
display: block !important;
width: 100% !important;
height: clamp(350px, 31vw, 470px) !important;
min-height: 0 !important;
aspect-ratio: auto !important;
object-fit: cover !important;
border-radius: 0 !important;
opacity: 1 !important;
visibility: visible !important;
transform: none !important;
}
.vr-records-suite-gallery--native .vr-records-suite-carousel-pagination {
position: static !important;
inset: auto !important;
z-index: 2 !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
gap: 11px !important;
width: 100% !important;
margin: 36px 0 0 !important;
padding: 0 !important;
background: transparent !important;
pointer-events: auto !important;
}
.vr-records-suite-gallery--native .vr-records-suite-carousel-bullet {
display: block !important;
width: 30px !important;
height: 4px !important;
min-width: 30px !important;
min-height: 4px !important;
padding: 0 !important;
margin: 0 !important;
border: 0 !important;
border-radius: 0 !important;
background: rgba(29,24,20,.22) !important;
box-shadow: none !important;
cursor: pointer !important;
opacity: 1 !important;
visibility: visible !important;
}
.vr-records-suite-gallery--native .vr-records-suite-carousel-bullet.is-active,
.vr-records-suite-gallery--native .vr-records-suite-carousel-bullet[aria-current="true"] {
background: #1d1814 !important;
}
/* Content buttons only: BOOK-like square outline. Header/main menu is untouched. */
.villarossa-content .vr-paragraph-outline-btn,
.villarossa-layout-b-wood-copy .vr-paragraph-outline-btn,
.vr-records-copy .vr-paragraph-outline-btn,
.vr-gallery-layout-a-suite__text .vr-paragraph-outline-btn,
.villarossa-gallery-layout-c__button-wrap .btn,
.vr-stay-room-copy .vr-stay-room-more-btn {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
min-width: 70px !important;
min-height: 70px !important;
padding: 0 18px !important;
border: 2px solid #1d1814 !important;
border-radius: 0 !important;
background: transparent !important;
color: #1d1814 !important;
font-family: var(--alt-font, inherit) !important;
font-size: 16px !important;
font-weight: 500 !important;
line-height: 1 !important;
letter-spacing: .14em !important;
text-transform: uppercase !important;
text-decoration: none !important;
box-shadow: none !important;
transform: none !important;
}
.villarossa-content .vr-paragraph-outline-btn:hover,
.villarossa-layout-b-wood-copy .vr-paragraph-outline-btn:hover,
.vr-records-copy .vr-paragraph-outline-btn:hover,
.vr-gallery-layout-a-suite__text .vr-paragraph-outline-btn:hover,
.villarossa-gallery-layout-c__button-wrap .btn:hover,
.vr-stay-room-copy .vr-stay-room-more-btn:hover {
background: #1d1814 !important;
color: #fff !important;
transform: none !important;
}
@media (max-width: 991.98px) {
.vr-records-suite-gallery--native .vr-records-suite-slide img {
height: 420px !important;
}
}
@media (max-width: 575.98px) {
.vr-stay-anchor-nav,
.vr-records-anchor-nav {
gap: 18px !important;
padding-top: 22px !important;
padding-bottom: 22px !important;
margin-bottom: 45px !important;
}
.vr-records-suite-gallery--native .vr-records-suite-slide img {
height: 315px !important;
}
.vr-records-suite-gallery--native .vr-records-suite-carousel-bullet {
width: 24px !important;
min-width: 24px !important;
}
}
/* END STAY native gallery safe fix ==================== */
/* ==================== Villa Rossa central extracted on-page CSS START ==================== */
/* ==================== Extracted CSS from inc/wi-gallery.php ==================== */
/* Villa Rossa gallery dynamic captions from BCM upload metadata */
.vr-gallery-photo-box,
.villarossa-stories .front,
.villarossa-gallery-layout-c__photo {
position: relative;
}
.vr-gallery-photo-caption {
display: block;
margin-top: 14px;
color: rgba(29, 24, 20, .78);
font-size: 15px;
line-height: 1.55;
}
.vr-gallery-photo-caption strong {
display: block;
margin-bottom: 4px;
color: #1d1814;
font-family: var(--alt-font, inherit);
font-size: 20px;
line-height: 1.05;
letter-spacing: .06em;
text-transform: uppercase;
}
.vr-gallery-photo-caption--overlay {
position: absolute;
right: 0;
bottom: 0;
left: 0;
z-index: 5;
margin-top: 0;
padding: 16px 18px 14px;
background: linear-gradient(to top, rgba(15, 13, 11, .78), rgba(15, 13, 11, 0));
color: rgba(255,255,255,.86);
pointer-events: none;
}
.vr-gallery-photo-caption--overlay strong {
color: #fff;
}
/* ==================== Extracted CSS from inc/wi-gallery.php ==================== */
.villarossa-stories {
position: relative;
min-height: 900px;
overflow: hidden;
background-position: center;
}
.villarossa-stories__canvas {
position: relative;
width: 100%;
max-width: 1140px;
min-height: 900px;
margin: 0 auto;
}
.villarossa-stories__subtitle {
position: absolute;
top: 18px;
left: 50%;
z-index: 6;
width: 100%;
transform: translateX(-50%);
text-align: center;
}
.villarossa-stories__subtitle span {
display: inline-block;
font-size: 52px;
line-height: 1;
font-weight: 600;
color: #111;
}
.villarossa-stories__heading {
position: absolute;
top: 70px;
left: 50%;
z-index: 5;
width: 72%;
transform: translateX(-50%);
text-align: center;
pointer-events: none;
}
.villarossa-stories__heading img {
display: block;
width: 100%;
height: auto;
}
.villarossa-stories__heading h2 {
margin: 0;
font-size: 128px;
line-height: .9;
font-weight: 500;
}
.villarossa-stories__photo {
position: absolute;
z-index: 2;
width: 264px;
}
.villarossa-stories__photo .rm-rotate-box,
.villarossa-stories__photo .flipper,
.villarossa-stories__photo .thumb-wrap,
.villarossa-stories__photo .front,
.villarossa-stories__photo .back,
.villarossa-stories__center-stack .rm-rotate-box,
.villarossa-stories__center-stack .flipper,
.villarossa-stories__center-stack .thumb-wrap,
.villarossa-stories__center-stack .front,
.villarossa-stories__center-stack .back {
width: 100%;
height: 353px;
}
.villarossa-stories__photo .front,
.villarossa-stories__center-stack .front {
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
.villarossa-stories__photo--left {
top: 256px;
left: 0;
}
.villarossa-stories__photo--right {
top: 194px;
right: 0;
}
.villarossa-stories__center-stack {
position: absolute;
top: 408px;
left: 50%;
z-index: 3;
width: 264px;
transform: translateX(-50%);
text-align: center;
}
.villarossa-stories__button {
display: inline-flex;
align-items: center;
justify-content: center;
width: auto;
max-width: max-content;
margin-top: 34px;
padding: 11px 24px 10px;
font-size: 14px;
line-height: 1.1;
letter-spacing: .08em;
text-align: center;
text-transform: uppercase;
white-space: nowrap;
}
/* Instagram / our stories photos: static images, no flip on hover */
.villarossa-stories .rotate-box-style-01 .rm-rotate-box,
.villarossa-stories .rotate-box-style-01 .flipper,
.villarossa-stories .rotate-box-style-01 .thumb-wrap {
transform: none !important;
transition: none !important;
transform-style: flat !important;
perspective: none !important;
}
.villarossa-stories .rotate-box-style-01 .front {
transform: none !important;
transition: none !important;
backface-visibility: visible !important;
-webkit-backface-visibility: visible !important;
opacity: 1 !important;
z-index: 2 !important;
}
.villarossa-stories .rotate-box-style-01 .back {
display: none !important;
opacity: 0 !important;
visibility: hidden !important;
pointer-events: none !important;
}
.villarossa-stories .rotate-box-style-01:hover .flipper,
.villarossa-stories .rotate-box-style-01:hover .thumb-wrap,
.villarossa-stories .rm-rotate-box:hover .flipper,
.villarossa-stories .rm-rotate-box:hover .thumb-wrap {
transform: none !important;
}
@media (max-width: 1199px) {
.villarossa-stories__canvas {
max-width: 930px;
}
.villarossa-stories__photo,
.villarossa-stories__center-stack {
width: 235px;
}
.villarossa-stories__photo .rm-rotate-box,
.villarossa-stories__photo .flipper,
.villarossa-stories__photo .thumb-wrap,
.villarossa-stories__photo .front,
.villarossa-stories__photo .back,
.villarossa-stories__center-stack .rm-rotate-box,
.villarossa-stories__center-stack .flipper,
.villarossa-stories__center-stack .thumb-wrap,
.villarossa-stories__center-stack .front,
.villarossa-stories__center-stack .back {
height: 315px;
}
}
@media (max-width: 991px) {
.villarossa-stories,
.villarossa-stories__canvas {
min-height: auto;
}
.villarossa-stories__canvas {
display: flex;
flex-direction: column;
align-items: center;
padding: 35px 15px 70px;
}
.villarossa-stories__subtitle,
.villarossa-stories__heading,
.villarossa-stories__photo,
.villarossa-stories__center-stack {
position: relative;
top: auto;
right: auto;
bottom: auto;
left: auto;
width: 100%;
max-width: 520px;
transform: none;
}
.villarossa-stories__subtitle {
order: 1;
margin-bottom: 20px;
}
.villarossa-stories__subtitle span {
font-size: 38px;
}
.villarossa-stories__heading {
order: 2;
margin-bottom: 35px;
}
.villarossa-stories__photo--right {
order: 3;
align-self: flex-end;
max-width: 55%;
margin-right: 4%;
}
.villarossa-stories__photo--left {
order: 4;
align-self: flex-start;
max-width: 55%;
margin-top: -90px;
margin-left: 4%;
}
.villarossa-stories__center-stack {
order: 5;
max-width: 55%;
margin-top: -20px;
}
.villarossa-stories__photo .rm-rotate-box,
.villarossa-stories__photo .flipper,
.villarossa-stories__photo .thumb-wrap,
.villarossa-stories__photo .front,
.villarossa-stories__photo .back,
.villarossa-stories__center-stack .rm-rotate-box,
.villarossa-stories__center-stack .flipper,
.villarossa-stories__center-stack .thumb-wrap,
.villarossa-stories__center-stack .front,
.villarossa-stories__center-stack .back {
height: 320px;
}
}
@media (max-width: 575px) {
.villarossa-stories__subtitle span {
font-size: 29px;
}
.villarossa-stories__heading h2 {
font-size: 64px;
}
.villarossa-stories__photo--right,
.villarossa-stories__photo--left,
.villarossa-stories__center-stack {
max-width: 72%;
}
.villarossa-stories__photo--left {
margin-top: -45px;
}
.villarossa-stories__button {
font-size: 13px;
letter-spacing: .08em;
padding: 10px 18px 9px;
}
}
/* ==================== Extracted CSS from inc/wi-gallery.php ==================== */
/*
* wi-gallery.php Layout C - full width
* Photo appearance copied from paragraph.php Layout A.
*/
.villarossa-gallery-layout-c {
position: relative;
overflow: hidden;
background-position: center;
}
.villarossa-gallery-layout-c__heading {
margin-bottom: 55px;
}
.villarossa-gallery-layout-c__subtitle {
display: block;
margin-bottom: 15px;
font-size: 15px;
font-weight: 500;
letter-spacing: 2px;
text-transform: uppercase;
}
.villarossa-gallery-layout-c__title {
margin: 0;
font-size: clamp(54px, 6.5vw, 110px);
line-height: .9;
letter-spacing: -1px;
text-align: center;
}
.villarossa-gallery-layout-c__photos {
position: relative;
min-height: 920px;
}
.villarossa-gallery-layout-c__overlay {
position: absolute;
top: -80px;
left: 300px;
width: 100%;
z-index: 3;
text-align: center;
pointer-events: none;
}
.villarossa-gallery-layout-c__overlay img {
width: 100%;
}
.villarossa-gallery-layout-c__photo.vr-wood-photo-motion {
position: relative;
overflow: hidden;
width: 60%;
margin-bottom: 0;
border-radius: 6px;
}
.villarossa-gallery-layout-c__photo.vr-wood-photo-motion img {
display: block;
width: 100%;
border-radius: 6px;
}
.villarossa-gallery-layout-c__photo.vr-wood-photo-motion--one,
.villarossa-gallery-layout-c__photo.vr-wood-photo-motion--three {
float: left;
z-index: 2;
}
.villarossa-gallery-layout-c__photo.vr-wood-photo-motion--two,
.villarossa-gallery-layout-c__photo.vr-wood-photo-motion--four {
float: right;
z-index: 1;
}
.villarossa-gallery-layout-c__photo.vr-wood-photo-motion--two {
margin-top: -80px;
}
.villarossa-gallery-layout-c__photo.vr-wood-photo-motion--three {
margin-top: -150px;
}
.villarossa-gallery-layout-c__photo.vr-wood-photo-motion--four {
margin-top: -220px;
}
.villarossa-gallery-layout-c__button-wrap {
margin-top: -90px;
text-align: center;
position: relative;
z-index: 5;
}
@media (max-width: 1199px) {
.villarossa-gallery-layout-c__photos {
min-height: 820px;
}
}
@media (max-width: 991px) {
.villarossa-gallery-layout-c__photos {
min-height: auto;
}
.villarossa-gallery-layout-c__heading {
margin-bottom: 35px;
}
.villarossa-gallery-layout-c__photo.vr-wood-photo-motion {
width: 90%;
}
.villarossa-gallery-layout-c__overlay {
top: -35px;
left: 0;
}
.villarossa-gallery-layout-c__photo.vr-wood-photo-motion--two {
margin-top: -60px;
}
.villarossa-gallery-layout-c__photo.vr-wood-photo-motion--three {
margin-top: -95px;
}
.villarossa-gallery-layout-c__photo.vr-wood-photo-motion--four {
margin-top: -135px;
}
.villarossa-gallery-layout-c__button-wrap {
margin-top: 35px;
}
}
@media (max-width: 575px) {
.villarossa-gallery-layout-c__title {
font-size: 48px;
}
.villarossa-gallery-layout-c__photo.vr-wood-photo-motion {
width: 100%;
float: none;
margin-top: 0;
margin-bottom: 25px;
}
}
/* ==================== Extracted CSS from inc/header.php ==================== */
/*
* Clean single header.
* Layout: far-left 3-line menu | gap | 3 items - logo - 3 items | gap | book far-right.
*/
html {
overflow-y: scroll;
scrollbar-gutter: stable;
}
body.vr-menu-open {
padding-right: 0 !important;
}
.vr-header-clean {
position: absolute !important;
top: 0 !important;
left: 0 !important;
right: 0 !important;
width: 100% !important;
background: transparent !important;
z-index: 1000000 !important;
}
.vr-header-clean .vr-navbar-clean,
.vr-header-clean .vr-navbar-clean.glass-effect,
.vr-header-clean .vr-navbar-clean.glass-effect:before,
.vr-header-clean .vr-navbar-clean.glass-effect:after {
background: transparent !important;
background-color: transparent !important;
box-shadow: none !important;
-webkit-backdrop-filter: none !important;
backdrop-filter: none !important;
}
.vr-navbar-clean {
position: relative !important;
min-height: 112px !important;
z-index: 1000010 !important;
}
.vr-navbar-inner {
position: relative !important;
min-height: 112px !important;
width: 100% !important;
padding-left: clamp(34px, 4vw, 72px) !important;
padding-right: clamp(34px, 4vw, 72px) !important;
}
.vr-menu-trigger {
position: absolute !important;
left: clamp(34px, 4vw, 72px) !important;
top: 50% !important;
transform: translateY(-50%) !important;
z-index: 1000040 !important;
display: inline-flex !important;
align-items: center !important;
gap: 10px !important;
width: 92px !important;
height: 44px !important;
padding: 0 !important;
margin: 0 !important;
border: 0 !important;
background: transparent !important;
color: #fff !important;
font-family: var(--alt-font) !important;
font-size: 14px !important;
font-weight: 500 !important;
line-height: 1 !important;
letter-spacing: .06em !important;
text-transform: uppercase !important;
white-space: nowrap !important;
cursor: pointer !important;
}
.vr-menu-trigger:hover {
opacity: .6;
}
body.vr-menu-open .vr-menu-trigger {
color: #fff !important;
opacity: 1 !important;
}
.vr-menu-trigger-lines {
position: relative !important;
display: block !important;
flex: 0 0 24px !important;
width: 24px !important;
height: 18px !important;
}
.vr-menu-trigger-lines span {
position: absolute !important;
left: 0 !important;
width: 24px !important;
height: 1px !important;
background: currentColor !important;
transform: none !important;
opacity: 1 !important;
}
.vr-menu-trigger-lines span:nth-child(1) { top: 3px !important; }
.vr-menu-trigger-lines span:nth-child(2) { top: 9px !important; }
.vr-menu-trigger-lines span:nth-child(3) { top: 15px !important; }
.vr-menu-trigger-text {
display: inline-flex !important;
align-items: center !important;
height: 44px !important;
}
.vr-header-logo {
position: absolute !important;
left: 50% !important;
top: 50% !important;
transform: translate(-50%, -50%) !important;
z-index: 1000030 !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
margin: 0 !important;
padding: 0 !important;
}
.vr-header-logo img {
width: auto !important;
max-height: 86px !important;
display: block !important;
margin: 0 !important;
padding: 0 !important;
}
.vr-header-logo img.alt-logo,
.vr-header-logo img.mobile-logo {
display: none !important;
}
body.vr-menu-open .vr-header-logo img.default-logo {
display: block !important;
opacity: 1 !important;
visibility: visible !important;
}
body.vr-menu-open .vr-header-logo img.alt-logo,
body.vr-menu-open .vr-header-logo img.mobile-logo {
display: none !important;
}
.vr-center-menu {
position: absolute !important;
top: 50% !important;
transform: translateY(-50%) !important;
z-index: 1000020 !important;
display: flex !important;
align-items: center !important;
min-width: 0 !important;
}
.vr-center-menu-left {
left: clamp(155px, 13vw, 245px) !important;
right: calc(50% + 112px) !important;
justify-content: flex-end !important;
}
.vr-center-menu-right {
left: calc(50% + 112px) !important;
right: clamp(145px, 12vw, 220px) !important;
justify-content: flex-start !important;
}
.vr-center-menu .navbar-nav {
display: flex !important;
flex-direction: row !important;
align-items: center !important;
flex-wrap: nowrap !important;
gap: clamp(18px, 2vw, 34px) !important;
margin: 0 !important;
padding: 0 !important;
}
.vr-center-menu .nav-item {
display: flex !important;
align-items: center !important;
position: relative !important;
flex: 0 0 auto !important;
margin: 0 !important;
padding: 0 !important;
white-space: nowrap !important;
}
.vr-center-menu .nav-link,
.vr-book-link {
display: inline-flex !important;
align-items: center !important;
height: 44px !important;
min-height: 44px !important;
padding: 0 !important;
margin: 0 !important;
color: #ffffff !important;
font-family: var(--alt-font) !important;
font-size: 14px !important;
font-weight: 500 !important;
line-height: 1 !important;
letter-spacing: .06em !important;
text-transform: uppercase !important;
text-decoration: none !important;
white-space: nowrap !important;
transform: none !important;
transition: opacity .25s ease, color .25s ease !important;
}
.vr-center-menu .nav-link:hover,
.vr-book-link:hover {
color: #111 !important;
opacity: .6 !important;
}
.vr-header-clean .dropdown-toggle {
color: #111 !important;
margin-left: 6px !important;
}
body.vr-menu-open .vr-center-menu .nav-link,
body.vr-menu-open .vr-book-link,
body.vr-menu-open .vr-header-clean .dropdown-toggle {
color: #fff !important;
}
.vr-book-holder {
position: absolute !important;
top: 50% !important;
right: clamp(34px, 4vw, 72px) !important;
transform: translateY(-50%) !important;
z-index: 1000040 !important;
display: flex !important;
align-items: center !important;
justify-content: flex-end !important;
min-width: 74px !important;
white-space: nowrap !important;
}
.vr-book-link {
font-weight: 600 !important;
}
.vr-fullscreen-menu {
position: fixed !important;
inset: 0 !important;
width: 100vw !important;
height: 100vh !important;
z-index: 1000005 !important;
background: rgba(22, 27, 26, .82) !important;
color: #fff !important;
opacity: 0 !important;
visibility: hidden !important;
pointer-events: none !important;
transition: opacity 450ms ease, visibility 0s linear 450ms !important;
}
body.vr-menu-open .vr-fullscreen-menu {
opacity: 1 !important;
visibility: visible !important;
pointer-events: auto !important;
transition: opacity 450ms ease, visibility 0s linear 0s !important;
}
.vr-fullscreen-menu .container-fluid {
height: 100% !important;
padding: 135px 7vw 70px !important;
}
.vr-fullscreen-left,
.vr-fullscreen-right {
opacity: 0;
transition: opacity 450ms ease;
}
body.vr-menu-open .vr-fullscreen-left,
body.vr-menu-open .vr-fullscreen-right {
opacity: 1;
}
.vr-fullscreen-menu-list,
.vr-fullscreen-submenu {
margin: 0 !important;
padding: 0 !important;
list-style: none !important;
}
.vr-fullscreen-menu-row {
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
}
.vr-fullscreen-menu-link {
display: inline-block !important;
padding: 8px 0 !important;
color: rgba(255, 255, 255, .70) !important;
font-family: inherit !important;
font-size: clamp(21px, 2.15vw, 35px) !important;
font-weight: 700 !important;
line-height: 1.14 !important;
letter-spacing: .015em !important;
text-transform: uppercase !important;
text-decoration: none !important;
}
.vr-fullscreen-menu-link:hover,
.vr-fullscreen-menu-item.active > .vr-fullscreen-menu-row > .vr-fullscreen-menu-link {
color: #fff !important;
}
.vr-fullscreen-sub-toggle {
width: 34px !important;
height: 34px !important;
padding: 0 !important;
border: 0 !important;
background: transparent !important;
color: rgba(255, 255, 255, .70) !important;
}
.vr-fullscreen-sub-toggle:not(.collapsed) {
transform: rotate(45deg);
}
.vr-fullscreen-submenu {
padding: 0 0 12px 20px !important;
}
.vr-fullscreen-submenu a {
color: rgba(255, 255, 255, .70) !important;
font-size: 15px !important;
text-decoration: none !important;
}
.vr-fullscreen-right {
color: #fff !important;
font-family: inherit !important;
font-size: 17px !important;
line-height: 1.55 !important;
}
.vr-fullscreen-contact {
display: flex !important;
flex-direction: column !important;
align-items: flex-start !important;
gap: 7px !important;
margin-bottom: 30px !important;
}
.vr-fullscreen-contact a,
.vr-fullscreen-map a {
display: inline-block !important;
color: rgba(255, 255, 255, .82) !important;
font-size: 17px !important;
font-weight: 700 !important;
line-height: 1.35 !important;
text-decoration: underline !important;
text-underline-offset: 4px !important;
}
.vr-fullscreen-address {
margin: 0 0 18px !important;
color: rgba(255, 255, 255, .92) !important;
font-size: 18px !important;
font-weight: 600 !important;
line-height: 1.65 !important;
}
.vr-fullscreen-socials,
.vr-fullscreen-languages {
display: flex !important;
align-items: center !important;
gap: 18px !important;
margin-top: 28px !important;
}
.vr-fullscreen-socials a {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
width: 52px !important;
height: 52px !important;
border-radius: 50% !important;
background: rgba(255, 255, 255, .70) !important;
color: #1b1f1d !important;
font-size: 22px !important;
text-decoration: none !important;
}
.vr-fullscreen-languages a {
display: inline-flex !important;
align-items: center !important;
gap: 6px !important;
color: rgba(255,255,255,.78) !important;
font-size: 13px !important;
text-decoration: none !important;
}
.vr-fullscreen-languages img {
max-width: 22px !important;
max-height: 15px !important;
}
.vr-mobile-toggler {
position: absolute !important;
top: 50% !important;
right: 24px !important;
transform: translateY(-50%) !important;
z-index: 1000045 !important;
margin: 0 !important;
}
.vr-mobile-nav {
position: absolute !important;
top: 88px !important;
left: 0 !important;
right: 0 !important;
width: 100% !important;
background: rgba(255,255,255,.96) !important;
padding: 20px 28px 28px !important;
z-index: 1000035 !important;
}
.vr-mobile-nav .nav-link {
color: #111 !important;
font-family: var(--alt-font) !important;
text-transform: uppercase !important;
letter-spacing: .06em !important;
}
@media (max-width: 1299.98px) {
.vr-center-menu-left {
left: clamp(135px, 11vw, 190px) !important;
right: calc(50% + 98px) !important;
}
.vr-center-menu-right {
left: calc(50% + 98px) !important;
right: 132px !important;
}
.vr-center-menu .navbar-nav {
gap: 18px !important;
}
.vr-center-menu .nav-link,
.vr-book-link,
.vr-menu-trigger {
font-size: 13px !important;
letter-spacing: .045em !important;
}
}
@media (max-width: 991.98px) {
.vr-navbar-clean,
.vr-navbar-inner {
min-height: 88px !important;
}
.vr-menu-trigger {
left: 24px !important;
width: 72px !important;
}
.vr-header-logo img {
max-height: 68px !important;
}
.vr-fullscreen-menu .container-fluid {
padding: 105px 28px 44px !important;
}
.vr-fullscreen-menu-link {
font-size: clamp(22px, 7vw, 34px) !important;
}
.vr-fullscreen-right {
margin-top: 34px !important;
font-size: 15px !important;
}
}
/* ==================== Extracted CSS from inc/header.php ==================== */
/*
* Fix: hide the mobile collapse menu on desktop.
* Bootstrap .navbar-expand-lg can force .navbar-collapse to display:flex,
* so we explicitly remove the extra white menu bar above 992px.
*/
@media (min-width: 992px) {
.vr-header-clean .vr-mobile-nav,
.vr-header-clean #vrMobileNav,
.vr-header-clean .vr-mobile-toggler {
display: none !important;
visibility: hidden !important;
opacity: 0 !important;
height: 0 !important;
min-height: 0 !important;
max-height: 0 !important;
padding: 0 !important;
margin: 0 !important;
overflow: hidden !important;
pointer-events: none !important;
}
}
@media (max-width: 991.98px) {
.vr-header-clean .vr-mobile-nav.collapse:not(.show) {
display: none !important;
}
.vr-header-clean .vr-mobile-nav.collapse.show {
display: block !important;
}
}
/* ==================== Extracted CSS from inc/header.php ==================== */
/*
* Bigger header typography only.
* Structure stays unchanged.
*/
.vr-menu-trigger,
.vr-center-menu .nav-link,
.vr-book-link {
font-size: 20px !important;
font-weight: 600 !important;
letter-spacing: 0.15em !important;
}
.vr-menu-trigger-text {
font-size: 18px !important;
font-weight: 600 !important;
}
.vr-center-menu .navbar-nav {
gap: clamp(24px, 2.35vw, 42px) !important;
}
.vr-book-holder {
min-width: 92px !important;
}
.vr-fullscreen-menu-link {
font-size: clamp(28px, 2.55vw, 44px) !important;
font-weight: 700 !important;
letter-spacing: .02em !important;
}
.vr-fullscreen-contact a,
.vr-fullscreen-map a {
font-size: 19px !important;
font-weight: 400 !important;
}
.vr-fullscreen-address {
font-size: 20px !important;
font-weight: 400 !important;
}
@media (max-width: 1299.98px) {
.vr-center-menu .nav-link,
.vr-book-link,
.vr-menu-trigger,
.vr-menu-trigger-text {
font-size: 16px !important;
letter-spacing: .045em !important;
}
.vr-center-menu .navbar-nav {
gap: 22px !important;
}
}
@media (max-width: 991.98px) {
.vr-mobile-nav .nav-link {
font-size: 18px !important;
font-weight: 600 !important;
}
.vr-fullscreen-menu-link {
font-size: clamp(28px, 7.5vw, 38px) !important;
}
}
/* ==================== Extracted CSS from inc/header.php ==================== */
/* ==================== FINAL forced menu open fix ==================== */
#vrMenuTrigger,
.vr-menu-trigger {
position: absolute !important;
pointer-events: auto !important;
cursor: pointer !important;
user-select: none !important;
-webkit-user-select: none !important;
touch-action: manipulation !important;
z-index: 1000060 !important;
}
.vr-fullscreen-menu {
display: block !important;
position: fixed !important;
inset: 0 !important;
width: 100vw !important;
height: 100vh !important;
z-index: 1000005 !important;
opacity: 0 !important;
visibility: hidden !important;
pointer-events: none !important;
transform: none !important;
transition: opacity 420ms ease, visibility 0s linear 420ms !important;
}
body.vr-menu-open .vr-fullscreen-menu {
opacity: 1 !important;
visibility: visible !important;
pointer-events: auto !important;
transition: opacity 420ms ease, visibility 0s linear 0s !important;
}
body.vr-menu-open {
overflow: hidden !important;
padding-right: 0 !important;
}
body.vr-menu-open .vr-header-clean,
body.vr-menu-open .vr-navbar-clean,
body.vr-menu-open #vrMenuTrigger,
body.vr-menu-open .vr-menu-trigger,
body.vr-menu-open .vr-header-logo,
body.vr-menu-open .vr-center-menu,
body.vr-menu-open .vr-book-holder {
z-index: 1000060 !important;
}
body.vr-menu-open #vrMenuTrigger,
body.vr-menu-open .vr-menu-trigger,
body.vr-menu-open .vr-center-menu .nav-link,
body.vr-menu-open .vr-book-link {
color: #fff !important;
}
/* ==================== Extracted CSS from inc/header.php ==================== */
/* ==================== Sticky final hard no white + mobile 3 logo book ==================== */
html {
scroll-behavior: auto !important;
}
.vr-header-clean {
position: fixed !important;
top: 0 !important;
left: 0 !important;
right: 0 !important;
width: 100% !important;
z-index: 1000000 !important;
isolation: isolate !important;
background: transparent !important;
background-color: transparent !important;
background-image: none !important;
box-shadow: none !important;
transition: none !important;
}
/*
* HARD KILL theme sticky white layer.
* This includes late classes that appear only after more scroll pixels.
*/
.vr-header-clean,
.vr-header-clean *,
body.vr-header-scrolled .vr-header-clean,
body.vr-header-scrolled .vr-header-clean *,
body.vr-menu-open .vr-header-clean,
body.vr-menu-open .vr-header-clean * {
box-shadow: none !important;
}
.vr-header-clean,
.vr-header-clean.header-light,
.vr-header-clean.header-dark,
.vr-header-clean.header-appear,
.vr-header-clean.header-reverse-scroll,
.vr-header-clean.sticky,
.vr-header-clean.sticky-active,
.vr-header-clean.fixed,
.vr-header-clean.fixed-top,
.vr-header-clean.sticky-header,
.vr-header-clean.bg-white,
.vr-header-clean.bg-light,
.vr-header-clean.navbar-light,
.vr-header-clean.navbar-default,
.vr-header-clean > nav,
.vr-header-clean > nav.bg-white,
.vr-header-clean > nav.bg-light,
.vr-header-clean > .navbar,
.vr-header-clean > .navbar.bg-white,
.vr-header-clean > .navbar.bg-light,
.vr-header-clean > .vr-navbar-clean,
.vr-header-clean .container,
.vr-header-clean .container-fluid,
.vr-header-clean .navbar-collapse,
.vr-header-clean .navbar-collapse.bg-white,
.vr-header-clean .navbar-collapse.bg-light,
.vr-header-clean .navbar-nav,
.vr-header-clean .vr-navbar-inner,
body.vr-header-scrolled .vr-header-clean,
body.vr-header-scrolled .vr-header-clean.header-light,
body.vr-header-scrolled .vr-header-clean.header-dark,
body.vr-header-scrolled .vr-header-clean.header-appear,
body.vr-header-scrolled .vr-header-clean.header-reverse-scroll,
body.vr-header-scrolled .vr-header-clean.sticky,
body.vr-header-scrolled .vr-header-clean.sticky-active,
body.vr-header-scrolled .vr-header-clean.fixed,
body.vr-header-scrolled .vr-header-clean.fixed-top,
body.vr-header-scrolled .vr-header-clean.sticky-header,
body.vr-header-scrolled .vr-header-clean.bg-white,
body.vr-header-scrolled .vr-header-clean.bg-light,
body.vr-header-scrolled .vr-header-clean.navbar-light,
body.vr-header-scrolled .vr-header-clean.navbar-default,
body.vr-header-scrolled .vr-header-clean > nav,
body.vr-header-scrolled .vr-header-clean > nav.bg-white,
body.vr-header-scrolled .vr-header-clean > nav.bg-light,
body.vr-header-scrolled .vr-header-clean > .navbar,
body.vr-header-scrolled .vr-header-clean > .navbar.bg-white,
body.vr-header-scrolled .vr-header-clean > .navbar.bg-light,
body.vr-header-scrolled .vr-header-clean > .vr-navbar-clean,
body.vr-header-scrolled .vr-header-clean .container,
body.vr-header-scrolled .vr-header-clean .container-fluid,
body.vr-header-scrolled .vr-header-clean .navbar-collapse,
body.vr-header-scrolled .vr-header-clean .navbar-collapse.bg-white,
body.vr-header-scrolled .vr-header-clean .navbar-collapse.bg-light,
body.vr-header-scrolled .vr-header-clean .navbar-nav,
body.vr-header-scrolled .vr-header-clean .vr-navbar-inner,
body.vr-menu-open .vr-header-clean,
body.vr-menu-open .vr-header-clean > nav,
body.vr-menu-open .vr-header-clean > .navbar,
body.vr-menu-open .vr-header-clean > .vr-navbar-clean,
body.vr-menu-open .vr-header-clean .container,
body.vr-menu-open .vr-header-clean .container-fluid,
body.vr-menu-open .vr-header-clean .navbar-collapse,
body.vr-menu-open .vr-header-clean .navbar-nav,
body.vr-menu-open .vr-header-clean .vr-navbar-inner {
background: transparent !important;
background-color: transparent !important;
background-image: none !important;
box-shadow: none !important;
}
.vr-header-clean::before,
.vr-header-clean::after,
.vr-header-clean > nav::before,
.vr-header-clean > nav::after,
.vr-header-clean .navbar::before,
.vr-header-clean .navbar::after,
.vr-header-clean .container::before,
.vr-header-clean .container::after,
.vr-header-clean .container-fluid::before,
.vr-header-clean .container-fluid::after,
.vr-header-clean .vr-navbar-inner::before,
.vr-header-clean .vr-navbar-inner::after {
background: transparent !important;
background-color: transparent !important;
background-image: none !important;
box-shadow: none !important;
}
.vr-header-clean > *:not(.vr-sticky-glass-layer):not(.vr-fullscreen-menu) {
position: relative !important;
z-index: 2 !important;
}
.vr-sticky-glass-layer {
position: absolute !important;
inset: 0 !important;
z-index: 1 !important;
display: block !important;
opacity: 0 !important;
pointer-events: none !important;
background: rgba(0, 0, 0, .22) !important;
-webkit-backdrop-filter: blur(18px) brightness(.84) saturate(120%) !important;
backdrop-filter: blur(18px) brightness(.84) saturate(120%) !important;
transition: opacity 220ms ease !important;
}
body.vr-header-scrolled:not(.vr-menu-open) .vr-sticky-glass-layer {
opacity: 1 !important;
}
body.vr-menu-open .vr-sticky-glass-layer {
opacity: 0 !important;
}
.vr-header-logo,
body.vr-header-scrolled .vr-header-logo,
body.vr-menu-open .vr-header-logo {
opacity: 1 !important;
visibility: visible !important;
pointer-events: auto !important;
background: transparent !important;
background-color: transparent !important;
background-image: none !important;
}
.vr-header-logo img {
opacity: 1 !important;
visibility: visible !important;
background: transparent !important;
background-color: transparent !important;
background-image: none !important;
transform-origin: center center !important;
transition: transform 260ms ease, max-height 260ms ease, opacity 260ms ease !important;
}
body.vr-header-scrolled .vr-header-logo img {
transform: scale(.85) !important;
max-height: 60px !important;
}
body.vr-header-scrolled .vr-menu-trigger,
body.vr-header-scrolled .vr-center-menu .nav-link,
body.vr-header-scrolled .vr-book-link,
body.vr-menu-open .vr-menu-trigger,
body.vr-menu-open .vr-center-menu .nav-link,
body.vr-menu-open .vr-book-link {
color: #fff !important;
}
body.vr-header-scrolled .vr-menu-trigger-lines span,
body.vr-menu-open .vr-menu-trigger-lines span,
body.vr-header-scrolled .vr-menu-trigger-line,
body.vr-menu-open .vr-menu-trigger-line {
background: #fff !important;
background-color: #fff !important;
}
/*
* Slider: remove every bottom slide number / pagination variant.
*/
.swiper-pagination,
.swiper-pagination *,
.swiper-pagination-bullets,
.swiper-pagination-bullets *,
.swiper-pagination-fraction,
.swiper-pagination-fraction *,
.swiper-horizontal > .swiper-pagination-bullets,
.swiper-pagination-current,
.swiper-pagination-total,
.swiper-pagination-progressbar,
.slider-number,
.slider-number *,
.swiper-number-pagination,
.swiper-number-pagination *,
.number-pagination,
.number-pagination *,
.slide-number,
.slide-number *,
.slide-count,
.slide-count *,
.slider-count,
.slider-count *,
.swiper-counter,
.swiper-counter * {
display: none !important;
opacity: 0 !important;
visibility: hidden !important;
pointer-events: none !important;
}
/*
* MOBILE FINAL:
* left: 3 lines menu
* center: one logo
* right: book
*/
@media (max-width: 991.98px) {
.vr-header-clean {
height: 72px !important;
min-height: 72px !important;
}
.vr-header-clean > .navbar,
.vr-header-clean > nav.vr-navbar-clean,
.vr-header-clean .vr-navbar-inner {
height: 72px !important;
min-height: 72px !important;
}
.vr-header-clean .vr-navbar-inner {
position: relative !important;
display: grid !important;
grid-template-columns: 76px minmax(0, 1fr) 76px !important;
align-items: center !important;
justify-items: center !important;
width: 100% !important;
padding: 0 16px !important;
margin: 0 !important;
}
.vr-header-clean .vr-menu-trigger,
#vrMenuTrigger {
display: inline-flex !important;
position: absolute !important;
left: 18px !important;
top: 50% !important;
right: auto !important;
bottom: auto !important;
transform: translateY(-50%) !important;
z-index: 1000030 !important;
width: 42px !important;
min-width: 42px !important;
height: 42px !important;
align-items: center !important;
justify-content: center !important;
padding: 0 !important;
margin: 0 !important;
opacity: 1 !important;
visibility: visible !important;
pointer-events: auto !important;
background: transparent !important;
background-color: transparent !important;
border: 0 !important;
}
.vr-header-clean .vr-menu-trigger-text {
display: none !important;
}
.vr-header-clean .vr-menu-trigger-lines {
display: flex !important;
flex-direction: column !important;
gap: 5px !important;
width: 28px !important;
height: auto !important;
opacity: 1 !important;
visibility: visible !important;
}
.vr-header-clean .vr-menu-trigger-lines span,
.vr-header-clean .vr-menu-trigger-line {
display: block !important;
width: 28px !important;
height: 1px !important;
opacity: 1 !important;
visibility: visible !important;
background: #fff !important;
background-color: #fff !important;
}
.vr-header-clean .vr-header-logo {
display: flex !important;
position: absolute !important;
left: 50% !important;
top: 50% !important;
right: auto !important;
bottom: auto !important;
transform: translate(-50%, -50%) !important;
z-index: 1000020 !important;
align-items: center !important;
justify-content: center !important;
width: auto !important;
height: auto !important;
margin: 0 !important;
padding: 0 !important;
opacity: 1 !important;
visibility: visible !important;
pointer-events: auto !important;
}
body.vr-header-scrolled .vr-header-clean .vr-header-logo,
body.vr-menu-open .vr-header-clean .vr-header-logo {
transform: translate(-50%, -50%) !important;
}
.vr-header-clean .vr-header-logo img {
width: auto !important;
height: auto !important;
max-height: 58px !important;
opacity: 1 !important;
visibility: visible !important;
}
.vr-header-clean .vr-header-logo img.default-logo,
.vr-header-clean .vr-header-logo img.alt-logo {
display: none !important;
opacity: 0 !important;
visibility: hidden !important;
}
.vr-header-clean .vr-header-logo img.mobile-logo,
.vr-header-clean .vr-header-logo img:first-child:last-child {
display: block !important;
opacity: 1 !important;
visibility: visible !important;
transform: scale(1) !important;
}
body.vr-header-scrolled .vr-header-clean .vr-header-logo img.mobile-logo,
body.vr-header-scrolled .vr-header-clean .vr-header-logo img:first-child:last-child {
transform: scale(.85) !important;
max-height: 45px !important;
}
.vr-header-clean .vr-book-holder,
body.vr-header-scrolled .vr-header-clean .vr-book-holder,
body.vr-menu-open .vr-header-clean .vr-book-holder {
display: inline-flex !important;
position: absolute !important;
right: 18px !important;
top: 50% !important;
left: auto !important;
bottom: auto !important;
transform: translateY(-50%) !important;
z-index: 1000030 !important;
align-items: center !important;
justify-content: flex-end !important;
width: auto !important;
min-width: 48px !important;
height: 42px !important;
margin: 0 !important;
padding: 0 !important;
opacity: 1 !important;
visibility: visible !important;
pointer-events: auto !important;
background: transparent !important;
background-color: transparent !important;
}
.vr-header-clean .vr-book-link,
body.vr-header-scrolled .vr-header-clean .vr-book-link,
body.vr-menu-open .vr-header-clean .vr-book-link {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
height: 42px !important;
margin: 0 !important;
padding: 0 !important;
border: 0 !important;
color: #fff !important;
background: transparent !important;
background-color: transparent !important;
font-size: 15px !important;
line-height: 1 !important;
letter-spacing: .08em !important;
white-space: nowrap !important;
opacity: 1 !important;
visibility: visible !important;
pointer-events: auto !important;
}
.vr-header-clean .vr-center-menu,
.vr-header-clean .vr-mobile-toggler,
.vr-header-clean .navbar-toggler:not(#vrMenuTrigger),
.vr-header-clean .vr-mobile-nav,
.vr-header-clean .collapse.navbar-collapse.vr-mobile-nav {
display: none !important;
opacity: 0 !important;
visibility: hidden !important;
pointer-events: none !important;
}
.vr-header-clean .navbar-brand:not(.vr-header-logo),
.vr-header-clean a[class*="logo"]:not(.vr-header-logo),
.vr-header-clean .logo:not(.vr-header-logo):not(img),
.vr-header-clean .mobile-logo-wrapper,
.vr-header-clean .sticky-logo-wrapper,
.vr-header-clean .vr-header-logo ~ .vr-header-logo {
display: none !important;
opacity: 0 !important;
visibility: hidden !important;
pointer-events: none !important;
}
}
/* ==================== Extracted CSS from inc/header.php ==================== */
/* ==================== Emergency mobile slider repair ==================== */
/*
* Do NOT hide anything with [class*="pagination"].
* The home slider itself has class swiper-light-pagination.
*/
.vr-header-clean,
.vr-header-clean.header-light,
.vr-header-clean.header-dark,
.vr-header-clean.header-appear,
.vr-header-clean.header-reverse-scroll,
.vr-header-clean.sticky,
.vr-header-clean.sticky-active,
.vr-header-clean.fixed,
.vr-header-clean.fixed-top,
.vr-header-clean.sticky-header,
.vr-header-clean.bg-white,
.vr-header-clean.bg-light,
.vr-header-clean.navbar-light,
.vr-header-clean.navbar-default,
.vr-header-clean > nav,
.vr-header-clean > .navbar,
.vr-header-clean > .vr-navbar-clean,
.vr-header-clean .container,
.vr-header-clean .container-fluid,
.vr-header-clean .navbar-collapse,
.vr-header-clean .navbar-nav,
.vr-header-clean .vr-navbar-inner,
body.vr-header-scrolled .vr-header-clean,
body.vr-header-scrolled .vr-header-clean.header-light,
body.vr-header-scrolled .vr-header-clean.header-dark,
body.vr-header-scrolled .vr-header-clean.header-appear,
body.vr-header-scrolled .vr-header-clean.header-reverse-scroll,
body.vr-header-scrolled .vr-header-clean.sticky,
body.vr-header-scrolled .vr-header-clean.sticky-active,
body.vr-header-scrolled .vr-header-clean.fixed,
body.vr-header-scrolled .vr-header-clean.fixed-top,
body.vr-header-scrolled .vr-header-clean.sticky-header,
body.vr-header-scrolled .vr-header-clean.bg-white,
body.vr-header-scrolled .vr-header-clean.bg-light,
body.vr-header-scrolled .vr-header-clean.navbar-light,
body.vr-header-scrolled .vr-header-clean.navbar-default,
body.vr-header-scrolled .vr-header-clean > nav,
body.vr-header-scrolled .vr-header-clean > .navbar,
body.vr-header-scrolled .vr-header-clean > .vr-navbar-clean,
body.vr-header-scrolled .vr-header-clean .container,
body.vr-header-scrolled .vr-header-clean .container-fluid,
body.vr-header-scrolled .vr-header-clean .navbar-collapse,
body.vr-header-scrolled .vr-header-clean .navbar-nav,
body.vr-header-scrolled .vr-header-clean .vr-navbar-inner,
body.vr-menu-open .vr-header-clean,
body.vr-menu-open .vr-header-clean > nav,
body.vr-menu-open .vr-header-clean > .navbar,
body.vr-menu-open .vr-header-clean > .vr-navbar-clean,
body.vr-menu-open .vr-header-clean .container,
body.vr-menu-open .vr-header-clean .container-fluid,
body.vr-menu-open .vr-header-clean .navbar-collapse,
body.vr-menu-open .vr-header-clean .navbar-nav,
body.vr-menu-open .vr-header-clean .vr-navbar-inner {
background: transparent !important;
background-color: transparent !important;
background-image: none !important;
box-shadow: none !important;
}
.vr-sticky-glass-layer {
position: absolute !important;
inset: 0 !important;
z-index: 1 !important;
display: block !important;
opacity: 0 !important;
pointer-events: none !important;
background: rgba(0, 0, 0, .22) !important;
-webkit-backdrop-filter: blur(18px) brightness(.84) saturate(120%) !important;
backdrop-filter: blur(18px) brightness(.84) saturate(120%) !important;
transition: opacity 220ms ease !important;
}
body.vr-header-scrolled:not(.vr-menu-open) .vr-sticky-glass-layer {
opacity: 1 !important;
}
body.vr-menu-open .vr-sticky-glass-layer {
opacity: 0 !important;
}
.vr-header-clean > *:not(.vr-sticky-glass-layer):not(.vr-fullscreen-menu) {
position: relative !important;
z-index: 4 !important;
}
.vr-fullscreen-menu {
position: fixed !important;
inset: 0 !important;
display: block !important;
width: 100vw !important;
max-width: 100vw !important;
height: 100vh !important;
max-height: 100vh !important;
opacity: 0 !important;
visibility: hidden !important;
pointer-events: none !important;
z-index: 3 !important;
background: rgba(8, 8, 8, .88) !important;
transition: opacity 360ms ease, visibility 0s linear 360ms !important;
overflow-y: auto !important;
}
body.vr-menu-open .vr-fullscreen-menu {
opacity: 1 !important;
visibility: visible !important;
pointer-events: auto !important;
transition: opacity 360ms ease, visibility 0s linear 0s !important;
}
.vr-fullscreen-menu::before {
content: "";
position: fixed;
inset: 0;
z-index: 0;
background: rgba(8, 8, 8, .88) !important;
pointer-events: none;
}
.vr-fullscreen-menu > * {
position: relative !important;
z-index: 2 !important;
}
/* Hide only real bottom slider numbers/counters, not slider wrappers */
.swiper-pagination,
.swiper-pagination-bullets,
.swiper-pagination-fraction,
.swiper-pagination-current,
.swiper-pagination-total,
.swiper-pagination-progressbar,
.slider-number,
.swiper-number-pagination,
.number-pagination,
.slide-number,
.slide-count,
.slider-count,
.swiper-counter,
.vr-slider-slide-number {
display: none !important;
opacity: 0 !important;
visibility: hidden !important;
pointer-events: none !important;
}
.swiper.swiper-light-pagination {
display: block !important;
opacity: 1 !important;
visibility: visible !important;
}
@media (max-width: 991.98px) {
.vr-header-clean {
position: fixed !important;
height: 72px !important;
min-height: 72px !important;
background: transparent !important;
background-color: transparent !important;
}
.vr-header-clean > nav,
.vr-header-clean > .navbar,
.vr-header-clean > .vr-navbar-clean,
.vr-header-clean .vr-navbar-inner {
height: 72px !important;
min-height: 72px !important;
background: transparent !important;
background-color: transparent !important;
}
.vr-header-clean .vr-navbar-inner {
position: relative !important;
display: block !important;
width: 100% !important;
padding: 0 16px !important;
margin: 0 !important;
}
/* LEFT: 3-line menu */
#vrMenuTrigger,
.vr-header-clean #vrMenuTrigger,
.vr-header-clean .vr-menu-trigger {
display: inline-flex !important;
visibility: visible !important;
opacity: 1 !important;
pointer-events: auto !important;
position: absolute !important;
left: 18px !important;
top: 50% !important;
right: auto !important;
bottom: auto !important;
transform: translateY(-50%) !important;
z-index: 1000060 !important;
width: 44px !important;
min-width: 44px !important;
max-width: 44px !important;
height: 44px !important;
min-height: 44px !important;
max-height: 44px !important;
padding: 0 !important;
margin: 0 !important;
border: 0 !important;
background: transparent !important;
background-color: transparent !important;
overflow: visible !important;
}
.vr-header-clean .vr-menu-trigger-text {
display: none !important;
}
.vr-header-clean .vr-menu-trigger-lines {
display: flex !important;
flex-direction: column !important;
justify-content: center !important;
gap: 5px !important;
width: 28px !important;
min-width: 28px !important;
max-width: 28px !important;
height: 22px !important;
min-height: 22px !important;
max-height: 22px !important;
opacity: 1 !important;
visibility: visible !important;
overflow: visible !important;
}
.vr-header-clean .vr-menu-trigger-lines span,
.vr-header-clean .vr-menu-trigger-line {
display: block !important;
width: 28px !important;
min-width: 28px !important;
max-width: 28px !important;
height: 2px !important;
min-height: 2px !important;
max-height: 2px !important;
opacity: 1 !important;
visibility: visible !important;
background: #fff !important;
background-color: #fff !important;
}
/* CENTER: logo */
.vr-header-clean .vr-header-logo {
display: flex !important;
visibility: visible !important;
opacity: 1 !important;
pointer-events: auto !important;
position: absolute !important;
left: 50% !important;
top: 50% !important;
right: auto !important;
bottom: auto !important;
transform: translate(-50%, -50%) !important;
z-index: 1000055 !important;
width: auto !important;
min-width: 0 !important;
max-width: 150px !important;
height: auto !important;
min-height: 0 !important;
max-height: 62px !important;
padding: 0 !important;
margin: 0 !important;
overflow: visible !important;
background: transparent !important;
background-color: transparent !important;
}
.vr-header-clean .vr-header-logo img {
width: auto !important;
height: auto !important;
max-height: 58px !important;
opacity: 1 !important;
visibility: visible !important;
background: transparent !important;
background-color: transparent !important;
}
.vr-header-clean .vr-header-logo img.default-logo,
.vr-header-clean .vr-header-logo img.alt-logo {
display: none !important;
opacity: 0 !important;
visibility: hidden !important;
}
.vr-header-clean .vr-header-logo img.mobile-logo {
display: block !important;
opacity: 1 !important;
visibility: visible !important;
transform: scale(1) !important;
}
body.vr-header-scrolled .vr-header-clean .vr-header-logo {
transform: translate(-50%, -50%) !important;
}
body.vr-header-scrolled .vr-header-clean .vr-header-logo img.mobile-logo {
transform: scale(.85) !important;
max-height: 45px !important;
}
/* RIGHT: BOOK */
.vr-header-clean .vr-book-holder,
body.vr-header-scrolled .vr-header-clean .vr-book-holder,
body.vr-menu-open .vr-header-clean .vr-book-holder {
display: inline-flex !important;
visibility: visible !important;
opacity: 1 !important;
pointer-events: auto !important;
position: absolute !important;
right: 18px !important;
top: 50% !important;
left: auto !important;
bottom: auto !important;
transform: translateY(-50%) !important;
z-index: 1000060 !important;
width: auto !important;
min-width: 44px !important;
max-width: 78px !important;
height: 44px !important;
min-height: 44px !important;
max-height: 44px !important;
padding: 0 !important;
margin: 0 !important;
overflow: visible !important;
background: transparent !important;
background-color: transparent !important;
}
.vr-header-clean .vr-book-link,
body.vr-header-scrolled .vr-header-clean .vr-book-link,
body.vr-menu-open .vr-header-clean .vr-book-link {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
color: #fff !important;
background: transparent !important;
background-color: transparent !important;
border: 0 !important;
width: auto !important;
min-width: 44px !important;
max-width: 78px !important;
height: 44px !important;
min-height: 44px !important;
max-height: 44px !important;
padding: 0 !important;
margin: 0 !important;
font-size: 15px !important;
line-height: 1 !important;
letter-spacing: .08em !important;
text-transform: uppercase !important;
white-space: nowrap !important;
opacity: 1 !important;
visibility: visible !important;
pointer-events: auto !important;
}
.vr-header-clean .vr-center-menu,
.vr-header-clean .vr-mobile-toggler,
.vr-header-clean .navbar-toggler:not(#vrMenuTrigger),
.vr-header-clean .vr-mobile-nav,
.vr-header-clean .collapse.navbar-collapse.vr-mobile-nav {
display: none !important;
opacity: 0 !important;
visibility: hidden !important;
pointer-events: none !important;
width: 0 !important;
height: 0 !important;
max-width: 0 !important;
max-height: 0 !important;
overflow: hidden !important;
}
}
/* ==================== Extracted CSS from inc/header.php ==================== */
/* ==================== Menu open transparent + Home repair ==================== */
/*
* Menu open: slightly more transparent fullscreen background.
* Sticky glass layer stays off while menu is open.
*/
body.vr-menu-open .vr-fullscreen-menu,
body.vr-menu-open .vr-fullscreen-menu::before {
background: rgba(8, 8, 8, .88) !important;
background-color: rgba(8, 8, 8, .88) !important;
}
body.vr-menu-open .vr-sticky-glass-layer {
opacity: 0 !important;
}
/*
* Keep the template's late sticky white background killed.
*/
.vr-header-clean,
.vr-header-clean.header-light,
.vr-header-clean.header-dark,
.vr-header-clean.header-appear,
.vr-header-clean.header-reverse-scroll,
.vr-header-clean.sticky,
.vr-header-clean.sticky-active,
.vr-header-clean.fixed,
.vr-header-clean.fixed-top,
.vr-header-clean.sticky-header,
.vr-header-clean.bg-white,
.vr-header-clean.bg-light,
.vr-header-clean.navbar-light,
.vr-header-clean.navbar-default,
.vr-header-clean > nav,
.vr-header-clean > .navbar,
.vr-header-clean > .vr-navbar-clean,
.vr-header-clean .container,
.vr-header-clean .container-fluid,
.vr-header-clean .navbar-collapse,
.vr-header-clean .navbar-nav,
.vr-header-clean .vr-navbar-inner,
body.vr-header-scrolled .vr-header-clean,
body.vr-header-scrolled .vr-header-clean.header-light,
body.vr-header-scrolled .vr-header-clean.header-dark,
body.vr-header-scrolled .vr-header-clean.header-appear,
body.vr-header-scrolled .vr-header-clean.header-reverse-scroll,
body.vr-header-scrolled .vr-header-clean.sticky,
body.vr-header-scrolled .vr-header-clean.sticky-active,
body.vr-header-scrolled .vr-header-clean.fixed,
body.vr-header-scrolled .vr-header-clean.fixed-top,
body.vr-header-scrolled .vr-header-clean.sticky-header,
body.vr-header-scrolled .vr-header-clean.bg-white,
body.vr-header-scrolled .vr-header-clean.bg-light,
body.vr-header-scrolled .vr-header-clean.navbar-light,
body.vr-header-scrolled .vr-header-clean.navbar-default,
body.vr-header-scrolled .vr-header-clean > nav,
body.vr-header-scrolled .vr-header-clean > .navbar,
body.vr-header-scrolled .vr-header-clean > .vr-navbar-clean,
body.vr-header-scrolled .vr-header-clean .container,
body.vr-header-scrolled .vr-header-clean .container-fluid,
body.vr-header-scrolled .vr-header-clean .navbar-collapse,
body.vr-header-scrolled .vr-header-clean .navbar-nav,
body.vr-header-scrolled .vr-header-clean .vr-navbar-inner {
background: transparent !important;
background-color: transparent !important;
background-image: none !important;
box-shadow: none !important;
}
/*
* Softer sticky shrink.
*/
body.vr-header-scrolled .vr-header-clean,
body.vr-header-scrolled .vr-header-clean > nav,
body.vr-header-scrolled .vr-header-clean > .navbar,
body.vr-header-scrolled .vr-header-clean > .vr-navbar-clean,
body.vr-header-scrolled .vr-header-clean .vr-navbar-inner {
height: 68px !important;
min-height: 68px !important;
}
body.vr-header-scrolled .vr-header-logo img,
body.vr-header-scrolled .vr-header-clean .vr-header-logo img {
transform: scale(.85) !important;
max-height: 72px !important;
}
/*
* Slider number/counter only. Do not hide swiper-light-pagination wrapper.
*/
.swiper-pagination,
.swiper-pagination-bullets,
.swiper-pagination-fraction,
.swiper-pagination-current,
.swiper-pagination-total,
.swiper-pagination-progressbar,
.slider-number,
.swiper-number-pagination,
.number-pagination,
.slide-number,
.slide-count,
.slider-count,
.swiper-counter,
.vr-slider-slide-number {
display: none !important;
opacity: 0 !important;
visibility: hidden !important;
pointer-events: none !important;
}
.swiper.swiper-light-pagination {
display: block !important;
opacity: 1 !important;
visibility: visible !important;
}
@media (max-width: 991.98px) {
/*
* Mobile final:
* left ☰ / center logo / right BOOK
*/
.vr-header-clean {
height: 72px !important;
min-height: 72px !important;
}
body.vr-header-scrolled .vr-header-clean,
body.vr-header-scrolled .vr-header-clean > nav,
body.vr-header-scrolled .vr-header-clean > .navbar,
body.vr-header-scrolled .vr-header-clean > .vr-navbar-clean,
body.vr-header-scrolled .vr-header-clean .vr-navbar-inner {
height: 62px !important;
min-height: 62px !important;
}
#vrMenuTrigger,
.vr-header-clean #vrMenuTrigger,
.vr-header-clean .vr-menu-trigger {
display: inline-flex !important;
visibility: visible !important;
opacity: 1 !important;
pointer-events: auto !important;
position: absolute !important;
left: 18px !important;
top: 50% !important;
right: auto !important;
bottom: auto !important;
transform: translateY(-50%) !important;
z-index: 1000060 !important;
width: 44px !important;
min-width: 44px !important;
max-width: 44px !important;
height: 44px !important;
min-height: 44px !important;
max-height: 44px !important;
padding: 0 !important;
margin: 0 !important;
border: 0 !important;
background: transparent !important;
background-color: transparent !important;
overflow: visible !important;
}
.vr-header-clean .vr-menu-trigger-text {
display: none !important;
}
.vr-header-clean .vr-menu-trigger-lines,
.vr-header-clean .vr-menu-trigger-lines span,
.vr-header-clean .vr-menu-trigger-line {
opacity: 1 !important;
visibility: visible !important;
}
.vr-header-clean .vr-menu-trigger-lines span,
.vr-header-clean .vr-menu-trigger-line {
background: #fff !important;
background-color: #fff !important;
}
.vr-header-clean .vr-header-logo {
display: flex !important;
visibility: visible !important;
opacity: 1 !important;
pointer-events: auto !important;
position: absolute !important;
left: 50% !important;
top: 50% !important;
right: auto !important;
bottom: auto !important;
transform: translate(-50%, -50%) !important;
z-index: 1000055 !important;
width: auto !important;
max-width: 150px !important;
height: auto !important;
margin: 0 !important;
padding: 0 !important;
overflow: visible !important;
background: transparent !important;
background-color: transparent !important;
}
.vr-header-clean .vr-header-logo img.default-logo,
.vr-header-clean .vr-header-logo img.alt-logo {
display: none !important;
opacity: 0 !important;
visibility: hidden !important;
}
.vr-header-clean .vr-header-logo img.mobile-logo,
.vr-header-clean .vr-header-logo img:first-child:last-child {
display: block !important;
opacity: 1 !important;
visibility: visible !important;
transform: scale(1) !important;
max-height: 58px !important;
}
body.vr-header-scrolled .vr-header-clean .vr-header-logo,
body.vr-menu-open .vr-header-clean .vr-header-logo {
transform: translate(-50%, -50%) !important;
}
body.vr-header-scrolled .vr-header-clean .vr-header-logo img.mobile-logo,
body.vr-header-scrolled .vr-header-clean .vr-header-logo img:first-child:last-child,
body.vr-header-scrolled .vr-header-clean .vr-header-logo img {
transform: scale(.85) !important;
max-height: 50px !important;
}
.vr-header-clean .vr-book-holder,
body.vr-header-scrolled .vr-header-clean .vr-book-holder,
body.vr-menu-open .vr-header-clean .vr-book-holder {
display: inline-flex !important;
visibility: visible !important;
opacity: 1 !important;
pointer-events: auto !important;
position: absolute !important;
right: 18px !important;
top: 50% !important;
left: auto !important;
bottom: auto !important;
transform: translateY(-50%) !important;
z-index: 1000060 !important;
width: auto !important;
min-width: 44px !important;
max-width: 78px !important;
height: 44px !important;
min-height: 44px !important;
max-height: 44px !important;
padding: 0 !important;
margin: 0 !important;
overflow: visible !important;
background: transparent !important;
background-color: transparent !important;
}
.vr-header-clean .vr-book-link,
body.vr-header-scrolled .vr-header-clean .vr-book-link,
body.vr-menu-open .vr-header-clean .vr-book-link {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
color: #fff !important;
background: transparent !important;
background-color: transparent !important;
border: 0 !important;
width: auto !important;
min-width: 44px !important;
max-width: 78px !important;
height: 44px !important;
min-height: 44px !important;
max-height: 44px !important;
padding: 0 !important;
margin: 0 !important;
font-size: 15px !important;
line-height: 1 !important;
letter-spacing: .08em !important;
text-transform: uppercase !important;
white-space: nowrap !important;
}
.vr-header-clean .vr-center-menu,
.vr-header-clean .vr-mobile-toggler,
.vr-header-clean .navbar-toggler:not(#vrMenuTrigger),
.vr-header-clean .vr-mobile-nav,
.vr-header-clean .collapse.navbar-collapse.vr-mobile-nav {
display: none !important;
opacity: 0 !important;
visibility: hidden !important;
pointer-events: none !important;
width: 0 !important;
height: 0 !important;
max-width: 0 !important;
max-height: 0 !important;
overflow: hidden !important;
}
}
/* ==================== Extracted CSS from inc/paragraph.php ==================== */
.villarossa-layout-b-wood-images {
min-height: 760px;
padding-top: 30px;
padding-bottom: 90px;
}
.villarossa-layout-b-wood-img-main {
width: 88%;
margin-left: auto;
margin-top: 130px;
}
.villarossa-layout-b-wood-img-front.vr-wood-photo-motion {
position: absolute;
left: -5%;
top: 20px;
width: 50%;
z-index: 3;
}
.villarossa-layout-b-wood-img-third {
position: absolute;
left: -8%;
bottom: 25px;
width: 52%;
z-index: 2;
}
.villarossa-layout-b-wood-img-fourth {
position: absolute;
right: -7%;
bottom: -55px;
width: 45%;
z-index: 4;
}
.villarossa-layout-b-wood-single {
width: 100%;
margin-top: 80px;
}
.villarossa-layout-b-wood-copy {
padding-top: 120px;
}
.villarossa-layout-b-wood-copy .villarossa-content,
.villarossa-layout-b-wood-copy p {
font-size: 20px;
line-height: 1.75;
}
@media (max-width: 991px) {
.villarossa-layout-b-wood-images {
min-height: auto;
padding-bottom: 40px;
}
.villarossa-layout-b-wood-img-main,
.villarossa-layout-b-wood-single {
width: 90%;
margin-top: 30px;
}
.villarossa-layout-b-wood-img-front.vr-wood-photo-motion,
.villarossa-layout-b-wood-img-third,
.villarossa-layout-b-wood-img-fourth {
position: relative;
left: auto;
right: auto;
top: auto;
bottom: auto;
width: 70%;
margin-top: -40px;
}
.villarossa-layout-b-wood-img-front.vr-wood-photo-motion,
.villarossa-layout-b-wood-img-third {
float: left;
}
.villarossa-layout-b-wood-img-fourth {
float: right;
}
.villarossa-layout-b-wood-copy {
padding-top: 20px;
}
}
/* OUR PHILOSOPHY: asynchronous photo movement helpers */
.vr-async-photo-1.vr-wood-photo-motion,
.vr-async-photo-2,
.vr-async-photo-3,
.vr-async-photo-4 {
will-change: transform;
}
.vr-async-photo-1.vr-wood-photo-motion { transition-delay: 0ms; }
.vr-async-photo-2.vr-wood-photo-motion { transition-delay: 90ms; }
.vr-async-photo-3.vr-wood-photo-motion { transition-delay: 170ms; }
.vr-async-photo-4.vr-wood-photo-motion { transition-delay: 260ms; }
/* ==================== Extracted CSS from inc/footer.php ==================== */
.vr-footer {
background: #79d3e1;
color: #111;
padding: 110px 0 80px;
font-family: inherit;
}
.vr-footer a {
color: #111;
text-decoration: none;
transition: opacity .25s ease;
}
.vr-footer a:hover {
opacity: .6;
}
.vr-footer-title {
font-size: 38px;
line-height: .95;
font-weight: 500;
letter-spacing: -.03em;
margin: 0 0 35px;
color: #111;
}
.vr-footer-newsletter-text {
max-width: 430px;
font-size: 21px;
line-height: 1.18;
letter-spacing: .01em;
margin: 0 0 25px;
}
.vr-footer-newsletter {
max-width: 440px;
display: flex;
align-items: center;
border-bottom: 1px solid rgba(17, 17, 17, .85);
margin-bottom: 70px;
}
.vr-footer-newsletter input {
width: 100%;
border: 0;
outline: none;
background: transparent;
padding: 12px 0 16px;
color: #111;
font-size: 18px;
}
.vr-footer-newsletter input::placeholder {
color: rgba(17, 17, 17, .65);
}
.vr-footer-newsletter button {
width: 60px;
min-width: 60px;
border: 0;
background: transparent;
color: #111;
font-size: 32px;
line-height: 1;
padding: 0 0 10px;
text-align: right;
cursor: pointer;
}
.vr-footer-newsletter button:before {
content: "→";
display: inline-block;
}
.vr-footer-newsletter button i {
display: none;
}
.vr-footer-contact {
max-width: 440px;
font-size: 20px;
line-height: 1.18;
letter-spacing: .01em;
}
.vr-footer-block {
padding: 16px 0;
border-bottom: 1px solid rgba(17, 17, 17, .85);
}
.vr-footer-block:first-child {
border-top: 0;
}
.vr-footer-block a,
.vr-footer-block span {
display: block;
}
.vr-footer-address {
border-bottom: 0;
}
.vr-footer-logo-wrap {
align-self: flex-end;
}
.vr-footer-logo {
display: inline-flex;
align-items: center;
justify-content: center;
max-width: 120px;
}
.vr-footer-logo img {
max-width: 120px;
height: auto;
display: block;
}
.vr-footer-logo-text {
display: inline-flex;
align-items: center;
justify-content: center;
width: 105px;
height: 105px;
color: #111;
font-size: 62px;
font-weight: 700;
line-height: 1;
letter-spacing: -.08em;
}
.vr-footer-right {
padding-top: 5px;
}
.vr-footer-social {
list-style: none;
display: flex;
align-items: center;
gap: 20px;
padding: 0;
margin: 0 0 85px;
}
.vr-footer-social li,
.vr-footer-social a {
display: inline-flex;
}
.vr-footer-social a {
width: 42px;
height: 42px;
border-radius: 50%;
background: #111;
color: #79d3e1;
align-items: center;
justify-content: center;
font-size: 21px;
}
.vr-footer-menu ul {
list-style: none;
padding: 0;
margin: 0;
}
.vr-footer-menu li {
margin: 0;
line-height: 1.05;
}
.vr-footer-menu a {
display: inline-block;
font-size: 21px;
text-transform: uppercase;
letter-spacing: .06em;
line-height: 1.1;
}
.vr-footer-credit {
margin-top: 140px;
font-size: 20px;
line-height: 1.05;
letter-spacing: .03em;
}
.vr-footer-credit span,
.vr-footer-credit a {
display: block;
}
.vr-footer-credit .vr-design-name {
text-transform: uppercase;
}
.vr-footer-credit .vr-dev-label {
margin-top: 16px;
}
.vr-footer-credit .vr-dev-link {
display: inline-block;
width: max-content;
text-transform: lowercase;
text-decoration: underline;
text-underline-offset: 4px;
}
@media (max-width: 991px) {
.vr-footer {
padding: 70px 0 55px;
}
.vr-footer-logo-wrap {
align-self: auto;
text-align: left !important;
margin: 40px 0;
}
.vr-footer-right {
padding-top: 25px;
}
.vr-footer-social {
margin-bottom: 40px;
}
.vr-footer-credit {
margin-top: 50px;
}
}
@media (max-width: 575px) {
.vr-footer-title {
font-size: 32px;
}
.vr-footer-newsletter-text,
.vr-footer-contact,
.vr-footer-menu a,
.vr-footer-credit {
font-size: 17px;
}
}
/* ==================== Extracted CSS from inc/page-title.php ==================== */
.page-title-slider-style {
position: relative;
background-image: url(/uploads/media/bg2.jpg);
}
.page-title-slider-style .page-title-mask-reveal {
position: relative;
width: 100%;
height: 860px;
overflow: hidden;
opacity: 1;
-webkit-clip-path: inset(7.5% 7.5% 7.5% 7.5%);
clip-path: inset(7.5% 7.5% 7.5% 7.5%);
-webkit-animation: pageTitleMaskReveal 1800ms ease-in-out 500ms forwards;
animation: pageTitleMaskReveal 1800ms ease-in-out 500ms forwards;
will-change: clip-path;
}
.page-title-slider-style .page-title-main-img {
width: 100%;
height: 100%;
display: block;
object-fit: cover;
}
@-webkit-keyframes pageTitleMaskReveal {
from {
-webkit-clip-path: inset(7.5% 7.5% 7.5% 7.5%);
clip-path: inset(7.5% 7.5% 7.5% 7.5%);
}
to {
-webkit-clip-path: inset(0% 0% 0% 0%);
clip-path: inset(0% 0% 0% 0%);
}
}
@keyframes pageTitleMaskReveal {
from {
-webkit-clip-path: inset(7.5% 7.5% 7.5% 7.5%);
clip-path: inset(7.5% 7.5% 7.5% 7.5%);
}
to {
-webkit-clip-path: inset(0% 0% 0% 0%);
clip-path: inset(0% 0% 0% 0%);
}
}
@media (prefers-reduced-motion: reduce) {
.page-title-slider-style .page-title-mask-reveal {
-webkit-animation: none;
animation: none;
-webkit-clip-path: inset(0% 0% 0% 0%);
clip-path: inset(0% 0% 0% 0%);
}
}
@media (max-width: 991px) {
.page-title-slider-style .page-title-mask-reveal {
height: 620px;
}
}
@media (max-width: 575px) {
.page-title-slider-style .page-title-mask-reveal {
height: 520px;
}
}
/* ==================== Extracted CSS from inc/wi-parallax.php ==================== */
.villarossa-parallax-clean {
background-image: url(/uploads/media/bg2.jpg);
background-repeat: repeat;
background-position: center top;
}
.villarossa-parallax-clean .skrollr-parallax {
z-index: 2;
}
/* ==================== Extracted CSS from inc/wi-slider.php ==================== */
.vr-slider-outline-btn {
display: inline-flex;
align-items: center;
justify-content: center;
margin-top: 28px;
margin-bottom: 22px;
padding: 13px 34px 12px;
border: 1px solid rgba(255,255,255,.92);
border-radius: 0;
background: transparent;
color: #fff;
font-family: var(--alt-font);
font-size: 18px;
font-weight: 500;
line-height: 1;
letter-spacing: .12em;
text-transform: uppercase;
transition: background .25s ease, color .25s ease, border-color .25s ease;
}
.vr-slider-outline-btn:hover {
background: #fff;
border-color: #fff;
color: #111;
}
.vr-slider-outline-btn i {
margin-left: 12px;
font-size: 14px;
}
@media (max-width: 575.98px) {
.vr-slider-outline-btn {
margin-top: 20px;
margin-bottom: 18px;
padding: 11px 24px 10px;
font-size: 15px;
letter-spacing: .08em;
}
}
/* ==================== Extracted CSS from inc/wi-slider.php ==================== */
.villarossa-slider-top0-fix {
margin-top: 0 !important;
padding-top: 0 !important;
}
/* ==================== Extracted CSS from inc/wi-slider.php ==================== */
.villarossa-initial-image-reveal {
opacity: 1 !important;
-webkit-clip-path: inset(7.5% 7.5% 7.5% 7.5%);
clip-path: inset(7.5% 7.5% 7.5% 7.5%);
-webkit-animation: villarossaInitialReveal 1800ms cubic-bezier(0.76, 0, 0.24, 1) 500ms forwards;
animation: villarossaInitialReveal 1800ms cubic-bezier(0.76, 0, 0.24, 1) 500ms forwards;
}
.villarossa-image-visible {
opacity: 1 !important;
-webkit-clip-path: inset(0% 0% 0% 0%);
clip-path: inset(0% 0% 0% 0%);
}
@-webkit-keyframes villarossaInitialReveal {
from {
-webkit-clip-path: inset(7.5% 7.5% 7.5% 7.5%);
clip-path: inset(7.5% 7.5% 7.5% 7.5%);
}
to {
-webkit-clip-path: inset(0% 0% 0% 0%);
clip-path: inset(0% 0% 0% 0%);
}
}
@keyframes villarossaInitialReveal {
from {
-webkit-clip-path: inset(7.5% 7.5% 7.5% 7.5%);
clip-path: inset(7.5% 7.5% 7.5% 7.5%);
}
to {
-webkit-clip-path: inset(0% 0% 0% 0%);
clip-path: inset(0% 0% 0% 0%);
}
}
/* ==================== Extracted CSS from inc/slider.php ==================== */
.vr-slider-outline-btn {
display: inline-flex;
align-items: center;
justify-content: center;
margin-top: 28px;
margin-bottom: 22px;
padding: 13px 34px 12px;
border: 1px solid rgba(255,255,255,.92);
border-radius: 0;
background: transparent;
color: #fff;
font-family: var(--alt-font);
font-size: 18px;
font-weight: 500;
line-height: 1;
letter-spacing: .12em;
text-transform: uppercase;
transition: background .25s ease, color .25s ease, border-color .25s ease;
}
.vr-slider-outline-btn:hover {
background: #fff;
border-color: #fff;
color: #111;
}
.vr-slider-outline-btn i {
margin-left: 12px;
font-size: 14px;
}
@media (max-width: 575.98px) {
.vr-slider-outline-btn {
margin-top: 20px;
margin-bottom: 18px;
padding: 11px 24px 10px;
font-size: 15px;
letter-spacing: .08em;
}
}
/* ==================== Villa Rossa central extracted on-page CSS END ==================== */
/* ==================== Stay/Food/About safe restore ==================== */
/*
* Public pages must not inherit artificial outer gutters.
* This removes the mobile left/right padding visible on pages such as about-us.php.
*/
html,
body {
margin: 0 !important;
padding: 0 !important;
}
@media (max-width: 991.98px) {
html,
body {
margin-left: 0 !important;
margin-right: 0 !important;
padding-left: 0 !important;
padding-right: 0 !important;
overflow-x: hidden !important;
}
.container,
.container-fluid {
width: 100% !important;
max-width: 100% !important;
padding-left: 0 !important;
padding-right: 0 !important;
}
.row {
margin-left: 0 !important;
margin-right: 0 !important;
}
.row > * {
padding-left: 0 !important;
padding-right: 0 !important;
}
}
/*
* Restore paragraph photo proportions.
*/
.villarossa-layout-b-wood-images {
position: relative !important;
min-height: 760px !important;
padding-top: 30px !important;
padding-bottom: 90px !important;
}
.villarossa-layout-b-wood-img-main {
position: relative !important;
width: 88% !important;
max-width: 88% !important;
margin-left: auto !important;
margin-right: 0 !important;
margin-top: 130px !important;
z-index: 1 !important;
}
.villarossa-layout-b-wood-img-front,
.villarossa-layout-b-wood-img-front.vr-wood-photo-motion {
position: absolute !important;
left: -5% !important;
top: 20px !important;
width: 50% !important;
max-width: 50% !important;
z-index: 3 !important;
}
.villarossa-layout-b-wood-img-third {
position: absolute !important;
left: -8% !important;
bottom: 25px !important;
width: 52% !important;
max-width: 52% !important;
z-index: 2 !important;
}
.villarossa-layout-b-wood-img-fourth {
position: absolute !important;
right: -7% !important;
bottom: -55px !important;
width: 45% !important;
max-width: 45% !important;
z-index: 4 !important;
}
.villarossa-layout-b-wood-single {
width: 100% !important;
max-width: 100% !important;
margin-top: 80px !important;
}
.villarossa-layout-b-wood-images img,
.villarossa-layout-b-wood-single img,
.vr-async-photo img {
display: block !important;
width: 100% !important;
max-width: 100% !important;
height: auto !important;
object-fit: cover !important;
}
.vr-async-photo-1,
.vr-async-photo-2,
.vr-async-photo-3,
.vr-async-photo-4,
.vr-async-photo-1.vr-wood-photo-motion,
.vr-async-photo-2.vr-wood-photo-motion,
.vr-async-photo-3.vr-wood-photo-motion,
.vr-async-photo-4.vr-wood-photo-motion {
width: 60% !important;
max-width: 60% !important;
min-width: 0 !important;
}
/*
* Parallax width effect for all pages using wi-parallax.php.
* Food/Drinks and Stay now use the same selector/runtime.
*/
.villarossa-parallax-clean .skrollr-parallax,
section.villarossa-parallax-clean > .skrollr-parallax,
.skrollr-parallax[data-bottom-top*="width"] {
width: var(--vr-parallax-width, 70%) !important;
max-width: 100% !important;
will-change: width !important;
}
.villarossa-parallax-clean .skrollr-parallax.vr-parallax-width-ready,
section.villarossa-parallax-clean > .skrollr-parallax.vr-parallax-width-ready {
width: var(--vr-parallax-width, 70%) !important;
}
@media (max-width: 991.98px) {
.villarossa-layout-b-wood-images {
min-height: auto !important;
padding-bottom: 40px !important;
}
.villarossa-layout-b-wood-img-main,
.villarossa-layout-b-wood-single {
width: 90% !important;
max-width: 90% !important;
margin-top: 30px !important;
}
.villarossa-layout-b-wood-img-front,
.villarossa-layout-b-wood-img-front.vr-wood-photo-motion,
.villarossa-layout-b-wood-img-third,
.villarossa-layout-b-wood-img-fourth {
position: relative !important;
left: auto !important;
right: auto !important;
top: auto !important;
bottom: auto !important;
width: 70% !important;
max-width: 70% !important;
margin-top: -40px !important;
}
.vr-async-photo-1,
.vr-async-photo-2,
.vr-async-photo-3,
.vr-async-photo-4,
.vr-async-photo-1.vr-wood-photo-motion,
.vr-async-photo-2.vr-wood-photo-motion,
.vr-async-photo-3.vr-wood-photo-motion,
.vr-async-photo-4.vr-wood-photo-motion {
width: 70% !important;
max-width: 70% !important;
}
.villarossa-parallax-clean .skrollr-parallax,
section.villarossa-parallax-clean > .skrollr-parallax,
.skrollr-parallax[data-bottom-top*="width"] {
width: 100% !important;
max-width: 100% !important;
}
}
/* ==================== WI Instagram Layout B exact Wood motion ==================== */
.vr-instagram-wood--layout-b {
position: relative;
z-index: 110;
overflow: hidden;
padding: 100px 0 80px;
background: transparent;
}
.vr-instagram-wood__header {
position: relative;
z-index: 5;
width: min(100%, 1180px);
margin: 0 auto;
padding: 0 20px;
text-align: center;
}
.vr-instagram-wood__hashtag {
margin: 0 0 18px;
color: #111;
font-size: 18px;
line-height: 1;
font-weight: 500;
letter-spacing: .01em;
text-align: center;
}
.vr-instagram-wood__button {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 42px;
margin: 0 auto 18px;
padding: 12px 24px 11px;
border: 1px solid #111;
border-radius: 0;
background: transparent;
color: #111;
font-family: var(--alt-font);
font-size: 15px;
font-weight: 500;
line-height: 1;
letter-spacing: .10em;
text-align: center;
text-transform: uppercase;
text-decoration: none;
transition: background .25s ease, color .25s ease, border-color .25s ease;
}
.vr-instagram-wood__button:hover {
background: #111;
border-color: #111;
color: #fff;
text-decoration: none;
}
.vr-instagram-wood__title {
position: relative;
z-index: 1;
margin: 0 0 -118px;
color: var(--base-color, #c4a15f);
font-size: clamp(96px, 14vw, 210px);
font-weight: 500;
line-height: .78;
letter-spacing: .01em;
text-align: center;
text-transform: none;
pointer-events: none;
}
.vr-instagram-wood__text {
max-width: 720px;
margin: 30px auto 0;
color: #111;
font-size: 17px;
line-height: 1.7;
}
.vr-instagram-wood__stage {
position: relative;
z-index: 3;
width: calc(100vw + 420px);
margin-top: 0;
margin-left: -210px;
overflow: visible;
}
.vr-instagram-wood__track {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
align-items: start;
gap: 0;
width: 100%;
opacity: 1;
transform: translate3d(var(--vr-instagram-x, 200px), 0, 0);
will-change: transform;
}
.vr-instagram-wood__item {
position: relative;
display: block;
width: 100%;
margin: 0;
padding: 0;
}
.vr-instagram-wood__item img {
display: block;
width: 100%;
max-width: 100%;
height: auto;
object-fit: cover;
}
.vr-instagram-wood__item--1 {
padding-right: 0;
}
.vr-instagram-wood__item--1 img {
aspect-ratio: 570 / 682;
}
.vr-instagram-wood__item--2 {
padding-left: 30px;
padding-top: 50px;
}
.vr-instagram-wood__item--2 img {
aspect-ratio: 510 / 396;
}
.vr-instagram-wood__item--3 {
padding-left: 50px;
padding-top: 100px;
}
.vr-instagram-wood__item--3 img {
aspect-ratio: 470 / 564;
}
.vr-instagram-wood__item--4 {
margin-top: -50px;
}
.vr-instagram-wood__item--4 img {
aspect-ratio: 568 / 686;
}
@media (max-width: 991.98px) {
.vr-instagram-wood--layout-b {
padding: 70px 0 55px;
}
.vr-instagram-wood__header {
padding-left: 18px;
padding-right: 18px;
}
.vr-instagram-wood__title {
margin-bottom: -42px;
font-size: clamp(74px, 23vw, 120px);
}
.vr-instagram-wood__stage {
width: 100%;
margin-left: 0;
overflow: hidden;
}
.vr-instagram-wood__track {
display: block;
transform: none !important;
}
.vr-instagram-wood__item {
display: none;
}
.vr-instagram-wood__item--1 {
display: block;
width: min(78vw, 420px);
margin: 0 auto;
padding: 0;
}
}
/* ==================== Container gutter correction / no forced 48px page frame ==================== */
/*
* The rule `calc(100% - 48px)` creates an artificial 24px frame left/right.
* Keep the 1500px max layout width, but do not force a global page gutter.
*/
.container,
.container-lg,
.container-md,
.container-sm,
.container-xl,
.container-xxl {
width: min(1500px, 100%) !important;
max-width: 1500px !important;
margin-right: auto !important;
margin-left: auto !important;
padding-right: 0 !important;
padding-left: 0 !important;
}
@media (max-width: 991.98px) {
.container,
.container-lg,
.container-md,
.container-sm,
.container-xl,
.container-xxl,
.container-fluid {
width: 100% !important;
max-width: 100% !important;
padding-right: 0 !important;
padding-left: 0 !important;
margin-right: auto !important;
margin-left: auto !important;
}
.row {
margin-right: 0 !important;
margin-left: 0 !important;
}
.row > * {
padding-right: 0 !important;
padding-left: 0 !important;
}
}
/* ==================== Heading data-anime visibility hotfix ==================== */
/*
* Fix for BCM paragraph headings that remain invisible after data-anime/splitting.
* Scoped away from slider/page-title/header/footer so hero slider texts are not touched.
*/
body:not(.vr-menu-open) h3.vr-force-visible-text,
body:not(.vr-menu-open) h3.vr-force-visible-text *,
.villarossa-content h3[data-anime],
.villarossa-content h3[data-anime] *,
.villarossa-layout-b-wood-copy h3[data-anime],
.villarossa-layout-b-wood-copy h3[data-anime] * {
opacity: 1 !important;
visibility: visible !important;
transform: none !important;
-webkit-transform: none !important;
animation: none !important;
-webkit-animation: none !important;
transition-delay: 0s !important;
animation-delay: 0s !important;
-webkit-animation-delay: 0s !important;
clip-path: none !important;
-webkit-clip-path: none !important;
}
h3.vr-force-visible-text {
display: block !important;
color: #111 !important;
}
h3.vr-force-visible-text .line,
h3.vr-force-visible-text .word,
h3.vr-force-visible-text .char,
h3.vr-force-visible-text span {
opacity: 1 !important;
visibility: visible !important;
}
/* ==================== Stay anchor nav full width white bar ==================== */
/*
* STAY room anchor navigation directly below page-title.
* Full viewport white bar, compact bottom spacing.
*/
.vr-stay-anchor-nav.vr-records-anchor-nav {
position: relative !important;
z-index: 20 !important;
display: flex !important;
flex-wrap: wrap !important;
align-items: center !important;
justify-content: center !important;
gap: clamp(22px, 4vw, 58px) !important;
width: 100vw !important;
max-width: 100vw !important;
margin-left: calc(50% - 50vw) !important;
margin-right: calc(50% - 50vw) !important;
margin-top: 0 !important;
margin-bottom: 0 !important;
padding: 20px clamp(18px, 4vw, 70px) 20px !important;
background: #fff !important;
background-color: #fff !important;
border: 0 !important;
}
.vr-stay-anchor-nav.vr-records-anchor-nav .vr-stay-room-anchor-btn {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
margin: 0 !important;
padding: 0 !important;
border: 0 !important;
border-radius: 0 !important;
background: transparent !important;
color: #111 !important;
font-family: var(--alt-font);
font-size: 16px !important;
font-weight: 500 !important;
line-height: 1.2 !important;
letter-spacing: .05em !important;
text-transform: uppercase !important;
text-decoration: none !important;
}
.vr-stay-anchor-nav.vr-records-anchor-nav .vr-stay-room-anchor-btn:hover,
.vr-stay-anchor-nav.vr-records-anchor-nav .vr-stay-room-anchor-btn:focus {
color: var(--base-color, #c4a15f) !important;
background: transparent !important;
text-decoration: none !important;
}
@media (max-width: 767.98px) {
.vr-stay-anchor-nav.vr-records-anchor-nav {
gap: 16px 24px !important;
padding: 18px 18px 8px !important;
}
.vr-stay-anchor-nav.vr-records-anchor-nav .vr-stay-room-anchor-btn {
font-size: 14px !important;
letter-spacing: .08em !important;
}
}
/* ==================== WI Instagram photo size match ==================== */
/*
* wi-instagram.php / Layout B.
* Match the supplied Wood sample proportions:
* - photo row is still free/full-bleed
* - photos are NOT stretched into four huge columns
* - each photo keeps a controlled width
*/
.vr-instagram-wood--layout-b {
width: 100% !important;
max-width: none !important;
overflow: hidden !important;
}
.vr-instagram-wood__stage {
width: 100vw !important;
max-width: none !important;
margin-left: calc(50% - 50vw) !important;
margin-right: calc(50% - 50vw) !important;
overflow: visible !important;
}
.vr-instagram-wood__track {
display: inline-flex !important;
align-items: flex-start !important;
justify-content: flex-start !important;
gap: clamp(58px, 5vw, 108px) !important;
width: max-content !important;
max-width: none !important;
margin-left: clamp(85px, 9vw, 180px) !important;
margin-right: 0 !important;
box-sizing: border-box !important;
transform: translate3d(var(--vr-instagram-x, 160px), 0, 0) !important;
will-change: transform !important;
}
.vr-instagram-wood__item {
flex: 0 0 auto !important;
width: auto !important;
max-width: none !important;
margin: 0 !important;
padding: 0 !important;
box-sizing: border-box !important;
}
.vr-instagram-wood__item img {
display: block !important;
width: 100% !important;
max-width: none !important;
height: auto !important;
object-fit: cover !important;
}
.vr-instagram-wood__item--1 {
width: clamp(260px, 17.3vw, 355px) !important;
padding-right: 0 !important;
}
.vr-instagram-wood__item--2 {
width: clamp(235px, 15.7vw, 322px) !important;
padding-left: 0 !important;
padding-top: clamp(36px, 2.7vw, 55px) !important;
}
.vr-instagram-wood__item--3 {
width: clamp(238px, 15.3vw, 314px) !important;
padding-left: 0 !important;
padding-top: clamp(74px, 5.2vw, 106px) !important;
}
.vr-instagram-wood__item--4 {
width: clamp(260px, 17.3vw, 355px) !important;
margin-top: clamp(-58px, -2.8vw, -36px) !important;
padding-left: clamp(18px, 1.6vw, 32px) !important;
padding-right: 0 !important;
}
.vr-instagram-wood__item--1 img {
aspect-ratio: 570 / 682 !important;
}
.vr-instagram-wood__item--2 img {
aspect-ratio: 510 / 396 !important;
}
.vr-instagram-wood__item--3 img {
aspect-ratio: 470 / 564 !important;
}
.vr-instagram-wood__item--4 img {
aspect-ratio: 568 / 686 !important;
}
@media (max-width: 991.98px) {
.vr-instagram-wood__stage {
width: 100vw !important;
max-width: none !important;
margin-left: calc(50% - 50vw) !important;
margin-right: calc(50% - 50vw) !important;
overflow: hidden !important;
}
.vr-instagram-wood__track {
display: block !important;
width: 100% !important;
max-width: none !important;
margin-left: 0 !important;
transform: none !important;
}
.vr-instagram-wood__item {
display: none !important;
}
.vr-instagram-wood__item--1 {
display: block !important;
width: min(78vw, 360px) !important;
margin: 0 auto !important;
padding: 0 !important;
}
.vr-instagram-wood__item--2,
.vr-instagram-wood__item--3,
.vr-instagram-wood__item--4 {
padding: 0 !important;
margin: 0 !important;
}
}
/* ==================== Suite gallery top aligned with text ==================== */
/*
* Suites only:
* Gallery/photo column must start at the same vertical line as the text/content column.
*/
.vr-records-layout-a .vr-records-item > .row {
align-items: flex-start !important;
}
.vr-records-layout-a .vr-records-item > .row > [class*="col-"] {
align-self: flex-start !important;
}
.vr-records-layout-a .vr-records-suite-gallery,
.vr-records-layout-a .vr-records-copy {
margin-top: 0 !important;
padding-top: 0 !important;
}
/* ==================== Suite content UL LI table/list-service style ==================== */
/*
* Suites text/content only.
* Wood/list-service styling scoped to the suites content so global ul/li are not affected.
*/
.vr-records-layout-a--stay .vr-records-content ul,
.vr-records-layout-a--stay .vr-records-summary ul {
display: block !important;
list-style: none !important;
margin-top: 0 !important;
margin-right: 0 !important;
margin-bottom: 30px !important;
margin-left: 2px !important;
padding: 0 !important;
}
.vr-records-layout-a--stay .vr-records-content ul:last-child,
.vr-records-layout-a--stay .vr-records-summary ul:last-child,
.vr-records-layout-a--stay .vr-records-content > :last-child,
.vr-records-layout-a--stay .vr-records-summary > :last-child {
margin-bottom: 0 !important;
}
/* list-service wrapper support: */
.vr-records-layout-a--stay .vr-records-content .list-service ul,
.vr-records-layout-a--stay .vr-records-summary .list-service ul {
display: block !important;
list-style: none !important;
margin: 0 0 30px 2px !important;
padding: 0 !important;
}
/* list-service as the UL itself: */
.vr-records-layout-a--stay .vr-records-content ul.list-service,
.vr-records-layout-a--stay .vr-records-summary ul.list-service {
display: block !important;
list-style: none !important;
margin: 0 0 30px 2px !important;
padding: 0 !important;
}
/* Two-column list-service, both possible HTML structures supported. */
.vr-records-layout-a--stay .vr-records-content .list-service.list-2c,
.vr-records-layout-a--stay .vr-records-summary .list-service.list-2c,
.vr-records-layout-a--stay .vr-records-content ul.list-service.list-2c,
.vr-records-layout-a--stay .vr-records-summary ul.list-service.list-2c,
.vr-records-layout-a--stay .vr-records-content .list-service.list-2c ul,
.vr-records-layout-a--stay .vr-records-summary .list-service.list-2c ul {
display: flex !important;
flex-wrap: wrap !important;
gap: 0 40px !important;
list-style: none !important;
margin-left: 2px !important;
padding: 0 !important;
}
/* Suite content LI reset + Wood spacing. */
.vr-records-layout-a--stay .vr-records-content li,
.vr-records-layout-a--stay .vr-records-summary li,
.vr-records-layout-a--stay .vr-records-content ul li,
.vr-records-layout-a--stay .vr-records-summary ul li,
.vr-records-layout-a--stay .vr-records-content .list-service li,
.vr-records-layout-a--stay .vr-records-summary .list-service li {
margin: 0 0 5px 0 !important;
padding: 7px 0 !important;
border: 0 !important;
border-bottom: 1px solid var(--color-1, rgba(29, 24, 20, .20)) !important;
list-style: none !important;
list-style-position: outside !important;
font-size: 14px !important;
font: inherit !important;
line-height: inherit !important;
vertical-align: baseline !important;
box-sizing: border-box !important;
}
/* WordPress-like text column fallback inside suite content. */
.vr-records-layout-a--stay .vr-records-content .wpb_text_column li,
.vr-records-layout-a--stay .vr-records-summary .wpb_text_column li {
list-style: none !important;
padding-left: 25px !important;
margin-bottom: 5px !important;
}
/* list-service 2c item widths. */
.vr-records-layout-a--stay .vr-records-content .list-service.list-2c li,
.vr-records-layout-a--stay .vr-records-summary .list-service.list-2c li,
.vr-records-layout-a--stay .vr-records-content ul.list-service.list-2c li,
.vr-records-layout-a--stay .vr-records-summary ul.list-service.list-2c li {
flex: 1 1 100% !important;
}
@media (min-width: 1000px) {
.vr-records-layout-a--stay .vr-records-content .list-service.list-2c li,
.vr-records-layout-a--stay .vr-records-summary .list-service.list-2c li,
.vr-records-layout-a--stay .vr-records-content ul.list-service.list-2c li,
.vr-records-layout-a--stay .vr-records-summary ul.list-service.list-2c li {
flex: 1 1 calc(50% - 20px) !important;
}
}
.vr-records-layout-a--stay .vr-records-content li::before,
.vr-records-layout-a--stay .vr-records-summary li::before {
display: none !important;
content: none !important;
}
/* ==================== Parallax image height boost ==================== */
/*
* Target:
* .skrollr-parallax.mx-auto.cover-background.position-relative.overflow-hidden.vr-parallax-width-ready
*
* Adds a little more vertical height to the parallax image area without changing
* the scroll width/parallax logic.
*/
.skrollr-parallax.mx-auto.cover-background.position-relative.overflow-hidden.vr-parallax-width-ready,
.villarossa-parallax-clean .skrollr-parallax.mx-auto.cover-background.position-relative.overflow-hidden.vr-parallax-width-ready {
min-height: clamp(720px, 58vw, 980px) !important;
}
@media (max-width: 991.98px) {
.skrollr-parallax.mx-auto.cover-background.position-relative.overflow-hidden.vr-parallax-width-ready,
.villarossa-parallax-clean .skrollr-parallax.mx-auto.cover-background.position-relative.overflow-hidden.vr-parallax-width-ready {
min-height: clamp(560px, 82vw, 760px) !important;
}
}
@media (max-width: 575.98px) {
.skrollr-parallax.mx-auto.cover-background.position-relative.overflow-hidden.vr-parallax-width-ready,
.villarossa-parallax-clean .skrollr-parallax.mx-auto.cover-background.position-relative.overflow-hidden.vr-parallax-width-ready {
min-height: 510px !important;
}
}
/* ==================== Parallax opposite image motion ==================== */
/*
* Target:
* .skrollr-parallax.mx-auto.cover-background.position-relative.overflow-hidden.vr-parallax-width-ready
*
* The image/background moves opposite to the page scroll, without wheel hijack.
*/
.skrollr-parallax.mx-auto.cover-background.position-relative.overflow-hidden.vr-parallax-width-ready,
.villarossa-parallax-clean .skrollr-parallax.mx-auto.cover-background.position-relative.overflow-hidden.vr-parallax-width-ready {
background-position: center calc(50% + var(--vr-parallax-bg-y, 0px)) !important;
background-size: cover !important;
will-change: width, background-position !important;
}
@media (max-width: 767.98px) {
.skrollr-parallax.mx-auto.cover-background.position-relative.overflow-hidden.vr-parallax-width-ready,
.villarossa-parallax-clean .skrollr-parallax.mx-auto.cover-background.position-relative.overflow-hidden.vr-parallax-width-ready {
background-position: center center !important;
will-change: width !important;
}
}
/* ==================== Fullscreen menu opacity 0.7 + alt-font ==================== */
/*
* Fullscreen menu overlay opacity.
* Background alpha is 0.70 so menu/contact text stays fully readable.
*/
.vr-fullscreen-menu {
background: rgba(12, 10, 8, .70) !important;
background-color: rgba(12, 10, 8, .70) !important;
}
.vr-fullscreen-menu::before,
.vr-fullscreen-menu::after {
background: rgba(12, 10, 8, .70) !important;
background-color: rgba(12, 10, 8, .70) !important;
}
/* Fullscreen menu typography */
.vr-fullscreen-menu,
.vr-fullscreen-menu a,
.vr-fullscreen-menu .vr-fullscreen-menu-link,
.vr-fullscreen-menu .vr-fullscreen-contact,
.vr-fullscreen-menu .vr-fullscreen-contact a,
.vr-fullscreen-menu .vr-fullscreen-address,
.vr-fullscreen-menu .vr-fullscreen-map,
.vr-fullscreen-menu .vr-fullscreen-map a {
font-family: var(--alt-font), sans-serif !important;
}
/* ==================== Fullscreen menu smaller grey text + stronger hover ==================== */
/*
* Fullscreen menu typography refinement:
* - slightly smaller letters
* - softer grey default color
* - stronger contrast on hover/active
*/
.vr-fullscreen-menu .vr-fullscreen-menu-list {
gap: clamp(8px, 1.2vw, 16px) !important;
}
.vr-fullscreen-menu .vr-fullscreen-menu-link {
color: rgba(255, 255, 255, .58) !important;
font-family: var(--alt-font), sans-serif !important;
font-size: clamp(42px, 5.2vw, 82px) !important;
font-weight: 500 !important;
line-height: .92 !important;
letter-spacing: .045em !important;
text-transform: uppercase !important;
transition: color .24s ease, opacity .24s ease, transform .24s ease !important;
}
.vr-fullscreen-menu .vr-fullscreen-menu-link:hover,
.vr-fullscreen-menu .vr-fullscreen-menu-link:focus,
.vr-fullscreen-menu .vr-fullscreen-menu-item.active .vr-fullscreen-menu-link {
color: #fff !important;
opacity: 1 !important;
transform: translateX(8px) !important;
text-decoration: none !important;
}
.vr-fullscreen-menu .vr-fullscreen-contact a,
.vr-fullscreen-menu .vr-fullscreen-address,
.vr-fullscreen-menu .vr-fullscreen-map a,
.vr-fullscreen-menu .vr-fullscreen-socials a {
color: rgba(255, 255, 255, .62) !important;
transition: color .24s ease, opacity .24s ease !important;
}
.vr-fullscreen-menu .vr-fullscreen-contact a:hover,
.vr-fullscreen-menu .vr-fullscreen-contact a:focus,
.vr-fullscreen-menu .vr-fullscreen-map a:hover,
.vr-fullscreen-menu .vr-fullscreen-map a:focus,
.vr-fullscreen-menu .vr-fullscreen-socials a:hover,
.vr-fullscreen-menu .vr-fullscreen-socials a:focus {
color: #fff !important;
opacity: 1 !important;
text-decoration: none !important;
}
@media (max-width: 991.98px) {
.vr-fullscreen-menu .vr-fullscreen-menu-link {
font-size: clamp(36px, 11vw, 58px) !important;
line-height: .96 !important;
}
}
@media (max-width: 575.98px) {
.vr-fullscreen-menu .vr-fullscreen-menu-link {
font-size: clamp(32px, 10vw, 46px) !important;
letter-spacing: .04em !important;
}
}
/* ==================== Fullscreen menu 50 percent + right column original font ==================== */
/*
* Menu links: 50% of the previous oversized fullscreen menu typography.
* Right/contact column: back to the site's normal/original font, not alt-font.
*/
.vr-fullscreen-menu .vr-fullscreen-menu-link {
font-family: var(--alt-font), sans-serif !important;
font-size: clamp(21px, 2.6vw, 41px) !important;
line-height: 1.05 !important;
letter-spacing: .055em !important;
}
.vr-fullscreen-menu .vr-fullscreen-menu-list {
gap: clamp(10px, 1.1vw, 18px) !important;
}
/* Right column original typography */
.vr-fullscreen-menu .vr-fullscreen-right,
.vr-fullscreen-menu .vr-fullscreen-right *,
.vr-fullscreen-menu .vr-fullscreen-contact,
.vr-fullscreen-menu .vr-fullscreen-contact a,
.vr-fullscreen-menu .vr-fullscreen-address,
.vr-fullscreen-menu .vr-fullscreen-map,
.vr-fullscreen-menu .vr-fullscreen-map a,
.vr-fullscreen-menu .vr-fullscreen-socials,
.vr-fullscreen-menu .vr-fullscreen-socials a {
font-family: var(--primary-font), sans-serif !important;
}
@media (max-width: 991.98px) {
.vr-fullscreen-menu .vr-fullscreen-menu-link {
font-size: clamp(18px, 5.5vw, 29px) !important;
line-height: 1.1 !important;
}
}
@media (max-width: 575.98px) {
.vr-fullscreen-menu .vr-fullscreen-menu-link {
font-size: clamp(16px, 5vw, 23px) !important;
line-height: 1.12 !important;
}
}
/* ==================== Fullscreen menu opacity specificity fix ==================== */
/*
* This wins over older, more specific rules like:
* body.vr-menu-open .vr-fullscreen-menu::before { background: rgba(..., .88) }
*/
body.vr-menu-open .vr-fullscreen-menu,
body.vr-menu-open .vr-fullscreen-menu::before,
body.vr-menu-open .vr-fullscreen-menu::after,
html body.vr-menu-open .vr-fullscreen-menu,
html body.vr-menu-open .vr-fullscreen-menu::before,
html body.vr-menu-open .vr-fullscreen-menu::after {
background: rgba(12, 10, 8, .70) !important;
background-color: rgba(12, 10, 8, .70) !important;
}
body.vr-menu-open .vr-fullscreen-menu {
opacity: 1 !important;
}
body.vr-menu-open .vr-fullscreen-menu > * {
opacity: 1 !important;
}
/* ==================== Smooth inertia page scroll ==================== */
/*
* Smooth page scroll with slow stop.
* JS handles wheel inertia on desktop. CSS keeps anchor offsets clean.
*/
html {
scroll-behavior: smooth;
}
html.vr-smooth-inertia-active {
scroll-behavior: auto !important;
}
[id] {
scroll-margin-top: 110px;
}
@media (max-width: 991.98px) {
[id] {
scroll-margin-top: 86px;
}
}
@media (prefers-reduced-motion: reduce) {
html,
html.vr-smooth-inertia-active {
scroll-behavior: auto !important;
}
}
/* ==================== Stay anchor nav font size 30 ==================== */
.vr-stay-anchor-nav.vr-records-anchor-nav .vr-stay-room-anchor-btn {
font-size: 30px !important;
}
/* ==================== Page title top gradient overlay ==================== */
.page-title-slider-style .col-12.position-relative {
isolation: isolate !important;
}
.page-title-slider-style .page-title-mask-reveal {
position: relative !important;
z-index: 1 !important;
}
.page-title-slider-style .row-bg-overlay.row-bg-layer.vr-page-title-top-overlay {
position: absolute !important;
top: 0 !important;
right: 0 !important;
left: 0 !important;
z-index: 2 !important;
display: block !important;
width: 100% !important;
height: 48% !important;
min-height: 240px !important;
pointer-events: none !important;
background: linear-gradient(to bottom, #000000 0%, rgba(255, 255, 255, 0.001) 75%) !important;
opacity: .5 !important;
}
.page-title-slider-style .vr-page-title-content-layer {
z-index: 3 !important;
pointer-events: none !important;
}
.page-title-slider-style .vr-page-title-content-layer a,
.page-title-slider-style .vr-page-title-content-layer button {
pointer-events: auto !important;
}
@media (max-width: 991.98px) {
.page-title-slider-style .row-bg-overlay.row-bg-layer.vr-page-title-top-overlay {
height: 55% !important;
min-height: 210px !important;
}
}
/* ==================== Suite gallery arrows ==================== */
/*
* Native suite gallery prev/next arrows.
* Scoped only to the suites carousel.
*/
.vr-records-suite-carousel--native {
position: relative !important;
}
.vr-records-suite-carousel-arrow {
position: absolute !important;
top: 50% !important;
z-index: 15 !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
width: 48px !important;
height: 48px !important;
margin: 0 !important;
padding: 0 !important;
border: 1px solid rgba(255, 255, 255, .01) !important;
border-radius: 0 !important;
background: rgba(18, 15, 12, .34) !important;
color: #fff !important;
cursor: pointer !important;
transform: translateY(-50%) !important;
transition: background .24s ease, border-color .24s ease, opacity .24s ease !important;
}
.vr-records-suite-carousel-arrow:hover,
.vr-records-suite-carousel-arrow:focus {
border-color: #fff !important;
background: rgba(18, 15, 12, .78) !important;
outline: none !important;
}
.vr-records-suite-carousel-arrow--prev {
left: 24px !important;
}
.vr-records-suite-carousel-arrow--next {
right: 24px !important;
}
.vr-records-suite-carousel-arrow::before {
content: "" !important;
display: block !important;
width: 13px !important;
height: 13px !important;
border-top: 2px solid currentColor !important;
border-left: 2px solid currentColor !important;
}
.vr-records-suite-carousel-arrow--prev::before {
transform: rotate(-45deg) translate(2px, 2px) !important;
}
.vr-records-suite-carousel-arrow--next::before {
transform: rotate(135deg) translate(2px, 2px) !important;
}
@media (max-width: 767.98px) {
.vr-records-suite-carousel-arrow {
width: 42px !important;
height: 42px !important;
}
.vr-records-suite-carousel-arrow--prev {
left: 14px !important;
}
.vr-records-suite-carousel-arrow--next {
right: 14px !important;
}
}
/* ==================== Paragraph Layout C staggered separated motion ==================== */
/*
* Layout C fix:
* - prevents same-side photos from sticking together
* - photo 4 is shifted to the right
* - photo 5 is shifted to the left
* - each photo has different range/phase/easing
* - overrides old vr-wood-photo-motion variables inside Layout C
*/
.vr-paragraph-layout-c .vr-paragraph-layout-c-row {
align-items: flex-start !important;
}
.vr-paragraph-layout-c .vr-paragraph-layout-c-copy {
align-self: flex-start !important;
padding-top: 150px !important;
}
.vr-paragraph-layout-c .vr-paragraph-layout-c-motion {
transform: translate3d(var(--vr-layout-c-x, 0px), var(--vr-layout-c-y, 0px), 0) !important;
will-change: transform !important;
transition: transform 120ms linear !important;
}
.vr-paragraph-layout-c .vr-paragraph-layout-c-motion img {
transform: none !important;
will-change: auto !important;
}
.vr-paragraph-layout-c .vr-paragraph-layout-c-motion-4 {
margin-left: clamp(95px, 8vw, 155px) !important;
}
.vr-paragraph-layout-c .vr-paragraph-layout-c-motion-5 {
margin-right: clamp(95px, 8vw, 155px) !important;
}
@media (max-width: 991.98px) {
.vr-paragraph-layout-c .vr-paragraph-layout-c-copy {
padding-top: 40px !important;
}
.vr-paragraph-layout-c .vr-paragraph-layout-c-motion {
transform: none !important;
transition: none !important;
will-change: auto !important;
margin-left: 0 !important;
margin-right: 0 !important;
}
}
/* ==================== Paragraph Layout C photo 4 centered + extra spacing ==================== */
/*
* Layout C correction:
* - photo 4 is centered below the right-side photo 3
* - extra vertical space prevents photo 3 and photo 4 from sticking together
* - keeps staggered/asynchronous motion active
*/
.vr-paragraph-layout-c .vr-paragraph-layout-c-motion-4,
.vr-paragraph-layout-c .vr-paragraph-layout-c-motion-4--center {
float: none !important;
clear: both !important;
display: block !important;
top: auto !important;
left: auto !important;
right: auto !important;
width: min(60%, 430px) !important;
margin-top: clamp(95px, 8vw, 155px) !important;
margin-right: auto !important;
margin-left: auto !important;
}
.vr-paragraph-layout-c .vr-paragraph-layout-c-motion-3 {
margin-bottom: clamp(45px, 5vw, 90px) !important;
}
@media (max-width: 991.98px) {
.vr-paragraph-layout-c .vr-paragraph-layout-c-motion-4,
.vr-paragraph-layout-c .vr-paragraph-layout-c-motion-4--center {
width: 90% !important;
margin-top: 45px !important;
margin-right: 0 !important;
margin-left: 0 !important;
}
.vr-paragraph-layout-c .vr-paragraph-layout-c-motion-3 {
margin-bottom: 30px !important;
}
}
/* ==================== Paragraph Layout C photo 4 mid position ==================== */
/*
* Photo 4 was too low after centering.
* This places it roughly halfway between the previous and current position.
* Add this AFTER the previous photo4 center CSS block.
*/
.vr-paragraph-layout-c .vr-paragraph-layout-c-motion-4,
.vr-paragraph-layout-c .vr-paragraph-layout-c-motion-4--center {
margin-top: clamp(45px, 4.6vw, 78px) !important;
}
/* Keep a controlled gap from photo 3, but not as large as before */
.vr-paragraph-layout-c .vr-paragraph-layout-c-motion-3 {
margin-bottom: clamp(22px, 3vw, 48px) !important;
}
@media (max-width: 991.98px) {
.vr-paragraph-layout-c .vr-paragraph-layout-c-motion-4,
.vr-paragraph-layout-c .vr-paragraph-layout-c-motion-4--center {
margin-top: 28px !important;
}
.vr-paragraph-layout-c .vr-paragraph-layout-c-motion-3 {
margin-bottom: 20px !important;
}
}
/* ==================== Villa Rossa Gift Box include ==================== */
.vr-giftbox-section {
background: #f6f0e4 !important;
}
.vr-giftbox-title {
margin: 0 !important;
font-size: clamp(58px, 7.6vw, 118px) !important;
font-weight: 500 !important;
line-height: .88 !important;
letter-spacing: -.04em !important;
text-transform: uppercase !important;
}
.vr-giftbox-copy {
max-width: 560px !important;
color: rgba(29, 24, 20, .78) !important;
font-size: 19px !important;
line-height: 1.72 !important;
}
.vr-giftbox-copy p {
margin-top: 0 !important;
margin-bottom: 22px !important;
}
.vr-giftbox-lead {
color: #1d1814 !important;
font-size: 22px !important;
line-height: 1.55 !important;
}
.vr-giftbox-actions {
margin-top: 34px !important;
}
.vr-giftbox-btn {
min-width: 70px !important;
min-height: 70px !important;
padding: 0 22px !important;
border: 2px solid #1d1814 !important;
border-radius: 0 !important;
background: transparent !important;
color: #1d1814 !important;
font-family: var(--alt-font, inherit) !important;
font-size: 16px !important;
font-weight: 500 !important;
line-height: 1 !important;
letter-spacing: .14em !important;
text-transform: uppercase !important;
text-decoration: none !important;
}
.vr-giftbox-btn:hover,
.vr-giftbox-btn:focus {
background: #1d1814 !important;
color: #fff !important;
}
.vr-giftbox-contact {
display: flex !important;
flex-direction: column !important;
gap: 7px !important;
margin-top: 32px !important;
color: rgba(29, 24, 20, .68) !important;
font-size: 15px !important;
line-height: 1.5 !important;
}
.vr-giftbox-contact a {
width: max-content !important;
color: #1d1814 !important;
text-decoration: underline !important;
text-underline-offset: 4px !important;
}
@media (max-width: 991.98px) {
.vr-giftbox-section {
padding-right: 22px !important;
padding-left: 22px !important;
}
.vr-giftbox-title {
font-size: clamp(48px, 15vw, 76px) !important;
}
.vr-giftbox-copy {
font-size: 17px !important;
line-height: 1.68 !important;
}
.vr-giftbox-lead {
font-size: 20px !important;
}
}
/* ==================== Villa Rossa treatments range include ==================== */
.vr-treatments-range-section {
background: #fff !important;
}
.vr-treatments-range-title {
margin: 0 auto !important;
color: #1d1814 !important;
font-size: clamp(58px, 7.4vw, 120px) !important;
font-weight: 500 !important;
line-height: .86 !important;
letter-spacing: -.04em !important;
text-transform: uppercase !important;
}
.vr-treatments-range-intro {
max-width: 690px !important;
margin: 34px auto 0 !important;
color: rgba(29, 24, 20, .72) !important;
font-size: 20px !important;
line-height: 1.68 !important;
}
.vr-treatments-range-grid {
margin-top: clamp(55px, 6vw, 95px) !important;
row-gap: 28px !important;
}
.vr-treatments-range-card {
position: relative !important;
height: 100% !important;
min-height: 310px !important;
padding: 36px 30px 34px !important;
border-top: 1px solid rgba(29, 24, 20, .22) !important;
border-bottom: 1px solid rgba(29, 24, 20, .22) !important;
background: transparent !important;
color: rgba(29, 24, 20, .74) !important;
text-align: left !important;
transition: background .28s ease, color .28s ease, transform .28s ease !important;
}
.vr-treatments-range-card:hover {
background: #1d1814 !important;
color: rgba(255, 255, 255, .76) !important;
transform: translateY(-6px) !important;
}
.vr-treatments-range-number {
display: block !important;
margin-bottom: 62px !important;
color: rgba(29, 24, 20, .38) !important;
font-size: 14px !important;
line-height: 1 !important;
letter-spacing: .14em !important;
}
.vr-treatments-range-card:hover .vr-treatments-range-number {
color: rgba(255, 255, 255, .45) !important;
}
.vr-treatments-range-card-title {
margin: 0 0 18px !important;
color: #1d1814 !important;
font-size: clamp(34px, 3.2vw, 54px) !important;
font-weight: 500 !important;
line-height: .9 !important;
letter-spacing: -.02em !important;
text-transform: uppercase !important;
}
.vr-treatments-range-card:hover .vr-treatments-range-card-title {
color: #fff !important;
}
.vr-treatments-range-card p {
margin: 0 !important;
font-size: 16px !important;
line-height: 1.68 !important;
}
.vr-treatments-range-btn {
min-width: 70px !important;
min-height: 70px !important;
margin-top: clamp(42px, 5vw, 72px) !important;
padding: 0 22px !important;
border: 2px solid #1d1814 !important;
border-radius: 0 !important;
background: transparent !important;
color: #1d1814 !important;
font-family: var(--alt-font, inherit) !important;
font-size: 16px !important;
font-weight: 500 !important;
line-height: 1 !important;
letter-spacing: .14em !important;
text-transform: uppercase !important;
text-decoration: none !important;
}
.vr-treatments-range-btn:hover,
.vr-treatments-range-btn:focus {
background: #1d1814 !important;
color: #fff !important;
}
@media (max-width: 991.98px) {
.vr-treatments-range-section {
padding-right: 22px !important;
padding-left: 22px !important;
}
.vr-treatments-range-title {
font-size: clamp(48px, 15vw, 78px) !important;
}
.vr-treatments-range-intro {
font-size: 17px !important;
line-height: 1.68 !important;
}
.vr-treatments-range-card {
min-height: 260px !important;
}
.vr-treatments-range-number {
margin-bottom: 42px !important;
}
}
/* ==================== Villa Rossa treatments range accordions ==================== */
.vr-treatments-range-section--accordions {
background: #fff !important;
}
.vr-treatments-range-section--accordions .vr-treatments-range-title {
margin: 0 !important;
color: #1d1814 !important;
font-size: clamp(58px, 7.2vw, 116px) !important;
font-weight: 500 !important;
line-height: .86 !important;
letter-spacing: -.04em !important;
text-transform: uppercase !important;
}
.vr-treatments-range-intro--left {
max-width: 520px !important;
margin: 34px 0 0 !important;
color: rgba(29, 24, 20, .72) !important;
font-size: 19px !important;
line-height: 1.72 !important;
}
.vr-treatments-range-section--accordions .vr-treatments-range-btn {
min-width: 70px !important;
min-height: 70px !important;
margin-top: 42px !important;
padding: 0 22px !important;
border: 2px solid #1d1814 !important;
border-radius: 0 !important;
background: transparent !important;
color: #1d1814 !important;
font-family: var(--alt-font, inherit) !important;
font-size: 16px !important;
font-weight: 500 !important;
line-height: 1 !important;
letter-spacing: .14em !important;
text-transform: uppercase !important;
text-decoration: none !important;
}
.vr-treatments-range-section--accordions .vr-treatments-range-btn:hover,
.vr-treatments-range-section--accordions .vr-treatments-range-btn:focus {
background: #1d1814 !important;
color: #fff !important;
}
.vr-treatments-accordion {
border-top: 1px solid rgba(29, 24, 20, .22) !important;
}
.vr-treatments-accordion-item {
border-bottom: 1px solid rgba(29, 24, 20, .22) !important;
}
.vr-treatments-accordion-item,
.vr-treatments-accordion-summary {
background: transparent !important;
}
.vr-treatments-accordion-summary {
position: relative !important;
display: grid !important;
grid-template-columns: 54px minmax(0, 1fr) auto 34px !important;
align-items: center !important;
gap: 18px !important;
min-height: 118px !important;
padding: 28px 0 !important;
color: #1d1814 !important;
list-style: none !important;
cursor: pointer !important;
}
.vr-treatments-accordion-summary::-webkit-details-marker {
display: none !important;
}
.vr-treatments-accordion-number {
color: rgba(29, 24, 20, .42) !important;
font-size: 14px !important;
line-height: 1 !important;
letter-spacing: .14em !important;
}
.vr-treatments-accordion-title {
color: #1d1814 !important;
font-size: clamp(38px, 4.1vw, 66px) !important;
font-weight: 500 !important;
line-height: .9 !important;
letter-spacing: -.03em !important;
text-transform: uppercase !important;
}
.vr-treatments-accordion-duration {
color: rgba(29, 24, 20, .58) !important;
font-size: 14px !important;
line-height: 1 !important;
letter-spacing: .10em !important;
text-transform: uppercase !important;
white-space: nowrap !important;
}
.vr-treatments-accordion-icon {
position: relative !important;
display: inline-flex !important;
width: 34px !important;
height: 34px !important;
border: 1px solid rgba(29, 24, 20, .35) !important;
border-radius: 50% !important;
}
.vr-treatments-accordion-icon::before,
.vr-treatments-accordion-icon::after {
content: "" !important;
position: absolute !important;
left: 50% !important;
top: 50% !important;
width: 13px !important;
height: 1px !important;
background: #1d1814 !important;
transform: translate(-50%, -50%) !important;
transition: transform .25s ease !important;
}
.vr-treatments-accordion-icon::after {
transform: translate(-50%, -50%) rotate(90deg) !important;
}
.vr-treatments-accordion-item[open] .vr-treatments-accordion-icon::after {
transform: translate(-50%, -50%) rotate(0deg) !important;
}
.vr-treatments-accordion-content {
max-width: 620px !important;
padding: 0 88px 36px 72px !important;
color: rgba(29, 24, 20, .72) !important;
font-size: 18px !important;
line-height: 1.72 !important;
}
.vr-treatments-accordion-content p {
margin: 0 !important;
}
.vr-treatments-accordion-summary:hover .vr-treatments-accordion-title,
.vr-treatments-accordion-item[open] .vr-treatments-accordion-title {
color: var(--base-color, #79d3e1) !important;
}
@media (max-width: 991.98px) {
.vr-treatments-range-section--accordions {
padding-right: 22px !important;
padding-left: 22px !important;
}
.vr-treatments-range-section--accordions .vr-treatments-range-title {
font-size: clamp(48px, 15vw, 78px) !important;
}
.vr-treatments-range-intro--left {
font-size: 17px !important;
line-height: 1.68 !important;
margin-bottom: 44px !important;
}
.vr-treatments-accordion-summary {
grid-template-columns: 40px minmax(0, 1fr) 32px !important;
min-height: 94px !important;
gap: 14px !important;
padding: 24px 0 !important;
}
.vr-treatments-accordion-duration {
grid-column: 2 / 3 !important;
grid-row: 2 !important;
font-size: 13px !important;
}
.vr-treatments-accordion-icon {
grid-column: 3 / 4 !important;
grid-row: 1 / 3 !important;
width: 32px !important;
height: 32px !important;
}
.vr-treatments-accordion-title {
font-size: clamp(34px, 11vw, 54px) !important;
}
.vr-treatments-accordion-content {
padding: 0 0 30px 54px !important;
font-size: 16px !important;
line-height: 1.68 !important;
}
}
@media (max-width: 575.98px) {
.vr-treatments-accordion-summary {
grid-template-columns: 34px minmax(0, 1fr) 30px !important;
}
.vr-treatments-accordion-content {
padding-left: 48px !important;
}
}