npm - @nationalarchives/frontend - Versions diffs - 0.1.24-prerelease → 0.1.26-prerelease - Mend

@nationalarchives/frontend 0.1.24-prerelease → 0.1.26-prerelease

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

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

	@@ -1 +1 @@
1	- {"version":3,"sourceRoot":"","sources":["../../../../src/nationalarchives/utilities/_typography.scss","../../../../src/nationalarchives/tools/_colour.scss","../../../../src/nationalarchives/utilities/_a11y.scss","../../../../src/nationalarchives/utilities/_colour.scss","../../../../src/nationalarchives/utilities/_columns.scss","../../../../src/nationalarchives/variables/_grid.scss","../../../../src/nationalarchives/tools/_media.scss","../../../../src/nationalarchives/tools/_spacing.scss","../../../../src/nationalarchives/utilities/_global.scss","../../../../src/nationalarchives/utilities/_lists.scss","../../../../src/nationalarchives/tools/_typography.scss","../../../../src/nationalarchives/variables/_typography.scss","../../../../src/nationalarchives/utilities/_overrides.scss","../../../../src/nationalarchives/components/grid/grid.scss","../../../../src/nationalarchives/tools/_grid.scss","../../../../src/nationalarchives/components/header/header.scss","../../../../src/nationalarchives/variables/_colour.scss"],"names":[],"mappings":"CA4CU,sHC2JV,qCACE,yCACA,uCACA,uCACA,yCACA,yCACA,6BACA,6CACA,mCACA,6CACA,2CACA,uDACA,uDACA,mEAtHA,mCAPA,4BACA,uBAiKF,6EACE,uCACA,qCACA,qCACA,uCACA,uCACA,2BACA,2CACA,iCACA,2CApKA,mCAPA,4BACA,uBAqLF,qBAjLE,yBAEA,wCA+LF,6BACE,6CACA,qBACA,0BACA,gCACA,qBACA,wBACA,8BACA,wBACA,kCACA,kCAIA,kCAIA,8CAjNA,mCC5FF,8CAEE,qBACA,sBACA,oBACA,qBAEA,6BACA,uBACA,wBACA,sBAEA,2BAEA,iCAEA,oBAEA,0CAEA,0HAEE,YAIJ,QACE,UDgHE,+BAIA,4CCjHF,uBAIA,8BACE,aCnCJ,MFQI,g8CEJJ,cFsFE,yBAEA,wCErFA,2BAEA,4BFDE,g8CEIA,mCAHF,4BFKE,y+CEEA,+BAPF,4BFWE,24CEDE,8BACE,kCAIJ,+DAfF,4BFiBE,69CEGF,2BFrBE,g8CEyBF,0BFnBE,w+CEuBF,mCFjBE,24CEoBA,qCACE,iCAGF,4DFlBA,49CEuBF,4BFJE,kDACA,kDACA,qDACA,sDACA,6CACA,qDACA,kDACA,uDECF,6BFrBE,sCACA,iDACA,yDACA,4CACA,4CACA,+CACA,gDACA,uCACA,+CACA,4CACA,iDACA,wDEcF,2BFZE,kDACA,kDACA,qDACA,sDACA,6CACA,qDACA,kDACA,uDAEE,oDAEE,sCACA,iDACA,yDACA,wDEEN,6BFhBE,kDACA,kDACA,qDACA,sDACA,6CACA,qDACA,kDACA,uDAEE,oDAOE,qCACA,iDACA,yDACA,wDECN,4BFpBE,kDACA,kDACA,qDACA,sDACA,6CACA,qDACA,kDACA,uDAEE,oDAYE,uCACA,+CACA,yDACA,iFAxBJ,kDACA,kDACA,qDACA,sDACA,6CACA,qDACA,kDACA,uDAEE,oDAiBE,sCACA,gDACA,yDACA,uDEDN,+BACE,gBACE,0BACA,4BC3EN,aACE,WCFa,KDIb,gBACE,eAGF,gBACE,eEwBF,wBFhCF,aAYI,WCZgB,MC0BlB,kDFTI,sBACE,aAFS,EA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","file":"header.css","sourcesContent":["@use \"sass:math\";\n@use \"sass:selector\";\n@use \"../tools/colour\";\n@use \"../tools/media\";\n@use \"../tools/spacing\";\n@use \"../tools/typography\";\n@use \"../variables/assets\";\n@use \"../variables/grid\";\n@use \"../variables/typography\" as typographyVars;\n\n@if typographyVars.$use-local-fonts {\n @font-face {\n font-family: \"Open Sans\";\n src: url(\"#{assets.$tna-font-path}/OpenSans-Regular.ttf\");\n font-weight: typographyVars.$main-font-weight;\n font-style: normal;\n // font-display: swap;\n }\n\n @font-face {\n font-family: \"Open Sans\";\n src: url(\"#{assets.$tna-font-path}/OpenSans-Bold.ttf\");\n font-weight: typographyVars.$main-font-weight-bold;\n font-style: normal;\n // font-display: swap;\n }\n\n @font-face {\n font-family: \"Roboto Mono\";\n src: url(\"#{assets.$tna-font-path}/RobotoMono-Regular.ttf\");\n font-weight: typographyVars.$detail-font-weight;\n font-style: normal;\n // font-display: swap;\n }\n\n @font-face {\n font-family: \"Roboto Mono\";\n src: url(\"#{assets.$tna-font-path}/RobotoMono-Medium.ttf\");\n font-weight: typographyVars.$detail-font-weight-bold;\n font-style: normal;\n // font-display: swap;\n }\n} @else {\n // @import \"https://use.typekit.net/hkj3kuz.css\";\n @import url(\"https://fonts.googleapis.com/css2?family=Open+Sans:wght@#{typographyVars.$main-font-weight};#{typographyVars.$main-font-weight-bold}&family=Roboto+Mono:wght@#{typographyVars.$detail-font-weight};#{typographyVars.$detail-font-weight-bold}&display=swap\"); /* stylelint-disable-line /\n}\n\n.tna-template {\n @include colour.colour-font(\"font-base\");\n @include typography.main-font;\n -moz-osx-font-smoothing: grayscale;\n -webkit-font-smoothing: antialiased;\n text-rendering: optimizeLegibility;\n -webkit-text-size-adjust: none;\n direction: ltr;\n}\n\n.tna-template__body {\n color: inherit;\n @include typography.relative-font-size(typographyVars.$body-font-size-px);\n line-height: typographyVars.$body-line-height;\n\n @include media.on-mobile {\n @include typography.relative-font-size(\n typographyVars.$body-font-size-px-mobile\n );\n }\n}\n\nh1,\nh2,\nh3,\nh4,\nh5,\nh6,\nul,\nol {\n margin-top: 0;\n}\n\nstrong {\n @include typography.main-font-weight-bold;\n}\n\np {\n margin: 2rem 0 0;\n\n + p {\n margin-top: 1rem;\n }\n\n &:first-child {\n margin-top: 0;\n }\n}\n\na {\n text-decoration-thickness: 1.5px;\n\n &,\n &:link {\n @include colour.colour-font(\"link\");\n }\n\n &:visited {\n @include colour.colour-font(\"link-visited\");\n }\n\n &:hover,\n &:active {\n @include typography.interacted-text-decoration;\n }\n\n &.tna-link--no-visited-state {\n &:visited {\n @include colour.colour-font(\"link\");\n }\n }\n\n @include colour.on-high-contrast {\n &:active {\n box-shadow: none;\n }\n\n &:hover:not(:focus) {\n box-shadow: 0 0 0 0.3125rem var(--link);\n }\n }\n\n // &[target=\"_blank\"]:not([title=\"opens in a new\"]) {\n // &::after {\n // content: \"\" / \" (opens in a new window)\"\n // }\n // }\n}\n\nsmall {\n @include typography.relative-font-size(\n typographyVars.$body-font-size-px * 0.85\n );\n}\n\n// .tna-detail[title][data-type] {\n// padding: 0 0.375rem;\n\n// display: inline-flex;\n// flex-flow: row nowrap;\n// align-items: baseline;\n// gap: 0.5rem;\n\n// vertical-align: baseline;\n\n// background-color: #ccc;\n\n// &::after {\n// @include colour.colour-font(\"font-base\");\n// @include typography.detail-font-small;\n// vertical-align: baseline;\n\n// content: attr(data-type) / \"\";\n// }\n\n// &[data-type=\"misc\"] {\n// background-color: #f28482;\n// }\n\n// &[data-type=\"loc\"] {\n// background-color: #edae49;\n// }\n\n// &[data-type=\"per\"] {\n// background-color: #b5e2fa;\n// }\n\n// @at-root #{selector.unify(\"a\", &)} {\n// @include colour.colour-font(\"font-base\");\n\n// &::after {\n// text-decoration: none;\n// }\n// }\n// }\n\n.tna-chip-list {\n @include spacing.space-above;\n margin-bottom: 0;\n padding-left: 0;\n\n display: flex;\n flex-wrap: wrap;\n gap: 1rem;\n\n list-style: none;\n\n &__item {\n }\n}\n\n%chip {\n max-width: max-content;\n padding: 0.125em 0.25rem;\n\n display: block;\n\n @include colour.colour-font(\"font-dark\");\n @include typography.detail-font-small;\n line-height: 1;\n\n @include colour.accent;\n\n @include colour.colour-border(\"accent-background\", 0.125rem);\n}\n\n.tna-chip {\n @extend %chip;\n\n &--plain {\n padding: 0;\n\n color: inherit;\n\n background-color: transparent;\n\n border: none;\n }\n\n @at-root #{selector.unify(\"a\", &)} {\n text-decoration: none;\n\n &,\n &:link,\n &:visited {\n @include colour.colour-font(\"font-dark\");\n }\n\n &:hover {\n @include typography.interacted-text-decoration;\n }\n\n &--plain {\n &,\n &:link,\n &:visited {\n color: inherit;\n }\n }\n }\n}\n\n%heading {\n @include colour.colour-font(\"font-dark\");\n\n &:not(.tna-heading--no-link-arrow) {\n a {\n display: inline-block;\n\n text-wrap: balance;\n // text-decoration-thickness: .1em;\n\n &::after {\n padding-left: 0.25rem;\n\n display: inline-block;\n\n font-weight: 700;\n\n content: \"\\203A\";\n }\n\n &:hover {\n // text-decoration-thickness: .15em;\n\n &::after {\n padding-left: 0.5rem;\n }\n }\n }\n }\n}\n\n%heading-xl {\n @extend %heading;\n\n @include typography.heading-font;\n @include typography.relative-font-size(64);\n line-height: 1.2;\n\n @include media.on-medium {\n @include typography.relative-font-size(42);\n }\n\n @include media.on-mobile {\n @include typography.relative-font-size(36);\n }\n}\n\n%heading-l {\n @extend %heading;\n\n @include typography.heading-font;\n @include typography.relative-font-size(32);\n line-height: 1.3;\n\n @include media.on-medium {\n @include typography.relative-font-size(26);\n }\n\n @include media.on-mobile {\n @include typography.relative-font-size(24);\n }\n}\n\n%heading-m {\n @extend %heading;\n\n @include typography.main-font-weight-bold;\n @include typography.relative-font-size(22);\n line-height: 1.6;\n\n @include media.on-mobile {\n @include typography.relative-font-size(20);\n }\n}\n\n%heading-s {\n @extend %heading;\n\n @include typography.main-font-weight-bold;\n @include typography.relative-font-size(18);\n line-height: 1.6;\n}\n\n%headings-and-heading-groups {\n @include spacing.space-above;\n margin-bottom: 0;\n padding-top: 1rem;\n\n &:first-child {\n padding-top: 0;\n }\n\n &:last-child {\n margin-bottom: 0;\n padding-bottom: 0;\n }\n\n + p {\n margin-top: 1rem;\n }\n}\n\n.tna-heading {\n &-xl {\n @extend %heading-xl;\n @extend %headings-and-heading-groups;\n }\n\n &-l {\n @extend %heading-l;\n @extend %headings-and-heading-groups;\n }\n\n &-m {\n @extend %heading-m;\n @extend %headings-and-heading-groups;\n }\n\n &-s {\n @extend %heading-s;\n @extend %headings-and-heading-groups;\n }\n}\n\n.tna-hgroup {\n &-xl,\n &-l,\n &-m,\n &-s {\n @extend %headings-and-heading-groups;\n }\n\n &__supertitle {\n margin: 0 0 0.25rem;\n\n @extend %chip;\n\n &--plain {\n padding: 0;\n\n color: inherit;\n\n background-color: transparent;\n\n border: none;\n }\n }\n\n &__title {\n margin: 0;\n\n display: block;\n }\n\n &-xl &__title {\n @extend %heading-xl;\n }\n\n &-l &__title {\n @extend %heading-l;\n }\n\n &-m &__title {\n @extend %heading-m;\n }\n\n &-s &__title {\n @extend %heading-s;\n }\n}\n\n.tna-blockquote {\n @include spacing.space-above;\n margin-right: 0;\n margin-bottom: 0;\n margin-left: 0;\n padding: 1rem 1rem 1rem 2rem;\n\n @include colour.colour-border(\"accent-background\", 0.375rem, solid, left);\n\n &__quote {\n font-weight: 700;\n }\n\n &__author {\n font-style: italic;\n\n .tna-blockquote & {\n margin: 1rem 0 0;\n }\n\n &::before {\n content: \"\\2014\" \" \";\n }\n }\n}\n\n.tna-large-paragraph {\n @include spacing.space-above;\n\n @include typography.relative-font-size(22);\n @include colour.colour-font(\"font-dark\");\n}\n\n.tna-scene-setter {\n @include spacing.space-above;\n\n @include typography.detail-font;\n @include colour.colour-font(\"font-dark\");\n @include typography.relative-font-size(30);\n line-height: math.div(50, 30);\n\n @include media.on-mobile {\n @include typography.relative-font-size(24);\n line-height: 2;\n }\n\n a {\n color: inherit;\n text-decoration-thickness: 2px;\n\n &:hover {\n text-decoration-thickness: 4.5px;\n }\n }\n\n &--small {\n @include typography.relative-font-size(24);\n }\n}\n","@use \"sass:map\";\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() {\n @each $name, $value in colour.$colour-palette-default {\n --#{$name}: #{$value};\n }\n}\n\n@mixin colour-css-vars-dark() {\n @each $name, $value in colour.$colour-palette-dark {\n --#{$name}: #{$value};\n }\n}\n\n@mixin colour-css-vars-high-contrast() {\n @each $name, $value in colour.$colour-palette-high-contrast {\n --#{$name}: #{$value};\n }\n}\n\n@mixin colour-css-vars-high-contrast-dark() {\n @each $name, $value in colour.$colour-palette-high-contrast-dark {\n --#{$name}: #{$value};\n }\n}\n\n@mixin accent-css-vars($colour) {\n @if $colour == \"yellow\" {\n --accent: #{brand-colour(\"yellow\")} !important;\n --accent-background: #{brand-colour(\"yellow\")} !important;\n --accent-background-light: #{brand-colour(\"cream\")} !important;\n --accent-font-base: #{brand-colour(\"black\")} !important;\n --accent-font-dark: #{brand-colour(\"black\")} !important;\n --accent-font-light: #{brand-colour(\"black\", 0.7)} !important;\n --accent-icon-light: #{brand-colour(\"black\", 0.45)} !important;\n --accent-link: #{brand-colour(\"black\")} !important;\n --accent-link-visited: #{brand-colour(\"black\")} !important;\n --accent-keyline: #{brand-colour(\"black\", 0.5)} !important;\n --accent-keyline-dark: #{brand-colour(\"black\", 0.8)} !important;\n --button-accent-background: #{brand-colour(\"yellow\")} !important;\n } @else {\n --accent-font-base: #{brand-colour(\"white\")} !important;\n --accent-font-dark: #{brand-colour(\"white\")} !important;\n --accent-font-light: #{brand-colour(\"white\", 0.7)} !important;\n --accent-icon-light: #{brand-colour(\"white\", 0.45)} !important;\n --accent-link: #{brand-colour(\"white\")} !important;\n --accent-link-visited: #{brand-colour(\"white\")} !important;\n --accent-keyline: #{brand-colour(\"white\", 0.5)} !important;\n --accent-keyline-dark: #{brand-colour(\"white\", 0.8)} !important;\n @if $colour != \"black\" {\n --button-accent-text: #{brand-colour(\"white\")} !important;\n @if $colour == \"pink\" {\n --accent: #{brand-colour(\"pink\")} !important;\n --accent-background: #{brand-colour(\"maroon\")} !important;\n --accent-background-light: #{brand-colour(\"pastel-pink\")} !important;\n --button-accent-background: #{brand-colour(\"maroon\")} !important;\n } @else if $colour == \"orange\" {\n --accent: #{brand-colour(\"orange\")} !important;\n --accent-background: #{brand-colour(\"chestnut\")} !important;\n --accent-background-light: #{brand-colour(\"pastel-orange\")} !important;\n --button-accent-background: #{brand-colour(\"chestnut\")} !important;\n } @else if $colour == \"green\" {\n --accent: #{brand-colour(\"green\")} !important;\n --accent-background: #{brand-colour(\"forest\")} !important;\n --accent-background-light: #{brand-colour(\"pastel-green\")} !important;\n --button-accent-background: #{brand-colour(\"forest\")} !important;\n } @else if $colour == \"blue\" {\n --accent: #{brand-colour(\"blue\")} !important;\n --accent-background: #{brand-colour(\"navy\")} !important;\n --accent-background-light: #{brand-colour(\"pastel-blue\")} !important;\n --button-accent-background: #{brand-colour(\"navy\")} !important;\n }\n }\n }\n}\n\n@mixin colour-font(\n $colour,\n $important: false,\n $default-palette: colour.$colour-palette-default\n) {\n color: map.get($default-palette, $colour) if($important, !important, null);\n color: var(--#{$colour}) if($important, !important, null);\n}\n\n@mixin colour-background($colour, $important: false) {\n background-color: map.get(colour.$colour-palette-default, $colour)\n if($important, !important, null);\n background-color: var(--#{$colour}) if($important, !important, null);\n}\n\n@mixin colour-border(\n $colour,\n $width: \"\",\n $style: solid,\n $direction: \"\",\n $important: false\n) {\n @if $direction != \"\" {\n @if $width != \"\" {\n $property: border-#{$direction};\n border-#{$direction}: $width\n map.get(colour.$colour-palette-default, $colour)\n $style\n if($important, !important, null);\n border-#{$direction}: $width\n var(--#{$colour})\n $style\n if($important, !important, null);\n } @else {\n border-#{$direction}-color: map.get(\n colour.$colour-palette-default,\n $colour\n )\n if($important, !important, null);\n border-#{$direction}-color: var(--#{$colour})\n if($important, !important, null);\n }\n } @else {\n @if $width != \"\" {\n border: $width\n map.get(colour.$colour-palette-default, $colour)\n $style\n if($important, !important, null);\n border: $width var(--#{$colour}) $style if($important, !important, null);\n } @else {\n border-color: map.get(colour.$colour-palette-default, $colour)\n if($important, !important, null);\n border-color: var(--#{$colour}) if($important, !important, null);\n }\n }\n}\n\n@mixin colour-outline($colour, $width: \"\", $style: solid, $important: false) {\n @if $width != \"\" {\n outline: $width\n map.get(colour.$colour-palette-default, $colour)\n $style\n if($important, !important, null);\n outline: $width var(--#{$colour}) $style if($important, !important, null);\n } @else {\n outline-color: map.get(colour.$colour-palette-default, $colour)\n if($important, !important, null);\n outline-color: var(--#{$colour}) if($important, !important, null);\n }\n}\n\n@mixin colour-fill($colour, $important: false) {\n fill: map.get(colour.$colour-palette-default, $colour)\n if($important, !important, null);\n fill: var(--#{$colour}) if($important, !important, null);\n}\n\n%plain {\n .tna-template--system-theme & {\n @include colour-css-vars;\n\n @media (prefers-color-scheme: dark) {\n @include colour-css-vars-dark;\n }\n\n @media (prefers-contrast: more) {\n @include colour-css-vars-high-contrast;\n }\n\n @media (prefers-contrast: more) and (prefers-color-scheme: dark) {\n @include colour-css-vars-high-contrast-dark;\n }\n }\n\n .tna-template--light-theme & {\n @include colour-css-vars;\n }\n\n .tna-template--dark-theme & {\n @include colour-css-vars-dark;\n }\n\n .tna-template--high-contrast-theme & {\n @include colour-css-vars-high-contrast;\n }\n\n .tna-template--high-contrast-theme.tna-template--dark-theme & {\n @include colour-css-vars-high-contrast-dark;\n }\n\n --background: var(--page-background);\n}\n\n@mixin plain {\n @extend %plain;\n}\n\n%contrast {\n --background: var(--contrast-background);\n --font-base: var(--contrast-font-base);\n --font-dark: var(--contrast-font-dark);\n --font-light: var(--contrast-font-light);\n --icon-light: var(--contrast-icon-light);\n --link: var(--contrast-link);\n --link-visited: var(--contrast-link-visited);\n --keyline: var(--contrast-keyline);\n --keyline-dark: var(--contrast-keyline-dark);\n --button-text: var(--contrast-button-text);\n --button-background: var(--contrast-button-background);\n --button-hover-text: var(--contrast-button-hover-text);\n --button-hover-background: var(--contrast-button-hover-background);\n\n @include colour-background(\"background\");\n\n @include colour-font(\"font-base\", false, colour.$colour-palette-dark);\n}\n\n@mixin contrast {\n @extend %contrast;\n}\n\n%contrast-on-mobile {\n @include media.on-mobile {\n --background: var(--contrast-background);\n --font-base: var(--contrast-font-base);\n --font-dark: var(--contrast-font-dark);\n --font-light: var(--contrast-font-light);\n --icon-light: var(--contrast-icon-light);\n --link: var(--contrast-link);\n --link-visited: var(--contrast-link-visited);\n --keyline: var(--contrast-keyline);\n --keyline-dark: var(--contrast-keyline-dark);\n --button-text: var(--contrast-button-text);\n --button-background: var(--contrast-button-background);\n --button-hover-text: var(--contrast-button-hover-text);\n --button-hover-background: var(--contrast-button-hover-background);\n\n @include colour-background(\"background\");\n\n @include colour-font(\"font-base\", false, colour.$colour-palette-dark);\n }\n}\n\n@mixin contrast-on-mobile {\n @extend %contrast-on-mobile;\n}\n\n%accent {\n --background: var(--accent-background);\n --font-base: var(--accent-font-base);\n --font-dark: var(--accent-font-dark);\n --font-light: var(--accent-font-light);\n --icon-light: var(--accent-icon-light);\n --link: var(--accent-link);\n --link-visited: var(--accent-link-visited);\n --keyline: var(--accent-keyline);\n --keyline-dark: var(--accent-keyline-dark);\n\n @include colour-background(\"background\");\n\n @include colour-font(\"font-base\", false, colour.$colour-palette-dark);\n}\n\n@mixin accent {\n @extend %accent;\n}\n\n%tint {\n @include colour-background(\"background-tint\");\n}\n\n@mixin tint {\n @extend %tint;\n}\n\n%accent-background {\n @include colour-background(\"accent-background\");\n}\n\n@mixin accent-background {\n @extend %accent-background;\n}\n\n%accent-light {\n --background: var(--accent-background-light);\n --font-base: #{map.get(colour.$colour-palette-default, \"font-base\")};\n --font-dark: #{map.get(colour.$colour-palette-default, \"font-dark\")};\n --font-light: #{map.get(colour.$colour-palette-default, \"font-light\")};\n --link: #{map.get(colour.$colour-palette-default, \"font-dark\")};\n --link-visited: #{map.get(colour.$colour-palette-default, \"link-visited\")};\n --keyline: #{map.get(colour.$colour-palette-default, \"keyline\")};\n --keyline-dark: #{map.get(colour.$colour-palette-default, \"keyline-dark\")};\n --button-text: #{map.get(colour.$colour-palette-default, \"button-text\")};\n --button-background: #{map.get(\n colour.$colour-palette-default,\n \"button-background\"\n )};\n --button-hover-text: #{map.get(\n colour.$colour-palette-default,\n \"button-hover-text\"\n )};\n --button-hover-background: #{map.get(\n colour.$colour-palette-default,\n \"button-hover-background\"\n )};\n\n @include colour-background(\"background\");\n}\n\n@mixin accent-light {\n @extend %accent-light;\n}\n\n@mixin on-high-contrast {\n .tna-template--high-contrast-theme & {\n @content;\n }\n\n .tna-template--system-theme & {\n @media (prefers-contrast: more) {\n @content;\n }\n }\n}\n","@use \"../tools/colour\";\n\n.tna-visually-hidden,\n.tna-\\!--visually-hidden {\n width: 1px !important;\n height: 1px !important;\n margin: 0 !important;\n padding: 0 !important;\n\n position: absolute !important;\n top: -9999px !important;\n left: -9999px !important;\n z-index: -1 !important;\n\n overflow: hidden !important;\n\n clip: rect(0, 0, 0, 0) !important;\n\n border: 0 !important;\n\n background-color: transparent !important;\n\n &::before,\n &::after {\n content: \"\\00a0\";\n }\n}\n\n:focus {\n z-index: 9;\n\n @include colour.colour-outline(\"focus-outline\", 0.3125rem, solid);\n outline-offset: 0.125rem;\n}\n\n.tna-\\!--no-focus-style {\n &:focus {\n outline: none;\n }\n}\n","@use \"../tools/colour\";\n\n:root {\n @include colour.colour-css-vars;\n}\n\n.tna-template {\n @include colour.colour-background(\"page-background\");\n\n accent-color: var(--accent);\n\n &--system-theme {\n @include colour.colour-css-vars;\n\n @media (prefers-color-scheme: dark) {\n @include colour.colour-css-vars-dark;\n }\n\n @media (prefers-contrast: more) {\n @include colour.colour-css-vars-high-contrast;\n\n {\n background-image: none !important;\n }\n }\n\n @media (prefers-contrast: more) and (prefers-color-scheme: dark) {\n @include colour.colour-css-vars-high-contrast-dark;\n }\n }\n\n &--light-theme {\n @include colour.colour-css-vars;\n }\n\n &--dark-theme {\n @include colour.colour-css-vars-dark;\n }\n\n &--high-contrast-theme {\n @include colour.colour-css-vars-high-contrast;\n\n * {\n background-image: none !important;\n }\n\n &.tna-template--dark-theme {\n @include colour.colour-css-vars-high-contrast-dark;\n }\n }\n\n &--black-accent {\n @include colour.accent-css-vars(\"black\");\n }\n\n &--yellow-accent {\n @include colour.accent-css-vars(\"yellow\");\n }\n\n &--pink-accent {\n @include colour.accent-css-vars(\"pink\");\n }\n\n &--orange-accent {\n @include colour.accent-css-vars(\"orange\");\n }\n\n &--green-accent {\n @include colour.accent-css-vars(\"green\");\n }\n\n &--blue-accent {\n @include colour.accent-css-vars(\"blue\");\n }\n\n @media (prefers-reduced-motion) {\n * {\n animation: none !important;\n transition: none !important;\n }\n }\n}\n\n.tna-background {\n &-tint {\n @include colour.tint;\n }\n\n &-contrast {\n @include colour.contrast;\n }\n\n &-accent {\n @include colour.accent;\n }\n\n &-accent-light {\n @include colour.accent-light;\n }\n}\n","@use \"../tools/media\";\n@use \"../variables/grid\";\n\n.tna-columns {\n column-gap: grid.$gutter-width;\n\n &--2 {\n column-count: 2;\n }\n\n &--3 {\n column-count: 3;\n }\n\n @include media.on-tiny {\n column-gap: grid.$gutter-width-tiny;\n }\n\n @include media.on-small {\n @for $i from 1 through 4 {\n &--#{$i}-small {\n column-count: $i;\n }\n }\n }\n\n @include media.on-tiny {\n @for $i from 1 through 4 {\n &--#{$i}-tiny {\n column-count: $i;\n }\n }\n }\n\n &__block {\n break-inside: avoid;\n }\n\n &:has(&__block:only-of-type) {\n column-count: 1;\n }\n}\n","$largest-container-width: 75.25rem !default;\n\n$gutter-width: 2rem !default;\n$gutter-width-tiny: 1rem !default;\n\n$column-count: 12;\n$column-count-medium: 6;\n$column-count-small: 4;\n$column-count-tiny: 2;\n","@use \"../variables/media\";\n\n// 0 ======= 320 = 480 ===== 768 == 1024 ========================== min-width/max-width (px)\n// \| . \| \| \|\n// \|-TINY----------\|-SMALL---\|-MED--\|-LARGE------------------------\n// \| . \| \| \|\n// \|<------------->\| \| \| on-tiny\n// \|<----------------------->\| \| on-mobile\n// \|<------------------------------>\| on-smaller-than-large\n// \| . \|<------->\| \| on-small\n// \| . \|<------------------------- on-larger-than-tiny\n// \| . \| \|<---->\| on-medium\n// \| . \| \|<--------------- on-larger-than-mobile\n// \| . \| \| \|<-------- on-large\n// \|<------->. \| \| \| Smallest device\n\n@mixin on-large() {\n @media #{media.$media-large} {\n @content;\n }\n}\n\n@mixin on-medium() {\n @media #{media.$media-medium} {\n @content;\n }\n}\n\n@mixin on-small() {\n @media #{media.$media-small} {\n @content;\n }\n}\n\n@mixin on-tiny() {\n @media #{media.$media-tiny} {\n @content;\n }\n}\n\n@mixin on-larger-than-mobile() {\n @media #{media.$media-gt-mobile} {\n @content;\n }\n}\n\n@mixin on-larger-than-tiny() {\n @media #{media.$media-gt-tiny} {\n @content;\n }\n}\n\n@mixin on-smaller-than-large() {\n @media #{media.$media-lt-large} {\n @content;\n }\n}\n\n@mixin on-mobile() {\n @media #{media.$media-mobile} {\n @content;\n }\n}\n\n@mixin on-print() {\n @media print {\n @content;\n }\n}\n","@use \"sass:map\";\n@use \"../variables/spacing\";\n@use \"../tools/media\";\n\n%space-above {\n margin-top: 2rem;\n\n &:first-child {\n margin-top: 0;\n }\n}\n\n@mixin space-above {\n @extend %space-above;\n}\n\n@function space($size) {\n @return map.get(spacing.$spacing, $size);\n}\n\n@function space-mobile($size) {\n @return map.get(spacing.$spacing-mobile, $size);\n}\n\n@mixin no-spacing-generator($suffix: \"\") {\n @if $suffix != \"\" {\n $suffix: \"-\" + $suffix;\n }\n @each $property in margin, padding {\n @each $direction in top, bottom {\n $combined-direction: \"\";\n @if $direction == top or $direction == bottom {\n $combined-direction: vertical;\n } @else if $direction == right or $direction == left {\n $combined-direction: horizontal;\n }\n @if $combined-direction {\n .tna-\\!--no-#{$property}-#{$direction}#{$suffix},\n .tna-\\!--no-#{$property}-#{$combined-direction}#{$suffix} {\n #{$property}-#{$direction}: 0 !important;\n }\n } @else {\n .tna-\\!--no-#{$property}-#{$direction}#{$suffix} {\n #{$property}-#{$direction}: 0 !important;\n }\n }\n }\n }\n}\n\n@mixin spacing-generator($suffix: \"\") {\n @each $property in margin, padding {\n @each $direction in top, bottom {\n @each $size, $amount in spacing.$spacing {\n @if $direction == all {\n .tna-\\!--#{$property}-#{$size} {\n #{$property}: #{$amount} !important;\n }\n } @else {\n $combined-direction: \"\";\n @if $direction == top or $direction == bottom {\n $combined-direction: vertical;\n } @else if $direction == right or $direction == left {\n $combined-direction: horizontal;\n }\n @if $combined-direction {\n .tna-\\!--#{$property}-#{$direction}-#{$size},\n .tna-\\!--#{$property}-#{$combined-direction}-#{$size} {\n #{$property}-#{$direction}: #{$amount} !important;\n }\n } @else {\n .tna-\\!--#{$property}-#{$direction}-#{$size} {\n #{$property}-#{$direction}: #{$amount} !important;\n }\n }\n }\n }\n }\n }\n\n @include media.on-mobile {\n @each $property in margin, padding {\n @each $direction in top, bottom {\n @each $size, $amount in spacing.$spacing-mobile {\n @if $direction == all {\n .tna-\\!--#{$property}-#{$size} {\n #{$property}: #{$amount} !important;\n }\n } @else {\n $combined-direction: \"\";\n @if $direction == top or $direction == bottom {\n $combined-direction: vertical;\n } @else if $direction == right or $direction == left {\n $combined-direction: horizontal;\n }\n @if $combined-direction {\n .tna-\\!--#{$property}-#{$direction}-#{$size},\n .tna-\\!--#{$property}-#{$combined-direction}-#{$size} {\n #{$property}-#{$direction}: #{$amount} !important;\n }\n } @else {\n .tna-\\!--#{$property}-#{$direction}-#{$size} {\n #{$property}-#{$direction}: #{$amount} !important;\n }\n }\n }\n }\n }\n }\n }\n}\n","@use \"../tools/colour\";\n@use \"../tools/media\";\n@use \"../tools/spacing\";\n@use \"../variables/typography\";\n\n.tna-template {\n min-width: 320px;\n width: 100%;\n height: 100%;\n\n /\n ------------------------------------------\n * Support ended with iOS 13 released on 19th\n * September 2019. Deprecate in the future if\n * iOS <13 share drops low enough.\n * https://caniuse.com/mdn-css_properties_-webkit-overflow-scrolling\n * ------------------------------------------\n /\n -webkit-overflow-scrolling: touch;\n\n font-size: #{typography.$relative-1rem-px}px;\n}\n\n.tna-template__body {\n min-height: 100%;\n margin: 0;\n padding: 0;\n\n &:has(.tna-header):has(#main-content[role=\"main\"]):has(.tna-footer) {\n display: flex;\n flex-direction: column;\n\n #main-content {\n flex: 1;\n }\n }\n}\n\nimg,\nsvg,\npicture,\nvideo,\ncanvas {\n max-width: 100%;\n height: auto;\n\n display: block;\n}\n\nvideo,\ncanvas {\n width: 100%;\n}\n\n[hidden] {\n display: none;\n}\n\nhr {\n margin: 0;\n\n border-width: 1px 0 0;\n @include colour.colour-border(\"keyline\");\n border-style: solid;\n}\n\n.tna-section {\n padding-top: 3rem;\n padding-bottom: 3rem;\n\n @include media.on-mobile {\n padding-top: 2rem;\n padding-bottom: 2rem;\n }\n}\n\n.tna-aside {\n padding: 2rem;\n\n @include spacing.space-above;\n\n @include media.on-mobile {\n padding: 1rem;\n }\n\n @include colour.on-high-contrast {\n @include colour.colour-border(\"keyline-dark\", 1px);\n }\n\n &--tight {\n padding: 1rem;\n }\n}\n","@use \"../tools/colour\";\n@use \"../tools/media\";\n@use \"../tools/spacing\";\n@use \"../tools/typography\";\n\n.tna-ul,\n.tna-ol {\n margin: 1rem 0 0;\n padding: 0 0 0 2rem;\n\n &:first-child {\n margin-top: 0;\n }\n\n li::marker {\n @include colour.colour-font(\"accent-background\");\n font-weight: 700;\n }\n\n &--plain {\n padding-left: 0;\n\n list-style: none;\n }\n}\n\n.tna-dl {\n margin: 1rem 0 0;\n\n display: flex;\n flex-wrap: wrap;\n\n &:first-child {\n margin-top: 0;\n }\n\n dt,\n dd {\n margin: 0;\n padding: 0.5rem 1rem;\n\n position: relative;\n\n box-sizing: border-box;\n\n word-wrap: break-word;\n }\n\n &--plain {\n dt {\n padding-left: 0;\n }\n\n dd {\n padding-right: 0;\n }\n }\n\n dt {\n width: 30%;\n\n @include typography.main-font-weight-bold;\n }\n\n dd {\n width: 70%;\n\n + dd {\n margin-left: 30%;\n }\n }\n\n &--icon-padding {\n dt {\n padding-left: 3rem !important;\n\n position: relative;\n\n .fa-solid {\n overflow: visible;\n\n position: absolute;\n top: 50%;\n left: 1rem;\n\n @include colour.colour-font(\"icon-light\");\n text-align: left;\n\n transform: translateY(-50%);\n }\n }\n }\n\n &--icon-padding#{&}--plain {\n dt {\n padding-left: 2rem !important;\n\n .fa-solid {\n left: 0;\n }\n }\n\n dd {\n padding-left: 2rem;\n }\n }\n\n &:not(&--plain) {\n dt:first-child,\n dd:nth-of-type(2n) + dt,\n dd:nth-of-type(2n + 1) {\n @include colour.colour-background(\"background-tint\");\n }\n }\n\n @include media.on-small {\n dt {\n width: 35%;\n }\n\n dd {\n width: 65%;\n\n + dd {\n margin-left: 35%;\n }\n }\n }\n\n @include media.on-tiny {\n dt,\n dd {\n width: 100%;\n margin-left: 0;\n }\n\n dd {\n padding-left: 1rem;\n }\n\n &--plain {\n dt {\n padding-bottom: 0;\n }\n\n dd {\n padding-top: 0;\n }\n }\n\n &:not(&--plain) {\n dt {\n @include colour.colour-background(\"background-tint\");\n }\n\n dd {\n background: transparent !important;\n }\n }\n }\n\n @include colour.on-high-contrast {\n @include colour.colour-border(\"keyline-dark\", 1px, solid, bottom);\n\n dt,\n dd {\n background: transparent !important;\n\n @include colour.colour-border(\"keyline-dark\", 1px, solid, top);\n }\n }\n}\n","@use \"sass:math\";\n@use \"colour\";\n@use \"../variables/typography\";\n\n@mixin relative-font-size($fontSizePx) {\n font-size: #{math.div($fontSizePx, typography.$relative-1rem-px)}rem;\n}\n\n@mixin interacted-text-decoration {\n text-decoration: underline;\n text-decoration-thickness: typography.$interactive-text-decoration-thickness;\n}\n\n@mixin main-font-weight {\n font-weight: typography.$main-font-weight;\n}\n\n@mixin main-font-weight-bold {\n font-weight: typography.$main-font-weight-bold;\n}\n\n@mixin main-font {\n font-family: typography.$main-font-family;\n @include main-font-weight;\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-weight {\n font-weight: typography.$detail-font-weight;\n}\n\n@mixin detail-font-weight-bold {\n font-weight: typography.$detail-font-weight-bold;\n}\n\n@mixin detail-font {\n font-family: typography.$detail-font-family;\n @include detail-font-weight;\n}\n\n@mixin detail-font-small {\n @include detail-font;\n @include relative-font-size(14);\n text-transform: uppercase;\n line-height: #{math.div(typography.$relative-1rem-px, 14)};\n // line-height: 1;\n}\n","@use \"sass:math\";\n\n$use-local-fonts: false !default;\n\n$relative-1rem-px: 16;\n\n$body-font-size-px: 18 !default;\n$body-font-size-px-mobile: 17 !default;\n$body-line-height: #{math.div(16, 18) 2} !default; // 1.77777\n\n$interactive-text-decoration-thickness: 3.5px !default;\n\n$main-font-family: \"Open Sans\", sans-serif !default;\n$main-font-weight: 400 !default;\n$main-font-weight-bold: 700 !default;\n\n$heading-font-family: supria-sans-condensed, \"Arial Narrow\", sans-serif !default;\n$heading-font-weight: 500 !default;\n\n$detail-font-family: \"Roboto Mono\", monospace !default;\n$detail-font-weight: 400 !default;\n$detail-font-weight-bold: 500 !default;\n","@use \"sass:map\";\n@use \"../tools/media\";\n@use \"../tools/spacing\";\n\n@mixin hide-on($suffix) {\n .tna-\\!--hide-on-#{$suffix} {\n display: none;\n }\n}\n\n@include spacing.no-spacing-generator;\n@include spacing.spacing-generator;\n\n@include media.on-large {\n @include spacing.no-spacing-generator(\"large\");\n @include hide-on(\"large\");\n}\n\n@include media.on-medium {\n @include spacing.no-spacing-generator(\"medium\");\n @include hide-on(\"medium\");\n}\n\n@include media.on-small {\n @include spacing.no-spacing-generator(\"small\");\n @include hide-on(\"small\");\n}\n\n@include media.on-tiny {\n @include spacing.no-spacing-generator(\"tiny\");\n @include hide-on(\"tiny\");\n}\n","@use \"sass:math\";\n@use \"../../variables/grid\";\n@use \"../../tools/media\";\n@use \"../../tools/grid\" as gridTools;\n@use \"../../utilities\";\n\n.tna-container {\n max-width: grid.$largest-container-width;\n width: 100%;\n margin-right: auto;\n margin-left: auto;\n padding-right: math.div(grid.$gutter-width, 2);\n padding-left: math.div(grid.$gutter-width, 2);\n\n box-sizing: border-box;\n\n display: flex;\n flex-wrap: wrap;\n justify-content: flex-start;\n align-items: stretch;\n\n &--no-padding,\n &--no-padding-all {\n max-width: grid.$largest-container-width - (grid.$gutter-width * 2);\n }\n\n &--max {\n max-width: none;\n }\n\n &--centred {\n justify-content: center;\n }\n}\n\n.tna-column {\n margin: 0;\n padding-right: math.div(grid.$gutter-width, 2);\n padding-left: math.div(grid.$gutter-width, 2);\n\n box-sizing: border-box;\n\n &--container {\n display: flex;\n flex-wrap: wrap;\n justify-content: stretch;\n align-items: stretch;\n }\n}\n\n@include gridTools.columns-generator(grid.$column-count);\n\n@include media.on-medium {\n @include gridTools.columns-generator(grid.$column-count-medium, \"medium\");\n}\n\n@include media.on-tiny {\n .tna-container {\n padding-right: math.div(grid.$gutter-width-tiny, 2);\n padding-left: math.div(grid.$gutter-width-tiny, 2);\n }\n\n .tna-column {\n padding-right: math.div(grid.$gutter-width-tiny, 2);\n padding-left: math.div(grid.$gutter-width-tiny, 2);\n }\n}\n\n@include media.on-small {\n @include gridTools.columns-generator(grid.$column-count-small, \"small\");\n}\n\n@include media.on-tiny {\n @include gridTools.columns-generator(grid.$column-count-tiny, \"tiny\");\n}\n\n.tna-container--no-padding,\n.tna-container--no-padding-all,\n.tna-container--no-padding-all > .tna-column,\n.tna-column--no-padding,\n.tna-column--container--no-padding-all,\n.tna-column--container--no-padding-all > .tna-column {\n padding-right: 0;\n padding-left: 0;\n}\n","@use \"sass:math\";\n@use \"../variables/grid\";\n\n@mixin columns-generator($count, $suffix: \"\") {\n @if $suffix != \"\" {\n $suffix: \"-\" + $suffix;\n }\n\n .tna-column {\n &--full#{$suffix} {\n width: 100%;\n flex: none;\n }\n\n @for $i from 1 through $count - 1 {\n $simplest-fraction-found: false;\n\n @for $j from math.div($count, 2) through 1 {\n @if (\n $count % $j == 0 and $i % $j == 0 and $simplest-fraction-found != true\n ) {\n &--width-#{math.div($i, $j)}-#{math.div($count, $j)}#{$suffix} {\n width: math.div(100%, $count) * $i;\n flex: none;\n }\n\n &--margin-right-#{math.div($i, $j)}-#{math.div($count, $j)}#{$suffix} {\n margin-right: math.div(100%, $count) * $i;\n }\n\n &--margin-left-#{math.div($i, $j)}-#{math.div($count, $j)}#{$suffix} {\n margin-left: math.div(100%, $count) * $i;\n }\n\n $simplest-fraction-found: true;\n }\n }\n\n @if $simplest-fraction-found != true {\n &--width-#{$i}-#{$count}#{$suffix} {\n width: math.div(100%, $count) * $i;\n flex: none;\n }\n\n &--margin-right-#{$i}-#{$count}#{$suffix} {\n margin-right: math.div(100%, $count) * $i;\n }\n\n &--margin-left-#{$i}-#{$count}#{$suffix} {\n margin-left: math.div(100%, $count) * $i;\n }\n }\n }\n\n @for $i from 1 through 3 {\n &--flex-#{$i}#{$suffix} {\n width: auto;\n\n flex: $i 0;\n }\n }\n\n @for $i from 1 through 4 {\n &--order-#{$i}#{$suffix} {\n order: $i;\n }\n }\n }\n}\n","@use \"sass:math\";\n@use \"../../variables/colour\" as colourVars; // TODO\n@use \"../../variables/grid\" as gridVars;\n@use \"../../tools/colour\";\n@use \"../../tools/typography\";\n@use \"../../tools/media\";\n@use \"../../utilities\";\n@use \"../grid\";\n\n// TODO: Only for the header component at the moment - remove on redesign\n@mixin uninvert {\n @include colour.colour-css-vars;\n\n .tna-template--system-theme & {\n @include colour.colour-css-vars;\n\n @media (prefers-color-scheme: dark) {\n @include colour.colour-css-vars-dark;\n }\n\n @media (prefers-contrast: more) {\n @include colour.colour-css-vars-high-contrast;\n }\n\n @media (prefers-contrast: more) and (prefers-color-scheme: dark) {\n @include colour.colour-css-vars-high-contrast-dark;\n }\n }\n\n .tna-template--light-theme & {\n @include colour.colour-css-vars;\n }\n\n .tna-template--dark-theme & {\n @include colour.colour-css-vars-dark;\n }\n\n .tna-template--high-contrast-theme & {\n @include colour.colour-css-vars-high-contrast;\n }\n\n .tna-template--high-contrast-theme.tna-template--dark-theme & {\n @include colour.colour-css-vars-high-contrast-dark;\n }\n}\n\n.tna-header {\n @include colour.contrast;\n\n &:not(&--accent) {\n background-color: colour.brand-colour(\"black\");\n }\n\n .tna-template--system-theme & {\n @media (prefers-contrast: more) and (prefers-color-scheme: light) {\n @include colour.colour-background(\"background-tint\");\n }\n }\n\n .tna-template--high-contrast-theme:not(.tna-template--dark-theme) & {\n @include colour.colour-background(\"background-tint\");\n }\n\n &__exit {\n padding-top: 0.5rem;\n padding-bottom: 0.5rem;\n\n text-align: right;\n\n background-color: colourVars.$dark-grey;\n }\n\n &__exit-link {\n text-decoration: none;\n @include typography.relative-font-size(16);\n\n &,\n &:link,\n &:visited {\n color: #fff;\n }\n\n &:hover {\n text-decoration: underline;\n }\n\n .fa-solid {\n margin-left: 0.5rem;\n }\n }\n\n &__contents {\n &.tna-container {\n justify-content: space-between;\n }\n }\n\n &__logo {\n padding-top: 1.5rem;\n padding-bottom: 1.5rem;\n }\n\n &__logo-link {\n display: flex;\n align-items: flex-end;\n\n color: inherit;\n text-decoration: none;\n\n &,\n &:link,\n &:visited {\n color: inherit;\n }\n\n &:hover {\n text-decoration: none;\n\n @include colour.colour-outline(\"font-dark\", 0.375rem, solid);\n outline-offset: 1px;\n }\n }\n\n .tna-logo {\n width: 6rem;\n height: 6rem;\n\n display: inline-block;\n }\n\n .tna-logo__foreground {\n @include colour.colour-fill(\"font-dark\");\n }\n\n .tna-logo__background {\n fill: none;\n }\n\n &__logo-strapline {\n margin: 0 0.75rem;\n\n display: inline-block;\n\n line-height: 2rem;\n text-transform: uppercase;\n }\n\n &__navigation-toggle {\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 transition: height 1ms 200ms;\n\n &::before,\n &::after {\n height: 0.25rem;\n\n display: block;\n\n position: absolute;\n right: 0;\n left: 0;\n\n background-color: inherit;\n\n transition:\n top 200ms 200ms,\n bottom 200ms 200ms,\n transform 200ms;\n\n content: \"\";\n }\n\n &::before {\n top: 0;\n }\n\n &::after {\n bottom: 0;\n }\n }\n\n &__navigation-toggle-button {\n height: 2rem;\n padding: 0;\n\n display: block;\n\n position: relative;\n\n appearance: none;\n\n font-size: 0;\n\n background: none;\n\n border: 0 transparent solid;\n border-width: 0.25rem 0;\n\n cursor: pointer;\n\n &--opened {\n .tna-header__hamburger {\n height: 0;\n\n &::before,\n &::after {\n transition:\n top 200ms,\n bottom 200ms,\n transform 200ms 200ms;\n }\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\n &__top-navigation-items {\n margin: 0;\n padding: 1.25rem 0;\n\n display: flex;\n justify-content: flex-end;\n gap: 0.5rem 1.5rem;\n\n // order: 1;\n\n list-style: none;\n\n line-height: 1;\n }\n\n &__top-navigation-item {\n display: block;\n }\n\n &__top-navigation-item-link {\n display: flex;\n align-items: center;\n\n text-decoration: none;\n @include typography.relative-font-size(16);\n\n &,\n &:link,\n &:visited {\n color: inherit;\n }\n\n &:hover,\n &--selected {\n &,\n &:link,\n &:visited {\n @include typography.interacted-text-decoration;\n }\n }\n\n .fa-solid,\n .fa-brands {\n margin-right: 0.375rem;\n }\n }\n\n &__navigation-items {\n margin: 0;\n padding: 0;\n\n // order: 2;\n\n list-style: none;\n\n white-space: nowrap;\n }\n\n &__navigation-item {\n margin-left: 0.75rem;\n\n display: inline-block;\n }\n\n &__navigation-item-link {\n padding: 0.5rem 1rem;\n\n display: inline-block;\n\n @include typography.heading-font;\n text-decoration: none;\n line-height: 2;\n\n // transition:\n // color 200ms,\n // background-color 200ms;\n\n &,\n &:link,\n &:visited {\n color: inherit;\n }\n\n &:hover,\n &--selected {\n text-decoration: none;\n\n &,\n &:link,\n &:visited {\n @include uninvert;\n @include colour.colour-font(\"font-dark\");\n @include colour.colour-background(\"page-background\");\n }\n }\n }\n\n &--accent {\n @include colour.accent;\n }\n\n @include media.on-larger-than-mobile {\n .tna-header__navigation-toggle {\n display: none;\n }\n }\n\n @include media.on-mobile {\n &__contents {\n &.tna-container {\n padding-right: 0;\n padding-left: 0;\n }\n }\n\n &__logo {\n padding-top: 1rem;\n padding-bottom: 1rem;\n }\n\n .tna-logo {\n width: 4.5rem;\n height: 4.5rem;\n }\n\n &__logo-strapline {\n line-height: 1.5;\n }\n\n &__navigation-toggle {\n &.tna-column {\n // padding-right: gridVars.$gutter-width-tiny;\n padding-left: 0;\n }\n }\n\n &__navigation {\n @include uninvert;\n @include colour.colour-font(\"font-base\");\n @include typography.relative-font-size(20);\n\n align-items: stretch;\n flex-direction: column;\n\n &.tna-column {\n padding-right: 0;\n padding-left: 0;\n }\n\n .tna-template--js-enabled & {\n display: none;\n\n &--open {\n display: flex;\n }\n }\n }\n\n &__top-navigation-items {\n padding: 0.5rem 1rem;\n\n justify-content: flex-start;\n\n @include colour.colour-background(\"page-background\");\n\n @include colour.colour-border(\"keyline\", 1px, solid, bottom);\n }\n\n &__top-navigation-item {\n margin: 0;\n padding: 0.5rem;\n }\n\n &__top-navigation-item-link {\n }\n\n &__navigation-items {\n width: 100%;\n\n @include colour.colour-background(\"page-background\");\n }\n\n &__navigation-item {\n margin: 0;\n\n display: block;\n\n @include colour.colour-border(\"keyline\", 1px, solid, bottom);\n }\n\n &__navigation-item-link {\n padding-right: gridVars.$gutter-width-tiny;\n padding-left: gridVars.$gutter-width-tiny + 0.5rem;\n\n display: block;\n\n position: relative;\n\n line-height: #{math.div(1, 1.125) * 2};\n\n &::after {\n width: 0;\n\n position: absolute;\n top: 0;\n bottom: 0;\n left: 0;\n\n @include colour.colour-background(\"font-dark\");\n\n // transition: width 200ms;\n\n content: \"\";\n }\n\n &:hover {\n &::after {\n width: 0.25rem;\n\n // transition: width 50ms;\n }\n }\n\n &--selected {\n &::after,\n &:hover::after {\n width: 0.5rem;\n }\n }\n }\n }\n\n @include media.on-small {\n &__logo {\n &.tna-column {\n padding-right: gridVars.$gutter-width;\n padding-left: gridVars.$gutter-width;\n }\n }\n\n &__navigation-toggle {\n &.tna-column {\n padding-right: gridVars.$gutter-width;\n }\n }\n }\n\n @include media.on-tiny {\n &__logo {\n &.tna-column {\n padding-right: gridVars.$gutter-width-tiny;\n padding-left: gridVars.$gutter-width-tiny;\n }\n }\n\n .tna-logo {\n width: 3.5rem;\n height: 3.5rem;\n }\n\n &__logo-strapline {\n line-height: 1;\n }\n\n &__navigation-toggle {\n &.tna-column {\n padding-right: gridVars.$gutter-width-tiny;\n }\n }\n }\n\n @include colour.on-high-contrast {\n position: relative;\n\n &::after {\n position: absolute;\n inset: auto 0 0;\n z-index: 1;\n\n @include colour.colour-border(\"keyline-dark\", 1px, solid, bottom);\n\n content: \"\";\n }\n\n &__navigation {\n position: relative;\n z-index: 2;\n }\n\n @include media.on-larger-than-mobile {\n &__navigation-item-link {\n border: 1px transparent solid;\n border-bottom: none;\n\n &:hover,\n &--selected {\n &,\n &:link,\n &:visited {\n @include colour.colour-border(\"keyline-dark\");\n }\n }\n }\n }\n }\n}\n","@use \"sass:map\";\n\n$colour-palette-brand: (\n \"black\": #000,\n \"grey\": #8c9694,\n \"light-grey\": #d9d9d6,\n \"white\": #fff,\n\n \"yellow\": #fc0,\n \"pink\": #fe1d57,\n \"orange\": #fd3f03,\n \"green\": #86bc25,\n \"blue\": #00b0ff,\n\n \"brown\": #654e37,\n \"maroon\": #9c193a,\n \"chestnut\": #8f3415,\n \"forest\": #00623b,\n \"navy\": #004c7e,\n\n \"cream\": #f9f7e2,\n \"pastel-pink\": #fad3d4,\n \"pastel-orange\": #f9e1bc,\n \"pastel-green\": #dde5d5,\n \"pastel-blue\": #d4e5ef,\n);\n\n@function hex-to-rgb($hex, $opacity: 1) {\n @if $opacity == 1 {\n @return rgb(red($hex) green($hex) blue($hex));\n } @else {\n @return rgb(red($hex) green($hex) blue($hex) / #{$opacity});\n }\n}\n\n@function brand-colour($colour, $opacity: 1) {\n @return hex-to-rgb(map.get($colour-palette-brand, $colour), $opacity);\n}\n\n$dark-grey: #26262a;\n$base-font: #343338 !default;\n$link-colour: brand-colour(\"navy\") !default;\n$link-colour-visited: #4c2c92 !default;\n\n/\n=========================================\nLIGHT THEME (DEFAULT)\n=========================================\n/\n$colour-palette-default: (\n \"page-background\": #f4f4f4,\n \"background-tint\": #e2e2e2,\n \"font-base\": $base-font,\n \"font-dark\": brand-colour(\"black\"),\n \"font-light\": hex-to-rgb($base-font, 0.7),\n \"icon-light\": hex-to-rgb($base-font, 0.45),\n \"link\": $link-colour,\n \"link-visited\": $link-colour-visited,\n \"focus-outline\": brand-colour(\"blue\"),\n \"keyline\": hex-to-rgb($dark-grey, 0.25),\n \"keyline-dark\": $dark-grey,\n \"button-text\": brand-colour(\"white\"),\n \"button-background\": brand-colour(\"black\"),\n \"button-hover-text\": brand-colour(\"black\"),\n \"button-hover-background\": brand-colour(\"white\"),\n \"contrast-background\": #1e1e1e,\n \"contrast-font-base\": brand-colour(\"white\"),\n \"contrast-font-dark\": brand-colour(\"white\"),\n // \"contrast-font-light\": brand-colour(\"white\", 0.7),\n \"contrast-font-light\": brand-colour(\"white\", 0.7),\n \"contrast-icon-light\": brand-colour(\"white\", 0.45),\n \"contrast-link\": brand-colour(\"white\"),\n \"contrast-link-visited\": brand-colour(\"white\"),\n \"contrast-keyline\": brand-colour(\"white\", 0.5),\n \"contrast-keyline-dark\": brand-colour(\"white\", 0.8),\n \"contrast-button-text\": brand-colour(\"black\"),\n \"contrast-button-background\": brand-colour(\"white\"),\n \"contrast-button-hover-text\": brand-colour(\"white\"),\n \"contrast-button-hover-background\": brand-colour(\"black\"),\n \"accent\": map.get($colour-palette-brand, \"light-grey\"),\n \"accent-background\": #111,\n \"accent-background-light\": map.get($colour-palette-brand, \"light-grey\"),\n \"accent-font-base\": brand-colour(\"white\"),\n \"accent-font-dark\": brand-colour(\"white\"),\n \"accent-font-light\": brand-colour(\"white\", 0.7),\n \"accent-icon-light\": brand-colour(\"white\", 0.45),\n \"accent-link\": brand-colour(\"white\"),\n \"accent-link-visited\": #b9f,\n \"accent-keyline\": brand-colour(\"white\", 0.5),\n \"accent-keyline-dark\": brand-colour(\"white\", 0.8),\n \"button-accent-text\": brand-colour(\"black\"),\n \"button-accent-background\": brand-colour(\"grey\"),\n) !default;\n\n/\n=========================================\nDARK THEME\n=========================================\n/\n$colour-palette-dark: map.merge(\n $colour-palette-default,\n (\n \"page-background\": #222,\n \"background-tint\": #333,\n \"font-base\": brand-colour(\"white\", 0.95),\n \"font-dark\": brand-colour(\"white\"),\n \"font-light\": brand-colour(\"white\", 0.5),\n \"icon-light\": brand-colour(\"white\", 0.35),\n \"link\": brand-colour(\"blue\"),\n \"link-visited\": #a8f,\n \"keyline\": brand-colour(\"white\", 0.25),\n \"keyline-dark\": brand-colour(\"white\"),\n \"button-text\": brand-colour(\"black\"),\n \"button-background\": brand-colour(\"white\"),\n \"button-hover-text\": brand-colour(\"white\"),\n \"button-hover-background\": brand-colour(\"black\"),\n \"contrast-background\": #111,\n \"contrast-link-visited\":\n map.get($colour-palette-default, \"contrast-link-visited\"),\n // --accent-background-light is the same as --contrast-background on dark themes\n \"accent-background-light\": brand-colour(\"grey\"),\n )\n) !default;\n\n/\n=========================================\nLIGHT, HIGH_CONTRAST THEME\n=========================================\n/\n$colour-palette-high-contrast: map.merge(\n $colour-palette-default,\n (\n \"page-background\": brand-colour(\"white\"),\n \"font-base\": brand-colour(\"black\"),\n \"font-light\": brand-colour(\"black\"),\n \"icon-light\": brand-colour(\"black\", 0.75),\n \"link\": #34d,\n \"link-visited\": #848,\n \"focus-outline\": brand-colour(\"orange\"),\n \"keyline\": brand-colour(\"black\"),\n \"keyline-dark\": brand-colour(\"black\"),\n \"contrast-background\": #f4f4f4,\n \"contrast-font-base\": brand-colour(\"black\"),\n \"contrast-font-dark\": brand-colour(\"black\"),\n \"contrast-font-light\": brand-colour(\"black\"),\n \"contrast-link\": brand-colour(\"navy\"),\n \"contrast-link-visited\": brand-colour(\"black\"),\n \"contrast-keyline\": brand-colour(\"black\"),\n \"contrast-keyline-dark\": brand-colour(\"black\"),\n \"contrast-button-text\": brand-colour(\"white\"),\n \"contrast-button-background\": brand-colour(\"black\"),\n \"contrast-button-hover-text\": brand-colour(\"black\"),\n \"contrast-button-hover-background\": brand-colour(\"white\"),\n )\n) !default;\n\n/\n=========================================\nDARK, HIGH_CONTRAST THEME\n=========================================\n/\n$colour-palette-high-contrast-dark: map.merge(\n $colour-palette-dark,\n (\n \"page-background\": #111,\n \"font-base\": brand-colour(\"white\"),\n \"font-light\": brand-colour(\"white\"),\n \"icon-light\": brand-colour(\"white\", 0.75),\n \"link\": #69f,\n \"link-visited\": #a6c,\n \"keyline\": brand-colour(\"white\"),\n \"contrast-background\": brand-colour(\"black\"),\n )\n) !default;\n"]}
1	+ {"version":3,"sourceRoot":"","sources":["../../../../src/nationalarchives/utilities/_typography.scss","../../../../src/nationalarchives/tools/_colour.scss","../../../../src/nationalarchives/utilities/_a11y.scss","../../../../src/nationalarchives/utilities/_colour.scss","../../../../src/nationalarchives/utilities/_columns.scss","../../../../src/nationalarchives/variables/_grid.scss","../../../../src/nationalarchives/tools/_media.scss","../../../../src/nationalarchives/tools/_spacing.scss","../../../../src/nationalarchives/tools/_typography.scss","../../../../src/nationalarchives/variables/_typography.scss","../../../../src/nationalarchives/utilities/_forms.scss","../../../../src/nationalarchives/utilities/_global.scss","../../../../src/nationalarchives/utilities/_lists.scss","../../../../src/nationalarchives/utilities/_overrides.scss","../../../../src/nationalarchives/utilities/_tables.scss","../../../../src/nationalarchives/components/grid/grid.scss","../../../../src/nationalarchives/tools/_grid.scss","../../../../src/nationalarchives/components/header/header.scss","../../../../src/nationalarchives/variables/_colour.scss"],"names":[],"mappings":"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","file":"header.css","sourcesContent":["@use \"sass:math\";\n@use \"sass:selector\";\n@use \"../tools/colour\";\n@use \"../tools/media\";\n@use \"../tools/spacing\";\n@use \"../tools/typography\";\n@use \"../variables/assets\";\n@use \"../variables/grid\";\n@use \"../variables/typography\" as typographyVars;\n\n@if typographyVars.$use-local-fonts {\n @font-face {\n font-family: \"Open Sans\";\n src: url(\"#{assets.$tna-font-path}/OpenSans-Regular.ttf\");\n font-weight: typographyVars.$main-font-weight;\n font-style: normal;\n // font-display: swap;\n }\n\n @font-face {\n font-family: \"Open Sans\";\n src: url(\"#{assets.$tna-font-path}/OpenSans-Bold.ttf\");\n font-weight: typographyVars.$main-font-weight-bold;\n font-style: normal;\n // font-display: swap;\n }\n\n @font-face {\n font-family: \"Roboto Mono\";\n src: url(\"#{assets.$tna-font-path}/RobotoMono-Regular.ttf\");\n font-weight: typographyVars.$detail-font-weight;\n font-style: normal;\n // font-display: swap;\n }\n\n @font-face {\n font-family: \"Roboto Mono\";\n src: url(\"#{assets.$tna-font-path}/RobotoMono-Medium.ttf\");\n font-weight: typographyVars.$detail-font-weight-bold;\n font-style: normal;\n // font-display: swap;\n }\n} @else {\n // @import \"https://use.typekit.net/hkj3kuz.css\";\n @import url(\"https://fonts.googleapis.com/css2?family=Open+Sans:wght@#{typographyVars.$main-font-weight};#{typographyVars.$main-font-weight-bold}&family=Roboto+Mono:wght@#{typographyVars.$detail-font-weight};#{typographyVars.$detail-font-weight-bold}&display=swap\"); /* stylelint-disable-line /\n}\n\n.tna-template {\n @include colour.colour-font(\"font-base\");\n @include typography.main-font;\n -moz-osx-font-smoothing: grayscale;\n -webkit-font-smoothing: antialiased;\n text-rendering: optimizeLegibility;\n -webkit-text-size-adjust: none;\n direction: ltr;\n}\n\n.tna-template__body {\n color: inherit;\n @include typography.relative-font-size(typographyVars.$body-font-size-px);\n line-height: typographyVars.$body-line-height;\n\n @include media.on-mobile {\n @include typography.relative-font-size(\n typographyVars.$body-font-size-px-mobile\n );\n }\n}\n\n {\n margin: 0;\n padding: 0;\n}\n\nstrong {\n @include typography.main-font-weight-bold;\n}\n\np {\n @include spacing.space-above;\n\n + p {\n margin-top: 1rem;\n }\n}\n\na {\n text-decoration-thickness: 1.5px;\n\n &,\n &:link {\n @include colour.colour-font(\"link\");\n }\n\n &:visited {\n @include colour.colour-font(\"link-visited\");\n }\n\n &:hover,\n &:active {\n @include typography.interacted-text-decoration;\n }\n\n &.tna-link--no-visited-state {\n &:visited {\n @include colour.colour-font(\"link\");\n }\n }\n\n @include colour.on-high-contrast {\n &:active {\n box-shadow: none;\n }\n\n &:hover:not(:focus) {\n box-shadow: 0 0 0 0.3125rem var(--focus-outline);\n }\n }\n\n // &[target=\"_blank\"]:not([title=\"opens in a new\"]) {\n // &::after {\n // content: \"\" / \" (opens in a new window)\"\n // }\n // }\n}\n\nsmall {\n @include typography.relative-font-size(\n typographyVars.$body-font-size-px 0.85\n );\n}\n\n%chip {\n max-width: max-content;\n padding: 0.125em 0.25rem;\n\n display: block;\n\n @include colour.colour-font(\"font-dark\");\n @include typography.detail-font-small;\n line-height: 1;\n\n @include colour.accent;\n\n @include colour.colour-border(\"accent-background\", 0.125rem);\n\n .tna-background-accent &:not(#{&}--plain) {\n @include colour.plain;\n\n @include colour.colour-border(\"background\");\n }\n}\n\n.tna-chip {\n @extend %chip;\n\n &--plain {\n padding: 0;\n\n color: inherit;\n\n background-color: transparent;\n\n border: none;\n }\n\n @at-root #{selector.unify(\"a\", &)} {\n text-decoration: none;\n\n &,\n &:link,\n &:visited {\n @include colour.colour-font(\"font-dark\");\n }\n\n &:hover {\n @include typography.interacted-text-decoration;\n }\n\n &--plain {\n &,\n &:link,\n &:visited {\n color: inherit;\n }\n }\n }\n}\n\n.tna-chip-list {\n @include spacing.space-above;\n\n display: flex;\n flex-wrap: wrap;\n gap: 0.5rem 1.5rem;\n\n list-style: none;\n\n &__item {\n display: flex;\n align-items: center;\n\n .tna-chip {\n display: flex;\n align-items: center;\n gap: 0.5rem;\n }\n\n .fa-solid,\n .fa-brand {\n @include colour.colour-font(\"icon-light\");\n }\n\n @include colour.on-high-contrast {\n @include colour.colour-border(\"keyline-dark\", 1px, solid);\n\n .fa-solid,\n .fa-brand {\n padding: 0.375rem 0.25rem;\n\n @include colour.colour-font(\"contrast-font-base\");\n\n @include colour.colour-background(\"contrast-background\");\n\n @include colour.colour-border(\"keyline-dark\", 1px, solid, right);\n }\n\n .tna-chip {\n &:has(.fa-solid, .fa-brand) {\n padding-left: 0;\n\n .fa-solid,\n .fa-brand {\n margin-right: 0.5rem;\n }\n }\n }\n }\n }\n\n &--accent {\n .fa-solid,\n .fa-brand {\n @include colour.colour-font(\"accent-background\");\n }\n }\n}\n\n%heading {\n @include colour.colour-font(\"font-dark\");\n\n &:not(.tna-heading--no-link-arrow) {\n a {\n display: inline-block;\n\n text-wrap: balance;\n // text-decoration-thickness: .1em;\n\n &::after {\n padding-left: 0.25rem;\n\n display: inline-block;\n\n font-weight: 700;\n\n content: \"\\203A\";\n }\n\n &:hover {\n // text-decoration-thickness: .15em;\n\n &::after {\n padding-left: 0.5rem;\n }\n }\n }\n }\n}\n\n%heading-xl {\n @extend %heading;\n\n @include typography.heading-font;\n @include typography.relative-font-size(64);\n line-height: 1.2;\n\n @include media.on-medium {\n @include typography.relative-font-size(42);\n }\n\n @include media.on-mobile {\n @include typography.relative-font-size(36);\n }\n}\n\n%heading-l {\n @extend %heading;\n\n @include typography.heading-font;\n @include typography.relative-font-size(32);\n line-height: 1.3;\n\n @include media.on-medium {\n @include typography.relative-font-size(26);\n }\n\n @include media.on-mobile {\n @include typography.relative-font-size(24);\n }\n}\n\n%heading-m {\n @extend %heading;\n\n @include typography.main-font-weight-bold;\n @include typography.relative-font-size(22);\n line-height: 1.6;\n\n @include media.on-mobile {\n @include typography.relative-font-size(20);\n }\n}\n\n%heading-s {\n @extend %heading;\n\n @include typography.main-font-weight-bold;\n @include typography.relative-font-size(18);\n line-height: 1.6;\n}\n\n%headings-and-heading-groups {\n @include spacing.space-above;\n margin-bottom: 0;\n padding: 1rem 0 0;\n\n &:first-child {\n padding-top: 0;\n }\n\n + p {\n margin-top: 1rem;\n }\n}\n\n.tna-heading {\n &-xl {\n @extend %heading-xl;\n @extend %headings-and-heading-groups;\n }\n\n &-l {\n @extend %heading-l;\n @extend %headings-and-heading-groups;\n }\n\n &-m {\n @extend %heading-m;\n @extend %headings-and-heading-groups;\n }\n\n &-s {\n @extend %heading-s;\n @extend %headings-and-heading-groups;\n }\n}\n\n.tna-hgroup {\n &-xl,\n &-l,\n &-m,\n &-s {\n @extend %headings-and-heading-groups;\n }\n\n &__supertitle {\n margin: 0 0 0.25rem;\n\n @extend %chip;\n\n &--plain {\n padding: 0;\n\n color: inherit;\n\n background-color: transparent;\n\n border: none;\n }\n }\n\n &__title {\n margin: 0;\n\n display: block;\n }\n\n &-xl &__title {\n @extend %heading-xl;\n }\n\n &-l &__title {\n @extend %heading-l;\n }\n\n &-m &__title {\n @extend %heading-m;\n }\n\n &-s &__title {\n @extend %heading-s;\n }\n}\n\n.tna-blockquote {\n @include spacing.space-above;\n margin-right: 0;\n margin-bottom: 0;\n margin-left: 0;\n padding: 1rem 1rem 1rem 2rem;\n\n @include colour.colour-border(\"accent-background\", 0.375rem, solid, left);\n\n &__quote {\n font-weight: 700;\n }\n\n &__author {\n font-style: italic;\n\n .tna-blockquote & {\n margin: 1rem 0 0;\n }\n\n &::before {\n content: \"\\2014\" \" \";\n }\n }\n}\n\n.tna-large-paragraph {\n @include spacing.space-above;\n\n @include typography.relative-font-size(22);\n @include colour.colour-font(\"font-dark\");\n}\n\n.tna-scene-setter {\n @include spacing.space-above;\n\n @include typography.detail-font;\n @include colour.colour-font(\"font-dark\");\n @include typography.relative-font-size(30);\n line-height: math.div(50, 30);\n\n @include media.on-mobile {\n @include typography.relative-font-size(24);\n line-height: 2;\n }\n\n a {\n color: inherit;\n text-decoration-thickness: 2px;\n\n &:hover {\n text-decoration-thickness: 4.5px;\n }\n }\n\n &--small {\n @include typography.relative-font-size(24);\n }\n}\n","@use \"sass:map\";\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() {\n @each $name, $value in colour.$colour-palette-default {\n --#{$name}: #{$value};\n }\n}\n\n@mixin colour-css-vars-dark() {\n @each $name, $value in colour.$colour-palette-dark {\n --#{$name}: #{$value};\n }\n}\n\n@mixin colour-css-vars-high-contrast() {\n @each $name, $value in colour.$colour-palette-high-contrast {\n --#{$name}: #{$value};\n }\n}\n\n@mixin colour-css-vars-high-contrast-dark() {\n @each $name, $value in colour.$colour-palette-high-contrast-dark {\n --#{$name}: #{$value};\n }\n}\n\n@mixin accent-css-vars($colour) {\n @if $colour == \"yellow\" {\n --accent-background: #{brand-colour(\"yellow\")} !important;\n --accent-background-light: #{brand-colour(\"cream\")} !important;\n --accent-font-base: #{brand-colour(\"black\")} !important;\n --accent-font-dark: #{brand-colour(\"black\")} !important;\n --accent-font-light: #{brand-colour(\"black\", 0.7)} !important;\n --accent-icon-light: #{brand-colour(\"black\", 0.45)} !important;\n --accent-link: #{brand-colour(\"black\")} !important;\n --accent-link-visited: #{brand-colour(\"black\")} !important;\n --accent-keyline: #{brand-colour(\"black\", 0.5)} !important;\n --accent-keyline-dark: #{brand-colour(\"black\", 0.8)} !important;\n --button-accent-background: #{brand-colour(\"yellow\")} !important;\n } @else {\n --accent-font-base: #{brand-colour(\"white\")} !important;\n --accent-font-dark: #{brand-colour(\"white\")} !important;\n --accent-font-light: #{brand-colour(\"white\", 0.7)} !important;\n --accent-icon-light: #{brand-colour(\"white\", 0.45)} !important;\n --accent-link: #{brand-colour(\"white\")} !important;\n --accent-link-visited: #{brand-colour(\"white\")} !important;\n --accent-keyline: #{brand-colour(\"white\", 0.5)} !important;\n --accent-keyline-dark: #{brand-colour(\"white\", 0.8)} !important;\n --button-accent-text: #{brand-colour(\"white\")} !important;\n @if $colour == \"pink\" {\n --accent-background: #{brand-colour(\"maroon\")} !important;\n --accent-background-light: #{brand-colour(\"pastel-pink\")} !important;\n --button-accent-background: #{brand-colour(\"maroon\")} !important;\n } @else if $colour == \"orange\" {\n --accent-background: #{brand-colour(\"chestnut\")} !important;\n --accent-background-light: #{brand-colour(\"pastel-orange\")} !important;\n --button-accent-background: #{brand-colour(\"chestnut\")} !important;\n } @else if $colour == \"green\" {\n --accent-background: #{brand-colour(\"forest\")} !important;\n --accent-background-light: #{brand-colour(\"pastel-green\")} !important;\n --button-accent-background: #{brand-colour(\"forest\")} !important;\n } @else if $colour == \"blue\" {\n --accent-background: #{brand-colour(\"navy\")} !important;\n --accent-background-light: #{brand-colour(\"pastel-blue\")} !important;\n --button-accent-background: #{brand-colour(\"navy\")} !important;\n }\n }\n}\n\n@mixin colour-font(\n $colour,\n $important: false,\n $default-palette: colour.$colour-palette-default\n) {\n color: map.get($default-palette, $colour) if($important, !important, null);\n color: var(--#{$colour}) if($important, !important, null);\n}\n\n@mixin colour-background($colour, $important: false) {\n background-color: map.get(colour.$colour-palette-default, $colour)\n if($important, !important, null);\n background-color: var(--#{$colour}) if($important, !important, null);\n}\n\n@mixin colour-border(\n $colour,\n $width: \"\",\n $style: solid,\n $direction: \"\",\n $important: false\n) {\n @if $direction != \"\" {\n @if $width != \"\" {\n $property: border-#{$direction};\n border-#{$direction}: $width\n map.get(colour.$colour-palette-default, $colour)\n $style\n if($important, !important, null);\n border-#{$direction}: $width\n var(--#{$colour})\n $style\n if($important, !important, null);\n } @else {\n border-#{$direction}-color: map.get(\n colour.$colour-palette-default,\n $colour\n )\n if($important, !important, null);\n border-#{$direction}-color: var(--#{$colour})\n if($important, !important, null);\n }\n } @else {\n @if $width != \"\" {\n border: $width\n map.get(colour.$colour-palette-default, $colour)\n $style\n if($important, !important, null);\n border: $width var(--#{$colour}) $style if($important, !important, null);\n } @else {\n border-color: map.get(colour.$colour-palette-default, $colour)\n if($important, !important, null);\n border-color: var(--#{$colour}) if($important, !important, null);\n }\n }\n}\n\n@mixin colour-outline($colour, $width: \"\", $style: solid, $important: false) {\n @if $width != \"\" {\n outline: $width\n map.get(colour.$colour-palette-default, $colour)\n $style\n if($important, !important, null);\n outline: $width var(--#{$colour}) $style if($important, !important, null);\n } @else {\n outline-color: map.get(colour.$colour-palette-default, $colour)\n if($important, !important, null);\n outline-color: var(--#{$colour}) if($important, !important, null);\n }\n}\n\n@mixin colour-fill($colour, $important: false) {\n fill: map.get(colour.$colour-palette-default, $colour)\n if($important, !important, null);\n fill: var(--#{$colour}) if($important, !important, null);\n}\n\n%plain {\n .tna-template--system-theme & {\n @include colour-css-vars;\n\n @media (prefers-color-scheme: dark) {\n @include colour-css-vars-dark;\n }\n\n @media (prefers-contrast: more) {\n @include colour-css-vars-high-contrast;\n }\n\n @media (prefers-contrast: more) and (prefers-color-scheme: dark) {\n @include colour-css-vars-high-contrast-dark;\n }\n }\n\n .tna-template--light-theme & {\n @include colour-css-vars;\n }\n\n .tna-template--dark-theme & {\n @include colour-css-vars-dark;\n }\n\n .tna-template--high-contrast-theme & {\n @include colour-css-vars-high-contrast;\n }\n\n .tna-template--high-contrast-theme.tna-template--dark-theme & {\n @include colour-css-vars-high-contrast-dark;\n }\n\n --background: var(--page-background);\n}\n\n@mixin plain {\n @extend %plain;\n}\n\n%contrast {\n --background: var(--contrast-background);\n --font-base: var(--contrast-font-base);\n --font-dark: var(--contrast-font-dark);\n --font-light: var(--contrast-font-light);\n --icon-light: var(--contrast-icon-light);\n --link: var(--contrast-link);\n --link-visited: var(--contrast-link-visited);\n --keyline: var(--contrast-keyline);\n --keyline-dark: var(--contrast-keyline-dark);\n --button-text: var(--contrast-button-text);\n --button-background: var(--contrast-button-background);\n --button-hover-text: var(--contrast-button-hover-text);\n --button-hover-background: var(--contrast-button-hover-background);\n\n @include colour-background(\"background\");\n\n @include colour-font(\"font-base\", false, colour.$colour-palette-dark);\n}\n\n@mixin contrast {\n @extend %contrast;\n}\n\n%contrast-on-mobile {\n @include media.on-mobile {\n --background: var(--contrast-background);\n --font-base: var(--contrast-font-base);\n --font-dark: var(--contrast-font-dark);\n --font-light: var(--contrast-font-light);\n --icon-light: var(--contrast-icon-light);\n --link: var(--contrast-link);\n --link-visited: var(--contrast-link-visited);\n --keyline: var(--contrast-keyline);\n --keyline-dark: var(--contrast-keyline-dark);\n --button-text: var(--contrast-button-text);\n --button-background: var(--contrast-button-background);\n --button-hover-text: var(--contrast-button-hover-text);\n --button-hover-background: var(--contrast-button-hover-background);\n\n @include colour-background(\"background\");\n\n @include colour-font(\"font-base\", false, colour.$colour-palette-dark);\n }\n}\n\n@mixin contrast-on-mobile {\n @extend %contrast-on-mobile;\n}\n\n%accent {\n --background: var(--accent-background);\n --font-base: var(--accent-font-base);\n --font-dark: var(--accent-font-dark);\n --font-light: var(--accent-font-light);\n --icon-light: var(--accent-icon-light);\n --link: var(--accent-link);\n --link-visited: var(--accent-link);\n --keyline: var(--accent-keyline);\n --keyline-dark: var(--accent-keyline-dark);\n\n @include colour-background(\"background\");\n\n @include colour-font(\"font-base\", false, colour.$colour-palette-dark);\n}\n\n@mixin accent {\n @extend %accent;\n}\n\n%tint {\n @include colour-background(\"background-tint\");\n @include colour-font(\"font-base\");\n}\n\n@mixin tint {\n @extend %tint;\n}\n\n%accent-background {\n @include colour-background(\"accent-background\");\n}\n\n@mixin accent-background {\n @extend %accent-background;\n}\n\n%accent-light {\n --background: var(--accent-background-light);\n --font-base: #{map.get(colour.$colour-palette-default, \"font-base\")};\n --font-dark: #{map.get(colour.$colour-palette-default, \"font-dark\")};\n --font-light: #{map.get(colour.$colour-palette-default, \"font-light\")};\n // --link: #{map.get(colour.$colour-palette-default, \"link\")};\n // --link-visited: #{map.get(colour.$colour-palette-default, \"link-visited\")};\n --keyline: #{map.get(colour.$colour-palette-default, \"keyline\")};\n --keyline-dark: #{map.get(colour.$colour-palette-default, \"keyline-dark\")};\n --button-text: #{map.get(colour.$colour-palette-default, \"button-text\")};\n --button-background: #{map.get(\n colour.$colour-palette-default,\n \"button-background\"\n )};\n --button-hover-text: #{map.get(\n colour.$colour-palette-default,\n \"button-hover-text\"\n )};\n --button-hover-background: #{map.get(\n colour.$colour-palette-default,\n \"button-hover-background\"\n )};\n\n @include colour-background(\"background\");\n @include colour-font(\"font-base\");\n\n .tna-template--system-theme & {\n @media (prefers-color-scheme: dark) {\n --link: #{map.get(colour.$colour-palette-default, \"link\")};\n --link-visited: #{map.get(colour.$colour-palette-default, \"link-visited\")};\n }\n }\n\n .tna-template--dark-theme & {\n --link: #{map.get(colour.$colour-palette-default, \"link\")};\n --link-visited: #{map.get(colour.$colour-palette-default, \"link-visited\")};\n }\n}\n\n@mixin accent-light {\n @extend %accent-light;\n}\n\n@mixin on-high-contrast {\n .tna-template--high-contrast-theme & {\n @content;\n }\n\n .tna-template--system-theme & {\n @media (prefers-contrast: more) {\n @content;\n }\n }\n}\n\n@mixin on-forced-colours {\n @media (forced-colors: active) {\n @content;\n }\n}\n\n@mixin on-high-contrast-and-forced-colours {\n @include on-forced-colours {\n @content;\n }\n\n @include on-high-contrast {\n @content;\n }\n}\n","@use \"../tools/colour\";\n\n.tna-visually-hidden,\n.tna-\\!--visually-hidden {\n width: 1px !important;\n height: 1px !important;\n margin: 0 !important;\n padding: 0 !important;\n\n position: absolute !important;\n top: -9999px !important;\n left: -9999px !important;\n z-index: -1 !important;\n\n overflow: hidden !important;\n\n clip: rect(0, 0, 0, 0) !important;\n\n border: 0 !important;\n\n background-color: transparent !important;\n\n &::before,\n &::after {\n content: \"\\00a0\";\n }\n}\n\n@mixin focus-outline {\n @include colour.colour-outline(\"focus-outline\", 0.3125rem, solid);\n outline-offset: 0.125rem;\n}\n\n:focus {\n z-index: 9;\n\n @include focus-outline;\n}\n\n.tna-\\!--no-focus-style {\n &:focus {\n outline: none;\n }\n}\n","@use \"../tools/colour\";\n\n:root {\n @include colour.colour-css-vars;\n}\n\n.tna-template {\n @include colour.colour-background(\"page-background\");\n\n &--system-theme {\n @include colour.colour-css-vars;\n\n @media (prefers-color-scheme: dark) {\n @include colour.colour-css-vars-dark;\n }\n\n @media (prefers-contrast: more) {\n @include colour.colour-css-vars-high-contrast;\n\n {\n background-image: none !important;\n }\n }\n\n @media (prefers-contrast: more) and (prefers-color-scheme: dark) {\n @include colour.colour-css-vars-high-contrast-dark;\n }\n }\n\n &--light-theme {\n @include colour.colour-css-vars;\n }\n\n &--dark-theme {\n @include colour.colour-css-vars-dark;\n }\n\n &--high-contrast-theme {\n @include colour.colour-css-vars-high-contrast;\n\n * {\n background-image: none !important;\n }\n\n &.tna-template--dark-theme {\n @include colour.colour-css-vars-high-contrast-dark;\n }\n }\n\n &--yellow-accent {\n @include colour.accent-css-vars(\"yellow\");\n }\n\n &--pink-accent {\n @include colour.accent-css-vars(\"pink\");\n }\n\n &--orange-accent {\n @include colour.accent-css-vars(\"orange\");\n }\n\n &--green-accent {\n @include colour.accent-css-vars(\"green\");\n }\n\n &--blue-accent {\n @include colour.accent-css-vars(\"blue\");\n }\n\n @media (prefers-reduced-motion) {\n * {\n animation: none !important;\n transition: none !important;\n }\n }\n}\n\n.tna-background {\n &-tint {\n @include colour.tint;\n }\n\n &-contrast {\n @include colour.contrast;\n }\n\n &-accent {\n @include colour.accent;\n }\n\n &-accent-light {\n @include colour.accent-light;\n }\n}\n\n.tna-border {\n &-keyline {\n @include colour.colour-border(\"keyline\", 1px);\n }\n\n &-keyline-dark {\n @include colour.colour-border(\"keyline-dark\", 1px);\n }\n}\n","@use \"../tools/media\";\n@use \"../variables/grid\";\n\n.tna-columns {\n column-gap: grid.$gutter-width;\n\n &--2 {\n column-count: 2;\n }\n\n &--3 {\n column-count: 3;\n }\n\n @include media.on-tiny {\n column-gap: grid.$gutter-width-tiny;\n }\n\n @include media.on-small {\n @for $i from 1 through 4 {\n &--#{$i}-small {\n column-count: $i;\n }\n }\n }\n\n @include media.on-tiny {\n @for $i from 1 through 4 {\n &--#{$i}-tiny {\n column-count: $i;\n }\n }\n }\n\n &__block {\n break-inside: avoid;\n }\n\n &:has(&__block:only-of-type) {\n column-count: 1;\n }\n}\n","$largest-container-width: 75.25rem !default;\n\n$gutter-width: 2rem !default;\n$gutter-width-tiny: 1rem !default;\n\n$column-count: 12;\n$column-count-medium: 6;\n$column-count-small: 4;\n$column-count-tiny: 2;\n","@use \"../variables/media\";\n\n// 0 ======= 320 = 480 ===== 768 == 1024 ========================== min-width/max-width (px)\n// \| . \| \| \|\n// \|-TINY----------\|-SMALL---\|-MED--\|-LARGE------------------------\n// \| . \| \| \|\n// \|<------------->\| \| \| on-tiny\n// \|<----------------------->\| \| on-mobile\n// \|<------------------------------>\| on-smaller-than-large\n// \| . \|<------->\| \| on-small\n// \| . \|<------------------------- on-larger-than-tiny\n// \| . \| \|<---->\| on-medium\n// \| . \| \|<--------------- on-larger-than-mobile\n// \| . \| \| \|<-------- on-large\n// \|<------->. \| \| \| Smallest device\n\n@mixin on-large() {\n @media #{media.$media-large} {\n @content;\n }\n}\n\n@mixin on-medium() {\n @media #{media.$media-medium} {\n @content;\n }\n}\n\n@mixin on-small() {\n @media #{media.$media-small} {\n @content;\n }\n}\n\n@mixin on-tiny() {\n @media #{media.$media-tiny} {\n @content;\n }\n}\n\n@mixin on-larger-than-mobile() {\n @media #{media.$media-gt-mobile} {\n @content;\n }\n}\n\n@mixin on-larger-than-tiny() {\n @media #{media.$media-gt-tiny} {\n @content;\n }\n}\n\n@mixin on-smaller-than-large() {\n @media #{media.$media-lt-large} {\n @content;\n }\n}\n\n@mixin on-mobile() {\n @media #{media.$media-mobile} {\n @content;\n }\n}\n\n@mixin on-print() {\n @media print {\n @content;\n }\n}\n","@use \"sass:map\";\n@use \"../variables/spacing\";\n@use \"../tools/media\";\n\n%space-above {\n margin-top: 2rem;\n\n &:first-child {\n margin-top: 0;\n }\n}\n\n@mixin space-above {\n @extend %space-above;\n}\n\n@function space($size) {\n @return map.get(spacing.$spacing, $size);\n}\n\n@function space-mobile($size) {\n @return map.get(spacing.$spacing-mobile, $size);\n}\n\n@mixin no-spacing-generator($suffix: \"\") {\n @if $suffix != \"\" {\n $suffix: \"-\" + $suffix;\n }\n @each $property in margin, padding {\n @each $direction in top, bottom {\n $combined-direction: \"\";\n @if $direction == top or $direction == bottom {\n $combined-direction: vertical;\n } @else if $direction == right or $direction == left {\n $combined-direction: horizontal;\n }\n @if $combined-direction {\n .tna-\\!--no-#{$property}-#{$direction}#{$suffix},\n .tna-\\!--no-#{$property}-#{$combined-direction}#{$suffix} {\n #{$property}-#{$direction}: 0 !important;\n }\n } @else {\n .tna-\\!--no-#{$property}-#{$direction}#{$suffix} {\n #{$property}-#{$direction}: 0 !important;\n }\n }\n }\n }\n}\n\n@mixin spacing-generator($suffix: \"\") {\n @each $property in margin, padding {\n @each $direction in top, bottom {\n @each $size, $amount in spacing.$spacing {\n @if $direction == all {\n .tna-\\!--#{$property}-#{$size} {\n #{$property}: #{$amount} !important;\n }\n } @else {\n $combined-direction: \"\";\n @if $direction == top or $direction == bottom {\n $combined-direction: vertical;\n } @else if $direction == right or $direction == left {\n $combined-direction: horizontal;\n }\n @if $combined-direction {\n .tna-\\!--#{$property}-#{$direction}-#{$size},\n .tna-\\!--#{$property}-#{$combined-direction}-#{$size} {\n #{$property}-#{$direction}: #{$amount} !important;\n }\n } @else {\n .tna-\\!--#{$property}-#{$direction}-#{$size} {\n #{$property}-#{$direction}: #{$amount} !important;\n }\n }\n }\n }\n }\n }\n\n @include media.on-mobile {\n @each $property in margin, padding {\n @each $direction in top, bottom {\n @each $size, $amount in spacing.$spacing-mobile {\n @if $direction == all {\n .tna-\\!--#{$property}-#{$size} {\n #{$property}: #{$amount} !important;\n }\n } @else {\n $combined-direction: \"\";\n @if $direction == top or $direction == bottom {\n $combined-direction: vertical;\n } @else if $direction == right or $direction == left {\n $combined-direction: horizontal;\n }\n @if $combined-direction {\n .tna-\\!--#{$property}-#{$direction}-#{$size},\n .tna-\\!--#{$property}-#{$combined-direction}-#{$size} {\n #{$property}-#{$direction}: #{$amount} !important;\n }\n } @else {\n .tna-\\!--#{$property}-#{$direction}-#{$size} {\n #{$property}-#{$direction}: #{$amount} !important;\n }\n }\n }\n }\n }\n }\n }\n}\n","@use \"sass:math\";\n@use \"colour\";\n@use \"../variables/typography\";\n\n@mixin relative-font-size($fontSizePx) {\n font-size: #{math.div($fontSizePx, typography.$relative-1rem-px)}rem;\n}\n\n@mixin interacted-text-decoration {\n text-decoration: underline;\n text-decoration-thickness: typography.$interactive-text-decoration-thickness;\n}\n\n@mixin main-font-weight {\n font-weight: typography.$main-font-weight;\n}\n\n@mixin main-font-weight-bold {\n font-weight: typography.$main-font-weight-bold;\n}\n\n@mixin main-font {\n font-family: typography.$main-font-family;\n @include main-font-weight;\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-weight {\n font-weight: typography.$detail-font-weight;\n}\n\n@mixin detail-font-weight-bold {\n font-weight: typography.$detail-font-weight-bold;\n}\n\n@mixin detail-font {\n font-family: typography.$detail-font-family;\n @include detail-font-weight;\n}\n\n@mixin detail-font-small {\n @include detail-font;\n @include relative-font-size(14);\n text-transform: uppercase;\n line-height: #{math.div(typography.$relative-1rem-px, 14)};\n}\n","@use \"sass:math\";\n\n$use-local-fonts: false !default;\n\n$relative-1rem-px: 16; // 16px is always 1rem\n\n$body-font-size-px: 18 !default;\n$body-font-size-px-mobile: 17 !default;\n$body-line-height: #{math.div($relative-1rem-px, $body-font-size-px) * 2} !default; // 1.77777\n\n$interactive-text-decoration-thickness: 3.5px !default;\n\n$main-font-family: \"Open Sans\", sans-serif !default;\n$main-font-weight: 400 !default;\n$main-font-weight-bold: 700 !default;\n\n$heading-font-family: supria-sans-condensed, \"Arial Narrow\", sans-serif !default;\n$heading-font-weight: 500 !default;\n\n$detail-font-family: \"Roboto Mono\", monospace !default;\n$detail-font-weight: 400 !default;\n$detail-font-weight-bold: 500 !default;\n","@use \"../utilities/typography\" as typographyUtilities;\n@use \"../tools/colour\";\n@use \"../tools/media\";\n@use \"../tools/spacing\";\n@use \"../tools/typography\";\n\n.tna-form {\n &__group {\n @include spacing.space-above;\n\n &--error {\n padding-left: 1rem;\n\n @include colour.colour-border(\"form-error\", 0.25rem, solid, left);\n }\n }\n\n &__fieldset {\n flex: 1;\n\n border: none;\n }\n\n &__group,\n &__fieldset {\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n gap: 0.5rem;\n }\n\n &__group--inline,\n &__group--inline &__fieldset {\n flex-direction: row;\n align-items: flex-start;\n\n @include media.on-mobile {\n flex-direction: column;\n }\n }\n\n &__group-contents {\n flex: 0 0 39%;\n }\n\n &__legend {\n }\n\n &__heading {\n margin: 0;\n\n @extend %heading;\n\n &--xl {\n @extend %heading-xl;\n }\n\n &--l {\n @extend %heading-l;\n }\n\n &--m {\n @extend %heading-m;\n }\n\n &--s {\n @extend %heading-s;\n }\n\n &--xs {\n font-size: 1em;\n @include typography.main-font;\n // @include typography.main-font-weight-bold;\n }\n }\n\n &__label {\n }\n\n &__hint {\n margin-top: 0;\n\n @include typography.relative-font-size(16);\n @include colour.colour-font(\"font-light\");\n }\n\n &__error-message {\n margin-top: 0;\n\n @include colour.colour-font(\"form-error\");\n @include typography.main-font-weight-bold;\n }\n}\n","@use \"../tools/colour\";\n@use \"../tools/media\";\n@use \"../tools/spacing\";\n@use \"../variables/typography\";\n\n.tna-template {\n min-width: 320px;\n width: 100%;\n height: 100%;\n\n /\n ------------------------------------------\n * Support ended with iOS 13 released on 19th\n * September 2019. Deprecate in the future if\n * iOS <13 share drops low enough.\n * https://caniuse.com/mdn-css_properties_-webkit-overflow-scrolling\n * ------------------------------------------\n /\n -webkit-overflow-scrolling: touch;\n\n font-size: #{typography.$relative-1rem-px}px;\n}\n\n.tna-template__body {\n min-height: 100%;\n margin: 0;\n padding: 0;\n\n &:has(.tna-header):has(#main-content[role=\"main\"]):has(.tna-footer) {\n display: flex;\n flex-direction: column;\n\n #main-content {\n flex: 1;\n }\n }\n}\n\nimg,\nsvg,\npicture,\nvideo,\ncanvas {\n max-width: 100%;\n height: auto;\n\n display: block;\n}\n\nvideo,\ncanvas {\n width: 100%;\n}\n\n[hidden] {\n display: none;\n}\n\nhr {\n margin: 0;\n\n border-width: 1px 0 0;\n @include colour.colour-border(\"keyline\");\n border-style: solid;\n}\n\n.tna-section {\n padding-top: 3rem;\n padding-bottom: 3rem;\n\n @include media.on-mobile {\n padding-top: 2rem;\n padding-bottom: 2rem;\n }\n}\n\n.tna-aside {\n padding: 2rem;\n\n @include spacing.space-above;\n\n @include media.on-mobile {\n padding: 1rem;\n }\n\n @include colour.on-high-contrast {\n @include colour.colour-border(\"keyline-dark\", 1px);\n }\n\n &--tight {\n padding: 1rem;\n }\n}\n","@use \"../tools/colour\";\n@use \"../tools/media\";\n@use \"../tools/spacing\";\n@use \"../tools/typography\";\n\n.tna-ul,\n.tna-ol {\n margin: 1rem 0 0;\n padding: 0 0 0 2rem;\n\n &:first-child {\n margin-top: 0;\n }\n\n li::marker {\n @include colour.colour-font(\"accent-background\");\n font-weight: 700;\n }\n\n &--plain {\n padding-left: 0;\n\n list-style: none;\n }\n\n .tna-ul,\n .tna-ol {\n margin-top: 0;\n }\n}\n\n.tna-dl {\n margin: 1rem 0 0;\n\n display: flex;\n flex-wrap: wrap;\n\n &:first-child {\n margin-top: 0;\n }\n\n dt,\n dd {\n margin: 0;\n padding: 0.5rem 1rem;\n\n position: relative;\n\n box-sizing: border-box;\n\n word-wrap: break-word;\n }\n\n &--plain {\n dt {\n padding-left: 0;\n }\n\n dd {\n padding-right: 0;\n }\n }\n\n dt {\n width: 30%;\n\n @include typography.main-font-weight-bold;\n }\n\n dd {\n width: 70%;\n\n + dd {\n margin-left: 30%;\n }\n }\n\n &--icon-padding {\n dt {\n padding-left: 3rem !important;\n\n position: relative;\n\n .fa-solid {\n overflow: visible;\n\n position: absolute;\n top: 50%;\n left: 1rem;\n\n @include colour.colour-font(\"icon-light\");\n text-align: left;\n\n transform: translateY(-50%);\n }\n }\n }\n\n &--icon-padding#{&}--plain {\n dt {\n padding-left: 2rem !important;\n\n .fa-solid {\n left: 0;\n }\n }\n\n dd {\n padding-left: 2rem;\n }\n }\n\n &:not(&--plain) {\n dt:first-child,\n dd:nth-of-type(2n) + dt,\n dd:nth-of-type(2n + 1) {\n @include colour.colour-background(\"background-tint\");\n }\n }\n\n @include media.on-small {\n dt {\n width: 35%;\n }\n\n dd {\n width: 65%;\n\n + dd {\n margin-left: 35%;\n }\n }\n }\n\n @include media.on-tiny {\n dt,\n dd {\n width: 100%;\n margin-left: 0;\n }\n\n dd {\n padding-left: 1rem;\n }\n\n &--plain {\n dt {\n padding-bottom: 0;\n }\n\n dd {\n padding-top: 0;\n }\n }\n\n &:not(&--plain) {\n dt {\n @include colour.colour-background(\"background-tint\");\n }\n\n dd {\n background: transparent !important;\n }\n }\n }\n\n @include colour.on-high-contrast-and-forced-colours {\n @include colour.colour-border(\"keyline-dark\", 1px, solid, bottom);\n\n dt,\n dd {\n background: transparent !important;\n\n @include colour.colour-border(\"keyline-dark\", 1px, solid, top);\n }\n }\n}\n","@use \"sass:map\";\n@use \"../tools/media\";\n@use \"../tools/spacing\";\n\n@mixin hide-on($suffix) {\n .tna-\\!--hide-on-#{$suffix} {\n display: none !important;\n }\n}\n\n@include spacing.no-spacing-generator;\n@include spacing.spacing-generator;\n\n@include media.on-large {\n @include spacing.no-spacing-generator(\"large\");\n @include hide-on(\"large\");\n}\n\n@include media.on-medium {\n @include spacing.no-spacing-generator(\"medium\");\n @include hide-on(\"medium\");\n}\n\n@include media.on-small {\n @include spacing.no-spacing-generator(\"small\");\n @include hide-on(\"small\");\n}\n\n@include media.on-tiny {\n @include spacing.no-spacing-generator(\"tiny\");\n @include hide-on(\"tiny\");\n}\n","@use \"sass:math\";\n@use \"sass:selector\";\n@use \"../tools/colour\";\n@use \"../tools/media\";\n@use \"../tools/spacing\";\n@use \"../tools/typography\";\n@use \"../variables/assets\";\n@use \"../variables/grid\";\n\n.tna-table {\n width: 100%;\n @include spacing.space-above;\n\n border-collapse: collapse;\n\n text-align: left;\n\n &:first-child {\n margin-top: 0;\n }\n\n &__caption {\n text-align: left;\n\n @include typography.main-font-weight-bold;\n }\n\n &__head {\n }\n\n &__header {\n }\n\n &__body {\n }\n\n &__row {\n }\n\n &__cell {\n }\n\n &__header,\n &__cell {\n padding: 0.25rem 1rem;\n\n @include colour.colour-border(\"keyline\", 1px, solid, bottom);\n\n &:first-child {\n padding-left: 0;\n }\n\n &:last-child {\n padding-right: 0;\n }\n }\n\n &__head &__header {\n @include colour.colour-border(\"keyline-dark\", 0.25rem, solid, bottom);\n }\n\n p {\n + p {\n margin-top: 0.25rem;\n }\n }\n}\n\n.tna-table-wrapper {\n width: 100%;\n @include spacing.space-above;\n padding-left: grid.$gutter-width;\n padding-right: grid.$gutter-width;\n\n position: relative;\n left: -#{grid.$gutter-width};\n\n overflow: auto;\n\n @include media.on-tiny {\n padding-left: grid.$gutter-width-tiny;\n padding-right: grid.$gutter-width-tiny;\n\n left: -#{grid.$gutter-width-tiny};\n }\n}\n","@use \"sass:math\";\n@use \"../../variables/grid\";\n@use \"../../tools/media\";\n@use \"../../tools/grid\" as gridTools;\n@use \"../../utilities\";\n\n.tna-container {\n max-width: grid.$largest-container-width;\n width: 100%;\n margin-right: auto;\n margin-left: auto;\n padding-right: math.div(grid.$gutter-width, 2);\n padding-left: math.div(grid.$gutter-width, 2);\n\n box-sizing: border-box;\n\n display: flex;\n flex-wrap: wrap;\n justify-content: flex-start;\n align-items: stretch;\n\n &--no-padding,\n &--no-padding-all {\n max-width: grid.$largest-container-width - (grid.$gutter-width 2);\n }\n\n &--max {\n max-width: none;\n }\n\n &--centred {\n justify-content: center;\n }\n}\n\n.tna-column {\n margin: 0;\n padding-right: math.div(grid.$gutter-width, 2);\n padding-left: math.div(grid.$gutter-width, 2);\n\n box-sizing: border-box;\n\n &--container {\n display: flex;\n flex-wrap: wrap;\n justify-content: stretch;\n align-items: stretch;\n }\n\n &--align-top {\n align-self: flex-start;\n }\n\n &--align-centre {\n align-self: center;\n }\n\n &--align-bottom {\n align-self: flex-end;\n }\n}\n\n@include gridTools.columns-generator(grid.$column-count);\n\n@include media.on-medium {\n @include gridTools.columns-generator(grid.$column-count-medium, \"medium\");\n}\n\n@include media.on-tiny {\n .tna-container {\n padding-right: math.div(grid.$gutter-width-tiny, 2);\n padding-left: math.div(grid.$gutter-width-tiny, 2);\n }\n\n .tna-column {\n padding-right: math.div(grid.$gutter-width-tiny, 2);\n padding-left: math.div(grid.$gutter-width-tiny, 2);\n }\n}\n\n@include media.on-small {\n @include gridTools.columns-generator(grid.$column-count-small, \"small\");\n}\n\n@include media.on-tiny {\n @include gridTools.columns-generator(grid.$column-count-tiny, \"tiny\");\n}\n\n.tna-container--no-padding,\n.tna-container--no-padding-all,\n.tna-container--no-padding-all > .tna-column,\n.tna-column--no-padding,\n.tna-column--container--no-padding-all,\n.tna-column--container--no-padding-all > .tna-column {\n padding-right: 0;\n padding-left: 0;\n}\n","@use \"sass:math\";\n@use \"../variables/grid\";\n\n@mixin columns-generator($count, $suffix: \"\") {\n @if $suffix != \"\" {\n $suffix: \"-\" + $suffix;\n }\n\n .tna-column {\n &--full#{$suffix} {\n width: 100%;\n flex: none;\n }\n\n @for $i from 1 through $count - 1 {\n $simplest-fraction-found: false;\n\n @for $j from math.div($count, 2) through 1 {\n @if (\n $count % $j == 0 and $i % $j == 0 and $simplest-fraction-found != true\n ) {\n &--width-#{math.div($i, $j)}-#{math.div($count, $j)}#{$suffix} {\n width: math.div(100%, $count) * $i;\n flex: none;\n }\n\n &--margin-right-#{math.div($i, $j)}-#{math.div($count, $j)}#{$suffix} {\n margin-right: math.div(100%, $count) * $i;\n }\n\n &--margin-left-#{math.div($i, $j)}-#{math.div($count, $j)}#{$suffix} {\n margin-left: math.div(100%, $count) * $i;\n }\n\n $simplest-fraction-found: true;\n }\n }\n\n @if $simplest-fraction-found != true {\n &--width-#{$i}-#{$count}#{$suffix} {\n width: math.div(100%, $count) * $i;\n flex: none;\n }\n\n &--margin-right-#{$i}-#{$count}#{$suffix} {\n margin-right: math.div(100%, $count) * $i;\n }\n\n &--margin-left-#{$i}-#{$count}#{$suffix} {\n margin-left: math.div(100%, $count) * $i;\n }\n }\n }\n\n @for $i from 1 through 3 {\n &--flex-#{$i}#{$suffix} {\n width: auto;\n\n flex: $i 0;\n }\n }\n\n @for $i from 1 through 4 {\n &--order-#{$i}#{$suffix} {\n order: $i;\n }\n }\n }\n}\n","@use \"sass:math\";\n@use \"../../variables/colour\" as colourVars; // TODO\n@use \"../../variables/grid\" as gridVars;\n@use \"../../tools/colour\";\n@use \"../../tools/typography\";\n@use \"../../tools/media\";\n@use \"../../utilities\";\n@use \"../grid\";\n\n// TODO: Only for the header component at the moment - remove on redesign\n@mixin uninvert {\n @include colour.colour-css-vars;\n\n .tna-template--system-theme & {\n @include colour.colour-css-vars;\n\n @media (prefers-color-scheme: dark) {\n @include colour.colour-css-vars-dark;\n }\n\n @media (prefers-contrast: more) {\n @include colour.colour-css-vars-high-contrast;\n }\n\n @media (prefers-contrast: more) and (prefers-color-scheme: dark) {\n @include colour.colour-css-vars-high-contrast-dark;\n }\n }\n\n .tna-template--light-theme & {\n @include colour.colour-css-vars;\n }\n\n .tna-template--dark-theme & {\n @include colour.colour-css-vars-dark;\n }\n\n .tna-template--high-contrast-theme & {\n @include colour.colour-css-vars-high-contrast;\n }\n\n .tna-template--high-contrast-theme.tna-template--dark-theme & {\n @include colour.colour-css-vars-high-contrast-dark;\n }\n}\n\n.tna-header {\n @include colour.contrast;\n\n position: relative;\n\n &::after {\n position: absolute;\n inset: auto 0 0;\n z-index: 1;\n\n border-bottom: 1px transparent solid;\n\n content: \"\";\n }\n\n &:not(&--accent) {\n background-color: colour.brand-colour(\"black\");\n }\n\n .tna-template--system-theme & {\n @media (prefers-contrast: more) and (prefers-color-scheme: light) {\n @include colour.colour-background(\"background-tint\");\n }\n }\n\n .tna-template--high-contrast-theme:not(.tna-template--dark-theme) & {\n @include colour.colour-background(\"background-tint\");\n }\n\n &__exit {\n padding-top: 0.5rem;\n padding-bottom: 0.5rem;\n\n text-align: right;\n\n background-color: colourVars.$dark-grey;\n }\n\n &__exit-link {\n text-decoration: none;\n @include typography.relative-font-size(16);\n\n &,\n &:link,\n &:visited {\n color: #fff;\n }\n\n &:hover {\n text-decoration: underline;\n }\n\n .fa-solid {\n margin-left: 0.5rem;\n }\n }\n\n &__contents {\n &.tna-container {\n justify-content: space-between;\n }\n }\n\n &__logo {\n padding-top: 1.5rem;\n padding-bottom: 1.5rem;\n }\n\n &__logo-link {\n display: flex;\n align-items: flex-end;\n\n color: inherit;\n text-decoration: none;\n\n &,\n &:link,\n &:visited {\n color: inherit;\n }\n\n &:hover {\n text-decoration: none;\n\n @include colour.colour-outline(\"font-dark\", 0.375rem, solid);\n outline-offset: 1px;\n }\n }\n\n .tna-logo {\n width: 6rem;\n height: 6rem;\n\n display: inline-block;\n }\n\n .tna-logo__foreground {\n @include colour.colour-fill(\"font-dark\");\n }\n\n .tna-logo__background {\n fill: none;\n }\n\n &__logo-strapline {\n margin: 0 0.75rem;\n\n display: inline-block;\n\n line-height: 2rem;\n text-transform: uppercase;\n }\n\n &__navigation-toggle {\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 // transition: height 1ms 100ms;\n\n &::before,\n &::after {\n height: 0.25rem;\n\n display: block;\n\n position: absolute;\n right: 0;\n left: 0;\n\n background-color: inherit;\n\n // transition:\n // top 100ms 100ms,\n // bottom 100ms 100ms,\n // transform 100ms;\n\n content: \"\";\n }\n\n &::before {\n top: 0;\n }\n\n &::after {\n bottom: 0;\n }\n }\n\n &__navigation-toggle-button {\n height: 2rem;\n padding: 0;\n\n display: block;\n\n position: relative;\n\n appearance: none;\n\n font-size: 0;\n\n background: none;\n\n border: 0 transparent solid;\n border-width: 0.25rem 0;\n\n cursor: pointer;\n\n &--opened {\n .tna-header__hamburger {\n height: 0;\n\n &::before,\n &::after {\n // transition:\n // top 100ms,\n // bottom 100ms,\n // transform 100ms 100ms;\n }\n\n &::before {\n top: 0.625rem;\n\n transform: rotate(-135deg);\n }\n\n &::after {\n bottom: 0.625rem;\n\n transform: rotate(135deg);\n }\n }\n }\n }\n\n &__navigation {\n display: flex;\n flex-direction: column-reverse;\n justify-content: space-between;\n align-items: flex-end;\n\n position: relative;\n z-index: 2;\n }\n\n &__top-navigation-items {\n margin: 0;\n padding: 1.25rem 0;\n\n display: flex;\n justify-content: flex-end;\n gap: 0.5rem 1.5rem;\n\n list-style: none;\n\n line-height: 1;\n }\n\n &__top-navigation-item {\n display: block;\n }\n\n &__top-navigation-item-link {\n display: flex;\n align-items: center;\n\n text-decoration: none;\n @include typography.relative-font-size(16);\n\n &,\n &:link,\n &:visited {\n color: inherit;\n }\n\n &:hover,\n &--selected {\n &,\n &:link,\n &:visited {\n @include typography.interacted-text-decoration;\n }\n }\n\n .fa-solid,\n .fa-brands {\n margin-right: 0.375rem;\n }\n }\n\n &__navigation-items {\n margin: 0;\n padding: 0;\n\n display: flex;\n flex-wrap: nowrap;\n gap: 0.75rem;\n\n list-style: none;\n\n white-space: nowrap;\n }\n\n &__navigation-item {\n }\n\n &__navigation-item-link {\n padding: 0.5rem 1rem;\n\n display: inline-block;\n\n @include typography.heading-font;\n text-decoration: none;\n line-height: 2;\n\n &,\n &:link,\n &:visited {\n color: inherit;\n }\n\n &:hover,\n &--selected {\n text-decoration: none;\n\n &,\n &:link,\n &:visited {\n @include uninvert;\n @include colour.colour-font(\"font-dark\");\n @include colour.colour-background(\"page-background\");\n }\n }\n }\n\n &--accent {\n @include colour.accent;\n }\n\n @include media.on-larger-than-mobile {\n .tna-header__navigation-toggle {\n display: none;\n }\n\n &__navigation-item-link {\n border: 1px transparent solid;\n border-bottom: none;\n }\n }\n\n @include media.on-mobile {\n &__contents {\n &.tna-container {\n padding-right: 0;\n padding-left: 0;\n }\n }\n\n &__logo {\n padding-top: 1rem;\n padding-bottom: 1rem;\n }\n\n .tna-logo {\n width: 4.5rem;\n height: 4.5rem;\n }\n\n &__logo-strapline {\n line-height: 1.5;\n }\n\n &__navigation-toggle {\n &.tna-column {\n padding-left: 0;\n }\n }\n\n &__navigation {\n @include uninvert;\n @include colour.colour-font(\"font-base\");\n @include typography.relative-font-size(20);\n\n align-items: stretch;\n flex-direction: column;\n\n &.tna-column {\n padding-right: 0;\n padding-left: 0;\n }\n\n .tna-template--js-enabled & {\n display: none;\n\n &--open {\n display: flex;\n }\n }\n }\n\n &__top-navigation-items {\n padding: 0.5rem 1rem;\n\n justify-content: flex-start;\n\n @include colour.colour-background(\"page-background\");\n\n @include colour.colour-border(\"keyline\", 1px, solid, bottom);\n }\n\n &__top-navigation-item {\n margin: 0;\n padding: 0.5rem;\n }\n\n &__top-navigation-item-link {\n }\n\n &__navigation-items {\n width: 100%;\n\n flex-direction: column;\n gap: 0;\n\n @include colour.colour-background(\"page-background\");\n }\n\n &__navigation-item {\n margin: 0;\n\n display: block;\n\n @include colour.colour-border(\"keyline\", 1px, solid, bottom);\n }\n\n &__navigation-item-link {\n padding-right: gridVars.$gutter-width-tiny;\n padding-left: gridVars.$gutter-width-tiny + 0.5rem;\n\n display: block;\n\n position: relative;\n\n line-height: #{math.div(1, 1.125) * 2};\n\n &::after {\n width: 0;\n\n position: absolute;\n top: 0;\n bottom: 0;\n left: 0;\n\n @include colour.colour-background(\"font-dark\");\n\n content: \"\";\n }\n\n &:hover {\n &::after {\n width: 0.25rem;\n }\n }\n\n &--selected {\n &::after,\n &:hover::after {\n width: 0.5rem;\n }\n }\n }\n }\n\n @include media.on-small {\n &__logo {\n &.tna-column {\n padding-right: gridVars.$gutter-width;\n padding-left: gridVars.$gutter-width;\n }\n }\n\n &__navigation-toggle {\n &.tna-column {\n padding-right: gridVars.$gutter-width;\n }\n }\n }\n\n @include media.on-tiny {\n &__logo {\n &.tna-column {\n padding-right: gridVars.$gutter-width-tiny;\n padding-left: gridVars.$gutter-width-tiny;\n }\n }\n\n .tna-logo {\n width: 3.5rem;\n height: 3.5rem;\n }\n\n &__logo-strapline {\n line-height: 1;\n }\n\n &__navigation-toggle {\n &.tna-column {\n padding-right: gridVars.$gutter-width-tiny;\n }\n }\n }\n\n @include colour.on-high-contrast {\n &::after {\n @include colour.colour-border(\"keyline-dark\");\n }\n\n @include media.on-larger-than-mobile {\n &__navigation-item-link {\n &:hover,\n &--selected {\n &,\n &:link,\n &:visited {\n @include colour.colour-border(\"keyline-dark\");\n }\n }\n }\n }\n }\n}\n","@use \"sass:map\";\n\n$colour-palette-brand: (\n \"black\": #000,\n \"grey\": #8c9694,\n \"light-grey\": #d9d9d6,\n \"white\": #fff,\n\n \"yellow\": #fc0,\n \"pink\": #fe1d57,\n \"orange\": #fd3f03,\n \"green\": #86bc25,\n \"blue\": #00b0ff,\n\n \"brown\": #654e37,\n \"maroon\": #9c193a,\n \"chestnut\": #8f3415,\n \"forest\": #00623b,\n \"navy\": #004c7e,\n\n \"cream\": #f9f7e2,\n \"pastel-pink\": #fad3d4,\n \"pastel-orange\": #f9e1bc,\n \"pastel-green\": #dde5d5,\n \"pastel-blue\": #d4e5ef,\n);\n\n@function hex-to-rgb($hex, $opacity: 1) {\n @if $opacity == 1 {\n @return rgb(red($hex) green($hex) blue($hex));\n } @else {\n @return rgb(red($hex) green($hex) blue($hex) / #{$opacity});\n }\n}\n\n@function brand-colour($colour, $opacity: 1) {\n @return hex-to-rgb(map.get($colour-palette-brand, $colour), $opacity);\n}\n\n$dark-grey: #26262a;\n$base-font: #343338 !default;\n$link-colour: #0062a8 !default;\n$link-colour-visited: #4c2c92 !default;\n\n/\n=========================================\nLIGHT THEME (DEFAULT)\n=========================================\n/\n$colour-palette-default: (\n \"page-background\": #f4f4f4,\n \"background-tint\": #ededed,\n \"font-base\": $base-font,\n \"font-dark\": brand-colour(\"black\"),\n \"font-light\": hex-to-rgb($base-font, 0.7),\n \"icon-light\": hex-to-rgb($base-font, 0.45),\n \"link\": $link-colour,\n \"link-visited\": $link-colour-visited,\n \"focus-outline\": brand-colour(\"blue\"),\n \"keyline\": hex-to-rgb($dark-grey, 0.25),\n \"keyline-dark\": $dark-grey,\n \"input-foreground\": brand-colour(\"black\"),\n \"input-background\": brand-colour(\"white\"),\n \"input-border\": brand-colour(\"black\"),\n \"form-error\": #c00,\n \"button-text\": brand-colour(\"white\"),\n \"button-background\": brand-colour(\"black\"),\n \"button-hover-text\": brand-colour(\"black\"),\n \"button-hover-background\": brand-colour(\"white\"),\n \"contrast-background\": #1e1e1e,\n \"contrast-font-base\": brand-colour(\"white\"),\n \"contrast-font-dark\": brand-colour(\"white\"),\n \"contrast-font-light\": brand-colour(\"white\", 0.7),\n \"contrast-icon-light\": brand-colour(\"white\", 0.45),\n \"contrast-link\": brand-colour(\"white\"),\n \"contrast-link-visited\": brand-colour(\"white\"),\n \"contrast-keyline\": brand-colour(\"white\", 0.5),\n \"contrast-keyline-dark\": brand-colour(\"white\", 0.8),\n \"contrast-button-text\": brand-colour(\"black\"),\n \"contrast-button-background\": brand-colour(\"white\"),\n \"contrast-button-hover-text\": brand-colour(\"white\"),\n \"contrast-button-hover-background\": brand-colour(\"black\"),\n \"accent-background\": #111,\n \"accent-background-light\": #ededed,\n \"accent-font-base\": brand-colour(\"white\"),\n \"accent-font-dark\": brand-colour(\"white\"),\n \"accent-font-light\": brand-colour(\"white\", 0.7),\n \"accent-icon-light\": brand-colour(\"white\", 0.45),\n \"accent-link\": brand-colour(\"white\"),\n \"accent-link-visited\": #b9f,\n \"accent-keyline\": brand-colour(\"white\", 0.5),\n \"accent-keyline-dark\": brand-colour(\"white\", 0.8),\n \"button-accent-text\": brand-colour(\"black\"),\n \"button-accent-background\": brand-colour(\"grey\"),\n) !default;\n\n/\n=========================================\nDARK THEME\n=========================================\n/\n$colour-palette-dark: map.merge(\n $colour-palette-default,\n (\n \"page-background\": #222,\n \"background-tint\": #333,\n \"font-base\": brand-colour(\"white\", 0.95),\n \"font-dark\": brand-colour(\"white\"),\n \"font-light\": brand-colour(\"white\", 0.5),\n \"icon-light\": brand-colour(\"white\", 0.35),\n \"link\": brand-colour(\"blue\"),\n \"link-visited\": #a8f,\n \"focus-outline\": brand-colour(\"orange\"),\n \"keyline\": brand-colour(\"white\", 0.25),\n \"keyline-dark\": brand-colour(\"white\"),\n \"input-foreground\": brand-colour(\"white\"),\n \"input-background\": brand-colour(\"black\"),\n \"input-border\": brand-colour(\"white\"),\n \"button-text\": brand-colour(\"black\"),\n \"button-background\": brand-colour(\"white\"),\n \"button-hover-text\": brand-colour(\"white\"),\n \"button-hover-background\": brand-colour(\"black\"),\n \"contrast-background\": #111,\n \"contrast-link-visited\":\n map.get($colour-palette-default, \"contrast-link-visited\"),\n // \"accent-background-light\": brand-colour(\"light-grey\"),\n )\n) !default;\n\n/\n=========================================\nLIGHT, HIGH_CONTRAST THEME\n=========================================\n/\n$colour-palette-high-contrast: map.merge(\n $colour-palette-default,\n (\n \"page-background\": brand-colour(\"white\"),\n \"font-base\": brand-colour(\"black\"),\n \"font-light\": brand-colour(\"black\"),\n \"icon-light\": brand-colour(\"black\", 0.75),\n \"link\": #34d,\n \"link-visited\": #848,\n \"focus-outline\": brand-colour(\"orange\"),\n \"keyline\": brand-colour(\"black\"),\n \"keyline-dark\": brand-colour(\"black\"),\n \"contrast-background\": #f4f4f4,\n \"contrast-font-base\": brand-colour(\"black\"),\n \"contrast-font-dark\": brand-colour(\"black\"),\n \"contrast-font-light\": brand-colour(\"black\"),\n \"contrast-link\": #34d,\n \"contrast-link-visited\": #848,\n \"contrast-keyline\": brand-colour(\"black\"),\n \"contrast-keyline-dark\": brand-colour(\"black\"),\n \"contrast-button-text\": brand-colour(\"white\"),\n \"contrast-button-background\": brand-colour(\"black\"),\n \"contrast-button-hover-text\": brand-colour(\"black\"),\n \"contrast-button-hover-background\": brand-colour(\"white\"),\n )\n) !default;\n\n/\n=========================================\nDARK, HIGH_CONTRAST THEME\n=========================================\n/\n$colour-palette-high-contrast-dark: map.merge(\n $colour-palette-dark,\n (\n \"page-background\": #111,\n \"font-base\": brand-colour(\"white\"),\n \"font-light\": brand-colour(\"white\"),\n \"icon-light\": brand-colour(\"white\", 0.75),\n \"link\": #69f,\n \"link-visited\": #b9f,\n \"keyline\": brand-colour(\"white\"),\n \"contrast-background\": brand-colour(\"black\"),\n )\n) !default;\n"]}

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

@@ -47,6 +47,18 @@
 .tna-header {
   @include colour.contrast;
+  position: relative;
+  &::after {
+    position: absolute;
+    inset: auto 0 0;
+    z-index: 1;
+    border-bottom: 1px transparent solid;
+    content: "";
+  }
   &:not(&--accent) {
     background-color: colour.brand-colour("black");
   }
@@ -157,7 +169,7 @@
     @include colour.colour-background("font-dark");
-    transition: height 1ms 200ms;
+    // transition: height 1ms 100ms;
     &::before,
     &::after {
@@ -171,10 +183,10 @@
       background-color: inherit;
-      transition:
-        top 200ms 200ms,
-        bottom 200ms 200ms,
-        transform 200ms;
+      // transition:
+      //   top 100ms 100ms,
+      //   bottom 100ms 100ms,
+      //   transform 100ms;
       content: "";
     }
@@ -213,10 +225,10 @@
         &::before,
         &::after {
-          transition:
-            top 200ms,
-            bottom 200ms,
-            transform 200ms 200ms;
+          // transition:
+          //   top 100ms,
+          //   bottom 100ms,
+          //   transform 100ms 100ms;
         }
         &::before {
@@ -239,6 +251,9 @@
     flex-direction: column-reverse;
     justify-content: space-between;
     align-items: flex-end;
+    position: relative;
+    z-index: 2;
   }
   &__top-navigation-items {
@@ -249,8 +264,6 @@
     justify-content: flex-end;
     gap: 0.5rem 1.5rem;
-    // order: 1;
     list-style: none;
     line-height: 1;
@@ -292,7 +305,9 @@
     margin: 0;
     padding: 0;
-    // order: 2;
+    display: flex;
+    flex-wrap: nowrap;
+    gap: 0.75rem;
     list-style: none;
@@ -300,9 +315,6 @@
   }
   &__navigation-item {
-    margin-left: 0.75rem;
-    display: inline-block;
   }
   &__navigation-item-link {
@@ -314,10 +326,6 @@
     text-decoration: none;
     line-height: 2;
-    // transition:
-    //   color 200ms,
-    //   background-color 200ms;
     &,
     &:link,
     &:visited {
@@ -346,6 +354,11 @@
     .tna-header__navigation-toggle {
       display: none;
     }
+    &__navigation-item-link {
+      border: 1px transparent solid;
+      border-bottom: none;
+    }
   }
   @include media.on-mobile {
@@ -372,7 +385,6 @@
     &__navigation-toggle {
       &.tna-column {
-        // padding-right: gridVars.$gutter-width-tiny;
         padding-left: 0;
       }
     }
@@ -420,6 +432,9 @@
     &__navigation-items {
       width: 100%;
+      flex-direction: column;
+      gap: 0;
       @include colour.colour-background("page-background");
     }
@@ -451,16 +466,12 @@
         @include colour.colour-background("font-dark");
-        // transition: width 200ms;
         content: "";
       }
       &:hover {
         &::after {
           width: 0.25rem;
-          // transition: width 50ms;
         }
       }
@@ -513,28 +524,12 @@
   }
   @include colour.on-high-contrast {
-    position: relative;
     &::after {
-      position: absolute;
-      inset: auto 0 0;
-      z-index: 1;
-      @include colour.colour-border("keyline-dark", 1px, solid, bottom);
-      content: "";
-    }
-    &__navigation {
-      position: relative;
-      z-index: 2;
+      @include colour.colour-border("keyline-dark");
     }
     @include media.on-larger-than-mobile {
       &__navigation-item-link {
-        border: 1px transparent solid;
-        border-bottom: none;
         &:hover,
         &--selected {
           &,

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

@@ -210,44 +210,3 @@ Mobile.play = async ({ args, canvasElement, step }) => {
   $navigationToggle.blur();
 };
-// export const NoJavascript = Template.bind({});
-// NoJavascript.args = {
-//   navigation: [
-//     {
-//       text: "Alpha",
-//       href: "#/alpha",
-//       selected: true,
-//     },
-//     {
-//       text: "Beta",
-//       href: "#/beta",
-//     },
-//     {
-//       text: "Gamma",
-//       href: "#/gamma",
-//     },
-//   ],
-//   classes: "tna-header--demo",
-// };
-// NoJavascript.play = async ({ args, canvasElement, step }) => {
-//   document.documentElement.classList.remove("tna-template--js-enabled");
-//   canvasElement.innerHTML = canvasElement.innerHTML;
-//   const $navigationToggleWrapper = canvasElement.querySelector(
-//     `.tna-header__navigation-toggle`,
-//   );
-//   $navigationToggleWrapper.innerHTML = "";
-//   const canvas = within(canvasElement);
-//   // const $navigationItems = canvasElement.querySelector(
-//   //   `.tna-header__navigation-items`,
-//   // );
-//   // const [$linkA, $linkB, $linkC] = args.navigation.map((navigationItem) =>
-//   //   canvas.getByText(navigationItem.text),
-//   // );
-//   // await expect($navigationItems).toBeVisible();
-//   // await expect($linkA).toBeVisible();
-//   // await expect($linkB).toBeVisible();
-//   // await expect($linkC).toBeVisible();
-// };

package/nationalarchives/components/header/template.njk CHANGED Viewed

@@ -2,7 +2,7 @@
 {%- if params.accent -%}
   {%- set containerClasses = containerClasses.concat('tna-header--accent') -%}
 {%- endif -%}
-<header class="tna-header {{ containerClasses | join(' ') }}" data-module="tna-header" {%- for attribute, value in params.attributes %} {{ attribute }}="{{ value }}"{% endfor %}>
+<header class="tna-header {{ containerClasses | join(' ') }}" data-module="tna-header"{% for attribute, value in params.attributes %} {{ attribute }}="{{ value }}"{% endfor %}>
   {%- if params.exit -%}
   <div class="tna-header__exit">
     <div class="tna-container">
@@ -52,9 +52,9 @@
         <li class="tna-header__top-navigation-item">
           <a href="{{ item.href }}" class="tna-header__top-navigation-item-link" tabindex="0" {%- if item.title %} title="{{ item.title }}"{% endif %}>
             {%- if item.brandIcon -%}
-            <i class="fa-brands fa-{{ item.brandIcon }}"></i>
+            <i class="fa-brands fa-fw fa-{{ item.brandIcon }}"></i>
             {%- elseif item.icon -%}
-            <i class="fa-solid fa-{{ item.icon }}"></i>
+            <i class="fa-solid fa-fw fa-{{ item.icon }}"></i>
             {%- endif -%}
             {{ item.text }}
           </a>