/* Red Garden Villa — Webflow site custom code stylesheet. Holds every rule Webflow classes cannot express: element selectors, the fluid :root tokens, keyframes, pseudo-elements, JS state classes and reduced-motion overrides. It also re-applies the shared typography and utility declarations through each element's base class, because the WHTML import does not reliably attach trailing combo classes. Loaded from the site's head custom code. */ :root { --color-amber: #f1eee9; --color-white: #fdfbf9; --color-red: #BD353A; --color-black: #303030; --color-dusky: #ceb19c; --font-serif: "Cormorant Garamond", Garamond, "Times New Roman", serif; --text-h2: clamp(1.5rem, 1.357rem + 0.714vw, 2rem); --text-h3: clamp(1.25rem, 1.179rem + 0.357vw, 1.5rem); --text-h4: clamp(1.0625rem, 1.009rem + 0.268vw, 1.25rem); --text-body: clamp(0.9375rem, 0.92rem + 0.089vw, 1rem); --text-small: 0.75rem; --text-button: 0.75rem; --tracking-heading: 0.1em; --tracking-body: 0.04em; --tracking-small: 0.02em; --tracking-button: 0.3em; --leading-tight: 1.5; --leading-loose: 2; --space-3xs: 0.25rem; --space-2xs: 0.5rem; --space-xs: 0.75rem; --space-s: 1rem; --space-m: clamp(1.25rem, 1.179rem + 0.357vw, 1.5rem); --space-l: clamp(1.5rem, 1.357rem + 0.714vw, 2rem); --space-xl: clamp(2rem, 1.714rem + 1.429vw, 3rem); --space-2xl: clamp(3rem, 2.571rem + 2.143vw, 4.5rem); --space-3xl: clamp(4rem, 2.946rem + 5.268vw, 7.6875rem); --space-section: var(--space-3xl); --container-max: 74.625rem; --space-gutter: clamp(1.25rem, 4.5vw, 3rem); --shadow-soft: 0 2.8px 2.2px rgb(0 0 0 / 0.02), 0 6.7px 5.3px rgb(0 0 0 / 0.028), 0 12.5px 10px rgb(0 0 0 / 0.035), 0 22.3px 17.9px rgb(0 0 0 / 0.043), 0 41.8px 33.4px rgb(0 0 0 / 0.051), 0 100px 80px rgb(0 0 0 / 0.07); --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1); --ease-in-out-smooth: cubic-bezier(0.65, 0, 0.35, 1); --duration-fast: 300ms; --duration-normal: 600ms; --duration-slow: 1200ms; } *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } html { scrollbar-width: none; } html::-webkit-scrollbar { display: none; } body { margin: 0; min-height: 100vh; } h1, h2, h3, h4, h5, h6, p, figure, blockquote { margin: 0; } ul, ol { margin: 0; padding: 0; list-style: none; } img, video, svg { max-width: 100%; height: auto; vertical-align: middle; } a { color: inherit; text-decoration: none; } button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; } a, button, summary, [role="button"] { -webkit-tap-highlight-color: transparent; } body { background-color: var(--color-white); color: var(--color-black); font-family: var(--font-serif); font-size: var(--text-body); line-height: var(--leading-loose); letter-spacing: var(--tracking-body); } .cta-link::after { content: ""; display: block; width: 100%; height: 1px; background-color: currentColor; transform-origin: left center; transition: transform var(--duration-normal) var(--ease-out-expo); } .cta-link:hover::after { transform: scaleX(0.6); } .footer .cta-link::after { transform: scaleX(0); } .footer .cta-link:hover::after, .footer .cta-link:focus-visible::after { transform: scaleX(1); } .no-motion .accordion-panel { transition: flex-grow var(--duration-normal) var(--ease-in-out-smooth); } .accordion-panel.is-open { flex-grow: 6.4; box-shadow: var(--shadow-soft); } .accordion-panel::after { content: ""; position: absolute; inset: 0; background-color: rgb(48 48 48 / 0.6); transition: background-color var(--duration-normal) var(--ease-in-out-smooth); } .accordion-panel.is-open::after { background-color: rgb(48 48 48 / 0.9); } .accordion-panel.is-expanded { display: flex; flex-direction: column; justify-content: flex-end; } .accordion-panel.is-expanded .accordion-title { position: relative; top: auto; left: auto; bottom: auto; writing-mode: horizontal-tb; transform: none; white-space: normal; z-index: 1; margin: 0 var(--space-l) var(--space-s) var(--space-xl); } .accordion-panel.is-expanded .accordion-copy { position: relative; left: auto; right: auto; bottom: auto; z-index: 1; margin: 0 var(--space-l) var(--space-l) var(--space-xl); } .accordion-panel.is-expanded .accordion-title, .accordion-panel.is-expanded .accordion-copy { width: 26.6875rem; max-width: none; } .no-motion .accordion-copy { transition: opacity var(--duration-normal) var(--ease-in-out-smooth); } .no-motion .accordion-panel.is-open .accordion-copy { opacity: 1; transition-delay: 200ms; } .exp-toggle:hover .exp-title, .exp-toggle:focus-visible .exp-title { color: var(--color-red); } .exp-toggle:focus-visible { outline: 1px solid rgb(189 53 58 / 0.45); outline-offset: var(--space-3xs); } .exp-item.is-open .exp-chevron { transform: rotate(180deg); } .exp-item.is-open .exp-panel { height: auto; } .exp-layer.is-active { opacity: 1; } .gallery-tab::after { content: ''; position: absolute; left: 0; bottom: 0; width: 100%; height: 1px; background-color: var(--color-red); opacity: 0; transform: scaleX(0.6); transition: opacity var(--duration-fast) var(--ease-out-expo), transform var(--duration-fast) var(--ease-out-expo); } .gallery-tab.is-active::after, .gallery-tab:hover::after { opacity: 1; transform: scaleX(1); } .site-header .site-logo { pointer-events: auto; } .no-motion .site-header { position: absolute; } .site-nav.is-visible { opacity: 1; visibility: visible; transform: none; transition: transform 0.7s var(--ease-out-expo), opacity 0.4s ease, visibility 0s; } .no-motion .site-nav { opacity: 1; visibility: visible; transform: none; transition: none; } .site-nav-group:first-child { justify-content: flex-end; } .site-nav-link::after { content: ""; position: absolute; left: 0; right: 0; bottom: -0.4em; height: 1px; background-color: currentColor; transform: scaleX(0); transform-origin: left center; transition: transform 0.45s var(--ease-out-expo); } .site-nav-link:hover::after { transform: scaleX(1); } body.mobile-nav-open { overflow: hidden; } .no-motion .site-nav-logo-slot { background: url("https://s3.amazonaws.com/webflow-prod-assets/6a8d65cdf78b1e3714dda8d0/6a90f783dc8d6fb9250f1da6_logo-red-small.svg") center / contain no-repeat; } .site-logo.is-docked { color: var(--color-red); } .intro-inner .cta-link { align-self: center; } .location-map > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .nature-main > img { position: absolute; inset: 0; } .slide:first-child { opacity: 1; } .no-motion .slideshow-stage { height: auto; overflow: visible; } .no-motion .slideshow-slides { position: static; } .no-motion .slide { position: relative; inset: auto; height: 100svh; opacity: 1; } .no-motion .slideshow-keyhole { display: none; } .suites-track.is-dragging { cursor: grabbing; } .no-motion .suites-track { width: auto; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none; } .no-motion .suites-track::-webkit-scrollbar { display: none; } .suite-card-media img { position: relative; left: -10%; width: 120%; max-width: none; will-change: transform; } .suites-nav-btn:focus-visible { outline: 1px solid rgb(189 53 58 / 0.45); outline-offset: var(--space-3xs); } .suites-nav-btn.is-disabled { opacity: 0.3; pointer-events: none; } .accordion-bg { width: 100%; height: 100%; object-fit: cover; } .accordion-copy { font-family: var(--font-serif); font-size: var(--text-body); font-weight: 400; line-height: var(--leading-loose); letter-spacing: var(--tracking-body); color: var(--color-white); } .accordion-title { font-family: var(--font-serif); font-size: var(--text-h3); font-weight: 400; line-height: var(--leading-loose); letter-spacing: var(--tracking-heading); color: var(--color-white); } .cta-link { color: var(--color-red); } .exp-heading { font-family: var(--font-serif); font-size: var(--text-h3); font-weight: 400; line-height: var(--leading-loose); letter-spacing: var(--tracking-heading); } .gallery-row { overflow: hidden; } .gallery-video { width: 100%; height: 100%; object-fit: cover; } .hero-video { width: 100%; height: 100%; object-fit: cover; } .nature-copy { display: flex; flex-direction: column; gap: var(--space-s); } .press-strip { overflow: hidden; } .site-nav-link { font-family: var(--font-serif); font-size: var(--text-button); font-weight: 400; line-height: var(--leading-tight); letter-spacing: var(--tracking-button); text-transform: uppercase; } .slide-bg { width: 100%; height: 100%; object-fit: cover; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } @media screen and (max-width: 767px) { .accordion-panel.is-expanded .accordion-title, .accordion-panel.is-expanded .accordion-copy { width: auto; } .accordion-panel.is-open { min-height: 28rem; } .mobile-nav-toggle-line:first-child { top: 0.1875rem; } .mobile-nav-toggle-line:last-child { bottom: 0.1875rem; } .mobile-nav-toggle.is-open .mobile-nav-toggle-line:first-child { top: calc(50% - 0.5px); transform: rotate(45deg); } .mobile-nav-toggle.is-open .mobile-nav-toggle-line:last-child { bottom: calc(50% - 0.5px); transform: rotate(-45deg); } .mobile-nav-panel.is-open { pointer-events: auto; } .mobile-nav-link:hover, .mobile-nav-link:focus-visible { color: var(--color-red); } .mobile-nav-link:focus-visible { outline: 1px solid rgb(189 53 58 / 0.45); outline-offset: var(--space-3xs); } } @media screen and (min-width: 992px) { .nature-main { align-self: stretch; aspect-ratio: auto; min-height: 0; } } /* --- compensation for classes dropped during the WHTML import --- */ /* .gallery-row.u-overflow-hidden — without overflow clipping the marquee track (~14000px wide) spills out and the whole page scrolls sideways. */ .gallery-rows > * { overflow: hidden; } /* .media-cover on the CMS tile's media. `set_style` refuses the name because a global and four combo variants (.slide-bg.media-cover and friends) share it, so it never reaches the element; these declarations are what the class would have applied. */ .gallery-tile img, .gallery-tile video { width: 100%; height: 100%; object-fit: cover; } /* .nature-copy.stack-s — the paragraph stack lost its column gap. */ .nature-content > div:not([class]) { display: flex; flex-direction: column; gap: var(--space-s); } /* Every