/* Dark mode overrides — applied when JS in header handles OS preference detection + manual toggle */ /* ---- primary button ---- */ body.dark-mode .bg-primary-btn { background: #175a75 !important; } /* ---- base ---- */ body.dark-mode { background: #1a1a1a; color: #e0e0e0; } /* ---- top bar step indicators ---- */ body.dark-mode .top-bar li.active-bar a { background: #175a75 !important; border-color: #175a75 !important; } body.dark-mode .top-bar li.active-bar a span.bold { color: #175a75 !important; } body.dark-mode .top-bar li.inactive-bar a { color: #175a75 !important; border-color: #175a75 !important; } body.dark-mode .top-bar li.inactive-bar a span.unbold { color: #175a75 !important; } /* ---- typography ---- */ body.dark-mode .text-default { color: #e0e0e0 !important; } body.dark-mode .text-blue { color: #93b6bc !important; } body.dark-mode .semiboldfont { color: #e0e0e0; } body.dark-mode nav div { color: #e0e0e0; } body.dark-mode nav ul li a { color: #aaaaaa; } /* ---- white/off-white backgrounds → dark surfaces ---- */ body.dark-mode .bg-white, body.dark-mode .bg-off-white, body.dark-mode .bg-light-white, body.dark-mode .bg-dark-off-white { background: #252525; } body.dark-mode nav, body.dark-mode .bggwhited, body.dark-mode .serv-section-cont { background: #252525; } body.dark-mode .home-services { background: #252525; } body.dark-mode .footer { background: #222222; } body.dark-mode .footer ul, body.dark-mode .footer ul li, body.dark-mode .footer ul li a { color: #aaaaaa; } /* ---- DVA / info popup link card ---- */ body.dark-mode #openInfoPopupLink { background: #2d2d2d !important; color: #e0e0e0 !important; box-shadow: 2px 2px 2px #111; } body.dark-mode #openInfoPopupLink:hover { background: #175a75 !important; color: #fff !important; } /* ---- service listing cards ---- */ body.dark-mode .service_listing li { background: #2d2d2d; box-shadow: 2px 2px 2px #111; } body.dark-mode .service_listing li a { color: #e0e0e0; } body.dark-mode .service_listing li span { color: #93b6bc !important; } body.dark-mode .service_listing li.active, body.dark-mode .service_listing li:hover { background: #175a75; } /* ---- service-list tabs ---- */ body.dark-mode .service-list li.inactive { background: #2d2d2d; } body.dark-mode .service-list li.inactive a { color: #e0e0e0; } body.dark-mode .service-list li.inactive:hover { background: #175a75; } body.dark-mode .service-list li.inactive:hover a { color: #fff; } body.dark-mode .service-list li.active { background: #175a75 !important; } body.dark-mode .service-list li.active a { color: #fff !important; } /* ---- extra services cards ---- */ body.dark-mode .extra_service li { background: #2d2d2d; box-shadow: 2px 2px 2px #111; } body.dark-mode .extra_service li a { color: #e0e0e0; } body.dark-mode .extra_service li label { color: #93b6bc !important; } body.dark-mode .extra_service li.active { background: #175a75; } body.dark-mode .extra_service li:hover a { background: #175a75; } /* ---- frequently-services ---- */ body.dark-mode .frequently-services a.btn-white { background: #2d2d2d; color: #e0e0e0; } body.dark-mode .frequently-services a.btn-white:hover { background: #175a75; color: #fff; } body.dark-mode .frequently-services a.btn-blue { background: #175a75 !important; color: #fff !important; } /* ---- time slots ---- */ body.dark-mode .timeslot li { background: #2d2d2d; } body.dark-mode .timeslot li a { color: #e0e0e0; } body.dark-mode .timeslot li.active, body.dark-mode .timeslot li:hover { background: #175a75; } body.dark-mode .timeslot li.active a, body.dark-mode .timeslot li:hover a { color: #fff; } /* ---- forms ---- */ body.dark-mode .form-ctrl, body.dark-mode .form-control, body.dark-mode .form-controls, body.dark-mode .form-control-tt, body.dark-mode .form-control-textarea, body.dark-mode .form-ctrl-txtarea { background: #2d2d2d; color: #e0e0e0; border-color: #3d3d3d; box-shadow: 0px 3px 10px rgba(0,0,0,0.4); } body.dark-mode input, body.dark-mode textarea, body.dark-mode select { background: #2d2d2d; color: #e0e0e0; } body.dark-mode .selectbox { color: #e0e0e0; } body.dark-mode .iptfields { border-color: #3d3d3d; background: #2d2d2d; color: #e0e0e0; } body.dark-mode .bttn { border-color: #3d3d3d; color: #175a75; } /* ---- summary ---- */ body.dark-mode ul.summary-list li label { color: #e0e0e0; } body.dark-mode ul.summary-list li span.rt { color: #e0e0e0 !important; } /* ---- accordion ---- */ body.dark-mode .accordion_one .panel-group { border-color: #3d3d3d; } body.dark-mode .accordion_one .panel .panel-heading a { background: #2d2d2d; color: #e0e0e0; border-bottom-color: #3d3d3d; } body.dark-mode .accordion_one .panel .panel-heading a.collapsed { color: #aaaaaa; } body.dark-mode .accordion_one .panel-group .panel-heading+.panel-collapse>.panel-body { background: #252525; color: #aaaaaa; } body.dark-mode .accordion_one .panel .panel-heading a:after, body.dark-mode .accordion_one .panel .panel-heading a.collapsed:after { background: #3d3d3d; } body.dark-mode h5.accordion-title { color: #93b6bc; } /* ---- borders ---- */ body.dark-mode .border-top { border-top-color: #3d3d3d; } body.dark-mode .border-bottom { border-top-color: #3d3d3d; } body.dark-mode .border-dashed { border-bottom-color: #3d3d3d; } /* ---- calendar ---- */ body.dark-mode .buttons-container { background: #175a75; } body.dark-mode .weeks-container, body.dark-mode .special-buttons { background: #252525; } body.dark-mode .week.highlight { background: rgba(23, 90, 117, 0.2); } body.dark-mode .weeks-wrapper.header { border-bottom-color: #3d3d3d; } body.dark-mode .week .day[disabled="disabled"] span { color: #555555; } /* ---- fixed header / shadows ---- */ body.dark-mode .fixed-header { box-shadow: 0px 5px 20px rgba(0,0,0,0.5); } body.dark-mode .b-shadow { box-shadow: 0px 5px 20px rgba(0,0,0,0.4); } body.dark-mode .ipt-box-shadow { box-shadow: 0px 3px 10px rgba(0,0,0,0.4); } /* ---- dark mode toggle switch ---- */ .dm-switch { position: relative; display: inline-block; width: 44px; height: 24px; flex-shrink: 0; cursor: pointer; margin: 0; } .dm-switch input { opacity: 0; width: 0; height: 0; position: absolute; } .dm-slider { position: absolute; inset: 0; background: #ccc; border-radius: 24px; transition: background 0.2s; } .dm-knob { position: absolute; width: 18px; height: 18px; left: 3px; top: 3px; background: #fff; border-radius: 50%; transition: transform 0.2s; display: flex; align-items: center; justify-content: center; } .dm-sun, .dm-moon { width: 11px; height: 11px; color: #aaa; flex-shrink: 0; } .dm-moon { display: none; } .dm-switch input:checked + .dm-slider { background: #175a75; } .dm-switch input:checked + .dm-slider .dm-knob { transform: translateX(20px); } .dm-switch input:checked + .dm-slider .dm-sun { display: none; } .dm-switch input:checked + .dm-slider .dm-moon { display: block; color: #175a75; }