/* ========================================================================== dark.css — opt-in dark theme for WGS Global Services -------------------------------------------------------------------------- Loaded after site.css + mobile.css. EVERYTHING is scoped to html.wgs-dark, which a small script in Base.astro sets from the saved preference (default: light). The original Elementor design themes itself through ~10 `var( --e-global-color-* )` tokens used ~3000 times, so re-mapping those on sweeps most surfaces; the rest are targeted patches below. ========================================================================== */ html.wgs-dark { color-scheme: dark; background: #14161c; } /* -------------------------------------------------------------------------- 1. Re-map Elementor's global color tokens. Defined on body (.elementor-kit-115); we override on `html.wgs-dark body` (higher specificity, same element) so every descendant inherits dark values. Tokens are remapped for their DOMINANT role; double-duty ones are patched in later sections. -------------------------------------------------------------------------- */ html.wgs-dark body { background-color: #14161c !important; color: #c6ccd8 !important; --e-global-color-text: #c6ccd8; /* body text (slate -> light) */ --e-global-color-primary: #e9edf4; /* headings (navy -> near-white) */ --e-global-color-secondary: #1c2030; /* light surfaces -> dark surface */ --e-global-color-764183d: #1c2030; /* near-white surface -> dark */ --e-global-color-c696dce: #1c2030; /* white surface -> dark */ --e-global-color-57c8da2: #c6ccd8; /* near-black text -> light */ --e-global-color-accent: #6f9bff; /* blue, lightened for contrast */ /* kept as-is (used as light foreground): d6cea4e (#fff), 14ef391 (#C8D5DC) */ } /* -------------------------------------------------------------------------- 2. Headings & links -------------------------------------------------------------------------- */ html.wgs-dark .elementor-heading-title { color: #eef1f6; } html.wgs-dark a { color: #7aa6ff; } html.wgs-dark a:hover { color: #a9c6ff; } /* -------------------------------------------------------------------------- 3. Conflict patches — tokens used as BOTH text and background. `primary` is now light, so elements that used it as a *background* (stacked icon chips, drop caps) would turn light; give them a dark/accent surface so their light glyph still reads. -------------------------------------------------------------------------- */ html.wgs-dark .elementor-view-stacked .elementor-icon { background-color: #2b3450 !important; color: #eaf0ff !important; } html.wgs-dark .elementor-drop-cap { background-color: #2b3450 !important; color: #eaf0ff !important; } /* -------------------------------------------------------------------------- 4. Header & footer (brand purple bars) — keep their identity, just make sure text/links stay light on top of them. -------------------------------------------------------------------------- */ html.wgs-dark header.elementor-location-header, html.wgs-dark footer.elementor-location-footer { background-color: #2a0530; } html.wgs-dark footer.elementor-location-footer, html.wgs-dark footer.elementor-location-footer .elementor-heading-title, html.wgs-dark footer.elementor-location-footer a, html.wgs-dark footer.elementor-location-footer .elementor-icon-list-text { color: #e9e1ef; } html.wgs-dark footer.elementor-location-footer a:hover { color: #ffffff; } /* -------------------------------------------------------------------------- 5a. Hardcoded light SECTION backgrounds (literal #F3F5F8 / #FFFFFF that the token remap can't reach). These are the only such sections site-wide. -------------------------------------------------------------------------- */ html.wgs-dark .elementor-145 .elementor-element.elementor-element-a0310a3, html.wgs-dark .elementor-145 .elementor-element.elementor-element-77f4d412 { background-color: #1a1d27 !important; /* alternating gray sections */ } html.wgs-dark .elementor-173 .elementor-element.elementor-element-14ccc4a0, html.wgs-dark .elementor-173 .elementor-element.elementor-element-2ed24146, html.wgs-dark .elementor-173 .elementor-element.elementor-element-30c7fd5b, html.wgs-dark .elementor-226 .elementor-element.elementor-element-67d54f4 { background-color: #14161c !important; /* white sections -> page base */ } /* The About "Trusted By" logo wall stays on a light card: several partner logos are dark-on-transparent and would vanish on a dark surface. */ html.wgs-dark .elementor-157 .elementor-element.elementor-element-5ee47445 > .elementor-widget-container { background-color: #eef1f5 !important; } /* 5b. Cards & components (announcement/article cards, CTAs, testimonials) — elevate above the page with a lighter dark surface + soft border. */ html.wgs-dark .elementor-posts .elementor-post__card, html.wgs-dark .elementor-post, html.wgs-dark .elementor-cta--skin-classic .elementor-cta__content, html.wgs-dark .elementor-testimonial--skin-bubble .elementor-testimonial__content { background-color: #1c2030 !important; border-color: rgba(255, 255, 255, 0.08) !important; color: #c6ccd8 !important; } html.wgs-dark .elementor-testimonial--skin-bubble .elementor-testimonial__content:after { border-top-color: #1c2030 !important; /* speech-bubble pointer */ } /* 5c. Page-banner decorative background image (the light-purple wave behind page headings) — render dark via a brightness filter on its ::before. */ html.wgs-dark .elementor:not(.elementor-location-header):not(.elementor-location-footer) .e-con::before { filter: brightness(0.3) saturate(1.08); } /* 5d. Testimonials — the section uses the kept-white `d6cea4e` token as a background (so the token remap leaves it white), and only one of the two testimonial cards carries an explicit background. Darken the section to the page base and give every testimonial card the same elevated surface so they read as a consistent pair (their soft purple glow is kept). */ html.wgs-dark .elementor-145 .elementor-element.elementor-element-62701f3 { background-color: #14161c !important; } html.wgs-dark .elementor-widget-testimonial > .elementor-widget-container { background-color: #1c2030 !important; } /* -------------------------------------------------------------------------- 6. Forms (Forminator) — restyled in Base.astro with light surfaces; invert. -------------------------------------------------------------------------- */ html.wgs-dark .forminator-ui.forminator-custom-form { background-color: #181b27 !important; border-color: rgba(255, 255, 255, 0.08) !important; } html.wgs-dark .forminator-ui.forminator-custom-form label, html.wgs-dark .forminator-ui.forminator-custom-form .forminator-description { color: #c6ccd8 !important; } html.wgs-dark .forminator-ui.forminator-custom-form input, html.wgs-dark .forminator-ui.forminator-custom-form textarea, html.wgs-dark .forminator-ui.forminator-custom-form select, html.wgs-dark .forminator-ui.forminator-custom-form .forminator-textarea { background-color: #232838 !important; color: #eaedf4 !important; border-color: rgba(255, 255, 255, 0.16) !important; } html.wgs-dark .forminator-ui.forminator-custom-form ::placeholder { color: #828ca2 !important; } html.wgs-dark .forminator-ui.forminator-custom-form input[type="file"] { background-color: #232838 !important; color: #c6ccd8 !important; } /* -------------------------------------------------------------------------- 7. Mobile success card (Base.astro) on dark -------------------------------------------------------------------------- */ html.wgs-dark .wgs-form-success { background-color: #181b27 !important; } html.wgs-dark .wgs-form-success__title { color: #eef1f6 !important; } html.wgs-dark .wgs-form-success__msg { color: #c6ccd8 !important; }