/* * SIA Elements — base widget guards. * * Universal rule applied to every SIA widget's root element: * - `max-width: 100%` — never overflows the parent column horizontally. * - `box-sizing: border-box` — padding + border counted INSIDE the * width budget instead of being added on top. * * Targets root containers ONLY (no universal descendant `*` rule — that * would compete with widget-specific sizing on icons, fixed-width logos, * etc.). New widgets should add their root selector here as the plugin grows. * * Loaded at plugin level (registered as `sia-base` and added as a style * dependency by every widget that loads its own CSS). */ /* Widget root containers + outer wrappers for SIA widgets */ .sia-cta, .sia-cta-wrap, .sia-cta__list, .sia-pcg, .sia-pcg__list, .sia-rg, .sia-rg-wrap, .sia-rc, .sia-rm, .sia-rb, .sia-rb-wrap, .sia-bm, .sia-sg, .sia-mq, .sia-tm-card, .sia-tm-grid, .sia-tm-carousel, .sia-ib-card, .sia-ib-grid, .sia-ib-carousel, .sia-ci, .sia-dh, .sia-heading, .sia-card-wrap, .sia-nb, .sia-lb, .sia-atc, .sia-atc-wrap, .sia-fc, .sia-fcg, .sia-gm, .sia-bp, .sia-il, .sia-tg, .sia-fl, .sia-lg, .sia-tms, .sia-cg, .sia-c3, .sia-bc { max-width: 100%; box-sizing: border-box; } /* Images inside SIA widgets — guard against intrinsic dimensions blowing out a flex/grid cell. The leading `body ` is REQUIRED: without it, `[class^="sia-"] img` matches every image on the page whenever a sibling SIA plugin (e.g. sia-accessibility) adds a sia-*-prefixed class to , turning this scoped guard into a global one. is not a descendant of , so `body ` confines it to real in-page SIA widgets. */ body [class*=" sia-"] img, body [class^="sia-"] img { max-width: 100%; } /* --- Theme color fallback chains (v3.20.4 + extended v3.20.5) --- SIA widgets pick brand + text colors via these chains. Each one tries the Blocksy theme variable first (set automatically by Blocksy on body from Customizer → Colors), then Elementor's Global Colors equivalent (set from Site Settings → Global Colors), then a hardcoded fallback hex. Defined on :root so the value cascades to every widget instance. Per-widget CSS uses `var(--sia-color-X, #widget-specific-hex)` so even if this :root rule somehow doesn't load, the widget falls back to its own hex. Other themes that emit `--theme-palette-color-N` / `--theme-text-color` (Astra, Kadence, etc.) are picked up automatically. */ :root { /* Brand action color — used for CTA bg, price, links, accents. Blocksy Palette Color 1 → Elementor Primary → #6EC1E4 (Elementor's vanilla default). */ --sia-color-primary: var(--theme-palette-color-1, var(--e-global-color-primary, #6EC1E4)); /* Secondary brand color — used for tinted backgrounds (e.g. eyebrow label bg). Blocksy Palette Color 2 → Elementor Secondary → #54595F (Elementor's vanilla default). */ --sia-color-secondary: var(--theme-palette-color-2, var(--e-global-color-secondary, #54595F)); /* Body / heading text color — used for product names, titles, generic copy. Blocksy Base Text → Elementor Text → #1A1718 (Vlad's SIA fallback per v3.20.5). */ --sia-color-text: var(--theme-text-color, var(--e-global-color-text, #1A1718)); } /* v4.0.0: color-mix() fallback for legacy browsers (Safari <16.2, Firefox <113, Chrome <111). When `color-mix()` is unknown, browsers drop the entire declaration → no color renders. This block redefines the tint slots as plain primary/secondary so old browsers still see SOMETHING in the tinted slot (just not the tinted variant). Modern browsers ignore this block via @supports. The cost of this degradation: tinted icon backgrounds, hover bg, and eyebrow label backgrounds appear in their solid primary/secondary color on old browsers instead of the 88%-white / 80%-transparent tint. */ @supports not (color: color-mix(in srgb, red, blue)) { .sia-h__label, .sia-ci__icon, .sia-ib__icon, .sia-pd__swatches.is-color .sia-pd__swatch, .sia-pc__pill:hover:not(.is-active):not(:disabled) { background-color: var(--sia-color-secondary, #54595F); } .sia-pc__cta:hover:not(:disabled), .sia-pd__cta:hover:not([disabled]), .sia-ib__button:hover, .sia-tm__cta:hover { background: var(--sia-color-primary, #c5ed3b); } }