.cdl-cultural-portal-hero--immersive {
position: relative;
overflow: hidden;
isolation: isolate;
margin: 0 0 2.5rem;
padding: 0;
min-height: clamp(14rem, 34vw, 20.5rem);
border-radius: 14px;
border: 1px solid color-mix(in srgb, var(--cdl-cultural-accent, #6b4c9a) 22%, transparent);
background: linear-gradient(
128deg,
color-mix(in srgb, var(--cdl-cultural-accent, #6b4c9a) 10%, #fff) 0%,
#faf8fc 42%,
#fff 100%
);
box-shadow: 0 10px 36px color-mix(in srgb, var(--cdl-cultural-accent, #6b4c9a) 12%, transparent);
}
.cdl-cultural-portal-hero--immersive:not(.cdl-cultural-portal-hero--has-cover) {
padding: 2rem 1.5rem 2.25rem;
}
.cdl-cultural-portal-hero__cover {
position: absolute;
inset: 0;
z-index: 0;
pointer-events: none;
background-image: var(--cdl-portal-hero-image);
background-repeat: no-repeat;
background-size: cover;
background-position: 92% center;
}
.cdl-cultural-portal-hero--has-cover::after {
content: "";
position: absolute;
inset: 0;
z-index: 1;
pointer-events: none;
border-radius: inherit;
background: linear-gradient(
102deg,
rgba(255, 255, 255, 0.97) 0%,
rgba(250, 246, 255, 0.92) 38%,
color-mix(in srgb, var(--cdl-cultural-accent, #6b4c9a) 8%, rgba(255, 255, 255, 0.55)) 58%,
rgba(255, 255, 255, 0.12) 100%
);
}
.cdl-cultural-portal-hero--immersive .cdl-cultural-portal-hero__inner {
position: relative;
z-index: 2;
max-width: min(44rem, 58%);
padding: clamp(1.65rem, 3.5vw, 2.35rem) clamp(1.25rem, 3vw, 2rem);
}
.cdl-cultural-portal-hero--immersive .cdl-cultural-portal-hero__title {
text-wrap: balance;
}
.cdl-cultural-portal-hero--immersive .cdl-cultural-portal-hero__subtitle {
max-width: 38rem;
} .cdl-cultural-archive[data-cultural-portal-v3="1"] .cdl-cultural-portal-hero--immersive {
animation: none;
transform: none;
}
@media (max-width: 900px) {
.cdl-cultural-portal-hero--immersive {
min-height: clamp(13rem, 42vw, 17.5rem);
}
.cdl-cultural-portal-hero--immersive .cdl-cultural-portal-hero__inner {
max-width: 100%;
}
.cdl-cultural-portal-hero__cover {
background-position: 88% 42%;
opacity: 0.92;
}
.cdl-cultural-portal-hero--has-cover::after {
background: linear-gradient(
180deg,
rgba(255, 255, 255, 0.96) 0%,
rgba(250, 246, 255, 0.9) 55%,
rgba(255, 255, 255, 0.35) 100%
);
}
}
@media (max-width: 640px) {
.cdl-cultural-portal-hero--immersive {
min-height: 13.5rem;
margin-bottom: 2rem;
}
.cdl-cultural-portal-hero--immersive:not(.cdl-cultural-portal-hero--has-cover) {
padding: 1.35rem 1rem 1.5rem;
}
.cdl-cultural-portal-hero--immersive .cdl-cultural-portal-hero__inner {
padding: 1.35rem 1rem 1.5rem;
}
.cdl-cultural-portal-hero__cover {
background-position: 90% 38%;
}
}
@media (prefers-reduced-motion: reduce) {
.cdl-cultural-portal-hero--immersive .cdl-cultural-portal-hero__cta {
transition: opacity 0.15s ease;
}
.cdl-cultural-portal-hero--immersive .cdl-cultural-portal-hero__cta:hover,
.cdl-cultural-portal-hero--immersive .cdl-cultural-portal-hero__cta:focus-visible {
transform: none;
}
}