Puzzles/Polish the Puzzles and Games hub responsive layout (#16734)

* Add responsive ilustrated header

* Improve puzzle image accesibility and display stters

* Update to temporarily hide puzzles newsletter and popularity sections

* Update to use guardian headline typography for puzzles useful links

* Fix issue variable name

* Update puzzles hub card styling and responsive dimensions

* Fix puzzles hub alignment and header image resolution

* Update crossword archive icon and add sidebar links

* Add responsive separators between puzzle cards

* Update to align useful links divider at wide breakpoint

* Update to remove 768px breakpoint

* Fix puzzles header tests

* Update to replace puzzle colours with source palette tokens

* Update to support dated puzzle routes with section-prefixed slugs

* Update to rollback newslettersignup card we are not going to implement it yet

Author: gustavo-olmedo

dotcom-rendering/src/components/PuzzlesArchiveMenu.island.tsx

@@ -33,21 +33,18 @@ const wrapperStyles = css`
 	position: relative;
 	display: block;
 	width: max-content;
-	margin-top: ${space[1]}px;
+	margin-top: ${space[2]}px;
 	margin-left: auto;
 
 	${from.tablet} {
 		margin-left: 0;
 	}
-
-	&[open] .archive-arrow {
-		transform: rotate(90deg);
-	}
 `;
 
 const summaryStyles = css`
+	position: relative;
 	display: inline-flex;
-	min-height: 44px;
+	min-height: 24px;
 	align-items: center;
 	gap: ${space[2]}px;
 	padding: 0;
@@ -57,6 +54,12 @@ const summaryStyles = css`
 	cursor: pointer;
 	list-style: none;
 	${textSans14};
+	/* Preserve a 44px pointer target around the 24px archive label. */
+	::before {
+		position: absolute;
+		inset: -10px 0;
+		content: '';
+	}
 
 	::-webkit-details-marker {
 		display: none;
@@ -70,8 +73,8 @@ const summaryStyles = css`
 `;
 
 const arrowStyles = css`
-	display: inline-block;
-	transition: transform 0.1s ease-out;
+	display: block;
+	flex-shrink: 0;
 `;
 
 const menuStyles = css`
@@ -116,27 +119,27 @@ export const PuzzlesArchiveMenu = ({
 	const summaryRef = useRef<HTMLElement>(null);
 
 	useEffect(() => {
-		const close = (event: MouseEvent | KeyboardEvent) => {
+		const close = (event: Event) => {
 			const details = detailsRef.current;
 			if (details?.open !== true) {
 				return;
 			}
-			if (event instanceof KeyboardEvent && event.key !== 'Escape') {
-				return;
-			}
-			if (
-				event instanceof MouseEvent &&
-				details.contains(event.target as Node)
-			) {
+			if (event instanceof KeyboardEvent) {
+				if (event.key !== 'Escape') return;
+			} else if (event.composedPath().includes(details)) {
 				return;
 			}
 			details.open = false;
 			if (event instanceof KeyboardEvent) summaryRef.current?.focus();
 		};
-		document.addEventListener('mousedown', close);
+		document.addEventListener('pointerdown', close, true);
+		document.addEventListener('mousedown', close, true);
+		document.addEventListener('click', close, true);
 		document.addEventListener('keydown', close);
 		return () => {
-			document.removeEventListener('mousedown', close);
+			document.removeEventListener('pointerdown', close, true);
+			document.removeEventListener('mousedown', close, true);
+			document.removeEventListener('click', close, true);
 			document.removeEventListener('keydown', close);
 		};
 	}, []);
@@ -153,13 +156,23 @@ export const PuzzlesArchiveMenu = ({
 		<details css={wrapperStyles} ref={detailsRef}>
 			<summary css={summaryStyles} ref={summaryRef}>
 				{label}{' '}
-				<span
+				<svg
+					width="9"
+					height="5"
+					viewBox="0 0 9 5"
+					fill="none"
+					xmlns="http://www.w3.org/2000/svg"
 					aria-hidden="true"
-					className="archive-arrow"
+					focusable="false"
 					css={arrowStyles}
 				>
-					{'>'}
-				</span>
+					<path
+						fillRule="evenodd"
+						clipRule="evenodd"
+						d="M3.05176e-05 0.712324L3.82876 5H4.55936L8.38813 0.712328L7.69406 0L4.19403 3L0.694092 0L3.05176e-05 0.712324Z"
+						fill="black"
+					/>
+				</svg>
 			</summary>
 			<ul aria-label={label} css={menuStyles}>
 				{validArchives.map(({ archive, url }) => (

dotcom-rendering/src/components/PuzzlesDirectory.stories.tsx

@@ -2,9 +2,6 @@ import { breakpoints } from '@guardian/source/foundations';
 import type { PuzzlesLayoutType } from '../types/puzzlesPage';
 import { PuzzlesDirectory } from './PuzzlesDirectory';
 
-const previewImage =
-	'https://i.guim.co.uk/img/uploads/2023/11/01/SaturdayEdition_-_5-3.jpg?width=600&dpr=1&s=none&crop=5%3A3';
-
 const layout: PuzzlesLayoutType = {
 	containers: [
 		{
@@ -17,26 +14,28 @@ const layout: PuzzlesLayoutType = {
 				items: [
 					[
 						{
-							id: 'ball',
-							title: 'On the ball',
-							type: 'quiz',
-							set: 'all',
+							id: 'featured-mini',
+							title: 'Mini crossword',
+							type: 'crossword',
+							set: 'mini',
 							cardVariant: 'large',
 							cadence: 'Daily',
-							image: previewImage,
-							slug: 'on-the-ball',
-							variant: 'iframe-page',
+							image: 'https://i.guim.co.uk/img/uploads/2026/09/15/crossword-MINI.png?width=440&dpr=2&s=none',
+							imageAlt: 'Mini crossword illustration',
+							setter: 'Example setter',
+							url: '/puzzles-and-games/crosswords/mini/1',
 							backgroundColour: '#e5e5e5',
 						},
 						{
-							id: 'film',
-							title: 'Film reveal',
-							type: 'quiz',
+							id: 'featured-word-wheel',
+							title: 'Word wheel',
+							type: 'word-wheel',
 							set: 'all',
 							cardVariant: 'large',
 							cadence: 'Daily',
-							image: previewImage,
-							slug: 'film-reveal',
+							image: 'https://i.guim.co.uk/img/uploads/2026/09/15/word-games-WORD-WHEEL.png?width=440&dpr=2&s=none',
+							imageAlt: 'Word wheel illustration',
+							slug: 'word-wheel',
 							variant: 'iframe-page',
 							backgroundColour: '#e5e5e5',
 						},