npm - @nationalarchives/frontend - Versions diffs - 0.2.11 → 0.2.12 - Mend

@nationalarchives/frontend 0.2.11 → 0.2.12

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

Files changed (88) hide show

package/nationalarchives/components/global-header/global-header.css CHANGED Viewed

	@@ -1 +1 @@
1	- .tna-global-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-list-marker: var(--accent-border);background-color:var(--background, #f4f4f4);color:var(--font-base, #343338)}.tna-global-header{padding-top:16px;background:linear-gradient(0deg, rgb(34, 34, 34) 0%, rgb(0, 0, 0) 100%);color:var(--font-base, #343338)}.tna-template--dark-theme .tna-global-header{background:#010101}@media(prefers-color-scheme: dark){.tna-template--system-theme .tna-global-header{background:#010101}}.tna-global-header__main{padding-bottom:24px}.tna-global-header__logo-wrapper{margin-top:8px;display:flex}.tna-global-header__logo{display:flex;align-items:flex-end;gap:16px;text-decoration:none}.tna-global-header__logo--link,.tna-global-header__logo--link:link,.tna-global-header__logo--link:visited{color:var(--font-base, #343338)}.tna-global-header__logo--link:hover{text-decoration:none;outline:.3125rem var(--font-dark, rgb(1, 1, 1)) solid;outline-offset:1px}.tna-global-header .tna-logo{width:6.75rem;height:6.75rem;flex-shrink:0}.tna-global-header__logo-strapline{padding-right:10px;line-height:2.25rem;text-transform:uppercase;font-family:supria-sans-condensed,"Arial Narrow",sans-serif;font-weight:500;font-size:1.25rem}.tna-global-header__navigation-button-wrapper{display:none}.tna-global-header__hamburger{width:2rem;height:.25rem;display:inline-block;background-color:var(--font-dark, rgb(1, 1, 1))}.tna-global-header__hamburger::before,.tna-global-header__hamburger::after{content:"";width:2rem;height:.25rem;display:block;position:absolute;right:0;background-color:inherit}.tna-global-header__hamburger::before{top:0}.tna-global-header__hamburger::after{bottom:0}.tna-global-header__navigation-button{height:2rem;padding:0;appearance:none;display:flex;align-items:center;gap:.75rem;position:relative;color:inherit;background:none;border:0 rgba(0,0,0,0) solid;border-width:.25rem 0;cursor:pointer;font-weight:700;font-size:1rem}.tna-global-header__navigation-button:hover{text-decoration:underline;text-decoration-thickness:3.5px}.tna-global-header__navigation-button--opened .tna-global-header__hamburger{height:0}.tna-global-header__navigation-button--opened .tna-global-header__hamburger::before{top:.625rem;transform:rotate(-135deg)}.tna-global-header__navigation-button--opened .tna-global-header__hamburger::after{bottom:.625rem;transform:rotate(135deg)}.tna-global-header__navigation{height:100%;margin:8px 0 0;position:relative;columns:2;column-gap:32px;list-style:none}.tna-global-header__navigation-item{break-inside:avoid}.tna-global-header__navigation-item-link{min-width:15rem;height:2.25rem;display:block;box-sizing:border-box;line-height:2.25rem;text-decoration:none;font-size:1.0625rem;border-bottom:.5px var(--keyline, rgb(38 38 42/0.25)) solid}.tna-global-header__navigation-item-link,.tna-global-header__navigation-item-link:link,.tna-global-header__navigation-item-link:visited{color:var(--font-base, #343338)}.tna-global-header__navigation-item-link:hover{text-decoration:underline;text-decoration-thickness:3.5px}.tna-global-header__top-navigation{padding:0 0 8px;display:flex;justify-content:flex-end;gap:24px;font-size:0.9375rem;list-style:none}.tna-global-header__top-navigation-link{display:flex;align-items:center;gap:8px;text-decoration:none}.tna-global-header__top-navigation-link,.tna-global-header__top-navigation-link:link,.tna-global-header__top-navigation-link:visited{color:var(--font-light, rgb(1 1 1/0.58))}.tna-global-header__top-navigation-link:hover{color:var(--font-base, #343338);text-decoration:underline;text-decoration-thickness:3.5px}.tna-global-header__top-navigation-link svg{height:1em;display:inline-block}.tna-global-header__top-navigation-link svg path{fill:currentColor}@media(min-width: 48.0625em)and (max-width: 64em){.tna-global-header__navigation{column-gap:16px}.tna-global-header__navigation-item-link{font-size:1rem}.tna-global-header--collapse-on-medium .tna-global-header__navigation-wrapper{width:100%}.tna-global-header--collapse-on-medium .tna-global-header__top-navigation-wrapper{flex:1;order:2}.tna-global-header--collapse-on-medium .tna-global-header__main{padding-bottom:16px}.tna-global-header--collapse-on-medium .tna-global-header__logo{gap:12px}.tna-global-header--collapse-on-medium .tna-global-header__logo-wrapper{margin-top:8px;margin-bottom:8px}.tna-global-header--collapse-on-medium .tna-logo{width:5rem;height:5rem}.tna-global-header--collapse-on-medium .tna-global-header__logo-strapline{line-height:1.6666666667rem}.tna-global-header--collapse-on-medium .tna-global-header__navigation{margin-bottom:8px}.tna-global-header--collapse-on-medium .tna-global-header__navigation,.tna-global-header--collapse-on-medium .tna-global-header__navigation-item,.tna-global-header--collapse-on-medium .tna-global-header__navigation-item-link{height:auto}}@media(max-width: 48em){.tna-global-header__main{padding-bottom:0}.tna-global-header__logo-wrapper,.tna-global-header__navigation-button-wrapper{margin-top:0;margin-bottom:16px}.tna-global-header__logo{gap:12px}.tna-global-header__navigation-button-wrapper{display:flex;align-items:center}.tna-global-header__navigation,.tna-global-header__navigation-item,.tna-global-header__navigation-item-link{height:auto}.tna-global-header__navigation{margin-top:0;columns:1;background-color:rgba(255,255,255,.1);border-top:2px var(--keyline-dark, #26262a) solid;border-bottom:2px var(--keyline-dark, #26262a) solid}.tna-global-header__navigation-item{flex-direction:column;align-items:flex-start}.tna-global-header__navigation-item-link{line-height:1.75rem;font-weight:600}.tna-global-header__navigation-item:last-child .tna-global-header__navigation-item-link{border-bottom:none}.tna-global-header__navigation-item-contents{display:block}.tna-global-header__navigation-item-children{margin-bottom:16px;margin-left:24px}.tna-global-header__top-navigation{padding-top:8px;padding-bottom:8px;justify-content:flex-start;gap:24px}.tna-global-header__top-navigation-link{padding:4px 0}}@media(min-width: 30.0625em)and (max-width: 48em){.tna-global-header .tna-logo{width:4rem;height:4rem}.tna-global-header__logo-strapline{line-height:1.25rem}.tna-global-header__navigation{width:calc(100% + 64px);left:-32px}.tna-global-header__navigation-item-link{padding:8px 32px}}@media(max-width: 30em){.tna-global-header .tna-logo{width:3.5rem;height:3.5rem}.tna-global-header__logo-strapline{line-height:1}.tna-global-header__navigation-button{font-size:0.875rem}.tna-global-header__navigation{width:calc(100% + 32px);left:-16px}.tna-global-header__navigation-item-link{padding:8px 16px}}@media(forced-colors: active){.tna-global-header{border-bottom:1px var(--keyline, rgb(38 38 42/0.25)) solid}}@media(prefers-contrast: more){.tna-global-header{border-bottom:1px var(--keyline, rgb(38 38 42/0.25)) solid}}@media(forced-colors: active){.tna-global-header__navigation-button{height:auto;line-height:2;font-size:1.125rem;font-weight:700;border:none}.tna-global-header__hamburger{display:none}}/# sourceMappingURL=global-header.css.map /
1	+ .tna-global-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-list-marker: var(--accent-border);background-color:var(--background, #f4f4f4);color:var(--font-base, #343338)}.tna-global-header{padding-top:16px;background:linear-gradient(0deg, rgb(34, 34, 34) 0%, rgb(0, 0, 0) 100%);color:var(--font-base, #343338)}.tna-template--dark-theme .tna-global-header{background:#010101}@media(prefers-color-scheme: dark){.tna-template--system-theme .tna-global-header{background:#010101}}.tna-global-header__main{padding-bottom:24px}.tna-global-header__logo-wrapper{margin-top:8px;display:flex}.tna-global-header__logo{display:flex;align-items:flex-end;gap:16px;text-decoration:none}.tna-global-header__logo--link,.tna-global-header__logo--link:link,.tna-global-header__logo--link:visited{color:var(--font-base, #343338)}.tna-global-header__logo--link:hover,.tna-global-header__logo--link:focus-visible{text-decoration:none;outline:.3125rem var(--font-dark, rgb(1, 1, 1)) solid;outline-offset:1px}.tna-global-header .tna-logo{width:6.75rem;height:6.75rem;flex-shrink:0}.tna-global-header__logo-strapline{padding-right:10px;line-height:2.25rem;text-transform:uppercase;font-family:supria-sans-condensed,"Arial Narrow",sans-serif;font-weight:500;font-size:1.25rem}.tna-global-header__navigation-button-wrapper{display:none}.tna-global-header__hamburger{width:2rem;height:.25rem;display:inline-block;background-color:var(--font-dark, rgb(1, 1, 1))}.tna-global-header__hamburger::before,.tna-global-header__hamburger::after{content:"";width:2rem;height:.25rem;display:block;position:absolute;right:0;background-color:inherit}.tna-global-header__hamburger::before{top:0}.tna-global-header__hamburger::after{bottom:0}.tna-global-header__navigation-button{height:2rem;padding:0;appearance:none;display:flex;align-items:center;gap:.75rem;position:relative;color:inherit;background:none;border:0 rgba(0,0,0,0) solid;border-width:.25rem 0;cursor:pointer;font-weight:700;font-size:1rem}.tna-global-header__navigation-button:hover,.tna-global-header__navigation-button:focus-visible{text-decoration:underline;text-decoration-thickness:3.5px}.tna-global-header__navigation-button--opened .tna-global-header__hamburger{height:0}.tna-global-header__navigation-button--opened .tna-global-header__hamburger::before{top:.625rem;transform:rotate(-135deg)}.tna-global-header__navigation-button--opened .tna-global-header__hamburger::after{bottom:.625rem;transform:rotate(135deg)}.tna-global-header__navigation{height:100%;margin:8px 0 0;position:relative;columns:2;column-gap:32px;list-style:none}.tna-global-header__navigation-item{break-inside:avoid}.tna-global-header__navigation-item-link{min-width:15rem;height:2.25rem;display:block;box-sizing:border-box;line-height:2.25rem;text-decoration:none;font-size:1.0625rem;border-bottom:.5px var(--keyline, rgb(38 38 42/0.25)) solid}.tna-global-header__navigation-item-link,.tna-global-header__navigation-item-link:link,.tna-global-header__navigation-item-link:visited{color:var(--font-base, #343338)}.tna-global-header__navigation-item-link:hover,.tna-global-header__navigation-item-link:focus-visible{text-decoration:underline;text-decoration-thickness:3.5px}.tna-global-header__top-navigation{padding:0 0 8px;display:flex;justify-content:flex-end;gap:24px;font-size:0.9375rem;list-style:none}.tna-global-header__top-navigation-link{display:flex;align-items:center;gap:8px;text-decoration:none}.tna-global-header__top-navigation-link,.tna-global-header__top-navigation-link:link,.tna-global-header__top-navigation-link:visited{color:var(--font-light, rgb(1 1 1/0.58))}.tna-global-header__top-navigation-link:hover,.tna-global-header__top-navigation-link:focus-visible{color:var(--font-base, #343338);text-decoration:underline;text-decoration-thickness:3.5px}.tna-global-header__top-navigation-link svg{height:1em;display:inline-block}.tna-global-header__top-navigation-link svg path{fill:currentColor}@media(min-width: 48.0625em)and (max-width: 64em){.tna-global-header__navigation{column-gap:16px}.tna-global-header__navigation-item-link{font-size:1rem}.tna-global-header--collapse-on-medium .tna-global-header__navigation-wrapper{width:100%}.tna-global-header--collapse-on-medium .tna-global-header__top-navigation-wrapper{flex:1;order:2}.tna-global-header--collapse-on-medium .tna-global-header__main{padding-bottom:16px}.tna-global-header--collapse-on-medium .tna-global-header__logo{gap:12px}.tna-global-header--collapse-on-medium .tna-global-header__logo-wrapper{margin-top:8px;margin-bottom:8px}.tna-global-header--collapse-on-medium .tna-logo{width:5rem;height:5rem}.tna-global-header--collapse-on-medium .tna-global-header__logo-strapline{line-height:1.6666666667rem}.tna-global-header--collapse-on-medium .tna-global-header__navigation{margin-bottom:8px}.tna-global-header--collapse-on-medium .tna-global-header__navigation,.tna-global-header--collapse-on-medium .tna-global-header__navigation-item,.tna-global-header--collapse-on-medium .tna-global-header__navigation-item-link{height:auto}}@media(max-width: 48em){.tna-global-header__main{padding-bottom:0}.tna-global-header__logo-wrapper,.tna-global-header__navigation-button-wrapper{margin-top:0;margin-bottom:16px}.tna-global-header__logo{gap:12px}.tna-global-header__navigation-button-wrapper{display:flex;align-items:center}.tna-global-header__navigation,.tna-global-header__navigation-item,.tna-global-header__navigation-item-link{height:auto}.tna-global-header__navigation{margin-top:0;columns:1;background-color:rgba(255,255,255,.1);border-top:2px var(--keyline-dark, #26262a) solid;border-bottom:2px var(--keyline-dark, #26262a) solid}.tna-global-header__navigation-item{flex-direction:column;align-items:flex-start}.tna-global-header__navigation-item-link{line-height:1.75rem;font-weight:600}.tna-global-header__navigation-item:last-child .tna-global-header__navigation-item-link{border-bottom:none}.tna-global-header__navigation-item-contents{display:block}.tna-global-header__navigation-item-children{margin-bottom:16px;margin-left:24px}.tna-global-header__top-navigation{padding-top:8px;padding-bottom:8px;justify-content:flex-start;gap:24px}.tna-global-header__top-navigation-link{padding:4px 0}}@media(min-width: 30.0625em)and (max-width: 48em){.tna-global-header .tna-logo{width:4rem;height:4rem}.tna-global-header__logo-strapline{line-height:1.25rem}.tna-global-header__navigation{width:calc(100% + 64px);left:-32px}.tna-global-header__navigation-item-link{padding:8px 32px}}@media(max-width: 30em){.tna-global-header .tna-logo{width:3.5rem;height:3.5rem}.tna-global-header__logo-strapline{line-height:1}.tna-global-header__navigation-button{font-size:0.875rem}.tna-global-header__navigation{width:calc(100% + 32px);left:-16px}.tna-global-header__navigation-item-link{padding:8px 16px}}@media(forced-colors: active){.tna-global-header{border-bottom:1px var(--keyline, rgb(38 38 42/0.25)) solid}}@media(prefers-contrast: more){.tna-global-header{border-bottom:1px var(--keyline, rgb(38 38 42/0.25)) solid}}@media(forced-colors: active){.tna-global-header__navigation-button{height:auto;line-height:2;font-size:1.125rem;font-weight:700;border:none}.tna-global-header__hamburger{display:none}}/# sourceMappingURL=global-header.css.map /

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

	@@ -1 +1 @@
1	- {"version":3,"sourceRoot":"","sources":["../../../../src/nationalarchives/tools/_colour.scss","../../../../src/nationalarchives/components/global-header/global-header.scss","../../../../src/nationalarchives/tools/_typography.scss","../../../../src/nationalarchives/variables/_typography.scss","../../../../src/nationalarchives/tools/_media.scss"],"names":[],"mappings":"AAqMA,mBACE,yCACA,uCACA,uCACA,yCACA,yCACA,6BACA,6CACA,mCACA,6CACA,2CACA,uDACA,uDACA,mEACA,2CA5JA,4CAJA,gCC5CF,mBACE,iBAGA,wEDwCA,gCChCA,6CACE,mBAIA,mCADF,+CAEI,oBAIJ,yBACE,oBAGF,iCACE,eAEA,aAGF,yBACE,aACA,qBACA,SAEA,qBAGE,0GDIJ,gCCEI,qCACE,qBD2CJ,sDCxCI,mBAKN,6BACE,cACA,eAEA,cAGF,mCACE,mBAEA,oBACA,yBClCF,YCcA,gDDbA,YCgBoB,IDlDpB,kBDyEA,8CACE,aAGF,8BACE,WACA,cAEA,qBDhCF,gDCoCE,2EAEE,WAEA,WACA,cAEA,cAEA,kBACA,QAEA,yBAGF,sCACE,MAGF,qCACE,SAIJ,sCACE,YACA,UAEA,gBACA,aACA,mBACA,WAEA,kBAEA,cAEA,gBAEA,6BACA,sBAEA,eC9GF,YCYsB,ID7BtB,eDmIE,4CC3EF,0BACA,0BCpCsC,MFmHlC,4EACE,SAEA,oFACE,YAEA,0BAGF,mFACE,eAEA,yBASR,+BACE,YACA,eAEA,kBAEA,UACA,gBAEA,gBAGF,oCACE,mBAGF,yCACE,gBACA,eAEA,cACA,sBAEA,oBACA,qBCrLF,oBFiEI,4DC0HF,wID9IF,gCCoJE,+CCzIF,0BACA,0BCpCsC,MFiLtC,mCACE,gBAEA,aACA,yBACA,SC3MF,oBD8ME,gBAMF,wCACE,aACA,mBACA,QAEA,qBAEA,qID9KF,yCCoLE,8CDpLF,gCEWA,0BACA,0BCpCsC,MFiNpC,4CACE,WAEA,qBAEA,iDACE,kBGpMN,kDH0ME,+BACE,gBAGF,yCCtPF,eD0PE,8EACE,WAGF,kFACE,OACA,QAGF,gEACE,oBAGF,gEACE,SAGF,wEACE,eACA,kBAGF,iDACE,WACA,YAGF,0EACE,4BAGF,sEACE,kBAGF,iOAGE,aGpNJ,wBHyNE,yBACE,iBAGF,+EAEE,aACA,mBAGF,yBACE,SAGF,8CACE,aACA,mBAGF,4GAGE,YAGF,+BACE,aAEA,UAEA,sCDlQA,uGCwQF,oCACE,sBACA,uBAGF,yCACE,oBClUJ,YCewB,IFuTtB,wFACE,mBAGF,6CACE,cAGF,6CACE,mBACA,iBAGF,mCACE,gBACA,mBAEA,2BAEA,SAGF,wCACE,eG5TJ,kDHiUE,6BACE,WACA,YAGF,mCACE,oBAGF,+BACE,wBAEA,WAGF,yCACE,kBG3UJ,wBHgVE,6BACE,aACA,cAGF,mCACE,cAGF,sCC7YF,mBDiZE,+BACE,wBAEA,WAGF,yCACE,kBDyDJ,8BChdF,mBDgEM,4DA0YJ,+BC1cF,mBDgEM,4DAgZJ,8BChDE,sCACE,YAEA,cCpaJ,mBAiBA,YCYsB,IF2YlB,YAGF,8BACE","file":"global-header.css","sourcesContent":["@use \"sass:list\";\n@use \"sass:map\";\n@use \"../variables/borders\";\n@use \"../variables/colour\";\n@use \"../variables/features\";\n@use \"../tools/media\";\n\n@function brand-colour($colour, $opacity: 1) {\n @return colour.brand-colour($colour, $opacity);\n}\n\n@mixin colour-css-vars($excludes...) {\n @each $name, $value in colour.$colour-palette-default {\n @if not list.index($excludes, $name) {\n --#{$name}: #{$value};\n }\n }\n}\n\n@mixin colour-css-vars-dark($excludes...) {\n @each $name, $value in colour.$colour-palette-dark {\n @if not list.index($excludes, $name) {\n --#{$name}: #{$value};\n }\n }\n}\n\n@mixin colour-css-vars-high-contrast($excludes...) {\n @each $name, $value in colour.$colour-palette-high-contrast {\n @if not list.index($excludes, $name) {\n --#{$name}: #{$value};\n }\n }\n}\n\n@mixin colour-css-vars-high-contrast-dark($excludes...) {\n @each $name, $value in colour.$colour-palette-high-contrast-dark {\n @if not list.index($excludes, $name) {\n --#{$name}: #{$value};\n }\n }\n}\n\n@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($important, !important, null);\n}\n\n@mixin colour-background($colour, $important: false) {\n background-color: colour-var($colour) if($important, !important, null);\n}\n\n@mixin colour-background-brand($brandColour, $important: false) {\n background-color: #{brand-colour($brandColour)} if($important, !important, null);\n}\n\n@mixin colour-border(\n $colour,\n $width: \"\",\n $style: solid,\n $direction: \"\",\n $important: false\n) {\n @if $direction != \"\" {\n @if $width != \"\" {\n border-#{$direction}: $width\n colour-var($colour)\n $style\n if($important, !important, null);\n } @else {\n border-#{$direction}-color: colour-var($colour)\n if($important, !important, null);\n }\n } @else {\n @if $width != \"\" {\n border: $width\n colour-var($colour)\n $style\n if($important, !important, null);\n } @else {\n border-color: var(\n --#{$colour},\n #{map.get(colour.$colour-palette-default, $colour)}\n )\n if($important, !important, null);\n }\n }\n}\n\n@mixin colour-outline($colour, $width: \"\", $style: solid, $important: false) {\n @if $width != \"\" {\n outline: $width colour-var($colour) $style if($important, !important, null);\n } @else {\n outline-color: colour-var($colour) if($important, !important, null);\n }\n}\n\n@mixin colour-fill($colour, $important: false) {\n fill: colour-var($colour) if($important, !important, null);\n}\n\n@mixin thick-keyline($direction: \"\") {\n @if $direction != \"\" {\n @include colour-border(\n \"keyline\",\n borders.$thick-border-width,\n solid,\n $direction\n );\n } @else {\n @include colour-border(\"keyline\", borders.$thick-border-width, solid);\n }\n}\n\n@mixin thick-keyline-dark($direction: \"\") {\n @if $direction != \"\" {\n @include colour-border(\n \"keyline-dark\",\n borders.$thick-border-width,\n solid,\n $direction\n );\n } @else {\n @include colour-border(\"keyline-dark\", borders.$thick-border-width, solid);\n }\n}\n\n@mixin thick-keyline-accent($direction: \"\") {\n @if $direction != \"\" {\n @include colour-border(\n \"accent-border\",\n borders.$thick-border-width,\n solid,\n $direction\n );\n } @else {\n @include colour-border(\"accent-border\", borders.$thick-border-width, solid);\n }\n}\n\n@mixin thick-keyline-error($direction: \"\") {\n @if $direction != \"\" {\n @include colour-border(\n \"form-error-border\",\n borders.$thick-border-width,\n solid,\n $direction\n );\n } @else {\n @include colour-border(\n \"form-error-border\",\n borders.$thick-border-width,\n solid\n );\n }\n}\n\n@mixin thick-keyline-brand($direction: \"\", $brandColour) {\n @if $direction != \"\" {\n border-#{$direction}: borders.$thick-border-width\n #{brand-colour($brandColour)}\n solid;\n } @else {\n border: borders.$thick-border-width #{brand-colour($brandColour)} solid;\n }\n}\n\n@mixin thick-keyline-transparent($direction: \"\") {\n @if $direction != \"\" {\n border-#{$direction}: borders.$thick-border-width transparent solid;\n } @else {\n border: borders.$thick-border-width transparent solid;\n }\n}\n\n// Use light theme colours (except for \"form-error-border\")\n%always-light {\n @include colour-css-vars(\"form-error-border\", \"focus-outline\");\n\n @media (prefers-contrast: more) {\n @include colour-css-vars-high-contrast(\n \"form-error-border\",\n \"focus-outline\"\n );\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-list-marker: var(--accent-border);\n // --accent-list-marker: var(--font-base);\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-list-marker: var(--accent-border);\n // --accent-list-marker: var(--font-base);\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%tint {\n --background: var(--background-tint);\n\n @include colour-background(\"background\");\n\n // @include colour-font(\"font-base\");\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-list-marker: var(--accent-font-base);\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-list-marker: var(--font-base);\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-list-marker: var(--accent-font-base);\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-list-marker: var(--accent-font-base);\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-list-marker: #{colour.brand-colour(\"brown\")} !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.45)} !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(\"white\")} !important;\n --button-accented-background: #{colour.brand-colour(\"brown\")} !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.45)} !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-list-marker: #{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(\"pink\")} !important;\n --accent-list-marker: #{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(\"orange\")} !important;\n --accent-list-marker: #{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(\"green\")} !important;\n --accent-list-marker: #{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(\"blue\")} !important;\n --accent-list-marker: #{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@mixin image-loader-background {\n @if not features.$disable-image-loader-animations {\n background: linear-gradient(\n -45deg,\n rgba(0 0 0 / 25%),\n rgba(255 255 255 / 25%),\n rgba(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}\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-global-header {\n padding-top: spacing.space(1);\n\n @include colour.contrast;\n background: linear-gradient(\n 0deg,\n rgb(34 34 34 / 100%) 0%,\n rgb(0 0 0 / 100%) 100%\n );\n\n @include colour.colour-font(\"font-base\");\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 &__main {\n padding-bottom: spacing.space(1.5);\n }\n\n &__logo-wrapper {\n margin-top: spacing.space(0.5);\n\n display: flex;\n }\n\n &__logo {\n display: flex;\n align-items: flex-end;\n gap: spacing.space(1);\n\n text-decoration: none;\n\n &--link {\n &,\n &:link,\n &:visited {\n @include colour.colour-font(\"font-base\");\n }\n\n &:hover {\n text-decoration: none;\n\n @include colour.colour-outline(\"font-dark\", 0.3125rem, solid);\n outline-offset: 1px;\n }\n }\n }\n\n .tna-logo {\n width: 6.75rem;\n height: 6.75rem;\n\n flex-shrink: 0;\n }\n\n &__logo-strapline {\n padding-right: spacing.space(0.625);\n\n line-height: math.div(6.75rem, 3);\n text-transform: uppercase;\n\n @include typography.heading-font;\n @include typography.font-size(20);\n }\n\n &__navigation-button-wrapper {\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 display: flex;\n align-items: center;\n gap: 0.75rem;\n\n position: relative;\n\n color: inherit;\n\n background: none;\n\n border: 0 transparent solid;\n border-width: 0.25rem 0;\n\n cursor: pointer;\n @include typography.main-font-weight-bold;\n @include typography.font-size(16);\n\n &:hover {\n @include typography.interacted-text-decoration;\n }\n\n &--opened {\n .tna-global-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-wrapper {\n }\n\n &__navigation {\n height: 100%;\n margin: spacing.space(0.5) 0 0;\n\n position: relative;\n\n columns: 2;\n column-gap: spacing.space(2);\n\n list-style: none;\n }\n\n &__navigation-item {\n break-inside: avoid;\n }\n\n &__navigation-item-link {\n min-width: 15rem;\n height: math.div(6.75rem, 3);\n\n display: block;\n box-sizing: border-box;\n\n line-height: math.div(6.75rem, 3);\n text-decoration: none;\n\n @include typography.font-size(17);\n\n @include colour.colour-border(\"keyline\", 0.5px, solid, bottom);\n\n &,\n &:link,\n &:visited {\n @include colour.colour-font(\"font-base\");\n }\n\n &:hover {\n @include typography.interacted-text-decoration;\n }\n }\n\n &__top-navigation {\n padding: 0 0 spacing.space(0.5);\n\n display: flex;\n justify-content: flex-end;\n gap: spacing.space(1.5);\n\n @include typography.font-size(15);\n list-style: none;\n }\n\n &__top-navigation-item {\n }\n\n &__top-navigation-link {\n display: flex;\n align-items: center;\n gap: spacing.space(0.5);\n\n text-decoration: none;\n\n &,\n &:link,\n &:visited {\n @include colour.colour-font(\"font-light\");\n }\n\n &:hover {\n @include colour.colour-font(\"font-base\");\n @include typography.interacted-text-decoration;\n }\n\n svg {\n height: 1em;\n\n display: inline-block;\n\n path {\n fill: currentColor;\n }\n }\n }\n\n @include media.on-medium {\n &__navigation {\n column-gap: spacing.space(1);\n }\n\n &__navigation-item-link {\n @include typography.font-size(16);\n }\n\n &--collapse-on-medium &__navigation-wrapper {\n width: 100%;\n }\n\n &--collapse-on-medium &__top-navigation-wrapper {\n flex: 1;\n order: 2;\n }\n\n &--collapse-on-medium &__main {\n padding-bottom: spacing.space(1);\n }\n\n &--collapse-on-medium &__logo {\n gap: spacing.space(0.75);\n }\n\n &--collapse-on-medium &__logo-wrapper {\n margin-top: spacing.space(0.5);\n margin-bottom: spacing.space(0.5);\n }\n\n &--collapse-on-medium .tna-logo {\n width: 5rem;\n height: 5rem;\n }\n\n &--collapse-on-medium &__logo-strapline {\n line-height: math.div(5rem, 3);\n }\n\n &--collapse-on-medium &__navigation {\n margin-bottom: spacing.space(0.5);\n }\n\n &--collapse-on-medium &__navigation,\n &--collapse-on-medium &__navigation-item,\n &--collapse-on-medium &__navigation-item-link {\n height: auto;\n }\n }\n\n @include media.on-mobile {\n &__main {\n padding-bottom: 0;\n }\n\n &__logo-wrapper,\n &__navigation-button-wrapper {\n margin-top: 0;\n margin-bottom: spacing.space(1);\n }\n\n &__logo {\n gap: spacing.space(0.75);\n }\n\n &__navigation-button-wrapper {\n display: flex;\n align-items: center;\n }\n\n &__navigation,\n &__navigation-item,\n &__navigation-item-link {\n height: auto;\n }\n\n &__navigation {\n margin-top: 0;\n\n columns: 1;\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 flex-direction: column;\n align-items: flex-start;\n }\n\n &__navigation-item-link {\n line-height: 1.75rem;\n @include typography.main-font-weight-medium;\n }\n\n &__navigation-item:last-child &__navigation-item-link {\n border-bottom: none;\n }\n\n &__navigation-item-contents {\n display: block;\n }\n\n &__navigation-item-children {\n margin-bottom: spacing.space(1);\n margin-left: spacing.space(1.5);\n }\n\n &__top-navigation {\n padding-top: spacing.space(0.5);\n padding-bottom: spacing.space(0.5);\n\n justify-content: flex-start;\n\n gap: spacing.space(1.5);\n }\n\n &__top-navigation-link {\n padding: spacing.space(0.25) 0;\n }\n }\n\n @include media.on-small {\n .tna-logo {\n width: 4rem;\n height: 4rem;\n }\n\n &__logo-strapline {\n line-height: 1.25rem;\n }\n\n &__navigation {\n width: calc(100% + #{grid.gutter-width-double()});\n\n left: -#{grid.gutter-width()};\n }\n\n &__navigation-item-link {\n padding: spacing.space(0.5) grid.gutter-width();\n }\n }\n\n @include media.on-tiny {\n .tna-logo {\n width: 3.5rem;\n height: 3.5rem;\n }\n\n &__logo-strapline {\n line-height: 1;\n }\n\n &__navigation-button {\n @include typography.font-size(14);\n }\n\n &__navigation {\n width: calc(100% + #{grid.gutter-width-tiny-double()});\n\n left: -#{grid.gutter-width-tiny()};\n }\n\n &__navigation-item-link {\n padding: spacing.space(0.5) grid.gutter-width-tiny();\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-style: normal;\n font-optical-sizing: auto;\n font-variation-settings: \"wdth\" 100;\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 interacted-text-decoration {\n text-decoration: underline;\n text-decoration-thickness: typography.$interactive-text-decoration-thickness;\n}\n\n@mixin heading-generator(\n $font-size-default,\n $font-size-medium,\n $font-size-small,\n $font-size-tiny,\n $line-height\n) {\n $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","/\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: 18 !default;\n$body-font-size-px-mobile: 17 !default;\n$body-line-height: 1.75 !default;\n\n$interactive-text-decoration-thickness: 3.5px !default;\n\n$main-font-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: 30 !default;\n$heading-l-font-size-small: 28 !default;\n$heading-l-font-size-tiny: 25 !default;\n$heading-l-line-height: 1.3 !default;\n\n$heading-m-font-size-default: 22 !default;\n$heading-m-font-size-medium: 21 !default;\n$heading-m-font-size-small: 20 !default;\n$heading-m-font-size-tiny: 19 !default;\n$heading-m-line-height: 1.6 !default;\n\n$heading-s-font-size-default: 18 !default;\n$heading-s-font-size-medium: $heading-s-font-size-default !default;\n$heading-s-font-size-small: $heading-s-font-size-default !default;\n$heading-s-font-size-tiny: $heading-s-font-size-default !default;\n$heading-s-line-height: 1.6 !default;\n","@use \"sass:math\";\n@use \"../variables/media\";\n@use \"../variables/typography\";\n\n$smallest-large-device-em: #{math.div(\n media.$largest-medium-device-px + 1,\n typography.$relative-1rem-px\n )}em;\n$largest-medium-device-em: #{math.div(\n media.$largest-medium-device-px,\n typography.$relative-1rem-px\n )}em;\n$smallest-medium-device-em: #{math.div(\n media.$largest-small-device-px + 1,\n typography.$relative-1rem-px\n )}em;\n$largest-small-device-em: #{math.div(\n media.$largest-small-device-px,\n typography.$relative-1rem-px\n )}em;\n$smallest-small-device-em: #{math.div(\n media.$largest-tiny-device-px + 1,\n typography.$relative-1rem-px\n )}em;\n$largest-tiny-device-em: #{math.div(\n media.$largest-tiny-device-px,\n typography.$relative-1rem-px\n )}em;\n\n$media-large: \"(min-width: #{$smallest-large-device-em})\";\n$media-lt-large: \"(max-width: #{$largest-medium-device-em})\";\n$media-medium: \"(min-width: #{$smallest-medium-device-em}) and (max-width: #{$largest-medium-device-em})\";\n$media-gt-mobile: \"(min-width: #{$smallest-medium-device-em})\";\n$media-mobile: \"(max-width: #{$largest-small-device-em})\";\n$media-small: \"(min-width: #{$smallest-small-device-em}) and (max-width: #{$largest-small-device-em})\";\n$media-gt-tiny: \"(min-width: #{$smallest-small-device-em})\";\n$media-tiny: \"(max-width: #{$largest-tiny-device-em})\";\n\n// https://nationalarchives.github.io/design-system/styles/media/#media-queries\n@mixin on-large() {\n @media #{$media-large} {\n @content;\n }\n}\n\n@mixin on-medium() {\n @media #{$media-medium} {\n @content;\n }\n}\n\n@mixin on-small() {\n @media #{$media-small} {\n @content;\n }\n}\n\n@mixin on-tiny() {\n @media #{$media-tiny} {\n @content;\n }\n}\n\n@mixin on-larger-than-mobile() {\n @media #{$media-gt-mobile} {\n @content;\n }\n}\n\n@mixin on-larger-than-tiny() {\n @media #{$media-gt-tiny} {\n @content;\n }\n}\n\n@mixin on-smaller-than-large() {\n @media #{$media-lt-large} {\n @content;\n }\n}\n\n@mixin on-mobile() {\n @media #{$media-mobile} {\n @content;\n }\n}\n\n@mixin on-print() {\n @media print {\n @content;\n }\n}\n"]}
1	+ {"version":3,"sourceRoot":"","sources":["../../../../src/nationalarchives/tools/_colour.scss","../../../../src/nationalarchives/components/global-header/global-header.scss","../../../../src/nationalarchives/tools/_typography.scss","../../../../src/nationalarchives/variables/_typography.scss","../../../../src/nationalarchives/tools/_media.scss"],"names":[],"mappings":"AAqMA,mBACE,yCACA,uCACA,uCACA,yCACA,yCACA,6BACA,6CACA,mCACA,6CACA,2CACA,uDACA,uDACA,mEACA,2CA5JA,4CAJA,gCC5CF,mBACE,iBAGA,wEDwCA,gCChCA,6CACE,mBAIA,mCADF,+CAEI,oBAIJ,yBACE,oBAGF,iCACE,eAEA,aAGF,yBACE,aACA,qBACA,SAEA,qBAGE,0GDIJ,gCCEI,kFAEE,qBD0CJ,sDCvCI,mBAKN,6BACE,cACA,eAEA,cAGF,mCACE,mBAEA,oBACA,yBCnCF,YCcA,gDDbA,YCgBoB,IDlDpB,kBD0EA,8CACE,aAGF,8BACE,WACA,cAEA,qBDjCF,gDCqCE,2EAEE,WAEA,WACA,cAEA,cAEA,kBACA,QAEA,yBAGF,sCACE,MAGF,qCACE,SAIJ,sCACE,YACA,UAEA,gBACA,aACA,mBACA,WAEA,kBAEA,cAEA,gBAEA,6BACA,sBAEA,eC/GF,YCYsB,ID7BtB,eDoIE,gGC5EF,0BACA,0BCpCsC,MFqHlC,4EACE,SAEA,oFACE,YAEA,0BAGF,mFACE,eAEA,yBASR,+BACE,YACA,eAEA,kBAEA,UACA,gBAEA,gBAGF,oCACE,mBAGF,yCACE,gBACA,eAEA,cACA,sBAEA,oBACA,qBCvLF,oBFiEI,4DC4HF,wIDhJF,gCCsJE,sGC3IF,0BACA,0BCpCsC,MFoLtC,mCACE,gBAEA,aACA,yBACA,SC9MF,oBDiNE,gBAMF,wCACE,aACA,mBACA,QAEA,qBAEA,qIDjLF,yCCuLE,oGDvLF,gCEWA,0BACA,0BCpCsC,MFqNpC,4CACE,WAEA,qBAEA,iDACE,kBGxMN,kDH8ME,+BACE,gBAGF,yCC1PF,eD8PE,8EACE,WAGF,kFACE,OACA,QAGF,gEACE,oBAGF,gEACE,SAGF,wEACE,eACA,kBAGF,iDACE,WACA,YAGF,0EACE,4BAGF,sEACE,kBAGF,iOAGE,aGxNJ,wBH6NE,yBACE,iBAGF,+EAEE,aACA,mBAGF,yBACE,SAGF,8CACE,aACA,mBAGF,4GAGE,YAGF,+BACE,aAEA,UAEA,sCDtQA,uGC4QF,oCACE,sBACA,uBAGF,yCACE,oBCtUJ,YCewB,IF2TtB,wFACE,mBAGF,6CACE,cAGF,6CACE,mBACA,iBAGF,mCACE,gBACA,mBAEA,2BAEA,SAGF,wCACE,eGhUJ,kDHqUE,6BACE,WACA,YAGF,mCACE,oBAGF,+BACE,wBAEA,WAGF,yCACE,kBG/UJ,wBHoVE,6BACE,aACA,cAGF,mCACE,cAGF,sCCjZF,mBDqZE,+BACE,wBAEA,WAGF,yCACE,kBDqDJ,8BChdF,mBDgEM,4DA0YJ,+BC1cF,mBDgEM,4DAgZJ,8BC5CE,sCACE,YAEA,cCxaJ,mBAiBA,YCYsB,IF+YlB,YAGF,8BACE","file":"global-header.css","sourcesContent":["@use \"sass:list\";\n@use \"sass:map\";\n@use \"../variables/borders\";\n@use \"../variables/colour\";\n@use \"../variables/features\";\n@use \"../tools/media\";\n\n@function brand-colour($colour, $opacity: 1) {\n @return colour.brand-colour($colour, $opacity);\n}\n\n@mixin colour-css-vars($excludes...) {\n @each $name, $value in colour.$colour-palette-default {\n @if not list.index($excludes, $name) {\n --#{$name}: #{$value};\n }\n }\n}\n\n@mixin colour-css-vars-dark($excludes...) {\n @each $name, $value in colour.$colour-palette-dark {\n @if not list.index($excludes, $name) {\n --#{$name}: #{$value};\n }\n }\n}\n\n@mixin colour-css-vars-high-contrast($excludes...) {\n @each $name, $value in colour.$colour-palette-high-contrast {\n @if not list.index($excludes, $name) {\n --#{$name}: #{$value};\n }\n }\n}\n\n@mixin colour-css-vars-high-contrast-dark($excludes...) {\n @each $name, $value in colour.$colour-palette-high-contrast-dark {\n @if not list.index($excludes, $name) {\n --#{$name}: #{$value};\n }\n }\n}\n\n@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($important, !important, null);\n}\n\n@mixin colour-background($colour, $important: false) {\n background-color: colour-var($colour) if($important, !important, null);\n}\n\n@mixin colour-background-brand($brandColour, $important: false) {\n background-color: #{brand-colour($brandColour)} if($important, !important, null);\n}\n\n@mixin colour-border(\n $colour,\n $width: \"\",\n $style: solid,\n $direction: \"\",\n $important: false\n) {\n @if $direction != \"\" {\n @if $width != \"\" {\n border-#{$direction}: $width\n colour-var($colour)\n $style\n if($important, !important, null);\n } @else {\n border-#{$direction}-color: colour-var($colour)\n if($important, !important, null);\n }\n } @else {\n @if $width != \"\" {\n border: $width\n colour-var($colour)\n $style\n if($important, !important, null);\n } @else {\n border-color: var(\n --#{$colour},\n #{map.get(colour.$colour-palette-default, $colour)}\n )\n if($important, !important, null);\n }\n }\n}\n\n@mixin colour-outline($colour, $width: \"\", $style: solid, $important: false) {\n @if $width != \"\" {\n outline: $width colour-var($colour) $style if($important, !important, null);\n } @else {\n outline-color: colour-var($colour) if($important, !important, null);\n }\n}\n\n@mixin colour-fill($colour, $important: false) {\n fill: colour-var($colour) if($important, !important, null);\n}\n\n@mixin thick-keyline($direction: \"\") {\n @if $direction != \"\" {\n @include colour-border(\n \"keyline\",\n borders.$thick-border-width,\n solid,\n $direction\n );\n } @else {\n @include colour-border(\"keyline\", borders.$thick-border-width, solid);\n }\n}\n\n@mixin thick-keyline-dark($direction: \"\") {\n @if $direction != \"\" {\n @include colour-border(\n \"keyline-dark\",\n borders.$thick-border-width,\n solid,\n $direction\n );\n } @else {\n @include colour-border(\"keyline-dark\", borders.$thick-border-width, solid);\n }\n}\n\n@mixin thick-keyline-accent($direction: \"\") {\n @if $direction != \"\" {\n @include colour-border(\n \"accent-border\",\n borders.$thick-border-width,\n solid,\n $direction\n );\n } @else {\n @include colour-border(\"accent-border\", borders.$thick-border-width, solid);\n }\n}\n\n@mixin thick-keyline-error($direction: \"\") {\n @if $direction != \"\" {\n @include colour-border(\n \"form-error-border\",\n borders.$thick-border-width,\n solid,\n $direction\n );\n } @else {\n @include colour-border(\n \"form-error-border\",\n borders.$thick-border-width,\n solid\n );\n }\n}\n\n@mixin thick-keyline-brand($direction: \"\", $brandColour) {\n @if $direction != \"\" {\n border-#{$direction}: borders.$thick-border-width\n #{brand-colour($brandColour)}\n solid;\n } @else {\n border: borders.$thick-border-width #{brand-colour($brandColour)} solid;\n }\n}\n\n@mixin thick-keyline-transparent($direction: \"\") {\n @if $direction != \"\" {\n border-#{$direction}: borders.$thick-border-width transparent solid;\n } @else {\n border: borders.$thick-border-width transparent solid;\n }\n}\n\n// Use light theme colours (except for \"form-error-border\")\n%always-light {\n @include colour-css-vars(\"form-error-border\", \"focus-outline\");\n\n @media (prefers-contrast: more) {\n @include colour-css-vars-high-contrast(\n \"form-error-border\",\n \"focus-outline\"\n );\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-list-marker: var(--accent-border);\n // --accent-list-marker: var(--font-base);\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-list-marker: var(--accent-border);\n // --accent-list-marker: var(--font-base);\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%tint {\n --background: var(--background-tint);\n\n @include colour-background(\"background\");\n\n // @include colour-font(\"font-base\");\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-list-marker: var(--accent-font-base);\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-list-marker: var(--font-base);\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-list-marker: var(--accent-font-base);\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-list-marker: var(--accent-font-base);\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-list-marker: #{colour.brand-colour(\"brown\")} !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.45)} !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(\"white\")} !important;\n --button-accented-background: #{colour.brand-colour(\"brown\")} !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.45)} !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-list-marker: #{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(\"pink\")} !important;\n --accent-list-marker: #{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(\"orange\")} !important;\n --accent-list-marker: #{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(\"green\")} !important;\n --accent-list-marker: #{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(\"blue\")} !important;\n --accent-list-marker: #{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@mixin image-loader-background {\n @if not features.$disable-image-loader-animations {\n background: linear-gradient(\n -45deg,\n rgba(0 0 0 / 25%),\n rgba(255 255 255 / 25%),\n rgba(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}\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-global-header {\n padding-top: spacing.space(1);\n\n @include colour.contrast;\n background: linear-gradient(\n 0deg,\n rgb(34 34 34 / 100%) 0%,\n rgb(0 0 0 / 100%) 100%\n );\n\n @include colour.colour-font(\"font-base\");\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 &__main {\n padding-bottom: spacing.space(1.5);\n }\n\n &__logo-wrapper {\n margin-top: spacing.space(0.5);\n\n display: flex;\n }\n\n &__logo {\n display: flex;\n align-items: flex-end;\n gap: spacing.space(1);\n\n text-decoration: none;\n\n &--link {\n &,\n &:link,\n &:visited {\n @include colour.colour-font(\"font-base\");\n }\n\n &:hover,\n &:focus-visible {\n text-decoration: none;\n\n @include colour.colour-outline(\"font-dark\", 0.3125rem, solid);\n outline-offset: 1px;\n }\n }\n }\n\n .tna-logo {\n width: 6.75rem;\n height: 6.75rem;\n\n flex-shrink: 0;\n }\n\n &__logo-strapline {\n padding-right: spacing.space(0.625);\n\n line-height: math.div(6.75rem, 3);\n text-transform: uppercase;\n\n @include typography.heading-font;\n @include typography.font-size(20);\n }\n\n &__navigation-button-wrapper {\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 display: flex;\n align-items: center;\n gap: 0.75rem;\n\n position: relative;\n\n color: inherit;\n\n background: none;\n\n border: 0 transparent solid;\n border-width: 0.25rem 0;\n\n cursor: pointer;\n @include typography.main-font-weight-bold;\n @include typography.font-size(16);\n\n &:hover,\n &:focus-visible {\n @include typography.interacted-text-decoration;\n }\n\n &--opened {\n .tna-global-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-wrapper {\n }\n\n &__navigation {\n height: 100%;\n margin: spacing.space(0.5) 0 0;\n\n position: relative;\n\n columns: 2;\n column-gap: spacing.space(2);\n\n list-style: none;\n }\n\n &__navigation-item {\n break-inside: avoid;\n }\n\n &__navigation-item-link {\n min-width: 15rem;\n height: math.div(6.75rem, 3);\n\n display: block;\n box-sizing: border-box;\n\n line-height: math.div(6.75rem, 3);\n text-decoration: none;\n\n @include typography.font-size(17);\n\n @include colour.colour-border(\"keyline\", 0.5px, solid, bottom);\n\n &,\n &:link,\n &:visited {\n @include colour.colour-font(\"font-base\");\n }\n\n &:hover,\n &:focus-visible {\n @include typography.interacted-text-decoration;\n }\n }\n\n &__top-navigation {\n padding: 0 0 spacing.space(0.5);\n\n display: flex;\n justify-content: flex-end;\n gap: spacing.space(1.5);\n\n @include typography.font-size(15);\n list-style: none;\n }\n\n &__top-navigation-item {\n }\n\n &__top-navigation-link {\n display: flex;\n align-items: center;\n gap: spacing.space(0.5);\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 @include colour.colour-font(\"font-base\");\n @include typography.interacted-text-decoration;\n }\n\n svg {\n height: 1em;\n\n display: inline-block;\n\n path {\n fill: currentColor;\n }\n }\n }\n\n @include media.on-medium {\n &__navigation {\n column-gap: spacing.space(1);\n }\n\n &__navigation-item-link {\n @include typography.font-size(16);\n }\n\n &--collapse-on-medium &__navigation-wrapper {\n width: 100%;\n }\n\n &--collapse-on-medium &__top-navigation-wrapper {\n flex: 1;\n order: 2;\n }\n\n &--collapse-on-medium &__main {\n padding-bottom: spacing.space(1);\n }\n\n &--collapse-on-medium &__logo {\n gap: spacing.space(0.75);\n }\n\n &--collapse-on-medium &__logo-wrapper {\n margin-top: spacing.space(0.5);\n margin-bottom: spacing.space(0.5);\n }\n\n &--collapse-on-medium .tna-logo {\n width: 5rem;\n height: 5rem;\n }\n\n &--collapse-on-medium &__logo-strapline {\n line-height: math.div(5rem, 3);\n }\n\n &--collapse-on-medium &__navigation {\n margin-bottom: spacing.space(0.5);\n }\n\n &--collapse-on-medium &__navigation,\n &--collapse-on-medium &__navigation-item,\n &--collapse-on-medium &__navigation-item-link {\n height: auto;\n }\n }\n\n @include media.on-mobile {\n &__main {\n padding-bottom: 0;\n }\n\n &__logo-wrapper,\n &__navigation-button-wrapper {\n margin-top: 0;\n margin-bottom: spacing.space(1);\n }\n\n &__logo {\n gap: spacing.space(0.75);\n }\n\n &__navigation-button-wrapper {\n display: flex;\n align-items: center;\n }\n\n &__navigation,\n &__navigation-item,\n &__navigation-item-link {\n height: auto;\n }\n\n &__navigation {\n margin-top: 0;\n\n columns: 1;\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 flex-direction: column;\n align-items: flex-start;\n }\n\n &__navigation-item-link {\n line-height: 1.75rem;\n @include typography.main-font-weight-medium;\n }\n\n &__navigation-item:last-child &__navigation-item-link {\n border-bottom: none;\n }\n\n &__navigation-item-contents {\n display: block;\n }\n\n &__navigation-item-children {\n margin-bottom: spacing.space(1);\n margin-left: spacing.space(1.5);\n }\n\n &__top-navigation {\n padding-top: spacing.space(0.5);\n padding-bottom: spacing.space(0.5);\n\n justify-content: flex-start;\n\n gap: spacing.space(1.5);\n }\n\n &__top-navigation-link {\n padding: spacing.space(0.25) 0;\n }\n }\n\n @include media.on-small {\n .tna-logo {\n width: 4rem;\n height: 4rem;\n }\n\n &__logo-strapline {\n line-height: 1.25rem;\n }\n\n &__navigation {\n width: calc(100% + #{grid.gutter-width-double()});\n\n left: -#{grid.gutter-width()};\n }\n\n &__navigation-item-link {\n padding: spacing.space(0.5) grid.gutter-width();\n }\n }\n\n @include media.on-tiny {\n .tna-logo {\n width: 3.5rem;\n height: 3.5rem;\n }\n\n &__logo-strapline {\n line-height: 1;\n }\n\n &__navigation-button {\n @include typography.font-size(14);\n }\n\n &__navigation {\n width: calc(100% + #{grid.gutter-width-tiny-double()});\n\n left: -#{grid.gutter-width-tiny()};\n }\n\n &__navigation-item-link {\n padding: spacing.space(0.5) grid.gutter-width-tiny();\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-style: normal;\n font-optical-sizing: auto;\n font-variation-settings: \"wdth\" 100;\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 interacted-text-decoration {\n text-decoration: underline;\n text-decoration-thickness: typography.$interactive-text-decoration-thickness;\n}\n\n@mixin heading-generator(\n $font-size-default,\n $font-size-medium,\n $font-size-small,\n $font-size-tiny,\n $line-height\n) {\n $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","/\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: 18 !default;\n$body-font-size-px-mobile: 17 !default;\n$body-line-height: 1.75 !default;\n\n$interactive-text-decoration-thickness: 3.5px !default;\n\n$main-font-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: 30 !default;\n$heading-l-font-size-small: 28 !default;\n$heading-l-font-size-tiny: 25 !default;\n$heading-l-line-height: 1.3 !default;\n\n$heading-m-font-size-default: 22 !default;\n$heading-m-font-size-medium: 21 !default;\n$heading-m-font-size-small: 20 !default;\n$heading-m-font-size-tiny: 19 !default;\n$heading-m-line-height: 1.6 !default;\n\n$heading-s-font-size-default: 18 !default;\n$heading-s-font-size-medium: $heading-s-font-size-default !default;\n$heading-s-font-size-small: $heading-s-font-size-default !default;\n$heading-s-font-size-tiny: $heading-s-font-size-default !default;\n$heading-s-line-height: 1.6 !default;\n","@use \"sass:math\";\n@use \"../variables/media\";\n@use \"../variables/typography\";\n\n$smallest-large-device-em: #{math.div(\n media.$largest-medium-device-px + 1,\n typography.$relative-1rem-px\n )}em;\n$largest-medium-device-em: #{math.div(\n media.$largest-medium-device-px,\n typography.$relative-1rem-px\n )}em;\n$smallest-medium-device-em: #{math.div(\n media.$largest-small-device-px + 1,\n typography.$relative-1rem-px\n )}em;\n$largest-small-device-em: #{math.div(\n media.$largest-small-device-px,\n typography.$relative-1rem-px\n )}em;\n$smallest-small-device-em: #{math.div(\n media.$largest-tiny-device-px + 1,\n typography.$relative-1rem-px\n )}em;\n$largest-tiny-device-em: #{math.div(\n media.$largest-tiny-device-px,\n typography.$relative-1rem-px\n )}em;\n\n$media-large: \"(min-width: #{$smallest-large-device-em})\";\n$media-lt-large: \"(max-width: #{$largest-medium-device-em})\";\n$media-medium: \"(min-width: #{$smallest-medium-device-em}) and (max-width: #{$largest-medium-device-em})\";\n$media-gt-mobile: \"(min-width: #{$smallest-medium-device-em})\";\n$media-mobile: \"(max-width: #{$largest-small-device-em})\";\n$media-small: \"(min-width: #{$smallest-small-device-em}) and (max-width: #{$largest-small-device-em})\";\n$media-gt-tiny: \"(min-width: #{$smallest-small-device-em})\";\n$media-tiny: \"(max-width: #{$largest-tiny-device-em})\";\n\n// https://nationalarchives.github.io/design-system/styles/media/#media-queries\n@mixin on-large() {\n @media #{$media-large} {\n @content;\n }\n}\n\n@mixin on-medium() {\n @media #{$media-medium} {\n @content;\n }\n}\n\n@mixin on-small() {\n @media #{$media-small} {\n @content;\n }\n}\n\n@mixin on-tiny() {\n @media #{$media-tiny} {\n @content;\n }\n}\n\n@mixin on-larger-than-mobile() {\n @media #{$media-gt-mobile} {\n @content;\n }\n}\n\n@mixin on-larger-than-tiny() {\n @media #{$media-gt-tiny} {\n @content;\n }\n}\n\n@mixin on-smaller-than-large() {\n @media #{$media-lt-large} {\n @content;\n }\n}\n\n@mixin on-mobile() {\n @media #{$media-mobile} {\n @content;\n }\n}\n\n@mixin on-print() {\n @media print {\n @content;\n }\n}\n"]}

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

@@ -51,7 +51,8 @@
         @include colour.colour-font("font-base");
       }
-      &:hover {
+      &:hover,
+      &:focus-visible {
         text-decoration: none;
         @include colour.colour-outline("font-dark", 0.3125rem, solid);
@@ -135,7 +136,8 @@
     @include typography.main-font-weight-bold;
     @include typography.font-size(16);
-    &:hover {
+    &:hover,
+    &:focus-visible {
       @include typography.interacted-text-decoration;
     }
@@ -197,7 +199,8 @@
       @include colour.colour-font("font-base");
     }
-    &:hover {
+    &:hover,
+    &:focus-visible {
       @include typography.interacted-text-decoration;
     }
   }
@@ -229,7 +232,8 @@
       @include colour.colour-font("font-light");
     }
-    &:hover {
+    &:hover,
+    &:focus-visible {
       @include colour.colour-font("font-base");
       @include typography.interacted-text-decoration;
     }

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

	@@ -1 +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-list-marker: var(--accent-border);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-list-marker: var(--accent-border);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}}.tna-header__contents.tna-container{justify-content:space-between}.tna-header__logo{padding-top:20px;padding-bottom:20px}.tna-header__logo-contents{display:flex;align-items:flex-end;color:inherit;text-decoration:none}.tna-header__logo-contents--link,.tna-header__logo-contents--link:link,.tna-header__logo-contents--link:visited{color:inherit}.tna-header__logo-contents--link:hover:not(:focus){text-decoration:none;outline:.3125rem var(--font-dark, rgb(1, 1, 1)) solid;outline-offset:1px}.tna-header .tna-logo{width:5rem;height:5rem;display:inline-block;flex-shrink:0}.tna-header__logo-strapline{margin:0 12px;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;cursor:pointer}.tna-header__navigation-button:hover{text-decoration:underline;text-decoration-thickness:3.5px}.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:20px 0;display:flex;justify-content:flex-end;gap:8px 24px;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, rgb(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--selected,.tna-header__top-navigation-item-link--selected:link,.tna-header__top-navigation-item-link--selected:visited{color:var(--font-base, #343338);text-decoration:underline;text-decoration-thickness:3.5px}.tna-header__top-navigation-item-link .fa-solid{margin-right:6px}.tna-header__navigation-items{margin:0;padding:0;display:flex;flex-wrap:nowrap;gap:32px;white-space:nowrap;list-style:none}.tna-header__navigation-item-link{padding:8px 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,.tna-header__navigation-item-link--selected:hover::after{border-top:5px var(--keyline-dark, #26262a) solid}.tna-header.tna-background-accent{background:var(--background, #f4f4f4)}@media(max-width: 48em){.tna-header__logo{padding-top:16px;padding-bottom:16px}.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:8px 16px;justify-content:flex-start;border-bottom:1px var(--keyline, rgb(38 38 42/0.25)) solid}.tna-header__top-navigation-item{margin:0}.tna-header__top-navigation-item-link{padding:8px}.tna-header__top-navigation-item-link,.tna-header__top-navigation-item-link:link,.tna-header__top-navigation-item-link:visited{color:var(--font-light, rgb(1 1 1/0.58))}.tna-header__top-navigation-item-link:hover{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, #26262a) solid;border-bottom:2px var(--keyline-dark, #26262a) solid}.tna-header__navigation-item{margin:0;display:block;border-top:1px var(--keyline, rgb(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,.tna-header__navigation-item-link--selected:hover::after{border-left:.5rem var(--keyline, rgb(38 38 42/0.25)) solid}}@media(min-width: 30.0625em)and (max-width: 48em){.tna-header .tna-logo{width:4rem;height:4rem}.tna-header__logo-strapline{line-height:1.25rem}.tna-header__logo,.tna-header__navigation-item-link,.tna-header__navigation-button-wrapper{padding-right:32px}.tna-header__logo,.tna-header__navigation-item-link{padding-left:32px}.tna-header__top-navigation-items{padding-right:calc(32px - .5rem);padding-left:calc(32px - .5rem)}}@media(max-width: 30em){.tna-header__navigation-button-wrapper,.tna-header__logo{padding-right:16px}.tna-header__logo{padding-left:16px;flex:1}.tna-header .tna-logo{width:3.5rem;height:3.5rem}.tna-header__logo-strapline{line-height:1}.tna-header__navigation-button{font-size:0.875rem}.tna-header__top-navigation-items{gap:.5rem}.tna-header__navigation-item-link{padding-right:16px;padding-left:calc(16px + .5rem)}}@media(forced-colors: active){.tna-header,.tna-header__exit{border-bottom:1px var(--keyline, rgb(38 38 42/0.25)) solid}}@media(prefers-contrast: more){.tna-header,.tna-header__exit{border-bottom:1px var(--keyline, rgb(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 /
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-list-marker: var(--accent-border);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-list-marker: var(--accent-border);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}}.tna-header__contents.tna-container{justify-content:space-between}.tna-header__logo{padding-top:20px;padding-bottom:20px}.tna-header__logo-contents{display:flex;align-items:flex-end;color:inherit;text-decoration:none}.tna-header__logo-contents--link,.tna-header__logo-contents--link:link,.tna-header__logo-contents--link:visited{color:inherit}.tna-header__logo-contents--link:hover:not(:focus){text-decoration:none;outline:.3125rem var(--font-dark, rgb(1, 1, 1)) solid;outline-offset:1px}.tna-header .tna-logo{width:5rem;height:5rem;display:inline-block;flex-shrink:0}.tna-header__logo-strapline{margin:0 12px;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;cursor:pointer}.tna-header__navigation-button:hover,.tna-header__navigation-button:focus-visible{text-decoration:underline;text-decoration-thickness:3.5px}.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:20px 0;display:flex;justify-content:flex-end;gap:8px 24px;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, rgb(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);text-decoration:underline;text-decoration-thickness:3.5px}.tna-header__top-navigation-item-link .fa-solid{margin-right:6px}.tna-header__navigation-items{margin:0;padding:0;display:flex;flex-wrap:nowrap;gap:32px;white-space:nowrap;list-style:none}.tna-header__navigation-item-link{padding:8px 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,.tna-header__navigation-item-link--selected:hover::after,.tna-header__navigation-item-link--selected:focus-visible::after{border-top:5px var(--keyline-dark, #26262a) solid}.tna-header.tna-background-accent{background:var(--background, #f4f4f4)}@media(max-width: 48em){.tna-header__logo{padding-top:16px;padding-bottom:16px}.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:8px 16px;justify-content:flex-start;border-bottom:1px var(--keyline, rgb(38 38 42/0.25)) solid}.tna-header__top-navigation-item{margin:0}.tna-header__top-navigation-item-link{padding:8px}.tna-header__top-navigation-item-link,.tna-header__top-navigation-item-link:link,.tna-header__top-navigation-item-link:visited{color:var(--font-light, rgb(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, #26262a) solid;border-bottom:2px var(--keyline-dark, #26262a) solid}.tna-header__navigation-item{margin:0;display:block;border-top:1px var(--keyline, rgb(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,.tna-header__navigation-item-link--selected:hover::after,.tna-header__navigation-item-link--selected:focus-visible::after{border-left:.5rem var(--keyline, rgb(38 38 42/0.25)) solid}}@media(min-width: 30.0625em)and (max-width: 48em){.tna-header .tna-logo{width:4rem;height:4rem}.tna-header__logo-strapline{line-height:1.25rem}.tna-header__logo,.tna-header__navigation-item-link,.tna-header__navigation-button-wrapper{padding-right:32px}.tna-header__logo,.tna-header__navigation-item-link{padding-left:32px}.tna-header__top-navigation-items{padding-right:calc(32px - .5rem);padding-left:calc(32px - .5rem)}}@media(max-width: 30em){.tna-header__navigation-button-wrapper,.tna-header__logo{padding-right:16px}.tna-header__logo{padding-left:16px;flex:1}.tna-header .tna-logo{width:3.5rem;height:3.5rem}.tna-header__logo-strapline{line-height:1}.tna-header__navigation-button{font-size:0.875rem}.tna-header__top-navigation-items{gap:.5rem}.tna-header__navigation-item-link{padding-right:16px;padding-left:calc(16px + .5rem)}}@media(forced-colors: active){.tna-header,.tna-header__exit{border-bottom:1px var(--keyline, rgb(38 38 42/0.25)) solid}}@media(prefers-contrast: more){.tna-header,.tna-header__exit{border-bottom:1px var(--keyline, rgb(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 CHANGED Viewed

	@@ -1 +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":"AAqMA,YACE,yCACA,uCACA,uCACA,yCACA,yCACA,6BACA,6CACA,mCACA,6CACA,2CACA,uDACA,uDACA,mEACA,2CA5JA,4CAJA,gCC+BA,wBD6IF,0DAEI,yCACA,uCACA,uCACA,yCACA,yCACA,6BACA,6CACA,mCACA,6CACA,2CACA,uDACA,uDACA,mEACA,2CAvLF,4CAJA,iCE5CF,YAGE,kBAEA,wEAMA,sCACE,mBAIA,mCADF,wCAEI,oBAKF,oCACE,8BAIJ,kBACE,iBACA,oBAGF,2BACE,aACA,qBAEA,cACA,qBAGE,gHAGE,cAGF,mDACE,qBF2CJ,sDExCI,mBAKN,sBACE,WACA,YAEA,qBAEA,cAGF,4BACE,cAEA,qBAEA,qBCrCF,YCcA,gDDbA,YCgBoB,IDlDpB,kBDyEE,yBAGF,uCACE,kBAEA,aAGF,uBACE,WACA,cAEA,qBFrCF,gDEyCE,6DAEE,WAEA,WACA,cAEA,cAEA,kBACA,QAEA,yBAGF,+BACE,MAGF,8BACE,SAIJ,+BACE,YACA,UAEA,gBAEA,aACA,mBACA,WAEA,kBAEA,cC7GF,YCYsB,ID7BtB,eDkIE,gBAEA,6BACA,sBAEA,eAEA,qCCjFF,0BACA,0BCpCsC,MFyHlC,8DACE,SAEA,sEACE,YAEA,0BAGF,qEACE,eAEA,yBAMR,wBACE,aACA,8BACA,qBACA,8BAEA,kBACA,UAGF,kCACE,SACA,eAEA,aACA,yBACA,aAEA,cAEA,gBCpLF,oBDyLA,iCACE,cAGF,sCACE,aACA,mBAEA,qBAEA,+HFtJF,yCE8JI,8SF9JJ,gCGWA,0BACA,0BCpCsC,MF8LpC,gDACE,iBAIJ,8BACE,SACA,UAEA,aACA,iBACA,SAEA,mBAEA,gBAMF,kCACE,cAEA,qBAEA,kBAEA,cACA,qBCnOF,YCewB,IFwNtB,yCACE,WAEA,SAEA,kBACA,QACA,SACA,OF3MJ,gDEgNE,mHAGE,cAME,4GFzMF,kDEgNJ,kCACE,sCDtMF,wBC8ME,kBACE,iBACA,oBAIA,oCACE,gBACA,eAIJ,uCACE,cAEA,kDACE,eAIJ,wBACE,sBACA,oBAEA,mCACE,gBACA,eAIJ,kCACE,iBAEA,2BF1PA,2DE+PF,iCACE,SAGF,sCACE,YAEA,+HF1RJ,yCEgSI,4CFhSJ,qCEqSE,8BACE,WAEA,sBACA,MAEA,sCFvRA,uGE6RF,6BACE,SAEA,cFhSA,wDEoSA,yCACE,gBAIJ,kCACE,cAEA,oBAEA,yCACE,QACA,YAEA,MACA,WAME,4GFzTJ,4DCnBJ,kDCqVE,sBACE,WACA,YAGF,4BACE,oBAGF,2FAGE,mBAGF,oDAEE,kBAGF,kCACE,iCACA,iCDrWJ,wBC0WE,yDAEE,mBAGF,kBACE,kBACA,OAGF,sBACE,aACA,cAGF,4BACE,cAGF,+BCjbF,mBDqbE,kCACE,UAGF,kCACE,mBACA,iCFsBJ,8BEjBE,8BF/XE,4DA0YJ,+BEXE,8BF/XE,4DAgZJ,8BEVE,+BACE,YAEA,cC1cJ,mBAiBA,YCYsB,IFiblB,YAGF,uBACE","file":"header.css","sourcesContent":["@use \"sass:list\";\n@use \"sass:map\";\n@use \"../variables/borders\";\n@use \"../variables/colour\";\n@use \"../variables/features\";\n@use \"../tools/media\";\n\n@function brand-colour($colour, $opacity: 1) {\n @return colour.brand-colour($colour, $opacity);\n}\n\n@mixin colour-css-vars($excludes...) {\n @each $name, $value in colour.$colour-palette-default {\n @if not list.index($excludes, $name) {\n --#{$name}: #{$value};\n }\n }\n}\n\n@mixin colour-css-vars-dark($excludes...) {\n @each $name, $value in colour.$colour-palette-dark {\n @if not list.index($excludes, $name) {\n --#{$name}: #{$value};\n }\n }\n}\n\n@mixin colour-css-vars-high-contrast($excludes...) {\n @each $name, $value in colour.$colour-palette-high-contrast {\n @if not list.index($excludes, $name) {\n --#{$name}: #{$value};\n }\n }\n}\n\n@mixin colour-css-vars-high-contrast-dark($excludes...) {\n @each $name, $value in colour.$colour-palette-high-contrast-dark {\n @if not list.index($excludes, $name) {\n --#{$name}: #{$value};\n }\n }\n}\n\n@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($important, !important, null);\n}\n\n@mixin colour-background($colour, $important: false) {\n background-color: colour-var($colour) if($important, !important, null);\n}\n\n@mixin colour-background-brand($brandColour, $important: false) {\n background-color: #{brand-colour($brandColour)} if($important, !important, null);\n}\n\n@mixin colour-border(\n $colour,\n $width: \"\",\n $style: solid,\n $direction: \"\",\n $important: false\n) {\n @if $direction != \"\" {\n @if $width != \"\" {\n border-#{$direction}: $width\n colour-var($colour)\n $style\n if($important, !important, null);\n } @else {\n border-#{$direction}-color: colour-var($colour)\n if($important, !important, null);\n }\n } @else {\n @if $width != \"\" {\n border: $width\n colour-var($colour)\n $style\n if($important, !important, null);\n } @else {\n border-color: var(\n --#{$colour},\n #{map.get(colour.$colour-palette-default, $colour)}\n )\n if($important, !important, null);\n }\n }\n}\n\n@mixin colour-outline($colour, $width: \"\", $style: solid, $important: false) {\n @if $width != \"\" {\n outline: $width colour-var($colour) $style if($important, !important, null);\n } @else {\n outline-color: colour-var($colour) if($important, !important, null);\n }\n}\n\n@mixin colour-fill($colour, $important: false) {\n fill: colour-var($colour) if($important, !important, null);\n}\n\n@mixin thick-keyline($direction: \"\") {\n @if $direction != \"\" {\n @include colour-border(\n \"keyline\",\n borders.$thick-border-width,\n solid,\n $direction\n );\n } @else {\n @include colour-border(\"keyline\", borders.$thick-border-width, solid);\n }\n}\n\n@mixin thick-keyline-dark($direction: \"\") {\n @if $direction != \"\" {\n @include colour-border(\n \"keyline-dark\",\n borders.$thick-border-width,\n solid,\n $direction\n );\n } @else {\n @include colour-border(\"keyline-dark\", borders.$thick-border-width, solid);\n }\n}\n\n@mixin thick-keyline-accent($direction: \"\") {\n @if $direction != \"\" {\n @include colour-border(\n \"accent-border\",\n borders.$thick-border-width,\n solid,\n $direction\n );\n } @else {\n @include colour-border(\"accent-border\", borders.$thick-border-width, solid);\n }\n}\n\n@mixin thick-keyline-error($direction: \"\") {\n @if $direction != \"\" {\n @include colour-border(\n \"form-error-border\",\n borders.$thick-border-width,\n solid,\n $direction\n );\n } @else {\n @include colour-border(\n \"form-error-border\",\n borders.$thick-border-width,\n solid\n );\n }\n}\n\n@mixin thick-keyline-brand($direction: \"\", $brandColour) {\n @if $direction != \"\" {\n border-#{$direction}: borders.$thick-border-width\n #{brand-colour($brandColour)}\n solid;\n } @else {\n border: borders.$thick-border-width #{brand-colour($brandColour)} solid;\n }\n}\n\n@mixin thick-keyline-transparent($direction: \"\") {\n @if $direction != \"\" {\n border-#{$direction}: borders.$thick-border-width transparent solid;\n } @else {\n border: borders.$thick-border-width transparent solid;\n }\n}\n\n// Use light theme colours (except for \"form-error-border\")\n%always-light {\n @include colour-css-vars(\"form-error-border\", \"focus-outline\");\n\n @media (prefers-contrast: more) {\n @include colour-css-vars-high-contrast(\n \"form-error-border\",\n \"focus-outline\"\n );\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-list-marker: var(--accent-border);\n // --accent-list-marker: var(--font-base);\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-list-marker: var(--accent-border);\n // --accent-list-marker: var(--font-base);\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%tint {\n --background: var(--background-tint);\n\n @include colour-background(\"background\");\n\n // @include colour-font(\"font-base\");\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-list-marker: var(--accent-font-base);\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-list-marker: var(--font-base);\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-list-marker: var(--accent-font-base);\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-list-marker: var(--accent-font-base);\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-list-marker: #{colour.brand-colour(\"brown\")} !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.45)} !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(\"white\")} !important;\n --button-accented-background: #{colour.brand-colour(\"brown\")} !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.45)} !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-list-marker: #{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(\"pink\")} !important;\n --accent-list-marker: #{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(\"orange\")} !important;\n --accent-list-marker: #{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(\"green\")} !important;\n --accent-list-marker: #{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(\"blue\")} !important;\n --accent-list-marker: #{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@mixin image-loader-background {\n @if not features.$disable-image-loader-animations {\n background: linear-gradient(\n -45deg,\n rgba(0 0 0 / 25%),\n rgba(255 255 255 / 25%),\n rgba(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}\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 &__contents {\n &.tna-container {\n justify-content: space-between;\n }\n }\n\n &__logo {\n padding-top: spacing.space(1.25);\n padding-bottom: spacing.space(1.25);\n }\n\n &__logo-contents {\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 .tna-logo {\n width: 5rem;\n height: 5rem;\n\n display: inline-block;\n\n flex-shrink: 0;\n }\n\n &__logo-strapline {\n margin: 0 spacing.space(0.75);\n\n display: inline-block;\n\n line-height: 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\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 &--selected {\n &,\n &:link,\n &:visited {\n @include colour.colour-font(\"font-base\");\n @include typography.interacted-text-decoration;\n }\n }\n\n .fa-solid {\n margin-right: spacing.space(0.375);\n }\n }\n\n &__navigation-items {\n margin: 0;\n padding: 0;\n\n display: flex;\n flex-wrap: nowrap;\n gap: spacing.space(2);\n\n 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 &,\n &:hover {\n &::after {\n @include colour.thick-keyline-dark(top);\n }\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 @include media.on-mobile {\n &__logo {\n padding-top: spacing.space(1);\n padding-bottom: spacing.space(1);\n }\n\n &__contents {\n &.tna-container {\n padding-right: 0;\n padding-left: 0;\n }\n }\n\n &__navigation-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);\n\n &,\n &:link,\n &:visited {\n @include colour.colour-font(\"font-light\");\n }\n\n &:hover {\n @include colour.colour-font(\"font-dark\");\n }\n }\n\n &__navigation-items {\n width: 100%;\n\n flex-direction: column;\n gap: 0;\n\n background-color: rgb(255 255 255 / 10%);\n\n @include colour.colour-border(\"keyline-dark\", 2px, solid, top);\n @include colour.colour-border(\"keyline-dark\", 2px, solid, bottom);\n }\n\n &__navigation-item {\n margin: 0;\n\n display: block;\n\n @include colour.colour-border(\"keyline\", 1px, solid, top);\n\n &:first-child {\n border-top: none;\n }\n }\n\n &__navigation-item-link {\n display: block;\n\n line-height: 1.75rem;\n\n &::after {\n width: 0;\n height: auto;\n\n top: 0;\n right: auto;\n }\n\n &--selected {\n &,\n &:hover {\n &::after {\n @include colour.colour-border(\"keyline\", 0.5rem, solid, left);\n }\n }\n }\n }\n }\n\n @include media.on-small {\n .tna-logo {\n width: 4rem;\n height: 4rem;\n }\n\n &__logo-strapline {\n line-height: 1.25rem;\n }\n\n &__logo,\n &__navigation-item-link,\n &__navigation-button-wrapper {\n padding-right: grid.gutter-width();\n }\n\n &__logo,\n &__navigation-item-link {\n padding-left: grid.gutter-width();\n }\n\n &__top-navigation-items {\n padding-right: calc(#{grid.gutter-width()} - 0.5rem);\n padding-left: calc(#{grid.gutter-width()} - 0.5rem);\n }\n }\n\n @include media.on-tiny {\n &__navigation-button-wrapper,\n &__logo {\n padding-right: grid.gutter-width-tiny();\n }\n\n &__logo {\n padding-left: grid.gutter-width-tiny();\n flex: 1;\n }\n\n .tna-logo {\n width: 3.5rem;\n height: 3.5rem;\n }\n\n &__logo-strapline {\n line-height: 1;\n }\n\n &__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 &,\n &__exit {\n @include colour.colour-border(\"keyline\", 1px, solid, bottom);\n }\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-style: normal;\n font-optical-sizing: auto;\n font-variation-settings: \"wdth\" 100;\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 interacted-text-decoration {\n text-decoration: underline;\n text-decoration-thickness: typography.$interactive-text-decoration-thickness;\n}\n\n@mixin heading-generator(\n $font-size-default,\n $font-size-medium,\n $font-size-small,\n $font-size-tiny,\n $line-height\n) {\n $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","/\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: 18 !default;\n$body-font-size-px-mobile: 17 !default;\n$body-line-height: 1.75 !default;\n\n$interactive-text-decoration-thickness: 3.5px !default;\n\n$main-font-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: 30 !default;\n$heading-l-font-size-small: 28 !default;\n$heading-l-font-size-tiny: 25 !default;\n$heading-l-line-height: 1.3 !default;\n\n$heading-m-font-size-default: 22 !default;\n$heading-m-font-size-medium: 21 !default;\n$heading-m-font-size-small: 20 !default;\n$heading-m-font-size-tiny: 19 !default;\n$heading-m-line-height: 1.6 !default;\n\n$heading-s-font-size-default: 18 !default;\n$heading-s-font-size-medium: $heading-s-font-size-default !default;\n$heading-s-font-size-small: $heading-s-font-size-default !default;\n$heading-s-font-size-tiny: $heading-s-font-size-default !default;\n$heading-s-line-height: 1.6 !default;\n"]}
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":"AAqMA,YACE,yCACA,uCACA,uCACA,yCACA,yCACA,6BACA,6CACA,mCACA,6CACA,2CACA,uDACA,uDACA,mEACA,2CA5JA,4CAJA,gCC+BA,wBD6IF,0DAEI,yCACA,uCACA,uCACA,yCACA,yCACA,6BACA,6CACA,mCACA,6CACA,2CACA,uDACA,uDACA,mEACA,2CAvLF,4CAJA,iCE5CF,YAGE,kBAEA,wEAMA,sCACE,mBAIA,mCADF,wCAEI,oBAKF,oCACE,8BAIJ,kBACE,iBACA,oBAGF,2BACE,aACA,qBAEA,cACA,qBAGE,gHAGE,cAGF,mDACE,qBF2CJ,sDExCI,mBAKN,sBACE,WACA,YAEA,qBAEA,cAGF,4BACE,cAEA,qBAEA,qBCrCF,YCcA,gDDbA,YCgBoB,IDlDpB,kBDyEE,yBAGF,uCACE,kBAEA,aAGF,uBACE,WACA,cAEA,qBFrCF,gDEyCE,6DAEE,WAEA,WACA,cAEA,cAEA,kBACA,QAEA,yBAGF,+BACE,MAGF,8BACE,SAIJ,+BACE,YACA,UAEA,gBAEA,aACA,mBACA,WAEA,kBAEA,cC7GF,YCYsB,ID7BtB,eDkIE,gBAEA,6BACA,sBAEA,eAEA,kFCjFF,0BACA,0BCpCsC,MF0HlC,8DACE,SAEA,sEACE,YAEA,0BAGF,qEACE,eAEA,yBAMR,wBACE,aACA,8BACA,qBACA,8BAEA,kBACA,UAGF,kCACE,SACA,eAEA,aACA,yBACA,aAEA,cAEA,gBCrLF,oBD0LA,iCACE,cAGF,sCACE,aACA,mBAEA,qBAEA,+HFvJF,yCEgKI,udFhKJ,gCGWA,0BACA,0BCpCsC,MFgMpC,gDACE,iBAIJ,8BACE,SACA,UAEA,aACA,iBACA,SAEA,mBAEA,gBAMF,kCACE,cAEA,qBAEA,kBAEA,cACA,qBCrOF,YCewB,IF0NtB,yCACE,WAEA,SAEA,kBACA,QACA,SACA,OF7MJ,gDEkNE,mHAGE,cAOE,6KF5MF,kDEmNJ,kCACE,sCDzMF,wBCiNE,kBACE,iBACA,oBAIA,oCACE,gBACA,eAIJ,uCACE,cAEA,kDACE,eAIJ,wBACE,sBACA,oBAEA,mCACE,gBACA,eAIJ,kCACE,iBAEA,2BF7PA,2DEkQF,iCACE,SAGF,sCACE,YAEA,+HF7RJ,yCEmSI,gGFnSJ,qCEySE,8BACE,WAEA,sBACA,MAEA,sCF3RA,uGEiSF,6BACE,SAEA,cFpSA,wDEwSA,yCACE,gBAIJ,kCACE,cAEA,oBAEA,yCACE,QACA,YAEA,MACA,WAOE,6KF9TJ,4DCnBJ,kDC0VE,sBACE,WACA,YAGF,4BACE,oBAGF,2FAGE,mBAGF,oDAEE,kBAGF,kCACE,iCACA,iCD1WJ,wBC+WE,yDAEE,mBAGF,kBACE,kBACA,OAGF,sBACE,aACA,cAGF,4BACE,cAGF,+BCtbF,mBD0bE,kCACE,UAGF,kCACE,mBACA,iCFiBJ,8BEZE,8BFpYE,4DA0YJ,+BENE,8BFpYE,4DAgZJ,8BELE,+BACE,YAEA,cC/cJ,mBAiBA,YCYsB,IFsblB,YAGF,uBACE","file":"header.css","sourcesContent":["@use \"sass:list\";\n@use \"sass:map\";\n@use \"../variables/borders\";\n@use \"../variables/colour\";\n@use \"../variables/features\";\n@use \"../tools/media\";\n\n@function brand-colour($colour, $opacity: 1) {\n @return colour.brand-colour($colour, $opacity);\n}\n\n@mixin colour-css-vars($excludes...) {\n @each $name, $value in colour.$colour-palette-default {\n @if not list.index($excludes, $name) {\n --#{$name}: #{$value};\n }\n }\n}\n\n@mixin colour-css-vars-dark($excludes...) {\n @each $name, $value in colour.$colour-palette-dark {\n @if not list.index($excludes, $name) {\n --#{$name}: #{$value};\n }\n }\n}\n\n@mixin colour-css-vars-high-contrast($excludes...) {\n @each $name, $value in colour.$colour-palette-high-contrast {\n @if not list.index($excludes, $name) {\n --#{$name}: #{$value};\n }\n }\n}\n\n@mixin colour-css-vars-high-contrast-dark($excludes...) {\n @each $name, $value in colour.$colour-palette-high-contrast-dark {\n @if not list.index($excludes, $name) {\n --#{$name}: #{$value};\n }\n }\n}\n\n@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($important, !important, null);\n}\n\n@mixin colour-background($colour, $important: false) {\n background-color: colour-var($colour) if($important, !important, null);\n}\n\n@mixin colour-background-brand($brandColour, $important: false) {\n background-color: #{brand-colour($brandColour)} if($important, !important, null);\n}\n\n@mixin colour-border(\n $colour,\n $width: \"\",\n $style: solid,\n $direction: \"\",\n $important: false\n) {\n @if $direction != \"\" {\n @if $width != \"\" {\n border-#{$direction}: $width\n colour-var($colour)\n $style\n if($important, !important, null);\n } @else {\n border-#{$direction}-color: colour-var($colour)\n if($important, !important, null);\n }\n } @else {\n @if $width != \"\" {\n border: $width\n colour-var($colour)\n $style\n if($important, !important, null);\n } @else {\n border-color: var(\n --#{$colour},\n #{map.get(colour.$colour-palette-default, $colour)}\n )\n if($important, !important, null);\n }\n }\n}\n\n@mixin colour-outline($colour, $width: \"\", $style: solid, $important: false) {\n @if $width != \"\" {\n outline: $width colour-var($colour) $style if($important, !important, null);\n } @else {\n outline-color: colour-var($colour) if($important, !important, null);\n }\n}\n\n@mixin colour-fill($colour, $important: false) {\n fill: colour-var($colour) if($important, !important, null);\n}\n\n@mixin thick-keyline($direction: \"\") {\n @if $direction != \"\" {\n @include colour-border(\n \"keyline\",\n borders.$thick-border-width,\n solid,\n $direction\n );\n } @else {\n @include colour-border(\"keyline\", borders.$thick-border-width, solid);\n }\n}\n\n@mixin thick-keyline-dark($direction: \"\") {\n @if $direction != \"\" {\n @include colour-border(\n \"keyline-dark\",\n borders.$thick-border-width,\n solid,\n $direction\n );\n } @else {\n @include colour-border(\"keyline-dark\", borders.$thick-border-width, solid);\n }\n}\n\n@mixin thick-keyline-accent($direction: \"\") {\n @if $direction != \"\" {\n @include colour-border(\n \"accent-border\",\n borders.$thick-border-width,\n solid,\n $direction\n );\n } @else {\n @include colour-border(\"accent-border\", borders.$thick-border-width, solid);\n }\n}\n\n@mixin thick-keyline-error($direction: \"\") {\n @if $direction != \"\" {\n @include colour-border(\n \"form-error-border\",\n borders.$thick-border-width,\n solid,\n $direction\n );\n } @else {\n @include colour-border(\n \"form-error-border\",\n borders.$thick-border-width,\n solid\n );\n }\n}\n\n@mixin thick-keyline-brand($direction: \"\", $brandColour) {\n @if $direction != \"\" {\n border-#{$direction}: borders.$thick-border-width\n #{brand-colour($brandColour)}\n solid;\n } @else {\n border: borders.$thick-border-width #{brand-colour($brandColour)} solid;\n }\n}\n\n@mixin thick-keyline-transparent($direction: \"\") {\n @if $direction != \"\" {\n border-#{$direction}: borders.$thick-border-width transparent solid;\n } @else {\n border: borders.$thick-border-width transparent solid;\n }\n}\n\n// Use light theme colours (except for \"form-error-border\")\n%always-light {\n @include colour-css-vars(\"form-error-border\", \"focus-outline\");\n\n @media (prefers-contrast: more) {\n @include colour-css-vars-high-contrast(\n \"form-error-border\",\n \"focus-outline\"\n );\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-list-marker: var(--accent-border);\n // --accent-list-marker: var(--font-base);\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-list-marker: var(--accent-border);\n // --accent-list-marker: var(--font-base);\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%tint {\n --background: var(--background-tint);\n\n @include colour-background(\"background\");\n\n // @include colour-font(\"font-base\");\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-list-marker: var(--accent-font-base);\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-list-marker: var(--font-base);\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-list-marker: var(--accent-font-base);\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-list-marker: var(--accent-font-base);\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-list-marker: #{colour.brand-colour(\"brown\")} !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.45)} !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(\"white\")} !important;\n --button-accented-background: #{colour.brand-colour(\"brown\")} !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.45)} !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-list-marker: #{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(\"pink\")} !important;\n --accent-list-marker: #{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(\"orange\")} !important;\n --accent-list-marker: #{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(\"green\")} !important;\n --accent-list-marker: #{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(\"blue\")} !important;\n --accent-list-marker: #{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@mixin image-loader-background {\n @if not features.$disable-image-loader-animations {\n background: linear-gradient(\n -45deg,\n rgba(0 0 0 / 25%),\n rgba(255 255 255 / 25%),\n rgba(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}\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 &__contents {\n &.tna-container {\n justify-content: space-between;\n }\n }\n\n &__logo {\n padding-top: spacing.space(1.25);\n padding-bottom: spacing.space(1.25);\n }\n\n &__logo-contents {\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 .tna-logo {\n width: 5rem;\n height: 5rem;\n\n display: inline-block;\n\n flex-shrink: 0;\n }\n\n &__logo-strapline {\n margin: 0 spacing.space(0.75);\n\n display: inline-block;\n\n line-height: 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\n cursor: pointer;\n\n &:hover,\n &:focus-visible {\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 @include typography.interacted-text-decoration;\n }\n }\n\n .fa-solid {\n margin-right: spacing.space(0.375);\n }\n }\n\n &__navigation-items {\n margin: 0;\n padding: 0;\n\n display: flex;\n flex-wrap: nowrap;\n gap: spacing.space(2);\n\n 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 &,\n &:hover,\n &:focus-visible {\n &::after {\n @include colour.thick-keyline-dark(top);\n }\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 @include media.on-mobile {\n &__logo {\n padding-top: spacing.space(1);\n padding-bottom: spacing.space(1);\n }\n\n &__contents {\n &.tna-container {\n padding-right: 0;\n padding-left: 0;\n }\n }\n\n &__navigation-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);\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 &,\n &:hover,\n &:focus-visible {\n &::after {\n @include colour.colour-border(\"keyline\", 0.5rem, solid, left);\n }\n }\n }\n }\n }\n\n @include media.on-small {\n .tna-logo {\n width: 4rem;\n height: 4rem;\n }\n\n &__logo-strapline {\n line-height: 1.25rem;\n }\n\n &__logo,\n &__navigation-item-link,\n &__navigation-button-wrapper {\n padding-right: grid.gutter-width();\n }\n\n &__logo,\n &__navigation-item-link {\n padding-left: grid.gutter-width();\n }\n\n &__top-navigation-items {\n padding-right: calc(#{grid.gutter-width()} - 0.5rem);\n padding-left: calc(#{grid.gutter-width()} - 0.5rem);\n }\n }\n\n @include media.on-tiny {\n &__navigation-button-wrapper,\n &__logo {\n padding-right: grid.gutter-width-tiny();\n }\n\n &__logo {\n padding-left: grid.gutter-width-tiny();\n flex: 1;\n }\n\n .tna-logo {\n width: 3.5rem;\n height: 3.5rem;\n }\n\n &__logo-strapline {\n line-height: 1;\n }\n\n &__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 &,\n &__exit {\n @include colour.colour-border(\"keyline\", 1px, solid, bottom);\n }\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-style: normal;\n font-optical-sizing: auto;\n font-variation-settings: \"wdth\" 100;\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 interacted-text-decoration {\n text-decoration: underline;\n text-decoration-thickness: typography.$interactive-text-decoration-thickness;\n}\n\n@mixin heading-generator(\n $font-size-default,\n $font-size-medium,\n $font-size-small,\n $font-size-tiny,\n $line-height\n) {\n $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","/\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: 18 !default;\n$body-font-size-px-mobile: 17 !default;\n$body-line-height: 1.75 !default;\n\n$interactive-text-decoration-thickness: 3.5px !default;\n\n$main-font-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: 30 !default;\n$heading-l-font-size-small: 28 !default;\n$heading-l-font-size-tiny: 25 !default;\n$heading-l-line-height: 1.3 !default;\n\n$heading-m-font-size-default: 22 !default;\n$heading-m-font-size-medium: 21 !default;\n$heading-m-font-size-small: 20 !default;\n$heading-m-font-size-tiny: 19 !default;\n$heading-m-line-height: 1.6 !default;\n\n$heading-s-font-size-default: 18 !default;\n$heading-s-font-size-medium: $heading-s-font-size-default !default;\n$heading-s-font-size-small: $heading-s-font-size-default !default;\n$heading-s-font-size-tiny: $heading-s-font-size-default !default;\n$heading-s-line-height: 1.6 !default;\n"]}

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

@@ -141,7 +141,8 @@
     cursor: pointer;
-    &:hover {
+    &:hover,
+    &:focus-visible {
       @include typography.interacted-text-decoration;
     }
@@ -206,6 +207,7 @@
     }
     &:hover,
+    &:focus-visible,
     &--selected {
       &,
       &:link,
@@ -269,7 +271,8 @@
     &--selected {
       &,
-      &:hover {
+      &:hover,
+      &:focus-visible {
         &::after {
           @include colour.thick-keyline-dark(top);
         }
@@ -337,7 +340,8 @@
         @include colour.colour-font("font-light");
       }
-      &:hover {
+      &:hover,
+      &:focus-visible {
         @include colour.colour-font("font-dark");
       }
     }
@@ -381,7 +385,8 @@
       &--selected {
         &,
-        &:hover {
+        &:hover,
+        &:focus-visible {
           &::after {
             @include colour.colour-border("keyline", 0.5rem, solid, left);
           }

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

	@@ -1 +1 @@
1	- .tna-hero__information,.tna-hero__details[open] .tna-hero__details-summary,.tna-hero--split:not(.tna-background-accent,.tna-background-tint),.tna-hero--shift:not(.tna-background-accent,.tna-background-tint) .tna-hero__content-inner{--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-list-marker: var(--accent-border);background-color:var(--background, #f4f4f4);color:var(--font-base, #343338)}@media(max-width: 48em){.tna-hero:not(.tna-background-accent,.tna-background-tint) .tna-hero__inner{--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-list-marker: var(--accent-border);background-color:var(--background, #f4f4f4);color:var(--font-base, #343338)}}.tna-hero__details-summary{--background: var(--accent-background);--font-base: var(--accent-font-base);--font-dark: var(--accent-font-dark);--font-light: var(--accent-font-light);--icon-light: var(--accent-icon-light);--link: var(--accent-link);--link-visited: var(--accent-link);--keyline: var(--accent-keyline);--keyline-dark: var(--accent-keyline-dark);--accent-list-marker: var(--accent-font-base);--accent-border: var(--accent-font-dark);--button-text: var(--accent-button-text);--button-background: var(--accent-button-background);--button-hover-text: var(--accent-button-hover-text);--button-hover-background: var(--accent-button-hover-background);background-color:var(--background, #f4f4f4);color:var(--font-base, #343338)}.tna-hero__figure{min-height:clamp(192px,40vw - 192px,50rem);margin:0;padding-top:160px;padding-bottom:32px;display:flex;align-items:flex-end;position:relative}.tna-hero__caption{width:100%;overflow:visible;position:absolute;top:0;right:0;z-index:5}.tna-hero__details{width:100%;overflow:visible}.tna-hero__details-summary{width:1.5rem;height:1.5rem;position:absolute;top:8px;right:8px;z-index:2;font-size:0;line-height:1.5rem;text-align:center;list-style:none;border-radius:100%;cursor:pointer;border:4px var(--background, #f4f4f4) solid}.tna-hero__details-summary:hover{color:var(--background, #f4f4f4);background-color:var(--font-base, #343338)}.tna-hero__details-summary-icon{font-size:1.25rem;font-weight:700;font-style:normal;text-transform:lowercase}.tna-hero__information{width:45rem;max-width:75vw;padding:10px 52px 10px 16px;position:absolute;top:0;right:0;z-index:1;font-size:1rem}.tna-hero__information p+p{margin-top:8px}.tna-hero__image{position:absolute;inset:0;z-index:1;background:linear-gradient(-45deg, rgba(0, 0, 0, 0.25), rgba(255, 255, 255, 0.25), rgba(0, 0, 0, 0.25));background-size:500% 500%;background-position:0 50%;animation:image-loader-background ease-in-out 1.2s infinite}.tna-hero__image img{width:100%;height:100%;object-fit:cover}.tna-hero__details[open] .tna-hero__details-summary::before,.tna-hero__details[open] .tna-hero__details-summary::after{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__inner{position:relative;z-index:4}.tna-hero__content-inner{padding:32px;background-color:var(--background, #f4f4f4)}.tna-hero--split .tna-hero__figure{min-height:clamp(15rem,33.3333333333vw,50rem);padding-top:32px;padding-bottom:32px;align-items:center;box-sizing:border-box}.tna-hero--split .tna-hero__information{max-width:50%;box-sizing:border-box}.tna-hero--split .tna-hero__image{left:50%}.tna-hero--split .tna-hero__content{width:50%;padding-right:32px}.tna-hero--split .tna-hero__content-inner{padding:0}.tna-hero--shift{margin-bottom:48px}.tna-hero--shift.tna-hero--narrow{margin-bottom:32px}.tna-hero--shift .tna-hero__content-inner{position:relative;top:80px}.tna-hero--narrow .tna-hero__figure{min-height:max(96px,20rem);padding-top:48px;padding-bottom:48px}@media(max-width: 48em){.tna-hero .tna-hero__figure{min-height:auto;padding:0;flex-direction:column}.tna-hero__caption{order:2}.tna-hero__information,.tna-hero--split .tna-hero__information{width:auto;max-width:none;left:0}.tna-hero__image{width:100%;position:static;order:1}.tna-hero__image img{height:auto}.tna-hero__inner{order:3}.tna-hero__content-inner{padding-right:0;padding-left:0}.tna-hero__body{margin-top:16px}.tna-hero--shift{margin-bottom:0}.tna-hero--shift .tna-hero__content-inner{position:static}.tna-hero--split .tna-hero__figure{min-height:auto;padding-top:0;padding-bottom:0}.tna-hero--split .tna-hero__content{width:100%;padding-right:16px}.tna-hero--split .tna-hero__content-inner{padding-top:32px;padding-bottom:32px}}@media(forced-colors: active){.tna-hero__information,.tna-hero__content-inner{border:1px var(--keyline-dark, #26262a) solid}}@media(forced-colors: active)and (max-width: 48em){.tna-hero__inner{border:1px var(--keyline-dark, #26262a) solid;border-top:0}.tna-hero__content-inner{border:none}}@media(prefers-contrast: more){.tna-hero__information,.tna-hero__content-inner{border:1px var(--keyline-dark, #26262a) solid}}@media(prefers-contrast: more)and (max-width: 48em){.tna-hero__inner{border:1px var(--keyline-dark, #26262a) solid;border-top:0}.tna-hero__content-inner{border:none}}/# sourceMappingURL=hero.css.map /
1	+ .tna-hero__information,.tna-hero__details[open] .tna-hero__details-summary,.tna-hero--split:not(.tna-background-accent,.tna-background-tint),.tna-hero--shift:not(.tna-background-accent,.tna-background-tint) .tna-hero__content-inner{--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-list-marker: var(--accent-border);background-color:var(--background, #f4f4f4);color:var(--font-base, #343338)}@media(max-width: 48em){.tna-hero:not(.tna-background-accent,.tna-background-tint) .tna-hero__inner{--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-list-marker: var(--accent-border);background-color:var(--background, #f4f4f4);color:var(--font-base, #343338)}}.tna-hero__details-summary{--background: var(--accent-background);--font-base: var(--accent-font-base);--font-dark: var(--accent-font-dark);--font-light: var(--accent-font-light);--icon-light: var(--accent-icon-light);--link: var(--accent-link);--link-visited: var(--accent-link);--keyline: var(--accent-keyline);--keyline-dark: var(--accent-keyline-dark);--accent-list-marker: var(--accent-font-base);--accent-border: var(--accent-font-dark);--button-text: var(--accent-button-text);--button-background: var(--accent-button-background);--button-hover-text: var(--accent-button-hover-text);--button-hover-background: var(--accent-button-hover-background);background-color:var(--background, #f4f4f4);color:var(--font-base, #343338)}.tna-hero__figure{min-height:clamp(192px,40vw - 192px,50rem);margin:0;padding-top:160px;padding-bottom:32px;display:flex;align-items:flex-end;position:relative}.tna-hero__caption{width:100%;overflow:visible;position:absolute;top:0;right:0;z-index:5}.tna-hero__details{width:100%;overflow:visible}.tna-hero__details-summary{width:1.5rem;height:1.5rem;position:absolute;top:8px;right:8px;z-index:2;font-size:0;line-height:1.5rem;text-align:center;list-style:none;border-radius:100%;cursor:pointer;border:4px var(--background, #f4f4f4) solid}.tna-hero__details-summary:hover,.tna-hero__details-summary:focus-visible{color:var(--background, #f4f4f4);background-color:var(--font-base, #343338)}.tna-hero__details-summary-icon{font-size:1.25rem;font-weight:700;font-style:normal;text-transform:lowercase}.tna-hero__information{width:45rem;max-width:75vw;padding:10px 52px 10px 16px;position:absolute;top:0;right:0;z-index:1;font-size:1rem}.tna-hero__information p+p{margin-top:8px}.tna-hero__image{position:absolute;inset:0;z-index:1;background:linear-gradient(-45deg, rgba(0, 0, 0, 0.25), rgba(255, 255, 255, 0.25), rgba(0, 0, 0, 0.25));background-size:500% 500%;background-position:0 50%;animation:image-loader-background ease-in-out 1.2s infinite}.tna-hero__image img{width:100%;height:100%;object-fit:cover}.tna-hero__details[open] .tna-hero__details-summary::before,.tna-hero__details[open] .tna-hero__details-summary::after{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,.tna-hero__details[open] .tna-hero__details-summary:focus-visible::before,.tna-hero__details[open] .tna-hero__details-summary:focus-visible::after{height:.25rem}.tna-hero__details[open] .tna-hero__details-summary-icon{font-size:0}.tna-hero__inner{position:relative;z-index:4}.tna-hero__content-inner{padding:32px;background-color:var(--background, #f4f4f4)}.tna-hero--split .tna-hero__figure{min-height:clamp(15rem,33.3333333333vw,50rem);padding-top:32px;padding-bottom:32px;align-items:center;box-sizing:border-box}.tna-hero--split .tna-hero__information{max-width:50%;box-sizing:border-box}.tna-hero--split .tna-hero__image{left:50%}.tna-hero--split .tna-hero__content{width:50%;padding-right:32px}.tna-hero--split .tna-hero__content-inner{padding:0}.tna-hero--shift{margin-bottom:48px}.tna-hero--shift.tna-hero--narrow{margin-bottom:32px}.tna-hero--shift .tna-hero__content-inner{position:relative;top:80px}.tna-hero--narrow .tna-hero__figure{min-height:max(96px,20rem);padding-top:48px;padding-bottom:48px}@media(max-width: 48em){.tna-hero .tna-hero__figure{min-height:auto;padding:0;flex-direction:column}.tna-hero__caption{order:2}.tna-hero__information,.tna-hero--split .tna-hero__information{width:auto;max-width:none;left:0}.tna-hero__image{width:100%;position:static;order:1}.tna-hero__image img{height:auto}.tna-hero__inner{order:3}.tna-hero__content-inner{padding-right:0;padding-left:0}.tna-hero__body{margin-top:16px}.tna-hero--shift{margin-bottom:0}.tna-hero--shift .tna-hero__content-inner{position:static}.tna-hero--split .tna-hero__figure{min-height:auto;padding-top:0;padding-bottom:0}.tna-hero--split .tna-hero__content{width:100%;padding-right:16px}.tna-hero--split .tna-hero__content-inner{padding-top:32px;padding-bottom:32px}}@media(forced-colors: active){.tna-hero__information,.tna-hero__content-inner{border:1px var(--keyline-dark, #26262a) solid}}@media(forced-colors: active)and (max-width: 48em){.tna-hero__inner{border:1px var(--keyline-dark, #26262a) solid;border-top:0}.tna-hero__content-inner{border:none}}@media(prefers-contrast: more){.tna-hero__information,.tna-hero__content-inner{border:1px var(--keyline-dark, #26262a) solid}}@media(prefers-contrast: more)and (max-width: 48em){.tna-hero__inner{border:1px var(--keyline-dark, #26262a) solid;border-top:0}.tna-hero__content-inner{border:none}}/# sourceMappingURL=hero.css.map /