<div class="cookie-overlay">
<div class="banner" aria-modal="true" aria-labelledby="banner-label">
<div class="banner-title h4" id="banner-label">
<p>About our use of Cookies</p>
</div>
<div class="banner-content">
<p>We use various types of cookies on our website. Some are necessary simply for the site to work as it should, others are used to personalise the content and ads that you see, to provide social media features and to analyse our site traffic
and visits. We also share cookie collected information about your use of our site with our social media, advertising and analytics partners. If you are happy to accept all cookies simply click on the <b>Accept All Cookies and Close</b> button here. Otherwise you can choose which cookies you accept by selecting from the settings below and clicking <b>Save Preferences and Close</b> at the bottom of this page. These settings can be changed at any time using the '<b>Cookie settings</b>'
link in the footer.</p>
<p>
<a href="" class="button-yellow button-large" role="button" tabindex="0" data-scroll>
Accept All Cookies and Close
<span class="button-overlay"><span>
Accept All Cookies and Close
</span></span></a> </p>
<div class="cookie-group">
<div class="cookie-group heading">
Necessary Cookies:
</div>
<p>
These cookies are necessary for the website to function and cannot be switched off in our systems. They are usually only set in response to actions by you which amount to a request for something, such as setting your cookie preferences, logging in or
filling in forms.
</p>
<p>
You can set your browser to block or alert you about necessary cookies, but this can affect your ability to use some parts of our site.
</p>
</div>
<div class="cookie-group">
<div class="cookie-group heading">
Performance Cookies:
</div>
<div class="cookie-group details">
<div class="description">
<p>
Performance cookies allow us to count visits and traffic sources so we can measure and improve the performance of our site. They help us to know which pages are the most and least popular and see how visitors move around the site. Click in the box if
you are happy to accept these cookies:
</p>
</div>
<div class="cookie-toggle">
<label for="performanceToggle">
<input type="checkbox" value="1" id="performanceToggle" name="cookie" />
<span class="checkmark"></span>
</label>
</div>
</div>
</div>
<div class="cookie-group">
<div class="cookie-group heading">
Functional Cookies:
</div>
<div class="cookie-group details">
<div class="description">
<p>These cookies enable the website to provide enhanced functionality and personalisation. They may be set by us or by third parties whose services we have added to our pages. If you choose not to accept these cookies you may find
some or all of these services may not function properly. Click in the box if you are happy to accept these cookies:</p>
</div>
<div class="cookie-toggle">
<label for="functionalToggle">
<input type="checkbox" value="2" id="functionalToggle" name="cookie" />
<span class="checkmark"></span>
</label>
</div>
</div>
</div>
<div class="cookie-group">
<div class="cookie-group heading">
Targeting Cookies:
</div>
<div class="cookie-group details">
<div class="description">
<p>These cookies may be set by our advertising partners. Advertisers tend to use them to build a profile of your browsing history and interests and show you adverts relevant to it, both on this and other sites.</p>
<p>Targeting cookies store data that uniquely identifies your browser and internet device. If you do not accept these cookies you will experience less ‘targeted’ advertising (i.e. ads targeted to your browsing history and interests)
but please note, you will still see advertising. Click in the box if you are happy to accept these cookies:</p>
</div>
<div class="cookie-toggle">
<label for="targetingToggle">
<input type="checkbox" value="3" id="targetingToggle" name="cookie" />
<span class="checkmark"></span>
</label>
</div>
</div>
</div>
<div class="cookie-group">
<div class="cookie-group heading">
Social Media Cookies:
</div>
<div class="cookie-group details">
<div class="description">
<p>Social media cookies are set by social media companies who we provide links for on the site to enable you to share our content with your friends and networks. They are capable of tracking your browser across other sites and building
up a profile of your interests. These may also target the content and messages you see on other websites you visit.</p>
<p>If you do not allow these cookies you may not be able to use or see these social media sharing tools on our site. Click in the box if you are happy to accept these cookies:</p>
</div>
<div class="cookie-toggle">
<label for="socialToggle">
<input type="checkbox" value="4" id="socialToggle" name="cookie" />
<span class="checkmark"></span>
</label>
</div>
</div>
</div>
<p> </p>
<a href="" class="button-yellow button-large" role="button" tabindex="0" data-scroll>
Save Preferences and Close
<span class="button-overlay"><span>
Save Preferences and Close
</span></span></a> </div>
</div>
</div>
<div class="cookie-overlay">
<div class="banner" aria-modal="true" aria-labelledby="banner-label">
<div class="banner-title h4" id="banner-label"><p>About our use of Cookies</p></div>
<div class="banner-content">
<p>We use various types of cookies on our website. Some are necessary simply for the site to work as it should, others are used to personalise the content and ads that you see, to provide social media features and to analyse our site traffic and visits. We also share cookie collected information about your use of our site with our social media, advertising and analytics partners. If you are happy to accept all cookies simply click on the <b>Accept All Cookies and Close</b> button here. Otherwise you can choose which cookies you accept by selecting from the settings below and clicking <b>Save Preferences and Close</b> at the bottom of this page. These settings can be changed at any time using the '<b>Cookie settings</b>' link in the footer.</p>
<p>
{% include '@button' with {
label: 'Accept All Cookies and Close',
href: '',
size: 'large',
external: false,
scheme: 'yellow'
} %}
</p>
<div class="cookie-group">
<div class="cookie-group heading">
Necessary Cookies:
</div>
<p>
These cookies are necessary for the website to function and cannot be switched off in our systems. They are usually only set in response to actions by you which amount to a request for something, such as setting your cookie preferences, logging in or filling in forms.
</p>
<p>
You can set your browser to block or alert you about necessary cookies, but this can affect your ability to use some parts of our site.
</p>
</div>
<div class="cookie-group">
<div class="cookie-group heading">
Performance Cookies:
</div>
<div class="cookie-group details">
<div class="description">
<p>
Performance cookies allow us to count visits and traffic sources so we can measure and improve the performance of our site. They help us to know which pages are the most and least popular and see how visitors move around the site. Click in the box if you are happy to accept these cookies:
</p>
</div>
<div class="cookie-toggle">
<label for="performanceToggle">
<input type="checkbox" value="1" id="performanceToggle" name="cookie" />
<span class="checkmark"></span>
</label>
</div>
</div>
</div>
<div class="cookie-group">
<div class="cookie-group heading">
Functional Cookies:
</div>
<div class="cookie-group details">
<div class="description">
<p>These cookies enable the website to provide enhanced functionality and personalisation. They may be set by us or by third parties whose services we have added to our pages. If you choose not to accept these cookies you may find some or all of these services may not function properly. Click in the box if you are happy to accept these cookies:</p>
</div>
<div class="cookie-toggle">
<label for="functionalToggle">
<input type="checkbox" value="2" id="functionalToggle" name="cookie" />
<span class="checkmark"></span>
</label>
</div>
</div>
</div>
<div class="cookie-group">
<div class="cookie-group heading">
Targeting Cookies:
</div>
<div class="cookie-group details">
<div class="description">
<p>These cookies may be set by our advertising partners. Advertisers tend to use them to build a profile of your browsing history and interests and show you adverts relevant to it, both on this and other sites.</p>
<p>Targeting cookies store data that uniquely identifies your browser and internet device. If you do not accept these cookies you will experience less ‘targeted’ advertising (i.e. ads targeted to your browsing history and interests) but please note, you will still see advertising. Click in the box if you are happy to accept these cookies:</p>
</div>
<div class="cookie-toggle">
<label for="targetingToggle">
<input type="checkbox" value="3" id="targetingToggle" name="cookie" />
<span class="checkmark"></span>
</label>
</div>
</div>
</div>
<div class="cookie-group">
<div class="cookie-group heading">
Social Media Cookies:
</div>
<div class="cookie-group details">
<div class="description">
<p>Social media cookies are set by social media companies who we provide links for on the site to enable you to share our content with your friends and networks. They are capable of tracking your browser across other sites and building up a profile of your interests. These may also target the content and messages you see on other websites you visit.</p>
<p>If you do not allow these cookies you may not be able to use or see these social media sharing tools on our site. Click in the box if you are happy to accept these cookies:</p>
</div>
<div class="cookie-toggle">
<label for="socialToggle">
<input type="checkbox" value="4" id="socialToggle" name="cookie" />
<span class="checkmark"></span>
</label>
</div>
</div>
</div>
<p> </p>
{% include '@button' with {
label: 'Save Preferences and Close',
href: '',
size: 'large',
external: false,
scheme: 'yellow'
} %}
</div>
</div>
</div>
/* No context defined for this component. */
var consentCookieName = "cookie-consent";
var dataLayerKey = "OptanonActiveGroups";
var expiry = 1825;
var acceptAllButton = document.querySelectorAll(".banner-content .button-large")[0];
var saveAndCloseButton = document.querySelectorAll(".banner-content .button-large")[1];
var openCookiesDialog = document.querySelectorAll(".footer-submenu-three .footer-link")[4]; // This needs to be replaced on live with an ID
/**
* self-invoking function to boot all of our initial states, etc.
* Some of this stuff doesn't need to be here, but I've put it in here
* to keep it tidy. Effectively this is our "main" function.
*
* @return {object} Self reference for object chaining
*/
(function(){
if (document.querySelectorAll(".cookie-overlay").length) {
let cookies = getCookie(consentCookieName);
acceptAllButton.addEventListener("click", function(e){
e.preventDefault();
e.stopPropagation();
setAllCookies();
location.reload();
});
saveAndCloseButton.addEventListener("click", function(e){
e.preventDefault();
e.stopPropagation();
setSelectedCookies();
location.reload();
});
openCookiesDialog.addEventListener("click", function(e) {
e.preventDefault();
e.stopPropagation();
showBanner();
});
if (cookies) {
checkBoxesFromCookie();
hideBanner();
setDataLayerValue(dataLayerKey, cookies);
} else {
showBanner();
}
}
return this;
})()
/**
* deleteCookies - delete all cookies from the users machine. Copypasta from
* stackoverflow
* @return {object} Self reference for chaining
*/
function deleteCookies() {
var cookies = document.cookie.split("; ");
for (var c = 0; c < cookies.length; c++) {
var d = window.location.hostname.split(".");
while (d.length > 0) {
var cookieBase = encodeURIComponent(cookies[c].split(";")[0].split("=")[0]) + '=; expires=Thu, 01-Jan-1970 00:00:01 GMT; domain=' + d.join('.') + ' ;path=';
var p = location.pathname.split('/');
document.cookie = cookieBase + '/';
while (p.length > 0) {
document.cookie = cookieBase + p.join('/');
p.pop();
};
d.shift();
}
}
return this;
}
/**
* setCookie sets a cookie on the user's machine. Note that cookie
* values must be a string.
* @param {string} key The name of the cookie to set
* @param {string} value The value contained within the cookie
* @param {string} expiry The cookie lifetime in days
*/
function setCookie(name, value, expiry) {
expiry = expiry || 0;
let expiryDate = new Date();
expiryDate.setTime(expiryDate.getTime() + (expiry*24*60*60*1000));
let expires = "expires="+ expiryDate.toUTCString();
document.cookie = name + "=" + value + ";" + expires + ";path=/";
}
/**
* getCookie return the current value of a cookie set on the
* user's machine by the cookie name. Will return an empty string
* if the cookie does not exist.
* @param {string} key The name of the cookie to be retrieved
* @return {string} The value of the cookie
*/
function getCookie(name) {
var value = "; " + document.cookie;
var parts = value.split("; " + name + "=");
if (parts.length == 2) return parts.pop().split(";").shift();
return "";
}
/**
* setDataLayerValue inserts a key/value pair into the GTM DataLayer
* this is used for determining which GTM tags should fire. This should
* be in the same structure that's used by OneTrust to ensure compatability
* (selected cookie types are a comma separated list of integers). Note that
* dataLayer can only accept strings as values
* @param {string} key The key of the hash value to be set
* @param {string} value The hash value
*/
function setDataLayerValue(key, value) {
window.dataLayer = window.dataLayer || [];
window.dataLayer.push({key: value});
}
/**
* setAllCookies sets all available cookie options to 'on', this should
* be used when the "Accept all Cookies" button is clicked
* @return {object} Self reference for chaining
*/
function setAllCookies() {
deleteCookies(); // If the user's preferences have chagned we should delete all current cookies
let cookieFields = document.querySelectorAll('[name="cookie"]');
let cookieString = ',';
for (var i = 0; i < cookieFields.length; i++) {
cookieString += cookieFields[i].value + ',';
}
setCookie(consentCookieName,cookieString, expiry);
return this;
}
/**
* setSelectedCookies sets the cookie-consent string to match the selected
* checkboxes from the cookie pop-up
* @return {object} Self reference for chaining
*/
function setSelectedCookies() {
deleteCookies(); // If the user's preferences have chagned we should delete all current cookies
let selectedFields = document.querySelectorAll('[name="cookie"]:checked');
let cookieString = ",";
for (var i = 0; i < selectedFields.length; i++) {
cookieString += selectedFields[i].value + ",";
}
setCookie(consentCookieName, cookieString, expiry);
setDataLayerValue(dataLayerKey, cookieString);
return this;
}
/**
* checkBoxesFromCookie takes the current value stored in the cooker banner
* user preferences cookies and checks the correct checkboxes based on the
* content of the cookie
* @return {object} Self reference for chaining
*/
function checkBoxesFromCookie() {
let cookieValues = getCookie(consentCookieName);
cookieValues = cookieValues.split(',');
for (var i = 0; i < cookieValues.length; i++) {
let target = document.querySelectorAll('input[name="cookie"][value="' + cookieValues[i] + '"]')[0];
if (target) {
target.setAttribute("checked", "checked");
}
}
return this;
}
/**
* hideBanner hides the cookie banner by removing a class from the body. We do it
* this was so that the banner is "off" by default when a user doesn't have JavaScript
* enabled.
*
* @return {object} Self reference for method chaining
*/
function hideBanner() {
document.querySelectorAll(".cookie-overlay")[0].classList.remove("show-cookie-banner");
document.body.classList.remove("show-cookie-banner");
return this;
}
/**
* showBanner hides the cookie banner by adding a class to the body. We add the class so
* that the cookie banner is "off" by default when the user doesn't have JavaScript
* @return {object} Self reference for method chaining
*/
function showBanner() {
document.querySelectorAll(".cookie-overlay")[0].classList.add("show-cookie-banner");
document.body.classList.add("show-cookie-banner");
return this;
}
.cookie-overlay {
display: none;
max-width: 0.5px;
max-height: 0.5px;
position: absolute;
left: -9999px;
}
.cookie-overlay.show-cookie-banner {
display: block;
position: fixed;
max-width: 100vw;
max-height: 100vh;
width: 100vw;
height: 100vh;
top: 0;
left: 0;
background-color: rgba($black,0.8);
z-index: 5;
}
body.show-cookie-banner {
position: fixed;
height: 100vh;
overflow: hidden;
}
.banner {
display: grid;
grid-auto-rows: auto;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
max-height: 80%;
height: 80%;
width: 50%;
background-color: $primary-blue;
overflow: auto;
&-title {
font-family: $large-body-font;
color: $white;
margin-top: 1em;
margin-left: 1em;
}
&-content {
color: $white;
margin-bottom: 1em;
margin-left: 1em;
margin-right: 1em;
overflow-y: scroll;
/* Overwrite the default to keep the scrollbar always visible */
&::-webkit-scrollbar {
-webkit-appearance: none;
width: 7px;
}
&::-webkit-scrollbar:vertical {
border-radius: 4px;
background-color: rgba($black,0.25);
-webkit-box-shadow: 0 0 1px $white;
}
&::-webkit-scrollbar-thumb {
border-radius: 4px;
border: 2px solid $white;
background-color: $white;
}
}
&-controls {
width: 100%;
padding-bottom: 1em;
text-align: center;
.button-large:first-child {
margin-right: 1em;
}
}
.cookie-group {
margin: 0, $margin-small;
.heading {
font-weight: bold;
border-top: 1px solid $white;
padding-top: $margin-small;
margin-top: $margin-small;
margin-bottom: $margin-extra-small;
}
.details {
display: grid;
grid-auto-columns: auto;
grid-auto-rows: auto;
.description {
grid-column-start: 1;
grid-row-start: 1;
margin-right: $margin-extra-small;
}
.cookie-toggle {
grid-row-start: 1;
grid-column-start: 2;
align-self: center;
margin-right: $margin-small;
/* Hide the browser's default checkbox */
input {
position: absolute;
opacity: 0;
height: 0;
width: 0;
}
/* Create a custom checkbox */
.checkmark {
position: relative;
display: block;
height: 26px;
width: 26px;
border: 2px solid $white;
}
/* On mouse-over, add a grey background color */
:hover input ~ .checkmark {
cursor: pointer;
}
/* Create the checkmark/indicator (hidden when not checked) */
.checkmark:after {
content: "";
position: absolute;
display: none;
}
/* Show the checkmark when checked */
input:checked ~ .checkmark:after {
display: block;
}
/* Style the checkmark/indicator */
.checkmark:after {
left: 7px;
top: 2px;
width: 8px;
height: 14px;
border: solid $white;
border-width: 0 2px 2px 0;
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
}
}
}
}
}
A full-screen interstitial cookie pop-up. Designed to fit with our patterns, the cookie banner, when active, disables website navigation until the user makes a choice about cookies. Once the choice is made the banner will close and the page will refresh ensuring that we capture first time visitors from advertising partners without disruption. Cookie categories can be set by users with the exception of Essential Cookies which are always active.
None. Cookie banner is not configurable.