[fixmystreet.com] FMS Pro banner on homepage

Includes a new, brighter tile.jpg, to improve text contrast and
to match the $primary colour of #FFD000.

5 files changed, 53 insertions, 34 deletions

diff --git a/templates/web/fixmystreet.com/front/footer-marketing.html b/templates/web/fixmystreet.com/front/footer-marketing.html
index 2095b51c5..21363d914 100644
--- a/templates/web/fixmystreet.com/front/footer-marketing.html
+++ b/templates/web/fixmystreet.com/front/footer-marketing.html
@@ -1,14 +1,10 @@
-                        <div class="tablewrapper bordered">
-                            <div id="footer-help">
-                                <ul>
-                                    <li>
-                                        <h4>[% loc('Are you a developer?') %]</h4>
-                                        <p>[% loc('Would you like to contribute to FixMyStreet? Our code is open source and <a href="http://fixmystreet.org">available at fixmystreet.org</a>.') %]</p>
-                                    </li>
-                                    <li>
-                                        <h4>[% loc('Are you from a council?') %]</h4>
-                                        <p>[% loc('Would you like better integration with FixMyStreet? <a href="/about/council">Find out about FixMyStreet for councils</a>.') %]</p>
-                                    </li>
-                                </ul>
-                            </div>
-                        </div>
+<div class="fms-pro-promo">
+    <h2>FixMyStreet Professional</h2>
+    <p class="lead">The one-stop street reporting service for councils.</p>
+    <p>Integrate FixMyStreet with your council system for smooth, end-to-end report fullfilment.</p>
+    <p><a href="/about/council" class="btn">Learn more</a></p>
+</div>
+
+<div class="footer-marketing">
+    <p>[% loc('Would you like to contribute to FixMyStreet? Our code is open source and <a href="http://fixmystreet.org">available at fixmystreet.org</a>.') %]</p>
+</div>
diff --git a/web/cobrands/fixmystreet.com/base.scss b/web/cobrands/fixmystreet.com/base.scss
index 292446e92..c43f9d687 100644
--- a/web/cobrands/fixmystreet.com/base.scss
+++ b/web/cobrands/fixmystreet.com/base.scss
@@ -240,3 +240,21 @@ $grid-breakpoint-sm: $mysoc-footer-breakpoint-sm;
     margin-right: 0.5em;
   }
 }
+
+.fms-pro-promo {
+  margin: 2em -1em;
+  padding: 1em;
+  background: $primary;
+
+  .lead {
+    font-weight: bold;
+  }
+
+  & > :first-child {
+    margin-top: 0;
+  }
+
+  & > :last-child {
+    margin-bottom: 0;
+  }
+}
diff --git a/web/cobrands/fixmystreet.com/images/tile-y-border.jpg b/web/cobrands/fixmystreet.com/images/tile-y-border.jpg
index 04c75a9de..41565c3f2 100644
--- a/web/cobrands/fixmystreet.com/images/tile-y-border.jpg
+++ b/web/cobrands/fixmystreet.com/images/tile-y-border.jpg
diff --git a/web/cobrands/fixmystreet.com/images/tile-y.jpg b/web/cobrands/fixmystreet.com/images/tile-y.jpg
index 63682f1c4..967a1a718 100644
--- a/web/cobrands/fixmystreet.com/images/tile-y.jpg
+++ b/web/cobrands/fixmystreet.com/images/tile-y.jpg
diff --git a/web/cobrands/fixmystreet.com/layout.scss b/web/cobrands/fixmystreet.com/layout.scss
index 8318eab90..4b2a91c9d 100644
--- a/web/cobrands/fixmystreet.com/layout.scss
+++ b/web/cobrands/fixmystreet.com/layout.scss
@@ -285,26 +285,6 @@ body.unresponsive-council {
     }
 }
 
-// FMS.com has a slightly different version of the
-// footer-help / footer-marketing widgets that appear
-// at the bottom of pages with `pagefooter` set.
-#footer-help {
-  border: none;
-
-  ul {
-    margin: 0 auto;
-
-    li {
-      max-width: 19em;
-
-      &:last-child {
-        border: none;
-        padding-left: 3em;
-      }
-    }
-  }
-}
-
 .mysoc-footer {
   margin-top: 3em;
   // The below lines are so that on e.g. /about/posters the footer will move on
@@ -315,3 +295,28 @@ body.unresponsive-council {
 body.mappage .mysoc-footer {
     display: none;
 }
+
+.fms-pro-promo {
+  margin: 2em 0 3em 0;
+  padding: 2em;
+  background: $primary url(images/tile-y.jpg) 0 0 repeat;
+
+  p {
+    font-size: 1.2em;
+    max-width: 26em;
+  }
+
+  h2 {
+    font-family: inherit;
+    font-weight: bold;
+    font-size: 2em;
+  }
+
+  @media (min-width: 60em) {
+    padding: 3em;
+  }
+}
+
+.footer-marketing {
+  color: #ccc;
+}