npm - @nationalarchives/frontend - Versions diffs - 0.1.54 → 0.1.56 - Mend

@nationalarchives/frontend 0.1.54 → 0.1.56

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 (84) hide show

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

	@@ -1 +1 @@
1	- {"version":3,"sourceRoot":"","sources":["../../../../src/nationalarchives/tools/_colour.scss","../../../../src/nationalarchives/components/gallery/gallery.scss","../../../../src/nationalarchives/tools/_media.scss"],"names":[],"mappings":"AA0MA,aACE,yCACA,uCACA,uCACA,yCACA,yCACA,6BACA,6CACA,mCACA,6CACA,2CACA,uDACA,uDACA,mEAvKA,4CALA,gCCvCF,aAGE,oBAEA,qBACE,iBAGF,oBACE,WAEA,aACA,sBACA,mBACA,SAEA,0BACE,wBAIJ,mBACE,SAEA,yBACE,oBAEA,kBAMF,yBACE,YACA,cAGF,+BACE,gBACA,uBDuBA,mDEQJ,wBD1BE,wBAEI,kBAKN,sCDWI,wDCPJ,6BACE,kBAGF,qBACE,gBAIA,4CACE,qBAEA,SAEA,kBACA,6BAGF,2CACE,WAEA,yBACA,UAIA,mEACE,cAKN,mOAGE,aAGF,kDACE","file":"gallery.css","sourcesContent":["@use \"sass:list\";\n@use \"sass:map\";\n@use \"../variables/borders\";\n@use \"../variables/colour\";\n@use \"../tools/media\";\n\n@function brand-colour($colour, $opacity: 1) {\n @return colour.brand-colour($colour, $opacity);\n}\n\n@mixin colour-css-vars($excludes...) {\n @each $name, $value in colour.$colour-palette-default {\n @if not list.index($excludes, $name) {\n --#{$name}: #{$value};\n }\n }\n}\n\n@mixin colour-css-vars-dark($excludes...) {\n @each $name, $value in colour.$colour-palette-dark {\n @if not list.index($excludes, $name) {\n --#{$name}: #{$value};\n }\n }\n}\n\n@mixin colour-css-vars-high-contrast($excludes...) {\n @each $name, $value in colour.$colour-palette-high-contrast {\n @if not list.index($excludes, $name) {\n --#{$name}: #{$value};\n }\n }\n}\n\n@mixin colour-css-vars-high-contrast-dark($excludes...) {\n @each $name, $value in colour.$colour-palette-high-contrast-dark {\n @if not list.index($excludes, $name) {\n --#{$name}: #{$value};\n }\n }\n}\n\n@mixin colour-font($colour, $important: false) {\n color: var(--#{$colour}, #{map.get(colour.$colour-palette-default, $colour)})\n if($important, !important, null);\n}\n\n@mixin colour-background($colour, $important: false) {\n background-color: var(\n --#{$colour},\n #{map.get(colour.$colour-palette-default, $colour)}\n )\n 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 var(--#{$colour}, #{map.get(colour.$colour-palette-default, $colour)})\n $style\n if($important, !important, null);\n } @else {\n border-#{$direction}-color: var(\n --#{$colour},\n #{map.get(colour.$colour-palette-default, $colour)}\n )\n if($important, !important, null);\n }\n } @else {\n @if $width != \"\" {\n border: $width\n var(--#{$colour}, #{map.get(colour.$colour-palette-default, $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\n var(--#{$colour}, #{map.get(colour.$colour-palette-default, $colour)})\n $style\n if($important, !important, null);\n } @else {\n outline-color: var(\n --#{$colour},\n #{map.get(colour.$colour-palette-default, $colour)}\n )\n if($important, !important, null);\n }\n}\n\n@mixin colour-fill($colour, $important: false) {\n fill: var(--#{$colour}, #{map.get(colour.$colour-palette-default, $colour)})\n if($important, !important, null);\n}\n\n@mixin thick-keyline($direction) {\n @include colour-border(\n \"keyline\",\n borders.$thick-border-width,\n solid,\n $direction\n );\n}\n\n@mixin thick-keyline-dark($direction) {\n @include colour-border(\n \"keyline-dark\",\n borders.$thick-border-width,\n solid,\n $direction\n );\n}\n\n@mixin thick-keyline-accent($direction) {\n @include colour-border(\n \"accent-background\",\n borders.$thick-border-width,\n solid,\n $direction\n );\n}\n\n@mixin thick-keyline-error($direction) {\n @include colour-border(\n \"form-error\",\n borders.$thick-border-width,\n solid,\n $direction\n );\n}\n\n@mixin thick-keyline-brand($direction, $brandColour) {\n border-#{$direction}: borders.$thick-border-width #{brand-colour($brandColour)}\n solid;\n}\n\n// Use light theme colours (except for \"form-error\")\n%light {\n @include colour-css-vars(\"form-error\");\n\n @media (prefers-contrast: more) {\n @include colour-css-vars-high-contrast(\"form-error\");\n }\n}\n\n@mixin light {\n @extend %light;\n}\n\n// Remove accent and contrast values (except for \"form-error\")\n%plain {\n @include colour-css-vars(\"form-error\");\n\n @media (prefers-contrast: more) {\n @include colour-css-vars-high-contrast(\"form-error\");\n }\n\n .tna-template--system-theme & {\n @media (prefers-color-scheme: dark) {\n @include colour-css-vars-dark(\"form-error\");\n }\n\n @media (prefers-contrast: more) and (prefers-color-scheme: dark) {\n @include colour-css-vars-high-contrast-dark(\"form-error\");\n }\n }\n\n .tna-template--dark-theme & {\n @include colour-css-vars-dark(\"form-error\");\n\n @media (prefers-contrast: more) {\n @include colour-css-vars-high-contrast-dark(\"form-error\");\n }\n }\n\n @include colour-background(\"background\");\n}\n\n@mixin plain {\n @extend %plain;\n}\n\n%contrast {\n --background: var(--contrast-background);\n --font-base: var(--contrast-font-base);\n --font-dark: var(--contrast-font-dark);\n --font-light: var(--contrast-font-light);\n --icon-light: var(--contrast-icon-light);\n --link: var(--contrast-link);\n --link-visited: var(--contrast-link-visited);\n --keyline: var(--contrast-keyline);\n --keyline-dark: var(--contrast-keyline-dark);\n --button-text: var(--contrast-button-text);\n --button-background: var(--contrast-button-background);\n --button-hover-text: var(--contrast-button-hover-text);\n --button-hover-background: var(--contrast-button-hover-background);\n\n @include colour-background(\"background\");\n\n @include colour-font(\"font-base\");\n}\n\n@mixin contrast {\n @extend %contrast;\n}\n\n%contrast-on-mobile {\n @include media.on-mobile {\n --background: var(--contrast-background);\n --font-base: var(--contrast-font-base);\n --font-dark: var(--contrast-font-dark);\n --font-light: var(--contrast-font-light);\n --icon-light: var(--contrast-icon-light);\n --link: var(--contrast-link);\n --link-visited: var(--contrast-link-visited);\n --keyline: var(--contrast-keyline);\n --keyline-dark: var(--contrast-keyline-dark);\n --button-text: var(--contrast-button-text);\n --button-background: var(--contrast-button-background);\n --button-hover-text: var(--contrast-button-hover-text);\n --button-hover-background: var(--contrast-button-hover-background);\n\n @include colour-background(\"background\");\n\n @include colour-font(\"font-base\");\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\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\n .tna-template--system-theme & {\n @media (prefers-color-scheme: dark) {\n --link: #{map.get(colour.$colour-palette-default, \"link\")};\n --link-visited: #{map.get(colour.$colour-palette-default, \"link-visited\")};\n }\n }\n\n .tna-template--dark-theme & {\n --link: #{map.get(colour.$colour-palette-default, \"link\")};\n --link-visited: #{map.get(colour.$colour-palette-default, \"link-visited\")};\n }\n\n @include colour-background(\"background\");\n @include colour-font(\"font-base\");\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-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-accent-text: #{colour.brand-colour(\"white\")} !important;\n --button-accent-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-accent-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 --button-accent-text: #{colour.brand-colour(\"black\")} !important;\n --button-accent-background: #{colour.brand-colour(\"grey\")} !important;\n}\n\n@mixin black-accent {\n @extend %black-accent;\n @extend %accent-lighter-text;\n}\n\n%pink-accent {\n --accent-background: #{colour.brand-colour(\"maroon\")} !important;\n --accent-background-light: #{colour.brand-colour(\"pastel-pink\")} !important;\n --button-accent-background: #{colour.brand-colour(\"maroon\")} !important;\n}\n\n@mixin pink-accent {\n @extend %pink-accent;\n @extend %accent-lighter-text;\n}\n\n%orange-accent {\n --accent-background: #{colour.brand-colour(\"chestnut\")} !important;\n --accent-background-light: #{colour.brand-colour(\"pastel-orange\")} !important;\n --button-accent-background: #{colour.brand-colour(\"chestnut\")} !important;\n}\n\n@mixin orange-accent {\n @extend %orange-accent;\n @extend %accent-lighter-text;\n}\n\n%green-accent {\n --accent-background: #{colour.brand-colour(\"forest\")} !important;\n --accent-background-light: #{colour.brand-colour(\"pastel-green\")} !important;\n --button-accent-background: #{colour.brand-colour(\"forest\")} !important;\n}\n\n@mixin green-accent {\n @extend %green-accent;\n @extend %accent-lighter-text;\n}\n\n%blue-accent {\n --accent-background: #{colour.brand-colour(\"navy\")} !important;\n --accent-background-light: #{colour.brand-colour(\"pastel-blue\")} !important;\n --button-accent-background: #{colour.brand-colour(\"navy\")} !important;\n}\n\n@mixin blue-accent {\n @extend %blue-accent;\n @extend %accent-lighter-text;\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","@use \"../../tools/colour\";\n@use \"../../tools/media\";\n@use \"../../tools/spacing\";\n\n.tna-gallery {\n @include colour.contrast;\n\n padding-bottom: spacing.space(2);\n\n &__header {\n padding-top: spacing.space(2);\n }\n\n &__items {\n width: 100%;\n\n display: flex;\n flex-direction: column;\n align-items: center;\n gap: spacing.space(3);\n\n &:focus {\n outline: none !important;\n }\n }\n\n &__item {\n margin: 0;\n\n &-index {\n padding-bottom: spacing.space(1);\n\n text-align: center;\n }\n\n &-figure {\n }\n\n &-image {\n height: auto;\n margin: 0 auto;\n }\n\n &-description {\n margin-top: spacing.space(1);\n padding: spacing.space(0.5) 0 spacing.space(0.5) spacing.space(1);\n\n @include colour.colour-border(\"keyline-dark\", 4px, solid, left);\n }\n\n &-tabs {\n @include media.on-smaller-than-large {\n padding-top: spacing.space(2);\n }\n }\n }\n\n &__item + &__item {\n @include colour.colour-border(\"keyline\", 1px, solid, top);\n }\n\n &__toggle-wrapper {\n text-align: center;\n }\n\n &__toggle {\n margin-top: spacing.space(2);\n }\n\n &--touchable {\n .tna-gallery__items {\n flex-flow: row nowrap;\n\n gap: spacing.space(6);\n\n overflow-x: scroll;\n scroll-snap-type: x mandatory;\n }\n\n .tna-gallery__item {\n width: 100%;\n\n scroll-snap-align: center;\n flex: none;\n }\n\n &.tna-gallery--collapsed {\n .tna-gallery__items {\n overflow: auto;\n }\n }\n }\n\n &--collapsed &__item + &__item,\n &--collapsed &__item:first-child &__item-description,\n &--collapsed &__item:first-child &__item-tabs {\n display: none;\n }\n\n &--collapsed &__item-figure {\n width: 100%;\n }\n\n @include colour.on-high-contrast {\n &__items {\n }\n\n &__item {\n &-index {\n }\n\n &-description {\n }\n }\n }\n}\n","@use \"sass:math\";\n@use \"../variables/media\";\n@use \"../variables/typography\";\n\n$smallest-large-device-em: #{math.div(\n media.$largest-medium-device-px + 1,\n typography.$relative-1rem-px\n )}em;\n$largest-medium-device-em: #{math.div(\n media.$largest-medium-device-px,\n typography.$relative-1rem-px\n )}em;\n$smallest-medium-device-em: #{math.div(\n media.$largest-small-device-px + 1,\n typography.$relative-1rem-px\n )}em;\n$largest-small-device-em: #{math.div(\n media.$largest-small-device-px,\n typography.$relative-1rem-px\n )}em;\n$smallest-small-device-em: #{math.div(\n media.$largest-tiny-device-px + 1,\n typography.$relative-1rem-px\n )}em;\n$largest-tiny-device-em: #{math.div(\n media.$largest-tiny-device-px,\n typography.$relative-1rem-px\n )}em;\n\n$media-large: \"(min-width: #{$smallest-large-device-em})\";\n$media-lt-large: \"(max-width: #{$largest-medium-device-em})\";\n$media-medium: \"(min-width: #{$smallest-medium-device-em}) and (max-width: #{$largest-medium-device-em})\";\n$media-gt-mobile: \"(min-width: #{$smallest-medium-device-em})\";\n$media-mobile: \"(max-width: #{$largest-small-device-em})\";\n$media-small: \"(min-width: #{$smallest-small-device-em}) and (max-width: #{$largest-small-device-em})\";\n$media-gt-tiny: \"(min-width: #{$smallest-small-device-em})\";\n$media-tiny: \"(max-width: #{$largest-tiny-device-em})\";\n\n// https://nationalarchives.github.io/design-system/styles/media/#media-queries\n@mixin on-large() {\n @media #{$media-large} {\n @content;\n }\n}\n\n@mixin on-medium() {\n @media #{$media-medium} {\n @content;\n }\n}\n\n@mixin on-small() {\n @media #{$media-small} {\n @content;\n }\n}\n\n@mixin on-tiny() {\n @media #{$media-tiny} {\n @content;\n }\n}\n\n@mixin on-larger-than-mobile() {\n @media #{$media-gt-mobile} {\n @content;\n }\n}\n\n@mixin on-larger-than-tiny() {\n @media #{$media-gt-tiny} {\n @content;\n }\n}\n\n@mixin on-smaller-than-large() {\n @media #{$media-lt-large} {\n @content;\n }\n}\n\n@mixin on-mobile() {\n @media #{$media-mobile} {\n @content;\n }\n}\n\n@mixin on-print() {\n @media print {\n @content;\n }\n}\n"]}
1	+ {"version":3,"sourceRoot":"","sources":["../../../../src/nationalarchives/tools/_colour.scss","../../../../src/nationalarchives/components/gallery/gallery.scss","../../../../src/nationalarchives/tools/_media.scss"],"names":[],"mappings":"AAiMA,aACE,yCACA,uCACA,uCACA,yCACA,yCACA,6BACA,6CACA,mCACA,6CACA,2CACA,uDACA,uDACA,mEAxJA,4CAJA,gCC9CF,aAGE,oBAEA,qBACE,iBAGF,oBACE,WAEA,aACA,sBACA,mBACA,SAEA,0BACE,wBAIJ,mBACE,SAEA,yBACE,oBAEA,kBAMF,yBACE,YACA,cAGF,+BACE,gBACA,uBDyBA,mDEMJ,wBD1BE,wBAEI,kBAKN,sCDaI,wDCTJ,6BACE,kBAGF,qBACE,gBAIA,4CACE,qBAEA,SAEA,kBACA,6BAGF,2CACE,WAEA,yBACA,UAIA,mEACE,cAKN,mOAGE,aAGF,kDACE","file":"gallery.css","sourcesContent":["@use \"sass:list\";\n@use \"sass:map\";\n@use \"../variables/borders\";\n@use \"../variables/colour\";\n@use \"../tools/media\";\n\n@function brand-colour($colour, $opacity: 1) {\n @return colour.brand-colour($colour, $opacity);\n}\n\n@mixin colour-css-vars($excludes...) {\n @each $name, $value in colour.$colour-palette-default {\n @if not list.index($excludes, $name) {\n --#{$name}: #{$value};\n }\n }\n}\n\n@mixin colour-css-vars-dark($excludes...) {\n @each $name, $value in colour.$colour-palette-dark {\n @if not list.index($excludes, $name) {\n --#{$name}: #{$value};\n }\n }\n}\n\n@mixin colour-css-vars-high-contrast($excludes...) {\n @each $name, $value in colour.$colour-palette-high-contrast {\n @if not list.index($excludes, $name) {\n --#{$name}: #{$value};\n }\n }\n}\n\n@mixin colour-css-vars-high-contrast-dark($excludes...) {\n @each $name, $value in colour.$colour-palette-high-contrast-dark {\n @if not list.index($excludes, $name) {\n --#{$name}: #{$value};\n }\n }\n}\n\n@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 @include colour-border(\n \"keyline\",\n borders.$thick-border-width,\n solid,\n $direction\n );\n}\n\n@mixin thick-keyline-dark($direction) {\n @include colour-border(\n \"keyline-dark\",\n borders.$thick-border-width,\n solid,\n $direction\n );\n}\n\n@mixin thick-keyline-accent($direction) {\n @include colour-border(\n \"accent-background\",\n borders.$thick-border-width,\n solid,\n $direction\n );\n}\n\n@mixin thick-keyline-error($direction) {\n @include colour-border(\n \"form-error\",\n borders.$thick-border-width,\n solid,\n $direction\n );\n}\n\n@mixin thick-keyline-brand($direction, $brandColour) {\n border-#{$direction}: borders.$thick-border-width #{brand-colour($brandColour)}\n solid;\n}\n\n// Use light theme colours (except for \"form-error\")\n%light {\n @include colour-css-vars(\"form-error\");\n\n @media (prefers-contrast: more) {\n @include colour-css-vars-high-contrast(\"form-error\");\n }\n}\n\n@mixin light {\n @extend %light;\n}\n\n// Remove accent and contrast values (except for \"form-error\")\n%plain {\n @include colour-css-vars(\"form-error\");\n\n @media (prefers-contrast: more) {\n @include colour-css-vars-high-contrast(\"form-error\");\n }\n\n .tna-template--system-theme & {\n @media (prefers-color-scheme: dark) {\n @include colour-css-vars-dark(\"form-error\");\n }\n\n @media (prefers-contrast: more) and (prefers-color-scheme: dark) {\n @include colour-css-vars-high-contrast-dark(\"form-error\");\n }\n }\n\n .tna-template--dark-theme & {\n @include colour-css-vars-dark(\"form-error\");\n\n @media (prefers-contrast: more) {\n @include colour-css-vars-high-contrast-dark(\"form-error\");\n }\n }\n\n @include colour-background(\"background\");\n}\n\n@mixin plain {\n @extend %plain;\n}\n\n%contrast {\n --background: var(--contrast-background);\n --font-base: var(--contrast-font-base);\n --font-dark: var(--contrast-font-dark);\n --font-light: var(--contrast-font-light);\n --icon-light: var(--contrast-icon-light);\n --link: var(--contrast-link);\n --link-visited: var(--contrast-link-visited);\n --keyline: var(--contrast-keyline);\n --keyline-dark: var(--contrast-keyline-dark);\n --button-text: var(--contrast-button-text);\n --button-background: var(--contrast-button-background);\n --button-hover-text: var(--contrast-button-hover-text);\n --button-hover-background: var(--contrast-button-hover-background);\n\n @include colour-background(\"background\");\n\n @include colour-font(\"font-base\");\n}\n\n@mixin contrast {\n @extend %contrast;\n}\n\n%contrast-on-mobile {\n @include media.on-mobile {\n --background: var(--contrast-background);\n --font-base: var(--contrast-font-base);\n --font-dark: var(--contrast-font-dark);\n --font-light: var(--contrast-font-light);\n --icon-light: var(--contrast-icon-light);\n --link: var(--contrast-link);\n --link-visited: var(--contrast-link-visited);\n --keyline: var(--contrast-keyline);\n --keyline-dark: var(--contrast-keyline-dark);\n --button-text: var(--contrast-button-text);\n --button-background: var(--contrast-button-background);\n --button-hover-text: var(--contrast-button-hover-text);\n --button-hover-background: var(--contrast-button-hover-background);\n\n @include colour-background(\"background\");\n\n @include colour-font(\"font-base\");\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\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\n .tna-template--system-theme & {\n @media (prefers-color-scheme: dark) {\n --link: #{map.get(colour.$colour-palette-default, \"link\")};\n --link-visited: #{map.get(colour.$colour-palette-default, \"link-visited\")};\n }\n }\n\n .tna-template--dark-theme & {\n --link: #{map.get(colour.$colour-palette-default, \"link\")};\n --link-visited: #{map.get(colour.$colour-palette-default, \"link-visited\")};\n }\n\n @include colour-background(\"background\");\n @include colour-font(\"font-base\");\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-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-accent-text: #{colour.brand-colour(\"white\")} !important;\n --button-accent-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-accent-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 --button-accent-text: #{colour.brand-colour(\"black\")} !important;\n --button-accent-background: #{colour.brand-colour(\"grey\")} !important;\n}\n\n@mixin black-accent {\n @extend %black-accent;\n @extend %accent-lighter-text;\n}\n\n%pink-accent {\n --accent-background: #{colour.brand-colour(\"maroon\")} !important;\n --accent-background-light: #{colour.brand-colour(\"pastel-pink\")} !important;\n --button-accent-background: #{colour.brand-colour(\"maroon\")} !important;\n}\n\n@mixin pink-accent {\n @extend %pink-accent;\n @extend %accent-lighter-text;\n}\n\n%orange-accent {\n --accent-background: #{colour.brand-colour(\"chestnut\")} !important;\n --accent-background-light: #{colour.brand-colour(\"pastel-orange\")} !important;\n --button-accent-background: #{colour.brand-colour(\"chestnut\")} !important;\n}\n\n@mixin orange-accent {\n @extend %orange-accent;\n @extend %accent-lighter-text;\n}\n\n%green-accent {\n --accent-background: #{colour.brand-colour(\"forest\")} !important;\n --accent-background-light: #{colour.brand-colour(\"pastel-green\")} !important;\n --button-accent-background: #{colour.brand-colour(\"forest\")} !important;\n}\n\n@mixin green-accent {\n @extend %green-accent;\n @extend %accent-lighter-text;\n}\n\n%blue-accent {\n --accent-background: #{colour.brand-colour(\"navy\")} !important;\n --accent-background-light: #{colour.brand-colour(\"pastel-blue\")} !important;\n --button-accent-background: #{colour.brand-colour(\"navy\")} !important;\n}\n\n@mixin blue-accent {\n @extend %blue-accent;\n @extend %accent-lighter-text;\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","@use \"../../tools/colour\";\n@use \"../../tools/media\";\n@use \"../../tools/spacing\";\n\n.tna-gallery {\n @include colour.contrast;\n\n padding-bottom: spacing.space(2);\n\n &__header {\n padding-top: spacing.space(2);\n }\n\n &__items {\n width: 100%;\n\n display: flex;\n flex-direction: column;\n align-items: center;\n gap: spacing.space(3);\n\n &:focus {\n outline: none !important;\n }\n }\n\n &__item {\n margin: 0;\n\n &-index {\n padding-bottom: spacing.space(1);\n\n text-align: center;\n }\n\n &-figure {\n }\n\n &-image {\n height: auto;\n margin: 0 auto;\n }\n\n &-description {\n margin-top: spacing.space(1);\n padding: spacing.space(0.5) 0 spacing.space(0.5) spacing.space(1);\n\n @include colour.colour-border(\"keyline-dark\", 4px, solid, left);\n }\n\n &-tabs {\n @include media.on-smaller-than-large {\n padding-top: spacing.space(2);\n }\n }\n }\n\n &__item + &__item {\n @include colour.colour-border(\"keyline\", 1px, solid, top);\n }\n\n &__toggle-wrapper {\n text-align: center;\n }\n\n &__toggle {\n margin-top: spacing.space(2);\n }\n\n &--touchable {\n .tna-gallery__items {\n flex-flow: row nowrap;\n\n gap: spacing.space(6);\n\n overflow-x: scroll;\n scroll-snap-type: x mandatory;\n }\n\n .tna-gallery__item {\n width: 100%;\n\n scroll-snap-align: center;\n flex: none;\n }\n\n &.tna-gallery--collapsed {\n .tna-gallery__items {\n overflow: auto;\n }\n }\n }\n\n &--collapsed &__item + &__item,\n &--collapsed &__item:first-child &__item-description,\n &--collapsed &__item:first-child &__item-tabs {\n display: none;\n }\n\n &--collapsed &__item-figure {\n width: 100%;\n }\n\n @include colour.on-high-contrast {\n &__items {\n }\n\n &__item {\n &-index {\n }\n\n &-description {\n }\n }\n }\n}\n","@use \"sass:math\";\n@use \"../variables/media\";\n@use \"../variables/typography\";\n\n$smallest-large-device-em: #{math.div(\n media.$largest-medium-device-px + 1,\n typography.$relative-1rem-px\n )}em;\n$largest-medium-device-em: #{math.div(\n media.$largest-medium-device-px,\n typography.$relative-1rem-px\n )}em;\n$smallest-medium-device-em: #{math.div(\n media.$largest-small-device-px + 1,\n typography.$relative-1rem-px\n )}em;\n$largest-small-device-em: #{math.div(\n media.$largest-small-device-px,\n typography.$relative-1rem-px\n )}em;\n$smallest-small-device-em: #{math.div(\n media.$largest-tiny-device-px + 1,\n typography.$relative-1rem-px\n )}em;\n$largest-tiny-device-em: #{math.div(\n media.$largest-tiny-device-px,\n typography.$relative-1rem-px\n )}em;\n\n$media-large: \"(min-width: #{$smallest-large-device-em})\";\n$media-lt-large: \"(max-width: #{$largest-medium-device-em})\";\n$media-medium: \"(min-width: #{$smallest-medium-device-em}) and (max-width: #{$largest-medium-device-em})\";\n$media-gt-mobile: \"(min-width: #{$smallest-medium-device-em})\";\n$media-mobile: \"(max-width: #{$largest-small-device-em})\";\n$media-small: \"(min-width: #{$smallest-small-device-em}) and (max-width: #{$largest-small-device-em})\";\n$media-gt-tiny: \"(min-width: #{$smallest-small-device-em})\";\n$media-tiny: \"(max-width: #{$largest-tiny-device-em})\";\n\n// https://nationalarchives.github.io/design-system/styles/media/#media-queries\n@mixin on-large() {\n @media #{$media-large} {\n @content;\n }\n}\n\n@mixin on-medium() {\n @media #{$media-medium} {\n @content;\n }\n}\n\n@mixin on-small() {\n @media #{$media-small} {\n @content;\n }\n}\n\n@mixin on-tiny() {\n @media #{$media-tiny} {\n @content;\n }\n}\n\n@mixin on-larger-than-mobile() {\n @media #{$media-gt-mobile} {\n @content;\n }\n}\n\n@mixin on-larger-than-tiny() {\n @media #{$media-gt-tiny} {\n @content;\n }\n}\n\n@mixin on-smaller-than-large() {\n @media #{$media-lt-large} {\n @content;\n }\n}\n\n@mixin on-mobile() {\n @media #{$media-mobile} {\n @content;\n }\n}\n\n@mixin on-print() {\n @media print {\n @content;\n }\n}\n"]}

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":"AA0MA,mBACE,yCACA,uCACA,uCACA,yCACA,yCACA,6BACA,6CACA,mCACA,6CACA,2CACA,uDACA,uDACA,mEAvKA,4CALA,gCCpCF,mBACE,iBAGA,wEAMA,6CACE,mBAIA,mCADF,+CAEI,oBAIJ,yBACE,oBAGF,iCACE,eAEA,aAGF,yBACE,aACA,qBACA,SAEA,qBAEA,+BACE,qBDoDF,sDCjDE,mBAIJ,6BACE,cACA,eAEA,cAGF,mCACE,mBAEA,oBACA,yBC7BF,YCmBA,gDDlBA,YCqBoB,IDlDpB,kBD+DA,8CACE,aAGF,8BACE,WACA,cAEA,cD7BF,gDCiCE,2EAEE,WAEA,cAEA,cAEA,kBACA,QACA,OAEA,yBAGF,sCACE,MAGF,qCACE,SAIJ,sCACE,YACA,UAEA,gBAEA,cAEA,kBAEA,YAEA,gBAEA,6BACA,sBAEA,eAGE,4EACE,SAEA,oFACE,YAEA,0BAGF,mFACE,eAEA,yBASR,+BACE,YACA,eAEA,kBAEA,UACA,gBAEA,gBAGF,oCACE,mBAGF,yCACE,gBACA,eAEA,cACA,sBAEA,oBACA,qBCpKF,oBF8DI,4DC4GF,+CCvHF,0BACA,0BC/BsC,MF0JtC,mCACE,gBAEA,aACA,yBACA,SCpLF,oBDuLE,gBAMF,wCACE,aACA,mBACA,QAEA,qBAEA,qID/JF,yCCqKE,8CDrKF,gCEcA,0BACA,0BC/BsC,MF0LpC,4CACE,WAEA,qBAEA,iDACE,kBG7KN,kDHmLE,+BACE,gBAGF,yCC/NF,eDmOE,8EACE,WAGF,kFACE,OACA,QAGF,gEACE,oBAGF,gEACE,SAGF,wEACE,eACA,kBAGF,iDACE,WACA,YAGF,0EACE,4BAGF,sEACE,kBAGF,iOAGE,aG7LJ,wBHkME,yBACE,iBAGF,+EAEE,aACA,mBAGF,yBACE,SAGF,8CACE,aACA,mBAGF,4GAGE,YAGF,+BACE,aAEA,UAEA,sCD9OA,uGCoPF,oCACE,sBACA,uBAGF,yCACE,oBChTJ,YCoBwB,IFgStB,wFACE,mBAGF,6CACE,cAGF,6CACE,mBACA,iBAGF,mCACE,iBACA,oBAEA,4BG/RJ,kDHoSE,6BACE,WACA,YAGF,mCACE,oBAGF,+BACE,wBAEA,WAGF,yCACE,kBG9SJ,wBHmTE,6BACE,aACA,cAGF,mCACE,cAGF,+BACE,wBAEA,WAGF,yCACE,kBDuCJ,8BC7ZF,mBD6DM,2DCgUF,wCDzVF,uCAmXA,+BCvZF,mBD6DM,2DCgUF,wCDzVF","file":"global-header.css","sourcesContent":["@use \"sass:list\";\n@use \"sass:map\";\n@use \"../variables/borders\";\n@use \"../variables/colour\";\n@use \"../tools/media\";\n\n@function brand-colour($colour, $opacity: 1) {\n @return colour.brand-colour($colour, $opacity);\n}\n\n@mixin colour-css-vars($excludes...) {\n @each $name, $value in colour.$colour-palette-default {\n @if not list.index($excludes, $name) {\n --#{$name}: #{$value};\n }\n }\n}\n\n@mixin colour-css-vars-dark($excludes...) {\n @each $name, $value in colour.$colour-palette-dark {\n @if not list.index($excludes, $name) {\n --#{$name}: #{$value};\n }\n }\n}\n\n@mixin colour-css-vars-high-contrast($excludes...) {\n @each $name, $value in colour.$colour-palette-high-contrast {\n @if not list.index($excludes, $name) {\n --#{$name}: #{$value};\n }\n }\n}\n\n@mixin colour-css-vars-high-contrast-dark($excludes...) {\n @each $name, $value in colour.$colour-palette-high-contrast-dark {\n @if not list.index($excludes, $name) {\n --#{$name}: #{$value};\n }\n }\n}\n\n@mixin colour-font($colour, $important: false) {\n color: var(--#{$colour}, #{map.get(colour.$colour-palette-default, $colour)})\n if($important, !important, null);\n}\n\n@mixin colour-background($colour, $important: false) {\n background-color: var(\n --#{$colour},\n #{map.get(colour.$colour-palette-default, $colour)}\n )\n 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 var(--#{$colour}, #{map.get(colour.$colour-palette-default, $colour)})\n $style\n if($important, !important, null);\n } @else {\n border-#{$direction}-color: var(\n --#{$colour},\n #{map.get(colour.$colour-palette-default, $colour)}\n )\n if($important, !important, null);\n }\n } @else {\n @if $width != \"\" {\n border: $width\n var(--#{$colour}, #{map.get(colour.$colour-palette-default, $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\n var(--#{$colour}, #{map.get(colour.$colour-palette-default, $colour)})\n $style\n if($important, !important, null);\n } @else {\n outline-color: var(\n --#{$colour},\n #{map.get(colour.$colour-palette-default, $colour)}\n )\n if($important, !important, null);\n }\n}\n\n@mixin colour-fill($colour, $important: false) {\n fill: var(--#{$colour}, #{map.get(colour.$colour-palette-default, $colour)})\n if($important, !important, null);\n}\n\n@mixin thick-keyline($direction) {\n @include colour-border(\n \"keyline\",\n borders.$thick-border-width,\n solid,\n $direction\n );\n}\n\n@mixin thick-keyline-dark($direction) {\n @include colour-border(\n \"keyline-dark\",\n borders.$thick-border-width,\n solid,\n $direction\n );\n}\n\n@mixin thick-keyline-accent($direction) {\n @include colour-border(\n \"accent-background\",\n borders.$thick-border-width,\n solid,\n $direction\n );\n}\n\n@mixin thick-keyline-error($direction) {\n @include colour-border(\n \"form-error\",\n borders.$thick-border-width,\n solid,\n $direction\n );\n}\n\n@mixin thick-keyline-brand($direction, $brandColour) {\n border-#{$direction}: borders.$thick-border-width #{brand-colour($brandColour)}\n solid;\n}\n\n// Use light theme colours (except for \"form-error\")\n%light {\n @include colour-css-vars(\"form-error\");\n\n @media (prefers-contrast: more) {\n @include colour-css-vars-high-contrast(\"form-error\");\n }\n}\n\n@mixin light {\n @extend %light;\n}\n\n// Remove accent and contrast values (except for \"form-error\")\n%plain {\n @include colour-css-vars(\"form-error\");\n\n @media (prefers-contrast: more) {\n @include colour-css-vars-high-contrast(\"form-error\");\n }\n\n .tna-template--system-theme & {\n @media (prefers-color-scheme: dark) {\n @include colour-css-vars-dark(\"form-error\");\n }\n\n @media (prefers-contrast: more) and (prefers-color-scheme: dark) {\n @include colour-css-vars-high-contrast-dark(\"form-error\");\n }\n }\n\n .tna-template--dark-theme & {\n @include colour-css-vars-dark(\"form-error\");\n\n @media (prefers-contrast: more) {\n @include colour-css-vars-high-contrast-dark(\"form-error\");\n }\n }\n\n @include colour-background(\"background\");\n}\n\n@mixin plain {\n @extend %plain;\n}\n\n%contrast {\n --background: var(--contrast-background);\n --font-base: var(--contrast-font-base);\n --font-dark: var(--contrast-font-dark);\n --font-light: var(--contrast-font-light);\n --icon-light: var(--contrast-icon-light);\n --link: var(--contrast-link);\n --link-visited: var(--contrast-link-visited);\n --keyline: var(--contrast-keyline);\n --keyline-dark: var(--contrast-keyline-dark);\n --button-text: var(--contrast-button-text);\n --button-background: var(--contrast-button-background);\n --button-hover-text: var(--contrast-button-hover-text);\n --button-hover-background: var(--contrast-button-hover-background);\n\n @include colour-background(\"background\");\n\n @include colour-font(\"font-base\");\n}\n\n@mixin contrast {\n @extend %contrast;\n}\n\n%contrast-on-mobile {\n @include media.on-mobile {\n --background: var(--contrast-background);\n --font-base: var(--contrast-font-base);\n --font-dark: var(--contrast-font-dark);\n --font-light: var(--contrast-font-light);\n --icon-light: var(--contrast-icon-light);\n --link: var(--contrast-link);\n --link-visited: var(--contrast-link-visited);\n --keyline: var(--contrast-keyline);\n --keyline-dark: var(--contrast-keyline-dark);\n --button-text: var(--contrast-button-text);\n --button-background: var(--contrast-button-background);\n --button-hover-text: var(--contrast-button-hover-text);\n --button-hover-background: var(--contrast-button-hover-background);\n\n @include colour-background(\"background\");\n\n @include colour-font(\"font-base\");\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\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\n .tna-template--system-theme & {\n @media (prefers-color-scheme: dark) {\n --link: #{map.get(colour.$colour-palette-default, \"link\")};\n --link-visited: #{map.get(colour.$colour-palette-default, \"link-visited\")};\n }\n }\n\n .tna-template--dark-theme & {\n --link: #{map.get(colour.$colour-palette-default, \"link\")};\n --link-visited: #{map.get(colour.$colour-palette-default, \"link-visited\")};\n }\n\n @include colour-background(\"background\");\n @include colour-font(\"font-base\");\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-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-accent-text: #{colour.brand-colour(\"white\")} !important;\n --button-accent-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-accent-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 --button-accent-text: #{colour.brand-colour(\"black\")} !important;\n --button-accent-background: #{colour.brand-colour(\"grey\")} !important;\n}\n\n@mixin black-accent {\n @extend %black-accent;\n @extend %accent-lighter-text;\n}\n\n%pink-accent {\n --accent-background: #{colour.brand-colour(\"maroon\")} !important;\n --accent-background-light: #{colour.brand-colour(\"pastel-pink\")} !important;\n --button-accent-background: #{colour.brand-colour(\"maroon\")} !important;\n}\n\n@mixin pink-accent {\n @extend %pink-accent;\n @extend %accent-lighter-text;\n}\n\n%orange-accent {\n --accent-background: #{colour.brand-colour(\"chestnut\")} !important;\n --accent-background-light: #{colour.brand-colour(\"pastel-orange\")} !important;\n --button-accent-background: #{colour.brand-colour(\"chestnut\")} !important;\n}\n\n@mixin orange-accent {\n @extend %orange-accent;\n @extend %accent-lighter-text;\n}\n\n%green-accent {\n --accent-background: #{colour.brand-colour(\"forest\")} !important;\n --accent-background-light: #{colour.brand-colour(\"pastel-green\")} !important;\n --button-accent-background: #{colour.brand-colour(\"forest\")} !important;\n}\n\n@mixin green-accent {\n @extend %green-accent;\n @extend %accent-lighter-text;\n}\n\n%blue-accent {\n --accent-background: #{colour.brand-colour(\"navy\")} !important;\n --accent-background-light: #{colour.brand-colour(\"pastel-blue\")} !important;\n --button-accent-background: #{colour.brand-colour(\"navy\")} !important;\n}\n\n@mixin blue-accent {\n @extend %blue-accent;\n @extend %accent-lighter-text;\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","@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 .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 &:hover {\n text-decoration: none;\n\n @include colour.colour-outline(\"font-dark\", 0.3125rem, solid);\n outline-offset: 1px;\n }\n }\n\n .tna-logo {\n width: 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.relative-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: block;\n\n @include colour.colour-background(\"font-dark\");\n\n &::before,\n &::after {\n content: \"\";\n\n height: 0.25rem;\n\n display: block;\n\n position: absolute;\n right: 0;\n left: 0;\n\n background-color: inherit;\n }\n\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: block;\n\n position: relative;\n\n font-size: 0;\n\n background: none;\n\n border: 0 transparent solid;\n border-width: 0.25rem 0;\n\n cursor: pointer;\n\n &--opened {\n .tna-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.relative-font-size(17);\n\n @include colour.colour-border(\"keyline\", 0.5px, solid, bottom);\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.relative-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.relative-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(1);\n padding-bottom: spacing.space(1);\n\n justify-content: flex-start;\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 {\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 &__top-navigation-link {\n @include colour.colour-font(\"link\", true);\n }\n }\n}\n","@use \"sass:math\";\n@use \"../variables/typography\";\n@use \"colour\";\n@use \"media\";\n\n@mixin relative-font-size($font-size-px) {\n font-size: #{math.div($font-size-px, typography.$relative-1rem-px)}rem;\n}\n\n@mixin main-font-weight {\n font-weight: typography.$main-font-weight;\n}\n\n@mixin main-font-weight-medium {\n font-weight: typography.$main-font-weight-medium;\n}\n\n@mixin main-font-weight-bold {\n font-weight: typography.$main-font-weight-bold;\n}\n\n@mixin main-font($bold: false) {\n font-family: typography.$main-font-family;\n 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 relative-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 relative-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 relative-font-size($font-size-medium);\n }\n\n @if $small-and-tiny-identical != true {\n @include media.on-small {\n @include relative-font-size($font-size-small);\n }\n\n @include media.on-tiny {\n @include relative-font-size($font-size-tiny);\n }\n } @else {\n @include media.on-mobile {\n @include relative-font-size($font-size-small);\n }\n }\n } @else {\n @include media.on-smaller-than-large {\n @include relative-font-size($font-size-medium);\n }\n }\n }\n}\n","/\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":"AAiMA,mBACE,yCACA,uCACA,uCACA,yCACA,yCACA,6BACA,6CACA,mCACA,6CACA,2CACA,uDACA,uDACA,mEAxJA,4CAJA,gCC3CF,mBACE,iBAGA,wEAMA,6CACE,mBAIA,mCADF,+CAEI,oBAIJ,yBACE,oBAGF,iCACE,eAEA,aAGF,yBACE,aACA,qBACA,SAEA,qBAEA,+BACE,qBDmDF,sDChDE,mBAIJ,6BACE,cACA,eAEA,cAGF,mCACE,mBAEA,oBACA,yBC7BF,YCmBA,gDDlBA,YCqBoB,IDlDpB,kBD+DA,8CACE,aAGF,8BACE,WACA,cAEA,cDvBF,gDC2BE,2EAEE,WAEA,cAEA,cAEA,kBACA,QACA,OAEA,yBAGF,sCACE,MAGF,qCACE,SAIJ,sCACE,YACA,UAEA,gBAEA,cAEA,kBAEA,YAEA,gBAEA,6BACA,sBAEA,eAGE,4EACE,SAEA,oFACE,YAEA,0BAGF,mFACE,eAEA,yBASR,+BACE,YACA,eAEA,kBAEA,UACA,gBAEA,gBAGF,oCACE,mBAGF,yCACE,gBACA,eAEA,cACA,sBAEA,oBACA,qBCpKF,oBFgEI,4DC0GF,+CCvHF,0BACA,0BC/BsC,MF0JtC,mCACE,gBAEA,aACA,yBACA,SCpLF,oBDuLE,gBAMF,wCACE,aACA,mBACA,QAEA,qBAEA,qIDxJF,yCC8JE,8CD9JF,gCEOA,0BACA,0BC/BsC,MF0LpC,4CACE,WAEA,qBAEA,iDACE,kBG7KN,kDHmLE,+BACE,gBAGF,yCC/NF,eDmOE,8EACE,WAGF,kFACE,OACA,QAGF,gEACE,oBAGF,gEACE,SAGF,wEACE,eACA,kBAGF,iDACE,WACA,YAGF,0EACE,4BAGF,sEACE,kBAGF,iOAGE,aG7LJ,wBHkME,yBACE,iBAGF,+EAEE,aACA,mBAGF,yBACE,SAGF,8CACE,aACA,mBAGF,4GAGE,YAGF,+BACE,aAEA,UAEA,sCD5OA,uGCkPF,oCACE,sBACA,uBAGF,yCACE,oBChTJ,YCoBwB,IFgStB,wFACE,mBAGF,6CACE,cAGF,6CACE,mBACA,iBAGF,mCACE,iBACA,oBAEA,4BG/RJ,kDHoSE,6BACE,WACA,YAGF,mCACE,oBAGF,+BACE,wBAEA,WAGF,yCACE,kBG9SJ,wBHmTE,6BACE,aACA,cAGF,mCACE,cAGF,+BACE,wBAEA,WAGF,yCACE,kBD8BJ,8BCpZF,mBD+DM,2DC8TF,wCDlVF,uCAmWA,+BC9YF,mBD+DM,2DC8TF,wCDlVF","file":"global-header.css","sourcesContent":["@use \"sass:list\";\n@use \"sass:map\";\n@use \"../variables/borders\";\n@use \"../variables/colour\";\n@use \"../tools/media\";\n\n@function brand-colour($colour, $opacity: 1) {\n @return colour.brand-colour($colour, $opacity);\n}\n\n@mixin colour-css-vars($excludes...) {\n @each $name, $value in colour.$colour-palette-default {\n @if not list.index($excludes, $name) {\n --#{$name}: #{$value};\n }\n }\n}\n\n@mixin colour-css-vars-dark($excludes...) {\n @each $name, $value in colour.$colour-palette-dark {\n @if not list.index($excludes, $name) {\n --#{$name}: #{$value};\n }\n }\n}\n\n@mixin colour-css-vars-high-contrast($excludes...) {\n @each $name, $value in colour.$colour-palette-high-contrast {\n @if not list.index($excludes, $name) {\n --#{$name}: #{$value};\n }\n }\n}\n\n@mixin colour-css-vars-high-contrast-dark($excludes...) {\n @each $name, $value in colour.$colour-palette-high-contrast-dark {\n @if not list.index($excludes, $name) {\n --#{$name}: #{$value};\n }\n }\n}\n\n@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 @include colour-border(\n \"keyline\",\n borders.$thick-border-width,\n solid,\n $direction\n );\n}\n\n@mixin thick-keyline-dark($direction) {\n @include colour-border(\n \"keyline-dark\",\n borders.$thick-border-width,\n solid,\n $direction\n );\n}\n\n@mixin thick-keyline-accent($direction) {\n @include colour-border(\n \"accent-background\",\n borders.$thick-border-width,\n solid,\n $direction\n );\n}\n\n@mixin thick-keyline-error($direction) {\n @include colour-border(\n \"form-error\",\n borders.$thick-border-width,\n solid,\n $direction\n );\n}\n\n@mixin thick-keyline-brand($direction, $brandColour) {\n border-#{$direction}: borders.$thick-border-width #{brand-colour($brandColour)}\n solid;\n}\n\n// Use light theme colours (except for \"form-error\")\n%light {\n @include colour-css-vars(\"form-error\");\n\n @media (prefers-contrast: more) {\n @include colour-css-vars-high-contrast(\"form-error\");\n }\n}\n\n@mixin light {\n @extend %light;\n}\n\n// Remove accent and contrast values (except for \"form-error\")\n%plain {\n @include colour-css-vars(\"form-error\");\n\n @media (prefers-contrast: more) {\n @include colour-css-vars-high-contrast(\"form-error\");\n }\n\n .tna-template--system-theme & {\n @media (prefers-color-scheme: dark) {\n @include colour-css-vars-dark(\"form-error\");\n }\n\n @media (prefers-contrast: more) and (prefers-color-scheme: dark) {\n @include colour-css-vars-high-contrast-dark(\"form-error\");\n }\n }\n\n .tna-template--dark-theme & {\n @include colour-css-vars-dark(\"form-error\");\n\n @media (prefers-contrast: more) {\n @include colour-css-vars-high-contrast-dark(\"form-error\");\n }\n }\n\n @include colour-background(\"background\");\n}\n\n@mixin plain {\n @extend %plain;\n}\n\n%contrast {\n --background: var(--contrast-background);\n --font-base: var(--contrast-font-base);\n --font-dark: var(--contrast-font-dark);\n --font-light: var(--contrast-font-light);\n --icon-light: var(--contrast-icon-light);\n --link: var(--contrast-link);\n --link-visited: var(--contrast-link-visited);\n --keyline: var(--contrast-keyline);\n --keyline-dark: var(--contrast-keyline-dark);\n --button-text: var(--contrast-button-text);\n --button-background: var(--contrast-button-background);\n --button-hover-text: var(--contrast-button-hover-text);\n --button-hover-background: var(--contrast-button-hover-background);\n\n @include colour-background(\"background\");\n\n @include colour-font(\"font-base\");\n}\n\n@mixin contrast {\n @extend %contrast;\n}\n\n%contrast-on-mobile {\n @include media.on-mobile {\n --background: var(--contrast-background);\n --font-base: var(--contrast-font-base);\n --font-dark: var(--contrast-font-dark);\n --font-light: var(--contrast-font-light);\n --icon-light: var(--contrast-icon-light);\n --link: var(--contrast-link);\n --link-visited: var(--contrast-link-visited);\n --keyline: var(--contrast-keyline);\n --keyline-dark: var(--contrast-keyline-dark);\n --button-text: var(--contrast-button-text);\n --button-background: var(--contrast-button-background);\n --button-hover-text: var(--contrast-button-hover-text);\n --button-hover-background: var(--contrast-button-hover-background);\n\n @include colour-background(\"background\");\n\n @include colour-font(\"font-base\");\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\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\n .tna-template--system-theme & {\n @media (prefers-color-scheme: dark) {\n --link: #{map.get(colour.$colour-palette-default, \"link\")};\n --link-visited: #{map.get(colour.$colour-palette-default, \"link-visited\")};\n }\n }\n\n .tna-template--dark-theme & {\n --link: #{map.get(colour.$colour-palette-default, \"link\")};\n --link-visited: #{map.get(colour.$colour-palette-default, \"link-visited\")};\n }\n\n @include colour-background(\"background\");\n @include colour-font(\"font-base\");\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-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-accent-text: #{colour.brand-colour(\"white\")} !important;\n --button-accent-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-accent-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 --button-accent-text: #{colour.brand-colour(\"black\")} !important;\n --button-accent-background: #{colour.brand-colour(\"grey\")} !important;\n}\n\n@mixin black-accent {\n @extend %black-accent;\n @extend %accent-lighter-text;\n}\n\n%pink-accent {\n --accent-background: #{colour.brand-colour(\"maroon\")} !important;\n --accent-background-light: #{colour.brand-colour(\"pastel-pink\")} !important;\n --button-accent-background: #{colour.brand-colour(\"maroon\")} !important;\n}\n\n@mixin pink-accent {\n @extend %pink-accent;\n @extend %accent-lighter-text;\n}\n\n%orange-accent {\n --accent-background: #{colour.brand-colour(\"chestnut\")} !important;\n --accent-background-light: #{colour.brand-colour(\"pastel-orange\")} !important;\n --button-accent-background: #{colour.brand-colour(\"chestnut\")} !important;\n}\n\n@mixin orange-accent {\n @extend %orange-accent;\n @extend %accent-lighter-text;\n}\n\n%green-accent {\n --accent-background: #{colour.brand-colour(\"forest\")} !important;\n --accent-background-light: #{colour.brand-colour(\"pastel-green\")} !important;\n --button-accent-background: #{colour.brand-colour(\"forest\")} !important;\n}\n\n@mixin green-accent {\n @extend %green-accent;\n @extend %accent-lighter-text;\n}\n\n%blue-accent {\n --accent-background: #{colour.brand-colour(\"navy\")} !important;\n --accent-background-light: #{colour.brand-colour(\"pastel-blue\")} !important;\n --button-accent-background: #{colour.brand-colour(\"navy\")} !important;\n}\n\n@mixin blue-accent {\n @extend %blue-accent;\n @extend %accent-lighter-text;\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","@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 .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 &:hover {\n text-decoration: none;\n\n @include colour.colour-outline(\"font-dark\", 0.3125rem, solid);\n outline-offset: 1px;\n }\n }\n\n .tna-logo {\n width: 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.relative-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: block;\n\n @include colour.colour-background(\"font-dark\");\n\n &::before,\n &::after {\n content: \"\";\n\n height: 0.25rem;\n\n display: block;\n\n position: absolute;\n right: 0;\n left: 0;\n\n background-color: inherit;\n }\n\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: block;\n\n position: relative;\n\n font-size: 0;\n\n background: none;\n\n border: 0 transparent solid;\n border-width: 0.25rem 0;\n\n cursor: pointer;\n\n &--opened {\n .tna-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.relative-font-size(17);\n\n @include colour.colour-border(\"keyline\", 0.5px, solid, bottom);\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.relative-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.relative-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(1);\n padding-bottom: spacing.space(1);\n\n justify-content: flex-start;\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 {\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 &__top-navigation-link {\n @include colour.colour-font(\"link\", true);\n }\n }\n}\n","@use \"sass:math\";\n@use \"../variables/typography\";\n@use \"colour\";\n@use \"media\";\n\n@mixin relative-font-size($font-size-px) {\n font-size: #{math.div($font-size-px, typography.$relative-1rem-px)}rem;\n}\n\n@mixin main-font-weight {\n font-weight: typography.$main-font-weight;\n}\n\n@mixin main-font-weight-medium {\n font-weight: typography.$main-font-weight-medium;\n}\n\n@mixin main-font-weight-bold {\n font-weight: typography.$main-font-weight-bold;\n}\n\n@mixin main-font($bold: false) {\n font-family: typography.$main-font-family;\n 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 relative-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 relative-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 relative-font-size($font-size-medium);\n }\n\n @if $small-and-tiny-identical != true {\n @include media.on-small {\n @include relative-font-size($font-size-small);\n }\n\n @include media.on-tiny {\n @include relative-font-size($font-size-tiny);\n }\n } @else {\n @include media.on-mobile {\n @include relative-font-size($font-size-small);\n }\n }\n } @else {\n @include media.on-smaller-than-large {\n @include relative-font-size($font-size-medium);\n }\n }\n }\n}\n","/\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.stories.js CHANGED Viewed

@@ -73,7 +73,7 @@ Standard.args = {
       href: "https://www.nationalarchives.gov.uk/about/visit-us/",
     },
     {
-      text: "What's on",
+      text: "What’s on",
       href: "https://www.nationalarchives.gov.uk/about/visit-us/whats-on/",
     },
     {
@@ -81,10 +81,13 @@ Standard.args = {
       href: "https://beta.nationalarchives.gov.uk/explore-the-collection/",
     },
     {
-      text: "Using the archive",
+      text: "Help using the archive",
       href: "https://www.nationalarchives.gov.uk/help-with-your-research/",
     },
-    { text: "Learn", href: "https://www.nationalarchives.gov.uk/education/" },
+    {
+      text: "Education",
+      href: "https://www.nationalarchives.gov.uk/education/",
+    },
     {
       text: "Professional guidance and services",
       href: "https://www.nationalarchives.gov.uk/professional-guidance-and-services/",
@@ -143,7 +146,7 @@ Medium.args = {
       href: "https://www.nationalarchives.gov.uk/about/visit-us/",
     },
     {
-      text: "What's on",
+      text: "What’s on",
       href: "https://www.nationalarchives.gov.uk/about/visit-us/whats-on/",
     },
     {
@@ -151,10 +154,13 @@ Medium.args = {
       href: "https://beta.nationalarchives.gov.uk/explore-the-collection/",
     },
     {
-      text: "Using the archive",
+      text: "Help using the archive",
       href: "https://www.nationalarchives.gov.uk/help-with-your-research/",
     },
-    { text: "Learn", href: "https://www.nationalarchives.gov.uk/education/" },
+    {
+      text: "Education",
+      href: "https://www.nationalarchives.gov.uk/education/",
+    },
     {
       text: "Professional guidance and services",
       href: "https://www.nationalarchives.gov.uk/professional-guidance-and-services/",
@@ -213,7 +219,7 @@ MediumCollapsed.args = {
       href: "https://www.nationalarchives.gov.uk/about/visit-us/",
     },
     {
-      text: "What's on",
+      text: "What’s on",
       href: "https://www.nationalarchives.gov.uk/about/visit-us/whats-on/",
     },
     {
@@ -221,10 +227,13 @@ MediumCollapsed.args = {
       href: "https://beta.nationalarchives.gov.uk/explore-the-collection/",
     },
     {
-      text: "Using the archive",
+      text: "Help using the archive",
       href: "https://www.nationalarchives.gov.uk/help-with-your-research/",
     },
-    { text: "Learn", href: "https://www.nationalarchives.gov.uk/education/" },
+    {
+      text: "Education",
+      href: "https://www.nationalarchives.gov.uk/education/",
+    },
     {
       text: "Professional guidance and services",
       href: "https://www.nationalarchives.gov.uk/professional-guidance-and-services/",
@@ -271,7 +280,7 @@ Mobile.args = {
       href: "https://www.nationalarchives.gov.uk/about/visit-us/",
     },
     {
-      text: "What's on",
+      text: "What’s on",
       href: "https://www.nationalarchives.gov.uk/about/visit-us/whats-on/",
     },
     {
@@ -279,10 +288,13 @@ Mobile.args = {
       href: "https://beta.nationalarchives.gov.uk/explore-the-collection/",
     },
     {
-      text: "Using the archive",
+      text: "Help using the archive",
       href: "https://www.nationalarchives.gov.uk/help-with-your-research/",
     },
-    { text: "Learn", href: "https://www.nationalarchives.gov.uk/education/" },
+    {
+      text: "Education",
+      href: "https://www.nationalarchives.gov.uk/education/",
+    },
     {
       text: "Professional guidance and services",
       href: "https://www.nationalarchives.gov.uk/professional-guidance-and-services/",

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

	@@ -1 +1 @@
1	- {"version":3,"sourceRoot":"","sources":["../../../../src/nationalarchives/tools/_colour.scss","../../../../src/nationalarchives/components/header/header.scss","../../../../src/nationalarchives/tools/_typography.scss","../../../../src/nationalarchives/variables/_typography.scss","../../../../src/nationalarchives/tools/_media.scss"],"names":[],"mappings":"AA0MA,8BACE,yCACA,uCACA,uCACA,yCACA,yCACA,6BACA,6CACA,mCACA,6CACA,2CACA,uDACA,uDACA,mEAvKA,4CALA,gCA6NF,oBACE,uCACA,qCACA,qCACA,uCACA,uCACA,2BACA,mCACA,iCACA,2CAjOA,4CALA,gCCpCF,YAGE,kBAEA,wEAMA,sCACE,mBAIA,mCADF,wCAEI,oBAIJ,kBACE,gBACA,mBAEA,iBAKF,uBACE,qBChCF,eDmCE,kFAGE,WAGF,6BACE,0BAGF,iCACE,gBAKF,oCACE,8BAIJ,kBACE,iBACA,oBAGF,uBACE,aACA,qBAEA,cACA,qBAEA,kFAGE,cAGF,yCACE,qBDgBF,sDCbE,mBAIJ,sBACE,WACA,YAEA,qBAEA,cAGF,4BACE,cAEA,qBAEA,iBCpEF,YCmBA,gDDlBA,YCqBoB,IDlDpB,kBDmGE,yBAGF,+BACE,aAEA,kBAGF,uBACE,WACA,cAEA,cDtEF,gDC0EE,6DAEE,WAEA,cAEA,cAEA,kBACA,QACA,OAEA,yBAGF,+BACE,MAGF,8BACE,SAIJ,sCACE,YACA,UAEA,gBAEA,cAEA,kBAEA,YAEA,gBAEA,6BACA,sBAEA,eAGE,qEACE,SAEA,6EACE,YAEA,0BAGF,4EACE,eAEA,yBAMR,wBACE,aACA,8BACA,8BACA,qBAEA,kBACA,UAGF,kCACE,SACA,eAEA,aACA,yBACA,aAEA,cAEA,gBCtMF,oBD2MA,iCACE,cAGF,sCACE,aACA,mBAEA,qBAEA,+HDhLF,yCCwLI,8SDxLJ,gCEcA,0BACA,0BC/BsC,MFgNpC,gDACE,iBAIJ,8BACE,SACA,UAEA,aACA,iBACA,SAEA,mBAEA,gBAMF,kCACE,cAEA,qBAEA,kBAEA,cACA,qBC1PF,YCoBwB,IF0OtB,yCACE,WAEA,SAEA,kBACA,QACA,SACA,ODpOJ,gDCyOE,mHAGE,cAME,4GD9NF,kDItBJ,kDHgQE,sBACE,WACA,YAGF,4BACE,sBGlOJ,wBHuOE,kBACE,iBACA,oBAIA,oCACE,gBACA,eAIJ,+BACE,cAEA,0CACE,eAIJ,wBACE,sBACA,oBAEA,mCACE,gBACA,eAGF,kDACE,aAEA,wDACE,aAKN,kCACE,iBAEA,2BD9RA,2DCmSF,iCACE,SACA,YAIA,+HDlUJ,yCCwUI,4CDxUJ,qCC6UE,8BACE,WAEA,sBACA,MAEA,sCD1TA,uGCgUF,6BACE,SAEA,cDnUA,wDCuUA,yCACE,gBAIJ,kCACE,cAEA,oBAEA,yCACE,QACA,YAEA,MACA,WAME,4GACE,YACA,aG9WV,kDHsXE,sBACE,WACA,YAGF,4BACE,oBAGF,yGAGE,mBAGF,+DAEE,kBAGF,kCACE,iCACA,iCGtYJ,wBH2YE,uEAEE,mBAGF,6BACE,kBAGF,sBACE,aACA,cAGF,4BACE,cAGF,kCACE,UAGF,kCACE,mBACA,iCDzDJ,8BC7ZF,YD6DM,4DA0VJ,+BCvZF,YD6DM","file":"header.css","sourcesContent":["@use \"sass:list\";\n@use \"sass:map\";\n@use \"../variables/borders\";\n@use \"../variables/colour\";\n@use \"../tools/media\";\n\n@function brand-colour($colour, $opacity: 1) {\n @return colour.brand-colour($colour, $opacity);\n}\n\n@mixin colour-css-vars($excludes...) {\n @each $name, $value in colour.$colour-palette-default {\n @if not list.index($excludes, $name) {\n --#{$name}: #{$value};\n }\n }\n}\n\n@mixin colour-css-vars-dark($excludes...) {\n @each $name, $value in colour.$colour-palette-dark {\n @if not list.index($excludes, $name) {\n --#{$name}: #{$value};\n }\n }\n}\n\n@mixin colour-css-vars-high-contrast($excludes...) {\n @each $name, $value in colour.$colour-palette-high-contrast {\n @if not list.index($excludes, $name) {\n --#{$name}: #{$value};\n }\n }\n}\n\n@mixin colour-css-vars-high-contrast-dark($excludes...) {\n @each $name, $value in colour.$colour-palette-high-contrast-dark {\n @if not list.index($excludes, $name) {\n --#{$name}: #{$value};\n }\n }\n}\n\n@mixin colour-font($colour, $important: false) {\n color: var(--#{$colour}, #{map.get(colour.$colour-palette-default, $colour)})\n if($important, !important, null);\n}\n\n@mixin colour-background($colour, $important: false) {\n background-color: var(\n --#{$colour},\n #{map.get(colour.$colour-palette-default, $colour)}\n )\n 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 var(--#{$colour}, #{map.get(colour.$colour-palette-default, $colour)})\n $style\n if($important, !important, null);\n } @else {\n border-#{$direction}-color: var(\n --#{$colour},\n #{map.get(colour.$colour-palette-default, $colour)}\n )\n if($important, !important, null);\n }\n } @else {\n @if $width != \"\" {\n border: $width\n var(--#{$colour}, #{map.get(colour.$colour-palette-default, $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\n var(--#{$colour}, #{map.get(colour.$colour-palette-default, $colour)})\n $style\n if($important, !important, null);\n } @else {\n outline-color: var(\n --#{$colour},\n #{map.get(colour.$colour-palette-default, $colour)}\n )\n if($important, !important, null);\n }\n}\n\n@mixin colour-fill($colour, $important: false) {\n fill: var(--#{$colour}, #{map.get(colour.$colour-palette-default, $colour)})\n if($important, !important, null);\n}\n\n@mixin thick-keyline($direction) {\n @include colour-border(\n \"keyline\",\n borders.$thick-border-width,\n solid,\n $direction\n );\n}\n\n@mixin thick-keyline-dark($direction) {\n @include colour-border(\n \"keyline-dark\",\n borders.$thick-border-width,\n solid,\n $direction\n );\n}\n\n@mixin thick-keyline-accent($direction) {\n @include colour-border(\n \"accent-background\",\n borders.$thick-border-width,\n solid,\n $direction\n );\n}\n\n@mixin thick-keyline-error($direction) {\n @include colour-border(\n \"form-error\",\n borders.$thick-border-width,\n solid,\n $direction\n );\n}\n\n@mixin thick-keyline-brand($direction, $brandColour) {\n border-#{$direction}: borders.$thick-border-width #{brand-colour($brandColour)}\n solid;\n}\n\n// Use light theme colours (except for \"form-error\")\n%light {\n @include colour-css-vars(\"form-error\");\n\n @media (prefers-contrast: more) {\n @include colour-css-vars-high-contrast(\"form-error\");\n }\n}\n\n@mixin light {\n @extend %light;\n}\n\n// Remove accent and contrast values (except for \"form-error\")\n%plain {\n @include colour-css-vars(\"form-error\");\n\n @media (prefers-contrast: more) {\n @include colour-css-vars-high-contrast(\"form-error\");\n }\n\n .tna-template--system-theme & {\n @media (prefers-color-scheme: dark) {\n @include colour-css-vars-dark(\"form-error\");\n }\n\n @media (prefers-contrast: more) and (prefers-color-scheme: dark) {\n @include colour-css-vars-high-contrast-dark(\"form-error\");\n }\n }\n\n .tna-template--dark-theme & {\n @include colour-css-vars-dark(\"form-error\");\n\n @media (prefers-contrast: more) {\n @include colour-css-vars-high-contrast-dark(\"form-error\");\n }\n }\n\n @include colour-background(\"background\");\n}\n\n@mixin plain {\n @extend %plain;\n}\n\n%contrast {\n --background: var(--contrast-background);\n --font-base: var(--contrast-font-base);\n --font-dark: var(--contrast-font-dark);\n --font-light: var(--contrast-font-light);\n --icon-light: var(--contrast-icon-light);\n --link: var(--contrast-link);\n --link-visited: var(--contrast-link-visited);\n --keyline: var(--contrast-keyline);\n --keyline-dark: var(--contrast-keyline-dark);\n --button-text: var(--contrast-button-text);\n --button-background: var(--contrast-button-background);\n --button-hover-text: var(--contrast-button-hover-text);\n --button-hover-background: var(--contrast-button-hover-background);\n\n @include colour-background(\"background\");\n\n @include colour-font(\"font-base\");\n}\n\n@mixin contrast {\n @extend %contrast;\n}\n\n%contrast-on-mobile {\n @include media.on-mobile {\n --background: var(--contrast-background);\n --font-base: var(--contrast-font-base);\n --font-dark: var(--contrast-font-dark);\n --font-light: var(--contrast-font-light);\n --icon-light: var(--contrast-icon-light);\n --link: var(--contrast-link);\n --link-visited: var(--contrast-link-visited);\n --keyline: var(--contrast-keyline);\n --keyline-dark: var(--contrast-keyline-dark);\n --button-text: var(--contrast-button-text);\n --button-background: var(--contrast-button-background);\n --button-hover-text: var(--contrast-button-hover-text);\n --button-hover-background: var(--contrast-button-hover-background);\n\n @include colour-background(\"background\");\n\n @include colour-font(\"font-base\");\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\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\n .tna-template--system-theme & {\n @media (prefers-color-scheme: dark) {\n --link: #{map.get(colour.$colour-palette-default, \"link\")};\n --link-visited: #{map.get(colour.$colour-palette-default, \"link-visited\")};\n }\n }\n\n .tna-template--dark-theme & {\n --link: #{map.get(colour.$colour-palette-default, \"link\")};\n --link-visited: #{map.get(colour.$colour-palette-default, \"link-visited\")};\n }\n\n @include colour-background(\"background\");\n @include colour-font(\"font-base\");\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-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-accent-text: #{colour.brand-colour(\"white\")} !important;\n --button-accent-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-accent-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 --button-accent-text: #{colour.brand-colour(\"black\")} !important;\n --button-accent-background: #{colour.brand-colour(\"grey\")} !important;\n}\n\n@mixin black-accent {\n @extend %black-accent;\n @extend %accent-lighter-text;\n}\n\n%pink-accent {\n --accent-background: #{colour.brand-colour(\"maroon\")} !important;\n --accent-background-light: #{colour.brand-colour(\"pastel-pink\")} !important;\n --button-accent-background: #{colour.brand-colour(\"maroon\")} !important;\n}\n\n@mixin pink-accent {\n @extend %pink-accent;\n @extend %accent-lighter-text;\n}\n\n%orange-accent {\n --accent-background: #{colour.brand-colour(\"chestnut\")} !important;\n --accent-background-light: #{colour.brand-colour(\"pastel-orange\")} !important;\n --button-accent-background: #{colour.brand-colour(\"chestnut\")} !important;\n}\n\n@mixin orange-accent {\n @extend %orange-accent;\n @extend %accent-lighter-text;\n}\n\n%green-accent {\n --accent-background: #{colour.brand-colour(\"forest\")} !important;\n --accent-background-light: #{colour.brand-colour(\"pastel-green\")} !important;\n --button-accent-background: #{colour.brand-colour(\"forest\")} !important;\n}\n\n@mixin green-accent {\n @extend %green-accent;\n @extend %accent-lighter-text;\n}\n\n%blue-accent {\n --accent-background: #{colour.brand-colour(\"navy\")} !important;\n --accent-background-light: #{colour.brand-colour(\"pastel-blue\")} !important;\n --button-accent-background: #{colour.brand-colour(\"navy\")} !important;\n}\n\n@mixin blue-accent {\n @extend %blue-accent;\n @extend %accent-lighter-text;\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","@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 &__exit {\n padding-top: spacing.space(0.5);\n padding-bottom: spacing.space(0.5);\n\n text-align: right;\n\n @include colour.contrast;\n }\n\n &__exit-link {\n text-decoration: none;\n @include typography.relative-font-size(16);\n\n &,\n &:link,\n &:visited {\n color: #fff;\n }\n\n &:hover {\n text-decoration: underline;\n }\n\n .fa-solid {\n margin-left: spacing.space(0.5);\n }\n }\n\n &__contents {\n &.tna-container {\n justify-content: space-between;\n }\n }\n\n &__logo {\n padding-top: spacing.space(1.5);\n padding-bottom: spacing.space(1.5);\n }\n\n &__logo-link {\n display: flex;\n align-items: flex-end;\n\n color: inherit;\n text-decoration: none;\n\n &,\n &:link,\n &:visited {\n color: inherit;\n }\n\n &:hover:not(:focus) {\n text-decoration: none;\n\n @include colour.colour-outline(\"font-dark\", 0.3125rem, solid);\n outline-offset: 1px;\n }\n }\n\n .tna-logo {\n width: 6rem;\n height: 6rem;\n\n display: inline-block;\n\n flex-shrink: 0;\n }\n\n &__logo-strapline {\n margin: 0 spacing.space(0.75);\n\n display: inline-block;\n\n line-height: 2rem;\n @include typography.heading-font;\n @include typography.relative-font-size(20);\n text-transform: uppercase;\n }\n\n &__navigation-toggle {\n display: none;\n\n align-self: center;\n }\n\n &__hamburger {\n width: 2rem;\n height: 0.25rem;\n\n display: block;\n\n @include colour.colour-background(\"font-dark\");\n\n &::before,\n &::after {\n content: \"\";\n\n height: 0.25rem;\n\n display: block;\n\n position: absolute;\n right: 0;\n left: 0;\n\n background-color: inherit;\n }\n\n &::before {\n top: 0;\n }\n\n &::after {\n bottom: 0;\n }\n }\n\n &__navigation-toggle-button {\n height: 2rem;\n padding: 0;\n\n appearance: none;\n\n display: block;\n\n position: relative;\n\n font-size: 0;\n\n background: none;\n\n border: 0 transparent solid;\n border-width: 0.25rem 0;\n\n cursor: pointer;\n\n &--opened {\n .tna-header__hamburger {\n height: 0;\n\n &::before {\n top: 0.625rem;\n\n transform: rotate(-135deg);\n }\n\n &::after {\n bottom: 0.625rem;\n\n transform: rotate(135deg);\n }\n }\n }\n }\n\n &__navigation {\n display: flex;\n flex-direction: column-reverse;\n justify-content: space-between;\n align-items: flex-end;\n\n position: relative;\n z-index: 2;\n }\n\n &__top-navigation-items {\n margin: 0;\n padding: spacing.space(1.25) 0;\n\n display: flex;\n justify-content: flex-end;\n gap: spacing.space(0.5) spacing.space(1.5);\n\n line-height: 1;\n\n list-style: none;\n\n @include typography.relative-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 &--accent {\n @include colour.accent;\n }\n\n @include media.on-medium {\n .tna-logo {\n width: 5rem;\n height: 5rem;\n }\n\n &__logo-strapline {\n line-height: 1.625rem;\n }\n }\n\n @include media.on-mobile {\n &__logo {\n padding-top: spacing.space(1);\n padding-bottom: spacing.space(1);\n }\n\n &__contents {\n &.tna-container {\n padding-right: 0;\n padding-left: 0;\n }\n }\n\n &__navigation-toggle {\n display: block;\n\n &.tna-column {\n padding-left: 0;\n }\n }\n\n &__navigation {\n flex-direction: column;\n align-items: stretch;\n\n &.tna-column {\n padding-right: 0;\n padding-left: 0;\n }\n\n .tna-template--js-enabled & {\n display: none;\n\n &--open {\n display: flex;\n }\n }\n }\n\n &__top-navigation-items {\n padding: spacing.space(0.5) spacing.space(1);\n\n justify-content: flex-start;\n\n @include colour.colour-border(\"keyline\", 1px, solid, bottom);\n }\n\n &__top-navigation-item {\n margin: 0;\n padding: spacing.space(0.5);\n }\n\n &__top-navigation-item-link {\n &,\n &:link,\n &:visited {\n @include colour.colour-font(\"font-light\");\n }\n\n &:hover {\n @include colour.colour-font(\"font-dark\");\n }\n }\n\n &__navigation-items {\n width: 100%;\n\n flex-direction: column;\n gap: 0;\n\n background-color: rgb(255 255 255 / 10%);\n\n @include colour.colour-border(\"keyline-dark\", 2px, solid, top);\n @include colour.colour-border(\"keyline-dark\", 2px, solid, bottom);\n }\n\n &__navigation-item {\n margin: 0;\n\n display: block;\n\n @include colour.colour-border(\"keyline\", 1px, solid, top);\n\n &:first-child {\n border-top: none;\n }\n }\n\n &__navigation-item-link {\n display: block;\n\n line-height: 1.75rem;\n\n &::after {\n width: 0;\n height: auto;\n\n top: 0;\n right: auto;\n }\n\n &--selected {\n &,\n &:hover {\n &::after {\n width: 0.5rem;\n height: auto;\n }\n }\n }\n }\n }\n\n @include media.on-small {\n .tna-logo {\n width: 4rem;\n height: 4rem;\n }\n\n &__logo-strapline {\n line-height: 1.25rem;\n }\n\n &__logo.tna-column,\n &__navigation-item-link,\n &__navigation-toggle.tna-column {\n padding-right: grid.gutter-width();\n }\n\n &__logo.tna-column,\n &__navigation-item-link {\n padding-left: grid.gutter-width();\n }\n\n &__top-navigation-items {\n padding-right: calc(#{grid.gutter-width()} - 0.5rem);\n padding-left: calc(#{grid.gutter-width()} - 0.5rem);\n }\n }\n\n @include media.on-tiny {\n &__navigation-toggle.tna-column,\n &__logo.tna-column {\n padding-right: grid.gutter-width-tiny();\n }\n\n &__logo.tna-column {\n padding-left: grid.gutter-width-tiny();\n }\n\n .tna-logo {\n width: 3.5rem;\n height: 3.5rem;\n }\n\n &__logo-strapline {\n line-height: 1;\n }\n\n &__top-navigation-items {\n gap: 0.5rem;\n }\n\n &__navigation-item-link {\n padding-right: grid.gutter-width-tiny();\n padding-left: calc(#{grid.gutter-width-tiny()} + 0.5rem);\n }\n }\n\n @include colour.on-high-contrast-and-forced-colours {\n @include colour.colour-border(\"keyline\", 1px, solid, bottom);\n }\n}\n","@use \"sass:math\";\n@use \"../variables/typography\";\n@use \"colour\";\n@use \"media\";\n\n@mixin relative-font-size($font-size-px) {\n font-size: #{math.div($font-size-px, typography.$relative-1rem-px)}rem;\n}\n\n@mixin main-font-weight {\n font-weight: typography.$main-font-weight;\n}\n\n@mixin main-font-weight-medium {\n font-weight: typography.$main-font-weight-medium;\n}\n\n@mixin main-font-weight-bold {\n font-weight: typography.$main-font-weight-bold;\n}\n\n@mixin main-font($bold: false) {\n font-family: typography.$main-font-family;\n 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 relative-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 relative-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 relative-font-size($font-size-medium);\n }\n\n @if $small-and-tiny-identical != true {\n @include media.on-small {\n @include relative-font-size($font-size-small);\n }\n\n @include media.on-tiny {\n @include relative-font-size($font-size-tiny);\n }\n } @else {\n @include media.on-mobile {\n @include relative-font-size($font-size-small);\n }\n }\n } @else {\n @include media.on-smaller-than-large {\n @include relative-font-size($font-size-medium);\n }\n }\n }\n}\n","/\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/header/header.scss","../../../../src/nationalarchives/tools/_typography.scss","../../../../src/nationalarchives/variables/_typography.scss","../../../../src/nationalarchives/tools/_media.scss"],"names":[],"mappings":"AAiMA,8BACE,yCACA,uCACA,uCACA,yCACA,yCACA,6BACA,6CACA,mCACA,6CACA,2CACA,uDACA,uDACA,mEAxJA,4CAJA,gCA6MF,oBACE,uCACA,qCACA,qCACA,uCACA,uCACA,2BACA,mCACA,iCACA,2CAlNA,4CAJA,gCC3CF,YAGE,kBAEA,wEAMA,sCACE,mBAIA,mCADF,wCAEI,oBAIJ,kBACE,gBACA,mBAEA,iBAKF,uBACE,qBChCF,eDmCE,kFAGE,WAGF,6BACE,0BAGF,iCACE,gBAKF,oCACE,8BAIJ,kBACE,iBACA,oBAGF,uBACE,aACA,qBAEA,cACA,qBAEA,kFAGE,cAGF,yCACE,qBDeF,sDCZE,mBAIJ,sBACE,WACA,YAEA,qBAEA,cAGF,4BACE,cAEA,qBAEA,iBCpEF,YCmBA,gDDlBA,YCqBoB,IDlDpB,kBDmGE,yBAGF,+BACE,aAEA,kBAGF,uBACE,WACA,cAEA,cDhEF,gDCoEE,6DAEE,WAEA,cAEA,cAEA,kBACA,QACA,OAEA,yBAGF,+BACE,MAGF,8BACE,SAIJ,sCACE,YACA,UAEA,gBAEA,cAEA,kBAEA,YAEA,gBAEA,6BACA,sBAEA,eAGE,qEACE,SAEA,6EACE,YAEA,0BAGF,4EACE,eAEA,yBAMR,wBACE,aACA,8BACA,8BACA,qBAEA,kBACA,UAGF,kCACE,SACA,eAEA,aACA,yBACA,aAEA,cAEA,gBCtMF,oBD2MA,iCACE,cAGF,sCACE,aACA,mBAEA,qBAEA,+HDzKF,yCCiLI,8SDjLJ,gCEOA,0BACA,0BC/BsC,MFgNpC,gDACE,iBAIJ,8BACE,SACA,UAEA,aACA,iBACA,SAEA,mBAEA,gBAMF,kCACE,cAEA,qBAEA,kBAEA,cACA,qBC1PF,YCoBwB,IF0OtB,yCACE,WAEA,SAEA,kBACA,QACA,SACA,OD9NJ,gDCmOE,mHAGE,cAME,4GD5NF,kDIxBJ,kDHgQE,sBACE,WACA,YAGF,4BACE,sBGlOJ,wBHuOE,kBACE,iBACA,oBAIA,oCACE,gBACA,eAIJ,+BACE,cAEA,0CACE,eAIJ,wBACE,sBACA,oBAEA,mCACE,gBACA,eAGF,kDACE,aAEA,wDACE,aAKN,kCACE,iBAEA,2BD5RA,2DCiSF,iCACE,SACA,YAIA,+HD3TJ,yCCiUI,4CDjUJ,qCCsUE,8BACE,WAEA,sBACA,MAEA,sCDxTA,uGC8TF,6BACE,SAEA,cDjUA,wDCqUA,yCACE,gBAIJ,kCACE,cAEA,oBAEA,yCACE,QACA,YAEA,MACA,WAME,4GACE,YACA,aG9WV,kDHsXE,sBACE,WACA,YAGF,4BACE,oBAGF,yGAGE,mBAGF,+DAEE,kBAGF,kCACE,iCACA,iCGtYJ,wBH2YE,uEAEE,mBAGF,6BACE,kBAGF,sBACE,aACA,cAGF,4BACE,cAGF,kCACE,UAGF,kCACE,mBACA,iCDlEJ,8BCpZF,YD+DM,4DA+UJ,+BC9YF,YD+DM","file":"header.css","sourcesContent":["@use \"sass:list\";\n@use \"sass:map\";\n@use \"../variables/borders\";\n@use \"../variables/colour\";\n@use \"../tools/media\";\n\n@function brand-colour($colour, $opacity: 1) {\n @return colour.brand-colour($colour, $opacity);\n}\n\n@mixin colour-css-vars($excludes...) {\n @each $name, $value in colour.$colour-palette-default {\n @if not list.index($excludes, $name) {\n --#{$name}: #{$value};\n }\n }\n}\n\n@mixin colour-css-vars-dark($excludes...) {\n @each $name, $value in colour.$colour-palette-dark {\n @if not list.index($excludes, $name) {\n --#{$name}: #{$value};\n }\n }\n}\n\n@mixin colour-css-vars-high-contrast($excludes...) {\n @each $name, $value in colour.$colour-palette-high-contrast {\n @if not list.index($excludes, $name) {\n --#{$name}: #{$value};\n }\n }\n}\n\n@mixin colour-css-vars-high-contrast-dark($excludes...) {\n @each $name, $value in colour.$colour-palette-high-contrast-dark {\n @if not list.index($excludes, $name) {\n --#{$name}: #{$value};\n }\n }\n}\n\n@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 @include colour-border(\n \"keyline\",\n borders.$thick-border-width,\n solid,\n $direction\n );\n}\n\n@mixin thick-keyline-dark($direction) {\n @include colour-border(\n \"keyline-dark\",\n borders.$thick-border-width,\n solid,\n $direction\n );\n}\n\n@mixin thick-keyline-accent($direction) {\n @include colour-border(\n \"accent-background\",\n borders.$thick-border-width,\n solid,\n $direction\n );\n}\n\n@mixin thick-keyline-error($direction) {\n @include colour-border(\n \"form-error\",\n borders.$thick-border-width,\n solid,\n $direction\n );\n}\n\n@mixin thick-keyline-brand($direction, $brandColour) {\n border-#{$direction}: borders.$thick-border-width #{brand-colour($brandColour)}\n solid;\n}\n\n// Use light theme colours (except for \"form-error\")\n%light {\n @include colour-css-vars(\"form-error\");\n\n @media (prefers-contrast: more) {\n @include colour-css-vars-high-contrast(\"form-error\");\n }\n}\n\n@mixin light {\n @extend %light;\n}\n\n// Remove accent and contrast values (except for \"form-error\")\n%plain {\n @include colour-css-vars(\"form-error\");\n\n @media (prefers-contrast: more) {\n @include colour-css-vars-high-contrast(\"form-error\");\n }\n\n .tna-template--system-theme & {\n @media (prefers-color-scheme: dark) {\n @include colour-css-vars-dark(\"form-error\");\n }\n\n @media (prefers-contrast: more) and (prefers-color-scheme: dark) {\n @include colour-css-vars-high-contrast-dark(\"form-error\");\n }\n }\n\n .tna-template--dark-theme & {\n @include colour-css-vars-dark(\"form-error\");\n\n @media (prefers-contrast: more) {\n @include colour-css-vars-high-contrast-dark(\"form-error\");\n }\n }\n\n @include colour-background(\"background\");\n}\n\n@mixin plain {\n @extend %plain;\n}\n\n%contrast {\n --background: var(--contrast-background);\n --font-base: var(--contrast-font-base);\n --font-dark: var(--contrast-font-dark);\n --font-light: var(--contrast-font-light);\n --icon-light: var(--contrast-icon-light);\n --link: var(--contrast-link);\n --link-visited: var(--contrast-link-visited);\n --keyline: var(--contrast-keyline);\n --keyline-dark: var(--contrast-keyline-dark);\n --button-text: var(--contrast-button-text);\n --button-background: var(--contrast-button-background);\n --button-hover-text: var(--contrast-button-hover-text);\n --button-hover-background: var(--contrast-button-hover-background);\n\n @include colour-background(\"background\");\n\n @include colour-font(\"font-base\");\n}\n\n@mixin contrast {\n @extend %contrast;\n}\n\n%contrast-on-mobile {\n @include media.on-mobile {\n --background: var(--contrast-background);\n --font-base: var(--contrast-font-base);\n --font-dark: var(--contrast-font-dark);\n --font-light: var(--contrast-font-light);\n --icon-light: var(--contrast-icon-light);\n --link: var(--contrast-link);\n --link-visited: var(--contrast-link-visited);\n --keyline: var(--contrast-keyline);\n --keyline-dark: var(--contrast-keyline-dark);\n --button-text: var(--contrast-button-text);\n --button-background: var(--contrast-button-background);\n --button-hover-text: var(--contrast-button-hover-text);\n --button-hover-background: var(--contrast-button-hover-background);\n\n @include colour-background(\"background\");\n\n @include colour-font(\"font-base\");\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\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\n .tna-template--system-theme & {\n @media (prefers-color-scheme: dark) {\n --link: #{map.get(colour.$colour-palette-default, \"link\")};\n --link-visited: #{map.get(colour.$colour-palette-default, \"link-visited\")};\n }\n }\n\n .tna-template--dark-theme & {\n --link: #{map.get(colour.$colour-palette-default, \"link\")};\n --link-visited: #{map.get(colour.$colour-palette-default, \"link-visited\")};\n }\n\n @include colour-background(\"background\");\n @include colour-font(\"font-base\");\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-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-accent-text: #{colour.brand-colour(\"white\")} !important;\n --button-accent-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-accent-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 --button-accent-text: #{colour.brand-colour(\"black\")} !important;\n --button-accent-background: #{colour.brand-colour(\"grey\")} !important;\n}\n\n@mixin black-accent {\n @extend %black-accent;\n @extend %accent-lighter-text;\n}\n\n%pink-accent {\n --accent-background: #{colour.brand-colour(\"maroon\")} !important;\n --accent-background-light: #{colour.brand-colour(\"pastel-pink\")} !important;\n --button-accent-background: #{colour.brand-colour(\"maroon\")} !important;\n}\n\n@mixin pink-accent {\n @extend %pink-accent;\n @extend %accent-lighter-text;\n}\n\n%orange-accent {\n --accent-background: #{colour.brand-colour(\"chestnut\")} !important;\n --accent-background-light: #{colour.brand-colour(\"pastel-orange\")} !important;\n --button-accent-background: #{colour.brand-colour(\"chestnut\")} !important;\n}\n\n@mixin orange-accent {\n @extend %orange-accent;\n @extend %accent-lighter-text;\n}\n\n%green-accent {\n --accent-background: #{colour.brand-colour(\"forest\")} !important;\n --accent-background-light: #{colour.brand-colour(\"pastel-green\")} !important;\n --button-accent-background: #{colour.brand-colour(\"forest\")} !important;\n}\n\n@mixin green-accent {\n @extend %green-accent;\n @extend %accent-lighter-text;\n}\n\n%blue-accent {\n --accent-background: #{colour.brand-colour(\"navy\")} !important;\n --accent-background-light: #{colour.brand-colour(\"pastel-blue\")} !important;\n --button-accent-background: #{colour.brand-colour(\"navy\")} !important;\n}\n\n@mixin blue-accent {\n @extend %blue-accent;\n @extend %accent-lighter-text;\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","@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 &__exit {\n padding-top: spacing.space(0.5);\n padding-bottom: spacing.space(0.5);\n\n text-align: right;\n\n @include colour.contrast;\n }\n\n &__exit-link {\n text-decoration: none;\n @include typography.relative-font-size(16);\n\n &,\n &:link,\n &:visited {\n color: #fff;\n }\n\n &:hover {\n text-decoration: underline;\n }\n\n .fa-solid {\n margin-left: spacing.space(0.5);\n }\n }\n\n &__contents {\n &.tna-container {\n justify-content: space-between;\n }\n }\n\n &__logo {\n padding-top: spacing.space(1.5);\n padding-bottom: spacing.space(1.5);\n }\n\n &__logo-link {\n display: flex;\n align-items: flex-end;\n\n color: inherit;\n text-decoration: none;\n\n &,\n &:link,\n &:visited {\n color: inherit;\n }\n\n &:hover:not(:focus) {\n text-decoration: none;\n\n @include colour.colour-outline(\"font-dark\", 0.3125rem, solid);\n outline-offset: 1px;\n }\n }\n\n .tna-logo {\n width: 6rem;\n height: 6rem;\n\n display: inline-block;\n\n flex-shrink: 0;\n }\n\n &__logo-strapline {\n margin: 0 spacing.space(0.75);\n\n display: inline-block;\n\n line-height: 2rem;\n @include typography.heading-font;\n @include typography.relative-font-size(20);\n text-transform: uppercase;\n }\n\n &__navigation-toggle {\n display: none;\n\n align-self: center;\n }\n\n &__hamburger {\n width: 2rem;\n height: 0.25rem;\n\n display: block;\n\n @include colour.colour-background(\"font-dark\");\n\n &::before,\n &::after {\n content: \"\";\n\n height: 0.25rem;\n\n display: block;\n\n position: absolute;\n right: 0;\n left: 0;\n\n background-color: inherit;\n }\n\n &::before {\n top: 0;\n }\n\n &::after {\n bottom: 0;\n }\n }\n\n &__navigation-toggle-button {\n height: 2rem;\n padding: 0;\n\n appearance: none;\n\n display: block;\n\n position: relative;\n\n font-size: 0;\n\n background: none;\n\n border: 0 transparent solid;\n border-width: 0.25rem 0;\n\n cursor: pointer;\n\n &--opened {\n .tna-header__hamburger {\n height: 0;\n\n &::before {\n top: 0.625rem;\n\n transform: rotate(-135deg);\n }\n\n &::after {\n bottom: 0.625rem;\n\n transform: rotate(135deg);\n }\n }\n }\n }\n\n &__navigation {\n display: flex;\n flex-direction: column-reverse;\n justify-content: space-between;\n align-items: flex-end;\n\n position: relative;\n z-index: 2;\n }\n\n &__top-navigation-items {\n margin: 0;\n padding: spacing.space(1.25) 0;\n\n display: flex;\n justify-content: flex-end;\n gap: spacing.space(0.5) spacing.space(1.5);\n\n line-height: 1;\n\n list-style: none;\n\n @include typography.relative-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 &--accent {\n @include colour.accent;\n }\n\n @include media.on-medium {\n .tna-logo {\n width: 5rem;\n height: 5rem;\n }\n\n &__logo-strapline {\n line-height: 1.625rem;\n }\n }\n\n @include media.on-mobile {\n &__logo {\n padding-top: spacing.space(1);\n padding-bottom: spacing.space(1);\n }\n\n &__contents {\n &.tna-container {\n padding-right: 0;\n padding-left: 0;\n }\n }\n\n &__navigation-toggle {\n display: block;\n\n &.tna-column {\n padding-left: 0;\n }\n }\n\n &__navigation {\n flex-direction: column;\n align-items: stretch;\n\n &.tna-column {\n padding-right: 0;\n padding-left: 0;\n }\n\n .tna-template--js-enabled & {\n display: none;\n\n &--open {\n display: flex;\n }\n }\n }\n\n &__top-navigation-items {\n padding: spacing.space(0.5) spacing.space(1);\n\n justify-content: flex-start;\n\n @include colour.colour-border(\"keyline\", 1px, solid, bottom);\n }\n\n &__top-navigation-item {\n margin: 0;\n padding: spacing.space(0.5);\n }\n\n &__top-navigation-item-link {\n &,\n &:link,\n &:visited {\n @include colour.colour-font(\"font-light\");\n }\n\n &:hover {\n @include colour.colour-font(\"font-dark\");\n }\n }\n\n &__navigation-items {\n width: 100%;\n\n flex-direction: column;\n gap: 0;\n\n background-color: rgb(255 255 255 / 10%);\n\n @include colour.colour-border(\"keyline-dark\", 2px, solid, top);\n @include colour.colour-border(\"keyline-dark\", 2px, solid, bottom);\n }\n\n &__navigation-item {\n margin: 0;\n\n display: block;\n\n @include colour.colour-border(\"keyline\", 1px, solid, top);\n\n &:first-child {\n border-top: none;\n }\n }\n\n &__navigation-item-link {\n display: block;\n\n line-height: 1.75rem;\n\n &::after {\n width: 0;\n height: auto;\n\n top: 0;\n right: auto;\n }\n\n &--selected {\n &,\n &:hover {\n &::after {\n width: 0.5rem;\n height: auto;\n }\n }\n }\n }\n }\n\n @include media.on-small {\n .tna-logo {\n width: 4rem;\n height: 4rem;\n }\n\n &__logo-strapline {\n line-height: 1.25rem;\n }\n\n &__logo.tna-column,\n &__navigation-item-link,\n &__navigation-toggle.tna-column {\n padding-right: grid.gutter-width();\n }\n\n &__logo.tna-column,\n &__navigation-item-link {\n padding-left: grid.gutter-width();\n }\n\n &__top-navigation-items {\n padding-right: calc(#{grid.gutter-width()} - 0.5rem);\n padding-left: calc(#{grid.gutter-width()} - 0.5rem);\n }\n }\n\n @include media.on-tiny {\n &__navigation-toggle.tna-column,\n &__logo.tna-column {\n padding-right: grid.gutter-width-tiny();\n }\n\n &__logo.tna-column {\n padding-left: grid.gutter-width-tiny();\n }\n\n .tna-logo {\n width: 3.5rem;\n height: 3.5rem;\n }\n\n &__logo-strapline {\n line-height: 1;\n }\n\n &__top-navigation-items {\n gap: 0.5rem;\n }\n\n &__navigation-item-link {\n padding-right: grid.gutter-width-tiny();\n padding-left: calc(#{grid.gutter-width-tiny()} + 0.5rem);\n }\n }\n\n @include colour.on-high-contrast-and-forced-colours {\n @include colour.colour-border(\"keyline\", 1px, solid, bottom);\n }\n}\n","@use \"sass:math\";\n@use \"../variables/typography\";\n@use \"colour\";\n@use \"media\";\n\n@mixin relative-font-size($font-size-px) {\n font-size: #{math.div($font-size-px, typography.$relative-1rem-px)}rem;\n}\n\n@mixin main-font-weight {\n font-weight: typography.$main-font-weight;\n}\n\n@mixin main-font-weight-medium {\n font-weight: typography.$main-font-weight-medium;\n}\n\n@mixin main-font-weight-bold {\n font-weight: typography.$main-font-weight-bold;\n}\n\n@mixin main-font($bold: false) {\n font-family: typography.$main-font-family;\n 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 relative-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 relative-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 relative-font-size($font-size-medium);\n }\n\n @if $small-and-tiny-identical != true {\n @include media.on-small {\n @include relative-font-size($font-size-small);\n }\n\n @include media.on-tiny {\n @include relative-font-size($font-size-tiny);\n }\n } @else {\n @include media.on-mobile {\n @include relative-font-size($font-size-small);\n }\n }\n } @else {\n @include media.on-smaller-than-large {\n @include relative-font-size($font-size-medium);\n }\n }\n }\n}\n","/\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/hero/hero.css CHANGED Viewed

	@@ -1 +1 @@
1	- .tna-hero--contrast,.tna-hero--accent .tna-hgroup__supertitle:not(.tna-hgroup__supertitle--plain),.tna-hero__information,.tna-hero__details[open] .tna-hero__details-summary,.tna-hero--shift:not(.tna-hero--accent):not(.tna-hero--tint) .tna-hero__content-inner,.tna-hero--split:not(.tna-hero--accent):not(.tna-hero--tint){--background: var(--contrast-background);--font-base: var(--contrast-font-base);--font-dark: var(--contrast-font-dark);--font-light: var(--contrast-font-light);--icon-light: var(--contrast-icon-light);--link: var(--contrast-link);--link-visited: var(--contrast-link-visited);--keyline: var(--contrast-keyline);--keyline-dark: var(--contrast-keyline-dark);--button-text: var(--contrast-button-text);--button-background: var(--contrast-button-background);--button-hover-text: var(--contrast-button-hover-text);--button-hover-background: var(--contrast-button-hover-background);background-color:var(--background, #f4f4f4);color:var(--font-base, #343338)}@media(max-width: 48em){.tna-hero:not(.tna-hero--accent):not(.tna-hero--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);background-color:var(--background, #f4f4f4);color:var(--font-base, #343338)}}.tna-hero--tint{--background: var(--background-tint);background-color:var(--background, #f4f4f4);color:var(--font-base, #343338)}.tna-hero--accent,.tna-hero__details-summary{--background: var(--accent-background);--font-base: var(--accent-font-base);--font-dark: var(--accent-font-dark);--font-light: var(--accent-font-light);--icon-light: var(--accent-icon-light);--link: var(--accent-link);--link-visited: var(--accent-link);--keyline: var(--accent-keyline);--keyline-dark: var(--accent-keyline-dark);background-color:var(--background, #f4f4f4);color:var(--font-base, #343338)}.tna-hero--accent .tna-hgroup__supertitle:not(.tna-hgroup__supertitle--plain){border-color:var(--contrast-background, #1e1e1e)}.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__image{position:absolute;inset:0;z-index:1}.tna-hero__image img{width:100%;height:100%;object-fit:cover}.tna-hero__details[open] .tna-hero__details-summary::before,.tna-hero__details[open] .tna-hero__details-summary::after{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--shift{margin-bottom:48px}.tna-hero--shift .tna-hero__content-inner{position:relative;top:80px}.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}@media(max-width: 48em){.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{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 .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--contrast,.tna-hero--accent .tna-hgroup__supertitle:not(.tna-hgroup__supertitle--plain),.tna-hero__information,.tna-hero__details[open] .tna-hero__details-summary,.tna-hero--shift:not(.tna-hero--accent):not(.tna-hero--tint) .tna-hero__content-inner,.tna-hero--split:not(.tna-hero--accent):not(.tna-hero--tint){--background: var(--contrast-background);--font-base: var(--contrast-font-base);--font-dark: var(--contrast-font-dark);--font-light: var(--contrast-font-light);--icon-light: var(--contrast-icon-light);--link: var(--contrast-link);--link-visited: var(--contrast-link-visited);--keyline: var(--contrast-keyline);--keyline-dark: var(--contrast-keyline-dark);--button-text: var(--contrast-button-text);--button-background: var(--contrast-button-background);--button-hover-text: var(--contrast-button-hover-text);--button-hover-background: var(--contrast-button-hover-background);background-color:var(--background, #f4f4f4);color:var(--font-base, #343338)}@media(max-width: 48em){.tna-hero:not(.tna-hero--accent):not(.tna-hero--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);background-color:var(--background, #f4f4f4);color:var(--font-base, #343338)}}.tna-hero--tint{--background: var(--background-tint);background-color:var(--background, #f4f4f4);color:var(--font-base, #343338)}.tna-hero--accent,.tna-hero__details-summary{--background: var(--accent-background);--font-base: var(--accent-font-base);--font-dark: var(--accent-font-dark);--font-light: var(--accent-font-light);--icon-light: var(--accent-icon-light);--link: var(--accent-link);--link-visited: var(--accent-link);--keyline: var(--accent-keyline);--keyline-dark: var(--accent-keyline-dark);background-color:var(--background, #f4f4f4);color:var(--font-base, #343338)}.tna-hero--accent .tna-hgroup__supertitle:not(.tna-hgroup__supertitle--plain){border-color:var(--contrast-background, #1e1e1e)}.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__image{position:absolute;inset:0;z-index:1}.tna-hero__image img{width:100%;height:100%;object-fit:cover}.tna-hero__details[open] .tna-hero__details-summary::before,.tna-hero__details[open] .tna-hero__details-summary::after{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--shift{margin-bottom:48px}.tna-hero--shift .tna-hero__content-inner{position:relative;top:80px}.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}@media(max-width: 48em){.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 /