[Hackney] Initial cobrand design & privacy policy amendment

Co-Authored-By: Struan Donald <struan@exo.org.uk>

For https://github.com/mysociety/fixmystreet-commercial/issues/1808

22 files changed, 763 insertions, 2 deletions

diff --git a/.cypress/cypress/integration/hackney.js b/.cypress/cypress/integration/hackney.js
new file mode 100644
index 000000000..a4293b028
--- /dev/null
+++ b/.cypress/cypress/integration/hackney.js
@@ -0,0 +1,19 @@
+describe('When you look at the Hackney site', function() {
+
+  beforeEach(function() {
+    cy.server();
+    cy.route('/report/new/ajax*').as('report-ajax');
+    cy.visit('http://hackney.localhost:3001/');
+    cy.contains('Hackney Council');
+    cy.should('not.contain', 'Hackney Borough');
+    cy.get('[name=pc]').type('E8 1DY');
+    cy.get('[name=pc]').parents('form').submit();
+  });
+
+  it('uses the correct name', function() {
+    cy.get('#map_box').click();
+    cy.wait('@report-ajax');
+    cy.get('select:eq(4)').select('Potholes');
+    cy.contains('sent to Hackney Council');
+  });
+});
diff --git a/bin/browser-tests b/bin/browser-tests
index 32b844127..e0b9bedfe 100755
--- a/bin/browser-tests
+++ b/bin/browser-tests
@@ -11,7 +11,7 @@ my ($cobrand, $coords, $area_id, $name, $mapit_url, $coverage);
 
 BEGIN {
     $config_file = 'conf/general.yml-example';
-    $cobrand = [ 'borsetshire', 'fixmystreet', 'northamptonshire', 'bathnes', 'buckinghamshire', 'hounslow', 'isleofwight', 'peterborough', 'tfl' ];
+    $cobrand = [ 'borsetshire', 'fixmystreet', 'northamptonshire', 'bathnes', 'buckinghamshire', 'hounslow', 'isleofwight', 'peterborough', 'tfl', 'hackney' ];
     $coords = '51.532851,-2.284277';
     $area_id = 2608;
     $name = 'Borsetshire';
@@ -190,7 +190,7 @@ browser-tests [running options] [fixture options] [cypress options]
    --help           this help message
 
  Fixture option:
-   --cobrand        Cobrand(s) to use, default is fixmystreet,northamptonshire,bathnes,buckinghamshire,isleofwight,peterborough,tfl
+   --cobrand        Cobrand(s) to use, default is fixmystreet,northamptonshire,bathnes,buckinghamshire,isleofwight,peterborough,tfl,hackney
    --coords         Default co-ordinates for created reports
    --area_id        Area ID to use for created body
    --name           Name to use for created body
diff --git a/bin/fixmystreet.com/fixture b/bin/fixmystreet.com/fixture
index 082fc6309..e8dd3f364 100755
--- a/bin/fixmystreet.com/fixture
+++ b/bin/fixmystreet.com/fixture
@@ -99,6 +99,7 @@ if ($opt->test_fixtures) {
         { area_id => 2257, categories => ['Flytipping', 'Graffiti'], name => 'Chiltern District Council' },
         { area_id => 2397, categories => [ 'Graffiti' ], name => 'Northampton Borough Council' },
         { area_id => 2483, categories => [ 'Potholes', 'Other' ], name => 'Hounslow Borough Council' },
+        { area_id => 2508, categories => [ 'Potholes', 'Other' ], name => 'Hackney Council' },
         { area_id => 2636, categories => [ 'Potholes', 'Private', 'Extra' ], name => 'Isle of Wight Council' },
         { area_id => 2566, categories => [ 'Fallen branch', 'Light Out', 'Light Dim', 'Fallen Tree', 'Damaged Tree' ], name => 'Peterborough City Council' },
         { area_id => 2498, categories => [ 'Incorrect timetable', 'Glass broken', 'Mobile Crane Operation' ], name => 'TfL' },
diff --git a/perllib/FixMyStreet/Cobrand/Hackney.pm b/perllib/FixMyStreet/Cobrand/Hackney.pm
new file mode 100644
index 000000000..e726154b0
--- /dev/null
+++ b/perllib/FixMyStreet/Cobrand/Hackney.pm
@@ -0,0 +1,24 @@
+package FixMyStreet::Cobrand::Hackney;
+use parent 'FixMyStreet::Cobrand::Whitelabel';
+
+use strict;
+use warnings;
+
+sub council_area_id { return 2508; }
+sub council_area { return 'Hackney'; }
+sub council_name { return 'Hackney Council'; }
+sub council_url { return 'hackney'; }
+sub send_questionnaires { 0 }
+
+sub disambiguate_location {
+    my $self    = shift;
+    my $string  = shift;
+
+    return {
+        %{ $self->SUPER::disambiguate_location() },
+        centre => '51.552267,-0.063316',
+        bounds => [ 51.519814, -0.104511, 51.577784, -0.016527 ],
+    };
+}
+
+1;
diff --git a/t/Mock/MapIt.pm b/t/Mock/MapIt.pm
index b54ba0ddb..ed95e71fc 100644
--- a/t/Mock/MapIt.pm
+++ b/t/Mock/MapIt.pm
@@ -44,6 +44,7 @@ my @PLACES = (
     [ 'NN1 2NS', 52.238301, -0.889992, 2234, 'Northamptonshire County Council', 'CTY', 2397, 'Northampton Borough Council', 'DIS' ],
     [ '?', 52.238827, -0.894970, 2234, 'Northamptonshire County Council', 'CTY', 2397, 'Northampton Borough Council', 'DIS' ],
     [ '?', 52.23025, -1.015826, 2234, 'Northamptonshire County Council', 'CTY', 2397, 'Northampton Borough Council', 'DIS' ],
+    [ 'E8 1DY', 51.552267, -0.063316, 2508, 'Hackney Borough Council', 'LBO' ],
     [ 'TW7 5JN', 51.482286, -0.328163, 2483, 'Hounslow Borough Council', 'LBO' ],
     [ '?', 51.48111, -0.327219, 2483, 'Hounslow Borough Council', 'LBO' ],
     [ '?', 51.482045, -0.327219, 2483, 'Hounslow Borough Council', 'LBO' ],
diff --git a/t/cobrand/hackney.t b/t/cobrand/hackney.t
new file mode 100644
index 000000000..519b1b3b8
--- /dev/null
+++ b/t/cobrand/hackney.t
@@ -0,0 +1,223 @@
+use utf8;
+use CGI::Simple;
+use DateTime;
+use Test::MockModule;
+use FixMyStreet::TestMech;
+use Open311;
+use Open311::GetServiceRequests;
+use Open311::GetServiceRequestUpdates;
+use Open311::PostServiceRequestUpdates;
+use FixMyStreet::Script::Alerts;
+use FixMyStreet::Script::Reports;
+
+# disable info logs for this test run
+FixMyStreet::App->log->disable('info');
+END { FixMyStreet::App->log->enable('info'); }
+
+ok( my $mech = FixMyStreet::TestMech->new, 'Created mech object' );
+
+my $params = {
+    send_method => 'Open311',
+    send_comments => 1,
+    api_key => 'KEY',
+    endpoint => 'endpoint',
+    jurisdiction => 'home',
+    can_be_devolved => 1,
+};
+
+my $hackney = $mech->create_body_ok(2508, 'Hackney Council', $params);
+my $contact = $mech->create_contact_ok(
+    body_id => $hackney->id,
+    category => 'Potholes',
+    email => 'pothole@example.org',
+);
+$contact->set_extra_fields( ( {
+    code => 'urgent',
+    datatype => 'string',
+    description => 'question',
+    variable => 'true',
+    required => 'false',
+    order => 1,
+    datatype_description => 'datatype',
+} ) );
+$contact->update;
+
+my $user = $mech->create_user_ok('user@example.org', name => 'Test User');
+my $hackney_user = $mech->create_user_ok('hackney_user@example.org', name => 'Hackney User', from_body => $hackney);
+$hackney_user->user_body_permissions->create({
+    body => $hackney,
+    permission_type => 'moderate',
+});
+
+my $contact2 = $mech->create_contact_ok(
+    body_id => $hackney->id,
+    category => 'Roads',
+    email => 'roads@example.org',
+    send_method => 'Triage',
+);
+
+my $admin_user = $mech->create_user_ok('admin-user@example.org', name => 'Admin User', from_body => $hackney);
+
+$admin_user->user_body_permissions->create({
+    body => $hackney,
+    permission_type => 'triage'
+});
+
+my @reports = $mech->create_problems_for_body(1, $hackney->id, 'A Hackney report', {
+    confirmed => '2019-10-25 09:00',
+    lastupdate => '2019-10-25 09:00',
+    latitude => 51.552267,
+    longitude => -0.063316,
+    user => $user,
+    external_id => 101202303
+});
+
+subtest "check clicking all reports link" => sub {
+    FixMyStreet::override_config {
+        MAPIT_URL => 'http://mapit.uk/',
+        ALLOWED_COBRANDS => ['hackney'],
+    }, sub {
+        $mech->get_ok('/');
+        $mech->follow_link_ok({ text => 'All reports' });
+    };
+
+    $mech->content_contains("A Hackney report", "Hackney report there");
+    $mech->content_contains("Hackney Council", "is still on cobrand");
+};
+
+subtest "check moderation label uses correct name" => sub {
+    my $REPORT_URL = '/report/' . $reports[0]->id;
+    FixMyStreet::override_config {
+        MAPIT_URL => 'http://mapit.uk/',
+        ALLOWED_COBRANDS => ['hackney'],
+    }, sub {
+        $mech->log_out_ok;
+        $mech->log_in_ok( $hackney_user->email );
+        $mech->get_ok($REPORT_URL);
+        $mech->content_lacks('show-moderation');
+        $mech->follow_link_ok({ text_regex => qr/^Moderate$/ });
+        $mech->content_contains('show-moderation');
+        $mech->submit_form_ok({ with_fields => {
+            problem_title  => 'Good good',
+            problem_detail => 'Good good improved',
+        }});
+        $mech->base_like( qr{\Q$REPORT_URL\E} );
+        $mech->content_like(qr/Moderated by Hackney Council/);
+    };
+};
+
+$_->delete for @reports;
+
+my $system_user = $mech->create_user_ok('system_user@example.org');
+
+my ($p) = $mech->create_problems_for_body(1, $hackney->id, '', { cobrand => 'hackney' });
+my $alert = FixMyStreet::DB->resultset('Alert')->create( {
+    parameter  => $p->id,
+    alert_type => 'new_updates',
+    user       => $user,
+    cobrand    => 'hackney',
+} )->confirm;
+
+subtest "sends branded alert emails" => sub {
+    $mech->create_comment_for_problem($p, $system_user, 'Other User', 'This is some update text', 'f', 'confirmed', undef);
+    $mech->clear_emails_ok;
+
+    FixMyStreet::override_config {
+        MAPIT_URL => 'http://mapit.uk/',
+        ALLOWED_COBRANDS => ['hackney','fixmystreet'],
+    }, sub {
+        FixMyStreet::Script::Alerts::send();
+    };
+
+    $mech->email_count_is(1);
+    my $email = $mech->get_email;
+    ok $email, "got an email";
+    like $mech->get_text_body_from_email($email), qr/Hackney Council/, "emails are branded";
+};
+
+$p->comments->delete;
+$p->delete;
+
+subtest "sends branded confirmation emails" => sub {
+    $mech->log_out_ok;
+    $mech->clear_emails_ok;
+    $mech->get_ok('/around');
+    FixMyStreet::override_config {
+        ALLOWED_COBRANDS => [ 'hackney' ],
+        MAPIT_URL => 'http://mapit.uk/',
+    }, sub {
+        $mech->submit_form_ok( { with_fields => { pc => 'E8 1DY', } },
+            "submit location" );
+
+        # click through to the report page
+        $mech->follow_link_ok( { text_regex => qr/skip this step/i, },
+            "follow 'skip this step' link" );
+
+        $mech->submit_form_ok(
+            {
+                button      => 'submit_register',
+                with_fields => {
+                    title         => 'Test Report',
+                    detail        => 'Test report details.',
+                    photo1        => '',
+                    name          => 'Joe Bloggs',
+                    username      => 'test-1@example.com',
+                    category      => 'Roads',
+                }
+            },
+            "submit good details"
+        );
+
+        $mech->email_count_is(1);
+        my $email = $mech->get_email;
+        ok $email, "got an email";
+        like $mech->get_text_body_from_email($email), qr/Hackney Council/, "emails are branded";
+
+        my $url = $mech->get_link_from_email($email);
+        $mech->get_ok($url);
+        $mech->clear_emails_ok;
+    };
+};
+
+#subtest "sends branded report sent emails" => sub {
+    #$mech->clear_emails_ok;
+    #FixMyStreet::override_config {
+        #STAGING_FLAGS => { send_reports => 1 },
+        #MAPIT_URL => 'http://mapit.uk/',
+        #ALLOWED_COBRANDS => ['hackney','fixmystreet'],
+    #}, sub {
+        #FixMyStreet::Script::Reports::send();
+    #};
+    #$mech->email_count_is(1);
+    #my $email = $mech->get_email;
+    #ok $email, "got an email";
+    #like $mech->get_text_body_from_email($email), qr/Hackney Council/, "emails are branded";
+#};
+
+subtest "check category extra uses correct name" => sub {
+    my @extras = ( {
+            code => 'test',
+            datatype => 'string',
+            description => 'question',
+            variable => 'true',
+            required => 'false',
+            order => 1,
+            datatype_description => 'datatype',
+        } );
+    $contact2->set_extra_fields( @extras );
+    $contact2->update;
+
+    my $extra_details;
+
+    FixMyStreet::override_config {
+        MAPIT_URL => 'http://mapit.uk/',
+        ALLOWED_COBRANDS => ['hackney','fixmystreet'],
+    }, sub {
+        $extra_details = $mech->get_ok_json('/report/new/category_extras?category=Roads&latitude=51.552267&longitude=-0.063316');
+    };
+
+    like $extra_details->{category_extra}, qr/Hackney Council/, 'correct name in category extras';
+};
+
+
+done_testing();
diff --git a/templates/email/hackney/_email_bottom.html b/templates/email/hackney/_email_bottom.html
new file mode 100644
index 000000000..64936c470
--- /dev/null
+++ b/templates/email/hackney/_email_bottom.html
@@ -0,0 +1,28 @@
+          </tr>
+        </table>
+      </th>
+      <th class="spacer-cell"></th>
+    </tr>
+  </table>
+  <table [% wrapper_table | safe %] style="[% wrapper_style %]">
+    <tr>
+      <th class="spacer-cell"></th>
+      <th width="[% wrapper_max_width %]" style="[% td_style %][% hint_style %]" class="hint">
+        [%~ IF email_footer %]
+          [% email_footer | safe %]
+        [%~ ELSE %]
+          This email was sent automatically, from an unmonitored email account. Please do not reply to it.
+        [%~ END %]
+      </th>
+      <th class="spacer-cell"></th>
+    </tr>
+    <tr>
+      <th class="spacer-cell"></th>
+      <th width="[% wrapper_max_width %]" style="[% td_style %][% hint_style %]">
+        Powered by <a href="http://www.fixmystreet.com">FixMyStreet</a>
+      </th>
+      <th class="spacer-cell"></th>
+    </tr>
+  </table>
+</body>
+</html>
diff --git a/templates/email/hackney/_email_color_overrides.html b/templates/email/hackney/_email_color_overrides.html
new file mode 100644
index 000000000..1af818eca
--- /dev/null
+++ b/templates/email/hackney/_email_color_overrides.html
@@ -0,0 +1,25 @@
+[%
+
+color_green = '#00b341'
+color_black = '#000000'
+color_white = '#FFFFFF'
+color_hackney_pale_green = '#f2f7f0'
+color_hackney_dark_green = '#00664f'
+
+body_background_color = color_hackney_pale_green
+body_text_color = color_black
+
+header_background_color = color_black
+header_text_color = color_white
+
+secondary_column_background_color = color_white
+
+button_background_color = color_hackney_dark_green
+button_text_color = color_white
+
+logo_file = 'hackney-logo-white.png'
+logo_width = "200" # pixel measurement, but without 'px' suffix
+logo_height = "36" # pixel measurement, but without 'px' suffix
+header_padding = "20px 30px"
+
+%]
diff --git a/templates/email/hackney/_email_setting_overrides.html b/templates/email/hackney/_email_setting_overrides.html
new file mode 100644
index 000000000..00eeed9cc
--- /dev/null
+++ b/templates/email/hackney/_email_setting_overrides.html
@@ -0,0 +1,7 @@
+[%
+
+only_column_style = "$only_column_style border: 1px solid $column_divider_color; border-top: none;"
+primary_column_style = "$primary_column_style border: 1px solid $column_divider_color; border-top: none;"
+secondary_column_style = "vertical-align: top; width: 50%; background-color: $secondary_column_background_color; color: $secondary_column_text_color; border: 1px solid $column_divider_color; border-top: none; border-left: none;"
+
+%]
diff --git a/templates/email/hackney/signature.txt b/templates/email/hackney/signature.txt
new file mode 100644
index 000000000..78a02659f
--- /dev/null
+++ b/templates/email/hackney/signature.txt
@@ -0,0 +1,2 @@
+
+Hackney Council
diff --git a/templates/email/hackney/site-name.txt b/templates/email/hackney/site-name.txt
new file mode 100644
index 000000000..29d7f1480
--- /dev/null
+++ b/templates/email/hackney/site-name.txt
@@ -0,0 +1 @@
+Report A Problem
diff --git a/templates/web/fixmystreet-uk-councils/about/privacy.html b/templates/web/fixmystreet-uk-councils/about/privacy.html
index 4a5ed9d2c..1290ee7fb 100644
--- a/templates/web/fixmystreet-uk-councils/about/privacy.html
+++ b/templates/web/fixmystreet-uk-councils/about/privacy.html
@@ -231,6 +231,11 @@ When you make a report
 </h2>
 
 <p>
+[% IF c.cobrand.moniker == 'hackney' %]
+    In using FixMyStreet for any of the functions listed above (sending a
+    report, leaving an update, email alerts or site registration), we are
+    processing your data under the legal basis 6(1)(a) – consent.
+[% ELSE %]
     In using FixMyStreet for any of the functions listed above (sending a
     report, leaving an update, email alerts or site registration), we are
     processing your data under the legal basis 6(1)(f) – legitimate interests.
@@ -243,6 +248,7 @@ When you make a report
     communities, so it's easy to see what the common problems are in a given
     area, and how quickly they get fixed. Other local residents can browse, read
     and comment on problems – and perhaps even offer a solution.
+[% END %]
 </p>
 
 <h2>
diff --git a/templates/web/hackney/around/intro.html b/templates/web/hackney/around/intro.html
new file mode 100644
index 000000000..d4510ac9a
--- /dev/null
+++ b/templates/web/hackney/around/intro.html
@@ -0,0 +1,5 @@
+            <div id="postcode-intro">
+                <h1> Report, view, or discuss local problems</h1>
+                <h2> (like potholes, fly tipping, broken paving slabs, or street lighting) </h2>
+            </div>
+
diff --git a/templates/web/hackney/footer_extra.html b/templates/web/hackney/footer_extra.html
new file mode 100644
index 000000000..1e7c53aad
--- /dev/null
+++ b/templates/web/hackney/footer_extra.html
@@ -0,0 +1,10 @@
+ <div class="hackney-footer">
+    <div class="container">
+        <a href="https://hackney.gov.uk/" alt="Hackney.gov.uk" class="hackney-footer__logo">Hackney</a>
+        [% IF NOT bodyclass.match('mappage') %]
+            <p class="footer-powered-by">
+            Powered by <a class="platform-logo" href="https://www.fixmystreet.com/pro/">FixMyStreet Platform</a>
+            </p>
+        [% END %]
+    </div>
+</div>
\ No newline at end of file
diff --git a/templates/web/hackney/header_extra.html b/templates/web/hackney/header_extra.html
new file mode 100644
index 000000000..73d214ae0
--- /dev/null
+++ b/templates/web/hackney/header_extra.html
@@ -0,0 +1,2 @@
+[% INCLUDE 'tracking_code.html' %]
+<link href="https://fonts.googleapis.com/css?family=Montserrat:300,400,600,700&amp;display=swap" rel="stylesheet">
diff --git a/templates/web/hackney/site-name.html b/templates/web/hackney/site-name.html
new file mode 100644
index 000000000..29d7f1480
--- /dev/null
+++ b/templates/web/hackney/site-name.html
@@ -0,0 +1 @@
+Report A Problem
diff --git a/templates/web/hackney/tracking_code.html b/templates/web/hackney/tracking_code.html
new file mode 100644
index 000000000..b01a0178c
--- /dev/null
+++ b/templates/web/hackney/tracking_code.html
@@ -0,0 +1 @@
+[%# awaiting analytics information from Hackney %]
diff --git a/web/cobrands/hackney/_colours.scss b/web/cobrands/hackney/_colours.scss
new file mode 100644
index 000000000..4c0af7b03
--- /dev/null
+++ b/web/cobrands/hackney/_colours.scss
@@ -0,0 +1,45 @@
+/* COLOURS */
+
+$menu-image: 'menu-black';
+
+// Primary
+$white: #fff;
+$green: #00b341;
+$grey: #666664;
+
+
+// Secondary
+$yellow: #ffc845; 
+$blue: #0072ce;
+$pale_green: #f2f7f0;
+$alt_green: #328b15;
+$light_green: #84bd00;
+$dark_green: #00664f;
+$teal :#1e98a7;
+$black: #000;
+$red: #be3a34;
+
+$primary: $green;
+$primary_b: #000;
+$primary_text: $black;
+
+$base_bg: $white;
+$base_fg: $black;
+
+$link-color: $blue;
+$link-visited_color: $dark-green;
+$link-hover-color: $green;
+
+$nav_background_colour: $black;
+$nav_colour: $white;
+$nav_hover_background_colour: $black;
+
+$col_click_map: $green;
+
+$header-top-border: false;
+
+$montserrat: 'Montserrat', Arial, sans-serif;
+
+$heading-font: $montserrat;
+$body-font: $montserrat;
+$meta-font: $montserrat;
\ No newline at end of file
diff --git a/web/cobrands/hackney/base.scss b/web/cobrands/hackney/base.scss
new file mode 100644
index 000000000..a3e41c5d0
--- /dev/null
+++ b/web/cobrands/hackney/base.scss
@@ -0,0 +1,217 @@
+@import "../sass/h5bp";
+@import "./_colours";
+@import "../sass/mixins";
+
+@import "../sass/base";
+
+
+#site-header {
+  box-shadow: 
+    0 0 0 6px $white,
+    0 0 0 10px $dark-green,
+    0 0 0 13px $white,
+    0 0 0 16px $green,
+    0 0 0 19px $white,
+    0 0 0 21px $light-green;
+}
+
+#site-logo {
+    background: transparent url('images/hackney-logo-white.png') 0 50% no-repeat;
+    background-size: 200px 36px;
+    width: 200px;
+    &:focus {
+      outline: 4px solid $yellow;
+    }
+}
+
+.nav-menu--mysoc {
+  a {
+    color: $primary_text;
+    background-color: $primary;
+  }
+}
+
+#front-main {
+    background-color: $white;
+    margin: 0;
+    padding: 1em;
+    text-align: inherit;
+
+    h1 {
+        color: $black;
+    }
+
+    #postcodeForm {
+        margin: 0;
+        padding: 0;
+        background: transparent;
+        color: inherit;
+
+        div {
+            border: none;
+            background: transparent;
+            position: relative;
+            background: #fff;
+            box-shadow: 1px 1px 5px 1px rgba(104, 104, 104, 0.4);
+
+            input#pc {
+                box-sizing: border-box;
+                padding: 10px 22px;
+            }
+
+            input#sub {
+                width: 0;
+                padding-left: 50px;
+                overflow: hidden;
+                @include flex(0 0 auto);
+                background: $black url('hackney-search-icon.png') no-repeat 50% 50%;
+                background-size: 25px 25px;
+                color: $black;
+                &:hover,
+                &:focus {
+                    background: $dark-green url('hackney-search-icon.png') no-repeat 50% 50%;
+                    background-size: 25px 25px;
+                    color: $dark_green;
+                }
+                &:focus {
+                    outline: 4px solid $yellow;
+                }
+            }
+        }
+    }
+
+    a#geolocate_link {
+        background: transparent;
+        display: block;
+        padding: 0;
+        margin-top: 0.5em;
+        font-family: inherit;
+        font-size: 1em;
+        border-radius: 0;
+        color: $dark_green;
+
+        &:hover {
+            background: transparent;
+            text-decoration: underline;
+        }
+    }
+
+    .form-hint {
+        color: inherit;
+    }
+}
+
+.hackney-footer {
+  background-color: $dark_green;
+  color: #fff;
+  padding: 1em 0;
+}
+
+.hackney-footer__logo {
+  background: transparent url('images/hackney-logo-white.png') 0 50% no-repeat;
+  background-size: 200px 36px;
+  width: 200px;
+  height: 54px;
+  text-indent: -999999px;
+  display: inline-block;
+  &:focus {
+    outline: 4px solid $yellow;
+  }
+}
+
+a.platform-logo {
+  color: #fff;
+}
+
+#front_stats {
+  background-color: $dark_green;
+  color: #fff;
+}
+
+.green-btn,
+.btn {
+  border-radius: 4px;
+  font-size: 1.1875em;
+  font-weight: 400;
+  line-height: 1.4375em;
+  vertical-align: top;
+  display: inline-block;
+  position: relative;
+  border: 1px solid $dark_green;
+  box-shadow: inset #003d2f 0 -2px 0 0;
+  &:hover {
+    background: none;
+    background-color: #005a30;
+    color: #fff !important;
+  }
+  
+  &:focus {
+    border-color:#ffdd00;
+    color:#0b0c0c !important;
+    background: none;
+    background-color:#ffdd00;
+    box-shadow: 0 2px 0#0b0c0c;
+  }
+}
+
+.btn--primary,
+.btn-primary,
+.green-btn {
+  background: $dark_green;
+  border: 2px solid transparent;
+  color: #ffffff;
+  box-shadow: 0 2px 0 #002d18;
+}
+
+textarea.form-control,
+.dropzone,
+input.form-control {
+  border: 2px solid #0b0c0c;
+  border-radius: 0;
+  box-shadow: none;
+  &:focus {
+    outline: 3px solid#ffdd00;
+    outline-offset: 0;
+    box-shadow: inset 0 0 0 2px;
+  }
+}
+
+label, legend, .label {
+  font-weight: 300;
+}
+
+.big-green-banner {
+  background-color: $dark_green;
+  text-transform: none;
+}
+
+div.form-error, p.form-error {
+  color: $red;
+  background-color: transparent;
+  padding: 0;
+  width: 100%;
+
+  a {
+    color: $red;
+    text-decoration: underline;
+  }
+}
+
+
+input.form-error, textarea.form-error,
+select.form-error {
+  border-color: $red;
+  border-radius: 0 !important;
+}
+
+.box-warning {
+  background-color: rgba(164, 214, 94, 0.5);
+}
+
+.dz-clickable:hover, .dz-drag-hover {
+  border-color: $light-green;
+}
+
+.dz-clickable:hover .dz-message u, .dz-drag-hover .dz-message u {
+  color: $green;
+}
\ No newline at end of file
diff --git a/web/cobrands/hackney/hackney-search-icon.png b/web/cobrands/hackney/hackney-search-icon.png
new file mode 100644
index 000000000..99305f24a
--- /dev/null
+++ b/web/cobrands/hackney/hackney-search-icon.png
diff --git a/web/cobrands/hackney/images/hackney-logo-white.png b/web/cobrands/hackney/images/hackney-logo-white.png
new file mode 100644
index 000000000..3a41df786
--- /dev/null
+++ b/web/cobrands/hackney/images/hackney-logo-white.png
diff --git a/web/cobrands/hackney/layout.scss b/web/cobrands/hackney/layout.scss
new file mode 100644
index 000000000..8b6fa6278
--- /dev/null
+++ b/web/cobrands/hackney/layout.scss
@@ -0,0 +1,143 @@
+@import "_colours";
+@import "../sass/layout";
+
+#main-nav {
+  display: block; // remove flex so nav touches top of parent
+  min-height: 0; // no vertical align, so no need for a height
+  margin-top: 0; // don't bother overlapping the border
+  height: auto;
+  margin-top: 0.5em;
+  .frontpage & {
+    margin-top: 1em;
+  }
+  .ie9 & {
+    position: static;
+    float: $right;
+
+    & > * {
+        position: static;
+        -ms-transform: none;
+    }
+  }
+
+  a {
+    font-weight: 600;
+  }
+}
+
+.nav-menu--mysoc {
+  padding: 0em 0.5em;
+  margin-#{$left}: 0.25em;
+  background-color: $primary;
+  @include border-radius(0 0 0.375em 0.375em);
+  a {
+    background-color: transparent;
+    color: $primary_text;
+    text-transform: uppercase;
+    font-size: 0.6875em;
+    padding: 1.3em 0.7em 1em;
+    &:hover {
+      color: #fff;
+      background-color: transparent;
+    }
+  }
+}
+
+body.frontpage {
+  #site-logo {
+    margin: 0.5em 0 0.5em;
+    width: 200px;
+    height: 54px;
+    background: transparent url('images/hackney-logo-white.png') 0 50% no-repeat;
+    background-size: 200px 36px;
+  }
+}
+
+#site-header {
+  padding: 4px 0;
+  margin-bottom: 2em;
+  .mappage & {
+    margin-bottom: 0;
+  }
+}
+
+#front-main {
+  background-color: $white;
+  padding: 50px 0;
+  border-bottom: 3px solid $light_green;
+  label {
+      font-size: 18px;
+      font-weight: 600;
+  }
+
+  h1 {
+      font-size: 40px;
+      font-weight: 600;
+  }
+
+  #postcodeForm {
+      overflow: visible;
+      margin: 0;
+
+      div {
+          margin: 0;
+      }
+    }
+
+  #front-main-container {
+      padding: 0 1em;
+  }
+}
+
+ol.big-numbers>li:before {
+  color: $dark_green;
+}
+
+.nav-menu--main span {
+  color: $light_green;
+  font-weight: 600;
+}
+
+#front_stats {
+  border-color: $dark_green;
+  big {
+    color: $dark_green;
+  }
+} 
+
+.nav-menu--main a.report-a-problem-btn {
+  background-color: transparent;
+  color: white;
+  &:hover,
+  &:active,
+  &:focus {
+    background-color: transparent;
+    color: white;
+  }
+}
+
+#front-howto h2,
+#front-recently h2 {
+  font-weight: 600;
+}
+
+#front_stats {
+  background-color: transparent;
+}
+
+.big-green-banner {
+  background-color: $dark_green;
+}
+
+.footer-powered-by { 
+  position: relative;
+  top: -40px;
+  right: 0;
+  text-align: right;
+  
+}
+
+a.platform-logo {
+  text-align: left;
+  
+}
\ No newline at end of file