/* ============================================================ * Rock Your House — Dark Mode * Activated by * All variables are overridden; no !important hacks needed. * ============================================================ */ .dark-mode { /* ── Core palette overrides ── */ --n: #e2e8f4; /* was navy, now near-white text */ --n2: #cbd5e8; --s: #7ab4e8; --s2: #a8c8ec; --a: #e8a96a; --a2: #f0c090; --o: #1a1f2e; /* light bg sections → dark bg */ --st: #1e2535; --m: #a0adc5; --sf: #7a8ba8; --bd: #2a3450; --sh1: 0 2px 16px rgba(0,0,0,.35); --sh2: 0 8px 32px rgba(0,0,0,.45); --sh3: 0 24px 64px rgba(0,0,0,.5); color-scheme: dark; } /* ── Global backgrounds & text ── */ .dark-mode body { background: #0f1117; color: var(--n); } /* ── Topbar ── */ .dark-mode .topbar { background: #090d15; } /* ── Navigation ── */ .dark-mode #nav { background: #0d1120; box-shadow: 0 1px 0 var(--bd); } .dark-mode #nav.sc { box-shadow: 0 8px 32px rgba(0,0,0,.45); } .dark-mode .nm > li > a { color: var(--n); } .dark-mode .nm > li > a:hover, .dark-mode .nm > li.active > a { background: var(--st); } /* Dropdown */ .dark-mode .dd { background: #141826; border-color: var(--bd); } .dark-mode .ddr:hover { background: var(--st); } .dark-mode .ddi { background: linear-gradient(135deg, #1e2a40, #141826); color: var(--s); } .dark-mode .ddr strong { color: var(--n); } /* ── Drawer ── */ .dark-mode .drawer { background: #0d1120; box-shadow: -8px 0 40px rgba(0,0,0,.6); } .dark-mode .drawer-hd { border-bottom-color: var(--bd); } .dark-mode .drawer-x { background: var(--st); color: var(--n); } .dark-mode .dl { color: var(--n); border-bottom-color: var(--st); } .dark-mode .dl:hover { background: var(--st); } .dark-mode .dl-acc { color: var(--n); border-bottom-color: var(--st); } .dark-mode .dl-sub a { color: var(--m); } .dark-mode .dl-sub a:hover { background: var(--st); color: var(--n); } /* ── Hero section ── */ .dark-mode #hero { background: linear-gradient(135deg, #090d18 0%, #0f1928 50%, #0a0f1e 100%); } .dark-mode .hero-badge { background: rgba(91, 155, 213, 0.12); border-color: rgba(91, 155, 213, 0.3); color: var(--s2); } .dark-mode .hero-h1 { color: #fff; } .dark-mode .hero-p { color: rgba(255,255,255,0.72); } .dark-mode .hstat-num { color: #fff; } .dark-mode .hstat-lbl { color: rgba(255,255,255,0.55); } .dark-mode .hero-float-badge { background: #141826; border: 1px solid var(--bd); } .dark-mode .fb-label strong { color: var(--n); } .dark-mode .fb-label span { color: var(--sf); } /* ── Review strip ── */ .dark-mode #reviews { background: #090d15; border-top: 1px solid var(--bd); border-bottom: 1px solid var(--bd); } .dark-mode .rv-badge { background: #0d1120; } .dark-mode .rv-scroll::before { background: linear-gradient(to right,#090d15,transparent); } .dark-mode .rv-scroll::after { background: linear-gradient(to left,#090d15,transparent); } .dark-mode .rv-card { background: #141826; border-color: var(--bd); } .dark-mode .rv-name { color: var(--n); } .dark-mode .rv-date { color: var(--sf); } .dark-mode .rv-txt { color: var(--m); } .dark-mode .rv-num, .dark-mode .rv-badge > div .rv-meta strong { color: #fff; } /* ── About section ── */ .dark-mode #about { background: #0f1117; } .dark-mode .about-card { background: #141826; } .dark-mode .about-float-card { background: #0d1120; border: 1px solid var(--bd); } .dark-mode .about-float-card .fn { color: var(--a); } .dark-mode .about-float-card .fl { color: var(--m); } .dark-mode .feat-item { background: #141826; border-color: var(--bd); } .dark-mode .feat-ic { background: rgba(91,155,213,.12); color: var(--s); } .dark-mode .feat-tx strong { color: var(--n); } .dark-mode .feat-tx span { color: var(--sf); } /* ── Services section ── */ .dark-mode #services { background: var(--o); } .dark-mode .svc-card { background: #141826; border-color: var(--bd); } .dark-mode .svc-card:hover { background: #1a1f2e; } .dark-mode .svc-t { color: var(--n); } .dark-mode .svc-p { color: var(--m); } .dark-mode .svc-li li { color: var(--m); } .dark-mode .svc-icon-wrap { background: rgba(91,155,213,.1); } /* ── Why section ── */ .dark-mode #why { background: #090d15; } .dark-mode .why-card { background: #141826; border-color: var(--bd); } .dark-mode .why-n { color: rgba(168,200,236,.2); } .dark-mode .why-t { color: var(--n); } .dark-mode .why-b { color: var(--m); } .dark-mode .why-ic { background: rgba(91,155,213,.12); color: var(--s); } /* ── Process section ── */ .dark-mode #process { background: #0f1117; } .dark-mode .proc-step { background: #141826; border-color: var(--bd); } .dark-mode .proc-t { color: var(--n); } .dark-mode .proc-p { color: var(--m); } .dark-mode .proc-ic { background: rgba(91,155,213,.12); color: var(--s); } .dark-mode .proc-num span { background: var(--a); color: #fff; } /* ── Gallery section ── */ .dark-mode #gallery, .dark-mode .gal-wrap + section { background: #0f1117; } .dark-mode .gal-item { border: 1px solid var(--bd); } /* ── Stats section ── */ .dark-mode #stats, .dark-mode .stat-mini-grid, .dark-mode .gal-stats { background: #090d15; } .dark-mode .stat-l, .dark-mode .smg-l, .dark-mode .gs-l { color: rgba(168,200,236,.6); } /* ── Areas section ── */ .dark-mode #areas { background: var(--o); } .dark-mode #areas > .container > .row > .col-lg-6 > div { background: #141826 !important; border-color: var(--bd) !important; } .dark-mode .area-pill { background: #141826; border-color: var(--bd); color: var(--n); } /* ── CTA box ── */ .dark-mode .cta-box { background: linear-gradient(135deg, #0e1930 0%, #142040 100%); border: 1px solid rgba(91,155,213,.2); } .dark-mode .cta-sub { color: rgba(168,200,236,.75); } /* ── Footer ── */ .dark-mode footer { background: #060910; } .dark-mode footer h4 { color: #fff; } .dark-mode footer ul li a { color: rgba(168,200,236,.65); } .dark-mode footer ul li a:hover { color: var(--a); } .dark-mode .ftag { color: var(--a); } .dark-mode .fabout { color: rgba(168,200,236,.6); } .dark-mode .fbot { border-top-color: rgba(255,255,255,.07); color: rgba(168,200,236,.4); } .dark-mode .fbot a { color: rgba(168,200,236,.5); } .dark-mode .finfo p { color: rgba(168,200,236,.7); } .dark-mode .finfo a { color: rgba(168,200,236,.85); } /* ── Page hero (inner pages) ── */ .dark-mode .ph { background: linear-gradient(135deg, #090d18 0%, #0f1928 50%, #0a0f1e 100%) !important; } .dark-mode .ph-h1 { color: #fff; } .dark-mode .ph-sub { color: rgba(255,255,255,.7); } .dark-mode .ph-tags .pt { background: rgba(91,155,213,.1); border-color: rgba(91,155,213,.25); color: rgba(168,200,236,.85); } .dark-mode .bc a { color: rgba(168,200,236,.75); } .dark-mode .bc .cur { color: var(--a); } /* ── White background sections on inner pages ── */ .dark-mode section[style*="background:#fff"], .dark-mode section[style*="background: #fff"], .dark-mode section[style*="background:white"] { background: #0f1117 !important; } .dark-mode section[style*="background:var(--o)"], .dark-mode section[style*="background: var(--o)"] { background: #141826 !important; } .dark-mode section[style*="background:var(--n)"], .dark-mode section[style*="background: var(--n)"] { background: #090d15 !important; } /* ── About page specific ── */ .dark-mode .story-img-frame { border: 1px solid var(--bd); } .dark-mode .story-year-badge { background: #141826; color: var(--n); } .dark-mode .story-year-badge span { color: var(--sf); } .dark-mode .mvv-card { background: #141826; border-color: var(--bd); } .dark-mode .mvv-title { color: var(--n); } .dark-mode .mvv-text { color: var(--m); } .dark-mode .val-card, .dark-mode .trust-badge { background: #141826; border-color: var(--bd); } .dark-mode .val-title, .dark-mode .trust-badge-title { color: var(--n); } .dark-mode .val-text, .dark-mode .trust-badge-text { color: var(--m); } .dark-mode .diff-row > div { color: var(--m); } .dark-mode .tl-content { background: #141826; border-color: var(--bd); } .dark-mode .tl-year { color: var(--a); } .dark-mode .tl-title { color: var(--n); } .dark-mode .tl-desc { color: var(--m); } .dark-mode .tl-dot { background: var(--n); color: #0f1117; } .dark-mode .area-card { background: #141826; border-color: var(--bd); color: var(--n); } .dark-mode .area-card-name { color: var(--n); } .dark-mode .area-card-text { color: var(--m); } .dark-mode .pg-step { background: transparent; } .dark-mode .pg-circle { background: #141826; border-color: var(--bd); } /* ── FAQ ── */ .dark-mode .faq-item, .dark-mode .fi { background: #141826; border-color: var(--bd); } .dark-mode .faq-q, .dark-mode .fq { color: var(--n); } .dark-mode .faq-a, .dark-mode .fa-body { color: var(--m); border-top-color: var(--bd); } /* ── Contact page ── */ .dark-mode .contact-hero-right { background: #141826; border-color: var(--bd); } .dark-mode .c-info-icon { background: rgba(91,155,213,.12); color: var(--s); } .dark-mode .c-info-title { color: var(--sf); } .dark-mode .c-info-val { color: var(--n); } .dark-mode .c-info-val a { color: var(--a); } .dark-mode .form-card { background: #141826; border-color: var(--bd); } .dark-mode .form-control-custom { background: #0f1117; border-color: var(--bd); color: var(--n); } .dark-mode .form-control-custom::placeholder { color: var(--sf); } .dark-mode .form-control-custom:focus { border-color: var(--s); background: #0d1020; } .dark-mode .form-group label { color: var(--n); } .dark-mode .form-group label span { color: var(--a); } .dark-mode .form-note { color: var(--sf); } .dark-mode .hours-card { background: #141826; border-color: var(--bd); } .dark-mode .hours-title { color: var(--n); } .dark-mode .hours-time { color: var(--m); } .dark-mode .wc-card { background: #141826; border-color: var(--bd); } .dark-mode .wc-title { color: var(--n); } .dark-mode .wc-text { color: var(--m); } .dark-mode .map-embed iframe { filter: invert(0.9) hue-rotate(180deg); } /* ── Gallery page ── */ .dark-mode .gal-hero-svg { opacity: 0.35; } .dark-mode .filter-bar { background: #141826; border-color: var(--bd); } .dark-mode .fb-btn { background: transparent; color: var(--n); border-color: var(--bd); } .dark-mode .fb-btn.active { background: var(--a); border-color: var(--a); color: #fff; } .dark-mode .ba-card { background: #141826; border-color: var(--bd); } .dark-mode .lb { background: rgba(0,0,0,.95); } /* ── Testimonials page ── */ .dark-mode .rating-bar { background: #090d15; } .dark-mode .rev-card { background: #141826; border-color: var(--bd); } .dark-mode .rc-name { color: var(--n); } .dark-mode .rc-date { color: var(--sf); } .dark-mode .rc-txt { color: var(--m); } .dark-mode .gw-card { background: #141826; border-color: var(--bd); } .dark-mode .gw-num { color: #fff; } .dark-mode .gw-note { color: var(--sf); } /* ── Service inner page ── */ .dark-mode .ov-card { background: #141826; border-color: var(--bd); } .dark-mode .ov-title { color: var(--n); } .dark-mode .ov-text { color: var(--m); } .dark-mode .mat-card { background: #141826; border-color: var(--bd); } .dark-mode .mat-t { color: var(--n); } .dark-mode .mat-b { color: var(--m); } .dark-mode .rel-card { background: #141826; border-color: var(--bd); } .dark-mode .rc-title { color: var(--n); } .dark-mode .rc-text { color: var(--m); } .dark-mode .zz-row > div { color: var(--m); } .dark-mode .check-list li { color: var(--m); } .dark-mode .ps { background: #141826; border-color: var(--bd); } .dark-mode .ps-t { color: var(--n); } .dark-mode .ps-b { color: var(--m); } /* ── Area inner page ── */ .dark-mode .svc-mini { background: #141826; border-color: var(--bd); } .dark-mode .sm-title { color: var(--n); } .dark-mode .sm-text { color: var(--m); } .dark-mode .aw-card { background: #141826; border-color: var(--bd); } .dark-mode .aw-title { color: var(--n); } .dark-mode .aw-text { color: var(--m); } .dark-mode .svc-map-wrap > div { background: #141826 !important; } .dark-mode .svc-map-wrap svg rect[fill="#F7F8FC"] { fill: #141826; } .dark-mode .nbr-pill { background: #141826; border-color: var(--bd); color: var(--m); } /* ── Stats bar (about page) ── */ .dark-mode .stats-bar { background: #090d15; } .dark-mode .sb-num { color: #fff; } .dark-mode .sb-lbl { color: rgba(168,200,236,.55); } /* ── Headings global ── */ .dark-mode h1, .dark-mode h2, .dark-mode h3, .dark-mode h4 { color: var(--n); } .dark-mode .sh, .dark-mode .sec-h { color: var(--n); } .dark-mode .sec-p, .dark-mode .sp { color: var(--m); } .dark-mode .ey span { background: var(--a); } /* ── Dark mode toggle button ── */ .dark-mode-btn { display: flex; align-items: center; gap: 6px; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.15); border-radius: 50px; padding: 4px 12px 4px 8px; cursor: pointer; font-family: 'DM Sans', sans-serif; font-size: 12px; font-weight: 600; color: rgba(255,255,255,.75); transition: all .25s; flex-shrink: 0; white-space: nowrap; } .dark-mode-btn:hover { background: rgba(255,255,255,.14); color: #fff; } .dark-mode-btn .dmb-icon { width: 22px; height: 22px; border-radius: 50%; background: rgba(255,255,255,.15); display: flex; align-items: center; justify-content: center; font-size: 11px; transition: transform .35s; } .dark-mode .dark-mode-btn .dmb-icon { background: rgba(200,129,58,.25); color: var(--a); transform: rotate(180deg); } .dark-mode .dark-mode-btn .dmb-label-dark { display: none; } .dark-mode .dark-mode-btn .dmb-label-light { display: inline; } html:not(.dark-mode) .dark-mode-btn .dmb-label-dark { display: inline; } html:not(.dark-mode) .dark-mode-btn .dmb-label-light { display: none; } /* ── Inline white-bg card dark overrides ── */ .dark-mode [style*="background:#fff;border-radius"], .dark-mode [style*="background:#fff; border-radius"] { background: #141826 !important; }