.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%;
--apy-hero-accent: var(--odo-ss-primary, #8f7452);
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.8rem;
pointer-events: none;
z-index: 5;
}
.odo-services-slider .odo-ss__nav {
width: 50px;
height: 50px;
border: 1px solid rgba(255, 255, 255, 0.14);
border-radius: 999px;
background: rgba(10, 17, 28, 0.55);
color: #fff;
cursor: pointer;
display: grid;
place-items: center;
pointer-events: auto;
box-shadow:
0 8px 22px rgba(4, 10, 18, 0.38),
0 2px 8px rgba(0, 0, 0, 0.28);
backdrop-filter: blur(4px);
-webkit-backdrop-filter: blur(4px);
transition: background 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease;
}
.odo-services-slider .odo-ss__nav svg {
width: 28px;
height: 28px;
}
.odo-services-slider .odo-ss__nav path {
stroke: currentColor;
stroke-width: 3.2;
stroke-linecap: round;
stroke-linejoin: round;
transition: transform 0.25s ease;
}
.odo-services-slider .odo-ss__nav:hover,
.odo-services-slider .odo-ss__nav:focus-visible {
color: #fff;
background: rgba(10, 17, 28, 0.78);
border-color: rgba(255, 255, 255, 0.22);
box-shadow:
0 10px 26px rgba(4, 10, 18, 0.48),
0 4px 12px rgba(0, 0, 0, 0.32);
}
.odo-services-slider .odo-ss__nav:active {
transform: scale(0.98);
background: rgba(10, 17, 28, 0.88);
}
.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: 900px) {
.odo-services-slider .odo-ss__nav {
width: 42px;
height: 42px;
}
.odo-services-slider .odo-ss__nav svg {
width: 24px;
height: 24px;
}
}
@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%
);
}
}