@nationalarchives/frontend 0.1.48 → 0.1.50

package/nationalarchives/global-header-package.scss

@@ -1,19 +1,37 @@
+/* stylelint-disable */
+
+@use "sass:math";
 // @use "variables/assets";
 @use "variables/grid" as gridVars with (
   $largest-container-width: 1270px,
-  $gutter-width: 30px,
-  $gutter-width-tiny: 15px
+  $gutter-width: math.div(30, 16),
+  $gutter-width-tiny: math.div(15, 16)
 );
 @use "variables/typography" as typographyVars;
 
 @use "tools/colour";
+@use "tools/media";
+@use "tools/spacing";
 @use "tools/typography";
 
+@use "utilities/a11y" as a11yUtils;
+// @use "utilities/areas" as areasUtils;
 @use "utilities/colour" as colourUtils;
+@use "utilities/columns" as columnsUtils;
+// @use "utilities/debug" as debugUtils;
+// @use "utilities/forms" as formsUtils;
+@use "utilities/global" as globalUtils;
+@use "utilities/lists" as listsUtils;
+@use "utilities/overrides" as overridesUtils;
+// @use "utilities/reset" as resetUtils;
+// @use "utilities/tables" as tablesUtils;
+// @use "utilities/typography" as typographyUtils;
 
+@use "components/button";
+@use "components/footer";
 @use "components/global-header";
 @use "components/grid";
-@use "components/footer";
+@use "components/skip-link";
 
 .tna-template {
   -moz-osx-font-smoothing: grayscale;
@@ -22,42 +40,129 @@
   -webkit-text-size-adjust: none;
   text-size-adjust: none;
   direction: ltr;
-  font-size: #{typographyVars.$relative-1rem-px}px;
+
+  --page-background: #fff;
 }
 
-.tna-global-header,
-.tna-footer {
-  color: inherit;
+hr {
+  border-width: 1px 0 0;
+  @include colour.colour-border("keyline");
+  border-style: solid;
+}
 
-  a {
-    text-decoration: none;
-    text-decoration-thickness: 1.5px;
+%heading {
+  @include colour.colour-font("font-dark");
 
-    &,
-    &:link {
-      @include colour.colour-font("link");
-    }
+  strong {
+    font-weight: inherit;
+  }
+}
 
-    &:visited {
-      @include colour.colour-font("link-visited");
-    }
+%heading-xl {
+  @extend %heading;
 
-    &:hover,
-    &:active {
-      @include typography.interacted-text-decoration;
+  @include typography.heading-font;
+  @include typography.relative-font-size(64);
+  line-height: 1.1;
 
-      background: none;
-    }
+  @include media.on-medium {
+    @include typography.relative-font-size(48);
+  }
 
-    &:focus {
-      background: none;
-    }
+  @include media.on-mobile {
+    @include typography.relative-font-size(36);
+  }
+}
 
-    &.tna-link--no-visited-state {
-      &:visited {
-        @include colour.colour-font("link");
-      }
-    }
+%heading-l {
+  @extend %heading;
+
+  @include typography.heading-font;
+  @include typography.relative-font-size(36);
+  line-height: 1.3;
+
+  @include media.on-medium {
+    @include typography.relative-font-size(30);
+  }
+
+  @include media.on-small {
+    @include typography.relative-font-size(28);
+  }
+
+  @include media.on-tiny {
+    @include typography.relative-font-size(25);
+  }
+}
+
+%heading-m {
+  @extend %heading;
+
+  @include typography.main-font-weight-bold;
+  @include typography.relative-font-size(22);
+  line-height: 1.6;
+
+  @include media.on-medium {
+    @include typography.relative-font-size(21);
+  }
+
+  @include media.on-small {
+    @include typography.relative-font-size(20);
+  }
+
+  @include media.on-tiny {
+    @include typography.relative-font-size(19);
+  }
+}
+
+%heading-s {
+  @extend %heading;
+
+  @include typography.main-font-weight-bold;
+  @include typography.relative-font-size(18);
+  line-height: 1.6;
+}
+
+%headings-and-heading-groups {
+  margin: spacing.space(2) 0 0;
+  padding: spacing.space(1) 0 0;
+
+  &:first-child {
+    margin-top: 0;
+    padding-top: 0;
+  }
+
+  + p {
+    margin-top: spacing.space(1);
+  }
+}
+
+.tna-heading {
+  &-xl {
+    @extend %heading-xl;
+    @extend %headings-and-heading-groups;
+  }
+
+  &-l {
+    @extend %heading-l;
+    @extend %headings-and-heading-groups;
+  }
+
+  &-m {
+    @extend %heading-m;
+    @extend %headings-and-heading-groups;
+  }
+
+  &-s {
+    @extend %heading-s;
+    @extend %headings-and-heading-groups;
+  }
+}
+
+.tna-button {
+  &,
+  &:link,
+  &:visited {
+    text-decoration: none;
   }
 }
 
@@ -76,23 +181,130 @@
       margin-bottom: 0;
 
       &-link {
-        &:hover {
-          outline: none;
+        &,
+        &:link,
+        &:visited {
+          display: block;
         }
       }
     }
   }
 
   &__top-navigation {
+    margin-top: 0;
     margin-bottom: 0;
 
     &-item {
       margin-left: 0;
+      margin-bottom: 0;
     }
 
     &-link {
+      display: flex !important;
+      @include colour.colour-font("font-light", true);
+
       &:hover {
-        outline: none;
+        @include colour.colour-font("font-base", true);
+      }
+    }
+  }
+}
+
+.tna-footer {
+  --button-accent-background: #fff;
+
+  &__title {
+    margin-top: 0;
+  }
+
+  &__address {
+    margin-bottom: 0;
+  }
+
+  .tna-heading-m {
+    font-weight: 400;
+    line-height: 1.5;
+    letter-spacing: -0.025em;
+  }
+
+  &__social-item,
+  &__navigation-block-item,
+  &__legal-item {
+    margin-left: 0;
+    margin-bottom: 0;
+  }
+
+  &__social-item-link {
+    box-sizing: content-box;
+  }
+
+  address {
+    line-height: inherit;
+  }
+
+  hr {
+    height: 0 !important;
+    @include colour.colour-border("keyline", 1px, solid, top);
+    border-bottom: none !important;
+  }
+
+  &__licence p {
+    margin-top: 0;
+    margin-bottom: 0;
+  }
+
+  &__legal-item-link,
+  &__licence p a {
+    text-decoration: underline !important;
+
+    &:hover,
+    &:active {
+      text-decoration-thickness: 3.5px !important;
+    }
+  }
+}
+
+.tna-global-header,
+.tna-footer {
+  * {
+    color: inherit;
+  }
+
+  a:not(.tna-button) {
+    text-decoration: none;
+    text-decoration-thickness: 1.5px;
+
+    &,
+    &:link {
+      @include colour.colour-font("link", true);
+    }
+
+    &:visited {
+      @include colour.colour-font("link-visited");
+    }
+
+    &:hover,
+    &:active {
+      @include typography.interacted-text-decoration;
+
+      background: none !important;
+
+      outline: none;
+    }
+
+    &:focus {
+      background: none !important;
+    }
+
+    &:hover:focus {
+      color: unset !important;
+
+      background: unset !important;
+    }
+
+    &.tna-link--no-visited-state {
+      &:visited {
+        @include colour.colour-font("link");
       }
     }
   }