Simplify #geolocate_link styling

Much less opinionated styling for #geolocate_link in core, which
means the link should look better, by default, for most cobrands.

(In particular, the link looks much better on cobrands with the more
modern style of white / off-white #front-main background, such as
highwaysengland, which was the cobrand that started off this work
to begin with.)

I’ve also reduced the specificity of the #geolocate_link rulesets
in both core and all the cobrands.

While this commit means that fewer cobrands need to override styles
on #geolocate_link, there are still 8 cobrands that have to define a
custom text colour for their #geolocate_link, because they both:
A) have a light coloured background for #front-main, and
B) want their #geolocate_link to be coloured like a normal link,
rather than inheriting the text colour of the parent element.

We might want to revisit this handling of #geolocate_link colouring and
the `#front-main a { color: inherit }` rule in _layout.scss at some
point in the future.

Fixes mysociety/fixmystreet-commercial#1835.

24 files changed, 129 insertions, 219 deletions

diff --git a/templates/web/buckinghamshire/front/pre-steps.html b/templates/web/buckinghamshire/front/pre-steps.html
index 4728bff2f..ee7f83ec9 100644
--- a/templates/web/buckinghamshire/front/pre-steps.html
+++ b/templates/web/buckinghamshire/front/pre-steps.html
@@ -1,4 +1,4 @@
-<p style="margin: -1em -1em 1em; padding: 20px 30px; background-color: #f79f73; color: #000;">
+<p style="margin: 1em -20px; padding: 20px; background-color: #f79f73; color: #000;">
 In light of the ongoing COVID 19 crisis an element of TfB workforce has reduced
 by the need for self-isolation. This regrettably means that for the immediate
 future some work will have to be delayed. We apologise for any possible delay
diff --git a/web/cobrands/bexley/base.scss b/web/cobrands/bexley/base.scss
index 7132f33ab..0f72a2e34 100644
--- a/web/cobrands/bexley/base.scss
+++ b/web/cobrands/bexley/base.scss
@@ -39,7 +39,7 @@ small {
 .mobile-map-banner {
     font-size: 0.89em;
 }
-#front-main a#geolocate_link {
+a#geolocate_link {
     font-size: 0.89em;
 }
 #front_stats div {
diff --git a/web/cobrands/bristol/base.scss b/web/cobrands/bristol/base.scss
index 836b27009..cbd5ee081 100644
--- a/web/cobrands/bristol/base.scss
+++ b/web/cobrands/bristol/base.scss
@@ -109,10 +109,6 @@ dl dt {
   }
 }
 
-a#geolocate_link {
-  color: $b3;
-}
-
 label {
   @extend %bold-font;
 }
diff --git a/web/cobrands/bristol/layout.scss b/web/cobrands/bristol/layout.scss
index 07b39b08b..22fdcf60c 100644
--- a/web/cobrands/bristol/layout.scss
+++ b/web/cobrands/bristol/layout.scss
@@ -54,10 +54,6 @@ body.frontpage, body.twothirdswidthpage, body.fullwidthpage, body.authpage {
       }
     }
 
-    a#geolocate_link {
-      color: $b3;
-    }
-
     h1 {
       font-size: 3em;
     }
@@ -99,6 +95,10 @@ body.frontpage, body.twothirdswidthpage, body.fullwidthpage, body.authpage {
   }
 }
 
+a#geolocate_link {
+  color: $b3; // override default `#front-main a`
+}
+
 body.mappage {
   // Add a red border-bottom *inside* the header
   #site-header {
diff --git a/web/cobrands/buckinghamshire/base.scss b/web/cobrands/buckinghamshire/base.scss
index 8df2cab7b..aefe76945 100644
--- a/web/cobrands/buckinghamshire/base.scss
+++ b/web/cobrands/buckinghamshire/base.scss
@@ -102,26 +102,15 @@ dl dt {
   }
 
   #postcodeForm {
-    margin-top: 1em;
+    margin: 1em 0 0 0;
+    padding: 0;
     background: #fff;
+
     div input#sub {
       @include bucks-button();
       box-shadow: 0;
     }
   }
-  a#geolocate_link {
-    background: transparent;
-    color: $bucks_links;
-    padding: 0;
-    font-size: 1em;
-    &:hover,
-    &:active,
-    &:focus { 
-      background: transparent;
-      color: $link-hover-color;
-      text-decoration: underline;
-    }
-  }
 }
 
 .btn-primary, .green-btn, .btn--primary {
@@ -137,7 +126,13 @@ dl dt {
 }
 
 a#geolocate_link {
-  color: $b3;
+  color: $bucks_links;
+
+  &:hover,
+  &:active,
+  &:focus {
+    color: $link-hover-color;
+  }
 }
 
 label {
diff --git a/web/cobrands/buckinghamshire/layout.scss b/web/cobrands/buckinghamshire/layout.scss
index 5df31f9e2..bea2fadc0 100644
--- a/web/cobrands/buckinghamshire/layout.scss
+++ b/web/cobrands/buckinghamshire/layout.scss
@@ -90,19 +90,14 @@ body.twothirdswidthpage .content .sticky-sidebar aside {
     background-color: white;
     text-align: left;
     padding-top: 40px;
+    padding-bottom: 0;
 
     #postcodeForm {
-      margin-top: 0;
-
       div {
         margin: 0;
       }
     }
 
-    a#geolocate_link {
-      color: $b3;
-    }
-
     h1 {
       font-size: 2.5em;
     }
diff --git a/web/cobrands/cheshireeast/base.scss b/web/cobrands/cheshireeast/base.scss
index 8e771f0ad..c0d798c3a 100644
--- a/web/cobrands/cheshireeast/base.scss
+++ b/web/cobrands/cheshireeast/base.scss
@@ -90,15 +90,12 @@ a,
     background-color: #ecf3ec;
 }
 
-#front-main a#geolocate_link {
-    color: #2e3191;
-    background: transparent;
+a#geolocate_link {
     border-bottom: 1px solid #a6a7da;
-    padding: 0;
-    margin-top: 0.5em;
-    font-size: inherit;
+    padding: 0; // remove padding so that border-bottom looks like an underline
+    margin: 0 0 1em 0;
+
     &:hover {
-        background: transparent;
         border-bottom: 1px solid #2e3191;
         transition: border-color 0.5s;
     }
diff --git a/web/cobrands/cheshireeast/layout.scss b/web/cobrands/cheshireeast/layout.scss
index 71861e13f..4505b3a26 100644
--- a/web/cobrands/cheshireeast/layout.scss
+++ b/web/cobrands/cheshireeast/layout.scss
@@ -29,8 +29,11 @@ body.frontpage .content {
     margin: 0;
     width: 30em;
 }
-#front-main a#geolocate_link {
-    color: #2e3191;
+
+a#geolocate_link {
+    color: #2e3191; // override default `#front-main a`
+    margin-top: 1em;
+
     &:hover {
         text-decoration: none;
     }
diff --git a/web/cobrands/eastherts/layout.scss b/web/cobrands/eastherts/layout.scss
index 964feb5ca..dbb33a3d2 100644
--- a/web/cobrands/eastherts/layout.scss
+++ b/web/cobrands/eastherts/layout.scss
@@ -116,10 +116,6 @@
         }
     }
 
-    a#geolocate_link {
-        color: $eh_green;
-    }
-
     h1 {
         font-size: 2.5em;
     }
@@ -131,6 +127,10 @@
     }
 }
 
+a#geolocate_link {
+    color: $eh_green; // override default `#front-main a`
+}
+
 body.mappage {
     .eh-footer {
         display: none;
diff --git a/web/cobrands/fixamingata/layout.scss b/web/cobrands/fixamingata/layout.scss
index 6cf0dd47e..25e5b260f 100644
--- a/web/cobrands/fixamingata/layout.scss
+++ b/web/cobrands/fixamingata/layout.scss
@@ -122,26 +122,23 @@ body.mappage {
 
 .content footer .tablewrapper { background: #fff; }
 
-#front-main {
-    a#geolocate_link {
+a#geolocate_link {
+    background: url(images/locate-me.png) $left 0 no-repeat;
+    height: 34px;
+    padding-#{$left}: 24px;
+    margin-top: 0.25em;
+    @media ($high-dpi-screen) {
+        background-image: url(images/locate-me@2.png);
+        background-size: 22px 34px;
+    }
+    &:hover {
+        text-decoration:underline;
         background: url(images/locate-me.png) $left 0 no-repeat;
-        height: 34px;
-        padding-#{$left}: 24px;
-        margin-top: 0.25em;
-        font-size: 1em;
+
         @media ($high-dpi-screen) {
             background-image: url(images/locate-me@2.png);
             background-size: 22px 34px;
         }
-        &:hover {
-            text-decoration:underline;
-            background: url(images/locate-me.png) $left 0 no-repeat;
-
-            @media ($high-dpi-screen) {
-                background-image: url(images/locate-me@2.png);
-                background-size: 22px 34px;
-            }
-        }
     }
 }
 
diff --git a/web/cobrands/fixmystreet.com/layout.scss b/web/cobrands/fixmystreet.com/layout.scss
index f6d7c9096..e6a862f73 100644
--- a/web/cobrands/fixmystreet.com/layout.scss
+++ b/web/cobrands/fixmystreet.com/layout.scss
@@ -152,20 +152,23 @@ body.fullwidthpage {
                 }
             }
         }
-        a#geolocate_link {
-            font-family: $body-font;
-            background: url(images/locate-me.png) $left 0 no-repeat;
-            height: 34px;
-            padding-#{$left}: 24px;
-            margin-top: 0.25em;
-            @media ($high-dpi-screen) {
-                background-image: url(images/locate-me@2.png);
-                background-size: 22px 34px;
-            }
-        }
-        a#geolocate_link.loading {
-            background: url("/cobrands/fixmystreet/images/spinner-yellow.gif") 100% 33% no-repeat
-        }
+    }
+}
+
+a#geolocate_link {
+    font-family: $body-font;
+    background: url(images/locate-me.png) $left 0 no-repeat;
+    height: 34px;
+    padding-#{$left}: 24px;
+    margin-top: 0.25em;
+
+    @media ($high-dpi-screen) {
+        background-image: url(images/locate-me@2.png);
+        background-size: 22px 34px;
+    }
+
+    &.loading {
+        background: url("/cobrands/fixmystreet/images/spinner-yellow.gif") 100% 33% no-repeat
     }
 }
 
diff --git a/web/cobrands/greenwich/base.scss b/web/cobrands/greenwich/base.scss
index 0f990c865..bfbb0a62a 100644
--- a/web/cobrands/greenwich/base.scss
+++ b/web/cobrands/greenwich/base.scss
@@ -28,6 +28,10 @@
     background-color: $greenwich_light_grey;
 }
 
+#front-main #postcodeForm {
+    margin-top: 1em;
+}
+
 label[for=pc] {
     color: $greenwich_dark_red;
 }
diff --git a/web/cobrands/oxfordshire/base.scss b/web/cobrands/oxfordshire/base.scss
index 999321a7e..9fd4bc2ad 100644
--- a/web/cobrands/oxfordshire/base.scss
+++ b/web/cobrands/oxfordshire/base.scss
@@ -99,29 +99,15 @@ a:not([class]):focus {
             }
         }
     }
+}
 
-    a#geolocate_link {
-        padding: 0;
-        background: transparent;
-        font-size: inherit;
-        color: $link-color;
-        margin-top: 0.5em;
-
-        &:hover {
-            background-color: transparent;
-            color: $link-hover-color;
-        }
-
-        &:focus {
-            background-color: $color-oxfordshire-bright-yellow;
-            outline: 2px solid $color-oxfordshire-bright-yellow;
-        }
+a#geolocate_link {
+    padding: 0;
+    margin-top: 0.5em;
 
-        &.loading {
-            background: transparent url("/cobrands/fixmystreet/images/spinner-white.gif") 100% 50% no-repeat;
-            padding: 0 1.5em 0 0;
-            border: none;
-        }
+    &.loading {
+        background: transparent url("/cobrands/fixmystreet/images/spinner-white.gif") 100% 50% no-repeat;
+        padding: 0 1.5em 0 0;
     }
 }
 
diff --git a/web/cobrands/oxfordshire/layout.scss b/web/cobrands/oxfordshire/layout.scss
index 1b415903a..e482b1eaf 100644
--- a/web/cobrands/oxfordshire/layout.scss
+++ b/web/cobrands/oxfordshire/layout.scss
@@ -130,18 +130,13 @@ $mappage-header-height: 10em;
             }
         }
     }
+}
 
-    a#geolocate_link {
-        color: $color-oxfordshire-link-blue;
-
-        &:hover {
-            color: $color-oxfordshire-bright-yellow;
-        }
+a#geolocate_link {
+    color: $color-oxfordshire-link-blue; // override default `#front-main a`
 
-        &:focus {
-            background-color: $color-oxfordshire-bright-yellow;
-            outline: 2px solid $color-oxfordshire-bright-yellow;
-        }
+    &:hover {
+        color: $color-oxfordshire-bright-yellow; // override default `#front-main a`
     }
 }
 
diff --git a/web/cobrands/peterborough/base.scss b/web/cobrands/peterborough/base.scss
index 67e199cca..32d883132 100644
--- a/web/cobrands/peterborough/base.scss
+++ b/web/cobrands/peterborough/base.scss
@@ -45,6 +45,7 @@ h1, h2 {
     }
     #postcodeForm {
         background-color: #fff;
+        padding-bottom: 0;
         div input#sub {
             background-color: $link-color;
         }
@@ -53,17 +54,6 @@ h1, h2 {
     .form-hint {
         color: $primary_b;
     }
-    a#geolocate_link {
-        background-color: transparent;
-        padding: 0;
-        color: $link-color;
-        &:hover,
-        &:active,
-        &:focus {
-            background-color: transparent;
-            text-decoration: underline
-        }
-    }
 }
 
 .btn-primary,
diff --git a/web/cobrands/peterborough/layout.scss b/web/cobrands/peterborough/layout.scss
index 62486ab35..cd209f530 100644
--- a/web/cobrands/peterborough/layout.scss
+++ b/web/cobrands/peterborough/layout.scss
@@ -29,13 +29,14 @@ body.frontpage #front-main {
         font-weight: normal;
         font-size: 1.5em;
     }
-    a#geolocate_link {
-        color: $link-color;
-        &:hover,
-        &:active,
-        &:focus {
-            color: $link-hover-color;
-        }
+}
+
+a#geolocate_link {
+    color: $link-color; // override default `#front-main a`
+    &:hover,
+    &:active,
+    &:focus {
+        color: $link-hover-color; // override default `#front-main a`
     }
 }
 
diff --git a/web/cobrands/sass/_base.scss b/web/cobrands/sass/_base.scss
index b52b75f43..29b000fbc 100644
--- a/web/cobrands/sass/_base.scss
+++ b/web/cobrands/sass/_base.scss
@@ -2373,26 +2373,13 @@ label .muted {
       }
     }
   }
-  a#geolocate_link {
-    @include inline-block;
-    vertical-align:top;
-    background:#1a1a1a;
-    color:#C8C8C8;
-    padding:0.5em;
-    font-family: $meta-font;
-    font-size: 0.8125em;
-    @include border-radius(0 0 0.25em 0.25em);
-    &:hover {
-      text-decoration:none;
-      background:#2a2a2a;
-    }
-  }
-  a#geolocate_link.loading {
-      background: #1a1a1a url("/cobrands/fixmystreet/images/spinner-black.gif") flip(100%,0) 50% no-repeat;
-      border-#{$right}: solid 0.5em #1a1a1a;
-      padding-#{$right}: 1.5em;
-  }
 }
+
+a#geolocate_link {
+  display: inline-block;
+  padding: 0.5em;
+}
+
 .no-js #geolocate_link {
     display: none !important;
 }
diff --git a/web/cobrands/sass/_layout.scss b/web/cobrands/sass/_layout.scss
index 02ded6fc1..e02da2bcc 100644
--- a/web/cobrands/sass/_layout.scss
+++ b/web/cobrands/sass/_layout.scss
@@ -860,18 +860,12 @@ textarea.form-error {
       text-decoration: none;
     }
   }
-  a#geolocate_link {
-    color: inherit;
-    background:none;
-    text-decoration: none;
-    padding-bottom: 0;
-    &:hover {
-      text-decoration:underline;
-      background:none;
-    }
-  }
-  a#geolocate_link.loading {
-      border-#{$right}: none;
+}
+
+a#geolocate_link {
+  text-decoration: none; // override `#front-main a`
+  &:hover {
+    text-decoration: underline;
   }
 }
 
diff --git a/web/cobrands/tfl/base.scss b/web/cobrands/tfl/base.scss
index 9c573f331..43ac90612 100644
--- a/web/cobrands/tfl/base.scss
+++ b/web/cobrands/tfl/base.scss
@@ -138,18 +138,6 @@ input.form-error, textarea.form-error {
             }
         } 
     }
-    a#geolocate_link {
-        color: $beck-blue;
-        font-family: $heading-font;
-        text-decoration: underline;
-        font-size: 1.125em;
-        background: transparent;
-        &:hover,
-        &:active,
-        &:focus {
-            background: transparent;
-        }
-    }
     h2 {
         font-style: normal;
         font-family: $body-font;
@@ -158,6 +146,11 @@ input.form-error, textarea.form-error {
     }
 }
 
+a#geolocate_link {
+    font-family: $heading-font;
+    font-size: 1.125em;
+}
+
 .item-list__heading {
     font-family: $body-font;
 }
diff --git a/web/cobrands/tfl/layout.scss b/web/cobrands/tfl/layout.scss
index 8e3c6b5d8..6f63fa06d 100644
--- a/web/cobrands/tfl/layout.scss
+++ b/web/cobrands/tfl/layout.scss
@@ -66,12 +66,11 @@ h1 {
   #postcodeForm div {
     margin: 0;
   }
-  a#geolocate_link {
-    color: $beck-blue;
-    font-family: $heading-font;
-    text-decoration: underline;
-    font-size: 1.125em;
-  }
+}
+
+a#geolocate_link {
+  color: $beck-blue; // override default `#front-main a`
+  text-decoration: underline;
 }
 
 .frontpage .content {
diff --git a/web/cobrands/warwickshire/base.scss b/web/cobrands/warwickshire/base.scss
index 224346195..53bae8431 100644
--- a/web/cobrands/warwickshire/base.scss
+++ b/web/cobrands/warwickshire/base.scss
@@ -79,31 +79,21 @@
             }
         }
     }
+}
 
-    a#geolocate_link {
-        padding: 0;
-        background: transparent;
-        font-size: 1em;
-        color: $link-color;
-        margin-top: 0.5em;
-
-        &:hover {
-            background-color: transparent;
-            color: $link-hover-color;
-        }
-
-        &:focus {
-            outline: 3px solid $warwickshire-yellow;
-        }
+a#geolocate_link {
+    padding: 0;
+    margin-top: 0.5em;
 
-        &.loading,
-        &.loading:hover {
-            background: transparent url("/cobrands/warwickshire/images/spinner-f6f6f6-333333.gif") 100% 50% no-repeat;
-            padding: 0 1.5em 0 0;
-            border: none;
-        }
+    &:focus {
+        outline: 3px solid $warwickshire-yellow;
     }
 
+    &.loading,
+    &.loading:hover {
+        background: transparent url("/cobrands/warwickshire/images/spinner-f6f6f6-333333.gif") 100% 50% no-repeat;
+        padding: 0 1.5em 0 0;
+    }
 }
 
 .box-warning {
diff --git a/web/cobrands/warwickshire/layout.scss b/web/cobrands/warwickshire/layout.scss
index ac360f16d..37cd88b4e 100644
--- a/web/cobrands/warwickshire/layout.scss
+++ b/web/cobrands/warwickshire/layout.scss
@@ -43,17 +43,13 @@
             margin: 1.5em 0 0.5em 0;
         }
     }
+}
 
-    a#geolocate_link {
-        color: $link-color;
-
-        &:hover {
-            color: $link-hover-color;
-        }
+a#geolocate_link {
+    color: $link-color; // override default `#front-main a`
 
-        &:focus {
-            outline: 3px solid $warwickshire-yellow;
-        }
+    &:hover {
+        color: $link-hover-color; // override default `#front-main a`
     }
 }
 
diff --git a/web/cobrands/westminster/base.scss b/web/cobrands/westminster/base.scss
index c67a67f6d..01b7760e8 100644
--- a/web/cobrands/westminster/base.scss
+++ b/web/cobrands/westminster/base.scss
@@ -82,27 +82,16 @@ body.frontpage {
         }
     }
 
-    a#geolocate_link {
-        background: transparent;
-        display: block;
-        padding: 0;
-        margin-top: 0.5em;
-        font-family: inherit;
-        font-size: 1em;
-        border-radius: 0;
-        color: $westminster_blue;
-
-        &:hover {
-            background: transparent;
-            text-decoration: underline;
-        }
-    }
-
     .form-hint {
         color: inherit;
     }
 }
 
+a#geolocate_link {
+    padding: 0;
+    margin-top: 0.5em;
+}
+
 #front-howto h2,
 #front-recently h2 {
     font-weight: bold;
diff --git a/web/cobrands/westminster/layout.scss b/web/cobrands/westminster/layout.scss
index 94483a523..eac7a8432 100644
--- a/web/cobrands/westminster/layout.scss
+++ b/web/cobrands/westminster/layout.scss
@@ -36,8 +36,8 @@
     }
 }
 
-#front-main a#geolocate_link {
-    color: $westminster-blue;
+a#geolocate_link {
+    color: $westminster-blue; // override default `#front-main a`
 }
 
 body.mappage {