/* ========================================================================== FliserRent – Dark Mode Activated via prefers-color-scheme or .dark-mode class on ========================================================================== */ @media (prefers-color-scheme: dark) { :root { --fr-text: #e8e8e8; --fr-text-light: #b8b8c8; --fr-text-muted: #9a9ab0; --fr-bg: #1a1a2e; --fr-bg-alt: #16162a; --fr-border: #2a2a4a; --fr-shadow: 0 2px 8px rgba(0, 0, 0, 0.3); } body { background-color: var(--fr-bg); color: var(--fr-text); } .navbar.is-white { background-color: #20203a; } .navbar-item, .navbar-link { color: var(--fr-text); } .navbar-item:hover, .navbar-link:hover { background-color: var(--fr-bg-alt); color: var(--fr-green); } .navbar-item.site-title { color: #fff; } .card { background-color: #20203a; border: 1px solid var(--fr-border); } .card a.has-text-dark { color: var(--fr-text) !important; } .card-footer { border-top-color: var(--fr-border); } .content h2, .content h3, .content h4 { color: #fff; } .title { color: #fff; } .notification.is-info.is-light { background-color: #20203a; color: var(--fr-text); } .button.is-light { background-color: #2a2a4a; color: var(--fr-text); border-color: var(--fr-border); } .section { background-color: var(--fr-bg); } .has-text-grey { color: var(--fr-text-light) !important; } .has-background-light, .before-after-section, .testimonials-section { background-color: var(--fr-bg-alt) !important; } .has-background-success-light, .contact-section { background-color: #1a2e24 !important; } .box, .contact-box { background-color: #20203a; border: 1px solid var(--fr-border); } .input, .textarea, .select select { background-color: var(--fr-bg); border-color: var(--fr-border); color: var(--fr-text); } .label { color: var(--fr-text); } .hero-decoration { background: var(--fr-bg); } .coverage-map-placeholder { background: var(--fr-bg-alt); border-color: var(--fr-border); } .tag.is-success.is-light { background-color: rgba(72, 199, 116, 0.15); color: var(--fr-green); } .card-footer { border-top-color: var(--fr-border); } .testimonial-card { border-left-color: var(--fr-green); } /* Dark mode readability fixes */ .subtitle { color: var(--fr-text-light); } .services-section p, .trust-section p, .coverage-section p, .testimonials-section p, .before-after-section p { color: var(--fr-text); } .testimonial-card .is-italic { color: var(--fr-text); } .testimonial-card .has-text-weight-bold { color: #ffffff; } .contact-section .subtitle { color: var(--fr-text-light); } .service-card .card-content p { color: var(--fr-text-light); } .trust-item p { color: var(--fr-text-light); } .card-footer-item { color: var(--fr-green) !important; } .footer .has-text-light, .footer p { color: #d4d4d4 !important; } } /* Class-based toggle (JS) */ html.dark-mode { --fr-text: #e8e8e8; --fr-text-light: #b8b8c8; --fr-text-muted: #9a9ab0; --fr-bg: #1a1a2e; --fr-bg-alt: #16162a; --fr-border: #2a2a4a; --fr-shadow: 0 2px 8px rgba(0, 0, 0, 0.3); } html.dark-mode body { background-color: var(--fr-bg); color: var(--fr-text); } html.dark-mode .navbar.is-white { background-color: #20203a; } html.dark-mode .navbar-item, html.dark-mode .navbar-link { color: var(--fr-text); } html.dark-mode .card { background-color: #20203a; border: 1px solid var(--fr-border); } html.dark-mode .card a.has-text-dark { color: var(--fr-text) !important; } html.dark-mode .title { color: #fff; } html.dark-mode .content h2, html.dark-mode .content h3, html.dark-mode .content h4 { color: #fff; } html.dark-mode .section { background-color: var(--fr-bg); } html.dark-mode .has-background-light, html.dark-mode .before-after-section, html.dark-mode .testimonials-section { background-color: var(--fr-bg-alt) !important; } html.dark-mode .has-background-success-light, html.dark-mode .contact-section { background-color: #1a2e24 !important; } html.dark-mode .box, html.dark-mode .contact-box { background-color: #20203a; border: 1px solid var(--fr-border); } html.dark-mode .input, html.dark-mode .textarea, html.dark-mode .select select { background-color: var(--fr-bg); border-color: var(--fr-border); color: var(--fr-text); } html.dark-mode .label { color: var(--fr-text); } html.dark-mode .hero-decoration { background: var(--fr-bg); } html.dark-mode .coverage-map-placeholder { background: var(--fr-bg-alt); border-color: var(--fr-border); } html.dark-mode .ba-slider { background: var(--fr-bg-alt); } html.dark-mode .tag.is-success.is-light { background-color: rgba(72, 199, 116, 0.15); color: var(--fr-green); } html.dark-mode .has-text-grey { color: var(--fr-text-light) !important; } html.dark-mode .card-footer { border-top-color: var(--fr-border); } html.dark-mode .testimonial-card { border-left-color: var(--fr-green); } /* Class-based dark mode readability fixes */ html.dark-mode .subtitle { color: var(--fr-text-light); } html.dark-mode .services-section p, html.dark-mode .trust-section p, html.dark-mode .coverage-section p, html.dark-mode .testimonials-section p, html.dark-mode .before-after-section p { color: var(--fr-text); } html.dark-mode .testimonial-card .is-italic { color: var(--fr-text); } html.dark-mode .testimonial-card .has-text-weight-bold { color: #ffffff; } html.dark-mode .contact-section .subtitle { color: var(--fr-text-light); } html.dark-mode .service-card .card-content p { color: var(--fr-text-light); } html.dark-mode .trust-item p { color: var(--fr-text-light); } html.dark-mode .card-footer-item { color: var(--fr-green) !important; } html.dark-mode .footer .has-text-light, html.dark-mode .footer p { color: #d4d4d4 !important; } /* ---------- Dark Mode Toggle Button ---------- */ #dark-mode-toggle { background: transparent; border: 1px solid var(--fr-border); color: var(--fr-text-light); cursor: pointer; transition: color 0.2s ease, border-color 0.2s ease, background-color 0.2s ease; } #dark-mode-toggle:hover { color: var(--fr-green); border-color: var(--fr-green); } html.dark-mode #dark-mode-toggle { border-color: var(--fr-border); color: #f0c040; } html.dark-mode #dark-mode-toggle:hover { border-color: #f0c040; background-color: rgba(240, 192, 64, 0.1); } @media (prefers-color-scheme: dark) { #dark-mode-toggle { border-color: var(--fr-border); color: #f0c040; } #dark-mode-toggle:hover { border-color: #f0c040; background-color: rgba(240, 192, 64, 0.1); } } /* ---------- Notification (dark mode) ---------- */ html.dark-mode .notification { background-color: #20203a; color: var(--fr-text); } html.dark-mode .notification.is-success { background-color: #1a2e24; color: #48c774; } html.dark-mode .notification.is-warning { background-color: #2e2a1a; color: #ffdd57; } html.dark-mode .notification.is-danger { background-color: #2e1a1a; color: #f14668; } @media (prefers-color-scheme: dark) { .notification { background-color: #20203a; color: var(--fr-text); } .notification.is-success { background-color: #1a2e24; color: #48c774; } .notification.is-warning { background-color: #2e2a1a; color: #ffdd57; } .notification.is-danger { background-color: #2e1a1a; color: #f14668; } } /* ---------- Navbar burger (dark mode) ---------- */ html.dark-mode .navbar-burger span { color: var(--fr-text); } html.dark-mode .navbar-menu.is-active { background-color: #20203a; } @media (prefers-color-scheme: dark) { .navbar-burger span { color: var(--fr-text); } .navbar-menu.is-active { background-color: #20203a; } } /* ---------- Top Bar (dark mode) ---------- */ html.dark-mode .fliserrent-topbar { background-color: #10101e !important; } @media (prefers-color-scheme: dark) { .fliserrent-topbar { background-color: #10101e !important; } } /* ---------- Button variants (dark mode) ---------- */ html.dark-mode .button.is-white { background-color: #20203a; color: var(--fr-text); border-color: var(--fr-border); } html.dark-mode .button.is-outlined { border-color: var(--fr-border); color: var(--fr-text); } @media (prefers-color-scheme: dark) { .button.is-white { background-color: #20203a; color: var(--fr-text); border-color: var(--fr-border); } .button.is-outlined { border-color: var(--fr-border); color: var(--fr-text); } } /* ---------- Table (dark mode) ---------- */ html.dark-mode .table { background-color: #20203a; color: var(--fr-text); } html.dark-mode .table th { color: #fff; border-color: var(--fr-border); } html.dark-mode .table td { border-color: var(--fr-border); color: var(--fr-text); } @media (prefers-color-scheme: dark) { .table { background-color: #20203a; color: var(--fr-text); } .table th { color: #fff; border-color: var(--fr-border); } .table td { border-color: var(--fr-border); color: var(--fr-text); } }