[Highways England] Cobrand styles and templates

11 files changed, 468 insertions, 0 deletions

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);
+    }
+}