diff --git a/mandelstudio/static/mandelstudio/scss/header_overrides.scss b/mandelstudio/static/mandelstudio/scss/header_overrides.scss new file mode 100644 index 0000000..f09fca4 --- /dev/null +++ b/mandelstudio/static/mandelstudio/scss/header_overrides.scss @@ -0,0 +1,146 @@ +/* +Project-scoped header overrides for MandelStudio. + +Important: +- Keep this file import-free so django-compressor's SCSS step stays stable on + staging (no dependency on Sass include paths). +- Scope selectors tightly to header components used by Carbasa/Oxyan. +*/ + +header .language-dropdown .dropdown-toggle::after { + display: none; +} + +header .language-dropdown .dropdown-toggle { + display: inline-flex; + align-items: center; + justify-content: center; + flex-direction: column; + gap: 1px; + line-height: 1; + transition: transform 120ms ease, box-shadow 120ms ease, background-color 120ms ease; +} + +header .language-dropdown .dropdown-toggle:hover, +header .language-dropdown .dropdown-toggle:focus-visible { + transform: translateY(-1px); + box-shadow: 0 10px 22px rgba(15, 23, 42, 0.18); +} + +header .language-dropdown .dropdown-toggle .language-icon, +header .language-dropdown .dropdown-toggle .language-chevron { + display: block; +} + +header .language-dropdown .dropdown-toggle .language-icon { + width: 18px; + height: 18px; +} + +header .language-dropdown .dropdown-toggle .language-chevron { + width: 10px; + height: 10px; + opacity: 0.9; + transition: transform 120ms ease, opacity 120ms ease; +} + +header .language-dropdown .dropdown-toggle.show .language-chevron { + transform: rotate(180deg); + opacity: 1; +} + +header .language-dropdown .dropdown-menu { + min-width: 15rem; + padding: 0.5rem; + border-radius: 0.9rem; + border: 1px solid rgba(15, 23, 42, 0.08); + box-shadow: 0 16px 44px rgba(15, 23, 42, 0.18); +} + +header .language-dropdown .dropdown-menu .dropdown-item { + border-radius: 0.65rem; + padding: 0.55rem 0.7rem; + font-weight: 600; + color: #0f172a; + transition: background-color 120ms ease, color 120ms ease; +} + +header .language-dropdown .dropdown-menu .dropdown-item:hover, +header .language-dropdown .dropdown-menu .dropdown-item:focus-visible { + background: rgba(2, 132, 199, 0.1); + color: #0b5aa3; +} + +header .language-dropdown .dropdown-menu svg { + width: 1.35rem; + height: auto; + border-radius: 0.2rem; + box-shadow: 0 1px 0 rgba(15, 23, 42, 0.06); + flex: 0 0 auto; +} + +/* Mobile header polish (<= Bootstrap lg). */ +@media (max-width: 991.98px) { + header.mega_header .header-inner > .container { + display: flex; + align-items: center; + justify-content: space-between; + flex-wrap: nowrap; + gap: 0.5rem; + padding-top: 0.5rem; + padding-bottom: 0.5rem; + } + + header.mega_header .header-inner .navbar-brand { + margin: 0; + padding: 0; + z-index: 2; + } + + header.mega_header .header-inner .navbar-brand img { + max-height: 34px; + width: auto; + height: auto; + } + + header.mega_header .header-inner .header-right { + margin-left: auto; + padding-left: 0; + gap: 0.45rem; + z-index: 2; + } + + header.mega_header .header-inner .header-right .menu-circle { + width: 38px; + height: 38px; + } + + /* Prevent the basket trigger from floating above the opened mobile menu. */ + header.mega_header .header-inner .header-right .basket-dropdown { + z-index: 5; + } + + header.mega_header .header-inner .page-menu-bar { + z-index: 50; + } + + /* Replace Carbasa's floating FAB toggler with an in-header control. */ + header.mega_header .header-inner .navbar-toggler { + position: static; + bottom: auto; + right: auto; + width: 38px; + height: 38px; + margin: 0; + box-shadow: none; + z-index: 60; + } + + /* Align megamenu toggler with other menu items. */ + header.mega_header .page-menu-bar .navbar-nav > .megamenu > .toggler { + display: inline-flex; + align-items: center; + justify-content: center; + } +} + diff --git a/mandelstudio/templates/layout.html b/mandelstudio/templates/layout.html index 66f5789..6831cbb 100644 --- a/mandelstudio/templates/layout.html +++ b/mandelstudio/templates/layout.html @@ -15,6 +15,8 @@ {{ block.super }} {# Ensure Carbasa webshop styling is present so responsive header/footer render correctly. #} +{# Project-scoped header tweaks (kept import-free for compressor safety). #} + {% endblock %} {% block extrahead %} @@ -25,69 +27,6 @@ {% endif %} {{ block.super }} - {% if cookie_jar.needs_approval %} {% endif %}