/** * EM Child — Section Background Utility System * * Three background levels for Elementor sections/containers: light / neutral / dark. * Classes are assigned MANUALLY by the editor in Elementor: * Advanced tab -> CSS Classes -> section-bg--light | section-bg--neutral | section-bg--dark * This file only defines the system — classes are NEVER applied to sections * automatically (no nth-child alternation, no PHP filters). * * How text recolors: * Soledad's own theme CSS colors native content via var(--pctext-cl) / * var(--pcheading-cl) / var(--pcmeta-cl), and Elementor's default-styled * widgets color via var(--e-global-color-text) / var(--e-global-color-primary) * / var(--e-global-color-secondary), both inherited from (kit class * elementor-kit-118). Redeclaring those SAME variable names on a * .section-bg--* element overrides them for everything inside that section * via normal inheritance — no specificity fight, no !important needed. This * is the same technique Soledad's own sitewide dark-mode toggle uses, and * the same technique typography.css already uses for font variables. * * Known limitation: an Elementor widget with an EXPLICIT custom color picked * in its own color control (not "Global Color") generates a hardcoded rule * that no variable override or generic selector can reach. This utility is * for plain content sections (text blocks, feature grids, WooCommerce * listings) using default widget styling — not bespoke hero/slider sections * that already have deliberate per-widget colors. * * !important note: * background-color below still needs !important: if an editor ALSO sets a * background directly via Elementor's own Background control, Elementor * generates .elementor-{kit_id} .elementor-element.elementor-element-{id} * { background-color: ... } at specificity (0,3,0) on the SAME element — * a plain utility class (0,1,0) cannot win that regardless of load order. * The explicit h1-h6/p/a/meta color rules below also carry !important, as a * fallback net for plain-markup text the variable bridge doesn't reach — * without it they lose to Elementor's later-loaded, equal-specificity CSS * (em-child-sections loads before Elementor's own generated CSS in ), * the same issue typography.css documents and solves the same way. */ :root { --sbg-light: #ffffff; --sfg-light: #313131; --sfg-light-heading: #313131; --sfg-light-meta: #6d6d6d; --sfg-light-accent: #4f9670; --sbg-neutral: #f3f3f1; --sfg-neutral: #313131; --sfg-neutral-heading: #313131; --sfg-neutral-meta: #5c5c5c; --sfg-neutral-accent: #4f9670; --sbg-dark: #222222; --sfg-dark: #f2f2f2; --sfg-dark-heading: #f2f2f2; --sfg-dark-meta: #b5b5b5; --sfg-dark-accent: #8fd1ab; } .section-bg--light { background-color: var(--sbg-light) !important; color: var(--sfg-light); /* Bridge: repoint Soledad's own theme color variables so native content (post body, WooCommerce, widgets) inherits correctly within this section */ --pctext-cl: var(--sfg-light); --pcheading-cl: var(--sfg-light-heading); --pcmeta-cl: var(--sfg-light-meta); --pcaccent-cl: var(--sfg-light-accent); /* Bridge: repoint Elementor's global kit color variables so default-styled Elementor widgets inherit correctly within this section */ --e-global-color-text: var(--sfg-light); --e-global-color-primary: var(--sfg-light-accent); --e-global-color-secondary: var(--sfg-light-heading); } .section-bg--light h1, .section-bg--light h2, .section-bg--light h3, .section-bg--light h4, .section-bg--light h5, .section-bg--light h6, .section-bg--light p { color: var(--sfg-light) !important; } .section-bg--light a { color: var(--sfg-light-accent) !important; } .section-bg--light .elementor-post-info, .section-bg--light .post-meta, .section-bg--light small { color: var(--sfg-light-meta) !important; } .section-bg--neutral { background-color: var(--sbg-neutral) !important; color: var(--sfg-neutral); --pctext-cl: var(--sfg-neutral); --pcheading-cl: var(--sfg-neutral-heading); --pcmeta-cl: var(--sfg-neutral-meta); --pcaccent-cl: var(--sfg-neutral-accent); --e-global-color-text: var(--sfg-neutral); --e-global-color-primary: var(--sfg-neutral-accent); --e-global-color-secondary: var(--sfg-neutral-heading); } .section-bg--neutral h1, .section-bg--neutral h2, .section-bg--neutral h3, .section-bg--neutral h4, .section-bg--neutral h5, .section-bg--neutral h6, .section-bg--neutral p { color: var(--sfg-neutral) !important; } .section-bg--neutral a { color: var(--sfg-neutral-accent) !important; } .section-bg--neutral .elementor-post-info, .section-bg--neutral .post-meta, .section-bg--neutral small { color: var(--sfg-neutral-meta) !important; } .section-bg--dark { background-color: var(--sbg-dark) !important; color: var(--sfg-dark); --pctext-cl: var(--sfg-dark); --pcheading-cl: var(--sfg-dark-heading); --pcmeta-cl: var(--sfg-dark-meta); --pcaccent-cl: var(--sfg-dark-accent); --e-global-color-text: var(--sfg-dark); --e-global-color-primary: var(--sfg-dark-accent); --e-global-color-secondary: var(--sfg-dark-heading); } .section-bg--dark h1, .section-bg--dark h2, .section-bg--dark h3, .section-bg--dark h4, .section-bg--dark h5, .section-bg--dark h6, .section-bg--dark p { color: var(--sfg-dark) !important; } .section-bg--dark a { color: var(--sfg-dark-accent) !important; } .section-bg--dark .elementor-post-info, .section-bg--dark .post-meta, .section-bg--dark small { color: var(--sfg-dark-meta) !important; }