@comicrelief/component-library 8.78.0 → 8.80.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@comicrelief/component-library",
   "author": "Comic Relief Engineering Team",
-  "version": "8.78.0",
+  "version": "8.80.0",
   "main": "dist/index.cjs.js",
   "module": "dist/index.es.js",
   "files": [

package/src/components/Atoms/Logos/Logo.js

@@ -1,54 +1,34 @@
 import React from 'react';
-import styled from 'styled-components';
 import PropTypes from 'prop-types';
 
-import zIndex from '../../../theme/shared/zIndex';
-import spacing from '../../../theme/shared/spacing';
+import { Image, LogoWrapper } from './Logo.style';
+
 import crLogo from './assets/cr-logo.svg';
 import srLogo from './assets/sr-logo.svg';
-import srLogoGameOn from './assets/sr-gameon-logo.svg';
 import crLogoPride from './assets/CR_LOGO_PRIDE_KEY_RGB.svg';
-
-const Image = styled.img`
-  object-fit: cover;
-  width: 100%;
-  display: block;
-  height: auto;
-  margin-right: ${spacing('md')};
-`;
-
-const LogoWrapper = styled.div`
-  display: inline-block;
-  ${zIndex('high')}
-  width: ${props => props.$sizeSm};
-  transform: ${props => (props.$rotate ? 'rotate(-14deg)' : 'inherit')};
-  vertical-align: bottom; // height fix
-  @media ${({ theme }) => theme.allBreakpoints('Nav')} {
-    width: ${props => props.$sizeMd};
-  }
-`;
+import crLogoWide from './assets/cr-logo--wide.svg';
 
 const themeSwitcher = theme => {
   switch (theme) {
     case 'Sport Relief':
       return srLogo;
-    case 'Sport Relief Gameon':
-      return srLogoGameOn;
     case 'Pride':
       return crLogoPride;
+    case 'Comic Relief wide':
+      return crLogoWide;
     default:
       return crLogo;
   }
 };
 
 const Logo = ({
-  rotate = false, sizeSm = '51px', sizeMd = '70px', campaign = 'Comic Relief'
+  rotate = false, sizeSm = '51px', sizeMd = '51px', sizeLg = '70px', campaign = 'Comic Relief'
 }) => (
-  <LogoWrapper $rotate={rotate ? 1 : 0} $sizeSm={sizeSm} $sizeMd={sizeMd}>
+  <LogoWrapper $rotate={rotate ? 1 : 0} $sizeSm={sizeSm} $sizeMd={sizeMd} $sizeLg={sizeLg}>
     <Image
       src={themeSwitcher(campaign)}
       alt={
-          campaign === 'Comic Relief' || campaign === 'Pride'
+          campaign === 'Comic Relief' || campaign === 'Pride' || campaign === 'Comic Relief wide'
             ? 'Comic Relief logo'
             : 'Sport Relief logo'
         }
@@ -61,6 +41,7 @@ Logo.propTypes = {
   rotate: PropTypes.bool,
   sizeSm: PropTypes.string,
   sizeMd: PropTypes.string,
+  sizeLg: PropTypes.string,
   campaign: PropTypes.string
 };
 

package/src/components/Atoms/Logos/Logo.style.js

@@ -0,0 +1,29 @@
+import styled from 'styled-components';
+import zIndex from '../../../theme/shared/zIndex';
+import spacing from '../../../theme/shared/spacing';
+
+const Image = styled.img`
+  object-fit: cover;
+  width: 100%;
+  display: block;
+  height: auto;
+  margin-right: ${spacing('md')};
+`;
+
+const LogoWrapper = styled.div`
+  display: inline-block;
+  ${zIndex('high')}
+  width: ${props => props.$sizeSm};
+  transform: ${props => (props.$rotate ? 'rotate(-14deg)' : 'inherit')};
+  vertical-align: bottom; // height fix
+  
+  @media ${({ theme }) => theme.allBreakpoints('M')} {
+    width: ${props => props.$sizeMd};
+  }
+
+  @media ${({ theme }) => theme.allBreakpoints('Nav')} {
+    width: ${props => props.$sizeLg};
+  }
+`;
+
+export { Image, LogoWrapper };

package/src/components/Atoms/Logos/Logo.test.js

@@ -23,6 +23,12 @@ it('renders correctly', () => {
   vertical-align: bottom;
 }
 
+@media (min-width: 740px) {
+  .c0 {
+    width: 51px;
+  }
+}
+
 @media (min-width: 1150px) {
   .c0 {
     width: 70px;

package/src/components/Atoms/Logos/LogoExample.jsx

@@ -1,6 +1,5 @@
 import React from 'react';
 import Logo from './Logo';
-import styled from 'styled-components';
 import LogoNav2026 from '../LogoNav2026/_LogoNav2026';
 import { ExampleContainer } from '../../../demos/SharedStyles';
 
@@ -9,22 +8,17 @@ export default function LogoExample() {
     <>
       <ExampleContainer>
         <h3>Comic Relief Logo</h3>
-        <Logo rotate={false} sizeSm="50px" sizeMd="60px" />
+        <Logo rotate={false} sizeSm="50px" sizeMd="50px" sizeLg="60px" />
       </ExampleContainer>
 
       <ExampleContainer>
         <h3>Sport Relief Logo</h3>
-        <Logo rotate={false} sizeSm="50px" sizeMd="60px" campaign="Sport Relief" />
-      </ExampleContainer>
-
-      <ExampleContainer>
-        <h3>Sport Relief Game On Logo</h3>
-        <Logo rotate={false} sizeSm="50px" sizeMd="60px" campaign="Sport Relief Gameon" />
+        <Logo rotate={false} sizeSm="50px" sizeMd="50px" sizeLg="60px" campaign="Sport Relief" />
       </ExampleContainer>
 
       <ExampleContainer>
         <h3>Logo for Nav 2026 rebuild</h3>
-        <LogoNav2026/>
+        <LogoNav2026 />
       </ExampleContainer>
     </>
   );

package/src/components/Atoms/Logos/assets/cr-logo--wide.svg

@@ -0,0 +1,14 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg viewBox="0 0 813 124" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M28.9 83.3C28.9 94 30.2 100.9 38.5 100.9C46.8 100.9 48.1 94 48.1 83.3V70.3H75.5V75.9C75.5 104.1 66.5 123.8 39.1 123.8C10.9 123.8 0 104.8 0 70.2V53.7C0 19 10.9 0.0999756 39.1 0.0999756C66.5 0.0999756 75.5 19.8 75.5 48V53.6H48.1V40.6C48.1 29.9 46.8 23 38.5 23C30.2 23 28.9 29.9 28.9 40.6V83.3Z" fill="#E52630"/>
+<path d="M160 69.3C160 104 149.1 123.7 120.9 123.7C92.6998 123.7 81.7998 104 81.7998 69.3V54.4C81.7998 19.7 92.6998 0 120.9 0C149.1 0 160 19.7 160 54.4V69.3ZM111 82.9C111 93.6 112.7 100.9 121 100.9C129.2 100.9 131 93.6 131 82.9V40.8C131 30.1 129.3 22.8 121 22.8C112.8 22.8 111 30.1 111 40.8V82.9Z" fill="#E52630"/>
+<path d="M217.7 62.8H218.5L230 1.5H265.4V122.2H239.3V53.4H238.5L225.3 122.2H207.7L194.1 53.4H193.3V122.2H168.6V1.5H204.8L217.7 62.8Z" fill="#E52630"/>
+<path d="M304.3 1.5V122.2H276.1V1.5H304.3Z" fill="#E52630"/>
+<path d="M342.1 83.3C342.1 94 343.4 100.9 351.7 100.9C359.9 100.9 361.3 94 361.3 83.3V70.3H388.7V75.9C388.7 104.1 379.7 123.8 352.3 123.8C324.1 123.8 313.2 104.8 313.2 70.2V53.7C313.2 19 324.1 0.0999756 352.3 0.0999756C379.7 0.0999756 388.7 19.8 388.7 48V53.6H361.3V40.6C361.3 29.9 360 23 351.7 23C343.5 23 342.1 29.9 342.1 40.6V83.3Z" fill="#E52630"/>
+<path d="M472.2 122.2C470.7 117.6 470.3 110.5 469.5 96C468.9 84.5 466.1 78.6 457.2 78.6H453.6V122.3H425.8V1.5H460.5C487.5 1.5 499.6 15.7 499.6 37.1C499.6 56.1 491 65.5 478.7 67.6C491.3 70.5 495.6 79.5 496.5 94.6C497.5 110.5 497.3 116.6 499.9 122.2H472.2ZM456.3 56.3C467.6 56.3 472 52.7 472 40.4C472 29.5 467.6 24.1 456.3 24.1H453.6V56.3H456.3Z" fill="#E52630"/>
+<path d="M569 122.2H507.9V1.5H569V24.7H535.5V49.4H560.4V72.4H535.5V99H569V122.2Z" fill="#E52630"/>
+<path d="M605.6 1.5V99H638.2V122.2H577.5V1.5H605.6Z" fill="#E52630"/>
+<path d="M673.5 1.5V122.2H645.4V1.5H673.5Z" fill="#E52630"/>
+<path d="M745.2 122.2H684.1V1.5H745.2V24.7H711.7V49.4H736.6V72.4H711.7V99H745.2V122.2Z" fill="#E52630"/>
+<path d="M753.7 122.2V1.5H812.5V24.7H781.9V52.7H804.3V75.5H781.9V122.2H753.7Z" fill="#E52630"/>
+</svg>

package/src/components/Molecules/LogoLinked/LogoLinked.js

@@ -1,60 +1,98 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import styled from 'styled-components';
 
 import Logo from '../../Atoms/Logos/Logo';
-import { logoRotateAnimation } from '../../../theme/shared/animations';
-
-const TitleLabel = styled.span`
-  line-height: 0;
-  font-size: 0;
-  color: transparent;
-`;
-
-const LogoLink = styled.a`
-  ${({ animateRotate }) => logoRotateAnimation(animateRotate)}
-`;
+import { TitleLabel, LogoLink } from './LogoLinked.style';
 
 const LogoLinked = ({
-  sizeSm, sizeMd,
-  campaign = 'Comic Relief', title = 'Go to Comic Relief homepage', url = '/', animateRotate = false
+  sizeSm, sizeMd, sizeLg,
+  campaign = 'Comic Relief',
+  title = 'Go to Comic Relief homepage',
+  url = '/',
+  animateRotate = false,
+  animatePulse = false,
+  newTab = false
 }) => {
-  if (campaign === 'Sport Relief Gameon') {
+  if (campaign === 'Sport Relief') {
     return (
-      <>
-        <LogoLink href={url} title="Go to Comic Relief homepage" animateRotate={animateRotate}>
-          <Logo rotate sizeSm="50px" sizeMd="60px" campaign="Comic Relief" title="Go to Comic Relief homepage" />
-          <TitleLabel>Go to Comic Relief homepage</TitleLabel>
-        </LogoLink>
-        <LogoLink href="/sportrelief/" title="Go to Sport Relief homepage" animateRotate={animateRotate}>
-          <Logo sizeSm="100px" sizeMd="120px" campaign="Sport Relief Gameon" title="Go to Sport Relief homepage" />
-          <TitleLabel>Go to Sport Relief homepage</TitleLabel>
-        </LogoLink>
-      </>
+      <LogoLink
+        href={url}
+        title="Go to Sport Relief homepage"
+        target={newTab ? '_blank' : '_self'}
+        animateRotate={animateRotate}
+      >
+        <Logo
+          rotate={false}
+          campaign="Sport Relief"
+          title="Sport Relief in homepage"
+          sizeSm={sizeSm}
+          sizeMd={sizeMd}
+          sizeLg={sizeLg}
+        />
+        <TitleLabel>Go to Sport Relief homepage</TitleLabel>
+      </LogoLink>
     );
   }
 
-  if (campaign === 'Sport Relief') {
+  if (campaign === 'Pride') {
     return (
-      <LogoLink href={url} title="Go to Sport Relief homepage" animateRotate={animateRotate}>
-        <Logo rotate={false} campaign="Sport Relief" title="Sport Relief in homepage" />
-        <TitleLabel>Go to Sport Relief homepage</TitleLabel>
+      <LogoLink
+        href={url}
+        title="Go to Comic Relief homepage"
+        target={newTab ? '_blank' : '_self'}
+        animateRotate={animateRotate}
+      >
+        <Logo
+          rotate={false}
+          campaign="Pride"
+          title="Go to Comic Relief homepage"
+          sizeSm={sizeSm}
+          sizeMd={sizeMd}
+          sizeLg={sizeLg}
+        />
+        <TitleLabel>Go to Comic Relief homepage</TitleLabel>
       </LogoLink>
     );
   }
 
-  if (campaign === 'Pride') {
+  // Our 'modern' alt, as used within the CRcom header nav
+  // (which exists 100% within that codebase, for now):
+  if (campaign === 'Comic Relief wide') {
     return (
-      <LogoLink href={url} title="Go to Comic Relief homepage" animateRotate={animateRotate}>
-        <Logo rotate={false} campaign="Pride" title="Go to Comic Relief homepage" sizeSm={sizeSm} sizeMd={sizeMd} />
+      <LogoLink
+        href={url}
+        title="Go to Comic Relief homepage"
+        target={newTab ? '_blank' : '_self'}
+        animatePulse={animatePulse}
+      >
+        <Logo
+          rotate={false}
+          campaign="Comic Relief wide"
+          title="Go to Comic Relief homepage"
+          sizeSm={sizeSm}
+          sizeMd={sizeMd}
+          sizeLg={sizeLg}
+        />
         <TitleLabel>Go to Comic Relief homepage</TitleLabel>
       </LogoLink>
     );
   }
 
   return (
-    <LogoLink href={url} title={title} animateRotate={animateRotate}>
-      <Logo rotate={false} campaign="Comic Relief" title={title} sizeSm={sizeSm} sizeMd={sizeMd} />
+    <LogoLink
+      href={url}
+      title={title}
+      target={newTab ? '_blank' : '_self'}
+      animateRotate={animateRotate}
+    >
+      <Logo
+        rotate={false}
+        campaign="Comic Relief"
+        title={title}
+        sizeSm={sizeSm}
+        sizeMd={sizeMd}
+        sizeLg={sizeLg}
+      />
       <TitleLabel>{title}</TitleLabel>
     </LogoLink>
   );
@@ -63,10 +101,13 @@ const LogoLinked = ({
 LogoLinked.propTypes = {
   campaign: PropTypes.string,
   animateRotate: PropTypes.bool,
+  animatePulse: PropTypes.bool,
   title: PropTypes.string,
   url: PropTypes.string,
   sizeSm: PropTypes.string,
-  sizeMd: PropTypes.string
+  sizeMd: PropTypes.string,
+  sizeLg: PropTypes.string,
+  newTab: PropTypes.bool
 };
 
 export default LogoLinked;

package/src/components/Molecules/LogoLinked/LogoLinked.style.js

@@ -0,0 +1,27 @@
+import styled, { css } from 'styled-components';
+import { logoRotateAnimation, pulseInAnimation, pulseOutAnimation } from '../../../theme/shared/animations';
+
+const TitleLabel = styled.span`
+  line-height: 0;
+  font-size: 0;
+  color: transparent;
+`;
+
+const LogoLink = styled.a`
+  ${({ animateRotate }) => logoRotateAnimation(animateRotate)}
+  
+  ${({ animatePulse }) => animatePulse && css`
+    img {
+        ${pulseOutAnimation};
+    }
+        
+    &:hover,
+    &:focus {
+        img {
+            ${pulseInAnimation};
+        }
+    }
+  `}
+`;
+
+export { TitleLabel, LogoLink };

package/src/components/Molecules/LogoLinked/LogoLinkedExample.jsx

@@ -7,27 +7,50 @@ export default function LogoLinkedExample() {
     <>
       <ExampleContainer>
         <h3>Comic Relief (default)</h3>
-        <LogoLinked sizeSm="50px" sizeMd="60px" />
+        <LogoLinked sizeSm="50px" sizeMd="50px" sizeLg="60px" />
       </ExampleContainer>
 
       <ExampleContainer>
-        <h3>Sport Relief</h3>
-        <LogoLinked campaign="Sport Relief" sizeSm="50px" sizeMd="60px" />
+        <h3>Comic Relief wide, w/pulse animation and new tab functionality</h3>
+        <LogoLinked
+          campaign="Comic Relief wide"
+          sizeSm="150px"
+          sizeMd="150px"
+          sizeLg="150px"
+          url="https://www.comicrelief.com"
+          newTab
+          animatePulse
+        />
       </ExampleContainer>
 
       <ExampleContainer>
-        <h3>Sport Relief Gameon</h3>
-        <LogoLinked campaign="Sport Relief Gameon" sizeSm="50px" sizeMd="60px" />
+        <h3>Sport Relief</h3>
+        <LogoLinked
+          campaign="Sport Relief"
+          sizeSm="50px"
+          sizeMd="50px"
+          sizeLg="60px"
+        />
       </ExampleContainer>
 
       <ExampleContainer>
         <h3>Pride</h3>
-        <LogoLinked campaign="Pride" sizeSm="50px" sizeMd="60px" />
+        <LogoLinked
+          campaign="Pride"
+          sizeSm="50px"
+          sizeMd="50px"
+          sizeLg="60px"
+        />
       </ExampleContainer>
 
       <ExampleContainer>
-        <h3>With rotation animation</h3>
-        <LogoLinked sizeSm="50px" sizeMd="60px" animateRotate />
+        <h3>Comic Relief (default) w/rotation animation</h3>
+        <LogoLinked
+          sizeSm="50px"
+          sizeMd="50px"
+          sizeLg="60px"
+          animateRotate
+        />
       </ExampleContainer>
     </>
   );

package/src/components/Organisms/Footer/Footer.js

@@ -35,7 +35,7 @@ const Footer = ({
             </SocialIconWrapper>
 
             <Brand href="/" title={`Go to ${campaign} homepage`} data-test="footer-logo">
-              <Logo sizeSm="48px" sizeMd="72px" rotate={false} campaign={campaign} />
+              <Logo sizeSm="48px" sizeMd="48px" sizeLg="72px" rotate={false} campaign={campaign} />
             </Brand>
           </FooterBranding>
           <FooterNav navItems={navItems} overrideallowList={overrideallowList} {...rest} />

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

@@ -403,6 +403,12 @@ exports[`renders correctly 1`] = `
   }
 }
 
+@media (min-width: 740px) {
+  .c10 {
+    width: 48px;
+  }
+}
+
 @media (min-width: 1150px) {
   .c10 {
     width: 72px;

package/src/components/Organisms/FooterNew/FooterNew.js

@@ -80,7 +80,7 @@ const FooterNew = ({
 
           <LogosContainer $mobileOnly>
             <Brand href="/" title={`Go to ${campaign} homepage`} $animateRotate={animateRotate}>
-              <Logo sizeSm="59px" sizeMd="72px" rotate={false} campaign={campaign} />
+              <Logo sizeSm="59px" sizeMd="59px" sizeLg="72px" rotate={false} campaign={campaign} />
             </Brand>
           </LogosContainer>
 
@@ -110,12 +110,12 @@ const FooterNew = ({
             </TopSectionLeft>
             <LogosContainer $desktopOnly $showCRLogoOnly>
               <Brand href="/" title={`Go to ${campaign} homepage`} $animateRotate={animateRotate}>
-                <Logo sizeSm="59px" sizeMd="59px" rotate={false} campaign={campaign} />
+                <Logo sizeSm="59px" sizeMd="59px" sizeLg="59px" rotate={false} campaign={campaign} />
               </Brand>
             </LogosContainer>
             <LogosContainer $desktopOnly $showPairedLogos>
               <Brand href="/" title={`Go to ${campaign} homepage`} $animateRotate={animateRotate}>
-                <Logo sizeSm="59px" sizeMd="59px" rotate={false} campaign={campaign} />
+                <Logo sizeSm="59px" sizeMd="59px" sizeLg="59px" rotate={false} campaign={campaign} />
               </Brand>
               {showFundraisingRegulatorLogo && <FundraisingRegulatorLogo animateOnHover noMargin />}
             </LogosContainer>

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

@@ -625,12 +625,24 @@ exports[`does not render copyright text when not supplied 1`] = `
   }
 }
 
+@media (min-width: 740px) {
+  .c5 {
+    width: 59px;
+  }
+}
+
 @media (min-width: 1150px) {
   .c5 {
     width: 72px;
   }
 }
 
+@media (min-width: 740px) {
+  .c33 {
+    width: 59px;
+  }
+}
+
 @media (min-width: 1150px) {
   .c33 {
     width: 59px;
@@ -1953,12 +1965,24 @@ exports[`renders correctly 1`] = `
   }
 }
 
+@media (min-width: 740px) {
+  .c5 {
+    width: 59px;
+  }
+}
+
 @media (min-width: 1150px) {
   .c5 {
     width: 72px;
   }
 }
 
+@media (min-width: 740px) {
+  .c33 {
+    width: 59px;
+  }
+}
+
 @media (min-width: 1150px) {
   .c33 {
     width: 59px;

package/src/components/Organisms/Header2025/Header2025.js

@@ -18,7 +18,8 @@ const Header2025 = ({
         <LogoLinked
           campaign={campaign}
           sizeSm="50px"
-          sizeMd="55px"
+          sizeMd="50px"
+          sizeLg="55px"
           animateRotate
         />
       </Brand>

package/src/components/Atoms/Logos/assets/sr-gameon-logo.svg

@@ -1 +0,0 @@
-<svg id="LOGO" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 510.46 230.57"><defs><style>.cls-1{fill:#3a4972}.cls-2{fill:#e62731}.cls-3{fill:#fff}</style></defs><title>SR+IGO_LOGO_RGB</title><path class="cls-1" d="M239.92 32.69v55.36H227V32.69zM255.66 88.05V43.32h-10.55V32.69h34.19v10.63h-10.81v44.73zM284.58 32.69h12.56v10.63c0 7.56-3.95 10.9-12.56 11.16V48.6c3.78-.09 5.62-1.23 5.71-4.66h-5.71zM312.53 69.34v2.19c0 4.13 1.75 6.86 5.18 6.86 3 0 4.57-1.67 4.57-4.75s-2-4.39-5.36-6.24l-4.66-2.55c-5.88-3.25-11-7.2-11-16.69 0-9.85 6.41-16.17 15.9-16.17 10.11 0 15.91 5.8 15.91 17.13v2.2h-11.31V49c0-4.48-1.41-6.67-4.58-6.67-2.72 0-4.13 1.93-4.13 4.92 0 2.81 1.59 4.57 4.22 6l5.19 2.82c7.29 4 11.68 7.82 11.68 16.43 0 10.72-6.59 16.26-16.43 16.26s-16.52-5.45-16.52-17.32v-2.1zM377.39 88.05l-1-4.92c-1.4 3.78-5.36 5.63-9.75 5.63-11 0-15.64-8.7-15.64-24.61v-7.56c0-15.9 5.18-24.6 17.84-24.6S386 39.9 386 52.81v1.41h-12.56v-3.69c0-4.92-.79-8.09-4.57-8.09s-4.57 3.17-4.57 8.09V70c0 4.92 1.05 8.09 4.74 8.09s4.75-3.17 4.75-8.09v-.79h-4v-9.72H386v28.56zM417.3 32.69l11.95 55.36h-12.83l-1.85-9.84h-10.89l-1.94 9.84H390l11.95-55.36zm-11.78 35.77h7.3l-3.34-18.28h-.35zM455.89 60.81h.35l5.27-28.12h16.26v55.36h-11.95V56.51h-.35l-6.07 31.54h-8.08l-6.24-31.54h-.35v31.54h-11.34V32.69H450zM511.88 88.05h-28V32.69h28v10.63H496.5v11.34h11.42v10.55H496.5v12.21h15.38zM256.36 223.11a65.22 65.22 0 0 1-35.71-59.33 65.22 65.22 0 0 1 35.71-59.32q16.74-8.74 37.75-8.74t37.75 8.74a65.22 65.22 0 0 1 35.71 59.32 65.22 65.22 0 0 1-35.71 59.33q-16.74 8.73-37.75 8.74t-37.75-8.74zm52.54-30.78A28.53 28.53 0 0 0 319.4 181a36.07 36.07 0 0 0 3.91-17.21 36.08 36.08 0 0 0-3.91-17.2 28.66 28.66 0 0 0-10.5-11.34 29.32 29.32 0 0 0-29.57 0 28.68 28.68 0 0 0-10.51 11.34 36.2 36.2 0 0 0-3.91 17.2 36.18 36.18 0 0 0 3.91 17.21 28.55 28.55 0 0 0 10.51 11.34 29.32 29.32 0 0 0 29.57 0zM511.88 98.7v130.17H475.8l-49.47-59.13v59.13h-42.77V98.7h36.08l49.47 59.13V98.7z" transform="translate(-1.42 -1.42)"/><path class="cls-2" d="M230.22 96.69A115.27 115.27 0 1 1 96.69 3.19a115.27 115.27 0 0 1 133.53 93.5" transform="translate(-1.42 -1.42)"/><path class="cls-3" d="M45.32 109.66l.33 1.91c.64 3.59 2.58 5.69 5.56 5.16 2.6-.45 3.72-2.15 3.25-4.82s-2.43-3.51-5.62-4.6l-4.44-1.51c-5.62-1.92-10.65-4.58-12.11-12.83-1.51-8.55 3.1-15 11.35-16.49 8.79-1.55 14.72 2.6 16.45 12.46l.34 1.91-9.85 1.73-.35-2c-.69-3.9-2.25-5.59-5-5.11-2.37.42-3.3 2.32-2.84 4.91S44.47 94.13 47 95l4.93 1.65c7 2.32 11.36 5 12.68 12.5 1.65 9.32-3.23 15.14-11.79 16.65s-15.2-2.2-17-12.52l-.32-1.83zM80.58 120.22l-11.16 2-8.48-48.16 13.6-2.4C85.08 69.8 91.07 74.73 92.89 85s-2.11 17.12-12.66 19l-2.44.43zm-3.25-25.11C82 94.29 83 92.23 82.05 87s-2.56-7-7.22-6.13l-1.15.21 2.51 14.21zM127.59 90.19c2.44 13.83-.53 22.47-11.76 24.45s-17-5.12-19.41-19l-1-6c-2.44-13.83.52-22.47 11.76-24.45s17 5.12 19.41 19zM109 99.06c.75 4.28 2 7.06 5.23 6.48s3.47-3.6 2.71-7.88l-3-16.8c-.76-4.28-2-7.07-5.24-6.49s-3.43 3.63-2.7 7.89zM152.39 107.56c-.93-1.73-1.58-4.53-2.91-10.28-1-4.54-2.61-6.71-6.12-6.09l-1.45.26 3.09 17.42-11.08 1.95-8.48-48.13 13.82-2.44c10.78-1.9 16.59 2.9 18.09 11.46 1.34 7.56-1.44 11.91-6.18 13.62 5.24.25 7.56 3.55 9 9.52 1.5 6.27 1.86 8.73 3.32 10.76zm-11-25.16c4.5-.8 6-2.56 5.14-7.45-.77-4.35-2.9-6.18-7.41-5.39l-1.07.19 2.27 12.83zM173.55 103.83l-6.85-38.89-9.17 1.62-1.63-9.25 29.72-5.24 1.63 9.25-9.4 1.68 6.86 38.89zM67.46 178.49c-.94-1.72-1.59-4.52-2.92-10.27-1-4.55-2.6-6.71-6.11-6.09l-1.45.25 3.07 17.42L49 181.75l-8.49-48.13 13.83-2.43c10.77-1.9 16.58 2.9 18.09 11.46 1.33 7.56-1.44 11.91-6.18 13.61 5.24.26 7.55 3.55 9 9.52 1.5 6.28 1.85 8.73 3.32 10.76zm-11-25.16c4.51-.79 6-2.55 5.15-7.44-.77-4.36-2.9-6.19-7.41-5.39l-1.07.19 2.26 12.83zM105.35 171.81L81 176.11 72.49 128l24.37-4.3 1.63 9.25-13.37 2.35 1.74 9.86 9.93-1.75 1.62 9.17-9.93 1.75 1.87 10.62 13.37-2.36zM111 121.19l6.85 38.89 13-2.29 1.63 9.24-24.22 4.27-8.48-48.13zM137.81 116.46l8.49 48.13-11.23 2-8.49-48.13zM174 159.7l-24.34 4.3-8.49-48.13 24.38-4.3 1.63 9.25-13.37 2.35 1.73 9.86 9.94-1.75 1.61 9.17-9.93 1.75 1.84 10.62 13.37-2.36zM176.94 159.19l-8.49-48.13 23.45-4.14 1.63 9.25-12.22 2.15 2 11.16 8.93-1.58 1.61 9.09-8.94 1.58 3.29 18.64z" transform="translate(-1.42 -1.42)"/></svg>