[TfL] Fix white gap below header

I’m not sure where the previous header height measurements came from,
but they were causing a white gap under the map page header.

Standardising on the same 60px height for the header and nav, on both
map pages and regular pages, keeps things simple.

With the white gap fixed, it became apparent that the big blue button
on the /around page was touching the blue TFL logo in the header. So
I added a dark grey line to give some contrast.

2 files changed, 7 insertions, 5 deletions

diff --git a/web/cobrands/tfl/_colours.scss b/web/cobrands/tfl/_colours.scss
index e0619a990..1cffc3f55 100644
--- a/web/cobrands/tfl/_colours.scss
+++ b/web/cobrands/tfl/_colours.scss
@@ -20,7 +20,7 @@ $green: #00A95D;
 $red-light: #FBE9E8;
 $red: #DC241F;
 
-$mappage-header-height: 58px + 23px;
+$mappage-header-height: 60px;
 
 $body-font: Johnston100-Light, Arial, Helvetica, sans-serif;
 $meta-font: Johnston100-Light, Arial, Helvetica, sans-serif;
diff --git a/web/cobrands/tfl/layout.scss b/web/cobrands/tfl/layout.scss
index 32c8930eb..8e3c6b5d8 100644
--- a/web/cobrands/tfl/layout.scss
+++ b/web/cobrands/tfl/layout.scss
@@ -11,7 +11,7 @@ h1 {
 #site-header {
   &:after {
     content: " ";
-    height: 3.75em;
+    height: $mappage-header-height + 1px;
     display: block;
     border-bottom: 1px solid $grey50;
     background-color: white;
@@ -20,7 +20,7 @@ h1 {
 
 #main-nav {
   float: none;
-  margin-top: 3em;
+  margin-top: $mappage-header-height;
 
   .ie9 & > * {
     #{$right}: auto;
@@ -150,10 +150,12 @@ body.mappage {
   }
 }
 
-
-
 body.mappage #footer { display: none; }
 
 .big-green-banner {
   text-transform: none;
+
+  // Prevent blue button from touching blue logo above.
+  // The 3px border is stolen from the official TFL website header.
+  border-top: 3px solid #121315;
 }