/* ===================================================================== SMARTLY WEBBeD — DARK MODE Load this file AFTER style.css on every page. Toggling (or "light"/removed) switches themes. See dark-mode-toggle.js for the button logic. ===================================================================== */ /* ── Dark mode toggle button ── Visible in both themes (not scoped to [data-theme="dark"]). Mirrors the existing .menu-toggle glass style so it matches the hamburger icon. */ .dark-toggle { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 999px; background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.14); color: #fff; font-size: 16px; cursor: pointer; transition: background 0.2s ease, border-color 0.2s ease; } .dark-toggle:hover { background: rgba(255, 255, 255, 0.12); border-color: rgba(255, 255, 255, 0.22); } @media (max-width: 768px) { .mobile-actions .dark-toggle { margin-bottom: 10px; } } /* ── Service detail pages: inline-styled body copy ── development.php, marketing.php, ai-solutions.php, design-and-branding.php, e-commerce.php, growth-solutions.php all hardcode paragraph/list text as inline style="color:#4b5563" attributes rather than a class. A stylesheet selector can never beat an inline style without !important, so this is the one place in the file that needs it. [style*="color"] only matches elements whose inline style actually sets a color, so it won't touch unrelated inline styles like width/margin. */ [data-theme="dark"] .service-section [style*="color"] { color: var(--dm-text) !important; } /* ── Blog index page (blog.php) ── */ [data-theme="dark"] .blog-hero h1, [data-theme="dark"] .blog-hero p { color: var(--dm-text); } [data-theme="dark"] .blog-filter-btn { color: var(--dm-text); } [data-theme="dark"] .blog-filter-btn.active, [data-theme="dark"] .blog-filter-btn:hover { color: #fff; } [data-theme="dark"] .blog-card { background: var(--dm-card); border-color: var(--dm-border); } [data-theme="dark"] .blog-card h3, [data-theme="dark"] .blog-card p, [data-theme="dark"] .blog-card-cta { color: var(--dm-text); } /* ── Individual blog post pages (blog-post-styles.php) ── */ [data-theme="dark"] .post-hero h1 { color: var(--dm-text); } [data-theme="dark"] .post-body, [data-theme="dark"] .post-body h2, [data-theme="dark"] .post-body strong, [data-theme="dark"] .post-body tbody td:first-child { color: var(--dm-text); } [data-theme="dark"] .post-body hr { border-top-color: var(--dm-border); } [data-theme="dark"] .post-body th, [data-theme="dark"] .post-body td { border-bottom-color: var(--dm-border); } [data-theme="dark"] .post-body tbody tr:nth-child(even) { background: var(--dm-card-alt); } [data-theme="dark"] .post-callout { background: linear-gradient(90deg, var(--dm-card), var(--dm-card-alt)); } [data-theme="dark"] .post-callout p { color: var(--dm-text); } [data-theme="dark"] .post-cta { background: var(--dm-card); } [data-theme="dark"] .post-cta h3 { color: var(--dm-text); } [data-theme="dark"] .post-cta p { color: var(--dm-text-muted); } :root { --dm-bg: #121212; /* page background */ --dm-bg-alt: #181818; /* alternate section background (was #f9fafb) */ --dm-card: #1e1e1e; /* card / panel background (was #fff, #f5f5f5) */ --dm-card-alt: #232323; /* secondary card tone (was #eeeeee) */ --dm-border: #333333; /* borders (was #eeeeee, #e0e0e0, #e5e7eb) */ --dm-border-soft: #2a2a2a; --dm-text: #e8e8e8; /* body/heading text (was #4b5563, #000, #374151) */ --dm-text-muted: #a3a3a3;/* secondary text (was #999, #ccc, #bdbdbd) */ --dm-icon-tint: #3a2b12; /* dark equivalent of #ffedd5 icon boxes */ } /* ── Page base ── */ [data-theme="dark"] body { background: var(--dm-bg); color: var(--dm-text); } /* ── Header / nav ── Already dark (glass-on-black gradient), no change needed. Logo/nav text already white/gold. */ /* ── Marquee strip ── already #111 background — no change needed. */ /* ── About section (page-top black band) ── already #000 — no change. */ /* ── Services grid (homepage 6-card section) ── */ [data-theme="dark"] .services-section { background: var(--dm-bg); } [data-theme="dark"] .section-title h2, [data-theme="dark"] .section-title p { color: var(--dm-text); } [data-theme="dark"] .service-card { background: linear-gradient(90deg, var(--dm-card), var(--dm-card-alt)); border-color: var(--dm-border); } [data-theme="dark"] .service-card h3, [data-theme="dark"] .service-card p, [data-theme="dark"] .service-card .service-list li { color: var(--dm-text); } @media (min-width: 768px) { [data-theme="dark"] .services-section .service-arrow::after { background: linear-gradient(180deg, var(--dm-card-alt), var(--dm-card)); } } [data-theme="dark"] .services-section .services-dot { background: #3a3a3a; } /* ── Why Choose section ── */ [data-theme="dark"] .why-choose-section { background: var(--dm-bg); color: var(--dm-text); } [data-theme="dark"] .why_choose_list_top p { color: var(--dm-text); } [data-theme="dark"] .why-choose-content h2, [data-theme="dark"] .why-choose-content p, [data-theme="dark"] .why-choose-list li, [data-theme="dark"] .why-choose-list li .why-choose-sub { color: var(--dm-text); } [data-theme="dark"] .why-choose-list li::after { background: linear-gradient(180deg, var(--dm-card) 0%, var(--dm-card-alt) 100%); } /* ── Testimonials ── */ [data-theme="dark"] .testimonial-section { background: var(--dm-bg); } [data-theme="dark"] .section-heading h2, [data-theme="dark"] .section-heading p { color: var(--dm-text); } [data-theme="dark"] .testimonial-item { background: linear-gradient(180deg, var(--dm-card), var(--dm-card-alt)); } [data-theme="dark"] .testimonial-text, [data-theme="dark"] .testimonial-footer h3, [data-theme="dark"] .testimonial-footer span { color: var(--dm-text); } [data-theme="dark"] .testimonial-footer { border-top-color: var(--dm-border); } /* ── CTA band ── already gold gradient, white text — no change needed. */ /* ── Mission / Vision ── */ [data-theme="dark"] .mission-vision-section { background: var(--dm-bg); } [data-theme="dark"] .info-card { background: linear-gradient(180deg, var(--dm-card), var(--dm-card-alt)); border-color: var(--dm-border); } [data-theme="dark"] .info-card p { color: var(--dm-text); } [data-theme="dark"] .icon-box { background: var(--dm-icon-tint); } /* ── Core Values ── */ [data-theme="dark"] .core-values-section { background: var(--dm-bg-alt); } [data-theme="dark"] .section-heading p { color: var(--dm-text); } [data-theme="dark"] .value-card { background: linear-gradient(135deg, var(--dm-card), var(--dm-card-alt)); border-color: var(--dm-border); } [data-theme="dark"] .value-card h3, [data-theme="dark"] .value-card p, [data-theme="dark"] .value-card ul li { color: var(--dm-text); } [data-theme="dark"] .value-icon { background: var(--dm-icon-tint); } /* ── About trust bar (stat counters) ── */ [data-theme="dark"] .about-trust-bar { background: var(--dm-bg-alt); border-color: var(--dm-border); } [data-theme="dark"] .atb-label { color: var(--dm-text-muted); } [data-theme="dark"] .atb-divider { background: var(--dm-border); } /* ── Differentiator table ── */ [data-theme="dark"] .diff-section { background: var(--dm-bg-alt); } [data-theme="dark"] .diff-row { border-top-color: var(--dm-border); } [data-theme="dark"] .diff-row:last-child { border-bottom-color: var(--dm-border); } [data-theme="dark"] .diff-label span { color: var(--dm-text); } [data-theme="dark"] .diff-points span { background: var(--dm-card); border-color: var(--dm-border); color: var(--dm-text-muted); } /* ── Service detail pages: sidebar quicklinks ── */ [data-theme="dark"] .services-quicklinks { background: var(--dm-card); border-color: var(--dm-border); } [data-theme="dark"] .sql-link { background: linear-gradient(180deg, var(--dm-card-alt) 20%, var(--dm-card) 80%); border-color: var(--dm-border); color: var(--dm-text); } [data-theme="dark"] .sql-link:hover { background: #2a2016; border-color: #6b4a10; } [data-theme="dark"] .sql-cta { border-top-color: var(--dm-border); } [data-theme="dark"] .sql-cta p { color: var(--dm-text); } @media (max-width: 1024px) { [data-theme="dark"] .sql-link { background: var(--dm-card-alt); border-color: var(--dm-border); } } /* ── Service detail body copy ── */ [data-theme="dark"] .service-content h2, [data-theme="dark"] .subtitle, [data-theme="dark"] .feature-list li, [data-theme="dark"] .intro-blurb-text, [data-theme="dark"] .journey-content h2, [data-theme="dark"] .journey-content p, [data-theme="dark"] .journey-location span { color: var(--dm-text); } [data-theme="dark"] .intro-blurb-section { background: var(--dm-bg); } [data-theme="dark"] .intro-blurb-box { background: linear-gradient(180deg, var(--dm-card), var(--dm-card-alt)); } [data-theme="dark"] .journey-section { background: var(--dm-bg); } /* ── Process section ── already #000 — no change needed. */ /* ── FAQ ── */ [data-theme="dark"] .faq-title h2, [data-theme="dark"] .faq-title p { color: var(--dm-text); } [data-theme="dark"] .faq-item { background: linear-gradient(180deg, var(--dm-card) 0%, var(--dm-card-alt) 100%); border-color: var(--dm-border); } [data-theme="dark"] .faq-question, [data-theme="dark"] .faq-answer p { color: var(--dm-text); } [data-theme="dark"] .faq-tab-btn { background: linear-gradient(180deg, var(--dm-card-alt), var(--dm-card)); border-color: var(--dm-border); color: var(--dm-text); } [data-theme="dark"] .faq-tab-btn:hover { background: #2a2016; } [data-theme="dark"] .faq-tab-btn:not(.active) .faq-count-badge { background: var(--dm-icon-tint); } [data-theme="dark"] .faq-cat-header { border-bottom-color: var(--dm-border); } [data-theme="dark"] .faq-cat-icon { background: var(--dm-icon-tint); } [data-theme="dark"] .faq-cat-title h3, [data-theme="dark"] .faq-cat-title p { color: var(--dm-text); } /* ── Founder card ── */ [data-theme="dark"] .founder-section { background: var(--dm-bg-alt); } [data-theme="dark"] .founder-section .section-heading h2, [data-theme="dark"] .founder-section .section-heading p { color: var(--dm-text); } [data-theme="dark"] .founder-card { background: var(--dm-card); border-color: var(--dm-border); } [data-theme="dark"] .fc-body { background: var(--dm-card); } [data-theme="dark"] .fc-name, [data-theme="dark"] .fc-title, [data-theme="dark"] .fc-location, [data-theme="dark"] .fc-bio { color: var(--dm-text); } [data-theme="dark"] .fc-divider { background: var(--dm-border); } /* ── Case studies ── */ [data-theme="dark"] .case-studies-section { background: var(--dm-bg); } [data-theme="dark"] .case-studies-section .section-title h1 { color: var(--dm-text); } [data-theme="dark"] .case-study-item { background: linear-gradient(180deg, var(--dm-card), var(--dm-card-alt)); border-color: var(--dm-border); } [data-theme="dark"] .csq-title, [data-theme="dark"] .case-study-answer-inner p, [data-theme="dark"] .case-study-answer-inner ul li { color: var(--dm-text); } [data-theme="dark"] .case-study-meta { border-color: var(--dm-border); } [data-theme="dark"] .case-study-meta li, [data-theme="dark"] .case-study-meta li strong { color: var(--dm-text) !important; } [data-theme="dark"] .case-study-quote { background: var(--dm-card); border-color: var(--dm-border); } [data-theme="dark"] .case-study-quote p { color: var(--dm-text); } [data-theme="dark"] .case-study-quote span small { color: var(--dm-text-muted); } /* ── Blog-at-a-glance (reuses .service-card, .blog-glance-*) ── */ [data-theme="dark"] .blog-glance-section { background: var(--dm-bg); } [data-theme="dark"] .blog-glance-meta .dot { background: #555; } [data-theme="dark"] .blog-glance-meta .muted { color: var(--dm-text-muted); } [data-theme="dark"] .blog-glance-card:hover { border-color: var(--dm-border); } /* ── Portfolio ── */ [data-theme="dark"] .portfolio-section { background: var(--dm-bg-alt); } [data-theme="dark"] .portfolio-card { background: var(--dm-card); } [data-theme="dark"] .card-content h3 { color: var(--dm-text); } [data-theme="dark"] .card-content p { color: var(--dm-text-muted); } [data-theme="dark"] .tags span { background: var(--dm-card-alt); color: var(--dm-text-muted); } /* ── Generic ".para" body copy blocks ── */ [data-theme="dark"] .para p, [data-theme="dark"] .para ul li { color: var(--dm-text); } /* ── Contact section ── already dark (#111/#000 gradient) with dark form fields — no change needed. */ [data-theme="dark"] .contact-list li, [data-theme="dark"] .contact-list li a { color: var(--dm-text); } /* ── Footer ── already dark text-on-dark by design — no change needed. */ /* ── Hero ── already #000 — no change needed. */