diff --git a/pages/_document.tsx b/pages/_document.tsx index a87e7cbe..481f40ba 100644 --- a/pages/_document.tsx +++ b/pages/_document.tsx @@ -42,6 +42,8 @@ export default class MyDocument extends Document { + +
diff --git a/public/.DS_Store b/public/.DS_Store new file mode 100644 index 00000000..c9a4bbe0 Binary files /dev/null and b/public/.DS_Store differ diff --git a/public/fonts/GT-Alpina-Standard-Bold-Italic.woff b/public/fonts/GT-Alpina-Standard-Bold-Italic.woff new file mode 100755 index 00000000..0f89d06f Binary files /dev/null and b/public/fonts/GT-Alpina-Standard-Bold-Italic.woff differ diff --git a/public/fonts/GT-Alpina-Standard-Bold.woff b/public/fonts/GT-Alpina-Standard-Bold.woff new file mode 100755 index 00000000..b0fa2337 Binary files /dev/null and b/public/fonts/GT-Alpina-Standard-Bold.woff differ diff --git a/public/fonts/GT-Alpina-Standard-Light-Italic.woff b/public/fonts/GT-Alpina-Standard-Light-Italic.woff new file mode 100755 index 00000000..78ac189f Binary files /dev/null and b/public/fonts/GT-Alpina-Standard-Light-Italic.woff differ diff --git a/public/fonts/GT-Alpina-Standard-Light.woff b/public/fonts/GT-Alpina-Standard-Light.woff new file mode 100755 index 00000000..79bcdb38 Binary files /dev/null and b/public/fonts/GT-Alpina-Standard-Light.woff differ diff --git a/public/fonts/GT-Alpina-Standard-Medium-Italic.woff b/public/fonts/GT-Alpina-Standard-Medium-Italic.woff new file mode 100755 index 00000000..53ef31f5 Binary files /dev/null and b/public/fonts/GT-Alpina-Standard-Medium-Italic.woff differ diff --git a/public/fonts/GT-Alpina-Standard-Medium.woff b/public/fonts/GT-Alpina-Standard-Medium.woff new file mode 100755 index 00000000..5fce7caf Binary files /dev/null and b/public/fonts/GT-Alpina-Standard-Medium.woff differ diff --git a/public/fonts/GT-Alpina-Standard-Regular-Italic.woff b/public/fonts/GT-Alpina-Standard-Regular-Italic.woff new file mode 100755 index 00000000..5ab81027 Binary files /dev/null and b/public/fonts/GT-Alpina-Standard-Regular-Italic.woff differ diff --git a/public/fonts/GT-Alpina-Standard-Regular.woff b/public/fonts/GT-Alpina-Standard-Regular.woff new file mode 100755 index 00000000..6704e74e Binary files /dev/null and b/public/fonts/GT-Alpina-Standard-Regular.woff differ diff --git a/public/fonts/GT-Alpina-Standard-Thin-Italic.woff b/public/fonts/GT-Alpina-Standard-Thin-Italic.woff new file mode 100755 index 00000000..00e78a6e Binary files /dev/null and b/public/fonts/GT-Alpina-Standard-Thin-Italic.woff differ diff --git a/public/fonts/GT-Alpina-Standard-Thin.woff b/public/fonts/GT-Alpina-Standard-Thin.woff new file mode 100755 index 00000000..79d98ecb Binary files /dev/null and b/public/fonts/GT-Alpina-Standard-Thin.woff differ diff --git a/public/fonts/GTAlpinaFont.css b/public/fonts/GTAlpinaFont.css new file mode 100644 index 00000000..8529235f --- /dev/null +++ b/public/fonts/GTAlpinaFont.css @@ -0,0 +1,83 @@ +/* GT ALPINA * */ + +@font-face { + font-family: "GT-Alpina"; + src: url("/fonts/GT-Alpina-Standard-Thin.woff") format("woff"); + font-weight: 200; + font-style: normal; + font-display: swap; +} + +@font-face { + font-family: "GT-Alpina"; + src: url("/fonts/GT-Alpina-Standard-Thin-Italic.woff") format("woff"); + font-weight: 200; + font-style: italic; + font-display: swap; +} + +@font-face { + font-family: "GT-Alpina"; + src: url("/fonts/GT-Alpina-Standard-Light.woff") format("woff"); + font-weight: 250; + font-style: normal; + font-display: swap; +} + +@font-face { + font-family: "GT-Alpina"; + src: url("/fonts/GT-Alpina-Standard-Light-Italic.woff") format("woff"); + font-weight: 250; + font-style: italic; + font-display: swap; +} + +@font-face { + font-family: "GT-Alpina"; + src: url("/fonts/GT-Alpina-Standard-Regular.woff") format("woff"); + font-weight: 400; + font-style: normal; + font-display: swap; +} + +@font-face { + font-family: "GT-Alpina"; + src: url("/fonts/GT-Alpina-Standard-Regular-Italic.woff") format("woff"); + font-weight: 400; + font-style: italic; + font-display: swap; +} + +@font-face { + font-family: "GT-Alpina"; + src: url("/fonts/GT-Alpina-Standard-Medium.woff") format("woff"); + font-weight: 500; + font-style: normal; + font-display: swap; +} + +@font-face { + font-family: "GT-Alpina"; + src: url("/fonts/GT-Alpina-Standard-Medium-Italic.woff") format("woff"); + font-weight: 500; + font-style: italic; + font-display: swap; +} + + +@font-face { + font-family: "GT-Alpina"; + src: url("/fonts/GT-Alpina-Standard-Bold.woff") format("woff"); + font-weight: 700; + font-style: normal; + font-display: swap; +} + +@font-face { + font-family: "GT-Alpina"; + src: url("/fonts/GT-Alpina-Standard-Bold-Italic.woff") format("woff"); + font-weight: 700; + font-style: italic; + font-display: swap; +} + diff --git a/public/fonts/Inter-Black.ttf b/public/fonts/Inter-Black.ttf new file mode 100644 index 00000000..5aecf7dc Binary files /dev/null and b/public/fonts/Inter-Black.ttf differ diff --git a/public/fonts/Inter-Bold.ttf b/public/fonts/Inter-Bold.ttf new file mode 100644 index 00000000..8e82c70d Binary files /dev/null and b/public/fonts/Inter-Bold.ttf differ diff --git a/public/fonts/Inter-ExtraBold.ttf b/public/fonts/Inter-ExtraBold.ttf new file mode 100644 index 00000000..cb4b8217 Binary files /dev/null and b/public/fonts/Inter-ExtraBold.ttf differ diff --git a/public/fonts/Inter-ExtraLight.ttf b/public/fonts/Inter-ExtraLight.ttf new file mode 100644 index 00000000..64aee30a Binary files /dev/null and b/public/fonts/Inter-ExtraLight.ttf differ diff --git a/public/fonts/Inter-Light.ttf b/public/fonts/Inter-Light.ttf new file mode 100644 index 00000000..9e265d89 Binary files /dev/null and b/public/fonts/Inter-Light.ttf differ diff --git a/public/fonts/Inter-Medium.ttf b/public/fonts/Inter-Medium.ttf new file mode 100644 index 00000000..b53fb1c4 Binary files /dev/null and b/public/fonts/Inter-Medium.ttf differ diff --git a/public/fonts/Inter-Regular.ttf b/public/fonts/Inter-Regular.ttf new file mode 100644 index 00000000..8d4eebf2 Binary files /dev/null and b/public/fonts/Inter-Regular.ttf differ diff --git a/public/fonts/Inter-SemiBold.ttf b/public/fonts/Inter-SemiBold.ttf new file mode 100644 index 00000000..c6aeeb16 Binary files /dev/null and b/public/fonts/Inter-SemiBold.ttf differ diff --git a/public/fonts/Inter-Thin.ttf b/public/fonts/Inter-Thin.ttf new file mode 100644 index 00000000..7aed55d5 Binary files /dev/null and b/public/fonts/Inter-Thin.ttf differ diff --git a/public/fonts/InterFont.css b/public/fonts/InterFont.css new file mode 100644 index 00000000..c9f9fd9e --- /dev/null +++ b/public/fonts/InterFont.css @@ -0,0 +1,73 @@ +/* INTER * */ +@font-face { + font-family: "Inter"; + src: url("/fonts/Inter-Thin.ttf") format("truetype"); + font-weight: 100; + font-style: normal; + font-display: swap; + } + + @font-face { + font-family: "Inter"; + src: url("/fonts/Inter-ExtraLight.ttf") format("truetype"); + font-weight: 200; + font-style: normal; + font-display: swap; + } + + @font-face { + font-family: "Inter"; + src: url("/fonts/Inter-Light.ttf") format("truetype"); + font-weight: 300; + font-style: normal; + font-display: swap; + } + + @font-face { + font-family: "Inter"; + src: url("/fonts/Inter-Regular.ttf") format("truetype"); + font-weight: 400; + font-style: normal; + font-display: swap; + } + + @font-face { + font-family: "Inter"; + src: url("/fonts/Inter-Medium.ttf") format("truetype"); + font-weight: 500; + font-style: normal; + font-display: swap; + } + +@font-face { + font-family: "Inter"; + src: url("/fonts/Inter-SemiBold.ttf") format("truetype"); + font-weight: 600; + font-style: italic; + font-display: swap; + } + + @font-face { + font-family: "Inter"; + src: url("/fonts/Inter-Bold.ttf") format("truetype"); + font-weight: 700; + font-style: normal; + font-display: swap; + } + + @font-face { + font-family: "Inter"; + src: url("/fonts/Inter-ExtraBold.ttf") format("truetype"); + font-weight: 800; + font-style: normal; + font-display: swap; + } + + @font-face { + font-family: "Inter"; + src: url("/fonts/Inter-Black.ttf") format("truetype"); + font-weight: 900; + font-style: normal; + font-display: swap; + } + diff --git a/public/images/.DS_Store b/public/images/.DS_Store new file mode 100644 index 00000000..971c8983 Binary files /dev/null and b/public/images/.DS_Store differ diff --git a/public/locales/en/common.json b/public/locales/en/common.json index fb871efe..f91efb07 100644 --- a/public/locales/en/common.json +++ b/public/locales/en/common.json @@ -21,12 +21,15 @@ "footerReadMoreTerms": "Read more in Celo <0>Terms of Service", "footer": { "emailIconAlt": "Envelop with Green Coin Sliding in", - "technology": "Technology", + "technology": "Tech", "resources": "Resources", + "company": "Company", + "kits": "Kits", "social": "Social", - "copyright": "The Celo Foundation, © Celo {{year}}", + "copyright": "© {{year}} Celo Inc.", "Home": "Home", "About": "About", + "Founders": "Founders", "Join": "Careers", "Validators": "Validators", "Developers": "Developers", @@ -78,5 +81,6 @@ "shortSuccess": "Submitted", "applicationSubmitted": "Application Submitted", "showAll": "Show All", - "collapse": "Collapse" + "collapse": "Collapse", + "footerEmailText": "World-changing ideas in your inbox" } diff --git a/src/_page-tests/__snapshots__/_error.test.tsx.snap b/src/_page-tests/__snapshots__/_error.test.tsx.snap index 8053dbee..3da24ba4 100644 --- a/src/_page-tests/__snapshots__/_error.test.tsx.snap +++ b/src/_page-tests/__snapshots__/_error.test.tsx.snap @@ -36,12 +36,12 @@ exports[`Error renders 1`] = ` } .emotion-2 { - font-family: EB Garamond,eb-garamond,Garamond,serif; + font-family: GT-Alpina,serif; font-size: 48px; line-height: 56; text-rendering: geometricPrecision; color: #111214; - font-weight: normal; + font-weight: 200; margin: 0; margin-block-start: 0; margin-block-end: 0; @@ -55,11 +55,11 @@ exports[`Error renders 1`] = ` } .emotion-3 { - font-weight: normal; + font-weight: 200; margin: 0; margin-block-start: 0; margin-block-end: 0; - font-family: EB Garamond,eb-garamond,Garamond,serif; + font-family: Inter,sans-serif; font-size: 28px; line-height: 36; text-rendering: geometricPrecision; @@ -70,6 +70,14 @@ exports[`Error renders 1`] = ` } .emotion-4 { + box-sizing: border-box; + 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: center; -webkit-box-align: center; -ms-flex-align: center; @@ -111,27 +119,29 @@ exports[`Error renders 1`] = ` min-width: 200px; padding: 20px 30px; font-size: 20px; - background-color: #35D07F; - border-color: #35D07F; - border-radius: 3px; + background-color: #FCFF52; + border: solid; + border-color: rgba(0, 0, 0, 0.2); + border-radius: 70px; border-width: 1px; + padding: 24px 64px; font-weight: 500; - color: #FFFFFF; + color: #000; } -.emotion-5:hover { - background-color: #4CDD91; - border-color: #4CDD91; - border-radius: 3px; +.emotion-5:hover, +.emotion-5:active { + background-color: #000; + border-color: rgba(0, 0, 0, 0.2); + border-radius: 70px; border-width: 1px; + color: #FFFFFF; } -.emotion-5:active { - background-color: #0FB972; - border-color: #0FB972; - outline-color: #0FB972; - border-radius: 3px; - border-width: 1px; +@media (max-width: 576px) { + .emotion-5 { + padding: 16px 24px; + } }
diff --git a/src/_page-tests/__snapshots__/about.test.tsx.snap b/src/_page-tests/__snapshots__/about.test.tsx.snap index 5a9cdeea..f6b0f665 100644 --- a/src/_page-tests/__snapshots__/about.test.tsx.snap +++ b/src/_page-tests/__snapshots__/about.test.tsx.snap @@ -29,6 +29,7 @@ exports[`About renders 1`] = ` -ms-flex-item-align: center; align-self: center; width: 100%; + background-color: #FBF6F1; } .emotion-14 { @@ -133,7 +134,7 @@ exports[`About renders 1`] = ` } .emotion-31 { - font-family: EB Garamond,eb-garamond,Garamond,serif; + font-family: Inter,sans-serif; font-size: 20px; line-height: 28; text-rendering: geometricPrecision; @@ -148,7 +149,7 @@ exports[`About renders 1`] = ` } .emotion-50 { - font-family: EB Garamond,eb-garamond,Garamond,serif; + font-family: Inter,sans-serif; font-size: 20px; line-height: 28; text-rendering: geometricPrecision; @@ -162,12 +163,12 @@ exports[`About renders 1`] = ` } .emotion-69 { - font-family: EB Garamond,eb-garamond,Garamond,serif; + font-family: GT-Alpina,serif; font-size: 48px; line-height: 56; text-rendering: geometricPrecision; color: #111214; - font-weight: normal; + font-weight: 200; margin: 0; margin-block-start: 0; margin-block-end: 0; @@ -189,12 +190,12 @@ exports[`About renders 1`] = ` } .emotion-70 { - font-family: EB Garamond,eb-garamond,Garamond,serif; + font-family: GT-Alpina,serif; font-size: 48px; line-height: 56; text-rendering: geometricPrecision; color: #111214; - font-weight: normal; + font-weight: 200; margin: 0; margin-block-start: 0; margin-block-end: 0; @@ -207,12 +208,12 @@ exports[`About renders 1`] = ` @media (max-width: 576px) { .emotion-70 { - font-family: EB Garamond,eb-garamond,Garamond,serif; + font-family: GT-Alpina,serif; font-size: 36px; line-height: 40; text-rendering: geometricPrecision; color: #111214; - font-weight: normal; + font-weight: 200; margin: 0; margin-block-start: 0; margin-block-end: 0; @@ -221,7 +222,7 @@ exports[`About renders 1`] = ` } .emotion-76 { - font-family: EB Garamond,eb-garamond,Garamond,serif; + font-family: Inter,sans-serif; font-size: 20px; line-height: 28; text-rendering: geometricPrecision; @@ -236,6 +237,14 @@ exports[`About renders 1`] = ` } .emotion-77 { + box-sizing: border-box; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex-direction: column; + -ms-flex-direction: column; + flex-direction: column; display: inline; } @@ -256,6 +265,17 @@ exports[`About renders 1`] = ` opacity: 1; } +.emotion-79 { + box-sizing: border-box; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex-direction: column; + -ms-flex-direction: column; + flex-direction: column; +} + .emotion-80 { -webkit-box-pack: center; -ms-flex-pack: center; @@ -290,31 +310,33 @@ exports[`About renders 1`] = ` text-decoration: none; min-width: 150px; padding: 10px 20px; - background-color: #35D07F; - border-color: #35D07F; - border-radius: 3px; + background-color: #FCFF52; + border: solid; + border-color: rgba(0, 0, 0, 0.2); + border-radius: 70px; border-width: 1px; + padding: 24px 64px; font-weight: 500; - color: #FFFFFF; + color: #000; } -.emotion-80:hover { - background-color: #4CDD91; - border-color: #4CDD91; - border-radius: 3px; +.emotion-80:hover, +.emotion-80:active { + background-color: #000; + border-color: rgba(0, 0, 0, 0.2); + border-radius: 70px; border-width: 1px; + color: #FFFFFF; } -.emotion-80:active { - background-color: #0FB972; - border-color: #0FB972; - outline-color: #0FB972; - border-radius: 3px; - border-width: 1px; +@media (max-width: 576px) { + .emotion-80 { + padding: 16px 24px; + } } .emotion-86 { - font-family: EB Garamond,eb-garamond,Garamond,serif; + font-family: Inter,sans-serif; font-size: 20px; line-height: 28; text-rendering: geometricPrecision; @@ -324,7 +346,7 @@ exports[`About renders 1`] = ` } .emotion-119 { - font-family: EB Garamond,eb-garamond,Garamond,serif; + font-family: Inter,sans-serif; font-size: 20px; line-height: 28; text-rendering: geometricPrecision; @@ -442,11 +464,11 @@ exports[`About renders 1`] = ` } .emotion-125 { - font-weight: normal; + font-weight: 200; margin: 0; margin-block-start: 0; margin-block-end: 0; - font-family: EB Garamond,eb-garamond,Garamond,serif; + font-family: Inter,sans-serif; font-size: 28px; line-height: 36; text-rendering: geometricPrecision; @@ -460,7 +482,7 @@ exports[`About renders 1`] = ` } .emotion-158 { - font-family: EB Garamond,eb-garamond,Garamond,serif; + font-family: Inter,sans-serif; font-size: 20px; line-height: 28; text-rendering: geometricPrecision; @@ -469,7 +491,7 @@ exports[`About renders 1`] = ` } .emotion-158 a { - font-family: EB Garamond,eb-garamond,Garamond,serif; + font-family: Inter,sans-serif; font-size: 20px; line-height: 28; text-rendering: geometricPrecision; @@ -645,7 +667,7 @@ exports[`About renders 1`] = ` style={ Object { "color": "rgba(255,255,255,1.00)", - "fontFamily": "EB Garamond, eb-garamond, Garamond, serif", + "fontFamily": "GT-Alpina, serif", "fontSize": "64px", "lineHeight": "72px", "marginBottom": "20px", @@ -700,7 +722,7 @@ exports[`About renders 1`] = ` style={ Object { "color": "rgba(255,255,255,1.00)", - "fontFamily": "Jost, futura-pt, futura, sans-serif", + "fontFamily": "GT-Alpina, serif", "fontSize": "24px", "lineHeight": "32px", "marginLeft": "10px", @@ -799,7 +821,7 @@ exports[`About renders 1`] = ` style={ Object { "color": "rgba(17,18,20,1.00)", - "fontFamily": "Jost, futura-pt, futura, sans-serif", + "fontFamily": "GT-Alpina, serif", "fontSize": "24px", "lineHeight": "32px", "textRendering": "geometricPrecision", @@ -837,7 +859,7 @@ exports[`About renders 1`] = ` style={ Object { "color": "rgba(17,18,20,1.00)", - "fontFamily": "EB Garamond, eb-garamond, Garamond, serif", + "fontFamily": "GT-Alpina, serif", "fontSize": "36px", "lineHeight": "40px", "textRendering": "geometricPrecision", @@ -897,7 +919,7 @@ exports[`About renders 1`] = ` style={ Object { "color": "rgba(17,18,20,1.00)", - "fontFamily": "Jost, futura-pt, futura, sans-serif", + "fontFamily": "GT-Alpina, serif", "fontSize": "24px", "lineHeight": "32px", "textRendering": "geometricPrecision", @@ -939,7 +961,7 @@ exports[`About renders 1`] = ` style={ Object { "color": "rgba(17,18,20,1.00)", - "fontFamily": "EB Garamond, eb-garamond, Garamond, serif", + "fontFamily": "GT-Alpina, serif", "fontSize": "28px", "lineHeight": "32px", "name": "uewl2b", @@ -1007,7 +1029,7 @@ exports[`About renders 1`] = ` style={ Object { "color": "rgba(17,18,20,1.00)", - "fontFamily": "Jost, futura-pt, futura, sans-serif", + "fontFamily": "GT-Alpina, serif", "fontSize": "24px", "lineHeight": "32px", "textRendering": "geometricPrecision", @@ -1045,7 +1067,7 @@ exports[`About renders 1`] = ` style={ Object { "color": "rgba(17,18,20,1.00)", - "fontFamily": "EB Garamond, eb-garamond, Garamond, serif", + "fontFamily": "GT-Alpina, serif", "fontSize": "36px", "lineHeight": "40px", "name": "uewl2b", @@ -1229,7 +1251,7 @@ More importantly, we are driven by purpose – to solve real-world problems such style={ Object { "color": "rgba(17,18,20,1.00)", - "fontFamily": "Jost, futura-pt, futura, sans-serif", + "fontFamily": "GT-Alpina, serif", "fontSize": "24px", "lineHeight": "32px", "textRendering": "geometricPrecision", @@ -1420,7 +1442,7 @@ More importantly, we are driven by purpose – to solve real-world problems such style={ Object { "color": "rgba(17,18,20,1.00)", - "fontFamily": "EB Garamond, eb-garamond, Garamond, serif", + "fontFamily": "Inter, sans-serif", "fontSize": "24px", "lineHeight": "32px", "textRendering": "geometricPrecision", @@ -1436,7 +1458,7 @@ More importantly, we are driven by purpose – to solve real-world problems such style={ Object { "color": "rgba(17,18,20,1.00)", - "fontFamily": "EB Garamond, eb-garamond, Garamond, serif", + "fontFamily": "Inter, sans-serif", "fontSize": "20px", "lineHeight": "28px", "marginBottom": "20px", @@ -1986,7 +2008,7 @@ More importantly, we are driven by purpose – to solve real-world problems such style={ Object { "color": "rgba(17,18,20,1.00)", - "fontFamily": "EB Garamond, eb-garamond, Garamond, serif", + "fontFamily": "Inter, sans-serif", "fontSize": "24px", "lineHeight": "32px", "textRendering": "geometricPrecision", @@ -2002,7 +2024,7 @@ More importantly, we are driven by purpose – to solve real-world problems such style={ Object { "color": "rgba(17,18,20,1.00)", - "fontFamily": "EB Garamond, eb-garamond, Garamond, serif", + "fontFamily": "Inter, sans-serif", "fontSize": "20px", "lineHeight": "28px", "marginBottom": "20px", @@ -2145,7 +2167,7 @@ Change the story. style={ Object { "color": "rgba(17,18,20,1.00)", - "fontFamily": "Jost, futura-pt, futura, sans-serif", + "fontFamily": "GT-Alpina, serif", "fontSize": "24px", "lineHeight": "32px", "textRendering": "geometricPrecision", @@ -2255,7 +2277,7 @@ Change the story. style={ Object { "color": "rgba(17,18,20,1.00)", - "fontFamily": "Jost, futura-pt, futura, sans-serif", + "fontFamily": "GT-Alpina, serif", "fontSize": "24px", "lineHeight": "32px", "textRendering": "geometricPrecision", @@ -2356,7 +2378,7 @@ Change the story. style={ Object { "color": "rgba(17,18,20,1.00)", - "fontFamily": "Jost, futura-pt, futura, sans-serif", + "fontFamily": "GT-Alpina, serif", "fontSize": "24px", "lineHeight": "32px", "textRendering": "geometricPrecision", @@ -2392,7 +2414,7 @@ Change the story. style={ Object { "color": "rgba(17,18,20,1.00)", - "fontFamily": "EB Garamond, eb-garamond, Garamond, serif", + "fontFamily": "Inter, sans-serif", "fontSize": "20px", "lineHeight": "28px", "marginBottom": "50px", @@ -2677,7 +2699,7 @@ Change the story. style={ Object { "color": "rgba(17,18,20,1.00)", - "fontFamily": "EB Garamond, eb-garamond, Garamond, serif", + "fontFamily": "Inter, sans-serif", "fontSize": "20px", "fontWeight": "bold", "lineHeight": "28px", @@ -2745,7 +2767,7 @@ Change the story. style={ Object { "color": "rgba(17,18,20,1.00)", - "fontFamily": "EB Garamond, eb-garamond, Garamond, serif", + "fontFamily": "Inter, sans-serif", "fontSize": "26px", "fontStyle": "italic", "lineHeight": "28px", @@ -2810,7 +2832,7 @@ Change the story. style={ Object { "color": "rgba(17,18,20,1.00)", - "fontFamily": "Jost, futura-pt, futura, sans-serif", + "fontFamily": "GT-Alpina, serif", "fontSize": "24px", "lineHeight": "32px", "textRendering": "geometricPrecision", @@ -3044,7 +3066,7 @@ Change the story. style={ Object { "color": "rgba(17,18,20,1.00)", - "fontFamily": "Jost, futura-pt, futura, sans-serif", + "fontFamily": "GT-Alpina, serif", "fontSize": "24px", "lineHeight": "32px", "textRendering": "geometricPrecision", diff --git a/src/_page-tests/__snapshots__/alliance.test.tsx.snap b/src/_page-tests/__snapshots__/alliance.test.tsx.snap index 75b6982b..7ea29545 100644 --- a/src/_page-tests/__snapshots__/alliance.test.tsx.snap +++ b/src/_page-tests/__snapshots__/alliance.test.tsx.snap @@ -1,8 +1,20 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`Alliance renders 1`] = ` -.emotion-15 input, -.emotion-15 textarea { +.emotion-15 { + width: 100%; + display: inline-block; +} + +.emotion-15 img { + display: none; +} + +.emotion-15 .grecaptcha-badge { + display: none; +} + +.emotion-15 #email-b4dd2ae2-68e9-4662-bfd3-b2860162a5aa { box-sizing: border-box; display: -webkit-box; display: -webkit-flex; @@ -11,7 +23,7 @@ exports[`Alliance renders 1`] = ` -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; - font-family: EB Garamond,eb-garamond,Garamond,serif; + font-family: Inter,sans-serif; font-size: 20px; line-height: 28; text-rendering: geometricPrecision; @@ -20,33 +32,81 @@ exports[`Alliance renders 1`] = ` -webkit-align-self: center; -ms-flex-item-align: center; align-self: center; - padding-left: 12px; - padding-right: 12px; - padding-top: 12px; - padding-bottom: 16px; - border-radius: 3px; + padding: 24px; + border-radius: 70px; border-width: 1px; border-style: solid; - border-color: rgba(61, 61, 61, 0.2); width: 100%; margin: 4px; - margin-bottom: 8px; outline-width: 0; + background-color: transparent; } -.emotion-15 input:focus, -.emotion-15 textarea:focus { - border-color: #35D07F; +.emotion-15 #email-b4dd2ae2-68e9-4662-bfd3-b2860162a5aa:focus { + border-color: #000; } -.emotion-15 input[type='checkbox'] { - -webkit-flex-basis: 0; - -ms-flex-preferred-size: 0; - flex-basis: 0; +.emotion-15 #hsForm_b4dd2ae2-68e9-4662-bfd3-b2860162a5aa input[type=submit] { + display: none; } -.emotion-15 label { - font-family: Jost,futura-pt,futura,sans-serif; +.emotion-15 .celo-hbspt { + width: 100%; +} + +.emotion-15 .celo-hbspt * { + box-sizing: border-box; +} + +.emotion-15 .celo-hbspt fieldset { + border: 0; + padding: 0; + margin: 0; + max-width: 100%; +} + +@media (min-width: 576px) and (max-width: 992px) { + .emotion-15 .celo-hbspt fieldset { + margin-right: 0!important; + width: 100%!important; + } +} + +@media (max-width: 576px) { + .emotion-15 .celo-hbspt fieldset { + float: none; + width: 100%; + } +} + +.emotion-15 .celo-hbspt fieldset.form-columns-2 .hs-form-field { + width: 50%; + float: left; +} + +@media (min-width: 576px) and (max-width: 992px) { + .emotion-15 .celo-hbspt fieldset.form-columns-2 .hs-form-field { + float: none; + width: 100%; + } +} + +@media (max-width: 576px) { + .emotion-15 .celo-hbspt fieldset.form-columns-2 .hs-form-field { + float: none; + width: 100%; + } +} + +.emotion-15 .celo-hbspt .field { + margin-bottom: 32px; +} + +.emotion-15 .celo-hbspt .input { + margin-right: 26px; +} + +.emotion-15 .celo-hbspt .hs-input { box-sizing: border-box; display: -webkit-box; display: -webkit-flex; @@ -55,15 +115,74 @@ exports[`Alliance renders 1`] = ` -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; - color: #81868B; - font-weight: 500; - font-size: 16px; - line-height: 18px; - margin-top: 12px; - margin-bottom: 8px; - -webkit-flex-direction: row; - -ms-flex-direction: row; - flex-direction: row; + font-family: Inter,sans-serif; + font-size: 20px; + line-height: 28; + text-rendering: geometricPrecision; + color: #111214; + line-height: 28px; + -webkit-align-self: center; + -ms-flex-item-align: center; + align-self: center; + padding: 24px; + border-radius: 70px; + border-width: 1px; + border-style: solid; + width: 100%; + margin: 4px; + outline-width: 0; + background-color: transparent; + border-color: rgba(0, 0, 0, 0.2); +} + +.emotion-15 .celo-hbspt .hs-input:focus { + border-color: #000; +} + +.emotion-15 .hs-custom-style fieldset textarea { + box-sizing: border-box; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex-direction: column; + -ms-flex-direction: column; + flex-direction: column; + font-family: Inter,sans-serif; + font-size: 20px; + line-height: 28; + text-rendering: geometricPrecision; + color: #111214; + line-height: 28px; + -webkit-align-self: center; + -ms-flex-item-align: center; + align-self: center; + padding: 24px; + border-radius: 70px; + border-width: 1px; + border-style: solid; + width: 100%; + margin: 4px; + outline-width: 0; + background-color: transparent; +} + +.emotion-15 .hs-custom-style fieldset textarea:focus { + border-color: #000; +} + +.emotion-15 .celo-hbspt .contact-error { + border-color: #E70532; +} + +.emotion-15 .celo-hbspt .hs-error-msg { + color: #E70532; +} + +.emotion-15 input[type='checkbox'] { + -webkit-flex-basis: 0; + -ms-flex-preferred-size: 0; + flex-basis: 0; } .emotion-15 input.hs-button { @@ -78,20 +197,25 @@ exports[`Alliance renders 1`] = ` line-height: 16px; -webkit-text-decoration: none; text-decoration: none; - background-color: #35D07F; - color: #FFFFFF; + background-color: #FCFF52; + color: #000; + padding: 24px 64px; + border-radius: 70px; width: -webkit-fit-content; width: -moz-fit-content; width: fit-content; - border: none; + border: 1px solid #CCCCCC; + margin-top: 32px; } .emotion-15 input.hs-button:hover { - background-color: #4CDD91; + background-color: #000; + color: #FFFFFF; } .emotion-15 input.hs-button:active { - background-color: #0FB972; + background-color: #000; + color: #FFFFFF; } .emotion-15 ul { @@ -103,7 +227,7 @@ exports[`Alliance renders 1`] = ` } .emotion-15 .legal-consent-container { - font-weight: normal; + font-weight: 200; margin: 0; margin-block-start: 0; margin-block-end: 0; @@ -129,7 +253,7 @@ exports[`Alliance renders 1`] = ` -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; - font-family: EB Garamond,eb-garamond,Garamond,serif; + font-family: Inter,sans-serif; font-size: 20px; line-height: 28; text-rendering: geometricPrecision; @@ -138,18 +262,14 @@ exports[`Alliance renders 1`] = ` -webkit-align-self: center; -ms-flex-item-align: center; align-self: center; - padding-left: 12px; - padding-right: 12px; - padding-top: 12px; - padding-bottom: 16px; - border-radius: 3px; + padding: 24px; + border-radius: 70px; border-width: 1px; border-style: solid; - border-color: rgba(61, 61, 61, 0.2); width: 100%; margin: 4px; - margin-bottom: 8px; outline-width: 0; + background-color: transparent; background-color: #111214; border-color: #81868B; color: #FFFFFF; @@ -157,7 +277,7 @@ exports[`Alliance renders 1`] = ` .emotion-15 input:focus, .emotion-15 textarea:focus { - border-color: #35D07F; + border-color: #000; } .emotion-15 input:focus, @@ -170,12 +290,12 @@ exports[`Alliance renders 1`] = ` } .emotion-101 { - font-family: EB Garamond,eb-garamond,Garamond,serif; + font-family: GT-Alpina,serif; font-size: 48px; line-height: 56; text-rendering: geometricPrecision; color: #111214; - font-weight: normal; + font-weight: 200; margin: 0; margin-block-start: 0; margin-block-end: 0; @@ -197,12 +317,12 @@ exports[`Alliance renders 1`] = ` } .emotion-102 { - font-family: EB Garamond,eb-garamond,Garamond,serif; + font-family: GT-Alpina,serif; font-size: 48px; line-height: 56; text-rendering: geometricPrecision; color: #111214; - font-weight: normal; + font-weight: 200; margin: 0; margin-block-start: 0; margin-block-end: 0; @@ -215,12 +335,12 @@ exports[`Alliance renders 1`] = ` @media (max-width: 576px) { .emotion-102 { - font-family: EB Garamond,eb-garamond,Garamond,serif; + font-family: GT-Alpina,serif; font-size: 36px; line-height: 40; text-rendering: geometricPrecision; color: #111214; - font-weight: normal; + font-weight: 200; margin: 0; margin-block-start: 0; margin-block-end: 0; @@ -246,6 +366,7 @@ exports[`Alliance renders 1`] = ` -ms-flex-item-align: center; align-self: center; width: 100%; + background-color: #FBF6F1; } .emotion-104 { @@ -339,14 +460,13 @@ exports[`Alliance renders 1`] = ` } .emotion-105 { - font-weight: normal; + font-weight: 200; margin: 0; margin-block-start: 0; margin-block-end: 0; - font-family: Jost,futura-pt,futura,sans-serif; + font-family: GT-Alpina,serif; font-size: 24px; line-height: 28; - font-weight: 400; text-rendering: geometricPrecision; color: #111214; line-height: 28px; @@ -360,11 +480,11 @@ exports[`Alliance renders 1`] = ` } .emotion-106 { - font-weight: normal; + font-weight: 200; margin: 0; margin-block-start: 0; margin-block-end: 0; - font-family: EB Garamond,eb-garamond,Garamond,serif; + font-family: GT-Alpina,serif; font-size: 40px; line-height: 48; text-rendering: geometricPrecision; @@ -434,7 +554,7 @@ exports[`Alliance renders 1`] = ` } .emotion-112 { - font-family: EB Garamond,eb-garamond,Garamond,serif; + font-family: Inter,sans-serif; font-size: 20px; line-height: 28; text-rendering: geometricPrecision; @@ -450,12 +570,12 @@ exports[`Alliance renders 1`] = ` } .emotion-161 { - font-family: EB Garamond,eb-garamond,Garamond,serif; + font-family: GT-Alpina,serif; font-size: 48px; line-height: 56; text-rendering: geometricPrecision; color: #111214; - font-weight: normal; + font-weight: 200; margin: 0; margin-block-start: 0; margin-block-end: 0; @@ -477,12 +597,12 @@ exports[`Alliance renders 1`] = ` } .emotion-162 { - font-family: EB Garamond,eb-garamond,Garamond,serif; + font-family: GT-Alpina,serif; font-size: 48px; line-height: 56; text-rendering: geometricPrecision; color: #111214; - font-weight: normal; + font-weight: 200; margin: 0; margin-block-start: 0; margin-block-end: 0; @@ -495,12 +615,12 @@ exports[`Alliance renders 1`] = ` @media (max-width: 576px) { .emotion-162 { - font-family: EB Garamond,eb-garamond,Garamond,serif; + font-family: GT-Alpina,serif; font-size: 36px; line-height: 40; text-rendering: geometricPrecision; color: #111214; - font-weight: normal; + font-weight: 200; margin: 0; margin-block-start: 0; margin-block-end: 0; @@ -2670,7 +2790,7 @@ exports[`Alliance renders 1`] = ` Object { "backgroundColor": "rgba(17,18,20,1.00)", "color": "rgba(255,255,255,1.00)", - "fontFamily": "EB Garamond, eb-garamond, Garamond, serif", + "fontFamily": "Inter, sans-serif", "fontSize": "24px", "lineHeight": "32px", "mixBlendMode": "darken", @@ -2796,7 +2916,7 @@ exports[`Alliance renders 1`] = ` style={ Object { "color": "rgba(255,255,255,1.00)", - "fontFamily": "EB Garamond, eb-garamond, Garamond, serif", + "fontFamily": "GT-Alpina, serif", "fontSize": "36px", "lineHeight": "40px", "marginBottom": "20px", @@ -2817,7 +2937,7 @@ exports[`Alliance renders 1`] = ` style={ Object { "color": "rgba(255,255,255,1.00)", - "fontFamily": "EB Garamond, eb-garamond, Garamond, serif", + "fontFamily": "Inter, sans-serif", "fontSize": "24px", "lineHeight": "32px", "textAlign": "center", @@ -2894,7 +3014,7 @@ exports[`Alliance renders 1`] = ` style={ Object { "color": "rgba(17,18,20,1.00)", - "fontFamily": "Jost, futura-pt, futura, sans-serif", + "fontFamily": "GT-Alpina, serif", "fontSize": "24px", "lineHeight": "32px", "textRendering": "geometricPrecision", @@ -2912,7 +3032,7 @@ exports[`Alliance renders 1`] = ` style={ Object { "color": "rgba(17,18,20,1.00)", - "fontFamily": "EB Garamond, eb-garamond, Garamond, serif", + "fontFamily": "GT-Alpina, serif", "fontSize": "28px", "lineHeight": "32px", "marginBottom": "10px", @@ -2983,7 +3103,7 @@ exports[`Alliance renders 1`] = ` style={ Object { "color": "rgba(17,18,20,1.00)", - "fontFamily": "EB Garamond, eb-garamond, Garamond, serif", + "fontFamily": "Inter, sans-serif", "fontSize": "24px", "lineHeight": "32px", "marginBottom": "20px", @@ -3056,7 +3176,7 @@ exports[`Alliance renders 1`] = ` style={ Object { "color": "rgba(17,18,20,1.00)", - "fontFamily": "EB Garamond, eb-garamond, Garamond, serif", + "fontFamily": "Inter, sans-serif", "fontSize": "20px", "lineHeight": "28px", "textRendering": "geometricPrecision", @@ -3313,7 +3433,7 @@ exports[`Alliance renders 1`] = ` style={ Object { "color": "rgba(17,18,20,1.00)", - "fontFamily": "EB Garamond, eb-garamond, Garamond, serif", + "fontFamily": "Inter, sans-serif", "fontSize": "24px", "lineHeight": "32px", "marginBottom": "20px", @@ -3387,7 +3507,7 @@ exports[`Alliance renders 1`] = ` style={ Object { "color": "rgba(17,18,20,1.00)", - "fontFamily": "EB Garamond, eb-garamond, Garamond, serif", + "fontFamily": "Inter, sans-serif", "fontSize": "20px", "lineHeight": "28px", "textRendering": "geometricPrecision", @@ -3740,7 +3860,7 @@ exports[`Alliance renders 1`] = ` style={ Object { "color": "rgba(17,18,20,1.00)", - "fontFamily": "EB Garamond, eb-garamond, Garamond, serif", + "fontFamily": "Inter, sans-serif", "fontSize": "24px", "lineHeight": "32px", "marginBottom": "20px", @@ -3813,7 +3933,7 @@ exports[`Alliance renders 1`] = ` style={ Object { "color": "rgba(17,18,20,1.00)", - "fontFamily": "EB Garamond, eb-garamond, Garamond, serif", + "fontFamily": "Inter, sans-serif", "fontSize": "20px", "lineHeight": "28px", "textRendering": "geometricPrecision", @@ -4902,7 +5022,7 @@ exports[`Alliance renders 1`] = ` style={ Object { "color": "rgba(17,18,20,1.00)", - "fontFamily": "EB Garamond, eb-garamond, Garamond, serif", + "fontFamily": "GT-Alpina, serif", "fontSize": "28px", "lineHeight": "32px", "textRendering": "geometricPrecision", @@ -5411,7 +5531,7 @@ exports[`Alliance renders 1`] = ` style={ Object { "color": "rgba(17,18,20,1.00)", - "fontFamily": "EB Garamond, eb-garamond, Garamond, serif", + "fontFamily": "GT-Alpina, serif", "fontSize": "28px", "lineHeight": "32px", "marginBottom": "5px", @@ -5431,7 +5551,7 @@ exports[`Alliance renders 1`] = ` style={ Object { "color": "rgba(17,18,20,1.00)", - "fontFamily": "EB Garamond, eb-garamond, Garamond, serif", + "fontFamily": "Inter, sans-serif", "fontSize": "24px", "lineHeight": "32px", "marginBottom": "30px", @@ -5509,7 +5629,7 @@ exports[`Alliance renders 1`] = ` style={ Object { "color": "rgba(17,18,20,1.00)", - "fontFamily": "Jost, futura-pt, futura, sans-serif", + "fontFamily": "GT-Alpina, serif", "fontSize": "16px", "fontWeight": "500", "lineHeight": "18px", @@ -5603,7 +5723,7 @@ exports[`Alliance renders 1`] = ` style={ Object { "color": "rgba(17,18,20,1.00)", - "fontFamily": "EB Garamond, eb-garamond, Garamond, serif", + "fontFamily": "Inter, sans-serif", "fontSize": "20px", "lineHeight": "28px", "overflowX": "hidden", @@ -5679,7 +5799,7 @@ exports[`Alliance renders 1`] = ` "backgroundColor": "rgba(251,204,92,0.40)", "color": "rgba(17,18,20,1.00)", "cursor": "pointer", - "fontFamily": "EB Garamond, eb-garamond, Garamond, serif", + "fontFamily": "Inter, sans-serif", "fontSize": "20px", "lineHeight": "28px", "overflowX": "hidden", @@ -5710,7 +5830,7 @@ exports[`Alliance renders 1`] = ` "backgroundColor": "rgba(255,255,255,1.00)", "color": "rgba(17,18,20,1.00)", "cursor": "pointer", - "fontFamily": "EB Garamond, eb-garamond, Garamond, serif", + "fontFamily": "Inter, sans-serif", "fontSize": "20px", "lineHeight": "28px", "overflowX": "hidden", @@ -5741,7 +5861,7 @@ exports[`Alliance renders 1`] = ` "backgroundColor": "rgba(255,255,255,1.00)", "color": "rgba(17,18,20,1.00)", "cursor": "pointer", - "fontFamily": "EB Garamond, eb-garamond, Garamond, serif", + "fontFamily": "Inter, sans-serif", "fontSize": "20px", "lineHeight": "28px", "overflowX": "hidden", @@ -5772,7 +5892,7 @@ exports[`Alliance renders 1`] = ` "backgroundColor": "rgba(255,255,255,1.00)", "color": "rgba(17,18,20,1.00)", "cursor": "pointer", - "fontFamily": "EB Garamond, eb-garamond, Garamond, serif", + "fontFamily": "Inter, sans-serif", "fontSize": "20px", "lineHeight": "28px", "overflowX": "hidden", @@ -5803,7 +5923,7 @@ exports[`Alliance renders 1`] = ` "backgroundColor": "rgba(255,255,255,1.00)", "color": "rgba(17,18,20,1.00)", "cursor": "pointer", - "fontFamily": "EB Garamond, eb-garamond, Garamond, serif", + "fontFamily": "Inter, sans-serif", "fontSize": "20px", "lineHeight": "28px", "overflowX": "hidden", @@ -5834,7 +5954,7 @@ exports[`Alliance renders 1`] = ` "backgroundColor": "rgba(255,255,255,1.00)", "color": "rgba(17,18,20,1.00)", "cursor": "pointer", - "fontFamily": "EB Garamond, eb-garamond, Garamond, serif", + "fontFamily": "Inter, sans-serif", "fontSize": "20px", "lineHeight": "28px", "overflowX": "hidden", @@ -5865,7 +5985,7 @@ exports[`Alliance renders 1`] = ` "backgroundColor": "rgba(255,255,255,1.00)", "color": "rgba(17,18,20,1.00)", "cursor": "pointer", - "fontFamily": "EB Garamond, eb-garamond, Garamond, serif", + "fontFamily": "Inter, sans-serif", "fontSize": "20px", "lineHeight": "28px", "overflowX": "hidden", @@ -5896,7 +6016,7 @@ exports[`Alliance renders 1`] = ` "backgroundColor": "rgba(255,255,255,1.00)", "color": "rgba(17,18,20,1.00)", "cursor": "pointer", - "fontFamily": "EB Garamond, eb-garamond, Garamond, serif", + "fontFamily": "Inter, sans-serif", "fontSize": "20px", "lineHeight": "28px", "overflowX": "hidden", @@ -5927,7 +6047,7 @@ exports[`Alliance renders 1`] = ` "backgroundColor": "rgba(255,255,255,1.00)", "color": "rgba(17,18,20,1.00)", "cursor": "pointer", - "fontFamily": "EB Garamond, eb-garamond, Garamond, serif", + "fontFamily": "Inter, sans-serif", "fontSize": "20px", "lineHeight": "28px", "overflowX": "hidden", @@ -5958,7 +6078,7 @@ exports[`Alliance renders 1`] = ` "backgroundColor": "rgba(255,255,255,1.00)", "color": "rgba(17,18,20,1.00)", "cursor": "pointer", - "fontFamily": "EB Garamond, eb-garamond, Garamond, serif", + "fontFamily": "Inter, sans-serif", "fontSize": "20px", "lineHeight": "28px", "overflowX": "hidden", @@ -5989,7 +6109,7 @@ exports[`Alliance renders 1`] = ` "backgroundColor": "rgba(255,255,255,1.00)", "color": "rgba(17,18,20,1.00)", "cursor": "pointer", - "fontFamily": "EB Garamond, eb-garamond, Garamond, serif", + "fontFamily": "Inter, sans-serif", "fontSize": "20px", "lineHeight": "28px", "overflowX": "hidden", @@ -6020,7 +6140,7 @@ exports[`Alliance renders 1`] = ` "backgroundColor": "rgba(255,255,255,1.00)", "color": "rgba(17,18,20,1.00)", "cursor": "pointer", - "fontFamily": "EB Garamond, eb-garamond, Garamond, serif", + "fontFamily": "Inter, sans-serif", "fontSize": "20px", "lineHeight": "28px", "overflowX": "hidden", @@ -6051,7 +6171,7 @@ exports[`Alliance renders 1`] = ` "backgroundColor": "rgba(255,255,255,1.00)", "color": "rgba(17,18,20,1.00)", "cursor": "pointer", - "fontFamily": "EB Garamond, eb-garamond, Garamond, serif", + "fontFamily": "Inter, sans-serif", "fontSize": "20px", "lineHeight": "28px", "overflowX": "hidden", @@ -6082,7 +6202,7 @@ exports[`Alliance renders 1`] = ` "backgroundColor": "rgba(255,255,255,1.00)", "color": "rgba(17,18,20,1.00)", "cursor": "pointer", - "fontFamily": "EB Garamond, eb-garamond, Garamond, serif", + "fontFamily": "Inter, sans-serif", "fontSize": "20px", "lineHeight": "28px", "overflowX": "hidden", @@ -6113,7 +6233,7 @@ exports[`Alliance renders 1`] = ` "backgroundColor": "rgba(255,255,255,1.00)", "color": "rgba(17,18,20,1.00)", "cursor": "pointer", - "fontFamily": "EB Garamond, eb-garamond, Garamond, serif", + "fontFamily": "Inter, sans-serif", "fontSize": "20px", "lineHeight": "28px", "overflowX": "hidden", @@ -6144,7 +6264,7 @@ exports[`Alliance renders 1`] = ` "backgroundColor": "rgba(255,255,255,1.00)", "color": "rgba(17,18,20,1.00)", "cursor": "pointer", - "fontFamily": "EB Garamond, eb-garamond, Garamond, serif", + "fontFamily": "Inter, sans-serif", "fontSize": "20px", "lineHeight": "28px", "overflowX": "hidden", @@ -6196,7 +6316,7 @@ exports[`Alliance renders 1`] = ` style={ Object { "color": "rgba(17,18,20,1.00)", - "fontFamily": "EB Garamond, eb-garamond, Garamond, serif", + "fontFamily": "Inter, sans-serif", "fontSize": "24px", "lineHeight": "32px", "textRendering": "geometricPrecision", @@ -6223,7 +6343,7 @@ exports[`Alliance renders 1`] = ` style={ Object { "color": "rgba(17,18,20,1.00)", - "fontFamily": "EB Garamond, eb-garamond, Garamond, serif", + "fontFamily": "Inter, sans-serif", "fontSize": "20px", "lineHeight": "28px", "textRendering": "geometricPrecision", @@ -6267,7 +6387,7 @@ exports[`Alliance renders 1`] = ` style={ Object { "color": "rgba(17,18,20,1.00)", - "fontFamily": "EB Garamond, eb-garamond, Garamond, serif", + "fontFamily": "Inter, sans-serif", "fontSize": "24px", "lineHeight": "32px", "textRendering": "geometricPrecision", @@ -6294,7 +6414,7 @@ exports[`Alliance renders 1`] = ` style={ Object { "color": "rgba(17,18,20,1.00)", - "fontFamily": "EB Garamond, eb-garamond, Garamond, serif", + "fontFamily": "Inter, sans-serif", "fontSize": "20px", "lineHeight": "28px", "textRendering": "geometricPrecision", @@ -6338,7 +6458,7 @@ exports[`Alliance renders 1`] = ` style={ Object { "color": "rgba(17,18,20,1.00)", - "fontFamily": "EB Garamond, eb-garamond, Garamond, serif", + "fontFamily": "Inter, sans-serif", "fontSize": "24px", "lineHeight": "32px", "textRendering": "geometricPrecision", @@ -6365,7 +6485,7 @@ exports[`Alliance renders 1`] = ` style={ Object { "color": "rgba(17,18,20,1.00)", - "fontFamily": "EB Garamond, eb-garamond, Garamond, serif", + "fontFamily": "Inter, sans-serif", "fontSize": "20px", "lineHeight": "28px", "textRendering": "geometricPrecision", @@ -6409,7 +6529,7 @@ exports[`Alliance renders 1`] = ` style={ Object { "color": "rgba(17,18,20,1.00)", - "fontFamily": "EB Garamond, eb-garamond, Garamond, serif", + "fontFamily": "Inter, sans-serif", "fontSize": "24px", "lineHeight": "32px", "textRendering": "geometricPrecision", @@ -6436,7 +6556,7 @@ exports[`Alliance renders 1`] = ` style={ Object { "color": "rgba(17,18,20,1.00)", - "fontFamily": "EB Garamond, eb-garamond, Garamond, serif", + "fontFamily": "Inter, sans-serif", "fontSize": "20px", "lineHeight": "28px", "textRendering": "geometricPrecision", @@ -6480,7 +6600,7 @@ exports[`Alliance renders 1`] = ` style={ Object { "color": "rgba(17,18,20,1.00)", - "fontFamily": "EB Garamond, eb-garamond, Garamond, serif", + "fontFamily": "Inter, sans-serif", "fontSize": "24px", "lineHeight": "32px", "textRendering": "geometricPrecision", @@ -6507,7 +6627,7 @@ exports[`Alliance renders 1`] = ` style={ Object { "color": "rgba(17,18,20,1.00)", - "fontFamily": "EB Garamond, eb-garamond, Garamond, serif", + "fontFamily": "Inter, sans-serif", "fontSize": "20px", "lineHeight": "28px", "textRendering": "geometricPrecision", @@ -6551,7 +6671,7 @@ exports[`Alliance renders 1`] = ` style={ Object { "color": "rgba(17,18,20,1.00)", - "fontFamily": "EB Garamond, eb-garamond, Garamond, serif", + "fontFamily": "Inter, sans-serif", "fontSize": "24px", "lineHeight": "32px", "textRendering": "geometricPrecision", @@ -6578,7 +6698,7 @@ exports[`Alliance renders 1`] = ` style={ Object { "color": "rgba(17,18,20,1.00)", - "fontFamily": "EB Garamond, eb-garamond, Garamond, serif", + "fontFamily": "Inter, sans-serif", "fontSize": "20px", "lineHeight": "28px", "textRendering": "geometricPrecision", @@ -6622,7 +6742,7 @@ exports[`Alliance renders 1`] = ` style={ Object { "color": "rgba(17,18,20,1.00)", - "fontFamily": "EB Garamond, eb-garamond, Garamond, serif", + "fontFamily": "Inter, sans-serif", "fontSize": "24px", "lineHeight": "32px", "textRendering": "geometricPrecision", @@ -6649,7 +6769,7 @@ exports[`Alliance renders 1`] = ` style={ Object { "color": "rgba(17,18,20,1.00)", - "fontFamily": "EB Garamond, eb-garamond, Garamond, serif", + "fontFamily": "Inter, sans-serif", "fontSize": "20px", "lineHeight": "28px", "textRendering": "geometricPrecision", @@ -6693,7 +6813,7 @@ exports[`Alliance renders 1`] = ` style={ Object { "color": "rgba(17,18,20,1.00)", - "fontFamily": "EB Garamond, eb-garamond, Garamond, serif", + "fontFamily": "Inter, sans-serif", "fontSize": "24px", "lineHeight": "32px", "textRendering": "geometricPrecision", @@ -6720,7 +6840,7 @@ exports[`Alliance renders 1`] = ` style={ Object { "color": "rgba(17,18,20,1.00)", - "fontFamily": "EB Garamond, eb-garamond, Garamond, serif", + "fontFamily": "Inter, sans-serif", "fontSize": "20px", "lineHeight": "28px", "textRendering": "geometricPrecision", @@ -6764,7 +6884,7 @@ exports[`Alliance renders 1`] = ` style={ Object { "color": "rgba(17,18,20,1.00)", - "fontFamily": "EB Garamond, eb-garamond, Garamond, serif", + "fontFamily": "Inter, sans-serif", "fontSize": "24px", "lineHeight": "32px", "textRendering": "geometricPrecision", @@ -6791,7 +6911,7 @@ exports[`Alliance renders 1`] = ` style={ Object { "color": "rgba(17,18,20,1.00)", - "fontFamily": "EB Garamond, eb-garamond, Garamond, serif", + "fontFamily": "Inter, sans-serif", "fontSize": "20px", "lineHeight": "28px", "textRendering": "geometricPrecision", @@ -6835,7 +6955,7 @@ exports[`Alliance renders 1`] = ` style={ Object { "color": "rgba(17,18,20,1.00)", - "fontFamily": "EB Garamond, eb-garamond, Garamond, serif", + "fontFamily": "Inter, sans-serif", "fontSize": "24px", "lineHeight": "32px", "textRendering": "geometricPrecision", @@ -6862,7 +6982,7 @@ exports[`Alliance renders 1`] = ` style={ Object { "color": "rgba(17,18,20,1.00)", - "fontFamily": "EB Garamond, eb-garamond, Garamond, serif", + "fontFamily": "Inter, sans-serif", "fontSize": "20px", "lineHeight": "28px", "textRendering": "geometricPrecision", @@ -6906,7 +7026,7 @@ exports[`Alliance renders 1`] = ` style={ Object { "color": "rgba(17,18,20,1.00)", - "fontFamily": "EB Garamond, eb-garamond, Garamond, serif", + "fontFamily": "Inter, sans-serif", "fontSize": "24px", "lineHeight": "32px", "textRendering": "geometricPrecision", @@ -6933,7 +7053,7 @@ exports[`Alliance renders 1`] = ` style={ Object { "color": "rgba(17,18,20,1.00)", - "fontFamily": "EB Garamond, eb-garamond, Garamond, serif", + "fontFamily": "Inter, sans-serif", "fontSize": "20px", "lineHeight": "28px", "textRendering": "geometricPrecision", @@ -6977,7 +7097,7 @@ exports[`Alliance renders 1`] = ` style={ Object { "color": "rgba(17,18,20,1.00)", - "fontFamily": "EB Garamond, eb-garamond, Garamond, serif", + "fontFamily": "Inter, sans-serif", "fontSize": "24px", "lineHeight": "32px", "textRendering": "geometricPrecision", @@ -7004,7 +7124,7 @@ exports[`Alliance renders 1`] = ` style={ Object { "color": "rgba(17,18,20,1.00)", - "fontFamily": "EB Garamond, eb-garamond, Garamond, serif", + "fontFamily": "Inter, sans-serif", "fontSize": "20px", "lineHeight": "28px", "textRendering": "geometricPrecision", @@ -7048,7 +7168,7 @@ exports[`Alliance renders 1`] = ` style={ Object { "color": "rgba(17,18,20,1.00)", - "fontFamily": "EB Garamond, eb-garamond, Garamond, serif", + "fontFamily": "Inter, sans-serif", "fontSize": "24px", "lineHeight": "32px", "textRendering": "geometricPrecision", @@ -7075,7 +7195,7 @@ exports[`Alliance renders 1`] = ` style={ Object { "color": "rgba(17,18,20,1.00)", - "fontFamily": "EB Garamond, eb-garamond, Garamond, serif", + "fontFamily": "Inter, sans-serif", "fontSize": "20px", "lineHeight": "28px", "textRendering": "geometricPrecision", @@ -7119,7 +7239,7 @@ exports[`Alliance renders 1`] = ` style={ Object { "color": "rgba(17,18,20,1.00)", - "fontFamily": "EB Garamond, eb-garamond, Garamond, serif", + "fontFamily": "Inter, sans-serif", "fontSize": "24px", "lineHeight": "32px", "textRendering": "geometricPrecision", @@ -7146,7 +7266,7 @@ exports[`Alliance renders 1`] = ` style={ Object { "color": "rgba(17,18,20,1.00)", - "fontFamily": "EB Garamond, eb-garamond, Garamond, serif", + "fontFamily": "Inter, sans-serif", "fontSize": "20px", "lineHeight": "28px", "textRendering": "geometricPrecision", @@ -7190,7 +7310,7 @@ exports[`Alliance renders 1`] = ` style={ Object { "color": "rgba(17,18,20,1.00)", - "fontFamily": "EB Garamond, eb-garamond, Garamond, serif", + "fontFamily": "Inter, sans-serif", "fontSize": "24px", "lineHeight": "32px", "textRendering": "geometricPrecision", @@ -7217,7 +7337,7 @@ exports[`Alliance renders 1`] = ` style={ Object { "color": "rgba(17,18,20,1.00)", - "fontFamily": "EB Garamond, eb-garamond, Garamond, serif", + "fontFamily": "Inter, sans-serif", "fontSize": "20px", "lineHeight": "28px", "textRendering": "geometricPrecision", @@ -7372,7 +7492,7 @@ exports[`Alliance renders 1`] = ` style={ Object { "color": "rgba(255,255,255,1.00)", - "fontFamily": "EB Garamond, eb-garamond, Garamond, serif", + "fontFamily": "GT-Alpina, serif", "fontSize": "36px", "lineHeight": "40px", "marginBottom": "20px", @@ -7393,7 +7513,7 @@ exports[`Alliance renders 1`] = ` style={ Object { "color": "rgba(255,255,255,1.00)", - "fontFamily": "EB Garamond, eb-garamond, Garamond, serif", + "fontFamily": "Inter, sans-serif", "fontSize": "24px", "lineHeight": "32px", "textAlign": "center", diff --git a/src/_page-tests/__snapshots__/audits.test.tsx.snap b/src/_page-tests/__snapshots__/audits.test.tsx.snap index 46a7ff1e..14c085bc 100644 --- a/src/_page-tests/__snapshots__/audits.test.tsx.snap +++ b/src/_page-tests/__snapshots__/audits.test.tsx.snap @@ -33,6 +33,7 @@ exports[`Audits renders 1`] = ` -ms-flex-item-align: center; align-self: center; width: 100%; + background-color: #FBF6F1; } .emotion-2 { @@ -131,12 +132,12 @@ exports[`Audits renders 1`] = ` } .emotion-3 { - font-family: EB Garamond,eb-garamond,Garamond,serif; + font-family: GT-Alpina,serif; font-size: 48px; line-height: 56; text-rendering: geometricPrecision; color: #111214; - font-weight: normal; + font-weight: 200; margin: 0; margin-block-start: 0; margin-block-end: 0; @@ -234,14 +235,13 @@ exports[`Audits renders 1`] = ` } .emotion-7 { - font-weight: normal; + font-weight: 200; margin: 0; margin-block-start: 0; margin-block-end: 0; - font-family: Jost,futura-pt,futura,sans-serif; + font-family: GT-Alpina,serif; font-size: 24px; line-height: 28; - font-weight: 400; text-rendering: geometricPrecision; color: #111214; line-height: 28px; @@ -266,7 +266,7 @@ exports[`Audits renders 1`] = ` } .emotion-9 { - font-family: EB Garamond,eb-garamond,Garamond,serif; + font-family: Inter,sans-serif; font-size: 20px; line-height: 28; text-rendering: geometricPrecision; @@ -279,7 +279,7 @@ exports[`Audits renders 1`] = ` } .emotion-11 { - font-family: EB Garamond,eb-garamond,Garamond,serif; + font-family: Inter,sans-serif; font-size: 20px; line-height: 28; text-rendering: geometricPrecision; @@ -291,6 +291,17 @@ exports[`Audits renders 1`] = ` font-style: italic; } +.emotion-13 { + box-sizing: border-box; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex-direction: column; + -ms-flex-direction: column; + flex-direction: column; +} + .emotion-14 { -webkit-box-pack: center; -ms-flex-pack: center; @@ -336,24 +347,32 @@ exports[`Audits renders 1`] = ` -webkit-box-align: center; -ms-flex-align: center; align-items: center; - color: #35D07F; + color: #000; font-size: 16px; font-weight: 500; margin-top: 10px; margin-right: 30px; } -.emotion-15:hover { - color: #4CDD91; +.emotion-16 { + margin-left: 8px; + background-color: #000; + padding: 9.5px 9.5px 9.5px 13.5px; + border-radius: 60px; } -.emotion-15:active { - color: #0FB972; +.emotion-16:hover { + background-color: #FCFF52; } -.emotion-16 { - padding-top: 0.15em; - padding-left: 0.4em; +.emotion-16:active { + background-color: #000; +} + +@media (max-width: 576px) { + .emotion-16 { + padding: 6px 6px 6px 8px; + } }
@@ -480,6 +502,9 @@ exports[`Audits renders 1`] = ` Read diff --git a/src/_page-tests/__snapshots__/cbe.test.tsx.snap b/src/_page-tests/__snapshots__/cbe.test.tsx.snap index 2e7299a3..cd1aba57 100644 --- a/src/_page-tests/__snapshots__/cbe.test.tsx.snap +++ b/src/_page-tests/__snapshots__/cbe.test.tsx.snap @@ -65,6 +65,7 @@ exports[`CBE renders 1`] = ` -ms-flex-item-align: center; align-self: center; width: 100%; + background-color: #FBF6F1; } .emotion-4 { @@ -163,11 +164,11 @@ exports[`CBE renders 1`] = ` } .emotion-5 { - font-weight: normal; + font-weight: 200; margin: 0; margin-block-start: 0; margin-block-end: 0; - font-family: EB Garamond,eb-garamond,Garamond,serif; + font-family: Inter,sans-serif; font-size: 28px; line-height: 36; text-rendering: geometricPrecision; @@ -183,12 +184,12 @@ exports[`CBE renders 1`] = ` } .emotion-6 { - font-family: EB Garamond,eb-garamond,Garamond,serif; + font-family: GT-Alpina,serif; font-size: 48px; line-height: 56; text-rendering: geometricPrecision; color: #111214; - font-weight: normal; + font-weight: 200; margin: 0; margin-block-start: 0; margin-block-end: 0; @@ -329,14 +330,13 @@ exports[`CBE renders 1`] = ` } .emotion-12 { - font-weight: normal; + font-weight: 200; margin: 0; margin-block-start: 0; margin-block-end: 0; - font-family: Jost,futura-pt,futura,sans-serif; + font-family: GT-Alpina,serif; font-size: 24px; line-height: 28; - font-weight: 400; text-rendering: geometricPrecision; color: #111214; line-height: 28px; @@ -345,7 +345,7 @@ exports[`CBE renders 1`] = ` } .emotion-13 { - font-family: EB Garamond,eb-garamond,Garamond,serif; + font-family: Inter,sans-serif; font-size: 20px; line-height: 28; text-rendering: geometricPrecision; @@ -353,6 +353,17 @@ exports[`CBE renders 1`] = ` line-height: 28px; } +.emotion-14 { + box-sizing: border-box; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex-direction: column; + -ms-flex-direction: column; + flex-direction: column; +} + .emotion-15 { -webkit-box-pack: center; -ms-flex-pack: center; @@ -398,23 +409,31 @@ exports[`CBE renders 1`] = ` -webkit-box-align: center; -ms-flex-align: center; align-items: center; - color: #35D07F; + color: #000; font-size: 16px; font-weight: 500; margin-top: 20px; } -.emotion-16:hover { - color: #4CDD91; +.emotion-17 { + margin-left: 8px; + background-color: #000; + padding: 9.5px 9.5px 9.5px 13.5px; + border-radius: 60px; } -.emotion-16:active { - color: #0FB972; +.emotion-17:hover { + background-color: #FCFF52; } -.emotion-17 { - padding-top: 0.15em; - padding-left: 0.4em; +.emotion-17:active { + background-color: #000; +} + +@media (max-width: 576px) { + .emotion-17 { + padding: 6px 6px 6px 8px; + } } .emotion-28 { @@ -534,11 +553,11 @@ exports[`CBE renders 1`] = ` } .emotion-41 { - font-weight: normal; + font-weight: 200; margin: 0; margin-block-start: 0; margin-block-end: 0; - font-family: EB Garamond,eb-garamond,Garamond,serif; + font-family: Inter,sans-serif; font-size: 28px; line-height: 36; text-rendering: geometricPrecision; @@ -639,11 +658,11 @@ exports[`CBE renders 1`] = ` } .emotion-47 { - font-weight: normal; + font-weight: 200; margin: 0; margin-block-start: 0; margin-block-end: 0; - font-family: Jost,futura-pt,futura,sans-serif; + font-family: GT-Alpina,serif; font-size: 16px; line-height: 18; font-weight: 500; @@ -653,11 +672,11 @@ exports[`CBE renders 1`] = ` } .emotion-48 { - font-weight: normal; + font-weight: 200; margin: 0; margin-block-start: 0; margin-block-end: 0; - font-family: Jost,futura-pt,futura,sans-serif; + font-family: GT-Alpina,serif; font-size: 16px; line-height: 18; font-weight: 500; @@ -849,6 +868,9 @@ exports[`CBE renders 1`] = ` Sign up @@ -1020,6 +1042,9 @@ exports[`CBE renders 1`] = ` Connect @@ -1191,6 +1216,9 @@ exports[`CBE renders 1`] = ` Get Valora diff --git a/src/_page-tests/__snapshots__/community.test.tsx.snap b/src/_page-tests/__snapshots__/community.test.tsx.snap index 1ce7a816..d2155b06 100644 --- a/src/_page-tests/__snapshots__/community.test.tsx.snap +++ b/src/_page-tests/__snapshots__/community.test.tsx.snap @@ -10,8 +10,20 @@ exports[`Community renders 1`] = ` opacity: 0; } -.emotion-153 input, -.emotion-153 textarea { +.emotion-153 { + width: 100%; + display: inline-block; +} + +.emotion-153 img { + display: none; +} + +.emotion-153 .grecaptcha-badge { + display: none; +} + +.emotion-153 #email-b4dd2ae2-68e9-4662-bfd3-b2860162a5aa { box-sizing: border-box; display: -webkit-box; display: -webkit-flex; @@ -20,7 +32,7 @@ exports[`Community renders 1`] = ` -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; - font-family: EB Garamond,eb-garamond,Garamond,serif; + font-family: Inter,sans-serif; font-size: 20px; line-height: 28; text-rendering: geometricPrecision; @@ -29,33 +41,81 @@ exports[`Community renders 1`] = ` -webkit-align-self: center; -ms-flex-item-align: center; align-self: center; - padding-left: 12px; - padding-right: 12px; - padding-top: 12px; - padding-bottom: 16px; - border-radius: 3px; + padding: 24px; + border-radius: 70px; border-width: 1px; border-style: solid; - border-color: rgba(61, 61, 61, 0.2); width: 100%; margin: 4px; - margin-bottom: 8px; outline-width: 0; + background-color: transparent; } -.emotion-153 input:focus, -.emotion-153 textarea:focus { - border-color: #35D07F; +.emotion-153 #email-b4dd2ae2-68e9-4662-bfd3-b2860162a5aa:focus { + border-color: #000; } -.emotion-153 input[type='checkbox'] { - -webkit-flex-basis: 0; - -ms-flex-preferred-size: 0; - flex-basis: 0; +.emotion-153 #hsForm_b4dd2ae2-68e9-4662-bfd3-b2860162a5aa input[type=submit] { + display: none; } -.emotion-153 label { - font-family: Jost,futura-pt,futura,sans-serif; +.emotion-153 .celo-hbspt { + width: 100%; +} + +.emotion-153 .celo-hbspt * { + box-sizing: border-box; +} + +.emotion-153 .celo-hbspt fieldset { + border: 0; + padding: 0; + margin: 0; + max-width: 100%; +} + +@media (min-width: 576px) and (max-width: 992px) { + .emotion-153 .celo-hbspt fieldset { + margin-right: 0!important; + width: 100%!important; + } +} + +@media (max-width: 576px) { + .emotion-153 .celo-hbspt fieldset { + float: none; + width: 100%; + } +} + +.emotion-153 .celo-hbspt fieldset.form-columns-2 .hs-form-field { + width: 50%; + float: left; +} + +@media (min-width: 576px) and (max-width: 992px) { + .emotion-153 .celo-hbspt fieldset.form-columns-2 .hs-form-field { + float: none; + width: 100%; + } +} + +@media (max-width: 576px) { + .emotion-153 .celo-hbspt fieldset.form-columns-2 .hs-form-field { + float: none; + width: 100%; + } +} + +.emotion-153 .celo-hbspt .field { + margin-bottom: 32px; +} + +.emotion-153 .celo-hbspt .input { + margin-right: 26px; +} + +.emotion-153 .celo-hbspt .hs-input { box-sizing: border-box; display: -webkit-box; display: -webkit-flex; @@ -64,15 +124,74 @@ exports[`Community renders 1`] = ` -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; - color: #81868B; - font-weight: 500; - font-size: 16px; - line-height: 18px; - margin-top: 12px; - margin-bottom: 8px; - -webkit-flex-direction: row; - -ms-flex-direction: row; - flex-direction: row; + font-family: Inter,sans-serif; + font-size: 20px; + line-height: 28; + text-rendering: geometricPrecision; + color: #111214; + line-height: 28px; + -webkit-align-self: center; + -ms-flex-item-align: center; + align-self: center; + padding: 24px; + border-radius: 70px; + border-width: 1px; + border-style: solid; + width: 100%; + margin: 4px; + outline-width: 0; + background-color: transparent; + border-color: rgba(0, 0, 0, 0.2); +} + +.emotion-153 .celo-hbspt .hs-input:focus { + border-color: #000; +} + +.emotion-153 .hs-custom-style fieldset textarea { + box-sizing: border-box; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex-direction: column; + -ms-flex-direction: column; + flex-direction: column; + font-family: Inter,sans-serif; + font-size: 20px; + line-height: 28; + text-rendering: geometricPrecision; + color: #111214; + line-height: 28px; + -webkit-align-self: center; + -ms-flex-item-align: center; + align-self: center; + padding: 24px; + border-radius: 70px; + border-width: 1px; + border-style: solid; + width: 100%; + margin: 4px; + outline-width: 0; + background-color: transparent; +} + +.emotion-153 .hs-custom-style fieldset textarea:focus { + border-color: #000; +} + +.emotion-153 .celo-hbspt .contact-error { + border-color: #E70532; +} + +.emotion-153 .celo-hbspt .hs-error-msg { + color: #E70532; +} + +.emotion-153 input[type='checkbox'] { + -webkit-flex-basis: 0; + -ms-flex-preferred-size: 0; + flex-basis: 0; } .emotion-153 input.hs-button { @@ -87,20 +206,25 @@ exports[`Community renders 1`] = ` line-height: 16px; -webkit-text-decoration: none; text-decoration: none; - background-color: #35D07F; - color: #FFFFFF; + background-color: #FCFF52; + color: #000; + padding: 24px 64px; + border-radius: 70px; width: -webkit-fit-content; width: -moz-fit-content; width: fit-content; - border: none; + border: 1px solid #CCCCCC; + margin-top: 32px; } .emotion-153 input.hs-button:hover { - background-color: #4CDD91; + background-color: #000; + color: #FFFFFF; } .emotion-153 input.hs-button:active { - background-color: #0FB972; + background-color: #000; + color: #FFFFFF; } .emotion-153 ul { @@ -112,7 +236,7 @@ exports[`Community renders 1`] = ` } .emotion-153 .legal-consent-container { - font-weight: normal; + font-weight: 200; margin: 0; margin-block-start: 0; margin-block-end: 0; @@ -241,7 +365,7 @@ exports[`Community renders 1`] = ` style={ Object { "color": "rgba(17,18,20,1.00)", - "fontFamily": "EB Garamond, eb-garamond, Garamond, serif", + "fontFamily": "GT-Alpina, serif", "fontSize": "36px", "lineHeight": "40px", "textAlign": "center", @@ -530,7 +654,7 @@ exports[`Community renders 1`] = ` style={ Object { "color": "rgba(17,18,20,1.00)", - "fontFamily": "EB Garamond, eb-garamond, Garamond, serif", + "fontFamily": "GT-Alpina, serif", "fontSize": "28px", "lineHeight": "32px", "marginBottom": "20px", @@ -550,7 +674,7 @@ exports[`Community renders 1`] = ` style={ Object { "color": "rgba(17,18,20,1.00)", - "fontFamily": "EB Garamond, eb-garamond, Garamond, serif", + "fontFamily": "Inter, sans-serif", "fontSize": "24px", "lineHeight": "32px", "textAlign": "center", @@ -623,7 +747,7 @@ exports[`Community renders 1`] = ` style={ Object { "color": "rgba(17,18,20,1.00)", - "fontFamily": "Jost, futura-pt, futura, sans-serif", + "fontFamily": "GT-Alpina, serif", "fontSize": "24px", "lineHeight": "32px", "marginBottom": "20px", @@ -644,7 +768,7 @@ exports[`Community renders 1`] = ` style={ Object { "color": "rgba(17,18,20,1.00)", - "fontFamily": "EB Garamond, eb-garamond, Garamond, serif", + "fontFamily": "Inter, sans-serif", "fontSize": "24px", "lineHeight": "32px", "marginBottom": "20px", @@ -750,7 +874,7 @@ exports[`Community renders 1`] = ` style={ Object { "color": "rgba(17,18,20,1.00)", - "fontFamily": "EB Garamond, eb-garamond, Garamond, serif", + "fontFamily": "Inter, sans-serif", "fontSize": "20px", "lineHeight": "28px", "textRendering": "geometricPrecision", @@ -821,7 +945,7 @@ Therefore, when we design our tools, we keep in the front of our mind the people style={ Object { "color": "rgba(17,18,20,1.00)", - "fontFamily": "Jost, futura-pt, futura, sans-serif", + "fontFamily": "GT-Alpina, serif", "fontSize": "24px", "lineHeight": "32px", "marginBottom": "20px", @@ -842,7 +966,7 @@ Therefore, when we design our tools, we keep in the front of our mind the people style={ Object { "color": "rgba(17,18,20,1.00)", - "fontFamily": "EB Garamond, eb-garamond, Garamond, serif", + "fontFamily": "Inter, sans-serif", "fontSize": "24px", "lineHeight": "32px", "marginBottom": "20px", @@ -948,7 +1072,7 @@ Therefore, when we design our tools, we keep in the front of our mind the people style={ Object { "color": "rgba(17,18,20,1.00)", - "fontFamily": "EB Garamond, eb-garamond, Garamond, serif", + "fontFamily": "Inter, sans-serif", "fontSize": "20px", "lineHeight": "28px", "textRendering": "geometricPrecision", @@ -1017,7 +1141,7 @@ We believe that many of these features have great potential for positive impact, style={ Object { "color": "rgba(17,18,20,1.00)", - "fontFamily": "Jost, futura-pt, futura, sans-serif", + "fontFamily": "GT-Alpina, serif", "fontSize": "24px", "lineHeight": "32px", "marginBottom": "20px", @@ -1038,7 +1162,7 @@ We believe that many of these features have great potential for positive impact, style={ Object { "color": "rgba(17,18,20,1.00)", - "fontFamily": "EB Garamond, eb-garamond, Garamond, serif", + "fontFamily": "Inter, sans-serif", "fontSize": "24px", "lineHeight": "32px", "marginBottom": "20px", @@ -1144,7 +1268,7 @@ We believe that many of these features have great potential for positive impact, style={ Object { "color": "rgba(17,18,20,1.00)", - "fontFamily": "EB Garamond, eb-garamond, Garamond, serif", + "fontFamily": "Inter, sans-serif", "fontSize": "20px", "lineHeight": "28px", "textRendering": "geometricPrecision", @@ -1211,7 +1335,7 @@ We believe that many of these features have great potential for positive impact, style={ Object { "color": "rgba(17,18,20,1.00)", - "fontFamily": "Jost, futura-pt, futura, sans-serif", + "fontFamily": "GT-Alpina, serif", "fontSize": "24px", "lineHeight": "32px", "marginBottom": "20px", @@ -1232,7 +1356,7 @@ We believe that many of these features have great potential for positive impact, style={ Object { "color": "rgba(17,18,20,1.00)", - "fontFamily": "EB Garamond, eb-garamond, Garamond, serif", + "fontFamily": "Inter, sans-serif", "fontSize": "24px", "lineHeight": "32px", "marginBottom": "20px", @@ -1338,7 +1462,7 @@ We believe that many of these features have great potential for positive impact, style={ Object { "color": "rgba(17,18,20,1.00)", - "fontFamily": "EB Garamond, eb-garamond, Garamond, serif", + "fontFamily": "Inter, sans-serif", "fontSize": "20px", "lineHeight": "28px", "textRendering": "geometricPrecision", @@ -1416,7 +1540,7 @@ We believe that many of these features have great potential for positive impact, style={ Object { "color": "rgba(17,18,20,1.00)", - "fontFamily": "EB Garamond, eb-garamond, Garamond, serif", + "fontFamily": "GT-Alpina, serif", "fontSize": "28px", "lineHeight": "32px", "textRendering": "geometricPrecision", @@ -1868,7 +1992,7 @@ We believe that many of these features have great potential for positive impact, style={ Object { "color": "rgba(255,255,255,1.00)", - "fontFamily": "EB Garamond, eb-garamond, Garamond, serif", + "fontFamily": "GT-Alpina, serif", "fontSize": "28px", "lineHeight": "32px", "marginBottom": "20px", @@ -2060,7 +2184,7 @@ We believe that many of these features have great potential for positive impact, style={ Object { "color": "rgba(17,18,20,1.00)", - "fontFamily": "EB Garamond, eb-garamond, Garamond, serif", + "fontFamily": "GT-Alpina, serif", "fontSize": "28px", "lineHeight": "32px", "textRendering": "geometricPrecision", @@ -2076,7 +2200,7 @@ We believe that many of these features have great potential for positive impact, style={ Object { "color": "rgba(17,18,20,1.00)", - "fontFamily": "EB Garamond, eb-garamond, Garamond, serif", + "fontFamily": "Inter, sans-serif", "fontSize": "20px", "fontStyle": "italic", "lineHeight": "28px", @@ -2092,7 +2216,7 @@ We believe that many of these features have great potential for positive impact, style={ Object { "color": "rgba(17,18,20,1.00)", - "fontFamily": "EB Garamond, eb-garamond, Garamond, serif", + "fontFamily": "Inter, sans-serif", "fontSize": "20px", "lineHeight": "28px", "marginBottom": "20px", @@ -2138,7 +2262,7 @@ We believe that many of these features have great potential for positive impact, style={ Object { "color": "rgba(17,18,20,1.00)", - "fontFamily": "Jost, futura-pt, futura, sans-serif", + "fontFamily": "GT-Alpina, serif", "fontSize": "16px", "fontWeight": "500", "lineHeight": "18px", @@ -2207,7 +2331,7 @@ We believe that many of these features have great potential for positive impact, style={ Object { "color": "rgba(17,18,20,1.00)", - "fontFamily": "Jost, futura-pt, futura, sans-serif", + "fontFamily": "GT-Alpina, serif", "fontSize": "16px", "fontWeight": "500", "lineHeight": "18px", diff --git a/src/_page-tests/__snapshots__/index.test.tsx.snap b/src/_page-tests/__snapshots__/index.test.tsx.snap index 5e1e95bd..2df1286e 100644 --- a/src/_page-tests/__snapshots__/index.test.tsx.snap +++ b/src/_page-tests/__snapshots__/index.test.tsx.snap @@ -32,6 +32,7 @@ exports[`HomePage renders 1`] = ` -ms-flex-item-align: center; align-self: center; width: 100%; + background-color: #FBF6F1; } .emotion-2 { @@ -141,14 +142,13 @@ exports[`HomePage renders 1`] = ` } .emotion-5 { - font-weight: normal; + font-weight: 200; margin: 0; margin-block-start: 0; margin-block-end: 0; - font-family: Jost,futura-pt,futura,sans-serif; + font-family: GT-Alpina,serif; font-size: 24px; line-height: 28; - font-weight: 400; text-rendering: geometricPrecision; color: #111214; line-height: 28px; @@ -157,7 +157,7 @@ exports[`HomePage renders 1`] = ` } .emotion-6 { - font-family: EB Garamond,eb-garamond,Garamond,serif; + font-family: Inter,sans-serif; font-size: 20px; line-height: 28; text-rendering: geometricPrecision; diff --git a/src/_page-tests/__snapshots__/jobs.test.tsx.snap b/src/_page-tests/__snapshots__/jobs.test.tsx.snap index 18d37031..daca835f 100644 --- a/src/_page-tests/__snapshots__/jobs.test.tsx.snap +++ b/src/_page-tests/__snapshots__/jobs.test.tsx.snap @@ -110,7 +110,7 @@ exports[`JoinJobsPage with jobs renders 1`] = ` style={ Object { "color": "rgba(17,18,20,1.00)", - "fontFamily": "EB Garamond, eb-garamond, Garamond, serif", + "fontFamily": "GT-Alpina, serif", "fontSize": "36px", "lineHeight": "40px", "marginBottom": "20px", @@ -130,7 +130,7 @@ exports[`JoinJobsPage with jobs renders 1`] = ` style={ Object { "color": "rgba(17,18,20,1.00)", - "fontFamily": "EB Garamond, eb-garamond, Garamond, serif", + "fontFamily": "Inter, sans-serif", "fontSize": "24px", "lineHeight": "32px", "marginBottom": "20px", @@ -528,7 +528,7 @@ exports[`JoinJobsPage without jobs renders 1`] = ` style={ Object { "color": "rgba(17,18,20,1.00)", - "fontFamily": "EB Garamond, eb-garamond, Garamond, serif", + "fontFamily": "GT-Alpina, serif", "fontSize": "36px", "lineHeight": "40px", "marginBottom": "20px", @@ -548,7 +548,7 @@ exports[`JoinJobsPage without jobs renders 1`] = ` style={ Object { "color": "rgba(17,18,20,1.00)", - "fontFamily": "EB Garamond, eb-garamond, Garamond, serif", + "fontFamily": "Inter, sans-serif", "fontSize": "24px", "lineHeight": "32px", "marginBottom": "20px", diff --git a/src/_page-tests/__snapshots__/papers.test.tsx.snap b/src/_page-tests/__snapshots__/papers.test.tsx.snap index 1d2a375d..1202e624 100644 --- a/src/_page-tests/__snapshots__/papers.test.tsx.snap +++ b/src/_page-tests/__snapshots__/papers.test.tsx.snap @@ -32,6 +32,7 @@ exports[`Papers renders 1`] = ` -ms-flex-item-align: center; align-self: center; width: 100%; + background-color: #FBF6F1; } .emotion-2 { @@ -156,12 +157,12 @@ exports[`Papers renders 1`] = ` } .emotion-4 { - font-family: EB Garamond,eb-garamond,Garamond,serif; + font-family: GT-Alpina,serif; font-size: 48px; line-height: 56; text-rendering: geometricPrecision; color: #111214; - font-weight: normal; + font-weight: 200; margin: 0; margin-block-start: 0; margin-block-end: 0; @@ -259,14 +260,13 @@ exports[`Papers renders 1`] = ` } .emotion-8 { - font-weight: normal; + font-weight: 200; margin: 0; margin-block-start: 0; margin-block-end: 0; - font-family: Jost,futura-pt,futura,sans-serif; + font-family: GT-Alpina,serif; font-size: 24px; line-height: 28; - font-weight: 400; text-rendering: geometricPrecision; color: #111214; line-height: 28px; @@ -291,7 +291,7 @@ exports[`Papers renders 1`] = ` } .emotion-10 { - font-family: EB Garamond,eb-garamond,Garamond,serif; + font-family: Inter,sans-serif; font-size: 20px; line-height: 28; text-rendering: geometricPrecision; @@ -300,7 +300,7 @@ exports[`Papers renders 1`] = ` } .emotion-11 { - font-family: EB Garamond,eb-garamond,Garamond,serif; + font-family: Inter,sans-serif; font-size: 20px; line-height: 28; text-rendering: geometricPrecision; @@ -318,6 +318,17 @@ exports[`Papers renders 1`] = ` flex-direction: row; } +.emotion-13 { + box-sizing: border-box; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex-direction: column; + -ms-flex-direction: column; + flex-direction: column; +} + .emotion-14 { -webkit-box-pack: center; -ms-flex-pack: center; @@ -363,24 +374,32 @@ exports[`Papers renders 1`] = ` -webkit-box-align: center; -ms-flex-align: center; align-items: center; - color: #35D07F; + color: #000; font-size: 16px; font-weight: 500; margin-top: 10px; margin-right: 30px; } -.emotion-15:hover { - color: #4CDD91; +.emotion-16 { + margin-left: 8px; + background-color: #000; + padding: 9.5px 9.5px 9.5px 13.5px; + border-radius: 60px; } -.emotion-15:active { - color: #0FB972; +.emotion-16:hover { + background-color: #FCFF52; } -.emotion-16 { - padding-top: 0.15em; - padding-left: 0.4em; +.emotion-16:active { + background-color: #000; +} + +@media (max-width: 576px) { + .emotion-16 { + padding: 6px 6px 6px 8px; + } }
@@ -490,6 +512,9 @@ exports[`Papers renders 1`] = ` 阅读 @@ -564,6 +589,9 @@ exports[`Papers renders 1`] = ` Read paper @@ -638,6 +666,9 @@ exports[`Papers renders 1`] = ` Read paper @@ -712,6 +743,9 @@ exports[`Papers renders 1`] = ` Read paper @@ -753,6 +787,9 @@ exports[`Papers renders 1`] = ` Lee el informe @@ -827,6 +864,9 @@ exports[`Papers renders 1`] = ` Read paper @@ -901,6 +941,9 @@ exports[`Papers renders 1`] = ` Read paper @@ -942,6 +985,9 @@ exports[`Papers renders 1`] = ` Exec Summary @@ -1016,6 +1062,9 @@ exports[`Papers renders 1`] = ` Read paper @@ -1090,6 +1139,9 @@ exports[`Papers renders 1`] = ` Read paper diff --git a/src/_page-tests/__snapshots__/plumo.test.tsx.snap b/src/_page-tests/__snapshots__/plumo.test.tsx.snap index f0028110..e2f7b4c3 100644 --- a/src/_page-tests/__snapshots__/plumo.test.tsx.snap +++ b/src/_page-tests/__snapshots__/plumo.test.tsx.snap @@ -57,6 +57,17 @@ Array [ } } +.emotion-2 { + box-sizing: border-box; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex-direction: column; + -ms-flex-direction: column; + flex-direction: column; +} + .emotion-3 { -webkit-box-pack: center; -ms-flex-pack: center; @@ -91,27 +102,29 @@ Array [ text-decoration: none; min-width: 100px; padding: 7px 10px; - background-color: #35D07F; - border-color: #35D07F; - border-radius: 3px; + background-color: #FCFF52; + border: solid; + border-color: rgba(0, 0, 0, 0.2); + border-radius: 70px; border-width: 1px; + padding: 24px 64px; font-weight: 500; - color: #FFFFFF; + color: #000; } -.emotion-3:hover { - background-color: #4CDD91; - border-color: #4CDD91; - border-radius: 3px; +.emotion-3:hover, +.emotion-3:active { + background-color: #000; + border-color: rgba(0, 0, 0, 0.2); + border-radius: 70px; border-width: 1px; + color: #FFFFFF; } -.emotion-3:active { - background-color: #0FB972; - border-color: #0FB972; - outline-color: #0FB972; - border-radius: 3px; - border-width: 1px; +@media (max-width: 576px) { + .emotion-3 { + padding: 16px 24px; + } }
, - @keyframes animation-0 { - from { - -webkit-transform: translateX(-100%); - -moz-transform: translateX(-100%); - -ms-transform: translateX(-100%); - transform: translateX(-100%); - } - - to { - -webkit-transform: translateX(0%); - -moz-transform: translateX(0%); - -ms-transform: translateX(0%); - transform: translateX(0%); - } -} - -@keyframes animation-1 { - from { - opacity: 0; - } - - to { - opacity: 1; - } -} - -@keyframes animation-2 { - from { - -webkit-transform: translateX(0%); - -moz-transform: translateX(0%); - -ms-transform: translateX(0%); - transform: translateX(0%); - } - - to { - -webkit-transform: translateX(100%); - -moz-transform: translateX(100%); - -ms-transform: translateX(100%); - transform: translateX(100%); - } -} - -.emotion-0 { + .emotion-0 { box-sizing: border-box; display: -webkit-box; display: -webkit-flex; @@ -233,6 +204,7 @@ Array [ -ms-flex-item-align: center; align-self: center; width: 100%; + background-color: #FBF6F1; } .emotion-2 { @@ -346,12 +318,12 @@ Array [ } .emotion-4 { - font-family: EB Garamond,eb-garamond,Garamond,serif; + font-family: GT-Alpina,serif; font-size: 48px; line-height: 56; text-rendering: geometricPrecision; color: #111214; - font-weight: normal; + font-weight: 200; margin: 0; margin-block-start: 0; margin-block-end: 0; @@ -714,6 +686,13 @@ Array [ align-self: center; width: 100%; background-color: #111214; + background-color: #FCFF52; +} + +@media (max-width: 576px) { + .emotion-36 { + padding: 33px; + } } .emotion-37 { @@ -742,6 +721,7 @@ Array [ flex-wrap: wrap; -webkit-column-gap: 24px; column-gap: 24px; + gap: 0; } @media (min-width: 576px) and (max-width: 992px) { @@ -813,11 +793,12 @@ Array [ -ms-flex-direction: column; flex-direction: column; grid-column: span 1; + grid-row-start: 1; } @media (min-width: 576px) and (max-width: 992px) { .emotion-38 { - grid-column: span 3; + grid-column: span 1; } } @@ -830,24 +811,30 @@ Array [ -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; - margin-bottom: 20px; + margin-top: 80px; + margin-bottom: 48px; } -@media (max-width: 576px) { - .emotion-39 { - margin-bottom: 30px; - -webkit-box-pack: center; - -ms-flex-pack: center; - -webkit-justify-content: center; - justify-content: center; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; +.emotion-40 { + box-sizing: border-box; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex-direction: column; + -ms-flex-direction: column; + flex-direction: column; + grid-column: span 1; + grid-row-start: 2; +} + +@media (min-width: 576px) and (max-width: 992px) { + .emotion-40 { + grid-column: span 1; } } -.emotion-40 { +.emotion-41 { box-sizing: border-box; display: -webkit-box; display: -webkit-flex; @@ -856,24 +843,23 @@ Array [ -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; - padding-bottom: 20px; } @media (max-width: 576px) { - .emotion-40 { + .emotion-41 { -webkit-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; + -webkit-align-items: flex-start; + -webkit-box-align: flex-start; + -ms-flex-align: flex-start; + align-items: flex-start; } } -.emotion-41 { - font-weight: normal; +.emotion-42 { + font-weight: 200; margin: 0; margin-block-start: 0; margin-block-end: 0; @@ -883,6 +869,7 @@ Array [ text-rendering: geometricPrecision; color: #111214; line-height: 20px; + font-family: Inter,sans-serif; margin-bottom: 20px; max-width: 350px; text-align: left; @@ -890,19 +877,251 @@ Array [ } @media (max-width: 576px) { - .emotion-41 { - text-align: center; + .emotion-42 { + color: #FFFFFF; + } +} + +.emotion-43 { + width: 100%; + display: inline-block; +} + +.emotion-43 img { + display: none; +} + +.emotion-43 .grecaptcha-badge { + display: none; +} + +.emotion-43 #email-b4dd2ae2-68e9-4662-bfd3-b2860162a5aa { + box-sizing: border-box; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex-direction: column; + -ms-flex-direction: column; + flex-direction: column; + font-family: Inter,sans-serif; + font-size: 20px; + line-height: 28; + text-rendering: geometricPrecision; + color: #111214; + line-height: 28px; + -webkit-align-self: center; + -ms-flex-item-align: center; + align-self: center; + padding: 24px; + border-radius: 70px; + border-width: 1px; + border-style: solid; + width: 100%; + margin: 4px; + outline-width: 0; + background-color: transparent; +} + +.emotion-43 #email-b4dd2ae2-68e9-4662-bfd3-b2860162a5aa:focus { + border-color: #000; +} + +.emotion-43 #hsForm_b4dd2ae2-68e9-4662-bfd3-b2860162a5aa input[type=submit] { + display: none; +} + +.emotion-43 .celo-hbspt { + width: 100%; +} + +.emotion-43 .celo-hbspt * { + box-sizing: border-box; +} + +.emotion-43 .celo-hbspt fieldset { + border: 0; + padding: 0; + margin: 0; + max-width: 100%; +} + +@media (min-width: 576px) and (max-width: 992px) { + .emotion-43 .celo-hbspt fieldset { + margin-right: 0!important; + width: 100%!important; } } @media (max-width: 576px) { - .emotion-41 { - color: #FFFFFF; + .emotion-43 .celo-hbspt fieldset { + float: none; + width: 100%; } } -.emotion-43 { - color: inherit; +.emotion-43 .celo-hbspt fieldset.form-columns-2 .hs-form-field { + width: 50%; + float: left; +} + +@media (min-width: 576px) and (max-width: 992px) { + .emotion-43 .celo-hbspt fieldset.form-columns-2 .hs-form-field { + float: none; + width: 100%; + } +} + +@media (max-width: 576px) { + .emotion-43 .celo-hbspt fieldset.form-columns-2 .hs-form-field { + float: none; + width: 100%; + } +} + +.emotion-43 .celo-hbspt .field { + margin-bottom: 32px; +} + +.emotion-43 .celo-hbspt .input { + margin-right: 26px; +} + +.emotion-43 .celo-hbspt .hs-input { + box-sizing: border-box; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex-direction: column; + -ms-flex-direction: column; + flex-direction: column; + font-family: Inter,sans-serif; + font-size: 20px; + line-height: 28; + text-rendering: geometricPrecision; + color: #111214; + line-height: 28px; + -webkit-align-self: center; + -ms-flex-item-align: center; + align-self: center; + padding: 24px; + border-radius: 70px; + border-width: 1px; + border-style: solid; + width: 100%; + margin: 4px; + outline-width: 0; + background-color: transparent; + border-color: rgba(0, 0, 0, 0.2); +} + +.emotion-43 .celo-hbspt .hs-input:focus { + border-color: #000; +} + +.emotion-43 .hs-custom-style fieldset textarea { + box-sizing: border-box; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex-direction: column; + -ms-flex-direction: column; + flex-direction: column; + font-family: Inter,sans-serif; + font-size: 20px; + line-height: 28; + text-rendering: geometricPrecision; + color: #111214; + line-height: 28px; + -webkit-align-self: center; + -ms-flex-item-align: center; + align-self: center; + padding: 24px; + border-radius: 70px; + border-width: 1px; + border-style: solid; + width: 100%; + margin: 4px; + outline-width: 0; + background-color: transparent; +} + +.emotion-43 .hs-custom-style fieldset textarea:focus { + border-color: #000; +} + +.emotion-43 .celo-hbspt .contact-error { + border-color: #E70532; +} + +.emotion-43 .celo-hbspt .hs-error-msg { + color: #E70532; +} + +.emotion-43 input[type='checkbox'] { + -webkit-flex-basis: 0; + -ms-flex-preferred-size: 0; + flex-basis: 0; +} + +.emotion-43 input.hs-button { + font-family: Jost,futura-pt,futura,sans-serif; + font-size: 16px; + line-height: 16; + text-align: center; + text-rendering: geometricPrecision; + color: #111214; + cursor: pointer; + font-weight: 500; + line-height: 16px; + -webkit-text-decoration: none; + text-decoration: none; + background-color: #FCFF52; + color: #000; + padding: 24px 64px; + border-radius: 70px; + width: -webkit-fit-content; + width: -moz-fit-content; + width: fit-content; + border: 1px solid #CCCCCC; + margin-top: 32px; +} + +.emotion-43 input.hs-button:hover { + background-color: #000; + color: #FFFFFF; +} + +.emotion-43 input.hs-button:active { + background-color: #000; + color: #FFFFFF; +} + +.emotion-43 ul { + list-style-type: none; +} + +.emotion-43 .hs-error-msg { + color: #FF7F6D; +} + +.emotion-43 .legal-consent-container { + font-weight: 200; + margin: 0; + margin-block-start: 0; + margin-block-end: 0; + font-family: EB Garamond,eb-garamond,Garamond,serif; + font-size: 16px; + line-height: 20; + text-rendering: geometricPrecision; + color: #111214; + line-height: 20px; +} + +.emotion-43 a { + color: #1AB775; } .emotion-44 { @@ -915,6 +1134,7 @@ Array [ -ms-flex-direction: column; flex-direction: column; grid-column: span 2; + grid-row-start: 2; } @media (min-width: 576px) and (max-width: 992px) { @@ -923,6 +1143,12 @@ Array [ } } +@media (min-width: 576px) and (max-width: 992px) { + .emotion-44 { + grid-row-start: 3; + } +} + .emotion-45 { box-sizing: border-box; display: -webkit-box; @@ -962,17 +1188,9 @@ Array [ } .emotion-47 { - font-weight: normal; - margin: 0; - margin-block-start: 0; - margin-block-end: 0; - font-family: Jost,futura-pt,futura,sans-serif; - font-size: 16px; - line-height: 18; - font-weight: 500; - text-rendering: geometricPrecision; - color: #111214; - line-height: 18px; + font-family: Inter,sans-serif; + margin-top: 0; + font-weight: 200; margin-bottom: 20px; color: #FFFFFF; } @@ -983,23 +1201,31 @@ Array [ } } -.emotion-48 { +.emotion-49 { margin-top: 8px; margin-bottom: 8px; } -.emotion-49 { +.emotion-50 { + box-sizing: border-box; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex-direction: column; + -ms-flex-direction: column; + flex-direction: column; display: inline; } -.emotion-50 { +.emotion-51 { color: inherit; cursor: pointer; text-decoration-style: solid; text-decoration-line: underline; display: inline; opacity: 1; - font-weight: normal; + font-weight: 200; margin: 0; margin-block-start: 0; margin-block-end: 0; @@ -1009,6 +1235,11 @@ Array [ text-rendering: geometricPrecision; color: #111214; line-height: 20px; + font-family: Inter,sans-serif; + font-weight: 700; + border: 1px solid rgba(0, 0, 0, 0.2); + padding: 10.5px 16px; + border-radius: 70px; text-decoration-line: none; display: -webkit-inline-box; display: -webkit-inline-flex; @@ -1021,21 +1252,21 @@ Array [ color: #FFFFFF; } -.emotion-50:hover { +.emotion-51:hover { opacity: 0.75; } -.emotion-50:active { +.emotion-51:active { opacity: 1; } -.emotion-72 { +.emotion-61 { padding-left: 25px; padding-right: 25px; } @media (max-width: 576px) { - .emotion-72 { + .emotion-61 { margin-top: 35px; width: 50%; padding-left: 10px; @@ -1043,14 +1274,14 @@ Array [ } } -.emotion-118 { +.emotion-97 { padding-left: 25px; padding-right: 25px; padding-end: 0; } @media (max-width: 576px) { - .emotion-118 { + .emotion-97 { margin-top: 35px; width: 50%; padding-left: 10px; @@ -1058,11 +1289,7 @@ Array [ } } -.emotion-123 { - padding-right: 8px; -} - -.emotion-165 { +.emotion-109 { box-sizing: border-box; display: -webkit-box; display: -webkit-flex; @@ -1071,9 +1298,31 @@ Array [ -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; - -webkit-align-self: center; - -ms-flex-item-align: center; - align-self: center; + overflow: hidden; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + -webkit-align-self: center; + -ms-flex-item-align: center; + align-self: center; + width: 100%; + background-color: #111214; + background-color: #FCFF52; +} + +.emotion-110 { + box-sizing: border-box; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex-direction: column; + -ms-flex-direction: column; + flex-direction: column; + -webkit-align-self: center; + -ms-flex-item-align: center; + align-self: center; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; @@ -1091,7 +1340,7 @@ Array [ } @media (min-width: 576px) and (max-width: 992px) { - .emotion-165 { + .emotion-110 { display: grid; grid-auto-rows: auto; -webkit-align-self: center; @@ -1108,7 +1357,7 @@ Array [ } @media (min-width: 992px) { - .emotion-165 { + .emotion-110 { display: grid; grid-auto-rows: auto; -webkit-align-self: center; @@ -1120,39 +1369,39 @@ Array [ } @media (min-width: 992px) { - .emotion-165 { + .emotion-110 { grid-template-columns: 1fr; } } @media (min-width: 576px) and (max-width: 992px) { - .emotion-165 { + .emotion-110 { grid-template-columns: 1fr; } } @media (min-width: 992px) { - .emotion-165 { + .emotion-110 { margin-top: 60px; margin-bottom: 60px; } } @media (min-width: 576px) and (max-width: 992px) { - .emotion-165 { + .emotion-110 { margin-top: 40px; margin-bottom: 40px; } } @media (max-width: 576px) { - .emotion-165 { + .emotion-110 { margin-top: 30px; margin-bottom: 30px; } } -.emotion-166 { +.emotion-111 { box-sizing: border-box; display: -webkit-box; display: -webkit-flex; @@ -1167,10 +1416,15 @@ Array [ -webkit-box-pack: justify; -webkit-justify-content: space-between; justify-content: space-between; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + border-bottom: 1px solid rgba(0, 0, 0, 0.2); } @media (max-width: 576px) { - .emotion-166 { + .emotion-111 { -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; @@ -1182,108 +1436,70 @@ Array [ -webkit-box-align: center; -ms-flex-align: center; align-items: center; + border-bottom: none; } } -.emotion-167 { +.emotion-112 { box-sizing: border-box; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; + -webkit-flex-direction: column; + -ms-flex-direction: column; + flex-direction: column; -webkit-flex-direction: row; -ms-flex-direction: row; flex-direction: row; - margin-bottom: 20px; - overflow: hidden; } -@media (max-width: 576px) { - .emotion-167 { - -webkit-box-pack: center; - -ms-flex-pack: center; - -webkit-justify-content: center; - justify-content: center; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - } -} - -.emotion-168 { - width: 20px; - height: 20px; - z-index: 10; +.emotion-112>div:nth-child(-n+3) { + border-right: none; } @media (max-width: 576px) { - .emotion-168 { - margin-bottom: 8px; + .emotion-112 { + margin-bottom: 40px; } } -.emotion-169 { - margin-left: 10px; - margin-right: 10px; - z-index: 10; - color: #FFFFFF; +.emotion-113 { + border: 1px solid rgba(0, 0, 0, 0.2); + padding: 16px; } @media (max-width: 576px) { - .emotion-169 { - display: none; + .emotion-113 { + padding: 16px; } } -@media (max-width: 576px) { - .emotion-169 { - color: #FFFFFF; +@media (min-width: 576px) { + .emotion-113 { + border-bottom: none; } } -.emotion-170 { - box-sizing: border-box; - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-flex-direction: column; - -ms-flex-direction: column; - flex-direction: column; - position: relative; +.emotion-115 { + color: inherit; + cursor: pointer; + text-decoration-style: solid; + text-decoration-line: underline; + display: inline; + opacity: 1; } -.emotion-171 { - box-sizing: border-box; - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-flex-direction: column; - -ms-flex-direction: column; - flex-direction: column; - background-color: #FFFFFF; - position: absolute; - height: 100%; - width: 101%; - -webkit-animation-duration: 250ms; - animation-duration: 250ms; - -webkit-animation-iteration-count: 1; - animation-iteration-count: 1; - -webkit-animation-timing-function: linear; - animation-timing-function: linear; - -webkit-animation-fill-mode: both; - animation-fill-mode: both; - background-color: #111214; - -webkit-animation-delay: 3500ms; - animation-delay: 3500ms; - -webkit-animation-name: animation-0; - animation-name: animation-0; +.emotion-115:hover { + opacity: 0.75; } -.emotion-172 { - font-weight: normal; +.emotion-115:active { + opacity: 1; +} + +.emotion-125 { + font-weight: 200; margin: 0; margin-block-start: 0; margin-block-end: 0; @@ -1293,31 +1509,24 @@ Array [ text-rendering: geometricPrecision; color: #111214; line-height: 20px; + font-family: Inter,sans-serif; + z-index: 10; color: #FFFFFF; - font-style: italic; - -webkit-animation-fill-mode: both; - animation-fill-mode: both; - -webkit-animation-iteration-count: 1; - animation-iteration-count: 1; - -webkit-animation-duration: 750ms; - animation-duration: 750ms; - -webkit-animation-name: animation-1; - animation-name: animation-1; } @media (max-width: 576px) { - .emotion-172 { - color: #FFFFFF; + .emotion-125 { + margin-bottom: 17px; } } @media (max-width: 576px) { - .emotion-172 { - text-align: center; + .emotion-125 { + color: #FFFFFF; } } -.emotion-173 { +.emotion-126 { box-sizing: border-box; display: -webkit-box; display: -webkit-flex; @@ -1326,25 +1535,13 @@ Array [ -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; - background-color: #FFFFFF; - position: absolute; - height: 100%; - width: 101%; - -webkit-animation-duration: 250ms; - animation-duration: 250ms; - -webkit-animation-iteration-count: 1; - animation-iteration-count: 1; - -webkit-animation-timing-function: linear; - animation-timing-function: linear; - -webkit-animation-fill-mode: both; - animation-fill-mode: both; - background-color: #111214; - -webkit-animation-name: animation-2; - animation-name: animation-2; + -webkit-flex-direction: row; + -ms-flex-direction: row; + flex-direction: row; } -.emotion-174 { - font-weight: normal; +.emotion-127 { + font-weight: 200; margin: 0; margin-block-start: 0; margin-block-end: 0; @@ -1354,13 +1551,107 @@ Array [ text-rendering: geometricPrecision; color: #111214; line-height: 20px; - z-index: 10; - color: #FFFFFF; +} + +.emotion-127:first-child { + margin-right: 20px; +} + +.emotion-127 a { + text-decoration-line: none; +} + +.emotion-129 { + color: inherit; + cursor: pointer; + text-decoration-style: solid; + text-decoration-line: underline; + display: inline; + opacity: 1; + font-family: Inter,sans-serif; +} + +.emotion-129:hover { + opacity: 0.75; +} + +.emotion-129:active { + opacity: 1; +} + +.emotion-133 { + width: 86px; + height: 86px; + background-color: #FFFFFF; + border: none; + position: absolute; + transition-property: all; + transition-duration: 400ms; + top: 0; + left: 0; } @media (max-width: 576px) { - .emotion-174 { - color: #FFFFFF; + .emotion-133 { + background-color: #FFFFFF; + } +} + +@media (max-width: 576px) { + .emotion-133 { + width: 86px; + height: 86px; + background-color: #FFFFFF; + border: none; + position: absolute; + transition-property: all; + transition-duration: 400ms; + top: 0; + left: 0; + } + + @media (max-width: 576px) { + .emotion-133 { + background-color: #FFFFFF; + } + } +} + +.emotion-134 { + width: 86px; + height: 86px; + background-color: #FFFFFF; + border: none; + position: absolute; + transition-property: all; + transition-duration: 400ms; + top: 0; + left: 172px; +} + +@media (max-width: 576px) { + .emotion-134 { + background-color: #FFFFFF; + } +} + +@media (max-width: 576px) { + .emotion-134 { + width: 86px; + height: 86px; + background-color: #FFFFFF; + border: none; + position: absolute; + transition-property: all; + transition-duration: 400ms; + top: 0; + left: 172px; + } + + @media (max-width: 576px) { + .emotion-134 { + background-color: #FFFFFF; + } } } @@ -1493,7 +1784,7 @@ Array [ style={ Object { "color": "rgba(255,255,255,1.00)", - "fontFamily": "EB Garamond, eb-garamond, Garamond, serif", + "fontFamily": "Inter, sans-serif", "fontSize": "20px", "lineHeight": "28px", "textRendering": "geometricPrecision", @@ -1582,7 +1873,7 @@ Array [ style={ Object { "color": "rgba(255,255,255,1.00)", - "fontFamily": "EB Garamond, eb-garamond, Garamond, serif", + "fontFamily": "Inter, sans-serif", "fontSize": "20px", "lineHeight": "28px", "textRendering": "geometricPrecision", @@ -1685,7 +1976,7 @@ Array [ style={ Object { "color": "rgba(255,255,255,1.00)", - "fontFamily": "EB Garamond, eb-garamond, Garamond, serif", + "fontFamily": "Inter, sans-serif", "fontSize": "20px", "lineHeight": "28px", "overflowX": "hidden", @@ -1761,7 +2052,7 @@ Array [ "backgroundColor": "rgba(17,18,20,1.00)", "color": "rgba(26,183,117,1.00)", "cursor": "pointer", - "fontFamily": "EB Garamond, eb-garamond, Garamond, serif", + "fontFamily": "Inter, sans-serif", "fontSize": "20px", "lineHeight": "28px", "overflowX": "hidden", @@ -1831,44 +2122,36 @@ Array [ > - -
+
+

- Nothing herein constitutes an offer to sell, or the solicitation of an offer to buy, any securities or tokens. -

-

- Read more in Celo - - Terms of Service - + World-changing ideas in your inbox

+
- Celo + Celo for
- - Home - + + Developers + +
- -
- - About - + + Founders + +
- -
- - Careers - + + Community + +
- -
- - Validators - + + Validators + +
+ +
+
+ Tech +
- - Developers - + + Docs + +
-
-
- - Alliance - + + Security Audits + +
- -
- - Community - + + Reserve + +
- -
- - Annual Report - + + Government + +
- Technology + Company
- - Docs - + + Vision + +
- -
- - Security Audits - + + Ecosystem + +
- -
- - Reserve - + + Careers + +
- -
- - White Papers - + + Press + +
- -
-
- - Government - -
-
- -
-
- Resources -
-
-
- - Brand Policy - -
-
-
-
- - Press - -
-
-
-
- - Events - -
-
-
-
- - EventKit - -
-
-
- - BrandKit - -
-
-
-
- - MerchantKit - -
-
-
-
- - GrantKit - -
-
-
-
- - PilotKit - + + White Papers + +
-
-
- - Ecosystem Fund - + + Events + +
- Social + Kits
- - - - - Medium - - - - - Blog - -
-
-
-
- - - - - Github - - - - - GitHub - -
-
-
-
- - - - - Twitter - - - - - Twitter - -
-
-
-
- - - - - Forum - - - - - Forum - + BrandKit + +
- -
- - - - - Chat - - - - - Chat - -
-
-
-
- - - - - YouTube - - - - - YouTube - + PilotKit + +
- -
- - - - - Instagram - - - - - Instagram - + GrantKit + +
+ + + + + +
+
+
+
+
- + + Chat + + + +
+
+
- + + Medium + + + +
+
+
- + + Twitter + + + +
+
+
- + + Github + + + +
-
-
-
-
-
-
+ + © 2022 Celo Inc. +
- - - | -
- - " - Change the Story - " - + + Privacy Policy + +
+
+
+ className="emotion-50" + > + + Terms of Use + +
- - The Celo Foundation, © Celo 2022 -
+
+
, ] `; diff --git a/src/_page-tests/__snapshots__/privacy.test.tsx.snap b/src/_page-tests/__snapshots__/privacy.test.tsx.snap index 7e653081..b8ea9896 100644 --- a/src/_page-tests/__snapshots__/privacy.test.tsx.snap +++ b/src/_page-tests/__snapshots__/privacy.test.tsx.snap @@ -30,6 +30,7 @@ exports[`Privacy renders 1`] = ` -ms-flex-item-align: center; align-self: center; width: 100%; + background-color: #FBF6F1; } .emotion-2 { @@ -164,12 +165,12 @@ exports[`Privacy renders 1`] = ` } .emotion-5 { - font-family: EB Garamond,eb-garamond,Garamond,serif; + font-family: GT-Alpina,serif; font-size: 48px; line-height: 56; text-rendering: geometricPrecision; color: #111214; - font-weight: normal; + font-weight: 200; margin: 0; margin-block-start: 0; margin-block-end: 0; @@ -246,11 +247,11 @@ exports[`Privacy renders 1`] = ` } .emotion-9 { - font-weight: normal; + font-weight: 200; margin: 0; margin-block-start: 0; margin-block-end: 0; - font-family: Jost,futura-pt,futura,sans-serif; + font-family: GT-Alpina,serif; font-size: 16px; line-height: 18; font-weight: 500; @@ -260,7 +261,7 @@ exports[`Privacy renders 1`] = ` } .emotion-11 { - font-family: EB Garamond,eb-garamond,Garamond,serif; + font-family: Inter,sans-serif; font-size: 20px; line-height: 28; text-rendering: geometricPrecision; @@ -342,21 +343,20 @@ exports[`Privacy renders 1`] = ` } .emotion-22 { - font-weight: normal; + font-weight: 200; margin: 0; margin-block-start: 0; margin-block-end: 0; - font-family: Jost,futura-pt,futura,sans-serif; + font-family: GT-Alpina,serif; font-size: 24px; line-height: 28; - font-weight: 400; text-rendering: geometricPrecision; color: #111214; line-height: 28px; } .emotion-24 { - font-family: EB Garamond,eb-garamond,Garamond,serif; + font-family: Inter,sans-serif; font-size: 20px; line-height: 28; text-rendering: geometricPrecision; @@ -365,7 +365,7 @@ exports[`Privacy renders 1`] = ` } .emotion-49 { - font-family: EB Garamond,eb-garamond,Garamond,serif; + font-family: Inter,sans-serif; font-size: 20px; line-height: 28; text-rendering: geometricPrecision; @@ -400,7 +400,7 @@ exports[`Privacy renders 1`] = ` } .emotion-96 { - font-weight: normal; + font-weight: 200; margin: 0; margin-block-start: 0; margin-block-end: 0; @@ -427,7 +427,7 @@ exports[`Privacy renders 1`] = ` } .emotion-100 { - font-weight: normal; + font-weight: 200; margin: 0; margin-block-start: 0; margin-block-end: 0; @@ -516,7 +516,7 @@ exports[`Privacy renders 1`] = ` Object { "color": "rgba(17,18,20,1.00)", "display": "list-item", - "fontFamily": "EB Garamond, eb-garamond, Garamond, serif", + "fontFamily": "Inter, sans-serif", "fontSize": "20px", "lineHeight": "28px", "listStyle": "inherit", @@ -535,7 +535,7 @@ exports[`Privacy renders 1`] = ` Object { "color": "rgba(17,18,20,1.00)", "display": "list-item", - "fontFamily": "EB Garamond, eb-garamond, Garamond, serif", + "fontFamily": "Inter, sans-serif", "fontSize": "20px", "lineHeight": "28px", "listStyle": "inherit", @@ -683,7 +683,7 @@ exports[`Privacy renders 1`] = ` Object { "color": "rgba(17,18,20,1.00)", "display": "list-item", - "fontFamily": "EB Garamond, eb-garamond, Garamond, serif", + "fontFamily": "Inter, sans-serif", "fontSize": "20px", "lineHeight": "28px", "listStyle": "inherit", @@ -707,7 +707,7 @@ exports[`Privacy renders 1`] = ` Object { "color": "rgba(17,18,20,1.00)", "display": "list-item", - "fontFamily": "EB Garamond, eb-garamond, Garamond, serif", + "fontFamily": "Inter, sans-serif", "fontSize": "20px", "lineHeight": "28px", "listStyle": "inherit", @@ -732,7 +732,7 @@ exports[`Privacy renders 1`] = ` Object { "color": "rgba(17,18,20,1.00)", "display": "list-item", - "fontFamily": "EB Garamond, eb-garamond, Garamond, serif", + "fontFamily": "Inter, sans-serif", "fontSize": "20px", "lineHeight": "28px", "listStyle": "inherit", @@ -759,7 +759,7 @@ exports[`Privacy renders 1`] = ` Object { "color": "rgba(17,18,20,1.00)", "display": "list-item", - "fontFamily": "EB Garamond, eb-garamond, Garamond, serif", + "fontFamily": "Inter, sans-serif", "fontSize": "20px", "lineHeight": "28px", "listStyle": "inherit", @@ -853,7 +853,7 @@ exports[`Privacy renders 1`] = ` Object { "color": "rgba(17,18,20,1.00)", "display": "list-item", - "fontFamily": "EB Garamond, eb-garamond, Garamond, serif", + "fontFamily": "Inter, sans-serif", "fontSize": "20px", "lineHeight": "28px", "listStyle": "inherit", @@ -872,7 +872,7 @@ exports[`Privacy renders 1`] = ` Object { "color": "rgba(17,18,20,1.00)", "display": "list-item", - "fontFamily": "EB Garamond, eb-garamond, Garamond, serif", + "fontFamily": "Inter, sans-serif", "fontSize": "20px", "lineHeight": "28px", "listStyle": "inherit", @@ -891,7 +891,7 @@ exports[`Privacy renders 1`] = ` Object { "color": "rgba(17,18,20,1.00)", "display": "list-item", - "fontFamily": "EB Garamond, eb-garamond, Garamond, serif", + "fontFamily": "Inter, sans-serif", "fontSize": "20px", "lineHeight": "28px", "listStyle": "inherit", @@ -910,7 +910,7 @@ exports[`Privacy renders 1`] = ` Object { "color": "rgba(17,18,20,1.00)", "display": "list-item", - "fontFamily": "EB Garamond, eb-garamond, Garamond, serif", + "fontFamily": "Inter, sans-serif", "fontSize": "20px", "lineHeight": "28px", "listStyle": "inherit", @@ -929,7 +929,7 @@ exports[`Privacy renders 1`] = ` Object { "color": "rgba(17,18,20,1.00)", "display": "list-item", - "fontFamily": "EB Garamond, eb-garamond, Garamond, serif", + "fontFamily": "Inter, sans-serif", "fontSize": "20px", "lineHeight": "28px", "listStyle": "inherit", @@ -948,7 +948,7 @@ exports[`Privacy renders 1`] = ` Object { "color": "rgba(17,18,20,1.00)", "display": "list-item", - "fontFamily": "EB Garamond, eb-garamond, Garamond, serif", + "fontFamily": "Inter, sans-serif", "fontSize": "20px", "lineHeight": "28px", "listStyle": "inherit", @@ -1117,7 +1117,7 @@ exports[`Privacy renders 1`] = ` Object { "color": "rgba(17,18,20,1.00)", "display": "list-item", - "fontFamily": "EB Garamond, eb-garamond, Garamond, serif", + "fontFamily": "Inter, sans-serif", "fontSize": "20px", "lineHeight": "28px", "listStyle": "inherit", @@ -1136,7 +1136,7 @@ exports[`Privacy renders 1`] = ` Object { "color": "rgba(17,18,20,1.00)", "display": "list-item", - "fontFamily": "EB Garamond, eb-garamond, Garamond, serif", + "fontFamily": "Inter, sans-serif", "fontSize": "20px", "lineHeight": "28px", "listStyle": "inherit", @@ -1155,7 +1155,7 @@ exports[`Privacy renders 1`] = ` Object { "color": "rgba(17,18,20,1.00)", "display": "list-item", - "fontFamily": "EB Garamond, eb-garamond, Garamond, serif", + "fontFamily": "Inter, sans-serif", "fontSize": "20px", "lineHeight": "28px", "listStyle": "inherit", diff --git a/src/_page-tests/__snapshots__/terms.test.tsx.snap b/src/_page-tests/__snapshots__/terms.test.tsx.snap index 705b3b1f..78445f14 100644 --- a/src/_page-tests/__snapshots__/terms.test.tsx.snap +++ b/src/_page-tests/__snapshots__/terms.test.tsx.snap @@ -32,6 +32,7 @@ exports[`Terms renders 1`] = ` -ms-flex-item-align: center; align-self: center; width: 100%; + background-color: #FBF6F1; } .emotion-2 { @@ -157,12 +158,12 @@ exports[`Terms renders 1`] = ` .emotion-4 { text-align: center; - font-family: EB Garamond,eb-garamond,Garamond,serif; + font-family: GT-Alpina,serif; font-size: 48px; line-height: 56; text-rendering: geometricPrecision; color: #111214; - font-weight: normal; + font-weight: 200; margin: 0; margin-block-start: 0; margin-block-end: 0; @@ -259,14 +260,13 @@ exports[`Terms renders 1`] = ` } .emotion-8 { - font-weight: normal; + font-weight: 200; margin: 0; margin-block-start: 0; margin-block-end: 0; - font-family: Jost,futura-pt,futura,sans-serif; + font-family: GT-Alpina,serif; font-size: 24px; line-height: 28; - font-weight: 400; text-rendering: geometricPrecision; color: #111214; line-height: 28px; @@ -291,7 +291,7 @@ exports[`Terms renders 1`] = ` } .emotion-10 { - font-family: EB Garamond,eb-garamond,Garamond,serif; + font-family: Inter,sans-serif; font-size: 20px; line-height: 28; text-rendering: geometricPrecision; @@ -306,6 +306,17 @@ exports[`Terms renders 1`] = ` justify-content: space-between; } +.emotion-12 { + box-sizing: border-box; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex-direction: column; + -ms-flex-direction: column; + flex-direction: column; +} + .emotion-13 { -webkit-box-pack: center; -ms-flex-pack: center; @@ -351,28 +362,36 @@ exports[`Terms renders 1`] = ` -webkit-box-align: center; -ms-flex-align: center; align-items: center; - color: #35D07F; + color: #000; font-size: 16px; font-weight: 500; margin-top: 10px; margin-right: 30px; } -.emotion-14:hover { - color: #4CDD91; +.emotion-15 { + margin-left: 8px; + background-color: #000; + padding: 9.5px 9.5px 9.5px 13.5px; + border-radius: 60px; } -.emotion-14:active { - color: #0FB972; +.emotion-15:hover { + background-color: #FCFF52; } -.emotion-15 { - padding-top: 0.15em; - padding-left: 0.4em; +.emotion-15:active { + background-color: #000; +} + +@media (max-width: 576px) { + .emotion-15 { + padding: 6px 6px 6px 8px; + } } .emotion-30 { - font-family: EB Garamond,eb-garamond,Garamond,serif; + font-family: Inter,sans-serif; font-size: 20px; line-height: 28; text-rendering: geometricPrecision; @@ -442,6 +461,9 @@ exports[`Terms renders 1`] = ` User Agreement @@ -483,6 +505,9 @@ exports[`Terms renders 1`] = ` Privacy Policy @@ -524,6 +549,9 @@ exports[`Terms renders 1`] = ` Disclaimer @@ -595,6 +623,9 @@ exports[`Terms renders 1`] = ` Privacy Documentation diff --git a/src/_page-tests/__snapshots__/user-agreement.test.tsx.snap b/src/_page-tests/__snapshots__/user-agreement.test.tsx.snap index 93c1538c..bd838428 100644 --- a/src/_page-tests/__snapshots__/user-agreement.test.tsx.snap +++ b/src/_page-tests/__snapshots__/user-agreement.test.tsx.snap @@ -24,6 +24,7 @@ exports[`UserAgreement renders 1`] = ` -ms-flex-item-align: center; align-self: center; width: 100%; + background-color: #FBF6F1; } .emotion-2 { @@ -166,12 +167,12 @@ exports[`UserAgreement renders 1`] = ` } .emotion-5 { - font-family: EB Garamond,eb-garamond,Garamond,serif; + font-family: GT-Alpina,serif; font-size: 48px; line-height: 56; text-rendering: geometricPrecision; color: #111214; - font-weight: normal; + font-weight: 200; margin: 0; margin-block-start: 0; margin-block-end: 0; @@ -249,11 +250,11 @@ exports[`UserAgreement renders 1`] = ` } .emotion-9 { - font-weight: normal; + font-weight: 200; margin: 0; margin-block-start: 0; margin-block-end: 0; - font-family: Jost,futura-pt,futura,sans-serif; + font-family: GT-Alpina,serif; font-size: 16px; line-height: 18; font-weight: 500; @@ -281,6 +282,14 @@ exports[`UserAgreement renders 1`] = ` } .emotion-13 { + box-sizing: border-box; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex-direction: column; + -ms-flex-direction: column; + flex-direction: column; display: inline; } @@ -348,7 +357,7 @@ exports[`UserAgreement renders 1`] = ` style={ Object { "color": "rgba(17,18,20,1.00)", - "fontFamily": "EB Garamond, eb-garamond, Garamond, serif", + "fontFamily": "Inter, sans-serif", "fontSize": "20px", "lineHeight": "28px", "marginBottom": "10px", @@ -367,7 +376,7 @@ exports[`UserAgreement renders 1`] = ` style={ Object { "color": "rgba(17,18,20,1.00)", - "fontFamily": "EB Garamond, eb-garamond, Garamond, serif", + "fontFamily": "Inter, sans-serif", "fontSize": "20px", "lineHeight": "28px", "marginBottom": "10px", diff --git a/src/_page-tests/developers/__snapshots__/Index.test.tsx.snap b/src/_page-tests/developers/__snapshots__/Index.test.tsx.snap index 464fa00e..3780a919 100644 --- a/src/_page-tests/developers/__snapshots__/Index.test.tsx.snap +++ b/src/_page-tests/developers/__snapshots__/Index.test.tsx.snap @@ -30,6 +30,7 @@ exports[`DevelopersPage renders 1`] = ` -ms-flex-item-align: center; align-self: center; width: 100%; + background-color: #FBF6F1; } .emotion-2 { @@ -148,14 +149,13 @@ exports[`DevelopersPage renders 1`] = ` } .emotion-5 { - font-weight: normal; + font-weight: 200; margin: 0; margin-block-start: 0; margin-block-end: 0; - font-family: Jost,futura-pt,futura,sans-serif; + font-family: GT-Alpina,serif; font-size: 24px; line-height: 28; - font-weight: 400; text-rendering: geometricPrecision; color: #111214; line-height: 28px; @@ -164,7 +164,7 @@ exports[`DevelopersPage renders 1`] = ` } .emotion-6 { - font-family: EB Garamond,eb-garamond,Garamond,serif; + font-family: Inter,sans-serif; font-size: 20px; line-height: 28; text-rendering: geometricPrecision; @@ -312,7 +312,7 @@ exports[`DevelopersPage renders 1`] = ` style={ Object { "color": "rgba(255,255,255,1.00)", - "fontFamily": "EB Garamond, eb-garamond, Garamond, serif", + "fontFamily": "GT-Alpina, serif", "fontSize": "28px", "lineHeight": "32px", "textRendering": "geometricPrecision", @@ -330,7 +330,7 @@ exports[`DevelopersPage renders 1`] = ` style={ Object { "color": "rgba(255,255,255,1.00)", - "fontFamily": "Jost, futura-pt, futura, sans-serif", + "fontFamily": "GT-Alpina, serif", "fontSize": "24px", "lineHeight": "32px", "marginBottom": "20px", @@ -348,7 +348,7 @@ exports[`DevelopersPage renders 1`] = ` style={ Object { "color": "rgba(255,255,255,1.00)", - "fontFamily": "EB Garamond, eb-garamond, Garamond, serif", + "fontFamily": "Inter, sans-serif", "fontSize": "20px", "lineHeight": "28px", "marginBottom": "20px", @@ -431,7 +431,7 @@ exports[`DevelopersPage renders 1`] = ` Object { "color": "rgba(255,255,255,1.00)", "cursor": "pointer", - "fontFamily": "Jost, futura-pt, futura, sans-serif", + "fontFamily": "GT-Alpina, serif", "fontSize": "16px", "fontWeight": "500", "lineHeight": "18px", @@ -448,7 +448,7 @@ exports[`DevelopersPage renders 1`] = ` style={ Object { "color": "rgba(255,255,255,1.00)", - "fontFamily": "EB Garamond, eb-garamond, Garamond, serif", + "fontFamily": "Inter, sans-serif", "fontSize": "20px", "lineHeight": "28px", "textRendering": "geometricPrecision", @@ -477,7 +477,7 @@ exports[`DevelopersPage renders 1`] = ` Object { "color": "rgba(255,255,255,1.00)", "display": "list-item", - "fontFamily": "EB Garamond, eb-garamond, Garamond, serif", + "fontFamily": "Inter, sans-serif", "fontSize": "20px", "lineHeight": "28px", "listStyle": "inherit", @@ -496,7 +496,7 @@ exports[`DevelopersPage renders 1`] = ` Object { "color": "rgba(255,255,255,1.00)", "display": "list-item", - "fontFamily": "EB Garamond, eb-garamond, Garamond, serif", + "fontFamily": "Inter, sans-serif", "fontSize": "20px", "lineHeight": "28px", "listStyle": "inherit", @@ -515,7 +515,7 @@ exports[`DevelopersPage renders 1`] = ` Object { "color": "rgba(255,255,255,1.00)", "display": "list-item", - "fontFamily": "EB Garamond, eb-garamond, Garamond, serif", + "fontFamily": "Inter, sans-serif", "fontSize": "20px", "lineHeight": "28px", "listStyle": "inherit", @@ -534,7 +534,7 @@ exports[`DevelopersPage renders 1`] = ` Object { "color": "rgba(255,255,255,1.00)", "display": "list-item", - "fontFamily": "EB Garamond, eb-garamond, Garamond, serif", + "fontFamily": "Inter, sans-serif", "fontSize": "20px", "lineHeight": "28px", "listStyle": "inherit", @@ -553,7 +553,7 @@ exports[`DevelopersPage renders 1`] = ` Object { "color": "rgba(255,255,255,1.00)", "display": "list-item", - "fontFamily": "EB Garamond, eb-garamond, Garamond, serif", + "fontFamily": "Inter, sans-serif", "fontSize": "20px", "lineHeight": "28px", "listStyle": "inherit", @@ -866,7 +866,7 @@ exports[`DevelopersPage renders 1`] = ` Object { "color": "rgba(255,255,255,1.00)", "cursor": "pointer", - "fontFamily": "Jost, futura-pt, futura, sans-serif", + "fontFamily": "GT-Alpina, serif", "fontSize": "16px", "fontWeight": "500", "lineHeight": "18px", @@ -883,7 +883,7 @@ exports[`DevelopersPage renders 1`] = ` style={ Object { "color": "rgba(255,255,255,1.00)", - "fontFamily": "EB Garamond, eb-garamond, Garamond, serif", + "fontFamily": "Inter, sans-serif", "fontSize": "20px", "lineHeight": "28px", "textRendering": "geometricPrecision", @@ -912,7 +912,7 @@ exports[`DevelopersPage renders 1`] = ` Object { "color": "rgba(255,255,255,1.00)", "display": "list-item", - "fontFamily": "EB Garamond, eb-garamond, Garamond, serif", + "fontFamily": "Inter, sans-serif", "fontSize": "20px", "lineHeight": "28px", "listStyle": "inherit", @@ -931,7 +931,7 @@ exports[`DevelopersPage renders 1`] = ` Object { "color": "rgba(255,255,255,1.00)", "display": "list-item", - "fontFamily": "EB Garamond, eb-garamond, Garamond, serif", + "fontFamily": "Inter, sans-serif", "fontSize": "20px", "lineHeight": "28px", "listStyle": "inherit", @@ -950,7 +950,7 @@ exports[`DevelopersPage renders 1`] = ` Object { "color": "rgba(255,255,255,1.00)", "display": "list-item", - "fontFamily": "EB Garamond, eb-garamond, Garamond, serif", + "fontFamily": "Inter, sans-serif", "fontSize": "20px", "lineHeight": "28px", "listStyle": "inherit", @@ -1181,7 +1181,7 @@ exports[`DevelopersPage renders 1`] = ` Object { "color": "rgba(255,255,255,1.00)", "cursor": "pointer", - "fontFamily": "Jost, futura-pt, futura, sans-serif", + "fontFamily": "GT-Alpina, serif", "fontSize": "16px", "fontWeight": "500", "lineHeight": "18px", @@ -1198,7 +1198,7 @@ exports[`DevelopersPage renders 1`] = ` style={ Object { "color": "rgba(255,255,255,1.00)", - "fontFamily": "EB Garamond, eb-garamond, Garamond, serif", + "fontFamily": "Inter, sans-serif", "fontSize": "20px", "lineHeight": "28px", "textRendering": "geometricPrecision", @@ -1227,7 +1227,7 @@ exports[`DevelopersPage renders 1`] = ` Object { "color": "rgba(255,255,255,1.00)", "display": "list-item", - "fontFamily": "EB Garamond, eb-garamond, Garamond, serif", + "fontFamily": "Inter, sans-serif", "fontSize": "20px", "lineHeight": "28px", "listStyle": "inherit", @@ -1246,7 +1246,7 @@ exports[`DevelopersPage renders 1`] = ` Object { "color": "rgba(255,255,255,1.00)", "display": "list-item", - "fontFamily": "EB Garamond, eb-garamond, Garamond, serif", + "fontFamily": "Inter, sans-serif", "fontSize": "20px", "lineHeight": "28px", "listStyle": "inherit", @@ -1265,7 +1265,7 @@ exports[`DevelopersPage renders 1`] = ` Object { "color": "rgba(255,255,255,1.00)", "display": "list-item", - "fontFamily": "EB Garamond, eb-garamond, Garamond, serif", + "fontFamily": "Inter, sans-serif", "fontSize": "20px", "lineHeight": "28px", "listStyle": "inherit", @@ -1474,7 +1474,7 @@ exports[`DevelopersPage renders 1`] = ` style={ Object { "color": "rgba(255,255,255,1.00)", - "fontFamily": "EB Garamond, eb-garamond, Garamond, serif", + "fontFamily": "Inter, sans-serif", "fontSize": "24px", "lineHeight": "32px", "textAlign": "center", diff --git a/src/_page-tests/developers/__snapshots__/faucet.test.tsx.snap b/src/_page-tests/developers/__snapshots__/faucet.test.tsx.snap index f8485251..55fe0c94 100644 --- a/src/_page-tests/developers/__snapshots__/faucet.test.tsx.snap +++ b/src/_page-tests/developers/__snapshots__/faucet.test.tsx.snap @@ -13,12 +13,12 @@ exports[`Faucet renders 1`] = ` } .emotion-1 { - font-family: EB Garamond,eb-garamond,Garamond,serif; + font-family: GT-Alpina,serif; font-size: 48px; line-height: 56; text-rendering: geometricPrecision; color: #111214; - font-weight: normal; + font-weight: 200; margin: 0; margin-block-start: 0; margin-block-end: 0; @@ -46,6 +46,7 @@ exports[`Faucet renders 1`] = ` -ms-flex-item-align: center; align-self: center; width: 100%; + background-color: #FBF6F1; } .emotion-3 { @@ -138,14 +139,13 @@ exports[`Faucet renders 1`] = ` } .emotion-5 { - font-weight: normal; + font-weight: 200; margin: 0; margin-block-start: 0; margin-block-end: 0; - font-family: Jost,futura-pt,futura,sans-serif; + font-family: GT-Alpina,serif; font-size: 24px; line-height: 28; - font-weight: 400; text-rendering: geometricPrecision; color: #111214; line-height: 28px; @@ -170,7 +170,7 @@ exports[`Faucet renders 1`] = ` } .emotion-7 { - font-family: EB Garamond,eb-garamond,Garamond,serif; + font-family: Inter,sans-serif; font-size: 20px; line-height: 28; text-rendering: geometricPrecision; @@ -198,7 +198,7 @@ exports[`Faucet renders 1`] = ` -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; - font-family: EB Garamond,eb-garamond,Garamond,serif; + font-family: Inter,sans-serif; font-size: 20px; line-height: 28; text-rendering: geometricPrecision; @@ -207,22 +207,18 @@ exports[`Faucet renders 1`] = ` -webkit-align-self: center; -ms-flex-item-align: center; align-self: center; - padding-left: 12px; - padding-right: 12px; - padding-top: 12px; - padding-bottom: 16px; - border-radius: 3px; + padding: 24px; + border-radius: 70px; border-width: 1px; border-style: solid; - border-color: rgba(61, 61, 61, 0.2); width: 100%; margin: 4px; - margin-bottom: 8px; outline-width: 0; + background-color: transparent; } .emotion-9:focus { - border-color: #35D07F; + border-color: #000; } .emotion-10 { @@ -249,6 +245,14 @@ exports[`Faucet renders 1`] = ` } .emotion-13 { + box-sizing: border-box; + 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; @@ -289,13 +293,22 @@ exports[`Faucet renders 1`] = ` text-decoration: none; min-width: 150px; padding: 10px 20px; - background-color: rgba(69, 214, 138, 0.7); - border-color: rgba(69, 214, 138, 0.7); - border-radius: 3px; + background-image: repeating-linear-gradient(-45deg, transparent, transparent 3px, rgba(0, 0, 0, 0.2) 3px, rgba(0, 0, 0, 0.2) 5px); + border: solid; + border-color: rgba(0, 0, 0, 0.2); + border-radius: 70px; border-width: 1px; + padding: 24px 64px; font-weight: 500; - color: #FFFFFF; + color: #000; cursor: not-allowed; + color: #9B9B9B; +} + +@media (max-width: 576px) { + .emotion-14 { + padding: 16px 24px; + } } .emotion-15 { @@ -324,6 +337,14 @@ exports[`Faucet renders 1`] = ` } .emotion-23 { + box-sizing: border-box; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex-direction: column; + -ms-flex-direction: column; + flex-direction: column; display: inline; } @@ -349,7 +370,7 @@ exports[`Faucet renders 1`] = ` } .emotion-40 { - font-family: EB Garamond,eb-garamond,Garamond,serif; + font-family: Inter,sans-serif; font-size: 20px; line-height: 28; text-rendering: geometricPrecision; @@ -362,6 +383,17 @@ exports[`Faucet renders 1`] = ` font-weight: bold; } +.emotion-42 { + box-sizing: border-box; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex-direction: column; + -ms-flex-direction: column; + flex-direction: column; +} + .emotion-43 { -webkit-box-pack: center; -ms-flex-pack: center; @@ -407,22 +439,30 @@ exports[`Faucet renders 1`] = ` -webkit-box-align: center; -ms-flex-align: center; align-items: center; - color: #35D07F; + color: #000; font-size: 16px; font-weight: 500; } -.emotion-44:hover { - color: #4CDD91; +.emotion-45 { + margin-left: 8px; + background-color: #000; + padding: 9.5px 9.5px 9.5px 13.5px; + border-radius: 60px; } -.emotion-44:active { - color: #0FB972; +.emotion-45:hover { + background-color: #FCFF52; } -.emotion-45 { - padding-top: 0.15em; - padding-left: 0.4em; +.emotion-45:active { + background-color: #000; +} + +@media (max-width: 576px) { + .emotion-45 { + padding: 6px 6px 6px 8px; + } }
@@ -712,6 +755,9 @@ In the Celo Wallet, you can find your address by pressing the menu icon at the t Read the Wallet Tutorial @@ -766,6 +812,9 @@ In the Celo Wallet, you can find your address by pressing the menu icon at the t BlockScout @@ -820,6 +869,9 @@ In the Celo Wallet, you can find your address by pressing the menu icon at the t Read the Docs diff --git a/src/_page-tests/developers/__snapshots__/wallet.test.tsx.snap b/src/_page-tests/developers/__snapshots__/wallet.test.tsx.snap index 9e16e65d..465904c5 100644 --- a/src/_page-tests/developers/__snapshots__/wallet.test.tsx.snap +++ b/src/_page-tests/developers/__snapshots__/wallet.test.tsx.snap @@ -179,7 +179,7 @@ Array [ style={ Object { "color": "rgba(255,255,255,1.00)", - "fontFamily": "EB Garamond, eb-garamond, Garamond, serif", + "fontFamily": "GT-Alpina, serif", "fontSize": "36px", "lineHeight": "40px", "marginTop": "20px", @@ -198,7 +198,7 @@ Array [ style={ Object { "color": "rgba(255,255,255,1.00)", - "fontFamily": "EB Garamond, eb-garamond, Garamond, serif", + "fontFamily": "Inter, sans-serif", "fontSize": "24px", "lineHeight": "32px", "textRendering": "geometricPrecision", @@ -894,7 +894,7 @@ Do not send real funds. style={ Object { "color": "rgba(255,255,255,1.00)", - "fontFamily": "Jost, futura-pt, futura, sans-serif", + "fontFamily": "GT-Alpina, serif", "fontSize": "24px", "lineHeight": "32px", "marginBottom": "20px", @@ -912,7 +912,7 @@ Do not send real funds. style={ Object { "color": "rgba(221,221,221,1.00)", - "fontFamily": "EB Garamond, eb-garamond, Garamond, serif", + "fontFamily": "Inter, sans-serif", "fontSize": "20px", "lineHeight": "28px", "marginBottom": "20px", @@ -1087,7 +1087,7 @@ Do not send real funds. style={ Object { "color": "rgba(255,255,255,1.00)", - "fontFamily": "Jost, futura-pt, futura, sans-serif", + "fontFamily": "GT-Alpina, serif", "fontSize": "24px", "lineHeight": "32px", "marginBottom": "20px", @@ -1105,7 +1105,7 @@ Do not send real funds. style={ Object { "color": "rgba(221,221,221,1.00)", - "fontFamily": "EB Garamond, eb-garamond, Garamond, serif", + "fontFamily": "Inter, sans-serif", "fontSize": "20px", "lineHeight": "28px", "marginBottom": "20px", @@ -1185,7 +1185,7 @@ Do not send real funds. style={ Object { "color": "rgba(255,255,255,1.00)", - "fontFamily": "Jost, futura-pt, futura, sans-serif", + "fontFamily": "GT-Alpina, serif", "fontSize": "24px", "lineHeight": "32px", "marginBottom": "20px", @@ -1203,7 +1203,7 @@ Do not send real funds. style={ Object { "color": "rgba(221,221,221,1.00)", - "fontFamily": "EB Garamond, eb-garamond, Garamond, serif", + "fontFamily": "Inter, sans-serif", "fontSize": "20px", "lineHeight": "28px", "marginBottom": "20px", @@ -1236,6 +1236,7 @@ Do not send real funds. -ms-flex-item-align: center; align-self: center; width: 100%; + background-color: #FBF6F1; } .emotion-1 { @@ -1363,12 +1364,12 @@ Do not send real funds. } .emotion-3 { - font-family: EB Garamond,eb-garamond,Garamond,serif; + font-family: GT-Alpina,serif; font-size: 48px; line-height: 56; text-rendering: geometricPrecision; color: #111214; - font-weight: normal; + font-weight: 200; margin: 0; margin-block-start: 0; margin-block-end: 0; @@ -1415,6 +1416,7 @@ Check out these wallets for everyday use. -ms-flex-item-align: center; align-self: center; width: 100%; + background-color: #FBF6F1; } .emotion-1 { @@ -1527,14 +1529,13 @@ Check out these wallets for everyday use. } .emotion-5 { - font-weight: normal; + font-weight: 200; margin: 0; margin-block-start: 0; margin-block-end: 0; - font-family: Jost,futura-pt,futura,sans-serif; + font-family: GT-Alpina,serif; font-size: 24px; line-height: 28; - font-weight: 400; text-rendering: geometricPrecision; color: #111214; line-height: 28px; @@ -1543,7 +1544,7 @@ Check out these wallets for everyday use. } .emotion-6 { - font-family: EB Garamond,eb-garamond,Garamond,serif; + font-family: Inter,sans-serif; font-size: 20px; line-height: 28; text-rendering: geometricPrecision; @@ -1551,6 +1552,17 @@ Check out these wallets for everyday use. line-height: 28px; } +.emotion-7 { + box-sizing: border-box; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex-direction: column; + -ms-flex-direction: column; + flex-direction: column; +} + .emotion-8 { -webkit-box-pack: center; -ms-flex-pack: center; @@ -1596,23 +1608,31 @@ Check out these wallets for everyday use. -webkit-box-align: center; -ms-flex-align: center; align-items: center; - color: #35D07F; + color: #000; font-size: 16px; font-weight: 500; margin-top: 20px; } -.emotion-9:hover { - color: #4CDD91; +.emotion-10 { + margin-left: 8px; + background-color: #000; + padding: 9.5px 9.5px 9.5px 13.5px; + border-radius: 60px; } -.emotion-9:active { - color: #0FB972; +.emotion-10:hover { + background-color: #FCFF52; } -.emotion-10 { - padding-top: 0.15em; - padding-left: 0.4em; +.emotion-10:active { + background-color: #000; +} + +@media (max-width: 576px) { + .emotion-10 { + padding: 6px 6px 6px 8px; + } }
@@ -1938,6 +1961,9 @@ Check out these wallets for everyday use. Go to Celo Web Wallet @@ -2109,6 +2135,9 @@ Check out these wallets for everyday use. Get to Celo Terminal diff --git a/src/_page-tests/experience/__snapshots__/color.test.tsx.snap b/src/_page-tests/experience/__snapshots__/color.test.tsx.snap index 34660fbc..97c03e93 100644 --- a/src/_page-tests/experience/__snapshots__/color.test.tsx.snap +++ b/src/_page-tests/experience/__snapshots__/color.test.tsx.snap @@ -1,48 +1,6 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`Experience/Color renders 1`] = ` -@keyframes animation-0 { - from { - -webkit-transform: translateX(-100%); - -moz-transform: translateX(-100%); - -ms-transform: translateX(-100%); - transform: translateX(-100%); - } - - to { - -webkit-transform: translateX(0%); - -moz-transform: translateX(0%); - -ms-transform: translateX(0%); - transform: translateX(0%); - } -} - -@keyframes animation-1 { - from { - opacity: 0; - } - - to { - opacity: 1; - } -} - -@keyframes animation-2 { - from { - -webkit-transform: translateX(0%); - -moz-transform: translateX(0%); - -ms-transform: translateX(0%); - transform: translateX(0%); - } - - to { - -webkit-transform: translateX(100%); - -moz-transform: translateX(100%); - -ms-transform: translateX(100%); - transform: translateX(100%); - } -} - .emotion-0 { box-sizing: border-box; display: -webkit-box; @@ -187,14 +145,13 @@ exports[`Experience/Color renders 1`] = ` } .emotion-8 { - font-weight: normal; + font-weight: 200; margin: 0; margin-block-start: 0; margin-block-end: 0; - font-family: Jost,futura-pt,futura,sans-serif; + font-family: GT-Alpina,serif; font-size: 24px; line-height: 28; - font-weight: 400; text-rendering: geometricPrecision; color: #111214; line-height: 28px; @@ -269,11 +226,11 @@ exports[`Experience/Color renders 1`] = ` } .emotion-34 { - font-weight: normal; + font-weight: 200; margin: 0; margin-block-start: 0; margin-block-end: 0; - font-family: Jost,futura-pt,futura,sans-serif; + font-family: GT-Alpina,serif; font-size: 16px; line-height: 18; font-weight: 500; @@ -492,6 +449,14 @@ exports[`Experience/Color renders 1`] = ` -ms-flex-item-align: center; align-self: center; width: 100%; + background-color: #FBF6F1; + background-color: #FCFF52; +} + +@media (max-width: 576px) { + .emotion-391 { + padding: 33px; + } } .emotion-392 { @@ -520,6 +485,7 @@ exports[`Experience/Color renders 1`] = ` flex-wrap: wrap; -webkit-column-gap: 24px; column-gap: 24px; + gap: 0; } @media (min-width: 576px) and (max-width: 992px) { @@ -591,11 +557,12 @@ exports[`Experience/Color renders 1`] = ` -ms-flex-direction: column; flex-direction: column; grid-column: span 1; + grid-row-start: 1; } @media (min-width: 576px) and (max-width: 992px) { .emotion-393 { - grid-column: span 3; + grid-column: span 1; } } @@ -608,24 +575,30 @@ exports[`Experience/Color renders 1`] = ` -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; - margin-bottom: 20px; + margin-top: 80px; + margin-bottom: 48px; } -@media (max-width: 576px) { - .emotion-394 { - margin-bottom: 30px; - -webkit-box-pack: center; - -ms-flex-pack: center; - -webkit-justify-content: center; - justify-content: center; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; +.emotion-395 { + box-sizing: border-box; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex-direction: column; + -ms-flex-direction: column; + flex-direction: column; + grid-column: span 1; + grid-row-start: 2; +} + +@media (min-width: 576px) and (max-width: 992px) { + .emotion-395 { + grid-column: span 1; } } -.emotion-395 { +.emotion-396 { box-sizing: border-box; display: -webkit-box; display: -webkit-flex; @@ -634,24 +607,23 @@ exports[`Experience/Color renders 1`] = ` -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; - padding-bottom: 20px; } @media (max-width: 576px) { - .emotion-395 { + .emotion-396 { -webkit-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; + -webkit-align-items: flex-start; + -webkit-box-align: flex-start; + -ms-flex-align: flex-start; + align-items: flex-start; } } -.emotion-396 { - font-weight: normal; +.emotion-397 { + font-weight: 200; margin: 0; margin-block-start: 0; margin-block-end: 0; @@ -661,19 +633,252 @@ exports[`Experience/Color renders 1`] = ` text-rendering: geometricPrecision; color: #111214; line-height: 20px; + font-family: Inter,sans-serif; margin-bottom: 20px; max-width: 350px; text-align: left; } +.emotion-398 { + width: 100%; + display: inline-block; +} + +.emotion-398 img { + display: none; +} + +.emotion-398 .grecaptcha-badge { + display: none; +} + +.emotion-398 #email-b4dd2ae2-68e9-4662-bfd3-b2860162a5aa { + box-sizing: border-box; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex-direction: column; + -ms-flex-direction: column; + flex-direction: column; + font-family: Inter,sans-serif; + font-size: 20px; + line-height: 28; + text-rendering: geometricPrecision; + color: #111214; + line-height: 28px; + -webkit-align-self: center; + -ms-flex-item-align: center; + align-self: center; + padding: 24px; + border-radius: 70px; + border-width: 1px; + border-style: solid; + width: 100%; + margin: 4px; + outline-width: 0; + background-color: transparent; +} + +.emotion-398 #email-b4dd2ae2-68e9-4662-bfd3-b2860162a5aa:focus { + border-color: #000; +} + +.emotion-398 #hsForm_b4dd2ae2-68e9-4662-bfd3-b2860162a5aa input[type=submit] { + display: none; +} + +.emotion-398 .celo-hbspt { + width: 100%; +} + +.emotion-398 .celo-hbspt * { + box-sizing: border-box; +} + +.emotion-398 .celo-hbspt fieldset { + border: 0; + padding: 0; + margin: 0; + max-width: 100%; +} + +@media (min-width: 576px) and (max-width: 992px) { + .emotion-398 .celo-hbspt fieldset { + margin-right: 0!important; + width: 100%!important; + } +} + @media (max-width: 576px) { - .emotion-396 { - text-align: center; + .emotion-398 .celo-hbspt fieldset { + float: none; + width: 100%; } } -.emotion-398 { - color: inherit; +.emotion-398 .celo-hbspt fieldset.form-columns-2 .hs-form-field { + width: 50%; + float: left; +} + +@media (min-width: 576px) and (max-width: 992px) { + .emotion-398 .celo-hbspt fieldset.form-columns-2 .hs-form-field { + float: none; + width: 100%; + } +} + +@media (max-width: 576px) { + .emotion-398 .celo-hbspt fieldset.form-columns-2 .hs-form-field { + float: none; + width: 100%; + } +} + +.emotion-398 .celo-hbspt .field { + margin-bottom: 32px; +} + +.emotion-398 .celo-hbspt .input { + margin-right: 26px; +} + +.emotion-398 .celo-hbspt .hs-input { + box-sizing: border-box; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex-direction: column; + -ms-flex-direction: column; + flex-direction: column; + font-family: Inter,sans-serif; + font-size: 20px; + line-height: 28; + text-rendering: geometricPrecision; + color: #111214; + line-height: 28px; + -webkit-align-self: center; + -ms-flex-item-align: center; + align-self: center; + padding: 24px; + border-radius: 70px; + border-width: 1px; + border-style: solid; + width: 100%; + margin: 4px; + outline-width: 0; + background-color: transparent; + border-color: rgba(0, 0, 0, 0.2); +} + +.emotion-398 .celo-hbspt .hs-input:focus { + border-color: #000; +} + +.emotion-398 .hs-custom-style fieldset textarea { + box-sizing: border-box; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex-direction: column; + -ms-flex-direction: column; + flex-direction: column; + font-family: Inter,sans-serif; + font-size: 20px; + line-height: 28; + text-rendering: geometricPrecision; + color: #111214; + line-height: 28px; + -webkit-align-self: center; + -ms-flex-item-align: center; + align-self: center; + padding: 24px; + border-radius: 70px; + border-width: 1px; + border-style: solid; + width: 100%; + margin: 4px; + outline-width: 0; + background-color: transparent; +} + +.emotion-398 .hs-custom-style fieldset textarea:focus { + border-color: #000; +} + +.emotion-398 .celo-hbspt .contact-error { + border-color: #E70532; +} + +.emotion-398 .celo-hbspt .hs-error-msg { + color: #E70532; +} + +.emotion-398 input[type='checkbox'] { + -webkit-flex-basis: 0; + -ms-flex-preferred-size: 0; + flex-basis: 0; +} + +.emotion-398 input.hs-button { + font-family: Jost,futura-pt,futura,sans-serif; + font-size: 16px; + line-height: 16; + text-align: center; + text-rendering: geometricPrecision; + color: #111214; + cursor: pointer; + font-weight: 500; + line-height: 16px; + -webkit-text-decoration: none; + text-decoration: none; + background-color: #FCFF52; + color: #000; + padding: 24px 64px; + border-radius: 70px; + width: -webkit-fit-content; + width: -moz-fit-content; + width: fit-content; + border: 1px solid #CCCCCC; + margin-top: 32px; +} + +.emotion-398 input.hs-button:hover { + background-color: #000; + color: #FFFFFF; +} + +.emotion-398 input.hs-button:active { + background-color: #000; + color: #FFFFFF; +} + +.emotion-398 ul { + list-style-type: none; +} + +.emotion-398 .hs-error-msg { + color: #FF7F6D; +} + +.emotion-398 .legal-consent-container { + font-weight: 200; + margin: 0; + margin-block-start: 0; + margin-block-end: 0; + font-family: EB Garamond,eb-garamond,Garamond,serif; + font-size: 16px; + line-height: 20; + text-rendering: geometricPrecision; + color: #111214; + line-height: 20px; +} + +.emotion-398 a { + color: #1AB775; } .emotion-399 { @@ -686,6 +891,7 @@ exports[`Experience/Color renders 1`] = ` -ms-flex-direction: column; flex-direction: column; grid-column: span 2; + grid-row-start: 2; } @media (min-width: 576px) and (max-width: 992px) { @@ -694,6 +900,12 @@ exports[`Experience/Color renders 1`] = ` } } +@media (min-width: 576px) and (max-width: 992px) { + .emotion-399 { + grid-row-start: 3; + } +} + .emotion-400 { box-sizing: border-box; display: -webkit-box; @@ -733,37 +945,37 @@ exports[`Experience/Color renders 1`] = ` } .emotion-402 { - font-weight: normal; - margin: 0; - margin-block-start: 0; - margin-block-end: 0; - font-family: Jost,futura-pt,futura,sans-serif; - font-size: 16px; - line-height: 18; - font-weight: 500; - text-rendering: geometricPrecision; - color: #111214; - line-height: 18px; + font-family: Inter,sans-serif; + margin-top: 0; + font-weight: 200; margin-bottom: 20px; } -.emotion-403 { +.emotion-404 { margin-top: 8px; margin-bottom: 8px; } -.emotion-404 { +.emotion-405 { + box-sizing: border-box; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex-direction: column; + -ms-flex-direction: column; + flex-direction: column; display: inline; } -.emotion-405 { +.emotion-406 { color: inherit; cursor: pointer; text-decoration-style: solid; text-decoration-line: underline; display: inline; opacity: 1; - font-weight: normal; + font-weight: 200; margin: 0; margin-block-start: 0; margin-block-end: 0; @@ -773,6 +985,11 @@ exports[`Experience/Color renders 1`] = ` text-rendering: geometricPrecision; color: #111214; line-height: 20px; + font-family: Inter,sans-serif; + font-weight: 700; + border: 1px solid rgba(0, 0, 0, 0.2); + padding: 10.5px 16px; + border-radius: 70px; text-decoration-line: none; display: -webkit-inline-box; display: -webkit-inline-flex; @@ -784,21 +1001,21 @@ exports[`Experience/Color renders 1`] = ` align-items: center; } -.emotion-405:hover { +.emotion-406:hover { opacity: 0.75; } -.emotion-405:active { +.emotion-406:active { opacity: 1; } -.emotion-427 { +.emotion-416 { padding-left: 25px; padding-right: 25px; } @media (max-width: 576px) { - .emotion-427 { + .emotion-416 { margin-top: 35px; width: 50%; padding-left: 10px; @@ -806,14 +1023,14 @@ exports[`Experience/Color renders 1`] = ` } } -.emotion-473 { +.emotion-452 { padding-left: 25px; padding-right: 25px; padding-end: 0; } @media (max-width: 576px) { - .emotion-473 { + .emotion-452 { margin-top: 35px; width: 50%; padding-left: 10px; @@ -821,11 +1038,29 @@ exports[`Experience/Color renders 1`] = ` } } -.emotion-478 { - padding-right: 8px; +.emotion-464 { + box-sizing: border-box; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex-direction: column; + -ms-flex-direction: column; + flex-direction: column; + overflow: hidden; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + -webkit-align-self: center; + -ms-flex-item-align: center; + align-self: center; + width: 100%; + background-color: #FBF6F1; + background-color: #FCFF52; } -.emotion-520 { +.emotion-465 { box-sizing: border-box; display: -webkit-box; display: -webkit-flex; @@ -854,7 +1089,7 @@ exports[`Experience/Color renders 1`] = ` } @media (min-width: 576px) and (max-width: 992px) { - .emotion-520 { + .emotion-465 { display: grid; grid-auto-rows: auto; -webkit-align-self: center; @@ -871,7 +1106,7 @@ exports[`Experience/Color renders 1`] = ` } @media (min-width: 992px) { - .emotion-520 { + .emotion-465 { display: grid; grid-auto-rows: auto; -webkit-align-self: center; @@ -883,39 +1118,39 @@ exports[`Experience/Color renders 1`] = ` } @media (min-width: 992px) { - .emotion-520 { + .emotion-465 { grid-template-columns: 1fr; } } @media (min-width: 576px) and (max-width: 992px) { - .emotion-520 { + .emotion-465 { grid-template-columns: 1fr; } } @media (min-width: 992px) { - .emotion-520 { + .emotion-465 { margin-top: 60px; margin-bottom: 60px; } } @media (min-width: 576px) and (max-width: 992px) { - .emotion-520 { + .emotion-465 { margin-top: 40px; margin-bottom: 40px; } } @media (max-width: 576px) { - .emotion-520 { + .emotion-465 { margin-top: 30px; margin-bottom: 30px; } } -.emotion-521 { +.emotion-466 { box-sizing: border-box; display: -webkit-box; display: -webkit-flex; @@ -930,10 +1165,15 @@ exports[`Experience/Color renders 1`] = ` -webkit-box-pack: justify; -webkit-justify-content: space-between; justify-content: space-between; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + border-bottom: 1px solid rgba(0, 0, 0, 0.2); } @media (max-width: 576px) { - .emotion-521 { + .emotion-466 { -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; @@ -945,100 +1185,70 @@ exports[`Experience/Color renders 1`] = ` -webkit-box-align: center; -ms-flex-align: center; align-items: center; + border-bottom: none; } } -.emotion-522 { +.emotion-467 { box-sizing: border-box; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; + -webkit-flex-direction: column; + -ms-flex-direction: column; + flex-direction: column; -webkit-flex-direction: row; -ms-flex-direction: row; flex-direction: row; - margin-bottom: 20px; - overflow: hidden; +} + +.emotion-467>div:nth-child(-n+3) { + border-right: none; } @media (max-width: 576px) { - .emotion-522 { - -webkit-box-pack: center; - -ms-flex-pack: center; - -webkit-justify-content: center; - justify-content: center; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; + .emotion-467 { + margin-bottom: 40px; } } -.emotion-523 { - width: 20px; - height: 20px; - z-index: 10; +.emotion-468 { + border: 1px solid rgba(0, 0, 0, 0.2); + padding: 16px; } @media (max-width: 576px) { - .emotion-523 { - margin-bottom: 8px; + .emotion-468 { + padding: 16px; } } -.emotion-524 { - margin-left: 10px; - margin-right: 10px; - z-index: 10; +@media (min-width: 576px) { + .emotion-468 { + border-bottom: none; + } } -@media (max-width: 576px) { - .emotion-524 { - display: none; - } +.emotion-470 { + color: inherit; + cursor: pointer; + text-decoration-style: solid; + text-decoration-line: underline; + display: inline; + opacity: 1; } -.emotion-525 { - box-sizing: border-box; - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-flex-direction: column; - -ms-flex-direction: column; - flex-direction: column; - position: relative; +.emotion-470:hover { + opacity: 0.75; } -.emotion-526 { - box-sizing: border-box; - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-flex-direction: column; - -ms-flex-direction: column; - flex-direction: column; - background-color: #FFFFFF; - position: absolute; - height: 100%; - width: 101%; - -webkit-animation-duration: 250ms; - animation-duration: 250ms; - -webkit-animation-iteration-count: 1; - animation-iteration-count: 1; - -webkit-animation-timing-function: linear; - animation-timing-function: linear; - -webkit-animation-fill-mode: both; - animation-fill-mode: both; - -webkit-animation-delay: 3500ms; - animation-delay: 3500ms; - -webkit-animation-name: animation-0; - animation-name: animation-0; -} - -.emotion-527 { - font-weight: normal; +.emotion-470:active { + opacity: 1; +} + +.emotion-480 { + font-weight: 200; margin: 0; margin-block-start: 0; margin-block-end: 0; @@ -1048,24 +1258,17 @@ exports[`Experience/Color renders 1`] = ` text-rendering: geometricPrecision; color: #111214; line-height: 20px; - font-style: italic; - -webkit-animation-fill-mode: both; - animation-fill-mode: both; - -webkit-animation-iteration-count: 1; - animation-iteration-count: 1; - -webkit-animation-duration: 750ms; - animation-duration: 750ms; - -webkit-animation-name: animation-1; - animation-name: animation-1; + font-family: Inter,sans-serif; + z-index: 10; } @media (max-width: 576px) { - .emotion-527 { - text-align: center; + .emotion-480 { + margin-bottom: 17px; } } -.emotion-528 { +.emotion-481 { box-sizing: border-box; display: -webkit-box; display: -webkit-flex; @@ -1074,24 +1277,13 @@ exports[`Experience/Color renders 1`] = ` -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; - background-color: #FFFFFF; - position: absolute; - height: 100%; - width: 101%; - -webkit-animation-duration: 250ms; - animation-duration: 250ms; - -webkit-animation-iteration-count: 1; - animation-iteration-count: 1; - -webkit-animation-timing-function: linear; - animation-timing-function: linear; - -webkit-animation-fill-mode: both; - animation-fill-mode: both; - -webkit-animation-name: animation-2; - animation-name: animation-2; -} - -.emotion-529 { - font-weight: normal; + -webkit-flex-direction: row; + -ms-flex-direction: row; + flex-direction: row; +} + +.emotion-482 { + font-weight: 200; margin: 0; margin-block-start: 0; margin-block-end: 0; @@ -1101,7 +1293,108 @@ exports[`Experience/Color renders 1`] = ` text-rendering: geometricPrecision; color: #111214; line-height: 20px; - z-index: 10; +} + +.emotion-482:first-child { + margin-right: 20px; +} + +.emotion-482 a { + text-decoration-line: none; +} + +.emotion-484 { + color: inherit; + cursor: pointer; + text-decoration-style: solid; + text-decoration-line: underline; + display: inline; + opacity: 1; + font-family: Inter,sans-serif; +} + +.emotion-484:hover { + opacity: 0.75; +} + +.emotion-484:active { + opacity: 1; +} + +.emotion-488 { + width: 86px; + height: 86px; + background-color: #FFFFFF; + border: none; + position: absolute; + transition-property: all; + transition-duration: 400ms; + top: 0; + left: 0; +} + +@media (max-width: 576px) { + .emotion-488 { + background-color: #FFFFFF; + } +} + +@media (max-width: 576px) { + .emotion-488 { + width: 86px; + height: 86px; + background-color: #FFFFFF; + border: none; + position: absolute; + transition-property: all; + transition-duration: 400ms; + top: 0; + left: 0; + } + + @media (max-width: 576px) { + .emotion-488 { + background-color: #FFFFFF; + } + } +} + +.emotion-489 { + width: 86px; + height: 86px; + background-color: #FFFFFF; + border: none; + position: absolute; + transition-property: all; + transition-duration: 400ms; + top: 0; + left: 172px; +} + +@media (max-width: 576px) { + .emotion-489 { + background-color: #FFFFFF; + } +} + +@media (max-width: 576px) { + .emotion-489 { + width: 86px; + height: 86px; + background-color: #FFFFFF; + border: none; + position: absolute; + transition-property: all; + transition-duration: 400ms; + top: 0; + left: 172px; + } + + @media (max-width: 576px) { + .emotion-489 { + background-color: #FFFFFF; + } + } }
- -
+
+

- Nothing herein constitutes an offer to sell, or the solicitation of an offer to buy, any securities or tokens. -

-

- Read more in Celo - - Terms of Service - + World-changing ideas in your inbox

+
- Celo + Celo for
-
-
- - About - + + Founders + +
- -
- - Careers - + + Community + +
- -
- - Validators - + + Validators + +
+ +
+
+ Tech +
- - Developers - + + Docs + +
-
-
- - Alliance - + + Security Audits + +
- -
- - Community - + + Reserve + +
- -
- - Annual Report - + + Government + +
- Technology + Company
- - Docs - + + Vision + +
- -
- - Security Audits - + + Ecosystem + +
- -
- - Reserve - + + Careers + +
- -
-
- - White Papers - -
-
-
-
- - Government - -
-
- -
-
- Resources -
-
-
- - Brand Policy - -
-
-
-
- - Press - -
-
-
- - Events - -
-
-
-
- - EventKit - -
-
-
-
- - BrandKit - -
-
-
-
- - MerchantKit - -
-
-
-
- - GrantKit - + + Press + +
-
-
- - PilotKit - + + White Papers + +
- -
- - Ecosystem Fund - + + Events + +
- Social + Kits
- - - - - Medium - - - - - Blog - -
-
-
-
- - - - - Github - - - - - GitHub - -
-
-
-
- - - - - Twitter - - - - - Twitter - -
-
-
-
- - - - - Forum - - - - - Forum - -
-
-
-
- - - - - Chat - - - - - Chat - + BrandKit + +
- -
- - - - - YouTube - - - - - YouTube - + PilotKit + +
- -
- - - - - Instagram - - - - - Instagram - + GrantKit + +
+ + + + + +
+
+
+
+
- + + Chat + + + +
+
+
- + + Medium + + + +
+
+
- + + Twitter + + + +
+
+
- + + Github + + + +
-
-
-
-
-
-
+ + © 2022 Celo Inc. +
- - - | -
- - " - Change the Story - " - + + Privacy Policy + +
+
+
+ className="emotion-405" + > + + Terms of Use + +
- - The Celo Foundation, © Celo 2022 -
+
+
`; diff --git a/src/_page-tests/experience/__snapshots__/composition.test.tsx.snap b/src/_page-tests/experience/__snapshots__/composition.test.tsx.snap index da2a5562..b771dbd8 100644 --- a/src/_page-tests/experience/__snapshots__/composition.test.tsx.snap +++ b/src/_page-tests/experience/__snapshots__/composition.test.tsx.snap @@ -1,48 +1,6 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`Experience/Composition renders 1`] = ` -@keyframes animation-0 { - from { - -webkit-transform: translateX(-100%); - -moz-transform: translateX(-100%); - -ms-transform: translateX(-100%); - transform: translateX(-100%); - } - - to { - -webkit-transform: translateX(0%); - -moz-transform: translateX(0%); - -ms-transform: translateX(0%); - transform: translateX(0%); - } -} - -@keyframes animation-1 { - from { - opacity: 0; - } - - to { - opacity: 1; - } -} - -@keyframes animation-2 { - from { - -webkit-transform: translateX(0%); - -moz-transform: translateX(0%); - -ms-transform: translateX(0%); - transform: translateX(0%); - } - - to { - -webkit-transform: translateX(100%); - -moz-transform: translateX(100%); - -ms-transform: translateX(100%); - transform: translateX(100%); - } -} - .emotion-0 { box-sizing: border-box; display: -webkit-box; @@ -187,14 +145,13 @@ exports[`Experience/Composition renders 1`] = ` } .emotion-8 { - font-weight: normal; + font-weight: 200; margin: 0; margin-block-start: 0; margin-block-end: 0; - font-family: Jost,futura-pt,futura,sans-serif; + font-family: GT-Alpina,serif; font-size: 24px; line-height: 28; - font-weight: 400; text-rendering: geometricPrecision; color: #111214; line-height: 28px; @@ -269,11 +226,11 @@ exports[`Experience/Composition renders 1`] = ` } .emotion-34 { - font-weight: normal; + font-weight: 200; margin: 0; margin-block-start: 0; margin-block-end: 0; - font-family: Jost,futura-pt,futura,sans-serif; + font-family: GT-Alpina,serif; font-size: 16px; line-height: 18; font-weight: 500; @@ -479,6 +436,14 @@ exports[`Experience/Composition renders 1`] = ` -ms-flex-item-align: center; align-self: center; width: 100%; + background-color: #FBF6F1; + background-color: #FCFF52; +} + +@media (max-width: 576px) { + .emotion-217 { + padding: 33px; + } } .emotion-218 { @@ -507,6 +472,7 @@ exports[`Experience/Composition renders 1`] = ` flex-wrap: wrap; -webkit-column-gap: 24px; column-gap: 24px; + gap: 0; } @media (min-width: 576px) and (max-width: 992px) { @@ -578,11 +544,12 @@ exports[`Experience/Composition renders 1`] = ` -ms-flex-direction: column; flex-direction: column; grid-column: span 1; + grid-row-start: 1; } @media (min-width: 576px) and (max-width: 992px) { .emotion-219 { - grid-column: span 3; + grid-column: span 1; } } @@ -595,24 +562,30 @@ exports[`Experience/Composition renders 1`] = ` -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; - margin-bottom: 20px; + margin-top: 80px; + margin-bottom: 48px; } -@media (max-width: 576px) { - .emotion-220 { - margin-bottom: 30px; - -webkit-box-pack: center; - -ms-flex-pack: center; - -webkit-justify-content: center; - justify-content: center; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; +.emotion-221 { + box-sizing: border-box; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex-direction: column; + -ms-flex-direction: column; + flex-direction: column; + grid-column: span 1; + grid-row-start: 2; +} + +@media (min-width: 576px) and (max-width: 992px) { + .emotion-221 { + grid-column: span 1; } } -.emotion-221 { +.emotion-222 { box-sizing: border-box; display: -webkit-box; display: -webkit-flex; @@ -621,24 +594,23 @@ exports[`Experience/Composition renders 1`] = ` -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; - padding-bottom: 20px; } @media (max-width: 576px) { - .emotion-221 { + .emotion-222 { -webkit-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; + -webkit-align-items: flex-start; + -webkit-box-align: flex-start; + -ms-flex-align: flex-start; + align-items: flex-start; } } -.emotion-222 { - font-weight: normal; +.emotion-223 { + font-weight: 200; margin: 0; margin-block-start: 0; margin-block-end: 0; @@ -648,19 +620,252 @@ exports[`Experience/Composition renders 1`] = ` text-rendering: geometricPrecision; color: #111214; line-height: 20px; + font-family: Inter,sans-serif; margin-bottom: 20px; max-width: 350px; text-align: left; } +.emotion-224 { + width: 100%; + display: inline-block; +} + +.emotion-224 img { + display: none; +} + +.emotion-224 .grecaptcha-badge { + display: none; +} + +.emotion-224 #email-b4dd2ae2-68e9-4662-bfd3-b2860162a5aa { + box-sizing: border-box; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex-direction: column; + -ms-flex-direction: column; + flex-direction: column; + font-family: Inter,sans-serif; + font-size: 20px; + line-height: 28; + text-rendering: geometricPrecision; + color: #111214; + line-height: 28px; + -webkit-align-self: center; + -ms-flex-item-align: center; + align-self: center; + padding: 24px; + border-radius: 70px; + border-width: 1px; + border-style: solid; + width: 100%; + margin: 4px; + outline-width: 0; + background-color: transparent; +} + +.emotion-224 #email-b4dd2ae2-68e9-4662-bfd3-b2860162a5aa:focus { + border-color: #000; +} + +.emotion-224 #hsForm_b4dd2ae2-68e9-4662-bfd3-b2860162a5aa input[type=submit] { + display: none; +} + +.emotion-224 .celo-hbspt { + width: 100%; +} + +.emotion-224 .celo-hbspt * { + box-sizing: border-box; +} + +.emotion-224 .celo-hbspt fieldset { + border: 0; + padding: 0; + margin: 0; + max-width: 100%; +} + +@media (min-width: 576px) and (max-width: 992px) { + .emotion-224 .celo-hbspt fieldset { + margin-right: 0!important; + width: 100%!important; + } +} + @media (max-width: 576px) { - .emotion-222 { - text-align: center; + .emotion-224 .celo-hbspt fieldset { + float: none; + width: 100%; } } -.emotion-224 { - color: inherit; +.emotion-224 .celo-hbspt fieldset.form-columns-2 .hs-form-field { + width: 50%; + float: left; +} + +@media (min-width: 576px) and (max-width: 992px) { + .emotion-224 .celo-hbspt fieldset.form-columns-2 .hs-form-field { + float: none; + width: 100%; + } +} + +@media (max-width: 576px) { + .emotion-224 .celo-hbspt fieldset.form-columns-2 .hs-form-field { + float: none; + width: 100%; + } +} + +.emotion-224 .celo-hbspt .field { + margin-bottom: 32px; +} + +.emotion-224 .celo-hbspt .input { + margin-right: 26px; +} + +.emotion-224 .celo-hbspt .hs-input { + box-sizing: border-box; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex-direction: column; + -ms-flex-direction: column; + flex-direction: column; + font-family: Inter,sans-serif; + font-size: 20px; + line-height: 28; + text-rendering: geometricPrecision; + color: #111214; + line-height: 28px; + -webkit-align-self: center; + -ms-flex-item-align: center; + align-self: center; + padding: 24px; + border-radius: 70px; + border-width: 1px; + border-style: solid; + width: 100%; + margin: 4px; + outline-width: 0; + background-color: transparent; + border-color: rgba(0, 0, 0, 0.2); +} + +.emotion-224 .celo-hbspt .hs-input:focus { + border-color: #000; +} + +.emotion-224 .hs-custom-style fieldset textarea { + box-sizing: border-box; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex-direction: column; + -ms-flex-direction: column; + flex-direction: column; + font-family: Inter,sans-serif; + font-size: 20px; + line-height: 28; + text-rendering: geometricPrecision; + color: #111214; + line-height: 28px; + -webkit-align-self: center; + -ms-flex-item-align: center; + align-self: center; + padding: 24px; + border-radius: 70px; + border-width: 1px; + border-style: solid; + width: 100%; + margin: 4px; + outline-width: 0; + background-color: transparent; +} + +.emotion-224 .hs-custom-style fieldset textarea:focus { + border-color: #000; +} + +.emotion-224 .celo-hbspt .contact-error { + border-color: #E70532; +} + +.emotion-224 .celo-hbspt .hs-error-msg { + color: #E70532; +} + +.emotion-224 input[type='checkbox'] { + -webkit-flex-basis: 0; + -ms-flex-preferred-size: 0; + flex-basis: 0; +} + +.emotion-224 input.hs-button { + font-family: Jost,futura-pt,futura,sans-serif; + font-size: 16px; + line-height: 16; + text-align: center; + text-rendering: geometricPrecision; + color: #111214; + cursor: pointer; + font-weight: 500; + line-height: 16px; + -webkit-text-decoration: none; + text-decoration: none; + background-color: #FCFF52; + color: #000; + padding: 24px 64px; + border-radius: 70px; + width: -webkit-fit-content; + width: -moz-fit-content; + width: fit-content; + border: 1px solid #CCCCCC; + margin-top: 32px; +} + +.emotion-224 input.hs-button:hover { + background-color: #000; + color: #FFFFFF; +} + +.emotion-224 input.hs-button:active { + background-color: #000; + color: #FFFFFF; +} + +.emotion-224 ul { + list-style-type: none; +} + +.emotion-224 .hs-error-msg { + color: #FF7F6D; +} + +.emotion-224 .legal-consent-container { + font-weight: 200; + margin: 0; + margin-block-start: 0; + margin-block-end: 0; + font-family: EB Garamond,eb-garamond,Garamond,serif; + font-size: 16px; + line-height: 20; + text-rendering: geometricPrecision; + color: #111214; + line-height: 20px; +} + +.emotion-224 a { + color: #1AB775; } .emotion-225 { @@ -673,6 +878,7 @@ exports[`Experience/Composition renders 1`] = ` -ms-flex-direction: column; flex-direction: column; grid-column: span 2; + grid-row-start: 2; } @media (min-width: 576px) and (max-width: 992px) { @@ -681,6 +887,12 @@ exports[`Experience/Composition renders 1`] = ` } } +@media (min-width: 576px) and (max-width: 992px) { + .emotion-225 { + grid-row-start: 3; + } +} + .emotion-226 { box-sizing: border-box; display: -webkit-box; @@ -720,37 +932,37 @@ exports[`Experience/Composition renders 1`] = ` } .emotion-228 { - font-weight: normal; - margin: 0; - margin-block-start: 0; - margin-block-end: 0; - font-family: Jost,futura-pt,futura,sans-serif; - font-size: 16px; - line-height: 18; - font-weight: 500; - text-rendering: geometricPrecision; - color: #111214; - line-height: 18px; + font-family: Inter,sans-serif; + margin-top: 0; + font-weight: 200; margin-bottom: 20px; } -.emotion-229 { +.emotion-230 { margin-top: 8px; margin-bottom: 8px; } -.emotion-230 { +.emotion-231 { + box-sizing: border-box; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex-direction: column; + -ms-flex-direction: column; + flex-direction: column; display: inline; } -.emotion-231 { +.emotion-232 { color: inherit; cursor: pointer; text-decoration-style: solid; text-decoration-line: underline; display: inline; opacity: 1; - font-weight: normal; + font-weight: 200; margin: 0; margin-block-start: 0; margin-block-end: 0; @@ -760,6 +972,11 @@ exports[`Experience/Composition renders 1`] = ` text-rendering: geometricPrecision; color: #111214; line-height: 20px; + font-family: Inter,sans-serif; + font-weight: 700; + border: 1px solid rgba(0, 0, 0, 0.2); + padding: 10.5px 16px; + border-radius: 70px; text-decoration-line: none; display: -webkit-inline-box; display: -webkit-inline-flex; @@ -771,21 +988,21 @@ exports[`Experience/Composition renders 1`] = ` align-items: center; } -.emotion-231:hover { +.emotion-232:hover { opacity: 0.75; } -.emotion-231:active { +.emotion-232:active { opacity: 1; } -.emotion-253 { +.emotion-242 { padding-left: 25px; padding-right: 25px; } @media (max-width: 576px) { - .emotion-253 { + .emotion-242 { margin-top: 35px; width: 50%; padding-left: 10px; @@ -793,14 +1010,14 @@ exports[`Experience/Composition renders 1`] = ` } } -.emotion-299 { +.emotion-278 { padding-left: 25px; padding-right: 25px; padding-end: 0; } @media (max-width: 576px) { - .emotion-299 { + .emotion-278 { margin-top: 35px; width: 50%; padding-left: 10px; @@ -808,11 +1025,29 @@ exports[`Experience/Composition renders 1`] = ` } } -.emotion-304 { - padding-right: 8px; +.emotion-290 { + box-sizing: border-box; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex-direction: column; + -ms-flex-direction: column; + flex-direction: column; + overflow: hidden; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + -webkit-align-self: center; + -ms-flex-item-align: center; + align-self: center; + width: 100%; + background-color: #FBF6F1; + background-color: #FCFF52; } -.emotion-346 { +.emotion-291 { box-sizing: border-box; display: -webkit-box; display: -webkit-flex; @@ -841,7 +1076,7 @@ exports[`Experience/Composition renders 1`] = ` } @media (min-width: 576px) and (max-width: 992px) { - .emotion-346 { + .emotion-291 { display: grid; grid-auto-rows: auto; -webkit-align-self: center; @@ -858,7 +1093,7 @@ exports[`Experience/Composition renders 1`] = ` } @media (min-width: 992px) { - .emotion-346 { + .emotion-291 { display: grid; grid-auto-rows: auto; -webkit-align-self: center; @@ -870,39 +1105,39 @@ exports[`Experience/Composition renders 1`] = ` } @media (min-width: 992px) { - .emotion-346 { + .emotion-291 { grid-template-columns: 1fr; } } @media (min-width: 576px) and (max-width: 992px) { - .emotion-346 { + .emotion-291 { grid-template-columns: 1fr; } } @media (min-width: 992px) { - .emotion-346 { + .emotion-291 { margin-top: 60px; margin-bottom: 60px; } } @media (min-width: 576px) and (max-width: 992px) { - .emotion-346 { + .emotion-291 { margin-top: 40px; margin-bottom: 40px; } } @media (max-width: 576px) { - .emotion-346 { + .emotion-291 { margin-top: 30px; margin-bottom: 30px; } } -.emotion-347 { +.emotion-292 { box-sizing: border-box; display: -webkit-box; display: -webkit-flex; @@ -917,10 +1152,15 @@ exports[`Experience/Composition renders 1`] = ` -webkit-box-pack: justify; -webkit-justify-content: space-between; justify-content: space-between; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + border-bottom: 1px solid rgba(0, 0, 0, 0.2); } @media (max-width: 576px) { - .emotion-347 { + .emotion-292 { -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; @@ -932,100 +1172,70 @@ exports[`Experience/Composition renders 1`] = ` -webkit-box-align: center; -ms-flex-align: center; align-items: center; + border-bottom: none; } } -.emotion-348 { +.emotion-293 { box-sizing: border-box; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; + -webkit-flex-direction: column; + -ms-flex-direction: column; + flex-direction: column; -webkit-flex-direction: row; -ms-flex-direction: row; flex-direction: row; - margin-bottom: 20px; - overflow: hidden; +} + +.emotion-293>div:nth-child(-n+3) { + border-right: none; } @media (max-width: 576px) { - .emotion-348 { - -webkit-box-pack: center; - -ms-flex-pack: center; - -webkit-justify-content: center; - justify-content: center; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; + .emotion-293 { + margin-bottom: 40px; } } -.emotion-349 { - width: 20px; - height: 20px; - z-index: 10; +.emotion-294 { + border: 1px solid rgba(0, 0, 0, 0.2); + padding: 16px; } @media (max-width: 576px) { - .emotion-349 { - margin-bottom: 8px; + .emotion-294 { + padding: 16px; } } -.emotion-350 { - margin-left: 10px; - margin-right: 10px; - z-index: 10; +@media (min-width: 576px) { + .emotion-294 { + border-bottom: none; + } } -@media (max-width: 576px) { - .emotion-350 { - display: none; - } +.emotion-296 { + color: inherit; + cursor: pointer; + text-decoration-style: solid; + text-decoration-line: underline; + display: inline; + opacity: 1; } -.emotion-351 { - box-sizing: border-box; - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-flex-direction: column; - -ms-flex-direction: column; - flex-direction: column; - position: relative; +.emotion-296:hover { + opacity: 0.75; } -.emotion-352 { - box-sizing: border-box; - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-flex-direction: column; - -ms-flex-direction: column; - flex-direction: column; - background-color: #FFFFFF; - position: absolute; - height: 100%; - width: 101%; - -webkit-animation-duration: 250ms; - animation-duration: 250ms; - -webkit-animation-iteration-count: 1; - animation-iteration-count: 1; - -webkit-animation-timing-function: linear; - animation-timing-function: linear; - -webkit-animation-fill-mode: both; - animation-fill-mode: both; - -webkit-animation-delay: 3500ms; - animation-delay: 3500ms; - -webkit-animation-name: animation-0; - animation-name: animation-0; -} - -.emotion-353 { - font-weight: normal; +.emotion-296:active { + opacity: 1; +} + +.emotion-306 { + font-weight: 200; margin: 0; margin-block-start: 0; margin-block-end: 0; @@ -1035,24 +1245,17 @@ exports[`Experience/Composition renders 1`] = ` text-rendering: geometricPrecision; color: #111214; line-height: 20px; - font-style: italic; - -webkit-animation-fill-mode: both; - animation-fill-mode: both; - -webkit-animation-iteration-count: 1; - animation-iteration-count: 1; - -webkit-animation-duration: 750ms; - animation-duration: 750ms; - -webkit-animation-name: animation-1; - animation-name: animation-1; + font-family: Inter,sans-serif; + z-index: 10; } @media (max-width: 576px) { - .emotion-353 { - text-align: center; + .emotion-306 { + margin-bottom: 17px; } } -.emotion-354 { +.emotion-307 { box-sizing: border-box; display: -webkit-box; display: -webkit-flex; @@ -1061,24 +1264,13 @@ exports[`Experience/Composition renders 1`] = ` -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; - background-color: #FFFFFF; - position: absolute; - height: 100%; - width: 101%; - -webkit-animation-duration: 250ms; - animation-duration: 250ms; - -webkit-animation-iteration-count: 1; - animation-iteration-count: 1; - -webkit-animation-timing-function: linear; - animation-timing-function: linear; - -webkit-animation-fill-mode: both; - animation-fill-mode: both; - -webkit-animation-name: animation-2; - animation-name: animation-2; -} - -.emotion-355 { - font-weight: normal; + -webkit-flex-direction: row; + -ms-flex-direction: row; + flex-direction: row; +} + +.emotion-308 { + font-weight: 200; margin: 0; margin-block-start: 0; margin-block-end: 0; @@ -1088,7 +1280,108 @@ exports[`Experience/Composition renders 1`] = ` text-rendering: geometricPrecision; color: #111214; line-height: 20px; - z-index: 10; +} + +.emotion-308:first-child { + margin-right: 20px; +} + +.emotion-308 a { + text-decoration-line: none; +} + +.emotion-310 { + color: inherit; + cursor: pointer; + text-decoration-style: solid; + text-decoration-line: underline; + display: inline; + opacity: 1; + font-family: Inter,sans-serif; +} + +.emotion-310:hover { + opacity: 0.75; +} + +.emotion-310:active { + opacity: 1; +} + +.emotion-314 { + width: 86px; + height: 86px; + background-color: #FFFFFF; + border: none; + position: absolute; + transition-property: all; + transition-duration: 400ms; + top: 0; + left: 0; +} + +@media (max-width: 576px) { + .emotion-314 { + background-color: #FFFFFF; + } +} + +@media (max-width: 576px) { + .emotion-314 { + width: 86px; + height: 86px; + background-color: #FFFFFF; + border: none; + position: absolute; + transition-property: all; + transition-duration: 400ms; + top: 0; + left: 0; + } + + @media (max-width: 576px) { + .emotion-314 { + background-color: #FFFFFF; + } + } +} + +.emotion-315 { + width: 86px; + height: 86px; + background-color: #FFFFFF; + border: none; + position: absolute; + transition-property: all; + transition-duration: 400ms; + top: 0; + left: 172px; +} + +@media (max-width: 576px) { + .emotion-315 { + background-color: #FFFFFF; + } +} + +@media (max-width: 576px) { + .emotion-315 { + width: 86px; + height: 86px; + background-color: #FFFFFF; + border: none; + position: absolute; + transition-property: all; + transition-duration: 400ms; + top: 0; + left: 172px; + } + + @media (max-width: 576px) { + .emotion-315 { + background-color: #FFFFFF; + } + } }
- -
+ +

- Nothing herein constitutes an offer to sell, or the solicitation of an offer to buy, any securities or tokens. -

-

- Read more in Celo - - Terms of Service - + World-changing ideas in your inbox

+
- Celo + Celo for
- - Home - + + Developers + +
- -
- - About - + + Founders + +
- -
- - Careers - + + Community + +
- -
- - Validators - + + Validators + +
+ +
+
+ Tech +
- - Developers - + + Docs + +
-
-
- - Alliance - + + Security Audits + +
- -
- - Community - + + Reserve + +
- -
- - Annual Report - + + Government + +
- Technology + Company
- - Docs - + + Vision + +
- -
- - Security Audits - + + Ecosystem + +
- -
- - Reserve - + + Careers + +
- -
- - White Papers - + + Press + +
- -
- - Government - -
-
- -
-
- Resources -
-
-
- - Brand Policy - -
-
-
-
- - Press - -
-
-
-
- - Events - -
-
-
-
- - EventKit - -
-
-
-
- - BrandKit - -
-
-
-
- - MerchantKit - -
-
-
-
- - GrantKit - -
-
-
-
- - PilotKit - + + White Papers + +
-
-
- - Ecosystem Fund - + + Events + +
- Social + Kits
- - - - - Medium - - - - - Blog - -
-
-
-
- - - - - Github - - - - - GitHub - -
-
-
-
- - - - - Twitter - - - - - Twitter - -
-
-
-
- - - - - Forum - - - - - Forum - -
-
-
-
- - - - - Chat - - - - - Chat - + BrandKit + +
- -
- - - - - YouTube - - - - - YouTube - + PilotKit + +
- -
- - - - - Instagram - - - - - Instagram - + GrantKit + +
+ + + + + +
+
+
+
+
- + + Chat + + + +
+
+
- + + Medium + + + +
+
+
- + + Twitter + + + +
+
+
- + + Github + + + +
-
-
-
-
-
-
+ + © 2022 Celo Inc. +
- - - | -
- - " - Change the Story - " - + + Privacy Policy + +
+
+
+ className="emotion-231" + > + + Terms of Use + +
- - The Celo Foundation, © Celo 2022 -
+
+
`; diff --git a/src/_page-tests/experience/__snapshots__/exchange-icons.test.tsx.snap b/src/_page-tests/experience/__snapshots__/exchange-icons.test.tsx.snap index f0ea6456..0a4f2d26 100644 --- a/src/_page-tests/experience/__snapshots__/exchange-icons.test.tsx.snap +++ b/src/_page-tests/experience/__snapshots__/exchange-icons.test.tsx.snap @@ -1,48 +1,6 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`Experience/ExchangeIcons renders 1`] = ` -@keyframes animation-0 { - from { - -webkit-transform: translateX(-100%); - -moz-transform: translateX(-100%); - -ms-transform: translateX(-100%); - transform: translateX(-100%); - } - - to { - -webkit-transform: translateX(0%); - -moz-transform: translateX(0%); - -ms-transform: translateX(0%); - transform: translateX(0%); - } -} - -@keyframes animation-1 { - from { - opacity: 0; - } - - to { - opacity: 1; - } -} - -@keyframes animation-2 { - from { - -webkit-transform: translateX(0%); - -moz-transform: translateX(0%); - -ms-transform: translateX(0%); - transform: translateX(0%); - } - - to { - -webkit-transform: translateX(100%); - -moz-transform: translateX(100%); - -ms-transform: translateX(100%); - transform: translateX(100%); - } -} - .emotion-0 { box-sizing: border-box; display: -webkit-box; @@ -187,14 +145,13 @@ exports[`Experience/ExchangeIcons renders 1`] = ` } .emotion-8 { - font-weight: normal; + font-weight: 200; margin: 0; margin-block-start: 0; margin-block-end: 0; - font-family: Jost,futura-pt,futura,sans-serif; + font-family: GT-Alpina,serif; font-size: 24px; line-height: 28; - font-weight: 400; text-rendering: geometricPrecision; color: #111214; line-height: 28px; @@ -269,11 +226,11 @@ exports[`Experience/ExchangeIcons renders 1`] = ` } .emotion-34 { - font-weight: normal; + font-weight: 200; margin: 0; margin-block-start: 0; margin-block-end: 0; - font-family: Jost,futura-pt,futura,sans-serif; + font-family: GT-Alpina,serif; font-size: 16px; line-height: 18; font-weight: 500; @@ -474,6 +431,14 @@ exports[`Experience/ExchangeIcons renders 1`] = ` } .emotion-163 { + box-sizing: border-box; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex-direction: column; + -ms-flex-direction: column; + flex-direction: column; display: inline; } @@ -541,6 +506,14 @@ exports[`Experience/ExchangeIcons renders 1`] = ` -ms-flex-item-align: center; align-self: center; width: 100%; + background-color: #FBF6F1; + background-color: #FCFF52; +} + +@media (max-width: 576px) { + .emotion-348 { + padding: 33px; + } } .emotion-349 { @@ -569,6 +542,7 @@ exports[`Experience/ExchangeIcons renders 1`] = ` flex-wrap: wrap; -webkit-column-gap: 24px; column-gap: 24px; + gap: 0; } @media (min-width: 576px) and (max-width: 992px) { @@ -640,11 +614,12 @@ exports[`Experience/ExchangeIcons renders 1`] = ` -ms-flex-direction: column; flex-direction: column; grid-column: span 1; + grid-row-start: 1; } @media (min-width: 576px) and (max-width: 992px) { .emotion-350 { - grid-column: span 3; + grid-column: span 1; } } @@ -657,24 +632,30 @@ exports[`Experience/ExchangeIcons renders 1`] = ` -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; - margin-bottom: 20px; + margin-top: 80px; + margin-bottom: 48px; } -@media (max-width: 576px) { - .emotion-351 { - margin-bottom: 30px; - -webkit-box-pack: center; - -ms-flex-pack: center; - -webkit-justify-content: center; - justify-content: center; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; +.emotion-352 { + box-sizing: border-box; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex-direction: column; + -ms-flex-direction: column; + flex-direction: column; + grid-column: span 1; + grid-row-start: 2; +} + +@media (min-width: 576px) and (max-width: 992px) { + .emotion-352 { + grid-column: span 1; } } -.emotion-352 { +.emotion-353 { box-sizing: border-box; display: -webkit-box; display: -webkit-flex; @@ -683,24 +664,23 @@ exports[`Experience/ExchangeIcons renders 1`] = ` -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; - padding-bottom: 20px; } @media (max-width: 576px) { - .emotion-352 { + .emotion-353 { -webkit-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; + -webkit-align-items: flex-start; + -webkit-box-align: flex-start; + -ms-flex-align: flex-start; + align-items: flex-start; } } -.emotion-353 { - font-weight: normal; +.emotion-354 { + font-weight: 200; margin: 0; margin-block-start: 0; margin-block-end: 0; @@ -710,19 +690,252 @@ exports[`Experience/ExchangeIcons renders 1`] = ` text-rendering: geometricPrecision; color: #111214; line-height: 20px; + font-family: Inter,sans-serif; margin-bottom: 20px; max-width: 350px; text-align: left; } +.emotion-355 { + width: 100%; + display: inline-block; +} + +.emotion-355 img { + display: none; +} + +.emotion-355 .grecaptcha-badge { + display: none; +} + +.emotion-355 #email-b4dd2ae2-68e9-4662-bfd3-b2860162a5aa { + box-sizing: border-box; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex-direction: column; + -ms-flex-direction: column; + flex-direction: column; + font-family: Inter,sans-serif; + font-size: 20px; + line-height: 28; + text-rendering: geometricPrecision; + color: #111214; + line-height: 28px; + -webkit-align-self: center; + -ms-flex-item-align: center; + align-self: center; + padding: 24px; + border-radius: 70px; + border-width: 1px; + border-style: solid; + width: 100%; + margin: 4px; + outline-width: 0; + background-color: transparent; +} + +.emotion-355 #email-b4dd2ae2-68e9-4662-bfd3-b2860162a5aa:focus { + border-color: #000; +} + +.emotion-355 #hsForm_b4dd2ae2-68e9-4662-bfd3-b2860162a5aa input[type=submit] { + display: none; +} + +.emotion-355 .celo-hbspt { + width: 100%; +} + +.emotion-355 .celo-hbspt * { + box-sizing: border-box; +} + +.emotion-355 .celo-hbspt fieldset { + border: 0; + padding: 0; + margin: 0; + max-width: 100%; +} + +@media (min-width: 576px) and (max-width: 992px) { + .emotion-355 .celo-hbspt fieldset { + margin-right: 0!important; + width: 100%!important; + } +} + @media (max-width: 576px) { - .emotion-353 { - text-align: center; + .emotion-355 .celo-hbspt fieldset { + float: none; + width: 100%; } } -.emotion-355 { - color: inherit; +.emotion-355 .celo-hbspt fieldset.form-columns-2 .hs-form-field { + width: 50%; + float: left; +} + +@media (min-width: 576px) and (max-width: 992px) { + .emotion-355 .celo-hbspt fieldset.form-columns-2 .hs-form-field { + float: none; + width: 100%; + } +} + +@media (max-width: 576px) { + .emotion-355 .celo-hbspt fieldset.form-columns-2 .hs-form-field { + float: none; + width: 100%; + } +} + +.emotion-355 .celo-hbspt .field { + margin-bottom: 32px; +} + +.emotion-355 .celo-hbspt .input { + margin-right: 26px; +} + +.emotion-355 .celo-hbspt .hs-input { + box-sizing: border-box; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex-direction: column; + -ms-flex-direction: column; + flex-direction: column; + font-family: Inter,sans-serif; + font-size: 20px; + line-height: 28; + text-rendering: geometricPrecision; + color: #111214; + line-height: 28px; + -webkit-align-self: center; + -ms-flex-item-align: center; + align-self: center; + padding: 24px; + border-radius: 70px; + border-width: 1px; + border-style: solid; + width: 100%; + margin: 4px; + outline-width: 0; + background-color: transparent; + border-color: rgba(0, 0, 0, 0.2); +} + +.emotion-355 .celo-hbspt .hs-input:focus { + border-color: #000; +} + +.emotion-355 .hs-custom-style fieldset textarea { + box-sizing: border-box; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex-direction: column; + -ms-flex-direction: column; + flex-direction: column; + font-family: Inter,sans-serif; + font-size: 20px; + line-height: 28; + text-rendering: geometricPrecision; + color: #111214; + line-height: 28px; + -webkit-align-self: center; + -ms-flex-item-align: center; + align-self: center; + padding: 24px; + border-radius: 70px; + border-width: 1px; + border-style: solid; + width: 100%; + margin: 4px; + outline-width: 0; + background-color: transparent; +} + +.emotion-355 .hs-custom-style fieldset textarea:focus { + border-color: #000; +} + +.emotion-355 .celo-hbspt .contact-error { + border-color: #E70532; +} + +.emotion-355 .celo-hbspt .hs-error-msg { + color: #E70532; +} + +.emotion-355 input[type='checkbox'] { + -webkit-flex-basis: 0; + -ms-flex-preferred-size: 0; + flex-basis: 0; +} + +.emotion-355 input.hs-button { + font-family: Jost,futura-pt,futura,sans-serif; + font-size: 16px; + line-height: 16; + text-align: center; + text-rendering: geometricPrecision; + color: #111214; + cursor: pointer; + font-weight: 500; + line-height: 16px; + -webkit-text-decoration: none; + text-decoration: none; + background-color: #FCFF52; + color: #000; + padding: 24px 64px; + border-radius: 70px; + width: -webkit-fit-content; + width: -moz-fit-content; + width: fit-content; + border: 1px solid #CCCCCC; + margin-top: 32px; +} + +.emotion-355 input.hs-button:hover { + background-color: #000; + color: #FFFFFF; +} + +.emotion-355 input.hs-button:active { + background-color: #000; + color: #FFFFFF; +} + +.emotion-355 ul { + list-style-type: none; +} + +.emotion-355 .hs-error-msg { + color: #FF7F6D; +} + +.emotion-355 .legal-consent-container { + font-weight: 200; + margin: 0; + margin-block-start: 0; + margin-block-end: 0; + font-family: EB Garamond,eb-garamond,Garamond,serif; + font-size: 16px; + line-height: 20; + text-rendering: geometricPrecision; + color: #111214; + line-height: 20px; +} + +.emotion-355 a { + color: #1AB775; } .emotion-356 { @@ -735,6 +948,7 @@ exports[`Experience/ExchangeIcons renders 1`] = ` -ms-flex-direction: column; flex-direction: column; grid-column: span 2; + grid-row-start: 2; } @media (min-width: 576px) and (max-width: 992px) { @@ -743,6 +957,12 @@ exports[`Experience/ExchangeIcons renders 1`] = ` } } +@media (min-width: 576px) and (max-width: 992px) { + .emotion-356 { + grid-row-start: 3; + } +} + .emotion-357 { box-sizing: border-box; display: -webkit-box; @@ -782,33 +1002,25 @@ exports[`Experience/ExchangeIcons renders 1`] = ` } .emotion-359 { - font-weight: normal; - margin: 0; - margin-block-start: 0; - margin-block-end: 0; - font-family: Jost,futura-pt,futura,sans-serif; - font-size: 16px; - line-height: 18; - font-weight: 500; - text-rendering: geometricPrecision; - color: #111214; - line-height: 18px; + font-family: Inter,sans-serif; + margin-top: 0; + font-weight: 200; margin-bottom: 20px; } -.emotion-360 { +.emotion-361 { margin-top: 8px; margin-bottom: 8px; } -.emotion-362 { +.emotion-363 { color: inherit; cursor: pointer; text-decoration-style: solid; text-decoration-line: underline; display: inline; opacity: 1; - font-weight: normal; + font-weight: 200; margin: 0; margin-block-start: 0; margin-block-end: 0; @@ -818,6 +1030,11 @@ exports[`Experience/ExchangeIcons renders 1`] = ` text-rendering: geometricPrecision; color: #111214; line-height: 20px; + font-family: Inter,sans-serif; + font-weight: 700; + border: 1px solid rgba(0, 0, 0, 0.2); + padding: 10.5px 16px; + border-radius: 70px; text-decoration-line: none; display: -webkit-inline-box; display: -webkit-inline-flex; @@ -829,21 +1046,21 @@ exports[`Experience/ExchangeIcons renders 1`] = ` align-items: center; } -.emotion-362:hover { +.emotion-363:hover { opacity: 0.75; } -.emotion-362:active { +.emotion-363:active { opacity: 1; } -.emotion-384 { +.emotion-373 { padding-left: 25px; padding-right: 25px; } @media (max-width: 576px) { - .emotion-384 { + .emotion-373 { margin-top: 35px; width: 50%; padding-left: 10px; @@ -851,14 +1068,14 @@ exports[`Experience/ExchangeIcons renders 1`] = ` } } -.emotion-430 { +.emotion-409 { padding-left: 25px; padding-right: 25px; padding-end: 0; } @media (max-width: 576px) { - .emotion-430 { + .emotion-409 { margin-top: 35px; width: 50%; padding-left: 10px; @@ -866,11 +1083,29 @@ exports[`Experience/ExchangeIcons renders 1`] = ` } } -.emotion-435 { - padding-right: 8px; +.emotion-421 { + box-sizing: border-box; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex-direction: column; + -ms-flex-direction: column; + flex-direction: column; + overflow: hidden; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + -webkit-align-self: center; + -ms-flex-item-align: center; + align-self: center; + width: 100%; + background-color: #FBF6F1; + background-color: #FCFF52; } -.emotion-477 { +.emotion-422 { box-sizing: border-box; display: -webkit-box; display: -webkit-flex; @@ -899,7 +1134,7 @@ exports[`Experience/ExchangeIcons renders 1`] = ` } @media (min-width: 576px) and (max-width: 992px) { - .emotion-477 { + .emotion-422 { display: grid; grid-auto-rows: auto; -webkit-align-self: center; @@ -916,7 +1151,7 @@ exports[`Experience/ExchangeIcons renders 1`] = ` } @media (min-width: 992px) { - .emotion-477 { + .emotion-422 { display: grid; grid-auto-rows: auto; -webkit-align-self: center; @@ -928,39 +1163,39 @@ exports[`Experience/ExchangeIcons renders 1`] = ` } @media (min-width: 992px) { - .emotion-477 { + .emotion-422 { grid-template-columns: 1fr; } } @media (min-width: 576px) and (max-width: 992px) { - .emotion-477 { + .emotion-422 { grid-template-columns: 1fr; } } @media (min-width: 992px) { - .emotion-477 { + .emotion-422 { margin-top: 60px; margin-bottom: 60px; } } @media (min-width: 576px) and (max-width: 992px) { - .emotion-477 { + .emotion-422 { margin-top: 40px; margin-bottom: 40px; } } @media (max-width: 576px) { - .emotion-477 { + .emotion-422 { margin-top: 30px; margin-bottom: 30px; } } -.emotion-478 { +.emotion-423 { box-sizing: border-box; display: -webkit-box; display: -webkit-flex; @@ -975,10 +1210,15 @@ exports[`Experience/ExchangeIcons renders 1`] = ` -webkit-box-pack: justify; -webkit-justify-content: space-between; justify-content: space-between; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + border-bottom: 1px solid rgba(0, 0, 0, 0.2); } @media (max-width: 576px) { - .emotion-478 { + .emotion-423 { -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; @@ -990,100 +1230,53 @@ exports[`Experience/ExchangeIcons renders 1`] = ` -webkit-box-align: center; -ms-flex-align: center; align-items: center; + border-bottom: none; } } -.emotion-479 { +.emotion-424 { box-sizing: border-box; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; + -webkit-flex-direction: column; + -ms-flex-direction: column; + flex-direction: column; -webkit-flex-direction: row; -ms-flex-direction: row; flex-direction: row; - margin-bottom: 20px; - overflow: hidden; } -@media (max-width: 576px) { - .emotion-479 { - -webkit-box-pack: center; - -ms-flex-pack: center; - -webkit-justify-content: center; - justify-content: center; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - } -} - -.emotion-480 { - width: 20px; - height: 20px; - z-index: 10; +.emotion-424>div:nth-child(-n+3) { + border-right: none; } @media (max-width: 576px) { - .emotion-480 { - margin-bottom: 8px; + .emotion-424 { + margin-bottom: 40px; } } -.emotion-481 { - margin-left: 10px; - margin-right: 10px; - z-index: 10; +.emotion-425 { + border: 1px solid rgba(0, 0, 0, 0.2); + padding: 16px; } @media (max-width: 576px) { - .emotion-481 { - display: none; + .emotion-425 { + padding: 16px; } } -.emotion-482 { - box-sizing: border-box; - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-flex-direction: column; - -ms-flex-direction: column; - flex-direction: column; - position: relative; +@media (min-width: 576px) { + .emotion-425 { + border-bottom: none; + } } -.emotion-483 { - box-sizing: border-box; - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-flex-direction: column; - -ms-flex-direction: column; - flex-direction: column; - background-color: #FFFFFF; - position: absolute; - height: 100%; - width: 101%; - -webkit-animation-duration: 250ms; - animation-duration: 250ms; - -webkit-animation-iteration-count: 1; - animation-iteration-count: 1; - -webkit-animation-timing-function: linear; - animation-timing-function: linear; - -webkit-animation-fill-mode: both; - animation-fill-mode: both; - -webkit-animation-delay: 3500ms; - animation-delay: 3500ms; - -webkit-animation-name: animation-0; - animation-name: animation-0; -} - -.emotion-484 { - font-weight: normal; +.emotion-437 { + font-weight: 200; margin: 0; margin-block-start: 0; margin-block-end: 0; @@ -1093,24 +1286,17 @@ exports[`Experience/ExchangeIcons renders 1`] = ` text-rendering: geometricPrecision; color: #111214; line-height: 20px; - font-style: italic; - -webkit-animation-fill-mode: both; - animation-fill-mode: both; - -webkit-animation-iteration-count: 1; - animation-iteration-count: 1; - -webkit-animation-duration: 750ms; - animation-duration: 750ms; - -webkit-animation-name: animation-1; - animation-name: animation-1; + font-family: Inter,sans-serif; + z-index: 10; } @media (max-width: 576px) { - .emotion-484 { - text-align: center; + .emotion-437 { + margin-bottom: 17px; } } -.emotion-485 { +.emotion-438 { box-sizing: border-box; display: -webkit-box; display: -webkit-flex; @@ -1119,24 +1305,13 @@ exports[`Experience/ExchangeIcons renders 1`] = ` -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; - background-color: #FFFFFF; - position: absolute; - height: 100%; - width: 101%; - -webkit-animation-duration: 250ms; - animation-duration: 250ms; - -webkit-animation-iteration-count: 1; - animation-iteration-count: 1; - -webkit-animation-timing-function: linear; - animation-timing-function: linear; - -webkit-animation-fill-mode: both; - animation-fill-mode: both; - -webkit-animation-name: animation-2; - animation-name: animation-2; -} - -.emotion-486 { - font-weight: normal; + -webkit-flex-direction: row; + -ms-flex-direction: row; + flex-direction: row; +} + +.emotion-439 { + font-weight: 200; margin: 0; margin-block-start: 0; margin-block-end: 0; @@ -1146,7 +1321,108 @@ exports[`Experience/ExchangeIcons renders 1`] = ` text-rendering: geometricPrecision; color: #111214; line-height: 20px; - z-index: 10; +} + +.emotion-439:first-child { + margin-right: 20px; +} + +.emotion-439 a { + text-decoration-line: none; +} + +.emotion-441 { + color: inherit; + cursor: pointer; + text-decoration-style: solid; + text-decoration-line: underline; + display: inline; + opacity: 1; + font-family: Inter,sans-serif; +} + +.emotion-441:hover { + opacity: 0.75; +} + +.emotion-441:active { + opacity: 1; +} + +.emotion-445 { + width: 86px; + height: 86px; + background-color: #FFFFFF; + border: none; + position: absolute; + transition-property: all; + transition-duration: 400ms; + top: 0; + left: 0; +} + +@media (max-width: 576px) { + .emotion-445 { + background-color: #FFFFFF; + } +} + +@media (max-width: 576px) { + .emotion-445 { + width: 86px; + height: 86px; + background-color: #FFFFFF; + border: none; + position: absolute; + transition-property: all; + transition-duration: 400ms; + top: 0; + left: 0; + } + + @media (max-width: 576px) { + .emotion-445 { + background-color: #FFFFFF; + } + } +} + +.emotion-446 { + width: 86px; + height: 86px; + background-color: #FFFFFF; + border: none; + position: absolute; + transition-property: all; + transition-duration: 400ms; + top: 0; + left: 172px; +} + +@media (max-width: 576px) { + .emotion-446 { + background-color: #FFFFFF; + } +} + +@media (max-width: 576px) { + .emotion-446 { + width: 86px; + height: 86px; + background-color: #FFFFFF; + border: none; + position: absolute; + transition-property: all; + transition-duration: 400ms; + top: 0; + left: 172px; + } + + @media (max-width: 576px) { + .emotion-446 { + background-color: #FFFFFF; + } + } }
- -
+ +

- Nothing herein constitutes an offer to sell, or the solicitation of an offer to buy, any securities or tokens. -

-

- Read more in Celo - - Terms of Service - + World-changing ideas in your inbox

+
- Celo + Celo for
- - Home - + + Developers + +
-
-
- - About - + + Founders + +
- -
- - Careers - + + Community + +
- -
- - Validators - + + Validators + +
+ +
+
+ Tech +
- - Developers - + + Docs + +
-
-
- - Alliance - + + Security Audits + +
- -
- - Community - + + Reserve + +
- -
- - Annual Report - + + Government + +
- Technology + Company
- - Docs - + + Vision + +
-
-
- - Security Audits - + + Ecosystem + +
- -
- - Reserve - + + Careers + +
- -
- - White Papers - + + Press + +
- -
- - Government - -
-
- -
-
- Resources -
-
-
- - Brand Policy - -
-
-
-
- - Press - -
-
-
-
- - Events - -
-
-
-
- - EventKit - -
-
-
-
- - BrandKit - -
-
-
-
- - MerchantKit - -
-
-
-
- - GrantKit - -
-
-
-
- - PilotKit - + + White Papers + +
-
-
- - Ecosystem Fund - + + Events + +
- Social + Kits
- - - - - Medium - - - - - Blog - -
-
-
-
- - - - - Github - - - - - GitHub - -
-
-
-
- - - - - Twitter - - - - - Twitter - -
-
-
-
- - - - - Forum - - - - - Forum - -
-
-
-
- - - - - Chat - - - - - Chat - + BrandKit + +
-
-
- - - - - YouTube - - - - - YouTube - + PilotKit + +
- -
- - - - - Instagram - - - - - Instagram - + GrantKit + +
+ + + + + +
+
+
+
+
- + + Chat + + + +
+
+
- + + Medium + + + +
+
+
- + + Twitter + + + +
+
+
- + + Github + + + +
-
-
-
-
-
-
+ + © 2022 Celo Inc. +
- - - | -
- - " - Change the Story - " - + + Privacy Policy + +
+
+
+ className="emotion-163" + > + + Terms of Use + +
- - The Celo Foundation, © Celo 2022 -
+
+
`; diff --git a/src/_page-tests/experience/__snapshots__/icons.test.tsx.snap b/src/_page-tests/experience/__snapshots__/icons.test.tsx.snap index 5061220c..bcb72629 100644 --- a/src/_page-tests/experience/__snapshots__/icons.test.tsx.snap +++ b/src/_page-tests/experience/__snapshots__/icons.test.tsx.snap @@ -1,48 +1,6 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`Experience/Icons renders 1`] = ` -@keyframes animation-0 { - from { - -webkit-transform: translateX(-100%); - -moz-transform: translateX(-100%); - -ms-transform: translateX(-100%); - transform: translateX(-100%); - } - - to { - -webkit-transform: translateX(0%); - -moz-transform: translateX(0%); - -ms-transform: translateX(0%); - transform: translateX(0%); - } -} - -@keyframes animation-1 { - from { - opacity: 0; - } - - to { - opacity: 1; - } -} - -@keyframes animation-2 { - from { - -webkit-transform: translateX(0%); - -moz-transform: translateX(0%); - -ms-transform: translateX(0%); - transform: translateX(0%); - } - - to { - -webkit-transform: translateX(100%); - -moz-transform: translateX(100%); - -ms-transform: translateX(100%); - transform: translateX(100%); - } -} - .emotion-0 { box-sizing: border-box; display: -webkit-box; @@ -187,14 +145,13 @@ exports[`Experience/Icons renders 1`] = ` } .emotion-8 { - font-weight: normal; + font-weight: 200; margin: 0; margin-block-start: 0; margin-block-end: 0; - font-family: Jost,futura-pt,futura,sans-serif; + font-family: GT-Alpina,serif; font-size: 24px; line-height: 28; - font-weight: 400; text-rendering: geometricPrecision; color: #111214; line-height: 28px; @@ -269,11 +226,11 @@ exports[`Experience/Icons renders 1`] = ` } .emotion-34 { - font-weight: normal; + font-weight: 200; margin: 0; margin-block-start: 0; margin-block-end: 0; - font-family: Jost,futura-pt,futura,sans-serif; + font-family: GT-Alpina,serif; font-size: 16px; line-height: 18; font-weight: 500; @@ -456,6 +413,14 @@ exports[`Experience/Icons renders 1`] = ` } .emotion-158 { + box-sizing: border-box; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex-direction: column; + -ms-flex-direction: column; + flex-direction: column; display: inline; } @@ -481,11 +446,11 @@ exports[`Experience/Icons renders 1`] = ` } .emotion-164 { - font-weight: normal; + font-weight: 200; margin: 0; margin-block-start: 0; margin-block-end: 0; - font-family: Jost,futura-pt,futura,sans-serif; + font-family: GT-Alpina,serif; font-size: 16px; line-height: 18; font-weight: 500; @@ -546,6 +511,14 @@ exports[`Experience/Icons renders 1`] = ` -ms-flex-item-align: center; align-self: center; width: 100%; + background-color: #FBF6F1; + background-color: #FCFF52; +} + +@media (max-width: 576px) { + .emotion-199 { + padding: 33px; + } } .emotion-200 { @@ -574,6 +547,7 @@ exports[`Experience/Icons renders 1`] = ` flex-wrap: wrap; -webkit-column-gap: 24px; column-gap: 24px; + gap: 0; } @media (min-width: 576px) and (max-width: 992px) { @@ -645,11 +619,12 @@ exports[`Experience/Icons renders 1`] = ` -ms-flex-direction: column; flex-direction: column; grid-column: span 1; + grid-row-start: 1; } @media (min-width: 576px) and (max-width: 992px) { .emotion-201 { - grid-column: span 3; + grid-column: span 1; } } @@ -662,24 +637,30 @@ exports[`Experience/Icons renders 1`] = ` -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; - margin-bottom: 20px; + margin-top: 80px; + margin-bottom: 48px; } -@media (max-width: 576px) { - .emotion-202 { - margin-bottom: 30px; - -webkit-box-pack: center; - -ms-flex-pack: center; - -webkit-justify-content: center; - justify-content: center; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; +.emotion-203 { + box-sizing: border-box; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex-direction: column; + -ms-flex-direction: column; + flex-direction: column; + grid-column: span 1; + grid-row-start: 2; +} + +@media (min-width: 576px) and (max-width: 992px) { + .emotion-203 { + grid-column: span 1; } } -.emotion-203 { +.emotion-204 { box-sizing: border-box; display: -webkit-box; display: -webkit-flex; @@ -688,24 +669,23 @@ exports[`Experience/Icons renders 1`] = ` -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; - padding-bottom: 20px; } @media (max-width: 576px) { - .emotion-203 { + .emotion-204 { -webkit-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; + -webkit-align-items: flex-start; + -webkit-box-align: flex-start; + -ms-flex-align: flex-start; + align-items: flex-start; } } -.emotion-204 { - font-weight: normal; +.emotion-205 { + font-weight: 200; margin: 0; margin-block-start: 0; margin-block-end: 0; @@ -715,19 +695,252 @@ exports[`Experience/Icons renders 1`] = ` text-rendering: geometricPrecision; color: #111214; line-height: 20px; + font-family: Inter,sans-serif; margin-bottom: 20px; max-width: 350px; text-align: left; } +.emotion-206 { + width: 100%; + display: inline-block; +} + +.emotion-206 img { + display: none; +} + +.emotion-206 .grecaptcha-badge { + display: none; +} + +.emotion-206 #email-b4dd2ae2-68e9-4662-bfd3-b2860162a5aa { + box-sizing: border-box; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex-direction: column; + -ms-flex-direction: column; + flex-direction: column; + font-family: Inter,sans-serif; + font-size: 20px; + line-height: 28; + text-rendering: geometricPrecision; + color: #111214; + line-height: 28px; + -webkit-align-self: center; + -ms-flex-item-align: center; + align-self: center; + padding: 24px; + border-radius: 70px; + border-width: 1px; + border-style: solid; + width: 100%; + margin: 4px; + outline-width: 0; + background-color: transparent; +} + +.emotion-206 #email-b4dd2ae2-68e9-4662-bfd3-b2860162a5aa:focus { + border-color: #000; +} + +.emotion-206 #hsForm_b4dd2ae2-68e9-4662-bfd3-b2860162a5aa input[type=submit] { + display: none; +} + +.emotion-206 .celo-hbspt { + width: 100%; +} + +.emotion-206 .celo-hbspt * { + box-sizing: border-box; +} + +.emotion-206 .celo-hbspt fieldset { + border: 0; + padding: 0; + margin: 0; + max-width: 100%; +} + +@media (min-width: 576px) and (max-width: 992px) { + .emotion-206 .celo-hbspt fieldset { + margin-right: 0!important; + width: 100%!important; + } +} + @media (max-width: 576px) { - .emotion-204 { - text-align: center; + .emotion-206 .celo-hbspt fieldset { + float: none; + width: 100%; } } -.emotion-206 { - color: inherit; +.emotion-206 .celo-hbspt fieldset.form-columns-2 .hs-form-field { + width: 50%; + float: left; +} + +@media (min-width: 576px) and (max-width: 992px) { + .emotion-206 .celo-hbspt fieldset.form-columns-2 .hs-form-field { + float: none; + width: 100%; + } +} + +@media (max-width: 576px) { + .emotion-206 .celo-hbspt fieldset.form-columns-2 .hs-form-field { + float: none; + width: 100%; + } +} + +.emotion-206 .celo-hbspt .field { + margin-bottom: 32px; +} + +.emotion-206 .celo-hbspt .input { + margin-right: 26px; +} + +.emotion-206 .celo-hbspt .hs-input { + box-sizing: border-box; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex-direction: column; + -ms-flex-direction: column; + flex-direction: column; + font-family: Inter,sans-serif; + font-size: 20px; + line-height: 28; + text-rendering: geometricPrecision; + color: #111214; + line-height: 28px; + -webkit-align-self: center; + -ms-flex-item-align: center; + align-self: center; + padding: 24px; + border-radius: 70px; + border-width: 1px; + border-style: solid; + width: 100%; + margin: 4px; + outline-width: 0; + background-color: transparent; + border-color: rgba(0, 0, 0, 0.2); +} + +.emotion-206 .celo-hbspt .hs-input:focus { + border-color: #000; +} + +.emotion-206 .hs-custom-style fieldset textarea { + box-sizing: border-box; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex-direction: column; + -ms-flex-direction: column; + flex-direction: column; + font-family: Inter,sans-serif; + font-size: 20px; + line-height: 28; + text-rendering: geometricPrecision; + color: #111214; + line-height: 28px; + -webkit-align-self: center; + -ms-flex-item-align: center; + align-self: center; + padding: 24px; + border-radius: 70px; + border-width: 1px; + border-style: solid; + width: 100%; + margin: 4px; + outline-width: 0; + background-color: transparent; +} + +.emotion-206 .hs-custom-style fieldset textarea:focus { + border-color: #000; +} + +.emotion-206 .celo-hbspt .contact-error { + border-color: #E70532; +} + +.emotion-206 .celo-hbspt .hs-error-msg { + color: #E70532; +} + +.emotion-206 input[type='checkbox'] { + -webkit-flex-basis: 0; + -ms-flex-preferred-size: 0; + flex-basis: 0; +} + +.emotion-206 input.hs-button { + font-family: Jost,futura-pt,futura,sans-serif; + font-size: 16px; + line-height: 16; + text-align: center; + text-rendering: geometricPrecision; + color: #111214; + cursor: pointer; + font-weight: 500; + line-height: 16px; + -webkit-text-decoration: none; + text-decoration: none; + background-color: #FCFF52; + color: #000; + padding: 24px 64px; + border-radius: 70px; + width: -webkit-fit-content; + width: -moz-fit-content; + width: fit-content; + border: 1px solid #CCCCCC; + margin-top: 32px; +} + +.emotion-206 input.hs-button:hover { + background-color: #000; + color: #FFFFFF; +} + +.emotion-206 input.hs-button:active { + background-color: #000; + color: #FFFFFF; +} + +.emotion-206 ul { + list-style-type: none; +} + +.emotion-206 .hs-error-msg { + color: #FF7F6D; +} + +.emotion-206 .legal-consent-container { + font-weight: 200; + margin: 0; + margin-block-start: 0; + margin-block-end: 0; + font-family: EB Garamond,eb-garamond,Garamond,serif; + font-size: 16px; + line-height: 20; + text-rendering: geometricPrecision; + color: #111214; + line-height: 20px; +} + +.emotion-206 a { + color: #1AB775; } .emotion-207 { @@ -740,6 +953,7 @@ exports[`Experience/Icons renders 1`] = ` -ms-flex-direction: column; flex-direction: column; grid-column: span 2; + grid-row-start: 2; } @media (min-width: 576px) and (max-width: 992px) { @@ -748,6 +962,12 @@ exports[`Experience/Icons renders 1`] = ` } } +@media (min-width: 576px) and (max-width: 992px) { + .emotion-207 { + grid-row-start: 3; + } +} + .emotion-208 { box-sizing: border-box; display: -webkit-box; @@ -787,33 +1007,25 @@ exports[`Experience/Icons renders 1`] = ` } .emotion-210 { - font-weight: normal; - margin: 0; - margin-block-start: 0; - margin-block-end: 0; - font-family: Jost,futura-pt,futura,sans-serif; - font-size: 16px; - line-height: 18; - font-weight: 500; - text-rendering: geometricPrecision; - color: #111214; - line-height: 18px; + font-family: Inter,sans-serif; + margin-top: 0; + font-weight: 200; margin-bottom: 20px; } -.emotion-211 { +.emotion-212 { margin-top: 8px; margin-bottom: 8px; } -.emotion-213 { +.emotion-214 { color: inherit; cursor: pointer; text-decoration-style: solid; text-decoration-line: underline; display: inline; opacity: 1; - font-weight: normal; + font-weight: 200; margin: 0; margin-block-start: 0; margin-block-end: 0; @@ -823,6 +1035,11 @@ exports[`Experience/Icons renders 1`] = ` text-rendering: geometricPrecision; color: #111214; line-height: 20px; + font-family: Inter,sans-serif; + font-weight: 700; + border: 1px solid rgba(0, 0, 0, 0.2); + padding: 10.5px 16px; + border-radius: 70px; text-decoration-line: none; display: -webkit-inline-box; display: -webkit-inline-flex; @@ -834,21 +1051,21 @@ exports[`Experience/Icons renders 1`] = ` align-items: center; } -.emotion-213:hover { +.emotion-214:hover { opacity: 0.75; } -.emotion-213:active { +.emotion-214:active { opacity: 1; } -.emotion-235 { +.emotion-224 { padding-left: 25px; padding-right: 25px; } @media (max-width: 576px) { - .emotion-235 { + .emotion-224 { margin-top: 35px; width: 50%; padding-left: 10px; @@ -856,14 +1073,14 @@ exports[`Experience/Icons renders 1`] = ` } } -.emotion-281 { +.emotion-260 { padding-left: 25px; padding-right: 25px; padding-end: 0; } @media (max-width: 576px) { - .emotion-281 { + .emotion-260 { margin-top: 35px; width: 50%; padding-left: 10px; @@ -871,11 +1088,29 @@ exports[`Experience/Icons renders 1`] = ` } } -.emotion-286 { - padding-right: 8px; +.emotion-272 { + box-sizing: border-box; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex-direction: column; + -ms-flex-direction: column; + flex-direction: column; + overflow: hidden; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + -webkit-align-self: center; + -ms-flex-item-align: center; + align-self: center; + width: 100%; + background-color: #FBF6F1; + background-color: #FCFF52; } -.emotion-328 { +.emotion-273 { box-sizing: border-box; display: -webkit-box; display: -webkit-flex; @@ -904,7 +1139,7 @@ exports[`Experience/Icons renders 1`] = ` } @media (min-width: 576px) and (max-width: 992px) { - .emotion-328 { + .emotion-273 { display: grid; grid-auto-rows: auto; -webkit-align-self: center; @@ -921,7 +1156,7 @@ exports[`Experience/Icons renders 1`] = ` } @media (min-width: 992px) { - .emotion-328 { + .emotion-273 { display: grid; grid-auto-rows: auto; -webkit-align-self: center; @@ -933,39 +1168,39 @@ exports[`Experience/Icons renders 1`] = ` } @media (min-width: 992px) { - .emotion-328 { + .emotion-273 { grid-template-columns: 1fr; } } @media (min-width: 576px) and (max-width: 992px) { - .emotion-328 { + .emotion-273 { grid-template-columns: 1fr; } } @media (min-width: 992px) { - .emotion-328 { + .emotion-273 { margin-top: 60px; margin-bottom: 60px; } } @media (min-width: 576px) and (max-width: 992px) { - .emotion-328 { + .emotion-273 { margin-top: 40px; margin-bottom: 40px; } } @media (max-width: 576px) { - .emotion-328 { + .emotion-273 { margin-top: 30px; margin-bottom: 30px; } } -.emotion-329 { +.emotion-274 { box-sizing: border-box; display: -webkit-box; display: -webkit-flex; @@ -980,10 +1215,15 @@ exports[`Experience/Icons renders 1`] = ` -webkit-box-pack: justify; -webkit-justify-content: space-between; justify-content: space-between; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + border-bottom: 1px solid rgba(0, 0, 0, 0.2); } @media (max-width: 576px) { - .emotion-329 { + .emotion-274 { -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; @@ -995,100 +1235,53 @@ exports[`Experience/Icons renders 1`] = ` -webkit-box-align: center; -ms-flex-align: center; align-items: center; + border-bottom: none; } } -.emotion-330 { +.emotion-275 { box-sizing: border-box; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; + -webkit-flex-direction: column; + -ms-flex-direction: column; + flex-direction: column; -webkit-flex-direction: row; -ms-flex-direction: row; flex-direction: row; - margin-bottom: 20px; - overflow: hidden; +} + +.emotion-275>div:nth-child(-n+3) { + border-right: none; } @media (max-width: 576px) { - .emotion-330 { - -webkit-box-pack: center; - -ms-flex-pack: center; - -webkit-justify-content: center; - justify-content: center; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; + .emotion-275 { + margin-bottom: 40px; } } -.emotion-331 { - width: 20px; - height: 20px; - z-index: 10; +.emotion-276 { + border: 1px solid rgba(0, 0, 0, 0.2); + padding: 16px; } @media (max-width: 576px) { - .emotion-331 { - margin-bottom: 8px; + .emotion-276 { + padding: 16px; } } -.emotion-332 { - margin-left: 10px; - margin-right: 10px; - z-index: 10; -} - -@media (max-width: 576px) { - .emotion-332 { - display: none; +@media (min-width: 576px) { + .emotion-276 { + border-bottom: none; } } -.emotion-333 { - box-sizing: border-box; - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-flex-direction: column; - -ms-flex-direction: column; - flex-direction: column; - position: relative; -} - -.emotion-334 { - box-sizing: border-box; - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-flex-direction: column; - -ms-flex-direction: column; - flex-direction: column; - background-color: #FFFFFF; - position: absolute; - height: 100%; - width: 101%; - -webkit-animation-duration: 250ms; - animation-duration: 250ms; - -webkit-animation-iteration-count: 1; - animation-iteration-count: 1; - -webkit-animation-timing-function: linear; - animation-timing-function: linear; - -webkit-animation-fill-mode: both; - animation-fill-mode: both; - -webkit-animation-delay: 3500ms; - animation-delay: 3500ms; - -webkit-animation-name: animation-0; - animation-name: animation-0; -} - -.emotion-335 { - font-weight: normal; +.emotion-288 { + font-weight: 200; margin: 0; margin-block-start: 0; margin-block-end: 0; @@ -1098,24 +1291,17 @@ exports[`Experience/Icons renders 1`] = ` text-rendering: geometricPrecision; color: #111214; line-height: 20px; - font-style: italic; - -webkit-animation-fill-mode: both; - animation-fill-mode: both; - -webkit-animation-iteration-count: 1; - animation-iteration-count: 1; - -webkit-animation-duration: 750ms; - animation-duration: 750ms; - -webkit-animation-name: animation-1; - animation-name: animation-1; + font-family: Inter,sans-serif; + z-index: 10; } @media (max-width: 576px) { - .emotion-335 { - text-align: center; + .emotion-288 { + margin-bottom: 17px; } } -.emotion-336 { +.emotion-289 { box-sizing: border-box; display: -webkit-box; display: -webkit-flex; @@ -1124,24 +1310,13 @@ exports[`Experience/Icons renders 1`] = ` -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; - background-color: #FFFFFF; - position: absolute; - height: 100%; - width: 101%; - -webkit-animation-duration: 250ms; - animation-duration: 250ms; - -webkit-animation-iteration-count: 1; - animation-iteration-count: 1; - -webkit-animation-timing-function: linear; - animation-timing-function: linear; - -webkit-animation-fill-mode: both; - animation-fill-mode: both; - -webkit-animation-name: animation-2; - animation-name: animation-2; -} - -.emotion-337 { - font-weight: normal; + -webkit-flex-direction: row; + -ms-flex-direction: row; + flex-direction: row; +} + +.emotion-290 { + font-weight: 200; margin: 0; margin-block-start: 0; margin-block-end: 0; @@ -1151,7 +1326,108 @@ exports[`Experience/Icons renders 1`] = ` text-rendering: geometricPrecision; color: #111214; line-height: 20px; - z-index: 10; +} + +.emotion-290:first-child { + margin-right: 20px; +} + +.emotion-290 a { + text-decoration-line: none; +} + +.emotion-292 { + color: inherit; + cursor: pointer; + text-decoration-style: solid; + text-decoration-line: underline; + display: inline; + opacity: 1; + font-family: Inter,sans-serif; +} + +.emotion-292:hover { + opacity: 0.75; +} + +.emotion-292:active { + opacity: 1; +} + +.emotion-296 { + width: 86px; + height: 86px; + background-color: #FFFFFF; + border: none; + position: absolute; + transition-property: all; + transition-duration: 400ms; + top: 0; + left: 0; +} + +@media (max-width: 576px) { + .emotion-296 { + background-color: #FFFFFF; + } +} + +@media (max-width: 576px) { + .emotion-296 { + width: 86px; + height: 86px; + background-color: #FFFFFF; + border: none; + position: absolute; + transition-property: all; + transition-duration: 400ms; + top: 0; + left: 0; + } + + @media (max-width: 576px) { + .emotion-296 { + background-color: #FFFFFF; + } + } +} + +.emotion-297 { + width: 86px; + height: 86px; + background-color: #FFFFFF; + border: none; + position: absolute; + transition-property: all; + transition-duration: 400ms; + top: 0; + left: 172px; +} + +@media (max-width: 576px) { + .emotion-297 { + background-color: #FFFFFF; + } +} + +@media (max-width: 576px) { + .emotion-297 { + width: 86px; + height: 86px; + background-color: #FFFFFF; + border: none; + position: absolute; + transition-property: all; + transition-duration: 400ms; + top: 0; + left: 172px; + } + + @media (max-width: 576px) { + .emotion-297 { + background-color: #FFFFFF; + } + } }
- -
+ +

- Nothing herein constitutes an offer to sell, or the solicitation of an offer to buy, any securities or tokens. -

-

- Read more in Celo - - Terms of Service - + World-changing ideas in your inbox

+
- Celo + Celo for
- - Home - + + Developers + +
-
-
- - About - + + Founders + +
- -
- - Careers - + + Community + +
- -
- - Validators - + + Validators + +
+ +
+
+ Tech +
- - Developers - + + Docs + +
-
-
- - Alliance - + + Security Audits + +
- -
- - Community - + + Reserve + +
- -
- - Annual Report - + + Government + +
- Technology + Company
- - Docs - + + Vision + +
-
-
- - Security Audits - + + Ecosystem + +
- -
- - Reserve - + + Careers + +
- -
- - White Papers - + + Press + +
- -
- - Government - + + White Papers + +
- - -
-
- Resources -
-
-
- - Brand Policy - -
-
-
-
- - Press - -
-
-
-
- - Events - -
-
-
-
- - EventKit - -
-
-
-
- - BrandKit - -
-
-
-
- - MerchantKit - -
-
-
-
- - GrantKit - -
-
-
- - PilotKit - -
-
-
-
- - Ecosystem Fund - + + Events + +
- Social + Kits
- - - - - Medium - - - - - Blog - -
-
-
-
- - - - - Github - - - - - GitHub - -
-
-
-
- - - - - Twitter - - - - - Twitter - -
-
-
-
- - - - - Forum - - - - - Forum - -
-
-
-
- - - - - Chat - - - - - Chat - + BrandKit + +
-
-
- - - - - YouTube - - - - - YouTube - + PilotKit + +
- -
- - - - - Instagram - - - - - Instagram - + GrantKit + +
+ + + + + +
+
+
+
+
- + + Chat + + + +
+
+
- + + Medium + + + +
+
+
- + + Twitter + + + +
+
+
- + + Github + + + +
-
-
-
-
-
-
+ + © 2022 Celo Inc. +
- - - | -
- - " - Change the Story - " - + + Privacy Policy + +
+
+
+ className="emotion-158" + > + + Terms of Use + +
- - The Celo Foundation, © Celo 2022 -
+
+
`; diff --git a/src/_page-tests/experience/__snapshots__/index.test.tsx.snap b/src/_page-tests/experience/__snapshots__/index.test.tsx.snap index 108dd7fa..94de348d 100644 --- a/src/_page-tests/experience/__snapshots__/index.test.tsx.snap +++ b/src/_page-tests/experience/__snapshots__/index.test.tsx.snap @@ -1,48 +1,6 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`Experience/Brandkit renders 1`] = ` -@keyframes animation-0 { - from { - -webkit-transform: translateX(-100%); - -moz-transform: translateX(-100%); - -ms-transform: translateX(-100%); - transform: translateX(-100%); - } - - to { - -webkit-transform: translateX(0%); - -moz-transform: translateX(0%); - -ms-transform: translateX(0%); - transform: translateX(0%); - } -} - -@keyframes animation-1 { - from { - opacity: 0; - } - - to { - opacity: 1; - } -} - -@keyframes animation-2 { - from { - -webkit-transform: translateX(0%); - -moz-transform: translateX(0%); - -ms-transform: translateX(0%); - transform: translateX(0%); - } - - to { - -webkit-transform: translateX(100%); - -moz-transform: translateX(100%); - -ms-transform: translateX(100%); - transform: translateX(100%); - } -} - .emotion-0 { box-sizing: border-box; display: -webkit-box; @@ -187,14 +145,13 @@ exports[`Experience/Brandkit renders 1`] = ` } .emotion-8 { - font-weight: normal; + font-weight: 200; margin: 0; margin-block-start: 0; margin-block-end: 0; - font-family: Jost,futura-pt,futura,sans-serif; + font-family: GT-Alpina,serif; font-size: 24px; line-height: 28; - font-weight: 400; text-rendering: geometricPrecision; color: #111214; line-height: 28px; @@ -269,11 +226,11 @@ exports[`Experience/Brandkit renders 1`] = ` } .emotion-34 { - font-weight: normal; + font-weight: 200; margin: 0; margin-block-start: 0; margin-block-end: 0; - font-family: Jost,futura-pt,futura,sans-serif; + font-family: GT-Alpina,serif; font-size: 16px; line-height: 18; font-weight: 500; @@ -456,6 +413,14 @@ exports[`Experience/Brandkit renders 1`] = ` } .emotion-172 { + box-sizing: border-box; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex-direction: column; + -ms-flex-direction: column; + flex-direction: column; display: inline; } @@ -500,6 +465,14 @@ exports[`Experience/Brandkit renders 1`] = ` -ms-flex-item-align: center; align-self: center; width: 100%; + background-color: #FBF6F1; + background-color: #FCFF52; +} + +@media (max-width: 576px) { + .emotion-175 { + padding: 33px; + } } .emotion-176 { @@ -528,6 +501,7 @@ exports[`Experience/Brandkit renders 1`] = ` flex-wrap: wrap; -webkit-column-gap: 24px; column-gap: 24px; + gap: 0; } @media (min-width: 576px) and (max-width: 992px) { @@ -599,11 +573,12 @@ exports[`Experience/Brandkit renders 1`] = ` -ms-flex-direction: column; flex-direction: column; grid-column: span 1; + grid-row-start: 1; } @media (min-width: 576px) and (max-width: 992px) { .emotion-177 { - grid-column: span 3; + grid-column: span 1; } } @@ -616,24 +591,30 @@ exports[`Experience/Brandkit renders 1`] = ` -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; - margin-bottom: 20px; + margin-top: 80px; + margin-bottom: 48px; } -@media (max-width: 576px) { - .emotion-178 { - margin-bottom: 30px; - -webkit-box-pack: center; - -ms-flex-pack: center; - -webkit-justify-content: center; - justify-content: center; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; +.emotion-179 { + box-sizing: border-box; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex-direction: column; + -ms-flex-direction: column; + flex-direction: column; + grid-column: span 1; + grid-row-start: 2; +} + +@media (min-width: 576px) and (max-width: 992px) { + .emotion-179 { + grid-column: span 1; } } -.emotion-179 { +.emotion-180 { box-sizing: border-box; display: -webkit-box; display: -webkit-flex; @@ -642,24 +623,23 @@ exports[`Experience/Brandkit renders 1`] = ` -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; - padding-bottom: 20px; } @media (max-width: 576px) { - .emotion-179 { + .emotion-180 { -webkit-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; + -webkit-align-items: flex-start; + -webkit-box-align: flex-start; + -ms-flex-align: flex-start; + align-items: flex-start; } } -.emotion-180 { - font-weight: normal; +.emotion-181 { + font-weight: 200; margin: 0; margin-block-start: 0; margin-block-end: 0; @@ -669,19 +649,252 @@ exports[`Experience/Brandkit renders 1`] = ` text-rendering: geometricPrecision; color: #111214; line-height: 20px; + font-family: Inter,sans-serif; margin-bottom: 20px; max-width: 350px; text-align: left; } +.emotion-182 { + width: 100%; + display: inline-block; +} + +.emotion-182 img { + display: none; +} + +.emotion-182 .grecaptcha-badge { + display: none; +} + +.emotion-182 #email-b4dd2ae2-68e9-4662-bfd3-b2860162a5aa { + box-sizing: border-box; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex-direction: column; + -ms-flex-direction: column; + flex-direction: column; + font-family: Inter,sans-serif; + font-size: 20px; + line-height: 28; + text-rendering: geometricPrecision; + color: #111214; + line-height: 28px; + -webkit-align-self: center; + -ms-flex-item-align: center; + align-self: center; + padding: 24px; + border-radius: 70px; + border-width: 1px; + border-style: solid; + width: 100%; + margin: 4px; + outline-width: 0; + background-color: transparent; +} + +.emotion-182 #email-b4dd2ae2-68e9-4662-bfd3-b2860162a5aa:focus { + border-color: #000; +} + +.emotion-182 #hsForm_b4dd2ae2-68e9-4662-bfd3-b2860162a5aa input[type=submit] { + display: none; +} + +.emotion-182 .celo-hbspt { + width: 100%; +} + +.emotion-182 .celo-hbspt * { + box-sizing: border-box; +} + +.emotion-182 .celo-hbspt fieldset { + border: 0; + padding: 0; + margin: 0; + max-width: 100%; +} + +@media (min-width: 576px) and (max-width: 992px) { + .emotion-182 .celo-hbspt fieldset { + margin-right: 0!important; + width: 100%!important; + } +} + @media (max-width: 576px) { - .emotion-180 { - text-align: center; + .emotion-182 .celo-hbspt fieldset { + float: none; + width: 100%; } } -.emotion-182 { - color: inherit; +.emotion-182 .celo-hbspt fieldset.form-columns-2 .hs-form-field { + width: 50%; + float: left; +} + +@media (min-width: 576px) and (max-width: 992px) { + .emotion-182 .celo-hbspt fieldset.form-columns-2 .hs-form-field { + float: none; + width: 100%; + } +} + +@media (max-width: 576px) { + .emotion-182 .celo-hbspt fieldset.form-columns-2 .hs-form-field { + float: none; + width: 100%; + } +} + +.emotion-182 .celo-hbspt .field { + margin-bottom: 32px; +} + +.emotion-182 .celo-hbspt .input { + margin-right: 26px; +} + +.emotion-182 .celo-hbspt .hs-input { + box-sizing: border-box; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex-direction: column; + -ms-flex-direction: column; + flex-direction: column; + font-family: Inter,sans-serif; + font-size: 20px; + line-height: 28; + text-rendering: geometricPrecision; + color: #111214; + line-height: 28px; + -webkit-align-self: center; + -ms-flex-item-align: center; + align-self: center; + padding: 24px; + border-radius: 70px; + border-width: 1px; + border-style: solid; + width: 100%; + margin: 4px; + outline-width: 0; + background-color: transparent; + border-color: rgba(0, 0, 0, 0.2); +} + +.emotion-182 .celo-hbspt .hs-input:focus { + border-color: #000; +} + +.emotion-182 .hs-custom-style fieldset textarea { + box-sizing: border-box; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex-direction: column; + -ms-flex-direction: column; + flex-direction: column; + font-family: Inter,sans-serif; + font-size: 20px; + line-height: 28; + text-rendering: geometricPrecision; + color: #111214; + line-height: 28px; + -webkit-align-self: center; + -ms-flex-item-align: center; + align-self: center; + padding: 24px; + border-radius: 70px; + border-width: 1px; + border-style: solid; + width: 100%; + margin: 4px; + outline-width: 0; + background-color: transparent; +} + +.emotion-182 .hs-custom-style fieldset textarea:focus { + border-color: #000; +} + +.emotion-182 .celo-hbspt .contact-error { + border-color: #E70532; +} + +.emotion-182 .celo-hbspt .hs-error-msg { + color: #E70532; +} + +.emotion-182 input[type='checkbox'] { + -webkit-flex-basis: 0; + -ms-flex-preferred-size: 0; + flex-basis: 0; +} + +.emotion-182 input.hs-button { + font-family: Jost,futura-pt,futura,sans-serif; + font-size: 16px; + line-height: 16; + text-align: center; + text-rendering: geometricPrecision; + color: #111214; + cursor: pointer; + font-weight: 500; + line-height: 16px; + -webkit-text-decoration: none; + text-decoration: none; + background-color: #FCFF52; + color: #000; + padding: 24px 64px; + border-radius: 70px; + width: -webkit-fit-content; + width: -moz-fit-content; + width: fit-content; + border: 1px solid #CCCCCC; + margin-top: 32px; +} + +.emotion-182 input.hs-button:hover { + background-color: #000; + color: #FFFFFF; +} + +.emotion-182 input.hs-button:active { + background-color: #000; + color: #FFFFFF; +} + +.emotion-182 ul { + list-style-type: none; +} + +.emotion-182 .hs-error-msg { + color: #FF7F6D; +} + +.emotion-182 .legal-consent-container { + font-weight: 200; + margin: 0; + margin-block-start: 0; + margin-block-end: 0; + font-family: EB Garamond,eb-garamond,Garamond,serif; + font-size: 16px; + line-height: 20; + text-rendering: geometricPrecision; + color: #111214; + line-height: 20px; +} + +.emotion-182 a { + color: #1AB775; } .emotion-183 { @@ -694,6 +907,7 @@ exports[`Experience/Brandkit renders 1`] = ` -ms-flex-direction: column; flex-direction: column; grid-column: span 2; + grid-row-start: 2; } @media (min-width: 576px) and (max-width: 992px) { @@ -702,6 +916,12 @@ exports[`Experience/Brandkit renders 1`] = ` } } +@media (min-width: 576px) and (max-width: 992px) { + .emotion-183 { + grid-row-start: 3; + } +} + .emotion-184 { box-sizing: border-box; display: -webkit-box; @@ -741,33 +961,25 @@ exports[`Experience/Brandkit renders 1`] = ` } .emotion-186 { - font-weight: normal; - margin: 0; - margin-block-start: 0; - margin-block-end: 0; - font-family: Jost,futura-pt,futura,sans-serif; - font-size: 16px; - line-height: 18; - font-weight: 500; - text-rendering: geometricPrecision; - color: #111214; - line-height: 18px; + font-family: Inter,sans-serif; + margin-top: 0; + font-weight: 200; margin-bottom: 20px; } -.emotion-187 { +.emotion-188 { margin-top: 8px; margin-bottom: 8px; } -.emotion-189 { +.emotion-190 { color: inherit; cursor: pointer; text-decoration-style: solid; text-decoration-line: underline; display: inline; opacity: 1; - font-weight: normal; + font-weight: 200; margin: 0; margin-block-start: 0; margin-block-end: 0; @@ -777,6 +989,11 @@ exports[`Experience/Brandkit renders 1`] = ` text-rendering: geometricPrecision; color: #111214; line-height: 20px; + font-family: Inter,sans-serif; + font-weight: 700; + border: 1px solid rgba(0, 0, 0, 0.2); + padding: 10.5px 16px; + border-radius: 70px; text-decoration-line: none; display: -webkit-inline-box; display: -webkit-inline-flex; @@ -788,21 +1005,21 @@ exports[`Experience/Brandkit renders 1`] = ` align-items: center; } -.emotion-189:hover { +.emotion-190:hover { opacity: 0.75; } -.emotion-189:active { +.emotion-190:active { opacity: 1; } -.emotion-211 { +.emotion-200 { padding-left: 25px; padding-right: 25px; } @media (max-width: 576px) { - .emotion-211 { + .emotion-200 { margin-top: 35px; width: 50%; padding-left: 10px; @@ -810,14 +1027,14 @@ exports[`Experience/Brandkit renders 1`] = ` } } -.emotion-257 { +.emotion-236 { padding-left: 25px; padding-right: 25px; padding-end: 0; } @media (max-width: 576px) { - .emotion-257 { + .emotion-236 { margin-top: 35px; width: 50%; padding-left: 10px; @@ -825,11 +1042,29 @@ exports[`Experience/Brandkit renders 1`] = ` } } -.emotion-262 { - padding-right: 8px; +.emotion-248 { + box-sizing: border-box; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex-direction: column; + -ms-flex-direction: column; + flex-direction: column; + overflow: hidden; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + -webkit-align-self: center; + -ms-flex-item-align: center; + align-self: center; + width: 100%; + background-color: #FBF6F1; + background-color: #FCFF52; } -.emotion-304 { +.emotion-249 { box-sizing: border-box; display: -webkit-box; display: -webkit-flex; @@ -858,7 +1093,7 @@ exports[`Experience/Brandkit renders 1`] = ` } @media (min-width: 576px) and (max-width: 992px) { - .emotion-304 { + .emotion-249 { display: grid; grid-auto-rows: auto; -webkit-align-self: center; @@ -875,7 +1110,7 @@ exports[`Experience/Brandkit renders 1`] = ` } @media (min-width: 992px) { - .emotion-304 { + .emotion-249 { display: grid; grid-auto-rows: auto; -webkit-align-self: center; @@ -887,39 +1122,39 @@ exports[`Experience/Brandkit renders 1`] = ` } @media (min-width: 992px) { - .emotion-304 { + .emotion-249 { grid-template-columns: 1fr; } } @media (min-width: 576px) and (max-width: 992px) { - .emotion-304 { + .emotion-249 { grid-template-columns: 1fr; } } @media (min-width: 992px) { - .emotion-304 { + .emotion-249 { margin-top: 60px; margin-bottom: 60px; } } @media (min-width: 576px) and (max-width: 992px) { - .emotion-304 { + .emotion-249 { margin-top: 40px; margin-bottom: 40px; } } @media (max-width: 576px) { - .emotion-304 { + .emotion-249 { margin-top: 30px; margin-bottom: 30px; } } -.emotion-305 { +.emotion-250 { box-sizing: border-box; display: -webkit-box; display: -webkit-flex; @@ -934,10 +1169,15 @@ exports[`Experience/Brandkit renders 1`] = ` -webkit-box-pack: justify; -webkit-justify-content: space-between; justify-content: space-between; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + border-bottom: 1px solid rgba(0, 0, 0, 0.2); } @media (max-width: 576px) { - .emotion-305 { + .emotion-250 { -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; @@ -949,100 +1189,53 @@ exports[`Experience/Brandkit renders 1`] = ` -webkit-box-align: center; -ms-flex-align: center; align-items: center; + border-bottom: none; } } -.emotion-306 { +.emotion-251 { box-sizing: border-box; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; + -webkit-flex-direction: column; + -ms-flex-direction: column; + flex-direction: column; -webkit-flex-direction: row; -ms-flex-direction: row; flex-direction: row; - margin-bottom: 20px; - overflow: hidden; } -@media (max-width: 576px) { - .emotion-306 { - -webkit-box-pack: center; - -ms-flex-pack: center; - -webkit-justify-content: center; - justify-content: center; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - } -} - -.emotion-307 { - width: 20px; - height: 20px; - z-index: 10; +.emotion-251>div:nth-child(-n+3) { + border-right: none; } @media (max-width: 576px) { - .emotion-307 { - margin-bottom: 8px; + .emotion-251 { + margin-bottom: 40px; } } -.emotion-308 { - margin-left: 10px; - margin-right: 10px; - z-index: 10; +.emotion-252 { + border: 1px solid rgba(0, 0, 0, 0.2); + padding: 16px; } @media (max-width: 576px) { - .emotion-308 { - display: none; + .emotion-252 { + padding: 16px; } } -.emotion-309 { - box-sizing: border-box; - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-flex-direction: column; - -ms-flex-direction: column; - flex-direction: column; - position: relative; +@media (min-width: 576px) { + .emotion-252 { + border-bottom: none; + } } -.emotion-310 { - box-sizing: border-box; - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-flex-direction: column; - -ms-flex-direction: column; - flex-direction: column; - background-color: #FFFFFF; - position: absolute; - height: 100%; - width: 101%; - -webkit-animation-duration: 250ms; - animation-duration: 250ms; - -webkit-animation-iteration-count: 1; - animation-iteration-count: 1; - -webkit-animation-timing-function: linear; - animation-timing-function: linear; - -webkit-animation-fill-mode: both; - animation-fill-mode: both; - -webkit-animation-delay: 3500ms; - animation-delay: 3500ms; - -webkit-animation-name: animation-0; - animation-name: animation-0; -} - -.emotion-311 { - font-weight: normal; +.emotion-264 { + font-weight: 200; margin: 0; margin-block-start: 0; margin-block-end: 0; @@ -1052,24 +1245,17 @@ exports[`Experience/Brandkit renders 1`] = ` text-rendering: geometricPrecision; color: #111214; line-height: 20px; - font-style: italic; - -webkit-animation-fill-mode: both; - animation-fill-mode: both; - -webkit-animation-iteration-count: 1; - animation-iteration-count: 1; - -webkit-animation-duration: 750ms; - animation-duration: 750ms; - -webkit-animation-name: animation-1; - animation-name: animation-1; + font-family: Inter,sans-serif; + z-index: 10; } @media (max-width: 576px) { - .emotion-311 { - text-align: center; + .emotion-264 { + margin-bottom: 17px; } } -.emotion-312 { +.emotion-265 { box-sizing: border-box; display: -webkit-box; display: -webkit-flex; @@ -1078,24 +1264,13 @@ exports[`Experience/Brandkit renders 1`] = ` -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; - background-color: #FFFFFF; - position: absolute; - height: 100%; - width: 101%; - -webkit-animation-duration: 250ms; - animation-duration: 250ms; - -webkit-animation-iteration-count: 1; - animation-iteration-count: 1; - -webkit-animation-timing-function: linear; - animation-timing-function: linear; - -webkit-animation-fill-mode: both; - animation-fill-mode: both; - -webkit-animation-name: animation-2; - animation-name: animation-2; -} - -.emotion-313 { - font-weight: normal; + -webkit-flex-direction: row; + -ms-flex-direction: row; + flex-direction: row; +} + +.emotion-266 { + font-weight: 200; margin: 0; margin-block-start: 0; margin-block-end: 0; @@ -1105,7 +1280,108 @@ exports[`Experience/Brandkit renders 1`] = ` text-rendering: geometricPrecision; color: #111214; line-height: 20px; - z-index: 10; +} + +.emotion-266:first-child { + margin-right: 20px; +} + +.emotion-266 a { + text-decoration-line: none; +} + +.emotion-268 { + color: inherit; + cursor: pointer; + text-decoration-style: solid; + text-decoration-line: underline; + display: inline; + opacity: 1; + font-family: Inter,sans-serif; +} + +.emotion-268:hover { + opacity: 0.75; +} + +.emotion-268:active { + opacity: 1; +} + +.emotion-272 { + width: 86px; + height: 86px; + background-color: #FFFFFF; + border: none; + position: absolute; + transition-property: all; + transition-duration: 400ms; + top: 0; + left: 0; +} + +@media (max-width: 576px) { + .emotion-272 { + background-color: #FFFFFF; + } +} + +@media (max-width: 576px) { + .emotion-272 { + width: 86px; + height: 86px; + background-color: #FFFFFF; + border: none; + position: absolute; + transition-property: all; + transition-duration: 400ms; + top: 0; + left: 0; + } + + @media (max-width: 576px) { + .emotion-272 { + background-color: #FFFFFF; + } + } +} + +.emotion-273 { + width: 86px; + height: 86px; + background-color: #FFFFFF; + border: none; + position: absolute; + transition-property: all; + transition-duration: 400ms; + top: 0; + left: 172px; +} + +@media (max-width: 576px) { + .emotion-273 { + background-color: #FFFFFF; + } +} + +@media (max-width: 576px) { + .emotion-273 { + width: 86px; + height: 86px; + background-color: #FFFFFF; + border: none; + position: absolute; + transition-property: all; + transition-duration: 400ms; + top: 0; + left: 172px; + } + + @media (max-width: 576px) { + .emotion-273 { + background-color: #FFFFFF; + } + } }
- -
+ +

- Nothing herein constitutes an offer to sell, or the solicitation of an offer to buy, any securities or tokens. -

-

- Read more in Celo - - Terms of Service - + World-changing ideas in your inbox

+
- Celo + Celo for
- - Home - + + Developers + +
-
-
- - About - + + Founders + +
- -
- - Careers - + + Community + +
- -
- - Validators - + + Validators + +
+ +
+
+ Tech +
- - Developers - + + Docs + +
-
-
- - Alliance - + + Security Audits + +
- -
- - Community - + + Reserve + +
- -
- - Annual Report - + + Government + +
- Technology + Company
- - Docs - + + Vision + +
-
-
- - Security Audits - + + Ecosystem + +
- -
- - Reserve - + + Careers + +
- -
- - White Papers - + + Press + +
- -
- - Government - + + White Papers + +
+
+
+
+ + Events + +
- Resources + Kits
- - Brand Policy - + + BrandKit + +
-
-
- - Press - + + PilotKit + +
- -
- - Events - -
-
-
-
- - EventKit - -
-
-
-
- - BrandKit - -
-
-
-
- - MerchantKit - -
-
-
-
- - GrantKit - -
-
-
-
- - PilotKit - -
-
-
-
- - Ecosystem Fund - + + GrantKit + +
+ + + + +
+
+
+ -
-
-
-
-
-
+ + © 2022 Celo Inc. +
- - - | -
- - " - Change the Story - " - + + Privacy Policy + +
+
+
+ className="emotion-172" + > + + Terms of Use + +
- - The Celo Foundation, © Celo 2022 -
+
+
`; diff --git a/src/_page-tests/experience/__snapshots__/key-imagery.test.tsx.snap b/src/_page-tests/experience/__snapshots__/key-imagery.test.tsx.snap index 6f8928c7..7a2239d9 100644 --- a/src/_page-tests/experience/__snapshots__/key-imagery.test.tsx.snap +++ b/src/_page-tests/experience/__snapshots__/key-imagery.test.tsx.snap @@ -1,48 +1,6 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`Experience/KeyImagery renders 1`] = ` -@keyframes animation-0 { - from { - -webkit-transform: translateX(-100%); - -moz-transform: translateX(-100%); - -ms-transform: translateX(-100%); - transform: translateX(-100%); - } - - to { - -webkit-transform: translateX(0%); - -moz-transform: translateX(0%); - -ms-transform: translateX(0%); - transform: translateX(0%); - } -} - -@keyframes animation-1 { - from { - opacity: 0; - } - - to { - opacity: 1; - } -} - -@keyframes animation-2 { - from { - -webkit-transform: translateX(0%); - -moz-transform: translateX(0%); - -ms-transform: translateX(0%); - transform: translateX(0%); - } - - to { - -webkit-transform: translateX(100%); - -moz-transform: translateX(100%); - -ms-transform: translateX(100%); - transform: translateX(100%); - } -} - .emotion-0 { box-sizing: border-box; display: -webkit-box; @@ -187,14 +145,13 @@ exports[`Experience/KeyImagery renders 1`] = ` } .emotion-8 { - font-weight: normal; + font-weight: 200; margin: 0; margin-block-start: 0; margin-block-end: 0; - font-family: Jost,futura-pt,futura,sans-serif; + font-family: GT-Alpina,serif; font-size: 24px; line-height: 28; - font-weight: 400; text-rendering: geometricPrecision; color: #111214; line-height: 28px; @@ -269,11 +226,11 @@ exports[`Experience/KeyImagery renders 1`] = ` } .emotion-34 { - font-weight: normal; + font-weight: 200; margin: 0; margin-block-start: 0; margin-block-end: 0; - font-family: Jost,futura-pt,futura,sans-serif; + font-family: GT-Alpina,serif; font-size: 16px; line-height: 18; font-weight: 500; @@ -456,6 +413,14 @@ exports[`Experience/KeyImagery renders 1`] = ` } .emotion-158 { + box-sizing: border-box; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex-direction: column; + -ms-flex-direction: column; + flex-direction: column; display: inline; } @@ -525,6 +490,14 @@ exports[`Experience/KeyImagery renders 1`] = ` -ms-flex-item-align: center; align-self: center; width: 100%; + background-color: #FBF6F1; + background-color: #FCFF52; +} + +@media (max-width: 576px) { + .emotion-180 { + padding: 33px; + } } .emotion-181 { @@ -553,6 +526,7 @@ exports[`Experience/KeyImagery renders 1`] = ` flex-wrap: wrap; -webkit-column-gap: 24px; column-gap: 24px; + gap: 0; } @media (min-width: 576px) and (max-width: 992px) { @@ -624,11 +598,12 @@ exports[`Experience/KeyImagery renders 1`] = ` -ms-flex-direction: column; flex-direction: column; grid-column: span 1; + grid-row-start: 1; } @media (min-width: 576px) and (max-width: 992px) { .emotion-182 { - grid-column: span 3; + grid-column: span 1; } } @@ -641,24 +616,30 @@ exports[`Experience/KeyImagery renders 1`] = ` -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; - margin-bottom: 20px; + margin-top: 80px; + margin-bottom: 48px; } -@media (max-width: 576px) { - .emotion-183 { - margin-bottom: 30px; - -webkit-box-pack: center; - -ms-flex-pack: center; - -webkit-justify-content: center; - justify-content: center; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; +.emotion-184 { + box-sizing: border-box; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex-direction: column; + -ms-flex-direction: column; + flex-direction: column; + grid-column: span 1; + grid-row-start: 2; +} + +@media (min-width: 576px) and (max-width: 992px) { + .emotion-184 { + grid-column: span 1; } } -.emotion-184 { +.emotion-185 { box-sizing: border-box; display: -webkit-box; display: -webkit-flex; @@ -667,24 +648,23 @@ exports[`Experience/KeyImagery renders 1`] = ` -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; - padding-bottom: 20px; } @media (max-width: 576px) { - .emotion-184 { + .emotion-185 { -webkit-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; + -webkit-align-items: flex-start; + -webkit-box-align: flex-start; + -ms-flex-align: flex-start; + align-items: flex-start; } } -.emotion-185 { - font-weight: normal; +.emotion-186 { + font-weight: 200; margin: 0; margin-block-start: 0; margin-block-end: 0; @@ -694,19 +674,252 @@ exports[`Experience/KeyImagery renders 1`] = ` text-rendering: geometricPrecision; color: #111214; line-height: 20px; + font-family: Inter,sans-serif; margin-bottom: 20px; max-width: 350px; text-align: left; } +.emotion-187 { + width: 100%; + display: inline-block; +} + +.emotion-187 img { + display: none; +} + +.emotion-187 .grecaptcha-badge { + display: none; +} + +.emotion-187 #email-b4dd2ae2-68e9-4662-bfd3-b2860162a5aa { + box-sizing: border-box; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex-direction: column; + -ms-flex-direction: column; + flex-direction: column; + font-family: Inter,sans-serif; + font-size: 20px; + line-height: 28; + text-rendering: geometricPrecision; + color: #111214; + line-height: 28px; + -webkit-align-self: center; + -ms-flex-item-align: center; + align-self: center; + padding: 24px; + border-radius: 70px; + border-width: 1px; + border-style: solid; + width: 100%; + margin: 4px; + outline-width: 0; + background-color: transparent; +} + +.emotion-187 #email-b4dd2ae2-68e9-4662-bfd3-b2860162a5aa:focus { + border-color: #000; +} + +.emotion-187 #hsForm_b4dd2ae2-68e9-4662-bfd3-b2860162a5aa input[type=submit] { + display: none; +} + +.emotion-187 .celo-hbspt { + width: 100%; +} + +.emotion-187 .celo-hbspt * { + box-sizing: border-box; +} + +.emotion-187 .celo-hbspt fieldset { + border: 0; + padding: 0; + margin: 0; + max-width: 100%; +} + +@media (min-width: 576px) and (max-width: 992px) { + .emotion-187 .celo-hbspt fieldset { + margin-right: 0!important; + width: 100%!important; + } +} + @media (max-width: 576px) { - .emotion-185 { - text-align: center; + .emotion-187 .celo-hbspt fieldset { + float: none; + width: 100%; } } -.emotion-187 { - color: inherit; +.emotion-187 .celo-hbspt fieldset.form-columns-2 .hs-form-field { + width: 50%; + float: left; +} + +@media (min-width: 576px) and (max-width: 992px) { + .emotion-187 .celo-hbspt fieldset.form-columns-2 .hs-form-field { + float: none; + width: 100%; + } +} + +@media (max-width: 576px) { + .emotion-187 .celo-hbspt fieldset.form-columns-2 .hs-form-field { + float: none; + width: 100%; + } +} + +.emotion-187 .celo-hbspt .field { + margin-bottom: 32px; +} + +.emotion-187 .celo-hbspt .input { + margin-right: 26px; +} + +.emotion-187 .celo-hbspt .hs-input { + box-sizing: border-box; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex-direction: column; + -ms-flex-direction: column; + flex-direction: column; + font-family: Inter,sans-serif; + font-size: 20px; + line-height: 28; + text-rendering: geometricPrecision; + color: #111214; + line-height: 28px; + -webkit-align-self: center; + -ms-flex-item-align: center; + align-self: center; + padding: 24px; + border-radius: 70px; + border-width: 1px; + border-style: solid; + width: 100%; + margin: 4px; + outline-width: 0; + background-color: transparent; + border-color: rgba(0, 0, 0, 0.2); +} + +.emotion-187 .celo-hbspt .hs-input:focus { + border-color: #000; +} + +.emotion-187 .hs-custom-style fieldset textarea { + box-sizing: border-box; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex-direction: column; + -ms-flex-direction: column; + flex-direction: column; + font-family: Inter,sans-serif; + font-size: 20px; + line-height: 28; + text-rendering: geometricPrecision; + color: #111214; + line-height: 28px; + -webkit-align-self: center; + -ms-flex-item-align: center; + align-self: center; + padding: 24px; + border-radius: 70px; + border-width: 1px; + border-style: solid; + width: 100%; + margin: 4px; + outline-width: 0; + background-color: transparent; +} + +.emotion-187 .hs-custom-style fieldset textarea:focus { + border-color: #000; +} + +.emotion-187 .celo-hbspt .contact-error { + border-color: #E70532; +} + +.emotion-187 .celo-hbspt .hs-error-msg { + color: #E70532; +} + +.emotion-187 input[type='checkbox'] { + -webkit-flex-basis: 0; + -ms-flex-preferred-size: 0; + flex-basis: 0; +} + +.emotion-187 input.hs-button { + font-family: Jost,futura-pt,futura,sans-serif; + font-size: 16px; + line-height: 16; + text-align: center; + text-rendering: geometricPrecision; + color: #111214; + cursor: pointer; + font-weight: 500; + line-height: 16px; + -webkit-text-decoration: none; + text-decoration: none; + background-color: #FCFF52; + color: #000; + padding: 24px 64px; + border-radius: 70px; + width: -webkit-fit-content; + width: -moz-fit-content; + width: fit-content; + border: 1px solid #CCCCCC; + margin-top: 32px; +} + +.emotion-187 input.hs-button:hover { + background-color: #000; + color: #FFFFFF; +} + +.emotion-187 input.hs-button:active { + background-color: #000; + color: #FFFFFF; +} + +.emotion-187 ul { + list-style-type: none; +} + +.emotion-187 .hs-error-msg { + color: #FF7F6D; +} + +.emotion-187 .legal-consent-container { + font-weight: 200; + margin: 0; + margin-block-start: 0; + margin-block-end: 0; + font-family: EB Garamond,eb-garamond,Garamond,serif; + font-size: 16px; + line-height: 20; + text-rendering: geometricPrecision; + color: #111214; + line-height: 20px; +} + +.emotion-187 a { + color: #1AB775; } .emotion-188 { @@ -719,6 +932,7 @@ exports[`Experience/KeyImagery renders 1`] = ` -ms-flex-direction: column; flex-direction: column; grid-column: span 2; + grid-row-start: 2; } @media (min-width: 576px) and (max-width: 992px) { @@ -727,6 +941,12 @@ exports[`Experience/KeyImagery renders 1`] = ` } } +@media (min-width: 576px) and (max-width: 992px) { + .emotion-188 { + grid-row-start: 3; + } +} + .emotion-189 { box-sizing: border-box; display: -webkit-box; @@ -766,33 +986,25 @@ exports[`Experience/KeyImagery renders 1`] = ` } .emotion-191 { - font-weight: normal; - margin: 0; - margin-block-start: 0; - margin-block-end: 0; - font-family: Jost,futura-pt,futura,sans-serif; - font-size: 16px; - line-height: 18; - font-weight: 500; - text-rendering: geometricPrecision; - color: #111214; - line-height: 18px; + font-family: Inter,sans-serif; + margin-top: 0; + font-weight: 200; margin-bottom: 20px; } -.emotion-192 { +.emotion-193 { margin-top: 8px; margin-bottom: 8px; } -.emotion-194 { +.emotion-195 { color: inherit; cursor: pointer; text-decoration-style: solid; text-decoration-line: underline; display: inline; opacity: 1; - font-weight: normal; + font-weight: 200; margin: 0; margin-block-start: 0; margin-block-end: 0; @@ -802,6 +1014,11 @@ exports[`Experience/KeyImagery renders 1`] = ` text-rendering: geometricPrecision; color: #111214; line-height: 20px; + font-family: Inter,sans-serif; + font-weight: 700; + border: 1px solid rgba(0, 0, 0, 0.2); + padding: 10.5px 16px; + border-radius: 70px; text-decoration-line: none; display: -webkit-inline-box; display: -webkit-inline-flex; @@ -813,21 +1030,21 @@ exports[`Experience/KeyImagery renders 1`] = ` align-items: center; } -.emotion-194:hover { +.emotion-195:hover { opacity: 0.75; } -.emotion-194:active { +.emotion-195:active { opacity: 1; } -.emotion-216 { +.emotion-205 { padding-left: 25px; padding-right: 25px; } @media (max-width: 576px) { - .emotion-216 { + .emotion-205 { margin-top: 35px; width: 50%; padding-left: 10px; @@ -835,14 +1052,14 @@ exports[`Experience/KeyImagery renders 1`] = ` } } -.emotion-262 { +.emotion-241 { padding-left: 25px; padding-right: 25px; padding-end: 0; } @media (max-width: 576px) { - .emotion-262 { + .emotion-241 { margin-top: 35px; width: 50%; padding-left: 10px; @@ -850,11 +1067,29 @@ exports[`Experience/KeyImagery renders 1`] = ` } } -.emotion-267 { - padding-right: 8px; +.emotion-253 { + box-sizing: border-box; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex-direction: column; + -ms-flex-direction: column; + flex-direction: column; + overflow: hidden; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + -webkit-align-self: center; + -ms-flex-item-align: center; + align-self: center; + width: 100%; + background-color: #FBF6F1; + background-color: #FCFF52; } -.emotion-309 { +.emotion-254 { box-sizing: border-box; display: -webkit-box; display: -webkit-flex; @@ -883,7 +1118,7 @@ exports[`Experience/KeyImagery renders 1`] = ` } @media (min-width: 576px) and (max-width: 992px) { - .emotion-309 { + .emotion-254 { display: grid; grid-auto-rows: auto; -webkit-align-self: center; @@ -900,7 +1135,7 @@ exports[`Experience/KeyImagery renders 1`] = ` } @media (min-width: 992px) { - .emotion-309 { + .emotion-254 { display: grid; grid-auto-rows: auto; -webkit-align-self: center; @@ -912,39 +1147,39 @@ exports[`Experience/KeyImagery renders 1`] = ` } @media (min-width: 992px) { - .emotion-309 { + .emotion-254 { grid-template-columns: 1fr; } } @media (min-width: 576px) and (max-width: 992px) { - .emotion-309 { + .emotion-254 { grid-template-columns: 1fr; } } @media (min-width: 992px) { - .emotion-309 { + .emotion-254 { margin-top: 60px; margin-bottom: 60px; } } @media (min-width: 576px) and (max-width: 992px) { - .emotion-309 { + .emotion-254 { margin-top: 40px; margin-bottom: 40px; } } @media (max-width: 576px) { - .emotion-309 { + .emotion-254 { margin-top: 30px; margin-bottom: 30px; } } -.emotion-310 { +.emotion-255 { box-sizing: border-box; display: -webkit-box; display: -webkit-flex; @@ -959,10 +1194,15 @@ exports[`Experience/KeyImagery renders 1`] = ` -webkit-box-pack: justify; -webkit-justify-content: space-between; justify-content: space-between; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + border-bottom: 1px solid rgba(0, 0, 0, 0.2); } @media (max-width: 576px) { - .emotion-310 { + .emotion-255 { -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; @@ -974,100 +1214,53 @@ exports[`Experience/KeyImagery renders 1`] = ` -webkit-box-align: center; -ms-flex-align: center; align-items: center; + border-bottom: none; } } -.emotion-311 { +.emotion-256 { box-sizing: border-box; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; + -webkit-flex-direction: column; + -ms-flex-direction: column; + flex-direction: column; -webkit-flex-direction: row; -ms-flex-direction: row; flex-direction: row; - margin-bottom: 20px; - overflow: hidden; } -@media (max-width: 576px) { - .emotion-311 { - -webkit-box-pack: center; - -ms-flex-pack: center; - -webkit-justify-content: center; - justify-content: center; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - } -} - -.emotion-312 { - width: 20px; - height: 20px; - z-index: 10; +.emotion-256>div:nth-child(-n+3) { + border-right: none; } @media (max-width: 576px) { - .emotion-312 { - margin-bottom: 8px; + .emotion-256 { + margin-bottom: 40px; } } -.emotion-313 { - margin-left: 10px; - margin-right: 10px; - z-index: 10; +.emotion-257 { + border: 1px solid rgba(0, 0, 0, 0.2); + padding: 16px; } @media (max-width: 576px) { - .emotion-313 { - display: none; + .emotion-257 { + padding: 16px; } } -.emotion-314 { - box-sizing: border-box; - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-flex-direction: column; - -ms-flex-direction: column; - flex-direction: column; - position: relative; +@media (min-width: 576px) { + .emotion-257 { + border-bottom: none; + } } -.emotion-315 { - box-sizing: border-box; - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-flex-direction: column; - -ms-flex-direction: column; - flex-direction: column; - background-color: #FFFFFF; - position: absolute; - height: 100%; - width: 101%; - -webkit-animation-duration: 250ms; - animation-duration: 250ms; - -webkit-animation-iteration-count: 1; - animation-iteration-count: 1; - -webkit-animation-timing-function: linear; - animation-timing-function: linear; - -webkit-animation-fill-mode: both; - animation-fill-mode: both; - -webkit-animation-delay: 3500ms; - animation-delay: 3500ms; - -webkit-animation-name: animation-0; - animation-name: animation-0; -} - -.emotion-316 { - font-weight: normal; +.emotion-269 { + font-weight: 200; margin: 0; margin-block-start: 0; margin-block-end: 0; @@ -1077,24 +1270,17 @@ exports[`Experience/KeyImagery renders 1`] = ` text-rendering: geometricPrecision; color: #111214; line-height: 20px; - font-style: italic; - -webkit-animation-fill-mode: both; - animation-fill-mode: both; - -webkit-animation-iteration-count: 1; - animation-iteration-count: 1; - -webkit-animation-duration: 750ms; - animation-duration: 750ms; - -webkit-animation-name: animation-1; - animation-name: animation-1; + font-family: Inter,sans-serif; + z-index: 10; } @media (max-width: 576px) { - .emotion-316 { - text-align: center; + .emotion-269 { + margin-bottom: 17px; } } -.emotion-317 { +.emotion-270 { box-sizing: border-box; display: -webkit-box; display: -webkit-flex; @@ -1103,24 +1289,13 @@ exports[`Experience/KeyImagery renders 1`] = ` -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; - background-color: #FFFFFF; - position: absolute; - height: 100%; - width: 101%; - -webkit-animation-duration: 250ms; - animation-duration: 250ms; - -webkit-animation-iteration-count: 1; - animation-iteration-count: 1; - -webkit-animation-timing-function: linear; - animation-timing-function: linear; - -webkit-animation-fill-mode: both; - animation-fill-mode: both; - -webkit-animation-name: animation-2; - animation-name: animation-2; -} - -.emotion-318 { - font-weight: normal; + -webkit-flex-direction: row; + -ms-flex-direction: row; + flex-direction: row; +} + +.emotion-271 { + font-weight: 200; margin: 0; margin-block-start: 0; margin-block-end: 0; @@ -1130,7 +1305,108 @@ exports[`Experience/KeyImagery renders 1`] = ` text-rendering: geometricPrecision; color: #111214; line-height: 20px; - z-index: 10; +} + +.emotion-271:first-child { + margin-right: 20px; +} + +.emotion-271 a { + text-decoration-line: none; +} + +.emotion-273 { + color: inherit; + cursor: pointer; + text-decoration-style: solid; + text-decoration-line: underline; + display: inline; + opacity: 1; + font-family: Inter,sans-serif; +} + +.emotion-273:hover { + opacity: 0.75; +} + +.emotion-273:active { + opacity: 1; +} + +.emotion-277 { + width: 86px; + height: 86px; + background-color: #FFFFFF; + border: none; + position: absolute; + transition-property: all; + transition-duration: 400ms; + top: 0; + left: 0; +} + +@media (max-width: 576px) { + .emotion-277 { + background-color: #FFFFFF; + } +} + +@media (max-width: 576px) { + .emotion-277 { + width: 86px; + height: 86px; + background-color: #FFFFFF; + border: none; + position: absolute; + transition-property: all; + transition-duration: 400ms; + top: 0; + left: 0; + } + + @media (max-width: 576px) { + .emotion-277 { + background-color: #FFFFFF; + } + } +} + +.emotion-278 { + width: 86px; + height: 86px; + background-color: #FFFFFF; + border: none; + position: absolute; + transition-property: all; + transition-duration: 400ms; + top: 0; + left: 172px; +} + +@media (max-width: 576px) { + .emotion-278 { + background-color: #FFFFFF; + } +} + +@media (max-width: 576px) { + .emotion-278 { + width: 86px; + height: 86px; + background-color: #FFFFFF; + border: none; + position: absolute; + transition-property: all; + transition-duration: 400ms; + top: 0; + left: 172px; + } + + @media (max-width: 576px) { + .emotion-278 { + background-color: #FFFFFF; + } + } }
- -
+ +

- Nothing herein constitutes an offer to sell, or the solicitation of an offer to buy, any securities or tokens. -

-

- Read more in Celo - - Terms of Service - + World-changing ideas in your inbox

+
- Celo + Celo for
- - Home - + + Developers + +
-
-
- - About - + + Founders + +
- -
- - Careers - + + Community + +
- -
- - Validators - + + Validators + +
+ +
+
+ Tech +
- - Developers - + + Docs + +
-
-
- - Alliance - + + Security Audits + +
- -
- - Community - + + Reserve + +
- -
- - Annual Report - + + Government + +
- Technology + Company
- - Docs - + + Vision + +
-
-
- - Security Audits - + + Ecosystem + +
- -
- - Reserve - + + Careers + +
- -
- - White Papers - -
-
-
-
- - Government - -
-
- -
-
- Resources -
-
-
- - Brand Policy - -
-
-
-
- - Press - -
-
-
-
- - Events - -
-
-
-
- - EventKit - -
-
-
-
- - BrandKit - -
-
-
-
- - MerchantKit - -
-
-
-
- - GrantKit - + + Press + +
-
-
- - PilotKit - + + White Papers + +
- -
- - Ecosystem Fund - + + Events + +
- Social + Kits
- - - - - Medium - - - - - Blog - -
-
-
-
- - - - - Github - - - - - GitHub - -
-
-
-
- - - - - Twitter - - - - - Twitter - -
-
-
-
- - - - - Forum - - - - - Forum - -
-
-
-
- - - - - Chat - - - - - Chat - + BrandKit + +
-
-
- - - - - YouTube - - - - - YouTube - + PilotKit + +
- -
- - - - - Instagram - - - - - Instagram - + GrantKit + +
+ + + + + +
+
+
+
+
- + + Chat + + + +
+
+
- + + Medium + + + +
+
+
- + + Twitter + + + +
+
+
- + + Github + + + +
-
-
-
-
-
-
+ + © 2022 Celo Inc. +
- - - | -
- - " - Change the Story - " - + + Privacy Policy + +
+
+
+ className="emotion-158" + > + + Terms of Use + +
- - The Celo Foundation, © Celo 2022 -
+
+
`; diff --git a/src/_page-tests/experience/__snapshots__/logo.test.tsx.snap b/src/_page-tests/experience/__snapshots__/logo.test.tsx.snap index 921abdae..93964b7c 100644 --- a/src/_page-tests/experience/__snapshots__/logo.test.tsx.snap +++ b/src/_page-tests/experience/__snapshots__/logo.test.tsx.snap @@ -1,48 +1,6 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`Experience/Logo renders 1`] = ` -@keyframes animation-0 { - from { - -webkit-transform: translateX(-100%); - -moz-transform: translateX(-100%); - -ms-transform: translateX(-100%); - transform: translateX(-100%); - } - - to { - -webkit-transform: translateX(0%); - -moz-transform: translateX(0%); - -ms-transform: translateX(0%); - transform: translateX(0%); - } -} - -@keyframes animation-1 { - from { - opacity: 0; - } - - to { - opacity: 1; - } -} - -@keyframes animation-2 { - from { - -webkit-transform: translateX(0%); - -moz-transform: translateX(0%); - -ms-transform: translateX(0%); - transform: translateX(0%); - } - - to { - -webkit-transform: translateX(100%); - -moz-transform: translateX(100%); - -ms-transform: translateX(100%); - transform: translateX(100%); - } -} - .emotion-0 { box-sizing: border-box; display: -webkit-box; @@ -187,14 +145,13 @@ exports[`Experience/Logo renders 1`] = ` } .emotion-8 { - font-weight: normal; + font-weight: 200; margin: 0; margin-block-start: 0; margin-block-end: 0; - font-family: Jost,futura-pt,futura,sans-serif; + font-family: GT-Alpina,serif; font-size: 24px; line-height: 28; - font-weight: 400; text-rendering: geometricPrecision; color: #111214; line-height: 28px; @@ -269,11 +226,11 @@ exports[`Experience/Logo renders 1`] = ` } .emotion-34 { - font-weight: normal; + font-weight: 200; margin: 0; margin-block-start: 0; margin-block-end: 0; - font-family: Jost,futura-pt,futura,sans-serif; + font-family: GT-Alpina,serif; font-size: 16px; line-height: 18; font-weight: 500; @@ -538,6 +495,14 @@ exports[`Experience/Logo renders 1`] = ` -ms-flex-item-align: center; align-self: center; width: 100%; + background-color: #FBF6F1; + background-color: #FCFF52; +} + +@media (max-width: 576px) { + .emotion-348 { + padding: 33px; + } } .emotion-349 { @@ -566,6 +531,7 @@ exports[`Experience/Logo renders 1`] = ` flex-wrap: wrap; -webkit-column-gap: 24px; column-gap: 24px; + gap: 0; } @media (min-width: 576px) and (max-width: 992px) { @@ -637,11 +603,12 @@ exports[`Experience/Logo renders 1`] = ` -ms-flex-direction: column; flex-direction: column; grid-column: span 1; + grid-row-start: 1; } @media (min-width: 576px) and (max-width: 992px) { .emotion-350 { - grid-column: span 3; + grid-column: span 1; } } @@ -654,24 +621,30 @@ exports[`Experience/Logo renders 1`] = ` -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; - margin-bottom: 20px; + margin-top: 80px; + margin-bottom: 48px; } -@media (max-width: 576px) { - .emotion-351 { - margin-bottom: 30px; - -webkit-box-pack: center; - -ms-flex-pack: center; - -webkit-justify-content: center; - justify-content: center; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; +.emotion-352 { + box-sizing: border-box; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex-direction: column; + -ms-flex-direction: column; + flex-direction: column; + grid-column: span 1; + grid-row-start: 2; +} + +@media (min-width: 576px) and (max-width: 992px) { + .emotion-352 { + grid-column: span 1; } } -.emotion-352 { +.emotion-353 { box-sizing: border-box; display: -webkit-box; display: -webkit-flex; @@ -680,24 +653,23 @@ exports[`Experience/Logo renders 1`] = ` -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; - padding-bottom: 20px; } @media (max-width: 576px) { - .emotion-352 { + .emotion-353 { -webkit-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; + -webkit-align-items: flex-start; + -webkit-box-align: flex-start; + -ms-flex-align: flex-start; + align-items: flex-start; } } -.emotion-353 { - font-weight: normal; +.emotion-354 { + font-weight: 200; margin: 0; margin-block-start: 0; margin-block-end: 0; @@ -707,19 +679,252 @@ exports[`Experience/Logo renders 1`] = ` text-rendering: geometricPrecision; color: #111214; line-height: 20px; + font-family: Inter,sans-serif; margin-bottom: 20px; max-width: 350px; text-align: left; } +.emotion-355 { + width: 100%; + display: inline-block; +} + +.emotion-355 img { + display: none; +} + +.emotion-355 .grecaptcha-badge { + display: none; +} + +.emotion-355 #email-b4dd2ae2-68e9-4662-bfd3-b2860162a5aa { + box-sizing: border-box; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex-direction: column; + -ms-flex-direction: column; + flex-direction: column; + font-family: Inter,sans-serif; + font-size: 20px; + line-height: 28; + text-rendering: geometricPrecision; + color: #111214; + line-height: 28px; + -webkit-align-self: center; + -ms-flex-item-align: center; + align-self: center; + padding: 24px; + border-radius: 70px; + border-width: 1px; + border-style: solid; + width: 100%; + margin: 4px; + outline-width: 0; + background-color: transparent; +} + +.emotion-355 #email-b4dd2ae2-68e9-4662-bfd3-b2860162a5aa:focus { + border-color: #000; +} + +.emotion-355 #hsForm_b4dd2ae2-68e9-4662-bfd3-b2860162a5aa input[type=submit] { + display: none; +} + +.emotion-355 .celo-hbspt { + width: 100%; +} + +.emotion-355 .celo-hbspt * { + box-sizing: border-box; +} + +.emotion-355 .celo-hbspt fieldset { + border: 0; + padding: 0; + margin: 0; + max-width: 100%; +} + +@media (min-width: 576px) and (max-width: 992px) { + .emotion-355 .celo-hbspt fieldset { + margin-right: 0!important; + width: 100%!important; + } +} + @media (max-width: 576px) { - .emotion-353 { - text-align: center; + .emotion-355 .celo-hbspt fieldset { + float: none; + width: 100%; } } -.emotion-355 { - color: inherit; +.emotion-355 .celo-hbspt fieldset.form-columns-2 .hs-form-field { + width: 50%; + float: left; +} + +@media (min-width: 576px) and (max-width: 992px) { + .emotion-355 .celo-hbspt fieldset.form-columns-2 .hs-form-field { + float: none; + width: 100%; + } +} + +@media (max-width: 576px) { + .emotion-355 .celo-hbspt fieldset.form-columns-2 .hs-form-field { + float: none; + width: 100%; + } +} + +.emotion-355 .celo-hbspt .field { + margin-bottom: 32px; +} + +.emotion-355 .celo-hbspt .input { + margin-right: 26px; +} + +.emotion-355 .celo-hbspt .hs-input { + box-sizing: border-box; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex-direction: column; + -ms-flex-direction: column; + flex-direction: column; + font-family: Inter,sans-serif; + font-size: 20px; + line-height: 28; + text-rendering: geometricPrecision; + color: #111214; + line-height: 28px; + -webkit-align-self: center; + -ms-flex-item-align: center; + align-self: center; + padding: 24px; + border-radius: 70px; + border-width: 1px; + border-style: solid; + width: 100%; + margin: 4px; + outline-width: 0; + background-color: transparent; + border-color: rgba(0, 0, 0, 0.2); +} + +.emotion-355 .celo-hbspt .hs-input:focus { + border-color: #000; +} + +.emotion-355 .hs-custom-style fieldset textarea { + box-sizing: border-box; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex-direction: column; + -ms-flex-direction: column; + flex-direction: column; + font-family: Inter,sans-serif; + font-size: 20px; + line-height: 28; + text-rendering: geometricPrecision; + color: #111214; + line-height: 28px; + -webkit-align-self: center; + -ms-flex-item-align: center; + align-self: center; + padding: 24px; + border-radius: 70px; + border-width: 1px; + border-style: solid; + width: 100%; + margin: 4px; + outline-width: 0; + background-color: transparent; +} + +.emotion-355 .hs-custom-style fieldset textarea:focus { + border-color: #000; +} + +.emotion-355 .celo-hbspt .contact-error { + border-color: #E70532; +} + +.emotion-355 .celo-hbspt .hs-error-msg { + color: #E70532; +} + +.emotion-355 input[type='checkbox'] { + -webkit-flex-basis: 0; + -ms-flex-preferred-size: 0; + flex-basis: 0; +} + +.emotion-355 input.hs-button { + font-family: Jost,futura-pt,futura,sans-serif; + font-size: 16px; + line-height: 16; + text-align: center; + text-rendering: geometricPrecision; + color: #111214; + cursor: pointer; + font-weight: 500; + line-height: 16px; + -webkit-text-decoration: none; + text-decoration: none; + background-color: #FCFF52; + color: #000; + padding: 24px 64px; + border-radius: 70px; + width: -webkit-fit-content; + width: -moz-fit-content; + width: fit-content; + border: 1px solid #CCCCCC; + margin-top: 32px; +} + +.emotion-355 input.hs-button:hover { + background-color: #000; + color: #FFFFFF; +} + +.emotion-355 input.hs-button:active { + background-color: #000; + color: #FFFFFF; +} + +.emotion-355 ul { + list-style-type: none; +} + +.emotion-355 .hs-error-msg { + color: #FF7F6D; +} + +.emotion-355 .legal-consent-container { + font-weight: 200; + margin: 0; + margin-block-start: 0; + margin-block-end: 0; + font-family: EB Garamond,eb-garamond,Garamond,serif; + font-size: 16px; + line-height: 20; + text-rendering: geometricPrecision; + color: #111214; + line-height: 20px; +} + +.emotion-355 a { + color: #1AB775; } .emotion-356 { @@ -732,6 +937,7 @@ exports[`Experience/Logo renders 1`] = ` -ms-flex-direction: column; flex-direction: column; grid-column: span 2; + grid-row-start: 2; } @media (min-width: 576px) and (max-width: 992px) { @@ -740,6 +946,12 @@ exports[`Experience/Logo renders 1`] = ` } } +@media (min-width: 576px) and (max-width: 992px) { + .emotion-356 { + grid-row-start: 3; + } +} + .emotion-357 { box-sizing: border-box; display: -webkit-box; @@ -779,37 +991,37 @@ exports[`Experience/Logo renders 1`] = ` } .emotion-359 { - font-weight: normal; - margin: 0; - margin-block-start: 0; - margin-block-end: 0; - font-family: Jost,futura-pt,futura,sans-serif; - font-size: 16px; - line-height: 18; - font-weight: 500; - text-rendering: geometricPrecision; - color: #111214; - line-height: 18px; + font-family: Inter,sans-serif; + margin-top: 0; + font-weight: 200; margin-bottom: 20px; } -.emotion-360 { +.emotion-361 { margin-top: 8px; margin-bottom: 8px; } -.emotion-361 { +.emotion-362 { + box-sizing: border-box; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex-direction: column; + -ms-flex-direction: column; + flex-direction: column; display: inline; } -.emotion-362 { +.emotion-363 { color: inherit; cursor: pointer; text-decoration-style: solid; text-decoration-line: underline; display: inline; opacity: 1; - font-weight: normal; + font-weight: 200; margin: 0; margin-block-start: 0; margin-block-end: 0; @@ -819,6 +1031,11 @@ exports[`Experience/Logo renders 1`] = ` text-rendering: geometricPrecision; color: #111214; line-height: 20px; + font-family: Inter,sans-serif; + font-weight: 700; + border: 1px solid rgba(0, 0, 0, 0.2); + padding: 10.5px 16px; + border-radius: 70px; text-decoration-line: none; display: -webkit-inline-box; display: -webkit-inline-flex; @@ -830,21 +1047,21 @@ exports[`Experience/Logo renders 1`] = ` align-items: center; } -.emotion-362:hover { +.emotion-363:hover { opacity: 0.75; } -.emotion-362:active { +.emotion-363:active { opacity: 1; } -.emotion-384 { +.emotion-373 { padding-left: 25px; padding-right: 25px; } @media (max-width: 576px) { - .emotion-384 { + .emotion-373 { margin-top: 35px; width: 50%; padding-left: 10px; @@ -852,14 +1069,14 @@ exports[`Experience/Logo renders 1`] = ` } } -.emotion-430 { +.emotion-409 { padding-left: 25px; padding-right: 25px; padding-end: 0; } @media (max-width: 576px) { - .emotion-430 { + .emotion-409 { margin-top: 35px; width: 50%; padding-left: 10px; @@ -867,11 +1084,29 @@ exports[`Experience/Logo renders 1`] = ` } } -.emotion-435 { - padding-right: 8px; +.emotion-421 { + box-sizing: border-box; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex-direction: column; + -ms-flex-direction: column; + flex-direction: column; + overflow: hidden; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + -webkit-align-self: center; + -ms-flex-item-align: center; + align-self: center; + width: 100%; + background-color: #FBF6F1; + background-color: #FCFF52; } -.emotion-477 { +.emotion-422 { box-sizing: border-box; display: -webkit-box; display: -webkit-flex; @@ -900,7 +1135,7 @@ exports[`Experience/Logo renders 1`] = ` } @media (min-width: 576px) and (max-width: 992px) { - .emotion-477 { + .emotion-422 { display: grid; grid-auto-rows: auto; -webkit-align-self: center; @@ -917,7 +1152,7 @@ exports[`Experience/Logo renders 1`] = ` } @media (min-width: 992px) { - .emotion-477 { + .emotion-422 { display: grid; grid-auto-rows: auto; -webkit-align-self: center; @@ -929,39 +1164,39 @@ exports[`Experience/Logo renders 1`] = ` } @media (min-width: 992px) { - .emotion-477 { + .emotion-422 { grid-template-columns: 1fr; } } @media (min-width: 576px) and (max-width: 992px) { - .emotion-477 { + .emotion-422 { grid-template-columns: 1fr; } } @media (min-width: 992px) { - .emotion-477 { + .emotion-422 { margin-top: 60px; margin-bottom: 60px; } } @media (min-width: 576px) and (max-width: 992px) { - .emotion-477 { + .emotion-422 { margin-top: 40px; margin-bottom: 40px; } } @media (max-width: 576px) { - .emotion-477 { + .emotion-422 { margin-top: 30px; margin-bottom: 30px; } } -.emotion-478 { +.emotion-423 { box-sizing: border-box; display: -webkit-box; display: -webkit-flex; @@ -976,10 +1211,15 @@ exports[`Experience/Logo renders 1`] = ` -webkit-box-pack: justify; -webkit-justify-content: space-between; justify-content: space-between; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + border-bottom: 1px solid rgba(0, 0, 0, 0.2); } @media (max-width: 576px) { - .emotion-478 { + .emotion-423 { -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; @@ -991,100 +1231,70 @@ exports[`Experience/Logo renders 1`] = ` -webkit-box-align: center; -ms-flex-align: center; align-items: center; + border-bottom: none; } } -.emotion-479 { +.emotion-424 { box-sizing: border-box; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; + -webkit-flex-direction: column; + -ms-flex-direction: column; + flex-direction: column; -webkit-flex-direction: row; -ms-flex-direction: row; flex-direction: row; - margin-bottom: 20px; - overflow: hidden; +} + +.emotion-424>div:nth-child(-n+3) { + border-right: none; } @media (max-width: 576px) { - .emotion-479 { - -webkit-box-pack: center; - -ms-flex-pack: center; - -webkit-justify-content: center; - justify-content: center; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; + .emotion-424 { + margin-bottom: 40px; } } -.emotion-480 { - width: 20px; - height: 20px; - z-index: 10; +.emotion-425 { + border: 1px solid rgba(0, 0, 0, 0.2); + padding: 16px; } @media (max-width: 576px) { - .emotion-480 { - margin-bottom: 8px; + .emotion-425 { + padding: 16px; } } -.emotion-481 { - margin-left: 10px; - margin-right: 10px; - z-index: 10; +@media (min-width: 576px) { + .emotion-425 { + border-bottom: none; + } } -@media (max-width: 576px) { - .emotion-481 { - display: none; - } +.emotion-427 { + color: inherit; + cursor: pointer; + text-decoration-style: solid; + text-decoration-line: underline; + display: inline; + opacity: 1; } -.emotion-482 { - box-sizing: border-box; - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-flex-direction: column; - -ms-flex-direction: column; - flex-direction: column; - position: relative; +.emotion-427:hover { + opacity: 0.75; } -.emotion-483 { - box-sizing: border-box; - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-flex-direction: column; - -ms-flex-direction: column; - flex-direction: column; - background-color: #FFFFFF; - position: absolute; - height: 100%; - width: 101%; - -webkit-animation-duration: 250ms; - animation-duration: 250ms; - -webkit-animation-iteration-count: 1; - animation-iteration-count: 1; - -webkit-animation-timing-function: linear; - animation-timing-function: linear; - -webkit-animation-fill-mode: both; - animation-fill-mode: both; - -webkit-animation-delay: 3500ms; - animation-delay: 3500ms; - -webkit-animation-name: animation-0; - animation-name: animation-0; -} - -.emotion-484 { - font-weight: normal; +.emotion-427:active { + opacity: 1; +} + +.emotion-437 { + font-weight: 200; margin: 0; margin-block-start: 0; margin-block-end: 0; @@ -1094,24 +1304,17 @@ exports[`Experience/Logo renders 1`] = ` text-rendering: geometricPrecision; color: #111214; line-height: 20px; - font-style: italic; - -webkit-animation-fill-mode: both; - animation-fill-mode: both; - -webkit-animation-iteration-count: 1; - animation-iteration-count: 1; - -webkit-animation-duration: 750ms; - animation-duration: 750ms; - -webkit-animation-name: animation-1; - animation-name: animation-1; + font-family: Inter,sans-serif; + z-index: 10; } @media (max-width: 576px) { - .emotion-484 { - text-align: center; + .emotion-437 { + margin-bottom: 17px; } } -.emotion-485 { +.emotion-438 { box-sizing: border-box; display: -webkit-box; display: -webkit-flex; @@ -1120,24 +1323,13 @@ exports[`Experience/Logo renders 1`] = ` -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; - background-color: #FFFFFF; - position: absolute; - height: 100%; - width: 101%; - -webkit-animation-duration: 250ms; - animation-duration: 250ms; - -webkit-animation-iteration-count: 1; - animation-iteration-count: 1; - -webkit-animation-timing-function: linear; - animation-timing-function: linear; - -webkit-animation-fill-mode: both; - animation-fill-mode: both; - -webkit-animation-name: animation-2; - animation-name: animation-2; -} - -.emotion-486 { - font-weight: normal; + -webkit-flex-direction: row; + -ms-flex-direction: row; + flex-direction: row; +} + +.emotion-439 { + font-weight: 200; margin: 0; margin-block-start: 0; margin-block-end: 0; @@ -1147,7 +1339,108 @@ exports[`Experience/Logo renders 1`] = ` text-rendering: geometricPrecision; color: #111214; line-height: 20px; - z-index: 10; +} + +.emotion-439:first-child { + margin-right: 20px; +} + +.emotion-439 a { + text-decoration-line: none; +} + +.emotion-441 { + color: inherit; + cursor: pointer; + text-decoration-style: solid; + text-decoration-line: underline; + display: inline; + opacity: 1; + font-family: Inter,sans-serif; +} + +.emotion-441:hover { + opacity: 0.75; +} + +.emotion-441:active { + opacity: 1; +} + +.emotion-445 { + width: 86px; + height: 86px; + background-color: #FFFFFF; + border: none; + position: absolute; + transition-property: all; + transition-duration: 400ms; + top: 0; + left: 0; +} + +@media (max-width: 576px) { + .emotion-445 { + background-color: #FFFFFF; + } +} + +@media (max-width: 576px) { + .emotion-445 { + width: 86px; + height: 86px; + background-color: #FFFFFF; + border: none; + position: absolute; + transition-property: all; + transition-duration: 400ms; + top: 0; + left: 0; + } + + @media (max-width: 576px) { + .emotion-445 { + background-color: #FFFFFF; + } + } +} + +.emotion-446 { + width: 86px; + height: 86px; + background-color: #FFFFFF; + border: none; + position: absolute; + transition-property: all; + transition-duration: 400ms; + top: 0; + left: 172px; +} + +@media (max-width: 576px) { + .emotion-446 { + background-color: #FFFFFF; + } +} + +@media (max-width: 576px) { + .emotion-446 { + width: 86px; + height: 86px; + background-color: #FFFFFF; + border: none; + position: absolute; + transition-property: all; + transition-duration: 400ms; + top: 0; + left: 172px; + } + + @media (max-width: 576px) { + .emotion-446 { + background-color: #FFFFFF; + } + } }
- -
+ +

- Nothing herein constitutes an offer to sell, or the solicitation of an offer to buy, any securities or tokens. -

-

- Read more in Celo - - Terms of Service - + World-changing ideas in your inbox

+
- Celo + Celo for
- - Home - + + Developers + +
- -
- - About - + + Founders + +
- -
- - Careers - + + Community + +
- -
- - Validators - + + Validators + +
+ +
+
+ Tech +
- - Developers - + + Docs + +
-
-
- - Alliance - + + Security Audits + +
- -
- - Community - + + Reserve + +
- -
- - Annual Report - + + Government + +
- Technology + Company
- - Docs - + + Vision + +
- -
- - Security Audits - + + Ecosystem + +
- -
- - Reserve - + + Careers + +
- -
- - White Papers - + + Press + +
- -
-
- - Government - -
-
- -
-
- Resources -
-
-
- - Brand Policy - -
-
-
-
- - Press - -
-
-
-
- - Events - -
-
-
-
- - EventKit - -
-
-
-
- - BrandKit - -
-
-
-
- - MerchantKit - -
-
-
- - GrantKit - + + White Papers + +
-
-
- - PilotKit - -
-
-
-
- - Ecosystem Fund - + + Events + +
- Social + Kits
- - - - - Medium - - - - - Blog - -
-
-
-
- - - - - Github - - - - - GitHub - -
-
-
-
- - - - - Twitter - - - - - Twitter - -
-
-
-
- - - - - Forum - - - - - Forum - -
-
-
-
- - - - - Chat - - - - - Chat - + BrandKit + +
- -
- - - - - YouTube - - - - - YouTube - + PilotKit + +
- -
- - - - - Instagram - - - - - Instagram - + GrantKit + +
+ + + + + +
+
+
+
+
- + + Chat + + + +
+
+
- + + Medium + + + +
+
+
- + + Twitter + + + +
+
+
- + + Github + + + +
-
-
-
-
-
-
+ + © 2022 Celo Inc. +
- - - | -
- - " - Change the Story - " - + + Privacy Policy + +
+
+
+ className="emotion-362" + > + + Terms of Use + +
- - The Celo Foundation, © Celo 2022 -
+
+
`; diff --git a/src/_page-tests/experience/__snapshots__/typography.test.tsx.snap b/src/_page-tests/experience/__snapshots__/typography.test.tsx.snap index 8d9b4cc6..f2a95d2e 100644 --- a/src/_page-tests/experience/__snapshots__/typography.test.tsx.snap +++ b/src/_page-tests/experience/__snapshots__/typography.test.tsx.snap @@ -1,48 +1,6 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`Experience/Typography renders 1`] = ` -@keyframes animation-0 { - from { - -webkit-transform: translateX(-100%); - -moz-transform: translateX(-100%); - -ms-transform: translateX(-100%); - transform: translateX(-100%); - } - - to { - -webkit-transform: translateX(0%); - -moz-transform: translateX(0%); - -ms-transform: translateX(0%); - transform: translateX(0%); - } -} - -@keyframes animation-1 { - from { - opacity: 0; - } - - to { - opacity: 1; - } -} - -@keyframes animation-2 { - from { - -webkit-transform: translateX(0%); - -moz-transform: translateX(0%); - -ms-transform: translateX(0%); - transform: translateX(0%); - } - - to { - -webkit-transform: translateX(100%); - -moz-transform: translateX(100%); - -ms-transform: translateX(100%); - transform: translateX(100%); - } -} - .emotion-0 { box-sizing: border-box; display: -webkit-box; @@ -187,14 +145,13 @@ exports[`Experience/Typography renders 1`] = ` } .emotion-8 { - font-weight: normal; + font-weight: 200; margin: 0; margin-block-start: 0; margin-block-end: 0; - font-family: Jost,futura-pt,futura,sans-serif; + font-family: GT-Alpina,serif; font-size: 24px; line-height: 28; - font-weight: 400; text-rendering: geometricPrecision; color: #111214; line-height: 28px; @@ -269,11 +226,11 @@ exports[`Experience/Typography renders 1`] = ` } .emotion-34 { - font-weight: normal; + font-weight: 200; margin: 0; margin-block-start: 0; margin-block-end: 0; - font-family: Jost,futura-pt,futura,sans-serif; + font-family: GT-Alpina,serif; font-size: 16px; line-height: 18; font-weight: 500; @@ -456,6 +413,14 @@ exports[`Experience/Typography renders 1`] = ` } .emotion-159 { + box-sizing: border-box; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex-direction: column; + -ms-flex-direction: column; + flex-direction: column; display: inline; } @@ -500,6 +465,14 @@ exports[`Experience/Typography renders 1`] = ` -ms-flex-item-align: center; align-self: center; width: 100%; + background-color: #FBF6F1; + background-color: #FCFF52; +} + +@media (max-width: 576px) { + .emotion-257 { + padding: 33px; + } } .emotion-258 { @@ -528,6 +501,7 @@ exports[`Experience/Typography renders 1`] = ` flex-wrap: wrap; -webkit-column-gap: 24px; column-gap: 24px; + gap: 0; } @media (min-width: 576px) and (max-width: 992px) { @@ -599,11 +573,12 @@ exports[`Experience/Typography renders 1`] = ` -ms-flex-direction: column; flex-direction: column; grid-column: span 1; + grid-row-start: 1; } @media (min-width: 576px) and (max-width: 992px) { .emotion-259 { - grid-column: span 3; + grid-column: span 1; } } @@ -616,24 +591,30 @@ exports[`Experience/Typography renders 1`] = ` -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; - margin-bottom: 20px; + margin-top: 80px; + margin-bottom: 48px; } -@media (max-width: 576px) { - .emotion-260 { - margin-bottom: 30px; - -webkit-box-pack: center; - -ms-flex-pack: center; - -webkit-justify-content: center; - justify-content: center; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; +.emotion-261 { + box-sizing: border-box; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex-direction: column; + -ms-flex-direction: column; + flex-direction: column; + grid-column: span 1; + grid-row-start: 2; +} + +@media (min-width: 576px) and (max-width: 992px) { + .emotion-261 { + grid-column: span 1; } } -.emotion-261 { +.emotion-262 { box-sizing: border-box; display: -webkit-box; display: -webkit-flex; @@ -642,24 +623,23 @@ exports[`Experience/Typography renders 1`] = ` -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; - padding-bottom: 20px; } @media (max-width: 576px) { - .emotion-261 { + .emotion-262 { -webkit-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; + -webkit-align-items: flex-start; + -webkit-box-align: flex-start; + -ms-flex-align: flex-start; + align-items: flex-start; } } -.emotion-262 { - font-weight: normal; +.emotion-263 { + font-weight: 200; margin: 0; margin-block-start: 0; margin-block-end: 0; @@ -669,19 +649,252 @@ exports[`Experience/Typography renders 1`] = ` text-rendering: geometricPrecision; color: #111214; line-height: 20px; + font-family: Inter,sans-serif; margin-bottom: 20px; max-width: 350px; text-align: left; } +.emotion-264 { + width: 100%; + display: inline-block; +} + +.emotion-264 img { + display: none; +} + +.emotion-264 .grecaptcha-badge { + display: none; +} + +.emotion-264 #email-b4dd2ae2-68e9-4662-bfd3-b2860162a5aa { + box-sizing: border-box; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex-direction: column; + -ms-flex-direction: column; + flex-direction: column; + font-family: Inter,sans-serif; + font-size: 20px; + line-height: 28; + text-rendering: geometricPrecision; + color: #111214; + line-height: 28px; + -webkit-align-self: center; + -ms-flex-item-align: center; + align-self: center; + padding: 24px; + border-radius: 70px; + border-width: 1px; + border-style: solid; + width: 100%; + margin: 4px; + outline-width: 0; + background-color: transparent; +} + +.emotion-264 #email-b4dd2ae2-68e9-4662-bfd3-b2860162a5aa:focus { + border-color: #000; +} + +.emotion-264 #hsForm_b4dd2ae2-68e9-4662-bfd3-b2860162a5aa input[type=submit] { + display: none; +} + +.emotion-264 .celo-hbspt { + width: 100%; +} + +.emotion-264 .celo-hbspt * { + box-sizing: border-box; +} + +.emotion-264 .celo-hbspt fieldset { + border: 0; + padding: 0; + margin: 0; + max-width: 100%; +} + +@media (min-width: 576px) and (max-width: 992px) { + .emotion-264 .celo-hbspt fieldset { + margin-right: 0!important; + width: 100%!important; + } +} + @media (max-width: 576px) { - .emotion-262 { - text-align: center; + .emotion-264 .celo-hbspt fieldset { + float: none; + width: 100%; } } -.emotion-264 { - color: inherit; +.emotion-264 .celo-hbspt fieldset.form-columns-2 .hs-form-field { + width: 50%; + float: left; +} + +@media (min-width: 576px) and (max-width: 992px) { + .emotion-264 .celo-hbspt fieldset.form-columns-2 .hs-form-field { + float: none; + width: 100%; + } +} + +@media (max-width: 576px) { + .emotion-264 .celo-hbspt fieldset.form-columns-2 .hs-form-field { + float: none; + width: 100%; + } +} + +.emotion-264 .celo-hbspt .field { + margin-bottom: 32px; +} + +.emotion-264 .celo-hbspt .input { + margin-right: 26px; +} + +.emotion-264 .celo-hbspt .hs-input { + box-sizing: border-box; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex-direction: column; + -ms-flex-direction: column; + flex-direction: column; + font-family: Inter,sans-serif; + font-size: 20px; + line-height: 28; + text-rendering: geometricPrecision; + color: #111214; + line-height: 28px; + -webkit-align-self: center; + -ms-flex-item-align: center; + align-self: center; + padding: 24px; + border-radius: 70px; + border-width: 1px; + border-style: solid; + width: 100%; + margin: 4px; + outline-width: 0; + background-color: transparent; + border-color: rgba(0, 0, 0, 0.2); +} + +.emotion-264 .celo-hbspt .hs-input:focus { + border-color: #000; +} + +.emotion-264 .hs-custom-style fieldset textarea { + box-sizing: border-box; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex-direction: column; + -ms-flex-direction: column; + flex-direction: column; + font-family: Inter,sans-serif; + font-size: 20px; + line-height: 28; + text-rendering: geometricPrecision; + color: #111214; + line-height: 28px; + -webkit-align-self: center; + -ms-flex-item-align: center; + align-self: center; + padding: 24px; + border-radius: 70px; + border-width: 1px; + border-style: solid; + width: 100%; + margin: 4px; + outline-width: 0; + background-color: transparent; +} + +.emotion-264 .hs-custom-style fieldset textarea:focus { + border-color: #000; +} + +.emotion-264 .celo-hbspt .contact-error { + border-color: #E70532; +} + +.emotion-264 .celo-hbspt .hs-error-msg { + color: #E70532; +} + +.emotion-264 input[type='checkbox'] { + -webkit-flex-basis: 0; + -ms-flex-preferred-size: 0; + flex-basis: 0; +} + +.emotion-264 input.hs-button { + font-family: Jost,futura-pt,futura,sans-serif; + font-size: 16px; + line-height: 16; + text-align: center; + text-rendering: geometricPrecision; + color: #111214; + cursor: pointer; + font-weight: 500; + line-height: 16px; + -webkit-text-decoration: none; + text-decoration: none; + background-color: #FCFF52; + color: #000; + padding: 24px 64px; + border-radius: 70px; + width: -webkit-fit-content; + width: -moz-fit-content; + width: fit-content; + border: 1px solid #CCCCCC; + margin-top: 32px; +} + +.emotion-264 input.hs-button:hover { + background-color: #000; + color: #FFFFFF; +} + +.emotion-264 input.hs-button:active { + background-color: #000; + color: #FFFFFF; +} + +.emotion-264 ul { + list-style-type: none; +} + +.emotion-264 .hs-error-msg { + color: #FF7F6D; +} + +.emotion-264 .legal-consent-container { + font-weight: 200; + margin: 0; + margin-block-start: 0; + margin-block-end: 0; + font-family: EB Garamond,eb-garamond,Garamond,serif; + font-size: 16px; + line-height: 20; + text-rendering: geometricPrecision; + color: #111214; + line-height: 20px; +} + +.emotion-264 a { + color: #1AB775; } .emotion-265 { @@ -694,6 +907,7 @@ exports[`Experience/Typography renders 1`] = ` -ms-flex-direction: column; flex-direction: column; grid-column: span 2; + grid-row-start: 2; } @media (min-width: 576px) and (max-width: 992px) { @@ -702,6 +916,12 @@ exports[`Experience/Typography renders 1`] = ` } } +@media (min-width: 576px) and (max-width: 992px) { + .emotion-265 { + grid-row-start: 3; + } +} + .emotion-266 { box-sizing: border-box; display: -webkit-box; @@ -741,33 +961,25 @@ exports[`Experience/Typography renders 1`] = ` } .emotion-268 { - font-weight: normal; - margin: 0; - margin-block-start: 0; - margin-block-end: 0; - font-family: Jost,futura-pt,futura,sans-serif; - font-size: 16px; - line-height: 18; - font-weight: 500; - text-rendering: geometricPrecision; - color: #111214; - line-height: 18px; + font-family: Inter,sans-serif; + margin-top: 0; + font-weight: 200; margin-bottom: 20px; } -.emotion-269 { +.emotion-270 { margin-top: 8px; margin-bottom: 8px; } -.emotion-271 { +.emotion-272 { color: inherit; cursor: pointer; text-decoration-style: solid; text-decoration-line: underline; display: inline; opacity: 1; - font-weight: normal; + font-weight: 200; margin: 0; margin-block-start: 0; margin-block-end: 0; @@ -777,6 +989,11 @@ exports[`Experience/Typography renders 1`] = ` text-rendering: geometricPrecision; color: #111214; line-height: 20px; + font-family: Inter,sans-serif; + font-weight: 700; + border: 1px solid rgba(0, 0, 0, 0.2); + padding: 10.5px 16px; + border-radius: 70px; text-decoration-line: none; display: -webkit-inline-box; display: -webkit-inline-flex; @@ -788,21 +1005,21 @@ exports[`Experience/Typography renders 1`] = ` align-items: center; } -.emotion-271:hover { +.emotion-272:hover { opacity: 0.75; } -.emotion-271:active { +.emotion-272:active { opacity: 1; } -.emotion-293 { +.emotion-282 { padding-left: 25px; padding-right: 25px; } @media (max-width: 576px) { - .emotion-293 { + .emotion-282 { margin-top: 35px; width: 50%; padding-left: 10px; @@ -810,14 +1027,14 @@ exports[`Experience/Typography renders 1`] = ` } } -.emotion-339 { +.emotion-318 { padding-left: 25px; padding-right: 25px; padding-end: 0; } @media (max-width: 576px) { - .emotion-339 { + .emotion-318 { margin-top: 35px; width: 50%; padding-left: 10px; @@ -825,11 +1042,29 @@ exports[`Experience/Typography renders 1`] = ` } } -.emotion-344 { - padding-right: 8px; +.emotion-330 { + box-sizing: border-box; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex-direction: column; + -ms-flex-direction: column; + flex-direction: column; + overflow: hidden; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + -webkit-align-self: center; + -ms-flex-item-align: center; + align-self: center; + width: 100%; + background-color: #FBF6F1; + background-color: #FCFF52; } -.emotion-386 { +.emotion-331 { box-sizing: border-box; display: -webkit-box; display: -webkit-flex; @@ -858,7 +1093,7 @@ exports[`Experience/Typography renders 1`] = ` } @media (min-width: 576px) and (max-width: 992px) { - .emotion-386 { + .emotion-331 { display: grid; grid-auto-rows: auto; -webkit-align-self: center; @@ -875,7 +1110,7 @@ exports[`Experience/Typography renders 1`] = ` } @media (min-width: 992px) { - .emotion-386 { + .emotion-331 { display: grid; grid-auto-rows: auto; -webkit-align-self: center; @@ -887,39 +1122,39 @@ exports[`Experience/Typography renders 1`] = ` } @media (min-width: 992px) { - .emotion-386 { + .emotion-331 { grid-template-columns: 1fr; } } @media (min-width: 576px) and (max-width: 992px) { - .emotion-386 { + .emotion-331 { grid-template-columns: 1fr; } } @media (min-width: 992px) { - .emotion-386 { + .emotion-331 { margin-top: 60px; margin-bottom: 60px; } } @media (min-width: 576px) and (max-width: 992px) { - .emotion-386 { + .emotion-331 { margin-top: 40px; margin-bottom: 40px; } } @media (max-width: 576px) { - .emotion-386 { + .emotion-331 { margin-top: 30px; margin-bottom: 30px; } } -.emotion-387 { +.emotion-332 { box-sizing: border-box; display: -webkit-box; display: -webkit-flex; @@ -934,10 +1169,15 @@ exports[`Experience/Typography renders 1`] = ` -webkit-box-pack: justify; -webkit-justify-content: space-between; justify-content: space-between; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + border-bottom: 1px solid rgba(0, 0, 0, 0.2); } @media (max-width: 576px) { - .emotion-387 { + .emotion-332 { -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; @@ -949,100 +1189,53 @@ exports[`Experience/Typography renders 1`] = ` -webkit-box-align: center; -ms-flex-align: center; align-items: center; + border-bottom: none; } } -.emotion-388 { +.emotion-333 { box-sizing: border-box; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; + -webkit-flex-direction: column; + -ms-flex-direction: column; + flex-direction: column; -webkit-flex-direction: row; -ms-flex-direction: row; flex-direction: row; - margin-bottom: 20px; - overflow: hidden; } -@media (max-width: 576px) { - .emotion-388 { - -webkit-box-pack: center; - -ms-flex-pack: center; - -webkit-justify-content: center; - justify-content: center; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - } -} - -.emotion-389 { - width: 20px; - height: 20px; - z-index: 10; +.emotion-333>div:nth-child(-n+3) { + border-right: none; } @media (max-width: 576px) { - .emotion-389 { - margin-bottom: 8px; + .emotion-333 { + margin-bottom: 40px; } } -.emotion-390 { - margin-left: 10px; - margin-right: 10px; - z-index: 10; +.emotion-334 { + border: 1px solid rgba(0, 0, 0, 0.2); + padding: 16px; } @media (max-width: 576px) { - .emotion-390 { - display: none; + .emotion-334 { + padding: 16px; } } -.emotion-391 { - box-sizing: border-box; - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-flex-direction: column; - -ms-flex-direction: column; - flex-direction: column; - position: relative; +@media (min-width: 576px) { + .emotion-334 { + border-bottom: none; + } } -.emotion-392 { - box-sizing: border-box; - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-flex-direction: column; - -ms-flex-direction: column; - flex-direction: column; - background-color: #FFFFFF; - position: absolute; - height: 100%; - width: 101%; - -webkit-animation-duration: 250ms; - animation-duration: 250ms; - -webkit-animation-iteration-count: 1; - animation-iteration-count: 1; - -webkit-animation-timing-function: linear; - animation-timing-function: linear; - -webkit-animation-fill-mode: both; - animation-fill-mode: both; - -webkit-animation-delay: 3500ms; - animation-delay: 3500ms; - -webkit-animation-name: animation-0; - animation-name: animation-0; -} - -.emotion-393 { - font-weight: normal; +.emotion-346 { + font-weight: 200; margin: 0; margin-block-start: 0; margin-block-end: 0; @@ -1052,24 +1245,17 @@ exports[`Experience/Typography renders 1`] = ` text-rendering: geometricPrecision; color: #111214; line-height: 20px; - font-style: italic; - -webkit-animation-fill-mode: both; - animation-fill-mode: both; - -webkit-animation-iteration-count: 1; - animation-iteration-count: 1; - -webkit-animation-duration: 750ms; - animation-duration: 750ms; - -webkit-animation-name: animation-1; - animation-name: animation-1; + font-family: Inter,sans-serif; + z-index: 10; } @media (max-width: 576px) { - .emotion-393 { - text-align: center; + .emotion-346 { + margin-bottom: 17px; } } -.emotion-394 { +.emotion-347 { box-sizing: border-box; display: -webkit-box; display: -webkit-flex; @@ -1078,24 +1264,13 @@ exports[`Experience/Typography renders 1`] = ` -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; - background-color: #FFFFFF; - position: absolute; - height: 100%; - width: 101%; - -webkit-animation-duration: 250ms; - animation-duration: 250ms; - -webkit-animation-iteration-count: 1; - animation-iteration-count: 1; - -webkit-animation-timing-function: linear; - animation-timing-function: linear; - -webkit-animation-fill-mode: both; - animation-fill-mode: both; - -webkit-animation-name: animation-2; - animation-name: animation-2; -} - -.emotion-395 { - font-weight: normal; + -webkit-flex-direction: row; + -ms-flex-direction: row; + flex-direction: row; +} + +.emotion-348 { + font-weight: 200; margin: 0; margin-block-start: 0; margin-block-end: 0; @@ -1105,7 +1280,108 @@ exports[`Experience/Typography renders 1`] = ` text-rendering: geometricPrecision; color: #111214; line-height: 20px; - z-index: 10; +} + +.emotion-348:first-child { + margin-right: 20px; +} + +.emotion-348 a { + text-decoration-line: none; +} + +.emotion-350 { + color: inherit; + cursor: pointer; + text-decoration-style: solid; + text-decoration-line: underline; + display: inline; + opacity: 1; + font-family: Inter,sans-serif; +} + +.emotion-350:hover { + opacity: 0.75; +} + +.emotion-350:active { + opacity: 1; +} + +.emotion-354 { + width: 86px; + height: 86px; + background-color: #FFFFFF; + border: none; + position: absolute; + transition-property: all; + transition-duration: 400ms; + top: 0; + left: 0; +} + +@media (max-width: 576px) { + .emotion-354 { + background-color: #FFFFFF; + } +} + +@media (max-width: 576px) { + .emotion-354 { + width: 86px; + height: 86px; + background-color: #FFFFFF; + border: none; + position: absolute; + transition-property: all; + transition-duration: 400ms; + top: 0; + left: 0; + } + + @media (max-width: 576px) { + .emotion-354 { + background-color: #FFFFFF; + } + } +} + +.emotion-355 { + width: 86px; + height: 86px; + background-color: #FFFFFF; + border: none; + position: absolute; + transition-property: all; + transition-duration: 400ms; + top: 0; + left: 172px; +} + +@media (max-width: 576px) { + .emotion-355 { + background-color: #FFFFFF; + } +} + +@media (max-width: 576px) { + .emotion-355 { + width: 86px; + height: 86px; + background-color: #FFFFFF; + border: none; + position: absolute; + transition-property: all; + transition-duration: 400ms; + top: 0; + left: 172px; + } + + @media (max-width: 576px) { + .emotion-355 { + background-color: #FFFFFF; + } + } }
- EB Garamond + GT-Alpina • Regular @@ -3447,7 +3723,7 @@ Use Jost* for call to actions, diagrams, instructions, and infographics. style={ Object { "color": "rgba(17,18,20,1.00)", - "fontFamily": "Jost, futura-pt, futura, sans-serif", + "fontFamily": "GT-Alpina, serif", "fontSize": "16px", "fontWeight": "500", "lineHeight": "18px", @@ -3511,7 +3787,7 @@ Use Jost* for call to actions, diagrams, instructions, and infographics. style={ Object { "color": "rgba(17,18,20,1.00)", - "fontFamily": "EB Garamond, eb-garamond, Garamond, serif", + "fontFamily": "GT-Alpina, serif", "fontSize": "40px", "lineHeight": "48px", "textRendering": "geometricPrecision", @@ -3548,7 +3824,7 @@ Use Jost* for call to actions, diagrams, instructions, and infographics. style={ Object { "color": "rgba(17,18,20,1.00)", - "fontFamily": "Jost, futura-pt, futura, sans-serif", + "fontFamily": "GT-Alpina, serif", "fontSize": "16px", "fontWeight": "500", "lineHeight": "18px", @@ -3556,7 +3832,7 @@ Use Jost* for call to actions, diagrams, instructions, and infographics. } } > - EB Garamond + GT-Alpina • Regular @@ -3570,7 +3846,7 @@ Use Jost* for call to actions, diagrams, instructions, and infographics. style={ Object { "color": "rgba(17,18,20,1.00)", - "fontFamily": "Jost, futura-pt, futura, sans-serif", + "fontFamily": "GT-Alpina, serif", "fontSize": "16px", "fontWeight": "500", "lineHeight": "18px", @@ -3634,9 +3910,8 @@ Use Jost* for call to actions, diagrams, instructions, and infographics. style={ Object { "color": "rgba(17,18,20,1.00)", - "fontFamily": "Jost, futura-pt, futura, sans-serif", + "fontFamily": "GT-Alpina, serif", "fontSize": "24px", - "fontWeight": "400", "lineHeight": "28px", "textRendering": "geometricPrecision", } @@ -3672,7 +3947,7 @@ Use Jost* for call to actions, diagrams, instructions, and infographics. style={ Object { "color": "rgba(17,18,20,1.00)", - "fontFamily": "Jost, futura-pt, futura, sans-serif", + "fontFamily": "GT-Alpina, serif", "fontSize": "16px", "fontWeight": "500", "lineHeight": "18px", @@ -3680,10 +3955,10 @@ Use Jost* for call to actions, diagrams, instructions, and infographics. } } > - Jost + GT-Alpina • - Book + Regular
- EB Garamond + Inter • Regular @@ -3817,7 +4092,7 @@ Use Jost* for call to actions, diagrams, instructions, and infographics. style={ Object { "color": "rgba(17,18,20,1.00)", - "fontFamily": "Jost, futura-pt, futura, sans-serif", + "fontFamily": "GT-Alpina, serif", "fontSize": "16px", "fontWeight": "500", "lineHeight": "18px", @@ -3881,7 +4156,7 @@ Use Jost* for call to actions, diagrams, instructions, and infographics. style={ Object { "color": "rgba(17,18,20,1.00)", - "fontFamily": "Jost, futura-pt, futura, sans-serif", + "fontFamily": "GT-Alpina, serif", "fontSize": "20px", "fontWeight": "500", "lineHeight": "24px", @@ -3919,7 +4194,7 @@ Use Jost* for call to actions, diagrams, instructions, and infographics. style={ Object { "color": "rgba(17,18,20,1.00)", - "fontFamily": "Jost, futura-pt, futura, sans-serif", + "fontFamily": "GT-Alpina, serif", "fontSize": "16px", "fontWeight": "500", "lineHeight": "18px", @@ -3927,7 +4202,7 @@ Use Jost* for call to actions, diagrams, instructions, and infographics. } } > - Jost + GT-Alpina • Medium @@ -3941,7 +4216,7 @@ Use Jost* for call to actions, diagrams, instructions, and infographics. style={ Object { "color": "rgba(17,18,20,1.00)", - "fontFamily": "Jost, futura-pt, futura, sans-serif", + "fontFamily": "GT-Alpina, serif", "fontSize": "16px", "fontWeight": "500", "lineHeight": "18px", @@ -4005,7 +4280,7 @@ Use Jost* for call to actions, diagrams, instructions, and infographics. style={ Object { "color": "rgba(17,18,20,1.00)", - "fontFamily": "Jost, futura-pt, futura, sans-serif", + "fontFamily": "GT-Alpina, serif", "fontSize": "16px", "fontWeight": "500", "lineHeight": "18px", @@ -4043,7 +4318,7 @@ Use Jost* for call to actions, diagrams, instructions, and infographics. style={ Object { "color": "rgba(17,18,20,1.00)", - "fontFamily": "Jost, futura-pt, futura, sans-serif", + "fontFamily": "GT-Alpina, serif", "fontSize": "16px", "fontWeight": "500", "lineHeight": "18px", @@ -4051,7 +4326,7 @@ Use Jost* for call to actions, diagrams, instructions, and infographics. } } > - Jost + GT-Alpina • Medium @@ -4065,7 +4340,7 @@ Use Jost* for call to actions, diagrams, instructions, and infographics. style={ Object { "color": "rgba(17,18,20,1.00)", - "fontFamily": "Jost, futura-pt, futura, sans-serif", + "fontFamily": "GT-Alpina, serif", "fontSize": "16px", "fontWeight": "500", "lineHeight": "18px", @@ -4129,7 +4404,7 @@ Use Jost* for call to actions, diagrams, instructions, and infographics. style={ Object { "color": "rgba(17,18,20,1.00)", - "fontFamily": "EB Garamond, eb-garamond, Garamond, serif", + "fontFamily": "Inter, sans-serif", "fontSize": "20px", "lineHeight": "28px", "textRendering": "geometricPrecision", @@ -4166,7 +4441,7 @@ Use Jost* for call to actions, diagrams, instructions, and infographics. style={ Object { "color": "rgba(17,18,20,1.00)", - "fontFamily": "Jost, futura-pt, futura, sans-serif", + "fontFamily": "GT-Alpina, serif", "fontSize": "16px", "fontWeight": "500", "lineHeight": "18px", @@ -4174,7 +4449,7 @@ Use Jost* for call to actions, diagrams, instructions, and infographics. } } > - EB Garamond + Inter • Regular @@ -4188,7 +4463,7 @@ Use Jost* for call to actions, diagrams, instructions, and infographics. style={ Object { "color": "rgba(17,18,20,1.00)", - "fontFamily": "Jost, futura-pt, futura, sans-serif", + "fontFamily": "GT-Alpina, serif", "fontSize": "16px", "fontWeight": "500", "lineHeight": "18px", @@ -4287,7 +4562,7 @@ Use Jost* for call to actions, diagrams, instructions, and infographics. style={ Object { "color": "rgba(17,18,20,1.00)", - "fontFamily": "Jost, futura-pt, futura, sans-serif", + "fontFamily": "GT-Alpina, serif", "fontSize": "16px", "fontWeight": "500", "lineHeight": "18px", @@ -4309,7 +4584,7 @@ Use Jost* for call to actions, diagrams, instructions, and infographics. style={ Object { "color": "rgba(17,18,20,1.00)", - "fontFamily": "Jost, futura-pt, futura, sans-serif", + "fontFamily": "GT-Alpina, serif", "fontSize": "16px", "fontWeight": "500", "lineHeight": "18px", @@ -4341,7 +4616,7 @@ Use Jost* for call to actions, diagrams, instructions, and infographics. style={ Object { "color": "rgba(17,18,20,1.00)", - "fontFamily": "Jost, futura-pt, futura, sans-serif", + "fontFamily": "GT-Alpina, serif", "fontSize": "20px", "fontWeight": "500", "lineHeight": "24px", @@ -4379,7 +4654,7 @@ Use Jost* for call to actions, diagrams, instructions, and infographics. style={ Object { "color": "rgba(17,18,20,1.00)", - "fontFamily": "EB Garamond, eb-garamond, Garamond, serif", + "fontFamily": "GT-Alpina, serif", "fontSize": "36px", "lineHeight": "40px", "marginBottom": "48px", @@ -4398,7 +4673,7 @@ Use Jost* for call to actions, diagrams, instructions, and infographics. style={ Object { "color": "rgba(17,18,20,1.00)", - "fontFamily": "EB Garamond, eb-garamond, Garamond, serif", + "fontFamily": "GT-Alpina, serif", "fontSize": "28px", "lineHeight": "32px", "marginBottom": "48px", @@ -4417,7 +4692,7 @@ Use Jost* for call to actions, diagrams, instructions, and infographics. style={ Object { "color": "rgba(17,18,20,1.00)", - "fontFamily": "Jost, futura-pt, futura, sans-serif", + "fontFamily": "GT-Alpina, serif", "fontSize": "24px", "lineHeight": "32px", "marginBottom": "48px", @@ -4436,7 +4711,7 @@ Use Jost* for call to actions, diagrams, instructions, and infographics. style={ Object { "color": "rgba(17,18,20,1.00)", - "fontFamily": "EB Garamond, eb-garamond, Garamond, serif", + "fontFamily": "Inter, sans-serif", "fontSize": "24px", "lineHeight": "32px", "marginBottom": "48px", @@ -4454,7 +4729,7 @@ Use Jost* for call to actions, diagrams, instructions, and infographics. style={ Object { "color": "rgba(17,18,20,1.00)", - "fontFamily": "Jost, futura-pt, futura, sans-serif", + "fontFamily": "GT-Alpina, serif", "fontSize": "20px", "fontWeight": "500", "lineHeight": "24px", @@ -4471,7 +4746,7 @@ Use Jost* for call to actions, diagrams, instructions, and infographics. style={ Object { "color": "rgba(17,18,20,1.00)", - "fontFamily": "EB Garamond, eb-garamond, Garamond, serif", + "fontFamily": "Inter, sans-serif", "fontSize": "20px", "lineHeight": "28px", "marginBottom": "48px", @@ -4487,7 +4762,7 @@ Use Jost* for call to actions, diagrams, instructions, and infographics. style={ Object { "color": "rgba(17,18,20,1.00)", - "fontFamily": "Jost, futura-pt, futura, sans-serif", + "fontFamily": "GT-Alpina, serif", "fontSize": "16px", "fontWeight": "500", "lineHeight": "18px", @@ -4538,44 +4813,36 @@ Use Jost* for call to actions, diagrams, instructions, and infographics. > - -
+ +

- Nothing herein constitutes an offer to sell, or the solicitation of an offer to buy, any securities or tokens. -

-

- Read more in Celo - - Terms of Service - + World-changing ideas in your inbox

+
- Celo + Celo for
- - Home - + + Developers + +
-
-
- - About - + + Founders + +
- -
- - Careers - + + Community + +
- -
- - Validators - + + Validators + +
+ +
+
+ Tech +
- - Developers - + + Docs + +
-
-
- - Alliance - + + Security Audits + +
- -
- - Community - + + Reserve + +
- -
- - Annual Report - + + Government + +
- Technology + Company
- - Docs - -
-
-
-
- - Security Audits - -
-
-
-
- - Reserve - -
-
-
-
- - White Papers - -
-
-
-
- - Government - -
-
-
-
-
- Resources -
-
-
- - Brand Policy - -
-
-
-
- - Press - -
-
-
-
- - Events - -
-
-
-
- - EventKit - -
-
-
-
- - BrandKit - -
-
-
-
- - MerchantKit - -
-
-
-
- - GrantKit - -
-
-
-
- - PilotKit - -
-
-
-
- - Ecosystem Fund - -
-
-
-
-
- Social -
-
-
- - - - - Medium - - - - - Blog - -
-
-
-
- - - - - Github - - - - - GitHub - -
-
-
-
- - - - - Twitter - - - - - Twitter - + + Vision + +
-
-
- - - - - Forum - - - - - Forum - + Ecosystem + +
- -
- - - - - Chat - - - - - Chat - + Careers + +
- -
- - - - - YouTube - - - - - YouTube - + Press + +
- -
- - - - - Instagram - - - - - Instagram - + White Papers + +
- -
- - - - - - - LinkedIn - + Events + +
+ +
+
+ Kits +
- - - - - - - Twitch - + BrandKit + +
-
-
- - - - - - - Reddit - + PilotKit + +
- -
- - - - - - - Telegram - + GrantKit + +
@@ -5407,54 +5213,200 @@ Use Jost* for call to actions, diagrams, instructions, and infographics.
- - - | - + +
+
+
- " - Change the Story - " - + + + + Twitter + + + + +
+
+
+ className="emotion-159" + > + + + + Github + + + + +
- The Celo Foundation, © Celo 2022 + © 2022 Celo Inc. +
+ + +
+
+
`; diff --git a/src/_page-tests/stake-off/__snapshots__/terms.test.tsx.snap b/src/_page-tests/stake-off/__snapshots__/terms.test.tsx.snap index c199b157..c5abd870 100644 --- a/src/_page-tests/stake-off/__snapshots__/terms.test.tsx.snap +++ b/src/_page-tests/stake-off/__snapshots__/terms.test.tsx.snap @@ -93,7 +93,7 @@ exports[`Terms renders 1`] = ` style={ Object { "color": "rgba(17,18,20,1.00)", - "fontFamily": "EB Garamond, eb-garamond, Garamond, serif", + "fontFamily": "GT-Alpina, serif", "fontSize": "36px", "lineHeight": "40px", "textAlign": "center", @@ -112,7 +112,7 @@ exports[`Terms renders 1`] = ` style={ Object { "color": "rgba(17,18,20,1.00)", - "fontFamily": "Jost, futura-pt, futura, sans-serif", + "fontFamily": "GT-Alpina, serif", "fontSize": "24px", "lineHeight": "32px", "textAlign": "center", @@ -170,7 +170,7 @@ exports[`Terms renders 1`] = ` style={ Object { "color": "rgba(17,18,20,1.00)", - "fontFamily": "Jost, futura-pt, futura, sans-serif", + "fontFamily": "GT-Alpina, serif", "fontSize": "16px", "fontWeight": "500", "lineHeight": "18px", @@ -206,7 +206,7 @@ exports[`Terms renders 1`] = ` style={ Object { "color": "rgba(17,18,20,1.00)", - "fontFamily": "EB Garamond, eb-garamond, Garamond, serif", + "fontFamily": "Inter, sans-serif", "fontSize": "20px", "lineHeight": "28px", "textRendering": "geometricPrecision", @@ -237,7 +237,7 @@ YOUR PARTICIPATION IN TGCSO IS ENTIRELY VOLUNTARY, BUT IF YOU ARE PARTICIPATING Object { "color": "rgba(17,18,20,1.00)", "display": "list-item", - "fontFamily": "EB Garamond, eb-garamond, Garamond, serif", + "fontFamily": "Inter, sans-serif", "fontSize": "20px", "lineHeight": "28px", "listStyle": "decimal", @@ -256,7 +256,7 @@ YOUR PARTICIPATION IN TGCSO IS ENTIRELY VOLUNTARY, BUT IF YOU ARE PARTICIPATING Object { "color": "rgba(17,18,20,1.00)", "display": "list-item", - "fontFamily": "EB Garamond, eb-garamond, Garamond, serif", + "fontFamily": "Inter, sans-serif", "fontSize": "20px", "lineHeight": "28px", "listStyle": "decimal", @@ -308,7 +308,7 @@ YOUR PARTICIPATION IN TGCSO IS ENTIRELY VOLUNTARY, BUT IF YOU ARE PARTICIPATING style={ Object { "color": "rgba(17,18,20,1.00)", - "fontFamily": "EB Garamond, eb-garamond, Garamond, serif", + "fontFamily": "Inter, sans-serif", "fontSize": "20px", "fontWeight": "bold", "lineHeight": "28px", @@ -327,7 +327,7 @@ YOUR PARTICIPATION IN TGCSO IS ENTIRELY VOLUNTARY, BUT IF YOU ARE PARTICIPATING Object { "color": "rgba(17,18,20,1.00)", "display": "list-item", - "fontFamily": "EB Garamond, eb-garamond, Garamond, serif", + "fontFamily": "Inter, sans-serif", "fontSize": "20px", "lineHeight": "28px", "listStyle": "decimal", @@ -380,7 +380,7 @@ YOUR PARTICIPATION IN TGCSO IS ENTIRELY VOLUNTARY, BUT IF YOU ARE PARTICIPATING Object { "color": "rgba(17,18,20,1.00)", "display": "list-item", - "fontFamily": "EB Garamond, eb-garamond, Garamond, serif", + "fontFamily": "Inter, sans-serif", "fontSize": "20px", "lineHeight": "28px", "listStyle": "decimal", @@ -401,7 +401,7 @@ YOUR PARTICIPATION IN TGCSO IS ENTIRELY VOLUNTARY, BUT IF YOU ARE PARTICIPATING Object { "color": "rgba(17,18,20,1.00)", "display": "list-item", - "fontFamily": "EB Garamond, eb-garamond, Garamond, serif", + "fontFamily": "Inter, sans-serif", "fontSize": "20px", "lineHeight": "28px", "listStyle": "decimal", @@ -433,7 +433,7 @@ YOUR PARTICIPATION IN TGCSO IS ENTIRELY VOLUNTARY, BUT IF YOU ARE PARTICIPATING Object { "color": "rgba(17,18,20,1.00)", "display": "list-item", - "fontFamily": "EB Garamond, eb-garamond, Garamond, serif", + "fontFamily": "Inter, sans-serif", "fontSize": "20px", "lineHeight": "28px", "listStyle": "lower-alpha", @@ -452,7 +452,7 @@ YOUR PARTICIPATION IN TGCSO IS ENTIRELY VOLUNTARY, BUT IF YOU ARE PARTICIPATING Object { "color": "rgba(17,18,20,1.00)", "display": "list-item", - "fontFamily": "EB Garamond, eb-garamond, Garamond, serif", + "fontFamily": "Inter, sans-serif", "fontSize": "20px", "lineHeight": "28px", "listStyle": "lower-alpha", @@ -473,7 +473,7 @@ YOUR PARTICIPATION IN TGCSO IS ENTIRELY VOLUNTARY, BUT IF YOU ARE PARTICIPATING Object { "color": "rgba(17,18,20,1.00)", "display": "list-item", - "fontFamily": "EB Garamond, eb-garamond, Garamond, serif", + "fontFamily": "Inter, sans-serif", "fontSize": "20px", "lineHeight": "28px", "listStyle": "decimal", @@ -502,7 +502,7 @@ YOUR PARTICIPATION IN TGCSO IS ENTIRELY VOLUNTARY, BUT IF YOU ARE PARTICIPATING Object { "color": "rgba(17,18,20,1.00)", "display": "list-item", - "fontFamily": "EB Garamond, eb-garamond, Garamond, serif", + "fontFamily": "Inter, sans-serif", "fontSize": "20px", "lineHeight": "28px", "listStyle": "lower-alpha", @@ -520,7 +520,7 @@ YOUR PARTICIPATION IN TGCSO IS ENTIRELY VOLUNTARY, BUT IF YOU ARE PARTICIPATING Object { "color": "rgba(17,18,20,1.00)", "display": "list-item", - "fontFamily": "EB Garamond, eb-garamond, Garamond, serif", + "fontFamily": "Inter, sans-serif", "fontSize": "20px", "lineHeight": "28px", "listStyle": "lower-alpha", @@ -539,7 +539,7 @@ YOUR PARTICIPATION IN TGCSO IS ENTIRELY VOLUNTARY, BUT IF YOU ARE PARTICIPATING Object { "color": "rgba(17,18,20,1.00)", "display": "list-item", - "fontFamily": "EB Garamond, eb-garamond, Garamond, serif", + "fontFamily": "Inter, sans-serif", "fontSize": "20px", "lineHeight": "28px", "listStyle": "lower-alpha", @@ -557,7 +557,7 @@ YOUR PARTICIPATION IN TGCSO IS ENTIRELY VOLUNTARY, BUT IF YOU ARE PARTICIPATING Object { "color": "rgba(17,18,20,1.00)", "display": "list-item", - "fontFamily": "EB Garamond, eb-garamond, Garamond, serif", + "fontFamily": "Inter, sans-serif", "fontSize": "20px", "lineHeight": "28px", "listStyle": "lower-alpha", @@ -575,7 +575,7 @@ YOUR PARTICIPATION IN TGCSO IS ENTIRELY VOLUNTARY, BUT IF YOU ARE PARTICIPATING Object { "color": "rgba(17,18,20,1.00)", "display": "list-item", - "fontFamily": "EB Garamond, eb-garamond, Garamond, serif", + "fontFamily": "Inter, sans-serif", "fontSize": "20px", "lineHeight": "28px", "listStyle": "lower-alpha", @@ -593,7 +593,7 @@ YOUR PARTICIPATION IN TGCSO IS ENTIRELY VOLUNTARY, BUT IF YOU ARE PARTICIPATING Object { "color": "rgba(17,18,20,1.00)", "display": "list-item", - "fontFamily": "EB Garamond, eb-garamond, Garamond, serif", + "fontFamily": "Inter, sans-serif", "fontSize": "20px", "lineHeight": "28px", "listStyle": "lower-alpha", @@ -614,7 +614,7 @@ YOUR PARTICIPATION IN TGCSO IS ENTIRELY VOLUNTARY, BUT IF YOU ARE PARTICIPATING Object { "color": "rgba(17,18,20,1.00)", "display": "list-item", - "fontFamily": "EB Garamond, eb-garamond, Garamond, serif", + "fontFamily": "Inter, sans-serif", "fontSize": "20px", "lineHeight": "28px", "listStyle": "decimal", @@ -633,7 +633,7 @@ YOUR PARTICIPATION IN TGCSO IS ENTIRELY VOLUNTARY, BUT IF YOU ARE PARTICIPATING Object { "color": "rgba(17,18,20,1.00)", "display": "list-item", - "fontFamily": "EB Garamond, eb-garamond, Garamond, serif", + "fontFamily": "Inter, sans-serif", "fontSize": "20px", "lineHeight": "28px", "listStyle": "decimal", @@ -686,7 +686,7 @@ YOUR PARTICIPATION IN TGCSO IS ENTIRELY VOLUNTARY, BUT IF YOU ARE PARTICIPATING Object { "color": "rgba(17,18,20,1.00)", "display": "list-item", - "fontFamily": "EB Garamond, eb-garamond, Garamond, serif", + "fontFamily": "Inter, sans-serif", "fontSize": "20px", "lineHeight": "28px", "listStyle": "decimal", @@ -715,7 +715,7 @@ YOUR PARTICIPATION IN TGCSO IS ENTIRELY VOLUNTARY, BUT IF YOU ARE PARTICIPATING Object { "color": "rgba(17,18,20,1.00)", "display": "list-item", - "fontFamily": "EB Garamond, eb-garamond, Garamond, serif", + "fontFamily": "Inter, sans-serif", "fontSize": "20px", "lineHeight": "28px", "listStyle": "lower-alpha", @@ -734,7 +734,7 @@ YOUR PARTICIPATION IN TGCSO IS ENTIRELY VOLUNTARY, BUT IF YOU ARE PARTICIPATING Object { "color": "rgba(17,18,20,1.00)", "display": "list-item", - "fontFamily": "EB Garamond, eb-garamond, Garamond, serif", + "fontFamily": "Inter, sans-serif", "fontSize": "20px", "lineHeight": "28px", "listStyle": "lower-alpha", @@ -752,7 +752,7 @@ YOUR PARTICIPATION IN TGCSO IS ENTIRELY VOLUNTARY, BUT IF YOU ARE PARTICIPATING Object { "color": "rgba(17,18,20,1.00)", "display": "list-item", - "fontFamily": "EB Garamond, eb-garamond, Garamond, serif", + "fontFamily": "Inter, sans-serif", "fontSize": "20px", "lineHeight": "28px", "listStyle": "lower-alpha", @@ -771,7 +771,7 @@ YOUR PARTICIPATION IN TGCSO IS ENTIRELY VOLUNTARY, BUT IF YOU ARE PARTICIPATING Object { "color": "rgba(17,18,20,1.00)", "display": "list-item", - "fontFamily": "EB Garamond, eb-garamond, Garamond, serif", + "fontFamily": "Inter, sans-serif", "fontSize": "20px", "lineHeight": "28px", "listStyle": "lower-alpha", @@ -789,7 +789,7 @@ YOUR PARTICIPATION IN TGCSO IS ENTIRELY VOLUNTARY, BUT IF YOU ARE PARTICIPATING Object { "color": "rgba(17,18,20,1.00)", "display": "list-item", - "fontFamily": "EB Garamond, eb-garamond, Garamond, serif", + "fontFamily": "Inter, sans-serif", "fontSize": "20px", "lineHeight": "28px", "listStyle": "lower-alpha", @@ -807,7 +807,7 @@ YOUR PARTICIPATION IN TGCSO IS ENTIRELY VOLUNTARY, BUT IF YOU ARE PARTICIPATING Object { "color": "rgba(17,18,20,1.00)", "display": "list-item", - "fontFamily": "EB Garamond, eb-garamond, Garamond, serif", + "fontFamily": "Inter, sans-serif", "fontSize": "20px", "lineHeight": "28px", "listStyle": "lower-alpha", @@ -829,7 +829,7 @@ YOUR PARTICIPATION IN TGCSO IS ENTIRELY VOLUNTARY, BUT IF YOU ARE PARTICIPATING Object { "color": "rgba(17,18,20,1.00)", "display": "list-item", - "fontFamily": "EB Garamond, eb-garamond, Garamond, serif", + "fontFamily": "Inter, sans-serif", "fontSize": "20px", "lineHeight": "28px", "listStyle": "decimal", @@ -858,7 +858,7 @@ YOUR PARTICIPATION IN TGCSO IS ENTIRELY VOLUNTARY, BUT IF YOU ARE PARTICIPATING Object { "color": "rgba(17,18,20,1.00)", "display": "list-item", - "fontFamily": "EB Garamond, eb-garamond, Garamond, serif", + "fontFamily": "Inter, sans-serif", "fontSize": "20px", "lineHeight": "28px", "listStyle": "lower-alpha", @@ -879,7 +879,7 @@ YOUR PARTICIPATION IN TGCSO IS ENTIRELY VOLUNTARY, BUT IF YOU ARE PARTICIPATING Object { "color": "rgba(17,18,20,1.00)", "display": "list-item", - "fontFamily": "EB Garamond, eb-garamond, Garamond, serif", + "fontFamily": "Inter, sans-serif", "fontSize": "20px", "lineHeight": "28px", "listStyle": "decimal", @@ -908,7 +908,7 @@ YOUR PARTICIPATION IN TGCSO IS ENTIRELY VOLUNTARY, BUT IF YOU ARE PARTICIPATING Object { "color": "rgba(17,18,20,1.00)", "display": "list-item", - "fontFamily": "EB Garamond, eb-garamond, Garamond, serif", + "fontFamily": "Inter, sans-serif", "fontSize": "20px", "lineHeight": "28px", "listStyle": "lower-alpha", @@ -926,7 +926,7 @@ YOUR PARTICIPATION IN TGCSO IS ENTIRELY VOLUNTARY, BUT IF YOU ARE PARTICIPATING Object { "color": "rgba(17,18,20,1.00)", "display": "list-item", - "fontFamily": "EB Garamond, eb-garamond, Garamond, serif", + "fontFamily": "Inter, sans-serif", "fontSize": "20px", "lineHeight": "28px", "listStyle": "lower-alpha", @@ -944,7 +944,7 @@ YOUR PARTICIPATION IN TGCSO IS ENTIRELY VOLUNTARY, BUT IF YOU ARE PARTICIPATING Object { "color": "rgba(17,18,20,1.00)", "display": "list-item", - "fontFamily": "EB Garamond, eb-garamond, Garamond, serif", + "fontFamily": "Inter, sans-serif", "fontSize": "20px", "lineHeight": "28px", "listStyle": "lower-alpha", @@ -962,7 +962,7 @@ YOUR PARTICIPATION IN TGCSO IS ENTIRELY VOLUNTARY, BUT IF YOU ARE PARTICIPATING Object { "color": "rgba(17,18,20,1.00)", "display": "list-item", - "fontFamily": "EB Garamond, eb-garamond, Garamond, serif", + "fontFamily": "Inter, sans-serif", "fontSize": "20px", "lineHeight": "28px", "listStyle": "lower-alpha", @@ -980,7 +980,7 @@ YOUR PARTICIPATION IN TGCSO IS ENTIRELY VOLUNTARY, BUT IF YOU ARE PARTICIPATING Object { "color": "rgba(17,18,20,1.00)", "display": "list-item", - "fontFamily": "EB Garamond, eb-garamond, Garamond, serif", + "fontFamily": "Inter, sans-serif", "fontSize": "20px", "lineHeight": "28px", "listStyle": "lower-alpha", @@ -998,7 +998,7 @@ YOUR PARTICIPATION IN TGCSO IS ENTIRELY VOLUNTARY, BUT IF YOU ARE PARTICIPATING Object { "color": "rgba(17,18,20,1.00)", "display": "list-item", - "fontFamily": "EB Garamond, eb-garamond, Garamond, serif", + "fontFamily": "Inter, sans-serif", "fontSize": "20px", "lineHeight": "28px", "listStyle": "lower-alpha", @@ -1016,7 +1016,7 @@ YOUR PARTICIPATION IN TGCSO IS ENTIRELY VOLUNTARY, BUT IF YOU ARE PARTICIPATING Object { "color": "rgba(17,18,20,1.00)", "display": "list-item", - "fontFamily": "EB Garamond, eb-garamond, Garamond, serif", + "fontFamily": "Inter, sans-serif", "fontSize": "20px", "lineHeight": "28px", "listStyle": "lower-alpha", @@ -1034,7 +1034,7 @@ YOUR PARTICIPATION IN TGCSO IS ENTIRELY VOLUNTARY, BUT IF YOU ARE PARTICIPATING Object { "color": "rgba(17,18,20,1.00)", "display": "list-item", - "fontFamily": "EB Garamond, eb-garamond, Garamond, serif", + "fontFamily": "Inter, sans-serif", "fontSize": "20px", "lineHeight": "28px", "listStyle": "lower-alpha", @@ -1055,7 +1055,7 @@ YOUR PARTICIPATION IN TGCSO IS ENTIRELY VOLUNTARY, BUT IF YOU ARE PARTICIPATING Object { "color": "rgba(17,18,20,1.00)", "display": "list-item", - "fontFamily": "EB Garamond, eb-garamond, Garamond, serif", + "fontFamily": "Inter, sans-serif", "fontSize": "20px", "lineHeight": "28px", "listStyle": "decimal", @@ -1074,7 +1074,7 @@ YOUR PARTICIPATION IN TGCSO IS ENTIRELY VOLUNTARY, BUT IF YOU ARE PARTICIPATING Object { "color": "rgba(17,18,20,1.00)", "display": "list-item", - "fontFamily": "EB Garamond, eb-garamond, Garamond, serif", + "fontFamily": "Inter, sans-serif", "fontSize": "20px", "lineHeight": "28px", "listStyle": "decimal", @@ -1103,7 +1103,7 @@ YOUR PARTICIPATION IN TGCSO IS ENTIRELY VOLUNTARY, BUT IF YOU ARE PARTICIPATING Object { "color": "rgba(17,18,20,1.00)", "display": "list-item", - "fontFamily": "EB Garamond, eb-garamond, Garamond, serif", + "fontFamily": "Inter, sans-serif", "fontSize": "20px", "lineHeight": "28px", "listStyle": "lower-alpha", @@ -1121,7 +1121,7 @@ YOUR PARTICIPATION IN TGCSO IS ENTIRELY VOLUNTARY, BUT IF YOU ARE PARTICIPATING Object { "color": "rgba(17,18,20,1.00)", "display": "list-item", - "fontFamily": "EB Garamond, eb-garamond, Garamond, serif", + "fontFamily": "Inter, sans-serif", "fontSize": "20px", "lineHeight": "28px", "listStyle": "lower-alpha", @@ -1139,7 +1139,7 @@ YOUR PARTICIPATION IN TGCSO IS ENTIRELY VOLUNTARY, BUT IF YOU ARE PARTICIPATING Object { "color": "rgba(17,18,20,1.00)", "display": "list-item", - "fontFamily": "EB Garamond, eb-garamond, Garamond, serif", + "fontFamily": "Inter, sans-serif", "fontSize": "20px", "lineHeight": "28px", "listStyle": "lower-alpha", @@ -1160,7 +1160,7 @@ YOUR PARTICIPATION IN TGCSO IS ENTIRELY VOLUNTARY, BUT IF YOU ARE PARTICIPATING Object { "color": "rgba(17,18,20,1.00)", "display": "list-item", - "fontFamily": "EB Garamond, eb-garamond, Garamond, serif", + "fontFamily": "Inter, sans-serif", "fontSize": "20px", "lineHeight": "28px", "listStyle": "decimal", @@ -1179,7 +1179,7 @@ YOUR PARTICIPATION IN TGCSO IS ENTIRELY VOLUNTARY, BUT IF YOU ARE PARTICIPATING Object { "color": "rgba(17,18,20,1.00)", "display": "list-item", - "fontFamily": "EB Garamond, eb-garamond, Garamond, serif", + "fontFamily": "Inter, sans-serif", "fontSize": "20px", "lineHeight": "28px", "listStyle": "decimal", @@ -1198,7 +1198,7 @@ YOUR PARTICIPATION IN TGCSO IS ENTIRELY VOLUNTARY, BUT IF YOU ARE PARTICIPATING Object { "color": "rgba(17,18,20,1.00)", "display": "list-item", - "fontFamily": "EB Garamond, eb-garamond, Garamond, serif", + "fontFamily": "Inter, sans-serif", "fontSize": "20px", "lineHeight": "28px", "listStyle": "decimal", @@ -1227,7 +1227,7 @@ YOUR PARTICIPATION IN TGCSO IS ENTIRELY VOLUNTARY, BUT IF YOU ARE PARTICIPATING Object { "color": "rgba(17,18,20,1.00)", "display": "list-item", - "fontFamily": "EB Garamond, eb-garamond, Garamond, serif", + "fontFamily": "Inter, sans-serif", "fontSize": "20px", "lineHeight": "28px", "listStyle": "lower-alpha", @@ -1255,7 +1255,7 @@ YOUR PARTICIPATION IN TGCSO IS ENTIRELY VOLUNTARY, BUT IF YOU ARE PARTICIPATING Object { "color": "rgba(17,18,20,1.00)", "display": "list-item", - "fontFamily": "EB Garamond, eb-garamond, Garamond, serif", + "fontFamily": "Inter, sans-serif", "fontSize": "20px", "lineHeight": "28px", "listStyle": "lower-alpha", @@ -1283,7 +1283,7 @@ YOUR PARTICIPATION IN TGCSO IS ENTIRELY VOLUNTARY, BUT IF YOU ARE PARTICIPATING Object { "color": "rgba(17,18,20,1.00)", "display": "list-item", - "fontFamily": "EB Garamond, eb-garamond, Garamond, serif", + "fontFamily": "Inter, sans-serif", "fontSize": "20px", "lineHeight": "28px", "listStyle": "lower-alpha", @@ -1314,7 +1314,7 @@ YOUR PARTICIPATION IN TGCSO IS ENTIRELY VOLUNTARY, BUT IF YOU ARE PARTICIPATING Object { "color": "rgba(17,18,20,1.00)", "display": "list-item", - "fontFamily": "EB Garamond, eb-garamond, Garamond, serif", + "fontFamily": "Inter, sans-serif", "fontSize": "20px", "lineHeight": "28px", "listStyle": "decimal", diff --git a/src/_page-tests/validators/__snapshots__/index.test.tsx.snap b/src/_page-tests/validators/__snapshots__/index.test.tsx.snap index 10c15012..f217c4ae 100644 --- a/src/_page-tests/validators/__snapshots__/index.test.tsx.snap +++ b/src/_page-tests/validators/__snapshots__/index.test.tsx.snap @@ -415,7 +415,7 @@ exports[`BuildPage renders 1`] = ` style={ Object { "color": "rgba(255,255,255,1.00)", - "fontFamily": "EB Garamond, eb-garamond, Garamond, serif", + "fontFamily": "GT-Alpina, serif", "fontSize": "28px", "lineHeight": "32px", "marginBottom": "20px", @@ -499,7 +499,7 @@ exports[`BuildPage renders 1`] = ` style={ Object { "color": "rgba(255,255,255,1.00)", - "fontFamily": "EB Garamond, eb-garamond, Garamond, serif", + "fontFamily": "Inter, sans-serif", "fontSize": "24px", "lineHeight": "32px", "marginBottom": "20px", @@ -588,7 +588,7 @@ exports[`BuildPage renders 1`] = ` style={ Object { "color": "rgba(255,255,255,1.00)", - "fontFamily": "EB Garamond, eb-garamond, Garamond, serif", + "fontFamily": "GT-Alpina, serif", "fontSize": "28px", "lineHeight": "32px", "textRendering": "geometricPrecision", @@ -606,7 +606,7 @@ exports[`BuildPage renders 1`] = ` style={ Object { "color": "rgba(255,255,255,1.00)", - "fontFamily": "Jost, futura-pt, futura, sans-serif", + "fontFamily": "GT-Alpina, serif", "fontSize": "24px", "lineHeight": "32px", "marginBottom": "20px", @@ -624,7 +624,7 @@ exports[`BuildPage renders 1`] = ` style={ Object { "color": "rgba(255,255,255,1.00)", - "fontFamily": "EB Garamond, eb-garamond, Garamond, serif", + "fontFamily": "Inter, sans-serif", "fontSize": "20px", "lineHeight": "28px", "marginBottom": "20px", @@ -707,7 +707,7 @@ exports[`BuildPage renders 1`] = ` Object { "color": "rgba(255,255,255,1.00)", "cursor": "pointer", - "fontFamily": "Jost, futura-pt, futura, sans-serif", + "fontFamily": "GT-Alpina, serif", "fontSize": "16px", "fontWeight": "500", "lineHeight": "18px", @@ -724,7 +724,7 @@ exports[`BuildPage renders 1`] = ` style={ Object { "color": "rgba(255,255,255,1.00)", - "fontFamily": "EB Garamond, eb-garamond, Garamond, serif", + "fontFamily": "Inter, sans-serif", "fontSize": "20px", "lineHeight": "28px", "textRendering": "geometricPrecision", @@ -753,7 +753,7 @@ exports[`BuildPage renders 1`] = ` Object { "color": "rgba(255,255,255,1.00)", "display": "list-item", - "fontFamily": "EB Garamond, eb-garamond, Garamond, serif", + "fontFamily": "Inter, sans-serif", "fontSize": "20px", "lineHeight": "28px", "listStyle": "inherit", @@ -772,7 +772,7 @@ exports[`BuildPage renders 1`] = ` Object { "color": "rgba(255,255,255,1.00)", "display": "list-item", - "fontFamily": "EB Garamond, eb-garamond, Garamond, serif", + "fontFamily": "Inter, sans-serif", "fontSize": "20px", "lineHeight": "28px", "listStyle": "inherit", @@ -791,7 +791,7 @@ exports[`BuildPage renders 1`] = ` Object { "color": "rgba(255,255,255,1.00)", "display": "list-item", - "fontFamily": "EB Garamond, eb-garamond, Garamond, serif", + "fontFamily": "Inter, sans-serif", "fontSize": "20px", "lineHeight": "28px", "listStyle": "inherit", @@ -810,7 +810,7 @@ exports[`BuildPage renders 1`] = ` Object { "color": "rgba(255,255,255,1.00)", "display": "list-item", - "fontFamily": "EB Garamond, eb-garamond, Garamond, serif", + "fontFamily": "Inter, sans-serif", "fontSize": "20px", "lineHeight": "28px", "listStyle": "inherit", @@ -829,7 +829,7 @@ exports[`BuildPage renders 1`] = ` Object { "color": "rgba(255,255,255,1.00)", "display": "list-item", - "fontFamily": "EB Garamond, eb-garamond, Garamond, serif", + "fontFamily": "Inter, sans-serif", "fontSize": "20px", "lineHeight": "28px", "listStyle": "inherit", @@ -1142,7 +1142,7 @@ exports[`BuildPage renders 1`] = ` Object { "color": "rgba(255,255,255,1.00)", "cursor": "pointer", - "fontFamily": "Jost, futura-pt, futura, sans-serif", + "fontFamily": "GT-Alpina, serif", "fontSize": "16px", "fontWeight": "500", "lineHeight": "18px", @@ -1159,7 +1159,7 @@ exports[`BuildPage renders 1`] = ` style={ Object { "color": "rgba(255,255,255,1.00)", - "fontFamily": "EB Garamond, eb-garamond, Garamond, serif", + "fontFamily": "Inter, sans-serif", "fontSize": "20px", "lineHeight": "28px", "textRendering": "geometricPrecision", @@ -1188,7 +1188,7 @@ exports[`BuildPage renders 1`] = ` Object { "color": "rgba(255,255,255,1.00)", "display": "list-item", - "fontFamily": "EB Garamond, eb-garamond, Garamond, serif", + "fontFamily": "Inter, sans-serif", "fontSize": "20px", "lineHeight": "28px", "listStyle": "inherit", @@ -1207,7 +1207,7 @@ exports[`BuildPage renders 1`] = ` Object { "color": "rgba(255,255,255,1.00)", "display": "list-item", - "fontFamily": "EB Garamond, eb-garamond, Garamond, serif", + "fontFamily": "Inter, sans-serif", "fontSize": "20px", "lineHeight": "28px", "listStyle": "inherit", @@ -1226,7 +1226,7 @@ exports[`BuildPage renders 1`] = ` Object { "color": "rgba(255,255,255,1.00)", "display": "list-item", - "fontFamily": "EB Garamond, eb-garamond, Garamond, serif", + "fontFamily": "Inter, sans-serif", "fontSize": "20px", "lineHeight": "28px", "listStyle": "inherit", @@ -1457,7 +1457,7 @@ exports[`BuildPage renders 1`] = ` Object { "color": "rgba(255,255,255,1.00)", "cursor": "pointer", - "fontFamily": "Jost, futura-pt, futura, sans-serif", + "fontFamily": "GT-Alpina, serif", "fontSize": "16px", "fontWeight": "500", "lineHeight": "18px", @@ -1474,7 +1474,7 @@ exports[`BuildPage renders 1`] = ` style={ Object { "color": "rgba(255,255,255,1.00)", - "fontFamily": "EB Garamond, eb-garamond, Garamond, serif", + "fontFamily": "Inter, sans-serif", "fontSize": "20px", "lineHeight": "28px", "textRendering": "geometricPrecision", @@ -1503,7 +1503,7 @@ exports[`BuildPage renders 1`] = ` Object { "color": "rgba(255,255,255,1.00)", "display": "list-item", - "fontFamily": "EB Garamond, eb-garamond, Garamond, serif", + "fontFamily": "Inter, sans-serif", "fontSize": "20px", "lineHeight": "28px", "listStyle": "inherit", @@ -1522,7 +1522,7 @@ exports[`BuildPage renders 1`] = ` Object { "color": "rgba(255,255,255,1.00)", "display": "list-item", - "fontFamily": "EB Garamond, eb-garamond, Garamond, serif", + "fontFamily": "Inter, sans-serif", "fontSize": "20px", "lineHeight": "28px", "listStyle": "inherit", @@ -1541,7 +1541,7 @@ exports[`BuildPage renders 1`] = ` Object { "color": "rgba(255,255,255,1.00)", "display": "list-item", - "fontFamily": "EB Garamond, eb-garamond, Garamond, serif", + "fontFamily": "Inter, sans-serif", "fontSize": "20px", "lineHeight": "28px", "listStyle": "inherit", @@ -1750,7 +1750,7 @@ exports[`BuildPage renders 1`] = ` style={ Object { "color": "rgba(255,255,255,1.00)", - "fontFamily": "EB Garamond, eb-garamond, Garamond, serif", + "fontFamily": "Inter, sans-serif", "fontSize": "24px", "lineHeight": "32px", "textAlign": "center", @@ -1938,7 +1938,7 @@ exports[`BuildPage renders 1`] = ` style={ Object { "color": "rgba(255,255,255,1.00)", - "fontFamily": "EB Garamond, eb-garamond, Garamond, serif", + "fontFamily": "GT-Alpina, serif", "fontSize": "28px", "lineHeight": "32px", "textAlign": "center", @@ -2071,7 +2071,7 @@ exports[`BuildPage renders 1`] = ` style={ Object { "color": "rgba(255,255,255,1.00)", - "fontFamily": "Jost, futura-pt, futura, sans-serif", + "fontFamily": "GT-Alpina, serif", "fontSize": "20px", "fontWeight": "500", "lineHeight": "24px", @@ -2089,7 +2089,7 @@ exports[`BuildPage renders 1`] = ` style={ Object { "color": "rgba(221,221,221,1.00)", - "fontFamily": "EB Garamond, eb-garamond, Garamond, serif", + "fontFamily": "Inter, sans-serif", "fontSize": "20px", "lineHeight": "28px", "textRendering": "geometricPrecision", @@ -2196,7 +2196,7 @@ exports[`BuildPage renders 1`] = ` style={ Object { "color": "rgba(255,255,255,1.00)", - "fontFamily": "Jost, futura-pt, futura, sans-serif", + "fontFamily": "GT-Alpina, serif", "fontSize": "20px", "fontWeight": "500", "lineHeight": "24px", @@ -2214,7 +2214,7 @@ exports[`BuildPage renders 1`] = ` style={ Object { "color": "rgba(221,221,221,1.00)", - "fontFamily": "EB Garamond, eb-garamond, Garamond, serif", + "fontFamily": "Inter, sans-serif", "fontSize": "20px", "lineHeight": "28px", "textRendering": "geometricPrecision", @@ -2321,7 +2321,7 @@ exports[`BuildPage renders 1`] = ` style={ Object { "color": "rgba(255,255,255,1.00)", - "fontFamily": "Jost, futura-pt, futura, sans-serif", + "fontFamily": "GT-Alpina, serif", "fontSize": "20px", "fontWeight": "500", "lineHeight": "24px", @@ -2339,7 +2339,7 @@ exports[`BuildPage renders 1`] = ` style={ Object { "color": "rgba(221,221,221,1.00)", - "fontFamily": "EB Garamond, eb-garamond, Garamond, serif", + "fontFamily": "Inter, sans-serif", "fontSize": "20px", "lineHeight": "28px", "textRendering": "geometricPrecision", @@ -2446,7 +2446,7 @@ exports[`BuildPage renders 1`] = ` style={ Object { "color": "rgba(255,255,255,1.00)", - "fontFamily": "Jost, futura-pt, futura, sans-serif", + "fontFamily": "GT-Alpina, serif", "fontSize": "20px", "fontWeight": "500", "lineHeight": "24px", @@ -2464,7 +2464,7 @@ exports[`BuildPage renders 1`] = ` style={ Object { "color": "rgba(221,221,221,1.00)", - "fontFamily": "EB Garamond, eb-garamond, Garamond, serif", + "fontFamily": "Inter, sans-serif", "fontSize": "20px", "lineHeight": "28px", "textRendering": "geometricPrecision", @@ -2571,7 +2571,7 @@ exports[`BuildPage renders 1`] = ` style={ Object { "color": "rgba(255,255,255,1.00)", - "fontFamily": "Jost, futura-pt, futura, sans-serif", + "fontFamily": "GT-Alpina, serif", "fontSize": "20px", "fontWeight": "500", "lineHeight": "24px", @@ -2589,7 +2589,7 @@ exports[`BuildPage renders 1`] = ` style={ Object { "color": "rgba(221,221,221,1.00)", - "fontFamily": "EB Garamond, eb-garamond, Garamond, serif", + "fontFamily": "Inter, sans-serif", "fontSize": "20px", "lineHeight": "28px", "textRendering": "geometricPrecision", @@ -2696,7 +2696,7 @@ exports[`BuildPage renders 1`] = ` style={ Object { "color": "rgba(255,255,255,1.00)", - "fontFamily": "Jost, futura-pt, futura, sans-serif", + "fontFamily": "GT-Alpina, serif", "fontSize": "20px", "fontWeight": "500", "lineHeight": "24px", @@ -2714,7 +2714,7 @@ exports[`BuildPage renders 1`] = ` style={ Object { "color": "rgba(221,221,221,1.00)", - "fontFamily": "EB Garamond, eb-garamond, Garamond, serif", + "fontFamily": "Inter, sans-serif", "fontSize": "20px", "lineHeight": "28px", "textRendering": "geometricPrecision", @@ -2821,7 +2821,7 @@ exports[`BuildPage renders 1`] = ` style={ Object { "color": "rgba(255,255,255,1.00)", - "fontFamily": "Jost, futura-pt, futura, sans-serif", + "fontFamily": "GT-Alpina, serif", "fontSize": "20px", "fontWeight": "500", "lineHeight": "24px", @@ -2839,7 +2839,7 @@ exports[`BuildPage renders 1`] = ` style={ Object { "color": "rgba(221,221,221,1.00)", - "fontFamily": "EB Garamond, eb-garamond, Garamond, serif", + "fontFamily": "Inter, sans-serif", "fontSize": "20px", "lineHeight": "28px", "textRendering": "geometricPrecision", @@ -2946,7 +2946,7 @@ exports[`BuildPage renders 1`] = ` style={ Object { "color": "rgba(255,255,255,1.00)", - "fontFamily": "Jost, futura-pt, futura, sans-serif", + "fontFamily": "GT-Alpina, serif", "fontSize": "20px", "fontWeight": "500", "lineHeight": "24px", @@ -2964,7 +2964,7 @@ exports[`BuildPage renders 1`] = ` style={ Object { "color": "rgba(221,221,221,1.00)", - "fontFamily": "EB Garamond, eb-garamond, Garamond, serif", + "fontFamily": "Inter, sans-serif", "fontSize": "20px", "lineHeight": "28px", "textRendering": "geometricPrecision", @@ -3040,7 +3040,7 @@ exports[`BuildPage renders 1`] = ` style={ Object { "color": "rgba(17,18,20,1.00)", - "fontFamily": "Jost, futura-pt, futura, sans-serif", + "fontFamily": "GT-Alpina, serif", "fontSize": "24px", "lineHeight": "32px", "marginBottom": "20px", @@ -3059,7 +3059,7 @@ exports[`BuildPage renders 1`] = ` style={ Object { "color": "rgba(17,18,20,1.00)", - "fontFamily": "EB Garamond, eb-garamond, Garamond, serif", + "fontFamily": "Inter, sans-serif", "fontSize": "24px", "lineHeight": "32px", "marginBottom": "20px", @@ -3076,7 +3076,7 @@ exports[`BuildPage renders 1`] = ` style={ Object { "color": "rgba(17,18,20,1.00)", - "fontFamily": "Jost, futura-pt, futura, sans-serif", + "fontFamily": "GT-Alpina, serif", "fontSize": "16px", "fontWeight": "500", "lineHeight": "18px", @@ -3167,7 +3167,7 @@ exports[`BuildPage renders 1`] = ` style={ Object { "color": "rgba(17,18,20,1.00)", - "fontFamily": "EB Garamond, eb-garamond, Garamond, serif", + "fontFamily": "Inter, sans-serif", "fontSize": "20px", "lineHeight": "28px", "marginTop": "20px", @@ -3411,7 +3411,7 @@ exports[`BuildPage renders 1`] = ` style={ Object { "color": "rgba(17,18,20,1.00)", - "fontFamily": "Jost, futura-pt, futura, sans-serif", + "fontFamily": "GT-Alpina, serif", "fontSize": "16px", "fontWeight": "500", "lineHeight": "18px", @@ -3427,7 +3427,7 @@ exports[`BuildPage renders 1`] = ` style={ Object { "color": "rgba(17,18,20,1.00)", - "fontFamily": "EB Garamond, eb-garamond, Garamond, serif", + "fontFamily": "Inter, sans-serif", "fontSize": "20px", "lineHeight": "28px", "marginBottom": "20px", @@ -3652,7 +3652,7 @@ exports[`BuildPage renders 1`] = ` style={ Object { "color": "rgba(17,18,20,1.00)", - "fontFamily": "Jost, futura-pt, futura, sans-serif", + "fontFamily": "GT-Alpina, serif", "fontSize": "16px", "fontWeight": "500", "lineHeight": "18px", @@ -3668,7 +3668,7 @@ exports[`BuildPage renders 1`] = ` style={ Object { "color": "rgba(17,18,20,1.00)", - "fontFamily": "EB Garamond, eb-garamond, Garamond, serif", + "fontFamily": "Inter, sans-serif", "fontSize": "20px", "lineHeight": "28px", "marginBottom": "20px", @@ -3834,7 +3834,7 @@ exports[`BuildPage renders 1`] = ` style={ Object { "color": "rgba(17,18,20,1.00)", - "fontFamily": "Jost, futura-pt, futura, sans-serif", + "fontFamily": "GT-Alpina, serif", "fontSize": "24px", "lineHeight": "32px", "textRendering": "geometricPrecision", @@ -3850,7 +3850,7 @@ exports[`BuildPage renders 1`] = ` style={ Object { "color": "rgba(17,18,20,1.00)", - "fontFamily": "EB Garamond, eb-garamond, Garamond, serif", + "fontFamily": "Inter, sans-serif", "fontSize": "20px", "lineHeight": "28px", "marginBottom": "20px", diff --git a/src/about/About.tsx b/src/about/About.tsx index 3db08921..eec87252 100644 --- a/src/about/About.tsx +++ b/src/about/About.tsx @@ -41,7 +41,7 @@ export class About extends React.Component { return ( <> diff --git a/src/cico/CicoPage.tsx b/src/cico/CicoPage.tsx index e298b9f9..80522865 100644 --- a/src/cico/CicoPage.tsx +++ b/src/cico/CicoPage.tsx @@ -5,9 +5,13 @@ import Chevron, { Direction } from "src/icons/chevron" import { colors } from "src/colors" import { buttonCss } from "src/contentful/grid2-cells/Playlist" import { pageSwitch } from "src/public-sector/CommonContentFullPage" -import { ContentfulPage, GridRowContentType } from "src/utils/contentful" -import { flex, whiteText, jost, fonts, garamond, WHEN_MOBILE, WHEN_TABLET } from "src/estyles" +import { ContentfulPage, GridRowContentType, HeadingContentType } from "src/utils/contentful" +import { flex, whiteText, jost, fonts, WHEN_MOBILE, WHEN_TABLET, inter } from "src/estyles" import debounce from "lodash.debounce" +import { Entry } from "contentful" +import TextInput from "../reskin/components/TextInput" +import Button, { BTN, SIZE } from "../shared/Button.4" +import { useState } from "react" export interface CicoProvider { country?: string @@ -24,12 +28,21 @@ interface PaymentType { } interface Props { + content: Entry data: Record } function CicoPage(props: Props & ContentfulPage) { - const items = props.sections.map(pageSwitch) - items.splice(items.length - 2, 0, ) + const sections = props.sections.filter((section) => section.fields?.id !== "celo-ramps") + const items = sections.map((section) => pageSwitch(section)) + const onOffRampsSection = props.sections.find((section) => { + return section?.fields?.id === "celo-ramps" + }) + items.splice( + items.length - 3, + 0, + + ) return
{props.sections ? items : <>}
} @@ -41,14 +54,30 @@ function CoutriesReturned(props: Props) { const { t } = useTranslation(NameSpaces.cico) const [search, setSearch] = React.useState("") const [expandedIndex, setBlurbIndex] = React.useState(null) - const { data } = props + const { data, content } = props + const heading = content.fields.cells[0] as Entry + const title = heading.fields.title + // @ts-ignore + const subTitle = heading.fields?.subTitle.content[0].content[0].value const toggle = (num: number) => (expandedIndex === num ? setBlurbIndex(null) : setBlurbIndex(num)) + const numberOfCountriesPerPage = 12 + const maxPage = Object.keys(data).length / numberOfCountriesPerPage + const [currentPage, setCurrentPage] = useState(1) const showingCountries = React.useMemo(() => { return Object.keys(data) .filter((title) => title.toLowerCase().includes(search.toLowerCase())) .sort() - }, [data, search]) + .slice(0, numberOfCountriesPerPage * currentPage) + }, [currentPage, data, numberOfCountriesPerPage, search]) + + const loadMoreCountries = () => { + if (currentPage + 1 < maxPage) { + setCurrentPage(currentPage + 1) + } else { + setCurrentPage(maxPage) + } + } const debouncedChangeHandler = React.useMemo( () => @@ -62,22 +91,23 @@ function CoutriesReturned(props: Props) { React.useEffect(() => { return () => { debouncedChangeHandler.cancel() + setCurrentPage(1) } }, [debouncedChangeHandler]) return (
+

{title}

- +
+

{subTitle}

+ +
-
-

{t("celoRamps.countries")}

-
{showingCountries.map((title, index) => { return ( @@ -92,28 +122,43 @@ function CoutriesReturned(props: Props) { ) })}
+ {currentPage !== maxPage && ( +
+
+ )}
) } -const displayCountry = css(fonts, jost, whiteText, flex, { +const displayCountry = css(jost, whiteText, flex, { + paddingTop: 320, flexDirection: "column", alignItems: "center", alignSelf: "center", width: "100%", - backgroundColor: colors.dark, - "h1, h2, h3, h4, h5, p": whiteText, + backgroundColor: colors.baseTan, + "h1, h2, h3, h4, h5, p": colors.dark, + [WHEN_MOBILE]: { + paddingTop: 80, + }, }) const sectionContainer = css({ - margin: "0px 100px", justifyContent: "center", - padding: "0px 12px 80px", + paddingBottom: 80, maxWidth: 1104, width: "100%", display: "grid", gridTemplateColumns: "30% 70%", + gap: 16, [WHEN_MOBILE]: { display: "flex", flexDirection: "column", @@ -127,38 +172,40 @@ const sectionContainer = css({ alignItems: "center", }, }) -const inputCss = css(garamond, { +const titleCss = css(fonts.h1, { + fontSize: 72, + marginBottom: 108, [WHEN_MOBILE]: { - justifyContent: "center", - alignItems: "center", - margin: "0px 0px 30px", + fontSize: 36, + marginBottom: 24, }, +}) + +const subTitleCss = css(fonts.h4, { + fontSize: 20, [WHEN_TABLET]: { - justifyContent: "center", - alignItems: "center", - margin: "0px 0px 30px", + padding: "0 32px", }, - border: `1px inset ${colors.placeholderGray}`, - width: 224, - height: 54, - borderRadius: "3px", - fontSize: 20, - ["::placeholder"]: { - color: colors.placeholderDarkMode, - fontSize: 20, - paddingLeft: 5, + [WHEN_MOBILE]: { + padding: "0 32px", }, - marginTop: 80, - marginLeft: 30, - marginRight: 70, }) -const tableTitle = css({ - borderBottom: `1px solid ${colors.grayHeavy}`, - padding: "20px 0px", - textAlign: "start", + +const inputContainer = css(flex, { + [WHEN_TABLET]: { + alignItems: "center", + padding: "0 32px", + }, [WHEN_MOBILE]: { - padding: "20px 16px", - margin: "0px 10px", + alignItems: "center", + padding: "0 32px", + }, +}) + +const loadMoreCss = css({ + marginTop: 80, + "& > div": { + alignItems: "flex-start", }, }) @@ -169,6 +216,7 @@ const showingCountriesContainer = css({ padding: "0px 20px", }, }) + interface CountryTableProps { index: number title: string @@ -193,9 +241,9 @@ function CountryTable({ return (
@@ -232,14 +280,20 @@ const headerContainer = css({ display: "flex", textAlign: "start", justifyContent: "space-between", - padding: "30px 10px", + padding: "60px 10px", width: "100%", }) const countryContainer = css(jost, { justifyContent: "center", alignContent: "center", - borderBottom: `1px solid ${colors.grayHeavy}`, + borderBottom: `1px solid ${colors.transparentGray}`, + opacity: 0.5, + "&:hover": { + background: + "radial-gradient(57.57% 111.11% at 50% 155.56%, #E6E3D5 0%, rgba(230, 227, 213, 0) 100%)", + opacity: 1, + }, }) const countriesTable = css({ border: `1px solid ${colors.grayHeavy}`, @@ -251,11 +305,17 @@ const countriesCells = css({ textAlign: "center", }) const countriesHeader = css(countriesCells, { - border: `1px solid ${colors.grayHeavy}`, - backgroundColor: `rgba(171, 173, 175, 0.3)`, + border: `1px solid ${colors.dark}`, }) const countriesHeaderCell = css(countriesCells, whiteText, { - border: `1px solid ${colors.grayHeavy}`, + border: `1px solid ${colors.dark}`, + color: colors.dark, + [WHEN_MOBILE]: { + color: colors.dark, + }, +}) +const countryCss = css(inter, { + fontSize: 26, }) const toggleContent = css({ display: "flex", @@ -290,7 +350,8 @@ const CicoProvider = React.memo(function _CicoProvider({ }) const countriesBody = css(countriesCells, { - border: `1px solid ${colors.grayHeavy}`, + border: `1px solid ${colors.dark}`, + color: colors.black, }) export default withNamespaces(NameSpaces.cico)(CicoPage) diff --git a/src/colors.ts b/src/colors.ts index 294aebf6..9eb35321 100644 --- a/src/colors.ts +++ b/src/colors.ts @@ -45,4 +45,16 @@ export enum colors { greenUI = "#1AB775", navyBlue = "#0C74D4", + + baseTan = "#FBF6F1", + primaryYellow = "#FCFF52", + transparentGray = "rgba(0, 0, 0, 0.2)", + disabledTextGray = "#9B9B9B", + disabledHatch = `repeating-linear-gradient(-45deg, transparent, transparent 3px, rgba(0, 0, 0, 0.2) 3px, rgba(0, 0, 0, 0.2) 5px)`, + + fig = "#1E002B", + sand = "#E7E3D4", + outlineGray = "#CCCCCC", + errorInput = "#E70532", + darkTan = "#E6E3D5", } diff --git a/src/contentful/ReskinCover.tsx b/src/contentful/ReskinCover.tsx new file mode 100644 index 00000000..5bfeb51e --- /dev/null +++ b/src/contentful/ReskinCover.tsx @@ -0,0 +1,277 @@ +import { documentToReactComponents } from "@contentful/rich-text-react-renderer" +import { css } from "@emotion/react" +import { + flex, + flexRow, + fonts, + WHEN_DESKTOP, + WHEN_MOBILE, + WHEN_TABLET, + WHEN_TABLET_AND_UP, + whiteText, +} from "src/estyles" +import { GridRow } from "src/layout/Grid2" +import { TABLET_BREAKPOINT } from "src/shared/Styles" +import { CoverContentType } from "src/utils/contentful" +import renderers from "src/contentful/nodes/enodes" +import Button, { SIZE } from "src/shared/Button.4" +import { useScreenSize } from "src/layout/ScreenSize" +import { BLOCKS } from "@contentful/rich-text-types" +import { RenderNode } from "@contentful/rich-text-react-renderer" +import { Asset } from "contentful" +import { colors } from "src/colors" + +const OPTIONS = { + renderNode: { + ...renderers, + [BLOCKS.HEADING_1]: (_, children: string) => { + return

{children}

+ }, + } as RenderNode, +} + +export default function ReskinCover(props: CoverContentType) { + const { isMobile } = useScreenSize() + const resolution = props.resolution || 2 + + const coverImages = props.imagesDesktop.map((image) => { + return image.fields + }) + + const links = isMobile ? [props.links[0]] : props.links + return ( + +
+ + <> + + + + {coverImages[2].description} + + + {documentToReactComponents(props.subTitle, OPTIONS)} + +
+ {links.map((link, index) => ( +
+
+
+ {props.title && ( +

+ {props.title} +

+ )} + {coverImages[0].description} + {coverImages[1].description} +
+ + ) +} + +function viewSize(number: number, res: number) { + return Math.round(number / res) +} + +function trueWidth(file: Asset["fields"]["file"], res: number) { + if (res === 1) { + return file?.url + } else { + return `${file?.url}?w=${viewSize(file?.details?.image?.width, res)}` + } +} + +const wrapperCss = css(flex, { + alignItems: "center", + justifyContent: "center", + [WHEN_MOBILE]: { + alignContent: "center", + minHeight: "100vh", + }, + [WHEN_TABLET]: { + minHeight: 900, + height: "fit-content", + }, + [WHEN_DESKTOP]: { + height: 900, + minHeight: "fit-content", + maxHeight: "80vw", + }, +}) + +const rootCss = css({ + gridTemplateAreas: `"content illo"`, + overflow: "visible", + [WHEN_MOBILE]: { + alignContent: "center", + flexDirection: "column-reverse", + }, +}) + +const imageFirstRootCss = css(rootCss, { + gridTemplateAreas: `"illo content"`, +}) + +const titleCss = css(fonts.h1, { + [WHEN_DESKTOP]: { + fontSize: 68, + lineHeight: "68px", + }, + [WHEN_TABLET_AND_UP]: { + marginTop: "100px", + marginLeft: "175px", + }, + [WHEN_TABLET]: { + marginLeft: "0px", + }, + [WHEN_MOBILE]: { + textAlign: "center", + fontSize: 46, + lineHeight: "38px", + marginTop: 109, + marginBottom: 20, + paddingLeft: 32, + maxWidth: 100, + }, +}) + +const subTextCss = css({ + marginTop: 16, + zIndex: 1, + a: { + textDecoration: "none", + color: colors.white, + }, + "h2:nth-of-type(2)": { + marginTop: 30, + }, +}) + +const centerMobileCss = css({ + [WHEN_MOBILE]: { + textAlign: "center", + }, +}) + +const subtitleDarkMode = css(whiteText, centerMobileCss, { + "h1, h2, h3, h4, p": whiteText, +}) + +const contentCss = css(flex, { + justifySelf: "center", + justifyContent: "center", + flex: 1, + gridArea: "content", + [WHEN_TABLET_AND_UP]: { + minWidth: 320, + }, + [WHEN_TABLET]: { + marginRight: 50, + }, + [WHEN_MOBILE]: { + padding: 16, + textAlign: "center", + alignSelf: "center", + }, +}) + +const linkAreaCss = css(flexRow, { + zIndex: 1, + [WHEN_MOBILE]: { + flexDirection: "column", + alignItems: "flex-start", + marginTop: 32, + "& > div": { + marginBottom: 24, + }, + }, + [WHEN_TABLET_AND_UP]: { + paddingBottom: 181, + "& > div": { + marginRight: 24, + justifyContent: "center", + }, + }, +}) + +const imageCss = css({ + overflow: "visible", + [WHEN_MOBILE]: { + maxWidth: "100%", + height: "100%", + overflow: "inherit", + }, +}) + +const imageFirstCss = css(imageCss, { + right: 0, +}) + +const rH1 = css(fonts.h1, { + [WHEN_MOBILE]: fonts.h1Mobile, +}) + +const coverImage1 = css({ + display: "block", + position: "absolute", + top: 329, + right: 377, + [WHEN_MOBILE]: { + display: "none", + }, +}) + +const coverImage2 = css({ + display: "block", + position: "absolute", + top: 533, + right: 0, + [WHEN_TABLET]: {}, + [WHEN_MOBILE]: { + display: "none", + }, +}) + +const newNakedButtonStyles = css({ + flex: 1, + width: 0, +}) diff --git a/src/contentful/grid2-cells/FreeContent.tsx b/src/contentful/grid2-cells/FreeContent.tsx index 11e9e61f..c02dac91 100644 --- a/src/contentful/grid2-cells/FreeContent.tsx +++ b/src/contentful/grid2-cells/FreeContent.tsx @@ -9,6 +9,7 @@ import { ROW } from "../nodes/embeds/ROW" import { Asset } from "contentful" import AwesomeFade from "src/shared/AwesomeFade" import { FaddingOptions } from "src/utils/contentful" +import { colors } from "src/colors" const EMBEDDABLE = { ...BUTTON, @@ -34,12 +35,19 @@ const OPTIONS = { [BLOCKS.HEADING_1]: (_, children: string) => { return

{children}

}, + [BLOCKS.HEADING_4]: (_, children: string) => { + return

{children}

+ }, [BLOCKS.EMBEDDED_ENTRY]: embedded, [INLINES.EMBEDDED_ENTRY]: embedded, }, } -const h1ResponsiveCss = css(fonts.h1, { [WHEN_MOBILE]: fonts.h1Mobile }) +const h1ResponsiveCss = css(fonts.h1, { + color: colors.white, + [WHEN_MOBILE]: css(fonts.h1Mobile, { color: colors.white }), +}) +const h4Css = css(fonts.h4, { color: "rgba(255, 255, 255, 0.6)" }) interface Props { colSpan: number rowSpan?: number @@ -56,7 +64,6 @@ export function FreeContent({ rowSpan, body, cssStyle, - darkMode, listStyleImage, fade, fadingEffect, @@ -78,7 +85,7 @@ export function FreeContent({ )} > {!fadingEffect ? ( -
+
{documentToReactComponents(body, OPTIONS)}
) : ( @@ -90,7 +97,7 @@ export function FreeContent({ reverse={false} triggerOnce={true} > -
+
{documentToReactComponents(body, OPTIONS)}
@@ -109,5 +116,3 @@ const rootCss = css(flex, { }, ul: { paddingInlineStart: 16 }, }) - -const darkModeText = css({ "h1, h2, h3, h4, h5, h6, p, div, ul, span": { color: "white" } }) diff --git a/src/contentful/grid2-cells/HubspotForm.tsx b/src/contentful/grid2-cells/HubspotForm.tsx index d8a3de4a..0bd76e93 100644 --- a/src/contentful/grid2-cells/HubspotForm.tsx +++ b/src/contentful/grid2-cells/HubspotForm.tsx @@ -2,7 +2,7 @@ import { css } from "@emotion/react" import Script from "next/script" import { useLayoutEffect, useState } from "react" import { colors } from "src/colors" -import { inputStyle, labelStyle, errorStyle, inputDarkStyle } from "src/estyles" +import { inputStyle, errorStyle, inputDarkStyle, WHEN_MOBILE, WHEN_TABLET } from "src/estyles" import { fonts } from "src/estyles" import { HubFormFieldsType } from "src/utils/contentful" @@ -20,6 +20,28 @@ export default function HubspotForm({ hubspotFormId, darkMode }: HubFormFieldsTy portalId: "8568019", formId: hubspotFormId, target: `#${target}`, + css: "", + cssRequired: "", + errorClass: "contact-error", + errorMessageClass: "contact-error-message", + cssClass: "celo-hbspt", + onFormReady: function ($form) { + const inputs = $form.querySelectorAll(".field") + + for (let i = 0; i < inputs.length; i++) { + let currentEl = null + const label = inputs[i].getElementsByTagName("label")[0] + if (inputs[i].getElementsByTagName("input").length !== 0) { + currentEl = inputs[i].getElementsByTagName("input") + } else { + currentEl = inputs[i].getElementsByTagName("textarea") + } + if (label) { + currentEl[0].placeholder = label.innerText + label.style.display = "none" + } + } + }, }) } }, [scriptsLoaded, hubspotFormId, target]) @@ -47,19 +69,84 @@ const styleDark = css({ }) const style = css({ - "input, textarea": inputStyle, + width: "100%", + display: "inline-block", + img: { + display: "none", + }, + ".grecaptcha-badge": { + display: "none", + }, + "#email-b4dd2ae2-68e9-4662-bfd3-b2860162a5aa": inputStyle, + "#hsForm_b4dd2ae2-68e9-4662-bfd3-b2860162a5aa input[type=submit]": { + display: "none", + }, + ".celo-hbspt": { + width: "100%", + }, + ".celo-hbspt *": { + boxSizing: "border-box", + }, + ".celo-hbspt fieldset": css({ + border: 0, + padding: 0, + margin: 0, + maxWidth: "100%", + [WHEN_TABLET]: { + marginRight: "0 !important", + width: "100% !important", + }, + [WHEN_MOBILE]: { + float: "none", + width: "100%", + }, + }), + ".celo-hbspt fieldset.form-columns-2 .hs-form-field": { + width: "50%", + float: "left", + [WHEN_TABLET]: { + float: "none", + width: "100%", + }, + [WHEN_MOBILE]: { + float: "none", + width: "100%", + }, + }, + ".celo-hbspt .field": { + marginBottom: 32, + }, + ".celo-hbspt .input": { + marginRight: 26, + }, + ".celo-hbspt .hs-input": css(inputStyle, { + // maxWidth: "100%", + borderColor: "rgba(0, 0, 0, 0.2)", + }), + ".hs-custom-style fieldset textarea": inputStyle, + ".celo-hbspt .contact-error": css({ + borderColor: colors.errorInput, + }), + ".celo-hbspt .hs-error-msg": { + color: colors.errorInput, + }, "input[type='checkbox']": { flexBasis: 0 }, - label: css(labelStyle, { flexDirection: "row" }), + // label: css({display: 'none'}), "input.hs-button": css(fonts.navigation, { - backgroundColor: colors.primary, - color: colors.white, + backgroundColor: colors.primaryYellow, + color: colors.black, + padding: "24px 64px", + borderRadius: 70, width: "fit-content", - border: "none", + border: `1px solid ${colors.outlineGray}`, + marginTop: 32, "&:hover": { - backgroundColor: colors.primaryHover, + backgroundColor: colors.black, + color: colors.white, }, "&:active": { - backgroundColor: colors.primaryPress, + backgroundColor: colors.black, + color: colors.white, }, }), ul: { listStyleType: "none" }, diff --git a/src/contentful/nodes/embeds/ROW.tsx b/src/contentful/nodes/embeds/ROW.tsx index 9d2a8835..0f4a51e0 100644 --- a/src/contentful/nodes/embeds/ROW.tsx +++ b/src/contentful/nodes/embeds/ROW.tsx @@ -6,9 +6,12 @@ import { ContentfulButton } from "src/utils/contentful" import Button from "src/shared/Button.4" import { displayedImageSize } from "../displayRetinaImage" import { useScreenSize } from "src/layout/ScreenSize" +import { colors } from "../../../colors" +import AnimatedCubes from "../../../reskin/AnimatedCubes" type Item = GalleryItem interface Props { + name: string items: Entry[] cssStyle?: CSSObject mobileCss?: CSSObject @@ -16,70 +19,124 @@ interface Props { } export const ROW = { - row: ({ fields }: Entry) => ( -
- {fields.items.map((entry) => { - switch (entry.sys.contentType.sys.id) { - case "button": - const button = entry.fields as ContentfulButton - const { isMobile } = useScreenSize() - return ( -
- ) + ) - if (item.url) { - return ( - - {rendered} - + case "logoGalleryItem": + const item = entry.fields as Item + const imageFields = item?.image?.fields + const size = displayedImageSize(item.image, fields.retina) + const rotationAngle = "0deg" + + const rendered = ( +
+
+
+ {imageFields?.description} + {item.title ?

{item.title}

: null} +
+
+ {imageFields?.description} +
+
+
) - } - return rendered - } - })} -
- ), + + if (item.url) { + return ( + + {rendered} + + ) + } + return rendered + } + })} +
+ ) + }, } const rootStyle = css(flexRow, { flexWrap: "wrap", }) -const logoContainer = css(flexRow, { - alignItems: "center", -}) - const logoTitle = css(jost, { fontSize: 16, fontWeight: 500, marginRight: 24, }) + +const logoContainer = css({ + perspective: 700, + alignItems: "center", + justifyContent: "center", +}) + +const box = css({ + width: 300, + height: 300, + position: "relative", + transition: "all 0.4s ease-out", + transformStyle: "preserve-3d", + transformOrigin: "150px 150px -150px", +}) + +const face = css(flexRow, { + alignItems: "center", + justifyContent: "center", + position: "absolute", + width: "100%", + height: "100%", + border: `1px solid ${colors.black}`, +}) + +const front = css({ + backgroundColor: colors.baseTan, +}) + +const side = css({ + zIndex: 1, + left: 150, + transform: "rotateY(90deg) translateX(150px)", + backgroundColor: colors.baseTan, +}) diff --git a/src/estyles.tsx b/src/estyles.tsx index 78f38ce7..239b2b10 100644 --- a/src/estyles.tsx +++ b/src/estyles.tsx @@ -30,6 +30,14 @@ export const garamond = css({ fontFamily: typeFaces.garamond, }) +export const inter = css({ + fontFamily: typeFaces.inter, +}) + +export const gtAlpina = css({ + fontFamily: typeFaces.gtAlpina, +}) + export const sectionTitle = css(jost, { marginTop: 8, fontWeight: 500, @@ -41,8 +49,9 @@ export const sectionTitle = css(jost, { const body = css(fontInfo.p as any, { lineHeight: `${fontInfo.p.lineHeight}px` }) +// @ts-ignore const headingReset = css({ - fontWeight: "normal", + fontWeight: "200", margin: 0, marginBlockStart: 0, marginBlockEnd: 0, @@ -119,20 +128,16 @@ export const labelStyle = css(jost, flex, { export const inputStyle = css(flex, fonts.body, { alignSelf: "center", - paddingLeft: 12, - paddingRight: 12, - paddingTop: 12, - paddingBottom: 16, - borderRadius: 3, + padding: 24, + borderRadius: 70, borderWidth: 1, borderStyle: "solid", - borderColor: "rgba(61, 61, 61, 0.2)", width: "100%", margin: 4, - marginBottom: 8, outlineWidth: 0, + backgroundColor: "transparent", "&:focus": { - borderColor: colors.primary, + borderColor: colors.black, }, }) diff --git a/src/header/Navigation.tsx b/src/header/Navigation.tsx index 5eff6ce7..c6a72879 100644 --- a/src/header/Navigation.tsx +++ b/src/header/Navigation.tsx @@ -4,24 +4,20 @@ import dynamic from "next/dynamic" import { useRouter } from "next/router" import * as React from "react" import { WHEN_DESKTOP } from "src/estyles" -import Hamburger from "src/header/Hamburger" -import { NameSpaces, useTranslation } from "src/i18n" -import MediumLogo from "src/icons/MediumLogo" -import Octocat from "src/icons/Octocat" import { useScreenSize } from "src/layout/ScreenSize" import LogoDarkBg from "src/logos/LogoDarkBg" import LogoLightBg from "src/logos/LogoLightBg" -import Button, { BTN } from "src/shared/Button.4" import Link from "src/shared/Link" -import menu, { CeloLinks, MAIN_MENU, MenuLink, pagePaths } from "src/shared/menu-items" -const MobileMenu = dynamic(import("src/shared/MobileMenu")) -import OvalCoin from "src/shared/OvalCoin" +import menu, { MAIN_MENU, MenuLink, pagePaths } from "src/shared/menu-items" import { HEADER_HEIGHT } from "src/shared/Styles" import { colors } from "src/colors" +import NewLogo from "src/logos/NewLogo" +import NewMenuIcon from "src/header/NewMenuIcon" + +const MobileMenu = dynamic(import("src/shared/MobileMenu")) const BlueBanner = dynamic(import("src/header/BlueBanner"), { loading: () => null, ssr: false }) -const menuItems = MAIN_MENU -const mobileMenu = [menu.HOME, ...MAIN_MENU] +const mobileMenu = [menu.VISION, ...MAIN_MENU] const PATH_TO_ATTRIBUTES: Record = Object.keys(pagePaths).reduce((last, key) => { last[pagePaths[key].link] = pagePaths[key] @@ -133,7 +129,6 @@ export default function Header(props: Props) { const [mobileMenuActive, clickHamburger] = useMobileMenu() const { menuFaded, belowFoldUpScroll } = useScroll() - const willShowHamburger = !menuFaded || mobileMenuActive const isDarkMode = attributes.isDark || props.darkMode || (attributes.translucent && !belowFoldUpScroll) @@ -144,7 +139,7 @@ export default function Header(props: Props) { backgroundColor: translucentAndNotUp ? "transparent" : isDarkMode - ? colors.dark + ? "transparent" : colors.white, [WHEN_DESKTOP]: { "&:hover": { @@ -154,48 +149,46 @@ export default function Header(props: Props) { }) }, [attributes.translucent, belowFoldUpScroll, isDarkMode]) - const allWhiteLogo = pathname === menu.ABOUT_US.link && !belowFoldUpScroll + const allWhiteLogo = pathname === menu.FOUNDERS.link && !belowFoldUpScroll return ( -
- {isHomePage && } + <> +
+
+ +
+
- - -
- - {mobileMenuActive && ( -
-
- -
+ {isHomePage && } + +
+
- )} - -
+ + +
+ ) } @@ -208,6 +201,8 @@ const HomeLogo = React.memo(function _HomeLogo({ isDarkMode: boolean allWhiteLogo: boolean }) { + const { pathname } = useRouter() + const useNewLogo = pathname === "/connect-the-world" return (
@@ -219,7 +214,9 @@ const HomeLogo = React.memo(function _HomeLogo({ menuFaded ? styles.menuInvisible : styles.menuVisible )} > - {isDarkMode ? ( + {useNewLogo ? ( + + ) : isDarkMode ? ( ) : ( @@ -232,89 +229,6 @@ const HomeLogo = React.memo(function _HomeLogo({ ) }) -const NavigationLinks = React.memo(function _NavigationLinks(props: { - menuFaded: boolean - isDarkMode: boolean -}) { - const { t } = useTranslation(NameSpaces.common) - const foregroundColor = props.isDarkMode ? colors.white : colors.dark - const { pathname, asPath } = useRouter() - - return ( - - ) -}) - -function MobileMenuIcon(props: { - isDarkMode: boolean - willShowHamburger: boolean - isHomePage: boolean - mobileMenuActive: boolean - bannerHeight: number - clickHamburger: () => void -}) { - const foregroundColor = props.isDarkMode ? colors.white : colors.dark - - const containerStyle = css( - styles.hamburger, - styles.fadeTransition, - props.willShowHamburger && styles.hamburgerShowing, - props.isHomePage && - !props.mobileMenuActive && { - transform: `translateY(${props.bannerHeight}px)`, - } - ) - - return ( -
- -
- ) -} - function flexCss(cssStyle: CSSObject) { return css( { @@ -346,7 +260,6 @@ const styles = { height: HEADER_HEIGHT, justifyContent: "center", alignItems: "center", - zIndex: 30, maxWidth: "100vw", transitionProperty: "top", transitionDuration: "200ms", @@ -393,16 +306,15 @@ const styles = { paddingLeft: 6, paddingTop: 20, cursor: "pointer", + zIndex: 99, }), menuActive: flexCss({ - position: "fixed", + position: "absolute", top: 0, left: 0, right: 0, bottom: 0, height: "100vh", - backgroundColor: colors.white, - overflowY: "scroll", }), mobileMenuActive: flexCss({ bottom: 0, diff --git a/src/header/NewMenuIcon.tsx b/src/header/NewMenuIcon.tsx new file mode 100644 index 00000000..cd68d2df --- /dev/null +++ b/src/header/NewMenuIcon.tsx @@ -0,0 +1,93 @@ +import { css, CSSObject } from "@emotion/react" +import * as React from "react" + +interface Props { + onPress: () => void + isOpen: boolean + menuFaded: boolean +} + +export default React.memo(function NewMenuIcon(props: Props) { + return ( +
+

Menu

+

+ Close +

+ + + + + + +
+ ) +}) + +function flexCss(cssStyle: CSSObject) { + return css( + { + display: "flex", + }, + cssStyle + ) +} + +const menuContainerCss = flexCss({ + alignItems: "center", + fontWeight: "bold", + gap: "18px", + fontFamily: "Jost,futura-pt,futura,sans-serif", + cursor: "pointer", + marginTop: "1em", + zIndex: 99, + position: "absolute", + top: 0, + right: 30, +}) + +const hideMenuIconCss = css({ + transitionProperty: "opacity", + transitionDuration: "200ms", + opacity: 0, +}) + +const menuText = css({ + position: "absolute", + top: -9, + right: 40, + transitionProperty: "all", + transitionDuration: "200ms", +}) + +const menuIcon = css({ + position: "absolute", + top: 0, + right: 0, + transitionProperty: "all", + transitionDuration: "200ms", +}) diff --git a/src/header/__snapshots__/Navigation.test.tsx.snap b/src/header/__snapshots__/Navigation.test.tsx.snap index 154f6bb9..cb6c837a 100644 --- a/src/header/__snapshots__/Navigation.test.tsx.snap +++ b/src/header/__snapshots__/Navigation.test.tsx.snap @@ -1,7 +1,46 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`Navigation renders 1`] = ` -.emotion-0 { +Array [ + .emotion-0 { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + height: 100vh; + z-index: -99; + -webkit-transition: z-index 400ms step-end; + transition: z-index 400ms step-end; +} + +.emotion-1 { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex: 1; + -ms-flex: 1; + flex: 1; + -webkit-box-pack: start; + -ms-flex-pack: start; + -webkit-justify-content: flex-start; + justify-content: flex-start; + height: 100vh; +} + +
+
+
, + .emotion-0 { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; @@ -25,7 +64,6 @@ exports[`Navigation renders 1`] = ` -webkit-box-align: center; -ms-flex-align: center; align-items: center; - z-index: 30; max-width: 100vw; transition-property: top; transition-duration: 200ms; @@ -99,6 +137,7 @@ exports[`Navigation renders 1`] = ` padding-left: 6px; padding-top: 20px; cursor: pointer; + z-index: 99; } .emotion-4 { @@ -108,457 +147,153 @@ exports[`Navigation renders 1`] = ` } .emotion-5 { - display: none; - transition-property: opacity color; - transition-duration: 200ms; - opacity: 1; -} - -@media (min-width: 992px) { - .emotion-5 { - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-flex-direction: row; - -ms-flex-direction: row; - flex-direction: row; - -webkit-box-pack: end; - -ms-flex-pack: end; - -webkit-justify-content: flex-end; - justify-content: flex-end; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - } -} - -.emotion-6 { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; - position: relative; -webkit-align-items: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; - -webkit-box-pack: center; - -ms-flex-pack: center; - -webkit-justify-content: center; - justify-content: center; - -webkit-flex-direction: column; - -ms-flex-direction: column; - flex-direction: column; - margin-left: 20px; - margin-right: 20px; -} - -.emotion-8 { - -webkit-box-pack: center; - -ms-flex-pack: center; - -webkit-justify-content: center; - justify-content: center; - -webkit-box-flex: 0; - -webkit-flex-grow: 0; - -ms-flex-positive: 0; - flex-grow: 0; - width: -webkit-fit-content; - width: -moz-fit-content; - width: fit-content; - opacity: 1; - display: -webkit-inline-box; - display: -webkit-inline-flex; - display: -ms-inline-flexbox; - display: inline-flex; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - background-color: transparent; - border-color: transparent; - outline-color: transparent; + font-weight: bold; + gap: 18px; font-family: Jost,futura-pt,futura,sans-serif; - font-size: 16px; - line-height: 16; - text-align: center; - text-rendering: geometricPrecision; - color: #111214; cursor: pointer; - font-weight: 500; - line-height: 16px; - -webkit-text-decoration: none; - text-decoration: none; - color: #111214; - opacity: 1; -} - -.emotion-8:hover { - opacity: 0.75; -} - -.emotion-8:active { - opacity: 1; -} - -.emotion-30 { - padding-left: 8px; -} - -.emotion-31 { - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - position: relative; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - -webkit-box-pack: center; - -ms-flex-pack: center; - -webkit-justify-content: center; - justify-content: center; - -webkit-flex-direction: column; - -ms-flex-direction: column; - flex-direction: column; - margin-left: 20px; - margin-right: 20px; - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - margin-right: 10px; + margin-top: 1em; + z-index: 99; + position: absolute; + top: 0; + right: 30px; } -.emotion-35 { - position: fixed; - top: 10px; - right: 5px; - opacity: 0; - display: none; - transition-property: opacity color; +.emotion-6 { + position: absolute; + top: -9px; + right: 40px; + transition-property: all; transition-duration: 200ms; - opacity: 1; - display: block; -} - -@media (min-width: 992px) { - .emotion-35 { - display: none; - } -} - -.emotion-36 { - position: relative; - width: 18px; - height: 12px; - margin: 20px; - opacity: 1; - transition-property: opacity; - transition-duration: 30ms; -} - -.emotion-36:active { - opacity: 0.75; } -.emotion-37 { - transition-property: transform color; - transition-duration: 160ms; +.emotion-7 { position: absolute; - margin-top: 2px; - margin-bottom: 2px; - height: 2px; - width: 18px; - background-color: #111214; - background-color: #111214; - -webkit-transform: translateY(-5px); - -moz-transform: translateY(-5px); - -ms-transform: translateY(-5px); - transform: translateY(-5px); + top: -9px; + right: 40px; + transition-property: all; + transition-duration: 200ms; + opacity: 0; + top: 0; } -.emotion-38 { - transition-property: transform color; - transition-duration: 160ms; +.emotion-8 { position: absolute; - margin-top: 2px; - margin-bottom: 2px; - height: 2px; - width: 18px; - background-color: #111214; - background-color: #111214; + top: 0; + right: 0; + transition-property: all; + transition-duration: 200ms; } -.emotion-39 { - transition-property: transform color; - transition-duration: 160ms; +.emotion-9 { position: absolute; - margin-top: 2px; - margin-bottom: 2px; - height: 2px; - width: 18px; - background-color: #111214; - background-color: #111214; - -webkit-transform: translateY(5px); - -moz-transform: translateY(5px); - -ms-transform: translateY(5px); - transform: translateY(5px); + top: 0; + right: 0; + transition-property: all; + transition-duration: 200ms; + -webkit-transform: rotateZ(90deg); + -moz-transform: rotateZ(90deg); + -ms-transform: rotateZ(90deg); + transform: rotateZ(90deg); + opacity: 0; }
-
- - - - - - + + + + + + +
- -
-
-
-
-
-
+ +
-
-
+
, +] `; diff --git a/src/hooks/useWindowDimension.ts b/src/hooks/useWindowDimension.ts new file mode 100644 index 00000000..067b35be --- /dev/null +++ b/src/hooks/useWindowDimension.ts @@ -0,0 +1,28 @@ +import { useEffect, useState } from "react" + +type WindowDimensions = { + width: number | undefined + height: number | undefined +} + +const useWindowDimensions = (): WindowDimensions => { + const [windowDimensions, setWindowDimensions] = useState({ + width: undefined, + height: undefined, + }) + useEffect(() => { + function handleResize(): void { + setWindowDimensions({ + width: window.screen.availWidth, + height: window.screen.availHeight, + }) + } + handleResize() + window.addEventListener("resize", handleResize) + return (): void => window.removeEventListener("resize", handleResize) + }, []) // Empty array ensures that effect is only run on mount + + return windowDimensions +} + +export default useWindowDimensions diff --git a/src/icons/ArrowRight.tsx b/src/icons/ArrowRight.tsx new file mode 100644 index 00000000..2644f3bb --- /dev/null +++ b/src/icons/ArrowRight.tsx @@ -0,0 +1,7 @@ +export default function ArrowRight() { + return ( + + + + ) +} diff --git a/src/layout/Grid2.tsx b/src/layout/Grid2.tsx index 427b4170..e4a5159f 100644 --- a/src/layout/Grid2.tsx +++ b/src/layout/Grid2.tsx @@ -22,7 +22,7 @@ export function GridRow(props: GridProps) { [WHEN_TABLET]: { gridTemplateColumns }, }) return ( -
+
{props.children}
@@ -41,6 +41,10 @@ const darkBackground = css(wrapperStyle, { backgroundColor: colors.dark, }) +const tanBackground = css(wrapperStyle, { + backgroundColor: colors.baseTan, +}) + const containerCss = css(flex, { alignSelf: "center", flexDirection: "column", @@ -82,17 +86,18 @@ interface CellProps { span: Spans tabletSpan?: Spans className?: string + cssStyles?: SerializedStyles } // optionally place cells inside a grid. Mostly here for backwardish compatibility or when you want to span x columns of a grid in desktop and y columns in tablet -export function Cell({ span, children, className, tabletSpan }: CellProps) { +export function Cell({ span, children, className, tabletSpan, cssStyles }: CellProps) { const spanCss = css(cellStyle, { gridColumn: `span ${span}`, [WHEN_TABLET]: { gridColumn: `span ${tabletSpan ? tabletSpan : span}` }, }) return ( -
+
{children}
) diff --git a/src/logos/FiatConnectLogo.tsx b/src/logos/FiatConnectLogo.tsx new file mode 100644 index 00000000..b20ab791 --- /dev/null +++ b/src/logos/FiatConnectLogo.tsx @@ -0,0 +1,28 @@ +import * as React from "react" + +export default function FiatConnectLogo(props) { + return ( + + + + + + + + + + ) +} diff --git a/src/logos/NewLogo.tsx b/src/logos/NewLogo.tsx new file mode 100644 index 00000000..750ee9f3 --- /dev/null +++ b/src/logos/NewLogo.tsx @@ -0,0 +1,25 @@ +import * as React from "react" + +interface Props { + width: number + height: number +} + +export default function NewLogo(props: Props) { + return ( + + + + ) +} diff --git a/src/public-sector/CommonContentFullPage.tsx b/src/public-sector/CommonContentFullPage.tsx index f39f666a..c8d1e81b 100644 --- a/src/public-sector/CommonContentFullPage.tsx +++ b/src/public-sector/CommonContentFullPage.tsx @@ -3,15 +3,13 @@ import { documentToReactComponents } from "@contentful/rich-text-react-renderer" import React from "react" import { cellSwitch } from "./cellSwitch" import dynamic from "next/dynamic" -const OldGallery = dynamic(import("src/contentful/LogoGallary")) -const PillGallery = dynamic(import("src/home/PillGallary")) import { Entry } from "contentful" import { ContentfulPage, - GridRowContentType, - SectionType, CoverContentType, + GridRowContentType, LogoGallery, + SectionType, } from "src/utils/contentful" import { flex, WHEN_DESKTOP, WHEN_MOBILE } from "src/estyles" import { GridRow } from "src/layout/Grid2" @@ -20,11 +18,15 @@ import { renderNode } from "src/contentful/nodes/nodes" import { BUTTON } from "src/contentful/nodes/embeds/BUTTON" import { GALLARY } from "src/contentful/nodes/embeds/GALLARY" import { TABLE } from "src/contentful/nodes/embeds/TABLE" -import { BLOCKS, INLINES, Block } from "@contentful/rich-text-types" -import Cover from "src/contentful/Cover" +import { Block, BLOCKS, INLINES } from "@contentful/rich-text-types" import HR, { Props as HorizontalType } from "src/contentful/HorizontalRule" import { ROW } from "src/contentful/nodes/embeds/ROW" import { GENERICS } from "src/contentful/nodes/embeds/GENERICS" +import ReskinCover from "../contentful/ReskinCover" +import { connectTheWorldSwitch } from "./connectTheWorldSwitch" + +const OldGallery = dynamic(import("src/contentful/LogoGallary")) +const PillGallery = dynamic(import("src/home/PillGallary")) type Props = ContentfulPage @@ -81,7 +83,7 @@ export function pageSwitch( case "cover": const coverFields = section.fields as CoverContentType return ( - ) case "grid-row": const gridFields = section.fields as GridRowContentType + const component = connectTheWorldSwitch(gridFields) + + if (component) { + return component + } return ( + } + case "final-cta": { + return + } + case "connect-contact": { + return + } + case "app-section": { + return + } + } +} diff --git a/src/reskin/AnimatedCubes.tsx b/src/reskin/AnimatedCubes.tsx new file mode 100644 index 00000000..020d4cc2 --- /dev/null +++ b/src/reskin/AnimatedCubes.tsx @@ -0,0 +1,169 @@ +import { displayedImageSize } from "../contentful/nodes/displayRetinaImage" +import { useEffect, useState } from "react" +import { css } from "@emotion/react" +import { GalleryItem } from "../utils/contentful" +import { flexRow, jost, WHEN_DESKTOP, WHEN_MOBILE, WHEN_TABLET } from "../estyles" +import { colors } from "../colors" + +type Item = GalleryItem + +interface Props { + fields: any +} + +const generateRandomNumber = (maxNum) => { + return Math.floor(Math.random() * maxNum) +} +export default function AnimatedCubes(props: Props) { + const { fields } = props + const [randomIndex, setRandomIndex] = useState(generateRandomNumber(fields.items.length - 1)) + + fields.items = fields.items.slice(0, 8) + useEffect(() => { + const interval = setInterval(() => { + let randomNumber = randomIndex + while (randomNumber === randomIndex) { + randomNumber = generateRandomNumber(fields.items.length) + } + setRandomIndex(randomNumber) + }, 3000) + + return () => clearInterval(interval) + }, [setRandomIndex, randomIndex, fields.items.length]) + return ( +
+ {fields.items.map((entry, index) => { + const item = entry.fields as Item + const imageFields = item?.image?.fields + const imageSideFields = item?.imageSide?.fields + const size = displayedImageSize(item.image, fields.retina) + const sizeSide = displayedImageSize(item?.imageSide, fields.retina) + let angle = "0deg" + let translate = "-1900px" + + if (index === randomIndex) { + angle = angle === "0deg" ? "-90deg" : "0deg" + } + translate = "0" + + const rendered = ( +
+
+
+ {imageFields?.description} + {item.title ?

{item.title}

: null} +
+
+ {imageSideFields ? ( + {imageSideFields?.description} + ) : ( + {imageFields?.description} + )} +
+
+
+ ) + + if (item.url) { + return ( + + {rendered} + + ) + } + return rendered + })} +
+ ) +} + +const containerCss = css(flexRow, { + flexWrap: "wrap", + alignItems: "center", + justifyContent: "center", + padding: 0, +}) +const logoContainer = css({ + perspective: 700, + alignItems: "center", + justifyContent: "center", +}) + +const box = css({ + width: 136, + height: 136, + transformOrigin: "68px 68px -68px", + position: "relative", + transition: "all 0.4s ease-out", + transformStyle: "preserve-3d", + [WHEN_DESKTOP]: { + width: 300, + height: 300, + transformOrigin: "150px 150px -150px", + }, +}) + +const face = css(flexRow, { + padding: 12, + border: `1px solid ${colors.black}`, + alignItems: "center", + justifyContent: "center", + position: "absolute", + width: "100%", + height: "100%", + [WHEN_DESKTOP]: { + padding: 0, + }, +}) + +const front = css({ + backgroundColor: colors.baseTan, +}) + +const side = css({ + left: 68, + transform: "rotateY(90deg) translateX(68px)", + zIndex: 1, + backgroundColor: colors.baseTan, + [WHEN_DESKTOP]: { + left: 150, + transform: "rotateY(90deg) translateX(150px)", + }, +}) + +const logoTitle = css(jost, { + fontSize: 16, + fontWeight: 500, + marginRight: 24, +}) + +const logoCss = css({ + [WHEN_TABLET]: { + width: "100%", + height: "auto", + objectFit: "cover", + }, + [WHEN_MOBILE]: { + width: "100%", + height: "auto", + objectFit: "cover", + }, +}) diff --git a/src/reskin/ConnectContact.tsx b/src/reskin/ConnectContact.tsx new file mode 100644 index 00000000..cb090bcd --- /dev/null +++ b/src/reskin/ConnectContact.tsx @@ -0,0 +1,40 @@ +import { GridRowContentType } from "../utils/contentful" +import { cellSwitch } from "../public-sector/cellSwitch" +import { SquarePixel } from "./SquarePixel" +import { css } from "@emotion/react" +import { WHEN_DESKTOP, WHEN_MOBILE } from "../estyles" +import { GridRow } from "../layout/Grid2" +import React from "react" + +interface Props { + gridFields: GridRowContentType +} + +export default function ConnectContact(props: Props) { + const { gridFields } = props + return ( + + {gridFields.cells?.map((cell) => cellSwitch(cell, gridFields.darkMode, gridFields.columns))} + + + ) +} + +const sectionsCss = css({ + position: "relative", + paddingTop: 80, + paddingBottom: 80, + [WHEN_MOBILE]: { + paddingTop: 40, + paddingBottom: 40, + }, +}) diff --git a/src/reskin/FiatConnect.tsx b/src/reskin/FiatConnect.tsx new file mode 100644 index 00000000..f386f09f --- /dev/null +++ b/src/reskin/FiatConnect.tsx @@ -0,0 +1,70 @@ +import * as React from "react" +import { css } from "@emotion/react" +import { colors } from "src/colors" +import { flex, WHEN_MOBILE } from "../estyles" +import FiatConnectLogo from "../logos/FiatConnectLogo" +import { GridRowContentType } from "../utils/contentful" +import { cellSwitch } from "../public-sector/cellSwitch" +import { SquarePixel } from "./SquarePixel" + +interface Props { + gridFields: GridRowContentType +} + +export function FiatConnect(props: Props) { + const { gridFields } = props + return ( +
+
+
+ {gridFields.cells?.map((cell) => + cellSwitch(cell, gridFields.darkMode, gridFields.columns) + )} +
+
+ +
+ + +
+
+ ) +} + +const mainCss = css(flex, { + backgroundColor: colors.baseTan, + position: "relative", + flexDirection: "row", + justifyContent: "center", + [WHEN_MOBILE]: { + flexDirection: "column", + }, +}) + +const wrapperCss = css(flex, { + backgroundColor: colors.fig, + flexDirection: "row", + alignItems: "center", + [WHEN_MOBILE]: { + flexDirection: "column", + }, +}) + +const contentCss = css(flex, { + paddingLeft: 104, + paddingTop: 104, + paddingBottom: 104, + flex: 1, + [WHEN_MOBILE]: { + alignItems: "flex-start", + padding: "118.5px 32px 90px 32px", + }, +}) + +const fiatLogoCss = css(flex, { + flex: 1, + alignItems: "center", + [WHEN_MOBILE]: { + marginBottom: 118.5, + }, +}) diff --git a/src/reskin/FinalCTA.tsx b/src/reskin/FinalCTA.tsx new file mode 100644 index 00000000..3e16b440 --- /dev/null +++ b/src/reskin/FinalCTA.tsx @@ -0,0 +1,67 @@ +import { GridRowContentType } from "../utils/contentful" +import { cellSwitch } from "../public-sector/cellSwitch" +import { css } from "@emotion/react" +import { flex, WHEN_MOBILE } from "../estyles" +import { colors } from "../colors" +import * as React from "react" +import { PIXEL_SIZE, SquarePixel } from "./SquarePixel" +import SocialLinks from "./components/SocialLinks" + +interface Props { + gridFields: GridRowContentType +} + +export function FinalCTA(props: Props) { + const { gridFields } = props + + return ( +
+
+
+ {gridFields.cells?.map((cell) => + cellSwitch(cell, gridFields.darkMode, gridFields.columns) + )} +
+ + + + +
+
+ ) +} + +const mainCss = css(flex, { + position: "relative", + backgroundColor: colors.white, + justifyContent: "center", + color: colors.black, + [WHEN_MOBILE]: { + flexDirection: "column", + }, +}) + +const wrapperCss = css(flex, { + alignItems: "center", + h2: { + color: colors.black, + }, + paddingBottom: 168, +}) + +const contentCss = css(flex, { + padding: 150, + paddingBottom: 32, + textAlign: "center", + [WHEN_MOBILE]: { + alignItems: "flex-start", + padding: "140px 55px", + paddingBottom: 24, + }, +}) diff --git a/src/reskin/LogoGrid.tsx b/src/reskin/LogoGrid.tsx new file mode 100644 index 00000000..3725c35b --- /dev/null +++ b/src/reskin/LogoGrid.tsx @@ -0,0 +1,24 @@ +import { GridRowContentType } from "../utils/contentful" +import { css } from "@emotion/react" +import { flex } from "../estyles" +import { colors } from "../colors" +import { cellSwitch } from "../public-sector/cellSwitch" + +interface Props { + gridFields: GridRowContentType +} + +export default function LogoGrid(props: Props) { + const { gridFields } = props + return ( +
+ {gridFields.cells?.map((cell) => cellSwitch(cell, gridFields.darkMode, gridFields.columns))} +
+ ) +} + +const mainCss = css(flex, { + paddingTop: 136, + backgroundColor: colors.baseTan, + color: colors.black, +}) diff --git a/src/reskin/SquarePixel.tsx b/src/reskin/SquarePixel.tsx new file mode 100644 index 00000000..33e0a117 --- /dev/null +++ b/src/reskin/SquarePixel.tsx @@ -0,0 +1,51 @@ +import * as React from "react" +import { colors } from "../colors" +import { css, CSSObject } from "@emotion/react" +import { WHEN_MOBILE } from "src/estyles" + +interface Props { + options: CSSObject + width?: number + height?: number + backgroundColor?: backgroundColor + mobileOnly?: boolean +} + +type backgroundColor = { + desktop?: colors + mobile?: colors +} +export const PIXEL_SIZE = 86 + +export function SquarePixel(props: Props) { + const squarePixelCss = backgroundPixelCSS( + props.options, + props.backgroundColor, + props.width, + props.height + ) + return ( +
+ ) +} + +const backgroundPixelCSS = ( + options, + backgroundColor: backgroundColor = { desktop: colors.baseTan }, + width?, + height? +) => { + return css({ + width: width >= 0 ? width : PIXEL_SIZE, + height: height >= 0 ? height : PIXEL_SIZE, + backgroundColor: backgroundColor.desktop ? backgroundColor.desktop : colors.baseTan, + border: "none", + position: "absolute", + transitionProperty: "all", + transitionDuration: "400ms", + [WHEN_MOBILE]: { + backgroundColor: backgroundColor?.mobile ? backgroundColor.mobile : backgroundColor.desktop, + }, + ...options, + }) +} diff --git a/src/reskin/components/SocialLinks.tsx b/src/reskin/components/SocialLinks.tsx new file mode 100644 index 00000000..8f338cd8 --- /dev/null +++ b/src/reskin/components/SocialLinks.tsx @@ -0,0 +1,74 @@ +import Button, { BTN } from "../../shared/Button.4" +import * as React from "react" +import { CeloLinks } from "../../shared/menu-items" +import { css, SerializedStyles } from "@emotion/react" +import { flex, WHEN_MOBILE } from "../../estyles" +import { colors } from "../../colors" +import Discord from "../../icons/Discord" +import MediumLogo from "../../icons/MediumLogo" +import { TweetLogo } from "../../icons/TwitterLogo" +import Octocat from "../../icons/Octocat" + +interface Props { + containerCss?: SerializedStyles + iconCss?: SerializedStyles +} + +const ICON_SIZE = 40 + +function socials() { + const iconColor = colors.black + return [ + { + name: "Chat", + link: CeloLinks.discord, + icon: , + }, + { + name: "Blog", + link: CeloLinks.mediumPublication, + icon: , + }, + { + name: "Twitter", + link: CeloLinks.twitter, + icon: , + }, + { + name: "GitHub", + link: CeloLinks.gitHub, + icon: , + }, + ] +} + +export default function SocialLinks(props: Props) { + return ( +
+ {socials().map((social) => ( +
+
+ ))} +
+ ) +} + +const socialsCss = css(flex, { + flexDirection: "row", + "& > div:nth-child(-n+3)": { + borderRight: "none", + }, +}) + +const socialIconCss = css({ + border: `1px solid ${colors.transparentGray}`, + [WHEN_MOBILE]: { + padding: 16, + }, +}) diff --git a/src/reskin/components/TextInput.tsx b/src/reskin/components/TextInput.tsx new file mode 100644 index 00000000..20398394 --- /dev/null +++ b/src/reskin/components/TextInput.tsx @@ -0,0 +1,76 @@ +import Chevron from "../../icons/chevron" +import { colors } from "../../colors" +import * as React from "react" +import { useRef } from "react" +import { css, SerializedStyles } from "@emotion/react" +import { flexRow, garamond, WHEN_MOBILE, WHEN_TABLET } from "../../estyles" + +interface Props { + customCss?: SerializedStyles + chevronColor: colors + placeholder: string + onChange: () => void +} + +export default function TextInput(props: Props) { + const { chevronColor, customCss, placeholder, onChange } = props + const inputEl = useRef(null) + + const focusOnInput = () => { + inputEl.current.focus() + } + + return ( +
+ + +
+ ) +} + +const inputContainer = css(flexRow, { + alignItems: "center", + justifyContent: "space-between", + border: `1px solid ${colors.transparentGray}`, + borderRadius: 70, + paddingLeft: 24, + paddingRight: 30, + marginTop: 25, + width: 294, + "&:hover": { + cursor: "text", + }, + "&:focus-within": { + borderColor: colors.black, + }, +}) + +const inputCss = css(garamond, { + [WHEN_MOBILE]: { + justifyContent: "center", + alignItems: "center", + }, + [WHEN_TABLET]: { + justifyContent: "center", + alignItems: "center", + }, + border: "none", + // border: `1px inset ${colors.transparentGray}`, + height: 54, + fontSize: 20, + backgroundColor: "transparent", + ["::placeholder"]: { + color: colors.placeholderDarkMode, + fontSize: 14, + }, + "&:active, &:focus": { + border: "none", + outline: "none", + }, +}) diff --git a/src/shared/Button.4.tsx b/src/shared/Button.4.tsx index 5d1da203..da0039fd 100644 --- a/src/shared/Button.4.tsx +++ b/src/shared/Button.4.tsx @@ -1,9 +1,11 @@ import * as React from "react" import Chevron from "src/icons/chevron" import Link from "src/shared/Link" -import { fonts, textStyles } from "src/estyles" +import { flex, fonts, textStyles, WHEN_MOBILE } from "src/estyles" import { colors } from "src/colors" import { css, SerializedStyles } from "@emotion/react" +import { NextRouter } from "next/router" +import { useState } from "react" export enum BTN { PRIMARY = "PRIMARY", @@ -56,7 +58,7 @@ type NavProps = { type ButtonsProps = NakedProps | PrimaryProps | InlineProps | NavProps -export default class Button extends React.PureComponent { +class Button extends React.PureComponent { getStatus = () => { if (this.props.disabled) { return BTNStates.disabled @@ -99,7 +101,11 @@ export default class Button extends React.PureComponent { return (
{children} - - + setChevronColor(colors.black)} + onMouseLeave={() => setChevronColor(kind === BTN.DARKNAKED ? colors.black : colors.white)} + onMouseDown={() => setChevronColor(kind === BTN.DARKNAKED ? colors.black : colors.white)} + css={kind === BTN.DARKNAKED ? darkNakedStyles.chevron : nakedStyles.chevron} + > + @@ -323,8 +330,38 @@ const nakedStyles = { justifyContent: "center", }), chevron: css({ - paddingTop: "0.15em", - paddingLeft: "0.4em", + marginLeft: 8, + backgroundColor: colors.black, + padding: "9.5px 9.5px 9.5px 13.5px", + borderRadius: 60, + "&:hover": { + backgroundColor: colors.primaryYellow, + }, + "&:active": { + backgroundColor: colors.black, + }, + [WHEN_MOBILE]: { + padding: "6px 6px 6px 8px", + }, + }), +} + +const darkNakedStyles = { + container: css({ + flexDirection: "row", + justifyContent: "center", + }), + chevron: css({ + marginLeft: 8, + backgroundColor: colors.white, + padding: "9.5px 9.5px 9.5px 13.5px", + borderRadius: 60, + "&:active": { + backgroundColor: colors.primaryYellow, + }, + [WHEN_MOBILE]: { + padding: "6px 6px 6px 8px", + }, }), } @@ -413,36 +450,41 @@ const borderWidth = 1 const primaryStyles = { normal: css({ - backgroundColor: colors.primary, - borderColor: colors.primary, - borderRadius, + backgroundColor: colors.primaryYellow, + border: "solid", + borderColor: colors.transparentGray, + borderRadius: 70, borderWidth, - "&:hover": { - backgroundColor: colors.primaryHover, - borderColor: colors.primaryHover, - borderRadius, + padding: "24px 64px", + "&:hover, &:active": { + backgroundColor: colors.black, + borderColor: colors.transparentGray, + borderRadius: 70, borderWidth, + color: colors.white, + }, + [WHEN_MOBILE]: { + padding: "16px 24px", }, - "&:active": css({ - backgroundColor: colors.primaryPress, - borderColor: colors.primaryPress, - outlineColor: colors.primaryPress, - borderRadius, - borderWidth, - }), }), disabled: css({ - backgroundColor: colors.inactive, - borderColor: colors.inactive, - borderRadius, + backgroundImage: colors.disabledHatch, + border: "solid", + borderColor: colors.transparentGray, + borderRadius: 70, borderWidth, + padding: "24px 64px", + [WHEN_MOBILE]: { + padding: "16px 24px", + }, }), + darkText: css({ color: colors.dark, }), text: css({ - color: colors.white, + color: colors.black, }), } @@ -477,19 +519,14 @@ const secondaryStyles = { const commonTextStyles = { normal: css({ - color: colors.primary, - "&:hover": css({ - color: colors.primaryHover, - }), - "&:active": css({ - color: colors.primaryPress, - }), + color: colors.black, }), disabled: css({ color: colors.inactive, cursor: "not-allowed", }), } + const opacityState = { normal: { opacity: 1, @@ -507,6 +544,16 @@ const opacityState = { } const opacityStyle = opacityState +const nakedDarkStyle = { + normal: css({ + color: colors.white, + }), + disabled: css({ + color: colors.inactive, + cursor: "not-allowed", + }), +} + enum VERTICAL_PAD { big = 20, standard = 10, @@ -550,7 +597,7 @@ const baseStyles = { borderColor: "transparent", outlineColor: "transparent", }), - notAllowed: css({ cursor: "not-allowed" }), + notAllowed: css({ cursor: "not-allowed", color: colors.disabledTextGray }), iconLeft: css({ paddingRight: 8, }), @@ -577,3 +624,5 @@ const boxedVertical = { paddingBottom: VERTICAL_PAD.fullWidth - 1, }), } + +export default Button diff --git a/src/shared/Footer.tsx b/src/shared/Footer.tsx index 9265f0c2..8574abee 100644 --- a/src/shared/Footer.tsx +++ b/src/shared/Footer.tsx @@ -1,22 +1,8 @@ import * as React from "react" import { css } from "@emotion/react" -import { NameSpaces, Trans, useTranslation } from "src/i18n" -import Discord from "src/icons/Discord" -import Discourse from "src/icons/Discourse" -import Instagram from "src/icons/Instagram" -import MediumLogo from "src/icons/MediumLogo" -import Octocat from "src/icons/Octocat" -import LinkedIn from "src/icons/LinkedIn" -import envelope from "src/icons/Envelope.svg" -import Twitch from "src/icons/Twitch" -import Reddit from "src/icons/Reddit" -import Telegram from "src/icons/Telegram" -import { TweetLogo } from "src/icons/TwitterLogo" -import YouTube from "src/icons/YouTube" +import { NameSpaces, useTranslation } from "src/i18n" import { GridRow, Cell, Spans } from "src/layout/Grid2" import { useScreenSize } from "src/layout/ScreenSize" -import RingsGlyph from "src/logos/RingsGlyph" -import ChangeStory from "src/shared/ChangeStory" import FooterColumn, { LinkType } from "src/shared/FooterColumn" import menu, { CeloLinks, hashNav } from "src/shared/menu-items" import { colors } from "src/colors" @@ -29,111 +15,41 @@ import { whiteText, standardStyles, WHEN_DESKTOP, + WHEN_TABLET_AND_UP, + inter, } from "src/estyles" import HubspotForm from "src/contentful/grid2-cells/HubspotForm" +import NewLogo from "../logos/NewLogo" +import SocialLinks from "../reskin/components/SocialLinks" +import Button, { BTN } from "./Button.4" +import { PIXEL_SIZE, SquarePixel } from "../reskin/SquarePixel" -const MENU = [ - menu.HOME, - menu.ABOUT_US, - menu.JOBS, - menu.BUILD, - menu.DEVELOPERS, - menu.ALLIANCE_COLLECTIVE, - menu.COMMUNITY, - { - name: "annualReport", - link: "/papers/annual-reports/2021", - }, -] +const MENU = [menu.DEVELOPERS, menu.FOUNDERS, menu.COMMUNITY, menu.BUILD] const TECH_MENU = [ { name: "Docs", link: CeloLinks.docs }, { name: "Security Audits", link: CeloLinks.audits }, { name: "Reserve", link: CeloLinks.reserve }, - menu.PAPERS, menu.PUBLIC_SECTOR, ] const eventsLink = `${menu.COMMUNITY.link}#${hashNav.connect.events}` -const ecoFundLink = `${menu.COMMUNITY.link}#${hashNav.connect.fund}` -const RESOURCE_MENU = [ - menu.BRAND_POLICY, +const COMPANY_MENU = [ + menu.VISION, + { name: "Ecosystem", link: "#" }, + menu.JOBS, menu.PRESS, + menu.PAPERS, { name: "Events", link: eventsLink }, - menu.EVENTS_KIT, - menu.BRAND, - menu.MERCHANTS, - menu.GRANT_KIT, - menu.PILOT_KIT, - { name: "Ecosystem Fund", link: ecoFundLink }, ] +const KITS_MENU = [menu.BRAND, menu.PILOT_KIT, menu.GRANT_KIT] -const ICON_SIZE = 13 -function socialMenu(darkMode: boolean) { - const iconColor = darkMode ? colors.white : colors.dark - return [ - { - name: "Blog", - link: CeloLinks.mediumPublication, - icon: , - }, - { - name: "GitHub", - link: CeloLinks.gitHub, - icon: , - }, - { - name: "Twitter", - link: CeloLinks.twitter, - icon: , - }, - { - name: "Forum", - link: CeloLinks.discourse, - icon: , - }, - { - name: "Chat", - link: CeloLinks.discord, - icon: , - }, - { - name: "YouTube", - link: CeloLinks.youtube, - icon: , - }, - { - name: "Instagram", - link: CeloLinks.instagram, - icon: , - }, - { - name: "LinkedIn", - link: CeloLinks.linkedIn, - icon: , - }, - { - name: "Twitch", - link: CeloLinks.twitch, - icon: , - }, - { - name: "Reddit", - link: CeloLinks.reddit, - icon: , - }, - { - name: "Telegram", - link: CeloLinks.telegram, - icon: , - }, - ] -} +const FOOTER_OTHER_LINKS = [menu.PRIVACY, menu.TERMS] interface Props { hideForm?: boolean darkMode?: boolean } -export default function Footer({ hideForm, darkMode }: Props) { +export default function Footer({ darkMode }: Props) { const { t } = useTranslation(NameSpaces.common) const { isMobile } = useScreenSize() const year = new Date().getFullYear() @@ -149,52 +65,34 @@ export default function Footer({ hideForm, darkMode }: Props) { ) return ( <> - {!hideForm && ( - -
- {t("footer.emailIconAlt")} -

{t("receiveUpdates")}

- -
- - )} - -
- + +
+
+ +
+ - + {isMobile ? ( ) : (
@@ -204,15 +102,15 @@ export default function Footer({ hideForm, darkMode }: Props) { darkMode={darkMode} />
)} @@ -221,6 +119,7 @@ export default function Footer({ hideForm, darkMode }: Props) {
- + {t("footer.copyright", { year })} +
+ {FOOTER_OTHER_LINKS.map((item) => ( +
+
+ ))} +
+ + ) } @@ -247,26 +164,32 @@ function MobileLinks({ footerMenu, darkMode }: MobileLinkProps) { const { t } = useTranslation(NameSpaces.common) return ( - <> -
- - -
-
- - -
- +
+ + + + +
) } @@ -279,63 +202,44 @@ const Details = React.memo(function _Details({ darkMode }: DetailProps) { const fontStyling = css(fonts.legal, detailsTextCss, darkMode && whiteText) return (
-

{t("disclaimer")}

-

- - - Terms of Service - - -

+

{t("footerEmailText")}

) }) const detailsCss = css(flex, { - paddingBottom: 20, [WHEN_MOBILE]: { justifyContent: "center", - alignItems: "center", + alignItems: "flex-start", }, }) -const hrefCss = css({ - color: "inherit", -}) - -const receiveUpdatesCss = css(fonts.body, { - textAlign: "center", - marginTop: 20, - marginBottom: 10, +const wrapperCss = css({ + backgroundColor: colors.primaryYellow, + [WHEN_MOBILE]: { + padding: 33, + }, }) -const detailsTextCss = css({ +const detailsTextCss = css(inter, { marginBottom: 20, maxWidth: 350, textAlign: "left", - [WHEN_MOBILE]: { - textAlign: "center", - }, }) const toesCss = css(flex, { flexDirection: "row", justifyContent: "space-between", + alignItems: "center", + borderBottom: `1px solid ${colors.transparentGray}`, [WHEN_MOBILE]: css({ flexDirection: "column", justifyContent: "center", alignItems: "center", + borderBottom: "none", }), }) -const formStyle = css(flex, standardStyles.centered, { - maxWidth: 550, - [WHEN_DESKTOP]: { - width: "50%", - }, - [WHEN_TABLET]: { width: "66.66%" }, -}) - const linkColumnStartCss = css({ paddingStart: 0, }) @@ -344,26 +248,18 @@ const linkColumnEndCss = css({ paddingEnd: 0, }) -const endMobileColumnCss = css({ - marginLeft: 20, -}) - -const copyrightStyle = css(fonts.legal, { +const copyrightStyle = css(fonts.legal, inter, { zIndex: 10, // ensure copyright is above the sliding div from ChangeStory animation -}) - -const ringsCSS = css(flex, { - marginBottom: 20, [WHEN_MOBILE]: { - marginBottom: 30, - justifyContent: "center", - alignItems: "center", + marginBottom: 17, }, }) -const emailLogoCss = css({ - objectFit: "contain", - margin: 10, +const footerLinksResponsiveCss = css({ + gridRowStart: 2, + [WHEN_TABLET]: { + gridRowStart: 3, + }, }) const linksAreaCss = css(flexRow, { @@ -372,3 +268,43 @@ const linksAreaCss = css(flexRow, { justifyContent: "space-between", }, }) + +const footerLogoCss = css(flex, { + marginTop: 80, + marginBottom: 48, +}) + +const socialContainerCss = css({ + [WHEN_MOBILE]: { + marginBottom: 40, + }, +}) + +const socialIconCss = css({ + padding: 16, + [WHEN_TABLET_AND_UP]: { + borderBottom: "none", + }, +}) + +const footerOtherLinksCss = css(flex, { + flexDirection: "row", +}) + +const footerOtherLinkContainerCss = css(fonts.legal, { + "&:first-child": { + marginRight: 20, + }, + a: { + textDecorationLine: "none", + }, +}) + +const mobileLinkCss = css(flex, { + [WHEN_DESKTOP]: { + flexDirection: "row", + }, + [WHEN_MOBILE]: { + marginBottom: 90, + }, +}) diff --git a/src/shared/FooterColumn.tsx b/src/shared/FooterColumn.tsx index 625f5717..f22c2900 100644 --- a/src/shared/FooterColumn.tsx +++ b/src/shared/FooterColumn.tsx @@ -1,7 +1,8 @@ import * as React from "react" import Button, { BTN } from "src/shared/Button.4" -import { css } from "@emotion/react" -import { WHEN_MOBILE, fonts, whiteText, textStyles } from "src/estyles" +import { css, SerializedStyles } from "@emotion/react" +import { WHEN_MOBILE, fonts, whiteText, textStyles, inter } from "src/estyles" +import { colors } from "../colors" export interface LinkType { name: string @@ -14,24 +15,33 @@ interface Props { links: LinkType[] className?: string darkMode?: boolean + linksCss?: SerializedStyles } -export default React.memo(function FooterColumn({ heading, links, className, darkMode }: Props) { +export default React.memo(function FooterColumn({ + heading, + links, + className, + darkMode, + linksCss, +}: Props) { return (
{heading}
- {links.map(({ name, link, icon }) => ( -
-
- ))} +
+ {links.map(({ name, link, icon }) => ( +
+
+ ))} +
) }) @@ -52,11 +62,17 @@ const linkContainerCss = css({ marginBottom: 8, }) -const headingStyle = css(fonts.h6, { +const headingStyle = css(inter, { + marginTop: 0, + fontWeight: 200, marginBottom: 20, }) -const linkCss = css(fonts.legal, { +const linkCss = css(fonts.legal, inter, { + fontWeight: 700, + border: `1px solid ${colors.transparentGray}`, + padding: "10.5px 16px", + borderRadius: 70, textDecorationLine: "none", display: "inline-flex", alignItems: "center", diff --git a/src/shared/MobileMenu.tsx b/src/shared/MobileMenu.tsx index 510d6294..49bcf3a0 100644 --- a/src/shared/MobileMenu.tsx +++ b/src/shared/MobileMenu.tsx @@ -1,41 +1,223 @@ import { css } from "@emotion/react" import * as React from "react" -import { flex } from "src/estyles" +import { flex, flexRow, fonts, gtAlpina, inter, WHEN_MOBILE } from "src/estyles" import { NameSpaces, useTranslation } from "src/i18n" -import RingsGlyph from "src/logos/RingsGlyph" import Button, { BTN } from "src/shared/Button.4" import { MenuLink } from "src/shared/menu-items" +import { SquarePixel } from "../reskin/SquarePixel" +import { colors } from "../colors" +import useWindowDimension from "../hooks/useWindowDimension" +import Chevron from "../icons/chevron" +import ArrowRight from "../icons/ArrowRight" +import HubspotForm from "../contentful/grid2-cells/HubspotForm" +import { DESKTOP_BREAKPOINT, TABLET_BREAKPOINT } from "./Styles" + interface Props { currentPage: string menu: MenuLink[] + isOpen?: boolean } -export default function MobileMenu({ currentPage, menu }: Props) { +export default function MobileMenu({ currentPage, menu, isOpen }: Props) { const { t } = useTranslation(NameSpaces.common) + const squarePixelRotationOption = { + transform: `rotateY(${isOpen ? "0deg" : "90deg"})`, + transition: "width 400ms ease-out, transform 400ms ease-in", + transitionDelay: isOpen ? "600ms" : "0ms", + } + const { width } = useWindowDimension() + let squarePixelWidth + if (width >= DESKTOP_BREAKPOINT) { + squarePixelWidth = width / 8 + } else if (width < DESKTOP_BREAKPOINT && width > TABLET_BREAKPOINT) { + squarePixelWidth = width / 3 + } else if (width <= TABLET_BREAKPOINT) { + squarePixelWidth = width / 2 + } + const squarePixelHeight = 260 + return (
-
+
TABLET_BREAKPOINT + ? { + paddingTop: isOpen ? 140 : 200, + paddingLeft: 50, + } + : { + paddingTop: 140, + paddingLeft: isOpen ? 50 : 200, + }), + maxWidth: "100%", + width: squarePixelWidth * 3, + transition: `all 400ms ease-in-out ${isOpen ? "1000ms" : "0ms"}`, + })} + > {menu.map((item) => { const linkIsToCurrentPage = currentPage === item.link const btnKind = linkIsToCurrentPage ? BTN.TERTIARY : BTN.NAV return ( -
-
+ <> +
+
+ ) })} +
+
+ +

{t("footerEmailText")}

+
+ +
-
- -
+ 576 + ? { left: 0 } + : { right: squarePixelWidth, ...squarePixelRotationOption }), + }} + backgroundColor={{ desktop: colors.primaryYellow }} + /> + 576 + ? { left: 0, ...squarePixelRotationOption } + : { right: squarePixelWidth }), + }} + backgroundColor={{ desktop: colors.primaryYellow }} + /> + 576 ? { left: 0 } : { right: squarePixelWidth }), + }} + backgroundColor={{ desktop: colors.primaryYellow }} + /> + 576 ? { left: 0 } : { right: squarePixelWidth }), + }} + backgroundColor={{ desktop: colors.primaryYellow }} + /> + 576 ? { left: squarePixelWidth } : { right: 0 }), + }} + backgroundColor={{ desktop: colors.primaryYellow }} + /> + 576 ? { left: squarePixelWidth } : { right: 0 }), + }} + backgroundColor={{ desktop: colors.primaryYellow }} + /> + 576 + ? { left: squarePixelWidth } + : { right: 0, ...squarePixelRotationOption }), + }} + backgroundColor={{ desktop: colors.primaryYellow }} + /> + 576 + ? { left: squarePixelWidth, ...squarePixelRotationOption } + : { right: 0 }), + }} + backgroundColor={{ desktop: colors.primaryYellow }} + /> + 576 + ? { + top: 0, + left: squarePixelWidth * 2, + } + : { + top: squarePixelHeight * 4, + right: squarePixelWidth, + }), + ...squarePixelRotationOption, + }} + backgroundColor={{ desktop: colors.primaryYellow }} + /> + 576 + ? { + top: squarePixelHeight, + left: squarePixelWidth * 2, + } + : { + top: squarePixelHeight * 4, + right: 0, + }), + }} + backgroundColor={{ desktop: colors.primaryYellow }} + /> + +
) } @@ -43,10 +225,9 @@ export default function MobileMenu({ currentPage, menu }: Props) { const styles = { root: css(flex, { flexDirection: "column", - alignItems: "center", + alignItems: "flex-start", justifyContent: "flex-start", flex: 1, - paddingTop: 30, paddingBottom: 30, paddingRight: 20, paddingLeft: 20, @@ -58,21 +239,55 @@ const styles = { alignItems: "center", }), menu: css(flex, { - alignItems: "center", - paddingLeft: 20, - paddingRight: 20, + position: "absolute", + left: 0, + alignItems: "flex-start", + zIndex: 888, + paddingRight: 100, flexDirection: "column", justifyContent: "space-around", + [WHEN_MOBILE]: { + paddingRight: 50, + }, }), menuItem: css(flex, { - marginLeft: 10, - marginRight: 10, - marginTop: 25, - marginBottom: 25, + flexDirection: "row", + padding: "24px 0", + width: "100%", + alignItems: "center", + justifyContent: "space-between", + borderBottom: `1px solid ${colors.transparentGray}`, + "&:hover > div:last-child": { + opacity: 1, + marginRight: 0, + }, }), } -const btnStyle = css({ - fontSize: 20, +const btnStyle = css(gtAlpina, { + fontWeight: 200, + fontSize: 32, alignItems: "center" as const, }) + +const chevronContainer = css({ + border: `1px solid ${colors.transparentGray}`, + padding: "17.5px 21px", + borderRadius: 70, + opacity: 0, + marginRight: 50, + transition: "all 400ms ease-in-out", +}) + +const emailCtaContainer = css({ + paddingTop: 44, +}) + +const emailCtaDetails = css(flexRow, { + alignItems: "center", + marginBottom: 22, +}) + +const emailCtaText = css(fonts.h3, inter, { + marginLeft: 24, +}) diff --git a/src/shared/__snapshots__/Footer.test.tsx.snap b/src/shared/__snapshots__/Footer.test.tsx.snap index 270a25ee..05aaf823 100644 --- a/src/shared/__snapshots__/Footer.test.tsx.snap +++ b/src/shared/__snapshots__/Footer.test.tsx.snap @@ -20,6 +20,14 @@ Array [ -ms-flex-item-align: center; align-self: center; width: 100%; + background-color: #FBF6F1; + background-color: #FCFF52; +} + +@media (max-width: 576px) { + .emotion-0 { + padding: 33px; + } } .emotion-1 { @@ -48,14 +56,7 @@ Array [ flex-wrap: wrap; -webkit-column-gap: 24px; column-gap: 24px; - -webkit-box-pack: center; - -ms-flex-pack: center; - -webkit-justify-content: center; - justify-content: center; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; + gap: 0; } @media (min-width: 576px) and (max-width: 992px) { @@ -89,41 +90,25 @@ Array [ @media (min-width: 992px) { .emotion-1 { - grid-template-columns: 1fr; + grid-template-columns: 1fr 1fr 1fr; } } @media (min-width: 576px) and (max-width: 992px) { .emotion-1 { - grid-template-columns: 1fr; + grid-template-columns: 1fr 1fr 1fr; } } @media (min-width: 992px) { .emotion-1 { margin-top: 60px; - box-sizing: border-box; - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-flex-direction: column; - -ms-flex-direction: column; - flex-direction: column; } } @media (min-width: 576px) and (max-width: 992px) { .emotion-1 { margin-top: 40px; - box-sizing: border-box; - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-flex-direction: column; - -ms-flex-direction: column; - flex-direction: column; } } @@ -142,48 +127,195 @@ Array [ -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; - -webkit-box-pack: center; - -ms-flex-pack: center; - -webkit-justify-content: center; - justify-content: center; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - max-width: 550px; + grid-column: span 1; + grid-row-start: 1; } -@media (min-width: 992px) { +@media (min-width: 576px) and (max-width: 992px) { .emotion-2 { - width: 50%; + grid-column: span 1; } } +.emotion-3 { + box-sizing: border-box; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex-direction: column; + -ms-flex-direction: column; + flex-direction: column; + margin-top: 80px; + margin-bottom: 48px; +} + +.emotion-4 { + box-sizing: border-box; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex-direction: column; + -ms-flex-direction: column; + flex-direction: column; + grid-column: span 1; + grid-row-start: 2; +} + @media (min-width: 576px) and (max-width: 992px) { - .emotion-2 { - width: 66.66%; + .emotion-4 { + grid-column: span 1; } } -.emotion-3 { - object-fit: contain; - margin: 10px; +.emotion-5 { + box-sizing: border-box; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex-direction: column; + -ms-flex-direction: column; + flex-direction: column; } -.emotion-4 { +@media (max-width: 576px) { + .emotion-5 { + -webkit-box-pack: center; + -ms-flex-pack: center; + -webkit-justify-content: center; + justify-content: center; + -webkit-align-items: flex-start; + -webkit-box-align: flex-start; + -ms-flex-align: flex-start; + align-items: flex-start; + } +} + +.emotion-6 { + font-weight: 200; + margin: 0; + margin-block-start: 0; + margin-block-end: 0; font-family: EB Garamond,eb-garamond,Garamond,serif; + font-size: 16px; + line-height: 20; + text-rendering: geometricPrecision; + color: #111214; + line-height: 20px; + font-family: Inter,sans-serif; + margin-bottom: 20px; + max-width: 350px; + text-align: left; +} + +.emotion-7 { + width: 100%; + display: inline-block; +} + +.emotion-7 img { + display: none; +} + +.emotion-7 .grecaptcha-badge { + display: none; +} + +.emotion-7 #email-b4dd2ae2-68e9-4662-bfd3-b2860162a5aa { + box-sizing: border-box; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex-direction: column; + -ms-flex-direction: column; + flex-direction: column; + font-family: Inter,sans-serif; font-size: 20px; line-height: 28; text-rendering: geometricPrecision; color: #111214; line-height: 28px; - text-align: center; - margin-top: 20px; - margin-bottom: 10px; + -webkit-align-self: center; + -ms-flex-item-align: center; + align-self: center; + padding: 24px; + border-radius: 70px; + border-width: 1px; + border-style: solid; + width: 100%; + margin: 4px; + outline-width: 0; + background-color: transparent; +} + +.emotion-7 #email-b4dd2ae2-68e9-4662-bfd3-b2860162a5aa:focus { + border-color: #000; +} + +.emotion-7 #hsForm_b4dd2ae2-68e9-4662-bfd3-b2860162a5aa input[type=submit] { + display: none; +} + +.emotion-7 .celo-hbspt { + width: 100%; +} + +.emotion-7 .celo-hbspt * { + box-sizing: border-box; +} + +.emotion-7 .celo-hbspt fieldset { + border: 0; + padding: 0; + margin: 0; + max-width: 100%; +} + +@media (min-width: 576px) and (max-width: 992px) { + .emotion-7 .celo-hbspt fieldset { + margin-right: 0!important; + width: 100%!important; + } } -.emotion-5 input, -.emotion-5 textarea { +@media (max-width: 576px) { + .emotion-7 .celo-hbspt fieldset { + float: none; + width: 100%; + } +} + +.emotion-7 .celo-hbspt fieldset.form-columns-2 .hs-form-field { + width: 50%; + float: left; +} + +@media (min-width: 576px) and (max-width: 992px) { + .emotion-7 .celo-hbspt fieldset.form-columns-2 .hs-form-field { + float: none; + width: 100%; + } +} + +@media (max-width: 576px) { + .emotion-7 .celo-hbspt fieldset.form-columns-2 .hs-form-field { + float: none; + width: 100%; + } +} + +.emotion-7 .celo-hbspt .field { + margin-bottom: 32px; +} + +.emotion-7 .celo-hbspt .input { + margin-right: 26px; +} + +.emotion-7 .celo-hbspt .hs-input { box-sizing: border-box; display: -webkit-box; display: -webkit-flex; @@ -192,7 +324,7 @@ Array [ -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; - font-family: EB Garamond,eb-garamond,Garamond,serif; + font-family: Inter,sans-serif; font-size: 20px; line-height: 28; text-rendering: geometricPrecision; @@ -201,33 +333,22 @@ Array [ -webkit-align-self: center; -ms-flex-item-align: center; align-self: center; - padding-left: 12px; - padding-right: 12px; - padding-top: 12px; - padding-bottom: 16px; - border-radius: 3px; + padding: 24px; + border-radius: 70px; border-width: 1px; border-style: solid; - border-color: rgba(61, 61, 61, 0.2); width: 100%; margin: 4px; - margin-bottom: 8px; outline-width: 0; + background-color: transparent; + border-color: rgba(0, 0, 0, 0.2); } -.emotion-5 input:focus, -.emotion-5 textarea:focus { - border-color: #35D07F; -} - -.emotion-5 input[type='checkbox'] { - -webkit-flex-basis: 0; - -ms-flex-preferred-size: 0; - flex-basis: 0; +.emotion-7 .celo-hbspt .hs-input:focus { + border-color: #000; } -.emotion-5 label { - font-family: Jost,futura-pt,futura,sans-serif; +.emotion-7 .hs-custom-style fieldset textarea { box-sizing: border-box; display: -webkit-box; display: -webkit-flex; @@ -236,18 +357,44 @@ Array [ -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; - color: #81868B; - font-weight: 500; - font-size: 16px; - line-height: 18px; - margin-top: 12px; - margin-bottom: 8px; - -webkit-flex-direction: row; - -ms-flex-direction: row; - flex-direction: row; + font-family: Inter,sans-serif; + font-size: 20px; + line-height: 28; + text-rendering: geometricPrecision; + color: #111214; + line-height: 28px; + -webkit-align-self: center; + -ms-flex-item-align: center; + align-self: center; + padding: 24px; + border-radius: 70px; + border-width: 1px; + border-style: solid; + width: 100%; + margin: 4px; + outline-width: 0; + background-color: transparent; +} + +.emotion-7 .hs-custom-style fieldset textarea:focus { + border-color: #000; +} + +.emotion-7 .celo-hbspt .contact-error { + border-color: #E70532; +} + +.emotion-7 .celo-hbspt .hs-error-msg { + color: #E70532; } -.emotion-5 input.hs-button { +.emotion-7 input[type='checkbox'] { + -webkit-flex-basis: 0; + -ms-flex-preferred-size: 0; + flex-basis: 0; +} + +.emotion-7 input.hs-button { font-family: Jost,futura-pt,futura,sans-serif; font-size: 16px; line-height: 16; @@ -259,32 +406,37 @@ Array [ line-height: 16px; -webkit-text-decoration: none; text-decoration: none; - background-color: #35D07F; - color: #FFFFFF; + background-color: #FCFF52; + color: #000; + padding: 24px 64px; + border-radius: 70px; width: -webkit-fit-content; width: -moz-fit-content; width: fit-content; - border: none; + border: 1px solid #CCCCCC; + margin-top: 32px; } -.emotion-5 input.hs-button:hover { - background-color: #4CDD91; +.emotion-7 input.hs-button:hover { + background-color: #000; + color: #FFFFFF; } -.emotion-5 input.hs-button:active { - background-color: #0FB972; +.emotion-7 input.hs-button:active { + background-color: #000; + color: #FFFFFF; } -.emotion-5 ul { +.emotion-7 ul { list-style-type: none; } -.emotion-5 .hs-error-msg { +.emotion-7 .hs-error-msg { color: #FF7F6D; } -.emotion-5 .legal-consent-container { - font-weight: normal; +.emotion-7 .legal-consent-container { + font-weight: 200; margin: 0; margin-block-start: 0; margin-block-end: 0; @@ -296,39 +448,11 @@ Array [ line-height: 20px; } -.emotion-5 a { +.emotion-7 a { color: #1AB775; } -
-
-
- Envelop with Green Coin Sliding in -

- Receive the latest updates to your inbox -

- -
-
-
, - .emotion-0 { +.emotion-8 { box-sizing: border-box; display: -webkit-box; display: -webkit-flex; @@ -337,218 +461,23 @@ Array [ -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; - overflow: hidden; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - -webkit-align-self: center; - -ms-flex-item-align: center; - align-self: center; - width: 100%; + grid-column: span 2; + grid-row-start: 2; } -.emotion-1 { - box-sizing: border-box; - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-flex-direction: column; - -ms-flex-direction: column; - flex-direction: column; - -webkit-align-self: center; - -ms-flex-item-align: center; - align-self: center; - -webkit-flex-direction: column; - -ms-flex-direction: column; - flex-direction: column; - padding-left: 12px; - padding-right: 12px; - width: 100%; - max-width: 100vw; - overflow: hidden; - -webkit-box-flex-wrap: wrap; - -webkit-flex-wrap: wrap; - -ms-flex-wrap: wrap; - flex-wrap: wrap; - -webkit-column-gap: 24px; - column-gap: 24px; -} - -@media (min-width: 576px) and (max-width: 992px) { - .emotion-1 { - display: grid; - grid-auto-rows: auto; - -webkit-align-self: center; - -ms-flex-item-align: center; - align-self: center; - -webkit-flex-direction: row; - -ms-flex-direction: row; - flex-direction: row; - padding-right: 24px; - padding-left: 24px; - width: 100%; - max-width: 982px; - } -} - -@media (min-width: 992px) { - .emotion-1 { - display: grid; - grid-auto-rows: auto; - -webkit-align-self: center; - -ms-flex-item-align: center; - align-self: center; - width: 100%; - max-width: 1104px; - } -} - -@media (min-width: 992px) { - .emotion-1 { - grid-template-columns: 1fr 1fr 1fr; - } -} - -@media (min-width: 576px) and (max-width: 992px) { - .emotion-1 { - grid-template-columns: 1fr 1fr 1fr; - } -} - -@media (min-width: 992px) { - .emotion-1 { - margin-top: 60px; - } -} - -@media (min-width: 576px) and (max-width: 992px) { - .emotion-1 { - margin-top: 40px; - } -} - -@media (max-width: 576px) { - .emotion-1 { - margin-top: 30px; - } -} - -.emotion-2 { - box-sizing: border-box; - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-flex-direction: column; - -ms-flex-direction: column; - flex-direction: column; - grid-column: span 1; -} - -@media (min-width: 576px) and (max-width: 992px) { - .emotion-2 { - grid-column: span 3; - } -} - -.emotion-3 { - box-sizing: border-box; - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-flex-direction: column; - -ms-flex-direction: column; - flex-direction: column; - margin-bottom: 20px; -} - -@media (max-width: 576px) { - .emotion-3 { - margin-bottom: 30px; - -webkit-box-pack: center; - -ms-flex-pack: center; - -webkit-justify-content: center; - justify-content: center; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - } -} - -.emotion-4 { - box-sizing: border-box; - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-flex-direction: column; - -ms-flex-direction: column; - flex-direction: column; - padding-bottom: 20px; -} - -@media (max-width: 576px) { - .emotion-4 { - -webkit-box-pack: center; - -ms-flex-pack: center; - -webkit-justify-content: center; - justify-content: center; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - } -} - -.emotion-5 { - font-weight: normal; - margin: 0; - margin-block-start: 0; - margin-block-end: 0; - font-family: EB Garamond,eb-garamond,Garamond,serif; - font-size: 16px; - line-height: 20; - text-rendering: geometricPrecision; - color: #111214; - line-height: 20px; - margin-bottom: 20px; - max-width: 350px; - text-align: left; -} - -@media (max-width: 576px) { - .emotion-5 { - text-align: center; - } -} - -.emotion-7 { - color: inherit; -} - -.emotion-8 { - box-sizing: border-box; - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-flex-direction: column; - -ms-flex-direction: column; - flex-direction: column; - grid-column: span 2; -} - -@media (min-width: 576px) and (max-width: 992px) { - .emotion-8 { - grid-column: span 3; - } -} - -.emotion-9 { +@media (min-width: 576px) and (max-width: 992px) { + .emotion-8 { + grid-column: span 3; + } +} + +@media (min-width: 576px) and (max-width: 992px) { + .emotion-8 { + grid-row-start: 3; + } +} + +.emotion-9 { box-sizing: border-box; display: -webkit-box; display: -webkit-flex; @@ -587,37 +516,37 @@ Array [ } .emotion-11 { - font-weight: normal; - margin: 0; - margin-block-start: 0; - margin-block-end: 0; - font-family: Jost,futura-pt,futura,sans-serif; - font-size: 16px; - line-height: 18; - font-weight: 500; - text-rendering: geometricPrecision; - color: #111214; - line-height: 18px; + font-family: Inter,sans-serif; + margin-top: 0; + font-weight: 200; margin-bottom: 20px; } -.emotion-12 { +.emotion-13 { margin-top: 8px; margin-bottom: 8px; } -.emotion-13 { +.emotion-14 { + box-sizing: border-box; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex-direction: column; + -ms-flex-direction: column; + flex-direction: column; display: inline; } -.emotion-14 { +.emotion-15 { color: inherit; cursor: pointer; text-decoration-style: solid; text-decoration-line: underline; display: inline; opacity: 1; - font-weight: normal; + font-weight: 200; margin: 0; margin-block-start: 0; margin-block-end: 0; @@ -627,6 +556,11 @@ Array [ text-rendering: geometricPrecision; color: #111214; line-height: 20px; + font-family: Inter,sans-serif; + font-weight: 700; + border: 1px solid rgba(0, 0, 0, 0.2); + padding: 10.5px 16px; + border-radius: 70px; text-decoration-line: none; display: -webkit-inline-box; display: -webkit-inline-flex; @@ -638,21 +572,21 @@ Array [ align-items: center; } -.emotion-14:hover { +.emotion-15:hover { opacity: 0.75; } -.emotion-14:active { +.emotion-15:active { opacity: 1; } -.emotion-36 { +.emotion-25 { padding-left: 25px; padding-right: 25px; } @media (max-width: 576px) { - .emotion-36 { + .emotion-25 { margin-top: 35px; width: 50%; padding-left: 10px; @@ -660,14 +594,14 @@ Array [ } } -.emotion-82 { +.emotion-61 { padding-left: 25px; padding-right: 25px; padding-end: 0; } @media (max-width: 576px) { - .emotion-82 { + .emotion-61 { margin-top: 35px; width: 50%; padding-left: 10px; @@ -675,10 +609,6 @@ Array [ } } -.emotion-87 { - padding-right: 8px; -} -
@@ -693,44 +623,36 @@ Array [ > - -
+
+

- Nothing herein constitutes an offer to sell, or the solicitation of an offer to buy, any securities or tokens. -

-

- Read more in Celo - - Terms of Service - + World-changing ideas in your inbox

+
- Celo - -
- -
-
- -
- - - - - - -
-
-
- Technology -
-
- -
- - - - -
-
-
- Resources + Celo for
-
-
- -
-
- -
- - - -
- - +
-
-
- Social + Tech
- -
- - - - - Github - - - - - GitHub - + Security Audits + +
- - - - + +
+
+ Company +
-
- - - - - - -
- - - - - - - Twitch - + White Papers + +
- -
- - - - - - - Reddit - + Events + +
+ +
+
+ Kits +
+ +
+
- - - - - - Telegram - + GrantKit + +
@@ -1561,49 +1022,7 @@ Array [ , - @keyframes animation-0 { - from { - -webkit-transform: translateX(-100%); - -moz-transform: translateX(-100%); - -ms-transform: translateX(-100%); - transform: translateX(-100%); - } - - to { - -webkit-transform: translateX(0%); - -moz-transform: translateX(0%); - -ms-transform: translateX(0%); - transform: translateX(0%); - } -} - -@keyframes animation-1 { - from { - opacity: 0; - } - - to { - opacity: 1; - } -} - -@keyframes animation-2 { - from { - -webkit-transform: translateX(0%); - -moz-transform: translateX(0%); - -ms-transform: translateX(0%); - transform: translateX(0%); - } - - to { - -webkit-transform: translateX(100%); - -moz-transform: translateX(100%); - -ms-transform: translateX(100%); - transform: translateX(100%); - } -} - -.emotion-0 { + .emotion-0 { box-sizing: border-box; display: -webkit-box; display: -webkit-flex; @@ -1621,6 +1040,8 @@ Array [ -ms-flex-item-align: center; align-self: center; width: 100%; + background-color: #FBF6F1; + background-color: #FCFF52; } .emotion-1 { @@ -1728,6 +1149,11 @@ Array [ -webkit-box-pack: justify; -webkit-justify-content: space-between; justify-content: space-between; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + border-bottom: 1px solid rgba(0, 0, 0, 0.2); } @media (max-width: 576px) { @@ -1743,6 +1169,7 @@ Array [ -webkit-box-align: center; -ms-flex-align: center; align-items: center; + border-bottom: none; } } @@ -1752,51 +1179,42 @@ Array [ display: -webkit-flex; display: -ms-flexbox; display: flex; + -webkit-flex-direction: column; + -ms-flex-direction: column; + flex-direction: column; -webkit-flex-direction: row; -ms-flex-direction: row; flex-direction: row; - margin-bottom: 20px; - overflow: hidden; +} + +.emotion-3>div:nth-child(-n+3) { + border-right: none; } @media (max-width: 576px) { .emotion-3 { - -webkit-box-pack: center; - -ms-flex-pack: center; - -webkit-justify-content: center; - justify-content: center; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; + margin-bottom: 40px; } } .emotion-4 { - width: 20px; - height: 20px; - z-index: 10; + border: 1px solid rgba(0, 0, 0, 0.2); + padding: 16px; } @media (max-width: 576px) { .emotion-4 { - margin-bottom: 8px; + padding: 16px; } } -.emotion-5 { - margin-left: 10px; - margin-right: 10px; - z-index: 10; -} - -@media (max-width: 576px) { - .emotion-5 { - display: none; +@media (min-width: 576px) { + .emotion-4 { + border-bottom: none; } } -.emotion-6 { +.emotion-5 { box-sizing: border-box; display: -webkit-box; display: -webkit-flex; @@ -1805,38 +1223,28 @@ Array [ -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; - position: relative; + display: inline; } -.emotion-7 { - box-sizing: border-box; - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-flex-direction: column; - -ms-flex-direction: column; - flex-direction: column; - background-color: #FFFFFF; - position: absolute; - height: 100%; - width: 101%; - -webkit-animation-duration: 250ms; - animation-duration: 250ms; - -webkit-animation-iteration-count: 1; - animation-iteration-count: 1; - -webkit-animation-timing-function: linear; - animation-timing-function: linear; - -webkit-animation-fill-mode: both; - animation-fill-mode: both; - -webkit-animation-delay: 3500ms; - animation-delay: 3500ms; - -webkit-animation-name: animation-0; - animation-name: animation-0; +.emotion-6 { + color: inherit; + cursor: pointer; + text-decoration-style: solid; + text-decoration-line: underline; + display: inline; + opacity: 1; } -.emotion-8 { - font-weight: normal; +.emotion-6:hover { + opacity: 0.75; +} + +.emotion-6:active { + opacity: 1; +} + +.emotion-16 { + font-weight: 200; margin: 0; margin-block-start: 0; margin-block-end: 0; @@ -1846,24 +1254,17 @@ Array [ text-rendering: geometricPrecision; color: #111214; line-height: 20px; - font-style: italic; - -webkit-animation-fill-mode: both; - animation-fill-mode: both; - -webkit-animation-iteration-count: 1; - animation-iteration-count: 1; - -webkit-animation-duration: 750ms; - animation-duration: 750ms; - -webkit-animation-name: animation-1; - animation-name: animation-1; + font-family: Inter,sans-serif; + z-index: 10; } @media (max-width: 576px) { - .emotion-8 { - text-align: center; + .emotion-16 { + margin-bottom: 17px; } } -.emotion-9 { +.emotion-17 { box-sizing: border-box; display: -webkit-box; display: -webkit-flex; @@ -1872,24 +1273,13 @@ Array [ -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; - background-color: #FFFFFF; - position: absolute; - height: 100%; - width: 101%; - -webkit-animation-duration: 250ms; - animation-duration: 250ms; - -webkit-animation-iteration-count: 1; - animation-iteration-count: 1; - -webkit-animation-timing-function: linear; - animation-timing-function: linear; - -webkit-animation-fill-mode: both; - animation-fill-mode: both; - -webkit-animation-name: animation-2; - animation-name: animation-2; + -webkit-flex-direction: row; + -ms-flex-direction: row; + flex-direction: row; } -.emotion-10 { - font-weight: normal; +.emotion-18 { + font-weight: 200; margin: 0; margin-block-start: 0; margin-block-end: 0; @@ -1899,7 +1289,32 @@ Array [ text-rendering: geometricPrecision; color: #111214; line-height: 20px; - z-index: 10; +} + +.emotion-18:first-child { + margin-right: 20px; +} + +.emotion-18 a { + text-decoration-line: none; +} + +.emotion-20 { + color: inherit; + cursor: pointer; + text-decoration-style: solid; + text-decoration-line: underline; + display: inline; + opacity: 1; + font-family: Inter,sans-serif; +} + +.emotion-20:hover { + opacity: 0.75; +} + +.emotion-20:active { + opacity: 1; }
- - - | - + +
- - " - Change the Story - " - + + + + Medium + + + + +
+
+
+ className="emotion-5" + > + + + + Twitter + + + + +
+
+ - The Celo Foundation, © Celo 2022 + © 2022 Celo Inc. +
, + .emotion-0 { + width: 86px; + height: 86px; + background-color: #FFFFFF; + border: none; + position: absolute; + transition-property: all; + transition-duration: 400ms; + top: 0; + left: 0; +} + +@media (max-width: 576px) { + .emotion-0 { + background-color: #FFFFFF; + } +} + +@media (max-width: 576px) { + .emotion-0 { + width: 86px; + height: 86px; + background-color: #FFFFFF; + border: none; + position: absolute; + transition-property: all; + transition-duration: 400ms; + top: 0; + left: 0; + } + + @media (max-width: 576px) { + .emotion-0 { + background-color: #FFFFFF; + } + } +} + +
, + .emotion-0 { + width: 86px; + height: 86px; + background-color: #FFFFFF; + border: none; + position: absolute; + transition-property: all; + transition-duration: 400ms; + top: 0; + left: 172px; +} + +@media (max-width: 576px) { + .emotion-0 { + background-color: #FFFFFF; + } +} + +@media (max-width: 576px) { + .emotion-0 { + width: 86px; + height: 86px; + background-color: #FFFFFF; + border: none; + position: absolute; + transition-property: all; + transition-duration: 400ms; + top: 0; + left: 172px; + } + + @media (max-width: 576px) { + .emotion-0 { + background-color: #FFFFFF; + } + } +} + +
, ] `; diff --git a/src/shared/__snapshots__/MobileMenu.test.tsx.snap b/src/shared/__snapshots__/MobileMenu.test.tsx.snap index 0f4d89da..27bdec96 100644 --- a/src/shared/__snapshots__/MobileMenu.test.tsx.snap +++ b/src/shared/__snapshots__/MobileMenu.test.tsx.snap @@ -13,10 +13,10 @@ exports[`Main MobileMenu renders 1`] = ` -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; + -webkit-align-items: flex-start; + -webkit-box-align: flex-start; + -ms-flex-align: flex-start; + align-items: flex-start; -webkit-box-pack: start; -ms-flex-pack: start; -webkit-justify-content: flex-start; @@ -24,7 +24,6 @@ exports[`Main MobileMenu renders 1`] = ` -webkit-flex: 1; -ms-flex: 1; flex: 1; - padding-top: 30px; padding-bottom: 30px; padding-right: 20px; padding-left: 20px; @@ -39,12 +38,14 @@ exports[`Main MobileMenu renders 1`] = ` -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - padding-left: 20px; - padding-right: 20px; + position: absolute; + left: 0; + -webkit-align-items: flex-start; + -webkit-box-align: flex-start; + -ms-flex-align: flex-start; + align-items: flex-start; + z-index: 888; + padding-right: 100px; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; @@ -52,6 +53,19 @@ exports[`Main MobileMenu renders 1`] = ` -ms-flex-pack: space-around; -webkit-justify-content: space-around; justify-content: space-around; + opacity: 0; + padding-top: 140px; + padding-left: 200px; + max-width: 100%; + width: NaNpx; + -webkit-transition: all 400ms ease-in-out 0ms; + transition: all 400ms ease-in-out 0ms; +} + +@media (max-width: 576px) { + .emotion-1 { + padding-right: 50px; + } } .emotion-2 { @@ -63,13 +77,35 @@ exports[`Main MobileMenu renders 1`] = ` -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; - margin-left: 10px; - margin-right: 10px; - margin-top: 25px; - margin-bottom: 25px; + -webkit-flex-direction: row; + -ms-flex-direction: row; + flex-direction: row; + padding: 24px 0; + width: 100%; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + -webkit-box-pack: justify; + -webkit-justify-content: space-between; + justify-content: space-between; + border-bottom: 1px solid rgba(0, 0, 0, 0.2); +} + +.emotion-2:hover>div:last-child { + opacity: 1; + margin-right: 0; } .emotion-3 { + box-sizing: border-box; + 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: center; -webkit-box-align: center; -ms-flex-align: center; @@ -116,23 +152,27 @@ exports[`Main MobileMenu renders 1`] = ` min-width: 150px; padding: 10px 20px; font-weight: 500; - color: #35D07F; - font-size: 20px; + color: #000; + font-family: GT-Alpina,serif; + font-weight: 200; + font-size: 32px; -webkit-align-items: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } -.emotion-4:hover { - color: #4CDD91; -} - -.emotion-4:active { - color: #0FB972; +.emotion-5 { + border: 1px solid rgba(0, 0, 0, 0.2); + padding: 17.5px 21px; + border-radius: 70px; + opacity: 0; + margin-right: 50px; + -webkit-transition: all 400ms ease-in-out; + transition: all 400ms ease-in-out; } -.emotion-7 { +.emotion-8 { -webkit-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; @@ -169,40 +209,786 @@ exports[`Main MobileMenu renders 1`] = ` text-decoration: none; color: #111214; opacity: 1; - font-size: 20px; + font-family: GT-Alpina,serif; + font-weight: 200; + font-size: 32px; -webkit-align-items: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } -.emotion-7:hover { +.emotion-8:hover { opacity: 0.75; } -.emotion-7:active { +.emotion-8:active { opacity: 1; } -.emotion-26 { +.emotion-22 { + padding-top: 44px; +} + +.emotion-23 { box-sizing: border-box; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; - -webkit-flex-direction: column; - -ms-flex-direction: column; - flex-direction: column; - padding-top: 30px; - padding-bottom: 30px; - -webkit-box-pack: center; - -ms-flex-pack: center; - -webkit-justify-content: center; - justify-content: center; + -webkit-flex-direction: row; + -ms-flex-direction: row; + flex-direction: row; -webkit-align-items: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; + margin-bottom: 22px; +} + +.emotion-24 { + font-weight: 200; + margin: 0; + margin-block-start: 0; + margin-block-end: 0; + font-family: GT-Alpina,serif; + font-size: 24px; + line-height: 28; + text-rendering: geometricPrecision; + color: #111214; + line-height: 28px; + font-family: Inter,sans-serif; + margin-left: 24px; +} + +.emotion-25 { + width: 100%; + display: inline-block; +} + +.emotion-25 img { + display: none; +} + +.emotion-25 .grecaptcha-badge { + display: none; +} + +.emotion-25 #email-b4dd2ae2-68e9-4662-bfd3-b2860162a5aa { + box-sizing: border-box; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex-direction: column; + -ms-flex-direction: column; + flex-direction: column; + font-family: Inter,sans-serif; + font-size: 20px; + line-height: 28; + text-rendering: geometricPrecision; + color: #111214; + line-height: 28px; + -webkit-align-self: center; + -ms-flex-item-align: center; + align-self: center; + padding: 24px; + border-radius: 70px; + border-width: 1px; + border-style: solid; + width: 100%; + margin: 4px; + outline-width: 0; + background-color: transparent; +} + +.emotion-25 #email-b4dd2ae2-68e9-4662-bfd3-b2860162a5aa:focus { + border-color: #000; +} + +.emotion-25 #hsForm_b4dd2ae2-68e9-4662-bfd3-b2860162a5aa input[type=submit] { + display: none; +} + +.emotion-25 .celo-hbspt { + width: 100%; +} + +.emotion-25 .celo-hbspt * { + box-sizing: border-box; +} + +.emotion-25 .celo-hbspt fieldset { + border: 0; + padding: 0; + margin: 0; + max-width: 100%; +} + +@media (min-width: 576px) and (max-width: 992px) { + .emotion-25 .celo-hbspt fieldset { + margin-right: 0!important; + width: 100%!important; + } +} + +@media (max-width: 576px) { + .emotion-25 .celo-hbspt fieldset { + float: none; + width: 100%; + } +} + +.emotion-25 .celo-hbspt fieldset.form-columns-2 .hs-form-field { + width: 50%; + float: left; +} + +@media (min-width: 576px) and (max-width: 992px) { + .emotion-25 .celo-hbspt fieldset.form-columns-2 .hs-form-field { + float: none; + width: 100%; + } +} + +@media (max-width: 576px) { + .emotion-25 .celo-hbspt fieldset.form-columns-2 .hs-form-field { + float: none; + width: 100%; + } +} + +.emotion-25 .celo-hbspt .field { + margin-bottom: 32px; +} + +.emotion-25 .celo-hbspt .input { + margin-right: 26px; +} + +.emotion-25 .celo-hbspt .hs-input { + box-sizing: border-box; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex-direction: column; + -ms-flex-direction: column; + flex-direction: column; + font-family: Inter,sans-serif; + font-size: 20px; + line-height: 28; + text-rendering: geometricPrecision; + color: #111214; + line-height: 28px; + -webkit-align-self: center; + -ms-flex-item-align: center; + align-self: center; + padding: 24px; + border-radius: 70px; + border-width: 1px; + border-style: solid; + width: 100%; + margin: 4px; + outline-width: 0; + background-color: transparent; + border-color: rgba(0, 0, 0, 0.2); +} + +.emotion-25 .celo-hbspt .hs-input:focus { + border-color: #000; +} + +.emotion-25 .hs-custom-style fieldset textarea { + box-sizing: border-box; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex-direction: column; + -ms-flex-direction: column; + flex-direction: column; + font-family: Inter,sans-serif; + font-size: 20px; + line-height: 28; + text-rendering: geometricPrecision; + color: #111214; + line-height: 28px; + -webkit-align-self: center; + -ms-flex-item-align: center; + align-self: center; + padding: 24px; + border-radius: 70px; + border-width: 1px; + border-style: solid; + width: 100%; + margin: 4px; + outline-width: 0; + background-color: transparent; +} + +.emotion-25 .hs-custom-style fieldset textarea:focus { + border-color: #000; +} + +.emotion-25 .celo-hbspt .contact-error { + border-color: #E70532; +} + +.emotion-25 .celo-hbspt .hs-error-msg { + color: #E70532; +} + +.emotion-25 input[type='checkbox'] { + -webkit-flex-basis: 0; + -ms-flex-preferred-size: 0; + flex-basis: 0; +} + +.emotion-25 input.hs-button { + font-family: Jost,futura-pt,futura,sans-serif; + font-size: 16px; + line-height: 16; + text-align: center; + text-rendering: geometricPrecision; + color: #111214; + cursor: pointer; + font-weight: 500; + line-height: 16px; + -webkit-text-decoration: none; + text-decoration: none; + background-color: #FCFF52; + color: #000; + padding: 24px 64px; + border-radius: 70px; + width: -webkit-fit-content; + width: -moz-fit-content; + width: fit-content; + border: 1px solid #CCCCCC; + margin-top: 32px; +} + +.emotion-25 input.hs-button:hover { + background-color: #000; + color: #FFFFFF; +} + +.emotion-25 input.hs-button:active { + background-color: #000; + color: #FFFFFF; +} + +.emotion-25 ul { + list-style-type: none; +} + +.emotion-25 .hs-error-msg { + color: #FF7F6D; +} + +.emotion-25 .legal-consent-container { + font-weight: 200; + margin: 0; + margin-block-start: 0; + margin-block-end: 0; + font-family: EB Garamond,eb-garamond,Garamond,serif; + font-size: 16px; + line-height: 20; + text-rendering: geometricPrecision; + color: #111214; + line-height: 20px; +} + +.emotion-25 a { + color: #1AB775; +} + +.emotion-26 { + width: 0; + height: 260px; + background-color: #FCFF52; + border: none; + position: absolute; + transition-property: all; + transition-duration: 400ms; + top: 0; + -webkit-transform: rotateY(90deg); + -moz-transform: rotateY(90deg); + -ms-transform: rotateY(90deg); + transform: rotateY(90deg); + -webkit-transition: width 400ms ease-out,-webkit-transform 400ms ease-in; + transition: width 400ms ease-out,transform 400ms ease-in; + transition-delay: 0ms; +} + +@media (max-width: 576px) { + .emotion-26 { + background-color: #FCFF52; + } +} + +@media (max-width: 576px) { + .emotion-26 { + width: 0; + height: 260px; + background-color: #FCFF52; + border: none; + position: absolute; + transition-property: all; + transition-duration: 400ms; + top: 0; + -webkit-transform: rotateY(90deg); + -moz-transform: rotateY(90deg); + -ms-transform: rotateY(90deg); + transform: rotateY(90deg); + -webkit-transition: width 400ms ease-out,-webkit-transform 400ms ease-in; + transition: width 400ms ease-out,transform 400ms ease-in; + transition-delay: 0ms; + } + + @media (max-width: 576px) { + .emotion-26 { + background-color: #FCFF52; + } + } +} + +.emotion-27 { + width: 0; + height: 260px; + background-color: #FCFF52; + border: none; + position: absolute; + transition-property: all; + transition-duration: 400ms; + top: 260px; +} + +@media (max-width: 576px) { + .emotion-27 { + background-color: #FCFF52; + } +} + +@media (max-width: 576px) { + .emotion-27 { + width: 0; + height: 260px; + background-color: #FCFF52; + border: none; + position: absolute; + transition-property: all; + transition-duration: 400ms; + top: 260px; + } + + @media (max-width: 576px) { + .emotion-27 { + background-color: #FCFF52; + } + } +} + +.emotion-28 { + width: 0; + height: 260px; + background-color: #FCFF52; + border: none; + position: absolute; + transition-property: all; + transition-duration: 400ms; + top: 520px; +} + +@media (max-width: 576px) { + .emotion-28 { + background-color: #FCFF52; + } +} + +@media (max-width: 576px) { + .emotion-28 { + width: 0; + height: 260px; + background-color: #FCFF52; + border: none; + position: absolute; + transition-property: all; + transition-duration: 400ms; + top: 520px; + } + + @media (max-width: 576px) { + .emotion-28 { + background-color: #FCFF52; + } + } +} + +.emotion-29 { + width: 0; + height: 260px; + background-color: #FCFF52; + border: none; + position: absolute; + transition-property: all; + transition-duration: 400ms; + top: 780px; +} + +@media (max-width: 576px) { + .emotion-29 { + background-color: #FCFF52; + } +} + +@media (max-width: 576px) { + .emotion-29 { + width: 0; + height: 260px; + background-color: #FCFF52; + border: none; + position: absolute; + transition-property: all; + transition-duration: 400ms; + top: 780px; + } + + @media (max-width: 576px) { + .emotion-29 { + background-color: #FCFF52; + } + } +} + +.emotion-30 { + width: 0; + height: 260px; + background-color: #FCFF52; + border: none; + position: absolute; + transition-property: all; + transition-duration: 400ms; + top: 0; + right: 0; +} + +@media (max-width: 576px) { + .emotion-30 { + background-color: #FCFF52; + } +} + +@media (max-width: 576px) { + .emotion-30 { + width: 0; + height: 260px; + background-color: #FCFF52; + border: none; + position: absolute; + transition-property: all; + transition-duration: 400ms; + top: 0; + right: 0; + } + + @media (max-width: 576px) { + .emotion-30 { + background-color: #FCFF52; + } + } +} + +.emotion-31 { + width: 0; + height: 260px; + background-color: #FCFF52; + border: none; + position: absolute; + transition-property: all; + transition-duration: 400ms; + top: 260px; + right: 0; +} + +@media (max-width: 576px) { + .emotion-31 { + background-color: #FCFF52; + } +} + +@media (max-width: 576px) { + .emotion-31 { + width: 0; + height: 260px; + background-color: #FCFF52; + border: none; + position: absolute; + transition-property: all; + transition-duration: 400ms; + top: 260px; + right: 0; + } + + @media (max-width: 576px) { + .emotion-31 { + background-color: #FCFF52; + } + } +} + +.emotion-32 { + width: 0; + height: 260px; + background-color: #FCFF52; + border: none; + position: absolute; + transition-property: all; + transition-duration: 400ms; + top: 520px; + right: 0; + -webkit-transform: rotateY(90deg); + -moz-transform: rotateY(90deg); + -ms-transform: rotateY(90deg); + transform: rotateY(90deg); + -webkit-transition: width 400ms ease-out,-webkit-transform 400ms ease-in; + transition: width 400ms ease-out,transform 400ms ease-in; + transition-delay: 0ms; +} + +@media (max-width: 576px) { + .emotion-32 { + background-color: #FCFF52; + } +} + +@media (max-width: 576px) { + .emotion-32 { + width: 0; + height: 260px; + background-color: #FCFF52; + border: none; + position: absolute; + transition-property: all; + transition-duration: 400ms; + top: 520px; + right: 0; + -webkit-transform: rotateY(90deg); + -moz-transform: rotateY(90deg); + -ms-transform: rotateY(90deg); + transform: rotateY(90deg); + -webkit-transition: width 400ms ease-out,-webkit-transform 400ms ease-in; + transition: width 400ms ease-out,transform 400ms ease-in; + transition-delay: 0ms; + } + + @media (max-width: 576px) { + .emotion-32 { + background-color: #FCFF52; + } + } +} + +.emotion-33 { + width: 0; + height: 260px; + background-color: #FCFF52; + border: none; + position: absolute; + transition-property: all; + transition-duration: 400ms; + top: 780px; + right: 0; +} + +@media (max-width: 576px) { + .emotion-33 { + background-color: #FCFF52; + } +} + +@media (max-width: 576px) { + .emotion-33 { + width: 0; + height: 260px; + background-color: #FCFF52; + border: none; + position: absolute; + transition-property: all; + transition-duration: 400ms; + top: 780px; + right: 0; + } + + @media (max-width: 576px) { + .emotion-33 { + background-color: #FCFF52; + } + } +} + +.emotion-34 { + width: 0; + height: 260px; + background-color: #FCFF52; + border: none; + position: absolute; + transition-property: all; + transition-duration: 400ms; + top: 1040px; + -webkit-transform: rotateY(90deg); + -moz-transform: rotateY(90deg); + -ms-transform: rotateY(90deg); + transform: rotateY(90deg); + -webkit-transition: width 400ms ease-out,-webkit-transform 400ms ease-in; + transition: width 400ms ease-out,transform 400ms ease-in; + transition-delay: 0ms; +} + +@media (max-width: 576px) { + .emotion-34 { + background-color: #FCFF52; + } +} + +@media (max-width: 576px) { + .emotion-34 { + width: 0; + height: 260px; + background-color: #FCFF52; + border: none; + position: absolute; + transition-property: all; + transition-duration: 400ms; + top: 1040px; + -webkit-transform: rotateY(90deg); + -moz-transform: rotateY(90deg); + -ms-transform: rotateY(90deg); + transform: rotateY(90deg); + -webkit-transition: width 400ms ease-out,-webkit-transform 400ms ease-in; + transition: width 400ms ease-out,transform 400ms ease-in; + transition-delay: 0ms; + } + + @media (max-width: 576px) { + .emotion-34 { + background-color: #FCFF52; + } + } +} + +.emotion-35 { + width: 0; + height: 260px; + background-color: #FCFF52; + border: none; + position: absolute; + transition-property: all; + transition-duration: 400ms; + top: 1040px; + right: 0; +} + +@media (max-width: 576px) { + .emotion-35 { + background-color: #FCFF52; + } +} + +@media (max-width: 576px) { + .emotion-35 { + width: 0; + height: 260px; + background-color: #FCFF52; + border: none; + position: absolute; + transition-property: all; + transition-duration: 400ms; + top: 1040px; + right: 0; + } + + @media (max-width: 576px) { + .emotion-35 { + background-color: #FCFF52; + } + } +} + +.emotion-36 { + width: 0; + height: 260px; + background-color: #FCFF52; + border: none; + position: absolute; + transition-property: all; + transition-duration: 400ms; + top: 520px; + left: NaNpx; +} + +@media (max-width: 576px) { + .emotion-36 { + background-color: #FCFF52; + } +} + +@media (max-width: 576px) { + .emotion-36 { + width: 0; + height: 260px; + background-color: #FCFF52; + border: none; + position: absolute; + transition-property: all; + transition-duration: 400ms; + top: 520px; + left: NaNpx; + } + + @media (max-width: 576px) { + .emotion-36 { + background-color: #FCFF52; + } + } +} + +.emotion-37 { + width: 0; + height: 260px; + background-color: #FCFF52; + border: none; + position: absolute; + transition-property: all; + transition-duration: 400ms; + top: 780px; + left: NaNpx; +} + +@media (max-width: 576px) { + .emotion-37 { + background-color: #FCFF52; + } +} + +@media (max-width: 576px) { + .emotion-37 { + width: 0; + height: 260px; + background-color: #FCFF52; + border: none; + position: absolute; + transition-property: all; + transition-duration: 400ms; + top: 780px; + left: NaNpx; + } + + @media (max-width: 576px) { + .emotion-37 { + background-color: #FCFF52; + } + } }
-
- -
- +
+ + + +
+
+ + + +
+
+ + + +
- - Enterprise - + + +

+ World-changing ideas in your inbox +

+
- - - - - -
+ /> +
+
+
+
+
+
+
+
+
+
+
`; diff --git a/src/shared/menu-items.ts b/src/shared/menu-items.ts index f95a5bc6..65473a1c 100644 --- a/src/shared/menu-items.ts +++ b/src/shared/menu-items.ts @@ -18,9 +18,9 @@ export const pagePaths = { menuHidePoint: 0, menuHidePointMobile: 50, }, - ABOUT_US: { - name: "About", - link: "/about", + FOUNDERS: { + name: "Founders", + link: "/alliance", isDark: false, translucent: { backgroundHover: colors.darkTransparent, @@ -109,7 +109,7 @@ export const pagePaths = { isDark: false, }, JOBS: { - name: "Join", + name: "Careers", link: "/jobs", isDark: false, }, @@ -153,7 +153,7 @@ export const pagePaths = { isDark: false, }, TERMS: { - name: "Terms", + name: "Terms of Use", link: "/terms", isDark: false, }, @@ -172,6 +172,11 @@ export const pagePaths = { link: "/validators/explore/baklavastaging", isDark: true, }, + VISION: { + name: "Vision", + link: "/about", + isDark: false, + }, WALLET: { name: "Test Wallet", link: "/developers/wallet", @@ -180,13 +185,10 @@ export const pagePaths = { } export const MAIN_MENU = [ - pagePaths.ABOUT_US, pagePaths.DEVELOPERS, + pagePaths.FOUNDERS, pagePaths.COMMUNITY, pagePaths.ECOSYSTEM, - pagePaths.ALLIANCE_COLLECTIVE, - pagePaths.PUBLIC_SECTOR, - pagePaths.ENTERPRISE, ] // TODO: Temporary link to the master branch documentation for 'sdkDocs' and 'sdkTutorial' diff --git a/src/styles.ts b/src/styles.ts index ff37e45e..a0ab84ec 100644 --- a/src/styles.ts +++ b/src/styles.ts @@ -4,6 +4,8 @@ import { colors } from "./colors" export enum typeFaces { futura = "Jost, futura-pt, futura, sans-serif", garamond = "EB Garamond, eb-garamond, Garamond, serif", + inter = "Inter, sans-serif", + gtAlpina = "GT-Alpina, serif", } const fontDefaults = { @@ -13,63 +15,62 @@ const fontDefaults = { export const fontInfo: Record = { h1: { - fontFamily: typeFaces.garamond, + fontFamily: typeFaces.gtAlpina, fontSize: 48, lineHeight: 56, ...fontDefaults, }, h1Mobile: { - fontFamily: typeFaces.garamond, + fontFamily: typeFaces.gtAlpina, fontSize: 36, lineHeight: 40, ...fontDefaults, }, h2: { - fontFamily: typeFaces.garamond, + fontFamily: typeFaces.gtAlpina, fontSize: 40, lineHeight: 48, ...fontDefaults, }, h2Mobile: { - fontFamily: typeFaces.garamond, + fontFamily: typeFaces.gtAlpina, fontSize: 28, lineHeight: 32, ...fontDefaults, }, h3: { - fontFamily: typeFaces.futura, + fontFamily: typeFaces.gtAlpina, fontSize: 24, lineHeight: 28, - fontWeight: "400", ...fontDefaults, }, h3Mobile: { - fontFamily: typeFaces.futura, + fontFamily: typeFaces.gtAlpina, fontSize: 24, lineHeight: 32, ...fontDefaults, }, h4: { - fontFamily: typeFaces.garamond, + fontFamily: typeFaces.inter, fontSize: 28, lineHeight: 36, ...fontDefaults, }, h4Mobile: { - fontFamily: typeFaces.garamond, + fontFamily: typeFaces.inter, fontSize: 24, lineHeight: 32, ...fontDefaults, }, h5: { - fontFamily: typeFaces.futura, + fontFamily: typeFaces.gtAlpina, fontSize: 20, lineHeight: 24, fontWeight: "500", ...fontDefaults, }, h6: { - fontFamily: typeFaces.futura, + fontFamily: typeFaces.gtAlpina, fontSize: 16, lineHeight: 18, fontWeight: "500", @@ -85,7 +86,7 @@ export const fontInfo: Record = { fontWeight: "500", }, p: { - fontFamily: typeFaces.garamond, + fontFamily: typeFaces.inter, fontSize: 20, lineHeight: 28, ...fontDefaults, diff --git a/src/utils/contentful.ts b/src/utils/contentful.ts index 6542639e..3b5f00c9 100644 --- a/src/utils/contentful.ts +++ b/src/utils/contentful.ts @@ -17,6 +17,7 @@ function initialize() { ? serverRuntimeConfig.CONTENTFUL_PREVIEW_ACCESS_TOKEN : serverRuntimeConfig.CONTENTFUL_ACCESS_TOKEN, host: isPreview ? "preview.contentful.com" : undefined, + environment: isPreview ? "development" : "master", }) } @@ -235,6 +236,7 @@ export interface CoverContentType { subTitle: Document links?: Entry[] imageDesktop: Asset + imagesDesktop?: Asset[] imageMobile: Asset darkMode?: boolean illoFirst?: boolean @@ -256,6 +258,7 @@ export interface ContentfulPage { export interface GalleryItem { url: string image: Asset + imageSide?: Asset title?: string } diff --git a/src/utils/utils.ts b/src/utils/utils.ts index ed6baa01..fd2a003b 100644 --- a/src/utils/utils.ts +++ b/src/utils/utils.ts @@ -1,5 +1,6 @@ import NetworkSpeed from "network-speed" import { Clipboard } from "react-native" +import { NextRouter } from "next/router" export function randomIntegerInRange(min: number, max: number) { return Math.round(Math.random() * (max - min + 1)) + min @@ -127,3 +128,7 @@ export function weiToDecimal(number: number) { export function isExternalLink(link: string) { return link.startsWith("http") } + +export function isConnectTheWorldPage(router: NextRouter) { + return router.pathname === "/connect-the-world" +}