.ls-hero {
--ls-hero-background: var(--ls-color-surface-section, #FBF9F6);
--ls-hero-text: var(--ls-color-text, #2c2926);
--ls-hero-accent: var(--ls-color-text-warm, #907237);
--ls-hero-gold: var(--ls-color-accent, #907237);
--ls-hero-content-max: 42rem;
--ls-hero-block-padding: var(--ls-content-padding-block);
position: relative;
isolation: isolate;
overflow: clip;
background: var(--ls-hero-background);
color: var(--ls-hero-text);
margin-block-end: var(--theme-content-spacing);
}
.ls-hero__inner {
display: grid;
grid-template-columns: minmax(0, 1fr);
min-height: inherit;
}
.ls-hero__media {
position: relative;
min-height: clamp(22rem, 70vw, 38rem);
overflow: hidden;
}
.ls-hero__image {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
border-radius: var(--ls-radius-media);
}
.ls-hero__content {
display: flex;
align-items: center;
min-width: 0;
padding:
var(--ls-hero-block-padding)
var(--ls-content-padding-inline);
}
.ls-hero__content-inner {
width: min(100%, var(--ls-hero-content-max));
margin-inline: auto;
text-align: center;
}
.ls-hero__overline {
color: var(--ls-hero-accent);
margin-block-end: 2rem;
}
.ls-hero__title {
margin: 0;
text-wrap: balance;
}
.ls-hero__lettering {
display: inline-block;
width: clamp(10rem, 15vw, 20rem);
transform: translateY(clamp(19px, 2vw, 39px));
}
.ls-hero__lettering svg {
display: inline-block;
width: 100%;
height: auto;
}
.ls-hero__intro {
max-width: 38rem;
margin-block-start: clamp(1.5rem, 3vw, 2.25rem);
margin-block-end: 0;
margin-inline: auto;
}
.ls-hero__actions {
display: flex;
flex-wrap: wrap;
gap: 0.75rem;
justify-content: center;
margin-block-start: clamp(1.75rem, 3vw, 2.75rem);
}
.ls-hero__button {
flex: 0 0 auto;
}
.ls-hero__footer {
display: flex;
flex-direction: column;
align-items: center;
gap: 2.25rem;
margin-block-start: clamp(2.5rem, 6vw, 5rem);
}
.ls-hero__ornament {
display: block;
width: clamp(20rem, 24vw, 26.25rem);
height: auto;
}
.ls-hero__slogan {
margin: 0;
color: var(--ls-hero-gold);
} .ls-hero--no-image .ls-hero__inner {
grid-template-columns: minmax(0, 1fr);
}
.ls-hero--no-image .ls-hero__content {
width: 100%;
max-width: var(--ls-size-content-small, 60rem);
margin-inline: auto;
}
.ls-hero--no-image .ls-hero__content-inner {
width: 100%;
} .ls-hero--home {
min-height: min(
52rem,
calc(100svh - var(--header-height, 0px))
);
}
.ls-hero--home .ls-hero__overline {
margin-block-end: 0 !important;
}
.ls-hero--home .ls-hero__content {
background:
linear-gradient(
135deg,
rgb(255 255 255 / 12%),
transparent 55%
),
var(--ls-hero-background);
} .ls-hero--default {
--ls-hero-block-padding: clamp(2.75rem, 6vw, 5rem);
--ls-hero-content-max: 38rem;
}
.ls-hero--default .ls-hero__media {
min-height: clamp(18rem, 55vw, 32rem);
max-height: 32rem;
}
.ls-hero--default .ls-hero__image {
position: absolute;
inset: 0;
}
.ls-hero--default .ls-hero__footer {
margin-block-start: clamp(2rem, 4vw, 3.5rem);
} .ls-hero--compact {
--ls-hero-block-padding: clamp(2rem, 4vw, 3.5rem);
--ls-hero-content-max: 48rem;
min-height: auto;
}
.ls-hero--compact .ls-hero__inner {
grid-template-columns: minmax(0, 1fr);
min-height: auto;
}
.ls-hero--compact .ls-hero__content {
width: 100%;
max-width: var(--ls-size-content-small, 60rem);
margin-inline: auto;
}
.ls-hero--compact .ls-hero__title {
font-size: clamp(2rem, 4vw, 3.5rem);
line-height: 1.05;
}
.ls-hero--compact .ls-hero__footer {
margin-block-start: clamp(1.5rem, 3vw, 2.5rem);
} @media (min-width: 64rem) {
.ls-hero--has-image .ls-hero__inner {
grid-template-columns:
minmax(0, 1.05fr)
minmax(28rem, 0.95fr);
}
.ls-hero--has-image .ls-hero__media {
min-height: 100%;
max-height: 800px;
}
.ls-hero--home .ls-hero__inner {
min-height: inherit;
}
.ls-hero--default .ls-hero__inner {
min-height: clamp(34rem, 65vh, 46rem);
}
.ls-hero--default .ls-hero__media {
max-height: 46rem;
}
.ls-hero--no-image.ls-hero--default .ls-hero__inner,
.ls-hero--compact .ls-hero__inner {
min-height: auto;
}
} @media (min-width: 90rem) {
.ls-hero--has-image .ls-hero__inner {
grid-template-columns:
minmax(0, 1.1fr)
minmax(34rem, 0.9fr);
}
.ls-hero--no-image .ls-hero__content,
.ls-hero--compact .ls-hero__content {
padding-inline: clamp(1.5rem, 5vw, 5rem);
}
} @media (max-width: 39.9375rem) {
.ls-hero__actions {
flex-direction: column;
align-items: stretch;
}
.ls-hero__button {
justify-content: center;
width: 100%;
}
.ls-hero__footer {
align-items: center;
text-align: center;
}
} @media (prefers-reduced-motion: reduce) {
.ls-hero *,
.ls-hero *::before,
.ls-hero *::after {
scroll-behavior: auto !important;
transition-duration: 0.01ms !important;
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
}
}
.ls-slogan,
.is-style-ls-slogan {
font-family: var(--ls-font-accent);
font-size: var(--ls-font-size-accent);
color: var(--ls-color-text-muted);
line-height: 1.1;
text-transform: uppercase;
}
p.ls-overline,
p.is-style-ls-overline {
font-family: var(--ls-font-overline, inherit);
font-size: var(--ls-font-size-overline);
letter-spacing: var(--ls-letter-spacing-wide);
line-height: var(--ls-line-height-tight);
text-transform: uppercase;
margin-block-end: 1.25rem;
}
.is-style-ls-accent {
font-family: var(--ls-font-accent, inherit);
font-size: var(--ls-font-size-accent);
letter-spacing: var(--ls-letter-spacing-wide);
line-height: var(--ls-line-height-tight);
text-transform: uppercase;
margin-block-end: 1rem;
} .wp-block-buttons {
margin-block-start: clamp(1.75rem, 3vw, 2.75rem);
}
.wp-block-buttons .wp-block-button.is-style-outline .wp-block-button__link,
.ls-button--secondary {
--theme-button-text-initial-color: var(--ls-color-primary-900);
border-color: var(--ls-color-primary-900);
border: 1px solid;
background: transparent;
}
.wp-block-buttons .wp-block-button.is-style-ls-dark .wp-block-button__link {
--theme-button-text-initial-color: var(--ls-color-neutral-100);
color: var(--ls-color-neutral-100);
background: var(--ls-color-neutral-900);
} .ls-badge {
position: absolute;
z-index: 2;
inset-block-end: clamp(1rem, 3vw, 2rem);
inset-inline-start: clamp(1rem, 3vw, 2rem);
width: clamp(5.5rem, 12vw, 9rem);
aspect-ratio: 1;
transform: rotate(-18deg);
}
.ls-badge__image,
.ls-badge img {
display: block;
width: 100%;
height: 100%;
object-fit: contain;
box-shadow: var(--ls-shadow-button);
border-radius: 50%;
} .ls-card {
display: flex;
flex-direction: column;
padding: clamp(var(--ls-space-md), 4vw, var(--ls-space-xl));
border-radius: var(--ls-radius-lg);
}
.ls-card__title {
margin-block: var(--ls-space-md);
font-size: var(--ls-font-size-card-title);
line-height: var(--ls-line-height-heading);
text-transform: uppercase;
}
.ls-card__icon {
display: flex;
justify-content: center;
margin-block-end: var(--ls-space-md);
}
.ls-card__icon svg,
.ls-card > svg {
display: block;
width: auto;
max-width: 100%;
height: var(--ls-size-icon);
margin-inline: auto;
}
.ls-card__actions,
.ls-card__button,
.ls-card > .wp-block-buttons {
margin-block-start: auto;
} .ls-lettering-quote--heart {
max-width: clamp(20rem, 54vw, 49.375rem);
height: auto;
} .ls-map {
overflow: hidden;
border-radius: var(--ls-radius-media-left);
background: var(--ls-color-surface-neutral);
}
.ls-map__iframe {
display: block;
width: 100%;
height: clamp(22rem, 48vw, 36rem);
border: 0;
}
.ls-map--compact .ls-map__iframe {
height: clamp(20rem, 38vw, 29rem);
}
.ls-map--large .ls-map__iframe {
height: clamp(25rem, 56vw, 42rem);
} .ls-product-card__text {
font-size: var(--ls-font-size-base);
line-height: 1.35;
}
.ls-product-card__media {
margin-block-end: var(--ls-space-md);
}
.ls-product-card__media img {
border-radius: var(--ls-radius-sm);
aspect-ratio: 4 / 3;
object-fit: cover;
}