[TfL] Initial cobrand design & set up

Co-Authored-By: Dave Arter <davea@mysociety.org>
Co-Authored-By: Chris Mytton <chrism@mysociety.org>

31 files changed, 785 insertions, 0 deletions

diff --git a/perllib/FixMyStreet/Cobrand/TfL.pm b/perllib/FixMyStreet/Cobrand/TfL.pm
new file mode 100644
index 000000000..6dec98b26
--- /dev/null
+++ b/perllib/FixMyStreet/Cobrand/TfL.pm
@@ -0,0 +1,64 @@
+package FixMyStreet::Cobrand::TfL;
+use parent 'FixMyStreet::Cobrand::Whitelabel';
+
+use strict;
+use warnings;
+
+sub council_area_id { return [
+    2511, 2489, 2494, 2488, 2482, 2505, 2512, 2481, 2484, 2495,
+    2493, 2508, 2502, 2509, 2487, 2485, 2486, 2483, 2507, 2503,
+    2480, 2490, 2492, 2500, 2510, 2497, 2499, 2491, 2498, 2506,
+    2496, 2501, 2504
+]; }
+sub council_area { return 'TfL'; }
+sub council_name { return 'TfL'; }
+sub council_url { return 'tfl'; }
+sub area_types  { [ 'LBO' ] }
+sub is_council { 0 }
+
+sub area_check {
+    my ( $self, $params, $context ) = @_;
+
+    my $councils = $params->{all_areas};
+    my $council_match = grep { $councils->{$_} } @{ $self->council_area_id };
+
+    return 1 if $council_match;
+    return ( 0, $self->area_check_error_message($params, $context) );
+}
+
+sub enter_postcode_text {
+    my ($self) = @_;
+    return 'Enter a London postcode, or street name and area';
+}
+
+sub privacy_policy_url { 'https://tfl.gov.uk/corporate/privacy-and-cookies/reporting-street-problems' }
+
+sub about_hook {
+    my $self = shift;
+    my $c = $self->{c};
+
+    if ($c->stash->{template} eq 'about/privacy.html') {
+        $c->res->redirect($self->privacy_policy_url);
+        $c->detach;
+    }
+}
+
+sub body {
+    # Overridden because UKCouncils::body excludes TfL
+    FixMyStreet::DB->resultset('Body')->search({ name => 'TfL' })->first;
+}
+
+# These need to be overridden so the method in UKCouncils doesn't create
+# a fixmystreet.com link (because of the false-returning owns_problem call)
+sub relative_url_for_report { "" }
+sub base_url_for_report {
+    my $self = shift;
+    return $self->base_url;
+}
+
+sub categories_restriction {
+    my ($self, $rs) = @_;
+    return $rs->search( { 'body.name' => 'TfL' } );
+}
+
+1;
diff --git a/templates/email/tfl/_email_color_overrides.html b/templates/email/tfl/_email_color_overrides.html
new file mode 100644
index 000000000..23a78980d
--- /dev/null
+++ b/templates/email/tfl/_email_color_overrides.html
@@ -0,0 +1,18 @@
+[%
+
+color_blue = '#001aa8'
+color_black = '#000000'
+color_white = '#FFFFFF'
+
+header_background_color = color_blue
+header_text_color = color_white
+
+secondary_column_background_color = color_white
+
+button_background_color = color_blue
+button_text_color = color_white
+
+logo_width = "220" # pixel measurement, but without 'px' suffix
+logo_height = "87" # pixel measurement, but without 'px' suffix
+
+%]
diff --git a/templates/email/tfl/site-name.txt b/templates/email/tfl/site-name.txt
new file mode 100644
index 000000000..ef8d7d667
--- /dev/null
+++ b/templates/email/tfl/site-name.txt
@@ -0,0 +1 @@
+Street Care
diff --git a/templates/web/tfl/around/intro.html b/templates/web/tfl/around/intro.html
new file mode 100644
index 000000000..51557dd1e
--- /dev/null
+++ b/templates/web/tfl/around/intro.html
@@ -0,0 +1,2 @@
+<h1>[% loc('Report a problem on a street') %]</h1>
+<h2>[% loc('Report a problem on a street in London or look at and discuss problems that have already been reported.') %]</h2>
diff --git a/templates/web/tfl/contact/_heading.html b/templates/web/tfl/contact/_heading.html
new file mode 100644
index 000000000..a33ed8f0b
--- /dev/null
+++ b/templates/web/tfl/contact/_heading.html
@@ -0,0 +1 @@
+<h1>Contact street care</h1>
diff --git a/templates/web/tfl/email_sent.html b/templates/web/tfl/email_sent.html
new file mode 100644
index 000000000..581ff2b61
--- /dev/null
+++ b/templates/web/tfl/email_sent.html
@@ -0,0 +1,25 @@
+[% INCLUDE 'header.html', bodyclass = 'fullwidthpage', title = loc('Create a report') %]
+
+<div class="confirmation-header confirmation-header--inbox">
+
+    <h1>[% loc("Nearly done! Now check your email&hellip;") %]</h1>
+
+    <p>
+    [% IF email_type == 'problem' %]
+        We’ve sent you a confirmation email. Click the link to publish your problem.
+    [% ELSIF email_type == 'update' %]
+        We’ve sent you a confirmation email. Click the link to publish your update.
+    [% ELSIF email_type == 'alert' %]
+        We’ve sent you a confirmation email. Click the link to activate your alert.
+    [% END %]
+    </p>
+
+    [% TRY %][% INCLUDE '_email_sent_extra.html' %][% CATCH file %][% END %]
+
+    <p>
+        [% loc("Can&rsquo;t find our email? Check your spam folder&nbsp;&ndash; that&rsquo;s the solution 99% of the time.") %]
+    </p>
+
+</div>
+
+[% INCLUDE 'footer.html' %]
diff --git a/templates/web/tfl/footer.html b/templates/web/tfl/footer.html
new file mode 100644
index 000000000..c96c21d00
--- /dev/null
+++ b/templates/web/tfl/footer.html
@@ -0,0 +1,15 @@
+                </div><!-- .content role=main -->
+            </div><!-- .container -->
+        </div><!-- .table-cell -->
+
+        <div class="nav-wrapper">
+            <div class="container">
+                [% INCLUDE "main_nav.html" hide_privacy_link=1 %]
+            </div>
+        </div>
+    </div> <!-- .wrapper -->
+
+    [% INCLUDE 'common_footer_tags.html' %]
+
+</body>
+</html>
diff --git a/templates/web/tfl/footer_extra.html b/templates/web/tfl/footer_extra.html
new file mode 100644
index 000000000..b3f23f3a2
--- /dev/null
+++ b/templates/web/tfl/footer_extra.html
@@ -0,0 +1,11 @@
+<div id="footer" role="contentinfo">
+  <div class="container">
+    <div class="terms-and-conditions-menu" role="navigation" aria-labelledby="site-structure-heading">
+      <h2 id="site-structure-heading" class="visuallyhidden">Site structure and legal information</h2>
+      <ul>
+        <li><a href="https://tfl.gov.uk/corporate/terms-and-conditions/website">Terms &amp; conditions </a></li><li><a href="https://tfl.gov.uk/corporate/privacy-and-cookies/reporting-street-problems">Privacy &amp; cookies</a></li><li><a href="https://tfl.gov.uk/corporate/website-accessibility/">Website accessibility</a></li>
+      </ul>
+    </div>
+  </div>
+</div>
+
diff --git a/templates/web/tfl/header_site.html b/templates/web/tfl/header_site.html
new file mode 100644
index 000000000..48759eff4
--- /dev/null
+++ b/templates/web/tfl/header_site.html
@@ -0,0 +1,13 @@
+<header id="site-header" role="banner">
+  <div class="container clearfix">
+    <div class="logo">
+      <a href="https://tfl.gov.uk/">
+        <span id="site-logo">Transport for London</span>
+      </a>
+    </div>
+    <div class="top-row-extras">
+      <a href="#main-nav"><span>Menu</span><span class="arrow">&nbsp;</span></a>
+      <a href="/" title="Report a problem"><span>Report</span></a>
+    </div>
+  </div>
+</header>
diff --git a/templates/web/tfl/index-steps.html b/templates/web/tfl/index-steps.html
new file mode 100644
index 000000000..a66ac8654
--- /dev/null
+++ b/templates/web/tfl/index-steps.html
@@ -0,0 +1,14 @@
+<h2>[% loc('How to report a problem') %]</h2>
+
+<ol class="big-numbers">
+    <li>[% question %]</li>
+    <li>Tell us where it is on the map</li>
+    <li>[% loc('Enter details of the problem') %]</li>
+    <li>Confirm the report and we will investigate</li>
+</ol>
+
+<section class="full-width">
+[% INCLUDE "front/stats.html" %]
+[% TRY %][% INCLUDE "front/tips.html" %][% CATCH file %][% END %]
+</section>
+
diff --git a/templates/web/tfl/report/form/private_details.html b/templates/web/tfl/report/form/private_details.html
new file mode 100644
index 000000000..6e939cb09
--- /dev/null
+++ b/templates/web/tfl/report/form/private_details.html
@@ -0,0 +1,19 @@
+<!-- private_details.html -->
+<h2 class="form-section-heading form-section-heading--private">[% loc('Tell us about you') %]</h2>
+
+[% UNLESS c.user_exists %]
+<p class="hidden-nojs js-new-report-sign-in-hidden">
+    <a class="js-new-report-show-sign-in" href="#">[% loc('Or sign in with password to prefill this information.') %]</a>
+</p>
+[% END %]
+
+<p class="form-section-description js-new-report-sign-in-hidden" id="js-councils_text_private">
+  [% IF js %]
+    These details will be sent to Transport for London, but will never be shown online without your permission.
+    (<a href="[% c.cobrand.privacy_policy_url %]">[% loc('See our privacy policy') %]</a>.)
+  [% ELSE %]
+    [% PROCESS 'report/new/councils_text_private.html' %]
+  [% END %]
+</p>
+
+<!-- /private_details.html -->
diff --git a/templates/web/tfl/report/new/after_photo.html b/templates/web/tfl/report/new/after_photo.html
new file mode 100644
index 000000000..ed05e4191
--- /dev/null
+++ b/templates/web/tfl/report/new/after_photo.html
@@ -0,0 +1,10 @@
+[% IF c.cobrand.allow_photo_upload %]
+<div class="description_tips" aria-label="[% loc('Tips for perfect photos') %]">
+    <ul class="do">
+        <li>[% loc('Use close-ups and wide shots to show the issue to us') %]</li>
+    </ul>
+    <ul class="dont">
+        <li>[% loc('Avoid personal information and vehicle number plates') %]</li>
+    </ul>
+</div>
+[% END %]
\ No newline at end of file
diff --git a/templates/web/tfl/report/new/councils_text_all.html b/templates/web/tfl/report/new/councils_text_all.html
new file mode 100644
index 000000000..22e130347
--- /dev/null
+++ b/templates/web/tfl/report/new/councils_text_all.html
@@ -0,0 +1,16 @@
+<p>
+[% UNLESS non_public_categories.$category;
+
+    tprintf(
+        'Information you enter here will be sent to us and published for others to see, in accordance with our <a href="%s">privacy policy</a>.',
+        c.cobrand.privacy_policy_url
+    );
+
+ELSE;
+
+    tprintf(
+        'Information you enter here will be sent to us but not published online.',
+    );
+
+END %]
+</p>
diff --git a/templates/web/tfl/report/new/councils_text_private.html b/templates/web/tfl/report/new/councils_text_private.html
new file mode 100644
index 000000000..b007a9524
--- /dev/null
+++ b/templates/web/tfl/report/new/councils_text_private.html
@@ -0,0 +1,4 @@
+[% FILTER collapse %]
+These details will be sent to Transport for London, but will never be shown online without your permission.
+(<a href="[% c.cobrand.privacy_policy_url %]">[% loc('See our privacy policy') %]</a>.)
+[% END -%]
diff --git a/templates/web/tfl/report/new/inline-tips.html b/templates/web/tfl/report/new/inline-tips.html
new file mode 100644
index 000000000..2cd3f2961
--- /dev/null
+++ b/templates/web/tfl/report/new/inline-tips.html
@@ -0,0 +1,11 @@
+<div class="description_tips" aria-label="Tips for successful reports">
+    <ul class="do">
+        <li>Be polite</li>
+        <li>Tell us exactly where this is</li>
+        <li>Say how long the issue has been here</li>
+    </ul>
+    <ul class="dont">
+        <li>Don’t identify or blame people</li>
+        <li>Don’t give out anyone’s contact details</li>
+    </ul>
+</div>
diff --git a/web/cobrands/fixmystreet/images/button-icons-white.png b/web/cobrands/fixmystreet/images/button-icons-white.png
new file mode 100644
index 000000000..aad500505
--- /dev/null
+++ b/web/cobrands/fixmystreet/images/button-icons-white.png
diff --git a/web/cobrands/fixmystreet/images/button-icons-white.svg b/web/cobrands/fixmystreet/images/button-icons-white.svg
new file mode 100644
index 000000000..02619e11c
--- /dev/null
+++ b/web/cobrands/fixmystreet/images/button-icons-white.svg
@@ -0,0 +1 @@
+<svg width="112" height="16" viewBox="0 0 112 16" xmlns="http://www.w3.org/2000/svg"><g fill="none" fill-rule="evenodd"><path fill="#fff" fill-rule="nonzero" d="M18 0h6.5L31 8l-6.5 8H18l6.5-8M14 0H7.5L1 8l6.5 8H14L7.5 8"/><path d="M109 8.5a5 5 0 0 1-4.5 4.4v-3h-1v3A5 5 0 0 1 99 8.5h3v-1h-3a5 5 0 0 1 4.5-4.5v3h1V3a5 5 0 0 1 4.5 4.5h-3v1h3zm1-1a6 6 0 0 0-5.5-5.5V0h-1v2A6 6 0 0 0 98 7.5h-2v1h2a6 6 0 0 0 5.5 5.4V16h1v-2a6 6 0 0 0 5.5-5.5h2v-1h-2zM95.3 0h-.2L80.3 7a.6.6 0 0 0 0 1.2l5.4 2 2.1 5.4c.1.2.3.4.6.4.2 0 .4-.1.5-.3L96 .9V.3a.6.6 0 0 0-.6-.3zm-2.8 2.6l-6.4 6.5-4-1.6 10.4-4.9zm.9.9l-5 10.4-1.5-4 6.5-6.4zM40 4.5L35.5 0 32 3.5 36.5 8 32 12.5l3.5 3.5 4.5-4.5 4.5 4.5 3.5-3.5L43.5 8 48 3.5 44.5 0 40 4.5" fill="#fff"/><path d="M67.4 15.2l-.2-.4 4.8-2.6 4.8 2.6-.2.4-.3-.4a7.8 7.8 0 0 0 .5-.4l.4.4-.5.1-1-5.4 4-3.8.3.4-.5.1a7.7 7.7 0 0 0-.2-.6l.5-.2V6l-5.5-.8-2.3-5 .4-.2v.5a8 8 0 0 0-.6 0V0l.4.2-2.4 5-5.4.7v-.5l.4.2a7.7 7.7 0 0 0-.2.6l-.5-.1.3-.4 4 3.8-1 5.4h-.5l.4-.5a7.8 7.8 0 0 0 .5.4l-.3.4z" stroke="#fff"/><path d="M51.4 15.2l4.6-2.4 4.6 2.4.6-.4-1-5.1L64 6.1l-.2-.7-5.2-.7L56.3 0a8.4 8.4 0 0 0-.6 0l-2.3 4.7-5.2.7-.2.7 3.7 3.6-.9 5.1.6.4z" fill="#00BD08"/></g></svg>
\ No newline at end of file
diff --git a/web/cobrands/tfl/_colours.scss b/web/cobrands/tfl/_colours.scss
new file mode 100644
index 000000000..51844f00f
--- /dev/null
+++ b/web/cobrands/tfl/_colours.scss
@@ -0,0 +1,76 @@
+/* COLOURS */
+
+$johnston-black: #03071C;
+$beck-blue: #0019A8;
+$dark: #2D3039;
+$grey90: #637282;
+$grey70: #86909E;
+$grey50: #C1C8D2;
+$grey30: #E1E4E8;
+$grey10: #F2F4F5;
+$grey5: #F7F9FA;
+$white: #FFFFFF;
+
+$yellow: #FAB928;
+$yellow-light: #FDEBCE;
+$blue-light: #F2F4FF;
+$blue-dark: #000C51;
+$turquoise: #00727D;
+$green: #00A95D;
+$red-light: #FBE9E8;
+$red: #DC241F;
+
+$mappage-header-height: 58px + 23px;
+
+$body-font: Johnston100-Light, Arial, Helvetica, sans-serif;
+$meta-font: Johnston100-Light, Arial, Helvetica, sans-serif;
+$heading-font: Johnston100-Regular, Arial, Helvetica, sans-serif;
+$bold-font: Johnston100-Medium, Arial, Helvetica, sans-serif;
+
+/* Primary is white on bluey */
+$primary: $beck-blue;
+$primary_b: $johnston-black;
+$primary_text: $johnston-black;
+
+$link-color: $beck-blue;
+$link-hover-color: $blue-dark;
+
+$base_bg: $white;
+$base_fg: $johnston-black;
+
+$map_nav_bg: $johnston-black;
+$nav_fg: $white;
+$nav_fg_hover: $primary;
+
+$col_click_map: $beck-blue;
+
+$col_fixed_label: #00BD08;
+$col_fixed_label_dark: #4B8304;
+
+$header-top-border: false;
+
+@mixin tflbutton {
+  background: $beck-blue;
+  border-radius: 22.5px;
+  font-family: $heading-font;
+  padding: 0.7em 2em;
+  display: inline-block;
+  border: 0;
+  color: $white !important;
+  &:hover,
+  &:active,
+  &:focus {
+    background: transparent;
+    background-color: $blue-dark;
+    color: $white !important;
+  }
+}
+
+@mixin tflfield {
+  border: 1px solid $dark;
+  border-radius: 2px;
+  padding: 0.58em;
+  font-family: $body-font;
+  background-color: $white;
+  box-shadow: none;
+}
\ No newline at end of file
diff --git a/web/cobrands/tfl/base.scss b/web/cobrands/tfl/base.scss
new file mode 100644
index 000000000..739c64475
--- /dev/null
+++ b/web/cobrands/tfl/base.scss
@@ -0,0 +1,292 @@
+@font-face {
+    font-family: 'Johnston100-Light';
+    src: url("fonts/Johnston100-Light.woff2") format("woff2"),url("fonts/Johnston100-Light.woff") format("woff")
+}
+
+@font-face {
+    font-family: 'Johnston100-Medium';
+    src: url("fonts/Johnston100-Medium.woff2") format("woff2"),url("fonts/Johnston100-Medium.woff") format("woff")
+}
+
+@font-face {
+    font-family: 'Johnston100-Regular';
+    src: url("fonts/Johnston100-Regular.woff2") format("woff2"),url("fonts/Johnston100-Regular.woff") format("woff")
+}
+
+@font-face {
+    font-family: 'Johnston100-Bold';
+    src: url("fonts/Johnston100-Bold.woff2") format("woff2"),url("fonts/Johnston100-Bold.woff") format("woff")
+}
+
+@import "../sass/h5bp";
+@import "./_colours";
+@import "../sass/mixins";
+@import "../sass/base";
+
+
+
+/* General */
+
+body {
+    font-family: $body-font;
+    font-size: 18px;
+    letter-spacing: 0.1px;
+}
+
+h1 {
+    font-family: $heading-font;
+    letter-spacing: -0.85px;
+    font-size: 1.888888889em; //34px
+    line-height: 1.235294118em; //42px
+}
+
+h2 {
+    font-family: $heading-font;
+    font-size: 1.444444444em; //26px
+    line-height: 1.230769231em; //32px
+}
+
+h3 {
+    font-family: $heading-font;
+    font-size: 1.166666667em; //21px
+    line-height: 1.238095238em; //26px
+}
+
+a, .fake-link {
+    text-decoration: underline;
+}
+
+.btn--primary,
+.btn,
+.green-btn {
+    @include tflbutton;
+}
+
+.form-control, .dropzone {
+    @include tflfield;
+}
+
+div.form-error, p.form-error {
+    background: $red;
+}
+
+input.form-error, textarea.form-error {
+    border-color: $red;
+}
+
+
+.btn--back,
+.btn--forward,
+.btn--cancel,
+.btn--navigate,
+.btn--geolocate,
+.btn--shortlist,
+.btn--shortlisted {
+    &:before {
+        @include svg-background-image('/cobrands/fixmystreet/images/button-icons-white');
+    }
+}
+
+/* Header */
+
+#site-logo {
+    @include svg-background-image("/cobrands/tfl/images/Tfl_Logo_Blue-banner");
+    background-repeat: no-repeat;
+    background-size: 170px 60px;
+    height: 60px;
+    width: 170px;
+    padding: 0;
+    float: left;
+}
+
+#site-header {
+    background-color: $dark;
+    position: relative
+}
+
+
+/* Homepage */
+#front-main {
+    background-color: transparent;
+    text-align: left;
+    #postcodeForm {
+        color: $johnston-black;
+        margin-top: 1em;
+        background-color: transparent;
+        label {
+            font-family: $bold-font;
+        }
+        div {
+            display: block;
+            border: 0;
+            input#sub {
+                @include tflbutton;
+                flex: unset;
+                margin-top: 1em;
+            }
+            input#pc {
+                width: 100%;
+                flex: unset;
+                @include tflfield;
+            }
+        } 
+    }
+    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;
+        font-size: 1.625em;
+        max-width: 29em;
+    }
+}
+
+.item-list__heading {
+    font-family: $body-font;
+}
+
+ol.big-numbers>li {
+    list-style: decimal;
+    padding: 0;
+    margin-left: 1em;
+    margin-bottom: 1em;
+
+    &:before {
+        display: none;
+    }
+}
+
+#front_stats {
+    background-color: transparent;
+    font-family: $heading-font;
+    div {
+        font-size: 1em;
+    }
+    big {
+        color: $beck-blue;
+        letter-spacing: -1px;
+    }
+}
+
+.item-list--front-page {
+    .item-list--reports__item {
+        border-bottom: 1px solid $grey50;
+    }
+}
+
+.item-list--reports li > a,
+#key-tools a,
+.problem-back {
+    text-decoration: none;
+}
+
+/* Mobile navigation links */
+
+.top-row-extras a, .top-row-extras a:visited {
+  color: #fff;
+}
+.top-row-extras a:first-child {
+  border-left: 1px solid #565961;
+  margin-right: -1em;
+}
+.top-row-extras a {
+  float: right;
+  padding: 18px 8px 13px;
+  text-decoration: none;
+  .arrow {
+    display: inline-block;
+    background-image: url("/cobrands/tfl/images/arrow@2x.png");
+    background-image: url("/cobrands/tfl/images/arrow.png") \9;
+    background-size: 32px 32px;
+    height: 28px;
+    width: 21px;
+    margin: -4px 0 0 -8px;
+  }
+}
+
+.nav-menu {
+    border-top: 1px solid $grey50;
+}
+
+.nav-menu a, .nav-menu span {
+    color: $beck-blue;
+    font-family: $heading-font;
+    border: 0;
+    background-color: transparent;
+    text-decoration: underline;
+    &:hover,
+    &:active,
+    &:focus,
+    &:visited {
+        color: $blue-dark;
+        background-color: transparent;
+    }
+}
+
+.top-row-extras span {
+    float: left;
+}
+
+.top-row-extras a {
+    display: block;
+    -webkit-transition: background-color 0.3s;
+    -moz-transition: background-color 0.3s;
+    transition: background-color 0.3s
+}
+.top-row-extras a:hover {
+    -webkit-transition: none;
+    -moz-transition: none;
+    transition: none;
+}
+
+.top-row-extras a:hover,.top-row-extras a:focus {
+    background-color: #444856;
+    border-bottom: 3px solid #2070B0;
+    margin-bottom: -3px
+}
+
+/* Footer */
+
+#footer {
+    border-top: 3px solid $grey50;
+    background-color: $dark;
+    padding: 3em 0;
+}
+
+#footer ul, #footer li {
+    list-style-type: none outside none;
+    margin: 0;
+}
+
+#footer a,#footer a:visited {
+    color: $white;
+    text-decoration: underline;
+}
+
+
+#footer .about-tfl-menu,#footer .terms-and-conditions-menu {
+    margin: 0
+}
+
+.pagination a {
+    border-radius: 22.5px;
+    color: #fff;
+    padding: 0.3em 1em;
+    font-size: 14px;
+    &:hover,
+    &:active,
+    &:focus,
+    &:visited {
+        color: #fff;
+    }
+}
diff --git a/web/cobrands/tfl/fonts/Johnston100-Light.woff b/web/cobrands/tfl/fonts/Johnston100-Light.woff
new file mode 100644
index 000000000..40f4b1f0c
--- /dev/null
+++ b/web/cobrands/tfl/fonts/Johnston100-Light.woff
diff --git a/web/cobrands/tfl/fonts/Johnston100-Light.woff2 b/web/cobrands/tfl/fonts/Johnston100-Light.woff2
new file mode 100644
index 000000000..7a03c58d1
--- /dev/null
+++ b/web/cobrands/tfl/fonts/Johnston100-Light.woff2
diff --git a/web/cobrands/tfl/fonts/Johnston100-Medium.woff b/web/cobrands/tfl/fonts/Johnston100-Medium.woff
new file mode 100644
index 000000000..b5cb11f8d
--- /dev/null
+++ b/web/cobrands/tfl/fonts/Johnston100-Medium.woff
diff --git a/web/cobrands/tfl/fonts/Johnston100-Medium.woff2 b/web/cobrands/tfl/fonts/Johnston100-Medium.woff2
new file mode 100644
index 000000000..804a825c6
--- /dev/null
+++ b/web/cobrands/tfl/fonts/Johnston100-Medium.woff2
diff --git a/web/cobrands/tfl/fonts/Johnston100-Regular.woff b/web/cobrands/tfl/fonts/Johnston100-Regular.woff
new file mode 100644
index 000000000..ba329f22c
--- /dev/null
+++ b/web/cobrands/tfl/fonts/Johnston100-Regular.woff
diff --git a/web/cobrands/tfl/fonts/Johnston100-Regular.woff2 b/web/cobrands/tfl/fonts/Johnston100-Regular.woff2
new file mode 100644
index 000000000..2afe1f926
--- /dev/null
+++ b/web/cobrands/tfl/fonts/Johnston100-Regular.woff2
diff --git a/web/cobrands/tfl/images/Tfl_Logo_Blue-banner.png b/web/cobrands/tfl/images/Tfl_Logo_Blue-banner.png
new file mode 100644
index 000000000..2614ff001
--- /dev/null
+++ b/web/cobrands/tfl/images/Tfl_Logo_Blue-banner.png
diff --git a/web/cobrands/tfl/images/Tfl_Logo_Blue-banner.svg b/web/cobrands/tfl/images/Tfl_Logo_Blue-banner.svg
new file mode 100644
index 000000000..8bf9d52cd
--- /dev/null
+++ b/web/cobrands/tfl/images/Tfl_Logo_Blue-banner.svg
@@ -0,0 +1,33 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="612px" height="238px" viewBox="0 0 612 238" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 55.2 (78181) - https://sketchapp.com -->
+    <title>Tfl_Logo_Blue-banner</title>
+    <desc>Created with Sketch.</desc>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Tfl_Logo_Blue-banner" fill-rule="nonzero">
+            <rect id="Rectangle" fill="#0019A8" x="0.5" y="0.1" width="610.9" height="237.6"></rect>
+            <g id="Group" transform="translate(85.000000, 51.000000)" fill="#FFFFFF">
+                <path d="M84,0.4 C46.8,0.4 16.6,30.6 16.6,67.8 C16.6,105 46.8,135.2 84,135.2 C121.2,135.2 151.4,105 151.4,67.8 C151.4,30.6 121.2,0.4 84,0.4 M127.5,67.9 C127.5,91.9 108,111.4 84,111.4 C60,111.4 40.5,91.9 40.5,67.9 C40.5,43.9 60,24.4 84,24.4 C108,24.4 127.5,43.9 127.5,67.9" id="Shape"></path>
+                <rect id="Rectangle" x="0.9" y="54.3" width="166" height="27.3"></rect>
+                <polygon id="Path" points="205.6 38.5 205.6 60 199.2 60 199.2 38.5 191.9 38.5 191.9 32.9 212.9 32.9 212.9 38.5"></polygon>
+                <path d="M222.3,38 L222.3,44.4 L224.5,44.4 C225.7,44.4 226.6,44.1 227.3,43.5 C228,42.9 228.3,42.1 228.3,41.1 C228.3,40.2 228,39.5 227.3,38.9 C226.7,38.3 225.8,38 224.7,38 L222.3,38 L222.3,38 Z M230.2,60 L223.5,49.8 L222.3,49.8 L222.3,60 L216,60 L216,33 L225.2,33 C228.2,33 230.6,33.7 232.2,35.2 C233.9,36.7 234.7,38.7 234.7,41.2 C234.7,42.9 234.3,44.4 233.4,45.6 C232.5,46.9 231.3,47.8 229.7,48.4 L237.4,60 L230.2,60 Z" id="Shape"></path>
+                <path d="M251.7,40.3 L248.7,49.5 L254.8,49.5 L251.7,40.3 Z M258.2,60 L256.6,55.1 L247,55.1 L245.4,60 L238.5,60 L248.5,33 L254.9,33 L265.2,60 L258.2,60 Z" id="Shape"></path>
+                <polygon id="Path" points="286.2 60 274.3 43.2 274.3 60 268 60 268 32.9 274.3 32.9 286.4 49.8 286.4 32.9 292.8 32.9 292.8 60"></polygon>
+                <path d="M296.2,54.6 L301,51.7 C301.9,53.9 303.4,55 305.5,55 C306.6,55 307.5,54.8 308.1,54.3 C308.7,53.8 309.1,53.2 309.1,52.4 C309.1,51.7 308.9,51.1 308.4,50.6 C307.9,50.1 306.5,49.3 304.3,48.3 C301.7,47.1 299.9,45.9 299,44.7 C298,43.5 297.6,42 297.6,40.2 C297.6,38 298.4,36.2 300.1,34.7 C301.8,33.2 303.9,32.5 306.5,32.5 C310.3,32.5 313,34 314.7,36.9 L310.3,39.7 C309.5,38.3 308.2,37.6 306.5,37.6 C305.7,37.6 305,37.8 304.4,38.2 C303.9,38.6 303.6,39.2 303.6,39.8 C303.6,40.5 303.9,41 304.4,41.5 C305,42 306.2,42.6 308,43.5 C310.7,44.8 312.7,46.1 313.8,47.3 C314.9,48.6 315.5,50.2 315.5,52.1 C315.5,54.5 314.5,56.5 312.6,58 C310.7,59.6 308.3,60.3 305.5,60.3 C301.2,60.5 298.2,58.5 296.2,54.6" id="Path"></path>
+                <path d="M325.3,38.1 L325.3,45.9 L327.3,45.9 C328.8,45.9 330,45.6 330.8,44.9 C331.6,44.2 332,43.3 332,42 C332,40.7 331.6,39.8 330.8,39.1 C330,38.4 328.9,38.1 327.3,38.1 L325.3,38.1 L325.3,38.1 Z M325.3,51.1 L325.3,60 L319,60 L319,33 L328,33 C331.3,33 333.8,33.8 335.6,35.4 C337.4,37 338.3,39.2 338.3,42 C338.3,44.8 337.3,47 335.4,48.7 C333.5,50.3 330.9,51.2 327.7,51.2 L325.3,51.2 L325.3,51.1 Z" id="Shape"></path>
+                <path d="M355.3,54.8 C357.6,54.8 359.5,54 361.1,52.4 C362.6,50.8 363.4,48.8 363.4,46.4 C363.4,44 362.6,42 361.1,40.5 C359.6,38.9 357.6,38.1 355.3,38.1 C353,38.1 351.1,38.9 349.6,40.5 C348.1,42.1 347.3,44.1 347.3,46.4 C347.3,48.8 348.1,50.7 349.6,52.3 C351.1,54 353,54.8 355.3,54.8 M355.3,60.5 C351.2,60.5 347.8,59.2 345,56.5 C342.2,53.8 340.9,50.5 340.9,46.5 C340.9,42.6 342.3,39.2 345,36.5 C347.8,33.8 351.2,32.4 355.3,32.4 C359.4,32.4 362.8,33.7 365.6,36.4 C368.4,39.1 369.7,42.4 369.7,46.4 C369.7,50.4 368.3,53.7 365.6,56.4 C362.9,59.1 359.4,60.5 355.3,60.5" id="Shape"></path>
+                <path d="M379.7,38 L379.7,44.4 L381.9,44.4 C383.1,44.4 384,44.1 384.7,43.5 C385.4,42.9 385.7,42.1 385.7,41.1 C385.7,40.2 385.4,39.5 384.7,38.9 C384.1,38.3 383.2,38 382.1,38 L379.7,38 L379.7,38 Z M387.6,60 L380.9,49.8 L379.7,49.8 L379.7,60 L373.4,60 L373.4,33 L382.6,33 C385.6,33 388,33.7 389.6,35.2 C391.3,36.7 392.1,38.7 392.1,41.2 C392.1,42.9 391.7,44.4 390.8,45.6 C389.9,46.9 388.7,47.8 387.1,48.4 L394.8,60 L387.6,60 Z" id="Shape"></path>
+                <polygon id="Path" points="409.7 38.5 409.7 60 403.4 60 403.4 38.5 396.1 38.5 396.1 32.9 417 32.9 417 38.5"></polygon>
+                <polygon id="Path" points="198.2 81.3 198.2 85.9 206.7 85.9 206.7 91.3 198.2 91.3 198.2 102.9 191.9 102.9 191.9 75.8 209 75.8 209 81.3"></polygon>
+                <path d="M225.5,97.7 C227.8,97.7 229.7,96.9 231.2,95.3 C232.7,93.7 233.5,91.7 233.5,89.3 C233.5,86.9 232.7,84.9 231.2,83.4 C229.7,81.8 227.7,81 225.5,81 C223.2,81 221.3,81.8 219.8,83.4 C218.3,85 217.5,87 217.5,89.3 C217.5,91.7 218.3,93.6 219.8,95.2 C221.3,96.9 223.2,97.7 225.5,97.7 M225.5,103.4 C221.4,103.4 218,102.1 215.2,99.3 C212.5,96.6 211.1,93.3 211.1,89.3 C211.1,85.4 212.5,82 215.2,79.3 C218,76.6 221.4,75.2 225.5,75.2 C229.6,75.2 233,76.5 235.8,79.2 C238.6,81.9 239.9,85.2 239.9,89.2 C239.9,93.2 238.5,96.5 235.8,99.2 C233.1,102 229.6,103.4 225.5,103.4" id="Shape"></path>
+                <path d="M249.9,80.9 L249.9,87.2 L252.1,87.2 C253.3,87.2 254.2,86.9 254.9,86.3 C255.6,85.7 255.9,84.9 255.9,83.9 C255.9,83 255.6,82.3 254.9,81.7 C254.3,81.1 253.4,80.8 252.3,80.8 L249.9,80.8 L249.9,80.9 Z M257.8,102.9 L251.1,92.7 L249.9,92.7 L249.9,102.9 L243.5,102.9 L243.5,75.9 L252.7,75.9 C255.7,75.9 258.1,76.6 259.7,78.1 C261.4,79.6 262.2,81.6 262.2,84.1 C262.2,85.8 261.8,87.3 260.9,88.5 C260,89.8 258.8,90.7 257.2,91.3 L264.9,102.9 L257.8,102.9 Z" id="Shape"></path>
+                <polygon id="Path" points="276.4 102.9 276.4 75.8 282.7 75.8 282.7 97.2 293.1 97.2 293.1 102.9"></polygon>
+                <path d="M309.7,97.7 C312,97.7 313.9,96.9 315.4,95.3 C316.9,93.7 317.7,91.7 317.7,89.3 C317.7,86.9 316.9,84.9 315.4,83.4 C313.9,81.8 312,81 309.7,81 C307.4,81 305.5,81.8 304,83.4 C302.5,85 301.7,87 301.7,89.3 C301.7,91.7 302.5,93.6 304,95.2 C305.5,96.9 307.4,97.7 309.7,97.7 M309.7,103.4 C305.6,103.4 302.2,102.1 299.4,99.3 C296.6,96.6 295.3,93.3 295.3,89.3 C295.3,85.4 296.7,82 299.4,79.3 C302.2,76.6 305.6,75.2 309.7,75.2 C313.8,75.2 317.2,76.5 320,79.2 C322.8,81.9 324.1,85.2 324.1,89.2 C324.1,93.2 322.7,96.5 320,99.2 C317.2,102 313.8,103.4 309.7,103.4" id="Shape"></path>
+                <polygon id="Path" points="345.9 102.9 334 86.1 334 102.9 327.7 102.9 327.7 75.8 334 75.8 346.1 92.8 346.1 75.8 352.4 75.8 352.4 102.9"></polygon>
+                <path d="M363.3,81.1 L363.3,97.6 L365,97.6 C367.9,97.6 370.2,96.9 371.9,95.4 C373.6,94 374.4,91.9 374.4,89.4 C374.4,86.7 373.5,84.7 371.9,83.3 C370.2,81.9 368,81.2 365,81.2 L363.3,81.2 L363.3,81.1 Z M356.9,102.9 L356.9,75.9 L365.6,75.9 C370.2,75.9 373.9,77.1 376.6,79.5 C379.3,81.9 380.7,85.1 380.7,89.2 C380.7,93.6 379.3,96.9 376.6,99.3 C373.9,101.7 370.1,102.9 365.2,102.9 L356.9,102.9 L356.9,102.9 Z" id="Shape"></path>
+                <path d="M397.8,97.7 C400.1,97.7 402,96.9 403.6,95.3 C405.1,93.7 405.9,91.7 405.9,89.3 C405.9,86.9 405.1,84.9 403.6,83.4 C402.1,81.8 400.1,81 397.8,81 C395.5,81 393.6,81.8 392.1,83.4 C390.6,85 389.8,87 389.8,89.3 C389.8,91.7 390.6,93.6 392.1,95.2 C393.6,96.9 395.6,97.7 397.8,97.7 M397.8,103.4 C393.7,103.4 390.3,102.1 387.5,99.3 C384.8,96.6 383.4,93.3 383.4,89.3 C383.4,85.4 384.8,82 387.5,79.3 C390.3,76.6 393.7,75.2 397.8,75.2 C401.9,75.2 405.3,76.5 408.1,79.2 C410.9,81.9 412.3,85.2 412.3,89.2 C412.3,93.2 410.9,96.5 408.1,99.2 C405.4,102 401.9,103.4 397.8,103.4" id="Shape"></path>
+                <polygon id="Path" points="434.5 102.9 422.7 86.1 422.7 102.9 416.3 102.9 416.3 75.8 422.7 75.8 434.8 92.8 434.8 75.8 441.1 75.8 441.1 102.9"></polygon>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/web/cobrands/tfl/images/arrow.png b/web/cobrands/tfl/images/arrow.png
new file mode 100644
index 000000000..262d99b07
--- /dev/null
+++ b/web/cobrands/tfl/images/arrow.png
diff --git a/web/cobrands/tfl/images/arrow@2x.png b/web/cobrands/tfl/images/arrow@2x.png
new file mode 100644
index 000000000..0b0d38b37
--- /dev/null
+++ b/web/cobrands/tfl/images/arrow@2x.png
diff --git a/web/cobrands/tfl/images/email-logo.gif b/web/cobrands/tfl/images/email-logo.gif
new file mode 100644
index 000000000..74b56b6be
--- /dev/null
+++ b/web/cobrands/tfl/images/email-logo.gif
diff --git a/web/cobrands/tfl/layout.scss b/web/cobrands/tfl/layout.scss
new file mode 100644
index 000000000..32c8930eb
--- /dev/null
+++ b/web/cobrands/tfl/layout.scss
@@ -0,0 +1,159 @@
+@import "_colours";
+@import "../sass/layout";
+
+h1 {
+  letter-spacing: -1px;
+  font-size: 2.333333333em; //42px
+  line-height: 1.142857143em; //42px
+}
+
+/* Top */
+#site-header {
+  &:after {
+    content: " ";
+    height: 3.75em;
+    display: block;
+    border-bottom: 1px solid $grey50;
+    background-color: white;
+  }
+}
+
+#main-nav {
+  float: none;
+  margin-top: 3em;
+
+  .ie9 & > * {
+    #{$right}: auto;
+    #{$left}: 0;
+  }
+}
+
+.nav-menu {
+  border: 0;
+}
+
+.nav-menu a, .nav-menu span {
+  color: $beck-blue;
+  font-family: $heading-font;
+  font-size: 1.125em;
+  border: 0;
+  background-color: transparent;
+  text-decoration: underline;
+  &:hover,
+  &:active,
+  &:focus,
+  &:visited {
+      color: $blue-dark;
+      background-color: transparent;
+  }
+}
+
+.nav-menu--main a.report-a-problem-btn {
+  background: transparent;
+  &:hover,
+  &:active,
+  &:focus {
+    background: transparent;
+  }
+}
+
+/* Homepage */
+#front-main {
+  background-color: transparent;
+  border-bottom: 1px solid $grey50;
+  margin-top: 3em;
+  padding-bottom: 2em;
+  #postcodeForm div {
+    margin: 0;
+  }
+  a#geolocate_link {
+    color: $beck-blue;
+    font-family: $heading-font;
+    text-decoration: underline;
+    font-size: 1.125em;
+  }
+}
+
+.frontpage .content {
+  padding: 2em 0;
+}
+
+#front_stats {
+  border: 0;
+}
+
+/* Bottom */
+
+#footer li {
+  display: inline-block;
+  width: auto;
+  margin-right: 2em;
+}
+
+/* Navigation */
+
+.top-row-extras { display: none; }
+
+/* Map page */
+
+body.mappage {
+  #site-header {
+    @include box-sizing(border-box);
+    top: 0;
+  }
+
+  // Reinstate the floated nav bar on map pages
+  #main-nav {
+    float: #{$right};
+    margin-top: 0;
+    min-height: auto;
+    height: auto;
+    .nav-menu a, .nav-menu span {
+
+    }
+    // IE9 uses absolute positioning rather than floats.
+    .ie9 & {
+      float: none;
+
+      & > * {
+        #{$right}: 0;
+        #{$left}: auto;
+      }
+    }
+  }
+
+  // A few changes to the nav items now they're on a black background
+  .nav-menu {
+    a, span {
+      color: white;
+      font-size: 1.1em;
+    }
+
+    a {
+      &:hover,
+      &:active,
+      &:focus {
+        background: transparent;
+        text-decoration: underline;
+      }
+    }
+
+    a.report-a-problem-btn {
+      color: white;
+      background: transparent;
+    }
+  }
+
+  .big-green-banner {
+    display: block;
+    text-transform: none;
+  }
+}
+
+
+
+body.mappage #footer { display: none; }
+
+.big-green-banner {
+  text-transform: none;
+}