Doormile/doormile_react
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix mobile screen issue

Browse Source
This commit is contained in:
Aravind R
2026-06-06 13:55:33 +05:30
parent 91841ba3f4
commit ab67fec091
20 changed files with 707 additions and 83 deletions
Download Patch File Download Diff File Expand all files Collapse all files

32
src/components/sections/ContactsHero.tsx
View File

@@ -7,7 +7,7 @@ export default function ContactsHero() {
<style dangerouslySetInnerHTML={{ __html: `
.contacts-hero-custom {
background-color: #0b0b0b !important;
background-image: url('/images/home2-slide-1.jpg') !important;
background-image: url('/images/home2-banner-3.jpg') !important;
background-size: cover !important;
background-position: center !important;
}
@@ -27,7 +27,9 @@ export default function ContactsHero() {
.contacts-hero-bg-overlay {
position: absolute !important;
inset: 0 !important;
background-image: linear-gradient(180deg, rgba(0, 0, 0, 0.55) 0%, rgba(0, 0, 0, 0.8) 50%, rgba(0, 0, 0, 0.95) 100%) !important;
/* Lighter wash so the red van / sunset stays vivid like the reference,
while keeping the centered heading readable. */
background-image: linear-gradient(180deg, rgba(0, 0, 0, 0.30) 0%, rgba(0, 0, 0, 0.42) 55%, rgba(0, 0, 0, 0.62) 100%) !important;
z-index: 1 !important;
}
@@ -70,27 +72,27 @@ export default function ContactsHero() {
z-index: 2 !important;
}
/* Glassmorphic Center Card */
/* Center content — card frame removed (no background, border, blur or
shadow); the text sits directly on the hero background. */
.contacts-hero-glass-card {
position: relative !important;
z-index: 3 !important;
background: rgba(10, 10, 10, 0.55) !important;
backdrop-filter: blur(24px) saturate(180%) !important;
-webkit-backdrop-filter: blur(24px) saturate(180%) !important;
border: 1px solid rgba(255, 255, 255, 0.08) !important;
border-radius: 30px !important;
padding: 60px 50px !important;
background: transparent !important;
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
border: none !important;
border-radius: 0 !important;
padding: 0 16px !important;
max-width: 820px !important;
width: 90% !important;
box-shadow: 0 40px 80px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
box-shadow: none !important;
text-align: center !important;
transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.6s ease, border-color 0.6s ease !important;
}
.contacts-hero-glass-card:hover {
transform: translateY(-5px) scale(1.005) !important;
box-shadow: 0 45px 90px rgba(192, 18, 39, 0.14), 0 30px 60px rgba(0, 0, 0, 0.6) !important;
border-color: rgba(192, 18, 39, 0.3) !important;
transform: none !important;
box-shadow: none !important;
border-color: transparent !important;
}
/* Spaced kicker */
@@ -196,7 +198,7 @@ export default function ContactsHero() {
@media (max-width: 768px) {
.contacts-hero-glass-card {
padding: 40px 24px !important;
padding: 0 16px !important;
width: 95% !important;
}
}