update folder
This commit is contained in:
685
web/comparision.php
Normal file
685
web/comparision.php
Normal file
@@ -0,0 +1,685 @@
|
||||
|
||||
<style>
|
||||
/* ── ALL STYLES SCOPED UNDER .dm-compare-section ── */
|
||||
|
||||
.dm-compare-section *,
|
||||
.dm-compare-section *::before,
|
||||
.dm-compare-section *::after {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.dm-compare-section {
|
||||
--dm-red: #c01227;
|
||||
--dm-red-light: #fdf0f2;
|
||||
--dm-red-border: rgba(192, 18, 39, 0.12);
|
||||
--dm-red-hover: rgba(192, 18, 39, 0.025);
|
||||
--dm-green: #1dab6e;
|
||||
--dm-green-light: #edfaf4;
|
||||
--dm-dark: #1a1e2e;
|
||||
--dm-muted: #8d93a8;
|
||||
--dm-white: #ffffff;
|
||||
--dm-border: rgba(0, 0, 0, 0.07);
|
||||
|
||||
width: 100%;
|
||||
max-width: 1100px;
|
||||
margin: 0 auto;
|
||||
padding: 50px 40px 0px;
|
||||
position: relative;
|
||||
font-family: 'Manrope', sans-serif;
|
||||
}
|
||||
|
||||
/* grid background */
|
||||
.dm-compare-section::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background-image:
|
||||
linear-gradient(to right, rgba(0,0,0,0.035) 1px, transparent 1px),
|
||||
linear-gradient(to bottom, rgba(0,0,0,0.035) 1px, transparent 1px);
|
||||
background-size: 70px 70px;
|
||||
pointer-events: none;
|
||||
mask-image: radial-gradient(ellipse 85% 85% at 50% 50%, black 40%, transparent 100%);
|
||||
-webkit-mask-image: radial-gradient(ellipse 85% 85% at 50% 50%, black 40%, transparent 100%);
|
||||
z-index: 0;
|
||||
border-radius: 24px;
|
||||
}
|
||||
|
||||
/* ── HEADER ── */
|
||||
.dm-compare-section .dm-section-header {
|
||||
text-align: center;
|
||||
margin-bottom: 56px;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.dm-compare-section .dm-eyebrow {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
font-family: 'Manrope', sans-serif;
|
||||
font-size: 11px;
|
||||
font-weight: 700;
|
||||
letter-spacing: 3.5px;
|
||||
text-transform: uppercase;
|
||||
color: var(--dm-red);
|
||||
margin-bottom: 18px;
|
||||
opacity: 0;
|
||||
transform: translateY(18px);
|
||||
transition: opacity 0.55s ease, transform 0.55s ease;
|
||||
}
|
||||
.dm-compare-section .dm-eyebrow::before,
|
||||
.dm-compare-section .dm-eyebrow::after {
|
||||
content: '';
|
||||
display: block;
|
||||
width: 28px;
|
||||
height: 1px;
|
||||
background: var(--dm-red);
|
||||
}
|
||||
|
||||
.dm-compare-section .dm-section-title {
|
||||
font-family: 'Manrope', sans-serif;
|
||||
font-size: clamp(36px, 5vw, 62px);
|
||||
font-weight: 800;
|
||||
color: var(--dm-dark);
|
||||
line-height: 1.05;
|
||||
letter-spacing: -1px;
|
||||
margin: 0;
|
||||
opacity: 0;
|
||||
transform: translateY(28px);
|
||||
transition: opacity 0.65s ease 0.12s, transform 0.65s ease 0.12s;
|
||||
}
|
||||
.dm-compare-section .dm-section-title em {
|
||||
font-style: normal;
|
||||
color: var(--dm-red);
|
||||
position: relative;
|
||||
}
|
||||
.dm-compare-section .dm-section-title em::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
bottom: 3px; left: 0; right: 0;
|
||||
height: 3px;
|
||||
background: var(--dm-red);
|
||||
border-radius: 2px;
|
||||
transform: scaleX(0);
|
||||
transform-origin: left;
|
||||
transition: transform 0.8s cubic-bezier(.16,1,.3,1) 0.85s;
|
||||
}
|
||||
|
||||
.dm-compare-section .dm-section-sub {
|
||||
margin-top: 18px;
|
||||
font-size: 15.5px;
|
||||
color: var(--dm-muted);
|
||||
line-height: 1.7;
|
||||
opacity: 0;
|
||||
transform: translateY(18px);
|
||||
transition: opacity 0.65s ease 0.26s, transform 0.65s ease 0.26s;
|
||||
}
|
||||
|
||||
/* ── IN-VIEW TRIGGERS ── */
|
||||
.dm-compare-section.dm-in-view .dm-eyebrow { opacity: 1; transform: translateY(0); }
|
||||
.dm-compare-section.dm-in-view .dm-section-title { opacity: 1; transform: translateY(0); }
|
||||
.dm-compare-section.dm-in-view .dm-section-title em::after { transform: scaleX(1); }
|
||||
.dm-compare-section.dm-in-view .dm-section-sub { opacity: 1; transform: translateY(0); }
|
||||
|
||||
/* ── TABLE WRAPPER ── */
|
||||
.dm-compare-section .dm-compare-wrap {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
border-radius: 22px;
|
||||
overflow: hidden;
|
||||
box-shadow: 0 8px 50px rgba(0,0,0,0.09);
|
||||
background: var(--dm-white);
|
||||
opacity: 0;
|
||||
transform: translateY(40px);
|
||||
transition: opacity 0.75s cubic-bezier(.16,1,.3,1) 0.35s,
|
||||
transform 0.75s cubic-bezier(.16,1,.3,1) 0.35s;
|
||||
}
|
||||
.dm-compare-section.dm-in-view .dm-compare-wrap { opacity: 1; transform: translateY(0); }
|
||||
|
||||
/* ── COLUMN HEADERS ── */
|
||||
.dm-compare-section .dm-col-headers {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
position: relative;
|
||||
}
|
||||
.dm-compare-section .dm-col-headers::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0; bottom: 0; left: 50%;
|
||||
width: 1px;
|
||||
background: var(--dm-border);
|
||||
}
|
||||
|
||||
.dm-compare-section .dm-col-head {
|
||||
padding: 26px 40px;
|
||||
font-family: 'Manrope', sans-serif;
|
||||
font-size: 13px;
|
||||
font-weight: 700;
|
||||
letter-spacing: 2.5px;
|
||||
text-transform: uppercase;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
}
|
||||
.dm-compare-section .dm-col-head.dm-traditional {
|
||||
background: #f7f8fa;
|
||||
color: var(--dm-muted);
|
||||
border-bottom: 1px solid var(--dm-border);
|
||||
}
|
||||
.dm-compare-section .dm-col-head.dm-doormile {
|
||||
background: var(--dm-red-light);
|
||||
color: var(--dm-red);
|
||||
border-bottom: 1px solid var(--dm-red-border);
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
.dm-compare-section .dm-col-head.dm-doormile::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0; left: -100%;
|
||||
width: 60%; height: 100%;
|
||||
background: linear-gradient(90deg, transparent, rgba(255,255,255,0.5), transparent);
|
||||
animation: dm-shimmer 3s ease-in-out infinite 1.2s;
|
||||
}
|
||||
@keyframes dm-shimmer {
|
||||
0% { left: -100%; }
|
||||
50% { left: 140%; }
|
||||
100% { left: 140%; }
|
||||
}
|
||||
|
||||
.dm-compare-section .dm-col-head-icon {
|
||||
width: 28px; height: 28px;
|
||||
border-radius: 8px;
|
||||
display: flex; align-items: center; justify-content: center;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.dm-compare-section .dm-col-head.dm-traditional .dm-col-head-icon { background: #ececee; }
|
||||
.dm-compare-section .dm-col-head.dm-doormile .dm-col-head-icon { background: rgba(192,18,39,0.15); }
|
||||
|
||||
.dm-compare-section .dm-col-head-icon svg {
|
||||
width: 14px; height: 14px;
|
||||
stroke-width: 2.5;
|
||||
stroke-linecap: round; stroke-linejoin: round;
|
||||
fill: none;
|
||||
}
|
||||
.dm-compare-section .dm-col-head.dm-traditional .dm-col-head-icon svg { stroke: var(--dm-muted); }
|
||||
.dm-compare-section .dm-col-head.dm-doormile .dm-col-head-icon svg { stroke: var(--dm-red); }
|
||||
|
||||
/* ── ROWS ── */
|
||||
.dm-compare-section .dm-compare-row {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
border-top: 1px solid var(--dm-border);
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
opacity: 0;
|
||||
transform: translateX(-16px);
|
||||
transition: opacity 0.5s ease, transform 0.5s cubic-bezier(.16,1,.3,1);
|
||||
}
|
||||
.dm-compare-section.dm-in-view .dm-compare-row:nth-child(1) { opacity: 1; transform: translateX(0); transition-delay: 0.55s; }
|
||||
.dm-compare-section.dm-in-view .dm-compare-row:nth-child(2) { opacity: 1; transform: translateX(0); transition-delay: 0.68s; }
|
||||
.dm-compare-section.dm-in-view .dm-compare-row:nth-child(3) { opacity: 1; transform: translateX(0); transition-delay: 0.81s; }
|
||||
.dm-compare-section.dm-in-view .dm-compare-row:nth-child(4) { opacity: 1; transform: translateX(0); transition-delay: 0.94s; }
|
||||
|
||||
.dm-compare-section .dm-compare-row::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background: var(--dm-red-hover);
|
||||
opacity: 0;
|
||||
transition: opacity 0.25s;
|
||||
pointer-events: none;
|
||||
}
|
||||
.dm-compare-section .dm-compare-row:hover::before { opacity: 1; }
|
||||
|
||||
/* ── CELLS ── */
|
||||
.dm-compare-section .dm-cell {
|
||||
padding: 28px 40px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 16px;
|
||||
font-size: 15px;
|
||||
line-height: 1.5;
|
||||
position: relative;
|
||||
}
|
||||
.dm-compare-section .dm-cell.dm-right {
|
||||
border-left: 1px solid var(--dm-border);
|
||||
background: rgba(253,248,248,0.4);
|
||||
}
|
||||
|
||||
/* ── ICONS ── */
|
||||
.dm-compare-section .dm-cell-icon {
|
||||
flex-shrink: 0;
|
||||
width: 32px; height: 32px;
|
||||
border-radius: 50%;
|
||||
display: flex; align-items: center; justify-content: center;
|
||||
transition: transform 0.35s cubic-bezier(.16,1,.3,1);
|
||||
}
|
||||
.dm-compare-section .dm-compare-row:hover .dm-cell-icon { transform: scale(1.18) rotate(-5deg); }
|
||||
.dm-compare-section .dm-cell-icon.dm-bad { background: var(--dm-red-light); }
|
||||
.dm-compare-section .dm-cell-icon.dm-good { background: var(--dm-green-light); }
|
||||
.dm-compare-section .dm-cell-icon svg {
|
||||
width: 15px; height: 15px;
|
||||
stroke-width: 2.5;
|
||||
stroke-linecap: round; stroke-linejoin: round;
|
||||
fill: none;
|
||||
}
|
||||
.dm-compare-section .dm-cell-icon.dm-bad svg { stroke: var(--dm-red); }
|
||||
.dm-compare-section .dm-cell-icon.dm-good svg { stroke: var(--dm-green); }
|
||||
|
||||
.dm-compare-section .dm-cell-text {
|
||||
font-weight: 500;
|
||||
color: var(--dm-dark);
|
||||
transition: color 0.2s;
|
||||
margin: 0;
|
||||
}
|
||||
.dm-compare-section .dm-cell.dm-left .dm-cell-text { color: var(--dm-muted); }
|
||||
.dm-compare-section .dm-compare-row:hover .dm-cell.dm-right .dm-cell-text { color: var(--dm-dark); }
|
||||
|
||||
/* ── FOOTER BAR ── */
|
||||
.dm-compare-section .dm-compare-footer {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
border-top: 1px solid var(--dm-border);
|
||||
}
|
||||
.dm-compare-section .dm-footer-cell {
|
||||
padding: 22px 40px;
|
||||
font-size: 12px;
|
||||
font-family: 'Manrope', sans-serif;
|
||||
font-weight: 700;
|
||||
letter-spacing: 1.5px;
|
||||
text-transform: uppercase;
|
||||
color: var(--dm-muted);
|
||||
background: #f9fafb;
|
||||
}
|
||||
.dm-compare-section .dm-footer-cell.dm-right {
|
||||
background: var(--dm-red-light);
|
||||
color: var(--dm-red);
|
||||
border-left: 1px solid var(--dm-red-border);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
.dm-compare-section .dm-footer-cell .dm-dot {
|
||||
width: 7px; height: 7px;
|
||||
border-radius: 50%;
|
||||
background: var(--dm-red);
|
||||
flex-shrink: 0;
|
||||
animation: dm-pulse 1.8s ease-in-out infinite;
|
||||
}
|
||||
@keyframes dm-pulse {
|
||||
0%, 100% { opacity: 1; transform: scale(1); }
|
||||
50% { opacity: 0.35; transform: scale(0.55); }
|
||||
}
|
||||
|
||||
|
||||
/* ─── LARGE DESKTOP (1440px+) ─── */
|
||||
@media (min-width: 1440px) {
|
||||
|
||||
.dm-compare-section {
|
||||
max-width: 1260px;
|
||||
padding: 60px 52px 0px;
|
||||
}
|
||||
|
||||
.dm-compare-section::before {
|
||||
background-size: 80px 80px;
|
||||
}
|
||||
|
||||
.dm-compare-section .dm-section-header {
|
||||
margin-bottom: 64px;
|
||||
}
|
||||
|
||||
.dm-compare-section .dm-eyebrow {
|
||||
font-size: 12px;
|
||||
letter-spacing: 3.8px;
|
||||
gap: 12px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.dm-compare-section .dm-eyebrow::before,
|
||||
.dm-compare-section .dm-eyebrow::after {
|
||||
width: 32px;
|
||||
}
|
||||
|
||||
.dm-compare-section .dm-section-title {
|
||||
font-size: clamp(40px, 5vw, 68px);
|
||||
letter-spacing: -1.1px;
|
||||
}
|
||||
|
||||
.dm-compare-section .dm-section-sub {
|
||||
font-size: 16px;
|
||||
margin-top: 20px;
|
||||
line-height: 1.72;
|
||||
}
|
||||
|
||||
.dm-compare-section .dm-compare-wrap {
|
||||
border-radius: 24px;
|
||||
}
|
||||
|
||||
.dm-compare-section .dm-col-head {
|
||||
padding: 30px 44px;
|
||||
font-size: 13.5px;
|
||||
letter-spacing: 2.8px;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.dm-compare-section .dm-col-head-icon {
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
border-radius: 9px;
|
||||
}
|
||||
|
||||
.dm-compare-section .dm-col-head-icon svg {
|
||||
width: 15px;
|
||||
height: 15px;
|
||||
}
|
||||
|
||||
.dm-compare-section .dm-cell {
|
||||
padding: 30px 44px;
|
||||
gap: 18px;
|
||||
font-size: 15.5px;
|
||||
}
|
||||
|
||||
.dm-compare-section .dm-cell-icon {
|
||||
width: 34px;
|
||||
height: 34px;
|
||||
}
|
||||
|
||||
.dm-compare-section .dm-cell-icon svg {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
}
|
||||
|
||||
.dm-compare-section .dm-footer-cell {
|
||||
padding: 24px 44px;
|
||||
font-size: 12.5px;
|
||||
letter-spacing: 1.8px;
|
||||
}
|
||||
}
|
||||
|
||||
/* ─── EXTRA-LARGE DESKTOP (1920px+) ─── */
|
||||
@media (min-width: 1920px) {
|
||||
|
||||
.dm-compare-section {
|
||||
max-width: 1480px;
|
||||
padding: 72px 64px 0px;
|
||||
}
|
||||
|
||||
.dm-compare-section::before {
|
||||
background-size: 90px 90px;
|
||||
}
|
||||
|
||||
.dm-compare-section .dm-section-header {
|
||||
margin-bottom: 72px;
|
||||
}
|
||||
|
||||
.dm-compare-section .dm-eyebrow {
|
||||
font-size: 13px;
|
||||
letter-spacing: 4px;
|
||||
gap: 13px;
|
||||
margin-bottom: 22px;
|
||||
}
|
||||
|
||||
.dm-compare-section .dm-eyebrow::before,
|
||||
.dm-compare-section .dm-eyebrow::after {
|
||||
width: 36px;
|
||||
}
|
||||
|
||||
.dm-compare-section .dm-section-title {
|
||||
font-size: clamp(46px, 5vw, 76px);
|
||||
letter-spacing: -1.3px;
|
||||
}
|
||||
|
||||
.dm-compare-section .dm-section-sub {
|
||||
font-size: 17px;
|
||||
margin-top: 22px;
|
||||
line-height: 1.75;
|
||||
}
|
||||
|
||||
.dm-compare-section .dm-compare-wrap {
|
||||
border-radius: 26px;
|
||||
box-shadow: 0 10px 60px rgba(0,0,0,0.1);
|
||||
}
|
||||
|
||||
.dm-compare-section .dm-col-head {
|
||||
padding: 32px 52px;
|
||||
font-size: 14px;
|
||||
letter-spacing: 3px;
|
||||
gap: 13px;
|
||||
}
|
||||
|
||||
.dm-compare-section .dm-col-head-icon {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
.dm-compare-section .dm-col-head-icon svg {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
}
|
||||
|
||||
.dm-compare-section .dm-cell {
|
||||
padding: 34px 52px;
|
||||
gap: 20px;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.dm-compare-section .dm-cell-icon {
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
}
|
||||
|
||||
.dm-compare-section .dm-cell-icon svg {
|
||||
width: 17px;
|
||||
height: 17px;
|
||||
}
|
||||
|
||||
.dm-compare-section .dm-footer-cell {
|
||||
padding: 26px 52px;
|
||||
font-size: 13px;
|
||||
letter-spacing: 2px;
|
||||
}
|
||||
}
|
||||
|
||||
/* ─── ULTRA-WIDE (2560px+) ─── */
|
||||
@media (min-width: 2560px) {
|
||||
|
||||
.dm-compare-section {
|
||||
max-width: 1760px;
|
||||
padding: 80px 72px 0px;
|
||||
}
|
||||
|
||||
.dm-compare-section::before {
|
||||
background-size: 100px 100px;
|
||||
}
|
||||
|
||||
.dm-compare-section .dm-section-header {
|
||||
margin-bottom: 84px;
|
||||
}
|
||||
|
||||
.dm-compare-section .dm-eyebrow {
|
||||
font-size: 14px;
|
||||
letter-spacing: 4.5px;
|
||||
gap: 14px;
|
||||
margin-bottom: 26px;
|
||||
}
|
||||
|
||||
.dm-compare-section .dm-eyebrow::before,
|
||||
.dm-compare-section .dm-eyebrow::after {
|
||||
width: 42px;
|
||||
}
|
||||
|
||||
.dm-compare-section .dm-section-title {
|
||||
font-size: clamp(52px, 5vw, 84px);
|
||||
letter-spacing: -1.5px;
|
||||
}
|
||||
|
||||
.dm-compare-section .dm-section-sub {
|
||||
font-size: 18.5px;
|
||||
margin-top: 26px;
|
||||
line-height: 1.8;
|
||||
}
|
||||
|
||||
.dm-compare-section .dm-compare-wrap {
|
||||
border-radius: 28px;
|
||||
box-shadow: 0 12px 70px rgba(0,0,0,0.1);
|
||||
}
|
||||
|
||||
.dm-compare-section .dm-col-head {
|
||||
padding: 36px 60px;
|
||||
font-size: 15px;
|
||||
letter-spacing: 3.5px;
|
||||
gap: 14px;
|
||||
}
|
||||
|
||||
.dm-compare-section .dm-col-head-icon {
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
border-radius: 11px;
|
||||
}
|
||||
|
||||
.dm-compare-section .dm-col-head-icon svg {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
}
|
||||
|
||||
.dm-compare-section .dm-cell {
|
||||
padding: 38px 60px;
|
||||
gap: 22px;
|
||||
font-size: 17px;
|
||||
line-height: 1.55;
|
||||
}
|
||||
|
||||
.dm-compare-section .dm-cell-icon {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
}
|
||||
|
||||
.dm-compare-section .dm-cell-icon svg {
|
||||
width: 19px;
|
||||
height: 19px;
|
||||
}
|
||||
|
||||
.dm-compare-section .dm-footer-cell {
|
||||
padding: 28px 60px;
|
||||
font-size: 14px;
|
||||
letter-spacing: 2.2px;
|
||||
}
|
||||
|
||||
.dm-compare-section .dm-footer-cell .dm-dot {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
/* ── RESPONSIVE (MOBILE) ── */
|
||||
@media (max-width: 680px) {
|
||||
.dm-compare-section { padding: 60px 16px 70px; }
|
||||
.dm-compare-section .dm-col-head,
|
||||
.dm-compare-section .dm-cell { padding: 20px 20px; }
|
||||
.dm-compare-section .dm-footer-cell { padding: 18px 20px; }
|
||||
.dm-compare-section .dm-col-head { font-size: 11px; letter-spacing: 1.5px; }
|
||||
}
|
||||
</style>
|
||||
|
||||
<!-- ── SECTION HTML ── -->
|
||||
<section class="dm-compare-section" id="dm-compare">
|
||||
|
||||
<div class="dm-section-header">
|
||||
<div class="dm-eyebrow">Why It Matters</div>
|
||||
<h2 class="dm-section-title">Two Approaches.<br><em>One Clear Winner.</em></h2>
|
||||
<p class="dm-section-sub">See how the Doormile way eliminates the friction that traditional logistics creates at every step.</p>
|
||||
</div>
|
||||
|
||||
<div class="dm-compare-wrap">
|
||||
|
||||
<div class="dm-col-headers">
|
||||
<div class="dm-col-head dm-traditional">
|
||||
<div class="dm-col-head-icon">
|
||||
<svg viewBox="0 0 24 24"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>
|
||||
</div>
|
||||
Traditional Approach
|
||||
</div>
|
||||
<div class="dm-col-head dm-doormile">
|
||||
<div class="dm-col-head-icon">
|
||||
<svg viewBox="0 0 24 24"><polyline points="20 6 9 17 4 12"/></svg>
|
||||
</div>
|
||||
The Doormile Way
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="dm-rows-wrap">
|
||||
<div class="dm-compare-row">
|
||||
<div class="dm-cell dm-left">
|
||||
<div class="dm-cell-icon dm-bad"><svg viewBox="0 0 24 24"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg></div>
|
||||
<span class="dm-cell-text">First mile ignores last mile SLA</span>
|
||||
</div>
|
||||
<div class="dm-cell dm-right">
|
||||
<div class="dm-cell-icon dm-good"><svg viewBox="0 0 24 24"><polyline points="20 6 9 17 4 12"/></svg></div>
|
||||
<span class="dm-cell-text">Every mile protects the final delivery</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="dm-compare-row">
|
||||
<div class="dm-cell dm-left">
|
||||
<div class="dm-cell-icon dm-bad"><svg viewBox="0 0 24 24"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg></div>
|
||||
<span class="dm-cell-text">Reactive problem discovery</span>
|
||||
</div>
|
||||
<div class="dm-cell dm-right">
|
||||
<div class="dm-cell-icon dm-good"><svg viewBox="0 0 24 24"><polyline points="20 6 9 17 4 12"/></svg></div>
|
||||
<span class="dm-cell-text">Proactive delay prevention</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="dm-compare-row">
|
||||
<div class="dm-cell dm-left">
|
||||
<div class="dm-cell-icon dm-bad"><svg viewBox="0 0 24 24"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg></div>
|
||||
<span class="dm-cell-text">Multiple vendors, no accountability</span>
|
||||
</div>
|
||||
<div class="dm-cell dm-right">
|
||||
<div class="dm-cell-icon dm-good"><svg viewBox="0 0 24 24"><polyline points="20 6 9 17 4 12"/></svg></div>
|
||||
<span class="dm-cell-text">Single owner, single promise</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="dm-compare-row">
|
||||
<div class="dm-cell dm-left">
|
||||
<div class="dm-cell-icon dm-bad"><svg viewBox="0 0 24 24"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg></div>
|
||||
<span class="dm-cell-text">Static plans break at first variance</span>
|
||||
</div>
|
||||
<div class="dm-cell dm-right">
|
||||
<div class="dm-cell-icon dm-good"><svg viewBox="0 0 24 24"><polyline points="20 6 9 17 4 12"/></svg></div>
|
||||
<span class="dm-cell-text">Dynamic AI-driven adjustments</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="dm-compare-footer">
|
||||
<div class="dm-footer-cell">Outdated · Fragmented · Reactive</div>
|
||||
<div class="dm-footer-cell dm-right">
|
||||
<span class="dm-dot"></span>
|
||||
Unified · Intelligent · Proactive
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<script>
|
||||
(function () {
|
||||
var section = document.getElementById('dm-compare');
|
||||
if (!section) return;
|
||||
function activate() { section.classList.add('dm-in-view'); }
|
||||
if ('IntersectionObserver' in window) {
|
||||
var io = new IntersectionObserver(function (entries) {
|
||||
entries.forEach(function (e) {
|
||||
if (e.isIntersecting) { activate(); io.unobserve(e.target); }
|
||||
});
|
||||
}, { threshold: 0.15 });
|
||||
io.observe(section);
|
||||
} else {
|
||||
setTimeout(activate, 300);
|
||||
}
|
||||
})();
|
||||
</script>
|
||||
685
web/comparision2.php
Normal file
685
web/comparision2.php
Normal file
@@ -0,0 +1,685 @@
|
||||
|
||||
<style>
|
||||
/* ── ALL STYLES SCOPED UNDER .dm-compare-section ── */
|
||||
|
||||
.dm-compare-section *,
|
||||
.dm-compare-section *::before,
|
||||
.dm-compare-section *::after {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.dm-compare-section {
|
||||
--dm-red: #c01227;
|
||||
--dm-red-light: #fdf0f2;
|
||||
--dm-red-border: rgba(192, 18, 39, 0.12);
|
||||
--dm-red-hover: rgba(192, 18, 39, 0.025);
|
||||
--dm-green: #1dab6e;
|
||||
--dm-green-light: #edfaf4;
|
||||
--dm-dark: #1a1e2e;
|
||||
--dm-muted: #8d93a8;
|
||||
--dm-white: #ffffff;
|
||||
--dm-border: rgba(0, 0, 0, 0.07);
|
||||
|
||||
width: 100%;
|
||||
max-width: 1100px;
|
||||
margin: 0 auto;
|
||||
padding: 50px 40px 0px;
|
||||
position: relative;
|
||||
font-family: 'Manrope', sans-serif;
|
||||
}
|
||||
|
||||
/* grid background */
|
||||
.dm-compare-section::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background-image:
|
||||
linear-gradient(to right, rgba(0,0,0,0.035) 1px, transparent 1px),
|
||||
linear-gradient(to bottom, rgba(0,0,0,0.035) 1px, transparent 1px);
|
||||
background-size: 70px 70px;
|
||||
pointer-events: none;
|
||||
mask-image: radial-gradient(ellipse 85% 85% at 50% 50%, black 40%, transparent 100%);
|
||||
-webkit-mask-image: radial-gradient(ellipse 85% 85% at 50% 50%, black 40%, transparent 100%);
|
||||
z-index: 0;
|
||||
border-radius: 24px;
|
||||
}
|
||||
|
||||
/* ── HEADER ── */
|
||||
.dm-compare-section .dm-section-header {
|
||||
text-align: center;
|
||||
margin-bottom: 56px;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.dm-compare-section .dm-eyebrow {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
font-family: 'Manrope', sans-serif;
|
||||
font-size: 11px;
|
||||
font-weight: 700;
|
||||
letter-spacing: 3.5px;
|
||||
text-transform: uppercase;
|
||||
color: var(--dm-red);
|
||||
margin-bottom: 18px;
|
||||
opacity: 0;
|
||||
transform: translateY(18px);
|
||||
transition: opacity 0.55s ease, transform 0.55s ease;
|
||||
}
|
||||
.dm-compare-section .dm-eyebrow::before,
|
||||
.dm-compare-section .dm-eyebrow::after {
|
||||
content: '';
|
||||
display: block;
|
||||
width: 28px;
|
||||
height: 1px;
|
||||
background: var(--dm-red);
|
||||
}
|
||||
|
||||
.dm-compare-section .dm-section-title {
|
||||
font-family: 'Manrope', sans-serif;
|
||||
font-size: clamp(36px, 5vw, 62px);
|
||||
font-weight: 800;
|
||||
color: var(--dm-dark);
|
||||
line-height: 1.05;
|
||||
letter-spacing: -1px;
|
||||
margin: 0;
|
||||
opacity: 0;
|
||||
transform: translateY(28px);
|
||||
transition: opacity 0.65s ease 0.12s, transform 0.65s ease 0.12s;
|
||||
}
|
||||
.dm-compare-section .dm-section-title em {
|
||||
font-style: normal;
|
||||
color: var(--dm-red);
|
||||
position: relative;
|
||||
}
|
||||
.dm-compare-section .dm-section-title em::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
bottom: 3px; left: 0; right: 0;
|
||||
height: 3px;
|
||||
background: var(--dm-red);
|
||||
border-radius: 2px;
|
||||
transform: scaleX(0);
|
||||
transform-origin: left;
|
||||
transition: transform 0.8s cubic-bezier(.16,1,.3,1) 0.85s;
|
||||
}
|
||||
|
||||
.dm-compare-section .dm-section-sub {
|
||||
margin-top: 18px;
|
||||
font-size: 15.5px;
|
||||
color: var(--dm-muted);
|
||||
line-height: 1.7;
|
||||
opacity: 0;
|
||||
transform: translateY(18px);
|
||||
transition: opacity 0.65s ease 0.26s, transform 0.65s ease 0.26s;
|
||||
}
|
||||
|
||||
/* ── IN-VIEW TRIGGERS ── */
|
||||
.dm-compare-section.dm-in-view .dm-eyebrow { opacity: 1; transform: translateY(0); }
|
||||
.dm-compare-section.dm-in-view .dm-section-title { opacity: 1; transform: translateY(0); }
|
||||
.dm-compare-section.dm-in-view .dm-section-title em::after { transform: scaleX(1); }
|
||||
.dm-compare-section.dm-in-view .dm-section-sub { opacity: 1; transform: translateY(0); }
|
||||
|
||||
/* ── TABLE WRAPPER ── */
|
||||
.dm-compare-section .dm-compare-wrap {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
border-radius: 22px;
|
||||
overflow: hidden;
|
||||
box-shadow: 0 8px 50px rgba(0,0,0,0.09);
|
||||
background: var(--dm-white);
|
||||
opacity: 0;
|
||||
transform: translateY(40px);
|
||||
transition: opacity 0.75s cubic-bezier(.16,1,.3,1) 0.35s,
|
||||
transform 0.75s cubic-bezier(.16,1,.3,1) 0.35s;
|
||||
}
|
||||
.dm-compare-section.dm-in-view .dm-compare-wrap { opacity: 1; transform: translateY(0); }
|
||||
|
||||
/* ── COLUMN HEADERS ── */
|
||||
.dm-compare-section .dm-col-headers {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
position: relative;
|
||||
}
|
||||
.dm-compare-section .dm-col-headers::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0; bottom: 0; left: 50%;
|
||||
width: 1px;
|
||||
background: var(--dm-border);
|
||||
}
|
||||
|
||||
.dm-compare-section .dm-col-head {
|
||||
padding: 26px 40px;
|
||||
font-family: 'Manrope', sans-serif;
|
||||
font-size: 13px;
|
||||
font-weight: 700;
|
||||
letter-spacing: 2.5px;
|
||||
text-transform: uppercase;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
}
|
||||
.dm-compare-section .dm-col-head.dm-traditional {
|
||||
background: #f7f8fa;
|
||||
color: var(--dm-muted);
|
||||
border-bottom: 1px solid var(--dm-border);
|
||||
}
|
||||
.dm-compare-section .dm-col-head.dm-doormile {
|
||||
background: var(--dm-red-light);
|
||||
color: var(--dm-red);
|
||||
border-bottom: 1px solid var(--dm-red-border);
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
.dm-compare-section .dm-col-head.dm-doormile::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0; left: -100%;
|
||||
width: 60%; height: 100%;
|
||||
background: linear-gradient(90deg, transparent, rgba(255,255,255,0.5), transparent);
|
||||
animation: dm-shimmer 3s ease-in-out infinite 1.2s;
|
||||
}
|
||||
@keyframes dm-shimmer {
|
||||
0% { left: -100%; }
|
||||
50% { left: 140%; }
|
||||
100% { left: 140%; }
|
||||
}
|
||||
|
||||
.dm-compare-section .dm-col-head-icon {
|
||||
width: 28px; height: 28px;
|
||||
border-radius: 8px;
|
||||
display: flex; align-items: center; justify-content: center;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.dm-compare-section .dm-col-head.dm-traditional .dm-col-head-icon { background: #ececee; }
|
||||
.dm-compare-section .dm-col-head.dm-doormile .dm-col-head-icon { background: rgba(192,18,39,0.15); }
|
||||
|
||||
.dm-compare-section .dm-col-head-icon svg {
|
||||
width: 14px; height: 14px;
|
||||
stroke-width: 2.5;
|
||||
stroke-linecap: round; stroke-linejoin: round;
|
||||
fill: none;
|
||||
}
|
||||
.dm-compare-section .dm-col-head.dm-traditional .dm-col-head-icon svg { stroke: var(--dm-muted); }
|
||||
.dm-compare-section .dm-col-head.dm-doormile .dm-col-head-icon svg { stroke: var(--dm-red); }
|
||||
|
||||
/* ── ROWS ── */
|
||||
.dm-compare-section .dm-compare-row {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
border-top: 1px solid var(--dm-border);
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
opacity: 0;
|
||||
transform: translateX(-16px);
|
||||
transition: opacity 0.5s ease, transform 0.5s cubic-bezier(.16,1,.3,1);
|
||||
}
|
||||
.dm-compare-section.dm-in-view .dm-compare-row:nth-child(1) { opacity: 1; transform: translateX(0); transition-delay: 0.55s; }
|
||||
.dm-compare-section.dm-in-view .dm-compare-row:nth-child(2) { opacity: 1; transform: translateX(0); transition-delay: 0.68s; }
|
||||
.dm-compare-section.dm-in-view .dm-compare-row:nth-child(3) { opacity: 1; transform: translateX(0); transition-delay: 0.81s; }
|
||||
.dm-compare-section.dm-in-view .dm-compare-row:nth-child(4) { opacity: 1; transform: translateX(0); transition-delay: 0.94s; }
|
||||
|
||||
.dm-compare-section .dm-compare-row::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background: var(--dm-red-hover);
|
||||
opacity: 0;
|
||||
transition: opacity 0.25s;
|
||||
pointer-events: none;
|
||||
}
|
||||
.dm-compare-section .dm-compare-row:hover::before { opacity: 1; }
|
||||
|
||||
/* ── CELLS ── */
|
||||
.dm-compare-section .dm-cell {
|
||||
padding: 28px 40px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 16px;
|
||||
font-size: 15px;
|
||||
line-height: 1.5;
|
||||
position: relative;
|
||||
}
|
||||
.dm-compare-section .dm-cell.dm-right {
|
||||
border-left: 1px solid var(--dm-border);
|
||||
background: rgba(253,248,248,0.4);
|
||||
}
|
||||
|
||||
/* ── ICONS ── */
|
||||
.dm-compare-section .dm-cell-icon {
|
||||
flex-shrink: 0;
|
||||
width: 32px; height: 32px;
|
||||
border-radius: 50%;
|
||||
display: flex; align-items: center; justify-content: center;
|
||||
transition: transform 0.35s cubic-bezier(.16,1,.3,1);
|
||||
}
|
||||
.dm-compare-section .dm-compare-row:hover .dm-cell-icon { transform: scale(1.18) rotate(-5deg); }
|
||||
.dm-compare-section .dm-cell-icon.dm-bad { background: var(--dm-red-light); }
|
||||
.dm-compare-section .dm-cell-icon.dm-good { background: var(--dm-green-light); }
|
||||
.dm-compare-section .dm-cell-icon svg {
|
||||
width: 15px; height: 15px;
|
||||
stroke-width: 2.5;
|
||||
stroke-linecap: round; stroke-linejoin: round;
|
||||
fill: none;
|
||||
}
|
||||
.dm-compare-section .dm-cell-icon.dm-bad svg { stroke: var(--dm-red); }
|
||||
.dm-compare-section .dm-cell-icon.dm-good svg { stroke: var(--dm-green); }
|
||||
|
||||
.dm-compare-section .dm-cell-text {
|
||||
font-weight: 500;
|
||||
color: var(--dm-dark);
|
||||
transition: color 0.2s;
|
||||
margin: 0;
|
||||
}
|
||||
.dm-compare-section .dm-cell.dm-left .dm-cell-text { color: var(--dm-muted); }
|
||||
.dm-compare-section .dm-compare-row:hover .dm-cell.dm-right .dm-cell-text { color: var(--dm-dark); }
|
||||
|
||||
/* ── FOOTER BAR ── */
|
||||
.dm-compare-section .dm-compare-footer {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
border-top: 1px solid var(--dm-border);
|
||||
}
|
||||
.dm-compare-section .dm-footer-cell {
|
||||
padding: 22px 40px;
|
||||
font-size: 12px;
|
||||
font-family: 'Manrope', sans-serif;
|
||||
font-weight: 700;
|
||||
letter-spacing: 1.5px;
|
||||
text-transform: uppercase;
|
||||
color: var(--dm-muted);
|
||||
background: #f9fafb;
|
||||
}
|
||||
.dm-compare-section .dm-footer-cell.dm-right {
|
||||
background: var(--dm-red-light);
|
||||
color: var(--dm-red);
|
||||
border-left: 1px solid var(--dm-red-border);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
.dm-compare-section .dm-footer-cell .dm-dot {
|
||||
width: 7px; height: 7px;
|
||||
border-radius: 50%;
|
||||
background: var(--dm-red);
|
||||
flex-shrink: 0;
|
||||
animation: dm-pulse 1.8s ease-in-out infinite;
|
||||
}
|
||||
@keyframes dm-pulse {
|
||||
0%, 100% { opacity: 1; transform: scale(1); }
|
||||
50% { opacity: 0.35; transform: scale(0.55); }
|
||||
}
|
||||
|
||||
|
||||
/* ─── LARGE DESKTOP (1440px+) ─── */
|
||||
@media (min-width: 1440px) {
|
||||
|
||||
.dm-compare-section {
|
||||
max-width: 1260px;
|
||||
padding: 60px 52px 0px;
|
||||
}
|
||||
|
||||
.dm-compare-section::before {
|
||||
background-size: 80px 80px;
|
||||
}
|
||||
|
||||
.dm-compare-section .dm-section-header {
|
||||
margin-bottom: 64px;
|
||||
}
|
||||
|
||||
.dm-compare-section .dm-eyebrow {
|
||||
font-size: 12px;
|
||||
letter-spacing: 3.8px;
|
||||
gap: 12px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.dm-compare-section .dm-eyebrow::before,
|
||||
.dm-compare-section .dm-eyebrow::after {
|
||||
width: 32px;
|
||||
}
|
||||
|
||||
.dm-compare-section .dm-section-title {
|
||||
font-size: clamp(40px, 5vw, 68px);
|
||||
letter-spacing: -1.1px;
|
||||
}
|
||||
|
||||
.dm-compare-section .dm-section-sub {
|
||||
font-size: 16px;
|
||||
margin-top: 20px;
|
||||
line-height: 1.72;
|
||||
}
|
||||
|
||||
.dm-compare-section .dm-compare-wrap {
|
||||
border-radius: 24px;
|
||||
}
|
||||
|
||||
.dm-compare-section .dm-col-head {
|
||||
padding: 30px 44px;
|
||||
font-size: 13.5px;
|
||||
letter-spacing: 2.8px;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.dm-compare-section .dm-col-head-icon {
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
border-radius: 9px;
|
||||
}
|
||||
|
||||
.dm-compare-section .dm-col-head-icon svg {
|
||||
width: 15px;
|
||||
height: 15px;
|
||||
}
|
||||
|
||||
.dm-compare-section .dm-cell {
|
||||
padding: 30px 44px;
|
||||
gap: 18px;
|
||||
font-size: 15.5px;
|
||||
}
|
||||
|
||||
.dm-compare-section .dm-cell-icon {
|
||||
width: 34px;
|
||||
height: 34px;
|
||||
}
|
||||
|
||||
.dm-compare-section .dm-cell-icon svg {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
}
|
||||
|
||||
.dm-compare-section .dm-footer-cell {
|
||||
padding: 24px 44px;
|
||||
font-size: 12.5px;
|
||||
letter-spacing: 1.8px;
|
||||
}
|
||||
}
|
||||
|
||||
/* ─── EXTRA-LARGE DESKTOP (1920px+) ─── */
|
||||
@media (min-width: 1920px) {
|
||||
|
||||
.dm-compare-section {
|
||||
max-width: 1480px;
|
||||
padding: 72px 64px 0px;
|
||||
}
|
||||
|
||||
.dm-compare-section::before {
|
||||
background-size: 90px 90px;
|
||||
}
|
||||
|
||||
.dm-compare-section .dm-section-header {
|
||||
margin-bottom: 72px;
|
||||
}
|
||||
|
||||
.dm-compare-section .dm-eyebrow {
|
||||
font-size: 13px;
|
||||
letter-spacing: 4px;
|
||||
gap: 13px;
|
||||
margin-bottom: 22px;
|
||||
}
|
||||
|
||||
.dm-compare-section .dm-eyebrow::before,
|
||||
.dm-compare-section .dm-eyebrow::after {
|
||||
width: 36px;
|
||||
}
|
||||
|
||||
.dm-compare-section .dm-section-title {
|
||||
font-size: clamp(46px, 5vw, 76px);
|
||||
letter-spacing: -1.3px;
|
||||
}
|
||||
|
||||
.dm-compare-section .dm-section-sub {
|
||||
font-size: 17px;
|
||||
margin-top: 22px;
|
||||
line-height: 1.75;
|
||||
}
|
||||
|
||||
.dm-compare-section .dm-compare-wrap {
|
||||
border-radius: 26px;
|
||||
box-shadow: 0 10px 60px rgba(0,0,0,0.1);
|
||||
}
|
||||
|
||||
.dm-compare-section .dm-col-head {
|
||||
padding: 32px 52px;
|
||||
font-size: 14px;
|
||||
letter-spacing: 3px;
|
||||
gap: 13px;
|
||||
}
|
||||
|
||||
.dm-compare-section .dm-col-head-icon {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
.dm-compare-section .dm-col-head-icon svg {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
}
|
||||
|
||||
.dm-compare-section .dm-cell {
|
||||
padding: 34px 52px;
|
||||
gap: 20px;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.dm-compare-section .dm-cell-icon {
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
}
|
||||
|
||||
.dm-compare-section .dm-cell-icon svg {
|
||||
width: 17px;
|
||||
height: 17px;
|
||||
}
|
||||
|
||||
.dm-compare-section .dm-footer-cell {
|
||||
padding: 26px 52px;
|
||||
font-size: 13px;
|
||||
letter-spacing: 2px;
|
||||
}
|
||||
}
|
||||
|
||||
/* ─── ULTRA-WIDE (2560px+) ─── */
|
||||
@media (min-width: 2560px) {
|
||||
|
||||
.dm-compare-section {
|
||||
max-width: 1760px;
|
||||
padding: 80px 72px 0px;
|
||||
}
|
||||
|
||||
.dm-compare-section::before {
|
||||
background-size: 100px 100px;
|
||||
}
|
||||
|
||||
.dm-compare-section .dm-section-header {
|
||||
margin-bottom: 84px;
|
||||
}
|
||||
|
||||
.dm-compare-section .dm-eyebrow {
|
||||
font-size: 14px;
|
||||
letter-spacing: 4.5px;
|
||||
gap: 14px;
|
||||
margin-bottom: 26px;
|
||||
}
|
||||
|
||||
.dm-compare-section .dm-eyebrow::before,
|
||||
.dm-compare-section .dm-eyebrow::after {
|
||||
width: 42px;
|
||||
}
|
||||
|
||||
.dm-compare-section .dm-section-title {
|
||||
font-size: clamp(52px, 5vw, 84px);
|
||||
letter-spacing: -1.5px;
|
||||
}
|
||||
|
||||
.dm-compare-section .dm-section-sub {
|
||||
font-size: 18.5px;
|
||||
margin-top: 26px;
|
||||
line-height: 1.8;
|
||||
}
|
||||
|
||||
.dm-compare-section .dm-compare-wrap {
|
||||
border-radius: 28px;
|
||||
box-shadow: 0 12px 70px rgba(0,0,0,0.1);
|
||||
}
|
||||
|
||||
.dm-compare-section .dm-col-head {
|
||||
padding: 36px 60px;
|
||||
font-size: 15px;
|
||||
letter-spacing: 3.5px;
|
||||
gap: 14px;
|
||||
}
|
||||
|
||||
.dm-compare-section .dm-col-head-icon {
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
border-radius: 11px;
|
||||
}
|
||||
|
||||
.dm-compare-section .dm-col-head-icon svg {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
}
|
||||
|
||||
.dm-compare-section .dm-cell {
|
||||
padding: 38px 60px;
|
||||
gap: 22px;
|
||||
font-size: 17px;
|
||||
line-height: 1.55;
|
||||
}
|
||||
|
||||
.dm-compare-section .dm-cell-icon {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
}
|
||||
|
||||
.dm-compare-section .dm-cell-icon svg {
|
||||
width: 19px;
|
||||
height: 19px;
|
||||
}
|
||||
|
||||
.dm-compare-section .dm-footer-cell {
|
||||
padding: 28px 60px;
|
||||
font-size: 14px;
|
||||
letter-spacing: 2.2px;
|
||||
}
|
||||
|
||||
.dm-compare-section .dm-footer-cell .dm-dot {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
/* ── RESPONSIVE (MOBILE) ── */
|
||||
@media (max-width: 680px) {
|
||||
.dm-compare-section { padding: 60px 16px 70px; }
|
||||
.dm-compare-section .dm-col-head,
|
||||
.dm-compare-section .dm-cell { padding: 20px 20px; }
|
||||
.dm-compare-section .dm-footer-cell { padding: 18px 20px; }
|
||||
.dm-compare-section .dm-col-head { font-size: 11px; letter-spacing: 1.5px; }
|
||||
}
|
||||
</style>
|
||||
|
||||
<!-- ── SECTION HTML ── -->
|
||||
<section class="dm-compare-section" id="dm-compare">
|
||||
|
||||
<div class="dm-section-header">
|
||||
<div class="dm-eyebrow">Why It Matters</div>
|
||||
<h2 class="dm-section-title">Traditional Approach<br><em>The Doormile Way</em></h2>
|
||||
<p class="dm-section-sub">See how the Doormile way eliminates the friction that traditional logistics creates at every step.</p>
|
||||
</div>
|
||||
|
||||
<div class="dm-compare-wrap">
|
||||
|
||||
<div class="dm-col-headers">
|
||||
<div class="dm-col-head dm-traditional">
|
||||
<div class="dm-col-head-icon">
|
||||
<svg viewBox="0 0 24 24"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>
|
||||
</div>
|
||||
Traditional Approach
|
||||
</div>
|
||||
<div class="dm-col-head dm-doormile">
|
||||
<div class="dm-col-head-icon">
|
||||
<svg viewBox="0 0 24 24"><polyline points="20 6 9 17 4 12"/></svg>
|
||||
</div>
|
||||
The Doormile Way
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="dm-rows-wrap">
|
||||
<div class="dm-compare-row">
|
||||
<div class="dm-cell dm-left">
|
||||
<div class="dm-cell-icon dm-bad"><svg viewBox="0 0 24 24"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg></div>
|
||||
<span class="dm-cell-text">3+ vendors to manage</span>
|
||||
</div>
|
||||
<div class="dm-cell dm-right">
|
||||
<div class="dm-cell-icon dm-good"><svg viewBox="0 0 24 24"><polyline points="20 6 9 17 4 12"/></svg></div>
|
||||
<span class="dm-cell-text">Single integrated partner</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="dm-compare-row">
|
||||
<div class="dm-cell dm-left">
|
||||
<div class="dm-cell-icon dm-bad"><svg viewBox="0 0 24 24"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg></div>
|
||||
<span class="dm-cell-text">Fragmented tracking</span>
|
||||
</div>
|
||||
<div class="dm-cell dm-right">
|
||||
<div class="dm-cell-icon dm-good"><svg viewBox="0 0 24 24"><polyline points="20 6 9 17 4 12"/></svg></div>
|
||||
<span class="dm-cell-text">Unified timeline view</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="dm-compare-row">
|
||||
<div class="dm-cell dm-left">
|
||||
<div class="dm-cell-icon dm-bad"><svg viewBox="0 0 24 24"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg></div>
|
||||
<span class="dm-cell-text">Blame games on delays</span>
|
||||
</div>
|
||||
<div class="dm-cell dm-right">
|
||||
<div class="dm-cell-icon dm-good"><svg viewBox="0 0 24 24"><polyline points="20 6 9 17 4 12"/></svg></div>
|
||||
<span class="dm-cell-text">Clear accountability</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="dm-compare-row">
|
||||
<div class="dm-cell dm-left">
|
||||
<div class="dm-cell-icon dm-bad"><svg viewBox="0 0 24 24"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg></div>
|
||||
<span class="dm-cell-text">Reactive problem solving</span>
|
||||
</div>
|
||||
<div class="dm-cell dm-right">
|
||||
<div class="dm-cell-icon dm-good"><svg viewBox="0 0 24 24"><polyline points="20 6 9 17 4 12"/></svg></div>
|
||||
<span class="dm-cell-text">AI-powered predictions</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="dm-compare-footer">
|
||||
<div class="dm-footer-cell">Outdated · Fragmented · Reactive</div>
|
||||
<div class="dm-footer-cell dm-right">
|
||||
<span class="dm-dot"></span>
|
||||
Unified · Intelligent · Proactive
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<script>
|
||||
(function () {
|
||||
var section = document.getElementById('dm-compare');
|
||||
if (!section) return;
|
||||
function activate() { section.classList.add('dm-in-view'); }
|
||||
if ('IntersectionObserver' in window) {
|
||||
var io = new IntersectionObserver(function (entries) {
|
||||
entries.forEach(function (e) {
|
||||
if (e.isIntersecting) { activate(); io.unobserve(e.target); }
|
||||
});
|
||||
}, { threshold: 0.15 });
|
||||
io.observe(section);
|
||||
} else {
|
||||
setTimeout(activate, 300);
|
||||
}
|
||||
})();
|
||||
</script>
|
||||
969
web/connected-log.php
Normal file
969
web/connected-log.php
Normal file
@@ -0,0 +1,969 @@
|
||||
<link href="https://fonts.googleapis.com/css2?family=Barlow:wght@400;500;600&family=Barlow+Condensed:wght@700;800;900&display=swap" rel="stylesheet">
|
||||
|
||||
<style>
|
||||
/* ══════════════════════════════════════════════
|
||||
ALL STYLES SCOPED TO .cs-section
|
||||
══════════════════════════════════════════════ */
|
||||
.cs-section *,
|
||||
.cs-section *::before,
|
||||
.cs-section *::after { box-sizing: border-box; }
|
||||
|
||||
.cs-section {
|
||||
--cs-red: #c01227;
|
||||
--cs-red-light: #fdf0f2;
|
||||
--cs-red-mid: rgba(192,18,39,0.12);
|
||||
--cs-green: #15a056;
|
||||
--cs-blue: #1e6ef5;
|
||||
--cs-dark: #111827;
|
||||
--cs-mid: #374151;
|
||||
--cs-muted: #9ca3af;
|
||||
--cs-border: rgba(0,0,0,0.07);
|
||||
--cs-white: #ffffff;
|
||||
|
||||
width: 100%;
|
||||
max-width: 1440px;
|
||||
margin: 0 auto;
|
||||
padding: 96px 40px 108px;
|
||||
position: relative;
|
||||
font-family: 'Barlow', sans-serif;
|
||||
color: var(--cs-dark);
|
||||
}
|
||||
|
||||
/* subtle grid bg */
|
||||
.cs-section::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background-image:
|
||||
linear-gradient(to right, rgba(0,0,0,0.03) 1px, transparent 1px),
|
||||
linear-gradient(to bottom, rgba(0,0,0,0.03) 1px, transparent 1px);
|
||||
background-size: 72px 72px;
|
||||
pointer-events: none;
|
||||
mask-image: radial-gradient(ellipse 90% 80% at 50% 50%, black 30%, transparent 100%);
|
||||
-webkit-mask-image: radial-gradient(ellipse 90% 80% at 50% 50%, black 30%, transparent 100%);
|
||||
z-index: 0;
|
||||
}
|
||||
|
||||
/* ── HEADER ── */
|
||||
.cs-header {
|
||||
text-align: center;
|
||||
margin-bottom: 64px;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.cs-eyebrow {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
font-family: 'Manrope', sans-serif;
|
||||
font-size: 11px;
|
||||
font-weight: 700;
|
||||
letter-spacing: 3.5px;
|
||||
text-transform: uppercase;
|
||||
color: var(--cs-red);
|
||||
margin-bottom: 20px;
|
||||
opacity: 0;
|
||||
transform: translateY(16px);
|
||||
transition: opacity .55s ease, transform .55s ease;
|
||||
}
|
||||
.cs-eyebrow::before, .cs-eyebrow::after {
|
||||
content: '';
|
||||
display: block;
|
||||
width: 28px; height: 1px;
|
||||
background: var(--cs-red);
|
||||
}
|
||||
|
||||
.cs-title {
|
||||
font-family: 'Manrope', sans-serif;
|
||||
font-size: clamp(38px, 5.5vw, 68px);
|
||||
font-weight: 900;
|
||||
line-height: 1.02;
|
||||
letter-spacing: -1.5px;
|
||||
color: var(--cs-dark);
|
||||
margin: 0 0 20px;
|
||||
opacity: 0;
|
||||
transform: translateY(28px);
|
||||
transition: opacity .65s ease .12s, transform .65s ease .12s;
|
||||
}
|
||||
.cs-title em {
|
||||
font-style: normal;
|
||||
color: var(--cs-red);
|
||||
position: relative;
|
||||
}
|
||||
.cs-title em::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
bottom: 2px; left: 0; right: 0;
|
||||
height: 3px;
|
||||
background: var(--cs-red);
|
||||
border-radius: 2px;
|
||||
transform: scaleX(0);
|
||||
transform-origin: left;
|
||||
transition: transform .85s cubic-bezier(.16,1,.3,1) .9s;
|
||||
}
|
||||
|
||||
.cs-subtitle {
|
||||
font-size: 16px;
|
||||
color: var(--cs-muted);
|
||||
line-height: 1.75;
|
||||
max-width: 520px;
|
||||
margin: 0 auto;
|
||||
opacity: 0;
|
||||
transform: translateY(16px);
|
||||
transition: opacity .65s ease .26s, transform .65s ease .26s;
|
||||
}
|
||||
|
||||
/* ── IN-VIEW TRIGGERS ── */
|
||||
.cs-section.cs-live .cs-eyebrow { opacity: 1; transform: translateY(0); }
|
||||
.cs-section.cs-live .cs-title { opacity: 1; transform: translateY(0); }
|
||||
.cs-section.cs-live .cs-title em::after { transform: scaleX(1); }
|
||||
.cs-section.cs-live .cs-subtitle { opacity: 1; transform: translateY(0); }
|
||||
|
||||
/* ── MAIN CARD SHELL ── */
|
||||
.cs-card-shell {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
background: var(--cs-white);
|
||||
border-radius: 28px;
|
||||
overflow: hidden;
|
||||
box-shadow: 0 8px 60px rgba(0,0,0,0.1);
|
||||
opacity: 0;
|
||||
transform: translateY(44px);
|
||||
transition: opacity .8s cubic-bezier(.16,1,.3,1) .3s,
|
||||
transform .8s cubic-bezier(.16,1,.3,1) .3s;
|
||||
}
|
||||
.cs-section.cs-live .cs-card-shell { opacity: 1; transform: translateY(0); }
|
||||
|
||||
/* ── MILESTONE CARDS ROW ── */
|
||||
.cs-milestones {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
}
|
||||
|
||||
.cs-mile {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
cursor: default;
|
||||
opacity: 0;
|
||||
transform: translateY(20px);
|
||||
transition:
|
||||
opacity .55s ease,
|
||||
transform .55s cubic-bezier(.16,1,.3,1),
|
||||
background .3s;
|
||||
}
|
||||
.cs-mile:not(:last-child) { border-right: 1px solid var(--cs-border); }
|
||||
|
||||
.cs-section.cs-live .cs-mile:nth-child(1) { opacity:1; transform:translateY(0); transition-delay:.5s; }
|
||||
.cs-section.cs-live .cs-mile:nth-child(2) { opacity:1; transform:translateY(0); transition-delay:.64s; }
|
||||
.cs-section.cs-live .cs-mile:nth-child(3) { opacity:1; transform:translateY(0); transition-delay:.78s; }
|
||||
|
||||
/* image layer (revealed on hover) */
|
||||
.cs-mile-img {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
opacity: 0;
|
||||
transform: scale(1.06);
|
||||
transition: opacity .5s ease, transform .6s ease;
|
||||
z-index: 0;
|
||||
}
|
||||
.cs-mile-img::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background: linear-gradient(160deg, rgba(253, 253, 253, 0.85) 0%, rgba(17,24,39,0.9) 100%);
|
||||
}
|
||||
.cs-mile:hover .cs-mile-img { opacity: 1; transform: scale(1); }
|
||||
|
||||
/* content */
|
||||
.cs-mile-content {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
padding: 36px 32px 34px;
|
||||
}
|
||||
|
||||
/* icon */
|
||||
.cs-mile-icon {
|
||||
width: 56px; height: 56px;
|
||||
border-radius: 16px;
|
||||
display: flex; align-items: center; justify-content: center;
|
||||
margin-bottom: 22px;
|
||||
transition: transform .35s cubic-bezier(.16,1,.3,1), box-shadow .35s;
|
||||
}
|
||||
.cs-mile:hover .cs-mile-icon {
|
||||
transform: scale(1.1) rotate(-6deg);
|
||||
box-shadow: 0 10px 30px rgba(0,0,0,0.28);
|
||||
}
|
||||
.cs-mile-icon svg {
|
||||
width: 24px; height: 24px;
|
||||
stroke: #fff; fill: none;
|
||||
stroke-width: 1.9;
|
||||
stroke-linecap: round; stroke-linejoin: round;
|
||||
}
|
||||
|
||||
/* tag */
|
||||
.cs-mile-tag {
|
||||
font-family: 'Manrope', sans-serif;
|
||||
font-size: 10px;
|
||||
font-weight: 700;
|
||||
letter-spacing: 3px;
|
||||
text-transform: uppercase;
|
||||
margin-bottom: 10px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
transition: color .3s;
|
||||
}
|
||||
.cs-mile-tag::before {
|
||||
content: '';
|
||||
display: inline-block;
|
||||
width: 20px; height: 1.5px;
|
||||
border-radius: 2px;
|
||||
background: currentColor;
|
||||
transition: width .4s cubic-bezier(.16,1,.3,1);
|
||||
}
|
||||
.cs-mile:hover .cs-mile-tag::before { width: 34px; }
|
||||
|
||||
.cs-mile-name {
|
||||
font-family: 'Manrope', sans-serif;
|
||||
font-size: 24px;
|
||||
font-weight: 800;
|
||||
line-height: 1.15;
|
||||
letter-spacing: -.4px;
|
||||
margin: 0 0 10px;
|
||||
transition: color .3s;
|
||||
}
|
||||
.cs-mile-desc {
|
||||
font-size: 13.5px;
|
||||
line-height: 1.65;
|
||||
color: var(--cs-muted);
|
||||
margin: 0;
|
||||
transition: color .3s;
|
||||
}
|
||||
|
||||
/* hover → text goes white */
|
||||
.cs-mile:hover .cs-mile-tag,
|
||||
.cs-mile:hover .cs-mile-name { color: rgba(255,255,255,.95); }
|
||||
.cs-mile:hover .cs-mile-desc { color: rgba(255,255,255,.72); }
|
||||
|
||||
/* active (first) mile */
|
||||
.cs-mile.cs-active { background: var(--cs-red-light); }
|
||||
|
||||
/* pulsing badge */
|
||||
.cs-active-badge {
|
||||
position: absolute;
|
||||
top: 20px; right: 20px;
|
||||
width: 28px; height: 28px;
|
||||
border-radius: 50%;
|
||||
background: var(--cs-red);
|
||||
display: flex; align-items: center; justify-content: center;
|
||||
animation: cs-ring 2.4s ease-out infinite;
|
||||
z-index: 2;
|
||||
}
|
||||
.cs-active-badge svg {
|
||||
width: 13px; height: 13px;
|
||||
stroke: #fff; fill: none;
|
||||
stroke-width: 2.5;
|
||||
stroke-linecap: round; stroke-linejoin: round;
|
||||
}
|
||||
@keyframes cs-ring {
|
||||
0% { box-shadow: 0 0 0 0 rgba(192,18,39,.45); }
|
||||
65% { box-shadow: 0 0 0 11px rgba(192,18,39,.0); }
|
||||
100% { box-shadow: 0 0 0 0 rgba(192,18,39,.0); }
|
||||
}
|
||||
|
||||
/* arrow connector between cards */
|
||||
.cs-arrow {
|
||||
position: absolute;
|
||||
top: 50%; right: 0px;
|
||||
transform: translateY(-50%);
|
||||
z-index: 10;
|
||||
width: 26px; height: 26px;
|
||||
background: var(--cs-white);
|
||||
border-radius: 50%;
|
||||
border: 1px solid var(--cs-border);
|
||||
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
|
||||
display: flex; align-items: center; justify-content: center;
|
||||
}
|
||||
.cs-arrow svg {
|
||||
width: 10px; height: 10px;
|
||||
stroke: var(--cs-red); fill: none;
|
||||
stroke-width: 2.5;
|
||||
stroke-linecap: round; stroke-linejoin: round;
|
||||
}
|
||||
|
||||
/* ── TRACKER STRIP ── */
|
||||
.cs-tracker {
|
||||
border-top: 1px solid var(--cs-border);
|
||||
padding: 26px 36px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 28px;
|
||||
background: #fafbfc;
|
||||
opacity: 0;
|
||||
transform: translateY(14px);
|
||||
transition: opacity .6s ease 1s, transform .6s ease 1s;
|
||||
}
|
||||
.cs-section.cs-live .cs-tracker { opacity: 1; transform: translateY(0); }
|
||||
|
||||
.cs-track-icon {
|
||||
width: 48px; height: 48px;
|
||||
border-radius: 14px;
|
||||
background: var(--cs-red-light);
|
||||
display: flex; align-items: center; justify-content: center;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.cs-track-icon svg {
|
||||
width: 22px; height: 22px;
|
||||
stroke: var(--cs-red); fill: none;
|
||||
stroke-width: 1.8;
|
||||
stroke-linecap: round; stroke-linejoin: round;
|
||||
}
|
||||
|
||||
.cs-track-info { flex-shrink: 0; }
|
||||
.cs-track-id {
|
||||
font-size: 11px; color: var(--cs-muted);
|
||||
letter-spacing: .4px; margin-bottom: 3px;
|
||||
}
|
||||
.cs-track-name {
|
||||
font-family: 'Manrope', sans-serif;
|
||||
font-size: 17px; font-weight: 700;
|
||||
color: var(--cs-dark); letter-spacing: -.3px;
|
||||
}
|
||||
|
||||
.cs-track-progress { flex: 1; min-width: 0; }
|
||||
.cs-track-labels {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
font-size: 10px;
|
||||
font-family: 'Manrope', sans-serif;
|
||||
font-weight: 700;
|
||||
letter-spacing: 1.5px;
|
||||
text-transform: uppercase;
|
||||
color: var(--cs-muted);
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
.cs-bar-bg {
|
||||
width: 100%; height: 6px;
|
||||
background: #e9eaec;
|
||||
border-radius: 6px;
|
||||
overflow: visible;
|
||||
position: relative;
|
||||
}
|
||||
.cs-bar-fill {
|
||||
height: 100%;
|
||||
border-radius: 6px;
|
||||
background: linear-gradient(90deg, var(--cs-blue) 0%, var(--cs-red) 55%, var(--cs-green) 100%);
|
||||
width: 0%;
|
||||
transition: width 1.7s cubic-bezier(.16,1,.3,1) 1.15s;
|
||||
position: relative;
|
||||
overflow: visible;
|
||||
}
|
||||
.cs-section.cs-live .cs-bar-fill { width: 68%; }
|
||||
|
||||
.cs-bar-dot {
|
||||
position: absolute;
|
||||
top: 50%; right: -5px;
|
||||
transform: translateY(-50%);
|
||||
width: 10px; height: 10px;
|
||||
border-radius: 50%;
|
||||
background: var(--cs-red);
|
||||
animation: cs-dotpulse 1.5s ease-in-out infinite;
|
||||
}
|
||||
@keyframes cs-dotpulse {
|
||||
0%,100% { box-shadow: 0 0 0 3px rgba(192,18,39,.25); }
|
||||
50% { box-shadow: 0 0 0 7px rgba(192,18,39,.0); }
|
||||
}
|
||||
|
||||
.cs-track-status { flex-shrink: 0; text-align: right; }
|
||||
.cs-status-label {
|
||||
font-family: 'Manrope', sans-serif;
|
||||
font-size: 22px; font-weight: 800;
|
||||
color: var(--cs-green); display: block;
|
||||
letter-spacing: -.3px;
|
||||
}
|
||||
.cs-status-eta { font-size: 12px; color: var(--cs-muted); margin-top: 2px; }
|
||||
|
||||
|
||||
/* ─── LARGE DESKTOP (1440px+) ─── */
|
||||
@media (min-width: 1440px) {
|
||||
|
||||
.cs-section {
|
||||
max-width: 1560px;
|
||||
padding: 108px 52px 120px;
|
||||
}
|
||||
|
||||
.cs-section::before {
|
||||
background-size: 82px 82px;
|
||||
}
|
||||
|
||||
.cs-header {
|
||||
margin-bottom: 72px;
|
||||
}
|
||||
|
||||
.cs-eyebrow {
|
||||
font-size: 12px;
|
||||
letter-spacing: 3.8px;
|
||||
gap: 12px;
|
||||
margin-bottom: 22px;
|
||||
}
|
||||
|
||||
.cs-eyebrow::before, .cs-eyebrow::after {
|
||||
width: 32px;
|
||||
}
|
||||
|
||||
.cs-title {
|
||||
font-size: clamp(42px, 5.5vw, 74px);
|
||||
letter-spacing: -1.6px;
|
||||
margin: 0 0 22px;
|
||||
}
|
||||
|
||||
.cs-subtitle {
|
||||
font-size: 17px;
|
||||
max-width: 560px;
|
||||
line-height: 1.78;
|
||||
}
|
||||
|
||||
.cs-card-shell {
|
||||
border-radius: 30px;
|
||||
}
|
||||
|
||||
.cs-mile-content {
|
||||
padding: 40px 36px 38px;
|
||||
}
|
||||
|
||||
.cs-mile-icon {
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
border-radius: 18px;
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
.cs-mile-icon svg {
|
||||
width: 26px;
|
||||
height: 26px;
|
||||
}
|
||||
|
||||
.cs-mile-tag {
|
||||
font-size: 10.5px;
|
||||
letter-spacing: 3.2px;
|
||||
margin-bottom: 11px;
|
||||
}
|
||||
|
||||
.cs-mile-name {
|
||||
font-size: 26px;
|
||||
margin: 0 0 12px;
|
||||
}
|
||||
|
||||
.cs-mile-desc {
|
||||
font-size: 14px;
|
||||
line-height: 1.68;
|
||||
}
|
||||
|
||||
.cs-active-badge {
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
top: 22px;
|
||||
right: 22px;
|
||||
}
|
||||
|
||||
.cs-active-badge svg {
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
}
|
||||
|
||||
.cs-arrow {
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
}
|
||||
|
||||
.cs-arrow svg {
|
||||
width: 11px;
|
||||
height: 11px;
|
||||
}
|
||||
|
||||
.cs-tracker {
|
||||
padding: 28px 40px;
|
||||
gap: 30px;
|
||||
}
|
||||
|
||||
.cs-track-icon {
|
||||
width: 52px;
|
||||
height: 52px;
|
||||
border-radius: 15px;
|
||||
}
|
||||
|
||||
.cs-track-icon svg {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
}
|
||||
|
||||
.cs-track-id {
|
||||
font-size: 11.5px;
|
||||
}
|
||||
|
||||
.cs-track-name {
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.cs-track-labels {
|
||||
font-size: 10.5px;
|
||||
letter-spacing: 1.6px;
|
||||
}
|
||||
|
||||
.cs-bar-bg {
|
||||
height: 7px;
|
||||
border-radius: 7px;
|
||||
}
|
||||
|
||||
.cs-bar-fill {
|
||||
border-radius: 7px;
|
||||
}
|
||||
|
||||
.cs-status-label {
|
||||
font-size: 24px;
|
||||
}
|
||||
|
||||
.cs-status-eta {
|
||||
font-size: 12.5px;
|
||||
}
|
||||
}
|
||||
|
||||
/* ─── EXTRA-LARGE DESKTOP (1920px+) ─── */
|
||||
@media (min-width: 1920px) {
|
||||
|
||||
.cs-section {
|
||||
max-width: 1780px;
|
||||
padding: 120px 64px 136px;
|
||||
}
|
||||
|
||||
.cs-section::before {
|
||||
background-size: 92px 92px;
|
||||
}
|
||||
|
||||
.cs-header {
|
||||
margin-bottom: 80px;
|
||||
}
|
||||
|
||||
.cs-eyebrow {
|
||||
font-size: 13px;
|
||||
letter-spacing: 4px;
|
||||
gap: 13px;
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
.cs-eyebrow::before, .cs-eyebrow::after {
|
||||
width: 36px;
|
||||
}
|
||||
|
||||
.cs-title {
|
||||
font-size: clamp(48px, 5.2vw, 80px);
|
||||
letter-spacing: -1.8px;
|
||||
margin: 0 0 24px;
|
||||
}
|
||||
|
||||
.cs-subtitle {
|
||||
font-size: 18px;
|
||||
max-width: 600px;
|
||||
line-height: 1.8;
|
||||
}
|
||||
|
||||
.cs-card-shell {
|
||||
border-radius: 32px;
|
||||
box-shadow: 0 10px 70px rgba(0,0,0,0.11);
|
||||
}
|
||||
|
||||
.cs-mile-content {
|
||||
padding: 44px 40px 42px;
|
||||
}
|
||||
|
||||
.cs-mile-icon {
|
||||
width: 64px;
|
||||
height: 64px;
|
||||
border-radius: 18px;
|
||||
margin-bottom: 26px;
|
||||
}
|
||||
|
||||
.cs-mile-icon svg {
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
}
|
||||
|
||||
.cs-mile-tag {
|
||||
font-size: 11px;
|
||||
letter-spacing: 3.5px;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.cs-mile-name {
|
||||
font-size: 28px;
|
||||
margin: 0 0 13px;
|
||||
}
|
||||
|
||||
.cs-mile-desc {
|
||||
font-size: 14.5px;
|
||||
line-height: 1.7;
|
||||
}
|
||||
|
||||
.cs-active-badge {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
top: 24px;
|
||||
right: 24px;
|
||||
}
|
||||
|
||||
.cs-active-badge svg {
|
||||
width: 15px;
|
||||
height: 15px;
|
||||
}
|
||||
|
||||
.cs-arrow {
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
}
|
||||
|
||||
.cs-arrow svg {
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
}
|
||||
|
||||
.cs-tracker {
|
||||
padding: 32px 44px;
|
||||
gap: 32px;
|
||||
}
|
||||
|
||||
.cs-track-icon {
|
||||
width: 56px;
|
||||
height: 56px;
|
||||
border-radius: 16px;
|
||||
}
|
||||
|
||||
.cs-track-icon svg {
|
||||
width: 25px;
|
||||
height: 25px;
|
||||
}
|
||||
|
||||
.cs-track-id {
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.cs-track-name {
|
||||
font-size: 19px;
|
||||
}
|
||||
|
||||
.cs-track-labels {
|
||||
font-size: 11px;
|
||||
letter-spacing: 1.8px;
|
||||
margin-bottom: 9px;
|
||||
}
|
||||
|
||||
.cs-bar-bg {
|
||||
height: 7px;
|
||||
border-radius: 7px;
|
||||
}
|
||||
|
||||
.cs-status-label {
|
||||
font-size: 26px;
|
||||
}
|
||||
|
||||
.cs-status-eta {
|
||||
font-size: 13px;
|
||||
}
|
||||
}
|
||||
|
||||
/* ─── ULTRA-WIDE (2560px+) ─── */
|
||||
@media (min-width: 2560px) {
|
||||
|
||||
.cs-section {
|
||||
max-width: 2060px;
|
||||
padding: 136px 80px 156px;
|
||||
}
|
||||
|
||||
.cs-section::before {
|
||||
background-size: 104px 104px;
|
||||
}
|
||||
|
||||
.cs-header {
|
||||
margin-bottom: 92px;
|
||||
}
|
||||
|
||||
.cs-eyebrow {
|
||||
font-size: 14px;
|
||||
letter-spacing: 4.5px;
|
||||
gap: 14px;
|
||||
margin-bottom: 28px;
|
||||
}
|
||||
|
||||
.cs-eyebrow::before, .cs-eyebrow::after {
|
||||
width: 42px;
|
||||
}
|
||||
|
||||
.cs-title {
|
||||
font-size: clamp(54px, 5vw, 88px);
|
||||
letter-spacing: -2px;
|
||||
margin: 0 0 28px;
|
||||
}
|
||||
|
||||
.cs-subtitle {
|
||||
font-size: 19.5px;
|
||||
max-width: 660px;
|
||||
line-height: 1.82;
|
||||
}
|
||||
|
||||
.cs-card-shell {
|
||||
border-radius: 36px;
|
||||
box-shadow: 0 12px 80px rgba(0,0,0,0.11);
|
||||
}
|
||||
|
||||
.cs-mile-content {
|
||||
padding: 50px 46px 48px;
|
||||
}
|
||||
|
||||
.cs-mile-icon {
|
||||
width: 70px;
|
||||
height: 70px;
|
||||
border-radius: 20px;
|
||||
margin-bottom: 28px;
|
||||
}
|
||||
|
||||
.cs-mile-icon svg {
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
}
|
||||
|
||||
.cs-mile-tag {
|
||||
font-size: 12px;
|
||||
letter-spacing: 3.8px;
|
||||
margin-bottom: 13px;
|
||||
}
|
||||
|
||||
.cs-mile-name {
|
||||
font-size: 32px;
|
||||
letter-spacing: -.5px;
|
||||
margin: 0 0 14px;
|
||||
}
|
||||
|
||||
.cs-mile-desc {
|
||||
font-size: 15.5px;
|
||||
line-height: 1.72;
|
||||
}
|
||||
|
||||
.cs-active-badge {
|
||||
width: 34px;
|
||||
height: 34px;
|
||||
top: 26px;
|
||||
right: 26px;
|
||||
}
|
||||
|
||||
.cs-active-badge svg {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
}
|
||||
|
||||
.cs-arrow {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
}
|
||||
|
||||
.cs-arrow svg {
|
||||
width: 13px;
|
||||
height: 13px;
|
||||
}
|
||||
|
||||
.cs-tracker {
|
||||
padding: 36px 52px;
|
||||
gap: 36px;
|
||||
}
|
||||
|
||||
.cs-track-icon {
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
border-radius: 18px;
|
||||
}
|
||||
|
||||
.cs-track-icon svg {
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
}
|
||||
|
||||
.cs-track-id {
|
||||
font-size: 13px;
|
||||
letter-spacing: .5px;
|
||||
}
|
||||
|
||||
.cs-track-name {
|
||||
font-size: 21px;
|
||||
}
|
||||
|
||||
.cs-track-labels {
|
||||
font-size: 11.5px;
|
||||
letter-spacing: 2px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.cs-bar-bg {
|
||||
height: 8px;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.cs-bar-fill {
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.cs-bar-dot {
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
right: -6px;
|
||||
}
|
||||
|
||||
.cs-status-label {
|
||||
font-size: 28px;
|
||||
}
|
||||
|
||||
.cs-status-eta {
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
|
||||
/* ── RESPONSIVE (MOBILE) ── */
|
||||
@media (max-width: 860px) {
|
||||
.cs-section { padding: 60px 20px 70px; }
|
||||
.cs-milestones { grid-template-columns: 1fr; }
|
||||
.cs-mile:not(:last-child) { border-right: none; border-bottom: 1px solid var(--cs-border); }
|
||||
.cs-arrow { display: none; }
|
||||
.cs-tracker { flex-wrap: wrap; gap: 18px; }
|
||||
.cs-track-progress { order: 3; width: 100%; flex: none; }
|
||||
}
|
||||
</style>
|
||||
|
||||
<!-- ══ HTML ══ -->
|
||||
<section class="cs-section" id="cs-connected">
|
||||
|
||||
<header class="cs-header">
|
||||
<div class="cs-eyebrow">Connected System</div>
|
||||
<h2 class="cs-title">Every Mile <em>Protects</em> the Next</h2>
|
||||
<p class="cs-subtitle">Doormile doesn't hand off — it connects. Decisions in the first mile protect the last mile SLA. One delivery timeline. One connected system.</p>
|
||||
</header>
|
||||
|
||||
<div class="cs-card-shell">
|
||||
|
||||
<div class="cs-milestones">
|
||||
|
||||
<!-- FIRST MILE -->
|
||||
<div class="cs-mile cs-active">
|
||||
<div class="cs-mile-img" style="background-image:url('https://images.unsplash.com/photo-1586528116311-ad8dd3c8310d?w=900&q=85&fit=crop')"></div>
|
||||
<div class="cs-active-badge">
|
||||
<svg viewBox="0 0 24 24"><polyline points="20 6 9 17 4 12"/></svg>
|
||||
</div>
|
||||
<div class="cs-arrow">
|
||||
<svg viewBox="0 0 24 24"><polyline points="9 18 15 12 9 6"/></svg>
|
||||
</div>
|
||||
<div class="cs-mile-content">
|
||||
<div class="cs-mile-icon" style="background:linear-gradient(135deg,#2563eb,#1d4ed8);">
|
||||
<svg viewBox="0 0 24 24">
|
||||
<rect x="2" y="7" width="20" height="14" rx="2"/>
|
||||
<path d="M16 7V5a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v2"/>
|
||||
<line x1="12" y1="12" x2="12" y2="16"/>
|
||||
<line x1="10" y1="14" x2="14" y2="14"/>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="cs-mile-tag" style="color:var(--cs-red)">First Mile</div>
|
||||
<h3 class="cs-mile-name">Origin & Pickup</h3>
|
||||
<p class="cs-mile-desc">Intelligent pickup scheduling that anticipates downstream requirements and SLA windows.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- MID MILE -->
|
||||
<div class="cs-mile">
|
||||
<div class="cs-mile-img" style="background-image:url('https://images.unsplash.com/photo-1553413077-190dd305871c?w=900&q=85&fit=crop')"></div>
|
||||
<div class="cs-arrow">
|
||||
<svg viewBox="0 0 24 24"><polyline points="9 18 15 12 9 6"/></svg>
|
||||
</div>
|
||||
<div class="cs-mile-content">
|
||||
<div class="cs-mile-icon" style="background:linear-gradient(135deg,#c01227,#8b0e1c);">
|
||||
<svg viewBox="0 0 24 24">
|
||||
<rect x="1" y="3" width="15" height="13" rx="2"/>
|
||||
<path d="M16 8h4l3 5v3h-7V8z"/>
|
||||
<circle cx="5.5" cy="18.5" r="2.5"/>
|
||||
<circle cx="18.5" cy="18.5" r="2.5"/>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="cs-mile-tag" style="color:var(--cs-red)">Mid Mile</div>
|
||||
<h3 class="cs-mile-name">Transit & Hubs</h3>
|
||||
<p class="cs-mile-desc">Dynamic routing through sortation centers with real-time optimization and rerouting.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- LAST MILE -->
|
||||
<div class="cs-mile">
|
||||
<div class="cs-mile-img" style="background-image:url('https://images.unsplash.com/photo-1615460549969-36fa19521a4f?w=900&q=85&fit=crop')"></div>
|
||||
<div class="cs-mile-content">
|
||||
<div class="cs-mile-icon" style="background:linear-gradient(135deg,#15a056,#0d7a3e);">
|
||||
<svg viewBox="0 0 24 24">
|
||||
<path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/>
|
||||
<polyline points="9 22 9 12 15 12 15 22"/>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="cs-mile-tag" style="color:var(--cs-red)">Last Mile</div>
|
||||
<h3 class="cs-mile-name">Final Delivery</h3>
|
||||
<p class="cs-mile-desc">SLA-aware delivery windows protected by upstream intelligence and predictive ETA.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div><!-- /cs-milestones -->
|
||||
|
||||
<!-- Tracker Strip -->
|
||||
<div class="cs-tracker">
|
||||
|
||||
<div class="cs-track-icon">
|
||||
<svg viewBox="0 0 24 24">
|
||||
<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>
|
||||
</div>
|
||||
|
||||
<div class="cs-track-info">
|
||||
<div class="cs-track-id">Shipment #DME-2847</div>
|
||||
<div class="cs-track-name">Mumbai → Delhi Express</div>
|
||||
</div>
|
||||
|
||||
<div class="cs-track-progress">
|
||||
<div class="cs-track-labels">
|
||||
<span>First Mile</span>
|
||||
<span>Mid Mile</span>
|
||||
<span>Last Mile</span>
|
||||
</div>
|
||||
<div class="cs-bar-bg">
|
||||
<div class="cs-bar-fill">
|
||||
<span class="cs-bar-dot"></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="cs-track-status">
|
||||
<span class="cs-status-label">On Time</span>
|
||||
<div class="cs-status-eta">ETA: 4:30 PM</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div><!-- /cs-card-shell -->
|
||||
|
||||
</section>
|
||||
|
||||
<script>
|
||||
(function () {
|
||||
var el = document.getElementById('cs-connected');
|
||||
if (!el) return;
|
||||
function activate() { el.classList.add('cs-live'); }
|
||||
if ('IntersectionObserver' in window) {
|
||||
var io = new IntersectionObserver(function (entries) {
|
||||
entries.forEach(function (e) { if (e.isIntersecting) { activate(); io.unobserve(e.target); } });
|
||||
}, { threshold: 0.12 });
|
||||
io.observe(el);
|
||||
}
|
||||
setTimeout(activate, 380);
|
||||
})();
|
||||
</script>
|
||||
5
web/elementor-frontend-js-before.html
Normal file
5
web/elementor-frontend-js-before.html
Normal file
@@ -0,0 +1,5 @@
|
||||
/*
|
||||
<![CDATA[ */
|
||||
var elementorFrontendConfig = {"environmentMode":{"edit":false,"wpPreview":false,"isScriptDebug":false},"i18n":{"shareOnFacebook":"Share on Facebook","shareOnTwitter":"Share on Twitter","pinIt":"Pin it","download":"Download","downloadImage":"Download image","fullscreen":"Fullscreen","zoom":"Zoom","share":"Share","playVideo":"Play Video","previous":"Previous","next":"Next","close":"Close","a11yCarouselPrevSlideMessage":"Previous slide","a11yCarouselNextSlideMessage":"Next slide","a11yCarouselFirstSlideMessage":"This is the first slide","a11yCarouselLastSlideMessage":"This is the last slide","a11yCarouselPaginationBulletMessage":"Go to slide"},"is_rtl":false,"breakpoints":{"xs":0,"sm":480,"md":481,"lg":841,"xl":1440,"xxl":1600},"responsive":{"breakpoints":{"mobile":{"label":"Mobile Portrait","value":480,"default_value":767,"direction":"max","is_enabled":true},"mobile_extra":{"label":"Mobile Landscape","value":660,"default_value":880,"direction":"max","is_enabled":true},"tablet":{"label":"Tablet Portrait","value":840,"default_value":1024,"direction":"max","is_enabled":true},"tablet_extra":{"label":"Tablet Landscape","value":1020,"default_value":1200,"direction":"max","is_enabled":true},"laptop":{"label":"Laptop","value":1200,"default_value":1366,"direction":"max","is_enabled":true},"widescreen":{"label":"Widescreen","value":2400,"default_value":2400,"direction":"min","is_enabled":false}},"hasCustomBreakpoints":true},"version":"3.32.4","is_static":false,"experimentalFeatures":{"e_font_icon_svg":true,"additional_custom_breakpoints":true,"container":true,"nested-elements":true,"home_screen":true,"global_classes_should_enforce_capabilities":true,"e_variables":true,"cloud-library":true,"e_opt_in_v4_page":true,"import-export-customization":true},"urls":{"assets":"https:\/\/demo.artureanec.com\/themes\/logico-rounded\/wp-content\/plugins\/elementor\/assets\/","ajaxurl":"https:\/\/demo.artureanec.com\/themes\/logico-rounded\/wp-admin\/admin-ajax.php","uploadUrl":"https:\/\/demo.artureanec.com\/themes\/logico-rounded\/wp-content\/uploads"},"nonces":{"floatingButtonsClickTracking":"6eedf2dbaf"},"swiperClass":"swiper","settings":{"page":[],"editorPreferences":[]},"kit":{"active_breakpoints":["viewport_mobile","viewport_mobile_extra","viewport_tablet","viewport_tablet_extra","viewport_laptop"],"viewport_mobile":480,"viewport_mobile_extra":660,"viewport_tablet":840,"viewport_tablet_extra":1020,"viewport_laptop":1200,"lightbox_enable_counter":"yes","lightbox_enable_fullscreen":"yes","lightbox_enable_zoom":"yes","lightbox_enable_share":"yes","lightbox_title_src":"title","lightbox_description_src":"description"},"post":{"id":61,"title":"Logistic%20%E2%80%93%20Logico","excerpt":"","featuredImage":false}};
|
||||
//# sourceURL=elementor-frontend-js-before
|
||||
/* ]]>*/
|
||||
184
web/ev-design.php
Normal file
184
web/ev-design.php
Normal file
@@ -0,0 +1,184 @@
|
||||
<style>
|
||||
/* ─── EV SECTION BASE ─── */
|
||||
.ev-section {
|
||||
max-width: 1400px;
|
||||
margin: auto;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 60px;
|
||||
padding: 80px 20px;
|
||||
}
|
||||
|
||||
/* ─── LARGE DESKTOP (1440px+) ─── */
|
||||
@media (min-width: 1440px) {
|
||||
.ev-section { max-width: 1560px; padding: 50px 52px; gap: 72px; }
|
||||
.ev-section .ev-badge { font-size: 15px; padding: 9px 18px; margin-bottom: 22px; }
|
||||
.ev-section .ev-heading { font-size: 64px; margin-bottom: 22px; }
|
||||
.ev-section .ev-subtext { font-size: 19px; max-width: 560px; margin-bottom: 44px; }
|
||||
.ev-section .ev-grid { gap: 22px; max-width: 980px; }
|
||||
.ev-section .ev-card { padding: 24px; border-radius: 16px; }
|
||||
.ev-section .ev-card h3 { font-size: 19px; }
|
||||
.ev-section .ev-card p { font-size: 14.5px; }
|
||||
.ev-section .right-card { padding: 34px; border-radius: 22px; }
|
||||
.ev-section .ev-stat-val { font-size: 1.4rem; }
|
||||
.ev-section .ev-stat-label { font-size: 14px; }
|
||||
}
|
||||
|
||||
/* ─── EXTRA-LARGE DESKTOP (1920px+) ─── */
|
||||
@media (min-width: 1920px) {
|
||||
.ev-section { max-width: 1780px; padding: 112px 64px; gap: 88px; }
|
||||
.ev-section .ev-badge { font-size: 16px; padding: 10px 20px; margin-bottom: 26px; }
|
||||
.ev-section .ev-heading { font-size: 76px; margin-bottom: 26px; }
|
||||
.ev-section .ev-subtext { font-size: 20px; max-width: 620px; margin-bottom: 50px; line-height: 1.65; }
|
||||
.ev-section .ev-grid { gap: 26px; max-width: 1060px; }
|
||||
.ev-section .ev-card { padding: 28px; border-radius: 18px; }
|
||||
.ev-section .ev-card h3 { font-size: 21px; }
|
||||
.ev-section .ev-card p { font-size: 15.5px; }
|
||||
.ev-section .right-card { padding: 40px; border-radius: 26px; }
|
||||
.ev-section .ev-stat-val { font-size: 1.55rem; }
|
||||
.ev-section .ev-stat-label { font-size: 15px; }
|
||||
}
|
||||
|
||||
/* ─── ULTRA-WIDE (2560px+) ─── */
|
||||
@media (min-width: 2560px) {
|
||||
.ev-section { max-width: 2100px; padding: 50px 80px; gap: 108px; }
|
||||
.ev-section .ev-badge { font-size: 18px; padding: 12px 24px; margin-bottom: 30px; }
|
||||
.ev-section .ev-heading { font-size: 92px; margin-bottom: 30px; line-height: 1.05; }
|
||||
.ev-section .ev-subtext { font-size: 22px; max-width: 700px; margin-bottom: 58px; line-height: 1.68; }
|
||||
.ev-section .ev-grid { gap: 30px; max-width: 1200px; }
|
||||
.ev-section .ev-card { padding: 32px; border-radius: 20px; }
|
||||
.ev-section .ev-card h3 { font-size: 24px; }
|
||||
.ev-section .ev-card p { font-size: 17px; }
|
||||
.ev-section .right-card { padding: 48px; border-radius: 30px; }
|
||||
.ev-section .ev-stat-val { font-size: 1.75rem; }
|
||||
.ev-section .ev-stat-label { font-size: 16px; }
|
||||
}
|
||||
|
||||
/* ─── RIGHT CARD OVERLAY ─── */
|
||||
.right-card {
|
||||
position: relative;
|
||||
color: #111;
|
||||
overflow: hidden;
|
||||
}
|
||||
.right-card::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background: linear-gradient(
|
||||
to right,
|
||||
rgba(255,255,255,0.9) 30%,
|
||||
rgba(255,255,255,0.6) 55%,
|
||||
rgba(255,255,255,0.2) 100%
|
||||
);
|
||||
z-index: 0;
|
||||
}
|
||||
.right-card > * {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
</style>
|
||||
|
||||
<section class="ev-section">
|
||||
|
||||
<!-- LEFT CONTENT -->
|
||||
<div>
|
||||
|
||||
<span class="ev-badge" style="background:rgb(255,235,238);color:#c01227;padding:8px 16px;border-radius:20px;font-size:14px;display:inline-block;margin-bottom:20px;">
|
||||
EV-Native Design
|
||||
</span>
|
||||
|
||||
<h1 class="ev-heading" style="font-size:56px;font-weight:700;color:#0f172a;line-height:1.1;margin-bottom:20px;">
|
||||
Built for Electric.<br>
|
||||
<span style="color:#c01227;">Not Adapted.</span>
|
||||
</h1>
|
||||
|
||||
<p class="ev-subtext" style="font-size:18px;color:#5c6b6b;max-width:520px;margin-bottom:40px;line-height:1.6;">
|
||||
Most logistics software treats EVs as diesel trucks with a battery. Doormile was built EV-first—understanding that electric fleets require fundamentally different intelligence.
|
||||
</p>
|
||||
|
||||
<div class="ev-grid" style="display:grid;grid-template-columns:1fr 1fr;gap:20px;max-width:920px;">
|
||||
|
||||
<div class="ev-card" style="background:#fff;padding:20px;border-radius:14px;box-shadow:0 5px 20px rgba(0,0,0,0.05);">
|
||||
<h3 style="margin:0 0 8px 0;font-size:18px;">Battery-Aware Routing</h3>
|
||||
<p style="font-size:14px;color:#6b7280;margin:0;">Battery level, health, and degradation are inputs to route optimization.</p>
|
||||
</div>
|
||||
|
||||
<div class="ev-card" style="background:#fff;padding:20px;border-radius:14px;box-shadow:0 5px 20px rgba(0,0,0,0.05);">
|
||||
<h3 style="margin:0 0 8px 0;font-size:18px;">Charging Integration</h3>
|
||||
<p style="font-size:14px;color:#6b7280;margin:0;">Integrate charging stops without compromising delivery windows.</p>
|
||||
</div>
|
||||
|
||||
<div class="ev-card" style="background:#fff;padding:20px;border-radius:14px;box-shadow:0 5px 20px rgba(0,0,0,0.05);">
|
||||
<h3 style="margin:0 0 8px 0;font-size:18px;">Energy-Optimized Paths</h3>
|
||||
<p style="font-size:14px;color:#6b7280;margin:0;">Consider elevation, speed limits, and weather for efficiency.</p>
|
||||
</div>
|
||||
|
||||
<div class="ev-card" style="background:#fff;padding:20px;border-radius:14px;box-shadow:0 5px 20px rgba(0,0,0,0.05);">
|
||||
<h3 style="margin:0 0 8px 0;font-size:18px;">Predictable Operations</h3>
|
||||
<p style="font-size:14px;color:#6b7280;margin:0;">EVs become predictable assets, not operational risks.</p>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- RIGHT CARD -->
|
||||
<div class="right-card" style="background:#fff;padding:30px;border-radius:20px;width:920px;box-shadow:0 20px 40px rgba(0,0,0,0.08);background-image:url('/logistic/assets/images/ev-design1.jpeg');background-size:cover;background-position:center;">
|
||||
|
||||
<div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:25px;">
|
||||
<h4 style="margin:0;">Fleet Status</h4>
|
||||
<span style="color:#19a463;font-size:14px;">● 12 vehicles active</span>
|
||||
</div>
|
||||
|
||||
<div style="display:flex;justify-content:space-between;padding:14px 0;border-bottom:1px solid #eee;">
|
||||
<div>
|
||||
<strong>EV-001</strong>
|
||||
<p style="margin:0;color:#6b7280;font-size:14px;">Route A</p>
|
||||
</div>
|
||||
<div style="color:#19a463;font-weight:bold;">85% <span style="margin-left:10px;color:#221f1f;">15 min</span></div>
|
||||
</div>
|
||||
|
||||
<div style="display:flex;justify-content:space-between;padding:14px 0;border-bottom:1px solid #eee;">
|
||||
<div>
|
||||
<strong>EV-002</strong>
|
||||
<p style="margin:0;color:#6b7280;font-size:14px;">Route B</p>
|
||||
</div>
|
||||
<div style="color:#19a463;font-weight:bold;">62% <span style="margin-left:10px;color:#221f1f;">42 min</span></div>
|
||||
</div>
|
||||
|
||||
<div style="display:flex;justify-content:space-between;padding:14px 0;border-bottom:1px solid #eee;">
|
||||
<div>
|
||||
<strong>EV-003</strong>
|
||||
<p style="margin:0;color:#6b7280;font-size:14px;">Charging</p>
|
||||
</div>
|
||||
<div style="color:#f59e0b;font-size:1.1rem;font-weight:bold;">28% <span style="margin-left:10px;color:#221f1f;">Charging</span></div>
|
||||
</div>
|
||||
|
||||
<div style="display:flex;justify-content:space-between;margin-top:30px;text-align:center;">
|
||||
|
||||
<div>
|
||||
<h4 class="ev-stat-val" style="margin:0;color:#19a463;text-align:center;font-size:1.25rem;line-height:1.75rem;font-weight:bold;">40%</h4>
|
||||
<p class="ev-stat-label" style="font-size:13px;color:#6b7280;margin:0;">Lower Fuel Costs</p>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h4 class="ev-stat-val" style="margin:0;color:#19a463;text-align:center;font-size:1.25rem;line-height:1.75rem;font-weight:bold;">Zero</h4>
|
||||
<p class="ev-stat-label" style="font-size:13px;color:#6b7280;margin:0;">Tailpipe Emissions</p>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h4 class="ev-stat-val" style="margin:0;color:#19a463;text-align:center;font-size:1.25rem;line-height:1.75rem;font-weight:bold;">98%</h4>
|
||||
<p class="ev-stat-label" style="font-size:13px;color:#6b7280;margin:0;">Fleet Uptime</p>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<p class="ev-stat-val" style="margin:0;color:#19a463;text-align:center;font-size:1.25rem;line-height:1.75rem;font-weight:bold;">3x</p>
|
||||
<p class="ev-stat-label" style="font-size:13px;color:#6b7280;margin:0;">Longer Asset Life</p>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</section>
|
||||
139
web/ev-logistics.php
Normal file
139
web/ev-logistics.php
Normal file
@@ -0,0 +1,139 @@
|
||||
<link rel="stylesheet" href="/logistic/assets/css/custom-widget-accordion.min.css" type="text/css" media="all" />
|
||||
|
||||
<style>
|
||||
/* EV Section Column Layout */
|
||||
.elementor-element-b8da0f5 > .e-con-inner {
|
||||
display: flex;
|
||||
flex-direction: row !important;
|
||||
align-items: center !important;
|
||||
gap: 40px !important;
|
||||
justify-content: space-between !important;
|
||||
paddiing
|
||||
}
|
||||
.elementor-element-aef73c1 {
|
||||
flex: 1 1 45% !important;
|
||||
margin: 0 auto !important;
|
||||
}
|
||||
.elementor-element-89d7623 {
|
||||
flex: 1 1 55% !important;
|
||||
}
|
||||
|
||||
@media (max-width: 1024px) {
|
||||
.elementor-element-b8da0f5 > .e-con-inner {
|
||||
flex-direction: column-reverse !important;
|
||||
}
|
||||
.elementor-element-aef73c1, .elementor-element-89d7623 {
|
||||
width: 100% !important;
|
||||
}
|
||||
}
|
||||
|
||||
/* Accordion icon styling */
|
||||
.elementor-element-155d377 .elementor-accordion-icon-closed i {
|
||||
color: #000000 !important;
|
||||
}
|
||||
.elementor-element-155d377 .elementor-tab-title.elementor-active .elementor-accordion-icon-opened i {
|
||||
color: #c01227 !important;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div class="elementor-element elementor-element-b8da0f5 e-flex e-con-boxed cut-corner-no sticky-container-off e-con e-parent accordion" data-id="b8da0f5" data-element_type="container">
|
||||
<div class="e-con-inner">
|
||||
<div class="elementor-element elementor-element-aef73c1 e-con-full e-flex cut-corner-no sticky-container-off e-con e-child" data-id="aef73c1" data-element_type="container">
|
||||
<div class="elementor-element elementor-element-e2a1b94 elementor-widget elementor-widget-image" data-id="e2a1b94" data-element_type="widget" data-widget_type="image.default">
|
||||
<div class="elementor-widget-container">
|
||||
<img width="995" height="475" src="/logistic/assets/images/ev.jpeg" class="attachment-full size-full wp-image-ev" alt="Electric Truck Charging" style="border-radius: 25px; box-shadow: 0 10px 30px rgba(0,0,0,0.1); width: 100%; height: auto;" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="elementor-element elementor-element-89d7623 e-con-full e-flex cut-corner-no sticky-container-off e-con e-child" data-id="89d7623" data-element_type="container">
|
||||
<div class="elementor-element elementor-element-54d05ac elementor-invisible elementor-widget elementor-widget-logico_heading" data-id="54d05ac" data-element_type="widget" data-settings="{"_animation":"logico_heading_animation"}" data-widget_type="logico_heading.default">
|
||||
<div class="elementor-widget-container">
|
||||
<h3 class="logico-title">Logistics Built for Electric Vehicles
|
||||
</h3>
|
||||
</div>
|
||||
</div>
|
||||
<div class="elementor-element elementor-element-155d377 elementor-widget elementor-widget-accordion" data-id="155d377" data-element_type="widget" data-widget_type="accordion.default">
|
||||
<div class="elementor-widget-container">
|
||||
<div class="elementor-accordion">
|
||||
<div class="elementor-accordion-item">
|
||||
<div id="elementor-tab-title-2241" class="elementor-tab-title" data-tab="1" role="button" aria-controls="elementor-tab-content-2241" aria-expanded="false">
|
||||
<span class="elementor-accordion-icon elementor-accordion-icon-right" aria-hidden="true">
|
||||
<span class="elementor-accordion-icon-closed">
|
||||
<i class="fontello icon-arrow-x-r-down"></i>
|
||||
</span>
|
||||
<span class="elementor-accordion-icon-opened">
|
||||
<i class="fontello icon-arrow-x-r-top"></i>
|
||||
</span>
|
||||
</span>
|
||||
<a class="elementor-accordion-title" tabindex="0">01. Battery-First Planning </span></a>
|
||||
</div>
|
||||
<div id="elementor-tab-content-2241" class="elementor-tab-content elementor-clearfix" data-tab="1" role="region" aria-labelledby="elementor-tab-title-2241">
|
||||
<p>
|
||||
Routes are optimized around battery levels and charging windows, not retrofitted as an afterthought.
|
||||
|
||||
</p>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div class="elementor-accordion-item">
|
||||
<div id="elementor-tab-title-2242" class="elementor-tab-title" data-tab="2" role="button" aria-controls="elementor-tab-content-2242" aria-expanded="false">
|
||||
<span class="elementor-accordion-icon elementor-accordion-icon-right" aria-hidden="true">
|
||||
<span class="elementor-accordion-icon-closed">
|
||||
<i class="fontello icon-arrow-x-r-down"></i>
|
||||
</span>
|
||||
<span class="elementor-accordion-icon-opened">
|
||||
<i class="fontello icon-arrow-x-r-top"></i>
|
||||
</span>
|
||||
</span>
|
||||
<a class="elementor-accordion-title" tabindex="0">02. Energy-Aware Routing</span></a>
|
||||
</div>
|
||||
<div id="elementor-tab-content-2242" class="elementor-tab-content elementor-clearfix" data-tab="2" role="region" aria-labelledby="elementor-tab-title-2242">
|
||||
<p>
|
||||
Our algorithms factor in terrain, traffic, and payload weight to maximize range efficiency
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="elementor-accordion-item">
|
||||
<div id="elementor-tab-title-2243" class="elementor-tab-title" data-tab="3" role="button" aria-controls="elementor-tab-content-2243" aria-expanded="false">
|
||||
<span class="elementor-accordion-icon elementor-accordion-icon-right" aria-hidden="true">
|
||||
<span class="elementor-accordion-icon-closed">
|
||||
<i class="fontello icon-arrow-x-r-down"></i>
|
||||
</span>
|
||||
<span class="elementor-accordion-icon-opened">
|
||||
<i class="fontello icon-arrow-x-r-top"></i>
|
||||
</span>
|
||||
</span>
|
||||
<a class="elementor-accordion-title" tabindex="0">03. Smart Charging Integration</span></a>
|
||||
</div>
|
||||
<div id="elementor-tab-content-2243" class="elementor-tab-content elementor-clearfix" data-tab="3" role="region" aria-labelledby="elementor-tab-title-2243">
|
||||
<p>
|
||||
Seamless coordination with charging infrastructure to eliminate range anxiety for drivers.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="elementor-accordion-item">
|
||||
<div id="elementor-tab-title-2244" class="elementor-tab-title" data-tab="4" role="button" aria-controls="elementor-tab-content-2244" aria-expanded="false">
|
||||
<span class="elementor-accordion-icon elementor-accordion-icon-right" aria-hidden="true">
|
||||
<span class="elementor-accordion-icon-closed">
|
||||
<i class="fontello icon-arrow-x-r-down"></i>
|
||||
</span>
|
||||
<span class="elementor-accordion-icon-opened">
|
||||
<i class="fontello icon-arrow-x-r-top"></i>
|
||||
</span>
|
||||
</span>
|
||||
<a class="elementor-accordion-title" tabindex="0">04. Carbon Footprint Tracking</a>
|
||||
</div>
|
||||
<div id="elementor-tab-content-2244" class="elementor-tab-content elementor-clearfix" data-tab="4" role="region" aria-labelledby="elementor-tab-title-2244">
|
||||
<p>
|
||||
Real-time emissions monitoring and sustainability reports for every delivery.<br />
|
||||
</p>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
71
web/header-img.php
Normal file
71
web/header-img.php
Normal file
@@ -0,0 +1,71 @@
|
||||
<div class="elementor-element elementor-element-da57c01 e-con-full e-flex cut-corner-no sticky-container-off e-con e-parent" data-id="da57c01" data-element_type="container" data-e-type="container">
|
||||
<div class="elementor-element elementor-element-cbfd9b2 elementor-widget elementor-widget-logico_content_slider" data-id="cbfd9b2" data-element_type="widget" data-e-type="widget" data-widget_type="logico_content_slider.default">
|
||||
<div class="elementor-widget-container">
|
||||
<div class="logico-content-slider-widget">
|
||||
<div class="content-slider-wrapper">
|
||||
<div class="content-slider-container">
|
||||
<div class="content-slider owl-carousel owl-theme" data-slider-options="{"items":1,"nav":false,"navText":"","dots":true,"progress":true,"dotsContainer":".owl-dots-cbfd9b2","autoplayHoverPause":false,"autoplay":false,"autoplaySpeed":5000,"autoplayTimeout":5000,"loop":true,"dragEndSpeed":1200,"navSpeed":1200,"dotsSpeed":1200,"pullDrag":false,"freeDrag":false,"callbacks":false,"animateOut":"fadeOut","rtl":false}">
|
||||
<div class="content-item slider-item elementor-repeater-item-3264830 slide-style-standard">
|
||||
<div class="slide-content">
|
||||
<div class="slide-content-inner">
|
||||
<h1 class="content-slider-item-heading logico-content-wrapper-1">
|
||||
<span class="heading-content">Transportation Services around the World</span>
|
||||
</h1>
|
||||
<div class="content-slider-item-text logico-content-wrapper-2">
|
||||
<div class="text-content">
|
||||
<p>Mummichog paradise fish! Triggerfish bango guppy opah sunfish bluntnose knifefish upside-down catfish cobia spookfish convict cichlid.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="content-slider-item-buttons logico-content-wrapper-3">
|
||||
<a class="logico-alter-button" href="https://demo.artureanec.com/themes/logico-rounded/about-us/" target="_blank">Explore more</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="content-item slider-item elementor-repeater-item-6867061 slide-style-standard">
|
||||
<div class="slide-content">
|
||||
<div class="slide-content-inner">
|
||||
<h1 class="content-slider-item-heading logico-content-wrapper-1">
|
||||
<span class="heading-content">A New Freight Experience</span>
|
||||
</h1>
|
||||
<div class="content-slider-item-text logico-content-wrapper-2">
|
||||
<div class="text-content">
|
||||
<p>Halosaur duckbilled barracudina, goosefish gar pleco, chum salmon armoured catfish gudgeon sawfish whitefish orbicular batfish mummichog paradise fish!</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="content-slider-item-buttons logico-content-wrapper-3">
|
||||
<a class="logico-alter-button" href="https://demo.artureanec.com/themes/logico-rounded/about-us/" target="_blank">Explore more</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="slider-footer slider-footer-position-after slider-footer-width-full slider-footer-view-outside">
|
||||
<div class="slider-footer-content">
|
||||
<div class="slider-pagination">
|
||||
<div class="slider-progress-wrapper">
|
||||
<span class="slider-progress-current">01</span>
|
||||
/<span class="slider-progress-all">01</span>
|
||||
</div>
|
||||
<div class="owl-dots owl-dots-cbfd9b2"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="elementor-element elementor-element-5345c97 elementor-widget__width-auto elementor-absolute elementor-widget elementor-widget-logico_video_button" data-id="5345c97" data-element_type="widget" data-e-type="widget" data-settings="{"youtube_url":"https:\/\/www.youtube.com\/watch?v=XHOmBV4js_E","_position":"absolute","video_type":"youtube","controls":"yes","lightbox":"yes"}" data-widget_type="logico_video_button.default">
|
||||
<div class="elementor-widget-container">
|
||||
<div class="elementor-wrapper elementor-open-lightbox logico-video-button video-button-animation-none">
|
||||
<div class="elementor-custom-embed-image-overlay video-button-wrapper" data-elementor-open-lightbox="yes" data-elementor-lightbox="{"type":"video","videoType":"youtube","url":"https:\/\/www.youtube.com\/embed\/XHOmBV4js_E?feature=oembed&start&end&wmode=opaque&loop=0&controls=1&mute=0&rel=0&cc_load_policy=0","autoplay":"","modalOptions":{"id":"elementor-lightbox-5345c97","entranceAnimation":"","entranceAnimation_tablet":"","entranceAnimation_mobile":"","videoAspectRatio":"169"}}" data-e-action-hash="#elementor-action%3Aaction%3Dlightbox%26settings%3DeyJ0eXBlIjoidmlkZW8iLCJ2aWRlb1R5cGUiOiJ5b3V0dWJlIiwidXJsIjoiaHR0cHM6XC9cL3d3dy55b3V0dWJlLmNvbVwvZW1iZWRcL1hIT21CVjRqc19FP2ZlYXR1cmU9b2VtYmVkJnN0YXJ0JmVuZCZ3bW9kZT1vcGFxdWUmbG9vcD0wJmNvbnRyb2xzPTEmbXV0ZT0wJnJlbD0wJmNjX2xvYWRfcG9saWN5PTAiLCJhdXRvcGxheSI6IiIsIm1vZGFsT3B0aW9ucyI6eyJpZCI6ImVsZW1lbnRvci1saWdodGJveC01MzQ1Yzk3IiwiZW50cmFuY2VBbmltYXRpb24iOiIiLCJlbnRyYW5jZUFuaW1hdGlvbl90YWJsZXQiOiIiLCJlbnRyYW5jZUFuaW1hdGlvbl9tb2JpbGUiOiIiLCJ2aWRlb0FzcGVjdFJhdGlvIjoiMTY5In19">
|
||||
<div class="elementor-custom-embed-play" role="button">
|
||||
<div class="video-button-icon"></div>
|
||||
<div class="video-button-label">Watch video</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
4184
web/how-its-works.php
Normal file
4184
web/how-its-works.php
Normal file
File diff suppressed because it is too large
Load Diff
6
web/jquery-js-after.html
Normal file
6
web/jquery-js-after.html
Normal file
@@ -0,0 +1,6 @@
|
||||
/*
|
||||
<![CDATA[ */
|
||||
!function($){"use strict";$(document).ready(function(){$(this).scrollTop()>100&&$(".hfe-scroll-to-top-wrap").removeClass("hfe-scroll-to-top-hide"),$(window).scroll(function(){$(this).scrollTop()<100?$(".hfe-scroll-to-top-wrap").fadeOut(300):$(".hfe-scroll-to-top-wrap").fadeIn(300)}),$(".hfe-scroll-to-top-wrap").on("click",function(){$("html, body").animate({scrollTop:0},300);return!1})})}(jQuery);
|
||||
!function($){'use strict';$(document).ready(function(){var bar=$('.hfe-reading-progress-bar');if(!bar.length)return;$(window).on('scroll',function(){var s=$(window).scrollTop(),d=$(document).height()-$(window).height(),p=d? s/d*100:0;bar.css('width',p+'%')});});}(jQuery);
|
||||
//# sourceURL=jquery-js-after
|
||||
/* ]]>*/
|
||||
6
web/logico-theme-js-extra.html
Normal file
6
web/logico-theme-js-extra.html
Normal file
@@ -0,0 +1,6 @@
|
||||
/*
|
||||
<![CDATA[ */
|
||||
var ajax_params = {"ajax_url":"https://demo.artureanec.com/themes/logico-rounded/wp-admin/admin-ajax.php","ajax_nonce":"9cbcbbe4d2"};
|
||||
var theme = [];
|
||||
//# sourceURL=logico-theme-js-extra
|
||||
/* ]]>*/
|
||||
1671
web/miletruth.php
Normal file
1671
web/miletruth.php
Normal file
File diff suppressed because one or more lines are too long
145
web/our-team.php
Normal file
145
web/our-team.php
Normal file
@@ -0,0 +1,145 @@
|
||||
<?php
|
||||
/**
|
||||
* Modular Team Section Component
|
||||
* Usage: include 'our-team.php';
|
||||
* Depends on: head.php being included in the parent page for global styles.
|
||||
*/
|
||||
?>
|
||||
<style>
|
||||
/* Scope safety: ensured by wrapping elementor-63 container below */
|
||||
.elementor-element-bf5fff2 {
|
||||
--margin-top: 100px !important; /* Slightly reduced for about page */
|
||||
--margin-bottom: 80px !important;
|
||||
}
|
||||
.elementor-element-57c7653 .logico-title {
|
||||
font-size: 50px !important; /* Adjusted for better visibility */
|
||||
line-height: 1.2 !important;
|
||||
margin-bottom: 40px !important;
|
||||
}
|
||||
/* Fix for overlapping text seen in screenshot */
|
||||
.elementor-element-bf5fff2 {
|
||||
clear: both;
|
||||
position: relative;
|
||||
z-index: 0;
|
||||
background: transparent;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div class="elementor elementor-63">
|
||||
<div class="elementor-element elementor-element-bf5fff2 e-flex e-con-boxed cut-corner-no sticky-container-off e-con e-parent" data-id="bf5fff2" data-element_type="container">
|
||||
<div class="e-con-inner">
|
||||
<div class="elementor-element elementor-element-5a54148 e-con-full e-flex cut-corner-no sticky-container-off e-con e-child" data-id="5a54148" data-element_type="container">
|
||||
<div class="elementor-element elementor-element-94ebf2e elementor-widget elementor-widget-logico_heading" data-id="94ebf2e" data-element_type="widget" data-widget_type="logico_heading.default">
|
||||
<div class="elementor-widget-container">
|
||||
<div class="logico-title">/ team /</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="elementor-element elementor-element-57c7653 elementor-widget__width-initial elementor-invisible elementor-widget elementor-widget-logico_heading" data-id="57c7653" data-element_type="widget" data-settings="{"_animation":"logico_heading_animation"}" data-widget_type="logico_heading.default">
|
||||
<div class="elementor-widget-container">
|
||||
<h3 class="logico-title">Meet our the best crew</h3>
|
||||
</div>
|
||||
</div>
|
||||
<div class="elementor-element elementor-element-138c81a elementor-widget elementor-widget-logico_team_listing" data-id="138c81a" data-element_type="widget" data-widget_type="logico_team_listing.default">
|
||||
<div class="elementor-widget-container">
|
||||
<div class="logico-team-listing-widget">
|
||||
<div class="archive-listing" data-ajax='{"post_type":"team","post_status":"publish","ignore_sticky_posts":true,"suppress_filters":true,"orderby":"post__in","order":"desc","link_base":"https:\/\/demo.artureanec.com\/themes\/logico-rounded\/home-3","post__in":["2807","2850","2855"],"posts_per_page":3,"columns_number":3,"paged":1}' data-widget='{"item_class":"team-item-wrapper","columns_number":3,"listing_type":"grid","show_media":"yes","show_title":"yes","show_position":"yes","show_socials":"yes","show_pagination":""}'>
|
||||
<div class="archive-listing-wrapper team-listing-wrapper team-grid-listing columns-3">
|
||||
<div class="team-item-wrapper post-2807 team type-team status-publish has-post-thumbnail hentry">
|
||||
<div class="team-item">
|
||||
<div class="team-item-media">
|
||||
<div class="post-media">
|
||||
<a href="#">
|
||||
<picture>
|
||||
<source media="(max-width: 480px)" sizes="(max-width: 480px) 480px" srcset="https://8ded8880.delivery.rocketcdn.me/themes/logico-rounded/wp-content/uploads/2024/08/team-pic-1-480x480.jpg 480w">
|
||||
<source media="(max-width: 660px)" sizes="(max-width: 660px) 660px" srcset="https://8ded8880.delivery.rocketcdn.me/themes/logico-rounded/wp-content/uploads/2024/08/team-pic-1-480x480.jpg 660w">
|
||||
<source media="(max-width: 840px)" sizes="(max-width: 840px) 840px" srcset="https://8ded8880.delivery.rocketcdn.me/themes/logico-rounded/wp-content/uploads/2024/08/team-pic-1-480x480.jpg 840w">
|
||||
<img decoding="async" alt="team-pic-1" title="team-pic-1" src="https://8ded8880.delivery.rocketcdn.me/themes/logico-rounded/wp-content/uploads/2024/08/team-pic-1-680x680.jpg" class="attachment-medium size-medium wp-post-image"/>
|
||||
</picture>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="team-item-content">
|
||||
<div class="post-title">
|
||||
<a href="#">Samuel Peterson</a>
|
||||
</div>
|
||||
<div class="team-item-position">CEO Logico</div>
|
||||
<div class="team-item-socials">
|
||||
<ul class="team-socials wrapper-socials">
|
||||
<li><a href="https://www.facebook.com/" target="_blank" class="fab fa-facebook-f" title="Facebook"></a></li>
|
||||
<li><a href="https://x.com/" target="_blank" class="fab fa-x-twitter" title="X"></a></li>
|
||||
<li><a href="https://www.linkedin.com/" target="_blank" class="fab fa-linkedin-in" title="LinkedIn"></a></li>
|
||||
<li><a href="https://www.youtube.com/" target="_blank" class="fab fa-youtube" title="YouTube"></a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="team-item-wrapper post-2850 team type-team status-publish has-post-thumbnail hentry">
|
||||
<div class="team-item">
|
||||
<div class="team-item-media">
|
||||
<div class="post-media">
|
||||
<a href="#">
|
||||
<picture>
|
||||
<source media="(max-width: 480px)" sizes="(max-width: 480px) 480px" srcset="https://8ded8880.delivery.rocketcdn.me/themes/logico-rounded/wp-content/uploads/2024/08/team-pic-2-480x480.jpg 480w">
|
||||
<source media="(max-width: 660px)" sizes="(max-width: 660px) 660px" srcset="https://8ded8880.delivery.rocketcdn.me/themes/logico-rounded/wp-content/uploads/2024/08/team-pic-2-480x480.jpg 660w">
|
||||
<source media="(max-width: 840px)" sizes="(max-width: 840px) 840px" srcset="https://8ded8880.delivery.rocketcdn.me/themes/logico-rounded/wp-content/uploads/2024/08/team-pic-2-480x480.jpg 840w">
|
||||
<img decoding="async" alt="team-pic-2" title="team-pic-2" src="https://8ded8880.delivery.rocketcdn.me/themes/logico-rounded/wp-content/uploads/2024/08/team-pic-2-680x680.jpg" class="attachment-medium size-medium wp-post-image"/>
|
||||
</picture>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="team-item-content">
|
||||
<div class="post-title">
|
||||
<a href="#">Andrew McDickens</a>
|
||||
</div>
|
||||
<div class="team-item-position">Manager</div>
|
||||
<div class="team-item-socials">
|
||||
<ul class="team-socials wrapper-socials">
|
||||
<li><a href="https://www.facebook.com/" target="_blank" class="fab fa-facebook-f" title="Facebook"></a></li>
|
||||
<li><a href="https://x.com/" target="_blank" class="fab fa-x-twitter" title="X"></a></li>
|
||||
<li><a href="https://www.linkedin.com/" target="_blank" class="fab fa-linkedin-in" title="LinkedIn"></a></li>
|
||||
<li><a href="https://www.youtube.com/" target="_blank" class="fab fa-youtube" title="YouTube"></a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="team-item-wrapper post-2855 team type-team status-publish has-post-thumbnail hentry">
|
||||
<div class="team-item">
|
||||
<div class="team-item-media">
|
||||
<div class="post-media">
|
||||
<a href="#">
|
||||
<picture>
|
||||
<source media="(max-width: 480px)" sizes="(max-width: 480px) 480px" srcset="https://8ded8880.delivery.rocketcdn.me/themes/logico-rounded/wp-content/uploads/2024/08/team-pic-3-354x480.jpg 480w">
|
||||
<source media="(max-width: 660px)" sizes="(max-width: 660px) 660px" srcset="https://8ded8880.delivery.rocketcdn.me/themes/logico-rounded/wp-content/uploads/2024/08/team-pic-3-354x480.jpg 660w">
|
||||
<source media="(max-width: 840px)" sizes="(max-width: 840px) 840px" srcset="https://8ded8880.delivery.rocketcdn.me/themes/logico-rounded/wp-content/uploads/2024/08/team-pic-3-354x480.jpg 840w">
|
||||
<img decoding="async" alt="team-pic-3" title="team-pic-3" src="https://8ded8880.delivery.rocketcdn.me/themes/logico-rounded/wp-content/uploads/2024/08/team-pic-3.jpg" class="attachment-medium size-medium wp-post-image"/>
|
||||
</picture>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="team-item-content">
|
||||
<div class="post-title">
|
||||
<a href="#">Samantha Powers</a>
|
||||
</div>
|
||||
<div class="team-item-position">HR Specialist</div>
|
||||
<div class="team-item-socials">
|
||||
<ul class="team-socials wrapper-socials">
|
||||
<li><a href="https://www.facebook.com/" target="_blank" class="fab fa-facebook-f" title="Facebook"></a></li>
|
||||
<li><a href="https://x.com/" target="_blank" class="fab fa-x-twitter" title="X"></a></li>
|
||||
<li><a href="https://www.linkedin.com/" target="_blank" class="fab fa-linkedin-in" title="LinkedIn"></a></li>
|
||||
<li><a href="https://www.youtube.com/" target="_blank" class="fab fa-youtube" title="YouTube"></a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
98
web/our_office.php
Normal file
98
web/our_office.php
Normal file
@@ -0,0 +1,98 @@
|
||||
|
||||
<style>
|
||||
/* Our Office Component Styles */
|
||||
.offices-section-wrapper {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
background: #ffffff;
|
||||
position: relative;
|
||||
font-family: 'DM Sans', sans-serif;
|
||||
}
|
||||
.offices-section {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
width: 100%;
|
||||
max-width: 1180px;
|
||||
padding: 80px 32px;
|
||||
margin: 0 auto !important;
|
||||
}
|
||||
.offices-header {
|
||||
text-align: center;
|
||||
margin-bottom: 60px;
|
||||
}
|
||||
.offices-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
gap: 26px;
|
||||
}
|
||||
.office-card {
|
||||
background: #f5f5f5;
|
||||
border: 1px solid #e1e1e1;
|
||||
border-radius: 24px;
|
||||
overflow: hidden;
|
||||
box-shadow: 0 4px 18px rgba(17,20,25,0.07);
|
||||
transition: transform 0.42s ease, box-shadow 0.42s ease;
|
||||
}
|
||||
.office-card:hover { transform: translateY(-10px); box-shadow: 0 28px 60px rgba(192,32,42,0.14); }
|
||||
.map-container { height: 220px; overflow: hidden; }
|
||||
.card-body { padding: 28px 30px 32px; }
|
||||
.card-tag { font-size: 0.67rem; color: #C0202A; margin-bottom: 8px; }
|
||||
.card-city { font-family: 'Playfair Display', serif; font-size: 1.7rem; font-weight: 700; margin-bottom: 10px; }
|
||||
.card-desc { font-size: 0.92rem; color: #4d5261; line-height: 1.72; }
|
||||
|
||||
@media (max-width: 992px) {
|
||||
.offices-grid { grid-template-columns: 1fr 1fr; }
|
||||
}
|
||||
@media (max-width: 600px) {
|
||||
.offices-grid { grid-template-columns: 1fr; }
|
||||
}
|
||||
</style>
|
||||
|
||||
<div class="offices-section-wrapper">
|
||||
<section class="offices-section">
|
||||
<header class="offices-header">
|
||||
<div class="offices-eyebrow">Where We Are</div>
|
||||
<h2 class="offices-title">Our Offices</h2>
|
||||
<p class="offices-subtitle">Strategically located to serve businesses across India</p>
|
||||
</header>
|
||||
|
||||
<div class="offices-grid">
|
||||
<!-- Coimbatore -->
|
||||
<article class="office-card">
|
||||
<div class="map-container">
|
||||
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d62617.64038696284!2d76.92516!3d11.01680!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x3ba859af2f971cb5%3A0x2fc1c81e183ed282!2sCoimbatore%2C%20Tamil%20Nadu!5e0!3m2!1sen!2sin!4v1700000000000" width="100%" height="220" style="border:0;" allowfullscreen="" loading="lazy"></iframe>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<p class="card-tag">Headquarters</p>
|
||||
<h4 class="card-city">Coimbatore</h4>
|
||||
<p class="card-desc">Our innovation hub where MileTruth™ AI was born</p>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<!-- Bengaluru -->
|
||||
<article class="office-card">
|
||||
<div class="map-container">
|
||||
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d124416.29!2d77.5007!3d12.9716!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x3bae1670c9b44e6d%3A0xf8dfc3e8517e4fe0!2sBengaluru%2C%20Karnataka!5e0!3m2!1sen!2sin!4v1700000000001" width="100%" height="220" style="border:0;" allowfullscreen="" loading="lazy"></iframe>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<p class="card-tag">Technology Center</p>
|
||||
<h4 class="card-city">Bengaluru</h4>
|
||||
<p class="card-desc">Engineering excellence and product development</p>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<!-- Hyderabad -->
|
||||
<article class="office-card">
|
||||
<div class="map-container">
|
||||
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d121684.68!2d78.3674!3d17.3850!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x3bcb99daeaebd2c7%3A0xae93b78392bafbc2!2sHyderabad%2C%20Telangana!5e0!3m2!1sen!2sin!4v1700000000002" width="100%" height="220" style="border:0;" allowfullscreen="" loading="lazy"></iframe>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<p class="card-tag">Operations Hub</p>
|
||||
<h4 class="card-city">Hyderabad</h4>
|
||||
<p class="card-desc">Scaling logistics operations across India</p>
|
||||
</div>
|
||||
</article>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
95
web/our_values.php
Normal file
95
web/our_values.php
Normal file
@@ -0,0 +1,95 @@
|
||||
|
||||
<style>
|
||||
/* Our Values Component Styles */
|
||||
.values-section-wrapper {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
background: #ffffff;
|
||||
position: relative;
|
||||
font-family: 'DM Sans', sans-serif;
|
||||
}
|
||||
.values-section {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
width: 100%;
|
||||
max-width: 1180px;
|
||||
padding: 80px 32px;
|
||||
margin: 0 auto !important;
|
||||
}
|
||||
.values-header {
|
||||
text-align: center;
|
||||
margin-bottom: 60px;
|
||||
}
|
||||
.values-eyebrow {
|
||||
font-size: 0.72rem;
|
||||
font-weight: 500;
|
||||
letter-spacing: 0.18em;
|
||||
text-transform: uppercase;
|
||||
color: #C0202A;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
.values-title {
|
||||
font-family: 'Playfair Display', serif;
|
||||
font-size: 3rem;
|
||||
font-weight: 700;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
.values-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
gap: 28px;
|
||||
}
|
||||
.value-card {
|
||||
background: #f5f5f5;
|
||||
border: 1px solid #e0e0e0;
|
||||
border-radius: 24px;
|
||||
padding: 48px 36px;
|
||||
box-shadow: 0 2px 12px rgba(17,20,25,0.06);
|
||||
transition: transform 0.42s cubic-bezier(0.34,1.56,0.64,1);
|
||||
}
|
||||
.value-card:hover { transform: translateY(-10px); }
|
||||
.card-icon-wrap { width: 72px; height: 72px; margin-bottom: 32px; background: rgba(192, 32, 42, 0.08); border-radius: 50%; }
|
||||
.card-icon-wrap svg { width: 36px; height: 36px; margin: 18px; }
|
||||
.card-label { font-size: 0.68rem; color: #C0202A; margin-bottom: 10px; }
|
||||
.card-title { font-family: 'Playfair Display', serif; font-size: 1.5rem; margin-bottom: 14px; }
|
||||
.card-desc { font-size: 0.95rem; line-height: 1.75; color: #4a4f5a; }
|
||||
|
||||
@media (max-width: 992px) {
|
||||
.values-grid { grid-template-columns: 1fr 1fr; }
|
||||
}
|
||||
@media (max-width: 600px) {
|
||||
.values-grid { grid-template-columns: 1fr; }
|
||||
}
|
||||
</style>
|
||||
|
||||
<div class="values-section-wrapper">
|
||||
<section class="values-section">
|
||||
<header class="values-header">
|
||||
<div class="values-eyebrow">Who We Are</div>
|
||||
<h2 class="values-title">Our Values</h2>
|
||||
<p class="values-subtitle">The principles that drive everything we do</p>
|
||||
</header>
|
||||
|
||||
<div class="values-grid">
|
||||
<article class="value-card">
|
||||
<div class="card-icon-wrap"><svg viewBox="0 0 36 36" fill="none"><circle cx="18" cy="18" r="10" stroke="#C0202A" stroke-width="2.2"/><circle cx="18" cy="18" r="5.5" stroke="#C0202A" stroke-width="2.2"/></svg></div>
|
||||
<p class="card-label">01 / Purpose</p>
|
||||
<h4 class="card-title">Mission-Driven</h4>
|
||||
<p class="card-desc">Transforming logistics with transparency and accountability at every mile.</p>
|
||||
</article>
|
||||
<article class="value-card">
|
||||
<div class="card-icon-wrap"><svg viewBox="0 0 36 36" fill="none"><circle cx="13" cy="13" r="4.5" stroke="#C0202A" stroke-width="2.2"/><circle cx="24" cy="13" r="4.5" stroke="#C0202A" stroke-width="2.2"/></svg></div>
|
||||
<p class="card-label">02 / Culture</p>
|
||||
<h4 class="card-title">People First</h4>
|
||||
<p class="card-desc">Empowering delivery partners and supporting women entrepreneurs.</p>
|
||||
</article>
|
||||
<article class="value-card">
|
||||
<div class="card-icon-wrap"><svg viewBox="0 0 36 36" fill="none"><path d="M18 4l2.5 7.7H28l-6.5 4.7 2.5 7.7L18 20l-6 4.4 2.5-7.7L8 12.7h7.5z" stroke="#C0202A" stroke-width="2.1" stroke-linejoin="round"/></svg></div>
|
||||
<p class="card-label">03 / Standards</p>
|
||||
<h4 class="card-title">Excellence</h4>
|
||||
<p class="card-desc">Setting new standards in logistics technology and service delivery.</p>
|
||||
</article>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
710
web/problem.php
Normal file
710
web/problem.php
Normal file
@@ -0,0 +1,710 @@
|
||||
|
||||
|
||||
<style>
|
||||
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
|
||||
|
||||
:root {
|
||||
--red: #c01227;
|
||||
--red-light: #fff0ee;
|
||||
--dark: #1a1e2e;
|
||||
--mid: #3d4259;
|
||||
--muted: #8d93a8;
|
||||
--bg: #f3f4f7;
|
||||
--white: #ffffff;
|
||||
--card-shadow: 0 4px 30px rgba(0,0,0,0.07);
|
||||
--card-shadow-hover: 0 16px 60px rgba(232,55,42,0.13);
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: 'Barlow', sans-serif;
|
||||
background: var(--bg);
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
/* ─── SECTION WRAPPER ─── */
|
||||
.problem-section {
|
||||
width: 100%;
|
||||
max-width: 1400px;
|
||||
margin: auto;
|
||||
padding: 50px 40px 50px;
|
||||
position: relative;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
/* Decorative dashed grid lines (Logico style) */
|
||||
.problem-section::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background-image:
|
||||
linear-gradient(to right, rgba(0,0,0,0.04) 1px, transparent 1px),
|
||||
linear-gradient(to bottom, rgba(0,0,0,0.04) 1px, transparent 1px);
|
||||
background-size: 80px 80px;
|
||||
pointer-events: none;
|
||||
border-radius: 24px;
|
||||
mask-image: radial-gradient(ellipse 80% 80% at 50% 50%, black 40%, transparent 100%);
|
||||
}
|
||||
|
||||
/* ─── HEADER ─── */
|
||||
.section-header {
|
||||
text-align: center;
|
||||
margin-bottom: 70px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.eyebrow {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
font-family: 'Manrope', sans-serif;
|
||||
font-size: 12px;
|
||||
font-weight: 700;
|
||||
letter-spacing: 3px;
|
||||
text-transform: uppercase;
|
||||
color: var(--red);
|
||||
margin-bottom: 20px;
|
||||
opacity: 0;
|
||||
transform: translateY(20px);
|
||||
transition: opacity 0.6s ease, transform 0.6s ease;
|
||||
}
|
||||
|
||||
.eyebrow::before,
|
||||
.eyebrow::after {
|
||||
content: '';
|
||||
display: block;
|
||||
width: 30px;
|
||||
height: 1px;
|
||||
background: var(--red);
|
||||
}
|
||||
|
||||
.section-title {
|
||||
font-family: 'Manrope', sans-serif;
|
||||
font-size: clamp(40px, 6vw, 72px);
|
||||
font-weight: 800;
|
||||
color: var(--dark);
|
||||
line-height: 1.0;
|
||||
letter-spacing: -1px;
|
||||
opacity: 0;
|
||||
transform: translateY(30px);
|
||||
transition: opacity 0.7s ease 0.15s, transform 0.7s ease 0.15s;
|
||||
}
|
||||
|
||||
.section-title em {
|
||||
font-style: normal;
|
||||
color: var(--red);
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.section-title em::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
bottom: 4px;
|
||||
left: 0; right: 0;
|
||||
height: 3px;
|
||||
background: var(--red);
|
||||
border-radius: 2px;
|
||||
transform: scaleX(0);
|
||||
transform-origin: left;
|
||||
transition: transform 0.8s cubic-bezier(.16,1,.3,1) 0.9s;
|
||||
}
|
||||
|
||||
.section-subtitle {
|
||||
margin-top: 22px;
|
||||
font-size: 16px;
|
||||
color: var(--muted);
|
||||
line-height: 1.75;
|
||||
max-width: 520px;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
opacity: 0;
|
||||
transform: translateY(20px);
|
||||
transition: opacity 0.7s ease 0.3s, transform 0.7s ease 0.3s;
|
||||
display: inline-block;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
/* ─── IN-VIEW TRIGGERS ─── */
|
||||
.in-view .eyebrow { opacity: 1; transform: translateY(0); }
|
||||
.in-view .section-title { opacity: 1; transform: translateY(0); }
|
||||
.in-view .section-title em::after { transform: scaleX(1); }
|
||||
.in-view .section-subtitle { opacity: 1; transform: translateY(0); }
|
||||
|
||||
/* ─── STAT CARDS ─── */
|
||||
.cards-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
.stat-card {
|
||||
background: var(--white);
|
||||
border-radius: 20px;
|
||||
padding: 36px 28px 32px;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
box-shadow: var(--card-shadow);
|
||||
cursor: default;
|
||||
opacity: 0;
|
||||
transform: translateY(50px) scale(0.97);
|
||||
transition:
|
||||
opacity 0.65s cubic-bezier(.16,1,.3,1),
|
||||
transform 0.65s cubic-bezier(.16,1,.3,1),
|
||||
box-shadow 0.3s ease;
|
||||
}
|
||||
|
||||
.stat-card:nth-child(1) { transition-delay: 0.1s; }
|
||||
.stat-card:nth-child(2) { transition-delay: 0.25s; }
|
||||
.stat-card:nth-child(3) { transition-delay: 0.4s; }
|
||||
|
||||
.in-view .stat-card {
|
||||
opacity: 1;
|
||||
transform: translateY(0) scale(1);
|
||||
}
|
||||
|
||||
.stat-card:hover {
|
||||
box-shadow: var(--card-shadow-hover);
|
||||
transform: translateY(-6px) scale(1.01) !important;
|
||||
}
|
||||
|
||||
/* Corner accent stripe */
|
||||
.stat-card::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0; left: 0; right: 0;
|
||||
height: 3px;
|
||||
background: linear-gradient(90deg, var(--red), transparent);
|
||||
transform: scaleX(0);
|
||||
transform-origin: left;
|
||||
transition: transform 0.5s cubic-bezier(.16,1,.3,1);
|
||||
}
|
||||
|
||||
.stat-card:hover::before,
|
||||
.in-view .stat-card::before { transform: scaleX(1); }
|
||||
|
||||
/* Subtle radial glow on hover */
|
||||
.stat-card::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: -60px; left: -60px;
|
||||
width: 200px; height: 200px;
|
||||
background: radial-gradient(circle, rgba(232,55,42,0.06) 0%, transparent 70%);
|
||||
opacity: 0;
|
||||
transition: opacity 0.4s ease;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.stat-card:hover::after { opacity: 1; }
|
||||
|
||||
/* ─── ICON ─── */
|
||||
.card-icon-wrap {
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
border-radius: 16px;
|
||||
background: var(--red-light);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-bottom: 28px;
|
||||
transition: transform 0.35s cubic-bezier(.16,1,.3,1), background 0.3s;
|
||||
}
|
||||
|
||||
.stat-card:hover .card-icon-wrap {
|
||||
transform: rotate(-6deg) scale(1.1);
|
||||
background: var(--red);
|
||||
}
|
||||
|
||||
.card-icon-wrap svg {
|
||||
width: 26px;
|
||||
height: 26px;
|
||||
stroke: var(--red);
|
||||
fill: none;
|
||||
stroke-width: 2;
|
||||
stroke-linecap: round;
|
||||
stroke-linejoin: round;
|
||||
transition: stroke 0.3s;
|
||||
}
|
||||
|
||||
.stat-card:hover .card-icon-wrap svg { stroke: #fff; }
|
||||
|
||||
/* ─── NUMBER COUNTER ─── */
|
||||
.card-number {
|
||||
font-family: 'Manrope', sans-serif;
|
||||
font-size: 56px;
|
||||
font-weight: 800;
|
||||
color: var(--dark);
|
||||
line-height: 1;
|
||||
letter-spacing: -2px;
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
gap: 2px;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.card-number .suffix {
|
||||
font-size: 38px;
|
||||
font-weight: 700;
|
||||
color: var(--red);
|
||||
}
|
||||
|
||||
.card-label {
|
||||
font-size: 14.5px;
|
||||
color: var(--muted);
|
||||
line-height: 1.55;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
/* Progress bar accent */
|
||||
.card-bar {
|
||||
margin-top: 28px;
|
||||
height: 3px;
|
||||
border-radius: 3px;
|
||||
background: #ebebed;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.card-bar-fill {
|
||||
height: 100%;
|
||||
border-radius: 3px;
|
||||
background: linear-gradient(90deg, var(--red), #ff7b6e);
|
||||
width: 0%;
|
||||
transition: width 1.4s cubic-bezier(.16,1,.3,1);
|
||||
}
|
||||
|
||||
.in-view .stat-card:nth-child(1) .card-bar-fill { width: 73%; transition-delay: 0.8s; }
|
||||
.in-view .stat-card:nth-child(2) .card-bar-fill { width: 40%; transition-delay: 0.95s; }
|
||||
.in-view .stat-card:nth-child(3) .card-bar-fill { width: 60%; transition-delay: 1.1s; }
|
||||
|
||||
/* ─── FLOATING BADGE ─── */
|
||||
.float-badge {
|
||||
position: absolute;
|
||||
top: 20px;
|
||||
right: 20px;
|
||||
font-family: 'Manrope', sans-serif;
|
||||
font-size: 10px;
|
||||
font-weight: 700;
|
||||
letter-spacing: 2px;
|
||||
text-transform: uppercase;
|
||||
color: var(--red);
|
||||
background: var(--red-light);
|
||||
padding: 4px 10px;
|
||||
border-radius: 20px;
|
||||
opacity: 0;
|
||||
transform: translateY(-6px);
|
||||
transition: opacity 0.3s, transform 0.3s;
|
||||
}
|
||||
|
||||
.stat-card:hover .float-badge { opacity: 1; transform: translateY(0); }
|
||||
|
||||
/* ─── LARGE DESKTOP (1440px+) ─── */
|
||||
@media (min-width: 1440px) {
|
||||
|
||||
.problem-section {
|
||||
max-width: 1560px;
|
||||
padding: 60px 52px 60px;
|
||||
}
|
||||
|
||||
.problem-section::before {
|
||||
background-size: 90px 90px;
|
||||
}
|
||||
|
||||
.section-header {
|
||||
margin-bottom: 78px;
|
||||
}
|
||||
|
||||
.eyebrow {
|
||||
font-size: 13px;
|
||||
letter-spacing: 3.5px;
|
||||
gap: 12px;
|
||||
margin-bottom: 23px;
|
||||
}
|
||||
|
||||
.eyebrow::before,
|
||||
.eyebrow::after {
|
||||
width: 34px;
|
||||
}
|
||||
|
||||
.section-title {
|
||||
font-size: clamp(44px, 5.5vw, 78px);
|
||||
letter-spacing: -1.2px;
|
||||
}
|
||||
|
||||
.section-subtitle {
|
||||
font-size: 17px;
|
||||
max-width: 580px;
|
||||
margin-top: 25px;
|
||||
line-height: 1.78;
|
||||
}
|
||||
|
||||
.cards-grid {
|
||||
gap: 24px;
|
||||
}
|
||||
|
||||
.stat-card {
|
||||
border-radius: 22px;
|
||||
padding: 40px 32px 36px;
|
||||
}
|
||||
|
||||
.card-icon-wrap {
|
||||
width: 66px;
|
||||
height: 66px;
|
||||
border-radius: 18px;
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
.card-icon-wrap svg {
|
||||
width: 29px;
|
||||
height: 29px;
|
||||
}
|
||||
|
||||
.card-number {
|
||||
font-size: 60px;
|
||||
letter-spacing: -2.2px;
|
||||
margin-bottom: 14px;
|
||||
}
|
||||
|
||||
.card-number .suffix {
|
||||
font-size: 41px;
|
||||
}
|
||||
|
||||
.card-label {
|
||||
font-size: 15.5px;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.card-bar {
|
||||
margin-top: 30px;
|
||||
height: 3px;
|
||||
}
|
||||
|
||||
.float-badge {
|
||||
font-size: 11px;
|
||||
letter-spacing: 2.2px;
|
||||
padding: 4px 12px;
|
||||
top: 22px;
|
||||
right: 22px;
|
||||
}
|
||||
}
|
||||
|
||||
/* ─── EXTRA-LARGE DESKTOP (1920px+) ─── */
|
||||
@media (min-width: 1920px) {
|
||||
|
||||
.problem-section {
|
||||
max-width: 1780px;
|
||||
padding: 72px 64px 72px;
|
||||
}
|
||||
|
||||
.problem-section::before {
|
||||
background-size: 100px 100px;
|
||||
}
|
||||
|
||||
.section-header {
|
||||
margin-bottom: 88px;
|
||||
}
|
||||
|
||||
.eyebrow {
|
||||
font-size: 14px;
|
||||
letter-spacing: 3.8px;
|
||||
gap: 13px;
|
||||
margin-bottom: 26px;
|
||||
}
|
||||
|
||||
.eyebrow::before,
|
||||
.eyebrow::after {
|
||||
width: 38px;
|
||||
}
|
||||
|
||||
.section-title {
|
||||
font-size: clamp(50px, 5.2vw, 84px);
|
||||
letter-spacing: -1.4px;
|
||||
}
|
||||
|
||||
.section-subtitle {
|
||||
font-size: 18px;
|
||||
max-width: 640px;
|
||||
margin-top: 28px;
|
||||
line-height: 1.8;
|
||||
}
|
||||
|
||||
.cards-grid {
|
||||
gap: 28px;
|
||||
}
|
||||
|
||||
.stat-card {
|
||||
border-radius: 24px;
|
||||
padding: 44px 36px 40px;
|
||||
}
|
||||
|
||||
.card-icon-wrap {
|
||||
width: 72px;
|
||||
height: 72px;
|
||||
border-radius: 20px;
|
||||
margin-bottom: 34px;
|
||||
}
|
||||
|
||||
.card-icon-wrap svg {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
}
|
||||
|
||||
.card-number {
|
||||
font-size: 64px;
|
||||
letter-spacing: -2.4px;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
.card-number .suffix {
|
||||
font-size: 44px;
|
||||
}
|
||||
|
||||
.card-label {
|
||||
font-size: 16.5px;
|
||||
line-height: 1.62;
|
||||
}
|
||||
|
||||
.card-bar {
|
||||
margin-top: 34px;
|
||||
height: 3.5px;
|
||||
}
|
||||
|
||||
.float-badge {
|
||||
font-size: 11.5px;
|
||||
letter-spacing: 2.4px;
|
||||
padding: 5px 13px;
|
||||
top: 23px;
|
||||
right: 23px;
|
||||
}
|
||||
}
|
||||
|
||||
/* ─── ULTRA-WIDE (2560px+) ─── */
|
||||
@media (min-width: 2560px) {
|
||||
|
||||
/* Section wrapper — wider container, more breathing room */
|
||||
.problem-section {
|
||||
max-width: 2000px;
|
||||
padding: 80px 72px 80px;
|
||||
}
|
||||
|
||||
/* Grid lines scale up */
|
||||
.problem-section::before {
|
||||
background-size: 110px 110px;
|
||||
}
|
||||
|
||||
/* Header spacing */
|
||||
.section-header {
|
||||
margin-bottom: 96px;
|
||||
}
|
||||
|
||||
/* Eyebrow */
|
||||
.eyebrow {
|
||||
font-size: 15px;
|
||||
letter-spacing: 4px;
|
||||
gap: 14px;
|
||||
margin-bottom: 28px;
|
||||
}
|
||||
|
||||
.eyebrow::before,
|
||||
.eyebrow::after {
|
||||
width: 42px;
|
||||
}
|
||||
|
||||
/* Section title */
|
||||
.section-title {
|
||||
font-size: clamp(56px, 5vw, 88px);
|
||||
letter-spacing: -1.5px;
|
||||
}
|
||||
|
||||
/* Subtitle */
|
||||
.section-subtitle {
|
||||
font-size: 19px;
|
||||
max-width: 680px;
|
||||
margin-top: 30px;
|
||||
line-height: 1.8;
|
||||
}
|
||||
|
||||
/* Stat cards grid — wider gaps */
|
||||
.cards-grid {
|
||||
gap: 32px;
|
||||
}
|
||||
|
||||
/* Individual cards — more internal space */
|
||||
.stat-card {
|
||||
border-radius: 24px;
|
||||
padding: 48px 38px 42px;
|
||||
}
|
||||
|
||||
/* Icon */
|
||||
.card-icon-wrap {
|
||||
width: 76px;
|
||||
height: 76px;
|
||||
border-radius: 20px;
|
||||
margin-bottom: 36px;
|
||||
}
|
||||
|
||||
.card-icon-wrap svg {
|
||||
width: 34px;
|
||||
height: 34px;
|
||||
}
|
||||
|
||||
/* Number counter */
|
||||
.card-number {
|
||||
font-size: 68px;
|
||||
letter-spacing: -2.5px;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.card-number .suffix {
|
||||
font-size: 46px;
|
||||
}
|
||||
|
||||
/* Card label */
|
||||
.card-label {
|
||||
font-size: 17px;
|
||||
line-height: 1.65;
|
||||
}
|
||||
|
||||
/* Progress bar */
|
||||
.card-bar {
|
||||
margin-top: 36px;
|
||||
height: 4px;
|
||||
}
|
||||
|
||||
/* Floating badge */
|
||||
.float-badge {
|
||||
font-size: 12px;
|
||||
letter-spacing: 2.5px;
|
||||
padding: 5px 14px;
|
||||
top: 24px;
|
||||
right: 24px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<section class="problem-section" id="problem">
|
||||
<div class="section-header">
|
||||
<div class="eyebrow">The Problem</div>
|
||||
<h2 class="section-title">Fragmented Logistics<br>is <em>Broken</em></h2>
|
||||
<p class="section-subtitle">When first, mid, and last mile operate independently, nobody owns the outcome. Handoffs become failure points. Delays cascade.</p>
|
||||
</div>
|
||||
|
||||
<div class="cards-grid">
|
||||
|
||||
<!-- Card 1 -->
|
||||
<div class="stat-card">
|
||||
<span class="float-badge">Critical</span>
|
||||
<div class="card-icon-wrap">
|
||||
<svg viewBox="0 0 24 24">
|
||||
<path d="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"/>
|
||||
<line x1="12" y1="9" x2="12" y2="13"/>
|
||||
<line x1="12" y1="17" x2="12.01" y2="17"/>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="card-number">
|
||||
<span class="counter" data-target="73">0</span><span class="suffix">%</span>
|
||||
</div>
|
||||
<div class="card-label">of delays happen at handoffs between logistics segments</div>
|
||||
<div class="card-bar"><div class="card-bar-fill"></div></div>
|
||||
</div>
|
||||
|
||||
<!-- Card 2 -->
|
||||
<div class="stat-card">
|
||||
<span class="float-badge">High Risk</span>
|
||||
<div class="card-icon-wrap">
|
||||
<svg viewBox="0 0 24 24">
|
||||
<polyline points="22 7 13.5 15.5 8.5 10.5 2 17"/>
|
||||
<polyline points="16 7 22 7 22 13"/>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="card-number">
|
||||
<span class="counter" data-target="40">0</span><span class="suffix">%</span>
|
||||
</div>
|
||||
<div class="card-label">of all shipments require manual intervention to complete delivery</div>
|
||||
<div class="card-bar"><div class="card-bar-fill"></div></div>
|
||||
</div>
|
||||
|
||||
<!-- Card 3 -->
|
||||
<div class="stat-card">
|
||||
<span class="float-badge">Inefficiency</span>
|
||||
<div class="card-icon-wrap">
|
||||
<svg viewBox="0 0 24 24">
|
||||
<circle cx="12" cy="12" r="10"/>
|
||||
<polyline points="12 6 12 12 16 14"/>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="card-number">
|
||||
<span class="counter" data-target="2" data-decimals="1" data-step="0.1">0</span><span class="suffix">x</span>
|
||||
</div>
|
||||
<div class="card-label">more time wasted on coordination across fragmented logistics providers</div>
|
||||
<div class="card-bar"><div class="card-bar-fill"></div></div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<script>
|
||||
// ─── INTERSECTION OBSERVER ───
|
||||
const section = document.getElementById('problem');
|
||||
|
||||
const observer = new IntersectionObserver(entries => {
|
||||
entries.forEach(entry => {
|
||||
if (entry.isIntersecting) {
|
||||
entry.target.classList.add('in-view');
|
||||
startCounters();
|
||||
observer.unobserve(entry.target);
|
||||
}
|
||||
});
|
||||
}, { threshold: 0.2 });
|
||||
|
||||
observer.observe(section);
|
||||
|
||||
// Auto-trigger since we're in a standalone demo
|
||||
setTimeout(() => {
|
||||
section.classList.add('in-view');
|
||||
startCounters();
|
||||
}, 300);
|
||||
|
||||
// ─── COUNTER ANIMATION ───
|
||||
function startCounters() {
|
||||
document.querySelectorAll('.counter').forEach(el => {
|
||||
const target = parseFloat(el.dataset.target);
|
||||
const decimals = parseInt(el.dataset.decimals || '0');
|
||||
const step = parseFloat(el.dataset.step || '1');
|
||||
const duration = 1800;
|
||||
const startTime = performance.now();
|
||||
|
||||
function update(now) {
|
||||
const elapsed = now - startTime;
|
||||
const progress = Math.min(elapsed / duration, 1);
|
||||
// Ease out expo
|
||||
const ease = progress === 1 ? 1 : 1 - Math.pow(2, -10 * progress);
|
||||
const current = ease * target;
|
||||
el.textContent = decimals > 0 ? current.toFixed(decimals) : Math.floor(current);
|
||||
if (progress < 1) requestAnimationFrame(update);
|
||||
}
|
||||
|
||||
requestAnimationFrame(update);
|
||||
});
|
||||
}
|
||||
|
||||
// ─── PARALLAX TILT ON CARDS ───
|
||||
document.querySelectorAll('.stat-card').forEach(card => {
|
||||
card.addEventListener('mousemove', e => {
|
||||
const rect = card.getBoundingClientRect();
|
||||
const x = (e.clientX - rect.left) / rect.width - 0.5;
|
||||
const y = (e.clientY - rect.top) / rect.height - 0.5;
|
||||
card.style.transform = `translateY(-6px) scale(1.01) rotateX(${-y * 5}deg) rotateY(${x * 5}deg)`;
|
||||
});
|
||||
card.addEventListener('mouseleave', () => {
|
||||
card.style.transform = '';
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
84
web/testimonials.php
Normal file
84
web/testimonials.php
Normal file
@@ -0,0 +1,84 @@
|
||||
<div class="elementor elementor-61">
|
||||
<div class="elementor-element elementor-element-de254c2 e-flex e-con-boxed cut-corner-no sticky-container-off e-con e-child" data-id="de254c2" data-element_type="container" data-settings="{"background_background":"classic"}">
|
||||
<div class="e-con-inner">
|
||||
<div class="elementor-element elementor-element-d5b30d0 e-con-full e-flex cut-corner-no sticky-container-off e-con e-child" data-id="d5b30d0" data-element_type="container">
|
||||
<div class="elementor-element elementor-element-609bbad e-con-full e-flex cut-corner-no sticky-container-off e-con e-child" data-id="609bbad" data-element_type="container">
|
||||
<div class="elementor-element elementor-element-e6879ea elementor-widget elementor-widget-image" data-id="e6879ea" data-element_type="widget" data-widget_type="image.default">
|
||||
<div class="elementor-widget-container">
|
||||
<img loading="lazy" decoding="async" width="491" height="373" src="https://8ded8880.delivery.rocketcdn.me/themes/logico-rounded/wp-content/uploads/2024/09/home2-pic-2.png" class="attachment-full size-full wp-image-4396" alt="" /> </div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="elementor-element elementor-element-ebf6c8d e-con-full e-flex cut-corner-no sticky-container-off e-con e-child" data-id="ebf6c8d" data-element_type="container">
|
||||
<div class="elementor-element elementor-element-1632aa3 elementor-widget elementor-widget-logico_testimonial_carousel" data-id="1632aa3" data-element_type="widget" data-widget_type="logico_testimonial_carousel.default">
|
||||
<div class="elementor-widget-container">
|
||||
|
||||
<div class="logico-testimonial-carousel-widget">
|
||||
<div class="testimonial-carousel-wrapper witch-icon">
|
||||
|
||||
<div class="testimonials-slider-container">
|
||||
|
||||
|
||||
|
||||
<div class="testimonials-slider owl-carousel owl-theme" data-slider-options="{"items":1,"itemsWidescreen":1,"itemsLaptop":1,"itemsTabletExtra":1,"itemsTablet":1,"itemsMobileExtra":1,"itemsMobile":1,"nav":false,"dots":true,"progress":true,"autoplayHoverPause":false,"autoplay":false,"autoplaySpeed":300,"autoplayTimeout":5000,"loop":true,"dragEndSpeed":500,"navSpeed":500,"dotsSpeed":500,"dotsContainer":".owl-dots-1632aa3","rtl":false}">
|
||||
<div class="testimonial-item slider-item">
|
||||
<div class="testimonial-text">
|
||||
<p>Halosaur duckbilled barracudina, goosefish gar pleco, chum salmon armoured catfish gudgeon sawfish whitefish orbicular batfish mummichog paradise fish! Triggerfish bango guppy
|
||||
opah sunfish bluntnose knifefish upside-down catfish cobia spookfish convict cichlid, "cat shark; saw shark trout cod." Pink salmon cherry salmon combtail gourami frigate
|
||||
mackerel snake mackerel upside-down shark</p>
|
||||
</div>
|
||||
<div class="testimonial-author-info">
|
||||
<div class="testimonial-author">Adrian Mitchel </div>
|
||||
<div class="testimonial-company">SolarInc</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="testimonial-item slider-item">
|
||||
<div class="testimonial-text">
|
||||
<p>Halosaur duckbilled barracudina, goosefish gar pleco, chum salmon armoured catfish gudgeon sawfish whitefish orbicular batfish mummichog paradise fish! Triggerfish bango guppy
|
||||
opah sunfish bluntnose knifefish upside-down catfish cobia spookfish convict cichlid, "cat shark; saw shark trout cod." Pink salmon cherry salmon combtail gourami frigate
|
||||
mackerel snake mackerel upside-down shark</p>
|
||||
</div>
|
||||
<div class="testimonial-author-info">
|
||||
<div class="testimonial-author">Adrian Mitchel </div>
|
||||
<div class="testimonial-company">SolarInc</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="testimonial-item slider-item">
|
||||
<div class="testimonial-text">
|
||||
<p>Halosaur duckbilled barracudina, goosefish gar pleco, chum salmon armoured catfish gudgeon sawfish whitefish orbicular batfish mummichog paradise fish! Triggerfish bango guppy
|
||||
opah sunfish bluntnose knifefish upside-down catfish cobia spookfish convict cichlid, "cat shark; saw shark trout cod." Pink salmon cherry salmon combtail gourami frigate
|
||||
mackerel snake mackerel upside-down shark</p>
|
||||
</div>
|
||||
<div class="testimonial-author-info">
|
||||
<div class="testimonial-author">Adrian Mitchel </div>
|
||||
<div class="testimonial-company">SolarInc</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="slider-footer slider-footer-view-outside slider-footer-position-after slider-footer-width-full">
|
||||
<div class="slider-footer-content">
|
||||
<div class="slider-pagination">
|
||||
<div class="slider-progress-wrapper"><span class="slider-progress-current">01</span> /<span class="slider-progress-all">01</span></div>
|
||||
<div class="owl-dots owl-dots-1632aa3"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- <div class="elementor-element elementor-element-ab691ea elementor-absolute elementor-widget elementor-widget-logico_decorative_block" data-id="ab691ea" data-element_type="widget" data-settings="{"_position":"absolute"}" data-widget_type="logico_decorative_block.default">
|
||||
<div class="elementor-widget-container">
|
||||
<div class="block-decoration animation-enable block-decoration-style-1">
|
||||
<div class="block-decoration-item">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div> -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
100
web/title_widget.php
Normal file
100
web/title_widget.php
Normal file
@@ -0,0 +1,100 @@
|
||||
|
||||
<!-- Animated Title Component -->
|
||||
<style>
|
||||
/* Scoped Styles for Animated Title */
|
||||
.title-widget-wrapper {
|
||||
width: 100%;
|
||||
max-width: 1100px;
|
||||
margin: 0 auto;
|
||||
text-align: left;
|
||||
padding-bottom: 10px;
|
||||
padding-top: 50px;
|
||||
}
|
||||
|
||||
.logico-animated-title {
|
||||
font-family: 'DM Sans', sans-serif;
|
||||
font-size: 2.8rem;
|
||||
font-weight: 800;
|
||||
line-height: 1.15;
|
||||
color: #111419;
|
||||
display: inline-block;
|
||||
overflow: hidden;
|
||||
margin: 0;
|
||||
text-transform: uppercase;
|
||||
max-width: 650px; /* Constrain width to force multi-line like the example */
|
||||
}
|
||||
|
||||
/* Animation States */
|
||||
.animated-ready .word {
|
||||
opacity: 0;
|
||||
transform: translateY(40px);
|
||||
display: inline-block;
|
||||
transition: all 0.8s cubic-bezier(0.2, 0.6, 0.4, 1);
|
||||
}
|
||||
|
||||
.animated-ready.is-animated .word {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
/* Staggering words */
|
||||
.animated-ready.is-animated .word:nth-child(1) { transition-delay: 0.1s; }
|
||||
.animated-ready.is-animated .word:nth-child(2) { transition-delay: 0.2s; }
|
||||
.animated-ready.is-animated .word:nth-child(3) { transition-delay: 0.3s; }
|
||||
.animated-ready.is-animated .word:nth-child(4) { transition-delay: 0.4s; }
|
||||
.animated-ready.is-animated .word:nth-child(5) { transition-delay: 0.5s; }
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.logico-animated-title {
|
||||
font-size: 2.2rem;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<div class="title-widget-wrapper">
|
||||
<div class="elementor-widget-container">
|
||||
<h3 id="animated-title-main" class="logico-title animated-ready logico-animated-title">
|
||||
<!-- Text will be split by JS -->
|
||||
Why MileTruth™ is Different
|
||||
</h3>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
(function() {
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
const titleEl = document.getElementById('animated-title-main');
|
||||
if (!titleEl) return;
|
||||
|
||||
// Split title into words for staggering
|
||||
const text = titleEl.innerText;
|
||||
const words = text.split(' ');
|
||||
titleEl.innerHTML = ''; // Clear original text
|
||||
|
||||
words.forEach(word => {
|
||||
const wordSpan = document.createElement('span');
|
||||
wordSpan.className = 'word';
|
||||
wordSpan.style.marginRight = '12px'; // Re-add space
|
||||
wordSpan.innerText = word;
|
||||
titleEl.appendChild(wordSpan);
|
||||
});
|
||||
|
||||
// Trigger animation after a slight delay
|
||||
setTimeout(() => {
|
||||
titleEl.classList.add('is-animated');
|
||||
}, 300);
|
||||
|
||||
// Re-trigger if scrolled into view (basic Intersection Observer)
|
||||
if ('IntersectionObserver' in window) {
|
||||
const observer = new IntersectionObserver((entries) => {
|
||||
entries.forEach(entry => {
|
||||
if (entry.isIntersecting) {
|
||||
entry.target.classList.add('is-animated');
|
||||
}
|
||||
});
|
||||
}, { threshold: 0.5 });
|
||||
observer.observe(titleEl);
|
||||
}
|
||||
});
|
||||
})();
|
||||
</script>
|
||||
97
web/vision.php
Normal file
97
web/vision.php
Normal file
@@ -0,0 +1,97 @@
|
||||
|
||||
<style>
|
||||
/* Vision & Mission Component Styles */
|
||||
.vm-section-wrapper {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
background: #ffffff;
|
||||
position: relative;
|
||||
font-family: 'DM Sans', sans-serif;
|
||||
}
|
||||
.vm-section {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
width: 100%;
|
||||
max-width: 1140px;
|
||||
padding: 80px 32px 90px;
|
||||
margin: 0 auto !important;
|
||||
}
|
||||
.vm-grid {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 28px;
|
||||
align-items: stretch;
|
||||
}
|
||||
.vm-card {
|
||||
position: relative;
|
||||
background: #f5f5f5;
|
||||
border: 1px solid #e0e0e0;
|
||||
border-radius: 28px;
|
||||
padding: 52px 48px 44px;
|
||||
overflow: hidden;
|
||||
box-shadow: 0 4px 20px rgba(17,20,25,0.06);
|
||||
transition: transform 0.44s cubic-bezier(0.34,1.56,0.64,1), box-shadow 0.44s ease;
|
||||
}
|
||||
.vm-card:hover {
|
||||
transform: translateY(-10px);
|
||||
box-shadow: 0 30px 64px rgba(192,32,42,0.13);
|
||||
}
|
||||
.vm-icon-wrap {
|
||||
width: 68px; height: 68px;
|
||||
margin-bottom: 36px;
|
||||
background: rgba(192,32,42,0.08);
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.vm-icon-wrap svg { width: 34px; height: 34px; }
|
||||
.vm-tag {
|
||||
font-size: 0.67rem;
|
||||
font-weight: 500;
|
||||
letter-spacing: 0.2em;
|
||||
text-transform: uppercase;
|
||||
color: #C0202A;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
.vm-title {
|
||||
font-family: 'Playfair Display', serif;
|
||||
font-size: 2rem;
|
||||
font-weight: 700;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.vm-title em { font-style: italic; color: #C0202A; }
|
||||
.vm-body {
|
||||
font-size: 1rem;
|
||||
font-weight: 300;
|
||||
color: #4d5261;
|
||||
line-height: 1.8;
|
||||
}
|
||||
@media (max-width: 768px) {
|
||||
.vm-grid { grid-template-columns: 1fr; }
|
||||
}
|
||||
</style>
|
||||
|
||||
<div class="vm-section-wrapper">
|
||||
<section class="vm-section">
|
||||
<div class="vm-grid">
|
||||
<article class="vm-card">
|
||||
<div class="vm-icon-wrap">
|
||||
<svg viewBox="0 0 36 36" fill="none" xmlns="http://www.w3.org/2000/svg"><ellipse cx="18" cy="18" rx="14" ry="9" stroke="#C0202A" stroke-width="2.1"/><circle cx="18" cy="18" r="4" stroke="#C0202A" stroke-width="2.1"/><circle cx="18" cy="18" r="1.4" fill="#C0202A"/></svg>
|
||||
</div>
|
||||
<p class="vm-tag">Vision</p>
|
||||
<h3 class="vm-title">Our <em>Vision</em></h3>
|
||||
<p class="vm-body">To become India's most trusted connected logistics platform, where every package travels on a single, transparent timeline.</p>
|
||||
</article>
|
||||
<article class="vm-card">
|
||||
<div class="vm-icon-wrap">
|
||||
<svg viewBox="0 0 36 36" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M8 28 L14 22 Q16 14 24 8 Q30 6 30 6 Q28 12 22 20 L16 26 Z" stroke="#C0202A" stroke-width="2.1" stroke-linejoin="round"/><circle cx="19" cy="17" r="2.4" fill="#C0202A" opacity="0.35"/></svg>
|
||||
</div>
|
||||
<p class="vm-tag">Mission</p>
|
||||
<h3 class="vm-title">Our <em>Mission</em></h3>
|
||||
<p class="vm-body">To eliminate the chaos of fragmented logistics by unifying first, mid, and last miles with MileTruth™ AI.</p>
|
||||
</article>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
5
web/wc-add-to-cart-js-extra.html
Normal file
5
web/wc-add-to-cart-js-extra.html
Normal file
@@ -0,0 +1,5 @@
|
||||
/*
|
||||
<![CDATA[ */
|
||||
var wc_add_to_cart_params = {"ajax_url":"/themes/logico-rounded/wp-admin/admin-ajax.php","wc_ajax_url":"/themes/logico-rounded/?wc-ajax=%%endpoint%%","i18n_view_cart":"View cart","cart_url":"https://demo.artureanec.com/themes/logico-rounded/cart/","is_cart":"","cart_redirect_after_add":"no"};
|
||||
//# sourceURL=wc-add-to-cart-js-extra
|
||||
/* ]]>*/
|
||||
5
web/wc-order-attribution-js-extra.html
Normal file
5
web/wc-order-attribution-js-extra.html
Normal file
@@ -0,0 +1,5 @@
|
||||
/*
|
||||
<![CDATA[ */
|
||||
var wc_order_attribution = {"params":{"lifetime":1.0000000000000000818030539140313095458623138256371021270751953125e-5,"session":30,"base64":false,"ajaxurl":"https://demo.artureanec.com/themes/logico-rounded/wp-admin/admin-ajax.php","prefix":"wc_order_attribution_","allowTracking":true},"fields":{"source_type":"current.typ","referrer":"current_add.rf","utm_campaign":"current.cmp","utm_source":"current.src","utm_medium":"current.mdm","utm_content":"current.cnt","utm_id":"current.id","utm_term":"current.trm","utm_source_platform":"current.plt","utm_creative_format":"current.fmt","utm_marketing_tactic":"current.tct","session_entry":"current_add.ep","session_start_time":"current_add.fd","session_pages":"session.pgs","session_count":"udata.vst","user_agent":"udata.uag"}};
|
||||
//# sourceURL=wc-order-attribution-js-extra
|
||||
/* ]]>*/
|
||||
484
web/why_miletruth.php
Normal file
484
web/why_miletruth.php
Normal file
@@ -0,0 +1,484 @@
|
||||
<link href="https://fonts.googleapis.com/css2?family=Barlow:wght@400;500;600&family=Barlow+Condensed:wght@600;700;800;900&display=swap" rel="stylesheet">
|
||||
|
||||
<style>
|
||||
/* ══════════════════════════════════════
|
||||
SCOPED TO .mt-section — NO GLOBALS
|
||||
══════════════════════════════════════ */
|
||||
.mt-section *, .mt-section *::before, .mt-section *::after { box-sizing: border-box; }
|
||||
|
||||
.mt-section {
|
||||
--mt-red: #c01227;
|
||||
--mt-red-dk: #8f0d1d;
|
||||
--mt-red-light: #fdf0f2;
|
||||
--mt-red-mid: rgba(192,18,39,0.1);
|
||||
--mt-dark: #111827;
|
||||
--mt-mid: #374151;
|
||||
--mt-muted: #9ca3af;
|
||||
--mt-border: rgba(0,0,0,0.07);
|
||||
--mt-white: #ffffff;
|
||||
--mt-bg: #f3f4f7;
|
||||
|
||||
width: 100%;
|
||||
font-family: 'Barlow', sans-serif;
|
||||
color: var(--mt-dark);
|
||||
background: var(--mt-bg);
|
||||
}
|
||||
|
||||
/* ══ STATS BANNER ══ */
|
||||
.mt-banner {
|
||||
background: linear-gradient(135deg, var(--mt-red) 0%, var(--mt-red-dk) 100%);
|
||||
padding: 0px 40px;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* animated diagonal shine */
|
||||
.mt-banner::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: -80px; left: -120px;
|
||||
width: 300px; height: 300px;
|
||||
background: radial-gradient(circle, rgba(255,255,255,0.12) 0%, transparent 70%);
|
||||
pointer-events: none;
|
||||
}
|
||||
.mt-banner::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
bottom: -60px; right: -60px;
|
||||
width: 220px; height: 220px;
|
||||
background: radial-gradient(circle, rgba(255,255,255,0.07) 0%, transparent 70%);
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.mt-stat {
|
||||
padding: 36px 20px;
|
||||
text-align: center;
|
||||
position: relative;
|
||||
opacity: 0;
|
||||
transform: translateY(24px);
|
||||
transition: opacity .55s ease, transform .55s cubic-bezier(.16,1,.3,1);
|
||||
}
|
||||
.mt-stat:not(:last-child)::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
right: 0; top: 25%; bottom: 25%;
|
||||
width: 1px;
|
||||
background: rgba(255,255,255,0.2);
|
||||
}
|
||||
|
||||
.mt-section.mt-live .mt-stat:nth-child(1) { opacity:1; transform:translateY(0); transition-delay:.1s; }
|
||||
.mt-section.mt-live .mt-stat:nth-child(2) { opacity:1; transform:translateY(0); transition-delay:.22s; }
|
||||
.mt-section.mt-live .mt-stat:nth-child(3) { opacity:1; transform:translateY(0); transition-delay:.34s; }
|
||||
.mt-section.mt-live .mt-stat:nth-child(4) { opacity:1; transform:translateY(0); transition-delay:.46s; }
|
||||
|
||||
.mt-stat-num {
|
||||
font-family: 'Barlow Condensed', sans-serif;
|
||||
font-size: clamp(36px, 4.5vw, 54px);
|
||||
font-weight: 700;
|
||||
color: #fff;
|
||||
line-height: 1;
|
||||
letter-spacing: -1px;
|
||||
display: block;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
.mt-stat-label {
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
color: rgba(255,255,255,0.72);
|
||||
letter-spacing: .5px;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
/* ══ BODY SECTION ══ */
|
||||
.mt-body {
|
||||
max-width: 1100px;
|
||||
margin: 0 auto;
|
||||
padding: 88px 40px 20px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
/* grid background */
|
||||
.mt-body::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background-image:
|
||||
linear-gradient(to right, rgba(0,0,0,0.032) 1px, transparent 1px),
|
||||
linear-gradient(to bottom, rgba(0,0,0,0.032) 1px, transparent 1px);
|
||||
background-size: 68px 68px;
|
||||
pointer-events: none;
|
||||
mask-image: radial-gradient(ellipse 88% 80% at 50% 40%, black 30%, transparent 100%);
|
||||
-webkit-mask-image: radial-gradient(ellipse 88% 80% at 50% 40%, black 30%, transparent 100%);
|
||||
}
|
||||
|
||||
/* ── HEADER ── */
|
||||
.mt-header {
|
||||
text-align: center;
|
||||
margin-bottom: 64px;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.mt-eyebrow {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
font-family: 'Barlow Condensed', sans-serif;
|
||||
font-size: 11px;
|
||||
font-weight: 700;
|
||||
letter-spacing: 3.5px;
|
||||
text-transform: uppercase;
|
||||
color: var(--mt-red);
|
||||
margin-bottom: 18px;
|
||||
opacity: 0;
|
||||
transform: translateY(16px);
|
||||
transition: opacity .55s ease .05s, transform .55s ease .05s;
|
||||
}
|
||||
.mt-eyebrow::before, .mt-eyebrow::after {
|
||||
content: ''; display: block;
|
||||
width: 28px; height: 1px;
|
||||
background: var(--mt-red);
|
||||
}
|
||||
|
||||
.mt-title {
|
||||
font-family: 'Barlow Condensed', sans-serif;
|
||||
font-size: clamp(34px, 5vw, 60px);
|
||||
font-weight: 900;
|
||||
line-height: 1.05;
|
||||
letter-spacing: -1.2px;
|
||||
color: var(--mt-dark);
|
||||
margin: 0 0 18px;
|
||||
opacity: 0;
|
||||
transform: translateY(26px);
|
||||
transition: opacity .65s ease .17s, transform .65s ease .17s;
|
||||
}
|
||||
.mt-title em { font-style: normal; color: var(--mt-red); }
|
||||
.mt-title sup {
|
||||
font-size: .45em;
|
||||
font-weight: 700;
|
||||
vertical-align: super;
|
||||
color: var(--mt-red);
|
||||
}
|
||||
|
||||
.mt-desc {
|
||||
font-size: 15.5px;
|
||||
color: var(--mt-muted);
|
||||
line-height: 1.75;
|
||||
max-width: 540px;
|
||||
margin: 0 auto;
|
||||
opacity: 0;
|
||||
transform: translateY(16px);
|
||||
transition: opacity .65s ease .3s, transform .65s ease .3s;
|
||||
}
|
||||
|
||||
/* in-view header */
|
||||
.mt-section.mt-live .mt-eyebrow { opacity: 1; transform: translateY(0); }
|
||||
.mt-section.mt-live .mt-title { opacity: 1; transform: translateY(0); }
|
||||
.mt-section.mt-live .mt-desc { opacity: 1; transform: translateY(0); display: inline-block; }
|
||||
|
||||
/* ── FEATURE GRID ── */
|
||||
.mt-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
gap: 20px;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.mt-card {
|
||||
background: var(--mt-white);
|
||||
border-radius: 20px;
|
||||
padding: 34px 28px 30px;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
box-shadow: 0 2px 20px rgba(0,0,0,0.065);
|
||||
cursor: default;
|
||||
opacity: 0;
|
||||
transform: translateY(40px) scale(.98);
|
||||
transition:
|
||||
opacity .6s cubic-bezier(.16,1,.3,1),
|
||||
transform .6s cubic-bezier(.16,1,.3,1),
|
||||
box-shadow .3s ease;
|
||||
}
|
||||
|
||||
/* staggered card reveals */
|
||||
.mt-section.mt-live .mt-card:nth-child(1) { opacity:1; transform:translateY(0) scale(1); transition-delay:.42s; }
|
||||
.mt-section.mt-live .mt-card:nth-child(2) { opacity:1; transform:translateY(0) scale(1); transition-delay:.54s; }
|
||||
.mt-section.mt-live .mt-card:nth-child(3) { opacity:1; transform:translateY(0) scale(1); transition-delay:.66s; }
|
||||
.mt-section.mt-live .mt-card:nth-child(4) { opacity:1; transform:translateY(0) scale(1); transition-delay:.78s; }
|
||||
.mt-section.mt-live .mt-card:nth-child(5) { opacity:1; transform:translateY(0) scale(1); transition-delay:.90s; }
|
||||
.mt-section.mt-live .mt-card:nth-child(6) { opacity:1; transform:translateY(0) scale(1); transition-delay:1.02s; }
|
||||
|
||||
/* top accent bar on hover */
|
||||
.mt-card::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0; left: 0; right: 0;
|
||||
height: 3px;
|
||||
background: linear-gradient(90deg, var(--mt-red), transparent);
|
||||
transform: scaleX(0);
|
||||
transform-origin: left;
|
||||
transition: transform .45s cubic-bezier(.16,1,.3,1);
|
||||
}
|
||||
.mt-card:hover::before { transform: scaleX(1); }
|
||||
|
||||
/* background glow */
|
||||
.mt-card::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: -40px; left: -40px;
|
||||
width: 160px; height: 160px;
|
||||
background: radial-gradient(circle, rgba(192,18,39,0.06) 0%, transparent 70%);
|
||||
opacity: 0;
|
||||
transition: opacity .4s ease;
|
||||
pointer-events: none;
|
||||
}
|
||||
.mt-card:hover::after { opacity: 1; }
|
||||
|
||||
.mt-card:hover {
|
||||
box-shadow: 0 16px 52px rgba(192,18,39,0.12);
|
||||
transform: translateY(-5px) scale(1.01) !important;
|
||||
}
|
||||
|
||||
/* icon */
|
||||
.mt-card-icon {
|
||||
width: 52px; height: 52px;
|
||||
border-radius: 14px;
|
||||
background: var(--mt-red-light);
|
||||
display: flex; align-items: center; justify-content: center;
|
||||
margin-bottom: 20px;
|
||||
transition: transform .35s cubic-bezier(.16,1,.3,1), background .3s;
|
||||
}
|
||||
.mt-card:hover .mt-card-icon {
|
||||
transform: rotate(-8deg) scale(1.1);
|
||||
background: var(--mt-red);
|
||||
}
|
||||
.mt-card-icon svg {
|
||||
width: 22px; height: 22px;
|
||||
stroke: var(--mt-red); fill: none;
|
||||
stroke-width: 1.9;
|
||||
stroke-linecap: round; stroke-linejoin: round;
|
||||
transition: stroke .3s;
|
||||
}
|
||||
.mt-card:hover .mt-card-icon svg { stroke: #fff; }
|
||||
|
||||
/* card text */
|
||||
.mt-card-name {
|
||||
font-family: 'Barlow Condensed', sans-serif;
|
||||
font-size: 19px;
|
||||
font-weight: 800;
|
||||
letter-spacing: -.3px;
|
||||
color: var(--mt-dark);
|
||||
margin: 0 0 10px;
|
||||
}
|
||||
.mt-card-desc {
|
||||
font-size: 13.5px;
|
||||
line-height: 1.65;
|
||||
color: var(--mt-muted);
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/* card bottom tag */
|
||||
.mt-card-tag {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 5px;
|
||||
margin-top: 18px;
|
||||
font-family: 'Barlow Condensed', sans-serif;
|
||||
font-size: 10px;
|
||||
font-weight: 700;
|
||||
letter-spacing: 1.8px;
|
||||
text-transform: uppercase;
|
||||
color: var(--mt-red);
|
||||
opacity: 0;
|
||||
transform: translateX(-6px);
|
||||
transition: opacity .3s, transform .3s;
|
||||
}
|
||||
.mt-card-tag::after {
|
||||
content: '';
|
||||
display: block;
|
||||
width: 16px; height: 1px;
|
||||
background: var(--mt-red);
|
||||
transition: width .35s cubic-bezier(.16,1,.3,1);
|
||||
}
|
||||
.mt-card:hover .mt-card-tag { opacity: 1; transform: translateX(0); }
|
||||
.mt-card:hover .mt-card-tag::after { width: 26px; }
|
||||
|
||||
/* ── RESPONSIVE ── */
|
||||
@media (max-width: 860px) {
|
||||
.mt-banner { grid-template-columns: repeat(2, 1fr); padding: 0 20px; }
|
||||
.mt-stat:nth-child(2)::after { display: none; }
|
||||
.mt-grid { grid-template-columns: repeat(2, 1fr); }
|
||||
.mt-body { padding: 60px 20px 70px; }
|
||||
}
|
||||
@media (max-width: 540px) {
|
||||
.mt-grid { grid-template-columns: 1fr; }
|
||||
.mt-banner { grid-template-columns: repeat(2, 1fr); }
|
||||
}
|
||||
</style>
|
||||
|
||||
<!-- ══ SECTION HTML ══ -->
|
||||
<div class="mt-section" id="mt-miletruth">
|
||||
|
||||
<!-- Stats Banner -->
|
||||
<div class="mt-banner">
|
||||
<div class="mt-stat">
|
||||
<span class="mt-stat-num" data-target="4" data-suffix="-6hrs">0</span>
|
||||
<span class="mt-stat-label">Advance Warning</span>
|
||||
</div>
|
||||
<div class="mt-stat">
|
||||
<span class="mt-stat-num" data-target="98" data-suffix="%">0</span>
|
||||
<span class="mt-stat-label">ETA Accuracy</span>
|
||||
</div>
|
||||
<div class="mt-stat">
|
||||
<span class="mt-stat-num" data-target="50" data-suffix="+">0</span>
|
||||
<span class="mt-stat-label">Data Variables</span>
|
||||
</div>
|
||||
<div class="mt-stat">
|
||||
<span class="mt-stat-num" data-target="30" data-suffix="%">0</span>
|
||||
<span class="mt-stat-label">Exception Reduction</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Body -->
|
||||
<div class="mt-body">
|
||||
|
||||
<!-- Header -->
|
||||
<div class="mt-header">
|
||||
<div class="mt-eyebrow">AI Intelligence</div>
|
||||
<h2 class="mt-title">Why <em>MileTruth</em><sup>™</sup> is Different</h2>
|
||||
<p class="mt-desc">Unlike generic AI tools, MileTruth™ is trained exclusively on logistics data — millions of deliveries, routes, exceptions, and outcomes. It thinks like a logistics expert because it was built to be one.</p>
|
||||
</div>
|
||||
|
||||
<!-- Feature Cards -->
|
||||
<div class="mt-grid">
|
||||
|
||||
<!-- 1 -->
|
||||
<div class="mt-card">
|
||||
<div class="mt-card-icon">
|
||||
<svg viewBox="0 0 24 24">
|
||||
<path d="M10.29 3.86L1.82 18a2 2 0 001.71 3h16.94a2 2 0 001.71-3L13.71 3.86a2 2 0 00-3.42 0z"/>
|
||||
<line x1="12" y1="9" x2="12" y2="13"/>
|
||||
<line x1="12" y1="17" x2="12.01" y2="17"/>
|
||||
</svg>
|
||||
</div>
|
||||
<h5 class="mt-card-name">Predictive Delay Detection</h5>
|
||||
<p class="mt-card-desc">AI analyses 50+ variables to predict delays 4–6 hours before they occur, giving you time to act.</p>
|
||||
<div class="mt-card-tag">Learn More</div>
|
||||
</div>
|
||||
|
||||
<!-- 2 -->
|
||||
<div class="mt-card">
|
||||
<div class="mt-card-icon">
|
||||
<svg viewBox="0 0 24 24">
|
||||
<circle cx="12" cy="12" r="3"/>
|
||||
<path d="M19.07 4.93a10 10 0 010 14.14M4.93 4.93a10 10 0 000 14.14"/>
|
||||
<path d="M15.54 8.46a5 5 0 010 7.07M8.46 8.46a5 5 0 000 7.07"/>
|
||||
</svg>
|
||||
</div>
|
||||
<h5 class="mt-card-name">Smart Route Optimisation</h5>
|
||||
<p class="mt-card-desc">Real-time traffic, weather, and capacity data feed into dynamic routing that adapts on the fly.</p>
|
||||
<div class="mt-card-tag">Learn More</div>
|
||||
</div>
|
||||
|
||||
<!-- 3 -->
|
||||
<div class="mt-card">
|
||||
<div class="mt-card-icon">
|
||||
<svg viewBox="0 0 24 24">
|
||||
<circle cx="12" cy="12" r="10"/>
|
||||
<polyline points="12 6 12 12 16 14"/>
|
||||
</svg>
|
||||
</div>
|
||||
<h5 class="mt-card-name">Accurate ETA Predictions</h5>
|
||||
<p class="mt-card-desc">Machine learning models trained on millions of deliveries provide 98% accurate arrival times.</p>
|
||||
<div class="mt-card-tag">Learn More</div>
|
||||
</div>
|
||||
|
||||
<!-- 4 -->
|
||||
<div class="mt-card">
|
||||
<div class="mt-card-icon">
|
||||
<svg viewBox="0 0 24 24">
|
||||
<polyline points="22 12 18 12 15 21 9 3 6 12 2 12"/>
|
||||
</svg>
|
||||
</div>
|
||||
<h5 class="mt-card-name">Exception Management</h5>
|
||||
<p class="mt-card-desc">Automatic escalation protocols trigger when deliveries deviate from expected patterns.</p>
|
||||
<div class="mt-card-tag">Learn More</div>
|
||||
</div>
|
||||
|
||||
<!-- 5 -->
|
||||
<div class="mt-card">
|
||||
<div class="mt-card-icon">
|
||||
<svg viewBox="0 0 24 24">
|
||||
<line x1="18" y1="20" x2="18" y2="10"/>
|
||||
<line x1="12" y1="20" x2="12" y2="4"/>
|
||||
<line x1="6" y1="20" x2="6" y2="14"/>
|
||||
</svg>
|
||||
</div>
|
||||
<h5 class="mt-card-name">Performance Analytics</h5>
|
||||
<p class="mt-card-desc">Deep insights into carrier performance, route efficiency, and cost optimisation opportunities.</p>
|
||||
<div class="mt-card-tag">Learn More</div>
|
||||
</div>
|
||||
|
||||
<!-- 6 -->
|
||||
<div class="mt-card">
|
||||
<div class="mt-card-icon">
|
||||
<svg viewBox="0 0 24 24">
|
||||
<polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2"/>
|
||||
</svg>
|
||||
</div>
|
||||
<h5 class="mt-card-name">Automated Recommendations</h5>
|
||||
<p class="mt-card-desc">AI suggests carrier selection, consolidation opportunities, and capacity planning adjustments.</p>
|
||||
<div class="mt-card-tag">Learn More</div>
|
||||
</div>
|
||||
|
||||
</div><!-- /mt-grid -->
|
||||
|
||||
</div><!-- /mt-body -->
|
||||
</div><!-- /mt-section -->
|
||||
|
||||
<script>
|
||||
(function () {
|
||||
var section = document.getElementById('mt-miletruth');
|
||||
if (!section) return;
|
||||
|
||||
var fired = false;
|
||||
|
||||
function activate() {
|
||||
if (fired) return;
|
||||
fired = true;
|
||||
section.classList.add('mt-live');
|
||||
animateCounters();
|
||||
}
|
||||
|
||||
/* ── counter animation ── */
|
||||
function animateCounters() {
|
||||
section.querySelectorAll('.mt-stat-num[data-target]').forEach(function (el) {
|
||||
var target = parseInt(el.dataset.target, 10);
|
||||
var suffix = el.dataset.suffix || '';
|
||||
var start = performance.now();
|
||||
var dur = 1600;
|
||||
|
||||
function tick(now) {
|
||||
var p = Math.min((now - start) / dur, 1);
|
||||
var ease = 1 - Math.pow(2, -10 * p);
|
||||
var val = Math.round(ease * target);
|
||||
el.textContent = val + suffix;
|
||||
if (p < 1) requestAnimationFrame(tick);
|
||||
}
|
||||
requestAnimationFrame(tick);
|
||||
});
|
||||
}
|
||||
|
||||
if ('IntersectionObserver' in window) {
|
||||
var io = new IntersectionObserver(function (entries) {
|
||||
entries.forEach(function (e) { if (e.isIntersecting) { activate(); io.unobserve(e.target); } });
|
||||
}, { threshold: 0.1 });
|
||||
io.observe(section);
|
||||
}
|
||||
|
||||
setTimeout(activate, 380);
|
||||
})();
|
||||
</script>
|
||||
230
web/women.php
Normal file
230
web/women.php
Normal file
@@ -0,0 +1,230 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<?php include 'head.php'; ?>
|
||||
<head>
|
||||
|
||||
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<?php
|
||||
$current_page = 'women';
|
||||
include 'header.php';
|
||||
?>
|
||||
|
||||
|
||||
<!-- ═══ HERO ═══ -->
|
||||
<section class="hero">
|
||||
<div class="hero-arc hero-arc-1"></div>
|
||||
<div class="hero-arc hero-arc-2"></div>
|
||||
<div class="hero-arc hero-arc-3"></div>
|
||||
|
||||
<div class="hero-inner">
|
||||
<div class="hero-badge">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||
<path d="M20.84 4.61a5.5 5.5 0 00-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 00-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 000-7.78z"/>
|
||||
</svg>
|
||||
ESG Initiative
|
||||
</div>
|
||||
|
||||
<h1 class="hero-title">
|
||||
Empowering <em>Women</em><br>in Logistics
|
||||
</h1>
|
||||
|
||||
<p class="hero-sub">
|
||||
At Doormile, we believe in creating equal opportunities. Our Women Entrepreneurship program is dedicated to training, supporting, and celebrating women who are transforming the last-mile delivery ecosystem.
|
||||
</p>
|
||||
|
||||
<a href="#" class="hero-cta">
|
||||
Join Our Program
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
|
||||
<line x1="5" y1="12" x2="19" y2="12"/><polyline points="12 5 19 12 12 19"/>
|
||||
</svg>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<!-- <div class="hero-scroll">
|
||||
<div class="scroll-line"></div>
|
||||
<span>Scroll</span>
|
||||
</div> -->
|
||||
</section>
|
||||
|
||||
<!-- ═══ STATS BAR ═══ -->
|
||||
<div class="stats-bar">
|
||||
<div class="stats-inner">
|
||||
<div class="stat-item reveal reveal-d1">
|
||||
<div class="stat-num">500 <span>+</span></div>
|
||||
<div class="stat-lbl">Women Entrepreneurs Trained</div>
|
||||
</div>
|
||||
<div class="stat-item reveal reveal-d2">
|
||||
<div class="stat-num">35 <span>%</span></div>
|
||||
<div class="stat-lbl">Of Our Fleet Partners</div>
|
||||
</div>
|
||||
<div class="stat-item reveal reveal-d3">
|
||||
<div class="stat-num">₹2 <span>Cr+</span></div>
|
||||
<div class="stat-lbl">Earnings Generated</div>
|
||||
</div>
|
||||
<div class="stat-item reveal reveal-d4">
|
||||
<div class="stat-num">15 </div>
|
||||
<div class="stat-lbl">Cities Covered</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- ═══ INITIATIVES ═══ -->
|
||||
<div class="initiatives">
|
||||
<div class="section-header reveal">
|
||||
<div class="section-eyebrow">What We Offer</div>
|
||||
<h2 class="section-title">Our Initiatives</h2>
|
||||
<p class="section-sub">Comprehensive programs designed to support women at every stage of their entrepreneurship journey.</p>
|
||||
</div>
|
||||
|
||||
<div class="init-grid">
|
||||
<article class="init-card reveal reveal-d1">
|
||||
<div class="init-icon">📚</div>
|
||||
<div class="init-content">
|
||||
<h3 class="init-title">Training & Development</h3>
|
||||
<p class="init-desc">Comprehensive training programs designed to equip women with logistics management skills, from route planning to customer service excellence.</p>
|
||||
</div>
|
||||
</article>
|
||||
<article class="init-card reveal reveal-d2">
|
||||
<div class="init-icon">💼</div>
|
||||
<div class="init-content">
|
||||
<h3 class="init-title">Business Support</h3>
|
||||
<p class="init-desc">Access to micro-financing, business mentorship, and operational support to help women entrepreneurs build sustainable delivery businesses.</p>
|
||||
</div>
|
||||
</article>
|
||||
<article class="init-card reveal reveal-d3">
|
||||
<div class="init-icon">🏆</div>
|
||||
<div class="init-content">
|
||||
<h3 class="init-title">Recognition Programs</h3>
|
||||
<p class="init-desc">Annual awards and recognition for top-performing women entrepreneurs, celebrating their achievements and inspiring others across the network.</p>
|
||||
</div>
|
||||
</article>
|
||||
<article class="init-card reveal reveal-d4">
|
||||
<div class="init-icon">🎯</div>
|
||||
<div class="init-content">
|
||||
<h3 class="init-title">Goal Setting & Metrics</h3>
|
||||
<p class="init-desc">Data-driven approach to track progress, set ambitious targets, and measure the real impact of our women empowerment initiatives.</p>
|
||||
</div>
|
||||
</article>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- ═══ SUCCESS STORIES ═══ -->
|
||||
<section class="stories-section">
|
||||
<div class="stories-inner">
|
||||
<div class="section-header reveal">
|
||||
<div class="section-eyebrow">Success Stories</div>
|
||||
<h2 class="section-title">Women Leading the Way</h2>
|
||||
<p class="section-sub">Meet the inspiring women who are redefining logistics in India.</p>
|
||||
</div>
|
||||
|
||||
<div class="stories-grid">
|
||||
|
||||
<!-- Story 1 -->
|
||||
<article class="story-card reveal reveal-d1">
|
||||
<div class="story-img-wrap">
|
||||
<img
|
||||
class="story-img"
|
||||
src="/logistic/assets/images/women_story_1.png"
|
||||
alt="Lakshmi Devi"
|
||||
loading="lazy"
|
||||
/>
|
||||
</div>
|
||||
<div class="story-body">
|
||||
<p class="story-role">Fleet Owner, Coimbatore</p>
|
||||
<h3 class="story-name">Lakshmi Devi</h3>
|
||||
<div class="story-location">
|
||||
<svg viewBox="0 0 24 24" fill="currentColor"><path d="M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5c-1.38 0-2.5-1.12-2.5-2.5S10.62 6.5 12 6.5s2.5 1.12 2.5 2.5S13.38 11.5 12 11.5z"/></svg>
|
||||
Tamil Nadu, Coimbatore
|
||||
</div>
|
||||
<div class="story-divider"></div>
|
||||
<p class="story-quote">Started with one e-rickshaw, now manages a fleet of 12 vehicles serving local businesses across the city.</p>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<!-- Story 2 -->
|
||||
<article class="story-card reveal reveal-d2">
|
||||
<div class="story-img-wrap">
|
||||
<img
|
||||
class="story-img"
|
||||
src="/logistic/assets/images/women_story_2.png"
|
||||
alt="Priya Sharma"
|
||||
loading="lazy"
|
||||
/>
|
||||
</div>
|
||||
<div class="story-body">
|
||||
<p class="story-role">Delivery Partner, Bengaluru</p>
|
||||
<h3 class="story-name">Priya Sharma</h3>
|
||||
<div class="story-location">
|
||||
<svg viewBox="0 0 24 24" fill="currentColor"><path d="M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5c-1.38 0-2.5-1.12-2.5-2.5S10.62 6.5 12 6.5s2.5 1.12 2.5 2.5S13.38 11.5 12 11.5z"/></svg>
|
||||
Karnataka, Bengaluru
|
||||
</div>
|
||||
<div class="story-divider"></div>
|
||||
<p class="story-quote">A single mother who found financial independence through Doormile's delivery network, now mentoring 30+ women.</p>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<!-- Story 3 -->
|
||||
<article class="story-card reveal reveal-d3">
|
||||
<div class="story-img-wrap">
|
||||
<img
|
||||
class="story-img"
|
||||
src="/logistic/assets/images/women_story_3.png"
|
||||
alt="Fatima Khan"
|
||||
loading="lazy"
|
||||
/>
|
||||
</div>
|
||||
<div class="story-body">
|
||||
<p class="story-role">Hub Manager, Hyderabad</p>
|
||||
<h3 class="story-name">Fatima Khan</h3>
|
||||
<div class="story-location">
|
||||
<svg viewBox="0 0 24 24" fill="currentColor"><path d="M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5c-1.38 0-2.5-1.12-2.5-2.5S10.62 6.5 12 6.5s2.5 1.12 2.5 2.5S13.38 11.5 12 11.5z"/></svg>
|
||||
Telangana, Hyderabad
|
||||
</div>
|
||||
<div class="story-divider"></div>
|
||||
<p class="story-quote">From delivery rider to managing a regional hub with 50+ partners in just 2 years through sheer determination.</p>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- ═══ CTA ═══ -->
|
||||
<section class="cta-section">
|
||||
<div class="cta-circle cta-circle-1"></div>
|
||||
<div class="cta-circle cta-circle-2"></div>
|
||||
<div class="cta-inner reveal">
|
||||
<p class="cta-eyebrow">Take the first step</p>
|
||||
<h2 class="cta-title">Ready to Start<br><em>Your Journey?</em></h2>
|
||||
<p class="cta-sub">Join our Women Entrepreneurship program and become part of India's fastest-growing logistics network.</p>
|
||||
<div class="cta-buttons">
|
||||
<a href="#" class="btn-primary">
|
||||
Apply Now
|
||||
<svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
|
||||
<line x1="5" y1="12" x2="19" y2="12"/><polyline points="12 5 19 12 12 19"/>
|
||||
</svg>
|
||||
</a>
|
||||
<a href="#" class="btn-outline">Learn More</a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<script>
|
||||
// Intersection Observer for scroll reveals
|
||||
const revealEls = document.querySelectorAll('.reveal');
|
||||
const io = new IntersectionObserver((entries) => {
|
||||
entries.forEach(e => {
|
||||
if (e.isIntersecting) {
|
||||
e.target.classList.add('visible');
|
||||
io.unobserve(e.target);
|
||||
}
|
||||
});
|
||||
}, { threshold: 0.12 });
|
||||
revealEls.forEach(el => io.observe(el));
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
5
web/woocommerce-js-extra.html
Normal file
5
web/woocommerce-js-extra.html
Normal file
@@ -0,0 +1,5 @@
|
||||
/*
|
||||
<![CDATA[ */
|
||||
var woocommerce_params = {"ajax_url":"/themes/logico-rounded/wp-admin/admin-ajax.php","wc_ajax_url":"/themes/logico-rounded/?wc-ajax=%%endpoint%%","i18n_password_show":"Show password","i18n_password_hide":"Hide password"};
|
||||
//# sourceURL=woocommerce-js-extra
|
||||
/* ]]>*/
|
||||
Reference in New Issue
Block a user