fix mobile screen issue
This commit is contained in:
@@ -901,7 +901,9 @@ body {
|
||||
width falls below 1536px). Match the home breakpoint instead. */
|
||||
@media (max-width: 840px) {
|
||||
.custom-standard-hero-container {
|
||||
padding: 10px 10px 10px 10px !important;
|
||||
/* No top gap on mobile: the hero card sits flush to the top so the floating
|
||||
navbar rests directly on the hero instead of leaving a band above it. */
|
||||
padding: 0 10px 10px 10px !important;
|
||||
}
|
||||
.custom-standard-hero-card {
|
||||
height: 600px !important;
|
||||
@@ -910,3 +912,22 @@ body {
|
||||
}
|
||||
}
|
||||
|
||||
/* Consistent flush hero across every page on mobile/tablet — the floating navbar
|
||||
(position:absolute; top:5px) should rest directly on the hero with no band
|
||||
above it. Home / How It Works / Solutions share .elementor-element-741f56c;
|
||||
MileTruth uses .miletruth-hero-container. (About / Contact / Blog already use
|
||||
.custom-standard-hero-container, handled above.) */
|
||||
@media (max-width: 1024px) {
|
||||
/* The e-con applies top padding via the --padding-top / --padding-block-start
|
||||
vars (site.css sets them to 10px at a higher specificity), so override the
|
||||
vars — not just padding-top — to actually zero the gap. */
|
||||
.elementor-element.elementor-element-741f56c {
|
||||
--padding-top: 0px !important;
|
||||
--padding-block-start: 0px !important;
|
||||
padding-top: 0 !important;
|
||||
}
|
||||
.miletruth-hero-container {
|
||||
margin-top: 0 !important;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -130,7 +130,12 @@ export default function Footer() {
|
||||
<div className="elementor-element elementor-element-df89993 e-con-full e-flex cut-corner-no sticky-container-off e-con e-child" data-id="df89993" data-element_type="container" data-e-type="container">
|
||||
<div className="elementor-element elementor-element-69b6892 elementor-widget elementor-widget-logico_heading" data-id="69b6892" data-element_type="widget" data-e-type="widget" data-widget_type="logico_heading.default">
|
||||
<div className="elementor-widget-container">
|
||||
<div className="logico-title">Call Center</div>
|
||||
<div className="logico-title dm-foot-label">
|
||||
<svg className="dm-foot-ic" width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
|
||||
<path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72c.13.96.36 1.9.7 2.81a2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45c.91.34 1.85.57 2.81.7A2 2 0 0 1 22 16.92z" />
|
||||
</svg>
|
||||
<span>Call Center</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="elementor-element elementor-element-87be926 elementor-widget elementor-widget-text-editor" data-id="87be926" data-element_type="widget" data-e-type="widget" data-widget_type="text-editor.default">
|
||||
@@ -142,7 +147,13 @@ export default function Footer() {
|
||||
<div className="elementor-element elementor-element-f5d8e63 e-con-full e-flex cut-corner-no sticky-container-off e-con e-child" data-id="f5d8e63" data-element_type="container" data-e-type="container">
|
||||
<div className="elementor-element elementor-element-774e540 elementor-widget elementor-widget-logico_heading" data-id="774e540" data-element_type="widget" data-e-type="widget" data-widget_type="logico_heading.default">
|
||||
<div className="elementor-widget-container">
|
||||
<div className="logico-title">Our Location</div>
|
||||
<div className="logico-title dm-foot-label">
|
||||
<svg className="dm-foot-ic" width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
|
||||
<path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z" />
|
||||
<circle cx="12" cy="10" r="3" />
|
||||
</svg>
|
||||
<span>Our Location</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="elementor-element elementor-element-9c1cf03 elementor-widget elementor-widget-text-editor" data-id="9c1cf03" data-element_type="widget" data-e-type="widget" data-widget_type="text-editor.default">
|
||||
@@ -158,7 +169,13 @@ export default function Footer() {
|
||||
<div className="elementor-element elementor-element-a96d151 e-con-full e-flex cut-corner-no sticky-container-off e-con e-child" data-id="a96d151" data-element_type="container" data-e-type="container">
|
||||
<div className="elementor-element elementor-element-37e647f elementor-widget elementor-widget-logico_heading" data-id="37e647f" data-element_type="widget" data-e-type="widget" data-widget_type="logico_heading.default">
|
||||
<div className="elementor-widget-container">
|
||||
<div className="logico-title">Email</div>
|
||||
<div className="logico-title dm-foot-label">
|
||||
<svg className="dm-foot-ic" width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
|
||||
<rect x="2" y="4" width="20" height="16" rx="2" />
|
||||
<path d="m22 7-10 5L2 7" />
|
||||
</svg>
|
||||
<span>Email</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="elementor-element elementor-element-ba67644 elementor-widget elementor-widget-text-editor" data-id="ba67644" data-element_type="widget" data-e-type="widget" data-widget_type="text-editor.default">
|
||||
@@ -172,7 +189,16 @@ export default function Footer() {
|
||||
<div className="elementor-element elementor-element-9ba4b82 e-con-full e-flex cut-corner-no sticky-container-off e-con e-child" data-id="9ba4b82" data-element_type="container" data-e-type="container">
|
||||
<div className="elementor-element elementor-element-e9a5d79 elementor-widget elementor-widget-logico_heading" data-id="e9a5d79" data-element_type="widget" data-e-type="widget" data-widget_type="logico_heading.default">
|
||||
<div className="elementor-widget-container">
|
||||
<div className="logico-title">Social network</div>
|
||||
<div className="logico-title dm-foot-label">
|
||||
<svg className="dm-foot-ic" width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
|
||||
<circle cx="18" cy="5" r="3" />
|
||||
<circle cx="6" cy="12" r="3" />
|
||||
<circle cx="18" cy="19" r="3" />
|
||||
<line x1="8.59" y1="13.51" x2="15.42" y2="17.49" />
|
||||
<line x1="15.41" y1="6.51" x2="8.59" y2="10.49" />
|
||||
</svg>
|
||||
<span>Social network</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="elementor-element elementor-element-a6bccba elementor-shape-square elementor-grid-0 elementor-widget elementor-widget-social-icons" data-id="a6bccba" data-element_type="widget" data-e-type="widget" data-widget_type="social-icons.default">
|
||||
@@ -521,6 +547,97 @@ export default function Footer() {
|
||||
width: 25px;
|
||||
height: 25px;
|
||||
}
|
||||
|
||||
/* Compact footer link columns on phones (<=480px). The kit only sets
|
||||
column --width at min-width:481px, so below that all four blocks
|
||||
fall back to 100% and stack into one very tall column. Put the
|
||||
logo+social full-width on top, then lay the three link groups out
|
||||
in a 2-up grid (matching the tablet 47% intent) so the footer is
|
||||
roughly half as tall. */
|
||||
/* Inline icon beside each contact label (Call Center / Our Location /
|
||||
Email / Social network). */
|
||||
.elementor-6585 .dm-foot-label {
|
||||
display: inline-flex !important;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
.elementor-6585 .dm-foot-label .dm-foot-ic {
|
||||
flex: 0 0 auto;
|
||||
color: #C01227;
|
||||
}
|
||||
|
||||
/* ── Compact mobile contact footer (<=600px) ──
|
||||
On phones the upper contact section stacked into one very tall
|
||||
column with 50px margins between every block. Tighten the heading,
|
||||
collapse those stack margins, and pair Email + Social side-by-side
|
||||
(both are short) so the footer is far shorter without losing the
|
||||
full-width address readability. */
|
||||
@media (max-width: 600px) {
|
||||
/* Trim the band's oversized top/bottom padding on phones. */
|
||||
.elementor-6585 .elementor-element.elementor-element-b29b8fc > .e-con-inner {
|
||||
padding-top: 40px !important;
|
||||
padding-bottom: 40px !important;
|
||||
}
|
||||
.elementor-6585 .elementor-element.elementor-element-687d944 .logico-title {
|
||||
font-size: clamp(24px, 6.6vw, 32px) !important;
|
||||
line-height: 1.2 !important;
|
||||
}
|
||||
.elementor-6585 .dm-foot-label .dm-foot-ic { width: 14px; height: 14px; }
|
||||
/* The Call Center / Our Location group carries a 10px side padding
|
||||
the Email / Social group doesn't, leaving its labels indented
|
||||
10px out of line with everything else — zero it so all four
|
||||
contact blocks share the same left edge as the heading. */
|
||||
.elementor-6585 .elementor-element.elementor-element-2631b42 {
|
||||
padding-left: 0 !important;
|
||||
padding-right: 0 !important;
|
||||
}
|
||||
/* All four contact blocks stack in one left-aligned column with a
|
||||
consistent gap (Social network sits below Email). */
|
||||
.elementor-6585 .elementor-element.elementor-element-2631b42,
|
||||
.elementor-6585 .elementor-element.elementor-element-f5d8e63,
|
||||
.elementor-6585 .elementor-element.elementor-element-645be8d,
|
||||
.elementor-6585 .elementor-element.elementor-element-9ba4b82 {
|
||||
margin-top: 22px !important;
|
||||
}
|
||||
.elementor-6585 .elementor-element.elementor-element-645be8d > .e-con-inner {
|
||||
flex-direction: column !important;
|
||||
gap: 0 !important;
|
||||
align-items: stretch !important;
|
||||
}
|
||||
.elementor-6585 .elementor-element.elementor-element-a96d151,
|
||||
.elementor-6585 .elementor-element.elementor-element-9ba4b82 {
|
||||
width: 100% !important;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
.elementor-6585 .elementor-element.elementor-element-3f1ba7a {
|
||||
display: flex !important;
|
||||
flex-direction: row !important;
|
||||
flex-wrap: wrap !important;
|
||||
gap: 36px 16px !important;
|
||||
}
|
||||
.elementor-6585 .elementor-element.elementor-element-64e2e81 {
|
||||
flex: 0 0 100% !important;
|
||||
width: 100% !important;
|
||||
}
|
||||
.elementor-6585 .elementor-element.elementor-element-5b73dd3,
|
||||
.elementor-6585 .elementor-element.elementor-element-451f15c,
|
||||
.elementor-6585 .elementor-element.elementor-element-44a1f5d {
|
||||
flex: 1 1 calc(50% - 8px) !important;
|
||||
width: calc(50% - 8px) !important;
|
||||
min-width: 0 !important;
|
||||
}
|
||||
/* Allow long links (e.g. "Women entrepreneurship") to wrap inside
|
||||
the narrow columns instead of overflowing. */
|
||||
.elementor-6585 .logico-custom-menu-widget li a {
|
||||
white-space: normal !important;
|
||||
}
|
||||
/* Trim the large social-icons top gap so the brand block stays tight. */
|
||||
.elementor-6585 .elementor-element.elementor-element-e4e6486 > .elementor-widget-container {
|
||||
margin-top: 24px !important;
|
||||
}
|
||||
}
|
||||
`,
|
||||
}}
|
||||
/>
|
||||
|
||||
@@ -550,6 +550,17 @@ export default function Header() {
|
||||
#masthead .menu-trigger {
|
||||
display: block !important;
|
||||
}
|
||||
|
||||
/* Sticky header on scroll for mobile/tablet too — the desktop
|
||||
rule lived only in the min-width:1025px block, so on phones the
|
||||
absolutely-positioned navbar scrolled away with the page. Pin it
|
||||
to the top once scrolled past 50px, matching desktop behaviour. */
|
||||
#masthead .elementor-element.elementor-element-466de1b.dm-header-scrolled {
|
||||
position: fixed !important;
|
||||
top: 0 !important;
|
||||
left: 0 !important;
|
||||
right: 0 !important;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
@@ -571,6 +582,34 @@ export default function Header() {
|
||||
display: block !important;
|
||||
}
|
||||
}
|
||||
|
||||
/* The bundled 'fontello' subset is missing the search (\\e85c) and
|
||||
close (\\e845) glyphs, so those two icons render as empty tofu
|
||||
boxes. Replace them with inline SVGs via CSS masks so they paint
|
||||
in the current text colour (matching the working cart/user icons)
|
||||
and respond to hover. */
|
||||
#masthead .header-icon.search-link .search-trigger-icon::before,
|
||||
#masthead .header-icon.menu-close .menu-close-icon::before {
|
||||
content: "" !important;
|
||||
display: block;
|
||||
width: 1em;
|
||||
height: 1em;
|
||||
background-color: currentColor;
|
||||
-webkit-mask-repeat: no-repeat;
|
||||
mask-repeat: no-repeat;
|
||||
-webkit-mask-position: center;
|
||||
mask-position: center;
|
||||
-webkit-mask-size: contain;
|
||||
mask-size: contain;
|
||||
}
|
||||
#masthead .header-icon.search-link .search-trigger-icon::before {
|
||||
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cline x1='16.5' y1='16.5' x2='21' y2='21'/%3E%3C/svg%3E");
|
||||
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cline x1='16.5' y1='16.5' x2='21' y2='21'/%3E%3C/svg%3E");
|
||||
}
|
||||
#masthead .header-icon.menu-close .menu-close-icon::before {
|
||||
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Cline x1='5' y1='5' x2='19' y2='19'/%3E%3Cline x1='19' y1='5' x2='5' y2='19'/%3E%3C/svg%3E");
|
||||
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Cline x1='5' y1='5' x2='19' y2='19'/%3E%3Cline x1='19' y1='5' x2='5' y2='19'/%3E%3C/svg%3E");
|
||||
}
|
||||
`,
|
||||
}}
|
||||
/>
|
||||
|
||||
@@ -79,11 +79,10 @@ export default function LoadingScreen() {
|
||||
<Image
|
||||
src="/images/preloader.png"
|
||||
alt="Doormile"
|
||||
width={200}
|
||||
height={38}
|
||||
width={325}
|
||||
height={239}
|
||||
priority
|
||||
className="dm-loader__logo"
|
||||
style={{ width: "auto", height: "auto" }}
|
||||
/>
|
||||
</div>
|
||||
|
||||
@@ -100,8 +99,8 @@ export default function LoadingScreen() {
|
||||
will-change: opacity;
|
||||
}
|
||||
.dm-loader.is-hiding { opacity: 0; pointer-events: none; }
|
||||
.dm-loader__pulse { animation: dmLoaderPulse 1.5s linear infinite; }
|
||||
.dm-loader__logo { width: clamp(140px, 18vw, 200px); height: auto; }
|
||||
.dm-loader__pulse { animation: dmLoaderPulse 1.5s linear infinite; display: grid; place-items: center; }
|
||||
.dm-loader__logo { display: block; margin: 0 auto; width: clamp(120px, 32vw, 180px); height: auto; }
|
||||
@keyframes dmLoaderPulse {
|
||||
50% { transform: scale(0.85); }
|
||||
100% { transform: scale(1); }
|
||||
|
||||
@@ -1011,7 +1011,9 @@ const styles = `
|
||||
|
||||
.dm-opt-mobile {
|
||||
position: relative;
|
||||
margin: 0 10px;
|
||||
/* Top gap separates this card from the hero stats bar above; sides stay 10px
|
||||
and bottom stays flush so the Performance card butts against it below. */
|
||||
margin: 16px 10px 0;
|
||||
padding: 24px 13px 22px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
@@ -498,26 +498,79 @@ export default function CompetitiveEdge() {
|
||||
.moat-heading {
|
||||
font-size: 1.8rem;
|
||||
}
|
||||
}
|
||||
|
||||
/* Capability Matrix table gains responsive horizontal swipe scrolls */
|
||||
/* On phones the 5-column table can't fit, so transform each row into a
|
||||
stacked card: capability as the card title, then one "label: value"
|
||||
line per competitor. Column labels are injected via nth-of-type so no
|
||||
markup changes are needed (every row has the same column order). */
|
||||
@media (max-width: 600px) {
|
||||
.table-wrapper {
|
||||
width: 100%;
|
||||
overflow-x: auto;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
background: transparent;
|
||||
border: none;
|
||||
box-shadow: none;
|
||||
border-radius: 0;
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
.comparison-table {
|
||||
min-width: 720px; /* Forces optimal reading width swipe trail */
|
||||
.comparison-table { min-width: 0; width: 100%; }
|
||||
.comparison-table thead { display: none; }
|
||||
.comparison-table tbody,
|
||||
.comparison-table tr,
|
||||
.comparison-table td { display: block; width: auto; }
|
||||
|
||||
.comparison-table tr {
|
||||
background: #ffffff;
|
||||
border: 1px solid rgba(0,0,0,0.07);
|
||||
border-radius: 16px;
|
||||
padding: 6px 16px 8px;
|
||||
margin-bottom: 14px;
|
||||
box-shadow: 0 8px 24px rgba(0,0,0,0.04);
|
||||
}
|
||||
|
||||
.comparison-table th,
|
||||
.comparison-table td {
|
||||
padding: 16px 18px;
|
||||
font-size: 0.9rem;
|
||||
/* Capability = card title (icon + name), no label */
|
||||
.comparison-table td.capability-cell {
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
gap: 12px;
|
||||
font-size: 1.02rem;
|
||||
padding: 12px 0 12px;
|
||||
border-bottom: 1.5px solid #eef0f4;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.capability-cell {
|
||||
font-size: 0.98rem;
|
||||
/* Value cells = "Label .... value" rows */
|
||||
.comparison-table td:not(.capability-cell) {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 12px;
|
||||
padding: 10px 0;
|
||||
border-bottom: 1px solid #f4f5f7;
|
||||
font-size: 0.95rem;
|
||||
text-align: right;
|
||||
}
|
||||
.comparison-table tr td:last-child { border-bottom: none; }
|
||||
|
||||
.comparison-table td.col-highlight::before { content: "Doormile"; }
|
||||
.comparison-table td:nth-of-type(3)::before { content: "Aggregators"; }
|
||||
.comparison-table td:nth-of-type(4)::before { content: "Local Couriers"; }
|
||||
.comparison-table td:nth-of-type(5)::before { content: "Software Platforms"; }
|
||||
.comparison-table td:not(.capability-cell)::before {
|
||||
font-weight: 700;
|
||||
font-size: 0.72rem;
|
||||
letter-spacing: 0.05em;
|
||||
text-transform: uppercase;
|
||||
color: #8a8f9d;
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
|
||||
/* Neutralise the desktop highlight column styling inside the card */
|
||||
.comparison-table td.col-highlight {
|
||||
background: transparent !important;
|
||||
border-left: none;
|
||||
border-right: none;
|
||||
animation: none !important;
|
||||
color: inherit !important;
|
||||
}
|
||||
}
|
||||
`}} />
|
||||
|
||||
@@ -7,7 +7,7 @@ export default function ContactsHero() {
|
||||
<style dangerouslySetInnerHTML={{ __html: `
|
||||
.contacts-hero-custom {
|
||||
background-color: #0b0b0b !important;
|
||||
background-image: url('/images/home2-slide-1.jpg') !important;
|
||||
background-image: url('/images/home2-banner-3.jpg') !important;
|
||||
background-size: cover !important;
|
||||
background-position: center !important;
|
||||
}
|
||||
@@ -27,7 +27,9 @@ export default function ContactsHero() {
|
||||
.contacts-hero-bg-overlay {
|
||||
position: absolute !important;
|
||||
inset: 0 !important;
|
||||
background-image: linear-gradient(180deg, rgba(0, 0, 0, 0.55) 0%, rgba(0, 0, 0, 0.8) 50%, rgba(0, 0, 0, 0.95) 100%) !important;
|
||||
/* Lighter wash so the red van / sunset stays vivid like the reference,
|
||||
while keeping the centered heading readable. */
|
||||
background-image: linear-gradient(180deg, rgba(0, 0, 0, 0.30) 0%, rgba(0, 0, 0, 0.42) 55%, rgba(0, 0, 0, 0.62) 100%) !important;
|
||||
z-index: 1 !important;
|
||||
}
|
||||
|
||||
@@ -70,27 +72,27 @@ export default function ContactsHero() {
|
||||
z-index: 2 !important;
|
||||
}
|
||||
|
||||
/* Glassmorphic Center Card */
|
||||
/* Center content — card frame removed (no background, border, blur or
|
||||
shadow); the text sits directly on the hero background. */
|
||||
.contacts-hero-glass-card {
|
||||
position: relative !important;
|
||||
z-index: 3 !important;
|
||||
background: rgba(10, 10, 10, 0.55) !important;
|
||||
backdrop-filter: blur(24px) saturate(180%) !important;
|
||||
-webkit-backdrop-filter: blur(24px) saturate(180%) !important;
|
||||
border: 1px solid rgba(255, 255, 255, 0.08) !important;
|
||||
border-radius: 30px !important;
|
||||
padding: 60px 50px !important;
|
||||
background: transparent !important;
|
||||
backdrop-filter: none !important;
|
||||
-webkit-backdrop-filter: none !important;
|
||||
border: none !important;
|
||||
border-radius: 0 !important;
|
||||
padding: 0 16px !important;
|
||||
max-width: 820px !important;
|
||||
width: 90% !important;
|
||||
box-shadow: 0 40px 80px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
|
||||
box-shadow: none !important;
|
||||
text-align: center !important;
|
||||
transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.6s ease, border-color 0.6s ease !important;
|
||||
}
|
||||
|
||||
.contacts-hero-glass-card:hover {
|
||||
transform: translateY(-5px) scale(1.005) !important;
|
||||
box-shadow: 0 45px 90px rgba(192, 18, 39, 0.14), 0 30px 60px rgba(0, 0, 0, 0.6) !important;
|
||||
border-color: rgba(192, 18, 39, 0.3) !important;
|
||||
transform: none !important;
|
||||
box-shadow: none !important;
|
||||
border-color: transparent !important;
|
||||
}
|
||||
|
||||
/* Spaced kicker */
|
||||
@@ -196,7 +198,7 @@ export default function ContactsHero() {
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.contacts-hero-glass-card {
|
||||
padding: 40px 24px !important;
|
||||
padding: 0 16px !important;
|
||||
width: 95% !important;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -408,16 +408,19 @@ export default function EVLogisticSection() {
|
||||
margin-bottom: 60px;
|
||||
}
|
||||
|
||||
/* Base rules above use !important (flex-direction:row, the 58/42%
|
||||
column widths), so these overrides MUST also use !important or the
|
||||
grid never stacks and the image/text stay squished side-by-side. */
|
||||
.ev-logistic-body-grid {
|
||||
flex-direction: column;
|
||||
gap: 50px;
|
||||
flex-direction: column !important;
|
||||
gap: 50px !important;
|
||||
}
|
||||
|
||||
.ev-logistic-image-col {
|
||||
flex: 1 1 100%;
|
||||
max-width: 100%;
|
||||
min-height: auto;
|
||||
justify-content: center; /* Center layout on mobile */
|
||||
flex: 1 1 100% !important;
|
||||
max-width: 100% !important;
|
||||
min-height: auto !important;
|
||||
justify-content: center !important; /* Center layout on mobile */
|
||||
}
|
||||
|
||||
.ev-logistic-image-wrapper {
|
||||
@@ -428,8 +431,8 @@ export default function EVLogisticSection() {
|
||||
}
|
||||
|
||||
.ev-logistic-content-col {
|
||||
flex: 1 1 100%;
|
||||
max-width: 100%;
|
||||
flex: 1 1 100% !important;
|
||||
max-width: 100% !important;
|
||||
}
|
||||
|
||||
.ev-logistic-title {
|
||||
|
||||
@@ -302,7 +302,7 @@ export default function EVSection() {
|
||||
.evnd-feature {
|
||||
position: relative;
|
||||
display: grid;
|
||||
grid-template-columns: 48px 1fr auto;
|
||||
grid-template-columns: 48px minmax(0, 1fr) auto;
|
||||
gap: 20px;
|
||||
align-items: start;
|
||||
background: rgba(255,255,255,0.02);
|
||||
@@ -312,6 +312,7 @@ export default function EVSection() {
|
||||
overflow: hidden;
|
||||
transition: background-color 0.4s ease, border-color 0.4s ease, transform 0.4s cubic-bezier(.25,1,.5,1);
|
||||
}
|
||||
.evnd-feature__body { min-width: 0; }
|
||||
.evnd-feature::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
@@ -441,6 +442,19 @@ export default function EVSection() {
|
||||
.evnd__bar-item::after { display: none !important; }
|
||||
.evnd__badge { padding: 8px 12px; }
|
||||
.evnd__badge b { font-size: 20px; }
|
||||
|
||||
/* feature cards: tighter, no overflow, more room for text */
|
||||
.evnd-feature {
|
||||
grid-template-columns: 40px minmax(0, 1fr);
|
||||
gap: 14px;
|
||||
padding: 18px 16px;
|
||||
}
|
||||
.evnd-feature__icon-container { width: 40px; height: 40px; border-radius: 10px; }
|
||||
.evnd-icon { width: 20px; height: 20px; }
|
||||
.evnd-feature__title { font-size: 14px !important; letter-spacing: 0.03em; margin: 2px 0 6px; padding-right: 22px; }
|
||||
.evnd-feature__desc { font-size: 13px !important; line-height: 1.55 !important; }
|
||||
/* arrow occupies its own slot to the right of the icon, no extra column */
|
||||
.evnd-feature__arrow { position: absolute; top: 16px; right: 16px; margin: 0; }
|
||||
}
|
||||
`}} />
|
||||
|
||||
|
||||
@@ -57,6 +57,10 @@ export default function HowItWorksHero() {
|
||||
width: 100% !important;
|
||||
max-width: 1000px !important;
|
||||
margin: 0 auto !important;
|
||||
/* site.css gives the inner content-box sizing + 20px padding,
|
||||
which makes it 40px wider than its parent and overflows.
|
||||
Force border-box so width:100% actually fits. */
|
||||
box-sizing: border-box !important;
|
||||
}
|
||||
|
||||
.elementor-element.elementor-element-6c7cbcb .content-slider-item-heading,
|
||||
@@ -110,6 +114,12 @@ export default function HowItWorksHero() {
|
||||
border-radius: 25px !important;
|
||||
}
|
||||
|
||||
/* Collapse the stage-outer to the slide height so no empty
|
||||
black space is left below the hero card on mobile/tablet. */
|
||||
.elementor-element.elementor-element-6c7cbcb .owl-stage-outer {
|
||||
height: 620px !important;
|
||||
}
|
||||
|
||||
.elementor-element.elementor-element-6c7cbcb .owl-carousel.owl-theme .content-item {
|
||||
width: 100% !important;
|
||||
min-height: 620px !important;
|
||||
@@ -133,24 +143,81 @@ export default function HowItWorksHero() {
|
||||
border-radius: 22px !important;
|
||||
}
|
||||
|
||||
.elementor-element.elementor-element-6c7cbcb .owl-stage-outer {
|
||||
height: 560px !important;
|
||||
}
|
||||
|
||||
.elementor-element.elementor-element-6c7cbcb .owl-carousel.owl-theme .content-item {
|
||||
min-height: 560px !important;
|
||||
height: 560px !important;
|
||||
border-radius: 22px !important;
|
||||
}
|
||||
|
||||
.elementor-element.elementor-element-6c7cbcb .slide-content {
|
||||
/* Center BOTH slides' content. Use the .elementor prefix +
|
||||
repeater-item classes so these beat the per-slide rules in
|
||||
site.css (slide 1 has no centering there; slide 2 carries an
|
||||
asymmetric top margin). */
|
||||
.elementor .elementor-element.elementor-element-6c7cbcb .slide-content {
|
||||
min-height: 560px !important;
|
||||
padding-left: 22px !important;
|
||||
padding-right: 22px !important;
|
||||
align-items: center !important;
|
||||
justify-content: center !important;
|
||||
text-align: center !important;
|
||||
}
|
||||
|
||||
.elementor-element.elementor-element-6c7cbcb .content-slider-item-heading {
|
||||
.elementor .elementor-element.elementor-element-6c7cbcb .elementor-repeater-item-3264830 .slide-content-inner,
|
||||
.elementor .elementor-element.elementor-element-6c7cbcb .elementor-repeater-item-6867061 .slide-content-inner {
|
||||
margin: 0 auto !important;
|
||||
width: 100% !important;
|
||||
max-width: 100% !important;
|
||||
font-size: clamp(38px, 11vw, 48px) !important;
|
||||
line-height: 1.05 !important;
|
||||
padding-left: 0 !important;
|
||||
padding-right: 0 !important;
|
||||
box-sizing: border-box !important;
|
||||
align-items: center !important;
|
||||
text-align: center !important;
|
||||
}
|
||||
|
||||
.elementor .elementor-element.elementor-element-6c7cbcb .content-slider-item-heading,
|
||||
.elementor .elementor-element.elementor-element-6c7cbcb .content-slider-item-text,
|
||||
.elementor .elementor-element.elementor-element-6c7cbcb .text-content {
|
||||
text-align: center !important;
|
||||
margin-left: auto !important;
|
||||
margin-right: auto !important;
|
||||
}
|
||||
|
||||
/* Smaller, fitting heading so it never overflows the card edge.
|
||||
site.css forced clamp(38px,11vw,48px) which clipped at 320px. */
|
||||
.elementor .elementor-element.elementor-element-6c7cbcb .elementor-repeater-item-3264830 .content-slider-item-heading,
|
||||
.elementor .elementor-element.elementor-element-6c7cbcb .elementor-repeater-item-6867061 .content-slider-item-heading {
|
||||
max-width: 100% !important;
|
||||
font-size: clamp(26px, 8vw, 34px) !important;
|
||||
line-height: 1.12 !important;
|
||||
overflow-wrap: break-word !important;
|
||||
}
|
||||
|
||||
/* Slide counter ("01/02"): keep it bottom-RIGHT, aligned with the
|
||||
hero text padding (22px) and lifted cleanly off the edge. */
|
||||
.elementor .elementor-element.elementor-element-6c7cbcb .slider-footer {
|
||||
text-align: right !important;
|
||||
margin-bottom: 24px !important;
|
||||
}
|
||||
.elementor .elementor-element.elementor-element-6c7cbcb .slider-footer .slider-pagination {
|
||||
justify-content: flex-end !important;
|
||||
margin-left: 22px !important;
|
||||
margin-right: 22px !important;
|
||||
}
|
||||
/* The wide dot navigation eats the right side and shoves "01/02" to
|
||||
the centre. Hide it on mobile (matching the home hero) so the
|
||||
counter sits cleanly on the right. */
|
||||
.elementor .elementor-element.elementor-element-6c7cbcb .owl-dots {
|
||||
display: none !important;
|
||||
}
|
||||
/* Hide the prev/next arrows on mobile (they overlap the counter) —
|
||||
slides still auto-rotate, matching the home hero. */
|
||||
.elementor .elementor-element.elementor-element-6c7cbcb .owl-nav {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
`}} />
|
||||
|
||||
@@ -226,14 +293,45 @@ export default function HowItWorksHero() {
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Navigation controls (prev/next) — matches the home hero slider */}
|
||||
<div className="owl-nav">
|
||||
<button
|
||||
type="button"
|
||||
className="owl-next"
|
||||
onClick={() => setActiveSlide((prev) => (prev === 0 ? 1 : 0))}
|
||||
aria-label="Next"
|
||||
style={{ cursor: "pointer", border: "none", outline: "none" }}
|
||||
/>
|
||||
<button
|
||||
type="button"
|
||||
className="owl-prev"
|
||||
onClick={() => setActiveSlide((prev) => (prev === 0 ? 1 : 0))}
|
||||
aria-label="Previous"
|
||||
style={{ cursor: "pointer", border: "none", outline: "none" }}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Progress indicators */}
|
||||
<div className="slider-footer slider-footer-position-after slider-footer-width-full slider-footer-view-inside">
|
||||
<div className="slider-footer-content">
|
||||
<div className="slider-pagination" style={{ display: "flex", justifyContent: "flex-end", alignItems: "center", gap: "10px" }}>
|
||||
<div className="slider-progress-wrapper" style={{ marginRight: "15px" }}>
|
||||
<span className="slider-progress-current">{activeSlide === 0 ? "01" : "02"}</span>
|
||||
/
|
||||
<span className="slider-progress-all">02</span>
|
||||
<div className="slider-progress-wrapper" style={{ marginRight: "15px", display: "flex", flexDirection: "column", alignItems: "flex-start" }}>
|
||||
<div style={{ marginBottom: "4px" }}>
|
||||
<span className="slider-progress-current">{activeSlide === 0 ? "01" : "02"}</span>
|
||||
{" / "}
|
||||
<span className="slider-progress-all" style={{ opacity: 0.6 }}>02</span>
|
||||
</div>
|
||||
{/* Progress line — red bar slides to match the active slide (mirrors the home hero) */}
|
||||
<div style={{ width: "80px", height: "2px", background: "rgba(255, 255, 255, 0.2)", position: "relative", borderRadius: "1px", overflow: "hidden" }}>
|
||||
<div style={{
|
||||
position: "absolute",
|
||||
left: activeSlide === 0 ? "0" : "50%",
|
||||
width: "50%",
|
||||
height: "100%",
|
||||
background: "#c01227",
|
||||
transition: "left 0.3s ease"
|
||||
}} />
|
||||
</div>
|
||||
</div>
|
||||
<div className="owl-dots owl-dots-6c7cbcb" style={{ display: "flex", gap: "8px" }}>
|
||||
<button
|
||||
|
||||
@@ -128,6 +128,30 @@ export default function IndexHero() {
|
||||
font-size: clamp(20px, 7vw, 32px) !important;
|
||||
}
|
||||
}
|
||||
|
||||
/* Slide counter ("01/02" + progress line): site.css pushes it ~80px in
|
||||
from the right and only 9px off the bottom on mobile, so it sits in an
|
||||
awkward spot. Pin it cleanly to the bottom-right with even padding. */
|
||||
@media (max-width: 767px) {
|
||||
.elementor-61 .elementor-element.elementor-element-6c7cbcb .slider-footer {
|
||||
text-align: right !important;
|
||||
margin-bottom: 24px !important;
|
||||
}
|
||||
.elementor-61 .elementor-element.elementor-element-6c7cbcb .slider-footer .slider-pagination {
|
||||
justify-content: flex-end !important;
|
||||
margin-left: 22px !important;
|
||||
margin-right: 22px !important;
|
||||
}
|
||||
.elementor-61 .elementor-element.elementor-element-6c7cbcb .slider-progress-wrapper {
|
||||
margin-right: 0 !important;
|
||||
}
|
||||
/* The prev/next arrows sit in the bottom-right corner and overlap the
|
||||
counter once it's pinned right. Hide them on mobile — slides
|
||||
auto-rotate and the counter shows progress. */
|
||||
.elementor-61 .elementor-element.elementor-element-6c7cbcb .owl-nav {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
`}} />
|
||||
<div className="elementor-element elementor-element-6c7cbcb elementor-widget elementor-widget-logico_content_slider" data-id="6c7cbcb" data-element_type="widget" data-e-type="widget" data-widget_type="logico_content_slider.default">
|
||||
<div className="elementor-widget-container">
|
||||
|
||||
@@ -305,6 +305,17 @@ const CSS = `
|
||||
#ind-stack .istk__media { flex: none; min-height: 0; height: 300px; }
|
||||
#ind-stack .istk__content { max-width: none; }
|
||||
}
|
||||
@media (max-width: 600px) {
|
||||
#ind-stack .istk { padding: 10px 14px; }
|
||||
#ind-stack .istk__card { padding: 22px 20px; border-radius: 24px; }
|
||||
#ind-stack .istk__media { height: 240px; }
|
||||
#ind-stack .istk__title { margin-bottom: 16px !important; }
|
||||
#ind-stack .istk__desc { margin: 0 0 24px; }
|
||||
/* Two equal-width pills that always fit the card — no horizontal overflow. */
|
||||
#ind-stack .istk__tabs { gap: 8px; margin-bottom: 22px; }
|
||||
#ind-stack .istk__tab { flex: 1 1 0; min-width: 0; padding: 12px 8px; text-align: center; font-size: 13px; }
|
||||
#ind-stack .istk__list li { margin-bottom: 18px; }
|
||||
}
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
#ind-stack .istk__list li { animation: none !important; opacity: 1; transform: none; }
|
||||
}
|
||||
|
||||
@@ -712,24 +712,91 @@ export default function IntelligenceGrid() {
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.roadmap-hero-section {
|
||||
width: calc(100% - 40px); /* keep the 20px site-standard band gutter */
|
||||
padding: 60px 16px;
|
||||
}
|
||||
|
||||
.roadmap-grid-container {
|
||||
grid-template-columns: 1fr;
|
||||
gap: 16px;
|
||||
width: calc(100% - 24px); /* tighter 12px gutter so the band reads edge-to-edge on phones */
|
||||
padding: 52px 16px 44px;
|
||||
border-radius: 22px;
|
||||
}
|
||||
.vision-main-subtitle { margin-bottom: 40px !important; }
|
||||
|
||||
/* Progress header → compact, centered summary card */
|
||||
.roadmap-track-container {
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
gap: 20px;
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
gap: 16px;
|
||||
padding: 20px 18px;
|
||||
margin-bottom: 36px;
|
||||
}
|
||||
.roadmap-track-label { font-size: 12px; letter-spacing: 1.5px; }
|
||||
.timeline-horizontal-wrapper { width: 100%; }
|
||||
.roadmap-complete-pct-container { justify-content: center; }
|
||||
|
||||
.timeline-horizontal-wrapper {
|
||||
width: 100%;
|
||||
/* ── Vertical timeline: the four stacked cards become a connected
|
||||
journey (2026 → 2030) with a coloured rail + phase node dots. ── */
|
||||
.roadmap-grid-container {
|
||||
grid-template-columns: 1fr;
|
||||
gap: 18px;
|
||||
position: relative;
|
||||
padding-left: 32px;
|
||||
}
|
||||
.roadmap-grid-container::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 6px;
|
||||
top: 16px;
|
||||
bottom: 16px;
|
||||
width: 2px;
|
||||
border-radius: 2px;
|
||||
background: linear-gradient(180deg, #eab308 0%, #22c55e 34%, #3b82f6 67%, #C8102E 100%);
|
||||
opacity: 0.55;
|
||||
}
|
||||
.roadmap-col-card { padding: 24px 22px; }
|
||||
/* node dot sits on the rail, aligned with the year number */
|
||||
.roadmap-col-card::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: -32px;
|
||||
top: 28px;
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
border-radius: 50%;
|
||||
background: #09090b;
|
||||
border: 2px solid #C8102E;
|
||||
box-shadow: 0 0 0 4px #09090b, 0 0 12px rgba(200, 16, 46, 0.7);
|
||||
z-index: 3;
|
||||
}
|
||||
.roadmap-col-card[data-card="2026"]::before {
|
||||
border-color: #eab308;
|
||||
box-shadow: 0 0 0 4px #09090b, 0 0 12px rgba(234, 179, 8, 0.6);
|
||||
}
|
||||
.roadmap-col-card[data-card="2027"]::before {
|
||||
border-color: #22c55e;
|
||||
box-shadow: 0 0 0 4px #09090b, 0 0 12px rgba(34, 197, 94, 0.6);
|
||||
}
|
||||
.roadmap-col-card[data-card="2028"]::before {
|
||||
border-color: #3b82f6;
|
||||
box-shadow: 0 0 0 4px #09090b, 0 0 12px rgba(59, 130, 246, 0.6);
|
||||
}
|
||||
.roadmap-col-card[data-card="2030"]::before {
|
||||
border-color: #ffffff;
|
||||
background: #C8102E;
|
||||
box-shadow: 0 0 0 4px #09090b, 0 0 16px rgba(200, 16, 46, 0.9);
|
||||
}
|
||||
/* the 2030 card's sweeping border (::after) would sit over the rail
|
||||
gutter — keep it from bleeding past the card's rounded edge */
|
||||
.glowing-vision-card::after { inset: -1px; }
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
.roadmap-hero-section { padding: 44px 14px 38px; }
|
||||
.roadmap-hero-section .intelligence-grid-title { font-size: clamp(28px, 8.4vw, 38px) !important; letter-spacing: -1px !important; }
|
||||
.roadmap-grid-container { padding-left: 28px; }
|
||||
.roadmap-grid-container::before { left: 5px; }
|
||||
.roadmap-col-card { padding: 22px 18px; }
|
||||
.roadmap-col-card::before { left: -28px; top: 26px; }
|
||||
.year-num { font-size: 23px; }
|
||||
.card-heading { font-size: 16px; }
|
||||
.card-text { font-size: 13px; }
|
||||
}
|
||||
`}} />
|
||||
|
||||
@@ -809,9 +876,10 @@ export default function IntelligenceGrid() {
|
||||
const is2030 = card.year === 2030;
|
||||
const isActive = activeYear === card.year;
|
||||
return (
|
||||
<div
|
||||
<div
|
||||
key={card.year}
|
||||
onMouseEnter={() => setActiveYear(card.year)}
|
||||
onClick={() => setActiveYear(card.year)}
|
||||
className={`roadmap-col-card ${is2030 ? "glowing-vision-card" : ""} ${isActive ? "active" : ""}`}
|
||||
data-card={card.year}
|
||||
>
|
||||
|
||||
@@ -116,6 +116,14 @@ export default function MileTruthHero() {
|
||||
padding: 0 40px !important;
|
||||
box-sizing: border-box !important;
|
||||
}
|
||||
.miletruth-hero .slide-content,
|
||||
.miletruth-hero .slide-content-inner {
|
||||
/* These carry inherited 20px padding from the slider theme with
|
||||
content-box sizing, so width:100% + padding overflowed the viewport
|
||||
by ~40px and pushed the hero off-center. Force border-box so the
|
||||
padding is contained and the block stays centered. */
|
||||
box-sizing: border-box !important;
|
||||
}
|
||||
.miletruth-hero .slide-content-inner {
|
||||
display: flex !important;
|
||||
flex-direction: column !important;
|
||||
@@ -284,17 +292,33 @@ export default function MileTruthHero() {
|
||||
.miletruth-hero .elementor-element-86f3204 {
|
||||
padding: 0 12px;
|
||||
}
|
||||
/* 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
|
||||
heading words overflowed, causing horizontal scroll + off-center look. */
|
||||
.miletruth-content {
|
||||
padding: 0 14px !important;
|
||||
}
|
||||
.miletruth-hero .slide-content {
|
||||
padding: 0 !important;
|
||||
}
|
||||
.miletruth-hero .elementor-element-8e5c81e {
|
||||
padding: 30px 0 !important;
|
||||
border-radius: 20px !important;
|
||||
}
|
||||
.miletruth-hero .elementor-element-8e5c81e > .e-con-inner {
|
||||
padding: 0 20px !important;
|
||||
}
|
||||
.miletruth-hero .elementor-element-628123a {
|
||||
grid-template-columns: 1fr !important;
|
||||
gap: 36px !important;
|
||||
}
|
||||
.miletruth-hero .content-slider-item-heading,
|
||||
.miletruth-hero .content-slider-item-heading .heading-content {
|
||||
font-size: 32px !important;
|
||||
font-size: clamp(26px, 8vw, 32px) !important;
|
||||
letter-spacing: -0.5px !important;
|
||||
/* never let a single long word push past the viewport */
|
||||
overflow-wrap: break-word;
|
||||
word-break: break-word;
|
||||
}
|
||||
}
|
||||
`}} />
|
||||
|
||||
@@ -98,6 +98,11 @@ export default function Miles3() {
|
||||
while keeping the 70px row-gap. */
|
||||
.elementor-element-4add972 {
|
||||
display: grid;
|
||||
/* Elementor's ".e-con.e-grid" (specificity 0,2,0) sets grid-template-columns
|
||||
from this CSS var, which OUT-RANKS a plain ".elementor-element-4add972"
|
||||
(0,1,0) rule — so the responsive breakpoints below MUST drive the var,
|
||||
not grid-template-columns directly, or the grid never collapses on mobile. */
|
||||
--e-con-grid-template-columns: repeat(3, 1fr);
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
grid-auto-flow: row;
|
||||
gap: 70px 60px;
|
||||
@@ -165,15 +170,15 @@ export default function Miles3() {
|
||||
.logico-front-end .elementor-element-63a9de5 .logico-title { font-size: clamp(40px, 5vw, 60px); }
|
||||
}
|
||||
@media (max-width: 1020px) {
|
||||
.elementor-element-c36a604 { margin: 15px 15px 0 15px; padding: 76px 0 0 0; }
|
||||
.elementor-element-c36a604 { margin: 15px 15px 0 15px; padding: 76px 0 60px 0; }
|
||||
.elementor-element-77d1265 { padding: 0 30px; }
|
||||
.elementor-element-4add972 { grid-template-columns: repeat(2, 1fr); gap: 50px 40px; }
|
||||
.elementor-element-4add972 { --e-con-grid-template-columns: repeat(2, 1fr); grid-template-columns: repeat(2, 1fr); gap: 50px 40px; }
|
||||
.logico-front-end .elementor-element-63a9de5 .logico-title { font-size: clamp(34px, 6vw, 52px); }
|
||||
}
|
||||
@media (max-width: 480px) {
|
||||
.elementor-element-c36a604 { margin: 12px 12px 0 12px; border-radius: 20px 20px 0 0; padding: 70px 0 0 0; }
|
||||
.elementor-element-c36a604 { margin: 12px 12px 0 12px; border-radius: 20px 20px 0 0; padding: 70px 0 50px 0; }
|
||||
.elementor-element-77d1265 { padding: 0 22px; }
|
||||
.elementor-element-4add972 { grid-template-columns: 1fr; gap: 56px; }
|
||||
.elementor-element-4add972 { --e-con-grid-template-columns: 1fr; grid-template-columns: 1fr; gap: 56px; }
|
||||
.logico-front-end .elementor-element-63a9de5 .logico-title { font-size: clamp(30px, 9vw, 44px); }
|
||||
}
|
||||
`}} />
|
||||
|
||||
@@ -57,6 +57,10 @@ export default function SolutionsHero() {
|
||||
width: 100% !important;
|
||||
max-width: 1000px !important;
|
||||
margin: 0 auto !important;
|
||||
/* Contain the slider theme's inherited 20px padding (content-box) so
|
||||
width:100% + padding doesn't overflow the viewport and push the
|
||||
heading off-center on mobile. */
|
||||
box-sizing: border-box !important;
|
||||
}
|
||||
|
||||
.elementor-element.elementor-element-6c7cbcb .content-slider-item-heading,
|
||||
@@ -110,6 +114,12 @@ export default function SolutionsHero() {
|
||||
border-radius: 25px !important;
|
||||
}
|
||||
|
||||
/* The stage-outer carries an inline height:800px; collapse it to the
|
||||
slide height so there is no dead empty space below the hero card. */
|
||||
.elementor-element.elementor-element-6c7cbcb .owl-stage-outer {
|
||||
height: 620px !important;
|
||||
}
|
||||
|
||||
.elementor-element.elementor-element-6c7cbcb .owl-carousel.owl-theme .content-item {
|
||||
width: 100% !important;
|
||||
min-height: 620px !important;
|
||||
@@ -133,6 +143,10 @@ export default function SolutionsHero() {
|
||||
border-radius: 22px !important;
|
||||
}
|
||||
|
||||
.elementor-element.elementor-element-6c7cbcb .owl-stage-outer {
|
||||
height: 560px !important;
|
||||
}
|
||||
|
||||
.elementor-element.elementor-element-6c7cbcb .owl-carousel.owl-theme .content-item {
|
||||
min-height: 560px !important;
|
||||
height: 560px !important;
|
||||
@@ -151,6 +165,28 @@ export default function SolutionsHero() {
|
||||
line-height: 1.05 !important;
|
||||
overflow-wrap: break-word !important;
|
||||
}
|
||||
|
||||
/* Pin the slide counter ("01/02") cleanly bottom-RIGHT — matching the
|
||||
Home and How-It-Works heroes. site.css parks it ~80px in from the
|
||||
right (looks left/centred), and the wide dot navigation eats the
|
||||
right side, so hide the dots on mobile and right-align the counter. */
|
||||
.elementor .elementor-element.elementor-element-6c7cbcb .slider-footer {
|
||||
text-align: right !important;
|
||||
margin-bottom: 24px !important;
|
||||
}
|
||||
.elementor .elementor-element.elementor-element-6c7cbcb .slider-footer .slider-pagination {
|
||||
justify-content: flex-end !important;
|
||||
margin-left: 22px !important;
|
||||
margin-right: 22px !important;
|
||||
}
|
||||
.elementor .elementor-element.elementor-element-6c7cbcb .owl-dots {
|
||||
display: none !important;
|
||||
}
|
||||
/* Hide the prev/next arrows on mobile (they overlap the counter) —
|
||||
slides still auto-rotate, matching the home hero. */
|
||||
.elementor .elementor-element.elementor-element-6c7cbcb .owl-nav {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
`}} />
|
||||
|
||||
@@ -226,14 +262,45 @@ export default function SolutionsHero() {
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Navigation controls (prev/next) — matches the home hero slider */}
|
||||
<div className="owl-nav">
|
||||
<button
|
||||
type="button"
|
||||
className="owl-next"
|
||||
onClick={() => setActiveSlide((prev) => (prev === 0 ? 1 : 0))}
|
||||
aria-label="Next"
|
||||
style={{ cursor: "pointer", border: "none", outline: "none" }}
|
||||
/>
|
||||
<button
|
||||
type="button"
|
||||
className="owl-prev"
|
||||
onClick={() => setActiveSlide((prev) => (prev === 0 ? 1 : 0))}
|
||||
aria-label="Previous"
|
||||
style={{ cursor: "pointer", border: "none", outline: "none" }}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Progress indicators */}
|
||||
<div className="slider-footer slider-footer-position-after slider-footer-width-full slider-footer-view-inside">
|
||||
<div className="slider-footer-content">
|
||||
<div className="slider-pagination" style={{ display: "flex", justifyContent: "flex-end", alignItems: "center", gap: "10px" }}>
|
||||
<div className="slider-progress-wrapper" style={{ marginRight: "15px" }}>
|
||||
<span className="slider-progress-current">{activeSlide === 0 ? "01" : "02"}</span>
|
||||
/
|
||||
<span className="slider-progress-all">02</span>
|
||||
<div className="slider-progress-wrapper" style={{ marginRight: "15px", display: "flex", flexDirection: "column", alignItems: "flex-start" }}>
|
||||
<div style={{ marginBottom: "4px" }}>
|
||||
<span className="slider-progress-current">{activeSlide === 0 ? "01" : "02"}</span>
|
||||
{" / "}
|
||||
<span className="slider-progress-all" style={{ opacity: 0.6 }}>02</span>
|
||||
</div>
|
||||
{/* Progress line — red bar slides to match the active slide (mirrors the home hero) */}
|
||||
<div style={{ width: "80px", height: "2px", background: "rgba(255, 255, 255, 0.2)", position: "relative", borderRadius: "1px", overflow: "hidden" }}>
|
||||
<div style={{
|
||||
position: "absolute",
|
||||
left: activeSlide === 0 ? "0" : "50%",
|
||||
width: "50%",
|
||||
height: "100%",
|
||||
background: "#c01227",
|
||||
transition: "left 0.3s ease"
|
||||
}} />
|
||||
</div>
|
||||
</div>
|
||||
<div className="owl-dots owl-dots-6c7cbcb" style={{ display: "flex", gap: "8px" }}>
|
||||
<button
|
||||
|
||||
@@ -229,14 +229,18 @@ export default function WhyChooseDoormile() {
|
||||
}
|
||||
|
||||
@media (max-width: 1020px) {
|
||||
.wcd-section { margin: -150px 15px 15px 15px; padding: 40px 0 80px; }
|
||||
/* No pull-up overlap on mobile/tablet: the Miles3 cards stack into a
|
||||
1–2 col layout, so a negative margin-top covers the last card's
|
||||
text. Both sections share #1F1F1F + equal side margins, so butting
|
||||
them at margin-top:0 keeps the seamless dark panel. */
|
||||
.wcd-section { margin: 0 15px 15px 15px; padding: 40px 0 80px; }
|
||||
.wcd-inner { padding: 0 30px; }
|
||||
.wcd-grid { grid-template-columns: 1fr; gap: 24px; }
|
||||
.wcd-card-body { padding: 32px; }
|
||||
.logico-front-end .wcd-section h3.wcd-card-title { font-size: 28px; }
|
||||
}
|
||||
@media (max-width: 480px) {
|
||||
.wcd-section { margin: -100px 12px 12px 12px; border-radius: 0 0 20px 20px; padding: 30px 0 64px; }
|
||||
.wcd-section { margin: 0 12px 12px 12px; border-radius: 0 0 20px 20px; padding: 30px 0 64px; }
|
||||
.wcd-inner { padding: 0 20px; }
|
||||
.wcd-card-body { padding: 24px; }
|
||||
}
|
||||
|
||||
@@ -179,6 +179,21 @@ export default function WomenSection() {
|
||||
white-space: nowrap !important;
|
||||
}
|
||||
|
||||
/* The banner image (bg-header-women.png) is very wide (≈2.48:1) and the
|
||||
woman — the subject of this section — sits on the right. On narrow
|
||||
screens "cover" center-crops her out, so shift the focal point right
|
||||
to keep her face in frame. */
|
||||
@media (max-width: 1024px) {
|
||||
.elementor-element.elementor-element-7da6646:not(.elementor-motion-effects-element-type-background) {
|
||||
background-position: 78% center !important;
|
||||
}
|
||||
}
|
||||
@media (max-width: 600px) {
|
||||
.elementor-element.elementor-element-7da6646:not(.elementor-motion-effects-element-type-background) {
|
||||
background-position: 82% center !important;
|
||||
}
|
||||
}
|
||||
|
||||
/* Stack the two columns below the desktop breakpoint so the box group
|
||||
always gets full width and stays centered — never clipped. */
|
||||
@media (max-width: 1024px) {
|
||||
@@ -187,11 +202,46 @@ export default function WomenSection() {
|
||||
}
|
||||
.elementor-element.elementor-element-2ed47f3 { grid-template-columns: 1fr !important; }
|
||||
#ws-stories { max-width: 640px; margin: 0 auto; }
|
||||
/* Align the heading, image and stats/cards to one shared left/right
|
||||
edge — the heading + image widgets carried extra inset that left
|
||||
them staggered (80px / 70px / 60px) against the stats column. */
|
||||
#women-entrepreneurship .elementor-element-36efec7,
|
||||
#women-entrepreneurship .elementor-element-b2c956f {
|
||||
padding-left: 0 !important;
|
||||
padding-right: 0 !important;
|
||||
}
|
||||
#women-entrepreneurship .elementor-element-778840d,
|
||||
#women-entrepreneurship .elementor-element-bbfb67f,
|
||||
#women-entrepreneurship .elementor-element-778840d > .elementor-widget-container,
|
||||
#women-entrepreneurship .elementor-element-bbfb67f > .elementor-widget-container {
|
||||
padding-left: 0 !important;
|
||||
padding-right: 0 !important;
|
||||
margin-left: 0 !important;
|
||||
margin-right: 0 !important;
|
||||
}
|
||||
}
|
||||
@media (max-width: 600px) {
|
||||
#ws-stories .ws__stats { grid-template-columns: 1fr 1fr 1fr; gap: 8px; }
|
||||
#ws-stories .ws__stat { padding: 14px 10px; }
|
||||
#ws-stories .ws__stat-label { font-size: 11px !important; letter-spacing: 0.02em; }
|
||||
/* 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
|
||||
centered, so every stat reads as a clean full-width row instead of
|
||||
three cramped columns. */
|
||||
#ws-stories .ws__stats { grid-template-columns: 1fr; gap: 12px; }
|
||||
#ws-stories .ws__stat {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 16px;
|
||||
padding: 20px 22px;
|
||||
min-width: 0;
|
||||
}
|
||||
#ws-stories .ws__stat-num { font-size: clamp(30px, 9vw, 40px); }
|
||||
#ws-stories .ws__stat-label {
|
||||
margin-top: 0;
|
||||
font-size: 13px !important;
|
||||
letter-spacing: 0.02em;
|
||||
text-align: right;
|
||||
min-height: 0;
|
||||
}
|
||||
#ws-stories .ws__cards { grid-template-columns: 1fr; }
|
||||
}
|
||||
`}} />
|
||||
|
||||
@@ -249,7 +249,8 @@ const styles = `
|
||||
}
|
||||
@media (max-width: 767px) {
|
||||
.dm-wf3-card {
|
||||
margin: 0 10px 0;
|
||||
/* Bottom gap separates this last workflow card from the contact section below. */
|
||||
margin: 0 10px 16px;
|
||||
border-radius: 0 0 20px 20px;
|
||||
padding: 36px 28px;
|
||||
gap: 36px;
|
||||
|
||||
22
v.mjs
Normal file
22
v.mjs
Normal file
@@ -0,0 +1,22 @@
|
||||
import { chromium } from 'playwright-core';
|
||||
const exe = process.env.HOME + '/Library/Caches/ms-playwright/chromium-1223/chrome-mac-arm64/Google Chrome for Testing.app/Contents/MacOS/Google Chrome for Testing';
|
||||
const browser = await chromium.launch({ executablePath: exe });
|
||||
const page = await browser.newPage({ viewport: { width: 390, height: 760 }, deviceScaleFactor: 2 });
|
||||
// keep the loader on screen long enough: throttle nothing, just capture during initial window
|
||||
const resp = page.goto('http://localhost:3000/contact', { waitUntil: 'commit' }).catch(()=>{});
|
||||
// poll quickly for the loader + logo box while visible
|
||||
let measured = null;
|
||||
for (let i=0;i<40;i++){
|
||||
try {
|
||||
const m = await page.evaluate(()=>{
|
||||
const loader=document.querySelector('.dm-loader'); const logo=document.querySelector('.dm-loader__logo');
|
||||
if(!loader||!logo) return null;
|
||||
const r=logo.getBoundingClientRect();
|
||||
return { vw:innerWidth, logoLeft:Math.round(r.left), logoRight:Math.round(r.right), logoW:Math.round(r.width), centerOffset:Math.round((r.left+r.width/2)-(innerWidth/2)) };
|
||||
});
|
||||
if(m){ measured=m; if(i===2){ await page.screenshot({path:'/tmp/loader.png'}); } }
|
||||
} catch(e){}
|
||||
await page.waitForTimeout(40);
|
||||
}
|
||||
console.log(JSON.stringify(measured));
|
||||
await browser.close();
|
||||
Reference in New Issue
Block a user