/* * CG page theme variants. * * Extracted from wp-coefficient-giving/web/wp-content/themes/coefficient-giving/css/theme.css. * * The live CG site applies a `theme-*` class to to swap accent / * highlight / border + paint a top-to-bottom gradient. Embeds that want to * inherit the host page's theme should consume the semantic tokens * (`--cg-color-accent`, `--cg-color-highlight`, `--cg-color-lightborder`) * rather than the named colors directly — the host page's theme class will * override these in the cascade. * * Microsites can apply one of these classes to directly to opt into * a page theme. */ .cg-theme-green { --cg-gradient: linear-gradient( to bottom, var(--cg-color-green-bright), var(--cg-color-white) ); --cg-color-lightborder: var(--cg-color-green-border); --cg-color-highlight: var(--cg-color-green-light); background-image: var(--cg-gradient); background-size: 100% 50vh; background-repeat: no-repeat; } .cg-theme-pink { --cg-gradient: linear-gradient( to bottom, var(--cg-color-pink) -50%, var(--cg-color-white) 100% ); --cg-color-lightborder: var(--cg-color-pink-border); --cg-color-highlight: var(--cg-color-pink); background-image: var(--cg-gradient); background-size: 100% 50vh; background-repeat: no-repeat; } .cg-theme-blue-light { --cg-gradient: linear-gradient( to bottom, var(--cg-color-blue-light), var(--cg-color-white) ); --cg-color-lightborder: var(--cg-color-blue-light-border); --cg-color-highlight: var(--cg-color-blue-light); background-image: var(--cg-gradient); background-size: 100% 50vh; background-repeat: no-repeat; } .cg-theme-blue-bright { --cg-gradient: linear-gradient( to bottom, var(--cg-color-blue-bright) -30%, var(--cg-color-white) 100% ); --cg-color-lightborder: var(--cg-color-blue-bright-border); --cg-color-highlight: var(--cg-color-blue-mid); background-image: var(--cg-gradient); background-size: 100% 50vh; background-repeat: no-repeat; } .cg-theme-blue-subtle { --cg-color-surface: var(--cg-color-blue-superlight); --cg-color-accent: var(--cg-color-blue-dark); --cg-color-lightborder: var(--cg-color-blue-light-border); --cg-gradient: none; background-color: var(--cg-color-blue-superlight); }