diff --git a/src/components/Molecules/StatsSlice/StatsSlice.js b/src/components/Molecules/StatsSlice/StatsSlice.js new file mode 100644 index 000000000..dcf6ede2e --- /dev/null +++ b/src/components/Molecules/StatsSlice/StatsSlice.js @@ -0,0 +1,69 @@ +import { isEmpty } from 'lodash'; +import PropTypes from 'prop-types'; +import React from 'react'; +import StatNodeComponent from './_StatNode'; +import { + InnerWrapper, + OuterWrapper +} from './StatsSlice.style'; + +// MARK: stats slice +const StatsSlice = ({ + nodes, + pageBackgroundColour = 'teal_dark', + paddingTop = '2rem', + paddingBottom = '2rem', + ease = 'cubic', + characterStagger = 80, + stringCharacterDuration = '1600ms', + numberCharacterDuration = '2000ms' +}) => { + // if no nodes have been provided, don't render anything + if (isEmpty(nodes)) { + return null; + } + + return ( + + + {nodes?.map((node, index) => { + const key = index + String(node.title); + const nodeComponent = ( + + ); + return nodeComponent; + })} + + + ); +}; +StatsSlice.propTypes = { + nodes: PropTypes.arrayOf( + PropTypes.shape({ + title: PropTypes.string.isRequired, + stat: PropTypes.oneOfType([PropTypes.string, PropTypes.number]), + body: PropTypes.node + }) + ), + pageBackgroundColour: PropTypes.string, + paddingTop: PropTypes.string, + paddingBottom: PropTypes.string, + ease: PropTypes.string, + characterStagger: PropTypes.number, + stringCharacterDuration: PropTypes.string, + numberCharacterDuration: PropTypes.string +}; + +export default StatsSlice; diff --git a/src/components/Molecules/StatsSlice/StatsSlice.md b/src/components/Molecules/StatsSlice/StatsSlice.md new file mode 100644 index 000000000..c6cd00de0 --- /dev/null +++ b/src/components/Molecules/StatsSlice/StatsSlice.md @@ -0,0 +1,60 @@ +# Stats Slice + +### Empty stats + +```js +
+ +
+``` + +### Basic stats + +```js + +``` + +### Multiple stats + +```js + +``` + + +### No animation + +```js + +``` diff --git a/src/components/Molecules/StatsSlice/StatsSlice.style.js b/src/components/Molecules/StatsSlice/StatsSlice.style.js new file mode 100644 index 000000000..8bcd9dbef --- /dev/null +++ b/src/components/Molecules/StatsSlice/StatsSlice.style.js @@ -0,0 +1,196 @@ +import styled, { keyframes } from 'styled-components'; +import Text from '../../Atoms/Text/Text'; + +export const OuterWrapper = styled.div` + display: flex; + justify-content: center; + padding: ${({ paddingTop, paddingBottom }) => `${paddingTop} 1rem ${paddingBottom}`}; + background: ${({ theme, backgroundColour }) => theme.color(backgroundColour)}; + + @media ${({ theme }) => theme.breakpoints2026('M')} { + padding-left: 2rem; + padding-right: 2rem; + } +`; + +export const InnerWrapper = styled.div` + display: flex; + flex-direction: column; + flex-wrap: wrap; + gap: 1rem; + max-width: 1152px; + + @media ${({ theme }) => theme.breakpoints2026('L')} { + flex-direction: row; + gap: 2rem; + } +`; + +export const StatContainer = styled.div` + display: flex; + flex-direction: column; + align-items: flex-start; + gap: 1rem; + background: #ffffff; + padding: 1rem; + flex: 1 1 0px; + min-width: 30%; + border-radius: 1rem; + box-shadow: rgba(0, 0, 0, 0.15) 0px 0px 1rem; + + @media ${({ theme }) => theme.breakpoints2026('M')} { + padding: 2rem; + } +`; + +export const ValueContainer = styled.div` + position: relative; + display: flex; + flex-direction: column; + align-items: flex-start; + gap: 0.5rem; + padding-bottom: 0.5rem; +`; + +const clipIn = keyframes` + 0% { + clip-path: inset(0px 100% 0px 0px); + } + 100% { + clip-path: inset(0px 0% 0px 0px); + } +`; + +export const ValueUnderline = styled.img` + position: absolute; + width: 100%; + height: 4px; + left: 0; + bottom: 0px; + animation-name: ${clipIn}; + animation-duration: 0.7s; + animation-timing-function: cubic-bezier(0.219, -0.011, 0.164, 0.987); + animation-delay: ${({ delay }) => delay}ms; + animation-fill-mode: both; + + // ease = none and reduced motion both disable the transition + + @media (prefers-reduced-motion: reduce) { + animation-delay: 0; + animation-name: none; + } + &[data-ease="none"] { + animation-delay: 0; + animation-name: none; + } +`; + +export const StatValue = styled.div` + display: flex; + flex-wrap: wrap; + gap: 0.5rem; + text-transform: uppercase; + font-family: ${({ theme }) => theme.fontFamilies('Anton')}; + font-size: ${({ theme }) => theme.fontSize('xl')}; + line-height: 1; + + @media ${({ theme }) => theme.breakpoints2026('M')} { + font-size: ${({ theme }) => theme.fontSize('xxl')}; + } + + @media ${({ theme }) => theme.breakpoints2026('L')} { + font-size: ${({ theme }) => theme.fontSize('xxl')}; + } +`; + +export const Word = styled.span` + display: flex; +`; + +export const AnimatedCharacter = styled.div` + position: relative; + overflow: hidden; + // small amount of extra padding to avoid descending characters like "," from being cut off; + // we shouldn't need to worry about longer descenders like "g" as we're using caps + padding-bottom: 0.06rem; +`; + +export const SpacingCharacter = styled.div` + visibility: hidden; + white-space: pre-wrap; +`; + +export const AnimatedDigit = styled.div` + position: absolute; + top: 0; + left: 0; + + transition-delay: ${({ delay }) => delay}ms; + transition-property: transform; + transition-duration: ${({ duration }) => duration}; + + // ease = none and reduced motion both disable the transition + @media (prefers-reduced-motion: reduce) { + transition-property: none; + transition-delay: 0; + } + &[data-ease="none"] { + transition-property: none; + transition-delay: 0; + } + + // easing functions from https://easingwizard.com/ + &[data-ease="cubic"] { + transition-timing-function: cubic-bezier(0.22, 1, 0.36, 1); + } + &[data-ease="overshoot"] { + transition-timing-function: linear( + 0, + 0.329 8.8%, + 0.59 18%, + 0.787 27.7%, + 0.863 32.8%, + 0.926 38.2%, + 0.968 43.1%, + 1 48.3%, + 1.022 53.7%, + 1.034 59.6%, + 1.035 69.8%, + 1.006 90.7%, + 1 + ); + } + &[data-ease="bounce"] { + transition-timing-function: linear(0, 0.384 15.4%, 0.833 35.8%, 1 44.7%, 0.919 51.5%, 0.9 54.7%, 0.894 58%, 0.911 63.8%, 1 77.4%, 0.985 84.4%, 1); + } +`; + +export const AccessibleValue = styled.div` + position: absolute; + width: 100%; + height: 100%; + left: 0; + top: 0; + z-index: 1; + opacity: 0; + text-transform: uppercase; + font-family: ${({ theme }) => theme.fontFamilies('Anton')}; + font-size: ${({ theme }) => theme.fontSize('xl')}; + line-height: 1; + + @media ${({ theme }) => theme.breakpoints2026('M')} { + font-size: ${({ theme }) => theme.fontSize('xxl')}; + } + + @media ${({ theme }) => theme.breakpoints2026('L')} { + font-size: ${({ theme }) => theme.fontSize('xxl')}; + } +`; + +export const Body = styled(Text)` + font-size: ${({ theme }) => theme.fontSize('s')}; + + @media ${({ theme }) => theme.breakpoints2026('M')} { + font-size: ${({ theme }) => theme.fontSize('m')}; + } +`; diff --git a/src/components/Molecules/StatsSlice/StatsSlice.test.js b/src/components/Molecules/StatsSlice/StatsSlice.test.js new file mode 100644 index 000000000..f8623985c --- /dev/null +++ b/src/components/Molecules/StatsSlice/StatsSlice.test.js @@ -0,0 +1,38 @@ +import 'jest-styled-components'; +import React from 'react'; +import renderWithTheme from '../../../../tests/hoc/shallowWithTheme'; +import StatsSlice from './StatsSlice'; +import './_test-utils'; + +it('Stats Slices with no nodes should not render', () => { + const statsEl = renderWithTheme().toJSON(); + expect(statsEl).toBeNull(); +}); + +it('Stats Slices with a single node should render', () => { + const statsEl = renderWithTheme().toJSON(); + expect(statsEl).toMatchSnapshot(); +}); + +it('Stats Slices with multiple nodes should render', () => { + const statsEl = renderWithTheme().toJSON(); + expect(statsEl).toMatchSnapshot(); +}); \ No newline at end of file diff --git a/src/components/Molecules/StatsSlice/_Characters.js b/src/components/Molecules/StatsSlice/_Characters.js new file mode 100644 index 000000000..a08d5c309 --- /dev/null +++ b/src/components/Molecules/StatsSlice/_Characters.js @@ -0,0 +1,88 @@ +import PropTypes from 'prop-types'; +import React, { useRef } from 'react'; +import { + AnimatedCharacter, + AnimatedDigit, + SpacingCharacter +} from './StatsSlice.style'; + +const propTypes = { + character: PropTypes.string.isRequired, + delay: PropTypes.number, + ease: PropTypes.string, + characterDuration: PropTypes.string, + isVisible: PropTypes.bool.isRequired +}; + +// MARK: string +export function AnimatedStringCharacter({ + character, + delay, + ease, + characterDuration, + isVisible +}) { + const digitRef = useRef(); + + if (isVisible) { + digitRef.current?.style.setProperty('transform', 'translateY(-50%)'); + } + + return ( + + {character} + +
 
+
{character}
+ + + ); +} +AnimatedStringCharacter.propTypes = propTypes; + +// MARK: number +export function AnimatedNumberCharacter({ + character, + delay, + ease, + characterDuration, + isVisible +}) { + const digitRef = useRef(); + + if (isVisible) { + // calculate offset to show the required digit + const transform = `translateY(-${(100 / 11) * (+character || 10)}%)`; + digitRef.current?.style.setProperty('transform', transform); + } + + return ( + + {character} + +
 
+
1
+
2
+
3
+
4
+
5
+
6
+
7
+
8
+
9
+
0
+ + + ); +} +AnimatedNumberCharacter.propTypes = propTypes; diff --git a/src/components/Molecules/StatsSlice/_StatNode.js b/src/components/Molecules/StatsSlice/_StatNode.js new file mode 100644 index 000000000..dc16e194b --- /dev/null +++ b/src/components/Molecules/StatsSlice/_StatNode.js @@ -0,0 +1,133 @@ +import PropTypes from 'prop-types'; +import React, { useRef, useState, useEffect } from 'react'; +import altCtaUnderline from '../../../theme/shared/assets/alt_cta_underline.svg'; +import { + AccessibleValue, + Body, + StatContainer, + StatValue, + ValueContainer, + ValueUnderline, + Word +} from './StatsSlice.style'; +import splitStatString from './_utils'; +import { AnimatedStringCharacter, AnimatedNumberCharacter } from './_Characters'; + +// MARK: stat +export default function StatNodeComponent({ + stat, + characterStagger, + stringCharacterDuration, + numberCharacterDuration, + ease, + body +}) { + // calculate the duration for the animation + // based on the number of characters and the stagger; + // limit the duration to 1600ms to avoid overly long animations + const duration = Math.min(String(stat).length, 16) * characterStagger; + + // use an intersection observer to postpone the animation until the stats slice is visible + const elRef = useRef(); + const [isVisible, setIsVisible] = useState(false); + const startDelayRef = useRef(0); + + useEffect(() => { + const observer = new IntersectionObserver(entries => { + entries.forEach(entry => { + if (entry.isIntersecting) { + // set the start delay based on the x position of the element; + // this lets us delay stats incrementally, showing columns one after another (ish), + // while allowing rows to control their own entry times + startDelayRef.current = (entry.boundingClientRect.left / window.innerWidth) * 1600; + setIsVisible(true); + observer.disconnect(); + } + }); + }, { threshold: 0 }); + + if (elRef.current) { + observer.observe(elRef.current); + } + + return () => observer.disconnect(); + }, []); + + // split value into words and characters, + // and get the type of each character; + // we animate string and numeric values differently + const wordObjList = splitStatString(stat); + + // track delay for each character for a staggered effect + let characterDelay = startDelayRef.current; + + return ( + + + + {isVisible && ( + + )} + {stat} + + {body} + + ); +} +StatNodeComponent.propTypes = { + stat: PropTypes.string.isRequired, + characterStagger: PropTypes.number, + ease: PropTypes.string, + stringCharacterDuration: PropTypes.string, + numberCharacterDuration: PropTypes.string, + body: PropTypes.node +}; diff --git a/src/components/Molecules/StatsSlice/__snapshots__/StatsSlice.test.js.snap b/src/components/Molecules/StatsSlice/__snapshots__/StatsSlice.test.js.snap new file mode 100644 index 000000000..b379fc498 --- /dev/null +++ b/src/components/Molecules/StatsSlice/__snapshots__/StatsSlice.test.js.snap @@ -0,0 +1,4075 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`Stats Slices with a single node should render 1`] = ` +.c23 { + font-family: 'Montserrat',Helvetica,Arial,sans-serif; + font-weight: 400; + text-transform: inherit; + -webkit-letter-spacing: 0; + -moz-letter-spacing: 0; + -ms-letter-spacing: 0; + letter-spacing: 0; + font-size: 1rem; + line-height: 1.25rem; +} + +.c23 span { + font-size: inherit; + line-height: inherit; +} + +.c0 { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-box-pack: center; + -webkit-justify-content: center; + -ms-flex-pack: center; + justify-content: center; + padding: 2rem 1rem 2rem; + background: #13767C; +} + +.c1 { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex-direction: column; + -ms-flex-direction: column; + flex-direction: column; + -webkit-flex-wrap: wrap; + -ms-flex-wrap: wrap; + flex-wrap: wrap; + gap: 1rem; + max-width: 1152px; +} + +.c2 { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex-direction: column; + -ms-flex-direction: column; + flex-direction: column; + -webkit-align-items: flex-start; + -webkit-box-align: flex-start; + -ms-flex-align: flex-start; + align-items: flex-start; + gap: 1rem; + background: #ffffff; + padding: 1rem; + -webkit-flex: 1 1 0px; + -ms-flex: 1 1 0px; + flex: 1 1 0px; + min-width: 30%; + border-radius: 1rem; + box-shadow: rgba(0,0,0,0.15) 0px 0px 1rem; +} + +.c3 { + position: relative; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex-direction: column; + -ms-flex-direction: column; + flex-direction: column; + -webkit-align-items: flex-start; + -webkit-box-align: flex-start; + -ms-flex-align: flex-start; + align-items: flex-start; + gap: 0.5rem; + padding-bottom: 0.5rem; +} + +.c4 { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex-wrap: wrap; + -ms-flex-wrap: wrap; + flex-wrap: wrap; + gap: 0.5rem; + text-transform: uppercase; + font-family: 'Anton',Impact,sans-serif; + font-size: 2rem; + line-height: 1; +} + +.c5 { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; +} + +.c6 { + position: relative; + overflow: hidden; + padding-bottom: 0.06rem; +} + +.c7 { + visibility: hidden; + white-space: pre-wrap; +} + +.c8 { + position: absolute; + top: 0; + left: 0; + -webkit-transition-delay: 80ms; + transition-delay: 80ms; + -webkit-transition-property: -webkit-transform; + -webkit-transition-property: transform; + transition-property: transform; + -webkit-transition-duration: 2000ms; + transition-duration: 2000ms; +} + +.c8[data-ease="none"] { + -webkit-transition-property: none; + transition-property: none; + -webkit-transition-delay: 0; + transition-delay: 0; +} + +.c8[data-ease="cubic"] { + -webkit-transition-timing-function: cubic-bezier(0.22,1,0.36,1); + transition-timing-function: cubic-bezier(0.22,1,0.36,1); +} + +.c8[data-ease="overshoot"] { + -webkit-transition-timing-function: linear( 0,0.329 8.8%,0.59 18%,0.787 27.7%,0.863 32.8%,0.926 38.2%,0.968 43.1%,1 48.3%,1.022 53.7%,1.034 59.6%,1.035 69.8%,1.006 90.7%,1 ); + transition-timing-function: linear( 0,0.329 8.8%,0.59 18%,0.787 27.7%,0.863 32.8%,0.926 38.2%,0.968 43.1%,1 48.3%,1.022 53.7%,1.034 59.6%,1.035 69.8%,1.006 90.7%,1 ); +} + +.c8[data-ease="bounce"] { + -webkit-transition-timing-function: linear(0,0.384 15.4%,0.833 35.8%,1 44.7%,0.919 51.5%,0.9 54.7%,0.894 58%,0.911 63.8%,1 77.4%,0.985 84.4%,1); + transition-timing-function: linear(0,0.384 15.4%,0.833 35.8%,1 44.7%,0.919 51.5%,0.9 54.7%,0.894 58%,0.911 63.8%,1 77.4%,0.985 84.4%,1); +} + +.c9 { + position: absolute; + top: 0; + left: 0; + -webkit-transition-delay: 160ms; + transition-delay: 160ms; + -webkit-transition-property: -webkit-transform; + -webkit-transition-property: transform; + transition-property: transform; + -webkit-transition-duration: 2000ms; + transition-duration: 2000ms; +} + +.c9[data-ease="none"] { + -webkit-transition-property: none; + transition-property: none; + -webkit-transition-delay: 0; + transition-delay: 0; +} + +.c9[data-ease="cubic"] { + -webkit-transition-timing-function: cubic-bezier(0.22,1,0.36,1); + transition-timing-function: cubic-bezier(0.22,1,0.36,1); +} + +.c9[data-ease="overshoot"] { + -webkit-transition-timing-function: linear( 0,0.329 8.8%,0.59 18%,0.787 27.7%,0.863 32.8%,0.926 38.2%,0.968 43.1%,1 48.3%,1.022 53.7%,1.034 59.6%,1.035 69.8%,1.006 90.7%,1 ); + transition-timing-function: linear( 0,0.329 8.8%,0.59 18%,0.787 27.7%,0.863 32.8%,0.926 38.2%,0.968 43.1%,1 48.3%,1.022 53.7%,1.034 59.6%,1.035 69.8%,1.006 90.7%,1 ); +} + +.c9[data-ease="bounce"] { + -webkit-transition-timing-function: linear(0,0.384 15.4%,0.833 35.8%,1 44.7%,0.919 51.5%,0.9 54.7%,0.894 58%,0.911 63.8%,1 77.4%,0.985 84.4%,1); + transition-timing-function: linear(0,0.384 15.4%,0.833 35.8%,1 44.7%,0.919 51.5%,0.9 54.7%,0.894 58%,0.911 63.8%,1 77.4%,0.985 84.4%,1); +} + +.c10 { + position: absolute; + top: 0; + left: 0; + -webkit-transition-delay: 240ms; + transition-delay: 240ms; + -webkit-transition-property: -webkit-transform; + -webkit-transition-property: transform; + transition-property: transform; + -webkit-transition-duration: 2000ms; + transition-duration: 2000ms; +} + +.c10[data-ease="none"] { + -webkit-transition-property: none; + transition-property: none; + -webkit-transition-delay: 0; + transition-delay: 0; +} + +.c10[data-ease="cubic"] { + -webkit-transition-timing-function: cubic-bezier(0.22,1,0.36,1); + transition-timing-function: cubic-bezier(0.22,1,0.36,1); +} + +.c10[data-ease="overshoot"] { + -webkit-transition-timing-function: linear( 0,0.329 8.8%,0.59 18%,0.787 27.7%,0.863 32.8%,0.926 38.2%,0.968 43.1%,1 48.3%,1.022 53.7%,1.034 59.6%,1.035 69.8%,1.006 90.7%,1 ); + transition-timing-function: linear( 0,0.329 8.8%,0.59 18%,0.787 27.7%,0.863 32.8%,0.926 38.2%,0.968 43.1%,1 48.3%,1.022 53.7%,1.034 59.6%,1.035 69.8%,1.006 90.7%,1 ); +} + +.c10[data-ease="bounce"] { + -webkit-transition-timing-function: linear(0,0.384 15.4%,0.833 35.8%,1 44.7%,0.919 51.5%,0.9 54.7%,0.894 58%,0.911 63.8%,1 77.4%,0.985 84.4%,1); + transition-timing-function: linear(0,0.384 15.4%,0.833 35.8%,1 44.7%,0.919 51.5%,0.9 54.7%,0.894 58%,0.911 63.8%,1 77.4%,0.985 84.4%,1); +} + +.c11 { + position: absolute; + top: 0; + left: 0; + -webkit-transition-delay: 320ms; + transition-delay: 320ms; + -webkit-transition-property: -webkit-transform; + -webkit-transition-property: transform; + transition-property: transform; + -webkit-transition-duration: 1600ms; + transition-duration: 1600ms; +} + +.c11[data-ease="none"] { + -webkit-transition-property: none; + transition-property: none; + -webkit-transition-delay: 0; + transition-delay: 0; +} + +.c11[data-ease="cubic"] { + -webkit-transition-timing-function: cubic-bezier(0.22,1,0.36,1); + transition-timing-function: cubic-bezier(0.22,1,0.36,1); +} + +.c11[data-ease="overshoot"] { + -webkit-transition-timing-function: linear( 0,0.329 8.8%,0.59 18%,0.787 27.7%,0.863 32.8%,0.926 38.2%,0.968 43.1%,1 48.3%,1.022 53.7%,1.034 59.6%,1.035 69.8%,1.006 90.7%,1 ); + transition-timing-function: linear( 0,0.329 8.8%,0.59 18%,0.787 27.7%,0.863 32.8%,0.926 38.2%,0.968 43.1%,1 48.3%,1.022 53.7%,1.034 59.6%,1.035 69.8%,1.006 90.7%,1 ); +} + +.c11[data-ease="bounce"] { + -webkit-transition-timing-function: linear(0,0.384 15.4%,0.833 35.8%,1 44.7%,0.919 51.5%,0.9 54.7%,0.894 58%,0.911 63.8%,1 77.4%,0.985 84.4%,1); + transition-timing-function: linear(0,0.384 15.4%,0.833 35.8%,1 44.7%,0.919 51.5%,0.9 54.7%,0.894 58%,0.911 63.8%,1 77.4%,0.985 84.4%,1); +} + +.c12 { + position: absolute; + top: 0; + left: 0; + -webkit-transition-delay: 400ms; + transition-delay: 400ms; + -webkit-transition-property: -webkit-transform; + -webkit-transition-property: transform; + transition-property: transform; + -webkit-transition-duration: 2000ms; + transition-duration: 2000ms; +} + +.c12[data-ease="none"] { + -webkit-transition-property: none; + transition-property: none; + -webkit-transition-delay: 0; + transition-delay: 0; +} + +.c12[data-ease="cubic"] { + -webkit-transition-timing-function: cubic-bezier(0.22,1,0.36,1); + transition-timing-function: cubic-bezier(0.22,1,0.36,1); +} + +.c12[data-ease="overshoot"] { + -webkit-transition-timing-function: linear( 0,0.329 8.8%,0.59 18%,0.787 27.7%,0.863 32.8%,0.926 38.2%,0.968 43.1%,1 48.3%,1.022 53.7%,1.034 59.6%,1.035 69.8%,1.006 90.7%,1 ); + transition-timing-function: linear( 0,0.329 8.8%,0.59 18%,0.787 27.7%,0.863 32.8%,0.926 38.2%,0.968 43.1%,1 48.3%,1.022 53.7%,1.034 59.6%,1.035 69.8%,1.006 90.7%,1 ); +} + +.c12[data-ease="bounce"] { + -webkit-transition-timing-function: linear(0,0.384 15.4%,0.833 35.8%,1 44.7%,0.919 51.5%,0.9 54.7%,0.894 58%,0.911 63.8%,1 77.4%,0.985 84.4%,1); + transition-timing-function: linear(0,0.384 15.4%,0.833 35.8%,1 44.7%,0.919 51.5%,0.9 54.7%,0.894 58%,0.911 63.8%,1 77.4%,0.985 84.4%,1); +} + +.c13 { + position: absolute; + top: 0; + left: 0; + -webkit-transition-delay: 480ms; + transition-delay: 480ms; + -webkit-transition-property: -webkit-transform; + -webkit-transition-property: transform; + transition-property: transform; + -webkit-transition-duration: 2000ms; + transition-duration: 2000ms; +} + +.c13[data-ease="none"] { + -webkit-transition-property: none; + transition-property: none; + -webkit-transition-delay: 0; + transition-delay: 0; +} + +.c13[data-ease="cubic"] { + -webkit-transition-timing-function: cubic-bezier(0.22,1,0.36,1); + transition-timing-function: cubic-bezier(0.22,1,0.36,1); +} + +.c13[data-ease="overshoot"] { + -webkit-transition-timing-function: linear( 0,0.329 8.8%,0.59 18%,0.787 27.7%,0.863 32.8%,0.926 38.2%,0.968 43.1%,1 48.3%,1.022 53.7%,1.034 59.6%,1.035 69.8%,1.006 90.7%,1 ); + transition-timing-function: linear( 0,0.329 8.8%,0.59 18%,0.787 27.7%,0.863 32.8%,0.926 38.2%,0.968 43.1%,1 48.3%,1.022 53.7%,1.034 59.6%,1.035 69.8%,1.006 90.7%,1 ); +} + +.c13[data-ease="bounce"] { + -webkit-transition-timing-function: linear(0,0.384 15.4%,0.833 35.8%,1 44.7%,0.919 51.5%,0.9 54.7%,0.894 58%,0.911 63.8%,1 77.4%,0.985 84.4%,1); + transition-timing-function: linear(0,0.384 15.4%,0.833 35.8%,1 44.7%,0.919 51.5%,0.9 54.7%,0.894 58%,0.911 63.8%,1 77.4%,0.985 84.4%,1); +} + +.c14 { + position: absolute; + top: 0; + left: 0; + -webkit-transition-delay: 560ms; + transition-delay: 560ms; + -webkit-transition-property: -webkit-transform; + -webkit-transition-property: transform; + transition-property: transform; + -webkit-transition-duration: 2000ms; + transition-duration: 2000ms; +} + +.c14[data-ease="none"] { + -webkit-transition-property: none; + transition-property: none; + -webkit-transition-delay: 0; + transition-delay: 0; +} + +.c14[data-ease="cubic"] { + -webkit-transition-timing-function: cubic-bezier(0.22,1,0.36,1); + transition-timing-function: cubic-bezier(0.22,1,0.36,1); +} + +.c14[data-ease="overshoot"] { + -webkit-transition-timing-function: linear( 0,0.329 8.8%,0.59 18%,0.787 27.7%,0.863 32.8%,0.926 38.2%,0.968 43.1%,1 48.3%,1.022 53.7%,1.034 59.6%,1.035 69.8%,1.006 90.7%,1 ); + transition-timing-function: linear( 0,0.329 8.8%,0.59 18%,0.787 27.7%,0.863 32.8%,0.926 38.2%,0.968 43.1%,1 48.3%,1.022 53.7%,1.034 59.6%,1.035 69.8%,1.006 90.7%,1 ); +} + +.c14[data-ease="bounce"] { + -webkit-transition-timing-function: linear(0,0.384 15.4%,0.833 35.8%,1 44.7%,0.919 51.5%,0.9 54.7%,0.894 58%,0.911 63.8%,1 77.4%,0.985 84.4%,1); + transition-timing-function: linear(0,0.384 15.4%,0.833 35.8%,1 44.7%,0.919 51.5%,0.9 54.7%,0.894 58%,0.911 63.8%,1 77.4%,0.985 84.4%,1); +} + +.c15 { + position: absolute; + top: 0; + left: 0; + -webkit-transition-delay: 640ms; + transition-delay: 640ms; + -webkit-transition-property: -webkit-transform; + -webkit-transition-property: transform; + transition-property: transform; + -webkit-transition-duration: 1600ms; + transition-duration: 1600ms; +} + +.c15[data-ease="none"] { + -webkit-transition-property: none; + transition-property: none; + -webkit-transition-delay: 0; + transition-delay: 0; +} + +.c15[data-ease="cubic"] { + -webkit-transition-timing-function: cubic-bezier(0.22,1,0.36,1); + transition-timing-function: cubic-bezier(0.22,1,0.36,1); +} + +.c15[data-ease="overshoot"] { + -webkit-transition-timing-function: linear( 0,0.329 8.8%,0.59 18%,0.787 27.7%,0.863 32.8%,0.926 38.2%,0.968 43.1%,1 48.3%,1.022 53.7%,1.034 59.6%,1.035 69.8%,1.006 90.7%,1 ); + transition-timing-function: linear( 0,0.329 8.8%,0.59 18%,0.787 27.7%,0.863 32.8%,0.926 38.2%,0.968 43.1%,1 48.3%,1.022 53.7%,1.034 59.6%,1.035 69.8%,1.006 90.7%,1 ); +} + +.c15[data-ease="bounce"] { + -webkit-transition-timing-function: linear(0,0.384 15.4%,0.833 35.8%,1 44.7%,0.919 51.5%,0.9 54.7%,0.894 58%,0.911 63.8%,1 77.4%,0.985 84.4%,1); + transition-timing-function: linear(0,0.384 15.4%,0.833 35.8%,1 44.7%,0.919 51.5%,0.9 54.7%,0.894 58%,0.911 63.8%,1 77.4%,0.985 84.4%,1); +} + +.c16 { + position: absolute; + top: 0; + left: 0; + -webkit-transition-delay: 720ms; + transition-delay: 720ms; + -webkit-transition-property: -webkit-transform; + -webkit-transition-property: transform; + transition-property: transform; + -webkit-transition-duration: 2000ms; + transition-duration: 2000ms; +} + +.c16[data-ease="none"] { + -webkit-transition-property: none; + transition-property: none; + -webkit-transition-delay: 0; + transition-delay: 0; +} + +.c16[data-ease="cubic"] { + -webkit-transition-timing-function: cubic-bezier(0.22,1,0.36,1); + transition-timing-function: cubic-bezier(0.22,1,0.36,1); +} + +.c16[data-ease="overshoot"] { + -webkit-transition-timing-function: linear( 0,0.329 8.8%,0.59 18%,0.787 27.7%,0.863 32.8%,0.926 38.2%,0.968 43.1%,1 48.3%,1.022 53.7%,1.034 59.6%,1.035 69.8%,1.006 90.7%,1 ); + transition-timing-function: linear( 0,0.329 8.8%,0.59 18%,0.787 27.7%,0.863 32.8%,0.926 38.2%,0.968 43.1%,1 48.3%,1.022 53.7%,1.034 59.6%,1.035 69.8%,1.006 90.7%,1 ); +} + +.c16[data-ease="bounce"] { + -webkit-transition-timing-function: linear(0,0.384 15.4%,0.833 35.8%,1 44.7%,0.919 51.5%,0.9 54.7%,0.894 58%,0.911 63.8%,1 77.4%,0.985 84.4%,1); + transition-timing-function: linear(0,0.384 15.4%,0.833 35.8%,1 44.7%,0.919 51.5%,0.9 54.7%,0.894 58%,0.911 63.8%,1 77.4%,0.985 84.4%,1); +} + +.c17 { + position: absolute; + top: 0; + left: 0; + -webkit-transition-delay: 800ms; + transition-delay: 800ms; + -webkit-transition-property: -webkit-transform; + -webkit-transition-property: transform; + transition-property: transform; + -webkit-transition-duration: 2000ms; + transition-duration: 2000ms; +} + +.c17[data-ease="none"] { + -webkit-transition-property: none; + transition-property: none; + -webkit-transition-delay: 0; + transition-delay: 0; +} + +.c17[data-ease="cubic"] { + -webkit-transition-timing-function: cubic-bezier(0.22,1,0.36,1); + transition-timing-function: cubic-bezier(0.22,1,0.36,1); +} + +.c17[data-ease="overshoot"] { + -webkit-transition-timing-function: linear( 0,0.329 8.8%,0.59 18%,0.787 27.7%,0.863 32.8%,0.926 38.2%,0.968 43.1%,1 48.3%,1.022 53.7%,1.034 59.6%,1.035 69.8%,1.006 90.7%,1 ); + transition-timing-function: linear( 0,0.329 8.8%,0.59 18%,0.787 27.7%,0.863 32.8%,0.926 38.2%,0.968 43.1%,1 48.3%,1.022 53.7%,1.034 59.6%,1.035 69.8%,1.006 90.7%,1 ); +} + +.c17[data-ease="bounce"] { + -webkit-transition-timing-function: linear(0,0.384 15.4%,0.833 35.8%,1 44.7%,0.919 51.5%,0.9 54.7%,0.894 58%,0.911 63.8%,1 77.4%,0.985 84.4%,1); + transition-timing-function: linear(0,0.384 15.4%,0.833 35.8%,1 44.7%,0.919 51.5%,0.9 54.7%,0.894 58%,0.911 63.8%,1 77.4%,0.985 84.4%,1); +} + +.c18 { + position: absolute; + top: 0; + left: 0; + -webkit-transition-delay: 880ms; + transition-delay: 880ms; + -webkit-transition-property: -webkit-transform; + -webkit-transition-property: transform; + transition-property: transform; + -webkit-transition-duration: 2000ms; + transition-duration: 2000ms; +} + +.c18[data-ease="none"] { + -webkit-transition-property: none; + transition-property: none; + -webkit-transition-delay: 0; + transition-delay: 0; +} + +.c18[data-ease="cubic"] { + -webkit-transition-timing-function: cubic-bezier(0.22,1,0.36,1); + transition-timing-function: cubic-bezier(0.22,1,0.36,1); +} + +.c18[data-ease="overshoot"] { + -webkit-transition-timing-function: linear( 0,0.329 8.8%,0.59 18%,0.787 27.7%,0.863 32.8%,0.926 38.2%,0.968 43.1%,1 48.3%,1.022 53.7%,1.034 59.6%,1.035 69.8%,1.006 90.7%,1 ); + transition-timing-function: linear( 0,0.329 8.8%,0.59 18%,0.787 27.7%,0.863 32.8%,0.926 38.2%,0.968 43.1%,1 48.3%,1.022 53.7%,1.034 59.6%,1.035 69.8%,1.006 90.7%,1 ); +} + +.c18[data-ease="bounce"] { + -webkit-transition-timing-function: linear(0,0.384 15.4%,0.833 35.8%,1 44.7%,0.919 51.5%,0.9 54.7%,0.894 58%,0.911 63.8%,1 77.4%,0.985 84.4%,1); + transition-timing-function: linear(0,0.384 15.4%,0.833 35.8%,1 44.7%,0.919 51.5%,0.9 54.7%,0.894 58%,0.911 63.8%,1 77.4%,0.985 84.4%,1); +} + +.c19 { + position: absolute; + top: 0; + left: 0; + -webkit-transition-delay: 960ms; + transition-delay: 960ms; + -webkit-transition-property: -webkit-transform; + -webkit-transition-property: transform; + transition-property: transform; + -webkit-transition-duration: 1600ms; + transition-duration: 1600ms; +} + +.c19[data-ease="none"] { + -webkit-transition-property: none; + transition-property: none; + -webkit-transition-delay: 0; + transition-delay: 0; +} + +.c19[data-ease="cubic"] { + -webkit-transition-timing-function: cubic-bezier(0.22,1,0.36,1); + transition-timing-function: cubic-bezier(0.22,1,0.36,1); +} + +.c19[data-ease="overshoot"] { + -webkit-transition-timing-function: linear( 0,0.329 8.8%,0.59 18%,0.787 27.7%,0.863 32.8%,0.926 38.2%,0.968 43.1%,1 48.3%,1.022 53.7%,1.034 59.6%,1.035 69.8%,1.006 90.7%,1 ); + transition-timing-function: linear( 0,0.329 8.8%,0.59 18%,0.787 27.7%,0.863 32.8%,0.926 38.2%,0.968 43.1%,1 48.3%,1.022 53.7%,1.034 59.6%,1.035 69.8%,1.006 90.7%,1 ); +} + +.c19[data-ease="bounce"] { + -webkit-transition-timing-function: linear(0,0.384 15.4%,0.833 35.8%,1 44.7%,0.919 51.5%,0.9 54.7%,0.894 58%,0.911 63.8%,1 77.4%,0.985 84.4%,1); + transition-timing-function: linear(0,0.384 15.4%,0.833 35.8%,1 44.7%,0.919 51.5%,0.9 54.7%,0.894 58%,0.911 63.8%,1 77.4%,0.985 84.4%,1); +} + +.c20 { + position: absolute; + top: 0; + left: 0; + -webkit-transition-delay: 1040ms; + transition-delay: 1040ms; + -webkit-transition-property: -webkit-transform; + -webkit-transition-property: transform; + transition-property: transform; + -webkit-transition-duration: 2000ms; + transition-duration: 2000ms; +} + +.c20[data-ease="none"] { + -webkit-transition-property: none; + transition-property: none; + -webkit-transition-delay: 0; + transition-delay: 0; +} + +.c20[data-ease="cubic"] { + -webkit-transition-timing-function: cubic-bezier(0.22,1,0.36,1); + transition-timing-function: cubic-bezier(0.22,1,0.36,1); +} + +.c20[data-ease="overshoot"] { + -webkit-transition-timing-function: linear( 0,0.329 8.8%,0.59 18%,0.787 27.7%,0.863 32.8%,0.926 38.2%,0.968 43.1%,1 48.3%,1.022 53.7%,1.034 59.6%,1.035 69.8%,1.006 90.7%,1 ); + transition-timing-function: linear( 0,0.329 8.8%,0.59 18%,0.787 27.7%,0.863 32.8%,0.926 38.2%,0.968 43.1%,1 48.3%,1.022 53.7%,1.034 59.6%,1.035 69.8%,1.006 90.7%,1 ); +} + +.c20[data-ease="bounce"] { + -webkit-transition-timing-function: linear(0,0.384 15.4%,0.833 35.8%,1 44.7%,0.919 51.5%,0.9 54.7%,0.894 58%,0.911 63.8%,1 77.4%,0.985 84.4%,1); + transition-timing-function: linear(0,0.384 15.4%,0.833 35.8%,1 44.7%,0.919 51.5%,0.9 54.7%,0.894 58%,0.911 63.8%,1 77.4%,0.985 84.4%,1); +} + +.c21 { + position: absolute; + top: 0; + left: 0; + -webkit-transition-delay: 1120ms; + transition-delay: 1120ms; + -webkit-transition-property: -webkit-transform; + -webkit-transition-property: transform; + transition-property: transform; + -webkit-transition-duration: 2000ms; + transition-duration: 2000ms; +} + +.c21[data-ease="none"] { + -webkit-transition-property: none; + transition-property: none; + -webkit-transition-delay: 0; + transition-delay: 0; +} + +.c21[data-ease="cubic"] { + -webkit-transition-timing-function: cubic-bezier(0.22,1,0.36,1); + transition-timing-function: cubic-bezier(0.22,1,0.36,1); +} + +.c21[data-ease="overshoot"] { + -webkit-transition-timing-function: linear( 0,0.329 8.8%,0.59 18%,0.787 27.7%,0.863 32.8%,0.926 38.2%,0.968 43.1%,1 48.3%,1.022 53.7%,1.034 59.6%,1.035 69.8%,1.006 90.7%,1 ); + transition-timing-function: linear( 0,0.329 8.8%,0.59 18%,0.787 27.7%,0.863 32.8%,0.926 38.2%,0.968 43.1%,1 48.3%,1.022 53.7%,1.034 59.6%,1.035 69.8%,1.006 90.7%,1 ); +} + +.c21[data-ease="bounce"] { + -webkit-transition-timing-function: linear(0,0.384 15.4%,0.833 35.8%,1 44.7%,0.919 51.5%,0.9 54.7%,0.894 58%,0.911 63.8%,1 77.4%,0.985 84.4%,1); + transition-timing-function: linear(0,0.384 15.4%,0.833 35.8%,1 44.7%,0.919 51.5%,0.9 54.7%,0.894 58%,0.911 63.8%,1 77.4%,0.985 84.4%,1); +} + +.c22 { + position: absolute; + width: 100%; + height: 100%; + left: 0; + top: 0; + z-index: 1; + opacity: 0; + text-transform: uppercase; + font-family: 'Anton',Impact,sans-serif; + font-size: 2rem; + line-height: 1; +} + +.c24 { + font-size: 1rem; +} + +@media (min-width:740px) { + .c23 { + font-size: 1rem; + line-height: 1.25rem; + } +} + +@media (min-width:1024px) { + .c23 { + font-size: 1.125rem; + line-height: 1.375rem; + } +} + +@media (min-width:740px) { + .c0 { + padding-left: 2rem; + padding-right: 2rem; + } +} + +@media (min-width:1024px) { + .c1 { + -webkit-flex-direction: row; + -ms-flex-direction: row; + flex-direction: row; + gap: 2rem; + } +} + +@media (min-width:740px) { + .c2 { + padding: 2rem; + } +} + +@media (min-width:740px) { + .c4 { + font-size: 3rem; + } +} + +@media (min-width:1024px) { + .c4 { + font-size: 3rem; + } +} + +@media (prefers-reduced-motion:reduce) { + .c8 { + -webkit-transition-property: none; + transition-property: none; + -webkit-transition-delay: 0; + transition-delay: 0; + } +} + +@media (prefers-reduced-motion:reduce) { + .c9 { + -webkit-transition-property: none; + transition-property: none; + -webkit-transition-delay: 0; + transition-delay: 0; + } +} + +@media (prefers-reduced-motion:reduce) { + .c10 { + -webkit-transition-property: none; + transition-property: none; + -webkit-transition-delay: 0; + transition-delay: 0; + } +} + +@media (prefers-reduced-motion:reduce) { + .c11 { + -webkit-transition-property: none; + transition-property: none; + -webkit-transition-delay: 0; + transition-delay: 0; + } +} + +@media (prefers-reduced-motion:reduce) { + .c12 { + -webkit-transition-property: none; + transition-property: none; + -webkit-transition-delay: 0; + transition-delay: 0; + } +} + +@media (prefers-reduced-motion:reduce) { + .c13 { + -webkit-transition-property: none; + transition-property: none; + -webkit-transition-delay: 0; + transition-delay: 0; + } +} + +@media (prefers-reduced-motion:reduce) { + .c14 { + -webkit-transition-property: none; + transition-property: none; + -webkit-transition-delay: 0; + transition-delay: 0; + } +} + +@media (prefers-reduced-motion:reduce) { + .c15 { + -webkit-transition-property: none; + transition-property: none; + -webkit-transition-delay: 0; + transition-delay: 0; + } +} + +@media (prefers-reduced-motion:reduce) { + .c16 { + -webkit-transition-property: none; + transition-property: none; + -webkit-transition-delay: 0; + transition-delay: 0; + } +} + +@media (prefers-reduced-motion:reduce) { + .c17 { + -webkit-transition-property: none; + transition-property: none; + -webkit-transition-delay: 0; + transition-delay: 0; + } +} + +@media (prefers-reduced-motion:reduce) { + .c18 { + -webkit-transition-property: none; + transition-property: none; + -webkit-transition-delay: 0; + transition-delay: 0; + } +} + +@media (prefers-reduced-motion:reduce) { + .c19 { + -webkit-transition-property: none; + transition-property: none; + -webkit-transition-delay: 0; + transition-delay: 0; + } +} + +@media (prefers-reduced-motion:reduce) { + .c20 { + -webkit-transition-property: none; + transition-property: none; + -webkit-transition-delay: 0; + transition-delay: 0; + } +} + +@media (prefers-reduced-motion:reduce) { + .c21 { + -webkit-transition-property: none; + transition-property: none; + -webkit-transition-delay: 0; + transition-delay: 0; + } +} + +@media (min-width:740px) { + .c22 { + font-size: 3rem; + } +} + +@media (min-width:1024px) { + .c22 { + font-size: 3rem; + } +} + +@media (min-width:740px) { + .c24 { + font-size: 1.25rem; + } +} + +
+
+
+
+ +
+ 123,456,789.02 +
+
+ + hello + +
+
+
+`; + +exports[`Stats Slices with multiple nodes should render 1`] = ` +.c23 { + font-family: 'Montserrat',Helvetica,Arial,sans-serif; + font-weight: 400; + text-transform: inherit; + -webkit-letter-spacing: 0; + -moz-letter-spacing: 0; + -ms-letter-spacing: 0; + letter-spacing: 0; + font-size: 1rem; + line-height: 1.25rem; +} + +.c23 span { + font-size: inherit; + line-height: inherit; +} + +.c0 { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-box-pack: center; + -webkit-justify-content: center; + -ms-flex-pack: center; + justify-content: center; + padding: 2rem 1rem 2rem; + background: #13767C; +} + +.c1 { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex-direction: column; + -ms-flex-direction: column; + flex-direction: column; + -webkit-flex-wrap: wrap; + -ms-flex-wrap: wrap; + flex-wrap: wrap; + gap: 1rem; + max-width: 1152px; +} + +.c2 { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex-direction: column; + -ms-flex-direction: column; + flex-direction: column; + -webkit-align-items: flex-start; + -webkit-box-align: flex-start; + -ms-flex-align: flex-start; + align-items: flex-start; + gap: 1rem; + background: #ffffff; + padding: 1rem; + -webkit-flex: 1 1 0px; + -ms-flex: 1 1 0px; + flex: 1 1 0px; + min-width: 30%; + border-radius: 1rem; + box-shadow: rgba(0,0,0,0.15) 0px 0px 1rem; +} + +.c3 { + position: relative; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex-direction: column; + -ms-flex-direction: column; + flex-direction: column; + -webkit-align-items: flex-start; + -webkit-box-align: flex-start; + -ms-flex-align: flex-start; + align-items: flex-start; + gap: 0.5rem; + padding-bottom: 0.5rem; +} + +.c4 { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex-wrap: wrap; + -ms-flex-wrap: wrap; + flex-wrap: wrap; + gap: 0.5rem; + text-transform: uppercase; + font-family: 'Anton',Impact,sans-serif; + font-size: 2rem; + line-height: 1; +} + +.c5 { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; +} + +.c6 { + position: relative; + overflow: hidden; + padding-bottom: 0.06rem; +} + +.c7 { + visibility: hidden; + white-space: pre-wrap; +} + +.c8 { + position: absolute; + top: 0; + left: 0; + -webkit-transition-delay: 80ms; + transition-delay: 80ms; + -webkit-transition-property: -webkit-transform; + -webkit-transition-property: transform; + transition-property: transform; + -webkit-transition-duration: 2000ms; + transition-duration: 2000ms; +} + +.c8[data-ease="none"] { + -webkit-transition-property: none; + transition-property: none; + -webkit-transition-delay: 0; + transition-delay: 0; +} + +.c8[data-ease="cubic"] { + -webkit-transition-timing-function: cubic-bezier(0.22,1,0.36,1); + transition-timing-function: cubic-bezier(0.22,1,0.36,1); +} + +.c8[data-ease="overshoot"] { + -webkit-transition-timing-function: linear( 0,0.329 8.8%,0.59 18%,0.787 27.7%,0.863 32.8%,0.926 38.2%,0.968 43.1%,1 48.3%,1.022 53.7%,1.034 59.6%,1.035 69.8%,1.006 90.7%,1 ); + transition-timing-function: linear( 0,0.329 8.8%,0.59 18%,0.787 27.7%,0.863 32.8%,0.926 38.2%,0.968 43.1%,1 48.3%,1.022 53.7%,1.034 59.6%,1.035 69.8%,1.006 90.7%,1 ); +} + +.c8[data-ease="bounce"] { + -webkit-transition-timing-function: linear(0,0.384 15.4%,0.833 35.8%,1 44.7%,0.919 51.5%,0.9 54.7%,0.894 58%,0.911 63.8%,1 77.4%,0.985 84.4%,1); + transition-timing-function: linear(0,0.384 15.4%,0.833 35.8%,1 44.7%,0.919 51.5%,0.9 54.7%,0.894 58%,0.911 63.8%,1 77.4%,0.985 84.4%,1); +} + +.c9 { + position: absolute; + top: 0; + left: 0; + -webkit-transition-delay: 160ms; + transition-delay: 160ms; + -webkit-transition-property: -webkit-transform; + -webkit-transition-property: transform; + transition-property: transform; + -webkit-transition-duration: 2000ms; + transition-duration: 2000ms; +} + +.c9[data-ease="none"] { + -webkit-transition-property: none; + transition-property: none; + -webkit-transition-delay: 0; + transition-delay: 0; +} + +.c9[data-ease="cubic"] { + -webkit-transition-timing-function: cubic-bezier(0.22,1,0.36,1); + transition-timing-function: cubic-bezier(0.22,1,0.36,1); +} + +.c9[data-ease="overshoot"] { + -webkit-transition-timing-function: linear( 0,0.329 8.8%,0.59 18%,0.787 27.7%,0.863 32.8%,0.926 38.2%,0.968 43.1%,1 48.3%,1.022 53.7%,1.034 59.6%,1.035 69.8%,1.006 90.7%,1 ); + transition-timing-function: linear( 0,0.329 8.8%,0.59 18%,0.787 27.7%,0.863 32.8%,0.926 38.2%,0.968 43.1%,1 48.3%,1.022 53.7%,1.034 59.6%,1.035 69.8%,1.006 90.7%,1 ); +} + +.c9[data-ease="bounce"] { + -webkit-transition-timing-function: linear(0,0.384 15.4%,0.833 35.8%,1 44.7%,0.919 51.5%,0.9 54.7%,0.894 58%,0.911 63.8%,1 77.4%,0.985 84.4%,1); + transition-timing-function: linear(0,0.384 15.4%,0.833 35.8%,1 44.7%,0.919 51.5%,0.9 54.7%,0.894 58%,0.911 63.8%,1 77.4%,0.985 84.4%,1); +} + +.c10 { + position: absolute; + top: 0; + left: 0; + -webkit-transition-delay: 240ms; + transition-delay: 240ms; + -webkit-transition-property: -webkit-transform; + -webkit-transition-property: transform; + transition-property: transform; + -webkit-transition-duration: 2000ms; + transition-duration: 2000ms; +} + +.c10[data-ease="none"] { + -webkit-transition-property: none; + transition-property: none; + -webkit-transition-delay: 0; + transition-delay: 0; +} + +.c10[data-ease="cubic"] { + -webkit-transition-timing-function: cubic-bezier(0.22,1,0.36,1); + transition-timing-function: cubic-bezier(0.22,1,0.36,1); +} + +.c10[data-ease="overshoot"] { + -webkit-transition-timing-function: linear( 0,0.329 8.8%,0.59 18%,0.787 27.7%,0.863 32.8%,0.926 38.2%,0.968 43.1%,1 48.3%,1.022 53.7%,1.034 59.6%,1.035 69.8%,1.006 90.7%,1 ); + transition-timing-function: linear( 0,0.329 8.8%,0.59 18%,0.787 27.7%,0.863 32.8%,0.926 38.2%,0.968 43.1%,1 48.3%,1.022 53.7%,1.034 59.6%,1.035 69.8%,1.006 90.7%,1 ); +} + +.c10[data-ease="bounce"] { + -webkit-transition-timing-function: linear(0,0.384 15.4%,0.833 35.8%,1 44.7%,0.919 51.5%,0.9 54.7%,0.894 58%,0.911 63.8%,1 77.4%,0.985 84.4%,1); + transition-timing-function: linear(0,0.384 15.4%,0.833 35.8%,1 44.7%,0.919 51.5%,0.9 54.7%,0.894 58%,0.911 63.8%,1 77.4%,0.985 84.4%,1); +} + +.c11 { + position: absolute; + top: 0; + left: 0; + -webkit-transition-delay: 320ms; + transition-delay: 320ms; + -webkit-transition-property: -webkit-transform; + -webkit-transition-property: transform; + transition-property: transform; + -webkit-transition-duration: 1600ms; + transition-duration: 1600ms; +} + +.c11[data-ease="none"] { + -webkit-transition-property: none; + transition-property: none; + -webkit-transition-delay: 0; + transition-delay: 0; +} + +.c11[data-ease="cubic"] { + -webkit-transition-timing-function: cubic-bezier(0.22,1,0.36,1); + transition-timing-function: cubic-bezier(0.22,1,0.36,1); +} + +.c11[data-ease="overshoot"] { + -webkit-transition-timing-function: linear( 0,0.329 8.8%,0.59 18%,0.787 27.7%,0.863 32.8%,0.926 38.2%,0.968 43.1%,1 48.3%,1.022 53.7%,1.034 59.6%,1.035 69.8%,1.006 90.7%,1 ); + transition-timing-function: linear( 0,0.329 8.8%,0.59 18%,0.787 27.7%,0.863 32.8%,0.926 38.2%,0.968 43.1%,1 48.3%,1.022 53.7%,1.034 59.6%,1.035 69.8%,1.006 90.7%,1 ); +} + +.c11[data-ease="bounce"] { + -webkit-transition-timing-function: linear(0,0.384 15.4%,0.833 35.8%,1 44.7%,0.919 51.5%,0.9 54.7%,0.894 58%,0.911 63.8%,1 77.4%,0.985 84.4%,1); + transition-timing-function: linear(0,0.384 15.4%,0.833 35.8%,1 44.7%,0.919 51.5%,0.9 54.7%,0.894 58%,0.911 63.8%,1 77.4%,0.985 84.4%,1); +} + +.c12 { + position: absolute; + top: 0; + left: 0; + -webkit-transition-delay: 400ms; + transition-delay: 400ms; + -webkit-transition-property: -webkit-transform; + -webkit-transition-property: transform; + transition-property: transform; + -webkit-transition-duration: 2000ms; + transition-duration: 2000ms; +} + +.c12[data-ease="none"] { + -webkit-transition-property: none; + transition-property: none; + -webkit-transition-delay: 0; + transition-delay: 0; +} + +.c12[data-ease="cubic"] { + -webkit-transition-timing-function: cubic-bezier(0.22,1,0.36,1); + transition-timing-function: cubic-bezier(0.22,1,0.36,1); +} + +.c12[data-ease="overshoot"] { + -webkit-transition-timing-function: linear( 0,0.329 8.8%,0.59 18%,0.787 27.7%,0.863 32.8%,0.926 38.2%,0.968 43.1%,1 48.3%,1.022 53.7%,1.034 59.6%,1.035 69.8%,1.006 90.7%,1 ); + transition-timing-function: linear( 0,0.329 8.8%,0.59 18%,0.787 27.7%,0.863 32.8%,0.926 38.2%,0.968 43.1%,1 48.3%,1.022 53.7%,1.034 59.6%,1.035 69.8%,1.006 90.7%,1 ); +} + +.c12[data-ease="bounce"] { + -webkit-transition-timing-function: linear(0,0.384 15.4%,0.833 35.8%,1 44.7%,0.919 51.5%,0.9 54.7%,0.894 58%,0.911 63.8%,1 77.4%,0.985 84.4%,1); + transition-timing-function: linear(0,0.384 15.4%,0.833 35.8%,1 44.7%,0.919 51.5%,0.9 54.7%,0.894 58%,0.911 63.8%,1 77.4%,0.985 84.4%,1); +} + +.c13 { + position: absolute; + top: 0; + left: 0; + -webkit-transition-delay: 480ms; + transition-delay: 480ms; + -webkit-transition-property: -webkit-transform; + -webkit-transition-property: transform; + transition-property: transform; + -webkit-transition-duration: 2000ms; + transition-duration: 2000ms; +} + +.c13[data-ease="none"] { + -webkit-transition-property: none; + transition-property: none; + -webkit-transition-delay: 0; + transition-delay: 0; +} + +.c13[data-ease="cubic"] { + -webkit-transition-timing-function: cubic-bezier(0.22,1,0.36,1); + transition-timing-function: cubic-bezier(0.22,1,0.36,1); +} + +.c13[data-ease="overshoot"] { + -webkit-transition-timing-function: linear( 0,0.329 8.8%,0.59 18%,0.787 27.7%,0.863 32.8%,0.926 38.2%,0.968 43.1%,1 48.3%,1.022 53.7%,1.034 59.6%,1.035 69.8%,1.006 90.7%,1 ); + transition-timing-function: linear( 0,0.329 8.8%,0.59 18%,0.787 27.7%,0.863 32.8%,0.926 38.2%,0.968 43.1%,1 48.3%,1.022 53.7%,1.034 59.6%,1.035 69.8%,1.006 90.7%,1 ); +} + +.c13[data-ease="bounce"] { + -webkit-transition-timing-function: linear(0,0.384 15.4%,0.833 35.8%,1 44.7%,0.919 51.5%,0.9 54.7%,0.894 58%,0.911 63.8%,1 77.4%,0.985 84.4%,1); + transition-timing-function: linear(0,0.384 15.4%,0.833 35.8%,1 44.7%,0.919 51.5%,0.9 54.7%,0.894 58%,0.911 63.8%,1 77.4%,0.985 84.4%,1); +} + +.c14 { + position: absolute; + top: 0; + left: 0; + -webkit-transition-delay: 560ms; + transition-delay: 560ms; + -webkit-transition-property: -webkit-transform; + -webkit-transition-property: transform; + transition-property: transform; + -webkit-transition-duration: 2000ms; + transition-duration: 2000ms; +} + +.c14[data-ease="none"] { + -webkit-transition-property: none; + transition-property: none; + -webkit-transition-delay: 0; + transition-delay: 0; +} + +.c14[data-ease="cubic"] { + -webkit-transition-timing-function: cubic-bezier(0.22,1,0.36,1); + transition-timing-function: cubic-bezier(0.22,1,0.36,1); +} + +.c14[data-ease="overshoot"] { + -webkit-transition-timing-function: linear( 0,0.329 8.8%,0.59 18%,0.787 27.7%,0.863 32.8%,0.926 38.2%,0.968 43.1%,1 48.3%,1.022 53.7%,1.034 59.6%,1.035 69.8%,1.006 90.7%,1 ); + transition-timing-function: linear( 0,0.329 8.8%,0.59 18%,0.787 27.7%,0.863 32.8%,0.926 38.2%,0.968 43.1%,1 48.3%,1.022 53.7%,1.034 59.6%,1.035 69.8%,1.006 90.7%,1 ); +} + +.c14[data-ease="bounce"] { + -webkit-transition-timing-function: linear(0,0.384 15.4%,0.833 35.8%,1 44.7%,0.919 51.5%,0.9 54.7%,0.894 58%,0.911 63.8%,1 77.4%,0.985 84.4%,1); + transition-timing-function: linear(0,0.384 15.4%,0.833 35.8%,1 44.7%,0.919 51.5%,0.9 54.7%,0.894 58%,0.911 63.8%,1 77.4%,0.985 84.4%,1); +} + +.c15 { + position: absolute; + top: 0; + left: 0; + -webkit-transition-delay: 640ms; + transition-delay: 640ms; + -webkit-transition-property: -webkit-transform; + -webkit-transition-property: transform; + transition-property: transform; + -webkit-transition-duration: 1600ms; + transition-duration: 1600ms; +} + +.c15[data-ease="none"] { + -webkit-transition-property: none; + transition-property: none; + -webkit-transition-delay: 0; + transition-delay: 0; +} + +.c15[data-ease="cubic"] { + -webkit-transition-timing-function: cubic-bezier(0.22,1,0.36,1); + transition-timing-function: cubic-bezier(0.22,1,0.36,1); +} + +.c15[data-ease="overshoot"] { + -webkit-transition-timing-function: linear( 0,0.329 8.8%,0.59 18%,0.787 27.7%,0.863 32.8%,0.926 38.2%,0.968 43.1%,1 48.3%,1.022 53.7%,1.034 59.6%,1.035 69.8%,1.006 90.7%,1 ); + transition-timing-function: linear( 0,0.329 8.8%,0.59 18%,0.787 27.7%,0.863 32.8%,0.926 38.2%,0.968 43.1%,1 48.3%,1.022 53.7%,1.034 59.6%,1.035 69.8%,1.006 90.7%,1 ); +} + +.c15[data-ease="bounce"] { + -webkit-transition-timing-function: linear(0,0.384 15.4%,0.833 35.8%,1 44.7%,0.919 51.5%,0.9 54.7%,0.894 58%,0.911 63.8%,1 77.4%,0.985 84.4%,1); + transition-timing-function: linear(0,0.384 15.4%,0.833 35.8%,1 44.7%,0.919 51.5%,0.9 54.7%,0.894 58%,0.911 63.8%,1 77.4%,0.985 84.4%,1); +} + +.c16 { + position: absolute; + top: 0; + left: 0; + -webkit-transition-delay: 720ms; + transition-delay: 720ms; + -webkit-transition-property: -webkit-transform; + -webkit-transition-property: transform; + transition-property: transform; + -webkit-transition-duration: 2000ms; + transition-duration: 2000ms; +} + +.c16[data-ease="none"] { + -webkit-transition-property: none; + transition-property: none; + -webkit-transition-delay: 0; + transition-delay: 0; +} + +.c16[data-ease="cubic"] { + -webkit-transition-timing-function: cubic-bezier(0.22,1,0.36,1); + transition-timing-function: cubic-bezier(0.22,1,0.36,1); +} + +.c16[data-ease="overshoot"] { + -webkit-transition-timing-function: linear( 0,0.329 8.8%,0.59 18%,0.787 27.7%,0.863 32.8%,0.926 38.2%,0.968 43.1%,1 48.3%,1.022 53.7%,1.034 59.6%,1.035 69.8%,1.006 90.7%,1 ); + transition-timing-function: linear( 0,0.329 8.8%,0.59 18%,0.787 27.7%,0.863 32.8%,0.926 38.2%,0.968 43.1%,1 48.3%,1.022 53.7%,1.034 59.6%,1.035 69.8%,1.006 90.7%,1 ); +} + +.c16[data-ease="bounce"] { + -webkit-transition-timing-function: linear(0,0.384 15.4%,0.833 35.8%,1 44.7%,0.919 51.5%,0.9 54.7%,0.894 58%,0.911 63.8%,1 77.4%,0.985 84.4%,1); + transition-timing-function: linear(0,0.384 15.4%,0.833 35.8%,1 44.7%,0.919 51.5%,0.9 54.7%,0.894 58%,0.911 63.8%,1 77.4%,0.985 84.4%,1); +} + +.c17 { + position: absolute; + top: 0; + left: 0; + -webkit-transition-delay: 800ms; + transition-delay: 800ms; + -webkit-transition-property: -webkit-transform; + -webkit-transition-property: transform; + transition-property: transform; + -webkit-transition-duration: 2000ms; + transition-duration: 2000ms; +} + +.c17[data-ease="none"] { + -webkit-transition-property: none; + transition-property: none; + -webkit-transition-delay: 0; + transition-delay: 0; +} + +.c17[data-ease="cubic"] { + -webkit-transition-timing-function: cubic-bezier(0.22,1,0.36,1); + transition-timing-function: cubic-bezier(0.22,1,0.36,1); +} + +.c17[data-ease="overshoot"] { + -webkit-transition-timing-function: linear( 0,0.329 8.8%,0.59 18%,0.787 27.7%,0.863 32.8%,0.926 38.2%,0.968 43.1%,1 48.3%,1.022 53.7%,1.034 59.6%,1.035 69.8%,1.006 90.7%,1 ); + transition-timing-function: linear( 0,0.329 8.8%,0.59 18%,0.787 27.7%,0.863 32.8%,0.926 38.2%,0.968 43.1%,1 48.3%,1.022 53.7%,1.034 59.6%,1.035 69.8%,1.006 90.7%,1 ); +} + +.c17[data-ease="bounce"] { + -webkit-transition-timing-function: linear(0,0.384 15.4%,0.833 35.8%,1 44.7%,0.919 51.5%,0.9 54.7%,0.894 58%,0.911 63.8%,1 77.4%,0.985 84.4%,1); + transition-timing-function: linear(0,0.384 15.4%,0.833 35.8%,1 44.7%,0.919 51.5%,0.9 54.7%,0.894 58%,0.911 63.8%,1 77.4%,0.985 84.4%,1); +} + +.c18 { + position: absolute; + top: 0; + left: 0; + -webkit-transition-delay: 880ms; + transition-delay: 880ms; + -webkit-transition-property: -webkit-transform; + -webkit-transition-property: transform; + transition-property: transform; + -webkit-transition-duration: 2000ms; + transition-duration: 2000ms; +} + +.c18[data-ease="none"] { + -webkit-transition-property: none; + transition-property: none; + -webkit-transition-delay: 0; + transition-delay: 0; +} + +.c18[data-ease="cubic"] { + -webkit-transition-timing-function: cubic-bezier(0.22,1,0.36,1); + transition-timing-function: cubic-bezier(0.22,1,0.36,1); +} + +.c18[data-ease="overshoot"] { + -webkit-transition-timing-function: linear( 0,0.329 8.8%,0.59 18%,0.787 27.7%,0.863 32.8%,0.926 38.2%,0.968 43.1%,1 48.3%,1.022 53.7%,1.034 59.6%,1.035 69.8%,1.006 90.7%,1 ); + transition-timing-function: linear( 0,0.329 8.8%,0.59 18%,0.787 27.7%,0.863 32.8%,0.926 38.2%,0.968 43.1%,1 48.3%,1.022 53.7%,1.034 59.6%,1.035 69.8%,1.006 90.7%,1 ); +} + +.c18[data-ease="bounce"] { + -webkit-transition-timing-function: linear(0,0.384 15.4%,0.833 35.8%,1 44.7%,0.919 51.5%,0.9 54.7%,0.894 58%,0.911 63.8%,1 77.4%,0.985 84.4%,1); + transition-timing-function: linear(0,0.384 15.4%,0.833 35.8%,1 44.7%,0.919 51.5%,0.9 54.7%,0.894 58%,0.911 63.8%,1 77.4%,0.985 84.4%,1); +} + +.c19 { + position: absolute; + top: 0; + left: 0; + -webkit-transition-delay: 960ms; + transition-delay: 960ms; + -webkit-transition-property: -webkit-transform; + -webkit-transition-property: transform; + transition-property: transform; + -webkit-transition-duration: 1600ms; + transition-duration: 1600ms; +} + +.c19[data-ease="none"] { + -webkit-transition-property: none; + transition-property: none; + -webkit-transition-delay: 0; + transition-delay: 0; +} + +.c19[data-ease="cubic"] { + -webkit-transition-timing-function: cubic-bezier(0.22,1,0.36,1); + transition-timing-function: cubic-bezier(0.22,1,0.36,1); +} + +.c19[data-ease="overshoot"] { + -webkit-transition-timing-function: linear( 0,0.329 8.8%,0.59 18%,0.787 27.7%,0.863 32.8%,0.926 38.2%,0.968 43.1%,1 48.3%,1.022 53.7%,1.034 59.6%,1.035 69.8%,1.006 90.7%,1 ); + transition-timing-function: linear( 0,0.329 8.8%,0.59 18%,0.787 27.7%,0.863 32.8%,0.926 38.2%,0.968 43.1%,1 48.3%,1.022 53.7%,1.034 59.6%,1.035 69.8%,1.006 90.7%,1 ); +} + +.c19[data-ease="bounce"] { + -webkit-transition-timing-function: linear(0,0.384 15.4%,0.833 35.8%,1 44.7%,0.919 51.5%,0.9 54.7%,0.894 58%,0.911 63.8%,1 77.4%,0.985 84.4%,1); + transition-timing-function: linear(0,0.384 15.4%,0.833 35.8%,1 44.7%,0.919 51.5%,0.9 54.7%,0.894 58%,0.911 63.8%,1 77.4%,0.985 84.4%,1); +} + +.c20 { + position: absolute; + top: 0; + left: 0; + -webkit-transition-delay: 1040ms; + transition-delay: 1040ms; + -webkit-transition-property: -webkit-transform; + -webkit-transition-property: transform; + transition-property: transform; + -webkit-transition-duration: 2000ms; + transition-duration: 2000ms; +} + +.c20[data-ease="none"] { + -webkit-transition-property: none; + transition-property: none; + -webkit-transition-delay: 0; + transition-delay: 0; +} + +.c20[data-ease="cubic"] { + -webkit-transition-timing-function: cubic-bezier(0.22,1,0.36,1); + transition-timing-function: cubic-bezier(0.22,1,0.36,1); +} + +.c20[data-ease="overshoot"] { + -webkit-transition-timing-function: linear( 0,0.329 8.8%,0.59 18%,0.787 27.7%,0.863 32.8%,0.926 38.2%,0.968 43.1%,1 48.3%,1.022 53.7%,1.034 59.6%,1.035 69.8%,1.006 90.7%,1 ); + transition-timing-function: linear( 0,0.329 8.8%,0.59 18%,0.787 27.7%,0.863 32.8%,0.926 38.2%,0.968 43.1%,1 48.3%,1.022 53.7%,1.034 59.6%,1.035 69.8%,1.006 90.7%,1 ); +} + +.c20[data-ease="bounce"] { + -webkit-transition-timing-function: linear(0,0.384 15.4%,0.833 35.8%,1 44.7%,0.919 51.5%,0.9 54.7%,0.894 58%,0.911 63.8%,1 77.4%,0.985 84.4%,1); + transition-timing-function: linear(0,0.384 15.4%,0.833 35.8%,1 44.7%,0.919 51.5%,0.9 54.7%,0.894 58%,0.911 63.8%,1 77.4%,0.985 84.4%,1); +} + +.c21 { + position: absolute; + top: 0; + left: 0; + -webkit-transition-delay: 1120ms; + transition-delay: 1120ms; + -webkit-transition-property: -webkit-transform; + -webkit-transition-property: transform; + transition-property: transform; + -webkit-transition-duration: 2000ms; + transition-duration: 2000ms; +} + +.c21[data-ease="none"] { + -webkit-transition-property: none; + transition-property: none; + -webkit-transition-delay: 0; + transition-delay: 0; +} + +.c21[data-ease="cubic"] { + -webkit-transition-timing-function: cubic-bezier(0.22,1,0.36,1); + transition-timing-function: cubic-bezier(0.22,1,0.36,1); +} + +.c21[data-ease="overshoot"] { + -webkit-transition-timing-function: linear( 0,0.329 8.8%,0.59 18%,0.787 27.7%,0.863 32.8%,0.926 38.2%,0.968 43.1%,1 48.3%,1.022 53.7%,1.034 59.6%,1.035 69.8%,1.006 90.7%,1 ); + transition-timing-function: linear( 0,0.329 8.8%,0.59 18%,0.787 27.7%,0.863 32.8%,0.926 38.2%,0.968 43.1%,1 48.3%,1.022 53.7%,1.034 59.6%,1.035 69.8%,1.006 90.7%,1 ); +} + +.c21[data-ease="bounce"] { + -webkit-transition-timing-function: linear(0,0.384 15.4%,0.833 35.8%,1 44.7%,0.919 51.5%,0.9 54.7%,0.894 58%,0.911 63.8%,1 77.4%,0.985 84.4%,1); + transition-timing-function: linear(0,0.384 15.4%,0.833 35.8%,1 44.7%,0.919 51.5%,0.9 54.7%,0.894 58%,0.911 63.8%,1 77.4%,0.985 84.4%,1); +} + +.c22 { + position: absolute; + width: 100%; + height: 100%; + left: 0; + top: 0; + z-index: 1; + opacity: 0; + text-transform: uppercase; + font-family: 'Anton',Impact,sans-serif; + font-size: 2rem; + line-height: 1; +} + +.c24 { + font-size: 1rem; +} + +@media (min-width:740px) { + .c23 { + font-size: 1rem; + line-height: 1.25rem; + } +} + +@media (min-width:1024px) { + .c23 { + font-size: 1.125rem; + line-height: 1.375rem; + } +} + +@media (min-width:740px) { + .c0 { + padding-left: 2rem; + padding-right: 2rem; + } +} + +@media (min-width:1024px) { + .c1 { + -webkit-flex-direction: row; + -ms-flex-direction: row; + flex-direction: row; + gap: 2rem; + } +} + +@media (min-width:740px) { + .c2 { + padding: 2rem; + } +} + +@media (min-width:740px) { + .c4 { + font-size: 3rem; + } +} + +@media (min-width:1024px) { + .c4 { + font-size: 3rem; + } +} + +@media (prefers-reduced-motion:reduce) { + .c8 { + -webkit-transition-property: none; + transition-property: none; + -webkit-transition-delay: 0; + transition-delay: 0; + } +} + +@media (prefers-reduced-motion:reduce) { + .c9 { + -webkit-transition-property: none; + transition-property: none; + -webkit-transition-delay: 0; + transition-delay: 0; + } +} + +@media (prefers-reduced-motion:reduce) { + .c10 { + -webkit-transition-property: none; + transition-property: none; + -webkit-transition-delay: 0; + transition-delay: 0; + } +} + +@media (prefers-reduced-motion:reduce) { + .c11 { + -webkit-transition-property: none; + transition-property: none; + -webkit-transition-delay: 0; + transition-delay: 0; + } +} + +@media (prefers-reduced-motion:reduce) { + .c12 { + -webkit-transition-property: none; + transition-property: none; + -webkit-transition-delay: 0; + transition-delay: 0; + } +} + +@media (prefers-reduced-motion:reduce) { + .c13 { + -webkit-transition-property: none; + transition-property: none; + -webkit-transition-delay: 0; + transition-delay: 0; + } +} + +@media (prefers-reduced-motion:reduce) { + .c14 { + -webkit-transition-property: none; + transition-property: none; + -webkit-transition-delay: 0; + transition-delay: 0; + } +} + +@media (prefers-reduced-motion:reduce) { + .c15 { + -webkit-transition-property: none; + transition-property: none; + -webkit-transition-delay: 0; + transition-delay: 0; + } +} + +@media (prefers-reduced-motion:reduce) { + .c16 { + -webkit-transition-property: none; + transition-property: none; + -webkit-transition-delay: 0; + transition-delay: 0; + } +} + +@media (prefers-reduced-motion:reduce) { + .c17 { + -webkit-transition-property: none; + transition-property: none; + -webkit-transition-delay: 0; + transition-delay: 0; + } +} + +@media (prefers-reduced-motion:reduce) { + .c18 { + -webkit-transition-property: none; + transition-property: none; + -webkit-transition-delay: 0; + transition-delay: 0; + } +} + +@media (prefers-reduced-motion:reduce) { + .c19 { + -webkit-transition-property: none; + transition-property: none; + -webkit-transition-delay: 0; + transition-delay: 0; + } +} + +@media (prefers-reduced-motion:reduce) { + .c20 { + -webkit-transition-property: none; + transition-property: none; + -webkit-transition-delay: 0; + transition-delay: 0; + } +} + +@media (prefers-reduced-motion:reduce) { + .c21 { + -webkit-transition-property: none; + transition-property: none; + -webkit-transition-delay: 0; + transition-delay: 0; + } +} + +@media (min-width:740px) { + .c22 { + font-size: 3rem; + } +} + +@media (min-width:1024px) { + .c22 { + font-size: 3rem; + } +} + +@media (min-width:740px) { + .c24 { + font-size: 1.25rem; + } +} + +
+
+
+
+ +
+ 123,456,789.02 +
+
+ + Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam. + +
+
+
+ +
+ 456,789,123.02 +
+
+ + Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam. + +
+
+
+ +
+ 789,123,456.02 +
+
+ + Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam. + +
+
+
+`; diff --git a/src/components/Molecules/StatsSlice/_test-utils.js b/src/components/Molecules/StatsSlice/_test-utils.js new file mode 100644 index 000000000..1f8df50f3 --- /dev/null +++ b/src/components/Molecules/StatsSlice/_test-utils.js @@ -0,0 +1,6 @@ +const intersectionObserverMock = () => ({ + observe: () => null +}); +window.IntersectionObserver = jest + .fn() + .mockImplementation(intersectionObserverMock); diff --git a/src/components/Molecules/StatsSlice/_utils.js b/src/components/Molecules/StatsSlice/_utils.js new file mode 100644 index 000000000..442a3ac19 --- /dev/null +++ b/src/components/Molecules/StatsSlice/_utils.js @@ -0,0 +1,26 @@ +/** + * check whether a string character is a number or a string + * @param {string} character + * @returns {'string' | 'number'} + */ +function getValueType(character) { + return Number.isNaN(parseInt(character, 10)) ? 'string' : 'number'; +} + +/** + * split a string into a list of words objects, + * each containing a list of character objects with their string character and string/number type + */ +export default function splitStatString(stat) { + return stat + // split at spaces to get words + .split(' ') + // split words into characters + .map(word => word.split('').map(character => { + const type = getValueType(character); + return { + character, + type + }; + })); +} diff --git a/src/index.js b/src/index.js index 93f947092..c75c3398f 100644 --- a/src/index.js +++ b/src/index.js @@ -71,6 +71,7 @@ export { default as LogoLinked } from './components/Molecules/LogoLinked/LogoLin export { default as HeroBanner } from './components/Molecules/HeroBanner/HeroBanner'; export { default as PictureOrVideo } from './components/Molecules/PictureOrVideo/PictureOrVideo'; export { default as QuoteSlice } from './components/Molecules/QuoteSlice/QuoteSlice'; +export { default as StatsSlice } from './components/Molecules/StatsSlice/StatsSlice'; /* Organisms */ export {