@openeuropa/bcl-theme-joinup 1.15.0 → 1.16.0

package/css/oe-bcl-joinup.css

@@ -10349,6 +10349,10 @@ svg {
   text-align: center !important;
 }
 
+.text-justify {
+  text-align: justify !important;
+}
+
 .text-decoration-none, .pagination-v2 .pagination.pagination--glossary .page-item .page-link:hover {
   text-decoration: none !important;
 }
@@ -12332,6 +12336,9 @@ svg {
   .text-sm-center {
     text-align: center !important;
   }
+  .text-sm-justify {
+    text-align: justify !important;
+  }
 }
 @media (min-width: 768px) {
   .float-md-start {
@@ -13570,6 +13577,9 @@ svg {
   .text-md-center {
     text-align: center !important;
   }
+  .text-md-justify {
+    text-align: justify !important;
+  }
 }
 @media (min-width: 992px) {
   .float-lg-start {
@@ -14808,6 +14818,9 @@ svg {
   .text-lg-center {
     text-align: center !important;
   }
+  .text-lg-justify {
+    text-align: justify !important;
+  }
 }
 @media (min-width: 1200px) {
   .float-xl-start {
@@ -16046,6 +16059,9 @@ svg {
   .text-xl-center {
     text-align: center !important;
   }
+  .text-xl-justify {
+    text-align: justify !important;
+  }
 }
 @media (min-width: 1400px) {
   .float-xxl-start {
@@ -17284,6 +17300,9 @@ svg {
   .text-xxl-center {
     text-align: center !important;
   }
+  .text-xxl-justify {
+    text-align: justify !important;
+  }
 }
 @media (min-width: 1200px) {
   .fs-1 {
@@ -17529,6 +17548,11 @@ em.placeholder {
   .bcl-header {
     box-shadow: var(--bs-box-shadow);
   }
+  .bcl-header:not(:has(.bcl-mega-menu > [aria-expanded=true])) .bcl-header__site-name {
+    position: relative;
+    z-index: 1040;
+    box-shadow: 0 8px 16px rgba(224, 229, 245, 0.8);
+  }
   .bcl-header nav + nav {
     min-height: 3.5rem;
   }
@@ -17571,7 +17595,8 @@ em.placeholder {
     -ms-flex-pack: justify;
         justify-content: space-between;
     position: relative;
-    padding: 1rem;
+    padding-block: 1rem;
+    padding-inline: 0 1rem;
     border-bottom: 1px solid tint-color(#253ebe, 90%);
     text-align: left;
     border-radius: 0;
@@ -17599,8 +17624,8 @@ em.placeholder {
         align-self: center;
     content: "";
     border: none;
-    width: 20px;
-    height: 20px;
+    width: 14px;
+    height: 14px;
     background-size: cover;
     background-position: center;
   }
@@ -17638,6 +17663,11 @@ em.placeholder {
   .ec__header .navbar-brand img {
     width: 285px;
   }
+  .bcl-header__navbar.navbar .navbar-nav {
+    -webkit-margin-start: -1rem;
+       -moz-margin-start: -1rem;
+            margin-inline-start: -1rem;
+  }
   .bcl-header__navbar.navbar .dropdown-toggle,
   .bcl-header__navbar.navbar .nav-link {
     border-radius: 0;
@@ -17861,6 +17891,11 @@ dd + dd {
   height: 3rem;
 }
 
+.icon--3xl {
+  width: 6rem;
+  height: 6rem;
+}
+
 .icon--fluid {
   width: 1em;
   height: 1em;
@@ -19195,6 +19230,8 @@ a.badge:focus-within.text-bg-brand, a.badge:active.text-bg-brand, a.badge:hover.
 @media (min-width: 1200px) {
   .bcl-mega-menu__container .shadow-container {
     block-size: 100%;
+    -webkit-clip-path: inset(0 -10px);
+            clip-path: inset(0 -10px);
     position: absolute;
     inset-inline-end: 0;
     inset-block-start: 0;
@@ -19212,7 +19249,8 @@ a.badge:focus-within.text-bg-brand, a.badge:active.text-bg-brand, a.badge:hover.
 
 .bcl-mega-menu__back-button-block {
   position: relative;
-  padding: 20px 0.25rem 0;
+  padding-block: 20px 0;
+  padding-inline: 0 0.25rem;
 }
 .bcl-mega-menu__back-button-block > .btn-link {
   text-decoration: none;
@@ -19220,9 +19258,15 @@ a.badge:focus-within.text-bg-brand, a.badge:active.text-bg-brand, a.badge:hover.
 .bcl-mega-menu__back-button-block > .btn-link:hover {
   text-decoration: underline;
 }
+.bcl-mega-menu__back-button-block > .btn-link {
+  -webkit-padding-start: 0;
+     -moz-padding-start: 0;
+          padding-inline-start: 0;
+}
 
 .bcl-mega-menu__info > .content-block {
-  padding: 1rem;
+  padding-block: 1rem;
+  padding-inline: 0 1rem;
   background: tint-color(#253ebe, 90%);
 }
 @media (min-width: 992px) {
@@ -19464,6 +19508,16 @@ ul.bcl-mega-menu__items > li > button[aria-expanded=true] {
 }
 
 @media (max-width: 991.98px) {
+  ul.bcl-mega-menu__items > li > :is(span, a, button),
+  .bcl-mega-menu__submenu > .__header > .__label,
+  .bcl-mega-menu__submenu .__see_all > .see-all-button {
+    -webkit-padding-start: 0;
+       -moz-padding-start: 0;
+            padding-inline-start: 0;
+  }
+  .bcl-mega-menu__back-button-block::before {
+    box-shadow: inset 0 16px 16px -12px rgba(20, 59, 118, 0.25);
+  }
   .bcl-mega-menu__submenu > .__header,
   .bcl-mega-menu .content-block,
   .bcl-mega-menu__back-button-block {
@@ -20507,6 +20561,13 @@ Due to the split circle of progress-left and progress right, we must use the ani
     -ms-grid-row-span: 2;
     grid-row: 1/3;
   }
+  .bcl-gallery.bcl-gallery--thumbnail-cover .bcl-gallery__item {
+    height: 100%;
+  }
+  .bcl-gallery.bcl-gallery--thumbnail-cover .bcl-gallery__item img {
+    -o-object-fit: cover;
+       object-fit: cover;
+  }
   .bcl-gallery .bcl-gallery__thumbnails-collaspe ul.bcl-gallery__grid {
     margin-top: 0.5rem;
   }