body { font-family: 'Montserrat', sans-serif; color: #F3F4F6; background-color: #020617; transition: background-color 0.3s ease, color 0.3s ease; } /* Section backgrounds */ #hero { background: radial-gradient(circle at top, #020617 0%, #020617 45%, #020617 100%); } /* Page-specific hero backgrounds */ #hero.blog-hero-bg { position: relative; overflow: hidden; background-image: url("blog-hero.webp"); background-size: cover; background-position: center; background-repeat: no-repeat; } #hero.box-shop-hero-bg { position: relative; overflow: hidden; background-image: url("box-shop-hero.webp"); background-size: cover; background-position: center; background-repeat: no-repeat; } #hero.furniture-courier-hero-bg { position: relative; overflow: hidden; background-image: url("furniture-courier-hero.webp"); background-size: cover; background-position: center; background-repeat: no-repeat; } #hero.house-moves-hero-bg { position: relative; overflow: hidden; background-image: url("hero-house-moves.webp"); background-size: cover; background-position: center; background-repeat: no-repeat; } #hero.local-moves-hero-bg { position: relative; overflow: hidden; background-image: url("hero-local-moves.webp"); background-size: cover; background-position: center; background-repeat: no-repeat; } #hero.long-distance-moves-hero-bg { position: relative; overflow: hidden; background-image: url("hero-longdistance-moves.webp"); background-size: cover; background-position: center; background-repeat: no-repeat; } #hero.office-relocations-hero-bg { position: relative; overflow: hidden; background-image: url("hero-office-move.webp"); background-size: cover; background-position: center; background-repeat: no-repeat; } #hero.small-moves-hero-bg { position: relative; overflow: hidden; background-image: url("hero-small-moves.webp"); background-size: cover; background-position: center; background-repeat: no-repeat; } #hero.shared-loads-hero-bg { position: relative; overflow: hidden; background-image: url("hero-shared-loads.webp"); background-size: cover; background-position: center; background-repeat: no-repeat; } #hero.vehicle-transportation-hero-bg { position: relative; overflow: hidden; background-image: url("hero-vehicle-trans.webp"); background-size: cover; background-position: center; background-repeat: no-repeat; } #hero.movers-bryanston-hero-bg { position: relative; overflow: hidden; background-image: url("hero-house-moves.webp"); background-size: cover; background-position: center; background-repeat: no-repeat; } #hero.moving-to-durban-hero-bg, #hero.moving-to-gauteng-hero-bg, #hero.moving-to-nelspruit-hero-bg { position: relative; overflow: hidden; background-image: url("hero-house-moves.webp"); background-size: cover; background-position: center; background-repeat: no-repeat; } #hero.privacy-policy-hero-bg { position: relative; overflow: hidden; background-image: url("hero-house-moves.webp"); background-size: cover; background-position: center; background-repeat: no-repeat; } /* Shared hero background styles */ #hero.blog-hero-bg::before, #hero.box-shop-hero-bg::before, #hero.furniture-courier-hero-bg::before, #hero.house-moves-hero-bg::before, #hero.local-moves-hero-bg::before, #hero.long-distance-moves-hero-bg::before, #hero.office-relocations-hero-bg::before, #hero.small-moves-hero-bg::before, #hero.shared-loads-hero-bg::before, #hero.vehicle-transportation-hero-bg::before, #hero.movers-bryanston-hero-bg::before, #hero.moving-to-durban-hero-bg::before, #hero.moving-to-gauteng-hero-bg::before, #hero.moving-to-nelspruit-hero-bg::before, #hero.privacy-policy-hero-bg::before { content: ""; position: absolute; inset: 0; background: linear-gradient( 180deg, rgba(2, 6, 23, 0.78) 0%, rgba(2, 6, 23, 0.70) 45%, rgba(2, 6, 23, 0.82) 100% ); pointer-events: none; } #hero.blog-hero-bg > *, #hero.box-shop-hero-bg > *, #hero.furniture-courier-hero-bg > *, #hero.house-moves-hero-bg > *, #hero.local-moves-hero-bg > *, #hero.long-distance-moves-hero-bg > *, #hero.office-relocations-hero-bg > *, #hero.small-moves-hero-bg > *, #hero.shared-loads-hero-bg > *, #hero.vehicle-transportation-hero-bg > *, #hero.movers-bryanston-hero-bg > *, #hero.moving-to-durban-hero-bg > *, #hero.moving-to-gauteng-hero-bg > *, #hero.moving-to-nelspruit-hero-bg > *, #hero.privacy-policy-hero-bg > * { position: relative; z-index: 1; } #hero.blog-hero-bg, #hero.blog-hero-bg h1, #hero.blog-hero-bg h2, #hero.blog-hero-bg h3, #hero.blog-hero-bg h4, #hero.blog-hero-bg h5, #hero.blog-hero-bg h6, #hero.box-shop-hero-bg, #hero.box-shop-hero-bg h1, #hero.box-shop-hero-bg h2, #hero.box-shop-hero-bg h3, #hero.box-shop-hero-bg h4, #hero.box-shop-hero-bg h5, #hero.box-shop-hero-bg h6, #hero.furniture-courier-hero-bg, #hero.furniture-courier-hero-bg h1, #hero.furniture-courier-hero-bg h2, #hero.furniture-courier-hero-bg h3, #hero.furniture-courier-hero-bg h4, #hero.furniture-courier-hero-bg h5, #hero.furniture-courier-hero-bg h6, #hero.house-moves-hero-bg, #hero.house-moves-hero-bg h1, #hero.house-moves-hero-bg h2, #hero.house-moves-hero-bg h3, #hero.house-moves-hero-bg h4, #hero.house-moves-hero-bg h5, #hero.house-moves-hero-bg h6, #hero.local-moves-hero-bg, #hero.local-moves-hero-bg h1, #hero.local-moves-hero-bg h2, #hero.local-moves-hero-bg h3, #hero.local-moves-hero-bg h4, #hero.local-moves-hero-bg h5, #hero.local-moves-hero-bg h6, #hero.long-distance-moves-hero-bg, #hero.long-distance-moves-hero-bg h1, #hero.long-distance-moves-hero-bg h2, #hero.long-distance-moves-hero-bg h3, #hero.long-distance-moves-hero-bg h4, #hero.long-distance-moves-hero-bg h5, #hero.long-distance-moves-hero-bg h6, #hero.office-relocations-hero-bg, #hero.office-relocations-hero-bg h1, #hero.office-relocations-hero-bg h2, #hero.office-relocations-hero-bg h3, #hero.office-relocations-hero-bg h4, #hero.office-relocations-hero-bg h5, #hero.office-relocations-hero-bg h6, #hero.small-moves-hero-bg, #hero.small-moves-hero-bg h1, #hero.small-moves-hero-bg h2, #hero.small-moves-hero-bg h3, #hero.small-moves-hero-bg h4, #hero.small-moves-hero-bg h5, #hero.small-moves-hero-bg h6, #hero.shared-loads-hero-bg, #hero.shared-loads-hero-bg h1, #hero.shared-loads-hero-bg h2, #hero.shared-loads-hero-bg h3, #hero.shared-loads-hero-bg h4, #hero.shared-loads-hero-bg h5, #hero.shared-loads-hero-bg h6, #hero.vehicle-transportation-hero-bg, #hero.vehicle-transportation-hero-bg h1, #hero.vehicle-transportation-hero-bg h2, #hero.vehicle-transportation-hero-bg h3, #hero.vehicle-transportation-hero-bg h4, #hero.vehicle-transportation-hero-bg h5, #hero.vehicle-transportation-hero-bg h6, #hero.movers-bryanston-hero-bg, #hero.movers-bryanston-hero-bg h1, #hero.movers-bryanston-hero-bg h2, #hero.movers-bryanston-hero-bg h3, #hero.movers-bryanston-hero-bg h4, #hero.movers-bryanston-hero-bg h5, #hero.movers-bryanston-hero-bg h6, #hero.moving-to-durban-hero-bg, #hero.moving-to-durban-hero-bg h1, #hero.moving-to-durban-hero-bg h2, #hero.moving-to-durban-hero-bg h3, #hero.moving-to-durban-hero-bg h4, #hero.moving-to-durban-hero-bg h5, #hero.moving-to-durban-hero-bg h6, #hero.moving-to-gauteng-hero-bg, #hero.moving-to-gauteng-hero-bg h1, #hero.moving-to-gauteng-hero-bg h2, #hero.moving-to-gauteng-hero-bg h3, #hero.moving-to-gauteng-hero-bg h4, #hero.moving-to-gauteng-hero-bg h5, #hero.moving-to-gauteng-hero-bg h6, #hero.moving-to-nelspruit-hero-bg, #hero.moving-to-nelspruit-hero-bg h1, #hero.moving-to-nelspruit-hero-bg h2, #hero.moving-to-nelspruit-hero-bg h3, #hero.moving-to-nelspruit-hero-bg h4, #hero.moving-to-nelspruit-hero-bg h5, #hero.moving-to-nelspruit-hero-bg h6, #hero.privacy-policy-hero-bg, #hero.privacy-policy-hero-bg h1, #hero.privacy-policy-hero-bg h2, #hero.privacy-policy-hero-bg h3, #hero.privacy-policy-hero-bg h4, #hero.privacy-policy-hero-bg h5, #hero.privacy-policy-hero-bg h6 { color: #F8FAFC !important; } #hero.blog-hero-bg p, #hero.box-shop-hero-bg p, #hero.furniture-courier-hero-bg p, #hero.house-moves-hero-bg p, #hero.local-moves-hero-bg p, #hero.long-distance-moves-hero-bg p, #hero.office-relocations-hero-bg p, #hero.small-moves-hero-bg p, #hero.shared-loads-hero-bg p, #hero.vehicle-transportation-hero-bg p, #hero.movers-bryanston-hero-bg p, #hero.moving-to-durban-hero-bg p, #hero.moving-to-gauteng-hero-bg p, #hero.moving-to-nelspruit-hero-bg p, #hero.privacy-policy-hero-bg p { color: #E2E8F0 !important; } /* Dark sections */ #locations, #testimonials, #quote, #contact, #local-moves, #whats-included, #tips, #faq, #our-process, #areas-we-serve, #long-distance-overview, #shared-loads, #small-moves, #vehicle-transport, #specialised-moves, #faqs, #regions, #routes, #packing-options, #box-shop, #checklist, #route-overview { background-color: #020617; } /* #about and #services should maintain their light backgrounds */ #about { background-color: #FFFFFF; } #services.bg-slate-50 { background-color: #F8FAFC; } #areas-we-serve { background: radial-gradient(circle at top, #020617 0%, #020617 45%, #020617 100%); } html { scroll-behavior: smooth; } section { scroll-margin-top: 5rem; } /* Layout grid & cards */ .page-container { max-width: 1120px; margin: 0 auto; padding-left: 1.5rem; padding-right: 1.5rem; } .section-shell { padding-top: 4.5rem; padding-bottom: 4.5rem; } .section-shell--alt { background-color: #020617; } .card { background-color: #0B0B10; border-radius: 0.75rem; box-shadow: 0 18px 45px rgba(0, 0, 0, 0.55); padding: 2rem; transition: transform 0.2s ease, box-shadow 0.2s ease; } .card--subtle { box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06); } .card:hover { transform: translateY(-4px); box-shadow: 0 14px 30px rgba(0, 0, 0, 0.12); } /* Global image styling for new visuals */ img { max-width: 100%; } img[loading="lazy"] { transition: opacity 0.3s ease; } .section-heading { font-size: 2.5rem; font-weight: 700; letter-spacing: 0.03em; margin-bottom: 2.75rem; color: #F3F4F6; text-align: center; transition: color 0.3s ease; } /* Section headings in light sections should be dark */ #about .section-heading, #services .section-heading { color: #0F172A; } /* Dark mode – typography */ main h1, main h2, main h3, main h4, main h5, main h6, #areas-we-serve h2, #areas-we-serve h3 { color: #F9FAFB; } /* Headings in light sections should be dark */ #about h1, #about h2, #about h3, #about h4, #about h5, #about h6, #services h1, #services h2, #services h3, #services h4, #services h5, #services h6 { color: #0F172A; } /* Default light text for dark sections only - exclude #about and #services which have light backgrounds */ #hero, #locations, #testimonials, #quote, #contact, #local-moves, #whats-included, #tips, #faq, #our-process, #areas-we-serve, #long-distance-overview, #shared-loads, #small-moves, #vehicle-transport, #specialised-moves, #faqs, #regions, #routes, #packing-options, #box-shop, #checklist, #route-overview { color: #E5E7EB; } #hero p, #locations p, #testimonials p, #quote p, #contact p, #local-moves p, #whats-included p, #tips p, #faq p, #our-process p, #areas-we-serve p, #hero span, #locations span, #testimonials span, #quote span, #contact span, #local-moves span, #whats-included span, #tips span, #faq span, #our-process span, #areas-we-serve span, #long-distance-overview span, #shared-loads span, #small-moves span, #vehicle-transport span, #specialised-moves span, #faqs span, #regions span, #routes span, #packing-options span, #box-shop span, #checklist span, #route-overview span, #hero li, #locations li, #testimonials li, #quote li, #contact li, #local-moves li, #whats-included li, #tips li, #faq li, #our-process li, #areas-we-serve li, #long-distance-overview li, #shared-loads li, #small-moves li, #vehicle-transport li, #specialised-moves li, #faqs li, #regions li, #routes li, #packing-options li, #box-shop li, #checklist li, #route-overview li, #hero small, #locations small, #testimonials small, #quote small, #contact small, #local-moves small, #whats-included small, #tips small, #faq small, #our-process small, #areas-we-serve small, #long-distance-overview small, #shared-loads small, #small-moves small, #vehicle-transport small, #specialised-moves small, #faqs small, #regions small, #routes small, #packing-options small, #box-shop small, #checklist small, #route-overview small, #hero dt, #locations dt, #testimonials dt, #quote dt, #contact dt, #local-moves dt, #whats-included dt, #tips dt, #faq dt, #our-process dt, #areas-we-serve dt, #long-distance-overview dt, #shared-loads dt, #small-moves dt, #vehicle-transport dt, #specialised-moves dt, #faqs dt, #regions dt, #routes dt, #packing-options dt, #box-shop dt, #checklist dt, #route-overview dt, #hero dd, #locations dd, #testimonials dd, #quote dd, #contact dd, #local-moves dd, #whats-included dd, #tips dd, #faq dd, #our-process dd, #areas-we-serve dd, #long-distance-overview dd, #shared-loads dd, #small-moves dd, #vehicle-transport dd, #specialised-moves dd, #faqs dd, #regions dd, #routes dd, #packing-options dd, #box-shop dd, #checklist dd, #route-overview dd, #hero label, #locations label, #testimonials label, #quote label, #contact label, #local-moves label, #whats-included label, #tips label, #faq label, #our-process label, #areas-we-serve label, #long-distance-overview label, #shared-loads label, #small-moves label, #vehicle-transport label, #specialised-moves label, #faqs label, #regions label, #routes label, #packing-options label, #box-shop label, #checklist label, #route-overview label { color: #E5E7EB; } /* #about light-text areas should have dark text on the light background */ #about .light-text, #about .light-text div, #about .light-text p, #about .light-text span, #about .light-text li, #about .light-text small, #about .light-text dt, #about .light-text dd, #about .light-text label, #about .light-text h1, #about .light-text h2, #about .light-text h3, #about .light-text h4, #about .light-text h5, #about .light-text h6, #about .light-text a, #about .light-text strong { color: #0F172A; } #about .light-text .text-slate-400 { color: #94A3B8; } #about .light-text .text-slate-500 { color: #64748B; } #about .light-text .text-slate-600 { color: #475569; } #about .light-text .text-slate-700 { color: #334155; } #about .light-text .text-slate-800 { color: #1E293B; } #about .light-text .text-slate-900 { color: #0F172A; } /* #services section direct children should have dark text, but cards will override */ #services { color: #0F172A; } main .text-slate-500, main .text-slate-600, main .text-slate-700, main .text-slate-800 { color: #CBD5E1; } main [class*="text-[#111827]"], main [class*="text-[#000000]"] { color: #E5E7EB; } /* Override Tailwind text utilities on light backgrounds - scoped to light sections only */ #about .bg-white .text-slate-800, #about .bg-white .text-slate-900, #about .bg-slate-50 .text-slate-800, #about .bg-slate-50 .text-slate-900, #about .bg-white\/70 .text-slate-800, #about .bg-white\/70 .text-slate-900, #about .bg-white\/80 .text-slate-800, #about .bg-white\/80 .text-slate-900, #about .bg-slate-50\/80 .text-slate-800, #about .bg-slate-50\/80 .text-slate-900, #services .bg-white .text-slate-800, #services .bg-white .text-slate-900, #services .bg-slate-50 .text-slate-800, #services .bg-slate-50 .text-slate-900, #services .bg-white\/80 .text-slate-800, #services .bg-white\/80 .text-slate-900, #services .bg-slate-50\/80 .text-slate-800, #services .bg-slate-50\/80 .text-slate-900, #hero .bg-white .text-slate-800, #hero .bg-white .text-slate-900, #hero .bg-white\/70 .text-slate-800, #hero .bg-white\/70 .text-slate-900, #hero .bg-white\/80 .text-slate-800, #hero .bg-white\/80 .text-slate-900 { color: #0F172A; } /* Ensure dark text utilities work correctly on light backgrounds in light sections */ #about .bg-white [class*="text-[#111827]"], #about .bg-white [class*="text-[#000000]"], #about .bg-slate-50 [class*="text-[#111827]"], #about .bg-slate-50 [class*="text-[#000000]"], #about .bg-white\/70 [class*="text-[#111827]"], #about .bg-white\/70 [class*="text-[#000000]"], #about .bg-white\/80 [class*="text-[#111827]"], #about .bg-white\/80 [class*="text-[#000000]"], #services .bg-white [class*="text-[#111827]"], #services .bg-white [class*="text-[#000000]"], #services .bg-slate-50 [class*="text-[#111827]"], #services .bg-slate-50 [class*="text-[#000000]"], #services .bg-white\/80 [class*="text-[#111827]"], #services .bg-white\/80 [class*="text-[#000000]"], #hero .bg-white\/70 [class*="text-[#111827]"], #hero .bg-white\/70 [class*="text-[#000000]"], #hero .bg-white\/80 [class*="text-[#111827]"], #hero .bg-white\/80 [class*="text-[#000000]"] { color: #111827; } /* Medium gray text utilities should be readable on light backgrounds in light sections */ #about .bg-white .text-slate-500, #about .bg-white .text-slate-600, #about .bg-white .text-slate-700, #about .bg-slate-50 .text-slate-500, #about .bg-slate-50 .text-slate-600, #about .bg-slate-50 .text-slate-700, #about .bg-white\/70 .text-slate-500, #about .bg-white\/70 .text-slate-600, #about .bg-white\/70 .text-slate-700, #about .bg-white\/80 .text-slate-500, #about .bg-white\/80 .text-slate-600, #about .bg-white\/80 .text-slate-700, #about .bg-slate-50\/80 .text-slate-500, #about .bg-slate-50\/80 .text-slate-600, #about .bg-slate-50\/80 .text-slate-700, #services .bg-white .text-slate-500, #services .bg-white .text-slate-600, #services .bg-white .text-slate-700, #services .bg-slate-50 .text-slate-500, #services .bg-slate-50 .text-slate-600, #services .bg-slate-50 .text-slate-700, #services .bg-white\/80 .text-slate-500, #services .bg-white\/80 .text-slate-600, #services .bg-white\/80 .text-slate-700, #services .bg-slate-50\/80 .text-slate-500, #services .bg-slate-50\/80 .text-slate-600, #services .bg-slate-50\/80 .text-slate-700, #hero .bg-white\/70 .text-slate-500, #hero .bg-white\/70 .text-slate-600, #hero .bg-white\/70 .text-slate-700, #hero .bg-white\/80 .text-slate-500, #hero .bg-white\/80 .text-slate-600, #hero .bg-white\/80 .text-slate-700 { color: #475569; } main a { color: #F97373; } main a:hover { color: #FF9AA2; } .cta-button { background: linear-gradient(135deg, #DC143C, #DC143C); color: #FFFFFF; box-shadow: 0 18px 18px rgba(220, 20, 60, 0.271); transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out, filter 0.2s ease-in-out; } .cta-button:hover { transform: translateY(-2px) scale(1.02); box-shadow: 0 24px 60px rgba(220, 20, 60, 0.6); filter: brightness(1.05); } .service-card { transition: transform 0.2s ease-in-out; } .service-card:hover { transform: translateY(-5px); box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1); } /* Dark mode – keep dark text on intentional light surfaces */ /* Only apply to sections that actually have light backgrounds: #about and #services */ #about .bg-white, #about .bg-white\/60, #about .bg-white\/70, #about .bg-white\/80, #about .bg-white\/90, #about .bg-\[\#FFFFFF\], #about .bg-slate-50, #about .bg-slate-50\/80, #about .bg-slate-100, #services .bg-white, #services .bg-white\/60, #services .bg-white\/70, #services .bg-white\/80, #services .bg-white\/90, #services .bg-\[\#FFFFFF\], #services .bg-slate-50, #services .bg-slate-50\/80, #services .bg-slate-100, #hero .bg-white, #hero .bg-white\/60, #hero .bg-white\/70, #hero .bg-white\/80, #hero .bg-slate-50, #hero .bg-slate-50\/80, #hero .bg-slate-100 { color: #0F172A; } #about .bg-white p, #about .bg-white span, #about .bg-white li, #about .bg-white h1, #about .bg-white h2, #about .bg-white h3, #about .bg-white h4, #about .bg-white h5, #about .bg-white h6, #about .bg-white small, #about .bg-white div, #about .bg-white\/70 span, #about .bg-white\/80 span, #about .bg-slate-50 p, #about .bg-slate-50 span, #about .bg-slate-50 h1, #about .bg-slate-50 h2, #about .bg-slate-50 h3, #about .bg-slate-50 h4, #about .bg-slate-50 h5, #about .bg-slate-50 h6, #about .bg-slate-50 div, #about .bg-slate-50\/80 p, #about .bg-slate-50\/80 span, #services .bg-white p, #services .bg-white span, #services .bg-white li, #services .bg-white h1, #services .bg-white h2, #services .bg-white h3, #services .bg-white h4, #services .bg-white h5, #services .bg-white h6, #services .bg-white small, #services .bg-white div, #services .bg-white\/80 span, #services .bg-slate-50 p, #services .bg-slate-50 span, #services .bg-slate-50 h1, #services .bg-slate-50 h2, #services .bg-slate-50 h3, #services .bg-slate-50 h4, #services .bg-slate-50 h5, #services .bg-slate-50 h6, #services .bg-slate-50 div, #services .bg-slate-50\/80 p, #services .bg-slate-50\/80 span, #hero .bg-white p, #hero .bg-white span, #hero .bg-white\/70 span, #hero .bg-white\/80 span, #hero .bg-slate-50 p, #hero .bg-slate-50 span { color: #0F172A; } /* Dark mode – override section-level light text for sections with light backgrounds */ /* Higher specificity: combine section IDs with background classes */ #about.bg-white, #about .bg-white, #about.bg-slate-50, #about .bg-slate-50, #about.bg-slate-50\/80, #about .bg-slate-50\/80, #about.bg-white\/70, #about .bg-white\/70, #services.bg-slate-50, #services .bg-slate-50, #services.bg-white, #services .bg-white, #services.bg-white\/80, #services .bg-white\/80, #services.bg-slate-50\/80, #services .bg-slate-50\/80 { color: #0F172A !important; } /* Override all text elements within light-background sections */ #about.bg-white p, #about.bg-white span, #about.bg-white li, #about.bg-white h1, #about.bg-white h2, #about.bg-white h3, #about.bg-white h4, #about.bg-white h5, #about.bg-white h6, #about.bg-white small, #about.bg-white div, #about.bg-white label, #about .bg-white p, #about .bg-white span, #about .bg-white li, #about .bg-white h1, #about .bg-white h2, #about .bg-white h3, #about .bg-white h4, #about .bg-white h5, #about .bg-white h6, #about .bg-white small, #about .bg-white div, #about .bg-white label, #about.bg-slate-50 p, #about.bg-slate-50 span, #about.bg-slate-50 li, #about.bg-slate-50 h1, #about.bg-slate-50 h2, #about.bg-slate-50 h3, #about.bg-slate-50 h4, #about.bg-slate-50 h5, #about.bg-slate-50 h6, #about.bg-slate-50 small, #about.bg-slate-50 div, #about.bg-slate-50 label, #about .bg-slate-50 p, #about .bg-slate-50 span, #about .bg-slate-50 li, #about .bg-slate-50 h1, #about .bg-slate-50 h2, #about .bg-slate-50 h3, #about .bg-slate-50 h4, #about .bg-slate-50 h5, #about .bg-slate-50 h6, #about .bg-slate-50 small, #about .bg-slate-50 div, #about .bg-slate-50 label, #services.bg-slate-50 p, #services.bg-slate-50 span, #services.bg-slate-50 li, #services.bg-slate-50 h1, #services.bg-slate-50 h2, #services.bg-slate-50 h3, #services.bg-slate-50 h4, #services.bg-slate-50 h5, #services.bg-slate-50 h6, #services.bg-slate-50 small, #services.bg-slate-50 div, #services.bg-slate-50 label, #services .bg-slate-50 p, #services .bg-slate-50 span, #services .bg-slate-50 li, #services .bg-slate-50 h1, #services .bg-slate-50 h2, #services .bg-slate-50 h3, #services .bg-slate-50 h4, #services .bg-slate-50 h5, #services .bg-slate-50 h6, #services .bg-slate-50 small, #services .bg-slate-50 div, #services .bg-slate-50 label, #services.bg-white p, #services.bg-white span, #services.bg-white li, #services.bg-white h1, #services.bg-white h2, #services.bg-white h3, #services.bg-white h4, #services.bg-white h5, #services.bg-white h6, #services.bg-white small, #services.bg-white div, #services.bg-white label, #services .bg-white p, #services .bg-white span, #services .bg-white li, #services .bg-white h1, #services .bg-white h2, #services .bg-white h3, #services .bg-white h4, #services .bg-white h5, #services .bg-white h6, #services .bg-white small, #services .bg-white div, #services .bg-white label { color: #0F172A !important; } /* Override Tailwind text utilities within #about and #services sections on light backgrounds */ #about.bg-white .text-slate-500, #about.bg-white .text-slate-600, #about.bg-white .text-slate-700, #about.bg-white .text-slate-800, #about.bg-white .text-slate-900, #about .bg-white .text-slate-500, #about .bg-white .text-slate-600, #about .bg-white .text-slate-700, #about .bg-white .text-slate-800, #about .bg-white .text-slate-900, #about.bg-slate-50 .text-slate-500, #about.bg-slate-50 .text-slate-600, #about.bg-slate-50 .text-slate-700, #about.bg-slate-50 .text-slate-800, #about.bg-slate-50 .text-slate-900, #about .bg-slate-50 .text-slate-500, #about .bg-slate-50 .text-slate-600, #about .bg-slate-50 .text-slate-700, #about .bg-slate-50 .text-slate-800, #about .bg-slate-50 .text-slate-900, #services.bg-slate-50 .text-slate-500, #services.bg-slate-50 .text-slate-600, #services.bg-slate-50 .text-slate-700, #services.bg-slate-50 .text-slate-800, #services.bg-slate-50 .text-slate-900, #services .bg-slate-50 .text-slate-500, #services .bg-slate-50 .text-slate-600, #services .bg-slate-50 .text-slate-700, #services .bg-slate-50 .text-slate-800, #services .bg-slate-50 .text-slate-900, #services.bg-white .text-slate-500, #services.bg-white .text-slate-600, #services.bg-white .text-slate-700, #services.bg-white .text-slate-800, #services.bg-white .text-slate-900, #services .bg-white .text-slate-500, #services .bg-white .text-slate-600, #services .bg-white .text-slate-700, #services .bg-white .text-slate-800, #services .bg-white .text-slate-900 { color: inherit; } /* Ensure dark text utilities (#111827, #000000) work on light backgrounds in sections */ #about.bg-white [class*="text-[#111827]"], #about.bg-white [class*="text-[#000000]"], #about .bg-white [class*="text-[#111827]"], #about .bg-white [class*="text-[#000000]"], #about.bg-slate-50 [class*="text-[#111827]"], #about.bg-slate-50 [class*="text-[#000000]"], #about .bg-slate-50 [class*="text-[#111827]"], #about .bg-slate-50 [class*="text-[#000000]"], #services.bg-slate-50 [class*="text-[#111827]"], #services.bg-slate-50 [class*="text-[#000000]"], #services .bg-slate-50 [class*="text-[#111827]"], #services .bg-slate-50 [class*="text-[#000000]"], #services.bg-white [class*="text-[#111827]"], #services.bg-white [class*="text-[#000000]"], #services .bg-white [class*="text-[#111827]"], #services .bg-white [class*="text-[#000000]"] { color: #111827 !important; } /* Dark mode – cards & content blocks */ #services .rounded-2xl, #services article { background-color: rgba(15, 23, 42, 0.96) !important; border-color: rgba(148, 163, 184, 0.4); } /* Override dark text in #services section for dark cards - ensure light text on dark card backgrounds */ #services .rounded-2xl, #services article { color: #E5E7EB !important; } /* Override all text elements in dark service cards to be light */ #services .rounded-2xl p, #services .rounded-2xl span, #services .rounded-2xl li, #services .rounded-2xl h1, #services .rounded-2xl h2, #services .rounded-2xl h3, #services .rounded-2xl h4, #services .rounded-2xl h5, #services .rounded-2xl h6, #services .rounded-2xl small, #services .rounded-2xl div:not([class*="bg-white"]):not([class*="bg-slate-50"]), #services article p, #services article span, #services article li, #services article h1, #services article h2, #services article h3, #services article h4, #services article h5, #services article h6, #services article small, #services article div:not([class*="bg-white"]):not([class*="bg-slate-50"]) { color: #E5E7EB !important; } /* Override Tailwind dark text utilities inside dark cards - make them light */ #services .rounded-2xl .text-slate-500, #services .rounded-2xl .text-slate-600, #services .rounded-2xl .text-slate-700, #services .rounded-2xl .text-slate-800, #services .rounded-2xl .text-slate-900, #services article .text-slate-500, #services article .text-slate-600, #services article .text-slate-700, #services article .text-slate-800, #services article .text-slate-900, #services .rounded-2xl [class*="text-[#111827]"], #services .rounded-2xl [class*="text-[#000000]"], #services article [class*="text-[#111827]"], #services article [class*="text-[#000000]"] { color: #CBD5E1 !important; } /* Make sure headings in dark cards are also light */ #services .rounded-2xl h3, #services article h3 { color: #F9FAFB !important; } #locations .rounded-2xl { background-color: rgba(15, 23, 42, 0.96); border-color: rgba(148, 163, 184, 0.4); } #testimonials article { background-color: rgba(15, 23, 42, 0.96); border-color: rgba(148, 163, 184, 0.4); } #quote .rounded-3xl { background-color: rgba(15, 23, 42, 0.96); border-color: rgba(148, 163, 184, 0.5); } #contact .rounded-2xl { background-color: rgba(15, 23, 42, 0.96); border-color: rgba(148, 163, 184, 0.4); } /* Dark mode – form fields */ .form-error { color: #DC143C; font-size: 0.75rem; margin-top: 0.25rem; } .form-error.hidden { display: none; } /* Mobile menu styling */ #mobile-menu { transition: transform 0.3s ease, opacity 0.3s ease; } #mobile-menu.hidden { opacity: 0; transform: translateY(-10px); } #mobile-menu.active { opacity: 1; transform: translateY(0); } /* Burger backdrop for mobile menu */ .burger-backdrop { display: none; position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background: rgba(0, 0, 0, 0.5); z-index: 900; } .burger-backdrop.active { display: block; } /* Desktop Services dropdown */ .dropdown-menu { position: absolute; top: 100%; opacity: 0; pointer-events: none; transform: translateY(4px); transition: opacity 0.2s ease, transform 0.2s ease; z-index: 40; } .dropdown:hover > .dropdown-menu, .dropdown:focus-within > .dropdown-menu { opacity: 1; pointer-events: auto; transform: translateY(0); } /* Dropdown menus in mobile view */ .mobile-dropdown-menu { max-height: 0; overflow: hidden; opacity: 0; transition: max-height 0.3s ease, opacity 0.3s ease; } .mobile-dropdown-menu a { font-size: 0.95rem; } /* Suburb dropdown styling */ .suburb-dropdown-menu { max-height: 0; overflow: hidden; opacity: 0; transition: max-height 0.3s ease, opacity 0.3s ease; } .suburb-dropdown.active .suburb-dropdown-menu { margin-top: 0.75rem; } /* Floating action buttons (Call & WhatsApp) */ .floating-action-buttons { position: fixed; bottom: 1.75rem; right: 1.25rem; display: flex; flex-direction: column; gap: 0.85rem; z-index: 50; } .fab-btn { width: 3.25rem; height: 3.25rem; border-radius: 9999px; display: flex; align-items: center; justify-content: center; color: #ffffff; box-shadow: 0 18px 45px rgba(0, 0, 0, 0.4); transition: transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease; } .fab-btn i { font-size: 1.35rem; } .fab-phone { background: linear-gradient(135deg, #0EA5E9, #0369A1); } .fab-whatsapp { background: linear-gradient(135deg, #22C55E, #15803D); } .fab-btn:hover { transform: translateY(-2px) scale(1.05); filter: brightness(1.05); box-shadow: 0 22px 55px rgba(0, 0, 0, 0.55); } /* Footer styling */ .footer-modern { background: radial-gradient(circle at top, #020617 0%, #020617 45%, #020617 100%); border-top: 1px solid rgba(148, 163, 184, 0.35); } .footer-card { background: rgba(15, 23, 42, 0.9); border-radius: 1rem; padding: 1.5rem; border: 1px solid rgba(148, 163, 184, 0.35); box-shadow: 0 18px 40px rgba(15, 23, 42, 0.8); } .footer-card h3 { letter-spacing: 0.04em; } /* Area cards styling */ .area-card-modern { border-color: rgba(148, 163, 184, 0.5); box-shadow: 0 14px 40px rgba(15, 23, 42, 0.85); } .area-card-modern h3 { letter-spacing: 0.03em; } .area-card-modern ul li::marker { color: #DC143C; } /* Hero highlight text */ .hero-badge { background: linear-gradient(135deg, rgba(248, 250, 252, 0.03), rgba(15, 23, 42, 0.9)); border-radius: 9999px; border: 1px solid rgba(148, 163, 184, 0.5); padding: 0.4rem 0.9rem; display: inline-flex; align-items: center; gap: 0.5rem; box-shadow: 0 12px 35px rgba(15, 23, 42, 0.7); } .hero-badge span { font-size: 0.75rem; letter-spacing: 0.15em; } /* Navigation active state (desktop and mobile) */ .nav-link.active { color: #F9FAFB; } .nav-link.active::after { content: ''; display: block; width: 100%; height: 2px; margin-top: 0.25rem; border-radius: 9999px; background: linear-gradient(90deg, #F97373, #DC143C); } /* Smooth hover for nav links */ .nav-link { position: relative; transition: color 0.2s ease; } .nav-link::after { content: ''; position: absolute; left: 0; bottom: -0.2rem; width: 0; height: 2px; border-radius: 9999px; background: linear-gradient(90deg, #F97373, #DC143C); transition: width 0.2s ease; } .nav-link:hover::after { width: 100%; } /* Responsive tweaks */ @media (max-width: 640px) { .section-heading { font-size: 2.1rem; } .page-container { padding-left: 1.25rem; padding-right: 1.25rem; } }