reboot design v1

assets/components/base/_layout.css

@@ -12,7 +12,7 @@ body {
   font-family: var(--ff-sans);
 
   @media screen and (--bp-desktop) {
-    line-height: 1.68;
+    line-height: 1.5;
   }
 }
 
@@ -383,13 +383,14 @@ body {
   }
 
   .with-figure {
+    font-size: 1.25rem;
     @media (--bp-desktop) {
       max-width: var(--w-sml);
       margin: 0 auto;
     }
   }
 
-  .layout-sidebar {
+.layout-sidebar {
     /* Fine line to separate any content on white above and below */
     border-bottom: 2px solid var(--col-paleblue);
     border-top: 2px solid var(--col-paleblue);

assets/components/base/_titles.css

@@ -27,21 +27,23 @@
 }
 
 @define-mixin subtitle {
-  font-size: .9375rem;
+  font-size: 1.75rem;
   line-height: 1.5rem;
-  letter-spacing: .125rem;
   font-weight: var(--fw-bold);
-  text-transform: uppercase;
+  text-transform: none;
+  font-family: var(--ff-noto);
 }
 
 @define-mixin title {
   @mixin subtitle;
   text-align: center;
+  color: var(--col-background-primary-navy);
 
-  &::after {
+
+&::after {
     margin-top: 1.5rem;
     width: 5rem;
-    border-bottom: 2px solid #000;
+    border-bottom: 2px solid var(--col-navy-mid);
     content: '';
     display: block;
     margin-left: auto;

assets/components/base/_typography.css

@@ -47,7 +47,7 @@
   table {
     @mixin wrapper;
     max-width: var(--w-sml);
-    font-weight: var(--fw-light);
+    font-weight: var(--fw-regular);
     padding: 0;
 
     @media screen and (--bp-tablet) {
@@ -59,7 +59,7 @@
     font-size: 1.625rem;
     line-height: 2.25rem;
     padding-bottom: 1.5rem;
-    font-weight: var(--fw-light);
+    font-weight: var(--fw-regular);
 
     @media screen and (--bp-desktop) {
       font-size: 2.0625rem;
@@ -68,14 +68,13 @@
   }
 
   h2 {
-    font-size: .9375rem;
+    font-size: 1rem;
     line-height: 1.5rem;
-    letter-spacing: .0625rem;
     padding-top: 1.5rem;
     padding-bottom: 1.5rem;
     clear: left;
     font-weight: var(--fw-bold);
-    text-transform: uppercase;
+    color: var(--col-background-primary-navy);
   }
 
   h3 {
@@ -91,8 +90,8 @@
 
   p,
   li {
-    letter-spacing: .0125rem;
     padding-bottom: 1.5rem;
+    color: var(--col-background-primary-navy);
   }
 
   ol,
@@ -109,7 +108,7 @@
       padding-bottom: .5rem;
       margin-left: .9375rem;
       max-width: var(--w-sml);
-      color: #000;
+      color: var(--col-background-primary-navy);
       display: list-item;
 
       &:last-child {
@@ -419,6 +418,8 @@
       & > li {
         list-style-type: none;
         position: relative;
+        font-size: 1rem;
+        color: var(--col-background-primary-navy);
 
         &::before {
           height: .3125rem;
@@ -510,7 +511,7 @@
   }
 
   a {
-    color: var(--col-lighterblue);
+    color: var(--col-background-primary-navy);
     text-decoration: underline;
 
     &:hover,

assets/components/buttons/_buttons.css

@@ -9,14 +9,14 @@
   cursor: pointer;
   display: inline-block;
   font-style: normal;
-  font-weight: var(--fw-bold);
+  font-weight: normal;
   letter-spacing: 2px;
   margin: 20px 0;
   outline-color: #000;
   outline-offset: 1px;
   text-align: center;
   text-decoration: none;
-  text-transform: uppercase;
+  text-transform: capitalize;
   vertical-align: bottom;
 
   &[disabled],
@@ -161,9 +161,9 @@
   letter-spacing: .0625rem;
   margin: 1.25rem 0;
   padding: .625rem;
-  border-color: #000;
+  border-color: var(--col-background-primary-navy);
   border-style: solid;
-  color: #000;
+  color: var(--col-background-primary-navy);
   cursor: pointer;
   display: inline-block;
   font-style: normal;
@@ -173,17 +173,16 @@
   position: relative;
   text-align: center;
   text-decoration: none;
-  text-transform: uppercase;
 
   &:hover,
   &:focus {
-    background-color: var(--col-lighterblue);
-    color: #fff;
-    border-color: transparent;
+    text-decoration: underline;
   }
 
   &:active {
-    opacity: .3;
+   background-color: var(--col-background-primary-navy);
+   color: #fff;
+   text-decoration: none;
   }
 
   @media screen and (--bp-height-small) {
@@ -197,11 +196,15 @@
   &::after {
     font-size: .9375rem;
     padding-left: .625rem;
-    content: '\2192';
+    content: '\203A';
     line-height: 0;
+    top: 6px;
+    display: inline-block;
+    position: relative;
 
     @media screen and (--bp-height-small) {
-      font-size: 1.625rem;
+      font-size: 2.5rem;
+      font-weight: var(--fw-regular);
       padding-left: .9375rem;
     }
   }

assets/components/footer/index.css

@@ -1,7 +1,7 @@
 .uomcontent .page-footer {
   @mixin normalise;
   font-size: 1.25rem;
-  background-color: var(--col-navy);
+  background-color: var(--col-background-secondary-navy);
   clear: left;
   color: #fff;
   font-family: var(--ff-sans);
@@ -19,11 +19,12 @@
   }
 
   small {
-    font-size: .75rem;
+    font-size: 1rem;
     line-height: 1.25rem;
     clear: left;
-    color: var(--col-lightblue);
+    color: #fff;
     display: block;
+    padding-bottom: .2rem;
     text-align: center;
 
     a {
@@ -44,7 +45,7 @@
     padding: 0;
 
     a {
-      font-size: .6875rem;
+      font-size: .8rem;
       line-height: 2.875rem;
       letter-spacing: 1px;
       text-transform: uppercase;
@@ -71,7 +72,7 @@
       width: 100%;
 
       a {
-        font-size: .625rem;
+        font-size: .9rem;
         line-height: 1.5rem;
         padding: 1.25rem .9375rem;
         color: #fff;
@@ -199,6 +200,13 @@
         padding-bottom: 0;
         padding-top: 0;
         width: auto;
+        font-family: 'Source Sans Pro', 'Gill Sans', 'Trebuchet MS', 'Arial', sans-serif;
+      }
+
+      li:not(:last-child)::after{
+        padding-left: 1rem;
+        content: "|";
+        display: inline-block;
       }
 
       li:first-child + li,
@@ -209,7 +217,8 @@
       }
 
       a {
-        font-size: .9375rem;
+        font-size: 1rem;
+        color: var(--col-blue-light);
       }
     }
   }
@@ -261,7 +270,6 @@
 
       &:hover,
       &:focus {
-        background-color: var(--col-lighterblue);
         transform: scale(1.2);
       }
     }
@@ -317,8 +325,8 @@
     padding: 2rem 0;
     border-bottom: 1px solid var(--col-blue);
     clear: both;
-    color: var(--col-lightblue);
-    font-family: var(--ff-serif);
+    color: var(--col-blue-light);
+    font-family: var(--ff-sans);
     font-style: italic;
     margin-left: auto;
     margin-right: auto;

assets/components/header/index.css

@@ -224,7 +224,7 @@
     &.page-header-logo {
       height: 3.75rem;
       width: 3.75rem;
-      background-color: var(--col-darkblue);
+      background-color: var(--col-background-primary-navy);
       display: block;
       left: 0;
       padding: .5rem;
@@ -284,7 +284,7 @@
     height: 2.5rem;
     line-height: 2.5rem;
     padding: 0 .625rem .3125rem .625rem;
-    font-weight: var(--fw-light);
+    font-weight: var(--fw-regular);
 
     @media screen and (--bp-desktop) {
       height: 4.6875rem;
@@ -421,7 +421,7 @@
       }
 
       span {
-        color: inherit;
+        color: var(--col-background-primary-navy);
       }
     }
   }
@@ -466,7 +466,7 @@
   }
 
   span {
-    font-size: .9375rem;
+    font-size: 1rem;
     height: auto;
     line-height: 1;
     padding: 0;

assets/components/headers/_headers.css

@@ -59,7 +59,7 @@
   & > header:first-child {
     padding-top: 1.5rem;
     padding-bottom: 1.5rem;
-    background-color: var(--col-navy);
+    background-color: var(--col-background-primary-navy);
     background-position: center;
     background-repeat: no-repeat;
     background-size: cover;
@@ -120,11 +120,12 @@
     }
 
     h1 {
-      font-size: 2.0625rem;
+      font-size: 2rem;
+      font-family: var(--ff-noto);
       line-height: 3rem;
       padding-bottom: 0;
       max-width: var(--w-sml);
-      font-weight: var(--fw-thin);
+      font-weight: var(--fw-bold);
       margin: 0 auto;
       text-align: left;
 
@@ -138,7 +139,7 @@
       }
 
       @media screen and (--bp-wide) {
-        font-size: 3.4375rem;
+        font-size: 2.8125rem;
         line-height: 3.75rem;
       }
     }

assets/components/nav/_nav.css

@@ -66,9 +66,9 @@ body {
     @media screen and (--bp-desktop) {
       &:hover,
       &:focus {
-        background-color: var(--col-lighterblue);
-        text-decoration: none;
-        transform: scale(1.2);
+        /*background-color: var(--col-lighterblue);*/
+        text-decoration: underline;
+        /*transform: scale(1.2);*/
       }
     }
   }

assets/components/notices/_shared.css

@@ -8,7 +8,7 @@
 }
 
 @define-mixin notice-info {
-  background-color: var(--col-lightestblue);
+  background-color: var(--col-navy-light);
   color: color(var(--col-lightestblue) lightness(-65%));
 
   a {