1 files changed, 211 insertions, 156 deletions

diff --git a/plugins/jetpack/css/jetpack-banners.css b/plugins/jetpack/css/jetpack-banners.css
index fc8a2549..d335ef9b 100644
--- a/plugins/jetpack/css/jetpack-banners.css
+++ b/plugins/jetpack/css/jetpack-banners.css
@@ -34,7 +34,16 @@ https://github.com/thoughtbot/bourbon
 }
 
 .updated .jp-banner__button-container {
-  padding: 0.75rem 0 0;
+  padding: 2rem 0 0;
+  flex-direction: row-reverse;
+  align-items: center;
+  justify-content: flex-end;
+}
+
+@media (min-width: 600px) {
+  .updated .jp-banner__button-container {
+    display: flex;
+  }
 }
 
 .updated .jp-banner__tos-blurb {
@@ -42,7 +51,17 @@ https://github.com/thoughtbot/bourbon
   padding: 0.375rem 0;
   line-height: 1.5;
   font-size: 0.6875rem;
-  color: #2e4453;
+  color: #414141;
+}
+
+@media (min-width: 600px) {
+  .updated .jp-banner__tos-blurb {
+    margin-left: 1.125rem;
+  }
+}
+
+.updated .jp-banner__tos-blurb a {
+  color: inherit;
 }
 
 .jp-banner .notice-dismiss {
@@ -64,13 +83,25 @@ https://github.com/thoughtbot/bourbon
   right: 0;
   bottom: 1.25rem;
   left: 0;
-  z-index: 9999;
+  z-index: 999;
   background: #f1f1f1;
   text-align: center;
 }
 
+@media (max-width: 530px) {
+  .jetpack-disconnected .jp-connect-full__container {
+    top: 42px;
+  }
+}
+
+@media (min-width: 782px) {
+  .jetpack-disconnected .jp-connect-full__container {
+    left: -20px;
+  }
+}
+
 .jetpack-disconnected .jp-connect-full__container .jp-connect-full__container-card {
-  padding: 3rem 4rem 6rem;
+  padding: 4rem 4rem 6rem;
   background: white;
   margin: 1em;
 }
@@ -91,28 +122,43 @@ https://github.com/thoughtbot/bourbon
   margin: 1em 0;
 }
 
+.jetpack-disconnected.toplevel_page_jetpack .jp-connect-full__container {
+  position: relative;
+  bottom: 0;
+  box-shadow: 0 0 0 1px rgba(213, 213, 213, 0.5), 0 1px 2px #eeeeee;
+  display: none;
+}
+
+.jetpack-disconnected.toplevel_page_jetpack .jp-connect-full__container .jp-connect-full__container-card {
+  margin: 0;
+}
+
 @media (min-width: 782px) {
-  .jetpack-disconnected .jp-connect-full__container {
-    left: -20px;
+  .jetpack-disconnected.toplevel_page_jetpack .jp-connect-full__container {
+    left: 0;
+  }
+}
+
+@media (max-width: 782px) {
+  .jetpack-disconnected.toplevel_page_jetpack .jp-connect-full__container {
+    top: 46px;
   }
 }
 
+.jetpack-disconnected.toplevel_page_jetpack .jp-jetpack-connect__container .jp-connect-full__container {
+  display: block;
+}
+
 .jp-connect-full__svg-dismiss {
   position: absolute;
   right: 0;
   top: 0;
-  fill: #87a6bc;
+  fill: #a2a2a2;
   padding: 1rem;
   height: 1.5rem;
   width: 1.5rem;
 }
 
-@media (max-width: 600px) {
-  .jp-connect-full__svg-dismiss {
-    top: 3.125rem;
-  }
-}
-
 .jp-connect-full__step-header {
   max-width: 700px;
   margin: 0 auto;
@@ -120,14 +166,20 @@ https://github.com/thoughtbot/bourbon
 }
 
 .jp-connect-full__step-header h2 {
-  margin: 1.5rem 0 0;
+  margin: 1.5rem 10% 0;
   font-size: 1.375rem;
   font-weight: bold;
   color: black;
 }
 
+@media (max-width: 530px) {
+  .jp-connect-full__step-header h2 {
+    margin: 1.5rem 0 0;
+  }
+}
+
 .jp-connect-full__step-header h3 {
-  color: #537994;
+  color: #747474;
   font-size: 1rem;
   font-weight: normal;
   margin: 0.625rem 0 1.5rem;
@@ -137,17 +189,6 @@ https://github.com/thoughtbot/bourbon
   margin-top: 5rem;
 }
 
-.jp-connect-full__tos-blurb {
-  font-size: 0.6875rem;
-  margin: 0 auto 1.5rem;
-  color: #537994;
-}
-
-.jp-connect-full__tos-blurb a {
-  text-decoration: none;
-  color: #00BE28;
-}
-
 .jp-connect-full__button-container {
   margin: 0;
 }
@@ -155,6 +196,8 @@ https://github.com/thoughtbot/bourbon
 .jp-connect-full__button-container .dops-button.is-primary {
   background: #00BE28;
   border-color: #00a523;
+  padding-left: 1.5rem;
+  padding-right: 1.5rem;
 }
 
 .jp-connect-full__button-container .dops-button.is-primary:hover, .jp-connect-full__button-container .dops-button.is-primary:focus {
@@ -162,6 +205,11 @@ https://github.com/thoughtbot/bourbon
   border-color: #008b1d;
 }
 
+.jp-connect-full__tos-blurb {
+  font-size: 0.6875rem;
+  margin: 0 auto 1rem;
+}
+
 .jp-connect-full__dismiss {
   cursor: pointer;
 }
@@ -170,42 +218,44 @@ https://github.com/thoughtbot/bourbon
   font-size: .6875rem;
 }
 
+.jp-connect-full__tos-blurb a,
 .jp-connect-full__dismiss-paragraph a {
   cursor: pointer;
-  color: #537994;
-  text-decoration: none;
+  color: inherit;
+  text-decoration: underline;
 }
 
-.jp-connect-full__dismiss-paragraph a:hover {
-  text-decoration: underline;
+.jp-connect-full__row {
+  display: flex;
+  justify-content: space-evenly;
+  text-align: left;
+  align-items: baseline;
+  margin: 0 auto;
+  max-width: 1000px;
 }
 
 .jp-connect-full__slide {
-  max-width: 750px;
-  margin: 4em auto;
-  display: -ms-flexbox;
-  display: flex;
-  -ms-flex-direction: row;
-      flex-direction: row;
-  -ms-flex-pack: stretch;
-      justify-content: stretch;
+  max-width: 35%;
+  margin: 3rem 0;
 }
 
-.jp-connect-full__slide .jp-connect-full__slide-card {
-  -ms-flex: 1;
-      flex: 1;
-  text-align: left;
+@media (max-width: 782px) {
+  .jp-connect-full__slide {
+    margin: 1.875rem 0;
+  }
 }
 
-.jp-connect-full__slide .illustration img {
-  margin: 2.5em 1em;
-  display: block;
+.jp-connect-full__slide p {
+  font-size: 0.875rem;
+}
+
+.jp-connect-full__slide .illustration {
+  padding: 0.75rem;
 }
 
 @media (min-width: 600px) {
-  .jp-connect-full__slide .illustration img {
-    margin: 2.5em auto;
-    width: 75%;
+  .jp-connect-full__slide .illustration {
+    margin-bottom: 2.625rem;
   }
 }
 
@@ -223,12 +273,25 @@ https://github.com/thoughtbot/bourbon
 }
 
 .jp-connect-full__step-support h3 {
-  color: #537994;
+  color: #747474;
   font-size: 1rem;
   font-weight: normal;
   margin: 0.625rem 0 1.5rem;
 }
 
+@media screen and (max-width: 480px) {
+  .jp-connect-full__row {
+    display: block;
+  }
+  .jp-connect-full__slide {
+    margin: 2em 0;
+    max-width: 100%;
+  }
+  .jetpack-disconnected .jp-connect-full__container .jp-connect-full__container-card {
+    padding: 3rem 2rem;
+  }
+}
+
 .updated.jp-wpcom-connect__container {
   border-left: none;
   padding: 0;
@@ -250,10 +313,51 @@ https://github.com/thoughtbot/bourbon
   text-decoration: none;
 }
 
+.updated .notice-dismiss:before {
+  color: white;
+}
+
+.jp-wpcom-connect__container-top-text {
+  padding: 15px 35px 25px 15px;
+  background-color: #00BE28;
+  color: white;
+  display: flex;
+  align-items: baseline;
+}
+
+.jp-wpcom-connect__container-top-text svg {
+  width: 24px;
+  height: 24px;
+  margin-right: 10px;
+  position: relative;
+  top: 7px;
+}
+
+@media (max-width: 530px) {
+  .jp-wpcom-connect__container-top-text svg {
+    flex: 1;
+  }
+}
+
+.jp-wpcom-connect__container-top-text svg path {
+  fill: #fff;
+}
+
+.jp-wpcom-connect__container-top-text span {
+  display: inline-block;
+}
+
+@media (max-width: 530px) {
+  .jp-wpcom-connect__container-top-text span {
+    flex: 9;
+  }
+}
+
 .jp-wpcom-connect__container {
   display: block;
   position: relative;
   box-sizing: border-box;
+  background-color: #00BE28;
 }
 
 .jp-wpcom-connect__inner-container > a:first-child {
@@ -261,14 +365,11 @@ https://github.com/thoughtbot/bourbon
 }
 
 .jp-wpcom-connect__inner-container {
-  display: -ms-flexbox;
   display: flex;
-  -ms-flex-direction: row;
-      flex-direction: row;
-  -ms-flex-wrap: nowrap;
-      flex-wrap: nowrap;
-  -ms-flex-pack: left;
-      justify-content: left;
+  flex-direction: row;
+  flex-wrap: nowrap;
+  justify-content: left;
+  background: #fff;
 }
 
 .jp-wpcom-connect__content-container {
@@ -278,34 +379,56 @@ https://github.com/thoughtbot/bourbon
   z-index: 0;
 }
 
-@media (min-width: 782px) {
-  .jp-wpcom-connect__content-container {
-    padding: 2rem 2rem 6rem 2rem;
-  }
-}
-
 .jp-wpcom-connect__content-container p {
-  color: #4f748e;
+  color: #6f6f6f;
   font-size: 0.875rem;
 }
 
 .jp-wpcom-connect__content-container h2 {
   margin-top: 0;
-  color: #4F748E;
   line-height: 1.6;
+  display: block;
+  margin-bottom: 1.5rem;
+}
+
+@media (max-width: 530px) {
+  .jp-wpcom-connect__hide-phone-and-smaller {
+    display: none !important;
+  }
 }
 
 .jp-wpcom-connect__content-icon {
-  float: right;
-  margin: 0 1.5rem 0 2.25rem;
+  margin: 0 1.5rem;
+  display: flex;
+  flex-direction: column;
+}
+
+.jp-connect-illo img {
+  display: block;
+  margin: 0 auto;
+}
+
+.jp-connect-illo img.jetpack-logo {
+  margin-bottom: 2.25rem;
+}
+
+@media (max-width: 530px) {
+  .jp-connect-illo img.jetpack-logo {
+    margin-left: 0;
+  }
 }
 
 @media (max-width: 782px) {
-  .jp-wpcom-connect__content-icon.jp-connect-illo {
-    float: none;
+  .jp-connect-illo {
     width: 100%;
-    text-align: center;
-    margin: 2.25rem 0 1.5rem;
+    margin: 0.5rem 0;
+    display: block;
+  }
+}
+
+@media (min-width: 900px) {
+  .jp-wpcom-connect__slide-text {
+    padding-left: 2.8125rem;
   }
 }
 
@@ -314,16 +437,26 @@ https://github.com/thoughtbot/bourbon
 }
 
 .jp-wpcom-connect__slide.jp__slide-is-active {
-  display: block;
+  display: flex;
+  align-items: flex-start;
 }
 
-@media (min-width: 782px) {
-  .jp-wpcom-connect__content-container .jp-banner__button-container {
-    position: absolute;
-    bottom: 0.5rem;
+@media (max-width: 782px) {
+  .jp-wpcom-connect__slide.jp__slide-is-active {
+    display: block;
   }
 }
 
+.jp-wpcom-connect__slide ul {
+  list-style: disc;
+  padding: 0 0 0 0.9375rem;
+}
+
+.jp-wpcom-connect__slide ul li {
+  color: #6f6f6f;
+  font-size: 0.75rem;
+}
+
 .jp-banner__button-container .dops-button {
   margin: 0.3125rem 0;
 }
@@ -331,6 +464,9 @@ https://github.com/thoughtbot/bourbon
 .jp-banner__button-container .dops-button.is-primary {
   background: #00BE28;
   border-color: #00a523;
+  padding-left: 1.5rem;
+  padding-right: 1.5rem;
+  flex-shrink: 0;
 }
 
 .jp-banner__button-container .dops-button.is-primary:hover, .jp-banner__button-container .dops-button.is-primary:focus {
@@ -338,85 +474,4 @@ https://github.com/thoughtbot/bourbon
   border-color: #008b1d;
 }
 
-.jp-wpcom-connect__vertical-nav {
-  background-color: #F3F6F8;
-}
-
-@media (min-width: 600px) {
-  .jp-wpcom-connect__vertical-nav {
-    -ms-flex-direction: column;
-        flex-direction: column;
-    -ms-flex-pack: start;
-        justify-content: flex-start;
-  }
-}
-
-@media (max-width: 600px) {
-  .jp-wpcom-connect__vertical-nav {
-    display: none;
-  }
-}
-
-.jp-wpcom-connect__vertical-nav-container {
-  width: 15rem;
-}
-
-.vertical-menu__feature-item-label {
-  display: none;
-}
-
-@media (min-width: 600px) {
-  .vertical-menu__feature-item {
-    display: -ms-flexbox;
-    display: flex;
-    -ms-flex-direction: row;
-        flex-direction: row;
-    -ms-flex-align: center;
-        align-items: center;
-    border: none;
-    padding: 0.5rem;
-    border-bottom: 1px solid #c8d7e1;
-    border-right: 1px solid #c8d7e1;
-    border-left: 3px solid #F3F6F8;
-    background-color: #F3F6F8;
-    color: #87a6bc;
-    cursor: pointer;
-  }
-  .vertical-menu__feature-item:last-of-type {
-    position: relative;
-    top: 1px;
-  }
-  .vertical-menu__feature-item-is-selected {
-    border-left: 3px solid #0087be;
-    border-right: 1px solid #fff;
-    background-color: #fff;
-    color: #2e4453;
-  }
-  .vertical-menu__feature-item-is-selected.jp-feature-intro {
-    border-left: 3px solid #00BE28;
-  }
-  .vertical-menu__feature-item-icon {
-    width: 1.25rem;
-    height: 1.25rem;
-    padding: 0.25rem;
-    text-align: center;
-  }
-  .vertical-menu__feature-item svg {
-    fill: #86A6BD;
-  }
-  .vertical-menu__feature-item-is-selected svg {
-    fill: #3D596D;
-  }
-  .vertical-menu__feature-item-is-selected.jp-feature-intro svg {
-    fill: #00BE28;
-  }
-  .vertical-menu__feature-item-is-selected.wp-app-logo svg path {
-    fill: #3D596D;
-  }
-  .vertical-menu__feature-item-label {
-    display: block;
-    padding: 0.5rem;
-  }
-}
-
 /*# sourceMappingURL=jetpack-banners.css.map */