:root {
--sd-ink: #050708;
--sd-night: #0b1014;
--sd-surface: #11181d;
--sd-surface-raised: #172127;
--sd-paper: #f6f2eb;
--sd-muted: #b8c0c4;
--sd-muted-soft: #929ca1;
--sd-orange: #ef6b24;
--sd-peach: #e39a77;
--sd-line: rgba(255, 255, 255, .145);
--sd-line-strong: rgba(255, 255, 255, .24);
--sd-container: 1240px;
--sd-reading: 720px;
--sd-nav-h: 88px;
--sd-space-1: 4px;
--sd-space-2: 8px;
--sd-space-3: 12px;
--sd-space-4: 16px;
--sd-space-5: 24px;
--sd-space-6: 32px;
--sd-space-7: 48px;
--sd-space-8: 64px;
--sd-space-9: 96px;
--sd-space-10: 128px;
--sd-radius-sm: 2px;
--sd-radius-md: 10px;
--sd-shadow: 0 30px 90px rgba(0, 0, 0, .34);
--sd-ease: cubic-bezier(.22, .8, .3, 1);
}
html { scroll-padding-top: calc(var(--sd-nav-h) + 16px); }
body.sd-premium-ui {
margin: 0;
background: var(--sd-night);
color: var(--sd-paper);
font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
font-size: 16px;
line-height: 1.6;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}
body.sd-premium-ui * { box-sizing: border-box; }
body.sd-premium-ui :where(.sd, .sds, .sdo, .sdc, .sd404) { overflow: clip; background: var(--sd-night); }
body.sd-premium-ui :where(.sd, .sds, .sdo, .sdc, .sd404) a { text-underline-offset: .2em; }
.sd-skip-link {
position: fixed;
z-index: 100000;
top: 12px;
left: 12px;
padding: 12px 16px;
color: var(--sd-ink);
background: #fff;
font-weight: 800;
transform: translateY(-180%);
transition: transform 180ms ease;
}
.sd-skip-link:focus { transform: none; } body.sd-premium-ui :where(.sd-nav, .sds-nav, .sdo-nav, .sdc-nav) {
height: var(--sd-nav-h);
padding-inline: max(24px, calc((100vw - var(--sd-container)) / 2));
background: rgba(9, 13, 16, .97);
border-bottom: 1px solid var(--sd-line);
box-shadow: none;
transition: height 240ms var(--sd-ease), background-color 240ms ease, box-shadow 240ms ease;
}
body.sd-premium-ui :where(.sd-nav, .sds-nav, .sdo-nav, .sdc-nav).is-scrolled {
height: 78px;
background: rgba(9, 13, 16, .99);
box-shadow: 0 14px 44px rgba(0, 0, 0, .24);
}
body.sd-premium-ui :where(.sd-nav, .sds-nav, .sdo-nav, .sdc-nav) > a {
display: grid;
place-items: center;
width: 70px;
height: 70px;
}
body.sd-premium-ui :where(.sd-nav, .sds-nav, .sdo-nav, .sdc-nav) img {
width: 66px;
height: 66px;
transition: transform 260ms var(--sd-ease), opacity 180ms ease;
}
body.sd-premium-ui :where(.sd-nav, .sds-nav, .sdo-nav, .sdc-nav) > a:hover img { transform: scale(1.035); }
body.sd-premium-ui :where(.sd-nav__links, .sds-nav__links, .sdo-nav__links, .sdc-nav__links) { gap: 28px; }
body.sd-premium-ui :where(.sd-nav__links, .sds-nav__links, .sdo-nav__links, .sdc-nav__links) > a:not([class*="btn"]) {
position: relative;
padding-block: 12px;
color: rgba(255, 255, 255, .82);
font-size: 11.5px;
font-weight: 760;
letter-spacing: .13em;
transition: color 180ms ease;
}
body.sd-premium-ui :where(.sd-nav__links, .sds-nav__links, .sdo-nav__links, .sdc-nav__links) > a[class*="btn"] {
min-height: 56px;
padding-inline: 28px;
}
body.sd-premium-ui :where(.sd-nav__links, .sds-nav__links, .sdo-nav__links, .sdc-nav__links) > a:not([class*="btn"])::after {
content: "";
position: absolute;
right: 0;
bottom: 6px;
left: 0;
height: 1px;
background: var(--sd-orange);
transform: scaleX(0);
transform-origin: right;
transition: transform 220ms var(--sd-ease);
}
body.sd-premium-ui :where(.sd-nav__links, .sds-nav__links, .sdo-nav__links, .sdc-nav__links) > a:hover,
body.sd-premium-ui :where(.sd-nav__links, .sds-nav__links, .sdo-nav__links, .sdc-nav__links) > a[aria-current="page"] { color: #fff; }
body.sd-premium-ui :where(.sd-nav__links, .sds-nav__links, .sdo-nav__links, .sdc-nav__links) > a:hover::after,
body.sd-premium-ui :where(.sd-nav__links, .sds-nav__links, .sdo-nav__links, .sdc-nav__links) > a[aria-current="page"]::after {
transform: scaleX(1);
transform-origin: left;
} body.sd-premium-ui :where(.sd-eyebrow, .sds-eyebrow, .sdo-eyebrow, .sdc-eyebrow) {
color: var(--sd-orange);
font-size: clamp(10px, .72vw, 11px);
font-weight: 800;
letter-spacing: .2em;
line-height: 1.4;
}
body.sd-premium-ui :where(.sd-title, .sds-title, .sdo-title, .sdc-title),
body.sd-premium-ui :where(.sd-hero, .sds-hero, .sdo-hero, .sdc-hero) h1 {
max-width: 18ch;
font-family: Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif;
font-weight: 800;
letter-spacing: -.018em;
text-wrap: balance;
}
body.sd-premium-ui :where(.sd-title, .sds-title, .sdo-title, .sdc-title) {
margin-block: 14px 22px;
font-size: clamp(42px, 4.5vw, 70px);
line-height: .96;
}
body.sd-premium-ui :where(.sd-lead, .sds-lead, .sdo-lead, .sdc-lead) {
max-width: var(--sd-reading);
color: var(--sd-muted);
font-size: clamp(17px, 1.3vw, 19px);
line-height: 1.7;
}
body.sd-premium-ui :where(.sd-btn, .sds-btn, .sdo-btn, .sdc-btn) {
position: relative;
min-height: 52px;
gap: 10px;
padding-inline: 24px;
border-radius: var(--sd-radius-sm);
border-color: var(--sd-orange);
background: var(--sd-orange);
box-shadow: 0 10px 28px rgba(239, 107, 36, .16);
font-size: 11px;
font-weight: 820;
letter-spacing: .12em;
transition: transform 180ms var(--sd-ease), background-color 180ms ease, color 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
}
body.sd-premium-ui :where(.sd-btn, .sds-btn, .sdo-btn, .sdc-btn)[href*="thealpineco"]::after { content: "↗"; font-size: 15px; transition: transform 180ms var(--sd-ease); }
body.sd-premium-ui :where(.sd-btn, .sds-btn, .sdo-btn, .sdc-btn)[href*="thealpineco"]:hover::after { transform: translate(2px, -2px); }
body.sd-premium-ui :where(.sd-btn, .sds-btn, .sdo-btn, .sdc-btn):hover {
transform: translateY(-2px);
background: #fff;
border-color: #fff;
color: var(--sd-ink) !important;
box-shadow: 0 16px 36px rgba(0, 0, 0, .22);
}
body.sd-premium-ui :where(.sd-btn, .sds-btn, .sdo-btn, .sdc-btn):active { transform: translateY(0) scale(.985); }
body.sd-premium-ui :where(.sd-btn--ghost, .sds-btn--ghost, .sdo-btn--ghost, .sdc-btn--ghost) {
border-color: var(--sd-line-strong);
background: rgba(5, 8, 10, .34);
box-shadow: none;
}
body.sd-premium-ui :where(a, button):focus-visible { outline: 3px solid #fff !important; outline-offset: 4px !important; } body.sd-premium-ui :where(.sd-hero, .sds-hero, .sdo-hero, .sdc-hero) {
isolation: isolate;
background-size: cover;
background-repeat: no-repeat;
}
body.sd-premium-ui .sd-hero {
min-height: min(700px, 84svh);
height: min(760px, 82svh);
max-height: 760px;
padding: calc(var(--sd-nav-h) + 72px) max(24px, calc((100vw - var(--sd-container)) / 2)) 68px;
isolation: isolate;
background-color: #081018;
background-image: url(//skidoctor.nl/wp-content/plugins/ski-doctor-premium-ui-v1020/assets/images/ski-doctor-dawn-ridge-desktop-v1.webp);
background-position: center 50%;
}
body.sd-premium-ui :where(.sds-hero, .sdo-hero, .sdc-hero) {
min-height: 520px;
height: min(600px, 68svh);
max-height: 600px;
padding: calc(var(--sd-nav-h) + 70px) max(24px, calc((100vw - var(--sd-container)) / 2)) 62px;
}
body.sd-premium-ui .sds-hero {
background-image: url(https://skidoctor.nl/wp-content/uploads/2026/07/ski-doctor-kanten-slijpen-v2.webp);
background-position: 68% 52%;
}
body.sd-premium-ui .sdo-hero {
background-image: url(https://skidoctor.nl/wp-content/uploads/2026/07/ski-doctor-werkplaats-optimized.webp);
background-position: 67% 48%;
}
body.sd-premium-ui .sdc-hero {
background-image: url(https://skidoctor.nl/wp-content/uploads/2026/07/ski-doctor-waxen-v2.webp);
background-position: 65% 50%;
}
body.sd-premium-ui .sd-hero::before {
background:
radial-gradient(ellipse at 82% 24%, rgba(3, 6, 8, .16) 0%, rgba(3, 6, 8, 0) 30%),
linear-gradient(90deg, rgba(3, 6, 8, .84) 0%, rgba(3, 6, 8, .62) 36%, rgba(3, 6, 8, .12) 64%, rgba(3, 6, 8, .015) 84%),
linear-gradient(180deg, rgba(3, 6, 8, .03) 0%, rgba(3, 6, 8, .08) 53%, rgba(3, 6, 8, .65) 100%);
}
body.sd-premium-ui :where(.sds-hero, .sdo-hero, .sdc-hero)::before {
background:
linear-gradient(90deg, rgba(3, 6, 8, .92) 0%, rgba(3, 6, 8, .72) 35%, rgba(3, 6, 8, .17) 66%, rgba(3, 6, 8, .04)),
linear-gradient(180deg, rgba(3, 6, 8, .05), rgba(3, 6, 8, .68));
}
body.sd-premium-ui :where(.sd-hero__copy, .sds-hero__copy, .sdo-hero__copy, .sdc-hero__copy) {
animation: none !important;
}
body.sd-premium-ui .sd-hero__copy { max-width: 620px; }
body.sd-premium-ui :where(.sds-hero__copy, .sdo-hero__copy, .sdc-hero__copy) { max-width: 650px; }
body.sd-premium-ui .sd-hero h1 {
margin-block: 16px 22px;
max-width: 11.2ch;
font-size: clamp(62px, 5.55vw, 86px);
line-height: .9;
}
body.sd-premium-ui :where(.sds-hero, .sdo-hero, .sdc-hero) h1 {
margin-block: 13px 18px;
max-width: 11.5ch;
font-size: clamp(56px, 5vw, 76px);
line-height: .91;
}
body.sd-premium-ui :where(.sd-hero, .sds-hero, .sdo-hero, .sdc-hero) p {
max-width: 590px;
color: rgba(255, 255, 255, .78);
font-size: clamp(17px, 1.3vw, 19px);
line-height: 1.65;
}
body.sd-premium-ui .sd-hero__logo {
top: calc(var(--sd-nav-h) + 76px);
right: max(24px, calc((100vw - var(--sd-container)) / 2));
width: clamp(138px, 12vw, 176px);
padding: 10px;
box-sizing: content-box;
border: 1px solid rgba(227, 154, 119, .20);
border-radius: 2px;
background: rgba(3, 6, 8, .36);
box-shadow: 0 24px 72px rgba(0, 0, 0, .34);
backdrop-filter: blur(10px);
opacity: 0;
transform: translateY(10px) scale(.975);
filter: drop-shadow(0 22px 60px rgba(0, 0, 0, .52));
animation: none !important;
transition: opacity 620ms 80ms ease, transform 700ms 80ms var(--sd-ease);
}
body.sd-premium-ui .sd-hero__logo.is-visible { opacity: .96; transform: none; }
body.sd-premium-ui :where(.sds-hero__logo, .sdo-hero__logo, .sdc-hero__logo) { display: none; }
body.sd-premium-ui :where(.sd-snow, .sds-snow, .sdo-snow, .sdc-snow) { opacity: .15; animation-duration: 28s; }
body.sd-premium-ui :where(.sd-snow, .sds-snow, .sdo-snow, .sdc-snow)::before { opacity: .07; animation-duration: 42s; }
body.sd-premium-ui.home .sd-snow { display: none !important; } body.sd-premium-ui-404 { min-height: 100svh; }
body.sd-premium-ui-404 .sd404 { position: relative; min-height: 100svh; }
body.sd-premium-ui-404 .sd404 .sd-nav {
position: fixed;
z-index: 1000;
inset: 0 0 auto;
display: flex;
align-items: center;
justify-content: space-between;
}
body.sd-premium-ui-404 .sd404 .sd-nav__links { display: flex; align-items: center; }
body.sd-premium-ui-404 .sd404 .sd-menu-toggle,
body.sd-premium-ui-404 .sd404 .sd-mobile-menu { display: none; }
body.sd-premium-ui-404 .sd404-hero {
position: relative;
display: grid;
align-items: center;
min-height: 100svh;
padding: calc(var(--sd-nav-h) + 72px) max(24px, calc((100vw - var(--sd-container)) / 2)) 72px;
background: #081018 url(//skidoctor.nl/wp-content/plugins/ski-doctor-premium-ui-v1020/assets/images/ski-doctor-dawn-ridge-desktop-v1.webp) center 50% / cover no-repeat;
isolation: isolate;
}
body.sd-premium-ui-404 .sd404-hero::before {
content: "";
position: absolute;
z-index: -1;
inset: 0;
background:
linear-gradient(90deg, rgba(3, 6, 8, .91) 0%, rgba(3, 6, 8, .68) 43%, rgba(3, 6, 8, .13) 72%, rgba(3, 6, 8, .03)),
linear-gradient(180deg, rgba(3, 6, 8, .06), rgba(3, 6, 8, .72));
}
body.sd-premium-ui-404 .sd404-hero__inner {
display: grid;
grid-template-columns: minmax(0, 680px) minmax(180px, 1fr);
gap: clamp(48px, 8vw, 130px);
align-items: center;
width: 100%;
}
body.sd-premium-ui-404 .sd404-code {
margin: 0 0 -14px;
color: rgba(255, 255, 255, .12);
font-family: Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif;
font-size: clamp(84px, 12vw, 180px);
font-weight: 800;
letter-spacing: -.04em;
line-height: .78;
}
body.sd-premium-ui-404 .sd404 h1 {
max-width: 10ch;
margin: 16px 0 22px;
font-family: Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif;
font-size: clamp(54px, 6vw, 88px);
font-weight: 800;
letter-spacing: -.018em;
line-height: .9;
text-wrap: balance;
}
body.sd-premium-ui-404 .sd404-lead {
max-width: 620px;
margin: 0;
color: rgba(255, 255, 255, .79);
font-size: clamp(17px, 1.35vw, 20px);
line-height: 1.65;
}
body.sd-premium-ui-404 .sd404-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
body.sd-premium-ui-404 .sd404-actions .sd-btn {
display: inline-flex;
align-items: center;
justify-content: center;
color: #fff !important;
text-decoration: none !important;
}
body.sd-premium-ui-404 .sd404-actions .sd-btn--ghost {
color: rgba(255, 255, 255, .92) !important;
}
body.sd-premium-ui-404 .sd404-logo {
justify-self: end;
width: clamp(170px, 16vw, 230px);
padding: 14px;
border: 1px solid rgba(227, 154, 119, .24);
background: rgba(3, 6, 8, .28);
box-shadow: 0 28px 90px rgba(0, 0, 0, .36);
backdrop-filter: blur(10px);
}
body.sd-premium-ui-404 .sd404-logo img { display: block; width: 100%; height: auto; }
body.sd-premium-ui-404 .sd404-quicklinks {
display: flex;
flex-wrap: wrap;
gap: 10px 22px;
margin-top: 28px;
}
body.sd-premium-ui-404 .sd404-quicklinks a {
color: rgba(255, 255, 255, .72);
font-size: 12px;
font-weight: 750;
letter-spacing: .08em;
text-decoration-color: rgba(239, 107, 36, .72);
transition: color 180ms ease;
}
body.sd-premium-ui-404 .sd404-quicklinks a:hover { color: #fff; } body.sd-premium-ui :where(.sd-section, .sds-section, .sdo-section, .sdc-section) {
padding: clamp(76px, 8vw, var(--sd-space-10)) max(24px, calc((100vw - var(--sd-container)) / 2));
}
body.sd-premium-ui :where(.sd-services, .sds-grid, .sdo-grid, .sdc-choice) { gap: 20px; }
body.sd-premium-ui :where(.sd-card, .sds-card, .sdo-card, .sdc-card) {
border-radius: var(--sd-radius-md);
border-color: var(--sd-line);
background: linear-gradient(180deg, rgba(24, 33, 39, .98), rgba(15, 21, 25, .98));
box-shadow: 0 22px 70px rgba(0, 0, 0, .24);
transition: transform 320ms var(--sd-ease), border-color 220ms ease, box-shadow 320ms var(--sd-ease);
}
body.sd-premium-ui :where(.sd-card, .sds-card, .sdo-card, .sdc-card):hover {
transform: translateY(-6px);
border-color: rgba(227, 154, 119, .34);
box-shadow: var(--sd-shadow);
}
body.sd-premium-ui :where(.sd-card, .sds-card, .sdo-card, .sdc-card):focus-within { border-color: rgba(255, 255, 255, .42); }
body.sd-premium-ui :where(.sd-card__image, .sds-card__image) { transition: transform 650ms var(--sd-ease), filter 320ms ease; }
body.sd-premium-ui :where(.sd-card, .sds-card):hover :where(.sd-card__image, .sds-card__image) { transform: scale(1.035); }
body.sd-premium-ui :where(.sd-trust, .sds-trust, .sdo-trust, .sdc-trust) {
padding-inline: max(24px, calc((100vw - var(--sd-container)) / 2));
background-color: #141c21;
}
body.sd-premium-ui :where(.sd-book, .sds-book, .sdo-book, .sdc-book) {
padding: clamp(76px, 8vw, 108px) max(24px, calc((100vw - var(--sd-container)) / 2));
background-color: #12191e;
}
body.sd-premium-ui :where(.sd-footer, .sds-footer, .sdo-footer, .sdc-footer) {
padding: 56px max(24px, calc((100vw - var(--sd-container)) / 2));
}
body.sd-premium-ui :where(.sd-footer__links, .sds-footer__links, .sdo-footer__links, .sdc-footer__links) a {
color: rgba(255, 255, 255, .72);
transition: color 180ms ease;
}
body.sd-premium-ui :where(.sd-footer__links, .sds-footer__links, .sdo-footer__links, .sdc-footer__links) a:hover { color: var(--sd-orange); } body.sd-premium-ui :where(.sd-section, .sds-section, .sdo-section, .sdc-section) { background-color: #11181d; }
body.sd-premium-ui :where(.sd-story, .sds-story, .sdo-story, .sdc-story) { background-color: #0e1418; }
body.sd-premium-ui :where(.sd-local, .sds-local, .sdo-local, .sdc-local) { background-color: #151d22; }
body.sd-premium-ui :where(.sd-contact, .sds-contact, .sdo-contact, .sdc-contact) { background-color: #121a1f; }
body.sd-premium-ui :where(.sd-footer, .sds-footer, .sdo-footer, .sdc-footer) { background-color: #080c0f; } .sd-motion-ready .sd-reveal {
opacity: 0;
transform: translateY(22px);
transition: opacity 440ms var(--sd-ease), transform 440ms var(--sd-ease);
}
.sd-motion-ready .sd-reveal.is-visible { opacity: 1; transform: none; }
.sd-motion-ready .sd-reveal[data-stagger="1"] { transition-delay: 45ms; }
.sd-motion-ready .sd-reveal[data-stagger="2"] { transition-delay: 90ms; }
@supports (content-visibility: auto) {
body.sd-premium-ui :where(section, footer) { content-visibility: auto; contain-intrinsic-size: auto 720px; }
body.sd-premium-ui :where(header, nav) { content-visibility: visible; }
}
@media (max-width: 900px) {
:root { --sd-nav-h: 76px; }
body.sd-premium-ui :where(.sd-menu-toggle, .sds-menu-toggle, .sdo-menu-toggle, .sdc-menu-toggle) {
width: 48px;
height: 48px;
border-radius: var(--sd-radius-sm);
transition: border-color 180ms ease, background-color 180ms ease, transform 180ms var(--sd-ease);
}
body.sd-premium-ui :where(.sd-menu-toggle, .sds-menu-toggle, .sdo-menu-toggle, .sdc-menu-toggle):active { transform: scale(.96); }
body.sd-premium-ui :where(.sd-mobile-menu, .sds-mobile-menu, .sdo-mobile-menu, .sdc-mobile-menu) {
top: 68px;
left: 12px;
right: 12px;
gap: 0;
padding: 10px;
border-radius: var(--sd-radius-md);
background: #080c0f;
box-shadow: 0 30px 80px rgba(0, 0, 0, .58);
opacity: 0;
visibility: hidden;
transform: translateY(-8px) scale(.985);
transform-origin: top right;
transition: opacity 180ms ease, transform 220ms var(--sd-ease), visibility 0s linear 220ms;
}
body.sd-premium-ui :where(.sd-mobile-menu, .sds-mobile-menu, .sdo-mobile-menu, .sdc-mobile-menu).is-open {
opacity: 1;
visibility: visible;
transform: none;
transition-delay: 0s;
}
body.sd-premium-ui :where(.sd-mobile-menu, .sds-mobile-menu, .sdo-mobile-menu, .sdc-mobile-menu) a {
min-height: 52px;
display: flex;
align-items: center;
padding-inline: 16px;
}
body.sd-premium-ui .sd-hero__logo { width: 126px; opacity: .94; }
body.sd-premium-ui .sd-hero__copy { max-width: 520px; }
body.sd-premium-ui .sd-hero__logo { top: calc(var(--sd-nav-h) + 34px); right: 24px; width: 108px; }
body.sd-premium-ui-404 .sd404 .sd-nav__links { display: none; }
body.sd-premium-ui-404 .sd404 .sd-menu-toggle {
display: grid;
place-items: center;
padding: 0;
color: #fff;
border: 1px solid var(--sd-line-strong);
background: rgba(5, 8, 10, .42);
cursor: pointer;
}
body.sd-premium-ui-404 .sd404 .sd-menu-toggle span,
body.sd-premium-ui-404 .sd404 .sd-menu-toggle span::before,
body.sd-premium-ui-404 .sd404 .sd-menu-toggle span::after {
display: block;
width: 20px;
height: 2px;
background: currentColor;
}
body.sd-premium-ui-404 .sd404 .sd-menu-toggle span { position: relative; }
body.sd-premium-ui-404 .sd404 .sd-menu-toggle span::before,
body.sd-premium-ui-404 .sd404 .sd-menu-toggle span::after { content: ""; position: absolute; left: 0; }
body.sd-premium-ui-404 .sd404 .sd-menu-toggle span::before { top: -6px; }
body.sd-premium-ui-404 .sd404 .sd-menu-toggle span::after { top: 6px; }
body.sd-premium-ui-404 .sd404 .sd-mobile-menu { display: grid; position: fixed; z-index: 999; }
body.sd-premium-ui-404 .sd404-hero { padding-top: calc(var(--sd-nav-h) + 62px); }
body.sd-premium-ui-404 .sd404-hero__inner { grid-template-columns: minmax(0, 1fr) 138px; gap: 38px; }
body.sd-premium-ui-404 .sd404-logo { width: 138px; padding: 9px; }
}
@media (max-width: 600px) {
body.sd-premium-ui :where(.sd-nav, .sds-nav, .sdo-nav, .sdc-nav),
body.sd-premium-ui :where(.sd-nav, .sds-nav, .sdo-nav, .sdc-nav).is-scrolled { height: var(--sd-nav-h); padding-inline: 16px; }
body.sd-premium-ui :where(.sd-nav, .sds-nav, .sdo-nav, .sdc-nav) > a { width: 62px; height: 62px; }
body.sd-premium-ui :where(.sd-nav, .sds-nav, .sdo-nav, .sdc-nav) img { width: 58px; height: 58px; }
body.sd-premium-ui .sd-hero {
min-height: min(650px, 88svh);
height: auto;
max-height: none;
padding: 196px 22px 48px;
background-image: url(//skidoctor.nl/wp-content/plugins/ski-doctor-premium-ui-v1020/assets/images/ski-doctor-dawn-ridge-mobile-v1.webp);
background-position: center 48%;
}
body.sd-premium-ui :where(.sds-hero, .sdo-hero, .sdc-hero) {
min-height: min(590px, 82svh);
height: auto;
max-height: none;
padding: 132px 22px 44px;
}
body.sd-premium-ui :where(.sds-hero, .sdo-hero, .sdc-hero)::before {
background: linear-gradient(180deg, rgba(3, 6, 8, .28), rgba(3, 6, 8, .78) 45%, rgba(3, 6, 8, .96));
}
body.sd-premium-ui .sd-hero::before {
background:
linear-gradient(90deg, rgba(3, 6, 8, .54) 0%, rgba(3, 6, 8, .18) 72%, rgba(3, 6, 8, .08) 100%),
linear-gradient(180deg, rgba(3, 6, 8, .12) 0%, rgba(3, 6, 8, .28) 34%, rgba(3, 6, 8, .75) 66%, rgba(3, 6, 8, .94) 100%);
}
body.sd-premium-ui .sd-hero__logo {
top: 92px;
right: 20px;
width: 68px;
padding: 6px;
background: rgba(3, 6, 8, .42);
opacity: 0;
transform: translateY(6px) scale(.985);
}
body.sd-premium-ui .sd-hero__logo.is-visible { opacity: .96; transform: none; }
body.sd-premium-ui .sd-hero h1 {
max-width: 9.5ch;
font-size: clamp(46px, 14vw, 58px);
line-height: .9;
}
body.sd-premium-ui :where(.sds-hero, .sdo-hero, .sdc-hero) h1 {
max-width: 10ch;
font-size: clamp(44px, 13vw, 56px);
line-height: .91;
}
body.sd-premium-ui :where(.sd-hero, .sds-hero, .sdo-hero, .sdc-hero) p { font-size: 16px; line-height: 1.6; }
body.sd-premium-ui :where(.sd-actions) { display: grid; grid-template-columns: 1fr; }
body.sd-premium-ui :where(.sd-actions .sd-btn) { width: 100%; }
body.sd-premium-ui :where(.sd-title, .sds-title, .sdo-title, .sdc-title) { font-size: clamp(40px, 12vw, 52px); }
body.sd-premium-ui :where(.sd-card, .sds-card, .sdo-card, .sdc-card):hover { transform: none; }
body.sd-premium-ui :where(.sd-section, .sds-section, .sdo-section, .sdc-section) { padding-block: 76px; }
body.sd-premium-ui :where(.sd-btn, .sds-btn, .sdo-btn, .sdc-btn) { min-height: 54px; padding-inline: 22px; }
body.sd-premium-ui-404 .sd404-hero {
align-items: end;
min-height: 100svh;
padding: 142px 22px 46px;
background-image: url(//skidoctor.nl/wp-content/plugins/ski-doctor-premium-ui-v1020/assets/images/ski-doctor-dawn-ridge-mobile-v1.webp);
background-position: center 48%;
}
body.sd-premium-ui-404 .sd404-hero::before {
background:
linear-gradient(90deg, rgba(3, 6, 8, .45), rgba(3, 6, 8, .08)),
linear-gradient(180deg, rgba(3, 6, 8, .1), rgba(3, 6, 8, .42) 42%, rgba(3, 6, 8, .96) 78%);
}
body.sd-premium-ui-404 .sd404-hero__inner { display: block; }
body.sd-premium-ui-404 .sd404-code { margin-bottom: -6px; font-size: 92px; }
body.sd-premium-ui-404 .sd404 h1 { font-size: clamp(46px, 13vw, 58px); }
body.sd-premium-ui-404 .sd404-logo { position: absolute; top: 92px; right: 20px; width: 74px; padding: 6px; }
body.sd-premium-ui-404 .sd404-actions { display: grid; grid-template-columns: 1fr; }
body.sd-premium-ui-404 .sd404-actions .sd-btn { width: 100%; }
body.sd-premium-ui-404 .sd404-quicklinks { margin-top: 22px; }
}
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto !important; }
body.sd-premium-ui *, body.sd-premium-ui *::before, body.sd-premium-ui *::after {
scroll-behavior: auto !important;
animation-duration: .01ms !important;
animation-iteration-count: 1 !important;
transition-duration: .01ms !important;
}
body.sd-premium-ui :where(.sd-snow, .sds-snow, .sdo-snow, .sdc-snow) { display: none !important; }
.sd-motion-ready .sd-reveal { opacity: 1; transform: none; }
} body.sd-premium-ui-kampeerwinkel {
--sdk-gold: #f08a4b;
--sdk-cream: #f4efe7;
background: #080b0d;
}
body.sd-premium-ui-kampeerwinkel :where(.sdk) { background: #080b0d; }
body.sd-premium-ui-kampeerwinkel .sdk-nav {
position: fixed;
z-index: 40;
top: 0;
right: 0;
left: 0;
display: flex;
align-items: center;
justify-content: space-between;
background: linear-gradient(180deg, rgba(5, 7, 8, .94), rgba(5, 7, 8, .36));
backdrop-filter: blur(14px);
-webkit-backdrop-filter: blur(14px);
}
body.sd-premium-ui-kampeerwinkel .sdk-nav__brand {
width: auto;
height: auto;
display: flex;
gap: 14px;
align-items: center;
color: #fff;
text-decoration: none;
}
body.sd-premium-ui-kampeerwinkel .sdk-nav__brand span { display: grid; line-height: 1.15; }
body.sd-premium-ui-kampeerwinkel .sdk-alpine-logo {
width: 62px;
height: 62px;
display: block;
object-fit: contain;
filter: drop-shadow(0 10px 18px rgba(0,0,0,.32));
}
body.sd-premium-ui-kampeerwinkel .sdk-nav__brand strong {
font-size: 13px;
letter-spacing: .14em;
text-transform: uppercase;
}
body.sd-premium-ui-kampeerwinkel .sdk-nav__brand small {
margin-top: 5px;
color: rgba(255,255,255,.54);
font-size: 9px;
font-weight: 700;
letter-spacing: .18em;
text-transform: uppercase;
}
body.sd-premium-ui-kampeerwinkel .sdk-nav__back {
width: auto;
height: auto;
display: flex;
align-items: center;
gap: 16px;
color: rgba(255,255,255,.78);
font-size: 10px;
font-weight: 800;
letter-spacing: .14em;
text-decoration: none;
text-transform: uppercase;
transition: color 180ms ease, transform 220ms var(--sd-ease);
}
body.sd-premium-ui-kampeerwinkel .sdk-nav__back:hover { color: #fff; transform: translateX(3px); }
body.sd-premium-ui-kampeerwinkel .sdk-hero {
position: relative;
min-height: 100svh;
display: grid;
align-items: center;
padding: calc(var(--sd-nav-h) + 72px) max(24px, calc((100vw - var(--sd-container)) / 2)) 88px;
isolation: isolate;
background-image: url(//skidoctor.nl/wp-content/plugins/ski-doctor-premium-ui-v1020/assets/images/ski-doctor-kampeerwinkel-coming-soon-v1.webp);
background-size: cover;
background-position: center;
}
body.sd-premium-ui-kampeerwinkel .sdk-hero::before {
content: "";
position: absolute;
z-index: -1;
inset: 0;
background:
linear-gradient(90deg, rgba(5,7,8,.99) 0%, rgba(5,7,8,.91) 28%, rgba(5,7,8,.48) 58%, rgba(5,7,8,.12) 100%),
linear-gradient(180deg, rgba(5,7,8,.1) 55%, rgba(5,7,8,.82) 100%);
}
body.sd-premium-ui-kampeerwinkel .sdk-hero::after {
content: "";
position: absolute;
z-index: -1;
inset: 0;
background-image: radial-gradient(rgba(255,255,255,.16) .55px, transparent .7px);
background-size: 4px 4px;
opacity: .045;
pointer-events: none;
}
body.sd-premium-ui-kampeerwinkel .sdk-hero__light {
position: absolute;
z-index: -1;
top: 28%;
right: 8%;
width: 28vw;
aspect-ratio: 1;
border-radius: 50%;
background: rgba(239,107,36,.12);
filter: blur(100px);
pointer-events: none;
}
body.sd-premium-ui-kampeerwinkel .sdk-hero__content { width: min(680px, 58vw); }
body.sd-premium-ui-kampeerwinkel .sdk-status {
width: fit-content;
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 28px;
padding: 9px 13px;
border: 1px solid rgba(255,255,255,.18);
border-radius: 999px;
color: rgba(255,255,255,.82);
background: rgba(7,10,12,.48);
font-size: 9px;
font-weight: 800;
letter-spacing: .17em;
text-transform: uppercase;
backdrop-filter: blur(12px);
}
body.sd-premium-ui-kampeerwinkel .sdk-status > span {
width: 7px;
height: 7px;
border-radius: 50%;
background: var(--sd-orange);
box-shadow: 0 0 0 5px rgba(239,107,36,.13);
animation: sdk-pulse 2.4s ease-in-out infinite;
}
@keyframes sdk-pulse { 50% { box-shadow: 0 0 0 9px rgba(239,107,36,0); } }
body.sd-premium-ui-kampeerwinkel .sdk-hero h1,
body.sd-premium-ui-kampeerwinkel .sdk-coming h2,
body.sd-premium-ui-kampeerwinkel .sdk-final h2 {
margin: 16px 0 26px;
color: var(--sdk-cream);
font-family: Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif;
font-size: clamp(58px, 7.4vw, 116px);
font-weight: 800;
letter-spacing: -.035em;
line-height: .82;
text-wrap: balance;
}
body.sd-premium-ui-kampeerwinkel .sdk-hero h1 em,
body.sd-premium-ui-kampeerwinkel .sdk-final h2 em {
color: transparent;
-webkit-text-stroke: 1px var(--sdk-gold);
font-style: normal;
}
body.sd-premium-ui-kampeerwinkel .sdk-hero h1 em { margin-right: .06em; }
body.sd-premium-ui-kampeerwinkel .sdk-lead {
max-width: 610px;
margin: 0;
color: rgba(244,239,231,.74);
font-size: clamp(16px, 1.25vw, 19px);
line-height: 1.72;
}
body.sd-premium-ui-kampeerwinkel .sdk-actions {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 26px;
margin-top: 38px;
}
body.sd-premium-ui-kampeerwinkel .sdk-actions .sd-btn { display: inline-flex; align-items: center; gap: 18px; }
body.sd-premium-ui-kampeerwinkel :where(.sdk-actions, .sdk-final) .sd-btn {
color: #fff;
text-decoration: none;
}
body.sd-premium-ui-kampeerwinkel .sdk-text-link {
color: rgba(255,255,255,.76);
font-size: 11px;
font-weight: 760;
letter-spacing: .06em;
text-decoration-color: rgba(239,107,36,.55);
transition: color 180ms ease;
}
body.sd-premium-ui-kampeerwinkel .sdk-text-link:hover { color: #fff; }
body.sd-premium-ui-kampeerwinkel .sdk-hero__mark {
position: absolute;
right: max(26px, calc((100vw - var(--sd-container)) / 2));
bottom: 10%;
width: clamp(82px, 8vw, 126px);
padding: 10px;
border: 1px solid rgba(255,255,255,.2);
background: rgba(7,10,12,.38);
backdrop-filter: blur(14px);
}
body.sd-premium-ui-kampeerwinkel .sdk-hero__mark img { width: 100%; height: auto; display: block; }
body.sd-premium-ui-kampeerwinkel .sdk-scrollcue {
position: absolute;
bottom: 26px;
left: max(24px, calc((100vw - var(--sd-container)) / 2));
display: flex;
align-items: center;
gap: 12px;
color: rgba(255,255,255,.38);
font-size: 8px;
font-weight: 800;
letter-spacing: .22em;
}
body.sd-premium-ui-kampeerwinkel .sdk-scrollcue span { width: 44px; height: 1px; background: var(--sd-orange); }
body.sd-premium-ui-kampeerwinkel .sdk-coming {
position: relative;
display: grid;
grid-template-columns: minmax(0, .88fr) minmax(460px, 1.12fr);
gap: clamp(64px, 10vw, 150px);
padding: clamp(100px, 12vw, 176px) max(24px, calc((100vw - var(--sd-container)) / 2));
background:
radial-gradient(circle at 15% 15%, rgba(239,107,36,.07), transparent 31%),
#0d1215;
}
body.sd-premium-ui-kampeerwinkel .sdk-coming::before {
content: "";
position: absolute;
top: 0;
right: max(24px, calc((100vw - var(--sd-container)) / 2));
left: max(24px, calc((100vw - var(--sd-container)) / 2));
height: 1px;
background: linear-gradient(90deg, var(--sd-orange), rgba(255,255,255,.12) 22%, transparent 70%);
}
body.sd-premium-ui-kampeerwinkel .sdk-coming h2 {
max-width: 720px;
font-size: clamp(48px, 5.2vw, 78px);
line-height: .9;
}
body.sd-premium-ui-kampeerwinkel .sdk-coming__intro > p:last-child {
max-width: 540px;
margin: 0;
color: var(--sd-muted);
font-size: 17px;
line-height: 1.75;
}
body.sd-premium-ui-kampeerwinkel .sdk-features { border-top: 1px solid var(--sd-line); }
body.sd-premium-ui-kampeerwinkel .sdk-feature {
display: grid;
grid-template-columns: 70px 1fr;
gap: 26px;
padding: 34px 0;
border-bottom: 1px solid var(--sd-line);
transition: padding-left 280ms var(--sd-ease), border-color 180ms ease;
}
body.sd-premium-ui-kampeerwinkel .sdk-feature:hover { padding-left: 10px; border-color: rgba(239,107,36,.45); }
body.sd-premium-ui-kampeerwinkel .sdk-feature__number {
color: var(--sd-orange);
font-size: 10px;
font-weight: 800;
letter-spacing: .18em;
}
body.sd-premium-ui-kampeerwinkel .sdk-feature h3 {
margin: -6px 0 9px;
color: #fff;
font-size: clamp(23px, 2vw, 30px);
line-height: 1.2;
}
body.sd-premium-ui-kampeerwinkel .sdk-feature p { max-width: 520px; margin: 0; color: var(--sd-muted-soft); }
body.sd-premium-ui-kampeerwinkel .sdk-final {
min-height: 72svh;
display: grid;
place-content: center;
justify-items: center;
padding: 110px 24px;
text-align: center;
background:
linear-gradient(rgba(6,9,11,.8), rgba(6,9,11,.94)),
url(//skidoctor.nl/wp-content/plugins/ski-doctor-premium-ui-v1020/assets/images/ski-doctor-kampeerwinkel-coming-soon-v1.webp) center 57% / cover;
}
body.sd-premium-ui-kampeerwinkel .sdk-final h2 { font-size: clamp(54px, 7vw, 104px); }
body.sd-premium-ui-kampeerwinkel .sdk-final > p:not(.sd-eyebrow) {
max-width: 610px;
margin: 0 0 32px;
color: var(--sd-muted);
font-size: 17px;
}
body.sd-premium-ui-kampeerwinkel .sdk-final .sd-btn { display: inline-flex; align-items: center; gap: 18px; }
body.sd-premium-ui-kampeerwinkel .sdk-footer {
min-height: 94px;
display: grid;
grid-template-columns: 1fr auto 1fr;
align-items: center;
gap: 32px;
padding: 22px max(24px, calc((100vw - var(--sd-container)) / 2));
border-top: 1px solid var(--sd-line);
color: rgba(255,255,255,.48);
background: #050708;
font-size: 10px;
letter-spacing: .08em;
}
body.sd-premium-ui-kampeerwinkel .sdk-footer div { display: flex; align-items: center; gap: 12px; color: #fff; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
body.sd-premium-ui-kampeerwinkel .sdk-footer img { width: 38px; height: 38px; object-fit: contain; }
body.sd-premium-ui-kampeerwinkel .sdk-footer p { margin: 0; text-align: center; }
body.sd-premium-ui-kampeerwinkel .sdk-footer > a { justify-self: end; color: #fff; text-underline-offset: 5px; }
@media (max-width: 900px) {
body.sd-premium-ui-kampeerwinkel .sdk-nav__brand small { display: none; }
body.sd-premium-ui-kampeerwinkel .sdk-coming { grid-template-columns: 1fr; gap: 70px; }
body.sd-premium-ui-kampeerwinkel .sdk-hero__content { width: min(660px, 76vw); }
body.sd-premium-ui-kampeerwinkel .sdk-footer { grid-template-columns: 1fr auto; }
body.sd-premium-ui-kampeerwinkel .sdk-footer p { display: none; }
}
@media (max-width: 600px) {
body.sd-premium-ui-kampeerwinkel .sdk-nav { padding-inline: 16px; }
body.sd-premium-ui-kampeerwinkel .sdk-nav__brand { gap: 8px; }
body.sd-premium-ui-kampeerwinkel .sdk-nav__brand .sdk-alpine-logo { width: 58px; height: 58px; }
body.sd-premium-ui-kampeerwinkel .sdk-nav__brand strong { font-size: 10px; letter-spacing: .11em; }
body.sd-premium-ui-kampeerwinkel .sdk-nav__back span:first-child { display: none; }
body.sd-premium-ui-kampeerwinkel .sdk-nav__back span:last-child { width: 42px; height: 42px; display: grid; place-items: center; border: 1px solid var(--sd-line-strong); }
body.sd-premium-ui-kampeerwinkel .sdk-hero {
min-height: 100svh;
align-items: end;
padding: 148px 22px 82px;
background-position: 66% center;
}
body.sd-premium-ui-kampeerwinkel .sdk-hero::before {
background:
linear-gradient(180deg, rgba(5,7,8,.2) 0%, rgba(5,7,8,.3) 28%, rgba(5,7,8,.92) 62%, #050708 100%),
linear-gradient(90deg, rgba(5,7,8,.45), rgba(5,7,8,.08));
}
body.sd-premium-ui-kampeerwinkel .sdk-hero__content { width: 100%; }
body.sd-premium-ui-kampeerwinkel .sdk-status { margin-bottom: 20px; font-size: 8px; }
body.sd-premium-ui-kampeerwinkel .sdk-hero h1 { margin-block: 13px 20px; font-size: clamp(52px, 16vw, 70px); line-height: .84; }
body.sd-premium-ui-kampeerwinkel .sdk-lead { font-size: 15.5px; line-height: 1.62; }
body.sd-premium-ui-kampeerwinkel .sdk-actions { display: grid; gap: 20px; margin-top: 28px; }
body.sd-premium-ui-kampeerwinkel .sdk-actions .sd-btn { width: 100%; justify-content: space-between; }
body.sd-premium-ui-kampeerwinkel .sdk-text-link { font-size: 10px; }
body.sd-premium-ui-kampeerwinkel .sdk-hero__mark { top: 98px; right: 20px; bottom: auto; width: 68px; padding: 6px; }
body.sd-premium-ui-kampeerwinkel .sdk-scrollcue { display: none; }
body.sd-premium-ui-kampeerwinkel .sdk-coming { gap: 52px; padding: 88px 22px; }
body.sd-premium-ui-kampeerwinkel .sdk-coming h2 { font-size: clamp(44px, 13vw, 58px); }
body.sd-premium-ui-kampeerwinkel .sdk-coming__intro > p:last-child { font-size: 15.5px; }
body.sd-premium-ui-kampeerwinkel .sdk-feature { grid-template-columns: 44px 1fr; gap: 14px; padding: 27px 0; }
body.sd-premium-ui-kampeerwinkel .sdk-feature:hover { padding-left: 0; }
body.sd-premium-ui-kampeerwinkel .sdk-feature h3 { font-size: 23px; }
body.sd-premium-ui-kampeerwinkel .sdk-feature p { font-size: 14.5px; }
body.sd-premium-ui-kampeerwinkel .sdk-final { min-height: 70svh; padding: 96px 22px; background-position: 68% center; }
body.sd-premium-ui-kampeerwinkel .sdk-final h2 { font-size: clamp(48px, 14vw, 62px); }
body.sd-premium-ui-kampeerwinkel .sdk-final > p:not(.sd-eyebrow) { font-size: 15px; }
body.sd-premium-ui-kampeerwinkel .sdk-footer { min-height: 82px; padding-inline: 22px; }
body.sd-premium-ui-kampeerwinkel .sdk-footer div span { display: none; }
}