less/_import.less

@@ -65,3 +65,5 @@
 
 // Extend
 @import "stepper";
+@import "banner";
+

less/banner.less

@@ -0,0 +1,100 @@
+@banner-background: @ciel-color;
+@banner-background-gradient: none;
+
+@banner-footer-background: #000000;
+
+@banner-tab-gutter: 60px;
+@banner-tab-margin-vertical: @global-small-margin;
+@banner-tab-divider: @global-border-width solid @global-border;
+@banner-tab-divider-height: @global-line-height;
+@banner-tab-item-color: @global-inverse-color;
+@banner-tab-item-hover-color: @global-secondary-background;
+@banner-tab-item-hover-decoration: none;
+@banner-tab-item-active-color: @banner-tab-item-hover-color;
+@banner-tab-item-active-indicator: @global-background;
+
+@banner-tab-button-background: @global-secondary-background;
+@banner-tab-button-border-radius: 0;
+
+.uk-banner:extend(.uk-section) {
+  background: @banner-background;
+  position: relative;
+
+  & .uk-banner-footer:extend(.uk-light all) {
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    background: fade(@banner-footer-background, 50%);
+
+    @supports ((-webkit-backdrop-filter: none) or (backdrop-filter: none)) {
+      -webkit-backdrop-filter: blur(30px) opacity(10%) brightness(90%);
+      backdrop-filter: blur(30px) opacity(10%) brightness(90%);
+    }
+
+    & .uk-button {
+      height: 100%;
+      background: @banner-tab-button-background;
+      border-radius: @banner-tab-button-border-radius;
+
+      &:hover {
+        background: fade(@banner-tab-button-background, 80%);
+      }
+    }
+  }
+
+  & ul.uk-banner-tab:extend(.uk-flex):extend(.uk-margin-top) {
+    list-style: none;
+    margin: @banner-tab-margin-vertical 0;
+
+    & > li {
+      &:not(:first-child) {
+        margin-left: @banner-tab-gutter;
+        position: relative;
+
+        &::before {
+          content: '';
+          position: absolute;
+          left: -1 * (@banner-tab-gutter/2);
+          transform: translateX(-100%);
+          border-left: @banner-tab-divider;
+          height: @banner-tab-divider-height;
+        }
+      }
+
+      a:extend(.uk-text-truncate) {
+        text-transform: uppercase;
+        text-decoration: none;
+        color: @banner-tab-item-color;
+      }
+
+      &:hover a {
+        color: @banner-tab-item-hover-color;
+        text-decoration: @banner-tab-item-hover-decoration;
+      }
+
+      &.uk-active a {
+        color: @banner-tab-item-active-color;
+        font-weight: @text-bold-weight;
+        position: relative;
+
+        &:after {
+          content: '';
+          position: absolute;
+          bottom: -@banner-tab-margin-vertical;
+          left: 50%;
+          transform: translate(-50%, 50%);
+          width: 0;
+          height: 0;
+          border-left: 2*@banner-tab-margin-vertical solid transparent;
+          border-right: 2*@banner-tab-margin-vertical solid transparent;
+          border-bottom: @banner-tab-margin-vertical solid @banner-tab-item-active-indicator;
+        }
+      }
+    }
+  }
+}
+
+.uk-banner.dark {
+  background: @background-secondary-background;
+}

less/base.less

@@ -37,10 +37,6 @@
 @inverse-base-link-hover-color: @global-inverse-color;
 
 .hook-base-misc() {
-  body {
-    overflow-y: scroll;
-  }
-
 
   @media (min-width: @breakpoint-medium) {
 

less/color.less

@@ -45,6 +45,9 @@
 @funder-color: #3C9F94;
 @ri-color: #D023AE;
 @organization-color: #E28B6C;
+@publisher-color: #8B6CE2;
+@journal-color: #6CE295;
+@researcher-color: none;
 @country-color: none;
 @datasource-color: none;
 /* Connect */

less/icon.less

@@ -3,6 +3,7 @@
 @icon-button-xsmall-size: 24px;
 @icon-bg-background: @global-background;
 @icon-bg-size: @icon-button-size;
+@icon-bg-size-small: @icon-button-size*0.5;
 @icon-bg-size-medium: @icon-button-size*1.5;
 @icon-bg-size-large: @icon-button-size*2;
 
@@ -80,6 +81,23 @@
 	}
 
   /* Default circle element for SVGs */
+  .uk-icon-bg {
+    border-radius: 100px;
+    width: @icon-bg-size;
+    height: @icon-bg-size;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background-color: @icon-bg-background;
+  }
+
+  .uk-icon-bg-small {
+    width: @icon-bg-size-small;
+    height: @icon-bg-size-small;
+  }
+  /**/
+
+  /* Default circle element for SVGs with shadow*/
   .uk-icon-bg-shadow {
     border-radius: 100px;
     width: @icon-button-size;

less/label.less

@@ -67,8 +67,12 @@
   }
 
   .uk-label-secondary {
-    background-color: @label-secondary-background;
+    background-color: @label-secondary-border;
-    color: @label-secondary-color;
+    color: @global-inverse-color;
-    border-color: @label-secondary-border;
+    border-color: @label-secondary-background;
+
+    .uk-close {
+      color: @global-inverse-color;
+    }
   }
 }

less/mixin.less

@@ -1,12 +1,12 @@
-.set-blur-background(@color: @base-body-background, @opacity: 80%) {
+.set-blur-background(@color: @base-body-background, @opacity: 80%, @blur: saturate(180%) blur(20px)) {
   &.uk-blur-background, .uk-blur-background {
     background: fade(@color, 99%);
   }
 
   @supports ((-webkit-backdrop-filter: none) or (backdrop-filter: none)) {
     &.uk-blur-background, .uk-blur-background {
-      -webkit-backdrop-filter: saturate(180%) blur(20px);
+      -webkit-backdrop-filter: @blur;
-      backdrop-filter: saturate(180%) blur(20px);
+      backdrop-filter: @blur;
       background: fade(@color, @opacity) !important;
     }
   }

less/modal.less

@@ -46,9 +46,13 @@
     & > .uk-dropdown {
       z-index: @modal-z-index + 1;
     }
+
+    & > .uk-drop {
+      z-index: @modal-z-index + 1;
+    }
   }
 
-  .uk-modal, .uk-dropdown {
+  .uk-modal, .uk-dropdown, .uk-drop {
 
     .uk-button, uk-icon-button {
       box-shadow: none !important;

less/progress.less

@@ -15,9 +15,11 @@
 @progress-circle-background-open-access: conic-gradient(@progress-bar-background-open-access  calc(var(--percentage) * 1%), @progress-background-open-access 0);
 
 @progress-semicircle-size: 120px;
+@progress-semicircle-size-small: 80px;
 @progress-semicircle-color: @global-primary-background;
 @progress-semicircle-text-font-weight: @text-bold-weight;
 @progress-semicircle-text-font-size: @global-large-font-size;
+@progress-semicircle-text-font-size-small: @global-font-size;
 @progress-semicircle-background: conic-gradient(from 0.75turn at 50% 100%, @progress-bar-background calc(var(--percentage) * 1% / 2), @progress-background calc(var(--percentage) * 1% / 2 + 0.1%));
 @progress-semicircle-background-open-access: conic-gradient(from 0.75turn at 50% 100%, @progress-bar-background-open-access calc(var(--percentage) * 1% / 2), @progress-background-open-access calc(var(--percentage) * 1% / 2 + 0.1%));
 
@@ -110,6 +112,14 @@
       }
     }
   }
+
+  .uk-progress-semicircle-small[percentage] {
+    width: @progress-semicircle-size-small;
+
+    &::after {
+      font-size: @progress-semicircle-text-font-size-small;
+    }
+  }
 }
 
 @inverse-progress-background: @inverse-global-color;

less/subnav.less

@@ -1,10 +1,14 @@
 @subnav-item-font-size: @global-small-font-size;
+@subnav-item-font-size-small: @global-xsmall-font-size;
 @subnav-item-line-height: 17px;
 @subnav-item-font-weight: 400;
+@subnav-item-max-width: @width-medium-width;
 
 /* Pills */
 @subnav-pill-item-padding-vertical: 10px;
 @subnav-pill-item-padding-horizontal: 20px;
+@subnav-pill-item-padding-vertical-small: (@subnav-pill-item-padding-vertical / 2);
+@subnav-pill-item-padding-horizontal-small: (@subnav-pill-item-padding-horizontal / 2);
 @subnav-pill-item-border-radius: 60px;
 @subnav-pill-item-background: transparent;
 @subnav-pill-item-color: @global-primary-background;
@@ -21,7 +25,9 @@
 /* Pills alt*/
 @subnav-pill-alt-item-padding-vertical: 10px;
 @subnav-pill-alt-item-padding-horizontal: 20px;
-@subnav-pill-alt-item-border-radius: 24px;
+@subnav-pill-alt-item-padding-vertical-small: (@subnav-pill-alt-item-padding-vertical / 2);
+@subnav-pill-alt-item-padding-horizontal-small: (@subnav-pill-alt-item-padding-horizontal / 2);
+@subnav-pill-alt-item-border-radius: @global-xlarge-border-radius;
 @subnav-pill-alt-item-color: @global-color;
 @subnav-pill-alt-item-hover-color: @global-secondary-background;
 @subnav-pill-alt-item-active-font-weight: 600;
@@ -34,6 +40,9 @@
   font-size: @subnav-item-font-size;
   font-weight: @subnav-item-font-weight;
   line-height: @subnav-item-line-height;
+  max-width: @subnav-item-max-width;
+
+  & > *:extend(.uk-text-truncate) {}
 }
 
 .hook-subnav-pill-item() {
@@ -72,13 +81,20 @@
       background-image: @subnav-pill-alt-item-active-background-gradient;
     }
   }
+
+  .uk-subnav.uk-subnav-pill.uk-subnav-small {
+
+    & > * > * {
+      font-size: @subnav-item-font-size-small;
+      padding: @subnav-pill-item-padding-vertical-small @subnav-pill-item-padding-horizontal-small;
+    }
   }
 
-/* Inverse */
+  .uk-subnav.uk-subnav-pill-alt.uk-subnav-small {
-@inverse-subnav-pill-alt-box-shadow: @inverse-global-large-box-shadow;
 
-.hook-inverse-misc() {
+    & > * > * {
-  .uk-subnav.uk-subnav-pill-alt {
+      font-size: @subnav-item-font-size-small;
-    box-shadow: @inverse-subnav-pill-alt-box-shadow;
+      padding: @subnav-pill-alt-item-padding-vertical-small @subnav-pill-alt-item-padding-horizontal-small;
+    }
   }
 }

less/utility.less

@@ -1,6 +1,8 @@
 @dropcap-font-size: @global-line-height * 3;
 @border-rounded-border-radius: @global-border-radius;
 @border-rounded-small-border-radius: @global-small-border-radius;
+@border-rounded-xlarge-border-radius: @global-xlarge-border-radius;
+
 
 @border-width: @global-border-width;
 @border-color: @global-border;
@@ -49,6 +51,10 @@
   .uk-border-rounded-small {
     border-radius: @border-rounded-small-border-radius;
   }
+  
+  .uk-border-rounded-xlarge {
+    border-radius: @border-rounded-xlarge-border-radius;
+  }
 }
 
 /* Inverse */

less/variables.less

@@ -36,6 +36,7 @@
 @global-border: @muted-color;
 @global-border-radius: 6px;
 @global-small-border-radius: 4px;
+@global-xlarge-border-radius: 4 * @global-border-radius;
 
 /* Shadows*/
 @global-default-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.1);