.odo-services-slider {
--odo-ss-border: var(--apy-border, #dfddd7);
--odo-ss-surface: var(--apy-surface, #ffffff);
--odo-ss-text: var(--apy-text, #1d1d1b);
--odo-ss-muted: var(--apy-muted, #6b6b67);
--odo-ss-primary: var(--apy-primary, #8f7452);
--odo-ss-card-bg: var(--odo-ss-surface);
--odo-ss-card-text: var(--odo-ss-text);
--odo-ss-text-color: #ffffff;
--odo-ss-title-color: #ffffff;
--odo-ss-title-size: 0.95rem;
--odo-ss-title-pad: 1rem 0.85rem 0.8rem;
--odo-ss-min-h: 190px;
--odo-ss-radius: 0px;
--odo-ss-gap: 1rem;
--odo-ss-border-width: 1px;
--odo-ss-overlay-color: #0b1633;
--odo-ss-overlay-opacity: 1;
--odo-ss-overlay-height: 65%;
--odo-ss-overlay-solid: 30%;
--odo-ss-overlay-height-mobile: 45%;
--odo-ss-overlay-solid-mobile: 15%;
position: relative;
width: 100%;
border: 0 !important;
outline: 0 !important;
box-shadow: none !important;
}
.odo-services-slider .odo-ss__controls {
position: absolute;
inset: 0;
display: flex;
justify-content: flex-start;
align-items: center;
padding: 0 0.5rem;
pointer-events: none;
z-index: 5;
}
.odo-services-slider .odo-ss__nav {
width: 40px;
height: 40px;
border: var(--odo-ss-border-width) solid var(--odo-ss-border);
background: var(--odo-ss-surface);
color: var(--odo-ss-text);
cursor: pointer;
transition: border-color 0.2s ease, color 0.2s ease;
border-radius: 0;
display: inline-flex;
align-items: center;
justify-content: center;
pointer-events: auto;
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
}
.odo-services-slider .odo-ss__nav:hover,
.odo-services-slider .odo-ss__nav:focus-visible {
border-color: var(--odo-ss-primary);
color: var(--odo-ss-text);
opacity: 1;
}
.odo-services-slider .odo-ss__nav--prev {
margin-right: auto;
}
.odo-services-slider .odo-ss__nav--next {
margin-left: auto;
}
.odo-services-slider .odo-ss__nav.is-hidden {
display: none !important;
}
.odo-services-slider .odo-ss__viewport {
overflow: hidden;
width: 100%;
}
.odo-services-slider .odo-ss__track {
display: flex;
gap: var(--odo-ss-gap);
transition: transform 0.35s ease;
will-change: transform;
}
.odo-services-slider .odo-ss__card {
flex: 0 0 calc((100% - (var(--odo-ss-gap) * 4)) / 5);
min-height: var(--odo-ss-min-h);
border: var(--odo-ss-border-width) solid var(--odo-ss-border);
border-radius: var(--odo-ss-radius);
background: var(--odo-ss-card-bg);
color: var(--odo-ss-card-text);
text-decoration: none;
padding: 0;
display: block;
text-align: left;
position: relative;
overflow: hidden;
transition: border-color 0.22s ease, transform 0.22s ease;
}
.odo-services-slider .odo-ss__card:hover,
.odo-services-slider .odo-ss__card:focus-visible {
border-color: var(--odo-ss-primary);
transform: translateY(-2px);
}
.odo-services-slider .odo-ss__media {
display: block;
width: 100%;
height: 100%;
min-height: var(--odo-ss-min-h);
}
.odo-services-slider .odo-ss__image,
.odo-services-slider .odo-ss__image-placeholder {
width: 100%;
height: 100%;
min-height: var(--odo-ss-min-h);
object-fit: cover;
display: block;
}
.odo-services-slider .odo-ss__image-placeholder {
background: linear-gradient(140deg, #d9d4cc 0%, #bdb7ad 100%);
}
.odo-services-slider .odo-ss__title {
margin: 0;
position: absolute;
left: 0;
right: 0;
bottom: 0;
padding: var(--odo-ss-title-pad);
font-size: var(--odo-ss-title-size);
line-height: 1.35;
color: var(--odo-ss-title-color);
z-index: 2;
background: linear-gradient(
to top,
color-mix(in srgb, var(--odo-ss-overlay-color) calc(var(--odo-ss-overlay-opacity) * 100%), transparent) 0%,
color-mix(in srgb, var(--odo-ss-overlay-color) calc(var(--odo-ss-overlay-opacity) * 100%), transparent) var(--odo-ss-overlay-solid),
color-mix(in srgb, var(--odo-ss-overlay-color) calc(var(--odo-ss-overlay-opacity) * 58%), transparent) 65%,
transparent 100%
);
max-height: var(--odo-ss-overlay-height);
}
@media (max-width: 1200px) {
.odo-services-slider .odo-ss__card {
flex-basis: calc((100% - (var(--odo-ss-gap) * 3)) / 4);
}
}
@media (max-width: 900px) {
.odo-services-slider .odo-ss__card {
flex-basis: calc((100% - (var(--odo-ss-gap) * 2)) / 3);
}
}
@media (max-width: 640px) {
.odo-services-slider .odo-ss__card {
flex-basis: calc((100% - var(--odo-ss-gap)) / 2);
}
.odo-services-slider .odo-ss__title {
max-height: var(--odo-ss-overlay-height-mobile);
background: linear-gradient(
to top,
color-mix(in srgb, var(--odo-ss-overlay-color) calc(var(--odo-ss-overlay-opacity) * 100%), transparent) 0%,
color-mix(in srgb, var(--odo-ss-overlay-color) calc(var(--odo-ss-overlay-opacity) * 100%), transparent) var(--odo-ss-overlay-solid-mobile),
color-mix(in srgb, var(--odo-ss-overlay-color) calc(var(--odo-ss-overlay-opacity) * 58%), transparent) 65%,
transparent 100%
);
}
}