/* ═══════════════════════════════════════════════════════════════════════ IT LIVE DESIGN ENGINE v3.0 — Master Component & Animation Library ═══════════════════════════════════════════════════════════════════════ GEBRUIK: Laad dit bestand in ELKE gegenereerde site. De AI/Swarm selecteert welke features actief zijn via: Bevat: 60+ CSS classes, 8 categorieën, responsive, dark-mode ready. ═══════════════════════════════════════════════════════════════════════ */ /* ══════════════════════════════════════ 0. DESIGN TOKENS (overschrijfbaar via config.php) ══════════════════════════════════════ */ :root { --e-accent: #f59e0b; --e-accent-dark: #d97706; --e-accent-light: #fef3c7; --e-accent-rgb: 245,158,11; --e-text: #0f172a; --e-muted: #64748b; --e-surface: #ffffff; --e-surface2: #f8fafc; --e-border: #f1f5f9; --e-radius: 16px; --e-radius-lg: 24px; --e-radius-xl: 32px; --e-shadow-sm: 0 1px 3px rgba(0,0,0,.04); --e-shadow: 0 4px 6px -1px rgba(0,0,0,.04), 0 2px 4px -2px rgba(0,0,0,.02); --e-shadow-lg: 0 20px 25px -5px rgba(0,0,0,.08), 0 8px 10px -6px rgba(0,0,0,.04); --e-shadow-xl: 0 25px 50px -12px rgba(0,0,0,.15); --e-shadow-glow: 0 0 40px rgba(var(--e-accent-rgb),.15); --e-font: 'Inter', system-ui, -apple-system, sans-serif; --e-font-display: 'Inter', system-ui, sans-serif; --e-speed-fast: .2s; --e-speed: .35s; --e-speed-slow: .7s; --e-ease: cubic-bezier(.2,.8,.2,1); --e-ease-bounce: cubic-bezier(.68,-.55,.27,1.55); --e-ease-smooth: cubic-bezier(.4,0,.2,1); } /* Dark mode tokens */ @media (prefers-color-scheme: dark) { :root { --e-text: #f1f5f9; --e-muted: #94a3b8; --e-surface: #0f172a; --e-surface2: #1e293b; --e-border: #334155; } } [data-theme="dark"] { --e-text: #f1f5f9; --e-muted: #94a3b8; --e-surface: #0f172a; --e-surface2: #1e293b; --e-border: #334155; } /* ══════════════════════════════════════ 1. SCROLL REVEAL ANIMATIONS (7 types) ══════════════════════════════════════ */ .e-reveal { opacity:0; transform:translateY(30px); transition:opacity var(--e-speed-slow) ease, transform var(--e-speed-slow) var(--e-ease); } .e-reveal.visible { opacity:1; transform:translateY(0); } .e-reveal-up { opacity:0; transform:translateY(40px); transition:opacity .8s ease, transform .8s var(--e-ease); } .e-reveal-up.visible { opacity:1; transform:translateY(0); } .e-reveal-left { opacity:0; transform:translateX(-50px); transition:opacity .8s ease, transform .8s var(--e-ease); } .e-reveal-left.visible { opacity:1; transform:translateX(0); } .e-reveal-right { opacity:0; transform:translateX(50px); transition:opacity .8s ease, transform .8s var(--e-ease); } .e-reveal-right.visible { opacity:1; transform:translateX(0); } .e-reveal-scale { opacity:0; transform:scale(.85); transition:opacity .8s ease, transform .8s var(--e-ease); } .e-reveal-scale.visible { opacity:1; transform:scale(1); } .e-reveal-blur { opacity:0; filter:blur(12px); transform:translateY(15px); transition:opacity .9s ease, filter .9s ease, transform .9s ease; } .e-reveal-blur.visible { opacity:1; filter:blur(0); transform:translateY(0); } .e-reveal-flip { opacity:0; transform:perspective(800px) rotateY(-15deg); transition:opacity .8s ease, transform .8s var(--e-ease); } .e-reveal-flip.visible { opacity:1; transform:perspective(800px) rotateY(0); } /* Stagger delays */ .e-delay-1 { transition-delay:.1s !important; } .e-delay-2 { transition-delay:.2s !important; } .e-delay-3 { transition-delay:.3s !important; } .e-delay-4 { transition-delay:.4s !important; } .e-delay-5 { transition-delay:.5s !important; } .e-delay-6 { transition-delay:.6s !important; } .e-delay-7 { transition-delay:.7s !important; } .e-delay-8 { transition-delay:.8s !important; } /* ══════════════════════════════════════ 2. TEXT EFFECTS (5 types) ══════════════════════════════════════ */ .e-text-gradient { background:linear-gradient(135deg, var(--e-accent), var(--e-accent-dark)); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:transparent; } .e-text-gradient-rainbow { background:linear-gradient(135deg, #f59e0b, #ef4444, #8b5cf6, #3b82f6); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:transparent; } .e-text-glow { text-shadow:0 0 20px rgba(var(--e-accent-rgb),.3), 0 0 60px rgba(var(--e-accent-rgb),.1); } .e-text-shadow { text-shadow:0 2px 4px rgba(0,0,0,.12); } .e-text-outline { -webkit-text-stroke:1px var(--e-accent); -webkit-text-fill-color:transparent; } /* ══════════════════════════════════════ 3. CARD & CONTAINER EFFECTS (8 types) ══════════════════════════════════════ */ /* Glassmorphism */ .e-glass { background:rgba(255,255,255,.08); backdrop-filter:blur(24px) saturate(180%); -webkit-backdrop-filter:blur(24px) saturate(180%); border:1px solid rgba(255,255,255,.15); border-radius:var(--e-radius-lg); } .e-glass-light { background:rgba(255,255,255,.7); backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px); border:1px solid rgba(255,255,255,.5); border-radius:var(--e-radius-lg); } /* Neumorphism */ .e-neumorph { background:var(--e-surface2); border-radius:var(--e-radius-lg); box-shadow:8px 8px 16px rgba(0,0,0,.06), -8px -8px 16px rgba(255,255,255,.8); } .e-neumorph-inset { background:var(--e-surface2); border-radius:var(--e-radius); box-shadow:inset 4px 4px 8px rgba(0,0,0,.06), inset -4px -4px 8px rgba(255,255,255,.8); } /* Hover lift */ .e-hover-lift { transition:all var(--e-speed) var(--e-ease); } .e-hover-lift:hover { transform:translateY(-8px); box-shadow:var(--e-shadow-xl); } /* Border gradient */ .e-border-gradient { border:2px solid transparent; background-clip:padding-box; position:relative; } .e-border-gradient::before { content:''; position:absolute; inset:-2px; background:linear-gradient(135deg, var(--e-accent), var(--e-accent-dark)); border-radius:inherit; z-index:-1; } /* Shine sweep on hover */ .e-shine { position:relative; overflow:hidden; } .e-shine::after { content:''; position:absolute; top:0; left:-100%; width:50%; height:100%; background:linear-gradient(90deg, transparent, rgba(255,255,255,.2), transparent); transition:left .6s ease; } .e-shine:hover::after { left:120%; } /* Glow border */ .e-glow { box-shadow:0 0 0 1px rgba(var(--e-accent-rgb),.2), var(--e-shadow-glow); } .e-glow:hover { box-shadow:0 0 0 2px rgba(var(--e-accent-rgb),.4), 0 0 60px rgba(var(--e-accent-rgb),.2); } /* ══════════════════════════════════════ 4. IMAGE EFFECTS (6 types) ══════════════════════════════════════ */ /* Gradient overlay (bottom dark) */ .e-img-overlay { position:relative; overflow:hidden; } .e-img-overlay::after { content:''; position:absolute; inset:0; background:linear-gradient(180deg, transparent 40%, rgba(15,23,42,.6) 100%); pointer-events:none; transition:opacity var(--e-speed); } .e-img-overlay:hover::after { opacity:.8; } /* Zoom on hover */ .e-img-zoom { overflow:hidden; } .e-img-zoom img { transition:transform .6s var(--e-ease); } .e-img-zoom:hover img { transform:scale(1.08); } /* Parallax container (JS-driven) */ .e-img-parallax { overflow:hidden; } .e-img-parallax img { will-change:transform; transition:transform 50ms linear; } /* Tilt on hover */ .e-img-tilt { perspective:600px; } .e-img-tilt img { transition:transform var(--e-speed) var(--e-ease); } /* Grayscale → color on hover */ .e-img-grayscale img { filter:grayscale(100%); transition:filter var(--e-speed); } .e-img-grayscale:hover img { filter:grayscale(0); } /* Ken Burns (slow zoom animation) */ .e-img-kenburns { overflow:hidden; } .e-img-kenburns img { animation:kenburns 20s ease-in-out infinite alternate; } @keyframes kenburns { 0% { transform:scale(1) translateX(0); } 100% { transform:scale(1.1) translateX(-2%); } } /* ══════════════════════════════════════ 5. BUTTON EFFECTS (6 types) ══════════════════════════════════════ */ /* Magnetic (JS-driven) */ .e-btn-magnetic { transition:transform var(--e-speed) var(--e-ease); } /* Pulse ring */ .e-btn-pulse { position:relative; } .e-btn-pulse::after { content:''; position:absolute; inset:-4px; border:2px solid var(--e-accent); border-radius:inherit; animation:e-pulse 2s ease-out infinite; } @keyframes e-pulse { 0% { transform:scale(1); opacity:.6; } 100% { transform:scale(1.15); opacity:0; } } /* Ripple on click */ .e-btn-ripple { position:relative; overflow:hidden; } /* Slide fill */ .e-btn-slide { position:relative; overflow:hidden; z-index:1; } .e-btn-slide::before { content:''; position:absolute; top:0; left:-100%; width:100%; height:100%; background:var(--e-accent-dark); transition:left var(--e-speed); z-index:-1; } .e-btn-slide:hover::before { left:0; } /* Arrow slide */ .e-btn-arrow i { transition:transform var(--e-speed); } .e-btn-arrow:hover i { transform:translateX(4px); } /* Scale bounce */ .e-btn-bounce:hover { animation:e-bounce .4s var(--e-ease-bounce); } @keyframes e-bounce { 50% { transform:scale(1.08); } } /* ══════════════════════════════════════ 6. LAYOUT COMPONENTS (8 types) ══════════════════════════════════════ */ /* Scroll progress bar */ .e-scroll-progress { position:fixed; top:0; left:0; height:3px; z-index:9999; background:linear-gradient(90deg, var(--e-accent), var(--e-accent-dark)); width:0%; transition:width 50ms linear; } /* Floating CTA */ .e-floating-cta { position:fixed; bottom:20px; left:50%; transform:translateX(-50%) translateY(100px); background:rgba(15,23,42,.92); backdrop-filter:blur(20px); color:#fff; padding:12px 28px; border-radius:999px; display:flex; align-items:center; gap:12px; box-shadow:0 10px 40px rgba(0,0,0,.25); z-index:999; font-weight:700; font-size:14px; transition:transform .5s var(--e-ease); } .e-floating-cta.visible { transform:translateX(-50%) translateY(0); } /* Section separator (vertical line) */ .e-section-line { display:flex; align-items:center; justify-content:center; gap:12px; padding:20px 0; } .e-section-line::before, .e-section-line::after { content:''; flex:1; height:1px; background:linear-gradient(90deg, transparent, var(--e-border), transparent); } /* Hero blob */ .e-blob { position:absolute; border-radius:50%; background:var(--e-accent); filter:blur(80px); animation:e-blobFloat 8s ease-in-out infinite alternate; } @keyframes e-blobFloat { 0%{transform:translate(0,0) scale(1);} 100%{transform:translate(30px,-20px) scale(1.05);} } /* Wave separator */ .e-wave { position:relative; margin-top:-2px; line-height:0; } .e-wave svg { display:block; width:100%; height:60px; } /* Parallax layer */ .e-parallax-layer { position:absolute; inset:0; pointer-events:none; z-index:1; background:radial-gradient(circle at 30% 40%, rgba(var(--e-accent-rgb),.12) 0%, transparent 50%), radial-gradient(circle at 70% 60%, rgba(239,68,68,.06) 0%, transparent 40%); animation:e-parallaxShift 12s ease-in-out infinite alternate; } @keyframes e-parallaxShift { 0%{transform:translate(0,0);} 100%{transform:translate(15px,-10px);} } /* Marquee (infinite scroll logos) */ .e-marquee { overflow:hidden; padding:30px 0; } .e-marquee-track { display:flex; gap:60px; animation:e-marqueeScroll 25s linear infinite; width:max-content; } @keyframes e-marqueeScroll { to{transform:translateX(-50%);} } /* Back to top button */ .e-back-to-top { position:fixed; bottom:20px; right:20px; width:44px; height:44px; background:var(--e-accent); color:#fff; border:none; border-radius:50%; display:flex; align-items:center; justify-content:center; cursor:pointer; box-shadow:var(--e-shadow-lg); z-index:998; opacity:0; transform:translateY(20px); transition:all var(--e-speed); font-size:18px; } .e-back-to-top.visible { opacity:1; transform:translateY(0); } /* ══════════════════════════════════════ 7. MICRO-INTERACTIONS (5 types) ══════════════════════════════════════ */ /* Cursor glow (hero) */ .e-cursor-glow { position:relative; } /* Counter (data-countup) */ .e-counter { font-variant-numeric:tabular-nums; } /* Typewriter */ .e-typewriter { border-right:2px solid var(--e-accent); animation:e-blink .7s step-end infinite; white-space:nowrap; overflow:hidden; } @keyframes e-blink { 50%{border-color:transparent;} } /* Shimmer skeleton */ .e-shimmer { position:relative; overflow:hidden; background:#e2e8f0; } .e-shimmer::after { content:''; position:absolute; inset:0; background:linear-gradient(90deg, transparent, rgba(255,255,255,.4), transparent); animation:e-shimmerMove 1.5s infinite; } @keyframes e-shimmerMove { 0%{transform:translateX(-100%);} 100%{transform:translateX(100%);} } /* Tooltip */ .e-tooltip { position:relative; } .e-tooltip::after { content:attr(data-tooltip); position:absolute; bottom:calc(100% + 8px); left:50%; transform:translateX(-50%) translateY(4px); opacity:0; pointer-events:none; background:#0f172a; color:#fff; padding:6px 12px; border-radius:8px; font-size:12px; font-weight:600; white-space:nowrap; transition:all var(--e-speed-fast); } .e-tooltip:hover::after { opacity:1; transform:translateX(-50%) translateY(0); } /* ══════════════════════════════════════ 8. SVG DECORATIVE PATTERNS ══════════════════════════════════════ */ /* Dot grid background */ .e-bg-dots { background-image:radial-gradient(circle, var(--e-border) 1px, transparent 1px); background-size:20px 20px; } /* Grid lines */ .e-bg-grid { background-image:linear-gradient(rgba(var(--e-accent-rgb),.05) 1px, transparent 1px), linear-gradient(90deg, rgba(var(--e-accent-rgb),.05) 1px, transparent 1px); background-size:30px 30px; } /* Diagonal stripes */ .e-bg-stripes { background:repeating-linear-gradient( -45deg, transparent, transparent 10px, rgba(var(--e-accent-rgb),.03) 10px, rgba(var(--e-accent-rgb),.03) 20px ); } /* Noise texture overlay */ .e-bg-noise::before { content:''; position:absolute; inset:0; z-index:0; pointer-events:none; opacity:.03; background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); } /* ══════════════════════════════════════ 9. RESPONSIVE UTILITIES ══════════════════════════════════════ */ @media (max-width:768px) { .e-floating-cta { left:12px; right:12px; bottom:12px; width:auto; transform:translateX(0) translateY(100px); padding:10px 16px; font-size:13px; border-radius:16px; gap:8px; justify-content:center; } .e-floating-cta.visible { transform:translateX(0) translateY(0); } .e-floating-cta > span { display:none; } .e-floating-cta a { font-size:12px; white-space:nowrap; } .e-back-to-top { bottom:70px; right:12px; width:38px; height:38px; } .e-hide-mobile { display:none !important; } } @media (min-width:769px) { .e-hide-desktop { display:none !important; } } @media (prefers-reduced-motion:reduce) { *, *::before, *::after { animation-duration:.01ms !important; transition-duration:.01ms !important; } .e-reveal, .e-reveal-up, .e-reveal-left, .e-reveal-right, .e-reveal-scale, .e-reveal-blur, .e-reveal-flip { opacity:1; transform:none; filter:none; } }