.lch-blog-cta {
--lch-blc-ink: #ffffff;
--lch-blc-muted: rgba(255, 255, 255, 0.92);
--lch-blc-gold: #c5943b;
--lch-blc-gold-hover: #d4a84f;
position: relative;
isolation: isolate;
overflow: hidden;
display: flex;
align-items: center;
min-height: clamp(13rem, 26vw, 17rem);
background: #1a1612;
color: var(--lch-blc-ink);
padding: clamp(2.6rem, 5.8vw, 3.8rem) 0;
font-family: "Outfit", system-ui, sans-serif;
}
.lch-blog-cta__media {
position: absolute;
inset: 0;
z-index: 0;
overflow: hidden;
}
.lch-blog-cta__image {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
object-position: 68% center;
transform: scale(1.04);
filter: saturate(1.02) brightness(0.58);
}
.lch-blog-cta__veil {
position: absolute;
inset: 0;
background:
linear-gradient(
90deg,
rgba(16, 12, 9, 0.8) 0%,
rgba(16, 12, 9, 0.52) 40%,
rgba(16, 12, 9, 0.28) 70%,
rgba(16, 12, 9, 0.38) 100%
),
linear-gradient(180deg, rgba(16, 12, 9, 0.22) 0%, transparent 45%, rgba(16, 12, 9, 0.3) 100%);
}
.lch-blog-cta__inner {
position: relative;
z-index: 1;
width: min(1240px, calc(100% - 3rem));
margin: 0 auto;
display: grid;
grid-template-columns: minmax(0, 1.35fr) auto;
gap: clamp(1.5rem, 4vw, 3rem);
align-items: center;
box-sizing: border-box;
}
.lch-blog-cta__eyebrow {
display: inline-flex;
align-items: center;
gap: 0.85rem;
margin: 0 0 0.8rem;
font-size: 0.72rem;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--lch-blc-gold);
font-weight: 400;
}
.lch-blog-cta__eyebrow::after {
content: "";
display: block;
width: 2.5rem;
height: 1.5px;
background: currentColor;
}
.lch-blog-cta__title,
.wpcursor-component.lch-blog-cta .lch-blog-cta__title,
.lch-blog-cta h2.lch-blog-cta__title {
margin: 0 0 0.7rem !important;
font-family: "Cormorant Garamond", Georgia, serif !important;
font-weight: 500 !important;
font-size: clamp(1.95rem, 3.4vw, 2.75rem) !important;
line-height: 1.12 !important;
color: #fff !important;
text-wrap: balance;
}
.lch-blog-cta__text {
margin: 0;
max-width: 36rem;
font-weight: 300;
font-size: clamp(0.95rem, 1.3vw, 1.06rem);
line-height: 1.65;
color: var(--lch-blc-muted);
}
.lch-blog-cta__action {
margin: 0;
justify-self: end;
}
.lch-blog-cta__btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.65rem;
padding: 1.05rem 1.5rem;
background: var(--lch-blc-gold);
color: #fff !important;
text-decoration: none !important;
font-family: "Outfit", system-ui, sans-serif;
font-weight: 500;
font-size: 0.76rem;
letter-spacing: 0.12em;
text-transform: uppercase;
line-height: 1.2;
border: 0;
border-radius: 0;
white-space: nowrap;
transition: background 0.25s ease, transform 0.25s ease;
}
.lch-blog-cta__btn:hover,
.lch-blog-cta__btn:focus-visible {
background: var(--lch-blc-gold-hover);
color: #fff !important;
transform: translateY(-1px);
outline: none;
}
.lch-blog-cta__arrow {
font-size: 1.05em;
line-height: 1;
}
@media (max-width: 860px) {
.lch-blog-cta {
padding-bottom: clamp(3.2rem, 8vw, 4.5rem);
}
.lch-blog-cta__inner {
grid-template-columns: 1fr;
justify-items: start;
gap: 1.4rem;
width: calc(100% - 2.4rem);
}
.lch-blog-cta__action {
justify-self: start;
width: 100%;
}
.lch-blog-cta__btn {
white-space: normal;
text-align: center;
width: 100%;
box-sizing: border-box;
}
.lch-blog-cta__image {
object-position: 55% center;
}
}
@media (max-width: 560px) {
.lch-blog-cta {
padding-bottom: 5.25rem;
}
.lch-blog-cta__inner {
width: calc(100% - 1.75rem);
}
}
@media (prefers-reduced-motion: reduce) {
.lch-blog-cta__btn {
transition: none;
}
.lch-blog-cta__btn:hover {
transform: none;
}
.lch-blog-cta__image {
transform: none;
filter: brightness(0.5) saturate(0.95);
}
}