update dropdown
This commit is contained in:
@@ -1112,8 +1112,6 @@ export default function Header() {
|
|||||||
font-weight: 700;
|
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 {
|
#masthead .header-menu-container .main-menu > li.menu-item-has-children > a[aria-expanded="true"] ~ .dm-solutions-dropdown {
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
visibility: visible;
|
visibility: visible;
|
||||||
@@ -1121,8 +1119,6 @@ export default function Header() {
|
|||||||
transform: translate(-50%, 24px);
|
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 {
|
#masthead .header-menu-container .main-menu > li.menu-item-has-children > a[aria-expanded="true"]:after {
|
||||||
transform: rotate(180deg);
|
transform: rotate(180deg);
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -752,7 +752,7 @@ export default function EVSection({
|
|||||||
.evnd-feature__desc {
|
.evnd-feature__desc {
|
||||||
color: rgba(255,255,255,0.65) !important;
|
color: rgba(255,255,255,0.65) !important;
|
||||||
font-weight: 400 !important;
|
font-weight: 400 !important;
|
||||||
font-size: 14px !important;
|
font-size: 16px !important;
|
||||||
line-height: 1.6 !important;
|
line-height: 1.6 !important;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
}
|
}
|
||||||
@@ -969,8 +969,8 @@ export default function EVSection({
|
|||||||
.evnd__dfeat-desc {
|
.evnd__dfeat-desc {
|
||||||
color: rgba(255,255,255,0.6) !important;
|
color: rgba(255,255,255,0.6) !important;
|
||||||
font-weight: 400 !important;
|
font-weight: 400 !important;
|
||||||
font-size: 13px !important;
|
font-size: 16px !important;
|
||||||
line-height: 1.45 !important;
|
line-height: 1.55 !important;
|
||||||
margin: 0 !important;
|
margin: 0 !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@@ -160,7 +160,7 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.cardDesc {
|
.cardDesc {
|
||||||
font-size: 14px;
|
font-size: 16px;
|
||||||
line-height: 1.6;
|
line-height: 1.6;
|
||||||
color: rgba(255, 255, 255, 0.45);
|
color: rgba(255, 255, 255, 0.45);
|
||||||
margin: 0;
|
margin: 0;
|
||||||
|
|||||||
@@ -270,7 +270,7 @@ export default function WingsMileTruth() {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.wmt-card-desc {
|
.wmt-card-desc {
|
||||||
font-size: 13px;
|
font-size: 16px;
|
||||||
line-height: 1.55;
|
line-height: 1.55;
|
||||||
color: rgba(255, 255, 255, 0.55);
|
color: rgba(255, 255, 255, 0.55);
|
||||||
margin: 0;
|
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-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 {
|
.wrm-card-desc {
|
||||||
font-size: 12.5px;
|
font-size: 14.5px;
|
||||||
line-height: 1.5;
|
line-height: 1.55;
|
||||||
color: rgba(255, 255, 255, 0.55);
|
color: rgba(255, 255, 255, 0.55);
|
||||||
margin: 0;
|
margin: 0;
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -118,7 +118,7 @@ export default function WingsSpeedAdvantage() {
|
|||||||
line-height: 1;
|
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-panel-wings .wsa-value { color: #ffffff; }
|
||||||
|
|
||||||
.wsa-unit {
|
.wsa-unit {
|
||||||
|
|||||||
@@ -236,11 +236,15 @@ export default function WingsWhyGrid() {
|
|||||||
return { points, isMobile };
|
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(() => {
|
ro = new ResizeObserver(() => {
|
||||||
cancelAnimationFrame(resizeRaf);
|
cancelAnimationFrame(resizeRaf);
|
||||||
resizeRaf = requestAnimationFrame(measure);
|
resizeRaf = requestAnimationFrame(() => {
|
||||||
|
if (!reduced) {
|
||||||
|
buildSequence();
|
||||||
|
} else {
|
||||||
|
measure();
|
||||||
|
}
|
||||||
|
});
|
||||||
});
|
});
|
||||||
ro.observe(wrap);
|
ro.observe(wrap);
|
||||||
|
|
||||||
@@ -293,9 +297,8 @@ export default function WingsWhyGrid() {
|
|||||||
gsap.delayedCall(0.95, () => card.classList.remove("wwg-card-pulse"));
|
gsap.delayedCall(0.95, () => card.classList.remove("wwg-card-pulse"));
|
||||||
};
|
};
|
||||||
|
|
||||||
const runSequence = () => {
|
const buildSequence = () => {
|
||||||
if (played) return;
|
if (playedTimeline) playedTimeline.kill();
|
||||||
played = true;
|
|
||||||
|
|
||||||
const { points, isMobile } = measure();
|
const { points, isMobile } = measure();
|
||||||
if (points.length < 2) return;
|
if (points.length < 2) return;
|
||||||
@@ -327,7 +330,14 @@ export default function WingsWhyGrid() {
|
|||||||
let currentAngle = 0;
|
let currentAngle = 0;
|
||||||
let angleInit = false;
|
let angleInit = false;
|
||||||
|
|
||||||
const tl = gsap.timeline();
|
const tl = gsap.timeline({
|
||||||
|
scrollTrigger: {
|
||||||
|
trigger: wrap,
|
||||||
|
start: "top 75%",
|
||||||
|
end: "bottom 35%",
|
||||||
|
scrub: 1,
|
||||||
|
},
|
||||||
|
});
|
||||||
playedTimeline = tl;
|
playedTimeline = tl;
|
||||||
|
|
||||||
// The energy pulse's own journey — calm and deliberate, ~4.8-5.5s so
|
// 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) {
|
if (!fired[i] && p >= f) {
|
||||||
fired[i] = true;
|
fired[i] = true;
|
||||||
activateCard(i);
|
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(traveler, { opacity: 0 });
|
||||||
gsap.set(illum, { opacity: 0 });
|
gsap.set(illum, { opacity: 0 });
|
||||||
|
|
||||||
// Starts as soon as the section is mostly in view (matches the cards'
|
// Build the scrubbing sequence immediately
|
||||||
// own "top 85%" stagger-reveal trigger) rather than waiting for it to
|
buildSequence();
|
||||||
// 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();
|
|
||||||
}
|
|
||||||
});
|
|
||||||
}
|
}
|
||||||
}, wrap);
|
}, wrap);
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user