/* ========================================================================== TKM Core — scenes.css (v0.23.165, Run 1: brand asset library) Keyframes + scene-/animatie-styles voor TKM. Wordt globaal geladen na blocks.css. Werkt samen met: - tkm-svg.js (SVG-figuren met .breathe / .arm-wave / .eye-blink / .finger-tap) - AuthPhoneMockup partial (auth-pages) - homepage hero, hoe-het-werkt, vendor-profile, account-dashboard Sections: 1. KEYFRAMES (alle reusable animaties) 2. HERO-ORBS (achtergrond-gloed) 3. SVG-FIGUUR animatie-hooks 4. STEP-CARDS grid (3-step "Hoe het werkt") 5. FLOATING-CARDS rond phone-mockup 6. PEOPLE-ROW (3-personen lijn) 7. STATS / COUNT-UP 8. SKELETON-LOADING 9. SCROLL-REVEAL 10. REDUCE-MOTION OVERRIDE ← belangrijk voor a11y ========================================================================== */ /* ────────────────────────────────────────────────────────────────────────── 1. KEYFRAMES ────────────────────────────────────────────────────────────────────────── */ @keyframes tkm-float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-8px); } } @keyframes tkm-float-slow { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-14px); } } @keyframes tkm-float-tilt { 0%,100% { transform: translateY(0) rotate(-4deg); } 50% { transform: translateY(-10px) rotate(-3deg); } } @keyframes tkm-breathe { 0%,100% { transform: scale(1); } 50% { transform: scale(1.02); } } @keyframes tkm-wave { 0%,100% { transform: rotate(-8deg); } 50% { transform: rotate(15deg); } } @keyframes tkm-tap { 0%,90%,100% { transform: translateY(0); opacity: .65; } 45% { transform: translateY(-4px); opacity: 1; } } @keyframes tkm-pulse-ring { 0% { box-shadow: 0 0 0 0 rgba(232,93,26,.45); } 70% { box-shadow: 0 0 0 14px rgba(232,93,26,0); } 100% { box-shadow: 0 0 0 0 rgba(232,93,26,0); } } @keyframes tkm-pulse-ring-g { 0% { box-shadow: 0 0 0 0 rgba(47,125,59,.45); } 70% { box-shadow: 0 0 0 14px rgba(47,125,59,0); } 100% { box-shadow: 0 0 0 0 rgba(47,125,59,0); } } @keyframes tkm-blink { 0%,40%,100% { transform: scaleY(1); } 45% { transform: scaleY(.1); } } @keyframes tkm-type { 0%,60%,100% { transform: translateY(0); opacity: .3; } 30% { transform: translateY(-3px); opacity: 1; } } @keyframes tkm-bubble-pop { from { transform: scale(0) translateY(10px); opacity: 0; } to { transform: scale(1) translateY(0); opacity: 1; } } @keyframes tkm-slide-fade { from { transform: translateY(20px); opacity: 0; } to { transform: translateY(0); opacity: 1; } } @keyframes tkm-slide-right { from { transform: translateX(-20px); opacity: 0; } to { transform: translateX(0); opacity: 1; } } @keyframes tkm-spin-slow { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } @keyframes tkm-shimmer { 0% { background-position: -200% 0; } 100% { background-position: 200% 0; } } @keyframes tkm-glow-soft { 0%,100% { opacity: .35; } 50% { opacity: .55; } } /* ────────────────────────────────────────────────────────────────────────── 2. HERO-ORBS — gekleurde gaussian-blurred cirkels in de hero-achtergrond ────────────────────────────────────────────────────────────────────────── */ .tkm-hero-orbs { position: absolute; inset: 0; pointer-events: none; overflow: hidden; z-index: 0; } .tkm-orb { position: absolute; border-radius: 50%; filter: blur(50px); opacity: .35; animation: tkm-float-slow 8s ease-in-out infinite; } .tkm-orb-1 { width: 240px; height: 240px; background: #E85D1A; top: -60px; right: 8%; } .tkm-orb-2 { width: 200px; height: 200px; background: #2F7D3B; bottom: 5%; left: 6%; animation-delay: 2s; } .tkm-orb-3 { width: 160px; height: 160px; background: #D9D2C3; top: 30%; left: 38%; animation-delay: 4s; opacity: .28; } /* ────────────────────────────────────────────────────────────────────────── 3. SVG-FIGUUR animatie-hooks (de classes komen uit tkm-svg.js) ────────────────────────────────────────────────────────────────────────── */ .tkm-figure { display: inline-block; vertical-align: middle; } .tkm-figure svg { display: block; overflow: visible; } .tkm-figure .breathe { transform-origin: 50% 50%; animation: tkm-breathe 3s ease-in-out infinite; transform-box: fill-box; } .tkm-figure .arm-wave { transform-origin: 50% 100%; animation: tkm-wave 2.5s ease-in-out infinite; transform-box: fill-box; } .tkm-figure .eye-blink { transform-origin: center; animation: tkm-blink 4s ease-in-out infinite; transform-box: fill-box; } .tkm-figure .finger-tap { transform-origin: 50% 100%; animation: tkm-tap 1.4s ease-in-out infinite; transform-box: fill-box; } .tkm-figure.delay-1 .breathe { animation-delay: .5s; } .tkm-figure.delay-2 .breathe { animation-delay: 1s; } .tkm-figure.delay-1 .arm-wave { animation-delay: .35s; } /* Scene-illustraties (zoek/chat/deal) — zelfde hook-classes, geen extra werk. */ .tkm-scene { display: inline-block; } .tkm-scene svg { display: block; overflow: visible; } .tkm-scene .breathe { transform-origin: 50% 50%; animation: tkm-breathe 3s ease-in-out infinite; transform-box: fill-box; } .tkm-scene .arm-wave { transform-origin: 50% 50%; animation: tkm-float-slow 6s ease-in-out infinite; transform-box: fill-box; } /* Drop-shadow voor diepte op alle figuren — subtiel. */ .tkm-figure svg, .tkm-scene svg { filter: drop-shadow(0 8px 18px rgba(14,20,16,.14)); } /* ────────────────────────────────────────────────────────────────────────── 4. STEP-CARDS grid (3-step "Hoe het werkt") ────────────────────────────────────────────────────────────────────────── */ .tkm-steps-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 40px; position: relative; } @media (max-width: 820px) { .tkm-steps-grid { grid-template-columns: 1fr; gap: 16px; } } .tkm-step-card { background: #FFFFFF; border: 1px solid #E8E2D3; border-radius: 18px; padding: 32px 24px 28px; text-align: center; position: relative; transition: transform .3s ease, box-shadow .3s ease; box-shadow: 0 2px 6px rgba(14,20,16,.04); } .tkm-step-card:hover { transform: translateY(-6px); box-shadow: 0 18px 44px -16px rgba(14,20,16,.14); } .tkm-step-number { position: absolute; top: -18px; left: 50%; transform: translateX(-50%); width: 40px; height: 40px; border-radius: 50%; background: linear-gradient(135deg, #E85D1A, #C94A10); color: #FFFFFF; display: grid; place-items: center; font-family: 'Space Grotesk', sans-serif; font-weight: 700; font-size: 17px; box-shadow: 0 6px 14px rgba(232,93,26,.35); } .tkm-step-illu { width: 140px; height: 140px; margin: 12px auto 18px; display: grid; place-items: center; } .tkm-step-card h3 { font-size: 18px; margin: 0 0 8px; color: #0E1410; font-family: 'Space Grotesk', sans-serif; font-weight: 600; letter-spacing: -.022em; } .tkm-step-card p { color: #565A54; font-size: 14px; line-height: 1.55; margin: 0; max-width: none; } /* Verbindingslijn tussen de 3 stappen — op step-number niveau, zodat het de badges visueel met elkaar verbindt (niet dwars door de illustraties). */ .tkm-steps-grid::before { content: ''; position: absolute; top: 2px; left: 18%; right: 18%; height: 2px; background: linear-gradient(90deg, transparent, #E85D1A 18%, #E85D1A 82%, transparent); opacity: .45; pointer-events: none; } @media (max-width: 820px) { .tkm-steps-grid::before { display: none; } } /* ────────────────────────────────────────────────────────────────────────── 5. FLOATING-CARDS rond phone-mockup ────────────────────────────────────────────────────────────────────────── */ .tkm-scene-stage { position: relative; min-height: 600px; display: flex; justify-content: center; align-items: center; perspective: 1200px; } .tkm-float-card { position: absolute; background: #FFFFFF; border: 1px solid #E8E2D3; border-radius: 14px; padding: 11px 16px; box-shadow: 0 14px 34px -14px rgba(14,20,16,.22); display: flex; gap: 10px; align-items: center; animation: tkm-float 5s ease-in-out infinite; z-index: 5; min-width: 180px; } .tkm-float-card.tkm-float-card--top-left { top: 10%; left: -28px; animation-delay: 0s; transform: rotate(-3deg); } .tkm-float-card.tkm-float-card--top-right { top: 18%; right: -22px; animation-delay: 1s; transform: rotate(2deg); } .tkm-float-card.tkm-float-card--bottom-left { bottom: 18%; left: -22px; animation-delay: 2s; transform: rotate(2deg); } .tkm-float-card.tkm-float-card--bottom-right{ bottom: 4%; right: -30px; animation-delay: 1.5s; transform: rotate(-2deg); } .tkm-float-card__icon { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; color: #FFFFFF; font-size: 14px; flex-shrink: 0; } .tkm-float-card__icon--ok { background: #2F7D3B; animation: tkm-pulse-ring-g 2.2s ease-out infinite; } .tkm-float-card__icon--bid { background: #E85D1A; animation: tkm-pulse-ring 2.2s ease-out infinite; } .tkm-float-card__icon--star { background: #D4A843; } .tkm-float-card__icon--msg { background: #2D80EF; } .tkm-float-card__icon--bell { background: #E85D1A; } .tkm-float-card__icon svg { width: 16px; height: 16px; stroke: #FFFFFF; fill: none; stroke-width: 2.2; } .tkm-float-card__text strong { display: block; font-size: 12.5px; color: #0E1410; font-weight: 700; line-height: 1.2; font-family: 'Space Grotesk', sans-serif; } .tkm-float-card__text span { display: block; font-size: 10.5px; color: #565A54; margin-top: 2px; line-height: 1.2; } @media (max-width: 760px) { .tkm-scene-stage { min-height: 460px; transform: scale(.85); } .tkm-float-card { display: none; } } /* ────────────────────────────────────────────────────────────────────────── 6. PEOPLE-ROW — 3 personen in lijn ────────────────────────────────────────────────────────────────────────── */ .tkm-people-row { display: flex; justify-content: space-around; align-items: flex-end; margin-top: 32px; flex-wrap: wrap; gap: 40px; padding: 24px 0; } .tkm-people-row .tkm-figure { transition: transform .3s ease; } .tkm-people-row .tkm-figure:hover { transform: translateY(-6px); } /* ────────────────────────────────────────────────────────────────────────── 7. STATS / COUNT-UP — animated numeric stat-cards ────────────────────────────────────────────────────────────────────────── */ .tkm-stat { background: #FFFFFF; border: 1px solid #E8E2D3; border-radius: 14px; padding: 20px 22px; position: relative; overflow: hidden; animation: tkm-slide-fade .55s ease-out both; } .tkm-stat__value { display: block; font-family: 'Space Grotesk', sans-serif; font-weight: 700; font-size: 32px; line-height: 1; color: #E85D1A; letter-spacing: -.022em; font-feature-settings: "tnum"; } .tkm-stat__label { display: block; font-size: 12px; font-weight: 600; color: #565A54; text-transform: uppercase; letter-spacing: .08em; margin-top: 6px; } .tkm-stat--accent .tkm-stat__value { color: #2F7D3B; } /* ────────────────────────────────────────────────────────────────────────── 8. SKELETON-LOADING — voor filter-AJAX en lazy content ────────────────────────────────────────────────────────────────────────── */ .tkm-skeleton { background: linear-gradient(90deg, #F0EBE0 0%, #F6F3EE 50%, #F0EBE0 100%); background-size: 200% 100%; animation: tkm-shimmer 1.4s ease-in-out infinite; border-radius: 8px; } .tkm-skeleton--card { width: 100%; aspect-ratio: 4/3; border-radius: 12px; } .tkm-skeleton--line { width: 80%; height: 12px; margin-top: 8px; } .tkm-skeleton--line.tkm-skeleton--short { width: 50%; } /* ────────────────────────────────────────────────────────────────────────── 9. SCROLL-REVEAL — tkm-svg.js voegt .is-visible toe via IntersectionObserver ────────────────────────────────────────────────────────────────────────── */ .tkm-reveal { opacity: 0; transform: translateY(28px); transition: opacity .75s cubic-bezier(.21,.61,.35,1), transform .75s cubic-bezier(.21,.61,.35,1); will-change: opacity, transform; } .tkm-reveal.is-visible { opacity: 1; transform: translateY(0); } .tkm-reveal.delay-1 { transition-delay: .12s; } .tkm-reveal.delay-2 { transition-delay: .24s; } .tkm-reveal.delay-3 { transition-delay: .36s; } .tkm-reveal.delay-4 { transition-delay: .48s; } /* Variant: slide vanuit links/rechts */ .tkm-reveal--left { transform: translateX(-32px); } .tkm-reveal--right { transform: translateX(32px); } .tkm-reveal--left.is-visible, .tkm-reveal--right.is-visible { transform: translateX(0); } /* ────────────────────────────────────────────────────────────────────────── 6b. PEOPLE-SECTION (Run 4) — section wrapper voor de 3 SVG-personen ────────────────────────────────────────────────────────────────────────── */ .tkm-people-section { background: var(--tkm-color-paper, #F6F3EE); position: relative; overflow: hidden; } /* Subtiele oranje radial in de bg, niet teveel — laat de figuren centraal staan */ .tkm-people-section::before { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at 20% 30%, rgba(232,93,26,.06) 0%, transparent 45%), radial-gradient(circle at 80% 70%, rgba(47,125,59,.06) 0%, transparent 45%); pointer-events: none; z-index: 0; } .tkm-people-section > .tkm-container { position: relative; z-index: 1; } /* Slots reserveren ruimte zodat de pagina niet shift wanneer JS de SVG injecteert. */ .tkm-people-row__slot { min-width: 260px; min-height: 286px; /* 260 * 1.1 (aspect verhouding van verkoper/koper-SVG) */ display: inline-block; } .tkm-people-row__slot[data-tkm-person="handshake"] { min-width: 300px; min-height: 300px; /* handshake-SVG is 1:1 */ } /* v0.23.200: op mobiel zijn deze 2 SVG's te groot en breken ze de verticale flow van de people-row. Verbergen onder 760px — de overige slots (koper, verkoper, etc.) blijven wél zichtbaar. */ @media (max-width: 760px) { .tkm-people-row__slot[data-tkm-person="handshake"], .tkm-people-row__slot[data-tkm-person="verkoper"] { display: none; } } /* Trust-strip onder de personen — 3 chips in een flex-rij. */ .tkm-people-trust { display: flex; justify-content: center; gap: 24px; flex-wrap: wrap; margin-top: 36px; padding: 0; list-style: none; } .tkm-people-trust__item { display: inline-flex; align-items: center; gap: 10px; padding: 10px 18px; background: #FFFFFF; border: 1px solid #E8E2D3; border-radius: 999px; font-size: 13.5px; color: #565A54; box-shadow: 0 2px 6px rgba(14,20,16,.04); } .tkm-people-trust__item strong { color: #0E1410; font-weight: 700; } .tkm-people-trust__icon { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%; background: #FFF1E7; color: #E85D1A; flex-shrink: 0; } .tkm-people-trust__icon svg { width: 14px; height: 14px; } @media (max-width: 760px) { .tkm-people-row__slot { min-width: 200px; min-height: 220px; } .tkm-people-row__slot[data-tkm-person="handshake"] { min-width: 220px; min-height: 220px; } .tkm-people-trust { gap: 12px; } .tkm-people-trust__item { font-size: 12.5px; padding: 8px 14px; } } /* ────────────────────────────────────────────────────────────────────────── 7b. DASHBOARD POLISH (Run 5) — stat-card hover-lift, staggered entry, empty-state illustratie-layout. ────────────────────────────────────────────────────────────────────────── */ /* Stat-cards: slide-fade entry + subtle hover-lift. */ .tkm-dash__stat { transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease; animation: tkm-slide-fade .55s ease-out both; } .tkm-dash__stats > .tkm-dash__stat:nth-child(1) { animation-delay: .00s; } .tkm-dash__stats > .tkm-dash__stat:nth-child(2) { animation-delay: .08s; } .tkm-dash__stats > .tkm-dash__stat:nth-child(3) { animation-delay: .16s; } .tkm-dash__stats > .tkm-dash__stat:nth-child(4) { animation-delay: .24s; } .tkm-dash__stat:hover { transform: translateY(-3px); box-shadow: 0 12px 28px -14px rgba(14,20,16,.18); border-color: var(--tkm-color-line, #E8E2D3); } /* Tabular-nums zodat de count-up niet horizontaal jittert tijdens animatie */ .tkm-dash__stat-value { font-feature-settings: "tnum" 1; } /* Empty-state — 2-koloms layout: illustratie links, copy + CTA rechts */ .tkm-dash__empty { display: flex; align-items: center; gap: 28px; background: linear-gradient(135deg, #FFF8F3 0%, #FFFFFF 70%); border: 1px solid var(--tkm-color-line, #E8E2D3); border-radius: 18px; padding: 28px; box-shadow: 0 4px 14px -6px rgba(14,20,16,.06); animation: tkm-slide-fade .55s ease-out both; } .tkm-dash__empty-illu { flex-shrink: 0; width: 220px; min-height: 242px; /* reserveer ruimte vóór SVG-injectie */ display: grid; place-items: center; } .tkm-dash__empty-body { flex: 1; min-width: 0; } .tkm-dash__empty-body h3 { margin: 0 0 8px; font-family: 'Space Grotesk', sans-serif; font-size: 22px; font-weight: 600; color: var(--tkm-color-ink, #0E1410); letter-spacing: -.022em; } .tkm-dash__empty-body p { margin: 0 0 18px; color: var(--tkm-color-muted, #565A54); font-size: 14px; line-height: 1.55; max-width: 44ch; } .tkm-dash__empty-cta { display: inline-flex; align-items: center; gap: 8px; } @media (max-width: 640px) { .tkm-dash__empty { flex-direction: column; align-items: flex-start; text-align: left; padding: 22px; gap: 18px; } .tkm-dash__empty-illu { width: 180px; min-height: 198px; margin: 0 auto; } } /* ────────────────────────────────────────────────────────────────────────── 7c. HELPCENTRUM POLISH (Run 6) — staggered card entry, icon-breathing on hover, smooth callout reveal, refined hover-lift. ────────────────────────────────────────────────────────────────────────── */ /* Hub-page quick-grid (4 cards) — entry stagger + lift refinement. */ .tkm-help-quick__card { animation: tkm-slide-fade .55s ease-out both; transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease; position: relative; } .tkm-help-quick__grid > li:nth-child(1) .tkm-help-quick__card { animation-delay: .00s; } .tkm-help-quick__grid > li:nth-child(2) .tkm-help-quick__card { animation-delay: .08s; } .tkm-help-quick__grid > li:nth-child(3) .tkm-help-quick__card { animation-delay: .16s; } .tkm-help-quick__grid > li:nth-child(4) .tkm-help-quick__card { animation-delay: .24s; } /* Icon breathes subtiel op hover van de card */ .tkm-help-quick__card .tkm-help-quick__icon { transition: transform .25s ease, background .25s ease, color .25s ease; } .tkm-help-quick__card:hover .tkm-help-quick__icon { transform: scale(1.08); background: var(--tkm-color-primary, #E85D1A); color: #FFFFFF; } .tkm-help-quick__card:hover .tkm-help-quick__icon--accent { background: var(--tkm-color-accent, #2F7D3B); } /* Topic-grid — staggered entry, 5 kolommen waterval-trapsgewijs. */ .tkm-help-topics__card { animation: tkm-slide-fade .55s ease-out both; transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease; } /* nth-child cycle van 6 zodat we niet exponentieel groeien — 13 cards verdelen over 6 timing-slots geeft een natuurlijk gevoel. */ .tkm-help-topics__grid > li:nth-child(6n+1) .tkm-help-topics__card { animation-delay: .00s; } .tkm-help-topics__grid > li:nth-child(6n+2) .tkm-help-topics__card { animation-delay: .06s; } .tkm-help-topics__grid > li:nth-child(6n+3) .tkm-help-topics__card { animation-delay: .12s; } .tkm-help-topics__grid > li:nth-child(6n+4) .tkm-help-topics__card { animation-delay: .18s; } .tkm-help-topics__grid > li:nth-child(6n+5) .tkm-help-topics__card { animation-delay: .24s; } .tkm-help-topics__grid > li:nth-child(6n+6) .tkm-help-topics__card { animation-delay: .30s; } /* Tag-pill kleurigere transitie op hover */ .tkm-help-topics__tag { transition: background .22s ease, color .22s ease, transform .22s ease; } .tkm-help-topics__card:hover .tkm-help-topics__tag { background: var(--tkm-color-primary, #E85D1A); color: #FFFFFF; transform: translateX(2px); } /* "→ X vragen"-link beweegt mee op hover voor micro-feedback */ .tkm-help-topics__more { transition: transform .22s ease, color .22s ease; } .tkm-help-topics__card:hover .tkm-help-topics__more { transform: translateX(4px); color: var(--tkm-color-primary, #E85D1A); } /* Detail-page QA items — slide-fade vanaf rechts, gestaggerd per item */ .tkm-hc-qa__item { animation: tkm-slide-fade .50s ease-out both; } .tkm-hc-qa__item:nth-child(1) { animation-delay: .00s; } .tkm-hc-qa__item:nth-child(2) { animation-delay: .05s; } .tkm-hc-qa__item:nth-child(3) { animation-delay: .10s; } .tkm-hc-qa__item:nth-child(4) { animation-delay: .15s; } .tkm-hc-qa__item:nth-child(5) { animation-delay: .20s; } .tkm-hc-qa__item:nth-child(n+6){ animation-delay: .25s; } /* Callouts (tip/warn) krijgen een subtle hover-glow zodat ze "leven" */ .tkm-hc-callout { transition: transform .22s ease, box-shadow .22s ease; } .tkm-hc-callout:hover { transform: translateX(2px); box-shadow: 0 6px 20px -10px rgba(14,20,16,.18); } /* TOC-link active state — smooth transition van kleur + indicator */ .tkm-hc-toc a { transition: color .18s ease, padding-left .18s ease, border-left-color .22s ease; border-left: 2px solid transparent; padding-left: 10px; } .tkm-hc-toc a.is-active { color: var(--tkm-color-primary, #E85D1A); border-left-color: var(--tkm-color-primary, #E85D1A); padding-left: 14px; } /* ────────────────────────────────────────────────────────────────────────── 7d. LISTINGS-GRID POLISH (Run 8) - Pulse-ring rond "Nieuw"-oranje badge (zachte oranje gloed expandeert) - "Net online" groene dot voor listings <1u oud (pulserende stip) - Shimmer-overlay op de grid tijdens RTCL-filter-AJAX (visueel feedback ipv de uitgeschakelde safe-mode loader) ────────────────────────────────────────────────────────────────────────── */ /* Pulse-ring rond de "Nieuw"-badge — zachte oranje halo die expandeert. Werkt alleen op de homepage-cards (.tkm-listing); RTCL-archive cards houden hun standaard styling want die hebben hun eigen RTCL-badges. */ .tkm-listing__badge--new { position: absolute; /* parent .tkm-listing__media is al rel */ overflow: visible; /* zodat de ring buiten de badge mag */ } .tkm-listing__badge--new::before { content: ''; position: absolute; inset: -3px; border-radius: 999px; background: transparent; box-shadow: 0 0 0 0 rgba(232,93,26,.55); animation: tkm-pulse-ring 2s ease-out infinite; pointer-events: none; z-index: -1; } /* "Net online" — kleine groene pulserende dot rechtsboven op de media-area. Aanvullend signaal op de "Nieuw"-badge: vertelt dat 't <1u geleden geplaatst is, dus écht actueel. */ .tkm-listing__live-dot { position: absolute; top: 14px; right: 14px; width: 12px; height: 12px; border-radius: 50%; background: #2F7D3B; border: 2px solid #FFFFFF; box-shadow: 0 2px 6px rgba(14,20,16,.18); z-index: 2; } .tkm-listing__live-dot-pulse { position: absolute; inset: -4px; border-radius: 50%; background: transparent; box-shadow: 0 0 0 0 rgba(47,125,59,.55); animation: tkm-pulse-ring-g 2s ease-out infinite; pointer-events: none; } /* Shimmer-overlay tijdens RTCL filter-AJAX. JS hookt op jQuery's ajaxSend (waar action=rtcl_ajax_filter) en plakt `.tkm-listings--loading` op `.rtcl-listings`. Tijdens loading: cards iets vager + diagonale shimmer die zachtjes overheen schuift. Wordt automatisch opgeruimd zodra RTCL z'n DOM-replace klaar heeft. */ .rtcl-listings.tkm-listings--loading { position: relative; } .rtcl-listings.tkm-listings--loading > * { opacity: 0.45; transition: opacity .18s ease; pointer-events: none; } .rtcl-listings.tkm-listings--loading::after { content: ''; position: absolute; inset: 0; background: linear-gradient( 90deg, transparent 0%, rgba(255,255,255,.45) 50%, transparent 100% ); background-size: 200% 100%; background-repeat: no-repeat; animation: tkm-shimmer 1.4s ease-in-out infinite; pointer-events: none; z-index: 1; border-radius: 12px; } /* ────────────────────────────────────────────────────────────────────────── 7e. KENNISBANK ARTICLE POLISH (Run 9) - Reading-progress bar bovenaan (fixed) - Sticky TOC sidebar links (desktop ≥1024) - Active-state op TOC-link bij scroll ────────────────────────────────────────────────────────────────────────── */ /* Reading-progress bar — fixed strakje bovenaan. Vult van links naar rechts tijdens scroll-progress via JS-aangestuurde scaleX. */ .tkm-reading-progress { position: fixed; top: 0; left: 0; right: 0; height: 3px; background: rgba(232,93,26,.10); z-index: 999; pointer-events: none; } .tkm-reading-progress__bar { display: block; width: 100%; height: 100%; background: linear-gradient(90deg, #E85D1A 0%, #C94A10 100%); transform: scaleX(0); transform-origin: left center; transition: transform .12s linear; box-shadow: 0 0 8px rgba(232,93,26,.45); } /* TOC — desktop alleen. Onder 1024 wordt 'ie via display:none verborgen. */ .tkm-kb-article__toc { display: none; } @media (min-width: 1024px) { /* Maak van de body-wrap een 2-koloms grid: TOC links, content rechts. */ .tkm-kb-article__body-wrap { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 56px; align-items: start; } .tkm-kb-article__toc { display: block; position: sticky; top: 96px; /* ruimte voor site-header + reading-progress */ align-self: start; max-height: calc(100vh - 120px); overflow-y: auto; font-size: 13px; } /* Zorg dat de andere kinderen (body + nav + back) zichzelf in de 2e kolom plaatsen (de TOC is grid-row 1 / col 1, body etc. spannen de 2e kolom over meerdere rows). */ .tkm-kb-article__body-wrap > :not(.tkm-kb-article__toc) { grid-column: 2; } } .tkm-kb-article__toc-label { margin: 0 0 12px; font-size: 11px; font-weight: 700; color: var(--tkm-color-muted, #565A54); text-transform: uppercase; letter-spacing: .12em; } .tkm-kb-article__toc-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; border-left: 2px solid var(--tkm-color-line, #E8E2D3); padding-left: 14px; } .tkm-kb-article__toc-list li { list-style: none; } .tkm-kb-article__toc-link { display: block; font-size: 13px; color: var(--tkm-color-muted, #565A54); line-height: 1.45; padding: 4px 0; border-left: 2px solid transparent; margin-left: -16px; padding-left: 14px; transition: color .18s ease, border-color .22s ease; text-decoration: none; } .tkm-kb-article__toc-link:hover { color: var(--tkm-color-ink, #0E1410); } .tkm-kb-article__toc-link.is-active { color: var(--tkm-color-primary, #E85D1A); font-weight: 600; border-left-color: var(--tkm-color-primary, #E85D1A); } .tkm-kb-article__toc-time { margin: 18px 0 0; font-size: 12px; color: var(--tkm-color-muted, #565A54); display: inline-flex; align-items: center; gap: 6px; } .tkm-kb-article__toc-time svg { flex-shrink: 0; } /* Smooth-scroll naar de h2 (heading id) — alleen voor TOC-links zodat het geen globale side-effect heeft. */ @media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } } /* ────────────────────────────────────────────────────────────────────────── 9b. HERO-SPECIFIEKE HOOKS (Run 2) - .tkm-hero__phone-col--live → positioning-context voor floating-cards - .tkm-hero__phone--floating → slow tilt-float van de telefoon-frame ────────────────────────────────────────────────────────────────────────── */ .tkm-hero__phone-col--live { position: relative; } .tkm-hero__phone--floating { animation: tkm-float-slow 6s ease-in-out infinite; } /* ────────────────────────────────────────────────────────────────────────── 9c. MOBILE TOUCH-FEEDBACK + A11Y POLISH (Run 10) Drie groepen verbeteringen: (A) Touch-feedback states voor mobiel — hover bestaat niet op touch, dus :active geeft een korte scale-down zodat de gebruiker visueel feedback krijgt dat de tap geregistreerd is. (B) Focus-visible polish — als toetsenbord-user moet je elke clickable glashelder kunnen zien. Brand.css heeft al een basis-rule, deze sectie verfijnt 'm voor cards/buttons specifiek. (C) Minimum touch-target sizes — WCAG 2.5.5 vraagt ≥44×44px voor élke interactieve regio. Bestaande buttons zijn vaak prima maar kleine icoon-knoppen (chips, sluitknopjes) zijn risk. ────────────────────────────────────────────────────────────────────────── */ /* ── (A) Touch-feedback — alléén op touch-devices ──────────────────────── `(hover: none) and (pointer: coarse)` = telefoon/tablet. Op desktop blijven hover-states intact zonder side-effects. */ @media (hover: none) and (pointer: coarse) { .tkm-listing:active, .tkm-step-card:active, .tkm-help-quick__card:active, .tkm-help-topics__card:active, .tkm-allcats__card:active, .tkm-catfeat__card:active, .tkm-explore__card:active, .tkm-dash__stat:active, .tkm-dash__quicklink:active, .tkm-people-trust__item:active { transform: scale(0.985); transition: transform .08s ease; } /* Buttons krijgen een iets meer pronounced press-down */ .tkm-btn:active, .tkm-hero__cta:active, .tkm-btn-submit:active, .tkm-vendor-btn:active { transform: scale(0.97); transition: transform .08s ease; } } /* ── (B) Focus-visible polish ──────────────────────────────────────────── Brand.css zet al `:focus-visible { outline: 2px solid primary; offset: 3px }`. Voor cards (die geen zichtbare border-edge hebben) is een outline alleen niet altijd duidelijk genoeg. Voeg een subtle box-shadow toe als ring. */ .tkm-listing:focus-visible, .tkm-step-card:focus-visible, .tkm-help-quick__card:focus-visible, .tkm-help-topics__card:focus-visible, .tkm-allcats__card:focus-visible, .tkm-catfeat__card:focus-visible, .tkm-explore__card:focus-visible, .tkm-dash__quicklink:focus-visible { outline: 2px solid var(--tkm-color-primary, #E85D1A) !important; outline-offset: 3px; box-shadow: 0 0 0 5px rgba(232,93,26,.14); border-radius: 14px; } /* TOC-links in kennisbank — keyboard nav krijgt dezelfde oranje hint */ .tkm-kb-article__toc-link:focus-visible { outline: 2px solid var(--tkm-color-primary, #E85D1A); outline-offset: 2px; border-radius: 4px; } /* ── (C) Minimum touch-target sizes (WCAG 2.5.5) ───────────────────────── Garandeert 44×44px clickable area zelfs als de visuele content kleiner is. Gebruikt `min-block-size`/`min-inline-size` zodat de visuele styling intact blijft maar de tap-zone groter wordt. */ @media (hover: none) and (pointer: coarse) { .tkm-pass-toggle, .tkm-chat__safety-close, .tkm-chat__item-menu-btn, .tkm-chat-full__more, .tkm-faq__icon, .tkm-account-drawer__close, .tkm-mobile-tabbar__item { min-width: 44px; min-height: 44px; } /* Chips in filter-bar/breadcrumb hebben vaak <44px font + padding — forceren via min-height. Visuele padding blijft compact. */ .tkm-filterbar__chip, .tkm-breadcrumbs__link { min-height: 36px; /* iets soepeler dan 44 — context is dense */ display: inline-flex; align-items: center; } } /* ── (D) Skip-link voor keyboard users ─────────────────────────────────── Verschijnt alleen bij focus (Tab vanaf de URL-bar). Springt direct naar #main, wat élk template heeft. Geen template-edits nodig. */ .tkm-skip-link { position: fixed; top: -100px; left: 12px; z-index: 99999; padding: 10px 18px; background: var(--tkm-color-primary, #E85D1A); color: #FFFFFF; font-weight: 700; border-radius: 8px; text-decoration: none; box-shadow: 0 8px 24px -8px rgba(232,93,26,.45); transition: top .18s ease; } .tkm-skip-link:focus, .tkm-skip-link:focus-visible { top: 12px; outline: 3px solid #FFFFFF; outline-offset: 2px; } /* ────────────────────────────────────────────────────────────────────────── 7f. EMPTY-STATES + 404 (Run 11) - 404-page: vergrootglas-illu boven de "Die pagina bestaat niet" - Favorieten empty: koper-SVG (200px) i.p.v. een kale heart-icoon - Notificaties empty: bell met soft pulse-ring halo ────────────────────────────────────────────────────────────────────────── */ /* 404-page illu — centered boven de titel */ .tkm-404__illu { width: 200px; height: 200px; margin: 0 auto 12px; display: grid; place-items: center; } @media (max-width: 600px) { .tkm-404__illu { width: 160px; height: 160px; } } /* Favorieten empty-state illustration container */ .tkm-favs__empty-illu { width: 220px; min-height: 242px; /* reserveer ruimte vóór JS-injectie */ margin: 0 auto 16px; display: grid; place-items: center; } @media (max-width: 600px) { .tkm-favs__empty-illu { width: 180px; min-height: 198px; } } .tkm-favs__empty h3 { font-family: 'Space Grotesk', sans-serif; font-size: 20px; font-weight: 600; color: var(--tkm-color-ink, #0E1410); margin: 0 0 8px; letter-spacing: -.022em; } /* Notificaties empty: bell krijgt een zachte pulse-ring + halo eromheen */ .tkm-notif__empty-icon--pulse { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 80px; height: 80px; border-radius: 50%; background: var(--tkm-color-primary-soft, #FFF1E7); color: var(--tkm-color-primary, #E85D1A); margin-bottom: 16px; } .tkm-notif__empty-icon--pulse::before { content: ''; position: absolute; inset: 0; border-radius: 50%; box-shadow: 0 0 0 0 rgba(232,93,26,.45); animation: tkm-pulse-ring 2.4s ease-out infinite; pointer-events: none; } /* ────────────────────────────────────────────────────────────────────────── 7g. MOBILE TABBAR + NO-RESULTS POLISH (Run 12) - Tabbar-badge pulst zachtjes oranje wanneer er unread items zijn - Active-icon krijgt micro-bounce wanneer een nieuwe tab actief wordt - RTCL no-result-states krijgen een vriendelijker visual ────────────────────────────────────────────────────────────────────────── */ /* Badge-pulse — alleen wanneer er getal > 0 in zit (CSS-only). De `.tkm-tabbar__badge` wordt door PHP alleen ge-rendered bij badge > 0, dus we hoeven niet extra te targetten. */ .tkm-tabbar__badge { position: absolute; /* Behoudt bestaande positioning uit blocks.css — alleen animatie erbij. */ animation: tkm-badge-pulse 2.4s ease-in-out infinite; } @keyframes tkm-badge-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(232,93,26,.55); } 60% { box-shadow: 0 0 0 8px rgba(232,93,26,0); } } /* Active-icon bounce: pinpoints op moment-van-active. `tkm-bounce-in` keyframe — kort, niet vermoeiend bij snel navigeren. */ @keyframes tkm-bounce-in { 0% { transform: scale(1); } 40% { transform: scale(1.18); } 70% { transform: scale(0.94); } 100% { transform: scale(1); } } .tkm-tabbar__item.is-active .tkm-tabbar__icon > svg { animation: tkm-bounce-in .42s cubic-bezier(.34,1.56,.64,1) both; } /* "Plaatsen"-FAB krijgt een breath-pulse als attention-grabber. Subtiel — niet schreeuwerig. v0.23.201: eigen keyframe i.p.v. de generieke `tkm-breathe`. Reden: de FAB heeft `transform: translateX(-50%)` voor horizontale centering (blocks.css regel 6720). De generieke `tkm-breathe` keyframe zet `transform: scale(...)` — dat overschrijft de hele transform-prop inclusief de translateX, waardoor de FAB 50% naar rechts springt en niet meer in het midden van de tabbar staat. Door translateX(-50%) ÍN elke keyframe te zetten blijft de centering bewaard. */ @keyframes tkm-breathe-fab { 0%, 100% { transform: translateX(-50%) scale(1); } 50% { transform: translateX(-50%) scale(1.02); } } .tkm-tabbar__item.is-primary:not(.is-active) .tkm-tabbar__icon { animation: tkm-breathe-fab 3.5s ease-in-out infinite; } /* ── RTCL no-result-state polish ──────────────────────────────────────── RTCL Pro rendert verschillende no-result containers afhankelijk van context — covers we voor de zekerheid alle bekende class-namen. We geven 'm een vriendelijke layout (illustratie via ::before, generous padding, oranje CTA-vibe). Geen JS — pure CSS. */ .rtcl-no-result, .rtcl-no-result-listing, .no-listing-found, .rtcl-listing-not-found, .rtcl-ajax-filter-result-wrap:empty + .rtcl-no-result { text-align: center; padding: clamp(40px, 8vh, 80px) 24px; background: linear-gradient(135deg, #FFF8F3 0%, #FFFFFF 70%); border: 1px solid #E8E2D3; border-radius: 18px; margin: 24px auto; max-width: 600px; position: relative; } /* Vergrootglas-illustratie boven RTCL's eigen "no result"-tekst. Geen ::after met eigen tekst — dat zou DUBBELEN met wat RTCL al rendert. Wel een soft-orange cirkel met inline vergrootglas-icoon. */ .rtcl-no-result::before, .rtcl-no-result-listing::before, .no-listing-found::before { content: ''; display: block; width: 96px; height: 96px; margin: 0 auto 20px; background-color: #E85D1A; border-radius: 50%; -webkit-mask-image: url("data:image/svg+xml;charset=utf-8,%3Csvg viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m21 21-4.3-4.3'/%3E%3Cpath d='M8 11h6'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml;charset=utf-8,%3Csvg viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m21 21-4.3-4.3'/%3E%3Cpath d='M8 11h6'/%3E%3C/svg%3E"); -webkit-mask-size: 48px; mask-size: 48px; -webkit-mask-position: center; mask-position: center; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; opacity: .85; } /* RTCL's eigen tekst opwaarderen: h-elementen worden display-headings, p-tekst muted. Werkt ongeacht of RTCL

,

of alleen

gebruikt. */ .rtcl-no-result h2, .rtcl-no-result h3, .rtcl-no-result-listing h2, .rtcl-no-result-listing h3, .no-listing-found h2, .no-listing-found h3 { font-family: 'Space Grotesk', sans-serif; font-size: clamp(20px, 3vw, 26px); font-weight: 600; color: var(--tkm-color-ink, #0E1410); margin: 0 0 10px; letter-spacing: -.022em; } .rtcl-no-result p, .rtcl-no-result-listing p, .no-listing-found p { color: var(--tkm-color-muted, #565A54); font-size: 15px; line-height: 1.55; margin: 0 auto; max-width: 42ch; } /* ────────────────────────────────────────────────────────────────────────── 7h. ACCOUNT-DRAWER + KLUS-WIZARD POLISH (Run 13) AccountDrawer is mobile's slide-in menu — elke ingelogde mobile-user ziet 'm continu. Voeg slide-fade entry op items toe (staggered) zodat 'ie levendig opent, micro-feedback op item-hover (chev slide rechts), en pulse op badges met unread items. KlusWizard zit op het account-dashboard; geeft kaarten voor klus-types. Cards krijgen subtiele lift + arrow-slide bij hover, staggered entry op load. ────────────────────────────────────────────────────────────────────────── */ /* ── AccountDrawer entry: items komen 1-voor-1 binnen wanneer drawer opent. `body.tkm-account-open` class wordt toegevoegd door JS — we hangen onze animation aan dat moment. */ body.tkm-account-open .tkm-account-drawer__profile, body.tkm-account-open .tkm-account-drawer__stats, body.tkm-account-open .tkm-account-drawer__section { animation: tkm-slide-fade .42s cubic-bezier(.21,.61,.35,1) both; } body.tkm-account-open .tkm-account-drawer__profile { animation-delay: .04s; } body.tkm-account-open .tkm-account-drawer__stats { animation-delay: .10s; } body.tkm-account-open .tkm-account-drawer__section:nth-of-type(1) { animation-delay: .16s; } body.tkm-account-open .tkm-account-drawer__section:nth-of-type(2) { animation-delay: .22s; } body.tkm-account-open .tkm-account-drawer__section:nth-of-type(3) { animation-delay: .28s; } body.tkm-account-open .tkm-account-drawer__section:nth-of-type(4) { animation-delay: .34s; } /* Item-hover: chev pijl glijdt 3px rechts, item-icon subtiel pulserend. Pure CSS-transitions, geen JS. */ .tkm-account-drawer__item { transition: background .18s ease, transform .18s ease; } .tkm-account-drawer__item:hover { transform: translateX(2px); } .tkm-account-drawer__chev { transition: transform .22s ease, color .18s ease; } .tkm-account-drawer__item:hover .tkm-account-drawer__chev { transform: translateX(4px); color: var(--tkm-color-primary, #E85D1A); } .tkm-account-drawer__item-icon { transition: transform .22s ease; } .tkm-account-drawer__item:hover .tkm-account-drawer__item-icon { transform: scale(1.08); } /* Badge-pulse op unread badges in de drawer — zelfde behavior als tabbar. */ .tkm-account-drawer__badge { animation: tkm-badge-pulse 2.4s ease-in-out infinite; } /* Stats-strip cards: subtle hover + active touch-feedback */ .tkm-account-drawer__stat { transition: transform .18s ease, box-shadow .22s ease, border-color .22s ease; } .tkm-account-drawer__stat:hover { transform: translateY(-2px); border-color: var(--tkm-color-primary, #E85D1A); } /* Profile-card hover — subtle lift + oranje accent on the CTA */ .tkm-account-drawer__profile { transition: transform .18s ease, box-shadow .22s ease; } .tkm-account-drawer__profile:hover { transform: translateY(-1px); } .tkm-account-drawer__profile-cta { transition: color .18s ease, transform .22s ease; } .tkm-account-drawer__profile:hover .tkm-account-drawer__profile-cta { transform: translateX(3px); } /* ── KlusWizard cards: staggered entry + hover-lift + arrow-slide ─────── */ .tkm-klus__grid > li { animation: tkm-slide-fade .50s cubic-bezier(.21,.61,.35,1) both; } .tkm-klus__grid > li:nth-child(1) { animation-delay: .00s; } .tkm-klus__grid > li:nth-child(2) { animation-delay: .06s; } .tkm-klus__grid > li:nth-child(3) { animation-delay: .12s; } .tkm-klus__grid > li:nth-child(4) { animation-delay: .18s; } .tkm-klus__grid > li:nth-child(5) { animation-delay: .24s; } .tkm-klus__grid > li:nth-child(6) { animation-delay: .30s; } .tkm-klus__grid > li:nth-child(n+7){ animation-delay: .36s; } .tkm-klus__card { transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease; } .tkm-klus__card:hover { transform: translateY(-3px); border-color: var(--tkm-color-primary, #E85D1A); box-shadow: 0 14px 32px -14px rgba(232,93,26,.18); } .tkm-klus__card-arrow { transition: transform .22s ease, color .22s ease; } .tkm-klus__card:hover .tkm-klus__card-arrow { transform: translateX(4px); color: var(--tkm-color-primary, #E85D1A); } /* "Andere klus kiezen"-reset-link — subtle hover */ .tkm-klus__reset { transition: color .18s ease; } .tkm-klus__reset:hover { color: var(--tkm-color-primary, #E85D1A); } .tkm-klus__reset svg { transition: transform .35s ease; } .tkm-klus__reset:hover svg { transform: rotate(-90deg); /* het cirkel-pijl-icoon roteert speels */ } /* ────────────────────────────────────────────────────────────────────────── 7i. SITE-FOOTER POLISH (Run 14) Footer komt op élke pagina. Subtiele hover-glides + scroll-reveal-entry geven 'm karakter zonder dat 't druk wordt. ────────────────────────────────────────────────────────────────────────── */ /* Footer link-glide: slide 3px rechts + oranje underline op hover/focus. Werkt zonder de bestaande textColor-rule te breken (additieve transform). */ .tkm-footer__col a { display: inline-block; position: relative; transition: color .18s ease, transform .22s ease, text-decoration-color .22s ease; } .tkm-footer__col a:hover, .tkm-footer__col a:focus-visible { transform: translateX(3px); text-decoration-color: var(--tkm-color-primary, #E85D1A); text-decoration-thickness: 2px; } /* Cities-list pill-hover: subtle scale-up + oranje accent */ .tkm-footer__cities-list a { transition: transform .22s ease, background .22s ease, color .18s ease; } .tkm-footer__cities-list a:hover, .tkm-footer__cities-list a:focus-visible { transform: translateY(-2px) scale(1.04); background: rgba(232,93,26,.16) !important; color: #FFF1E7 !important; } /* Footer-brand block (logo + tagline) krijgt een reveal-on-scroll entry, maar via een `body.tkm-body:not(.no-footer-reveal)` cascade — niet afhankelijk van een class die je per pagina moet zetten. We hangen 't aan `.tkm-footer__brand` zelf via `tkm-slide-fade` zodra de footer in beeld komt. */ @keyframes tkm-footer-rise { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } @supports (animation-timeline: view()) { /* Moderne browsers (Chrome 115+, Safari 18+): scroll-driven animation */ .tkm-footer__brand, .tkm-footer__col, .tkm-footer__cities-label, .tkm-footer__bottom { animation: tkm-footer-rise linear both; animation-timeline: view(); animation-range: entry 0% entry 35%; } } /* Fallback (oudere browsers): direct zichtbaar, geen animation. Geen risk. */ /* v0.24 (Run 21): footer-column-h4 wordt nu een inline icon-pill + label. De oude ::before left-bar is hier overbodig — de icon doet z'n werk. */ .tkm-footer__col h4 { position: relative; padding-left: 0; display: flex; align-items: center; gap: 8px; } .tkm-footer__col h4::before { content: none; } .tkm-footer__col-icon { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 7px; background: rgba(232, 93, 26, .14); color: var(--tkm-color-primary, #E85D1A); flex-shrink: 0; } /* ── Brand-col CTAs (Run 21) ─────────────────────────────────────────── */ .tkm-footer__brand-ctas { display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0 18px; } .tkm-footer__brand-cta { display: inline-flex; align-items: center; gap: 6px; padding: 10px 14px; border-radius: 9px; font-size: 13.5px; font-weight: 600; text-decoration: none; transition: background .18s ease, color .18s ease, transform .18s ease, border-color .18s ease; } .tkm-footer__brand-cta--primary { background: var(--tkm-color-primary, #E85D1A); color: #FFFFFF; box-shadow: 0 6px 16px -6px rgba(232,93,26,.45); } .tkm-footer__brand-cta--primary:hover { background: var(--tkm-color-primary-hover, #C94A10); transform: translateY(-1px); } .tkm-footer__brand-cta--ghost { background: transparent; color: rgba(246,243,238,.9); border: 1.5px solid rgba(246,243,238,.18); } .tkm-footer__brand-cta--ghost:hover { border-color: rgba(246,243,238,.4); color: #FFFFFF; } /* ── Trust-block met sterren (Run 21) ────────────────────────────────── */ .tkm-footer__trust { display: flex; align-items: center; gap: 10px; margin: 0 0 18px; padding: 10px 12px; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08); border-radius: 10px; } .tkm-footer__trust-stars { display: inline-flex; align-items: center; gap: 1px; color: #FFB400; /* TP-stijl warm geel-oranje */ flex-shrink: 0; } .tkm-footer__trust-text { display: flex; flex-direction: column; gap: 1px; min-width: 0; } .tkm-footer__trust-text strong { font-size: 13px; font-weight: 700; color: rgba(246,243,238,.95); line-height: 1.2; } .tkm-footer__trust-text small { font-size: 11px; color: rgba(246,243,238,.65); line-height: 1.3; } /* ────────────────────────────────────────────────────────────────────────── 7j. /HOE-HET-WERKT/ HERO-OVERHAUL (Run 15 — 1/3) - Horizontale flow-scene met 3 SVG-personen + dotted-march arrows - Stat-band met animated count-up - Brand-story sectie met 3 pillar-cards ────────────────────────────────────────────────────────────────────────── */ /* ── Hero flow-stage: 3 personen naast elkaar verbonden via dotted arrows die marcheren (animeren) naar rechts/links voor "flow"-gevoel. */ .tkm-hiw-hero__flow { position: relative; z-index: 1; display: flex; justify-content: center; align-items: center; padding: 12px 0; } .tkm-hiw-hero__flow-stage { display: grid; grid-template-columns: minmax(0, 160px) /* persoon 1 */ minmax(40px, 1fr) /* arrow 1 */ minmax(0, 200px) /* persoon 2 (handshake) */ minmax(40px, 1fr) /* arrow 2 */ minmax(0, 160px) /* persoon 3 */; align-items: center; gap: 0; width: 100%; max-width: 760px; } .tkm-hiw-hero__flow-step { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; } .tkm-hiw-hero__flow-step--2 { z-index: 2; } /* handshake centraal, boven arrows */ .tkm-hiw-hero__flow-fig { width: 180px; min-height: 198px; /* 180 × 1.1 aspect */ display: grid; place-items: center; } .tkm-hiw-hero__flow-fig--big { width: 220px; min-height: 220px; /* handshake is 1:1 */ } .tkm-hiw-hero__flow-label { display: inline-flex; align-items: center; gap: 10px; margin-top: 8px; padding: 10px 16px; background: #FFFFFF; border: 1px solid #E8E2D3; border-radius: 999px; box-shadow: 0 8px 22px -10px rgba(14,20,16,.18); } .tkm-hiw-hero__flow-label--accent { border-color: #2F7D3B; background: linear-gradient(180deg, #FFFFFF 0%, #E6F2E9 100%); } .tkm-hiw-hero__flow-num { flex-shrink: 0; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: #E85D1A; color: #FFFFFF; font-family: 'Space Grotesk', sans-serif; font-weight: 700; font-size: 13px; letter-spacing: -.02em; } .tkm-hiw-hero__flow-label--accent .tkm-hiw-hero__flow-num { background: #2F7D3B; } .tkm-hiw-hero__flow-text { text-align: left; display: flex; flex-direction: column; line-height: 1.15; } .tkm-hiw-hero__flow-text strong { font-size: 13px; font-weight: 700; color: #0E1410; letter-spacing: -.01em; } .tkm-hiw-hero__flow-text small { font-size: 11px; color: #565A54; margin-top: 2px; letter-spacing: 0; } /* Dotted-march arrows tussen de stappen — dasharray-animation */ .tkm-hiw-hero__flow-arrow { width: 100%; height: 80px; align-self: center; } .tkm-hiw-hero__flow-arrow path { animation: tkm-dotted-march 1.6s linear infinite; } @keyframes tkm-dotted-march { 0% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: -36px; } } /* Mobile: stack vertical */ @media (max-width: 760px) { .tkm-hiw-hero__flow-stage { grid-template-columns: 1fr; gap: 4px; } .tkm-hiw-hero__flow-arrow { display: none; /* op mobile zijn de arrows storend, stap-nummers houden flow */ } .tkm-hiw-hero__flow-fig { width: 160px; min-height: 176px; } .tkm-hiw-hero__flow-fig--big { width: 180px; min-height: 180px; } } /* ── Stat-band onder de hero ─────────────────────────────────────────── */ .tkm-hiw-stats { padding: 32px 0; background: linear-gradient(180deg, #FFFFFF 0%, #F6F3EE 100%); border-block: 1px solid #E8E2D3; } .tkm-hiw-stats__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; list-style: none; margin: 0; padding: 0; } @media (max-width: 720px) { .tkm-hiw-stats__grid { grid-template-columns: repeat(2, 1fr); } } .tkm-hiw-stats__item { text-align: center; padding: 12px 8px; } .tkm-hiw-stats__num { display: block; font-family: 'Space Grotesk', sans-serif; font-weight: 700; font-size: clamp(28px, 4vw, 40px); line-height: 1; color: #E85D1A; letter-spacing: -.022em; font-feature-settings: "tnum"; } .tkm-hiw-stats__lbl { display: block; margin-top: 6px; font-size: 12.5px; font-weight: 600; color: #565A54; text-transform: uppercase; letter-spacing: .08em; } /* ── Brand-story sectie ──────────────────────────────────────────────── */ .tkm-hiw-story { background: #FFFFFF; } .tkm-hiw-story__inner { display: grid; grid-template-columns: 1fr; gap: 40px; align-items: start; } @media (min-width: 900px) { .tkm-hiw-story__inner { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 64px; } } .tkm-hiw-story__copy h2 { font-family: 'Space Grotesk', sans-serif; font-size: clamp(28px, 3.6vw, 44px); font-weight: 600; line-height: 1.1; letter-spacing: -.022em; color: #0E1410; margin: 12px 0 18px; } .tkm-hiw-story__accent { color: #E85D1A; white-space: nowrap; } .tkm-hiw-story__lead { font-size: 16px; color: #3A3A3A; line-height: 1.6; margin: 0 0 14px; max-width: 56ch; } .tkm-hiw-story__lead strong { color: #0E1410; } .tkm-hiw-story__pillars { display: flex; flex-direction: column; gap: 16px; } .tkm-hiw-story__pillar { background: #FAF8F4; border: 1px solid #E8E2D3; border-radius: 14px; padding: 20px 22px; display: flex; flex-direction: column; gap: 10px; transition: transform .22s ease, box-shadow .22s ease; } .tkm-hiw-story__pillar:hover { transform: translateY(-3px); box-shadow: 0 16px 36px -16px rgba(14,20,16,.18); } .tkm-hiw-story__pillar h3 { margin: 0; font-family: 'Space Grotesk', sans-serif; font-size: 17px; font-weight: 600; color: #0E1410; letter-spacing: -.022em; } .tkm-hiw-story__pillar p { margin: 0; font-size: 14px; color: #565A54; line-height: 1.55; } .tkm-hiw-story__pillar-icon { display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; border-radius: 11px; background: #FFF1E7; color: #E85D1A; } .tkm-hiw-story__pillar-icon--accent { background: #E6F2E9; color: #2F7D3B; } /* ────────────────────────────────────────────────────────────────────────── 7k. /HOE-HET-WERKT/ DEEP-DIVE + CONCERNS (Run 16 — 2/3) - Rijke 2-col scrollytelling met phases + callouts (vervangt simpele split) - "Wat als 't misgaat?" concern-grid met 4 eerlijke cards ────────────────────────────────────────────────────────────────────────── */ /* Deep-dive 2-koloms layout — wit / cream alternerend per col */ .tkm-hiw-deep { background: #FFFFFF; } .tkm-hiw-deep__grid { display: grid; grid-template-columns: 1fr; gap: 32px; margin-top: 40px; } @media (min-width: 980px) { .tkm-hiw-deep__grid { grid-template-columns: 1fr 1fr; gap: 40px; } } .tkm-hiw-deep__col { background: #FFFFFF; border: 1px solid #E8E2D3; border-radius: 20px; padding: clamp(24px, 4vw, 36px); display: flex; flex-direction: column; gap: 24px; position: relative; overflow: hidden; min-width: 0; } .tkm-hiw-deep__col--buy { background: linear-gradient(180deg, #FFFFFF 0%, #FFF8F1 100%); } .tkm-hiw-deep__col--sell { background: linear-gradient(180deg, #FFFFFF 0%, #F2F8F0 100%); } /* Col-header */ .tkm-hiw-deep__head { display: flex; flex-direction: column; gap: 6px; } .tkm-hiw-deep__icon { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: 12px; background: #FFF1E7; color: #E85D1A; margin-bottom: 6px; } .tkm-hiw-deep__icon--accent { background: #E6F2E9; color: #2F7D3B; } .tkm-hiw-deep__head h3 { margin: 4px 0 0; font-family: 'Space Grotesk', sans-serif; font-size: clamp(22px, 2.5vw, 28px); font-weight: 600; line-height: 1.15; color: #0E1410; letter-spacing: -.022em; } /* Phase-list */ .tkm-hiw-deep__phases { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 20px; counter-reset: phase; } .tkm-hiw-deep__phase { display: grid; grid-template-columns: 1fr; gap: 12px; padding: 18px; background: #FFFFFF; border: 1px solid #E8E2D3; border-radius: 14px; min-width: 0; } @media (min-width: 600px) { .tkm-hiw-deep__phase { grid-template-columns: minmax(0, 1fr) 130px; align-items: start; } .tkm-hiw-deep__phase-illu { grid-row: 1 / span 3; grid-column: 2; } .tkm-hiw-deep__phase-head { grid-column: 1; } .tkm-hiw-deep__phase > p { grid-column: 1; } .tkm-hiw-deep__phase > details { grid-column: 1 / -1; } } .tkm-hiw-deep__phase-head { display: flex; align-items: center; gap: 12px; } .tkm-hiw-deep__phase-num { flex-shrink: 0; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: #E85D1A; color: #FFFFFF; font-family: 'Space Grotesk', sans-serif; font-weight: 700; font-size: 15px; letter-spacing: -.02em; } .tkm-hiw-deep__phase-num--accent { background: #2F7D3B; } .tkm-hiw-deep__phase-head h4 { margin: 0; font-family: 'Space Grotesk', sans-serif; font-size: 17px; font-weight: 600; color: #0E1410; line-height: 1.25; letter-spacing: -.022em; } .tkm-hiw-deep__phase-illu { width: 110px; height: 110px; display: grid; place-items: center; justify-self: center; } .tkm-hiw-deep__phase > p { margin: 0; font-size: 14.5px; color: #3A3A3A; line-height: 1.55; } .tkm-hiw-deep__phase > p strong { color: #0E1410; } /* Details/summary (collapsible tips) */ .tkm-hiw-deep__details { margin-top: 6px; border-top: 1px solid #F0EBE0; padding-top: 12px; } .tkm-hiw-deep__details summary { cursor: pointer; font-size: 13px; font-weight: 600; color: #E85D1A; list-style: none; display: inline-flex; align-items: center; gap: 6px; transition: color .18s ease; } .tkm-hiw-deep__details summary::-webkit-details-marker { display: none; } .tkm-hiw-deep__details summary::before { content: '+'; display: inline-block; width: 16px; height: 16px; border-radius: 50%; background: #FFF1E7; color: #E85D1A; text-align: center; line-height: 16px; font-weight: 700; font-size: 14px; transition: transform .22s ease, background .18s ease; } .tkm-hiw-deep__details[open] summary::before { transform: rotate(45deg); background: #E85D1A; color: #FFFFFF; } .tkm-hiw-deep__details ul { margin: 10px 0 0; padding-left: 20px; font-size: 13.5px; color: #3A3A3A; line-height: 1.55; } .tkm-hiw-deep__details ul li { margin: 4px 0; } .tkm-hiw-deep__details ul li strong { color: #0E1410; } /* Callout-box per col */ .tkm-hiw-deep__callout { display: flex; gap: 12px; align-items: flex-start; padding: 16px 18px; background: #FFF1E7; border-left: 3px solid #E85D1A; border-radius: 0 12px 12px 0; } .tkm-hiw-deep__callout--accent { background: #E6F2E9; border-left-color: #2F7D3B; } .tkm-hiw-deep__callout-icon { flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; color: #E85D1A; } .tkm-hiw-deep__callout--accent .tkm-hiw-deep__callout-icon { color: #2F7D3B; } .tkm-hiw-deep__callout strong { display: block; font-size: 13px; font-weight: 700; color: #0E1410; margin-bottom: 4px; letter-spacing: -.01em; } .tkm-hiw-deep__callout p { margin: 0; font-size: 13.5px; color: #3A3A3A; line-height: 1.55; } /* Col-CTA */ .tkm-hiw-deep__cta { align-self: flex-start; gap: 8px; } /* ── "Wat als 't misgaat?" concern-grid ──────────────────────────────── */ .tkm-hiw-concerns { background: linear-gradient(180deg, #FFFFFF 0%, #FAF7F2 100%); } .tkm-hiw-concerns__grid { display: grid; grid-template-columns: 1fr; gap: 16px; margin-top: 32px; } @media (min-width: 720px) { .tkm-hiw-concerns__grid { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1100px) { .tkm-hiw-concerns__grid { grid-template-columns: repeat(4, 1fr); } } .tkm-hiw-concerns__card { background: #FFFFFF; border: 1px solid #E8E2D3; border-radius: 14px; padding: 22px; display: flex; flex-direction: column; gap: 10px; transition: transform .22s ease, box-shadow .22s ease; min-width: 0; } .tkm-hiw-concerns__card:hover { transform: translateY(-3px); box-shadow: 0 16px 36px -16px rgba(14,20,16,.18); } .tkm-hiw-concerns__icon { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 11px; background: #E6F2E9; color: #2F7D3B; } .tkm-hiw-concerns__icon--warn { background: #FFF1E7; color: #E85D1A; } .tkm-hiw-concerns__card h3 { margin: 0; font-family: 'Space Grotesk', sans-serif; font-size: 16px; font-weight: 600; color: #0E1410; line-height: 1.25; letter-spacing: -.022em; } .tkm-hiw-concerns__card p { margin: 0; font-size: 13.5px; color: #3A3A3A; line-height: 1.55; } .tkm-hiw-concerns__card p strong { color: #0E1410; } .tkm-hiw-concerns__foot { text-align: center; margin-top: 28px; font-size: 14px; color: #565A54; } .tkm-hiw-concerns__foot a { color: #E85D1A; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; } /* ────────────────────────────────────────────────────────────────────────── 7l. /HOE-HET-WERKT/ COMPARE + TESTIMONIALS + FINAL CTA (Run 17 — 3/3) - Vergelijkingstabel TKM vs alternatieven, TKM-col highlighted - Testimonials met SVG-personen als avatar - Dual-path final CTA met 2 grote keuzes ────────────────────────────────────────────────────────────────────────── */ /* Vergelijkingstabel */ .tkm-hiw-compare { background: #FFFFFF; } .tkm-hiw-compare__wrap { margin-top: 32px; overflow-x: auto; /* horizontal scroll op mobiel */ -webkit-overflow-scrolling: touch; border: 1px solid #E8E2D3; border-radius: 18px; background: #FFFFFF; box-shadow: 0 4px 12px -6px rgba(14,20,16,.06); } .tkm-hiw-compare__table { width: 100%; min-width: 760px; /* dwingt h-scroll op smal scherm */ border-collapse: separate; border-spacing: 0; text-align: left; font-size: 14px; } .tkm-hiw-compare__table thead th { background: #FAF8F4; padding: 18px 16px; font-family: 'Space Grotesk', sans-serif; font-weight: 600; color: #0E1410; vertical-align: top; border-bottom: 2px solid #E8E2D3; position: relative; } .tkm-hiw-compare__table thead th strong { display: block; font-size: 14.5px; line-height: 1.25; margin-bottom: 2px; } .tkm-hiw-compare__table thead th small { display: block; font-size: 11.5px; color: #565A54; font-weight: 500; letter-spacing: 0; } .tkm-hiw-compare__feature-head { background: #FFFFFF !important; width: 220px; } .tkm-hiw-compare__col-tkm { background: linear-gradient(180deg, #FFF1E7 0%, #FFF8F1 100%) !important; position: relative; } .tkm-hiw-compare__col-tkm strong { color: #E85D1A; } .tkm-hiw-compare__badge { display: block; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: #FFFFFF; background: #E85D1A; padding: 3px 10px; border-radius: 999px; margin-bottom: 6px; width: max-content; } .tkm-hiw-compare__table tbody th { padding: 14px 16px; font-weight: 600; color: #3A3A3A; background: #FAF8F4; border-bottom: 1px solid #F0EBE0; vertical-align: top; } .tkm-hiw-compare__table tbody td { padding: 14px 16px; border-bottom: 1px solid #F0EBE0; color: #565A54; vertical-align: top; } .tkm-hiw-compare__table tbody td.is-tkm { background: rgba(255, 241, 231, .55); color: #0E1410; font-weight: 500; } .tkm-hiw-compare__table tbody td.is-tkm strong { color: #E85D1A; } .tkm-hiw-compare__table tbody tr:last-child td, .tkm-hiw-compare__table tbody tr:last-child th { border-bottom: none; } .tkm-hiw-compare__yes, .tkm-hiw-compare__no { display: inline-flex; align-items: center; font-weight: 600; } .tkm-hiw-compare__yes { color: #2F7D3B; } .tkm-hiw-compare__no { color: #B3261E; } .tkm-hiw-compare__foot { text-align: center; margin-top: 20px; font-size: 13.5px; color: #565A54; } .tkm-hiw-compare__foot strong { color: #0E1410; } .tkm-hiw-compare__foot em { font-style: italic; color: #565A54; } /* ── Testimonials ─────────────────────────────────────────────────────── */ .tkm-hiw-stories { background: linear-gradient(180deg, #FAF7F2 0%, #FFFFFF 100%); } .tkm-hiw-stories__grid { display: grid; grid-template-columns: 1fr; gap: 20px; margin-top: 32px; } @media (min-width: 760px) { .tkm-hiw-stories__grid { grid-template-columns: repeat(3, 1fr); } } .tkm-hiw-stories__card { background: #FFFFFF; border: 1px solid #E8E2D3; border-radius: 16px; padding: 24px; display: flex; flex-direction: column; gap: 16px; transition: transform .22s ease, box-shadow .22s ease; min-width: 0; position: relative; } .tkm-hiw-stories__card::before { content: '"'; position: absolute; top: 14px; right: 22px; font-family: 'Space Grotesk', serif; font-size: 56px; line-height: 1; color: #FFF1E7; font-weight: 700; } .tkm-hiw-stories__card:hover { transform: translateY(-4px); box-shadow: 0 18px 40px -18px rgba(14,20,16,.18); } .tkm-hiw-stories__avatar { width: 90px; min-height: 99px; /* 90 × 1.1 */ display: grid; place-items: center; } .tkm-hiw-stories__avatar--big { width: 110px; min-height: 110px; } .tkm-hiw-stories__quote { margin: 0; font-size: 15px; color: #0E1410; line-height: 1.55; font-style: normal; } .tkm-hiw-stories__quote strong { color: #E85D1A; } .tkm-hiw-stories__by { margin-top: auto; padding-top: 12px; border-top: 1px solid #F0EBE0; font-style: normal; } .tkm-hiw-stories__by strong { display: block; font-size: 14px; color: #0E1410; font-weight: 600; } .tkm-hiw-stories__by span { display: block; font-size: 12.5px; color: #565A54; margin-top: 2px; } .tkm-hiw-stories__badge { display: inline-block; margin-top: 6px; font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: #2F7D3B; background: #E6F2E9; padding: 2px 8px; border-radius: 999px; } /* ── Final dual-path CTA ──────────────────────────────────────────────── */ .tkm-hiw-final { background: #FFFFFF; position: relative; overflow: hidden; } .tkm-hiw-final::before { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at 15% 25%, rgba(232,93,26,.07) 0%, transparent 45%), radial-gradient(circle at 85% 75%, rgba(47,125,59,.06) 0%, transparent 45%); pointer-events: none; z-index: 0; } .tkm-hiw-final > .tkm-container { position: relative; z-index: 1; } .tkm-hiw-final__grid { display: grid; grid-template-columns: 1fr; gap: 20px; margin-top: 36px; } @media (min-width: 820px) { .tkm-hiw-final__grid { grid-template-columns: 1fr 1fr; gap: 28px; } } .tkm-hiw-final__card { display: flex; flex-direction: column; gap: 16px; background: #FFFFFF; border: 1.5px solid #E8E2D3; border-radius: 22px; padding: 36px 32px; text-decoration: none; transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease; min-width: 0; position: relative; overflow: hidden; } .tkm-hiw-final__card--buy { background: linear-gradient(180deg, #FFFFFF 0%, #FFF1E7 100%); } .tkm-hiw-final__card--sell { background: linear-gradient(180deg, #FFFFFF 0%, #E6F2E9 100%); } .tkm-hiw-final__card:hover { transform: translateY(-6px); box-shadow: 0 24px 56px -22px rgba(14,20,16,.22); } .tkm-hiw-final__card--buy:hover { border-color: #E85D1A; } .tkm-hiw-final__card--sell:hover { border-color: #2F7D3B; } .tkm-hiw-final__icon { display: inline-flex; align-items: center; justify-content: center; width: 64px; height: 64px; border-radius: 16px; background: #FFFFFF; color: #E85D1A; box-shadow: 0 8px 22px -10px rgba(232,93,26,.35); } .tkm-hiw-final__icon--accent { color: #2F7D3B; box-shadow: 0 8px 22px -10px rgba(47,125,59,.35); } .tkm-hiw-final__eyebrow { display: inline-block; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .12em; color: #565A54; } .tkm-hiw-final__card--sell .tkm-hiw-final__eyebrow { color: #2F7D3B; } .tkm-hiw-final__card--buy .tkm-hiw-final__eyebrow { color: #E85D1A; } .tkm-hiw-final__card h3 { margin: 0; font-family: 'Space Grotesk', sans-serif; font-size: clamp(26px, 3vw, 32px); font-weight: 600; line-height: 1.1; color: #0E1410; letter-spacing: -.022em; } .tkm-hiw-final__card > p { margin: 0; font-size: 15px; color: #3A3A3A; line-height: 1.55; } .tkm-hiw-final__perks { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; } .tkm-hiw-final__perks li { position: relative; padding-left: 26px; font-size: 14px; color: #3A3A3A; line-height: 1.5; } .tkm-hiw-final__perks li::before { content: '✓'; position: absolute; left: 0; top: 1px; display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; border-radius: 50%; background: #2F7D3B; color: #FFFFFF; font-size: 11px; font-weight: 700; } .tkm-hiw-final__cta { margin-top: auto; display: inline-flex; align-items: center; gap: 8px; font-family: 'Space Grotesk', sans-serif; font-size: 16px; font-weight: 600; color: #0E1410; letter-spacing: -.01em; padding-top: 4px; transition: gap .22s ease, color .18s ease; } .tkm-hiw-final__card:hover .tkm-hiw-final__cta { gap: 14px; } .tkm-hiw-final__card--buy:hover .tkm-hiw-final__cta { color: #E85D1A; } .tkm-hiw-final__card--sell:hover .tkm-hiw-final__cta { color: #2F7D3B; } .tkm-hiw-final__foot { text-align: center; margin-top: 32px; font-size: 14px; color: #565A54; } .tkm-hiw-final__foot a { color: #E85D1A; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; } /* ────────────────────────────────────────────────────────────────────────── 8. HEADER NAV-GROUPS + DROPDOWNS (Run 18 — 1/5) GVM-stijl dropdown-systeem voor de hoofdnav. Trigger is een button met chevron die roteert. Drop-panel is absolute-positioned, opens op hover (desktop) + click-toggle (touch). Items hebben icon-pill + label + sub. ────────────────────────────────────────────────────────────────────────── */ .tkm-nav-group { position: relative; display: inline-block; } .tkm-nav-group__trigger { display: inline-flex; align-items: center; gap: 4px; padding: 8px 12px; border: 0; background: transparent; font: inherit; font-size: 15.5px; font-weight: 600; letter-spacing: -0.005em; color: var(--tkm-color-ink, #0E1410); cursor: pointer; border-radius: 8px; white-space: nowrap; text-decoration: none; transition: background .14s ease, color .14s ease; } .tkm-nav-group__trigger:hover, .tkm-nav-group__trigger[aria-expanded="true"], .tkm-nav-group.is-active .tkm-nav-group__trigger { background: var(--tkm-color-primary-soft, #FFF1E7); color: var(--tkm-color-primary, #E85D1A); } /* v0.23.226: trigger is sinds v0.23.225 een ipv