diff --git a/mandelstudio/static/mandelstudio/css/layout_overrides.css b/mandelstudio/static/mandelstudio/css/layout_overrides.css index e05ea0f..d949480 100644 --- a/mandelstudio/static/mandelstudio/css/layout_overrides.css +++ b/mandelstudio/static/mandelstudio/css/layout_overrides.css @@ -1 +1,123 @@ header .header-right{display:flex;align-items:center;gap:0.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{width:40px;height:40px;padding:0;display:inline-flex;align-items:center;justify-content:center}header .language-dropdown .dropdown-toggle::after{display:none}header .language-dropdown .language-icon{width:18px;height:18px;font-size:18px;line-height:18px;color:#fff}header .language-dropdown .language-chevron{display:none !important}header .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:9999;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_popup_body.cookie-consent-overlay .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);position:relative;z-index:10000}#cookie_popup_body.cookie-consent-overlay .cookie-consent-panel{display:none}#cookie_popup_body.cookie-consent-overlay .cookie-consent-panel.is-active{display:block}#cookie_popup_body.cookie-consent-overlay .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_body.cookie-consent-overlay #cookie_popup_content p{margin:0;font-size:17px;line-height:1.5;color:rgba(255,255,255,0.95)}#cookie_popup_body.cookie-consent-overlay .cookie-consent-actions{display:flex;gap:12px;margin-top:18px}#cookie_popup_body.cookie-consent-overlay #cookie_popup_acceptButton,#cookie_popup_body.cookie-consent-overlay #cookie_popup_settingsToggle,#cookie_popup_body.cookie-consent-overlay #cookie_popup_acceptButton_settings,#cookie_popup_body.cookie-consent-overlay #cookie_model_saveButton{flex:1 1 0;min-height:48px;height:auto;padding:12px 16px;border-radius:10px;border:1px solid transparent;font-size:17px;font-weight:600;line-height:1.2;transition:background-color 140ms ease, border-color 140ms ease, color 140ms ease}#cookie_popup_body.cookie-consent-overlay #cookie_popup_acceptButton{background:#2f80ed;border-color:#2f80ed;color:#fff}#cookie_popup_body.cookie-consent-overlay #cookie_popup_acceptButton:hover,#cookie_popup_body.cookie-consent-overlay #cookie_popup_acceptButton:focus-visible{background:#1f6fd8;border-color:#1f6fd8}#cookie_popup_body.cookie-consent-overlay #cookie_popup_settingsToggle,#cookie_popup_body.cookie-consent-overlay #cookie_popup_acceptButton_settings{background:rgba(255,255,255,0.16);border-color:rgba(255,255,255,0.48);color:#fff}#cookie_popup_body.cookie-consent-overlay #cookie_popup_settingsToggle:hover,#cookie_popup_body.cookie-consent-overlay #cookie_popup_settingsToggle:focus-visible,#cookie_popup_body.cookie-consent-overlay #cookie_popup_acceptButton_settings:hover,#cookie_popup_body.cookie-consent-overlay #cookie_popup_acceptButton_settings:focus-visible{background:rgba(255,255,255,0.22)}#cookie_popup_body.cookie-consent-overlay #cookie_model_saveButton{background:#2f80ed;border-color:#2f80ed;color:#fff}#cookie_popup_body.cookie-consent-overlay #cookie_model_saveButton:hover,#cookie_popup_body.cookie-consent-overlay #cookie_model_saveButton:focus-visible{background:#1f6fd8;border-color:#1f6fd8}#cookie_popup_body.cookie-consent-overlay .cookie-consent-back{border:0;background:transparent;color:rgba(255,255,255,0.95);display:inline-flex;align-items:center;gap:8px;padding:0;margin-bottom:10px;font-size:14px;font-weight:600}#cookie_popup_body.cookie-consent-overlay .cookie-consent-hint{margin-top:10px;font-size:13px;line-height:1.4;color:rgba(255,255,255,0.82)}body.cookie-consent-open{overflow:hidden}body.cookie-consent-open .header-right,body.cookie-consent-open .theme-switcher-toggle,body.cookie-consent-open .wagtail-userbar,body.cookie-consent-open [class*="help"],body.cookie-consent-open [class*="assistant"],body.cookie-consent-open [class*="chat-widget"],body.cookie-consent-open [class*="cart"],body.cookie-consent-open [class*="basket"],body.cookie-consent-open [class*="floating"]{opacity:0 !important;pointer-events:none !important}@media (max-width: 991.98px){header .header-inner>.container{display:flex;flex-wrap:nowrap;align-items:center;column-gap:0.375rem;padding-top:0.625rem;padding-bottom:0.625rem}header .header-inner>.container>.navbar-brand{order:1;margin:0;flex:0 1 auto}header .header-inner>.container>.navbar-brand img{width:auto;height:auto;max-height:74px;max-width:190px}header .header-inner>.container>.header-right{order:2;margin-left:auto;flex:0 0 auto;gap:0.375rem}header .header-right .language-dropdown,header .header-right .basket-dropdown,header .header-right>a.user-button.menu-circle,header .header-right .menu-circle{width:36px;height:36px;min-width:36px;min-height:36px;flex-basis:36px}header .header-inner>.container>.navbar-toggler{order:3;margin-left:0.125rem;flex:0 0 auto}header .header-inner>.container>.navbar-collapse{order:4;display:none}header .header-inner>.container>.navbar-collapse.show,header .header-inner>.container>.navbar-collapse.collapsing{display:block;position:fixed;left:0;right:0;top:0;bottom:0;width:100%;height:100dvh;overflow-y:auto;-webkit-overflow-scrolling:touch;background:#fff;z-index:9000}header .header-inner .navbar-collapse .brand-wrapper{display:block}header .header-inner>.container>.navbar-collapse.show .brand-wrapper,header .header-inner>.container>.navbar-collapse.collapsing .brand-wrapper{position:absolute;top:16px;left:50%;transform:translateX(-50%);width:auto;margin:0;z-index:2;text-align:center}header .header-inner>.container>.navbar-collapse.show .brand-wrapper .navbar-brand,header .header-inner>.container>.navbar-collapse.collapsing .brand-wrapper .navbar-brand{margin:0;display:inline-flex}header .header-inner>.container>.navbar-collapse.show .brand-wrapper img,header .header-inner>.container>.navbar-collapse.collapsing .brand-wrapper img{max-height:92px;width:auto}header .header-inner>.container>.navbar-collapse.show .navbar-nav,header .header-inner>.container>.navbar-collapse.collapsing .navbar-nav{padding-top:124px}header .header-inner>.container>.navbar-collapse.show .brand-wrapper::after,header .header-inner>.container>.navbar-collapse.collapsing .brand-wrapper::after{content:"";position:absolute;left:-80px;right:-80px;bottom:-14px;border-bottom:1px solid rgba(15,23,42,0.08)}header .header-right,header .header-right .basket-dropdown,header .header-right .menu-circle{position:relative;z-index:100}}@media (max-width: 991.98px){body.mobile-menu-open header .header-inner>.container>.navbar-brand{opacity:0;pointer-events:none}body.mobile-menu-open .header-right,body.mobile-menu-open .theme-switcher-toggle,body.mobile-menu-open .wagtail-userbar,body.mobile-menu-open [class*="help"],body.mobile-menu-open [class*="assistant"],body.mobile-menu-open [class*="chat-widget"],body.mobile-menu-open [class*="cart"],body.mobile-menu-open [class*="basket"],body.mobile-menu-open [class*="floating"]{opacity:0 !important;pointer-events:none !important}}@media (max-width: 640px){#cookie_popup_body.cookie-consent-overlay{padding:12px 14px 14px;padding-top:calc(12px + env(safe-area-inset-top));padding-bottom:calc(14px + env(safe-area-inset-bottom))}#cookie_popup_body.cookie-consent-overlay .cookie-consent-modal{max-width:420px;max-height:82vh;overflow-y:auto;padding:18px 16px;border-radius:14px}#cookie_popup_body.cookie-consent-overlay .cookie-banner-title{margin-bottom:12px;font-size:21px}#cookie_popup_body.cookie-consent-overlay #cookie_popup_content p{font-size:16px;line-height:1.45}#cookie_popup_body.cookie-consent-overlay .cookie-consent-actions{flex-direction:column;gap:10px;margin-top:16px}#cookie_popup_body.cookie-consent-overlay #cookie_popup_acceptButton,#cookie_popup_body.cookie-consent-overlay #cookie_popup_settingsToggle,#cookie_popup_body.cookie-consent-overlay #cookie_popup_acceptButton_settings,#cookie_popup_body.cookie-consent-overlay #cookie_model_saveButton{width:100%;font-size:16px}#cookie_popup_body.cookie-consent-overlay .cookie-consent-hint{margin-top:12px;font-size:13px}}body{--mandel-staging-rev:"2026-05-23a"} +@media (max-width: 991.98px){ + header .header-inner>.container{ + display:flex !important; + flex-wrap:nowrap !important; + align-items:center !important; + justify-content:space-between !important; + width:100%; + max-width:100%; + gap:0.5rem; + padding-top:0.625rem; + padding-bottom:0.625rem; + padding-left:max(10px, env(safe-area-inset-left, 0px)); + padding-right:max(10px, env(safe-area-inset-right, 0px)) + } + header .header-inner>.container>.search-wrapper, + header .header-inner>.container>.alert-messages-header{ + display:none !important + } + header .header-inner>.container>.navbar-brand{ + order:1 !important; + display:flex !important; + align-items:center !important; + justify-content:flex-start !important; + flex:1 1 auto !important; + min-width:0; + margin:0 !important; + padding:0 !important + } + header .header-inner>.container>.navbar-brand .logo.big_brand{ + display:block; + margin:0 !important; + max-width:none + } + header .header-inner>.container>.navbar-brand picture{ + display:block + } + header .header-inner>.container>.navbar-brand img{ + display:block; + width:auto !important; + height:auto !important; + max-width:min(34vw, 128px) !important; + max-height:56px !important; + margin:0 !important; + transform:none !important + } + header .header-inner>.container>.header-right{ + order:2 !important; + margin:0 0 0 auto !important; + padding:0 !important; + display:flex !important; + flex-wrap:nowrap !important; + align-items:center !important; + justify-content:flex-end !important; + gap:0.35rem; + flex:0 0 auto !important + } + header .header-right>.language-dropdown{order:4} + header .header-right>a[data-bs-target="#siteSearchModal"], + header .header-right>a.search-toggler{order:1} + header .header-right>a.user-button.menu-circle:not(.search-toggler):not([data-bs-target="#siteSearchModal"]){order:2} + header .header-right>.basket-dropdown{order:3} + header .header-right .user-button, + header .header-right .dropdown-toggle{margin:0 !important} + header .header-right .language-dropdown, + header .header-right .basket-dropdown, + header .header-right>a.user-button.menu-circle, + header .header-right .menu-circle{ + width:34px; + height:34px; + min-width:34px; + min-height:34px; + flex:0 0 34px + } + header .header-inner>.container>.navbar-toggler{ + order:3; + flex:0 0 auto; + margin:0 !important; + position:fixed; + right:max(12px, env(safe-area-inset-right, 0px)); + bottom:calc(12px + env(safe-area-inset-bottom, 0px)) + } +} +@media (max-width: 374.98px){ + header .header-inner>.container{ + gap:0.25rem; + padding-left:max(8px, env(safe-area-inset-left, 0px)); + padding-right:max(8px, env(safe-area-inset-right, 0px)) + } + header .header-inner>.container>.navbar-brand img{ + max-width:108px !important; + max-height:48px !important + } + header .header-right .language-dropdown, + header .header-right .basket-dropdown, + header .header-right>a.user-button.menu-circle, + header .header-right .menu-circle{ + width:32px; + height:32px; + min-width:32px; + min-height:32px; + flex:0 0 32px + } +} +@media (max-width: 767.98px){ + .te-modern-saas .te-block--saas-hero-banner .saas-hero.saas-hero--split .saas-hero__stats{ + width:100%; + max-width:100%; + gap:.625rem; + grid-template-columns:minmax(0, 1fr) + } + .te-modern-saas .te-block--saas-hero-banner .saas-hero.saas-hero--split .saas-hero__stat{ + width:100%; + min-width:0; + padding:.75rem .875rem + } + .te-modern-saas .te-block--saas-hero-banner .saas-hero.saas-hero--split .saas-hero__stat-value, + .te-modern-saas .te-block--saas-hero-banner .saas-hero.saas-hero--split .saas-hero__stat-label{ + white-space:normal; + overflow-wrap:break-word; + word-break:normal + } +} diff --git a/mandelstudio/static/mandelstudio/scss/layout_overrides.scss b/mandelstudio/static/mandelstudio/scss/layout_overrides.scss index e5ba7bf..9cfc1ef 100644 --- a/mandelstudio/static/mandelstudio/scss/layout_overrides.scss +++ b/mandelstudio/static/mandelstudio/scss/layout_overrides.scss @@ -227,49 +227,114 @@ body.cookie-consent-open { @media (max-width: 991.98px) { header .header-inner > .container { - display: flex; - flex-wrap: nowrap; - align-items: center; - column-gap: 0.375rem; + display: flex !important; + flex-wrap: nowrap !important; + align-items: center !important; + justify-content: space-between !important; + width: 100%; + max-width: 100%; + gap: 0.5rem; padding-top: 0.625rem; padding-bottom: 0.625rem; + padding-left: max(10px, env(safe-area-inset-left, 0px)); + padding-right: max(10px, env(safe-area-inset-right, 0px)); + } + + header .header-inner > .container > .search-wrapper, + header .header-inner > .container > .alert-messages-header { + display: none !important; } header .header-inner > .container > .navbar-brand { - order: 1; - margin: 0; - flex: 0 1 auto; + order: 1 !important; + display: flex !important; + align-items: center !important; + justify-content: flex-start !important; + flex: 1 1 auto !important; + min-width: 0; + margin: 0 !important; + padding: 0 !important; + } + + header .header-inner > .container > .navbar-brand .logo.big_brand { + display: block; + margin: 0 !important; + max-width: none; + } + + header .header-inner > .container > .navbar-brand picture { + display: block; } header .header-inner > .container > .navbar-brand img { - width: auto; - height: auto; - max-height: 74px; - max-width: 190px; + display: block; + width: auto !important; + height: auto !important; + max-width: min(34vw, 128px) !important; + max-height: 56px !important; + margin: 0 !important; + transform: none !important; } header .header-inner > .container > .header-right { + order: 2 !important; + margin: 0 0 0 auto !important; + padding: 0 !important; + display: flex !important; + flex-wrap: nowrap !important; + align-items: center !important; + justify-content: flex-end !important; + gap: 0.35rem; + flex: 0 0 auto !important; + } + + header .header-right > .language-dropdown { + order: 4; + } + + header .header-right > a[data-bs-target="#siteSearchModal"], + header .header-right > a.search-toggler { + order: 1; + } + + header .header-right > a.user-button.menu-circle:not(.search-toggler):not([data-bs-target="#siteSearchModal"]) { order: 2; - margin-left: auto; - flex: 0 0 auto; - gap: 0.375rem; + } + + header .header-right > .basket-dropdown { + order: 3; + } + + header .header-right .user-button, + header .header-right .dropdown-toggle { + margin: 0 !important; } header .header-right .language-dropdown, header .header-right .basket-dropdown, header .header-right > a.user-button.menu-circle, header .header-right .menu-circle { - width: 36px; - height: 36px; - min-width: 36px; - min-height: 36px; - flex-basis: 36px; + width: 34px; + height: 34px; + min-width: 34px; + min-height: 34px; + flex: 0 0 34px; + } + + header .header-right, + header .header-right .basket-dropdown, + header .header-right .menu-circle { + position: relative; + z-index: 100; } header .header-inner > .container > .navbar-toggler { order: 3; - margin-left: 0.125rem; flex: 0 0 auto; + margin: 0 !important; + position: fixed; + right: max(12px, env(safe-area-inset-right, 0px)); + bottom: calc(12px + env(safe-area-inset-bottom, 0px)); } header .header-inner > .container > .navbar-collapse { @@ -336,16 +401,6 @@ body.cookie-consent-open { border-bottom: 1px solid rgba(15, 23, 42, 0.08); } - - header .header-right, - header .header-right .basket-dropdown, - header .header-right .menu-circle { - position: relative; - z-index: 100; - } -} - -@media (max-width: 991.98px) { body.mobile-menu-open { header .header-inner > .container > .navbar-brand { opacity: 0; @@ -364,7 +419,30 @@ body.cookie-consent-open { opacity: 0 !important; pointer-events: none !important; } + } +} +@media (max-width: 374.98px) { + header .header-inner > .container { + gap: 0.25rem; + padding-left: max(8px, env(safe-area-inset-left, 0px)); + padding-right: max(8px, env(safe-area-inset-right, 0px)); + } + + header .header-inner > .container > .navbar-brand img { + max-width: 108px !important; + max-height: 48px !important; + } + + header .header-right .language-dropdown, + header .header-right .basket-dropdown, + header .header-right > a.user-button.menu-circle, + header .header-right .menu-circle { + width: 32px; + height: 32px; + min-width: 32px; + min-height: 32px; + flex: 0 0 32px; } } @@ -412,3 +490,27 @@ body.cookie-consent-open { } } } + +@media (max-width: 767.98px) { + .te-modern-saas .te-block--saas-hero-banner .saas-hero.saas-hero--split { + .saas-hero__stats { + width: 100%; + max-width: 100%; + gap: 0.625rem; + grid-template-columns: minmax(0, 1fr); + } + + .saas-hero__stat { + width: 100%; + min-width: 0; + padding: 0.75rem 0.875rem; + } + + .saas-hero__stat-value, + .saas-hero__stat-label { + white-space: normal; + overflow-wrap: break-word; + word-break: normal; + } + } +}