.featured-image-cover { background-position: center center; background-size: cover; isolation: isolate; position: relative; } .header.featured-image-cover { background-color: transparent; } .featured-image-cover .overlay { pointer-events: none; transition: background-image var(--motion), opacity var(--motion), backdrop-filter var(--motion); z-index: 1; } .header.featured-image-cover .header-inner, .content-headline.featured-image-cover .content-inner, .archives-title.featured-image-cover > :not(.overlay) { position: relative; z-index: 2; } :is(.content-headline, .archives-title).featured-image-cover { min-height: clamp(17rem, 40vw, 31rem); } :is(.content-headline, .archives-title).featured-image-cover :is(.headline, .entry-subtitle, .byline, .archives-description) { text-shadow: 0 2px 18px rgba(0, 0, 0, .35); } :is(.content-headline, .archives-title).featured-image-cover.text-alt :is(.headline, .entry-subtitle, .byline, .archives-description) { text-shadow: 0 2px 14px rgba(255, 255, 255, .22); } .has-cover-transparent-header .content-headline.featured-image-cover .content-inner { padding-block-start: calc(var(--header-height, 60px) + var(--space-single)); } .featured-image-cover.fi-variant-default .overlay { background-image: linear-gradient(180deg, rgba(0, 0, 0, .28), rgba(0, 0, 0, .72)); } .featured-image-cover.fi-variant-soft-gradient .overlay { background-image: linear-gradient(145deg, rgba(0, 0, 0, .62), rgba(0, 0, 0, .3) 55%, rgba(0, 0, 0, .7)); } .featured-image-cover.fi-variant-contrast .overlay { background-image: linear-gradient(180deg, rgba(0, 0, 0, .32), rgba(0, 0, 0, .82)); } .featured-image-cover.fi-variant-glass .overlay { background-image: linear-gradient(160deg, rgba(255, 255, 255, .25), rgba(0, 0, 0, .42)); backdrop-filter: blur(2px) saturate(120%); } .featured-image-cover.fi-variant-duotone .overlay { background-image: linear-gradient(130deg, rgba(10, 79, 186, .45), rgba(168, 28, 48, .52)); } .featured-image-cover.fi-variant-cinematic .overlay { background-image: linear-gradient(125deg, rgba(5, 9, 18, .78) 15%, rgba(11, 22, 42, .45) 55%, rgba(6, 8, 12, .86) 100%); } .featured-image-cover.fi-variant-spotlight .overlay { background-image: radial-gradient(circle at 70% 22%, rgba(255, 255, 255, .28), rgba(255, 255, 255, 0) 42%), linear-gradient(180deg, rgba(0, 0, 0, .3), rgba(0, 0, 0, .78)); } [data-theme="dark"] .featured-image-cover.fi-variant-default .overlay { background-image: linear-gradient(180deg, rgba(0, 0, 0, .45), rgba(0, 0, 0, .86)); } [data-theme="dark"] .featured-image-cover.fi-variant-soft-gradient .overlay { background-image: linear-gradient(145deg, rgba(0, 0, 0, .78), rgba(0, 0, 0, .5) 55%, rgba(0, 0, 0, .88)); } [data-theme="dark"] .featured-image-cover.fi-variant-contrast .overlay { background-image: linear-gradient(180deg, rgba(0, 0, 0, .5), rgba(0, 0, 0, .9)); } [data-theme="dark"] .featured-image-cover.fi-variant-glass .overlay { background-image: linear-gradient(160deg, rgba(255, 255, 255, .12), rgba(0, 0, 0, .62)); } [data-theme="dark"] .featured-image-cover.fi-variant-duotone .overlay { background-image: linear-gradient(130deg, rgba(41, 94, 204, .45), rgba(188, 46, 84, .55)); } [data-theme="dark"] .featured-image-cover.fi-variant-cinematic .overlay { background-image: linear-gradient(125deg, rgba(2, 4, 9, .88) 10%, rgba(9, 17, 33, .6) 52%, rgba(2, 4, 10, .92) 100%); } [data-theme="dark"] .featured-image-cover.fi-variant-spotlight .overlay { background-image: radial-gradient(circle at 65% 20%, rgba(255, 255, 255, .18), rgba(255, 255, 255, 0) 40%), linear-gradient(180deg, rgba(0, 0, 0, .5), rgba(0, 0, 0, .9)); } .featured-image-cover .featured-image-caption { background-color: color-mix(in srgb, var(--color-bg), black 60%); color: var(--color-text-light); margin-block-end: 0; padding: 7px 13px; position: absolute; bottom: 0; left: 0; z-index: 10; } :where(.featured-image-cover, .featured-image-cover .logo .site-title, .featured-image-cover .menu > .menu-item > a, .featured-image-cover .header-trigger, .featured-image-cover .headline, .featured-image-cover .headline a, .featured-image-cover .byline) { color: var(--color-text-light); } :where(.featured-image-cover .menu > .menu-item > a:hover, .featured-image-cover .tagline, .featured-image-cover .text-sec, .featured-image-cover a, .featured-image-cover .entry-subtitle) { color: color-mix(in srgb, var(--color-text-light), transparent 20%); } :where(.featured-image-cover) a { border-bottom-color: color-mix(in srgb, var(--color-text-light), transparent 80%); } .featured-image-cover .byline, .featured-image-cover .byline a, .featured-image-cover .breadcrumbs, .featured-image-cover .breadcrumbs a, .featured-image-cover .breadcrumbs .middot::after, .header.featured-image-cover .menu-header > .menu-item > a, .header.featured-image-cover .header-trigger, .header.featured-image-cover .header-menu-trigger-icon, .header.featured-image-cover .tagline { color: var(--color-text-light); } .header.featured-image-cover .menu-header > .menu-item > a:hover, .featured-image-cover .breadcrumbs a:hover, .featured-image-cover .byline a:hover { color: color-mix(in srgb, var(--color-text-light), transparent 20%); } .header.header-transparent--light.featured-image-cover .menu-header > .menu-item > a, .header.header-transparent--dark.featured-image-cover .menu-header > .menu-item > a, .header.header-transparent--light.featured-image-cover .header-trigger, .header.header-transparent--dark.featured-image-cover .header-trigger { color: var(--color-text-light); } :where(.featured-image-cover.text-alt, .featured-image-cover.text-alt .logo .site-title, .featured-image-cover.text-alt .menu > .menu-item > a, .featured-image-cover.text-alt .header-trigger, .featured-image-cover.text-alt .headline, .featured-image-cover.text-alt .headline a, .featured-image-cover.text-alt .byline) { color: #212121; } :where(.featured-image-cover.text-alt .menu > .menu-item > a:hover, .featured-image-cover.text-alt .tagline, .featured-image-cover.text-alt .text-sec, .featured-image-cover.text-alt a, .featured-image-cover.text-alt .entry-subtitle) { color: var(--color-text); } :where(.featured-image-cover.text-alt) a { border-bottom-color: color-mix(in srgb, var(--color-text), transparent 80%); } .featured-image-cover.text-alt .byline, .featured-image-cover.text-alt .byline a, .featured-image-cover.text-alt .breadcrumbs, .featured-image-cover.text-alt .breadcrumbs a, .featured-image-cover.text-alt .breadcrumbs .middot::after, .header.featured-image-cover.text-alt .menu-header > .menu-item > a, .header.featured-image-cover.text-alt .header-trigger, .header.featured-image-cover.text-alt .header-menu-trigger-icon, .header.featured-image-cover.text-alt .tagline { color: #212121; } .header.featured-image-cover.text-alt .menu-header > .menu-item > a:hover, .featured-image-cover.text-alt .breadcrumbs a:hover, .featured-image-cover.text-alt .byline a:hover { color: var(--color-text); } .header.header-transparent--light.featured-image-cover.text-alt .menu-header > .menu-item > a, .header.header-transparent--dark.featured-image-cover.text-alt .menu-header > .menu-item > a, .header.header-transparent--light.featured-image-cover.text-alt .header-trigger, .header.header-transparent--dark.featured-image-cover.text-alt .header-trigger { color: #212121; } @media (max-width: 992px) { .content-headline.featured-image-cover, .archives-title.featured-image-cover { min-height: clamp(14.5rem, 56vw, 23rem); } .has-cover-transparent-header .content-headline.featured-image-cover .content-inner { padding-block-start: calc(var(--header-height, 60px) + var(--space-half)); } .featured-image-cover .sub-menu > .menu-item > a { color: var(--color-text-light); } .featured-image-cover.text-alt .sub-menu > .menu-item > a { color: #212121; } }