npm - @nationalarchives/frontend - Versions diffs - 0.1.36 → 0.1.38 - Mend

@nationalarchives/frontend 0.1.36 → 0.1.38

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

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

	@@ -1 +1 @@
1	- {"version":3,"sourceRoot":"","sources":["../../../../src/nationalarchives/utilities/_typography.scss","../../../../src/nationalarchives/tools/_colour.scss","../../../../src/nationalarchives/tools/_spacing.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/_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/button/_button-group.scss","../../../../src/nationalarchives/components/button/button.scss","../../../../src/nationalarchives/components/grid/grid.scss","../../../../src/nationalarchives/tools/_grid.scss","../../../../src/nationalarchives/components/gallery/gallery.scss"],"names":[],"mappings":"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B,WACA,kBACA,iBACA,mBACA,kBAEA,sBAEA,aACA,eACA,2BACA,oBAEA,0DAEE,mBAGF,oBACE,eAGF,wBACE,uBAIJ,YACE,SACA,mBACA,kBAEA,sBAEA,uBACE,aACA,eACA,wBACA,oBAGF,uBACE,sBAGF,0BACE,kBAGF,0BACE,oBCjDA,kBACE,WACA,UAUI,wBACE,oBACA,UAGF,+BACE,2BAGF,8BACE,0BAVF,uBACE,qBACA,UAGF,8BACE,4BAGF,6BACE,2BAVF,uBACE,UACA,UAGF,8BACE,iBAGF,6BACE,gBAVF,uBACE,qBACA,UAGF,8BACE,4BAGF,6BACE,2BAVF,wBACE,qBACA,UAGF,+BACE,4BAGF,8BACE,2BAVF,uBACE,UACA,UAGF,8BACE,iBAGF,6BACE,gBAVF,wBACE,qBACA,UAGF,+BACE,4BAGF,8BACE,2BAVF,uBACE,qBACA,UAGF,8BACE,4BAGF,6BACE,2BAVF,uBACE,UACA,UAGF,8BACE,iBAGF,6BACE,gBAVF,uBACE,qBACA,UAGF,8BACE,4BAGF,6BACE,2BAVF,yBACE,qBACA,UAGF,gCACE,4BAGF,+BACE,2BAwBN,oBACE,WAEA,SAHF,oBACE,WAEA,SAHF,oBACE,WAEA,SAKF,qBACE,MAFS,EACX,qBACE,MAFS,EACX,qBACE,MAFS,EACX,qBACE,MAFS,EXvCf,kDWdE,yBACE,WACA,UAUI,8BACE,qBACA,UAGF,qCACE,4BAGF,oCACE,2BAVF,8BACE,qBACA,UAGF,qCACE,4BAGF,oCACE,2BAVF,8BACE,UACA,UAGF,qCACE,iBAGF,oCACE,gBAVF,8BACE,qBACA,UAGF,qCACE,4BAGF,oCACE,2BAVF,8BACE,qBACA,UAGF,qCACE,4BAGF,oCACE,2BAwBN,2BACE,WAEA,SAHF,2BACE,WAEA,SAHF,2BACE,WAEA,SAKF,4BACE,MAFS,EACX,4BACE,MAFS,EACX,4BACE,MAFS,EACX,4BACE,MAFS,GX3Bf,wBUkCA,eACE,oBACA,mBAGF,YACE,oBACA,oBV/CF,kDWpBE,wBACE,WACA,UAUI,6BACE,UACA,UAGF,oCACE,iBAGF,mCACE,gBAVF,6BACE,UACA,UAGF,oCACE,iBAGF,mCACE,gBAVF,6BACE,UACA,UAGF,oCACE,iBAGF,mCACE,gBAwBN,0BACE,WAEA,SAHF,0BACE,WAEA,SAHF,0BACE,WAEA,SAKF,2BACE,MAFS,EACX,2BACE,MAFS,EACX,2BACE,MAFS,EACX,2BACE,MAFS,GX3Bf,wBW1BE,uBACE,WACA,UAUI,4BACE,UACA,UAGF,mCACE,iBAGF,kCACE,gBAwBN,yBACE,WAEA,SAHF,yBACE,WAEA,SAHF,yBACE,WAEA,SAKF,0BACE,MAFS,EACX,0BACE,MAFS,EACX,0BACE,MAFS,EACX,0BACE,MAFS,GD0BjB,uNAME,gBACA,eExFF,aAGE,oBAEA,qBACE,iBAGF,oBACE,WAEA,aACA,sBACA,mBACA,SAEA,0BACE,wBAIJ,mBACE,SAEA,yBACE,oBAEA,kBAMF,yBACE,cACA,YAGF,+BACE,gBACA,2BlBoDA,8BAIA,0CMnDJ,gDYEM,kBAKN,sClBwCI,wCAIA,oCkBxCJ,6BACE,kBAGF,qBACE,gBAIA,4CACE,qBACA,SAEA,kBACA,6BAGF,2CACE,WAEA,yBACA,UAIA,mEACE,cAKN,mOAGE,aAGF,kDACE","file":"gallery.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-Italic.ttf\");\n // font-weight: typographyVars.$main-font-weight;\n // font-style: italic;\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 url(\"https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,#{typographyVars.$main-font-weight};0,#{typographyVars.$main-font-weight-bold};1,#{typographyVars.$main-font-weight}&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 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 + .tna-ul,\n + .tna-ol,\n + .tna-blockquote/ {\n margin-top: 1rem;\n }\n\n // + :is(p, .tna-ul, .tna-ol, .tna-blockquote) {\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 // &[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-base {\n max-width: max-content;\n padding: 0.125em 0.25rem;\n\n display: flex;\n align-items: center;\n gap: 0.5rem;\n\n @include colour.colour-font(\"font-base\");\n @include typography.detail-font-small;\n line-height: 1;\n}\n\n%chip-plain {\n padding: 0;\n\n background-color: transparent;\n\n border: none;\n}\n\n%chip-accent {\n @include colour.accent;\n\n @include colour.colour-border(\"accent-background\", 0.125rem);\n\n .tna-background-accent & {\n @include colour.contrast;\n\n @include colour.colour-border(\"contrast-background\");\n }\n}\n\n.tna-chip {\n @extend %chip-base;\n\n &--plain {\n @extend %chip-plain;\n }\n\n &:not(#{&}--plain) {\n @extend %chip-accent;\n }\n\n .fa-solid,\n .fa-brand {\n @include colour.colour-font(\"icon-light\");\n\n @include colour.on-high-contrast {\n padding-right: 0.5rem;\n\n color: inherit;\n\n @include colour.colour-border(\"keyline-dark\", 1px, solid, right);\n }\n }\n\n @at-root #{selector.unify(\"a\", &)} {\n text-decoration: none;\n\n &:hover {\n @include typography.interacted-text-decoration;\n }\n\n .fa-solid,\n .fa-brand {\n color: inherit;\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}\n\n%heading {\n @include colour.colour-font(\"font-dark\");\n text-wrap: pretty;\n\n &:not(.tna-heading--no-link-arrow) {\n a {\n display: inline-block;\n\n &::after {\n padding-left: 0.5rem;\n\n display: inline-block;\n\n font-weight: 700;\n\n content: \"\\203A\";\n }\n\n &:hover {\n &::after {\n padding-left: 0.75rem;\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(30);\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-base;\n\n &--plain {\n @extend %chip-plain;\n }\n\n &:not(#{&}--plain) {\n @extend %chip-accent;\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 @include typography.relative-font-size(16);\n\n .tna-blockquote & {\n margin: 1rem 0 0;\n }\n\n &::before {\n content: \"\\2014\" \" \";\n }\n }\n\n @include media.on-tiny {\n padding: 0.5rem 0.5rem 0.5rem 1rem;\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%light {\n @include colour-css-vars;\n\n @media (prefers-contrast: more) {\n @include colour-css-vars-high-contrast;\n }\n}\n\n@mixin light {\n @extend %light;\n}\n\n%dark {\n @include colour-css-vars-dark;\n\n @media (prefers-contrast: more) {\n @include colour-css-vars-high-contrast-dark;\n }\n}\n\n@mixin dark {\n @extend %dark;\n}\n\n%plain {\n .tna-template--system-theme & {\n @extend %light;\n\n @media (prefers-color-scheme: dark) {\n @include colour-css-vars-dark;\n }\n\n @media (prefers-contrast: more) and (prefers-color-scheme: dark) {\n @include colour-css-vars-high-contrast-dark;\n }\n }\n\n .tna-template--light-theme & {\n @include colour-css-vars;\n }\n\n .tna-template--dark-theme & {\n @include colour-css-vars-dark;\n }\n\n .tna-template--high-contrast-theme & {\n @include colour-css-vars-high-contrast;\n }\n\n .tna-template--high-contrast-theme.tna-template--dark-theme & {\n @include colour-css-vars-high-contrast-dark;\n }\n\n --background: var(--page-background);\n}\n\n@mixin plain {\n @extend %plain;\n}\n\n%contrast {\n --background: var(--contrast-background);\n --font-base: var(--contrast-font-base);\n --font-dark: var(--contrast-font-dark);\n --font-light: var(--contrast-font-light);\n --icon-light: var(--contrast-icon-light);\n --link: var(--contrast-link);\n --link-visited: var(--contrast-link-visited);\n --keyline: var(--contrast-keyline);\n --keyline-dark: var(--contrast-keyline-dark);\n --button-text: var(--contrast-button-text);\n --button-background: var(--contrast-button-background);\n --button-hover-text: var(--contrast-button-hover-text);\n --button-hover-background: var(--contrast-button-hover-background);\n\n @include colour-background(\"background\");\n\n @include colour-font(\"font-base\", false, colour.$colour-palette-dark);\n}\n\n@mixin contrast {\n @extend %contrast;\n}\n\n%contrast-on-mobile {\n @include media.on-mobile {\n --background: var(--contrast-background);\n --font-base: var(--contrast-font-base);\n --font-dark: var(--contrast-font-dark);\n --font-light: var(--contrast-font-light);\n --icon-light: var(--contrast-icon-light);\n --link: var(--contrast-link);\n --link-visited: var(--contrast-link-visited);\n --keyline: var(--contrast-keyline);\n --keyline-dark: var(--contrast-keyline-dark);\n --button-text: var(--contrast-button-text);\n --button-background: var(--contrast-button-background);\n --button-hover-text: var(--contrast-button-hover-text);\n --button-hover-background: var(--contrast-button-hover-background);\n\n @include colour-background(\"background\");\n\n @include colour-font(\"font-base\", false, colour.$colour-palette-dark);\n }\n}\n\n@mixin contrast-on-mobile {\n @extend %contrast-on-mobile;\n}\n\n%accent {\n --background: var(--accent-background);\n --font-base: var(--accent-font-base);\n --font-dark: var(--accent-font-dark);\n --font-light: var(--accent-font-light);\n --icon-light: var(--accent-icon-light);\n --link: var(--accent-link);\n --link-visited: var(--accent-link);\n --keyline: var(--accent-keyline);\n --keyline-dark: var(--accent-keyline-dark);\n\n @include colour-background(\"background\");\n\n @include colour-font(\"font-base\", false, colour.$colour-palette-dark);\n}\n\n@mixin accent {\n @extend %accent;\n}\n\n%tint {\n @include colour-background(\"background-tint\");\n @include colour-font(\"font-base\");\n}\n\n@mixin tint {\n @extend %tint;\n}\n\n%accent-background {\n @include colour-background(\"accent-background\");\n}\n\n@mixin accent-background {\n @extend %accent-background;\n}\n\n%accent-light {\n --background: var(--accent-background-light);\n --font-base: #{map.get(colour.$colour-palette-default, \"font-base\")};\n --font-dark: #{map.get(colour.$colour-palette-default, \"font-dark\")};\n --font-light: #{map.get(colour.$colour-palette-default, \"font-light\")};\n --icon-light: #{map.get(colour.$colour-palette-default, \"icon-light\")};\n // --link: #{map.get(colour.$colour-palette-default, \"link\")};\n // --link-visited: #{map.get(colour.$colour-palette-default, \"link-visited\")};\n --keyline: #{map.get(colour.$colour-palette-default, \"keyline\")};\n --keyline-dark: #{map.get(colour.$colour-palette-default, \"keyline-dark\")};\n --button-text: #{map.get(colour.$colour-palette-default, \"button-text\")};\n --button-background: #{map.get(\n colour.$colour-palette-default,\n \"button-background\"\n )};\n --button-hover-text: #{map.get(\n colour.$colour-palette-default,\n \"button-hover-text\"\n )};\n --button-hover-background: #{map.get(\n colour.$colour-palette-default,\n \"button-hover-background\"\n )};\n\n @include colour-background(\"background\");\n @include colour-font(\"font-base\");\n\n .tna-template--system-theme & {\n @media (prefers-color-scheme: dark) {\n --link: #{map.get(colour.$colour-palette-default, \"link\")};\n --link-visited: #{map.get(colour.$colour-palette-default, \"link-visited\")};\n }\n }\n\n .tna-template--dark-theme & {\n --link: #{map.get(colour.$colour-palette-default, \"link\")};\n --link-visited: #{map.get(colour.$colour-palette-default, \"link-visited\")};\n }\n}\n\n@mixin accent-light {\n @extend %accent-light;\n}\n\n@mixin on-high-contrast {\n .tna-template--high-contrast-theme & {\n @content;\n }\n\n .tna-template--system-theme & {\n @media (prefers-contrast: more) {\n @content;\n }\n }\n}\n\n@mixin on-forced-colours {\n @media (forced-colors: active) {\n @content;\n }\n}\n\n@mixin on-high-contrast-and-forced-colours {\n @include on-forced-colours {\n @content;\n }\n\n @include on-high-contrast {\n @content;\n }\n}\n","@use \"sass: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\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: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: \"Open Sans\" !default;\n$main-font-family: $main-font, sans-serif !default;\n$main-font-weight: 400 !default;\n$main-font-weight-bold: 700 !default;\n\n$heading-font-family: supria-sans-condensed, \"Arial Narrow\", sans-serif !default;\n$heading-font-weight: 500 !default;\n\n$detail-font-family: \"Roboto Mono\", monospace !default;\n$detail-font-weight: 400 !default;\n$detail-font-weight-bold: 500 !default;\n","@use \"../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 margin-bottom: 0.5rem;\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 }\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@mixin stacked-dl {\n dt,\n dd {\n width: 100%;\n margin-left: 0;\n }\n\n dd {\n padding-left: 1rem;\n }\n\n &.tna-dl--plain {\n dt {\n padding-top: 0;\n padding-bottom: 0;\n\n .fa-solid {\n margin-top: 0;\n }\n }\n\n dd {\n margin-left: 0;\n padding-top: 0;\n }\n }\n\n &:not(.tna-dl--plain) {\n dt {\n @include colour.colour-background(\"background-tint\");\n }\n\n dd {\n background: transparent !important;\n\n margin-left: 0;\n }\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-top: 0;\n padding-left: 0;\n }\n\n dd {\n padding-top: 0;\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 margin-top: -0.25rem;\n\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 &--stacked {\n @include stacked-dl;\n }\n\n @include media.on-tiny {\n @include stacked-dl;\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 \"../../tools/media\";\n@use \"../../tools/spacing\";\n\n.tna-button-group {\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n gap: 1rem;\n\n @include spacing.space-above;\n\n @include media.on-tiny {\n flex-direction: column;\n align-items: stretch;\n }\n\n &--small {\n gap: 0.5rem;\n }\n}\n","@use \"sass:math\";\n@use \"../../tools/colour\";\n@use \"../../tools/media\";\n@use \"../../tools/typography\";\n@use \"../../utilities\";\n@use \"button-group\";\n\n.tna-button {\n padding: 0.25rem 1rem;\n\n display: inline-flex;\n align-items: baseline;\n justify-content: center;\n gap: 0.75rem;\n\n @include typography.relative-font-size(18);\n @include typography.main-font-weight-bold;\n line-height: #{math.div(16, 18) 2};\n text-decoration: none;\n text-align: center;\n text-wrap: balance;\n\n @include colour.colour-background(\"button-background\");\n\n @include colour.colour-border(\"button-background\", 0.25rem);\n\n cursor: pointer;\n\n &,\n &:link,\n &:visited {\n @include colour.colour-font(\"button-text\");\n }\n\n &:hover {\n @include colour.colour-font(\"button-hover-text\");\n text-decoration: none;\n\n background: transparent;\n }\n\n .fa-solid,\n .fa-brands {\n display: block;\n\n font-size: 0.9em;\n line-height: #{math.div(16, 18) * 2};\n }\n\n &--plain {\n @include typography.main-font-weight;\n\n background-color: transparent;\n\n border-color: transparent;\n\n &,\n &:link,\n &:visited {\n @include colour.colour-font(\"link\");\n }\n\n &:hover {\n @include typography.interacted-text-decoration;\n }\n }\n\n &--accent {\n @include colour.colour-background(\"button-accent-background\");\n\n @include colour.colour-border(\"button-accent-background\");\n\n &,\n &:link,\n &:visited {\n @include colour.colour-font(\"button-accent-text\");\n }\n\n &:hover {\n @include colour.colour-font(\"font-dark\");\n }\n }\n\n &--icon-right {\n flex-direction: row-reverse;\n }\n\n &--small,\n &-group--small & {\n padding: 0 0.5rem;\n\n @include typography.relative-font-size(14);\n line-height: 1.5rem;\n\n .fa-solid,\n .fa-brands {\n line-height: 2rem;\n }\n }\n\n @mixin icon-only {\n padding-right: 0;\n padding-left: 0;\n\n gap: 0;\n\n font-size: 0;\n line-height: 0;\n\n .fa-solid,\n .fa-brands {\n width: 2.5rem;\n\n @include typography.relative-font-size(18);\n }\n }\n\n @mixin icon-only-small {\n padding-right: 0;\n padding-left: 0;\n\n .fa-solid,\n .fa-brands {\n width: 2rem;\n\n @include typography.relative-font-size(18 * 0.9);\n }\n }\n\n &--icon-only {\n @include icon-only;\n }\n\n &--small#{&}--icon-only,\n &-group--small &--icon-only {\n @include icon-only-small;\n }\n\n @include media.on-mobile {\n &--icon-only-mobile {\n @include icon-only;\n }\n\n &--small#{&}--icon-only-mobile,\n &-group--small &--icon-only-mobile {\n @include icon-only-small;\n }\n }\n\n &--solid-hover {\n &:not(.tna-button--plain):hover {\n @include colour.colour-font(\"font-dark\");\n\n @include colour.colour-background(\"page-background\");\n }\n }\n\n .tna-background-accent & {\n &:hover {\n @include colour.colour-font(\"font-dark\");\n }\n }\n\n .tna-background-accent &--accent {\n @include colour.plain;\n\n @include colour.colour-background(\"page-background\");\n\n @include colour.colour-border(\"page-background\");\n\n &,\n &:link,\n &:visited {\n @include colour.colour-font(\"font-dark\");\n }\n\n &:hover {\n @include colour.colour-font(\"page-background\");\n\n @include colour.colour-background(\"font-dark\");\n }\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 \"../../tools/colour\";\n@use \"../../tools/spacing\";\n@use \"../../tools/media\";\n@use \"../../utilities\";\n@use \"../button\";\n@use \"../grid\";\n\n.tna-gallery {\n @include colour.contrast;\n\n padding-bottom: 2rem;\n\n &__header {\n padding-top: 2rem;\n }\n\n &__items {\n width: 100%;\n\n display: flex;\n flex-direction: column;\n align-items: center;\n gap: spacing.space(\"l\");\n\n &:focus {\n outline: none !important;\n }\n }\n\n &__item {\n margin: 0;\n\n &-index {\n padding-bottom: 1rem;\n\n text-align: center;\n }\n\n &-figure {\n }\n\n &-image {\n margin: 0 auto;\n height: auto;\n }\n\n &-description {\n margin-top: 1rem;\n padding: 0.5rem 0 0.5rem 1rem;\n\n @include colour.colour-border(\"keyline-dark\", 4px, solid, left);\n }\n\n &-tabs {\n @include media.on-smaller-than-large {\n padding-top: 2rem;\n }\n }\n }\n\n &__item + &__item {\n @include colour.colour-border(\"keyline\", 1px, solid, top);\n }\n\n &__toggle-wrapper {\n text-align: center;\n }\n\n &__toggle {\n margin-top: 2rem;\n }\n\n &--touchable {\n .tna-gallery__items {\n flex-flow: row nowrap;\n gap: 6rem;\n\n overflow-x: scroll;\n scroll-snap-type: x mandatory;\n }\n\n .tna-gallery__item {\n width: 100%;\n\n scroll-snap-align: center;\n flex: none;\n }\n\n &.tna-gallery--collapsed {\n .tna-gallery__items {\n overflow: auto;\n }\n }\n }\n\n &--collapsed &__item + &__item,\n &--collapsed &__item:first-child &__item-description,\n &--collapsed &__item:first-child &__item-tabs {\n display: none;\n }\n\n &--collapsed &__item-figure {\n width: 100%;\n }\n\n @include colour.on-high-contrast {\n &__items {\n }\n\n &__item {\n &-index {\n }\n\n &-description {\n }\n }\n }\n}\n"]}
1	+ {"version":3,"sourceRoot":"","sources":["../../../../src/nationalarchives/utilities/_typography.scss","../../../../src/nationalarchives/tools/_colour.scss","../../../../src/nationalarchives/tools/_spacing.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/_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/button/_button-group.scss","../../../../src/nationalarchives/components/button/button.scss","../../../../src/nationalarchives/components/grid/grid.scss","../../../../src/nationalarchives/tools/_grid.scss","../../../../src/nationalarchives/components/gallery/gallery.scss"],"names":[],"mappings":"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eACE,UXPwB,SWQxB,WACA,kBACA,iBACA,mBACA,kBAEA,sBAEA,aACA,eACA,2BACA,oBAEA,0DAEE,mBAGF,oBACE,eAGF,wBACE,uBAIJ,YACE,SACA,mBACA,kBAEA,sBAEA,uBACE,aACA,eACA,wBACA,oBAGF,uBACE,sBAGF,0BACE,kBAGF,0BACE,oBCjDA,kBACE,WACA,UAUI,wBACE,oBACA,UAGF,+BACE,2BAGF,8BACE,0BAVF,uBACE,qBACA,UAGF,8BACE,4BAGF,6BACE,2BAVF,uBACE,UACA,UAGF,8BACE,iBAGF,6BACE,gBAVF,uBACE,qBACA,UAGF,8BACE,4BAGF,6BACE,2BAVF,wBACE,qBACA,UAGF,+BACE,4BAGF,8BACE,2BAVF,uBACE,UACA,UAGF,8BACE,iBAGF,6BACE,gBAVF,wBACE,qBACA,UAGF,+BACE,4BAGF,8BACE,2BAVF,uBACE,qBACA,UAGF,8BACE,4BAGF,6BACE,2BAVF,uBACE,UACA,UAGF,8BACE,iBAGF,6BACE,gBAVF,uBACE,qBACA,UAGF,8BACE,4BAGF,6BACE,2BAVF,yBACE,qBACA,UAGF,gCACE,4BAGF,+BACE,2BAwBN,oBACE,WAEA,SAHF,oBACE,WAEA,SAHF,oBACE,WAEA,SAKF,qBACE,MAFS,EACX,qBACE,MAFS,EACX,qBACE,MAFS,EACX,qBACE,MAFS,EXvCf,kDWdE,yBACE,WACA,UAUI,8BACE,qBACA,UAGF,qCACE,4BAGF,oCACE,2BAVF,8BACE,qBACA,UAGF,qCACE,4BAGF,oCACE,2BAVF,8BACE,UACA,UAGF,qCACE,iBAGF,oCACE,gBAVF,8BACE,qBACA,UAGF,qCACE,4BAGF,oCACE,2BAVF,8BACE,qBACA,UAGF,qCACE,4BAGF,oCACE,2BAwBN,2BACE,WAEA,SAHF,2BACE,WAEA,SAHF,2BACE,WAEA,SAKF,4BACE,MAFS,EACX,4BACE,MAFS,EACX,4BACE,MAFS,EACX,4BACE,MAFS,GX3Bf,wBUkCA,eACE,oBACA,mBAGF,YACE,oBACA,oBV/CF,kDWpBE,wBACE,WACA,UAUI,6BACE,UACA,UAGF,oCACE,iBAGF,mCACE,gBAVF,6BACE,UACA,UAGF,oCACE,iBAGF,mCACE,gBAVF,6BACE,UACA,UAGF,oCACE,iBAGF,mCACE,gBAwBN,0BACE,WAEA,SAHF,0BACE,WAEA,SAHF,0BACE,WAEA,SAKF,2BACE,MAFS,EACX,2BACE,MAFS,EACX,2BACE,MAFS,EACX,2BACE,MAFS,GX3Bf,wBW1BE,uBACE,WACA,UAUI,4BACE,UACA,UAGF,mCACE,iBAGF,kCACE,gBAwBN,yBACE,WAEA,SAHF,yBACE,WAEA,SAHF,yBACE,WAEA,SAKF,0BACE,MAFS,EACX,0BACE,MAFS,EACX,0BACE,MAFS,EACX,0BACE,MAFS,GD0BjB,uNAME,gBACA,eExFF,aAGE,oBAEA,qBACE,iBAGF,oBACE,WAEA,aACA,sBACA,mBACA,SAEA,0BACE,wBAIJ,mBACE,SAEA,yBACE,oBAEA,kBAMF,yBACE,cACA,YAGF,+BACE,gBACA,2BlBoDA,8BAIA,0CMnDJ,gDYEM,kBAKN,sClBwCI,wCAIA,oCkBxCJ,6BACE,kBAGF,qBACE,gBAIA,4CACE,qBACA,SAEA,kBACA,6BAGF,2CACE,WAEA,yBACA,UAIA,mEACE,cAKN,mOAGE,aAGF,kDACE","file":"gallery.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-Italic.ttf\");\n // font-weight: typographyVars.$main-font-weight;\n // font-style: italic;\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 url(\"https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,#{typographyVars.$main-font-weight};0,#{typographyVars.$main-font-weight-bold};1,#{typographyVars.$main-font-weight}&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 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 + .tna-ul,\n + .tna-ol,\n + .tna-blockquote/ {\n margin-top: 1rem;\n }\n\n // + :is(p, .tna-ul, .tna-ol, .tna-blockquote) {\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 // &[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-base {\n max-width: max-content;\n padding: 0.125em 0.25rem;\n\n display: flex;\n align-items: center;\n gap: 0.5rem;\n\n @include colour.colour-font(\"font-base\");\n @include typography.detail-font-small;\n line-height: 1;\n}\n\n%chip-plain {\n padding: 0;\n\n background-color: transparent;\n\n border: none;\n}\n\n%chip-accent {\n @include colour.accent;\n\n @include colour.colour-border(\"accent-background\", 0.125rem);\n\n .tna-background-accent & {\n @include colour.contrast;\n\n @include colour.colour-border(\"contrast-background\");\n }\n}\n\n.tna-chip {\n @extend %chip-base;\n\n &--plain {\n @extend %chip-plain;\n }\n\n &:not(#{&}--plain) {\n @extend %chip-accent;\n }\n\n .fa-solid,\n .fa-brand {\n @include colour.colour-font(\"icon-light\");\n\n @include colour.on-high-contrast {\n padding-right: 0.5rem;\n\n color: inherit;\n\n @include colour.colour-border(\"keyline-dark\", 1px, solid, right);\n }\n }\n\n @at-root #{selector.unify(\"a\", &)} {\n text-decoration: none;\n\n &:hover {\n @include typography.interacted-text-decoration;\n }\n\n .fa-solid,\n .fa-brand {\n color: inherit;\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}\n\n%heading {\n @include colour.colour-font(\"font-dark\");\n text-wrap: pretty;\n\n &:not(.tna-heading--no-link-arrow) {\n a {\n display: inline-block;\n\n &::after {\n padding-left: 0.5rem;\n\n display: inline-block;\n\n font-weight: 700;\n\n content: \"\\203A\";\n }\n\n &:hover {\n &::after {\n padding-left: 0.75rem;\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(30);\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-base;\n\n &--plain {\n @extend %chip-plain;\n }\n\n &:not(#{&}--plain) {\n @extend %chip-accent;\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 @include typography.relative-font-size(16);\n\n .tna-blockquote & {\n margin: 1rem 0 0;\n }\n\n &::before {\n content: \"\\2014\" \" \";\n }\n }\n\n @include media.on-tiny {\n padding: 0.5rem 0.5rem 0.5rem 1rem;\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%light {\n @include colour-css-vars;\n\n @media (prefers-contrast: more) {\n @include colour-css-vars-high-contrast;\n }\n\n .tna-template--high-contrast-theme & {\n @include colour-css-vars-high-contrast;\n }\n}\n\n@mixin light {\n @extend %light;\n}\n\n%dark {\n @include colour-css-vars-dark;\n\n @media (prefers-contrast: more) {\n @include colour-css-vars-high-contrast-dark;\n }\n\n .tna-template--high-contrast-theme & {\n @include colour-css-vars-high-contrast-dark;\n }\n}\n\n@mixin dark {\n @extend %dark;\n}\n\n%plain {\n .tna-template--system-theme & {\n @extend %light;\n\n @media (prefers-color-scheme: dark) {\n @include colour-css-vars-dark;\n }\n\n @media (prefers-contrast: more) and (prefers-color-scheme: dark) {\n @include colour-css-vars-high-contrast-dark;\n }\n }\n\n .tna-template--light-theme & {\n @include colour-css-vars;\n }\n\n .tna-template--dark-theme & {\n @include colour-css-vars-dark;\n }\n\n .tna-template--high-contrast-theme & {\n @include colour-css-vars-high-contrast;\n }\n\n .tna-template--high-contrast-theme.tna-template--dark-theme & {\n @include colour-css-vars-high-contrast-dark;\n }\n\n --background: var(--page-background);\n}\n\n@mixin plain {\n @extend %plain;\n}\n\n%contrast {\n --background: var(--contrast-background);\n --font-base: var(--contrast-font-base);\n --font-dark: var(--contrast-font-dark);\n --font-light: var(--contrast-font-light);\n --icon-light: var(--contrast-icon-light);\n --link: var(--contrast-link);\n --link-visited: var(--contrast-link-visited);\n --keyline: var(--contrast-keyline);\n --keyline-dark: var(--contrast-keyline-dark);\n --button-text: var(--contrast-button-text);\n --button-background: var(--contrast-button-background);\n --button-hover-text: var(--contrast-button-hover-text);\n --button-hover-background: var(--contrast-button-hover-background);\n\n @include colour-background(\"background\");\n\n @include colour-font(\"font-base\", false, colour.$colour-palette-dark);\n}\n\n@mixin contrast {\n @extend %contrast;\n}\n\n%contrast-on-mobile {\n @include media.on-mobile {\n --background: var(--contrast-background);\n --font-base: var(--contrast-font-base);\n --font-dark: var(--contrast-font-dark);\n --font-light: var(--contrast-font-light);\n --icon-light: var(--contrast-icon-light);\n --link: var(--contrast-link);\n --link-visited: var(--contrast-link-visited);\n --keyline: var(--contrast-keyline);\n --keyline-dark: var(--contrast-keyline-dark);\n --button-text: var(--contrast-button-text);\n --button-background: var(--contrast-button-background);\n --button-hover-text: var(--contrast-button-hover-text);\n --button-hover-background: var(--contrast-button-hover-background);\n\n @include colour-background(\"background\");\n\n @include colour-font(\"font-base\", false, colour.$colour-palette-dark);\n }\n}\n\n@mixin contrast-on-mobile {\n @extend %contrast-on-mobile;\n}\n\n%accent {\n --background: var(--accent-background);\n --font-base: var(--accent-font-base);\n --font-dark: var(--accent-font-dark);\n --font-light: var(--accent-font-light);\n --icon-light: var(--accent-icon-light);\n --link: var(--accent-link);\n --link-visited: var(--accent-link);\n --keyline: var(--accent-keyline);\n --keyline-dark: var(--accent-keyline-dark);\n\n @include colour-background(\"background\");\n\n @include colour-font(\"font-base\", false, colour.$colour-palette-dark);\n}\n\n@mixin accent {\n @extend %accent;\n}\n\n%tint {\n @include colour-background(\"background-tint\");\n @include colour-font(\"font-base\");\n}\n\n@mixin tint {\n @extend %tint;\n}\n\n%accent-background {\n @include colour-background(\"accent-background\");\n}\n\n@mixin accent-background {\n @extend %accent-background;\n}\n\n%accent-light {\n --background: var(--accent-background-light);\n --font-base: #{map.get(colour.$colour-palette-default, \"font-base\")};\n --font-dark: #{map.get(colour.$colour-palette-default, \"font-dark\")};\n --font-light: #{map.get(colour.$colour-palette-default, \"font-light\")};\n --icon-light: #{map.get(colour.$colour-palette-default, \"icon-light\")};\n // --link: #{map.get(colour.$colour-palette-default, \"link\")};\n // --link-visited: #{map.get(colour.$colour-palette-default, \"link-visited\")};\n --keyline: #{map.get(colour.$colour-palette-default, \"keyline\")};\n --keyline-dark: #{map.get(colour.$colour-palette-default, \"keyline-dark\")};\n --button-text: #{map.get(colour.$colour-palette-default, \"button-text\")};\n --button-background: #{map.get(\n colour.$colour-palette-default,\n \"button-background\"\n )};\n --button-hover-text: #{map.get(\n colour.$colour-palette-default,\n \"button-hover-text\"\n )};\n --button-hover-background: #{map.get(\n colour.$colour-palette-default,\n \"button-hover-background\"\n )};\n\n @include colour-background(\"background\");\n @include colour-font(\"font-base\");\n\n .tna-template--system-theme & {\n @media (prefers-color-scheme: dark) {\n --link: #{map.get(colour.$colour-palette-default, \"link\")};\n --link-visited: #{map.get(colour.$colour-palette-default, \"link-visited\")};\n }\n }\n\n .tna-template--dark-theme & {\n --link: #{map.get(colour.$colour-palette-default, \"link\")};\n --link-visited: #{map.get(colour.$colour-palette-default, \"link-visited\")};\n }\n}\n\n@mixin accent-light {\n @extend %accent-light;\n}\n\n@mixin on-high-contrast {\n .tna-template--high-contrast-theme & {\n @content;\n }\n\n .tna-template--system-theme & {\n @media (prefers-contrast: more) {\n @content;\n }\n }\n}\n\n@mixin on-forced-colours {\n @media (forced-colors: active) {\n @content;\n }\n}\n\n@mixin on-high-contrast-and-forced-colours {\n @include on-forced-colours {\n @content;\n }\n\n @include on-high-contrast {\n @content;\n }\n}\n","@use \"sass: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\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: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: \"Open Sans\" !default;\n$main-font-family: $main-font, sans-serif !default;\n$main-font-weight: 400 !default;\n$main-font-weight-bold: 700 !default;\n\n$heading-font-family: supria-sans-condensed, \"Arial Narrow\", sans-serif !default;\n$heading-font-weight: 500 !default;\n\n$detail-font-family: \"Roboto Mono\", monospace !default;\n$detail-font-weight: 400 !default;\n$detail-font-weight-bold: 500 !default;\n","@use \"../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 margin-bottom: 0.5rem;\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 }\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@mixin stacked-dl {\n dt,\n dd {\n width: 100%;\n margin-left: 0;\n }\n\n dd {\n padding-left: 1rem;\n }\n\n &.tna-dl--plain {\n dt {\n padding-top: 0;\n padding-bottom: 0;\n\n .fa-solid {\n margin-top: 0;\n }\n }\n\n dd {\n margin-left: 0;\n padding-top: 0;\n }\n }\n\n &:not(.tna-dl--plain) {\n dt {\n @include colour.colour-background(\"background-tint\");\n }\n\n dd {\n background: transparent !important;\n\n margin-left: 0;\n }\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-top: 0;\n padding-left: 0;\n }\n\n dd {\n padding-top: 0;\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 margin-top: -0.25rem;\n\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 &--stacked {\n @include stacked-dl;\n }\n\n @include media.on-tiny {\n @include stacked-dl;\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 \"../../tools/media\";\n@use \"../../tools/spacing\";\n\n.tna-button-group {\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n gap: 1rem;\n\n @include spacing.space-above;\n\n @include media.on-tiny {\n flex-direction: column;\n align-items: stretch;\n }\n\n &--small {\n gap: 0.5rem;\n }\n}\n","@use \"sass:math\";\n@use \"../../tools/colour\";\n@use \"../../tools/media\";\n@use \"../../tools/typography\";\n@use \"../../utilities\";\n@use \"button-group\";\n\n.tna-button {\n padding: 0.25rem 1rem;\n\n display: inline-flex;\n align-items: baseline;\n justify-content: center;\n gap: 0.75rem;\n\n @include typography.relative-font-size(18);\n @include typography.main-font-weight-bold;\n line-height: #{math.div(16, 18) 2};\n text-decoration: none;\n text-align: center;\n text-wrap: balance;\n\n @include colour.colour-background(\"button-background\");\n\n @include colour.colour-border(\"button-background\", 0.25rem);\n\n cursor: pointer;\n\n &,\n &:link,\n &:visited {\n @include colour.colour-font(\"button-text\");\n }\n\n &:hover {\n @include colour.colour-font(\"button-hover-text\");\n text-decoration: none;\n\n background: transparent;\n }\n\n .fa-solid,\n .fa-brands {\n display: block;\n\n font-size: 0.9em;\n line-height: #{math.div(16, 18) * 2};\n }\n\n &--plain {\n @include typography.main-font-weight;\n\n background-color: transparent;\n\n border-color: transparent;\n\n &,\n &:link,\n &:visited {\n @include colour.colour-font(\"link\");\n }\n\n &:hover {\n @include typography.interacted-text-decoration;\n }\n }\n\n &--accent {\n @include colour.colour-background(\"button-accent-background\");\n\n @include colour.colour-border(\"button-accent-background\");\n\n &,\n &:link,\n &:visited {\n @include colour.colour-font(\"button-accent-text\");\n }\n\n &:hover {\n @include colour.colour-font(\"font-dark\");\n }\n }\n\n &--icon-right {\n flex-direction: row-reverse;\n }\n\n &--small,\n &-group--small & {\n padding: 0 0.5rem;\n\n @include typography.relative-font-size(14);\n line-height: 1.5rem;\n\n .fa-solid,\n .fa-brands {\n line-height: 2rem;\n }\n }\n\n @mixin icon-only {\n padding-right: 0;\n padding-left: 0;\n\n gap: 0;\n\n font-size: 0;\n line-height: 0;\n\n .fa-solid,\n .fa-brands {\n width: 2.5rem;\n\n @include typography.relative-font-size(18);\n }\n }\n\n @mixin icon-only-small {\n padding-right: 0;\n padding-left: 0;\n\n .fa-solid,\n .fa-brands {\n width: 2rem;\n\n @include typography.relative-font-size(18 * 0.9);\n }\n }\n\n &--icon-only {\n @include icon-only;\n }\n\n &--small#{&}--icon-only,\n &-group--small &--icon-only {\n @include icon-only-small;\n }\n\n @include media.on-mobile {\n &--icon-only-mobile {\n @include icon-only;\n }\n\n &--small#{&}--icon-only-mobile,\n &-group--small &--icon-only-mobile {\n @include icon-only-small;\n }\n }\n\n &--solid-hover {\n &:not(.tna-button--plain):hover {\n @include colour.colour-font(\"font-dark\");\n\n @include colour.colour-background(\"page-background\");\n }\n }\n\n .tna-background-accent & {\n &:hover {\n @include colour.colour-font(\"font-dark\");\n }\n }\n\n .tna-background-accent &--accent {\n @include colour.plain;\n\n @include colour.colour-background(\"page-background\");\n\n @include colour.colour-border(\"page-background\");\n\n &,\n &:link,\n &:visited {\n @include colour.colour-font(\"font-dark\");\n }\n\n &:hover {\n @include colour.colour-font(\"page-background\");\n\n @include colour.colour-background(\"font-dark\");\n }\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 \"../../tools/colour\";\n@use \"../../tools/spacing\";\n@use \"../../tools/media\";\n@use \"../../utilities\";\n@use \"../button\";\n@use \"../grid\";\n\n.tna-gallery {\n @include colour.contrast;\n\n padding-bottom: 2rem;\n\n &__header {\n padding-top: 2rem;\n }\n\n &__items {\n width: 100%;\n\n display: flex;\n flex-direction: column;\n align-items: center;\n gap: spacing.space(\"l\");\n\n &:focus {\n outline: none !important;\n }\n }\n\n &__item {\n margin: 0;\n\n &-index {\n padding-bottom: 1rem;\n\n text-align: center;\n }\n\n &-figure {\n }\n\n &-image {\n margin: 0 auto;\n height: auto;\n }\n\n &-description {\n margin-top: 1rem;\n padding: 0.5rem 0 0.5rem 1rem;\n\n @include colour.colour-border(\"keyline-dark\", 4px, solid, left);\n }\n\n &-tabs {\n @include media.on-smaller-than-large {\n padding-top: 2rem;\n }\n }\n }\n\n &__item + &__item {\n @include colour.colour-border(\"keyline\", 1px, solid, top);\n }\n\n &__toggle-wrapper {\n text-align: center;\n }\n\n &__toggle {\n margin-top: 2rem;\n }\n\n &--touchable {\n .tna-gallery__items {\n flex-flow: row nowrap;\n gap: 6rem;\n\n overflow-x: scroll;\n scroll-snap-type: x mandatory;\n }\n\n .tna-gallery__item {\n width: 100%;\n\n scroll-snap-align: center;\n flex: none;\n }\n\n &.tna-gallery--collapsed {\n .tna-gallery__items {\n overflow: auto;\n }\n }\n }\n\n &--collapsed &__item + &__item,\n &--collapsed &__item:first-child &__item-description,\n &--collapsed &__item:first-child &__item-tabs {\n display: none;\n }\n\n &--collapsed &__item-figure {\n width: 100%;\n }\n\n @include colour.on-high-contrast {\n &__items {\n }\n\n &__item {\n &-index {\n }\n\n &-description {\n }\n }\n }\n}\n"]}

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

@@ -1,2 +1,2 @@
-!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t():"function"==typeof define&&define.amd?define("TNAFrontend",[],t):"object"==typeof exports?exports.TNAFrontend=t():e.TNAFrontend=t()}(self,(()=>(()=>{"use strict";var e={948:(e,t,r)=>{r.d(t,{Z:()=>i});const i=function(){return([1e7]+-1e3+-4e3+-8e3+-1e11).replace(/[018]/g,(function(e){return(e^crypto.getRandomValues(new Uint8Array(1))[0]&15>>e/4).toString(16)}))}}},t={};function r(i){var o=t[i];if(void 0!==o)return o.exports;var n=t[i]={exports:{}};return e[i](n,n.exports,r),n.exports}r.d=(e,t)=>{for(var i in t)r.o(t,i)&&!r.o(e,i)&&Object.defineProperty(e,i,{enumerable:!0,get:t[i]})},r.o=(e,t)=>Object.prototype.hasOwnProperty.call(e,t),r.r=e=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})};var i={};return(()=>{r.r(i),r.d(i,{Gallery:()=>l});var e=r(948);function t(e){return t="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e},t(e)}function o(e,t){for(var r=0;r<t.length;r++){var i=t[r];i.enumerable=i.enumerable||!1,i.configurable=!0,"value"in i&&(i.writable=!0),Object.defineProperty(e,n(i.key),i)}}function n(e){var r=function(e,r){if("object"!=t(e)||!e)return e;var i=e[Symbol.toPrimitive];if(void 0!==i){var o=i.call(e,"string");if("object"!=t(o))return o;throw new TypeError("@@toPrimitive must return a primitive value.")}return String(e)}(e);return"symbol"==t(r)?r:String(r)}var l=function(){function t(e){!function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}(this,t),this.$module=e,this.$items=e&&e.querySelector(".tna-gallery__items"),this.opened=!1}var r,i;return r=t,(i=[{key:"init",value:function(){var t=this;if(this.$module&&this.$items&&(this.items=this.$module.querySelectorAll(".tna-gallery__item").length,this.items>1)){var r="tna-gallery-".concat((0,e.Z)());this.$module.classList.add("tna-gallery--collapsed"),this.$items.setAttribute("tabindex","-1"),this.$galleryToggle=document.createElement("button"),this.$galleryToggle.classList.add("tna-gallery__toggle","tna-button","tna-button--accent"),this.$galleryToggle.setAttribute("aria-controls",r),this.$galleryToggle.setAttribute("aria-expanded",!1),this.$galleryToggle.innerText="View ".concat(this.items," images"),this.$galleryToggle.addEventListener("click",(function(){t.handleToggleGallery()})),this.$galleryToggleWrapper=document.createElement("div"),this.$galleryToggleWrapper.classList.add("tna-column","tna-column--full","tna-gallery__toggle-wrapper"),this.$galleryToggleWrapper.appendChild(this.$galleryToggle),this.$items.parentElement.appendChild(this.$galleryToggleWrapper),this.$items.setAttribute("id",r)}}},{key:"handleToggleGallery",value:function(){this.opened=!this.opened,this.opened?(this.$module.classList.remove("tna-gallery--collapsed"),this.$galleryToggle.setAttribute("aria-expanded",!0),this.$galleryToggle.innerText="Close images",this.$items.setAttribute("tabindex","0"),this.$items.focus(),this.$items.setAttribute("tabindex","-1")):(this.$module.classList.add("tna-gallery--collapsed"),this.$galleryToggle.setAttribute("aria-expanded",!1),this.$galleryToggle.innerText="View ".concat(this.items," images"))}}])&&o(r.prototype,i),Object.defineProperty(r,"prototype",{writable:!1}),t}()})(),i})()));
+!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t():"function"==typeof define&&define.amd?define("TNAFrontend",[],t):"object"==typeof exports?exports.TNAFrontend=t():e.TNAFrontend=t()}(self,(()=>(()=>{"use strict";var e={64:(e,t,r)=>{r.d(t,{c:()=>i});const i=function(){return([1e7]+-1e3+-4e3+-8e3+-1e11).replace(/[018]/g,(function(e){return(e^crypto.getRandomValues(new Uint8Array(1))[0]&15>>e/4).toString(16)}))}}},t={};function r(i){var o=t[i];if(void 0!==o)return o.exports;var n=t[i]={exports:{}};return e[i](n,n.exports,r),n.exports}r.d=(e,t)=>{for(var i in t)r.o(t,i)&&!r.o(e,i)&&Object.defineProperty(e,i,{enumerable:!0,get:t[i]})},r.o=(e,t)=>Object.prototype.hasOwnProperty.call(e,t),r.r=e=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})};var i={};return(()=>{r.r(i),r.d(i,{Gallery:()=>l});var e=r(64);function t(e){return t="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e},t(e)}function o(e,t){for(var r=0;r<t.length;r++){var i=t[r];i.enumerable=i.enumerable||!1,i.configurable=!0,"value"in i&&(i.writable=!0),Object.defineProperty(e,n(i.key),i)}}function n(e){var r=function(e,r){if("object"!=t(e)||!e)return e;var i=e[Symbol.toPrimitive];if(void 0!==i){var o=i.call(e,"string");if("object"!=t(o))return o;throw new TypeError("@@toPrimitive must return a primitive value.")}return String(e)}(e);return"symbol"==t(r)?r:String(r)}var l=function(){function t(e){!function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}(this,t),this.$module=e,this.$items=e&&e.querySelector(".tna-gallery__items"),this.opened=!1}var r,i;return r=t,(i=[{key:"init",value:function(){var t=this;if(this.$module&&this.$items&&(this.items=this.$module.querySelectorAll(".tna-gallery__item").length,this.items>1)){var r="tna-gallery-".concat((0,e.c)());this.$module.classList.add("tna-gallery--collapsed"),this.$items.setAttribute("tabindex","-1"),this.$galleryToggle=document.createElement("button"),this.$galleryToggle.classList.add("tna-gallery__toggle","tna-button","tna-button--accent"),this.$galleryToggle.setAttribute("aria-controls",r),this.$galleryToggle.setAttribute("aria-expanded",!1),this.$galleryToggle.innerText="View ".concat(this.items," images"),this.$galleryToggle.addEventListener("click",(function(){t.handleToggleGallery()})),this.$galleryToggleWrapper=document.createElement("div"),this.$galleryToggleWrapper.classList.add("tna-column","tna-column--full","tna-gallery__toggle-wrapper"),this.$galleryToggleWrapper.appendChild(this.$galleryToggle),this.$items.parentElement.appendChild(this.$galleryToggleWrapper),this.$items.setAttribute("id",r)}}},{key:"handleToggleGallery",value:function(){this.opened=!this.opened,this.opened?(this.$module.classList.remove("tna-gallery--collapsed"),this.$galleryToggle.setAttribute("aria-expanded",!0),this.$galleryToggle.innerText="Close images",this.$items.setAttribute("tabindex","0"),this.$items.focus(),this.$items.setAttribute("tabindex","-1")):(this.$module.classList.add("tna-gallery--collapsed"),this.$galleryToggle.setAttribute("aria-expanded",!1),this.$galleryToggle.innerText="View ".concat(this.items," images"))}}])&&o(r.prototype,i),Object.defineProperty(r,"prototype",{writable:!1}),t}()})(),i})()));
 //# sourceMappingURL=gallery.js.map

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

	@@ -1 +1 @@
1	- {"version":3,"file":"components/gallery/gallery.js","mappings":"CAAA,SAA2CA,EAAMC,GAC1B,iBAAZC,SAA0C,iBAAXC,OACxCA,OAAOD,QAAUD,IACQ,mBAAXG,QAAyBA,OAAOC,IAC9CD,OAAO,cAAe,GAAIH,GACA,iBAAZC,QACdA,QAAqB,YAAID,IAEzBD,EAAkB,YAAIC,GACvB,CATD,CASGK,MAAM,I,~~yDCDT~~,QARe,WAAH,OACT,CAAC,MAAQ,KAAO,KAAO,KAAO,MAAMC,QAAQ,UAAU,SAACC,GAAC,OAErDA,EACCC,OAAOC,gBAAgB,IAAIC,WAAW,IAAI,GAAM,IAAOH,EAAI,GAC5DI,SAAS,GAAG,GACf,C,GCLCC,EAA2B,CAAC,EAGhC,SAASC,EAAoBC,GAE5B,IAAIC,EAAeH,EAAyBE,GAC5C,QAAqBE,IAAjBD,EACH,OAAOA,EAAad,QAGrB,IAAIC,EAASU,EAAyBE,GAAY,CAGjDb,QAAS,CAAC,GAOX,OAHAgB,EAAoBH,GAAUZ,EAAQA,EAAOD,QAASY,GAG/CX,EAAOD,OACf,CCrBAY,EAAoBK,EAAI,CAACjB,EAASkB,KACjC,IAAI,IAAIC,KAAOD,EACXN,EAAoBQ,EAAEF,EAAYC,KAASP,EAAoBQ,EAAEpB,EAASmB,IAC5EE,OAAOC,eAAetB,EAASmB,EAAK,CAAEI,YAAY,EAAMC,IAAKN,EAAWC,IAE1E,ECNDP,EAAoBQ,EAAI,CAACK,EAAKC,IAAUL,OAAOM,UAAUC,eAAeC,KAAKJ,EAAKC,GCClFd,EAAoBkB,EAAK9B,IACH,oBAAX+B,QAA0BA,OAAOC,aAC1CX,OAAOC,eAAetB,EAAS+B,OAAOC,YAAa,CAAEC,MAAO,WAE7DZ,OAAOC,eAAetB,EAAS,aAAc,CAAEiC,OAAO,GAAO,E,~~yuBCHvD~~,IAAMC,EAAO,WAClB,SAAAA,EAAYC,I,4FAASC,CAAA,KAAAF,GACnBG,KAAKF,QAAUA,EACfE,KAAKC,OAASH,GAAWA,EAAQI,cAAc,uBAC/CF,KAAKG,QAAS,CAChB,C,QAuEC,O,EAvEAN,G,EAAA,EAAAf,IAAA,OAAAc,MAED,WAAO,IAAAQ,EAAA,KACL,GAAKJ,KAAKF,SAAYE,KAAKC,SAM3BD,KAAKK,MAAQL,KAAKF,QAAQQ,iBAAiB,sBAAsBC,OAE7DP,KAAKK,MAAQ,GAAG,CAClB,IAAMG,EAAW,eAAHC,QAAkBC,EAAAA,EAAAA,MAEhCV,KAAKF,QAAQa,UAAUC,IAAI,0BAC3BZ,KAAKC,OAAOY,aAAa,WAAY,MAErCb,KAAKc,eAAiBC,SAASC,cAAc,UAC7ChB,KAAKc,eAAeH,UAAUC,IAC5B,sBACA,aACA,sBAEFZ,KAAKc,eAAeD,aAAa,gBAAiBL,GAClDR,KAAKc,eAAeD,aAAa,iBAAiB,GAClDb,KAAKc,eAAeG,UAAY,QAAHR,OAAWT,KAAKK,MAAK,WAWlDL,KAAKc,eAAeI,iBAAiB,SAAS,WAI5Cd,EAAKe,qBACP,IAEAnB,KAAKoB,sBAAwBL,SAASC,cAAc,OACpDhB,KAAKoB,sBAAsBT,UAAUC,IACnC,aACA,mBACA,+BAGFZ,KAAKoB,sBAAsBC,YAAYrB,KAAKc,gBAC5Cd,KAAKC,OAAOqB,cAAcD,YAAYrB,KAAKoB,uBAE3CpB,KAAKC,OAAOY,aAAa,KAAML,EACjC,CACF,GAAC,CAAA1B,IAAA,sBAAAc,MAED,WACEI,KAAKG,QAAUH,KAAKG,OAChBH,KAAKG,QACPH,KAAKF,QAAQa,UAAUY,OAAO,0BAC9BvB,KAAKc,eAAeD,aAAa,iBAAiB,GAClDb,KAAKc,eAAeG,UAAY,eAChCjB,KAAKC,OAAOY,aAAa,WAAY,KACrCb,KAAKC,OAAOuB,QACZxB,KAAKC,OAAOY,aAAa,WAAY,QAErCb,KAAKF,QAAQa,UAAUC,IAAI,0BAC3BZ,KAAKc,eAAeD,aAAa,iBAAiB,GAClDb,KAAKc,eAAeG,UAAY,QAAHR,OAAWT,KAAKK,MAAK,WAEtD,M,oEAACR,CAAA,CA5EiB,E","sources":["webpack://TNAFrontend/webpack/universalModuleDefinition","webpack://TNAFrontend/./src/nationalarchives/lib/uuid.mjs","webpack://TNAFrontend/webpack/bootstrap","webpack://TNAFrontend/webpack/runtime/define property getters","webpack://TNAFrontend/webpack/runtime/hasOwnProperty shorthand","webpack://TNAFrontend/webpack/runtime/make namespace object","webpack://TNAFrontend/./src/nationalarchives/components/gallery/gallery.mjs"],"sourcesContent":["(function webpackUniversalModuleDefinition(root, factory) {\n\tif(typeof exports === 'object' && typeof module === 'object')\n\t\tmodule.exports = factory();\n\telse if(typeof define === 'function' && define.amd)\n\t\tdefine(\"TNAFrontend\", [], factory);\n\telse if(typeof exports === 'object')\n\t\texports[\"TNAFrontend\"] = factory();\n\telse\n\t\troot[\"TNAFrontend\"] = factory();\n})(self, () => {\nreturn ","const uuidv4 = () =>\n ([1e7] + -1e3 + -4e3 + -8e3 + -1e11).replace(/[018]/g, (c) =>\n (\n c ^\n (crypto.getRandomValues(new Uint8Array(1))[0] & (15 >> (c / 4)))\n ).toString(16),\n );\n\nexport default uuidv4;\n","// The module cache\nvar __webpack_module_cache__ = {};\n\n// The require function\nfunction __webpack_require__(moduleId) {\n\t// Check if module is in cache\n\tvar cachedModule = __webpack_module_cache__[moduleId];\n\tif (cachedModule !== undefined) {\n\t\treturn cachedModule.exports;\n\t}\n\t// Create a new module (and put it into the cache)\n\tvar module = __webpack_module_cache__[moduleId] = {\n\t\t// no module.id needed\n\t\t// no module.loaded needed\n\t\texports: {}\n\t};\n\n\t// Execute the module function\n\t__webpack_modules__[moduleId](module, module.exports, __webpack_require__);\n\n\t// Return the exports of the module\n\treturn module.exports;\n}\n\n","// define getter functions for harmony exports\n__webpack_require__.d = (exports, definition) => {\n\tfor(var key in definition) {\n\t\tif(__webpack_require__.o(definition, key) && !__webpack_require__.o(exports, key)) {\n\t\t\tObject.defineProperty(exports, key, { enumerable: true, get: definition[key] });\n\t\t}\n\t}\n};","__webpack_require__.o = (obj, prop) => (Object.prototype.hasOwnProperty.call(obj, prop))","// define __esModule on exports\n__webpack_require__.r = (exports) => {\n\tif(typeof Symbol !== 'undefined' && Symbol.toStringTag) {\n\t\tObject.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });\n\t}\n\tObject.defineProperty(exports, '__esModule', { value: true });\n};","import uuidv4 from \"../../lib/uuid.mjs\";\n\nexport class Gallery {\n constructor($module) {\n this.$module = $module;\n this.$items = $module && $module.querySelector(\".tna-gallery__items\");\n this.opened = false;\n }\n\n init() {\n if (!this.$module \|\| !this.$items) {\n return;\n }\n\n const supportTouchHorizontal = false;\n\n this.items = this.$module.querySelectorAll(\".tna-gallery__item\").length;\n\n if (this.items > 1) {\n const uniqueId = `tna-gallery-${uuidv4()}`;\n\n this.$module.classList.add(\"tna-gallery--collapsed\");\n this.$items.setAttribute(\"tabindex\", \"-1\");\n\n this.$galleryToggle = document.createElement(\"button\");\n this.$galleryToggle.classList.add(\n \"tna-gallery__toggle\",\n \"tna-button\",\n \"tna-button--accent\",\n );\n this.$galleryToggle.setAttribute(\"aria-controls\", uniqueId);\n this.$galleryToggle.setAttribute(\"aria-expanded\", false);\n this.$galleryToggle.innerText = `View ${this.items} images`;\n\n const onFirstTouch = () => {\n this.$module.removeEventListener(\"touchstart\", onFirstTouch);\n this.$module.classList.add(\"tna-gallery--touchable\");\n };\n\n if (supportTouchHorizontal) {\n this.$module.addEventListener(\"touchstart\", onFirstTouch);\n }\n\n this.$galleryToggle.addEventListener(\"click\", () => {\n if (supportTouchHorizontal) {\n this.$module.removeEventListener(\"touchstart\", onFirstTouch);\n }\n this.handleToggleGallery();\n });\n\n this.$galleryToggleWrapper = document.createElement(\"div\");\n this.$galleryToggleWrapper.classList.add(\n \"tna-column\",\n \"tna-column--full\",\n \"tna-gallery__toggle-wrapper\",\n );\n\n this.$galleryToggleWrapper.appendChild(this.$galleryToggle);\n this.$items.parentElement.appendChild(this.$galleryToggleWrapper);\n\n this.$items.setAttribute(\"id\", uniqueId);\n }\n }\n\n handleToggleGallery() {\n this.opened = !this.opened;\n if (this.opened) {\n this.$module.classList.remove(\"tna-gallery--collapsed\");\n this.$galleryToggle.setAttribute(\"aria-expanded\", true);\n this.$galleryToggle.innerText = \"Close images\";\n this.$items.setAttribute(\"tabindex\", \"0\");\n this.$items.focus();\n this.$items.setAttribute(\"tabindex\", \"-1\");\n } else {\n this.$module.classList.add(\"tna-gallery--collapsed\");\n this.$galleryToggle.setAttribute(\"aria-expanded\", false);\n this.$galleryToggle.innerText = `View ${this.items} images`;\n }\n }\n}\n"],"names":["root","factory","exports","module","define","amd","self","replace","c","crypto","getRandomValues","Uint8Array","toString","__webpack_module_cache__","__webpack_require__","moduleId","cachedModule","undefined","__webpack_modules__","d","definition","key","o","Object","defineProperty","enumerable","get","obj","prop","prototype","hasOwnProperty","call","r","Symbol","toStringTag","value","Gallery","$module","_classCallCheck","this","$items","querySelector","opened","_this","items","querySelectorAll","length","uniqueId","concat","uuidv4","classList","add","setAttribute","$galleryToggle","document","createElement","innerText","addEventListener","handleToggleGallery","$galleryToggleWrapper","appendChild","parentElement","remove","focus"],"sourceRoot":""}
1	+ {"version":3,"file":"components/gallery/gallery.js","mappings":"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","sources":["webpack://TNAFrontend/webpack/universalModuleDefinition","webpack://TNAFrontend/./src/nationalarchives/lib/uuid.mjs","webpack://TNAFrontend/webpack/bootstrap","webpack://TNAFrontend/webpack/runtime/define property getters","webpack://TNAFrontend/webpack/runtime/hasOwnProperty shorthand","webpack://TNAFrontend/webpack/runtime/make namespace object","webpack://TNAFrontend/./src/nationalarchives/components/gallery/gallery.mjs"],"sourcesContent":["(function webpackUniversalModuleDefinition(root, factory) {\n\tif(typeof exports === 'object' && typeof module === 'object')\n\t\tmodule.exports = factory();\n\telse if(typeof define === 'function' && define.amd)\n\t\tdefine(\"TNAFrontend\", [], factory);\n\telse if(typeof exports === 'object')\n\t\texports[\"TNAFrontend\"] = factory();\n\telse\n\t\troot[\"TNAFrontend\"] = factory();\n})(self, () => {\nreturn ","const uuidv4 = () =>\n ([1e7] + -1e3 + -4e3 + -8e3 + -1e11).replace(/[018]/g, (c) =>\n (\n c ^\n (crypto.getRandomValues(new Uint8Array(1))[0] & (15 >> (c / 4)))\n ).toString(16),\n );\n\nexport default uuidv4;\n","// The module cache\nvar __webpack_module_cache__ = {};\n\n// The require function\nfunction __webpack_require__(moduleId) {\n\t// Check if module is in cache\n\tvar cachedModule = __webpack_module_cache__[moduleId];\n\tif (cachedModule !== undefined) {\n\t\treturn cachedModule.exports;\n\t}\n\t// Create a new module (and put it into the cache)\n\tvar module = __webpack_module_cache__[moduleId] = {\n\t\t// no module.id needed\n\t\t// no module.loaded needed\n\t\texports: {}\n\t};\n\n\t// Execute the module function\n\t__webpack_modules__[moduleId](module, module.exports, __webpack_require__);\n\n\t// Return the exports of the module\n\treturn module.exports;\n}\n\n","// define getter functions for harmony exports\n__webpack_require__.d = (exports, definition) => {\n\tfor(var key in definition) {\n\t\tif(__webpack_require__.o(definition, key) && !__webpack_require__.o(exports, key)) {\n\t\t\tObject.defineProperty(exports, key, { enumerable: true, get: definition[key] });\n\t\t}\n\t}\n};","__webpack_require__.o = (obj, prop) => (Object.prototype.hasOwnProperty.call(obj, prop))","// define __esModule on exports\n__webpack_require__.r = (exports) => {\n\tif(typeof Symbol !== 'undefined' && Symbol.toStringTag) {\n\t\tObject.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });\n\t}\n\tObject.defineProperty(exports, '__esModule', { value: true });\n};","import uuidv4 from \"../../lib/uuid.mjs\";\n\nexport class Gallery {\n constructor($module) {\n this.$module = $module;\n this.$items = $module && $module.querySelector(\".tna-gallery__items\");\n this.opened = false;\n }\n\n init() {\n if (!this.$module \|\| !this.$items) {\n return;\n }\n\n const supportTouchHorizontal = false;\n\n this.items = this.$module.querySelectorAll(\".tna-gallery__item\").length;\n\n if (this.items > 1) {\n const uniqueId = `tna-gallery-${uuidv4()}`;\n\n this.$module.classList.add(\"tna-gallery--collapsed\");\n this.$items.setAttribute(\"tabindex\", \"-1\");\n\n this.$galleryToggle = document.createElement(\"button\");\n this.$galleryToggle.classList.add(\n \"tna-gallery__toggle\",\n \"tna-button\",\n \"tna-button--accent\",\n );\n this.$galleryToggle.setAttribute(\"aria-controls\", uniqueId);\n this.$galleryToggle.setAttribute(\"aria-expanded\", false);\n this.$galleryToggle.innerText = `View ${this.items} images`;\n\n const onFirstTouch = () => {\n this.$module.removeEventListener(\"touchstart\", onFirstTouch);\n this.$module.classList.add(\"tna-gallery--touchable\");\n };\n\n if (supportTouchHorizontal) {\n this.$module.addEventListener(\"touchstart\", onFirstTouch);\n }\n\n this.$galleryToggle.addEventListener(\"click\", () => {\n if (supportTouchHorizontal) {\n this.$module.removeEventListener(\"touchstart\", onFirstTouch);\n }\n this.handleToggleGallery();\n });\n\n this.$galleryToggleWrapper = document.createElement(\"div\");\n this.$galleryToggleWrapper.classList.add(\n \"tna-column\",\n \"tna-column--full\",\n \"tna-gallery__toggle-wrapper\",\n );\n\n this.$galleryToggleWrapper.appendChild(this.$galleryToggle);\n this.$items.parentElement.appendChild(this.$galleryToggleWrapper);\n\n this.$items.setAttribute(\"id\", uniqueId);\n }\n }\n\n handleToggleGallery() {\n this.opened = !this.opened;\n if (this.opened) {\n this.$module.classList.remove(\"tna-gallery--collapsed\");\n this.$galleryToggle.setAttribute(\"aria-expanded\", true);\n this.$galleryToggle.innerText = \"Close images\";\n this.$items.setAttribute(\"tabindex\", \"0\");\n this.$items.focus();\n this.$items.setAttribute(\"tabindex\", \"-1\");\n } else {\n this.$module.classList.add(\"tna-gallery--collapsed\");\n this.$galleryToggle.setAttribute(\"aria-expanded\", false);\n this.$galleryToggle.innerText = `View ${this.items} images`;\n }\n }\n}\n"],"names":["root","factory","exports","module","define","amd","self","replace","c","crypto","getRandomValues","Uint8Array","toString","__webpack_module_cache__","__webpack_require__","moduleId","cachedModule","undefined","__webpack_modules__","d","definition","key","o","Object","defineProperty","enumerable","get","obj","prop","prototype","hasOwnProperty","call","r","Symbol","toStringTag","value","Gallery","$module","_classCallCheck","this","$items","querySelector","opened","_this","items","querySelectorAll","length","uniqueId","concat","uuidv4","classList","add","setAttribute","$galleryToggle","document","createElement","innerText","addEventListener","handleToggleGallery","$galleryToggleWrapper","appendChild","parentElement","remove","focus"],"sourceRoot":""}

package/nationalarchives/components/global-header/README.md ADDED Viewed

@@ -0,0 +1,52 @@
+<img src="../../assets/images/tna-square-logo.svg" alt="The National Archives logo" title="The National Archives" width="100" />
+# TNA Frontend Global Header and Footer
+[![Latest release](https://img.shields.io/github/v/release/nationalarchives/tna-frontend?style=flat-square&logo=github&logoColor=white&sort=semver)](https://github.com/nationalarchives/tna-frontend/releases)
+[![NPM version](https://img.shields.io/npm/v/@nationalarchives/frontend-global-header?style=flat-square&logo=npm&logoColor=white)](https://www.npmjs.com/package/@nationalarchives/frontend-global-header)
+[![Licence](https://img.shields.io/github/license/nationalarchives/tna-frontend?style=flat-square)](https://github.com/nationalarchives/tna-frontend/blob/main/LICENCE)
+Use the cookie banner from TNA Frontend in your service.
+## Preparation
+### HTML
+1. Add the class `tna-template` to your `<html>` element
+1. Add the class `tna-template--light-theme`, `tna-template--light-theme` or `tna-template--system-theme` to your `<html>` element based on what [colour theme](https://nationalarchives.github.io/design-system/styles/colours/#theme-colours) you need (`tna-template--light-theme` suggested)
+1. Add the class `tna-template__body` to your `<body>` element
+1. Add the HTML for the header and footer to the appropriate part of your page (HTML found below)
+1. Modify the HTML as necessary
+### Assets
+1. Include the `global-header-package.css` file in your page using a `<link>` element
+1. Ensure the Font Awesome assets can be loaded - if they are not served from the same relative location as the `global-header-package.css` then you need to edit the include paths in the CSS or build the SCSS yourself
+1. Include the `global-header.js` file in your page using a `<script>` element (ensure you add the JavaScript file AFTER the header and footer HTML - this should add a `TNAFrontend` object to your `window`)
+1. Initialise the header JavaScript:
+```js
+const $globalHeader = document.querySelector(
+  '[data-module="tna-global-header"]',
+);
+if ($globalHeader) {
+  new TNAFrontend.GlobalHeader($globalHeader).init();
+}
+```
+## Example HTML
+Feel free to add or remove items as necessary. The recommended HTML is shown below.
+### Header
+```html
+<!-- GLOBALHEADERHTML -->
+```
+### Footer
+```html
+<!-- FOOTERHTML -->
+```

package/nationalarchives/components/global-header/_index.scss ADDED Viewed

	@@ -0,0 +1 @@
1	+ @use "global-header";

package/nationalarchives/components/global-header/fixtures.json ADDED Viewed

@@ -0,0 +1,46 @@
+{
+  "component": "global-header",
+  "fixtures": [
+    {
+      "name": "default",
+      "options": {
+        "logo": {
+          "strapline": "Beta",
+          "href": "#/"
+        },
+        "topNavigation": [
+          {
+            "text": "Top item 1",
+            "href": "#/top-1"
+          },
+          {
+            "text": "Top item 2",
+            "href": "#/top-2",
+            "icon": "phone"
+          },
+          {
+            "text": "Top item 3",
+            "href": "#/top-3",
+            "brandIcon": "github"
+          }
+        ],
+        "navigation": [
+          {
+            "text": "Alpha",
+            "href": "#/alpha"
+          },
+          {
+            "text": "Beta",
+            "href": "#/beta"
+          },
+          {
+            "text": "Gamma",
+            "href": "#/gamma"
+          }
+        ]
+      },
+      "html": "<header class=\"tna-global-header \" data-module=\"tna-global-header\"><div class=\"tna-container tna-global-header__main\"><div class=\"tna-column tna-column--flex-1 tna-column--order-2\"><span class=\"tna-global-header__logo-wrapper\"><a href=\"#/\" class=\"tna-global-header__logo\" title=\"The National Archives - Beta\"><svg xmlns=\"http://www.w3.org/2000/svg\" xml:space=\"preserve\" class=\"tna-logo\" style=\"enable-background:new 0 0 160 160\" viewBox=\"0 0 160 160\" width=\"96\" height=\"96\"><title>The National Archives</title><path fill=\"transparent\" d=\"M0 0h160v160H0z\" class=\"tna-logo__background\" /><g class=\"tna-logo__foreground\" fill=\"currentColor\"><path d=\"M1.9 107.2h156.3V158H1.9v-50.8zm0-52.7h156.3v50.8H1.9V54.5zm0-52.6h77.2v50.8H1.9V1.9zm79 0h77.2v50.8H80.9V1.9zm0-1.9H0v160h160V0H80.9z\" /><path d=\"M21.3 19.5h-5.4v-3h14.3v3h-5.4v18.4h-3.5zM31.6 16.5H35v9h8.4v-9h3.4v21.4h-3.4v-9.3H35v9.3h-3.4zM50.9 16.5h12.2v3h-8.8v6.1h7.4v3h-7.4v6.3h8.8v3H50.9zM19.7 69.2h3.8l6.4 12.5c.6 1.1 1.1 2.7 1.6 4h.2c-.2-1.7-.3-3.6-.3-4.8V69.2h3.5v21.4h-3.7l-6.3-12.3c-.7-1.4-1.2-2.7-1.7-4.2H23c.2 1.4.3 3.3.3 5v11.5h-3.5c-.1 0-.1-21.4-.1-21.4zM47.8 82.6l-1.7-6.3c-.3-1.1-.6-2.2-.9-3.8H45c-.3 1.6-.5 2.6-.8 3.8l-1.7 6.3h5.3zM43 69.2h4.2l6.2 21.4h-3.5l-1.5-5.2h-6.6l-1.4 5.2h-3.6L43 69.2zM57.2 72.3h-5.4v-3.1H66v3.1h-5.4v18.4h-3.4zM67.8 69.2h3.5v21.4h-3.5zM87.5 80c0-5.3-1.7-8-4.8-8-3.2 0-4.8 2.7-4.8 8 0 5.2 1.6 7.9 4.8 7.9 3.2 0 4.8-2.7 4.8-7.9m-13.3 0c0-7 3-11.1 8.5-11.1 5.4 0 8.4 4.1 8.4 11.1 0 6.9-3 11-8.4 11s-8.5-4.1-8.5-11M94.3 69.2H98l6.4 12.5c.6 1.1 1.2 2.7 1.7 4h.2c-.2-1.7-.3-3.6-.3-4.8V69.2h3.4v21.4h-3.7l-6.3-12.3c-.7-1.4-1.2-2.7-1.7-4.2h-.2c.2 1.4.3 3.3.3 5v11.5h-3.5V69.2zM122.4 82.6l-1.7-6.3c-.3-1.1-.6-2.2-.9-3.8h-.2c-.3 1.6-.5 2.6-.8 3.8l-1.7 6.3h5.3zm-4.8-13.4h4.2l6.2 21.4h-3.5l-1.5-5.2h-6.6l-1.4 5.2h-3.6l6.2-21.4zM129.9 69.2h3.5v18.4h8.4v3.1h-11.9zM26.9 135.2l-1.7-6.3c-.3-1.1-.6-2.2-.9-3.8h-.2c-.3 1.6-.5 2.6-.8 3.8l-1.7 6.3h5.3zm-4.8-13.4h4.2l6.2 21.4H29l-1.5-5.2h-6.6l-1.4 5.2h-3.6l6.2-21.4zM39.9 132.5c2.5 0 3.4-1.6 3.4-3.9 0-2.2-1-3.8-3.4-3.8h-2.7v7.7h2.7zm-6.1-10.7h6.4c4.5 0 6.7 2.4 6.7 6.6 0 3.1-1.5 5.6-3.7 6.3v.2c1 1.1 4 7.5 4.8 7.9v.5h-3.8c-1-.6-3.6-7.2-4.4-7.8h-2.5v7.8h-3.5v-21.5zM52.9 132.5c0 5.3 1.9 8 4.8 8s4-2 4-5.2l3.5.1c0 .2.1.4.1.6 0 4.4-2.1 7.5-7.5 7.5-5.2 0-8.5-3.9-8.5-11.1 0-7.1 3.3-11 8.5-11 6.4 0 7.5 4.6 7.5 7.2 0 .3 0 .7-.1.9l-3.5.1c0-3.3-1.2-5.2-4-5.2-2.9.2-4.8 2.9-4.8 8.1M68 121.8h3.5v9.1h8.3v-9.1h3.5v21.5h-3.5v-9.4h-8.3v9.4H68zM87.9 121.8h3.5v21.4h-3.5zM94.2 121.8h3.6l3.2 12.3c.5 1.9.8 3.6 1.1 5.6h.2c.3-2 .6-3.7 1.1-5.6l3.2-12.3h3.6l-6.1 21.4H100l-5.8-21.4zM112.7 121.8H125v3.1h-8.8v6h7.4v3h-7.4v6.3h8.8v3.1h-12.3zM130.4 136c0 .2-.1.5-.1.8 0 1.9.8 3.7 3.4 3.7 2.1 0 3.3-1.2 3.3-2.9 0-1.6-.7-2.4-2.2-3l-3.4-1.3c-2.4-.9-4.2-2.4-4.2-5.7 0-3.5 2.3-6.1 6.6-6.1 5.5 0 6.4 3.6 6.4 5.9 0 .3 0 .7-.1 1.1l-3.4.1c0-.2.1-.5.1-.7 0-1.7-.6-3.2-3-3.2-2.1 0-3 1.2-3 2.8 0 1.7.9 2.5 2.2 2.9l3.5 1.3c2.6 1 4.3 2.6 4.3 5.8 0 3.6-2.4 6.1-7 6.1-5.9 0-6.8-3.9-6.8-6.5 0-.3 0-.6.1-1l3.3-.1z\" /></g></svg><span class=\"tna-global-header__logo-strapline\">Beta</span></a></span></div><div class=\"tna-column tna-column--order-2 tna-global-header__navigation-button-wrapper\"><!-- BUTTON ADDED BY JAVASCRIPT --></div><nav class=\"tna-column tna-column--full-small tna-column--full-tiny tna-column--order-3 tna-global-header__navigation-wrapper\" aria-label=\"Main site navigation\"><ul class=\"tna-global-header__navigation\"><li class=\"tna-global-header__navigation-item\"><a href=\"#/alpha\" class=\"tna-global-header__navigation-item-link\" tabindex=\"0\">Alpha</a></li><li class=\"tna-global-header__navigation-item\"><a href=\"#/beta\" class=\"tna-global-header__navigation-item-link\" tabindex=\"0\">Beta</a></li><li class=\"tna-global-header__navigation-item\"><a href=\"#/gamma\" class=\"tna-global-header__navigation-item-link\" tabindex=\"0\">Gamma</a></li></ul></nav><nav class=\"tna-column tna-column--full tna-column--order-1 tna-column--order-4-small tna-column--order-4-tiny tna-global-header__top-navigation-wrapper\" aria-label=\"Secondary site navigation\"><ul class=\"tna-global-header__top-navigation\"><li class=\"tna-global-header__top-navigation-item\"><a href=\"#/top-1\" class=\"tna-global-header__top-navigation-link\" tabindex=\"0\">Top item 1</a></li><li class=\"tna-global-header__top-navigation-item\"><a href=\"#/top-2\" class=\"tna-global-header__top-navigation-link\" tabindex=\"0\"><i class=\"fa-solid fa-phone\" aria-hidden=\"true\"></i>Top item 2</a></li><li class=\"tna-global-header__top-navigation-item\"><a href=\"#/top-3\" class=\"tna-global-header__top-navigation-link\" tabindex=\"0\"><i class=\"fa-brands fa-github\" aria-hidden=\"true\"></i>Top item 3</a></li></ul></nav></div></header>",
+      "hidden": false
+    }
+  ]
+}

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

@@ -0,0 +1 @@

+ @import"https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,400;0,700;1,400&family=Roboto+Mono:wght@400;500&display=swap";.tna-global-header,.tna-background-accent .tna-chip:not(.tna-chip--plain),.tna-background-accent .tna-hgroup__supertitle:not(.tna-hgroup__supertitle--plain),.tna-background-contrast{--background: var(--contrast-background);--font-base: var(--contrast-font-base);--font-dark: var(--contrast-font-dark);--font-light: var(--contrast-font-light);--icon-light: var(--contrast-icon-light);--link: var(--contrast-link);--link-visited: var(--contrast-link-visited);--keyline: var(--contrast-keyline);--keyline-dark: var(--contrast-keyline-dark);--button-text: var(--contrast-button-text);--button-background: var(--contrast-button-background);--button-hover-text: var(--contrast-button-hover-text);--button-hover-background: var(--contrast-button-hover-background);background-color:var(--background);color:rgb(255 255 255/0.95);color:var(--font-base)}.tna-chip:not(.tna-chip--plain),.tna-hgroup__supertitle:not(.tna-hgroup__supertitle--plain),.tna-background-accent{--background: var(--accent-background);--font-base: var(--accent-font-base);--font-dark: var(--accent-font-dark);--font-light: var(--accent-font-light);--icon-light: var(--accent-icon-light);--link: var(--accent-link);--link-visited: var(--accent-link);--keyline: var(--accent-keyline);--keyline-dark: var(--accent-keyline-dark);background-color:var(--background);color:rgb(255 255 255/0.95);color:var(--font-base)}.tna-background-tint{background-color:#e4e4e4;background-color:var(--background-tint);color:#343338;color:var(--font-base)}.tna-background-accent-light{--background: var(--accent-background-light);--font-base: #343338;--font-dark: rgb(0, 0, 0);--font-light: rgb(0 0 0/0.58);--icon-light: rgb(52 51 56/0.45);--keyline: rgb(38 38 42/0.25);--keyline-dark: #26262a;--button-text: rgb(255, 255, 255);--button-background: rgb(0, 0, 0);--button-hover-text: rgb(0, 0, 0);--button-hover-background: rgb(255, 255, 255);background-color:var(--background);color:#343338;color:var(--font-base)}@media(prefers-color-scheme: dark){.tna-template--system-theme .tna-background-accent-light{--link: #0062a8;--link-visited: #4c2c92}}.tna-template--dark-theme .tna-background-accent-light{--link: #0062a8;--link-visited: #4c2c92}.tna-visually-hidden,.tna-\!--visually-hidden{width:1px !important;height:1px !important;margin:0 !important;padding:0 !important;position:absolute !important;top:-9999px !important;left:-9999px !important;z-index:-1 !important;overflow:hidden !important;clip:rect(0, 0, 0, 0) !important;border:0 !important;background-color:rgba(0,0,0,0) !important}.tna-visually-hidden::before,.tna-visually-hidden::after,.tna-\!--visually-hidden::before,.tna-\!--visually-hidden::after{content:" "}*:focus{z-index:9;outline:.3125rem #00b0ff solid;outline:.3125rem var(--focus-outline) solid;outline-offset:.125rem}.tna-\!--no-focus-style:focus{outline:none}.tna-template{background-color:#f4f4f4;background-color:var(--page-background)}.tna-template--system-theme{--page-background: #f4f4f4;--background-tint: #e4e4e4;--font-base: #343338;--font-dark: rgb(0, 0, 0);--font-light: rgb(0 0 0/0.58);--icon-light: rgb(52 51 56/0.45);--link: #0062a8;--link-visited: #4c2c92;--focus-outline: rgb(0, 176, 255);--keyline: rgb(38 38 42/0.25);--keyline-dark: #26262a;--input-foreground: rgb(0, 0, 0);--input-background: rgb(255, 255, 255);--input-border: rgb(0, 0, 0);--form-error: #c00;--button-text: rgb(255, 255, 255);--button-background: rgb(0, 0, 0);--button-hover-text: rgb(0, 0, 0);--button-hover-background: rgb(255, 255, 255);--contrast-background: #1e1e1e;--contrast-font-base: rgb(255, 255, 255);--contrast-font-dark: rgb(255, 255, 255);--contrast-font-light: rgb(255 255 255/0.7);--contrast-icon-light: rgb(255 255 255/0.45);--contrast-link: rgb(255, 255, 255);--contrast-link-visited: rgb(255, 255, 255);--contrast-keyline: rgb(255 255 255/0.5);--contrast-keyline-dark: rgb(255 255 255/0.8);--contrast-button-text: rgb(0, 0, 0);--contrast-button-background: rgb(255, 255, 255);--contrast-button-hover-text: rgb(255, 255, 255);--contrast-button-hover-background: rgb(0, 0, 0);--accent-background: #111;--accent-background-light: #ededed;--accent-font-base: rgb(255, 255, 255);--accent-font-dark: rgb(255, 255, 255);--accent-font-light: rgb(255 255 255/0.7);--accent-icon-light: rgb(255 255 255/0.45);--accent-link: rgb(255, 255, 255);--accent-link-visited: #b9f;--accent-keyline: rgb(255 255 255/0.5);--accent-keyline-dark: rgb(255 255 255/0.8);--button-accent-text: rgb(0, 0, 0);--button-accent-background: rgb(140, 150, 148)}@media(prefers-color-scheme: dark){.tna-template--system-theme{--page-background: #222;--background-tint: #333;--font-base: rgb(255 255 255/0.95);--font-dark: rgb(255, 255, 255);--font-light: rgb(255 255 255/0.51);--icon-light: rgb(255 255 255/0.35);--link: rgb(0, 176, 255);--link-visited: #a8f;--focus-outline: rgb(253, 63, 3);--keyline: rgb(255 255 255/0.25);--keyline-dark: rgb(255, 255, 255);--input-foreground: rgb(255, 255, 255);--input-background: rgb(0, 0, 0);--input-border: rgb(255, 255, 255);--form-error: #c00;--button-text: rgb(0, 0, 0);--button-background: rgb(255, 255, 255);--button-hover-text: rgb(255, 255, 255);--button-hover-background: rgb(0, 0, 0);--contrast-background: #111;--contrast-font-base: rgb(255, 255, 255);--contrast-font-dark: rgb(255, 255, 255);--contrast-font-light: rgb(255 255 255/0.7);--contrast-icon-light: rgb(255 255 255/0.45);--contrast-link: rgb(255, 255, 255);--contrast-link-visited: rgb(255, 255, 255);--contrast-keyline: rgb(255 255 255/0.5);--contrast-keyline-dark: rgb(255 255 255/0.8);--contrast-button-text: rgb(0, 0, 0);--contrast-button-background: rgb(255, 255, 255);--contrast-button-hover-text: rgb(255, 255, 255);--contrast-button-hover-background: rgb(0, 0, 0);--accent-background: #111;--accent-background-light: #ededed;--accent-font-base: rgb(255, 255, 255);--accent-font-dark: rgb(255, 255, 255);--accent-font-light: rgb(255 255 255/0.7);--accent-icon-light: rgb(255 255 255/0.45);--accent-link: rgb(255, 255, 255);--accent-link-visited: #b9f;--accent-keyline: rgb(255 255 255/0.5);--accent-keyline-dark: rgb(255 255 255/0.8);--button-accent-text: rgb(0, 0, 0);--button-accent-background: rgb(140, 150, 148)}}@media(prefers-contrast: more){.tna-template--system-theme{--page-background: rgb(255, 255, 255);--background-tint: #e4e4e4;--font-base: rgb(0, 0, 0);--font-dark: rgb(0, 0, 0);--font-light: rgb(0, 0, 0);--icon-light: rgb(0 0 0/0.75);--link: #34d;--link-visited: #848;--focus-outline: rgb(253, 63, 3);--keyline: rgb(0, 0, 0);--keyline-dark: rgb(0, 0, 0);--input-foreground: rgb(0, 0, 0);--input-background: rgb(255, 255, 255);--input-border: rgb(0, 0, 0);--form-error: #c00;--button-text: rgb(255, 255, 255);--button-background: rgb(0, 0, 0);--button-hover-text: rgb(0, 0, 0);--button-hover-background: rgb(255, 255, 255);--contrast-background: #f4f4f4;--contrast-font-base: rgb(0, 0, 0);--contrast-font-dark: rgb(0, 0, 0);--contrast-font-light: rgb(0, 0, 0);--contrast-icon-light: rgb(255 255 255/0.45);--contrast-link: #34d;--contrast-link-visited: #848;--contrast-keyline: rgb(0, 0, 0);--contrast-keyline-dark: rgb(0, 0, 0);--contrast-button-text: rgb(255, 255, 255);--contrast-button-background: rgb(0, 0, 0);--contrast-button-hover-text: rgb(0, 0, 0);--contrast-button-hover-background: rgb(255, 255, 255);--accent-background: #111;--accent-background-light: #ededed;--accent-font-base: rgb(255, 255, 255);--accent-font-dark: rgb(255, 255, 255);--accent-font-light: rgb(255 255 255/0.7);--accent-icon-light: rgb(255 255 255/0.45);--accent-link: rgb(255, 255, 255);--accent-link-visited: #b9f;--accent-keyline: rgb(255 255 255/0.5);--accent-keyline-dark: rgb(255 255 255/0.8);--button-accent-text: rgb(0, 0, 0);--button-accent-background: rgb(140, 150, 148)}.tna-template--system-theme *{background-image:none !important}}@media(prefers-contrast: more)and (prefers-color-scheme: dark){.tna-template--system-theme{--page-background: #111;--background-tint: #333;--font-base: rgb(255, 255, 255);--font-dark: rgb(255, 255, 255);--font-light: rgb(255, 255, 255);--icon-light: rgb(255 255 255/0.75);--link: rgb(0, 176, 255);--link-visited: #a8f;--focus-outline: rgb(253, 63, 3);--keyline: rgb(255, 255, 255);--keyline-dark: rgb(255, 255, 255);--input-foreground: rgb(255, 255, 255);--input-background: rgb(0, 0, 0);--input-border: rgb(255, 255, 255);--form-error: #c00;--button-text: rgb(0, 0, 0);--button-background: rgb(255, 255, 255);--button-hover-text: rgb(255, 255, 255);--button-hover-background: rgb(0, 0, 0);--contrast-background: rgb(0, 0, 0);--contrast-font-base: rgb(255, 255, 255);--contrast-font-dark: rgb(255, 255, 255);--contrast-font-light: rgb(255 255 255/0.7);--contrast-icon-light: rgb(255 255 255/0.45);--contrast-link: rgb(255, 255, 255);--contrast-link-visited: rgb(255, 255, 255);--contrast-keyline: rgb(255 255 255/0.5);--contrast-keyline-dark: rgb(255 255 255/0.8);--contrast-button-text: rgb(0, 0, 0);--contrast-button-background: rgb(255, 255, 255);--contrast-button-hover-text: rgb(255, 255, 255);--contrast-button-hover-background: rgb(0, 0, 0);--accent-background: #111;--accent-background-light: #ededed;--accent-font-base: rgb(255, 255, 255);--accent-font-dark: rgb(255, 255, 255);--accent-font-light: rgb(255 255 255/0.7);--accent-icon-light: rgb(255 255 255/0.45);--accent-link: rgb(255, 255, 255);--accent-link-visited: #b9f;--accent-keyline: rgb(255 255 255/0.5);--accent-keyline-dark: rgb(255 255 255/0.8);--button-accent-text: rgb(0, 0, 0);--button-accent-background: rgb(140, 150, 148)}}.tna-template--light-theme{--page-background: #f4f4f4;--background-tint: #e4e4e4;--font-base: #343338;--font-dark: rgb(0, 0, 0);--font-light: rgb(0 0 0/0.58);--icon-light: rgb(52 51 56/0.45);--link: #0062a8;--link-visited: #4c2c92;--focus-outline: rgb(0, 176, 255);--keyline: rgb(38 38 42/0.25);--keyline-dark: #26262a;--input-foreground: rgb(0, 0, 0);--input-background: rgb(255, 255, 255);--input-border: rgb(0, 0, 0);--form-error: #c00;--button-text: rgb(255, 255, 255);--button-background: rgb(0, 0, 0);--button-hover-text: rgb(0, 0, 0);--button-hover-background: rgb(255, 255, 255);--contrast-background: #1e1e1e;--contrast-font-base: rgb(255, 255, 255);--contrast-font-dark: rgb(255, 255, 255);--contrast-font-light: rgb(255 255 255/0.7);--contrast-icon-light: rgb(255 255 255/0.45);--contrast-link: rgb(255, 255, 255);--contrast-link-visited: rgb(255, 255, 255);--contrast-keyline: rgb(255 255 255/0.5);--contrast-keyline-dark: rgb(255 255 255/0.8);--contrast-button-text: rgb(0, 0, 0);--contrast-button-background: rgb(255, 255, 255);--contrast-button-hover-text: rgb(255, 255, 255);--contrast-button-hover-background: rgb(0, 0, 0);--accent-background: #111;--accent-background-light: #ededed;--accent-font-base: rgb(255, 255, 255);--accent-font-dark: rgb(255, 255, 255);--accent-font-light: rgb(255 255 255/0.7);--accent-icon-light: rgb(255 255 255/0.45);--accent-link: rgb(255, 255, 255);--accent-link-visited: #b9f;--accent-keyline: rgb(255 255 255/0.5);--accent-keyline-dark: rgb(255 255 255/0.8);--button-accent-text: rgb(0, 0, 0);--button-accent-background: rgb(140, 150, 148)}.tna-template--dark-theme{--page-background: #222;--background-tint: #333;--font-base: rgb(255 255 255/0.95);--font-dark: rgb(255, 255, 255);--font-light: rgb(255 255 255/0.51);--icon-light: rgb(255 255 255/0.35);--link: rgb(0, 176, 255);--link-visited: #a8f;--focus-outline: rgb(253, 63, 3);--keyline: rgb(255 255 255/0.25);--keyline-dark: rgb(255, 255, 255);--input-foreground: rgb(255, 255, 255);--input-background: rgb(0, 0, 0);--input-border: rgb(255, 255, 255);--form-error: #c00;--button-text: rgb(0, 0, 0);--button-background: rgb(255, 255, 255);--button-hover-text: rgb(255, 255, 255);--button-hover-background: rgb(0, 0, 0);--contrast-background: #111;--contrast-font-base: rgb(255, 255, 255);--contrast-font-dark: rgb(255, 255, 255);--contrast-font-light: rgb(255 255 255/0.7);--contrast-icon-light: rgb(255 255 255/0.45);--contrast-link: rgb(255, 255, 255);--contrast-link-visited: rgb(255, 255, 255);--contrast-keyline: rgb(255 255 255/0.5);--contrast-keyline-dark: rgb(255 255 255/0.8);--contrast-button-text: rgb(0, 0, 0);--contrast-button-background: rgb(255, 255, 255);--contrast-button-hover-text: rgb(255, 255, 255);--contrast-button-hover-background: rgb(0, 0, 0);--accent-background: #111;--accent-background-light: #ededed;--accent-font-base: rgb(255, 255, 255);--accent-font-dark: rgb(255, 255, 255);--accent-font-light: rgb(255 255 255/0.7);--accent-icon-light: rgb(255 255 255/0.45);--accent-link: rgb(255, 255, 255);--accent-link-visited: #b9f;--accent-keyline: rgb(255 255 255/0.5);--accent-keyline-dark: rgb(255 255 255/0.8);--button-accent-text: rgb(0, 0, 0);--button-accent-background: rgb(140, 150, 148)}.tna-template--high-contrast-theme{--page-background: rgb(255, 255, 255);--background-tint: #e4e4e4;--font-base: rgb(0, 0, 0);--font-dark: rgb(0, 0, 0);--font-light: rgb(0, 0, 0);--icon-light: rgb(0 0 0/0.75);--link: #34d;--link-visited: #848;--focus-outline: rgb(253, 63, 3);--keyline: rgb(0, 0, 0);--keyline-dark: rgb(0, 0, 0);--input-foreground: rgb(0, 0, 0);--input-background: rgb(255, 255, 255);--input-border: rgb(0, 0, 0);--form-error: #c00;--button-text: rgb(255, 255, 255);--button-background: rgb(0, 0, 0);--button-hover-text: rgb(0, 0, 0);--button-hover-background: rgb(255, 255, 255);--contrast-background: #f4f4f4;--contrast-font-base: rgb(0, 0, 0);--contrast-font-dark: rgb(0, 0, 0);--contrast-font-light: rgb(0, 0, 0);--contrast-icon-light: rgb(255 255 255/0.45);--contrast-link: #34d;--contrast-link-visited: #848;--contrast-keyline: rgb(0, 0, 0);--contrast-keyline-dark: rgb(0, 0, 0);--contrast-button-text: rgb(255, 255, 255);--contrast-button-background: rgb(0, 0, 0);--contrast-button-hover-text: rgb(0, 0, 0);--contrast-button-hover-background: rgb(255, 255, 255);--accent-background: #111;--accent-background-light: #ededed;--accent-font-base: rgb(255, 255, 255);--accent-font-dark: rgb(255, 255, 255);--accent-font-light: rgb(255 255 255/0.7);--accent-icon-light: rgb(255 255 255/0.45);--accent-link: rgb(255, 255, 255);--accent-link-visited: #b9f;--accent-keyline: rgb(255 255 255/0.5);--accent-keyline-dark: rgb(255 255 255/0.8);--button-accent-text: rgb(0, 0, 0);--button-accent-background: rgb(140, 150, 148)}.tna-template--high-contrast-theme *{background-image:none !important}.tna-template--high-contrast-theme.tna-template--dark-theme{--page-background: #111;--background-tint: #333;--font-base: rgb(255, 255, 255);--font-dark: rgb(255, 255, 255);--font-light: rgb(255, 255, 255);--icon-light: rgb(255 255 255/0.75);--link: rgb(0, 176, 255);--link-visited: #a8f;--focus-outline: rgb(253, 63, 3);--keyline: rgb(255, 255, 255);--keyline-dark: rgb(255, 255, 255);--input-foreground: rgb(255, 255, 255);--input-background: rgb(0, 0, 0);--input-border: rgb(255, 255, 255);--form-error: #c00;--button-text: rgb(0, 0, 0);--button-background: rgb(255, 255, 255);--button-hover-text: rgb(255, 255, 255);--button-hover-background: rgb(0, 0, 0);--contrast-background: rgb(0, 0, 0);--contrast-font-base: rgb(255, 255, 255);--contrast-font-dark: rgb(255, 255, 255);--contrast-font-light: rgb(255 255 255/0.7);--contrast-icon-light: rgb(255 255 255/0.45);--contrast-link: rgb(255, 255, 255);--contrast-link-visited: rgb(255, 255, 255);--contrast-keyline: rgb(255 255 255/0.5);--contrast-keyline-dark: rgb(255 255 255/0.8);--contrast-button-text: rgb(0, 0, 0);--contrast-button-background: rgb(255, 255, 255);--contrast-button-hover-text: rgb(255, 255, 255);--contrast-button-hover-background: rgb(0, 0, 0);--accent-background: #111;--accent-background-light: #ededed;--accent-font-base: rgb(255, 255, 255);--accent-font-dark: rgb(255, 255, 255);--accent-font-light: rgb(255 255 255/0.7);--accent-icon-light: rgb(255 255 255/0.45);--accent-link: rgb(255, 255, 255);--accent-link-visited: #b9f;--accent-keyline: rgb(255 255 255/0.5);--accent-keyline-dark: rgb(255 255 255/0.8);--button-accent-text: rgb(0, 0, 0);--button-accent-background: rgb(140, 150, 148)}.tna-template--yellow-accent{--accent-background: rgb(255, 204, 0) !important;--accent-background-light: rgb(249, 247, 226) !important;--accent-font-base: rgb(0, 0, 0) !important;--accent-font-dark: rgb(0, 0, 0) !important;--accent-font-light: rgb(0 0 0/0.7) !important;--accent-icon-light: rgb(0 0 0/0.45) !important;--accent-link: rgb(0, 0, 0) !important;--accent-link-visited: rgb(0, 0, 0) !important;--accent-keyline: rgb(0 0 0/0.5) !important;--accent-keyline-dark: rgb(0 0 0/0.8) !important;--button-accent-background: rgb(255, 204, 0) !important}.tna-template--pink-accent{--accent-font-base: rgb(255, 255, 255) !important;--accent-font-dark: rgb(255, 255, 255) !important;--accent-font-light: rgb(255 255 255/0.7) !important;--accent-icon-light: rgb(255 255 255/0.45) !important;--accent-link: rgb(255, 255, 255) !important;--accent-link-visited: rgb(255, 255, 255) !important;--accent-keyline: rgb(255 255 255/0.5) !important;--accent-keyline-dark: rgb(255 255 255/0.8) !important;--button-accent-text: rgb(255, 255, 255) !important;--accent-background: rgb(156, 25, 58) !important;--accent-background-light: rgb(250, 211, 212) !important;--button-accent-background: rgb(156, 25, 58) !important}.tna-template--orange-accent{--accent-font-base: rgb(255, 255, 255) !important;--accent-font-dark: rgb(255, 255, 255) !important;--accent-font-light: rgb(255 255 255/0.7) !important;--accent-icon-light: rgb(255 255 255/0.45) !important;--accent-link: rgb(255, 255, 255) !important;--accent-link-visited: rgb(255, 255, 255) !important;--accent-keyline: rgb(255 255 255/0.5) !important;--accent-keyline-dark: rgb(255 255 255/0.8) !important;--button-accent-text: rgb(255, 255, 255) !important;--accent-background: rgb(143, 52, 21) !important;--accent-background-light: rgb(249, 225, 188) !important;--button-accent-background: rgb(143, 52, 21) !important}.tna-template--green-accent{--accent-font-base: rgb(255, 255, 255) !important;--accent-font-dark: rgb(255, 255, 255) !important;--accent-font-light: rgb(255 255 255/0.7) !important;--accent-icon-light: rgb(255 255 255/0.45) !important;--accent-link: rgb(255, 255, 255) !important;--accent-link-visited: rgb(255, 255, 255) !important;--accent-keyline: rgb(255 255 255/0.5) !important;--accent-keyline-dark: rgb(255 255 255/0.8) !important;--button-accent-text: rgb(255, 255, 255) !important;--accent-background: rgb(0, 98, 59) !important;--accent-background-light: rgb(221, 229, 213) !important;--button-accent-background: rgb(0, 98, 59) !important}.tna-template--blue-accent{--accent-font-base: rgb(255, 255, 255) !important;--accent-font-dark: rgb(255, 255, 255) !important;--accent-font-light: rgb(255 255 255/0.7) !important;--accent-icon-light: rgb(255 255 255/0.45) !important;--accent-link: rgb(255, 255, 255) !important;--accent-link-visited: rgb(255, 255, 255) !important;--accent-keyline: rgb(255 255 255/0.5) !important;--accent-keyline-dark: rgb(255 255 255/0.8) !important;--button-accent-text: rgb(255, 255, 255) !important;--accent-background: rgb(0, 76, 126) !important;--accent-background-light: rgb(212, 229, 239) !important;--button-accent-background: rgb(0, 76, 126) !important}@media(prefers-reduced-motion){.tna-template *{animation:none !important;transition:none !important}}.tna-border-keyline{border:1px rgb(38 38 42/0.25) solid;border:1px var(--keyline) solid}.tna-border-keyline-dark{border:1px #26262a solid;border:1px var(--keyline-dark) solid}.tna-columns{column-gap:2rem}.tna-columns--2{column-count:2}.tna-columns--3{column-count:3}@media(max-width: 30em){.tna-columns{column-gap:1rem}}@media(min-width: 30.0625em)and (max-width: 48em){.tna-columns--1-small{column-count:1}.tna-columns--2-small{column-count:2}.tna-columns--3-small{column-count:3}.tna-columns--4-small{column-count:4}}@media(max-width: 30em){.tna-columns--1-tiny{column-count:1}.tna-columns--2-tiny{column-count:2}.tna-columns--3-tiny{column-count:3}.tna-columns--4-tiny{column-count:4}}.tna-columns__block{break-inside:avoid}.tna-columns:has(.tna-columns__block:only-of-type){column-count:1}.tna-table,.tna-table-wrapper,.tna-aside,.tna-form__group,p,.tna-chip-list,.tna-heading-xl,.tna-heading-l,.tna-heading-m,.tna-heading-s,.tna-hgroup-xl,.tna-hgroup-l,.tna-hgroup-m,.tna-hgroup-s,.tna-blockquote,.tna-large-paragraph,.tna-scene-setter{margin-top:2rem}.tna-table:first-child,.tna-table-wrapper:first-child,.tna-aside:first-child,.tna-form__group:first-child,p:first-child,.tna-chip-list:first-child,.tna-heading-xl:first-child,.tna-heading-l:first-child,.tna-heading-m:first-child,.tna-heading-s:first-child,.tna-hgroup-xl:first-child,.tna-hgroup-l:first-child,.tna-hgroup-m:first-child,.tna-hgroup-s:first-child,.tna-blockquote:first-child,.tna-large-paragraph:first-child,.tna-scene-setter:first-child{margin-top:0}.tna-template{color:#343338;color:var(--font-base);font-family:"Open Sans",sans-serif;font-weight:400;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;-webkit-text-size-adjust:none;text-size-adjust:none;direction:ltr}.tna-template__body{color:inherit;font-size:1.125rem;line-height:1.7777777778}@media(max-width: 48em){.tna-template__body{font-size:1.0625rem}}*{margin:0;padding:0}strong{font-weight:700}p+p{margin-top:1rem}a{text-decoration-thickness:1.5px}a,a:link{color:#0062a8;color:var(--link)}a:visited{color:#4c2c92;color:var(--link-visited)}a:hover,a:active{text-decoration:underline;text-decoration-thickness:3.5px}a.tna-link--no-visited-state:visited{color:#0062a8;color:var(--link)}small{font-size:0.95625rem}.tna-hgroup__supertitle,.tna-chip{max-width:max-content;padding:.125em .25rem;display:flex;align-items:center;gap:.5rem;color:#343338;color:var(--font-base);font-family:"Roboto Mono",monospace;font-weight:400;font-size:0.875rem;text-transform:uppercase;line-height:1.1428571429;line-height:1}.tna-hgroup__supertitle--plain,.tna-chip--plain{padding:0;background-color:rgba(0,0,0,0);border:none}.tna-hgroup__supertitle:not(.tna-hgroup__supertitle--plain),.tna-chip:not(.tna-chip--plain){border:.125rem #111 solid;border:.125rem var(--accent-background) solid}.tna-background-accent .tna-hgroup__supertitle:not(.tna-hgroup__supertitle--plain),.tna-background-accent .tna-chip:not(.tna-chip--plain){border-color:#1e1e1e;border-color:var(--contrast-background)}.tna-chip .fa-solid,.tna-chip .fa-brand{color:rgb(52 51 56/0.45);color:var(--icon-light)}.tna-template--high-contrast-theme .tna-chip .fa-solid,.tna-template--high-contrast-theme .tna-chip .fa-brand{padding-right:.5rem;color:inherit;border-right:1px #26262a solid;border-right:1px var(--keyline-dark) solid}@media(prefers-contrast: more){.tna-template--system-theme .tna-chip .fa-solid,.tna-template--system-theme .tna-chip .fa-brand{padding-right:.5rem;color:inherit;border-right:1px #26262a solid;border-right:1px var(--keyline-dark) solid}}a.tna-chip{text-decoration:none}a.tna-chip:hover{text-decoration:underline;text-decoration-thickness:3.5px}a.tna-chip .fa-solid,a.tna-chip .fa-brand{color:inherit}.tna-chip-list{display:flex;flex-wrap:wrap;gap:.5rem 1.5rem;list-style:none}.tna-chip-list__item{display:flex;align-items:center}.tna-form__heading,.tna-form__heading--s,.tna-hgroup-s .tna-hgroup__title,.tna-heading-s,.tna-form__heading--m,.tna-hgroup-m .tna-hgroup__title,.tna-heading-m,.tna-form__heading--l,.tna-hgroup-l .tna-hgroup__title,.tna-heading-l,.tna-form__heading--xl,.tna-hgroup-xl .tna-hgroup__title,.tna-heading-xl{color:#000;color:var(--font-dark);text-wrap:pretty}.tna-form__heading:not(.tna-heading--no-link-arrow) a,.tna-form__heading--s:not(.tna-heading--no-link-arrow) a,.tna-hgroup-s .tna-hgroup__title:not(.tna-heading--no-link-arrow) a,.tna-heading-s:not(.tna-heading--no-link-arrow) a,.tna-form__heading--m:not(.tna-heading--no-link-arrow) a,.tna-hgroup-m .tna-hgroup__title:not(.tna-heading--no-link-arrow) a,.tna-heading-m:not(.tna-heading--no-link-arrow) a,.tna-form__heading--l:not(.tna-heading--no-link-arrow) a,.tna-hgroup-l .tna-hgroup__title:not(.tna-heading--no-link-arrow) a,.tna-heading-l:not(.tna-heading--no-link-arrow) a,.tna-form__heading--xl:not(.tna-heading--no-link-arrow) a,.tna-hgroup-xl .tna-hgroup__title:not(.tna-heading--no-link-arrow) a,.tna-heading-xl:not(.tna-heading--no-link-arrow) a{display:inline-block}.tna-form__heading:not(.tna-heading--no-link-arrow) a::after,.tna-form__heading--s:not(.tna-heading--no-link-arrow) a::after,.tna-hgroup-s .tna-hgroup__title:not(.tna-heading--no-link-arrow) a::after,.tna-heading-s:not(.tna-heading--no-link-arrow) a::after,.tna-form__heading--m:not(.tna-heading--no-link-arrow) a::after,.tna-hgroup-m .tna-hgroup__title:not(.tna-heading--no-link-arrow) a::after,.tna-heading-m:not(.tna-heading--no-link-arrow) a::after,.tna-form__heading--l:not(.tna-heading--no-link-arrow) a::after,.tna-hgroup-l .tna-hgroup__title:not(.tna-heading--no-link-arrow) a::after,.tna-heading-l:not(.tna-heading--no-link-arrow) a::after,.tna-form__heading--xl:not(.tna-heading--no-link-arrow) a::after,.tna-hgroup-xl .tna-hgroup__title:not(.tna-heading--no-link-arrow) a::after,.tna-heading-xl:not(.tna-heading--no-link-arrow) a::after{padding-left:.5rem;display:inline-block;font-weight:700;content:"›"}.tna-form__heading:not(.tna-heading--no-link-arrow) a:hover::after,.tna-form__heading--s:not(.tna-heading--no-link-arrow) a:hover::after,.tna-hgroup-s .tna-hgroup__title:not(.tna-heading--no-link-arrow) a:hover::after,.tna-heading-s:not(.tna-heading--no-link-arrow) a:hover::after,.tna-form__heading--m:not(.tna-heading--no-link-arrow) a:hover::after,.tna-hgroup-m .tna-hgroup__title:not(.tna-heading--no-link-arrow) a:hover::after,.tna-heading-m:not(.tna-heading--no-link-arrow) a:hover::after,.tna-form__heading--l:not(.tna-heading--no-link-arrow) a:hover::after,.tna-hgroup-l .tna-hgroup__title:not(.tna-heading--no-link-arrow) a:hover::after,.tna-heading-l:not(.tna-heading--no-link-arrow) a:hover::after,.tna-form__heading--xl:not(.tna-heading--no-link-arrow) a:hover::after,.tna-hgroup-xl .tna-hgroup__title:not(.tna-heading--no-link-arrow) a:hover::after,.tna-heading-xl:not(.tna-heading--no-link-arrow) a:hover::after{padding-left:.75rem}.tna-form__heading--xl,.tna-hgroup-xl .tna-hgroup__title,.tna-heading-xl{font-family:supria-sans-condensed,"Arial Narrow",sans-serif;font-weight:500;font-size:4rem;line-height:1.2}@media(min-width: 48.0625em)and (max-width: 64em){.tna-form__heading--xl,.tna-hgroup-xl .tna-hgroup__title,.tna-heading-xl{font-size:2.625rem}}@media(max-width: 48em){.tna-form__heading--xl,.tna-hgroup-xl .tna-hgroup__title,.tna-heading-xl{font-size:2.25rem}}.tna-form__heading--l,.tna-hgroup-l .tna-hgroup__title,.tna-heading-l{font-family:supria-sans-condensed,"Arial Narrow",sans-serif;font-weight:500;font-size:2rem;line-height:1.3}@media(min-width: 48.0625em)and (max-width: 64em){.tna-form__heading--l,.tna-hgroup-l .tna-hgroup__title,.tna-heading-l{font-size:1.875rem}}@media(max-width: 48em){.tna-form__heading--l,.tna-hgroup-l .tna-hgroup__title,.tna-heading-l{font-size:1.5rem}}.tna-form__heading--m,.tna-hgroup-m .tna-hgroup__title,.tna-heading-m{font-weight:700;font-size:1.375rem;line-height:1.6}@media(max-width: 48em){.tna-form__heading--m,.tna-hgroup-m .tna-hgroup__title,.tna-heading-m{font-size:1.25rem}}.tna-form__heading--s,.tna-hgroup-s .tna-hgroup__title,.tna-heading-s{font-weight:700;font-size:1.125rem;line-height:1.6}.tna-hgroup-xl,.tna-hgroup-l,.tna-hgroup-m,.tna-hgroup-s,.tna-heading-s,.tna-heading-m,.tna-heading-l,.tna-heading-xl{margin-bottom:0;padding:1rem 0 0}.tna-hgroup-xl:first-child,.tna-hgroup-l:first-child,.tna-hgroup-m:first-child,.tna-hgroup-s:first-child,.tna-heading-s:first-child,.tna-heading-m:first-child,.tna-heading-l:first-child,.tna-heading-xl:first-child{padding-top:0}.tna-hgroup-xl+p,.tna-hgroup-l+p,.tna-hgroup-m+p,.tna-hgroup-s+p,.tna-heading-s+p,.tna-heading-m+p,.tna-heading-l+p,.tna-heading-xl+p{margin-top:1rem}.tna-hgroup__supertitle{margin:0 0 .25rem}.tna-hgroup__title{margin:0;display:block}.tna-blockquote{margin-right:0;margin-bottom:0;margin-left:0;padding:1rem 1rem 1rem 2rem;border-left:.375rem #111 solid;border-left:.375rem var(--accent-background) solid}.tna-blockquote__quote{font-weight:700}.tna-blockquote__author{font-size:1rem}.tna-blockquote .tna-blockquote__author{margin:1rem 0 0}.tna-blockquote__author::before{content:"—" " "}@media(max-width: 30em){.tna-blockquote{padding:.5rem .5rem .5rem 1rem}}.tna-large-paragraph{font-size:1.375rem;color:#000;color:var(--font-dark)}.tna-scene-setter{font-family:"Roboto Mono",monospace;font-weight:400;color:#000;color:var(--font-dark);font-size:1.875rem;line-height:1.6666666667}@media(max-width: 48em){.tna-scene-setter{font-size:1.5rem;line-height:2}}.tna-scene-setter a{color:inherit;text-decoration-thickness:2px}.tna-scene-setter a:hover{text-decoration-thickness:4.5px}.tna-scene-setter--small{font-size:1.5rem}.tna-form__group--error{padding-left:1rem;border-left:.25rem #c00 solid;border-left:.25rem var(--form-error) solid}.tna-form__fieldset{flex:1;border:none}.tna-form__group,.tna-form__fieldset{display:flex;flex-direction:column;align-items:flex-start;gap:.5rem}.tna-form__group--inline,.tna-form__group--inline .tna-form__fieldset{flex-direction:row;align-items:flex-start}@media(max-width: 48em){.tna-form__group--inline,.tna-form__group--inline .tna-form__fieldset{flex-direction:column}}.tna-form__group-contents{flex:0 0 39%}.tna-form__legend{margin-bottom:.5rem}.tna-form__heading{margin:0}.tna-form__heading--xs{font-size:1em;font-family:"Open Sans",sans-serif;font-weight:400}.tna-form__hint{margin-top:0;font-size:1rem;color:rgb(0 0 0/0.58);color:var(--font-light)}.tna-form__error-message{margin-top:0;color:#c00;color:var(--form-error);font-weight:700}.tna-template{min-width:320px;width:100%;height:100%;-webkit-overflow-scrolling:touch;font-size:16px}.tna-template__body{min-height:100%;margin:0;padding:0}.tna-template__body:has(.tna-header):has(#main-content[role=main]):has(.tna-footer){display:flex;flex-direction:column}.tna-template__body:has(.tna-header):has(#main-content[role=main]):has(.tna-footer) #main-content{flex:1}img,svg,picture,video,canvas{max-width:100%;height:auto;display:block}video,canvas{width:100%}[hidden]{display:none}hr{margin:0;border-width:1px 0 0;border-color:rgb(38 38 42/0.25);border-color:var(--keyline);border-style:solid}.tna-section{padding-top:3rem;padding-bottom:3rem}@media(max-width: 48em){.tna-section{padding-top:2rem;padding-bottom:2rem}}.tna-aside{padding:2rem}@media(max-width: 48em){.tna-aside{padding:1rem}}.tna-template--high-contrast-theme .tna-aside{border:1px #26262a solid;border:1px var(--keyline-dark) solid}@media(prefers-contrast: more){.tna-template--system-theme .tna-aside{border:1px #26262a solid;border:1px var(--keyline-dark) solid}}.tna-aside--tight{padding:1rem}.tna-ul,.tna-ol{margin:1rem 0 0;padding:0 0 0 2rem}.tna-ul:first-child,.tna-ol:first-child{margin-top:0}.tna-ul li::marker,.tna-ol li::marker{color:#111;color:var(--accent-background);font-weight:700}.tna-ul--plain,.tna-ol--plain{padding-left:0;list-style:none}.tna-ul .tna-ul,.tna-ul .tna-ol,.tna-ol .tna-ul,.tna-ol .tna-ol{margin-top:0}.tna-dl{margin:1rem 0 0;display:flex;flex-wrap:wrap}.tna-dl:first-child{margin-top:0}.tna-dl dt,.tna-dl dd{margin:0;padding:.5rem 1rem;position:relative;box-sizing:border-box;word-wrap:break-word}.tna-dl--plain dt{padding-top:0;padding-left:0}.tna-dl--plain dd{padding-top:0;padding-right:0}.tna-dl dt{width:30%;font-weight:700}.tna-dl dd{width:70%}.tna-dl dd+dd{margin-left:30%}.tna-dl--icon-padding dt{padding-left:3rem !important;position:relative}.tna-dl--icon-padding dt .fa-solid{overflow:visible;position:absolute;top:50%;left:1rem;color:rgb(52 51 56/0.45);color:var(--icon-light);text-align:left;transform:translateY(-50%)}.tna-dl--icon-padding.tna-dl--plain dt{padding-left:2rem !important}.tna-dl--icon-padding.tna-dl--plain dt .fa-solid{margin-top:-0.25rem;left:0}.tna-dl--icon-padding.tna-dl--plain dd{padding-left:2rem}.tna-dl:not(.tna-dl--plain) dt:first-child,.tna-dl:not(.tna-dl--plain) dd:nth-of-type(2n)+dt,.tna-dl:not(.tna-dl--plain) dd:nth-of-type(2n + 1){background-color:#e4e4e4;background-color:var(--background-tint)}@media(min-width: 30.0625em)and (max-width: 48em){.tna-dl dt{width:35%}.tna-dl dd{width:65%}.tna-dl dd+dd{margin-left:35%}}.tna-dl--stacked dt,.tna-dl--stacked dd{width:100%;margin-left:0}.tna-dl--stacked dd{padding-left:1rem}.tna-dl--stacked.tna-dl--plain dt{padding-top:0;padding-bottom:0}.tna-dl--stacked.tna-dl--plain dt .fa-solid{margin-top:0}.tna-dl--stacked.tna-dl--plain dd{margin-left:0;padding-top:0}.tna-dl--stacked:not(.tna-dl--plain) dt{background-color:#e4e4e4;background-color:var(--background-tint)}.tna-dl--stacked:not(.tna-dl--plain) dd{background:rgba(0,0,0,0) !important;margin-left:0}@media(max-width: 30em){.tna-dl dt,.tna-dl dd{width:100%;margin-left:0}.tna-dl dd{padding-left:1rem}.tna-dl.tna-dl--plain dt{padding-top:0;padding-bottom:0}.tna-dl.tna-dl--plain dt .fa-solid{margin-top:0}.tna-dl.tna-dl--plain dd{margin-left:0;padding-top:0}.tna-dl:not(.tna-dl--plain) dt{background-color:#e4e4e4;background-color:var(--background-tint)}.tna-dl:not(.tna-dl--plain) dd{background:rgba(0,0,0,0) !important;margin-left:0}}@media(forced-colors: active){.tna-dl{border-bottom:1px #26262a solid;border-bottom:1px var(--keyline-dark) solid}.tna-dl dt,.tna-dl dd{background:rgba(0,0,0,0) !important;border-top:1px #26262a solid;border-top:1px var(--keyline-dark) solid}}.tna-template--high-contrast-theme .tna-dl{border-bottom:1px #26262a solid;border-bottom:1px var(--keyline-dark) solid}.tna-template--high-contrast-theme .tna-dl dt,.tna-template--high-contrast-theme .tna-dl dd{background:rgba(0,0,0,0) !important;border-top:1px #26262a solid;border-top:1px var(--keyline-dark) solid}@media(prefers-contrast: more){.tna-template--system-theme .tna-dl{border-bottom:1px #26262a solid;border-bottom:1px var(--keyline-dark) solid}.tna-template--system-theme .tna-dl dt,.tna-template--system-theme .tna-dl dd{background:rgba(0,0,0,0) !important;border-top:1px #26262a solid;border-top:1px var(--keyline-dark) solid}}.tna-\!--no-margin-top,.tna-\!--no-margin-vertical{margin-top:0 !important}.tna-\!--no-margin-bottom,.tna-\!--no-margin-vertical{margin-bottom:0 !important}.tna-\!--no-padding-top,.tna-\!--no-padding-vertical{padding-top:0 !important}.tna-\!--no-padding-bottom,.tna-\!--no-padding-vertical{padding-bottom:0 !important}.tna-\!--margin-top-xs,.tna-\!--margin-vertical-xs{margin-top:0.5rem !important}.tna-\!--margin-top-s,.tna-\!--margin-vertical-s{margin-top:1rem !important}.tna-\!--margin-top-m,.tna-\!--margin-vertical-m{margin-top:2rem !important}.tna-\!--margin-top-l,.tna-\!--margin-vertical-l{margin-top:3rem !important}.tna-\!--margin-top-xl,.tna-\!--margin-vertical-xl{margin-top:5rem !important}.tna-\!--margin-top-xxl,.tna-\!--margin-vertical-xxl{margin-top:8rem !important}.tna-\!--margin-bottom-xs,.tna-\!--margin-vertical-xs{margin-bottom:0.5rem !important}.tna-\!--margin-bottom-s,.tna-\!--margin-vertical-s{margin-bottom:1rem !important}.tna-\!--margin-bottom-m,.tna-\!--margin-vertical-m{margin-bottom:2rem !important}.tna-\!--margin-bottom-l,.tna-\!--margin-vertical-l{margin-bottom:3rem !important}.tna-\!--margin-bottom-xl,.tna-\!--margin-vertical-xl{margin-bottom:5rem !important}.tna-\!--margin-bottom-xxl,.tna-\!--margin-vertical-xxl{margin-bottom:8rem !important}.tna-\!--padding-top-xs,.tna-\!--padding-vertical-xs{padding-top:0.5rem !important}.tna-\!--padding-top-s,.tna-\!--padding-vertical-s{padding-top:1rem !important}.tna-\!--padding-top-m,.tna-\!--padding-vertical-m{padding-top:2rem !important}.tna-\!--padding-top-l,.tna-\!--padding-vertical-l{padding-top:3rem !important}.tna-\!--padding-top-xl,.tna-\!--padding-vertical-xl{padding-top:5rem !important}.tna-\!--padding-top-xxl,.tna-\!--padding-vertical-xxl{padding-top:8rem !important}.tna-\!--padding-bottom-xs,.tna-\!--padding-vertical-xs{padding-bottom:0.5rem !important}.tna-\!--padding-bottom-s,.tna-\!--padding-vertical-s{padding-bottom:1rem !important}.tna-\!--padding-bottom-m,.tna-\!--padding-vertical-m{padding-bottom:2rem !important}.tna-\!--padding-bottom-l,.tna-\!--padding-vertical-l{padding-bottom:3rem !important}.tna-\!--padding-bottom-xl,.tna-\!--padding-vertical-xl{padding-bottom:5rem !important}.tna-\!--padding-bottom-xxl,.tna-\!--padding-vertical-xxl{padding-bottom:8rem !important}@media(max-width: 48em){.tna-\!--margin-top-xs,.tna-\!--margin-vertical-xs{margin-top:0.5rem !important}.tna-\!--margin-top-s,.tna-\!--margin-vertical-s{margin-top:0.75rem !important}.tna-\!--margin-top-m,.tna-\!--margin-vertical-m{margin-top:1.5rem !important}.tna-\!--margin-top-l,.tna-\!--margin-vertical-l{margin-top:2rem !important}.tna-\!--margin-top-xl,.tna-\!--margin-vertical-xl{margin-top:3rem !important}.tna-\!--margin-top-xxl,.tna-\!--margin-vertical-xxl{margin-top:5rem !important}.tna-\!--margin-bottom-xs,.tna-\!--margin-vertical-xs{margin-bottom:0.5rem !important}.tna-\!--margin-bottom-s,.tna-\!--margin-vertical-s{margin-bottom:0.75rem !important}.tna-\!--margin-bottom-m,.tna-\!--margin-vertical-m{margin-bottom:1.5rem !important}.tna-\!--margin-bottom-l,.tna-\!--margin-vertical-l{margin-bottom:2rem !important}.tna-\!--margin-bottom-xl,.tna-\!--margin-vertical-xl{margin-bottom:3rem !important}.tna-\!--margin-bottom-xxl,.tna-\!--margin-vertical-xxl{margin-bottom:5rem !important}.tna-\!--padding-top-xs,.tna-\!--padding-vertical-xs{padding-top:0.5rem !important}.tna-\!--padding-top-s,.tna-\!--padding-vertical-s{padding-top:0.75rem !important}.tna-\!--padding-top-m,.tna-\!--padding-vertical-m{padding-top:1.5rem !important}.tna-\!--padding-top-l,.tna-\!--padding-vertical-l{padding-top:2rem !important}.tna-\!--padding-top-xl,.tna-\!--padding-vertical-xl{padding-top:3rem !important}.tna-\!--padding-top-xxl,.tna-\!--padding-vertical-xxl{padding-top:5rem !important}.tna-\!--padding-bottom-xs,.tna-\!--padding-vertical-xs{padding-bottom:0.5rem !important}.tna-\!--padding-bottom-s,.tna-\!--padding-vertical-s{padding-bottom:0.75rem !important}.tna-\!--padding-bottom-m,.tna-\!--padding-vertical-m{padding-bottom:1.5rem !important}.tna-\!--padding-bottom-l,.tna-\!--padding-vertical-l{padding-bottom:2rem !important}.tna-\!--padding-bottom-xl,.tna-\!--padding-vertical-xl{padding-bottom:3rem !important}.tna-\!--padding-bottom-xxl,.tna-\!--padding-vertical-xxl{padding-bottom:5rem !important}}@media(min-width: 64.0625em){.tna-\!--no-margin-top-large,.tna-\!--no-margin-vertical-large{margin-top:0 !important}.tna-\!--no-margin-bottom-large,.tna-\!--no-margin-vertical-large{margin-bottom:0 !important}.tna-\!--no-padding-top-large,.tna-\!--no-padding-vertical-large{padding-top:0 !important}.tna-\!--no-padding-bottom-large,.tna-\!--no-padding-vertical-large{padding-bottom:0 !important}.tna-\!--hide-on-large{display:none !important}}@media(min-width: 48.0625em)and (max-width: 64em){.tna-\!--no-margin-top-medium,.tna-\!--no-margin-vertical-medium{margin-top:0 !important}.tna-\!--no-margin-bottom-medium,.tna-\!--no-margin-vertical-medium{margin-bottom:0 !important}.tna-\!--no-padding-top-medium,.tna-\!--no-padding-vertical-medium{padding-top:0 !important}.tna-\!--no-padding-bottom-medium,.tna-\!--no-padding-vertical-medium{padding-bottom:0 !important}.tna-\!--hide-on-medium{display:none !important}}@media(min-width: 30.0625em)and (max-width: 48em){.tna-\!--no-margin-top-small,.tna-\!--no-margin-vertical-small{margin-top:0 !important}.tna-\!--no-margin-bottom-small,.tna-\!--no-margin-vertical-small{margin-bottom:0 !important}.tna-\!--no-padding-top-small,.tna-\!--no-padding-vertical-small{padding-top:0 !important}.tna-\!--no-padding-bottom-small,.tna-\!--no-padding-vertical-small{padding-bottom:0 !important}.tna-\!--hide-on-small{display:none !important}}@media(max-width: 30em){.tna-\!--no-margin-top-tiny,.tna-\!--no-margin-vertical-tiny{margin-top:0 !important}.tna-\!--no-margin-bottom-tiny,.tna-\!--no-margin-vertical-tiny{margin-bottom:0 !important}.tna-\!--no-padding-top-tiny,.tna-\!--no-padding-vertical-tiny{padding-top:0 !important}.tna-\!--no-padding-bottom-tiny,.tna-\!--no-padding-vertical-tiny{padding-bottom:0 !important}.tna-\!--hide-on-tiny{display:none !important}}.tna-table{width:100%;border-collapse:collapse;text-align:left}.tna-table:first-child{margin-top:0}.tna-table__caption{text-align:left;font-weight:700}.tna-table__header,.tna-table__cell{padding:.25rem 1rem;border-bottom:1px rgb(38 38 42/0.25) solid;border-bottom:1px var(--keyline) solid}.tna-table__header:first-child,.tna-table__cell:first-child{padding-left:0}.tna-table__header:last-child,.tna-table__cell:last-child{padding-right:0}.tna-table__head .tna-table__header{border-bottom:.25rem #26262a solid;border-bottom:.25rem var(--keyline-dark) solid}.tna-table p+p{margin-top:.25rem}.tna-table-wrapper{width:100%;padding-left:2rem;padding-right:2rem;position:relative;left:-2rem;overflow:auto}@media(max-width: 30em){.tna-table-wrapper{padding-left:1rem;padding-right:1rem;left:-1rem}}.tna-container{max-width:75.25rem;width:100%;margin-right:auto;margin-left:auto;padding-right:1rem;padding-left:1rem;box-sizing:border-box;display:flex;flex-wrap:wrap;justify-content:flex-start;align-items:stretch}.tna-container--no-padding,.tna-container--no-padding-all{max-width:71.25rem}.tna-container--max{max-width:none}.tna-container--centred{justify-content:center}.tna-column{margin:0;padding-right:1rem;padding-left:1rem;box-sizing:border-box}.tna-column--container{display:flex;flex-wrap:wrap;justify-content:stretch;align-items:stretch}.tna-column--align-top{align-self:flex-start}.tna-column--align-centre{align-self:center}.tna-column--align-bottom{align-self:flex-end}.tna-column--full{width:100%;flex:none}.tna-column--width-1-12{width:8.3333333333%;flex:none}.tna-column--margin-right-1-12{margin-right:8.3333333333%}.tna-column--margin-left-1-12{margin-left:8.3333333333%}.tna-column--width-1-6{width:16.6666666667%;flex:none}.tna-column--margin-right-1-6{margin-right:16.6666666667%}.tna-column--margin-left-1-6{margin-left:16.6666666667%}.tna-column--width-1-4{width:25%;flex:none}.tna-column--margin-right-1-4{margin-right:25%}.tna-column--margin-left-1-4{margin-left:25%}.tna-column--width-1-3{width:33.3333333333%;flex:none}.tna-column--margin-right-1-3{margin-right:33.3333333333%}.tna-column--margin-left-1-3{margin-left:33.3333333333%}.tna-column--width-5-12{width:41.6666666667%;flex:none}.tna-column--margin-right-5-12{margin-right:41.6666666667%}.tna-column--margin-left-5-12{margin-left:41.6666666667%}.tna-column--width-1-2{width:50%;flex:none}.tna-column--margin-right-1-2{margin-right:50%}.tna-column--margin-left-1-2{margin-left:50%}.tna-column--width-7-12{width:58.3333333333%;flex:none}.tna-column--margin-right-7-12{margin-right:58.3333333333%}.tna-column--margin-left-7-12{margin-left:58.3333333333%}.tna-column--width-2-3{width:66.6666666667%;flex:none}.tna-column--margin-right-2-3{margin-right:66.6666666667%}.tna-column--margin-left-2-3{margin-left:66.6666666667%}.tna-column--width-3-4{width:75%;flex:none}.tna-column--margin-right-3-4{margin-right:75%}.tna-column--margin-left-3-4{margin-left:75%}.tna-column--width-5-6{width:83.3333333333%;flex:none}.tna-column--margin-right-5-6{margin-right:83.3333333333%}.tna-column--margin-left-5-6{margin-left:83.3333333333%}.tna-column--width-11-12{width:91.6666666667%;flex:none}.tna-column--margin-right-11-12{margin-right:91.6666666667%}.tna-column--margin-left-11-12{margin-left:91.6666666667%}.tna-column--flex-1{width:auto;flex:1 0}.tna-column--flex-2{width:auto;flex:2 0}.tna-column--flex-3{width:auto;flex:3 0}.tna-column--order-1{order:1}.tna-column--order-2{order:2}.tna-column--order-3{order:3}.tna-column--order-4{order:4}@media(min-width: 48.0625em)and (max-width: 64em){.tna-column--full-medium{width:100%;flex:none}.tna-column--width-1-6-medium{width:16.6666666667%;flex:none}.tna-column--margin-right-1-6-medium{margin-right:16.6666666667%}.tna-column--margin-left-1-6-medium{margin-left:16.6666666667%}.tna-column--width-1-3-medium{width:33.3333333333%;flex:none}.tna-column--margin-right-1-3-medium{margin-right:33.3333333333%}.tna-column--margin-left-1-3-medium{margin-left:33.3333333333%}.tna-column--width-1-2-medium{width:50%;flex:none}.tna-column--margin-right-1-2-medium{margin-right:50%}.tna-column--margin-left-1-2-medium{margin-left:50%}.tna-column--width-2-3-medium{width:66.6666666667%;flex:none}.tna-column--margin-right-2-3-medium{margin-right:66.6666666667%}.tna-column--margin-left-2-3-medium{margin-left:66.6666666667%}.tna-column--width-5-6-medium{width:83.3333333333%;flex:none}.tna-column--margin-right-5-6-medium{margin-right:83.3333333333%}.tna-column--margin-left-5-6-medium{margin-left:83.3333333333%}.tna-column--flex-1-medium{width:auto;flex:1 0}.tna-column--flex-2-medium{width:auto;flex:2 0}.tna-column--flex-3-medium{width:auto;flex:3 0}.tna-column--order-1-medium{order:1}.tna-column--order-2-medium{order:2}.tna-column--order-3-medium{order:3}.tna-column--order-4-medium{order:4}}@media(max-width: 30em){.tna-container{padding-right:.5rem;padding-left:.5rem}.tna-column{padding-right:.5rem;padding-left:.5rem}}@media(min-width: 30.0625em)and (max-width: 48em){.tna-column--full-small{width:100%;flex:none}.tna-column--width-1-4-small{width:25%;flex:none}.tna-column--margin-right-1-4-small{margin-right:25%}.tna-column--margin-left-1-4-small{margin-left:25%}.tna-column--width-1-2-small{width:50%;flex:none}.tna-column--margin-right-1-2-small{margin-right:50%}.tna-column--margin-left-1-2-small{margin-left:50%}.tna-column--width-3-4-small{width:75%;flex:none}.tna-column--margin-right-3-4-small{margin-right:75%}.tna-column--margin-left-3-4-small{margin-left:75%}.tna-column--flex-1-small{width:auto;flex:1 0}.tna-column--flex-2-small{width:auto;flex:2 0}.tna-column--flex-3-small{width:auto;flex:3 0}.tna-column--order-1-small{order:1}.tna-column--order-2-small{order:2}.tna-column--order-3-small{order:3}.tna-column--order-4-small{order:4}}@media(max-width: 30em){.tna-column--full-tiny{width:100%;flex:none}.tna-column--width-1-2-tiny{width:50%;flex:none}.tna-column--margin-right-1-2-tiny{margin-right:50%}.tna-column--margin-left-1-2-tiny{margin-left:50%}.tna-column--flex-1-tiny{width:auto;flex:1 0}.tna-column--flex-2-tiny{width:auto;flex:2 0}.tna-column--flex-3-tiny{width:auto;flex:3 0}.tna-column--order-1-tiny{order:1}.tna-column--order-2-tiny{order:2}.tna-column--order-3-tiny{order:3}.tna-column--order-4-tiny{order:4}}.tna-container--no-padding,.tna-container--no-padding-all,.tna-container--no-padding-all>.tna-column,.tna-column--no-padding,.tna-column--container--no-padding-all,.tna-column--container--no-padding-all>.tna-column{padding-right:0;padding-left:0}.tna-global-header{padding-top:1rem}.tna-template--light-theme .tna-global-header{background:linear-gradient(0deg, rgb(34, 34, 34) 0%, rgb(0, 0, 0) 100%)}@media(prefers-color-scheme: light){.tna-global-header .tna-template--system-theme{background:linear-gradient(0deg, rgb(34, 34, 34) 0%, rgb(0, 0, 0) 100%)}}.tna-global-header__main{padding-bottom:1.5rem}.tna-global-header__logo-wrapper{margin-top:.5rem;display:flex}.tna-global-header__logo{display:flex;gap:1rem;align-items:flex-end;text-decoration:none}.tna-global-header__logo:hover{text-decoration:none;outline:.3125rem #000 solid;outline:.3125rem var(--font-dark) solid;outline-offset:1px}.tna-global-header .tna-logo{width:6.75rem;height:6.75rem}.tna-global-header__logo-strapline{padding-right:.625rem;font-family:supria-sans-condensed,"Arial Narrow",sans-serif;font-weight:500;font-size:1.25rem;text-transform:uppercase;line-height:2.25rem}.tna-global-header__navigation-button-wrapper{display:none}.tna-global-header__hamburger{width:2rem;height:.25rem;display:block;background-color:#000;background-color:var(--font-dark)}.tna-global-header__hamburger::before,.tna-global-header__hamburger::after{height:.25rem;display:block;position:absolute;right:0;left:0;background-color:inherit;content:""}.tna-global-header__hamburger::before{top:0}.tna-global-header__hamburger::after{bottom:0}.tna-global-header__navigation-button{height:2rem;padding:0;display:block;position:relative;appearance:none;font-size:0;background:none;border:0 rgba(0,0,0,0) solid;border-width:.25rem 0;cursor:pointer}.tna-global-header__navigation-button--opened .tna-global-header__hamburger{height:0}.tna-global-header__navigation-button--opened .tna-global-header__hamburger::before{top:.625rem;transform:rotate(-135deg)}.tna-global-header__navigation-button--opened .tna-global-header__hamburger::after{bottom:.625rem;transform:rotate(135deg)}.tna-global-header__navigation{margin:.5rem 0 0;height:100%;position:relative;columns:2;column-gap:2rem;list-style:none}.tna-global-header__navigation-item{break-inside:avoid}.tna-global-header__navigation-item-link{min-width:15rem;height:2.25rem;display:block;box-sizing:border-box;font-size:1.0625rem;text-decoration:none;line-height:2.25rem;border-bottom:.5px rgb(38 38 42/0.25) solid;border-bottom:.5px var(--keyline) solid}.tna-global-header__navigation-item-link:hover{text-decoration:underline;text-decoration-thickness:3.5px}.tna-global-header__top-navigation{padding:0 0 .5rem;display:flex;justify-content:flex-end;gap:1.5rem;font-size:0.9375rem;list-style:none}.tna-global-header__top-navigation-link{display:flex;gap:.5rem;align-items:center;text-decoration:none}.tna-global-header__top-navigation-link,.tna-global-header__top-navigation-link:link,.tna-global-header__top-navigation-link:visited{color:rgb(0 0 0/0.58);color:var(--font-light)}.tna-global-header__top-navigation-link:hover{color:#343338;color:var(--font-base);text-decoration:underline;text-decoration-thickness:3.5px}@media(min-width: 48.0625em)and (max-width: 64em){.tna-global-header__navigation-item-link{font-size:1rem}.tna-global-header--collapse-on-medium .tna-global-header__navigation-wrapper{width:100%}.tna-global-header--collapse-on-medium .tna-global-header__top-navigation-wrapper{flex:1;order:2}.tna-global-header--collapse-on-medium .tna-global-header__main{padding-bottom:1rem}.tna-global-header--collapse-on-medium .tna-global-header__logo{gap:.75rem}.tna-global-header--collapse-on-medium .tna-global-header__logo-wrapper{margin-top:.5rem;margin-bottom:.5rem}.tna-global-header--collapse-on-medium .tna-logo{width:5rem;height:5rem}.tna-global-header--collapse-on-medium .tna-global-header__logo-strapline{line-height:1.6666666667rem}.tna-global-header--collapse-on-medium .tna-global-header__navigation{margin-bottom:.5rem}.tna-global-header--collapse-on-medium .tna-global-header__navigation,.tna-global-header--collapse-on-medium .tna-global-header__navigation-item,.tna-global-header--collapse-on-medium .tna-global-header__navigation-item-link{height:auto}}@media(max-width: 48em){.tna-global-header__main{padding-bottom:0}.tna-global-header__logo-wrapper,.tna-global-header__navigation-button-wrapper{margin-top:0;margin-bottom:1rem}.tna-global-header__logo{gap:.75rem}.tna-global-header__navigation-button-wrapper{display:flex;align-items:center}.tna-global-header__navigation,.tna-global-header__navigation-item,.tna-global-header__navigation-item-link{height:auto}.tna-global-header__navigation{margin-top:0;columns:1;background-color:rgba(255,255,255,.1);border-top:3px #26262a solid;border-top:3px var(--keyline-dark) solid;border-bottom:3px #26262a solid;border-bottom:3px var(--keyline-dark) solid}.tna-global-header__navigation-item{flex-direction:column;align-items:flex-start}.tna-global-header__navigation-item-link{line-height:1.75rem}.tna-global-header__navigation-item:last-child .tna-global-header__navigation-item-link{border-bottom:none}.tna-global-header__navigation-item-contents{display:block}.tna-global-header__navigation-item-children{margin-bottom:1rem;margin-left:1.5rem}.tna-global-header__top-navigation{padding-top:1rem;padding-bottom:1rem;justify-content:flex-start}}@media(min-width: 30.0625em)and (max-width: 48em){.tna-global-header .tna-logo{width:4rem;height:4rem}.tna-global-header__logo-strapline{line-height:1.25rem}.tna-global-header__navigation{width:calc(100% + 4rem);left:-2rem}.tna-global-header__navigation-item-link{padding:.5rem 2rem}}@media(max-width: 30em){.tna-global-header .tna-logo{width:3.5rem;height:3.5rem}.tna-global-header__logo-strapline{line-height:1}.tna-global-header__navigation{width:calc(100% + 2rem);left:-1rem}.tna-global-header__navigation-item-link{padding:.5rem 1rem}}/*# sourceMappingURL=global-header.css.map */