@meduza/ui-kit-2 0.2.15 → 0.2.17

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "0.2.15",
+  "version": "0.2.17",
   "license": "MIT",
   "description": "UIKit for Meduza",
   "repository": "https://github.com/meduza-corp/ui-kit-2.git",

package/src/AnnouncementInText/AnnouncementInText.module.css

@@ -15,38 +15,13 @@
   color: #fff;
   border-radius: 8px;
   outline-width: 0;
-  background-color: #000;
+  background: linear-gradient(111.19deg, #ff6214 36.03%, #ff1111 86.11%);
 
   font-family: $secondaryFont;
 
   @media $mobile {
     margin: 25px 0 20px;
-    padding: 20px 35px 20px 20px;
-  }
-}
-
-.root::before,
-.root::after {
-  position: absolute;
-
-  content: '';
-
-  background-repeat: no-repeat;
-}
-
-.root::after {
-  z-index: -1;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
-
-  background-image: url('https://meduza.io/image/attachments/images/007/392/866/original/UjFqeubutYUUyLZMZ157Lg.png');
-  background-position: center top;
-  background-size: 650px auto;
-
-  @media $mobile {
-    background-image: url('https://meduza.io/image/attachments/images/007/392/874/original/P_6ounOgg_NOpzxMrkjVuA.png');
+    padding: 20px 25px 30px 20px;
   }
 }
 
@@ -58,7 +33,8 @@
   margin-bottom: 33px;
 
   @media $mobile {
-    margin-bottom: 40px;
+    max-width: 585px;
+    margin-bottom: 32px;
   }
 }
 
@@ -70,6 +46,7 @@
 
   @media $mobile {
     font-size: 18px;
+    line-height: 23px;
   }
 }
 
@@ -83,7 +60,7 @@
 
   @media $mobile {
     max-width: initial;
-    margin: 0 0 10px;
+    margin: 0 0 12px;
 
     font-size: 32px;
     line-height: 38px;
@@ -97,43 +74,55 @@
 }
 
 .button {
+  position: relative;
+
   display: block;
 
   width: 100%;
-  max-width: 315px;
+  max-width: 432px;
+  height: 39px;
   padding: 13px 0;
 
   text-align: center;
+  text-align: right;
   text-decoration: none;
   letter-spacing: 1px;
   text-transform: uppercase;
 
   color: #000;
-  border-radius: 25px;
-  background-color: #fff;
 
   font-size: 12px;
   font-weight: 600;
   line-height: 16px;
 
   @media $mobile {
-    max-width: 315px;
+    max-width: 432px;
+    height: 39px;
   }
 }
 
+.button span {
+  display: block;
+  margin-left: auto;
+  margin-right: 20px;
+}
+
 .button:hover {
   opacity: 0.75;
 }
 
 .button::after {
   position: absolute;
-  z-index: 20;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
+  top: 50%;
+  right: -40px;
+
+  width: 432px;
+  height: 119px;
 
   content: '';
+  transform: translateY(-50%) translateY(-2px);
+  z-index: -1;
+  background-image: url("data:image/svg+xml,%3Csvg width='432' height='119' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg opacity='.6' filter='url(%23a)'%3E%3Cpath d='M390 59.5s-59.23 17.136-132.26 17.136S125.357 59.5 125.357 59.5s59.231-17.136 132.261-17.136S390 59.5 390 59.5Z' fill='%23fff'/%3E%3C/g%3E%3Cg opacity='.7' filter='url(%23b)'%3E%3Cpath d='M292.5 59.5s-59.646 10.046-133.189 10.046C85.769 69.546 26 59.5 26 59.5s59.646-10.045 133.189-10.045C232.731 49.455 292.5 59.5 292.5 59.5Z' fill='%23fff'/%3E%3C/g%3E%3Cg opacity='.7' filter='url(%23c)'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M125.357 58.318a8.864 8.864 0 0 1 8.864-8.863h244.13a8.864 8.864 0 0 1 0 17.727h-244.13a8.864 8.864 0 0 1-8.864-8.864Z' fill='%23fff'/%3E%3C/g%3E%3Cg filter='url(%23d)'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M202.036 43.525A19.496 19.496 0 0 1 213.218 40h154.496c10.77 0 19.5 8.73 19.5 19.5s-8.73 19.5-19.5 19.5H213.218c-4.001 0-7.905-1.23-11.182-3.525-11.09-7.763-11.09-24.187 0-31.95Z' fill='%23fff'/%3E%3C/g%3E%3Cg filter='url(%23e)'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M202.036 43.525A19.496 19.496 0 0 1 213.218 40h154.496c10.77 0 19.5 8.73 19.5 19.5s-8.73 19.5-19.5 19.5H213.218c-4.001 0-7.905-1.23-11.182-3.525-11.09-7.763-11.09-24.187 0-31.95Z' fill='url(%23f)'/%3E%3C/g%3E%3Cdefs%3E%3Cfilter id='a' x='83.357' y='.364' width='348.643' height='118.273' filterUnits='userSpaceOnUse' color-interpolation-filters='sRGB'%3E%3CfeFlood flood-opacity='0' result='BackgroundImageFix'/%3E%3CfeBlend in='SourceGraphic' in2='BackgroundImageFix' result='shape'/%3E%3CfeGaussianBlur stdDeviation='21' result='effect1_foregroundBlur_2_196'/%3E%3C/filter%3E%3Cfilter id='b' x='0' y='23.454' width='318.5' height='72.091' filterUnits='userSpaceOnUse' color-interpolation-filters='sRGB'%3E%3CfeFlood flood-opacity='0' result='BackgroundImageFix'/%3E%3CfeBlend in='SourceGraphic' in2='BackgroundImageFix' result='shape'/%3E%3CfeGaussianBlur stdDeviation='13' result='effect1_foregroundBlur_2_196'/%3E%3C/filter%3E%3Cfilter id='c' x='101.357' y='25.454' width='309.857' height='65.727' filterUnits='userSpaceOnUse' color-interpolation-filters='sRGB'%3E%3CfeFlood flood-opacity='0' result='BackgroundImageFix'/%3E%3CfeBlend in='SourceGraphic' in2='BackgroundImageFix' result='shape'/%3E%3CfeGaussianBlur stdDeviation='12' result='effect1_foregroundBlur_2_196'/%3E%3C/filter%3E%3Cfilter id='d' x='176.718' y='23' width='227.496' height='73' filterUnits='userSpaceOnUse' color-interpolation-filters='sRGB'%3E%3CfeFlood flood-opacity='0' result='BackgroundImageFix'/%3E%3CfeBlend in='SourceGraphic' in2='BackgroundImageFix' result='shape'/%3E%3CfeGaussianBlur stdDeviation='8.5' result='effect1_foregroundBlur_2_196'/%3E%3C/filter%3E%3Cfilter id='e' x='186.718' y='33' width='207.496' height='53' filterUnits='userSpaceOnUse' color-interpolation-filters='sRGB'%3E%3CfeFlood flood-opacity='0' result='BackgroundImageFix'/%3E%3CfeBlend in='SourceGraphic' in2='BackgroundImageFix' result='shape'/%3E%3CfeGaussianBlur stdDeviation='3.5' result='effect1_foregroundBlur_2_196'/%3E%3C/filter%3E%3ClinearGradient id='f' x1='377' y1='40' x2='319.429' y2='40' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%23fff'/%3E%3Cstop offset='1' stop-color='%23fff' stop-opacity='0'/%3E%3C/linearGradient%3E%3C/defs%3E%3C/svg%3E");
 }
 
 /* Mods */
@@ -158,9 +147,18 @@
   }
 }
 
-.en.root::before {
-  @media $mobileMax {
-    top: -8px;
-    right: -23px;
-  }
+.ru.root .button span {
+  color: transparent;
+  background-image: url("data:image/svg+xml,%3Csvg width='126' height='11' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M10.17 10 7.886 5.352l4.13-4.69H9.035l-2.352 2.8-1.288-2.8H2.68l2.142 4.41L.411 10h2.982l2.618-2.996L7.453 10h2.716ZM12.862 5.926c0 2.562 2.058 4.242 4.732 4.242 3.164 0 5.516-2.422 5.516-5.446 0-2.534-2.058-4.214-4.732-4.214-3.164 0-5.516 2.408-5.516 5.418Zm7.742-1.022c0 1.722-1.232 3.136-2.87 3.136-1.386 0-2.366-.91-2.366-2.268 0-1.722 1.232-3.136 2.87-3.136 1.386 0 2.366.91 2.366 2.268ZM29.403.662h-2.408l-.56 2.562c-.588 2.674.616 3.808 2.814 3.808.77 0 1.512-.196 1.946-.434L30.453 10h2.408L34.905.662h-2.408l-.882 4.004c-.35.14-.84.266-1.358.266-.994 0-1.694-.378-1.456-1.456l.602-2.814ZM41.552 5.03 40.236.662H37.59l2.24 6.692c-.364.462-.686.686-1.26.686-.196 0-.392-.028-.56-.126l-.924 2.072c.322.126.812.182 1.232.182 1.722 0 2.884-.812 3.682-2.002L47.068.662h-2.772L41.552 5.03ZM61.99 10 64.048.662h-8.694L53.296 10h2.408L57.3 2.762h3.878L59.582 10h2.408ZM66.093 5.926c0 2.562 2.058 4.242 4.732 4.242 3.164 0 5.516-2.422 5.516-5.446 0-2.534-2.058-4.214-4.732-4.214-3.164 0-5.516 2.408-5.516 5.418Zm7.742-1.022c0 1.722-1.232 3.136-2.87 3.136-1.386 0-2.366-.91-2.366-2.268 0-1.722 1.232-3.136 2.87-3.136 1.386 0 2.366.91 2.366 2.268ZM88.99 10 91.048.662h-3.43L84.51 5.87 83.71.662H80.45L78.39 10H80.8l1.372-6.216.98 6.216h1.065l3.738-6.216L86.582 10h2.408ZM93.089 5.926c0 2.562 2.058 4.242 4.732 4.242 3.164 0 5.516-2.422 5.516-5.446 0-2.534-2.058-4.214-4.732-4.214-3.164 0-5.516 2.408-5.516 5.418Zm7.742-1.022c0 1.722-1.232 3.136-2.87 3.136-1.386 0-2.366-.91-2.366-2.268 0-1.722 1.232-3.136 2.87-3.136 1.386 0 2.366.91 2.366 2.268ZM109.63.662h-2.408l-.56 2.562c-.588 2.674.616 3.808 2.814 3.808.77 0 1.512-.196 1.946-.434L110.68 10h2.408l2.044-9.338h-2.408l-.882 4.004c-.35.14-.84.266-1.358.266-.994 0-1.694-.378-1.456-1.456l.602-2.814ZM118.81.662 116.766 10h4.634c3.08 0 3.99-2.156 3.99-3.528 0-1.47-1.106-2.674-2.744-2.674h-2.114l.686-3.136h-2.408Zm3.122 5.236c.588 0 .966.322.966.826 0 .7-.602 1.176-1.372 1.176h-1.89l.434-2.002h1.862Z' fill='%23FF4A15'/%3E%3C/svg%3E");
+  width: 126px;
+  height: 11px;
+}
+
+.en.root .button span {
+  color: transparent;
+  background-image: url("data:image/svg+xml,%3Csvg width='121' height='10' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2.173 9 3.937.996H1.873L.11 9h2.064Zm16.802 0L23.031.996h-2.376l-2.388 5.34-.192-5.34h-1.572l-2.544 5.34-.036-5.34h-2.268L12.183 9h2.184l2.316-5.016L16.791 9h2.184Zm12.242 0L29.957.996h-2.592L22.59 9h2.34l.684-1.212h3.312L29.081 9h2.136ZM28.77 6.048h-2.232l1.836-3.312.396 3.312ZM41.25 9 43.011.996h-2.076l-1.068 4.86-2.172-4.86h-2.124L33.808 9h2.064l1.116-5.088L39.256 9h1.992Zm7.294 0L49.9 2.796h2.244l.396-1.8H46l-.408 1.8h2.244L46.48 9h2.064ZM62.68 9l1.356-6.204h2.244l.396-1.8h-6.54l-.408 1.8h2.244L60.616 9h2.064Zm5.434-3.492c0 2.196 1.764 3.636 4.056 3.636 2.712 0 4.728-2.076 4.728-4.668 0-2.172-1.764-3.612-4.056-3.612-2.712 0-4.728 2.064-4.728 4.644Zm6.636-.876c0 1.476-1.056 2.688-2.46 2.688-1.188 0-2.028-.78-2.028-1.944 0-1.476 1.056-2.688 2.46-2.688 1.188 0 2.028.78 2.028 1.944ZM91.463 9 93.228.996h-2.064l-.66 2.988h-3.325l.66-2.988h-2.064L84.011 9h2.065l.708-3.216h3.323L89.4 9h2.063Zm9.311 0 .384-1.74h-3.804l.324-1.44h3.708l.384-1.752h-3.708l.288-1.332h3.804l.384-1.74H96.67L94.906 9h5.868Zm8.478 0 .396-1.8h-3.216L107.8.996h-2.064L103.972 9h5.28Zm5.136 0 .588-2.652h1.908c2.652 0 3.432-1.884 3.432-3.06 0-1.26-.948-2.292-2.484-2.292h-3.744L112.324 9h2.064Zm.984-4.464.396-1.8h1.536c.54 0 .876.312.876.768 0 .588-.456 1.032-1.212 1.032h-1.596Z' fill='%23FF4A15'/%3E%3C/svg%3E");
+  width: 126px;
+  height: 11px;
+  background-size: auto 11px;
+  background-position: center right;
 }

package/src/AnnouncementInText/index.tsx

@@ -20,19 +20,20 @@ export const AnnouncementInText: React.FC<AnnouncementInTextProps> = ({
 
   const data = {
     ru: {
-      title: '&laquo;Медузе&raquo; нужна ваша помощь. Прямо сейчас',
+      title:
+        'Поддержите &laquo;Медузу&raquo;. Сейчас. Это&nbsp;критически важно',
       text:
-        'Каждый день наша редакция продолжает работать&nbsp;&mdash; вопреки давлению государства и&nbsp;только благодаря вам. Спасибо вам огромное! Это очень воодушевляет. &laquo;Медузе&raquo; по-прежнему нужна ваша помощь. Пожалуйста, поддержите нас.',
-      button: 'Жму на кнопку!',
-      href: 'https://mdza.io/_CL3KcERuqM'
+        'Мы&nbsp;готовимся к&nbsp;худшему. Из-за войны с&nbsp;Украиной власти могут начать блокировать независимые СМИ в&nbsp;любой момент. В&nbsp;то&nbsp;же время международные санкции в&nbsp;отношении Центробанка и&nbsp;других российских кредитных организаций создают серьезные риски для нашего краудфандинга. Поэтому мы&nbsp;просим вас помочь нашей редакции. Прямо сейчас. Что важно знать: мы&nbsp;независимое издание, мы&nbsp;работаем только в&nbsp;интересах наших читателей, мы&nbsp;не&nbsp;планируем закрываться. Несмотря ни&nbsp;на&nbsp;что. Спасибо вам!',
+      button: 'Хочу помочь',
+      href: 'https://mdza.io/wd88xQv_-Uw'
     },
 
     en: {
-      title: 'Meduza needs your help — right now.',
+      title: 'Meduza needs your support. We need it now, like never before.',
       text:
-        'To sustain our newsroom in the face of government pressure, we have relied on readers like you. Thank you very much! Your support inspires us, and we need it still! Please consider a contribution to Meduza.',
-      button: 'I’ll pitch in!',
-      href: 'https://mdza.io/DdMs_RWpAS0'
+        'We are preparing for the worst. Due to the war with Ukraine, the Russian authorities could begin blocking the country’s independent media at any moment. International sanctions against the Central Bank and other Russian credit organizations are creating serious risks for own crowdfunding. That’s why we’re asking you to support our newsroom. Right now. What you should know: We are an independent publication. We work only in the interests of our readers. We have no plans to close, come hell or high water. Thank you, everyone!',
+      button: 'I want to help',
+      href: 'https://mdza.io/wd88xQv_-Uw'
     }
   }
 
@@ -58,7 +59,7 @@ export const AnnouncementInText: React.FC<AnnouncementInTextProps> = ({
           target="_blank"
           rel="noreferrer"
         >
-          {localeData.button}
+          <span>{localeData.button}</span>
         </a>
       </div>
     </div>

package/src/DonatesTeaser/DonatesTeaser.module.css

@@ -5,40 +5,68 @@
   z-index: 10;
 
   display: block;
-
-  margin: calc(15rem / 16) -20px;
-  padding: 42px 20px 50px;
   overflow: hidden;
 
-  font-family: $secondaryFont;
+  height: 265px;
+  margin: calc(15rem / 16) -20px;
+  padding: 42px 20px 0;
 
   text-decoration: none;
 
+  outline-width: 0;
   background-color: #000;
 
-  outline-width: 0;
+  font-family: $secondaryFont;
 
   @media $mobile {
+    height: 276px;
     margin: 25px 0 20px;
-    padding: 48px 30px;
+    padding: 43px 30px 0;
 
     border-radius: 8px;
   }
 }
 
+.root::before {
+  position: absolute;
+  bottom: 0;
+  left: 50%;
+
+  width: 562px;
+  height: 265px;
+
+  content: '';
+  transform: translateX(-50%);
+
+  background-image: url('https://meduza.io/image/attachments/images/007/552/572/original/ueAzJ8Fmv5cW0Vq5CFameQ.png');
+  background-size: 562px 265px;
+
+  @media $mobile {
+    width: 650px;
+    height: 276px;
+
+    background-image: url('https://meduza.io/image/attachments/images/007/552/505/original/GHXO5V03ilpgyB6N5WG_IA.png');
+    background-size: 650px 276px;
+  }
+}
+
 .main {
-  max-width: 852px;
+  max-width: 300px;
   margin: 0 auto;
 
-  color: #fff;
+  transform: translateZ(0);
   text-align: center;
 
-  transform: translateZ(0);
+  color: #fff;
+
+  @media $mobile {
+    max-width: 528px;
+  }
 }
 
 .title {
-  font-weight: 700;
   font-size: 20px;
+  font-weight: 700;
   line-height: 25px;
 
   @media $mobile {
@@ -48,14 +76,11 @@
 }
 
 .text {
-  display: block;
-
-  margin: 0;
-
-  font-weight: normal;
-  font-size: 21px;
+  margin: 0 auto;
 
   font-family: $primaryFont;
+  font-size: 21px;
+  font-weight: normal;
   line-height: 25px;
 
   @media $mobile {
@@ -66,8 +91,8 @@
 
 .cta {
   display: flex;
-  flex-flow: column nowrap;
   align-items: center;
+  flex-flow: column nowrap;
   justify-content: center;
 
   margin-top: 45px;
@@ -80,53 +105,39 @@
 .cta a {
   display: block;
 
-  color: #fff;
-  font-weight: 600;
-
-  font-size: 11px;
-  line-height: 16px;
-  letter-spacing: 1px;
-
   text-align: center;
-  text-transform: uppercase;
   text-decoration: none;
 
-  background-color: #000;
-  border-radius: 30px;
+  color: transparent;
+}
+
+.cta::before {
+  position: absolute;
+  left: 50%;
+
+  width: 200px;
+
+  content: '';
+  transform: translateX(-50%);
+
+  background-repeat: no-repeat;
+  background-position: center;
+  background-size: contain;
 }
 
 .cta a::after {
   position: absolute;
+  z-index: 1;
   top: 0;
   right: 0;
   bottom: 0;
   left: 0;
-  z-index: 1;
 
   content: '';
 }
 
-.ctaInner {
-  position: relative;
-
-  display: block;
-
-  width: 192px;
-  padding: 14px 0 13px;
-}
-
-.ctaInner::after {
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  z-index: -1;
-
-  width: 278px;
-  height: 130px;
-  background-image: url("data:image/svg+xml,%3Csvg width='278' height='130' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg filter='url(%23a)'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M234 65c0 11.598-9.402 21-21 21H65c-11.598 0-21-9.402-21-21s9.402-21 21-21h148c11.598 0 21 9.402 21 21Z' fill='url(%23b)'/%3E%3C/g%3E%3Cg filter='url(%23c)'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M234 65c0 11.598-9.402 21-21 21H65c-11.598 0-21-9.402-21-21s9.402-21 21-21h148c11.598 0 21 9.402 21 21Z' fill='url(%23d)'/%3E%3C/g%3E%3Cdefs%3E%3ClinearGradient id='b' x1='230.935' y1='65' x2='44' y2='65' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%23FFBA54'/%3E%3Cstop offset='1' stop-color='%23907EFF'/%3E%3C/linearGradient%3E%3ClinearGradient id='d' x1='230.935' y1='65' x2='44' y2='65' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%23FFBA54'/%3E%3Cstop offset='1' stop-color='%23907EFF'/%3E%3C/linearGradient%3E%3Cfilter id='a' x='0' y='0' width='278' height='130' filterUnits='userSpaceOnUse' color-interpolation-filters='sRGB'%3E%3CfeFlood flood-opacity='0' result='BackgroundImageFix'/%3E%3CfeBlend in='SourceGraphic' in2='BackgroundImageFix' result='shape'/%3E%3CfeGaussianBlur stdDeviation='22' result='effect1_foregroundBlur_5_151'/%3E%3C/filter%3E%3Cfilter id='c' x='15' y='15' width='248' height='100' filterUnits='userSpaceOnUse' color-interpolation-filters='sRGB'%3E%3CfeFlood flood-opacity='0' result='BackgroundImageFix'/%3E%3CfeBlend in='SourceGraphic' in2='BackgroundImageFix' result='shape'/%3E%3CfeGaussianBlur stdDeviation='14.5' result='effect1_foregroundBlur_5_151'/%3E%3C/filter%3E%3C/defs%3E%3C/svg%3E");
-  transform: translate(-50%, -50%);
-
-  content: '';
+.cta span {
+  visibility: hidden;
 }
 
 .center {
@@ -148,3 +159,37 @@
     margin-left: 0;
   }
 }
+
+.ru .cta::before {
+  bottom: 65px;
+
+  height: 8px;
+
+  background-image: url("data:image/svg+xml,%3Csvg width='126' height='11' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M10.17 10 7.886 5.352l4.13-4.69H9.035l-2.352 2.8-1.288-2.8H2.68l2.142 4.41L.411 10h2.982l2.618-2.996L7.453 10h2.716ZM12.862 5.926c0 2.562 2.058 4.242 4.732 4.242 3.164 0 5.516-2.422 5.516-5.446 0-2.534-2.058-4.214-4.732-4.214-3.164 0-5.516 2.408-5.516 5.418Zm7.742-1.022c0 1.722-1.232 3.136-2.87 3.136-1.386 0-2.366-.91-2.366-2.268 0-1.722 1.232-3.136 2.87-3.136 1.386 0 2.366.91 2.366 2.268ZM29.403.662h-2.408l-.56 2.562c-.588 2.674.616 3.808 2.814 3.808.77 0 1.512-.196 1.946-.434L30.453 10h2.408L34.905.662h-2.408l-.882 4.004c-.35.14-.84.266-1.358.266-.994 0-1.694-.378-1.456-1.456l.602-2.814ZM41.552 5.03 40.236.662H37.59l2.24 6.692c-.364.462-.686.686-1.26.686-.196 0-.392-.028-.56-.126l-.924 2.072c.322.126.812.182 1.232.182 1.722 0 2.884-.812 3.682-2.002L47.068.662h-2.772L41.552 5.03ZM61.99 10 64.048.662h-8.694L53.296 10h2.408L57.3 2.762h3.878L59.582 10h2.408ZM66.093 5.926c0 2.562 2.058 4.242 4.732 4.242 3.164 0 5.516-2.422 5.516-5.446 0-2.534-2.058-4.214-4.732-4.214-3.164 0-5.516 2.408-5.516 5.418Zm7.742-1.022c0 1.722-1.232 3.136-2.87 3.136-1.386 0-2.366-.91-2.366-2.268 0-1.722 1.232-3.136 2.87-3.136 1.386 0 2.366.91 2.366 2.268ZM88.99 10 91.048.662h-3.43L84.51 5.87 83.71.662H80.45L78.39 10H80.8l1.372-6.216.98 6.216h1.065l3.738-6.216L86.582 10h2.408ZM93.089 5.926c0 2.562 2.058 4.242 4.732 4.242 3.164 0 5.516-2.422 5.516-5.446 0-2.534-2.058-4.214-4.732-4.214-3.164 0-5.516 2.408-5.516 5.418Zm7.742-1.022c0 1.722-1.232 3.136-2.87 3.136-1.386 0-2.366-.91-2.366-2.268 0-1.722 1.232-3.136 2.87-3.136 1.386 0 2.366.91 2.366 2.268ZM109.63.662h-2.408l-.56 2.562c-.588 2.674.616 3.808 2.814 3.808.77 0 1.512-.196 1.946-.434L110.68 10h2.408l2.044-9.338h-2.408l-.882 4.004c-.35.14-.84.266-1.358.266-.994 0-1.694-.378-1.456-1.456l.602-2.814ZM118.81.662 116.766 10h4.634c3.08 0 3.99-2.156 3.99-3.528 0-1.47-1.106-2.674-2.744-2.674h-2.114l.686-3.136h-2.408Zm3.122 5.236c.588 0 .966.322.966.826 0 .7-.602 1.176-1.372 1.176h-1.89l.434-2.002h1.862Z' fill='%23fff'/%3E%3C/svg%3E");
+
+  @media $mobile {
+    bottom: 70px;
+
+    height: 11px;
+  }
+}
+
+.en .cta::before {
+  bottom: 65px;
+
+  height: 8px;
+
+  background-image: url("data:image/svg+xml,%3Csvg width='136' height='10' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2.408 9.492 4.466.154H2.058L0 9.492h2.408ZM21.344 9.492 26.076.154h-2.772l-2.786 6.23-.224-6.23H18.46l-2.968 6.23-.042-6.23h-2.646l.616 9.338h2.548L18.67 3.64l.126 5.852h2.548ZM35.293 9.492 33.823.154h-3.024l-5.572 9.338h2.73l.798-1.414h3.864l.182 1.414h2.492Zm-2.856-3.444h-2.604l2.142-3.864.462 3.864ZM46.662 9.492 48.72.154h-2.422l-1.246 5.67-2.534-5.67H40.04l-2.058 9.338h2.408l1.302-5.936 2.646 5.936h2.324ZM54.84 9.492l1.582-7.238h2.618l.462-2.1h-7.63l-.476 2.1h2.618l-1.582 7.238h2.408ZM70.666 9.492l1.582-7.238h2.618l.462-2.1h-7.63l-.476 2.1h2.618l-1.582 7.238h2.408ZM76.672 5.418c0 2.562 2.058 4.242 4.732 4.242 3.164 0 5.516-2.422 5.516-5.446C86.92 1.68 84.862 0 82.188 0c-3.164 0-5.516 2.408-5.516 5.418Zm7.742-1.022c0 1.722-1.232 3.136-2.87 3.136-1.386 0-2.366-.91-2.366-2.268 0-1.722 1.232-3.136 2.87-3.136 1.386 0 2.366.91 2.366 2.268ZM103.247 9.492l2.058-9.338h-2.408l-.77 3.486h-3.878l.77-3.486H96.61l-2.058 9.338h2.408l.826-3.752h3.878l-.826 3.752h2.408ZM113.776 9.492l.448-2.03h-4.438l.378-1.68h4.326l.448-2.044h-4.326l.336-1.554h4.438l.448-2.03h-6.846l-2.058 9.338h6.846ZM123.334 9.492l.462-2.1h-3.752L121.64.154h-2.408l-2.058 9.338h6.16ZM128.992 9.492l.686-3.094h2.226c3.094 0 4.004-2.198 4.004-3.57 0-1.47-1.106-2.674-2.898-2.674h-4.368l-2.058 9.338h2.408Zm1.148-5.208.462-2.1h1.792c.63 0 1.022.364 1.022.896 0 .686-.532 1.204-1.414 1.204h-1.862Z' fill='%23fff'/%3E%3C/svg%3E");
+
+  @media $mobile {
+    bottom: 70px;
+
+    height: 10px;
+  }
+}
+
+.ru .text {
+  @media $mobile {
+    display: block;
+  }
+}

package/src/DonatesTeaser/index.tsx

@@ -9,7 +9,10 @@ export const DonatesTeaser: React.FC<DonatesTeaserProps> = ({
   styleContext,
   lang = 'ru'
 }) => {
-  let classNames: ClassNames = [[styles.root, true]]
+  let classNames: ClassNames = [
+    [styles.root, true],
+    [styles[lang], styles[lang]]
+  ]
 
   if (styleContext) {
     classNames = makeStyleContext(classNames, styleContext, styles)
@@ -17,14 +20,15 @@ export const DonatesTeaser: React.FC<DonatesTeaserProps> = ({
 
   const data = {
     ru: {
-      title: '«Медуза» работает для вас',
-      subtitle: 'Нам нужна ваша поддержка',
-      button: 'Да!',
+      title:
+        '«Медуза». Работаем 24/7. И&nbsp;только&nbsp;в&nbsp;интересах читателей',
+      subtitle: 'Нам срочно нужна ваша поддержка',
+      button: 'Хочу помочь',
       href: 'https://mdza.io/WP4YuV4xTEM'
     },
     en: {
-      title: 'Meduza is working for you',
-      subtitle: 'And we need your support',
+      title: 'Meduza, working 24/7, always&nbsp;for our readers',
+      subtitle: 'We&nbsp;need&nbsp;your&nbsp;help like never&nbsp;before',
       button: 'Okay!',
       href: 'https://mdza.io/qopxag5BGec'
     }
@@ -45,7 +49,7 @@ export const DonatesTeaser: React.FC<DonatesTeaserProps> = ({
 
       <div className={styles.cta}>
         <a href={data[lang].href} target="_blank" rel="noreferrer">
-          <span className={styles.ctaInner}>{data[lang].button}</span>
+          <span>{data[lang].button}</span>
         </a>
       </div>
     </div>