Modernise report "status" banner

* Simplify markup required for the status banner.
* Simplify styles - the banner is now identical on all screen sizes.
* Move the banner from `report/display.html` into `report/_main.html`
  so that it can appear after `.problem-back` in the source order.
* Use real pin icon instead of `pin-flat-white-small.png`.
* Set a default `$col_fixed_label` colour in `_base.scss`, so cobrands
  don’t have to define it themselves if they’re happy with green.
* Introduce `$col_fixed_label_light`, with a sensible default for all
  cobrands, even ones that have a custom `$col_fixed_label`.
* Remove `$col_fixed_label_dark` – no longer needed.

37 files changed, 87 insertions, 218 deletions

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 825a9d353..2ba77e48c 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -11,6 +11,7 @@
         - Enforce maximum photo size server side, strip EXIF data. #2326 #2134
         - Don't require two taps on reports list on touchscreens. #2294
         - Allow moderation to work without JavaScript. #2339
+        - More prominent display of "state" on report page #2350
     - Admin improvements:
         - Allow moderation to potentially change category. #2320
         - Add Mark/View private reports permission #2306
diff --git a/docs/customising/css.md b/docs/customising/css.md
index e444bb778..18ffd07a1 100644
--- a/docs/customising/css.md
+++ b/docs/customising/css.md
@@ -229,11 +229,11 @@ stylesheet:
     <tr>
         <td>
             <code>$col_fixed_label</code><br>
-            <code>$col_fixed_label_dark</code>
+            <code>$col_fixed_label_light</code>
         </td>
         <td>
-            background of the colour of the "fixed" label that appears on
-            fixed reports, and its darker underside
+            border-top colour of the "fixed" label that appears above
+            fixed reports, and its lighter background colour
         </td>
     </tr>
     <tr>
diff --git a/perllib/FixMyStreet/TestMech.pm b/perllib/FixMyStreet/TestMech.pm
index b8605f56c..bb4a48d65 100644
--- a/perllib/FixMyStreet/TestMech.pm
+++ b/perllib/FixMyStreet/TestMech.pm
@@ -431,7 +431,7 @@ sub extract_problem_title {
 
     $banner = $mech->extract_problem_banner;
 
-Returns the problem title from a problem report page. Returns a hashref with id and text.
+Returns the problem title from a problem report page. Returns a hashref with class and text.
 
 =cut
 
@@ -439,8 +439,8 @@ sub extract_problem_banner {
     my $mech = shift;
 
     my $result = scraper {
-        process 'div#side > p.banner', id => '@id', text => 'TEXT';
-        process 'div.banner > p', id => '@id', text => 'TEXT';
+        process 'div.banner', class => '@class';
+        process 'div.banner > p', text => 'TEXT';
     }
     ->scrape( $mech->response );
 
diff --git a/t/app/controller/report_display.t b/t/app/controller/report_display.t
index a20eec005..bde090dd1 100644
--- a/t/app/controller/report_display.t
+++ b/t/app/controller/report_display.t
@@ -374,7 +374,12 @@ for my $test (
             $banner->{text} =~ s/ $//g;
         }
 
-        is $banner->{id}, $test->{banner_id}, 'banner id';
+        if ( $test->{banner_id} ) {
+            ok $banner->{class} =~ /banner--$test->{banner_id}/i, 'banner class';
+        } else {
+            is $banner->{class}, $test->{banner_id}, 'banner class';
+        }
+
         if ($test->{banner_text}) {
             ok $banner->{text} =~ /$test->{banner_text}/i, 'banner text';
         } else {
diff --git a/t/cobrand/zurich.t b/t/cobrand/zurich.t
index 45888771d..1faa0adf2 100644
--- a/t/cobrand/zurich.t
+++ b/t/cobrand/zurich.t
@@ -196,7 +196,12 @@ subtest "Banners are displayed correctly" => sub {
                 $banner->{text} =~ s/ $//g;
             }
 
-            is $banner->{id}, $test->{banner_id}, 'banner id';
+            if ( $test->{banner_id} ) {
+                ok $banner->{class} =~ /banner--$test->{banner_id}/i, 'banner class';
+            } else {
+                is $banner->{class}, $test->{banner_id}, 'banner class';
+            }
+
             if ($test->{banner_text}) {
                 like_string( $banner->{text}, qr/$test->{banner_text}/i, 'banner text is ' . $test->{banner_text} );
             } else {
diff --git a/templates/web/base/report/_main.html b/templates/web/base/report/_main.html
index d40b1db52..5e345153e 100644
--- a/templates/web/base/report/_main.html
+++ b/templates/web/base/report/_main.html
@@ -6,6 +6,8 @@ can_moderate_title = c.user.can_moderate_title(problem, can_moderate)
 <a href="[% c.uri_for( '/around', { lat => latitude, lon => longitude } ) %]"
     class="problem-back js-back-to-report-list">[% loc('Back to all reports') %]</a>
 
+[% INCLUDE 'report/banner.html' %]
+
 <div class="problem-header clearfix
     [%~ ' show-moderation' IF show_moderation == 'report' ~%]
     " data-lastupdate="[% problem.lastupdate %]">
diff --git a/templates/web/base/report/banner.html b/templates/web/base/report/banner.html
index ee73d287a..bca3f1395 100644
--- a/templates/web/base/report/banner.html
+++ b/templates/web/base/report/banner.html
@@ -1,7 +1,11 @@
 [% USE date %]
+
 [% BLOCK banner %]
-    <div class="banner">
-        <p id="[% id %]">[% text %]</p>
+    <div class="banner banner--[% id %]">
+        <p>
+            <img src="[% c.cobrand.path_to_pin_icons _ 'pin-' _ c.cobrand.pin_colour(problem, 'report') _ '.png' %]" alt="" class="pin">
+            [% text %]
+        </p>
     </div>
 [% END %]
 
diff --git a/templates/web/base/report/display.html b/templates/web/base/report/display.html
index cb5bf327c..752c2b51c 100644
--- a/templates/web/base/report/display.html
+++ b/templates/web/base/report/display.html
@@ -38,7 +38,6 @@
     [% SET shown_form = 1 %]
 [% END %]
 
-[% INCLUDE 'report/banner.html' %]
 [% IF c.user_exists %]
     [% DEFAULT permissions = c.user.permissions(problem) %]
 [%- END %]
diff --git a/templates/web/bromley/report/banner.html b/templates/web/bromley/report/banner.html
index ef9379f52..63771ea3b 100644
--- a/templates/web/bromley/report/banner.html
+++ b/templates/web/bromley/report/banner.html
@@ -1,8 +1,11 @@
 [% USE date %]
 
 [% BLOCK banner %]
-    <div class="banner">
-        <p id="[% id %]">[% text %]</p>
+    <div class="banner banner--[% id %]">
+        <p>
+            <img src="[% c.cobrand.path_to_pin_icons _ 'pin-' _ c.cobrand.pin_colour(problem, 'report') _ '.png' %]" alt="" class="pin">
+            [% text %]
+        </p>
     </div>
 [% END %]
 
diff --git a/templates/web/fixmystreet.com/report/banner.html b/templates/web/fixmystreet.com/report/banner.html
index 0a1af38f2..dd7119fc4 100644
--- a/templates/web/fixmystreet.com/report/banner.html
+++ b/templates/web/fixmystreet.com/report/banner.html
@@ -1,8 +1,11 @@
 [% USE date %]
 
 [% BLOCK banner %]
-    <div class="banner">
-        <p id="[% id %]">[% text %]</p>
+    <div class="banner banner--[% id %]">
+        <p>
+            <img src="[% c.cobrand.path_to_pin_icons _ 'pin-' _ c.cobrand.pin_colour(problem, 'report') _ '.png' %]" alt="" class="pin">
+            [% text %]
+        </p>
     </div>
 [% END %]
 
diff --git a/templates/web/zurich/report/_main.html b/templates/web/zurich/report/_main.html
index c9225b4aa..0bc005042 100644
--- a/templates/web/zurich/report/_main.html
+++ b/templates/web/zurich/report/_main.html
@@ -1,3 +1,5 @@
+[% INCLUDE 'report/banner.html' %]
+
 <div class="problem-header clearfix">
     <h1>[% tprintf( loc('Reported in the %s category'), problem.category_display ) %]</h1>
     <p class="sub">
diff --git a/templates/web/zurich/report/banner.html b/templates/web/zurich/report/banner.html
index c10a99ef6..8814dc986 100644
--- a/templates/web/zurich/report/banner.html
+++ b/templates/web/zurich/report/banner.html
@@ -1,6 +1,6 @@
 [% USE date %]
 [% problem_hashref = c.cobrand.problem_as_hashref(problem, c) %]
-<div class="banner">
-    <p id="[% problem_hashref.banner_id %]">[% problem_hashref.state_t %]</p>
+<div class="banner banner--[% problem_hashref.banner_id %]">
+    <p>[% problem_hashref.state_t %]</p>
 </div>
 
diff --git a/web/cobrands/bathnes/_colours.scss b/web/cobrands/bathnes/_colours.scss
index 2d58682fa..0340b3eda 100644
--- a/web/cobrands/bathnes/_colours.scss
+++ b/web/cobrands/bathnes/_colours.scss
@@ -35,7 +35,6 @@ $col_big_numbers: $bathnes-primary;
 $col_click_map: $bathnes-secondary;
 
 $col_fixed_label: $bathnes-secondary;
-$col_fixed_label_dark: $button-colour;
 
 $front_main_background: $bathnes-primary;
 
diff --git a/web/cobrands/borsetshire/_colours.scss b/web/cobrands/borsetshire/_colours.scss
index 66845a2a0..45936ddb9 100644
--- a/web/cobrands/borsetshire/_colours.scss
+++ b/web/cobrands/borsetshire/_colours.scss
@@ -27,9 +27,6 @@ $col_big_numbers: #ccc; // text color for ol.big-numbers list item counters on h
 
 $col_click_map: gray;  // background for .big-green-banner on map page
 
-$col_fixed_label: #00BD08;
-$col_fixed_label_dark: #4B8304;
-
 $header-top-border: false;
 
 $mappage-header-height: 5em; // 3em #site-logo plus 1em padding top and bottom
diff --git a/web/cobrands/bristol/_colours.scss b/web/cobrands/bristol/_colours.scss
index 7451305a8..4e72e90b3 100644
--- a/web/cobrands/bristol/_colours.scss
+++ b/web/cobrands/bristol/_colours.scss
@@ -30,6 +30,3 @@ $header-top-border: false;
 
 $col_click_map: $g1;
 $col_click_map_dark: darken($g1, 10%);
-
-$col_fixed_label: #00BD08;
-$col_fixed_label_dark: #4B8304;
diff --git a/web/cobrands/bromley/_colours.scss b/web/cobrands/bromley/_colours.scss
index df8e86ddb..4ea842695 100644
--- a/web/cobrands/bromley/_colours.scss
+++ b/web/cobrands/bromley/_colours.scss
@@ -19,7 +19,6 @@ $nav_hover_background_colour: #444;
 
 $col_click_map: $bromley_blue;
 $col_fixed_label: $bromley_blue;
-$col_fixed_label_dark: darken($bromley_blue, 10%);
 
 $header-top-border-width: 4px;
 
diff --git a/web/cobrands/buckinghamshire/_colours.scss b/web/cobrands/buckinghamshire/_colours.scss
index 685773382..1557b790c 100644
--- a/web/cobrands/buckinghamshire/_colours.scss
+++ b/web/cobrands/buckinghamshire/_colours.scss
@@ -32,8 +32,5 @@ $nav_hover_background_colour: #eee;
 $col_click_map: $g1;
 $col_click_map_dark: darken($g1, 10%);
 
-$col_fixed_label: #00BD08;
-$col_fixed_label_dark: #4B8304;
-
 $header-top-border-width: 5px;
 $header-top-border: 5px solid $bucks_green;
diff --git a/web/cobrands/default/_colours.scss b/web/cobrands/default/_colours.scss
index 83a646869..9cfa32901 100644
--- a/web/cobrands/default/_colours.scss
+++ b/web/cobrands/default/_colours.scss
@@ -23,6 +23,3 @@ $nav_hover_background_colour: $primary;
 $col_big_numbers: #ccc;
 
 $col_click_map: $bluey;
-
-$col_fixed_label: #00BD08;
-$col_fixed_label_dark: #4B8304;
diff --git a/web/cobrands/eastherts/_colours.scss b/web/cobrands/eastherts/_colours.scss
index 6233591d3..50c68f51c 100644
--- a/web/cobrands/eastherts/_colours.scss
+++ b/web/cobrands/eastherts/_colours.scss
@@ -22,9 +22,6 @@ $col_big_numbers: #ccc;
 $col_click_map: $eh_green;
 $col_click_map_dark: darken($eh_green, 10%);
 
-$col_fixed_label: #00BD08;
-$col_fixed_label_dark: #4B8304;
-
 $body-font: 'Open Sans', sans-serif;
 $meta-font: $body-font;
 $heading-font: $body-font;
diff --git a/web/cobrands/fiksgatami/_colours.scss b/web/cobrands/fiksgatami/_colours.scss
index c78a15b05..907065d36 100644
--- a/web/cobrands/fiksgatami/_colours.scss
+++ b/web/cobrands/fiksgatami/_colours.scss
@@ -16,6 +16,3 @@ $nav_colour: #fff;
 $nav_hover_background_colour: $primary;
 
 $col_click_map: $bg;
-
-$col_fixed_label: #00BD08;
-$col_fixed_label_dark: #4B8304;
diff --git a/web/cobrands/fixamingata/_colours.scss b/web/cobrands/fixamingata/_colours.scss
index 0ec24d1ff..b609a7a44 100644
--- a/web/cobrands/fixamingata/_colours.scss
+++ b/web/cobrands/fixamingata/_colours.scss
@@ -16,5 +16,3 @@ $nav_hover_background_colour: #444;
 $header-top-border: false;
 
 $col_click_map: #00BD08;
-$col_fixed_label: #00BD08;
-$col_fixed_label_dark: #4B8304;
diff --git a/web/cobrands/fixmystreet.com/_colours.scss b/web/cobrands/fixmystreet.com/_colours.scss
index 1a6bb7ff1..d28cf11e2 100644
--- a/web/cobrands/fixmystreet.com/_colours.scss
+++ b/web/cobrands/fixmystreet.com/_colours.scss
@@ -15,10 +15,6 @@ $nav_hover_background_colour: #444;
 // The "Click map" box on /around
 $col_click_map: #00BD08;
 
-// The "fixed" message on a report page
-$col_fixed_label: #00BD08;
-$col_fixed_label_dark: #4B8304;
-
 $itemlist_item_background: #f6f6f6;
 $itemlist_item_background_hover: mix(#fff, $primary, 70%);
 
diff --git a/web/cobrands/greenwich/_colours.scss b/web/cobrands/greenwich/_colours.scss
index 0e6046efb..973767a2d 100644
--- a/web/cobrands/greenwich/_colours.scss
+++ b/web/cobrands/greenwich/_colours.scss
@@ -23,7 +23,4 @@ $col_big_numbers: $primary;
 
 $col_click_map: $greenwich_red;
 
-$col_fixed_label: #00BD08;
-$col_fixed_label_dark: #4B8304;
-
 $container-max-width: 990px;
diff --git a/web/cobrands/hart/_colours.scss b/web/cobrands/hart/_colours.scss
index 209a971e5..7a4da5b43 100644
--- a/web/cobrands/hart/_colours.scss
+++ b/web/cobrands/hart/_colours.scss
@@ -4,7 +4,6 @@ $hart_primary: #7ECBA2;
 
 $primary: $hart_primary;
 $col_click_map: $hart_primary;
-$col_fixed_label_dark: $hart_primary;
 $col_fixed_label: $hart_primary;
 
 $primary_b: #000000;
diff --git a/web/cobrands/lincolnshire/_colours.scss b/web/cobrands/lincolnshire/_colours.scss
index e53d0cfcf..7adecfdcb 100644
--- a/web/cobrands/lincolnshire/_colours.scss
+++ b/web/cobrands/lincolnshire/_colours.scss
@@ -40,7 +40,6 @@ $col_big_numbers: $lincs-text-2nd;
 $col_click_map: $lincs-panel;
 
 $col_fixed_label: $lincs-highlight;
-$col_fixed_label_dark: darken($lincs-highlight, 10%);
 
 $menu-image: 'menu-black';
 
diff --git a/web/cobrands/oxfordshire/_colours.scss b/web/cobrands/oxfordshire/_colours.scss
index b55727f79..a42d96b2b 100644
--- a/web/cobrands/oxfordshire/_colours.scss
+++ b/web/cobrands/oxfordshire/_colours.scss
@@ -25,7 +25,6 @@ $nav_hover_background_colour: $nav_colour;
 $col_click_map: $color-oxfordshire-bright-green;
 
 $col_fixed_label: $color-oxfordshire-bright-green;
-$col_fixed_label_dark: mix(#000, $color-oxfordshire-bright-green, 50%);
 
 $itemlist_item_background: #fff;
 $itemlist_item_background_hover: #e0e2e5;
diff --git a/web/cobrands/oxfordshire/layout.scss b/web/cobrands/oxfordshire/layout.scss
index 8fc66aac4..52b5544ef 100644
--- a/web/cobrands/oxfordshire/layout.scss
+++ b/web/cobrands/oxfordshire/layout.scss
@@ -246,39 +246,6 @@ body.mappage {
     padding-top: 1em;
   }
 
-  // The "Fixed" / "Unknown" tabs on Oxford report pages are "folded"
-  // round right edge of the sidebar, rather than over the top of it.
-  .banner {
-    margin: 0 -1em; // line tab up with right edge of 1em padded sidebar
-
-    // Float the tab, rather than absolute positioning, to benefit
-    // from text wrapping and stop content being hidden behind it.
-    p {
-      position: relative; // still required for :before positioning
-      top: auto;
-      right: auto;
-      float: right;
-      margin: 1em -0.75em 0.5em 1em;
-
-      // Swap "fold" triangle to bottom right corner of box, rather than top left.
-      &:before {
-        left: auto;
-        right: 0;
-        top: auto;
-        bottom: -0.75em;
-        border-left: none;
-        border-bottom: none !important; // override default id selectors
-        border-top: 0.75em solid #888;
-        border-right: 0.75em solid transparent;
-      }
-
-      &#fixed:before {
-        border-top-color: #1D4D05; // dark green
-        border-top-color: $col_fixed_label_dark;
-      }
-    }
-  }
-
   #occlss-footer,
   #pagefooter {
     display: none;
diff --git a/web/cobrands/rutland/_colours.scss b/web/cobrands/rutland/_colours.scss
index 5cbd005e8..aabedb0f1 100755
--- a/web/cobrands/rutland/_colours.scss
+++ b/web/cobrands/rutland/_colours.scss
@@ -27,8 +27,5 @@ $col_big_numbers: #ccc;
 
 $col_click_map: $RCCGreen_dark;
 
-$col_fixed_label: #00BD08;
-$col_fixed_label_dark: #4B8304;
-
 //$image-sprite: '/cobrands/rutland/RCCLogo.gif';
 
diff --git a/web/cobrands/sass/_base.scss b/web/cobrands/sass/_base.scss
index 282553456..93e71a67e 100644
--- a/web/cobrands/sass/_base.scss
+++ b/web/cobrands/sass/_base.scss
@@ -8,6 +8,8 @@ $menu-image: 'menu-white' !default;
 $itemlist_item_background: #f6f6f6 !default;
 $itemlist_item_background_hover: #e6e6e6 !default;
 $col_big_numbers: #ccc !default;
+$col_fixed_label: #00BD08 !default;
+$col_fixed_label_light: mix($col_fixed_label, #fff, 10%) !default;
 
 $form-control-border-color: #aaaaaa !default;
 $header-top-border-width: 0.25em !default;
@@ -922,45 +924,6 @@ input.final-submit {
     margin-top: 1.25em; // matches margin-top on `label`
 }
 
-.banner {
-  position: relative;
-  p {
-    position: absolute;
-    top:-1.95em;
-    #{$right}: 0;
-    @include inline-block;
-    font-size:0.6875em;//11px
-    line-height:1em;
-    padding:0.5em 1em;
-    margin:0;
-    color:#1a1a1a;
-    background: #ccc;
-    text: {
-      transform:uppercase;
-      align:center;
-    }
-    &:before {
-      content: "";
-      #{$left}: -0.5em;
-      top:0;
-      position: absolute;
-      width: 0;
-      height: 0;
-      border-#{$left}: 0.5em solid transparent;
-      border-bottom: 0.5em solid #888;
-    }
-  }
-
-  #fixed {
-    color:#fff;
-    background: $col_fixed_label;
-
-    &:before {
-      border-bottom: 0.5em solid $col_fixed_label_dark;
-    }
-  }
-}
-
 /*OTHER*/
 
 .plain-list {
@@ -1351,7 +1314,7 @@ input.final-submit {
   line-height: 1.2em;
   margin-bottom: 1em;
   padding-bottom: 0.8em;
-  border-bottom: 1px solid #eee;
+  border-bottom: 0.2em solid #eee;
 
   &:link, &:visited, &:hover {
     color: #666;
@@ -1371,6 +1334,36 @@ input.final-submit {
   }
 }
 
+// Banner showing report status, above report title on individual report page.
+.banner {
+  line-height: 1.2; // down from 1.5 default on `body`
+  margin: -1.2em -1em 1em -1em;
+  padding: 0.9em 1em;
+  background-color: #f6f6f6;
+  border-top: 0.2em solid #999;
+
+  p {
+    font-weight: bold;
+  }
+
+  p:last-child {
+    margin-bottom: 0;
+  }
+
+  .pin {
+    width: 16px;
+    height: 20px;
+    margin: -10px 0;
+    margin-#{$right}: 0.3em;
+    vertical-align: 0.4em;
+  }
+}
+
+.banner--fixed {
+  border-top-color: $col_fixed_label;
+  background-color: $col_fixed_label_light;
+}
+
 .problem-header {
   margin-bottom: 1em;
 
diff --git a/web/cobrands/sass/_layout.scss b/web/cobrands/sass/_layout.scss
index 2c641f30c..8735da4f5 100644
--- a/web/cobrands/sass/_layout.scss
+++ b/web/cobrands/sass/_layout.scss
@@ -198,12 +198,6 @@ body.mappage {
 //    padding: 0.5em;
 //    margin: 0.9em 0.25em 0.85em;
 //  }
-
-  .banner {
-    p {
-      top: -2.1em; // a few pixels lower than default
-    }
-  }
 }
 
 // Want to cover over the blue sidebar
@@ -760,42 +754,6 @@ body.authpage {
   }
 }
 
-.banner {
-  // state banners
-  p {
-    top:-2.25em;
-    padding:1em;
-    &:before {
-      #{$left}: -0.75em;
-      border-#{$left}: 0.75em solid transparent;
-      border-bottom: 0.75em solid #888;
-      @media (min-width: 48em) {
-        border: 0;
-        #{$left}: 0;
-      }
-    }
-  }
-
-  #fixed,
-  #closed {
-    padding-top: 48px;
-    padding-top: calc(1.5em + 32px);
-    background-image: url('/i/pin-flat-white-small.png');
-    background-size: 24px 32px;
-    background-position: 50% 1em;
-    background-repeat:no-repeat;
-    &:before {
-      border-bottom: 0.75em solid $col_fixed_label_dark;
-    }
-  }
-
-  #closed {
-    &:before {
-      border-bottom-color: #666;
-    }
-  }
-}
-
 /*FORMS*/
 input[type=text],
 input[type=password],
diff --git a/web/cobrands/stevenage/_colours.scss b/web/cobrands/stevenage/_colours.scss
index 0211b6d57..0bedded8a 100644
--- a/web/cobrands/stevenage/_colours.scss
+++ b/web/cobrands/stevenage/_colours.scss
@@ -14,7 +14,5 @@ $nav_colour: #fff;
 $nav_hover_background_colour: #444;
 
 $col_click_map: #00BD08;
-$col_fixed_label: #00BD08;
-$col_fixed_label_dark: #4B8304;
 
 $container-max-width: 984px; // to match Stevenage header width
diff --git a/web/cobrands/warwickshire/_colours.scss b/web/cobrands/warwickshire/_colours.scss
index 8480841a1..e1fb8fe95 100644
--- a/web/cobrands/warwickshire/_colours.scss
+++ b/web/cobrands/warwickshire/_colours.scss
@@ -16,7 +16,4 @@ $nav_hover_background_colour: $primary;
 
 $col_click_map: $purple;
 
-$col_fixed_label: #00BD08;
-$col_fixed_label_dark: #4B8304;
-
 $header-top-border: false;
diff --git a/web/cobrands/whitelabel/_colours.scss b/web/cobrands/whitelabel/_colours.scss
index f7e6e63c7..50d0f0e7d 100644
--- a/web/cobrands/whitelabel/_colours.scss
+++ b/web/cobrands/whitelabel/_colours.scss
@@ -21,9 +21,6 @@ $col_big_numbers: #ccc;
 
 $col_click_map: gray;
 
-$col_fixed_label: #00BD08;
-$col_fixed_label_dark: #4B8304;
-
 $menu-image: 'menu-black';
 
 $front_main_background: white;
diff --git a/web/cobrands/zurich/_colours.scss b/web/cobrands/zurich/_colours.scss
index 5f4416015..4b59cfe28 100644
--- a/web/cobrands/zurich/_colours.scss
+++ b/web/cobrands/zurich/_colours.scss
@@ -18,7 +18,6 @@ $nav_hover_background_colour: $primary/1.1;
 $col_click_map: $zurich_blue;
 
 $col_fixed_label: #648721;
-$col_fixed_label_dark: #4B8304;
 
 $mobile_menu_tab_bg_col: #FFFFFF; // the white border and tab on mobile site
 $mobile_header_blue: #366AB6; // close match to Zurich logo_portal.jpg
diff --git a/web/cobrands/zurich/base.scss b/web/cobrands/zurich/base.scss
index 7a1bcca71..e7d7cc7c1 100644
--- a/web/cobrands/zurich/base.scss
+++ b/web/cobrands/zurich/base.scss
@@ -25,29 +25,14 @@
     font-size: 85%;
 }
 
-// Simplify the banner to just be a floated box. Colours etc. still
-// inherited from the base stylesheet.
-.banner {
-    p {
-        position: static;
-        float: right;
-        font-weight: bold;
-        padding: 1em;
-        margin: 0;
-        text-transform: uppercase;
-        text-align: center;
-        &:before {
-            display: none;
-        }
-        &#closed {
-            color: #1a1a1a;
-            background: #e25436; // red
-        }
-        &#progress {
-            color: #1a1a1a;
-            background: #f3d74b; //purple
-        }
-    }
+.banner--closed {
+    border-top-color: #e25436;
+    background: mix(#e25436, #fff, 10%);
+}
+
+.banner--progress {
+    border-top-color: #f3d74b;
+    background: mix(#f3d74b, #fff, 10%);
 }
 
 #site-logo-text {
diff --git a/web/cobrands/zurich/layout.scss b/web/cobrands/zurich/layout.scss
index 0801d90f4..97ae8fc4a 100644
--- a/web/cobrands/zurich/layout.scss
+++ b/web/cobrands/zurich/layout.scss
@@ -183,7 +183,11 @@ body.mappage {
     }
 
     #map_sidebar {
-        padding-top: 3em; // make space for the #zurich-main-nav
+        padding-top: 1em + 2.4em; // make space for the #zurich-main-nav
+    }
+
+    .banner {
+        margin-top: -1em;
     }
 
     #zurich-main-nav {
@@ -204,24 +208,6 @@ body.twothirdswidthpage {
     }
 }
 
-// Zurich base has made this a more simple construct. The top is to pull it up
-// over the content padding to be attached to the top of the content area.
-// We reduce the padding as no pin image, and change the background.
-.banner {
-    top: -1em;
-    p {
-        &#fixed {
-            padding-top: 2em;
-            background: $col_fixed_label;
-            @include linear-gradient(#769643, $col_fixed_label 4px);
-        }
-        &#closed {
-            padding-top: 2em;
-            background-image: none;
-        }
-    }
-}
-
 #fms_pan_zoom {
     top: 2em;
 }
diff --git a/web/i/pin-flat-white-small.png b/web/i/pin-flat-white-small.png
deleted file mode 100644
index f01a4e6b9..000000000
--- a/web/i/pin-flat-white-small.png
+++ /dev/null