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:
@@ -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;
|
||||
});
|
||||
|
||||
@@ -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;
|
||||
|
||||
Reference in New Issue
Block a user