diff --git a/index.html b/index.html index 812b5ef..39e84cf 100644 --- a/index.html +++ b/index.html @@ -187,9 +187,8 @@ path: 'Background Grey Wave.json' }); - // Logo-Animation mit dynamischer Farbsteuerung via CSS-Override - // (CSS fill-Property schlägt SVG fill-Attribute per Spec) - let _logoAnim = lottie.loadAnimation({ + // Logo-Animation + lottie.loadAnimation({ container: document.getElementById('lottie-logo'), renderer: 'svg', loop: true, @@ -197,9 +196,6 @@ path: 'Fluid Loading Animation.json' }); - let _logoStyleEl = null; - let _yellowMarked = false; - function _hslToHex(h, s, l) { s /= 100; l /= 100; const a = s * Math.min(l, 1 - l); @@ -211,37 +207,9 @@ return '#' + f(0) + f(8) + f(4); } - function _markYellowElements() { - const svg = document.querySelector('#lottie-logo svg'); - if (!svg) return false; - // Solid fills (kleine Partikel) - svg.querySelectorAll('[fill="rgb(255,223,0)"]').forEach(el => { - el.classList.add('logo-primary-fill'); - }); - // Gradient stops (mittlerer Blob) - svg.querySelectorAll('stop[stop-color="rgb(255,223,0)"]').forEach(el => { - el.classList.add('logo-primary-stop'); - }); - return svg.querySelector('.logo-primary-fill, .logo-primary-stop') !== null; - } - - function setLogoColor(hex) { - if (!_yellowMarked) { - _yellowMarked = _markYellowElements(); - if (!_yellowMarked) return; - } - if (!_logoStyleEl) { - _logoStyleEl = document.createElement('style'); - document.head.appendChild(_logoStyleEl); - } - _logoStyleEl.textContent = - '#lottie-logo .logo-primary-fill { fill: ' + hex + '; }' + - '#lottie-logo .logo-primary-stop { stop-color: ' + hex + '; }'; - } - document.addEventListener('colorChanged', (e) => { const hex = _hslToHex(e.detail.h, e.detail.s, e.detail.l); - setLogoColor(hex); + document.getElementById('lottie-logo').style.setProperty('--logo-tint', hex); }); diff --git a/style.css b/style.css index da42ccc..42ecdc5 100644 --- a/style.css +++ b/style.css @@ -10,6 +10,22 @@ body { transition: background 0.8s ease; } +#lottie-logo { + position: relative; + isolation: isolate; + --logo-tint: transparent; +} + +#lottie-logo::after { + content: ''; + position: absolute; + inset: 0; + pointer-events: none; + mix-blend-mode: color; + background: var(--logo-tint); + transition: background 0.8s ease; +} + #lottie-bg { position: fixed; inset: 0;