diff --git a/script.js b/script.js index cc70d31..4649c37 100644 --- a/script.js +++ b/script.js @@ -11,17 +11,15 @@ document.addEventListener('DOMContentLoaded', () => { document.querySelectorAll('.fade-in').forEach(el => observer.observe(el)); // Logo 3D effect on mousemove - const logo = document.querySelector('.logo'); - const hero = document.querySelector('.hero'); + const logo = document.querySelector('.logo-small'); - if(window.matchMedia("(pointer: fine)").matches) { - hero.addEventListener('mousemove', (e) => { - const rect = hero.getBoundingClientRect(); - const x = e.clientX - rect.left; - const y = e.clientY - rect.top; + if(logo && window.matchMedia("(pointer: fine)").matches) { + document.addEventListener('mousemove', (e) => { + const x = e.clientX; + const y = e.clientY; - const centerX = rect.width / 2; - const centerY = rect.height / 2; + const centerX = window.innerWidth / 2; + const centerY = window.innerHeight / 2; // Calculate rotation (inverted for natural feel) const rotateX = ((y - centerY) / centerY) * -15; @@ -30,7 +28,7 @@ document.addEventListener('DOMContentLoaded', () => { logo.style.transform = `scale(1.08) rotateX(${rotateX}deg) rotateY(${rotateY}deg)`; }); - hero.addEventListener('mouseleave', () => { + document.addEventListener('mouseleave', () => { logo.style.transform = `scale(1) rotateX(0deg) rotateY(0deg)`; }); } diff --git a/styles.css b/styles.css index bc1061a..196f2b5 100644 --- a/styles.css +++ b/styles.css @@ -87,6 +87,7 @@ body { .page-layout { flex-direction: row; justify-content: center; + align-items: flex-start; } } @@ -120,8 +121,6 @@ body { .hero { text-align: center; position: relative; - overflow: hidden; - padding-top: 2rem; padding-bottom: 4rem; } @@ -296,13 +295,10 @@ p { height: fit-content; width: 100%; z-index: 100; - padding: 2rem; border-radius: 24px; display: flex; flex-direction: column; gap: 2rem; - position: relative; - overflow: hidden; } .sidebar::before { @@ -311,6 +307,8 @@ p { top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, transparent, var(--accent-green), var(--accent-blue), transparent); z-index: 1; + border-top-left-radius: 24px; + border-top-right-radius: 24px; } @media(min-width: 900px) {