fix: hero neural UX improvements

1. Mouse move listener now on document (not just hero section)
2. Removed hover effect on outer cards, kept only for center กำไร card
3. Bigger text: card-tag 20px, card-desc 16px
4. Hero overflow visible on desktop (cards can extend left)
5. Hero overflow clip on mobile (normal containment)
This commit is contained in:
Kunthawat Greethong
2026-06-24 09:14:55 +07:00
parent 1d893e1bcb
commit 2a3062357f
2 changed files with 13 additions and 9 deletions

View File

@@ -277,7 +277,7 @@ if (heroNeural && neuralScene && canvas && ctx && nodes.length > 0) {
}
// Mouse move handler
heroNeural.addEventListener('mousemove', (e) => {
document.addEventListener('mousemove', (e) => {
const rect = heroNeural.getBoundingClientRect();
const x = (e.clientX - rect.left) / rect.width;
const y = (e.clientY - rect.top) / rect.height;
@@ -286,7 +286,7 @@ if (heroNeural && neuralScene && canvas && ctx && nodes.length > 0) {
targetRotateX = (y - 0.5) * -30;
});
heroNeural.addEventListener('mouseleave', () => {
document.addEventListener('mouseleave', () => {
targetRotateX = 0;
targetRotateY = 0;
});

View File

@@ -347,8 +347,7 @@ box-shadow: inset 1px 1px 0 rgb(255 255 255 / .72);
.hero {
min-height: 100svh;
padding: 150px 0 88px;
overflow: clip;
contain: paint;
overflow: visible;
}
.hero-grid,
@@ -490,8 +489,8 @@ color: rgb(255 255 255 / .72);
backface-visibility: hidden;
}
.neural-node:hover {
box-shadow: 0 24px 60px rgb(0 0 0 / .18);
.node-center:hover {
box-shadow: 0 30px 80px rgb(254 212 0 / .25);
}
/* Center node: กำไร */
@@ -558,7 +557,7 @@ color: rgb(255 255 255 / .72);
}
.card-tag {
font-size: 16px;
font-size: 20px;
font-weight: 900;
color: var(--ink);
letter-spacing: .02em;
@@ -566,8 +565,8 @@ color: rgb(255 255 255 / .72);
}
.card-desc {
margin-top: 8px;
font-size: 14px;
margin-top: 10px;
font-size: 16px;
font-weight: 500;
color: var(--muted);
line-height: 1.4;
@@ -603,6 +602,11 @@ color: rgb(255 255 255 / .72);
/* Mobile responsive */
@media (max-width: 620px) {
.hero {
overflow: clip;
contain: paint;
}
.hero-neural {
height: auto;
max-width: 340px;