18042026 index query
This commit is contained in:
@@ -313,291 +313,111 @@
|
||||
}
|
||||
|
||||
|
||||
/* ─── LARGE DESKTOP (1440px+) ─── */
|
||||
/* ─── ULTRA-WIDE SCREENS (1440px to 2560px+) ─── */
|
||||
/* Merged and optimized for cleaner structure */
|
||||
@media (min-width: 1440px) {
|
||||
|
||||
.dm-compare-section {
|
||||
max-width: 1440px;
|
||||
padding: 72px 52px;
|
||||
background: #1f1f1f;
|
||||
border-radius: 20px;
|
||||
/* margin: 0px 50px; */
|
||||
|
||||
}
|
||||
|
||||
.dm-compare-section::before {
|
||||
background-size: 80px 80px;
|
||||
padding: 0px 20px;
|
||||
}
|
||||
|
||||
.dm-compare-section .dm-section-header {
|
||||
margin-bottom: 64px;
|
||||
}
|
||||
|
||||
.dm-compare-section .dm-eyebrow {
|
||||
font-size: 12px;
|
||||
letter-spacing: 3.8px;
|
||||
gap: 12px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.dm-compare-section .dm-eyebrow::before,
|
||||
.dm-compare-section .dm-eyebrow::after {
|
||||
width: 32px;
|
||||
}
|
||||
|
||||
.dm-compare-section .dm-section-title {
|
||||
font-size: clamp(40px, 5vw, 68px);
|
||||
letter-spacing: -1.1px;
|
||||
}
|
||||
|
||||
.dm-compare-section .dm-section-sub {
|
||||
font-size: 16px;
|
||||
margin-top: 20px;
|
||||
line-height: 1.72;
|
||||
}
|
||||
|
||||
.dm-compare-section .dm-compare-wrap {
|
||||
border-radius: 24px;
|
||||
}
|
||||
|
||||
.dm-compare-section .dm-col-head {
|
||||
padding: 30px 44px;
|
||||
font-size: 13.5px;
|
||||
letter-spacing: 2.8px;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.dm-compare-section .dm-col-head-icon {
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
border-radius: 9px;
|
||||
}
|
||||
|
||||
.dm-compare-section .dm-col-head-icon svg {
|
||||
width: 15px;
|
||||
height: 15px;
|
||||
}
|
||||
|
||||
.dm-compare-section .dm-cell {
|
||||
padding: 30px 44px;
|
||||
gap: 18px;
|
||||
font-size: 15.5px;
|
||||
}
|
||||
|
||||
.dm-compare-section .dm-cell-icon {
|
||||
width: 34px;
|
||||
height: 34px;
|
||||
}
|
||||
|
||||
.dm-compare-section .dm-cell-icon svg {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
}
|
||||
|
||||
.dm-compare-section .dm-footer-cell {
|
||||
padding: 24px 44px;
|
||||
font-size: 12.5px;
|
||||
letter-spacing: 1.8px;
|
||||
max-width: 1400px; /* Increased for wider screens */
|
||||
padding: 80px 40px;
|
||||
}
|
||||
.dm-compare-section .dm-section-title { font-size: clamp(40px, 4vw, 72px); }
|
||||
.dm-compare-section .dm-col-head { padding: 32px 48px; font-size: 14px; }
|
||||
.dm-compare-section .dm-cell { padding: 32px 48px; font-size: 16px; }
|
||||
}
|
||||
|
||||
/* ─── EXTRA-LARGE DESKTOP (1920px+) ─── */
|
||||
@media (min-width: 1920px) {
|
||||
|
||||
.dm-compare-section {
|
||||
max-width: 1920px;
|
||||
padding: 72px 52px;
|
||||
background: #1f1f1f;
|
||||
border-radius: 20px;
|
||||
}
|
||||
|
||||
.dm-compare-section::before {
|
||||
background-size: 90px 90px;
|
||||
}
|
||||
|
||||
.dm-compare-section .dm-section-header {
|
||||
margin-bottom: 72px;
|
||||
}
|
||||
|
||||
.dm-compare-section .dm-eyebrow {
|
||||
font-size: 13px;
|
||||
letter-spacing: 4px;
|
||||
gap: 13px;
|
||||
margin-bottom: 22px;
|
||||
}
|
||||
|
||||
.dm-compare-section .dm-eyebrow::before,
|
||||
.dm-compare-section .dm-eyebrow::after {
|
||||
width: 36px;
|
||||
}
|
||||
|
||||
.dm-compare-section .dm-section-title {
|
||||
font-size: clamp(46px, 5vw, 76px);
|
||||
letter-spacing: -1.3px;
|
||||
}
|
||||
|
||||
.dm-compare-section .dm-section-sub {
|
||||
font-size: 17px;
|
||||
margin-top: 22px;
|
||||
line-height: 1.75;
|
||||
}
|
||||
|
||||
.dm-compare-section .dm-compare-wrap {
|
||||
border-radius: 26px;
|
||||
box-shadow: 0 10px 60px rgba(0,0,0,0.1);
|
||||
}
|
||||
|
||||
.dm-compare-section .dm-col-head {
|
||||
padding: 32px 52px;
|
||||
font-size: 14px;
|
||||
letter-spacing: 3px;
|
||||
gap: 13px;
|
||||
}
|
||||
|
||||
.dm-compare-section .dm-col-head-icon {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
.dm-compare-section .dm-col-head-icon svg {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
}
|
||||
|
||||
.dm-compare-section .dm-cell {
|
||||
padding: 34px 52px;
|
||||
gap: 20px;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.dm-compare-section .dm-cell-icon {
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
}
|
||||
|
||||
.dm-compare-section .dm-cell-icon svg {
|
||||
width: 17px;
|
||||
height: 17px;
|
||||
}
|
||||
|
||||
.dm-compare-section .dm-footer-cell {
|
||||
padding: 26px 52px;
|
||||
font-size: 13px;
|
||||
letter-spacing: 2px;
|
||||
}
|
||||
}
|
||||
|
||||
/* ─── ULTRA-WIDE (2560px+) ─── */
|
||||
@media (min-width: 2560px) {
|
||||
|
||||
.dm-compare-section {
|
||||
max-width: 2560px;
|
||||
padding: 80px 72px 50px;
|
||||
background: #1f1f1f;
|
||||
}
|
||||
|
||||
.dm-compare-section::before {
|
||||
background-size: 100px 100px;
|
||||
}
|
||||
|
||||
.dm-compare-section .dm-section-header {
|
||||
margin-bottom: 84px;
|
||||
}
|
||||
|
||||
.dm-compare-section .dm-eyebrow {
|
||||
font-size: 14px;
|
||||
letter-spacing: 4.5px;
|
||||
gap: 14px;
|
||||
margin-bottom: 26px;
|
||||
}
|
||||
|
||||
.dm-compare-section .dm-eyebrow::before,
|
||||
.dm-compare-section .dm-eyebrow::after {
|
||||
width: 42px;
|
||||
}
|
||||
|
||||
.dm-compare-section .dm-section-title {
|
||||
font-size: clamp(52px, 5vw, 84px);
|
||||
letter-spacing: -1.5px;
|
||||
}
|
||||
|
||||
.dm-compare-section .dm-section-sub {
|
||||
font-size: 18.5px;
|
||||
margin-top: 26px;
|
||||
line-height: 1.8;
|
||||
}
|
||||
|
||||
.dm-compare-section .dm-compare-wrap {
|
||||
border-radius: 28px;
|
||||
box-shadow: 0 12px 70px rgba(0,0,0,0.1);
|
||||
}
|
||||
|
||||
.dm-compare-section .dm-col-head {
|
||||
padding: 36px 60px;
|
||||
font-size: 15px;
|
||||
letter-spacing: 3.5px;
|
||||
gap: 14px;
|
||||
}
|
||||
|
||||
.dm-compare-section .dm-col-head-icon {
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
border-radius: 11px;
|
||||
}
|
||||
|
||||
.dm-compare-section .dm-col-head-icon svg {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
}
|
||||
|
||||
.dm-compare-section .dm-cell {
|
||||
padding: 38px 60px;
|
||||
gap: 22px;
|
||||
font-size: 17px;
|
||||
line-height: 1.55;
|
||||
}
|
||||
|
||||
.dm-compare-section .dm-cell-icon {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
}
|
||||
|
||||
.dm-compare-section .dm-cell-icon svg {
|
||||
width: 19px;
|
||||
height: 19px;
|
||||
}
|
||||
|
||||
.dm-compare-section .dm-footer-cell {
|
||||
padding: 28px 60px;
|
||||
font-size: 14px;
|
||||
letter-spacing: 2.2px;
|
||||
}
|
||||
|
||||
.dm-compare-section .dm-footer-cell .dm-dot {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/* ─── TABLET (768px to 1200px) ─── */
|
||||
@media (max-width: 1200px) {
|
||||
.dm-compare-section { padding: 60px 16px 70px;background: #1f1f1f; }
|
||||
.dm-compare-section {
|
||||
padding: 60px 24px;
|
||||
/* background: #1f1f1f; Remove if already set globally or in parent */
|
||||
}
|
||||
|
||||
.dm-compare-section .dm-section-title { font-size: clamp(32px, 6vw, 48px); }
|
||||
|
||||
.dm-compare-section .dm-col-head,
|
||||
.dm-compare-section .dm-cell { padding: 20px 20px; }
|
||||
.dm-compare-section .dm-footer-cell { padding: 18px 20px; }
|
||||
.dm-compare-section .dm-col-head { font-size: 11px; letter-spacing: 1.5px; }
|
||||
.dm-compare-section .dm-cell {
|
||||
padding: 24px 30px;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.dm-compare-section .dm-footer-cell { padding: 16px 30px; }
|
||||
}
|
||||
|
||||
/* ── RESPONSIVE (MOBILE) ── */
|
||||
@media (max-width: 680px) {
|
||||
.dm-compare-section { padding: 60px 16px 70px;background: #1f1f1f; border-radius: 20px; }
|
||||
.dm-compare-section .dm-col-head,
|
||||
.dm-compare-section .dm-cell { padding: 20px 20px; }
|
||||
.dm-compare-section .dm-footer-cell { padding: 18px 20px; }
|
||||
.dm-compare-section .dm-col-head { font-size: 11px; letter-spacing: 1.5px; }
|
||||
/* ─── MOBILE (Below 768px) ─── */
|
||||
@media (max-width: 767px) {
|
||||
.dm-compare-section {
|
||||
padding: 40px 16px;
|
||||
border-radius: 0; /* Full width mobile feel */
|
||||
}
|
||||
|
||||
.dm-compare-section .dm-section-header { margin-bottom: 32px; }
|
||||
.dm-compare-section .dm-section-sub { font-size: 14px; padding: 0 10px; }
|
||||
|
||||
/* Stack the layout */
|
||||
.dm-compare-section .dm-col-headers,
|
||||
.dm-compare-section .dm-compare-row,
|
||||
.dm-compare-section .dm-compare-footer {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
/* Remove vertical divider */
|
||||
.dm-compare-section .dm-col-headers::after { display: none; }
|
||||
|
||||
.dm-compare-section .dm-col-head {
|
||||
justify-content: center;
|
||||
text-align: center;
|
||||
padding: 20px;
|
||||
border-bottom: 1px solid var(--dm-border);
|
||||
}
|
||||
|
||||
.dm-compare-section .dm-col-head.dm-doormile {
|
||||
border-top: 1px solid var(--dm-red-border);
|
||||
}
|
||||
|
||||
.dm-compare-section .dm-cell {
|
||||
padding: 18px 20px;
|
||||
border-left: none !important;
|
||||
border-right: none !important;
|
||||
}
|
||||
|
||||
/* Distinguish columns in stacked mode */
|
||||
.dm-compare-section .dm-cell.dm-left {
|
||||
background: #fafafa;
|
||||
border-bottom: 1px dashed var(--dm-border);
|
||||
}
|
||||
|
||||
.dm-compare-section .dm-cell.dm-right {
|
||||
background: var(--dm-red-light);
|
||||
border-bottom: 1px solid var(--dm-border);
|
||||
}
|
||||
|
||||
.dm-compare-section .dm-compare-row:last-child .dm-cell.dm-right {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
/* Footer adjustments */
|
||||
.dm-compare-section .dm-footer-cell {
|
||||
text-align: center;
|
||||
justify-content: center;
|
||||
padding: 16px;
|
||||
font-size: 10px;
|
||||
}
|
||||
|
||||
.dm-compare-section .dm-footer-cell.dm-right {
|
||||
border-left: none;
|
||||
border-top: 1px solid var(--dm-red-border);
|
||||
}
|
||||
|
||||
/* Fix Icon/Text scale for mobile */
|
||||
.dm-compare-section .dm-cell-icon {
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
}
|
||||
.dm-compare-section .dm-cell-text {
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
<!-- ── SECTION HTML ── -->
|
||||
@@ -607,7 +427,7 @@
|
||||
|
||||
<div class="dm-section-header">
|
||||
<div class="dm-eyebrow">Why It Matters</div>
|
||||
<h2 class="dm-section-title" style="color:white;">Two Approaches.<br><em>One Clear Winner.</em></h2>
|
||||
<h2 class="dm-section-title" style="color:black;">Two Approaches.<br><em>One Clear Winner.</em></h2>
|
||||
<p class="dm-section-sub">See how the Doormile way eliminates the friction that traditional logistics creates at every step.</p>
|
||||
</div>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user