/* ================================================================
TARGETED FIXES FILE — home_fixes.css
CREATE a new file called home_fixes.css in your static/css/ folder
Then add this ONE line at the bottom of your home.html :
Put it LAST — after all other CSS links so it takes priority.
Do NOT touch home.css, header.css, or qr_home.css.
================================================================ */
/* ════════════════════════════════════════════════════════════
FIX 1 — FULL WIDTH SECTIONS (removes the "box" appearance)
Cause: body has padding-top from header.css, and the dark
sections have a max-width container limiting them.
This forces every section to bleed edge-to-edge.
════════════════════════════════════════════════════════════ */
/* Make ALL major sections truly full width */
.qrpromo-section,
.pkg-wrapper,
.services-section,
.mecf-wrapper {
width: 100vw !important;
margin-left: calc(-50vw + 50%) !important;
position: relative;
}
/* Remove any inherited max-width on the section itself */
.qrpromo-section {
max-width: none !important;
}
/* ════════════════════════════════════════════════════════════
FIX 2 — HEADER DARK THEME COMPATIBILITY
Makes header text, dropdowns, and mobile menu work
cleanly against the dark page without touching header.css
════════════════════════════════════════════════════════════ */
/* Make header slightly more transparent/dark-compatible */
body:not(.blog-page) .sticky-header {
background: rgba(13, 13, 20, 0.96) !important;
border-bottom: 1px solid rgba(255,255,255,0.08) !important;
box-shadow: 0 1px 24px rgba(0,0,0,0.35) !important;
}
/* Force blog page nav to dark */
body.blog-page .main-nav a {
color: #1a1a1a !important;
}
body.blog-page .main-nav a:hover {
color: #667eea !important;
}
body.blog-page .sticky-header {
background: rgba(255,255,255,0.97) !important;
box-shadow: 0 1px 12px rgba(0,0,0,0.08) !important;
border-bottom: 1px solid #f0f0f0 !important;
}
body.blog-page .blog-nav-toggle {
color: #1a1a1a !important;
}
body.blog-page .mobile-menu-btn {
color: #1a1a1a !important;
}
body:not(.blog-page) .main-nav a:hover,
body:not(.blog-page) .main-nav a.active {
color: #ffffff !important;
}
.main-nav a::after {
background: linear-gradient(90deg, #5b3df5, #00d4ff) !important;
}
/* Login / Signup buttons */
body:not(.blog-page) .login-btn {
border-color: rgba(255,255,255,0.35) !important;
color: rgba(255,255,255,0.85) !important;
}
.login-btn:hover {
background: rgba(255,255,255,0.10) !important;
color: #fff !important;
border-color: rgba(255,255,255,0.60) !important;
}
body:not(.blog-page) .signup-btn {
background: linear-gradient(135deg, #5b3df5, #3b1fc9) !important;
border-color: transparent !important;
color: #fff !important;
}
.signup-btn:hover {
background: linear-gradient(135deg, #6d52f7, #4d2fe0) !important;
box-shadow: 0 6px 20px rgba(91,61,245,0.45) !important;
}
/* Profile avatar pill on dark bg */
body:not(.blog-page) .profile-avatar {
background: rgba(255,255,255,0.08) !important;
border-color: rgba(255,255,255,0.14) !important;
}
body:not(.blog-page) .profile-name {
color: rgba(255,255,255,0.88) !important;
}
body:not(.blog-page) .profile-avatar i:first-child {
color: #a78bfa !important;
}
body:not(.blog-page) .dropdown-arrow {
color: rgba(255,255,255,0.45) !important;
}
/*
.profile-toggle:hover .profile-avatar {
background: rgba(91,61,245,0.20) !important;
border-color: rgba(91,61,245,0.50) !important;
}
.profile-name {
color: rgba(255,255,255,0.88) !important;
}
.profile-avatar i:first-child {
color: #a78bfa !important;
}
.dropdown-arrow {
color: rgba(255,255,255,0.45) !important;
}*/
/* Dark pages — dark dropdown */
body:not(.blog-page) .dropdown-menu {
background: #12121e !important;
border-color: rgba(102,126,234,0.3) !important;
box-shadow: 0 16px 40px rgba(0,0,0,0.5) !important;
}
body:not(.blog-page) .dropdown-user-info {
background: linear-gradient(135deg, #1e2a3a 0%, #1a2236 100%) !important;
border-bottom: 1px solid rgba(102,126,234,0.2) !important;
}
body:not(.blog-page) .dropdown-item {
color: rgba(255,255,255,0.78) !important;
border-left: 3px solid transparent !important;
}
body:not(.blog-page) .dropdown-item:hover {
background: rgba(102,126,234,0.18) !important;
color: #fff !important;
border-left-color: #667eea !important;
padding-left: 23px !important;
}
body:not(.blog-page) .dropdown-item i {
color: rgba(255,255,255,0.45) !important;
}
body:not(.blog-page) .dropdown-item:hover i {
color: #667eea !important;
}
body:not(.blog-page) .dropdown-divider {
background: rgba(255,255,255,0.07) !important;
}
body:not(.blog-page) .logout-btn {
color: rgba(255,255,255,0.78) !important;
}
body:not(.blog-page) .logout-btn:hover {
background: rgba(239,68,68,0.15) !important;
color: #ff6060 !important;
border-left-color: #ff6060 !important;
}
body:not(.blog-page) .logout-btn:hover i {
color: #ff6060 !important;
}
/* Blog pages — keep white dropdown */
.blog-page .dropdown-menu {
background: #ffffff !important;
border-color: #eaeaea !important;
}
/* Mobile menu button */
.mobile-menu-btn {
color: rgba(255,255,255,0.85) !important;
}
.mobile-menu-btn:hover {
background: rgba(255,255,255,0.08) !important;
}
/* ════════════════════════════════════════════════════════════
FIX 3 — SERVICES RESPONSIVE ORDER
On mobile, EVERY service item must follow:
Image FIRST (top), Text SECOND (bottom)
No exceptions — no alternating.
════════════════════════════════════════════════════════════ */
@media (max-width: 900px) {
/* Force ALL service items — including .reverse — to stack
image on top, content below */
.service-item,
.service-item.reverse {
display: flex !important;
flex-direction: column !important;
direction: ltr !important;
gap: 20px !important;
}
/* Image always comes first visually */
.service-item .service-image,
.service-item.reverse .service-image {
order: 1 !important;
width: 100% !important;
height: 230px !important;
}
/* Content always comes second visually */
.service-item .service-content,
.service-item.reverse .service-content {
order: 2 !important;
direction: ltr !important;
text-align: left !important;
}
.service-content p {
text-align: left !important;
}
}
@media (max-width: 480px) {
.service-item .service-image,
.service-item.reverse .service-image {
height: 200px !important;
}
}
/* ════════════════════════════════════════════════════════════
FIX 4 — CONTACT FORM DROPDOWN TEXT COLOR
The country select was showing invisible text on dark bg
════════════════════════════════════════════════════════════ */
.mecf-country-select,
#mecf-country {
color: rgba(255,255,255,0.85) !important;
background: rgba(255,255,255,0.06) !important;
}
/* Browser can't fully style