1 files changed, 322 insertions, 62 deletions

diff --git a/plugins/jetpack/css/jetpack-recommendations-banner-rtl.css b/plugins/jetpack/css/jetpack-recommendations-banner-rtl.css
index 360a9f66..c2cd977c 100644
--- a/plugins/jetpack/css/jetpack-recommendations-banner-rtl.css
+++ b/plugins/jetpack/css/jetpack-recommendations-banner-rtl.css
@@ -1,16 +1,247 @@
-/*!
-* Do not modify this file directly.  It is compiled SASS code.
-*/
+@charset "UTF-8";
+:root {
+  --font-title-large: 36px;
+  --font-title-small: 24px;
+  --font-body: 16px;
+  --font-label: 12px;
+  --jp-black: #000000;
+  --jp-black-80: #2c3338;
+  --jp-white: #ffffff;
+  --jp-white-off: #f9f9f6;
+  --jp-gray: #dcdcde;
+  --jp-gray-0: #F6F7F7;
+  --jp-gray-5: #dcdcde;
+  --jp-gray-10: #c3c4c7;
+  --jp-gray-20: #A7AAAD;
+  --jp-gray-30: #8c8f94;
+  --jp-gray-40: #787C82;
+  --jp-gray-50: #646970;
+  --jp-gray-60: #50575E;
+  --jp-gray-70: #3c434a;
+  --jp-gray-80: #2C3338;
+  --jp-gray-90: #1d2327;
+  --jp-gray-100: #101517;
+  --jp-gray-off: #e2e2df;
+  --jp-yellow-10: #f2cf75;
+  --jp-red-0: #F7EBEC;
+  --jp-red-50: #D63638;
+  --jp-red-60: #B32D2E;
+  --jp-red-80: #8A2424;
+  --jp-red: #d63639;
+  --jp-pink: #C9356E;
+  --jp-green-0: #f0f2eb;
+  --jp-green-5: #d0e6b8;
+  --jp-green-10: #9dd977;
+  --jp-green-20: #64ca43;
+  --jp-green-30: #2fb41f;
+  --jp-green-40: #069e08;
+  --jp-green-50: #008710;
+  --jp-green-60: #007117;
+  --jp-green-70: #005b18;
+  --jp-green-80: #004515;
+  --jp-green-90: #003010;
+  --jp-green-100: #001c09;
+  --jp-green: #069e08;
+  --jp-green-primary: var( --jp-green-40 );
+  --jp-green-secondary: var( --jp-green-30 );
+  --jp-border-radius: 4px;
+  --jp-menu-border-height: 1px;
+  --jp-underline-thickness: 2px;
+}
+
+/********* Mixins *********/
+/********* Generic styles *********/
+* {
+  box-sizing: border-box;
+}
+
+body {
+  min-height: 100%;
+  margin: 0;
+  padding: 0;
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen-Sans", "Ubuntu", "Cantarell", "Helvetica Neue", sans-serif;
+}
+
+.jp-wrap {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  max-width: 1128px;
+  margin: 0 auto;
+}
+
+.jp-row {
+  display: grid;
+  grid-gap: 24px;
+  grid-template-columns: repeat(4, 1fr);
+  width: 100%;
+  margin: 0 16px;
+}
+@media (min-width: 600px) {
+  .jp-row {
+    grid-template-columns: repeat(8, 1fr);
+    margin: 0 18px;
+  }
+}
+@media (min-width: 960px) {
+  .jp-row {
+    grid-template-columns: repeat(12, 1fr);
+    max-width: 1128px;
+    margin: 0 24px;
+  }
+}
+
+.sm-col-span-1 {
+  grid-column-end: span 1;
+}
+
+.sm-col-span-2 {
+  grid-column-end: span 2;
+}
+
+.sm-col-span-3 {
+  grid-column-end: span 3;
+}
+
+.sm-col-span-4 {
+  grid-column-end: span 4;
+}
+
+@media (min-width: 600px) {
+  .md-col-span-1 {
+    grid-column-end: span 1;
+  }
+
+  .md-col-span-2 {
+    grid-column-end: span 2;
+  }
+
+  .md-col-span-3 {
+    grid-column-end: span 3;
+  }
+
+  .md-col-span-4 {
+    grid-column-end: span 4;
+  }
+
+  .md-col-span-5 {
+    grid-column-end: span 5;
+  }
+
+  .md-col-span-6 {
+    grid-column-end: span 6;
+  }
+
+  .md-col-span-7 {
+    grid-column-end: span 7;
+  }
+
+  .md-col-span-8 {
+    grid-column-end: span 8;
+  }
+}
+@media (min-width: 960px) {
+  .lg-col-span-1 {
+    grid-column-end: span 1;
+  }
+
+  .lg-col-span-2 {
+    grid-column-end: span 2;
+  }
+
+  .lg-col-span-3 {
+    grid-column-end: span 3;
+  }
+
+  .lg-col-span-4 {
+    grid-column-end: span 4;
+  }
+
+  .lg-col-span-5 {
+    grid-column-end: span 5;
+  }
+
+  .lg-col-span-6 {
+    grid-column-end: span 6;
+  }
+
+  .lg-col-span-7 {
+    grid-column-end: span 7;
+  }
+
+  .lg-col-span-8 {
+    grid-column-end: span 8;
+  }
+
+  .lg-col-span-9 {
+    grid-column-end: span 9;
+  }
+
+  .lg-col-span-10 {
+    grid-column-end: span 10;
+  }
+
+  .lg-col-span-11 {
+    grid-column-end: span 11;
+  }
+
+  .lg-col-span-12 {
+    grid-column-end: span 12;
+  }
+}
+@media (max-width: 960px) {
+  .md-col-span-0 {
+    display: none;
+  }
+}
+@media (max-width: 600px) {
+  .sm-col-span-0 {
+    display: none;
+  }
+}
+.jp-cut {
+  position: relative;
+  display: block;
+  margin: 32px 0;
+  padding: 16px 24px 16px 64px;
+  border: 2px solid var(--jp-green-primary);
+  border-radius: var(--jp-border-radius);
+  text-decoration: none;
+}
+.jp-cut span {
+  display: block;
+}
+.jp-cut span:last-of-type {
+  font-weight: 600;
+}
+.jp-cut:hover span:last-of-type, .jp-cut:focus span:last-of-type {
+  text-decoration: underline;
+  text-decoration-thickness: var(--jp-underline-thickness);
+}
+.jp-cut:hover:after, .jp-cut:focus:after {
+  transform: translateY(-50%) translateX(-8px);
+}
+.jp-cut:after {
+  content: "→";
+  position: absolute;
+  top: 50%;
+  left: 24px;
+  font-size: 24px;
+  font-weight: 600;
+  color: var(--jp-green-primary);
+  transform: translateY(-50%);
+  transition: transform 0.15s ease-out;
+}
+
 .jp-recommendations-banner-main {
   position: relative;
   display: grid;
   grid-template-columns: 55% 45%;
-  max-width: 1600px;
   min-height: 480px;
-  background: linear-gradient(-120deg, white 0%, white 55%, #c5d9ed 55%);
+  margin: 3rem 0 1.25rem 1.25rem;
+  background: #fff;
   box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.03), 0px 1px 2px rgba(0, 0, 0, 0.03);
   border: 1px solid #d5d5d5;
-  margin: 3rem 0 1.25rem 1.25rem;
 }
 @media (max-width: 1152px) {
   .jp-recommendations-banner-main {
@@ -25,14 +256,14 @@
 }
 @media (max-width: 480px) {
   .jp-recommendations-banner-main .notice-dismiss {
-    padding: 16px;
+    padding: 1rem;
   }
 }
 
 .jp-recommendations-banner__content {
   display: flex;
   flex-direction: column;
-  padding-left: 48px;
+  padding-left: 3rem;
 }
 @media (min-width: 1688px) {
   .jp-recommendations-banner__content {
@@ -41,38 +272,40 @@
 }
 @media (max-width: 660px) {
   .jp-recommendations-banner__content {
-    padding-left: 32px;
+    padding-left: 2rem;
   }
 }
 @media (max-width: 480px) {
   .jp-recommendations-banner__content {
-    padding-left: 16px;
+    padding-left: 1rem;
   }
 }
 
 .jp-recommendations-banner__logo {
-  margin: 32px 32px 0 32px;
+  margin: 2.5rem 2rem 0 2.5rem;
 }
 @media (max-width: 480px) {
   .jp-recommendations-banner__logo {
-    margin: 16px 16px 32px 16px;
+    margin: 1rem 1rem 2rem 1rem;
   }
 }
 
 .jp-recommendations-banner__question {
+  margin: 2rem 2rem 0 2rem;
+  color: var(--jp-gray-80);
   font-size: 1.5rem;
   line-height: 1.4;
-  margin: 32px 32px 0 32px;
 }
 @media (max-width: 480px) {
   .jp-recommendations-banner__question {
-    margin: 0 16px 32px 16px;
+    margin: 0 1rem 2rem 1rem;
   }
 }
 
 .jp-recommendations-banner__description {
-  font-size: 16px;
-  margin: 32px 32px 24px 0;
+  margin: 1.5rem 2rem 2rem 0;
+  color: var(--jp-gray-100);
+  font-size: 1rem;
 }
 @media (min-width: 1152px) {
   .jp-recommendations-banner__description {
@@ -81,29 +314,29 @@
 }
 @media (max-width: 660px) {
   .jp-recommendations-banner__description {
-    margin: 32px 32px 24px 32px;
+    margin: 2rem 2rem 1.5rem 2rem;
   }
 }
 @media (max-width: 480px) {
   .jp-recommendations-banner__description {
-    margin: 0 16px 16px 16px;
+    margin: 0 1rem 1rem 1rem;
   }
 }
 
 .jp-recommendations-banner__answer {
   max-width: 600px;
   text-align: center;
-  margin: 0 32px 32px 0;
+  margin: 0 2rem 2rem 0;
 }
 @media (max-width: 480px) {
   .jp-recommendations-banner__answer {
-    margin: 0 16px 16px 0;
+    margin: 0 1rem 1rem 0;
   }
 }
 
 .jp-recommendations-banner__checkboxes {
   display: grid;
-  gap: 16px;
+  gap: 1rem;
   grid-template-rows: auto auto;
   grid-template-columns: auto auto;
 }
@@ -118,62 +351,82 @@
   display: flex;
   align-items: center;
   box-sizing: border-box;
-  border: 1px solid #d5d5d5;
-  border-radius: 4px;
+  border: 1px solid #c3c4c7;
+  border-radius: 2px;
   cursor: pointer;
-  background: white;
+  background: #fff;
 }
 .jp-recommendations-answer__checkbox-label.checked {
-  background: #f8fbff;
-  border: 1px solid #3582c4;
+  background: #f6f7f7;
+}
+.jp-recommendations-answer__checkbox-label input[type=checkbox] {
+  width: 20px;
+  height: 20px;
+  border: 1px solid #000;
+  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.03);
+  border-radius: 2px;
+}
+.jp-recommendations-answer__checkbox-label.checked input[type=checkbox]::before {
+  width: 18px;
+  height: 18px;
+  margin: 0;
+  background-color: #000;
+  content: url("data:image/svg+xml;utf8,%3Csvg%20width%3D%2220%22%20height%3D%2220%22%20viewBox%3D%220%200%2020%2020%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M14.7791%204.00004L7.36198%2013.9753L3.06108%2010.7773%22%20stroke%3D%22white%22%2F%3E%3C%2Fsvg%3E");
 }
 .jp-recommendations-answer__checkbox-label input {
-  margin: 16px 16px 16px 8px;
+  margin: 1rem 1rem 1rem 0.5rem;
 }
 
 .jp-recommendations-answer__title {
-  margin-left: 8px;
-  padding: 15px 0;
+  margin-left: 0.5rem;
+  padding: 1rem 0;
   text-align: right;
 }
 
 .jp-recommendations-banner__form {
-  margin-bottom: 16px;
+  margin-bottom: 2rem;
 }
 
 .jp-recommendations-banner__continue-button {
-  background: #2271b1;
-  border-color: #2271b1;
-  color: white;
+  background: #000;
+  border-color: #000;
+  color: #fff;
   border-style: solid;
   border-width: 1px;
+  border-radius: 4px;
   cursor: pointer;
   display: inline-block;
-  margin: 0 0 8px 0;
+  margin: 0;
   outline: 0;
   overflow: hidden;
   font-size: 0.875rem;
+  font-weight: 600;
   text-overflow: ellipsis;
   vertical-align: top;
   box-sizing: border-box;
-  border-radius: 3px;
-  padding: 7px 14px 9px;
+  padding: 0.625rem 1.5rem;
+  transition: all 150ms ease-in-out;
 }
 @media (max-width: 480px) {
   .jp-recommendations-banner__continue-button {
     width: 100%;
   }
 }
-.jp-recommendations-banner__continue-button:hover {
-  background: #0a4b78;
-  border-color: #0a4b78;
-  color: white;
+.jp-recommendations-banner__continue-button:hover, .jp-recommendations-banner__continue-button:active {
+  background: var(--jp-gray-80);
+  border-color: var(--jp-gray-80);
+  color: var(--jp-white);
+}
+.jp-recommendations-banner__continue-button:focus {
+  box-shadow: none;
+  outline: solid 1px var(--jp-black);
+  outline-offset: 1px;
 }
 
 .jp-recommendations-banner__continue-description {
   color: #646970;
-  margin: 24px auto 0 auto;
-  max-width: 300px;
+  margin: 0.875rem auto 0 auto;
+  max-width: 360px;
 }
 @media (max-width: 480px) {
   .jp-recommendations-banner__continue-description {
@@ -182,12 +435,13 @@
 }
 
 .jp-recommendations-banner__illustration-container {
+  background: radial-gradient(circle at 60%, rgba(6, 158, 8, 0.15) 0%, rgba(255, 255, 255, 0) 75%), radial-gradient(circle at 30% 80%, rgba(206, 217, 242, 0.5) 5%, rgba(255, 255, 255, 0) 25%), radial-gradient(circle at 50% 15%, rgba(245, 230, 179, 0.5) 0%, rgba(255, 255, 255, 0) 35%);
   width: 100%;
   position: relative;
 }
 .jp-recommendations-banner__illustration-container img {
   position: absolute;
-  bottom: 0;
+  top: 15px;
   left: 0;
 }
 @media (min-width: 1152px) {
@@ -206,36 +460,42 @@
   }
 }
 
-.jp-recommendations-banner__illustration-background {
-  width: 100%;
-  max-height: 480px;
-}
-
 .jp-recommendations-banner__illustration-foreground {
-  width: 75%;
-  margin: 10%;
+  width: 100%;
+  max-width: 495px;
 }
 
 .jp-recommendations-banner__notice-dismiss {
-  background: 100% 0;
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: 1;
+  display: flex;
+  align-items: center;
+  margin: 1.5rem 1rem 1rem;
+  padding: 1rem;
+  background: none;
   border: none;
-  color: #3c434a;
+  color: #646970;
+  font-size: 1rem;
+  line-height: 1;
   cursor: pointer;
-  display: flex;
-  font-size: 16px;
-  line-height: 1.5;
-  margin: 0;
-  padding: 32px 0 32px 32px;
-  float: left;
+}
+@media (max-width: 480px) {
+  .jp-recommendations-banner__notice-dismiss {
+    margin-top: 0;
+  }
 }
 .jp-recommendations-banner__notice-dismiss:hover, .jp-recommendations-banner__notice-dismiss:active {
   color: #101517;
 }
 .jp-recommendations-banner__notice-dismiss:hover .jp-recommendations-banner__svg-dismiss, .jp-recommendations-banner__notice-dismiss:active .jp-recommendations-banner__svg-dismiss {
-  fill: #101517;
+  fill: currentColor;
+}
+.jp-recommendations-banner__notice-dismiss:focus {
+  outline-color: #101517;
 }
 .jp-recommendations-banner__notice-dismiss .jp-recommendations-banner__svg-dismiss {
-  fill: #3c434a;
-  margin-left: 4px;
+  margin-inline-end: 0.25rem;
+  fill: currentColor;
 }
-/*# sourceMappingURL=jetpack-recommendations-banner-rtl.css.map */