Merge pull request #14435 from guardian/doml/backdrop-filter-fallback

Add fallback for backdrop-filter to support old Firefox

Author: domlander

dotcom-rendering/src/components/FeatureCard.tsx

@@ -1,9 +1,15 @@
 import { css } from '@emotion/react';
-import { from, space, until } from '@guardian/source/foundations';
+import {
+	from,
+	palette as sourcePalette,
+	space,
+	until,
+} from '@guardian/source/foundations';
 import { Hide, SvgMediaControlsPlay } from '@guardian/source/react-components';
 import { ArticleDesign, type ArticleFormat } from '../lib/articleFormat';
 import { secondsToDuration } from '../lib/formatTime';
 import { getZIndex } from '../lib/getZIndex';
+import { transparentColour } from '../lib/transparentColour';
 import { palette } from '../palette';
 import type { StarRating as Rating } from '../types/content';
 import type {
@@ -148,6 +154,9 @@ const overlayStyles = css`
 	gap: ${space[1]}px;
 	padding: 64px ${space[2]}px ${space[2]}px;
 	backdrop-filter: blur(12px) brightness(0.5);
+	@supports not (backdrop-filter: blur(12px)) {
+		background-color: ${transparentColour(sourcePalette.neutral[10], 0.7)};
+	}
 	${overlayMaskGradientStyles('180deg')};
 
 	/* Ensure the waveform is behind the other elements, e.g. headline, pill */
@@ -164,7 +173,6 @@ const immersiveOverlayStyles = css`
 		* 48px is to point at which the gradient can go behind the content whilst maintaining accessibility.
 		*/
 		padding: ${space[2]}px ${space[12]}px ${space[2]}px ${space[2]}px;
-		backdrop-filter: blur(12px) brightness(0.5);
 		${overlayMaskGradientStyles('270deg')}
 	}
 `;

dotcom-rendering/src/components/YoutubeAtom/YoutubeAtomFeatureCardOverlay.tsx

@@ -1,8 +1,13 @@
 import { css } from '@emotion/react';
 import { isUndefined } from '@guardian/libs';
-import { from, space } from '@guardian/source/foundations';
+import {
+	from,
+	palette as sourcePalette,
+	space,
+} from '@guardian/source/foundations';
 import type { ArticleFormat } from '../../lib/articleFormat';
 import { secondsToDuration } from '../../lib/formatTime';
+import { transparentColour } from '../../lib/transparentColour';
 import { palette } from '../../palette';
 import type { AspectRatio } from '../../types/front';
 import { CardFooter } from '../Card/components/CardFooter';
@@ -75,6 +80,9 @@ const textOverlayStyles = css`
 	${overlayMaskGradientStyles('180deg')};
 
 	backdrop-filter: blur(12px) brightness(0.5);
+	@supports not (backdrop-filter: blur(12px)) {
+		background-color: ${transparentColour(sourcePalette.neutral[10], 0.7)};
+	}
 `;
 
 /**
@@ -87,7 +95,6 @@ const immersiveOverlayStyles = css`
 		height: 100%;
 		width: 268px;
 		padding: ${space[2]}px ${space[12]}px ${space[2]}px ${space[2]}px;
-		backdrop-filter: blur(12px) brightness(0.5);
 		${overlayMaskGradientStyles('270deg')}
 	}
 `;