[UK] Promote council-exclusive summary dashboard

Fixes mysociety/fixmystreet-commercial#1016

2 files changed, 101 insertions, 31 deletions

diff --git a/web/cobrands/fixmystreet.com/base.scss b/web/cobrands/fixmystreet.com/base.scss
index ff244d12c..484c39716 100644
--- a/web/cobrands/fixmystreet.com/base.scss
+++ b/web/cobrands/fixmystreet.com/base.scss
@@ -307,21 +307,32 @@ html.lazyload .js-lazyload {
 }
 
 .fms-pro-promo {
-  margin: 2em -1em;
-  padding: 1em;
-  background: $primary;
+    margin: 0 -1em;
 
-  .lead {
-    font-weight: bold;
-  }
+    h2 {
+        margin-top: 0;
+    }
 
-  & > :first-child {
-    margin-top: 0;
-  }
+    .lead {
+        font-weight: bold;
+    }
 
-  & > :last-child {
-    margin-bottom: 0;
-  }
+    p:last-child {
+        margin-bottom: 0;
+    }
+}
+
+.fms-pro-promo__pro,
+.fms-pro-promo__stats {
+    padding: 1.5em 1em;
+}
+
+.fms-pro-promo__pro {
+    background: $primary;
+}
+
+.fms-pro-promo__stats {
+    border-bottom: 0.25em solid $primary;
 }
 
 .postcode-form-test {
@@ -494,3 +505,14 @@ input.postcode-form-test__postcode {
         line-height: 1em;
     }
 }
+
+.area-reports-dashboard-cta {
+    background-color: mix(#fff, $primary, 60%);
+    padding: 1em;
+    margin-top: 1em;
+    margin-bottom: 1em;
+
+    & > :last-child {
+        margin-bottom: 0;
+    }
+}
\ No newline at end of file
diff --git a/web/cobrands/fixmystreet.com/layout.scss b/web/cobrands/fixmystreet.com/layout.scss
index 4043ee747..19c3fa19c 100644
--- a/web/cobrands/fixmystreet.com/layout.scss
+++ b/web/cobrands/fixmystreet.com/layout.scss
@@ -324,29 +324,69 @@ footer {
 }
 
 .fms-pro-promo {
-  margin: 1em 0 3em 0;
-  padding: 2em;
-  background: $primary url(images/tile-y.jpg) 0 0 repeat;
+    @include clearfix();
+    @include flex-container();
 
-  @media ($high-dpi-screen) {
-    background-image: url(images/tile-y@2x.jpg);
-    background-size: 500px;
-  }
+    margin: 1em 0 3em 0;
 
-  p {
-    font-size: 1.2em;
-    max-width: 26em;
-  }
+    h2 {
+        font-family: inherit;
+        font-weight: bold;
+    }
 
-  h2 {
-    font-family: inherit;
-    font-weight: bold;
-    font-size: 2em;
-  }
+    @media (min-width: 60em) {
+        p {
+            font-size: 1.2em;
+        }
 
-  @media (min-width: 60em) {
-    padding: 3em;
-  }
+        h2 {
+            font-size: 2em;
+        }
+    }
+}
+
+.fms-pro-promo__pro,
+.fms-pro-promo__stats {
+    @include box-sizing(border-box);
+    float: left;
+    padding: 2em;
+
+    @media (min-width: 60em) {
+        padding: 3em;
+    }
+}
+
+.fms-pro-promo__pro {
+    width: 40%;
+    background: $primary url(images/tile-y.jpg) 0 0 repeat;
+
+    @media ($high-dpi-screen) {
+        background-image: url(images/tile-y@2x.jpg);
+        background-size: 500px;
+    }
+}
+
+.fms-pro-promo__stats {
+    width: 56%;
+    margin-left: 4%;
+    border-bottom: none;
+    background: #fff;
+    position: relative;
+
+    &:before {
+        content: "NEW";
+        display: block;
+        position: absolute;
+        top: -0.5em;
+        right: 0.5em;
+        background: $primary;
+        font-weight: bold;
+        width: 4em;
+        line-height: 4em;
+        text-align: center;
+        border-radius: 100%;
+        transform: rotate(5deg);
+    }
 }
 
 .footer-marketing {
@@ -397,3 +437,11 @@ footer {
         margin-bottom: 4em;
     }
 }
+
+.area-reports-dashboard-cta {
+    // To overpower `body.mappage .full-width` in core.
+    body.mappage & {
+        margin-top: 1em;
+        margin-bottom: 1em;
+    }
+}
\ No newline at end of file