[Borsetshire] Add Pro banner at top.

4 files changed, 76 insertions, 1 deletions

diff --git a/templates/web/borsetshire/header_site.html b/templates/web/borsetshire/header_site.html
index 51f42881b..6db1f950e 100644
--- a/templates/web/borsetshire/header_site.html
+++ b/templates/web/borsetshire/header_site.html
@@ -1,3 +1,14 @@
+<div class="ms-header clearfix">
+    <div class="container">
+        <div class="ms-header__logo">
+            <a href="https://www.mysociety.org/">mySociety</a>
+        </div>
+        <a class="ms-header__back-to-fms" href="https://www.fixmystreet.com/pro/">
+            Get <strong>FixMyStreet Pro</strong> – the one-stop street reporting service for councils
+        </a>
+    </div>
+</div>
+
 <header id="site-header" role="banner">
     <div class="container">
         [% INCLUDE 'header_logo.html' %]
diff --git a/web/cobrands/borsetshire/_council-header.scss b/web/cobrands/borsetshire/_council-header.scss
index 73d531489..750c11ce0 100644
--- a/web/cobrands/borsetshire/_council-header.scss
+++ b/web/cobrands/borsetshire/_council-header.scss
@@ -1,5 +1,5 @@
 .nav-wrapper {
-    top: 5em;
+    top: 7.5em;
 }
 
 #main-nav {
diff --git a/web/cobrands/borsetshire/_mysoc-header.scss b/web/cobrands/borsetshire/_mysoc-header.scss
new file mode 100644
index 000000000..f1143736c
--- /dev/null
+++ b/web/cobrands/borsetshire/_mysoc-header.scss
@@ -0,0 +1,62 @@
+// Adapted from .ms-header component in FMS Pro WordPress theme.
+
+.ms-header {
+    background-color: #3B3F44;
+    color: #fff;
+}
+
+.ms-header__logo,
+.ms-header__back-to-fms {
+    box-sizing: border-box;
+    margin: 10px 0;
+}
+
+.ms-header__logo {
+    @media (min-width: 48em) {
+        float: right;
+        width: 25%;
+    }
+    padding-left: 1em;
+
+    a {
+        display: block;
+        width: 101px;
+        height: 0;
+        padding-top: 21px;
+        overflow: hidden;
+        background: transparent;
+        background-position: 0 0;
+        background-repeat: no-repeat;
+        background-size: 101px 21px;
+        @include svg-background-image('../fixmystreet.com/images/mysoc-footer/logo-mysociety');
+
+        // Centre on narrow screens, right align on wider screens.
+        margin: 0 auto;
+        @media (min-width: 48em) {
+            margin-right: 0;
+        }
+    }
+}
+
+.ms-header__back-to-fms {
+    @media (min-width: 48em) {
+        width: 75%;
+        float: left;
+    }
+
+    padding-right: 1em;
+
+    display: block; // .ms-header__back-to-fms is an <a> element
+
+    color: #ddd;
+    font-size: 0.875em;
+
+    &:visited {
+        color: #ddd;
+    }
+    &:hover,
+    &:focus {
+        color: #fff;
+        text-decoration: none;
+    }
+}
diff --git a/web/cobrands/borsetshire/base.scss b/web/cobrands/borsetshire/base.scss
index a92d54427..10973fea2 100644
--- a/web/cobrands/borsetshire/base.scss
+++ b/web/cobrands/borsetshire/base.scss
@@ -115,3 +115,5 @@ body.authpage {
 .btn--borsetshire {
   @include button-reset($text: #000, $hover-text: #000);
 }
+
+@import "mysoc-header";