18042026 index query

This commit is contained in:
2026-04-18 17:20:24 +05:30
parent 786bd38286
commit 098c3387c8
39 changed files with 5567 additions and 1509 deletions

View File

@@ -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>