Doormile/doormile_react
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix mobile view issue

Browse Source
This commit is contained in:
Aravind R
2026-06-15 18:20:48 +05:30
parent 205924e057
commit 0560b86b87
25 changed files with 956 additions and 99 deletions
Download Patch File Download Diff File Expand all files Collapse all files

95
public/css/site.css
View File

@@ -5776,12 +5776,12 @@ body:not(.block-editor-page) .content-wrapper .widget p {
@media (max-width: 1024px) { @media (max-width: 1024px) {
.elementor-element.elementor-element-99768ba .elementor-widget-container img.wp-image-4481 { .elementor-element.elementor-element-99768ba .elementor-widget-container img.wp-image-4481 {
width: 100% !important; width: 100% !important;
max-width: 450px !important; max-width: 600px !important;
/* Prevent oversized/zoomed appearance on tablets */ /* Prevent oversized/zoomed appearance on tablets */
height: auto !important; height: auto !important;
aspect-ratio: auto !important; aspect-ratio: auto !important;
/* Maintain original proportions */ /* Maintain original proportions */
object-fit: contain !important; object-fit: cover !important;
/* Ensure no cropping of important content */ /* Ensure no cropping of important content */
margin: 0 auto !important; margin: 0 auto !important;
/* Centering */ /* Centering */
@@ -5799,10 +5799,10 @@ body:not(.block-editor-page) .content-wrapper .widget p {
/* Specific scaling for small mobile phones */ /* Specific scaling for small mobile phones */
@media (max-width: 767px) { @media (max-width: 767px) {
.elementor-element.elementor-element-99768ba .elementor-widget-container img.wp-image-4481 { .elementor-element.elementor-element-99768ba .elementor-widget-container img.wp-image-4481 {
max-width: 90% !important; max-width: 100% !important;
/* Reduce scale on small screens */ /* Reduce scale on small screens */
margin: 0 auto !important; margin: 0 auto !important;
border-radius: 18px !important; border-radius: 25px !important;
/* Consistent rounded edges */ /* Consistent rounded edges */
} }
} }
@@ -18154,3 +18154,90 @@ img:is([sizes=auto i]){contain-intrinsic-size:3000px 1500px}
background-repeat: no-repeat !important; background-repeat: no-repeat !important;
background-size: cover !important; background-size: cover !important;
} }
/* STYLE BLOCK 51: unified mobile gutters for card/content sections */
@media (max-width: 767px) {
:root { --dm-mobile-gutter: 10px; }
.elementor.elementor-61 .elementor-element.elementor-element-89a0ca1,
.elementor.elementor-61 .elementor-element.elementor-element-88745f4,
.elementor.elementor-86 .elementor-element.elementor-element-c2c601a,
.elementor.elementor-104 .elementor-element.elementor-element-c70681e {
--padding-left: var(--dm-mobile-gutter) !important;
--padding-right: var(--dm-mobile-gutter) !important;
padding-left: var(--dm-mobile-gutter) !important;
padding-right: var(--dm-mobile-gutter) !important;
box-sizing: border-box !important;
}
.elementor.elementor-61 .elementor-element.elementor-element-3b4a7cc {
--padding-left: 10px !important;
--padding-right: 10px !important;
padding-left: 10px !important;
padding-right: 10px !important;
box-sizing: border-box !important;
}
.elementor.elementor-61 .elementor-element.elementor-element-89a0ca1 > .e-con-inner,
.elementor.elementor-61 .elementor-element.elementor-element-88745f4 > .e-con-inner,
.elementor.elementor-61 .elementor-element.elementor-element-3b4a7cc > .e-con-inner,
.elementor.elementor-86 .elementor-element.elementor-element-c2c601a > .e-con-inner,
.elementor.elementor-104 .elementor-element.elementor-element-c70681e > .e-con-inner {
width: 100% !important;
max-width: 100% !important;
margin-left: auto !important;
margin-right: auto !important;
padding-left: 0 !important;
padding-right: 0 !important;
box-sizing: border-box !important;
}
.elementor.elementor-61 .elementor-element.elementor-element-89a0ca1 > .e-con-inner > .e-con,
.elementor.elementor-61 .elementor-element.elementor-element-88745f4 > .e-con-inner > .e-con,
.elementor.elementor-61 .elementor-element.elementor-element-3b4a7cc > .e-con-inner > .e-con,
.elementor.elementor-86 .elementor-element.elementor-element-c2c601a > .e-con-inner > .e-con,
.elementor.elementor-104 .elementor-element.elementor-element-c70681e > .e-con-inner > .e-con {
--padding-left: 0px !important;
--padding-right: 0px !important;
width: 100% !important;
max-width: 100% !important;
padding-left: 0 !important;
padding-right: 0 !important;
box-sizing: border-box !important;
}
.elementor.elementor-61 .elementor-element.elementor-element-6829276 {
--e-con-grid-template-columns: minmax(0, 1fr) !important;
--grid-justify-content: stretch !important;
--justify-items: stretch !important;
grid-template-columns: minmax(0, 1fr) !important;
justify-content: stretch !important;
justify-items: stretch !important;
min-width: 0 !important;
}
.elementor.elementor-61 .industry-solutions-grid,
.elementor.elementor-61 .industry-card-link {
width: 100% !important;
max-width: 100% !important;
min-width: 0 !important;
}
.comparison-section .container {
width: calc(100% - (var(--dm-mobile-gutter) * 2)) !important;
max-width: calc(100% - (var(--dm-mobile-gutter) * 2)) !important;
margin-left: auto !important;
margin-right: auto !important;
padding-left: 0 !important;
padding-right: 0 !important;
box-sizing: border-box !important;
}
.wcd-inner {
width: 100% !important;
max-width: 100% !important;
padding-left: 0 !important;
padding-right: 0 !important;
box-sizing: border-box !important;
}
}

188
src/app/globals.css
View File

@@ -25,6 +25,7 @@ html {
--space-section: clamp(40px, 5vw, 64px); --space-section: clamp(40px, 5vw, 64px);
--space-section-lg: clamp(52px, 6vw, 80px); --space-section-lg: clamp(52px, 6vw, 80px);
--space-hero-gap: clamp(36px, 4.5vw, 64px); --space-hero-gap: clamp(36px, 4.5vw, 64px);
--dm-mobile-gutter: 10px;
} }
.dm-section { .dm-section {
@@ -460,7 +461,7 @@ body {
@media (max-width: 720px) { @media (max-width: 720px) {
.dm-contact-left { .dm-contact-left {
min-height: auto; min-height: auto;
padding: 42px 22px 58px; padding: 42px 20px 58px;
} }
.dm-contact-title { .dm-contact-title {
@@ -478,43 +479,43 @@ body {
} }
.dm-contact-card { .dm-contact-card {
margin: 0 16px 32px; margin: 0 20px 28px;
padding: 44px 22px 34px; padding: 28px 20px 24px;
border-radius: 24px; border-radius: 28px;
} }
.dm-contact-card h3 { .dm-contact-card h3 {
margin-bottom: 34px; margin-bottom: 24px;
} }
.dm-contact-form { .dm-contact-form {
gap: 20px; gap: 18px;
} }
.dm-contact-form input { .dm-contact-form input {
height: 60px; height: 56px;
padding: 0 20px; padding: 0 18px;
} }
.dm-contact-form textarea { .dm-contact-form textarea {
min-height: 190px; min-height: 170px;
padding: 20px; padding: 18px;
} }
.dm-contact-submit { .dm-contact-submit {
width: 100%; width: 100%;
height: 64px; height: 60px;
} }
.dm-contact-submit span:first-child { .dm-contact-submit span:first-child {
flex: 1 1 auto; flex: 1 1 auto;
min-width: 0; min-width: 0;
padding: 0 22px; padding: 0 20px;
} }
.dm-contact-submit-icon { .dm-contact-submit-icon {
width: 64px; width: 60px;
min-width: 64px; min-width: 60px;
} }
} }
@@ -537,7 +538,131 @@ body {
.industry-solutions-grid { .industry-solutions-grid {
grid-template-columns: 1fr; grid-template-columns: 1fr;
} }
}.industry-card-link { .elementor.elementor-61 .elementor-element.elementor-element-3b4a7cc {
--padding-left: 10px !important;
--padding-right: 10px !important;
padding-left: 10px !important;
padding-right: 10px !important;
box-sizing: border-box !important;
}
.elementor.elementor-61 .elementor-element.elementor-element-3b4a7cc > .e-con-inner {
width: 100% !important;
max-width: 100% !important;
margin-left: auto !important;
margin-right: auto !important;
padding-left: 0 !important;
padding-right: 0 !important;
}
}
@media (max-width: 767px) {
.elementor.elementor-61 .elementor-element.elementor-element-3b4a7cc > .e-con-inner {
max-width: 100% !important;
width: 100% !important;
margin-left: auto !important;
margin-right: auto !important;
padding-left: 0 !important;
padding-right: 0 !important;
}
.elementor.elementor-61 .elementor-element.elementor-element-d602f7f,
.elementor.elementor-61 .elementor-element.elementor-element-f64bd88,
.elementor.elementor-61 .elementor-element.elementor-element-5ed2dbb,
.elementor.elementor-61 .elementor-element.elementor-element-6829276 {
--padding-left: 0px !important;
--padding-right: 0px !important;
--margin-left: 0px !important;
--margin-right: 0px !important;
width: 100% !important;
max-width: 100% !important;
margin-left: 0 !important;
margin-right: 0 !important;
padding-left: 0 !important;
padding-right: 0 !important;
box-sizing: border-box;
}
.elementor.elementor-61 .elementor-element.elementor-element-6829276 {
--e-con-grid-template-columns: minmax(0, 1fr) !important;
--grid-justify-content: stretch !important;
--justify-items: stretch !important;
grid-template-columns: minmax(0, 1fr) !important;
justify-content: stretch !important;
justify-items: stretch !important;
min-width: 0 !important;
}
.elementor.elementor-61 .industry-solutions-grid,
.elementor.elementor-61 .industry-card-link {
max-width: 100%;
width: 100%;
min-width: 0;
}
.elementor.elementor-61 .industry-solutions-grid {
margin-left: 0 !important;
margin-right: 0 !important;
}
}
@media (max-width: 767px) {
.elementor.elementor-61 .elementor-element.elementor-element-89a0ca1,
.elementor.elementor-61 .elementor-element.elementor-element-88745f4,
.elementor.elementor-86 .elementor-element.elementor-element-c2c601a,
.elementor.elementor-104 .elementor-element.elementor-element-c70681e {
--padding-left: var(--dm-mobile-gutter) !important;
--padding-right: var(--dm-mobile-gutter) !important;
padding-left: var(--dm-mobile-gutter) !important;
padding-right: var(--dm-mobile-gutter) !important;
box-sizing: border-box !important;
}
.elementor.elementor-61 .elementor-element.elementor-element-89a0ca1 > .e-con-inner,
.elementor.elementor-61 .elementor-element.elementor-element-88745f4 > .e-con-inner,
.elementor.elementor-86 .elementor-element.elementor-element-c2c601a > .e-con-inner,
.elementor.elementor-104 .elementor-element.elementor-element-c70681e > .e-con-inner {
width: 100% !important;
max-width: 100% !important;
margin-left: auto !important;
margin-right: auto !important;
padding-left: 0 !important;
padding-right: 0 !important;
box-sizing: border-box !important;
}
.elementor.elementor-61 .elementor-element.elementor-element-89a0ca1 > .e-con-inner > .e-con,
.elementor.elementor-61 .elementor-element.elementor-element-88745f4 > .e-con-inner > .e-con,
.elementor.elementor-86 .elementor-element.elementor-element-c2c601a > .e-con-inner > .e-con,
.elementor.elementor-104 .elementor-element.elementor-element-c70681e > .e-con-inner > .e-con {
--padding-left: 0px !important;
--padding-right: 0px !important;
width: 100% !important;
max-width: 100% !important;
padding-left: 0 !important;
padding-right: 0 !important;
box-sizing: border-box !important;
}
.comparison-section .container {
width: calc(100% - (var(--dm-mobile-gutter) * 2)) !important;
max-width: calc(100% - (var(--dm-mobile-gutter) * 2)) !important;
margin-left: auto !important;
margin-right: auto !important;
padding-left: 0 !important;
padding-right: 0 !important;
box-sizing: border-box !important;
}
.wcd-inner {
width: 100% !important;
max-width: 100% !important;
padding-left: 0 !important;
padding-right: 0 !important;
box-sizing: border-box !important;
}
}
.industry-card-link {
position: relative; position: relative;
height: 600px; height: 600px;
border-radius: 30px; border-radius: 30px;
@@ -899,12 +1024,14 @@ body {
to 600px at <= 840px. Earlier this card shrank at <= 1536px, which is why the to 600px at <= 840px. Earlier this card shrank at <= 1536px, which is why the
About hero looked smaller than Home on MacBook M1/Pro (their ~1440-1512px logical About hero looked smaller than Home on MacBook M1/Pro (their ~1440-1512px logical
width falls below 1536px). Match the home breakpoint instead. */ width falls below 1536px). Match the home breakpoint instead. */
@media (max-width: 840px) { @media (max-width: 1024px) {
.custom-standard-hero-container { .custom-standard-hero-container {
/* No top gap on mobile: the hero card sits flush to the top so the floating /* No top gap on mobile/tablet: the hero card sits flush to the top so the floating
navbar rests directly on the hero instead of leaving a band above it. */ navbar rests directly on the hero instead of leaving a band above it. */
padding: 0 10px 10px 10px !important; padding: 0 10px 10px 10px !important;
} }
}
@media (max-width: 840px) {
.custom-standard-hero-card { .custom-standard-hero-card {
height: 600px !important; height: 600px !important;
min-height: 600px !important; min-height: 600px !important;
@@ -929,5 +1056,30 @@ body {
.miletruth-hero-container { .miletruth-hero-container {
margin-top: 0 !important; margin-top: 0 !important;
} }
}
/* Audit & align section rhythm on mobile/tablet across all content pages */
.elementor-86 #women-entrepreneurship.elementor-element-bbc6760,
.elementor-86 .comparison-section,
.elementor-86 .elementor-element.elementor-element-bbc6760:not(#women-entrepreneurship),
.elementor-86 .elementor-element.elementor-element-c2c601a,
.elementor-59 .elementor-element.elementor-element-bbc6760,
.elementor-104 .elementor-element.elementor-element-c70681e {
margin-top: var(--space-section) !important;
margin-bottom: 0 !important;
}
/* Solutions page: First section under Solutions Hero gets the hero gap */
.elementor-59 .elementor-element.elementor-element-3b4a7cc {
margin-top: var(--space-hero-gap) !important;
margin-bottom: 0 !important;
}
/* About page: First section under About Hero gets the hero gap */
.elementor-86 .elementor-element.elementor-element-88745f4:first-of-type {
margin-top: var(--space-hero-gap) !important;
}
/* About page: Subsequent sections get standard section spacing */
.elementor-86 .elementor-element.elementor-element-88745f4 ~ .elementor-element.elementor-element-88745f4 {
margin-top: var(--space-section) !important;
}
}

5
src/components/layout/Header.tsx
View File

@@ -775,6 +775,9 @@ export default function Header() {
/* Responsive logo adjustment on mobile/tablet */ /* Responsive logo adjustment on mobile/tablet */
@media (max-width: 1024px) { @media (max-width: 1024px) {
#masthead .elementor-element.elementor-element-466de1b {
top: 18px !important;
}
#masthead .elementor-element.elementor-element-846e53d .hfe-site-logo .hfe-site-logo-container img { #masthead .elementor-element.elementor-element-846e53d .hfe-site-logo .hfe-site-logo-container img {
width: 150px !important; width: 150px !important;
height: auto !important; height: auto !important;
@@ -793,7 +796,7 @@ export default function Header() {
to the top once scrolled past 50px, matching desktop behaviour. */ to the top once scrolled past 50px, matching desktop behaviour. */
#masthead .elementor-element.elementor-element-466de1b.dm-header-scrolled { #masthead .elementor-element.elementor-element-466de1b.dm-header-scrolled {
position: fixed !important; position: fixed !important;
top: 0 !important; top: 18px !important;
left: 0 !important; left: 0 !important;
right: 0 !important; right: 0 !important;
} }

13
src/components/layout/LoadingScreen.tsx
View File

@@ -118,11 +118,20 @@ export default function LoadingScreen() {
const originalPushState = window.history.pushState; const originalPushState = window.history.pushState;
const originalReplaceState = window.history.replaceState; const originalReplaceState = window.history.replaceState;
const scheduleHistoryTransition = (targetPath: string) => {
const currentPath = getRoutePath(new URL(window.location.href));
if (targetPath === currentPath) return;
window.setTimeout(() => {
startTransition(targetPath, true);
}, 0);
};
window.history.pushState = function patchedPushState(...args) { window.history.pushState = function patchedPushState(...args) {
const urlArg = args[2]; const urlArg = args[2];
if (typeof urlArg === "string" || urlArg instanceof URL) { if (typeof urlArg === "string" || urlArg instanceof URL) {
const url = new URL(urlArg, window.location.href); const url = new URL(urlArg, window.location.href);
if (url.origin === window.location.origin) startTransition(getRoutePath(url)); if (url.origin === window.location.origin) scheduleHistoryTransition(getRoutePath(url));
} }
return originalPushState.apply(this, args); return originalPushState.apply(this, args);
}; };
@@ -131,7 +140,7 @@ export default function LoadingScreen() {
const urlArg = args[2]; const urlArg = args[2];
if (typeof urlArg === "string" || urlArg instanceof URL) { if (typeof urlArg === "string" || urlArg instanceof URL) {
const url = new URL(urlArg, window.location.href); const url = new URL(urlArg, window.location.href);
if (url.origin === window.location.origin) startTransition(getRoutePath(url)); if (url.origin === window.location.origin) scheduleHistoryTransition(getRoutePath(url));
} }
return originalReplaceState.apply(this, args); return originalReplaceState.apply(this, args);
}; };

27
src/components/sections/AboutCTA.tsx
View File

@@ -3,7 +3,31 @@ import Link from "next/link";
export default function AboutCTA() { export default function AboutCTA() {
return ( return (
<div className="we-container"> <>
<style dangerouslySetInnerHTML={{ __html: `
@media (max-width: 768px) {
.we-container {
margin-top: 40px !important;
margin-bottom: 40px !important;
padding: 0 10px !important;
}
.we-cta {
padding: 48px 20px !important;
border-radius: 22px !important;
}
.we-cta-title {
font-size: clamp(28px, 6vw, 38px) !important;
line-height: 1.25 !important;
margin-bottom: 16px !important;
}
.we-cta-sub {
font-size: 15px !important;
line-height: 1.5 !important;
margin-bottom: 24px !important;
}
}
`}} />
<div className="we-container">
<div className="we-cta reveal"> <div className="we-cta reveal">
<div className="we-cta-inner"> <div className="we-cta-inner">
<h2 className="we-cta-title"> <h2 className="we-cta-title">
@@ -26,5 +50,6 @@ export default function AboutCTA() {
</div> </div>
</div> </div>
</div> </div>
</>
); );
} }

2
src/components/sections/AboutHero.tsx
View File

@@ -9,7 +9,7 @@ export default function AboutHero() {
width: 100% !important; width: 100% !important;
text-align: center !important; text-align: center !important;
color: #fff !important; color: #fff !important;
padding: 40px !important; padding: 0 15px !important;
z-index: 2; z-index: 2;
display: flex !important; display: flex !important;
flex-direction: column !important; flex-direction: column !important;

33
src/components/sections/BlogGrid.tsx
View File

@@ -26,9 +26,40 @@ export default function BlogGrid() {
} }
} }
@media (max-width: 768px) { @media (max-width: 768px) {
.elementor-104 .elementor-element.elementor-element-c70681e {
margin-top: var(--space-section) !important;
margin-bottom: 16px !important;
}
.custom-blog-grid { .custom-blog-grid {
grid-template-columns: 1fr !important; grid-template-columns: 1fr !important;
gap: 48px !important; gap: 28px !important;
padding: 24px 20px !important;
}
}
@media (max-width: 767px) {
.elementor-104 .elementor-element.elementor-element-c70681e {
--padding-left: 10px !important;
--padding-right: 10px !important;
padding-left: 10px !important;
padding-right: 10px !important;
}
.elementor-104 .elementor-element.elementor-element-3dec5cf {
--padding-left: 0px !important;
--padding-right: 0px !important;
padding-left: 0 !important;
padding-right: 0 !important;
}
.elementor-104 .elementor-element.elementor-element-aa12479,
.elementor-104 .elementor-element.elementor-element-aa12479 > .elementor-widget-container,
.elementor-104 .archive-listing,
.elementor-104 .custom-blog-grid {
width: 100% !important;
max-width: 100% !important;
}
.elementor-104 .custom-blog-grid {
padding-left: 0 !important;
padding-right: 0 !important;
} }
} }

6
src/components/sections/BlogPostFooter.tsx
View File

@@ -147,6 +147,12 @@ const STYLES = `
padding: clamp(24px, 3vw, 32px) clamp(20px, 4vw, 40px) clamp(8px, 1.5vw, 16px); padding: clamp(24px, 3vw, 32px) clamp(20px, 4vw, 40px) clamp(8px, 1.5vw, 16px);
display: flex; flex-direction: column; gap: clamp(32px, 4vw, 48px); display: flex; flex-direction: column; gap: clamp(32px, 4vw, 48px);
} }
@media (max-width: 767px) {
.dm-blog-footer-inner {
padding-left: 16px;
padding-right: 16px;
}
}
/* Prev / Next */ /* Prev / Next */
.dm-prevnext { .dm-prevnext {

15
src/components/sections/BlogsHero.tsx
View File

@@ -15,6 +15,19 @@ export default function BlogsHero() {
letter-spacing: -1.5px !important; letter-spacing: -1.5px !important;
margin: 0 !important; margin: 0 !important;
} }
.blogs-hero-content {
position: relative !important;
width: 100% !important;
height: 100% !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
flex-direction: column !important;
max-width: 1000px !important;
margin: 0 auto !important;
padding: 0 15px !important;
box-sizing: border-box !important;
}
`}} /> `}} />
<div className="custom-standard-hero-container"> <div className="custom-standard-hero-container">
<div <div
@@ -26,7 +39,7 @@ export default function BlogsHero() {
}} }}
className="custom-standard-hero-card" className="custom-standard-hero-card"
> >
<div className="e-con-inner" style={{ position: "relative", width: "100%", height: "100%", display: "flex", alignItems: "center", justifyContent: "center", flexDirection: "column" }}> <div className="blogs-hero-content">
{/* Title / Heading for Blogs */} {/* Title / Heading for Blogs */}
<div style={{ textAlign: "center", color: "#fff", zIndex: 5 }}> <div style={{ textAlign: "center", color: "#fff", zIndex: 5 }}>

6
src/components/sections/CompetitiveEdge.tsx
View File

@@ -492,7 +492,11 @@ export default function CompetitiveEdge() {
@media (max-width: 768px) { @media (max-width: 768px) {
.comparison-section { .comparison-section {
padding: 80px 0; padding: 56px 0;
}
.comparison-section .container {
padding: 0 10px;
} }
.moat-heading { .moat-heading {

45
src/components/sections/ConnectedLogistics.tsx
View File

@@ -86,9 +86,20 @@ export default function ConnectedLogistics() {
padding-right: 0 !important; padding-right: 0 !important;
} }
/* Force ScrollReveal wrapper div to span full width */
.elementor-element-96343ba > div {
width: 100% !important;
height: auto !important;
}
/* Show image at the bottom or top depending on order */ /* Show image at the bottom or top depending on order */
.elementor-element-96343ba { .elementor-element-96343ba {
margin-top: 30px !important; margin-top: 0px !important;
}
/* Reduce padding bottom of the content section on tablet */
.elementor-element-71c3e1d {
padding-bottom: 24px !important;
} }
/* Override desktop fixed widths on mobile/tablet */ /* Override desktop fixed widths on mobile/tablet */
@@ -98,27 +109,49 @@ export default function ConnectedLogistics() {
max-width: 100% !important; max-width: 100% !important;
} }
/* Tablet overrides: ~15% smaller than site.css's 450px with centered layout */ /* Allow widget container to take 100% width on mobile/tablet */
.elementor-element-99768ba {
width: 100% !important;
max-width: 100% !important;
}
/* Tablet overrides */
.elementor-element-99768ba .elementor-widget-container { .elementor-element-99768ba .elementor-widget-container {
padding: 30px !important; padding: 10px !important;
display: block !important; /* Disable flex centering layout on mobile/tablet */
width: 100% !important;
} }
.elementor-element.elementor-element-99768ba .elementor-widget-container img.wp-image-4481 { .elementor-element.elementor-element-99768ba .elementor-widget-container img.wp-image-4481 {
width: 100% !important; width: 100% !important;
max-width: 382px !important; max-width: 600px !important; /* allow up to 600px on tablet */
border-radius: 25px !important; /* Explicitly keep 25px */ border-radius: 25px !important; /* Explicitly keep 25px */
} }
} }
@media (max-width: 767px) { @media (max-width: 767px) {
/* Mobile overrides: ~15% smaller than site.css's 90% with 10% identical padding on all 4 sides */ /* Mobile overrides: let container take 100% width and image fill it */
.elementor-element-99768ba {
width: 100% !important;
max-width: 100% !important;
}
/* Eliminate extra gap under the content column on mobile */
.elementor-element-71c3e1d {
padding-bottom: 12px !important;
}
.elementor-element-99768ba .elementor-widget-container { .elementor-element-99768ba .elementor-widget-container {
padding: 10% !important; padding: 0px !important; /* Eliminate padding to maximize image width/height */
display: block !important; /* Disable flex centering layout on mobile/tablet */
width: 100% !important;
} }
.elementor-element.elementor-element-99768ba .elementor-widget-container img.wp-image-4481 { .elementor-element.elementor-element-99768ba .elementor-widget-container img.wp-image-4481 {
width: 100% !important; width: 100% !important;
max-width: 100% !important; max-width: 100% !important;
height: auto !important;
object-fit: cover !important;
border-radius: 25px !important; /* Explicitly keep 25px */ border-radius: 25px !important; /* Explicitly keep 25px */
} }
} }

53
src/components/sections/EVLogisticSection.tsx
View File

@@ -346,10 +346,57 @@ export default function EVLogisticSection() {
} }
@media (max-width: 768px) { @media (max-width: 767px) {
.ev-logistic-section {
--padding-left: 10px !important;
--padding-right: 10px !important;
padding-left: 10px !important;
padding-right: 10px !important;
box-sizing: border-box !important;
}
.ev-logistic-section > .e-con-inner {
width: 100% !important;
max-width: 100% !important;
padding-left: 0 !important;
padding-right: 0 !important;
margin-left: auto !important;
margin-right: auto !important;
box-sizing: border-box !important;
}
.ev-logistic-section .elementor-element-343b363 {
--padding-left: 0px !important;
--padding-right: 0px !important;
padding-left: 0 !important;
padding-right: 0 !important;
width: 100% !important;
max-width: 100% !important;
box-sizing: border-box !important;
}
.ev-logistic-body-grid {
width: 100% !important;
max-width: 100% !important;
align-items: stretch !important;
}
.ev-logistic-content-col {
width: 100% !important;
max-width: 100% !important;
align-self: center !important;
}
.ev-feature-grid { .ev-feature-grid {
grid-template-columns: 1fr !important; grid-template-columns: 1fr !important;
gap: 20px !important; gap: 20px !important;
width: 100% !important;
max-width: 100% !important;
}
.ev-feature-card {
width: 100% !important;
max-width: 100% !important;
} }
} }
`}} /> `}} />
@@ -368,7 +415,7 @@ export default function EVLogisticSection() {
<div className="ev-logistic-header"> <div className="ev-logistic-header">
<div className="elementor-element elementor-element-7afb238 elementor-widget elementor-widget-logico_heading ev-logistic-kicker-widget" data-id="7afb238" data-element_type="widget" data-e-type="widget" data-widget_type="logico_heading.default"> <div className="elementor-element elementor-element-7afb238 elementor-widget elementor-widget-logico_heading ev-logistic-kicker-widget" data-id="7afb238" data-element_type="widget" data-e-type="widget" data-widget_type="logico_heading.default">
<div className="elementor-widget-container"> <div className="elementor-widget-container">
<div className="logico-title ev-logistic-kicker">/ Build Electric Vehicles /</div> <div className="logico-title ev-logistic-kicker">/ Built for Electric Vehicles /</div>
</div> </div>
</div> </div>
<div className="ev-logistic-title-wrapper"> <div className="ev-logistic-title-wrapper">
@@ -382,7 +429,7 @@ export default function EVLogisticSection() {
fontWeight: 800, fontWeight: 800,
}} }}
> >
LOGISTICS BUILT FOR ELECTRIC VEHICLES Logistics Built for EV Vehicles
</div> </div>
</div> </div>
</div> </div>

113
src/components/sections/EVSection.tsx
View File

@@ -390,6 +390,7 @@ export default function EVSection({
const outerClass = const outerClass =
"elementor-element elementor-element-bbc6760 e-con-full e-flex cut-corner-no sticky-container-off e-con e-parent" + "elementor-element elementor-element-bbc6760 e-con-full e-flex cut-corner-no sticky-container-off e-con e-parent" +
(useDashboard ? " evnd-workflow-shell" : "") +
(gapTop ? " evnd-gap-top" : "") + (gapTop ? " evnd-gap-top" : "") +
(gapBottom ? " evnd-gap-bottom" : ""); (gapBottom ? " evnd-gap-bottom" : "");
@@ -1057,9 +1058,47 @@ export default function EVSection({
.evnd__dash-kpis { grid-template-columns: repeat(4, 1fr); } .evnd__dash-kpis { grid-template-columns: repeat(4, 1fr); }
} }
@media (max-width: 767px) { @media (max-width: 767px) {
.elementor.elementor-61 .elementor-element.elementor-element-bbc6760,
.elementor-element.elementor-element-bbc6760.evnd-workflow-shell {
width: calc(100% - 20px) !important;
margin-left: 10px !important;
margin-right: 10px !important;
padding-left: 0px !important;
padding-right: 0px !important;
box-sizing: border-box !important;
}
.evnd-gap-top { margin-top: 24px !important; } .evnd-gap-top { margin-top: 24px !important; }
.evnd-gap-bottom { margin-bottom: 24px !important; } .evnd-gap-bottom { margin-bottom: 24px !important; }
.evnd__bar { grid-template-columns: repeat(2, 1fr); gap: 24px 0; padding: 24px 0; margin-top: 24px; } .evnd { padding-inline: 0; }
.evnd__heading {
padding-left: 26px;
padding-right: 26px;
box-sizing: border-box;
margin-bottom: 28px;
display: flow-root;
}
.evnd__inner {
padding-left: 4px;
padding-right: 4px;
box-sizing: border-box;
}
.evnd__dash {
padding-left: 12px !important;
padding-right: 12px !important;
}
.evnd__bar {
grid-template-columns: repeat(2, 1fr);
gap: 24px 0;
width: calc(100% - 8px);
max-width: calc(100% - 8px);
margin: 32px auto 0;
padding: 24px 0;
box-sizing: border-box;
}
.evnd.evnd--cards {
padding-bottom: 20px;
margin-bottom: 0;
}
.evnd__bar-item:nth-child(even)::after { display: none; } .evnd__bar-item:nth-child(even)::after { display: none; }
.evnd__bar-item:nth-child(2)::after { display: none; } .evnd__bar-item:nth-child(2)::after { display: none; }
.evnd__bar-item { padding: 12px 16px; } .evnd__bar-item { padding: 12px 16px; }
@@ -1080,12 +1119,66 @@ export default function EVSection({
.evnd__grid--cards .evnd__left, .evnd__grid--cards .evnd__left,
.evnd__grid--cards .evnd__right, .evnd__grid--cards .evnd__right,
.evnd__grid--cards .evnd__media, .evnd__grid--cards .evnd__media,
.evnd__grid--cards .evnd__dash { min-width: 0; } .evnd__grid--cards .evnd__dash {
min-width: 0;
width: 100% !important;
max-width: 100% !important;
box-sizing: border-box !important;
}
/* Keep the KPI row a tidy 2x2 on phones. */ /* Keep the KPI row a tidy 2x2 on phones. */
.evnd__dash-kpis { grid-template-columns: repeat(2, 1fr); } .evnd__dash-kpis { grid-template-columns: repeat(2, 1fr); }
/* Workflow feature cards: distribute content like the Women stats
rows so the icon balances the right side instead of everything
clustering at the left edge. */
.evnd-workflow-shell .evnd__dash-feats { gap: 10px; }
.evnd-workflow-shell .evnd__dfeat {
grid-template-columns: minmax(0, 1fr) 36px;
gap: 12px;
padding: 12px 14px;
}
.evnd-workflow-shell .evnd__dfeat-ico {
grid-column: 2;
grid-row: 1;
justify-self: end;
width: 36px;
height: 36px;
}
.evnd-workflow-shell .evnd__dfeat-body {
grid-column: 1;
grid-row: 1;
}
/* ---- Mobile-only overrides for Hero Image & EV Logistics Card ---- */
.elementor-element.elementor-element-7da6646 {
width: calc(100% - 16px) !important;
margin-left: 8px !important;
margin-right: 8px !important;
border-radius: 18px !important;
margin-top: 15px !important;
margin-bottom: -50px !important;
box-sizing: border-box !important;
}
.elementor-element.elementor-element-8b5d6e6 {
padding-left: 8px !important;
padding-right: 8px !important;
margin-left: 0px !important;
margin-right: 0px !important;
width: 100% !important;
max-width: 100% !important;
box-sizing: border-box !important;
}
.elementor-element.elementor-element-1f766ea {
padding-left: 0px !important;
padding-right: 0px !important;
margin-left: auto !important;
margin-right: auto !important;
width: 100% !important;
max-width: 100% !important;
}
} }
@media (max-width: 480px) { @media (max-width: 480px) {
.evnd { padding: 40px 16px 48px; } .evnd { padding: 40px 16px 48px; }
.evnd { padding-inline: 0; }
.evnd__bar { grid-template-columns: repeat(2, 1fr); gap: 18px 0; padding: 22px 0; } .evnd__bar { grid-template-columns: repeat(2, 1fr); gap: 18px 0; padding: 22px 0; }
.evnd__bar-item { padding: 10px 12px; gap: 8px; } .evnd__bar-item { padding: 10px 12px; gap: 8px; }
.evnd__bar-val { font-size: clamp(26px, 9vw, 34px); } .evnd__bar-val { font-size: clamp(26px, 9vw, 34px); }
@@ -1104,13 +1197,13 @@ export default function EVSection({
.evnd-feature__arrow { position: absolute; top: 16px; right: 16px; margin: 0; } .evnd-feature__arrow { position: absolute; top: 16px; right: 16px; margin: 0; }
/* ---- Compact dashboard (phones) ---- */ /* ---- Compact dashboard (phones) ---- */
.evnd__dash { padding: 18px; gap: 14px; } .evnd__dash { padding-top: 18px !important; padding-bottom: 18px !important; gap: 14px; }
.evnd__dash-sys { display: none; } .evnd__dash-sys { display: none; }
.evnd__dash-kpis { gap: 10px; } .evnd__dash-kpis { gap: 10px; }
.evnd__kpi { padding: 12px 14px; gap: 4px; } .evnd__kpi { padding: 12px 14px; gap: 4px; }
.evnd__kpi-val { font-size: clamp(24px, 8vw, 30px); } .evnd__kpi-val { font-size: clamp(24px, 8vw, 30px); }
.evnd__kpi-label { font-size: 12px; } .evnd__kpi-label { font-size: 12px; }
.evnd__dfeat { padding: 12px 14px; gap: 12px; grid-template-columns: 34px minmax(0, 1fr); } .evnd-workflow-shell .evnd__dfeat { padding: 11px 12px; gap: 10px; grid-template-columns: minmax(0, 1fr) 34px; }
.evnd__dfeat-ico { width: 34px; height: 34px; border-radius: 9px; } .evnd__dfeat-ico { width: 34px; height: 34px; border-radius: 9px; }
.evnd__dfeat-ico svg { width: 17px; height: 17px; } .evnd__dfeat-ico svg { width: 17px; height: 17px; }
.evnd__dfeat-title { font-size: 13.5px; } .evnd__dfeat-title { font-size: 13.5px; }
@@ -1241,11 +1334,13 @@ export default function EVSection({
useDashboard && !mediaSlot ? " evnd__inner--img" : "" useDashboard && !mediaSlot ? " evnd__inner--img" : ""
}`} }`}
> >
<span className="evnd__eyebrow">{eyebrow}</span> <div className="evnd__heading">
<h2 className="evnd__title"> <span className="evnd__eyebrow">{eyebrow}</span>
{titleLead} <h2 className="evnd__title">
<span className="accent">{titleAccent}</span> {titleLead}
</h2> <span className="accent">{titleAccent}</span>
</h2>
</div>
{/* MAIN GRID */} {/* MAIN GRID */}
<div <div

27
src/components/sections/HowItWorksHero.tsx
View File

@@ -47,7 +47,7 @@ export default function HowItWorksHero() {
text-align: center !important; text-align: center !important;
width: 100% !important; width: 100% !important;
height: 100% !important; height: 100% !important;
padding: 0 40px !important; padding: 0 !important;
box-sizing: border-box !important; box-sizing: border-box !important;
} }
@@ -73,6 +73,8 @@ export default function HowItWorksHero() {
width: 100% !important; width: 100% !important;
margin-left: auto !important; margin-left: auto !important;
margin-right: auto !important; margin-right: auto !important;
padding-left: 15px !important;
padding-right: 15px !important;
} }
.elementor-element.elementor-element-6c7cbcb .content-slider-item-text { .elementor-element.elementor-element-6c7cbcb .content-slider-item-text {
@@ -86,6 +88,8 @@ export default function HowItWorksHero() {
text-align: center !important; text-align: center !important;
max-width: 820px !important; max-width: 820px !important;
margin: 0 auto !important; margin: 0 auto !important;
padding-left: 15px !important;
padding-right: 15px !important;
} }
/* Larger, more readable hero subtitle on large/4K screens */ /* Larger, more readable hero subtitle on large/4K screens */
@@ -109,10 +113,13 @@ export default function HowItWorksHero() {
@media (max-width: 1024px) { @media (max-width: 1024px) {
.elementor-element.elementor-element-741f56c { .elementor-element.elementor-element-741f56c {
width: calc(100% - 40px) !important; width: 100% !important;
max-width: none !important; max-width: 100% !important;
margin-left: auto !important; margin-left: auto !important;
margin-right: auto !important; margin-right: auto !important;
--padding-top: 0px !important;
--padding-block-start: 0px !important;
padding: 0 10px 10px 10px !important;
overflow: hidden !important; overflow: hidden !important;
border-radius: 25px !important; border-radius: 25px !important;
} }
@@ -134,15 +141,19 @@ export default function HowItWorksHero() {
.elementor-element.elementor-element-6c7cbcb .slide-content { .elementor-element.elementor-element-6c7cbcb .slide-content {
width: 100% !important; width: 100% !important;
min-height: 620px !important; min-height: 620px !important;
padding-left: 48px !important; padding-left: 0 !important;
padding-right: 48px !important; padding-right: 0 !important;
box-sizing: border-box !important; box-sizing: border-box !important;
} }
} }
@media (max-width: 767px) { @media (max-width: 767px) {
.elementor-element.elementor-element-741f56c { .elementor-element.elementor-element-741f56c {
width: calc(100% - 24px) !important; width: 100% !important;
max-width: 100% !important;
--padding-top: 0px !important;
--padding-block-start: 0px !important;
padding: 0 10px 10px 10px !important;
border-radius: 22px !important; border-radius: 22px !important;
} }
@@ -162,8 +173,8 @@ export default function HowItWorksHero() {
asymmetric top margin). */ asymmetric top margin). */
.elementor .elementor-element.elementor-element-6c7cbcb .slide-content { .elementor .elementor-element.elementor-element-6c7cbcb .slide-content {
min-height: 560px !important; min-height: 560px !important;
padding-left: 22px !important; padding-left: 0 !important;
padding-right: 22px !important; padding-right: 0 !important;
align-items: center !important; align-items: center !important;
justify-content: center !important; justify-content: center !important;
text-align: center !important; text-align: center !important;

63
src/components/sections/IndustrySolutions.tsx
View File

@@ -5,6 +5,66 @@ import { ScrollReveal } from "@/animations/Reveal";
export default function IndustrySolutions() { export default function IndustrySolutions() {
return ( return (
<>
<style dangerouslySetInnerHTML={{ __html: `
@media (max-width: 768px) {
.elementor-element.elementor-element-3b4a7cc {
--padding-left: 10px !important;
--padding-right: 10px !important;
padding-left: 10px !important;
padding-right: 10px !important;
box-sizing: border-box !important;
}
.elementor-element.elementor-element-3b4a7cc > .e-con-inner {
width: 100% !important;
max-width: 100% !important;
margin-left: auto !important;
margin-right: auto !important;
padding-left: 0 !important;
padding-right: 0 !important;
}
.elementor-element.elementor-element-d602f7f,
.elementor-element.elementor-element-f64bd88,
.elementor-element.elementor-element-5ed2dbb,
.elementor-element.elementor-element-6829276 {
--padding-left: 0px !important;
--padding-right: 0px !important;
--margin-left: 0px !important;
--margin-right: 0px !important;
width: 100% !important;
max-width: 100% !important;
margin-left: 0 !important;
margin-right: 0 !important;
padding-left: 0 !important;
padding-right: 0 !important;
box-sizing: border-box !important;
}
.elementor-element.elementor-element-6829276 {
--e-con-grid-template-columns: minmax(0, 1fr) !important;
--grid-justify-content: stretch !important;
--justify-items: stretch !important;
grid-template-columns: minmax(0, 1fr) !important;
justify-content: stretch !important;
justify-items: stretch !important;
min-width: 0 !important;
}
.industry-solutions-grid,
.industry-card-link {
width: 100% !important;
max-width: 100% !important;
min-width: 0 !important;
}
.industry-solutions-grid {
margin-left: 0 !important;
margin-right: 0 !important;
}
}
`}} />
<div className="elementor-element elementor-element-3b4a7cc e-flex e-con-boxed cut-corner-no sticky-container-off e-con e-parent" data-id="3b4a7cc" data-element_type="container" data-e-type="container"> <div className="elementor-element elementor-element-3b4a7cc e-flex e-con-boxed cut-corner-no sticky-container-off e-con e-parent" data-id="3b4a7cc" data-element_type="container" data-e-type="container">
<div className="e-con-inner"> <div className="e-con-inner">
<div className="elementor-element elementor-element-d602f7f e-con-full e-flex cut-corner-no sticky-container-off e-con e-child" data-id="d602f7f" data-element_type="container" data-e-type="container"> <div className="elementor-element elementor-element-d602f7f e-con-full e-flex cut-corner-no sticky-container-off e-con e-child" data-id="d602f7f" data-element_type="container" data-e-type="container">
@@ -278,6 +338,7 @@ export default function IndustrySolutions() {
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</>
); );
} }

2
src/components/sections/IndustryStack.tsx
View File

@@ -306,7 +306,7 @@ const CSS = `
#ind-stack .istk__content { max-width: none; } #ind-stack .istk__content { max-width: none; }
} }
@media (max-width: 600px) { @media (max-width: 600px) {
#ind-stack .istk { padding: 10px 14px; } #ind-stack .istk { padding: 10px; }
#ind-stack .istk__card { padding: 22px 20px; border-radius: 24px; } #ind-stack .istk__card { padding: 22px 20px; border-radius: 24px; }
#ind-stack .istk__media { height: 240px; } #ind-stack .istk__media { height: 240px; }
#ind-stack .istk__title { margin-bottom: 16px !important; } #ind-stack .istk__title { margin-bottom: 16px !important; }

16
src/components/sections/IntelligenceGrid.tsx
View File

@@ -234,7 +234,7 @@ export default function IntelligenceGrid() {
return ( return (
<div <div
ref={containerRef} ref={containerRef}
className="elementor-element elementor-element-bbc6760 e-con-full e-flex cut-corner-no sticky-container-off e-con e-parent" className="elementor-element elementor-element-bbc6760 e-con-full e-flex cut-corner-no sticky-container-off e-con e-parent intelligence-grid-section"
data-id="bbc6760" data-id="bbc6760"
data-element_type="container" data-element_type="container"
data-e-type="container" data-e-type="container"
@@ -710,11 +710,19 @@ export default function IntelligenceGrid() {
} }
} }
@media (max-width: 768px) { @media (max-width: 767px) {
.intelligence-grid-section {
--padding-left: 0px !important;
--padding-right: 0px !important;
padding-left: 0 !important;
padding-right: 0 !important;
}
.roadmap-hero-section { .roadmap-hero-section {
width: calc(100% - 24px); /* tighter 12px gutter so the band reads edge-to-edge on phones */ width: calc(100% - 32px) !important;
max-width: calc(100% - 32px) !important;
padding: 52px 16px 44px; padding: 52px 16px 44px;
border-radius: 22px; border-radius: 22px !important;
} }
.vision-main-subtitle { margin-bottom: 40px !important; } .vision-main-subtitle { margin-bottom: 40px !important; }

19
src/components/sections/MileTruthHero.tsx
View File

@@ -69,7 +69,7 @@ export default function MileTruthHero() {
justify-content: center; justify-content: center;
border-radius: 25px 25px 0 0; border-radius: 25px 25px 0 0;
margin-top: 20px; margin-top: 20px;
padding: 100px 40px; padding: 100px 0;
} }
.miletruth-hero-container::before { .miletruth-hero-container::before {
display: none !important; display: none !important;
@@ -78,7 +78,7 @@ export default function MileTruthHero() {
position: relative; position: relative;
z-index: 2; z-index: 2;
width: 100%; width: 100%;
padding: 0 40px !important; padding: 0 !important;
box-sizing: border-box; box-sizing: border-box;
} }
.miletruth-hero .content-slider-item-heading, .miletruth-hero .content-slider-item-heading,
@@ -114,7 +114,7 @@ export default function MileTruthHero() {
text-align: center !important; text-align: center !important;
width: 100% !important; width: 100% !important;
height: 100% !important; height: 100% !important;
padding: 0 40px !important; padding: 0 15px !important;
box-sizing: border-box !important; box-sizing: border-box !important;
} }
.miletruth-hero .slide-content, .miletruth-hero .slide-content,
@@ -258,9 +258,12 @@ export default function MileTruthHero() {
} }
} }
@media (max-width: 1024px) { @media (max-width: 1024px) {
.miletruth-hero .elementor-element-86f3204 {
padding: 0 10px !important;
}
.miletruth-hero-container { .miletruth-hero-container {
min-height: 600px; min-height: 600px;
padding: 120px 0; padding: 80px 0 !important;
} }
.miletruth-hero .elementor-element-8e5c81e { .miletruth-hero .elementor-element-8e5c81e {
padding: 40px 0 !important; padding: 40px 0 !important;
@@ -288,19 +291,19 @@ export default function MileTruthHero() {
@media (max-width: 580px) { @media (max-width: 580px) {
.miletruth-hero-container { .miletruth-hero-container {
min-height: 500px; min-height: 500px;
padding: 100px 0; padding: 60px 0 !important;
} }
.miletruth-hero .elementor-element-86f3204 { .miletruth-hero .elementor-element-86f3204 {
padding: 0 12px; padding: 0 10px !important;
} }
/* Collapse the nested horizontal padding (was 40px + 40px on top of the /* Collapse the nested horizontal padding (was 40px + 40px on top of the
12px wrapper) — at 320px that left only ~136px for text and the long 12px wrapper) — at 320px that left only ~136px for text and the long
heading words overflowed, causing horizontal scroll + off-center look. */ heading words overflowed, causing horizontal scroll + off-center look. */
.miletruth-content { .miletruth-content {
padding: 0 14px !important; padding: 0 !important;
} }
.miletruth-hero .slide-content { .miletruth-hero .slide-content {
padding: 0 !important; padding: 0 15px !important;
} }
.miletruth-hero .elementor-element-8e5c81e { .miletruth-hero .elementor-element-8e5c81e {
padding: 30px 0 !important; padding: 30px 0 !important;

29
src/components/sections/OurTeam.tsx
View File

@@ -87,8 +87,35 @@ export default function OurTeam() {
@media (max-width: 800px) { @media (max-width: 800px) {
.team-listing-wrapper.team-grid-listing .team-item-wrapper { width: 50%; } .team-listing-wrapper.team-grid-listing .team-item-wrapper { width: 50%; }
} }
@media (max-width: 767px) {
.elementor-86 .elementor-element-c2c601a > .e-con-inner {
padding-left: 0 !important;
padding-right: 0 !important;
padding-top: 32px !important;
padding-bottom: 32px !important;
}
.elementor-86 .elementor-element-c46350e > .elementor-widget-container {
margin-top: 24px !important;
margin-bottom: 24px !important;
}
.team-listing-wrapper.team-grid-listing {
margin: 0 0 -28px;
}
.team-listing-wrapper.team-grid-listing .team-item-wrapper {
width: 100%;
padding: 0;
margin-bottom: 28px;
}
}
@media (max-width: 480px) { @media (max-width: 480px) {
.team-listing-wrapper.team-grid-listing .team-item-wrapper { width: 100%; } .team-listing-wrapper.team-grid-listing {
margin: 0 0 -28px;
}
.team-listing-wrapper.team-grid-listing .team-item-wrapper {
width: 100%;
padding: 0;
margin-bottom: 28px;
}
} }
/* Card: photo on top, name/position at the bottom (down to image). */ /* Card: photo on top, name/position at the bottom (down to image). */

6
src/components/sections/SingleBlog.tsx
View File

@@ -227,6 +227,12 @@ const STYLES = `
/* 20px mobile padding floor → 40px on desktop; matches the footer container. */ /* 20px mobile padding floor → 40px on desktop; matches the footer container. */
padding: clamp(14px, 2vw, 26px) clamp(20px, 4vw, 40px) 0; padding: clamp(14px, 2vw, 26px) clamp(20px, 4vw, 40px) 0;
} }
@media (max-width: 767px) {
.dm-blog-wrap {
padding-left: 16px;
padding-right: 16px;
}
}
/* ── Article meta bar (directly under the hero) ── */ /* ── Article meta bar (directly under the hero) ── */
.dm-meta-bar { .dm-meta-bar {

29
src/components/sections/SolutionsHero.tsx
View File

@@ -45,7 +45,7 @@ export default function SolutionsHero() {
text-align: center !important; text-align: center !important;
width: 100% !important; width: 100% !important;
height: 100% !important; height: 100% !important;
padding: 0 40px !important; padding: 0 !important;
box-sizing: border-box !important; box-sizing: border-box !important;
} }
@@ -71,6 +71,8 @@ export default function SolutionsHero() {
width: 100% !important; width: 100% !important;
margin-left: auto !important; margin-left: auto !important;
margin-right: auto !important; margin-right: auto !important;
padding-left: 15px !important;
padding-right: 15px !important;
} }
.elementor-element.elementor-element-6c7cbcb .content-slider-item-text { .elementor-element.elementor-element-6c7cbcb .content-slider-item-text {
@@ -84,6 +86,8 @@ export default function SolutionsHero() {
text-align: center !important; text-align: center !important;
max-width: 820px !important; max-width: 820px !important;
margin: 0 auto !important; margin: 0 auto !important;
padding-left: 15px !important;
padding-right: 15px !important;
} }
/* Larger, more readable hero subtitle on large/4K screens */ /* Larger, more readable hero subtitle on large/4K screens */
@@ -107,10 +111,13 @@ export default function SolutionsHero() {
@media (max-width: 1024px) { @media (max-width: 1024px) {
.elementor-element.elementor-element-741f56c { .elementor-element.elementor-element-741f56c {
width: calc(100% - 40px) !important; width: 100% !important;
max-width: none !important; max-width: 100% !important;
margin-left: auto !important; margin-left: auto !important;
margin-right: auto !important; margin-right: auto !important;
--padding-top: 0px !important;
--padding-block-start: 0px !important;
padding: 0 10px 10px 10px !important;
overflow: hidden !important; overflow: hidden !important;
border-radius: 25px !important; border-radius: 25px !important;
} }
@@ -132,15 +139,19 @@ export default function SolutionsHero() {
.elementor-element.elementor-element-6c7cbcb .slide-content { .elementor-element.elementor-element-6c7cbcb .slide-content {
width: 100% !important; width: 100% !important;
min-height: 620px !important; min-height: 620px !important;
padding-left: 48px !important; padding-left: 0 !important;
padding-right: 48px !important; padding-right: 0 !important;
box-sizing: border-box !important; box-sizing: border-box !important;
} }
} }
@media (max-width: 767px) { @media (max-width: 767px) {
.elementor-element.elementor-element-741f56c { .elementor-element.elementor-element-741f56c {
width: calc(100% - 24px) !important; width: 100% !important;
max-width: 100% !important;
--padding-top: 0px !important;
--padding-block-start: 0px !important;
padding: 0 10px 10px 10px !important;
border-radius: 22px !important; border-radius: 22px !important;
} }
@@ -156,8 +167,8 @@ export default function SolutionsHero() {
.elementor-element.elementor-element-6c7cbcb .slide-content { .elementor-element.elementor-element-6c7cbcb .slide-content {
min-height: 560px !important; min-height: 560px !important;
padding-left: 22px !important; padding-left: 0 !important;
padding-right: 22px !important; padding-right: 0 !important;
} }
.elementor-element.elementor-element-6c7cbcb .content-slider-item-heading { .elementor-element.elementor-element-6c7cbcb .content-slider-item-heading {
@@ -165,6 +176,8 @@ export default function SolutionsHero() {
font-size: clamp(38px, 11vw, 48px) !important; font-size: clamp(38px, 11vw, 48px) !important;
line-height: 1.05 !important; line-height: 1.05 !important;
overflow-wrap: break-word !important; overflow-wrap: break-word !important;
padding-left: 15px !important;
padding-right: 15px !important;
} }
/* Pin the slide counter ("01/02") cleanly bottom-RIGHT — matching the /* Pin the slide counter ("01/02") cleanly bottom-RIGHT — matching the

8
src/components/sections/WhyChooseDoormile.tsx
View File

@@ -315,15 +315,15 @@ export default function WhyChooseDoormile() {
} }
@media (max-width: 1020px) { @media (max-width: 1020px) {
.wcd-section { margin: 0 15px 15px 15px; padding: 40px 0 80px; } .wcd-section { margin: 0 10px 10px 10px; padding: 40px 0 80px; }
.wcd-inner { padding: 0 30px; } .wcd-inner { padding: 0; }
.wcd-grid { grid-template-columns: 1fr; gap: 24px; } .wcd-grid { grid-template-columns: 1fr; gap: 24px; }
.wcd-card-body { padding: 32px; } .wcd-card-body { padding: 32px; }
.logico-front-end .wcd-section h3.wcd-card-title { font-size: 24px; } .logico-front-end .wcd-section h3.wcd-card-title { font-size: 24px; }
} }
@media (max-width: 480px) { @media (max-width: 480px) {
.wcd-section { margin: 0 12px 12px 12px; border-radius: 0 0 20px 20px; padding: 30px 0 64px; } .wcd-section { margin: 0 10px 10px 10px; border-radius: 0 0 20px 20px; padding: 30px 0 64px; }
.wcd-inner { padding: 0 20px; } .wcd-inner { padding: 0; }
.wcd-card-body { padding: 24px; } .wcd-card-body { padding: 24px; }
} }
`}} /> `}} />

146
src/components/sections/WomenSection.tsx
View File

@@ -179,6 +179,41 @@ export default function WomenSection() {
font-weight: 500; font-weight: 500;
} }
/* ---- Floating card sizing: content-driven, not container-driven ----
Matches the EV Logistics card height proportions exactly by trimming
red content padding and white footer min-height. */
.elementor-element.elementor-element-3b61435 {
--padding-top: 46px;
--padding-bottom: 38px;
}
.elementor-element.elementor-element-5aea22e {
--min-height: 38px;
--padding-top: 14px;
--padding-bottom: 14px;
}
@media (max-width: 1020px) {
.elementor-element.elementor-element-3b61435 {
--padding-top: 34px;
--padding-bottom: 28px;
}
.elementor-element.elementor-element-5aea22e {
--min-height: 32px;
--padding-top: 12px;
--padding-bottom: 12px;
}
}
@media (max-width: 660px) {
.elementor-element.elementor-element-3b61435 {
--padding-top: 26px;
--padding-bottom: 22px;
}
.elementor-element.elementor-element-5aea22e {
--min-height: 24px;
--padding-top: 10px;
--padding-bottom: 10px;
}
}
.elementor-element-778840d .logico-title { .elementor-element-778840d .logico-title {
white-space: nowrap !important; white-space: nowrap !important;
} }
@@ -192,9 +227,9 @@ export default function WomenSection() {
background-position: 78% center !important; background-position: 78% center !important;
} }
} }
@media (max-width: 600px) { @media (max-width: 767px) {
.elementor-element.elementor-element-7da6646:not(.elementor-motion-effects-element-type-background) { .elementor-element.elementor-element-7da6646:not(.elementor-motion-effects-element-type-background) {
background-position: 82% center !important; background-position: 82% 25% !important;
} }
} }
@@ -224,7 +259,108 @@ export default function WomenSection() {
margin-right: 0 !important; margin-right: 0 !important;
} }
} }
@media (max-width: 600px) {
@media (max-width: 767px) {
#women-entrepreneurship {
width: calc(100% - 20px) !important;
margin-left: 10px !important;
margin-right: 10px !important;
border-radius: 22px !important;
padding-left: 0px !important;
padding-right: 0px !important;
}
#women-entrepreneurship .e-con-boxed > .e-con-inner {
padding-top: 32px !important;
padding-bottom: 32px !important;
padding-left: 0 !important;
padding-right: 0 !important;
}
#women-entrepreneurship .elementor-element-8b5d6e6,
#women-entrepreneurship .elementor-element-b6e14bd,
#women-entrepreneurship .elementor-element-90cc867,
#women-entrepreneurship .elementor-element-36efec7,
#women-entrepreneurship .elementor-element-b2c956f {
padding-left: 0 !important;
padding-right: 0 !important;
margin-left: 0 !important;
margin-right: 0 !important;
}
#women-entrepreneurship .elementor-element-1f766ea {
width: 100% !important;
max-width: 100% !important;
margin-left: auto !important;
margin-right: auto !important;
padding-left: 0 !important;
padding-right: 0 !important;
}
#women-entrepreneurship .elementor-element.elementor-element-2ed47f3 {
padding-left: 0 !important;
padding-right: 0 !important;
margin-left: 0 !important;
margin-right: 0 !important;
margin-top: 0 !important;
padding-top: 0 !important;
gap: 24px !important;
}
#women-entrepreneurship .elementor-element-36efec7 {
margin-top: 0px !important;
padding-top: 0px !important;
gap: 0px !important;
}
#women-entrepreneurship .elementor-element-24c0280 {
margin-bottom: 0px !important;
padding-left: 14px !important;
padding-right: 14px !important;
box-sizing: border-box !important;
}
#women-entrepreneurship .elementor-element-778840d {
margin-top: 14px !important;
margin-bottom: 14px !important;
padding-top: 0px !important;
padding-bottom: 0px !important;
padding-left: 14px !important;
padding-right: 14px !important;
box-sizing: border-box !important;
}
#women-entrepreneurship .elementor-element-778840d h3.logico-title,
#women-entrepreneurship .elementor-element-778840d > .elementor-widget-container {
margin: 0px !important;
padding: 0px !important;
}
#women-entrepreneurship .elementor-element-7da6646 {
width: calc(100% - 28px) !important;
margin-left: 14px !important;
margin-right: 14px !important;
border-radius: 18px !important;
min-height: 240px !important;
margin-top: 15px !important;
margin-bottom: -50px !important;
box-sizing: border-box !important;
}
#women-entrepreneurship .elementor-element-8b5d6e6 {
padding-left: 14px !important;
padding-right: 14px !important;
margin-left: 0px !important;
margin-right: 0px !important;
width: 100% !important;
max-width: 100% !important;
box-sizing: border-box !important;
}
#women-entrepreneurship .elementor-element-bbfb67f img {
width: 100% !important;
}
#women-entrepreneurship .elementor-element-bbfb67f {
margin-top: 0px !important;
margin-bottom: 16px !important;
padding-left: 14px !important;
padding-right: 14px !important;
box-sizing: border-box !important;
}
#ws-stories {
padding-left: 14px !important;
padding-right: 14px !important;
box-sizing: border-box !important;
}
/* KPI stat cards stack one-per-row on mobile. Inside each card the big /* KPI stat cards stack one-per-row on mobile. Inside each card the big
number sits on the left and the label on the right, vertically number sits on the left and the label on the right, vertically
centered, so every stat reads as a clean full-width row instead of centered, so every stat reads as a clean full-width row instead of
@@ -235,7 +371,7 @@ export default function WomenSection() {
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
gap: 16px; gap: 16px;
padding: 20px 22px; padding: 16px 20px;
min-width: 0; min-width: 0;
} }
#ws-stories .ws__stat-num { font-size: clamp(30px, 9vw, 40px); } #ws-stories .ws__stat-num { font-size: clamp(30px, 9vw, 40px); }
@@ -246,7 +382,7 @@ export default function WomenSection() {
text-align: right; text-align: right;
min-height: 0; min-height: 0;
} }
#ws-stories .ws__cards { grid-template-columns: 1fr; } #ws-stories .ws__cards { grid-template-columns: 1fr; gap: 12px; }
} }
`}} /> `}} />

56
src/components/strategy/StrategyCanvas.tsx
View File

@@ -2,7 +2,7 @@
import React, { Suspense, useEffect, useMemo, useRef, useState } from "react"; import React, { Suspense, useEffect, useMemo, useRef, useState } from "react";
import { Canvas, useFrame, useThree } from "@react-three/fiber"; import { Canvas, useFrame, useThree } from "@react-three/fiber";
import { RoundedBox, Line, Sparkles, Html, useGLTF, ContactShadows, Environment, Lightformer, Preload } from "@react-three/drei"; import { RoundedBox, Line, Sparkles, Html, useGLTF, useProgress, ContactShadows, Environment, Lightformer, Preload } from "@react-three/drei";
import { EffectComposer, Bloom } from "@react-three/postprocessing"; import { EffectComposer, Bloom } from "@react-three/postprocessing";
import { KernelSize } from "postprocessing"; import { KernelSize } from "postprocessing";
import * as THREE from "three"; import * as THREE from "three";
@@ -14,6 +14,8 @@ type Props = {
isMobile?: boolean; isMobile?: boolean;
active?: boolean; active?: boolean;
stage?: number; stage?: number;
ready?: boolean;
onReady?: () => void;
}; };
const BG = "#eef1f6"; const BG = "#eef1f6";
@@ -785,7 +787,50 @@ function Floor() {
); );
} }
function Scene({ progress, reduced, isMobile, stage, active, perf }: { progress: React.RefObject<number>; reduced: boolean; isMobile: boolean; stage: number; active: boolean; perf: boolean }) { function SceneReadySignal({ onReady }: { onReady?: () => void }) {
const { active, progress } = useProgress();
const gl = useThree((s) => s.gl);
const scene = useThree((s) => s.scene);
const camera = useThree((s) => s.camera);
const fired = useRef(false);
const compiling = useRef(false);
const compiled = useRef(false);
const meaningfulFrames = useRef(0);
useEffect(() => {
if (fired.current || compiling.current || compiled.current || active || progress < 100) return;
compiling.current = true;
const renderer = gl as THREE.WebGLRenderer & {
compileAsync?: (scene: THREE.Scene, camera: THREE.Camera) => Promise<void>;
};
const compile = renderer.compileAsync
? renderer.compileAsync(scene, camera)
: Promise.resolve(renderer.compile(scene, camera));
compile
.catch(() => undefined)
.finally(() => {
compiled.current = true;
});
}, [active, camera, gl, progress, scene]);
useFrame(() => {
if (fired.current || active || progress < 100 || !compiled.current) return;
const renderInfo = gl.info.render;
const hasMeaningfulScene = renderInfo.calls >= 12 && renderInfo.triangles >= 500;
meaningfulFrames.current = hasMeaningfulScene ? meaningfulFrames.current + 1 : 0;
if (meaningfulFrames.current < 4) return;
fired.current = true;
requestAnimationFrame(() => onReady?.());
});
return null;
}
function Scene({ progress, reduced, isMobile, stage, active, perf, onReady }: { progress: React.RefObject<number>; reduced: boolean; isMobile: boolean; stage: number; active: boolean; perf: boolean; onReady?: () => void }) {
// Districts stay MOUNTED for the whole scroll (GLB cloned once, shaders compiled // Districts stay MOUNTED for the whole scroll (GLB cloned once, shaders compiled
// once → no remount hitch, no blank frames). `near` only toggles per-district // once → no remount hitch, no blank frames). `near` only toggles per-district
// visibility + per-frame work + <Html> mounting, so off-screen districts render // visibility + per-frame work + <Html> mounting, so off-screen districts render
@@ -844,12 +889,13 @@ function Scene({ progress, reduced, isMobile, stage, active, perf }: { progress:
{/* Compile every material/texture upfront (districts are all mounted) so the {/* Compile every material/texture upfront (districts are all mounted) so the
first time a district becomes visible there's no shader-compile stall. */} first time a district becomes visible there's no shader-compile stall. */}
<Preload all /> <Preload all />
<SceneReadySignal onReady={onReady} />
{perf && <PerfHud />} {perf && <PerfHud />}
</> </>
); );
} }
export default function StrategyCanvas({ progress, reduced = false, isMobile = false, active = true, stage = 0 }: Props) { export default function StrategyCanvas({ progress, reduced = false, isMobile = false, active = true, stage = 0, ready = false, onReady }: Props) {
// Opt-in dev metrics overlay: append ?perf to the URL. // Opt-in dev metrics overlay: append ?perf to the URL.
const perf = typeof window !== "undefined" && new URLSearchParams(window.location.search).has("perf"); const perf = typeof window !== "undefined" && new URLSearchParams(window.location.search).has("perf");
return ( return (
@@ -857,9 +903,9 @@ export default function StrategyCanvas({ progress, reduced = false, isMobile = f
dpr={[1, isMobile ? 1 : 1.25]} dpr={[1, isMobile ? 1 : 1.25]}
camera={{ position: [0, 4, 8.2], fov: 50, near: 0.1, far: 120 }} camera={{ position: [0, 4, 8.2], fov: 50, near: 0.1, far: 120 }}
gl={{ antialias: false, powerPreference: "high-performance", alpha: false }} gl={{ antialias: false, powerPreference: "high-performance", alpha: false }}
frameloop={active ? "always" : "never"} frameloop={active || !ready ? "always" : "never"}
> >
<Scene progress={progress} reduced={reduced} isMobile={isMobile} stage={stage} active={active} perf={perf} /> <Scene progress={progress} reduced={reduced} isMobile={isMobile} stage={stage} active={active} perf={perf} onReady={onReady} />
</Canvas> </Canvas>
); );
} }

53
src/components/strategy/StrategySection.tsx
View File

@@ -1,6 +1,6 @@
"use client"; "use client";
import React, { useEffect, useRef, useState, useSyncExternalStore } from "react"; import React, { useEffect, useRef, useState } from "react";
import dynamic from "next/dynamic"; import dynamic from "next/dynamic";
import { motion, useMotionValue, useTransform, type MotionValue } from "framer-motion"; import { motion, useMotionValue, useTransform, type MotionValue } from "framer-motion";
import gsap from "gsap"; import gsap from "gsap";
@@ -83,6 +83,8 @@ export default function StrategySection({ connected = false }: { connected?: boo
const [pinState, setPinState] = useState<"before" | "pinned" | "after">("before"); const [pinState, setPinState] = useState<"before" | "pinned" | "after">("before");
const [active, setActive] = useState(0); const [active, setActive] = useState(0);
const [mountScene, setMountScene] = useState(false); const [mountScene, setMountScene] = useState(false);
const [sceneReady, setSceneReady] = useState(false);
const [showLoader, setShowLoader] = useState(true);
const [sceneActive, setSceneActive] = useState(false); const [sceneActive, setSceneActive] = useState(false);
const [isMobile, setIsMobile] = useState(false); const [isMobile, setIsMobile] = useState(false);
const [reduced, setReduced] = useState(false); const [reduced, setReduced] = useState(false);
@@ -161,8 +163,30 @@ export default function StrategySection({ connected = false }: { connected?: boo
<div className="dm-st-sticky"> <div className="dm-st-sticky">
<div className="dm-st-card"> <div className="dm-st-card">
{mountScene && ( {mountScene && (
<div className="dm-st-canvas"> <div className={`dm-st-canvas${sceneReady ? " is-ready" : ""}`} aria-hidden={!sceneReady}>
<StrategyCanvas progress={progressRef} reduced={reduced} isMobile={isMobile} active={sceneActive && pinState === "pinned"} stage={active} /> <StrategyCanvas
progress={progressRef}
reduced={reduced}
isMobile={isMobile}
active={sceneActive && pinState === "pinned"}
stage={active}
ready={sceneReady}
onReady={() => setSceneReady(true)}
/>
</div>
)}
{showLoader && (
<div
className={`dm-st-loader${sceneReady ? " is-hiding" : ""}`}
role="status"
aria-live="polite"
aria-label="Loading MileTruth Strategy Engine"
onTransitionEnd={(e) => {
if (e.propertyName === "opacity" && sceneReady) setShowLoader(false);
}}
>
<span className="dm-st-loader__ring" />
</div> </div>
)} )}
@@ -170,7 +194,7 @@ export default function StrategySection({ connected = false }: { connected?: boo
can never be seen during the approach ("before"), where the sticky sits can never be seen during the approach ("before"), where the sticky sits
at the top of the tall section near the previous workflow's seam. */} at the top of the tall section near the previous workflow's seam. */}
{pinState !== "before" && ( {pinState !== "before" && (
<div className="dm-st-ui"> <div className={`dm-st-ui${sceneReady ? " is-ready" : ""}`} aria-hidden={!sceneReady}>
{/* Persistent header */} {/* Persistent header */}
<motion.div className="dm-st-top" style={{ opacity: headerOpacity }}> <motion.div className="dm-st-top" style={{ opacity: headerOpacity }}>
<div className="dm-st-eyebrow"><span className="dm-st-dot" /> MileTruth Strategy Engine</div> <div className="dm-st-eyebrow"><span className="dm-st-dot" /> MileTruth Strategy Engine</div>
@@ -285,11 +309,28 @@ const styles = `
} }
} }
.dm-st-canvas { position: absolute; inset: 0; z-index: 1; } .dm-st-canvas { position: absolute; inset: 0; z-index: 1; opacity: 0; visibility: hidden;
transition: opacity 0.42s cubic-bezier(0.22,1,0.36,1), visibility 0s linear 0.42s; }
.dm-st-canvas.is-ready { opacity: 1; visibility: visible; transition-delay: 0s; }
.dm-st-canvas canvas { display: block; } .dm-st-canvas canvas { display: block; }
.dm-st-ui { position: absolute; inset: 0; z-index: 4; pointer-events: none; .dm-st-ui { position: absolute; inset: 0; z-index: 4; pointer-events: none;
font-family: var(--font-space-grotesk), var(--font-manrope), system-ui, sans-serif; color: #0f172a; } font-family: var(--font-space-grotesk), var(--font-manrope), system-ui, sans-serif; color: #0f172a;
opacity: 0; visibility: hidden;
transition: opacity 0.42s cubic-bezier(0.22,1,0.36,1), visibility 0s linear 0.42s; }
.dm-st-ui.is-ready { opacity: 1; visibility: visible; transition-delay: 0s; }
.dm-st-loader { position: absolute; inset: 0; z-index: 6; display: grid; place-items: center;
background: transparent; opacity: 1; pointer-events: none;
animation: dmStLoaderFadeIn 0.2s ease both;
transition: opacity 0.3s ease; }
.dm-st-loader.is-hiding { opacity: 0; pointer-events: none; }
.dm-st-loader__ring { width: 18px; height: 18px; border-radius: 50%;
border: 2px solid rgba(255,255,255,0.48); border-top-color: #ffffff;
box-shadow: 0 8px 22px rgba(15,23,42,0.14);
animation: dm-hiw-spin 0.8s linear infinite; }
@keyframes dmStLoaderFadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes dm-hiw-spin { to { transform: rotate(360deg); } }
/* ---- Persistent header: title + 5-stage rail ---- */ /* ---- Persistent header: title + 5-stage rail ---- */
.dm-st-top { position: absolute; top: clamp(96px, 13vh, 128px); left: 0; right: 0; z-index: 5; .dm-st-top { position: absolute; top: clamp(96px, 13vh, 128px); left: 0; right: 0; z-index: 5;