npm - @nationalarchives/frontend - Versions diffs - 0.1.48 → 0.1.50 - Mend

@nationalarchives/frontend 0.1.48 → 0.1.50

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (172) hide show

package/nationalarchives/components/header/header.css.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sourceRoot":"","sources":["../../../../src/nationalarchives/tools/_colour.scss","../../../../src/nationalarchives/components/header/header.scss","../../../../src/nationalarchives/variables/_colour.scss","../../../../src/nationalarchives/tools/_typography.scss","../../../../src/nationalarchives/variables/_typography.scss","../../../../src/nationalarchives/tools/_media.scss","../../../../src/nationalarchives/variables/_grid.scss"],"names":[],"mappings":"AA6PA,YACE,yCACA,uCACA,uCACA,yCACA,yCACA,6BACA,6CACA,mCACA,6CACA,2CACA,uDACA,uDACA,mEA1KA,mCAPA,4BACA,uBAqNF,oBACE,uCACA,qCACA,qCACA,uCACA,uCACA,2BACA,mCACA,iCACA,2CAxNA,mCAPA,4BACA,uBCnFF,YAGE,kBAEA,sBAEA,uCACE,wEAQA,oCADF,wCAEI,yEAQJ,kBACE,kBACA,qBAEA,iBAEA,iBCCQ,QDEV,uBACE,qBErCF,eFwCE,kFAGE,WAGF,6BACE,0BAGF,iCACE,kBAKF,oCACE,8BAIJ,kBACE,mBACA,sBAGF,uBACE,aACA,qBAEA,cACA,qBAEA,kFAGE,cAGF,yCACE,qBD8DF,4BAIA,wCC/DE,mBAIJ,sBACE,WACA,YAEA,qBAEA,cAGF,4BACE,gBAEA,qBAEA,iBE7EF,YCZoB,gDDapB,YCZoB,IDbpB,kBFwGE,yBAGF,+BACE,aAEA,kBAGF,uBACE,WACA,cAEA,cD5BF,sBAEA,kCC8BE,6DAEE,cAEA,cAEA,kBACA,QACA,OAEA,yBAEA,WAGF,+BACE,MAGF,8BACE,SAIJ,sCACE,YACA,UAEA,cAEA,kBAEA,gBAEA,YAEA,gBAEA,6BACA,sBAEA,eAGE,qEACE,SAEA,6EACE,YAEA,0BAGF,4EACE,eAEA,yBAMR,wBACE,aACA,8BACA,8BACA,qBAEA,kBACA,UAGF,kCACE,SACA,kBAEA,aACA,yBACA,iBEvMF,oBF0ME,gBAEA,cAGF,iCACE,cAGF,sCACE,aACA,mBAEA,qBAEA,+HDrIF,sBACA,wBC4II,8SD7IJ,cACA,uBGtCA,0BACA,0BC3CsC,MHoOpC,gDACE,qBAIJ,8BACE,SACA,UAEA,aACA,iBACA,SAEA,gBAEA,mBAMF,kCACE,gBAEA,qBAEA,kBE3PF,YCEsB,IH4PpB,qBACA,cAEA,yCACE,SAEA,kBACA,QACA,SACA,ODtLJ,sBAEA,kCCwLI,WAGF,mHAGE,cAME,4GACE,eI9QR,kDJyRE,sBACE,WACA,YAGF,4BACE,sBI3PJ,wBJgQE,kBACE,iBACA,oBAIA,oCACE,gBACA,eAIJ,+BACE,cAEA,0CACE,eAIJ,wBACE,oBACA,sBAEA,mCACE,gBACA,eAGF,kDACE,aAEA,wDACE,aAKN,kCACE,mBAEA,2BDnPA,2CAIA,uCCoPF,iCACE,SACA,cAIA,+HDtRJ,sBACA,wBC2RI,4CD5RJ,WACA,uBCgSE,8BACE,WAEA,sBACA,MAEA,sCD/QA,6BAIA,yCAJA,gCAIA,4CCiRF,6BACE,SAEA,cDxRA,wCAIA,oCCwRA,yCACE,gBAIJ,kCACE,cAEA,oBAEA,yCACE,YACA,QAEA,MACA,WAME,4GACE,YACA,aIvYV,kDJ+YE,sBACE,WACA,YAGF,4BACE,oBAGF,yGAGE,cKtbS,KLybX,+DAEE,aK3bS,KL8bX,kCACE,qBACA,qBI/ZJ,wBJoaE,uEAEE,cKtcc,KLychB,6BACE,aK1cc,KL6chB,sBACE,aACA,cAGF,4BACE,cAGF,kCACE,UAGF,kCACE,cK3dc,KL4dd,qBAKF,sDD1VE,qBAEA,iCKnGJ,6BJmcQ,weDlWJ,qBAEA,kCA0PF,+BC8FA,+CD1VE,qBAEA,kCKnGJ,yDJmcQ,8bDlWJ,qBAEA","file":"header.css","sourcesContent":["@use \"sass:map\";\n@use \"sass:list\";\n@use \"../variables/colour\";\n@use \"../tools/media\";\n\n@function brand-colour($colour, $opacity: 1) {\n @return colour.brand-colour($colour, $opacity);\n}\n\n@mixin colour-css-vars($excludes...) {\n @each $name, $value in colour.$colour-palette-default {\n @if not list.index($excludes, $name) {\n --#{$name}: #{$value};\n }\n }\n}\n\n@mixin colour-css-vars-dark($excludes...) {\n @each $name, $value in colour.$colour-palette-dark {\n @if not list.index($excludes, $name) {\n --#{$name}: #{$value};\n }\n }\n}\n\n@mixin colour-css-vars-high-contrast($excludes...) {\n @each $name, $value in colour.$colour-palette-high-contrast {\n @if not list.index($excludes, $name) {\n --#{$name}: #{$value};\n }\n }\n}\n\n@mixin colour-css-vars-high-contrast-dark($excludes...) {\n @each $name, $value in colour.$colour-palette-high-contrast-dark {\n @if not list.index($excludes, $name) {\n --#{$name}: #{$value};\n }\n }\n}\n\n@mixin accent-css-vars($colour) {\n @if $colour == \"yellow\" {\n --accent-background: #{brand-colour(\"yellow\")} !important;\n --accent-background-light: #{brand-colour(\"cream\")} !important;\n --accent-font-base: #{brand-colour(\"black\")} !important;\n --accent-font-dark: #{brand-colour(\"black\")} !important;\n --accent-font-light: #{brand-colour(\"black\", 0.7)} !important;\n --accent-icon-light: #{brand-colour(\"black\", 0.45)} !important;\n --accent-link: #{brand-colour(\"black\")} !important;\n --accent-link-visited: #{brand-colour(\"black\")} !important;\n --accent-keyline: #{brand-colour(\"black\", 0.5)} !important;\n --accent-keyline-dark: #{brand-colour(\"black\", 0.8)} !important;\n --button-accent-background: #{brand-colour(\"yellow\")} !important;\n } @else {\n --accent-font-base: #{brand-colour(\"white\")} !important;\n --accent-font-dark: #{brand-colour(\"white\")} !important;\n --accent-font-light: #{brand-colour(\"white\", 0.7)} !important;\n --accent-icon-light: #{brand-colour(\"white\", 0.45)} !important;\n --accent-link: #{brand-colour(\"white\")} !important;\n --accent-link-visited: #{brand-colour(\"white\")} !important;\n --accent-keyline: #{brand-colour(\"white\", 0.5)} !important;\n --accent-keyline-dark: #{brand-colour(\"white\", 0.8)} !important;\n --button-accent-text: #{brand-colour(\"white\")} !important;\n @if $colour == \"pink\" {\n --accent-background: #{brand-colour(\"maroon\")} !important;\n --accent-background-light: #{brand-colour(\"pastel-pink\")} !important;\n --button-accent-background: #{brand-colour(\"maroon\")} !important;\n } @else if $colour == \"orange\" {\n --accent-background: #{brand-colour(\"chestnut\")} !important;\n --accent-background-light: #{brand-colour(\"pastel-orange\")} !important;\n --button-accent-background: #{brand-colour(\"chestnut\")} !important;\n } @else if $colour == \"green\" {\n --accent-background: #{brand-colour(\"forest\")} !important;\n --accent-background-light: #{brand-colour(\"pastel-green\")} !important;\n --button-accent-background: #{brand-colour(\"forest\")} !important;\n } @else if $colour == \"blue\" {\n --accent-background: #{brand-colour(\"navy\")} !important;\n --accent-background-light: #{brand-colour(\"pastel-blue\")} !important;\n --button-accent-background: #{brand-colour(\"navy\")} !important;\n }\n }\n}\n\n@mixin colour-font(\n $colour,\n $important: false,\n $default-palette: colour.$colour-palette-default\n) {\n color: map.get($default-palette, $colour) if($important, !important, null);\n color: var(--#{$colour}) if($important, !important, null);\n}\n\n@mixin colour-background($colour, $important: false) {\n background-color: map.get(colour.$colour-palette-default, $colour)\n if($important, !important, null);\n background-color: var(--#{$colour}) if($important, !important, null);\n}\n\n@mixin colour-background-brand($brandColour, $important: false) {\n background-color: #{brand-colour($brandColour)} if($important, !important, null);\n}\n\n@mixin colour-border(\n $colour,\n $width: \"\",\n $style: solid,\n $direction: \"\",\n $important: false\n) {\n @if $direction != \"\" {\n @if $width != \"\" {\n $property: border-#{$direction};\n border-#{$direction}: $width\n map.get(colour.$colour-palette-default, $colour)\n $style\n if($important, !important, null);\n border-#{$direction}: $width\n var(--#{$colour})\n $style\n if($important, !important, null);\n } @else {\n border-#{$direction}-color: map.get(\n colour.$colour-palette-default,\n $colour\n )\n if($important, !important, null);\n border-#{$direction}-color: var(--#{$colour})\n if($important, !important, null);\n }\n } @else {\n @if $width != \"\" {\n border: $width\n map.get(colour.$colour-palette-default, $colour)\n $style\n if($important, !important, null);\n border: $width var(--#{$colour}) $style if($important, !important, null);\n } @else {\n border-color: map.get(colour.$colour-palette-default, $colour)\n if($important, !important, null);\n border-color: var(--#{$colour}) if($important, !important, null);\n }\n }\n}\n\n@mixin colour-outline($colour, $width: \"\", $style: solid, $important: false) {\n @if $width != \"\" {\n outline: $width\n map.get(colour.$colour-palette-default, $colour)\n $style\n if($important, !important, null);\n outline: $width var(--#{$colour}) $style if($important, !important, null);\n } @else {\n outline-color: map.get(colour.$colour-palette-default, $colour)\n if($important, !important, null);\n outline-color: var(--#{$colour}) if($important, !important, null);\n }\n}\n\n@mixin colour-fill($colour, $important: false) {\n fill: map.get(colour.$colour-palette-default, $colour)\n if($important, !important, null);\n fill: var(--#{$colour}) if($important, !important, null);\n}\n\n@mixin thick-keyline($direction) {\n @include colour-border(\"keyline\", 5px, solid, $direction);\n}\n\n@mixin thick-keyline-dark($direction) {\n @include colour-border(\"keyline-dark\", 5px, solid, $direction);\n}\n\n@mixin thick-keyline-accent($direction) {\n @include colour-border(\"accent-background\", 5px, solid, $direction);\n}\n\n@mixin thick-keyline-error($direction) {\n @include colour-border(\"form-error\", 5px, solid, $direction);\n}\n\n@mixin thick-keyline-brand($direction, $brandColour) {\n border-#{$direction}: 5px #{brand-colour($brandColour)} solid;\n}\n\n%light {\n @include colour-css-vars(\"form-error\");\n\n @media (prefers-contrast: more) {\n @include colour-css-vars-high-contrast(\"form-error\");\n }\n\n .tna-template--high-contrast-theme & {\n @include colour-css-vars-high-contrast(\"form-error\");\n }\n}\n\n@mixin light {\n @extend %light;\n}\n\n%dark {\n @include colour-css-vars-dark(\"form-error\");\n\n @media (prefers-contrast: more) {\n @include colour-css-vars-high-contrast-dark(\"form-error\");\n }\n\n .tna-template--high-contrast-theme & {\n @include colour-css-vars-high-contrast-dark(\"form-error\");\n }\n}\n\n@mixin dark {\n @extend %dark;\n}\n\n%plain {\n .tna-template--system-theme & {\n @extend %light;\n\n @media (prefers-color-scheme: dark) {\n @include colour-css-vars-dark;\n }\n\n @media (prefers-contrast: more) and (prefers-color-scheme: dark) {\n @include colour-css-vars-high-contrast-dark;\n }\n }\n\n .tna-template--light-theme & {\n @include colour-css-vars;\n }\n\n .tna-template--dark-theme & {\n @include colour-css-vars-dark;\n }\n\n .tna-template--high-contrast-theme & {\n @include colour-css-vars-high-contrast;\n }\n\n .tna-template--high-contrast-theme.tna-template--dark-theme & {\n @include colour-css-vars-high-contrast-dark;\n }\n\n --background: var(--page-background);\n}\n\n@mixin plain {\n @extend %plain;\n}\n\n%contrast {\n --background: var(--contrast-background);\n --font-base: var(--contrast-font-base);\n --font-dark: var(--contrast-font-dark);\n --font-light: var(--contrast-font-light);\n --icon-light: var(--contrast-icon-light);\n --link: var(--contrast-link);\n --link-visited: var(--contrast-link-visited);\n --keyline: var(--contrast-keyline);\n --keyline-dark: var(--contrast-keyline-dark);\n --button-text: var(--contrast-button-text);\n --button-background: var(--contrast-button-background);\n --button-hover-text: var(--contrast-button-hover-text);\n --button-hover-background: var(--contrast-button-hover-background);\n\n @include colour-background(\"background\");\n\n @include colour-font(\"font-base\", false, colour.$colour-palette-dark);\n}\n\n@mixin contrast {\n @extend %contrast;\n}\n\n%contrast-on-mobile {\n @include media.on-mobile {\n --background: var(--contrast-background);\n --font-base: var(--contrast-font-base);\n --font-dark: var(--contrast-font-dark);\n --font-light: var(--contrast-font-light);\n --icon-light: var(--contrast-icon-light);\n --link: var(--contrast-link);\n --link-visited: var(--contrast-link-visited);\n --keyline: var(--contrast-keyline);\n --keyline-dark: var(--contrast-keyline-dark);\n --button-text: var(--contrast-button-text);\n --button-background: var(--contrast-button-background);\n --button-hover-text: var(--contrast-button-hover-text);\n --button-hover-background: var(--contrast-button-hover-background);\n\n @include colour-background(\"background\");\n\n @include colour-font(\"font-base\", false, colour.$colour-palette-dark);\n }\n}\n\n@mixin contrast-on-mobile {\n @extend %contrast-on-mobile;\n}\n\n%accent {\n --background: var(--accent-background);\n --font-base: var(--accent-font-base);\n --font-dark: var(--accent-font-dark);\n --font-light: var(--accent-font-light);\n --icon-light: var(--accent-icon-light);\n --link: var(--accent-link);\n --link-visited: var(--accent-link);\n --keyline: var(--accent-keyline);\n --keyline-dark: var(--accent-keyline-dark);\n\n @include colour-background(\"background\");\n\n @include colour-font(\"font-base\", false, colour.$colour-palette-dark);\n}\n\n@mixin accent {\n @extend %accent;\n}\n\n%tint {\n @include colour-background(\"background-tint\");\n @include colour-font(\"font-base\");\n}\n\n@mixin tint {\n @extend %tint;\n}\n\n%accent-background {\n @include colour-background(\"accent-background\");\n}\n\n@mixin accent-background {\n @extend %accent-background;\n}\n\n%accent-light {\n --background: var(--accent-background-light);\n --font-base: #{map.get(colour.$colour-palette-default, \"font-base\")};\n --font-dark: #{map.get(colour.$colour-palette-default, \"font-dark\")};\n --font-light: #{map.get(colour.$colour-palette-default, \"font-light\")};\n --icon-light: #{map.get(colour.$colour-palette-default, \"icon-light\")};\n // --link: #{map.get(colour.$colour-palette-default, \"link\")};\n // --link-visited: #{map.get(colour.$colour-palette-default, \"link-visited\")};\n --keyline: #{map.get(colour.$colour-palette-default, \"keyline\")};\n --keyline-dark: #{map.get(colour.$colour-palette-default, \"keyline-dark\")};\n --button-text: #{map.get(colour.$colour-palette-default, \"button-text\")};\n --button-background: #{map.get(\n colour.$colour-palette-default,\n \"button-background\"\n )};\n --button-hover-text: #{map.get(\n colour.$colour-palette-default,\n \"button-hover-text\"\n )};\n --button-hover-background: #{map.get(\n colour.$colour-palette-default,\n \"button-hover-background\"\n )};\n\n @include colour-background(\"background\");\n @include colour-font(\"font-base\");\n\n .tna-template--system-theme & {\n @media (prefers-color-scheme: dark) {\n --link: #{map.get(colour.$colour-palette-default, \"link\")};\n --link-visited: #{map.get(colour.$colour-palette-default, \"link-visited\")};\n }\n }\n\n .tna-template--dark-theme & {\n --link: #{map.get(colour.$colour-palette-default, \"link\")};\n --link-visited: #{map.get(colour.$colour-palette-default, \"link-visited\")};\n }\n}\n\n@mixin accent-light {\n @extend %accent-light;\n}\n\n@mixin on-high-contrast {\n .tna-template--high-contrast-theme & {\n @content;\n }\n\n .tna-template--system-theme & {\n @media (prefers-contrast: more) {\n @content;\n }\n }\n}\n\n@mixin on-forced-colours {\n @media (forced-colors: active) {\n @content;\n }\n}\n\n@mixin on-high-contrast-and-forced-colours {\n @include on-forced-colours {\n @content;\n }\n\n @include on-high-contrast {\n @content;\n }\n}\n","@use \"sass:math\";\n@use \"../../variables/colour\" as colourVars; // TODO\n@use \"../../variables/grid\" as gridVars;\n@use \"../../tools/colour\";\n@use \"../../tools/typography\";\n@use \"../../tools/media\";\n\n.tna-header {\n @include colour.contrast;\n\n position: relative;\n\n background-color: colour.brand-colour(\"black\");\n\n .tna-template--light-theme & {\n background: linear-gradient(\n 0deg,\n rgb(34 34 34 / 100%) 0%,\n rgb(0 0 0 / 100%) 100%\n );\n }\n\n .tna-template--system-theme {\n @media (prefers-color-scheme: light) {\n background: linear-gradient(\n 0deg,\n rgb(34 34 34 / 100%) 0%,\n rgb(0 0 0 / 100%) 100%\n );\n }\n }\n\n &__exit {\n padding-top: 0.5rem;\n padding-bottom: 0.5rem;\n\n text-align: right;\n\n background-color: colourVars.$dark-grey;\n }\n\n &__exit-link {\n text-decoration: none;\n @include typography.relative-font-size(16);\n\n &,\n &:link,\n &:visited {\n color: #fff;\n }\n\n &:hover {\n text-decoration: underline;\n }\n\n .fa-solid {\n margin-left: 0.5rem;\n }\n }\n\n &__contents {\n &.tna-container {\n justify-content: space-between;\n }\n }\n\n &__logo {\n padding-top: 1.5rem;\n padding-bottom: 1.5rem;\n }\n\n &__logo-link {\n display: flex;\n align-items: flex-end;\n\n color: inherit;\n text-decoration: none;\n\n &,\n &:link,\n &:visited {\n color: inherit;\n }\n\n &:hover:not(:focus) {\n text-decoration: none;\n\n @include colour.colour-outline(\"font-dark\", 0.3125rem, solid);\n outline-offset: 1px;\n }\n }\n\n .tna-logo {\n width: 6rem;\n height: 6rem;\n\n display: inline-block;\n\n flex-shrink: 0;\n }\n\n &__logo-strapline {\n margin: 0 0.75rem;\n\n display: inline-block;\n\n line-height: 2rem;\n @include typography.heading-font;\n @include typography.relative-font-size(20);\n text-transform: uppercase;\n }\n\n &__navigation-toggle {\n display: none;\n\n align-self: center;\n }\n\n &__hamburger {\n width: 2rem;\n height: 0.25rem;\n\n display: block;\n\n @include colour.colour-background(\"font-dark\");\n\n &::before,\n &::after {\n height: 0.25rem;\n\n display: block;\n\n position: absolute;\n right: 0;\n left: 0;\n\n background-color: inherit;\n\n content: \"\";\n }\n\n &::before {\n top: 0;\n }\n\n &::after {\n bottom: 0;\n }\n }\n\n &__navigation-toggle-button {\n height: 2rem;\n padding: 0;\n\n display: block;\n\n position: relative;\n\n appearance: none;\n\n font-size: 0;\n\n background: none;\n\n border: 0 transparent solid;\n border-width: 0.25rem 0;\n\n cursor: pointer;\n\n &--opened {\n .tna-header__hamburger {\n height: 0;\n\n &::before {\n top: 0.625rem;\n\n transform: rotate(-135deg);\n }\n\n &::after {\n bottom: 0.625rem;\n\n transform: rotate(135deg);\n }\n }\n }\n }\n\n &__navigation {\n display: flex;\n flex-direction: column-reverse;\n justify-content: space-between;\n align-items: flex-end;\n\n position: relative;\n z-index: 2;\n }\n\n &__top-navigation-items {\n margin: 0;\n padding: 1.25rem 0;\n\n display: flex;\n justify-content: flex-end;\n gap: 0.5rem 1.5rem;\n\n @include typography.relative-font-size(15);\n list-style: none;\n\n line-height: 1;\n }\n\n &__top-navigation-item {\n display: block;\n }\n\n &__top-navigation-item-link {\n display: flex;\n align-items: center;\n\n text-decoration: none;\n\n &,\n &:link,\n &:visited {\n @include colour.colour-font(\"font-light\");\n }\n\n &:hover,\n &--selected {\n &,\n &:link,\n &:visited {\n @include colour.colour-font(\"font-base\");\n @include typography.interacted-text-decoration;\n }\n }\n\n .fa-solid {\n margin-right: 0.375rem;\n }\n }\n\n &__navigation-items {\n margin: 0;\n padding: 0;\n\n display: flex;\n flex-wrap: nowrap;\n gap: 2rem;\n\n list-style: none;\n\n white-space: nowrap;\n }\n\n &__navigation-item {\n }\n\n &__navigation-item-link {\n padding: 0.5rem 0;\n\n display: inline-block;\n\n position: relative;\n\n @include typography.main-font-weight-bold;\n text-decoration: none;\n line-height: 2;\n\n &::after {\n height: 0;\n\n position: absolute;\n right: 0;\n bottom: 0;\n left: 0;\n\n @include colour.colour-background(\"font-dark\");\n\n content: \"\";\n }\n\n &,\n &:link,\n &:visited {\n color: inherit;\n }\n\n &--selected {\n &,\n &:hover {\n &::after {\n height: 0.375rem;\n }\n }\n }\n }\n\n &--accent {\n @include colour.accent;\n }\n\n @include media.on-medium {\n .tna-logo {\n width: 5rem;\n height: 5rem;\n }\n\n &__logo-strapline {\n line-height: 1.625rem;\n }\n }\n\n @include media.on-mobile {\n &__logo {\n padding-top: 1rem;\n padding-bottom: 1rem;\n }\n\n &__contents {\n &.tna-container {\n padding-right: 0;\n padding-left: 0;\n }\n }\n\n &__navigation-toggle {\n display: block;\n\n &.tna-column {\n padding-left: 0;\n }\n }\n\n &__navigation {\n align-items: stretch;\n flex-direction: column;\n\n &.tna-column {\n padding-right: 0;\n padding-left: 0;\n }\n\n .tna-template--js-enabled & {\n display: none;\n\n &--open {\n display: flex;\n }\n }\n }\n\n &__top-navigation-items {\n padding: 0.5rem 1rem;\n\n justify-content: flex-start;\n\n @include colour.colour-border(\"keyline\", 1px, solid, bottom);\n }\n\n &__top-navigation-item {\n margin: 0;\n padding: 0.5rem;\n }\n\n &__top-navigation-item-link {\n &,\n &:link,\n &:visited {\n @include colour.colour-font(\"font-light\");\n }\n\n &:hover {\n @include colour.colour-font(\"font-dark\");\n }\n }\n\n &__navigation-items {\n width: 100%;\n\n flex-direction: column;\n gap: 0;\n\n background-color: rgb(255 255 255 / 10%);\n\n @include colour.colour-border(\"keyline-dark\", 2px, solid, top);\n @include colour.colour-border(\"keyline-dark\", 2px, solid, bottom);\n }\n\n &__navigation-item {\n margin: 0;\n\n display: block;\n\n @include colour.colour-border(\"keyline\", 1px, solid, top);\n\n &:first-child {\n border-top: none;\n }\n }\n\n &__navigation-item-link {\n display: block;\n\n line-height: 1.75rem;\n\n &::after {\n height: auto;\n width: 0;\n\n top: 0;\n right: auto;\n }\n\n &--selected {\n &,\n &:hover {\n &::after {\n height: auto;\n width: 0.5rem;\n }\n }\n }\n }\n }\n\n @include media.on-small {\n .tna-logo {\n width: 4rem;\n height: 4rem;\n }\n\n &__logo-strapline {\n line-height: 1.25rem;\n }\n\n &__logo.tna-column,\n &__navigation-item-link,\n &__navigation-toggle.tna-column {\n padding-right: gridVars.$gutter-width;\n }\n\n &__logo.tna-column,\n &__navigation-item-link {\n padding-left: gridVars.$gutter-width;\n }\n\n &__top-navigation-items {\n padding-right: gridVars.$gutter-width - 0.5rem;\n padding-left: gridVars.$gutter-width - 0.5rem;\n }\n }\n\n @include media.on-tiny {\n &__navigation-toggle.tna-column,\n &__logo.tna-column {\n padding-right: gridVars.$gutter-width-tiny;\n }\n\n &__logo.tna-column {\n padding-left: gridVars.$gutter-width-tiny;\n }\n\n .tna-logo {\n width: 3.5rem;\n height: 3.5rem;\n }\n\n &__logo-strapline {\n line-height: 1;\n }\n\n &__top-navigation-items {\n gap: 0.5rem;\n }\n\n &__navigation-item-link {\n padding-right: gridVars.$gutter-width-tiny;\n padding-left: gridVars.$gutter-width-tiny + 0.5rem;\n }\n }\n\n @include colour.on-high-contrast {\n &::after {\n @include colour.colour-border(\"keyline-dark\");\n }\n\n @include media.on-larger-than-mobile {\n &__navigation-item-link {\n &:hover,\n &--selected {\n &,\n &:link,\n &:visited {\n @include colour.colour-border(\"keyline-dark\");\n }\n }\n }\n }\n }\n}\n","@use \"sass:map\";\n\n$colour-palette-brand: (\n \"black\": #000,\n \"grey\": #8c9694,\n \"light-grey\": #d9d9d6,\n \"white\": #fff,\n\n \"yellow\": #fc0,\n \"pink\": #fe1d57,\n \"orange\": #fd3f03,\n \"green\": #86bc25,\n \"blue\": #00b0ff,\n\n \"brown\": #654e37,\n \"maroon\": #9c193a,\n \"chestnut\": #8f3415,\n \"forest\": #00623b,\n \"navy\": #004c7e,\n\n \"cream\": #f9f7e2,\n \"pastel-pink\": #fad3d4,\n \"pastel-orange\": #f9e1bc,\n \"pastel-green\": #dde5d5,\n \"pastel-blue\": #d4e5ef,\n);\n\n@function hex-to-rgb($hex, $opacity: 1) {\n @if $opacity == 1 {\n @return rgb(red($hex) green($hex) blue($hex));\n } @else {\n @return rgb(red($hex) green($hex) blue($hex) / #{$opacity});\n }\n}\n\n@function brand-colour($colour, $opacity: 1) {\n @return hex-to-rgb(map.get($colour-palette-brand, $colour), $opacity);\n}\n\n$dark-grey: #26262a;\n$base-font: #343338 !default;\n$link-colour: #0062a8 !default;\n$link-colour-visited: #4c2c92 !default;\n\n/\n=========================================\nLIGHT THEME (DEFAULT)\n=========================================\n/\n$colour-palette-default: (\n \"page-background\": #f4f4f4,\n \"background-tint\": #e4e4e4,\n \"font-base\": $base-font,\n \"font-dark\": brand-colour(\"black\"),\n \"font-light\": brand-colour(\"black\", 0.58),\n \"icon-light\": hex-to-rgb($base-font, 0.45),\n \"link\": $link-colour,\n \"link-visited\": $link-colour-visited,\n \"focus-outline\": brand-colour(\"blue\"),\n \"keyline\": hex-to-rgb($dark-grey, 0.25),\n \"keyline-dark\": $dark-grey,\n \"input-foreground\": brand-colour(\"black\"),\n \"input-background\": brand-colour(\"white\"),\n \"input-border\": brand-colour(\"black\"),\n \"form-error\": #c00,\n \"button-text\": brand-colour(\"white\"),\n \"button-background\": brand-colour(\"black\"),\n \"button-hover-text\": brand-colour(\"black\"),\n \"button-hover-background\": brand-colour(\"white\"),\n \"contrast-background\": #1e1e1e,\n \"contrast-font-base\": brand-colour(\"white\"),\n \"contrast-font-dark\": brand-colour(\"white\"),\n \"contrast-font-light\": brand-colour(\"white\", 0.7),\n \"contrast-icon-light\": brand-colour(\"white\", 0.45),\n \"contrast-link\": brand-colour(\"white\"),\n \"contrast-link-visited\": brand-colour(\"white\"),\n \"contrast-keyline\": brand-colour(\"white\", 0.5),\n \"contrast-keyline-dark\": brand-colour(\"white\", 0.8),\n \"contrast-button-text\": brand-colour(\"black\"),\n \"contrast-button-background\": brand-colour(\"white\"),\n \"contrast-button-hover-text\": brand-colour(\"white\"),\n \"contrast-button-hover-background\": brand-colour(\"black\"),\n \"accent-background\": #111,\n \"accent-background-light\": #ededed,\n \"accent-font-base\": brand-colour(\"white\"),\n \"accent-font-dark\": brand-colour(\"white\"),\n \"accent-font-light\": brand-colour(\"white\", 0.7),\n \"accent-icon-light\": brand-colour(\"white\", 0.45),\n \"accent-link\": brand-colour(\"white\"),\n \"accent-link-visited\": #b9f,\n \"accent-keyline\": brand-colour(\"white\", 0.5),\n \"accent-keyline-dark\": brand-colour(\"white\", 0.8),\n \"button-accent-text\": brand-colour(\"black\"),\n \"button-accent-background\": brand-colour(\"grey\"),\n) !default;\n\n/\n=========================================\nDARK THEME\n=========================================\n/\n$colour-palette-dark: map.merge(\n $colour-palette-default,\n (\n \"page-background\": #222,\n \"background-tint\": #333,\n \"font-base\": brand-colour(\"white\", 0.95),\n \"font-dark\": brand-colour(\"white\"),\n \"font-light\": brand-colour(\"white\", 0.51),\n \"icon-light\": brand-colour(\"white\", 0.35),\n \"link\": brand-colour(\"blue\"),\n \"link-visited\": #a8f,\n \"focus-outline\": brand-colour(\"orange\"),\n \"keyline\": brand-colour(\"white\", 0.25),\n \"keyline-dark\": brand-colour(\"white\"),\n \"input-foreground\": brand-colour(\"white\"),\n \"input-background\": brand-colour(\"black\"),\n \"input-border\": brand-colour(\"white\"),\n \"form-error\": #ff3d3d,\n \"button-text\": brand-colour(\"black\"),\n \"button-background\": brand-colour(\"white\"),\n \"button-hover-text\": brand-colour(\"white\"),\n \"button-hover-background\": brand-colour(\"black\"),\n \"contrast-background\": #111,\n \"contrast-link-visited\":\n map.get($colour-palette-default, \"contrast-link-visited\"),\n )\n) !default;\n\n/\n=========================================\nLIGHT, HIGH_CONTRAST THEME\n=========================================\n/\n$colour-palette-high-contrast: map.merge(\n $colour-palette-default,\n (\n \"page-background\": brand-colour(\"white\"),\n \"font-base\": brand-colour(\"black\"),\n \"font-light\": brand-colour(\"black\"),\n \"icon-light\": brand-colour(\"black\", 0.75),\n \"link\": #34d,\n \"link-visited\": #848,\n \"focus-outline\": brand-colour(\"orange\"),\n \"keyline\": brand-colour(\"black\"),\n \"keyline-dark\": brand-colour(\"black\"),\n \"contrast-background\": #f4f4f4,\n \"contrast-font-base\": brand-colour(\"black\"),\n \"contrast-font-dark\": brand-colour(\"black\"),\n \"contrast-font-light\": brand-colour(\"black\"),\n \"contrast-link\": #34d,\n \"contrast-link-visited\": #848,\n \"contrast-keyline\": brand-colour(\"black\"),\n \"contrast-keyline-dark\": brand-colour(\"black\"),\n \"contrast-button-text\": brand-colour(\"white\"),\n \"contrast-button-background\": brand-colour(\"black\"),\n \"contrast-button-hover-text\": brand-colour(\"black\"),\n \"contrast-button-hover-background\": brand-colour(\"white\"),\n )\n) !default;\n\n/\n=========================================\nDARK, HIGH_CONTRAST THEME\n=========================================\n/\n$colour-palette-high-contrast-dark: map.merge(\n $colour-palette-dark,\n (\n \"page-background\": #111,\n \"font-base\": brand-colour(\"white\"),\n \"font-light\": brand-colour(\"white\"),\n \"icon-light\": brand-colour(\"white\", 0.75),\n \"keyline\": brand-colour(\"white\"),\n \"form-error\": #ff6161,\n \"contrast-background\": brand-colour(\"black\"),\n )\n) !default;\n","@use \"sass:math\";\n@use \"colour\";\n@use \"../variables/typography\";\n\n@mixin relative-font-size($fontSizePx) {\n font-size: #{math.div($fontSizePx, typography.$relative-1rem-px)}rem;\n}\n\n@mixin main-font-weight {\n font-weight: typography.$main-font-weight;\n}\n\n@mixin main-font-weight-bold {\n font-weight: typography.$main-font-weight-bold;\n}\n\n@mixin main-font($bold: false) {\n font-family: typography.$main-font-family;\n @if $bold {\n @include main-font-weight-bold;\n } @else {\n @include main-font-weight;\n }\n font-optical-sizing: auto;\n font-style: normal;\n font-variation-settings: \"wdth\" 100;\n}\n\n@mixin heading-font {\n font-family: typography.$heading-font-family;\n font-weight: typography.$heading-font-weight;\n}\n\n@mixin detail-font($bold: false) {\n font-family: typography.$detail-font-family;\n @if $bold {\n font-weight: typography.$detail-font-weight-bold;\n } @else {\n font-weight: typography.$detail-font-weight;\n }\n font-optical-sizing: auto;\n font-style: normal;\n}\n\n@mixin detail-font-small {\n @include detail-font;\n @include relative-font-size(14);\n text-transform: uppercase;\n line-height: #{math.div(typography.$relative-1rem-px, 14)};\n}\n\n@mixin interacted-text-decoration {\n text-decoration: underline;\n text-decoration-thickness: typography.$interactive-text-decoration-thickness;\n}\n","@use \"sass:math\";\n\n$use-local-fonts: false !default;\n\n$relative-1rem-px: 16; // 16px is always 1rem\n\n$body-font-size-px: 18 !default;\n$body-font-size-px-mobile: 17 !default;\n$body-line-height: #{math.div($relative-1rem-px, $body-font-size-px) * 2} !default; // 1.77777\n\n$interactive-text-decoration-thickness: 3.5px !default;\n\n$main-font: \"Open Sans\" !default;\n$main-font-family: $main-font, sans-serif !default;\n$main-font-weight: 400 !default;\n$main-font-weight-bold: 700 !default;\n\n$heading-font-family: supria-sans-condensed, \"Arial Narrow\", sans-serif !default;\n$heading-font-weight: 500 !default;\n\n$detail-font-family: \"Roboto Mono\", monospace !default;\n$detail-font-weight: 400 !default;\n$detail-font-weight-bold: 500 !default;\n","@use \"../variables/media\";\n\n// 0 ======= 320 = 480 ===== 768 == 1024 ========================== min-width/max-width (px)\n// \| . \| \| \|\n// \|-TINY----------\|-SMALL---\|-MED--\|-LARGE------------------------\n// \| . \| \| \|\n// \|<------------->\| \| \| on-tiny\n// \|<----------------------->\| \| on-mobile\n// \|<------------------------------>\| on-smaller-than-large\n// \| . \|<------->\| \| on-small\n// \| . \|<------------------------- on-larger-than-tiny\n// \| . \| \|<---->\| on-medium\n// \| . \| \|<--------------- on-larger-than-mobile\n// \| . \| \| \|<-------- on-large\n// \|<------->. \| \| \| Smallest device\n\n@mixin on-large() {\n @media #{media.$media-large} {\n @content;\n }\n}\n\n@mixin on-medium() {\n @media #{media.$media-medium} {\n @content;\n }\n}\n\n@mixin on-small() {\n @media #{media.$media-small} {\n @content;\n }\n}\n\n@mixin on-tiny() {\n @media #{media.$media-tiny} {\n @content;\n }\n}\n\n@mixin on-larger-than-mobile() {\n @media #{media.$media-gt-mobile} {\n @content;\n }\n}\n\n@mixin on-larger-than-tiny() {\n @media #{media.$media-gt-tiny} {\n @content;\n }\n}\n\n@mixin on-smaller-than-large() {\n @media #{media.$media-lt-large} {\n @content;\n }\n}\n\n@mixin on-mobile() {\n @media #{media.$media-mobile} {\n @content;\n }\n}\n\n@mixin on-print() {\n @media print {\n @content;\n }\n}\n","$largest-container-width: 80rem !default;\n\n$gutter-width: 2rem !default;\n$gutter-width-tiny: 1rem !default;\n\n$column-count: 12;\n$column-count-medium: 6;\n$column-count-small: 4;\n$column-count-tiny: 2;\n"]}
1	+ {"version":3,"sourceRoot":"","sources":["../../../../src/nationalarchives/tools/_colour.scss","../../../../src/nationalarchives/components/header/header.scss","../../../../src/nationalarchives/tools/_typography.scss","../../../../src/nationalarchives/variables/_typography.scss","../../../../src/nationalarchives/tools/_media.scss"],"names":[],"mappings":"AAkNA,YACE,yCACA,uCACA,uCACA,yCACA,yCACA,6BACA,6CACA,mCACA,6CACA,2CACA,uDACA,uDACA,mEA1KA,mCAPA,4BACA,uBAqNF,oBACE,uCACA,qCACA,qCACA,uCACA,uCACA,2BACA,mCACA,iCACA,2CAxNA,mCAPA,4BACA,uBCvCF,YAGE,kBAEA,yBAEA,uCACE,wEAQA,oCADF,wCAEI,yEAQJ,kBACE,gBACA,mBAEA,iBAEA,yBAGF,uBACE,qBCrCF,eDwCE,kFAGE,WAGF,6BACE,0BAGF,iCACE,gBAKF,oCACE,8BAIJ,kBACE,iBACA,oBAGF,uBACE,aACA,qBAEA,cACA,qBAEA,kFAGE,cAGF,yCACE,qBDkBF,+BAIA,wCCnBE,mBAIJ,sBACE,WACA,YAEA,qBAEA,cAGF,4BACE,cAEA,qBAEA,iBCzEF,YClBoB,gDDmBpB,YClBoB,IDXpB,kBDwGE,yBAGF,+BACE,aAEA,kBAGF,uBACE,WACA,cAEA,cDxEF,yBAEA,kCC0EE,6DAEE,cAEA,cAEA,kBACA,QACA,OAEA,yBAEA,WAGF,+BACE,MAGF,8BACE,SAIJ,sCACE,YACA,UAEA,cAEA,kBAEA,gBAEA,YAEA,gBAEA,6BACA,sBAEA,eAGE,qEACE,SAEA,6EACE,YAEA,0BAGF,4EACE,eAEA,yBAMR,wBACE,aACA,8BACA,8BACA,qBAEA,kBACA,UAGF,kCACE,SACA,eAEA,aACA,yBACA,aCvMF,oBD0ME,gBAEA,cAGF,iCACE,cAGF,sCACE,aACA,mBAEA,qBAEA,+HDjLF,sBACA,wBCwLI,8SDzLJ,cACA,uBEUA,0BACA,0BClDsC,MFuOpC,gDACE,iBAIJ,8BACE,SACA,UAEA,aACA,iBACA,SAEA,gBAEA,mBAMF,kCACE,cAEA,qBAEA,kBC3PF,YCDwB,IF+PtB,qBACA,cAEA,yCACE,SAEA,kBACA,QACA,SACA,ODlOJ,yBAEA,kCCoOI,WAGF,mHAGE,cAME,4GACE,eGxPR,kDHmQE,sBACE,WACA,YAGF,4BACE,sBGrOJ,wBH0OE,kBACE,iBACA,oBAIA,oCACE,gBACA,eAIJ,+BACE,cAEA,0CACE,eAIJ,wBACE,oBACA,sBAEA,mCACE,gBACA,eAGF,kDACE,aAEA,wDACE,aAKN,kCACE,iBAEA,2BD/RA,2CAIA,uCCgSF,iCACE,SACA,YAIA,+HDlUJ,sBACA,wBCuUI,4CDxUJ,cACA,uBC4UE,8BACE,WAEA,sBACA,MAEA,sCD3TA,6BAIA,yCAJA,gCAIA,4CC6TF,6BACE,SAEA,cDpUA,wCAIA,oCCoUA,yCACE,gBAIJ,kCACE,cAEA,oBAEA,yCACE,YACA,QAEA,MACA,WAME,4GACE,YACA,aGjXV,kDHyXE,sBACE,WACA,YAGF,4BACE,oBAGF,yGAGE,mBAGF,+DAEE,kBAGF,kCACE,iCACA,iCGzYJ,wBH8YE,uEAEE,mBAGF,6BACE,kBAGF,sBACE,aACA,cAGF,4BACE,cAGF,kCACE,UAGF,kCACE,mBACA","file":"header.css","sourcesContent":["@use \"sass:map\";\n@use \"sass:list\";\n@use \"../variables/colour\";\n@use \"../tools/media\";\n\n@function brand-colour($colour, $opacity: 1) {\n @return colour.brand-colour($colour, $opacity);\n}\n\n@mixin colour-css-vars($excludes...) {\n @each $name, $value in colour.$colour-palette-default {\n @if not list.index($excludes, $name) {\n --#{$name}: #{$value};\n }\n }\n}\n\n@mixin colour-css-vars-dark($excludes...) {\n @each $name, $value in colour.$colour-palette-dark {\n @if not list.index($excludes, $name) {\n --#{$name}: #{$value};\n }\n }\n}\n\n@mixin colour-css-vars-high-contrast($excludes...) {\n @each $name, $value in colour.$colour-palette-high-contrast {\n @if not list.index($excludes, $name) {\n --#{$name}: #{$value};\n }\n }\n}\n\n@mixin colour-css-vars-high-contrast-dark($excludes...) {\n @each $name, $value in colour.$colour-palette-high-contrast-dark {\n @if not list.index($excludes, $name) {\n --#{$name}: #{$value};\n }\n }\n}\n\n@mixin colour-font(\n $colour,\n $important: false,\n $default-palette: colour.$colour-palette-default\n) {\n color: map.get($default-palette, $colour) if($important, !important, null);\n color: var(--#{$colour}) if($important, !important, null);\n}\n\n@mixin colour-background($colour, $important: false) {\n background-color: map.get(colour.$colour-palette-default, $colour)\n if($important, !important, null);\n background-color: var(--#{$colour}) if($important, !important, null);\n}\n\n@mixin colour-background-brand($brandColour, $important: false) {\n background-color: #{brand-colour($brandColour)} if($important, !important, null);\n}\n\n@mixin colour-border(\n $colour,\n $width: \"\",\n $style: solid,\n $direction: \"\",\n $important: false\n) {\n @if $direction != \"\" {\n @if $width != \"\" {\n $property: border-#{$direction};\n border-#{$direction}: $width\n map.get(colour.$colour-palette-default, $colour)\n $style\n if($important, !important, null);\n border-#{$direction}: $width\n var(--#{$colour})\n $style\n if($important, !important, null);\n } @else {\n border-#{$direction}-color: map.get(\n colour.$colour-palette-default,\n $colour\n )\n if($important, !important, null);\n border-#{$direction}-color: var(--#{$colour})\n if($important, !important, null);\n }\n } @else {\n @if $width != \"\" {\n border: $width\n map.get(colour.$colour-palette-default, $colour)\n $style\n if($important, !important, null);\n border: $width var(--#{$colour}) $style if($important, !important, null);\n } @else {\n border-color: map.get(colour.$colour-palette-default, $colour)\n if($important, !important, null);\n border-color: var(--#{$colour}) if($important, !important, null);\n }\n }\n}\n\n@mixin colour-outline($colour, $width: \"\", $style: solid, $important: false) {\n @if $width != \"\" {\n outline: $width\n map.get(colour.$colour-palette-default, $colour)\n $style\n if($important, !important, null);\n outline: $width var(--#{$colour}) $style if($important, !important, null);\n } @else {\n outline-color: map.get(colour.$colour-palette-default, $colour)\n if($important, !important, null);\n outline-color: var(--#{$colour}) if($important, !important, null);\n }\n}\n\n@mixin colour-fill($colour, $important: false) {\n fill: map.get(colour.$colour-palette-default, $colour)\n if($important, !important, null);\n fill: var(--#{$colour}) if($important, !important, null);\n}\n\n@mixin thick-keyline($direction) {\n @include colour-border(\"keyline\", 5px, solid, $direction);\n}\n\n@mixin thick-keyline-dark($direction) {\n @include colour-border(\"keyline-dark\", 5px, solid, $direction);\n}\n\n@mixin thick-keyline-accent($direction) {\n @include colour-border(\"accent-background\", 5px, solid, $direction);\n}\n\n@mixin thick-keyline-error($direction) {\n @include colour-border(\"form-error\", 5px, solid, $direction);\n}\n\n@mixin thick-keyline-brand($direction, $brandColour) {\n border-#{$direction}: 5px #{brand-colour($brandColour)} solid;\n}\n\n%light {\n @include colour-css-vars(\"form-error\");\n\n @media (prefers-contrast: more) {\n @include colour-css-vars-high-contrast(\"form-error\");\n }\n\n .tna-template--high-contrast-theme & {\n @include colour-css-vars-high-contrast(\"form-error\");\n }\n}\n\n@mixin light {\n @extend %light;\n}\n\n%dark {\n @include colour-css-vars-dark(\"form-error\");\n\n @media (prefers-contrast: more) {\n @include colour-css-vars-high-contrast-dark(\"form-error\");\n }\n\n .tna-template--high-contrast-theme & {\n @include colour-css-vars-high-contrast-dark(\"form-error\");\n }\n}\n\n@mixin dark {\n @extend %dark;\n}\n\n%plain {\n .tna-template--system-theme & {\n @extend %light;\n\n @media (prefers-color-scheme: dark) {\n @include colour-css-vars-dark;\n }\n\n @media (prefers-contrast: more) and (prefers-color-scheme: dark) {\n @include colour-css-vars-high-contrast-dark;\n }\n }\n\n .tna-template--light-theme & {\n @include colour-css-vars;\n }\n\n .tna-template--dark-theme & {\n @include colour-css-vars-dark;\n }\n\n .tna-template--high-contrast-theme & {\n @include colour-css-vars-high-contrast;\n }\n\n .tna-template--high-contrast-theme.tna-template--dark-theme & {\n @include colour-css-vars-high-contrast-dark;\n }\n\n --background: var(--page-background);\n}\n\n@mixin plain {\n @extend %plain;\n}\n\n%contrast {\n --background: var(--contrast-background);\n --font-base: var(--contrast-font-base);\n --font-dark: var(--contrast-font-dark);\n --font-light: var(--contrast-font-light);\n --icon-light: var(--contrast-icon-light);\n --link: var(--contrast-link);\n --link-visited: var(--contrast-link-visited);\n --keyline: var(--contrast-keyline);\n --keyline-dark: var(--contrast-keyline-dark);\n --button-text: var(--contrast-button-text);\n --button-background: var(--contrast-button-background);\n --button-hover-text: var(--contrast-button-hover-text);\n --button-hover-background: var(--contrast-button-hover-background);\n\n @include colour-background(\"background\");\n\n @include colour-font(\"font-base\", false, colour.$colour-palette-dark);\n}\n\n@mixin contrast {\n @extend %contrast;\n}\n\n%contrast-on-mobile {\n @include media.on-mobile {\n --background: var(--contrast-background);\n --font-base: var(--contrast-font-base);\n --font-dark: var(--contrast-font-dark);\n --font-light: var(--contrast-font-light);\n --icon-light: var(--contrast-icon-light);\n --link: var(--contrast-link);\n --link-visited: var(--contrast-link-visited);\n --keyline: var(--contrast-keyline);\n --keyline-dark: var(--contrast-keyline-dark);\n --button-text: var(--contrast-button-text);\n --button-background: var(--contrast-button-background);\n --button-hover-text: var(--contrast-button-hover-text);\n --button-hover-background: var(--contrast-button-hover-background);\n\n @include colour-background(\"background\");\n\n @include colour-font(\"font-base\", false, colour.$colour-palette-dark);\n }\n}\n\n@mixin contrast-on-mobile {\n @extend %contrast-on-mobile;\n}\n\n%accent {\n --background: var(--accent-background);\n --font-base: var(--accent-font-base);\n --font-dark: var(--accent-font-dark);\n --font-light: var(--accent-font-light);\n --icon-light: var(--accent-icon-light);\n --link: var(--accent-link);\n --link-visited: var(--accent-link);\n --keyline: var(--accent-keyline);\n --keyline-dark: var(--accent-keyline-dark);\n\n @include colour-background(\"background\");\n\n @include colour-font(\"font-base\", false, colour.$colour-palette-dark);\n}\n\n@mixin accent {\n @extend %accent;\n}\n\n%tint {\n @include colour-background(\"background-tint\");\n @include colour-font(\"font-base\");\n}\n\n@mixin tint {\n @extend %tint;\n}\n\n%accent-background {\n @include colour-background(\"accent-background\");\n}\n\n@mixin accent-background {\n @extend %accent-background;\n}\n\n%accent-light {\n --background: var(--accent-background-light);\n --font-base: #{map.get(colour.$colour-palette-default, \"font-base\")};\n --font-dark: #{map.get(colour.$colour-palette-default, \"font-dark\")};\n --font-light: #{map.get(colour.$colour-palette-default, \"font-light\")};\n --icon-light: #{map.get(colour.$colour-palette-default, \"icon-light\")};\n // --link: #{map.get(colour.$colour-palette-default, \"link\")};\n // --link-visited: #{map.get(colour.$colour-palette-default, \"link-visited\")};\n --keyline: #{map.get(colour.$colour-palette-default, \"keyline\")};\n --keyline-dark: #{map.get(colour.$colour-palette-default, \"keyline-dark\")};\n --button-text: #{map.get(colour.$colour-palette-default, \"button-text\")};\n --button-background: #{map.get(\n colour.$colour-palette-default,\n \"button-background\"\n )};\n --button-hover-text: #{map.get(\n colour.$colour-palette-default,\n \"button-hover-text\"\n )};\n --button-hover-background: #{map.get(\n colour.$colour-palette-default,\n \"button-hover-background\"\n )};\n\n @include colour-background(\"background\");\n @include colour-font(\"font-base\");\n\n .tna-template--system-theme & {\n @media (prefers-color-scheme: dark) {\n --link: #{map.get(colour.$colour-palette-default, \"link\")};\n --link-visited: #{map.get(colour.$colour-palette-default, \"link-visited\")};\n }\n }\n\n .tna-template--dark-theme & {\n --link: #{map.get(colour.$colour-palette-default, \"link\")};\n --link-visited: #{map.get(colour.$colour-palette-default, \"link-visited\")};\n }\n}\n\n@mixin accent-light {\n @extend %accent-light;\n}\n\n@mixin on-high-contrast {\n .tna-template--high-contrast-theme & {\n @content;\n }\n\n .tna-template--system-theme & {\n @media (prefers-contrast: more) {\n @content;\n }\n }\n}\n\n@mixin on-forced-colours {\n @media (forced-colors: active) {\n @content;\n }\n}\n\n@mixin on-high-contrast-and-forced-colours {\n @include on-forced-colours {\n @content;\n }\n\n @include on-high-contrast {\n @content;\n }\n}\n","@use \"sass:math\";\n@use \"../../variables/colour\" as colourVars; // TODO\n@use \"../../tools/colour\";\n@use \"../../tools/grid\";\n@use \"../../tools/media\";\n@use \"../../tools/spacing\";\n@use \"../../tools/typography\";\n\n.tna-header {\n @include colour.contrast;\n\n position: relative;\n\n background-color: colour.brand-colour(\"black\");\n\n .tna-template--light-theme & {\n background: linear-gradient(\n 0deg,\n rgb(34 34 34 / 100%) 0%,\n rgb(0 0 0 / 100%) 100%\n );\n }\n\n .tna-template--system-theme & {\n @media (prefers-color-scheme: light) {\n background: linear-gradient(\n 0deg,\n rgb(34 34 34 / 100%) 0%,\n rgb(0 0 0 / 100%) 100%\n );\n }\n }\n\n &__exit {\n padding-top: spacing.space(0.5);\n padding-bottom: spacing.space(0.5);\n\n text-align: right;\n\n background-color: colourVars.$dark-grey;\n }\n\n &__exit-link {\n text-decoration: none;\n @include typography.relative-font-size(16);\n\n &,\n &:link,\n &:visited {\n color: #fff;\n }\n\n &:hover {\n text-decoration: underline;\n }\n\n .fa-solid {\n margin-left: spacing.space(0.5);\n }\n }\n\n &__contents {\n &.tna-container {\n justify-content: space-between;\n }\n }\n\n &__logo {\n padding-top: spacing.space(1.5);\n padding-bottom: spacing.space(1.5);\n }\n\n &__logo-link {\n display: flex;\n align-items: flex-end;\n\n color: inherit;\n text-decoration: none;\n\n &,\n &:link,\n &:visited {\n color: inherit;\n }\n\n &:hover:not(:focus) {\n text-decoration: none;\n\n @include colour.colour-outline(\"font-dark\", 0.3125rem, solid);\n outline-offset: 1px;\n }\n }\n\n .tna-logo {\n width: 6rem;\n height: 6rem;\n\n display: inline-block;\n\n flex-shrink: 0;\n }\n\n &__logo-strapline {\n margin: 0 spacing.space(0.75);\n\n display: inline-block;\n\n line-height: 2rem;\n @include typography.heading-font;\n @include typography.relative-font-size(20);\n text-transform: uppercase;\n }\n\n &__navigation-toggle {\n display: none;\n\n align-self: center;\n }\n\n &__hamburger {\n width: 2rem;\n height: 0.25rem;\n\n display: block;\n\n @include colour.colour-background(\"font-dark\");\n\n &::before,\n &::after {\n height: 0.25rem;\n\n display: block;\n\n position: absolute;\n right: 0;\n left: 0;\n\n background-color: inherit;\n\n content: \"\";\n }\n\n &::before {\n top: 0;\n }\n\n &::after {\n bottom: 0;\n }\n }\n\n &__navigation-toggle-button {\n height: 2rem;\n padding: 0;\n\n display: block;\n\n position: relative;\n\n appearance: none;\n\n font-size: 0;\n\n background: none;\n\n border: 0 transparent solid;\n border-width: 0.25rem 0;\n\n cursor: pointer;\n\n &--opened {\n .tna-header__hamburger {\n height: 0;\n\n &::before {\n top: 0.625rem;\n\n transform: rotate(-135deg);\n }\n\n &::after {\n bottom: 0.625rem;\n\n transform: rotate(135deg);\n }\n }\n }\n }\n\n &__navigation {\n display: flex;\n flex-direction: column-reverse;\n justify-content: space-between;\n align-items: flex-end;\n\n position: relative;\n z-index: 2;\n }\n\n &__top-navigation-items {\n margin: 0;\n padding: spacing.space(1.25) 0;\n\n display: flex;\n justify-content: flex-end;\n gap: spacing.space(0.5) spacing.space(1.5);\n\n @include typography.relative-font-size(15);\n list-style: none;\n\n line-height: 1;\n }\n\n &__top-navigation-item {\n display: block;\n }\n\n &__top-navigation-item-link {\n display: flex;\n align-items: center;\n\n text-decoration: none;\n\n &,\n &:link,\n &:visited {\n @include colour.colour-font(\"font-light\");\n }\n\n &:hover,\n &--selected {\n &,\n &:link,\n &:visited {\n @include colour.colour-font(\"font-base\");\n @include typography.interacted-text-decoration;\n }\n }\n\n .fa-solid {\n margin-right: spacing.space(0.375);\n }\n }\n\n &__navigation-items {\n margin: 0;\n padding: 0;\n\n display: flex;\n flex-wrap: nowrap;\n gap: spacing.space(2);\n\n list-style: none;\n\n white-space: nowrap;\n }\n\n &__navigation-item {\n }\n\n &__navigation-item-link {\n padding: spacing.space(0.5) 0;\n\n display: inline-block;\n\n position: relative;\n\n @include typography.main-font-weight-medium;\n text-decoration: none;\n line-height: 2;\n\n &::after {\n height: 0;\n\n position: absolute;\n right: 0;\n bottom: 0;\n left: 0;\n\n @include colour.colour-background(\"font-dark\");\n\n content: \"\";\n }\n\n &,\n &:link,\n &:visited {\n color: inherit;\n }\n\n &--selected {\n &,\n &:hover {\n &::after {\n height: 0.375rem;\n }\n }\n }\n }\n\n &--accent {\n @include colour.accent;\n }\n\n @include media.on-medium {\n .tna-logo {\n width: 5rem;\n height: 5rem;\n }\n\n &__logo-strapline {\n line-height: 1.625rem;\n }\n }\n\n @include media.on-mobile {\n &__logo {\n padding-top: spacing.space(1);\n padding-bottom: spacing.space(1);\n }\n\n &__contents {\n &.tna-container {\n padding-right: 0;\n padding-left: 0;\n }\n }\n\n &__navigation-toggle {\n display: block;\n\n &.tna-column {\n padding-left: 0;\n }\n }\n\n &__navigation {\n align-items: stretch;\n flex-direction: column;\n\n &.tna-column {\n padding-right: 0;\n padding-left: 0;\n }\n\n .tna-template--js-enabled & {\n display: none;\n\n &--open {\n display: flex;\n }\n }\n }\n\n &__top-navigation-items {\n padding: spacing.space(0.5) spacing.space(1);\n\n justify-content: flex-start;\n\n @include colour.colour-border(\"keyline\", 1px, solid, bottom);\n }\n\n &__top-navigation-item {\n margin: 0;\n padding: spacing.space(0.5);\n }\n\n &__top-navigation-item-link {\n &,\n &:link,\n &:visited {\n @include colour.colour-font(\"font-light\");\n }\n\n &:hover {\n @include colour.colour-font(\"font-dark\");\n }\n }\n\n &__navigation-items {\n width: 100%;\n\n flex-direction: column;\n gap: 0;\n\n background-color: rgb(255 255 255 / 10%);\n\n @include colour.colour-border(\"keyline-dark\", 2px, solid, top);\n @include colour.colour-border(\"keyline-dark\", 2px, solid, bottom);\n }\n\n &__navigation-item {\n margin: 0;\n\n display: block;\n\n @include colour.colour-border(\"keyline\", 1px, solid, top);\n\n &:first-child {\n border-top: none;\n }\n }\n\n &__navigation-item-link {\n display: block;\n\n line-height: 1.75rem;\n\n &::after {\n height: auto;\n width: 0;\n\n top: 0;\n right: auto;\n }\n\n &--selected {\n &,\n &:hover {\n &::after {\n height: auto;\n width: 0.5rem;\n }\n }\n }\n }\n }\n\n @include media.on-small {\n .tna-logo {\n width: 4rem;\n height: 4rem;\n }\n\n &__logo-strapline {\n line-height: 1.25rem;\n }\n\n &__logo.tna-column,\n &__navigation-item-link,\n &__navigation-toggle.tna-column {\n padding-right: grid.gutter-width();\n }\n\n &__logo.tna-column,\n &__navigation-item-link {\n padding-left: grid.gutter-width();\n }\n\n &__top-navigation-items {\n padding-right: calc(#{grid.gutter-width()} - 0.5rem);\n padding-left: calc(#{grid.gutter-width()} - 0.5rem);\n }\n }\n\n @include media.on-tiny {\n &__navigation-toggle.tna-column,\n &__logo.tna-column {\n padding-right: grid.gutter-width-tiny();\n }\n\n &__logo.tna-column {\n padding-left: grid.gutter-width-tiny();\n }\n\n .tna-logo {\n width: 3.5rem;\n height: 3.5rem;\n }\n\n &__logo-strapline {\n line-height: 1;\n }\n\n &__top-navigation-items {\n gap: 0.5rem;\n }\n\n &__navigation-item-link {\n padding-right: grid.gutter-width-tiny();\n padding-left: calc(#{grid.gutter-width-tiny()} + 0.5rem);\n }\n }\n\n // @include colour.on-high-contrast {\n // &::after {\n // @include colour.colour-border(\"keyline-dark\");\n // }\n\n // @include media.on-larger-than-mobile {\n // &__navigation-item-link {\n // &:hover,\n // &--selected {\n // &,\n // &:link,\n // &:visited {\n // @include colour.colour-border(\"keyline-dark\");\n // }\n // }\n // }\n // }\n // }\n}\n","@use \"sass:math\";\n@use \"../variables/typography\";\n@use \"colour\";\n@use \"media\";\n\n@mixin relative-font-size($font-size-px) {\n font-size: #{math.div($font-size-px, typography.$relative-1rem-px)}rem;\n}\n\n@mixin main-font-weight {\n font-weight: typography.$main-font-weight;\n}\n\n@mixin main-font-weight-medium {\n font-weight: typography.$main-font-weight-medium;\n}\n\n@mixin main-font-weight-bold {\n font-weight: typography.$main-font-weight-bold;\n}\n\n@mixin main-font($bold: false) {\n font-family: typography.$main-font-family;\n @if $bold {\n @include main-font-weight-bold;\n } @else {\n @include main-font-weight;\n }\n font-optical-sizing: auto;\n font-style: normal;\n font-variation-settings: \"wdth\" 100;\n}\n\n@mixin heading-font {\n font-family: typography.$heading-font-family;\n font-weight: typography.$heading-font-weight;\n}\n\n@mixin detail-font($bold: false) {\n font-family: typography.$detail-font-family;\n @if $bold {\n font-weight: typography.$detail-font-weight-bold;\n } @else {\n font-weight: typography.$detail-font-weight;\n }\n font-optical-sizing: auto;\n font-style: normal;\n}\n\n@mixin detail-font-small {\n @include detail-font;\n @include relative-font-size(14);\n text-transform: uppercase;\n line-height: 1.1;\n}\n\n@mixin interacted-text-decoration {\n text-decoration: underline;\n text-decoration-thickness: typography.$interactive-text-decoration-thickness;\n}\n\n@mixin heading-generator(\n $font-size-default,\n $font-size-medium,\n $font-size-small,\n $font-size-tiny,\n $line-height\n) {\n @include relative-font-size($font-size-default);\n line-height: $line-height;\n\n $small-and-tiny-identical: $font-size-small == $font-size-tiny;\n $medium-small-and-tiny-identical: $font-size-medium == $font-size-small and\n $small-and-tiny-identical;\n $all-identical: $font-size-default == $font-size-medium and\n $medium-small-and-tiny-identical and $small-and-tiny-identical;\n\n @if $all-identical != true {\n @if $medium-small-and-tiny-identical != true {\n @include media.on-medium {\n @include relative-font-size($font-size-medium);\n }\n\n @if $small-and-tiny-identical != true {\n @include media.on-small {\n @include relative-font-size($font-size-small);\n }\n\n @include media.on-tiny {\n @include relative-font-size($font-size-tiny);\n }\n } @else {\n @include media.on-mobile {\n @include relative-font-size($font-size-small);\n }\n }\n } @else {\n @include media.on-smaller-than-large {\n @include relative-font-size($font-size-medium);\n }\n }\n }\n}\n","$relative-1rem-px: 16; // 16px = 1rem\n\n$use-local-fonts: false !default;\n\n$body-font-size-px: 18 !default;\n$body-font-size-px-mobile: 17 !default;\n$body-line-height: 1.75 !default;\n\n$interactive-text-decoration-thickness: 3.5px !default;\n\n$main-font: \"Open Sans\" !default;\n$main-font-family: $main-font, sans-serif !default;\n$main-font-weight: 400 !default;\n$main-font-weight-medium: 600 !default;\n$main-font-weight-bold: 700 !default;\n\n$heading-font-family: supria-sans-condensed, \"Arial Narrow\", sans-serif !default;\n$heading-font-weight: 500 !default;\n\n$detail-font-family: \"Roboto Mono\", monospace !default;\n$detail-font-weight: 400 !default;\n$detail-font-weight-bold: 500 !default;\n\n$heading-xl-font-size-default: 64 !default;\n$heading-xl-font-size-medium: 48 !default;\n$heading-xl-font-size-small: 36 !default;\n$heading-xl-font-size-tiny: $heading-xl-font-size-small !default;\n$heading-xl-line-height: 1.1 !default;\n\n$heading-l-font-size-default: 36 !default;\n$heading-l-font-size-medium: 30 !default;\n$heading-l-font-size-small: 28 !default;\n$heading-l-font-size-tiny: 25 !default;\n$heading-l-line-height: 1.3 !default;\n\n$heading-m-font-size-default: 22 !default;\n$heading-m-font-size-medium: 21 !default;\n$heading-m-font-size-small: 20 !default;\n$heading-m-font-size-tiny: 19 !default;\n$heading-m-line-height: 1.6 !default;\n\n$heading-s-font-size-default: 18 !default;\n$heading-s-font-size-medium: $heading-s-font-size-default !default;\n$heading-s-font-size-small: $heading-s-font-size-default !default;\n$heading-s-font-size-tiny: $heading-s-font-size-default !default;\n$heading-s-line-height: 1.6 !default;\n","@use \"sass:math\";\n@use \"../variables/media\";\n@use \"../variables/typography\";\n\n$smallest-large-device-em: #{math.div(\n media.$largest-medium-device-px + 1,\n typography.$relative-1rem-px\n )}em;\n$largest-medium-device-em: #{math.div(\n media.$largest-medium-device-px,\n typography.$relative-1rem-px\n )}em;\n$smallest-medium-device-em: #{math.div(\n media.$largest-small-device-px + 1,\n typography.$relative-1rem-px\n )}em;\n$largest-small-device-em: #{math.div(\n media.$largest-small-device-px,\n typography.$relative-1rem-px\n )}em;\n$smallest-small-device-em: #{math.div(\n media.$largest-tiny-device-px + 1,\n typography.$relative-1rem-px\n )}em;\n$largest-tiny-device-em: #{math.div(\n media.$largest-tiny-device-px,\n typography.$relative-1rem-px\n )}em;\n\n$media-large: \"(min-width: #{$smallest-large-device-em})\";\n$media-lt-large: \"(max-width: #{$largest-medium-device-em})\";\n$media-medium: \"(min-width: #{$smallest-medium-device-em}) and (max-width: #{$largest-medium-device-em})\";\n$media-gt-mobile: \"(min-width: #{$smallest-medium-device-em})\";\n$media-mobile: \"(max-width: #{$largest-small-device-em})\";\n$media-small: \"(min-width: #{$smallest-small-device-em}) and (max-width: #{$largest-small-device-em})\";\n$media-gt-tiny: \"(min-width: #{$smallest-small-device-em})\";\n$media-tiny: \"(max-width: #{$largest-tiny-device-em})\";\n\n// https://nationalarchives.github.io/design-system/styles/media/#media-queries\n@mixin on-large() {\n @media #{$media-large} {\n @content;\n }\n}\n\n@mixin on-medium() {\n @media #{$media-medium} {\n @content;\n }\n}\n\n@mixin on-small() {\n @media #{$media-small} {\n @content;\n }\n}\n\n@mixin on-tiny() {\n @media #{$media-tiny} {\n @content;\n }\n}\n\n@mixin on-larger-than-mobile() {\n @media #{$media-gt-mobile} {\n @content;\n }\n}\n\n@mixin on-larger-than-tiny() {\n @media #{$media-gt-tiny} {\n @content;\n }\n}\n\n@mixin on-smaller-than-large() {\n @media #{$media-lt-large} {\n @content;\n }\n}\n\n@mixin on-mobile() {\n @media #{$media-mobile} {\n @content;\n }\n}\n\n@mixin on-print() {\n @media print {\n @content;\n }\n}\n"]}

package/nationalarchives/components/header/header.js CHANGED Viewed

@@ -1,2 +1,2 @@
-!function(t,e){"object"==typeof exports&&"object"==typeof module?module.exports=e():"function"==typeof define&&define.amd?define("TNAFrontend",[],e):"object"==typeof exports?exports.TNAFrontend=e():t.TNAFrontend=e()}(self,(()=>(()=>{"use strict";var t={d:(e,n)=>{for(var i in n)t.o(n,i)&&!t.o(e,i)&&Object.defineProperty(e,i,{enumerable:!0,get:n[i]})},o:(t,e)=>Object.prototype.hasOwnProperty.call(t,e),r:t=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(t,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(t,"__esModule",{value:!0})}},e={};function n(t){return n="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(t){return typeof t}:function(t){return t&&"function"==typeof Symbol&&t.constructor===Symbol&&t!==Symbol.prototype?"symbol":typeof t},n(t)}function i(t,e){for(var n=0;n<e.length;n++){var i=e[n];i.enumerable=i.enumerable||!1,i.configurable=!0,"value"in i&&(i.writable=!0),Object.defineProperty(t,o(i.key),i)}}function o(t){var e=function(t,e){if("object"!=n(t)||!t)return t;var i=t[Symbol.toPrimitive];if(void 0!==i){var o=i.call(t,"string");if("object"!=n(o))return o;throw new TypeError("@@toPrimitive must return a primitive value.")}return String(t)}(t);return"symbol"==n(e)?e:String(e)}t.r(e),t.d(e,{Header:()=>a});var a=function(){function t(e){var n=this;!function(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}(this,t),this.$module=e,this.$toggleButton=e&&e.querySelector(".tna-header__navigation-toggle-button"),this.$navigation=e&&e.querySelector(".tna-header__navigation"),this.$links=e&&this.$navigation&&this.$navigation.querySelectorAll("[tabindex='0']"),this.menuOpened=!1,this.mql=window.matchMedia("(max-width: 768px)"),this.$module&&this.$toggleButton&&this.$navigation&&(this.$toggleButton.removeAttribute("hidden"),this.syncState(),this.$toggleButton.addEventListener("click",(function(){return n.handleToggleNavigation()})),"addEventListener"in this.mql?this.mql.addEventListener("change",(function(){return n.syncState()})):this.mql.addListener((function(){return n.syncState()})),this.$navigation.addEventListener("keyup",(function(t){"Escape"===t.code&&(n.menuOpened=!1,n.syncState(),n.$toggleButton.focus())})))}var e,n;return e=t,(n=[{key:"handleToggleNavigation",value:function(){this.menuOpened=!this.menuOpened,this.syncState()}},{key:"syncState",value:function(){this.mql.matches?this.menuOpened?this.show():this.hide():this.show()}},{key:"show",value:function(){this.$navigation.classList.add("tna-header__navigation--open"),this.$navigation.hidden=!1,this.$navigation.setAttribute("aria-hidden","false"),this.$toggleButton.setAttribute("aria-expanded","true"),this.$toggleButton.setAttribute("title","Close menu"),this.$toggleButton.classList.add("tna-header__navigation-toggle-button--opened");for(var t=0;t<this.$links.length;t++)this.$links[t].setAttribute("tabindex","0")}},{key:"hide",value:function(){this.$navigation.classList.remove("tna-header__navigation--open"),this.$navigation.hidden=!0,this.$navigation.setAttribute("aria-hidden","true"),this.$toggleButton.setAttribute("aria-expanded","false"),this.$toggleButton.setAttribute("title","Open menu"),this.$toggleButton.classList.remove("tna-header__navigation-toggle-button--opened");for(var t=0;t<this.$links.length;t++)this.$links[t].setAttribute("tabindex","-1")}}])&&i(e.prototype,n),Object.defineProperty(e,"prototype",{writable:!1}),t}();return e})()));
+!function(t,e){"object"==typeof exports&&"object"==typeof module?module.exports=e():"function"==typeof define&&define.amd?define("TNAFrontend",[],e):"object"==typeof exports?exports.TNAFrontend=e():t.TNAFrontend=e()}(self,(()=>(()=>{"use strict";var t={d:(e,n)=>{for(var i in n)t.o(n,i)&&!t.o(e,i)&&Object.defineProperty(e,i,{enumerable:!0,get:n[i]})},o:(t,e)=>Object.prototype.hasOwnProperty.call(t,e),r:t=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(t,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(t,"__esModule",{value:!0})}},e={};function n(t){return n="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(t){return typeof t}:function(t){return t&&"function"==typeof Symbol&&t.constructor===Symbol&&t!==Symbol.prototype?"symbol":typeof t},n(t)}function i(t,e){for(var n=0;n<e.length;n++){var i=e[n];i.enumerable=i.enumerable||!1,i.configurable=!0,"value"in i&&(i.writable=!0),Object.defineProperty(t,o(i.key),i)}}function o(t){var e=function(t,e){if("object"!=n(t)||!t)return t;var i=t[Symbol.toPrimitive];if(void 0!==i){var o=i.call(t,"string");if("object"!=n(o))return o;throw new TypeError("@@toPrimitive must return a primitive value.")}return String(t)}(t);return"symbol"==n(e)?e:String(e)}t.r(e),t.d(e,{Header:()=>a});var a=function(){function t(e){var n=this;!function(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}(this,t),this.$module=e,this.$toggleButton=e&&e.querySelector(".tna-header__navigation-toggle-button"),this.$navigation=e&&e.querySelector(".tna-header__navigation"),this.$links=e&&this.$navigation&&this.$navigation.querySelectorAll("[tabindex='0']"),this.menuOpened=!1,this.mql=window.matchMedia("(max-width: 48em)"),this.$module&&this.$toggleButton&&this.$navigation&&(this.$toggleButton.removeAttribute("hidden"),this.syncState(),this.$toggleButton.addEventListener("click",(function(){return n.handleToggleNavigation()})),"addEventListener"in this.mql?this.mql.addEventListener("change",(function(){return n.syncState()})):this.mql.addListener((function(){return n.syncState()})),this.$navigation.addEventListener("keyup",(function(t){"Escape"===t.code&&(n.menuOpened=!1,n.syncState(),n.$toggleButton.focus())})))}var e,n;return e=t,(n=[{key:"handleToggleNavigation",value:function(){this.menuOpened=!this.menuOpened,this.syncState()}},{key:"syncState",value:function(){this.mql.matches?this.menuOpened?this.show():this.hide():this.show()}},{key:"show",value:function(){this.$navigation.classList.add("tna-header__navigation--open"),this.$navigation.hidden=!1,this.$navigation.setAttribute("aria-hidden","false"),this.$toggleButton.setAttribute("aria-expanded","true"),this.$toggleButton.setAttribute("title","Close menu"),this.$toggleButton.classList.add("tna-header__navigation-toggle-button--opened");for(var t=0;t<this.$links.length;t++)this.$links[t].setAttribute("tabindex","0")}},{key:"hide",value:function(){this.$navigation.classList.remove("tna-header__navigation--open"),this.$navigation.hidden=!0,this.$navigation.setAttribute("aria-hidden","true"),this.$toggleButton.setAttribute("aria-expanded","false"),this.$toggleButton.setAttribute("title","Open menu"),this.$toggleButton.classList.remove("tna-header__navigation-toggle-button--opened");for(var t=0;t<this.$links.length;t++)this.$links[t].setAttribute("tabindex","-1")}}])&&i(e.prototype,n),Object.defineProperty(e,"prototype",{writable:!1}),t}();return e})()));
 //# sourceMappingURL=header.js.map

package/nationalarchives/components/header/header.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"components/header/header.js","mappings":"CAAA,SAA2CA,EAAMC,GAC1B,iBAAZC,SAA0C,iBAAXC,OACxCA,OAAOD,QAAUD,IACQ,mBAAXG,QAAyBA,OAAOC,IAC9CD,OAAO,cAAe,GAAIH,GACA,iBAAZC,QACdA,QAAqB,YAAID,IAEzBD,EAAkB,YAAIC,GACvB,CATD,CASGK,MAAM,I,mBCRT,IAAIC,EAAsB,CCA1BA,EAAwB,CAACL,EAASM,KACjC,IAAI,IAAIC,KAAOD,EACXD,EAAoBG,EAAEF,EAAYC,KAASF,EAAoBG,EAAER,EAASO,IAC5EE,OAAOC,eAAeV,EAASO,EAAK,CAAEI,YAAY,EAAMC,IAAKN,EAAWC,IAE1E,ECNDF,EAAwB,CAACQ,EAAKC,IAAUL,OAAOM,UAAUC,eAAeC,KAAKJ,EAAKC,GCClFT,EAAyBL,IACH,oBAAXkB,QAA0BA,OAAOC,aAC1CV,OAAOC,eAAeV,EAASkB,OAAOC,YAAa,CAAEC,MAAO,WAE7DX,OAAOC,eAAeV,EAAS,aAAc,CAAEoB,OAAO,GAAO,G,2sBCLvD,IAAMC,EAAM,WACjB,SAAAA,EAAYC,GAAS,IAAAC,EAAA,M,4FAAAC,CAAA,KAAAH,GACnBI,KAAKH,QAAUA,EACfG,KAAKC,cACHJ,GAAWA,EAAQK,cAAc,yCACnCF,KAAKG,YACHN,GAAWA,EAAQK,cAAc,2BACnCF,KAAKI,OACHP,GACAG,KAAKG,aACLH,KAAKG,YAAYE,iBAAiB,kBACpCL,KAAKM,YAAa,EAClBN,KAAKO,IAAMC,OAAOC,WAAW,~~sBAExBT~~,KAAKH,SAAYG,KAAKC,eAAkBD,KAAKG,cAIlDH,KAAKC,cAAcS,gBAAgB,UACnCV,KAAKW,YACLX,KAAKC,cAAcW,iBAAiB,SAAS,kBAC3Cd,EAAKe,wBAAwB,IAE3B,qBAAsBb,KAAKO,IAC7BP,KAAKO,IAAIK,iBAAiB,UAAU,kBAAMd,EAAKa,WAAW,IAE1DX,KAAKO,IAAIO,aAAY,kBAAMhB,EAAKa,WAAW,IAG7CX,KAAKG,YAAYS,iBAAiB,SAAS,SAACG,GAC3B,WAAXA,EAAEC,OACJlB,EAAKQ,YAAa,EAClBR,EAAKa,YACLb,EAAKG,cAAcgB,QAEvB,IACF,C,QA+CC,O,EA/CArB,G,EAAA,EAAAd,IAAA,yBAAAa,MAED,WACEK,KAAKM,YAAcN,KAAKM,WACxBN,KAAKW,WACP,GAAC,CAAA7B,IAAA,YAAAa,MAED,WACMK,KAAKO,IAAIW,QACPlB,KAAKM,WACPN,KAAKmB,OAELnB,KAAKoB,OAGPpB,KAAKmB,MAET,GAAC,CAAArC,IAAA,OAAAa,MAED,WACEK,KAAKG,YAAYkB,UAAUC,IAAI,gCAC/BtB,KAAKG,YAAYoB,QAAS,EAC1BvB,KAAKG,YAAYqB,aAAa,cAAe,SAC7CxB,KAAKC,cAAcuB,aAAa,gBAAiB,QACjDxB,KAAKC,cAAcuB,aAAa,QAAS,cACzCxB,KAAKC,cAAcoB,UAAUC,IAC3B,gDAGF,IAAK,IAAIG,EAAI,EAAGA,EAAIzB,KAAKI,OAAOsB,OAAQD,IACtCzB,KAAKI,OAAOqB,GAAGD,aAAa,WAAY,IAE5C,GAAC,CAAA1C,IAAA,OAAAa,MAED,WACEK,KAAKG,YAAYkB,UAAUM,OAAO,gCAClC3B,KAAKG,YAAYoB,QAAS,EAC1BvB,KAAKG,YAAYqB,aAAa,cAAe,QAC7CxB,KAAKC,cAAcuB,aAAa,gBAAiB,SACjDxB,KAAKC,cAAcuB,aAAa,QAAS,aACzCxB,KAAKC,cAAcoB,UAAUM,OAC3B,gDAGF,IAAK,IAAIF,EAAI,EAAGA,EAAIzB,KAAKI,OAAOsB,OAAQD,IACtCzB,KAAKI,OAAOqB,GAAGD,aAAa,WAAY,KAE5C,M,oEAAC5B,CAAA,CAnFgB,G","sources":["webpack://TNAFrontend/webpack/universalModuleDefinition","webpack://TNAFrontend/webpack/bootstrap","webpack://TNAFrontend/webpack/runtime/define property getters","webpack://TNAFrontend/webpack/runtime/hasOwnProperty shorthand","webpack://TNAFrontend/webpack/runtime/make namespace object","webpack://TNAFrontend/./src/nationalarchives/components/header/header.mjs"],"sourcesContent":["(function webpackUniversalModuleDefinition(root, factory) {\n\tif(typeof exports === 'object' && typeof module === 'object')\n\t\tmodule.exports = factory();\n\telse if(typeof define === 'function' && define.amd)\n\t\tdefine(\"TNAFrontend\", [], factory);\n\telse if(typeof exports === 'object')\n\t\texports[\"TNAFrontend\"] = factory();\n\telse\n\t\troot[\"TNAFrontend\"] = factory();\n})(self, () => {\nreturn ","// The require scope\nvar __webpack_require__ = {};\n\n","// define getter functions for harmony exports\n__webpack_require__.d = (exports, definition) => {\n\tfor(var key in definition) {\n\t\tif(__webpack_require__.o(definition, key) && !__webpack_require__.o(exports, key)) {\n\t\t\tObject.defineProperty(exports, key, { enumerable: true, get: definition[key] });\n\t\t}\n\t}\n};","__webpack_require__.o = (obj, prop) => (Object.prototype.hasOwnProperty.call(obj, prop))","// define __esModule on exports\n__webpack_require__.r = (exports) => {\n\tif(typeof Symbol !== 'undefined' && Symbol.toStringTag) {\n\t\tObject.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });\n\t}\n\tObject.defineProperty(exports, '__esModule', { value: true });\n};","export class Header {\n constructor($module) {\n this.$module = $module;\n this.$toggleButton =\n $module && $module.querySelector(\".tna-header__navigation-toggle-button\");\n this.$navigation =\n $module && $module.querySelector(\".tna-header__navigation\");\n this.$links =\n $module &&\n this.$navigation &&\n this.$navigation.querySelectorAll(\"[tabindex='0']\");\n this.menuOpened = false;\n this.mql = window.matchMedia(\"(max-width: ~~768px~~)\");\n\n if (!this.$module \|\| !this.$toggleButton \|\| !this.$navigation) {\n return;\n }\n\n this.$toggleButton.removeAttribute(\"hidden\");\n this.syncState();\n this.$toggleButton.addEventListener(\"click\", () =>\n this.handleToggleNavigation(),\n );\n if (\"addEventListener\" in this.mql) {\n this.mql.addEventListener(\"change\", () => this.syncState());\n } else {\n this.mql.addListener(() => this.syncState());\n }\n\n this.$navigation.addEventListener(\"keyup\", (e) => {\n if (e.code === \"Escape\") {\n this.menuOpened = false;\n this.syncState();\n this.$toggleButton.focus();\n }\n });\n }\n\n handleToggleNavigation() {\n this.menuOpened = !this.menuOpened;\n this.syncState();\n }\n\n syncState() {\n if (this.mql.matches) {\n if (this.menuOpened) {\n this.show();\n } else {\n this.hide();\n }\n } else {\n this.show();\n }\n }\n\n show() {\n this.$navigation.classList.add(\"tna-header__navigation--open\");\n this.$navigation.hidden = false;\n this.$navigation.setAttribute(\"aria-hidden\", \"false\");\n this.$toggleButton.setAttribute(\"aria-expanded\", \"true\");\n this.$toggleButton.setAttribute(\"title\", \"Close menu\");\n this.$toggleButton.classList.add(\n \"tna-header__navigation-toggle-button--opened\",\n );\n\n for (let i = 0; i < this.$links.length; i++) {\n this.$links[i].setAttribute(\"tabindex\", \"0\");\n }\n }\n\n hide() {\n this.$navigation.classList.remove(\"tna-header__navigation--open\");\n this.$navigation.hidden = true;\n this.$navigation.setAttribute(\"aria-hidden\", \"true\");\n this.$toggleButton.setAttribute(\"aria-expanded\", \"false\");\n this.$toggleButton.setAttribute(\"title\", \"Open menu\");\n this.$toggleButton.classList.remove(\n \"tna-header__navigation-toggle-button--opened\",\n );\n\n for (let i = 0; i < this.$links.length; i++) {\n this.$links[i].setAttribute(\"tabindex\", \"-1\");\n }\n }\n}\n"],"names":["root","factory","exports","module","define","amd","self","__webpack_require__","definition","key","o","Object","defineProperty","enumerable","get","obj","prop","prototype","hasOwnProperty","call","Symbol","toStringTag","value","Header","$module","_this","_classCallCheck","this","$toggleButton","querySelector","$navigation","$links","querySelectorAll","menuOpened","mql","window","matchMedia","removeAttribute","syncState","addEventListener","handleToggleNavigation","addListener","e","code","focus","matches","show","hide","classList","add","hidden","setAttribute","i","length","remove"],"sourceRoot":""}
1	+ {"version":3,"file":"components/header/header.js","mappings":"CAAA,SAA2CA,EAAMC,GAC1B,iBAAZC,SAA0C,iBAAXC,OACxCA,OAAOD,QAAUD,IACQ,mBAAXG,QAAyBA,OAAOC,IAC9CD,OAAO,cAAe,GAAIH,GACA,iBAAZC,QACdA,QAAqB,YAAID,IAEzBD,EAAkB,YAAIC,GACvB,CATD,CASGK,MAAM,I,mBCRT,IAAIC,EAAsB,CCA1BA,EAAwB,CAACL,EAASM,KACjC,IAAI,IAAIC,KAAOD,EACXD,EAAoBG,EAAEF,EAAYC,KAASF,EAAoBG,EAAER,EAASO,IAC5EE,OAAOC,eAAeV,EAASO,EAAK,CAAEI,YAAY,EAAMC,IAAKN,EAAWC,IAE1E,ECNDF,EAAwB,CAACQ,EAAKC,IAAUL,OAAOM,UAAUC,eAAeC,KAAKJ,EAAKC,GCClFT,EAAyBL,IACH,oBAAXkB,QAA0BA,OAAOC,aAC1CV,OAAOC,eAAeV,EAASkB,OAAOC,YAAa,CAAEC,MAAO,WAE7DX,OAAOC,eAAeV,EAAS,aAAc,CAAEoB,OAAO,GAAO,G,2sBCLvD,IAAMC,EAAM,WACjB,SAAAA,EAAYC,GAAS,IAAAC,EAAA,M,4FAAAC,CAAA,KAAAH,GACnBI,KAAKH,QAAUA,EACfG,KAAKC,cACHJ,GAAWA,EAAQK,cAAc,yCACnCF,KAAKG,YACHN,GAAWA,EAAQK,cAAc,2BACnCF,KAAKI,OACHP,GACAG,KAAKG,aACLH,KAAKG,YAAYE,iBAAiB,kBACpCL,KAAKM,YAAa,EAClBN,KAAKO,IAAMC,OAAOC,WAAW,qBAExBT,KAAKH,SAAYG,KAAKC,eAAkBD,KAAKG,cAIlDH,KAAKC,cAAcS,gBAAgB,UACnCV,KAAKW,YACLX,KAAKC,cAAcW,iBAAiB,SAAS,kBAC3Cd,EAAKe,wBAAwB,IAE3B,qBAAsBb,KAAKO,IAC7BP,KAAKO,IAAIK,iBAAiB,UAAU,kBAAMd,EAAKa,WAAW,IAE1DX,KAAKO,IAAIO,aAAY,kBAAMhB,EAAKa,WAAW,IAG7CX,KAAKG,YAAYS,iBAAiB,SAAS,SAACG,GAC3B,WAAXA,EAAEC,OACJlB,EAAKQ,YAAa,EAClBR,EAAKa,YACLb,EAAKG,cAAcgB,QAEvB,IACF,C,QA+CC,O,EA/CArB,G,EAAA,EAAAd,IAAA,yBAAAa,MAED,WACEK,KAAKM,YAAcN,KAAKM,WACxBN,KAAKW,WACP,GAAC,CAAA7B,IAAA,YAAAa,MAED,WACMK,KAAKO,IAAIW,QACPlB,KAAKM,WACPN,KAAKmB,OAELnB,KAAKoB,OAGPpB,KAAKmB,MAET,GAAC,CAAArC,IAAA,OAAAa,MAED,WACEK,KAAKG,YAAYkB,UAAUC,IAAI,gCAC/BtB,KAAKG,YAAYoB,QAAS,EAC1BvB,KAAKG,YAAYqB,aAAa,cAAe,SAC7CxB,KAAKC,cAAcuB,aAAa,gBAAiB,QACjDxB,KAAKC,cAAcuB,aAAa,QAAS,cACzCxB,KAAKC,cAAcoB,UAAUC,IAC3B,gDAGF,IAAK,IAAIG,EAAI,EAAGA,EAAIzB,KAAKI,OAAOsB,OAAQD,IACtCzB,KAAKI,OAAOqB,GAAGD,aAAa,WAAY,IAE5C,GAAC,CAAA1C,IAAA,OAAAa,MAED,WACEK,KAAKG,YAAYkB,UAAUM,OAAO,gCAClC3B,KAAKG,YAAYoB,QAAS,EAC1BvB,KAAKG,YAAYqB,aAAa,cAAe,QAC7CxB,KAAKC,cAAcuB,aAAa,gBAAiB,SACjDxB,KAAKC,cAAcuB,aAAa,QAAS,aACzCxB,KAAKC,cAAcoB,UAAUM,OAC3B,gDAGF,IAAK,IAAIF,EAAI,EAAGA,EAAIzB,KAAKI,OAAOsB,OAAQD,IACtCzB,KAAKI,OAAOqB,GAAGD,aAAa,WAAY,KAE5C,M,oEAAC5B,CAAA,CAnFgB,G","sources":["webpack://TNAFrontend/webpack/universalModuleDefinition","webpack://TNAFrontend/webpack/bootstrap","webpack://TNAFrontend/webpack/runtime/define property getters","webpack://TNAFrontend/webpack/runtime/hasOwnProperty shorthand","webpack://TNAFrontend/webpack/runtime/make namespace object","webpack://TNAFrontend/./src/nationalarchives/components/header/header.mjs"],"sourcesContent":["(function webpackUniversalModuleDefinition(root, factory) {\n\tif(typeof exports === 'object' && typeof module === 'object')\n\t\tmodule.exports = factory();\n\telse if(typeof define === 'function' && define.amd)\n\t\tdefine(\"TNAFrontend\", [], factory);\n\telse if(typeof exports === 'object')\n\t\texports[\"TNAFrontend\"] = factory();\n\telse\n\t\troot[\"TNAFrontend\"] = factory();\n})(self, () => {\nreturn ","// The require scope\nvar __webpack_require__ = {};\n\n","// define getter functions for harmony exports\n__webpack_require__.d = (exports, definition) => {\n\tfor(var key in definition) {\n\t\tif(__webpack_require__.o(definition, key) && !__webpack_require__.o(exports, key)) {\n\t\t\tObject.defineProperty(exports, key, { enumerable: true, get: definition[key] });\n\t\t}\n\t}\n};","__webpack_require__.o = (obj, prop) => (Object.prototype.hasOwnProperty.call(obj, prop))","// define __esModule on exports\n__webpack_require__.r = (exports) => {\n\tif(typeof Symbol !== 'undefined' && Symbol.toStringTag) {\n\t\tObject.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });\n\t}\n\tObject.defineProperty(exports, '__esModule', { value: true });\n};","export class Header {\n constructor($module) {\n this.$module = $module;\n this.$toggleButton =\n $module && $module.querySelector(\".tna-header__navigation-toggle-button\");\n this.$navigation =\n $module && $module.querySelector(\".tna-header__navigation\");\n this.$links =\n $module &&\n this.$navigation &&\n this.$navigation.querySelectorAll(\"[tabindex='0']\");\n this.menuOpened = false;\n this.mql = window.matchMedia(\"(max-width: 48em)\");\n\n if (!this.$module \|\| !this.$toggleButton \|\| !this.$navigation) {\n return;\n }\n\n this.$toggleButton.removeAttribute(\"hidden\");\n this.syncState();\n this.$toggleButton.addEventListener(\"click\", () =>\n this.handleToggleNavigation(),\n );\n if (\"addEventListener\" in this.mql) {\n this.mql.addEventListener(\"change\", () => this.syncState());\n } else {\n this.mql.addListener(() => this.syncState());\n }\n\n this.$navigation.addEventListener(\"keyup\", (e) => {\n if (e.code === \"Escape\") {\n this.menuOpened = false;\n this.syncState();\n this.$toggleButton.focus();\n }\n });\n }\n\n handleToggleNavigation() {\n this.menuOpened = !this.menuOpened;\n this.syncState();\n }\n\n syncState() {\n if (this.mql.matches) {\n if (this.menuOpened) {\n this.show();\n } else {\n this.hide();\n }\n } else {\n this.show();\n }\n }\n\n show() {\n this.$navigation.classList.add(\"tna-header__navigation--open\");\n this.$navigation.hidden = false;\n this.$navigation.setAttribute(\"aria-hidden\", \"false\");\n this.$toggleButton.setAttribute(\"aria-expanded\", \"true\");\n this.$toggleButton.setAttribute(\"title\", \"Close menu\");\n this.$toggleButton.classList.add(\n \"tna-header__navigation-toggle-button--opened\",\n );\n\n for (let i = 0; i < this.$links.length; i++) {\n this.$links[i].setAttribute(\"tabindex\", \"0\");\n }\n }\n\n hide() {\n this.$navigation.classList.remove(\"tna-header__navigation--open\");\n this.$navigation.hidden = true;\n this.$navigation.setAttribute(\"aria-hidden\", \"true\");\n this.$toggleButton.setAttribute(\"aria-expanded\", \"false\");\n this.$toggleButton.setAttribute(\"title\", \"Open menu\");\n this.$toggleButton.classList.remove(\n \"tna-header__navigation-toggle-button--opened\",\n );\n\n for (let i = 0; i < this.$links.length; i++) {\n this.$links[i].setAttribute(\"tabindex\", \"-1\");\n }\n }\n}\n"],"names":["root","factory","exports","module","define","amd","self","__webpack_require__","definition","key","o","Object","defineProperty","enumerable","get","obj","prop","prototype","hasOwnProperty","call","Symbol","toStringTag","value","Header","$module","_this","_classCallCheck","this","$toggleButton","querySelector","$navigation","$links","querySelectorAll","menuOpened","mql","window","matchMedia","removeAttribute","syncState","addEventListener","handleToggleNavigation","addListener","e","code","focus","matches","show","hide","classList","add","hidden","setAttribute","i","length","remove"],"sourceRoot":""}

package/nationalarchives/components/header/header.mjs CHANGED Viewed

@@ -10,7 +10,7 @@ export class Header {
       this.$navigation &&
       this.$navigation.querySelectorAll("[tabindex='0']");
     this.menuOpened = false;
-    this.mql = window.matchMedia("(max-width: 768px)");
+    this.mql = window.matchMedia("(max-width: 48em)");
     if (!this.$module || !this.$toggleButton || !this.$navigation) {
       return;

package/nationalarchives/components/header/header.scss CHANGED Viewed

@@ -1,9 +1,10 @@
 @use "sass:math";
 @use "../../variables/colour" as colourVars; // TODO
-@use "../../variables/grid" as gridVars;
 @use "../../tools/colour";
-@use "../../tools/typography";
+@use "../../tools/grid";
 @use "../../tools/media";
+@use "../../tools/spacing";
+@use "../../tools/typography";
 .tna-header {
   @include colour.contrast;
@@ -20,7 +21,7 @@
     );
   }
-  .tna-template--system-theme {
+  .tna-template--system-theme & {
     @media (prefers-color-scheme: light) {
       background: linear-gradient(
         0deg,
@@ -31,8 +32,8 @@
   }
   &__exit {
-    padding-top: 0.5rem;
-    padding-bottom: 0.5rem;
+    padding-top: spacing.space(0.5);
+    padding-bottom: spacing.space(0.5);
     text-align: right;
@@ -54,7 +55,7 @@
     }
     .fa-solid {
-      margin-left: 0.5rem;
+      margin-left: spacing.space(0.5);
     }
   }
@@ -65,8 +66,8 @@
   }
   &__logo {
-    padding-top: 1.5rem;
-    padding-bottom: 1.5rem;
+    padding-top: spacing.space(1.5);
+    padding-bottom: spacing.space(1.5);
   }
   &__logo-link {
@@ -100,7 +101,7 @@
   }
   &__logo-strapline {
-    margin: 0 0.75rem;
+    margin: 0 spacing.space(0.75);
     display: inline-block;
@@ -198,11 +199,11 @@
   &__top-navigation-items {
     margin: 0;
-    padding: 1.25rem 0;
+    padding: spacing.space(1.25) 0;
     display: flex;
     justify-content: flex-end;
-    gap: 0.5rem 1.5rem;
+    gap: spacing.space(0.5) spacing.space(1.5);
     @include typography.relative-font-size(15);
     list-style: none;
@@ -237,7 +238,7 @@
     }
     .fa-solid {
-      margin-right: 0.375rem;
+      margin-right: spacing.space(0.375);
     }
   }
@@ -247,7 +248,7 @@
     display: flex;
     flex-wrap: nowrap;
-    gap: 2rem;
+    gap: spacing.space(2);
     list-style: none;
@@ -258,13 +259,13 @@
   }
   &__navigation-item-link {
-    padding: 0.5rem 0;
+    padding: spacing.space(0.5) 0;
     display: inline-block;
     position: relative;
-    @include typography.main-font-weight-bold;
+    @include typography.main-font-weight-medium;
     text-decoration: none;
     line-height: 2;
@@ -314,8 +315,8 @@
   @include media.on-mobile {
     &__logo {
-      padding-top: 1rem;
-      padding-bottom: 1rem;
+      padding-top: spacing.space(1);
+      padding-bottom: spacing.space(1);
     }
     &__contents {
@@ -352,7 +353,7 @@
     }
     &__top-navigation-items {
-      padding: 0.5rem 1rem;
+      padding: spacing.space(0.5) spacing.space(1);
       justify-content: flex-start;
@@ -361,7 +362,7 @@
     &__top-navigation-item {
       margin: 0;
-      padding: 0.5rem;
+      padding: spacing.space(0.5);
     }
     &__top-navigation-item-link {
@@ -438,28 +439,28 @@
     &__logo.tna-column,
     &__navigation-item-link,
     &__navigation-toggle.tna-column {
-      padding-right: gridVars.$gutter-width;
+      padding-right: grid.gutter-width();
     }
     &__logo.tna-column,
     &__navigation-item-link {
-      padding-left: gridVars.$gutter-width;
+      padding-left: grid.gutter-width();
     }
     &__top-navigation-items {
-      padding-right: gridVars.$gutter-width - 0.5rem;
-      padding-left: gridVars.$gutter-width - 0.5rem;
+      padding-right: calc(#{grid.gutter-width()} - 0.5rem);
+      padding-left: calc(#{grid.gutter-width()} - 0.5rem);
     }
   }
   @include media.on-tiny {
     &__navigation-toggle.tna-column,
     &__logo.tna-column {
-      padding-right: gridVars.$gutter-width-tiny;
+      padding-right: grid.gutter-width-tiny();
     }
     &__logo.tna-column {
-      padding-left: gridVars.$gutter-width-tiny;
+      padding-left: grid.gutter-width-tiny();
     }
     .tna-logo {
@@ -476,27 +477,27 @@
     }
     &__navigation-item-link {
-      padding-right: gridVars.$gutter-width-tiny;
-      padding-left: gridVars.$gutter-width-tiny + 0.5rem;
+      padding-right: grid.gutter-width-tiny();
+      padding-left: calc(#{grid.gutter-width-tiny()} + 0.5rem);
     }
   }
-  @include colour.on-high-contrast {
-    &::after {
-      @include colour.colour-border("keyline-dark");
-    }
-    @include media.on-larger-than-mobile {
-      &__navigation-item-link {
-        &:hover,
-        &--selected {
-          &,
-          &:link,
-          &:visited {
-            @include colour.colour-border("keyline-dark");
-          }
-        }
-      }
-    }
-  }
+  // @include colour.on-high-contrast {
+  //   &::after {
+  //     @include colour.colour-border("keyline-dark");
+  //   }
+  //   @include media.on-larger-than-mobile {
+  //     &__navigation-item-link {
+  //       &:hover,
+  //       &--selected {
+  //         &,
+  //         &:link,
+  //         &:visited {
+  //           @include colour.colour-border("keyline-dark");
+  //         }
+  //       }
+  //     }
+  //   }
+  // }
 }

package/nationalarchives/components/hero/hero.css CHANGED Viewed

	@@ -1 +1 @@
1	- .tna-hero__information,.tna-hero__details[open] .tna-hero__details-summary{--background: var(--contrast-background);--font-base: var(--contrast-font-base);--font-dark: var(--contrast-font-dark);--font-light: var(--contrast-font-light);--icon-light: var(--contrast-icon-light);--link: var(--contrast-link);--link-visited: var(--contrast-link-visited);--keyline: var(--contrast-keyline);--keyline-dark: var(--contrast-keyline-dark);--button-text: var(--contrast-button-text);--button-background: var(--contrast-button-background);--button-hover-text: var(--contrast-button-hover-text);--button-hover-background: var(--contrast-button-hover-background);background-color:var(--background);color:rgb(255 255 255/0.95);color:var(--font-base)}@media(max-width: 48em){.tna-hero{--background: var(--contrast-background);--font-base: var(--contrast-font-base);--font-dark: var(--contrast-font-dark);--font-light: var(--contrast-font-light);--icon-light: var(--contrast-icon-light);--link: var(--contrast-link);--link-visited: var(--contrast-link-visited);--keyline: var(--contrast-keyline);--keyline-dark: var(--contrast-keyline-dark);--button-text: var(--contrast-button-text);--button-background: var(--contrast-button-background);--button-hover-text: var(--contrast-button-hover-text);--button-hover-background: var(--contrast-button-hover-background);background-color:var(--background);color:rgb(255 255 255/0.95);color:var(--font-base)}}.tna-hero__details-summary{--background: var(--accent-background);--font-base: var(--accent-font-base);--font-dark: var(--accent-font-dark);--font-light: var(--accent-font-light);--icon-light: var(--accent-icon-light);--link: var(--accent-link);--link-visited: var(--accent-link);--keyline: var(--accent-keyline);--keyline-dark: var(--accent-keyline-dark);background-color:var(--background);color:rgb(255 255 255/0.95);color:var(--font-base)}.tna-hero__figure{min-height:clamp(~~12rem~~,40vw - ~~12rem~~,50rem);margin:0;padding-top:~~8rem~~;padding-bottom:~~4rem~~;display:flex;align-items:flex-end;position:relative}.tna-hero__caption{width:100%;position:absolute;right:0;bottom:0;z-index:5;overflow:visible}.tna-hero__details{width:100%;overflow:visible}.tna-hero__details-summary{width:1.5rem;height:1.5rem;position:absolute;right~~:.5rem~~;bottom~~:.5rem~~;z-index:2;font-size:0;text-align:center;line-height:1.5rem;list-style:none;border:4px solid;border:4px var(--background) solid;border-radius:100%;cursor:pointer}.tna-hero__details-summary:hover{color:var(--background);background-color:#343338;background-color:var(--font-base)}.tna-hero__details-summary-icon{font-size:1.25rem;font-style:normal;font-weight:700;text-transform:lowercase}.tna-hero__information{width:45rem;max-width:75vw;padding~~:.625rem~~ ~~3.25rem~~ ~~.625rem~~ ~~1rem~~;position:absolute;right:0;bottom:0;z-index:1;font-size:1rem}.tna-hero__image{width:100%;height:100%;position:absolute;inset:0;z-index:1}.tna-hero__image img{width:100%;height:100%;object-fit:cover}.tna-hero__details[open] .tna-hero__details-summary::before,.tna-hero__details[open] .tna-hero__details-summary::after{width:1.5rem;height:.125rem;display:block;position:absolute;top:50%;left:50%;background-color:#~~000~~;background-color:var(--font-dark);content:""}.tna-hero__details[open] .tna-hero__details-summary::before{transform:translate(-50%, -50%) rotate(45deg)}.tna-hero__details[open] .tna-hero__details-summary::after{transform:translate(-50%, -50%) rotate(-45deg)}.tna-hero__details[open] .tna-hero__details-summary:hover::before,.tna-hero__details[open] .tna-hero__details-summary:hover::after{height:.25rem}.tna-hero__details[open] .tna-hero__details-summary-icon{font-size:0}.tna-hero__inner{position:relative;z-index:4}.tna-hero__content-inner{padding:~~2rem~~;background-color:#f4f4f4;background-color:var(--page-background)}@media(max-width: 48em){.tna-hero__figure{min-height:auto;padding:0;flex-direction:column;background-color:inherit}.tna-hero__caption{position:relative;order:2}.tna-hero__information{width:auto;max-width:none;left:0;border-bottom:1px rgb(38 38 42/0.25) solid;border-bottom:1px var(--keyline) solid}.tna-hero__image{position:static;order:1}.tna-hero__image img{height:auto}.tna-hero__inner{order:3;background-color:inherit}.tna-hero__content-inner{padding:~~2rem~~ 0;background-color:rgba(0,0,0,0)}.tna-hero__body{margin-top:~~1rem~~}}@media(forced-colors: active){.tna-hero__information,.tna-hero__content-inner{border:1px #26262a solid;border:1px var(--keyline-dark) solid}}@media(forced-colors: active)and (max-width: 48em){.tna-hero__inner{border:1px #26262a solid;border:1px var(--keyline-dark) solid;border-top:0}.tna-hero__content-inner{border:none}}.tna-template--high-contrast-theme .tna-hero__information,.tna-template--high-contrast-theme .tna-hero__content-inner{border:1px #26262a solid;border:1px var(--keyline-dark) solid}@media(max-width: 48em){.tna-template--high-contrast-theme .tna-hero__inner{border:1px #26262a solid;border:1px var(--keyline-dark) solid;border-top:0}.tna-template--high-contrast-theme .tna-hero__content-inner{border:none}}@media(prefers-contrast: more){.tna-template--system-theme .tna-hero__information,.tna-template--system-theme .tna-hero__content-inner{border:1px #26262a solid;border:1px var(--keyline-dark) solid}}@media(prefers-contrast: more)and (max-width: 48em){.tna-template--system-theme .tna-hero__inner{border:1px #26262a solid;border:1px var(--keyline-dark) solid;border-top:0}.tna-template--system-theme .tna-hero__content-inner{border:none}}/# sourceMappingURL=hero.css.map /
1	+ .tna-hero__information,.tna-hero__details[open] .tna-hero__details-summary{--background: var(--contrast-background);--font-base: var(--contrast-font-base);--font-dark: var(--contrast-font-dark);--font-light: var(--contrast-font-light);--icon-light: var(--contrast-icon-light);--link: var(--contrast-link);--link-visited: var(--contrast-link-visited);--keyline: var(--contrast-keyline);--keyline-dark: var(--contrast-keyline-dark);--button-text: var(--contrast-button-text);--button-background: var(--contrast-button-background);--button-hover-text: var(--contrast-button-hover-text);--button-hover-background: var(--contrast-button-hover-background);background-color:var(--background);color:rgb(255 255 255/0.95);color:var(--font-base)}@media(max-width: 48em){.tna-hero{--background: var(--contrast-background);--font-base: var(--contrast-font-base);--font-dark: var(--contrast-font-dark);--font-light: var(--contrast-font-light);--icon-light: var(--contrast-icon-light);--link: var(--contrast-link);--link-visited: var(--contrast-link-visited);--keyline: var(--contrast-keyline);--keyline-dark: var(--contrast-keyline-dark);--button-text: var(--contrast-button-text);--button-background: var(--contrast-button-background);--button-hover-text: var(--contrast-button-hover-text);--button-hover-background: var(--contrast-button-hover-background);background-color:var(--background);color:rgb(255 255 255/0.95);color:var(--font-base)}}.tna-hero__details-summary{--background: var(--accent-background);--font-base: var(--accent-font-base);--font-dark: var(--accent-font-dark);--font-light: var(--accent-font-light);--icon-light: var(--accent-icon-light);--link: var(--accent-link);--link-visited: var(--accent-link);--keyline: var(--accent-keyline);--keyline-dark: var(--accent-keyline-dark);background-color:var(--background);color:rgb(255 255 255/0.95);color:var(--font-base)}.tna-hero__figure{min-height:clamp(192px,40vw - 192px,50rem);margin:0;padding-top:128px;padding-bottom:64px;display:flex;align-items:flex-end;position:relative}.tna-hero__caption{width:100%;position:absolute;right:0;bottom:0;z-index:5;overflow:visible}.tna-hero__details{width:100%;overflow:visible}.tna-hero__details-summary{width:1.5rem;height:1.5rem;position:absolute;right:8px;bottom:8px;z-index:2;font-size:0;text-align:center;line-height:1.5rem;list-style:none;border:4px solid;border:4px var(--background) solid;border-radius:100%;cursor:pointer}.tna-hero__details-summary:hover{color:var(--background);background-color:#343338;background-color:var(--font-base)}.tna-hero__details-summary-icon{font-size:1.25rem;font-style:normal;font-weight:700;text-transform:lowercase}.tna-hero__information{width:45rem;max-width:75vw;padding:10px 52px 10px 16px;position:absolute;right:0;bottom:0;z-index:1;font-size:1rem}.tna-hero__image{width:100%;height:100%;position:absolute;inset:0;z-index:1}.tna-hero__image img{width:100%;height:100%;object-fit:cover}.tna-hero__details[open] .tna-hero__details-summary::before,.tna-hero__details[open] .tna-hero__details-summary::after{width:1.5rem;height:.125rem;display:block;position:absolute;top:50%;left:50%;background-color:#010101;background-color:var(--font-dark);content:""}.tna-hero__details[open] .tna-hero__details-summary::before{transform:translate(-50%, -50%) rotate(45deg)}.tna-hero__details[open] .tna-hero__details-summary::after{transform:translate(-50%, -50%) rotate(-45deg)}.tna-hero__details[open] .tna-hero__details-summary:hover::before,.tna-hero__details[open] .tna-hero__details-summary:hover::after{height:.25rem}.tna-hero__details[open] .tna-hero__details-summary-icon{font-size:0}.tna-hero__inner{position:relative;z-index:4}.tna-hero__content-inner{padding:32px;background-color:#f4f4f4;background-color:var(--page-background)}@media(max-width: 48em){.tna-hero__figure{min-height:auto;padding:0;flex-direction:column;background-color:inherit}.tna-hero__caption{position:relative;order:2}.tna-hero__information{width:auto;max-width:none;left:0;border-bottom:1px rgb(38 38 42/0.25) solid;border-bottom:1px var(--keyline) solid}.tna-hero__image{position:static;order:1}.tna-hero__image img{height:auto}.tna-hero__inner{order:3;background-color:inherit}.tna-hero__content-inner{padding:32px 0;background-color:rgba(0,0,0,0)}.tna-hero__body{margin-top:16px}}@media(forced-colors: active){.tna-hero__information,.tna-hero__content-inner{border:1px #26262a solid;border:1px var(--keyline-dark) solid}}@media(forced-colors: active)and (max-width: 48em){.tna-hero__inner{border:1px #26262a solid;border:1px var(--keyline-dark) solid;border-top:0}.tna-hero__content-inner{border:none}}.tna-template--high-contrast-theme .tna-hero__information,.tna-template--high-contrast-theme .tna-hero__content-inner{border:1px #26262a solid;border:1px var(--keyline-dark) solid}@media(max-width: 48em){.tna-template--high-contrast-theme .tna-hero__inner{border:1px #26262a solid;border:1px var(--keyline-dark) solid;border-top:0}.tna-template--high-contrast-theme .tna-hero__content-inner{border:none}}@media(prefers-contrast: more){.tna-template--system-theme .tna-hero__information,.tna-template--system-theme .tna-hero__content-inner{border:1px #26262a solid;border:1px var(--keyline-dark) solid}}@media(prefers-contrast: more)and (max-width: 48em){.tna-template--system-theme .tna-hero__inner{border:1px #26262a solid;border:1px var(--keyline-dark) solid;border-top:0}.tna-template--system-theme .tna-hero__content-inner{border:none}}/# sourceMappingURL=hero.css.map /

package/nationalarchives/components/hero/hero.css.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sourceRoot":"","sources":["../../../../src/nationalarchives/tools/_colour.scss","../../../../src/nationalarchives/tools/_media.scss","../../../../src/nationalarchives/components/hero/hero.scss","../../../../src/nationalarchives/tools/_typography.scss"],"names":[],"mappings":"AA6PA,2EACE,yCACA,uCACA,uCACA,yCACA,yCACA,6BACA,6CACA,mCACA,6CACA,2CACA,uDACA,uDACA,mEA1KA,mCAPA,4BACA,uBC/BA,wBD0NF,UAEI,yCACA,uCACA,uCACA,yCACA,yCACA,6BACA,6CACA,mCACA,6CACA,2CACA,uDACA,uDACA,mEAnMF,mCAPA,4BACA,wBAqNF,2BACE,uCACA,qCACA,qCACA,uCACA,uCACA,2BACA,mCACA,iCACA,2CAxNA,mCAPA,4BACA,uBEnFA,kBACE,2CACA,SACA,iBACA,oBAEA,aACA,qBAEA,kBAGF,mBACE,WAEA,kBACA,QACA,SACA,UAEA,iBAGF,mBACE,WAEA,iBAGF,2BACE,aACA,cAEA,kBACA,YACA,aACA,UAEA,YACA,kBACA,mBACA,gBFoFE,iBAIA,mCEnFF,mBAEA,eAEA,iCFiCF,wBAIA,yBAEA,kCEhCA,gCACE,kBACA,kBACA,gBACA,yBAGF,uBACE,YACA,eACA,qCAEA,kBACA,QACA,SACA,UC1EF,eDiFA,iBACE,WACA,YAEA,kBACA,QACA,UAEA,qBACE,WACA,YAEA,iBAOF,uHAEE,aACA,eAEA,cAEA,kBACA,QACA,SFpBJ,sBAEA,kCEsBI,WAGF,4DACE,8CAGF,2DACE,+CAIA,mIAEE,cAIJ,yDACE,YAIJ,iBACE,kBACA,UAMF,yBACE,aFxDF,yBAEA,wCCrCA,wBCuGE,kBACE,gBACA,UAEA,sBAEA,yBAGF,mBACE,kBACA,QAYF,uBACE,WACA,eAEA,OF5EA,2CAIA,uCE6EF,iBACE,gBAEA,QAEA,qBACE,YAIJ,iBACE,QAEA,yBAMF,yBACE,eAEA,+BAMF,gBACE,iBF8KJ,8BEzKE,gDFhGE,yBAIA,sCC7EJ,mDC+KI,iBFtGA,yBAIA,qCEoGE,aAGF,yBACE,aAZJ,sHFhGE,yBAIA,qCC7EJ,wBC+KI,oDFtGA,yBAIA,qCEoGE,aAGF,4DACE,aFsJJ,+BElKA,wGFhGE,yBAIA,sCC7EJ,oDC+KI,6CFtGA,yBAIA,qCEoGE,aAGF,qDACE","file":"hero.css","sourcesContent":["@use \"sass:map\";\n@use \"sass:list\";\n@use \"../variables/colour\";\n@use \"../tools/media\";\n\n@function brand-colour($colour, $opacity: 1) {\n @return colour.brand-colour($colour, $opacity);\n}\n\n@mixin colour-css-vars($excludes...) {\n @each $name, $value in colour.$colour-palette-default {\n @if not list.index($excludes, $name) {\n --#{$name}: #{$value};\n }\n }\n}\n\n@mixin colour-css-vars-dark($excludes...) {\n @each $name, $value in colour.$colour-palette-dark {\n @if not list.index($excludes, $name) {\n --#{$name}: #{$value};\n }\n }\n}\n\n@mixin colour-css-vars-high-contrast($excludes...) {\n @each $name, $value in colour.$colour-palette-high-contrast {\n @if not list.index($excludes, $name) {\n --#{$name}: #{$value};\n }\n }\n}\n\n@mixin colour-css-vars-high-contrast-dark($excludes...) {\n @each $name, $value in colour.$colour-palette-high-contrast-dark {\n @if not list.index($excludes, $name) {\n --#{$name}: #{$value};\n }\n }\n}\n\n@mixin accent-css-vars($colour) {\n @if $colour == \"yellow\" {\n --accent-background: #{brand-colour(\"yellow\")} !important;\n --accent-background-light: #{brand-colour(\"cream\")} !important;\n --accent-font-base: #{brand-colour(\"black\")} !important;\n --accent-font-dark: #{brand-colour(\"black\")} !important;\n --accent-font-light: #{brand-colour(\"black\", 0.7)} !important;\n --accent-icon-light: #{brand-colour(\"black\", 0.45)} !important;\n --accent-link: #{brand-colour(\"black\")} !important;\n --accent-link-visited: #{brand-colour(\"black\")} !important;\n --accent-keyline: #{brand-colour(\"black\", 0.5)} !important;\n --accent-keyline-dark: #{brand-colour(\"black\", 0.8)} !important;\n --button-accent-background: #{brand-colour(\"yellow\")} !important;\n } @else {\n --accent-font-base: #{brand-colour(\"white\")} !important;\n --accent-font-dark: #{brand-colour(\"white\")} !important;\n --accent-font-light: #{brand-colour(\"white\", 0.7)} !important;\n --accent-icon-light: #{brand-colour(\"white\", 0.45)} !important;\n --accent-link: #{brand-colour(\"white\")} !important;\n --accent-link-visited: #{brand-colour(\"white\")} !important;\n --accent-keyline: #{brand-colour(\"white\", 0.5)} !important;\n --accent-keyline-dark: #{brand-colour(\"white\", 0.8)} !important;\n --button-accent-text: #{brand-colour(\"white\")} !important;\n @if $colour == \"pink\" {\n --accent-background: #{brand-colour(\"maroon\")} !important;\n --accent-background-light: #{brand-colour(\"pastel-pink\")} !important;\n --button-accent-background: #{brand-colour(\"maroon\")} !important;\n } @else if $colour == \"orange\" {\n --accent-background: #{brand-colour(\"chestnut\")} !important;\n --accent-background-light: #{brand-colour(\"pastel-orange\")} !important;\n --button-accent-background: #{brand-colour(\"chestnut\")} !important;\n } @else if $colour == \"green\" {\n --accent-background: #{brand-colour(\"forest\")} !important;\n --accent-background-light: #{brand-colour(\"pastel-green\")} !important;\n --button-accent-background: #{brand-colour(\"forest\")} !important;\n } @else if $colour == \"blue\" {\n --accent-background: #{brand-colour(\"navy\")} !important;\n --accent-background-light: #{brand-colour(\"pastel-blue\")} !important;\n --button-accent-background: #{brand-colour(\"navy\")} !important;\n }\n }\n}\n\n@mixin colour-font(\n $colour,\n $important: false,\n $default-palette: colour.$colour-palette-default\n) {\n color: map.get($default-palette, $colour) if($important, !important, null);\n color: var(--#{$colour}) if($important, !important, null);\n}\n\n@mixin colour-background($colour, $important: false) {\n background-color: map.get(colour.$colour-palette-default, $colour)\n if($important, !important, null);\n background-color: var(--#{$colour}) if($important, !important, null);\n}\n\n@mixin colour-background-brand($brandColour, $important: false) {\n background-color: #{brand-colour($brandColour)} if($important, !important, null);\n}\n\n@mixin colour-border(\n $colour,\n $width: \"\",\n $style: solid,\n $direction: \"\",\n $important: false\n) {\n @if $direction != \"\" {\n @if $width != \"\" {\n $property: border-#{$direction};\n border-#{$direction}: $width\n map.get(colour.$colour-palette-default, $colour)\n $style\n if($important, !important, null);\n border-#{$direction}: $width\n var(--#{$colour})\n $style\n if($important, !important, null);\n } @else {\n border-#{$direction}-color: map.get(\n colour.$colour-palette-default,\n $colour\n )\n if($important, !important, null);\n border-#{$direction}-color: var(--#{$colour})\n if($important, !important, null);\n }\n } @else {\n @if $width != \"\" {\n border: $width\n map.get(colour.$colour-palette-default, $colour)\n $style\n if($important, !important, null);\n border: $width var(--#{$colour}) $style if($important, !important, null);\n } @else {\n border-color: map.get(colour.$colour-palette-default, $colour)\n if($important, !important, null);\n border-color: var(--#{$colour}) if($important, !important, null);\n }\n }\n}\n\n@mixin colour-outline($colour, $width: \"\", $style: solid, $important: false) {\n @if $width != \"\" {\n outline: $width\n map.get(colour.$colour-palette-default, $colour)\n $style\n if($important, !important, null);\n outline: $width var(--#{$colour}) $style if($important, !important, null);\n } @else {\n outline-color: map.get(colour.$colour-palette-default, $colour)\n if($important, !important, null);\n outline-color: var(--#{$colour}) if($important, !important, null);\n }\n}\n\n@mixin colour-fill($colour, $important: false) {\n fill: map.get(colour.$colour-palette-default, $colour)\n if($important, !important, null);\n fill: var(--#{$colour}) if($important, !important, null);\n}\n\n@mixin thick-keyline($direction) {\n @include colour-border(\"keyline\", 5px, solid, $direction);\n}\n\n@mixin thick-keyline-dark($direction) {\n @include colour-border(\"keyline-dark\", 5px, solid, $direction);\n}\n\n@mixin thick-keyline-accent($direction) {\n @include colour-border(\"accent-background\", 5px, solid, $direction);\n}\n\n@mixin thick-keyline-error($direction) {\n @include colour-border(\"form-error\", 5px, solid, $direction);\n}\n\n@mixin thick-keyline-brand($direction, $brandColour) {\n border-#{$direction}: 5px #{brand-colour($brandColour)} solid;\n}\n\n%light {\n @include colour-css-vars(\"form-error\");\n\n @media (prefers-contrast: more) {\n @include colour-css-vars-high-contrast(\"form-error\");\n }\n\n .tna-template--high-contrast-theme & {\n @include colour-css-vars-high-contrast(\"form-error\");\n }\n}\n\n@mixin light {\n @extend %light;\n}\n\n%dark {\n @include colour-css-vars-dark(\"form-error\");\n\n @media (prefers-contrast: more) {\n @include colour-css-vars-high-contrast-dark(\"form-error\");\n }\n\n .tna-template--high-contrast-theme & {\n @include colour-css-vars-high-contrast-dark(\"form-error\");\n }\n}\n\n@mixin dark {\n @extend %dark;\n}\n\n%plain {\n .tna-template--system-theme & {\n @extend %light;\n\n @media (prefers-color-scheme: dark) {\n @include colour-css-vars-dark;\n }\n\n @media (prefers-contrast: more) and (prefers-color-scheme: dark) {\n @include colour-css-vars-high-contrast-dark;\n }\n }\n\n .tna-template--light-theme & {\n @include colour-css-vars;\n }\n\n .tna-template--dark-theme & {\n @include colour-css-vars-dark;\n }\n\n .tna-template--high-contrast-theme & {\n @include colour-css-vars-high-contrast;\n }\n\n .tna-template--high-contrast-theme.tna-template--dark-theme & {\n @include colour-css-vars-high-contrast-dark;\n }\n\n --background: var(--page-background);\n}\n\n@mixin plain {\n @extend %plain;\n}\n\n%contrast {\n --background: var(--contrast-background);\n --font-base: var(--contrast-font-base);\n --font-dark: var(--contrast-font-dark);\n --font-light: var(--contrast-font-light);\n --icon-light: var(--contrast-icon-light);\n --link: var(--contrast-link);\n --link-visited: var(--contrast-link-visited);\n --keyline: var(--contrast-keyline);\n --keyline-dark: var(--contrast-keyline-dark);\n --button-text: var(--contrast-button-text);\n --button-background: var(--contrast-button-background);\n --button-hover-text: var(--contrast-button-hover-text);\n --button-hover-background: var(--contrast-button-hover-background);\n\n @include colour-background(\"background\");\n\n @include colour-font(\"font-base\", false, colour.$colour-palette-dark);\n}\n\n@mixin contrast {\n @extend %contrast;\n}\n\n%contrast-on-mobile {\n @include media.on-mobile {\n --background: var(--contrast-background);\n --font-base: var(--contrast-font-base);\n --font-dark: var(--contrast-font-dark);\n --font-light: var(--contrast-font-light);\n --icon-light: var(--contrast-icon-light);\n --link: var(--contrast-link);\n --link-visited: var(--contrast-link-visited);\n --keyline: var(--contrast-keyline);\n --keyline-dark: var(--contrast-keyline-dark);\n --button-text: var(--contrast-button-text);\n --button-background: var(--contrast-button-background);\n --button-hover-text: var(--contrast-button-hover-text);\n --button-hover-background: var(--contrast-button-hover-background);\n\n @include colour-background(\"background\");\n\n @include colour-font(\"font-base\", false, colour.$colour-palette-dark);\n }\n}\n\n@mixin contrast-on-mobile {\n @extend %contrast-on-mobile;\n}\n\n%accent {\n --background: var(--accent-background);\n --font-base: var(--accent-font-base);\n --font-dark: var(--accent-font-dark);\n --font-light: var(--accent-font-light);\n --icon-light: var(--accent-icon-light);\n --link: var(--accent-link);\n --link-visited: var(--accent-link);\n --keyline: var(--accent-keyline);\n --keyline-dark: var(--accent-keyline-dark);\n\n @include colour-background(\"background\");\n\n @include colour-font(\"font-base\", false, colour.$colour-palette-dark);\n}\n\n@mixin accent {\n @extend %accent;\n}\n\n%tint {\n @include colour-background(\"background-tint\");\n @include colour-font(\"font-base\");\n}\n\n@mixin tint {\n @extend %tint;\n}\n\n%accent-background {\n @include colour-background(\"accent-background\");\n}\n\n@mixin accent-background {\n @extend %accent-background;\n}\n\n%accent-light {\n --background: var(--accent-background-light);\n --font-base: #{map.get(colour.$colour-palette-default, \"font-base\")};\n --font-dark: #{map.get(colour.$colour-palette-default, \"font-dark\")};\n --font-light: #{map.get(colour.$colour-palette-default, \"font-light\")};\n --icon-light: #{map.get(colour.$colour-palette-default, \"icon-light\")};\n // --link: #{map.get(colour.$colour-palette-default, \"link\")};\n // --link-visited: #{map.get(colour.$colour-palette-default, \"link-visited\")};\n --keyline: #{map.get(colour.$colour-palette-default, \"keyline\")};\n --keyline-dark: #{map.get(colour.$colour-palette-default, \"keyline-dark\")};\n --button-text: #{map.get(colour.$colour-palette-default, \"button-text\")};\n --button-background: #{map.get(\n colour.$colour-palette-default,\n \"button-background\"\n )};\n --button-hover-text: #{map.get(\n colour.$colour-palette-default,\n \"button-hover-text\"\n )};\n --button-hover-background: #{map.get(\n colour.$colour-palette-default,\n \"button-hover-background\"\n )};\n\n @include colour-background(\"background\");\n @include colour-font(\"font-base\");\n\n .tna-template--system-theme & {\n @media (prefers-color-scheme: dark) {\n --link: #{map.get(colour.$colour-palette-default, \"link\")};\n --link-visited: #{map.get(colour.$colour-palette-default, \"link-visited\")};\n }\n }\n\n .tna-template--dark-theme & {\n --link: #{map.get(colour.$colour-palette-default, \"link\")};\n --link-visited: #{map.get(colour.$colour-palette-default, \"link-visited\")};\n }\n}\n\n@mixin accent-light {\n @extend %accent-light;\n}\n\n@mixin on-high-contrast {\n .tna-template--high-contrast-theme & {\n @content;\n }\n\n .tna-template--system-theme & {\n @media (prefers-contrast: more) {\n @content;\n }\n }\n}\n\n@mixin on-forced-colours {\n @media (forced-colors: active) {\n @content;\n }\n}\n\n@mixin on-high-contrast-and-forced-colours {\n @include on-forced-colours {\n @content;\n }\n\n @include on-high-contrast {\n @content;\n }\n}\n","@use \"../variables/media\";\n\n// 0 ======= 320 = 480 ===== 768 == 1024 ========================== min-width/max-width (px)\n// \| . \| \| \|\n// \|-TINY----------\|-SMALL---\|-MED--\|-LARGE------------------------\n// \| . \| \| \|\n// \|<------------->\| \| \| on-tiny\n// \|<----------------------->\| \| on-mobile\n// \|<------------------------------>\| on-smaller-than-large\n// \| . \|<------->\| \| on-small\n// \| . \|<------------------------- on-larger-than-tiny\n// \| . \| \|<---->\| on-medium\n// \| . \| \|<--------------- on-larger-than-mobile\n// \| . \| \| \|<-------- on-large\n// \|<------->. \| \| \| Smallest device\n\n@mixin on-large() {\n @media #{media.$media-large} {\n @content;\n }\n}\n\n@mixin on-medium() {\n @media #{media.$media-medium} {\n @content;\n }\n}\n\n@mixin on-small() {\n @media #{media.$media-small} {\n @content;\n }\n}\n\n@mixin on-tiny() {\n @media #{media.$media-tiny} {\n @content;\n }\n}\n\n@mixin on-larger-than-mobile() {\n @media #{media.$media-gt-mobile} {\n @content;\n }\n}\n\n@mixin on-larger-than-tiny() {\n @media #{media.$media-gt-tiny} {\n @content;\n }\n}\n\n@mixin on-smaller-than-large() {\n @media #{media.$media-lt-large} {\n @content;\n }\n}\n\n@mixin on-mobile() {\n @media #{media.$media-mobile} {\n @content;\n }\n}\n\n@mixin on-print() {\n @media print {\n @content;\n }\n}\n","@use \"../../tools/colour\";\n@use \"../../tools/media\";\n@use \"../../tools/typography\";\n\n.tna-hero {\n @include colour.contrast-on-mobile;\n\n &__figure {\n min-height: clamp(12rem, calc(40vw - 12rem), 50rem);\n margin: 0;\n padding-top: 8rem;\n padding-bottom: 4rem;\n\n display: flex;\n align-items: flex-end;\n\n position: relative;\n }\n\n &__caption {\n width: 100%;\n\n position: absolute;\n right: 0;\n bottom: 0;\n z-index: 5;\n\n overflow: visible;\n }\n\n &__details {\n width: 100%;\n\n overflow: visible;\n }\n\n &__details-summary {\n width: 1.5rem;\n height: 1.5rem;\n\n position: absolute;\n right: 0.5rem;\n bottom: 0.5rem;\n z-index: 2;\n\n font-size: 0;\n text-align: center;\n line-height: 1.5rem;\n list-style: none;\n\n @include colour.accent;\n\n @include colour.colour-border(\"background\", 4px);\n border-radius: 100%;\n\n cursor: pointer;\n\n &:hover {\n @include colour.colour-font(\"background\");\n\n @include colour.colour-background(\"font-base\");\n }\n }\n\n &__details-summary-icon {\n font-size: 1.25rem;\n font-style: normal;\n font-weight: 700;\n text-transform: lowercase;\n }\n\n &__information {\n width: 45rem;\n max-width: 75vw;\n padding: 0.625rem 3.25rem 0.625rem 1rem;\n\n position: absolute;\n right: 0;\n bottom: 0;\n z-index: 1;\n\n @include colour.contrast;\n\n @include typography.relative-font-size(16);\n }\n\n &__image {\n width: 100%;\n height: 100%;\n\n position: absolute;\n inset: 0;\n z-index: 1;\n\n img {\n width: 100%;\n height: 100%;\n\n object-fit: cover;\n }\n }\n\n &__details[open] &__details-summary {\n @include colour.contrast;\n\n &::before,\n &::after {\n width: 1.5rem;\n height: 0.125rem;\n\n display: block;\n\n position: absolute;\n top: 50%;\n left: 50%;\n\n @include colour.colour-background(\"font-dark\");\n\n content: \"\";\n }\n\n &::before {\n transform: translate(-50%, -50%) rotate(45deg);\n }\n\n &::after {\n transform: translate(-50%, -50%) rotate(-45deg);\n }\n\n &:hover {\n &::before,\n &::after {\n height: 0.25rem;\n }\n }\n\n &-icon {\n font-size: 0;\n }\n }\n\n &__inner {\n position: relative;\n z-index: 4;\n }\n\n &__content {\n }\n\n &__content-inner {\n padding: 2rem;\n\n @include colour.colour-background(\"page-background\");\n }\n\n &__heading {\n }\n\n &__body {\n }\n\n @include media.on-mobile {\n &__figure {\n min-height: auto;\n padding: 0;\n\n flex-direction: column;\n\n background-color: inherit;\n }\n\n &__caption {\n position: relative;\n order: 2;\n }\n\n &__details {\n }\n\n &__details-summary {\n }\n\n &__details-summary-icon {\n }\n\n &__information {\n width: auto;\n max-width: none;\n\n left: 0;\n\n @include colour.colour-border(\"keyline\", 1px, solid, bottom);\n }\n\n &__image {\n position: static;\n\n order: 1;\n\n img {\n height: auto;\n }\n }\n\n &__inner {\n order: 3;\n\n background-color: inherit;\n }\n\n &__content {\n }\n\n &__content-inner {\n padding: 2rem 0;\n\n background-color: transparent;\n }\n\n &__heading {\n }\n\n &__body {\n margin-top: 1rem;\n }\n }\n\n @include colour.on-high-contrast-and-forced-colours {\n &__information,\n &__content-inner {\n @include colour.colour-border(\"keyline-dark\", 1px);\n }\n\n @include media.on-mobile {\n &__inner {\n @include colour.colour-border(\"keyline-dark\", 1px);\n border-top: 0;\n }\n\n &__content-inner {\n border: none;\n }\n }\n }\n}\n","@use \"sass:math\";\n@use \"colour\";\n@use \"../variables/typography\";\n\n@mixin relative-font-size($fontSizePx) {\n font-size: #{math.div($fontSizePx, typography.$relative-1rem-px)}rem;\n}\n\n@mixin main-font-weight {\n font-weight: typography.$main-font-weight;\n}\n\n@mixin main-font-weight-bold {\n font-weight: typography.$main-font-weight-bold;\n}\n\n@mixin main-font($bold: false) {\n font-family: typography.$main-font-family;\n @if $bold {\n @include main-font-weight-bold;\n } @else {\n @include main-font-weight;\n }\n font-optical-sizing: auto;\n font-style: normal;\n font-variation-settings: \"wdth\" 100;\n}\n\n@mixin heading-font {\n font-family: typography.$heading-font-family;\n font-weight: typography.$heading-font-weight;\n}\n\n@mixin detail-font($bold: false) {\n font-family: typography.$detail-font-family;\n @if $bold {\n font-weight: typography.$detail-font-weight-bold;\n } @else {\n font-weight: typography.$detail-font-weight;\n }\n font-optical-sizing: auto;\n font-style: normal;\n}\n\n@mixin detail-font-small {\n @include detail-font;\n @include relative-font-size(14);\n text-transform: uppercase;\n line-height: #{math.div(typography.$relative-1rem-px, 14)};\n}\n\n@mixin interacted-text-decoration {\n text-decoration: underline;\n text-decoration-thickness: typography.$interactive-text-decoration-thickness;\n}\n"]}
1	+ {"version":3,"sourceRoot":"","sources":["../../../../src/nationalarchives/tools/_colour.scss","../../../../src/nationalarchives/tools/_media.scss","../../../../src/nationalarchives/components/hero/hero.scss","../../../../src/nationalarchives/tools/_typography.scss"],"names":[],"mappings":"AAkNA,2EACE,yCACA,uCACA,uCACA,yCACA,yCACA,6BACA,6CACA,mCACA,6CACA,2CACA,uDACA,uDACA,mEA1KA,mCAPA,4BACA,uBCmCA,wBDwJF,UAEI,yCACA,uCACA,uCACA,yCACA,yCACA,6BACA,6CACA,mCACA,6CACA,2CACA,uDACA,uDACA,mEAnMF,mCAPA,4BACA,wBAqNF,2BACE,uCACA,qCACA,qCACA,uCACA,uCACA,2BACA,mCACA,iCACA,2CAxNA,mCAPA,4BACA,uBEvCA,kBACE,2CAKA,SACA,kBACA,oBAEA,aACA,qBAEA,kBAGF,mBACE,WAEA,kBACA,QACA,SACA,UAEA,iBAGF,mBACE,WAEA,iBAGF,2BACE,aACA,cAEA,kBACA,UACA,WACA,UAEA,YACA,kBACA,mBACA,gBFoCE,iBAIA,mCEnCF,mBAEA,eAEA,iCFfF,wBAIA,yBAEA,kCEgBA,gCACE,kBACA,kBACA,gBACA,yBAGF,uBACE,YACA,eACA,4BAGA,kBACA,QACA,SACA,UC/EF,eDsFA,iBACE,WACA,YAEA,kBACA,QACA,UAEA,qBACE,WACA,YAEA,iBAOF,uHAEE,aACA,eAEA,cAEA,kBACA,QACA,SFrEJ,yBAEA,kCEuEI,WAGF,4DACE,8CAGF,2DACE,+CAIA,mIAEE,cAIJ,yDACE,YAIJ,iBACE,kBACA,UAMF,yBACE,aFzGF,yBAEA,wCC6BA,wBCsFE,kBACE,gBACA,UAEA,sBAEA,yBAGF,mBACE,kBACA,QAYF,uBACE,WACA,eAEA,OF7HA,2CAIA,uCE8HF,iBACE,gBAEA,QAEA,qBACE,YAIJ,iBACE,QAEA,yBAMF,yBACE,eAEA,+BAMF,gBACE,iBF6HJ,8BExHE,gDFjJE,yBAIA,sCCXJ,mDC8JI,iBFvJA,yBAIA,qCEqJE,aAGF,yBACE,aAZJ,sHFjJE,yBAIA,qCCXJ,wBC8JI,oDFvJA,yBAIA,qCEqJE,aAGF,4DACE,aFqGJ,+BEjHA,wGFjJE,yBAIA,sCCXJ,oDC8JI,6CFvJA,yBAIA,qCEqJE,aAGF,qDACE","file":"hero.css","sourcesContent":["@use \"sass:map\";\n@use \"sass:list\";\n@use \"../variables/colour\";\n@use \"../tools/media\";\n\n@function brand-colour($colour, $opacity: 1) {\n @return colour.brand-colour($colour, $opacity);\n}\n\n@mixin colour-css-vars($excludes...) {\n @each $name, $value in colour.$colour-palette-default {\n @if not list.index($excludes, $name) {\n --#{$name}: #{$value};\n }\n }\n}\n\n@mixin colour-css-vars-dark($excludes...) {\n @each $name, $value in colour.$colour-palette-dark {\n @if not list.index($excludes, $name) {\n --#{$name}: #{$value};\n }\n }\n}\n\n@mixin colour-css-vars-high-contrast($excludes...) {\n @each $name, $value in colour.$colour-palette-high-contrast {\n @if not list.index($excludes, $name) {\n --#{$name}: #{$value};\n }\n }\n}\n\n@mixin colour-css-vars-high-contrast-dark($excludes...) {\n @each $name, $value in colour.$colour-palette-high-contrast-dark {\n @if not list.index($excludes, $name) {\n --#{$name}: #{$value};\n }\n }\n}\n\n@mixin colour-font(\n $colour,\n $important: false,\n $default-palette: colour.$colour-palette-default\n) {\n color: map.get($default-palette, $colour) if($important, !important, null);\n color: var(--#{$colour}) if($important, !important, null);\n}\n\n@mixin colour-background($colour, $important: false) {\n background-color: map.get(colour.$colour-palette-default, $colour)\n if($important, !important, null);\n background-color: var(--#{$colour}) if($important, !important, null);\n}\n\n@mixin colour-background-brand($brandColour, $important: false) {\n background-color: #{brand-colour($brandColour)} if($important, !important, null);\n}\n\n@mixin colour-border(\n $colour,\n $width: \"\",\n $style: solid,\n $direction: \"\",\n $important: false\n) {\n @if $direction != \"\" {\n @if $width != \"\" {\n $property: border-#{$direction};\n border-#{$direction}: $width\n map.get(colour.$colour-palette-default, $colour)\n $style\n if($important, !important, null);\n border-#{$direction}: $width\n var(--#{$colour})\n $style\n if($important, !important, null);\n } @else {\n border-#{$direction}-color: map.get(\n colour.$colour-palette-default,\n $colour\n )\n if($important, !important, null);\n border-#{$direction}-color: var(--#{$colour})\n if($important, !important, null);\n }\n } @else {\n @if $width != \"\" {\n border: $width\n map.get(colour.$colour-palette-default, $colour)\n $style\n if($important, !important, null);\n border: $width var(--#{$colour}) $style if($important, !important, null);\n } @else {\n border-color: map.get(colour.$colour-palette-default, $colour)\n if($important, !important, null);\n border-color: var(--#{$colour}) if($important, !important, null);\n }\n }\n}\n\n@mixin colour-outline($colour, $width: \"\", $style: solid, $important: false) {\n @if $width != \"\" {\n outline: $width\n map.get(colour.$colour-palette-default, $colour)\n $style\n if($important, !important, null);\n outline: $width var(--#{$colour}) $style if($important, !important, null);\n } @else {\n outline-color: map.get(colour.$colour-palette-default, $colour)\n if($important, !important, null);\n outline-color: var(--#{$colour}) if($important, !important, null);\n }\n}\n\n@mixin colour-fill($colour, $important: false) {\n fill: map.get(colour.$colour-palette-default, $colour)\n if($important, !important, null);\n fill: var(--#{$colour}) if($important, !important, null);\n}\n\n@mixin thick-keyline($direction) {\n @include colour-border(\"keyline\", 5px, solid, $direction);\n}\n\n@mixin thick-keyline-dark($direction) {\n @include colour-border(\"keyline-dark\", 5px, solid, $direction);\n}\n\n@mixin thick-keyline-accent($direction) {\n @include colour-border(\"accent-background\", 5px, solid, $direction);\n}\n\n@mixin thick-keyline-error($direction) {\n @include colour-border(\"form-error\", 5px, solid, $direction);\n}\n\n@mixin thick-keyline-brand($direction, $brandColour) {\n border-#{$direction}: 5px #{brand-colour($brandColour)} solid;\n}\n\n%light {\n @include colour-css-vars(\"form-error\");\n\n @media (prefers-contrast: more) {\n @include colour-css-vars-high-contrast(\"form-error\");\n }\n\n .tna-template--high-contrast-theme & {\n @include colour-css-vars-high-contrast(\"form-error\");\n }\n}\n\n@mixin light {\n @extend %light;\n}\n\n%dark {\n @include colour-css-vars-dark(\"form-error\");\n\n @media (prefers-contrast: more) {\n @include colour-css-vars-high-contrast-dark(\"form-error\");\n }\n\n .tna-template--high-contrast-theme & {\n @include colour-css-vars-high-contrast-dark(\"form-error\");\n }\n}\n\n@mixin dark {\n @extend %dark;\n}\n\n%plain {\n .tna-template--system-theme & {\n @extend %light;\n\n @media (prefers-color-scheme: dark) {\n @include colour-css-vars-dark;\n }\n\n @media (prefers-contrast: more) and (prefers-color-scheme: dark) {\n @include colour-css-vars-high-contrast-dark;\n }\n }\n\n .tna-template--light-theme & {\n @include colour-css-vars;\n }\n\n .tna-template--dark-theme & {\n @include colour-css-vars-dark;\n }\n\n .tna-template--high-contrast-theme & {\n @include colour-css-vars-high-contrast;\n }\n\n .tna-template--high-contrast-theme.tna-template--dark-theme & {\n @include colour-css-vars-high-contrast-dark;\n }\n\n --background: var(--page-background);\n}\n\n@mixin plain {\n @extend %plain;\n}\n\n%contrast {\n --background: var(--contrast-background);\n --font-base: var(--contrast-font-base);\n --font-dark: var(--contrast-font-dark);\n --font-light: var(--contrast-font-light);\n --icon-light: var(--contrast-icon-light);\n --link: var(--contrast-link);\n --link-visited: var(--contrast-link-visited);\n --keyline: var(--contrast-keyline);\n --keyline-dark: var(--contrast-keyline-dark);\n --button-text: var(--contrast-button-text);\n --button-background: var(--contrast-button-background);\n --button-hover-text: var(--contrast-button-hover-text);\n --button-hover-background: var(--contrast-button-hover-background);\n\n @include colour-background(\"background\");\n\n @include colour-font(\"font-base\", false, colour.$colour-palette-dark);\n}\n\n@mixin contrast {\n @extend %contrast;\n}\n\n%contrast-on-mobile {\n @include media.on-mobile {\n --background: var(--contrast-background);\n --font-base: var(--contrast-font-base);\n --font-dark: var(--contrast-font-dark);\n --font-light: var(--contrast-font-light);\n --icon-light: var(--contrast-icon-light);\n --link: var(--contrast-link);\n --link-visited: var(--contrast-link-visited);\n --keyline: var(--contrast-keyline);\n --keyline-dark: var(--contrast-keyline-dark);\n --button-text: var(--contrast-button-text);\n --button-background: var(--contrast-button-background);\n --button-hover-text: var(--contrast-button-hover-text);\n --button-hover-background: var(--contrast-button-hover-background);\n\n @include colour-background(\"background\");\n\n @include colour-font(\"font-base\", false, colour.$colour-palette-dark);\n }\n}\n\n@mixin contrast-on-mobile {\n @extend %contrast-on-mobile;\n}\n\n%accent {\n --background: var(--accent-background);\n --font-base: var(--accent-font-base);\n --font-dark: var(--accent-font-dark);\n --font-light: var(--accent-font-light);\n --icon-light: var(--accent-icon-light);\n --link: var(--accent-link);\n --link-visited: var(--accent-link);\n --keyline: var(--accent-keyline);\n --keyline-dark: var(--accent-keyline-dark);\n\n @include colour-background(\"background\");\n\n @include colour-font(\"font-base\", false, colour.$colour-palette-dark);\n}\n\n@mixin accent {\n @extend %accent;\n}\n\n%tint {\n @include colour-background(\"background-tint\");\n @include colour-font(\"font-base\");\n}\n\n@mixin tint {\n @extend %tint;\n}\n\n%accent-background {\n @include colour-background(\"accent-background\");\n}\n\n@mixin accent-background {\n @extend %accent-background;\n}\n\n%accent-light {\n --background: var(--accent-background-light);\n --font-base: #{map.get(colour.$colour-palette-default, \"font-base\")};\n --font-dark: #{map.get(colour.$colour-palette-default, \"font-dark\")};\n --font-light: #{map.get(colour.$colour-palette-default, \"font-light\")};\n --icon-light: #{map.get(colour.$colour-palette-default, \"icon-light\")};\n // --link: #{map.get(colour.$colour-palette-default, \"link\")};\n // --link-visited: #{map.get(colour.$colour-palette-default, \"link-visited\")};\n --keyline: #{map.get(colour.$colour-palette-default, \"keyline\")};\n --keyline-dark: #{map.get(colour.$colour-palette-default, \"keyline-dark\")};\n --button-text: #{map.get(colour.$colour-palette-default, \"button-text\")};\n --button-background: #{map.get(\n colour.$colour-palette-default,\n \"button-background\"\n )};\n --button-hover-text: #{map.get(\n colour.$colour-palette-default,\n \"button-hover-text\"\n )};\n --button-hover-background: #{map.get(\n colour.$colour-palette-default,\n \"button-hover-background\"\n )};\n\n @include colour-background(\"background\");\n @include colour-font(\"font-base\");\n\n .tna-template--system-theme & {\n @media (prefers-color-scheme: dark) {\n --link: #{map.get(colour.$colour-palette-default, \"link\")};\n --link-visited: #{map.get(colour.$colour-palette-default, \"link-visited\")};\n }\n }\n\n .tna-template--dark-theme & {\n --link: #{map.get(colour.$colour-palette-default, \"link\")};\n --link-visited: #{map.get(colour.$colour-palette-default, \"link-visited\")};\n }\n}\n\n@mixin accent-light {\n @extend %accent-light;\n}\n\n@mixin on-high-contrast {\n .tna-template--high-contrast-theme & {\n @content;\n }\n\n .tna-template--system-theme & {\n @media (prefers-contrast: more) {\n @content;\n }\n }\n}\n\n@mixin on-forced-colours {\n @media (forced-colors: active) {\n @content;\n }\n}\n\n@mixin on-high-contrast-and-forced-colours {\n @include on-forced-colours {\n @content;\n }\n\n @include on-high-contrast {\n @content;\n }\n}\n","@use \"sass:math\";\n@use \"../variables/media\";\n@use \"../variables/typography\";\n\n$smallest-large-device-em: #{math.div(\n media.$largest-medium-device-px + 1,\n typography.$relative-1rem-px\n )}em;\n$largest-medium-device-em: #{math.div(\n media.$largest-medium-device-px,\n typography.$relative-1rem-px\n )}em;\n$smallest-medium-device-em: #{math.div(\n media.$largest-small-device-px + 1,\n typography.$relative-1rem-px\n )}em;\n$largest-small-device-em: #{math.div(\n media.$largest-small-device-px,\n typography.$relative-1rem-px\n )}em;\n$smallest-small-device-em: #{math.div(\n media.$largest-tiny-device-px + 1,\n typography.$relative-1rem-px\n )}em;\n$largest-tiny-device-em: #{math.div(\n media.$largest-tiny-device-px,\n typography.$relative-1rem-px\n )}em;\n\n$media-large: \"(min-width: #{$smallest-large-device-em})\";\n$media-lt-large: \"(max-width: #{$largest-medium-device-em})\";\n$media-medium: \"(min-width: #{$smallest-medium-device-em}) and (max-width: #{$largest-medium-device-em})\";\n$media-gt-mobile: \"(min-width: #{$smallest-medium-device-em})\";\n$media-mobile: \"(max-width: #{$largest-small-device-em})\";\n$media-small: \"(min-width: #{$smallest-small-device-em}) and (max-width: #{$largest-small-device-em})\";\n$media-gt-tiny: \"(min-width: #{$smallest-small-device-em})\";\n$media-tiny: \"(max-width: #{$largest-tiny-device-em})\";\n\n// https://nationalarchives.github.io/design-system/styles/media/#media-queries\n@mixin on-large() {\n @media #{$media-large} {\n @content;\n }\n}\n\n@mixin on-medium() {\n @media #{$media-medium} {\n @content;\n }\n}\n\n@mixin on-small() {\n @media #{$media-small} {\n @content;\n }\n}\n\n@mixin on-tiny() {\n @media #{$media-tiny} {\n @content;\n }\n}\n\n@mixin on-larger-than-mobile() {\n @media #{$media-gt-mobile} {\n @content;\n }\n}\n\n@mixin on-larger-than-tiny() {\n @media #{$media-gt-tiny} {\n @content;\n }\n}\n\n@mixin on-smaller-than-large() {\n @media #{$media-lt-large} {\n @content;\n }\n}\n\n@mixin on-mobile() {\n @media #{$media-mobile} {\n @content;\n }\n}\n\n@mixin on-print() {\n @media print {\n @content;\n }\n}\n","@use \"../../tools/colour\";\n@use \"../../tools/media\";\n@use \"../../tools/spacing\";\n@use \"../../tools/typography\";\n\n.tna-hero {\n @include colour.contrast-on-mobile;\n\n &__figure {\n min-height: clamp(\n #{spacing.space(12)},\n calc(40vw - #{spacing.space(12)}),\n 50rem\n );\n margin: 0;\n padding-top: spacing.space(8);\n padding-bottom: spacing.space(4);\n\n display: flex;\n align-items: flex-end;\n\n position: relative;\n }\n\n &__caption {\n width: 100%;\n\n position: absolute;\n right: 0;\n bottom: 0;\n z-index: 5;\n\n overflow: visible;\n }\n\n &__details {\n width: 100%;\n\n overflow: visible;\n }\n\n &__details-summary {\n width: 1.5rem;\n height: 1.5rem;\n\n position: absolute;\n right: spacing.space(0.5);\n bottom: spacing.space(0.5);\n z-index: 2;\n\n font-size: 0;\n text-align: center;\n line-height: 1.5rem;\n list-style: none;\n\n @include colour.accent;\n\n @include colour.colour-border(\"background\", 4px);\n border-radius: 100%;\n\n cursor: pointer;\n\n &:hover {\n @include colour.colour-font(\"background\");\n\n @include colour.colour-background(\"font-base\");\n }\n }\n\n &__details-summary-icon {\n font-size: 1.25rem;\n font-style: normal;\n font-weight: 700;\n text-transform: lowercase;\n }\n\n &__information {\n width: 45rem;\n max-width: 75vw;\n padding: spacing.space(0.625) spacing.space(3.25) spacing.space(0.625)\n spacing.space(1);\n\n position: absolute;\n right: 0;\n bottom: 0;\n z-index: 1;\n\n @include colour.contrast;\n\n @include typography.relative-font-size(16);\n }\n\n &__image {\n width: 100%;\n height: 100%;\n\n position: absolute;\n inset: 0;\n z-index: 1;\n\n img {\n width: 100%;\n height: 100%;\n\n object-fit: cover;\n }\n }\n\n &__details[open] &__details-summary {\n @include colour.contrast;\n\n &::before,\n &::after {\n width: 1.5rem;\n height: 0.125rem;\n\n display: block;\n\n position: absolute;\n top: 50%;\n left: 50%;\n\n @include colour.colour-background(\"font-dark\");\n\n content: \"\";\n }\n\n &::before {\n transform: translate(-50%, -50%) rotate(45deg);\n }\n\n &::after {\n transform: translate(-50%, -50%) rotate(-45deg);\n }\n\n &:hover {\n &::before,\n &::after {\n height: 0.25rem;\n }\n }\n\n &-icon {\n font-size: 0;\n }\n }\n\n &__inner {\n position: relative;\n z-index: 4;\n }\n\n &__content {\n }\n\n &__content-inner {\n padding: spacing.space(2);\n\n @include colour.colour-background(\"page-background\");\n }\n\n &__heading {\n }\n\n &__body {\n }\n\n @include media.on-mobile {\n &__figure {\n min-height: auto;\n padding: 0;\n\n flex-direction: column;\n\n background-color: inherit;\n }\n\n &__caption {\n position: relative;\n order: 2;\n }\n\n &__details {\n }\n\n &__details-summary {\n }\n\n &__details-summary-icon {\n }\n\n &__information {\n width: auto;\n max-width: none;\n\n left: 0;\n\n @include colour.colour-border(\"keyline\", 1px, solid, bottom);\n }\n\n &__image {\n position: static;\n\n order: 1;\n\n img {\n height: auto;\n }\n }\n\n &__inner {\n order: 3;\n\n background-color: inherit;\n }\n\n &__content {\n }\n\n &__content-inner {\n padding: spacing.space(2) 0;\n\n background-color: transparent;\n }\n\n &__heading {\n }\n\n &__body {\n margin-top: spacing.space(1);\n }\n }\n\n @include colour.on-high-contrast-and-forced-colours {\n &__information,\n &__content-inner {\n @include colour.colour-border(\"keyline-dark\", 1px);\n }\n\n @include media.on-mobile {\n &__inner {\n @include colour.colour-border(\"keyline-dark\", 1px);\n border-top: 0;\n }\n\n &__content-inner {\n border: none;\n }\n }\n }\n}\n","@use \"sass:math\";\n@use \"../variables/typography\";\n@use \"colour\";\n@use \"media\";\n\n@mixin relative-font-size($font-size-px) {\n font-size: #{math.div($font-size-px, typography.$relative-1rem-px)}rem;\n}\n\n@mixin main-font-weight {\n font-weight: typography.$main-font-weight;\n}\n\n@mixin main-font-weight-medium {\n font-weight: typography.$main-font-weight-medium;\n}\n\n@mixin main-font-weight-bold {\n font-weight: typography.$main-font-weight-bold;\n}\n\n@mixin main-font($bold: false) {\n font-family: typography.$main-font-family;\n @if $bold {\n @include main-font-weight-bold;\n } @else {\n @include main-font-weight;\n }\n font-optical-sizing: auto;\n font-style: normal;\n font-variation-settings: \"wdth\" 100;\n}\n\n@mixin heading-font {\n font-family: typography.$heading-font-family;\n font-weight: typography.$heading-font-weight;\n}\n\n@mixin detail-font($bold: false) {\n font-family: typography.$detail-font-family;\n @if $bold {\n font-weight: typography.$detail-font-weight-bold;\n } @else {\n font-weight: typography.$detail-font-weight;\n }\n font-optical-sizing: auto;\n font-style: normal;\n}\n\n@mixin detail-font-small {\n @include detail-font;\n @include relative-font-size(14);\n text-transform: uppercase;\n line-height: 1.1;\n}\n\n@mixin interacted-text-decoration {\n text-decoration: underline;\n text-decoration-thickness: typography.$interactive-text-decoration-thickness;\n}\n\n@mixin heading-generator(\n $font-size-default,\n $font-size-medium,\n $font-size-small,\n $font-size-tiny,\n $line-height\n) {\n @include relative-font-size($font-size-default);\n line-height: $line-height;\n\n $small-and-tiny-identical: $font-size-small == $font-size-tiny;\n $medium-small-and-tiny-identical: $font-size-medium == $font-size-small and\n $small-and-tiny-identical;\n $all-identical: $font-size-default == $font-size-medium and\n $medium-small-and-tiny-identical and $small-and-tiny-identical;\n\n @if $all-identical != true {\n @if $medium-small-and-tiny-identical != true {\n @include media.on-medium {\n @include relative-font-size($font-size-medium);\n }\n\n @if $small-and-tiny-identical != true {\n @include media.on-small {\n @include relative-font-size($font-size-small);\n }\n\n @include media.on-tiny {\n @include relative-font-size($font-size-tiny);\n }\n } @else {\n @include media.on-mobile {\n @include relative-font-size($font-size-small);\n }\n }\n } @else {\n @include media.on-smaller-than-large {\n @include relative-font-size($font-size-medium);\n }\n }\n }\n}\n"]}