Skip to content

[Causeway] Added Front-end #6032

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
lucascumsille wants to merge 1 commit into
base: master
Choose a base branch
from
Open

[Causeway] Added Front-end #6032

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
24 changes: 24 additions & 0 deletions perllib/FixMyStreet/Cobrand/Causeway.pm
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,24 @@
=head1 NAME

FixMyStreet::Cobrand::Whatever - code specific to the Whatever cobrand

=head1 SYNOPSIS

Rutland is a unitary authority, with a Salesforce backend.

=head1 DESCRIPTION

=cut

package FixMyStreet::Cobrand::Causeway;
use parent 'FixMyStreet::Cobrand::Whitelabel';

use strict;
use warnings;

sub council_area_id { return 2498; }
sub council_area { return 'Causeway'; }
sub council_name { return 'Causeway'; }
sub council_url { return 'Causeway'; }

1;
21 changes: 21 additions & 0 deletions templates/email/causeway/_email_color_overrides.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,21 @@
[%

color_primary = '#301b5d'
color_pale_grey = '$cobrand_lavander_300'

body_font_family = "Arial, sans-serif"

header_background_color = color_primary
header_text_color = color_white

link_text_color = '#6542ff'
secondary_column_background_color = color_pale_grey

button_background_color = color_primary
button_text_color = color_white

logo_file = 'logo.png'
logo_width = "280" # pixel measurement, but without 'px' suffix
logo_height = "60" # pixel measurement, but without 'px' suffix

%]
114 changes: 114 additions & 0 deletions templates/web/causeway/footer_extra.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,114 @@
<footer class="cobrand-footer">
<div class="container">
<div class="cobrand-footer__logo">
<a class="cobrand-footer__logo-link" href="https://causeway.com?hsLang=en">
<img class="cobrand-footer__logo-img" src="/cobrands/causeway/images/logo.svg" alt="Causeway logo - back to homepage" width="536" height="115" loading="lazy">
</a>
</div>
<div class="cobrand-footer__main">
<div class="cobrand-footer__intro">
<div class="cobrand-footer__intro-top">
<div class="cobrand-footer__text flow">
<h4 class="cobrand-footer__heading">Get in touch with Causeway today</h4>
</div>
<div class="cobrand-footer__buttons">
<div class="cobrand-footer__button-row">
<a class="btn btn-orange" href="https://cta-service-cms2.hubspot.com/web-interactives/public/v1/track/click?encryptedPayload=AVxigLL%2F9t4se7kFzxQ6oUYrgztsbovrx1tBAVd%2BNyfWsv658uyzzY0M0sXaY8bxSM5mZefLF%2BVrKoWGH%2F5K1R2WZOd%2BHfd4D4Q67Nb36tLXL9orDqGP80WLednEgEBkRkzXZzVH7Z5tkCRj7aUvST%2BNX6IBjXJ%2BZeB8Mc0rjJ4qiKcg7PJroa7Y%2Bbfb&amp;portalId=746800&amp;pageUrl=https%3A%2F%2Fwww.causeway.com%2F&amp;pageTitle=Causeway+construction+and+maintenance+management+software+%7C+Causeway&amp;referrer=https%3A%2F%2Fwww.causeway.com%2F&amp;userAgent=Mozilla%2F5.0+%28Macintosh%3B+Intel+Mac+OS+X+10_15_7%29+AppleWebKit%2F537.36+%28KHTML%2C+like+Gecko%29+Chrome%2F147.0.0.0+Safari%2F537.36&amp;hutk=&amp;hssc=&amp;hstc=&amp;pageId=28440191947">Get in touch</a>
<a class="btn cobrand-footer__button--secondary" href="https://www.causeway.com/support?hsLang=en">Customer support
<svg width="13" height="12" viewBox="0 0 13 12" fill="none">
<path d="M1 5.652h10.686m0 0L7.5 1.152m4.186 4.5-4.186 4.5" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
</svg>
</a>
</div>
</div>
</div>
<div class="cobrand-footer__social">
<div class="cobrand-footer__social-title">Follow us</div>
<div class="cobrand-footer__social-icons">
<a class="cobrand-footer__social-link" href="https://www.linkedin.com/company/causeway-technologies/" target="blank" rel="nofollow noopener">
<svg xmlns="http://www.w3.org/2000/svg" width="19" height="20" viewBox="0 0 19 20" fill="none">
<path d="M18.9999 19.5V12.5413C18.9999 9.12129 18.2637 6.50879 14.2737 6.50879C12.3499 6.50879 11.0674 7.55379 10.5449 8.55129H10.4974V6.81754H6.72119V19.5H10.6637V13.2063C10.6637 11.5438 10.9724 9.95254 13.0149 9.95254C15.0337 9.95254 15.0574 11.8288 15.0574 13.3013V19.4763H18.9999V19.5Z" fill="white"/>
<path d="M0.308594 6.81738H4.25109V19.4999H0.308594V6.81738Z" fill="white"/>
<path d="M2.28 0.5C1.02125 0.5 0 1.52125 0 2.78C0 4.03875 1.02125 5.08375 2.28 5.08375C3.53875 5.08375 4.56 4.03875 4.56 2.78C4.56 1.52125 3.53875 0.5 2.28 0.5Z" fill="white"/>
</svg>
</a>
<a class="cobrand-footer__social-link" href="https://twitter.com/causewaytech" target="blank" rel="nofollow noopener">
<svg xmlns="http://www.w3.org/2000/svg" width="19" height="20" viewBox="0 0 19 20" fill="none">
<path d="M11.3076 8.5452L18.3808 0.5H16.7046L10.563 7.48554L5.65769 0.5H0L7.41779 11.0634L0 19.5H1.67621L8.16194 12.123L13.3423 19.5H19L11.3072 8.5452H11.3076ZM9.01178 11.1564L8.2602 10.1046L2.28017 1.73469H4.85474L9.68069 8.48944L10.4323 9.54132L16.7054 18.3215H14.1309L9.01178 11.1568V11.1564Z" fill="white"/>
</svg>
</a>
<a class="cobrand-footer__social-link" href="https://www.facebook.com/CausewayTech/" target="blank" rel="nofollow noopener">
<svg xmlns="http://www.w3.org/2000/svg" width="11" height="22" viewBox="0 0 11 22" fill="none">
<path d="M7.14053 22V11.9655H10.3824L10.8688 8.05372H7.14053V5.55662C7.14053 4.42442 7.44202 3.65284 9.00711 3.65284L11 3.65199V0.153153C10.6554 0.10664 9.47232 0 8.0954 0C5.22015 0 3.2517 1.82266 3.2517 5.1692V8.05372H0V11.9655H3.2517V22H7.14053Z" fill="white"/>
</svg>
</a>
</div>
</div>
</div>
<div class="cobrand-footer__menus">
<div class="cobrand-footer__menu">
<div class="cobrand-footer__menu-title">Useful links</div>
<ul class="cobrand-footer__menu-list">
<li class="cobrand-footer__menu-item"><a class="cobrand-footer__menu-link" href="https://www.causeway.com/contact-sales">Contact</a></li>
<li class="cobrand-footer__menu-item"><a class="cobrand-footer__menu-link" href="https://www.causeway.com/support">Support</a></li>
<li class="cobrand-footer__menu-item"><a class="cobrand-footer__menu-link" href="https://www.causeway.com/legal">Legal</a></li>
<li class="cobrand-footer__menu-item"><a class="cobrand-footer__menu-link" href="https://www.causeway.com/legal">Compliance</a></li>
<li class="cobrand-footer__menu-item"><a class="cobrand-footer__menu-link" href="https://www.causeway.com/locations">Locations</a></li>
</ul>
</div>
<div class="cobrand-footer__menu">
<div class="cobrand-footer__menu-title">Why us</div>
<ul class="cobrand-footer__menu-list">
<li class="cobrand-footer__menu-item"><a class="cobrand-footer__menu-link" href="https://www.causeway.com/what-we-stand-for">What we stand for</a></li>
<li class="cobrand-footer__menu-item"><a class="cobrand-footer__menu-link" href="https://www.causeway.com/our-history">Our history</a></li>
<li class="cobrand-footer__menu-item"><a class="cobrand-footer__menu-link" href="https://www.causeway.com/team">Our team</a></li>
<li class="cobrand-footer__menu-item"><a class="cobrand-footer__menu-link" href="https://www.causeway.com/sustainability">Our sustainability commitments</a></li>
</ul>
</div>
<div class="cobrand-footer__menu">
<div class="cobrand-footer__menu-title">What we do</div>
<ul class="cobrand-footer__menu-list">
<li class="cobrand-footer__menu-item"><a class="cobrand-footer__menu-link" href="https://www.causeway.com/causeway-one">CausewayOne</a></li>
<li class="cobrand-footer__menu-item"><a class="cobrand-footer__menu-link" href="https://www.causeway.com/design">Design</a></li>
<li class="cobrand-footer__menu-item"><a class="cobrand-footer__menu-link" href="https://www.causeway.com/workforce">Workforce</a></li>
<li class="cobrand-footer__menu-item"><a class="cobrand-footer__menu-link" href="https://www.causeway.com/supply-chain">Supply Chain</a></li>
<li class="cobrand-footer__menu-item"><a class="cobrand-footer__menu-link" href="https://www.causeway.com/commercial">Commercial</a></li>
<li class="cobrand-footer__menu-item"><a class="cobrand-footer__menu-link" href="https://www.causeway.com/infrastructure">Infrastructure</a></li>
</ul>
</div>
<div class="cobrand-footer__menu">
<div class="cobrand-footer__menu-title">Insights</div>
<ul class="cobrand-footer__menu-list">
<li class="cobrand-footer__menu-item"><a class="cobrand-footer__menu-link" href="https://www.causeway.com/insights?content_type__in=Blogs">Articles</a></li>
<li class="cobrand-footer__menu-item"><a class="cobrand-footer__menu-link" href="https://www.causeway.com/insights?content_type__in=News">News</a></li>
<li class="cobrand-footer__menu-item"><a class="cobrand-footer__menu-link" href="https://www.causeway.com/insights?content_type__in=Podcasts">Podcast</a></li>
<li class="cobrand-footer__menu-item"><a class="cobrand-footer__menu-link" href="https://www.causeway.com/insights?content_type__in=OnDemand%20Webinars">Webinars</a></li>
<li class="cobrand-footer__menu-item"><a class="cobrand-footer__menu-link" href="https://www.causeway.com/insights?content_type__in=Case%20studies">Case Studies</a></li>
<li class="cobrand-footer__menu-item"><a class="cobrand-footer__menu-link" href="https://www.causeway.com/insights?content_type__in=Downloads">Downloads</a></li>
</ul>
</div>
<div class="cobrand-footer__menu">
<div class="cobrand-footer__menu-title">Who we serve</div>
<ul class="cobrand-footer__menu-list">
<li class="cobrand-footer__menu-item"><a class="cobrand-footer__menu-link" href="https://www.causeway.com/contractors">Construction contractors</a></li>
<li class="cobrand-footer__menu-item"><a class="cobrand-footer__menu-link" href="https://www.causeway.com/local-authorities">Local and highways authorities</a></li>
<li class="cobrand-footer__menu-item"><a class="cobrand-footer__menu-link" href="https://www.causeway.com/infrastructure-operators">Infrastructure and utility operators</a></li>
<li class="cobrand-footer__menu-item"><a class="cobrand-footer__menu-link" href="https://www.causeway.com/house-builders">House builders</a></li>
<li class="cobrand-footer__menu-item"><a class="cobrand-footer__menu-link" href="https://www.causeway.com/engineering-consultants">Engineering consultants</a></li>
<li class="cobrand-footer__menu-item"><a class="cobrand-footer__menu-link" href="https://www.causeway.com/suppliers-and-manufacturers">Suppliers and manufacturers</a></li>
</ul>
</div>
</div>
</div>
</div>
</footer>
<div class="cobrand-footer__secondary" >
<div class="container">
<span>Copyright © Causeway Technologies 2026.</span>
<span>Registered Office: Sterling House 20 Station Road Gerrards Cross Buckinghamshire SL9 8EL United Kingdom</span>
<span>Registered No. 3921897</span>
</div>
</div>

[% PROCESS '_footer_main_nav.html' %]
[% PROCESS '_footer_extra_powered_by.html' %]
1 change: 1 addition & 0 deletions templates/web/causeway/footer_extra_js.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
[% PROCESS 'footer_extra_js_base.html' highways=1 roadworks=1 validation=1 cobrand_js=1 %]
Empty file added templates/web/causeway/front/footer-marketing.html
View file
Open in desktop
Empty file.
5 changes: 5 additions & 0 deletions templates/web/causeway/header_extra.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Instrument+Sans:ital,wght@0,400..700;1,400..700&family=Plus+Jakarta+Sans:ital,wght@0,200..800;1,200..800&display=swap" rel="stylesheet">

<link rel="shortcut icon" href="[% c.uri_for('/cobrands/causeway/images/favicon.svg') %]">
2 changes: 2 additions & 0 deletions templates/web/causeway/header_logo.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,2 @@
<a href="/" id="site-logo">FixMyStreet - Causeway</a>
<a href="/" id="report-cta" title="[%- loc('Report a problem') -%]">[%- loc('Report') -%]</a>
1 change: 1 addition & 0 deletions templates/web/causeway/site-name.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
Causeway FixMyStreet
205 changes: 205 additions & 0 deletions web/cobrands/causeway/_variables.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,205 @@
/* This styling is based on https://drive.google.com/file/d/1nBfiQEAxYIP-Ve_AAIe8GRd6nCYL06_-/view and https://www.causeway.com/
*/

/* COLOURS */
$cobrand_orange: #f87a63; // Secondary button
$cobrand_lavander_300: #f2efff;
$cobrand_lavander_600: #6542ff;
$cobrand_lavander_900: #200d3f; // Headings
$cobrand_lavander: #957dff; // Links
$cobrand_purple: #301b5d;
$cobrand_red: #eb0000;
$cobrand_yellow: #fd0; // unknown
$cobrand_white: #fff;
$cobrand_black: #434049; // Body colour
$cobrand_green: #03cf9e;

$cobrand_grey: #f2f2f2; // Body bg colour
$cobrand_grey_300: #e0e0e0; // Active and Hover navbar link
$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_purple;
$yellow: $cobrand_yellow;

$primary_b: $cobrand_black;
$primary_text: $cobrand_white;

/* FRONTPAGE */
$base_bg: $cobrand_white;
$base_fg: $cobrand_black;
$front_stats_bg: $cobrand_white;
$layout_front_stats_color: $primary;

/* LINKS */
$primary_link_color: $cobrand_lavander_600;
$primary_link_hover_color: $cobrand_lavander;
$primary_link_decoration: none;
$primary_link_hover_decoration: none;

$link-color: $cobrand_lavander_600;
$link-hover-color: $cobrand_lavander;
$link-visited-color: $primary;
$link-text-decoration: none;
$link-hover-text-decoration: none;

/* BUTTONS */
$button-padding-top: 0.6875rem;
$button-padding-bottom: 0.6875rem;
$button-padding-left: 1.375rem;
$button-padding-right: 1.375rem;
$button-border-radius: 100px;

// 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_lavander;
$button-primary-hover-bg-top: $cobrand_lavander;
$button-primary-hover-border: $primary;
$button-primary-hover-text: $primary_text;

$geolocation-link: $primary;
$geolocation-link-border: $primary;

/* FONTS */

$heading-font: "Plus Jakarta Sans", Arial, sans-serif;
$body-font: "Instrument Sans", Arial, sans-serif; // Except for button that use Plus Jakarta 700
$meta-font: "Instrument Sans", Arial, sans-serif;

/* NAVBAR */

$nav_colour: $cobrand_purple;
$nav_background_colour: transparent;
$nav_hover_background_colour: transparent;

$mappage-header-height: calc(3.75rem + 4px);
$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: 71.25rem;

$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: $cobrand_lavander_300;
$itemlist_item_background: $base_bg;
$itemlist_item_background_hover: $cobrand_lavander_300;
$col_big_numbers: $primary;

// $form-control-border-color: #aaaaaa;
$mobile-sticky-sidebar-button-menu-image: "menu-white";

$front-main-color: $primary;
$postcodeform-background: transparent;
$postcodeform-color: $primary;
$front-main-background: url("/cobrands/causeway/images/hero-bg.svg") right 0 / 56% no-repeat, linear-gradient(180deg, #feebe8 0%, #fff 100%);

$postcodeform-color-desktop: $primary;
$front-main-color-desktop: $primary;
$front-main-background-desktop: url("/cobrands/causeway/images/hero-bg.svg") right 0 / 38% no-repeat, linear-gradient(180deg, #feebe8 0%, #fff 100%);
$front-main-container-background-desktop: transparent;

$sticky-sidebar-bg-color: $cobrand_lavander_300;

.btn {
font-family: $heading-font;
font-weight: 700;
transition: color .2s ease,opacity .1s ease, background-color .2s ease, border .2s ease, background .2s ease;
position: relative;
z-index: 1;
overflow: hidden;
border: 2px solid;

&:after {
background: $primary;
border-radius: 100px;
content: "";
height: calc(100% + 4px);
left: -2px;
opacity: 0;
overflow: hidden;
position: absolute;
top: -2px;
transition: all .32s ease-in-out;
width: 44px;
z-index: -1;
}

&:hover {
border-color: $primary !important;
background: $cobrand_lavander !important;
color: $cobrand_white !important;
&::after {
opacity: 1;
width: calc(100% + 4px);
}
}
}

.btn-orange {
background: $cobrand_orange !important;
border-color: transparent !important;
color: $primary !important;
}

.btn-teal {
font-family: $heading-font;
font-weight: 700;
transition: color .2s ease,opacity .1s ease, background-color .2s ease, background .2s ease;
position: relative;
z-index: 1;
overflow: hidden;
background-color: $cobrand_green;
border: 2px solid;
border-color: $cobrand_green;

&:hover {
background-color: $cobrand_lavander;
}

&:after {
background: $primary;
border-radius: 100px;
content: "";
height: calc(100% + 4px);
left: -2px;
opacity: 0;
overflow: hidden;
position: absolute;
top: -2px;
transition: all .32s ease-in-out;
width: 44px;
z-index: -1;
}

&:hover {
background-color: $cobrand_lavander;
color: $cobrand_white;
border-color: $primary;
&::after {
opacity: 1;
width: calc(100% + 4px);
}
}
}
Loading
Loading