From e33b5f875718e9af487a2f1b25723824d4d0d67d Mon Sep 17 00:00:00 2001
From: Mandel Olaiya <mandeleolaiya15@icloud.com>
Date: Thu, 14 May 2026 00:48:23 +0200
Subject: [PATCH] Redesign cookie consent as centered glass modal

---
 .../mandelstudio/scss/layout_overrides.scss   | 192 ++++++++++++++++++
 .../templates/cookie_jar/cookie_banner.html   |  52 +++++
 mandelstudio/templates/layout.html            |  46 +----
 3 files changed, 251 insertions(+), 39 deletions(-)
 create mode 100644 mandelstudio/static/mandelstudio/scss/layout_overrides.scss
 create mode 100644 mandelstudio/templates/cookie_jar/cookie_banner.html

diff --git a/mandelstudio/static/mandelstudio/scss/layout_overrides.scss b/mandelstudio/static/mandelstudio/scss/layout_overrides.scss
new file mode 100644
index 0000000..e454a40
--- /dev/null
+++ b/mandelstudio/static/mandelstudio/scss/layout_overrides.scss
@@ -0,0 +1,192 @@
+header {
+  .header-right {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+
+    .language-dropdown,
+    .basket-dropdown,
+    > a.user-button.menu-circle {
+      flex: 0 0 40px;
+      width: 40px;
+      height: 40px;
+      min-width: 40px;
+      min-height: 40px;
+      margin: 0 !important;
+      padding: 0 !important;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      box-sizing: border-box;
+    }
+
+    .menu-circle {
+      width: 40px;
+      height: 40px;
+      min-width: 40px;
+      min-height: 40px;
+      padding: 0;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+
+      i,
+      svg {
+        display: block;
+        line-height: 1;
+      }
+    }
+  }
+
+  .language-dropdown {
+    .dropdown-toggle {
+      width: 40px;
+      height: 40px;
+      padding: 0;
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+
+      &::after {
+        display: none;
+      }
+    }
+
+    .language-icon {
+      width: 18px;
+      height: 18px;
+      font-size: 18px;
+      line-height: 18px;
+      color: #fff;
+    }
+
+    .language-chevron {
+      display: none !important;
+    }
+  }
+
+  .basket-dropdown {
+    .dropdown-toggle {
+      svg {
+        width: 18px;
+        height: 18px;
+        font-size: 18px;
+        line-height: 18px;
+      }
+    }
+  }
+}
+
+#cookie_popup_body.cookie-consent-overlay {
+  position: fixed;
+  inset: 0;
+  z-index: 1080;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 20px;
+  background: rgba(15, 23, 42, 0.45);
+  backdrop-filter: blur(8px);
+  -webkit-backdrop-filter: blur(8px);
+
+  .cookie-consent-modal {
+    width: 100%;
+    max-width: 680px;
+    padding: 24px;
+    border-radius: 16px;
+    border: 1px solid rgba(255, 255, 255, 0.35);
+    background: rgba(255, 255, 255, 0.22);
+    box-shadow: 0 24px 64px rgba(0, 0, 0, 0.25);
+    backdrop-filter: blur(16px);
+    -webkit-backdrop-filter: blur(16px);
+  }
+
+  .cookie-banner-title {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    margin-bottom: 10px;
+    font-size: 24px;
+    font-weight: 700;
+    line-height: 1.2;
+    color: #ffffff;
+  }
+
+  #cookie_popup_content p {
+    margin: 0;
+    font-size: 17px;
+    line-height: 1.5;
+    color: rgba(255, 255, 255, 0.95);
+  }
+
+  .cookie-consent-actions {
+    display: flex;
+    gap: 12px;
+    margin-top: 18px;
+  }
+
+  #cookie_popup_acceptButton,
+  #cookie_popup_settingsButton {
+    flex: 1 1 0;
+    height: 46px;
+    border-radius: 10px;
+    border: 1px solid transparent;
+    font-size: 17px;
+    font-weight: 600;
+    line-height: 1;
+    transition: background-color 140ms ease, border-color 140ms ease, color 140ms ease;
+  }
+
+  #cookie_popup_acceptButton {
+    background: #2f80ed;
+    border-color: #2f80ed;
+    color: #fff;
+
+    &:hover,
+    &:focus-visible {
+      background: #1f6fd8;
+      border-color: #1f6fd8;
+    }
+  }
+
+  #cookie_popup_settingsButton {
+    background: rgba(255, 255, 255, 0.16);
+    border-color: rgba(255, 255, 255, 0.48);
+    color: #fff;
+
+    &:hover,
+    &:focus-visible {
+      background: rgba(255, 255, 255, 0.22);
+    }
+  }
+
+  .cookie-consent-hint {
+    margin-top: 10px;
+    font-size: 13px;
+    line-height: 1.4;
+    color: rgba(255, 255, 255, 0.82);
+  }
+}
+
+@media (max-width: 640px) {
+  #cookie_popup_body.cookie-consent-overlay {
+    padding: 12px;
+
+    .cookie-consent-modal {
+      padding: 18px;
+      border-radius: 14px;
+    }
+
+    .cookie-banner-title {
+      font-size: 21px;
+    }
+
+    #cookie_popup_content p {
+      font-size: 15px;
+    }
+
+    .cookie-consent-actions {
+      flex-direction: column;
+    }
+  }
+}
diff --git a/mandelstudio/templates/cookie_jar/cookie_banner.html b/mandelstudio/templates/cookie_jar/cookie_banner.html
new file mode 100644
index 0000000..e4944c2
--- /dev/null
+++ b/mandelstudio/templates/cookie_jar/cookie_banner.html
@@ -0,0 +1,52 @@
+{% load i18n %}
+{% load wagtailcore_tags ocyanjson %}
+
+{% with settings.cookie_jar.CookieSettings as cookie_settings %}
+    {% if cookie_jar.needs_approval or cookie_jar.site_settings.strict_cookies %}
+        {% if cookie_jar.needs_display or cookie_jar.site_settings.strict_cookies and not cookie_jar.cookie %}
+        <div id="cookie_popup_body" class="cookie-consent-overlay" role="region" aria-label="{% trans 'Cookie settings' %}">
+            <div class="cookie-consent-modal" role="dialog" aria-modal="true" aria-labelledby="cookie-consent-title">
+                <div class="cookie-banner-title" id="cookie-consent-title">
+                    <i class="fa fa-shield-halved" aria-hidden="true"></i>
+                    <span>{% trans 'Privacy & Cookies' %}</span>
+                </div>
+                <div id="cookie_popup_content">
+                    {% if cookie_settings.cookie_message %}{{ cookie_settings.cookie_message|richtext }}{% endif %}
+                </div>
+                <div id="cookie_buttons" class="cookie-consent-actions">
+                    <button type="button" id="cookie_popup_acceptButton" data-cookie-key="{{ cookie_jar.cookie_key }}">{% trans 'Accept' %}</button>
+                    <button type="button" data-toggle="modal" data-bs-toggle="modal" data-bs-target="#CookiesOptions" id="cookie_popup_settingsButton" data-backdrop="static" data-keyboard="false">{% trans 'Settings' %}</button>
+                </div>
+                <div class="cookie-consent-hint">
+                    {% trans 'You can update your cookie preferences at any time.' %}
+                </div>
+            </div>
+        </div>
+        {% endif %}
+
+    <div class="modal fade" id="CookiesOptions" tabindex="-1" role="dialog" aria-labelledby="CookiesOptionsLabel" aria-hidden="true">
+        <div class="modal-dialog modal-lg" role="document">
+            <div class="modal-content">
+                <div class="modal-header">
+                    <p class="h2 modal-title modal_cookie_header" id="CookiesOptionsLabel">{% trans 'Cookie settings' %}</p>
+                </div>
+
+                <div class="modal-body">
+
+                    <div id="cookie_popup_content_modal">
+                        {% if cookie_settings.popup_cookie_message %}{{ cookie_settings.popup_cookie_message|richtext }}{% endif %}
+                    </div>
+
+                    {% include "cookie_jar/partials/cookie_checkboxes.html" %}
+                </div>
+
+                <div class="modal-footer" data-cookie-key="{{ cookie_jar.cookie_key }}" id="cookie_model_saveButton">
+                    <button type="button"  data-bs-dismiss="modal" data-dismiss="modal" aria-label="Close" class="btn  btn-primary">
+                        {% trans 'Save and accept' %}
+                    </button>
+                </div>
+            </div>
+        </div>
+    </div>
+    {% endif %}
+{% endwith %}
diff --git a/mandelstudio/templates/layout.html b/mandelstudio/templates/layout.html
index 46966d3..2990313 100644
--- a/mandelstudio/templates/layout.html
+++ b/mandelstudio/templates/layout.html
@@ -15,6 +15,7 @@
 {{ block.super }}
 {# Ensure Carbasa webshop styling is present so responsive header/footer render correctly. #}
 <link rel="stylesheet" type="text/x-scss" href="{% static 'carbasa/webshop_base.scss' %}">
+<link rel="stylesheet" type="text/x-scss" href="{% static 'mandelstudio/scss/layout_overrides.scss' %}">
 {% endblock %}
 
 {% block extrahead %}
@@ -25,43 +26,7 @@
 <link rel="preconnect" href="https://www.google-analytics.com/">
 {% endif %}
 {{ block.super }}
-<style>
-header .header-right { display: flex; align-items: center; gap: .5rem; }
-header .header-right .language-dropdown,
-header .header-right .basket-dropdown,
-header .header-right > a.user-button.menu-circle {
-  flex: 0 0 40px;
-  width: 40px;
-  height: 40px;
-  min-width: 40px;
-  min-height: 40px;
-  margin: 0 !important;
-  padding: 0 !important;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  box-sizing: border-box;
-}
-header .header-right .menu-circle {
-  width: 40px;
-  height: 40px;
-  min-width: 40px;
-  min-height: 40px;
-  padding: 0;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-header .header-right .menu-circle i,
-header .header-right .menu-circle svg { display: block; line-height: 1; }
-header .language-dropdown .dropdown-toggle::after { display: none; }
-header .language-dropdown .dropdown-toggle { width: 40px; height: 40px; padding: 0; display: inline-flex; align-items: center; justify-content: center; }
-header .language-dropdown .language-icon,
-header .basket-dropdown .dropdown-toggle svg { width: 18px; height: 18px; font-size: 18px; line-height: 18px; }
-header .language-dropdown .language-icon { color: #fff; }
-header .language-dropdown .language-chevron { display: none !important; }
-</style>
-{% if cookie_jar.needs_approval %}
+{% if cookie_jar.needs_approval or cookie_jar.site_settings.strict_cookies %}
 <link rel="stylesheet" type="text/css" href="{% static 'cookie_jar/css/cookie_jar.css' %}">
 {% endif %}
 {% for header_snippet in cookie_jar.activated_snippet_header_templates %}
@@ -97,7 +62,7 @@ header .language-dropdown .language-chevron { display: none !important; }
 {% block extrascripts %}
 {% include "oscar/partials/extrascripts.html" %}
 {{ block.super }}
-{% if cookie_jar.needs_approval %}
+{% if cookie_jar.needs_approval or cookie_jar.site_settings.strict_cookies %}
 <script src="{% static 'cookie_jar/js/cookie_jar.js' %}"></script>
 {% endif %}
 {% endblock %}
@@ -129,8 +94,11 @@ oxyan.initImageZoom()
 {% for footer_snippet in cookie_jar.activated_snippet_footer_templates %}
     {% include footer_snippet %}
 {% endfor %}
+{% if cookie_jar.needs_approval or cookie_jar.site_settings.strict_cookies %}
+    <script src="{% static 'cookie_jar/js/cookie_jar.js' %}"></script>
+{% endif %}
 {% include "cookie_jar/cookie_banner.html" %}
-{% if cookie_jar.needs_approval %}
+{% if cookie_jar.needs_approval or cookie_jar.site_settings.strict_cookies %}
     {% include "cookie_jar/partials/preferences_saved_toast.html" %}
 {% endif %}
 {% endblock %}