/* ===================================================================== service-pages-dark.css ONE shared dark-mode fix file for the custom (non-template) pages: /services/data-ai data-analytics.php cybersecurity.php business-consultancy.php mob-applications.php digital-marketing.php cloud-services.php web-app.php managed-it-services.php branding.php services.php (the /services landing page) Why this is safe for every other page: each rule needs BOTH 1. [data-bs-theme="dark"] -> the template's dark switch (on ) 2. .sp-header / .sp-page -> classes that only these pages have So light mode and all template pages are untouched. Root cause: in dark mode the template flips its colour variables (body text -> #EFEFEF, "common-black" -> #FFF). These pages keep LIGHT backgrounds (#fff, #eef3fb, #f7f9fc ...), so any text that takes its colour from the template becomes white-on-light = invisible. To add another custom page later: put class "sp-page" on its
, set $headerClass = 'sp-header' and $pageCss = 'service-pages-dark.css' before including header2.php. No CSS changes needed. ===================================================================== */ /* --------------------------------------------------------------------- 1. HEADER (class "sp-header" on
) .header-transparent is position:absolute, so
itself has no height. The black background must go on .at-header-area. --------------------------------------------------------------------- */ [data-bs-theme="dark"] .sp-header .at-header-area { background-color: #000; } [data-bs-theme="dark"] .sp-header .at-main-menu nav ul li a, [data-bs-theme="dark"] .sp-header .at-main-menu nav ul li a:hover { color: #fff; } /* --------------------------------------------------------------------- 2. "HOW IT WORKS" detail card (data-analytics + mob-applications) The
and the inside .st-offering-details have no colour of their own, so they turn near-white on the white card. --------------------------------------------------------------------- */ [data-bs-theme="dark"] .sp-page .st-offering-details { color: #07145f; /* the bare inherits this */ } [data-bs-theme="dark"] .sp-page .st-offering-details h5 { color: #11134f; } [data-bs-theme="dark"] .sp-page .st-offering-details p, [data-bs-theme="dark"] .sp-page .st-offering-details li { color: #3b4466; } /* --------------------------------------------------------------------- 3. SAFETY NET for every section that keeps a LIGHT background. Uses :where() so these rules have very LOW specificity: they only fill in text that has no colour of its own, and never override colours already set by your own classes. Text added to these sections later is visible automatically. Light sections covered: hero ........................ .sharktech-service-data-hero data-analytics .............. .sharktech-industries-section, .st-offerings-wrapper, .data-graph-section cybersecurity / consultancy . .cyber-services-wrapper, .what-we-do-not-do-section business-consultancy ........ .managed-it-intro, .bc-paths, .bc-ind, .st-itx-section, .st-compare-section managed-it-services ......... .st-ai-control --------------------------------------------------------------------- */ :where([data-bs-theme="dark"] .sp-page :is( .sharktech-service-data-hero, .sharktech-industries-section, .st-offerings-wrapper, .data-graph-section, .cyber-services-wrapper, .what-we-do-not-do-section, .managed-it-intro, .bc-paths, .bc-ind, .st-itx-section, .st-compare-section, .st-ai-control )) { color: #11134f; } :where([data-bs-theme="dark"] .sp-page :is( .sharktech-service-data-hero, .sharktech-industries-section, .st-offerings-wrapper, .data-graph-section, .cyber-services-wrapper, .what-we-do-not-do-section, .managed-it-intro, .bc-paths, .bc-ind, .st-itx-section, .st-compare-section, .st-ai-control )) :is(h1, h2, h3, h4, h5, h6) { color: #11134f; } :where([data-bs-theme="dark"] .sp-page :is( .sharktech-service-data-hero, .sharktech-industries-section, .st-offerings-wrapper, .data-graph-section, .cyber-services-wrapper, .what-we-do-not-do-section, .managed-it-intro, .bc-paths, .bc-ind, .st-itx-section, .st-compare-section, .st-ai-control )) :is(p, li, label) { color: #3b4466; } /* --------------------------------------------------------------------- 4. SERVICES LANDING PAGE (services.php) Its light sections (white / #f5f5f5 / #f7f8fb) show template headings and labels (

,

, .common-black) whose colours come from the template's variables, and those turn near-white in dark mode. Instead of recolouring element by element, we re-declare the template's LIGHT palette on those sections only (the same idea as the template's own .changeless class). Every template-coloured element inside them then looks exactly as it does in light mode, including text added later. Hero, FAQ and the CTA are theme-aware or already fixed, so they are not listed here. --------------------------------------------------------------------- */ [data-bs-theme="dark"] .sp-page :is( .st-service-lines, .engagement-section, .service-why-sharktech, .ai-capabilities-section ) { --at-common-white: #ffffff; --at-common-white-rgb: 255, 255, 255; --at-common-black: #1e1e1e; --at-common-black-rgb: 30, 30, 30; --at-neutral-0: #fefefe; --at-neutral-0-rgb: 254, 254, 254; --at-neutral-50: #f2f2f2; --at-neutral-50-rgb: 242, 242, 242; --at-neutral-100: #dfdfdf; --at-neutral-200: #cdcccc; --at-neutral-300: #b7b7b7; --at-neutral-500: #585959; --at-neutral-700: #303030; --at-neutral-800: #212121; --at-neutral-900: #1d1d1d; --at-neutral-950: #0f0f0f; } /* --------------------------------------------------------------------- Not touched on purpose (already fine in dark mode): - dark sections with their own background + explicit text colours: .sharktech-core-section, .st-engagement-section, .glowing-card-section, .bc-cppd, .sharktech-branding-section, .st-cta-section - .faq-platform / .sec-8-home-12 (theme variables for BOTH background and text, so it flips correctly) --------------------------------------------------------------------- */