fix mobile screen issue
This commit is contained in:
@@ -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;
|
||||
|
||||
Reference in New Issue
Block a user