@comicrelief/component-library 8.47.2 → 8.47.4

package/src/components/Organisms/FooterNew/__snapshots__/FooterNew.test.js.snap

@@ -29,14 +29,14 @@ exports[`renders correctly 1`] = `
 .c5 {
   display: inline-block;
   z-index: 3;
-  width: 48px;
+  width: 59px;
   -webkit-transform: inherit;
   -ms-transform: inherit;
   transform: inherit;
   vertical-align: bottom;
 }
 
-.c32 {
+.c33 {
   display: inline-block;
   z-index: 3;
   width: 59px;
@@ -183,7 +183,7 @@ exports[`renders correctly 1`] = `
   border: 1px solid #666;
 }
 
-.c28 {
+.c29 {
   -webkit-text-decoration: none;
   text-decoration: none;
   cursor: pointer;
@@ -194,6 +194,7 @@ exports[`renders correctly 1`] = `
   background-color: #222222;
   border-radius: 0.5rem;
   padding: 0.5rem;
+  box-sizing: border-box;
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -216,40 +217,44 @@ exports[`renders correctly 1`] = `
   transform-origin: center;
 }
 
-.c28:hover,
-.c28:focus {
+.c29:hover,
+.c29:focus {
   opacity: 0.6;
 }
 
-.c28:hover,
-.c28:focus {
+.c29:hover,
+.c29:focus {
   -webkit-transform: scale(1.15);
   -ms-transform: scale(1.15);
   transform: scale(1.15);
 }
 
-.c28:hover,
-.c28:focus {
+.c29:hover,
+.c29:focus {
   background-color: #3A3A3A;
   opacity: 1;
 }
 
-.c30 {
+.c31 {
   width: 100%;
   -webkit-filter: brightness(0) invert(1);
   filter: brightness(0) invert(1);
 }
 
-.c26 {
+.c27 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
+  -webkit-flex-wrap: wrap;
+  -ms-flex-wrap: wrap;
+  flex-wrap: wrap;
+  gap: 2rem;
   list-style-type: none;
-  -webkit-box-pack: space-around;
-  -webkit-justify-content: space-around;
-  -ms-flex-pack: space-around;
-  justify-content: space-around;
+  -webkit-box-pack: start;
+  -webkit-justify-content: flex-start;
+  -ms-flex-pack: start;
+  justify-content: flex-start;
   margin: 3rem 0;
   padding: 0;
   -webkit-align-items: center;
@@ -258,15 +263,26 @@ exports[`renders correctly 1`] = `
   align-items: center;
 }
 
-.c27 {
-  width: 48px;
+.c28 {
+  width: 54px;
+  height: 54px;
+  -webkit-flex: 0 0 54px;
+  -ms-flex: 0 0 54px;
+  flex: 0 0 54px;
   margin-right: 0;
 }
 
-.c29 {
+.c30 {
   width: auto;
 }
 
+.c25 {
+  -webkit-transform: rotate(180deg);
+  -ms-transform: rotate(180deg);
+  transform: rotate(180deg);
+  fill: #FFFFFF;
+}
+
 .c10 {
   margin-bottom: 1.5rem;
   color: #FFFFFF;
@@ -326,19 +342,14 @@ exports[`renders correctly 1`] = `
 }
 
 .c16 input {
-  font-family: 'Montserrat',Helvetica,Arial,sans-serif;
-  font-weight: 400;
-  text-transform: inherit;
-  -webkit-letter-spacing: 0;
-  -moz-letter-spacing: 0;
-  -ms-letter-spacing: 0;
-  letter-spacing: 0;
-  font-size: 1.25rem;
+  font-size: 1rem;
   line-height: 1.25rem;
+  font-family: 'Montserrat',Helvetica,Arial,sans-serif;
   background-color: #18181A;
   border-color: transparent;
-  -webkit-transition: background-color 0.2s ease;
-  transition: background-color 0.2s ease;
+  padding-left: 18px;
+  -webkit-transition: background-color 0.2s ease,text-indent 0.18s ease;
+  transition: background-color 0.2s ease,text-indent 0.18s ease;
   border: 1px solid #FFFFFF;
   color: #FFFFFF;
 }
@@ -383,19 +394,93 @@ exports[`renders correctly 1`] = `
 .c24 {
   margin: 0;
   font-family: 'Montserrat',Helvetica,Arial,sans-serif;
+  padding: 1rem;
   border-radius: 0.5rem;
+  overflow: hidden;
+}
+
+.c24 .emailSignUpButtonContent {
+  display: inline-grid;
+  grid-auto-flow: column;
+  grid-template-columns: auto 18px;
+  -webkit-column-gap: 0.5rem;
+  column-gap: 0.5rem;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  line-height: 1;
+}
+
+.c24 .emailSignUpButtonLabel {
+  display: inline-block;
+  -webkit-transform: translateX(13px);
+  -ms-transform: translateX(13px);
+  transform: translateX(13px);
+  -webkit-transition: -webkit-transform 0.22s ease;
+  -webkit-transition: transform 0.22s ease;
+  transition: transform 0.22s ease;
+  will-change: transform;
+}
+
+.c24 .emailSignUpButtonArrow {
+  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;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  width: 18px;
+  height: 18px;
+  opacity: 0;
+  -webkit-transform: translateX(-13px);
+  -ms-transform: translateX(-13px);
+  transform: translateX(-13px);
+  -webkit-transition: opacity 0.22s ease,-webkit-transform 0.22s ease;
+  -webkit-transition: opacity 0.22s ease,transform 0.22s ease;
+  transition: opacity 0.22s ease,transform 0.22s ease;
+  will-change: transform,opacity;
+}
+
+.c24 .emailSignUpButtonArrow svg {
+  fill: currentColor !important;
 }
 
 .c24:hover,
 .c24:focus {
-  background-color: #FFFFFF;
+  background-color: #E1E2E3;
   color: #000000;
 }
 
+.c24:hover .emailSignUpButtonLabel,
+.c24:focus .emailSignUpButtonLabel {
+  -webkit-transform: translateX(0);
+  -ms-transform: translateX(0);
+  transform: translateX(0);
+}
+
+.c24:hover .emailSignUpButtonArrow,
+.c24:focus .emailSignUpButtonArrow {
+  opacity: 1;
+  -webkit-transform: translateX(0);
+  -ms-transform: translateX(0);
+  transform: translateX(0);
+}
+
 .c0 {
   text-align: left;
   background: #18181A;
-  padding-top: 6rem;
+  padding-top: 4.5rem;
 }
 
 .c1 {
@@ -405,7 +490,7 @@ exports[`renders correctly 1`] = `
   height: 100%;
   max-width: 1200px;
   margin: 0 auto;
-  padding: 0 1rem;
+  padding: 0 2rem;
 }
 
 .c7 {
@@ -435,21 +520,21 @@ exports[`renders correctly 1`] = `
   max-width: 100%;
 }
 
-.c25 {
+.c26 {
   margin-bottom: 1rem;
   box-sizing: content-box;
   gap: 1rem;
   display: none;
 }
 
-.c38 {
+.c39 {
   margin-bottom: 1rem;
   box-sizing: content-box;
   gap: 1rem;
   display: block;
 }
 
-.c34 {
+.c35 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -463,31 +548,32 @@ exports[`renders correctly 1`] = `
   gap: 2rem;
 }
 
-.c35 {
+.c36 {
   margin: 0;
 }
 
-.c36 {
+.c37 {
   color: #FFFFFF;
   -webkit-text-decoration: none;
   text-decoration: none;
   font-weight: bold;
+  font-size: 1rem;
 }
 
-.c36:hover,
-.c36:focus {
+.c37:hover,
+.c37:focus {
   -webkit-text-decoration: underline;
   text-decoration: underline;
   -webkit-text-decoration-color: #FFFFFF;
   text-decoration-color: #FFFFFF;
 }
 
-.c37 {
+.c38 {
   color: #FFFFFF;
   font-weight: bold;
 }
 
-.c39 {
+.c40 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -508,7 +594,7 @@ exports[`renders correctly 1`] = `
   align-items: center;
 }
 
-.c40 {
+.c41 {
   margin: 0;
   display: -webkit-box;
   display: -webkit-flex;
@@ -520,37 +606,40 @@ exports[`renders correctly 1`] = `
   align-items: center;
 }
 
-.c40:not(:last-child)::after {
+.c41:not(:last-child)::after {
   content: '|';
   margin-left: 0.5rem;
-  color: #969598;
+  color: #FFFFFF;
+  opacity: 0.8;
 }
 
-.c41 {
+.c42 {
   -webkit-text-decoration: none;
   text-decoration: none;
 }
 
-.c41 > span {
-  color: #969598;
+.c42 > span {
+  color: #FFFFFF;
+  opacity: 0.8;
   -webkit-text-decoration: underline;
   text-decoration: underline;
-  -webkit-text-decoration-color: #969598;
-  text-decoration-color: #969598;
+  -webkit-text-decoration-color: #FFFFFF;
+  text-decoration-color: #FFFFFF;
   font-weight: normal;
-  font-size: 0.75rem;
+  font-size: 0.875rem;
 }
 
-.c41:hover,
-.c41:focus {
+.c42:hover,
+.c42:focus {
   -webkit-text-decoration: underline;
   text-decoration: underline;
-  -webkit-text-decoration-color: #969598;
-  text-decoration-color: #969598;
+  -webkit-text-decoration-color: #FFFFFF;
+  text-decoration-color: #FFFFFF;
 }
 
-.c42 {
+.c43 {
   color: #FFFFFF;
+  opacity: 0.8;
   font-weight: normal;
 }
 
@@ -571,11 +660,10 @@ exports[`renders correctly 1`] = `
   -webkit-justify-content: flex-start;
   -ms-flex-pack: start;
   justify-content: flex-start;
-  margin-top: 1rem;
   margin-bottom: 2rem;
 }
 
-.c31 {
+.c32 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -592,12 +680,11 @@ exports[`renders correctly 1`] = `
   -webkit-justify-content: center;
   -ms-flex-pack: center;
   justify-content: center;
-  margin-top: 0;
   margin-bottom: 0;
   display: none;
 }
 
-.c33 {
+.c34 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -614,12 +701,11 @@ exports[`renders correctly 1`] = `
   -webkit-justify-content: center;
   -ms-flex-pack: center;
   justify-content: center;
-  margin-top: 0;
   margin-bottom: 0;
   display: none;
 }
 
-.c45 {
+.c46 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -636,7 +722,6 @@ exports[`renders correctly 1`] = `
   -webkit-justify-content: flex-start;
   -ms-flex-pack: start;
   justify-content: flex-start;
-  margin-top: 1rem;
   margin-bottom: 2rem;
 }
 
@@ -662,16 +747,18 @@ exports[`renders correctly 1`] = `
   transform: rotate(-14deg);
 }
 
-.c43 {
+.c44 {
   display: block;
   width: 100%;
   height: 100%;
   text-align: left;
+  margin-bottom: 2rem;
 }
 
-.c44 {
-  color: #969598;
-  font-size: 0.75rem;
+.c45 {
+  color: #FFFFFF;
+  opacity: 0.8;
+  font-size: 0.875rem;
   margin-bottom: 0.5rem;
 }
 
@@ -696,7 +783,7 @@ exports[`renders correctly 1`] = `
 }
 
 @media (min-width:1150px) {
-  .c32 {
+  .c33 {
     width: 59px;
   }
 }
@@ -724,7 +811,7 @@ exports[`renders correctly 1`] = `
 }
 
 @media (min-width:740px) {
-  .c26 {
+  .c27 {
     -webkit-box-pack: start;
     -webkit-justify-content: start;
     -ms-flex-pack: start;
@@ -734,8 +821,14 @@ exports[`renders correctly 1`] = `
 }
 
 @media (min-width:740px) {
-  .c27 {
-    margin-right: 1rem;
+  .c28 {
+    margin-right: 0;
+  }
+}
+
+@media (min-width:1024px) {
+  .c25 {
+    fill: #FFFFFF;
   }
 }
 
@@ -779,34 +872,18 @@ exports[`renders correctly 1`] = `
 }
 
 @media (min-width:740px) {
-  .c16 {
-    -webkit-transition: -webkit-transform 0.30000000000000004s cubic-bezier(0.68,-0.8500000000000001,0.265,1.9500000000000002);
-    -webkit-transition: transform 0.30000000000000004s cubic-bezier(0.68,-0.8500000000000001,0.265,1.9500000000000002);
-    transition: transform 0.30000000000000004s cubic-bezier(0.68,-0.8500000000000001,0.265,1.9500000000000002);
-    -webkit-transform-origin: center;
-    -ms-transform-origin: center;
-    transform-origin: center;
-  }
-
-  .c16:hover,
-  .c16:focus {
-    -webkit-transform: scale(1.04);
-    -ms-transform: scale(1.04);
-    transform: scale(1.04);
-  }
-}
-
-@media (min-width:740px) {
-  .c16 input {
-    font-size: 1.25rem;
-    line-height: 1.25rem;
+  .c16 input,
+  .c16 textarea {
+    text-indent: 0;
+    -webkit-transition: text-indent 0.18s ease;
+    transition: text-indent 0.18s ease;
   }
-}
 
-@media (min-width:1024px) {
-  .c16 input {
-    font-size: 1.25rem;
-    line-height: 1.25rem;
+  .c16:hover input,
+  .c16:hover textarea,
+  .c16:focus-within input,
+  .c16:focus-within textarea {
+    text-indent: 4px;
   }
 }
 
@@ -818,21 +895,8 @@ exports[`renders correctly 1`] = `
 
 @media (min-width:740px) {
   .c24 {
-    -webkit-transition: -webkit-transform 0.30000000000000004s cubic-bezier(0.68,-0.8500000000000001,0.265,1.9500000000000002);
-    -webkit-transition: transform 0.30000000000000004s cubic-bezier(0.68,-0.8500000000000001,0.265,1.9500000000000002);
-    transition: transform 0.30000000000000004s cubic-bezier(0.68,-0.8500000000000001,0.265,1.9500000000000002);
-    -webkit-transform-origin: center;
-    -ms-transform-origin: center;
-    transform-origin: center;
     margin: 0;
   }
-
-  .c24:hover,
-  .c24:focus {
-    -webkit-transform: scale(1.02);
-    -ms-transform: scale(1.02);
-    transform: scale(1.02);
-  }
 }
 
 @media (min-width:740px) {
@@ -841,9 +905,16 @@ exports[`renders correctly 1`] = `
   }
 }
 
+@media (min-width:1024px) {
+  .c0 {
+    padding-top: 5.5rem;
+    padding-bottom: 5rem;
+  }
+}
+
 @media (min-width:1024px) {
   .c1 {
-    padding: 0 1rem;
+    padding: 0 9rem;
   }
 }
 
@@ -881,7 +952,7 @@ exports[`renders correctly 1`] = `
 }
 
 @media (min-width:740px) {
-  .c25 {
+  .c26 {
     box-sizing: border-box;
     display: -webkit-box;
     display: -webkit-flex;
@@ -896,7 +967,7 @@ exports[`renders correctly 1`] = `
 }
 
 @media (min-width:740px) {
-  .c38 {
+  .c39 {
     box-sizing: border-box;
     display: none;
     margin-bottom: 1rem;
@@ -908,7 +979,7 @@ exports[`renders correctly 1`] = `
 }
 
 @media (min-width:740px) {
-  .c34 {
+  .c35 {
     -webkit-flex-direction: row;
     -ms-flex-direction: row;
     flex-direction: row;
@@ -920,13 +991,13 @@ exports[`renders correctly 1`] = `
 }
 
 @media (min-width:740px) {
-  .c40 {
+  .c41 {
     display: inline;
   }
 }
 
 @media (min-width:740px) {
-  .c41 > span {
+  .c42 > span {
     -webkit-text-decoration: none;
     text-decoration: none;
   }
@@ -955,7 +1026,7 @@ exports[`renders correctly 1`] = `
 }
 
 @media (min-width:740px) {
-  .c31 {
+  .c32 {
     -webkit-flex: 0 0 auto;
     -ms-flex: 0 0 auto;
     flex: 0 0 auto;
@@ -974,13 +1045,13 @@ exports[`renders correctly 1`] = `
 }
 
 @media (min-width:1024px) {
-  .c31 {
+  .c32 {
     display: none;
   }
 }
 
 @media (min-width:740px) {
-  .c33 {
+  .c34 {
     -webkit-flex: 0 0 auto;
     -ms-flex: 0 0 auto;
     flex: 0 0 auto;
@@ -996,7 +1067,7 @@ exports[`renders correctly 1`] = `
 }
 
 @media (min-width:1024px) {
-  .c33 {
+  .c34 {
     display: -webkit-box;
     display: -webkit-flex;
     display: -ms-flexbox;
@@ -1005,7 +1076,7 @@ exports[`renders correctly 1`] = `
 }
 
 @media (min-width:740px) {
-  .c45 {
+  .c46 {
     -webkit-flex: 0 0 auto;
     -ms-flex: 0 0 auto;
     flex: 0 0 auto;
@@ -1024,11 +1095,17 @@ exports[`renders correctly 1`] = `
 }
 
 @media (min-width:1024px) {
-  .c45 {
+  .c46 {
     display: none;
   }
 }
 
+@media (min-width:1024px) {
+  .c44 {
+    margin-bottom: 0;
+  }
+}
+
 <div>
   <footer
     className="c0"
@@ -1136,7 +1213,34 @@ exports[`renders correctly 1`] = `
                       color="white"
                       type="submit"
                     >
-                      Sign up
+                      <span
+                        className="emailSignUpButtonContent"
+                      >
+                        <span
+                          className="emailSignUpButtonLabel"
+                        >
+                          Sign up
+                        </span>
+                        <span
+                          aria-hidden="true"
+                          className="emailSignUpButtonArrow"
+                        >
+                          <svg
+                            className="c25"
+                            direction="right"
+                            height={18}
+                            viewBox="0 0 96 96"
+                            width={18}
+                            xmlns="http://www.w3.org/2000/svg"
+                          >
+                            <path
+                              d="m90.871,50.776c-0.016,0.016 -0.026,0.036 -0.043,0.052l-32,32c-0.781,0.781 -1.804,1.172 -2.828,1.172s-2.047,-0.391 -2.829,-1.171a4,4 0 0 1 0,-5.657l25.172,-25.172l-70.343,0a4,4 0 0 1 0,-8l70.343,0l-25.172,-25.171a4,4 0 0 1 5.657,-5.657l32,32c0.016,0.016 0.027,0.036 0.043,0.052c0.167,0.172 0.321,0.357 0.455,0.557c0.069,0.104 0.118,0.216 0.176,0.325c0.065,0.121 0.138,0.236 0.191,0.364c0.057,0.137 0.09,0.279 0.13,0.42c0.032,0.109 0.074,0.214 0.097,0.327a4.017,4.017 0 0 1 0,1.568c-0.023,0.113 -0.065,0.217 -0.097,0.327c-0.041,0.141 -0.074,0.283 -0.13,0.42c-0.053,0.128 -0.126,0.243 -0.191,0.364c-0.059,0.109 -0.107,0.221 -0.176,0.325a4.035,4.035 0 0 1 -0.455,0.555z"
+                              id="svg_1"
+                              transform="rotate(-180 47.998626708984375,48.00019836425781) "
+                            />
+                          </svg>
+                        </span>
+                      </span>
                     </button>
                   </div>
                 </div>
@@ -1144,16 +1248,16 @@ exports[`renders correctly 1`] = `
             </form>
           </div>
           <div
-            className="c25"
+            className="c26"
           >
             <ul
-              className="c26"
+              className="c27"
             >
               <li
-                className="c27"
+                className="c28"
               >
                 <a
-                  className="c28 c29"
+                  className="c29 c30"
                   data-test="icon-facebook"
                   href="https://www.facebook.com/comicrelief"
                   rel="noopener noreferrer"
@@ -1162,16 +1266,16 @@ exports[`renders correctly 1`] = `
                 >
                   <img
                     alt="facebook"
-                    className="c30"
+                    className="c31"
                     src="mock.asset"
                   />
                 </a>
               </li>
               <li
-                className="c27"
+                className="c28"
               >
                 <a
-                  className="c28 c29"
+                  className="c29 c30"
                   data-test="icon-instagram"
                   href="https://www.instagram.com/comicrelief"
                   rel="noopener noreferrer"
@@ -1180,16 +1284,16 @@ exports[`renders correctly 1`] = `
                 >
                   <img
                     alt="instagram"
-                    className="c30"
+                    className="c31"
                     src="mock.asset"
                   />
                 </a>
               </li>
               <li
-                className="c27"
+                className="c28"
               >
                 <a
-                  className="c28 c29"
+                  className="c29 c30"
                   data-test="icon-x"
                   href="https://x.com/comicrelief"
                   rel="noopener noreferrer"
@@ -1198,16 +1302,16 @@ exports[`renders correctly 1`] = `
                 >
                   <img
                     alt="x"
-                    className="c30"
+                    className="c31"
                     src="mock.asset"
                   />
                 </a>
               </li>
               <li
-                className="c27"
+                className="c28"
               >
                 <a
-                  className="c28 c29"
+                  className="c29 c30"
                   data-test="icon-tiktok"
                   href="https://www.tiktok.com/@comicrelief"
                   rel="noopener noreferrer"
@@ -1216,16 +1320,16 @@ exports[`renders correctly 1`] = `
                 >
                   <img
                     alt="tiktok"
-                    className="c30"
+                    className="c31"
                     src="mock.asset"
                   />
                 </a>
               </li>
               <li
-                className="c27"
+                className="c28"
               >
                 <a
-                  className="c28 c29"
+                  className="c29 c30"
                   data-test="icon-youtube"
                   href="https://www.youtube.com/channel/UCdF5u0ggeSETozc8fsprjcw"
                   rel="noopener noreferrer"
@@ -1234,7 +1338,7 @@ exports[`renders correctly 1`] = `
                 >
                   <img
                     alt="youtube"
-                    className="c30"
+                    className="c31"
                     src="mock.asset"
                   />
                 </a>
@@ -1243,7 +1347,7 @@ exports[`renders correctly 1`] = `
           </div>
         </div>
         <div
-          className="c31"
+          className="c32"
         >
           <a
             className="c3 c4"
@@ -1254,7 +1358,7 @@ exports[`renders correctly 1`] = `
             type="standard"
           >
             <div
-              className="c32"
+              className="c33"
               rotate={0}
             >
               <img
@@ -1266,7 +1370,7 @@ exports[`renders correctly 1`] = `
           </a>
         </div>
         <div
-          className="c33"
+          className="c34"
         >
           <a
             className="c3 c4"
@@ -1277,7 +1381,7 @@ exports[`renders correctly 1`] = `
             type="standard"
           >
             <div
-              className="c32"
+              className="c33"
               rotate={0}
             >
               <img
@@ -1291,38 +1395,38 @@ exports[`renders correctly 1`] = `
       </div>
       <nav
         aria-label="Primary footer navigation"
-        className="c34"
+        className="c35"
         role="navigation"
       >
         <li
-          className="c35"
+          className="c36"
         >
           <a
-            className="c3 c36"
+            className="c3 c37"
             color="red"
             href="/contact-us"
             target="_self"
             type="standard"
           >
             <span
-              className="c17 c37"
+              className="c17 c38"
             >
               Contact us
             </span>
           </a>
         </li>
         <li
-          className="c35"
+          className="c36"
         >
           <a
-            className="c3 c36"
+            className="c3 c37"
             color="red"
             href="https://www.comicrelief.com/frequently-asked-questions"
             target="_self"
             type="standard"
           >
             <span
-              className="c17 c37"
+              className="c17 c38"
             >
               FAQs
             </span>
@@ -1330,16 +1434,16 @@ exports[`renders correctly 1`] = `
         </li>
       </nav>
       <div
-        className="c38"
+        className="c39"
       >
         <ul
-          className="c26"
+          className="c27"
         >
           <li
-            className="c27"
+            className="c28"
           >
             <a
-              className="c28 c29"
+              className="c29 c30"
               data-test="icon-facebook"
               href="https://www.facebook.com/comicrelief"
               rel="noopener noreferrer"
@@ -1348,16 +1452,16 @@ exports[`renders correctly 1`] = `
             >
               <img
                 alt="facebook"
-                className="c30"
+                className="c31"
                 src="mock.asset"
               />
             </a>
           </li>
           <li
-            className="c27"
+            className="c28"
           >
             <a
-              className="c28 c29"
+              className="c29 c30"
               data-test="icon-instagram"
               href="https://www.instagram.com/comicrelief"
               rel="noopener noreferrer"
@@ -1366,16 +1470,16 @@ exports[`renders correctly 1`] = `
             >
               <img
                 alt="instagram"
-                className="c30"
+                className="c31"
                 src="mock.asset"
               />
             </a>
           </li>
           <li
-            className="c27"
+            className="c28"
           >
             <a
-              className="c28 c29"
+              className="c29 c30"
               data-test="icon-x"
               href="https://x.com/comicrelief"
               rel="noopener noreferrer"
@@ -1384,16 +1488,16 @@ exports[`renders correctly 1`] = `
             >
               <img
                 alt="x"
-                className="c30"
+                className="c31"
                 src="mock.asset"
               />
             </a>
           </li>
           <li
-            className="c27"
+            className="c28"
           >
             <a
-              className="c28 c29"
+              className="c29 c30"
               data-test="icon-tiktok"
               href="https://www.tiktok.com/@comicrelief"
               rel="noopener noreferrer"
@@ -1402,16 +1506,16 @@ exports[`renders correctly 1`] = `
             >
               <img
                 alt="tiktok"
-                className="c30"
+                className="c31"
                 src="mock.asset"
               />
             </a>
           </li>
           <li
-            className="c27"
+            className="c28"
           >
             <a
-              className="c28 c29"
+              className="c29 c30"
               data-test="icon-youtube"
               href="https://www.youtube.com/channel/UCdF5u0ggeSETozc8fsprjcw"
               rel="noopener noreferrer"
@@ -1420,7 +1524,7 @@ exports[`renders correctly 1`] = `
             >
               <img
                 alt="youtube"
-                className="c30"
+                className="c31"
                 src="mock.asset"
               />
             </a>
@@ -1429,38 +1533,38 @@ exports[`renders correctly 1`] = `
       </div>
       <nav
         aria-label="Secondary footer navigation"
-        className="c39"
+        className="c40"
         role="navigation"
       >
         <li
-          className="c40"
+          className="c41"
         >
           <a
-            className="c3 c41"
+            className="c3 c42"
             color="red"
             href="https://www.comicrelief.com/terms-of-use"
             target="_self"
             type="standard"
           >
             <span
-              className="c17 c42"
+              className="c17 c43"
             >
               Terms of use
             </span>
           </a>
         </li>
         <li
-          className="c40"
+          className="c41"
         >
           <a
-            className="c3 c41"
+            className="c3 c42"
             color="red"
             href="https://www.comicrelief.com/privacy-notice"
             target="_self"
             type="standard"
           >
             <span
-              className="c17 c42"
+              className="c17 c43"
             >
               Privacy notice
             </span>
@@ -1468,21 +1572,21 @@ exports[`renders correctly 1`] = `
         </li>
       </nav>
       <div
-        className="c43"
+        className="c44"
       >
         <p
-          className="c17 c44"
+          className="c17 c45"
         >
           © 2026 Comic Relief
         </p>
         <p
-          className="c17 c44"
+          className="c17 c45"
         >
           Comic Relief is the trading name of Charity Projects, a registered charity in England and Wales (326568) and Scotland (SC039730), which is a company limited by guarantee registered in England and Wales (01806414). Registered address: 6th Floor, The White Chapel Building, 10 Whitechapel High Street, London, E1 8QS.
         </p>
       </div>
       <div
-        className="c45"
+        className="c46"
       />
     </div>
   </footer>