diff --git a/res/themes/light-custom/css/_custom.scss b/res/themes/light-custom/css/_custom.scss
index 26fd3e916bb..e2d4fef8fe1 100644
--- a/res/themes/light-custom/css/_custom.scss
+++ b/res/themes/light-custom/css/_custom.scss
@@ -26,8 +26,9 @@ $secondary-content: var(--secondary-content, $secondary-content);
 $tertiary-content: var(--tertiary-content, $tertiary-content);
 $quaternary-content: var(--quaternary-content, $quaternary-content);
 $quinary-content: var(--quinary-content, $quinary-content);
+// XXX: workaround for Safari 15.3 linear-gradient bug https://github.com/vector-im/element-web/issues/21670
+$system-transparent: var(--system-transparent, rgba($system, 0.0));
 $system: var(--system, $system);
-$system-transparent: rgba($system, 0.0); // XXX: workaround for Safari 15.3 linear-gradient bug
 $background: var(--background, $background);
 $panels: rgba($system, 0.9);
 $panel-base: var(--panel-base, $tertiary-content); // This color is not intended for use in the app