fix rebuild issue
This commit is contained in:
@@ -38,7 +38,8 @@ export default function EmpowermentPrograms() {
|
||||
__html: `
|
||||
.epr-section {
|
||||
background: #ffffff;
|
||||
padding: clamp(78px, 9vw, 132px) 0;
|
||||
padding-top: clamp(28px, 3.2vw, 48px);
|
||||
padding-bottom: clamp(78px, 9vw, 132px);
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
@@ -90,7 +91,11 @@ export default function EmpowermentPrograms() {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(300px, 0.38fr) minmax(0, 0.62fr);
|
||||
gap: clamp(32px, 5vw, 78px);
|
||||
align-items: start;
|
||||
/* stretch (not start): .epr-aside-wrap must span the full row
|
||||
height — the tall Programs column's implicit-row height — so it
|
||||
defines the sticky travel distance. The visual box no longer
|
||||
lives here, so stretching this item no longer distorts it. */
|
||||
align-items: stretch;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
@@ -98,12 +103,55 @@ export default function EmpowermentPrograms() {
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.epr-aside {
|
||||
position: sticky;
|
||||
top: 110px;
|
||||
/* Responsibility split (desktop sticky architecture):
|
||||
.epr-aside-wrap — plain grid item, stretched to the full
|
||||
Programs-list row height. Defines travel
|
||||
distance. No sizing responsibility of its
|
||||
own beyond that.
|
||||
.epr-aside-sticky — owns position: sticky. Its height is
|
||||
explicitly clamped to the viewport
|
||||
(100dvh minus header clearance and a
|
||||
bottom safe-margin), so it can never grow
|
||||
taller than what's actually visible —
|
||||
the tall min-height that previously fought
|
||||
the sticky top offset is gone entirely.
|
||||
.epr-aside — the visual composition (ghost number, map,
|
||||
heading, paragraph). Fills the sticky
|
||||
frame's height and arranges its existing
|
||||
content inside it; owns the decorative
|
||||
bleed clipping (overflow: hidden). */
|
||||
.epr-aside-wrap {
|
||||
min-width: 0;
|
||||
min-height: clamp(480px, 44vw, 660px);
|
||||
padding: clamp(18px, 3vw, 34px) 0 clamp(24px, 3.5vw, 42px);
|
||||
}
|
||||
|
||||
.epr-aside-sticky {
|
||||
/* 132px clears the site header's fixed state (~122px tall once
|
||||
scrolled) with a small margin; only grows on very tall
|
||||
viewports. This is viewport-height-derived, NOT content-height
|
||||
derived — unlike the old top formula, it never has to react to
|
||||
how tall the aside's own content happens to be. */
|
||||
--epr-sticky-top: clamp(132px, 12dvh, 160px);
|
||||
--epr-sticky-bottom-safe: 28px;
|
||||
position: sticky;
|
||||
top: var(--epr-sticky-top);
|
||||
height: calc(100dvh - var(--epr-sticky-top) - var(--epr-sticky-bottom-safe));
|
||||
min-height: 0;
|
||||
min-width: 0;
|
||||
/* Lets the visual composition react to the frame's OWN resolved
|
||||
height (container query below) rather than guessing from the
|
||||
viewport or the write-up's vw-based type scale. */
|
||||
container-type: size;
|
||||
container-name: epr-frame;
|
||||
}
|
||||
|
||||
.epr-aside {
|
||||
--epr-aside-pad-t: clamp(18px, 3vw, 34px);
|
||||
--epr-aside-pad-b: clamp(24px, 3.5vw, 42px);
|
||||
position: relative;
|
||||
height: 100%;
|
||||
min-width: 0;
|
||||
min-height: 0;
|
||||
padding: var(--epr-aside-pad-t) 0 var(--epr-aside-pad-b);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
@@ -166,6 +214,26 @@ export default function EmpowermentPrograms() {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/* Constrained-frame fallback: the sticky frame is short (short
|
||||
desktop viewport height), so the decorative ghost number/map
|
||||
shrink first — spacing second — while the heading and paragraph
|
||||
stay full size and fully visible, per spec. Placed after the base
|
||||
.epr-aside-num/-content/-map rules so it wins the cascade at
|
||||
matching container sizes (equal selector specificity; source
|
||||
order decides). */
|
||||
@container epr-frame (max-height: 660px) {
|
||||
.epr-aside { padding-top: clamp(12px, 1.8vw, 22px); padding-bottom: clamp(16px, 2.2vw, 26px); }
|
||||
.epr-aside-content { gap: clamp(12px, 1.6vw, 20px); }
|
||||
.epr-aside-num { font-size: clamp(90px, 11vw, 180px); }
|
||||
}
|
||||
|
||||
@container epr-frame (max-height: 560px) {
|
||||
.epr-aside { padding-top: clamp(8px, 1.2vw, 14px); padding-bottom: clamp(10px, 1.6vw, 18px); }
|
||||
.epr-aside-content { gap: clamp(6px, 1vw, 12px); }
|
||||
.epr-aside-num { font-size: clamp(48px, 7vw, 100px); }
|
||||
.epr-aside-map { opacity: 0.14; }
|
||||
}
|
||||
|
||||
.epr-list {
|
||||
display: grid;
|
||||
gap: clamp(28px, 4vw, 52px);
|
||||
@@ -283,7 +351,6 @@ export default function EmpowermentPrograms() {
|
||||
/* Laptop: sticky stays enabled, just a narrower gutter. */
|
||||
@media (max-width: 1180px) {
|
||||
.epr-stage { grid-template-columns: minmax(220px, 0.34fr) minmax(0, 0.66fr); gap: clamp(28px, 4vw, 46px); }
|
||||
.epr-aside { min-height: 420px; }
|
||||
.epr-row:nth-child(even) { margin-left: 0; }
|
||||
}
|
||||
|
||||
@@ -291,9 +358,11 @@ export default function EmpowermentPrograms() {
|
||||
of pinning, since there's no longer enough vertical runway next to
|
||||
the (now narrower, shorter) program list for pinning to read well. */
|
||||
@media (max-width: 1023px) {
|
||||
.epr-aside {
|
||||
.epr-aside-sticky {
|
||||
position: relative;
|
||||
top: auto;
|
||||
height: auto;
|
||||
container-type: normal;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -327,7 +396,7 @@ export default function EmpowermentPrograms() {
|
||||
}
|
||||
|
||||
@media (max-width: 640px) {
|
||||
.epr-section { padding-top: 54px; padding-bottom: 54px; }
|
||||
.epr-section { padding-top: 28px; padding-bottom: 54px; }
|
||||
.epr-title {
|
||||
font-size: clamp(34px, 10vw, 40px) !important;
|
||||
letter-spacing: -0.045em !important;
|
||||
@@ -357,18 +426,22 @@ export default function EmpowermentPrograms() {
|
||||
</div>
|
||||
|
||||
<div className="epr-stage">
|
||||
<aside className="epr-aside">
|
||||
<div className="epr-aside-map" aria-hidden="true">
|
||||
<IndustryWorldMap />
|
||||
<div className="epr-aside-wrap">
|
||||
<div className="epr-aside-sticky">
|
||||
<aside className="epr-aside">
|
||||
<div className="epr-aside-map" aria-hidden="true">
|
||||
<IndustryWorldMap />
|
||||
</div>
|
||||
<ScrollReveal delay={0.05} duration={0.8} yOffset={24} className="epr-aside-content">
|
||||
<div className="epr-aside-num">05</div>
|
||||
<p className="epr-aside-copy">Building tomorrow’s <em>women entrepreneurs.</em></p>
|
||||
<p className="epr-aside-desc">
|
||||
Every enterprise starts with one decision. Our pillars move women from idea to ownership through mentorship, real industry partnerships, and hands-on venture building across the logistics ecosystem.
|
||||
</p>
|
||||
</ScrollReveal>
|
||||
</aside>
|
||||
</div>
|
||||
<ScrollReveal delay={0.05} duration={0.8} yOffset={24} className="epr-aside-content">
|
||||
<div className="epr-aside-num">05</div>
|
||||
<p className="epr-aside-copy">Building tomorrow’s <em>women entrepreneurs.</em></p>
|
||||
<p className="epr-aside-desc">
|
||||
Every enterprise starts with one decision. Our pillars move women from idea to ownership through mentorship, real industry partnerships, and hands-on venture building across the logistics ecosystem.
|
||||
</p>
|
||||
</ScrollReveal>
|
||||
</aside>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<ScrollReveal delay={0.1} duration={0.8} yOffset={24}>
|
||||
|
||||
Reference in New Issue
Block a user