.hhc-home-slider {
--hhc-slider-dot-border: color-mix(in srgb, var(--hhc-color-text-strong) 42%, transparent);
--hhc-slider-dot-bg: color-mix(in srgb, var(--hhc-color-text-strong) 26%, transparent);
--hhc-slider-active-bg: var(--hhc-color-action-accent-bg);
--hhc-slider-active-border: var(--hhc-color-action-accent-border);
--hhc-slider-active-text: var(--hhc-color-action-accent-text);
--hhc-slider-dot-num-bg: color-mix(in srgb, var(--hhc-color-surface-2) 62%, transparent);
--hhc-slider-dot-num-border: var(--hhc-slider-dot-border);
--hhc-slider-chip-color: var(--hhc-color-page-bg-deep);
--hhc-slider-band-opacity: 55%;
--hhc-slider-band-fallback-opacity: 65%;
--hhc-slider-band-bg: var(--hhc-color-card-bg, var(--hhc-surface));
--hhc-slider-title-size: 2em;
--hhc-slider-title-line-height: 1.15;
--hhc-slider-title-letter-spacing: -0.035em;
}
html[data-hhc-color-mode="gunduz"] .hhc-home-slider {
--hhc-slider-dot-border: color-mix(in srgb, var(--hhc-color-text-strong) 28%, transparent);
--hhc-slider-dot-bg: color-mix(in srgb, var(--hhc-color-text-strong) 12%, transparent);
--hhc-slider-active-bg: var(--hhc-color-action-accent-bg);
--hhc-slider-active-border: var(--hhc-color-action-accent-border);
--hhc-slider-active-text: var(--hhc-color-action-accent-text);
--hhc-slider-dot-num-bg: color-mix(in srgb, var(--hhc-color-surface) 76%, transparent);
--hhc-slider-dot-num-border: var(--hhc-border);
--hhc-slider-chip-color: var(--hhc-color-page-bg);
}
.hhc-home-slider {
position: relative;
overflow: hidden;
width: 100%;
max-width: 100%;
margin: 0 0 var(--hhc-section-gap);
border: 1px solid var(--hhc-border-soft);
border-radius: var(--hhc-slider-radius);
background: color-mix(in srgb, var(--hhc-surface) 92%, transparent);
box-shadow: var(--hhc-shadow-soft);
}
.hhc-home-slider__viewport {
overflow: hidden;
touch-action: pan-y;
}
.hhc-home-slider__track {
display: flex;
transition: transform .38s ease;
}
.hhc-home-slider__slide {
position: relative;
isolation: isolate;
display: flex;
min-width: 100%;
min-height: var(--hhc-slider-height);
align-items: flex-end;
justify-content: stretch;
padding: 0;
background:
radial-gradient(circle at 25% 20%, color-mix(in srgb, var(--hhc-accent) 22%, transparent), transparent 32%),
linear-gradient(135deg, var(--hhc-surface-2), var(--hhc-surface-3));
touch-action: pan-y;
}
.hhc-home-slider__image {
position: absolute;
inset: 0;
z-index: 0;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
pointer-events: none;
user-select: none;
}
.hhc-home-slider__background-link {
position: absolute;
inset: 0;
z-index: 2;
}
.hhc-home-slider__body {
position: relative;
z-index: 3;
width: 100%;
max-width: none;
margin-inline: 0;
padding: clamp(14px, 2vw, 24px) clamp(16px, 3vw, 36px);
border-top: 1px solid var(--hhc-border-soft);
background: color-mix(in srgb, var(--hhc-slider-band-bg, var(--hhc-color-card-bg, var(--hhc-surface))) var(--hhc-slider-band-opacity, 55%), transparent);
color: var(--hhc-color-text-strong);
text-align: left;
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
}
.hhc-home-slider__meta {
display: flex;
flex-wrap: nowrap;
gap: var(--hhc-slider-meta-gap);
align-items: center;
justify-content: flex-start;
min-width: 0;
margin: 0 0 clamp(8px, 1vw, 12px);
overflow: hidden;
color: color-mix(in srgb, var(--hhc-color-text-strong) 82%, transparent);
font-family: var(--hhc-font-ui);
font-size: var(--hhc-font-size-slider-meta, .86rem);
font-weight: var(--hhc-weight-semibold, 700);
line-height: 1.25;
white-space: nowrap;
}
.hhc-home-slider__chip {
display: inline-flex;
align-items: center;
min-height: 28px;
padding: 0 var(--wp--preset--spacing--1);
border-radius: var(--hhc-radius-pill, 999px);
color: var(--hhc-slider-chip-color);
background: var(--hhc-color-link);
}
.hhc-home-slider__title {
overflow: hidden;
width: 100%;
min-width: 0;
min-height: calc(2 * var(--hhc-slider-title-line-height) * 1em);
max-height: calc(2 * var(--hhc-slider-title-line-height) * 1em);
margin: 0;
font-family: var(--hhc-font-heading);
font-size: var(--hhc-slider-title-size);
font-weight: var(--hhc-weight-slider-title, 700);
line-height: var(--hhc-slider-title-line-height);
letter-spacing: var(--hhc-slider-title-letter-spacing);
}
.hhc-home-slider__title a {
display: -webkit-box;
overflow: hidden;
color: var(--hhc-color-text-strong);
font: inherit;
letter-spacing: inherit;
text-decoration: none;
text-overflow: ellipsis;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
line-clamp: 2;
}
.hhc-home-slider__indicators {
position: absolute;
top: clamp(14px, 2vw, 22px);
right: clamp(14px, 2vw, 22px);
z-index: 6;
display: flex;
gap: var(--hhc-slider-gap);
align-items: center;
}
.hhc-home-slider__indicator {
display: inline-grid;
min-width: 28px;
height: 28px;
place-items: center;
border: 1px solid var(--hhc-slider-dot-border);
border-radius: var(--hhc-radius-pill, 999px);
background: var(--hhc-slider-dot-bg);
color: var(--hhc-color-text-strong);
cursor: pointer;
font-size: .78rem;
font-weight: var(--hhc-weight-semibold, 700);
line-height: 1;
backdrop-filter: blur(8px);
}
.hhc-home-slider__indicator.is-active {
min-width: 38px;
background: var(--hhc-slider-active-bg);
border-color: var(--hhc-slider-active-border);
color: var(--hhc-slider-active-text);
}
.hhc-home-slider__indicators--numbers .hhc-home-slider__indicator {
width: 32px;
height: 32px;
background: var(--hhc-slider-dot-num-bg);
border-color: var(--hhc-slider-dot-num-border);
}
.hhc-home-slider__indicators--numbers .hhc-home-slider__indicator.is-active {
background: var(--hhc-slider-active-bg);
border-color: var(--hhc-slider-active-border);
}
.hhc-slider-band-t-0 {
--hhc-slider-band-opacity: 100%;
--hhc-slider-band-fallback-opacity: 100%;
}
.hhc-slider-band-t-5 {
--hhc-slider-band-opacity: 95%;
--hhc-slider-band-fallback-opacity: 100%;
}
.hhc-slider-band-t-10 {
--hhc-slider-band-opacity: 90%;
--hhc-slider-band-fallback-opacity: 100%;
}
.hhc-slider-band-t-15 {
--hhc-slider-band-opacity: 85%;
--hhc-slider-band-fallback-opacity: 95%;
}
.hhc-slider-band-t-20 {
--hhc-slider-band-opacity: 80%;
--hhc-slider-band-fallback-opacity: 90%;
}
.hhc-slider-band-t-25 {
--hhc-slider-band-opacity: 75%;
--hhc-slider-band-fallback-opacity: 85%;
}
.hhc-slider-band-t-30 {
--hhc-slider-band-opacity: 70%;
--hhc-slider-band-fallback-opacity: 80%;
}
.hhc-slider-band-t-35 {
--hhc-slider-band-opacity: 65%;
--hhc-slider-band-fallback-opacity: 75%;
}
.hhc-slider-band-t-40 {
--hhc-slider-band-opacity: 60%;
--hhc-slider-band-fallback-opacity: 70%;
}
.hhc-slider-band-t-45 {
--hhc-slider-band-opacity: 55%;
--hhc-slider-band-fallback-opacity: 65%;
}
.hhc-slider-band-t-50 {
--hhc-slider-band-opacity: 50%;
--hhc-slider-band-fallback-opacity: 60%;
}
.hhc-slider-band-t-55 {
--hhc-slider-band-opacity: 45%;
--hhc-slider-band-fallback-opacity: 55%;
}
.hhc-slider-band-t-60 {
--hhc-slider-band-opacity: 40%;
--hhc-slider-band-fallback-opacity: 50%;
}
.hhc-slider-band-t-65 {
--hhc-slider-band-opacity: 35%;
--hhc-slider-band-fallback-opacity: 45%;
}
.hhc-slider-band-t-70 {
--hhc-slider-band-opacity: 30%;
--hhc-slider-band-fallback-opacity: 40%;
}
.hhc-slider-band-t-75 {
--hhc-slider-band-opacity: 25%;
--hhc-slider-band-fallback-opacity: 35%;
}
.hhc-slider-band-t-80 {
--hhc-slider-band-opacity: 20%;
--hhc-slider-band-fallback-opacity: 30%;
}
.hhc-slider-band-t-85 {
--hhc-slider-band-opacity: 15%;
--hhc-slider-band-fallback-opacity: 25%;
}
@supports not (background: color-mix(in srgb, var(--hhc-color-card-bg) 55%, transparent)) {
.hhc-home-slider__body {
background: color-mix(in srgb, var(--hhc-slider-band-bg, var(--hhc-color-card-bg, var(--hhc-surface))) var(--hhc-slider-band-fallback-opacity, 65%), transparent);
}
}
@media (max-width: 760px) {
.hhc-home-slider {
border-radius: 22px;
}
.hhc-main.hhc-blog-main > .hhc-home-slider,
.hhc-main.hhc-blog-main > .hhc-blog-layout {
width: calc(100% - 20px);
max-width: calc(100% - 20px);
}
.hhc-home-slider__slide {
min-height: clamp(330px, 84vw, 500px);
padding: 0;
}
.hhc-home-slider__body {
max-width: 100%;
padding: 14px 16px;
}
.hhc-home-slider__title {
font-size: var(--hhc-slider-title-size);
}
}
@media (min-width: 961px) {
.hhc-home-slider__body {
margin-inline: auto;
}
}
.hhc-main.hhc-blog-main > .hhc-home-slider,
.hhc-main.hhc-blog-main > .hhc-blog-layout,
.hhc-main.hhc-blog-main > .wp-block-hhc-home-slider,
.hhc-main.hhc-blog-main .hhc-home-slider {
width: var(--hhc-container);
max-width: var(--hhc-container);
margin-inline: auto;
box-sizing: border-box;
}
.hhc-main.hhc-blog-main > .wp-block-hhc-home-slider > .hhc-home-slider {
width: 100%;
max-width: 100%;
margin-inline: 0;
}
@media (min-width: 761px) {
body.hhc-archive-sidebar-on .hhc-main.hhc-blog-main > .hhc-home-slider,
body.hhc-archive-sidebar-on .hhc-main.hhc-blog-main > .wp-block-hhc-home-slider {
max-width: calc(var(--hhc-layout-content, 820px) + var(--hhc-layout-sidebar, 320px) + var(--hhc-layout-gap, 28px));
}
body.hhc-archive-sidebar-off .hhc-main.hhc-blog-main > .hhc-home-slider,
body.hhc-archive-sidebar-off .hhc-main.hhc-blog-main > .wp-block-hhc-home-slider {
max-width: var(--hhc-reading, 820px);
}
}
@media (min-width: 761px) and (max-width: 1100px) {
body.hhc-archive-sidebar-on .hhc-main.hhc-blog-main > .hhc-home-slider,
body.hhc-archive-sidebar-on .hhc-main.hhc-blog-main > .wp-block-hhc-home-slider {
max-width: var(--hhc-layout-content, 820px);
}
}
@media (max-width: 760px) {
body.hhc-home-slider-mobile-off .hhc-home-slider,
body.hhc-home-slider-mobile-off .wp-block-hhc-home-slider {
display: none !important;
}
}