5 files changed, 133 insertions, 7 deletions

diff --git a/web/cobrands/fixmystreet/base.scss b/web/cobrands/fixmystreet/base.scss
index 3baac2eb0..6e6cbd7b9 100644
--- a/web/cobrands/fixmystreet/base.scss
+++ b/web/cobrands/fixmystreet/base.scss
@@ -123,3 +123,79 @@
     margin: 0.5em 0 1em 0;
   }
 }
+
+.unresponsive-council-warning {
+    margin: 1em -1em;
+    padding: 2em 2em;
+    background-color: mix(#fff, $primary, 70%);
+
+    h1 {
+        font-size: 1.4em;
+    }
+
+    p {
+        margin-bottom: 0.5em;
+    }
+
+    a {
+        display: inline-block;
+        margin-top: 0.5em;
+        padding: 0.5em 1em;
+        background-color: #000;
+        color: #fff;
+        border-radius: 0.3em;
+
+        &:hover,
+        &:focus {
+            text-decoration: none;
+            background-color: mix(#000, $primary, 70%);
+        }
+    }
+}
+
+.unresponsive-council__header {
+    padding-bottom: 1em;
+    border-bottom: 1px solid #ccc;
+    margin-bottom: 1em;
+
+    p {
+        font-size: 1.2em;
+        margin-bottom: 0;
+    }
+}
+
+.unresponsive-council-cta {
+    display: block;
+    padding: 1em;
+    margin: 1em 0;
+    background-color: #555;
+    border-radius: 0.2em;
+    color: #fff;
+
+    &:visited {
+        color: #fff;
+    }
+
+    &:hover,
+    &:focus {
+        text-decoration: none;
+        background-color: #777;
+        color: #fff;
+    }
+}
+
+.unresponsive-council-cta--primary {
+    background-color: $primary;
+    color: #000;
+
+    &:visited {
+        color: #000;
+    }
+
+    &:hover,
+    &:focus {
+        background-color: mix(#fff, $primary, 30%);
+        color: #000;
+    }
+}
+
diff --git a/web/cobrands/fixmystreet/fixmystreet.js b/web/cobrands/fixmystreet/fixmystreet.js
index fdecee9db..85366537e 100644
--- a/web/cobrands/fixmystreet/fixmystreet.js
+++ b/web/cobrands/fixmystreet/fixmystreet.js
@@ -42,7 +42,7 @@ function tabs(elem, indirect) {
         //toggle class on nav
         $('.tab-nav .active').removeClass('active');
         elem.addClass('active');
- 
+
         //hide / show the right tab
         $('.tab.open').hide().removeClass('open');
         $(target).show().addClass('open');
@@ -134,8 +134,8 @@ $(function(){
         last_type = type;
     }).resize();
 
-    /* 
-     * Report a problem page 
+    /*
+     * Report a problem page
      */
     //desktop
     if ($('#report-a-problem-sidebar').is(':visible')) {
@@ -178,10 +178,10 @@ $(function(){
     //make initial tab active
     $('.tab-nav a').first().addClass('active');
     $('.tab').first().addClass('open');
-    
+
     //hide other tabs
     $('.tab').not('.open').hide();
-    
+
     //set up click event
     $(".tab-nav").on('click', 'a', function(e){
         e.preventDefault();
@@ -306,7 +306,7 @@ $.fn.drawer = function(id, ajax) {
                     $('.spinner').remove();
                 });
             }
-            
+
             // Tall drawer - put after .content for scrolling to work okay.
             // position over the top of the main .content in precisely the right location
             d.insertAfter($content).addClass('content').css({
@@ -485,4 +485,3 @@ $(window).load(function(){
     }, 0);
 });
 */
-
diff --git a/web/cobrands/fixmystreet/images/unresponsive-council-cta-arrow.png b/web/cobrands/fixmystreet/images/unresponsive-council-cta-arrow.png
new file mode 100644
index 000000000..664721830
--- /dev/null
+++ b/web/cobrands/fixmystreet/images/unresponsive-council-cta-arrow.png
diff --git a/web/cobrands/fixmystreet/images/unresponsive-council-cta-arrow@2.png b/web/cobrands/fixmystreet/images/unresponsive-council-cta-arrow@2.png
new file mode 100644
index 000000000..181d8402b
--- /dev/null
+++ b/web/cobrands/fixmystreet/images/unresponsive-council-cta-arrow@2.png
diff --git a/web/cobrands/fixmystreet/layout.scss b/web/cobrands/fixmystreet/layout.scss
index 009ab5bcb..1d56e675c 100644
--- a/web/cobrands/fixmystreet/layout.scss
+++ b/web/cobrands/fixmystreet/layout.scss
@@ -301,3 +301,54 @@ body.alertindex {
     }
   }
 }
+
+body.unresponsive-council {
+    .container .content {
+        padding: 0;
+        margin-bottom: 4em;
+    }
+
+    h1, h2 {
+        font-family: inherit;
+        font-weight: bold;
+    }
+}
+
+.unresponsive-council__header,
+.unresponsive-council__body {
+    padding: 1.5em;
+    font-size: 1.3em;
+}
+
+.unresponsive-council__header {
+    background-color: $primary;
+
+    border-bottom: none;
+    margin-bottom: 0;
+
+    h1 {
+        font-size: 2.5em;
+        line-height: 1em;
+        margin-bottom: 0.2em;
+    }
+}
+
+.unresponsive-council__body {
+    p {
+        max-width: 26em;
+    }
+}
+
+.unresponsive-council-cta {
+    margin: 1.5em 0;
+    max-width: 20em;
+    padding-right: 6em;
+    background-image: url(images/unresponsive-council-cta-arrow.png);
+    background-position: right center;
+    background-repeat: no-repeat;
+
+    @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
+        background-image: url(images/unresponsive-council-cta-arrow@2.png);
+        background-size: 60px;
+    }
+}
\ No newline at end of file