/* ============================================================================= DARK THEME - Centralized dark mode styles for iFarrier Applied when (or a parent element) has the class "dark-theme" All .dark-theme rules have been moved here from individual component CSS files. ============================================================================= */ /* Flatpickr dark theme scoped to body.dark-theme */ body.dark-theme .flatpickr-calendar { background: #3f4458; box-shadow: 1px 0 0 #20222c, -1px 0 0 #20222c, 0 1px 0 #20222c, 0 -1px 0 #20222c, 0 3px 13px rgba(0, 0, 0, 0.08); } body.dark-theme .flatpickr-calendar.arrowTop:before { border-bottom-color: #20222c; } body.dark-theme .flatpickr-calendar.arrowTop:after { border-bottom-color: #3f4458; } body.dark-theme .flatpickr-calendar.arrowBottom:before { border-top-color: #20222c; } body.dark-theme .flatpickr-calendar.arrowBottom:after { border-top-color: #3f4458; } body.dark-theme .flatpickr-months .flatpickr-month { background: #3f4458; color: #fff; fill: #fff; } body.dark-theme .flatpickr-months .flatpickr-prev-month, body.dark-theme .flatpickr-months .flatpickr-next-month { color: #fff; fill: #fff; } body.dark-theme .flatpickr-months .flatpickr-prev-month:hover, body.dark-theme .flatpickr-months .flatpickr-next-month:hover { color: #eee; } body.dark-theme .flatpickr-months .flatpickr-prev-month:hover svg, body.dark-theme .flatpickr-months .flatpickr-next-month:hover svg { fill: #f64747; } body.dark-theme .numInputWrapper span { border: 1px solid rgba(255, 255, 255, 0.15); } body.dark-theme .numInputWrapper span:hover { background: rgba(192, 187, 167, 0.1); } body.dark-theme .numInputWrapper span:active { background: rgba(192, 187, 167, 0.2); } body.dark-theme .numInputWrapper span.arrowUp:after { border-bottom-color: rgba(255, 255, 255, 0.6); } body.dark-theme .numInputWrapper span.arrowDown:after { border-top-color: rgba(255, 255, 255, 0.6); } body.dark-theme .numInputWrapper span svg path { fill: rgba(255, 255, 255, 0.5); } body.dark-theme .numInputWrapper:hover { background: rgba(192, 187, 167, 0.05); } body.dark-theme .flatpickr-current-month .numInputWrapper span.arrowUp:after { border-bottom-color: #fff; } body.dark-theme .flatpickr-current-month .numInputWrapper span.arrowDown:after { border-top-color: #fff; } body.dark-theme .flatpickr-current-month input.cur-year[disabled], body.dark-theme .flatpickr-current-month input.cur-year[disabled]:hover { color: rgba(255, 255, 255, 0.5); } body.dark-theme .flatpickr-current-month .flatpickr-monthDropdown-months { background: #3f4458; } body.dark-theme .flatpickr-current-month .flatpickr-monthDropdown-months:hover { background: rgba(192, 187, 167, 0.05); } body.dark-theme .flatpickr-current-month .flatpickr-monthDropdown-months .flatpickr-monthDropdown-month { background-color: #3f4458; } body.dark-theme span.flatpickr-weekday { background: #3f4458; color: #fff; } body.dark-theme .dayContainer+.dayContainer { box-shadow: -1px 0 0 #20222c; } body.dark-theme .flatpickr-day { color: rgba(255, 255, 255, 0.95); } body.dark-theme .flatpickr-day.inRange, body.dark-theme .flatpickr-day.prevMonthDay.inRange, body.dark-theme .flatpickr-day.nextMonthDay.inRange, body.dark-theme .flatpickr-day.today.inRange, body.dark-theme .flatpickr-day.prevMonthDay.today.inRange, body.dark-theme .flatpickr-day.nextMonthDay.today.inRange, body.dark-theme .flatpickr-day:hover, body.dark-theme .flatpickr-day.prevMonthDay:hover, body.dark-theme .flatpickr-day.nextMonthDay:hover, body.dark-theme .flatpickr-day:focus, body.dark-theme .flatpickr-day.prevMonthDay:focus, body.dark-theme .flatpickr-day.nextMonthDay:focus { background: #646c8c; border-color: #646c8c; } body.dark-theme .flatpickr-day.today { border-color: #eee; } body.dark-theme .flatpickr-day.today:hover, body.dark-theme .flatpickr-day.today:focus { border-color: #eee; background: #eee; color: #3f4458; } body.dark-theme .flatpickr-day.selected, body.dark-theme .flatpickr-day.startRange, body.dark-theme .flatpickr-day.endRange, body.dark-theme .flatpickr-day.selected.inRange, body.dark-theme .flatpickr-day.startRange.inRange, body.dark-theme .flatpickr-day.endRange.inRange, body.dark-theme .flatpickr-day.selected:focus, body.dark-theme .flatpickr-day.startRange:focus, body.dark-theme .flatpickr-day.endRange:focus, body.dark-theme .flatpickr-day.selected:hover, body.dark-theme .flatpickr-day.startRange:hover, body.dark-theme .flatpickr-day.endRange:hover, body.dark-theme .flatpickr-day.selected.prevMonthDay, body.dark-theme .flatpickr-day.startRange.prevMonthDay, body.dark-theme .flatpickr-day.endRange.prevMonthDay, body.dark-theme .flatpickr-day.selected.nextMonthDay, body.dark-theme .flatpickr-day.startRange.nextMonthDay, body.dark-theme .flatpickr-day.endRange.nextMonthDay { background: #80cbc4; box-shadow: none; color: #fff; border-color: #80cbc4; } body.dark-theme .flatpickr-day.selected.startRange+.endRange:not(:nth-child(7n + 1)), body.dark-theme .flatpickr-day.startRange.startRange+.endRange:not(:nth-child(7n + 1)), body.dark-theme .flatpickr-day.endRange.startRange+.endRange:not(:nth-child(7n + 1)) { box-shadow: -10px 0 0 #80cbc4; } body.dark-theme .flatpickr-day.inRange { box-shadow: -5px 0 0 #646c8c, 5px 0 0 #646c8c; } body.dark-theme .flatpickr-day.flatpickr-disabled, body.dark-theme .flatpickr-day.flatpickr-disabled:hover, body.dark-theme .flatpickr-day.prevMonthDay, body.dark-theme .flatpickr-day.nextMonthDay, body.dark-theme .flatpickr-day.notAllowed, body.dark-theme .flatpickr-day.notAllowed.prevMonthDay, body.dark-theme .flatpickr-day.notAllowed.nextMonthDay { color: rgba(255, 255, 255, 0.3); } body.dark-theme .flatpickr-day.flatpickr-disabled, body.dark-theme .flatpickr-day.flatpickr-disabled:hover { color: rgba(255, 255, 255, 0.1); } body.dark-theme .flatpickr-day.week.selected { box-shadow: -5px 0 0 #80cbc4, 5px 0 0 #80cbc4; } body.dark-theme .flatpickr-weekwrapper .flatpickr-weeks { box-shadow: 1px 0 0 #20222c; } body.dark-theme .flatpickr-weekwrapper span.flatpickr-day, body.dark-theme .flatpickr-weekwrapper span.flatpickr-day:hover { color: rgba(255, 255, 255, 0.3); } body.dark-theme .flatpickr-time { border-top: 1px solid #20222c; background: #3f4458; } body.dark-theme .flatpickr-time input, body.dark-theme .flatpickr-time .flatpickr-time-separator, body.dark-theme .flatpickr-time .flatpickr-am-pm { color: #fff; background: #3f4458; } body.dark-theme .flatpickr-time input:focus, body.dark-theme .flatpickr-time .flatpickr-am-pm:focus, body.dark-theme .flatpickr-time input:hover, body.dark-theme .flatpickr-time .flatpickr-am-pm:hover { background: #646c8c; } body.dark-theme .flatpickr-calendar.hasTime .flatpickr-time { border-top: 1px solid #20222c; } /* -- Preloader ----------------------------------------------------------- */ .dark-theme .preloader-overlay { background: linear-gradient(135deg, #171717, #2c3154); } .dark-theme .preloader-content p { color: #fff; } /* -- Sidebar ------------------------------------------------------------- */ .dark-theme .sidenav { background-color: #171717; color: #fff; } .dark-theme .nav-link { color: #fff; } .dark-theme .nav-link.active { background-color: #2b8fdf; } .dark-theme .icon { color: #fff !important; background-color: #0a0a0a !important; } /* -- TopNav -------------------------------------------------------------- */ .dark-theme .nav-link { color: #fff !important; } .dark-theme .dropdown-menu { background-color: #0a0a0a; color: #fff; } .dark-theme .dropdown-item { color: #fff; } .dark-theme .dropdown-item:hover { background-color: #2b8fdf; } .dark-theme .text-body { color: #fff !important; } .dark-theme .shadow-blur { box-shadow: inset 0 0px 1px 1px rgb(23 23 23), 0 20px 27px 0 rgb(23 23 23 / 0%) !important; } .dark-theme a { color: #fff !important; } .dark-theme #clientTabs.nav-tabs { background-color: #0a0a0a; } .dark-theme #clientTabs.nav-tabs { background-color: #0a0a0a; } .dark-theme #clientTabs.nav-tabs .nav-link.active, #clientTabs.nav-tabs .nav-item.show .nav-link { background-color: #171717; color: #fff !important; } .dark-theme .navbar-vertical .navbar-nav>.nav-item .nav-link.active { background-color: #0a0a0a; color: #fff !important; } /* -- ServiceArea / Forms ------------------------------------------------- */ .dark-theme .form-select { background-color: #0a0a0a; color: #fff; border-color: #fff; } .dark-theme .form-select:focus { background-color: #0a0a0a; color: #fff; border-color: #2b8fdf; box-shadow: none; } .dark-theme .form-control { background-color: #0a0a0a; color: #fff; border-color: #a0a0a0; } .dark-theme .form-control:focus { background-color: #0a0a0a; color: #fff; border-color: #2b8fdf; box-shadow: none; } .dark-theme input::-webkit-calendar-picker-indicator, .dark-theme input::-webkit-inner-spin-button, .dark-theme input::-webkit-clear-button { filter: invert(1); } .dark-theme label { color: #fff; } .dark-theme .PhoneInputInput { color: #fff; } .dark-theme .fa.fa-eye, .dark-theme .fa.fa-eye-slash { background: transparent !important; color: #fff; } /* -- GooglePlacesAutocomplete -------------------------------------------- */ .dark-theme .form-control { background-color: #0a0a0a; color: #fff; } .dark-theme .form-control:focus { background-color: #0a0a0a; color: #fff; border-color: #2b8fdf; box-shadow: none; } .dark-theme .form-control::placeholder { color: #8392ab; } .dark-theme label { color: #fff; } /* -- FailedJobs ---------------------------------------------------------- */ body.dark-theme { background-color: #0a0a0a; color: #fff; } .dark-theme .card { background-color: #171717; color: #fff; } .dark-theme .card-header { background-color: #171717; } .dark-theme .btn-primary { background-color: #2b8fdf; border-color: #2b8fdf; } .dark-theme .btn-primary:hover { background-color: #1c6bbd; border-color: #1c6bbd; } .dark-theme .btn-primary:disabled { background-color: #2b8fdf; border-color: #2b8fdf; opacity: 0.65; } .dark-theme footer.footer { background-color: #171717; color: #fff; } .dark-theme .fa.fa-eye-slash.cursor-pointer, .dark-theme .fa.fa-eye.cursor-pointer { background: #0a0a0a !important; } .dark-theme .modal-content { background-color: #171717; color: #fff; } .dark-theme .list-group-item { background-color: #0a0a0a; } .dark-theme .page-item.active .page-link { background-color: #0a0a0a; border-color: #171717; color: #fff; } .dark-theme .nav.nav-pills { background: #0a0a0a; } /* -- Public Navbar ------------------------------------------------------- */ .dark-theme .navbar { background-color: #171717 !important; color: #fff; } .dark-theme .navbar-brand-img { filter: brightness(0) invert(1); } .dark-theme .nav-link { color: #fff !important; } .dark-theme .nav-link.active { color: #2b8fdf !important; } .dark-theme .navbar-toggler-icon { filter: brightness(0) invert(1); } /* -- Public Home --------------------------------------------------------- */ .dark-theme .section { background: #171717; color: #fff; } .dark-theme #top { background: #171717; border-bottom: 1px solid rgba(255, 255, 255, 0.1); } .dark-theme #jobs { background: #0a0a0a; color: #fff; box-shadow: none; } .dark-theme .box { color: #fff; } .dark-theme #hiring { background: #0a0a0a; color: #fff; } .dark-theme #form { background: linear-gradient(to right, #3a416f, #4a3e63, #5a4b49); } .dark-theme #form>div>input { background: rgba(255, 255, 255, 0.1); color: #fff; } .dark-theme #form>div>input::placeholder { color: rgba(255, 255, 255, 0.6); } .dark-theme #form>div>button { background: #2b8fdf; } .dark-theme .home-page svg { filter: invert(1); } /* -- Public Website ------------------------------------------------------ */ .dark-theme .about-story-page { background: linear-gradient(135deg, #171717 0%, #0a0a0a 100%); color: #fff; } .dark-theme .story-section { background: #171717; color: #fff; box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3); } .dark-theme .story-content { color: #fff; } .dark-theme .story-opening { color: #ccc; } .dark-theme .story-transition { color: #2b8fdf; } .dark-theme .story-solution { color: #ddd; } .dark-theme .about-cta { background: linear-gradient(135deg, #3a416f 0%, #4a3e63 100%); } .dark-theme .cta-btn.primary { background: #2b8fdf; color: #fff; } .dark-theme .cta-btn.primary:hover { background: #1c6bbd; box-shadow: 0 8px 25px rgba(43, 143, 223, 0.3); } .dark-theme .cta-btn.secondary { border-color: #2b8fdf; color: #2b8fdf; } .dark-theme .cta-btn.secondary:hover { background: rgba(43, 143, 223, 0.1); color: #1c6bbd; } .dark-theme .about { background-color: #171717; } .dark-theme .about-text h2 { color: #fff; } .dark-theme .about-intro { color: #ccc; } .dark-theme .about-feature h4 { color: #2b8fdf; } .dark-theme .about-feature p { color: #bbb; } .dark-theme .text-muted { color: #a0aec0 !important; } .dark-theme .table { color: #e0e0e0; } .dark-theme .table td, .dark-theme .table th { border-top: 1px solid #495057; } .dark-theme .form-check-label { color: #fff !important; } .dark-theme .form-check-input { border-color: #6c757d; background-color: #495057; } .dark-theme .btn-primary { background-color: #2b8fdf; border-color: #2b8fdf; } .dark-theme .btn-primary:hover { background-color: #1c6bbd; border-color: #1c6bbd; } .dark-theme .btn-outline-primary { color: #2b8fdf; border-color: #2b8fdf; } .dark-theme .btn-outline-primary:hover { color: #fff; background-color: #2b8fdf; border-color: #2b8fdf; } .dark-theme .ifarrier-website { color: #fff; background-color: #171717; } .dark-theme .website-header { background: #171717; border-bottom: 1px solid rgba(255, 255, 255, 0.1); } .dark-theme .header-logo .logo-main { filter: brightness(0) invert(1); } .dark-theme .login-link, .dark-theme .register-link { color: #fff; } .dark-theme .login-link:hover, .dark-theme .register-link:hover { color: #2b8fdf; } .dark-theme .hamburger-line { background-color: #fff; } .dark-theme .hero-slider .slick-slide img { box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3); } .dark-theme .hero-text-slider h2 { color: #fff; } .dark-theme .hero-section { background-color: #000; } .dark-theme .hero-company-name { color: rgba(255, 255, 255, 0.015); } .dark-theme .hero-powered-by p { color: rgba(255, 255, 255, 0.5); text-shadow: 1px 1px 2px rgba(255, 255, 255, 0.5); } .dark-theme .bg-ivory { background-color: #171717; } .dark-theme .user-sections-page { background-color: #171717; } .dark-theme .user-section-block { background-color: #0a0a0a; box-shadow: 0 8px 30px rgba(0, 0, 0, 0.3); } .dark-theme .user-section-content h2 { color: #fff; } .dark-theme .user-section-content p { color: #ccc; } .dark-theme .hero-scroll-indicator { color: rgba(255, 255, 255, 0.5); } .dark-theme .scroll-mouse { border-color: rgba(255, 255, 255, 0.3); } .dark-theme .scroll-wheel { background-color: rgba(255, 255, 255, 0.3); } .dark-theme .section-title.dark-text { color: #fff; } .dark-theme .section-description.dark-description { color: #ccc; } .dark-theme .scroll-arrow span.dark-arrow { border-color: rgba(255, 255, 255, 0.3); } .dark-theme .pricing-section { color: #fff; } .dark-theme .pricing-title { color: #fff; } .dark-theme .pricing-description { color: #ccc; } .dark-theme .pricing-toggle { background-color: #0a0a0a; } .dark-theme .toggle-btn { color: #ccc; } .dark-theme .toggle-btn.active { background-color: #171717; color: #2b8fdf; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3); } .dark-theme .pricing-card { background: #0a0a0a; border-color: #495057; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2); } .dark-theme .pricing-card:hover { border-color: #2b8fdf; box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4); } .dark-theme .pricing-card.popular { border-color: #2b8fdf; } .dark-theme .popular-badge { background: linear-gradient(135deg, #2b8fdf, #1c6bbd); } .dark-theme .plan-name { color: #fff; } .dark-theme .currency { color: #ccc; } .dark-theme .amount { color: #fff; } .dark-theme .period { color: #ccc; } .dark-theme .feature-icon.included { background-color: #2b8fdf; } .dark-theme .feature-icon.not-included { background-color: #495057; color: #777; } .dark-theme .feature-text { color: #ddd; } .dark-theme .pricing-btn.primary { background: linear-gradient(135deg, #2b8fdf, #1c6bbd); } .dark-theme .pricing-btn.primary:hover { background: linear-gradient(135deg, #1c6bbd, #144e8a); box-shadow: 0 8px 25px rgba(43, 143, 223, 0.3); } .dark-theme .pricing-btn.secondary { color: #2b8fdf; border-color: #2b8fdf; } .dark-theme .pricing-btn.secondary:hover { background: #2b8fdf; color: #fff; box-shadow: 0 8px 25px rgba(43, 143, 223, 0.2); } .dark-theme .pricing-btn.disabled { background: #495057; color: #777; border-color: #495057; } .dark-theme .pricing-btn.disabled:hover { background: #495057; color: #777; box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2); } .dark-theme .pricing-footer p { color: #ccc; } .dark-theme .final-cta-section { background: linear-gradient(135deg, #171717 0%, #000 100%); } .dark-theme .final-cta-btn.primary { background-color: #2b8fdf; } .dark-theme .final-cta-btn.primary:hover { background-color: #1c6bbd; } .dark-theme .final-cta-btn.secondary { border-color: #2b8fdf; color: #2b8fdf; } .dark-theme .final-cta-btn.secondary:hover { background-color: #2b8fdf; color: #fff; } .dark-theme .website-footer { background-color: #000; } .dark-theme .footer-section h4 { color: #2b8fdf; } .dark-theme .footer-section a:hover, .dark-theme .footer-link-button:hover { color: #2b8fdf; } .dark-theme .social-icon:hover { color: #fff; background-color: rgba(43, 143, 223, 0.2); } .dark-theme .footer-logo img { filter: brightness(0) invert(1); } .dark-theme .footer-logo img { filter: brightness(0) invert(1); } .dark-theme h1, .dark-theme h2, .dark-theme h3, .dark-theme h4, .dark-theme h5, .dark-theme h6 { color: #fff; } .dark-theme p { color: #ccc; } .dark-theme .animated-section.righttoleft { background-color: #2b8fdf; background-color: rgba(43, 143, 223, var(--tw-bg-opacity, 1)); } .dark-theme .transparent-hero-text { color: #fff; } .dark-theme .caption-hero-text { color: rgba(255, 255, 255, 0.5); } /* -- Chatbot Widget ------------------------------------------------------ */ .dark-theme .chatbot-window { background: #171717; box-shadow: 0 8px 30px rgba(0, 0, 0, 0.5); } .dark-theme .chatbot-header { background: linear-gradient(135deg, #2b8fdf, #1c6bbd); } .dark-theme .agent-emoji { background: rgba(255, 255, 255, 0.2); } .dark-theme .chatbot-messages { background: #0a0a0a; } .dark-theme .chatbot-messages::-webkit-scrollbar-track { background: #495057; } .dark-theme .chatbot-messages::-webkit-scrollbar-thumb { background: #6c757d; } .dark-theme .message.agent .message-text { background: #495057; color: #fff; border-color: #6c757d; } .dark-theme .message-time { color: #aaa; } .dark-theme .typing-indicator { background: #495057; border-color: #6c757d; } .dark-theme .typing-indicator span { background: #bbb; } .dark-theme .chatbot-input { background: #171717; border-top: 1px solid #495057; } .dark-theme .disclaimer { background: #0a0a0a; border-bottom: 1px solid #495057; } .dark-theme .disclaimer small { color: #aaa; } .dark-theme .input-container input { background: #495057; border-color: #6c757d; color: #fff; } .dark-theme .input-container input:focus { border-color: #2b8fdf; box-shadow: 0 0 0 2px rgba(43, 143, 223, 0.3); } .dark-theme .input-container input:disabled { background: #6c757d; opacity: 0.6; } .dark-theme .send-btn { background: #2b8fdf; } .dark-theme .send-btn:hover:not(:disabled) { background: #1c6bbd; } .dark-theme .send-btn:disabled { background: #6c757d; } .dark-theme #clientTabs.nav-tabs .nav-link:hover { color: #000000 !important; }