.lch-detendez-spa {
--lch-ds-bg: #f7f3ed;
--lch-ds-ink: #2a2622;
--lch-ds-muted: #5a534c;
--lch-ds-gold: #b8924a;
--lch-ds-gold-soft: #9a7d55;
--lch-ds-leaf: rgba(154, 125, 85, 0.38);
position: relative;
isolation: isolate;
display: grid;
grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
min-height: min(78vh, 44rem);
background: var(--lch-ds-bg);
color: var(--lch-ds-ink);
overflow: hidden;
font-family: "Outfit", system-ui, sans-serif;
}
.lch-detendez-spa__media {
position: relative;
min-height: 100%;
background: #d9d3c8;
overflow: hidden;
}
.lch-detendez-spa__viewport {
position: absolute;
inset: 0;
}
.lch-detendez-spa__image {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
transition: opacity 0.28s ease;
}
.lch-detendez-spa.is-animating .lch-detendez-spa__image {
opacity: 0.35;
}
.lch-detendez-spa__nav {
position: absolute;
top: 50%;
transform: translateY(-50%);
z-index: 2;
width: 2.6rem;
height: 2.6rem;
border: 0;
border-radius: 999px;
background: rgba(255, 255, 255, 0.92);
color: #3a342e;
display: grid;
place-items: center;
cursor: pointer;
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
transition: background 0.2s ease, transform 0.2s ease;
}
.lch-detendez-spa__nav:hover,
.lch-detendez-spa__nav:focus-visible {
background: #fff;
outline: none;
}
.lch-detendez-spa__nav--prev { left: 1rem; }
.lch-detendez-spa__nav--next { right: 1rem; }
.lch-detendez-spa__panel {
position: relative;
display: flex;
align-items: center;
padding: clamp(2.5rem, 5vw, 4.25rem) clamp(1.75rem, 4.5vw, 3.75rem);
box-sizing: border-box;
}
.lch-detendez-spa__botanical {
position: absolute;
inset: 0;
pointer-events: none;
color: var(--lch-ds-leaf);
}
.lch-detendez-spa__branch {
position: absolute;
right: clamp(-1.5rem, -0.5vw, 0.5rem);
top: clamp(1rem, 3vw, 2.5rem);
width: clamp(5.5rem, 11vw, 8.5rem);
height: auto;
}
.lch-detendez-spa__copy {
position: relative;
z-index: 1;
width: min(34rem, 100%);
}
.lch-detendez-spa__eyebrow {
margin: 0 0 0.85rem;
font-size: 0.72rem;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--lch-ds-gold-soft);
font-weight: 400;
}
.lch-detendez-spa__title,
.wpcursor-component.lch-detendez-spa .lch-detendez-spa__title,
.lch-detendez-spa h2.lch-detendez-spa__title {
margin: 0 0 0.85rem !important;
font-family: "Cormorant Garamond", Georgia, serif !important;
font-weight: 500 !important;
font-size: clamp(2rem, 3.6vw, 2.85rem) !important;
line-height: 1.12 !important;
color: var(--lch-ds-ink) !important;
}
.lch-detendez-spa__title-lead,
.lch-detendez-spa__title-accent,
.wpcursor-component.lch-detendez-spa .lch-detendez-spa__title-lead,
.wpcursor-component.lch-detendez-spa .lch-detendez-spa__title-accent,
.lch-detendez-spa h2.lch-detendez-spa__title span {
font-family: "Cormorant Garamond", Georgia, serif !important;
font-weight: 500 !important;
letter-spacing: normal !important;
text-transform: none !important;
}
.lch-detendez-spa__title-lead {
display: inline;
}
.lch-detendez-spa__title-accent,
.wpcursor-component.lch-detendez-spa .lch-detendez-spa__title-accent {
font-family: "Cormorant Garamond", Georgia, serif !important;
display: inline !important;
margin-left: 0.28em !important;
color: #b8924a !important;
font-size: 1.12em !important;
font-weight: 600 !important;
}
.lch-detendez-spa__note {
margin: 0 0 1.15rem;
font-size: 0.92rem;
font-weight: 400;
color: var(--lch-ds-ink);
}
.lch-detendez-spa__text {
margin: 0 0 0.95rem;
font-weight: 300;
font-size: clamp(0.94rem, 1.3vw, 1.02rem);
line-height: 1.7;
color: var(--lch-ds-muted);
}
.lch-detendez-spa__features {
list-style: none;
margin: 1.5rem 0 1.75rem;
padding: 0;
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 0.85rem 0.75rem;
}
.lch-detendez-spa__feature {
display: flex;
flex-direction: column;
align-items: center;
gap: 0.55rem;
text-align: center;
}
.lch-detendez-spa__feature-icon {
display: grid;
place-items: center;
width: 3.15rem;
height: 3.15rem;
border: 1px solid var(--lch-ds-gold-soft);
border-radius: 999px;
color: var(--lch-ds-gold-soft);
}
.lch-detendez-spa__feature-label {
font-size: 0.78rem;
line-height: 1.35;
font-weight: 400;
color: var(--lch-ds-gold-soft);
}
.lch-detendez-spa__cta {
display: inline-flex;
align-items: center;
gap: 0.65rem;
min-height: 2.85rem;
padding: 0.75rem 1.25rem;
background: var(--lch-ds-gold);
color: #1f1b17;
text-decoration: none;
font-size: 0.88rem;
font-weight: 500;
border-radius: 2px;
transition: background 0.2s ease, transform 0.2s ease, gap 0.2s ease;
}
.lch-detendez-spa__cta:hover,
.lch-detendez-spa__cta:focus-visible {
background: #c9a255;
gap: 0.85rem;
outline: none;
}
@media (max-width: 980px) {
.lch-detendez-spa {
grid-template-columns: 1fr;
min-height: 0;
}
.lch-detendez-spa__media {
min-height: min(52vw, 22rem);
aspect-ratio: 4 / 3;
}
.lch-detendez-spa__features {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 1.1rem 1rem;
}
}
@media (max-width: 560px) {
.lch-detendez-spa__panel {
padding: 2.25rem 1.2rem 2.5rem;
}
.lch-detendez-spa__title-accent {
font-family: "Cormorant Garamond", Georgia, serif !important;
display: block;
margin-left: 0;
margin-top: 0.1rem;
}
.lch-detendez-spa__nav {
width: 2.3rem;
height: 2.3rem;
}
.lch-detendez-spa__nav--prev { left: 0.65rem; }
.lch-detendez-spa__nav--next { right: 0.65rem; }
}
@media (prefers-reduced-motion: reduce) {
.lch-detendez-spa__image,
.lch-detendez-spa__cta {
transition: none;
}
}