Aa/portrait layout continued 2

dotcom-rendering/src/components/ArticleHeadline.tsx

@@ -123,7 +123,7 @@ const decideMobileHeadlineFont = (format: ArticleFormat) => {
 	}
 };
 
-const headlineFont = (format: ArticleFormat) => {
+const headlineFont = (format: ArticleFormat, layoutType?: LayoutType) => {
 	if (format.design === ArticleDesign.Gallery) {
 		return css`
 			${decideMobileHeadlineFont(format)}
@@ -132,6 +132,17 @@ const headlineFont = (format: ArticleFormat) => {
 			}
 		`;
 	}
+	if (
+		layoutType === 'immersivePortraitDefault' ||
+		layoutType === 'immersivePortraitFeature'
+	) {
+		return css`
+			${decideMobileHeadlineFont(format)}
+			${from.leftCol} {
+				${decideHeadlineFont(format)}
+			}
+		`;
+	}
 	return css`
 		${decideMobileHeadlineFont(format)}
 		${from.tablet} {
@@ -292,6 +303,45 @@ const gridHeadlineText = css`
 	color: ${themePalette('--immersive-grid-headline-colour')};
 `;
 
+/** Headline colour specific to the immersive portrait grid layout */
+const immersivePortraitHeadlineText = css`
+	color: ${themePalette('--immersive-portrait-headline-text')};
+`;
+
+const gridColumns = css`
+	${from.desktop} {
+		grid-column: 1 / 6;
+	}
+	${from.leftCol} {
+		grid-column: 1 / 7;
+	}
+	${from.wide} {
+		grid-column: 1 / 8;
+	}
+`;
+
+const displayGrid = css`
+	${from.desktop} {
+		display: grid;
+		grid-template-columns: repeat(6, 1fr);
+		grid-gap: 0.25fr;
+	}
+	${from.leftCol} {
+		grid-template-columns: repeat(7, 1fr);
+	}
+	${from.wide} {
+		grid-template-columns: repeat(8, 1fr);
+	}
+`;
+
+const paddingBottom = css`
+	padding-bottom: ${space[6]}px;
+
+	${from.desktop} {
+		padding-bottom: 0;
+	}
+`;
+
 const maxWidth = css`
 	${from.desktop} {
 		max-width: 620px;
@@ -488,6 +538,9 @@ export const ArticleHeadline = ({
 	starRating,
 }: Props) => {
 	const isInverted = layoutType === 'immersiveLandscapeDefault';
+	const isImmersivePortrait =
+		layoutType === 'immersivePortraitDefault' ||
+		layoutType === 'immersivePortraitFeature';
 	const isLegacyImmersive = layoutType == null;
 	switch (format.display) {
 		case ArticleDisplay.Immersive: {
@@ -568,20 +621,27 @@ export const ArticleHeadline = ({
 											]
 										: isInverted
 											? [invertedText, darkBackground]
-											: gridHeadlineText,
+											: isImmersivePortrait
+												? immersivePortraitHeadlineText
+												: gridHeadlineText,
+									isImmersivePortrait && [
+										displayGrid,
+										paddingBottom,
+									],
 								]}
 							>
 								<span
 									css={[
 										format.theme === ArticleSpecial.Labs
 											? jumboLabsFont
-											: headlineFont(format),
+											: headlineFont(format, layoutType),
 										maxWidth,
 										isLegacyImmersive && [
 											legacyInvertedStyles,
 											legacyImmersiveStyles,
 										],
 										displayBlock,
+										isImmersivePortrait && gridColumns,
 									]}
 								>
 									{headlineString}

dotcom-rendering/src/components/ArticleMeta.web.tsx

@@ -289,6 +289,22 @@ const metaNumbersExtrasLiveBlog = css`
 	}
 `;
 
+const borderTop = css`
+	border-top: 1px solid ${themePalette('--article-border')};
+
+	${from.desktop} {
+		border-top: none;
+	}
+`;
+
+const paddingTop = css`
+	padding-top: ${space[3]}px;
+
+	${from.leftCol} {
+		padding-top: 0;
+	}
+`;
+
 export const ArticleMeta = ({
 	branding,
 	format,
@@ -343,7 +359,11 @@ export const ArticleMeta = ({
 			className={
 				isInteractive ? interactiveLegacyClasses.metaContainer : ''
 			}
-			css={metaContainer(format)}
+			css={[
+				metaContainer(format),
+				isImmersiveGrid && borderTop,
+				isImmersiveGrid && paddingTop,
+			]}
 		>
 			<div css={meta(format)}>
 				{branding && (

dotcom-rendering/src/components/ArticleTitle.tsx

@@ -7,6 +7,7 @@ import {
 	ArticleDisplay,
 	type ArticleFormat,
 } from '../lib/articleFormat';
+import { palette as themePalette } from '../palette';
 import type { TagType } from '../types/tag';
 import { SeriesSectionLink } from './SeriesSectionLink';
 
@@ -63,6 +64,21 @@ const galleryStyles = css`
 	}
 `;
 
+const immersivePortraitStyles = css`
+	${from.leftCol} {
+		height: 100%;
+		justify-content: flex-end;
+	}
+`;
+
+const immersivePortraitSeriesSectionWrapperStyles = css`
+	padding: 3px 6px 4px;
+	margin-bottom: 0;
+	background-color: ${themePalette('--immersive-portrait-title-background')};
+	width: fit-content;
+	min-width: unset;
+`;
+
 export const ArticleTitle = ({
 	format,
 	layoutType,
@@ -77,6 +93,9 @@ export const ArticleTitle = ({
 			[ArticleDesign.Gallery, ArticleDesign.HostedGallery].includes(
 				format.design,
 			) && galleryStyles,
+			(layoutType === 'immersivePortraitDefault' ||
+				layoutType === 'immersivePortraitFeature') &&
+				immersivePortraitStyles,
 			sectionStyles,
 		]}
 	>
@@ -85,7 +104,13 @@ export const ArticleTitle = ({
 				format.display === ArticleDisplay.Immersive
 					? layoutType == null
 						? legacyImmersiveMargins
-						: immersiveGridMargins
+						: layoutType === 'immersivePortraitDefault' ||
+							  layoutType === 'immersivePortraitFeature'
+							? [
+									immersiveGridMargins,
+									immersivePortraitSeriesSectionWrapperStyles,
+								]
+							: immersiveGridMargins
 					: undefined
 			}
 		>

dotcom-rendering/src/layouts/StandardLayoutArticleGrid.tsx

@@ -285,8 +285,12 @@ export const StandardLayoutArticleGrid = ({
 						`,
 					isImmersivePortrait &&
 						css`
-							align-self: end;
-							margin-bottom: 2px;
+							${from.desktop} {
+								margin: auto 0 0;
+							}
+							${from.leftCol} {
+								margin: 0;
+							}
 						`,
 				]}
 			>

dotcom-rendering/src/layouts/lib/articleArrangements.ts

@@ -182,7 +182,7 @@ const immersivePortraitDefaultCss: LayoutCssMap = {
 	standfirst: {
 		mobile: 'grid-row: 4;',
 		tablet: 'grid-row: 4;',
-		desktop: `grid-row: 3; ${grid.between('centre-column-start', 7)};`,
+		desktop: `grid-row: 3; ${grid.between('centre-column-start', 8)};`,
 		leftCol: `grid-row: 3; ${grid.between('centre-column-start', 8)};`,
 		wide: `grid-row: 3; ${grid.between('centre-column-start', 9)};`,
 	},
@@ -231,7 +231,7 @@ const immersivePortraitFeatureCss: LayoutCssMap = {
 	standfirst: {
 		mobile: 'grid-row: 4;',
 		tablet: 'grid-row: 4;',
-		desktop: `grid-row: 3; ${grid.between('centre-column-start', 7)};`,
+		desktop: `grid-row: 3; ${grid.between('centre-column-start', 8)};`,
 		leftCol: `grid-row: 3; ${grid.between('centre-column-start', 8)};`,
 		wide: `grid-row: 3; ${grid.between('centre-column-start', 9)};`,
 	},

dotcom-rendering/src/paletteDeclarations.ts

@@ -218,6 +218,40 @@ const immersiveGridHeadlineTextLight: PaletteFunction = () =>
 const immersiveGridHeadlineTextDark: PaletteFunction = () =>
 	sourcePalette.neutral[97];
 
+/** Headline colour for the immersive portrait grid layout specifically */
+const immersivePortraitHeadlineLight: PaletteFunction = () =>
+	sourcePalette.neutral[0];
+
+const immersivePortraitHeadlineDark: PaletteFunction = () =>
+	sourcePalette.neutral[100];
+
+/** Background for the series/section label on the immersive portrait grid layout */
+const immersivePortraitTitleBackgroundLight: PaletteFunction = (format) => {
+	switch (format.theme) {
+		case Pillar.News:
+		case Pillar.Opinion:
+		case Pillar.Sport:
+		case Pillar.Lifestyle:
+		case Pillar.Culture:
+			return pillarPalette(format.theme, 400);
+		default:
+			return sourcePalette.neutral[100];
+	}
+};
+
+const immersivePortraitTitleBackgroundDark: PaletteFunction = (format) => {
+	switch (format.theme) {
+		case Pillar.News:
+		case Pillar.Opinion:
+		case Pillar.Sport:
+		case Pillar.Lifestyle:
+		case Pillar.Culture:
+			return pillarPalette(format.theme, 500);
+		default:
+			return sourcePalette.neutral[7];
+	}
+};
+
 const headlineBackgroundLight: PaletteFunction = ({
 	display,
 	design,
@@ -7575,6 +7609,14 @@ const paletteColours = {
 		light: immersiveGridHeadlineTextLight,
 		dark: immersiveGridHeadlineTextDark,
 	},
+	'--immersive-portrait-headline-text': {
+		light: immersivePortraitHeadlineLight,
+		dark: immersivePortraitHeadlineDark,
+	},
+	'--immersive-portrait-title-background': {
+		light: immersivePortraitTitleBackgroundLight,
+		dark: immersivePortraitTitleBackgroundDark,
+	},
 	'--interactive-atom-background': {
 		light: interactiveAtomBackgroundLight,
 		dark: interactiveAtomBackgroundDark,