[Highways England] Cobrand styles and templates

36 files changed, 699 insertions, 0 deletions

diff --git a/perllib/FixMyStreet/Cobrand/HighwaysEngland.pm b/perllib/FixMyStreet/Cobrand/HighwaysEngland.pm
new file mode 100644
index 000000000..5e91d517c
--- /dev/null
+++ b/perllib/FixMyStreet/Cobrand/HighwaysEngland.pm
@@ -0,0 +1,16 @@
+package FixMyStreet::Cobrand::HighwaysEngland;
+use parent 'FixMyStreet::Cobrand::UK';
+
+use strict;
+use warnings;
+
+sub enter_postcode_text { 'Enter a location, road name or postcode' }
+
+sub example_places {
+    my $self = shift;
+    return $self->feature('example_places') || $self->next::method();
+}
+
+sub allow_photo_upload { 0 }
+
+1;
diff --git a/perllib/FixMyStreet/Map/HighwaysEngland.pm b/perllib/FixMyStreet/Map/HighwaysEngland.pm
new file mode 100644
index 000000000..de44240a4
--- /dev/null
+++ b/perllib/FixMyStreet/Map/HighwaysEngland.pm
@@ -0,0 +1,8 @@
+package FixMyStreet::Map::HighwaysEngland;
+use base 'FixMyStreet::Map::FMS';
+
+use strict;
+
+use constant MIN_ZOOM_LEVEL => 12;
+
+1;
diff --git a/t/map/tests.t b/t/map/tests.t
index f0c563c11..7d7efab22 100644
--- a/t/map/tests.t
+++ b/t/map/tests.t
@@ -11,6 +11,7 @@ my $requires = {
     'FMS' => 'map-fms.js',
     'Google' => 'map-google.js',
     'GoogleOL' => 'map-google-ol.js',
+    'HighwaysEngland' => 'map-fms.js',
     'Hounslow' => 'map-wmts-hounslow.js',
     'IsleOfWight' => 'map-wmts-isleofwight.js',
     'OSM' => 'OpenStreetMap.js',
diff --git a/templates/email/highwaysengland/_email_color_overrides.html b/templates/email/highwaysengland/_email_color_overrides.html
new file mode 100644
index 000000000..999a90865
--- /dev/null
+++ b/templates/email/highwaysengland/_email_color_overrides.html
@@ -0,0 +1,36 @@
+[%
+
+color_he_darkblue = '#011e41';
+color_he_blue = '#0073a6';
+color_he_brightblue = '#0082c9';
+color_he_paleblue = '#99cceb';
+color_he_black = '#00050d';
+color_he_orange = '#f28a00';
+color_he_green = '#4a7529';
+color_he_red = '#d13339';
+color_he_yellow = '#ffc726';
+color_he_pink = '#cc2b99';
+
+color_he_grey1 = '#f2f2f2';
+color_he_grey2 = '#eff0f2';
+color_he_grey3 = '#cfd1d1';
+color_he_grey4 = '#59595c';
+color_he_grey5 = '#38383b';
+color_he_grey6 = '#241f21';
+
+body_background_color = color_he_grey3
+body_text_color = color_he_grey6
+
+header_background_color = '#fff'
+header_text_color = color_he_black
+
+secondary_column_background_color = color_he_grey2
+
+button_background_color = color_he_blue
+button_text_color = '#fff'
+
+logo_file = "email-logo.png"
+logo_width = "118" # pixel measurement, but without 'px' suffix
+logo_height = "35" # pixel measurement, but without 'px' suffix
+
+%]
diff --git a/templates/email/highwaysengland/_email_setting_overrides.html b/templates/email/highwaysengland/_email_setting_overrides.html
new file mode 100644
index 000000000..2359d2033
--- /dev/null
+++ b/templates/email/highwaysengland/_email_setting_overrides.html
@@ -0,0 +1,5 @@
+[%
+
+header_style = "${header_style} border-bottom: 4px solid ${color_he_blue};"
+
+%]
diff --git a/templates/web/highwaysengland/around/_postcode_form_examples.html b/templates/web/highwaysengland/around/_postcode_form_examples.html
new file mode 100644
index 000000000..7642ae5fd
--- /dev/null
+++ b/templates/web/highwaysengland/around/_postcode_form_examples.html
@@ -0,0 +1 @@
+<p class="form-hint" id="pc-hint">[% tprintf('eg ‘%s’ or ‘%s’', c.cobrand.example_places) %]</p>
diff --git a/templates/web/highwaysengland/around/intro.html b/templates/web/highwaysengland/around/intro.html
new file mode 100644
index 000000000..5eb114e53
--- /dev/null
+++ b/templates/web/highwaysengland/around/intro.html
@@ -0,0 +1,5 @@
+            <h1>Report a problem <span>on our network</span></h1>
+            <div class="front-blurb">
+                <p>We work hard to make sure our network of motorways and major A-roads is in good condition, minimising disruption for our customers.</p>
+                <p>We carry out regular inspections and maintenance activities, but we also want to hear from you if you spot something wrong with our roads or any of the assets alongside them. This could be anything from a broken sign or barrier, to litter, overgrown vegetation or potholes.</p>
+            </div>
diff --git a/templates/web/highwaysengland/footer_extra.html b/templates/web/highwaysengland/footer_extra.html
new file mode 100644
index 000000000..904ef4297
--- /dev/null
+++ b/templates/web/highwaysengland/footer_extra.html
@@ -0,0 +1,6 @@
+<footer class="site-footer">
+    <div class="container">
+        <a href="https://highwaysengland.co.uk/" class="site-logo">Highways England</a>
+        <a href="https://www.fixmystreet.com/pro" class="powered-by-fms">Powered by FixMyStreet Pro</a>
+    </div>
+</footer>
diff --git a/templates/web/highwaysengland/footer_extra_js.html b/templates/web/highwaysengland/footer_extra_js.html
new file mode 100644
index 000000000..376386db2
--- /dev/null
+++ b/templates/web/highwaysengland/footer_extra_js.html
@@ -0,0 +1,9 @@
+[%
+IF bodyclass.match('mappage');
+    scripts.push( version('/cobrands/fixmystreet/assets.js') );
+    scripts.push( version('/cobrands/highwaysengland/assets.js') );
+    scripts.push(
+        version('/vendor/OpenLayers.Projection.OrdnanceSurvey.js'),
+    );
+END;
+%]
diff --git a/templates/web/highwaysengland/front/footer-marketing.html b/templates/web/highwaysengland/front/footer-marketing.html
new file mode 100644
index 000000000..e69de29bb
--- /dev/null
+++ b/templates/web/highwaysengland/front/footer-marketing.html
diff --git a/templates/web/highwaysengland/header_extra.html b/templates/web/highwaysengland/header_extra.html
new file mode 100644
index 000000000..0011e6285
--- /dev/null
+++ b/templates/web/highwaysengland/header_extra.html
@@ -0,0 +1,3 @@
+<link rel="stylesheet" href="https://use.typekit.net/lgn8iyw.css">
+
+[% INCLUDE 'tracking_code.html' %]
diff --git a/templates/web/highwaysengland/header_logo.html b/templates/web/highwaysengland/header_logo.html
new file mode 100644
index 000000000..1a7c70956
--- /dev/null
+++ b/templates/web/highwaysengland/header_logo.html
@@ -0,0 +1,2 @@
+  <a href="https://highwaysengland.co.uk/" id="site-logo">Highways England</a>
+  <a href="/" id="report-cta" title="[%- loc('Report a problem') -%]">[%- loc('Report') -%]</a>
diff --git a/templates/web/highwaysengland/header_site.html b/templates/web/highwaysengland/header_site.html
new file mode 100644
index 000000000..e1f104f14
--- /dev/null
+++ b/templates/web/highwaysengland/header_site.html
@@ -0,0 +1,14 @@
+<header id="site-header" role="banner">
+    <div class="container">
+        [% INCLUDE 'header_logo.html' %]
+        <a href="#main-nav" id="nav-link">Main Navigation</a>
+    </div>
+</header>
+
+[% IF c.req.uri.path == '/' %]
+    <div class="front-warning">
+        <div class="container">
+            Please don&rsquo;t endanger your safety to make a report to us, only do so from a safe location
+        </div>
+    </div>
+[% END %]
diff --git a/templates/web/highwaysengland/index-steps.html b/templates/web/highwaysengland/index-steps.html
new file mode 100644
index 000000000..10cb208f1
--- /dev/null
+++ b/templates/web/highwaysengland/index-steps.html
@@ -0,0 +1,13 @@
+<h2>How to report a problem</h2>
+
+<ol class="big-numbers">
+    <li>[% question %]</li>
+    <li>Locate the problem on a map of the area</li>
+    <li>Enter details of the problem</li>
+    <li>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/highwaysengland/main_nav_items.html b/templates/web/highwaysengland/main_nav_items.html
new file mode 100644
index 000000000..61bc2c15e
--- /dev/null
+++ b/templates/web/highwaysengland/main_nav_items.html
@@ -0,0 +1,27 @@
+[%~ IF problem AND NOT problem.non_public ~%]
+    [%~ INCLUDE navitem uri='/report/new?longitude=' _ problem.longitude _ '&latitude=' _ problem.latitude label=loc('Report another problem here') attrs='class="report-a-problem-btn"' ~%]
+[%~ ELSIF latitude AND longitude ~%]
+    [%~ INCLUDE navitem uri='/report/new?longitude=' _ longitude _ '&latitude=' _ latitude label=loc('Report a problem here') attrs='class="report-a-problem-btn"' ~%]
+[%~ ELSE ~%]
+    [%~ INCLUDE navitem uri='/' label=loc('Report a problem') attrs='class="report-a-problem-btn"' ~%]
+[%~ END ~%]
+
+[%~ IF c.user_exists ~%]
+    [%~ INCLUDE navitem uri='/my' label=loc('Your account') ~%]
+[%~ END ~%]
+
+[%~ IF c.user_exists AND c.user.has_body_permission_to('planned_reports') ~%]
+    [%~ INCLUDE navitem always_url=1 uri='/my/planned' label=loc('Shortlist') ~%]
+[%~ END ~%]
+
+[%~ INCLUDE 'navigation/_all_reports.html' ~%]
+
+[%~ INCLUDE navitem uri='/faq' label=loc('Help') ~%]
+
+[%~ UNLESS hide_privacy_link ~%]
+  [%~ INCLUDE navitem uri=c.cobrand.privacy_policy_url label=loc('Privacy') liattrs='class="nav-menu__item--privacy"' ~%]
+[%~ END ~%]
+
+[%~ IF c.user_exists AND c.cobrand.admin_allow_user(c.user) ~%]
+  [%~ INCLUDE navitem uri='/admin' label=loc('Admin') ~%]
+[%~ END ~%]
diff --git a/templates/web/highwaysengland/report/new/_form_labels.html b/templates/web/highwaysengland/report/new/_form_labels.html
new file mode 100644
index 000000000..09d41fce9
--- /dev/null
+++ b/templates/web/highwaysengland/report/new/_form_labels.html
@@ -0,0 +1,5 @@
+[%
+SET form_title = 'Summarise the problem and location';
+SET form_title_placeholder = 'eg ‘Obscured road sign by the northbound M1 junction 23 exit’';
+SET form_detail_placeholder = 'eg ‘This road sign has been obscured for two months and…’';
+%]
diff --git a/templates/web/highwaysengland/report/new/councils_text_all.html b/templates/web/highwaysengland/report/new/councils_text_all.html
new file mode 100644
index 000000000..58c3cfe4f
--- /dev/null
+++ b/templates/web/highwaysengland/report/new/councils_text_all.html
@@ -0,0 +1,17 @@
+<p>
+[% category = mark_safe(category) %]
+[% UNLESS non_public_categories.$category;
+
+    tprintf(
+        'These will be sent to us and also published online for others to see, in line with our <a href="%s">privacy policy</a>.',
+        c.cobrand.privacy_policy_url
+    );
+
+ELSE;
+
+    'These will be sent to us but not published online.';
+
+END %]
+
+[% TRY %][% INCLUDE 'report/new/councils_extra_text.html' %][% CATCH file %][% END %]
+</p>
diff --git a/templates/web/highwaysengland/report/new/form_heading.html b/templates/web/highwaysengland/report/new/form_heading.html
new file mode 100644
index 000000000..fea1c1772
--- /dev/null
+++ b/templates/web/highwaysengland/report/new/form_heading.html
@@ -0,0 +1,2 @@
+<h1>Report a problem on our road network</h1>
+
diff --git a/templates/web/highwaysengland/report/new/roads_message.html b/templates/web/highwaysengland/report/new/roads_message.html
new file mode 100644
index 000000000..e75a0a01b
--- /dev/null
+++ b/templates/web/highwaysengland/report/new/roads_message.html
@@ -0,0 +1,17 @@
+<div id="js-roads-responsibility" class="box-warning hidden">
+    <div id="js-not-he-road" class="hidden js-responsibility-message">
+        <strong>Not maintained by us</strong>
+        <p>The selected location is not maintained by us.
+        Please follow this link to
+        <a class="js-update-coordinates" href="https://www.fixmystreet.com/report/new?latitude=[% latitude %]&amp;longitude=[% longitude %]">FixMyStreet</a> to continue reporting your issue.
+        </p>
+    </div>
+
+    <div id="js-not-area7-road" class="hidden js-responsibility-message">
+        <strong>This site is currently only for reports in the East Midlands</strong>
+        <p>
+        Please follow this link to
+        <a class="js-update-coordinates" href="https://www.fixmystreet.com/report/new?latitude=[% latitude %]&amp;longitude=[% longitude %]">FixMyStreet</a> to continue reporting your issue.
+        </p>
+    </div>
+</div>
diff --git a/templates/web/highwaysengland/report/new/sidebar.html b/templates/web/highwaysengland/report/new/sidebar.html
new file mode 100644
index 000000000..e69de29bb
--- /dev/null
+++ b/templates/web/highwaysengland/report/new/sidebar.html
diff --git a/templates/web/highwaysengland/report/new/top_message.html b/templates/web/highwaysengland/report/new/top_message.html
new file mode 100644
index 000000000..98bbd2cd3
--- /dev/null
+++ b/templates/web/highwaysengland/report/new/top_message.html
@@ -0,0 +1,5 @@
+<div class="box-warning">
+    If the issue you’re reporting is safety critical (ie a fallen sign) then do
+    not continue with this report. Please call us on <strong>0300 123
+    5000</strong> from a safe place.
+</div>
diff --git a/templates/web/highwaysengland/report/update/form_state_checkbox.html b/templates/web/highwaysengland/report/update/form_state_checkbox.html
new file mode 100644
index 000000000..e69de29bb
--- /dev/null
+++ b/templates/web/highwaysengland/report/update/form_state_checkbox.html
diff --git a/templates/web/highwaysengland/report/updates-sidebar-notes.html b/templates/web/highwaysengland/report/updates-sidebar-notes.html
new file mode 100644
index 000000000..d73ae72e9
--- /dev/null
+++ b/templates/web/highwaysengland/report/updates-sidebar-notes.html
@@ -0,0 +1,3 @@
+<p>
+    [% tprintf( 'Your information will only be used in line with our <a href="%s">privacy policy</a>', c.cobrand.privacy_policy_url ) %]
+</p>
diff --git a/templates/web/highwaysengland/tokens/confirm_problem.html b/templates/web/highwaysengland/tokens/confirm_problem.html
new file mode 100644
index 000000000..311902b24
--- /dev/null
+++ b/templates/web/highwaysengland/tokens/confirm_problem.html
@@ -0,0 +1,21 @@
+[% INCLUDE 'header.html', bodyclass = 'fullwidthpage', title = loc('Confirmation') %]
+
+<div class="confirmation-header">
+
+  <h1><a href="[% c.cobrand.relative_url_for_report( report ) %][% report.url %]">[% report.title %]</a></h1>
+
+  <p>Thank you for submitting your report.<br>Reference: <strong>FMS[% report.id %]</strong>.</p>
+  <p>We aim to respond within 3 working days.</p>
+  <p>Please be aware that, for your privacy, we will not respond to you directly.</p>
+  <p>If you’d like to view the status of your report, or check for updates, then please visit
+  <a href="[% c.cobrand.relative_url_for_report( report ) %][% report.url %]">the report page</a>.</p>
+
+  <p class="confirmation-again">
+    <a href="/report/new?latitude=[% report.latitude %]&amp;longitude=[% report.longitude %]" class="btn btn-primary">
+      [% loc('Report another problem here') %]
+    </a>
+  </p>
+
+</div>
+
+[% INCLUDE 'footer.html' %]
diff --git a/templates/web/highwaysengland/tracking_code.html b/templates/web/highwaysengland/tracking_code.html
new file mode 100644
index 000000000..ff705d264
--- /dev/null
+++ b/templates/web/highwaysengland/tracking_code.html
@@ -0,0 +1,15 @@
+[% IF c.config.BASE_URL == "https://www.fixmystreet.com" %]
+
+<!-- Global site tag (gtag.js) - Google Analytics -->
+<script async src="https://www.googletagmanager.com/gtag/js?id=UA-159819528-1"></script>
+<script>
+  window.dataLayer = window.dataLayer || [];
+  function gtag(){dataLayer.push(arguments);}
+  gtag('js', new Date());
+
+  gtag('config', 'UA-159819528-1');
+</script>
+
+[% ELSE %]
+<!-- Tracking code not inserted  ("[% c.config.BASE_URL %]" != "https://www.fixmystreet.com") -->
+[% END %]
diff --git a/web/cobrands/highwaysengland/_colours.scss b/web/cobrands/highwaysengland/_colours.scss
new file mode 100644
index 000000000..4b7d46453
--- /dev/null
+++ b/web/cobrands/highwaysengland/_colours.scss
@@ -0,0 +1,42 @@
+$menu-image: 'menu-black';
+
+$color-he-darkblue: #011e41;
+$color-he-blue: #0073a6;
+$color-he-brightblue: #0082c9;
+$color-he-paleblue: #99cceb;
+$color-he-black: #00050d;
+$color-he-orange: #f28a00;
+$color-he-green: #4a7529;
+$color-he-red: #d13339;
+$color-he-yellow: #ffc726; // for alerts
+$color-he-pink: #cc2b99; // for alerts
+
+$color-he-grey-1: #f2f2f2;
+$color-he-grey-2: #eff0f2;
+$color-he-grey-3: #cfd1d1;
+$color-he-grey-4: #59595c;
+$color-he-grey-5: #38383b;
+$color-he-grey-6: #241f21;
+
+$white: #fff;
+$black: $color-he-black;
+
+$primary: $color-he-blue;
+$primary_b: $black;
+$primary_text: $white;
+
+$base_bg: $white;
+$base_fg: $black;
+
+$nav_background_colour: $white;
+$nav_colour: $color-he-darkblue;
+$nav_hover_background_colour: transparent;
+
+$col_click_map: $color-he-brightblue;
+
+$header-top-border: false;
+$mappage-header-height: 5.75em;
+
+$body-font: "proxima-nova", "Proxima Nova", Montserrat, Arial, sans-serif;
+$heading-font: $body-font;
+$meta-font: $body-font;
diff --git a/web/cobrands/highwaysengland/assets.js b/web/cobrands/highwaysengland/assets.js
new file mode 100644
index 000000000..e8245e169
--- /dev/null
+++ b/web/cobrands/highwaysengland/assets.js
@@ -0,0 +1,120 @@
+(function(){
+
+if (!fixmystreet.maps) {
+    return;
+}
+
+function is_motorway(f) { return f && f.attributes && f.attributes.ROA_NUMBER && f.attributes.ROA_NUMBER.indexOf('M') > -1; }
+function is_a_road(f) { return !is_motorway(f); }
+
+var rule_motorway = new OpenLayers.Rule({
+    filter: new OpenLayers.Filter.FeatureId({ type: OpenLayers.Filter.Function, evaluate: is_motorway }),
+    symbolizer: { strokeColor: "#0079C1" }
+});
+var rule_a_road = new OpenLayers.Rule({
+    filter: new OpenLayers.Filter.FeatureId({ type: OpenLayers.Filter.Function, evaluate: is_a_road }),
+    symbolizer: { strokeColor: "#00703C" }
+});
+
+var highways_style = new OpenLayers.Style({ fill: false, strokeOpacity: 0.8, strokeWidth: 4 });
+highways_style.addRules([rule_motorway, rule_a_road]);
+var highways_stylemap = new OpenLayers.StyleMap({ 'default': highways_style });
+
+var defaults = {
+    wfs_url: "https://tilma.mysociety.org/mapserver/highways",
+    // this covers zoomed right out on Cumbrian sections of the M6
+    max_resolution: 40,
+    min_resolution: 0.0001,
+    srsName: "EPSG:3857",
+    strategy_class: OpenLayers.Strategy.FixMyStreet,
+    body: 'Highways England'
+};
+
+fixmystreet.assets.add(defaults, {
+    wfs_feature: "Highways",
+    stylemap: highways_stylemap,
+    always_visible: true,
+
+    non_interactive: true,
+    road: true,
+    usrn: [
+        {
+            field: 'road_name',
+            attribute: 'ROA_NUMBER'
+        },
+        {
+            field: 'area_name',
+            attribute: 'area_name'
+        },
+        {
+            field: 'sect_label',
+            attribute: 'sect_label'
+        }
+    ],
+    all_categories: true,
+
+    // motorways are wide and the lines to define them are narrow so we
+    // need a bit more margin for error in finding the nearest to stop
+    // clicking in the middle of them being undetected
+    nearest_radius: 50,
+    asset_type: 'road',
+    no_asset_msg_id: '#js-not-he-road',
+    actions: {
+        found: fixmystreet.message_controller.road_found,
+        not_found: fixmystreet.message_controller.road_not_found
+    }
+});
+
+})();
+
+
+OpenLayers.Layer.Highways = OpenLayers.Class(OpenLayers.Layer.XYZ, {
+    name: 'Highways',
+    url: [
+        "//tilma.mysociety.org/highways/${z}/${x}/${y}.png",
+        "//a.tilma.mysociety.org/highways/${z}/${x}/${y}.png",
+        "//b.tilma.mysociety.org/highways/${z}/${x}/${y}.png",
+        "//c.tilma.mysociety.org/highways/${z}/${x}/${y}.png"
+    ],
+    sphericalMercator: true,
+    isBaseLayer: false,
+    CLASS_NAME: "OpenLayers.Layer.Highways"
+});
+
+$(function() {
+    if (!fixmystreet.map) {
+        return;
+    }
+
+    // Can't use vector layer on reports, too big, use tiles instead
+    var layer;
+    if (fixmystreet.page === 'reports') {
+        layer = new OpenLayers.Layer.Highways(null, null, { className: 'olLayerHighways' });
+        fixmystreet.map.addLayer(layer);
+        layer.setVisibility(true);
+
+        var qs = OpenLayers.Util.getParameters(fixmystreet.original.href);
+        if (!qs.bbox && !qs.lat && !qs.lon) {
+            var strategy = fixmystreet.markers.strategies[0];
+            strategy.deactivate();
+            var bounds = new OpenLayers.Bounds(-176879, 6786045, -46630, 7067639);
+            var center = bounds.getCenterLonLat();
+            var z = fixmystreet.map.getZoomForExtent(bounds);
+            fixmystreet.map.setCenter(center, z);
+            // Reactivate the strategy and make it think it's done an update
+            strategy.activate();
+            if (strategy instanceof OpenLayers.Strategy.BBOX) {
+                strategy.calculateBounds();
+                strategy.resolution = fixmystreet.map.getResolution();
+            }
+        }
+    } else if (fixmystreet.page === 'report') {
+        layer = fixmystreet.assets.layers[0];
+        fixmystreet.map.addLayer(layer);
+    }
+
+    var pins_layer = fixmystreet.map.getLayersByName("Pins")[0];
+    if (layer && pins_layer) {
+        layer.setZIndex(pins_layer.getZIndex()-1);
+    }
+});
diff --git a/web/cobrands/highwaysengland/base.scss b/web/cobrands/highwaysengland/base.scss
new file mode 100644
index 000000000..839c53ad8
--- /dev/null
+++ b/web/cobrands/highwaysengland/base.scss
@@ -0,0 +1,205 @@
+@import "../sass/h5bp";
+@import "./_colours";
+@import "../sass/mixins";
+@import "../sass/base";
+
+#site-header {
+    padding: 1em 0;
+}
+
+// Highways England cobrand sets up a .site-logo class to match #site-logo,
+// so that we can use the same logo in the header and footer.
+.site-logo {
+    display: block;
+    text-indent: -999999px;
+}
+
+#site-logo,
+.site-logo {
+    width: 150px;
+    height: 45px;
+    @include svg-background-image('/cobrands/highwaysengland/images/logo');
+    background-position: 50% 50%;
+    background-repeat: no-repeat;
+    background-size: 150px 45px;
+}
+
+#nav-link {
+    @include svg-background-image('/cobrands/highwaysengland/images/menu');
+}
+
+#report-cta {
+    background-color: $color-he-blue;
+    border: none;
+    color: $white;
+    font-weight: bold;
+    padding: 0.4em 0.8em;
+    border-radius: 1em;
+
+    &:hover,
+    &:focus {
+        background-color: darken($color-he-blue, 10%);
+        color: $black;
+    }
+}
+
+%warning-icon {
+    content: "";
+    display: block;
+    @include svg-background-image('/cobrands/highwaysengland/images/warning-red');
+    background-position: 0 0;
+    background-repeat: no-repeat;
+    background-size: 20px 20px;
+    width: 20px;
+    height: 20px;
+    margin-right: 1em;
+    @include flex(0 0 auto); // do not shrink
+}
+
+.front-warning {
+    background: mix($color-he-red, #fff, 25%);
+    line-height: 1.3;
+
+    .container {
+        @include flex-container();
+        @include flex-align(center);
+        padding-top: 1em;
+        padding-bottom: 1em;
+
+        &:before {
+            @extend %warning-icon;
+        }
+    }
+}
+
+div.form-error,
+p.form-error {
+    padding: 1em;
+    color: $color-he-black;
+    border-radius: 0;
+    background: mix($color-he-red, #fff, 25%);
+    border-left: 8px solid $color-he-red;
+    @include flex-container();
+    @include flex-align(center);
+
+    &:before {
+        @extend %warning-icon;
+    }
+}
+
+#front-main {
+    margin: 0;
+    padding: 1em;
+    background: $color-he-grey-2;
+    text-align: left;
+
+    #postcodeForm {
+        background: transparent;
+        padding: 0;
+        margin: 0;
+        color: inherit;
+        font-family: inherit;
+
+        div {
+            border: none;
+            background: transparent;
+
+            input#pc {
+                background: #fff;
+                border-radius: 4em;
+                margin-right: 0.5em;
+                padding: 0.5em 1.5em;
+                border: 2px solid $color-he-grey-3;
+
+                &:focus {
+                    border-color: $black;
+                    box-shadow: 0 0 0 4px $color-he-yellow;
+                }
+            }
+
+            input#sub {
+                border-radius: 4em;
+                background: $color-he-blue;
+                font-weight: bold;
+                padding: 0.5em 1em;
+
+                &:hover, &:focus {
+                    background: darken($color-he-blue, 10%);
+                }
+            }
+        }
+    }
+
+    h1 {
+        margin-top: 0;
+
+        span {
+            display: block;
+            font-weight: normal;
+            color: $color-he-grey-4;
+        }
+    }
+}
+
+.front-blurb {
+    max-width: 32em;
+    margin: 1em 0;
+}
+
+.form-control,
+.dropzone {
+    border-radius: 0;
+    box-shadow: none;
+    border: 2px solid $black;
+
+    &:focus {
+        box-shadow: 0 0 0 4px $color-he-yellow;
+    }
+}
+
+.btn,
+.form-txt-submit-box input[type="submit"] {
+    border-radius: 10em; // pill-shaped ends
+}
+
+.form-txt-submit-box input[type="submit"] {
+    margin: 0 0 0.5em 1em;
+}
+
+.btn-primary,
+.green-btn,
+.btn--primary {
+    background: $color-he-blue;
+    border: none;
+
+    &:hover, &:focus {
+        background: darken($color-he-blue, 10%);
+    }
+}
+
+.big-green-banner {
+    text-transform: none;
+}
+
+.site-footer {
+    margin-top: 0;
+    background: $color-he-grey-2;
+    box-shadow: 0 1000px 0 1000px $color-he-grey-2; // infinite footer
+    border-top: 8px solid $color-he-darkblue;
+    padding-top: 1em;
+    padding-bottom: 1em;
+
+    .powered-by-fms {
+        display: block;
+        margin-top: 1em;
+    }
+}
+
+.olMapViewport {
+    background-color: #fff;
+}
+
+.olLayerGrid, .olBackBuffer {
+    opacity: 0.3;
+    filter: grayscale(1);
+}
diff --git a/web/cobrands/highwaysengland/images/email-logo.png b/web/cobrands/highwaysengland/images/email-logo.png
new file mode 100644
index 000000000..7742a8408
--- /dev/null
+++ b/web/cobrands/highwaysengland/images/email-logo.png
diff --git a/web/cobrands/highwaysengland/images/logo.png b/web/cobrands/highwaysengland/images/logo.png
new file mode 100644
index 000000000..36dd6ed18
--- /dev/null
+++ b/web/cobrands/highwaysengland/images/logo.png
diff --git a/web/cobrands/highwaysengland/images/logo.svg b/web/cobrands/highwaysengland/images/logo.svg
new file mode 100644
index 000000000..037e9cdb4
--- /dev/null
+++ b/web/cobrands/highwaysengland/images/logo.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="200" height="60" viewBox="0 0 200 60"><g fill="none"><path fill="#002E5F" d="M42 2L33.1.5l.8 5z"/><path fill="#008BCB" d="M45.3 9.6l-4.5 2.2-16-2.3L41.9 2z"/><path fill="#002E5F" d="M24.8 9.5l21.9 3.2-15.6 8-7.5-.5z"/><path fill="#008BCB" d="M50.8 21.9l-7 4-20.6-1.2 23.5-12z"/><path fill="#002E5F" d="M23.2 24.7l29.6 1.8-19 11.9-12.1.5z"/><path fill="#008BCB" d="M57.7 37.4l-4.9-10.9L.7 59 32 55.7z"/><path fill="#002E5F" d="M73.5 13.6a4 4 0 0 0-2.9 1.1v11.8h-4.5V4.1h4.5v7.6a6.3 6.3 0 0 1 4.1-1.4 6 6 0 0 1 4.8 1.8c1.1 1.3 1.7 3.2 1.7 5.7v8.7h-4.6v-8.7c.1-1.1-.2-2.3-.8-3.3-.5-.6-1.4-1-2.3-1zm10.8-7.2c0-.6.2-1.2.6-1.7 1.2-.7 2.8-.7 4 0 .4.5.7 1.1.6 1.7 0 .7-.1 1.3-.6 1.8-1.2.7-2.8.7-4 0-.4-.5-.6-1.1-.6-1.8zm.3 4.3h4.6v15.8h-4.6V10.7zm7.3 7.7c0-1.2.2-2.3.5-3.4.4-1 .9-1.8 1.6-2.5a6.6 6.6 0 0 1 7.2-1.8c.6.2 1.2.5 1.7 1v-1h4.5V25c0 1.2-.1 2.3-.4 3.5a5.4 5.4 0 0 1-4 3.7c-1.3.3-2.6.5-3.9.4-1 0-2 0-3-.2-.9-.2-1.7-.5-2.6-1l.3-3.5c.7.5 1.5.9 2.3 1.2a9 9 0 0 0 2.7.4c1 0 2-.3 3-.9.7-.7 1.1-1.7 1-2.8v-.7c-.4.5-1 .8-1.6 1-.8.3-1.5.4-2.3.4-1.9 0-3.7-.8-5-2.2a7.6 7.6 0 0 1-1.5-2.5c-.3-1.1-.5-2.3-.5-3.4zm4.6 0c0 1.3.3 2.6 1 3.6a3 3 0 0 0 2.5 1.2c.5 0 1 0 1.6-.3.5-.2 1-.5 1.3-.9v-7.3l-1.3-.8c-.5-.2-1-.4-1.6-.4a3 3 0 0 0-2.5 1.2c-.7 1.1-1 2.4-1 3.7zm22-4.8a4 4 0 0 0-1.7.3l-1.3.8v11.8H111V4.1h4.5v7.6a6.3 6.3 0 0 1 4.1-1.4 6 6 0 0 1 4.8 1.8c1.1 1.3 1.7 3.2 1.7 5.7v8.7h-4.6v-8.7c.1-1.1-.1-2.3-.7-3.3-.6-.6-1.5-1-2.4-1zM142 10.6l2.8 10.6 3-10.6h4.6l-5.2 15.9h-4.6l-2.7-10.2-2.7 10.2h-4.7l-5.2-15.9h4.7l3 10.6 2.8-10.6zM158.9 26.9c-.8 0-1.6-.1-2.3-.4-.7-.2-1.3-.5-1.9-1a4.6 4.6 0 0 1-1.7-3.7c0-1.6.7-3 1.9-4s3-1.5 5.4-1.5h3v-.7c0-.6-.2-1.2-.7-1.6-.7-.3-1.6-.5-2.4-.4a11.2 11.2 0 0 0-5.4 1.3l-.4-3.2a15 15 0 0 1 6.3-1.4c2.5 0 4.3.4 5.4 1.4 1.2 1 1.8 2.5 1.8 4.6v10.2h-4.6v-1a7 7 0 0 1-2 1c-.8.3-1.6.4-2.4.4zm1.1-3.2c.6 0 1.2 0 1.8-.3.6-.2 1-.5 1.4-1v-3h-2.8c-.7 0-1.5.2-2.2.7-.4.4-.6 1-.6 1.6 0 .6.2 1.2.6 1.5.5.4 1.2.6 1.8.5zM175.4 26.5L169 10.6h4.8l3.7 10.6 3.8-10.6h4.7l-8 21.8h-4.8zM193 26.9c-1.1 0-2.2-.1-3.2-.3-1-.2-1.9-.5-2.8-1l.2-3.6a9.5 9.5 0 0 0 5.3 1.6c1.7 0 2.5-.5 2.5-1.6l-.1-.6-.5-.6a17.8 17.8 0 0 0-2.5-1c-1.4-.3-2.7-1-3.7-2a4.2 4.2 0 0 1-1.1-2.8 4 4 0 0 1 1.7-3.6 8.2 8.2 0 0 1 4.8-1.1 13.6 13.6 0 0 1 5.2 1l-.3 3.4a10 10 0 0 0-4.5-1.2c-.6 0-1.2 0-1.8.4a1 1 0 0 0-.5.9c0 .4.2.8.6 1.1.8.5 1.6.8 2.4 1l2.4 1 1.5 1.1.8 1.4a5 5 0 0 1-1.4 5.2c-1.2.8-2.8 1.3-5 1.3zM68 44.7c0 1.2.4 2.3 1.3 3.2.9.8 2 1.2 3.2 1.1.8 0 1.5 0 2.3-.2.7-.2 1.3-.6 1.9-1l.2 2a7 7 0 0 1-2 .9c-.7.2-1.6.3-2.4.3-1 0-2-.2-3-.6a6 6 0 0 1-3.4-3.8 9 9 0 0 1-.5-2.8c0-1 .2-2 .5-3 .2-.8.6-1.5 1.2-2.2.5-.6 1.2-1.1 2-1.5.8-.3 1.6-.5 2.5-.5 1 0 1.8.2 2.7.6.7.3 1.4.8 2 1.4a10 10 0 0 1 1.6 5.2v.9H67.9zm7.7-1.9a5 5 0 0 0-1.1-3 3.5 3.5 0 0 0-2.8-1.2c-1 0-2 .4-2.7 1.1a5 5 0 0 0-1.2 3.1h7.8zm10.8-4.2c-.7 0-1.4.2-2 .5-.7.3-1.2.7-1.6 1.2v10.4h-2.2V37h2.2v1l1.7-1a6 6 0 0 1 2.2-.4c1.6 0 3.1.5 4.2 1.6 1 1 1.5 2.6 1.5 4.7v7.8h-2.2v-7.8c0-1.5-.3-2.6-1-3.3-.7-.7-1.7-1-2.8-1zm18.7-1.6h2.2v12.7c0 2.2-.5 3.8-1.5 4.8S103.3 56 101 56c-1.7 0-3.2-.4-4.7-1.1l.2-2.3c.7.5 1.4.8 2.2 1 .7.3 1.6.4 2.4.4 1 .1 2.1-.2 3-.9.7-.6 1-1.6 1-3.1v-.7a5 5 0 0 1-1.7 1 6.1 6.1 0 0 1-8-3.7c-.6-2-.6-4 0-6 .4-.7.8-1.5 1.4-2.1a6 6 0 0 1 4.4-2c.8 0 1.5.2 2.2.5a5 5 0 0 1 1.7 1v-1zm0 3.3a4 4 0 0 0-1.6-1.3 5 5 0 0 0-2-.4c-.6 0-1.2 0-1.7.3-.5.2-1 .6-1.3 1-.4.4-.7 1-.9 1.6-.4 1.4-.4 3 0 4.4.2.6.5 1.1.9 1.6.3.4.8.7 1.3 1a4.9 4.9 0 0 0 3.7-.1 4 4 0 0 0 1.6-1.4v-6.7zM111 31.3h2.2v19.4H111zM121 51c-.7 0-1.4 0-2-.3a5 5 0 0 1-1.8-.8c-.4-.4-.8-.8-1-1.4-.4-.5-.5-1.2-.5-1.8a4 4 0 0 1 1.6-3.4 7 7 0 0 1 4.4-1.2h3.5v-1c0-.7-.3-1.5-.9-2a5 5 0 0 0-2.6-.5 10.3 10.3 0 0 0-4.5 1l-.3-1.9a10.7 10.7 0 0 1 4.8-1c.8 0 1.6 0 2.4.2.7.2 1.3.5 1.8.9s.9 1 1.1 1.5c.3.8.4 1.6.4 2.4v9h-2.2v-1c-.5.4-1.2.8-1.8 1l-2.4.3zm.2-2c.8 0 1.6 0 2.3-.4.7-.2 1.3-.7 1.7-1.3V44h-3.4c-1 0-2 .2-2.9.7-.6.4-1 1.2-1 1.9a2 2 0 0 0 1 1.9c.7.4 1.5.6 2.3.5zm15.4-10.4c-.7 0-1.5.2-2.1.5-.6.3-1.1.7-1.5 1.2v10.4h-2.3V37h2.3v1c.4-.4 1-.7 1.6-1a6 6 0 0 1 2.2-.4c1.6 0 3.1.5 4.3 1.6 1 1 1.5 2.6 1.5 4.7v7.8h-2.2v-7.8c0-1.5-.4-2.6-1-3.3-.7-.7-1.8-1-2.8-1zm18.7 11a5 5 0 0 1-1.7 1 6.4 6.4 0 0 1-4.7-.1c-.7-.3-1.4-.8-2-1.4-.6-.7-1-1.4-1.3-2.3-.7-1.9-.7-4 0-6a5.7 5.7 0 0 1 3.4-3.7 6.4 6.4 0 0 1 4.6 0 5 5 0 0 1 1.7 1v-6.8h2.2v19.4h-2.2v-1zm0-9.3a4 4 0 0 0-1.6-1.3 5 5 0 0 0-3.8 0c-.5.2-1 .5-1.4 1-.4.4-.7 1-.9 1.6-.2.7-.3 1.5-.3 2.2 0 .8.1 1.6.3 2.3.2.6.5 1.1 1 1.6.3.4.8.8 1.4 1 .5.2 1 .3 1.7.3a5 5 0 0 0 2-.4 4 4 0 0 0 1.6-1.3v-7z"/></g></svg>
\ No newline at end of file
diff --git a/web/cobrands/highwaysengland/images/menu.png b/web/cobrands/highwaysengland/images/menu.png
new file mode 100644
index 000000000..e07f09bab
--- /dev/null
+++ b/web/cobrands/highwaysengland/images/menu.png
diff --git a/web/cobrands/highwaysengland/images/menu.svg b/web/cobrands/highwaysengland/images/menu.svg
new file mode 100644
index 000000000..29148e033
--- /dev/null
+++ b/web/cobrands/highwaysengland/images/menu.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="22" height="18" viewBox="0 0 22 18"><path fill="#002E5F" d="M2 4h18a2 2 0 0 0 0-4H2a2 2 0 1 0 0 4zm18 3H2a2 2 0 1 0 0 4h18a2 2 0 0 0 0-4zm0 7H2a2 2 0 1 0 0 4h18a2 2 0 0 0 0-4z"/></svg>
\ No newline at end of file
diff --git a/web/cobrands/highwaysengland/images/warning-red.png b/web/cobrands/highwaysengland/images/warning-red.png
new file mode 100644
index 000000000..5b440ffb0
--- /dev/null
+++ b/web/cobrands/highwaysengland/images/warning-red.png
diff --git a/web/cobrands/highwaysengland/images/warning-red.svg b/web/cobrands/highwaysengland/images/warning-red.svg
new file mode 100644
index 000000000..80400af15
--- /dev/null
+++ b/web/cobrands/highwaysengland/images/warning-red.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20"><path fill="#D13339" d="M10 0a10 10 0 1 0 0 20 10 10 0 0 0 0-20zM8.4 2h3.2a.4.4 0 0 1 .4.4l-1 9.2c0 .2-.2.4-.4.4H9.4a.4.4 0 0 1-.4-.4L8 2.4a.4.4 0 0 1 .4-.4zM10 18a2 2 0 1 1 0-4 2 2 0 0 1 0 4z"/></svg>
\ No newline at end of file
diff --git a/web/cobrands/highwaysengland/layout.scss b/web/cobrands/highwaysengland/layout.scss
new file mode 100644
index 000000000..cf6232261
--- /dev/null
+++ b/web/cobrands/highwaysengland/layout.scss
@@ -0,0 +1,98 @@
+@import "_colours";
+@import "../sass/layout";
+
+#site-logo,
+.site-logo {
+    width: 200px;
+    height: 60px;
+    background-size: 200px 60px;
+}
+
+.nav-menu--main {
+    li + li {
+        margin-left: 1.5em;
+    }
+
+    a, span {
+        padding: 0;
+        font-size: 1em;
+        font-weight: bold;
+        color: $nav_colour;
+    }
+
+    a {
+        &:hover,
+        &:focus {
+            color: $nav_colour;
+            box-shadow: 0 4px 0 0 $color-he-brightblue;
+        }
+    }
+
+    a.report-a-problem-btn {
+        color: $nav_colour;
+        background-color: transparent;
+        padding: 0;
+        margin: 0;
+        border-radius: 0;
+
+        &:hover, &:focus {
+            background-color: transparent;
+        }
+    }
+
+    span.report-a-problem-btn,
+    span.report-a-problem-btn:hover {
+        color: $nav_colour;
+    }
+}
+
+div.form-error,
+p.form-error {
+    @include flex-container();
+}
+
+#front-main {
+    background: $color-he-grey-2;
+    color: inherit;
+    padding: 5% 1em;
+
+    #postcodeForm {
+        overflow: visible;
+
+        div {
+            margin: 0;
+            width: 100%;
+            max-width: 30em;
+
+            input#sub {
+                padding: 0.5em 1.5em;
+            }
+        }
+    }
+
+    h1 {
+        font-size: 3em;
+        font-weight: bold;
+        color: $color-he-darkblue;
+    }
+}
+
+.front-blurb {
+    margin: 2em 0;
+}
+
+.site-footer {
+    padding-top: 2em;
+    padding-bottom: 2em;
+    margin-top: 2em;
+
+    .powered-by-fms {
+        margin: 0;
+    }
+
+    .container {
+        @include flex-container();
+        @include justify-content(space-between);
+        @include flex-align(center);
+    }
+}