@nationalarchives/frontend 1.1.0 → 1.3.0

package/nationalarchives/components/header/header.css

@@ -1 +1 @@
-.tna-header{--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);--accent-border: var(--accent-border-bright);background-color:var(--background, #f4f4f4);color:var(--font-base, #343338)}@media(max-width: 48em){.tna-header.tna-background-accent .tna-header__navigation{--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);--accent-border: var(--accent-border-bright);background-color:var(--background, #f4f4f4);color:var(--font-base, #343338)}}.tna-header{position:relative;background:linear-gradient(0deg, rgb(34, 34, 34) 0%, rgb(0, 0, 0) 100%)}.tna-template--dark-theme .tna-header{background:#010101}@media(prefers-color-scheme: dark){.tna-template--system-theme .tna-header{background:#010101}}@media(prefers-contrast: more){.tna-header{background:#010101}}.tna-header__contents.tna-container{justify-content:space-between}.tna-header__logo-wrapper{padding-top:1.25rem;padding-bottom:1.25rem}.tna-header__logo{display:flex;align-items:flex-end;color:inherit;text-decoration:none}.tna-header__logo--link,.tna-header__logo--link:link,.tna-header__logo--link:visited{color:inherit}.tna-header__logo--link:hover:not(:focus){text-decoration:none;outline:.3125rem var(--font-dark, rgb(1, 1, 1)) solid;outline-offset:1px}.tna-header__logo-strapline{margin:0 0.75rem;display:inline-block;line-height:1.625rem;font-family:supria-sans-condensed,"Arial Narrow",sans-serif;font-weight:500;font-size:1.25rem;text-transform:uppercase}.tna-header__navigation-button-wrapper{align-self:center;display:none}.tna-header__hamburger{width:2rem;height:.25rem;display:inline-block;background-color:var(--font-dark, rgb(1, 1, 1))}.tna-header__hamburger::before,.tna-header__hamburger::after{content:"";width:2rem;height:.25rem;display:block;position:absolute;right:0;background-color:inherit}.tna-header__hamburger::before{top:0}.tna-header__hamburger::after{bottom:0}.tna-header__navigation-button{height:2rem;padding:0;appearance:none;display:flex;align-items:center;gap:.75rem;position:relative;color:inherit;font-weight:700;font-size:1rem;background:none;border:0 rgba(0,0,0,0) solid;border-width:.25rem 0;border-radius:.1px;cursor:pointer}.tna-header__navigation-button:hover{text-decoration:underline;text-decoration-thickness:0.25rem;text-underline-offset:.125em}.tna-header__navigation-button--opened .tna-header__hamburger{height:0}.tna-header__navigation-button--opened .tna-header__hamburger::before{top:.625rem;transform:rotate(-135deg)}.tna-header__navigation-button--opened .tna-header__hamburger::after{bottom:.625rem;transform:rotate(135deg)}.tna-header__navigation{display:flex;flex-direction:column-reverse;align-items:flex-end;justify-content:space-between;position:relative;z-index:2}.tna-header__top-navigation-items{margin:0;padding:1.25rem 0;display:flex;justify-content:flex-end;gap:0.5rem 1.5rem;line-height:1;list-style:none;font-size:0.9375rem}.tna-header__top-navigation-item{display:block}.tna-header__top-navigation-item-link{display:flex;align-items:center;text-decoration:none}.tna-header__top-navigation-item-link,.tna-header__top-navigation-item-link:link,.tna-header__top-navigation-item-link:visited{color:var(--font-light, rgba(1, 1, 1, 0.58))}.tna-header__top-navigation-item-link:hover,.tna-header__top-navigation-item-link:hover:link,.tna-header__top-navigation-item-link:hover:visited,.tna-header__top-navigation-item-link:focus-visible,.tna-header__top-navigation-item-link:focus-visible:link,.tna-header__top-navigation-item-link:focus-visible:visited,.tna-header__top-navigation-item-link--selected,.tna-header__top-navigation-item-link--selected:link,.tna-header__top-navigation-item-link--selected:visited{color:var(--font-base, #343338)}.tna-header__top-navigation-item-link:hover,.tna-header__top-navigation-item-link--selected{text-decoration:underline;text-decoration-thickness:0.25rem;text-underline-offset:.125em}.tna-header__top-navigation-item-link .fa-solid{margin-right:0.375rem}.tna-header__navigation-items{margin:0;padding:0;display:flex;flex-wrap:nowrap;gap:2rem;white-space:nowrap;list-style:none}.tna-header__navigation-item-link{padding:0.5rem 0;display:inline-block;position:relative;line-height:2;text-decoration:none;font-weight:600}.tna-header__navigation-item-link::after{content:"";height:0;position:absolute;right:0;bottom:0;left:0;background-color:var(--font-dark, rgb(1, 1, 1))}.tna-header__navigation-item-link,.tna-header__navigation-item-link:link,.tna-header__navigation-item-link:visited{color:inherit}.tna-header__navigation-item-link--selected::after{border-top:5px var(--keyline-dark, rgb(38, 38, 42)) solid}.tna-header.tna-background-accent{background:var(--background, #f4f4f4)}.tna-header .tna-logo{width:5rem;flex-shrink:0}@media(max-width: 48em){.tna-header__logo-wrapper{padding-top:1rem;padding-bottom:1rem}.tna-header__contents.tna-container{padding-right:0;padding-left:0}.tna-header__navigation-button-wrapper{display:block}.tna-header__navigation-button-wrapper.tna-column{padding-left:0}.tna-header__navigation{flex-direction:column;align-items:stretch}.tna-header__navigation.tna-column{padding-right:0;padding-left:0}.tna-header__top-navigation-items{padding:0.5rem 1rem;justify-content:flex-start;border-bottom:1px var(--keyline, rgba(38, 38, 42, 0.25)) solid}.tna-header__top-navigation-item{margin:0}.tna-header__top-navigation-item-link{padding:0.5rem 0}.tna-header__top-navigation-item-link,.tna-header__top-navigation-item-link:link,.tna-header__top-navigation-item-link:visited{color:var(--font-light, rgba(1, 1, 1, 0.58))}.tna-header__top-navigation-item-link:hover,.tna-header__top-navigation-item-link:focus-visible{color:var(--font-dark, rgb(1, 1, 1))}.tna-header__navigation-items{width:100%;flex-direction:column;gap:0;background-color:hsla(0,0%,100%,.1);border-top:2px var(--keyline-dark, rgb(38, 38, 42)) solid;border-bottom:2px var(--keyline-dark, rgb(38, 38, 42)) solid}.tna-header__navigation-item{margin:0;display:block;border-top:1px var(--keyline, rgba(38, 38, 42, 0.25)) solid}.tna-header__navigation-item:first-child{border-top:none}.tna-header__navigation-item-link{display:block;line-height:1.75rem}.tna-header__navigation-item-link::after{width:0;height:auto;top:0;right:auto}.tna-header__navigation-item-link--selected::after{border-left:.5rem var(--keyline, rgba(38, 38, 42, 0.25)) solid}}@media(min-width: 30.0625em)and (max-width: 48em){.tna-header .tna-logo{width:4rem}.tna-header__logo-strapline{line-height:1.25rem}.tna-header__logo-wrapper,.tna-header__navigation-item-link,.tna-header__navigation-button-wrapper{padding-right:2rem}.tna-header__logo-wrapper,.tna-header__navigation-item-link{padding-left:2rem}.tna-header__top-navigation-items{padding-right:2rem;padding-left:2rem}}@media(max-width: 30em){.tna-header__navigation-button-wrapper,.tna-header__logo-wrapper{padding-right:1rem}.tna-header__logo-wrapper{padding-left:1rem}.tna-header .tna-logo{width:3.5rem}.tna-header__logo-strapline{font-size:.9rem;line-height:1.25}.tna-header__navigation-button{font-size:0.875rem}.tna-header__top-navigation-items{gap:.5rem}.tna-header__navigation-item-link{padding-right:1rem;padding-left:calc(1rem + .5rem)}}@media(forced-colors: active){.tna-header{border-bottom:1px var(--keyline, rgba(38, 38, 42, 0.25)) solid}}@media(prefers-contrast: more){.tna-header{border-bottom:1px var(--keyline, rgba(38, 38, 42, 0.25)) solid}}@media(forced-colors: active){.tna-header__navigation-button{height:auto;line-height:2;font-size:1.125rem;font-weight:700;border:none}.tna-header__hamburger{display:none}}/*# sourceMappingURL=header.css.map */
+.tna-header{--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);--accent-border: var(--accent-border-bright);background-color:var(--background, #f4f4f4);color:var(--font-base, #343338)}@media(max-width: 48em){.tna-header.tna-background-accent .tna-header__navigation{--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);--accent-border: var(--accent-border-bright);background-color:var(--background, #f4f4f4);color:var(--font-base, #343338)}}.tna-header{position:relative;background:linear-gradient(0deg, rgb(34, 34, 34) 0%, rgb(0, 0, 0) 100%)}.tna-template--dark-theme .tna-header{background:#010101}@media(prefers-color-scheme: dark){.tna-template--system-theme .tna-header{background:#010101}}@media(prefers-contrast: more){.tna-header{background:#010101}}.tna-header__contents.tna-container{justify-content:space-between}.tna-header__logo-wrapper{padding-top:1.25rem;padding-bottom:1.25rem}.tna-header__logo{display:flex;align-items:flex-end;color:inherit;text-decoration:none}.tna-header__logo--link,.tna-header__logo--link:link,.tna-header__logo--link:visited{color:inherit}.tna-header__logo--link:hover:not(:focus){text-decoration:none;outline:.3125rem var(--font-dark, rgb(1, 1, 1)) solid;outline-offset:1px}.tna-header__logo-strapline{margin:0 0.75rem;display:inline-block;line-height:1.625rem;font-family:supria-sans-condensed,"Arial Narrow",sans-serif;font-weight:500;font-size:1.25rem;text-transform:uppercase}.tna-header__navigation-button-wrapper{align-self:center;display:none}.tna-header__hamburger{width:2rem;height:.25rem;display:inline-block;background-color:var(--font-dark, rgb(1, 1, 1))}.tna-header__hamburger::before,.tna-header__hamburger::after{content:"";width:2rem;height:.25rem;display:block;position:absolute;right:0;background-color:inherit}.tna-header__hamburger::before{top:0}.tna-header__hamburger::after{bottom:0}.tna-header__navigation-button{height:2rem;padding:0;appearance:none;display:flex;align-items:center;gap:.75rem;position:relative;color:inherit;font-weight:700;font-size:1rem;background:none;border:0 rgba(0,0,0,0) solid;border-width:.25rem 0;border-radius:.1px;cursor:pointer}.tna-header__navigation-button:hover{text-decoration:underline;text-decoration-thickness:0.25rem;text-underline-offset:.125em}.tna-header__navigation-button--opened .tna-header__hamburger{height:0}.tna-header__navigation-button--opened .tna-header__hamburger::before{top:.625rem;transform:rotate(-135deg)}.tna-header__navigation-button--opened .tna-header__hamburger::after{bottom:.625rem;transform:rotate(135deg)}.tna-header__navigation{display:flex;flex-direction:column-reverse;align-items:flex-end;justify-content:space-between;position:relative;z-index:2}.tna-header__top-navigation-items{margin:0;padding:1.25rem 0;display:flex;justify-content:flex-end;gap:0.5rem 1.5rem;line-height:1;list-style:none;font-size:0.9375rem}.tna-header__top-navigation-item{display:block}.tna-header__top-navigation-item-link{display:flex;align-items:center;text-decoration:none}.tna-header__top-navigation-item-link,.tna-header__top-navigation-item-link:link,.tna-header__top-navigation-item-link:visited{color:var(--font-light, rgba(1, 1, 1, 0.58))}.tna-header__top-navigation-item-link:hover,.tna-header__top-navigation-item-link:hover:link,.tna-header__top-navigation-item-link:hover:visited,.tna-header__top-navigation-item-link:focus-visible,.tna-header__top-navigation-item-link:focus-visible:link,.tna-header__top-navigation-item-link:focus-visible:visited,.tna-header__top-navigation-item-link--selected,.tna-header__top-navigation-item-link--selected:link,.tna-header__top-navigation-item-link--selected:visited{color:var(--font-base, #343338)}.tna-header__top-navigation-item-link:hover,.tna-header__top-navigation-item-link--selected{text-decoration:underline;text-decoration-thickness:0.25rem;text-underline-offset:.125em}.tna-header__top-navigation-item-link .fa-solid{margin-right:0.375rem}.tna-header__navigation-items{margin:0;padding:0;display:flex;flex-wrap:nowrap;gap:2rem;white-space:nowrap;list-style:none}.tna-header__navigation-item-link{padding:0.5rem 0;display:inline-block;position:relative;line-height:2;text-decoration:none;font-weight:600}.tna-header__navigation-item-link::after{content:"";height:0;position:absolute;right:0;bottom:0;left:0;background-color:var(--font-dark, rgb(1, 1, 1))}.tna-header__navigation-item-link,.tna-header__navigation-item-link:link,.tna-header__navigation-item-link:visited{color:inherit}.tna-header__navigation-item-link--selected::after{border-top:5px var(--keyline-dark, rgb(38, 38, 42)) solid}.tna-header.tna-background-accent{background:var(--background, #f4f4f4)}.tna-header .tna-logo{width:5rem;flex-shrink:0}@media(max-width: 48em){.tna-header__logo-wrapper{padding-top:1rem;padding-bottom:1rem}.tna-header__contents.tna-container{padding-right:0;padding-left:0}.tna-header__navigation-button-wrapper{display:block}.tna-header__navigation-button-wrapper.tna-column{padding-left:0}.tna-header__navigation{flex-direction:column;align-items:stretch}.tna-header__navigation.tna-column{padding-right:0;padding-left:0}.tna-header__top-navigation-items{padding:0.5rem 1rem;justify-content:flex-start;border-bottom:1px var(--keyline, rgba(38, 38, 42, 0.25)) solid}.tna-header__top-navigation-item{margin:0}.tna-header__top-navigation-item-link{padding:0.5rem 0}.tna-header__top-navigation-item-link,.tna-header__top-navigation-item-link:link,.tna-header__top-navigation-item-link:visited{color:var(--font-light, rgba(1, 1, 1, 0.58))}.tna-header__top-navigation-item-link:hover,.tna-header__top-navigation-item-link:focus-visible{color:var(--font-dark, rgb(1, 1, 1))}.tna-header__navigation-items{width:100%;flex-direction:column;gap:0;background-color:rgba(255,255,255,.1);border-top:2px var(--keyline-dark, rgb(38, 38, 42)) solid;border-bottom:2px var(--keyline-dark, rgb(38, 38, 42)) solid}.tna-header__navigation-item{margin:0;display:block;border-top:1px var(--keyline, rgba(38, 38, 42, 0.25)) solid}.tna-header__navigation-item:first-child{border-top:none}.tna-header__navigation-item-link{display:block;line-height:1.75rem}.tna-header__navigation-item-link::after{width:0;height:auto;top:0;right:auto}.tna-header__navigation-item-link--selected::after{border-left:.5rem var(--keyline, rgba(38, 38, 42, 0.25)) solid}}@media(min-width: 30.0625em)and (max-width: 48em){.tna-header .tna-logo{width:4rem}.tna-header__logo-strapline{line-height:1.25rem}.tna-header__logo-wrapper,.tna-header__navigation-item-link,.tna-header__navigation-button-wrapper{padding-right:2rem}.tna-header__logo-wrapper,.tna-header__navigation-item-link{padding-left:2rem}.tna-header__top-navigation-items{padding-right:2rem;padding-left:2rem}}@media(max-width: 30em){.tna-header__navigation-button-wrapper,.tna-header__logo-wrapper{padding-right:1rem}.tna-header__logo-wrapper{padding-left:1rem}.tna-header .tna-logo{width:3.5rem}.tna-header__logo-strapline{font-size:.9rem;line-height:1.25}.tna-header__navigation-button{font-size:0.875rem}.tna-header__top-navigation-items{gap:.5rem}.tna-header__navigation-item-link{padding-right:1rem;padding-left:calc(1rem + .5rem)}}@media(forced-colors: active){.tna-header{border-bottom:1px var(--keyline, rgba(38, 38, 42, 0.25)) solid}}@media(prefers-contrast: more){.tna-header{border-bottom:1px var(--keyline, rgba(38, 38, 42, 0.25)) solid}}@media(forced-colors: active){.tna-header__navigation-button{height:auto;line-height:2;font-size:1.125rem;font-weight:700;border:none}.tna-header__hamburger{display:none}}/*# sourceMappingURL=header.css.map */

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

@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["../../../../src/nationalarchives/tools/_colour.scss","../../../../src/nationalarchives/tools/_media.scss","../../../../src/nationalarchives/components/header/header.scss","../../../../src/nationalarchives/tools/_typography.scss","../../../../src/nationalarchives/variables/_typography.scss"],"names":[],"mappings":"AA8OA,YACE,yCACA,uCACA,uCACA,yCACA,yCACA,6BACA,6CACA,mCACA,6CACA,2CACA,uDACA,uDACA,mEACA,6CA3KA,4CAJA,gCCKA,wBDqLF,0DAEI,yCACA,uCACA,uCACA,yCACA,yCACA,6BACA,6CACA,mCACA,6CACA,2CACA,uDACA,uDACA,mEACA,6CArMF,4CAJA,iCEtEF,YAGE,kBAEA,wEAMA,sCACE,mBAIA,mCADF,wCAEI,oBFweJ,+BEzfF,YAsBI,oBAIA,oCACE,8BAIJ,0BACE,oBACA,uBAGF,kBACE,aACA,qBAEA,cACA,qBAGE,qFAGE,cAGF,0CACE,qBFmEJ,sDEhEI,mBAKN,4BACE,iBAEA,qBAEA,qBChCF,YCmBA,gDDlBA,YCqBoB,IDvDpB,kBDoEE,yBAGF,uCACE,kBAEA,aAGF,uBACE,WACA,cAEA,qBFNF,gDEUE,6DAEE,WAEA,WACA,cAEA,cAEA,kBACA,QAEA,yBAGF,+BACE,MAGF,8BACE,SAIJ,+BACE,YACA,UAEA,gBAEA,aACA,mBACA,WAEA,kBAEA,cCxGF,YCiBsB,IDlCtB,eD6HE,gBAEA,6BACA,sBACA,mBAEA,eAEA,qCCxEF,0BACA,0BCpCsC,QDqCtC,sBCvCoC,OFkHhC,8DACE,SAEA,sEACE,YAEA,0BAGF,qEACE,eAEA,yBAMR,wBACE,aACA,8BACA,qBACA,8BAEA,kBACA,UAGF,kCACE,SACA,kBAEA,aACA,yBACA,kBAEA,cAEA,gBChLF,oBDqLA,iCACE,cAGF,sCACE,aACA,mBAEA,qBAEA,+HFxHF,6CEiII,udFjIJ,gCEwIE,4FClJF,0BACA,0BCpCsC,QDqCtC,sBCvCoC,OF4LlC,gDACE,sBAIJ,8BACE,SACA,UAEA,aACA,iBACA,SAEA,mBAEA,gBAMF,kCACE,iBAEA,qBAEA,kBAEA,cACA,qBCpOF,YCoBwB,IFoNtB,yCACE,WAEA,SAEA,kBACA,QACA,SACA,OFlLJ,gDEuLE,mHAGE,cAIA,mDF5KA,0DEkLJ,kCACE,sCAOF,sBACE,WAEA,cD9MF,wBCkNE,0BACE,iBACA,oBAIA,oCACE,gBACA,eAIJ,uCACE,cAEA,kDACE,eAIJ,wBACE,sBACA,oBAEA,mCACE,gBACA,eAIJ,kCACE,oBAEA,2BFlOA,+DEuOF,iCACE,SAGF,sCACE,iBAEA,+HFpQJ,6CE0QI,gGF1QJ,qCEgRE,8BACE,WAEA,sBACA,MAEA,oCFhQA,uHEsQF,6BACE,SAEA,cFzQA,4DE6QA,yCACE,gBAIJ,kCACE,cAEA,oBAEA,yCACE,QACA,YAEA,MACA,WAIA,mDFhSF,gEC/CJ,kDCuVE,sBACE,WAGF,4BACE,oBAGF,mGAGE,mBAGF,4DAEE,kBAGF,kCACE,mBACA,mBDtWJ,wBC2WE,iEAEE,mBAGF,0BACE,kBAGF,sBACE,aAGF,4BACE,gBACA,iBAGF,+BCjbF,mBDqbE,kCACE,UAGF,kCACE,mBACA,iCFqEJ,8BE/fF,YF4FM,gEA6ZJ,+BEzfF,YF4FM,gEAmaJ,8BE5DE,+BACE,YAEA,cCvcJ,mBAiBA,YCiBsB,IFyalB,YAGF,uBACE","file":"header.css","sourcesContent":["@use \"sass:list\";\n@use \"sass:map\";\n@use \"sass:meta\";\n@use \"../variables/borders\";\n@use \"../variables/forms\";\n@use \"../variables/colour\";\n@use \"../variables/features\";\n@use \"../tools/media\";\n\n$base-colours: (\n  \"background\",\n  \"font-base\",\n  \"font-dark\",\n  \"font-light\",\n  \"icon-light\",\n  \"link\",\n  \"link-visited\",\n  \"keyline\",\n  \"keyline-dark\"\n);\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      @if list.index($base-colours, $name) {\n        --base-#{$name}: #{$value};\n      }\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      @if list.index($base-colours, $name) {\n        --base-#{$name}: #{$value};\n      }\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      @if list.index($base-colours, $name) {\n        --base-#{$name}: #{$value};\n      }\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      @if list.index((\"keyline\", \"keyline-dark\"), $name) {\n        --base-#{$name}: #{$value};\n      }\n    }\n  }\n}\n\n@function colour-var($colour) {\n  @return var(\n    --#{$colour},\n    #{map.get(colour.$colour-palette-default, $colour)}\n  );\n}\n\n@mixin colour-font($colour, $important: false) {\n  color: colour-var($colour) if(sass($important): !important; else: null);\n}\n\n@mixin colour-background($colour, $important: false) {\n  background-color: colour-var($colour)\n    if(sass($important): !important; else: null);\n}\n\n@mixin colour-background-brand($brandColour, $important: false) {\n  background-color: #{brand-colour($brandColour)}\n    if(sass($important): !important; else: 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      border-#{$direction}: $width\n        colour-var($colour)\n        $style\n        if(sass($important): !important; else: null);\n    } @else {\n      border-#{$direction}-color: colour-var($colour)\n        if(sass($important): !important; else: null);\n    }\n  } @else {\n    @if $width != \"\" {\n      border: $width\n        colour-var($colour)\n        $style\n        if(sass($important): !important; else: null);\n    } @else {\n      border-color: var(\n          --#{$colour},\n          #{map.get(colour.$colour-palette-default, $colour)}\n        )\n        if(sass($important): !important; else: null);\n    }\n  }\n}\n\n@mixin colour-outline($colour, $width: \"\", $style: solid, $important: false) {\n  @if $width != \"\" {\n    outline: $width\n      colour-var($colour)\n      $style\n      if(sass($important): !important; else: null);\n  } @else {\n    outline-color: colour-var($colour)\n      if(sass($important): !important; else: null);\n  }\n}\n\n@mixin colour-fill($colour, $important: false) {\n  fill: colour-var($colour) if(sass($important): !important; else: null);\n}\n\n%colour-input {\n  @include colour-font(\"input-foreground\");\n  @include colour-background(\"input-background\");\n  @include colour-border(\"input-border\", forms.$form-field-border-width);\n}\n\n@mixin colour-input() {\n  @extend %colour-input;\n}\n\n@mixin thick-keyline($direction: \"\", $veryThick: false) {\n  $border-width: borders.$thick-border-width;\n  @if $veryThick {\n    $border-width: borders.$very-thick-border-width;\n  }\n  @if $direction != \"\" {\n    @include colour-border(\"keyline\", $border-width, solid, $direction);\n  } @else {\n    @include colour-border(\"keyline\", $border-width, solid);\n  }\n}\n\n@mixin thick-keyline-dark($direction: \"\", $veryThick: false) {\n  $border-width: borders.$thick-border-width;\n  @if $veryThick {\n    $border-width: borders.$very-thick-border-width;\n  }\n  @if $direction != \"\" {\n    @include colour-border(\"keyline-dark\", $border-width, solid, $direction);\n  } @else {\n    @include colour-border(\"keyline-dark\", $border-width, solid);\n  }\n}\n\n@mixin thick-keyline-accent($direction: \"\", $veryThick: false) {\n  $border-width: borders.$thick-border-width;\n  @if $veryThick {\n    $border-width: borders.$very-thick-border-width;\n  }\n  @if $direction != \"\" {\n    @include colour-border(\"accent-border\", $border-width, solid, $direction);\n  } @else {\n    @include colour-border(\"accent-border\", $border-width, solid);\n  }\n}\n\n@mixin thick-keyline-error($direction: \"\", $veryThick: false) {\n  $border-width: borders.$thick-border-width;\n  @if $veryThick {\n    $border-width: borders.$very-thick-border-width;\n  }\n  @if $direction != \"\" {\n    @include colour-border(\n      \"form-error-border\",\n      $border-width,\n      solid,\n      $direction\n    );\n  } @else {\n    @include colour-border(\"form-error-border\", $border-width, solid);\n  }\n}\n\n@mixin thick-keyline-brand($direction: \"\", $brandColour, $veryThick: false) {\n  $border-width: borders.$thick-border-width;\n  @if $veryThick {\n    $border-width: borders.$very-thick-border-width;\n  }\n  @if $direction != \"\" {\n    border-#{$direction}: $border-width #{brand-colour($brandColour)} solid;\n  } @else {\n    border: $border-width #{brand-colour($brandColour)} solid;\n  }\n}\n\n@mixin thick-keyline-transparent($direction: \"\", $veryThick: false) {\n  $border-width: borders.$thick-border-width;\n  @if $veryThick {\n    $border-width: borders.$very-thick-border-width;\n  }\n  @if $direction != \"\" {\n    border-#{$direction}: $border-width transparent solid;\n  } @else {\n    border: $border-width transparent solid;\n  }\n}\n\n%always-light {\n  @include colour-css-vars;\n\n  @media (prefers-contrast: more) {\n    @include colour-css-vars-high-contrast;\n  }\n}\n\n@mixin always-light {\n  @extend %always-light;\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  --accent-border: var(--accent-border-bright);\n\n  @include colour-background(\"background\");\n\n  @include colour-font(\"font-base\");\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    --accent-border: var(--accent-border-bright);\n\n    @include colour-background(\"background\");\n\n    @include colour-font(\"font-base\");\n  }\n}\n\n@mixin contrast-on-mobile {\n  @extend %contrast-on-mobile;\n}\n\n%base {\n  @each $name, $value in $base-colours {\n    --#{$name}: var(--base-#{$value});\n  }\n\n  @include colour-background(\"background\");\n\n  @include colour-font(\"font-base\");\n}\n\n@mixin base {\n  @extend %base;\n}\n\n%tint {\n  --background: var(--background-tint);\n\n  @include colour-background(\"background\");\n}\n\n@mixin tint {\n  @extend %tint;\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  --accent-border: var(--accent-font-dark);\n  --button-text: var(--accent-button-text);\n  --button-background: var(--accent-button-background);\n  --button-hover-text: var(--accent-button-hover-text);\n  --button-hover-background: var(--accent-button-hover-background);\n\n  @include colour-background(\"background\");\n\n  @include colour-font(\"font-base\");\n}\n\n@mixin accent {\n  @extend %accent;\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  --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  --accent-border: var(--accent-background);\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      --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      --accent-border: var(--accent-font-dark);\n      --button-text: var(--accent-button-text);\n      --button-background: var(--accent-button-background);\n      --button-hover-text: var(--accent-button-hover-text);\n      --button-hover-background: var(--accent-button-hover-background);\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    --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    --accent-border: var(--accent-font-dark);\n    --button-text: var(--accent-button-text);\n    --button-background: var(--accent-button-background);\n    --button-hover-text: var(--accent-button-hover-text);\n    --button-hover-background: var(--accent-button-hover-background);\n  }\n}\n\n@mixin accent-light {\n  @extend %accent-light;\n}\n\n%yellow-accent {\n  --accent-background: #{colour.brand-colour(\"yellow\")} !important;\n  --accent-background-light: #{colour.brand-colour(\"cream\")} !important;\n  --accent-border: #{colour.brand-colour(\"yellow\")} !important;\n  --accent-border-bright: #{colour.brand-colour(\"yellow\")} !important;\n  --accent-font-base: #{colour.brand-colour(\"black\")} !important;\n  --accent-font-dark: #{colour.brand-colour(\"black\")} !important;\n  --accent-font-light: #{colour.brand-colour(\"black\", 0.7)} !important;\n  --accent-icon-light: #{colour.brand-colour(\"black\", 0.7)} !important;\n  --accent-link: #{colour.brand-colour(\"black\")} !important;\n  --accent-link-visited: #{colour.brand-colour(\"black\")} !important;\n  --accent-keyline: #{colour.brand-colour(\"black\", 0.5)} !important;\n  --accent-keyline-dark: #{colour.brand-colour(\"black\", 0.8)} !important;\n  --button-accented-text: #{colour.brand-colour(\"black\")} !important;\n  --button-accented-background: #{colour.brand-colour(\"yellow\")} !important;\n}\n\n@mixin yellow-accent {\n  @extend %yellow-accent;\n}\n\n%accent-lighter-text {\n  --accent-font-base: #{colour.brand-colour(\"white\")} !important;\n  --accent-font-dark: #{colour.brand-colour(\"white\")} !important;\n  --accent-font-light: #{colour.brand-colour(\"white\", 0.7)} !important;\n  --accent-icon-light: #{colour.brand-colour(\"white\", 0.7)} !important;\n  --accent-link: #{colour.brand-colour(\"white\")} !important;\n  --accent-link-visited: #{colour.brand-colour(\"white\")} !important;\n  --accent-keyline: #{colour.brand-colour(\"white\", 0.5)} !important;\n  --accent-keyline-dark: #{colour.brand-colour(\"white\", 0.8)} !important;\n  --button-accented-text: #{colour.brand-colour(\"white\")} !important;\n}\n\n%black-accent {\n  --accent-background: #{colour.brand-colour(\"black\")} !important;\n  --accent-background-light: #{colour.brand-colour(\"light-grey\")} !important;\n  --accent-border: #{colour.brand-colour(\"black\")} !important;\n  --accent-border-bright: #{colour.brand-colour(\"grey\")} !important;\n  --button-accented-text: #{colour.brand-colour(\"black\")} !important;\n  --button-accented-background: #{colour.brand-colour(\"grey\")} !important;\n}\n\n@mixin black-accent {\n  @extend %accent-lighter-text;\n  @extend %black-accent;\n}\n\n%pink-accent {\n  --accent-background: #{colour.brand-colour(\"maroon\")} !important;\n  --accent-background-light: #{colour.brand-colour(\"pastel-pink\")} !important;\n  --accent-border: #{colour.brand-colour(\"maroon\")} !important;\n  --accent-border-bright: #{colour.brand-colour(\"pink\")} !important;\n  --button-accented-background: #{colour.brand-colour(\"maroon\")} !important;\n}\n\n@mixin pink-accent {\n  @extend %accent-lighter-text;\n  @extend %pink-accent;\n}\n\n%orange-accent {\n  --accent-background: #{colour.brand-colour(\"chestnut\")} !important;\n  --accent-background-light: #{colour.brand-colour(\"pastel-orange\")} !important;\n  --accent-border: #{colour.brand-colour(\"chestnut\")} !important;\n  --accent-border-bright: #{colour.brand-colour(\"orange\")} !important;\n  --button-accented-background: #{colour.brand-colour(\"chestnut\")} !important;\n}\n\n@mixin orange-accent {\n  @extend %accent-lighter-text;\n  @extend %orange-accent;\n}\n\n%green-accent {\n  --accent-background: #{colour.brand-colour(\"forest\")} !important;\n  --accent-background-light: #{colour.brand-colour(\"pastel-green\")} !important;\n  --accent-border: #{colour.brand-colour(\"forest\")} !important;\n  --accent-border-bright: #{colour.brand-colour(\"green\")} !important;\n  --button-accented-background: #{colour.brand-colour(\"forest\")} !important;\n}\n\n@mixin green-accent {\n  @extend %accent-lighter-text;\n  @extend %green-accent;\n}\n\n%blue-accent {\n  --accent-background: #{colour.brand-colour(\"navy\")} !important;\n  --accent-background-light: #{colour.brand-colour(\"pastel-blue\")} !important;\n  --accent-border: #{colour.brand-colour(\"navy\")} !important;\n  --accent-border-bright: #{colour.brand-colour(\"blue\")} !important;\n  --button-accented-background: #{colour.brand-colour(\"navy\")} !important;\n}\n\n@mixin blue-accent {\n  @extend %accent-lighter-text;\n  @extend %blue-accent;\n}\n\n@mixin on-high-contrast {\n  @media (prefers-contrast: more) {\n    @content;\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\n%image-loader-background {\n  background: linear-gradient(\n    -45deg,\n    rgb(0 0 0 / 25%),\n    rgb(255 255 255 / 25%),\n    rgb(0 0 0 / 25%)\n  );\n  background-size: 500% 500%;\n  background-position: 0 50%;\n\n  animation: image-loader-background ease-in-out 1.2s infinite;\n\n  @media (prefers-reduced-motion) {\n    animation: none !important;\n  }\n}\n\n@mixin image-loader-background {\n  @if features.$image-loader-animations {\n    @extend %image-loader-background;\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 \"sass:math\";\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: linear-gradient(\n    0deg,\n    rgb(34 34 34 / 100%) 0%,\n    rgb(0 0 0 / 100%) 100%\n  );\n\n  .tna-template--dark-theme & {\n    background: colour.brand-colour(\"black\");\n  }\n\n  .tna-template--system-theme & {\n    @media (prefers-color-scheme: dark) {\n      background: colour.brand-colour(\"black\");\n    }\n  }\n\n  @include colour.on-high-contrast {\n    background: colour.brand-colour(\"black\");\n  }\n\n  &__contents {\n    &.tna-container {\n      justify-content: space-between;\n    }\n  }\n\n  &__logo-wrapper {\n    padding-top: spacing.space(1.25);\n    padding-bottom: spacing.space(1.25);\n  }\n\n  &__logo {\n    display: flex;\n    align-items: flex-end;\n\n    color: inherit;\n    text-decoration: none;\n\n    &--link {\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\n  &__logo-strapline {\n    margin: 0 spacing.space(0.75);\n\n    display: inline-block;\n\n    line-height: 1.625rem;\n    @include typography.heading-font;\n    @include typography.font-size(20);\n    text-transform: uppercase;\n  }\n\n  &__navigation-button-wrapper {\n    align-self: center;\n\n    display: none;\n  }\n\n  &__hamburger {\n    width: 2rem;\n    height: 0.25rem;\n\n    display: inline-block;\n\n    @include colour.colour-background(\"font-dark\");\n\n    &::before,\n    &::after {\n      content: \"\";\n\n      width: 2rem;\n      height: 0.25rem;\n\n      display: block;\n\n      position: absolute;\n      right: 0;\n\n      background-color: inherit;\n    }\n\n    &::before {\n      top: 0;\n    }\n\n    &::after {\n      bottom: 0;\n    }\n  }\n\n  &__navigation-button {\n    height: 2rem;\n    padding: 0;\n\n    appearance: none;\n\n    display: flex;\n    align-items: center;\n    gap: 0.75rem;\n\n    position: relative;\n\n    color: inherit;\n    @include typography.main-font-weight-bold;\n    @include typography.font-size(16);\n\n    background: none;\n\n    border: 0 transparent solid;\n    border-width: 0.25rem 0;\n    border-radius: 0.1px;\n\n    cursor: pointer;\n\n    &:hover {\n      @include typography.interacted-text-decoration;\n    }\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    align-items: flex-end;\n    justify-content: space-between;\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    line-height: 1;\n\n    list-style: none;\n\n    @include typography.font-size(15);\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    &:focus-visible,\n    &--selected {\n      &,\n      &:link,\n      &:visited {\n        @include colour.colour-font(\"font-base\");\n      }\n    }\n\n    &:hover,\n    &--selected {\n      @include typography.interacted-text-decoration;\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    white-space: nowrap;\n\n    list-style: none;\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    line-height: 2;\n    text-decoration: none;\n\n    @include typography.main-font-weight-medium;\n\n    &::after {\n      content: \"\";\n\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\n    &,\n    &:link,\n    &:visited {\n      color: inherit;\n    }\n\n    &--selected {\n      &::after {\n        @include colour.thick-keyline-dark(top);\n      }\n    }\n  }\n\n  &.tna-background-accent {\n    background: colour.colour-var(\"background\");\n  }\n\n  &.tna-background-accent &__navigation {\n    @include colour.contrast-on-mobile;\n  }\n\n  .tna-logo {\n    width: 5rem;\n\n    flex-shrink: 0;\n  }\n\n  @include media.on-mobile {\n    &__logo-wrapper {\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-button-wrapper {\n      display: block;\n\n      &.tna-column {\n        padding-left: 0;\n      }\n    }\n\n    &__navigation {\n      flex-direction: column;\n      align-items: stretch;\n\n      &.tna-column {\n        padding-right: 0;\n        padding-left: 0;\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    }\n\n    &__top-navigation-item-link {\n      padding: spacing.space(0.5) 0;\n\n      &,\n      &:link,\n      &:visited {\n        @include colour.colour-font(\"font-light\");\n      }\n\n      &:hover,\n      &:focus-visible {\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        width: 0;\n        height: auto;\n\n        top: 0;\n        right: auto;\n      }\n\n      &--selected {\n        &::after {\n          @include colour.colour-border(\"keyline\", 0.5rem, solid, left);\n        }\n      }\n    }\n  }\n\n  @include media.on-small {\n    .tna-logo {\n      width: 4rem;\n    }\n\n    &__logo-strapline {\n      line-height: 1.25rem;\n    }\n\n    &__logo-wrapper,\n    &__navigation-item-link,\n    &__navigation-button-wrapper {\n      padding-right: grid.gutter-width();\n    }\n\n    &__logo-wrapper,\n    &__navigation-item-link {\n      padding-left: grid.gutter-width();\n    }\n\n    &__top-navigation-items {\n      padding-right: grid.gutter-width();\n      padding-left: grid.gutter-width();\n    }\n  }\n\n  @include media.on-tiny {\n    &__navigation-button-wrapper,\n    &__logo-wrapper {\n      padding-right: grid.gutter-width-tiny();\n    }\n\n    &__logo-wrapper {\n      padding-left: grid.gutter-width-tiny();\n    }\n\n    .tna-logo {\n      width: 3.5rem;\n    }\n\n    &__logo-strapline {\n      font-size: 0.9rem;\n      line-height: 1.25;\n    }\n\n    &__navigation-button {\n      @include typography.font-size(14);\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-and-forced-colours {\n    @include colour.colour-border(\"keyline\", 1px, solid, bottom);\n  }\n\n  @include colour.on-forced-colours {\n    &__navigation-button {\n      height: auto;\n\n      line-height: 2;\n      @include typography.font-size(18);\n      @include typography.main-font-weight-bold;\n\n      border: none;\n    }\n\n    &__hamburger {\n      display: none;\n    }\n  }\n}\n","@use \"sass:math\";\n@use \"../variables/typography\";\n@use \"colour\";\n@use \"media\";\n\n@mixin font-size($font-size-px) {\n  font-size: #{math.div($font-size-px, typography.$relative-1rem-px)}rem;\n}\n\n@mixin relative-font-size($font-size-px) {\n  @warn \"relative-font-size() will soon be deprecated in favour of font-size().\";\n  @include font-size($font-size-px);\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  font-variation-settings: \"wdth\" 100;\n  font-style: normal;\n  font-optical-sizing: auto;\n  @if $bold {\n    @include main-font-weight-bold;\n  } @else {\n    @include main-font-weight;\n  }\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  font-style: normal;\n  font-optical-sizing: auto;\n  @if $bold {\n    font-weight: typography.$detail-font-weight-bold;\n  } @else {\n    font-weight: typography.$detail-font-weight;\n  }\n}\n\n@mixin detail-font-small {\n  @include detail-font;\n  @include font-size(14);\n  line-height: 1.1;\n  text-transform: uppercase;\n}\n\n@mixin interactable-text-decoration {\n  text-decoration-thickness: typography.$interactable-text-decoration-thickness;\n  text-underline-offset: typography.$interactable-text-decoration-offset;\n}\n\n@mixin interacted-text-decoration {\n  text-decoration: underline;\n  text-decoration-thickness: typography.$interactive-text-decoration-thickness;\n  text-underline-offset: typography.$interactable-text-decoration-offset;\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  $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  line-height: $line-height;\n  @include font-size($font-size-default);\n\n  @if $all-identical != true {\n    @if $medium-small-and-tiny-identical != true {\n      @include media.on-medium {\n        @include font-size($font-size-medium);\n      }\n\n      @if $small-and-tiny-identical != true {\n        @include media.on-small {\n          @include font-size($font-size-small);\n        }\n\n        @include media.on-tiny {\n          @include font-size($font-size-tiny);\n        }\n      } @else {\n        @include media.on-mobile {\n          @include font-size($font-size-small);\n        }\n      }\n    } @else {\n      @include media.on-smaller-than-large {\n        @include font-size($font-size-medium);\n      }\n    }\n  }\n}\n","@use \"sass:math\";\n\n/*\n * ------------------------------------------\n * The typefaces, sizes and spacings that are\n * defined in this file have been selected to\n * ensure 100% match with the latest National\n * Archives brand guidelines - avoid changing\n * or overwriting any of these values without\n * signing off with the Digital Services team\n * first\n * ------------------------------------------\n */\n\n$relative-1rem-px: 16; // 16px = 1rem\n\n/*\n * ------------------------------------------\n * When true, use the included font files for\n * Open Sans and Roboto Mono, rather than the\n * versions hosted by Google Fonts\n * ------------------------------------------\n */\n$use-local-fonts: false !default;\n\n$body-font-size-px: 19 !default;\n$body-font-size-px-medium: 18 !default;\n$body-font-size-px-mobile: 17 !default;\n$body-line-height: 1.75 !default;\n\n$interactable-text-decoration-offset: 0.125em !default;\n$interactable-text-decoration-thickness: #{math.div(1.5, $relative-1rem-px)}rem !default;\n$interactive-text-decoration-thickness: #{math.div(4, $relative-1rem-px)}rem !default;\n\n$main-font-family-name: \"Open Sans\" !default;\n$main-font-family:\n  #{$main-font-family-name},\n  sans-serif;\n$main-font-weight: 400 !default;\n$main-font-weight-medium: 600 !default;\n$main-font-weight-bold: 700 !default;\n$main-font-file: \"OpenSans-Regular.ttf\" !default;\n$main-font-file-medium: \"OpenSans-SemiBold.ttf\" !default;\n$main-font-file-bold: \"OpenSans-Bold.ttf\" !default;\n\n/*\n * ------------------------------------------\n * To use Supria Sans Condensed (which is the\n * approved heading typeface for The National\n * Archives), you need to obtain a licence to\n * properly embed the CSS files with the font\n * definitions in your service - check with a\n * member of the Digital Services team on how\n * to get a licence\n * ------------------------------------------\n */\n$heading-font-family-name: \"supria-sans-condensed\" !default;\n$heading-font-family:\n  #{$heading-font-family-name},\n  \"Arial Narrow\",\n  sans-serif;\n$heading-font-weight: 500 !default;\n\n/*\n * ------------------------------------------\n * The detail font should be a monospace font\n * and is used for chips, supertitles as well\n * as the date search component\n * ------------------------------------------\n */\n$detail-font-family-name: \"Roboto Mono\" !default;\n$detail-font-family:\n  #{$detail-font-family-name},\n  monospace;\n$detail-font-weight: 400 !default;\n$detail-font-weight-bold: 500 !default;\n$detail-font-file: \"RobotoMono-Regular.ttf\" !default;\n$detail-font-file-bold: \"RobotoMono-Medium.ttf\" !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: 32 !default;\n$heading-l-font-size-small: 29 !default;\n$heading-l-font-size-tiny: $heading-l-font-size-small !default;\n$heading-l-line-height: 1.15 !default;\n\n$heading-m-font-size-default: 22 !default;\n$heading-m-font-size-medium: $heading-m-font-size-default !default;\n$heading-m-font-size-small: 21 !default;\n$heading-m-font-size-tiny: $heading-m-font-size-small !default;\n$heading-m-line-height: 1.4 !default;\n\n$heading-s-font-size-default: 19 !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.5 !default;\n\n$code-font-family: Consolas, Monaco, \"Ubuntu Mono\", monospace !default;\n"]}
+{"version":3,"sourceRoot":"","sources":["../../../../src/nationalarchives/tools/_colour.scss","../../../../src/nationalarchives/tools/_media.scss","../../../../src/nationalarchives/components/header/header.scss","../../../../src/nationalarchives/tools/_typography.scss","../../../../src/nationalarchives/variables/_typography.scss"],"names":[],"mappings":"AAmPA,YACE,yCACA,uCACA,uCACA,yCACA,yCACA,6BACA,6CACA,mCACA,6CACA,2CACA,uDACA,uDACA,mEACA,6CA/KA,4CAJA,gCCIA,wBD0LF,0DAEI,yCACA,uCACA,uCACA,yCACA,yCACA,6BACA,6CACA,mCACA,6CACA,2CACA,uDACA,uDACA,mEACA,6CAzMF,4CAJA,iCEvEF,YAGE,kBAEA,wEAMA,sCACE,mBAIA,mCADF,wCAEI,oBF6eJ,+BE9fF,YAsBI,oBAIA,oCACE,8BAIJ,0BACE,oBACA,uBAGF,kBACE,aACA,qBAEA,cACA,qBAGE,qFAGE,cAGF,0CACE,qBFoEJ,sDEjEI,mBAKN,4BACE,iBAEA,qBAEA,qBChCF,YCmBA,gDDlBA,YCqBoB,IDvDpB,kBDoEE,yBAGF,uCACE,kBAEA,aAGF,uBACE,WACA,cAEA,qBFLF,gDESE,6DAEE,WAEA,WACA,cAEA,cAEA,kBACA,QAEA,yBAGF,+BACE,MAGF,8BACE,SAIJ,+BACE,YACA,UAEA,gBAEA,aACA,mBACA,WAEA,kBAEA,cCxGF,YCiBsB,IDlCtB,eD6HE,gBAEA,6BACA,sBACA,mBAEA,eAEA,qCCxEF,0BACA,0BCpCsC,QDqCtC,sBCvCoC,OFkHhC,8DACE,SAEA,sEACE,YAEA,0BAGF,qEACE,eAEA,yBAMR,wBACE,aACA,8BACA,qBACA,8BAEA,kBACA,UAGF,kCACE,SACA,kBAEA,aACA,yBACA,kBAEA,cAEA,gBChLF,oBDqLA,iCACE,cAGF,sCACE,aACA,mBAEA,qBAEA,+HFvHF,6CEgII,udFhIJ,gCEuIE,4FClJF,0BACA,0BCpCsC,QDqCtC,sBCvCoC,OF4LlC,gDACE,sBAIJ,8BACE,SACA,UAEA,aACA,iBACA,SAEA,mBAEA,gBAMF,kCACE,iBAEA,qBAEA,kBAEA,cACA,qBCpOF,YCoBwB,IFoNtB,yCACE,WAEA,SAEA,kBACA,QACA,SACA,OFjLJ,gDEsLE,mHAGE,cAIA,mDF3KA,0DEiLJ,kCACE,sCAOF,sBACE,WAEA,cD9MF,wBCkNE,0BACE,iBACA,oBAIA,oCACE,gBACA,eAIJ,uCACE,cAEA,kDACE,eAIJ,wBACE,sBACA,oBAEA,mCACE,gBACA,eAIJ,kCACE,oBAEA,2BFjOA,+DEsOF,iCACE,SAGF,sCACE,iBAEA,+HFnQJ,6CEyQI,gGFzQJ,qCE+QE,8BACE,WAEA,sBACA,MAEA,sCF/PA,uHEqQF,6BACE,SAEA,cFxQA,4DE4QA,yCACE,gBAIJ,kCACE,cAEA,oBAEA,yCACE,QACA,YAEA,MACA,WAIA,mDF/RF,gEChDJ,kDCuVE,sBACE,WAGF,4BACE,oBAGF,mGAGE,mBAGF,4DAEE,kBAGF,kCACE,mBACA,mBDtWJ,wBC2WE,iEAEE,mBAGF,0BACE,kBAGF,sBACE,aAGF,4BACE,gBACA,iBAGF,+BCjbF,mBDqbE,kCACE,UAGF,kCACE,mBACA,iCF0EJ,8BEpgBF,YF6FM,gEAiaJ,+BE9fF,YF6FM,gEAuaJ,8BEjEE,+BACE,YAEA,cCvcJ,mBAiBA,YCiBsB,IFyalB,YAGF,uBACE","file":"header.css","sourcesContent":["@use \"sass:list\";\n@use \"sass:map\";\n@use \"sass:meta\";\n@use \"../variables/a11y\";\n@use \"../variables/borders\";\n@use \"../variables/forms\";\n@use \"../variables/colour\";\n@use \"../variables/features\";\n@use \"../tools/media\";\n\n$base-colours: (\n  \"background\",\n  \"font-base\",\n  \"font-dark\",\n  \"font-light\",\n  \"icon-light\",\n  \"link\",\n  \"link-visited\",\n  \"keyline\",\n  \"keyline-dark\"\n);\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      @if list.index($base-colours, $name) {\n        --base-#{$name}: #{$value};\n      }\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      @if list.index($base-colours, $name) {\n        --base-#{$name}: #{$value};\n      }\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      @if list.index($base-colours, $name) {\n        --base-#{$name}: #{$value};\n      }\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      @if list.index((\"keyline\", \"keyline-dark\"), $name) {\n        --base-#{$name}: #{$value};\n      }\n    }\n  }\n}\n\n@function colour-var($colour) {\n  @return var(\n    --#{$colour},\n    #{map.get(colour.$colour-palette-default, $colour)}\n  );\n}\n\n@mixin colour-font($colour, $important: false) {\n  color: colour-var($colour) if(sass($important): !important; else: null);\n}\n\n@mixin colour-background($colour, $important: false) {\n  background-color: colour-var($colour)\n    if(sass($important): !important; else: null);\n}\n\n@mixin colour-background-brand($brandColour, $important: false) {\n  background-color: #{brand-colour($brandColour)}\n    if(sass($important): !important; else: 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      border-#{$direction}: $width\n        colour-var($colour)\n        $style\n        if(sass($important): !important; else: null);\n    } @else {\n      border-#{$direction}-color: colour-var($colour)\n        if(sass($important): !important; else: null);\n    }\n  } @else {\n    @if $width != \"\" {\n      border: $width\n        colour-var($colour)\n        $style\n        if(sass($important): !important; else: null);\n    } @else {\n      border-color: var(\n          --#{$colour},\n          #{map.get(colour.$colour-palette-default, $colour)}\n        )\n        if(sass($important): !important; else: null);\n    }\n  }\n}\n\n@mixin colour-outline($colour, $width: \"\", $style: solid, $important: false) {\n  @if $width != \"\" {\n    outline: $width\n      colour-var($colour)\n      $style\n      if(sass($important): !important; else: null);\n  } @else {\n    outline-color: colour-var($colour)\n      if(sass($important): !important; else: null);\n  }\n}\n\n@mixin colour-fill($colour, $important: false) {\n  fill: colour-var($colour) if(sass($important): !important; else: null);\n}\n\n%colour-input {\n  @include colour-font(\"input-foreground\");\n  @include colour-background(\"input-background\");\n  @include colour-border(\"input-border\", forms.$form-field-border-width);\n\n  &:hover {\n    outline: a11y.$focus-outline-active-total-width var(--keyline) solid;\n  }\n}\n\n@mixin colour-input() {\n  @extend %colour-input;\n}\n\n@mixin thick-keyline($direction: \"\", $veryThick: false) {\n  $border-width: borders.$thick-border-width;\n  @if $veryThick {\n    $border-width: borders.$very-thick-border-width;\n  }\n  @if $direction != \"\" {\n    @include colour-border(\"keyline\", $border-width, solid, $direction);\n  } @else {\n    @include colour-border(\"keyline\", $border-width, solid);\n  }\n}\n\n@mixin thick-keyline-dark($direction: \"\", $veryThick: false) {\n  $border-width: borders.$thick-border-width;\n  @if $veryThick {\n    $border-width: borders.$very-thick-border-width;\n  }\n  @if $direction != \"\" {\n    @include colour-border(\"keyline-dark\", $border-width, solid, $direction);\n  } @else {\n    @include colour-border(\"keyline-dark\", $border-width, solid);\n  }\n}\n\n@mixin thick-keyline-accent($direction: \"\", $veryThick: false) {\n  $border-width: borders.$thick-border-width;\n  @if $veryThick {\n    $border-width: borders.$very-thick-border-width;\n  }\n  @if $direction != \"\" {\n    @include colour-border(\"accent-border\", $border-width, solid, $direction);\n  } @else {\n    @include colour-border(\"accent-border\", $border-width, solid);\n  }\n}\n\n@mixin thick-keyline-error($direction: \"\", $veryThick: false) {\n  $border-width: borders.$thick-border-width;\n  @if $veryThick {\n    $border-width: borders.$very-thick-border-width;\n  }\n  @if $direction != \"\" {\n    @include colour-border(\n      \"form-error-border\",\n      $border-width,\n      solid,\n      $direction\n    );\n  } @else {\n    @include colour-border(\"form-error-border\", $border-width, solid);\n  }\n}\n\n@mixin thick-keyline-brand($direction: \"\", $brandColour, $veryThick: false) {\n  $border-width: borders.$thick-border-width;\n  @if $veryThick {\n    $border-width: borders.$very-thick-border-width;\n  }\n  @if $direction != \"\" {\n    border-#{$direction}: $border-width #{brand-colour($brandColour)} solid;\n  } @else {\n    border: $border-width #{brand-colour($brandColour)} solid;\n  }\n}\n\n@mixin thick-keyline-transparent($direction: \"\", $veryThick: false) {\n  $border-width: borders.$thick-border-width;\n  @if $veryThick {\n    $border-width: borders.$very-thick-border-width;\n  }\n  @if $direction != \"\" {\n    border-#{$direction}: $border-width transparent solid;\n  } @else {\n    border: $border-width transparent solid;\n  }\n}\n\n%always-light {\n  @include colour-css-vars;\n\n  @media (prefers-contrast: more) {\n    @include colour-css-vars-high-contrast;\n  }\n}\n\n@mixin always-light {\n  @extend %always-light;\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  --accent-border: var(--accent-border-bright);\n\n  @include colour-background(\"background\");\n\n  @include colour-font(\"font-base\");\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    --accent-border: var(--accent-border-bright);\n\n    @include colour-background(\"background\");\n\n    @include colour-font(\"font-base\");\n  }\n}\n\n@mixin contrast-on-mobile {\n  @extend %contrast-on-mobile;\n}\n\n%base {\n  @each $name, $value in $base-colours {\n    --#{$name}: var(--base-#{$value});\n  }\n\n  @include colour-background(\"background\");\n\n  @include colour-font(\"font-base\");\n}\n\n@mixin base {\n  @extend %base;\n}\n\n%tint {\n  --background: var(--background-tint);\n\n  @include colour-background(\"background\");\n}\n\n@mixin tint {\n  @extend %tint;\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  --accent-border: var(--accent-font-dark);\n  --button-text: var(--accent-button-text);\n  --button-background: var(--accent-button-background);\n  --button-hover-text: var(--accent-button-hover-text);\n  --button-hover-background: var(--accent-button-hover-background);\n\n  @include colour-background(\"background\");\n\n  @include colour-font(\"font-base\");\n}\n\n@mixin accent {\n  @extend %accent;\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  --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  --accent-border: var(--accent-background);\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      --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      --accent-border: var(--accent-font-dark);\n      --button-text: var(--accent-button-text);\n      --button-background: var(--accent-button-background);\n      --button-hover-text: var(--accent-button-hover-text);\n      --button-hover-background: var(--accent-button-hover-background);\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    --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    --accent-border: var(--accent-font-dark);\n    --button-text: var(--accent-button-text);\n    --button-background: var(--accent-button-background);\n    --button-hover-text: var(--accent-button-hover-text);\n    --button-hover-background: var(--accent-button-hover-background);\n  }\n}\n\n@mixin accent-light {\n  @extend %accent-light;\n}\n\n%yellow-accent {\n  --accent-background: #{colour.brand-colour(\"yellow\")} !important;\n  --accent-background-light: #{colour.brand-colour(\"cream\")} !important;\n  --accent-border: #{colour.brand-colour(\"yellow\")} !important;\n  --accent-border-bright: #{colour.brand-colour(\"yellow\")} !important;\n  --accent-font-base: #{colour.brand-colour(\"black\")} !important;\n  --accent-font-dark: #{colour.brand-colour(\"black\")} !important;\n  --accent-font-light: #{colour.brand-colour(\"black\", 0.7)} !important;\n  --accent-icon-light: #{colour.brand-colour(\"black\", 0.7)} !important;\n  --accent-link: #{colour.brand-colour(\"black\")} !important;\n  --accent-link-visited: #{colour.brand-colour(\"black\")} !important;\n  --accent-keyline: #{colour.brand-colour(\"black\", 0.5)} !important;\n  --accent-keyline-dark: #{colour.brand-colour(\"black\", 0.8)} !important;\n  --button-accented-text: #{colour.brand-colour(\"black\")} !important;\n  --button-accented-background: #{colour.brand-colour(\"yellow\")} !important;\n}\n\n@mixin yellow-accent {\n  @extend %yellow-accent;\n}\n\n%accent-lighter-text {\n  --accent-font-base: #{colour.brand-colour(\"white\")} !important;\n  --accent-font-dark: #{colour.brand-colour(\"white\")} !important;\n  --accent-font-light: #{colour.brand-colour(\"white\", 0.7)} !important;\n  --accent-icon-light: #{colour.brand-colour(\"white\", 0.7)} !important;\n  --accent-link: #{colour.brand-colour(\"white\")} !important;\n  --accent-link-visited: #{colour.brand-colour(\"white\")} !important;\n  --accent-keyline: #{colour.brand-colour(\"white\", 0.5)} !important;\n  --accent-keyline-dark: #{colour.brand-colour(\"white\", 0.8)} !important;\n  --button-accented-text: #{colour.brand-colour(\"white\")} !important;\n}\n\n%black-accent {\n  --accent-background: #{colour.brand-colour(\"black\")} !important;\n  --accent-background-light: #{colour.brand-colour(\"light-grey\")} !important;\n  --accent-border: #{colour.brand-colour(\"black\")} !important;\n  --accent-border-bright: #{colour.brand-colour(\"grey\")} !important;\n  --button-accented-text: #{colour.brand-colour(\"black\")} !important;\n  --button-accented-background: #{colour.brand-colour(\"grey\")} !important;\n}\n\n@mixin black-accent {\n  @extend %accent-lighter-text;\n  @extend %black-accent;\n}\n\n%pink-accent {\n  --accent-background: #{colour.brand-colour(\"maroon\")} !important;\n  --accent-background-light: #{colour.brand-colour(\"pastel-pink\")} !important;\n  --accent-border: #{colour.brand-colour(\"maroon\")} !important;\n  --accent-border-bright: #{colour.brand-colour(\"pink\")} !important;\n  --button-accented-background: #{colour.brand-colour(\"maroon\")} !important;\n}\n\n@mixin pink-accent {\n  @extend %accent-lighter-text;\n  @extend %pink-accent;\n}\n\n%orange-accent {\n  --accent-background: #{colour.brand-colour(\"chestnut\")} !important;\n  --accent-background-light: #{colour.brand-colour(\"pastel-orange\")} !important;\n  --accent-border: #{colour.brand-colour(\"chestnut\")} !important;\n  --accent-border-bright: #{colour.brand-colour(\"orange\")} !important;\n  --button-accented-background: #{colour.brand-colour(\"chestnut\")} !important;\n}\n\n@mixin orange-accent {\n  @extend %accent-lighter-text;\n  @extend %orange-accent;\n}\n\n%green-accent {\n  --accent-background: #{colour.brand-colour(\"forest\")} !important;\n  --accent-background-light: #{colour.brand-colour(\"pastel-green\")} !important;\n  --accent-border: #{colour.brand-colour(\"forest\")} !important;\n  --accent-border-bright: #{colour.brand-colour(\"green\")} !important;\n  --button-accented-background: #{colour.brand-colour(\"forest\")} !important;\n}\n\n@mixin green-accent {\n  @extend %accent-lighter-text;\n  @extend %green-accent;\n}\n\n%blue-accent {\n  --accent-background: #{colour.brand-colour(\"navy\")} !important;\n  --accent-background-light: #{colour.brand-colour(\"pastel-blue\")} !important;\n  --accent-border: #{colour.brand-colour(\"navy\")} !important;\n  --accent-border-bright: #{colour.brand-colour(\"blue\")} !important;\n  --button-accented-background: #{colour.brand-colour(\"navy\")} !important;\n}\n\n@mixin blue-accent {\n  @extend %accent-lighter-text;\n  @extend %blue-accent;\n}\n\n@mixin on-high-contrast {\n  @media (prefers-contrast: more) {\n    @content;\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\n%image-loader-background {\n  background: linear-gradient(\n    -45deg,\n    rgb(0 0 0 / 25%),\n    rgb(255 255 255 / 25%),\n    rgb(0 0 0 / 25%)\n  );\n  background-size: 500% 500%;\n  background-position: 0 50%;\n\n  animation: image-loader-background ease-in-out 1.2s infinite;\n\n  @media (prefers-reduced-motion) {\n    animation: none !important;\n  }\n}\n\n@mixin image-loader-background {\n  @if features.$image-loader-animations {\n    @extend %image-loader-background;\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 \"sass:math\";\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: linear-gradient(\n    0deg,\n    rgb(34 34 34 / 100%) 0%,\n    rgb(0 0 0 / 100%) 100%\n  );\n\n  .tna-template--dark-theme & {\n    background: colour.brand-colour(\"black\");\n  }\n\n  .tna-template--system-theme & {\n    @media (prefers-color-scheme: dark) {\n      background: colour.brand-colour(\"black\");\n    }\n  }\n\n  @include colour.on-high-contrast {\n    background: colour.brand-colour(\"black\");\n  }\n\n  &__contents {\n    &.tna-container {\n      justify-content: space-between;\n    }\n  }\n\n  &__logo-wrapper {\n    padding-top: spacing.space(1.25);\n    padding-bottom: spacing.space(1.25);\n  }\n\n  &__logo {\n    display: flex;\n    align-items: flex-end;\n\n    color: inherit;\n    text-decoration: none;\n\n    &--link {\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\n  &__logo-strapline {\n    margin: 0 spacing.space(0.75);\n\n    display: inline-block;\n\n    line-height: 1.625rem;\n    @include typography.heading-font;\n    @include typography.font-size(20);\n    text-transform: uppercase;\n  }\n\n  &__navigation-button-wrapper {\n    align-self: center;\n\n    display: none;\n  }\n\n  &__hamburger {\n    width: 2rem;\n    height: 0.25rem;\n\n    display: inline-block;\n\n    @include colour.colour-background(\"font-dark\");\n\n    &::before,\n    &::after {\n      content: \"\";\n\n      width: 2rem;\n      height: 0.25rem;\n\n      display: block;\n\n      position: absolute;\n      right: 0;\n\n      background-color: inherit;\n    }\n\n    &::before {\n      top: 0;\n    }\n\n    &::after {\n      bottom: 0;\n    }\n  }\n\n  &__navigation-button {\n    height: 2rem;\n    padding: 0;\n\n    appearance: none;\n\n    display: flex;\n    align-items: center;\n    gap: 0.75rem;\n\n    position: relative;\n\n    color: inherit;\n    @include typography.main-font-weight-bold;\n    @include typography.font-size(16);\n\n    background: none;\n\n    border: 0 transparent solid;\n    border-width: 0.25rem 0;\n    border-radius: 0.1px;\n\n    cursor: pointer;\n\n    &:hover {\n      @include typography.interacted-text-decoration;\n    }\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    align-items: flex-end;\n    justify-content: space-between;\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    line-height: 1;\n\n    list-style: none;\n\n    @include typography.font-size(15);\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    &:focus-visible,\n    &--selected {\n      &,\n      &:link,\n      &:visited {\n        @include colour.colour-font(\"font-base\");\n      }\n    }\n\n    &:hover,\n    &--selected {\n      @include typography.interacted-text-decoration;\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    white-space: nowrap;\n\n    list-style: none;\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    line-height: 2;\n    text-decoration: none;\n\n    @include typography.main-font-weight-medium;\n\n    &::after {\n      content: \"\";\n\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\n    &,\n    &:link,\n    &:visited {\n      color: inherit;\n    }\n\n    &--selected {\n      &::after {\n        @include colour.thick-keyline-dark(top);\n      }\n    }\n  }\n\n  &.tna-background-accent {\n    background: colour.colour-var(\"background\");\n  }\n\n  &.tna-background-accent &__navigation {\n    @include colour.contrast-on-mobile;\n  }\n\n  .tna-logo {\n    width: 5rem;\n\n    flex-shrink: 0;\n  }\n\n  @include media.on-mobile {\n    &__logo-wrapper {\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-button-wrapper {\n      display: block;\n\n      &.tna-column {\n        padding-left: 0;\n      }\n    }\n\n    &__navigation {\n      flex-direction: column;\n      align-items: stretch;\n\n      &.tna-column {\n        padding-right: 0;\n        padding-left: 0;\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    }\n\n    &__top-navigation-item-link {\n      padding: spacing.space(0.5) 0;\n\n      &,\n      &:link,\n      &:visited {\n        @include colour.colour-font(\"font-light\");\n      }\n\n      &:hover,\n      &:focus-visible {\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        width: 0;\n        height: auto;\n\n        top: 0;\n        right: auto;\n      }\n\n      &--selected {\n        &::after {\n          @include colour.colour-border(\"keyline\", 0.5rem, solid, left);\n        }\n      }\n    }\n  }\n\n  @include media.on-small {\n    .tna-logo {\n      width: 4rem;\n    }\n\n    &__logo-strapline {\n      line-height: 1.25rem;\n    }\n\n    &__logo-wrapper,\n    &__navigation-item-link,\n    &__navigation-button-wrapper {\n      padding-right: grid.gutter-width();\n    }\n\n    &__logo-wrapper,\n    &__navigation-item-link {\n      padding-left: grid.gutter-width();\n    }\n\n    &__top-navigation-items {\n      padding-right: grid.gutter-width();\n      padding-left: grid.gutter-width();\n    }\n  }\n\n  @include media.on-tiny {\n    &__navigation-button-wrapper,\n    &__logo-wrapper {\n      padding-right: grid.gutter-width-tiny();\n    }\n\n    &__logo-wrapper {\n      padding-left: grid.gutter-width-tiny();\n    }\n\n    .tna-logo {\n      width: 3.5rem;\n    }\n\n    &__logo-strapline {\n      font-size: 0.9rem;\n      line-height: 1.25;\n    }\n\n    &__navigation-button {\n      @include typography.font-size(14);\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-and-forced-colours {\n    @include colour.colour-border(\"keyline\", 1px, solid, bottom);\n  }\n\n  @include colour.on-forced-colours {\n    &__navigation-button {\n      height: auto;\n\n      line-height: 2;\n      @include typography.font-size(18);\n      @include typography.main-font-weight-bold;\n\n      border: none;\n    }\n\n    &__hamburger {\n      display: none;\n    }\n  }\n}\n","@use \"sass:math\";\n@use \"../variables/typography\";\n@use \"colour\";\n@use \"media\";\n\n@mixin font-size($font-size-px) {\n  font-size: #{math.div($font-size-px, typography.$relative-1rem-px)}rem;\n}\n\n@mixin relative-font-size($font-size-px) {\n  @warn \"relative-font-size() will soon be deprecated in favour of font-size().\";\n  @include font-size($font-size-px);\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  font-variation-settings: \"wdth\" 100;\n  font-style: normal;\n  font-optical-sizing: auto;\n  @if $bold {\n    @include main-font-weight-bold;\n  } @else {\n    @include main-font-weight;\n  }\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  font-style: normal;\n  font-optical-sizing: auto;\n  @if $bold {\n    font-weight: typography.$detail-font-weight-bold;\n  } @else {\n    font-weight: typography.$detail-font-weight;\n  }\n}\n\n@mixin detail-font-small {\n  @include detail-font;\n  @include font-size(14);\n  line-height: 1.1;\n  text-transform: uppercase;\n}\n\n@mixin interactable-text-decoration {\n  text-decoration-thickness: typography.$interactable-text-decoration-thickness;\n  text-underline-offset: typography.$interactable-text-decoration-offset;\n}\n\n@mixin interacted-text-decoration {\n  text-decoration: underline;\n  text-decoration-thickness: typography.$interactive-text-decoration-thickness;\n  text-underline-offset: typography.$interactable-text-decoration-offset;\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  $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  line-height: $line-height;\n  @include font-size($font-size-default);\n\n  @if $all-identical != true {\n    @if $medium-small-and-tiny-identical != true {\n      @include media.on-medium {\n        @include font-size($font-size-medium);\n      }\n\n      @if $small-and-tiny-identical != true {\n        @include media.on-small {\n          @include font-size($font-size-small);\n        }\n\n        @include media.on-tiny {\n          @include font-size($font-size-tiny);\n        }\n      } @else {\n        @include media.on-mobile {\n          @include font-size($font-size-small);\n        }\n      }\n    } @else {\n      @include media.on-smaller-than-large {\n        @include font-size($font-size-medium);\n      }\n    }\n  }\n}\n","@use \"sass:math\";\n\n/*\n * ------------------------------------------\n * The typefaces, sizes and spacings that are\n * defined in this file have been selected to\n * ensure 100% match with the latest National\n * Archives brand guidelines - avoid changing\n * or overwriting any of these values without\n * signing off with the Digital Services team\n * first\n * ------------------------------------------\n */\n\n$relative-1rem-px: 16; // 16px = 1rem\n\n/*\n * ------------------------------------------\n * When true, use the included font files for\n * Open Sans and Roboto Mono, rather than the\n * versions hosted by Google Fonts\n * ------------------------------------------\n */\n$use-local-fonts: false !default;\n\n$body-font-size-px: 19 !default;\n$body-font-size-px-medium: 18 !default;\n$body-font-size-px-mobile: 17 !default;\n$body-line-height: 1.75 !default;\n\n$interactable-text-decoration-offset: 0.125em !default;\n$interactable-text-decoration-thickness: #{math.div(1.5, $relative-1rem-px)}rem !default;\n$interactive-text-decoration-thickness: #{math.div(4, $relative-1rem-px)}rem !default;\n\n$main-font-family-name: \"Open Sans\" !default;\n$main-font-family:\n  #{$main-font-family-name},\n  sans-serif;\n$main-font-weight: 400 !default;\n$main-font-weight-medium: 600 !default;\n$main-font-weight-bold: 700 !default;\n$main-font-file: \"OpenSans-Regular.ttf\" !default;\n$main-font-file-medium: \"OpenSans-SemiBold.ttf\" !default;\n$main-font-file-bold: \"OpenSans-Bold.ttf\" !default;\n\n/*\n * ------------------------------------------\n * To use Supria Sans Condensed (which is the\n * approved heading typeface for The National\n * Archives), you need to obtain a licence to\n * properly embed the CSS files with the font\n * definitions in your service - check with a\n * member of the Digital Services team on how\n * to get a licence\n * ------------------------------------------\n */\n$heading-font-family-name: \"supria-sans-condensed\" !default;\n$heading-font-family:\n  #{$heading-font-family-name},\n  \"Arial Narrow\",\n  sans-serif;\n$heading-font-weight: 500 !default;\n\n/*\n * ------------------------------------------\n * The detail font should be a monospace font\n * and is used for chips, supertitles as well\n * as the date search component\n * ------------------------------------------\n */\n$detail-font-family-name: \"Roboto Mono\" !default;\n$detail-font-family:\n  #{$detail-font-family-name},\n  monospace;\n$detail-font-weight: 400 !default;\n$detail-font-weight-bold: 500 !default;\n$detail-font-file: \"RobotoMono-Regular.ttf\" !default;\n$detail-font-file-bold: \"RobotoMono-Medium.ttf\" !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: 32 !default;\n$heading-l-font-size-small: 29 !default;\n$heading-l-font-size-tiny: $heading-l-font-size-small !default;\n$heading-l-line-height: 1.15 !default;\n\n$heading-m-font-size-default: 22 !default;\n$heading-m-font-size-medium: $heading-m-font-size-default !default;\n$heading-m-font-size-small: 21 !default;\n$heading-m-font-size-tiny: $heading-m-font-size-small !default;\n$heading-m-line-height: 1.4 !default;\n\n$heading-s-font-size-default: 19 !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.5 !default;\n\n$code-font-family: Consolas, Monaco, \"Ubuntu Mono\", monospace !default;\n"]}

package/nationalarchives/components/header/header.js

@@ -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,i)=>{for(var n in i)t.o(i,n)&&!t.o(e,n)&&Object.defineProperty(e,n,{enumerable:!0,get:i[n]})},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={};t.r(e),t.d(e,{Header:()=>i});class i{constructor(t){this.$module=t,this.$toggleButton=t&&t.querySelector(".tna-header__navigation-button"),this.$navigation=t&&t.querySelector(".tna-header__navigation"),this.$links=t&&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",()=>this.handleToggleNavigation()),"addEventListener"in this.mql?this.mql.addEventListener("change",()=>this.syncState()):this.mql.addListener(()=>this.syncState()),this.$module.addEventListener("keyup",t=>{"Escape"===t.code&&this.menuOpened&&this.mql.matches&&(this.menuOpened=!1,this.syncState(),this.$toggleButton.focus())}))}handleToggleNavigation(){this.menuOpened=!this.menuOpened,this.syncState()}syncState(){this.mql.matches?this.menuOpened?this.show():this.hide():this.show()}show(){this.$navigation.classList.add("tna-header__navigation--open"),this.$navigation.removeAttribute("hidden"),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-button--opened");for(let t=0;t<this.$links.length;t+=1)this.$links[t].setAttribute("tabindex","0")}hide(){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-button--opened");for(let t=0;t<this.$links.length;t+=1)this.$links[t].setAttribute("tabindex","-1")}}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";const t={d:(e,i)=>{for(var n in i)t.o(i,n)&&!t.o(e,n)&&Object.defineProperty(e,n,{enumerable:!0,get:i[n]})},o:(t,e)=>Object.prototype.hasOwnProperty.call(t,e),r:t=>{Object.defineProperty(t,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(t,"__esModule",{value:!0})}};let e={};t.r(e),t.d(e,{Header:()=>i});class i{constructor(t){this.$module=t,this.$toggleButton=t&&t.querySelector(".tna-header__navigation-button"),this.$navigation=t&&t.querySelector(".tna-header__navigation"),this.$links=t&&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",()=>this.handleToggleNavigation()),"addEventListener"in this.mql?this.mql.addEventListener("change",()=>this.syncState()):this.mql.addListener(()=>this.syncState()),this.$module.addEventListener("keyup",t=>{"Escape"===t.code&&this.menuOpened&&this.mql.matches&&(this.menuOpened=!1,this.syncState(),this.$toggleButton.focus())}))}handleToggleNavigation(){this.menuOpened=!this.menuOpened,this.syncState()}syncState(){this.mql.matches?this.menuOpened?this.show():this.hide():this.show()}show(){this.$navigation.classList.add("tna-header__navigation--open"),this.$navigation.removeAttribute("hidden"),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-button--opened");for(let t=0;t<this.$links.length;t+=1)this.$links[t].setAttribute("tabindex","0")}hide(){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-button--opened");for(let t=0;t<this.$links.length;t+=1)this.$links[t].setAttribute("tabindex","-1")}}return e})());
 //# sourceMappingURL=header.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"components/header/header.js","mappings":"CAAA,SAAAA,EAAAC,GACA,iBAAAC,SAAA,iBAAAC,OACAA,OAAAD,QAAAD,IACA,mBAAAG,QAAAA,OAAAC,IACAD,OAAA,iBAAAH,GACA,iBAAAC,QACAA,QAAA,YAAAD,IAEAD,EAAA,YAAAC,GACC,CATD,CASCK,KAAA,uBCRD,IAAAC,EAAA,CCAAA,EAAA,CAAAL,EAAAM,KACA,QAAAC,KAAAD,EACAD,EAAAG,EAAAF,EAAAC,KAAAF,EAAAG,EAAAR,EAAAO,IACAE,OAAAC,eAAAV,EAAAO,EAAA,CAAyCI,YAAA,EAAAC,IAAAN,EAAAC,MCJzCF,EAAA,CAAAQ,EAAAC,IAAAL,OAAAM,UAAAC,eAAAC,KAAAJ,EAAAC,GCCAT,EAAAL,IACA,oBAAAkB,QAAAA,OAAAC,aACAV,OAAAC,eAAAV,EAAAkB,OAAAC,YAAA,CAAuDC,MAAA,WAEvDX,OAAAC,eAAAV,EAAA,cAAgDoB,OAAA,wCCLzC,MAAMC,EACX,WAAAC,CAAYC,GACVC,KAAKD,QAAUA,EACfC,KAAKC,cACHF,GAAWA,EAAQG,cAAc,kCACnCF,KAAKG,YACHJ,GAAWA,EAAQG,cAAc,2BACnCF,KAAKI,OACHL,GACAC,KAAKG,aACLH,KAAKG,YAAYE,iBAAiB,kBACpCL,KAAKM,YAAa,EAClBN,KAAKO,IAAMC,OAAOC,WAAW,qBAExBT,KAAKD,SAAYC,KAAKC,eAAkBD,KAAKG,cAIlDH,KAAKC,cAAcS,gBAAgB,UACnCV,KAAKW,YACLX,KAAKC,cAAcW,iBAAiB,QAAS,IAC3CZ,KAAKa,0BAEH,qBAAsBb,KAAKO,IAC7BP,KAAKO,IAAIK,iBAAiB,SAAU,IAAMZ,KAAKW,aAE/CX,KAAKO,IAAIO,YAAY,IAAMd,KAAKW,aAGlCX,KAAKD,QAAQa,iBAAiB,QAAUG,IACnB,WAAfA,EAAMC,MAAqBhB,KAAKM,YAAcN,KAAKO,IAAIU,UACzDjB,KAAKM,YAAa,EAClBN,KAAKW,YACLX,KAAKC,cAAciB,WAGzB,CAEA,sBAAAL,GACEb,KAAKM,YAAcN,KAAKM,WACxBN,KAAKW,WACP,CAEA,SAAAA,GACMX,KAAKO,IAAIU,QACPjB,KAAKM,WACPN,KAAKmB,OAELnB,KAAKoB,OAGPpB,KAAKmB,MAET,CAEA,IAAAA,GACEnB,KAAKG,YAAYkB,UAAUC,IAAI,gCAC/BtB,KAAKG,YAAYO,gBAAgB,UACjCV,KAAKG,YAAYoB,aAAa,cAAe,SAC7CvB,KAAKC,cAAcsB,aAAa,gBAAiB,QACjDvB,KAAKC,cAAcsB,aAAa,QAAS,cACzCvB,KAAKC,cAAcoB,UAAUC,IAAI,yCAGjC,IAAK,IAAIE,EAAQ,EAAGA,EAAQxB,KAAKI,OAAOqB,OAAQD,GAAS,EACvDxB,KAAKI,OAAOoB,GAAOD,aAAa,WAAY,IAEhD,CAEA,IAAAH,GACEpB,KAAKG,YAAYkB,UAAUK,OAAO,gCAClC1B,KAAKG,YAAYwB,QAAS,EAC1B3B,KAAKG,YAAYoB,aAAa,cAAe,QAC7CvB,KAAKC,cAAcsB,aAAa,gBAAiB,SACjDvB,KAAKC,cAAcsB,aAAa,QAAS,aACzCvB,KAAKC,cAAcoB,UAAUK,OAC3B,yCAIF,IAAK,IAAIF,EAAQ,EAAGA,EAAQxB,KAAKI,OAAOqB,OAAQD,GAAS,EACvDxB,KAAKI,OAAOoB,GAAOD,aAAa,WAAY,KAEhD","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-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.$module.addEventListener(\"keyup\", (event) => {\n      if (event.code === \"Escape\" && this.menuOpened && this.mql.matches) {\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.removeAttribute(\"hidden\");\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(\"tna-header__navigation-button--opened\");\n\n    /* eslint-disable-next-line no-magic-numbers */\n    for (let index = 0; index < this.$links.length; index += 1) {\n      this.$links[index].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-button--opened\",\n    );\n\n    /* eslint-disable-next-line no-magic-numbers */\n    for (let index = 0; index < this.$links.length; index += 1) {\n      this.$links[index].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","constructor","$module","this","$toggleButton","querySelector","$navigation","$links","querySelectorAll","menuOpened","mql","window","matchMedia","removeAttribute","syncState","addEventListener","handleToggleNavigation","addListener","event","code","matches","focus","show","hide","classList","add","setAttribute","index","length","remove","hidden"],"sourceRoot":""}
+{"version":3,"file":"components/header/header.js","mappings":"CAAA,SAAAA,EAAAC,GACA,iBAAAC,SAAA,iBAAAC,OACAA,OAAAD,QAAAD,IACA,mBAAAG,QAAAA,OAAAC,IACAD,OAAA,iBAAAH,GACA,iBAAAC,QACAA,QAAA,YAAAD,IAEAD,EAAA,YAAAC,GACC,CATD,CASCK,KAAA,uBCRD,MAAAC,EAAA,CCAAA,EAAA,CAAAL,EAAAM,KACA,QAAAC,KAAAD,EACAD,EAAAG,EAAAF,EAAAC,KAAAF,EAAAG,EAAAR,EAAAO,IACAE,OAAAC,eAAAV,EAAAO,EAAA,CAAyCI,YAAA,EAAAC,IAAAN,EAAAC,MCJzCF,EAAA,CAAAQ,EAAAC,IAAAL,OAAAM,UAAAC,eAAAC,KAAAJ,EAAAC,GCCAT,EAAAL,IACAS,OAAAC,eAAAV,EAAAkB,OAAAC,YAAA,CAAsDC,MAAA,WACtDX,OAAAC,eAAAV,EAAA,cAAgDoB,OAAA,4CCHzC,MAAMC,EACX,WAAAC,CAAYC,GACVC,KAAKD,QAAUA,EACfC,KAAKC,cACHF,GAAWA,EAAQG,cAAc,kCACnCF,KAAKG,YACHJ,GAAWA,EAAQG,cAAc,2BACnCF,KAAKI,OACHL,GACAC,KAAKG,aACLH,KAAKG,YAAYE,iBAAiB,kBACpCL,KAAKM,YAAa,EAClBN,KAAKO,IAAMC,OAAOC,WAAW,qBAExBT,KAAKD,SAAYC,KAAKC,eAAkBD,KAAKG,cAIlDH,KAAKC,cAAcS,gBAAgB,UACnCV,KAAKW,YACLX,KAAKC,cAAcW,iBAAiB,QAAS,IAC3CZ,KAAKa,0BAEH,qBAAsBb,KAAKO,IAC7BP,KAAKO,IAAIK,iBAAiB,SAAU,IAAMZ,KAAKW,aAE/CX,KAAKO,IAAIO,YAAY,IAAMd,KAAKW,aAGlCX,KAAKD,QAAQa,iBAAiB,QAAUG,IACnB,WAAfA,EAAMC,MAAqBhB,KAAKM,YAAcN,KAAKO,IAAIU,UACzDjB,KAAKM,YAAa,EAClBN,KAAKW,YACLX,KAAKC,cAAciB,WAGzB,CAEA,sBAAAL,GACEb,KAAKM,YAAcN,KAAKM,WACxBN,KAAKW,WACP,CAEA,SAAAA,GACMX,KAAKO,IAAIU,QACPjB,KAAKM,WACPN,KAAKmB,OAELnB,KAAKoB,OAGPpB,KAAKmB,MAET,CAEA,IAAAA,GACEnB,KAAKG,YAAYkB,UAAUC,IAAI,gCAC/BtB,KAAKG,YAAYO,gBAAgB,UACjCV,KAAKG,YAAYoB,aAAa,cAAe,SAC7CvB,KAAKC,cAAcsB,aAAa,gBAAiB,QACjDvB,KAAKC,cAAcsB,aAAa,QAAS,cACzCvB,KAAKC,cAAcoB,UAAUC,IAAI,yCAGjC,IAAK,IAAIE,EAAQ,EAAGA,EAAQxB,KAAKI,OAAOqB,OAAQD,GAAS,EACvDxB,KAAKI,OAAOoB,GAAOD,aAAa,WAAY,IAEhD,CAEA,IAAAH,GACEpB,KAAKG,YAAYkB,UAAUK,OAAO,gCAClC1B,KAAKG,YAAYwB,QAAS,EAC1B3B,KAAKG,YAAYoB,aAAa,cAAe,QAC7CvB,KAAKC,cAAcsB,aAAa,gBAAiB,SACjDvB,KAAKC,cAAcsB,aAAa,QAAS,aACzCvB,KAAKC,cAAcoB,UAAUK,OAC3B,yCAIF,IAAK,IAAIF,EAAQ,EAAGA,EAAQxB,KAAKI,OAAOqB,OAAQD,GAAS,EACvDxB,KAAKI,OAAOoB,GAAOD,aAAa,WAAY,KAEhD","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\nconst __webpack_require__ = {};\n\n","// define getter/value 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\tObject.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });\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-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.$module.addEventListener(\"keyup\", (event) => {\n      if (event.code === \"Escape\" && this.menuOpened && this.mql.matches) {\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.removeAttribute(\"hidden\");\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(\"tna-header__navigation-button--opened\");\n\n    /* eslint-disable-next-line no-magic-numbers */\n    for (let index = 0; index < this.$links.length; index += 1) {\n      this.$links[index].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-button--opened\",\n    );\n\n    /* eslint-disable-next-line no-magic-numbers */\n    for (let index = 0; index < this.$links.length; index += 1) {\n      this.$links[index].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","constructor","$module","this","$toggleButton","querySelector","$navigation","$links","querySelectorAll","menuOpened","mql","window","matchMedia","removeAttribute","syncState","addEventListener","handleToggleNavigation","addListener","event","code","matches","focus","show","hide","classList","add","setAttribute","index","length","remove","hidden"],"sourceRoot":""}

package/nationalarchives/components/hero/fixtures.json

@@ -250,7 +250,7 @@
         "imageHeight": 333,
         "imageCaption": "An interesting photo by a famous photographer ©2023"
       },
-      "html": "<header class=\"tna-hero \"><figure class=\"tna-hero__figure\"><div class=\"tna-container tna-hero__inner\"><div class=\"tna-column tna-column--width-2-3 tna-column--width-5-6-medium tna-column--full-small tna-column--full-tiny tna-hero__content\"><div class=\"tna-hero__content-inner \"><h1 class=\"tna-heading-xl tna-hero__heading\">Title</h1></div></div></div><picture class=\"tna-hero__image\"><img src=\"https://www.nationalarchives.gov.uk/wp-content/uploads/sites/24/2023/07/tna-building-compress.jpg\" alt=\"The National Archives office\" width=\"499\" height=\"333\"></picture><figcaption class=\"tna-hero__caption\"><details class=\"tna-hero__details\"><summary class=\"tna-hero__details-summary tna-button tna-button--small tna-button--icon-only-mobile\" aria-label=\"Additional information about this image\"><i class=\"fa-solid fa-circle-info tna-hero__details-summary-icon\" aria-hidden=\"true\"></i>About this image</summary><div class=\"tna-hero__information\">An interesting photo by a famous photographer ©2023</div></details></figcaption></figure></header>"
+      "html": "<header class=\"tna-hero \"><figure class=\"tna-hero__figure\"><div class=\"tna-container tna-hero__inner\"><div class=\"tna-column tna-column--width-2-3 tna-column--width-5-6-medium tna-column--full-small tna-column--full-tiny tna-hero__content\"><div class=\"tna-hero__content-inner \"><h1 class=\"tna-heading-xl tna-hero__heading\">Title</h1></div></div></div><picture class=\"tna-hero__image\"><img src=\"https://www.nationalarchives.gov.uk/wp-content/uploads/sites/24/2023/07/tna-building-compress.jpg\" alt=\"The National Archives office\" width=\"499\" height=\"333\"></picture><figcaption class=\"tna-hero__caption\"><details class=\"tna-hero__details\"><summary class=\"tna-hero__details-summary tna-button tna-button--small tna-button--icon-only-mobile\"><i class=\"fa-solid fa-circle-info tna-hero__details-summary-icon\" aria-hidden=\"true\"></i>About this image</summary><div class=\"tna-hero__information\">An interesting photo by a famous photographer ©2023</div></details></figcaption></figure></header>"
     },
     {
       "name": "image with caption",
@@ -261,7 +261,7 @@
         "imageHeight": 333,
         "imageCaption": "An interesting photo by a famous photographer ©2023"
       },
-      "html": "<div class=\"tna-hero \"><figure class=\"tna-hero__figure\"><picture class=\"tna-hero__image\"><img src=\"https://www.nationalarchives.gov.uk/wp-content/uploads/sites/24/2023/07/tna-building-compress.jpg\" alt=\"The National Archives office\" width=\"499\" height=\"333\"></picture><figcaption class=\"tna-hero__caption\"><details class=\"tna-hero__details\"><summary class=\"tna-hero__details-summary tna-button tna-button--small tna-button--icon-only-mobile\" aria-label=\"Additional information about this image\"><i class=\"fa-solid fa-circle-info tna-hero__details-summary-icon\" aria-hidden=\"true\"></i>About this image</summary><div class=\"tna-hero__information\">An interesting photo by a famous photographer ©2023</div></details></figcaption></figure></div>"
+      "html": "<div class=\"tna-hero \"><figure class=\"tna-hero__figure\"><picture class=\"tna-hero__image\"><img src=\"https://www.nationalarchives.gov.uk/wp-content/uploads/sites/24/2023/07/tna-building-compress.jpg\" alt=\"The National Archives office\" width=\"499\" height=\"333\"></picture><figcaption class=\"tna-hero__caption\"><details class=\"tna-hero__details\"><summary class=\"tna-hero__details-summary tna-button tna-button--small tna-button--icon-only-mobile\"><i class=\"fa-solid fa-circle-info tna-hero__details-summary-icon\" aria-hidden=\"true\"></i>About this image</summary><div class=\"tna-hero__information\">An interesting photo by a famous photographer ©2023</div></details></figcaption></figure></div>"
     },
     {
       "name": "with alternative image sources",
@@ -278,7 +278,7 @@
           }
         ]
       },
-      "html": "<div class=\"tna-hero \"><figure class=\"tna-hero__figure\"><picture class=\"tna-hero__image\"><source srcset=\"https://www.gstatic.com/webp/gallery/2.webp\" type=\"image/webp\" width=\"499\" height=\"333\"><img src=\"https://www.nationalarchives.gov.uk/wp-content/uploads/sites/24/2023/07/tna-building-compress.jpg\" alt=\"The National Archives office\" width=\"499\" height=\"333\"></picture><figcaption class=\"tna-hero__caption\"><details class=\"tna-hero__details\"><summary class=\"tna-hero__details-summary tna-button tna-button--small tna-button--icon-only-mobile\" aria-label=\"Additional information about this image\"><i class=\"fa-solid fa-circle-info tna-hero__details-summary-icon\" aria-hidden=\"true\"></i>About this image</summary><div class=\"tna-hero__information\">An interesting photo by a famous photographer ©2023</div></details></figcaption></figure></div>"
+      "html": "<div class=\"tna-hero \"><figure class=\"tna-hero__figure\"><picture class=\"tna-hero__image\"><source srcset=\"https://www.gstatic.com/webp/gallery/2.webp\" type=\"image/webp\" width=\"499\" height=\"333\"><img src=\"https://www.nationalarchives.gov.uk/wp-content/uploads/sites/24/2023/07/tna-building-compress.jpg\" alt=\"The National Archives office\" width=\"499\" height=\"333\"></picture><figcaption class=\"tna-hero__caption\"><details class=\"tna-hero__details\"><summary class=\"tna-hero__details-summary tna-button tna-button--small tna-button--icon-only-mobile\"><i class=\"fa-solid fa-circle-info tna-hero__details-summary-icon\" aria-hidden=\"true\"></i>About this image</summary><div class=\"tna-hero__information\">An interesting photo by a famous photographer ©2023</div></details></figcaption></figure></div>"
     },
     {
       "name": "with alternative image sources with media queries",
@@ -296,7 +296,7 @@
           }
         ]
       },
-      "html": "<div class=\"tna-hero \"><figure class=\"tna-hero__figure\"><picture class=\"tna-hero__image\"><source srcset=\"https://www.gstatic.com/webp/gallery/2.webp\" type=\"image/webp\" width=\"499\" height=\"333\" media=\"(max-width: 48em)\"><img src=\"https://www.nationalarchives.gov.uk/wp-content/uploads/sites/24/2023/07/tna-building-compress.jpg\" alt=\"The National Archives office\" width=\"499\" height=\"333\"></picture><figcaption class=\"tna-hero__caption\"><details class=\"tna-hero__details\"><summary class=\"tna-hero__details-summary tna-button tna-button--small tna-button--icon-only-mobile\" aria-label=\"Additional information about this image\"><i class=\"fa-solid fa-circle-info tna-hero__details-summary-icon\" aria-hidden=\"true\"></i>About this image</summary><div class=\"tna-hero__information\">An interesting photo by a famous photographer ©2023</div></details></figcaption></figure></div>"
+      "html": "<div class=\"tna-hero \"><figure class=\"tna-hero__figure\"><picture class=\"tna-hero__image\"><source srcset=\"https://www.gstatic.com/webp/gallery/2.webp\" type=\"image/webp\" width=\"499\" height=\"333\" media=\"(max-width: 48em)\"><img src=\"https://www.nationalarchives.gov.uk/wp-content/uploads/sites/24/2023/07/tna-building-compress.jpg\" alt=\"The National Archives office\" width=\"499\" height=\"333\"></picture><figcaption class=\"tna-hero__caption\"><details class=\"tna-hero__details\"><summary class=\"tna-hero__details-summary tna-button tna-button--small tna-button--icon-only-mobile\"><i class=\"fa-solid fa-circle-info tna-hero__details-summary-icon\" aria-hidden=\"true\"></i>About this image</summary><div class=\"tna-hero__information\">An interesting photo by a famous photographer ©2023</div></details></figcaption></figure></div>"
     },
     {
       "name": "with alternative image sources with different width/heights",
@@ -315,7 +315,7 @@
           }
         ]
       },
-      "html": "<div class=\"tna-hero \"><figure class=\"tna-hero__figure\"><picture class=\"tna-hero__image\"><source srcset=\"https://www.gstatic.com/webp/gallery/2.webp\" type=\"image/webp\" width=\"550\" height=\"404\"><img src=\"https://www.nationalarchives.gov.uk/wp-content/uploads/sites/24/2023/07/tna-building-compress.jpg\" alt=\"The National Archives office\" width=\"499\" height=\"333\"></picture><figcaption class=\"tna-hero__caption\"><details class=\"tna-hero__details\"><summary class=\"tna-hero__details-summary tna-button tna-button--small tna-button--icon-only-mobile\" aria-label=\"Additional information about this image\"><i class=\"fa-solid fa-circle-info tna-hero__details-summary-icon\" aria-hidden=\"true\"></i>About this image</summary><div class=\"tna-hero__information\">An interesting photo by a famous photographer ©2023</div></details></figcaption></figure></div>"
+      "html": "<div class=\"tna-hero \"><figure class=\"tna-hero__figure\"><picture class=\"tna-hero__image\"><source srcset=\"https://www.gstatic.com/webp/gallery/2.webp\" type=\"image/webp\" width=\"550\" height=\"404\"><img src=\"https://www.nationalarchives.gov.uk/wp-content/uploads/sites/24/2023/07/tna-building-compress.jpg\" alt=\"The National Archives office\" width=\"499\" height=\"333\"></picture><figcaption class=\"tna-hero__caption\"><details class=\"tna-hero__details\"><summary class=\"tna-hero__details-summary tna-button tna-button--small tna-button--icon-only-mobile\"><i class=\"fa-solid fa-circle-info tna-hero__details-summary-icon\" aria-hidden=\"true\"></i>About this image</summary><div class=\"tna-hero__information\">An interesting photo by a famous photographer ©2023</div></details></figcaption></figure></div>"
     },
     {
       "name": "with actions",
@@ -357,7 +357,7 @@
         "imageCaption": "An interesting photo by a famous photographer ©2023",
         "classes": "hero__test-class"
       },
-      "html": "<div class=\"tna-hero  hero__test-class\"><figure class=\"tna-hero__figure\"><picture class=\"tna-hero__image\"><img src=\"https://www.nationalarchives.gov.uk/wp-content/uploads/sites/24/2023/07/tna-building-compress.jpg\" alt=\"The National Archives office\" width=\"499\" height=\"333\"></picture><figcaption class=\"tna-hero__caption\"><details class=\"tna-hero__details\"><summary class=\"tna-hero__details-summary tna-button tna-button--small tna-button--icon-only-mobile\" aria-label=\"Additional information about this image\"><i class=\"fa-solid fa-circle-info tna-hero__details-summary-icon\" aria-hidden=\"true\"></i>About this image</summary><div class=\"tna-hero__information\">An interesting photo by a famous photographer ©2023</div></details></figcaption></figure></div>"
+      "html": "<div class=\"tna-hero  hero__test-class\"><figure class=\"tna-hero__figure\"><picture class=\"tna-hero__image\"><img src=\"https://www.nationalarchives.gov.uk/wp-content/uploads/sites/24/2023/07/tna-building-compress.jpg\" alt=\"The National Archives office\" width=\"499\" height=\"333\"></picture><figcaption class=\"tna-hero__caption\"><details class=\"tna-hero__details\"><summary class=\"tna-hero__details-summary tna-button tna-button--small tna-button--icon-only-mobile\"><i class=\"fa-solid fa-circle-info tna-hero__details-summary-icon\" aria-hidden=\"true\"></i>About this image</summary><div class=\"tna-hero__information\">An interesting photo by a famous photographer ©2023</div></details></figcaption></figure></div>"
     },
     {
       "name": "with attributes",
@@ -371,7 +371,7 @@
           "data-testattribute": "foobar"
         }
       },
-      "html": "<div class=\"tna-hero \" data-testattribute=\"foobar\"><figure class=\"tna-hero__figure\"><picture class=\"tna-hero__image\"><img src=\"https://www.nationalarchives.gov.uk/wp-content/uploads/sites/24/2023/07/tna-building-compress.jpg\" alt=\"The National Archives office\" width=\"499\" height=\"333\"></picture><figcaption class=\"tna-hero__caption\"><details class=\"tna-hero__details\"><summary class=\"tna-hero__details-summary tna-button tna-button--small tna-button--icon-only-mobile\" aria-label=\"Additional information about this image\"><i class=\"fa-solid fa-circle-info tna-hero__details-summary-icon\" aria-hidden=\"true\"></i>About this image</summary><div class=\"tna-hero__information\">An interesting photo by a famous photographer ©2023</div></details></figcaption></figure></div>"
+      "html": "<div class=\"tna-hero \" data-testattribute=\"foobar\"><figure class=\"tna-hero__figure\"><picture class=\"tna-hero__image\"><img src=\"https://www.nationalarchives.gov.uk/wp-content/uploads/sites/24/2023/07/tna-building-compress.jpg\" alt=\"The National Archives office\" width=\"499\" height=\"333\"></picture><figcaption class=\"tna-hero__caption\"><details class=\"tna-hero__details\"><summary class=\"tna-hero__details-summary tna-button tna-button--small tna-button--icon-only-mobile\"><i class=\"fa-solid fa-circle-info tna-hero__details-summary-icon\" aria-hidden=\"true\"></i>About this image</summary><div class=\"tna-hero__information\">An interesting photo by a famous photographer ©2023</div></details></figcaption></figure></div>"
     }
   ]
 }

package/nationalarchives/components/hero/hero.css

@@ -1 +1 @@
-.tna-hero__details[open] .tna-hero__details-summary,.tna-hero__information{--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);--accent-border: var(--accent-border-bright);background-color:var(--background, #f4f4f4);color:var(--font-base, #343338)}.tna-hero{position:relative}.tna-hero::before{content:"";position:absolute;inset:auto 0 0;z-index:-1;border-bottom:1px var(--keyline, rgba(38, 38, 42, 0.25)) solid}.tna-hero__figure{display:flex;flex-direction:column;align-items:flex-end;justify-content:flex-end}.tna-hero__caption{width:100%;overflow:visible;position:absolute;top:0;right:0;z-index:10;order:2}.tna-hero__details{width:100%;overflow:visible}.tna-hero__details-summary{position:absolute;top:0.5rem;right:0.5rem;z-index:2}.tna-hero__details-summary:hover{color:var(--font-dark, rgb(1, 1, 1)) !important;background-color:var(--background, #f4f4f4) !important}.tna-hero__details[open] .tna-hero__details-summary{width:2rem;height:2rem;padding:0;font-size:0;line-height:2rem;text-align:center;border:none}.tna-hero__details[open] .tna-hero__details-summary::before,.tna-hero__details[open] .tna-hero__details-summary::after{content:"";width:1.5rem;height:.125rem;display:block;position:absolute;top:50%;left:50%;background-color:var(--font-dark, rgb(1, 1, 1))}.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__information{padding:0.625rem 3.25rem 0.625rem 1rem;position:absolute;top:0;right:0;left:0;z-index:1;font-size:1rem}.tna-hero__information p+p{margin-top:0.5rem}.tna-hero__image{width:100%;order:1}.tna-hero__image img{width:100%}.tna-hero__inner{order:3}.tna-hero__content{padding-top:2rem;padding-bottom:2rem}.tna-hero__content-inner{padding-right:0;padding-left:0;border-left:none;background-color:var(--background, #f4f4f4)}@media(min-width: 48.0625em){.tna-hero__figure{min-height:clamp(5rem,30vw,20rem)}.tna-hero--large .tna-hero__figure{min-height:clamp(12rem,33vw,50rem)}.tna-hero__inner{z-index:4}.tna-hero__image{width:auto;position:absolute;inset:0;z-index:1}.tna-hero__image img{height:100%;object-fit:cover}.tna-hero__content{padding-top:12rem;padding-bottom:3rem}.tna-hero__content-inner{padding:2rem;border-radius:2px}.tna-hero__information{max-width:640px;left:auto}.tna-hero--split .tna-hero__content{width:50%;padding-top:3rem;padding-bottom:3rem}.tna-hero--split .tna-hero__content-inner{padding:0 1rem 0 0}.tna-hero--split .tna-hero__image{left:50%}.tna-hero--shift{margin-bottom:3rem}.tna-hero--shift .tna-hero__content-inner{position:relative;top:6rem}.tna-hero--over{margin-bottom:3rem}.tna-hero--over .tna-hero__details{max-width:1280px;margin:0 auto;position:relative}.tna-hero--over .tna-hero__details-summary{top:0.5rem;right:2.5rem}.tna-hero--over .tna-hero__information{max-width:calc(50% - 2rem);box-sizing:border-box;top:0;right:2rem;left:auto;border-radius:2px}.tna-hero--over .tna-hero__content{width:50%;padding-top:3rem}.tna-hero--over .tna-hero__content-inner{padding:0}.tna-hero--over .tna-hero__image{max-width:calc(640px - (2rem + 1rem));margin-right:32px;overflow:hidden;bottom:-3rem;left:calc(50% + 1rem);z-index:5;border-radius:2px}.tna-hero--split .tna-hero__figure,.tna-hero--over .tna-hero__figure{justify-content:center}.tna-hero--shift .tna-hero__content-inner,.tna-hero--over .tna-hero__image{box-shadow:0 .25rem 1rem -0.25rem rgba(0,0,0,.25),0 .125rem .5rem -0.25rem rgba(0,0,0,.75)}}/*# sourceMappingURL=hero.css.map */
+.tna-hero__details[open] .tna-hero__details-summary,.tna-hero__information{--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);--accent-border: var(--accent-border-bright);background-color:var(--background, #f4f4f4);color:var(--font-base, #343338)}.tna-hero{position:relative}.tna-hero::before{content:"";position:absolute;inset:auto 0 0;z-index:-1;border-bottom:1px var(--keyline, rgba(38, 38, 42, 0.25)) solid}.tna-hero__figure{display:flex;flex-direction:column;align-items:flex-end;justify-content:flex-end}.tna-hero__caption{width:100%;overflow:visible;position:absolute;top:0;right:0;z-index:10;order:2}.tna-hero__details{width:100%;overflow:visible}.tna-hero__details-summary{position:absolute;top:0.5rem;right:0.5rem;z-index:2}.tna-hero__details-summary:hover{color:var(--font-dark, rgb(1, 1, 1)) !important;background-color:var(--background, #f4f4f4) !important}.tna-hero__details[open] .tna-hero__details-summary{width:2rem;height:2rem;padding:0;font-size:0;line-height:2rem;text-align:center;border:none}.tna-hero__details[open] .tna-hero__details-summary::before,.tna-hero__details[open] .tna-hero__details-summary::after{content:"";width:1.5rem;height:.125rem;display:block;position:absolute;top:50%;left:50%;background-color:var(--font-dark, rgb(1, 1, 1))}.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__information{padding:0.625rem 3.25rem 0.625rem 1rem;position:absolute;top:0;right:0;left:0;z-index:1;font-size:1rem}.tna-hero__information p+p{margin-top:0.5rem}.tna-hero__image{width:100%;order:1}.tna-hero__image img{width:100%}.tna-hero__inner{order:3}.tna-hero__content{padding-top:2rem;padding-bottom:2rem}.tna-hero__content-inner{padding-right:0;padding-left:0;border-left:none;background-color:var(--background, #f4f4f4)}@media(min-width: 48.0625em){.tna-hero__figure{min-height:clamp(5rem,30vw,20rem)}.tna-hero--large .tna-hero__figure{min-height:clamp(12rem,33vw,50rem)}.tna-hero__inner{z-index:4}.tna-hero__image{width:auto;position:absolute;inset:0;z-index:1}.tna-hero__image img{height:100%;object-fit:cover}.tna-hero__content{padding-top:12rem;padding-bottom:3rem}.tna-hero__content-inner{padding:2rem;border-radius:2px}.tna-hero__information{max-width:640px;left:auto}.tna-hero--split .tna-hero__content{width:50%;padding-top:3rem;padding-bottom:3rem}.tna-hero--split .tna-hero__content-inner{padding:0 1rem 0 0}.tna-hero--split .tna-hero__image{left:50%}.tna-hero--shift{margin-bottom:3rem}.tna-hero--shift .tna-hero__content-inner{position:relative;top:6rem}.tna-hero--over{margin-bottom:3rem}.tna-hero--over .tna-hero__details{max-width:1280px;margin:0 auto;position:relative}.tna-hero--over .tna-hero__details-summary{top:0.5rem;right:2.5rem}.tna-hero--over .tna-hero__information{max-width:calc(50% - 3rem);box-sizing:border-box;top:0;right:2rem;left:auto;border-radius:2px}.tna-hero--over .tna-hero__content{width:50%;padding-top:3rem}.tna-hero--over .tna-hero__content-inner{padding:0}.tna-hero--over .tna-hero__image{max-width:calc(640px - (2rem + 1rem));margin-right:32px;overflow:hidden;bottom:-3rem;left:calc(50% + 1rem);z-index:5;border-radius:2px}.tna-hero--split .tna-hero__figure,.tna-hero--over .tna-hero__figure{justify-content:center}.tna-hero--shift .tna-hero__content-inner,.tna-hero--over .tna-hero__image{box-shadow:0 .25rem 1rem -0.25rem rgba(0,0,0,.25),0 .125rem .5rem -0.25rem rgba(0,0,0,.75)}}/*# sourceMappingURL=hero.css.map */

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

@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["../../../../src/nationalarchives/tools/_colour.scss","../../../../src/nationalarchives/components/hero/hero.scss","../../../../src/nationalarchives/tools/_typography.scss","../../../../src/nationalarchives/tools/_media.scss","../../../../src/nationalarchives/tools/_borders.scss","../../../../src/nationalarchives/variables/_borders.scss","../../../../src/nationalarchives/variables/_grid.scss"],"names":[],"mappings":"AA8OA,2EACE,yCACA,uCACA,uCACA,yCACA,yCACA,6BACA,6CACA,mCACA,6CACA,2CACA,uDACA,uDACA,mEACA,6CA3KA,4CAJA,gCC3DF,UACE,kBAEA,kBACE,WAEA,kBACA,eACA,WDyEE,+DCrEJ,kBACE,aACA,sBACA,qBACA,yBAGF,mBACE,WAEA,iBAEA,kBACA,MACA,QACA,WAEA,QAGF,mBACE,WAEA,iBAGF,2BACE,kBACA,WACA,aACA,UAEA,iCDeF,gDAIA,uDCZA,oDACE,WACA,YACA,UAEA,YACA,iBACA,kBAEA,YAIA,uHAEE,WAEA,aACA,eAEA,cAEA,kBACA,QACA,SDZJ,gDCiBE,4DACE,8CAGF,2DACE,+CAIA,mIAEE,cAIJ,yDACE,YAOJ,uBACE,uCAGA,kBACA,MACA,QACA,OACA,UC3HF,eDiIE,2BACE,kBAIJ,iBACE,WAEA,QAEA,qBACE,WAIJ,iBACE,QAGF,mBACE,iBACA,oBAGF,yBACE,gBACA,eAEA,iBDlFF,4CGjBA,6BFyGE,kBACE,kCAGF,mCACE,mCAGF,iBACE,UAGF,iBACE,WAEA,kBACA,QACA,UAEA,qBACE,YAEA,iBAIJ,mBACE,kBACA,oBAGF,yBACE,aGtMJ,cCDsB,IJ2MpB,uBACE,gBAEA,UAGF,oCACE,UACA,iBACA,oBAGF,0CACE,mBAGF,kCACE,SAGF,iBACE,mBAGF,0CACE,kBACA,SAGF,gBACE,mBAGF,mCACE,UK/OoB,OLgPpB,cAEA,kBAGF,2CACE,WACA,aAGF,uCACE,2BAEA,sBAEA,MACA,WACA,UG9PJ,cCDsB,IJoQpB,mCACE,UACA,iBAGF,yCACE,UAGF,iCACE,sCAIA,kBAEA,gBAEA,aAEA,sBACA,UGxRJ,cCDsB,IJ6RpB,qEAEE,uBAGF,2EAEE,WACE","file":"hero.css","sourcesContent":["@use \"sass:list\";\n@use \"sass:map\";\n@use \"sass:meta\";\n@use \"../variables/borders\";\n@use \"../variables/forms\";\n@use \"../variables/colour\";\n@use \"../variables/features\";\n@use \"../tools/media\";\n\n$base-colours: (\n  \"background\",\n  \"font-base\",\n  \"font-dark\",\n  \"font-light\",\n  \"icon-light\",\n  \"link\",\n  \"link-visited\",\n  \"keyline\",\n  \"keyline-dark\"\n);\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      @if list.index($base-colours, $name) {\n        --base-#{$name}: #{$value};\n      }\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      @if list.index($base-colours, $name) {\n        --base-#{$name}: #{$value};\n      }\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      @if list.index($base-colours, $name) {\n        --base-#{$name}: #{$value};\n      }\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      @if list.index((\"keyline\", \"keyline-dark\"), $name) {\n        --base-#{$name}: #{$value};\n      }\n    }\n  }\n}\n\n@function colour-var($colour) {\n  @return var(\n    --#{$colour},\n    #{map.get(colour.$colour-palette-default, $colour)}\n  );\n}\n\n@mixin colour-font($colour, $important: false) {\n  color: colour-var($colour) if(sass($important): !important; else: null);\n}\n\n@mixin colour-background($colour, $important: false) {\n  background-color: colour-var($colour)\n    if(sass($important): !important; else: null);\n}\n\n@mixin colour-background-brand($brandColour, $important: false) {\n  background-color: #{brand-colour($brandColour)}\n    if(sass($important): !important; else: 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      border-#{$direction}: $width\n        colour-var($colour)\n        $style\n        if(sass($important): !important; else: null);\n    } @else {\n      border-#{$direction}-color: colour-var($colour)\n        if(sass($important): !important; else: null);\n    }\n  } @else {\n    @if $width != \"\" {\n      border: $width\n        colour-var($colour)\n        $style\n        if(sass($important): !important; else: null);\n    } @else {\n      border-color: var(\n          --#{$colour},\n          #{map.get(colour.$colour-palette-default, $colour)}\n        )\n        if(sass($important): !important; else: null);\n    }\n  }\n}\n\n@mixin colour-outline($colour, $width: \"\", $style: solid, $important: false) {\n  @if $width != \"\" {\n    outline: $width\n      colour-var($colour)\n      $style\n      if(sass($important): !important; else: null);\n  } @else {\n    outline-color: colour-var($colour)\n      if(sass($important): !important; else: null);\n  }\n}\n\n@mixin colour-fill($colour, $important: false) {\n  fill: colour-var($colour) if(sass($important): !important; else: null);\n}\n\n%colour-input {\n  @include colour-font(\"input-foreground\");\n  @include colour-background(\"input-background\");\n  @include colour-border(\"input-border\", forms.$form-field-border-width);\n}\n\n@mixin colour-input() {\n  @extend %colour-input;\n}\n\n@mixin thick-keyline($direction: \"\", $veryThick: false) {\n  $border-width: borders.$thick-border-width;\n  @if $veryThick {\n    $border-width: borders.$very-thick-border-width;\n  }\n  @if $direction != \"\" {\n    @include colour-border(\"keyline\", $border-width, solid, $direction);\n  } @else {\n    @include colour-border(\"keyline\", $border-width, solid);\n  }\n}\n\n@mixin thick-keyline-dark($direction: \"\", $veryThick: false) {\n  $border-width: borders.$thick-border-width;\n  @if $veryThick {\n    $border-width: borders.$very-thick-border-width;\n  }\n  @if $direction != \"\" {\n    @include colour-border(\"keyline-dark\", $border-width, solid, $direction);\n  } @else {\n    @include colour-border(\"keyline-dark\", $border-width, solid);\n  }\n}\n\n@mixin thick-keyline-accent($direction: \"\", $veryThick: false) {\n  $border-width: borders.$thick-border-width;\n  @if $veryThick {\n    $border-width: borders.$very-thick-border-width;\n  }\n  @if $direction != \"\" {\n    @include colour-border(\"accent-border\", $border-width, solid, $direction);\n  } @else {\n    @include colour-border(\"accent-border\", $border-width, solid);\n  }\n}\n\n@mixin thick-keyline-error($direction: \"\", $veryThick: false) {\n  $border-width: borders.$thick-border-width;\n  @if $veryThick {\n    $border-width: borders.$very-thick-border-width;\n  }\n  @if $direction != \"\" {\n    @include colour-border(\n      \"form-error-border\",\n      $border-width,\n      solid,\n      $direction\n    );\n  } @else {\n    @include colour-border(\"form-error-border\", $border-width, solid);\n  }\n}\n\n@mixin thick-keyline-brand($direction: \"\", $brandColour, $veryThick: false) {\n  $border-width: borders.$thick-border-width;\n  @if $veryThick {\n    $border-width: borders.$very-thick-border-width;\n  }\n  @if $direction != \"\" {\n    border-#{$direction}: $border-width #{brand-colour($brandColour)} solid;\n  } @else {\n    border: $border-width #{brand-colour($brandColour)} solid;\n  }\n}\n\n@mixin thick-keyline-transparent($direction: \"\", $veryThick: false) {\n  $border-width: borders.$thick-border-width;\n  @if $veryThick {\n    $border-width: borders.$very-thick-border-width;\n  }\n  @if $direction != \"\" {\n    border-#{$direction}: $border-width transparent solid;\n  } @else {\n    border: $border-width transparent solid;\n  }\n}\n\n%always-light {\n  @include colour-css-vars;\n\n  @media (prefers-contrast: more) {\n    @include colour-css-vars-high-contrast;\n  }\n}\n\n@mixin always-light {\n  @extend %always-light;\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  --accent-border: var(--accent-border-bright);\n\n  @include colour-background(\"background\");\n\n  @include colour-font(\"font-base\");\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    --accent-border: var(--accent-border-bright);\n\n    @include colour-background(\"background\");\n\n    @include colour-font(\"font-base\");\n  }\n}\n\n@mixin contrast-on-mobile {\n  @extend %contrast-on-mobile;\n}\n\n%base {\n  @each $name, $value in $base-colours {\n    --#{$name}: var(--base-#{$value});\n  }\n\n  @include colour-background(\"background\");\n\n  @include colour-font(\"font-base\");\n}\n\n@mixin base {\n  @extend %base;\n}\n\n%tint {\n  --background: var(--background-tint);\n\n  @include colour-background(\"background\");\n}\n\n@mixin tint {\n  @extend %tint;\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  --accent-border: var(--accent-font-dark);\n  --button-text: var(--accent-button-text);\n  --button-background: var(--accent-button-background);\n  --button-hover-text: var(--accent-button-hover-text);\n  --button-hover-background: var(--accent-button-hover-background);\n\n  @include colour-background(\"background\");\n\n  @include colour-font(\"font-base\");\n}\n\n@mixin accent {\n  @extend %accent;\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  --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  --accent-border: var(--accent-background);\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      --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      --accent-border: var(--accent-font-dark);\n      --button-text: var(--accent-button-text);\n      --button-background: var(--accent-button-background);\n      --button-hover-text: var(--accent-button-hover-text);\n      --button-hover-background: var(--accent-button-hover-background);\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    --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    --accent-border: var(--accent-font-dark);\n    --button-text: var(--accent-button-text);\n    --button-background: var(--accent-button-background);\n    --button-hover-text: var(--accent-button-hover-text);\n    --button-hover-background: var(--accent-button-hover-background);\n  }\n}\n\n@mixin accent-light {\n  @extend %accent-light;\n}\n\n%yellow-accent {\n  --accent-background: #{colour.brand-colour(\"yellow\")} !important;\n  --accent-background-light: #{colour.brand-colour(\"cream\")} !important;\n  --accent-border: #{colour.brand-colour(\"yellow\")} !important;\n  --accent-border-bright: #{colour.brand-colour(\"yellow\")} !important;\n  --accent-font-base: #{colour.brand-colour(\"black\")} !important;\n  --accent-font-dark: #{colour.brand-colour(\"black\")} !important;\n  --accent-font-light: #{colour.brand-colour(\"black\", 0.7)} !important;\n  --accent-icon-light: #{colour.brand-colour(\"black\", 0.7)} !important;\n  --accent-link: #{colour.brand-colour(\"black\")} !important;\n  --accent-link-visited: #{colour.brand-colour(\"black\")} !important;\n  --accent-keyline: #{colour.brand-colour(\"black\", 0.5)} !important;\n  --accent-keyline-dark: #{colour.brand-colour(\"black\", 0.8)} !important;\n  --button-accented-text: #{colour.brand-colour(\"black\")} !important;\n  --button-accented-background: #{colour.brand-colour(\"yellow\")} !important;\n}\n\n@mixin yellow-accent {\n  @extend %yellow-accent;\n}\n\n%accent-lighter-text {\n  --accent-font-base: #{colour.brand-colour(\"white\")} !important;\n  --accent-font-dark: #{colour.brand-colour(\"white\")} !important;\n  --accent-font-light: #{colour.brand-colour(\"white\", 0.7)} !important;\n  --accent-icon-light: #{colour.brand-colour(\"white\", 0.7)} !important;\n  --accent-link: #{colour.brand-colour(\"white\")} !important;\n  --accent-link-visited: #{colour.brand-colour(\"white\")} !important;\n  --accent-keyline: #{colour.brand-colour(\"white\", 0.5)} !important;\n  --accent-keyline-dark: #{colour.brand-colour(\"white\", 0.8)} !important;\n  --button-accented-text: #{colour.brand-colour(\"white\")} !important;\n}\n\n%black-accent {\n  --accent-background: #{colour.brand-colour(\"black\")} !important;\n  --accent-background-light: #{colour.brand-colour(\"light-grey\")} !important;\n  --accent-border: #{colour.brand-colour(\"black\")} !important;\n  --accent-border-bright: #{colour.brand-colour(\"grey\")} !important;\n  --button-accented-text: #{colour.brand-colour(\"black\")} !important;\n  --button-accented-background: #{colour.brand-colour(\"grey\")} !important;\n}\n\n@mixin black-accent {\n  @extend %accent-lighter-text;\n  @extend %black-accent;\n}\n\n%pink-accent {\n  --accent-background: #{colour.brand-colour(\"maroon\")} !important;\n  --accent-background-light: #{colour.brand-colour(\"pastel-pink\")} !important;\n  --accent-border: #{colour.brand-colour(\"maroon\")} !important;\n  --accent-border-bright: #{colour.brand-colour(\"pink\")} !important;\n  --button-accented-background: #{colour.brand-colour(\"maroon\")} !important;\n}\n\n@mixin pink-accent {\n  @extend %accent-lighter-text;\n  @extend %pink-accent;\n}\n\n%orange-accent {\n  --accent-background: #{colour.brand-colour(\"chestnut\")} !important;\n  --accent-background-light: #{colour.brand-colour(\"pastel-orange\")} !important;\n  --accent-border: #{colour.brand-colour(\"chestnut\")} !important;\n  --accent-border-bright: #{colour.brand-colour(\"orange\")} !important;\n  --button-accented-background: #{colour.brand-colour(\"chestnut\")} !important;\n}\n\n@mixin orange-accent {\n  @extend %accent-lighter-text;\n  @extend %orange-accent;\n}\n\n%green-accent {\n  --accent-background: #{colour.brand-colour(\"forest\")} !important;\n  --accent-background-light: #{colour.brand-colour(\"pastel-green\")} !important;\n  --accent-border: #{colour.brand-colour(\"forest\")} !important;\n  --accent-border-bright: #{colour.brand-colour(\"green\")} !important;\n  --button-accented-background: #{colour.brand-colour(\"forest\")} !important;\n}\n\n@mixin green-accent {\n  @extend %accent-lighter-text;\n  @extend %green-accent;\n}\n\n%blue-accent {\n  --accent-background: #{colour.brand-colour(\"navy\")} !important;\n  --accent-background-light: #{colour.brand-colour(\"pastel-blue\")} !important;\n  --accent-border: #{colour.brand-colour(\"navy\")} !important;\n  --accent-border-bright: #{colour.brand-colour(\"blue\")} !important;\n  --button-accented-background: #{colour.brand-colour(\"navy\")} !important;\n}\n\n@mixin blue-accent {\n  @extend %accent-lighter-text;\n  @extend %blue-accent;\n}\n\n@mixin on-high-contrast {\n  @media (prefers-contrast: more) {\n    @content;\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\n%image-loader-background {\n  background: linear-gradient(\n    -45deg,\n    rgb(0 0 0 / 25%),\n    rgb(255 255 255 / 25%),\n    rgb(0 0 0 / 25%)\n  );\n  background-size: 500% 500%;\n  background-position: 0 50%;\n\n  animation: image-loader-background ease-in-out 1.2s infinite;\n\n  @media (prefers-reduced-motion) {\n    animation: none !important;\n  }\n}\n\n@mixin image-loader-background {\n  @if features.$image-loader-animations {\n    @extend %image-loader-background;\n  }\n}\n","@use \"sass:math\";\n\n@use \"../../variables/borders\" as bordersVars;\n@use \"../../variables/grid\" as gridVars;\n@use \"../../tools/borders\";\n@use \"../../tools/colour\";\n@use \"../../tools/grid\";\n@use \"../../tools/media\";\n@use \"../../tools/spacing\";\n@use \"../../tools/typography\";\n\n$vertical-padding-small: 2 !default;\n$vertical-padding-large: 3 !default;\n$plain-top-padding: 12 !default;\n$split-vertical-padding: 3 !default;\n$shift-overflow: $vertical-padding-large !default;\n$over-overflow: $shift-overflow !default;\n\n.tna-hero {\n  position: relative;\n\n  &::before {\n    content: \"\";\n\n    position: absolute;\n    inset: auto 0 0;\n    z-index: -1;\n    @include colour.colour-border(\"keyline\", 1px, solid, bottom);\n  }\n\n  &__figure {\n    display: flex;\n    flex-direction: column;\n    align-items: flex-end;\n    justify-content: flex-end;\n  }\n\n  &__caption {\n    width: 100%;\n\n    overflow: visible;\n\n    position: absolute;\n    top: 0;\n    right: 0;\n    z-index: 10;\n\n    order: 2;\n  }\n\n  &__details {\n    width: 100%;\n\n    overflow: visible;\n  }\n\n  &__details-summary {\n    position: absolute;\n    top: spacing.space(0.5);\n    right: spacing.space(0.5);\n    z-index: 2;\n\n    &:hover {\n      @include colour.colour-font(\"font-dark\", true);\n\n      @include colour.colour-background(\"background\", true);\n    }\n  }\n\n  &__details[open] &__details-summary {\n    width: 2rem;\n    height: 2rem;\n    padding: 0;\n\n    font-size: 0;\n    line-height: 2rem;\n    text-align: center;\n\n    border: none;\n\n    @include colour.contrast;\n\n    &::before,\n    &::after {\n      content: \"\";\n\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\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  &__details-summary-icon {\n  }\n\n  &__information {\n    padding: spacing.space(0.625) spacing.space(3.25) spacing.space(0.625)\n      spacing.space(1);\n\n    position: absolute;\n    top: 0;\n    right: 0;\n    left: 0;\n    z-index: 1;\n\n    @include colour.contrast;\n\n    @include typography.font-size(16);\n\n    p + p {\n      margin-top: spacing.space(0.5);\n    }\n  }\n\n  &__image {\n    width: 100%;\n\n    order: 1;\n\n    img {\n      width: 100%;\n    }\n  }\n\n  &__inner {\n    order: 3;\n  }\n\n  &__content {\n    padding-top: spacing.space($vertical-padding-small);\n    padding-bottom: spacing.space($vertical-padding-small);\n  }\n\n  &__content-inner {\n    padding-right: 0;\n    padding-left: 0;\n\n    border-left: none;\n\n    @include colour.colour-background(\"background\");\n  }\n\n  @include media.on-larger-than-mobile {\n    &__figure {\n      min-height: clamp(5rem, 30vw, 20rem);\n    }\n\n    &--large &__figure {\n      min-height: clamp(12rem, 33vw, 50rem);\n    }\n\n    &__inner {\n      z-index: 4;\n    }\n\n    &__image {\n      width: auto;\n\n      position: absolute;\n      inset: 0;\n      z-index: 1;\n\n      img {\n        height: 100%;\n\n        object-fit: cover;\n      }\n    }\n\n    &__content {\n      padding-top: spacing.space($plain-top-padding);\n      padding-bottom: spacing.space($vertical-padding-large);\n    }\n\n    &__content-inner {\n      padding: spacing.space(2);\n      @include borders.rounded-border;\n    }\n\n    &__information {\n      max-width: math.div(gridVars.$largest-container-width, 2);\n\n      left: auto;\n    }\n\n    &--split &__content {\n      width: 50%;\n      padding-top: spacing.space($vertical-padding-large);\n      padding-bottom: spacing.space($vertical-padding-large);\n    }\n\n    &--split &__content-inner {\n      padding: 0 grid.gutter-width-half() 0 0;\n    }\n\n    &--split &__image {\n      left: 50%;\n    }\n\n    &--shift {\n      margin-bottom: spacing.space($shift-overflow);\n    }\n\n    &--shift &__content-inner {\n      position: relative;\n      top: spacing.space($vertical-padding-large + $shift-overflow);\n    }\n\n    &--over {\n      margin-bottom: spacing.space($over-overflow);\n    }\n\n    &--over &__details {\n      max-width: gridVars.$largest-container-width;\n      margin: 0 auto;\n\n      position: relative;\n    }\n\n    &--over &__details-summary {\n      top: spacing.space(0.5);\n      right: spacing.space(gridVars.$gutter-width + 0.5);\n    }\n\n    &--over &__information {\n      max-width: calc(50% - #{spacing.space(gridVars.$gutter-width)});\n\n      box-sizing: border-box;\n\n      top: 0;\n      right: spacing.space(gridVars.$gutter-width);\n      left: auto;\n\n      @include borders.rounded-border;\n    }\n\n    &--over &__content {\n      width: 50%;\n      padding-top: spacing.space($vertical-padding-large);\n    }\n\n    &--over &__content-inner {\n      padding: 0;\n    }\n\n    &--over &__image {\n      max-width: calc(\n        #{math.div(gridVars.$largest-container-width, 2)} -\n          (#{grid.gutter-width()} + #{grid.gutter-width-half()})\n      );\n      margin-right: 32px;\n\n      overflow: hidden;\n\n      bottom: spacing.space($over-overflow * -1);\n\n      left: calc(50% + #{grid.gutter-width-half()});\n      z-index: 5;\n      @include borders.rounded-border;\n    }\n\n    &--split &__figure,\n    &--over &__figure {\n      justify-content: center;\n    }\n\n    &--shift &__content-inner,\n    &--over &__image {\n      box-shadow:\n        0 0.25rem 1rem -0.25rem rgb(0 0 0 / 25%),\n        0 0.125rem 0.5rem -0.25rem rgb(0 0 0 / 75%);\n    }\n  }\n}\n","@use \"sass:math\";\n@use \"../variables/typography\";\n@use \"colour\";\n@use \"media\";\n\n@mixin font-size($font-size-px) {\n  font-size: #{math.div($font-size-px, typography.$relative-1rem-px)}rem;\n}\n\n@mixin relative-font-size($font-size-px) {\n  @warn \"relative-font-size() will soon be deprecated in favour of font-size().\";\n  @include font-size($font-size-px);\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  font-variation-settings: \"wdth\" 100;\n  font-style: normal;\n  font-optical-sizing: auto;\n  @if $bold {\n    @include main-font-weight-bold;\n  } @else {\n    @include main-font-weight;\n  }\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  font-style: normal;\n  font-optical-sizing: auto;\n  @if $bold {\n    font-weight: typography.$detail-font-weight-bold;\n  } @else {\n    font-weight: typography.$detail-font-weight;\n  }\n}\n\n@mixin detail-font-small {\n  @include detail-font;\n  @include font-size(14);\n  line-height: 1.1;\n  text-transform: uppercase;\n}\n\n@mixin interactable-text-decoration {\n  text-decoration-thickness: typography.$interactable-text-decoration-thickness;\n  text-underline-offset: typography.$interactable-text-decoration-offset;\n}\n\n@mixin interacted-text-decoration {\n  text-decoration: underline;\n  text-decoration-thickness: typography.$interactive-text-decoration-thickness;\n  text-underline-offset: typography.$interactable-text-decoration-offset;\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  $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  line-height: $line-height;\n  @include font-size($font-size-default);\n\n  @if $all-identical != true {\n    @if $medium-small-and-tiny-identical != true {\n      @include media.on-medium {\n        @include font-size($font-size-medium);\n      }\n\n      @if $small-and-tiny-identical != true {\n        @include media.on-small {\n          @include font-size($font-size-small);\n        }\n\n        @include media.on-tiny {\n          @include font-size($font-size-tiny);\n        }\n      } @else {\n        @include media.on-mobile {\n          @include font-size($font-size-small);\n        }\n      }\n    } @else {\n      @include media.on-smaller-than-large {\n        @include font-size($font-size-medium);\n      }\n    }\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 \"../variables/borders\";\n\n@mixin rounded-border {\n  border-radius: borders.$rounded-border-radius;\n}\n","$thick-border-width: 5px !default;\n$very-thick-border-width: 8px !default;\n$rounded-border-radius: 2px !default;\n","$largest-container-width: 1280px !default;\n\n$gutter-width: 2 !default;\n$gutter-width-tiny: 1 !default;\n\n$column-count: 12;\n$column-count-medium: 6;\n$column-count-small: 4;\n$column-count-tiny: 2;\n"]}
+{"version":3,"sourceRoot":"","sources":["../../../../src/nationalarchives/tools/_colour.scss","../../../../src/nationalarchives/components/hero/hero.scss","../../../../src/nationalarchives/tools/_typography.scss","../../../../src/nationalarchives/tools/_media.scss","../../../../src/nationalarchives/tools/_borders.scss","../../../../src/nationalarchives/variables/_borders.scss","../../../../src/nationalarchives/variables/_grid.scss"],"names":[],"mappings":"AAmPA,2EACE,yCACA,uCACA,uCACA,yCACA,yCACA,6BACA,6CACA,mCACA,6CACA,2CACA,uDACA,uDACA,mEACA,6CA/KA,4CAJA,gCC5DF,UACE,kBAEA,kBACE,WAEA,kBACA,eACA,WD0EE,+DCtEJ,kBACE,aACA,sBACA,qBACA,yBAGF,mBACE,WAEA,iBAEA,kBACA,MACA,QACA,WAEA,QAGF,mBACE,WAEA,iBAGF,2BACE,kBACA,WACA,aACA,UAEA,iCDgBF,gDAIA,uDCbA,oDACE,WACA,YACA,UAEA,YACA,iBACA,kBAEA,YAIA,uHAEE,WAEA,aACA,eAEA,cAEA,kBACA,QACA,SDXJ,gDCgBE,4DACE,8CAGF,2DACE,+CAIA,mIAEE,cAIJ,yDACE,YAOJ,uBACE,uCAGA,kBACA,MACA,QACA,OACA,UC3HF,eDiIE,2BACE,kBAIJ,iBACE,WAEA,QAEA,qBACE,WAIJ,iBACE,QAGF,mBACE,iBACA,oBAGF,yBACE,gBACA,eAEA,iBDjFF,4CGlBA,6BFyGE,kBACE,kCAGF,mCACE,mCAGF,iBACE,UAGF,iBACE,WAEA,kBACA,QACA,UAEA,qBACE,YAEA,iBAIJ,mBACE,kBACA,oBAGF,yBACE,aGtMJ,cCDsB,IJ2MpB,uBACE,gBAEA,UAGF,oCACE,UACA,iBACA,oBAGF,0CACE,mBAGF,kCACE,SAGF,iBACE,mBAGF,0CACE,kBACA,SAGF,gBACE,mBAGF,mCACE,UK/OoB,OLgPpB,cAEA,kBAGF,2CACE,WACA,aAGF,uCACE,2BAEA,sBAEA,MACA,WACA,UG9PJ,cCDsB,IJoQpB,mCACE,UACA,iBAGF,yCACE,UAGF,iCACE,sCAIA,kBAEA,gBAEA,aAEA,sBACA,UGxRJ,cCDsB,IJ6RpB,qEAEE,uBAGF,2EAEE,WACE","file":"hero.css","sourcesContent":["@use \"sass:list\";\n@use \"sass:map\";\n@use \"sass:meta\";\n@use \"../variables/a11y\";\n@use \"../variables/borders\";\n@use \"../variables/forms\";\n@use \"../variables/colour\";\n@use \"../variables/features\";\n@use \"../tools/media\";\n\n$base-colours: (\n  \"background\",\n  \"font-base\",\n  \"font-dark\",\n  \"font-light\",\n  \"icon-light\",\n  \"link\",\n  \"link-visited\",\n  \"keyline\",\n  \"keyline-dark\"\n);\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      @if list.index($base-colours, $name) {\n        --base-#{$name}: #{$value};\n      }\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      @if list.index($base-colours, $name) {\n        --base-#{$name}: #{$value};\n      }\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      @if list.index($base-colours, $name) {\n        --base-#{$name}: #{$value};\n      }\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      @if list.index((\"keyline\", \"keyline-dark\"), $name) {\n        --base-#{$name}: #{$value};\n      }\n    }\n  }\n}\n\n@function colour-var($colour) {\n  @return var(\n    --#{$colour},\n    #{map.get(colour.$colour-palette-default, $colour)}\n  );\n}\n\n@mixin colour-font($colour, $important: false) {\n  color: colour-var($colour) if(sass($important): !important; else: null);\n}\n\n@mixin colour-background($colour, $important: false) {\n  background-color: colour-var($colour)\n    if(sass($important): !important; else: null);\n}\n\n@mixin colour-background-brand($brandColour, $important: false) {\n  background-color: #{brand-colour($brandColour)}\n    if(sass($important): !important; else: 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      border-#{$direction}: $width\n        colour-var($colour)\n        $style\n        if(sass($important): !important; else: null);\n    } @else {\n      border-#{$direction}-color: colour-var($colour)\n        if(sass($important): !important; else: null);\n    }\n  } @else {\n    @if $width != \"\" {\n      border: $width\n        colour-var($colour)\n        $style\n        if(sass($important): !important; else: null);\n    } @else {\n      border-color: var(\n          --#{$colour},\n          #{map.get(colour.$colour-palette-default, $colour)}\n        )\n        if(sass($important): !important; else: null);\n    }\n  }\n}\n\n@mixin colour-outline($colour, $width: \"\", $style: solid, $important: false) {\n  @if $width != \"\" {\n    outline: $width\n      colour-var($colour)\n      $style\n      if(sass($important): !important; else: null);\n  } @else {\n    outline-color: colour-var($colour)\n      if(sass($important): !important; else: null);\n  }\n}\n\n@mixin colour-fill($colour, $important: false) {\n  fill: colour-var($colour) if(sass($important): !important; else: null);\n}\n\n%colour-input {\n  @include colour-font(\"input-foreground\");\n  @include colour-background(\"input-background\");\n  @include colour-border(\"input-border\", forms.$form-field-border-width);\n\n  &:hover {\n    outline: a11y.$focus-outline-active-total-width var(--keyline) solid;\n  }\n}\n\n@mixin colour-input() {\n  @extend %colour-input;\n}\n\n@mixin thick-keyline($direction: \"\", $veryThick: false) {\n  $border-width: borders.$thick-border-width;\n  @if $veryThick {\n    $border-width: borders.$very-thick-border-width;\n  }\n  @if $direction != \"\" {\n    @include colour-border(\"keyline\", $border-width, solid, $direction);\n  } @else {\n    @include colour-border(\"keyline\", $border-width, solid);\n  }\n}\n\n@mixin thick-keyline-dark($direction: \"\", $veryThick: false) {\n  $border-width: borders.$thick-border-width;\n  @if $veryThick {\n    $border-width: borders.$very-thick-border-width;\n  }\n  @if $direction != \"\" {\n    @include colour-border(\"keyline-dark\", $border-width, solid, $direction);\n  } @else {\n    @include colour-border(\"keyline-dark\", $border-width, solid);\n  }\n}\n\n@mixin thick-keyline-accent($direction: \"\", $veryThick: false) {\n  $border-width: borders.$thick-border-width;\n  @if $veryThick {\n    $border-width: borders.$very-thick-border-width;\n  }\n  @if $direction != \"\" {\n    @include colour-border(\"accent-border\", $border-width, solid, $direction);\n  } @else {\n    @include colour-border(\"accent-border\", $border-width, solid);\n  }\n}\n\n@mixin thick-keyline-error($direction: \"\", $veryThick: false) {\n  $border-width: borders.$thick-border-width;\n  @if $veryThick {\n    $border-width: borders.$very-thick-border-width;\n  }\n  @if $direction != \"\" {\n    @include colour-border(\n      \"form-error-border\",\n      $border-width,\n      solid,\n      $direction\n    );\n  } @else {\n    @include colour-border(\"form-error-border\", $border-width, solid);\n  }\n}\n\n@mixin thick-keyline-brand($direction: \"\", $brandColour, $veryThick: false) {\n  $border-width: borders.$thick-border-width;\n  @if $veryThick {\n    $border-width: borders.$very-thick-border-width;\n  }\n  @if $direction != \"\" {\n    border-#{$direction}: $border-width #{brand-colour($brandColour)} solid;\n  } @else {\n    border: $border-width #{brand-colour($brandColour)} solid;\n  }\n}\n\n@mixin thick-keyline-transparent($direction: \"\", $veryThick: false) {\n  $border-width: borders.$thick-border-width;\n  @if $veryThick {\n    $border-width: borders.$very-thick-border-width;\n  }\n  @if $direction != \"\" {\n    border-#{$direction}: $border-width transparent solid;\n  } @else {\n    border: $border-width transparent solid;\n  }\n}\n\n%always-light {\n  @include colour-css-vars;\n\n  @media (prefers-contrast: more) {\n    @include colour-css-vars-high-contrast;\n  }\n}\n\n@mixin always-light {\n  @extend %always-light;\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  --accent-border: var(--accent-border-bright);\n\n  @include colour-background(\"background\");\n\n  @include colour-font(\"font-base\");\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    --accent-border: var(--accent-border-bright);\n\n    @include colour-background(\"background\");\n\n    @include colour-font(\"font-base\");\n  }\n}\n\n@mixin contrast-on-mobile {\n  @extend %contrast-on-mobile;\n}\n\n%base {\n  @each $name, $value in $base-colours {\n    --#{$name}: var(--base-#{$value});\n  }\n\n  @include colour-background(\"background\");\n\n  @include colour-font(\"font-base\");\n}\n\n@mixin base {\n  @extend %base;\n}\n\n%tint {\n  --background: var(--background-tint);\n\n  @include colour-background(\"background\");\n}\n\n@mixin tint {\n  @extend %tint;\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  --accent-border: var(--accent-font-dark);\n  --button-text: var(--accent-button-text);\n  --button-background: var(--accent-button-background);\n  --button-hover-text: var(--accent-button-hover-text);\n  --button-hover-background: var(--accent-button-hover-background);\n\n  @include colour-background(\"background\");\n\n  @include colour-font(\"font-base\");\n}\n\n@mixin accent {\n  @extend %accent;\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  --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  --accent-border: var(--accent-background);\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      --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      --accent-border: var(--accent-font-dark);\n      --button-text: var(--accent-button-text);\n      --button-background: var(--accent-button-background);\n      --button-hover-text: var(--accent-button-hover-text);\n      --button-hover-background: var(--accent-button-hover-background);\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    --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    --accent-border: var(--accent-font-dark);\n    --button-text: var(--accent-button-text);\n    --button-background: var(--accent-button-background);\n    --button-hover-text: var(--accent-button-hover-text);\n    --button-hover-background: var(--accent-button-hover-background);\n  }\n}\n\n@mixin accent-light {\n  @extend %accent-light;\n}\n\n%yellow-accent {\n  --accent-background: #{colour.brand-colour(\"yellow\")} !important;\n  --accent-background-light: #{colour.brand-colour(\"cream\")} !important;\n  --accent-border: #{colour.brand-colour(\"yellow\")} !important;\n  --accent-border-bright: #{colour.brand-colour(\"yellow\")} !important;\n  --accent-font-base: #{colour.brand-colour(\"black\")} !important;\n  --accent-font-dark: #{colour.brand-colour(\"black\")} !important;\n  --accent-font-light: #{colour.brand-colour(\"black\", 0.7)} !important;\n  --accent-icon-light: #{colour.brand-colour(\"black\", 0.7)} !important;\n  --accent-link: #{colour.brand-colour(\"black\")} !important;\n  --accent-link-visited: #{colour.brand-colour(\"black\")} !important;\n  --accent-keyline: #{colour.brand-colour(\"black\", 0.5)} !important;\n  --accent-keyline-dark: #{colour.brand-colour(\"black\", 0.8)} !important;\n  --button-accented-text: #{colour.brand-colour(\"black\")} !important;\n  --button-accented-background: #{colour.brand-colour(\"yellow\")} !important;\n}\n\n@mixin yellow-accent {\n  @extend %yellow-accent;\n}\n\n%accent-lighter-text {\n  --accent-font-base: #{colour.brand-colour(\"white\")} !important;\n  --accent-font-dark: #{colour.brand-colour(\"white\")} !important;\n  --accent-font-light: #{colour.brand-colour(\"white\", 0.7)} !important;\n  --accent-icon-light: #{colour.brand-colour(\"white\", 0.7)} !important;\n  --accent-link: #{colour.brand-colour(\"white\")} !important;\n  --accent-link-visited: #{colour.brand-colour(\"white\")} !important;\n  --accent-keyline: #{colour.brand-colour(\"white\", 0.5)} !important;\n  --accent-keyline-dark: #{colour.brand-colour(\"white\", 0.8)} !important;\n  --button-accented-text: #{colour.brand-colour(\"white\")} !important;\n}\n\n%black-accent {\n  --accent-background: #{colour.brand-colour(\"black\")} !important;\n  --accent-background-light: #{colour.brand-colour(\"light-grey\")} !important;\n  --accent-border: #{colour.brand-colour(\"black\")} !important;\n  --accent-border-bright: #{colour.brand-colour(\"grey\")} !important;\n  --button-accented-text: #{colour.brand-colour(\"black\")} !important;\n  --button-accented-background: #{colour.brand-colour(\"grey\")} !important;\n}\n\n@mixin black-accent {\n  @extend %accent-lighter-text;\n  @extend %black-accent;\n}\n\n%pink-accent {\n  --accent-background: #{colour.brand-colour(\"maroon\")} !important;\n  --accent-background-light: #{colour.brand-colour(\"pastel-pink\")} !important;\n  --accent-border: #{colour.brand-colour(\"maroon\")} !important;\n  --accent-border-bright: #{colour.brand-colour(\"pink\")} !important;\n  --button-accented-background: #{colour.brand-colour(\"maroon\")} !important;\n}\n\n@mixin pink-accent {\n  @extend %accent-lighter-text;\n  @extend %pink-accent;\n}\n\n%orange-accent {\n  --accent-background: #{colour.brand-colour(\"chestnut\")} !important;\n  --accent-background-light: #{colour.brand-colour(\"pastel-orange\")} !important;\n  --accent-border: #{colour.brand-colour(\"chestnut\")} !important;\n  --accent-border-bright: #{colour.brand-colour(\"orange\")} !important;\n  --button-accented-background: #{colour.brand-colour(\"chestnut\")} !important;\n}\n\n@mixin orange-accent {\n  @extend %accent-lighter-text;\n  @extend %orange-accent;\n}\n\n%green-accent {\n  --accent-background: #{colour.brand-colour(\"forest\")} !important;\n  --accent-background-light: #{colour.brand-colour(\"pastel-green\")} !important;\n  --accent-border: #{colour.brand-colour(\"forest\")} !important;\n  --accent-border-bright: #{colour.brand-colour(\"green\")} !important;\n  --button-accented-background: #{colour.brand-colour(\"forest\")} !important;\n}\n\n@mixin green-accent {\n  @extend %accent-lighter-text;\n  @extend %green-accent;\n}\n\n%blue-accent {\n  --accent-background: #{colour.brand-colour(\"navy\")} !important;\n  --accent-background-light: #{colour.brand-colour(\"pastel-blue\")} !important;\n  --accent-border: #{colour.brand-colour(\"navy\")} !important;\n  --accent-border-bright: #{colour.brand-colour(\"blue\")} !important;\n  --button-accented-background: #{colour.brand-colour(\"navy\")} !important;\n}\n\n@mixin blue-accent {\n  @extend %accent-lighter-text;\n  @extend %blue-accent;\n}\n\n@mixin on-high-contrast {\n  @media (prefers-contrast: more) {\n    @content;\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\n%image-loader-background {\n  background: linear-gradient(\n    -45deg,\n    rgb(0 0 0 / 25%),\n    rgb(255 255 255 / 25%),\n    rgb(0 0 0 / 25%)\n  );\n  background-size: 500% 500%;\n  background-position: 0 50%;\n\n  animation: image-loader-background ease-in-out 1.2s infinite;\n\n  @media (prefers-reduced-motion) {\n    animation: none !important;\n  }\n}\n\n@mixin image-loader-background {\n  @if features.$image-loader-animations {\n    @extend %image-loader-background;\n  }\n}\n","@use \"sass:math\";\n\n@use \"../../variables/borders\" as bordersVars;\n@use \"../../variables/grid\" as gridVars;\n@use \"../../tools/borders\";\n@use \"../../tools/colour\";\n@use \"../../tools/grid\";\n@use \"../../tools/media\";\n@use \"../../tools/spacing\";\n@use \"../../tools/typography\";\n\n$vertical-padding-small: 2 !default;\n$vertical-padding-large: 3 !default;\n$plain-top-padding: 12 !default;\n$split-vertical-padding: 3 !default;\n$shift-overflow: $vertical-padding-large !default;\n$over-overflow: $shift-overflow !default;\n\n.tna-hero {\n  position: relative;\n\n  &::before {\n    content: \"\";\n\n    position: absolute;\n    inset: auto 0 0;\n    z-index: -1;\n    @include colour.colour-border(\"keyline\", 1px, solid, bottom);\n  }\n\n  &__figure {\n    display: flex;\n    flex-direction: column;\n    align-items: flex-end;\n    justify-content: flex-end;\n  }\n\n  &__caption {\n    width: 100%;\n\n    overflow: visible;\n\n    position: absolute;\n    top: 0;\n    right: 0;\n    z-index: 10;\n\n    order: 2;\n  }\n\n  &__details {\n    width: 100%;\n\n    overflow: visible;\n  }\n\n  &__details-summary {\n    position: absolute;\n    top: spacing.space(0.5);\n    right: spacing.space(0.5);\n    z-index: 2;\n\n    &:hover {\n      @include colour.colour-font(\"font-dark\", true);\n\n      @include colour.colour-background(\"background\", true);\n    }\n  }\n\n  &__details[open] &__details-summary {\n    width: 2rem;\n    height: 2rem;\n    padding: 0;\n\n    font-size: 0;\n    line-height: 2rem;\n    text-align: center;\n\n    border: none;\n\n    @include colour.contrast;\n\n    &::before,\n    &::after {\n      content: \"\";\n\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\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  &__details-summary-icon {\n  }\n\n  &__information {\n    padding: spacing.space(0.625) spacing.space(3.25) spacing.space(0.625)\n      spacing.space(1);\n\n    position: absolute;\n    top: 0;\n    right: 0;\n    left: 0;\n    z-index: 1;\n\n    @include colour.contrast;\n\n    @include typography.font-size(16);\n\n    p + p {\n      margin-top: spacing.space(0.5);\n    }\n  }\n\n  &__image {\n    width: 100%;\n\n    order: 1;\n\n    img {\n      width: 100%;\n    }\n  }\n\n  &__inner {\n    order: 3;\n  }\n\n  &__content {\n    padding-top: spacing.space($vertical-padding-small);\n    padding-bottom: spacing.space($vertical-padding-small);\n  }\n\n  &__content-inner {\n    padding-right: 0;\n    padding-left: 0;\n\n    border-left: none;\n\n    @include colour.colour-background(\"background\");\n  }\n\n  @include media.on-larger-than-mobile {\n    &__figure {\n      min-height: clamp(5rem, 30vw, 20rem);\n    }\n\n    &--large &__figure {\n      min-height: clamp(12rem, 33vw, 50rem);\n    }\n\n    &__inner {\n      z-index: 4;\n    }\n\n    &__image {\n      width: auto;\n\n      position: absolute;\n      inset: 0;\n      z-index: 1;\n\n      img {\n        height: 100%;\n\n        object-fit: cover;\n      }\n    }\n\n    &__content {\n      padding-top: spacing.space($plain-top-padding);\n      padding-bottom: spacing.space($vertical-padding-large);\n    }\n\n    &__content-inner {\n      padding: spacing.space(2);\n      @include borders.rounded-border;\n    }\n\n    &__information {\n      max-width: math.div(gridVars.$largest-container-width, 2);\n\n      left: auto;\n    }\n\n    &--split &__content {\n      width: 50%;\n      padding-top: spacing.space($vertical-padding-large);\n      padding-bottom: spacing.space($vertical-padding-large);\n    }\n\n    &--split &__content-inner {\n      padding: 0 grid.gutter-width-half() 0 0;\n    }\n\n    &--split &__image {\n      left: 50%;\n    }\n\n    &--shift {\n      margin-bottom: spacing.space($shift-overflow);\n    }\n\n    &--shift &__content-inner {\n      position: relative;\n      top: spacing.space($vertical-padding-large + $shift-overflow);\n    }\n\n    &--over {\n      margin-bottom: spacing.space($over-overflow);\n    }\n\n    &--over &__details {\n      max-width: gridVars.$largest-container-width;\n      margin: 0 auto;\n\n      position: relative;\n    }\n\n    &--over &__details-summary {\n      top: spacing.space(0.5);\n      right: spacing.space(gridVars.$gutter-width + 0.5);\n    }\n\n    &--over &__information {\n      max-width: calc(50% - #{spacing.space(gridVars.$gutter-width * 1.5)});\n\n      box-sizing: border-box;\n\n      top: 0;\n      right: spacing.space(gridVars.$gutter-width);\n      left: auto;\n\n      @include borders.rounded-border;\n    }\n\n    &--over &__content {\n      width: 50%;\n      padding-top: spacing.space($vertical-padding-large);\n    }\n\n    &--over &__content-inner {\n      padding: 0;\n    }\n\n    &--over &__image {\n      max-width: calc(\n        #{math.div(gridVars.$largest-container-width, 2)} -\n          (#{grid.gutter-width()} + #{grid.gutter-width-half()})\n      );\n      margin-right: 32px;\n\n      overflow: hidden;\n\n      bottom: spacing.space($over-overflow * -1);\n\n      left: calc(50% + #{grid.gutter-width-half()});\n      z-index: 5;\n      @include borders.rounded-border;\n    }\n\n    &--split &__figure,\n    &--over &__figure {\n      justify-content: center;\n    }\n\n    &--shift &__content-inner,\n    &--over &__image {\n      box-shadow:\n        0 0.25rem 1rem -0.25rem rgb(0 0 0 / 25%),\n        0 0.125rem 0.5rem -0.25rem rgb(0 0 0 / 75%);\n    }\n  }\n}\n","@use \"sass:math\";\n@use \"../variables/typography\";\n@use \"colour\";\n@use \"media\";\n\n@mixin font-size($font-size-px) {\n  font-size: #{math.div($font-size-px, typography.$relative-1rem-px)}rem;\n}\n\n@mixin relative-font-size($font-size-px) {\n  @warn \"relative-font-size() will soon be deprecated in favour of font-size().\";\n  @include font-size($font-size-px);\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  font-variation-settings: \"wdth\" 100;\n  font-style: normal;\n  font-optical-sizing: auto;\n  @if $bold {\n    @include main-font-weight-bold;\n  } @else {\n    @include main-font-weight;\n  }\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  font-style: normal;\n  font-optical-sizing: auto;\n  @if $bold {\n    font-weight: typography.$detail-font-weight-bold;\n  } @else {\n    font-weight: typography.$detail-font-weight;\n  }\n}\n\n@mixin detail-font-small {\n  @include detail-font;\n  @include font-size(14);\n  line-height: 1.1;\n  text-transform: uppercase;\n}\n\n@mixin interactable-text-decoration {\n  text-decoration-thickness: typography.$interactable-text-decoration-thickness;\n  text-underline-offset: typography.$interactable-text-decoration-offset;\n}\n\n@mixin interacted-text-decoration {\n  text-decoration: underline;\n  text-decoration-thickness: typography.$interactive-text-decoration-thickness;\n  text-underline-offset: typography.$interactable-text-decoration-offset;\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  $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  line-height: $line-height;\n  @include font-size($font-size-default);\n\n  @if $all-identical != true {\n    @if $medium-small-and-tiny-identical != true {\n      @include media.on-medium {\n        @include font-size($font-size-medium);\n      }\n\n      @if $small-and-tiny-identical != true {\n        @include media.on-small {\n          @include font-size($font-size-small);\n        }\n\n        @include media.on-tiny {\n          @include font-size($font-size-tiny);\n        }\n      } @else {\n        @include media.on-mobile {\n          @include font-size($font-size-small);\n        }\n      }\n    } @else {\n      @include media.on-smaller-than-large {\n        @include font-size($font-size-medium);\n      }\n    }\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 \"../variables/borders\";\n\n@mixin rounded-border {\n  border-radius: borders.$rounded-border-radius;\n}\n","$thick-border-width: 5px !default;\n$very-thick-border-width: 8px !default;\n$rounded-border-radius: 2px !default;\n","$largest-container-width: 1280px !default;\n\n$gutter-width: 2 !default;\n$gutter-width-tiny: 1 !default;\n\n$column-count: 12;\n$column-count-medium: 6;\n$column-count-small: 4;\n$column-count-tiny: 2;\n"]}

package/nationalarchives/components/hero/hero.scss

@@ -249,7 +249,7 @@ $over-overflow: $shift-overflow !default;
     }
 
     &--over &__information {
-      max-width: calc(50% - #{spacing.space(gridVars.$gutter-width)});
+      max-width: calc(50% - #{spacing.space(gridVars.$gutter-width * 1.5)});
 
       box-sizing: border-box;
 

package/nationalarchives/components/hero/template.njk

@@ -78,7 +78,7 @@
     {%- if params.imageCaption %}
     <figcaption class="tna-hero__caption">
       <details class="tna-hero__details">
-        <summary class="tna-hero__details-summary tna-button tna-button--small tna-button--icon-only-mobile" aria-label="Additional information about this image">
+        <summary class="tna-hero__details-summary tna-button tna-button--small tna-button--icon-only-mobile">
           <i class="fa-solid fa-circle-info tna-hero__details-summary-icon" aria-hidden="true"></i>
           About this image
         </summary>