/* ========================================================================== Sully's — Elementor colour bridge Two jobs: 1. Override Elementor's 4 default Global Colour CSS variables so they resolve to our themed tokens. After this, whenever you pick "Primary", "Secondary", "Text" or "Accent" from any widget's colour picker, the colour will automatically swap when the user toggles blue ⇄ red. 2. Provide a small set of utility classes that you can drop into any widget or container's Advanced > CSS Classes field for the cases Elementor's 4 globals don't cover (page bg, alt bg, accent bg, the hot/soft accent colours, muted text, border colour). Loaded AFTER Elementor's own CSS in functions.php so these win on specificity / load order. ========================================================================== */ /* ========================================================================== PART 1 — Bridge Elementor's Global Colours The actual variable overrides for both default (Primary/Secondary/Text/ Accent) and any custom Globals are emitted dynamically by PHP in functions.php — see sullys_build_global_colors_bridge_css(). Why PHP and not static CSS here: Elementor scopes its kit CSS variables inside `.elementor-kit-{post_id}` (a class on ) rather than `:root`. To win the cascade we have to match that selector, and the post_id is only known at runtime. Default Global mapping — for reference / when you change colour pickers: Primary → --fg-heading (sky → orange) Secondary → --accent-hot (orange → peach) Text → --fg-primary (sky → orange) Accent → --accent-soft (peach → yellow) Custom Global mapping is in functions.php — search "$sullys_custom_color_map". ========================================================================== */ /* ========================================================================== PART 2 — Utility classes for direct use in Elementor Add the matching class to a widget's Advanced > CSS Classes field. USAGE EXAMPLES IN ELEMENTOR ──────────────────────────────────────────────────── Container background that themes: Container > Advanced > CSS Classes: bg-accent (The container will be cream regardless of theme — used for content sections that should always be light.) Container > Advanced > CSS Classes: bg-page (Container matches the page background — navy in blue theme, maroon in red theme.) Text colour that themes: Heading widget > Advanced > CSS Classes: fg-heading Text Editor widget > Advanced > CSS Classes: fg-primary Border colour that themes: Container > Advanced > CSS Classes: border-subtle (Subtle border that adapts to the theme.) IMPORTANT — Setting widget colour to "Default": For a class to colour a widget, the widget's own colour control must be left at the default / not set. If you also set a colour in the Style tab, the widget's setting wins (because it loads later). ========================================================================== */ /* ---- Backgrounds ---- */ .bg-page { background-color: var(--bg-page) !important; } .bg-alt { background-color: var(--bg-alt) !important; } .bg-accent { background-color: var(--bg-accent) !important; } .bg-banner { background-color: var(--banner-bg) !important; } /* ---- Text colours ---- */ .fg-primary { color: var(--fg-primary) !important; } .fg-heading { color: var(--fg-heading) !important; } .fg-muted { color: var(--fg-muted) !important; } .fg-on-accent { color: var(--fg-on-accent) !important; } /* navy text on cream bg */ .fg-banner { color: var(--banner-fg) !important; } .fg-accent-hot { color: var(--accent-hot) !important; } /* small dots, ornaments */ .fg-accent-soft { color: var(--accent-soft) !important; } /* peach/yellow accents */ /* ---- Borders ---- */ .border-subtle { border-color: var(--border-subtle) !important; } .border-form { border-color: var(--form-border) !important; } /* ---- Combined helpers (common pairings) ---- */ .theme-section { background-color: var(--bg-page); color: var(--fg-primary); } .theme-section-alt { background-color: var(--bg-alt); color: var(--fg-primary); } .theme-section-accent { background-color: var(--bg-accent); color: var(--fg-on-accent); } /* ========================================================================== PART 3 — Make Elementor's "default" colour states honour the theme When a widget has no colour set explicitly, Elementor inherits from its parent. These rules give Elementor's standard wrappers the right themed defaults so an unstyled heading on an unstyled container looks correct out of the box. Each rule targets only Elementor wrappers — no native HTML overrides. ========================================================================== */ .elementor-widget-heading .elementor-heading-title:not([style*="color"]) { color: var(--fg-heading); } .elementor-widget-text-editor:not([style*="color"]) { color: var(--fg-primary); }