Add global overlay background. Add blur background mixin and apply in background default and offcanvas. Add text-light-grey in text.

less/_import.less

@@ -4,6 +4,7 @@
 // Base
 @import "fonts";
 @import "variables";
+@import "mixin";
 @import "base";
 
 // Elements

less/background.less

@@ -5,6 +5,12 @@
 @background-color-opacity: @global-opacity;
 
 .hook-background-misc() {
+  .set-blur-background();
+
+  .uk-background-default {
+    .set-blur-background(@background-default-background);
+  }
+
   .uk-background-primary {
     background-image: @background-primary-background-gradient;
   }

less/color.less

@@ -1,48 +1,48 @@
-  @primary-color: #211F7E;
-  @primary-light-color: #4687E6;
-  @primary-dark-color: #1F2379;
-  @secondary-color: #3086ED;
+@primary-color: #211F7E;
+@primary-light-color: #4687E6;
+@primary-dark-color: #1F2379;
+@secondary-color: #3086ED;
 
-  @dark-color: #000000;
-  @grey-color: #2C2C2C;
-  @placeholder-color: #8E8E8E;
-  @disable-color: #B3B3B3;
-  @muted-color: #EAEAEA;
-  @light-grey-color: #6E6E6E;
-  @light-color: #FFFFFF;
-  @table-color: #F5F5F5;
-  @default-color: #F9F9F9;
-  @light-blue: #F4F8F9;
-  @info-color: #095ABA;
-  @info-border-color: #2680EB;
-  @info-background-color: #F8FFFF;
-  @warning-color: #BD640D;
-  @warning-border-color: #E68619;
-  @warning-background-color: #FFFAF3;
-  @success-color: #107154;
-  @success-border-color: #2D9D78;
-  @success-background-color: #FCFFF5;
-  @danger-color: #BB121A;
-  @danger-border-color: #E34850;
-  @danger-background-color: #FFF6F6;
+@dark-color: #000000;
+@grey-color: #2C2C2C;
+@placeholder-color: #8E8E8E;
+@disable-color: #B3B3B3;
+@muted-color: #EAEAEA;
+@light-grey-color: #6E6E6E;
+@light-color: #FFFFFF;
+@table-color: #F5F5F5;
+@default-color: #F9F9F9;
+@light-blue: #F4F8F9;
+@info-color: #095ABA;
+@info-border-color: #2680EB;
+@info-background-color: #F8FFFF;
+@warning-color: #BD640D;
+@warning-border-color: #E68619;
+@warning-background-color: #FFFAF3;
+@success-color: #107154;
+@success-border-color: #2D9D78;
+@success-background-color: #FCFFF5;
+@danger-color: #BB121A;
+@danger-border-color: #E34850;
+@danger-background-color: #FFF6F6;
 
-  /* Explore */
-  @explore-color: #E96439;
-  @explore-light-color: #FF7A4E;
-  @explore-dark-color: #E96439;
-  /* Provide */
-  @provide-color: #37C7E9;
-  /* Monitor */
-  @monitor-color: #56A601;
-  @monitor-light-color: #8BCC00;
-  @monitor-dark-color: #228001;
-  /* Connect */
-  @connect-color: #FECA1D;
-  @connect-light-color: #FECA1D;
-  @connect-dark-color: #FE9F1D;
-  /* Graph */
-  @graph-color: #FA193E;
-  /* ORCID */
-  @orcid-color: #A6CE39;
-  /* Argos */
-  @argos-color: #17BEBB;
+/* Explore */
+@explore-color: #E96439;
+@explore-light-color: #FF7A4E;
+@explore-dark-color: #E96439;
+/* Provide */
+@provide-color: #37C7E9;
+/* Monitor */
+@monitor-color: #56A601;
+@monitor-light-color: #8BCC00;
+@monitor-dark-color: #228001;
+/* Connect */
+@connect-color: #FECA1D;
+@connect-light-color: #FECA1D;
+@connect-dark-color: #FE9F1D;
+/* Graph */
+@graph-color: #FA193E;
+/* ORCID */
+@orcid-color: #A6CE39;
+/* Argos */
+@argos-color: #17BEBB;

less/mixin.less

@@ -0,0 +1,13 @@
+.set-blur-background(@color: @global-inverse-color, @opacity: 80%) {
+  .uk-blur-background {
+    background: fade(@color, @opacity + 15%);
+  }
+
+  @supports ((-webkit-backdrop-filter: none) or (backdrop-filter: none)) {
+    .uk-blur-background {
+      -webkit-backdrop-filter: saturate(180%) blur(20px);
+      backdrop-filter: saturate(180%) blur(20px);
+      background: fade(@color, @opacity);
+    }
+  }
+}

less/modal.less

@@ -1,3 +1,5 @@
+@modal-background: @global-overlay-background;
+
 @modal-dialog-border-radius: @global-border-radius;
 
 @modal-body-padding-horizontal: @global-medium-gutter;

less/navbar.less

@@ -5,7 +5,7 @@
 
 @navbar-nav-item-font-size: @global-small-font-size;
 @navbar-nav-item-font-weight: 600;
-@navbar-nav-item-height: 65px;
+@navbar-nav-item-height: @global-header-height;
 @navbar-nav-item-color: @global-color;
 @navbar-nav-item-hover-color: @global-secondary-background;
 @navbar-nav-item-hover-text-decoration: none;

less/offcanvas.less

@@ -24,7 +24,11 @@
 
 @offcanvas-close-position: 30px;
 
-@offcanvas-overlay-background: fade(@global-color, 50%);
+@offcanvas-overlay-background: @global-overlay-background;
+
+.hook-offcanvas-bar() {
+  .set-blur-background(@offcanvas-bar-background);
+}
 
 .hook-offcanvas-misc() {
 

less/text.less

@@ -1,5 +1,7 @@
 @text-xsmall-font-size: @global-xsmall-font-size;
-@text-xsmall-line-height: 1.5;
+@text-xsmall-line-height: @global-line-height;
+@text-small-line-height: @global-line-height;
+@text-large-line-height: @global-line-height;
 
 /* Meta */
 @text-meta-font-size: inherit;
@@ -10,6 +12,9 @@
 @text-background-gradient: @global-primary-gradient;
 @text-background-color: @global-primary-background;
 
+/* Light grey text*/
+@text-light-grey: @light-grey-color;
+
 .hook-text-background() {
   background-image: @text-background-gradient;
 }
@@ -18,11 +23,12 @@
   .uk-text-xsmall {
     font-size: @text-xsmall-font-size;
     line-height: @text-xsmall-line-height;
-    .hook-text-xsmall();
+  }
+
+  .uk-text-light-grey {
+    color: @text-light-grey;
   }
 }
 
-.hook-text-xsmall() {};
-
 
 

less/variables.less

@@ -18,6 +18,7 @@
 @global-muted-color: @disable-color;
 @global-meta-color: @placeholder-color;
 @global-link-hover-color: @secondary-color;
+@global-overlay-background: fade(@dark-color, 60%);
 
 /** Backgrounds */
 @global-background: @default-color;
@@ -52,6 +53,9 @@
 @global-control-height: 40px;
 @global-control-large-height: 50px;
 
+/* Header */
+@global-header-height: 65px;
+
 /* Breakpoints */
 @breakpoint-small: 481px;
 @breakpoint-medium: 769px;