fix padding gap
This commit is contained in:
@@ -5,6 +5,7 @@
|
||||
"scripts": {
|
||||
"dev": "next dev",
|
||||
"build": "next build",
|
||||
"build:css": "bash scripts/build-css.sh",
|
||||
"start": "next start",
|
||||
"lint": "eslint",
|
||||
"test": "jest",
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
4622
public/css/custom-frontend.min.css
vendored
4622
public/css/custom-frontend.min.css
vendored
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
@@ -1,188 +0,0 @@
|
||||
/* ── Blog page hero ── */
|
||||
.blog-hero {
|
||||
background: linear-gradient(160deg, #0c0c14 0%, #18050a 100%);
|
||||
padding: 120px 0 60px;
|
||||
text-align: center;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
margin-top: 0 !important;
|
||||
}
|
||||
.blog-hero::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background: radial-gradient(ellipse 60% 50% at 50% 60%, rgba(192,18,39,0.14) 0%, transparent 100%);
|
||||
pointer-events: none;
|
||||
}
|
||||
.blog-hero-inner {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
max-width: 720px;
|
||||
margin: 0 auto;
|
||||
padding: 0 32px;
|
||||
}
|
||||
.blog-hero-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: rgba(255,255,255,0.35);
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.blog-hero-eyebrow::before,
|
||||
.blog-hero-eyebrow::after {
|
||||
content: '';
|
||||
display: block;
|
||||
width: 28px;
|
||||
height: 1px;
|
||||
background: rgba(255,255,255,0.2);
|
||||
}
|
||||
.blog-hero h1 {
|
||||
font-family: 'Manrope', sans-serif;
|
||||
font-size: clamp(28px, 4.5vw, 52px);
|
||||
font-weight: 900;
|
||||
color: #ffffff !important;
|
||||
line-height: 1.05;
|
||||
letter-spacing: -1.5px;
|
||||
text-transform: uppercase;
|
||||
margin: 0 0 14px;
|
||||
}
|
||||
.blog-hero h1 span { color: #c01227; }
|
||||
.blog-hero p {
|
||||
font-family: 'Manrope', sans-serif;
|
||||
font-size: 15px;
|
||||
color: rgba(255,255,255,0.48);
|
||||
line-height: 1.7;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/* ── Blog grid section ── */
|
||||
.blog-section {
|
||||
background: #f8fafc;
|
||||
padding: 80px 0 100px;
|
||||
}
|
||||
.blog-container {
|
||||
max-width: 1280px;
|
||||
margin: 0 auto;
|
||||
padding: 0 40px;
|
||||
}
|
||||
|
||||
/* ── Blog grid ── */
|
||||
.dm-blog-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
gap: 32px;
|
||||
}
|
||||
|
||||
/* ── Blog card ── */
|
||||
.dm-blog-card {
|
||||
background: #fff;
|
||||
border-radius: 20px;
|
||||
overflow: hidden;
|
||||
border: 1px solid rgba(0,0,0,0.07);
|
||||
box-shadow: 0 4px 24px rgba(0,0,0,0.05);
|
||||
transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.4s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
.dm-blog-card:hover {
|
||||
transform: translateY(-12px) scale(1.02);
|
||||
box-shadow: 0 20px 50px rgba(0,0,0,0.15), 0 0 20px rgba(192, 18, 39, 0.1);
|
||||
}
|
||||
.dm-blog-card-image {
|
||||
width: 100%;
|
||||
aspect-ratio: 4/3;
|
||||
overflow: hidden;
|
||||
background: #eee;
|
||||
}
|
||||
.dm-blog-card-image img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
display: block;
|
||||
transition: transform 0.6s cubic-bezier(0.19, 1, 0.22, 1);
|
||||
}
|
||||
.dm-blog-card:hover .dm-blog-card-image img {
|
||||
transform: scale(1.04);
|
||||
}
|
||||
.dm-blog-card-body {
|
||||
padding: 20px 22px 24px;
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
.dm-blog-meta {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
margin-bottom: 10px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
.dm-blog-category {
|
||||
font-family: 'Manrope', sans-serif;
|
||||
font-size: 9px;
|
||||
font-weight: 700;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 1.8px;
|
||||
color: #c01227;
|
||||
background: rgba(192,18,39,0.07);
|
||||
border: 1px solid rgba(192,18,39,0.15);
|
||||
border-radius: 100px;
|
||||
padding: 3px 9px;
|
||||
text-decoration: none;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.dm-blog-date {
|
||||
font-family: 'Manrope', sans-serif;
|
||||
font-size: 10px;
|
||||
font-weight: 600;
|
||||
color: #94a3b8;
|
||||
letter-spacing: 0.3px;
|
||||
}
|
||||
.dm-blog-card h3 {
|
||||
font-family: 'Manrope', sans-serif;
|
||||
font-size: 15px;
|
||||
font-weight: 800;
|
||||
color: #111827;
|
||||
line-height: 1.4;
|
||||
letter-spacing: -0.2px;
|
||||
margin: 0 0 8px;
|
||||
}
|
||||
.dm-blog-card p {
|
||||
font-family: 'Manrope', sans-serif;
|
||||
font-size: 12.5px;
|
||||
color: #64748b;
|
||||
line-height: 1.65;
|
||||
margin: 0 0 18px;
|
||||
flex: 1;
|
||||
}
|
||||
.dm-blog-read-more {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 5px;
|
||||
font-family: 'Manrope', sans-serif;
|
||||
font-size: 12px;
|
||||
font-weight: 700;
|
||||
color: #c01227;
|
||||
text-decoration: none;
|
||||
letter-spacing: 0.2px;
|
||||
margin-top: auto;
|
||||
transition: gap 0.2s ease;
|
||||
}
|
||||
.dm-blog-read-more:hover { gap: 9px; }
|
||||
.dm-blog-read-more svg { flex-shrink: 0; }
|
||||
|
||||
/* ── Responsive ── */
|
||||
@media (max-width: 1024px) {
|
||||
.dm-blog-grid { grid-template-columns: repeat(2, 1fr); }
|
||||
}
|
||||
@media (max-width: 640px) {
|
||||
.dm-blog-grid { grid-template-columns: 1fr; }
|
||||
.blog-hero { padding: 110px 0 60px; }
|
||||
.blog-container { padding: 0 20px; }
|
||||
.blog-section { padding: 60px 0 80px; }
|
||||
}
|
||||
@@ -1,171 +0,0 @@
|
||||
.tax-product_brand .brand-description {
|
||||
overflow: hidden;
|
||||
zoom:1}
|
||||
|
||||
.tax-product_brand .brand-description img.brand-thumbnail {
|
||||
width: 25%;
|
||||
float: right
|
||||
}
|
||||
|
||||
.tax-product_brand .brand-description .text {
|
||||
width: 72%;
|
||||
float: left
|
||||
}
|
||||
|
||||
.widget_brand_description img {
|
||||
box-sizing: border-box;
|
||||
width: 100%;
|
||||
max-width: none;
|
||||
height: auto;
|
||||
margin: 0 0 1em
|
||||
}
|
||||
|
||||
ul.brand-thumbnails {
|
||||
margin-left: 0;
|
||||
margin-bottom: 0;
|
||||
clear: both;
|
||||
list-style: none
|
||||
}
|
||||
|
||||
ul.brand-thumbnails:before {
|
||||
clear: both;
|
||||
content: "";
|
||||
display: table
|
||||
}
|
||||
|
||||
ul.brand-thumbnails:after {
|
||||
clear: both;
|
||||
content: "";
|
||||
display: table
|
||||
}
|
||||
|
||||
ul.brand-thumbnails li {
|
||||
float: left;
|
||||
margin: 0 3.8% 1em 0;
|
||||
padding: 0;
|
||||
position: relative;
|
||||
width: 22.05%
|
||||
}
|
||||
|
||||
ul.brand-thumbnails.fluid-columns li {
|
||||
width: auto
|
||||
}
|
||||
|
||||
ul.brand-thumbnails:not(.fluid-columns) li.first {
|
||||
clear: both
|
||||
}
|
||||
|
||||
ul.brand-thumbnails:not(.fluid-columns) li.last {
|
||||
margin-right: 0
|
||||
}
|
||||
|
||||
ul.brand-thumbnails.columns-1 li {
|
||||
width: 100%;
|
||||
margin-right: 0
|
||||
}
|
||||
|
||||
ul.brand-thumbnails.columns-2 li {
|
||||
width: 48%
|
||||
}
|
||||
|
||||
ul.brand-thumbnails.columns-3 li {
|
||||
width: 30.75%
|
||||
}
|
||||
|
||||
ul.brand-thumbnails.columns-5 li {
|
||||
width: 16.95%
|
||||
}
|
||||
|
||||
ul.brand-thumbnails.columns-6 li {
|
||||
width: 13.5%
|
||||
}
|
||||
|
||||
.brand-thumbnails li img {
|
||||
box-sizing: border-box;
|
||||
width: 100%;
|
||||
max-width: none;
|
||||
height: auto;
|
||||
margin: 0
|
||||
}
|
||||
|
||||
@media screen and (max-width: 768px) {
|
||||
ul.brand-thumbnails:not(.fluid-columns) li {
|
||||
width:48%!important
|
||||
}
|
||||
|
||||
ul.brand-thumbnails:not(.fluid-columns) li.first {
|
||||
clear: none
|
||||
}
|
||||
|
||||
ul.brand-thumbnails:not(.fluid-columns) li.last {
|
||||
margin-right: 3.8%
|
||||
}
|
||||
|
||||
ul.brand-thumbnails:not(.fluid-columns) li:nth-of-type(odd) {
|
||||
clear: both
|
||||
}
|
||||
|
||||
ul.brand-thumbnails:not(.fluid-columns) li:nth-of-type(even) {
|
||||
margin-right: 0
|
||||
}
|
||||
}
|
||||
|
||||
.brand-thumbnails-description li {
|
||||
text-align: center
|
||||
}
|
||||
|
||||
.brand-thumbnails-description li .term-thumbnail img {
|
||||
display: inline
|
||||
}
|
||||
|
||||
.brand-thumbnails-description li .term-description {
|
||||
margin-top: 1em;
|
||||
text-align: left
|
||||
}
|
||||
|
||||
#brands_a_z h3:target {
|
||||
text-decoration: underline
|
||||
}
|
||||
|
||||
ul.brands_index {
|
||||
list-style: none outside;
|
||||
overflow: hidden;
|
||||
zoom:1}
|
||||
|
||||
ul.brands_index li {
|
||||
float: left;
|
||||
margin: 0 2px 2px 0
|
||||
}
|
||||
|
||||
ul.brands_index li a,ul.brands_index li span {
|
||||
border: 1px solid #ccc;
|
||||
padding: 6px;
|
||||
line-height: 1em;
|
||||
float: left;
|
||||
text-decoration: none
|
||||
}
|
||||
|
||||
ul.brands_index li span {
|
||||
border-color: #eee;
|
||||
color: #ddd
|
||||
}
|
||||
|
||||
ul.brands_index li a:hover {
|
||||
border-width: 2px;
|
||||
padding: 5px;
|
||||
text-decoration: none
|
||||
}
|
||||
|
||||
ul.brands_index li a.active {
|
||||
border-width: 2px;
|
||||
padding: 5px
|
||||
}
|
||||
|
||||
div#brands_a_z a.top {
|
||||
border: 1px solid #ccc;
|
||||
padding: 4px;
|
||||
line-height: 1em;
|
||||
float: right;
|
||||
text-decoration: none;
|
||||
font-size: .8em
|
||||
}
|
||||
@@ -1,737 +0,0 @@
|
||||
/* EV Section Styles */
|
||||
:root {
|
||||
--ev-primary: #111111;
|
||||
--ev-accent: #E31E24;
|
||||
--ev-accent-soft: rgba(227, 30, 36, 0.1);
|
||||
--ev-text-muted: #64748B;
|
||||
--ev-bg-light: #F8FAFC;
|
||||
--ev-card-bg: rgba(255, 255, 255, 0.8);
|
||||
--ev-radius-lg: 32px;
|
||||
--ev-radius-md: 20px;
|
||||
--ev-radius-sm: 12px;
|
||||
--ev-shadow-premium: 0 20px 50px rgba(0, 0, 0, 0.06);
|
||||
--ev-glass-border: rgba(255, 255, 255, 0.5);
|
||||
}
|
||||
|
||||
.ev-section {
|
||||
padding: 120px 0;
|
||||
background-color: #FDFDFD;
|
||||
font-family: 'Inter', system-ui, -apple-system, sans-serif;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
/* Background Blobs */
|
||||
.ev-section::before,
|
||||
.ev-section::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
width: 600px;
|
||||
height: 600px;
|
||||
border-radius: 50%;
|
||||
filter: blur(120px);
|
||||
z-index: 0;
|
||||
opacity: 0.4;
|
||||
}
|
||||
|
||||
.ev-section::before {
|
||||
background: radial-gradient(circle, #E31E24 0%, transparent 70%);
|
||||
top: -200px;
|
||||
right: -200px;
|
||||
}
|
||||
|
||||
.ev-section::after {
|
||||
background: radial-gradient(circle, #3B82F6 0%, transparent 70%);
|
||||
bottom: -200px;
|
||||
left: -200px;
|
||||
}
|
||||
|
||||
.ev-container {
|
||||
max-width: 1300px;
|
||||
margin: 0 auto;
|
||||
padding: 0 40px;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.ev-grid {
|
||||
display: grid;
|
||||
grid-template-columns: 1.1fr 1.2fr;
|
||||
gap: 80px;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
/* Left Content */
|
||||
.ev-badge {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
padding: 8px 18px;
|
||||
border-radius: 100px;
|
||||
font-size: 13px;
|
||||
font-weight: 700;
|
||||
margin-bottom: 32px;
|
||||
background: #FFFFFF;
|
||||
border: 1px solid #E2E8F0;
|
||||
color: #1E293B;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.5px;
|
||||
box-shadow: 0 4px 12px rgba(0,0,0,0.03);
|
||||
}
|
||||
|
||||
.ev-title {
|
||||
font-size: clamp(36px, 5vw, 64px);
|
||||
font-weight: 900;
|
||||
line-height: 1.05;
|
||||
color: var(--ev-primary);
|
||||
margin-bottom: 28px;
|
||||
letter-spacing: -1.5px;
|
||||
}
|
||||
|
||||
.ev-title .accent {
|
||||
color: var(--ev-accent);
|
||||
display: block;
|
||||
}
|
||||
|
||||
.ev-desc {
|
||||
font-size: 18px;
|
||||
color: var(--ev-text-muted);
|
||||
line-height: 1.7;
|
||||
max-width: 520px;
|
||||
margin-bottom: 56px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
/* Feature Grid */
|
||||
.feature-grid {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
.feature-card {
|
||||
background: var(--ev-card-bg);
|
||||
backdrop-filter: blur(12px);
|
||||
-webkit-backdrop-filter: blur(12px);
|
||||
padding: 24px;
|
||||
border-radius: var(--ev-radius-md);
|
||||
border: 1px solid var(--ev-glass-border);
|
||||
box-shadow: var(--ev-shadow-premium);
|
||||
transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
|
||||
}
|
||||
|
||||
.feature-card:hover {
|
||||
transform: translateY(-12px) scale(1.02);
|
||||
border-color: rgba(227, 30, 36, 0.3);
|
||||
box-shadow: 0 30px 70px rgba(227, 30, 36, 0.2), 0 0 30px rgba(227, 30, 36, 0.1);
|
||||
}
|
||||
|
||||
.feature-icon-box {
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
background: #fff;
|
||||
border-radius: 12px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-bottom: 20px;
|
||||
box-shadow: 0 8px 16px rgba(0,0,0,0.04);
|
||||
}
|
||||
|
||||
.feature-card h3 {
|
||||
font-size: 15px;
|
||||
font-weight: 800;
|
||||
margin-bottom: 8px;
|
||||
color: var(--ev-primary);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.5px;
|
||||
}
|
||||
|
||||
.feature-card p {
|
||||
font-size: 13px;
|
||||
color: var(--ev-text-muted);
|
||||
line-height: 1.6;
|
||||
margin: 0;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
/* Right Dashboard */
|
||||
.ev-dashboard {
|
||||
position: relative;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.dashboard-card {
|
||||
background: rgba(255, 255, 255, 0.7);
|
||||
backdrop-filter: blur(20px);
|
||||
-webkit-backdrop-filter: blur(20px);
|
||||
border-radius: var(--ev-radius-lg);
|
||||
padding: 40px;
|
||||
box-shadow: 0 40px 100px rgba(0, 0, 0, 0.08);
|
||||
border: 1px solid rgba(255, 255, 255, 0.8);
|
||||
position: relative;
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
.dashboard-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
|
||||
.dashboard-title {
|
||||
font-size: 20px;
|
||||
font-weight: 900;
|
||||
margin: 0;
|
||||
color: var(--ev-primary);
|
||||
letter-spacing: 0.5px;
|
||||
}
|
||||
|
||||
.live-indicator {
|
||||
background: rgba(16, 185, 129, 0.1);
|
||||
color: #059669;
|
||||
padding: 6px 14px;
|
||||
border-radius: 100px;
|
||||
font-size: 11px;
|
||||
font-weight: 800;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.live-indicator::before {
|
||||
content: '';
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
background: #10B981;
|
||||
border-radius: 50%;
|
||||
box-shadow: 0 0 10px rgba(16, 185, 129, 0.5);
|
||||
animation: pulse 2s infinite;
|
||||
}
|
||||
|
||||
@keyframes pulse {
|
||||
0% { transform: scale(0.95); opacity: 1; }
|
||||
50% { transform: scale(1.1); opacity: 0.6; }
|
||||
100% { transform: scale(0.95); opacity: 1; }
|
||||
}
|
||||
|
||||
.van-display {
|
||||
position: relative;
|
||||
margin: 60px 0;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.van-image {
|
||||
width: 80%;
|
||||
height: auto;
|
||||
filter: drop-shadow(0 30px 40px rgba(0,0,0,0.1));
|
||||
transition: transform 0.5s ease;
|
||||
}
|
||||
|
||||
.van-display:hover .van-image {
|
||||
transform: scale(1.05) rotate(-2deg);
|
||||
}
|
||||
|
||||
/* Dashboard Overlays */
|
||||
.overlay-card {
|
||||
position: absolute;
|
||||
background: rgba(255, 255, 255, 0.9);
|
||||
backdrop-filter: blur(8px);
|
||||
padding: 12px 18px;
|
||||
border-radius: 16px;
|
||||
box-shadow: 0 15px 35px rgba(0, 0, 0, 0.08);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
z-index: 2;
|
||||
border: 1px solid rgba(255, 255, 255, 1);
|
||||
animation: float 4s ease-in-out infinite;
|
||||
}
|
||||
|
||||
@keyframes float {
|
||||
0% { transform: translateY(0px); }
|
||||
50% { transform: translateY(-10px); }
|
||||
100% { transform: translateY(0px); }
|
||||
}
|
||||
|
||||
.overlay-card.v-status-1 { top: 0%; left: -10%; animation-delay: 0s; }
|
||||
.overlay-card.v-status-2 { top: -15%; right: 0%; animation-delay: 1s; }
|
||||
.overlay-card.v-status-3 { bottom: 10%; left: -5%; animation-delay: 2s; }
|
||||
.overlay-card.v-status-4 { bottom: -5%; right: -10%; animation-delay: 1.5s; }
|
||||
|
||||
.status-avatar {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border-radius: 10px;
|
||||
background: #F1F5F9;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.overlay-card .info h4 {
|
||||
font-size: 13px;
|
||||
font-weight: 800;
|
||||
margin: 0;
|
||||
color: #111;
|
||||
}
|
||||
|
||||
.overlay-card .info p {
|
||||
font-size: 11px;
|
||||
margin: 0;
|
||||
color: var(--ev-text-muted);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.progress-ring {
|
||||
width: 38px;
|
||||
height: 38px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 10px;
|
||||
font-weight: 800;
|
||||
border-radius: 50%;
|
||||
border: 3px solid #E2E8F0;
|
||||
color: #111;
|
||||
}
|
||||
|
||||
.progress-ring.success { border-color: #10B981; color: #10B981; }
|
||||
.progress-ring.warning { border-color: #F59E0B; color: #F59E0B; }
|
||||
|
||||
/* Stats Row */
|
||||
.stats-row {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
gap: 16px;
|
||||
margin-top: 40px;
|
||||
}
|
||||
|
||||
.stat-metric {
|
||||
background: rgba(255, 255, 255, 1);
|
||||
padding: 20px 10px;
|
||||
border-radius: 20px;
|
||||
text-align: center;
|
||||
border: 1px solid #F1F5F9;
|
||||
box-shadow: 0 4px 12px rgba(0,0,0,0.03);
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.stat-metric:hover {
|
||||
transform: translateY(-5px);
|
||||
border-color: var(--ev-accent);
|
||||
}
|
||||
|
||||
.stat-value {
|
||||
display: block;
|
||||
font-size: 22px;
|
||||
font-weight: 900;
|
||||
color: var(--ev-primary);
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.stat-label {
|
||||
display: block;
|
||||
font-size: 10px;
|
||||
color: var(--ev-text-muted);
|
||||
font-weight: 700;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.5px;
|
||||
}
|
||||
|
||||
/* Responsiveness */
|
||||
@media (max-width: 1280px) {
|
||||
.ev-grid { gap: 40px; }
|
||||
.overlay-card.v-status-1 { left: 0; }
|
||||
.overlay-card.v-status-2 { right: 0; }
|
||||
}
|
||||
|
||||
@media (max-width: 1024px) {
|
||||
.ev-grid {
|
||||
grid-template-columns: 1fr;
|
||||
gap: 80px;
|
||||
}
|
||||
|
||||
.ev-content {
|
||||
text-align: center;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.ev-desc {
|
||||
max-width: 600px;
|
||||
}
|
||||
|
||||
.feature-grid {
|
||||
max-width: 800px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.ev-dashboard {
|
||||
max-width: 800px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 640px) {
|
||||
.ev-section { padding: 80px 0; }
|
||||
.feature-grid { grid-template-columns: 1fr; }
|
||||
.stats-row { grid-template-columns: 1fr 1fr; }
|
||||
.dashboard-card { padding: 30px 20px; }
|
||||
.ev-title { font-size: 40px; }
|
||||
.overlay-card { transform: scale(0.8); }
|
||||
.v-status-1, .v-status-2, .v-status-3, .v-status-4 { position: static; margin-bottom: 10px; }
|
||||
.van-display { margin: 20px 0; }
|
||||
}
|
||||
/* EV2 Section - Premium Redesign */
|
||||
:root {
|
||||
--ev2-primary: #0A0A0B;
|
||||
--ev2-accent: #E31E24;
|
||||
--ev2-accent-glow: rgba(227, 30, 36, 0.4);
|
||||
--ev2-text: #FFFFFF;
|
||||
--ev2-text-muted: #A1A1AA;
|
||||
--ev2-card-bg: rgba(23, 23, 23, 0.7);
|
||||
--ev2-border: rgba(255, 255, 255, 0.1);
|
||||
--ev2-radius: 24px;
|
||||
}
|
||||
|
||||
.ev2-section {
|
||||
padding: 120px 0;
|
||||
background-color: var(--ev2-primary);
|
||||
color: var(--ev2-text);
|
||||
font-family: 'Outfit', 'Manrope', sans-serif;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
/* Abstract Background Elements */
|
||||
.ev2-section::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: -10%;
|
||||
right: -10%;
|
||||
width: 40%;
|
||||
height: 40%;
|
||||
background: radial-gradient(circle, var(--ev2-accent-glow) 0%, transparent 70%);
|
||||
z-index: 0;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.ev2-container {
|
||||
max-width: 1300px;
|
||||
margin: 0 auto;
|
||||
padding: 0 30px;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.ev2-grid {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 80px;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
/* Left Content */
|
||||
.ev2-badge {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
padding: 8px 16px;
|
||||
border-radius: 100px;
|
||||
font-size: 13px;
|
||||
font-weight: 700;
|
||||
margin-bottom: 24px;
|
||||
background: rgba(227, 30, 36, 0.1);
|
||||
color: var(--ev2-accent);
|
||||
border: 1px solid rgba(227, 30, 36, 0.2);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 1px;
|
||||
}
|
||||
|
||||
.ev2-badge::before {
|
||||
content: '';
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
background: var(--ev2-accent);
|
||||
border-radius: 50%;
|
||||
box-shadow: 0 0 10px var(--ev2-accent);
|
||||
animation: pulse 2s infinite;
|
||||
}
|
||||
|
||||
@keyframes pulse {
|
||||
0% { transform: scale(1); opacity: 1; }
|
||||
50% { transform: scale(1.5); opacity: 0.5; }
|
||||
100% { transform: scale(1); opacity: 1; }
|
||||
}
|
||||
|
||||
.ev2-title {
|
||||
font-size: clamp(40px, 6vw, 72px);
|
||||
font-weight: 900;
|
||||
line-height: 1;
|
||||
margin-bottom: 30px;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.ev2-title .glow {
|
||||
color: var(--ev2-accent);
|
||||
display: block;
|
||||
text-shadow: 0 0 30px var(--ev2-accent-glow);
|
||||
}
|
||||
|
||||
.ev2-desc {
|
||||
font-size: 20px;
|
||||
color: var(--ev2-text-muted);
|
||||
line-height: 1.6;
|
||||
max-width: 580px;
|
||||
margin-bottom: 50px;
|
||||
}
|
||||
|
||||
/* Feature Stack */
|
||||
.ev2-features {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
.ev2-feature-item {
|
||||
padding: 24px;
|
||||
background: var(--ev2-card-bg);
|
||||
backdrop-filter: blur(10px);
|
||||
border: 1px solid var(--ev2-border);
|
||||
border-radius: 20px;
|
||||
transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
|
||||
}
|
||||
|
||||
.ev2-feature-item:hover {
|
||||
transform: translateY(-8px);
|
||||
border-color: rgba(227, 30, 36, 0.4);
|
||||
background: rgba(23, 23, 23, 0.9);
|
||||
}
|
||||
|
||||
.ev2-icon-wrap {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
background: rgba(255, 255, 255, 0.05);
|
||||
border-radius: 12px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-bottom: 20px;
|
||||
color: var(--ev2-accent);
|
||||
}
|
||||
|
||||
.ev2-feature-item h3 {
|
||||
font-size: 18px;
|
||||
font-weight: 700;
|
||||
margin-bottom: 12px;
|
||||
letter-spacing: -0.5px;
|
||||
}
|
||||
|
||||
.ev2-feature-item p {
|
||||
font-size: 14px;
|
||||
color: var(--ev2-text-muted);
|
||||
line-height: 1.5;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/* Right Side - Visual Interface */
|
||||
.ev2-visual-wrap {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.ev2-main-card {
|
||||
background: linear-gradient(135deg, #171719 0%, #0A0A0B 100%);
|
||||
border-radius: 32px;
|
||||
padding: 40px;
|
||||
border: 1px solid var(--ev2-border);
|
||||
box-shadow: 0 40px 100px rgba(0, 0, 0, 0.5);
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.ev2-main-card::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background: linear-gradient(180deg, transparent 0%, rgba(227, 30, 36, 0.05) 100%);
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.ev2-card-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: flex-start;
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
|
||||
.ev2-tagline {
|
||||
font-size: 12px;
|
||||
font-weight: 800;
|
||||
color: var(--ev2-accent);
|
||||
letter-spacing: 2px;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.ev2-id {
|
||||
font-size: 28px;
|
||||
font-weight: 900;
|
||||
color: #fff;
|
||||
margin-top: 5px;
|
||||
}
|
||||
|
||||
.ev2-status-pill {
|
||||
background: rgba(16, 185, 129, 0.1);
|
||||
color: #10B981;
|
||||
padding: 6px 14px;
|
||||
border-radius: 100px;
|
||||
font-size: 12px;
|
||||
font-weight: 700;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.ev2-image-box {
|
||||
position: relative;
|
||||
margin: 30px 0;
|
||||
border-radius: 20px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.ev2-image-box img {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
display: block;
|
||||
transform: scale(1.05);
|
||||
transition: transform 0.8s ease;
|
||||
}
|
||||
|
||||
.ev2-main-card:hover .ev2-image-box img {
|
||||
transform: scale(1);
|
||||
}
|
||||
|
||||
/* Floating HUD elements */
|
||||
.ev2-hud {
|
||||
position: absolute;
|
||||
padding: 15px;
|
||||
background: rgba(10, 10, 11, 0.8);
|
||||
backdrop-filter: blur(12px);
|
||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||
border-radius: 16px;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.hud-1 {
|
||||
top: 30%;
|
||||
right: -20px;
|
||||
width: 180px;
|
||||
}
|
||||
|
||||
.hud-2 {
|
||||
bottom: 20%;
|
||||
left: -20px;
|
||||
width: 160px;
|
||||
}
|
||||
|
||||
.hud-label {
|
||||
font-size: 10px;
|
||||
color: var(--ev2-text-muted);
|
||||
text-transform: uppercase;
|
||||
font-weight: 700;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
.hud-value {
|
||||
font-size: 20px;
|
||||
font-weight: 900;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.hud-progress {
|
||||
height: 4px;
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
border-radius: 2px;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.hud-bar {
|
||||
height: 100%;
|
||||
background: var(--ev2-accent);
|
||||
border-radius: 2px;
|
||||
box-shadow: 0 0 10px var(--ev2-accent);
|
||||
}
|
||||
|
||||
/* Bottom Metrics */
|
||||
.ev2-metrics {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
gap: 20px;
|
||||
margin-top: 40px;
|
||||
}
|
||||
|
||||
.metric-box {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.m-val {
|
||||
font-size: 24px;
|
||||
font-weight: 900;
|
||||
display: block;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.m-label {
|
||||
font-size: 11px;
|
||||
color: var(--ev2-text-muted);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
/* Responsiveness */
|
||||
@media (max-width: 1024px) {
|
||||
.ev2-grid {
|
||||
grid-template-columns: 1fr;
|
||||
gap: 60px;
|
||||
}
|
||||
|
||||
.ev2-content {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.ev2-desc {
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
.ev2-features {
|
||||
max-width: 700px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.ev2-visual-wrap {
|
||||
max-width: 600px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.hud-1, .hud-2 {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 640px) {
|
||||
.ev2-features {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.ev2-title {
|
||||
font-size: 40px;
|
||||
}
|
||||
|
||||
.ev2-metrics {
|
||||
grid-template-columns: 1fr 1fr;
|
||||
}
|
||||
}
|
||||
@@ -1,464 +0,0 @@
|
||||
/* EV Premium Section - High-End SaaS UI */
|
||||
:root {
|
||||
--evp-bg: #030303;
|
||||
--evp-card-bg: rgba(20, 20, 22, 0.6);
|
||||
--evp-accent: #E31E24;
|
||||
--evp-accent-glow: rgba(227, 30, 36, 0.4);
|
||||
--evp-success: #10B981;
|
||||
--evp-info: #3B82F6;
|
||||
--evp-text: #FFFFFF;
|
||||
--evp-text-dim: #A1A1AA;
|
||||
--evp-border: rgba(255, 255, 255, 0.08);
|
||||
--evp-glass-border: rgba(255, 255, 255, 0.12);
|
||||
--evp-radius-lg: 32px;
|
||||
--evp-radius-md: 20px;
|
||||
--evp-font: 'Manrope', -apple-system, sans-serif;
|
||||
}
|
||||
|
||||
.evp-section {
|
||||
padding: 140px 0;
|
||||
background-color: #1f1f1f;
|
||||
color: var(--evp-text);
|
||||
font-family: var(--evp-font);
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* ─── BACKGROUND EFFECTS ─── */
|
||||
.evp-bg-aura {
|
||||
position: absolute;
|
||||
width: 600px;
|
||||
height: 600px;
|
||||
border-radius: 50%;
|
||||
filter: blur(150px);
|
||||
z-index: 0;
|
||||
pointer-events: none;
|
||||
opacity: 0.3;
|
||||
}
|
||||
|
||||
.aura-red {
|
||||
background: radial-gradient(circle, var(--evp-accent) 0%, transparent 70%);
|
||||
top: -100px;
|
||||
right: -100px;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.logico-front-end h4:not([class*=logico-title-h]){
|
||||
color: #fff !important;
|
||||
}
|
||||
|
||||
|
||||
.aura-blue {
|
||||
background: radial-gradient(circle, var(--evp-info) 0%, transparent 70%);
|
||||
bottom: -100px;
|
||||
left: -100px;
|
||||
}
|
||||
|
||||
.evp-grid-overlay {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background-image: linear-gradient(rgba(255,255,255,0.03) 1px, transparent 1px),
|
||||
linear-gradient(90deg, rgba(255,255,255,0.03) 1px, transparent 1px);
|
||||
background-size: 50px 50px;
|
||||
mask-image: radial-gradient(circle at center, black, transparent 80%);
|
||||
pointer-events: none;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.evp-container {
|
||||
max-width: 1400px;
|
||||
margin: 0 auto;
|
||||
padding: 0 40px;
|
||||
position: relative;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.evp-layout {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 80px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
/* ─── LEFT: CONTENT & HERO ─── */
|
||||
.evp-content {
|
||||
flex: 1;
|
||||
max-width: 650px;
|
||||
}
|
||||
|
||||
.evp-tag {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
padding: 8px 16px;
|
||||
background: rgba(227, 30, 36, 0.1);
|
||||
border: 1px solid rgba(227, 30, 36, 0.2);
|
||||
border-radius: 100px;
|
||||
font-size: 13px;
|
||||
font-weight: 700;
|
||||
color: var(--evp-accent);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 1px;
|
||||
margin-bottom: 32px;
|
||||
}
|
||||
|
||||
.evp-tag .status-dot {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
background: var(--evp-accent);
|
||||
border-radius: 50%;
|
||||
box-shadow: 0 0 10px var(--evp-accent);
|
||||
animation: evp-pulse 2s infinite;
|
||||
}
|
||||
|
||||
@keyframes evp-pulse {
|
||||
0% { transform: scale(0.95); opacity: 1; }
|
||||
50% { transform: scale(1.3); opacity: 0.5; }
|
||||
100% { transform: scale(0.95); opacity: 1; }
|
||||
}
|
||||
|
||||
.evp-title {
|
||||
font-size: clamp(40px, 5vw, 68px);
|
||||
line-height: 1.05;
|
||||
font-weight: 800;
|
||||
letter-spacing: -2px;
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
.evp-title span {
|
||||
display: block;
|
||||
color: var(--evp-accent);
|
||||
filter: drop-shadow(0 0 20px var(--evp-accent-glow));
|
||||
}
|
||||
|
||||
.evp-desc {
|
||||
font-size: 20px;
|
||||
color: var(--evp-text-dim);
|
||||
line-height: 1.6;
|
||||
margin-bottom: 50px;
|
||||
max-width: 580px;
|
||||
}
|
||||
|
||||
/* Feature Cards Stack */
|
||||
.evp-features {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
.evp-feature-card {
|
||||
padding: 30px;
|
||||
background: var(--evp-card-bg);
|
||||
backdrop-filter: blur(20px);
|
||||
border: 1px solid var(--evp-glass-border);
|
||||
border-radius: var(--evp-radius-md);
|
||||
transition: all 0.4s cubic-bezier(0.19, 1, 0.22, 1);
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.evp-feature-card::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0; left: 0; width: 100%; height: 100%;
|
||||
background: linear-gradient(135deg, rgba(255,255,255,0.05) 0%, transparent 100%);
|
||||
opacity: 0;
|
||||
transition: opacity 0.4s;
|
||||
}
|
||||
|
||||
.evp-feature-card:hover {
|
||||
transform: translateY(-5px) scale(1.02);
|
||||
border-color: rgba(227, 30, 36, 0.4);
|
||||
box-shadow: 0 20px 40px rgba(0,0,0,0.4);
|
||||
}
|
||||
|
||||
.evp-feature-card:hover::before {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.evp-icon-box {
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
border-radius: 14px;
|
||||
background: rgba(255, 255, 255, 0.05);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-bottom: 20px;
|
||||
color: var(--evp-accent);
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
.evp-feature-card h3 {
|
||||
font-size: 17px;
|
||||
font-weight: 700;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.evp-feature-card p {
|
||||
font-size: 14px;
|
||||
color: #fff;
|
||||
line-height: 1.5;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/* ─── RIGHT: VISUAL DASHBOARD ─── */
|
||||
.evp-visual {
|
||||
flex: 1;
|
||||
position: relative;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.evp-dashboard {
|
||||
width: 100%;
|
||||
max-width: 600px;
|
||||
background: linear-gradient(135deg, rgba(255, 255, 255, 0.05) 0%, transparent 100%);
|
||||
border: 1px solid var(--evp-border);
|
||||
border-radius: 40px;
|
||||
padding: 50px;
|
||||
position: relative;
|
||||
box-shadow: 0 50px 100px rgba(0,0,0,0.8);
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
.evp-dashboard::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
border-radius: 40px;
|
||||
padding: 1px;
|
||||
background: linear-gradient(to bottom right, rgba(255,255,255,0.1), transparent, rgba(255,255,255,0.05));
|
||||
-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
|
||||
mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
|
||||
-webkit-mask-composite: xor;
|
||||
mask-composite: exclude;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.evp-db-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: flex-start;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.evp-db-title {
|
||||
font-size: 12px;
|
||||
font-weight: 800;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 2px;
|
||||
color: var(--evp-text-dim);
|
||||
}
|
||||
|
||||
.evp-live-tag {
|
||||
font-size: 11px;
|
||||
font-weight: 700;
|
||||
color: var(--evp-success);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
background: rgba(16, 185, 129, 0.1);
|
||||
padding: 4px 10px;
|
||||
border-radius: 50px;
|
||||
}
|
||||
|
||||
.evp-db-id {
|
||||
font-size: 32px;
|
||||
font-weight: 900;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.evp-van-stage {
|
||||
position: relative;
|
||||
margin: 40px 0;
|
||||
width: 100%;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.evp-van-image {
|
||||
width: 110%;
|
||||
height: auto;
|
||||
/* margin-left: -5%; */
|
||||
filter: drop-shadow(0 20px 30px rgba(0,0,0,0.5));
|
||||
animation: evp-float 6s ease-in-out infinite;
|
||||
}
|
||||
|
||||
@keyframes evp-float {
|
||||
0%, 100% { transform: translateY(0); }
|
||||
50% { transform: translateY(-15px); }
|
||||
}
|
||||
|
||||
/* Floating HUD Cards */
|
||||
.evp-hud-card {
|
||||
position: absolute;
|
||||
background: rgba(15, 15, 18, 0.85);
|
||||
backdrop-filter: blur(15px);
|
||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||
border-radius: 18px;
|
||||
padding: 16px;
|
||||
z-index: 10;
|
||||
box-shadow: 0 20px 40px rgba(0,0,0,0.4);
|
||||
pointer-events: all;
|
||||
transition: transform 0.3s ease;
|
||||
}
|
||||
|
||||
.evp-hud-card:hover {
|
||||
transform: scale(1.05);
|
||||
}
|
||||
|
||||
.hud-battery {
|
||||
top: 55%;
|
||||
left: -40px;
|
||||
min-width: 160px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 15px;
|
||||
}
|
||||
|
||||
.hud-location {
|
||||
top: 15%;
|
||||
right: -30px;
|
||||
min-width: 180px;
|
||||
}
|
||||
|
||||
.hud-route {
|
||||
bottom: 30%;
|
||||
right: -50px;
|
||||
min-width: 170px;
|
||||
background: linear-gradient(135deg, rgba(20, 20, 24, 0.9), rgba(10, 10, 12, 0.9));
|
||||
}
|
||||
|
||||
.evp-progress-svg {
|
||||
width: 44px;
|
||||
height: 44px;
|
||||
transform: rotate(-90deg);
|
||||
}
|
||||
|
||||
.evp-progress-circle-bg {
|
||||
fill: none;
|
||||
stroke: rgba(255,255,255,0.05);
|
||||
stroke-width: 4;
|
||||
}
|
||||
|
||||
.evp-progress-circle {
|
||||
fill: none;
|
||||
stroke: var(--evp-success);
|
||||
stroke-width: 4;
|
||||
stroke-linecap: round;
|
||||
stroke-dasharray: 113;
|
||||
stroke-dashoffset: 20; /* Example for 82% */
|
||||
transition: stroke-dashoffset 1s ease-out;
|
||||
}
|
||||
|
||||
.hud-val-large {
|
||||
font-size: 20px;
|
||||
font-weight: 900;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.hud-label-small {
|
||||
font-size: 10px;
|
||||
color: var(--evp-text-dim);
|
||||
text-transform: uppercase;
|
||||
font-weight: 700;
|
||||
margin-bottom: 4px;
|
||||
letter-spacing: 0.5px;
|
||||
}
|
||||
|
||||
/* Route Visual in HUD */
|
||||
.hud-route-path {
|
||||
margin-top: 10px;
|
||||
height: 30px;
|
||||
background-image: radial-gradient(circle, rgba(255,255,255,0.2) 1px, transparent 1px);
|
||||
background-size: 8px 8px;
|
||||
border-radius: 8px;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.hud-route-line {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 10%;
|
||||
width: 60%;
|
||||
height: 2px;
|
||||
background: var(--evp-accent);
|
||||
box-shadow: 0 0 10px var(--evp-accent);
|
||||
}
|
||||
|
||||
/* Dashboard Bottom Metrics */
|
||||
.evp-metrics {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
gap: 15px;
|
||||
border-top: 1px solid var(--evp-border);
|
||||
padding-top: 25px;
|
||||
}
|
||||
|
||||
.m-item {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.m-label {
|
||||
font-size: 9px;
|
||||
text-transform: uppercase;
|
||||
font-weight: 800;
|
||||
color: var(--evp-text-dim);
|
||||
letter-spacing: 0.5px;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
.m-value {
|
||||
font-size: 18px;
|
||||
font-weight: 900;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
/* ─── RESPONSIVENESS ─── */
|
||||
@media (max-width: 1300px) {
|
||||
.evp-layout { gap: 40px; }
|
||||
.hud-battery { left: 0; }
|
||||
.hud-location { right: 0; }
|
||||
.hud-route { right: 0; }
|
||||
}
|
||||
|
||||
@media (max-width: 1100px) {
|
||||
.evp-layout {
|
||||
flex-direction: column;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.evp-content {
|
||||
max-width: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.evp-desc {
|
||||
max-width: 700px;
|
||||
}
|
||||
|
||||
.evp-features {
|
||||
max-width: 800px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.evp-visual {
|
||||
margin-top: 60px;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 640px) {
|
||||
.evp-section { padding: 80px 0; }
|
||||
.evp-features { grid-template-columns: 1fr; }
|
||||
.evp-metrics { grid-template-columns: 1fr 1fr; gap: 20px; }
|
||||
.evp-dashboard { padding: 30px 20px; }
|
||||
.evp-hud-card { display: contents; }
|
||||
.evp-title { font-size: 38px; }
|
||||
.evp-db-id { font-size: 24px; }
|
||||
}
|
||||
File diff suppressed because it is too large
Load Diff
@@ -1,562 +0,0 @@
|
||||
/*
|
||||
* section-miletruth.css
|
||||
* Extends the existing ev-section & evp-section patterns.
|
||||
* Only adds what the existing CSS files don't already provide.
|
||||
*/
|
||||
|
||||
/* ── Override ev-section font to match site Manrope ── */
|
||||
.ev-section,
|
||||
.ev-section .ev-title,
|
||||
.ev-section .ev-desc,
|
||||
.ev-section .ev-badge,
|
||||
.ev-section .feature-card h3,
|
||||
.ev-section .feature-card p {
|
||||
font-family: 'Manrope', sans-serif;
|
||||
}
|
||||
|
||||
/* ── Remove the decorative blobs (they show as colored arcs at section edges) ── */
|
||||
.ev-section::before,
|
||||
.ev-section::after {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* ── Column widths: image always gets the large column ──
|
||||
Edge (non-rev): content first → col1 small, image → col2 large
|
||||
Impact/Fulfillment (rev): image first → col1 large, content → col2 small ── */
|
||||
.ev-section .ev-grid {
|
||||
grid-template-columns: 0.42fr 2.2fr;
|
||||
}
|
||||
.ev-section .ev-grid.ev-grid--rev {
|
||||
grid-template-columns: 2.2fr 0.42fr;
|
||||
}
|
||||
.ev-section .ev-grid,
|
||||
.ev-section .ev-grid.ev-grid--rev {
|
||||
gap: 40px;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
/* ── Widen the container on this page to give images more room ── */
|
||||
.ev-section .ev-container {
|
||||
max-width: 1440px;
|
||||
padding: 0 32px;
|
||||
}
|
||||
|
||||
/* ── Slightly smaller body text so images feel dominant ── */
|
||||
.ev-section .ev-desc {
|
||||
font-size: 16px !important;
|
||||
line-height: 1.65;
|
||||
margin-bottom: 36px;
|
||||
}
|
||||
|
||||
/* ── Hero slider dark background (no Elementor CSS on this page) ── */
|
||||
/* .miletruth-hero .content-slider-wrapper {
|
||||
background: linear-gradient(160deg, #0c0c14 0%, #18050a 100%);
|
||||
} */
|
||||
|
||||
/* ── Remove the default 90px top margin so hero starts at y:0, covering the
|
||||
white gap that would otherwise show behind the transparent header ── */
|
||||
.miletruth-hero .content-slider .slide-content {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.miletruth-hero .content-slider .slide-content-inner {
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
max-width: 980px;
|
||||
padding: 0 32px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.miletruth-hero .content-slider-item-heading,
|
||||
.miletruth-hero .content-slider-item-heading .heading-content {
|
||||
color: rgba(255, 255, 255, 0.92) !important;
|
||||
font-size: 72px;
|
||||
line-height: 1.05;
|
||||
letter-spacing: 0;
|
||||
}
|
||||
|
||||
.miletruth-hero .content-slider-item-text,
|
||||
.miletruth-hero .content-slider-item-text .text-content,
|
||||
.miletruth-hero .content-slider-item-text p {
|
||||
color: rgba(255, 255, 255, 0.72) !important;
|
||||
font-size: 20px;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.content-wrapper.miletruth-hero {
|
||||
margin-top: 0 !important;
|
||||
}
|
||||
|
||||
/* ── Image-left layouts: image is first child in HTML, large column is first ── */
|
||||
.ev-grid--rev {
|
||||
grid-template-columns: 2.2fr 0.42fr;
|
||||
}
|
||||
/* No order override needed — HTML source order already places image first (left, large) */
|
||||
|
||||
|
||||
/* ── Dark section override on ev-section ── */
|
||||
.ev-section--dark {
|
||||
background: #1a1a1f !important;
|
||||
}
|
||||
.ev-section--dark .ev-title { color: #ffffff; }
|
||||
.ev-section--dark .ev-desc { color: rgba(255, 255, 255, 0.55); }
|
||||
.ev-section--dark .ev-badge {
|
||||
background: rgba(255,255,255,0.06);
|
||||
border-color: rgba(255,255,255,0.12);
|
||||
color: rgba(255,255,255,0.7);
|
||||
box-shadow: none;
|
||||
}
|
||||
.ev-section--dark .feature-card {
|
||||
background: rgba(255,255,255,0.05);
|
||||
border-color: rgba(255,255,255,0.08);
|
||||
}
|
||||
.ev-section--dark .feature-card:hover {
|
||||
background: rgba(255,255,255,0.08);
|
||||
border-color: rgba(227,30,36,0.3);
|
||||
}
|
||||
.ev-section--dark .feature-card h3 { color: #ffffff; }
|
||||
.ev-section--dark .feature-card p { color: rgba(255,255,255,0.5); }
|
||||
.ev-section--dark .feature-icon-box {
|
||||
background: rgba(255,255,255,0.07);
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
/* ── Picture card (pitch image container) ── */
|
||||
.mr-pic-card {
|
||||
border-radius: 32px;
|
||||
overflow: hidden;
|
||||
box-shadow: 0 40px 100px rgba(0, 0, 0, 0.09);
|
||||
border: 1px solid rgba(255, 255, 255, 0.6);
|
||||
background: #fff;
|
||||
}
|
||||
.mr-pic-card--dark {
|
||||
border-color: rgba(255,255,255,0.08);
|
||||
box-shadow: 0 40px 80px rgba(0,0,0,0.45);
|
||||
}
|
||||
.mr-pic-card img {
|
||||
width: 100%; height: auto; display: block;
|
||||
transition: transform 0.6s cubic-bezier(0.19, 1, 0.22, 1);
|
||||
}
|
||||
.mr-pic-card:hover img { transform: scale(1.025); }
|
||||
|
||||
/* ── Stats strip ── */
|
||||
.mr-stats-strip {
|
||||
padding: 72px 0;
|
||||
background: #F8FAFC;
|
||||
border-top: 1px solid rgba(0,0,0,0.05);
|
||||
border-bottom: 1px solid rgba(0,0,0,0.05);
|
||||
}
|
||||
.mr-stats-grid {
|
||||
max-width: 1300px;
|
||||
margin: 0 auto;
|
||||
padding: 0 40px;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
gap: 0;
|
||||
background: #fff;
|
||||
border: 1px solid rgba(0,0,0,0.07);
|
||||
border-radius: 24px;
|
||||
overflow: hidden;
|
||||
box-shadow: 0 8px 40px rgba(0,0,0,0.05);
|
||||
}
|
||||
.mr-stat-item {
|
||||
padding: 44px 32px;
|
||||
text-align: center;
|
||||
border-right: 1px solid rgba(0,0,0,0.07);
|
||||
transition: background 0.3s ease;
|
||||
}
|
||||
.mr-stat-item:last-child { border-right: none; }
|
||||
.mr-stat-item:hover { background: rgba(192,18,39,0.03); }
|
||||
.mr-stat-num {
|
||||
font-family: 'Manrope', sans-serif;
|
||||
font-size: clamp(36px, 4.5vw, 58px);
|
||||
font-weight: 900;
|
||||
color: #111;
|
||||
letter-spacing: -2px;
|
||||
line-height: 1;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.mr-stat-num span { color: #c01227; }
|
||||
.mr-stat-lbl {
|
||||
font-family: 'Manrope', sans-serif;
|
||||
font-size: 11px;
|
||||
font-weight: 700;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 2px;
|
||||
color: #64748B;
|
||||
}
|
||||
|
||||
/* ── CTA section ── */
|
||||
.mr-cta-section {
|
||||
padding: 130px 0;
|
||||
background: #0d0304;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
text-align: center;
|
||||
}
|
||||
.mr-cta-section::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background: radial-gradient(ellipse 65% 55% at 50% 50%, rgba(192,18,39,0.16) 0%, transparent 100%);
|
||||
pointer-events: none;
|
||||
}
|
||||
.mr-cta-inner {
|
||||
max-width: 720px;
|
||||
margin: 0 auto;
|
||||
padding: 0 40px;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
.mr-cta-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: rgba(255,255,255,0.35);
|
||||
margin-bottom: 28px;
|
||||
}
|
||||
.mr-cta-eyebrow::before,
|
||||
.mr-cta-eyebrow::after {
|
||||
content: '';
|
||||
display: block;
|
||||
width: 28px; height: 1px;
|
||||
background: rgba(255,255,255,0.2);
|
||||
}
|
||||
.mr-cta-inner h2 {
|
||||
font-family: 'Manrope', sans-serif;
|
||||
font-size: clamp(34px, 5vw, 64px);
|
||||
font-weight: 900;
|
||||
color: #fff;
|
||||
line-height: 1.05;
|
||||
letter-spacing: -2px;
|
||||
text-transform: uppercase;
|
||||
margin: 0 0 22px;
|
||||
}
|
||||
.mr-cta-inner h2 span { color: #c01227; }
|
||||
.mr-cta-inner p {
|
||||
font-family: 'Manrope', sans-serif;
|
||||
font-size: 18px;
|
||||
color: rgba(255,255,255,0.48);
|
||||
line-height: 1.75;
|
||||
margin: 0 0 52px;
|
||||
}
|
||||
.mr-cta-btns {
|
||||
display: flex;
|
||||
gap: 14px;
|
||||
justify-content: center;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
/* Primary CTA button */
|
||||
.mr-cta-btns .logico-button {
|
||||
border-radius: 100px !important;
|
||||
}
|
||||
|
||||
/* ── List style matching ev-section checklist ── */
|
||||
.ev-checklist {
|
||||
list-style: none !important;
|
||||
margin: 0 0 48px;
|
||||
padding: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 14px;
|
||||
}
|
||||
.ev-checklist li {
|
||||
list-style: none !important;
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
gap: 12px;
|
||||
font-family: 'Manrope', sans-serif;
|
||||
font-size: 15px;
|
||||
font-weight: 600;
|
||||
color: #2d3748;
|
||||
line-height: 1.55;
|
||||
}
|
||||
.ev-checklist li::marker {
|
||||
content: '' !important;
|
||||
display: none !important;
|
||||
}
|
||||
.ev-checklist--dark li { color: rgba(255,255,255,0.75); }
|
||||
|
||||
/* .logico-front-end ul li:before (vendor-theme-core.css) injects a fontello icon on
|
||||
every li — override it with higher specificity + !important so only our SVG shows */
|
||||
.logico-front-end .ev-checklist li::before,
|
||||
.ev-checklist li::before {
|
||||
content: '' !important;
|
||||
font: unset !important;
|
||||
position: relative !important;
|
||||
display: block !important;
|
||||
width: 20px; height: 20px; min-width: 20px;
|
||||
border-radius: 6px;
|
||||
background: rgba(192,18,39,0.08) !important;
|
||||
border: 1.5px solid rgba(192,18,39,0.2);
|
||||
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='8' viewBox='0 0 10 8' fill='none'%3E%3Cpath d='M1 4l2.5 2.5L9 1' stroke='%23c01227' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
|
||||
background-size: 10px; background-repeat: no-repeat; background-position: center;
|
||||
margin-top: 2px; flex-shrink: 0;
|
||||
top: 0 !important; left: 0 !important;
|
||||
}
|
||||
.ev-checklist--dark li::before {
|
||||
background-color: rgba(192,18,39,0.08) !important;
|
||||
border-color: rgba(192,18,39,0.2) !important;
|
||||
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23c01227' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 6 7 17l-5-5'/%3E%3Cpath d='m22 10-7.5 7.5L13 16'/%3E%3C/svg%3E") !important;
|
||||
background-size: 14px;
|
||||
}
|
||||
|
||||
/* ── Responsive extras ── */
|
||||
@media (max-width: 1024px) {
|
||||
.mr-stats-grid { grid-template-columns: repeat(2, 1fr); }
|
||||
.mr-stat-item:nth-child(even) { border-right: none; }
|
||||
.mr-stat-item:nth-child(n+3) { border-top: 1px solid rgba(0,0,0,0.07); }
|
||||
}
|
||||
@media (max-width: 680px) {
|
||||
.mr-stats-strip { padding: 52px 0; }
|
||||
.mr-stats-grid { padding: 0 20px; grid-template-columns: 1fr 1fr; border-radius: 16px; }
|
||||
.mr-stat-item { padding: 28px 16px; }
|
||||
.mr-stat-item:nth-child(odd) { border-right: 1px solid rgba(0,0,0,0.07); }
|
||||
.mr-cta-section { padding: 80px 0; }
|
||||
.mr-cta-inner { padding: 0 20px; }
|
||||
.mr-cta-btns { flex-direction: column; align-items: center; }
|
||||
}
|
||||
|
||||
/* Additional responsive image fixes for MileTruth page */
|
||||
@media (max-width: 1200px) {
|
||||
.mr-pic-card img {
|
||||
max-height: 520px;
|
||||
width: 100%;
|
||||
height: auto;
|
||||
object-fit: cover;
|
||||
}
|
||||
.miletruth-hero .content-slider .slide-content-inner {
|
||||
max-width: 860px;
|
||||
padding: 0 28px;
|
||||
}
|
||||
.miletruth-hero .content-slider-item-heading,
|
||||
.miletruth-hero .content-slider-item-heading .heading-content {
|
||||
font-size: 60px;
|
||||
}
|
||||
.miletruth-hero .content-slider-item-text,
|
||||
.miletruth-hero .content-slider-item-text .text-content,
|
||||
.miletruth-hero .content-slider-item-text p {
|
||||
font-size: 19px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 1024px) {
|
||||
.mr-pic-card {
|
||||
border-radius: 24px;
|
||||
}
|
||||
.mr-pic-card img {
|
||||
max-height: 480px;
|
||||
object-fit: cover;
|
||||
}
|
||||
.miletruth-hero .content-slider .slide-content-inner {
|
||||
max-width: 760px;
|
||||
margin: 0 auto;
|
||||
padding: 0 24px;
|
||||
}
|
||||
.miletruth-hero .content-slider-item-heading,
|
||||
.miletruth-hero .content-slider-item-heading .heading-content {
|
||||
font-size: 50px;
|
||||
line-height: 1.1;
|
||||
}
|
||||
.miletruth-hero .content-slider-item-text,
|
||||
.miletruth-hero .content-slider-item-text .text-content,
|
||||
.miletruth-hero .content-slider-item-text p {
|
||||
font-size: 18px;
|
||||
line-height: 1.55;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.ev-section .ev-grid,
|
||||
.ev-grid--rev {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
.mr-pic-card {
|
||||
width: 100%;
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
.mr-pic-card img {
|
||||
max-height: 360px;
|
||||
object-fit: cover;
|
||||
}
|
||||
.miletruth-hero .content-slider .slide-content-inner {
|
||||
max-width: 620px;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
padding: 0 22px;
|
||||
}
|
||||
.miletruth-hero .content-slider-item-heading,
|
||||
.miletruth-hero .content-slider-item-heading .heading-content {
|
||||
font-size: 40px;
|
||||
line-height: 1.12;
|
||||
}
|
||||
.miletruth-hero .content-slider-item-text,
|
||||
.miletruth-hero .content-slider-item-text .text-content,
|
||||
.miletruth-hero .content-slider-item-text p {
|
||||
font-size: 16px;
|
||||
line-height: 1.55;
|
||||
}
|
||||
.miletruth-hero .content-slider.nav-h-position-right .owl-nav,
|
||||
.miletruth-hero .content-slider.nav-h-position-right .slider-footer {
|
||||
right: 18px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
.mr-pic-card img {
|
||||
max-height: 240px;
|
||||
object-fit: cover;
|
||||
}
|
||||
.mr-stats-grid {
|
||||
grid-template-columns: 1fr;
|
||||
padding: 0 14px;
|
||||
border-radius: 12px;
|
||||
}
|
||||
.mr-stat-item {
|
||||
padding: 20px;
|
||||
border-right: none !important;
|
||||
border-top: 1px solid rgba(0,0,0,0.07);
|
||||
}
|
||||
.mr-stat-num {
|
||||
font-size: clamp(28px, 8vw, 40px);
|
||||
}
|
||||
.miletruth-hero .content-slider .slide-content-inner {
|
||||
max-width: 100%;
|
||||
padding: 0 18px;
|
||||
}
|
||||
.miletruth-hero .content-slider-item-heading,
|
||||
.miletruth-hero .content-slider-item-heading .heading-content {
|
||||
font-size: 32px;
|
||||
line-height: 1.14;
|
||||
}
|
||||
.miletruth-hero .content-slider-item-text,
|
||||
.miletruth-hero .content-slider-item-text .text-content,
|
||||
.miletruth-hero .content-slider-item-text p {
|
||||
font-size: 15px;
|
||||
line-height: 1.5;
|
||||
}
|
||||
.miletruth-hero .content-slider-item-text {
|
||||
margin-top: 16px !important;
|
||||
}
|
||||
.miletruth-hero .content-slider.nav-h-position-right .owl-nav,
|
||||
.miletruth-hero .content-slider.nav-h-position-right .slider-footer {
|
||||
right: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
/* Responsive tweaks specifically for dark variant to ensure readable layout */
|
||||
@media (max-width: 1024px) {
|
||||
.ev-section--dark {
|
||||
padding: 80px 0;
|
||||
}
|
||||
.ev-section--dark .ev-container {
|
||||
padding: 0 20px;
|
||||
}
|
||||
.ev-section--dark .ev-title,
|
||||
.ev-section--dark .ev-desc {
|
||||
text-align: center;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
max-width: 100%;
|
||||
}
|
||||
.ev-section--dark .feature-grid {
|
||||
grid-template-columns: 1fr;
|
||||
gap: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 640px) {
|
||||
.ev-section--dark {
|
||||
padding: 60px 0;
|
||||
}
|
||||
.ev-section--dark .ev-title { font-size: clamp(28px, 7vw, 40px); }
|
||||
.ev-section--dark .ev-badge { margin-left: auto; margin-right: auto; }
|
||||
.ev-section--dark .feature-card {
|
||||
background: rgba(255,255,255,0.03);
|
||||
border-color: rgba(255,255,255,0.06);
|
||||
}
|
||||
}
|
||||
|
||||
/* MileTruth workflow carousel pagination */
|
||||
.miletruth-workflow-heading {
|
||||
color: #ffffff;
|
||||
font-family: 'Manrope', sans-serif;
|
||||
font-size: clamp(26px, 3vw, 44px);
|
||||
font-weight: 800;
|
||||
line-height: 1.12;
|
||||
letter-spacing: 0;
|
||||
margin: 0 0 24px;
|
||||
}
|
||||
|
||||
.elementor-63 .elementor-element.elementor-element-0a76e77 .testimonial-text p {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.elementor-63 .elementor-element.elementor-element-0a76e77 .miletruth-workflow-progress,
|
||||
.miletruth-workflow-progress.slider-footer.slider-footer-position-after {
|
||||
margin-top: 18px !important;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.miletruth-workflow-progress .slider-footer-content {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.miletruth-workflow-progress .slider-pagination {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-end;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.miletruth-workflow-progress .slider-progress-wrapper {
|
||||
color: #ffffff !important;
|
||||
font-family: 'Manrope', sans-serif;
|
||||
font-size: 14px;
|
||||
font-weight: 800;
|
||||
line-height: 1;
|
||||
letter-spacing: 0;
|
||||
}
|
||||
|
||||
.miletruth-workflow-progress .slider-progress-current,
|
||||
.miletruth-workflow-progress .slider-progress-all {
|
||||
color: #ffffff !important;
|
||||
}
|
||||
|
||||
.miletruth-workflow-progress .owl-dots {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 14px;
|
||||
}
|
||||
|
||||
.miletruth-workflow-progress .owl-dots .owl-dot,
|
||||
.miletruth-workflow-progress .owl-dots button.owl-dot {
|
||||
width: 43px;
|
||||
height: 2px;
|
||||
padding: 0 !important;
|
||||
border: 0 !important;
|
||||
border-radius: 0;
|
||||
background: rgba(255,255,255,0.9) !important;
|
||||
opacity: 1;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.miletruth-workflow-progress .owl-dots .owl-dot span {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.miletruth-workflow-progress .owl-dots .owl-dot.active,
|
||||
.miletruth-workflow-progress .owl-dots button.owl-dot.active {
|
||||
height: 3px;
|
||||
background: #C01227 !important;
|
||||
}
|
||||
18156
public/css/site.css
Normal file
18156
public/css/site.css
Normal file
File diff suppressed because it is too large
Load Diff
2000
public/css/vendor/vendor-elementor-base.css
vendored
2000
public/css/vendor/vendor-elementor-base.css
vendored
File diff suppressed because it is too large
Load Diff
2282
public/css/vendor/vendor-elementor-custom.min.css
vendored
2282
public/css/vendor/vendor-elementor-custom.min.css
vendored
File diff suppressed because it is too large
Load Diff
7724
public/css/vendor/vendor-elementor-generated-globals.css
vendored
7724
public/css/vendor/vendor-elementor-generated-globals.css
vendored
File diff suppressed because it is too large
Load Diff
25
public/css/vendor/vendor-elementor-hfe.css
vendored
25
public/css/vendor/vendor-elementor-hfe.css
vendored
@@ -1,25 +0,0 @@
|
||||
.footer-width-fixer {
|
||||
width: 100%
|
||||
}
|
||||
|
||||
.ehf-template-genesis.ehf-header .site-header .wrap,.ehf-template-genesis.ehf-footer .site-footer .wrap,.ehf-template-generatepress.ehf-header .site-header .inside-header {
|
||||
width: 100%;
|
||||
padding: 0;
|
||||
max-width: 100%
|
||||
}
|
||||
|
||||
.ehf-template-generatepress.ehf-header .site-header,.ehf-template-generatepress.ehf-footer .site-footer {
|
||||
width: 100%;
|
||||
padding: 0;
|
||||
max-width: 100%;
|
||||
background-color: transparent!important
|
||||
}
|
||||
|
||||
.bhf-hidden {
|
||||
display: none
|
||||
}
|
||||
|
||||
.ehf-header #masthead {
|
||||
z-index: 99;
|
||||
position: relative
|
||||
}
|
||||
979
public/css/vendor/vendor-global-overrides.css
vendored
979
public/css/vendor/vendor-global-overrides.css
vendored
@@ -1,979 +0,0 @@
|
||||
/*
|
||||
Theme Name: Logico Child
|
||||
Description: Logico Child Theme
|
||||
Theme URI: https://example.com/themes/logico
|
||||
Author: Artureanec
|
||||
Author URI: https://example.com
|
||||
Template: logico
|
||||
Version: 1.0.0
|
||||
License: GNU General Public License version 3.0
|
||||
License URI: http://www.gnu.org/licenses/gpl-3.0.html
|
||||
Text Domain: logico-child
|
||||
*/
|
||||
|
||||
/* =Theme customization starts here
|
||||
------------------------------------------------------- */
|
||||
|
||||
/* Hide mobile-specific logo by default */
|
||||
.logo-mobile {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
/* ============================================================
|
||||
MOBILE & TABLET HEADER REFINEMENT (< 1024px)
|
||||
Transition to mobile pill-shape earlier to prevent desktop overlap/wrapping
|
||||
============================================================ */
|
||||
|
||||
@media (max-width: 1024px) {
|
||||
|
||||
/* Logo toggling */
|
||||
.logo-desktop {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.logo-mobile {
|
||||
display: block !important;
|
||||
}
|
||||
|
||||
/* 1. Header Wrapper (Outer): Position & Spacing */
|
||||
.elementor-5180 .elementor-element.elementor-element-466de1b {
|
||||
position: fixed !important;
|
||||
top: 30px !important;
|
||||
left: 0 !important;
|
||||
right: 0 !important;
|
||||
width: 100% !important;
|
||||
padding-left: 20px !important;
|
||||
padding-right: 20px !important;
|
||||
height: auto !important;
|
||||
z-index: 10000 !important;
|
||||
background: transparent !important;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
/* 2. The Header Box / Card (Inner) */
|
||||
.elementor-5180 .elementor-element.elementor-element-e052838 {
|
||||
margin: 0 10px auto !important;
|
||||
width: 100% !important;
|
||||
max-width: 100% !important;
|
||||
background-color: #ffffff !important;
|
||||
border-radius: 25px !important;
|
||||
overflow: hidden !important;
|
||||
box-shadow: 0 12px 30px rgba(0, 0, 0, 0.08) !important;
|
||||
pointer-events: all;
|
||||
display: flex !important;
|
||||
flex-direction: column !important;
|
||||
}
|
||||
|
||||
/* 3. Main Row Layout Container */
|
||||
.elementor-5180 .elementor-element.elementor-element-d681ece {
|
||||
display: flex !important;
|
||||
flex-direction: row !important;
|
||||
flex-wrap: nowrap !important;
|
||||
align-items: center !important;
|
||||
justify-content: space-between !important;
|
||||
width: 100% !important;
|
||||
padding: 12px 25px !important;
|
||||
min-height: 70px !important;
|
||||
box-sizing: border-box !important;
|
||||
gap: 0 !important;
|
||||
}
|
||||
|
||||
/* 4. Logo Container (Left) */
|
||||
.elementor-5180 .elementor-element.elementor-element-472172e {
|
||||
flex: 1 !important;
|
||||
display: flex !important;
|
||||
align-items: center !important;
|
||||
justify-content: flex-start !important;
|
||||
padding: 0 !important;
|
||||
margin: 0 !important;
|
||||
}
|
||||
|
||||
/* 5. Menu Container (Right / Hamburger) */
|
||||
.elementor-5180 .elementor-element.elementor-element-e44ee7e {
|
||||
flex: 0 0 auto !important;
|
||||
display: flex !important;
|
||||
align-items: center !important;
|
||||
justify-content: flex-end !important;
|
||||
padding: 0 !important;
|
||||
margin: 0 !important;
|
||||
}
|
||||
|
||||
/* 6. Logo Widget Adjustments */
|
||||
.elementor-5180 .elementor-element.elementor-element-846e53d {
|
||||
width: auto !important;
|
||||
margin: 0 !important;
|
||||
display: flex !important;
|
||||
align-items: center !important;
|
||||
max-width: none !important;
|
||||
}
|
||||
|
||||
.elementor-5180 .elementor-element.elementor-element-846e53d .hfe-site-logo .hfe-site-logo-container img {
|
||||
margin: 0 !important;
|
||||
max-width: none !important;
|
||||
}
|
||||
|
||||
.elementor-5180 .elementor-element.elementor-element-846e53d .logo-mobile {
|
||||
width: 180px !important;
|
||||
height: auto !important;
|
||||
min-width: 100px !important;
|
||||
}
|
||||
|
||||
/* 7. Menu Trigger (Hamburger) alignment */
|
||||
.elementor-5180 .elementor-element.elementor-element-0b7bf6f .menu-trigger {
|
||||
display: flex !important;
|
||||
align-items: center !important;
|
||||
justify-content: flex-end !important;
|
||||
padding: 5px !important;
|
||||
margin: 0 !important;
|
||||
}
|
||||
|
||||
/* Hamburger icon customization */
|
||||
.elementor-5180 .elementor-element.elementor-element-0b7bf6f .hamburger {
|
||||
width: 30px !important;
|
||||
}
|
||||
|
||||
.elementor-5180 .elementor-element.elementor-element-0b7bf6f .hamburger span {
|
||||
background-color: #1f1f1f !important;
|
||||
height: 2px !important;
|
||||
margin-bottom: 5px !important;
|
||||
}
|
||||
|
||||
/* Hide desktop-only elements */
|
||||
.elementor-5180 .elementor-element.elementor-element-0b7bf6f .header-menu-container,
|
||||
.elementor-5180 .elementor-element.elementor-element-2f31137,
|
||||
.elementor-5180 .elementor-element.elementor-element-f961133 {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
/* ============================================================
|
||||
MEDIUM DESKTOP OPTIMIZATION (1025px - 1480px)
|
||||
Prevents logo/menu overlap on medium screens
|
||||
============================================================ */
|
||||
@media (min-width: 1025px) and (max-width: 1480px) {
|
||||
/* Reduce logo size slightly */
|
||||
.elementor-5180 .elementor-element.elementor-element-846e53d .logo-desktop {
|
||||
width: 130px !important;
|
||||
height: auto !important;
|
||||
}
|
||||
|
||||
/* Force single line and tighten spacing */
|
||||
.elementor-5180 .main-menu {
|
||||
display: flex !important;
|
||||
flex-wrap: nowrap !important;
|
||||
white-space: nowrap !important;
|
||||
}
|
||||
|
||||
.elementor-5180 .main-menu > li > a {
|
||||
padding-left: 8px !important;
|
||||
padding-right: 8px !important;
|
||||
font-size: 13px !important;
|
||||
}
|
||||
|
||||
/* Reduce container spacing */
|
||||
.elementor-5180 .elementor-element.elementor-element-d681ece {
|
||||
padding-left: 15px !important;
|
||||
padding-right: 15px !important;
|
||||
gap: 10px !important;
|
||||
}
|
||||
|
||||
/* Ensure the menu pill container stays compact */
|
||||
.header-menu-container {
|
||||
padding-left: 8px !important;
|
||||
padding-right: 8px !important;
|
||||
max-width: 750px !important;
|
||||
}
|
||||
|
||||
/* Scale down the CTA button */
|
||||
.elementor-5180 .logico-small-button {
|
||||
padding: 10px 20px !important;
|
||||
font-size: 13px !important;
|
||||
}
|
||||
}
|
||||
|
||||
/* Tablet Scaling (768px - 1024px) */
|
||||
@media (max-width: 1024px) and (min-width: 768px) {
|
||||
.elementor-5180 .elementor-element.elementor-element-846e53d .logo-mobile {
|
||||
width: 210px !important;
|
||||
}
|
||||
}
|
||||
|
||||
/* Standard Mobile Scaling */
|
||||
@media (max-width: 767px) {
|
||||
.elementor-5180 .elementor-element.elementor-element-846e53d .logo-mobile {
|
||||
width: 175px !important;
|
||||
}
|
||||
}
|
||||
|
||||
/* Extra Small Devise Optimization */
|
||||
@media (max-width: 480px) {
|
||||
.elementor-5180 .elementor-element.elementor-element-466de1b {
|
||||
top: 15px !important;
|
||||
padding-left: 15px !important;
|
||||
padding-right: 15px !important;
|
||||
}
|
||||
|
||||
.elementor-5180 .elementor-element.elementor-element-d681ece {
|
||||
padding: 6px 20px !important;
|
||||
min-height: 55px !important; /* Smaller height for small screens */
|
||||
}
|
||||
|
||||
.elementor-5180 .elementor-element.elementor-element-846e53d .logo-mobile {
|
||||
width: 155px !important; /* Scaled down for tiny screens */
|
||||
}
|
||||
}
|
||||
|
||||
/* ============================================================
|
||||
HOME SECTION IMAGE RESPONSIVENESS (wp-image-4481)
|
||||
============================================================ */
|
||||
|
||||
/* Fix for Tablet and Mobile */
|
||||
@media (max-width: 1024px) {
|
||||
.elementor-element.elementor-element-99768ba .elementor-widget-container img.wp-image-4481 {
|
||||
width: 100% !important;
|
||||
max-width: 450px !important;
|
||||
/* Prevent oversized/zoomed appearance on tablets */
|
||||
height: auto !important;
|
||||
aspect-ratio: auto !important;
|
||||
/* Maintain original proportions */
|
||||
object-fit: contain !important;
|
||||
/* Ensure no cropping of important content */
|
||||
margin: 0 auto !important;
|
||||
/* Centering */
|
||||
display: block !important;
|
||||
padding-bottom: 0px !important;
|
||||
/* Spacing below the image */
|
||||
}
|
||||
|
||||
/* Ensure parent container centers the image */
|
||||
.elementor-element.elementor-element-99768ba {
|
||||
text-align: center !important;
|
||||
}
|
||||
}
|
||||
|
||||
/* Specific scaling for small mobile phones */
|
||||
@media (max-width: 767px) {
|
||||
.elementor-element.elementor-element-99768ba .elementor-widget-container img.wp-image-4481 {
|
||||
max-width: 90% !important;
|
||||
/* Reduce scale on small screens */
|
||||
margin: 0 auto !important;
|
||||
border-radius: 18px !important;
|
||||
/* Consistent rounded edges */
|
||||
}
|
||||
}
|
||||
|
||||
/* ============================================================
|
||||
WHY CHOOSE DOORMILE SECTION RESPONSIVENESS (< 1020px)
|
||||
============================================================ */
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
/* ============================================================
|
||||
PROBLEM SECTION - Responsive Layout Fix
|
||||
Targets: "Fragmented Logistics is Broken" section only
|
||||
No button styles included.
|
||||
============================================================ */
|
||||
|
||||
/* Prevent horizontal overflow on the outer container */
|
||||
.elementor-element.section-shrink-custom[data-id="30fd9d1"],
|
||||
.elementor-element.section-shrink-custom[data-id="30fd9d1"] > .e-con-inner {
|
||||
overflow-x: hidden !important;
|
||||
box-sizing: border-box !important;
|
||||
}
|
||||
|
||||
@media (max-width: 1024px) {
|
||||
/* Full width with padding so content doesn't touch screen edges */
|
||||
.elementor-element.section-shrink-custom[data-id="30fd9d1"] > .e-con-inner {
|
||||
max-width: 100% !important;
|
||||
width: 100% !important;
|
||||
padding-left: 20px !important;
|
||||
padding-right: 20px !important;
|
||||
}
|
||||
|
||||
/* The 4-icon stat grid: wrap into 2 columns on tablet */
|
||||
.elementor-element.elementor-element-e09c20e {
|
||||
grid-template-columns: repeat(2, 1fr) !important;
|
||||
gap: 24px !important;
|
||||
}
|
||||
|
||||
/* Description text: prevent overflow */
|
||||
.elementor-element.elementor-element-5a5c397,
|
||||
.elementor-element.elementor-element-07cd509 {
|
||||
width: 100% !important;
|
||||
max-width: 100% !important;
|
||||
box-sizing: border-box !important;
|
||||
}
|
||||
|
||||
.elementor-element.elementor-element-07cd509 p {
|
||||
width: 100% !important;
|
||||
overflow-wrap: break-word !important;
|
||||
word-break: break-word !important;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
/* Single column on small mobile */
|
||||
.elementor-element.elementor-element-e09c20e {
|
||||
grid-template-columns: 1fr !important;
|
||||
}
|
||||
}
|
||||
|
||||
/* ============================================================
|
||||
HEADER SCROLL VISIBILITY
|
||||
Home page: hidden until scroll. All other pages: always visible.
|
||||
============================================================ */
|
||||
|
||||
/* Home page: header fades in after scroll (JS adds .header-visible-scrolled) */
|
||||
.is-home-page .header-hide-until-scroll {
|
||||
opacity: 0 !important;
|
||||
visibility: hidden !important;
|
||||
transform: translateY(-20px);
|
||||
transition: opacity 0.5s ease, visibility 0.5s ease, transform 0.5s ease !important;
|
||||
}
|
||||
|
||||
.is-home-page .header-hide-until-scroll.header-visible-scrolled {
|
||||
opacity: 1 !important;
|
||||
visibility: visible !important;
|
||||
transform: translateY(0) !important;
|
||||
}
|
||||
|
||||
/* Non-home pages: always show header */
|
||||
body:not(.is-home-page) .header-hide-until-scroll {
|
||||
opacity: 1 !important;
|
||||
visibility: visible !important;
|
||||
transform: translateY(0) !important;
|
||||
}
|
||||
|
||||
/* ============================================================
|
||||
PROBLEM SECTION - Responsive Text & Layout Fix
|
||||
============================================================ */
|
||||
|
||||
/* Prevent overflow at the section container level */
|
||||
.elementor-element.section-shrink-custom[data-id="30fd9d1"] {
|
||||
overflow-x: hidden !important;
|
||||
max-width: 100vw !important;
|
||||
}
|
||||
|
||||
.elementor-element.section-shrink-custom[data-id="30fd9d1"] > .e-con-inner {
|
||||
max-width: 1480px !important;
|
||||
width: 100% !important;
|
||||
margin-left: auto !important;
|
||||
margin-right: auto !important;
|
||||
box-sizing: border-box !important;
|
||||
}
|
||||
|
||||
/* @media (min-width: 1300px) {
|
||||
|
||||
.elementor-element.section-shrink-custom[data-id="30fd9d1"] > .e-con-inner {
|
||||
max-width: 1300px !important;
|
||||
padding: 0px 50px 10px !important;
|
||||
}
|
||||
} */
|
||||
|
||||
@media (max-width: 1024px) {
|
||||
.elementor-element.section-shrink-custom[data-id="30fd9d1"] > .e-con-inner {
|
||||
max-width: 100% !important;
|
||||
padding-left: 20px !important;
|
||||
padding-right: 20px !important;
|
||||
}
|
||||
|
||||
/* Left column (heading + stats + text): full width */
|
||||
.elementor-element.elementor-element-03db5d7 {
|
||||
width: 100% !important;
|
||||
max-width: 100% !important;
|
||||
box-sizing: border-box !important;
|
||||
}
|
||||
|
||||
/* Stats grid: 2 columns on tablet */
|
||||
.elementor-element.elementor-element-e09c20e {
|
||||
display: grid !important;
|
||||
grid-template-columns: repeat(2, 1fr) !important;
|
||||
gap: 20px !important;
|
||||
width: 100% !important;
|
||||
}
|
||||
|
||||
/* Description text block: prevent overflow */
|
||||
.elementor-element.elementor-element-5a5c397 {
|
||||
width: 100% !important;
|
||||
max-width: 100% !important;
|
||||
box-sizing: border-box !important;
|
||||
}
|
||||
|
||||
.elementor-element.elementor-element-07cd509 {
|
||||
width: 100% !important;
|
||||
max-width: 100% !important;
|
||||
box-sizing: border-box !important;
|
||||
}
|
||||
|
||||
/* Force all text to wrap properly */
|
||||
.section-shrink-custom p,
|
||||
.section-shrink-custom h3,
|
||||
.section-shrink-custom span {
|
||||
max-width: 100% !important;
|
||||
word-break: break-word !important;
|
||||
overflow-wrap: break-word !important;
|
||||
white-space: normal !important;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
/* Single column stats on small phones */
|
||||
.elementor-element.elementor-element-e09c20e {
|
||||
grid-template-columns: 1fr !important;
|
||||
}
|
||||
}
|
||||
|
||||
/* ============================================================
|
||||
PAGE LOADER - Must cover header on all viewports
|
||||
Header uses z-index: 10000 so loader needs higher
|
||||
============================================================ */
|
||||
.page-loader-container {
|
||||
z-index: 100000 !important;
|
||||
}
|
||||
|
||||
/* ============================================================
|
||||
CONNECTED LOGISTICS - India Map Image Sizing
|
||||
Widen the map column to fill the gap on the right side
|
||||
============================================================ */
|
||||
@media (min-width: 1021px) {
|
||||
/* Image column: force wider */
|
||||
|
||||
|
||||
/* Text column: take the remaining space */
|
||||
|
||||
|
||||
/* Map image: fill the wider container */
|
||||
|
||||
}
|
||||
|
||||
/* ============================================================
|
||||
INDUSTRY SOLUTIONS - Hover Effect Override
|
||||
Image fills box, content shows on hover with #c01227 shade.
|
||||
============================================================ */
|
||||
|
||||
.elementor-element.elementor-element-b891c78,
|
||||
.elementor-element.elementor-element-9b933db,
|
||||
.elementor-element.elementor-element-280b0dc {
|
||||
position: relative !important;
|
||||
overflow: hidden !important;
|
||||
height: 620px !important;
|
||||
display: flex !important;
|
||||
flex-direction: column !important;
|
||||
justify-content: flex-end !important;
|
||||
align-items: flex-start !important;
|
||||
text-align: left !important;
|
||||
padding: 40px 40px 80px 40px !important;
|
||||
|
||||
|
||||
border-radius: 20px !important;
|
||||
background-color: #f7f7f7 !important;
|
||||
transition: all 0.4s ease !important;
|
||||
}
|
||||
|
||||
|
||||
/* Make image fill the entire card box */
|
||||
.elementor-element.elementor-element-b891c78 .elementor-widget-image,
|
||||
.elementor-element.elementor-element-9b933db .elementor-widget-image,
|
||||
.elementor-element.elementor-element-280b0dc .elementor-widget-image {
|
||||
position: absolute !important;
|
||||
top: 0 !important;
|
||||
left: 0 !important;
|
||||
width: 100% !important;
|
||||
height: 100% !important;
|
||||
margin: 0 !important;
|
||||
padding: 0 !important;
|
||||
z-index: 1 !important;
|
||||
}
|
||||
|
||||
.elementor-element.elementor-element-b891c78 .elementor-widget-image img,
|
||||
.elementor-element.elementor-element-9b933db .elementor-widget-image img,
|
||||
.elementor-element.elementor-element-280b0dc .elementor-widget-image img {
|
||||
width: 100% !important;
|
||||
height: 100% !important;
|
||||
object-fit: cover !important;
|
||||
border-radius: 20px !important;
|
||||
transition: transform 0.6s ease !important;
|
||||
}
|
||||
|
||||
/* Persistent bottom overlay before hover #c01227 */
|
||||
.elementor-element.elementor-element-b891c78::after,
|
||||
.elementor-element.elementor-element-9b933db::after,
|
||||
.elementor-element.elementor-element-280b0dc::after {
|
||||
content: "" !important;
|
||||
position: absolute !important;
|
||||
bottom: 0 !important;
|
||||
left: 0 !important;
|
||||
width: 100% !important;
|
||||
height: 120px !important;
|
||||
background-image: linear-gradient(to top, rgba(34, 34, 34, 0.9), rgba(192, 18, 39, 0)) !important;
|
||||
z-index: 1 !important;
|
||||
opacity: 1 !important;
|
||||
border-radius: 0 0 20px 20px !important;
|
||||
transition: opacity 0.4s ease !important;
|
||||
pointer-events: none !important;
|
||||
}
|
||||
|
||||
.elementor-element.elementor-element-b891c78:hover::after,
|
||||
.elementor-element.elementor-element-9b933db:hover::after,
|
||||
.elementor-element.elementor-element-280b0dc:hover::after {
|
||||
opacity: 0 !important;
|
||||
}
|
||||
|
||||
/* Hover background shade overlay #c01227 */
|
||||
|
||||
.elementor-element.elementor-element-b891c78::before,
|
||||
.elementor-element.elementor-element-9b933db::before,
|
||||
.elementor-element.elementor-element-280b0dc::before {
|
||||
content: "" !important;
|
||||
position: absolute !important;
|
||||
top: 0 !important;
|
||||
left: 0 !important;
|
||||
width: 100% !important;
|
||||
height: 100% !important;
|
||||
background-image: linear-gradient(to top, rgba(192, 18, 39, 0.95), rgba(192, 18, 39, 0.2)) !important;
|
||||
|
||||
z-index: 2 !important;
|
||||
opacity: 0 !important;
|
||||
transition: opacity 0.4s ease !important;
|
||||
border-radius: 20px !important;
|
||||
|
||||
|
||||
}
|
||||
|
||||
.elementor-element.elementor-element-b891c78:hover::before,
|
||||
.elementor-element.elementor-element-9b933db:hover::before,
|
||||
.elementor-element.elementor-element-280b0dc:hover::before {
|
||||
opacity: 1 !important;
|
||||
}
|
||||
|
||||
/* Hide content until hover (explicitly target text and lists) */
|
||||
.elementor-element.elementor-element-b891c78 .elementor-widget-text-editor,
|
||||
.elementor-element.elementor-element-9b933db .elementor-widget-text-editor,
|
||||
.elementor-element.elementor-element-280b0dc .elementor-widget-text-editor,
|
||||
.elementor-element.elementor-element-b891c78 .elementor-widget-divider,
|
||||
.elementor-element.elementor-element-9b933db .elementor-widget-divider,
|
||||
.elementor-element.elementor-element-280b0dc .elementor-widget-divider,
|
||||
.elementor-element.elementor-element-b891c78 .hover-list-content,
|
||||
.elementor-element.elementor-element-9b933db .hover-list-content,
|
||||
.elementor-element.elementor-element-280b0dc .hover-list-content {
|
||||
position: relative !important;
|
||||
z-index: 3 !important;
|
||||
opacity: 0 !important;
|
||||
transform: translateY(20px) !important;
|
||||
transition: opacity 0.4s ease, transform 0.4s ease !important;
|
||||
}
|
||||
|
||||
.elementor-element.elementor-element-b891c78:hover .elementor-widget-text-editor,
|
||||
.elementor-element.elementor-element-9b933db:hover .elementor-widget-text-editor,
|
||||
.elementor-element.elementor-element-280b0dc:hover .elementor-widget-text-editor,
|
||||
.elementor-element.elementor-element-b891c78:hover .elementor-widget-divider,
|
||||
.elementor-element.elementor-element-9b933db:hover .elementor-widget-divider,
|
||||
.elementor-element.elementor-element-280b0dc:hover .elementor-widget-divider,
|
||||
.elementor-element.elementor-element-b891c78:hover .hover-list-content,
|
||||
.elementor-element.elementor-element-9b933db:hover .hover-list-content,
|
||||
.elementor-element.elementor-element-280b0dc:hover .hover-list-content {
|
||||
opacity: 1 !important;
|
||||
transform: translateY(0) !important;
|
||||
}
|
||||
|
||||
|
||||
/* Force text to be white and clean */
|
||||
.elementor-element.elementor-element-b891c78 .logico-title,
|
||||
.elementor-element.elementor-element-9b933db .logico-title,
|
||||
.elementor-element.elementor-element-280b0dc .logico-title,
|
||||
.elementor-element.elementor-element-b891c78 p,
|
||||
.elementor-element.elementor-element-9b933db p,
|
||||
.elementor-element.elementor-element-280b0dc p {
|
||||
position: relative !important;
|
||||
z-index: 5 !important;
|
||||
font-size: 20px !important;
|
||||
}
|
||||
|
||||
.elementor-element.elementor-element-b891c78 .logico-title,
|
||||
.elementor-element.elementor-element-9b933db .logico-title,
|
||||
.elementor-element.elementor-element-280b0dc .logico-title {
|
||||
color: #fff !important;
|
||||
text-shadow: 0px 2px 10px rgba(255, 255, 255, 0.4) !important;
|
||||
font-size: 24px !important;
|
||||
font-weight: 700 !important;
|
||||
margin-bottom: 15px !important;
|
||||
text-align: left !important;
|
||||
transition: all 0.3s ease !important;
|
||||
position: relative !important;
|
||||
padding-left: 0px !important;
|
||||
cursor: pointer !important;
|
||||
}
|
||||
|
||||
.elementor-element.elementor-element-b891c78:hover .logico-title,
|
||||
.elementor-element.elementor-element-9b933db:hover .logico-title,
|
||||
.elementor-element.elementor-element-280b0dc:hover .logico-title {
|
||||
padding-left: 45px !important;
|
||||
}
|
||||
|
||||
|
||||
/* White Circle Arrow Icon Wrapper */
|
||||
.title-icon {
|
||||
display: inline-flex !important;
|
||||
align-items: center !important;
|
||||
justify-content: center !important;
|
||||
position: absolute !important;
|
||||
left: 0 !important;
|
||||
top: 50% !important;
|
||||
transform: translateY(-50%) scale(0.6) !important;
|
||||
width: 32px !important;
|
||||
height: 32px !important;
|
||||
background-color: #ffffff !important;
|
||||
border-radius: 50% !important;
|
||||
color: #000000 !important;
|
||||
opacity: 0 !important;
|
||||
transition: opacity 0.3s ease, transform 0.3s ease !important;
|
||||
}
|
||||
|
||||
.elementor-element.elementor-element-b891c78:hover .title-icon,
|
||||
.elementor-element.elementor-element-9b933db:hover .title-icon,
|
||||
.elementor-element.elementor-element-280b0dc:hover .title-icon {
|
||||
opacity: 1 !important;
|
||||
transform: translateY(-50%) scale(1) !important;
|
||||
}
|
||||
|
||||
|
||||
.title-icon svg {
|
||||
width: 18px !important;
|
||||
height: 18px !important;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
.elementor-element.elementor-element-b891c78:hover .logico-title,
|
||||
.elementor-element.elementor-element-9b933db:hover .logico-title,
|
||||
.elementor-element.elementor-element-280b0dc:hover .logico-title,
|
||||
.elementor-element.elementor-element-b891c78:hover p,
|
||||
.elementor-element.elementor-element-9b933db:hover p,
|
||||
.elementor-element.elementor-element-280b0dc:hover p {
|
||||
color: #ffffff !important;
|
||||
}
|
||||
|
||||
|
||||
.elementor-element.elementor-element-b891c78:hover .elementor-divider-separator,
|
||||
.elementor-element.elementor-element-9b933db:hover .elementor-divider-separator,
|
||||
.elementor-element.elementor-element-280b0dc:hover .elementor-divider-separator {
|
||||
border-top-color: rgba(255, 255, 255, 0.4) !important;
|
||||
}
|
||||
|
||||
/* Lists styling on Hover */
|
||||
.hover-list-content {
|
||||
position: relative !important;
|
||||
z-index: 5 !important;
|
||||
opacity: 0 !important;
|
||||
transform: translateY(20px) !important;
|
||||
transition: opacity 0.4s ease 0.1s, transform 0.4s ease 0.1s !important; /* staggered entry */
|
||||
|
||||
width: 100% !important;
|
||||
margin-top: 25px !important;
|
||||
margin-bottom: 20px !important;
|
||||
|
||||
|
||||
}
|
||||
|
||||
.elementor-element.elementor-element-b891c78:hover .hover-list-content,
|
||||
.elementor-element.elementor-element-9b933db:hover .hover-list-content,
|
||||
.elementor-element.elementor-element-280b0dc:hover .hover-list-content {
|
||||
opacity: 1 !important;
|
||||
transform: translateY(0) !important;
|
||||
}
|
||||
|
||||
.list-section {
|
||||
margin-bottom: 25px !important;
|
||||
width: 100% !important;
|
||||
}
|
||||
|
||||
|
||||
.list-section:last-child {
|
||||
margin-bottom: 0 !important;
|
||||
}
|
||||
|
||||
.list-section-title {
|
||||
color: #e2e8f0 !important;
|
||||
font-size: 13px !important;
|
||||
font-weight: 700 !important;
|
||||
letter-spacing: 1.5px !important;
|
||||
margin-bottom: 12px !important;
|
||||
text-transform: uppercase !important;
|
||||
text-align: left !important;
|
||||
}
|
||||
|
||||
.hover-items-list {
|
||||
list-style: none !important;
|
||||
padding: 0 !important;
|
||||
margin: 0 !important;
|
||||
}
|
||||
|
||||
.hover-items-list li {
|
||||
display: flex !important;
|
||||
justify-content: flex-start !important;
|
||||
align-items: flex-start !important;
|
||||
gap: 12px !important;
|
||||
margin-bottom: 12px !important;
|
||||
color: #ffffff !important;
|
||||
font-size: 16px !important;
|
||||
line-height: 1.4 !important;
|
||||
text-align: left !important;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
.hover-items-list li::before {
|
||||
content: "•" !important;
|
||||
color: #ffffff !important;
|
||||
font-size: 20px !important;
|
||||
line-height: 1 !important;
|
||||
margin-top: -3px !important;
|
||||
flex-shrink: 0 !important;
|
||||
}
|
||||
|
||||
|
||||
.hover-items-list li:last-child {
|
||||
margin-bottom: 0 !important;
|
||||
}
|
||||
|
||||
.hover-items-list li span {
|
||||
color: #ffffff !important;
|
||||
}
|
||||
|
||||
/* Push headers to bottom */
|
||||
.elementor-element.elementor-element-b891c78 .elementor-widget-logico_heading,
|
||||
.elementor-element.elementor-element-9b933db .elementor-widget-logico_heading,
|
||||
.elementor-element.elementor-element-280b0dc .elementor-widget-logico_heading {
|
||||
position: absolute !important;
|
||||
bottom: 30px !important;
|
||||
left: 30px !important;
|
||||
z-index: 10 !important;
|
||||
margin: 0 !important;
|
||||
text-align: left !important;
|
||||
|
||||
|
||||
}
|
||||
|
||||
/* ============================================================
|
||||
FOOTER CONTACT LINKS - Contrast Fix
|
||||
============================================================ */
|
||||
.elementor-6585 a,
|
||||
.elementor-6585 a::before,
|
||||
.elementor-6585 a::after {
|
||||
color: #FFFFFF !important;
|
||||
text-decoration: none !important;
|
||||
transition: all 0.4s ease-in-out !important;
|
||||
}
|
||||
|
||||
/* Apply red hover color only to simple links, avoiding buttons */
|
||||
.elementor-6585 a:not(.logico-alter-button):hover {
|
||||
color: #c01227 !important;
|
||||
}
|
||||
|
||||
.elementor-6585 a.logico-alter-button:hover {
|
||||
opacity: 0.9 !important;
|
||||
}
|
||||
|
||||
/* Specific fix for phone and email links to ensure no default theme underlines */
|
||||
.elementor-element-87be926 a,
|
||||
.elementor-element-ba67644 a {
|
||||
border-bottom: none !important;
|
||||
text-decoration: none !important;
|
||||
}
|
||||
|
||||
/* ============================================================
|
||||
SOCIAL ICONS VISIBILITY FIX
|
||||
Ensures both font-based and SVG icons are visible and properly sized.
|
||||
Targeting the common .wrapper-socials class used across the site.
|
||||
============================================================ */
|
||||
.e-font-icon-svg {
|
||||
display: inline-block;
|
||||
width: 1em;
|
||||
height: 1em;
|
||||
fill: currentColor;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.elementor-social-icon svg {
|
||||
width: 25px;
|
||||
height: 25px;
|
||||
}
|
||||
|
||||
.fab, .fas, .far {
|
||||
display: inline-block !important;
|
||||
}
|
||||
|
||||
.wrapper-socials {
|
||||
list-style: none !important;
|
||||
padding: 0 !important;
|
||||
margin: 0 !important;
|
||||
display: flex !important;
|
||||
flex-wrap: wrap;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.wrapper-socials li {
|
||||
display: inline-block !important;
|
||||
margin: 0 !important;
|
||||
padding: 0 !important;
|
||||
}
|
||||
|
||||
.wrapper-socials li:before {
|
||||
content: none !important;
|
||||
}
|
||||
|
||||
.wrapper-socials a {
|
||||
display: flex !important;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
border-radius: 50%;
|
||||
background-color: rgba(0, 0, 0, 0.05);
|
||||
color: inherit;
|
||||
text-decoration: none !important;
|
||||
transition: all 0.3s ease;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.wrapper-socials a:hover {
|
||||
background-color: var(--logico-accent-color, #c01227);
|
||||
color: #fff !important;
|
||||
}
|
||||
|
||||
.wrapper-socials a svg {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
fill: currentColor;
|
||||
}
|
||||
|
||||
/* Global visibility enforcement for Elementor and other social icons */
|
||||
.elementor-social-icon,
|
||||
.e-font-icon-svg,
|
||||
.wrapper-socials i,
|
||||
.wrapper-socials svg {
|
||||
display: inline-block !important;
|
||||
visibility: visible !important;
|
||||
opacity: 1 !important;
|
||||
}
|
||||
|
||||
/* Ensure SVG icons have at least some size if not specified */
|
||||
svg.e-font-icon-svg,
|
||||
.elementor-social-icon svg {
|
||||
min-width: 16px;
|
||||
min-height: 16px;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
/* ============================================================
|
||||
REDESIGNED STEP CARDS (How It Works) - BLACK TEMPLATE
|
||||
============================================================ */
|
||||
.dm-step-card {
|
||||
background: #111111;
|
||||
border: 1px solid #222222;
|
||||
border-radius: 25px;
|
||||
padding: 35px;
|
||||
height: 100%;
|
||||
transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 20px;
|
||||
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
|
||||
margin: 20px;
|
||||
}
|
||||
|
||||
.dm-step-card:hover {
|
||||
border-color: #c01227;
|
||||
background: #161616;
|
||||
box-shadow: 0 30px 60px rgba(192, 18, 39, 0.3), 0 0 30px rgba(192, 18, 39, 0.15), 0 10px 25px rgba(0, 0, 0, 0.5);
|
||||
transform: translateY(-10px) scale(1.02);
|
||||
}
|
||||
|
||||
.dm-step-card__image {
|
||||
width: 100%;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.dm-step-card__image img {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
border-radius: 20px;
|
||||
object-fit: cover;
|
||||
display: block;
|
||||
opacity: 0.9;
|
||||
transition: opacity 0.3s ease;
|
||||
}
|
||||
|
||||
.dm-step-card:hover .dm-step-card__image img {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.dm-step-card__body {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.dm-step-card__num {
|
||||
color: #c01227;
|
||||
font-weight: 800;
|
||||
text-transform: uppercase;
|
||||
font-size: 13px;
|
||||
letter-spacing: 1.5px;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.dm-step-card__title {
|
||||
font-size: 26px;
|
||||
font-weight: 800;
|
||||
color: #ffffff;
|
||||
margin: 0;
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
.dm-step-card__text {
|
||||
font-size: 15px;
|
||||
line-height: 1.6;
|
||||
color: #aaaaaa;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.dm-step-card__list {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
margin: 10px 0 0 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.dm-step-card__list li {
|
||||
position: relative;
|
||||
padding-left: 28px;
|
||||
font-size: 14px;
|
||||
color: #dddddd;
|
||||
font-weight: 700;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
.dm-step-card__list li::before {
|
||||
content: "\f061"; /* FontAwesome arrow-right */
|
||||
font-family: "Font Awesome 6 Free";
|
||||
font-weight: 900;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 1px;
|
||||
color: #c01227;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
@@ -1,8 +0,0 @@
|
||||
@font-face {
|
||||
font-display: swap;
|
||||
font-family: 'fontello';
|
||||
src: url(/fonts/fontello.woff2?98791691) format("woff2");
|
||||
font-weight: 400;
|
||||
font-style: normal
|
||||
}
|
||||
|
||||
523
public/css/vendor/vendor-icons-fontello.css
vendored
523
public/css/vendor/vendor-icons-fontello.css
vendored
@@ -1,523 +0,0 @@
|
||||
[class^="icon-"]:before,[class*=" icon-"]:before {
|
||||
font-family: 'fontello';
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
speak: never;
|
||||
display: inline-block;
|
||||
text-decoration: inherit;
|
||||
width: 1em;
|
||||
text-align: center;
|
||||
font-variant: normal;
|
||||
text-transform: none;
|
||||
line-height: 1em;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale
|
||||
}
|
||||
|
||||
.icon-arrow-down:before {
|
||||
content: '\e800'
|
||||
}
|
||||
|
||||
.icon-arrow-right:before {
|
||||
content: '\e801'
|
||||
}
|
||||
|
||||
.icon-arrow-left:before {
|
||||
content: '\e802'
|
||||
}
|
||||
|
||||
.icon-arrow-top:before {
|
||||
content: '\e803'
|
||||
}
|
||||
|
||||
.icon-arrow-x-l-down:before {
|
||||
content: '\e804'
|
||||
}
|
||||
|
||||
.icon-arrow-x-r-down:before {
|
||||
content: '\e805'
|
||||
}
|
||||
|
||||
.icon-arrow-x-l-top:before {
|
||||
content: '\e806'
|
||||
}
|
||||
|
||||
.icon-button-arrow-x-l-down:before {
|
||||
content: '\e807'
|
||||
}
|
||||
|
||||
.icon-button-arrow-x-r-down:before {
|
||||
content: '\e808'
|
||||
}
|
||||
|
||||
.icon-button-arrow-x-l-top:before {
|
||||
content: '\e809'
|
||||
}
|
||||
|
||||
.icon-arrow-x-r-top:before {
|
||||
content: '\e80a'
|
||||
}
|
||||
|
||||
.icon-button-arrow-x-r-top:before {
|
||||
content: '\e80b'
|
||||
}
|
||||
|
||||
.icon-chevron-large-down:before {
|
||||
content: '\e80c'
|
||||
}
|
||||
|
||||
.icon-chevron-large-left:before {
|
||||
content: '\e80d'
|
||||
}
|
||||
|
||||
.icon-chevron-large-top:before {
|
||||
content: '\e80e'
|
||||
}
|
||||
|
||||
.icon-chevron-large-right:before {
|
||||
content: '\e80f'
|
||||
}
|
||||
|
||||
.icon-chevron-medium-down:before {
|
||||
content: '\e810'
|
||||
}
|
||||
|
||||
.icon-chevron-medium-left:before {
|
||||
content: '\e811'
|
||||
}
|
||||
|
||||
.icon-chevron-medium-right:before {
|
||||
content: '\e812'
|
||||
}
|
||||
|
||||
.icon-chevron-medium-top:before {
|
||||
content: '\e813'
|
||||
}
|
||||
|
||||
.icon-chevron-small-left:before {
|
||||
content: '\e814'
|
||||
}
|
||||
|
||||
.icon-chevron-small-top:before {
|
||||
content: '\e815'
|
||||
}
|
||||
|
||||
.icon-chevron-small-down:before {
|
||||
content: '\e816'
|
||||
}
|
||||
|
||||
.icon-chevron-small-right:before {
|
||||
content: '\e817'
|
||||
}
|
||||
|
||||
.icon-goods-export-1:before {
|
||||
content: '\e819'
|
||||
}
|
||||
|
||||
.icon-goods-export-2:before {
|
||||
content: '\e81a'
|
||||
}
|
||||
|
||||
.icon-goods-export-3:before {
|
||||
content: '\e81b'
|
||||
}
|
||||
|
||||
.icon-goods-export-4:before {
|
||||
content: '\e81c'
|
||||
}
|
||||
|
||||
.icon-goods-export-5:before {
|
||||
content: '\e81d'
|
||||
}
|
||||
|
||||
.icon-goods-export-6:before {
|
||||
content: '\e81e'
|
||||
}
|
||||
|
||||
.icon-goods-export-7:before {
|
||||
content: '\e81f'
|
||||
}
|
||||
|
||||
.icon-goods-export-8:before {
|
||||
content: '\e820'
|
||||
}
|
||||
|
||||
.icon-goods-export-9:before {
|
||||
content: '\e821'
|
||||
}
|
||||
|
||||
.icon-goods-export-10:before {
|
||||
content: '\e822'
|
||||
}
|
||||
|
||||
.icon-goods-export-11:before {
|
||||
content: '\e823'
|
||||
}
|
||||
|
||||
.icon-goods-export-12:before {
|
||||
content: '\e824'
|
||||
}
|
||||
|
||||
.icon-goods-export-13:before {
|
||||
content: '\e825'
|
||||
}
|
||||
|
||||
.icon-goods-export-14:before {
|
||||
content: '\e826'
|
||||
}
|
||||
|
||||
.icon-goods-export-15:before {
|
||||
content: '\e827'
|
||||
}
|
||||
|
||||
.icon-goods-export-16:before {
|
||||
content: '\e828'
|
||||
}
|
||||
|
||||
.icon-goods-export-17:before {
|
||||
content: '\e829'
|
||||
}
|
||||
|
||||
.icon-goods-export-18:before {
|
||||
content: '\e82a'
|
||||
}
|
||||
|
||||
.icon-goods-export-19:before {
|
||||
content: '\e82b'
|
||||
}
|
||||
|
||||
.icon-goods-export-20:before {
|
||||
content: '\e82c'
|
||||
}
|
||||
|
||||
.icon-goods-export-21:before {
|
||||
content: '\e82d'
|
||||
}
|
||||
|
||||
.icon-goods-export-22:before {
|
||||
content: '\e82e'
|
||||
}
|
||||
|
||||
.icon-goods-export-23:before {
|
||||
content: '\e82f'
|
||||
}
|
||||
|
||||
.icon-goods-export-24:before {
|
||||
content: '\e830'
|
||||
}
|
||||
|
||||
.icon-goods-export-25:before {
|
||||
content: '\e831'
|
||||
}
|
||||
|
||||
.icon-goods-export-26:before {
|
||||
content: '\e832'
|
||||
}
|
||||
|
||||
.icon-goods-export-27:before {
|
||||
content: '\e833'
|
||||
}
|
||||
|
||||
.icon-goods-export-28:before {
|
||||
content: '\e834'
|
||||
}
|
||||
|
||||
.icon-goods-export-29:before {
|
||||
content: '\e835'
|
||||
}
|
||||
|
||||
.icon-goods-export-30:before {
|
||||
content: '\e836'
|
||||
}
|
||||
|
||||
.icon-goods-export-31:before {
|
||||
content: '\e837'
|
||||
}
|
||||
|
||||
.icon-goods-export-32:before {
|
||||
content: '\e838'
|
||||
}
|
||||
|
||||
.icon-light-container:before {
|
||||
content: '\e839'
|
||||
}
|
||||
|
||||
.icon-light-delivery:before {
|
||||
content: '\e83a'
|
||||
}
|
||||
|
||||
.icon-light-directions:before {
|
||||
content: '\e83b'
|
||||
}
|
||||
|
||||
.icon-light-storage:before {
|
||||
content: '\e83c'
|
||||
}
|
||||
|
||||
.icon-triangle-arrow-down:before {
|
||||
content: '\e83d'
|
||||
}
|
||||
|
||||
.icon-triangle-arrow-left:before {
|
||||
content: '\e83e'
|
||||
}
|
||||
|
||||
.icon-triangle-arrow-right:before {
|
||||
content: '\e83f'
|
||||
}
|
||||
|
||||
.icon-triangle-arrow-top:before {
|
||||
content: '\e840'
|
||||
}
|
||||
|
||||
.icon-air-delivery:before {
|
||||
content: '\e841'
|
||||
}
|
||||
|
||||
.icon-call:before {
|
||||
content: '\e842'
|
||||
}
|
||||
|
||||
.icon-cart:before {
|
||||
content: '\e843'
|
||||
}
|
||||
|
||||
.icon-calendar:before {
|
||||
content: '\e844'
|
||||
}
|
||||
|
||||
.icon-close:before {
|
||||
content: '\e845'
|
||||
}
|
||||
|
||||
.icon-container:before {
|
||||
content: '\e846'
|
||||
}
|
||||
|
||||
.icon-coupon:before {
|
||||
content: '\e847'
|
||||
}
|
||||
|
||||
.icon-crop:before {
|
||||
content: '\e848'
|
||||
}
|
||||
|
||||
.icon-download:before {
|
||||
content: '\e849'
|
||||
}
|
||||
|
||||
.icon-download-alter:before {
|
||||
content: '\e84a'
|
||||
}
|
||||
|
||||
.icon-eye:before {
|
||||
content: '\e84b'
|
||||
}
|
||||
|
||||
.icon-file-doc:before {
|
||||
content: '\e84c'
|
||||
}
|
||||
|
||||
.icon-file-file:before {
|
||||
content: '\e84d'
|
||||
}
|
||||
|
||||
.icon-file-pdf:before {
|
||||
content: '\e84e'
|
||||
}
|
||||
|
||||
.icon-garland:before {
|
||||
content: '\e84f'
|
||||
}
|
||||
|
||||
.icon-font:before {
|
||||
content: '\e850'
|
||||
}
|
||||
|
||||
.icon-half-logo:before {
|
||||
content: '\e851'
|
||||
}
|
||||
|
||||
.icon-logo:before {
|
||||
content: '\e852'
|
||||
}
|
||||
|
||||
.icon-location:before {
|
||||
content: '\e853'
|
||||
}
|
||||
|
||||
.icon-hiring:before {
|
||||
content: '\e854'
|
||||
}
|
||||
|
||||
.icon-mail:before {
|
||||
content: '\e855'
|
||||
}
|
||||
|
||||
.icon-package-delivery:before {
|
||||
content: '\e856'
|
||||
}
|
||||
|
||||
.icon-paint:before {
|
||||
content: '\e857'
|
||||
}
|
||||
|
||||
.icon-print:before {
|
||||
content: '\e858'
|
||||
}
|
||||
|
||||
.icon-resize:before {
|
||||
content: '\e85a'
|
||||
}
|
||||
|
||||
.icon-sidebar:before {
|
||||
content: '\e85b'
|
||||
}
|
||||
|
||||
.icon-search:before {
|
||||
content: '\e85c'
|
||||
}
|
||||
|
||||
.icon-side-menu-black:before {
|
||||
content: '\e85d'
|
||||
}
|
||||
|
||||
.icon-side-menu-light:before {
|
||||
content: '\e85e'
|
||||
}
|
||||
|
||||
.icon-star-light:before {
|
||||
content: '\e861'
|
||||
}
|
||||
|
||||
.icon-star:before {
|
||||
content: '\e862'
|
||||
}
|
||||
|
||||
.icon-supply-chain:before {
|
||||
content: '\e863'
|
||||
}
|
||||
|
||||
.icon-tap:before {
|
||||
content: '\e864'
|
||||
}
|
||||
|
||||
.icon-terms:before {
|
||||
content: '\e865'
|
||||
}
|
||||
|
||||
.icon-translate:before {
|
||||
content: '\e866'
|
||||
}
|
||||
|
||||
.icon-trolley:before {
|
||||
content: '\e867'
|
||||
}
|
||||
|
||||
.icon-update:before {
|
||||
content: '\e868'
|
||||
}
|
||||
|
||||
.icon-user:before {
|
||||
content: '\e869'
|
||||
}
|
||||
|
||||
.icon-solid-warehousing-container:before {
|
||||
content: '\e86a'
|
||||
}
|
||||
|
||||
.icon-solid-warehousing-conveyor:before {
|
||||
content: '\e86b'
|
||||
}
|
||||
|
||||
.icon-solid-warehousing-delivery:before {
|
||||
content: '\e86c'
|
||||
}
|
||||
|
||||
.icon-solid-warehousing-hand-loader:before {
|
||||
content: '\e86d'
|
||||
}
|
||||
|
||||
.icon-solid-warehousing-loader:before {
|
||||
content: '\e86e'
|
||||
}
|
||||
|
||||
.icon-solid-warehousing-loader-in-work:before {
|
||||
content: '\e86f'
|
||||
}
|
||||
|
||||
.icon-solid-warehousing-manual-loader-box:before {
|
||||
content: '\e870'
|
||||
}
|
||||
|
||||
.icon-solid-warehousing-manual-transportation:before {
|
||||
content: '\e871'
|
||||
}
|
||||
|
||||
.icon-solid-warehousing-scales:before {
|
||||
content: '\e872'
|
||||
}
|
||||
|
||||
.icon-solid-warehousing-scanner:before {
|
||||
content: '\e873'
|
||||
}
|
||||
|
||||
.icon-solid-warehousing-palett:before {
|
||||
content: '\e874'
|
||||
}
|
||||
|
||||
.icon-solid-warehousing-security:before {
|
||||
content: '\e875'
|
||||
}
|
||||
|
||||
.icon-solid-warehousing-storage:before {
|
||||
content: '\e876'
|
||||
}
|
||||
|
||||
.icon-solid-warehousing-truck:before {
|
||||
content: '\e877'
|
||||
}
|
||||
|
||||
.icon-solid-warehousing-warehouse:before {
|
||||
content: '\e878'
|
||||
}
|
||||
|
||||
.icon-solid-warehousing-autoloader:before {
|
||||
content: '\e879'
|
||||
}
|
||||
|
||||
.icon-check:before {
|
||||
content: '\e87a'
|
||||
}
|
||||
|
||||
.icon-check-alter:before {
|
||||
content: '\e87b'
|
||||
}
|
||||
|
||||
.icon-quote-left:before {
|
||||
content: '\e87c'
|
||||
}
|
||||
|
||||
.icon-quote-right:before {
|
||||
content: '\e87d'
|
||||
}
|
||||
|
||||
.icon-quote-right-light:before {
|
||||
content: '\e87e'
|
||||
}
|
||||
|
||||
.icon-play:before {
|
||||
content: '\e8a2'
|
||||
}
|
||||
|
||||
.icon-play-active:before {
|
||||
content: '\e8a3'
|
||||
}
|
||||
|
||||
.icon-icon-rounded:before {
|
||||
content: '\e8f9'
|
||||
}
|
||||
|
||||
.icon-icon-angular:before {
|
||||
content: '\e8fa'
|
||||
}
|
||||
200
public/css/vendor/vendor-layout-main.css
vendored
200
public/css/vendor/vendor-layout-main.css
vendored
@@ -1,200 +0,0 @@
|
||||
/*
|
||||
Theme Name: Logico Child
|
||||
Description: Logico Child Theme
|
||||
Theme URI: https://example.com/themes/logico
|
||||
Author: Artureanec
|
||||
Author URI: https://example.com
|
||||
Template: logico
|
||||
Version: 1.0.0
|
||||
License: GNU General Public License version 3.0
|
||||
License URI: http://www.gnu.org/licenses/gpl-3.0.html
|
||||
Text Domain: logico-child
|
||||
*/
|
||||
|
||||
/* =Theme customization starts here
|
||||
------------------------------------------------------- */
|
||||
|
||||
/* Hide mobile-specific logo by default */
|
||||
.logo-mobile {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
/* ============================================================
|
||||
MOBILE & TABLET HEADER REFINEMENT (< 1024px)
|
||||
Transition to mobile pill-shape earlier to prevent desktop overlap/wrapping
|
||||
============================================================ */
|
||||
|
||||
@media (max-width: 1024px) {
|
||||
|
||||
/* Logo toggling */
|
||||
.logo-desktop {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.logo-mobile {
|
||||
display: block !important;
|
||||
}
|
||||
|
||||
/* 1. Header Wrapper (Outer): Position & Spacing */
|
||||
.elementor-5180 .elementor-element.elementor-element-466de1b {
|
||||
position: fixed !important;
|
||||
top: 30px !important;
|
||||
left: 0 !important;
|
||||
right: 0 !important;
|
||||
width: 100% !important;
|
||||
padding-left: 20px !important;
|
||||
padding-right: 20px !important;
|
||||
height: auto !important;
|
||||
z-index: 10000 !important;
|
||||
background: transparent !important;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
/* 2. The Header Box / Card (Inner) */
|
||||
.elementor-5180 .elementor-element.elementor-element-e052838 {
|
||||
margin: 0 10px auto !important;
|
||||
width: 100% !important;
|
||||
max-width: 100% !important;
|
||||
background-color: #ffffff !important;
|
||||
border-radius: 25px !important;
|
||||
overflow: hidden !important;
|
||||
box-shadow: 0 12px 30px rgba(0, 0, 0, 0.08) !important;
|
||||
pointer-events: all;
|
||||
display: flex !important;
|
||||
flex-direction: column !important;
|
||||
}
|
||||
|
||||
/* 3. Main Row Layout Container */
|
||||
.elementor-5180 .elementor-element.elementor-element-d681ece {
|
||||
display: flex !important;
|
||||
flex-direction: row !important;
|
||||
flex-wrap: nowrap !important;
|
||||
align-items: center !important;
|
||||
justify-content: space-between !important;
|
||||
width: 100% !important;
|
||||
padding: 12px 25px !important;
|
||||
min-height: 70px !important;
|
||||
box-sizing: border-box !important;
|
||||
gap: 0 !important;
|
||||
}
|
||||
|
||||
/* 4. Logo Container (Left) */
|
||||
.elementor-5180 .elementor-element.elementor-element-472172e {
|
||||
flex: 1 !important;
|
||||
display: flex !important;
|
||||
align-items: center !important;
|
||||
justify-content: flex-start !important;
|
||||
padding: 0 !important;
|
||||
margin: 0 !important;
|
||||
}
|
||||
|
||||
/* 5. Menu Container (Right / Hamburger) */
|
||||
.elementor-5180 .elementor-element.elementor-element-e44ee7e {
|
||||
flex: 0 0 auto !important;
|
||||
display: flex !important;
|
||||
align-items: center !important;
|
||||
justify-content: flex-end !important;
|
||||
padding: 0 !important;
|
||||
margin: 0 !important;
|
||||
}
|
||||
|
||||
/* 6. Logo Widget Adjustments */
|
||||
.elementor-5180 .elementor-element.elementor-element-846e53d {
|
||||
width: auto !important;
|
||||
margin: 0 !important;
|
||||
display: flex !important;
|
||||
align-items: center !important;
|
||||
max-width: none !important;
|
||||
}
|
||||
|
||||
.elementor-5180 .elementor-element.elementor-element-846e53d .hfe-site-logo .hfe-site-logo-container img {
|
||||
margin: 0 !important;
|
||||
max-width: none !important;
|
||||
}
|
||||
|
||||
.elementor-5180 .elementor-element.elementor-element-846e53d .logo-mobile {
|
||||
width: 180px !important;
|
||||
height: auto !important;
|
||||
min-width: 100px !important;
|
||||
}
|
||||
|
||||
/* 7. Menu Trigger (Hamburger) alignment */
|
||||
.elementor-5180 .elementor-element.elementor-element-0b7bf6f .menu-trigger {
|
||||
display: flex !important;
|
||||
align-items: center !important;
|
||||
justify-content: flex-end !important;
|
||||
padding: 5px !important;
|
||||
margin: 0 !important;
|
||||
}
|
||||
|
||||
/* Hamburger icon customization */
|
||||
.elementor-5180 .elementor-element.elementor-element-0b7bf6f .hamburger {
|
||||
width: 30px !important;
|
||||
}
|
||||
|
||||
.elementor-5180 .elementor-element.elementor-element-0b7bf6f .hamburger span {
|
||||
background-color: #1f1f1f !important;
|
||||
height: 2px !important;
|
||||
margin-bottom: 5px !important;
|
||||
}
|
||||
|
||||
/* Hide desktop-only elements */
|
||||
.elementor-5180 .elementor-element.elementor-element-0b7bf6f .header-menu-container,
|
||||
.elementor-5180 .elementor-element.elementor-element-2f31137,
|
||||
.elementor-5180 .elementor-element.elementor-element-f961133 {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
/* ============================================================
|
||||
MEDIUM DESKTOP OPTIMIZATION (1025px - 1480px)
|
||||
Prevents logo/menu overlap on medium screens
|
||||
============================================================ */
|
||||
@media (min-width: 1025px) and (max-width: 1480px) {
|
||||
/* Reduce logo size slightly */
|
||||
.elementor-5180 .elementor-element.elementor-element-846e53d .logo-desktop {
|
||||
width: 130px !important;
|
||||
height: auto !important;
|
||||
}
|
||||
|
||||
/* Force single line and tighten spacing */
|
||||
.elementor-5180 .main-menu {
|
||||
display: flex !important;
|
||||
flex-wrap: nowrap !important;
|
||||
white-space: nowrap !important;
|
||||
}
|
||||
|
||||
.elementor-5180 .main-menu > li > a {
|
||||
padding-left: 8px !important;
|
||||
padding-right: 8px !important;
|
||||
font-size: 13px !important;
|
||||
}
|
||||
|
||||
/* Reduce container spacing */
|
||||
.elementor-5180 .elementor-element.elementor-element-d681ece {
|
||||
padding-left: 15px !important;
|
||||
padding-right: 15px !important;
|
||||
gap: 10px !important;
|
||||
}
|
||||
|
||||
/* Ensure the menu pill container stays compact */
|
||||
.header-menu-container {
|
||||
padding-left: 8px !important;
|
||||
padding-right: 8px !important;
|
||||
max-width: 750px !important;
|
||||
}
|
||||
|
||||
/* Scale down the CTA button */
|
||||
.elementor-5180 .logico-small-button {
|
||||
padding: 10px 20px !important;
|
||||
font-size: 13px !important;
|
||||
}
|
||||
}
|
||||
|
||||
/* Tablet Scaling (768px - 1024px) */
|
||||
@media (max-width: 1024px) and (min-width: 768px) {
|
||||
.elementor-5180 .elementor-element.elementor-element-846e53d .logo-mobile {
|
||||
width: 210px !important;
|
||||
}
|
||||
}
|
||||
|
||||
73
public/css/vendor/vendor-responsive-laptops.css
vendored
73
public/css/vendor/vendor-responsive-laptops.css
vendored
@@ -1,73 +0,0 @@
|
||||
/* ============================================================
|
||||
LAPTOP RESPONSIVENESS FIX (1025px – 1520px)
|
||||
Enforces desktop layouts strictly within laptop constraints.
|
||||
Leaves Mobile (<1024px) and Ultrawide (>1520px) UNTOUCHED.
|
||||
============================================================ */
|
||||
|
||||
@media (min-width: 1025px) and (max-width: 1520px) {
|
||||
|
||||
/* Hero Slider - Force Desktop Alignment */
|
||||
.logico-content-slider-widget .slide-content-inner {
|
||||
text-align: left !important;
|
||||
align-items: flex-start !important;
|
||||
display: flex !important;
|
||||
flex-direction: column !important;
|
||||
}
|
||||
|
||||
.logico-content-slider-widget .content-slider-item-heading,
|
||||
.logico-content-slider-widget .content-slider-item-text {
|
||||
text-align: center !important;
|
||||
}
|
||||
|
||||
/* Restore Flex & Grid container directions to desktop state */
|
||||
/* .e-con.e-parent,
|
||||
.e-con.e-child {
|
||||
--flex-direction: var(--flex-direction) !important;
|
||||
--container-widget-width: var(--container-widget-width) !important;
|
||||
--container-widget-height: var(--container-widget-height) !important;
|
||||
} */
|
||||
|
||||
/* Keep the .e-con-inner container widths at desktop-equivalent max widths */
|
||||
.e-con-boxed>.e-con-inner {
|
||||
max-width: min(var(--container-max-width, 1480px), 100%) !important;
|
||||
margin-left: auto !important;
|
||||
margin-right: auto !important;
|
||||
}
|
||||
|
||||
/* ─── Problem Section Specific Fixes ─── */
|
||||
.elementor-element.section-shrink-custom[data-id="30fd9d1"]>.e-con-inner {
|
||||
display: flex !important;
|
||||
flex-direction: row !important;
|
||||
max-width: 1480px !important;
|
||||
width: 100% !important;
|
||||
gap: 40px !important;
|
||||
}
|
||||
|
||||
.elementor-element.elementor-element-03db5d7 {
|
||||
flex: 1 1 0% !important;
|
||||
display: flex !important;
|
||||
flex-direction: column !important;
|
||||
}
|
||||
|
||||
.elementor-element.elementor-element-e09c20e {
|
||||
display: grid !important;
|
||||
grid-template-columns: repeat(4, 1fr) !important;
|
||||
gap: 24px !important;
|
||||
}
|
||||
|
||||
.elementor-element.elementor-element-5a5c397 {
|
||||
flex: 0 0 auto !important;
|
||||
width: auto !important;
|
||||
}
|
||||
|
||||
/* ─── Connected Logistics Section Fixes ─── */
|
||||
.elementor-element.elementor-element-9ffed33 {
|
||||
display: flex !important;
|
||||
flex-direction: row !important;
|
||||
flex-wrap: nowrap !important;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
}
|
||||
28884
public/css/vendor/vendor-theme-core.css
vendored
28884
public/css/vendor/vendor-theme-core.css
vendored
File diff suppressed because one or more lines are too long
BIN
public/images/ev-paradox.png
Normal file
BIN
public/images/ev-paradox.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 999 KiB |
39
purgecss.config.cjs
Normal file
39
purgecss.config.cjs
Normal file
@@ -0,0 +1,39 @@
|
||||
/**
|
||||
* PurgeCSS config for consolidating the migrated WordPress/Elementor CSS.
|
||||
* Content = rendered static HTML (authoritative class list) + component source
|
||||
* (catches runtime-toggled classes that appear as string literals, e.g. "active",
|
||||
* "is-active", "animated", and the body-class strings in src/lib/bodyClasses.ts).
|
||||
*
|
||||
* Conservative by design: keyframes / @font-face / CSS variables are kept (PurgeCSS
|
||||
* defaults), and a safelist guards classes added by JS at runtime.
|
||||
*/
|
||||
module.exports = {
|
||||
css: ["public/css/site.css"],
|
||||
content: [
|
||||
"out/**/*.html",
|
||||
"src/**/*.{tsx,ts,jsx,js}",
|
||||
],
|
||||
// Keep classes toggled/added at runtime by GSAP/React state and header/menu logic.
|
||||
safelist: {
|
||||
standard: [
|
||||
"active",
|
||||
"is-active",
|
||||
"is-hiding",
|
||||
"animated",
|
||||
"header-visible-scrolled",
|
||||
"dm-header-scrolled",
|
||||
"header-visible",
|
||||
"current-menu-item",
|
||||
"current_page_item",
|
||||
"current-menu-ancestor",
|
||||
"menu-open",
|
||||
"loaded",
|
||||
],
|
||||
greedy: [
|
||||
/^elementor-.*-animation/, // animation utility classes applied on scroll
|
||||
/animated$/,
|
||||
/^swiper-/, // carousel runtime classes
|
||||
/^owl-/, // carousel runtime classes
|
||||
],
|
||||
},
|
||||
};
|
||||
48
scripts/build-css.sh
Executable file
48
scripts/build-css.sh
Executable file
@@ -0,0 +1,48 @@
|
||||
#!/usr/bin/env bash
|
||||
# Consolidate the formerly-WordPress/Elementor vendor CSS into one purged, renamed file.
|
||||
# - Concatenates the load-bearing CSS in the SAME order they were <link>-ed (cascade-preserving).
|
||||
# - Normalizes relative ../../fonts and ../../images url() refs to absolute (location-independent).
|
||||
# - PurgeCSS strips selectors not present in the rendered HTML or component source.
|
||||
set -euo pipefail
|
||||
cd "$(dirname "$0")/.."
|
||||
|
||||
OUT="public/css/site.css"
|
||||
PURGED_DIR="public/css/.purged"
|
||||
|
||||
# Exact <link> order from the old layout.tsx <head> (cascade matters).
|
||||
FILES=(
|
||||
"public/css/vendor/vendor-elementor-generated-globals.css"
|
||||
"public/css/vendor/vendor-elementor-base.css"
|
||||
"public/css/vendor/vendor-elementor-custom.min.css"
|
||||
"public/css/vendor/vendor-theme-core.css"
|
||||
"public/css/vendor/vendor-global-overrides.css"
|
||||
"public/css/vendor/vendor-layout-main.css"
|
||||
"public/css/vendor/vendor-responsive-laptops.css"
|
||||
"public/css/vendor/vendor-elementor-hfe.css"
|
||||
"public/css/vendor/vendor-icons-fontello-load.css"
|
||||
"public/css/vendor/vendor-icons-fontello.css"
|
||||
"public/css/custom-frontend.min.css"
|
||||
"public/css/all-inlined-head-styles.css"
|
||||
)
|
||||
|
||||
: > "$OUT"
|
||||
for f in "${FILES[@]}"; do
|
||||
printf '\n/* === %s === */\n' "$f" >> "$OUT"
|
||||
cat "$f" >> "$OUT"
|
||||
done
|
||||
|
||||
# Normalize relative asset paths so the combined file works from any location.
|
||||
sed -i '' -E 's#\.\./\.\./fonts/#/fonts/#g; s#\.\./\.\./images/#/images/#g' "$OUT"
|
||||
|
||||
RAW_BYTES=$(wc -c < "$OUT" | tr -d ' ')
|
||||
|
||||
# Purge (config points css: ['public/css/site.css']); output keeps the basename.
|
||||
rm -rf "$PURGED_DIR"
|
||||
npx purgecss --config purgecss.config.cjs --output "$PURGED_DIR"
|
||||
mv "$PURGED_DIR/site.css" "$OUT"
|
||||
rm -rf "$PURGED_DIR"
|
||||
|
||||
PURGED_BYTES=$(wc -c < "$OUT" | tr -d ' ')
|
||||
echo "---"
|
||||
echo "Raw combined: $RAW_BYTES bytes"
|
||||
echo "After purge: $PURGED_BYTES bytes -> $OUT"
|
||||
121
src/app/cookie-policy/page.tsx
Normal file
121
src/app/cookie-policy/page.tsx
Normal file
@@ -0,0 +1,121 @@
|
||||
import React from "react";
|
||||
import type { Metadata } from "next";
|
||||
import LegalDocument, { ContactLink, type LegalSection } from "@/components/sections/LegalDocument";
|
||||
|
||||
export const metadata: Metadata = {
|
||||
title: "Cookie Policy – Doormile",
|
||||
description:
|
||||
"How Doormile uses cookies and similar technologies when you visit our website, and how you can manage them.",
|
||||
};
|
||||
|
||||
const sections: LegalSection[] = [
|
||||
{
|
||||
heading: "What Are Cookies?",
|
||||
blocks: [
|
||||
{
|
||||
type: "p",
|
||||
text: "Cookies are small text files stored on your device that help websites remember information about your visit and improve the browsing experience.",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
heading: "Why We Use Cookies",
|
||||
blocks: [
|
||||
{ type: "p", text: "We use cookies to:" },
|
||||
{
|
||||
type: "ul",
|
||||
items: [
|
||||
"Enable essential website functionality",
|
||||
"Improve website performance",
|
||||
"Analyze visitor behavior and traffic patterns",
|
||||
"Remember user preferences",
|
||||
"Enhance overall user experience",
|
||||
"Support website security",
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
heading: "Types of Cookies We Use",
|
||||
blocks: [
|
||||
{ type: "h3", text: "Essential Cookies" },
|
||||
{
|
||||
type: "p",
|
||||
text: "These cookies are required for core website functionality and security features. The website may not function correctly without them.",
|
||||
},
|
||||
{ type: "h3", text: "Performance Cookies" },
|
||||
{
|
||||
type: "p",
|
||||
text: "These cookies collect information about how visitors interact with the website and help us improve performance and usability.",
|
||||
},
|
||||
{ type: "h3", text: "Analytics Cookies" },
|
||||
{
|
||||
type: "p",
|
||||
text: "Analytics cookies help us understand website traffic, visitor engagement, popular content, and user journeys.",
|
||||
},
|
||||
{ type: "h3", text: "Functional Cookies" },
|
||||
{
|
||||
type: "p",
|
||||
text: "These cookies remember user preferences such as language, region, and other customization settings.",
|
||||
},
|
||||
{ type: "h3", text: "Third-Party Cookies" },
|
||||
{
|
||||
type: "p",
|
||||
text: "Some third-party services integrated into our website, including analytics and performance monitoring tools, may place cookies on your device.",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
heading: "Managing Cookies",
|
||||
blocks: [
|
||||
{
|
||||
type: "p",
|
||||
text: "Most web browsers allow users to control, block, or delete cookies through browser settings. Please note that disabling cookies may impact certain website features and functionality.",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
heading: "Cookie Consent",
|
||||
blocks: [
|
||||
{
|
||||
type: "p",
|
||||
text: "Where required by applicable law, visitors may be presented with cookie consent options when accessing the website.",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
heading: "Policy Updates",
|
||||
blocks: [
|
||||
{
|
||||
type: "p",
|
||||
text: "We may revise this Cookie Policy periodically to reflect changes in technology, regulations, or business practices. Updated versions will be published on this page.",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
heading: "Contact Us",
|
||||
blocks: [
|
||||
{
|
||||
type: "p",
|
||||
text: <>If you have questions regarding this Cookie Policy or our use of cookies, please contact us through our <ContactLink />.</>,
|
||||
},
|
||||
],
|
||||
},
|
||||
];
|
||||
|
||||
export default function CookiePolicyPage() {
|
||||
return (
|
||||
<div className="content-wrapper content-wrapper-may-contain-elementor-code content-wrapper-sidebar-position-none">
|
||||
<div className="content">
|
||||
<div className="content-inner">
|
||||
<LegalDocument
|
||||
title="Cookie Policy"
|
||||
lastUpdated="June 2026"
|
||||
intro="This Cookie Policy explains how Doormile uses cookies and similar technologies when you visit our website."
|
||||
sections={sections}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -10,6 +10,76 @@ html {
|
||||
scroll-behavior: smooth;
|
||||
}
|
||||
|
||||
/* ============================================================
|
||||
GLOBAL SPACING SYSTEM
|
||||
A single shared vertical-rhythm scale so every section uses
|
||||
consistent top/bottom spacing instead of ad-hoc values.
|
||||
Fluid (clamp) so it scales down gracefully on small screens.
|
||||
--space-section → standard section (≈80px)
|
||||
--space-section-lg → large/feature section (≈100px)
|
||||
--space-hero-gap → gap from hero to the first section below
|
||||
Apply via .dm-section / .dm-section-lg, or reference the vars
|
||||
directly in component styles.
|
||||
============================================================ */
|
||||
:root {
|
||||
--space-section: clamp(40px, 5vw, 64px);
|
||||
--space-section-lg: clamp(52px, 6vw, 80px);
|
||||
--space-hero-gap: clamp(36px, 4.5vw, 64px);
|
||||
}
|
||||
|
||||
.dm-section {
|
||||
padding-top: var(--space-section) !important;
|
||||
padding-bottom: var(--space-section) !important;
|
||||
}
|
||||
|
||||
.dm-section-lg {
|
||||
padding-top: var(--space-section-lg) !important;
|
||||
padding-bottom: var(--space-section-lg) !important;
|
||||
}
|
||||
|
||||
/* ------------------------------------------------------------
|
||||
Hero → first-section gap fixes
|
||||
The "Doormile Way" container (.elementor-element-88745f4) carries a
|
||||
150px top margin from the shared Elementor kit (intended as mid-page
|
||||
spacing on Home, where it sits deep in the stack). On the About page
|
||||
it is the FIRST section under the hero, so that 150px reads as an
|
||||
oversized empty gap. Scope the reduction to the About page only
|
||||
(.elementor-86) so Home's mid-page rhythm is untouched.
|
||||
------------------------------------------------------------ */
|
||||
.elementor-86 .elementor-element.elementor-element-88745f4 {
|
||||
margin-top: var(--space-hero-gap) !important;
|
||||
}
|
||||
|
||||
/* ------------------------------------------------------------
|
||||
HOME PAGE — unified section rhythm
|
||||
The shared Elementor kit stamps several stacked sections with a
|
||||
150px top margin. On Home that makes "The Problem", the marquee,
|
||||
"Connected Logistics" and "The Doormile Way" float far below the
|
||||
section above them, while Stats and the EV card sit tight — an
|
||||
uneven, broken rhythm. Normalize EVERY post-hero section to one
|
||||
consistent gap so the page reads Hero ↓ Section ↓ Section evenly.
|
||||
|
||||
Scoped to `.elementor.elementor-61` — the Home page root uniquely
|
||||
carries BOTH classes, so this never leaks onto other pages that
|
||||
reuse these components (e.g. The Doormile Way on About-us, whose
|
||||
root is `.elementor.elementor-86`).
|
||||
|
||||
Hero (741f56c) and the Stats band (9b26234) directly beneath it are
|
||||
intentionally left tight and untouched.
|
||||
------------------------------------------------------------ */
|
||||
/* Sections, in render order: 30fd9d1 The Problem · b62c0b3 Marquee ·
|
||||
89a0ca1 Connected Logistics · 88745f4 The Doormile Way · bbc6760 EV ·
|
||||
3b4a7cc Industry Solutions. */
|
||||
.elementor.elementor-61 .elementor-element.elementor-element-30fd9d1,
|
||||
.elementor.elementor-61 .elementor-element.elementor-element-b62c0b3,
|
||||
.elementor.elementor-61 .elementor-element.elementor-element-89a0ca1,
|
||||
.elementor.elementor-61 .elementor-element.elementor-element-88745f4,
|
||||
.elementor.elementor-61 .elementor-element.elementor-element-bbc6760,
|
||||
.elementor.elementor-61 .elementor-element.elementor-element-3b4a7cc {
|
||||
margin-top: var(--space-section) !important;
|
||||
margin-bottom: 0 !important;
|
||||
}
|
||||
|
||||
/* Lenis global smooth scroll (src/animations/SmoothScroll.tsx). These classes are
|
||||
only present on routes/devices where Lenis is active; on touch devices and with
|
||||
prefers-reduced-motion Lenis is off and native scroll-behavior:smooth (above) applies. */
|
||||
@@ -87,12 +157,15 @@ body {
|
||||
#masthead .elementor-element.elementor-element-0b7bf6f .header-menu-container .main-menu > li > a {
|
||||
padding-top: 15px !important;
|
||||
padding-bottom: 16px !important;
|
||||
padding-left: 14px !important;
|
||||
padding-right: 14px !important;
|
||||
font-size: 15px !important;
|
||||
line-height: 1.2 !important;
|
||||
white-space: nowrap !important;
|
||||
}
|
||||
|
||||
#masthead .header-menu-container .main-menu {
|
||||
gap: 18px !important;
|
||||
gap: 8px !important;
|
||||
}
|
||||
|
||||
#masthead .elementor-element.elementor-element-cabdb09 a.header-button {
|
||||
@@ -450,8 +523,8 @@ body {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
gap: 30px;
|
||||
width: 90%;
|
||||
margin: 30px auto;
|
||||
width: 100%;
|
||||
margin: 30px 0 0;
|
||||
}
|
||||
|
||||
@media (max-width: 1024px) {
|
||||
@@ -579,12 +652,17 @@ body {
|
||||
transform: translateY(10px);
|
||||
}
|
||||
|
||||
/* Default card title — single typography token shared by every card (FMCG,
|
||||
Pharmaceutical, Enterprise & B2B). FMCG is the reference: small, clean,
|
||||
bottom-left, consistent weight. Kept compact so longer labels read at the
|
||||
same size/weight as FMCG instead of looking heavier. */
|
||||
.industry-card-default-title {
|
||||
color: #ffffff !important;
|
||||
font-size: 28px !important;
|
||||
font-size: 22px !important;
|
||||
font-weight: 700 !important;
|
||||
line-height: 1.2 !important;
|
||||
margin: 0 !important;
|
||||
letter-spacing: -0.5px !important;
|
||||
letter-spacing: -0.3px !important;
|
||||
text-transform: none !important;
|
||||
font-family: var(--font-manrope), 'Manrope', system-ui, -apple-system, sans-serif !important;
|
||||
}
|
||||
@@ -730,9 +808,27 @@ body {
|
||||
letter-spacing: -0.5px !important;
|
||||
}
|
||||
|
||||
.elementor-element-3b4a7cc > .e-con-inner {
|
||||
/* Industry Solutions: match the Meet Crew (OurTeam) container EXACTLY. The
|
||||
e-con-boxed inner otherwise spans edge-to-edge because the vendor
|
||||
"display: var(--display)" resolves to the invalid `inline` fallback, so its
|
||||
max-width is ignored. The previous rule here only set padding (never
|
||||
max-width / margin / display), which is why the divider line stretched almost
|
||||
full-viewport and the heading hugged the left edge. Force flex and pin the
|
||||
inner to the shared 1480px inset so the label divider, heading and card grid
|
||||
all share the same left/right edges as the rest of the page. */
|
||||
.elementor.elementor-61 .elementor-element.elementor-element-3b4a7cc {
|
||||
display: flex;
|
||||
}
|
||||
.elementor.elementor-61 .elementor-element.elementor-element-3b4a7cc > .e-con-inner {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
max-width: 1480px;
|
||||
width: 100%;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
padding-left: clamp(20px, 4vw, 50px) !important;
|
||||
padding-right: clamp(20px, 4vw, 50px) !important;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
/* Custom premium animations keyframes */
|
||||
|
||||
@@ -45,7 +45,7 @@ const inter = Inter({
|
||||
});
|
||||
|
||||
export const metadata: Metadata = {
|
||||
title: "Doormile — Last-Mile Logistics Intelligence",
|
||||
title: "Doormile — Delivering Trust. Beyond Boundaries",
|
||||
description: "Doormile powers last-mile logistics with MileTruth™ AI, providing connected miles, SLA protection, and carrier management.",
|
||||
icons: {
|
||||
icon: "/images/cropped-image-2.png",
|
||||
@@ -71,19 +71,13 @@ export default function RootLayout({
|
||||
rel="stylesheet"
|
||||
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css"
|
||||
/>
|
||||
{/* Load WordPress & Elementor compiled styles from public folder */}
|
||||
<link rel="stylesheet" href="/css/vendor/vendor-elementor-generated-globals.css" />
|
||||
<link rel="stylesheet" href="/css/vendor/vendor-elementor-base.css" />
|
||||
<link rel="stylesheet" href="/css/vendor/vendor-elementor-custom.min.css" />
|
||||
<link rel="stylesheet" href="/css/vendor/vendor-theme-core.css" />
|
||||
<link rel="stylesheet" href="/css/vendor/vendor-global-overrides.css" />
|
||||
<link rel="stylesheet" href="/css/vendor/vendor-layout-main.css" />
|
||||
<link rel="stylesheet" href="/css/vendor/vendor-responsive-laptops.css" />
|
||||
<link rel="stylesheet" href="/css/vendor/vendor-elementor-hfe.css" />
|
||||
<link rel="stylesheet" href="/css/vendor/vendor-icons-fontello-load.css" />
|
||||
<link rel="stylesheet" href="/css/vendor/vendor-icons-fontello.css" />
|
||||
<link rel="stylesheet" href="/css/custom-frontend.min.css" />
|
||||
<link rel="stylesheet" href="/css/all-inlined-head-styles.css" />
|
||||
{/*
|
||||
Consolidated site styles. Generated by `npm run build:css`
|
||||
(scripts/build-css.sh): the legacy WordPress/Elementor vendor CSS is
|
||||
concatenated in cascade order and purged of unused selectors via
|
||||
purgecss.config.cjs. ~2.86 MB of vendor CSS -> ~560 KB, one request.
|
||||
*/}
|
||||
<link rel="stylesheet" href="/css/site.css" />
|
||||
</head>
|
||||
{/*
|
||||
Production DOM (index.php + header.php):
|
||||
|
||||
@@ -10,7 +10,7 @@ import EVSection from "@/components/sections/EVSection";
|
||||
import IndustrySolutions from "@/components/sections/IndustrySolutions";
|
||||
|
||||
export const metadata: Metadata = {
|
||||
title: "Doormile — Last-Mile Logistics Intelligence",
|
||||
title: "Doormile — Delivering Trust. Beyond Boundaries",
|
||||
description:
|
||||
"Doormile helps logistics companies track every mile with MileTruth™ AI. Real-time SLA protection and connected miles visibility.",
|
||||
};
|
||||
|
||||
146
src/app/privacy-policy/page.tsx
Normal file
146
src/app/privacy-policy/page.tsx
Normal file
@@ -0,0 +1,146 @@
|
||||
import React from "react";
|
||||
import type { Metadata } from "next";
|
||||
import LegalDocument, { ContactLink, type LegalSection } from "@/components/sections/LegalDocument";
|
||||
|
||||
export const metadata: Metadata = {
|
||||
title: "Privacy Policy – Doormile",
|
||||
description:
|
||||
"How Doormile collects, uses, stores, and protects your information when you visit our website, interact with our services, or communicate with us.",
|
||||
};
|
||||
|
||||
const sections: LegalSection[] = [
|
||||
{
|
||||
heading: "Information We Collect",
|
||||
blocks: [
|
||||
{ type: "p", text: "We may collect the following information:" },
|
||||
{
|
||||
type: "ul",
|
||||
items: [
|
||||
"Full name",
|
||||
"Email address",
|
||||
"Phone number",
|
||||
"Company name",
|
||||
"Job title",
|
||||
"Information submitted through contact forms",
|
||||
"Service inquiry details",
|
||||
"Website usage data and analytics",
|
||||
"Browser, device, and IP information",
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
heading: "How We Use Your Information",
|
||||
blocks: [
|
||||
{ type: "p", text: "We use your information to:" },
|
||||
{
|
||||
type: "ul",
|
||||
items: [
|
||||
"Respond to inquiries and support requests",
|
||||
"Provide information about our services",
|
||||
"Improve website performance and user experience",
|
||||
"Analyze usage trends and platform effectiveness",
|
||||
"Maintain security and prevent unauthorized access",
|
||||
"Communicate service updates and business information",
|
||||
"Comply with legal and regulatory requirements",
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
heading: "Information Sharing",
|
||||
blocks: [
|
||||
{
|
||||
type: "p",
|
||||
text: "Doormile does not sell, rent, or trade personal information. Information may be shared with trusted service providers that assist with website hosting, analytics, communications, and operational support, subject to appropriate confidentiality and security obligations.",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
heading: "Data Security",
|
||||
blocks: [
|
||||
{
|
||||
type: "p",
|
||||
text: "We implement industry-standard administrative, technical, and organizational safeguards designed to protect personal information from unauthorized access, disclosure, alteration, or destruction.",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
heading: "Data Retention",
|
||||
blocks: [
|
||||
{
|
||||
type: "p",
|
||||
text: "We retain information only for as long as necessary to fulfill the purposes described in this policy, comply with legal obligations, resolve disputes, and enforce agreements.",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
heading: "Cookies and Tracking Technologies",
|
||||
blocks: [
|
||||
{
|
||||
type: "p",
|
||||
text: "We use cookies and similar technologies to improve website functionality, measure performance, understand user behavior, and enhance user experience.",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
heading: "Your Rights",
|
||||
blocks: [
|
||||
{ type: "p", text: "Depending on applicable laws, you may have the right to:" },
|
||||
{
|
||||
type: "ul",
|
||||
items: [
|
||||
"Access your personal information",
|
||||
"Request correction of inaccurate data",
|
||||
"Request deletion of personal information",
|
||||
"Restrict or object to certain processing activities",
|
||||
"Withdraw consent where applicable",
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
heading: "Third-Party Links",
|
||||
blocks: [
|
||||
{
|
||||
type: "p",
|
||||
text: "Our website may contain links to third-party websites. We are not responsible for the privacy practices or content of external websites.",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
heading: "Policy Updates",
|
||||
blocks: [
|
||||
{
|
||||
type: "p",
|
||||
text: "We may update this Privacy Policy periodically. Any changes will be posted on this page with a revised effective date.",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
heading: "Contact Us",
|
||||
blocks: [
|
||||
{
|
||||
type: "p",
|
||||
text: <>For privacy-related questions or requests, please contact us through our <ContactLink />.</>,
|
||||
},
|
||||
],
|
||||
},
|
||||
];
|
||||
|
||||
export default function PrivacyPolicyPage() {
|
||||
return (
|
||||
<div className="content-wrapper content-wrapper-may-contain-elementor-code content-wrapper-sidebar-position-none">
|
||||
<div className="content">
|
||||
<div className="content-inner">
|
||||
<LegalDocument
|
||||
title="Privacy Policy"
|
||||
lastUpdated="June 2026"
|
||||
intro="At Doormile, we are committed to protecting your privacy and maintaining the security of the information you share with us. This Privacy Policy outlines how we collect, use, store, and protect your information when you visit our website, interact with our services, or communicate with us."
|
||||
sections={sections}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
140
src/app/terms-of-service/page.tsx
Normal file
140
src/app/terms-of-service/page.tsx
Normal file
@@ -0,0 +1,140 @@
|
||||
import React from "react";
|
||||
import type { Metadata } from "next";
|
||||
import LegalDocument, { ContactLink, type LegalSection } from "@/components/sections/LegalDocument";
|
||||
|
||||
export const metadata: Metadata = {
|
||||
title: "Terms of Service – Doormile",
|
||||
description:
|
||||
"The Terms of Service governing your access to and use of the Doormile website and related services.",
|
||||
};
|
||||
|
||||
const sections: LegalSection[] = [
|
||||
{
|
||||
heading: "Acceptance of Terms",
|
||||
blocks: [
|
||||
{
|
||||
type: "p",
|
||||
text: "By accessing this website, you acknowledge that you have read, understood, and agreed to these Terms of Service and all applicable laws and regulations.",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
heading: "Permitted Use",
|
||||
blocks: [
|
||||
{
|
||||
type: "p",
|
||||
text: "You agree to use the website and services only for lawful purposes and in accordance with these terms.",
|
||||
},
|
||||
{ type: "p", text: "You agree not to:" },
|
||||
{
|
||||
type: "ul",
|
||||
items: [
|
||||
"Violate applicable laws or regulations",
|
||||
"Attempt unauthorized access to systems or networks",
|
||||
"Interfere with website functionality or security",
|
||||
"Distribute malicious software or harmful code",
|
||||
"Misrepresent your identity or organization",
|
||||
"Use website content without authorization",
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
heading: "Intellectual Property Rights",
|
||||
blocks: [
|
||||
{
|
||||
type: "p",
|
||||
text: "All content, technology, software, graphics, trademarks, logos, text, designs, and other materials available on this website are the property of Doormile or its licensors and are protected by applicable intellectual property laws.",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
heading: "User Submissions",
|
||||
blocks: [
|
||||
{
|
||||
type: "p",
|
||||
text: "Any information submitted through forms, inquiries, or communications must be accurate and lawful. Users are responsible for the content they submit.",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
heading: "Service Availability",
|
||||
blocks: [
|
||||
{
|
||||
type: "p",
|
||||
text: "While we strive to maintain uninterrupted access, we do not guarantee that the website or services will always be available, secure, or error-free.",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
heading: "Disclaimer of Warranties",
|
||||
blocks: [
|
||||
{
|
||||
type: "p",
|
||||
text: 'The website and services are provided on an "as is" and "as available" basis without warranties of any kind, whether express or implied.',
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
heading: "Limitation of Liability",
|
||||
blocks: [
|
||||
{
|
||||
type: "p",
|
||||
text: "To the maximum extent permitted by law, Doormile shall not be liable for any indirect, incidental, special, consequential, or punitive damages arising from or related to the use of the website or services.",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
heading: "Indemnification",
|
||||
blocks: [
|
||||
{
|
||||
type: "p",
|
||||
text: "Users agree to indemnify and hold harmless Doormile, its employees, partners, and affiliates from claims arising from misuse of the website or violation of these terms.",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
heading: "Modifications",
|
||||
blocks: [
|
||||
{
|
||||
type: "p",
|
||||
text: "We reserve the right to update or modify these Terms of Service at any time. Continued use of the website following updates constitutes acceptance of the revised terms.",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
heading: "Governing Law",
|
||||
blocks: [
|
||||
{
|
||||
type: "p",
|
||||
text: "These Terms shall be governed by and interpreted in accordance with applicable laws and regulations in the jurisdictions where Doormile conducts business.",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
heading: "Contact Us",
|
||||
blocks: [
|
||||
{
|
||||
type: "p",
|
||||
text: <>Questions regarding these Terms of Service may be submitted through our <ContactLink />.</>,
|
||||
},
|
||||
],
|
||||
},
|
||||
];
|
||||
|
||||
export default function TermsOfServicePage() {
|
||||
return (
|
||||
<div className="content-wrapper content-wrapper-may-contain-elementor-code content-wrapper-sidebar-position-none">
|
||||
<div className="content">
|
||||
<div className="content-inner">
|
||||
<LegalDocument
|
||||
title="Terms of Service"
|
||||
lastUpdated="June 2026"
|
||||
intro="These Terms of Service govern your access to and use of the Doormile website and related services. By accessing or using our website, you agree to comply with these terms."
|
||||
sections={sections}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -5,7 +5,7 @@ import { useHeaderUI } from "./HeaderUIProvider";
|
||||
/**
|
||||
* Production: `<div class="body-overlay"></div>` is a direct child of body
|
||||
* (rendered by both index.php line 6 and header.php line 5 — production has two; we render one).
|
||||
* CSS (in vendor-theme-core.css and elementor-frontend-inline-css.css) styles it as fixed-position fullscreen overlay.
|
||||
* CSS (consolidated into /public/css/site.css) styles it as fixed-position fullscreen overlay.
|
||||
*/
|
||||
export default function BodyOverlay() {
|
||||
const { isMenuOpen, isSidebarOpen, closeAll } = useHeaderUI();
|
||||
|
||||
@@ -527,6 +527,16 @@ export default function Header() {
|
||||
opacity: 1 !important;
|
||||
}
|
||||
|
||||
#masthead .header-menu-container .main-menu > li.active > a {
|
||||
color: #ffffff !important;
|
||||
}
|
||||
|
||||
#masthead .header-menu-container .main-menu > li > a:focus,
|
||||
#masthead .header-menu-container .main-menu > li > a:focus-visible {
|
||||
outline: none !important;
|
||||
box-shadow: none !important;
|
||||
}
|
||||
|
||||
/* Responsive logo adjustment on mobile/tablet */
|
||||
@media (max-width: 1024px) {
|
||||
#masthead .elementor-element.elementor-element-846e53d .hfe-site-logo .hfe-site-logo-container img {
|
||||
|
||||
@@ -5,7 +5,7 @@ import dynamic from "next/dynamic";
|
||||
import { motion, useMotionValue, useTransform, type MotionValue } from "framer-motion";
|
||||
import gsap from "gsap";
|
||||
import { ScrollTrigger } from "gsap/ScrollTrigger";
|
||||
import { P, STRATEGIES, ENGINE_STEPS, CONSTRAINT_LIST, STRATEGY_SCORES } from "./theme";
|
||||
import { P, STRATEGIES, WINNER_INDEX, ENGINE_STEPS, CONSTRAINT_LIST, STRATEGY_SCORES } from "./theme";
|
||||
|
||||
const LogisticsBrainCanvas = dynamic(() => import("./LogisticsBrainCanvas"), { ssr: false });
|
||||
|
||||
@@ -53,12 +53,21 @@ function StepRail({ active }: { active: number }) {
|
||||
);
|
||||
}
|
||||
|
||||
/** One cross-fading workflow card pinned to the lower-left. */
|
||||
/**
|
||||
* One workflow card that travels through the story. The outer anchor pins it to
|
||||
* its stage position (Left / Center / Right / Center-Hero); the inner motion card
|
||||
* slides + scales into that anchor in lockstep with scroll, so as the camera moves
|
||||
* through the stages the card visibly moves with the narrative instead of sitting
|
||||
* fixed in one corner.
|
||||
*/
|
||||
function StoryCard({
|
||||
step,
|
||||
index,
|
||||
pos,
|
||||
opacity,
|
||||
y,
|
||||
x,
|
||||
scale,
|
||||
num,
|
||||
kicker,
|
||||
title,
|
||||
@@ -66,8 +75,11 @@ function StoryCard({
|
||||
}: {
|
||||
step: number;
|
||||
index: number;
|
||||
pos: "left" | "center" | "right" | "hero";
|
||||
opacity: MotionValue<number>;
|
||||
y: MotionValue<number>;
|
||||
x: MotionValue<number>;
|
||||
scale: MotionValue<number>;
|
||||
num: string;
|
||||
kicker: string;
|
||||
title: string;
|
||||
@@ -76,14 +88,16 @@ function StoryCard({
|
||||
// Don't mount this beat's card until its step is active.
|
||||
if (step !== index) return null;
|
||||
return (
|
||||
<motion.div className="dm-lb-card-story" style={{ opacity, y }}>
|
||||
<div className="dm-lb-card-story__head">
|
||||
<span className="dm-lb-pillar__num">{num}</span>
|
||||
<span className="dm-lb-pillar__kicker">{kicker}</span>
|
||||
</div>
|
||||
<h3 className="dm-lb-pillar__title">{title}</h3>
|
||||
{children}
|
||||
</motion.div>
|
||||
<div className={`dm-lb-card-anchor is-${pos}`}>
|
||||
<motion.div className="dm-lb-card-story" style={{ opacity, y, x, scale }}>
|
||||
<div className="dm-lb-card-story__head">
|
||||
<span className="dm-lb-pillar__num">{num}</span>
|
||||
<span className="dm-lb-pillar__kicker">{kicker}</span>
|
||||
</div>
|
||||
<h3 className="dm-lb-pillar__title">{title}</h3>
|
||||
{children}
|
||||
</motion.div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -182,6 +196,22 @@ export default function LogisticsBrainSection({ connected = false }: { connected
|
||||
const p5o = useTransform(scroll, [0.75, 0.78, 0.855, 0.875], [0, 1, 1, 0]);
|
||||
const p5y = useTransform(scroll, [0.75, 0.79], [26, 0]);
|
||||
|
||||
// Horizontal slide + scale per beat — same windows as the opacity above, so the
|
||||
// card glides between its stage anchors (Left → Center → Right → Left → Center-Hero)
|
||||
// in lockstep with the camera. Each card enters from the direction of the previous
|
||||
// stage and drifts toward the next as it leaves, reading as one continuous travel.
|
||||
const p1x = useTransform(scroll, [0.135, 0.165, 0.255, 0.275], [-52, 0, 0, 52]);
|
||||
const p1s = useTransform(scroll, [0.135, 0.165, 0.255, 0.275], [0.965, 1, 1, 0.965]);
|
||||
const p2x = useTransform(scroll, [0.29, 0.32, 0.415, 0.435], [-52, 0, 0, 52]);
|
||||
const p2s = useTransform(scroll, [0.29, 0.32, 0.415, 0.435], [0.965, 1, 1, 0.965]);
|
||||
const p3x = useTransform(scroll, [0.45, 0.48, 0.575, 0.595], [-52, 0, 0, -52]);
|
||||
const p3s = useTransform(scroll, [0.45, 0.48, 0.575, 0.595], [0.965, 1, 1, 0.965]);
|
||||
const p4x = useTransform(scroll, [0.61, 0.64, 0.715, 0.735], [52, 0, 0, 52]);
|
||||
const p4s = useTransform(scroll, [0.61, 0.64, 0.715, 0.735], [0.965, 1, 1, 0.965]);
|
||||
// Hero (final selection): scales up a touch and holds center as it settles.
|
||||
const p5x = useTransform(scroll, [0.75, 0.78, 0.855, 0.875], [-52, 0, 0, 0]);
|
||||
const p5s = useTransform(scroll, [0.75, 0.78, 0.855, 0.875], [0.97, 1.05, 1.05, 1.0]);
|
||||
|
||||
const finaleOpacity = useTransform(scroll, [P.finale - 0.02, P.finale + 0.04], [0, 1]);
|
||||
const finaleY = useTransform(scroll, [P.finale - 0.02, P.finale + 0.06], [40, 0]);
|
||||
const taglineOpacity = useTransform(scroll, [P.finale + 0.04, P.finale + 0.1], [0, 1]);
|
||||
@@ -217,18 +247,18 @@ export default function LogisticsBrainSection({ connected = false }: { connected
|
||||
<span className="dm-lb-arrow">↓</span>
|
||||
</motion.div>
|
||||
|
||||
{/* STEP 01 — Generate Routes */}
|
||||
<StoryCard step={step} index={0} opacity={p1o} y={p1y} num="01" kicker="Generate Routes" title="We create many delivery plans at once">
|
||||
{/* STEP 01 — Generate Routes (card anchored LEFT) */}
|
||||
<StoryCard step={step} index={0} pos="left" opacity={p1o} y={p1y} x={p1x} scale={p1s} num="01" kicker="Generate Routes" title="We create many delivery plans at once">
|
||||
<div className="dm-lb-chips">
|
||||
{STRATEGIES.map((s) => (
|
||||
<span key={s} className="dm-lb-chip">{s}</span>
|
||||
{STRATEGIES.map((s, i) => (
|
||||
<span key={s} className={`dm-lb-chip${i === WINNER_INDEX ? " dm-lb-chip--active" : ""}`}>{s}</span>
|
||||
))}
|
||||
</div>
|
||||
<p className="dm-lb-pillar__foot">6 different ways to deliver all 59 orders — generated in milliseconds.</p>
|
||||
</StoryCard>
|
||||
|
||||
{/* STEP 02 — Check Constraints (the EV paradox) */}
|
||||
<StoryCard step={step} index={1} opacity={p2o} y={p2y} num="02" kicker="Check Constraints" title="Every plan must respect real-world limits">
|
||||
{/* STEP 02 — Check Constraints (card anchored CENTER) */}
|
||||
<StoryCard step={step} index={1} pos="center" opacity={p2o} y={p2y} x={p2x} scale={p2s} num="02" kicker="Check Constraints" title="Every plan must respect real-world limits">
|
||||
<ul className="dm-lb-constraints">
|
||||
{CONSTRAINT_LIST.map((c) => (
|
||||
<li key={c.label}>
|
||||
@@ -241,8 +271,8 @@ export default function LogisticsBrainSection({ connected = false }: { connected
|
||||
<p className="dm-lb-pillar__stat"><strong>59/59</strong> delivered <em>vs 34/59 when battery limits are ignored</em></p>
|
||||
</StoryCard>
|
||||
|
||||
{/* STEP 03 — Score & Compare (the leaderboard) */}
|
||||
<StoryCard step={step} index={2} opacity={p3o} y={p3y} num="03" kicker="Score & Compare" title="Each plan is scored by total delivery cost">
|
||||
{/* STEP 03 — Score & Compare (card anchored RIGHT) */}
|
||||
<StoryCard step={step} index={2} pos="right" opacity={p3o} y={p3y} x={p3x} scale={p3s} num="03" kicker="Score & Compare" title="Each plan is scored by total delivery cost">
|
||||
<ul className="dm-lb-board">
|
||||
{STRATEGY_SCORES.map((s) => (
|
||||
<li key={s.name} className={s.win ? "is-win" : ""}>
|
||||
@@ -254,8 +284,8 @@ export default function LogisticsBrainSection({ connected = false }: { connected
|
||||
</ul>
|
||||
</StoryCard>
|
||||
|
||||
{/* STEP 04 — Guarantee On-Time */}
|
||||
<StoryCard step={step} index={3} opacity={p4o} y={p4y} num="04" kicker="Guarantee On-Time" title="Any plan even 1 minute late is rejected">
|
||||
{/* STEP 04 — Guarantee On-Time (card anchored LEFT) */}
|
||||
<StoryCard step={step} index={3} pos="left" opacity={p4o} y={p4y} x={p4x} scale={p4s} num="04" kicker="Guarantee On-Time" title="Any plan even 1 minute late is rejected">
|
||||
<div className="dm-lb-sla">
|
||||
<span className="dm-lb-sla__badge">⏱️ On-time only</span>
|
||||
<span className="dm-lb-sla__x">✕ Late plan → dropped</span>
|
||||
@@ -263,8 +293,8 @@ export default function LogisticsBrainSection({ connected = false }: { connected
|
||||
<p className="dm-lb-pillar__foot">We only keep plans that hit every promised delivery window.</p>
|
||||
</StoryCard>
|
||||
|
||||
{/* STEP 05 — Pick & Dispatch */}
|
||||
<StoryCard step={step} index={4} opacity={p5o} y={p5y} num="05" kicker="Pick & Dispatch" title="The winning plan is sent to the fleet">
|
||||
{/* STEP 05 — Pick & Dispatch (card anchored CENTER, hero) */}
|
||||
<StoryCard step={step} index={4} pos="hero" opacity={p5o} y={p5y} x={p5x} scale={p5s} num="05" kicker="Pick & Dispatch" title="The winning plan is sent to the fleet">
|
||||
<div className="dm-lb-winner">✓ Multi-Trip selected — lowest cost, zero delays</div>
|
||||
<div className="dm-lb-chips">
|
||||
<span className="dm-lb-chip">EV Bikes</span>
|
||||
@@ -381,62 +411,76 @@ const styles = `
|
||||
.dm-lb-arrow { font-size: 18px; animation: dmLbBob 1.8s ease-in-out infinite; }
|
||||
@keyframes dmLbBob { 0%,100% { transform: translateY(0); opacity: 0.5; } 50% { transform: translateY(6px); opacity: 1; } }
|
||||
|
||||
/* ---- Lower-left workflow card (glass panel, cross-fades per step) ---- */
|
||||
.dm-lb-card-story { position: absolute; left: clamp(18px, 4vw, 56px); bottom: clamp(26px, 7vh, 64px);
|
||||
width: min(440px, 84vw); pointer-events: auto; will-change: opacity, transform;
|
||||
/* ---- Story card: a premium light-glass panel that TRAVELS between stage
|
||||
anchors. The anchor pins the stage position; the inner card slides/scales into
|
||||
it (Left → Center → Right → Left → Center-Hero) in lockstep with scroll. ---- */
|
||||
.dm-lb-card-anchor { position: absolute; bottom: clamp(26px, 7vh, 64px); z-index: 6; pointer-events: none; }
|
||||
.dm-lb-card-anchor.is-left { left: clamp(18px, 4vw, 56px); }
|
||||
.dm-lb-card-anchor.is-right { right: clamp(18px, 4vw, 56px); }
|
||||
.dm-lb-card-anchor.is-center,
|
||||
.dm-lb-card-anchor.is-hero { left: 50%; transform: translateX(-50%); }
|
||||
/* Hero (final selection) sits a little higher + centred so it reads as the payoff. */
|
||||
.dm-lb-card-anchor.is-hero { bottom: clamp(40px, 9vh, 92px); }
|
||||
|
||||
.dm-lb-card-story { position: relative; width: min(440px, 84vw); pointer-events: auto;
|
||||
will-change: opacity, transform; transform-origin: bottom center;
|
||||
padding: 18px 20px; border-radius: 18px;
|
||||
background: rgba(14,8,10,0.9); border: 1px solid rgba(226,53,66,0.22);
|
||||
/* backdrop blur removed — this card cross-fades/translates on scroll, so the blur
|
||||
was recomputed every frame; a near-opaque fill keeps the look at no per-frame cost. */
|
||||
box-shadow: 0 24px 64px -30px rgba(0,0,0,0.92); }
|
||||
/* Premium light glass — clean SaaS surface, brand red used only as a top accent. */
|
||||
background: rgba(255,255,255,0.94);
|
||||
border: 1px solid rgba(15,23,42,0.08); border-top: 3px solid #C01227;
|
||||
box-shadow: 0 28px 70px -34px rgba(15,23,42,0.45); }
|
||||
.dm-lb-card-anchor.is-hero .dm-lb-card-story { width: min(480px, 88vw);
|
||||
box-shadow: 0 38px 92px -34px rgba(192,18,39,0.4); }
|
||||
.dm-lb-card-story__head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
|
||||
.dm-lb-pillar__num { font-size: 12px; font-weight: 700; letter-spacing: 0.1em; color: #ffffff;
|
||||
background: linear-gradient(135deg, #E2354A, #C01227); border-radius: 7px; padding: 3px 8px; }
|
||||
.dm-lb-pillar__kicker { font-size: clamp(11px, 1.1vw, 13px); font-weight: 700; letter-spacing: 0.18em;
|
||||
text-transform: uppercase; color: #F2667A; }
|
||||
.dm-lb .dm-lb-pillar__title { margin: 0 0 12px !important; padding: 0 !important; color: #fbf5f6 !important;
|
||||
text-transform: uppercase; color: #C01227; }
|
||||
.dm-lb .dm-lb-pillar__title { margin: 0 0 12px !important; padding: 0 !important; color: #0f172a !important;
|
||||
font-weight: 700 !important; text-transform: none !important; letter-spacing: -0.015em !important;
|
||||
font-size: clamp(17px, 1.9vw, 24px) !important; line-height: 1.18 !important;
|
||||
text-shadow: 0 0 30px rgba(192,18,39,0.3) !important; }
|
||||
.dm-lb-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
|
||||
.dm-lb-chip { font-size: 11.5px; font-weight: 600; letter-spacing: 0.02em; color: #f1dadd;
|
||||
padding: 4px 11px; border-radius: 999px; background: rgba(192,18,39,0.12);
|
||||
border: 1px solid rgba(226,53,66,0.30); white-space: nowrap; }
|
||||
.dm-lb-pillar__foot { margin: 0; font-size: clamp(12px, 1.1vw, 13.5px); line-height: 1.45; color: rgba(236,224,226,0.72); }
|
||||
.dm-lb-pillar__stat { margin: 6px 0 0; font-size: clamp(12.5px, 1.2vw, 15px); color: rgba(236,224,226,0.78); }
|
||||
.dm-lb-pillar__stat strong { color: #4ade80; font-weight: 800; font-size: 1.25em; text-shadow: 0 0 20px rgba(34,197,94,0.5); }
|
||||
.dm-lb-pillar__stat em { font-style: normal; color: rgba(230,218,220,0.55); }
|
||||
font-size: clamp(17px, 1.9vw, 24px) !important; line-height: 1.18 !important; }
|
||||
.dm-lb-chips { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 10px; }
|
||||
/* Strategy pills — white pills, soft border + light shadow, brand-red active state. */
|
||||
.dm-lb-chip { font-size: 11.5px; font-weight: 600; letter-spacing: 0.02em; color: #334155;
|
||||
padding: 5px 12px; border-radius: 999px; background: #ffffff;
|
||||
border: 1px solid rgba(15,23,42,0.1); box-shadow: 0 1px 2px rgba(15,23,42,0.06); white-space: nowrap; }
|
||||
.dm-lb-chip--active { color: #ffffff; background: linear-gradient(135deg, #E2354A, #C01227);
|
||||
border-color: transparent; box-shadow: 0 6px 16px -6px rgba(192,18,39,0.5); }
|
||||
.dm-lb-pillar__foot { margin: 0; font-size: clamp(12px, 1.1vw, 13.5px); line-height: 1.45; color: #475569; }
|
||||
.dm-lb-pillar__stat { margin: 6px 0 0; font-size: clamp(12.5px, 1.2vw, 15px); color: #475569; }
|
||||
.dm-lb-pillar__stat strong { color: #16a34a; font-weight: 800; font-size: 1.25em; }
|
||||
.dm-lb-pillar__stat em { font-style: normal; color: #94a3b8; }
|
||||
|
||||
/* Constraints checklist (step 02) */
|
||||
.dm-lb-constraints { list-style: none; margin: 0 0 10px; padding: 0; display: grid; gap: 7px; }
|
||||
.dm-lb-constraints li { display: flex; align-items: center; gap: 9px; }
|
||||
.dm-lb-constraints__icon { font-size: 14px; width: 20px; text-align: center; }
|
||||
.dm-lb-constraints__label { font-size: 13px; font-weight: 700; color: #fbeff0; min-width: 84px; }
|
||||
.dm-lb-constraints__note { font-size: 12px; color: rgba(232,222,224,0.6); }
|
||||
.dm-lb-constraints__label { font-size: 13px; font-weight: 700; color: #0f172a; min-width: 84px; }
|
||||
.dm-lb-constraints__note { font-size: 12px; color: #64748b; }
|
||||
|
||||
/* Scored leaderboard (step 03) */
|
||||
.dm-lb-board { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
|
||||
.dm-lb-board li { display: grid; grid-template-columns: 104px 1fr 26px; align-items: center; gap: 9px; }
|
||||
.dm-lb-board__name { font-size: 11.5px; font-weight: 600; color: rgba(234,226,228,0.68); display: flex; align-items: center; gap: 6px; white-space: nowrap; }
|
||||
.dm-lb-board li.is-win .dm-lb-board__name { color: #fff; font-weight: 800; }
|
||||
.dm-lb-board__name { font-size: 11.5px; font-weight: 600; color: #64748b; display: flex; align-items: center; gap: 6px; white-space: nowrap; }
|
||||
.dm-lb-board li.is-win .dm-lb-board__name { color: #0f172a; font-weight: 800; }
|
||||
.dm-lb-board__tag { font-size: 8px; font-weight: 800; letter-spacing: 0.08em; color: #fff;
|
||||
background: linear-gradient(135deg,#E2354A,#C01227); padding: 2px 5px; border-radius: 5px; }
|
||||
.dm-lb-board__track { height: 7px; border-radius: 999px; background: rgba(255,255,255,0.08); overflow: hidden; }
|
||||
.dm-lb-board__fill { display: block; height: 100%; border-radius: 999px; background: rgba(150,150,165,0.5); }
|
||||
.dm-lb-board li.is-win .dm-lb-board__fill { background: linear-gradient(90deg,#E2354A,#C01227); box-shadow: 0 0 12px rgba(226,53,66,0.6); }
|
||||
.dm-lb-board__score { font-size: 12px; font-weight: 700; color: rgba(234,226,228,0.68); text-align: right; }
|
||||
.dm-lb-board li.is-win .dm-lb-board__score { color: #fff; }
|
||||
.dm-lb-board__track { height: 7px; border-radius: 999px; background: rgba(15,23,42,0.08); overflow: hidden; }
|
||||
.dm-lb-board__fill { display: block; height: 100%; border-radius: 999px; background: rgba(100,116,139,0.45); }
|
||||
.dm-lb-board li.is-win .dm-lb-board__fill { background: linear-gradient(90deg,#E2354A,#C01227); box-shadow: 0 0 12px rgba(226,53,66,0.4); }
|
||||
.dm-lb-board__score { font-size: 12px; font-weight: 700; color: #64748b; text-align: right; }
|
||||
.dm-lb-board li.is-win .dm-lb-board__score { color: #0f172a; }
|
||||
|
||||
/* SLA badges (step 04) */
|
||||
.dm-lb-sla { display: flex; gap: 8px; margin-bottom: 10px; flex-wrap: wrap; }
|
||||
.dm-lb-sla__badge { font-size: 12px; font-weight: 700; color: #86efac; background: rgba(34,197,94,0.1);
|
||||
border: 1px solid rgba(34,197,94,0.32); padding: 6px 12px; border-radius: 999px; }
|
||||
.dm-lb-sla__x { font-size: 12px; font-weight: 700; color: #fca5a5; background: rgba(239,68,68,0.1);
|
||||
border: 1px solid rgba(239,68,68,0.32); padding: 6px 12px; border-radius: 999px; }
|
||||
.dm-lb-sla__badge { font-size: 12px; font-weight: 700; color: #15803d; background: rgba(34,197,94,0.1);
|
||||
border: 1px solid rgba(34,197,94,0.3); padding: 6px 12px; border-radius: 999px; }
|
||||
.dm-lb-sla__x { font-size: 12px; font-weight: 700; color: #b91c1c; background: rgba(239,68,68,0.08);
|
||||
border: 1px solid rgba(239,68,68,0.28); padding: 6px 12px; border-radius: 999px; }
|
||||
|
||||
/* Winner banner (step 05) */
|
||||
.dm-lb-winner { font-size: 13.5px; font-weight: 700; color: #fff; margin-bottom: 10px; padding: 9px 13px; border-radius: 12px;
|
||||
background: linear-gradient(135deg, rgba(192,18,39,0.24), rgba(34,197,94,0.16)); border: 1px solid rgba(226,53,66,0.4); }
|
||||
.dm-lb-winner { font-size: 13.5px; font-weight: 700; color: #0f172a; margin-bottom: 10px; padding: 9px 13px; border-radius: 12px;
|
||||
background: linear-gradient(135deg, rgba(192,18,39,0.08), rgba(34,197,94,0.08)); border: 1px solid rgba(226,53,66,0.32); }
|
||||
|
||||
/* ---- Finale: KPI cards ---- */
|
||||
.dm-lb-finale { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 0 20px; }
|
||||
@@ -466,7 +510,15 @@ const styles = `
|
||||
.dm-lb { height: 400vh; }
|
||||
.dm-lb-kpis { gap: 12px; }
|
||||
.dm-lb-kpi { min-width: 96px; padding: 14px 14px; }
|
||||
.dm-lb-card-story { left: 0; right: 0; margin: 0 auto; width: calc(100% - 28px); bottom: clamp(20px, 5vh, 44px); padding: 14px 16px; }
|
||||
/* On phones every stage collapses to one centred, full-width position — the
|
||||
horizontal travel only reads on wider screens. */
|
||||
.dm-lb-card-anchor,
|
||||
.dm-lb-card-anchor.is-left,
|
||||
.dm-lb-card-anchor.is-right,
|
||||
.dm-lb-card-anchor.is-center,
|
||||
.dm-lb-card-anchor.is-hero { left: 50%; right: auto; transform: translateX(-50%); bottom: clamp(20px, 5vh, 44px); }
|
||||
.dm-lb-card-story,
|
||||
.dm-lb-card-anchor.is-hero .dm-lb-card-story { width: calc(100vw - 28px); padding: 14px 16px; }
|
||||
.dm-lb-board li { grid-template-columns: 88px 1fr 24px; }
|
||||
.dm-lb-constraints__note { display: none; }
|
||||
}
|
||||
|
||||
@@ -5,63 +5,54 @@ import { ScrollReveal } from "@/animations/Reveal";
|
||||
export default function BlogGrid() {
|
||||
const blogs = [
|
||||
{
|
||||
date: "Apl.06/2025",
|
||||
title: "How AI Is Transforming Last-Mile EV Delivery",
|
||||
excerpt: "Machine learning and real-time data are reshaping how fleets plan, dispatch, and adapt — making every kilometre smarter than the last.",
|
||||
category: "Technology",
|
||||
image: "/images/blog-post-pic-17.png",
|
||||
},
|
||||
{
|
||||
date: "Apl.06/2025",
|
||||
title: "The EV Paradox: Solving Range Anxiety for Urban Fleets",
|
||||
excerpt: "Electric vehicles promise sustainability, but battery constraints introduce a new routing challenge. Here's how MileTruth™ AI solves it before dispatch.",
|
||||
category: "EV Fleet",
|
||||
image: "/images/blog-post-pic-18-840x840.jpg",
|
||||
image: "/images/ev-paradox.png",
|
||||
},
|
||||
{
|
||||
date: "Apl.06/2025",
|
||||
title: "42% Less Distance: Insights from Our Hyderabad Hub",
|
||||
excerpt: "A detailed look at how Doormile's MileTruth routing engine delivered measurable efficiency gains — fewer vehicles, less fuel, and zero SLA misses.",
|
||||
category: "Case Study",
|
||||
image: "/images/blog-post-pic-15.png",
|
||||
},
|
||||
{
|
||||
date: "Apl.06/2025",
|
||||
title: "MileTruth™ AI — 10 Stages to Smarter Dispatch",
|
||||
excerpt: "From order ingestion to final route output in under 45ms — a technical walkthrough of the ten-stage pipeline at the heart of our routing engine.",
|
||||
category: "MileTruth",
|
||||
image: "/images/blog-post-pic-31.png",
|
||||
},
|
||||
{
|
||||
date: "Apl.06/2025",
|
||||
title: "Why Mathematical Precision Beats Heuristics in Routing",
|
||||
excerpt: "Most routing tools guess. We calculate. Powered by Google OR-Tools, MileTruth evaluates six parallel strategy universes to select the optimal route every time.",
|
||||
category: "Technology",
|
||||
image: "/images/blog-post-pic-14.jpeg",
|
||||
},
|
||||
{
|
||||
date: "Apl.06/2025",
|
||||
title: "Fleet Reduction Without Compromising Delivery Volume",
|
||||
excerpt: "Deploying 37% fewer vehicles while handling the same order volumes isn't a trade-off — it's the result of smarter routing intelligence applied at every dispatch.",
|
||||
category: "Fleet Management",
|
||||
image: "/images/blog-post-pic-8.jpeg",
|
||||
},
|
||||
{
|
||||
date: "Apl.06/2025",
|
||||
title: "Building a Greener City: The Future of Urban Logistics",
|
||||
excerpt: "Cities are demanding cleaner delivery. We explore how AI-powered EV fleets and optimised routing create a path to zero-emission last-mile logistics at city scale.",
|
||||
category: "Sustainability",
|
||||
image: "/images/blog-post-pic-6.jpeg",
|
||||
},
|
||||
{
|
||||
date: "Apl.06/2025",
|
||||
title: "How Doormile Maintains 99.9% SLA Compliance at Scale",
|
||||
excerpt: "Hitting SLA targets 99.9% of the time isn't luck — it's the product of ETA pre-validation, real-time rebalancing, and a routing engine built with delivery reliability as its first constraint.",
|
||||
category: "Operations",
|
||||
image: "/images/blog-post-pic-4.jpeg",
|
||||
image: "/images/last-mile-approach.jpg",
|
||||
},
|
||||
{
|
||||
date: "Apl.06/2025",
|
||||
title: "Battery Simulation: The Secret to EV Route Pre-Validation",
|
||||
excerpt: "Before a single rider leaves the hub, MileTruth™ simulates every route against real charge capacity — eliminating mid-route failures and protecting your fulfillment rate.",
|
||||
category: "EV Fleet",
|
||||
@@ -114,24 +105,6 @@ export default function BlogGrid() {
|
||||
border-color: rgba(192, 18, 39, 0.2) !important;
|
||||
}
|
||||
|
||||
.custom-blog-date {
|
||||
font-size: 12px !important;
|
||||
font-weight: 700 !important;
|
||||
color: #94a3b8 !important;
|
||||
text-transform: uppercase !important;
|
||||
letter-spacing: 1px !important;
|
||||
margin-bottom: 8px !important;
|
||||
display: block !important;
|
||||
font-family: var(--font-manrope), sans-serif !important;
|
||||
}
|
||||
|
||||
.custom-blog-divider {
|
||||
width: 100% !important;
|
||||
height: 1px !important;
|
||||
background: rgba(0, 0, 0, 0.08) !important;
|
||||
margin-bottom: 20px !important;
|
||||
}
|
||||
|
||||
.custom-blog-title {
|
||||
font-size: 20px !important;
|
||||
font-weight: 800 !important;
|
||||
@@ -157,11 +130,32 @@ export default function BlogGrid() {
|
||||
font-weight: 500 !important;
|
||||
color: #64748b !important;
|
||||
line-height: 1.6 !important;
|
||||
margin: 0 0 24px 0 !important;
|
||||
margin: 0 0 18px 0 !important;
|
||||
text-transform: none !important;
|
||||
font-family: var(--font-manrope), sans-serif !important;
|
||||
}
|
||||
|
||||
.custom-blog-readmore {
|
||||
display: inline-flex !important;
|
||||
align-items: center !important;
|
||||
gap: 6px !important;
|
||||
font-size: 13px !important;
|
||||
font-weight: 800 !important;
|
||||
color: #c01227 !important;
|
||||
text-transform: uppercase !important;
|
||||
letter-spacing: 0.5px !important;
|
||||
margin: 0 0 24px 0 !important;
|
||||
font-family: var(--font-manrope), sans-serif !important;
|
||||
}
|
||||
|
||||
.custom-blog-readmore-arrow {
|
||||
transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1) !important;
|
||||
}
|
||||
|
||||
.custom-blog-card:hover .custom-blog-readmore-arrow {
|
||||
transform: translateX(5px) !important;
|
||||
}
|
||||
|
||||
.custom-blog-img-container {
|
||||
position: relative !important;
|
||||
width: 100% !important;
|
||||
@@ -201,23 +195,21 @@ export default function BlogGrid() {
|
||||
<div className="custom-blog-card">
|
||||
{/* Text Block at Top */}
|
||||
<div className="flex flex-col">
|
||||
{/* Date */}
|
||||
<span className="custom-blog-date">
|
||||
{blog.date}
|
||||
</span>
|
||||
|
||||
{/* Thin divider line */}
|
||||
<div className="custom-blog-divider" />
|
||||
|
||||
{/* Bold Title */}
|
||||
<h3 className="custom-blog-title">
|
||||
{blog.title}
|
||||
</h3>
|
||||
|
||||
|
||||
{/* Description Excerpt */}
|
||||
<p className="custom-blog-excerpt">
|
||||
{blog.excerpt}
|
||||
</p>
|
||||
|
||||
{/* Read More */}
|
||||
<span className="custom-blog-readmore">
|
||||
Read More
|
||||
<span aria-hidden="true" className="custom-blog-readmore-arrow">→</span>
|
||||
</span>
|
||||
</div>
|
||||
|
||||
{/* Image at Bottom */}
|
||||
|
||||
@@ -10,6 +10,7 @@ export default function BlogsHero() {
|
||||
font-family: var(--font-manrope), sans-serif !important;
|
||||
font-size: clamp(34px, 5.5vw, 68px) !important;
|
||||
font-weight: 850 !important;
|
||||
line-height: 1.08 !important;
|
||||
text-transform: uppercase !important;
|
||||
letter-spacing: -1.5px !important;
|
||||
margin: 0 !important;
|
||||
@@ -30,22 +31,11 @@ export default function BlogsHero() {
|
||||
{/* Title / Heading for Blogs */}
|
||||
<div style={{ textAlign: "center", color: "#fff", zIndex: 5 }}>
|
||||
<h1 className="blogs-hero-title">
|
||||
Our <span style={{ color: "#C01227" }}>Blogs</span>
|
||||
Delivering Trust.<br />
|
||||
<span style={{ color: "#C01227" }}>Beyond Boundaries</span>
|
||||
</h1>
|
||||
</div>
|
||||
|
||||
<div
|
||||
className="elementor-element elementor-element-91be79f elementor-widget__width-auto elementor-absolute elementor-widget elementor-widget-logico_breadcrumbs"
|
||||
style={{ position: "absolute", bottom: "40px", left: "50%", transform: "translateX(-50%)", zIndex: 10 }}
|
||||
>
|
||||
<div className="elementor-widget-container">
|
||||
<nav className="breadcrumbs" style={{ background: "rgba(255, 255, 255, 0.1)", backdropFilter: "blur(10px)", padding: "10px 24px", borderRadius: "30px", border: "1px solid rgba(255, 255, 255, 0.15)" }}>
|
||||
<Link href="/" style={{ color: "#fff", fontWeight: 600 }}>Home</Link>
|
||||
<span className="delimiter" style={{ color: "rgba(255, 255, 255, 0.6)", margin: "0 8px" }}>/</span>
|
||||
<span className="current" style={{ color: "#C01227", fontWeight: 700 }}>Blogs</span>
|
||||
</nav>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -77,7 +77,7 @@ export default function CompetitiveEdge() {
|
||||
<div className="advantage-eyebrow-container">
|
||||
<span className="advantage-eyebrow">/ DoorMile wins/</span>
|
||||
</div>
|
||||
<h2 className="moat-heading" data-text="WHERE DOORMILE SITS AND WHY IT WINS">WHERE DOORMILE SITS AND WHY IT WINS</h2>
|
||||
<h2 className="moat-heading" data-text="WHERE DOORMILE WINS">WHERE DOORMILE WINS</h2>
|
||||
<p className="moat-desc">
|
||||
A side-by-side technical capabilities comparison showing how operational fleet ownership and dynamic AI planning disrupt basic aggregators.
|
||||
</p>
|
||||
|
||||
@@ -207,7 +207,7 @@ export default function EVLogisticSection() {
|
||||
|
||||
.ev-logistic-kicker {
|
||||
font-size: 14px !important;
|
||||
font-weight: 500 !important;
|
||||
font-weight: 400 !important;
|
||||
line-height: 2.1429em !important;
|
||||
letter-spacing: 0px !important; /* Expands to 3px on scroll */
|
||||
text-transform: lowercase !important;
|
||||
@@ -464,7 +464,7 @@ export default function EVLogisticSection() {
|
||||
>
|
||||
{/* Top Header Row with / features / kicker */}
|
||||
<div className="ev-logistic-header">
|
||||
<div className="ev-logistic-kicker">/ features /</div>
|
||||
<div className="ev-logistic-kicker">/ Build Electric Vehicles /</div>
|
||||
</div>
|
||||
|
||||
<div className="ev-logistic-body-grid">
|
||||
|
||||
@@ -5,11 +5,11 @@ import React, { useState, useEffect } from "react";
|
||||
export default function HowItWorksHero() {
|
||||
const [activeSlide, setActiveSlide] = useState(0);
|
||||
|
||||
// Auto-slide every 6 seconds
|
||||
// Auto-slide every 7 seconds — slower, more readable, professional pacing
|
||||
useEffect(() => {
|
||||
const interval = setInterval(() => {
|
||||
setActiveSlide((prev) => (prev === 0 ? 1 : 0));
|
||||
}, 6000);
|
||||
}, 7000);
|
||||
return () => clearInterval(interval);
|
||||
}, []);
|
||||
|
||||
@@ -77,11 +77,23 @@ export default function HowItWorksHero() {
|
||||
|
||||
.elementor-element.elementor-element-6c7cbcb .text-content {
|
||||
text-align: center !important;
|
||||
max-width: 800px !important;
|
||||
max-width: 820px !important;
|
||||
margin: 0 auto !important;
|
||||
}
|
||||
|
||||
/* Larger, more readable hero subtitle on large/4K screens */
|
||||
.elementor-element.elementor-element-6c7cbcb .content-slider-item-text p {
|
||||
font-size: clamp(16px, 1.35vw, 23px) !important;
|
||||
line-height: 1.65 !important;
|
||||
}
|
||||
|
||||
@media (min-width: 1025px) {
|
||||
/* Match Home's hero frame so the floating navbar sits with the same
|
||||
breathing space. Home (.elementor-61) frames the hero card at 20px;
|
||||
this page falls through to the shared kit's 32px base. */
|
||||
.elementor-element.elementor-element-741f56c {
|
||||
padding: 20px !important;
|
||||
}
|
||||
.elementor-element.elementor-element-6c7cbcb .owl-carousel.owl-theme .content-item {
|
||||
height: 800px !important;
|
||||
min-height: 800px !important;
|
||||
|
||||
@@ -8,11 +8,11 @@ export default function IndexHero() {
|
||||
const [activeSlide, setActiveSlide] = useState(0);
|
||||
const containerRef = useRef<HTMLDivElement>(null);
|
||||
|
||||
// Auto-slide every 6 seconds
|
||||
// Auto-slide every 7 seconds — slower, more readable, professional pacing
|
||||
useEffect(() => {
|
||||
const interval = setInterval(() => {
|
||||
setActiveSlide((prev) => (prev === 0 ? 1 : 0));
|
||||
}, 6000);
|
||||
}, 7000);
|
||||
return () => clearInterval(interval);
|
||||
}, []);
|
||||
|
||||
@@ -94,12 +94,18 @@ export default function IndexHero() {
|
||||
|
||||
.logico-content-slider-widget .text-content {
|
||||
width: 100% !important;
|
||||
max-width: min(680px, 100%) !important;
|
||||
max-width: min(780px, 100%) !important;
|
||||
box-sizing: border-box !important;
|
||||
padding-left: 15px !important;
|
||||
padding-right: 15px !important;
|
||||
}
|
||||
|
||||
/* Larger, more readable hero subtitle on large/4K screens */
|
||||
.logico-content-slider-widget .content-slider-item-text p {
|
||||
font-size: clamp(16px, 1.35vw, 23px) !important;
|
||||
line-height: 1.65 !important;
|
||||
}
|
||||
|
||||
/* Responsive slider heights */
|
||||
.logico-content-slider-widget .owl-stage-outer {
|
||||
height: 800px !important;
|
||||
|
||||
@@ -11,14 +11,14 @@ export default function IndustrySolutions() {
|
||||
|
||||
<div className="elementor-element elementor-element-f64bd88 e-con-full e-flex cut-corner-no sticky-container-off e-con e-child" data-id="f64bd88" data-element_type="container" data-e-type="container">
|
||||
<div className="elementor-element elementor-element-5ed2dbb e-con-full e-flex cut-corner-no sticky-container-off e-con e-child" data-id="5ed2dbb" data-element_type="container" data-e-type="container">
|
||||
<div className="elementor-element elementor-element-c8162c4 elementor-widget elementor-widget-logico_heading industry-section-label" data-id="c8162c4" data-element_type="widget" data-e-type="widget" data-widget_type="logico_heading.default" style={{paddingLeft: "50px"}}>
|
||||
<div className="elementor-element elementor-element-c8162c4 elementor-widget elementor-widget-logico_heading industry-section-label" data-id="c8162c4" data-element_type="widget" data-e-type="widget" data-widget_type="logico_heading.default">
|
||||
<style dangerouslySetInnerHTML={{ __html: `
|
||||
/* Minimal section label — matches the "/ Doormile Approach /" pattern */
|
||||
.industry-section-label {
|
||||
width: 100%;
|
||||
}
|
||||
.industry-section-label > .elementor-widget-container {
|
||||
max-width: 1740px;
|
||||
max-width: 100%;
|
||||
margin: 12px 0 50px 0;
|
||||
padding: 0 0 14px 0;
|
||||
border-style: solid;
|
||||
@@ -60,17 +60,9 @@ export default function IndustrySolutions() {
|
||||
data-element_type="widget"
|
||||
data-e-type="widget"
|
||||
data-widget_type="logico_heading.default"
|
||||
style={{marginLeft: "50px"}}
|
||||
>
|
||||
<div className="elementor-widget-container" style={{ margin: "30px 0 0 0"}}>
|
||||
<style dangerouslySetInnerHTML={{ __html: `
|
||||
@media (min-width: 1024px) {
|
||||
.industry-title-single-line {
|
||||
white-space: nowrap !important;
|
||||
}
|
||||
}
|
||||
`}} />
|
||||
<h3 className="logico-title industry-title-single-line" style={{ fontSize: "clamp(28px, 3.5vw, 48px)", lineHeight: "1.1", fontWeight: 800, textTransform: "uppercase" }}>
|
||||
<h3 className="logico-title" style={{ fontSize: "clamp(28px, 3.5vw, 48px)", lineHeight: "1.1", fontWeight: 800, textTransform: "uppercase", maxWidth: "900px" }}>
|
||||
<ScrollReveal delay={0.05} duration={0.8} yOffset={25}>
|
||||
Smart solutions built exclusively for your <span style={{ color: "#c01227" }}>industry</span>
|
||||
</ScrollReveal>
|
||||
|
||||
@@ -252,8 +252,16 @@ export default function IntelligenceGrid() {
|
||||
/* Buttery-Smooth Hardware-Accelerated 3D AI Logistics Timeline Styles */
|
||||
.roadmap-hero-section {
|
||||
position: relative;
|
||||
background: #09090b !important;
|
||||
width: 100%;
|
||||
background: #09090b !important;
|
||||
/* Stay WIDE and immersive — span nearly the full viewport, inset only
|
||||
by the site's standard left/right gutter (40px desktop, 32/24 on
|
||||
smaller screens) so the dark band never touches the viewport edge.
|
||||
No narrow max-width: the roadmap timeline + 4 milestone cards keep
|
||||
the large content area. Auto margins keep the gutters equal. */
|
||||
width: calc(100% - 80px);
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
border-radius: 24px;
|
||||
padding: 100px 40px;
|
||||
box-sizing: border-box;
|
||||
font-family: 'Manrope', sans-serif;
|
||||
@@ -299,7 +307,9 @@ export default function IntelligenceGrid() {
|
||||
}
|
||||
|
||||
.roadmap-hero-section .container {
|
||||
max-width: 1320px;
|
||||
/* Fill the wide section so the timeline + cards span most of the
|
||||
available width (no narrow content cap). */
|
||||
max-width: 100%;
|
||||
width: 100%;
|
||||
margin: 0 auto;
|
||||
position: relative;
|
||||
@@ -683,6 +693,7 @@ export default function IntelligenceGrid() {
|
||||
/* Responsive Constraints */
|
||||
@media (max-width: 1024px) {
|
||||
.roadmap-hero-section {
|
||||
width: calc(100% - 64px); /* 32px gutter */
|
||||
padding: 80px 24px;
|
||||
}
|
||||
|
||||
@@ -698,6 +709,7 @@ export default function IntelligenceGrid() {
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.roadmap-hero-section {
|
||||
width: calc(100% - 48px); /* 24px gutter */
|
||||
padding: 60px 16px;
|
||||
}
|
||||
|
||||
|
||||
284
src/components/sections/LegalDocument.tsx
Normal file
284
src/components/sections/LegalDocument.tsx
Normal file
@@ -0,0 +1,284 @@
|
||||
import React from "react";
|
||||
import Link from "next/link";
|
||||
|
||||
/**
|
||||
* Shared layout for the legal pages (Privacy Policy, Terms of Service, Cookie
|
||||
* Policy) so all three stay pixel-consistent. Content is passed in as structured
|
||||
* blocks; this component owns the hero, the desktop sticky table of contents and
|
||||
* the 800px reading column described in the design spec.
|
||||
*/
|
||||
|
||||
export type LegalBlock =
|
||||
| { type: "p"; text: React.ReactNode }
|
||||
| { type: "lead"; text: React.ReactNode }
|
||||
| { type: "h3"; text: string }
|
||||
| { type: "ul"; items: React.ReactNode[] };
|
||||
|
||||
export type LegalSection = {
|
||||
heading: string;
|
||||
blocks: LegalBlock[];
|
||||
};
|
||||
|
||||
export type LegalDocumentProps = {
|
||||
title: string;
|
||||
lastUpdated: string;
|
||||
intro: React.ReactNode;
|
||||
sections: LegalSection[];
|
||||
};
|
||||
|
||||
/** Stable, URL-safe id from a section heading (for TOC anchors). */
|
||||
function slug(heading: string): string {
|
||||
return heading
|
||||
.toLowerCase()
|
||||
.replace(/&/g, "and")
|
||||
.replace(/[^a-z0-9]+/g, "-")
|
||||
.replace(/(^-|-$)/g, "");
|
||||
}
|
||||
|
||||
function Block({ block }: { block: LegalBlock }) {
|
||||
switch (block.type) {
|
||||
case "lead":
|
||||
return <p className="dm-legal__lead">{block.text}</p>;
|
||||
case "p":
|
||||
return <p className="dm-legal__p">{block.text}</p>;
|
||||
case "h3":
|
||||
return <h3 className="dm-legal__h3">{block.text}</h3>;
|
||||
case "ul":
|
||||
return (
|
||||
<ul className="dm-legal__ul">
|
||||
{block.items.map((item, i) => (
|
||||
<li key={i}>{item}</li>
|
||||
))}
|
||||
</ul>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default function LegalDocument({ title, lastUpdated, intro, sections }: LegalDocumentProps) {
|
||||
return (
|
||||
<section className="dm-legal" aria-label={title}>
|
||||
<div className="dm-legal__wrap">
|
||||
{/* Desktop sticky table of contents */}
|
||||
<aside className="dm-legal__toc" aria-label="On this page">
|
||||
<div className="dm-legal__toc-inner">
|
||||
<p className="dm-legal__toc-label">On this page</p>
|
||||
<nav>
|
||||
<ul>
|
||||
{sections.map((s) => (
|
||||
<li key={s.heading}>
|
||||
<a href={`#${slug(s.heading)}`}>{s.heading}</a>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
<div className="dm-legal__main">
|
||||
<header className="dm-legal__hero">
|
||||
<h1 className="dm-legal__title">{title}</h1>
|
||||
<p className="dm-legal__updated">Last Updated: {lastUpdated}</p>
|
||||
<p className="dm-legal__lead">{intro}</p>
|
||||
</header>
|
||||
|
||||
<article className="dm-legal__content">
|
||||
{sections.map((s) => (
|
||||
<section key={s.heading} id={slug(s.heading)} className="dm-legal__section">
|
||||
<h2 className="dm-legal__h2">{s.heading}</h2>
|
||||
{s.blocks.map((b, i) => (
|
||||
<Block key={i} block={b} />
|
||||
))}
|
||||
</section>
|
||||
))}
|
||||
</article>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>{styles}</style>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
/** Renders the recurring "contact us through our Contact page" link. */
|
||||
export function ContactLink() {
|
||||
return (
|
||||
<Link href="/contact" className="dm-legal__link">
|
||||
Contact page
|
||||
</Link>
|
||||
);
|
||||
}
|
||||
|
||||
const styles = `
|
||||
.dm-legal {
|
||||
background: #ffffff;
|
||||
color: #334155;
|
||||
/* Top padding clears the fixed/absolute floating navbar (~104px) + breathing room. */
|
||||
padding: clamp(132px, 16vh, 184px) 0 clamp(72px, 10vw, 96px);
|
||||
font-family: var(--font-manrope), system-ui, -apple-system, sans-serif;
|
||||
}
|
||||
|
||||
.dm-legal__wrap {
|
||||
max-width: 1180px;
|
||||
margin: 0 auto;
|
||||
padding: 0 clamp(20px, 5vw, 40px);
|
||||
display: grid;
|
||||
grid-template-columns: minmax(0, 1fr);
|
||||
gap: 0;
|
||||
}
|
||||
|
||||
/* ---- Sticky table of contents (desktop only) ---- */
|
||||
.dm-legal__toc { display: none; }
|
||||
|
||||
@media (min-width: 1080px) {
|
||||
.dm-legal__wrap {
|
||||
grid-template-columns: 248px minmax(0, 800px);
|
||||
justify-content: center;
|
||||
gap: 64px;
|
||||
}
|
||||
.dm-legal__toc { display: block; }
|
||||
}
|
||||
|
||||
.dm-legal__toc-inner { position: sticky; top: 128px; }
|
||||
.dm-legal__toc-label {
|
||||
margin: 0 0 14px;
|
||||
font-size: 12px;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.14em;
|
||||
text-transform: uppercase;
|
||||
color: #94a3b8;
|
||||
}
|
||||
.dm-legal__toc nav ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
|
||||
.dm-legal__toc nav a {
|
||||
display: block;
|
||||
font-size: 14px;
|
||||
line-height: 1.4;
|
||||
color: #64748b;
|
||||
text-decoration: none;
|
||||
border-left: 2px solid transparent;
|
||||
padding-left: 12px;
|
||||
transition: color 0.2s ease, border-color 0.2s ease;
|
||||
}
|
||||
.dm-legal__toc nav a:hover { color: #c01227; border-left-color: #c01227; }
|
||||
|
||||
/* ---- Reading column (max 800px) ---- */
|
||||
.dm-legal__main { min-width: 0; max-width: 800px; }
|
||||
|
||||
.dm-legal__hero { margin-bottom: clamp(40px, 6vw, 56px); }
|
||||
.dm-legal__title {
|
||||
margin: 0 !important;
|
||||
padding: 0 !important;
|
||||
/* !important / text-transform override the global ".elementor-kit-5 h1"
|
||||
(uppercase + kit font-size) so headings render in normal case at the spec sizes. */
|
||||
font-size: clamp(40px, 6vw, 60px) !important;
|
||||
font-weight: 800 !important;
|
||||
line-height: 1.08 !important;
|
||||
letter-spacing: -0.02em !important;
|
||||
text-transform: none !important;
|
||||
color: #0f172a !important;
|
||||
}
|
||||
.dm-legal__updated {
|
||||
margin: 16px 0 0;
|
||||
font-size: 14px;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.08em;
|
||||
text-transform: uppercase;
|
||||
color: #94a3b8;
|
||||
}
|
||||
|
||||
.dm-legal__lead {
|
||||
margin: 24px 0 0;
|
||||
font-size: clamp(18px, 1.6vw, 20px);
|
||||
line-height: 1.7;
|
||||
color: #475569;
|
||||
}
|
||||
.dm-legal__hero .dm-legal__lead { margin-top: 24px; }
|
||||
|
||||
/* ---- Sections ---- */
|
||||
.dm-legal__content { display: flex; flex-direction: column; }
|
||||
.dm-legal__section { padding-top: 32px; }
|
||||
.dm-legal__section:first-child { padding-top: 0; }
|
||||
|
||||
.dm-legal__h2 {
|
||||
margin: 0 0 16px !important;
|
||||
padding: 0 !important;
|
||||
font-size: clamp(24px, 3vw, 32px) !important;
|
||||
font-weight: 700 !important;
|
||||
line-height: 1.2 !important;
|
||||
letter-spacing: -0.01em !important;
|
||||
text-transform: none !important;
|
||||
color: #0f172a !important;
|
||||
/* Offset anchor jumps so the heading isn't hidden under the fixed navbar. */
|
||||
scroll-margin-top: 120px;
|
||||
}
|
||||
.dm-legal__h3 {
|
||||
margin: 24px 0 8px !important;
|
||||
padding: 0 !important;
|
||||
font-size: 20px !important;
|
||||
font-weight: 700 !important;
|
||||
line-height: 1.35 !important;
|
||||
text-transform: none !important;
|
||||
color: #0f172a !important;
|
||||
}
|
||||
.dm-legal__p {
|
||||
margin: 0 0 16px;
|
||||
font-size: 18px;
|
||||
line-height: 1.7;
|
||||
color: #334155;
|
||||
}
|
||||
.dm-legal__p:last-child { margin-bottom: 0; }
|
||||
|
||||
.dm-legal__ul { margin: 4px 0 16px; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 10px; }
|
||||
.dm-legal__ul li {
|
||||
position: relative;
|
||||
padding-left: 26px;
|
||||
font-size: 18px;
|
||||
line-height: 1.7;
|
||||
color: #334155;
|
||||
}
|
||||
/* Extra .dm-legal prefix raises specificity above the global theme rule
|
||||
".logico-front-end ul li:before" (a fontello glyph), so our clean red dot
|
||||
replaces the inherited checkmark marker. */
|
||||
.dm-legal .dm-legal__ul li::before {
|
||||
content: "" !important;
|
||||
position: absolute;
|
||||
left: 4px;
|
||||
top: 0.62em;
|
||||
width: 7px;
|
||||
height: 7px;
|
||||
border-radius: 50%;
|
||||
background: #c01227;
|
||||
font-size: 0;
|
||||
}
|
||||
/* TOC links are inside a <ul> too — suppress the same inherited glyph marker. */
|
||||
.dm-legal .dm-legal__toc nav li::before { content: none !important; }
|
||||
|
||||
.dm-legal__link { color: #c01227; font-weight: 600; text-decoration: none; border-bottom: 1px solid rgba(192,18,39,0.35); }
|
||||
.dm-legal__link:hover { border-bottom-color: #c01227; }
|
||||
|
||||
@media (max-width: 1079px) {
|
||||
.dm-legal__main { margin: 0 auto; }
|
||||
}
|
||||
|
||||
/* ============================================================
|
||||
Navbar visibility — LEGAL PAGES ONLY.
|
||||
This <style> block is rendered exclusively by LegalDocument, which only mounts
|
||||
on /privacy-policy, /terms-of-service and /cookie-policy. So although the rule
|
||||
targets the global #masthead, it is physically absent from every other page's
|
||||
HTML and cannot affect them — no global CSS file is touched.
|
||||
|
||||
Why it's needed: the desktop logo and nav links are white and the navbar bar is
|
||||
transparent at the top of the page. Over the dark heroes used elsewhere that's
|
||||
fine, but on these white pages the navbar vanishes. Give the bar the same dark
|
||||
glass fill the rest of the site already shows on scroll. Desktop only — the
|
||||
mobile logo is black-on-transparent and already legible here.
|
||||
============================================================ */
|
||||
@media (min-width: 1025px) {
|
||||
#masthead .elementor-element.elementor-element-466de1b {
|
||||
background: rgba(40, 40, 40, 0.75) !important;
|
||||
-webkit-backdrop-filter: blur(12px) !important;
|
||||
backdrop-filter: blur(12px) !important;
|
||||
border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
|
||||
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.16) !important;
|
||||
}
|
||||
}
|
||||
`;
|
||||
@@ -99,11 +99,11 @@ export default function MileTruthHero() {
|
||||
.miletruth-hero .content-slider-item-text p {
|
||||
color: rgba(255, 255, 255, 0.72) !important;
|
||||
font-family: var(--font-manrope), "Manrope", sans-serif !important;
|
||||
font-size: clamp(16px, 1.8vw, 20px) !important;
|
||||
font-size: clamp(17px, 1.6vw, 23px) !important;
|
||||
font-weight: 500 !important;
|
||||
line-height: 1.6 !important;
|
||||
line-height: 1.65 !important;
|
||||
margin: 0 auto !important;
|
||||
max-width: 800px;
|
||||
max-width: 820px;
|
||||
}
|
||||
.miletruth-hero .slide-content {
|
||||
display: flex !important;
|
||||
|
||||
@@ -10,7 +10,7 @@ export default function Miles3() {
|
||||
/* =====================================================================
|
||||
How It Works · "Doormile connects first, mid, and last mile" section
|
||||
Self-contained recreation of the original Elementor design
|
||||
(source: public/css/sections/section-miles3.css + kit-5 typography).
|
||||
(originally Elementor section CSS, now inlined below + in /public/css/site.css).
|
||||
Explicit flex/grid values because the Elementor framework reads them
|
||||
from CSS custom properties that aren't set in this rebuild.
|
||||
===================================================================== */
|
||||
@@ -25,7 +25,7 @@ export default function Miles3() {
|
||||
margin: 20px 20px 0 20px;
|
||||
background-color: #1F1F1F;
|
||||
border-radius: 25px 25px 0 0;
|
||||
padding: 150px 0 0 0;
|
||||
padding: 90px 0 0 0;
|
||||
}
|
||||
/* Boxed inner — centered, original content width */
|
||||
.elementor-element-c36a604 > .e-con-inner {
|
||||
@@ -165,7 +165,7 @@ export default function Miles3() {
|
||||
.logico-front-end .elementor-element-63a9de5 .logico-title { font-size: clamp(40px, 5vw, 60px); }
|
||||
}
|
||||
@media (max-width: 1020px) {
|
||||
.elementor-element-c36a604 { margin: 15px 15px 0 15px; padding: 100px 0 0 0; }
|
||||
.elementor-element-c36a604 { margin: 15px 15px 0 15px; padding: 76px 0 0 0; }
|
||||
.elementor-element-77d1265 { padding: 0 30px; }
|
||||
.elementor-element-4add972 { grid-template-columns: repeat(2, 1fr); gap: 50px 40px; }
|
||||
.logico-front-end .elementor-element-63a9de5 .logico-title { font-size: clamp(34px, 6vw, 52px); }
|
||||
|
||||
@@ -8,11 +8,7 @@ export default function OurTeam() {
|
||||
position: "COO & Operational Specialist",
|
||||
image: "/images/Investor.png",
|
||||
},
|
||||
{
|
||||
name: "Fazul Ilahi",
|
||||
position: "CTO & Technology Specialist",
|
||||
image: "/images/Fazul.png",
|
||||
},
|
||||
|
||||
{
|
||||
name: "Parthiban",
|
||||
position: "CGO & Growth Specialist",
|
||||
@@ -22,6 +18,11 @@ export default function OurTeam() {
|
||||
name: "Aravinth",
|
||||
position: "CFO & Finance Specialist",
|
||||
image: "/images/Aravinth.png",
|
||||
},
|
||||
{
|
||||
name: "Fazul Ilahi",
|
||||
position: "CTO & Technology Specialist",
|
||||
image: "/images/Fazul.png",
|
||||
},
|
||||
{
|
||||
name: "Suriya Kumar",
|
||||
@@ -48,6 +49,9 @@ export default function OurTeam() {
|
||||
width: 100%;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
padding-left: clamp(20px, 4vw, 50px) !important;
|
||||
padding-right: clamp(20px, 4vw, 50px) !important;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
/* Breathing room above and below the "Meet our the best crew" heading. */
|
||||
@@ -65,38 +69,40 @@ export default function OurTeam() {
|
||||
filter: grayscale(0%);
|
||||
}
|
||||
|
||||
/* Self-contained layout (does not rely on the cached vendor CSS). */
|
||||
/* Grid: three columns that wrap, with tightened row/column gaps. */
|
||||
/* Grid: five columns that wrap, with tightened row/column gaps. */
|
||||
.team-listing-wrapper.team-grid-listing {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
margin: 0 -16px -40px;
|
||||
}
|
||||
.team-listing-wrapper.team-grid-listing .team-item-wrapper {
|
||||
width: 33.3333%;
|
||||
width: 20%;
|
||||
padding: 0 16px;
|
||||
margin-bottom: 40px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
@media (max-width: 1020px) {
|
||||
@media (max-width: 1200px) {
|
||||
.team-listing-wrapper.team-grid-listing .team-item-wrapper { width: 33.3333%; }
|
||||
}
|
||||
@media (max-width: 800px) {
|
||||
.team-listing-wrapper.team-grid-listing .team-item-wrapper { width: 50%; }
|
||||
}
|
||||
@media (max-width: 660px) {
|
||||
@media (max-width: 480px) {
|
||||
.team-listing-wrapper.team-grid-listing .team-item-wrapper { width: 100%; }
|
||||
}
|
||||
|
||||
/* Card: photo on the LEFT, name/position on the RIGHT (side by side). */
|
||||
|
||||
/* Card: photo on top, name/position at the bottom (down to image). */
|
||||
.team-listing-wrapper.team-grid-listing .team-item {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
gap: 22px;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
gap: 16px;
|
||||
width: 100%;
|
||||
}
|
||||
/* Compact portrait photo. Extra .team-item in the selector raises the
|
||||
specificity so it beats the cached vendor rule (width: 45.65%). */
|
||||
.team-listing-wrapper.team-grid-listing .team-item .team-item-media {
|
||||
flex-shrink: 0;
|
||||
width: 160px;
|
||||
width: 100%;
|
||||
margin: 0;
|
||||
}
|
||||
.team-listing-wrapper.team-grid-listing .team-item .post-media {
|
||||
@@ -113,7 +119,7 @@ export default function OurTeam() {
|
||||
object-fit: cover;
|
||||
}
|
||||
.team-listing-wrapper.team-grid-listing .team-item .team-item-content {
|
||||
flex: 1;
|
||||
width: 100%;
|
||||
margin: 0;
|
||||
}
|
||||
`}} />
|
||||
@@ -128,7 +134,7 @@ export default function OurTeam() {
|
||||
|
||||
<div style={{ alignSelf: "flex-start", width: "100%" }} className="elementor-element elementor-element-c46350e elementor-widget__width-initial elementor-widget elementor-widget-logico_heading" data-id="c46350e" data-element_type="widget" data-e-type="widget" data-widget_type="logico_heading.default">
|
||||
<div className="elementor-widget-container">
|
||||
<h3 className="logico-title" style={{ textAlign: "left" }}>Meet our the best crew</h3>
|
||||
<h3 className="logico-title" style={{ textAlign: "left" }}>Meet crew</h3>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -136,7 +142,7 @@ export default function OurTeam() {
|
||||
<div className="elementor-widget-container">
|
||||
<div className="logico-team-listing-widget">
|
||||
<div className="archive-listing">
|
||||
<div className="archive-listing-wrapper team-listing-wrapper team-grid-listing columns-3">
|
||||
<div className="archive-listing-wrapper team-listing-wrapper team-grid-listing columns-5">
|
||||
|
||||
{teamMembers.map((member, i) => (
|
||||
<div key={i} className="team-item-wrapper post-2866 team type-team status-publish has-post-thumbnail hentry">
|
||||
@@ -159,10 +165,7 @@ export default function OurTeam() {
|
||||
<div className="team-item-position" dangerouslySetInnerHTML={{ __html: member.position }}></div>
|
||||
<div className="team-item-socials">
|
||||
<ul className="team-socials wrapper-socials">
|
||||
<li><a href="https://www.facebook.com/" target="_blank" rel="noreferrer" className="fab fa-facebook-f"></a></li>
|
||||
<li><a href="https://x.com/" target="_blank" rel="noreferrer" className="fab fa-x-twitter"></a></li>
|
||||
<li><a href="https://www.linkedin.com/" target="_blank" rel="noreferrer" className="fab fa-linkedin-in"></a></li>
|
||||
<li><a href="https://www.youtube.com/" target="_blank" rel="noreferrer" className="fab fa-youtube"></a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -5,11 +5,11 @@ import React, { useState, useEffect } from "react";
|
||||
export default function SolutionsHero() {
|
||||
const [activeSlide, setActiveSlide] = useState(0);
|
||||
|
||||
// Auto-slide every 6 seconds
|
||||
// Auto-slide every 7 seconds — slower, more readable, professional pacing
|
||||
useEffect(() => {
|
||||
const interval = setInterval(() => {
|
||||
setActiveSlide((prev) => (prev === 0 ? 1 : 0));
|
||||
}, 6000);
|
||||
}, 7000);
|
||||
return () => clearInterval(interval);
|
||||
}, []);
|
||||
|
||||
@@ -77,11 +77,23 @@ export default function SolutionsHero() {
|
||||
|
||||
.elementor-element.elementor-element-6c7cbcb .text-content {
|
||||
text-align: center !important;
|
||||
max-width: 800px !important;
|
||||
max-width: 820px !important;
|
||||
margin: 0 auto !important;
|
||||
}
|
||||
|
||||
/* Larger, more readable hero subtitle on large/4K screens */
|
||||
.elementor-element.elementor-element-6c7cbcb .content-slider-item-text p {
|
||||
font-size: clamp(16px, 1.35vw, 23px) !important;
|
||||
line-height: 1.65 !important;
|
||||
}
|
||||
|
||||
@media (min-width: 1025px) {
|
||||
/* Match Home's hero frame so the floating navbar sits with the same
|
||||
breathing space. Home (.elementor-61) frames the hero card at 20px;
|
||||
this page falls through to the shared kit's 32px base. */
|
||||
.elementor-element.elementor-element-741f56c {
|
||||
padding: 20px !important;
|
||||
}
|
||||
.elementor-element.elementor-element-6c7cbcb .owl-carousel.owl-theme .content-item {
|
||||
height: 800px !important;
|
||||
min-height: 800px !important;
|
||||
|
||||
@@ -265,7 +265,7 @@ export default function WomenSection() {
|
||||
<div className="elementor-element elementor-element-90cc867 e-con-full e-flex cut-corner-no sticky-container-off e-con e-child" data-id="90cc867" data-element_type="container" data-e-type="container">
|
||||
<div className="elementor-element elementor-element-24c0280 elementor-widget__width-inherit elementor-widget elementor-widget-logico_heading" data-id="24c0280" data-element_type="widget" data-e-type="widget" data-widget_type="logico_heading.default">
|
||||
<div className="elementor-widget-container">
|
||||
<div className="logico-title">/ Success Stories /</div>
|
||||
<div className="logico-title">/ Women Empowerment /</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
@@ -116,7 +116,7 @@ const styles = `
|
||||
margin: 0 auto 0;
|
||||
}
|
||||
|
||||
/* Cancel the global "section { padding: 6rem 0 }" (custom-frontend.min.css): both
|
||||
/* Cancel the global "section { padding: 6rem 0 }" (consolidated into /public/css/site.css): both
|
||||
this wrapper and the nested .dm-opt are sections, so that 96px top+bottom stacked
|
||||
into large empty bands above / between the workflows. These are full-bleed pinned
|
||||
experiences whose cards butt together via their own insets — no section padding. */
|
||||
|
||||
@@ -118,7 +118,7 @@ const styles = `
|
||||
margin: 0 auto 0;
|
||||
}
|
||||
|
||||
/* Cancel the global "section { padding: 6rem 0 }" (custom-frontend.min.css): both
|
||||
/* Cancel the global "section { padding: 6rem 0 }" (consolidated into /public/css/site.css): both
|
||||
this wrapper and the nested .dm-lb are sections, so that 96px top+bottom stacked
|
||||
into large empty bands above / between the workflows. These are full-bleed pinned
|
||||
experiences whose cards butt together via their own insets — no section padding. */
|
||||
|
||||
@@ -118,7 +118,7 @@ const styles = `
|
||||
margin: 0 auto 0;
|
||||
}
|
||||
|
||||
/* Cancel the global "section { padding: 6rem 0 }" (custom-frontend.min.css): both
|
||||
/* Cancel the global "section { padding: 6rem 0 }" (consolidated into /public/css/site.css): both
|
||||
this wrapper and the nested .dm-st are sections, so that 96px top+bottom stacked
|
||||
into large empty bands above / between the workflows. These are full-bleed pinned
|
||||
experiences whose cards butt together via their own insets — no section padding. */
|
||||
|
||||
Reference in New Issue
Block a user