From ae66913104c49494d86cd96f05e5bf774c673ffb Mon Sep 17 00:00:00 2001
From: Anna Beddow <anna.beddow@gmail.com>
Date: Thu, 29 Jan 2026 13:07:07 +0000
Subject: [PATCH 1/3] Reduce blur height of blur on vertical feature cards

---
 dotcom-rendering/src/components/FeatureCard.tsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/dotcom-rendering/src/components/FeatureCard.tsx b/dotcom-rendering/src/components/FeatureCard.tsx
index beab0442acb..74f4a172d87 100644
--- a/dotcom-rendering/src/components/FeatureCard.tsx
+++ b/dotcom-rendering/src/components/FeatureCard.tsx
@@ -170,7 +170,7 @@ const overlayStyles = css`
 	flex-direction: column;
 	text-align: start;
 	gap: ${space[1]}px;
-	padding: 64px ${space[2]}px ${space[2]}px;
+	padding: ${space[9]}px ${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)};
@@ -214,9 +214,9 @@ const nonImmersivePodcastImageStyles = css`
 	position: absolute;
 	/**
 	* Displays 8px above the text.
-	* desired space above text (8px) - padding-top of text container (64px) = -56px
+	* desired space above text (8px) - padding-top of text container (36px) = -28px
 	*/
-	bottom: -${space[14]}px;
+	bottom: -28px;
 	left: ${space[2]}px;
 `;
 

From 6033f159a10b0f0cca872e913e08c59bd0fe3fc8 Mon Sep 17 00:00:00 2001
From: Anna Beddow <anna.beddow@gmail.com>
Date: Thu, 29 Jan 2026 13:53:37 +0000
Subject: [PATCH 2/3] Move the linear gradient blur into its own div so that it
 does not affect the content

---
 .../src/components/FeatureCard.tsx            | 347 ++++++++++--------
 1 file changed, 190 insertions(+), 157 deletions(-)

diff --git a/dotcom-rendering/src/components/FeatureCard.tsx b/dotcom-rendering/src/components/FeatureCard.tsx
index 74f4a172d87..a65e040bd87 100644
--- a/dotcom-rendering/src/components/FeatureCard.tsx
+++ b/dotcom-rendering/src/components/FeatureCard.tsx
@@ -164,6 +164,13 @@ const overlayMaskGradientStyles = (angle: string) => css`
 	);
 `;
 
+const contentOverlayStyle = css`
+	position: absolute;
+	bottom: 0;
+	left: 0;
+	width: 100%;
+`;
+
 const overlayStyles = css`
 	position: relative;
 	display: flex;
@@ -171,31 +178,36 @@ const overlayStyles = css`
 	text-align: start;
 	gap: ${space[1]}px;
 	padding: ${space[9]}px ${space[2]}px ${space[2]}px;
+
+	/*
+ * Ensure the waveform is behind the other elements, e.g. headline, pill.
+ * Links define their own z-index.
+ */
+	> :not(.waveform):not(a) {
+		z-index: 1;
+	}
+`;
+
+const blurStyles = css`
+	position: absolute;
+	inset: 0;
 	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.
-	 * Links define their own z-index.
-	 */
-
-	> :not(.waveform):not(a) {
-		z-index: 1;
+const immersiveOverlayBlurStyles = css`
+	${from.tablet} {
+		padding: ${space[2]}px ${space[12]}px ${space[2]}px ${space[2]}px;
+		${overlayMaskGradientStyles('270deg')}
 	}
 `;
 
 const immersiveOverlayStyles = css`
 	${from.tablet} {
 		height: 100%;
-		/**
-		* Why 48px right padding?
-		* 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;
-		${overlayMaskGradientStyles('270deg')}
 	}
 `;
 
@@ -643,165 +655,186 @@ export const FeatureCard = ({
 											noPointerEvents,
 									]}
 								>
-									{mainMedia?.type === 'Audio' &&
-										!!mainMedia.podcastImage?.src &&
-										(isImmersive ? (
-											<Hide from="tablet">
-												{renderPodcastImage(
+									<div css={contentOverlayStyle}>
+										{mainMedia?.type === 'Audio' &&
+											!!mainMedia.podcastImage?.src &&
+											(isImmersive ? (
+												<Hide from="tablet">
+													{renderPodcastImage(
+														mainMedia.podcastImage
+															.src,
+														mainMedia.podcastImage
+															.altText ?? '',
+														false, // Immersive cards are styled as feature cards below the tablet viewport
+													)}
+												</Hide>
+											) : (
+												renderPodcastImage(
 													mainMedia.podcastImage.src,
 													mainMedia.podcastImage
 														.altText ?? '',
-													false, // Immersive cards are styled as feature cards below the tablet viewport
-												)}
-											</Hide>
-										) : (
-											renderPodcastImage(
-												mainMedia.podcastImage.src,
-												mainMedia.podcastImage
-													.altText ?? '',
-												false,
-											)
-										))}
-									<div
-										css={[
-											overlayStyles,
-											isImmersive &&
-												immersiveOverlayStyles,
-											isSelfHostedVideoWithControls &&
-												underlineOnHoverStyles,
-										]}
-									>
-										{/** Only the overlay is a link for self-hosted videos with controls. */}
-										{isSelfHostedVideoWithControls && (
-											<CardLink
-												linkTo={linkTo}
-												headlineText={headlineText}
-												dataLinkName={dataLinkName}
-												isExternalLink={isExternalLink}
-											/>
-										)}
+													false,
+												)
+											))}
+										<div
+											css={[
+												blurStyles,
+												isImmersive &&
+													immersiveOverlayBlurStyles,
+											]}
+										/>
 
-										{isImmersive &&
-											mainMedia?.type === 'Audio' &&
-											!!mainMedia.podcastImage?.src && (
-												<div
-													css={
-														podcastImageContainerStyles
+										<div
+											css={[
+												overlayStyles,
+												isImmersive &&
+													immersiveOverlayStyles,
+												isSelfHostedVideoWithControls &&
+													underlineOnHoverStyles,
+											]}
+										>
+											{/** Only the overlay is a link for self-hosted videos with controls. */}
+											{isSelfHostedVideoWithControls && (
+												<CardLink
+													linkTo={linkTo}
+													headlineText={headlineText}
+													dataLinkName={dataLinkName}
+													isExternalLink={
+														isExternalLink
 													}
-												>
-													<Hide until="tablet">
-														{renderPodcastImage(
-															mainMedia
-																.podcastImage
-																.src,
-															mainMedia
-																.podcastImage
-																.altText ?? '',
-															true,
-														)}
-													</Hide>
-												</div>
+												/>
 											)}
 
-										{/**
-										 * Without the wrapping div the headline and byline would have space
-										 * inserted between them due to being direct children of the flex container
-										 */}
-										<div>
-											<CardHeadline
-												headlineText={headlineText}
-												format={format}
-												fontSizes={headlineSizes}
-												showQuotes={showQuotes}
-												kickerText={
-													format.design ===
-														ArticleDesign.LiveBlog &&
-													!kickerText
-														? 'Live'
-														: kickerText
-												}
-												showPulsingDot={
-													format.design ===
-														ArticleDesign.LiveBlog ||
-													showPulsingDot
-												}
-												byline={byline}
-												showByline={showByline}
-												isExternalLink={isExternalLink}
-												headlineColour={palette(
-													'--feature-card-headline',
-												)}
-												kickerColour={palette(
-													'--feature-card-kicker-text',
-												)}
-												quoteColour={palette(
-													'--feature-card-quote-icon',
+											{isImmersive &&
+												mainMedia?.type === 'Audio' &&
+												!!mainMedia.podcastImage
+													?.src && (
+													<div
+														css={
+															podcastImageContainerStyles
+														}
+													>
+														<Hide until="tablet">
+															{renderPodcastImage(
+																mainMedia
+																	.podcastImage
+																	.src,
+																mainMedia
+																	.podcastImage
+																	.altText ??
+																	'',
+																true,
+															)}
+														</Hide>
+													</div>
 												)}
-											/>
-										</div>
-
-										{!isUndefined(starRating) && (
-											<StarRating
-												rating={starRating}
-												size={starRatingSize}
-												useAlternativeTheme={true}
-											/>
-										)}
 
-										{!!trailText && (
-											<div css={trailTextWrapper}>
-												<TrailText
-													trailText={trailText}
-													trailTextColour={palette(
-														'--feature-card-trail-text',
+											{/**
+											 * Without the wrapping div the headline and byline would have space
+											 * inserted between them due to being direct children of the flex container
+											 */}
+											<div>
+												<CardHeadline
+													headlineText={headlineText}
+													format={format}
+													fontSizes={headlineSizes}
+													showQuotes={showQuotes}
+													kickerText={
+														format.design ===
+															ArticleDesign.LiveBlog &&
+														!kickerText
+															? 'Live'
+															: kickerText
+													}
+													showPulsingDot={
+														format.design ===
+															ArticleDesign.LiveBlog ||
+														showPulsingDot
+													}
+													byline={byline}
+													showByline={showByline}
+													isExternalLink={
+														isExternalLink
+													}
+													headlineColour={palette(
+														'--feature-card-headline',
+													)}
+													kickerColour={palette(
+														'--feature-card-kicker-text',
+													)}
+													quoteColour={palette(
+														'--feature-card-quote-icon',
 													)}
-													trailTextSize="regular"
-													padBottom={false}
-													hideUntil="tablet"
 												/>
 											</div>
-										)}
 
-										<CardFooter
-											format={format}
-											age={
-												showCardAge ? (
-													<FeatureCardCardAge
-														webPublicationDate={
-															webPublicationDate
-														}
-														showClock={!!showClock}
-														serverTime={serverTime}
-														isStorylines={
-															isStorylines
-														}
-													/>
-												) : undefined
-											}
-											commentCount={
-												showCommentCount ? (
-													<FeatureCardCommentCount
-														linkTo={linkTo}
-														discussionId={
-															discussionId
-														}
-														discussionApiUrl={
-															discussionApiUrl
-														}
-													/>
-												) : undefined
-											}
-											showLivePlayable={false}
-											isNewsletter={isNewsletter}
-											mainMedia={mainMedia}
-										/>
+											{!isUndefined(starRating) && (
+												<StarRating
+													rating={starRating}
+													size={starRatingSize}
+													useAlternativeTheme={true}
+												/>
+											)}
 
-										{!isImmersive &&
-											mainMedia?.type === 'Audio' &&
-											renderWaveform(
-												mainMedia.duration,
-												233,
+											{!!trailText && (
+												<div css={trailTextWrapper}>
+													<TrailText
+														trailText={trailText}
+														trailTextColour={palette(
+															'--feature-card-trail-text',
+														)}
+														trailTextSize="regular"
+														padBottom={false}
+														hideUntil="tablet"
+													/>
+												</div>
 											)}
+
+											<CardFooter
+												format={format}
+												age={
+													showCardAge ? (
+														<FeatureCardCardAge
+															webPublicationDate={
+																webPublicationDate
+															}
+															showClock={
+																!!showClock
+															}
+															serverTime={
+																serverTime
+															}
+															isStorylines={
+																isStorylines
+															}
+														/>
+													) : undefined
+												}
+												commentCount={
+													showCommentCount ? (
+														<FeatureCardCommentCount
+															linkTo={linkTo}
+															discussionId={
+																discussionId
+															}
+															discussionApiUrl={
+																discussionApiUrl
+															}
+														/>
+													) : undefined
+												}
+												showLivePlayable={false}
+												isNewsletter={isNewsletter}
+												mainMedia={mainMedia}
+											/>
+
+											{!isImmersive &&
+												mainMedia?.type === 'Audio' &&
+												renderWaveform(
+													mainMedia.duration,
+													233,
+												)}
+										</div>
 									</div>
 								</div>
 

From 2c2ed1da2ba6871db6d610a3d408a8652995f9a5 Mon Sep 17 00:00:00 2001
From: Anna Beddow <anna.beddow@gmail.com>
Date: Mon, 2 Feb 2026 09:03:20 +0000
Subject: [PATCH 3/3] Reduce waveform on podcast feature cards to 40px from
 64px

---
 dotcom-rendering/src/components/FeatureCard.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/dotcom-rendering/src/components/FeatureCard.tsx b/dotcom-rendering/src/components/FeatureCard.tsx
index a65e040bd87..1f3193c4843 100644
--- a/dotcom-rendering/src/components/FeatureCard.tsx
+++ b/dotcom-rendering/src/components/FeatureCard.tsx
@@ -257,7 +257,7 @@ const waveformStyles = css`
 	bottom: 0;
 	left: 0;
 	z-index: 0;
-	height: 64px;
+	height: 40px;
 	max-width: 100%;
 	overflow: hidden;
 	opacity: 0.3;
@@ -309,7 +309,7 @@ const getMedia = ({
 
 const renderWaveform = (duration: string, bars: number) => (
 	<div css={waveformStyles} className="waveform">
-		<WaveForm seed={duration} height={64} bars={bars} barWidth={2} />
+		<WaveForm seed={duration} height={40} bars={bars} barWidth={2} />
 	</div>
 );