/* ===================================================================== digit-motion.css ยท Animatielaag voor Dig'IT --------------------------------------------------------------------- Additief bovenop style.css. Raakt de bestaande styling niet aan. Inladen NA style.css. Werkt enkel als digit-motion.js draait (dat zet de class .motion-ready op ), dus zonder JS blijft alles gewoon zichtbaar -> progressive enhancement, geen kapotte site. ===================================================================== */ /* --------------------------------------------------------------------- 1. SCROLL REVEAL --------------------------------------------------------------------- .reveal wordt door JS op de doel-elementen gezet. Beginstaat: onzichtbaar + 22px lager. Zodra ze in beeld komen krijgen ze .in-view en glijden ze op hun plek. De cubic-bezier geeft een zachte "ease-out" -> snel starten, traag uitlopen = natuurlijk. --------------------------------------------------------------------- */ html.motion-ready .reveal { opacity: 0; transform: translateY(22px); transition: opacity 0.7s cubic-bezier(0.16, 0.84, 0.44, 1), transform 0.7s cubic-bezier(0.16, 0.84, 0.44, 1); /* will-change vertelt de browser vooraf welke properties gaan veranderen, zodat hij ze op de GPU kan zetten = vloeiender */ will-change: opacity, transform; } html.motion-ready .reveal.in-view { opacity: 1; transform: none; } /* --------------------------------------------------------------------- 2. HOVER-INTERACTIES OP KAARTEN --------------------------------------------------------------------- Laadt na style.css, dus dit verfijnt de bestaande .card:hover. Liften + diepere schaduw + accent-rand = de kaart "komt naar je toe". --------------------------------------------------------------------- */ .card, .grid-3 .card { transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease; } .card:hover, .grid-3 .card:hover { transform: translateY(-6px); box-shadow: 0 18px 40px rgba(0, 0, 0, 0.12); border-color: var(--accent-soft); } /* --------------------------------------------------------------------- 3. BUTTONS: lift + glans-sweep --------------------------------------------------------------------- De primaire knop krijgt een lichte lift en een glow in het accent. De ::after is een diagonale glans die over de knop veegt bij hover. --------------------------------------------------------------------- */ .btn-primary, .nav-cta { position: relative; overflow: hidden; transition: transform 0.25s ease, box-shadow 0.25s ease; } .btn-primary:hover, .nav-cta:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(0, 191, 166, 0.35); /* var(--accent) op 35% */ } .btn-primary::after, .nav-cta::after { content: ""; position: absolute; top: 0; left: -120%; width: 60%; height: 100%; background: linear-gradient( 100deg, transparent, rgba(255, 255, 255, 0.45), transparent ); transform: skewX(-18deg); transition: left 0.6s ease; pointer-events: none; } .btn-primary:hover::after, .nav-cta:hover::after { left: 140%; } /* Ghost-knop: rand kleurt mee naar accent */ .btn-ghost { transition: border-color 0.25s ease, color 0.25s ease, transform 0.25s ease; } .btn-ghost:hover { transform: translateY(-2px); border-color: var(--accent); color: var(--accent); } /* --------------------------------------------------------------------- 4. METRIC-ICONEN: subtiele reactie bij hover op de hero-card --------------------------------------------------------------------- */ .metric i { display: inline-block; transition: transform 0.3s ease, color 0.3s ease; } .metric:hover i { transform: scale(1.18) translateY(-2px); color: var(--accent); } /* --------------------------------------------------------------------- 5. PILLS (de checklist-bolletjes in de hero) --------------------------------------------------------------------- */ .pill { transition: transform 0.25s ease, box-shadow 0.25s ease; } .pill:hover { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08); } /* --------------------------------------------------------------------- 6. HEADER: verstrakt bij scrollen --------------------------------------------------------------------- JS zet .scrolled op
zodra je >12px naar beneden gaat. De nav wordt compacter en krijgt een schaduw -> "vastgepind" gevoel. --------------------------------------------------------------------- */ header { transition: box-shadow 0.3s ease, background 0.3s ease; } header.scrolled { box-shadow: 0 6px 24px rgba(0, 0, 0, 0.08); } header.scrolled .nav { padding-top: 8px; padding-bottom: 8px; transition: padding 0.3s ease; } /* --------------------------------------------------------------------- 7. HERO-CARD: heel trage "float" zodat het blok ademt --------------------------------------------------------------------- Een paar pixels op en neer, traag genoeg om niet op te vallen maar net genoeg om het beeld levend te houden. Pauzeert bij hover. --------------------------------------------------------------------- */ @keyframes digit-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-7px); } } html.motion-ready .hero-card.in-view { animation: digit-float 6s ease-in-out infinite; animation-delay: 1s; /* pas starten nadat de reveal klaar is */ } .hero-card:hover { animation-play-state: paused; } /* --------------------------------------------------------------------- 8. LINK-ONDERLIJN die uitschuift in de navigatie --------------------------------------------------------------------- */ .nav-links a { position: relative; } .nav-links a::after { content: ""; position: absolute; left: 0; bottom: -4px; width: 100%; height: 2px; background: var(--accent); transform: scaleX(0); transform-origin: left; transition: transform 0.3s ease; } .nav-links a:hover::after { transform: scaleX(1); } /* ===================================================================== 9. TOEGANKELIJKHEID: respecteer "minder beweging" --------------------------------------------------------------------- Wie in zijn OS reduced-motion aan heeft (vaak om medische redenen, denk aan migraine of evenwichtsstoornissen) krijgt ALLES statisch. Dit is geen optie, dit hoort gewoon zo. JS slaat de reveal-logica dan ook over; deze regel is de vangnet voor de CSS-only stukken. ===================================================================== */ @media (prefers-reduced-motion: reduce) { html.motion-ready .reveal { opacity: 1 !important; transform: none !important; transition: none !important; } html.motion-ready .hero-card.in-view { animation: none !important; } .btn-primary::after, .nav-cta::after { display: none !important; } }