diff --git a/perllib/FixMyStreet/Cobrand/SouthKesteven.pm b/perllib/FixMyStreet/Cobrand/SouthKesteven.pm new file mode 100644 index 00000000000..f4f317ed064 --- /dev/null +++ b/perllib/FixMyStreet/Cobrand/SouthKesteven.pm @@ -0,0 +1,280 @@ +=head1 NAME + +FixMyStreet::Cobrand::SouthKesteven - code specific to the SouthKesteven cobrand + +=head1 SYNOPSIS + +We integrate with SouthKesteven's Confirm back end. + +=head1 DESCRIPTION + +=cut + +package FixMyStreet::Cobrand::SouthKesteven; +use parent 'FixMyStreet::Cobrand::Whitelabel'; + +use strict; +use warnings; + +use Moo; + +use LWP::Simple; +use URI; +use Try::Tiny; +use JSON::MaybeXS; + + +=pod + +Confirm backends expect some extra values and have some maximum lengths for +certain fields. These roles implement that behaviour. + +=cut + +with 'FixMyStreet::Roles::ConfirmOpen311'; +with 'FixMyStreet::Roles::ConfirmValidation'; + +=head2 Defaults + +=over 4 + +=cut + +sub council_area_id { '2226' } +sub council_area { 'South Kesteven' } +sub council_name { 'South Kesteven District Council' } +sub council_url { 'southkesteven' } + +=item * Users with a Aberdeenshire.gov.uk email can always be found in the admin. + +=cut + +sub admin_user_domain { 'southkesteven.gov.uk' } + +=item * Allows anonymous reporting + +=cut + +sub allow_anonymous_reports { 'button' } + +=item * Aberdeenshire use their own privacy policy + +=cut + +sub privacy_policy_url { + 'https://www.southkesteven.gov.uk/your-council-and-democracy/data-protection-and-freedom-information/privacy-notice' +} + +=item * Users can not reopen reports + +=cut + +sub reopening_disallowed { + my ($self, $problem) = @_; + + # Only staff can reopen reports. + my $c = $self->{c}; + my $user = $c->user; + return 0 if ($c->user_exists && $user->from_body && $user->from_body->cobrand_name eq $self->council_name); + return 1; +} + +=item * Jobs from Confirm that are completed (marked as fixed or closed) are not displayed after 48 hours + +=cut + +sub report_age { + return { + closed => { + job => '48 hours', + }, + fixed => { + job => '48 hours', + }, + }; +} + +=item * We do not send questionnaires. + +=cut + +sub send_questionnaires { 0 } + +=item * Don't show reports before the go-live date, 4th October 2023 + +=cut + +sub cut_off_date { '2023-10-04' } + +=item * Add display_name as an extra contact field + +=cut + +sub contact_extra_fields { [ 'display_name' ] } + +=item * Custom label and hint for new report detail field + +=cut + +sub new_report_detail_field_label { + 'Where is the location of the problem? Please be specific and identify the nearest property address or landmark to the problem.' +} + +sub new_report_detail_field_hint { + "e.g. 'The drain outside number 42 is blocked'" +} + +=pod + +=back + +=cut + +=head2 open311_skip_report_fetch + +Do not fetch reports from Confirm for categories that are marked private. + +=cut + +sub open311_skip_report_fetch { + my ( $self, $problem ) = @_; + + return 1 if $problem->non_public; +} + +=head2 open311_update_missing_data + +Unlike the ConfirmOpen311 role, we want to fetch a central asset ID here, not a +site code. + +=cut + +sub open311_update_missing_data { + my ($self, $row, $h, $contact) = @_; + + # In case the client hasn't given us a central asset ID, look up the + # closest asset from the WFS service at the point we're sending the report + if (!$row->get_extra_field_value('central_asset_id')) { + if (my $id = $self->lookup_site_code($row)) { + $row->update_extra_field({ name => 'central_asset_id', value => $id }); + } + } +} + +sub lookup_site_code_config { + my $host = FixMyStreet->config('STAGING_SITE') ? "tilma.staging.mysociety.org" : "tilma.mysociety.org"; + return { + buffer => 200, # metres + url => "https://$host/mapserver/southkesteven", + srsname => "urn:ogc:def:crs:EPSG::27700", + typename => "WSF", + property => "CentralAssetId", + accept_feature => sub { 1 } + }; +} + +=head2 open311_extra_data_include + +SouthKesteven want report title to be in description field, along with +subcategory text, which is not otherwise captured by Confirm. Report detail +goes into the location field. +Subcategory text may need to be fetched from '_wrapped_service_code' +extra data. + +=cut + +around open311_extra_data_include => sub { + my ( $orig, $self, $row, $h ) = @_; + my $open311_only = $self->$orig( $row, $h ); + + my $category = $row->category; + my $wrapped_for_report + = $row->get_extra_field_value('_wrapped_service_code'); + my $wrapped_categories + = $row->contact->get_extra_field( code => '_wrapped_service_code' ); + + if ( $wrapped_for_report && $wrapped_categories ) { + ($category) + = grep { $_->{key} eq $wrapped_for_report } + @{ $wrapped_categories->{values} }; + + $category = $category->{name}; + } + + push @$open311_only, { + name => 'description', + value => $category . ' | ' . $row->title, + }; + push @$open311_only, { + name => 'location', + value => $row->detail, + }; + + return $open311_only; +}; + + +sub disambiguate_location { + my $self = shift; + my $string = shift; + + my $town = 'South Kesteven'; + + # As it's the requested example location, try to avoid a disambiguation page + $town .= ', GL20 5XA' + if $string =~ /^\s*gloucester\s+r(oa)?d,\s*tewkesbury\s*$/i; + + return { + %{ $self->SUPER::disambiguate_location() }, + town => $town, + centre => '51.825508771929094,-2.1263689427866654', + span => '0.53502964014244,1.07233523662321', + bounds => [ + 51.57753580138198, -2.687537158717889, + 52.11256544152442, -1.6152019220946803, + ], + }; +} + +=head2 is_defect + +Returns true if it's a fetched job from Confirm. + +=cut + +sub is_defect { + my ($self, $p) = @_; + return $p->external_id && $p->external_id =~ /^JOB_/; +} + +=head2 pin_colour + +Green for anything completed or closed, yellow for the rest, +apart from defects which are blue. + +=cut + +sub pin_colour { + my ( $self, $p ) = @_; + + return 'blue-work' if $self->is_defect($p); + return 'green-tick' if $p->is_fixed || $p->is_closed; + return 'yellow-cone'; +} + +sub path_to_pin_icons { '/i/pins/whole-shadow-cone-spot/' } + +=head2 open311_config + +Send multiple photos as files to Open311 + +=cut + +sub open311_config { + my ($self, $row, $h, $params) = @_; + + $params->{multi_photos} = 1; + $params->{upload_files} = 1; +} + +1; diff --git a/templates/email/southkesteven/_email_color_overrides.html b/templates/email/southkesteven/_email_color_overrides.html new file mode 100644 index 00000000000..81e84a2544a --- /dev/null +++ b/templates/email/southkesteven/_email_color_overrides.html @@ -0,0 +1,23 @@ +[% + +color_primary = '#004289' +color_pale_grey = '#f0f0f0' + +body_font_family = "Verdana, sans-serif" + +header_background_color = color_primary +header_text_color = color_white + +secondary_column_background_color = color_pale_grey + +link_text_color = color_primary +link_hover_text_color = '#0081c9' + +button_background_color = '#8c4e8d' +button_text_color = color_white + +logo_file = 'south-kesteven-logo.png' +logo_width = "293" # pixel measurement, but without 'px' suffix +logo_height = "60" # pixel measurement, but without 'px' suffix + +%] diff --git a/templates/web/southkesteven/footer_extra.html b/templates/web/southkesteven/footer_extra.html new file mode 100644 index 00000000000..34c5bfa1517 --- /dev/null +++ b/templates/web/southkesteven/footer_extra.html @@ -0,0 +1,73 @@ + + +[% PROCESS '_footer_main_nav.html' %] +[% PROCESS '_footer_extra_powered_by.html' %] diff --git a/templates/web/southkesteven/footer_extra_js.html b/templates/web/southkesteven/footer_extra_js.html new file mode 100644 index 00000000000..5a73f01e57e --- /dev/null +++ b/templates/web/southkesteven/footer_extra_js.html @@ -0,0 +1 @@ +[% PROCESS 'footer_extra_js_base.html' highways=1 roadworks=1 validation=1 cobrand_js=1 %] diff --git a/templates/web/southkesteven/front/footer-marketing.html b/templates/web/southkesteven/front/footer-marketing.html new file mode 100644 index 00000000000..e69de29bb2d diff --git a/templates/web/southkesteven/header_extra.html b/templates/web/southkesteven/header_extra.html new file mode 100644 index 00000000000..55a9d66c4ed --- /dev/null +++ b/templates/web/southkesteven/header_extra.html @@ -0,0 +1,6 @@ + + + + + +[% INCLUDE 'tracking_code.html' %] diff --git a/templates/web/southkesteven/header_logo.html b/templates/web/southkesteven/header_logo.html new file mode 100644 index 00000000000..e70fcb64325 --- /dev/null +++ b/templates/web/southkesteven/header_logo.html @@ -0,0 +1,2 @@ + +[%- loc('Report') -%] diff --git a/templates/web/southkesteven/site-name.html b/templates/web/southkesteven/site-name.html new file mode 100644 index 00000000000..c2f3dfcd568 --- /dev/null +++ b/templates/web/southkesteven/site-name.html @@ -0,0 +1 @@ +South Kesteven District Council diff --git a/templates/web/southkesteven/tracking_code.html b/templates/web/southkesteven/tracking_code.html new file mode 100644 index 00000000000..e4c242e006d --- /dev/null +++ b/templates/web/southkesteven/tracking_code.html @@ -0,0 +1,11 @@ +[% IF c.config.BASE_URL == "https://www.fixmystreet.com" %] + + + + + +[% END %] diff --git a/web/cobrands/southkesteven/_variables.scss b/web/cobrands/southkesteven/_variables.scss new file mode 100755 index 00000000000..2a2edd1adb5 --- /dev/null +++ b/web/cobrands/southkesteven/_variables.scss @@ -0,0 +1,112 @@ +/* This styling is based on https://www.southkesteven.gov.uk/ +*/ + +/* COLOURS */ +$cobrand_red: #e4251b; +$cobrand_yellow: #fd0; // This cobrand doesn't use yellow for focus state +$cobrand_white: #fff; +$cobrand_grey: #f2f2f2; // Body bg colour +$cobrand_grey_300: #e0e0e0; // Active and Hover navbar link +$cobrand_black: #43444A; // Body font and Secondary buttons +$cobrand_black_900: #000; // Some focus states and hover color for navlinks +$cobrand_teal: #056689; // Buttons & Links +$cobrand_teal_600: #034158; // Button Hover and Focus + +$primary: $cobrand_teal; +$yellow: $cobrand_yellow; + +$primary_b: $cobrand_black; +$primary_text: $cobrand_white; + +/* FRONTPAGE */ +$base_bg: $cobrand_grey; +$base_fg: $cobrand_black; +$front_stats_bg: $cobrand_white; +$layout_front_stats_color: $primary_b; + +/* LINKS */ +$primary_link_color: $primary; +$primary_link_hover_color: $cobrand_teal_600; +$primary_link_decoration: underline; +$primary_link_hover_decoration: none; + +$link-color: $primary; +$link-hover-color: $cobrand_teal_600; +$link-visited-color: $primary; +$link-text-decoration: underline; +$link-hover-text-decoration: none; + +/* BUTTONS */ +$button-padding-top: 0.9375rem; +$button-padding-bottom: 0.9375rem; +$button-padding-left: 1.25rem; +$button-padding-right: 1.25rem; +$button-border-radius: 16px; + +// Usage +/* +a#geolocate_link { + @include button-variant($bg-top: $button-primary-bg-top, $bg-bottom: $button-primary-bg-bottom, $border: $button-primary-border, $text: $button-primary-text, $hover-bg-bottom: $button-primary-hover-bg-bottom, $hover-bg-top: $button-primary-hover-bg-top, $hover-border: $button-primary-hover-border, $hover-text: $button-primary-hover-text); + @include focus-state; +} +*/ +$button-primary-bg-top: $primary; +$button-primary-bg-bottom: $primary; +$button-primary-border: $primary; +$button-primary-text: $primary_text; +$button-primary-hover-bg-bottom: $cobrand_teal_600; +$button-primary-hover-bg-top: $cobrand_teal_600; +$button-primary-hover-border: $cobrand_teal_600; +$button-primary-hover-text: $primary_text; + +$geolocation-link: $primary; +$geolocation-link-border: $primary; + +/* FONTS */ + +$heading-font: "Roboto", Helvetica, Arial, sans-serif; +$body-font: "Roboto", Helvetica, Arial, sans-serif; +$meta-font: "Roboto", Helvetica, Arial, sans-serif; + +/* NAVBAR */ + +$nav_colour: $primary_b; +$nav_background_colour: $cobrand_white; +$nav_hover_background_colour: $cobrand_grey_300; + +$mappage-header-height: 5.625rem; +$header-top-border: false; +// $header-top-border-width: 0.25em; +// $header-top-border: $header-top-border-width solid $primary; +$menu-image: "menu-black"; +// $close-menu-image: "close-#{$menu-image}"; + +/* OTHER VARIABLES */ + +$container-max-width: 82.5rem; + +$col_click_map: $primary; +$col_fixed_label: $primary; +// $col_fixed_label_light: mix($col_fixed_label, #fff, 10%); + +$search-help-background: #fff3f3; +$search-help-header-font-size-desktop: 1.25em; + +$dropzone-button-text: $primary_text; + +// $pagination_background: #f6f6f6; +$itemlist_item_background: $base_bg; +$itemlist_item_background_hover: mix($primary, white, 20%); +$col_big_numbers: $primary_b; + +// $form-control-border-color: #aaaaaa; +$mobile-sticky-sidebar-button-menu-image: "menu-white"; + +$front-main-color: $primary_b; +$postcodeform-background: $base_bg; +$postcodeform-color: $primary_b; + +$postcodeform-color-desktop: $primary_b; +$front-main-color-desktop: $primary_b; +// $front-main-background-desktop:; +$front-main-container-background-desktop: $cobrand_white \ No newline at end of file diff --git a/web/cobrands/southkesteven/assets.js b/web/cobrands/southkesteven/assets.js new file mode 100644 index 00000000000..53711d15628 --- /dev/null +++ b/web/cobrands/southkesteven/assets.js @@ -0,0 +1,98 @@ +(function(){ + +if (!fixmystreet.maps) { + return; +} + +// Track open popup for defect pins +var defect_popup; + +function show_defect_popup(feature) { + defect_popup = new OpenLayers.Popup.FramedCloud( + "gccDefects", + feature.geometry.getBounds().getCenterLonLat(), + null, + feature.attributes.title.replace("\n", "
"), + { size: new OpenLayers.Size(0, 0), offset: new OpenLayers.Pixel(6, -46) }, + true, + close_defect_popup + ); + fixmystreet.map.addPopup(defect_popup); + + // On mobile the popup is obscured by the crosshairs, so hide them (and + // the "Start new report here" button) when the popup is shown + if ($('html').hasClass('mobile')) { + $(".map-crosshairs, .map-mobile-report-button").addClass("hidden"); + + // after a short delay (to ignore any `maps:click` events that trigger + // during the current handler code) add a callback to close the popup + // when the map is clicked. + window.setTimeout(function() { + $(fixmystreet).on('maps:click', close_defect_popup); + }, 500); + } +} + +function close_defect_popup() { + if (!!defect_popup) { + fixmystreet.map.removePopup(defect_popup); + defect_popup.destroy(); + defect_popup = null; + } + + if ($('html').hasClass('mobile')) { + // Don't forget to restore the crosshair/new report button + $(".map-crosshairs, .map-mobile-report-button").removeClass("hidden"); + + // and remove the callback handler for clicking the map + $(fixmystreet).off('maps:click', close_defect_popup); + } +} + +// Handle clicks on defect pins when showing duplicates +function setup_defect_popup() { + var select_defect = new OpenLayers.Control.SelectFeature( + fixmystreet.markers, + { + hover: true, + clickFeature: function (feature) { + close_defect_popup(); + if (feature.attributes.id >= 0) { + // We're only interested in defects + return; + } + show_defect_popup(feature); + } + } + ); + fixmystreet.map.addControl(select_defect); + select_defect.activate(); +} + +function handle_marker_click(e, feature) { + close_defect_popup(); + + // Show popups for defects, which have negative fake IDs + if (feature.attributes.id < 0) { + show_defect_popup(feature); + } +} + +$(fixmystreet).on('maps:render_duplicates', setup_defect_popup); +$(fixmystreet).on('maps:marker_click', handle_marker_click); + +if (!$('html').hasClass('mobile')) { + // Prevent the popup being closed as soon as it's opened on mobile. + // Mobile reports are started with the crosshair & button so no + // need to deal with getting the popup out of the way. + $(fixmystreet).on('maps:click', close_defect_popup); +} + +$(function() { + if (fixmystreet.page == 'reports') { + // Refresh markers on page load so that defects are loaded in over AJAX. + fixmystreet.markers.events.triggerEvent('refresh'); + } +}); + +})(); diff --git a/web/cobrands/southkesteven/base.scss b/web/cobrands/southkesteven/base.scss new file mode 100755 index 00000000000..5b0d34a16df --- /dev/null +++ b/web/cobrands/southkesteven/base.scss @@ -0,0 +1,276 @@ +@import "../sass/h5bp"; +@import "_variables"; +@import "../sass/mixins"; + +@import "../sass/base"; + +/*TYPOGRAPHY */ +h1, .h1, +h2, .h2, +h3, .h3, +.item-list__heading { + font-weight: 700; +} + +/* BUTTONS */ +a#geolocate_link, +#report-cta { + @include button-variant($bg-top: $button-primary-bg-top, $bg-bottom: $button-primary-bg-bottom, $border: $button-primary-border, $text: $button-primary-text, $hover-bg-bottom: $button-primary-hover-bg-bottom, $hover-bg-top: $button-primary-hover-bg-top, $hover-border: $button-primary-hover-border, $hover-text: $button-primary-hover-text); + text-decoration: none; +} + +a { + &:focus { + outline: none; + // Important to override styles in .sticky-sidebar a:focus and navigation bar + color: $cobrand_white !important; + background-color: $primary!important; + box-shadow: 0 -2px $primary, 0 4px #0b0c0c; + text-decoration: none; + } +} + +/* NAVBAR */ +#site-logo { + background-image: url("/cobrands/southkesteven/images/southkesteven-logo.svg"); + background-size: auto 3rem; +} + +#main-nav-btn:checked ~ #main-nav { + margin: 0 1em; +} + +.nav-menu--main { + a { + background-color: $cobrand_white; + color: $primary; + text-decoration: none; + + &:visited { + color: $primary; + } + } + + span { + background-color: $primary; + color: $primary_text; + } +} + +/* FRONTPAGE */ +.postcode-form-box { + input#sub { + font-family: $body-font; + font-weight: 600; + background-color: $button-primary-bg-top; + + &:hover { + background-color: $button-primary-hover-bg-top; + color: $button-primary-text; + } + } +} + +/* OTHERS */ +.item-list__item { + a { + text-decoration: none; + + &:focus { + h3, small { + color: $primary_text; + } + } + } +} + +/* SITE MESSAGE */ +// Found here: https://www.southkesteven.gov.uk/schools/music-lessons/music-tuition +.site-message { + color: $primary_b; + padding: 1.5rem; + background-color: $cobrand_white; + border: none; + border-left: 2px solid white; + word-wrap: break-word; +} + +/* FOOTER */ +.southkesteven-footer { + color: $primary_text; + background-color: $base_fg; + padding: 1.5rem 0 4.6875rem; + position: relative; + margin-top: 5rem; + + h2, h3 { + font-size: 1.375rem; + } + + .btn-white { + display: inline-block; + color: $primary_b; + background-color: $cobrand-white; + font-weight: 700; + text-decoration: none; + padding: 0.625rem 0.9375rem; + border-radius: 1rem; + transition: all ease-in-out 0.2s; + + &:hover { + color: $primary_b; + background: #e0e0e0; + box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 2px 6px 2px rgba(0, 0, 0, 0.15); + text-decoration: none; + } + } + + .footer-grid { + display: grid; + grid-template-columns: auto; + row-gap: 2rem; + + // Layout for the grid child container + .newsletter-container { + grid-column: 1; + grid-row: 2; + } + + .contact-container { + grid-column: 1; + grid-row: 1; + } + + .footer-nav { + grid-column: 1; + grid-row: 3; + } + } + + .social-container { + max-width: 320px; + margin-top: 3.75rem; + ul { + margin: 0; + padding: 0; + list-style: none; + li { + display: inline-block; + margin: 0 22px 0 0; + } + } + + p { + font-size: 0.875rem; + margin-bottom: 1rem; + } + + a { + display: block; + border-radius: 3px; + width: 32px; + height: 32px; + padding: 0; + position: relative; + overflow: hidden; + background: #fff; + text-align: center; + transition: all ease-in-out 0.2s; + + &.social-media-link-icon--facebook { + background: 0; + padding: 0; + + span { + font-size: 46px; + left: -8px; + color: $primary_text; + } + + &:hover { + background: 0; + span { + color: #e0e0e0; + } + } + + &:focus { + // Overrides anchor focus state + color: #fff !important; + } + } + + span { + position: relative; + font-size: 24px; + line-height: 32px; + vertical-align: top; + color: $primary_b; + } + + &:hover { + background: #e0e0e0; + } + + &:focus { + span { + // Overrides anchor focus state + color: $primary_text !important; + } + } + } + } + + .footer-nav { + ul { + display: flex; + list-style: none; + flex-direction: column; + gap: 0.25rem; + + li { + list-style: none; + margin-bottom: 0; + } + } + + a { + font-size: 0.75rem; + color: $primary_text; + text-decoration: none; + &:hover { + text-decoration: underline; + } + } + } + + .sk-logo-container { + position: absolute; + right: 0px; + bottom: 0px; + + a { + position: absolute; + z-index: 2; + right: 25px; + bottom: 35px; + width: 94px; + height: 40px; + } + + &::after { + content: ''; + width: 375px; + height: 195px; + position: absolute; + z-index: 1; + right: 0; + bottom: 0; + background-image: url("/cobrands/southkesteven/images/bg-footer-frame.svg"); + background-repeat: no-repeat; + background-size: 100%; + } + } +} + +@import "../fixmystreet-uk-councils/societyworks-footer"; diff --git a/web/cobrands/southkesteven/images/armed-forces.png b/web/cobrands/southkesteven/images/armed-forces.png new file mode 100644 index 00000000000..128f07f11f9 Binary files /dev/null and b/web/cobrands/southkesteven/images/armed-forces.png differ diff --git a/web/cobrands/southkesteven/images/bg-footer-frame.svg b/web/cobrands/southkesteven/images/bg-footer-frame.svg new file mode 100644 index 00000000000..696bcc7ed50 --- /dev/null +++ b/web/cobrands/southkesteven/images/bg-footer-frame.svg @@ -0,0 +1,3 @@ + + + diff --git a/web/cobrands/southkesteven/images/favicon.ico b/web/cobrands/southkesteven/images/favicon.ico new file mode 100644 index 00000000000..47d7b921f05 Binary files /dev/null and b/web/cobrands/southkesteven/images/favicon.ico differ diff --git a/web/cobrands/southkesteven/images/southkesteven-logo.png b/web/cobrands/southkesteven/images/southkesteven-logo.png new file mode 100644 index 00000000000..7b59222b665 Binary files /dev/null and b/web/cobrands/southkesteven/images/southkesteven-logo.png differ diff --git a/web/cobrands/southkesteven/images/southkesteven-logo.svg b/web/cobrands/southkesteven/images/southkesteven-logo.svg new file mode 100644 index 00000000000..0cd6a54861a --- /dev/null +++ b/web/cobrands/southkesteven/images/southkesteven-logo.svg @@ -0,0 +1 @@ + diff --git a/web/cobrands/southkesteven/layout.scss b/web/cobrands/southkesteven/layout.scss new file mode 100755 index 00000000000..6e30c811d1e --- /dev/null +++ b/web/cobrands/southkesteven/layout.scss @@ -0,0 +1,149 @@ +@import "_variables"; +@import "../sass/layout"; + +/* NAVBAR */ +#site-logo { + background-size: contain; + height: $mappage-header-height; + width: 8.625rem; +} + +.nav-menu--main { + a, span { + font-weight: 800; + font-size: 1rem; // They have 18px, but we have more items in the navbar so I ended up using this size instead. + margin-left: 0.1rem; + border-radius: 16px; + padding: $button-padding-top $button-padding-left; + + &:hover { + color: $cobrand_black_900; + } + + &:focus { + background-color: $primary; + $color: $primary_b; + outline: none; + } + } + + span { + color: $primary_b; + background-color: $cobrand_grey_300; + &:hover { + color: $nav_colour; + } + } + + a.report-a-problem-btn { + border-radius: $button-border-radius; + padding: $button-padding-top $button-padding-left; + background-color: $button-primary-bg-top; + color: $primary_text; + margin: 0; + &:hover { + background-color: $button-primary-hover-bg-bottom; + } + } +} + +/* FRONTPAGE */ + +#front_stats { + border-color: $primary_b; +} + +/* MAP PAGE */ +.big-green-banner { + font-size: 1.2rem; +} + +/* FOOTER */ +.southkesteven-footer { + padding: 5rem 0; + + .footer-grid { + display: grid; + grid-template-columns: 2fr 1fr; + column-gap: 15.625rem; + row-gap: 0; + + // Layout for the grid child container + .newsletter-container { + grid-column: 1; + grid-row: 1; + } + + .contact-container { + grid-column: 2; + grid-row: 1; + } + + .footer-nav { + grid-column: 1 / -1; + grid-row: 2; + } + } + + .social-container { + margin-top: 5rem; + + ul { + li { + margin: 0 32px 0 0; + + &:last-child { + margin-right: 0; + } + } + } + + p { + font-size: 1rem; + } + } + + h2, h3 { + font-size: 1.625rem; + } + + p { + font-size: 1.25rem; + margin-bottom: 1.5rem; + } + + .btn-white { + font-size: 1.125rem; + line-height: 1.5rem; + padding: 1rem 1.5rem; + } + + .footer-nav { + ul { + flex-direction: row; + gap: 2.5rem; + } + + a { + font-size: 1rem; + } + } + + .sk-logo-container { + bottom: 0px; + right: 0px; + + a { + bottom: 70px; + right: 50px; + width: 188px; + height: 80px; + } + + &::after { + width: 540px; + height: 390px; + background-position: right bottom; + } + } +}