Revamped immersive layout(s)

dotcom-rendering/src/components/ArticleHeadline.tsx

@@ -27,7 +27,6 @@ import {
 	ArticleSpecial,
 	Pillar,
 } from '../lib/articleFormat';
-import { getZIndex } from '../lib/getZIndex';
 import { palette as themePalette } from '../palette';
 import type { StarRating as Rating } from '../types/content';
 import type { TagType } from '../types/tag';
@@ -214,30 +213,20 @@ const invertedStyles = css`
 	box-decoration-break: clone;
 `;
 
-const immersiveStyles = css`
-	min-height: 112px;
-	padding-bottom: ${space[6]}px;
-	padding-left: ${space[1]}px;
-
-	${from.mobileLandscape} {
-		padding-left: ${space[3]}px;
-	}
-
-	${from.tablet} {
-		padding-left: ${space[1]}px;
-	}
-
-	margin-right: ${space[5]}px;
-`;
-
 const darkBackground = css`
 	background-color: ${themePalette('--headline-background')};
 `;
 
 const invertedText = css`
-	white-space: pre-wrap;
-	padding-bottom: ${space[1]}px;
-	padding-right: ${space[1]}px;
+	${from.desktop} {
+		color: white;
+		background-color: black;
+		white-space: pre-wrap;
+		padding-bottom: ${space[1]}px;
+		padding-right: ${space[1]}px;
+		margin-left: -10px;
+		padding-left: 10px;
+	}
 `;
 
 const maxWidth = css`
@@ -255,35 +244,6 @@ const invertedWrapper = css`
 	margin-left: 6px;
 `;
 
-const immersiveWrapper = css`
-	/*
-        Make sure we vertically align the headline font with the body font
-    */
-	margin-left: 6px;
-
-	${from.tablet} {
-		margin-left: 16px;
-	}
-
-	${from.leftCol} {
-		margin-left: 25px;
-	}
-
-	/*
-        We need this grow to ensure the headline fills the main content column
-    */
-	flex-grow: 1;
-	/*
-        This z-index is what ensures the headline text shows above the pseudo black
-        box that extends the black background to the right
-    */
-	z-index: ${getZIndex('articleHeadline')};
-
-	${until.mobileLandscape} {
-		margin-right: 40px;
-	}
-`;
-
 // Due to MainMedia using position: relative, this seems to effect the rendering order
 // To mitigate we use z-index
 // TODO: find a cleaner solution
@@ -292,59 +252,58 @@ const zIndex = css`
 `;
 
 const ageWarningMargins = (format: ArticleFormat) => {
-	if (format.design === ArticleDesign.Gallery) {
+	if (
+		format.design === ArticleDesign.Gallery ||
+		format.display === ArticleDisplay.Immersive
+	) {
 		return '';
 	}
-	return format.display === ArticleDisplay.Immersive
-		? css`
-				margin-left: 0px;
-				margin-bottom: 0px;
-
-				${from.tablet} {
-					margin-left: 10px;
-				}
+	return css`
+		margin-top: 12px;
+		margin-left: -10px;
+		margin-bottom: 6px;
 
-				${from.leftCol} {
-					margin-left: 20px;
-				}
-			`
-		: css`
-				margin-top: 12px;
-				margin-left: -10px;
-				margin-bottom: 6px;
-
-				${from.tablet} {
-					margin-left: -20px;
-				}
+		${from.tablet} {
+			margin-left: -20px;
+		}
 
-				${from.leftCol} {
-					margin-left: -10px;
-					margin-top: 0;
-				}
-			`;
+		${from.leftCol} {
+			margin-left: -10px;
+			margin-top: 0;
+		}
+	`;
 };
 
-const backgroundStyles = css`
-	background-color: ${themePalette('--age-warning-wrapper-background')};
-`;
-
 const WithAgeWarning = ({
 	tags,
 	webPublicationDateDeprecated,
 	format,
 	children,
+	snapToInverted = false,
 }: {
 	tags: TagType[];
 	webPublicationDateDeprecated: string;
 	format: ArticleFormat;
 	children: React.ReactNode;
+	snapToInverted?: boolean;
 }) => {
 	const age = getAgeWarning(tags, webPublicationDateDeprecated);
 
 	if (age) {
 		return (
 			<>
-				<div css={[backgroundStyles, ageWarningMargins(format)]}>
+				<div
+					css={[
+						ageWarningMargins(format),
+						snapToInverted
+							? css`
+									${from.desktop} {
+										margin-left: -10px;
+									}
+								`
+							: '',
+					]}
+				>
 					<AgeWarning age={age} />
 				</div>
 				{children}
@@ -440,6 +399,9 @@ export const ArticleHeadline = ({
 	isMatch,
 	starRating,
 }: Props) => {
+	const isInverted =
+		format.display === ArticleDisplay.Immersive &&
+		format.design === ArticleDesign.Standard;
 	switch (format.display) {
 		case ArticleDisplay.Immersive: {
 			switch (format.design) {
@@ -465,12 +427,13 @@ export const ArticleHeadline = ({
 										format.theme === ArticleSpecial.Labs
 											? labsFont
 											: headlineFont(format),
-										invertedText,
-										css`
-											color: ${themePalette(
-												'--headline-colour',
-											)};
-										`,
+										isInverted
+											? [invertedText, darkBackground]
+											: css`
+													color: ${themePalette(
+														'--headline-colour',
+													)};
+												`,
 									]}
 								>
 									{headlineString}
@@ -496,16 +459,17 @@ export const ArticleHeadline = ({
 								webPublicationDateDeprecated
 							}
 							format={format}
+							snapToInverted={true}
 						>
 							<h1
 								css={[
-									immersiveWrapper,
-									darkBackground,
-									css`
-										color: ${themePalette(
-											'--headline-colour',
-										)};
-									`,
+									isInverted
+										? [invertedText, darkBackground]
+										: css`
+												color: ${themePalette(
+													'--headline-colour',
+												)};
+											`,
 								]}
 							>
 								<span
@@ -514,8 +478,6 @@ export const ArticleHeadline = ({
 											? jumboLabsFont
 											: headlineFont(format),
 										maxWidth,
-										invertedStyles,
-										immersiveStyles,
 										displayBlock,
 									]}
 								>

dotcom-rendering/src/components/ArticleTitle.tsx

@@ -28,17 +28,11 @@ const sectionStyles = css`
 `;
 
 const immersiveMargins = css`
-	max-width: 400px;
+	max-width: 500px;
 	min-width: 200px;
 	margin-bottom: 4px;
-	/*
-        Make sure we vertically align the title font with the body font
-    */
 	${from.tablet} {
-		margin-left: 16px;
-	}
-	${from.leftCol} {
-		margin-left: 25px;
+		margin-left: -4px;
 	}
 `;
 

dotcom-rendering/src/components/Figure.tsx

@@ -1,6 +1,15 @@
 import { css } from '@emotion/react';
-import { breakpoints, from, space, until } from '@guardian/source/foundations';
+import {
+	breakpoints,
+	from,
+	palette as sourcePalette,
+	space,
+	until,
+} from '@guardian/source/foundations';
+import type { LayoutType } from '../layouts/lib/articleArrangements';
 import { ArticleDesign, type ArticleFormat } from '../lib/articleFormat';
+import { transparentColour } from '../lib/transparentColour';
+import { palette } from '../palette';
 import type { FEElement, RoleType } from '../types/content';
 
 type Props = {
@@ -12,8 +21,35 @@ type Props = {
 	className?: string;
 	type?: FEElement['_type'];
 	isTimeline?: boolean;
+	articleArrangement?: LayoutType;
 };
 
+const overlayMaskGradientStyles = (angle: string) => css`
+	mask-image: linear-gradient(
+		${angle},
+		rgb(0, 0, 0) 0%,
+		rgba(0, 0, 0, 0.9619) 12.5%,
+		rgba(0, 0, 0, 0.8536) 25%,
+		rgba(0, 0, 0, 0.6913) 37.5%,
+		rgba(0, 0, 0, 0.5) 50%,
+		rgba(0, 0, 0, 0.3087) 62.5%,
+		rgba(0, 0, 0, 0.1464) 75%,
+		rgba(0, 0, 0, 0.0381) 87.5%,
+		transparent 100%
+	);
+`;
+
+const blurStyles = css`
+	position: absolute;
+	inset: 0;
+	background-color: ${palette('--article-background')};
+	backdrop-filter: blur(12px) brightness(0.5);
+	@supports not (backdrop-filter: blur(12px)) {
+		background-color: ${transparentColour(sourcePalette.neutral[10], 0.7)};
+	}
+	${overlayMaskGradientStyles('0deg')};
+`;
+
 const roleCss = {
 	inline: css`
 		margin-top: ${space[3]}px;
@@ -263,6 +299,7 @@ export const Figure = ({
 	className = '',
 	type,
 	isTimeline = false,
+	articleArrangement = 'standard',
 }: Props) => {
 	if (isMainMedia && !isTimeline) {
 		// Don't add in-body styles for main media elements
@@ -273,6 +310,17 @@ export const Figure = ({
 		return (
 			<figure id={id} key={id} css={mainMediaFigureStyles}>
 				{children}
+				{articleArrangement === 'immersiveLandscapeFeature' && (
+					<div
+						css={[
+							blurStyles,
+							css`
+								height: 40%;
+								top: 60%;
+							`,
+						]}
+					/>
+				)}
 			</figure>
 		);
 	}

dotcom-rendering/src/components/MainMedia.tsx

@@ -1,5 +1,6 @@
 import { css } from '@emotion/react';
 import { breakpoints, space, until } from '@guardian/source/foundations';
+import type { LayoutType } from '../layouts/lib/articleArrangements';
 import {
 	ArticleDesign,
 	ArticleDisplay,
@@ -12,6 +13,7 @@ import type { ServerSideTests, Switches } from '../types/config';
 import type { FEElement } from '../types/content';
 
 const mainMedia = css`
+	position: relative;
 	height: 100%;
 
 	${until.tablet} {
@@ -96,6 +98,7 @@ type Props = {
 	shouldHideAds: boolean;
 	contentType?: string;
 	contentLayout?: string;
+	articleArrangement?: LayoutType;
 };
 
 export const MainMedia = ({
@@ -114,6 +117,7 @@ export const MainMedia = ({
 	shouldHideAds,
 	contentType,
 	contentLayout,
+	articleArrangement,
 }: Props) => {
 	return (
 		<div css={[mainMedia, chooseWrapper(format)]}>
@@ -137,6 +141,7 @@ export const MainMedia = ({
 					shouldHideAds={shouldHideAds}
 					contentType={contentType}
 					contentLayout={contentLayout}
+					articleArrangement={articleArrangement}
 				/>
 			))}
 		</div>

dotcom-rendering/src/components/Standfirst.tsx

@@ -268,7 +268,6 @@ const standfirstStyles = ({ display, design, theme }: ArticleFormat) => {
 					`;
 				default:
 					return css`
-						max-width: 280px;
 						${from.tablet} {
 							max-width: 460px;
 						}

dotcom-rendering/src/grid.ts

@@ -159,6 +159,7 @@ const outerRules = (color?: string): string => `
     &::before {
       grid-column: centre-column-start;
       transform: translateX(-${columnGap});
+	  z-index: 10;
 
       ${fromBreakpoint.leftCol} {
         grid-column: left-column-start;
@@ -169,6 +170,7 @@ const outerRules = (color?: string): string => `
     &::after {
       grid-column: right-column-end;
       transform: translateX(-1px);
+      z-index: 10;
 
       ${betweenBreakpoint.tablet.and.desktop} {
         grid-column: centre-column-end;