@nationalarchives/frontend 0.2.6 → 0.2.7
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.
- package/nationalarchives/all.css +1 -1
- package/nationalarchives/all.css.map +1 -1
- package/nationalarchives/analytics.js +1 -1
- package/nationalarchives/analytics.js.map +1 -1
- package/nationalarchives/components/cookie-banner/fixtures.json +22 -10
- package/nationalarchives/components/cookie-banner/macro-options.json +24 -0
- package/nationalarchives/components/cookie-banner/template.njk +15 -7
- package/nationalarchives/components/global-header/fixtures.json +203 -2
- package/nationalarchives/components/global-header/template.njk +3 -3
- package/nationalarchives/components/header/analytics.js +1 -1
- package/nationalarchives/components/sidebar/sidebar.css +1 -1
- package/nationalarchives/components/sidebar/sidebar.css.map +1 -1
- package/nationalarchives/components/sidebar/sidebar.scss +13 -7
- package/nationalarchives/components/skip-link/skip-link.css +1 -1
- package/nationalarchives/components/skip-link/skip-link.css.map +1 -1
- package/nationalarchives/components/skip-link/skip-link.scss +8 -11
- package/nationalarchives/global-header-package.css +1 -1
- package/nationalarchives/global-header-package.css.map +1 -1
- package/nationalarchives/prototype-kit.css +1 -1
- package/nationalarchives/prototype-kit.css.map +1 -1
- package/nationalarchives/templates/fixtures.json +5 -5
- package/package.json +1 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
.tna-sidebar--sections .tna-sidebar__item--current .tna-sidebar__link{--background: var(--accent-background);--font-base: var(--accent-font-base);--font-dark: var(--accent-font-dark);--font-light: var(--accent-font-light);--icon-light: var(--accent-icon-light);--link: var(--accent-link);--link-visited: var(--accent-link);--keyline: var(--accent-keyline);--keyline-dark: var(--accent-keyline-dark);--accent-list-marker: var(--accent-font-base);--accent-border: var(--accent-font-dark);--button-text: var(--accent-button-text);--button-background: var(--accent-button-background);--button-hover-text: var(--accent-button-hover-text);--button-hover-background: var(--accent-button-hover-background);background-color:var(--background, #f4f4f4);color:var(--font-base, #343338)}.tna-sidebar{width:100%;font-size:1rem}.tna-sidebar__items{padding-top:max(8px,7px)}.tna-sidebar__items,.tna-sidebar__item-children{display:flex;flex-direction:column;gap:4px;list-style:none}.tna-sidebar--contents .tna-sidebar__item-children{margin-top:4px;padding-left:32px;border-left:5px var(--keyline, rgb(38 38 42/0.25)) solid}.tna-sidebar--sections .tna-sidebar__link{padding:2px 8px;display:block}.tna-sidebar--pages .tna-sidebar__item--current{padding-left:12px;border-left:5px var(--accent-border, rgb(140, 150, 148)) solid}.tna-sidebar--pages .tna-sidebar__item--current>.tna-sidebar__link{font-weight:700}.tna-sidebar--pages .tna-sidebar__item-children{gap:0}.tna-sidebar--contents .tna-sidebar__items,.tna-sidebar--pages .tna-sidebar__item-children{padding-left:24px}.tna-sidebar--contents .tna-sidebar__item,.tna-sidebar--contents .tna-sidebar__item-child,.tna-sidebar--pages .tna-sidebar__item-child{list-style:"— " outside}.tna-sidebar--contents .tna-sidebar__item::marker,.tna-sidebar--contents .tna-sidebar__item-child::marker,.tna-sidebar--pages .tna-sidebar__item-child::marker{color:var(--font-light, rgb(1 1 1/0.58))}.tna-sidebar--sticky{max-height:
|
|
1
|
+
.tna-sidebar--sections .tna-sidebar__item--current .tna-sidebar__link{--background: var(--accent-background);--font-base: var(--accent-font-base);--font-dark: var(--accent-font-dark);--font-light: var(--accent-font-light);--icon-light: var(--accent-icon-light);--link: var(--accent-link);--link-visited: var(--accent-link);--keyline: var(--accent-keyline);--keyline-dark: var(--accent-keyline-dark);--accent-list-marker: var(--accent-font-base);--accent-border: var(--accent-font-dark);--button-text: var(--accent-button-text);--button-background: var(--accent-button-background);--button-hover-text: var(--accent-button-hover-text);--button-hover-background: var(--accent-button-hover-background);background-color:var(--background, #f4f4f4);color:var(--font-base, #343338)}.tna-sidebar{width:100%;font-size:1rem}.tna-sidebar__items{padding-top:max(8px,7px)}.tna-sidebar__items,.tna-sidebar__item-children{display:flex;flex-direction:column;gap:4px;list-style:none}.tna-sidebar--contents .tna-sidebar__item-children{margin-top:4px;padding-left:32px;border-left:5px var(--keyline, rgb(38 38 42/0.25)) solid}.tna-sidebar--sections .tna-sidebar__link{padding:2px 8px;display:block}.tna-sidebar--pages .tna-sidebar__item--current{padding-left:12px;border-left:5px var(--accent-border, rgb(140, 150, 148)) solid}.tna-sidebar--pages .tna-sidebar__item--current>.tna-sidebar__link{font-weight:700}.tna-sidebar--pages .tna-sidebar__item-children{gap:0}.tna-sidebar--contents .tna-sidebar__items,.tna-sidebar--pages .tna-sidebar__item-children{padding-left:24px}.tna-sidebar--contents .tna-sidebar__item,.tna-sidebar--contents .tna-sidebar__item-child,.tna-sidebar--pages .tna-sidebar__item-child{list-style:"— " outside}.tna-sidebar--contents .tna-sidebar__item::marker,.tna-sidebar--contents .tna-sidebar__item-child::marker,.tna-sidebar--pages .tna-sidebar__item-child::marker{color:var(--font-light, rgb(1 1 1/0.58))}.tna-sidebar--sticky{max-height:100vh;max-height:100dvh;display:flex;flex-direction:column;box-sizing:border-box;position:sticky;top:0}.tna-sidebar--sticky .tna-sidebar__items{margin:0;padding-bottom:7px;overflow-y:auto;flex:1}.tna-sidebar--sticky.tna-sidebar--sections .tna-sidebar__items,.tna-sidebar--sticky.tna-sidebar--pages .tna-sidebar__items{width:calc(100% - 7px);padding-right:7px;padding-left:7px;box-sizing:content-box;position:relative;left:-7px}/*# sourceMappingURL=sidebar.css.map */
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sourceRoot":"","sources":["../../../../src/nationalarchives/tools/_colour.scss","../../../../src/nationalarchives/components/sidebar/sidebar.scss","../../../../src/nationalarchives/tools/_typography.scss","../../../../src/nationalarchives/variables/_typography.scss","../../../../src/nationalarchives/variables/_a11y.scss"],"names":[],"mappings":"CA2PA,sEACE,uCACA,qCACA,qCACA,uCACA,uCACA,2BACA,mCACA,iCACA,2CACA,8CACA,yCACA,yCACA,qDACA,qDACA,iEApNA,4CAJA,gCC5CF,aACE,WCDA,eDQA,oBACE,yBAMF,gDAEE,aACA,sBACA,QAEA,gBAiBF,mDACE,eACA,kBDwBE,yDCdJ,0CACE,gBAEA,cAYF,gDACE,kBDFE,+DCOJ,mECtDA,YCYsB,IF8CtB,gDACE,MAQF,2FAEE,kBAGF,uIAGE,yBAEA,+JDlDF,yCC4DA,qBACE,6BACA,8BAEA,aACA,sBACA,sBAEA,gBACA,QAGF,yCACE,WACA,SACA,cG3HoB,IH4HpB,eG5HoB,IH6HpB,aG7HoB,IH+HpB,uBACA,gBAEA,kBACA,UACA","file":"sidebar.css","sourcesContent":["@use \"sass:list\";\n@use \"sass:map\";\n@use \"../variables/borders\";\n@use \"../variables/colour\";\n@use \"../tools/media\";\n\n@function brand-colour($colour, $opacity: 1) {\n @return colour.brand-colour($colour, $opacity);\n}\n\n@mixin colour-css-vars($excludes...) {\n @each $name, $value in colour.$colour-palette-default {\n @if not list.index($excludes, $name) {\n --#{$name}: #{$value};\n }\n }\n}\n\n@mixin colour-css-vars-dark($excludes...) {\n @each $name, $value in colour.$colour-palette-dark {\n @if not list.index($excludes, $name) {\n --#{$name}: #{$value};\n }\n }\n}\n\n@mixin colour-css-vars-high-contrast($excludes...) {\n @each $name, $value in colour.$colour-palette-high-contrast {\n @if not list.index($excludes, $name) {\n --#{$name}: #{$value};\n }\n }\n}\n\n@mixin colour-css-vars-high-contrast-dark($excludes...) {\n @each $name, $value in colour.$colour-palette-high-contrast-dark {\n @if not list.index($excludes, $name) {\n --#{$name}: #{$value};\n }\n }\n}\n\n@function colour-var($colour) {\n @return var(\n --#{$colour},\n #{map.get(colour.$colour-palette-default, $colour)}\n );\n}\n\n@mixin colour-font($colour, $important: false) {\n color: colour-var($colour) if($important, !important, null);\n}\n\n@mixin colour-background($colour, $important: false) {\n background-color: colour-var($colour) if($important, !important, null);\n}\n\n@mixin colour-background-brand($brandColour, $important: false) {\n background-color: #{brand-colour($brandColour)} if($important, !important, null);\n}\n\n@mixin colour-border(\n $colour,\n $width: \"\",\n $style: solid,\n $direction: \"\",\n $important: false\n) {\n @if $direction != \"\" {\n @if $width != \"\" {\n border-#{$direction}: $width\n colour-var($colour)\n $style\n if($important, !important, null);\n } @else {\n border-#{$direction}-color: colour-var($colour)\n if($important, !important, null);\n }\n } @else {\n @if $width != \"\" {\n border: $width\n colour-var($colour)\n $style\n if($important, !important, null);\n } @else {\n border-color: var(\n --#{$colour},\n #{map.get(colour.$colour-palette-default, $colour)}\n )\n if($important, !important, null);\n }\n }\n}\n\n@mixin colour-outline($colour, $width: \"\", $style: solid, $important: false) {\n @if $width != \"\" {\n outline: $width colour-var($colour) $style if($important, !important, null);\n } @else {\n outline-color: colour-var($colour) if($important, !important, null);\n }\n}\n\n@mixin colour-fill($colour, $important: false) {\n fill: colour-var($colour) if($important, !important, null);\n}\n\n@mixin thick-keyline($direction: \"\") {\n @if $direction != \"\" {\n @include colour-border(\n \"keyline\",\n borders.$thick-border-width,\n solid,\n $direction\n );\n } @else {\n @include colour-border(\"keyline\", borders.$thick-border-width, solid);\n }\n}\n\n@mixin thick-keyline-dark($direction: \"\") {\n @if $direction != \"\" {\n @include colour-border(\n \"keyline-dark\",\n borders.$thick-border-width,\n solid,\n $direction\n );\n } @else {\n @include colour-border(\"keyline-dark\", borders.$thick-border-width, solid);\n }\n}\n\n@mixin thick-keyline-accent($direction: \"\") {\n @if $direction != \"\" {\n @include colour-border(\n \"accent-border\",\n borders.$thick-border-width,\n solid,\n $direction\n );\n } @else {\n @include colour-border(\"accent-border\", borders.$thick-border-width, solid);\n }\n}\n\n@mixin thick-keyline-error($direction: \"\") {\n @if $direction != \"\" {\n @include colour-border(\n \"form-error-border\",\n borders.$thick-border-width,\n solid,\n $direction\n );\n } @else {\n @include colour-border(\n \"form-error-border\",\n borders.$thick-border-width,\n solid\n );\n }\n}\n\n@mixin thick-keyline-brand($direction: \"\", $brandColour) {\n @if $direction != \"\" {\n border-#{$direction}: borders.$thick-border-width\n #{brand-colour($brandColour)}\n solid;\n } @else {\n border: borders.$thick-border-width #{brand-colour($brandColour)} solid;\n }\n}\n\n// Use light theme colours (except for \"form-error-border\")\n%always-light {\n @include colour-css-vars(\"form-error-border\");\n\n @media (prefers-contrast: more) {\n @include colour-css-vars-high-contrast(\"form-error-border\");\n }\n}\n\n@mixin always-light {\n @extend %always-light;\n}\n\n%contrast {\n --background: var(--contrast-background);\n --font-base: var(--contrast-font-base);\n --font-dark: var(--contrast-font-dark);\n --font-light: var(--contrast-font-light);\n --icon-light: var(--contrast-icon-light);\n --link: var(--contrast-link);\n --link-visited: var(--contrast-link-visited);\n --keyline: var(--contrast-keyline);\n --keyline-dark: var(--contrast-keyline-dark);\n --button-text: var(--contrast-button-text);\n --button-background: var(--contrast-button-background);\n --button-hover-text: var(--contrast-button-hover-text);\n --button-hover-background: var(--contrast-button-hover-background);\n --accent-list-marker: var(--accent-border);\n // --accent-list-marker: var(--font-base);\n\n @include colour-background(\"background\");\n\n @include colour-font(\"font-base\");\n}\n\n@mixin contrast {\n @extend %contrast;\n}\n\n%contrast-on-mobile {\n @include media.on-mobile {\n --background: var(--contrast-background);\n --font-base: var(--contrast-font-base);\n --font-dark: var(--contrast-font-dark);\n --font-light: var(--contrast-font-light);\n --icon-light: var(--contrast-icon-light);\n --link: var(--contrast-link);\n --link-visited: var(--contrast-link-visited);\n --keyline: var(--contrast-keyline);\n --keyline-dark: var(--contrast-keyline-dark);\n --button-text: var(--contrast-button-text);\n --button-background: var(--contrast-button-background);\n --button-hover-text: var(--contrast-button-hover-text);\n --button-hover-background: var(--contrast-button-hover-background);\n --accent-list-marker: var(--accent-border);\n // --accent-list-marker: var(--font-base);\n\n @include colour-background(\"background\");\n\n @include colour-font(\"font-base\");\n }\n}\n\n@mixin contrast-on-mobile {\n @extend %contrast-on-mobile;\n}\n\n%tint {\n --background: var(--background-tint);\n\n @include colour-background(\"background\");\n\n @include colour-font(\"font-base\");\n}\n\n@mixin tint {\n @extend %tint;\n}\n\n%accent {\n --background: var(--accent-background);\n --font-base: var(--accent-font-base);\n --font-dark: var(--accent-font-dark);\n --font-light: var(--accent-font-light);\n --icon-light: var(--accent-icon-light);\n --link: var(--accent-link);\n --link-visited: var(--accent-link);\n --keyline: var(--accent-keyline);\n --keyline-dark: var(--accent-keyline-dark);\n --accent-list-marker: var(--accent-font-base);\n --accent-border: var(--accent-font-dark);\n --button-text: var(--accent-button-text);\n --button-background: var(--accent-button-background);\n --button-hover-text: var(--accent-button-hover-text);\n --button-hover-background: var(--accent-button-hover-background);\n\n @include colour-background(\"background\");\n\n @include colour-font(\"font-base\");\n}\n\n@mixin accent {\n @extend %accent;\n}\n\n%accent-light {\n --background: var(--accent-background-light);\n --font-base: #{map.get(colour.$colour-palette-default, \"font-base\")};\n --font-dark: #{map.get(colour.$colour-palette-default, \"font-dark\")};\n --font-light: #{map.get(colour.$colour-palette-default, \"font-light\")};\n --icon-light: #{map.get(colour.$colour-palette-default, \"icon-light\")};\n --keyline: #{map.get(colour.$colour-palette-default, \"keyline\")};\n --keyline-dark: #{map.get(colour.$colour-palette-default, \"keyline-dark\")};\n --button-text: #{map.get(colour.$colour-palette-default, \"button-text\")};\n --button-background: #{map.get(\n colour.$colour-palette-default,\n \"button-background\"\n )};\n --button-hover-text: #{map.get(\n colour.$colour-palette-default,\n \"button-hover-text\"\n )};\n --button-hover-background: #{map.get(\n colour.$colour-palette-default,\n \"button-hover-background\"\n )};\n --accent-border: var(--font-base);\n --accent-list-marker: var(--font-base);\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%yellow-accent {\n --accent-background: #{colour.brand-colour(\"yellow\")} !important;\n --accent-background-light: #{colour.brand-colour(\"cream\")} !important;\n --accent-border: #{colour.brand-colour(\"yellow\")} !important;\n --accent-list-marker: #{colour.brand-colour(\"brown\")} !important;\n --accent-font-base: #{colour.brand-colour(\"black\")} !important;\n --accent-font-dark: #{colour.brand-colour(\"black\")} !important;\n --accent-font-light: #{colour.brand-colour(\"black\", 0.7)} !important;\n --accent-icon-light: #{colour.brand-colour(\"black\", 0.45)} !important;\n --accent-link: #{colour.brand-colour(\"black\")} !important;\n --accent-link-visited: #{colour.brand-colour(\"black\")} !important;\n --accent-keyline: #{colour.brand-colour(\"black\", 0.5)} !important;\n --accent-keyline-dark: #{colour.brand-colour(\"black\", 0.8)} !important;\n --button-accented-text: #{colour.brand-colour(\"white\")} !important;\n --button-accented-background: #{colour.brand-colour(\"brown\")} !important;\n}\n\n@mixin yellow-accent {\n @extend %yellow-accent;\n}\n\n%accent-lighter-text {\n --accent-font-base: #{colour.brand-colour(\"white\")} !important;\n --accent-font-dark: #{colour.brand-colour(\"white\")} !important;\n --accent-font-light: #{colour.brand-colour(\"white\", 0.7)} !important;\n --accent-icon-light: #{colour.brand-colour(\"white\", 0.45)} !important;\n --accent-link: #{colour.brand-colour(\"white\")} !important;\n --accent-link-visited: #{colour.brand-colour(\"white\")} !important;\n --accent-keyline: #{colour.brand-colour(\"white\", 0.5)} !important;\n --accent-keyline-dark: #{colour.brand-colour(\"white\", 0.8)} !important;\n --button-accented-text: #{colour.brand-colour(\"white\")} !important;\n}\n\n%black-accent {\n --accent-background: #{colour.brand-colour(\"black\")} !important;\n --accent-background-light: #{colour.brand-colour(\"light-grey\")} !important;\n --accent-border: #{colour.brand-colour(\"black\")} !important;\n --accent-list-marker: #{colour.brand-colour(\"grey\")} !important;\n --button-accented-text: #{colour.brand-colour(\"black\")} !important;\n --button-accented-background: #{colour.brand-colour(\"grey\")} !important;\n}\n\n@mixin black-accent {\n @extend %accent-lighter-text;\n @extend %black-accent;\n}\n\n%pink-accent {\n --accent-background: #{colour.brand-colour(\"maroon\")} !important;\n --accent-background-light: #{colour.brand-colour(\"pastel-pink\")} !important;\n --accent-border: #{colour.brand-colour(\"pink\")} !important;\n --accent-list-marker: #{colour.brand-colour(\"pink\")} !important;\n --button-accented-background: #{colour.brand-colour(\"maroon\")} !important;\n}\n\n@mixin pink-accent {\n @extend %accent-lighter-text;\n @extend %pink-accent;\n}\n\n%orange-accent {\n --accent-background: #{colour.brand-colour(\"chestnut\")} !important;\n --accent-background-light: #{colour.brand-colour(\"pastel-orange\")} !important;\n --accent-border: #{colour.brand-colour(\"orange\")} !important;\n --accent-list-marker: #{colour.brand-colour(\"orange\")} !important;\n --button-accented-background: #{colour.brand-colour(\"chestnut\")} !important;\n}\n\n@mixin orange-accent {\n @extend %accent-lighter-text;\n @extend %orange-accent;\n}\n\n%green-accent {\n --accent-background: #{colour.brand-colour(\"forest\")} !important;\n --accent-background-light: #{colour.brand-colour(\"pastel-green\")} !important;\n --accent-border: #{colour.brand-colour(\"green\")} !important;\n --accent-list-marker: #{colour.brand-colour(\"green\")} !important;\n --button-accented-background: #{colour.brand-colour(\"forest\")} !important;\n}\n\n@mixin green-accent {\n @extend %accent-lighter-text;\n @extend %green-accent;\n}\n\n%blue-accent {\n --accent-background: #{colour.brand-colour(\"navy\")} !important;\n --accent-background-light: #{colour.brand-colour(\"pastel-blue\")} !important;\n --accent-border: #{colour.brand-colour(\"blue\")} !important;\n --accent-list-marker: #{colour.brand-colour(\"blue\")} !important;\n --button-accented-background: #{colour.brand-colour(\"navy\")} !important;\n}\n\n@mixin blue-accent {\n @extend %accent-lighter-text;\n @extend %blue-accent;\n}\n\n@mixin on-high-contrast {\n @media (prefers-contrast: more) {\n @content;\n }\n}\n\n@mixin on-forced-colours {\n @media (forced-colors: active) {\n @content;\n }\n}\n\n@mixin on-high-contrast-and-forced-colours {\n @include on-forced-colours {\n @content;\n }\n\n @include on-high-contrast {\n @content;\n }\n}\n","@use \"../../variables/a11y\";\n@use \"../../tools/colour\";\n@use \"../../tools/media\";\n@use \"../../tools/spacing\";\n@use \"../../tools/typography\";\n\n.tna-sidebar {\n width: 100%;\n\n @include typography.font-size(16);\n\n &__heading {\n }\n\n &__items {\n padding-top: max(spacing.space(0.5), #{a11y.$focus-outline-padding});\n }\n\n &__item {\n }\n\n &__items,\n &__item-children {\n display: flex;\n flex-direction: column;\n gap: spacing.space(0.25);\n\n list-style: none;\n }\n\n &__item-children {\n }\n\n &__item-child {\n }\n\n &__link {\n }\n\n /*\n * ------------------------------------------\n * Contents\n * ------------------------------------------\n */\n &--contents &__item-children {\n margin-top: spacing.space(0.25);\n padding-left: spacing.space(2);\n\n @include colour.thick-keyline(\"left\");\n }\n\n /*\n * ------------------------------------------\n * Sections\n * ------------------------------------------\n */\n &--sections &__link {\n padding: spacing.space(0.125) spacing.space(0.5);\n\n display: block;\n }\n\n &--sections &__item--current &__link {\n @include colour.accent;\n }\n\n /*\n * ------------------------------------------\n * Pages\n * ------------------------------------------\n */\n &--pages &__item--current {\n padding-left: spacing.space(0.75);\n\n @include colour.thick-keyline-accent(\"left\");\n }\n\n &--pages &__item--current > &__link {\n @include typography.main-font-weight-bold;\n }\n\n &--pages &__item-children {\n gap: 0;\n }\n\n /*\n * ------------------------------------------\n * Dashed items\n * ------------------------------------------\n */\n &--contents &__items,\n &--pages &__item-children {\n padding-left: spacing.space(1.5);\n }\n\n &--contents &__item,\n &--contents &__item-child,\n &--pages &__item-child {\n list-style: \"— \" outside;\n\n &::marker {\n @include colour.colour-font(\"font-light\");\n }\n }\n\n /*\n * ------------------------------------------\n * Sticky\n * ------------------------------------------\n */\n &--sticky {\n max-height: calc(100vh - spacing.space(0.5));\n max-height: calc(100dvh - spacing.space(0.5));\n\n display: flex;\n flex-direction: column;\n box-sizing: border-box;\n\n position: sticky;\n top: spacing.space(0.5);\n }\n\n &--sticky &__items {\n width: 100%;\n margin: 0;\n padding-right: a11y.$focus-outline-padding;\n padding-bottom: a11y.$focus-outline-padding;\n padding-left: a11y.$focus-outline-padding;\n\n box-sizing: content-box;\n overflow-y: auto;\n\n position: relative;\n left: -#{a11y.$focus-outline-padding};\n flex: 1;\n }\n}\n","@use \"sass:math\";\n@use \"../variables/typography\";\n@use \"colour\";\n@use \"media\";\n\n@mixin font-size($font-size-px) {\n font-size: #{math.div($font-size-px, typography.$relative-1rem-px)}rem;\n}\n\n@mixin relative-font-size($font-size-px) {\n @warn \"relative-font-size() will soon be deprecated in favour of font-size().\";\n @include font-size($font-size-px);\n}\n\n@mixin main-font-weight {\n font-weight: typography.$main-font-weight;\n}\n\n@mixin main-font-weight-medium {\n font-weight: typography.$main-font-weight-medium;\n}\n\n@mixin main-font-weight-bold {\n font-weight: typography.$main-font-weight-bold;\n}\n\n@mixin main-font($bold: false) {\n font-family: typography.$main-font-family;\n font-style: normal;\n font-optical-sizing: auto;\n font-variation-settings: \"wdth\" 100;\n @if $bold {\n @include main-font-weight-bold;\n } @else {\n @include main-font-weight;\n }\n}\n\n@mixin heading-font {\n font-family: typography.$heading-font-family;\n font-weight: typography.$heading-font-weight;\n}\n\n@mixin detail-font($bold: false) {\n font-family: typography.$detail-font-family;\n font-style: normal;\n font-optical-sizing: auto;\n @if $bold {\n font-weight: typography.$detail-font-weight-bold;\n } @else {\n font-weight: typography.$detail-font-weight;\n }\n}\n\n@mixin detail-font-small {\n @include detail-font;\n @include font-size(14);\n line-height: 1.1;\n text-transform: uppercase;\n}\n\n@mixin interacted-text-decoration {\n text-decoration: underline;\n text-decoration-thickness: typography.$interactive-text-decoration-thickness;\n}\n\n@mixin heading-generator(\n $font-size-default,\n $font-size-medium,\n $font-size-small,\n $font-size-tiny,\n $line-height\n) {\n $small-and-tiny-identical: $font-size-small == $font-size-tiny;\n $medium-small-and-tiny-identical: $font-size-medium == $font-size-small and\n $small-and-tiny-identical;\n $all-identical: $font-size-default == $font-size-medium and\n $medium-small-and-tiny-identical and $small-and-tiny-identical;\n line-height: $line-height;\n @include font-size($font-size-default);\n\n @if $all-identical != true {\n @if $medium-small-and-tiny-identical != true {\n @include media.on-medium {\n @include font-size($font-size-medium);\n }\n\n @if $small-and-tiny-identical != true {\n @include media.on-small {\n @include font-size($font-size-small);\n }\n\n @include media.on-tiny {\n @include font-size($font-size-tiny);\n }\n } @else {\n @include media.on-mobile {\n @include font-size($font-size-small);\n }\n }\n } @else {\n @include media.on-smaller-than-large {\n @include font-size($font-size-medium);\n }\n }\n }\n}\n","/*\n * ------------------------------------------\n * The typefaces, sizes and spacings that are\n * defined in this file have been selected to\n * ensure 100% match with the latest National\n * Archives brand guidelines - avoid changing\n * or overwriting any of these values without\n * signing off with the Digital Services team\n * first\n * ------------------------------------------\n */\n\n$relative-1rem-px: 16; // 16px = 1rem\n\n/*\n * ------------------------------------------\n * When true, use the included font files for\n * Open Sans and Roboto Mono, rather than the\n * versions hosted by Google Fonts\n * ------------------------------------------\n */\n$use-local-fonts: false !default;\n\n$body-font-size-px: 18 !default;\n$body-font-size-px-mobile: 17 !default;\n$body-line-height: 1.75 !default;\n\n$interactive-text-decoration-thickness: 3.5px !default;\n\n$main-font-family-name: \"Open Sans\" !default;\n$main-font-family:\n #{$main-font-family-name},\n sans-serif;\n$main-font-weight: 400 !default;\n$main-font-weight-medium: 600 !default;\n$main-font-weight-bold: 700 !default;\n$main-font-file: \"OpenSans-Regular.ttf\" !default;\n$main-font-file-medium: \"OpenSans-SemiBold.ttf\" !default;\n$main-font-file-bold: \"OpenSans-Bold.ttf\" !default;\n\n/*\n * ------------------------------------------\n * To use Supria Sans Condensed (which is the\n * approved heading typeface for The National\n * Archives), you need to obtain a licence to\n * properly embed the CSS files with the font\n * definitions in your service - check with a\n * member of the Digital Services team on how\n * to get a licence\n * ------------------------------------------\n */\n$heading-font-family-name: \"supria-sans-condensed\" !default;\n$heading-font-family:\n #{$heading-font-family-name},\n \"Arial Narrow\",\n sans-serif;\n$heading-font-weight: 500 !default;\n\n/*\n * ------------------------------------------\n * The detail font should be a monospace font\n * and is used for chips, supertitles as well\n * as the date search component\n * ------------------------------------------\n */\n$detail-font-family-name: \"Roboto Mono\" !default;\n$detail-font-family:\n #{$detail-font-family-name},\n monospace;\n$detail-font-weight: 400 !default;\n$detail-font-weight-bold: 500 !default;\n$detail-font-file: \"RobotoMono-Regular.ttf\" !default;\n$detail-font-file-bold: \"RobotoMono-Medium.ttf\" !default;\n\n$heading-xl-font-size-default: 64 !default;\n$heading-xl-font-size-medium: 48 !default;\n$heading-xl-font-size-small: 36 !default;\n$heading-xl-font-size-tiny: $heading-xl-font-size-small !default;\n$heading-xl-line-height: 1.1 !default;\n\n$heading-l-font-size-default: 36 !default;\n$heading-l-font-size-medium: 30 !default;\n$heading-l-font-size-small: 28 !default;\n$heading-l-font-size-tiny: 25 !default;\n$heading-l-line-height: 1.3 !default;\n\n$heading-m-font-size-default: 22 !default;\n$heading-m-font-size-medium: 21 !default;\n$heading-m-font-size-small: 20 !default;\n$heading-m-font-size-tiny: 19 !default;\n$heading-m-line-height: 1.6 !default;\n\n$heading-s-font-size-default: 18 !default;\n$heading-s-font-size-medium: $heading-s-font-size-default !default;\n$heading-s-font-size-small: $heading-s-font-size-default !default;\n$heading-s-font-size-tiny: $heading-s-font-size-default !default;\n$heading-s-line-height: 1.6 !default;\n","$focus-outline-width: 5px !default;\n$focus-outline-offset: 2px !default;\n$focus-outline-padding: $focus-outline-width + $focus-outline-offset;\n"]}
|
|
1
|
+
{"version":3,"sourceRoot":"","sources":["../../../../src/nationalarchives/tools/_colour.scss","../../../../src/nationalarchives/components/sidebar/sidebar.scss","../../../../src/nationalarchives/tools/_typography.scss","../../../../src/nationalarchives/variables/_typography.scss","../../../../src/nationalarchives/variables/_a11y.scss"],"names":[],"mappings":"CA2PA,sEACE,uCACA,qCACA,qCACA,uCACA,uCACA,2BACA,mCACA,iCACA,2CACA,8CACA,yCACA,yCACA,qDACA,qDACA,iEApNA,4CAJA,gCC5CF,aACE,WCDA,eDQA,oBACE,yBAMF,gDAEE,aACA,sBACA,QAEA,gBAiBF,mDACE,eACA,kBDwBE,yDCdJ,0CACE,gBAEA,cAYF,gDACE,kBDFE,+DCOJ,mECtDA,YCYsB,IF8CtB,gDACE,MAQF,2FAEE,kBAGF,uIAGE,yBAEA,+JDlDF,yCC4DA,qBACE,iBACA,kBAEA,aACA,sBACA,sBAEA,gBACA,MAGF,yCACE,SACA,eG1HoB,IH4HpB,gBAEA,OAGF,2HAEE,uBACA,cGpIoB,IHqIpB,aGrIoB,IHuIpB,uBAEA,kBACA","file":"sidebar.css","sourcesContent":["@use \"sass:list\";\n@use \"sass:map\";\n@use \"../variables/borders\";\n@use \"../variables/colour\";\n@use \"../tools/media\";\n\n@function brand-colour($colour, $opacity: 1) {\n @return colour.brand-colour($colour, $opacity);\n}\n\n@mixin colour-css-vars($excludes...) {\n @each $name, $value in colour.$colour-palette-default {\n @if not list.index($excludes, $name) {\n --#{$name}: #{$value};\n }\n }\n}\n\n@mixin colour-css-vars-dark($excludes...) {\n @each $name, $value in colour.$colour-palette-dark {\n @if not list.index($excludes, $name) {\n --#{$name}: #{$value};\n }\n }\n}\n\n@mixin colour-css-vars-high-contrast($excludes...) {\n @each $name, $value in colour.$colour-palette-high-contrast {\n @if not list.index($excludes, $name) {\n --#{$name}: #{$value};\n }\n }\n}\n\n@mixin colour-css-vars-high-contrast-dark($excludes...) {\n @each $name, $value in colour.$colour-palette-high-contrast-dark {\n @if not list.index($excludes, $name) {\n --#{$name}: #{$value};\n }\n }\n}\n\n@function colour-var($colour) {\n @return var(\n --#{$colour},\n #{map.get(colour.$colour-palette-default, $colour)}\n );\n}\n\n@mixin colour-font($colour, $important: false) {\n color: colour-var($colour) if($important, !important, null);\n}\n\n@mixin colour-background($colour, $important: false) {\n background-color: colour-var($colour) if($important, !important, null);\n}\n\n@mixin colour-background-brand($brandColour, $important: false) {\n background-color: #{brand-colour($brandColour)} if($important, !important, null);\n}\n\n@mixin colour-border(\n $colour,\n $width: \"\",\n $style: solid,\n $direction: \"\",\n $important: false\n) {\n @if $direction != \"\" {\n @if $width != \"\" {\n border-#{$direction}: $width\n colour-var($colour)\n $style\n if($important, !important, null);\n } @else {\n border-#{$direction}-color: colour-var($colour)\n if($important, !important, null);\n }\n } @else {\n @if $width != \"\" {\n border: $width\n colour-var($colour)\n $style\n if($important, !important, null);\n } @else {\n border-color: var(\n --#{$colour},\n #{map.get(colour.$colour-palette-default, $colour)}\n )\n if($important, !important, null);\n }\n }\n}\n\n@mixin colour-outline($colour, $width: \"\", $style: solid, $important: false) {\n @if $width != \"\" {\n outline: $width colour-var($colour) $style if($important, !important, null);\n } @else {\n outline-color: colour-var($colour) if($important, !important, null);\n }\n}\n\n@mixin colour-fill($colour, $important: false) {\n fill: colour-var($colour) if($important, !important, null);\n}\n\n@mixin thick-keyline($direction: \"\") {\n @if $direction != \"\" {\n @include colour-border(\n \"keyline\",\n borders.$thick-border-width,\n solid,\n $direction\n );\n } @else {\n @include colour-border(\"keyline\", borders.$thick-border-width, solid);\n }\n}\n\n@mixin thick-keyline-dark($direction: \"\") {\n @if $direction != \"\" {\n @include colour-border(\n \"keyline-dark\",\n borders.$thick-border-width,\n solid,\n $direction\n );\n } @else {\n @include colour-border(\"keyline-dark\", borders.$thick-border-width, solid);\n }\n}\n\n@mixin thick-keyline-accent($direction: \"\") {\n @if $direction != \"\" {\n @include colour-border(\n \"accent-border\",\n borders.$thick-border-width,\n solid,\n $direction\n );\n } @else {\n @include colour-border(\"accent-border\", borders.$thick-border-width, solid);\n }\n}\n\n@mixin thick-keyline-error($direction: \"\") {\n @if $direction != \"\" {\n @include colour-border(\n \"form-error-border\",\n borders.$thick-border-width,\n solid,\n $direction\n );\n } @else {\n @include colour-border(\n \"form-error-border\",\n borders.$thick-border-width,\n solid\n );\n }\n}\n\n@mixin thick-keyline-brand($direction: \"\", $brandColour) {\n @if $direction != \"\" {\n border-#{$direction}: borders.$thick-border-width\n #{brand-colour($brandColour)}\n solid;\n } @else {\n border: borders.$thick-border-width #{brand-colour($brandColour)} solid;\n }\n}\n\n// Use light theme colours (except for \"form-error-border\")\n%always-light {\n @include colour-css-vars(\"form-error-border\");\n\n @media (prefers-contrast: more) {\n @include colour-css-vars-high-contrast(\"form-error-border\");\n }\n}\n\n@mixin always-light {\n @extend %always-light;\n}\n\n%contrast {\n --background: var(--contrast-background);\n --font-base: var(--contrast-font-base);\n --font-dark: var(--contrast-font-dark);\n --font-light: var(--contrast-font-light);\n --icon-light: var(--contrast-icon-light);\n --link: var(--contrast-link);\n --link-visited: var(--contrast-link-visited);\n --keyline: var(--contrast-keyline);\n --keyline-dark: var(--contrast-keyline-dark);\n --button-text: var(--contrast-button-text);\n --button-background: var(--contrast-button-background);\n --button-hover-text: var(--contrast-button-hover-text);\n --button-hover-background: var(--contrast-button-hover-background);\n --accent-list-marker: var(--accent-border);\n // --accent-list-marker: var(--font-base);\n\n @include colour-background(\"background\");\n\n @include colour-font(\"font-base\");\n}\n\n@mixin contrast {\n @extend %contrast;\n}\n\n%contrast-on-mobile {\n @include media.on-mobile {\n --background: var(--contrast-background);\n --font-base: var(--contrast-font-base);\n --font-dark: var(--contrast-font-dark);\n --font-light: var(--contrast-font-light);\n --icon-light: var(--contrast-icon-light);\n --link: var(--contrast-link);\n --link-visited: var(--contrast-link-visited);\n --keyline: var(--contrast-keyline);\n --keyline-dark: var(--contrast-keyline-dark);\n --button-text: var(--contrast-button-text);\n --button-background: var(--contrast-button-background);\n --button-hover-text: var(--contrast-button-hover-text);\n --button-hover-background: var(--contrast-button-hover-background);\n --accent-list-marker: var(--accent-border);\n // --accent-list-marker: var(--font-base);\n\n @include colour-background(\"background\");\n\n @include colour-font(\"font-base\");\n }\n}\n\n@mixin contrast-on-mobile {\n @extend %contrast-on-mobile;\n}\n\n%tint {\n --background: var(--background-tint);\n\n @include colour-background(\"background\");\n\n @include colour-font(\"font-base\");\n}\n\n@mixin tint {\n @extend %tint;\n}\n\n%accent {\n --background: var(--accent-background);\n --font-base: var(--accent-font-base);\n --font-dark: var(--accent-font-dark);\n --font-light: var(--accent-font-light);\n --icon-light: var(--accent-icon-light);\n --link: var(--accent-link);\n --link-visited: var(--accent-link);\n --keyline: var(--accent-keyline);\n --keyline-dark: var(--accent-keyline-dark);\n --accent-list-marker: var(--accent-font-base);\n --accent-border: var(--accent-font-dark);\n --button-text: var(--accent-button-text);\n --button-background: var(--accent-button-background);\n --button-hover-text: var(--accent-button-hover-text);\n --button-hover-background: var(--accent-button-hover-background);\n\n @include colour-background(\"background\");\n\n @include colour-font(\"font-base\");\n}\n\n@mixin accent {\n @extend %accent;\n}\n\n%accent-light {\n --background: var(--accent-background-light);\n --font-base: #{map.get(colour.$colour-palette-default, \"font-base\")};\n --font-dark: #{map.get(colour.$colour-palette-default, \"font-dark\")};\n --font-light: #{map.get(colour.$colour-palette-default, \"font-light\")};\n --icon-light: #{map.get(colour.$colour-palette-default, \"icon-light\")};\n --keyline: #{map.get(colour.$colour-palette-default, \"keyline\")};\n --keyline-dark: #{map.get(colour.$colour-palette-default, \"keyline-dark\")};\n --button-text: #{map.get(colour.$colour-palette-default, \"button-text\")};\n --button-background: #{map.get(\n colour.$colour-palette-default,\n \"button-background\"\n )};\n --button-hover-text: #{map.get(\n colour.$colour-palette-default,\n \"button-hover-text\"\n )};\n --button-hover-background: #{map.get(\n colour.$colour-palette-default,\n \"button-hover-background\"\n )};\n --accent-border: var(--font-base);\n --accent-list-marker: var(--font-base);\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%yellow-accent {\n --accent-background: #{colour.brand-colour(\"yellow\")} !important;\n --accent-background-light: #{colour.brand-colour(\"cream\")} !important;\n --accent-border: #{colour.brand-colour(\"yellow\")} !important;\n --accent-list-marker: #{colour.brand-colour(\"brown\")} !important;\n --accent-font-base: #{colour.brand-colour(\"black\")} !important;\n --accent-font-dark: #{colour.brand-colour(\"black\")} !important;\n --accent-font-light: #{colour.brand-colour(\"black\", 0.7)} !important;\n --accent-icon-light: #{colour.brand-colour(\"black\", 0.45)} !important;\n --accent-link: #{colour.brand-colour(\"black\")} !important;\n --accent-link-visited: #{colour.brand-colour(\"black\")} !important;\n --accent-keyline: #{colour.brand-colour(\"black\", 0.5)} !important;\n --accent-keyline-dark: #{colour.brand-colour(\"black\", 0.8)} !important;\n --button-accented-text: #{colour.brand-colour(\"white\")} !important;\n --button-accented-background: #{colour.brand-colour(\"brown\")} !important;\n}\n\n@mixin yellow-accent {\n @extend %yellow-accent;\n}\n\n%accent-lighter-text {\n --accent-font-base: #{colour.brand-colour(\"white\")} !important;\n --accent-font-dark: #{colour.brand-colour(\"white\")} !important;\n --accent-font-light: #{colour.brand-colour(\"white\", 0.7)} !important;\n --accent-icon-light: #{colour.brand-colour(\"white\", 0.45)} !important;\n --accent-link: #{colour.brand-colour(\"white\")} !important;\n --accent-link-visited: #{colour.brand-colour(\"white\")} !important;\n --accent-keyline: #{colour.brand-colour(\"white\", 0.5)} !important;\n --accent-keyline-dark: #{colour.brand-colour(\"white\", 0.8)} !important;\n --button-accented-text: #{colour.brand-colour(\"white\")} !important;\n}\n\n%black-accent {\n --accent-background: #{colour.brand-colour(\"black\")} !important;\n --accent-background-light: #{colour.brand-colour(\"light-grey\")} !important;\n --accent-border: #{colour.brand-colour(\"black\")} !important;\n --accent-list-marker: #{colour.brand-colour(\"grey\")} !important;\n --button-accented-text: #{colour.brand-colour(\"black\")} !important;\n --button-accented-background: #{colour.brand-colour(\"grey\")} !important;\n}\n\n@mixin black-accent {\n @extend %accent-lighter-text;\n @extend %black-accent;\n}\n\n%pink-accent {\n --accent-background: #{colour.brand-colour(\"maroon\")} !important;\n --accent-background-light: #{colour.brand-colour(\"pastel-pink\")} !important;\n --accent-border: #{colour.brand-colour(\"pink\")} !important;\n --accent-list-marker: #{colour.brand-colour(\"pink\")} !important;\n --button-accented-background: #{colour.brand-colour(\"maroon\")} !important;\n}\n\n@mixin pink-accent {\n @extend %accent-lighter-text;\n @extend %pink-accent;\n}\n\n%orange-accent {\n --accent-background: #{colour.brand-colour(\"chestnut\")} !important;\n --accent-background-light: #{colour.brand-colour(\"pastel-orange\")} !important;\n --accent-border: #{colour.brand-colour(\"orange\")} !important;\n --accent-list-marker: #{colour.brand-colour(\"orange\")} !important;\n --button-accented-background: #{colour.brand-colour(\"chestnut\")} !important;\n}\n\n@mixin orange-accent {\n @extend %accent-lighter-text;\n @extend %orange-accent;\n}\n\n%green-accent {\n --accent-background: #{colour.brand-colour(\"forest\")} !important;\n --accent-background-light: #{colour.brand-colour(\"pastel-green\")} !important;\n --accent-border: #{colour.brand-colour(\"green\")} !important;\n --accent-list-marker: #{colour.brand-colour(\"green\")} !important;\n --button-accented-background: #{colour.brand-colour(\"forest\")} !important;\n}\n\n@mixin green-accent {\n @extend %accent-lighter-text;\n @extend %green-accent;\n}\n\n%blue-accent {\n --accent-background: #{colour.brand-colour(\"navy\")} !important;\n --accent-background-light: #{colour.brand-colour(\"pastel-blue\")} !important;\n --accent-border: #{colour.brand-colour(\"blue\")} !important;\n --accent-list-marker: #{colour.brand-colour(\"blue\")} !important;\n --button-accented-background: #{colour.brand-colour(\"navy\")} !important;\n}\n\n@mixin blue-accent {\n @extend %accent-lighter-text;\n @extend %blue-accent;\n}\n\n@mixin on-high-contrast {\n @media (prefers-contrast: more) {\n @content;\n }\n}\n\n@mixin on-forced-colours {\n @media (forced-colors: active) {\n @content;\n }\n}\n\n@mixin on-high-contrast-and-forced-colours {\n @include on-forced-colours {\n @content;\n }\n\n @include on-high-contrast {\n @content;\n }\n}\n","@use \"../../variables/a11y\";\n@use \"../../tools/colour\";\n@use \"../../tools/media\";\n@use \"../../tools/spacing\";\n@use \"../../tools/typography\";\n\n.tna-sidebar {\n width: 100%;\n\n @include typography.font-size(16);\n\n &__heading {\n }\n\n &__items {\n padding-top: max(spacing.space(0.5), #{a11y.$focus-outline-padding});\n }\n\n &__item {\n }\n\n &__items,\n &__item-children {\n display: flex;\n flex-direction: column;\n gap: spacing.space(0.25);\n\n list-style: none;\n }\n\n &__item-children {\n }\n\n &__item-child {\n }\n\n &__link {\n }\n\n /*\n * ------------------------------------------\n * Contents\n * ------------------------------------------\n */\n &--contents &__item-children {\n margin-top: spacing.space(0.25);\n padding-left: spacing.space(2);\n\n @include colour.thick-keyline(\"left\");\n }\n\n /*\n * ------------------------------------------\n * Sections\n * ------------------------------------------\n */\n &--sections &__link {\n padding: spacing.space(0.125) spacing.space(0.5);\n\n display: block;\n }\n\n &--sections &__item--current &__link {\n @include colour.accent;\n }\n\n /*\n * ------------------------------------------\n * Pages\n * ------------------------------------------\n */\n &--pages &__item--current {\n padding-left: spacing.space(0.75);\n\n @include colour.thick-keyline-accent(\"left\");\n }\n\n &--pages &__item--current > &__link {\n @include typography.main-font-weight-bold;\n }\n\n &--pages &__item-children {\n gap: 0;\n }\n\n /*\n * ------------------------------------------\n * Dashed items\n * ------------------------------------------\n */\n &--contents &__items,\n &--pages &__item-children {\n padding-left: spacing.space(1.5);\n }\n\n &--contents &__item,\n &--contents &__item-child,\n &--pages &__item-child {\n list-style: \"— \" outside;\n\n &::marker {\n @include colour.colour-font(\"font-light\");\n }\n }\n\n /*\n * ------------------------------------------\n * Sticky\n * ------------------------------------------\n */\n &--sticky {\n max-height: 100vh;\n max-height: 100dvh;\n\n display: flex;\n flex-direction: column;\n box-sizing: border-box;\n\n position: sticky;\n top: 0;\n }\n\n &--sticky &__items {\n margin: 0;\n padding-bottom: a11y.$focus-outline-padding;\n\n overflow-y: auto;\n\n flex: 1;\n }\n\n &--sticky#{&}--sections &__items,\n &--sticky#{&}--pages &__items {\n width: calc(100% - #{a11y.$focus-outline-padding});\n padding-right: a11y.$focus-outline-padding;\n padding-left: a11y.$focus-outline-padding;\n\n box-sizing: content-box;\n\n position: relative;\n left: -#{a11y.$focus-outline-padding};\n }\n}\n","@use \"sass:math\";\n@use \"../variables/typography\";\n@use \"colour\";\n@use \"media\";\n\n@mixin font-size($font-size-px) {\n font-size: #{math.div($font-size-px, typography.$relative-1rem-px)}rem;\n}\n\n@mixin relative-font-size($font-size-px) {\n @warn \"relative-font-size() will soon be deprecated in favour of font-size().\";\n @include font-size($font-size-px);\n}\n\n@mixin main-font-weight {\n font-weight: typography.$main-font-weight;\n}\n\n@mixin main-font-weight-medium {\n font-weight: typography.$main-font-weight-medium;\n}\n\n@mixin main-font-weight-bold {\n font-weight: typography.$main-font-weight-bold;\n}\n\n@mixin main-font($bold: false) {\n font-family: typography.$main-font-family;\n font-style: normal;\n font-optical-sizing: auto;\n font-variation-settings: \"wdth\" 100;\n @if $bold {\n @include main-font-weight-bold;\n } @else {\n @include main-font-weight;\n }\n}\n\n@mixin heading-font {\n font-family: typography.$heading-font-family;\n font-weight: typography.$heading-font-weight;\n}\n\n@mixin detail-font($bold: false) {\n font-family: typography.$detail-font-family;\n font-style: normal;\n font-optical-sizing: auto;\n @if $bold {\n font-weight: typography.$detail-font-weight-bold;\n } @else {\n font-weight: typography.$detail-font-weight;\n }\n}\n\n@mixin detail-font-small {\n @include detail-font;\n @include font-size(14);\n line-height: 1.1;\n text-transform: uppercase;\n}\n\n@mixin interacted-text-decoration {\n text-decoration: underline;\n text-decoration-thickness: typography.$interactive-text-decoration-thickness;\n}\n\n@mixin heading-generator(\n $font-size-default,\n $font-size-medium,\n $font-size-small,\n $font-size-tiny,\n $line-height\n) {\n $small-and-tiny-identical: $font-size-small == $font-size-tiny;\n $medium-small-and-tiny-identical: $font-size-medium == $font-size-small and\n $small-and-tiny-identical;\n $all-identical: $font-size-default == $font-size-medium and\n $medium-small-and-tiny-identical and $small-and-tiny-identical;\n line-height: $line-height;\n @include font-size($font-size-default);\n\n @if $all-identical != true {\n @if $medium-small-and-tiny-identical != true {\n @include media.on-medium {\n @include font-size($font-size-medium);\n }\n\n @if $small-and-tiny-identical != true {\n @include media.on-small {\n @include font-size($font-size-small);\n }\n\n @include media.on-tiny {\n @include font-size($font-size-tiny);\n }\n } @else {\n @include media.on-mobile {\n @include font-size($font-size-small);\n }\n }\n } @else {\n @include media.on-smaller-than-large {\n @include font-size($font-size-medium);\n }\n }\n }\n}\n","/*\n * ------------------------------------------\n * The typefaces, sizes and spacings that are\n * defined in this file have been selected to\n * ensure 100% match with the latest National\n * Archives brand guidelines - avoid changing\n * or overwriting any of these values without\n * signing off with the Digital Services team\n * first\n * ------------------------------------------\n */\n\n$relative-1rem-px: 16; // 16px = 1rem\n\n/*\n * ------------------------------------------\n * When true, use the included font files for\n * Open Sans and Roboto Mono, rather than the\n * versions hosted by Google Fonts\n * ------------------------------------------\n */\n$use-local-fonts: false !default;\n\n$body-font-size-px: 18 !default;\n$body-font-size-px-mobile: 17 !default;\n$body-line-height: 1.75 !default;\n\n$interactive-text-decoration-thickness: 3.5px !default;\n\n$main-font-family-name: \"Open Sans\" !default;\n$main-font-family:\n #{$main-font-family-name},\n sans-serif;\n$main-font-weight: 400 !default;\n$main-font-weight-medium: 600 !default;\n$main-font-weight-bold: 700 !default;\n$main-font-file: \"OpenSans-Regular.ttf\" !default;\n$main-font-file-medium: \"OpenSans-SemiBold.ttf\" !default;\n$main-font-file-bold: \"OpenSans-Bold.ttf\" !default;\n\n/*\n * ------------------------------------------\n * To use Supria Sans Condensed (which is the\n * approved heading typeface for The National\n * Archives), you need to obtain a licence to\n * properly embed the CSS files with the font\n * definitions in your service - check with a\n * member of the Digital Services team on how\n * to get a licence\n * ------------------------------------------\n */\n$heading-font-family-name: \"supria-sans-condensed\" !default;\n$heading-font-family:\n #{$heading-font-family-name},\n \"Arial Narrow\",\n sans-serif;\n$heading-font-weight: 500 !default;\n\n/*\n * ------------------------------------------\n * The detail font should be a monospace font\n * and is used for chips, supertitles as well\n * as the date search component\n * ------------------------------------------\n */\n$detail-font-family-name: \"Roboto Mono\" !default;\n$detail-font-family:\n #{$detail-font-family-name},\n monospace;\n$detail-font-weight: 400 !default;\n$detail-font-weight-bold: 500 !default;\n$detail-font-file: \"RobotoMono-Regular.ttf\" !default;\n$detail-font-file-bold: \"RobotoMono-Medium.ttf\" !default;\n\n$heading-xl-font-size-default: 64 !default;\n$heading-xl-font-size-medium: 48 !default;\n$heading-xl-font-size-small: 36 !default;\n$heading-xl-font-size-tiny: $heading-xl-font-size-small !default;\n$heading-xl-line-height: 1.1 !default;\n\n$heading-l-font-size-default: 36 !default;\n$heading-l-font-size-medium: 30 !default;\n$heading-l-font-size-small: 28 !default;\n$heading-l-font-size-tiny: 25 !default;\n$heading-l-line-height: 1.3 !default;\n\n$heading-m-font-size-default: 22 !default;\n$heading-m-font-size-medium: 21 !default;\n$heading-m-font-size-small: 20 !default;\n$heading-m-font-size-tiny: 19 !default;\n$heading-m-line-height: 1.6 !default;\n\n$heading-s-font-size-default: 18 !default;\n$heading-s-font-size-medium: $heading-s-font-size-default !default;\n$heading-s-font-size-small: $heading-s-font-size-default !default;\n$heading-s-font-size-tiny: $heading-s-font-size-default !default;\n$heading-s-line-height: 1.6 !default;\n","$focus-outline-width: 5px !default;\n$focus-outline-offset: 2px !default;\n$focus-outline-padding: $focus-outline-width + $focus-outline-offset;\n"]}
|
|
@@ -109,29 +109,35 @@
|
|
|
109
109
|
* ------------------------------------------
|
|
110
110
|
*/
|
|
111
111
|
&--sticky {
|
|
112
|
-
max-height:
|
|
113
|
-
max-height:
|
|
112
|
+
max-height: 100vh;
|
|
113
|
+
max-height: 100dvh;
|
|
114
114
|
|
|
115
115
|
display: flex;
|
|
116
116
|
flex-direction: column;
|
|
117
117
|
box-sizing: border-box;
|
|
118
118
|
|
|
119
119
|
position: sticky;
|
|
120
|
-
top:
|
|
120
|
+
top: 0;
|
|
121
121
|
}
|
|
122
122
|
|
|
123
123
|
&--sticky &__items {
|
|
124
|
-
width: 100%;
|
|
125
124
|
margin: 0;
|
|
126
|
-
padding-right: a11y.$focus-outline-padding;
|
|
127
125
|
padding-bottom: a11y.$focus-outline-padding;
|
|
126
|
+
|
|
127
|
+
overflow-y: auto;
|
|
128
|
+
|
|
129
|
+
flex: 1;
|
|
130
|
+
}
|
|
131
|
+
|
|
132
|
+
&--sticky#{&}--sections &__items,
|
|
133
|
+
&--sticky#{&}--pages &__items {
|
|
134
|
+
width: calc(100% - #{a11y.$focus-outline-padding});
|
|
135
|
+
padding-right: a11y.$focus-outline-padding;
|
|
128
136
|
padding-left: a11y.$focus-outline-padding;
|
|
129
137
|
|
|
130
138
|
box-sizing: content-box;
|
|
131
|
-
overflow-y: auto;
|
|
132
139
|
|
|
133
140
|
position: relative;
|
|
134
141
|
left: -#{a11y.$focus-outline-padding};
|
|
135
|
-
flex: 1;
|
|
136
142
|
}
|
|
137
143
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
.tna-skip-link{width:1px !important;height:1px !important;margin:0 !important;padding:0 !important;display:block !important;overflow:hidden !important;position:absolute !important;left:-100vw;white-space:nowrap !important;clip:rect(0 0 0 0) !important;-webkit-clip-path:inset(50%) !important;clip-path:inset(50%) !important}.tna-skip-link,.tna-skip-link:link,.tna-skip-link:visited{color:var(--button-text, rgb(255, 255, 255)) !important}.tna-skip-link:
|
|
1
|
+
.tna-skip-link{width:1px !important;height:1px !important;margin:0 !important;padding:0 !important;display:block !important;overflow:hidden !important;position:absolute !important;left:-100vw;white-space:nowrap !important;background-color:var(--button-background, rgb(1, 1, 1)) !important;border:5px var(--focus-outline, rgb(0, 176, 255)) solid !important;outline:none !important;clip:rect(0 0 0 0) !important;-webkit-clip-path:inset(50%) !important;clip-path:inset(50%) !important}.tna-skip-link,.tna-skip-link:link,.tna-skip-link:visited{color:var(--button-text, rgb(255, 255, 255)) !important}.tna-skip-link:active,.tna-skip-link:focus{width:auto !important;height:auto !important;margin:inherit !important;padding:16px !important;overflow:visible !important;position:static !important;white-space:inherit !important;clip:auto !important;-webkit-clip-path:none !important;clip-path:none !important}.tna-skip-link:active:hover,.tna-skip-link:focus:hover{color:var(--button-hover-text, rgb(1, 1, 1)) !important;background-color:var(--button-hover-background, rgb(255, 255, 255)) !important}/*# sourceMappingURL=skip-link.css.map */
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sourceRoot":"","sources":["../../../../src/nationalarchives/components/skip-link/skip-link.scss","../../../../src/nationalarchives/tools/_colour.scss"],"names":[],"mappings":"AAOA,eACE,qBACA,sBACA,oBACA,qBAEA,yBAEA,2BAEA,6BACA,YAEA,8BAEA,8BACA,wCACA,gCAEA,0DCwBA,wDDlBA,qBCsBA,mEA0BI,mEDxCF,wBAGF,2CAEE,sBACA,uBACA,0BACA,wBAEA,4BAEA,2BAEA,+BAEA,qBACA,kCACA,0BAEA,uDCVF,wDAIA","file":"skip-link.css","sourcesContent":["@use \"../../variables/a11y\" as a11yVars;\n@use \"../../tools/a11y\";\n@use \"../../tools/colour\";\n@use \"../../tools/media\";\n@use \"../../tools/spacing\";\n@use \"../../tools/typography\";\n\n.tna-skip-link {\n width: 1px !important;\n height: 1px !important;\n margin: 0 !important;\n padding: 0 !important;\n\n display: block !important;\n\n overflow: hidden !important;\n\n position: absolute !important;\n left: -100vw;\n\n white-space: nowrap !important;\n\n clip: rect(0 0 0 0) !important;\n -webkit-clip-path: inset(50%) !important;\n clip-path: inset(50%) !important;\n\n &,\n &:link,\n &:visited {\n @include colour.colour-font(\"button-text\", $important: true);\n }\n\n &:focus {\n @include colour.colour-background(\"button-background\", $important: true);\n\n @include colour.colour-border(\n \"focus-outline\",\n a11yVars.$focus-outline-width,\n $important: true\n );\n outline: none !important;\n }\n\n &:active,\n &:focus {\n width: auto !important;\n height: auto !important;\n margin: inherit !important;\n padding: spacing.space(1) !important;\n\n overflow: visible !important;\n\n position: static !important;\n\n white-space: inherit !important;\n\n clip: auto !important;\n -webkit-clip-path: none !important;\n clip-path: none !important;\n\n &:hover {\n @include colour.colour-font(\"button-hover-text\", $important: true);\n\n @include colour.colour-background(\n \"button-hover-background\",\n $important: true\n );\n }\n }\n}\n","@use \"sass:list\";\n@use \"sass:map\";\n@use \"../variables/borders\";\n@use \"../variables/colour\";\n@use \"../tools/media\";\n\n@function brand-colour($colour, $opacity: 1) {\n @return colour.brand-colour($colour, $opacity);\n}\n\n@mixin colour-css-vars($excludes...) {\n @each $name, $value in colour.$colour-palette-default {\n @if not list.index($excludes, $name) {\n --#{$name}: #{$value};\n }\n }\n}\n\n@mixin colour-css-vars-dark($excludes...) {\n @each $name, $value in colour.$colour-palette-dark {\n @if not list.index($excludes, $name) {\n --#{$name}: #{$value};\n }\n }\n}\n\n@mixin colour-css-vars-high-contrast($excludes...) {\n @each $name, $value in colour.$colour-palette-high-contrast {\n @if not list.index($excludes, $name) {\n --#{$name}: #{$value};\n }\n }\n}\n\n@mixin colour-css-vars-high-contrast-dark($excludes...) {\n @each $name, $value in colour.$colour-palette-high-contrast-dark {\n @if not list.index($excludes, $name) {\n --#{$name}: #{$value};\n }\n }\n}\n\n@function colour-var($colour) {\n @return var(\n --#{$colour},\n #{map.get(colour.$colour-palette-default, $colour)}\n );\n}\n\n@mixin colour-font($colour, $important: false) {\n color: colour-var($colour) if($important, !important, null);\n}\n\n@mixin colour-background($colour, $important: false) {\n background-color: colour-var($colour) if($important, !important, null);\n}\n\n@mixin colour-background-brand($brandColour, $important: false) {\n background-color: #{brand-colour($brandColour)} if($important, !important, null);\n}\n\n@mixin colour-border(\n $colour,\n $width: \"\",\n $style: solid,\n $direction: \"\",\n $important: false\n) {\n @if $direction != \"\" {\n @if $width != \"\" {\n border-#{$direction}: $width\n colour-var($colour)\n $style\n if($important, !important, null);\n } @else {\n border-#{$direction}-color: colour-var($colour)\n if($important, !important, null);\n }\n } @else {\n @if $width != \"\" {\n border: $width\n colour-var($colour)\n $style\n if($important, !important, null);\n } @else {\n border-color: var(\n --#{$colour},\n #{map.get(colour.$colour-palette-default, $colour)}\n )\n if($important, !important, null);\n }\n }\n}\n\n@mixin colour-outline($colour, $width: \"\", $style: solid, $important: false) {\n @if $width != \"\" {\n outline: $width colour-var($colour) $style if($important, !important, null);\n } @else {\n outline-color: colour-var($colour) if($important, !important, null);\n }\n}\n\n@mixin colour-fill($colour, $important: false) {\n fill: colour-var($colour) if($important, !important, null);\n}\n\n@mixin thick-keyline($direction: \"\") {\n @if $direction != \"\" {\n @include colour-border(\n \"keyline\",\n borders.$thick-border-width,\n solid,\n $direction\n );\n } @else {\n @include colour-border(\"keyline\", borders.$thick-border-width, solid);\n }\n}\n\n@mixin thick-keyline-dark($direction: \"\") {\n @if $direction != \"\" {\n @include colour-border(\n \"keyline-dark\",\n borders.$thick-border-width,\n solid,\n $direction\n );\n } @else {\n @include colour-border(\"keyline-dark\", borders.$thick-border-width, solid);\n }\n}\n\n@mixin thick-keyline-accent($direction: \"\") {\n @if $direction != \"\" {\n @include colour-border(\n \"accent-border\",\n borders.$thick-border-width,\n solid,\n $direction\n );\n } @else {\n @include colour-border(\"accent-border\", borders.$thick-border-width, solid);\n }\n}\n\n@mixin thick-keyline-error($direction: \"\") {\n @if $direction != \"\" {\n @include colour-border(\n \"form-error-border\",\n borders.$thick-border-width,\n solid,\n $direction\n );\n } @else {\n @include colour-border(\n \"form-error-border\",\n borders.$thick-border-width,\n solid\n );\n }\n}\n\n@mixin thick-keyline-brand($direction: \"\", $brandColour) {\n @if $direction != \"\" {\n border-#{$direction}: borders.$thick-border-width\n #{brand-colour($brandColour)}\n solid;\n } @else {\n border: borders.$thick-border-width #{brand-colour($brandColour)} solid;\n }\n}\n\n// Use light theme colours (except for \"form-error-border\")\n%always-light {\n @include colour-css-vars(\"form-error-border\");\n\n @media (prefers-contrast: more) {\n @include colour-css-vars-high-contrast(\"form-error-border\");\n }\n}\n\n@mixin always-light {\n @extend %always-light;\n}\n\n%contrast {\n --background: var(--contrast-background);\n --font-base: var(--contrast-font-base);\n --font-dark: var(--contrast-font-dark);\n --font-light: var(--contrast-font-light);\n --icon-light: var(--contrast-icon-light);\n --link: var(--contrast-link);\n --link-visited: var(--contrast-link-visited);\n --keyline: var(--contrast-keyline);\n --keyline-dark: var(--contrast-keyline-dark);\n --button-text: var(--contrast-button-text);\n --button-background: var(--contrast-button-background);\n --button-hover-text: var(--contrast-button-hover-text);\n --button-hover-background: var(--contrast-button-hover-background);\n --accent-list-marker: var(--accent-border);\n // --accent-list-marker: var(--font-base);\n\n @include colour-background(\"background\");\n\n @include colour-font(\"font-base\");\n}\n\n@mixin contrast {\n @extend %contrast;\n}\n\n%contrast-on-mobile {\n @include media.on-mobile {\n --background: var(--contrast-background);\n --font-base: var(--contrast-font-base);\n --font-dark: var(--contrast-font-dark);\n --font-light: var(--contrast-font-light);\n --icon-light: var(--contrast-icon-light);\n --link: var(--contrast-link);\n --link-visited: var(--contrast-link-visited);\n --keyline: var(--contrast-keyline);\n --keyline-dark: var(--contrast-keyline-dark);\n --button-text: var(--contrast-button-text);\n --button-background: var(--contrast-button-background);\n --button-hover-text: var(--contrast-button-hover-text);\n --button-hover-background: var(--contrast-button-hover-background);\n --accent-list-marker: var(--accent-border);\n // --accent-list-marker: var(--font-base);\n\n @include colour-background(\"background\");\n\n @include colour-font(\"font-base\");\n }\n}\n\n@mixin contrast-on-mobile {\n @extend %contrast-on-mobile;\n}\n\n%tint {\n --background: var(--background-tint);\n\n @include colour-background(\"background\");\n\n @include colour-font(\"font-base\");\n}\n\n@mixin tint {\n @extend %tint;\n}\n\n%accent {\n --background: var(--accent-background);\n --font-base: var(--accent-font-base);\n --font-dark: var(--accent-font-dark);\n --font-light: var(--accent-font-light);\n --icon-light: var(--accent-icon-light);\n --link: var(--accent-link);\n --link-visited: var(--accent-link);\n --keyline: var(--accent-keyline);\n --keyline-dark: var(--accent-keyline-dark);\n --accent-list-marker: var(--accent-font-base);\n --accent-border: var(--accent-font-dark);\n --button-text: var(--accent-button-text);\n --button-background: var(--accent-button-background);\n --button-hover-text: var(--accent-button-hover-text);\n --button-hover-background: var(--accent-button-hover-background);\n\n @include colour-background(\"background\");\n\n @include colour-font(\"font-base\");\n}\n\n@mixin accent {\n @extend %accent;\n}\n\n%accent-light {\n --background: var(--accent-background-light);\n --font-base: #{map.get(colour.$colour-palette-default, \"font-base\")};\n --font-dark: #{map.get(colour.$colour-palette-default, \"font-dark\")};\n --font-light: #{map.get(colour.$colour-palette-default, \"font-light\")};\n --icon-light: #{map.get(colour.$colour-palette-default, \"icon-light\")};\n --keyline: #{map.get(colour.$colour-palette-default, \"keyline\")};\n --keyline-dark: #{map.get(colour.$colour-palette-default, \"keyline-dark\")};\n --button-text: #{map.get(colour.$colour-palette-default, \"button-text\")};\n --button-background: #{map.get(\n colour.$colour-palette-default,\n \"button-background\"\n )};\n --button-hover-text: #{map.get(\n colour.$colour-palette-default,\n \"button-hover-text\"\n )};\n --button-hover-background: #{map.get(\n colour.$colour-palette-default,\n \"button-hover-background\"\n )};\n --accent-border: var(--font-base);\n --accent-list-marker: var(--font-base);\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%yellow-accent {\n --accent-background: #{colour.brand-colour(\"yellow\")} !important;\n --accent-background-light: #{colour.brand-colour(\"cream\")} !important;\n --accent-border: #{colour.brand-colour(\"yellow\")} !important;\n --accent-list-marker: #{colour.brand-colour(\"brown\")} !important;\n --accent-font-base: #{colour.brand-colour(\"black\")} !important;\n --accent-font-dark: #{colour.brand-colour(\"black\")} !important;\n --accent-font-light: #{colour.brand-colour(\"black\", 0.7)} !important;\n --accent-icon-light: #{colour.brand-colour(\"black\", 0.45)} !important;\n --accent-link: #{colour.brand-colour(\"black\")} !important;\n --accent-link-visited: #{colour.brand-colour(\"black\")} !important;\n --accent-keyline: #{colour.brand-colour(\"black\", 0.5)} !important;\n --accent-keyline-dark: #{colour.brand-colour(\"black\", 0.8)} !important;\n --button-accented-text: #{colour.brand-colour(\"white\")} !important;\n --button-accented-background: #{colour.brand-colour(\"brown\")} !important;\n}\n\n@mixin yellow-accent {\n @extend %yellow-accent;\n}\n\n%accent-lighter-text {\n --accent-font-base: #{colour.brand-colour(\"white\")} !important;\n --accent-font-dark: #{colour.brand-colour(\"white\")} !important;\n --accent-font-light: #{colour.brand-colour(\"white\", 0.7)} !important;\n --accent-icon-light: #{colour.brand-colour(\"white\", 0.45)} !important;\n --accent-link: #{colour.brand-colour(\"white\")} !important;\n --accent-link-visited: #{colour.brand-colour(\"white\")} !important;\n --accent-keyline: #{colour.brand-colour(\"white\", 0.5)} !important;\n --accent-keyline-dark: #{colour.brand-colour(\"white\", 0.8)} !important;\n --button-accented-text: #{colour.brand-colour(\"white\")} !important;\n}\n\n%black-accent {\n --accent-background: #{colour.brand-colour(\"black\")} !important;\n --accent-background-light: #{colour.brand-colour(\"light-grey\")} !important;\n --accent-border: #{colour.brand-colour(\"black\")} !important;\n --accent-list-marker: #{colour.brand-colour(\"grey\")} !important;\n --button-accented-text: #{colour.brand-colour(\"black\")} !important;\n --button-accented-background: #{colour.brand-colour(\"grey\")} !important;\n}\n\n@mixin black-accent {\n @extend %accent-lighter-text;\n @extend %black-accent;\n}\n\n%pink-accent {\n --accent-background: #{colour.brand-colour(\"maroon\")} !important;\n --accent-background-light: #{colour.brand-colour(\"pastel-pink\")} !important;\n --accent-border: #{colour.brand-colour(\"pink\")} !important;\n --accent-list-marker: #{colour.brand-colour(\"pink\")} !important;\n --button-accented-background: #{colour.brand-colour(\"maroon\")} !important;\n}\n\n@mixin pink-accent {\n @extend %accent-lighter-text;\n @extend %pink-accent;\n}\n\n%orange-accent {\n --accent-background: #{colour.brand-colour(\"chestnut\")} !important;\n --accent-background-light: #{colour.brand-colour(\"pastel-orange\")} !important;\n --accent-border: #{colour.brand-colour(\"orange\")} !important;\n --accent-list-marker: #{colour.brand-colour(\"orange\")} !important;\n --button-accented-background: #{colour.brand-colour(\"chestnut\")} !important;\n}\n\n@mixin orange-accent {\n @extend %accent-lighter-text;\n @extend %orange-accent;\n}\n\n%green-accent {\n --accent-background: #{colour.brand-colour(\"forest\")} !important;\n --accent-background-light: #{colour.brand-colour(\"pastel-green\")} !important;\n --accent-border: #{colour.brand-colour(\"green\")} !important;\n --accent-list-marker: #{colour.brand-colour(\"green\")} !important;\n --button-accented-background: #{colour.brand-colour(\"forest\")} !important;\n}\n\n@mixin green-accent {\n @extend %accent-lighter-text;\n @extend %green-accent;\n}\n\n%blue-accent {\n --accent-background: #{colour.brand-colour(\"navy\")} !important;\n --accent-background-light: #{colour.brand-colour(\"pastel-blue\")} !important;\n --accent-border: #{colour.brand-colour(\"blue\")} !important;\n --accent-list-marker: #{colour.brand-colour(\"blue\")} !important;\n --button-accented-background: #{colour.brand-colour(\"navy\")} !important;\n}\n\n@mixin blue-accent {\n @extend %accent-lighter-text;\n @extend %blue-accent;\n}\n\n@mixin on-high-contrast {\n @media (prefers-contrast: more) {\n @content;\n }\n}\n\n@mixin on-forced-colours {\n @media (forced-colors: active) {\n @content;\n }\n}\n\n@mixin on-high-contrast-and-forced-colours {\n @include on-forced-colours {\n @content;\n }\n\n @include on-high-contrast {\n @content;\n }\n}\n"]}
|
|
1
|
+
{"version":3,"sourceRoot":"","sources":["../../../../src/nationalarchives/components/skip-link/skip-link.scss","../../../../src/nationalarchives/tools/_colour.scss"],"names":[],"mappings":"AAOA,eACE,qBACA,sBACA,oBACA,qBAEA,yBAEA,2BAEA,6BACA,YAEA,8BCkCA,mEA0BI,mEDpDJ,wBAEA,8BACA,wCACA,gCAEA,0DCgBA,wDDVA,2CAEE,sBACA,uBACA,0BACA,wBAEA,4BAEA,2BAEA,+BAEA,qBACA,kCACA,0BAEA,uDCPF,wDAIA","file":"skip-link.css","sourcesContent":["@use \"../../variables/a11y\" as a11yVars;\n@use \"../../tools/a11y\";\n@use \"../../tools/colour\";\n@use \"../../tools/media\";\n@use \"../../tools/spacing\";\n@use \"../../tools/typography\";\n\n.tna-skip-link {\n width: 1px !important;\n height: 1px !important;\n margin: 0 !important;\n padding: 0 !important;\n\n display: block !important;\n\n overflow: hidden !important;\n\n position: absolute !important;\n left: -100vw;\n\n white-space: nowrap !important;\n\n @include colour.colour-background(\"button-background\", $important: true);\n @include colour.colour-border(\n \"focus-outline\",\n a11yVars.$focus-outline-width,\n $important: true\n );\n outline: none !important;\n\n clip: rect(0 0 0 0) !important;\n -webkit-clip-path: inset(50%) !important;\n clip-path: inset(50%) !important;\n\n &,\n &:link,\n &:visited {\n @include colour.colour-font(\"button-text\", $important: true);\n }\n\n &:active,\n &:focus {\n width: auto !important;\n height: auto !important;\n margin: inherit !important;\n padding: spacing.space(1) !important;\n\n overflow: visible !important;\n\n position: static !important;\n\n white-space: inherit !important;\n\n clip: auto !important;\n -webkit-clip-path: none !important;\n clip-path: none !important;\n\n &:hover {\n @include colour.colour-font(\"button-hover-text\", $important: true);\n\n @include colour.colour-background(\n \"button-hover-background\",\n $important: true\n );\n }\n }\n}\n","@use \"sass:list\";\n@use \"sass:map\";\n@use \"../variables/borders\";\n@use \"../variables/colour\";\n@use \"../tools/media\";\n\n@function brand-colour($colour, $opacity: 1) {\n @return colour.brand-colour($colour, $opacity);\n}\n\n@mixin colour-css-vars($excludes...) {\n @each $name, $value in colour.$colour-palette-default {\n @if not list.index($excludes, $name) {\n --#{$name}: #{$value};\n }\n }\n}\n\n@mixin colour-css-vars-dark($excludes...) {\n @each $name, $value in colour.$colour-palette-dark {\n @if not list.index($excludes, $name) {\n --#{$name}: #{$value};\n }\n }\n}\n\n@mixin colour-css-vars-high-contrast($excludes...) {\n @each $name, $value in colour.$colour-palette-high-contrast {\n @if not list.index($excludes, $name) {\n --#{$name}: #{$value};\n }\n }\n}\n\n@mixin colour-css-vars-high-contrast-dark($excludes...) {\n @each $name, $value in colour.$colour-palette-high-contrast-dark {\n @if not list.index($excludes, $name) {\n --#{$name}: #{$value};\n }\n }\n}\n\n@function colour-var($colour) {\n @return var(\n --#{$colour},\n #{map.get(colour.$colour-palette-default, $colour)}\n );\n}\n\n@mixin colour-font($colour, $important: false) {\n color: colour-var($colour) if($important, !important, null);\n}\n\n@mixin colour-background($colour, $important: false) {\n background-color: colour-var($colour) if($important, !important, null);\n}\n\n@mixin colour-background-brand($brandColour, $important: false) {\n background-color: #{brand-colour($brandColour)} if($important, !important, null);\n}\n\n@mixin colour-border(\n $colour,\n $width: \"\",\n $style: solid,\n $direction: \"\",\n $important: false\n) {\n @if $direction != \"\" {\n @if $width != \"\" {\n border-#{$direction}: $width\n colour-var($colour)\n $style\n if($important, !important, null);\n } @else {\n border-#{$direction}-color: colour-var($colour)\n if($important, !important, null);\n }\n } @else {\n @if $width != \"\" {\n border: $width\n colour-var($colour)\n $style\n if($important, !important, null);\n } @else {\n border-color: var(\n --#{$colour},\n #{map.get(colour.$colour-palette-default, $colour)}\n )\n if($important, !important, null);\n }\n }\n}\n\n@mixin colour-outline($colour, $width: \"\", $style: solid, $important: false) {\n @if $width != \"\" {\n outline: $width colour-var($colour) $style if($important, !important, null);\n } @else {\n outline-color: colour-var($colour) if($important, !important, null);\n }\n}\n\n@mixin colour-fill($colour, $important: false) {\n fill: colour-var($colour) if($important, !important, null);\n}\n\n@mixin thick-keyline($direction: \"\") {\n @if $direction != \"\" {\n @include colour-border(\n \"keyline\",\n borders.$thick-border-width,\n solid,\n $direction\n );\n } @else {\n @include colour-border(\"keyline\", borders.$thick-border-width, solid);\n }\n}\n\n@mixin thick-keyline-dark($direction: \"\") {\n @if $direction != \"\" {\n @include colour-border(\n \"keyline-dark\",\n borders.$thick-border-width,\n solid,\n $direction\n );\n } @else {\n @include colour-border(\"keyline-dark\", borders.$thick-border-width, solid);\n }\n}\n\n@mixin thick-keyline-accent($direction: \"\") {\n @if $direction != \"\" {\n @include colour-border(\n \"accent-border\",\n borders.$thick-border-width,\n solid,\n $direction\n );\n } @else {\n @include colour-border(\"accent-border\", borders.$thick-border-width, solid);\n }\n}\n\n@mixin thick-keyline-error($direction: \"\") {\n @if $direction != \"\" {\n @include colour-border(\n \"form-error-border\",\n borders.$thick-border-width,\n solid,\n $direction\n );\n } @else {\n @include colour-border(\n \"form-error-border\",\n borders.$thick-border-width,\n solid\n );\n }\n}\n\n@mixin thick-keyline-brand($direction: \"\", $brandColour) {\n @if $direction != \"\" {\n border-#{$direction}: borders.$thick-border-width\n #{brand-colour($brandColour)}\n solid;\n } @else {\n border: borders.$thick-border-width #{brand-colour($brandColour)} solid;\n }\n}\n\n// Use light theme colours (except for \"form-error-border\")\n%always-light {\n @include colour-css-vars(\"form-error-border\");\n\n @media (prefers-contrast: more) {\n @include colour-css-vars-high-contrast(\"form-error-border\");\n }\n}\n\n@mixin always-light {\n @extend %always-light;\n}\n\n%contrast {\n --background: var(--contrast-background);\n --font-base: var(--contrast-font-base);\n --font-dark: var(--contrast-font-dark);\n --font-light: var(--contrast-font-light);\n --icon-light: var(--contrast-icon-light);\n --link: var(--contrast-link);\n --link-visited: var(--contrast-link-visited);\n --keyline: var(--contrast-keyline);\n --keyline-dark: var(--contrast-keyline-dark);\n --button-text: var(--contrast-button-text);\n --button-background: var(--contrast-button-background);\n --button-hover-text: var(--contrast-button-hover-text);\n --button-hover-background: var(--contrast-button-hover-background);\n --accent-list-marker: var(--accent-border);\n // --accent-list-marker: var(--font-base);\n\n @include colour-background(\"background\");\n\n @include colour-font(\"font-base\");\n}\n\n@mixin contrast {\n @extend %contrast;\n}\n\n%contrast-on-mobile {\n @include media.on-mobile {\n --background: var(--contrast-background);\n --font-base: var(--contrast-font-base);\n --font-dark: var(--contrast-font-dark);\n --font-light: var(--contrast-font-light);\n --icon-light: var(--contrast-icon-light);\n --link: var(--contrast-link);\n --link-visited: var(--contrast-link-visited);\n --keyline: var(--contrast-keyline);\n --keyline-dark: var(--contrast-keyline-dark);\n --button-text: var(--contrast-button-text);\n --button-background: var(--contrast-button-background);\n --button-hover-text: var(--contrast-button-hover-text);\n --button-hover-background: var(--contrast-button-hover-background);\n --accent-list-marker: var(--accent-border);\n // --accent-list-marker: var(--font-base);\n\n @include colour-background(\"background\");\n\n @include colour-font(\"font-base\");\n }\n}\n\n@mixin contrast-on-mobile {\n @extend %contrast-on-mobile;\n}\n\n%tint {\n --background: var(--background-tint);\n\n @include colour-background(\"background\");\n\n @include colour-font(\"font-base\");\n}\n\n@mixin tint {\n @extend %tint;\n}\n\n%accent {\n --background: var(--accent-background);\n --font-base: var(--accent-font-base);\n --font-dark: var(--accent-font-dark);\n --font-light: var(--accent-font-light);\n --icon-light: var(--accent-icon-light);\n --link: var(--accent-link);\n --link-visited: var(--accent-link);\n --keyline: var(--accent-keyline);\n --keyline-dark: var(--accent-keyline-dark);\n --accent-list-marker: var(--accent-font-base);\n --accent-border: var(--accent-font-dark);\n --button-text: var(--accent-button-text);\n --button-background: var(--accent-button-background);\n --button-hover-text: var(--accent-button-hover-text);\n --button-hover-background: var(--accent-button-hover-background);\n\n @include colour-background(\"background\");\n\n @include colour-font(\"font-base\");\n}\n\n@mixin accent {\n @extend %accent;\n}\n\n%accent-light {\n --background: var(--accent-background-light);\n --font-base: #{map.get(colour.$colour-palette-default, \"font-base\")};\n --font-dark: #{map.get(colour.$colour-palette-default, \"font-dark\")};\n --font-light: #{map.get(colour.$colour-palette-default, \"font-light\")};\n --icon-light: #{map.get(colour.$colour-palette-default, \"icon-light\")};\n --keyline: #{map.get(colour.$colour-palette-default, \"keyline\")};\n --keyline-dark: #{map.get(colour.$colour-palette-default, \"keyline-dark\")};\n --button-text: #{map.get(colour.$colour-palette-default, \"button-text\")};\n --button-background: #{map.get(\n colour.$colour-palette-default,\n \"button-background\"\n )};\n --button-hover-text: #{map.get(\n colour.$colour-palette-default,\n \"button-hover-text\"\n )};\n --button-hover-background: #{map.get(\n colour.$colour-palette-default,\n \"button-hover-background\"\n )};\n --accent-border: var(--font-base);\n --accent-list-marker: var(--font-base);\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%yellow-accent {\n --accent-background: #{colour.brand-colour(\"yellow\")} !important;\n --accent-background-light: #{colour.brand-colour(\"cream\")} !important;\n --accent-border: #{colour.brand-colour(\"yellow\")} !important;\n --accent-list-marker: #{colour.brand-colour(\"brown\")} !important;\n --accent-font-base: #{colour.brand-colour(\"black\")} !important;\n --accent-font-dark: #{colour.brand-colour(\"black\")} !important;\n --accent-font-light: #{colour.brand-colour(\"black\", 0.7)} !important;\n --accent-icon-light: #{colour.brand-colour(\"black\", 0.45)} !important;\n --accent-link: #{colour.brand-colour(\"black\")} !important;\n --accent-link-visited: #{colour.brand-colour(\"black\")} !important;\n --accent-keyline: #{colour.brand-colour(\"black\", 0.5)} !important;\n --accent-keyline-dark: #{colour.brand-colour(\"black\", 0.8)} !important;\n --button-accented-text: #{colour.brand-colour(\"white\")} !important;\n --button-accented-background: #{colour.brand-colour(\"brown\")} !important;\n}\n\n@mixin yellow-accent {\n @extend %yellow-accent;\n}\n\n%accent-lighter-text {\n --accent-font-base: #{colour.brand-colour(\"white\")} !important;\n --accent-font-dark: #{colour.brand-colour(\"white\")} !important;\n --accent-font-light: #{colour.brand-colour(\"white\", 0.7)} !important;\n --accent-icon-light: #{colour.brand-colour(\"white\", 0.45)} !important;\n --accent-link: #{colour.brand-colour(\"white\")} !important;\n --accent-link-visited: #{colour.brand-colour(\"white\")} !important;\n --accent-keyline: #{colour.brand-colour(\"white\", 0.5)} !important;\n --accent-keyline-dark: #{colour.brand-colour(\"white\", 0.8)} !important;\n --button-accented-text: #{colour.brand-colour(\"white\")} !important;\n}\n\n%black-accent {\n --accent-background: #{colour.brand-colour(\"black\")} !important;\n --accent-background-light: #{colour.brand-colour(\"light-grey\")} !important;\n --accent-border: #{colour.brand-colour(\"black\")} !important;\n --accent-list-marker: #{colour.brand-colour(\"grey\")} !important;\n --button-accented-text: #{colour.brand-colour(\"black\")} !important;\n --button-accented-background: #{colour.brand-colour(\"grey\")} !important;\n}\n\n@mixin black-accent {\n @extend %accent-lighter-text;\n @extend %black-accent;\n}\n\n%pink-accent {\n --accent-background: #{colour.brand-colour(\"maroon\")} !important;\n --accent-background-light: #{colour.brand-colour(\"pastel-pink\")} !important;\n --accent-border: #{colour.brand-colour(\"pink\")} !important;\n --accent-list-marker: #{colour.brand-colour(\"pink\")} !important;\n --button-accented-background: #{colour.brand-colour(\"maroon\")} !important;\n}\n\n@mixin pink-accent {\n @extend %accent-lighter-text;\n @extend %pink-accent;\n}\n\n%orange-accent {\n --accent-background: #{colour.brand-colour(\"chestnut\")} !important;\n --accent-background-light: #{colour.brand-colour(\"pastel-orange\")} !important;\n --accent-border: #{colour.brand-colour(\"orange\")} !important;\n --accent-list-marker: #{colour.brand-colour(\"orange\")} !important;\n --button-accented-background: #{colour.brand-colour(\"chestnut\")} !important;\n}\n\n@mixin orange-accent {\n @extend %accent-lighter-text;\n @extend %orange-accent;\n}\n\n%green-accent {\n --accent-background: #{colour.brand-colour(\"forest\")} !important;\n --accent-background-light: #{colour.brand-colour(\"pastel-green\")} !important;\n --accent-border: #{colour.brand-colour(\"green\")} !important;\n --accent-list-marker: #{colour.brand-colour(\"green\")} !important;\n --button-accented-background: #{colour.brand-colour(\"forest\")} !important;\n}\n\n@mixin green-accent {\n @extend %accent-lighter-text;\n @extend %green-accent;\n}\n\n%blue-accent {\n --accent-background: #{colour.brand-colour(\"navy\")} !important;\n --accent-background-light: #{colour.brand-colour(\"pastel-blue\")} !important;\n --accent-border: #{colour.brand-colour(\"blue\")} !important;\n --accent-list-marker: #{colour.brand-colour(\"blue\")} !important;\n --button-accented-background: #{colour.brand-colour(\"navy\")} !important;\n}\n\n@mixin blue-accent {\n @extend %accent-lighter-text;\n @extend %blue-accent;\n}\n\n@mixin on-high-contrast {\n @media (prefers-contrast: more) {\n @content;\n }\n}\n\n@mixin on-forced-colours {\n @media (forced-colors: active) {\n @content;\n }\n}\n\n@mixin on-high-contrast-and-forced-colours {\n @include on-forced-colours {\n @content;\n }\n\n @include on-high-contrast {\n @content;\n }\n}\n"]}
|
|
@@ -20,6 +20,14 @@
|
|
|
20
20
|
|
|
21
21
|
white-space: nowrap !important;
|
|
22
22
|
|
|
23
|
+
@include colour.colour-background("button-background", $important: true);
|
|
24
|
+
@include colour.colour-border(
|
|
25
|
+
"focus-outline",
|
|
26
|
+
a11yVars.$focus-outline-width,
|
|
27
|
+
$important: true
|
|
28
|
+
);
|
|
29
|
+
outline: none !important;
|
|
30
|
+
|
|
23
31
|
clip: rect(0 0 0 0) !important;
|
|
24
32
|
-webkit-clip-path: inset(50%) !important;
|
|
25
33
|
clip-path: inset(50%) !important;
|
|
@@ -30,17 +38,6 @@
|
|
|
30
38
|
@include colour.colour-font("button-text", $important: true);
|
|
31
39
|
}
|
|
32
40
|
|
|
33
|
-
&:focus {
|
|
34
|
-
@include colour.colour-background("button-background", $important: true);
|
|
35
|
-
|
|
36
|
-
@include colour.colour-border(
|
|
37
|
-
"focus-outline",
|
|
38
|
-
a11yVars.$focus-outline-width,
|
|
39
|
-
$important: true
|
|
40
|
-
);
|
|
41
|
-
outline: none !important;
|
|
42
|
-
}
|
|
43
|
-
|
|
44
41
|
&:active,
|
|
45
42
|
&:focus {
|
|
46
43
|
width: auto !important;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
.tna-template{--background: #f4f4f4;--background-tint: rgb(217, 217, 214);--font-base: #343338;--font-dark: rgb(1, 1, 1);--font-light: rgb(1 1 1/0.58);--icon-light: rgb(52 51 56/0.45);--link: #005fa3;--link-visited: #4c2c92;--focus-outline: rgb(0, 176, 255);--keyline: rgb(38 38 42/0.25);--keyline-dark: #26262a;--input-foreground: rgb(1, 1, 1);--input-background: rgb(255, 255, 255);--input-border: rgb(1, 1, 1);--form-error-text: #c20000;--button-text: rgb(255, 255, 255);--button-background: rgb(1, 1, 1);--button-hover-text: rgb(1, 1, 1);--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(1, 1, 1);--contrast-button-background: rgb(255, 255, 255);--contrast-button-hover-text: rgb(255, 255, 255);--contrast-button-hover-background: rgb(1, 1, 1);--accent-background: #afb6b5;--accent-background-light: rgb(217, 217, 214);--accent-border: rgb(140, 150, 148);--accent-list-marker: rgb(1 1 1/0.58);--accent-font-base: rgb(1, 1, 1);--accent-font-dark: rgb(1, 1, 1);--accent-font-light: rgb(1 1 1/0.7);--accent-icon-light: rgb(1 1 1/0.45);--accent-link: rgb(1, 1, 1);--accent-link-visited: rgb(1, 1, 1);--accent-keyline: rgb(1 1 1/0.5);--accent-keyline-dark: rgb(1 1 1/0.8);--accent-button-text: rgb(255, 255, 255);--accent-button-background: rgb(1, 1, 1);--accent-button-hover-text: rgb(1, 1, 1);--accent-button-hover-background: rgb(255, 255, 255);--button-accented-text: rgb(1, 1, 1);--button-accented-background: rgb(140, 150, 148)}@media(prefers-contrast: more){.tna-template{--background: rgb(255, 255, 255);--background-tint: #ddd;--font-base: rgb(1, 1, 1);--font-dark: rgb(1, 1, 1);--font-light: rgb(1, 1, 1);--icon-light: rgb(1 1 1/0.75);--link: #34d;--link-visited: #848;--focus-outline: rgb(253, 63, 3);--keyline: rgb(1, 1, 1);--keyline-dark: rgb(1, 1, 1);--input-foreground: rgb(1, 1, 1);--input-background: rgb(255, 255, 255);--input-border: rgb(1, 1, 1);--form-error-text: #c20000;--button-text: rgb(255, 255, 255);--button-background: rgb(1, 1, 1);--button-hover-text: rgb(1, 1, 1);--button-hover-background: rgb(255, 255, 255);--contrast-background: rgb(1, 1, 1);--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(0, 176, 255);--contrast-link-visited: #a8f;--contrast-keyline: rgb(255 255 255/0.5);--contrast-keyline-dark: rgb(255 255 255/0.8);--contrast-button-text: rgb(1, 1, 1);--contrast-button-background: rgb(255, 255, 255);--contrast-button-hover-text: rgb(255, 255, 255);--contrast-button-hover-background: rgb(1, 1, 1);--accent-background: #afb6b5;--accent-background-light: rgb(217, 217, 214);--accent-border: rgb(140, 150, 148);--accent-list-marker: rgb(1 1 1/0.58);--accent-font-base: rgb(1, 1, 1);--accent-font-dark: rgb(1, 1, 1);--accent-font-light: rgb(1 1 1/0.7);--accent-icon-light: rgb(1 1 1/0.45);--accent-link: rgb(1, 1, 1);--accent-link-visited: rgb(1, 1, 1);--accent-keyline: rgb(1 1 1/0.5);--accent-keyline-dark: rgb(1 1 1/0.8);--accent-button-text: rgb(255, 255, 255);--accent-button-background: rgb(1, 1, 1);--accent-button-hover-text: rgb(1, 1, 1);--accent-button-hover-background: rgb(255, 255, 255);--button-accented-text: rgb(1, 1, 1);--button-accented-background: rgb(140, 150, 148)}}.tna-global-header,.tna-footer__inner,.tna-background-accent .tna-button--accent,.tna-background-accent .tna-chip:not(.tna-chip--plain),.tna-background-accent .tna-hgroup__supertitle:not(.tna-hgroup__supertitle--plain),.tna-background-accent .tna-dl-chips:not(.tna-dl-chips--plain) .tna-dl-chips__item,.tna-dl-chips:not(.tna-dl-chips--plain) .tna-background-accent .tna-dl-chips__item,.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);--accent-list-marker: var(--accent-border);background-color:var(--background, #f4f4f4);color:var(--font-base, #343338)}.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),.tna-background-tint{--background: var(--background-tint);background-color:var(--background, #f4f4f4);color:var(--font-base, #343338)}.tna-chip:not(.tna-chip--plain),.tna-hgroup__supertitle:not(.tna-hgroup__supertitle--plain),.tna-dl-chips:not(.tna-dl-chips--plain) .tna-dl-chips__item,.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);--accent-list-marker: var(--accent-font-base);--accent-border: var(--accent-font-dark);--button-text: var(--accent-button-text);--button-background: var(--accent-button-background);--button-hover-text: var(--accent-button-hover-text);--button-hover-background: var(--accent-button-hover-background);background-color:var(--background, #f4f4f4);color:var(--font-base, #343338)}.tna-background-accent-light{--background: var(--accent-background-light);--font-base: #343338;--font-dark: rgb(1, 1, 1);--font-light: rgb(1 1 1/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(1, 1, 1);--button-hover-text: rgb(1, 1, 1);--button-hover-background: rgb(255, 255, 255);--accent-border: var(--font-base);--accent-list-marker: var(--font-base);background-color:var(--background, #f4f4f4);color:var(--font-base, #343338)}@media(prefers-color-scheme: dark){.tna-template--system-theme .tna-background-accent-light{--link: #005fa3;--link-visited: #4c2c92}}.tna-template--dark-theme .tna-background-accent-light{--link: #005fa3;--link-visited: #4c2c92}.tna-chip--yellow,.tna-template--yellow-accent,.tna-accent-yellow{--accent-background: rgb(255, 204, 0) !important;--accent-background-light: rgb(249, 247, 226) !important;--accent-border: rgb(255, 204, 0) !important;--accent-list-marker: rgb(101, 78, 55) !important;--accent-font-base: rgb(1, 1, 1) !important;--accent-font-dark: rgb(1, 1, 1) !important;--accent-font-light: rgb(1 1 1/0.7) !important;--accent-icon-light: rgb(1 1 1/0.45) !important;--accent-link: rgb(1, 1, 1) !important;--accent-link-visited: rgb(1, 1, 1) !important;--accent-keyline: rgb(1 1 1/0.5) !important;--accent-keyline-dark: rgb(1 1 1/0.8) !important;--button-accented-text: rgb(255, 255, 255) !important;--button-accented-background: rgb(101, 78, 55) !important}.tna-chip--black,.tna-chip--pink,.tna-chip--orange,.tna-chip--green,.tna-chip--blue,.tna-template--black-accent,.tna-template--pink-accent,.tna-template--orange-accent,.tna-template--green-accent,.tna-template--blue-accent,.tna-accent-black,.tna-accent-pink,.tna-accent-orange,.tna-accent-green,.tna-accent-blue{--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-accented-text: rgb(255, 255, 255) !important}.tna-chip--black,.tna-template--black-accent,.tna-accent-black{--accent-background: rgb(1, 1, 1) !important;--accent-background-light: rgb(217, 217, 214) !important;--accent-border: rgb(1, 1, 1) !important;--accent-list-marker: rgb(140, 150, 148) !important;--button-accented-text: rgb(1, 1, 1) !important;--button-accented-background: rgb(140, 150, 148) !important}.tna-chip--pink,.tna-template--pink-accent,.tna-accent-pink{--accent-background: rgb(156, 25, 58) !important;--accent-background-light: rgb(250, 211, 212) !important;--accent-border: rgb(254, 29, 87) !important;--accent-list-marker: rgb(254, 29, 87) !important;--button-accented-background: rgb(156, 25, 58) !important}.tna-chip--orange,.tna-template--orange-accent,.tna-accent-orange{--accent-background: rgb(143, 52, 21) !important;--accent-background-light: rgb(249, 225, 188) !important;--accent-border: rgb(253, 63, 3) !important;--accent-list-marker: rgb(253, 63, 3) !important;--button-accented-background: rgb(143, 52, 21) !important}.tna-chip--green,.tna-template--green-accent,.tna-accent-green{--accent-background: rgb(0, 98, 59) !important;--accent-background-light: rgb(221, 229, 213) !important;--accent-border: rgb(134, 188, 37) !important;--accent-list-marker: rgb(134, 188, 37) !important;--button-accented-background: rgb(0, 98, 59) !important}.tna-chip--blue,.tna-template--blue-accent,.tna-accent-blue{--accent-background: rgb(0, 76, 126) !important;--accent-background-light: rgb(212, 229, 239) !important;--accent-border: rgb(0, 176, 255) !important;--accent-list-marker: rgb(0, 176, 255) !important;--button-accented-background: rgb(0, 76, 126) !important}.tna-button-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:32px}.tna-button-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-dl-chips,.tna-dl{margin:32px 0 0}.tna-dl-chips:first-child,.tna-dl:first-child{margin-top:0}.tna-visually-hidden,.tna-\!--visually-hidden{width:1px !important;height:1px !important;margin:0 !important;padding:0 !important;overflow:hidden !important;position:absolute !important;top:-9999px !important;left:-9999px !important;z-index:-1 !important;background-color:rgba(0,0,0,0) !important;border:0 !important;clip:rect(0, 0, 0, 0) !important}*:focus{z-index:9;outline:5px var(--focus-outline, rgb(0, 176, 255)) solid;outline-offset:2px}*:active{outline-offset:0}.tna-\!--no-focus-style:focus,*[tabindex="-1"]:focus{outline:none}.tna-template{background-color:var(--background, #f4f4f4)}@media(prefers-color-scheme: dark){.tna-template--system-theme{--background: #212223;--background-tint: #323334;--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(1, 1, 1);--input-border: rgb(255, 255, 255);--form-error-border: #f00;--form-error-text: #ff6b6b;--button-text: rgb(1, 1, 1);--button-background: rgb(255, 255, 255);--button-hover-text: rgb(255, 255, 255);--button-hover-background: rgb(1, 1, 1);--contrast-background: #101112;--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(1, 1, 1);--contrast-button-background: rgb(255, 255, 255);--contrast-button-hover-text: rgb(255, 255, 255);--contrast-button-hover-background: rgb(1, 1, 1);--accent-background: #afb6b5;--accent-background-light: rgb(217, 217, 214);--accent-border: rgb(255, 255, 255);--accent-list-marker: rgb(255 255 255/0.51);--accent-font-base: rgb(1, 1, 1);--accent-font-dark: rgb(1, 1, 1);--accent-font-light: rgb(1 1 1/0.7);--accent-icon-light: rgb(1 1 1/0.45);--accent-link: rgb(1, 1, 1);--accent-link-visited: rgb(1, 1, 1);--accent-keyline: rgb(1 1 1/0.5);--accent-keyline-dark: rgb(1 1 1/0.8);--accent-button-text: rgb(255, 255, 255);--accent-button-background: rgb(1, 1, 1);--accent-button-hover-text: rgb(1, 1, 1);--accent-button-hover-background: rgb(255, 255, 255);--button-accented-text: rgb(1, 1, 1);--button-accented-background: rgb(140, 150, 148)}}@media(prefers-contrast: more)and (prefers-color-scheme: dark){.tna-template--system-theme{--background: #111;--background-tint: #323334;--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(1, 1, 1);--input-border: rgb(255, 255, 255);--form-error-border: #ff6b6b;--form-error-text: #ff6b6b;--button-text: rgb(1, 1, 1);--button-background: rgb(255, 255, 255);--button-hover-text: rgb(255, 255, 255);--button-hover-background: rgb(1, 1, 1);--contrast-background: rgb(1, 1, 1);--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(0, 176, 255);--contrast-link-visited: #a8f;--contrast-keyline: rgb(255 255 255/0.5);--contrast-keyline-dark: rgb(255 255 255/0.8);--contrast-button-text: rgb(1, 1, 1);--contrast-button-background: rgb(255, 255, 255);--contrast-button-hover-text: rgb(255, 255, 255);--contrast-button-hover-background: rgb(1, 1, 1);--accent-background: #afb6b5;--accent-background-light: rgb(217, 217, 214);--accent-border: rgb(255, 255, 255);--accent-list-marker: rgb(255 255 255/0.51);--accent-font-base: rgb(1, 1, 1);--accent-font-dark: rgb(1, 1, 1);--accent-font-light: rgb(1 1 1/0.7);--accent-icon-light: rgb(1 1 1/0.45);--accent-link: rgb(1, 1, 1);--accent-link-visited: rgb(1, 1, 1);--accent-keyline: rgb(1 1 1/0.5);--accent-keyline-dark: rgb(1 1 1/0.8);--accent-button-text: rgb(255, 255, 255);--accent-button-background: rgb(1, 1, 1);--accent-button-hover-text: rgb(1, 1, 1);--accent-button-hover-background: rgb(255, 255, 255);--button-accented-text: rgb(1, 1, 1);--button-accented-background: rgb(140, 150, 148)}}.tna-template--dark-theme{--background: #212223;--background-tint: #323334;--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(1, 1, 1);--input-border: rgb(255, 255, 255);--form-error-border: #f00;--form-error-text: #ff6b6b;--button-text: rgb(1, 1, 1);--button-background: rgb(255, 255, 255);--button-hover-text: rgb(255, 255, 255);--button-hover-background: rgb(1, 1, 1);--contrast-background: #101112;--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(1, 1, 1);--contrast-button-background: rgb(255, 255, 255);--contrast-button-hover-text: rgb(255, 255, 255);--contrast-button-hover-background: rgb(1, 1, 1);--accent-background: #afb6b5;--accent-background-light: rgb(217, 217, 214);--accent-border: rgb(255, 255, 255);--accent-list-marker: rgb(255 255 255/0.51);--accent-font-base: rgb(1, 1, 1);--accent-font-dark: rgb(1, 1, 1);--accent-font-light: rgb(1 1 1/0.7);--accent-icon-light: rgb(1 1 1/0.45);--accent-link: rgb(1, 1, 1);--accent-link-visited: rgb(1, 1, 1);--accent-keyline: rgb(1 1 1/0.5);--accent-keyline-dark: rgb(1 1 1/0.8);--accent-button-text: rgb(255, 255, 255);--accent-button-background: rgb(1, 1, 1);--accent-button-hover-text: rgb(1, 1, 1);--accent-button-hover-background: rgb(255, 255, 255);--button-accented-text: rgb(1, 1, 1);--button-accented-background: rgb(140, 150, 148)}@media(prefers-contrast: more){.tna-template--dark-theme{--background: #111;--background-tint: #323334;--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(1, 1, 1);--input-border: rgb(255, 255, 255);--form-error-border: #ff6b6b;--form-error-text: #ff6b6b;--button-text: rgb(1, 1, 1);--button-background: rgb(255, 255, 255);--button-hover-text: rgb(255, 255, 255);--button-hover-background: rgb(1, 1, 1);--contrast-background: rgb(1, 1, 1);--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(0, 176, 255);--contrast-link-visited: #a8f;--contrast-keyline: rgb(255 255 255/0.5);--contrast-keyline-dark: rgb(255 255 255/0.8);--contrast-button-text: rgb(1, 1, 1);--contrast-button-background: rgb(255, 255, 255);--contrast-button-hover-text: rgb(255, 255, 255);--contrast-button-hover-background: rgb(1, 1, 1);--accent-background: #afb6b5;--accent-background-light: rgb(217, 217, 214);--accent-border: rgb(255, 255, 255);--accent-list-marker: rgb(255 255 255/0.51);--accent-font-base: rgb(1, 1, 1);--accent-font-dark: rgb(1, 1, 1);--accent-font-light: rgb(1 1 1/0.7);--accent-icon-light: rgb(1 1 1/0.45);--accent-link: rgb(1, 1, 1);--accent-link-visited: rgb(1, 1, 1);--accent-keyline: rgb(1 1 1/0.5);--accent-keyline-dark: rgb(1 1 1/0.8);--accent-button-text: rgb(255, 255, 255);--accent-button-background: rgb(1, 1, 1);--accent-button-hover-text: rgb(1, 1, 1);--accent-button-hover-background: rgb(255, 255, 255);--button-accented-text: rgb(1, 1, 1);--button-accented-background: rgb(140, 150, 148)}}.tna-border-keyline{border:1px var(--keyline, rgb(38 38 42/0.25)) solid}.tna-border-keyline-dark{border:1px var(--keyline-dark, #26262a) solid}.tna-columns{column-gap:30px}.tna-columns--2{column-count:2}.tna-columns--3{column-count:3}@media(max-width: 30em){.tna-columns{column-gap:15px}}@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-template{min-width:320px;width:100%;height:100%;-webkit-overflow-scrolling:touch}.tna-template__body{min-height:100%;margin:0;padding:0}.tna-template__body:has(:is(.tna-global-header,.tna-header)):has(.tna-main):has(.tna-footer){display:flex;flex-direction:column}.tna-main{flex:1}.tna-container{width:100%;max-width:1270px;margin-right:auto;margin-left:auto;padding-right:15px;padding-left:15px;display:flex;flex-wrap:wrap;align-items:stretch;justify-content:flex-start;box-sizing:border-box}.tna-container--no-padding,.tna-container--no-padding-all{max-width:1270px-60px}.tna-container--max{max-width:none}.tna-container--centred{justify-content:center}ul.tna-container{list-style:none}.tna-column{padding-right:15px;padding-left:15px;box-sizing:border-box}.tna-column--container{display:flex;flex-wrap:wrap;align-items:stretch;justify-content: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--no-margin-right-medium{margin-right:0}.tna-column--no-margin-left-medium{margin-left:0}.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:7.5px;padding-left:7.5px}.tna-column{padding-right:7.5px;padding-left:7.5px}}@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--no-margin-right-small{margin-right:0}.tna-column--no-margin-left-small{margin-left:0}.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--no-margin-right-tiny{margin-right:0}.tna-column--no-margin-left-tiny{margin-left:0}.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-template{color:var(--font-base, #343338);font-family:Open Sans,sans-serif;font-style:normal;font-optical-sizing:auto;font-variation-settings:"wdth" 100;font-weight:400;direction:ltr;text-rendering:optimizeLegibility;-webkit-text-size-adjust:none;text-size-adjust:none;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased}.tna-template__body{color:inherit;font-size:1.125rem;line-height:1.75}@media(max-width: 48em){.tna-template__body{font-size:1.0625rem}}strong{font-weight:700}p+p{margin-top:16px}a{text-decoration-thickness:1.5px;border-radius:.1px}a,a:link{color:var(--link, #005fa3)}a:visited{color:var(--link-visited, #4c2c92)}a:hover,a:active{text-decoration:underline;text-decoration-thickness:3.5px}a.tna-link--no-visited-state:visited{color:var(--link, #005fa3)}small{font-size:0.95625rem}.tna-dl-chips__item,.tna-hgroup__supertitle,.tna-chip{max-width:max-content;padding:2px 4px;display:flex;align-items:center;gap:8px;color:var(--font-base, #343338);font-family:Roboto Mono,monospace;font-style:normal;font-optical-sizing:auto;font-weight:400;font-size:0.875rem;line-height:1.1;text-transform:uppercase;line-height:1;text-align:center}a.tna-dl-chips__item,a.tna-hgroup__supertitle,a.tna-chip{text-decoration:underline}a.tna-dl-chips__item:hover,a.tna-hgroup__supertitle:hover,a.tna-chip:hover{text-decoration:underline;text-decoration-thickness:3.5px}a.tna-dl-chips__item:hover .fa-solid,a.tna-hgroup__supertitle:hover .fa-solid,a.tna-chip:hover .fa-solid{color:inherit}.tna-dl-chips__item .fa-solid,.tna-hgroup__supertitle .fa-solid,.tna-chip .fa-solid{color:var(--icon-light, rgb(52 51 56/0.45))}@media(prefers-contrast: more){.tna-dl-chips__item .fa-solid,.tna-hgroup__supertitle .fa-solid,.tna-chip .fa-solid{color:var(--icon, )}}.tna-dl-chips,.tna-dl-chips--plain .tna-dl-chips__item,.tna-hgroup__supertitle--plain,.tna-chip--plain{padding:0;background-color:rgba(0,0,0,0);border:none}a.tna-dl-chips .fa-solid,.tna-dl-chips--plain a.tna-dl-chips__item .fa-solid,a.tna-hgroup__supertitle--plain .fa-solid,a.tna-chip--plain .fa-solid{color:inherit}.tna-dl-chips:not(.tna-dl-chips--plain) .tna-dl-chips__item,.tna-hgroup__supertitle:not(.tna-hgroup__supertitle--plain),.tna-chip:not(.tna-chip--plain){border:2px var(--accent-background, #afb6b5) solid;-webkit-print-color-adjust:exact;print-color-adjust:exact}.tna-background-accent .tna-dl-chips:not(.tna-dl-chips--plain) .tna-dl-chips__item,.tna-dl-chips:not(.tna-dl-chips--plain) .tna-background-accent .tna-dl-chips__item,.tna-background-accent .tna-hgroup__supertitle:not(.tna-hgroup__supertitle--plain),.tna-background-accent .tna-chip:not(.tna-chip--plain){border-color:var(--contrast-background, #1e1e1e)}.tna-chip-list{display:flex;flex-wrap:wrap;gap:8px 24px;list-style:none}.tna-chip-list__item{display:flex;align-items:center}.tna-heading-xl,.tna-heading-l,.tna-heading-m,.tna-heading-s,.tna-hgroup-s .tna-hgroup__title,.tna-hgroup-m .tna-hgroup__title,.tna-hgroup-l .tna-hgroup__title,.tna-hgroup-xl .tna-hgroup__title{color:var(--font-dark, rgb(1, 1, 1));text-wrap:pretty}.tna-heading-xl a,.tna-heading-l a,.tna-heading-m a,.tna-heading-s a,.tna-hgroup-s .tna-hgroup__title a,.tna-hgroup-m .tna-hgroup__title a,.tna-hgroup-l .tna-hgroup__title a,.tna-hgroup-xl .tna-hgroup__title a{display:inline-block;vertical-align:top}.tna-heading-xl a::after,.tna-heading-l a::after,.tna-heading-m a::after,.tna-heading-s a::after,.tna-hgroup-s .tna-hgroup__title a::after,.tna-hgroup-m .tna-hgroup__title a::after,.tna-hgroup-l .tna-hgroup__title a::after,.tna-hgroup-xl .tna-hgroup__title a::after{content:"";width:.3125em;height:.3125em;margin-bottom:.1em;margin-left:.375em;display:inline-block;vertical-align:middle;transform:rotate(45deg);border-top:.125em var(--link, #005fa3) solid;border-right:.125em var(--link, #005fa3) solid}.tna-heading-xl a:not(.tna-link--no-visited-state):visited::after,.tna-heading-l a:not(.tna-link--no-visited-state):visited::after,.tna-heading-m a:not(.tna-link--no-visited-state):visited::after,.tna-heading-s a:not(.tna-link--no-visited-state):visited::after,.tna-hgroup-s .tna-hgroup__title a:not(.tna-link--no-visited-state):visited::after,.tna-hgroup-m .tna-hgroup__title a:not(.tna-link--no-visited-state):visited::after,.tna-hgroup-l .tna-hgroup__title a:not(.tna-link--no-visited-state):visited::after,.tna-hgroup-xl .tna-hgroup__title a:not(.tna-link--no-visited-state):visited::after{border-color:var(--link-visited, #4c2c92)}.tna-heading-xl strong,.tna-heading-l strong,.tna-heading-m strong,.tna-heading-s strong,.tna-hgroup-s .tna-hgroup__title strong,.tna-hgroup-m .tna-hgroup__title strong,.tna-hgroup-l .tna-hgroup__title strong,.tna-hgroup-xl .tna-hgroup__title strong{font-weight:inherit}.tna-heading-xl,.tna-hgroup-xl .tna-hgroup__title{font-family:supria-sans-condensed,"Arial Narrow",sans-serif;font-weight:500;line-height:1.1;font-size:4rem}@media(min-width: 48.0625em)and (max-width: 64em){.tna-heading-xl,.tna-hgroup-xl .tna-hgroup__title{font-size:3rem}}@media(max-width: 48em){.tna-heading-xl,.tna-hgroup-xl .tna-hgroup__title{font-size:2.25rem}}.tna-heading-l,.tna-hgroup-l .tna-hgroup__title{font-family:supria-sans-condensed,"Arial Narrow",sans-serif;font-weight:500;line-height:1.3;font-size:2.25rem}@media(min-width: 48.0625em)and (max-width: 64em){.tna-heading-l,.tna-hgroup-l .tna-hgroup__title{font-size:1.875rem}}@media(min-width: 30.0625em)and (max-width: 48em){.tna-heading-l,.tna-hgroup-l .tna-hgroup__title{font-size:1.75rem}}@media(max-width: 30em){.tna-heading-l,.tna-hgroup-l .tna-hgroup__title{font-size:1.5625rem}}.tna-heading-l a::after,.tna-hgroup-l .tna-hgroup__title a::after{width:.275em;height:.275em;margin-bottom:0;margin-left:.25em;border-top-width:.1em;border-right-width:.1em}.tna-heading-m,.tna-hgroup-m .tna-hgroup__title{font-weight:700;line-height:1.6;font-size:1.375rem}@media(min-width: 48.0625em)and (max-width: 64em){.tna-heading-m,.tna-hgroup-m .tna-hgroup__title{font-size:1.3125rem}}@media(min-width: 30.0625em)and (max-width: 48em){.tna-heading-m,.tna-hgroup-m .tna-hgroup__title{font-size:1.25rem}}@media(max-width: 30em){.tna-heading-m,.tna-hgroup-m .tna-hgroup__title{font-size:1.1875rem}}.tna-heading-s,.tna-hgroup-s .tna-hgroup__title{font-weight:700;line-height:1.6;font-size:1.125rem}.tna-heading-xl,.tna-heading-l,.tna-heading-m,.tna-heading-s,.tna-hgroup-xl,.tna-hgroup-l,.tna-hgroup-m,.tna-hgroup-s{margin-bottom:0;padding:16px 0 0}.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{padding-top:0}.tna-heading-xl+p,.tna-heading-l+p,.tna-heading-m+p,.tna-heading-s+p,.tna-hgroup-xl+p,.tna-hgroup-l+p,.tna-hgroup-m+p,.tna-hgroup-s+p,.tna-heading-xl+.tna-large-paragraph,.tna-heading-l+.tna-large-paragraph,.tna-heading-m+.tna-large-paragraph,.tna-heading-s+.tna-large-paragraph,.tna-hgroup-xl+.tna-large-paragraph,.tna-hgroup-l+.tna-large-paragraph,.tna-hgroup-m+.tna-large-paragraph,.tna-hgroup-s+.tna-large-paragraph{margin-top:16px}.tna-heading--no-link-arrow a::after{display:none}.tna-hgroup__supertitle{margin:0 0 4px}.tna-hgroup__title{margin:0;display:block}.tna-blockquote{margin-right:0;margin-bottom:0;margin-left:0;padding:16px 16px 16px 32px;border-left:5px var(--accent-border, rgb(140, 150, 148)) solid}.tna-blockquote__quote{font-weight:600;quotes:auto;quotes:"‘" "’"}.tna-blockquote__quote :first-child::before{content:open-quote}.tna-blockquote__quote :last-child::after{content:close-quote}.tna-blockquote__citation{margin-top:16px;font-size:1rem}.tna-blockquote__citation::before{content:"—" " ";content:"—" " "/""}@media(max-width: 30em){.tna-blockquote{padding:8px 8px 8px 16px}}.tna-large-paragraph{font-size:1.375rem;color:var(--font-dark, rgb(1, 1, 1))}@media(max-width: 48em){.tna-large-paragraph{font-size:1.25rem}}.tna-scene-setter{font-family:Roboto Mono,monospace;font-style:normal;font-optical-sizing:auto;font-weight:400;color:var(--font-dark, rgb(1, 1, 1));font-size:1.375rem;line-height:1.7}@media(max-width: 48em){.tna-scene-setter{font-size:1.25rem}}.tna-scene-setter a{text-decoration-thickness:1.5px}.tna-scene-setter a:hover{text-decoration:underline;text-decoration-thickness:3.5px}ul,ol{margin:0;padding:0}.tna-ul{list-style-type:disc}.tna-ul,.tna-ol{margin-top:16px;padding-left:32px}.tna-ul:first-child,.tna-ol:first-child{margin-top:0}.tna-ul--plain,.tna-ol--plain{padding-left:0}.tna-ul--plain,.tna-ul--no-list-style,.tna-ol--plain,.tna-ol--no-list-style{list-style:none}.tna-ul>li>.tna-ul,.tna-ul>li>.tna-ol,.tna-ol>li>.tna-ul,.tna-ol>li>.tna-ol{margin-top:0;padding-left:20px}.tna-ul>li::marker,.tna-ol>li::marker{color:var(--accent-list-marker, rgb(1 1 1/0.58));font-weight:700}.tna-ul--spaced>li+li,.tna-ol--spaced>li+li{margin-top:8px}.tna-ul--spaced>li>.tna-ul,.tna-ul--spaced>li>.tna-ol,.tna-ol--spaced>li>.tna-ul,.tna-ol--spaced>li>.tna-ol{margin-top:16px;margin-bottom:16px}.tna-ul--dashed>li::marker,.tna-ol--dashed>li::marker{content:"— ";color:var(--font-light, rgb(1 1 1/0.58));font-weight:400}.tna-dl-chips{display:flex;flex-wrap:wrap;gap:12px 24px}.tna-dl-chips dt{position:absolute;font-size:0}.tna-dl-chips a.tna-dl-chips__item{cursor:pointer}.tna-dl-chips:not(.tna-dl-chips--plain){gap:8px 16px}.tna-dl-chips--plain a.tna-dl-chips__item{color:var(--link, #005fa3)}.tna-dl{display:flex;flex-wrap:wrap}.tna-dl:first-child{margin-top:0}.tna-dl dt,.tna-dl dd{margin:0;padding:8px 16px;box-sizing:border-box;position:relative;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--plain.tna-dl--spaced dt,.tna-dl--plain.tna-dl--spaced dd{padding-bottom:20px}.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:8px;left:16px;line-height:inherit;text-align:left;color:var(--icon-light, rgb(52 51 56/0.45))}.tna-dl--icon-padding.tna-dl--plain dt{padding-left:32px !important}.tna-dl--icon-padding.tna-dl--plain dt .fa-solid{top:0;left:0}.tna-dl--icon-padding.tna-dl--plain dd{padding-left:32px}@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:16px}.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:var(--background-tint, rgb(217, 217, 214));color:var(--font-base, #343338)}.tna-dl--stacked:not(.tna-dl--plain) dd{margin-left:0;background:rgba(0,0,0,0) !important}@media(max-width: 30em){.tna-dl dt,.tna-dl dd{width:100%;margin-left:0}.tna-dl dd{padding-left:16px}.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:var(--background-tint, rgb(217, 217, 214));color:var(--font-base, #343338)}.tna-dl:not(.tna-dl--plain) dd{margin-left:0;background:rgba(0,0,0,0) !important}}@media(forced-colors: active){.tna-dl{border-bottom:1px var(--keyline-dark, #26262a) solid}.tna-dl dt,.tna-dl dd{background:rgba(0,0,0,0) !important;border-top:1px var(--keyline-dark, #26262a) solid}}@media(prefers-contrast: more){.tna-dl{border-bottom:1px var(--keyline-dark, #26262a) solid}.tna-dl dt,.tna-dl dd{background:rgba(0,0,0,0) !important;border-top:1px var(--keyline-dark, #26262a) 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:8px !important}.tna-\!--margin-top-s,.tna-\!--margin-vertical-s{margin-top:16px !important}.tna-\!--margin-top-m,.tna-\!--margin-vertical-m{margin-top:32px !important}.tna-\!--margin-top-l,.tna-\!--margin-vertical-l{margin-top:48px !important}.tna-\!--margin-top-xl,.tna-\!--margin-vertical-xl{margin-top:80px !important}.tna-\!--margin-top-xxl,.tna-\!--margin-vertical-xxl{margin-top:128px !important}.tna-\!--margin-bottom-xs,.tna-\!--margin-vertical-xs{margin-bottom:8px !important}.tna-\!--margin-bottom-s,.tna-\!--margin-vertical-s{margin-bottom:16px !important}.tna-\!--margin-bottom-m,.tna-\!--margin-vertical-m{margin-bottom:32px !important}.tna-\!--margin-bottom-l,.tna-\!--margin-vertical-l{margin-bottom:48px !important}.tna-\!--margin-bottom-xl,.tna-\!--margin-vertical-xl{margin-bottom:80px !important}.tna-\!--margin-bottom-xxl,.tna-\!--margin-vertical-xxl{margin-bottom:128px !important}.tna-\!--padding-top-xs,.tna-\!--padding-vertical-xs{padding-top:8px !important}.tna-\!--padding-top-s,.tna-\!--padding-vertical-s{padding-top:16px !important}.tna-\!--padding-top-m,.tna-\!--padding-vertical-m{padding-top:32px !important}.tna-\!--padding-top-l,.tna-\!--padding-vertical-l{padding-top:48px !important}.tna-\!--padding-top-xl,.tna-\!--padding-vertical-xl{padding-top:80px !important}.tna-\!--padding-top-xxl,.tna-\!--padding-vertical-xxl{padding-top:128px !important}.tna-\!--padding-bottom-xs,.tna-\!--padding-vertical-xs{padding-bottom:8px !important}.tna-\!--padding-bottom-s,.tna-\!--padding-vertical-s{padding-bottom:16px !important}.tna-\!--padding-bottom-m,.tna-\!--padding-vertical-m{padding-bottom:32px !important}.tna-\!--padding-bottom-l,.tna-\!--padding-vertical-l{padding-bottom:48px !important}.tna-\!--padding-bottom-xl,.tna-\!--padding-vertical-xl{padding-bottom:80px !important}.tna-\!--padding-bottom-xxl,.tna-\!--padding-vertical-xxl{padding-bottom:128px !important}@media(max-width: 48em){.tna-\!--margin-top-xs,.tna-\!--margin-vertical-xs{margin-top:8px !important}.tna-\!--margin-top-s,.tna-\!--margin-vertical-s{margin-top:12px !important}.tna-\!--margin-top-m,.tna-\!--margin-vertical-m{margin-top:24px !important}.tna-\!--margin-top-l,.tna-\!--margin-vertical-l{margin-top:32px !important}.tna-\!--margin-top-xl,.tna-\!--margin-vertical-xl{margin-top:48px !important}.tna-\!--margin-top-xxl,.tna-\!--margin-vertical-xxl{margin-top:80px !important}.tna-\!--margin-bottom-xs,.tna-\!--margin-vertical-xs{margin-bottom:8px !important}.tna-\!--margin-bottom-s,.tna-\!--margin-vertical-s{margin-bottom:12px !important}.tna-\!--margin-bottom-m,.tna-\!--margin-vertical-m{margin-bottom:24px !important}.tna-\!--margin-bottom-l,.tna-\!--margin-vertical-l{margin-bottom:32px !important}.tna-\!--margin-bottom-xl,.tna-\!--margin-vertical-xl{margin-bottom:48px !important}.tna-\!--margin-bottom-xxl,.tna-\!--margin-vertical-xxl{margin-bottom:80px !important}.tna-\!--padding-top-xs,.tna-\!--padding-vertical-xs{padding-top:8px !important}.tna-\!--padding-top-s,.tna-\!--padding-vertical-s{padding-top:12px !important}.tna-\!--padding-top-m,.tna-\!--padding-vertical-m{padding-top:24px !important}.tna-\!--padding-top-l,.tna-\!--padding-vertical-l{padding-top:32px !important}.tna-\!--padding-top-xl,.tna-\!--padding-vertical-xl{padding-top:48px !important}.tna-\!--padding-top-xxl,.tna-\!--padding-vertical-xxl{padding-top:80px !important}.tna-\!--padding-bottom-xs,.tna-\!--padding-vertical-xs{padding-bottom:8px !important}.tna-\!--padding-bottom-s,.tna-\!--padding-vertical-s{padding-bottom:12px !important}.tna-\!--padding-bottom-m,.tna-\!--padding-vertical-m{padding-bottom:24px !important}.tna-\!--padding-bottom-l,.tna-\!--padding-vertical-l{padding-bottom:32px !important}.tna-\!--padding-bottom-xl,.tna-\!--padding-vertical-xl{padding-bottom:48px !important}.tna-\!--padding-bottom-xxl,.tna-\!--padding-vertical-xxl{padding-bottom:80px !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}}@media print{.tna-\!--hide-on-print{display:none}}.tna-button-group{display:flex;flex-wrap:wrap;align-items:center;gap:16px}@media(max-width: 30em){.tna-button-group{flex-direction:column;align-items:stretch}}.tna-button-group--small{gap:8px}.tna-button{padding:4px 16px;display:inline-flex;align-items:baseline;justify-content:center;gap:12px;line-height:2rem;text-align:center;text-decoration:none;text-wrap:balance;cursor:pointer;font-size:1.125rem;font-weight:700;background-color:var(--button-background, rgb(1, 1, 1));border:4px var(--button-background, rgb(1, 1, 1)) solid;-webkit-print-color-adjust:exact;print-color-adjust:exact}.tna-button,.tna-button:link,.tna-button:visited{color:var(--button-text, rgb(255, 255, 255))}.tna-button:hover{color:var(--button-hover-text, rgb(1, 1, 1));text-decoration:none;background:rgba(0,0,0,0)}.tna-button .fa-solid{display:block;font-size:.9em;line-height:1.7777777778}.tna-button svg{height:.9em;flex-shrink:0;align-self:center;fill:currentColor}.tna-button--plain{font-weight:400;background-color:rgba(0,0,0,0);border-color:rgba(0,0,0,0)}.tna-button--plain,.tna-button--plain:link,.tna-button--plain:visited{color:var(--link, #005fa3)}.tna-button--plain:hover{text-decoration:underline;text-decoration-thickness:3.5px}.tna-button--accent{background-color:var(--button-accented-background, rgb(140, 150, 148));border-color:var(--button-accented-background, rgb(140, 150, 148))}.tna-button--accent,.tna-button--accent:link,.tna-button--accent:visited{color:var(--button-accented-text, rgb(1, 1, 1))}.tna-button--accent:hover{color:var(--font-dark, rgb(1, 1, 1))}.tna-button--icon-right{flex-direction:row-reverse}.tna-button--small,.tna-button-group--small .tna-button{padding:0 8px;font-size:0.875rem;line-height:1.5rem}.tna-button--icon-only{padding-right:0;padding-left:0;gap:0;font-size:0 !important;line-height:0 !important}.tna-button--icon-only .fa-solid{width:2.5rem;font-size:1.125rem}.tna-button--icon-only svg{height:1.5rem;margin:.5rem}.tna-button--small.tna-button--icon-only,.tna-button-group--small .tna-button--icon-only{padding-right:0;padding-left:0}.tna-button--small.tna-button--icon-only .fa-solid,.tna-button-group--small .tna-button--icon-only .fa-solid{width:2rem;font-size:1.0125rem;line-height:2rem}.tna-button--small.tna-button--icon-only svg,.tna-button-group--small .tna-button--icon-only svg{height:1rem;margin:.5rem}@media(max-width: 48em){.tna-button--icon-only-mobile{padding-right:0;padding-left:0;gap:0;font-size:0 !important;line-height:0 !important}.tna-button--icon-only-mobile .fa-solid{width:2.5rem;font-size:1.125rem}.tna-button--icon-only-mobile svg{height:1.5rem;margin:.5rem}.tna-button--small.tna-button--icon-only-mobile,.tna-button-group--small .tna-button--icon-only-mobile{padding-right:0;padding-left:0}.tna-button--small.tna-button--icon-only-mobile .fa-solid,.tna-button-group--small .tna-button--icon-only-mobile .fa-solid{width:2rem;font-size:1.0125rem;line-height:2rem}.tna-button--small.tna-button--icon-only-mobile svg,.tna-button-group--small .tna-button--icon-only-mobile svg{height:1rem;margin:.5rem}}.tna-button--solid-hover:not(.tna-button--plain):hover{color:var(--font-dark, rgb(1, 1, 1));background-color:var(--background, #f4f4f4)}.tna-background-accent .tna-button:hover{color:var(--font-dark, rgb(1, 1, 1))}.tna-background-accent .tna-button--accent{background-color:var(--button-background, rgb(1, 1, 1));border-color:var(--button-background, rgb(1, 1, 1))}.tna-background-accent .tna-button--accent,.tna-background-accent .tna-button--accent:link,.tna-background-accent .tna-button--accent:visited{color:var(--button-text, rgb(255, 255, 255))}.tna-background-accent .tna-button--accent:hover{color:var(--font-dark, rgb(1, 1, 1));background-color:var(--background, #f4f4f4)}@media(forced-colors: active){.tna-button:hover{text-decoration:underline;text-decoration-thickness:3.5px}}.tna-footer__inner{padding-top:16px;padding-bottom:48px}.tna-footer__theme-selector .tna-button-group{justify-content:flex-end}.tna-footer__theme-selector .tna-button{font-weight:700}@media(forced-colors: active){.tna-footer__theme-selector{display:none}}.tna-footer .tna-logo{margin-top:32px}.tna-footer .tna-logo__background{fill:rgba(0,0,0,0)}.tna-footer .tna-logo__foreground{fill:currentColor}.tna-footer__title{margin-top:16px;margin-bottom:0;padding-top:0}.tna-footer__address{font-style:normal}.tna-footer__meta{margin-top:16px;font-size:1rem}.tna-footer__social{margin-top:32px}.tna-footer__social-items{display:flex;flex-wrap:wrap;align-items:flex-start;gap:5px}.tna-footer__social-item-link{width:calc(2rem + 8px);height:2rem;padding:4px;display:block;line-height:1;text-align:center;border:0 rgba(0,0,0,0) solid;border-width:4px 0}.tna-footer__social-item-link svg{height:2rem;display:inline-block}.tna-footer__social-item-link svg path{fill:currentColor}.tna-footer__social-item-link:hover{border-bottom:4px var(--link, #005fa3) solid}.tna-footer__mailing-list{margin-top:32px;padding:16px;font-size:1rem;background-color:rgba(255,255,255,.14)}.tna-footer__navigation-block{padding-top:32px}.tna-footer__navigation-block-item{padding-top:6px;padding-bottom:6px;font-size:1rem;border-bottom:1px var(--keyline, rgb(38 38 42/0.25)) solid}.tna-footer__navigation-block-item-link{display:inline-block;text-decoration:none}.tna-footer__navigation-block-item-link:hover{text-decoration:underline;text-decoration-thickness:3.5px}.tna-footer__navigation-block-item-link .fa-solid{margin-left:12px}.tna-footer__legal{padding-top:48px;font-size:1rem}.tna-footer__legal-items{margin-bottom:0;text-align:center}@media(max-width: 30em){.tna-footer__legal-items{text-align:inherit}}.tna-footer__legal-item{padding:8px;display:inline-block}@media(max-width: 30em){.tna-footer__legal-item{display:block}}.tna-footer hr{margin-top:24px;margin-bottom:8px}.tna-footer__licence{font-size:1rem}.tna-footer__licence.tna-container{align-items:center}.tna-footer__licence .tna-column{margin-top:16px}.tna-footer__licence-logo{display:block}.tna-footer__govuk{text-align:center}.tna-footer__govuk-link{display:inline-block}.tna-footer__govuk-logotype-crown{margin:0 auto 2px;display:block}@media(max-width: 48em){.tna-footer__inner{padding-top:0;padding-bottom:32px}}@media(prefers-contrast: more){.tna-footer__theme-selector{border-bottom:1px var(--keyline, rgb(38 38 42/0.25)) solid}}@media(forced-colors: active){.tna-footer{border-top:5px var(--keyline-dark, #26262a) solid}.tna-footer__navigation-block-items{border-top:5px var(--keyline-dark, #26262a) solid}.tna-footer__mailing-list{background-color:rgba(0,0,0,0);border:1px var(--keyline-dark, #26262a) solid}}@media(prefers-contrast: more){.tna-footer{border-top:5px var(--keyline-dark, #26262a) solid}.tna-footer__navigation-block-items{border-top:5px var(--keyline-dark, #26262a) solid}.tna-footer__mailing-list{background-color:rgba(0,0,0,0);border:1px var(--keyline-dark, #26262a) solid}}.tna-global-header{padding-top:16px;background:linear-gradient(0deg, rgb(34, 34, 34) 0%, rgb(0, 0, 0) 100%);color:var(--font-base, #343338)}.tna-template--dark-theme .tna-global-header{background:#010101}@media(prefers-color-scheme: dark){.tna-template--system-theme .tna-global-header{background:#010101}}.tna-global-header__main{padding-bottom:24px}.tna-global-header__logo-wrapper{margin-top:8px;display:flex}.tna-global-header__logo{display:flex;align-items:flex-end;gap:16px;text-decoration:none}.tna-global-header__logo--link,.tna-global-header__logo--link:link,.tna-global-header__logo--link:visited{color:var(--font-base, #343338)}.tna-global-header__logo--link:hover{text-decoration:none;outline:.3125rem var(--font-dark, rgb(1, 1, 1)) solid;outline-offset:1px}.tna-global-header .tna-logo{width:6.75rem;height:6.75rem;flex-shrink:0}.tna-global-header__logo-strapline{padding-right:10px;line-height:2.25rem;text-transform:uppercase;font-family:supria-sans-condensed,"Arial Narrow",sans-serif;font-weight:500;font-size:1.25rem}.tna-global-header__navigation-button-wrapper{display:none}.tna-global-header__hamburger{width:2rem;height:.25rem;display:inline-block;background-color:var(--font-dark, rgb(1, 1, 1))}.tna-global-header__hamburger::before,.tna-global-header__hamburger::after{content:"";width:2rem;height:.25rem;display:block;position:absolute;right:0;background-color:inherit}.tna-global-header__hamburger::before{top:0}.tna-global-header__hamburger::after{bottom:0}.tna-global-header__navigation-button{height:2rem;padding:0;appearance:none;display:flex;align-items:center;gap:.75rem;position:relative;color:inherit;background:none;border:0 rgba(0,0,0,0) solid;border-width:.25rem 0;cursor:pointer;font-weight:700;font-size:1rem}.tna-global-header__navigation-button:hover{text-decoration:underline;text-decoration-thickness:3.5px}.tna-global-header__navigation-button--opened .tna-global-header__hamburger{height:0}.tna-global-header__navigation-button--opened .tna-global-header__hamburger::before{top:.625rem;transform:rotate(-135deg)}.tna-global-header__navigation-button--opened .tna-global-header__hamburger::after{bottom:.625rem;transform:rotate(135deg)}.tna-global-header__navigation{height:100%;margin:8px 0 0;position:relative;columns:2;column-gap:32px;list-style:none}.tna-global-header__navigation-item{break-inside:avoid}.tna-global-header__navigation-item-link{min-width:15rem;height:2.25rem;display:block;box-sizing:border-box;line-height:2.25rem;text-decoration:none;font-size:1.0625rem;border-bottom:.5px var(--keyline, rgb(38 38 42/0.25)) solid}.tna-global-header__navigation-item-link,.tna-global-header__navigation-item-link:link,.tna-global-header__navigation-item-link:visited{color:var(--font-base, #343338)}.tna-global-header__navigation-item-link:hover{text-decoration:underline;text-decoration-thickness:3.5px}.tna-global-header__top-navigation{padding:0 0 8px;display:flex;justify-content:flex-end;gap:24px;font-size:0.9375rem;list-style:none}.tna-global-header__top-navigation-link{display:flex;align-items:center;gap:8px;text-decoration:none}.tna-global-header__top-navigation-link,.tna-global-header__top-navigation-link:link,.tna-global-header__top-navigation-link:visited{color:var(--font-light, rgb(1 1 1/0.58))}.tna-global-header__top-navigation-link:hover{color:var(--font-base, #343338);text-decoration:underline;text-decoration-thickness:3.5px}.tna-global-header__top-navigation-link svg{height:1em;display:inline-block}.tna-global-header__top-navigation-link svg path{fill:currentColor}@media(min-width: 48.0625em)and (max-width: 64em){.tna-global-header__navigation{column-gap:16px}.tna-global-header__navigation-item-link{font-size:1rem}.tna-global-header--collapse-on-medium .tna-global-header__navigation-wrapper{width:100%}.tna-global-header--collapse-on-medium .tna-global-header__top-navigation-wrapper{flex:1;order:2}.tna-global-header--collapse-on-medium .tna-global-header__main{padding-bottom:16px}.tna-global-header--collapse-on-medium .tna-global-header__logo{gap:12px}.tna-global-header--collapse-on-medium .tna-global-header__logo-wrapper{margin-top:8px;margin-bottom:8px}.tna-global-header--collapse-on-medium .tna-logo{width:5rem;height:5rem}.tna-global-header--collapse-on-medium .tna-global-header__logo-strapline{line-height:1.6666666667rem}.tna-global-header--collapse-on-medium .tna-global-header__navigation{margin-bottom:8px}.tna-global-header--collapse-on-medium .tna-global-header__navigation,.tna-global-header--collapse-on-medium .tna-global-header__navigation-item,.tna-global-header--collapse-on-medium .tna-global-header__navigation-item-link{height:auto}}@media(max-width: 48em){.tna-global-header__main{padding-bottom:0}.tna-global-header__logo-wrapper,.tna-global-header__navigation-button-wrapper{margin-top:0;margin-bottom:16px}.tna-global-header__logo{gap:12px}.tna-global-header__navigation-button-wrapper{display:flex;align-items:center}.tna-global-header__navigation,.tna-global-header__navigation-item,.tna-global-header__navigation-item-link{height:auto}.tna-global-header__navigation{margin-top:0;columns:1;background-color:rgba(255,255,255,.1);border-top:2px var(--keyline-dark, #26262a) solid;border-bottom:2px var(--keyline-dark, #26262a) solid}.tna-global-header__navigation-item{flex-direction:column;align-items:flex-start}.tna-global-header__navigation-item-link{line-height:1.75rem;font-weight:600}.tna-global-header__navigation-item:last-child .tna-global-header__navigation-item-link{border-bottom:none}.tna-global-header__navigation-item-contents{display:block}.tna-global-header__navigation-item-children{margin-bottom:16px;margin-left:24px}.tna-global-header__top-navigation{padding-top:8px;padding-bottom:8px;justify-content:flex-start;gap:24px}.tna-global-header__top-navigation-link{padding:4px 0}}@media(min-width: 30.0625em)and (max-width: 48em){.tna-global-header .tna-logo{width:4rem;height:4rem}.tna-global-header__logo-strapline{line-height:1.25rem}.tna-global-header__navigation{width:calc(100% + 60px);left:-30px}.tna-global-header__navigation-item-link{padding:8px 30px}}@media(max-width: 30em){.tna-global-header .tna-logo{width:3.5rem;height:3.5rem}.tna-global-header__logo-strapline{line-height:1}.tna-global-header__navigation-button{font-size:0.875rem}.tna-global-header__navigation{width:calc(100% + 30px);left:-15px}.tna-global-header__navigation-item-link{padding:8px 15px}}@media(forced-colors: active){.tna-global-header{border-bottom:1px var(--keyline, rgb(38 38 42/0.25)) solid}}@media(prefers-contrast: more){.tna-global-header{border-bottom:1px var(--keyline, rgb(38 38 42/0.25)) solid}}@media(forced-colors: active){.tna-global-header__navigation-button{height:auto;line-height:2;font-size:1.125rem;font-weight:700;border:none}.tna-global-header__hamburger{display:none}}.tna-skip-link{width:1px !important;height:1px !important;margin:0 !important;padding:0 !important;display:block !important;overflow:hidden !important;position:absolute !important;left:-100vw;white-space:nowrap !important;clip:rect(0 0 0 0) !important;-webkit-clip-path:inset(50%) !important;clip-path:inset(50%) !important}.tna-skip-link,.tna-skip-link:link,.tna-skip-link:visited{color:var(--button-text, rgb(255, 255, 255)) !important}.tna-skip-link:focus{background-color:var(--button-background, rgb(1, 1, 1)) !important;border:5px var(--focus-outline, rgb(0, 176, 255)) solid !important;outline:none !important}.tna-skip-link:active,.tna-skip-link:focus{width:auto !important;height:auto !important;margin:inherit !important;padding:16px !important;overflow:visible !important;position:static !important;white-space:inherit !important;clip:auto !important;-webkit-clip-path:none !important;clip-path:none !important}.tna-skip-link:active:hover,.tna-skip-link:focus:hover{color:var(--button-hover-text, rgb(1, 1, 1)) !important;background-color:var(--button-hover-background, rgb(255, 255, 255)) !important}.tna-template{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;-webkit-text-size-adjust:none;text-size-adjust:none;direction:ltr;--background: #fff}hr{border-width:1px 0 0;border-color:var(--keyline, rgb(38 38 42/0.25));border-style:solid}.tna-heading-s,.tna-heading-m,.tna-heading-l,.tna-heading-xl{color:var(--font-dark, rgb(1, 1, 1))}.tna-heading-s strong,.tna-heading-m strong,.tna-heading-l strong,.tna-heading-xl strong{font-weight:inherit}.tna-heading-xl{font-family:supria-sans-condensed,"Arial Narrow",sans-serif;font-weight:500;font-size:4rem;line-height:1.1}@media(min-width: 48.0625em)and (max-width: 64em){.tna-heading-xl{font-size:3rem}}@media(max-width: 48em){.tna-heading-xl{font-size:2.25rem}}.tna-heading-l{font-family:supria-sans-condensed,"Arial Narrow",sans-serif;font-weight:500;font-size:2.25rem;line-height:1.3}@media(min-width: 48.0625em)and (max-width: 64em){.tna-heading-l{font-size:1.875rem}}@media(min-width: 30.0625em)and (max-width: 48em){.tna-heading-l{font-size:1.75rem}}@media(max-width: 30em){.tna-heading-l{font-size:1.5625rem}}.tna-heading-m{font-weight:700;font-size:1.375rem;line-height:1.6}@media(min-width: 48.0625em)and (max-width: 64em){.tna-heading-m{font-size:1.3125rem}}@media(min-width: 30.0625em)and (max-width: 48em){.tna-heading-m{font-size:1.25rem}}@media(max-width: 30em){.tna-heading-m{font-size:1.1875rem}}.tna-heading-s{font-weight:700;font-size:1.125rem;line-height:1.6}.tna-heading-s,.tna-heading-m,.tna-heading-l,.tna-heading-xl{margin:32px 0 0;padding:16px 0 0}.tna-heading-s:first-child,.tna-heading-m:first-child,.tna-heading-l:first-child,.tna-heading-xl:first-child{margin-top:0;padding-top:0}.tna-heading-s+p,.tna-heading-m+p,.tna-heading-l+p,.tna-heading-xl+p{margin-top:16px}.tna-button,.tna-button:link,.tna-button:visited{text-decoration:none}.tna-global-header{padding-bottom:0}.tna-global-header__logo:link{display:flex}.tna-global-header__navigation{padding:0}.tna-global-header__navigation-item{margin-left:0;margin-bottom:0}.tna-global-header__navigation-item-link,.tna-global-header__navigation-item-link:link,.tna-global-header__navigation-item-link:visited{display:block}.tna-global-header__top-navigation{margin-top:0;margin-bottom:0}.tna-global-header__top-navigation-item{margin-left:0;margin-bottom:0}.tna-global-header__top-navigation-link{display:flex !important;color:var(--font-light, rgb(1 1 1/0.58)) !important}.tna-global-header__top-navigation-link:hover{color:var(--font-base, #343338) !important}.tna-footer__title{margin-top:0}.tna-footer__address{margin-bottom:0}.tna-footer .tna-heading-m{font-weight:400;line-height:1.5;letter-spacing:-0.025em}.tna-footer__social-item,.tna-footer__navigation-block-item,.tna-footer__legal-item{margin-left:0;margin-bottom:0}.tna-footer__social-item-link{box-sizing:content-box}.tna-footer address{line-height:inherit}.tna-footer hr{height:0 !important;border-top:1px var(--keyline, rgb(38 38 42/0.25)) solid;border-bottom:none !important}.tna-footer__licence p{margin-top:0;margin-bottom:0}.tna-footer__legal-item-link,.tna-footer__licence p a{text-decoration:underline !important}.tna-footer__legal-item-link:hover,.tna-footer__legal-item-link:active,.tna-footer__licence p a:hover,.tna-footer__licence p a:active{text-decoration-thickness:3.5px !important}.tna-global-header *,.tna-footer *{color:inherit}.tna-global-header a:not(.tna-button),.tna-footer a:not(.tna-button){text-decoration:none;text-decoration-thickness:1.5px}.tna-global-header a:not(.tna-button),.tna-global-header a:not(.tna-button):link,.tna-footer a:not(.tna-button),.tna-footer a:not(.tna-button):link{color:var(--link, #005fa3) !important}.tna-global-header a:not(.tna-button):visited,.tna-footer a:not(.tna-button):visited{color:var(--link-visited, #4c2c92)}.tna-global-header a:not(.tna-button):hover,.tna-global-header a:not(.tna-button):active,.tna-footer a:not(.tna-button):hover,.tna-footer a:not(.tna-button):active{text-decoration:underline;text-decoration-thickness:3.5px;background:none !important;outline:none}.tna-global-header a:not(.tna-button):focus,.tna-footer a:not(.tna-button):focus{background:none !important}.tna-global-header a:not(.tna-button):hover:focus,.tna-footer a:not(.tna-button):hover:focus{color:unset !important;background:unset !important}.tna-global-header a:not(.tna-button).tna-link--no-visited-state:visited,.tna-footer a:not(.tna-button).tna-link--no-visited-state:visited{color:var(--link, #005fa3)}/*# sourceMappingURL=global-header-package.css.map */
|
|
1
|
+
.tna-template{--background: #f4f4f4;--background-tint: rgb(217, 217, 214);--font-base: #343338;--font-dark: rgb(1, 1, 1);--font-light: rgb(1 1 1/0.58);--icon-light: rgb(52 51 56/0.45);--link: #005fa3;--link-visited: #4c2c92;--focus-outline: rgb(0, 176, 255);--keyline: rgb(38 38 42/0.25);--keyline-dark: #26262a;--input-foreground: rgb(1, 1, 1);--input-background: rgb(255, 255, 255);--input-border: rgb(1, 1, 1);--form-error-text: #c20000;--button-text: rgb(255, 255, 255);--button-background: rgb(1, 1, 1);--button-hover-text: rgb(1, 1, 1);--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(1, 1, 1);--contrast-button-background: rgb(255, 255, 255);--contrast-button-hover-text: rgb(255, 255, 255);--contrast-button-hover-background: rgb(1, 1, 1);--accent-background: #afb6b5;--accent-background-light: rgb(217, 217, 214);--accent-border: rgb(140, 150, 148);--accent-list-marker: rgb(1 1 1/0.58);--accent-font-base: rgb(1, 1, 1);--accent-font-dark: rgb(1, 1, 1);--accent-font-light: rgb(1 1 1/0.7);--accent-icon-light: rgb(1 1 1/0.45);--accent-link: rgb(1, 1, 1);--accent-link-visited: rgb(1, 1, 1);--accent-keyline: rgb(1 1 1/0.5);--accent-keyline-dark: rgb(1 1 1/0.8);--accent-button-text: rgb(255, 255, 255);--accent-button-background: rgb(1, 1, 1);--accent-button-hover-text: rgb(1, 1, 1);--accent-button-hover-background: rgb(255, 255, 255);--button-accented-text: rgb(1, 1, 1);--button-accented-background: rgb(140, 150, 148)}@media(prefers-contrast: more){.tna-template{--background: rgb(255, 255, 255);--background-tint: #ddd;--font-base: rgb(1, 1, 1);--font-dark: rgb(1, 1, 1);--font-light: rgb(1, 1, 1);--icon-light: rgb(1 1 1/0.75);--link: #34d;--link-visited: #848;--focus-outline: rgb(253, 63, 3);--keyline: rgb(1, 1, 1);--keyline-dark: rgb(1, 1, 1);--input-foreground: rgb(1, 1, 1);--input-background: rgb(255, 255, 255);--input-border: rgb(1, 1, 1);--form-error-text: #c20000;--button-text: rgb(255, 255, 255);--button-background: rgb(1, 1, 1);--button-hover-text: rgb(1, 1, 1);--button-hover-background: rgb(255, 255, 255);--contrast-background: rgb(1, 1, 1);--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(0, 176, 255);--contrast-link-visited: #a8f;--contrast-keyline: rgb(255 255 255/0.5);--contrast-keyline-dark: rgb(255 255 255/0.8);--contrast-button-text: rgb(1, 1, 1);--contrast-button-background: rgb(255, 255, 255);--contrast-button-hover-text: rgb(255, 255, 255);--contrast-button-hover-background: rgb(1, 1, 1);--accent-background: #afb6b5;--accent-background-light: rgb(217, 217, 214);--accent-border: rgb(140, 150, 148);--accent-list-marker: rgb(1 1 1/0.58);--accent-font-base: rgb(1, 1, 1);--accent-font-dark: rgb(1, 1, 1);--accent-font-light: rgb(1 1 1/0.7);--accent-icon-light: rgb(1 1 1/0.45);--accent-link: rgb(1, 1, 1);--accent-link-visited: rgb(1, 1, 1);--accent-keyline: rgb(1 1 1/0.5);--accent-keyline-dark: rgb(1 1 1/0.8);--accent-button-text: rgb(255, 255, 255);--accent-button-background: rgb(1, 1, 1);--accent-button-hover-text: rgb(1, 1, 1);--accent-button-hover-background: rgb(255, 255, 255);--button-accented-text: rgb(1, 1, 1);--button-accented-background: rgb(140, 150, 148)}}.tna-global-header,.tna-footer__inner,.tna-background-accent .tna-button--accent,.tna-background-accent .tna-chip:not(.tna-chip--plain),.tna-background-accent .tna-hgroup__supertitle:not(.tna-hgroup__supertitle--plain),.tna-background-accent .tna-dl-chips:not(.tna-dl-chips--plain) .tna-dl-chips__item,.tna-dl-chips:not(.tna-dl-chips--plain) .tna-background-accent .tna-dl-chips__item,.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);--accent-list-marker: var(--accent-border);background-color:var(--background, #f4f4f4);color:var(--font-base, #343338)}.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),.tna-background-tint{--background: var(--background-tint);background-color:var(--background, #f4f4f4);color:var(--font-base, #343338)}.tna-chip:not(.tna-chip--plain),.tna-hgroup__supertitle:not(.tna-hgroup__supertitle--plain),.tna-dl-chips:not(.tna-dl-chips--plain) .tna-dl-chips__item,.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);--accent-list-marker: var(--accent-font-base);--accent-border: var(--accent-font-dark);--button-text: var(--accent-button-text);--button-background: var(--accent-button-background);--button-hover-text: var(--accent-button-hover-text);--button-hover-background: var(--accent-button-hover-background);background-color:var(--background, #f4f4f4);color:var(--font-base, #343338)}.tna-background-accent-light{--background: var(--accent-background-light);--font-base: #343338;--font-dark: rgb(1, 1, 1);--font-light: rgb(1 1 1/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(1, 1, 1);--button-hover-text: rgb(1, 1, 1);--button-hover-background: rgb(255, 255, 255);--accent-border: var(--font-base);--accent-list-marker: var(--font-base);background-color:var(--background, #f4f4f4);color:var(--font-base, #343338)}@media(prefers-color-scheme: dark){.tna-template--system-theme .tna-background-accent-light{--link: #005fa3;--link-visited: #4c2c92}}.tna-template--dark-theme .tna-background-accent-light{--link: #005fa3;--link-visited: #4c2c92}.tna-chip--yellow,.tna-template--yellow-accent,.tna-accent-yellow{--accent-background: rgb(255, 204, 0) !important;--accent-background-light: rgb(249, 247, 226) !important;--accent-border: rgb(255, 204, 0) !important;--accent-list-marker: rgb(101, 78, 55) !important;--accent-font-base: rgb(1, 1, 1) !important;--accent-font-dark: rgb(1, 1, 1) !important;--accent-font-light: rgb(1 1 1/0.7) !important;--accent-icon-light: rgb(1 1 1/0.45) !important;--accent-link: rgb(1, 1, 1) !important;--accent-link-visited: rgb(1, 1, 1) !important;--accent-keyline: rgb(1 1 1/0.5) !important;--accent-keyline-dark: rgb(1 1 1/0.8) !important;--button-accented-text: rgb(255, 255, 255) !important;--button-accented-background: rgb(101, 78, 55) !important}.tna-chip--black,.tna-chip--pink,.tna-chip--orange,.tna-chip--green,.tna-chip--blue,.tna-template--black-accent,.tna-template--pink-accent,.tna-template--orange-accent,.tna-template--green-accent,.tna-template--blue-accent,.tna-accent-black,.tna-accent-pink,.tna-accent-orange,.tna-accent-green,.tna-accent-blue{--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-accented-text: rgb(255, 255, 255) !important}.tna-chip--black,.tna-template--black-accent,.tna-accent-black{--accent-background: rgb(1, 1, 1) !important;--accent-background-light: rgb(217, 217, 214) !important;--accent-border: rgb(1, 1, 1) !important;--accent-list-marker: rgb(140, 150, 148) !important;--button-accented-text: rgb(1, 1, 1) !important;--button-accented-background: rgb(140, 150, 148) !important}.tna-chip--pink,.tna-template--pink-accent,.tna-accent-pink{--accent-background: rgb(156, 25, 58) !important;--accent-background-light: rgb(250, 211, 212) !important;--accent-border: rgb(254, 29, 87) !important;--accent-list-marker: rgb(254, 29, 87) !important;--button-accented-background: rgb(156, 25, 58) !important}.tna-chip--orange,.tna-template--orange-accent,.tna-accent-orange{--accent-background: rgb(143, 52, 21) !important;--accent-background-light: rgb(249, 225, 188) !important;--accent-border: rgb(253, 63, 3) !important;--accent-list-marker: rgb(253, 63, 3) !important;--button-accented-background: rgb(143, 52, 21) !important}.tna-chip--green,.tna-template--green-accent,.tna-accent-green{--accent-background: rgb(0, 98, 59) !important;--accent-background-light: rgb(221, 229, 213) !important;--accent-border: rgb(134, 188, 37) !important;--accent-list-marker: rgb(134, 188, 37) !important;--button-accented-background: rgb(0, 98, 59) !important}.tna-chip--blue,.tna-template--blue-accent,.tna-accent-blue{--accent-background: rgb(0, 76, 126) !important;--accent-background-light: rgb(212, 229, 239) !important;--accent-border: rgb(0, 176, 255) !important;--accent-list-marker: rgb(0, 176, 255) !important;--button-accented-background: rgb(0, 76, 126) !important}.tna-button-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:32px}.tna-button-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-dl-chips,.tna-dl{margin:32px 0 0}.tna-dl-chips:first-child,.tna-dl:first-child{margin-top:0}.tna-visually-hidden,.tna-\!--visually-hidden{width:1px !important;height:1px !important;margin:0 !important;padding:0 !important;overflow:hidden !important;position:absolute !important;top:-9999px !important;left:-9999px !important;z-index:-1 !important;background-color:rgba(0,0,0,0) !important;border:0 !important;clip:rect(0, 0, 0, 0) !important}*:focus{z-index:9;outline:5px var(--focus-outline, rgb(0, 176, 255)) solid;outline-offset:2px}*:active{outline-offset:0}.tna-\!--no-focus-style:focus,*[tabindex="-1"]:focus{outline:none}.tna-template{background-color:var(--background, #f4f4f4)}@media(prefers-color-scheme: dark){.tna-template--system-theme{--background: #212223;--background-tint: #323334;--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(1, 1, 1);--input-border: rgb(255, 255, 255);--form-error-border: #f00;--form-error-text: #ff6b6b;--button-text: rgb(1, 1, 1);--button-background: rgb(255, 255, 255);--button-hover-text: rgb(255, 255, 255);--button-hover-background: rgb(1, 1, 1);--contrast-background: #101112;--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(1, 1, 1);--contrast-button-background: rgb(255, 255, 255);--contrast-button-hover-text: rgb(255, 255, 255);--contrast-button-hover-background: rgb(1, 1, 1);--accent-background: #afb6b5;--accent-background-light: rgb(217, 217, 214);--accent-border: rgb(255, 255, 255);--accent-list-marker: rgb(255 255 255/0.51);--accent-font-base: rgb(1, 1, 1);--accent-font-dark: rgb(1, 1, 1);--accent-font-light: rgb(1 1 1/0.7);--accent-icon-light: rgb(1 1 1/0.45);--accent-link: rgb(1, 1, 1);--accent-link-visited: rgb(1, 1, 1);--accent-keyline: rgb(1 1 1/0.5);--accent-keyline-dark: rgb(1 1 1/0.8);--accent-button-text: rgb(255, 255, 255);--accent-button-background: rgb(1, 1, 1);--accent-button-hover-text: rgb(1, 1, 1);--accent-button-hover-background: rgb(255, 255, 255);--button-accented-text: rgb(1, 1, 1);--button-accented-background: rgb(140, 150, 148)}}@media(prefers-contrast: more)and (prefers-color-scheme: dark){.tna-template--system-theme{--background: #111;--background-tint: #323334;--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(1, 1, 1);--input-border: rgb(255, 255, 255);--form-error-border: #ff6b6b;--form-error-text: #ff6b6b;--button-text: rgb(1, 1, 1);--button-background: rgb(255, 255, 255);--button-hover-text: rgb(255, 255, 255);--button-hover-background: rgb(1, 1, 1);--contrast-background: rgb(1, 1, 1);--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(0, 176, 255);--contrast-link-visited: #a8f;--contrast-keyline: rgb(255 255 255/0.5);--contrast-keyline-dark: rgb(255 255 255/0.8);--contrast-button-text: rgb(1, 1, 1);--contrast-button-background: rgb(255, 255, 255);--contrast-button-hover-text: rgb(255, 255, 255);--contrast-button-hover-background: rgb(1, 1, 1);--accent-background: #afb6b5;--accent-background-light: rgb(217, 217, 214);--accent-border: rgb(255, 255, 255);--accent-list-marker: rgb(255 255 255/0.51);--accent-font-base: rgb(1, 1, 1);--accent-font-dark: rgb(1, 1, 1);--accent-font-light: rgb(1 1 1/0.7);--accent-icon-light: rgb(1 1 1/0.45);--accent-link: rgb(1, 1, 1);--accent-link-visited: rgb(1, 1, 1);--accent-keyline: rgb(1 1 1/0.5);--accent-keyline-dark: rgb(1 1 1/0.8);--accent-button-text: rgb(255, 255, 255);--accent-button-background: rgb(1, 1, 1);--accent-button-hover-text: rgb(1, 1, 1);--accent-button-hover-background: rgb(255, 255, 255);--button-accented-text: rgb(1, 1, 1);--button-accented-background: rgb(140, 150, 148)}}.tna-template--dark-theme{--background: #212223;--background-tint: #323334;--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(1, 1, 1);--input-border: rgb(255, 255, 255);--form-error-border: #f00;--form-error-text: #ff6b6b;--button-text: rgb(1, 1, 1);--button-background: rgb(255, 255, 255);--button-hover-text: rgb(255, 255, 255);--button-hover-background: rgb(1, 1, 1);--contrast-background: #101112;--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(1, 1, 1);--contrast-button-background: rgb(255, 255, 255);--contrast-button-hover-text: rgb(255, 255, 255);--contrast-button-hover-background: rgb(1, 1, 1);--accent-background: #afb6b5;--accent-background-light: rgb(217, 217, 214);--accent-border: rgb(255, 255, 255);--accent-list-marker: rgb(255 255 255/0.51);--accent-font-base: rgb(1, 1, 1);--accent-font-dark: rgb(1, 1, 1);--accent-font-light: rgb(1 1 1/0.7);--accent-icon-light: rgb(1 1 1/0.45);--accent-link: rgb(1, 1, 1);--accent-link-visited: rgb(1, 1, 1);--accent-keyline: rgb(1 1 1/0.5);--accent-keyline-dark: rgb(1 1 1/0.8);--accent-button-text: rgb(255, 255, 255);--accent-button-background: rgb(1, 1, 1);--accent-button-hover-text: rgb(1, 1, 1);--accent-button-hover-background: rgb(255, 255, 255);--button-accented-text: rgb(1, 1, 1);--button-accented-background: rgb(140, 150, 148)}@media(prefers-contrast: more){.tna-template--dark-theme{--background: #111;--background-tint: #323334;--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(1, 1, 1);--input-border: rgb(255, 255, 255);--form-error-border: #ff6b6b;--form-error-text: #ff6b6b;--button-text: rgb(1, 1, 1);--button-background: rgb(255, 255, 255);--button-hover-text: rgb(255, 255, 255);--button-hover-background: rgb(1, 1, 1);--contrast-background: rgb(1, 1, 1);--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(0, 176, 255);--contrast-link-visited: #a8f;--contrast-keyline: rgb(255 255 255/0.5);--contrast-keyline-dark: rgb(255 255 255/0.8);--contrast-button-text: rgb(1, 1, 1);--contrast-button-background: rgb(255, 255, 255);--contrast-button-hover-text: rgb(255, 255, 255);--contrast-button-hover-background: rgb(1, 1, 1);--accent-background: #afb6b5;--accent-background-light: rgb(217, 217, 214);--accent-border: rgb(255, 255, 255);--accent-list-marker: rgb(255 255 255/0.51);--accent-font-base: rgb(1, 1, 1);--accent-font-dark: rgb(1, 1, 1);--accent-font-light: rgb(1 1 1/0.7);--accent-icon-light: rgb(1 1 1/0.45);--accent-link: rgb(1, 1, 1);--accent-link-visited: rgb(1, 1, 1);--accent-keyline: rgb(1 1 1/0.5);--accent-keyline-dark: rgb(1 1 1/0.8);--accent-button-text: rgb(255, 255, 255);--accent-button-background: rgb(1, 1, 1);--accent-button-hover-text: rgb(1, 1, 1);--accent-button-hover-background: rgb(255, 255, 255);--button-accented-text: rgb(1, 1, 1);--button-accented-background: rgb(140, 150, 148)}}.tna-border-keyline{border:1px var(--keyline, rgb(38 38 42/0.25)) solid}.tna-border-keyline-dark{border:1px var(--keyline-dark, #26262a) solid}.tna-columns{column-gap:30px}.tna-columns--2{column-count:2}.tna-columns--3{column-count:3}@media(max-width: 30em){.tna-columns{column-gap:15px}}@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-template{min-width:320px;width:100%;height:100%;-webkit-overflow-scrolling:touch}.tna-template__body{min-height:100%;margin:0;padding:0}.tna-template__body:has(:is(.tna-global-header,.tna-header)):has(.tna-main):has(.tna-footer){display:flex;flex-direction:column}.tna-main{flex:1}.tna-container{width:100%;max-width:1270px;margin-right:auto;margin-left:auto;padding-right:15px;padding-left:15px;display:flex;flex-wrap:wrap;align-items:stretch;justify-content:flex-start;box-sizing:border-box}.tna-container--no-padding,.tna-container--no-padding-all{max-width:1270px-60px}.tna-container--max{max-width:none}.tna-container--centred{justify-content:center}ul.tna-container{list-style:none}.tna-column{padding-right:15px;padding-left:15px;box-sizing:border-box}.tna-column--container{display:flex;flex-wrap:wrap;align-items:stretch;justify-content: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--no-margin-right-medium{margin-right:0}.tna-column--no-margin-left-medium{margin-left:0}.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:7.5px;padding-left:7.5px}.tna-column{padding-right:7.5px;padding-left:7.5px}}@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--no-margin-right-small{margin-right:0}.tna-column--no-margin-left-small{margin-left:0}.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--no-margin-right-tiny{margin-right:0}.tna-column--no-margin-left-tiny{margin-left:0}.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-template{color:var(--font-base, #343338);font-family:Open Sans,sans-serif;font-style:normal;font-optical-sizing:auto;font-variation-settings:"wdth" 100;font-weight:400;direction:ltr;text-rendering:optimizeLegibility;-webkit-text-size-adjust:none;text-size-adjust:none;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased}.tna-template__body{color:inherit;font-size:1.125rem;line-height:1.75}@media(max-width: 48em){.tna-template__body{font-size:1.0625rem}}strong{font-weight:700}p+p{margin-top:16px}a{text-decoration-thickness:1.5px;border-radius:.1px}a,a:link{color:var(--link, #005fa3)}a:visited{color:var(--link-visited, #4c2c92)}a:hover,a:active{text-decoration:underline;text-decoration-thickness:3.5px}a.tna-link--no-visited-state:visited{color:var(--link, #005fa3)}small{font-size:0.95625rem}.tna-dl-chips__item,.tna-hgroup__supertitle,.tna-chip{max-width:max-content;padding:2px 4px;display:flex;align-items:center;gap:8px;color:var(--font-base, #343338);font-family:Roboto Mono,monospace;font-style:normal;font-optical-sizing:auto;font-weight:400;font-size:0.875rem;line-height:1.1;text-transform:uppercase;line-height:1;text-align:center}a.tna-dl-chips__item,a.tna-hgroup__supertitle,a.tna-chip{text-decoration:underline}a.tna-dl-chips__item:hover,a.tna-hgroup__supertitle:hover,a.tna-chip:hover{text-decoration:underline;text-decoration-thickness:3.5px}a.tna-dl-chips__item:hover .fa-solid,a.tna-hgroup__supertitle:hover .fa-solid,a.tna-chip:hover .fa-solid{color:inherit}.tna-dl-chips__item .fa-solid,.tna-hgroup__supertitle .fa-solid,.tna-chip .fa-solid{color:var(--icon-light, rgb(52 51 56/0.45))}@media(prefers-contrast: more){.tna-dl-chips__item .fa-solid,.tna-hgroup__supertitle .fa-solid,.tna-chip .fa-solid{color:var(--icon, )}}.tna-dl-chips,.tna-dl-chips--plain .tna-dl-chips__item,.tna-hgroup__supertitle--plain,.tna-chip--plain{padding:0;background-color:rgba(0,0,0,0);border:none}a.tna-dl-chips .fa-solid,.tna-dl-chips--plain a.tna-dl-chips__item .fa-solid,a.tna-hgroup__supertitle--plain .fa-solid,a.tna-chip--plain .fa-solid{color:inherit}.tna-dl-chips:not(.tna-dl-chips--plain) .tna-dl-chips__item,.tna-hgroup__supertitle:not(.tna-hgroup__supertitle--plain),.tna-chip:not(.tna-chip--plain){border:2px var(--accent-background, #afb6b5) solid;-webkit-print-color-adjust:exact;print-color-adjust:exact}.tna-background-accent .tna-dl-chips:not(.tna-dl-chips--plain) .tna-dl-chips__item,.tna-dl-chips:not(.tna-dl-chips--plain) .tna-background-accent .tna-dl-chips__item,.tna-background-accent .tna-hgroup__supertitle:not(.tna-hgroup__supertitle--plain),.tna-background-accent .tna-chip:not(.tna-chip--plain){border-color:var(--contrast-background, #1e1e1e)}.tna-chip-list{display:flex;flex-wrap:wrap;gap:8px 24px;list-style:none}.tna-chip-list__item{display:flex;align-items:center}.tna-heading-xl,.tna-heading-l,.tna-heading-m,.tna-heading-s,.tna-hgroup-s .tna-hgroup__title,.tna-hgroup-m .tna-hgroup__title,.tna-hgroup-l .tna-hgroup__title,.tna-hgroup-xl .tna-hgroup__title{color:var(--font-dark, rgb(1, 1, 1));text-wrap:pretty}.tna-heading-xl a,.tna-heading-l a,.tna-heading-m a,.tna-heading-s a,.tna-hgroup-s .tna-hgroup__title a,.tna-hgroup-m .tna-hgroup__title a,.tna-hgroup-l .tna-hgroup__title a,.tna-hgroup-xl .tna-hgroup__title a{display:inline-block;vertical-align:top}.tna-heading-xl a::after,.tna-heading-l a::after,.tna-heading-m a::after,.tna-heading-s a::after,.tna-hgroup-s .tna-hgroup__title a::after,.tna-hgroup-m .tna-hgroup__title a::after,.tna-hgroup-l .tna-hgroup__title a::after,.tna-hgroup-xl .tna-hgroup__title a::after{content:"";width:.3125em;height:.3125em;margin-bottom:.1em;margin-left:.375em;display:inline-block;vertical-align:middle;transform:rotate(45deg);border-top:.125em var(--link, #005fa3) solid;border-right:.125em var(--link, #005fa3) solid}.tna-heading-xl a:not(.tna-link--no-visited-state):visited::after,.tna-heading-l a:not(.tna-link--no-visited-state):visited::after,.tna-heading-m a:not(.tna-link--no-visited-state):visited::after,.tna-heading-s a:not(.tna-link--no-visited-state):visited::after,.tna-hgroup-s .tna-hgroup__title a:not(.tna-link--no-visited-state):visited::after,.tna-hgroup-m .tna-hgroup__title a:not(.tna-link--no-visited-state):visited::after,.tna-hgroup-l .tna-hgroup__title a:not(.tna-link--no-visited-state):visited::after,.tna-hgroup-xl .tna-hgroup__title a:not(.tna-link--no-visited-state):visited::after{border-color:var(--link-visited, #4c2c92)}.tna-heading-xl strong,.tna-heading-l strong,.tna-heading-m strong,.tna-heading-s strong,.tna-hgroup-s .tna-hgroup__title strong,.tna-hgroup-m .tna-hgroup__title strong,.tna-hgroup-l .tna-hgroup__title strong,.tna-hgroup-xl .tna-hgroup__title strong{font-weight:inherit}.tna-heading-xl,.tna-hgroup-xl .tna-hgroup__title{font-family:supria-sans-condensed,"Arial Narrow",sans-serif;font-weight:500;line-height:1.1;font-size:4rem}@media(min-width: 48.0625em)and (max-width: 64em){.tna-heading-xl,.tna-hgroup-xl .tna-hgroup__title{font-size:3rem}}@media(max-width: 48em){.tna-heading-xl,.tna-hgroup-xl .tna-hgroup__title{font-size:2.25rem}}.tna-heading-l,.tna-hgroup-l .tna-hgroup__title{font-family:supria-sans-condensed,"Arial Narrow",sans-serif;font-weight:500;line-height:1.3;font-size:2.25rem}@media(min-width: 48.0625em)and (max-width: 64em){.tna-heading-l,.tna-hgroup-l .tna-hgroup__title{font-size:1.875rem}}@media(min-width: 30.0625em)and (max-width: 48em){.tna-heading-l,.tna-hgroup-l .tna-hgroup__title{font-size:1.75rem}}@media(max-width: 30em){.tna-heading-l,.tna-hgroup-l .tna-hgroup__title{font-size:1.5625rem}}.tna-heading-l a::after,.tna-hgroup-l .tna-hgroup__title a::after{width:.275em;height:.275em;margin-bottom:0;margin-left:.25em;border-top-width:.1em;border-right-width:.1em}.tna-heading-m,.tna-hgroup-m .tna-hgroup__title{font-weight:700;line-height:1.6;font-size:1.375rem}@media(min-width: 48.0625em)and (max-width: 64em){.tna-heading-m,.tna-hgroup-m .tna-hgroup__title{font-size:1.3125rem}}@media(min-width: 30.0625em)and (max-width: 48em){.tna-heading-m,.tna-hgroup-m .tna-hgroup__title{font-size:1.25rem}}@media(max-width: 30em){.tna-heading-m,.tna-hgroup-m .tna-hgroup__title{font-size:1.1875rem}}.tna-heading-s,.tna-hgroup-s .tna-hgroup__title{font-weight:700;line-height:1.6;font-size:1.125rem}.tna-heading-xl,.tna-heading-l,.tna-heading-m,.tna-heading-s,.tna-hgroup-xl,.tna-hgroup-l,.tna-hgroup-m,.tna-hgroup-s{margin-bottom:0;padding:16px 0 0}.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{padding-top:0}.tna-heading-xl+p,.tna-heading-l+p,.tna-heading-m+p,.tna-heading-s+p,.tna-hgroup-xl+p,.tna-hgroup-l+p,.tna-hgroup-m+p,.tna-hgroup-s+p,.tna-heading-xl+.tna-large-paragraph,.tna-heading-l+.tna-large-paragraph,.tna-heading-m+.tna-large-paragraph,.tna-heading-s+.tna-large-paragraph,.tna-hgroup-xl+.tna-large-paragraph,.tna-hgroup-l+.tna-large-paragraph,.tna-hgroup-m+.tna-large-paragraph,.tna-hgroup-s+.tna-large-paragraph{margin-top:16px}.tna-heading--no-link-arrow a::after{display:none}.tna-hgroup__supertitle{margin:0 0 4px}.tna-hgroup__title{margin:0;display:block}.tna-blockquote{margin-right:0;margin-bottom:0;margin-left:0;padding:16px 16px 16px 32px;border-left:5px var(--accent-border, rgb(140, 150, 148)) solid}.tna-blockquote__quote{font-weight:600;quotes:auto;quotes:"‘" "’"}.tna-blockquote__quote :first-child::before{content:open-quote}.tna-blockquote__quote :last-child::after{content:close-quote}.tna-blockquote__citation{margin-top:16px;font-size:1rem}.tna-blockquote__citation::before{content:"—" " ";content:"—" " "/""}@media(max-width: 30em){.tna-blockquote{padding:8px 8px 8px 16px}}.tna-large-paragraph{font-size:1.375rem;color:var(--font-dark, rgb(1, 1, 1))}@media(max-width: 48em){.tna-large-paragraph{font-size:1.25rem}}.tna-scene-setter{font-family:Roboto Mono,monospace;font-style:normal;font-optical-sizing:auto;font-weight:400;color:var(--font-dark, rgb(1, 1, 1));font-size:1.375rem;line-height:1.7}@media(max-width: 48em){.tna-scene-setter{font-size:1.25rem}}.tna-scene-setter a{text-decoration-thickness:1.5px}.tna-scene-setter a:hover{text-decoration:underline;text-decoration-thickness:3.5px}ul,ol{margin:0;padding:0}.tna-ul{list-style-type:disc}.tna-ul,.tna-ol{margin-top:16px;padding-left:32px}.tna-ul:first-child,.tna-ol:first-child{margin-top:0}.tna-ul--plain,.tna-ol--plain{padding-left:0}.tna-ul--plain,.tna-ul--no-list-style,.tna-ol--plain,.tna-ol--no-list-style{list-style:none}.tna-ul>li>.tna-ul,.tna-ul>li>.tna-ol,.tna-ol>li>.tna-ul,.tna-ol>li>.tna-ol{margin-top:0;padding-left:20px}.tna-ul>li::marker,.tna-ol>li::marker{color:var(--accent-list-marker, rgb(1 1 1/0.58));font-weight:700}.tna-ul--spaced>li+li,.tna-ol--spaced>li+li{margin-top:8px}.tna-ul--spaced>li>.tna-ul,.tna-ul--spaced>li>.tna-ol,.tna-ol--spaced>li>.tna-ul,.tna-ol--spaced>li>.tna-ol{margin-top:16px;margin-bottom:16px}.tna-ul--dashed>li::marker,.tna-ol--dashed>li::marker{content:"— ";color:var(--font-light, rgb(1 1 1/0.58));font-weight:400}.tna-dl-chips{display:flex;flex-wrap:wrap;gap:12px 24px}.tna-dl-chips dt{position:absolute;font-size:0}.tna-dl-chips a.tna-dl-chips__item{cursor:pointer}.tna-dl-chips:not(.tna-dl-chips--plain){gap:8px 16px}.tna-dl-chips--plain a.tna-dl-chips__item{color:var(--link, #005fa3)}.tna-dl{display:flex;flex-wrap:wrap}.tna-dl:first-child{margin-top:0}.tna-dl dt,.tna-dl dd{margin:0;padding:8px 16px;box-sizing:border-box;position:relative;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--plain.tna-dl--spaced dt,.tna-dl--plain.tna-dl--spaced dd{padding-bottom:20px}.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:8px;left:16px;line-height:inherit;text-align:left;color:var(--icon-light, rgb(52 51 56/0.45))}.tna-dl--icon-padding.tna-dl--plain dt{padding-left:32px !important}.tna-dl--icon-padding.tna-dl--plain dt .fa-solid{top:0;left:0}.tna-dl--icon-padding.tna-dl--plain dd{padding-left:32px}@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:16px}.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:var(--background-tint, rgb(217, 217, 214));color:var(--font-base, #343338)}.tna-dl--stacked:not(.tna-dl--plain) dd{margin-left:0;background:rgba(0,0,0,0) !important}@media(max-width: 30em){.tna-dl dt,.tna-dl dd{width:100%;margin-left:0}.tna-dl dd{padding-left:16px}.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:var(--background-tint, rgb(217, 217, 214));color:var(--font-base, #343338)}.tna-dl:not(.tna-dl--plain) dd{margin-left:0;background:rgba(0,0,0,0) !important}}@media(forced-colors: active){.tna-dl{border-bottom:1px var(--keyline-dark, #26262a) solid}.tna-dl dt,.tna-dl dd{background:rgba(0,0,0,0) !important;border-top:1px var(--keyline-dark, #26262a) solid}}@media(prefers-contrast: more){.tna-dl{border-bottom:1px var(--keyline-dark, #26262a) solid}.tna-dl dt,.tna-dl dd{background:rgba(0,0,0,0) !important;border-top:1px var(--keyline-dark, #26262a) 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:8px !important}.tna-\!--margin-top-s,.tna-\!--margin-vertical-s{margin-top:16px !important}.tna-\!--margin-top-m,.tna-\!--margin-vertical-m{margin-top:32px !important}.tna-\!--margin-top-l,.tna-\!--margin-vertical-l{margin-top:48px !important}.tna-\!--margin-top-xl,.tna-\!--margin-vertical-xl{margin-top:80px !important}.tna-\!--margin-top-xxl,.tna-\!--margin-vertical-xxl{margin-top:128px !important}.tna-\!--margin-bottom-xs,.tna-\!--margin-vertical-xs{margin-bottom:8px !important}.tna-\!--margin-bottom-s,.tna-\!--margin-vertical-s{margin-bottom:16px !important}.tna-\!--margin-bottom-m,.tna-\!--margin-vertical-m{margin-bottom:32px !important}.tna-\!--margin-bottom-l,.tna-\!--margin-vertical-l{margin-bottom:48px !important}.tna-\!--margin-bottom-xl,.tna-\!--margin-vertical-xl{margin-bottom:80px !important}.tna-\!--margin-bottom-xxl,.tna-\!--margin-vertical-xxl{margin-bottom:128px !important}.tna-\!--padding-top-xs,.tna-\!--padding-vertical-xs{padding-top:8px !important}.tna-\!--padding-top-s,.tna-\!--padding-vertical-s{padding-top:16px !important}.tna-\!--padding-top-m,.tna-\!--padding-vertical-m{padding-top:32px !important}.tna-\!--padding-top-l,.tna-\!--padding-vertical-l{padding-top:48px !important}.tna-\!--padding-top-xl,.tna-\!--padding-vertical-xl{padding-top:80px !important}.tna-\!--padding-top-xxl,.tna-\!--padding-vertical-xxl{padding-top:128px !important}.tna-\!--padding-bottom-xs,.tna-\!--padding-vertical-xs{padding-bottom:8px !important}.tna-\!--padding-bottom-s,.tna-\!--padding-vertical-s{padding-bottom:16px !important}.tna-\!--padding-bottom-m,.tna-\!--padding-vertical-m{padding-bottom:32px !important}.tna-\!--padding-bottom-l,.tna-\!--padding-vertical-l{padding-bottom:48px !important}.tna-\!--padding-bottom-xl,.tna-\!--padding-vertical-xl{padding-bottom:80px !important}.tna-\!--padding-bottom-xxl,.tna-\!--padding-vertical-xxl{padding-bottom:128px !important}@media(max-width: 48em){.tna-\!--margin-top-xs,.tna-\!--margin-vertical-xs{margin-top:8px !important}.tna-\!--margin-top-s,.tna-\!--margin-vertical-s{margin-top:12px !important}.tna-\!--margin-top-m,.tna-\!--margin-vertical-m{margin-top:24px !important}.tna-\!--margin-top-l,.tna-\!--margin-vertical-l{margin-top:32px !important}.tna-\!--margin-top-xl,.tna-\!--margin-vertical-xl{margin-top:48px !important}.tna-\!--margin-top-xxl,.tna-\!--margin-vertical-xxl{margin-top:80px !important}.tna-\!--margin-bottom-xs,.tna-\!--margin-vertical-xs{margin-bottom:8px !important}.tna-\!--margin-bottom-s,.tna-\!--margin-vertical-s{margin-bottom:12px !important}.tna-\!--margin-bottom-m,.tna-\!--margin-vertical-m{margin-bottom:24px !important}.tna-\!--margin-bottom-l,.tna-\!--margin-vertical-l{margin-bottom:32px !important}.tna-\!--margin-bottom-xl,.tna-\!--margin-vertical-xl{margin-bottom:48px !important}.tna-\!--margin-bottom-xxl,.tna-\!--margin-vertical-xxl{margin-bottom:80px !important}.tna-\!--padding-top-xs,.tna-\!--padding-vertical-xs{padding-top:8px !important}.tna-\!--padding-top-s,.tna-\!--padding-vertical-s{padding-top:12px !important}.tna-\!--padding-top-m,.tna-\!--padding-vertical-m{padding-top:24px !important}.tna-\!--padding-top-l,.tna-\!--padding-vertical-l{padding-top:32px !important}.tna-\!--padding-top-xl,.tna-\!--padding-vertical-xl{padding-top:48px !important}.tna-\!--padding-top-xxl,.tna-\!--padding-vertical-xxl{padding-top:80px !important}.tna-\!--padding-bottom-xs,.tna-\!--padding-vertical-xs{padding-bottom:8px !important}.tna-\!--padding-bottom-s,.tna-\!--padding-vertical-s{padding-bottom:12px !important}.tna-\!--padding-bottom-m,.tna-\!--padding-vertical-m{padding-bottom:24px !important}.tna-\!--padding-bottom-l,.tna-\!--padding-vertical-l{padding-bottom:32px !important}.tna-\!--padding-bottom-xl,.tna-\!--padding-vertical-xl{padding-bottom:48px !important}.tna-\!--padding-bottom-xxl,.tna-\!--padding-vertical-xxl{padding-bottom:80px !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}}@media print{.tna-\!--hide-on-print{display:none}}.tna-button-group{display:flex;flex-wrap:wrap;align-items:center;gap:16px}@media(max-width: 30em){.tna-button-group{flex-direction:column;align-items:stretch}}.tna-button-group--small{gap:8px}.tna-button{padding:4px 16px;display:inline-flex;align-items:baseline;justify-content:center;gap:12px;line-height:2rem;text-align:center;text-decoration:none;text-wrap:balance;cursor:pointer;font-size:1.125rem;font-weight:700;background-color:var(--button-background, rgb(1, 1, 1));border:4px var(--button-background, rgb(1, 1, 1)) solid;-webkit-print-color-adjust:exact;print-color-adjust:exact}.tna-button,.tna-button:link,.tna-button:visited{color:var(--button-text, rgb(255, 255, 255))}.tna-button:hover{color:var(--button-hover-text, rgb(1, 1, 1));text-decoration:none;background:rgba(0,0,0,0)}.tna-button .fa-solid{display:block;font-size:.9em;line-height:1.7777777778}.tna-button svg{height:.9em;flex-shrink:0;align-self:center;fill:currentColor}.tna-button--plain{font-weight:400;background-color:rgba(0,0,0,0);border-color:rgba(0,0,0,0)}.tna-button--plain,.tna-button--plain:link,.tna-button--plain:visited{color:var(--link, #005fa3)}.tna-button--plain:hover{text-decoration:underline;text-decoration-thickness:3.5px}.tna-button--accent{background-color:var(--button-accented-background, rgb(140, 150, 148));border-color:var(--button-accented-background, rgb(140, 150, 148))}.tna-button--accent,.tna-button--accent:link,.tna-button--accent:visited{color:var(--button-accented-text, rgb(1, 1, 1))}.tna-button--accent:hover{color:var(--font-dark, rgb(1, 1, 1))}.tna-button--icon-right{flex-direction:row-reverse}.tna-button--small,.tna-button-group--small .tna-button{padding:0 8px;font-size:0.875rem;line-height:1.5rem}.tna-button--icon-only{padding-right:0;padding-left:0;gap:0;font-size:0 !important;line-height:0 !important}.tna-button--icon-only .fa-solid{width:2.5rem;font-size:1.125rem}.tna-button--icon-only svg{height:1.5rem;margin:.5rem}.tna-button--small.tna-button--icon-only,.tna-button-group--small .tna-button--icon-only{padding-right:0;padding-left:0}.tna-button--small.tna-button--icon-only .fa-solid,.tna-button-group--small .tna-button--icon-only .fa-solid{width:2rem;font-size:1.0125rem;line-height:2rem}.tna-button--small.tna-button--icon-only svg,.tna-button-group--small .tna-button--icon-only svg{height:1rem;margin:.5rem}@media(max-width: 48em){.tna-button--icon-only-mobile{padding-right:0;padding-left:0;gap:0;font-size:0 !important;line-height:0 !important}.tna-button--icon-only-mobile .fa-solid{width:2.5rem;font-size:1.125rem}.tna-button--icon-only-mobile svg{height:1.5rem;margin:.5rem}.tna-button--small.tna-button--icon-only-mobile,.tna-button-group--small .tna-button--icon-only-mobile{padding-right:0;padding-left:0}.tna-button--small.tna-button--icon-only-mobile .fa-solid,.tna-button-group--small .tna-button--icon-only-mobile .fa-solid{width:2rem;font-size:1.0125rem;line-height:2rem}.tna-button--small.tna-button--icon-only-mobile svg,.tna-button-group--small .tna-button--icon-only-mobile svg{height:1rem;margin:.5rem}}.tna-button--solid-hover:not(.tna-button--plain):hover{color:var(--font-dark, rgb(1, 1, 1));background-color:var(--background, #f4f4f4)}.tna-background-accent .tna-button:hover{color:var(--font-dark, rgb(1, 1, 1))}.tna-background-accent .tna-button--accent{background-color:var(--button-background, rgb(1, 1, 1));border-color:var(--button-background, rgb(1, 1, 1))}.tna-background-accent .tna-button--accent,.tna-background-accent .tna-button--accent:link,.tna-background-accent .tna-button--accent:visited{color:var(--button-text, rgb(255, 255, 255))}.tna-background-accent .tna-button--accent:hover{color:var(--font-dark, rgb(1, 1, 1));background-color:var(--background, #f4f4f4)}@media(forced-colors: active){.tna-button:hover{text-decoration:underline;text-decoration-thickness:3.5px}}.tna-footer__inner{padding-top:16px;padding-bottom:48px}.tna-footer__theme-selector .tna-button-group{justify-content:flex-end}.tna-footer__theme-selector .tna-button{font-weight:700}@media(forced-colors: active){.tna-footer__theme-selector{display:none}}.tna-footer .tna-logo{margin-top:32px}.tna-footer .tna-logo__background{fill:rgba(0,0,0,0)}.tna-footer .tna-logo__foreground{fill:currentColor}.tna-footer__title{margin-top:16px;margin-bottom:0;padding-top:0}.tna-footer__address{font-style:normal}.tna-footer__meta{margin-top:16px;font-size:1rem}.tna-footer__social{margin-top:32px}.tna-footer__social-items{display:flex;flex-wrap:wrap;align-items:flex-start;gap:5px}.tna-footer__social-item-link{width:calc(2rem + 8px);height:2rem;padding:4px;display:block;line-height:1;text-align:center;border:0 rgba(0,0,0,0) solid;border-width:4px 0}.tna-footer__social-item-link svg{height:2rem;display:inline-block}.tna-footer__social-item-link svg path{fill:currentColor}.tna-footer__social-item-link:hover{border-bottom:4px var(--link, #005fa3) solid}.tna-footer__mailing-list{margin-top:32px;padding:16px;font-size:1rem;background-color:rgba(255,255,255,.14)}.tna-footer__navigation-block{padding-top:32px}.tna-footer__navigation-block-item{padding-top:6px;padding-bottom:6px;font-size:1rem;border-bottom:1px var(--keyline, rgb(38 38 42/0.25)) solid}.tna-footer__navigation-block-item-link{display:inline-block;text-decoration:none}.tna-footer__navigation-block-item-link:hover{text-decoration:underline;text-decoration-thickness:3.5px}.tna-footer__navigation-block-item-link .fa-solid{margin-left:12px}.tna-footer__legal{padding-top:48px;font-size:1rem}.tna-footer__legal-items{margin-bottom:0;text-align:center}@media(max-width: 30em){.tna-footer__legal-items{text-align:inherit}}.tna-footer__legal-item{padding:8px;display:inline-block}@media(max-width: 30em){.tna-footer__legal-item{display:block}}.tna-footer hr{margin-top:24px;margin-bottom:8px}.tna-footer__licence{font-size:1rem}.tna-footer__licence.tna-container{align-items:center}.tna-footer__licence .tna-column{margin-top:16px}.tna-footer__licence-logo{display:block}.tna-footer__govuk{text-align:center}.tna-footer__govuk-link{display:inline-block}.tna-footer__govuk-logotype-crown{margin:0 auto 2px;display:block}@media(max-width: 48em){.tna-footer__inner{padding-top:0;padding-bottom:32px}}@media(prefers-contrast: more){.tna-footer__theme-selector{border-bottom:1px var(--keyline, rgb(38 38 42/0.25)) solid}}@media(forced-colors: active){.tna-footer{border-top:5px var(--keyline-dark, #26262a) solid}.tna-footer__navigation-block-items{border-top:5px var(--keyline-dark, #26262a) solid}.tna-footer__mailing-list{background-color:rgba(0,0,0,0);border:1px var(--keyline-dark, #26262a) solid}}@media(prefers-contrast: more){.tna-footer{border-top:5px var(--keyline-dark, #26262a) solid}.tna-footer__navigation-block-items{border-top:5px var(--keyline-dark, #26262a) solid}.tna-footer__mailing-list{background-color:rgba(0,0,0,0);border:1px var(--keyline-dark, #26262a) solid}}.tna-global-header{padding-top:16px;background:linear-gradient(0deg, rgb(34, 34, 34) 0%, rgb(0, 0, 0) 100%);color:var(--font-base, #343338)}.tna-template--dark-theme .tna-global-header{background:#010101}@media(prefers-color-scheme: dark){.tna-template--system-theme .tna-global-header{background:#010101}}.tna-global-header__main{padding-bottom:24px}.tna-global-header__logo-wrapper{margin-top:8px;display:flex}.tna-global-header__logo{display:flex;align-items:flex-end;gap:16px;text-decoration:none}.tna-global-header__logo--link,.tna-global-header__logo--link:link,.tna-global-header__logo--link:visited{color:var(--font-base, #343338)}.tna-global-header__logo--link:hover{text-decoration:none;outline:.3125rem var(--font-dark, rgb(1, 1, 1)) solid;outline-offset:1px}.tna-global-header .tna-logo{width:6.75rem;height:6.75rem;flex-shrink:0}.tna-global-header__logo-strapline{padding-right:10px;line-height:2.25rem;text-transform:uppercase;font-family:supria-sans-condensed,"Arial Narrow",sans-serif;font-weight:500;font-size:1.25rem}.tna-global-header__navigation-button-wrapper{display:none}.tna-global-header__hamburger{width:2rem;height:.25rem;display:inline-block;background-color:var(--font-dark, rgb(1, 1, 1))}.tna-global-header__hamburger::before,.tna-global-header__hamburger::after{content:"";width:2rem;height:.25rem;display:block;position:absolute;right:0;background-color:inherit}.tna-global-header__hamburger::before{top:0}.tna-global-header__hamburger::after{bottom:0}.tna-global-header__navigation-button{height:2rem;padding:0;appearance:none;display:flex;align-items:center;gap:.75rem;position:relative;color:inherit;background:none;border:0 rgba(0,0,0,0) solid;border-width:.25rem 0;cursor:pointer;font-weight:700;font-size:1rem}.tna-global-header__navigation-button:hover{text-decoration:underline;text-decoration-thickness:3.5px}.tna-global-header__navigation-button--opened .tna-global-header__hamburger{height:0}.tna-global-header__navigation-button--opened .tna-global-header__hamburger::before{top:.625rem;transform:rotate(-135deg)}.tna-global-header__navigation-button--opened .tna-global-header__hamburger::after{bottom:.625rem;transform:rotate(135deg)}.tna-global-header__navigation{height:100%;margin:8px 0 0;position:relative;columns:2;column-gap:32px;list-style:none}.tna-global-header__navigation-item{break-inside:avoid}.tna-global-header__navigation-item-link{min-width:15rem;height:2.25rem;display:block;box-sizing:border-box;line-height:2.25rem;text-decoration:none;font-size:1.0625rem;border-bottom:.5px var(--keyline, rgb(38 38 42/0.25)) solid}.tna-global-header__navigation-item-link,.tna-global-header__navigation-item-link:link,.tna-global-header__navigation-item-link:visited{color:var(--font-base, #343338)}.tna-global-header__navigation-item-link:hover{text-decoration:underline;text-decoration-thickness:3.5px}.tna-global-header__top-navigation{padding:0 0 8px;display:flex;justify-content:flex-end;gap:24px;font-size:0.9375rem;list-style:none}.tna-global-header__top-navigation-link{display:flex;align-items:center;gap:8px;text-decoration:none}.tna-global-header__top-navigation-link,.tna-global-header__top-navigation-link:link,.tna-global-header__top-navigation-link:visited{color:var(--font-light, rgb(1 1 1/0.58))}.tna-global-header__top-navigation-link:hover{color:var(--font-base, #343338);text-decoration:underline;text-decoration-thickness:3.5px}.tna-global-header__top-navigation-link svg{height:1em;display:inline-block}.tna-global-header__top-navigation-link svg path{fill:currentColor}@media(min-width: 48.0625em)and (max-width: 64em){.tna-global-header__navigation{column-gap:16px}.tna-global-header__navigation-item-link{font-size:1rem}.tna-global-header--collapse-on-medium .tna-global-header__navigation-wrapper{width:100%}.tna-global-header--collapse-on-medium .tna-global-header__top-navigation-wrapper{flex:1;order:2}.tna-global-header--collapse-on-medium .tna-global-header__main{padding-bottom:16px}.tna-global-header--collapse-on-medium .tna-global-header__logo{gap:12px}.tna-global-header--collapse-on-medium .tna-global-header__logo-wrapper{margin-top:8px;margin-bottom:8px}.tna-global-header--collapse-on-medium .tna-logo{width:5rem;height:5rem}.tna-global-header--collapse-on-medium .tna-global-header__logo-strapline{line-height:1.6666666667rem}.tna-global-header--collapse-on-medium .tna-global-header__navigation{margin-bottom:8px}.tna-global-header--collapse-on-medium .tna-global-header__navigation,.tna-global-header--collapse-on-medium .tna-global-header__navigation-item,.tna-global-header--collapse-on-medium .tna-global-header__navigation-item-link{height:auto}}@media(max-width: 48em){.tna-global-header__main{padding-bottom:0}.tna-global-header__logo-wrapper,.tna-global-header__navigation-button-wrapper{margin-top:0;margin-bottom:16px}.tna-global-header__logo{gap:12px}.tna-global-header__navigation-button-wrapper{display:flex;align-items:center}.tna-global-header__navigation,.tna-global-header__navigation-item,.tna-global-header__navigation-item-link{height:auto}.tna-global-header__navigation{margin-top:0;columns:1;background-color:rgba(255,255,255,.1);border-top:2px var(--keyline-dark, #26262a) solid;border-bottom:2px var(--keyline-dark, #26262a) solid}.tna-global-header__navigation-item{flex-direction:column;align-items:flex-start}.tna-global-header__navigation-item-link{line-height:1.75rem;font-weight:600}.tna-global-header__navigation-item:last-child .tna-global-header__navigation-item-link{border-bottom:none}.tna-global-header__navigation-item-contents{display:block}.tna-global-header__navigation-item-children{margin-bottom:16px;margin-left:24px}.tna-global-header__top-navigation{padding-top:8px;padding-bottom:8px;justify-content:flex-start;gap:24px}.tna-global-header__top-navigation-link{padding:4px 0}}@media(min-width: 30.0625em)and (max-width: 48em){.tna-global-header .tna-logo{width:4rem;height:4rem}.tna-global-header__logo-strapline{line-height:1.25rem}.tna-global-header__navigation{width:calc(100% + 60px);left:-30px}.tna-global-header__navigation-item-link{padding:8px 30px}}@media(max-width: 30em){.tna-global-header .tna-logo{width:3.5rem;height:3.5rem}.tna-global-header__logo-strapline{line-height:1}.tna-global-header__navigation-button{font-size:0.875rem}.tna-global-header__navigation{width:calc(100% + 30px);left:-15px}.tna-global-header__navigation-item-link{padding:8px 15px}}@media(forced-colors: active){.tna-global-header{border-bottom:1px var(--keyline, rgb(38 38 42/0.25)) solid}}@media(prefers-contrast: more){.tna-global-header{border-bottom:1px var(--keyline, rgb(38 38 42/0.25)) solid}}@media(forced-colors: active){.tna-global-header__navigation-button{height:auto;line-height:2;font-size:1.125rem;font-weight:700;border:none}.tna-global-header__hamburger{display:none}}.tna-skip-link{width:1px !important;height:1px !important;margin:0 !important;padding:0 !important;display:block !important;overflow:hidden !important;position:absolute !important;left:-100vw;white-space:nowrap !important;background-color:var(--button-background, rgb(1, 1, 1)) !important;border:5px var(--focus-outline, rgb(0, 176, 255)) solid !important;outline:none !important;clip:rect(0 0 0 0) !important;-webkit-clip-path:inset(50%) !important;clip-path:inset(50%) !important}.tna-skip-link,.tna-skip-link:link,.tna-skip-link:visited{color:var(--button-text, rgb(255, 255, 255)) !important}.tna-skip-link:active,.tna-skip-link:focus{width:auto !important;height:auto !important;margin:inherit !important;padding:16px !important;overflow:visible !important;position:static !important;white-space:inherit !important;clip:auto !important;-webkit-clip-path:none !important;clip-path:none !important}.tna-skip-link:active:hover,.tna-skip-link:focus:hover{color:var(--button-hover-text, rgb(1, 1, 1)) !important;background-color:var(--button-hover-background, rgb(255, 255, 255)) !important}.tna-template{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;-webkit-text-size-adjust:none;text-size-adjust:none;direction:ltr;--background: #fff}hr{border-width:1px 0 0;border-color:var(--keyline, rgb(38 38 42/0.25));border-style:solid}.tna-heading-s,.tna-heading-m,.tna-heading-l,.tna-heading-xl{color:var(--font-dark, rgb(1, 1, 1))}.tna-heading-s strong,.tna-heading-m strong,.tna-heading-l strong,.tna-heading-xl strong{font-weight:inherit}.tna-heading-xl{font-family:supria-sans-condensed,"Arial Narrow",sans-serif;font-weight:500;font-size:4rem;line-height:1.1}@media(min-width: 48.0625em)and (max-width: 64em){.tna-heading-xl{font-size:3rem}}@media(max-width: 48em){.tna-heading-xl{font-size:2.25rem}}.tna-heading-l{font-family:supria-sans-condensed,"Arial Narrow",sans-serif;font-weight:500;font-size:2.25rem;line-height:1.3}@media(min-width: 48.0625em)and (max-width: 64em){.tna-heading-l{font-size:1.875rem}}@media(min-width: 30.0625em)and (max-width: 48em){.tna-heading-l{font-size:1.75rem}}@media(max-width: 30em){.tna-heading-l{font-size:1.5625rem}}.tna-heading-m{font-weight:700;font-size:1.375rem;line-height:1.6}@media(min-width: 48.0625em)and (max-width: 64em){.tna-heading-m{font-size:1.3125rem}}@media(min-width: 30.0625em)and (max-width: 48em){.tna-heading-m{font-size:1.25rem}}@media(max-width: 30em){.tna-heading-m{font-size:1.1875rem}}.tna-heading-s{font-weight:700;font-size:1.125rem;line-height:1.6}.tna-heading-s,.tna-heading-m,.tna-heading-l,.tna-heading-xl{margin:32px 0 0;padding:16px 0 0}.tna-heading-s:first-child,.tna-heading-m:first-child,.tna-heading-l:first-child,.tna-heading-xl:first-child{margin-top:0;padding-top:0}.tna-heading-s+p,.tna-heading-m+p,.tna-heading-l+p,.tna-heading-xl+p{margin-top:16px}.tna-button,.tna-button:link,.tna-button:visited{text-decoration:none}.tna-global-header{padding-bottom:0}.tna-global-header__logo:link{display:flex}.tna-global-header__navigation{padding:0}.tna-global-header__navigation-item{margin-left:0;margin-bottom:0}.tna-global-header__navigation-item-link,.tna-global-header__navigation-item-link:link,.tna-global-header__navigation-item-link:visited{display:block}.tna-global-header__top-navigation{margin-top:0;margin-bottom:0}.tna-global-header__top-navigation-item{margin-left:0;margin-bottom:0}.tna-global-header__top-navigation-link{display:flex !important;color:var(--font-light, rgb(1 1 1/0.58)) !important}.tna-global-header__top-navigation-link:hover{color:var(--font-base, #343338) !important}.tna-footer__title{margin-top:0}.tna-footer__address{margin-bottom:0}.tna-footer .tna-heading-m{font-weight:400;line-height:1.5;letter-spacing:-0.025em}.tna-footer__social-item,.tna-footer__navigation-block-item,.tna-footer__legal-item{margin-left:0;margin-bottom:0}.tna-footer__social-item-link{box-sizing:content-box}.tna-footer address{line-height:inherit}.tna-footer hr{height:0 !important;border-top:1px var(--keyline, rgb(38 38 42/0.25)) solid;border-bottom:none !important}.tna-footer__licence p{margin-top:0;margin-bottom:0}.tna-footer__legal-item-link,.tna-footer__licence p a{text-decoration:underline !important}.tna-footer__legal-item-link:hover,.tna-footer__legal-item-link:active,.tna-footer__licence p a:hover,.tna-footer__licence p a:active{text-decoration-thickness:3.5px !important}.tna-global-header *,.tna-footer *{color:inherit}.tna-global-header a:not(.tna-button),.tna-footer a:not(.tna-button){text-decoration:none;text-decoration-thickness:1.5px}.tna-global-header a:not(.tna-button),.tna-global-header a:not(.tna-button):link,.tna-footer a:not(.tna-button),.tna-footer a:not(.tna-button):link{color:var(--link, #005fa3) !important}.tna-global-header a:not(.tna-button):visited,.tna-footer a:not(.tna-button):visited{color:var(--link-visited, #4c2c92)}.tna-global-header a:not(.tna-button):hover,.tna-global-header a:not(.tna-button):active,.tna-footer a:not(.tna-button):hover,.tna-footer a:not(.tna-button):active{text-decoration:underline;text-decoration-thickness:3.5px;background:none !important;outline:none}.tna-global-header a:not(.tna-button):focus,.tna-footer a:not(.tna-button):focus{background:none !important}.tna-global-header a:not(.tna-button):hover:focus,.tna-footer a:not(.tna-button):hover:focus{color:unset !important;background:unset !important}.tna-global-header a:not(.tna-button).tna-link--no-visited-state:visited,.tna-footer a:not(.tna-button).tna-link--no-visited-state:visited{color:var(--link, #005fa3)}/*# sourceMappingURL=global-header-package.css.map */
|