Use Webflow Color Variables

Features

Webflow moved to the use of CSS custom properties (variables), that are declared on the :root element by default. Our Paid Post Translator (the app that processes the assets uploaded in Scoop) scopes all the styles under the #story selector, making the declaration invalid.

Quick solutions:

Unlink each colour assignment from its swatch in the Webflow panel. This implies to not take advantages of swatches/variables anymore.

Copy-and-paste the variables declaration from the top of the stylesheet into a Webflow HTML embed element, scoping them to the #story selector, instead of the :root selector. This implies to update this declaration if colour values will change. For example, from:

:root {

--dark-blue: #0a4363;

--white: white;

--lime: #e9fcc8;

--black: black;

--dim-grey: #585858;

}

to:

#story {

--dark-blue: #0a4363;

--white: white;

--lime: #e9fcc8;