: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) { overflow: clip; background: var(--sd-night); }
body.sd-premium-ui :where(.sd, .sds, .sdo, .sdc) 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-image: url(https://skidoctor.nl/wp-content/uploads/2026/07/ski-doctor-sneeuwbos-hero-optimized.webp);
background-position: center 54%;
}
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:
linear-gradient(90deg, rgba(3, 6, 8, .89) 0%, rgba(3, 6, 8, .62) 38%, rgba(3, 6, 8, .13) 71%, rgba(3, 6, 8, .03)),
linear-gradient(180deg, rgba(3, 6, 8, .08), rgba(3, 6, 8, .72));
}
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);
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 :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; }
}
@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: 154px 22px 48px;
background-position: 54% center;
}
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(.sd-hero, .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__logo {
top: 96px;
right: 20px;
width: 84px;
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; }
}
@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; }
}