From 4ffdb294482341f4f82119b5e4daac6a5696b3f8 Mon Sep 17 00:00:00 2001 From: Rob DiVincenzo Date: Wed, 18 Sep 2024 13:42:12 -0400 Subject: [PATCH] OneTrust Cookie Banner (#12804) * onetrust_prototype * demo v2, cleanup, and workflows for ra * remove stray rule * move onetrust, fix linting, lint * Add onetrust callback * design feedback, fix button and adjust colors * Move onetrust to vendor directory, update assets * linting * refactor sass file for nesting * Add language support * Testing localized title * Move from locally hosted to onetrust CDN hosted scripts * remove whitespace * Remove stray rule * Add onetrust styling to pni * Load test or production onetrust script depending on app_environment * Update mozfest to not load onetrust script * Revert additional environment prefix check * Update colors and viewport with design feedback --- .github/workflows/continous-integration.yml | 2 +- .../workflows/visual-regression-testing.yml | 2 +- app.json | 2 +- env.default | 2 +- .../templates/mozfest/mozfest-base.html | 1 + .../networkapi/templates/pages/base.html | 13 ++ .../utility/templatetags/mofo_common.py | 22 ++- source/sass/buyers-guide/bg-main.scss | 5 + source/sass/main.scss | 3 + source/sass/onetrust-override.scss | 187 ++++++++++++++++++ 10 files changed, 234 insertions(+), 5 deletions(-) create mode 100644 source/sass/onetrust-override.scss diff --git a/.github/workflows/continous-integration.yml b/.github/workflows/continous-integration.yml index f60956ce08f..49ce23a42ad 100644 --- a/.github/workflows/continous-integration.yml +++ b/.github/workflows/continous-integration.yml @@ -144,7 +144,7 @@ jobs: CSP_FONT_SRC: "'self' https://code.cdn.mozilla.net https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/fonts/ data: https://static.fundraiseup.com/common-fonts/" CSP_IMG_SRC: "* data: blob: https://*.fundraiseup.com https://ucarecdn.com https://pay.google.com https://*.paypalobjects.com" CSP_FRAME_SRC: "'self' https://www.google.com/recaptcha/ https://*.stripe.com https://pay.google.com https://*.paypal.com https://*.fundraiseup.com" - CSP_SCRIPT_SRC: "'self' 'unsafe-inline' https://www.google-analytics.com/analytics.js http://*.shpg.org/ https://comments.mozillafoundation.org/ https://airtable.com https://platform.twitter.com https://cdnjs.cloudflare.com/ajax/libs/gsap/3.8.0/gsap.min.js https://cdnjs.cloudflare.com/ajax/libs/gsap/3.8.0/ScrollTrigger.min.js https://*.googletagmanager.com https://*.fundraiseup.com https://mozillafoundation.tfaforms.net https://www.google.com/recaptcha/ https://www.gstatic.com/recaptcha/ 'unsafe-eval' https://*.stripe.com https://m.stripe.network https://*.paypal.com https://*.paypalobjects.com https://pay.google.com" + CSP_SCRIPT_SRC: "'self' 'unsafe-inline' https://www.google-analytics.com/analytics.js http://*.shpg.org/ https://comments.mozillafoundation.org/ https://airtable.com https://platform.twitter.com https://cdnjs.cloudflare.com/ajax/libs/gsap/3.8.0/gsap.min.js https://cdnjs.cloudflare.com/ajax/libs/gsap/3.8.0/ScrollTrigger.min.js https://*.googletagmanager.com https://*.fundraiseup.com https://mozillafoundation.tfaforms.net https://www.google.com/recaptcha/ https://www.gstatic.com/recaptcha/ 'unsafe-eval' https://*.stripe.com https://m.stripe.network https://*.paypal.com https://*.paypalobjects.com https://pay.google.com https://cdn.cookielaw.org" CSP_STYLE_SRC: "'self' 'unsafe-inline' https://code.cdn.mozilla.net https://platform.twitter.com https://mozillafoundation.tfaforms.net https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" SECURE_CROSS_ORIGIN_OPENER_POLICY: "same-origin-allow-popups" steps: diff --git a/.github/workflows/visual-regression-testing.yml b/.github/workflows/visual-regression-testing.yml index 2d097cfb815..0cd205195f9 100644 --- a/.github/workflows/visual-regression-testing.yml +++ b/.github/workflows/visual-regression-testing.yml @@ -35,7 +35,7 @@ jobs: CSP_FRAME_SRC: " 'self' https://www.youtube.com https://comments.mozillafoundation.org/ https://airtable.com https://docs.google.com/ https://platform.twitter.com https://public.zenkit.com https://calendar.google.com https://www.youtube-nocookie.com https://form.typeform.com https://js.tito.io https://datawrapper.dwcdn.net https://www.google.com/recaptcha/ https://*.stripe.com https://pay.google.com https://*.paypal.com https://*.fundraiseup.com " CSP_IMG_SRC: " * data: blob: https://*.fundraiseup.com https://ucarecdn.com https://pay.google.com https://*.paypalobjects.com " CSP_MEDIA_SRC: " 'self' data: https://s3.amazonaws.com/mofo-assets/foundation/video/ " - CSP_SCRIPT_SRC: " 'self' 'unsafe-inline' https://www.google-analytics.com/analytics.js http://*.shpg.org/ https://comments.mozillafoundation.org/ https://airtable.com https://platform.twitter.com https://cdn.syndication.twimg.com https://embed.typeform.com https://js.tito.io https://js-plugins.tito.io/gtm.js https://tagmanager.google.com https://*.googletagmanager.com https://*.fundraiseup.com https://mozillafoundation.tfaforms.net https://www.google.com/recaptcha/ https://www.gstatic.com/recaptcha/ 'unsafe-eval' https://*.stripe.com https://m.stripe.network https://*.paypal.com https://*.paypalobjects.com https://pay.google.com " + CSP_SCRIPT_SRC: " 'self' 'unsafe-inline' https://www.google-analytics.com/analytics.js http://*.shpg.org/ https://comments.mozillafoundation.org/ https://airtable.com https://platform.twitter.com https://cdn.syndication.twimg.com https://embed.typeform.com https://js.tito.io https://js-plugins.tito.io/gtm.js https://tagmanager.google.com https://*.googletagmanager.com https://*.fundraiseup.com https://mozillafoundation.tfaforms.net https://www.google.com/recaptcha/ https://www.gstatic.com/recaptcha/ 'unsafe-eval' https://*.stripe.com https://m.stripe.network https://*.paypal.com https://*.paypalobjects.com https://pay.google.com https://cdn.cookielaw.org " CSP_STYLE_SRC: " 'self' 'unsafe-inline' https://code.cdn.mozilla.net https://platform.twitter.com https://js.tito.io https://tagmanager.google.com https://mozillafoundation.tfaforms.net https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css " CSP_INCLUDE_NONCE_IN: "script-src" DATABASE_URL: postgres://postgres:postgres@localhost:5432/network diff --git a/app.json b/app.json index 61cc7ff1c80..062cb75b735 100644 --- a/app.json +++ b/app.json @@ -32,7 +32,7 @@ "CSP_FONT_SRC": "'self' https://code.cdn.mozilla.net https://*.fundraiseup.com https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/fonts/", "CSP_IMG_SRC": "* data: blob: https://*.fundraiseup.com https://ucarecdn.com https://pay.google.com https://*.paypalobjects.com", "CSP_MEDIA_SRC": "'self' https://s3.amazonaws.com/mofo-assets/foundation/video/", - "CSP_SCRIPT_SRC": "'self' 'unsafe-inline' https://www.google-analytics.com/analytics.js http://*.shpg.org/ https://comments.mozillafoundation.org/ https://airtable.com https://platform.twitter.com https://cdn.syndication.twimg.com https://js.tito.io https://js-plugins.tito.io/gtm.js https://*.fundraiseup.com https://*.googletagmanager.com https://mozillafoundation.tfaforms.net https://www.google.com/recaptcha/ https://www.gstatic.com/recaptcha/ 'unsafe-eval' https://*.stripe.com https://m.stripe.network https://*.paypal.com https://pay.google.com", + "CSP_SCRIPT_SRC": "'self' 'unsafe-inline' https://www.google-analytics.com/analytics.js http://*.shpg.org/ https://comments.mozillafoundation.org/ https://airtable.com https://platform.twitter.com https://cdn.syndication.twimg.com https://js.tito.io https://js-plugins.tito.io/gtm.js https://*.fundraiseup.com https://*.googletagmanager.com https://mozillafoundation.tfaforms.net https://www.google.com/recaptcha/ https://www.gstatic.com/recaptcha/ 'unsafe-eval' https://*.stripe.com https://m.stripe.network https://*.paypal.com https://pay.google.com https://cdn.cookielaw.org", "CSP_STYLE_SRC": "'self' 'unsafe-inline' https://code.cdn.mozilla.net https://platform.twitter.com https://js.tito.io https://mozillafoundation.tfaforms.net https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css", "NPM_CONFIG_PRODUCTION": "true", "REVIEW_APP": "True", diff --git a/env.default b/env.default index 1fee3ab316c..b0240b5d9f2 100644 --- a/env.default +++ b/env.default @@ -55,7 +55,7 @@ CSP_FRAME_ANCESTORS=" 'self' " CSP_FRAME_SRC=" 'self' https://www.youtube.com https://comments.mozillafoundation.org/ https://airtable.com https://docs.google.com/ https://platform.twitter.com https://public.zenkit.com https://calendar.google.com https://www.youtube-nocookie.com https://form.typeform.com https://js.tito.io https://datawrapper.dwcdn.net https://www.google.com/recaptcha/ https://pay.google.com https://*.paypal.com https://*.fundraiseup.com https://*.stripe.com " CSP_IMG_SRC=" * data: blob: https://*.fundraiseup.com https://ucarecdn.com https://pay.google.com https://*.paypalobjects.com " CSP_MEDIA_SRC=" 'self' data: https://s3.amazonaws.com/mofo-assets/foundation/video/ " -CSP_SCRIPT_SRC=" 'self' 'unsafe-inline' https://www.google-analytics.com/analytics.js http://*.shpg.org/ https://comments.mozillafoundation.org/ https://airtable.com https://platform.twitter.com https://cdn.syndication.twimg.com https://embed.typeform.com https://js.tito.io https://js-plugins.tito.io/gtm.js https://tagmanager.google.com https://*.googletagmanager.com https://*.fundraiseup.com https://mozillafoundation.tfaforms.net https://www.google.com/recaptcha/ https://www.gstatic.com/recaptcha/ 'unsafe-eval' https://*.stripe.com https://m.stripe.network https://*.paypal.com https://*.paypalobjects.com https://pay.google.com " +CSP_SCRIPT_SRC=" 'self' 'unsafe-inline' https://www.google-analytics.com/analytics.js http://*.shpg.org/ https://comments.mozillafoundation.org/ https://airtable.com https://platform.twitter.com https://cdn.syndication.twimg.com https://embed.typeform.com https://js.tito.io https://js-plugins.tito.io/gtm.js https://tagmanager.google.com https://*.googletagmanager.com https://*.fundraiseup.com https://mozillafoundation.tfaforms.net https://www.google.com/recaptcha/ https://www.gstatic.com/recaptcha/ 'unsafe-eval' https://*.stripe.com https://m.stripe.network https://*.paypal.com https://*.paypalobjects.com https://pay.google.com https://cdn.cookielaw.org " CSP_STYLE_SRC=" 'self' 'unsafe-inline' https://code.cdn.mozilla.net https://platform.twitter.com https://js.tito.io https://tagmanager.google.com https://mozillafoundation.tfaforms.net https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css " CSP_INCLUDE_NONCE_IN=script-src diff --git a/network-api/networkapi/mozfest/templates/mozfest/mozfest-base.html b/network-api/networkapi/mozfest/templates/mozfest/mozfest-base.html index f7a9883384f..78d948a2321 100644 --- a/network-api/networkapi/mozfest/templates/mozfest/mozfest-base.html +++ b/network-api/networkapi/mozfest/templates/mozfest/mozfest-base.html @@ -20,6 +20,7 @@ })(window,document,'script','dataLayer','GTM-5TFTDCX'); {% endblock %} +{% block onetrust_script %}{% endblock %} {% block bodyclass %}mozfest{% endblock %} diff --git a/network-api/networkapi/templates/pages/base.html b/network-api/networkapi/templates/pages/base.html index 08bd305b660..6def1c5bd64 100644 --- a/network-api/networkapi/templates/pages/base.html +++ b/network-api/networkapi/templates/pages/base.html @@ -59,6 +59,19 @@ })(window,document,'script','FundraiseUp','ADCYPWMX'); {% endblock %} + {% block onetrust_script %} + + + {% endblock %} + {% wagtail_ab_testing_script %} {% block commento_meta %}{% endblock %} diff --git a/network-api/networkapi/utility/templatetags/mofo_common.py b/network-api/networkapi/utility/templatetags/mofo_common.py index ebbf3a31103..7e25626a17e 100644 --- a/network-api/networkapi/utility/templatetags/mofo_common.py +++ b/network-api/networkapi/utility/templatetags/mofo_common.py @@ -7,9 +7,29 @@ @register.simple_tag(takes_context=True) def environment_prefix(context): env_prefix = "" - app_env = settings.APP_ENVIRONMENT + app_env = get_app_environment() if app_env == "Staging": env_prefix = "[S]" elif app_env == "Review": env_prefix = "[RA]" return env_prefix + + +@register.simple_tag() +def onetrust_data_domain(): + """ + Get the OneTrust cookie "data-domain-script" script attribute. + + Data domain is taken from the data-domain-script script attribute via + OneTrust's cookie script integration. While the test / production data + domain id currently only differ by a suffix, this may change in the future + """ + data_domain = "0190e65a-dbec-7548-89af-4b67155ee70a" + if get_app_environment() == "Production": + return data_domain + else: + return data_domain + "-test" + + +def get_app_environment(): + return settings.APP_ENVIRONMENT diff --git a/source/sass/buyers-guide/bg-main.scss b/source/sass/buyers-guide/bg-main.scss index b2357eb285c..04c140240c2 100644 --- a/source/sass/buyers-guide/bg-main.scss +++ b/source/sass/buyers-guide/bg-main.scss @@ -54,10 +54,15 @@ html { // Misc @import "../global"; + // Header @import "./components/header.scss"; +// Cookie Banner + +@import "../onetrust-override.scss"; + // Utilities .bg-product-image { diff --git a/source/sass/main.scss b/source/sass/main.scss index 84b2b204b75..c7709b4a478 100755 --- a/source/sass/main.scss +++ b/source/sass/main.scss @@ -71,6 +71,9 @@ @import "./views/publication"; @import "./views/article"; +// Cookie Banner +@import "./onetrust-override.scss"; + // MozFest @import "./mozfest"; diff --git a/source/sass/onetrust-override.scss b/source/sass/onetrust-override.scss new file mode 100644 index 00000000000..138272a33b0 --- /dev/null +++ b/source/sass/onetrust-override.scss @@ -0,0 +1,187 @@ +/* Set Fonts */ +$font-family-sans-serif: "Nunito Sans", Helvetica, Arial, sans-serif !important; +$font-family-serif: "Zilla Slab", serif; + +/* Main Banner */ +#onetrust-consent-sdk { + /* Banner Styles */ + #onetrust-banner-sdk { + background: linear-gradient(to right, #acffff, #e7e7fc); + + @media only screen and (min-width: 575px) { + padding: 0 20px; + } + + /* Title */ + #onetrust-policy-title { + font-family: $font-family-serif; + color: #000; + font-size: 28px; + line-height: 32px; + font-weight: 300; + display: inline-block; + + @media only screen and (min-width: 1199px) { + font-size: 40px; + line-height: 48px; + } + } + + /* Body */ + #onetrust-policy-text { + font-family: $font-family-sans-serif; + color: #000; + font-weight: 400; + font-size: 12px; + line-height: 16px; + margin-bottom: 5px; + + @media only screen and (min-width: 576px) { + font-size: 18px; + line-height: 27px; + } + } + + /* Accept / Reject Buttons */ + #onetrust-accept-btn-handler, + #onetrust-reject-all-handler { + font-family: $font-family-sans-serif; + font-weight: 400; + border: 2px solid #fff; + background-color: #000; + font-size: 18px; + line-height: 27px; + padding: 5px 6px; + width: 100%; + + &::before { + display: inline-block; + vertical-align: middle; + margin-right: 5px; + line-height: 20px; + } + + @media only screen and (min-width: 650px) { + width: 250px; + } + + @media only screen and (min-width: 897px) { + width: 270px; + } + } + + /* Accept Button Icon */ + #onetrust-accept-btn-handler::before { + content: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTciIHZpZXdCb3g9IjAgMCAxNiAxNyIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICAgICAgICA8cGF0aCBkPSJNOCAwLjQ1NTJDNi40MTc3NSAwLjQ1NTIgNC44NzEwNCAwLjkyNDM5MiAzLjU1NTQ0IDEuODAzNDRDMi4yMzk4NSAyLjY4MjQ5IDEuMjE0NDcgMy45MzE5MiAwLjYwODk2NyA1LjM5MzczQzAuMDAzNDY2MjYgNi44NTU1NCAtMC4xNTQ5NiA4LjQ2NDA4IDAuMTUzNzIxIDEwLjAxNTlDMC40NjI0MDMgMTEuNTY3OCAxLjIyNDMzIDEyLjk5MzIgMi4zNDMxNSAxNC4xMTIxQzMuNDYxOTcgMTUuMjMwOSA0Ljg4NzQzIDE1Ljk5MjggNi40MzkyOCAxNi4zMDE1QzcuOTkxMTMgMTYuNjEwMiA5LjU5OTY2IDE2LjQ1MTcgMTEuMDYxNSAxNS44NDYyQzEyLjUyMzMgMTUuMjQwNyAxMy43NzI3IDE0LjIxNTQgMTQuNjUxOCAxMi44OTk4QzE1LjUzMDggMTEuNTg0MiAxNiAxMC4wMzc1IDE2IDguNDU1MkMxNiA2LjMzMzQ3IDE1LjE1NzEgNC4yOTg2NCAxMy42NTY5IDIuNzk4MzVDMTIuMTU2NiAxLjI5ODA1IDEwLjEyMTcgMC40NTUyIDggMC40NTUyWk0xMi42NDk2IDYuNTM1Mkw3LjE3NDQgMTIuMDJDNi45OTQ0IDEyLjE5OTggNi43NTA0IDEyLjMwMDggNi40OTYgMTIuMzAwOEM2LjI0MTYgMTIuMzAwOCA1Ljk5NzYgMTIuMTk5OCA1LjgxNzYgMTIuMDJMMy4zMjggOS41MjcyQzMuMTcxNTYgOS4zNDI4MSAzLjA5MDQ2IDkuMTA2MTggMy4xMDA5MiA4Ljg2NDU5QzMuMTExMzggOC42MjMgMy4yMTI2MiA4LjM5NDI2IDMuMzg0NDEgOC4yMjQwOUMzLjU1NjIxIDguMDUzOTEgMy43ODU5IDcuOTU0ODMgNC4wMjc1NyA3Ljk0NjY2QzQuMjY5MjUgNy45Mzg0OSA0LjUwNTEgOC4wMjE4MiA0LjY4OCA4LjE4TDYuNDk2IDkuOTkxMkwxMS4yOTYgNS4xOTEyQzExLjM4MzkgNS4wOTY4OCAxMS40ODk5IDUuMDIxMjMgMTEuNjA3NiA0Ljk2ODc2QzExLjcyNTQgNC45MTYyOSAxMS44NTI1IDQuODg4MDggMTEuOTgxNCA0Ljg4NThDMTIuMTEwMyA0Ljg4MzUzIDEyLjIzODQgNC45MDcyNCAxMi4zNTc5IDQuOTU1NTJDMTIuNDc3NCA1LjAwMzgxIDEyLjU4NiA1LjA3NTY3IDEyLjY3NzIgNS4xNjY4M0MxMi43NjgzIDUuMjU3OTkgMTIuODQwMiA1LjM2NjU4IDEyLjg4ODUgNS40ODYxMkMxMi45MzY4IDUuNjA1NjUgMTIuOTYwNSA1LjczMzY5IDEyLjk1ODIgNS44NjI1OUMxMi45NTU5IDUuOTkxNDkgMTIuOTI3NyA2LjExODYxIDEyLjg3NTIgNi4yMzYzN0MxMi44MjI4IDYuMzU0MTMgMTIuNzQ3MSA2LjQ2MDExIDEyLjY1MjggNi41NDhMMTIuNjQ5NiA2LjUzNTJaIiBmaWxsPSJ3aGl0ZSIvPgogICAgPC9zdmc+"); + } + + /* Reject Button Icon */ + #onetrust-reject-all-handler::before { + content: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTciIHZpZXdCb3g9IjAgMCAxNiAxNyIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTEuNzc5MjIgMTUuODZDMS40Nzg0OCAxNS44NjA5IDEuMTg5NjggMTUuNzQyNCAwLjk3NjEzMyAxNS41MzA3QzAuNzYyNTgzIDE1LjMxODkgMC42NDE3MTEgMTUuMDMxMSAwLjY0MDAxOCAxNC43MzA0VjIuMjg1NkMwLjYzOTE3NSAyLjEzNTQ2IDAuNjY4MDE4IDEuOTg2NjQgMC43MjQ4OTEgMS44NDc2OEMwLjc4MTc2MyAxLjcwODczIDAuODY1NTQyIDEuNTgyMzkgMC45NzE0MTEgMS40NzU5MkMxLjA3NzI4IDEuMzY5NDYgMS4yMDMxNSAxLjI4NDk3IDEuMzQxNzggMS4yMjczMkMxLjQ4MDQxIDEuMTY5NjcgMS42MjkwOCAxLjE0IDEuNzc5MjIgMS4xNEgxNC4yMjA4QzE0LjM3MSAxLjE0IDE0LjUxOTYgMS4xNjk2NyAxNC42NTgzIDEuMjI3MzJDMTQuNzk2OSAxLjI4NDk3IDE0LjkyMjggMS4zNjk0NiAxNS4wMjg2IDEuNDc1OTJDMTUuMTM0NSAxLjU4MjM5IDE1LjIxODMgMS43MDg3MyAxNS4yNzUxIDEuODQ3NjhDMTUuMzMyIDEuOTg2NjQgMTUuMzYwOSAyLjEzNTQ2IDE1LjM2IDIuMjg1NlYxNC43MzA0QzE1LjM1ODMgMTUuMDMxMSAxNS4yMzc1IDE1LjMxODkgMTUuMDIzOSAxNS41MzA3QzE0LjgxMDQgMTUuNzQyNCAxNC41MjE2IDE1Ljg2MDkgMTQuMjIwOCAxNS44NkgxLjc3OTIyWk05LjM4MjQyIDEyLjE0OEM5LjUzMTE4IDEyLjI5NjYgOS43MDc3NCAxMi40MTQzIDkuOTAyMDMgMTIuNDk0N0MxMC4wOTYzIDEyLjU3NSAxMC4zMDQ1IDEyLjYxNjIgMTAuNTE0NyAxMi42MTYxQzEwLjcyNSAxMi42MTU5IDEwLjkzMzEgMTIuNTc0NCAxMS4xMjczIDEyLjQ5MzhDMTEuMzIxNSAxMi40MTMyIDExLjQ5NzkgMTIuMjk1MiAxMS42NDY0IDEyLjE0NjRDMTEuNzk1IDExLjk5NzYgMTEuOTEyOCAxMS44MjExIDExLjk5MzEgMTEuNjI2OEMxMi4wNzM0IDExLjQzMjUgMTIuMTE0NyAxMS4yMjQzIDEyLjExNDUgMTEuMDE0MUMxMi4xMTQ0IDEwLjgwMzggMTIuMDcyOCAxMC41OTU3IDExLjk5MjIgMTAuNDAxNUMxMS45MTE2IDEwLjIwNzMgMTEuNzkzNiAxMC4wMzEgMTEuNjQ0OCA5Ljg4MjRMMTAuMjYyNCA4LjVMMTEuNjQ0OCA3LjExNzZDMTEuODY3OSA2Ljg5Mzg1IDEyLjAxOTcgNi42MDkwNyAxMi4wODExIDYuMjk5MTdDMTIuMTQyNiA1Ljk4OTI3IDEyLjExMDkgNS42NjgxMSAxMS45OTAxIDUuMzc2MThDMTEuODY5MyA1LjA4NDI2IDExLjY2NDcgNC44MzQ2MyAxMS40MDIzIDQuNjU4NzdDMTEuMTM5OCA0LjQ4MjkxIDEwLjgzMTIgNC4zODg3IDEwLjUxNTIgNC4zODhDMTAuMzA1IDQuMzg3NjIgMTAuMDk2NyA0LjQyODY5IDkuOTAyMzIgNC41MDg4NkM5LjcwNzk1IDQuNTg5MDIgOS41MzEyOCA0LjcwNjcxIDkuMzgyNDIgNC44NTUyTDguMDAwMDIgNi4yNkw2LjYxNzYyIDQuODc3NkM2LjM5Mzg0IDQuNjUzMjYgNi4xMDg0OSA0LjUwMDQxIDUuNzk3NzUgNC40Mzg0NEM1LjQ4NyA0LjM3NjQ2IDUuMTY0ODUgNC40MDgxNSA0Ljg3MjE0IDQuNTI5NDlDNC41Nzk0MiA0LjY1MDgzIDQuMzI5MzIgNC44NTYzNCA0LjE1MzU1IDUuMTE5OTlDMy45Nzc3OCA1LjM4MzYzIDMuODg0MjUgNS42OTM1MyAzLjg4NDgyIDYuMDEwNEMzLjg4NDIzIDYuMjIwNSAzLjkyNTUyIDYuNDI4NjEgNC4wMDYyOSA2LjYyMjU2QzQuMDg3MDYgNi44MTY1MSA0LjIwNTY4IDYuOTkyNDIgNC4zNTUyMiA3LjE0TDUuNzM3NjIgOC41TDQuMzU1MjIgOS44ODI0QzQuMDU0NzggMTAuMTgyNCAzLjg4NTgzIDEwLjU4OTUgMy44ODU1MyAxMS4wMTQxQzMuODg1MjMgMTEuNDM4NyA0LjA1MzYxIDExLjg0NiA0LjM1MzYyIDEyLjE0NjRDNC42NTM2MyAxMi40NDY4IDUuMDYwNyAxMi42MTU4IDUuNDg1MjkgMTIuNjE2MUM1LjkwOTg3IDEyLjYxNjQgNi4zMTcxOCAxMi40NDggNi42MTc2MiAxMi4xNDhMOC4wMDAwMiAxMC43Njg4TDkuMzgyNDIgMTIuMTQ4WiIgZmlsbD0id2hpdGUiLz4KPHBhdGggZD0iTTE0LjIyMDggMS43OEMxNC4yODY5IDEuNzc5OTkgMTQuMzUyMyAxLjc5MzEyIDE0LjQxMzMgMS44MTg2QzE0LjQ3NDMgMS44NDQwOSAxNC41Mjk2IDEuODgxNDMgMTQuNTc2MSAxLjkyODQ3QzE0LjYyMjUgMS45NzU1IDE0LjY1OTIgMi4wMzEyOSAxNC42ODM5IDIuMDkyNkMxNC43MDg2IDIuMTUzOSAxNC43MjA5IDIuMjE5NTEgMTQuNzIgMi4yODU2VjE0LjczMDRDMTQuNzE4MyAxNC44NjE0IDE0LjY2NDkgMTQuOTg2NCAxNC41NzE0IDE1LjA3ODFDMTQuNDc3OCAxNS4xNjk5IDE0LjM1MTggMTUuMjIwOSAxNC4yMjA4IDE1LjIySDEuNzc5MjFDMS42NDgyMSAxNS4yMjA5IDEuNTIyMTkgMTUuMTY5OSAxLjQyODY3IDE1LjA3ODFDMS4zMzUxNCAxNC45ODY0IDEuMjgxNyAxNC44NjE0IDEuMjgwMDEgMTQuNzMwNFYyLjI4NTZDMS4yNzkxNiAyLjIxOTUxIDEuMjkxNDUgMi4xNTM5IDEuMzE2MTYgMi4wOTI2QzEuMzQwODcgMi4wMzEyOSAxLjM3NzUgMS45NzU1IDEuNDIzOTQgMS45Mjg0N0MxLjQ3MDM4IDEuODgxNDMgMS41MjU3IDEuODQ0MDkgMS41ODY2OSAxLjgxODZDMS42NDc2NyAxLjc5MzEyIDEuNzEzMTEgMS43Nzk5OSAxLjc3OTIxIDEuNzhIMTQuMjIwOFpNOC4wMDAwMSA1LjMzODRMNy4wNjg4MSA0LjQxMDRDNi44NjA4IDQuMjAyMzkgNi42MTM4NSA0LjAzNzM4IDYuMzQyMDcgMy45MjQ4QzYuMDcwMjggMy44MTIyMyA1Ljc3ODk5IDMuNzU0MjkgNS40ODQ4MSAzLjc1NDI5QzUuMTkwNjQgMy43NTQyOSA0Ljg5OTM0IDMuODEyMjMgNC42Mjc1NiAzLjkyNDhDNC4zNTU3NyA0LjAzNzM4IDQuMTA4ODMgNC4yMDIzOSAzLjkwMDgxIDQuNDEwNEMzLjQ4MDcxIDQuODMwNSAzLjI0NDcgNS40MDAyOCAzLjI0NDcgNS45OTQ0QzMuMjQ0NyA2LjU4ODUyIDMuNDgwNzEgNy4xNTgzIDMuOTAwODEgNy41Nzg0TDQuODMyMDEgOC41TDMuOTAwODEgOS40MzEyQzMuNDgwNzEgOS44NTEzIDMuMjQ0NyAxMC40MjExIDMuMjQ0NyAxMS4wMTUyQzMuMjQ0NyAxMS42MDkzIDMuNDgwNzEgMTIuMTc5MSAzLjkwMDgxIDEyLjU5OTJDNC4zMjA5MSAxMy4wMTkzIDQuODkwNyAxMy4yNTUzIDUuNDg0ODEgMTMuMjU1M0M2LjA3ODkzIDEzLjI1NTMgNi42NDg3MSAxMy4wMTkzIDcuMDY4ODEgMTIuNTk5Mkw4LjAwMDAxIDExLjY3NDRMOC45MzEyMSAxMi42MDU2QzkuMzUxMzEgMTMuMDI1NyA5LjkyMTEgMTMuMjYxNyAxMC41MTUyIDEzLjI2MTdDMTEuMTA5MyAxMy4yNjE3IDExLjY3OTEgMTMuMDI1NyAxMi4wOTkyIDEyLjYwNTZDMTIuNTE5MyAxMi4xODU1IDEyLjc1NTMgMTEuNjE1NyAxMi43NTUzIDExLjAyMTZDMTIuNzU1MyAxMC40Mjc1IDEyLjUxOTMgOS44NTc3IDEyLjA5OTIgOS40Mzc2TDExLjE2OCA4LjVMMTIuMDk5MiA3LjU3MkMxMi4zMDcyIDcuMzYzOTkgMTIuNDcyMyA3LjExNzA1IDEyLjU4NDggNi44NDUyNkMxMi42OTc0IDYuNTczNDggMTIuNzU1NCA2LjI4MjE4IDEyLjc1NTQgNS45ODhDMTIuNzU1NCA1LjY5MzgyIDEyLjY5NzQgNS40MDI1MiAxMi41ODQ4IDUuMTMwNzRDMTIuNDcyMyA0Ljg1ODk1IDEyLjMwNzIgNC42MTIwMSAxMi4wOTkyIDQuNDA0QzExLjY3OTMgMy45ODQ4NSAxMS4xMTAyIDMuNzQ5NDQgMTAuNTE2OCAzLjc0OTQ0QzkuOTIzNDcgMy43NDk0NCA5LjM1NDM3IDMuOTg0ODUgOC45MzQ0MSA0LjQwNEw4LjAwMDAxIDUuMzM4NFpNMTQuMjIwOCAwLjVIMS43NzkyMUMxLjU0NTAyIDAuNDk5OTk4IDEuMzEzMTQgMC41NDYyMyAxLjA5Njg2IDAuNjM2MDQzQzAuODgwNTc5IDAuNzI1ODU2IDAuNjg0MTU3IDAuODU3NDg0IDAuNTE4ODU5IDEuMDIzMzhDMC4zNTM1NjEgMS4xODkyNyAwLjIyMjY0IDEuMzg2MTYgMC4xMzM2MDQgMS42MDI3NkMwLjA0NDU2NzggMS44MTkzNyAtMC4wMDA4MzA4ODkgMi4wNTE0MSAxLjE1MTE4ZS0wNSAyLjI4NTZWMTQuNzMwNEMwLjAwMTcwNjE0IDE1LjIwMDkgMC4xOTAwMDcgMTUuNjUxNCAwLjUyMzU4IDE1Ljk4MzJDMC44NTcxNTMgMTYuMzE1IDEuMzA4NzQgMTYuNTAwOSAxLjc3OTIxIDE2LjVIMTQuMjIwOEMxNC42OTEzIDE2LjUwMDkgMTUuMTQyOSAxNi4zMTUgMTUuNDc2NCAxNS45ODMyQzE1LjgxIDE1LjY1MTQgMTUuOTk4MyAxNS4yMDA5IDE2IDE0LjczMDRWMi4yODU2QzE2LjAwMDkgMi4wNTE0MSAxNS45NTU1IDEuODE5MzcgMTUuODY2NCAxLjYwMjc2QzE1Ljc3NzQgMS4zODYxNiAxNS42NDY1IDEuMTg5MjcgMTUuNDgxMiAxLjAyMzM4QzE1LjMxNTkgMC44NTc0ODQgMTUuMTE5NCAwLjcyNTg1NiAxNC45MDMyIDAuNjM2MDQzQzE0LjY4NjkgMC41NDYyMyAxNC40NTUgMC40OTk5OTggMTQuMjIwOCAwLjVaTTguMDAwMDEgNy4xNDk2TDkuODM2ODEgNS4zMTZDMTAuMDE2NyA1LjEzNTkxIDEwLjI2MDcgNS4wMzQ2MiAxMC41MTUyIDUuMDM0NEMxMC43MDU1IDUuMDMzMyAxMC44OTE4IDUuMDg4NzcgMTEuMDUwNSA1LjE5Mzc4QzExLjIwOTIgNS4yOTg3OSAxMS4zMzMxIDUuNDQ4NTkgMTEuNDA2NSA1LjYyNDE3QzExLjQ3OTkgNS43OTk3NSAxMS40OTk1IDUuOTkzMTcgMTEuNDYyNyA2LjE3OTg4QzExLjQyNTkgNi4zNjY1OSAxMS4zMzQ1IDYuNTM4MTYgMTEuMiA2LjY3MjhMOS4zNTY4MSA4LjVMMTEuMiAxMC4zNDMyQzExLjMzNDEgMTAuNDc3NSAxMS40MjU0IDEwLjY0ODQgMTEuNDYyNCAxMC44MzQ1QzExLjQ5OTMgMTEuMDIwNyAxMS40ODAzIDExLjIxMzUgMTEuNDA3NyAxMS4zODg5QzExLjMzNTEgMTEuNTY0MiAxMS4yMTIyIDExLjcxNCAxMS4wNTQ1IDExLjgxOTVDMTAuODk2OCAxMS45MjUgMTAuNzExNCAxMS45ODE0IDEwLjUyMTYgMTEuOTgxNkMxMC4zOTQ1IDExLjk4MjMgMTAuMjY4NSAxMS45NTc4IDEwLjE1MSAxMS45MDk1QzEwLjAzMzQgMTEuODYxMSA5LjkyNjYzIDExLjc4OTkgOS44MzY4MSAxMS43TDguMDAwMDEgOS44NjY0TDYuMTYzMjEgMTEuN0M1Ljk4MzM1IDExLjg4MDEgNS43MzkzMyAxMS45ODE0IDUuNDg0ODEgMTEuOTgxNkM1LjI5NDUyIDExLjk4MjcgNS4xMDgxOSAxMS45MjcyIDQuOTQ5NDkgMTEuODIyMkM0Ljc5MDc5IDExLjcxNzIgNC42NjY4OCAxMS41Njc0IDQuNTkzNSAxMS4zOTE4QzQuNTIwMTEgMTEuMjE2MyA0LjUwMDU2IDExLjAyMjggNC41MzczMyAxMC44MzYxQzQuNTc0MSAxMC42NDk0IDQuNjY1NTMgMTAuNDc3OCA0LjgwMDAxIDEwLjM0MzJMNi42NDMyMSA4LjVMNC44MDAwMSA2LjY3MjhDNC42NjU5MiA2LjUzODU1IDQuNTc0NjMgNi4zNjc1NiA0LjUzNzY2IDYuMTgxNDVDNC41MDA2OCA1Ljk5NTM0IDQuNTE5NjkgNS44MDI0NSA0LjU5MjI4IDUuNjI3MTRDNC42NjQ4NyA1LjQ1MTgzIDQuNzg3NzkgNS4zMDE5NiA0Ljk0NTUxIDUuMTk2NDZDNS4xMDMyMiA1LjA5MDk2IDUuMjg4NjYgNS4wMzQ1NyA1LjQ3ODQxIDUuMDM0NEM1LjczMjkzIDUuMDM0NjIgNS45NzY5NSA1LjEzNTkxIDYuMTU2ODEgNS4zMTZMOC4wMDAwMSA3LjE0OTZaIiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4K"); + } + + /* Consent Settings Link */ + #onetrust-button-group-parent { + position: inherit; + float: none; + display: inline-block; + transform: none; + + @media only screen and (min-width: 897px) { + width: 32%; + } + + @media only screen and (min-width: 1199px) { + width: 29%; + } + #onetrust-button-group { + #onetrust-pc-btn-handler { + font-family: $font-family-sans-serif; + font-weight: 700; + font-size: 18px; + line-height: 27px; + color: #0d10bf; + border: none; + background: none; + text-decoration: underline; + padding-top: 0; + margin-top: 0; + width: 100%; + + @media only screen and (min-width: 576px) { + max-width: fit-content; + } + + @media only screen and (min-width: 897px) { + margin: 5px auto; + width: 270px; + max-width: 270px; + } + } + } + } + + /* Title & Text Box Margin */ + #onetrust-policy { + @media only screen and (min-width: 1199px) { + max-width: 740px; + margin: 1.2em auto; + } + } + + /* Close Button */ + #onetrust-close-btn-container { + /* Swap close icon fill color, must set !important due to background-image set as an inline attribute */ + button.ot-close-icon { + background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzNDguMzMzIiBoZWlnaHQ9IjM0OC4zMzMiIHZpZXdCb3g9IjAgMCAzNDguMzMzIDM0OC4zMzQiPgogIDxwYXRoIGZpbGw9IiM2NjY2NjYiIGQ9Ik0zMzYuNTU5IDY4LjYxMUwyMzEuMDE2IDE3NC4xNjVsMTA1LjU0MyAxMDUuNTQ5YzE1LjY5OSAxNS43MDUgMTUuNjk5IDQxLjE0NSAwIDU2Ljg1LTcuODQ0IDcuODQ0LTE4LjEyOCAxMS43NjktMjguNDA3IDExLjc2OS0xMC4yOTYgMC0yMC41ODEtMy45MTktMjguNDE5LTExLjc2OUwxNzQuMTY3IDIzMS4wMDMgNjguNjA5IDMzNi41NjNjLTcuODQzIDcuODQ0LTE4LjEyOCAxMS43NjktMjguNDE2IDExLjc2OS0xMC4yODUgMC0yMC41NjMtMy45MTktMjguNDEzLTExLjc2OS0xNS42OTktMTUuNjk4LTE1LjY5OS00MS4xMzkgMC01Ni44NWwxMDUuNTQtMTA1LjU0OUwxMS43NzQgNjguNjExYy0xNS42OTktMTUuNjk5LTE1LjY5OS00MS4xNDUgMC01Ni44NDQgMTUuNjk2LTE1LjY4NyA0MS4xMjctMTUuNjg3IDU2LjgyOSAwbDEwNS41NjMgMTA1LjU1NEwyNzkuNzIxIDExLjc2N2MxNS43MDUtMTUuNjg3IDQxLjEzOS0xNS42ODcgNTYuODMyIDAgMTUuNzA1IDE1LjY5OSAxNS43MDUgNDEuMTQ1LjAwNiA1Ni44NDR6Ii8+Cjwvc3ZnPg==") !important; + } + @media only screen and (min-width: 1199px) { + right: 20px; + } + } + + .onetrust-close-btn-handler { + background-size: 20px; + } + } + + /* Floating X button for persistent cookie */ + #ot-sdk-btn-floating { + .ot-floating-button__back { + background-color: #595cf3; + svg { + margin: 0 auto; + } + } + } + + /* Desktop Layout Changes */ + #onetrust-banner-sdk:not(.ot-iab-2) { + #onetrust-group-container { + @media only screen and (min-width: 1199px) { + width: 65%; + } + } + } + + /* Preference Center Styles */ + #onetrust-pc-sdk { + /* Scroll bar */ + #ot-pc-content { + overflow-y: auto; + } + /* Preference switch */ + .ot-tgl input:not(:checked) + .ot-switch .ot-switch-nob { + background-color: #666666; + } + /* Always Active Link */ + .ot-cat-grp #ot-status-id-C0001 { + color: #0d10bf; + } + /* Close Button */ + /* Swap close icon fill color, must set !important due to background-image set as an inline attribute */ + #close-pc-btn-handler { + background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzNDguMzMzIiBoZWlnaHQ9IjM0OC4zMzMiIHZpZXdCb3g9IjAgMCAzNDguMzMzIDM0OC4zMzQiPgogIDxwYXRoIGZpbGw9IiM2NjY2NjYiIGQ9Ik0zMzYuNTU5IDY4LjYxMUwyMzEuMDE2IDE3NC4xNjVsMTA1LjU0MyAxMDUuNTQ5YzE1LjY5OSAxNS43MDUgMTUuNjk5IDQxLjE0NSAwIDU2Ljg1LTcuODQ0IDcuODQ0LTE4LjEyOCAxMS43NjktMjguNDA3IDExLjc2OS0xMC4yOTYgMC0yMC41ODEtMy45MTktMjguNDE5LTExLjc2OUwxNzQuMTY3IDIzMS4wMDMgNjguNjA5IDMzNi41NjNjLTcuODQzIDcuODQ0LTE4LjEyOCAxMS43NjktMjguNDE2IDExLjc2OS0xMC4yODUgMC0yMC41NjMtMy45MTktMjguNDEzLTExLjc2OS0xNS42OTktMTUuNjk4LTE1LjY5OS00MS4xMzkgMC01Ni44NWwxMDUuNTQtMTA1LjU0OUwxMS43NzQgNjguNjExYy0xNS42OTktMTUuNjk5LTE1LjY5OS00MS4xNDUgMC01Ni44NDQgMTUuNjk2LTE1LjY4NyA0MS4xMjctMTUuNjg3IDU2LjgyOSAwbDEwNS41NjMgMTA1LjU1NEwyNzkuNzIxIDExLjc2N2MxNS43MDUtMTUuNjg3IDQxLjEzOS0xNS42ODcgNTYuODMyIDAgMTUuNzA1IDE1LjY5OSAxNS43MDUgNDEuMTQ1LjAwNiA1Ni44NDR6Ii8+Cjwvc3ZnPg==") !important; + } + } +}