.eld-hero__banner {
background: url(//exportloketdirect.nl/wp-content/themes/exportloketdirect/assets/img/hero-banner.webp) center top / 100% auto no-repeat;
}
@media (min-width: 768px) {
.eld-hero__banner {
aspect-ratio: var(--eld-hero-ratio, 1920 / 739);
}
}
.eld-hero__body {
padding-block: 26px 44px;
}
.eld-hero__col {
display: flex;
flex-direction: column;
gap: 12px;
max-width: 790px;
}
.eld-hero__intro {
max-width: 740px;
margin-top: 10px;
}
.eld-hero__subtitle {
font-family: var(--eld-font-head);
font-weight: var(--eld-weight-head);
font-size: 26px;
line-height: 32px;
color: var(--eld-navy);
} .eld-hero__usps-strip {
display: contents;
} .eld-hero__usp.eld-hero__usp--dup {
display: none;
} .eld-hero__usps {
display: flex;
align-items: center;
gap: 44px;
flex-wrap: wrap;
margin: 10px 0 0;
list-style: none;
padding: 0;
}
.eld-hero__usp {
display: flex;
align-items: center;
gap: 10px;
font-size: 15px;
line-height: 22px;
color: var(--eld-navy);
}
.eld-hero__usp svg {
display: block;
flex: none;
} .eld-hero__panel {
margin-top: 22px;
max-width: 480px; padding: 4px 24px 24px;
border-radius: var(--eld-radius-lg);
background: var(--eld-white);
box-shadow: var(--eld-shadow-hero-panel);
display: flex;
flex-direction: column;
gap: 0;
} .eld-hero__link {
display: flex;
align-items: center;
gap: 16px;
height: 68px; padding: 0 2px;
border-bottom: 1px solid var(--eld-border-light);
color: var(--eld-navy);
text-decoration: none;
transition: color 0.15s ease;
}
.eld-hero__link:hover,
.eld-hero__link:focus-visible {
color: var(--eld-orange);
}
.eld-hero__link svg {
display: block;
flex: none;
} .eld-hero__link > svg:first-child {
width: 26px;
height: 26px;
} .eld-hero__link > svg:last-child {
width: 9px;
height: 14px;
stroke: currentColor;
transition: transform 0.15s ease;
}
.eld-hero__link:hover > svg:last-child {
transform: translateX(3px);
} .eld-hero__link-label {
flex: 1;
font-size: 18px; line-height: 26px;
font-weight: var(--eld-weight-nav);
letter-spacing: -0.01em;
color: inherit;
}
.eld-hero__panel .eld-btn--orange {
margin-top: 20px;
width: 100%;
min-width: 0;
height: 58px; padding: 0 20px 0 24px;
border-radius: var(--eld-radius-md);
box-shadow: 0 8px 20px rgba(232, 135, 30, 0.28);
font-size: 16px;
line-height: 24px;
font-weight: var(--eld-weight-nav);
letter-spacing: 0;
} .eld-diensten {
padding-block: 80px 0;
}
.eld-diensten__head {
margin-bottom: 40px;
}
.eld-dienst {
position: relative;
display: block;
aspect-ratio: 312 / 424;
border-radius: var(--eld-radius-lg);
overflow: hidden;
background: var(--eld-navy);
text-decoration: none;
}
.eld-dienst__media {
position: absolute;
inset: 0;
display: block;
overflow: hidden;
}
.eld-dienst__media img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
} .eld-dienst__placeholder {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
padding: 24px;
background: repeating-linear-gradient(
135deg,
#043a55 0 12px,
#022f47 12px 24px
);
color: var(--eld-blue-gray-3);
font-size: 13px;
line-height: 20px;
text-align: center;
}
.eld-dienst__scrim {
position: absolute;
left: 0;
right: 0;
bottom: 0;
height: 300px;
background: linear-gradient(0deg, var(--eld-navy) 0%, rgba(2, 47, 71, 0) 100%);
pointer-events: none;
}
.eld-dienst__caption {
position: absolute;
left: 20px;
bottom: 20px;
right: 20px;
display: flex;
flex-direction: column;
gap: 2px;
pointer-events: none;
}
.eld-dienst__title {
font-size: 15px;
line-height: 24px;
letter-spacing: -0.025em;
color: var(--eld-white);
}
.eld-dienst__sub {
font-size: 14px;
line-height: 22px;
color: var(--eld-blue-gray-3);
} .eld-stappen {
padding-block: 96px 0;
}
.eld-stappen__head {
margin-bottom: 52px;
} .eld-stepcard {
position: relative;
z-index: 0;
padding: 48px 30px 30px;
border-radius: var(--eld-radius-md);
background: var(--eld-white);
border: 1px solid var(--eld-cream-border);
box-shadow: var(--eld-shadow-cream);
display: flex;
flex-direction: column;
gap: 6px;
} .eld-stepcard--2 {
margin-top: clamp(0px, calc((100vw - 940px) * 1000), 58px);
}
.eld-stepcard--3 {
margin-top: clamp(0px, calc((100vw - 940px) * 1000), 116px);
} .eld-stepcard__ring {
position: absolute;
left: 24px;
top: -34px;
width: 56px;
height: 56px;
border-radius: 50%;
background: var(--eld-white);
border: 1px solid var(--eld-cream-border);
}
.eld-stepcard__mask {
position: absolute;
left: 25px;
top: -1px;
width: 54px;
height: 27px;
background: var(--eld-white);
}
.eld-stepcard__num {
position: absolute;
left: 37px;
top: -21px;
width: 30px;
height: 30px;
border-radius: 50%;
background: var(--eld-orange);
color: var(--eld-white);
font-size: 14px;
line-height: 30px;
text-align: center;
}
.eld-stepcard__label {
font-size: 14px;
line-height: 22px;
color: var(--eld-navy);
}
.eld-stepcard__text {
margin-top: 8px;
} .eld-textblock {
margin-top: 96px;
background: var(--eld-white);
}
.eld-textblock__inner {
padding-block: 20px 0;
display: flex;
flex-direction: column;
gap: 22px;
align-items: center;
text-align: center;
}
.eld-textblock__title {
max-width: 520px;
}
.eld-textblock p {
max-width: 600px;
} .eld-band--top {
margin-top: 76px;
} .eld-band__head {
height: var(--eld-band-h);
display: flex;
align-items: flex-start;
gap: 22px;
flex-wrap: wrap;
}
.eld-band__head .eld-kicker {
margin-top: 6px;
}
.eld-band__grid {
padding-block: 36px 88px;
}
.eld-usp {
display: flex;
flex-direction: column;
align-items: center;
gap: 16px;
text-align: center;
}
.eld-usp img {
display: block;
height: 46px;
width: auto;
}
.eld-usp p {
max-width: 300px;
} .eld-usp__placeholder {
display: block;
font-size: 13px;
line-height: 20px;
color: var(--eld-blue-gray);
} .eld-feature {
padding-block: 104px 0;
}
.eld-feature__col {
display: flex;
flex-direction: column;
gap: 24px;
align-items: flex-start;
}
.eld-feature__col h2,
.eld-feature__col p {
max-width: 520px;
}
.eld-feature__media {
border-radius: var(--eld-radius-lg);
overflow: hidden;
background: var(--eld-surface);
}
.eld-feature__media img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
aspect-ratio: 16 / 10;
}   @media (max-width: 767px) { .eld-hero__banner {
background-image: none !important;
} .eld-hero__body {
background: linear-gradient(
to bottom,
var(--eld-cream) 0,
var(--eld-cream) calc(100% - 130px),
rgba(253, 241, 230, 0) 100%
);
} .eld-hero__panel {
padding: 2px 18px 18px;
}
.eld-hero__link {
height: 60px;
} .eld-hero__usps-strip {
display: block;
overflow: hidden;
margin-inline: calc(var(--eld-gutter) * -1); mask-image: linear-gradient(
to right,
transparent 0,
#000 var(--eld-gutter),
#000 calc(100% - var(--eld-gutter)),
transparent 100%
);
} .eld-hero__usps {
flex-wrap: nowrap;
gap: 0;
width: max-content;
animation: eld-usp-lint 14s linear infinite;
will-change: transform;
}
.eld-hero__usp {
flex: 0 0 auto;
margin-inline-end: 34px;
} .eld-hero__usp.eld-hero__usp--dup {
display: flex;
} .eld-hero__usps-strip:hover .eld-hero__usps,
.eld-hero__usps-strip:focus-within .eld-hero__usps {
animation-play-state: paused;
}
}
@keyframes eld-usp-lint {
from {
transform: translate3d(0, 0, 0);
}
to { transform: translate3d(-50%, 0, 0);
}
} @media (max-width: 767px) and (prefers-reduced-motion: reduce) {
.eld-hero__usps-strip {
display: contents;
}
.eld-hero__usps {
animation: none;
flex-wrap: wrap;
width: auto;
column-gap: 22px;
row-gap: 8px;
}
.eld-hero__usp {
margin-inline-end: 0;
}
.eld-hero__usp.eld-hero__usp--dup {
display: none;
}
}