less/general.less

@@ -30,6 +30,24 @@
 @usage-counts-icon-gradient: linear-gradient(127deg, @usage-counts-orange-color 0%, @usage-counts-blue-color 100%);
 @usage-counts-number-gradient: linear-gradient(122deg, @primary-light-color 0%, @primary-dark-color 100%);
 
+@general-dot-size: 8px;
+@general-dot-default-background: @global-inverse-color;
+@general-dot-items: {
+  open: @open-access-color;
+  restricted: @restricted-access-color;
+  embargo: @embargo-access-color;
+  closed: @closed-access-color;
+
+  green: @green-oa-color;
+  gold: @gold-oa-color;
+  hybrid: @hybrid-oa-color;
+  bronze: @bronze-oa-color;
+  diamond: @diamond-oa-color;
+}
+
+@general-access-route-label-padding: @global-xsmall-margin;
+@general-access-route-badge-size: 18px;
+
 main {
   min-height: calc(100vh - var(--header-height));
 }
@@ -204,6 +222,7 @@ noscript, ol, section, table, tfoot, ul, video;
   background-color: @general-search-form-background;
   background-image: @general-search-form-background-image;
   background-position: @general-search-form-background-position;
+  .hook-general-search-form();
 }
 
 /* Filter slider */
@@ -338,6 +357,59 @@ a:hover .text-usage-counts-hover:extend(.uk-text-background) {
 
 .fully_rounded .a2a_svg { border-radius: 50% !important; }
 
+
+/* Dot Items */
+.dot:extend(.uk-margin-xsmall-right):extend(.uk-display-inline-block) {
+  width: @general-dot-size;
+  height: @general-dot-size;
+  background: @general-dot-default-background;
+  border-radius: 50%;
+
+  each(@general-dot-items, {
+    &.@{key} {
+     background: @value;
+    }
+  });
+}
+
+/* Access Routes */
+.access-route-label:extend(.uk-label all):extend(.uk-background-default):extend(.uk-text-capitalize) {
+  padding: @general-access-route-label-padding;
+}
+
+.access-route-badge {
+  width: @general-access-route-badge-size;
+  height: @general-access-route-badge-size;
+  position: relative;
+
+  & > .dot {
+    position: absolute;
+    margin-right: 0 !important;
+
+    &:first-child {
+      bottom: 0;
+      left: 0;
+
+      &:last-child {
+        left: 50%;
+        transform: translateX(-50%);
+      }
+    }
+
+    &:nth-child(2) {
+      bottom: 0;
+      right: 0;
+    }
+
+    &:nth-child(3) {
+      top: 0;
+      left: 50%;
+      transform: translateX(-50%);
+    }
+  }
+}
+
+
 @inverse-general-custom-external-color: @global-inverse-color;
 
 .hook-inverse() {
@@ -347,3 +419,5 @@ a:hover .text-usage-counts-hover:extend(.uk-text-background) {
     }
   }
 }
+
+.hook-general-search-form() {}

less/landing.less

@@ -54,7 +54,7 @@
 @landing-action-bar-border-radius: @global-small-border-radius;
 
 @landing-metrics-grip-gap: 80px;
-@landing-metrics-background-color: @global-secondary-background;
+@landing-metrics-background-color: @openaire-secondary-color;
 @landing-metrics-background-svg: '<svg id="Layer_1-2" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="326" height="155.391" viewBox="0 0 326 155.391">  <defs>    <clipPath id="clip-path">      <rect id="Rectangle_17830" data-name="Rectangle 17830" width="326" height="155.39" fill="none"/>    </clipPath>  </defs>  <g id="Group_15222" data-name="Group 15222">    <rect id="Rectangle_17829" data-name="Rectangle 17829" width="326" height="155.39" rx="15" fill="@landing-metrics-background-color"/>    <g id="Group_15221" data-name="Group 15221" clip-path="url(#clip-path)">      <circle id="Ellipse_868" data-name="Ellipse 868" cx="181.05" cy="181.05" r="181.05" transform="translate(-129.306 -88.381)" fill="none" stroke="#fff" stroke-miterlimit="10" stroke-width="1" opacity="0.72"/>      <circle id="Ellipse_869" data-name="Ellipse 869" cx="204.367" cy="204.367" r="204.367" transform="translate(-153.59 -135.71)" fill="none" stroke="#fff" stroke-miterlimit="10" stroke-width="1" opacity="0.72"/>      <circle id="Ellipse_870" data-name="Ellipse 870" cx="181.05" cy="181.05" r="181.05" transform="translate(-82.804 -115.955)" fill="none" stroke="#fff" stroke-miterlimit="10" stroke-width="0.75" opacity="0.72"/>      <circle id="Ellipse_871" data-name="Ellipse 871" cx="181.05" cy="181.05" r="181.05" transform="translate(-56.26 -128.15)" fill="none" stroke="#fff" stroke-miterlimit="10" stroke-width="0.5" opacity="0.72"/>      <path id="Path_119069" data-name="Path 119069" d="M-38.064-5.565a180.54,180.54,0,0,1,.745-69.415C-17.165-172.917,78.573-235.972,176.51-215.819S337.5-99.927,317.348-1.99,201.456,159,103.52,138.848A180.614,180.614,0,0,1-17.462,50.859" transform="translate(15.132 80.898)" fill="none" stroke="#fff" stroke-miterlimit="10" stroke-width="0.25" opacity="0.72"/>    </g>  </g></svg>';
 
 @landing-action-bar-mobile-border: @global-border;