reporting hint at top of /council page

2 files changed, 25 insertions, 0 deletions

diff --git a/templates/web/fixmystreet.com/static/council.html b/templates/web/fixmystreet.com/static/council.html
index b16a28915..be8ff7f1a 100644
--- a/templates/web/fixmystreet.com/static/council.html
+++ b/templates/web/fixmystreet.com/static/council.html
@@ -6,6 +6,10 @@
     title = 'FixMyStreet for Councils', bodyclass = 'fms-for-councils fullwidthpage'
 %]
 
+<a class="councils-reporting-hint" href="/">
+  <strong>Reporting a problem?</strong> Click here.
+</a>
+
 <div class="councils-section hero">
     <div class="fixed-container">
         <h1 class="hero-title">FixMyStreet for Councils</h1>
diff --git a/web/cobrands/fixmystreet.com/fmsforcouncils.scss b/web/cobrands/fixmystreet.com/fmsforcouncils.scss
index c5900518a..985ecbf16 100644
--- a/web/cobrands/fixmystreet.com/fmsforcouncils.scss
+++ b/web/cobrands/fixmystreet.com/fmsforcouncils.scss
@@ -2,6 +2,7 @@
     FixMyStreet for Councils page.
     Todo: This should be in a separate stylesheet
 */
+$fms-yellow: #FFD000; // same as $primary from cobrands/fixmystreet/_colours.scss
 $fms-orange: #f4a140;
 $fms-red: #e04b4b;
 $fms-blue: #4faded;
@@ -146,6 +147,26 @@ $fms-green: #62b356;
     }
   }
 
+  .councils-reporting-hint {
+    display: block;
+    background: $fms-yellow;
+    color: #222;
+    padding: 0.75em;
+    line-height: 1em;
+    font-size: 0.9em;
+    text-align: center;
+
+    @media only screen and (min-width: 48em) {
+      display: none;
+    }
+
+    &:hover, &:focus, &:active {
+      text-decoration: none;
+      color: mix(#222, $fms-yellow, 50%);
+      background: mix(#ff0, $fms-yellow, 50%);
+    }
+  }
+
   .hero {
     text-align: center;
     border-top: 0;