From 597b1c5900642416917dcd6056768110f9bcbaf1 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E2=80=9CLilyL0u=E2=80=9D?= Date: Fri, 19 Dec 2025 15:21:16 +0000 Subject: [PATCH 1/9] progress bar implemented --- src/app/pages/ArticlePage/ArticlePage.tsx | 8 +- .../ArticlePage/ReadingProgressBar/index.tsx | 82 +++++++++++++++++++ 2 files changed, 88 insertions(+), 2 deletions(-) create mode 100644 src/app/pages/ArticlePage/ReadingProgressBar/index.tsx diff --git a/src/app/pages/ArticlePage/ArticlePage.tsx b/src/app/pages/ArticlePage/ArticlePage.tsx index 7b76b76ca68..be0499ef825 100644 --- a/src/app/pages/ArticlePage/ArticlePage.tsx +++ b/src/app/pages/ArticlePage/ArticlePage.tsx @@ -1,4 +1,4 @@ -import { use, useState } from 'react'; +import { use, useState, useRef } from 'react'; import { useTheme } from '@emotion/react'; import useToggle from '#hooks/useToggle'; import { singleTextBlock } from '#app/models/blocks'; @@ -48,6 +48,7 @@ import ScrollablePromo from '#components/ScrollablePromo'; import Recommendations from '#app/components/Recommendations'; import ReadTimeArticle from '#app/components/ReadTime'; import PWAPromotionalBanner from '#app/components/PWAPromotionalBanner'; +import ReadingProgressBar from './ReadingProgressBar'; import PersonalisedContent from '../../components/PersonalisedContent'; import ElectionBanner from './ElectionBanner'; import ImageWithCaption from '../../components/ImageWithCaption'; @@ -199,6 +200,8 @@ const ArticlePage = ({ pageData }: { pageData: Article }) => { palette: { GREY_2 }, } = useTheme(); + const mainRef = useRef(null); + // EXPERIMENT: Time of Day Experiment const timeOfDayExperimentName = 'newswb_ws_tod_article'; const timeOfDayExperimentVariant = useOptimizelyVariation({ @@ -418,7 +421,8 @@ const ArticlePage = ({ pageData }: { pageData: Article }) => {
-
+ +
; +}; + +const barWrapperStyles = { + position: 'sticky', + top: 0, + left: 0, + width: '100%', + zIndex: 9999, + background: 'transparent', + height: 4, +}; + +const progressBarStyles = (palette, width: number) => ({ + display: 'block', + height: 4, + width: `${width}%`, + background: palette.POSTBOX, + borderRadius: 2, + transition: 'width 0.06s ease-in', +}); + +const ReadingProgressBar = ({ targetRef }: ReadingProgressBarProps) => { + const [progress, setProgress] = useState(0); + const { palette } = useTheme(); + const ticking = useRef(false); + + useEffect(() => { + const handleScroll = () => { + if (!targetRef.current) return; + const rect = targetRef.current.getBoundingClientRect(); + const windowHeight = window.innerHeight; + const articleHeight = rect.height; + + // Calculate how much of the article has been scrolled + const totalScrollable = articleHeight - windowHeight; + const scrolled = Math.min( + Math.max(-rect.top, 0), + totalScrollable > 0 ? totalScrollable : 1, + ); + + const percent = + totalScrollable > 0 + ? Math.min((scrolled / totalScrollable) * 100, 100) + : 0; + + setProgress(percent); + ticking.current = false; + }; + + const onScroll = () => { + if (!ticking.current) { + window.requestAnimationFrame(handleScroll); + ticking.current = true; + } + }; + + window.addEventListener('scroll', onScroll, { passive: true }); + window.addEventListener('resize', onScroll); + onScroll(); + + return () => { + window.removeEventListener('scroll', onScroll); + window.removeEventListener('resize', onScroll); + }; + }, [targetRef]); + + return ( +
+ +
+ ); +}; + +export default ReadingProgressBar; From 5d1cfd12b610505cffb7a04da1755b81123c5dab Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E2=80=9CLilyL0u=E2=80=9D?= Date: Fri, 19 Dec 2025 15:34:03 +0000 Subject: [PATCH 2/9] only show progress bar when continue reading button clicked --- src/app/pages/ArticlePage/ArticlePage.tsx | 5 ++++- .../ArticlePage/ReadingProgressBar/index.tsx | 20 ++++++++++++++----- 2 files changed, 19 insertions(+), 6 deletions(-) diff --git a/src/app/pages/ArticlePage/ArticlePage.tsx b/src/app/pages/ArticlePage/ArticlePage.tsx index be0499ef825..df5c5622367 100644 --- a/src/app/pages/ArticlePage/ArticlePage.tsx +++ b/src/app/pages/ArticlePage/ArticlePage.tsx @@ -421,7 +421,10 @@ const ArticlePage = ({ pageData }: { pageData: Article }) => {
- +
; + showAllContent: boolean; }; const barWrapperStyles = { @@ -24,7 +25,10 @@ const progressBarStyles = (palette, width: number) => ({ transition: 'width 0.06s ease-in', }); -const ReadingProgressBar = ({ targetRef }: ReadingProgressBarProps) => { +const ReadingProgressBar = ({ + targetRef, + showAllContent, +}: ReadingProgressBarProps) => { const [progress, setProgress] = useState(0); const { palette } = useTheme(); const ticking = useRef(false); @@ -32,12 +36,18 @@ const ReadingProgressBar = ({ targetRef }: ReadingProgressBarProps) => { useEffect(() => { const handleScroll = () => { if (!targetRef.current) return; + const rect = targetRef.current.getBoundingClientRect(); const windowHeight = window.innerHeight; const articleHeight = rect.height; - - // Calculate how much of the article has been scrolled const totalScrollable = articleHeight - windowHeight; + + if (!showAllContent) { + setProgress(0); + ticking.current = false; + return; + } + const scrolled = Math.min( Math.max(-rect.top, 0), totalScrollable > 0 ? totalScrollable : 1, @@ -67,7 +77,7 @@ const ReadingProgressBar = ({ targetRef }: ReadingProgressBarProps) => { window.removeEventListener('scroll', onScroll); window.removeEventListener('resize', onScroll); }; - }, [targetRef]); + }, [targetRef, showAllContent]); return (
From 1ce13573adfe37a8429ef490cc0bdef558548ee9 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E2=80=9CLilyL0u=E2=80=9D?= Date: Mon, 22 Dec 2025 12:27:30 +0000 Subject: [PATCH 3/9] wip --- src/app/pages/ArticlePage/ArticlePage.tsx | 1 + .../ArticlePage/ReadingProgressBar/index.tsx | 30 ++++++++++++++----- 2 files changed, 23 insertions(+), 8 deletions(-) diff --git a/src/app/pages/ArticlePage/ArticlePage.tsx b/src/app/pages/ArticlePage/ArticlePage.tsx index df5c5622367..ef91e3e02f7 100644 --- a/src/app/pages/ArticlePage/ArticlePage.tsx +++ b/src/app/pages/ArticlePage/ArticlePage.tsx @@ -424,6 +424,7 @@ const ArticlePage = ({ pageData }: { pageData: Article }) => {
; - showAllContent: boolean; + showAllContent?: boolean; + hasContinueReadingButton?: boolean; }; const barWrapperStyles = { @@ -27,41 +28,53 @@ const progressBarStyles = (palette, width: number) => ({ const ReadingProgressBar = ({ targetRef, - showAllContent, + showAllContent = true, + hasContinueReadingButton = false, }: ReadingProgressBarProps) => { + // Initialises state to track the progress percentage. const [progress, setProgress] = useState(0); const { palette } = useTheme(); const ticking = useRef(false); useEffect(() => { + // Defines a function to calculate progress, exiting if the ref is not set. const handleScroll = () => { if (!targetRef.current) return; + // getBoundingClientRect is a DOM method that returns the size and position of an element relative to the viewport. + // it provides an object with properties like top, right, bottom, left, width, and height + // in this component it is used to measure the article's height and position const rect = targetRef.current.getBoundingClientRect(); const windowHeight = window.innerHeight; const articleHeight = rect.height; const totalScrollable = articleHeight - windowHeight; - if (!showAllContent) { + // Calculates the article’s position and the total scrollable distance. + // If there is a continue reading button and content is not expanded, keep progress at 0 + if (hasContinueReadingButton && !showAllContent) { setProgress(0); ticking.current = false; return; } - + // If the article is collapsed and has a continue reading button, progress stays at 0. const scrolled = Math.min( Math.max(-rect.top, 0), totalScrollable > 0 ? totalScrollable : 1, ); - + // Calculates the progress percentage, ensuring it never exceeds 100%. const percent = totalScrollable > 0 ? Math.min((scrolled / totalScrollable) * 100, 100) : 0; - + // Updates the progress state and resets the ticking flag. setProgress(percent); ticking.current = false; }; - + // this is called whenver a scroll or resize event happens. It checks if an aniimation frame is already scheduled (ticking.current) + // if not, it schedules handleScroll to tun on the next animation frame using window.requestAnimationFrame + // it then sets ticking.curent to true to prevent scheduling another frame before the current one runs + // this approach means that handleScroll tuns at most once per animation frame even if many + // scroll/resize events fire rapidly const onScroll = () => { if (!ticking.current) { window.requestAnimationFrame(handleScroll); @@ -69,6 +82,7 @@ const ReadingProgressBar = ({ } }; + // Adds event listeners for scroll and resize, and triggers an initial calculation. window.addEventListener('scroll', onScroll, { passive: true }); window.addEventListener('resize', onScroll); onScroll(); @@ -77,7 +91,7 @@ const ReadingProgressBar = ({ window.removeEventListener('scroll', onScroll); window.removeEventListener('resize', onScroll); }; - }, [targetRef, showAllContent]); + }, [targetRef, showAllContent, hasContinueReadingButton]); return (
From 65616cc6071d98e97193d4420acde848269a9aec Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E2=80=9CLilyL0u=E2=80=9D?= Date: Thu, 15 Jan 2026 22:11:17 +0000 Subject: [PATCH 4/9] hide and reveal nav --- .../legacy/containers/Header/HideOnScroll.jsx | 41 +++++++++++++++++++ src/app/legacy/containers/Header/index.jsx | 39 ++++++++++-------- 2 files changed, 62 insertions(+), 18 deletions(-) create mode 100644 src/app/legacy/containers/Header/HideOnScroll.jsx diff --git a/src/app/legacy/containers/Header/HideOnScroll.jsx b/src/app/legacy/containers/Header/HideOnScroll.jsx new file mode 100644 index 00000000000..aca09b9e625 --- /dev/null +++ b/src/app/legacy/containers/Header/HideOnScroll.jsx @@ -0,0 +1,41 @@ +import { useEffect, useRef, useState } from 'react'; + +const headerWrapperStyles = isVisible => ({ + position: 'sticky', + top: 0, + left: 0, + width: '100%', + zIndex: 10000, + transition: 'transform 0.3s ease', + transform: isVisible ? 'translateY(0)' : 'translateY(-100%)', + willChange: 'transform', +}); + +const HideOnScroll = ({ children }) => { + const [isVisible, setIsVisible] = useState(true); + const lastScrollY = useRef(0); + + useEffect(() => { + lastScrollY.current = window.scrollY; + + const handleScroll = () => { + const currentScrollY = window.scrollY; + const isScrollingUp = currentScrollY < lastScrollY.current; + const isNearTop = currentScrollY < 10; + + setIsVisible(isScrollingUp || isNearTop); + lastScrollY.current = currentScrollY; + }; + + window.addEventListener('scroll', handleScroll, { passive: true }); + return () => window.removeEventListener('scroll', handleScroll); + }, []); + + return ( +
+ {children} +
+ ); +}; + +export default HideOnScroll; diff --git a/src/app/legacy/containers/Header/index.jsx b/src/app/legacy/containers/Header/index.jsx index c46187c025e..a4840fb9785 100644 --- a/src/app/legacy/containers/Header/index.jsx +++ b/src/app/legacy/containers/Header/index.jsx @@ -15,6 +15,7 @@ import { ServiceContext } from '../../../contexts/ServiceContext'; import ConsentBanner from '../ConsentBanner'; import NavigationContainer from '../Navigation'; import BrandContainer from '../Brand'; +import HideOnScroll from './HideOnScroll'; const Header = ({ brandRef, borderBottom, skipLink, scriptLink, linkId }) => { const [showConsentBanner, setShowConsentBanner] = useState(true); @@ -92,25 +93,27 @@ const HeaderContainer = ({ propsForTopBarOJComponent }) => { if (isApp) return null; return ( -
- {isAmp ? ( -
} + +
+ {isAmp ? ( +
} + /> + ) : ( +
} + /> + )} + {isLite && } + - ) : ( -
} - /> - )} - {isLite && } - -
+
+ ); }; From 82ea941e8d5ea78316db9892fa69a0eb92bb0b9c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E2=80=9CLilyL0u=E2=80=9D?= Date: Thu, 15 Jan 2026 22:26:26 +0000 Subject: [PATCH 5/9] put back mainRef --- src/app/pages/ArticlePage/ArticlePage.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/src/app/pages/ArticlePage/ArticlePage.tsx b/src/app/pages/ArticlePage/ArticlePage.tsx index ebb3241a086..17fbdec978f 100644 --- a/src/app/pages/ArticlePage/ArticlePage.tsx +++ b/src/app/pages/ArticlePage/ArticlePage.tsx @@ -178,6 +178,7 @@ const getContinueReadingButton = const ArticlePage = ({ pageData }: { pageData: Article }) => { const [showAllContent, setShowAllContent] = useState(false); + const mainRef = useRef(null); const { isApp, isAmp, isLite } = use(RequestContext); const { articleAuthor, From e1b02ad949fcf5fe14e9a2b5c9b1e4ef05b0b428 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E2=80=9CLilyL0u=E2=80=9D?= Date: Thu, 15 Jan 2026 22:44:36 +0000 Subject: [PATCH 6/9] ts error fix --- .../ArticlePage/ReadingProgressBar/index.tsx | 23 ++++++++++--------- 1 file changed, 12 insertions(+), 11 deletions(-) diff --git a/src/app/pages/ArticlePage/ReadingProgressBar/index.tsx b/src/app/pages/ArticlePage/ReadingProgressBar/index.tsx index a3830dd1745..558dec81c98 100644 --- a/src/app/pages/ArticlePage/ReadingProgressBar/index.tsx +++ b/src/app/pages/ArticlePage/ReadingProgressBar/index.tsx @@ -1,5 +1,5 @@ import { useEffect, useRef, useState, RefObject } from 'react'; -import { useTheme } from '@emotion/react'; +import { useTheme, css } from '@emotion/react'; type ReadingProgressBarProps = { targetRef: RefObject; @@ -7,7 +7,7 @@ type ReadingProgressBarProps = { hasContinueReadingButton?: boolean; }; -const barWrapperStyles = { +const barWrapperStyles = css({ position: 'sticky', top: 0, left: 0, @@ -15,17 +15,18 @@ const barWrapperStyles = { zIndex: 9999, background: 'transparent', height: 4, -}; - -const progressBarStyles = (palette, width: number) => ({ - display: 'block', - height: 4, - width: `${width}%`, - background: palette.POSTBOX, - borderRadius: 2, - transition: 'width 0.06s ease-in', }); +const progressBarStyles = (palette, width: number) => + css({ + display: 'block', + height: 4, + width: `${width}%`, + background: palette.POSTBOX, + borderRadius: 2, + transition: 'width 0.06s ease-in', + }); + const ReadingProgressBar = ({ targetRef, showAllContent = true, From e1c343229adcc24f65428d8a565cf0044633a5ae Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E2=80=9CLilyL0u=E2=80=9D?= Date: Thu, 15 Jan 2026 23:11:52 +0000 Subject: [PATCH 7/9] snapshots --- .../__snapshots__/index.test.tsx.snap | 1586 +++++++++-------- 1 file changed, 868 insertions(+), 718 deletions(-) diff --git a/src/app/pages/ArticlePage/__snapshots__/index.test.tsx.snap b/src/app/pages/ArticlePage/__snapshots__/index.test.tsx.snap index dadbd758e1a..91519ac1031 100644 --- a/src/app/pages/ArticlePage/__snapshots__/index.test.tsx.snap +++ b/src/app/pages/ArticlePage/__snapshots__/index.test.tsx.snap @@ -32,79 +32,100 @@ exports[`Article Page should render a ltr article (pidgin) with most read correc } .emotion-3 { + position: -webkit-sticky; + position: sticky; + top: 0; + left: 0; + width: 100%; + z-index: 9999; + background: transparent; + height: 4px; +} + +.emotion-4 { + display: block; + height: 4px; + width: 0%; + background: #B80000; + border-radius: 2px; + -webkit-transition: width 0.06s ease-in; + transition: width 0.06s ease-in; +} + +.emotion-5 { padding-bottom: 1.5rem; } -.emotion-3 [id="continue-reading-button"]~* { +.emotion-5 [id="continue-reading-button"]~* { display: none; } -.no-js .emotion-3 [id="continue-reading-button"]~*, -.is-opera-mini .emotion-3 [id="continue-reading-button"]~* { +.no-js .emotion-5 [id="continue-reading-button"]~*, +.is-opera-mini .emotion-5 [id="continue-reading-button"]~* { display: block; } @media (min-width: 63rem) { - .emotion-3 [id="continue-reading-button"]~* { + .emotion-5 [id="continue-reading-button"]~* { display: block; } } -.emotion-3 [data-first-hidden-element="true"]:focus-visible { +.emotion-5 [data-first-hidden-element="true"]:focus-visible { outline: 0.1875rem solid #000000; box-shadow: 0 0 0 0.1875rem #FFFFFF; outline-offset: 0.1875rem; } @media (max-width: 14.9375rem) { - .emotion-4 { + .emotion-6 { padding: 0 0.5rem; margin-left: 0%; } } @media (min-width: 15rem) and (max-width: 24.9375rem) { - .emotion-4 { + .emotion-6 { padding: 0 0.5rem; margin-left: 0%; } } @media (min-width: 25rem) and (max-width: 37.4375rem) { - .emotion-4 { + .emotion-6 { padding: 0 1rem; margin-left: 0%; } } @media (min-width: 37.5rem) and (max-width: 62.9375rem) { - .emotion-4 { + .emotion-6 { padding: 0 1rem; margin-left: 0%; } } @media (min-width: 63rem) and (max-width: 79.9375rem) { - .emotion-4 { + .emotion-6 { margin-left: 16.666666666666668%; } } @media (min-width: 80rem) { - .emotion-4 { + .emotion-6 { margin-left: 33.333333333333336%; } } @supports (display: grid) { - .emotion-4 { + .emotion-6 { display: block; width: initial; margin: 0; } @media (max-width: 14.9375rem) { - .emotion-4 { + .emotion-6 { grid-template-columns: repeat(6, 1fr); grid-column-end: span 6; padding: 0 0.5rem; @@ -113,7 +134,7 @@ exports[`Article Page should render a ltr article (pidgin) with most read correc } @media (min-width: 15rem) and (max-width: 24.9375rem) { - .emotion-4 { + .emotion-6 { grid-template-columns: repeat(6, 1fr); grid-column-end: span 6; padding: 0 0.5rem; @@ -122,7 +143,7 @@ exports[`Article Page should render a ltr article (pidgin) with most read correc } @media (min-width: 25rem) and (max-width: 37.4375rem) { - .emotion-4 { + .emotion-6 { grid-template-columns: repeat(6, 1fr); grid-column-end: span 6; padding: 0 1rem; @@ -131,7 +152,7 @@ exports[`Article Page should render a ltr article (pidgin) with most read correc } @media (min-width: 37.5rem) and (max-width: 62.9375rem) { - .emotion-4 { + .emotion-6 { grid-template-columns: repeat(6, 1fr); grid-column-end: span 6; padding: 0 1rem; @@ -140,7 +161,7 @@ exports[`Article Page should render a ltr article (pidgin) with most read correc } @media (min-width: 63rem) and (max-width: 79.9375rem) { - .emotion-4 { + .emotion-6 { grid-template-columns: repeat(6, 1fr); grid-column-end: span 6; grid-column-start: 2; @@ -148,7 +169,7 @@ exports[`Article Page should render a ltr article (pidgin) with most read correc } @media (min-width: 80rem) { - .emotion-4 { + .emotion-6 { grid-template-columns: repeat(12, 1fr); grid-column-end: span 12; grid-column-start: 5; @@ -156,7 +177,7 @@ exports[`Article Page should render a ltr article (pidgin) with most read correc } } -.emotion-6 { +.emotion-8 { font-size: 1.75rem; line-height: 2rem; font-family: Helmet,Freesans,Helvetica,Arial,sans-serif; @@ -170,78 +191,78 @@ exports[`Article Page should render a ltr article (pidgin) with most read correc } @media (min-width: 20rem) and (max-width: 37.4375rem) { - .emotion-6 { + .emotion-8 { font-size: 2rem; line-height: 2.25rem; } } @media (min-width: 37.5rem) { - .emotion-6 { + .emotion-8 { font-size: 2.75rem; line-height: 3rem; } } @media (min-width: 37.5rem) { - .emotion-6 { + .emotion-8 { padding: 2.5rem 0; } } -.emotion-6:focus { +.emotion-8:focus { outline: none; } @media (max-width: 14.9375rem) { - .emotion-8 { + .emotion-10 { padding: 0 0.5rem; margin-left: 0%; } } @media (min-width: 15rem) and (max-width: 24.9375rem) { - .emotion-8 { + .emotion-10 { padding: 0 0.5rem; margin-left: 0%; } } @media (min-width: 25rem) and (max-width: 37.4375rem) { - .emotion-8 { + .emotion-10 { padding: 0 1rem; margin-left: 0%; } } @media (min-width: 37.5rem) and (max-width: 62.9375rem) { - .emotion-8 { + .emotion-10 { padding: 0 1rem; margin-left: 0%; } } @media (min-width: 63rem) and (max-width: 79.9375rem) { - .emotion-8 { + .emotion-10 { margin-left: 20%; } } @media (min-width: 80rem) { - .emotion-8 { + .emotion-10 { margin-left: 40%; } } @supports (display: grid) { - .emotion-8 { + .emotion-10 { display: block; width: initial; margin: 0; } @media (max-width: 14.9375rem) { - .emotion-8 { + .emotion-10 { grid-template-columns: repeat(6, 1fr); grid-column-end: span 6; padding: 0 0.5rem; @@ -250,7 +271,7 @@ exports[`Article Page should render a ltr article (pidgin) with most read correc } @media (min-width: 15rem) and (max-width: 24.9375rem) { - .emotion-8 { + .emotion-10 { grid-template-columns: repeat(6, 1fr); grid-column-end: span 6; padding: 0 0.5rem; @@ -259,7 +280,7 @@ exports[`Article Page should render a ltr article (pidgin) with most read correc } @media (min-width: 25rem) and (max-width: 37.4375rem) { - .emotion-8 { + .emotion-10 { grid-template-columns: repeat(6, 1fr); grid-column-end: span 6; padding: 0 1rem; @@ -268,7 +289,7 @@ exports[`Article Page should render a ltr article (pidgin) with most read correc } @media (min-width: 37.5rem) and (max-width: 62.9375rem) { - .emotion-8 { + .emotion-10 { grid-template-columns: repeat(5, 1fr); grid-column-end: span 5; padding: 0 1rem; @@ -277,7 +298,7 @@ exports[`Article Page should render a ltr article (pidgin) with most read correc } @media (min-width: 63rem) and (max-width: 79.9375rem) { - .emotion-8 { + .emotion-10 { grid-template-columns: repeat(5, 1fr); grid-column-end: span 5; grid-column-start: 2; @@ -285,7 +306,7 @@ exports[`Article Page should render a ltr article (pidgin) with most read correc } @media (min-width: 80rem) { - .emotion-8 { + .emotion-10 { grid-template-columns: repeat(10, 1fr); grid-column-end: span 10; grid-column-start: 5; @@ -293,7 +314,7 @@ exports[`Article Page should render a ltr article (pidgin) with most read correc } } -.emotion-10 { +.emotion-12 { font-size: 0.9375rem; line-height: 1.25rem; font-family: Helmet,Freesans,Helvetica,Arial,sans-serif; @@ -305,27 +326,27 @@ exports[`Article Page should render a ltr article (pidgin) with most read correc } @media (min-width: 20rem) and (max-width: 37.4375rem) { - .emotion-10 { + .emotion-12 { font-size: 1rem; line-height: 1.375rem; } } @media (min-width: 37.5rem) { - .emotion-10 { + .emotion-12 { font-size: 1rem; line-height: 1.375rem; } } @media (min-width: 63rem) { - .emotion-10 { + .emotion-12 { padding-right: 2.5rem; } } @media (max-width: 24.9375rem) { - .emotion-12 { + .emotion-14 { margin: 0 0.5rem; padding-bottom: 1.5rem; } @@ -333,7 +354,7 @@ exports[`Article Page should render a ltr article (pidgin) with most read correc @media (min-width: 25rem) { @media (max-width: 62.9375rem) { - .emotion-12 { + .emotion-14 { margin: 0 1rem; padding-bottom: 2rem; } @@ -341,21 +362,21 @@ exports[`Article Page should render a ltr article (pidgin) with most read correc } @media (min-width: 63rem) and (max-width: 79.9375rem) { - .emotion-12 { + .emotion-14 { margin: 0 1rem; padding-bottom: 2.5rem; } } @media (min-width: 80rem) { - .emotion-12 { + .emotion-14 { margin: 0 auto; padding: 0 1rem 1.5rem; max-width: 80rem; } } -.emotion-13 { +.emotion-15 { position: relative; z-index: 0; color: #141414; @@ -363,36 +384,36 @@ exports[`Article Page should render a ltr article (pidgin) with most read correc } @media (min-width: 37.5rem) { - .emotion-13 { + .emotion-15 { margin-top: 1.5rem; } } @media (min-width: 63rem) { - .emotion-13 { + .emotion-15 { margin-bottom: 1.5rem; } } @media (min-width: 37.5rem) and (max-width: 62.9375rem) { - .emotion-13 { + .emotion-15 { margin-bottom: 1rem; } } -.emotion-15 { +.emotion-17 { margin: 0; padding: 0; scroll-margin-top: 1rem; } -.emotion-15:focus-visible { +.emotion-17:focus-visible { outline: 0.1875rem solid #000000; box-shadow: 0 0 0 0.1875rem #FFFFFF; outline-offset: 0.1875rem; } -.emotion-17 { +.emotion-19 { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; @@ -402,7 +423,7 @@ exports[`Article Page should render a ltr article (pidgin) with most read correc flex-direction: column; } -.emotion-19 { +.emotion-21 { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; @@ -422,7 +443,7 @@ exports[`Article Page should render a ltr article (pidgin) with most read correc } @media (min-width: 37.5rem) { - .emotion-19 { + .emotion-21 { -webkit-align-items: stretch; -webkit-box-align: stretch; -ms-flex-align: stretch; @@ -430,7 +451,7 @@ exports[`Article Page should render a ltr article (pidgin) with most read correc } } -.emotion-21 { +.emotion-23 { font-size: 1.125rem; line-height: 1.375rem; font-family: Helmet,Freesans,Helvetica,Arial,sans-serif; @@ -450,32 +471,32 @@ exports[`Article Page should render a ltr article (pidgin) with most read correc } @media (min-width: 20rem) and (max-width: 37.4375rem) { - .emotion-21 { + .emotion-23 { font-size: 1.25rem; line-height: 1.5rem; } } @media (min-width: 37.5rem) { - .emotion-21 { + .emotion-23 { font-size: 1.5rem; line-height: 1.75rem; } } @media (min-width: 37.5rem) { - .emotion-21 { + .emotion-23 { margin: 0; } } @media (min-width: 37.5rem) { - .emotion-21 { + .emotion-23 { padding-right: 1rem; } } -.emotion-23 { +.emotion-25 { list-style-type: none; margin: 0; padding: 0; @@ -484,7 +505,7 @@ exports[`Article Page should render a ltr article (pidgin) with most read correc } @supports (display: grid) { - .emotion-23 { + .emotion-25 { display: grid; position: initial; width: initial; @@ -492,7 +513,7 @@ exports[`Article Page should render a ltr article (pidgin) with most read correc } @media (max-width: 14.9375rem) { - .emotion-23 { + .emotion-25 { grid-template-columns: repeat(6, 1fr); grid-column-end: span 6; grid-column-gap: 0.5rem; @@ -500,7 +521,7 @@ exports[`Article Page should render a ltr article (pidgin) with most read correc } @media (min-width: 15rem) and (max-width: 24.9375rem) { - .emotion-23 { + .emotion-25 { grid-template-columns: repeat(6, 1fr); grid-column-end: span 6; grid-column-gap: 0.5rem; @@ -508,7 +529,7 @@ exports[`Article Page should render a ltr article (pidgin) with most read correc } @media (min-width: 25rem) and (max-width: 37.4375rem) { - .emotion-23 { + .emotion-25 { grid-template-columns: repeat(6, 1fr); grid-column-end: span 6; grid-column-gap: 0.5rem; @@ -516,7 +537,7 @@ exports[`Article Page should render a ltr article (pidgin) with most read correc } @media (min-width: 37.5rem) and (max-width: 62.9375rem) { - .emotion-23 { + .emotion-25 { grid-template-columns: repeat(6, 1fr); grid-column-end: span 6; grid-column-gap: 1rem; @@ -524,7 +545,7 @@ exports[`Article Page should render a ltr article (pidgin) with most read correc } @media (min-width: 63rem) and (max-width: 79.9375rem) { - .emotion-23 { + .emotion-25 { grid-template-columns: repeat(8, 1fr); grid-column-end: span 8; grid-column-gap: 1rem; @@ -532,7 +553,7 @@ exports[`Article Page should render a ltr article (pidgin) with most read correc } @media (min-width: 80rem) { - .emotion-23 { + .emotion-25 { grid-template-columns: repeat(20, 1fr); grid-column-end: span 20; grid-column-gap: 1rem; @@ -541,24 +562,24 @@ exports[`Article Page should render a ltr article (pidgin) with most read correc } @media (min-width: 80rem) { - .emotion-23 { + .emotion-25 { grid-auto-flow: row; } } @media (min-width: 37.5rem) { - .emotion-23 { + .emotion-25 { grid-template-rows: repeat(3, auto); } } -.emotion-25 { +.emotion-27 { position: relative; padding-bottom: 1.5rem; } @media (max-width: 14.9375rem) { - .emotion-25 { + .emotion-27 { width: calc(100%); display: inline-block; vertical-align: top; @@ -566,7 +587,7 @@ exports[`Article Page should render a ltr article (pidgin) with most read correc } @media (min-width: 15rem) and (max-width: 24.9375rem) { - .emotion-25 { + .emotion-27 { width: calc(100%); display: inline-block; vertical-align: top; @@ -574,7 +595,7 @@ exports[`Article Page should render a ltr article (pidgin) with most read correc } @media (min-width: 25rem) and (max-width: 37.4375rem) { - .emotion-25 { + .emotion-27 { width: calc(100%); display: inline-block; vertical-align: top; @@ -582,7 +603,7 @@ exports[`Article Page should render a ltr article (pidgin) with most read correc } @media (min-width: 37.5rem) and (max-width: 62.9375rem) { - .emotion-25 { + .emotion-27 { width: calc(50%); display: inline-block; vertical-align: top; @@ -590,7 +611,7 @@ exports[`Article Page should render a ltr article (pidgin) with most read correc } @media (min-width: 63rem) and (max-width: 79.9375rem) { - .emotion-25 { + .emotion-27 { width: calc(50%); display: inline-block; vertical-align: top; @@ -598,7 +619,7 @@ exports[`Article Page should render a ltr article (pidgin) with most read correc } @media (min-width: 80rem) { - .emotion-25 { + .emotion-27 { width: calc(20%); display: inline-block; vertical-align: top; @@ -606,56 +627,56 @@ exports[`Article Page should render a ltr article (pidgin) with most read correc } @supports (display: grid) { - .emotion-25 { + .emotion-27 { display: block; width: initial; margin: 0; } @media (max-width: 14.9375rem) { - .emotion-25 { + .emotion-27 { grid-template-columns: repeat(6, 1fr); grid-column-end: span 6; } } @media (min-width: 15rem) and (max-width: 24.9375rem) { - .emotion-25 { + .emotion-27 { grid-template-columns: repeat(6, 1fr); grid-column-end: span 6; } } @media (min-width: 25rem) and (max-width: 37.4375rem) { - .emotion-25 { + .emotion-27 { grid-template-columns: repeat(6, 1fr); grid-column-end: span 6; } } @media (min-width: 37.5rem) and (max-width: 62.9375rem) { - .emotion-25 { + .emotion-27 { grid-template-columns: repeat(3, 1fr); grid-column-end: span 3; } } @media (min-width: 63rem) and (max-width: 79.9375rem) { - .emotion-25 { + .emotion-27 { grid-template-columns: repeat(4, 1fr); grid-column-end: span 4; } } @media (min-width: 80rem) { - .emotion-25 { + .emotion-27 { grid-template-columns: repeat(4, 1fr); grid-column-end: span 4; } } } -.emotion-27 { +.emotion-29 { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; @@ -668,50 +689,50 @@ exports[`Article Page should render a ltr article (pidgin) with most read correc } @media (max-width: 14.9375rem) { - .emotion-28 { + .emotion-30 { min-width: 1.5rem; } } @media (min-width: 15rem) and (max-width: 24.9375rem) { - .emotion-28 { + .emotion-30 { min-width: 1.5rem; } } @media (min-width: 25rem) and (max-width: 37.4375rem) { - .emotion-28 { + .emotion-30 { min-width: 1.5rem; } } @media (min-width: 37.5rem) { - .emotion-28 { + .emotion-30 { min-width: 2rem; } } @media (min-width: 37.5rem) { - .emotion-28 { + .emotion-30 { min-width: 2rem; } } @supports (grid-template-columns: fit-content(200px)) { @media (min-width: 37.5rem) { - .emotion-28 { + .emotion-30 { min-width: 2rem; } } } @media (min-width: 80rem) { - .emotion-28 { + .emotion-30 { min-width: 2rem; } } -.emotion-29 { +.emotion-31 { font-family: Helmet,Freesans,Helvetica,Arial,sans-serif; font-style: normal; font-weight: 400; @@ -724,32 +745,32 @@ exports[`Article Page should render a ltr article (pidgin) with most read correc } @media (min-width: 20rem) and (max-width: 37.4375rem) { - .emotion-29 { + .emotion-31 { font-size: 2.5rem; line-height: 2.75rem; } } @media (min-width: 37.5rem) { - .emotion-29 { + .emotion-31 { font-size: 3.5rem; line-height: 3.75rem; } } -.emotion-30 { +.emotion-32 { padding-top: 0.375rem; padding-left: 1rem; padding-right: 1rem; } @supports (grid-template-columns: fit-content(200px)) { - .emotion-30 { + .emotion-32 { padding-right: 0; } } -.emotion-31 { +.emotion-33 { font-size: 0.9375rem; line-height: 1.25rem; font-family: Helmet,Freesans,Helvetica,Arial,sans-serif; @@ -763,26 +784,26 @@ exports[`Article Page should render a ltr article (pidgin) with most read correc } @media (min-width: 20rem) and (max-width: 37.4375rem) { - .emotion-31 { + .emotion-33 { font-size: 1rem; line-height: 1.25rem; } } @media (min-width: 37.5rem) { - .emotion-31 { + .emotion-33 { font-size: 1rem; line-height: 1.25rem; } } -.emotion-31:hover, -.emotion-31:focus { +.emotion-33:hover, +.emotion-33:focus { -webkit-text-decoration: underline; text-decoration: underline; } -.emotion-31:before { +.emotion-33:before { bottom: 0; content: ''; left: 0; @@ -795,31 +816,31 @@ exports[`Article Page should render a ltr article (pidgin) with most read correc } @media (min-width: 25rem) { - .emotion-31 { + .emotion-33 { font-size: 1.125rem; line-height: 1.375rem; } @media (min-width: 20rem) and (max-width: 37.4375rem) { - .emotion-31 { + .emotion-33 { font-size: 1.125rem; line-height: 1.375rem; } } @media (min-width: 37.5rem) { - .emotion-31 { + .emotion-33 { font-size: 1.25rem; line-height: 1.5rem; } } } -.emotion-32 { +.emotion-34 { padding-top: 0.5rem; } -.emotion-33 { +.emotion-35 { font-size: 0.875rem; line-height: 1.125rem; color: #545658; @@ -830,14 +851,14 @@ exports[`Article Page should render a ltr article (pidgin) with most read correc } @media (min-width: 20rem) and (max-width: 37.4375rem) { - .emotion-33 { + .emotion-35 { font-size: 0.875rem; line-height: 1.125rem; } } @media (min-width: 37.5rem) { - .emotion-33 { + .emotion-35 { font-size: 0.8125rem; line-height: 1rem; } @@ -859,16 +880,25 @@ exports[`Article Page should render a ltr article (pidgin) with most read correc
-
+ +
+

@@ -876,11 +906,11 @@ exports[`Article Page should render a ltr article (pidgin) with most read correc

A paragraph in Pidgin. @@ -891,27 +921,27 @@ exports[`Article Page should render a ltr article (pidgin) with most read correc

@@ -922,43 +952,43 @@ exports[`Article Page should render a ltr article (pidgin) with most read correc

  1. 1
    Teams wey qualify for Afcon 2023 and how things stand for each group
  2. 2
    'We dey hear gospel songs den screaming' - Woman tok of Uganda school attack
  3. 3
    Super Eagles qualify for Nations Cup afta beating Sierra Leone for Monrovia
  4. 4
    Forbes top ten list of highest paid athletes for 2023 and wetin dem earn
  5. 5
    Tins to sabi about 2023 Sierra Leone general election
+ +
+
`; exports[`Header Snapshots should render correctly for WS on demand audio page 1`] = ` .emotion-0 { + position: -webkit-sticky; + position: sticky; + top: 0; + left: 0; + width: 100%; + z-index: 10000; + -webkit-transition: -webkit-transform 0.3s ease; + transition: transform 0.3s ease; + -webkit-transform: translateY(0); + -moz-transform: translateY(0); + -ms-transform: translateY(0); + transform: translateY(0); + will-change: transform; +} + +.emotion-1 { position: fixed; bottom: 0; left: 0; @@ -1338,7 +1375,7 @@ exports[`Header Snapshots should render correctly for WS on demand audio page 1` z-index: 2147483647; } -.emotion-2 { +.emotion-3 { font-family: ReithSans,Helvetica,Arial,sans-serif; font-style: normal; font-weight: 400; @@ -1346,48 +1383,48 @@ exports[`Header Snapshots should render correctly for WS on demand audio page 1` border-top: solid 0.0625rem transparent; } -.emotion-4 { +.emotion-5 { max-width: 37.4375rem; margin: 0 auto; } -.emotion-4 a { +.emotion-5 a { color: #F6A21D; -webkit-text-decoration: none; text-decoration: none; border-bottom: solid 0.0625rem #AEAEB5; } -.emotion-4 a:focus, -.emotion-4 a:hover { +.emotion-5 a:focus, +.emotion-5 a:hover { color: #222222; background-color: #F6A21D; } -.emotion-4 a:hover, -.emotion-4 a:focus { +.emotion-5 a:hover, +.emotion-5 a:focus { border-bottom: solid 0.125rem transparent; } @media (max-width: 24.9375rem) { - .emotion-4 { + .emotion-5 { padding: 2.75rem 1rem 0.5rem 1rem; } } @media (min-width: 25rem) and (max-width: 37.4375rem) { - .emotion-4 { + .emotion-5 { padding: 2.75rem 1rem 0.5rem 1rem; } } @media (min-width: 37.5rem) { - .emotion-4 { + .emotion-5 { padding: calc(2rem - 0.0625rem) 1rem 2rem 1rem; } } -.emotion-6 { +.emotion-7 { font-size: 1.125rem; line-height: 1.375rem; color: #FFFFFF; @@ -1397,24 +1434,24 @@ exports[`Header Snapshots should render correctly for WS on demand audio page 1` } @media (min-width: 20rem) and (max-width: 37.4375rem) { - .emotion-6 { + .emotion-7 { font-size: 1.25rem; line-height: 1.5rem; } } @media (min-width: 37.5rem) { - .emotion-6 { + .emotion-7 { font-size: 1.5rem; line-height: 1.75rem; } } -.emotion-6:focus { +.emotion-7:focus { outline: none; } -.emotion-8 { +.emotion-9 { font-size: 0.9375rem; line-height: 1.25rem; margin-top: 1rem; @@ -1423,26 +1460,26 @@ exports[`Header Snapshots should render correctly for WS on demand audio page 1` } @media (min-width: 20rem) and (max-width: 37.4375rem) { - .emotion-8 { + .emotion-9 { font-size: 1rem; line-height: 1.375rem; } } @media (min-width: 37.5rem) { - .emotion-8 { + .emotion-9 { font-size: 1rem; line-height: 1.375rem; } } @media (min-width: 37.5rem) { - .emotion-8 { + .emotion-9 { margin-top: 1.5rem; } } -.emotion-10 { +.emotion-11 { font-size: 0.9375rem; line-height: 1.125rem; display: -webkit-box; @@ -1464,20 +1501,20 @@ exports[`Header Snapshots should render correctly for WS on demand audio page 1` } @media (min-width: 20rem) and (max-width: 37.4375rem) { - .emotion-10 { + .emotion-11 { font-size: 0.9375rem; line-height: 1.125rem; } } @media (min-width: 37.5rem) { - .emotion-10 { + .emotion-11 { font-size: 0.875rem; line-height: 1.125rem; } } -.emotion-10 li+li { +.emotion-11 li+li { margin-top: 0.5rem; padding-top: 1rem; padding-bottom: 1rem; @@ -1496,7 +1533,7 @@ exports[`Header Snapshots should render correctly for WS on demand audio page 1` } @media (min-width: 37.5rem) { - .emotion-10 { + .emotion-11 { -webkit-flex-direction: row; -ms-flex-direction: row; flex-direction: row; @@ -1505,18 +1542,18 @@ exports[`Header Snapshots should render correctly for WS on demand audio page 1` justify-content: space-between; } - .emotion-10 li+li { + .emotion-11 li+li { margin-top: 0; } } -.emotion-12 { +.emotion-13 { text-align: center; width: 100%; word-break: break-word; } -.emotion-12 button { +.emotion-13 button { font-size: 0.9375rem; line-height: 1.125rem; width: 100%; @@ -1530,42 +1567,42 @@ exports[`Header Snapshots should render correctly for WS on demand audio page 1` } @media (min-width: 20rem) and (max-width: 37.4375rem) { - .emotion-12 button { + .emotion-13 button { font-size: 0.9375rem; line-height: 1.125rem; } } @media (min-width: 37.5rem) { - .emotion-12 button { + .emotion-13 button { font-size: 0.875rem; line-height: 1.125rem; } } -.emotion-12 button:focus, -.emotion-12 button:hover { +.emotion-13 button:focus, +.emotion-13 button:hover { color: #222222; background-color: #F6A21D; } -.emotion-12 button:hover, -.emotion-12 button:focus { +.emotion-13 button:hover, +.emotion-13 button:focus { -webkit-text-decoration: underline; text-decoration: underline; } -.emotion-12 button:focus-visible { +.emotion-13 button:focus-visible { outline: 0.1875rem solid #000000; } @media (min-width: 25rem) { - .emotion-12 { + .emotion-13 { width: 17.3125rem; } } -.emotion-12.hide { +.emotion-13.hide { width: 2.75rem; height: 2.75rem; position: absolute; @@ -1575,7 +1612,7 @@ exports[`Header Snapshots should render correctly for WS on demand audio page 1` padding: 0; } -.emotion-12.hide button { +.emotion-13.hide button { width: 2.75rem; height: 2.75rem; cursor: pointer; @@ -1583,8 +1620,8 @@ exports[`Header Snapshots should render correctly for WS on demand audio page 1` border: none; } -.emotion-12.hide button:focus::after, -.emotion-12.hide button:hover::after { +.emotion-13.hide button:focus::after, +.emotion-13.hide button:hover::after { content: ''; position: absolute; left: 0; @@ -1594,7 +1631,7 @@ exports[`Header Snapshots should render correctly for WS on demand audio page 1` border: 0.1875rem solid #FFFFFF; } -.emotion-12.hide button:focus-visible::after { +.emotion-13.hide button:focus-visible::after { content: ''; position: absolute; left: 0; @@ -1605,7 +1642,7 @@ exports[`Header Snapshots should render correctly for WS on demand audio page 1` box-shadow: 0 0 0 0.1875rem #FFFFFF inset; } -.emotion-12.hide svg { +.emotion-13.hide svg { color: white; fill: currentColor; position: absolute; @@ -1613,7 +1650,7 @@ exports[`Header Snapshots should render correctly for WS on demand audio page 1` right: 0; } -.emotion-17 { +.emotion-18 { background-color: #B80000; height: 2.75rem; width: 100%; @@ -1623,36 +1660,36 @@ exports[`Header Snapshots should render correctly for WS on demand audio page 1` } @media (min-width: 15rem) { - .emotion-17 { + .emotion-18 { height: 3.75rem; padding: 0 0.5rem; } } @media (min-width: 25rem) { - .emotion-17 { + .emotion-18 { height: 3.75rem; padding: 0 1rem; } } @media (min-width: 37.5rem) { - .emotion-17 { + .emotion-18 { height: 4rem; } } -.emotion-17 svg { +.emotion-18 svg { fill: currentColor; } @media screen and (forced-colors: active) { - .emotion-17 svg { + .emotion-18 svg { fill: linkText; } } -.emotion-19 { +.emotion-20 { height: 100%; position: relative; display: -webkit-box; @@ -1675,12 +1712,12 @@ exports[`Header Snapshots should render correctly for WS on demand audio page 1` } @media (max-width: 14.9375rem) { - .emotion-19 { + .emotion-20 { display: block; } } -.emotion-21 { +.emotion-22 { height: 100%; display: -webkit-box; display: -webkit-flex; @@ -1695,15 +1732,15 @@ exports[`Header Snapshots should render correctly for WS on demand audio page 1` padding-top: 0.125rem; } -.emotion-21:hover, -.emotion-21:focus { +.emotion-22:hover, +.emotion-22:focus { -webkit-text-decoration: none; text-decoration: none; border-bottom: 0.25rem solid #FFFFFF; margin-bottom: -0.25rem; } -.emotion-21:focus-visible::after { +.emotion-22:focus-visible::after { content: ''; position: absolute; top: 0; @@ -1714,7 +1751,7 @@ exports[`Header Snapshots should render correctly for WS on demand audio page 1` outline: 0.25rem solid #FFFFFF; } -.emotion-23 { +.emotion-24 { box-sizing: content-box; color: #FFFFFF; fill: currentColor; @@ -1722,24 +1759,24 @@ exports[`Header Snapshots should render correctly for WS on demand audio page 1` } @media (min-width: 25rem) { - .emotion-23 { + .emotion-24 { height: 1.5rem; } } @media (min-width: 37.5rem) { - .emotion-23 { + .emotion-24 { height: 1.875rem; } } @media screen and (-ms-high-contrast: active),print { - .emotion-23 { + .emotion-24 { fill: windowText; } } -.emotion-25 { +.emotion-26 { -webkit-clip-path: inset(100%); clip-path: inset(100%); clip: rect(1px, 1px, 1px, 1px); @@ -1750,7 +1787,7 @@ exports[`Header Snapshots should render correctly for WS on demand audio page 1` margin: 0; } -.emotion-26 { +.emotion-27 { position: absolute; -webkit-clip-path: inset(100%); clip-path: inset(100%); @@ -1772,20 +1809,20 @@ exports[`Header Snapshots should render correctly for WS on demand audio page 1` } @media (min-width: 20rem) and (max-width: 37.4375rem) { - .emotion-26 { + .emotion-27 { font-size: 1rem; line-height: 1.25rem; } } @media (min-width: 37.5rem) { - .emotion-26 { + .emotion-27 { font-size: 1rem; line-height: 1.25rem; } } -.emotion-26:focus { +.emotion-27:focus { -webkit-clip-path: none; clip-path: none; clip: auto; @@ -1796,24 +1833,24 @@ exports[`Header Snapshots should render correctly for WS on demand audio page 1` } @media (min-width: 25rem) { - .emotion-26:focus { + .emotion-27:focus { top: 0.5rem; } } @media (max-width: 37.4375rem) { - .emotion-26 { + .emotion-27 { padding: 0.5rem; } } -.emotion-28 { +.emotion-29 { position: relative; background-color: #FFFFFF; } @media (min-width: 62.9375rem) { - .emotion-28::after { + .emotion-29::after { content: ''; position: absolute; bottom: 0; @@ -1823,11 +1860,11 @@ exports[`Header Snapshots should render correctly for WS on demand audio page 1` } } -.emotion-28 .emotion-44::after { +.emotion-29 .emotion-45::after { left: 0; } -.emotion-30 { +.emotion-31 { position: relative; max-width: 63.4rem; margin: 0; @@ -1835,22 +1872,22 @@ exports[`Header Snapshots should render correctly for WS on demand audio page 1` } @media (min-width: 37.5rem) { - .emotion-30 { + .emotion-31 { margin: 0 0.8rem; } } @media (min-width: 66rem) { - .emotion-30 { + .emotion-31 { margin: 0 auto; } } -.emotion-32 { +.emotion-33 { position: relative; } -.emotion-34 { +.emotion-35 { position: relative; padding: 0; margin: 0; @@ -1861,14 +1898,14 @@ exports[`Header Snapshots should render correctly for WS on demand audio page 1` width: 2.75rem; } -.emotion-34:hover, -.emotion-34:focus { +.emotion-35:hover, +.emotion-35:focus { cursor: pointer; box-shadow: inset 0 0 0 0.25rem #FFFFFF; } -.emotion-34:hover::after, -.emotion-34:focus::after { +.emotion-35:hover::after, +.emotion-35:focus::after { content: ''; position: absolute; left: 0; @@ -1879,36 +1916,36 @@ exports[`Header Snapshots should render correctly for WS on demand audio page 1` } @media (min-width: 37.5rem) { - .emotion-34 { + .emotion-35 { display: none; visibility: hidden; } } @media (min-width: 20rem) { - .emotion-34 { + .emotion-35 { height: 2.75rem; width: 2.75rem; } } -.emotion-34 svg { +.emotion-35 svg { vertical-align: middle; } -.emotion-36 { +.emotion-37 { color: #000000; fill: currentColor; } @media screen and (forced-colors: active) { - .emotion-36 { + .emotion-37 { fill: linkText; } } @media (max-width: 37.4375rem) { - .emotion-39 { + .emotion-40 { white-space: nowrap; overflow-x: scroll; scroll-behavior: auto; @@ -1917,15 +1954,15 @@ exports[`Header Snapshots should render correctly for WS on demand audio page 1` -ms-overflow-style: none; } - .emotion-39::-webkit-scrollbar { + .emotion-40::-webkit-scrollbar { display: none; } - .emotion-39:focus-visible { + .emotion-40:focus-visible { outline: none; } - .emotion-39:focus-visible::after { + .emotion-40:focus-visible::after { outline: 0.1875rem solid #000000; content: ''; position: absolute; @@ -1933,7 +1970,7 @@ exports[`Header Snapshots should render correctly for WS on demand audio page 1` height: 100%; } - .emotion-39:after { + .emotion-40:after { content: ' '; height: 100%; width: 3rem; @@ -1951,13 +1988,13 @@ exports[`Header Snapshots should render correctly for WS on demand audio page 1` } @media (min-width: 25rem) { - .emotion-39:after { + .emotion-40:after { width: 6rem; } } } -.emotion-41 { +.emotion-42 { list-style-type: none; padding: 0; margin: 0; @@ -1965,12 +2002,12 @@ exports[`Header Snapshots should render correctly for WS on demand audio page 1` } @media (min-width: 37.5rem) { - .emotion-41 { + .emotion-42 { overflow: hidden; } } -.emotion-43 { +.emotion-44 { display: inline-block; position: relative; z-index: 2; @@ -1979,13 +2016,13 @@ exports[`Header Snapshots should render correctly for WS on demand audio page 1` } @media (max-width: 37.4375rem) { - .emotion-43:last-child { + .emotion-44:last-child { margin-right: 3rem; } } @media (min-width: 37.5rem) { - .emotion-43::after { + .emotion-44::after { content: ''; position: absolute; bottom: -1px; @@ -1995,7 +2032,7 @@ exports[`Header Snapshots should render correctly for WS on demand audio page 1` } } -.emotion-45 { +.emotion-46 { font-size: 0.9375rem; line-height: 1.25rem; font-family: ReithSans,Helvetica,Arial,sans-serif; @@ -2011,26 +2048,26 @@ exports[`Header Snapshots should render correctly for WS on demand audio page 1` } @media (min-width: 20rem) and (max-width: 37.4375rem) { - .emotion-45 { + .emotion-46 { font-size: 1rem; line-height: 1.25rem; } } @media (min-width: 37.5rem) { - .emotion-45 { + .emotion-46 { font-size: 1rem; line-height: 1.25rem; } } @media (max-width: 37.4375rem) { - .emotion-45 { + .emotion-46 { padding: 0.75rem 0.5rem; } } -.emotion-45:hover::after { +.emotion-46:hover::after { content: ''; position: absolute; left: 0; @@ -2039,7 +2076,7 @@ exports[`Header Snapshots should render correctly for WS on demand audio page 1` border-bottom: 0.25rem solid #B80000; } -.emotion-45:focus::after { +.emotion-46:focus::after { content: ''; position: absolute; left: 0; @@ -2050,7 +2087,7 @@ exports[`Header Snapshots should render correctly for WS on demand audio page 1` border: 0.1875rem solid #000000; } -.emotion-45:focus-visible::after { +.emotion-46:focus-visible::after { content: ''; position: absolute; left: 0; @@ -2061,7 +2098,7 @@ exports[`Header Snapshots should render correctly for WS on demand audio page 1` border: 0.1875rem solid #000000; } -.emotion-87 { +.emotion-88 { background-color: #FFFFFF; clear: both; overflow: hidden; @@ -2073,37 +2110,37 @@ exports[`Header Snapshots should render correctly for WS on demand audio page 1` } @media (min-width: 37.5rem) { - .emotion-87 { + .emotion-88 { display: none; visibility: hidden; } } @media (prefers-reduced-motion: reduce) { - .emotion-87 { + .emotion-88 { -webkit-transition: none; transition: none; } } -.emotion-89 { +.emotion-90 { list-style-type: none; margin: 0; padding: 0 0.5rem; border-bottom: 0.0625rem solid #E6E8EA; } -.emotion-91 { +.emotion-92 { padding: 0.75rem 0; border-bottom: 0.0625rem solid #E6E8EA; } -.emotion-91:last-child { +.emotion-92:last-child { padding-bottom: 0.25rem; border: 0; } -.emotion-93 { +.emotion-94 { font-size: 0.9375rem; line-height: 1.25rem; font-family: ReithSans,Helvetica,Arial,sans-serif; @@ -2117,40 +2154,40 @@ exports[`Header Snapshots should render correctly for WS on demand audio page 1` } @media (min-width: 20rem) and (max-width: 37.4375rem) { - .emotion-93 { + .emotion-94 { font-size: 1rem; line-height: 1.25rem; } } @media (min-width: 37.5rem) { - .emotion-93 { + .emotion-94 { font-size: 1rem; line-height: 1.25rem; } } -.emotion-93:hover, -.emotion-93:focus { +.emotion-94:hover, +.emotion-94:focus { -webkit-text-decoration: underline; text-decoration: underline; text-decoration-color: #B80000; } -.emotion-135 { +.emotion-136 { position: absolute; width: calc(100vw - 0.8rem); inset-inline-start: 0; } @media (min-width: 1041px) { - .emotion-135 { + .emotion-136 { width: calc(100vw + 0.8rem); inset-inline-start: calc(-1 * (100vw - 1014px) / 2); } } -.emotion-135::after { +.emotion-136::after { content: ''; position: absolute; inset-block-end: 0; @@ -2160,506 +2197,527 @@ exports[`Header Snapshots should render correctly for WS on demand audio page 1` } @media (min-width: 1008px) { - .emotion-135 { + .emotion-136 { display: none; } } -
- - + + +
`; exports[`Header Snapshots should render correctly for WS radio page 1`] = ` .emotion-0 { + position: -webkit-sticky; + position: sticky; + top: 0; + left: 0; + width: 100%; + z-index: 10000; + -webkit-transition: -webkit-transform 0.3s ease; + transition: transform 0.3s ease; + -webkit-transform: translateY(0); + -moz-transform: translateY(0); + -ms-transform: translateY(0); + transform: translateY(0); + will-change: transform; +} + +.emotion-1 { position: fixed; bottom: 0; left: 0; @@ -2667,7 +2725,7 @@ exports[`Header Snapshots should render correctly for WS radio page 1`] = ` z-index: 2147483647; } -.emotion-2 { +.emotion-3 { font-family: ReithSans,Helvetica,Arial,sans-serif; font-style: normal; font-weight: 400; @@ -2675,48 +2733,48 @@ exports[`Header Snapshots should render correctly for WS radio page 1`] = ` border-top: solid 0.0625rem transparent; } -.emotion-4 { +.emotion-5 { max-width: 37.4375rem; margin: 0 auto; } -.emotion-4 a { +.emotion-5 a { color: #F6A21D; -webkit-text-decoration: none; text-decoration: none; border-bottom: solid 0.0625rem #AEAEB5; } -.emotion-4 a:focus, -.emotion-4 a:hover { +.emotion-5 a:focus, +.emotion-5 a:hover { color: #222222; background-color: #F6A21D; } -.emotion-4 a:hover, -.emotion-4 a:focus { +.emotion-5 a:hover, +.emotion-5 a:focus { border-bottom: solid 0.125rem transparent; } @media (max-width: 24.9375rem) { - .emotion-4 { + .emotion-5 { padding: 2.75rem 1rem 0.5rem 1rem; } } @media (min-width: 25rem) and (max-width: 37.4375rem) { - .emotion-4 { + .emotion-5 { padding: 2.75rem 1rem 0.5rem 1rem; } } @media (min-width: 37.5rem) { - .emotion-4 { + .emotion-5 { padding: calc(2rem - 0.0625rem) 1rem 2rem 1rem; } } -.emotion-6 { +.emotion-7 { font-size: 1.125rem; line-height: 1.375rem; color: #FFFFFF; @@ -2726,24 +2784,24 @@ exports[`Header Snapshots should render correctly for WS radio page 1`] = ` } @media (min-width: 20rem) and (max-width: 37.4375rem) { - .emotion-6 { + .emotion-7 { font-size: 1.25rem; line-height: 1.5rem; } } @media (min-width: 37.5rem) { - .emotion-6 { + .emotion-7 { font-size: 1.5rem; line-height: 1.75rem; } } -.emotion-6:focus { +.emotion-7:focus { outline: none; } -.emotion-8 { +.emotion-9 { font-size: 0.9375rem; line-height: 1.25rem; margin-top: 1rem; @@ -2752,26 +2810,26 @@ exports[`Header Snapshots should render correctly for WS radio page 1`] = ` } @media (min-width: 20rem) and (max-width: 37.4375rem) { - .emotion-8 { + .emotion-9 { font-size: 1rem; line-height: 1.375rem; } } @media (min-width: 37.5rem) { - .emotion-8 { + .emotion-9 { font-size: 1rem; line-height: 1.375rem; } } @media (min-width: 37.5rem) { - .emotion-8 { + .emotion-9 { margin-top: 1.5rem; } } -.emotion-10 { +.emotion-11 { font-size: 0.9375rem; line-height: 1.125rem; display: -webkit-box; @@ -2793,20 +2851,20 @@ exports[`Header Snapshots should render correctly for WS radio page 1`] = ` } @media (min-width: 20rem) and (max-width: 37.4375rem) { - .emotion-10 { + .emotion-11 { font-size: 0.9375rem; line-height: 1.125rem; } } @media (min-width: 37.5rem) { - .emotion-10 { + .emotion-11 { font-size: 0.875rem; line-height: 1.125rem; } } -.emotion-10 li+li { +.emotion-11 li+li { margin-top: 0.5rem; padding-top: 1rem; padding-bottom: 1rem; @@ -2825,7 +2883,7 @@ exports[`Header Snapshots should render correctly for WS radio page 1`] = ` } @media (min-width: 37.5rem) { - .emotion-10 { + .emotion-11 { -webkit-flex-direction: row; -ms-flex-direction: row; flex-direction: row; @@ -2834,18 +2892,18 @@ exports[`Header Snapshots should render correctly for WS radio page 1`] = ` justify-content: space-between; } - .emotion-10 li+li { + .emotion-11 li+li { margin-top: 0; } } -.emotion-12 { +.emotion-13 { text-align: center; width: 100%; word-break: break-word; } -.emotion-12 button { +.emotion-13 button { font-size: 0.9375rem; line-height: 1.125rem; width: 100%; @@ -2859,42 +2917,42 @@ exports[`Header Snapshots should render correctly for WS radio page 1`] = ` } @media (min-width: 20rem) and (max-width: 37.4375rem) { - .emotion-12 button { + .emotion-13 button { font-size: 0.9375rem; line-height: 1.125rem; } } @media (min-width: 37.5rem) { - .emotion-12 button { + .emotion-13 button { font-size: 0.875rem; line-height: 1.125rem; } } -.emotion-12 button:focus, -.emotion-12 button:hover { +.emotion-13 button:focus, +.emotion-13 button:hover { color: #222222; background-color: #F6A21D; } -.emotion-12 button:hover, -.emotion-12 button:focus { +.emotion-13 button:hover, +.emotion-13 button:focus { -webkit-text-decoration: underline; text-decoration: underline; } -.emotion-12 button:focus-visible { +.emotion-13 button:focus-visible { outline: 0.1875rem solid #000000; } @media (min-width: 25rem) { - .emotion-12 { + .emotion-13 { width: 17.3125rem; } } -.emotion-12.hide { +.emotion-13.hide { width: 2.75rem; height: 2.75rem; position: absolute; @@ -2904,7 +2962,7 @@ exports[`Header Snapshots should render correctly for WS radio page 1`] = ` padding: 0; } -.emotion-12.hide button { +.emotion-13.hide button { width: 2.75rem; height: 2.75rem; cursor: pointer; @@ -2912,8 +2970,8 @@ exports[`Header Snapshots should render correctly for WS radio page 1`] = ` border: none; } -.emotion-12.hide button:focus::after, -.emotion-12.hide button:hover::after { +.emotion-13.hide button:focus::after, +.emotion-13.hide button:hover::after { content: ''; position: absolute; left: 0; @@ -2923,7 +2981,7 @@ exports[`Header Snapshots should render correctly for WS radio page 1`] = ` border: 0.1875rem solid #FFFFFF; } -.emotion-12.hide button:focus-visible::after { +.emotion-13.hide button:focus-visible::after { content: ''; position: absolute; left: 0; @@ -2934,7 +2992,7 @@ exports[`Header Snapshots should render correctly for WS radio page 1`] = ` box-shadow: 0 0 0 0.1875rem #FFFFFF inset; } -.emotion-12.hide svg { +.emotion-13.hide svg { color: white; fill: currentColor; position: absolute; @@ -2942,7 +3000,7 @@ exports[`Header Snapshots should render correctly for WS radio page 1`] = ` right: 0; } -.emotion-17 { +.emotion-18 { background-color: #B80000; height: 2.75rem; width: 100%; @@ -2952,36 +3010,36 @@ exports[`Header Snapshots should render correctly for WS radio page 1`] = ` } @media (min-width: 15rem) { - .emotion-17 { + .emotion-18 { height: 3.75rem; padding: 0 0.5rem; } } @media (min-width: 25rem) { - .emotion-17 { + .emotion-18 { height: 3.75rem; padding: 0 1rem; } } @media (min-width: 37.5rem) { - .emotion-17 { + .emotion-18 { height: 4rem; } } -.emotion-17 svg { +.emotion-18 svg { fill: currentColor; } @media screen and (forced-colors: active) { - .emotion-17 svg { + .emotion-18 svg { fill: linkText; } } -.emotion-19 { +.emotion-20 { height: 100%; position: relative; display: -webkit-box; @@ -3004,12 +3062,12 @@ exports[`Header Snapshots should render correctly for WS radio page 1`] = ` } @media (max-width: 14.9375rem) { - .emotion-19 { + .emotion-20 { display: block; } } -.emotion-21 { +.emotion-22 { height: 100%; display: -webkit-box; display: -webkit-flex; @@ -3024,15 +3082,15 @@ exports[`Header Snapshots should render correctly for WS radio page 1`] = ` padding-top: 0.125rem; } -.emotion-21:hover, -.emotion-21:focus { +.emotion-22:hover, +.emotion-22:focus { -webkit-text-decoration: none; text-decoration: none; border-bottom: 0.25rem solid #FFFFFF; margin-bottom: -0.25rem; } -.emotion-21:focus-visible::after { +.emotion-22:focus-visible::after { content: ''; position: absolute; top: 0; @@ -3043,7 +3101,7 @@ exports[`Header Snapshots should render correctly for WS radio page 1`] = ` outline: 0.25rem solid #FFFFFF; } -.emotion-23 { +.emotion-24 { box-sizing: content-box; color: #FFFFFF; fill: currentColor; @@ -3051,24 +3109,24 @@ exports[`Header Snapshots should render correctly for WS radio page 1`] = ` } @media (min-width: 25rem) { - .emotion-23 { + .emotion-24 { height: 1.5rem; } } @media (min-width: 37.5rem) { - .emotion-23 { + .emotion-24 { height: 1.875rem; } } @media screen and (-ms-high-contrast: active),print { - .emotion-23 { + .emotion-24 { fill: windowText; } } -.emotion-25 { +.emotion-26 { -webkit-clip-path: inset(100%); clip-path: inset(100%); clip: rect(1px, 1px, 1px, 1px); @@ -3079,7 +3137,7 @@ exports[`Header Snapshots should render correctly for WS radio page 1`] = ` margin: 0; } -.emotion-26 { +.emotion-27 { position: absolute; -webkit-clip-path: inset(100%); clip-path: inset(100%); @@ -3101,20 +3159,20 @@ exports[`Header Snapshots should render correctly for WS radio page 1`] = ` } @media (min-width: 20rem) and (max-width: 37.4375rem) { - .emotion-26 { + .emotion-27 { font-size: 1rem; line-height: 1.25rem; } } @media (min-width: 37.5rem) { - .emotion-26 { + .emotion-27 { font-size: 1rem; line-height: 1.25rem; } } -.emotion-26:focus { +.emotion-27:focus { -webkit-clip-path: none; clip-path: none; clip: auto; @@ -3125,24 +3183,24 @@ exports[`Header Snapshots should render correctly for WS radio page 1`] = ` } @media (min-width: 25rem) { - .emotion-26:focus { + .emotion-27:focus { top: 0.5rem; } } @media (max-width: 37.4375rem) { - .emotion-26 { + .emotion-27 { padding: 0.5rem; } } -.emotion-28 { +.emotion-29 { position: relative; background-color: #FFFFFF; } @media (min-width: 62.9375rem) { - .emotion-28::after { + .emotion-29::after { content: ''; position: absolute; bottom: 0; @@ -3152,11 +3210,11 @@ exports[`Header Snapshots should render correctly for WS radio page 1`] = ` } } -.emotion-28 .emotion-44::after { +.emotion-29 .emotion-45::after { left: 0; } -.emotion-30 { +.emotion-31 { position: relative; max-width: 63.4rem; margin: 0; @@ -3164,22 +3222,22 @@ exports[`Header Snapshots should render correctly for WS radio page 1`] = ` } @media (min-width: 37.5rem) { - .emotion-30 { + .emotion-31 { margin: 0 0.8rem; } } @media (min-width: 66rem) { - .emotion-30 { + .emotion-31 { margin: 0 auto; } } -.emotion-32 { +.emotion-33 { position: relative; } -.emotion-34 { +.emotion-35 { position: relative; padding: 0; margin: 0; @@ -3190,14 +3248,14 @@ exports[`Header Snapshots should render correctly for WS radio page 1`] = ` width: 2.75rem; } -.emotion-34:hover, -.emotion-34:focus { +.emotion-35:hover, +.emotion-35:focus { cursor: pointer; box-shadow: inset 0 0 0 0.25rem #FFFFFF; } -.emotion-34:hover::after, -.emotion-34:focus::after { +.emotion-35:hover::after, +.emotion-35:focus::after { content: ''; position: absolute; left: 0; @@ -3208,36 +3266,36 @@ exports[`Header Snapshots should render correctly for WS radio page 1`] = ` } @media (min-width: 37.5rem) { - .emotion-34 { + .emotion-35 { display: none; visibility: hidden; } } @media (min-width: 20rem) { - .emotion-34 { + .emotion-35 { height: 2.75rem; width: 2.75rem; } } -.emotion-34 svg { +.emotion-35 svg { vertical-align: middle; } -.emotion-36 { +.emotion-37 { color: #000000; fill: currentColor; } @media screen and (forced-colors: active) { - .emotion-36 { + .emotion-37 { fill: linkText; } } @media (max-width: 37.4375rem) { - .emotion-39 { + .emotion-40 { white-space: nowrap; overflow-x: scroll; scroll-behavior: auto; @@ -3246,15 +3304,15 @@ exports[`Header Snapshots should render correctly for WS radio page 1`] = ` -ms-overflow-style: none; } - .emotion-39::-webkit-scrollbar { + .emotion-40::-webkit-scrollbar { display: none; } - .emotion-39:focus-visible { + .emotion-40:focus-visible { outline: none; } - .emotion-39:focus-visible::after { + .emotion-40:focus-visible::after { outline: 0.1875rem solid #000000; content: ''; position: absolute; @@ -3262,7 +3320,7 @@ exports[`Header Snapshots should render correctly for WS radio page 1`] = ` height: 100%; } - .emotion-39:after { + .emotion-40:after { content: ' '; height: 100%; width: 3rem; @@ -3280,13 +3338,13 @@ exports[`Header Snapshots should render correctly for WS radio page 1`] = ` } @media (min-width: 25rem) { - .emotion-39:after { + .emotion-40:after { width: 6rem; } } } -.emotion-41 { +.emotion-42 { list-style-type: none; padding: 0; margin: 0; @@ -3294,12 +3352,12 @@ exports[`Header Snapshots should render correctly for WS radio page 1`] = ` } @media (min-width: 37.5rem) { - .emotion-41 { + .emotion-42 { overflow: hidden; } } -.emotion-43 { +.emotion-44 { display: inline-block; position: relative; z-index: 2; @@ -3308,13 +3366,13 @@ exports[`Header Snapshots should render correctly for WS radio page 1`] = ` } @media (max-width: 37.4375rem) { - .emotion-43:last-child { + .emotion-44:last-child { margin-right: 3rem; } } @media (min-width: 37.5rem) { - .emotion-43::after { + .emotion-44::after { content: ''; position: absolute; bottom: -1px; @@ -3324,7 +3382,7 @@ exports[`Header Snapshots should render correctly for WS radio page 1`] = ` } } -.emotion-45 { +.emotion-46 { font-size: 0.9375rem; line-height: 1.25rem; font-family: ReithSans,Helvetica,Arial,sans-serif; @@ -3340,26 +3398,26 @@ exports[`Header Snapshots should render correctly for WS radio page 1`] = ` } @media (min-width: 20rem) and (max-width: 37.4375rem) { - .emotion-45 { + .emotion-46 { font-size: 1rem; line-height: 1.25rem; } } @media (min-width: 37.5rem) { - .emotion-45 { + .emotion-46 { font-size: 1rem; line-height: 1.25rem; } } @media (max-width: 37.4375rem) { - .emotion-45 { + .emotion-46 { padding: 0.75rem 0.5rem; } } -.emotion-45:hover::after { +.emotion-46:hover::after { content: ''; position: absolute; left: 0; @@ -3368,7 +3426,7 @@ exports[`Header Snapshots should render correctly for WS radio page 1`] = ` border-bottom: 0.25rem solid #B80000; } -.emotion-45:focus::after { +.emotion-46:focus::after { content: ''; position: absolute; left: 0; @@ -3379,7 +3437,7 @@ exports[`Header Snapshots should render correctly for WS radio page 1`] = ` border: 0.1875rem solid #000000; } -.emotion-45:focus-visible::after { +.emotion-46:focus-visible::after { content: ''; position: absolute; left: 0; @@ -3390,7 +3448,7 @@ exports[`Header Snapshots should render correctly for WS radio page 1`] = ` border: 0.1875rem solid #000000; } -.emotion-87 { +.emotion-88 { background-color: #FFFFFF; clear: both; overflow: hidden; @@ -3402,37 +3460,37 @@ exports[`Header Snapshots should render correctly for WS radio page 1`] = ` } @media (min-width: 37.5rem) { - .emotion-87 { + .emotion-88 { display: none; visibility: hidden; } } @media (prefers-reduced-motion: reduce) { - .emotion-87 { + .emotion-88 { -webkit-transition: none; transition: none; } } -.emotion-89 { +.emotion-90 { list-style-type: none; margin: 0; padding: 0 0.5rem; border-bottom: 0.0625rem solid #E6E8EA; } -.emotion-91 { +.emotion-92 { padding: 0.75rem 0; border-bottom: 0.0625rem solid #E6E8EA; } -.emotion-91:last-child { +.emotion-92:last-child { padding-bottom: 0.25rem; border: 0; } -.emotion-93 { +.emotion-94 { font-size: 0.9375rem; line-height: 1.25rem; font-family: ReithSans,Helvetica,Arial,sans-serif; @@ -3446,40 +3504,40 @@ exports[`Header Snapshots should render correctly for WS radio page 1`] = ` } @media (min-width: 20rem) and (max-width: 37.4375rem) { - .emotion-93 { + .emotion-94 { font-size: 1rem; line-height: 1.25rem; } } @media (min-width: 37.5rem) { - .emotion-93 { + .emotion-94 { font-size: 1rem; line-height: 1.25rem; } } -.emotion-93:hover, -.emotion-93:focus { +.emotion-94:hover, +.emotion-94:focus { -webkit-text-decoration: underline; text-decoration: underline; text-decoration-color: #B80000; } -.emotion-135 { +.emotion-136 { position: absolute; width: calc(100vw - 0.8rem); inset-inline-start: 0; } @media (min-width: 1041px) { - .emotion-135 { + .emotion-136 { width: calc(100vw + 0.8rem); inset-inline-start: calc(-1 * (100vw - 1014px) / 2); } } -.emotion-135::after { +.emotion-136::after { content: ''; position: absolute; inset-block-end: 0; @@ -3489,506 +3547,527 @@ exports[`Header Snapshots should render correctly for WS radio page 1`] = ` } @media (min-width: 1008px) { - .emotion-135 { + .emotion-136 { display: none; } } -
- - + + +
`; exports[`Header Snapshots should render correctly for news article 1`] = ` .emotion-0 { + position: -webkit-sticky; + position: sticky; + top: 0; + left: 0; + width: 100%; + z-index: 10000; + -webkit-transition: -webkit-transform 0.3s ease; + transition: transform 0.3s ease; + -webkit-transform: translateY(0); + -moz-transform: translateY(0); + -ms-transform: translateY(0); + transform: translateY(0); + will-change: transform; +} + +.emotion-1 { position: fixed; bottom: 0; left: 0; @@ -3996,7 +4075,7 @@ exports[`Header Snapshots should render correctly for news article 1`] = ` z-index: 2147483647; } -.emotion-2 { +.emotion-3 { font-family: ReithSans,Helvetica,Arial,sans-serif; font-style: normal; font-weight: 400; @@ -4004,48 +4083,48 @@ exports[`Header Snapshots should render correctly for news article 1`] = ` border-top: solid 0.0625rem transparent; } -.emotion-4 { +.emotion-5 { max-width: 37.4375rem; margin: 0 auto; } -.emotion-4 a { +.emotion-5 a { color: #F6A21D; -webkit-text-decoration: none; text-decoration: none; border-bottom: solid 0.0625rem #AEAEB5; } -.emotion-4 a:focus, -.emotion-4 a:hover { +.emotion-5 a:focus, +.emotion-5 a:hover { color: #222222; background-color: #F6A21D; } -.emotion-4 a:hover, -.emotion-4 a:focus { +.emotion-5 a:hover, +.emotion-5 a:focus { border-bottom: solid 0.125rem transparent; } @media (max-width: 24.9375rem) { - .emotion-4 { + .emotion-5 { padding: 2.75rem 1rem 0.5rem 1rem; } } @media (min-width: 25rem) and (max-width: 37.4375rem) { - .emotion-4 { + .emotion-5 { padding: 2.75rem 1rem 0.5rem 1rem; } } @media (min-width: 37.5rem) { - .emotion-4 { + .emotion-5 { padding: calc(2rem - 0.0625rem) 1rem 2rem 1rem; } } -.emotion-6 { +.emotion-7 { font-size: 1.125rem; line-height: 1.375rem; color: #FFFFFF; @@ -4055,24 +4134,24 @@ exports[`Header Snapshots should render correctly for news article 1`] = ` } @media (min-width: 20rem) and (max-width: 37.4375rem) { - .emotion-6 { + .emotion-7 { font-size: 1.25rem; line-height: 1.5rem; } } @media (min-width: 37.5rem) { - .emotion-6 { + .emotion-7 { font-size: 1.5rem; line-height: 1.75rem; } } -.emotion-6:focus { +.emotion-7:focus { outline: none; } -.emotion-8 { +.emotion-9 { font-size: 0.9375rem; line-height: 1.25rem; margin-top: 1rem; @@ -4081,26 +4160,26 @@ exports[`Header Snapshots should render correctly for news article 1`] = ` } @media (min-width: 20rem) and (max-width: 37.4375rem) { - .emotion-8 { + .emotion-9 { font-size: 1rem; line-height: 1.375rem; } } @media (min-width: 37.5rem) { - .emotion-8 { + .emotion-9 { font-size: 1rem; line-height: 1.375rem; } } @media (min-width: 37.5rem) { - .emotion-8 { + .emotion-9 { margin-top: 1.5rem; } } -.emotion-10 { +.emotion-11 { font-size: 0.9375rem; line-height: 1.125rem; display: -webkit-box; @@ -4122,20 +4201,20 @@ exports[`Header Snapshots should render correctly for news article 1`] = ` } @media (min-width: 20rem) and (max-width: 37.4375rem) { - .emotion-10 { + .emotion-11 { font-size: 0.9375rem; line-height: 1.125rem; } } @media (min-width: 37.5rem) { - .emotion-10 { + .emotion-11 { font-size: 0.875rem; line-height: 1.125rem; } } -.emotion-10 li+li { +.emotion-11 li+li { margin-top: 0.5rem; padding-top: 1rem; padding-bottom: 1rem; @@ -4154,7 +4233,7 @@ exports[`Header Snapshots should render correctly for news article 1`] = ` } @media (min-width: 37.5rem) { - .emotion-10 { + .emotion-11 { -webkit-flex-direction: row; -ms-flex-direction: row; flex-direction: row; @@ -4163,18 +4242,18 @@ exports[`Header Snapshots should render correctly for news article 1`] = ` justify-content: space-between; } - .emotion-10 li+li { + .emotion-11 li+li { margin-top: 0; } } -.emotion-12 { +.emotion-13 { text-align: center; width: 100%; word-break: break-word; } -.emotion-12 button { +.emotion-13 button { font-size: 0.9375rem; line-height: 1.125rem; width: 100%; @@ -4188,42 +4267,42 @@ exports[`Header Snapshots should render correctly for news article 1`] = ` } @media (min-width: 20rem) and (max-width: 37.4375rem) { - .emotion-12 button { + .emotion-13 button { font-size: 0.9375rem; line-height: 1.125rem; } } @media (min-width: 37.5rem) { - .emotion-12 button { + .emotion-13 button { font-size: 0.875rem; line-height: 1.125rem; } } -.emotion-12 button:focus, -.emotion-12 button:hover { +.emotion-13 button:focus, +.emotion-13 button:hover { color: #222222; background-color: #F6A21D; } -.emotion-12 button:hover, -.emotion-12 button:focus { +.emotion-13 button:hover, +.emotion-13 button:focus { -webkit-text-decoration: underline; text-decoration: underline; } -.emotion-12 button:focus-visible { +.emotion-13 button:focus-visible { outline: 0.1875rem solid #000000; } @media (min-width: 25rem) { - .emotion-12 { + .emotion-13 { width: 17.3125rem; } } -.emotion-12.hide { +.emotion-13.hide { width: 2.75rem; height: 2.75rem; position: absolute; @@ -4233,7 +4312,7 @@ exports[`Header Snapshots should render correctly for news article 1`] = ` padding: 0; } -.emotion-12.hide button { +.emotion-13.hide button { width: 2.75rem; height: 2.75rem; cursor: pointer; @@ -4241,8 +4320,8 @@ exports[`Header Snapshots should render correctly for news article 1`] = ` border: none; } -.emotion-12.hide button:focus::after, -.emotion-12.hide button:hover::after { +.emotion-13.hide button:focus::after, +.emotion-13.hide button:hover::after { content: ''; position: absolute; left: 0; @@ -4252,7 +4331,7 @@ exports[`Header Snapshots should render correctly for news article 1`] = ` border: 0.1875rem solid #FFFFFF; } -.emotion-12.hide button:focus-visible::after { +.emotion-13.hide button:focus-visible::after { content: ''; position: absolute; left: 0; @@ -4263,7 +4342,7 @@ exports[`Header Snapshots should render correctly for news article 1`] = ` box-shadow: 0 0 0 0.1875rem #FFFFFF inset; } -.emotion-12.hide svg { +.emotion-13.hide svg { color: white; fill: currentColor; position: absolute; @@ -4271,7 +4350,7 @@ exports[`Header Snapshots should render correctly for news article 1`] = ` right: 0; } -.emotion-17 { +.emotion-18 { background-color: #B80000; height: 2.75rem; width: 100%; @@ -4281,36 +4360,36 @@ exports[`Header Snapshots should render correctly for news article 1`] = ` } @media (min-width: 15rem) { - .emotion-17 { + .emotion-18 { height: 3.75rem; padding: 0 0.5rem; } } @media (min-width: 25rem) { - .emotion-17 { + .emotion-18 { height: 3.75rem; padding: 0 1rem; } } @media (min-width: 37.5rem) { - .emotion-17 { + .emotion-18 { height: 4rem; } } -.emotion-17 svg { +.emotion-18 svg { fill: currentColor; } @media screen and (forced-colors: active) { - .emotion-17 svg { + .emotion-18 svg { fill: linkText; } } -.emotion-19 { +.emotion-20 { height: 100%; position: relative; display: -webkit-box; @@ -4333,12 +4412,12 @@ exports[`Header Snapshots should render correctly for news article 1`] = ` } @media (max-width: 14.9375rem) { - .emotion-19 { + .emotion-20 { display: block; } } -.emotion-21 { +.emotion-22 { height: 100%; display: -webkit-box; display: -webkit-flex; @@ -4353,15 +4432,15 @@ exports[`Header Snapshots should render correctly for news article 1`] = ` padding-top: 0.125rem; } -.emotion-21:hover, -.emotion-21:focus { +.emotion-22:hover, +.emotion-22:focus { -webkit-text-decoration: none; text-decoration: none; border-bottom: 0.25rem solid #FFFFFF; margin-bottom: -0.25rem; } -.emotion-21:focus-visible::after { +.emotion-22:focus-visible::after { content: ''; position: absolute; top: 0; @@ -4372,7 +4451,7 @@ exports[`Header Snapshots should render correctly for news article 1`] = ` outline: 0.25rem solid #FFFFFF; } -.emotion-23 { +.emotion-24 { box-sizing: content-box; color: #FFFFFF; fill: currentColor; @@ -4380,24 +4459,24 @@ exports[`Header Snapshots should render correctly for news article 1`] = ` } @media (min-width: 25rem) { - .emotion-23 { + .emotion-24 { height: 1.5rem; } } @media (min-width: 37.5rem) { - .emotion-23 { + .emotion-24 { height: 1.875rem; } } @media screen and (-ms-high-contrast: active),print { - .emotion-23 { + .emotion-24 { fill: windowText; } } -.emotion-25 { +.emotion-26 { -webkit-clip-path: inset(100%); clip-path: inset(100%); clip: rect(1px, 1px, 1px, 1px); @@ -4408,7 +4487,7 @@ exports[`Header Snapshots should render correctly for news article 1`] = ` margin: 0; } -.emotion-26 { +.emotion-27 { position: absolute; -webkit-clip-path: inset(100%); clip-path: inset(100%); @@ -4430,20 +4509,20 @@ exports[`Header Snapshots should render correctly for news article 1`] = ` } @media (min-width: 20rem) and (max-width: 37.4375rem) { - .emotion-26 { + .emotion-27 { font-size: 1rem; line-height: 1.25rem; } } @media (min-width: 37.5rem) { - .emotion-26 { + .emotion-27 { font-size: 1rem; line-height: 1.25rem; } } -.emotion-26:focus { +.emotion-27:focus { -webkit-clip-path: none; clip-path: none; clip: auto; @@ -4454,24 +4533,24 @@ exports[`Header Snapshots should render correctly for news article 1`] = ` } @media (min-width: 25rem) { - .emotion-26:focus { + .emotion-27:focus { top: 0.5rem; } } @media (max-width: 37.4375rem) { - .emotion-26 { + .emotion-27 { padding: 0.5rem; } } -.emotion-28 { +.emotion-29 { position: relative; background-color: #FFFFFF; } @media (min-width: 62.9375rem) { - .emotion-28::after { + .emotion-29::after { content: ''; position: absolute; bottom: 0; @@ -4481,11 +4560,11 @@ exports[`Header Snapshots should render correctly for news article 1`] = ` } } -.emotion-28 .emotion-44::after { +.emotion-29 .emotion-45::after { left: 0; } -.emotion-30 { +.emotion-31 { position: relative; max-width: 63.4rem; margin: 0; @@ -4493,22 +4572,22 @@ exports[`Header Snapshots should render correctly for news article 1`] = ` } @media (min-width: 37.5rem) { - .emotion-30 { + .emotion-31 { margin: 0 0.8rem; } } @media (min-width: 66rem) { - .emotion-30 { + .emotion-31 { margin: 0 auto; } } -.emotion-32 { +.emotion-33 { position: relative; } -.emotion-34 { +.emotion-35 { position: relative; padding: 0; margin: 0; @@ -4519,14 +4598,14 @@ exports[`Header Snapshots should render correctly for news article 1`] = ` width: 2.75rem; } -.emotion-34:hover, -.emotion-34:focus { +.emotion-35:hover, +.emotion-35:focus { cursor: pointer; box-shadow: inset 0 0 0 0.25rem #FFFFFF; } -.emotion-34:hover::after, -.emotion-34:focus::after { +.emotion-35:hover::after, +.emotion-35:focus::after { content: ''; position: absolute; left: 0; @@ -4537,36 +4616,36 @@ exports[`Header Snapshots should render correctly for news article 1`] = ` } @media (min-width: 37.5rem) { - .emotion-34 { + .emotion-35 { display: none; visibility: hidden; } } @media (min-width: 20rem) { - .emotion-34 { + .emotion-35 { height: 2.75rem; width: 2.75rem; } } -.emotion-34 svg { +.emotion-35 svg { vertical-align: middle; } -.emotion-36 { +.emotion-37 { color: #000000; fill: currentColor; } @media screen and (forced-colors: active) { - .emotion-36 { + .emotion-37 { fill: linkText; } } @media (max-width: 37.4375rem) { - .emotion-39 { + .emotion-40 { white-space: nowrap; overflow-x: scroll; scroll-behavior: auto; @@ -4575,15 +4654,15 @@ exports[`Header Snapshots should render correctly for news article 1`] = ` -ms-overflow-style: none; } - .emotion-39::-webkit-scrollbar { + .emotion-40::-webkit-scrollbar { display: none; } - .emotion-39:focus-visible { + .emotion-40:focus-visible { outline: none; } - .emotion-39:focus-visible::after { + .emotion-40:focus-visible::after { outline: 0.1875rem solid #000000; content: ''; position: absolute; @@ -4591,7 +4670,7 @@ exports[`Header Snapshots should render correctly for news article 1`] = ` height: 100%; } - .emotion-39:after { + .emotion-40:after { content: ' '; height: 100%; width: 3rem; @@ -4609,13 +4688,13 @@ exports[`Header Snapshots should render correctly for news article 1`] = ` } @media (min-width: 25rem) { - .emotion-39:after { + .emotion-40:after { width: 6rem; } } } -.emotion-41 { +.emotion-42 { list-style-type: none; padding: 0; margin: 0; @@ -4623,12 +4702,12 @@ exports[`Header Snapshots should render correctly for news article 1`] = ` } @media (min-width: 37.5rem) { - .emotion-41 { + .emotion-42 { overflow: hidden; } } -.emotion-43 { +.emotion-44 { display: inline-block; position: relative; z-index: 2; @@ -4637,13 +4716,13 @@ exports[`Header Snapshots should render correctly for news article 1`] = ` } @media (max-width: 37.4375rem) { - .emotion-43:last-child { + .emotion-44:last-child { margin-right: 3rem; } } @media (min-width: 37.5rem) { - .emotion-43::after { + .emotion-44::after { content: ''; position: absolute; bottom: -1px; @@ -4653,7 +4732,7 @@ exports[`Header Snapshots should render correctly for news article 1`] = ` } } -.emotion-45 { +.emotion-46 { font-size: 0.9375rem; line-height: 1.25rem; font-family: ReithSans,Helvetica,Arial,sans-serif; @@ -4669,26 +4748,26 @@ exports[`Header Snapshots should render correctly for news article 1`] = ` } @media (min-width: 20rem) and (max-width: 37.4375rem) { - .emotion-45 { + .emotion-46 { font-size: 1rem; line-height: 1.25rem; } } @media (min-width: 37.5rem) { - .emotion-45 { + .emotion-46 { font-size: 1rem; line-height: 1.25rem; } } @media (max-width: 37.4375rem) { - .emotion-45 { + .emotion-46 { padding: 0.75rem 0.5rem; } } -.emotion-45:hover::after { +.emotion-46:hover::after { content: ''; position: absolute; left: 0; @@ -4697,7 +4776,7 @@ exports[`Header Snapshots should render correctly for news article 1`] = ` border-bottom: 0.25rem solid #B80000; } -.emotion-45:focus::after { +.emotion-46:focus::after { content: ''; position: absolute; left: 0; @@ -4708,7 +4787,7 @@ exports[`Header Snapshots should render correctly for news article 1`] = ` border: 0.1875rem solid #000000; } -.emotion-45:focus-visible::after { +.emotion-46:focus-visible::after { content: ''; position: absolute; left: 0; @@ -4719,7 +4798,7 @@ exports[`Header Snapshots should render correctly for news article 1`] = ` border: 0.1875rem solid #000000; } -.emotion-87 { +.emotion-88 { background-color: #FFFFFF; clear: both; overflow: hidden; @@ -4731,37 +4810,37 @@ exports[`Header Snapshots should render correctly for news article 1`] = ` } @media (min-width: 37.5rem) { - .emotion-87 { + .emotion-88 { display: none; visibility: hidden; } } @media (prefers-reduced-motion: reduce) { - .emotion-87 { + .emotion-88 { -webkit-transition: none; transition: none; } } -.emotion-89 { +.emotion-90 { list-style-type: none; margin: 0; padding: 0 0.5rem; border-bottom: 0.0625rem solid #E6E8EA; } -.emotion-91 { +.emotion-92 { padding: 0.75rem 0; border-bottom: 0.0625rem solid #E6E8EA; } -.emotion-91:last-child { +.emotion-92:last-child { padding-bottom: 0.25rem; border: 0; } -.emotion-93 { +.emotion-94 { font-size: 0.9375rem; line-height: 1.25rem; font-family: ReithSans,Helvetica,Arial,sans-serif; @@ -4775,40 +4854,40 @@ exports[`Header Snapshots should render correctly for news article 1`] = ` } @media (min-width: 20rem) and (max-width: 37.4375rem) { - .emotion-93 { + .emotion-94 { font-size: 1rem; line-height: 1.25rem; } } @media (min-width: 37.5rem) { - .emotion-93 { + .emotion-94 { font-size: 1rem; line-height: 1.25rem; } } -.emotion-93:hover, -.emotion-93:focus { +.emotion-94:hover, +.emotion-94:focus { -webkit-text-decoration: underline; text-decoration: underline; text-decoration-color: #B80000; } -.emotion-135 { +.emotion-136 { position: absolute; width: calc(100vw - 0.8rem); inset-inline-start: 0; } @media (min-width: 1041px) { - .emotion-135 { + .emotion-136 { width: calc(100vw + 0.8rem); inset-inline-start: calc(-1 * (100vw - 1014px) / 2); } } -.emotion-135::after { +.emotion-136::after { content: ''; position: absolute; inset-block-end: 0; @@ -4818,500 +4897,505 @@ exports[`Header Snapshots should render correctly for news article 1`] = ` } @media (min-width: 1008px) { - .emotion-135 { + .emotion-136 { display: none; } } -
- - + + + `; From 13995cf89388b818d00132c78de249eaa912537a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E2=80=9CLilyL0u=E2=80=9D?= Date: Fri, 16 Jan 2026 14:21:14 +0000 Subject: [PATCH 9/9] snapshots --- .../__snapshots__/index.test.tsx.snap | 1091 +++++++++-------- 1 file changed, 556 insertions(+), 535 deletions(-) diff --git a/src/app/components/PageLayoutWrapper/__snapshots__/index.test.tsx.snap b/src/app/components/PageLayoutWrapper/__snapshots__/index.test.tsx.snap index ba46852a119..b27b2f0d485 100644 --- a/src/app/components/PageLayoutWrapper/__snapshots__/index.test.tsx.snap +++ b/src/app/components/PageLayoutWrapper/__snapshots__/index.test.tsx.snap @@ -17,6 +17,22 @@ exports[`PageLayoutWrapper should render default page wrapper with children 1`] } .emotion-1 { + position: -webkit-sticky; + position: sticky; + top: 0; + left: 0; + width: 100%; + z-index: 10000; + -webkit-transition: -webkit-transform 0.3s ease; + transition: transform 0.3s ease; + -webkit-transform: translateY(0); + -moz-transform: translateY(0); + -ms-transform: translateY(0); + transform: translateY(0); + will-change: transform; +} + +.emotion-2 { position: fixed; bottom: 0; left: 0; @@ -24,7 +40,7 @@ exports[`PageLayoutWrapper should render default page wrapper with children 1`] z-index: 2147483647; } -.emotion-3 { +.emotion-4 { font-family: ReithSans,Helvetica,Arial,sans-serif; font-style: normal; font-weight: 400; @@ -32,48 +48,48 @@ exports[`PageLayoutWrapper should render default page wrapper with children 1`] border-top: solid 0.0625rem transparent; } -.emotion-5 { +.emotion-6 { max-width: 37.4375rem; margin: 0 auto; } -.emotion-5 a { +.emotion-6 a { color: #F6A21D; -webkit-text-decoration: none; text-decoration: none; border-bottom: solid 0.0625rem #AEAEB5; } -.emotion-5 a:focus, -.emotion-5 a:hover { +.emotion-6 a:focus, +.emotion-6 a:hover { color: #222222; background-color: #F6A21D; } -.emotion-5 a:hover, -.emotion-5 a:focus { +.emotion-6 a:hover, +.emotion-6 a:focus { border-bottom: solid 0.125rem transparent; } @media (max-width: 24.9375rem) { - .emotion-5 { + .emotion-6 { padding: 2.75rem 1rem 0.5rem 1rem; } } @media (min-width: 25rem) and (max-width: 37.4375rem) { - .emotion-5 { + .emotion-6 { padding: 2.75rem 1rem 0.5rem 1rem; } } @media (min-width: 37.5rem) { - .emotion-5 { + .emotion-6 { padding: calc(2rem - 0.0625rem) 1rem 2rem 1rem; } } -.emotion-7 { +.emotion-8 { font-size: 1.125rem; line-height: 1.375rem; color: #FFFFFF; @@ -83,24 +99,24 @@ exports[`PageLayoutWrapper should render default page wrapper with children 1`] } @media (min-width: 20rem) and (max-width: 37.4375rem) { - .emotion-7 { + .emotion-8 { font-size: 1.25rem; line-height: 1.5rem; } } @media (min-width: 37.5rem) { - .emotion-7 { + .emotion-8 { font-size: 1.5rem; line-height: 1.75rem; } } -.emotion-7:focus { +.emotion-8:focus { outline: none; } -.emotion-9 { +.emotion-10 { font-size: 0.9375rem; line-height: 1.25rem; margin-top: 1rem; @@ -109,26 +125,26 @@ exports[`PageLayoutWrapper should render default page wrapper with children 1`] } @media (min-width: 20rem) and (max-width: 37.4375rem) { - .emotion-9 { + .emotion-10 { font-size: 1rem; line-height: 1.375rem; } } @media (min-width: 37.5rem) { - .emotion-9 { + .emotion-10 { font-size: 1rem; line-height: 1.375rem; } } @media (min-width: 37.5rem) { - .emotion-9 { + .emotion-10 { margin-top: 1.5rem; } } -.emotion-11 { +.emotion-12 { font-size: 0.9375rem; line-height: 1.125rem; display: -webkit-box; @@ -150,20 +166,20 @@ exports[`PageLayoutWrapper should render default page wrapper with children 1`] } @media (min-width: 20rem) and (max-width: 37.4375rem) { - .emotion-11 { + .emotion-12 { font-size: 0.9375rem; line-height: 1.125rem; } } @media (min-width: 37.5rem) { - .emotion-11 { + .emotion-12 { font-size: 0.875rem; line-height: 1.125rem; } } -.emotion-11 li+li { +.emotion-12 li+li { margin-top: 0.5rem; padding-top: 1rem; padding-bottom: 1rem; @@ -182,7 +198,7 @@ exports[`PageLayoutWrapper should render default page wrapper with children 1`] } @media (min-width: 37.5rem) { - .emotion-11 { + .emotion-12 { -webkit-flex-direction: row; -ms-flex-direction: row; flex-direction: row; @@ -191,18 +207,18 @@ exports[`PageLayoutWrapper should render default page wrapper with children 1`] justify-content: space-between; } - .emotion-11 li+li { + .emotion-12 li+li { margin-top: 0; } } -.emotion-13 { +.emotion-14 { text-align: center; width: 100%; word-break: break-word; } -.emotion-13 button { +.emotion-14 button { font-size: 0.9375rem; line-height: 1.125rem; width: 100%; @@ -216,42 +232,42 @@ exports[`PageLayoutWrapper should render default page wrapper with children 1`] } @media (min-width: 20rem) and (max-width: 37.4375rem) { - .emotion-13 button { + .emotion-14 button { font-size: 0.9375rem; line-height: 1.125rem; } } @media (min-width: 37.5rem) { - .emotion-13 button { + .emotion-14 button { font-size: 0.875rem; line-height: 1.125rem; } } -.emotion-13 button:focus, -.emotion-13 button:hover { +.emotion-14 button:focus, +.emotion-14 button:hover { color: #222222; background-color: #F6A21D; } -.emotion-13 button:hover, -.emotion-13 button:focus { +.emotion-14 button:hover, +.emotion-14 button:focus { -webkit-text-decoration: underline; text-decoration: underline; } -.emotion-13 button:focus-visible { +.emotion-14 button:focus-visible { outline: 0.1875rem solid #000000; } @media (min-width: 25rem) { - .emotion-13 { + .emotion-14 { width: 17.3125rem; } } -.emotion-13.hide { +.emotion-14.hide { width: 2.75rem; height: 2.75rem; position: absolute; @@ -261,7 +277,7 @@ exports[`PageLayoutWrapper should render default page wrapper with children 1`] padding: 0; } -.emotion-13.hide button { +.emotion-14.hide button { width: 2.75rem; height: 2.75rem; cursor: pointer; @@ -269,8 +285,8 @@ exports[`PageLayoutWrapper should render default page wrapper with children 1`] border: none; } -.emotion-13.hide button:focus::after, -.emotion-13.hide button:hover::after { +.emotion-14.hide button:focus::after, +.emotion-14.hide button:hover::after { content: ''; position: absolute; left: 0; @@ -280,7 +296,7 @@ exports[`PageLayoutWrapper should render default page wrapper with children 1`] border: 0.1875rem solid #FFFFFF; } -.emotion-13.hide button:focus-visible::after { +.emotion-14.hide button:focus-visible::after { content: ''; position: absolute; left: 0; @@ -291,7 +307,7 @@ exports[`PageLayoutWrapper should render default page wrapper with children 1`] box-shadow: 0 0 0 0.1875rem #FFFFFF inset; } -.emotion-13.hide svg { +.emotion-14.hide svg { color: white; fill: currentColor; position: absolute; @@ -299,7 +315,7 @@ exports[`PageLayoutWrapper should render default page wrapper with children 1`] right: 0; } -.emotion-18 { +.emotion-19 { background-color: #B80000; height: 2.75rem; width: 100%; @@ -309,36 +325,36 @@ exports[`PageLayoutWrapper should render default page wrapper with children 1`] } @media (min-width: 15rem) { - .emotion-18 { + .emotion-19 { height: 3.75rem; padding: 0 0.5rem; } } @media (min-width: 25rem) { - .emotion-18 { + .emotion-19 { height: 3.75rem; padding: 0 1rem; } } @media (min-width: 37.5rem) { - .emotion-18 { + .emotion-19 { height: 4rem; } } -.emotion-18 svg { +.emotion-19 svg { fill: currentColor; } @media screen and (forced-colors: active) { - .emotion-18 svg { + .emotion-19 svg { fill: linkText; } } -.emotion-20 { +.emotion-21 { height: 100%; position: relative; display: -webkit-box; @@ -361,12 +377,12 @@ exports[`PageLayoutWrapper should render default page wrapper with children 1`] } @media (max-width: 14.9375rem) { - .emotion-20 { + .emotion-21 { display: block; } } -.emotion-22 { +.emotion-23 { height: 100%; display: -webkit-box; display: -webkit-flex; @@ -381,15 +397,15 @@ exports[`PageLayoutWrapper should render default page wrapper with children 1`] padding-top: 0.125rem; } -.emotion-22:hover, -.emotion-22:focus { +.emotion-23:hover, +.emotion-23:focus { -webkit-text-decoration: none; text-decoration: none; border-bottom: 0.25rem solid #FFFFFF; margin-bottom: -0.25rem; } -.emotion-22:focus-visible::after { +.emotion-23:focus-visible::after { content: ''; position: absolute; top: 0; @@ -400,7 +416,7 @@ exports[`PageLayoutWrapper should render default page wrapper with children 1`] outline: 0.25rem solid #FFFFFF; } -.emotion-24 { +.emotion-25 { box-sizing: content-box; color: #FFFFFF; fill: currentColor; @@ -408,24 +424,24 @@ exports[`PageLayoutWrapper should render default page wrapper with children 1`] } @media (min-width: 25rem) { - .emotion-24 { + .emotion-25 { height: 1.5rem; } } @media (min-width: 37.5rem) { - .emotion-24 { + .emotion-25 { height: 1.875rem; } } @media screen and (-ms-high-contrast: active),print { - .emotion-24 { + .emotion-25 { fill: windowText; } } -.emotion-26 { +.emotion-27 { -webkit-clip-path: inset(100%); clip-path: inset(100%); clip: rect(1px, 1px, 1px, 1px); @@ -436,7 +452,7 @@ exports[`PageLayoutWrapper should render default page wrapper with children 1`] margin: 0; } -.emotion-27 { +.emotion-28 { position: absolute; -webkit-clip-path: inset(100%); clip-path: inset(100%); @@ -458,20 +474,20 @@ exports[`PageLayoutWrapper should render default page wrapper with children 1`] } @media (min-width: 20rem) and (max-width: 37.4375rem) { - .emotion-27 { + .emotion-28 { font-size: 1rem; line-height: 1.25rem; } } @media (min-width: 37.5rem) { - .emotion-27 { + .emotion-28 { font-size: 1rem; line-height: 1.25rem; } } -.emotion-27:focus { +.emotion-28:focus { -webkit-clip-path: none; clip-path: none; clip: auto; @@ -482,24 +498,24 @@ exports[`PageLayoutWrapper should render default page wrapper with children 1`] } @media (min-width: 25rem) { - .emotion-27:focus { + .emotion-28:focus { top: 0.5rem; } } @media (max-width: 37.4375rem) { - .emotion-27 { + .emotion-28 { padding: 0.5rem; } } -.emotion-29 { +.emotion-30 { position: relative; background-color: #FFFFFF; } @media (min-width: 62.9375rem) { - .emotion-29::after { + .emotion-30::after { content: ''; position: absolute; bottom: 0; @@ -509,11 +525,11 @@ exports[`PageLayoutWrapper should render default page wrapper with children 1`] } } -.emotion-29 .emotion-45::after { +.emotion-30 .emotion-46::after { left: 0; } -.emotion-31 { +.emotion-32 { position: relative; max-width: 63.4rem; margin: 0; @@ -521,22 +537,22 @@ exports[`PageLayoutWrapper should render default page wrapper with children 1`] } @media (min-width: 37.5rem) { - .emotion-31 { + .emotion-32 { margin: 0 0.8rem; } } @media (min-width: 66rem) { - .emotion-31 { + .emotion-32 { margin: 0 auto; } } -.emotion-33 { +.emotion-34 { position: relative; } -.emotion-35 { +.emotion-36 { position: relative; padding: 0; margin: 0; @@ -547,14 +563,14 @@ exports[`PageLayoutWrapper should render default page wrapper with children 1`] width: 2.75rem; } -.emotion-35:hover, -.emotion-35:focus { +.emotion-36:hover, +.emotion-36:focus { cursor: pointer; box-shadow: inset 0 0 0 0.25rem #FFFFFF; } -.emotion-35:hover::after, -.emotion-35:focus::after { +.emotion-36:hover::after, +.emotion-36:focus::after { content: ''; position: absolute; left: 0; @@ -565,36 +581,36 @@ exports[`PageLayoutWrapper should render default page wrapper with children 1`] } @media (min-width: 37.5rem) { - .emotion-35 { + .emotion-36 { display: none; visibility: hidden; } } @media (min-width: 20rem) { - .emotion-35 { + .emotion-36 { height: 2.75rem; width: 2.75rem; } } -.emotion-35 svg { +.emotion-36 svg { vertical-align: middle; } -.emotion-37 { +.emotion-38 { color: #000000; fill: currentColor; } @media screen and (forced-colors: active) { - .emotion-37 { + .emotion-38 { fill: linkText; } } @media (max-width: 37.4375rem) { - .emotion-40 { + .emotion-41 { white-space: nowrap; overflow-x: scroll; scroll-behavior: auto; @@ -603,15 +619,15 @@ exports[`PageLayoutWrapper should render default page wrapper with children 1`] -ms-overflow-style: none; } - .emotion-40::-webkit-scrollbar { + .emotion-41::-webkit-scrollbar { display: none; } - .emotion-40:focus-visible { + .emotion-41:focus-visible { outline: none; } - .emotion-40:focus-visible::after { + .emotion-41:focus-visible::after { outline: 0.1875rem solid #000000; content: ''; position: absolute; @@ -619,7 +635,7 @@ exports[`PageLayoutWrapper should render default page wrapper with children 1`] height: 100%; } - .emotion-40:after { + .emotion-41:after { content: ' '; height: 100%; width: 3rem; @@ -637,13 +653,13 @@ exports[`PageLayoutWrapper should render default page wrapper with children 1`] } @media (min-width: 25rem) { - .emotion-40:after { + .emotion-41:after { width: 6rem; } } } -.emotion-42 { +.emotion-43 { list-style-type: none; padding: 0; margin: 0; @@ -651,12 +667,12 @@ exports[`PageLayoutWrapper should render default page wrapper with children 1`] } @media (min-width: 37.5rem) { - .emotion-42 { + .emotion-43 { overflow: hidden; } } -.emotion-44 { +.emotion-45 { display: inline-block; position: relative; z-index: 2; @@ -665,13 +681,13 @@ exports[`PageLayoutWrapper should render default page wrapper with children 1`] } @media (max-width: 37.4375rem) { - .emotion-44:last-child { + .emotion-45:last-child { margin-right: 3rem; } } @media (min-width: 37.5rem) { - .emotion-44::after { + .emotion-45::after { content: ''; position: absolute; bottom: -1px; @@ -681,7 +697,7 @@ exports[`PageLayoutWrapper should render default page wrapper with children 1`] } } -.emotion-46 { +.emotion-47 { font-size: 0.9375rem; line-height: 1.25rem; font-family: ReithSans,Helvetica,Arial,sans-serif; @@ -697,26 +713,26 @@ exports[`PageLayoutWrapper should render default page wrapper with children 1`] } @media (min-width: 20rem) and (max-width: 37.4375rem) { - .emotion-46 { + .emotion-47 { font-size: 1rem; line-height: 1.25rem; } } @media (min-width: 37.5rem) { - .emotion-46 { + .emotion-47 { font-size: 1rem; line-height: 1.25rem; } } @media (max-width: 37.4375rem) { - .emotion-46 { + .emotion-47 { padding: 0.75rem 0.5rem; } } -.emotion-46:hover::after { +.emotion-47:hover::after { content: ''; position: absolute; left: 0; @@ -725,7 +741,7 @@ exports[`PageLayoutWrapper should render default page wrapper with children 1`] border-bottom: 0.25rem solid #B80000; } -.emotion-46:focus::after { +.emotion-47:focus::after { content: ''; position: absolute; left: 0; @@ -736,7 +752,7 @@ exports[`PageLayoutWrapper should render default page wrapper with children 1`] border: 0.1875rem solid #000000; } -.emotion-46:focus-visible::after { +.emotion-47:focus-visible::after { content: ''; position: absolute; left: 0; @@ -747,7 +763,7 @@ exports[`PageLayoutWrapper should render default page wrapper with children 1`] border: 0.1875rem solid #000000; } -.emotion-88 { +.emotion-89 { background-color: #FFFFFF; clear: both; overflow: hidden; @@ -759,37 +775,37 @@ exports[`PageLayoutWrapper should render default page wrapper with children 1`] } @media (min-width: 37.5rem) { - .emotion-88 { + .emotion-89 { display: none; visibility: hidden; } } @media (prefers-reduced-motion: reduce) { - .emotion-88 { + .emotion-89 { -webkit-transition: none; transition: none; } } -.emotion-90 { +.emotion-91 { list-style-type: none; margin: 0; padding: 0 0.5rem; border-bottom: 0.0625rem solid #E6E8EA; } -.emotion-92 { +.emotion-93 { padding: 0.75rem 0; border-bottom: 0.0625rem solid #E6E8EA; } -.emotion-92:last-child { +.emotion-93:last-child { padding-bottom: 0.25rem; border: 0; } -.emotion-94 { +.emotion-95 { font-size: 0.9375rem; line-height: 1.25rem; font-family: ReithSans,Helvetica,Arial,sans-serif; @@ -803,40 +819,40 @@ exports[`PageLayoutWrapper should render default page wrapper with children 1`] } @media (min-width: 20rem) and (max-width: 37.4375rem) { - .emotion-94 { + .emotion-95 { font-size: 1rem; line-height: 1.25rem; } } @media (min-width: 37.5rem) { - .emotion-94 { + .emotion-95 { font-size: 1rem; line-height: 1.25rem; } } -.emotion-94:hover, -.emotion-94:focus { +.emotion-95:hover, +.emotion-95:focus { -webkit-text-decoration: underline; text-decoration: underline; text-decoration-color: #B80000; } -.emotion-136 { +.emotion-137 { position: absolute; width: calc(100vw - 0.8rem); inset-inline-start: 0; } @media (min-width: 1041px) { - .emotion-136 { + .emotion-137 { width: calc(100vw + 0.8rem); inset-inline-start: calc(-1 * (100vw - 1014px) / 2); } } -.emotion-136::after { +.emotion-137::after { content: ''; position: absolute; inset-block-end: 0; @@ -846,12 +862,12 @@ exports[`PageLayoutWrapper should render default page wrapper with children 1`] } @media (min-width: 1008px) { - .emotion-136 { + .emotion-137 { display: none; } } -.emotion-138 { +.emotion-139 { -webkit-box-flex: 1; -webkit-flex-grow: 1; -ms-flex-positive: 1; @@ -859,36 +875,36 @@ exports[`PageLayoutWrapper should render default page wrapper with children 1`] position: relative; } -.emotion-139 { +.emotion-140 { content-visibility: auto; contain-intrinsic-size: 33.125rem; } @media (min-width: 15rem) { - .emotion-139 { + .emotion-140 { contain-intrinsic-size: 26.563rem; } } @media (min-width: 20) { - .emotion-139 { + .emotion-140 { contain-intrinsic-size: 23.438rem; } } @media (min-width: 25rem) { - .emotion-139 { + .emotion-140 { contain-intrinsic-size: 21.875rem; } } @media (min-width: 37.5rem) { - .emotion-139 { + .emotion-140 { contain-intrinsic-size: 17.188rem; } } -.emotion-142 { +.emotion-143 { background-color: #B80000; height: 2.75rem; width: 100%; @@ -899,36 +915,36 @@ exports[`PageLayoutWrapper should render default page wrapper with children 1`] } @media (min-width: 15rem) { - .emotion-142 { + .emotion-143 { height: 3.75rem; padding: 0 0.5rem; } } @media (min-width: 25rem) { - .emotion-142 { + .emotion-143 { height: 3.75rem; padding: 0 1rem; } } @media (min-width: 37.5rem) { - .emotion-142 { + .emotion-143 { height: 4rem; } } -.emotion-142 svg { +.emotion-143 svg { fill: currentColor; } @media screen and (forced-colors: active) { - .emotion-142 svg { + .emotion-143 svg { fill: linkText; } } -.emotion-151 { +.emotion-152 { font-size: 0.875rem; line-height: 1.125rem; font-family: ReithSans,Helvetica,Arial,sans-serif; @@ -939,32 +955,32 @@ exports[`PageLayoutWrapper should render default page wrapper with children 1`] } @media (min-width: 20rem) and (max-width: 37.4375rem) { - .emotion-151 { + .emotion-152 { font-size: 0.875rem; line-height: 1.125rem; } } @media (min-width: 37.5rem) { - .emotion-151 { + .emotion-152 { font-size: 0.8125rem; line-height: 1rem; } } @media (max-width: 24.9375rem) { - .emotion-151 { + .emotion-152 { padding: 0 0.5rem; } } -.emotion-152 { +.emotion-153 { max-width: 63rem; margin: 0 auto; padding-top: 0.5rem; } -.emotion-153 { +.emotion-154 { border-bottom: 0.0625rem solid #3F3F42; -webkit-column-count: 4; column-count: 4; @@ -974,14 +990,14 @@ exports[`PageLayoutWrapper should render default page wrapper with children 1`] } @supports (grid-template-columns: fit-content(200px)) { - .emotion-153 { + .emotion-154 { display: grid; grid-auto-flow: column; } } @media (max-width: 14.9375rem) { - .emotion-153 { + .emotion-154 { grid-auto-flow: row; -webkit-column-count: 1; column-count: 1; @@ -989,7 +1005,7 @@ exports[`PageLayoutWrapper should render default page wrapper with children 1`] } @media (min-width: 15rem) and (max-width: 37.4375rem) { - .emotion-153 { + .emotion-154 { grid-column-gap: 0.5rem; grid-template-columns: repeat(2, 1fr); -webkit-column-count: 2; @@ -998,7 +1014,7 @@ exports[`PageLayoutWrapper should render default page wrapper with children 1`] } @media (min-width: 37.5rem) and (max-width: 62.9375rem) { - .emotion-153 { + .emotion-154 { grid-column-gap: 1rem; grid-template-columns: repeat(3, 1fr); -webkit-column-count: 3; @@ -1007,7 +1023,7 @@ exports[`PageLayoutWrapper should render default page wrapper with children 1`] } @media (min-width: 63rem) and (max-width: 79.9375rem) { - .emotion-153 { + .emotion-154 { grid-column-gap: 1rem; grid-template-columns: repeat(4, 1fr); -webkit-column-count: 4; @@ -1016,7 +1032,7 @@ exports[`PageLayoutWrapper should render default page wrapper with children 1`] } @media (min-width: 80rem) { - .emotion-153 { + .emotion-154 { grid-column-gap: 1rem; grid-template-columns: repeat(5, 1fr); -webkit-column-count: 5; @@ -1024,7 +1040,7 @@ exports[`PageLayoutWrapper should render default page wrapper with children 1`] } } -.emotion-153>li:first-of-type { +.emotion-154>li:first-of-type { border-bottom: 0.0625rem solid #3F3F42; padding: 0.5rem 0; margin-bottom: 0.5rem; @@ -1035,37 +1051,37 @@ exports[`PageLayoutWrapper should render default page wrapper with children 1`] } @media (min-width: 15rem) and (max-width: 37.4375rem) { - .emotion-153 { + .emotion-154 { grid-template-rows: repeat(4, auto); } } @media (min-width: 37.5rem) and (max-width: 62.9375rem) { - .emotion-153 { + .emotion-154 { grid-template-rows: repeat(3, auto); } } @media (min-width: 63rem) and (max-width: 79.9375rem) { - .emotion-153 { + .emotion-154 { grid-template-rows: repeat(3, auto); } } @media (min-width: 80rem) { - .emotion-153 { + .emotion-154 { grid-template-rows: repeat(3, auto); } } -.emotion-154 { +.emotion-155 { min-width: 50%; -webkit-column-gap: 1rem; column-gap: 1rem; break-inside: avoid-column; } -.emotion-155 { +.emotion-156 { font-family: ReithSans,Helvetica,Arial,sans-serif; font-style: normal; font-weight: 700; @@ -1076,23 +1092,23 @@ exports[`PageLayoutWrapper should render default page wrapper with children 1`] display: block; } -.emotion-155:hover, -.emotion-155:focus { +.emotion-156:hover, +.emotion-156:focus { -webkit-text-decoration: underline; text-decoration: underline; } -.emotion-162 { +.emotion-163 { color: #FFFFFF; margin: 0; padding: 1rem 0; } -.emotion-162 a { +.emotion-163 a { padding: 0; } -.emotion-163 { +.emotion-164 { font-family: ReithSans,Helvetica,Arial,sans-serif; font-style: normal; font-weight: 700; @@ -1103,8 +1119,8 @@ exports[`PageLayoutWrapper should render default page wrapper with children 1`] display: inline; } -.emotion-163:hover, -.emotion-163:focus { +.emotion-164:hover, +.emotion-164:focus { -webkit-text-decoration: underline; text-decoration: underline; } @@ -1114,523 +1130,528 @@ exports[`PageLayoutWrapper should render default page wrapper with children 1`] class="emotion-0" id="main-wrapper" > - + + +

Child element