update dropdown
This commit is contained in:
@@ -1112,8 +1112,6 @@ export default function Header() {
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
#masthead .header-menu-container .main-menu > li.menu-item-has-children:hover .dm-solutions-dropdown,
|
||||
#masthead .header-menu-container .main-menu > li.menu-item-has-children:focus-within .dm-solutions-dropdown,
|
||||
#masthead .header-menu-container .main-menu > li.menu-item-has-children > a[aria-expanded="true"] ~ .dm-solutions-dropdown {
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
@@ -1121,8 +1119,6 @@ export default function Header() {
|
||||
transform: translate(-50%, 24px);
|
||||
}
|
||||
|
||||
#masthead .header-menu-container .main-menu > li.menu-item-has-children:hover > a:after,
|
||||
#masthead .header-menu-container .main-menu > li.menu-item-has-children:focus-within > a:after,
|
||||
#masthead .header-menu-container .main-menu > li.menu-item-has-children > a[aria-expanded="true"]:after {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
|
||||
@@ -752,7 +752,7 @@ export default function EVSection({
|
||||
.evnd-feature__desc {
|
||||
color: rgba(255,255,255,0.65) !important;
|
||||
font-weight: 400 !important;
|
||||
font-size: 14px !important;
|
||||
font-size: 16px !important;
|
||||
line-height: 1.6 !important;
|
||||
margin: 0;
|
||||
}
|
||||
@@ -969,8 +969,8 @@ export default function EVSection({
|
||||
.evnd__dfeat-desc {
|
||||
color: rgba(255,255,255,0.6) !important;
|
||||
font-weight: 400 !important;
|
||||
font-size: 13px !important;
|
||||
line-height: 1.45 !important;
|
||||
font-size: 16px !important;
|
||||
line-height: 1.55 !important;
|
||||
margin: 0 !important;
|
||||
}
|
||||
|
||||
|
||||
@@ -160,7 +160,7 @@
|
||||
}
|
||||
|
||||
.cardDesc {
|
||||
font-size: 14px;
|
||||
font-size: 16px;
|
||||
line-height: 1.6;
|
||||
color: rgba(255, 255, 255, 0.45);
|
||||
margin: 0;
|
||||
|
||||
@@ -270,7 +270,7 @@ export default function WingsMileTruth() {
|
||||
}
|
||||
|
||||
.wmt-card-desc {
|
||||
font-size: 13px;
|
||||
font-size: 16px;
|
||||
line-height: 1.55;
|
||||
color: rgba(255, 255, 255, 0.55);
|
||||
margin: 0;
|
||||
|
||||
@@ -180,8 +180,8 @@ export default function WingsRoadmap() {
|
||||
.wrm-phase-pill.white-pill { background: rgba(255,255,255,0.12); color: #ffffff; border: 1px solid rgba(255,255,255,0.2); }
|
||||
|
||||
.wrm-card-desc {
|
||||
font-size: 12.5px;
|
||||
line-height: 1.5;
|
||||
font-size: 14.5px;
|
||||
line-height: 1.55;
|
||||
color: rgba(255, 255, 255, 0.55);
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
@@ -118,7 +118,7 @@ export default function WingsSpeedAdvantage() {
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.wsa-panel-surface .wsa-value { color: #b3b6bf; }
|
||||
.wsa-panel-surface .wsa-value { color: #c8102e; }
|
||||
.wsa-panel-wings .wsa-value { color: #ffffff; }
|
||||
|
||||
.wsa-unit {
|
||||
|
||||
@@ -236,11 +236,15 @@ export default function WingsWhyGrid() {
|
||||
return { points, isMobile };
|
||||
};
|
||||
|
||||
// Keep the (static, or already-settled) line in sync with layout reflow.
|
||||
// Only ever updates geometry — never restarts or replays the animation.
|
||||
ro = new ResizeObserver(() => {
|
||||
cancelAnimationFrame(resizeRaf);
|
||||
resizeRaf = requestAnimationFrame(measure);
|
||||
resizeRaf = requestAnimationFrame(() => {
|
||||
if (!reduced) {
|
||||
buildSequence();
|
||||
} else {
|
||||
measure();
|
||||
}
|
||||
});
|
||||
});
|
||||
ro.observe(wrap);
|
||||
|
||||
@@ -293,9 +297,8 @@ export default function WingsWhyGrid() {
|
||||
gsap.delayedCall(0.95, () => card.classList.remove("wwg-card-pulse"));
|
||||
};
|
||||
|
||||
const runSequence = () => {
|
||||
if (played) return;
|
||||
played = true;
|
||||
const buildSequence = () => {
|
||||
if (playedTimeline) playedTimeline.kill();
|
||||
|
||||
const { points, isMobile } = measure();
|
||||
if (points.length < 2) return;
|
||||
@@ -327,7 +330,14 @@ export default function WingsWhyGrid() {
|
||||
let currentAngle = 0;
|
||||
let angleInit = false;
|
||||
|
||||
const tl = gsap.timeline();
|
||||
const tl = gsap.timeline({
|
||||
scrollTrigger: {
|
||||
trigger: wrap,
|
||||
start: "top 75%",
|
||||
end: "bottom 35%",
|
||||
scrub: 1,
|
||||
},
|
||||
});
|
||||
playedTimeline = tl;
|
||||
|
||||
// The energy pulse's own journey — calm and deliberate, ~4.8-5.5s so
|
||||
@@ -413,6 +423,10 @@ export default function WingsWhyGrid() {
|
||||
if (!fired[i] && p >= f) {
|
||||
fired[i] = true;
|
||||
activateCard(i);
|
||||
} else if (fired[i] && p < f) {
|
||||
fired[i] = false;
|
||||
// Reset card state if scrubbed backwards
|
||||
cardRefs.current[i]?.classList.remove("wwg-card-flown", "wwg-card-pulse");
|
||||
}
|
||||
});
|
||||
},
|
||||
@@ -443,26 +457,8 @@ export default function WingsWhyGrid() {
|
||||
gsap.set(traveler, { opacity: 0 });
|
||||
gsap.set(illum, { opacity: 0 });
|
||||
|
||||
// Starts as soon as the section is mostly in view (matches the cards'
|
||||
// own "top 85%" stagger-reveal trigger) rather than waiting for it to
|
||||
// be ~centered — the ~6s draw+flight sequence needs that extra lead
|
||||
// time to actually be seen during a normal scroll pass, not just
|
||||
// triggered and then scrolled straight past.
|
||||
st = ScrollTrigger.create({
|
||||
trigger: wrap,
|
||||
start: "top 85%",
|
||||
once: true,
|
||||
onEnter: runSequence,
|
||||
});
|
||||
|
||||
rafIn = requestAnimationFrame(() => {
|
||||
const r = wrap.getBoundingClientRect();
|
||||
const vh = window.innerHeight || document.documentElement.clientHeight;
|
||||
if (r.top < vh * 0.85 && r.bottom > 0) {
|
||||
runSequence();
|
||||
st?.kill();
|
||||
}
|
||||
});
|
||||
// Build the scrubbing sequence immediately
|
||||
buildSequence();
|
||||
}
|
||||
}, wrap);
|
||||
|
||||
|
||||
Reference in New Issue
Block a user