:root, :root[data-theme="dark"] { --th-surface: #151310; --th-surface-95: rgba(21, 19, 16, .95); --th-surface-container: #211f1c; --th-surface-container-30: rgba(33, 31, 28, .3); --th-surface-container-low: #1d1b18; --th-surface-container-lowest: #0f0e0b; --th-surface-container-high: #2c2a26; --th-surface-container-high-40: rgba(44, 42, 38, .4); --th-surface-card: #322f2a; --th-band: #2a2824; --th-white: #fff; --th-on-surface: #e7e2db; --th-on-surface-90: hsla(35, 20%, 88%, .9); --th-on-surface-80: hsla(35, 20%, 88%, .8); --th-on-surface-variant: #e0c0b1; --th-on-surface-variant-70: hsla(19, 43%, 79%, .7); --th-on-surface-variant-75: hsla(19, 43%, 79%, .75); --th-button-text: #231a10; --th-placeholder: #9ca3af; --th-outline-variant: #584237; --th-outline-variant-10: rgba(88, 66, 55, .1); --th-outline-variant-20: rgba(88, 66, 55, .2); --th-outline-variant-30: rgba(88, 66, 55, .3); --th-shadow-2xl: rgba(0, 0, 0, .25); --th-shadow-header: rgba(0, 0, 0, .6); --th-logo-filter: none; --surface: #151310; --surface-card: #1a1613; --on-surface: #e7e2db; --on-surface-rgb: 231, 226, 219; --error: #fca5a5; --th-accent-ink: #ff7722; } :root[data-theme="light"] { --th-surface: #efe9e0; --th-surface-95: color-mix(in srgb, #efe9e0 95%, transparent); --th-surface-container: #e4ddd1; --th-surface-container-30: color-mix(in srgb, #e4ddd1 30%, transparent); --th-surface-container-low: #e4ddd1; --th-surface-container-lowest: #e4ddd1; --th-surface-container-high: #d9d1c3; --th-surface-container-high-40: color-mix(in srgb, #d9d1c3 40%, transparent); --th-surface-card: #d9d1c3; --th-band: #d9d1c3; --th-white: #fff; --th-on-surface: #151310; --th-on-surface-90: color-mix(in srgb, #151310 90%, transparent); --th-on-surface-80: color-mix(in srgb, #151310 80%, transparent); --th-on-surface-variant: #5c554b; --th-on-surface-variant-70: color-mix(in srgb, #5c554b 70%, transparent); --th-on-surface-variant-75: color-mix(in srgb, #5c554b 75%, transparent); --th-button-text: #231a10; --th-placeholder: #8a8174; --th-outline-variant: #c3b9a8; --th-outline-variant-10: color-mix(in srgb, #c3b9a8 55%, transparent); --th-outline-variant-20: color-mix(in srgb, #c3b9a8 75%, transparent); --th-outline-variant-30: #c3b9a8; --th-shadow-2xl: rgba(21, 19, 16, .14); --th-shadow-header: rgba(21, 19, 16, .12); --th-logo-filter: invert(1) hue-rotate(180deg); --surface: #efe9e0; --surface-card: #e4ddd1; --on-surface: #151310; --on-surface-rgb: 21, 19, 16; --error: #a03a28; --th-accent-ink: #963f0c; } .bg-surface { background-color: var(--th-surface); } .bg-surface\/95 { background-color: var(--th-surface-95); } .bg-surface-container { background-color: var(--th-surface-container); } .bg-surface-container\/30 { background-color: var(--th-surface-container-30); } .bg-surface-container-low { background-color: var(--th-surface-container-low); } .bg-surface-container-lowest { background-color: var(--th-surface-container-lowest); } .bg-surface-container-high { background-color: var(--th-surface-container-high); } .bg-surface-container-high\/40 { background-color: var(--th-surface-container-high-40); } .bg-surface-card { background-color: var(--th-surface-card); } .bg-white { background-color: var(--th-white); } .hover\:bg-surface-card:hover { background-color: var(--th-surface-card); } .text-on-surface { color: var(--th-on-surface); } .text-on-surface\/90 { color: var(--th-on-surface-90); } .text-on-surface\/80 { color: var(--th-on-surface-80); } .text-on-surface-variant { color: var(--th-on-surface-variant); } .text-on-surface-variant\/70 { color: var(--th-on-surface-variant-70); } .text-on-surface-variant\/75 { color: var(--th-on-surface-variant-75); } .text-button-text-dark { color: var(--th-button-text); } .hover\:text-on-surface:hover { color: var(--th-on-surface); } .border-outline-variant { border-color: var(--th-outline-variant); } .border-outline-variant\/10 { border-color: var(--th-outline-variant-10); } .border-outline-variant\/20 { border-color: var(--th-outline-variant-20); } .border-outline-variant\/30 { border-color: var(--th-outline-variant-30); } .shadow-2xl { --tw-shadow: 0 25px 50px -12px var(--th-shadow-2xl); --tw-shadow-colored: 0 25px 50px -12px var(--tw-shadow-color); box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); } input::-moz-placeholder, textarea::-moz-placeholder { color: var(--th-placeholder); } input::placeholder, textarea::placeholder { color: var(--th-placeholder); } .site-logo { filter: var(--th-logo-filter); } :root[data-theme="light"] input.bg-surface-container-high, :root[data-theme="light"] select.bg-surface-container-high, :root[data-theme="light"] textarea.bg-surface-container-high { background-color: #fff; } :root[data-theme="light"] .site-header { background-color: color-mix(in srgb, var(--th-surface-container) 90%, transparent); box-shadow: 0 6px 24px -8px var(--th-shadow-header); } :root[data-theme="light"] .nav-toggle[aria-expanded="true"] ~ .site-nav { background-color: var(--th-surface-container); box-shadow: 0 12px 24px -8px var(--th-shadow-header); } :root[data-theme="light"] .nav-toggle[aria-expanded="true"] ~ .site-nav > a:not(.site-nav__cta) { border-bottom-color: var(--th-outline-variant); } :root[data-theme="light"] .orenzis-values { border-color: var(--th-outline-variant); background: var(--th-surface-container); } :root[data-theme="light"] .orenzis-value { border-color: var(--th-outline-variant); background: var(--th-surface); } :root[data-theme="light"] .orenzis-value p { color: var(--th-on-surface-variant); } :root[data-theme="light"] .ov-grid-lines { background-image: linear-gradient(to right, rgba(92, 85, 75, .1) 1px, transparent 1px), linear-gradient(to bottom, rgba(92, 85, 75, .1) 1px, transparent 1px); } :root[data-theme="light"] .live-why-quote { border-color: var(--th-outline-variant); background: var(--th-surface-container); } :root[data-theme="light"] .live-why-link { color: var(--th-on-surface); } :root[data-theme="light"] .live-route-intro, :root[data-theme="light"] .live-route-guarantee, :root[data-theme="light"] .live-route-dot, :root[data-theme="light"] .live-route-chip, :root[data-theme="light"] .live-route-body p { color: var(--th-on-surface-variant); } :root[data-theme="light"] .live-route-chip--accent { color: var(--th-button-text); } :root[data-theme="light"] .live-route-stop-label, :root[data-theme="light"] .live-route-price span { color: #8a8174; } :root[data-theme="light"] .bg-primary-container\/20.text-primary.rounded-full, :root[data-theme="light"] .bg-primary\/15.text-primary.rounded-full { color: var(--th-button-text); } :root[data-theme="light"] .live-route-node.is-active .live-route-stop-label, :root[data-theme="light"] .live-route-body h3, :root[data-theme="light"] .live-route-price strong, :root[data-theme="light"] .live-route-link { color: var(--th-on-surface); } :root[data-theme="light"] .article-prose, :root[data-theme="light"] .article-callout ul, :root[data-theme="light"] .article-faq > p, :root[data-theme="light"] .article-step p, :root[data-theme="light"] .article-myth .myth, :root[data-theme="light"] .article-myth .truth, :root[data-theme="light"] .article-draft, :root[data-theme="light"] .article-back, :root[data-theme="light"] .article-prose table { color: var(--th-on-surface-variant); } :root[data-theme="light"] .article-prose h2, :root[data-theme="light"] .article-prose h3, :root[data-theme="light"] .article-prose strong, :root[data-theme="light"] .article-prose blockquote, :root[data-theme="light"] .article-prose .lead, :root[data-theme="light"] .article-step h3, :root[data-theme="light"] .article-myth strong, :root[data-theme="light"] .article-faq summary { color: var(--th-on-surface); } :root[data-theme="light"] .article-callout, :root[data-theme="light"] .article-step, :root[data-theme="light"] .article-faq, :root[data-theme="light"] .article-myth .truth { background: var(--th-surface-container); } :root[data-theme="light"] .article-callout, :root[data-theme="light"] .article-step, :root[data-theme="light"] .article-faq, :root[data-theme="light"] .article-hero, :root[data-theme="light"] .article-myth { border-color: var(--th-outline-variant); } :root[data-theme="light"] .article-callout { border-left-color: var(--primary); } :root[data-theme="light"] .article-myth .myth { border-bottom-color: var(--th-outline-variant); } :root[data-theme="light"] .article-prose td, :root[data-theme="light"] .article-prose th { border-bottom-color: var(--th-outline-variant); } :root[data-theme="light"] .article-prose thead th { color: #8a5a34; } :root[data-theme="light"] .article-breadcrumb { color: #8a8174; } :root[data-theme="light"] .article-breadcrumb a { color: var(--th-on-surface-variant); } :root[data-theme="light"] .article-myth .myth .tag { color: #8a8174; } :root[data-theme="light"] .ov-card-media { border-bottom-color: var(--th-outline-variant); background: radial-gradient(120% 120% at 72% 18%, rgba(255, 119, 34, .14), transparent 60%), linear-gradient(135deg, #e4ddd1, #efe9e0); } :root[data-theme="light"] .ov-card-media:before { background-image: linear-gradient(rgba(92, 85, 75, .07) 1px, transparent 0), linear-gradient(90deg, rgba(92, 85, 75, .07) 1px, transparent 0); } :root[data-theme="light"] .card-hover:hover { box-shadow: 0 10px 25px -5px rgba(255, 119, 34, .12), 0 8px 10px -6px rgba(21, 19, 16, .12); } :root[data-theme="light"] .article-step:hover { box-shadow: 0 12px 28px -10px rgba(21, 19, 16, .18); } :root[data-theme="light"] .text-eyebrow.text-primary, :root[data-theme="light"] .text-primary.font-cta-label, :root[data-theme="light"] p.text-primary.italic, :root[data-theme="light"] p.text-primary.font-medium { color: var(--th-accent-ink); } :root[data-theme="light"] .font-label-md.text-primary, :root[data-theme="light"] .font-label-md .text-primary, :root[data-theme="light"] .text-\[10px\].text-primary, :root[data-theme="light"] .font-body-md.font-bold.text-primary, :root[data-theme="light"] .text-sm.text-primary, :root[data-theme="light"] a.text-primary { color: var(--th-accent-ink); } :root[data-theme="light"] .article-prose a, :root[data-theme="light"] .article-callout a, :root[data-theme="light"] .article-faq a, :root[data-theme="light"] .article-step a { color: var(--th-accent-ink); } .theme-toggle { display: inline-flex; align-items: center; gap: 7px; flex-shrink: 0; cursor: pointer; padding: 5px 9px; background: transparent; border: 2px solid var(--th-outline-variant); border-radius: .5rem; color: var(--th-on-surface); font-family: 'Source Sans 3', ui-sans-serif, system-ui, sans-serif; font-size: .66rem; font-weight: 600; letter-spacing: .1em; line-height: 1; text-transform: uppercase; white-space: nowrap; transition: background-color .15s ease, color .15s ease, border-color .15s ease; } .theme-toggle:hover { background: var(--primary); border-color: var(--primary); color: var(--button-text-dark); } .theme-toggle:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; } .theme-toggle .tt-dark { display: none; } .theme-toggle .tt-light { display: inline; } :root[data-theme="dark"] .theme-toggle .tt-dark { display: inline; } :root[data-theme="dark"] .theme-toggle .tt-light { display: none; } .site-header-inner .theme-toggle { order: 1; margin-left: auto; margin-right: .75rem; } .site-header-inner .site-header__cta, .site-header-inner .nav-toggle { order: 2; } @media (max-width: 639px) { .theme-toggle { font-size: .6rem; padding: 5px 7px; gap: 5px; } .site-header-inner .theme-toggle { margin-right: .5rem; } } @media (min-width: 1024px) { .theme-toggle { padding: 7px 9px; gap: 0; font-size: .82rem; letter-spacing: 0; } .theme-toggle .tt-woord { display: none; } .site-header-inner .theme-toggle { margin-right: .6rem; } } @media (min-width: 1280px) { .site-header-inner .theme-toggle { margin-right: 0; } } :root[data-theme="light"] .live-route-media { border-bottom: 2px solid var(--th-on-surface); background: var(--th-surface-container); } :root[data-theme] img[src$="/reis_etappe1_kompas.webp"] { filter: brightness(1.513) saturate(1.02); } :root[data-theme] img[src$="/reis_etappe2_fundering.webp"] { filter: brightness(0.996) saturate(1.02); } :root[data-theme] img[src$="/reis_etappe3_adoptie.webp"] { filter: brightness(1.27) saturate(1.02); } :root[data-theme] .live-route-card:focus-within img[src$="/reis_etappe1_kompas.webp"], :root[data-theme] .live-route-card.is-linked img[src$="/reis_etappe1_kompas.webp"] { filter: brightness(1.628) saturate(1.06); } :root[data-theme] .live-route-card:focus-within img[src$="/reis_etappe2_fundering.webp"], :root[data-theme] .live-route-card.is-linked img[src$="/reis_etappe2_fundering.webp"] { filter: brightness(1.064) saturate(1.06); } :root[data-theme] .live-route-card:focus-within img[src$="/reis_etappe3_adoptie.webp"], :root[data-theme] .live-route-card.is-linked img[src$="/reis_etappe3_adoptie.webp"] { filter: brightness(1.359) saturate(1.06); } @media (hover: hover) { :root[data-theme] .live-route-card:hover img[src$="/reis_etappe1_kompas.webp"] { filter: brightness(1.628) saturate(1.06); } :root[data-theme] .live-route-card:hover img[src$="/reis_etappe2_fundering.webp"] { filter: brightness(1.064) saturate(1.06); } :root[data-theme] .live-route-card:hover img[src$="/reis_etappe3_adoptie.webp"] { filter: brightness(1.359) saturate(1.06); } } :root[data-theme="light"] .w-full.overflow-hidden.rounded-xl.bg-surface-container { border: 2px solid var(--th-outline-variant); } :root[data-theme="light"] .live-why-card { padding: calc(70.92% + 0.9rem) 1.2rem 1.3rem; border-color: var(--th-outline-variant); background: var(--th-surface); } :root[data-theme="light"] .live-why-card img { inset: 0 0 auto; height: auto; aspect-ratio: 1.41; } :root[data-theme="light"] .live-why-card::before { inset: 0 0 auto; aspect-ratio: 1.41; background: none; border-bottom: 2px solid var(--th-on-surface); } :root[data-theme="light"] .live-why-card h3 { color: var(--th-on-surface); text-shadow: none; } :root[data-theme="light"] .live-why-card p { color: var(--th-on-surface-variant); text-shadow: none; } :root[data-theme="light"] .live-why-card small { box-shadow: none; } :root[data-theme="light"] .live-why-card:hover img { transform: none; } :root[data-theme="light"] .live-route-card:not(.live-route-card--featured) { border-top-width: 3px; } :root[data-theme="light"] img[src$="/readiness-demo-rapport.webp"] { content: url("/Afbeeldingen/readiness-demo-rapport-licht.webp"); }