fix rebuild issue
This commit is contained in:
@@ -100,7 +100,7 @@ export default function EmpowermentPage() {
|
||||
<EmpowermentVision />
|
||||
<EmpowermentStory />
|
||||
<WomenSection
|
||||
eyebrow="/ Doormile Wings /"
|
||||
eyebrow="/ Women Empowerment /"
|
||||
bannerLabel="Women Entrepreneurship"
|
||||
bannerCopy="An ecosystem where women build, own, and scale enterprises across logistics."
|
||||
ctaLabel="Explore the ecosystem"
|
||||
|
||||
@@ -169,30 +169,78 @@ export default function EmpowermentHowItWorks() {
|
||||
}
|
||||
}
|
||||
|
||||
/* Mobile: single column — dividers rotate from vertical to horizontal. */
|
||||
/* Mobile: compact numbered editorial index — number in a narrow
|
||||
left column, title/description/divider sharing one right
|
||||
content column, laid out on the existing milestone markup via
|
||||
CSS Grid (no duplicated JSX, no new step markup). */
|
||||
@media (max-width: 640px) {
|
||||
.ehw-head {
|
||||
margin-bottom: clamp(40px, 10vw, 56px);
|
||||
}
|
||||
|
||||
.ehw-sequence {
|
||||
row-gap: 0;
|
||||
}
|
||||
|
||||
.ehw-step {
|
||||
display: grid;
|
||||
grid-template-columns: 48px minmax(0, 1fr);
|
||||
column-gap: 14px;
|
||||
flex-basis: 100%;
|
||||
padding-left: 0;
|
||||
padding-top: clamp(28px, 8vw, 38px);
|
||||
padding-top: clamp(28px, 8vw, 36px);
|
||||
border-left: none;
|
||||
border-top: 1px solid rgba(17, 17, 17, 0.14);
|
||||
}
|
||||
.ehw-step:first-child {
|
||||
padding-top: 0;
|
||||
border-top: none;
|
||||
}
|
||||
.ehw-step:nth-child(4) {
|
||||
border-top: 1px solid rgba(17, 17, 17, 0.14);
|
||||
}
|
||||
.ehw-step:hover {
|
||||
border-left-color: transparent;
|
||||
|
||||
.ehw-step:first-child {
|
||||
padding-top: 0;
|
||||
}
|
||||
|
||||
/* Compact solid index number — replaces the oversized pale
|
||||
outline treatment used on desktop/tablet. */
|
||||
.ehw-step-num {
|
||||
font-size: clamp(44px, 13vw, 56px);
|
||||
grid-column: 1;
|
||||
grid-row: 1;
|
||||
align-self: start;
|
||||
font-size: clamp(32px, 9vw, 40px);
|
||||
line-height: 1;
|
||||
color: #c8102e;
|
||||
-webkit-text-stroke: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/* Hidden completely — no reserved gap left in its place since a
|
||||
display:none grid item takes no track space. */
|
||||
.ehw-step-kicker {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.ehw-step-title {
|
||||
grid-column: 2;
|
||||
grid-row: 1;
|
||||
font-size: clamp(22px, 6vw, 26px) !important;
|
||||
}
|
||||
|
||||
.ehw-step-desc {
|
||||
grid-column: 2;
|
||||
grid-row: 2;
|
||||
max-width: none;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
/* Divider lives inside the description box (content column
|
||||
only), so it never runs underneath the number column. */
|
||||
.ehw-step-desc::after {
|
||||
content: "";
|
||||
display: block;
|
||||
margin-top: clamp(24px, 6vw, 28px);
|
||||
height: 1px;
|
||||
background-color: rgba(17, 17, 17, 0.14);
|
||||
}
|
||||
|
||||
.ehw-step:last-child .ehw-step-desc::after {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -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}>
|
||||
|
||||
@@ -265,7 +265,14 @@ export default function EmpowermentStories() {
|
||||
}
|
||||
|
||||
@media (max-width: 640px) {
|
||||
.est-section { padding-top: 54px; padding-bottom: 54px; }
|
||||
.est-section { padding-top: 54px; padding-bottom: 6px; }
|
||||
/* .est-feature's margin-bottom (clamp(44px, 6vw, 76px)) was sized
|
||||
to precede an .est-list testimonial row block that no longer
|
||||
exists in this component's JSX. Since .est-feature is now the
|
||||
section's last child, that margin was pure dead space stacking
|
||||
on top of .est-section's own padding-bottom above — the real
|
||||
source of the oversized mobile gap before the next section. */
|
||||
.est-feature { margin-bottom: 0; }
|
||||
.est-title {
|
||||
font-size: clamp(34px, 10vw, 40px) !important;
|
||||
letter-spacing: -0.045em !important;
|
||||
|
||||
Reference in New Issue
Block a user