Doormile/doormile-site
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

ui changes

Browse Source
This commit is contained in:
Suriya
2026-05-11 19:37:21 +05:30
parent 70a350c0e8
commit 127eb20344
4 changed files with 260 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
assets/css/vendor/vendor-responsive-laptops.css vendored
View File

@@ -28,14 +28,14 @@
} */
/* Keep the .e-con-inner container widths at desktop-equivalent max widths */
.e-con-boxed > .e-con-inner {
.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 {
.elementor-element.section-shrink-custom[data-id="30fd9d1"]>.e-con-inner {
display: flex !important;
flex-direction: row !important;
max-width: 1480px !important;
@@ -78,4 +78,4 @@
flex: 0 0 52% !important;
padding-left: 50px !important;
}
}
}

166
how-it-works-redesigned.php
View File

@@ -14,6 +14,172 @@ $depth = '';
<?php include 'includes/sections/hero/howits-hero-section.php'; ?>
<style>
/* Global page fix to prevent horizontal scroll */
html, body {
overflow-x: hidden !important;
width: 100% !important;
position: relative !important;
}
:root {
--dm-red: #c01227;
--dm-dark: #0a0a0a;
--dm-gray: #1a1a1a;
--dm-text-gray: #999;
}
.dm-steps {
background-color: var(--dm-dark);
padding: 100px 0 !important;
overflow-x: hidden !important; /* Prevent any grid overflow */
}
.dm-container {
max-width: 1440px !important;
margin: 0 auto !important;
padding: 0 40px !important;
width: 100% !important;
box-sizing: border-box !important;
}
.dm-steps__header {
text-align: center;
margin-bottom: 60px;
}
.dm-steps__header h2 {
color: #fff;
font-size: 48px;
font-weight: 700;
margin-top: 10px;
}
.dm-steps__grid {
display: grid !important;
grid-template-columns: repeat(3, 1fr) !important;
gap: 30px !important;
overflow: hidden !important; /* Force no horizontal overflow */
width: 100% !important;
cursor: default !important; /* Kill grab cursor */
touch-action: auto !important;
-webkit-user-drag: none !important;
}
.dm-steps__grid * {
cursor: auto !important;
}
.dm-step-card {
background: #141414 !important;
border: 1px solid rgba(255, 255, 255, 0.05) !important;
border-radius: 20px !important;
overflow: hidden !important;
transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1) !important;
position: relative;
display: flex;
flex-direction: column;
height: 100%;
}
.dm-step-card:hover {
transform: translateY(-10px) !important;
border-color: var(--dm-red) !important;
box-shadow: 0 20px 40px rgba(192, 18, 39, 0.15) !important;
}
.dm-step-card__image {
width: 100%;
height: 240px;
overflow: hidden;
position: relative;
}
.dm-step-card__image img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.6s ease;
}
.dm-step-card:hover .dm-step-card__image img {
transform: scale(1.1);
}
.dm-step-card__body {
padding: 40px !important;
flex-grow: 1;
display: flex;
flex-direction: column;
}
.dm-step-card__num {
color: var(--dm-red);
font-family: 'Space Grotesk', sans-serif;
font-weight: 600;
font-size: 14px;
text-transform: uppercase;
letter-spacing: 2px;
margin-bottom: 12px;
}
.dm-step-card__title {
color: #fff;
font-size: 28px;
font-weight: 700;
margin-bottom: 20px;
line-height: 1.2;
}
.dm-step-card__text {
color: var(--dm-text-gray);
font-size: 16px;
line-height: 1.6;
margin-bottom: 25px;
}
.dm-step-card__list {
list-style: none !important;
padding: 0 !important;
margin: 0 !important;
margin-top: auto !important;
}
.dm-step-card__list li {
color: #fff;
font-size: 15px;
margin-bottom: 12px;
padding-left: 25px;
position: relative;
}
.dm-step-card__list li::before {
content: "→";
position: absolute;
left: 0;
color: var(--dm-red);
font-weight: bold;
}
@media (max-width: 1100px) {
.dm-steps__grid {
grid-template-columns: repeat(2, 1fr) !important;
}
}
@media (max-width: 768px) {
.dm-steps__grid {
grid-template-columns: 1fr !important;
}
.dm-steps__header h2 {
font-size: 32px;
}
.dm-step-card__body {
padding: 30px !important;
}
}
</style>
<!-- Three-mile journey -->
<section class="dm-steps dm-section" aria-label="The three-mile journey">
<div class="dm-container">

64
how-it-works.php
View File

@@ -30,11 +30,67 @@ include 'includes/layout/head.php'; ?>
justify-content: center !important;
}
@media (min-width: 1025px) and (max-width: 1440px) {
body.elementor-page-59 {
overflow-x: hidden;
}
/* Force static grid and no-scroll globally for the three-mile section */
body.elementor-page-59 {
overflow-x: hidden !important;
width: 100% !important;
}
/* Target the ACTUAL cards section (338e860) */
.elementor-element.elementor-element-338e860 .owl-carousel {
display: grid !important;
grid-template-columns: repeat(3, 1fr) !important;
gap: 30px !important;
width: 100% !important;
overflow: visible !important;
}
.elementor-element.elementor-element-338e860 .owl-stage-outer,
.elementor-element.elementor-element-338e860 .owl-stage {
display: contents !important;
}
.elementor-element.elementor-element-338e860 .owl-item {
width: 100% !important;
cursor: default !important;
}
.elementor-element.elementor-element-338e860 .owl-item.cloned {
display: none !important;
}
.elementor-element.elementor-element-338e860 .owl-nav,
.elementor-element.elementor-element-338e860 .owl-dots {
display: none !important;
}
/* Target the icon boxes section (4add972) */
.elementor-element.elementor-element-4add972 {
display: grid !important;
grid-template-columns: repeat(3, 1fr) !important;
gap: 30px !important;
overflow: hidden !important;
width: 100% !important;
max-width: 1200px !important;
margin-left: auto !important;
margin-right: auto !important;
}
@media (max-width: 1100px) {
.elementor-element.elementor-element-338e860 .owl-carousel,
.elementor-element.elementor-element-4add972 {
grid-template-columns: repeat(2, 1fr) !important;
}
}
@media (max-width: 768px) {
.elementor-element.elementor-element-338e860 .owl-carousel,
.elementor-element.elementor-element-4add972 {
grid-template-columns: repeat(1, 1fr) !important;
}
}
@media (min-width: 1025px) and (max-width: 1520px) {
.elementor-element.elementor-element-741f56c {
--padding-top: 18px !important;
--padding-bottom: 18px !important;

32
includes/sections/logistics/connected-logistics-section.php
View File

@@ -1,4 +1,34 @@
<div class="elementor-element elementor-element-89a0ca1 e-con-full e-flex cut-corner-no sticky-container-off e-con e-parent" data-id="89a0ca1" data-element_type="container" data-e-type="container">
<style>
/* Custom adjustments for the logistics hero section */
.elementor-element-89a0ca1 {
min-height: auto !important;
padding-top: 100px !important;
padding-bottom: 100px !important;
overflow-x: hidden !important; /* Prevent horizontal scroll from decorative elements */
position: relative !important;
}
.elementor-element-96343ba {
padding-left: 3% !important; /* Move image to the right */
display: flex;
align-items: center;
justify-content: center;
}
.elementor-element-99768ba img {
max-height: 750px !important; /* Reduce image height */
width: auto !important;
object-fit: contain;
}
@media (max-width: 1024px) {
.elementor-element-96343ba {
padding-left: 0 !important;
padding-top: 0 !important;
}
.elementor-element-99768ba img {
max-height: 400px !important;
}
}
</style>
<div class="elementor-element elementor-element-89a0ca1 e-con-full e-flex cut-corner-no sticky-container-off e-con e-parent" data-id="89a0ca1" data-element_type="container" data-e-type="container">
<div class="elementor-element elementor-element-9ffed33 e-con-full e-flex cut-corner-no sticky-container-off e-con e-child" data-id="9ffed33" data-element_type="container" data-e-type="container" data-settings="{&quot;background_background&quot;:&quot;classic&quot;}">
<div class="elementor-element elementor-element-96343ba e-con-full e-flex cut-corner-no sticky-container-off e-con e-child" data-id="96343ba" data-element_type="container" data-e-type="container">
<div class="elementor-element elementor-element-99768ba elementor-widget elementor-widget-image"