diff --git a/templates/email/nottinghamshirepolice/_email_color_overrides.html b/templates/email/nottinghamshirepolice/_email_color_overrides.html index 854eecdf943..2d0a5ac7c72 100644 --- a/templates/email/nottinghamshirepolice/_email_color_overrides.html +++ b/templates/email/nottinghamshirepolice/_email_color_overrides.html @@ -1,21 +1,23 @@ [% -blue = '#385889' +blue = '#1d1a3a' blue_pale = '#bec7d6' +red = '#b72c5d' body_background_color = blue_pale body_text_color = color_black -header_background_color = color_white +header_background_color = blue header_text_color = color_white secondary_column_background_color = color_white -button_background_color = blue +button_background_color = red button_text_color = color_white +link_text_color = '#00e' logo_file = 'logo.png' -logo_width = "220" # pixel measurement, but without 'px' suffix -logo_height = "74" # pixel measurement, but without 'px' suffix +logo_width = "265" # pixel measurement, but without 'px' suffix +logo_height = "80" # pixel measurement, but without 'px' suffix %] diff --git a/templates/web/nottinghamshirepolice/footer_extra.html b/templates/web/nottinghamshirepolice/footer_extra.html new file mode 100644 index 00000000000..ad1ddef980f --- /dev/null +++ b/templates/web/nottinghamshirepolice/footer_extra.html @@ -0,0 +1,128 @@ + +
+ Powered by + SocietyWorks +
+Nottinghamshire OPCC is one of 16 other PCC areas which has been selected to pilot the ASB Immediate Justice projects. The scheme will provide an opportunity for those who commit low level antisocial behaviour to compensate the community by undertaking supervised reparation activities which help to improve the environment e.g., litter picking, graffiti removal. Offenders will be offered these placements as an alternative to prosecution or current disposals methods which may only mean a verbal or written caution. In this way offenders will payback to the community for their offence which hopefully will provide victims with a sense that justice has been served. diff --git a/templates/web/nottinghamshirepolice/header_extra.html b/templates/web/nottinghamshirepolice/header_extra.html new file mode 100644 index 00000000000..a26651cb8de --- /dev/null +++ b/templates/web/nottinghamshirepolice/header_extra.html @@ -0,0 +1,5 @@ + + + + + diff --git a/templates/web/nottinghamshirepolice/site-name.html b/templates/web/nottinghamshirepolice/site-name.html new file mode 100644 index 00000000000..23d2e6b2917 --- /dev/null +++ b/templates/web/nottinghamshirepolice/site-name.html @@ -0,0 +1 @@ +Inmediate Justice \ No newline at end of file diff --git a/web/cobrands/nottinghamshirepolice/_variables.scss b/web/cobrands/nottinghamshirepolice/_variables.scss index a0b07d9d8f8..cf26030f6ca 100644 --- a/web/cobrands/nottinghamshirepolice/_variables.scss +++ b/web/cobrands/nottinghamshirepolice/_variables.scss @@ -1,24 +1,129 @@ +// Styling based on https://preview-pcc-nottinghamshire.cloud.contensis.com/Preview/1/news/more-officers-take-to-the-streets-to-tackle-antisocial-behaviour-and-serious-violence + +// If you are wanting a right-to-left layout, uncomment the following line. +// $direction: right; + /* COLOURS */ +$blue-1000: rgb(0, 0, 37); // Active state navbar +$blue-900: rgb(29, 26, 58); //For navbar and secondary buttons +$blue-500: rgb(23, 33, 128); // Background sections +$blue-400: rgb(46, 49, 146); // Blue cards +$blue-300: rgb(78, 188, 246); // Focus outline colour +$grey-bg: rgb(247, 247, 249); +$grey: rgb(211, 213, 222); // Input borders +$black: rgb(29, 26, 58); +$white: #fff; +$red: rgb(183, 44, 93); // Use for buttons and errors. Example here: https://preview-pcc-nottinghamshire.cloud.contensis.com/Preview/1/news/more-officers-take-to-the-streets-to-tackle-antisocial-behaviour-and-serious-violence +$pink: rgb(169, 16, 177); + +$error_color: $red; + +$green: #016200; //For buttons and links +$green-600: #065325; // Hover effect buttons + +$grey-100: #f5f5f57a; //Background for most sections the website +$grey-200: #f5f5f5; // Background for banners + +$yellow: #e2ca76; // For info boxes body with no title and tags +$yellow-400: #eee3ba; // body for info boxes with title tag + +$primary: $red; +$primary_b: $black; +$primary_text: $white; +$primary_link_color: rgb(0, 0, 238); +$primary_link_hover_color: rgb(0, 0, 238); +$primary_link_hover_decoration: underline; +$link-color: rgb(0, 0, 238); // Browser link colour +$link-text-decoration: none; +$link-hover-text-decoration: underline; +$link-hover-color: rgb(0, 0, 238); + +$focus-bg-top: $yellow; +$focus-bg-bottom: $yellow; +$focus-text: $black; -$black: #000; -$notts_police_blue: #039; -$primary: $notts_police_blue; -$primary_b: #222; -$primary_text: #222; +$button-padding-top: 1rem; +$button-padding-bottom: 1rem; +$button-padding-left: 1.5rem; +$button-padding-right: 1.5rem; -$base_bg: #fff; -$base_fg: #222; +$button-border-radius: 0.25rem; +$button-primary-bg-top: $primary; +$button-primary-bg-bottom: $primary; +$button-primary-border: $primary; +$button-primary-text: $primary_text; +$button-primary-hover-bg-bottom:$pink; +$button-primary-hover-bg-top:$pink; +$button-primary-hover-border:$pink; +$button-primary-hover-text: $primary_text; +$button-primary-focus-bg-bottom: $primary; +$button-primary-focus-bg-top: $primary; +$button-primary-focus-border: $primary; +$button-primary-focus-text: $primary_text; -/* NAVBAR */ +$button-secondary-bg-top: $white; +$button-secondary-bg-bottom: $white; +$button-secondary-border: $blue-900; +$button-secondary-text: $blue-900; +$button-secondary-hover-bg-bottom: $blue-900; +$button-secondary-hover-bg-top: $blue-900; +$button-secondary-hover-border: $blue-900; +$button-secondary-hover-text: $primary_text; +$button-secondary-focus-bg-bottom: $white; +$button-secondary-focus-bg-top: $white; +$button-secondary-focus-border: $blue-900; +$button-secondary-focus-text: $blue-900; -$nav_colour: $primary_text; -$nav_background_colour: $primary; -$nav_hover_background_colour: $primary_b; +$base_bg: $white; +$base_fg: $black; -/* OTHER VARIABLES */ +$error_color: $red; +// FONTS +$arial-font: Arial, Helvetica, sans-serif; + +$heading-font: "Manrope", sans-serif; +$body-font: $arial-font; +$meta-font: $arial-font; + +// HEADER +$mappage-header-height: 7.5rem; +$header-top-border-width: 0; +$nav_background_colour: $blue-900; +$nav_colour: $white; +$nav_hover_background_colour: $blue-1000; + +// FRONTPAGE +// Mobile +$front-main-color: $primary_b; +$front-main-background: $grey-100; +$postcodeform-background: $white; +$postcodeform-color: $primary_b; + +// Desktop +$front-main-background-desktop: $blue-900; +$front-main-container-background-desktop: $grey-bg; +$front-main-color-desktop: $primary_b; +$postcodeform-color-desktop: $black; + +$geolocation-link-border: $primary; +$geolocation-link: $primary; +$geolocation-link-background-color: $white; + +// Colour used for front page 'how to report a problem' steps +$col_big_numbers: $primary_b; +$layout_front_stats_color: $primary_b; $col_click_map: $primary; -$front-main-color: #fff; -$form-hint-color: #222; -$front-main-color-desktop: #222; +$mappage-sidebar-width: 32em; +$mobile-sticky-sidebar-button-menu-image: "menu-white"; +$sticky-sidebar-link-color: $primary; + +$container-max-width: 90rem; + +@mixin nott-focus-state { + &:focus { + outline: $blue-300 solid 0.25rem; + outline-offset: 0.1rem; + } +} diff --git a/web/cobrands/nottinghamshirepolice/base.scss b/web/cobrands/nottinghamshirepolice/base.scss index 59ac3c367a7..aa9b27ad286 100644 --- a/web/cobrands/nottinghamshirepolice/base.scss +++ b/web/cobrands/nottinghamshirepolice/base.scss @@ -4,23 +4,202 @@ @import "../sass/base"; @import "../fixmystreet-uk-councils/societyworks-footer"; -.postcode-form-box { - color: #fff; +html { + body, p { + font-size: 1.25rem; + } } -.border-wrapper { - border: 0.5rem solid $black; - padding: 1rem; - margin: 3rem 0rem; +// GENERAL COMPONENTS +h1, h2, h3 { + font-family: $heading-font; +} - h3 { - font-family: $heading-font; - &:first-child { - margin-top: 0; +/* BUTTONS */ +.btn-primary, +.btn--primary, +.postcode-form-box div input#sub, +#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,$focus-bg-bottom: $button-primary-focus-bg-bottom, $focus-bg-top: $button-primary-focus-bg-top, $focus-border: $button-primary-focus-border, $focus-text: $button-primary-focus-text); + border-radius: $button-border-radius; + @include button-size(); + text-decoration: none; // For #report-cta + font-size: 1.25rem; + @include nott-focus-state; +} + +.btn--secondary, +.btn-secondary, +.nav-menu a.btn-secondary, +a#geolocate_link, +.my-account-buttons a{ + @include button-variant($bg-top: $button-secondary-bg-top, $bg-bottom: $button-secondary-bg-bottom, $border: $button-secondary-border, $text: $button-secondary-text, $hover-bg-bottom: $button-secondary-hover-bg-bottom, $hover-bg-top: $button-secondary-hover-bg-top, $hover-border: $button-secondary-hover-border, $hover-text: $button-secondary-hover-text,$focus-bg-bottom: $button-secondary-focus-bg-bottom, $focus-bg-top: $button-secondary-focus-bg-top, $focus-border: $button-secondary-focus-border, $focus-text: $button-secondary-focus-text); + @include button-size(); + border-width: 0.125rem; + border-radius: $button-border-radius; + text-decoration: none; // For .my-account-buttons + font-size: 1.25rem; + @include nott-focus-state; +} + +input[type="text"], +textarea, +.postcode-form-box div, +.form-control { + border: 2px solid $grey; + border-radius: 0.25rem; + @include nott-focus-state; +} + +a, +.nav-menu span { + @include nott-focus-state; +} + +.site-message { + border: 0.3rem solid $blue-900; + border-radius: 0.5rem; + + :first-child { + margin-top: 0; + } +} + +// HEADER +.nav-menu a, +.nav-menu a:visited { + background-color: $blue-900; + border-bottom: none; + color: $primary_text; + font-weight: 700; +} + +.nav-menu span { + background-color: $blue-1000; + color: $primary_text; + border-bottom: none; + font-weight: 700; +} + +#site-logo { + background-size: 9.0625rem; + height: 5.5rem; + width: 16.5rem; + @include svg-background-image("/cobrands/nottinghamshirepolice/images/logo"); +} + +// FOOTER +footer.main-footer { + background-color: $blue-900; + color: $primary_text; + padding-top: 4rem; + a { + color: $primary_text; + &:hover { + color: rgb(253, 168, 209); } } - p:last-child { - margin-bottom: 0; + .main-content { + display: flex; + flex-flow: column wrap; + -webkit-box-align: center; + align-items: center; + flex-wrap: wrap; + -webkit-box-pack: justify; + justify-content: space-between; + padding-bottom: 4rem; + gap: 5rem; + + .first-column { + display: flex; + flex-flow: column wrap; + -webkit-box-align: start; + align-items: start; + -webkit-box-pack: center; + justify-content: center; + -webkit-box-align: center; + align-items: center; + color: rgb(255, 255, 255); + gap: 2.5rem; + + .social-container { + display: flex; + flex-wrap: wrap; + gap: 1rem; + } + } } + + .list-wrapper { + display: flex; + flex-flow: column wrap; + -webkit-box-pack: center; + justify-content: center; + -webkit-box-align: center; + align-items: center; + color: rgb(255, 255, 255); + gap: 2.5rem; + } + + ul { + display: flex; + flex-flow: column wrap; + -webkit-box-pack: center; + justify-content: center; + -webkit-box-align: center; + align-items: center; + list-style: none; + margin: 0px; + padding: 0px; + text-align: center; + } + + li { + list-style: none; + + &.contact-wrapper { + display: flex; + flex-flow: column wrap; + } + + &.default { + display: flex; + margin-bottom: 1.5rem; + } + + &.opening-hours { + font-size: 1.25rem; + line-height: 1.6; + font-weight: bold; + } + } + + .section-title { + font-family: $heading-font; + font-optical-sizing: auto; + font-style: normal; + font-size: 1.5rem; + line-height: 1.333; + font-weight: bold; + margin-bottom: 2.5rem; + display: inline-block; + } + + .credits { + text-align: center; + } +} + +// HOMEPAGE +a#geolocate_link { + margin-top: 1rem; +} + +.postcode-form-box div { + border-radius: 0.3rem; +} + +#front-main-container { + box-sizing: border-box; } diff --git a/web/cobrands/nottinghamshirepolice/images/favicon.png b/web/cobrands/nottinghamshirepolice/images/favicon.png new file mode 100644 index 00000000000..9b81363fc52 Binary files /dev/null and b/web/cobrands/nottinghamshirepolice/images/favicon.png differ diff --git a/web/cobrands/nottinghamshirepolice/images/inmediate-justice-logo.png b/web/cobrands/nottinghamshirepolice/images/inmediate-justice-logo.png new file mode 100644 index 00000000000..d0c99f7a3b6 Binary files /dev/null and b/web/cobrands/nottinghamshirepolice/images/inmediate-justice-logo.png differ diff --git a/web/cobrands/nottinghamshirepolice/images/logo.png b/web/cobrands/nottinghamshirepolice/images/logo.png index 907bf9d7f6f..398ebf97612 100644 Binary files a/web/cobrands/nottinghamshirepolice/images/logo.png and b/web/cobrands/nottinghamshirepolice/images/logo.png differ diff --git a/web/cobrands/nottinghamshirepolice/images/logo.svg b/web/cobrands/nottinghamshirepolice/images/logo.svg new file mode 100644 index 00000000000..f59bbba3e20 --- /dev/null +++ b/web/cobrands/nottinghamshirepolice/images/logo.svg @@ -0,0 +1,2 @@ + + diff --git a/web/cobrands/nottinghamshirepolice/layout.scss b/web/cobrands/nottinghamshirepolice/layout.scss index 8b67dbd2b4a..8ebb09c4be6 100644 --- a/web/cobrands/nottinghamshirepolice/layout.scss +++ b/web/cobrands/nottinghamshirepolice/layout.scss @@ -1,2 +1,61 @@ @import "_variables"; @import "../sass/layout"; + +#site-logo { + background-size: contain; + height: $mappage-header-height; + width: 16.5rem; +} + +.postcode-form-box { + overflow: visible; // Doesn't cover the outline when focusing elements +} + +// GENERAL + +.alertpage { + p { + max-width: 59.5rem; + } +} + +// HEADER +.nav-menu--main a, .nav-menu--main span { + padding: 1em; +} + +.nav-menu--main span, +.nav-menu--main span.report-a-problem-btn:hover { + background-color: $blue-1000; + color: $primary_text; + text-decoration: none; +} + +// FOOTER +footer.main-footer { + padding-top: 5rem; + .main-content { + gap: 2.5rem; + flex-direction: row; + -webkit-box-align: start; + align-items: start; + padding-bottom: 7.5rem; + } + + .list-wrapper { + -webkit-box-align: start; + align-items: start; + } + + ul { + -webkit-box-align: start; + align-items: start; + text-align: start; + } +} + +// HOMEPAGE + +#front-main { + padding-bottom: 4rem; +}