.lch-paradis-intro {
--lch-paradis-ink: #2a2e2b;
--lch-paradis-muted: #6b6560;
--lch-paradis-accent: #C39D7A;
--lch-paradis-bg: #f7f2ea;
--lch-paradis-card: #ffffff;
--lch-paradis-shadow: 0 10px 28px rgba(40, 28, 20, 0.1);
position: relative;
width: 100vw;
max-width: 100vw;
left: 50%;
margin-left: -50vw;
margin-right: -50vw;
background: var(--lch-paradis-bg);
color: var(--lch-paradis-ink);
font-family: "Outfit", system-ui, sans-serif;
box-sizing: border-box;
padding: 0;
overflow: hidden;
min-height: min(88vh, 52rem);
}
.lch-paradis-intro__botanical {
position: absolute;
left: -4%;
top: 8%;
width: min(34vw, 22rem);
height: min(70%, 34rem);
pointer-events: none;
z-index: 2;
opacity: 0.14;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 480' fill='none' stroke='%23a89278' stroke-width='1.1'%3E%3Cpath d='M118 460c8-70 18-140 12-210s-28-120-8-190'/%3E%3Cpath d='M122 280c-42-18-72-8-96 18'/%3E%3Cpath d='M124 250c40-16 74-6 98 22'/%3E%3Cpath d='M120 210c-38-22-70-14-94 10'/%3E%3Cpath d='M126 180c44-20 78-10 102 18'/%3E%3Cpath d='M118 150c-36-24-68-18-90 4'/%3E%3Cpath d='M128 120c40-24 76-14 98 12'/%3E%3Cpath d='M116 90c-30-22-58-16-78 2'/%3E%3Cpath d='M130 70c34-22 64-14 84 8'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-size: contain;
background-position: left center;
} .lch-paradis-intro__media {
position: absolute;
inset: 0;
margin: 0;
z-index: 0;
overflow: hidden;
background: var(--lch-paradis-bg); -webkit-mask-image: linear-gradient(
105deg,
transparent 0%,
transparent 34%,
rgba(0, 0, 0, 0.25) 42%,
rgba(0, 0, 0, 0.75) 50%,
#000 58%,
#000 100%
);
mask-image: linear-gradient(
105deg,
transparent 0%,
transparent 34%,
rgba(0, 0, 0, 0.25) 42%,
rgba(0, 0, 0, 0.75) 50%,
#000 58%,
#000 100%
);
}
.lch-paradis-intro__media::before {
content: "";
position: absolute;
inset: 0;
z-index: 2;
pointer-events: none;
background: linear-gradient(
105deg,
var(--lch-paradis-bg) 0%,
var(--lch-paradis-bg) 36%,
rgba(247, 242, 234, 0.72) 44%,
rgba(247, 242, 234, 0.2) 52%,
transparent 62%
);
}
.lch-paradis-intro__image {
display: block;
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
object-position: 62% center;
--lch-paradis-parallax: 0px;
transform: scale(1.06) translate3d(0, var(--lch-paradis-parallax), 0);
opacity: 0.98;
filter: saturate(1.04) contrast(1.03);
will-change: transform;
transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1), filter 0.8s ease;
}
.lch-paradis-intro__media.is-inview .lch-paradis-intro__image {
animation: lch-paradis-ken 22s ease-in-out infinite alternate;
}
.lch-paradis-intro__media:hover .lch-paradis-intro__image {
filter: saturate(1.1) contrast(1.05);
}
@keyframes lch-paradis-ken {
0% {
transform: scale(1.06) translate3d(0, var(--lch-paradis-parallax), 0);
}
50% {
transform: scale(1.12) translate3d(-1.2%, calc(-0.8% + var(--lch-paradis-parallax)), 0);
}
100% {
transform: scale(1.09) translate3d(1%, calc(-1.2% + var(--lch-paradis-parallax)), 0);
}
}
.lch-paradis-intro__content {
position: relative;
z-index: 3;
display: flex;
align-items: center;
justify-content: flex-start;
width: min(48%, 36rem);
min-height: min(88vh, 52rem);
padding: clamp(3rem, 7vw, 5.5rem) clamp(1.5rem, 3vw, 2.5rem) clamp(3rem, 6vw, 4.5rem) clamp(1.75rem, 6vw, 5.5rem);
box-sizing: border-box;
background: transparent;
}
.lch-paradis-intro__content-inner {
width: 100%;
max-width: 30rem;
}
.lch-paradis-intro__eyebrow {
margin: 0 0 -0.35rem;
font-family: "Great Vibes", "Segoe Script", cursive;
font-size: clamp(1.85rem, 3.2vw, 2.55rem);
font-weight: 400;
letter-spacing: 0;
text-transform: none;
line-height: 1;
color: var(--lch-paradis-accent);
}
.lch-paradis-intro__title,
.wpcursor-component.lch-paradis-intro .lch-paradis-intro__title,
.lch-paradis-intro h2.lch-paradis-intro__title {
margin: 0 0 1.75rem !important;
text-align: left;
font-family: "Cormorant Garamond", Georgia, serif !important;
font-weight: 500 !important;
font-size: clamp(2.6rem, 4.4vw, 3.55rem) !important;
line-height: 1.05 !important;
letter-spacing: 0.01em;
text-transform: none !important;
font-style: normal !important;
color: var(--lch-paradis-ink) !important;
}
.lch-paradis-intro__title-prefix {
display: block;
}
.lch-paradis-intro__title-accent {
display: block;
margin-top: 0.05em;
font-style: italic;
font-weight: 500;
font-size: 1.08em;
color: var(--lch-paradis-accent) !important;
}
.lch-paradis-intro__text {
display: grid;
gap: 1.35rem;
margin: 0 0 2.35rem;
}
.lch-paradis-intro__text p {
margin: 0;
font-size: clamp(0.94rem, 1.05vw, 1.02rem);
line-height: 1.8;
font-weight: 300;
color: var(--lch-paradis-muted);
text-align: left;
}
.lch-paradis-intro__text p + p {
padding-top: 1.35rem;
border-top: 1px solid rgba(195, 157, 122, 0.35);
}
.lch-paradis-intro__badges {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: flex-start;
gap: 1.15rem 1.5rem;
}
.lch-paradis-intro__badge {
text-decoration: none;
color: inherit;
transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.lch-paradis-intro__badge:hover,
.lch-paradis-intro__badge:focus-visible {
transform: translateY(-2px);
}
.lch-paradis-intro__badge--card {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 0.28rem;
min-width: 6.5rem;
padding: 0.9rem 1rem 0.8rem;
background: var(--lch-paradis-card);
border-radius: 12px;
box-shadow: var(--lch-paradis-shadow);
border: 1px solid rgba(40, 28, 20, 0.04);
}
.lch-paradis-intro__badge--card:hover,
.lch-paradis-intro__badge--card:focus-visible {
box-shadow: 0 16px 36px rgba(40, 28, 20, 0.14);
}
.lch-paradis-intro__badge-logo {
display: flex;
align-items: center;
justify-content: center;
}
.lch-paradis-intro__badge-logo--ta {
gap: 0.3rem;
font-size: 0.68rem;
font-weight: 500;
color: #1a1a1a;
}
.lch-paradis-intro__badge-score {
font-size: 1.35rem;
font-weight: 500;
line-height: 1;
color: #2a2118;
}
.lch-paradis-intro__badge-stars {
font-size: 0.8rem;
letter-spacing: 0.08em;
line-height: 1;
}
.lch-paradis-intro__badge-stars--google {
color: #fbbc05;
}
.lch-paradis-intro__badge-stars--ta {
color: #00aa6c;
font-size: 0.68rem;
letter-spacing: 0.12em;
}
.lch-paradis-intro__badge-count {
font-size: 0.74rem;
color: #6b6560;
}
.lch-paradis-intro__badge--onlylyon {
display: grid;
place-items: center;
width: 6.75rem;
height: 6.75rem;
}
.lch-paradis-intro__onlylyon-img {
display: block;
width: 100%;
height: 100%;
object-fit: contain;
filter: drop-shadow(0 8px 18px rgba(40, 28, 20, 0.12));
}
@media (max-width: 960px) {
.lch-paradis-intro {
min-height: 0;
display: flex;
flex-direction: column;
}
.lch-paradis-intro__media {
position: relative;
inset: auto;
order: -1;
width: 100%;
height: min(58vw, 26rem);
min-height: 16rem;
-webkit-mask-image: linear-gradient(
180deg,
#000 0%,
#000 55%,
rgba(0, 0, 0, 0.45) 78%,
transparent 100%
);
mask-image: linear-gradient(
180deg,
#000 0%,
#000 55%,
rgba(0, 0, 0, 0.45) 78%,
transparent 100%
);
}
.lch-paradis-intro__media::before {
background: linear-gradient(180deg, transparent 40%, var(--lch-paradis-bg) 100%);
}
.lch-paradis-intro__image {
position: absolute;
}
.lch-paradis-intro__content {
width: 100%;
min-height: 0;
justify-content: center;
padding: 1.5rem 1.35rem 3rem;
}
.lch-paradis-intro__content-inner {
max-width: 36rem;
}
.lch-paradis-intro__botanical {
opacity: 0.08;
width: 60vw;
left: -10%;
}
}
@media (prefers-reduced-motion: reduce) {
.lch-paradis-intro__badge,
.lch-paradis-intro__image {
transition: none;
animation: none !important;
transform: none;
opacity: 1;
}
}