@font-face{font-family:'Lexend';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/lexend-400-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;} @font-face{font-family:'Lexend';font-style:normal;font-weight:500;font-display:swap;src:url('../fonts/lexend-500-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;} @font-face{font-family:'Lexend';font-style:normal;font-weight:600;font-display:swap;src:url('../fonts/lexend-600-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;} @font-face{font-family:'Lexend';font-style:normal;font-weight:700;font-display:swap;src:url('../fonts/lexend-700-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;} @font-face{font-family:'Lexend';font-style:normal;font-weight:800;font-display:swap;src:url('../fonts/lexend-800-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;} @font-face{font-family:'Source Sans 3';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/source-sans-3-400-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;} @font-face{font-family:'Source Sans 3';font-style:normal;font-weight:600;font-display:swap;src:url('../fonts/source-sans-3-600-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;} :root { --primary: #ff7722; --primary-rgb: 255, 119, 34; --surface: #151310; --surface-card: #1a1613; --paper: #f7f1ea; --on-surface: #e7e2db; --button-text-dark: #231a10; --paper-rgb: 247, 241, 234; --on-surface-rgb: 231, 226, 219; --surface-well-rgb: 19, 16, 13; --error: #fca5a5; --font-body: 'Source Sans 3', ui-sans-serif, system-ui, sans-serif; --text-body: 1.2rem; --text-lead: 1.4rem; --leading-body: 1.6; --measure-copy: 58rem; } .measure-copy { max-width: var(--measure-copy); margin-left: auto; margin-right: auto; } body { background-color: var(--surface); color: var(--on-surface); font-family: var(--font-body); } .live-hero { position: relative; min-height: calc(100svh - 5rem); display: grid; place-items: center; overflow: hidden; isolation: isolate; color: var(--paper); text-align: center; } .live-hero::before, .live-hero::after { content: ""; position: absolute; inset: 0; pointer-events: none; } .live-hero::before { z-index: -1; background: linear-gradient(180deg, rgba(var(--surface-well-rgb), 0.28), rgba(var(--surface-well-rgb), 0.52)), linear-gradient(90deg, rgba(12, 10, 8, 0.42), rgba(22, 18, 14, 0.12), rgba(12, 10, 8, 0.38)); } .live-hero::after { z-index: -1; opacity: 0.12; background-image: repeating-linear-gradient(0deg, rgba(var(--paper-rgb), 0.06) 0 1px, transparent 1px 3px); } .live-hero-media { position: absolute; inset: 0; z-index: -2; } .live-hero-media img { width: 100%; height: 100%; object-fit: cover; object-position: 52% 54%; filter: saturate(0.88) contrast(1.04) brightness(0.94); } .live-hero-copy { width: min(68rem, calc(100% - 2rem)); display: grid; justify-items: center; gap: 1.5rem; padding: clamp(4rem, 9vw, 6rem) 0 clamp(3rem, 7vw, 5rem); } .live-hero-eyebrow { margin: 0; font-family: "Lexend", sans-serif; font-size: clamp(1.12rem, 2vw, 1.45rem); font-weight: 800; line-height: 1.2; text-transform: uppercase; opacity: 0.84; } .live-hero-title { max-width: 16ch; margin: 0; font-family: "Lexend", sans-serif; font-size: clamp(2.25rem, 6vw, 5.625rem); font-weight: 800; line-height: 0.93; letter-spacing: 0; } .live-hero-title span { color: var(--primary); } .live-hero-lead { max-width: 58rem; margin: 0; color: rgba(var(--paper-rgb), 0.9); font-size: clamp(1.08rem, 1.8vw, 1.38rem); font-weight: 600; line-height: 1.42; } .live-hero-lead span { display: block; } .live-pillar-rail { width: min(60rem, 100%); display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0.5rem; } .live-pillar-item { min-height: 4.35rem; position: relative; display: grid; align-content: center; gap: 0.2rem; padding: 0.8rem 0.9rem; border: 1px solid rgba(var(--paper-rgb), 0.17); border-radius: 0.5rem; background: rgba(var(--surface-well-rgb), 0.74); color: rgba(var(--paper-rgb), 0.86); overflow: hidden; text-align: left; transition: background-color 220ms ease, border-color 220ms ease, box-shadow 220ms ease, transform 220ms ease; } .live-pillar-item::after { content: ""; position: absolute; left: 0.75rem; right: 0.75rem; bottom: 0.5rem; height: 3px; border-radius: 999px; background: var(--primary); opacity: 0; transform: scaleX(0); transform-origin: left center; transition: opacity 220ms ease, transform 280ms ease; } .live-pillar-item:hover { border-color: var(--primary); background: color-mix(in oklch, var(--primary) 16%, rgba(var(--surface-well-rgb), 0.92)); box-shadow: 0 18px 38px rgba(8, 6, 5, 0.34); transform: translateY(-0.42rem) scale(1.035); } .live-pillar-item:hover::after { opacity: 1; transform: scaleX(1); } .live-pillar-item strong { color: var(--paper); font-family: "Lexend", sans-serif; font-size: clamp(0.84rem, 1vw, 0.96rem); font-weight: 800; line-height: 1.05; } .live-pillar-item:hover strong { color: var(--primary); } .live-pillar-item span { color: rgba(var(--paper-rgb), 0.72); font-size: 0.78rem; font-weight: 700; line-height: 1.2; } .live-hero-cta { min-height: 3.35rem; display: inline-flex; align-items: center; justify-content: center; padding: 0 clamp(1.5rem, 3vw, 2.4rem); border: 1px solid color-mix(in oklch, var(--primary) 70%, white 30%); border-radius: 999px; background: var(--primary); color: var(--button-text-dark); box-shadow: 0 18px 38px rgba(8, 6, 5, 0.34); font-family: "Lexend", sans-serif; font-size: clamp(0.98rem, 1.35vw, 1.12rem); font-weight: 800; line-height: 1; text-align: center; transition: background-color 220ms ease, box-shadow 220ms ease, transform 220ms ease; } .live-hero-cta:hover, .live-hero-cta:focus-visible { background: color-mix(in oklch, var(--primary), white 10%); box-shadow: 0 22px 44px rgba(8, 6, 5, 0.38), 0 0 0 4px color-mix(in oklch, var(--primary) 24%, transparent); outline: none; transform: translateY(-0.18rem); } .live-why-shell { max-width: min(92rem, 100%); } .live-why-grid { width: min(88rem, 100%); display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; margin: 0 auto 2rem; } .live-why-card { min-height: 23rem; position: relative; display: grid; grid-template-rows: auto auto auto; align-content: start; justify-items: start; gap: 0.75rem; overflow: hidden; padding: 13rem 1rem 1rem; border: 1px solid rgba(var(--on-surface-rgb), 0.14); border-radius: 0.5rem; background: var(--surface); isolation: isolate; transition: transform 260ms ease, border-color 260ms ease, box-shadow 260ms ease; } .live-why-card img { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; object-fit: cover; filter: brightness(0.9) saturate(1.06) contrast(1.03); transition: transform 700ms ease, filter 700ms ease; } .live-why-card::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(10, 8, 6, 0.46), rgba(10, 8, 6, 0.18) 48%, rgba(10, 8, 6, 0.64)), linear-gradient(20deg, rgba(var(--primary-rgb), 0.08), transparent 46%); } .live-why-card small { position: relative; z-index: 2; display: inline-flex; width: fit-content; align-items: center; align-self: start; padding: 0.34rem 0.56rem; border-radius: 0.35rem; background: var(--primary); color: var(--button-text-dark); box-shadow: 0 0 0 1px rgba(var(--paper-rgb), 0.16), 0 10px 24px rgba(8, 6, 5, 0.42); font-size: 0.84rem; font-weight: 900; line-height: 1; text-transform: uppercase; } .live-why-card h3 { position: relative; z-index: 2; align-self: start; margin: 0; color: var(--paper); font-family: "Lexend", sans-serif; font-size: 1.4rem; font-weight: 800; line-height: 1.08; text-shadow: 0 3px 20px rgba(8, 6, 5, 0.88); } .live-why-card p { position: relative; z-index: 2; align-self: start; margin: 0; color: rgba(var(--paper-rgb), 0.78); font-size: 0.98rem; font-weight: 680; line-height: 1.32; text-shadow: 0 2px 16px rgba(8, 6, 5, 0.84); } .live-why-card:hover { border-color: rgba(var(--primary-rgb), 0.72); box-shadow: 0 20px 52px rgba(8, 6, 5, 0.42); transform: translateY(-7px); } .live-why-card:hover img { filter: brightness(1) saturate(1.08) contrast(1.04); transform: scale(1.045); } .live-why-conclusion { width: min(var(--measure-copy), 100%); display: grid; gap: 1rem; margin: 0 auto; } .live-why-quote { display: grid; gap: 0.5rem; padding: 0.75rem; border: 1px solid rgba(var(--on-surface-rgb), 0.14); border-radius: 0.5rem; background: rgba(55, 52, 48, 0.5); text-align: left; } .live-why-quote-mark { color: var(--primary); font-family: "Lexend", sans-serif; font-size: 2.25rem; line-height: 0.8; } .live-why-quote p, .live-why-conclusion > p { margin: 0; color: var(--on-surface); font-size: 1.2rem; line-height: 1.5; text-align: left; } .live-why-quote p { font-style: italic; font-weight: 620; } .live-why-link { display: inline-flex; align-items: center; justify-self: start; gap: 0.45rem; padding: 0.35rem 0; border-bottom: 1px solid transparent; color: var(--paper); font-family: "Lexend", sans-serif; font-size: 0.96rem; font-weight: 700; line-height: 1.3; text-decoration: none; transition: color 200ms ease, border-color 200ms ease; } .live-why-link span { color: var(--primary); } .live-why-link:hover { border-bottom-color: rgba(var(--primary-rgb), 0.6); color: var(--primary); } .live-why-link:focus-visible { outline: 2px solid var(--primary); outline-offset: 3px; } @media (max-width: 1023px) { .live-pillar-rail, .live-why-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .live-hero { min-height: calc(92svh - 5rem); } .live-hero-cta { order: 1; } .live-pillar-rail { order: 2; } } @media (max-width: 639px) { .live-hero-copy { align-content: center; gap: 1.15rem; padding-block: 3rem; } .live-hero-title { font-size: clamp(2.2rem, 14vw, 3.7rem); } .live-pillar-rail, .live-why-grid { grid-template-columns: 1fr; } .live-pillar-item { min-height: 4rem; } .live-why-card { min-height: 19rem; padding-top: 9rem; } } .skip-link { position: absolute; left: 0.5rem; top: 0.5rem; z-index: 100; transform: translateY(-150%); background-color: var(--primary); color: var(--button-text-dark); font-family: 'Lexend', sans-serif; font-weight: 600; font-size: 14px; padding: 0.6rem 1rem; border-radius: 0.375rem; text-decoration: none; transition: transform 0.15s ease; } .skip-link:focus { transform: translateY(0); outline: 2px solid var(--on-surface); outline-offset: 2px; } .glow-orange:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 2px rgba(var(--primary-rgb), 0.2); } .site-nav a:not(.btn-cta):focus-visible, .site-header a[aria-label]:focus-visible, footer a:focus-visible { outline: 2px solid var(--primary); outline-offset: 3px; border-radius: 3px; } .lead-error { display: block; margin-top: 0.3rem; color: var(--error); font-family: var(--font-body); font-size: 0.82rem; font-weight: 600; line-height: 1.3; } #lead-form [aria-invalid="true"] { border-color: var(--error); } .faq-icon-v { transition: opacity 0.25s ease; } button[aria-expanded="true"] .faq-icon-v { opacity: 0; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } .site-header { background-color: rgba(33, 31, 28, 0.9); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border-bottom: 1px solid rgba(var(--primary-rgb), 0.18); box-shadow: 0 6px 24px -8px rgba(0, 0, 0, 0.6); } .site-nav { display: none; } @media (min-width: 1024px) { .site-nav { display: flex; } } .site-header-inner { display: flex; align-items: center; justify-content: space-between; } .site-header-inner > .site-nav { flex: 1 1 auto; justify-content: center; } .nav-toggle { display: none; } .site-header-inner .site-nav__cta { display: none; } @media (max-width: 1023px) { .nav-toggle { display: inline-flex; flex-direction: column; justify-content: center; align-items: center; gap: 5px; width: 2.75rem; height: 2.75rem; padding: 0; background: transparent; border: 1px solid rgba(var(--primary-rgb), 0.35); border-radius: 0.5rem; cursor: pointer; } .nav-toggle:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; } .nav-toggle-bar { display: block; width: 1.4rem; height: 2px; border-radius: 999px; background: var(--on-surface, #f7f1ea); transition: transform 0.25s ease, opacity 0.2s ease; } .nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(1) { transform: translateY(7px) rotate(45deg); } .nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(2) { opacity: 0; } .nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } .site-header-inner .site-header__cta { display: none; } .nav-toggle[aria-expanded="true"] ~ .site-nav { display: flex; flex-direction: column; align-items: stretch; gap: 0; position: absolute; top: 100%; left: 0; right: 0; padding: 0.5rem clamp(20px, 5vw, 32px) 1.25rem; background-color: rgba(33, 31, 28, 0.98); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border-bottom: 1px solid rgba(var(--primary-rgb), 0.18); box-shadow: 0 12px 24px -8px rgba(0, 0, 0, 0.6); } .nav-toggle[aria-expanded="true"] ~ .site-nav > a:not(.site-nav__cta) { padding: 0.95rem 0.25rem; border-bottom: 1px solid rgba(var(--paper-rgb), 0.08); font-size: 1.05rem; } .nav-toggle[aria-expanded="true"] ~ .site-nav .site-nav__cta { display: inline-flex; margin-top: 0.85rem; padding: 0.9rem 1.25rem; font-size: 16px; white-space: nowrap; box-shadow: 0 10px 15px -3px rgba(var(--primary-rgb), 0.2); color: var(--button-text-dark); } } .btn-cta { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; padding: 1rem 2rem; background-color: var(--primary); color: var(--button-text-dark); font-family: 'Lexend', sans-serif; font-size: 16px; line-height: 1.2; font-weight: 600; text-align: center; text-decoration: none; border: none; border-radius: 0.25rem; box-shadow: 0 10px 15px -3px rgba(var(--primary-rgb), 0.2); transition: opacity 0.2s ease, transform 0.15s ease; } .btn-cta:hover { opacity: 0.9; } .btn-cta:active { transform: scale(0.98); } .btn-cta:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; } .btn-cta--full { width: 100%; } .hero-doc { transform: rotate(5deg) scale(1.0); transition: transform 0.5s ease; } .hero-doc:hover { transform: rotate(0deg) scale(1.0); } .hero-offer { display: inline-flex; align-items: center; gap: 0.55rem; margin-top: 1.1rem; padding: 0.4rem 0.9rem 0.4rem 0.45rem; border-radius: 9999px; background-color: rgba(var(--primary-rgb), 0.12); border: 1px solid rgba(var(--primary-rgb), 0.4); text-decoration: none; transition: border-color 0.2s ease, background-color 0.2s ease; } .hero-offer:hover { border-color: rgba(var(--primary-rgb), 0.8); background-color: rgba(var(--primary-rgb), 0.18); } .hero-offer__tag { flex-shrink: 0; display: inline-flex; align-items: center; background-color: var(--primary); color: var(--button-text-dark); font-family: 'Lexend', sans-serif; font-weight: 700; font-size: 11px; line-height: 1; letter-spacing: 0.06em; text-transform: uppercase; padding: 0.3rem 0.55rem; border-radius: 9999px; } .hero-offer__text { font-family: 'Source Sans 3', sans-serif; font-size: 13px; line-height: 1.2; color: var(--on-surface); } .hero-offer__text strong { font-weight: 700; color: var(--primary); } .hero-cta-group { display: flex; flex-direction: column; align-items: stretch; width: -moz-fit-content; width: fit-content; } html { scroll-behavior: smooth; } section[id] { scroll-margin-top: 0.5rem; } .ov-grid-lines { background-image: linear-gradient(to right, rgba(167, 139, 126, 0.06) 1px, transparent 1px), linear-gradient(to bottom, rgba(167, 139, 126, 0.06) 1px, transparent 1px); background-size: 40px 40px; } .carbon-texture { background-image: url('../Afbeeldingen/carbon-fibre.png'); } .orenzis-values { margin-top: 1.5rem; padding: 1.25rem; border: 1px solid rgba(88, 66, 55, 0.16); border-radius: 0.5rem; background: rgba(33, 31, 28, 0.48); } .orenzis-values-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0.75rem; margin-top: 1rem; } .orenzis-value { min-width: 0; padding: 0.85rem; border: 1px solid rgba(88, 66, 55, 0.16); border-radius: 0.5rem; background: rgba(21, 19, 16, 0.52); } .orenzis-value span { display: block; margin-bottom: 0.45rem; font-family: 'Lexend', sans-serif; font-size: 0.72rem; font-weight: 700; line-height: 1; color: rgba(var(--primary-rgb), 0.78); } .orenzis-value h4 { margin: 0 0 0.35rem; font-family: 'Lexend', sans-serif; font-size: 0.9rem; font-weight: 700; line-height: 1.2; color: var(--on-surface); } .orenzis-value p { margin: 0; font-family: 'Source Sans 3', sans-serif; font-size: 0.82rem; line-height: 1.35; color: #e0c0b1; } @media (max-width: 1023px) { .orenzis-values-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .orenzis-value:last-child { grid-column: 1 / -1; } } @media (max-width: 520px) { .orenzis-values { padding: 1rem; } .orenzis-values-grid { grid-template-columns: 1fr; } .orenzis-value:last-child { grid-column: auto; } } .ov-portrait-frame { height: 300px; } .ov-portrait-frame > img { -o-object-position: center 20%; object-position: center 20%; } .ov-photo-actions { position: absolute; top: 12px; right: 12px; display: flex; align-items: center; gap: 8px; } .ov-photo-actions a { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 9999px; color: var(--primary); background: rgba(21, 19, 16, 0.55); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); border: 1px solid rgba(var(--primary-rgb), 0.35); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35); transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.15s ease; } .ov-photo-actions a:hover { background: var(--primary); color: var(--button-text-dark); border-color: var(--primary); transform: translateY(-1px); } .ov-photo-actions a:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; } @media (max-width: 1023px) { .hero-doc { transform: rotate(3deg) scale(1); max-width: 340px; margin-left: auto; margin-right: auto; } .hero-doc:hover { transform: rotate(0deg) scale(1); } .hero-cta-group { width: 100%; } .btn-cta { padding: 0.875rem 1.25rem; } .py-section-gap { padding-top: 56px; padding-bottom: 56px; } .text-headline-xl { font-size: 30px; line-height: 1.15; letter-spacing: -0.01em; } .text-headline-lg { font-size: 24px; line-height: 1.25; } .mb-16 { margin-bottom: 2rem; } .mb-20 { margin-bottom: 2.5rem; } .mt-12 { margin-top: 2rem; } .text-6xl { font-size: 2.5rem; line-height: 1; } .gap-section-gap { gap: 2rem; } } @media (max-width: 639px) { .py-section-gap { padding-top: 40px; padding-bottom: 40px; } .px-margin-x { padding-left: 20px; padding-right: 20px; } .text-headline-xl { font-size: 26px; } .mb-16 { margin-bottom: 1.5rem; } .mt-12 { margin-top: 1.5rem; } .site-header-inner .btn-cta { font-size: 12px; padding: 0.5rem 0.7rem; white-space: nowrap; line-height: 1.1; box-shadow: none; } } @media (max-width: 479px) { .hero-doc { max-width: 280px; } } .live-route-shell { max-width: min(88rem, 100%); } .live-route-shell h2 { text-wrap: balance; } .live-route-intro { max-width: var(--measure-copy); margin: 0 auto; color: #b8b2a9; font-size: var(--text-body); line-height: var(--leading-body); text-wrap: balance; } .live-route-track { display: flex; align-items: center; width: min(78rem, 100%); margin: 0 auto 1.75rem; } .live-route-track--wide { width: 100%; } .live-route-node { display: inline-flex; align-items: center; gap: 0.6rem; flex: 0 0 auto; } .live-route-dot { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; border-radius: 50%; border: 2px solid rgba(var(--on-surface-rgb), 0.32); background: var(--surface); color: #b8b2a9; font-family: "Lexend", sans-serif; font-size: 0.9rem; font-weight: 800; transition: background 260ms cubic-bezier(0.25, 1, 0.5, 1), border-color 260ms cubic-bezier(0.25, 1, 0.5, 1), color 260ms cubic-bezier(0.25, 1, 0.5, 1), transform 260ms cubic-bezier(0.25, 1, 0.5, 1); } .live-route-stop-label { color: #8a887e; font-family: "Lexend", sans-serif; font-size: 0.8rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; white-space: nowrap; transition: color 260ms cubic-bezier(0.25, 1, 0.5, 1); } .live-route-connector { position: relative; flex: 1 1 auto; height: 2px; margin: 0 clamp(0.6rem, 1.4vw, 1.1rem); border-radius: 2px; background: rgba(var(--on-surface-rgb), 0.16); overflow: hidden; } .live-route-connector > i { position: absolute; inset: 0; background: var(--primary); transform: scaleX(0); transform-origin: left center; transition: transform 420ms cubic-bezier(0.25, 1, 0.5, 1); } .live-route-connector.is-filled > i { transform: scaleX(1); } .live-route-node.is-active .live-route-dot { border-color: var(--primary); background: var(--primary); color: var(--button-text-dark); } .live-route-node.is-active .live-route-stop-label { color: #f2f0ea; } .live-route-node.is-current .live-route-dot { transform: scale(1.12); } .live-route-node.is-current .live-route-dot::after { content: ""; position: absolute; inset: -2px; border-radius: 50%; border: 2px solid var(--primary); animation: routePulse 2.6s cubic-bezier(0.25, 1, 0.5, 1) infinite; pointer-events: none; } @keyframes routePulse { 0% { transform: scale(1); opacity: 0.55; } 70%, 100% { transform: scale(1.75); opacity: 0; } } .live-route-grid { display: grid; grid-template-columns: 1.15fr 1fr 1fr; gap: 1rem; width: min(80rem, 100%); margin: 0 auto 2rem; } .live-route-card { display: flex; flex-direction: column; overflow: hidden; border: 1px solid rgba(var(--on-surface-rgb), 0.14); border-radius: 0.5rem; background: var(--surface); transition: transform 260ms ease, border-color 260ms ease, box-shadow 260ms ease; } .live-route-card--featured { border-top: 3px solid var(--primary); background: var(--surface-card); } .live-route-media { height: clamp(16rem, 21vw, 18.5rem); overflow: hidden; } .live-route-media img { width: 100%; height: 100%; object-fit: cover; filter: brightness(0.94) saturate(1.04); transition: transform 700ms cubic-bezier(0.25, 1, 0.5, 1), filter 700ms cubic-bezier(0.25, 1, 0.5, 1); } .live-route-card:not(.live-route-card--featured) .live-route-media img { filter: brightness(0.8) saturate(0.92); } .live-route-card:focus-within .live-route-media img, .live-route-card.is-linked .live-route-media img { filter: brightness(1) saturate(1.06); } .live-route-card.is-linked { border-color: rgba(var(--primary-rgb), 0.72); box-shadow: 0 20px 52px rgba(8, 6, 5, 0.42); transform: translateY(-7px); } .live-route-card.is-linked .live-route-media img { transform: scale(1.045); } @media (hover: hover) { .live-route-card:hover { border-color: rgba(var(--primary-rgb), 0.72); box-shadow: 0 20px 52px rgba(8, 6, 5, 0.42); transform: translateY(-7px); } .live-route-card:hover .live-route-media img { transform: scale(1.045); filter: brightness(1) saturate(1.06); } .live-route-node { cursor: default; } } .live-route-body { display: flex; flex-direction: column; flex-grow: 1; align-items: flex-start; gap: 0.65rem; padding: 1.1rem 1.2rem 1.3rem; } .live-route-chip { display: inline-flex; align-items: center; padding: 0.3rem 0.55rem; border-radius: 0.35rem; background: rgba(var(--on-surface-rgb), 0.1); color: #d9d3ca; font-size: 0.78rem; font-weight: 800; line-height: 1; letter-spacing: 0.05em; text-transform: uppercase; } .live-route-chip--accent { background: var(--primary); color: var(--button-text-dark); } .live-route-body h3 { margin: 0; color: var(--paper); font-family: "Lexend", sans-serif; font-size: 1.3rem; font-weight: 800; line-height: 1.08; } .live-route-card--featured .live-route-body h3 { font-size: 1.6rem; } .live-route-body p { margin: 0; color: rgba(var(--paper-rgb), 0.78); font-size: var(--text-body); line-height: var(--leading-body); } .live-route-price { display: flex; align-items: baseline; gap: 0.3rem; } .live-route-price strong { color: var(--paper); font-family: "Lexend", sans-serif; font-size: 1.25rem; font-weight: 800; line-height: 1; } .live-route-price span { color: rgba(var(--paper-rgb), 0.55); font-size: 0.62rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; } .live-route-link { margin-top: auto; padding-block: 0.7rem; margin-bottom: -0.5rem; color: var(--paper); font-family: "Lexend", sans-serif; font-size: 0.92rem; font-weight: 700; text-decoration: none; border-bottom: 1px solid transparent; border-radius: 2px; transition: color 200ms ease, border-color 200ms ease; } .live-route-link span { color: var(--primary); } .live-route-link:hover { color: var(--primary); border-bottom-color: rgba(var(--primary-rgb), 0.6); } .live-route-link:focus-visible { color: var(--primary); outline: 2px solid var(--primary); outline-offset: 3px; } .live-route-footer { display: grid; justify-items: center; gap: 1rem; width: min(var(--measure-copy), 100%); margin: 0 auto; text-align: center; } .section-text-measure { max-width: var(--measure-copy); } .live-route-independent { margin: 0; color: var(--on-surface); font-size: var(--text-body); line-height: var(--leading-body); text-wrap: balance; } .live-route-cta-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 1rem; } .live-route-guarantee { color: #b8b2a9; font-size: 0.9rem; } #kompas, #fundering, #expeditie { scroll-margin-top: 6.5rem; } @media (max-width: 1023px) { .live-route-track { display: none; } .live-route-grid { grid-template-columns: 1fr; } .live-route-card--featured { border-top-width: 3px; } .live-route-media { height: auto; aspect-ratio: 4 / 3; } } .live-route-reveal .live-route-node { opacity: 0; transform: scale(0.6); } .live-route-reveal .live-route-connector { transform: scaleX(0); transform-origin: left center; } .live-route-reveal .live-route-card, .live-route-reveal .live-route-footer { opacity: 0; transform: translateY(14px); } .live-route-reveal.is-inview .live-route-node { opacity: 1; transform: scale(1); transition: opacity 420ms cubic-bezier(0.25, 1, 0.5, 1), transform 420ms cubic-bezier(0.25, 1, 0.5, 1); transition-delay: calc(140ms + var(--i, 0) * 180ms); } .live-route-reveal.is-inview .live-route-node.is-current { transform: scale(1.12); } .live-route-reveal.is-inview .live-route-connector { transform: scaleX(1); transition: transform 520ms cubic-bezier(0.16, 1, 0.3, 1); transition-delay: calc(240ms + var(--ci, 0) * 180ms); } .live-route-reveal.is-inview .live-route-card { opacity: 1; transform: translateY(0); transition: opacity 560ms cubic-bezier(0.25, 1, 0.5, 1), transform 560ms cubic-bezier(0.25, 1, 0.5, 1); transition-delay: calc(520ms + var(--i, 0) * 110ms); } .live-route-reveal.is-inview .live-route-footer { opacity: 1; transform: translateY(0); transition: opacity 560ms cubic-bezier(0.25, 1, 0.5, 1), transform 560ms cubic-bezier(0.25, 1, 0.5, 1); transition-delay: 840ms; } @media (prefers-reduced-motion: reduce) { .live-route-card, .live-route-media img, .live-route-link, .live-route-dot, .live-route-stop-label, .live-route-connector > i { transition: none; } .live-route-card:hover, .live-route-card.is-linked { transform: none; } .live-route-card:hover .live-route-media img, .live-route-card.is-linked .live-route-media img { transform: none; } .live-route-node.is-current .live-route-dot::after { animation: none; } .live-route-reveal .live-route-node, .live-route-reveal .live-route-card, .live-route-reveal .live-route-footer { transform: none; } .live-route-reveal .live-route-connector { transform: scaleX(1); } .live-route-reveal.is-inview .live-route-node, .live-route-reveal.is-inview .live-route-card, .live-route-reveal.is-inview .live-route-footer { transform: none; transition: opacity 200ms ease-out; transition-delay: 0ms; } .live-route-reveal.is-inview .live-route-node.is-current { transform: scale(1.12); } } .steps-reveal [data-steps-item] { opacity: 0; transform: translateY(14px); } .steps-reveal [data-steps-item] .stap-num { opacity: 0; transform: scale(0.6); } .steps-reveal.is-inview [data-steps-item] { opacity: 1; transform: translateY(0); transition: opacity 560ms cubic-bezier(0.25, 1, 0.5, 1), transform 560ms cubic-bezier(0.25, 1, 0.5, 1); transition-delay: calc(var(--i, 0) * 120ms); } .steps-reveal.is-inview [data-steps-item] .stap-num { opacity: 1; transform: scale(1); transition: opacity 420ms cubic-bezier(0.25, 1, 0.5, 1), transform 420ms cubic-bezier(0.25, 1, 0.5, 1); transition-delay: calc(260ms + var(--i, 0) * 120ms); } [data-steps-item] img { filter: brightness(0.94) saturate(1.04); transition: transform 700ms cubic-bezier(0.25, 1, 0.5, 1), filter 700ms cubic-bezier(0.25, 1, 0.5, 1); } @media (hover: hover) { [data-steps-item]:hover img { transform: scale(1.045); filter: brightness(1) saturate(1.06); } } .steps-reveal.has-track.is-inview [data-steps-item] { transition-delay: calc(520ms + var(--i, 0) * 120ms); } .steps-reveal.has-track.is-inview [data-steps-item] .stap-num { transition-delay: calc(780ms + var(--i, 0) * 120ms); } @media (prefers-reduced-motion: reduce) { [data-steps-item] img { transition: none; } [data-steps-item]:hover img { transform: none; } .steps-reveal [data-steps-item], .steps-reveal [data-steps-item] .stap-num { transform: none; } .steps-reveal.is-inview [data-steps-item], .steps-reveal.is-inview [data-steps-item] .stap-num, .steps-reveal.has-track.is-inview [data-steps-item], .steps-reveal.has-track.is-inview [data-steps-item] .stap-num { transform: none; transition: opacity 200ms ease-out; transition-delay: 0ms; } } .faq-toggle { transition: transform 200ms ease; } details[open] > summary .faq-toggle { transform: rotate(45deg); } main { font-size: var(--text-body); } .text-body-md, .text-body-lg { font-size: var(--text-body); line-height: var(--leading-body); } .article-prose { font-size: var(--text-body); } .article-prose .lead { font-size: var(--text-lead); } .article-faq > p, .article-step p, .article-callout ul, .article-myth .myth, .article-myth .truth { font-size: var(--text-body); }