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

@nationalarchives/frontend 0.1.38 → 0.1.40

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

Files changed (166) hide show

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

	@@ -1 +1 @@
1	- {"version":3,"sourceRoot":"","sources":["../../../../src/nationalarchives/utilities/_typography.scss","../../../../src/nationalarchives/tools/_colour.scss","../../../../src/nationalarchives/utilities/_a11y.scss","../../../../src/nationalarchives/utilities/_colour.scss","../../../../src/nationalarchives/utilities/_columns.scss","../../../../src/nationalarchives/variables/_grid.scss","../../../../src/nationalarchives/tools/_media.scss","../../../../src/nationalarchives/tools/_spacing.scss","../../../../src/nationalarchives/tools/_typography.scss","../../../../src/nationalarchives/variables/_typography.scss","../../../../src/nationalarchives/utilities/_forms.scss","../../../../src/nationalarchives/utilities/_global.scss","../../../../src/nationalarchives/utilities/_lists.scss","../../../../src/nationalarchives/utilities/_overrides.scss","../../../../src/nationalarchives/utilities/_tables.scss","../../../../src/nationalarchives/components/button/_button-group.scss","../../../../src/nationalarchives/components/button/button.scss","../../../../src/nationalarchives/components/grid/grid.scss","../../../../src/nationalarchives/tools/_grid.scss","../../../../src/nationalarchives/components/footer/footer.scss"],"names":[],"mappings":"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F,eACE,UZPwB,SYQxB,WACA,kBACA,iBACA,mBACA,kBAEA,sBAEA,aACA,eACA,2BACA,oBAEA,0DAEE,mBAGF,oBACE,eAGF,wBACE,uBAIJ,YACE,SACA,mBACA,kBAEA,sBAEA,uBACE,aACA,eACA,wBACA,oBAGF,uBACE,sBAGF,0BACE,kBAGF,0BACE,oBCjDA,kBACE,WACA,UAUI,wBACE,oBACA,UAGF,+BACE,2BAGF,8BACE,0BAVF,uBACE,qBACA,UAGF,8BACE,4BAGF,6BACE,2BAVF,uBACE,UACA,UAGF,8BACE,iBAGF,6BACE,gBAVF,uBACE,qBACA,UAGF,8BACE,4BAGF,6BACE,2BAVF,wBACE,qBACA,UAGF,+BACE,4BAGF,8BACE,2BAVF,uBACE,UACA,UAGF,8BACE,iBAGF,6BACE,gBAVF,wBACE,qBACA,UAGF,+BACE,4BAGF,8BACE,2BAVF,uBACE,qBACA,UAGF,8BACE,4BAGF,6BACE,2BAVF,uBACE,UACA,UAGF,8BACE,iBAGF,6BACE,gBAVF,uBACE,qBACA,UAGF,8BACE,4BAGF,6BACE,2BAVF,yBACE,qBACA,UAGF,gCACE,4BAGF,+BACE,2BAwBN,oBACE,WAEA,SAHF,oBACE,WAEA,SAHF,oBACE,WAEA,SAKF,qBACE,MAFS,EACX,qBACE,MAFS,EACX,qBACE,MAFS,EACX,qBACE,MAFS,EZvCf,kDYdE,yBACE,WACA,UAUI,8BACE,qBACA,UAGF,qCACE,4BAGF,oCACE,2BAVF,8BACE,qBACA,UAGF,qCACE,4BAGF,oCACE,2BAVF,8BACE,UACA,UAGF,qCACE,iBAGF,oCACE,gBAVF,8BACE,qBACA,UAGF,qCACE,4BAGF,oCACE,2BAVF,8BACE,qBACA,UAGF,qCACE,4BAGF,oCACE,2BAwBN,2BACE,WAEA,SAHF,2BACE,WAEA,SAHF,2BACE,WAEA,SAKF,4BACE,MAFS,EACX,4BACE,MAFS,EACX,4BACE,MAFS,EACX,4BACE,MAFS,GZ3Bf,wBWkCA,eACE,oBACA,mBAGF,YACE,oBACA,oBX/CF,kDYpBE,wBACE,WACA,UAUI,6BACE,UACA,UAGF,oCACE,iBAGF,mCACE,gBAVF,6BACE,UACA,UAGF,oCACE,iBAGF,mCACE,gBAVF,6BACE,UACA,UAGF,oCACE,iBAGF,mCACE,gBAwBN,0BACE,WAEA,SAHF,0BACE,WAEA,SAHF,0BACE,WAEA,SAKF,2BACE,MAFS,EACX,2BACE,MAFS,EACX,2BACE,MAFS,EACX,2BACE,MAFS,GZ3Bf,wBY1BE,uBACE,WACA,UAUI,4BACE,UACA,UAGF,mCACE,iBAGF,kCACE,gBAwBN,yBACE,WAEA,SAHF,yBACE,WAEA,SAHF,yBACE,WAEA,SAKF,0BACE,MAFS,EACX,0BACE,MAFS,EACX,0BACE,MAFS,EACX,0BACE,MAFS,GD0BjB,uNAME,gBACA,eExFF,YAGE,iBACA,oBAEA,sBACE,gBAEA,kCACE,mBAGF,kCACE,kBAIJ,mBACE,gBACA,gBACA,cAGF,qBACE,kBAGF,kBACE,gBX/BF,eWoCA,oBACE,gBAEA,0BACE,aACA,eACA,SACA,uBAIA,8BACE,2BACA,YAEA,cAEA,kBACA,cAEA,6BACA,mBAEA,iFAEE,eAMF,oClB4BF,gCAIA,oCkBzBJ,0BACE,gBACA,aX5EF,ePkHI,0BAIA,sCkBpCF,sCAIA,8BACE,iBAQA,mCACE,oBACA,uBlBFF,2CAIA,uCkBEE,wCACE,qBAEA,qBACA,kBAEA,8CXvGR,0BACA,gCW0GQ,kDACE,mBAOV,mBACE,iBXxHF,eW4HE,yBACE,gBAEA,kBbjGJ,wBa8FE,yBAMI,oBAIJ,wBACE,cAEA,qBb3GJ,wBawGE,wBAMI,eAQN,eACE,kBACA,mBAGF,qBXzJA,eW4JE,mCACE,mBAGF,iCACE,iBAIJ,0BACE,cAGF,mBACE,kBAEA,wBACE,qBAGF,kCACE,cACA,cb5HJ,wBapDF,YAqLI,cACA,qBlB+KF,8BkBrWF,YlB6FM,wCAIA,oCkB6FE,oClBjGF,gCAIA,4CkBmGF,0BACE,+BlBrFA,yBAIA,sCAqOJ,+CA5PI,wCAIA,oCkB6FE,uElBjGF,gCAIA,4CkBmGF,6DACE,+BlBrFA,yBAIA,qCA0OF,+BADF,wCAhQI,wCAIA,oCkB6FE,gElBjGF,gCAIA,4CkBmGF,sDACE,+BlBrFA,yBAIA","file":"footer.css","sourcesContent":["@use \"sass:math\";\n@use \"sass:selector\";\n@use \"../tools/colour\";\n@use \"../tools/media\";\n@use \"../tools/spacing\";\n@use \"../tools/typography\";\n@use \"../variables/assets\";\n@use \"../variables/grid\";\n@use \"../variables/typography\" as typographyVars;\n\n@if typographyVars.$use-local-fonts {\n @font-face {\n font-family: \"Open Sans\";\n src: url(\"#{assets.$tna-font-path}/OpenSans-Regular.ttf\");\n font-weight: typographyVars.$main-font-weight;\n font-style: normal;\n // font-display: swap;\n }\n\n // @font-face {\n // font-family: \"Open Sans\";\n // src: url(\"#{assets.$tna-font-path}/OpenSans-Italic.ttf\");\n // font-weight: typographyVars.$main-font-weight;\n // font-style: italic;\n // // font-display: swap;\n // }\n\n @font-face {\n font-family: \"Open Sans\";\n src: url(\"#{assets.$tna-font-path}/OpenSans-Bold.ttf\");\n font-weight: typographyVars.$main-font-weight-bold;\n font-style: normal;\n // font-display: swap;\n }\n\n @font-face {\n font-family: \"Roboto Mono\";\n src: url(\"#{assets.$tna-font-path}/RobotoMono-Regular.ttf\");\n font-weight: typographyVars.$detail-font-weight;\n font-style: normal;\n // font-display: swap;\n }\n\n @font-face {\n font-family: \"Roboto Mono\";\n src: url(\"#{assets.$tna-font-path}/RobotoMono-Medium.ttf\");\n font-weight: typographyVars.$detail-font-weight-bold;\n font-style: normal;\n // font-display: swap;\n }\n} @else {\n @import url(\"https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,#{typographyVars.$main-font-weight};0,#{typographyVars.$main-font-weight-bold};1,#{typographyVars.$main-font-weight}&family=Roboto+Mono:wght@#{typographyVars.$detail-font-weight};#{typographyVars.$detail-font-weight-bold}&display=swap\"); /* stylelint-disable-line /\n}\n\n.tna-template {\n @include colour.colour-font(\"font-base\");\n @include typography.main-font;\n -moz-osx-font-smoothing: grayscale;\n -webkit-font-smoothing: antialiased;\n text-rendering: optimizeLegibility;\n -webkit-text-size-adjust: none;\n text-size-adjust: none;\n direction: ltr;\n}\n\n.tna-template__body {\n color: inherit;\n @include typography.relative-font-size(typographyVars.$body-font-size-px);\n line-height: typographyVars.$body-line-height;\n\n @include media.on-mobile {\n @include typography.relative-font-size(\n typographyVars.$body-font-size-px-mobile\n );\n }\n}\n\n {\n margin: 0;\n padding: 0;\n}\n\nstrong {\n @include typography.main-font-weight-bold;\n}\n\np {\n @include spacing.space-above;\n\n + p/,\n + .tna-ul,\n + .tna-ol,\n + .tna-blockquote/ {\n margin-top: 1rem;\n }\n\n // + :is(p, .tna-ul, .tna-ol, .tna-blockquote) {\n // margin-top: 1rem;\n // }\n}\n\na {\n text-decoration-thickness: 1.5px;\n\n &,\n &:link {\n @include colour.colour-font(\"link\");\n }\n\n &:visited {\n @include colour.colour-font(\"link-visited\");\n }\n\n &:hover,\n &:active {\n @include typography.interacted-text-decoration;\n }\n\n &.tna-link--no-visited-state {\n &:visited {\n @include colour.colour-font(\"link\");\n }\n }\n\n // &[target=\"_blank\"]:not([title=\"opens in a new\"]) {\n // &::after {\n // content: \"\" / \" (opens in a new window)\"\n // }\n // }\n}\n\nsmall {\n @include typography.relative-font-size(\n typographyVars.$body-font-size-px 0.85\n );\n}\n\n%chip-base {\n max-width: max-content;\n padding: 0.125em 0.25rem;\n\n display: flex;\n align-items: center;\n gap: 0.5rem;\n\n @include colour.colour-font(\"font-base\");\n @include typography.detail-font-small;\n line-height: 1;\n}\n\n%chip-plain {\n padding: 0;\n\n background-color: transparent;\n\n border: none;\n}\n\n%chip-accent {\n @include colour.accent;\n\n @include colour.colour-border(\"accent-background\", 0.125rem);\n\n .tna-background-accent & {\n @include colour.contrast;\n\n @include colour.colour-border(\"contrast-background\");\n }\n}\n\n.tna-chip {\n @extend %chip-base;\n\n &--plain {\n @extend %chip-plain;\n }\n\n &:not(#{&}--plain) {\n @extend %chip-accent;\n }\n\n .fa-solid,\n .fa-brand {\n @include colour.colour-font(\"icon-light\");\n\n @include colour.on-high-contrast {\n padding-right: 0.5rem;\n\n color: inherit;\n\n @include colour.colour-border(\"keyline-dark\", 1px, solid, right);\n }\n }\n\n @at-root #{selector.unify(\"a\", &)} {\n text-decoration: none;\n\n &:hover {\n @include typography.interacted-text-decoration;\n }\n\n .fa-solid,\n .fa-brand {\n color: inherit;\n }\n }\n}\n\n.tna-chip-list {\n @include spacing.space-above;\n\n display: flex;\n flex-wrap: wrap;\n gap: 0.5rem 1.5rem;\n\n list-style: none;\n\n &__item {\n display: flex;\n align-items: center;\n }\n}\n\n%heading {\n @include colour.colour-font(\"font-dark\");\n text-wrap: pretty;\n\n &:not(.tna-heading--no-link-arrow) {\n a {\n display: inline-block;\n\n &::after {\n padding-left: 0.5rem;\n\n display: inline-block;\n\n font-weight: 700;\n\n content: \"\\203A\";\n }\n\n &:hover {\n &::after {\n padding-left: 0.75rem;\n }\n }\n }\n }\n}\n\n%heading-xl {\n @extend %heading;\n\n @include typography.heading-font;\n @include typography.relative-font-size(64);\n line-height: 1.2;\n\n @include media.on-medium {\n @include typography.relative-font-size(42);\n }\n\n @include media.on-mobile {\n @include typography.relative-font-size(36);\n }\n}\n\n%heading-l {\n @extend %heading;\n\n @include typography.heading-font;\n @include typography.relative-font-size(32);\n line-height: 1.3;\n\n @include media.on-medium {\n @include typography.relative-font-size(30);\n }\n\n @include media.on-mobile {\n @include typography.relative-font-size(24);\n }\n}\n\n%heading-m {\n @extend %heading;\n\n @include typography.main-font-weight-bold;\n @include typography.relative-font-size(22);\n line-height: 1.6;\n\n @include media.on-mobile {\n @include typography.relative-font-size(20);\n }\n}\n\n%heading-s {\n @extend %heading;\n\n @include typography.main-font-weight-bold;\n @include typography.relative-font-size(18);\n line-height: 1.6;\n}\n\n%headings-and-heading-groups {\n @include spacing.space-above;\n margin-bottom: 0;\n padding: 1rem 0 0;\n\n &:first-child {\n padding-top: 0;\n }\n\n + p {\n margin-top: 1rem;\n }\n}\n\n.tna-heading {\n &-xl {\n @extend %heading-xl;\n @extend %headings-and-heading-groups;\n }\n\n &-l {\n @extend %heading-l;\n @extend %headings-and-heading-groups;\n }\n\n &-m {\n @extend %heading-m;\n @extend %headings-and-heading-groups;\n }\n\n &-s {\n @extend %heading-s;\n @extend %headings-and-heading-groups;\n }\n}\n\n.tna-hgroup {\n &-xl,\n &-l,\n &-m,\n &-s {\n @extend %headings-and-heading-groups;\n }\n\n &__supertitle {\n margin: 0 0 0.25rem;\n\n @extend %chip-base;\n\n &--plain {\n @extend %chip-plain;\n }\n\n &:not(#{&}--plain) {\n @extend %chip-accent;\n }\n }\n\n &__title {\n margin: 0;\n\n display: block;\n }\n\n &-xl &__title {\n @extend %heading-xl;\n }\n\n &-l &__title {\n @extend %heading-l;\n }\n\n &-m &__title {\n @extend %heading-m;\n }\n\n &-s &__title {\n @extend %heading-s;\n }\n}\n\n.tna-blockquote {\n @include spacing.space-above;\n margin-right: 0;\n margin-bottom: 0;\n margin-left: 0;\n padding: 1rem 1rem 1rem 2rem;\n\n @include colour.colour-border(\"accent-background\", 0.375rem, solid, left);\n\n &__quote {\n font-weight: 700;\n }\n\n &__author {\n @include typography.relative-font-size(16);\n\n .tna-blockquote & {\n margin: 1rem 0 0;\n }\n\n &::before {\n content: \"\\2014\" \" \";\n }\n }\n\n @include media.on-tiny {\n padding: 0.5rem 0.5rem 0.5rem 1rem;\n }\n}\n\n.tna-large-paragraph {\n @include spacing.space-above;\n\n @include typography.relative-font-size(22);\n @include colour.colour-font(\"font-dark\");\n}\n\n.tna-scene-setter {\n @include spacing.space-above;\n\n @include typography.detail-font;\n @include colour.colour-font(\"font-dark\");\n @include typography.relative-font-size(30);\n line-height: math.div(50, 30);\n\n @include media.on-mobile {\n @include typography.relative-font-size(24);\n line-height: 2;\n }\n\n a {\n color: inherit;\n text-decoration-thickness: 2px;\n\n &:hover {\n text-decoration-thickness: 4.5px;\n }\n }\n\n &--small {\n @include typography.relative-font-size(24);\n }\n}\n","@use \"sass:map\";\n@use \"../variables/colour\";\n@use \"../tools/media\";\n\n@function brand-colour($colour, $opacity: 1) {\n @return colour.brand-colour($colour, $opacity);\n}\n\n@mixin colour-css-vars() {\n @each $name, $value in colour.$colour-palette-default {\n --#{$name}: #{$value};\n }\n}\n\n@mixin colour-css-vars-dark() {\n @each $name, $value in colour.$colour-palette-dark {\n --#{$name}: #{$value};\n }\n}\n\n@mixin colour-css-vars-high-contrast() {\n @each $name, $value in colour.$colour-palette-high-contrast {\n --#{$name}: #{$value};\n }\n}\n\n@mixin colour-css-vars-high-contrast-dark() {\n @each $name, $value in colour.$colour-palette-high-contrast-dark {\n --#{$name}: #{$value};\n }\n}\n\n@mixin accent-css-vars($colour) {\n @if $colour == \"yellow\" {\n --accent-background: #{brand-colour(\"yellow\")} !important;\n --accent-background-light: #{brand-colour(\"cream\")} !important;\n --accent-font-base: #{brand-colour(\"black\")} !important;\n --accent-font-dark: #{brand-colour(\"black\")} !important;\n --accent-font-light: #{brand-colour(\"black\", 0.7)} !important;\n --accent-icon-light: #{brand-colour(\"black\", 0.45)} !important;\n --accent-link: #{brand-colour(\"black\")} !important;\n --accent-link-visited: #{brand-colour(\"black\")} !important;\n --accent-keyline: #{brand-colour(\"black\", 0.5)} !important;\n --accent-keyline-dark: #{brand-colour(\"black\", 0.8)} !important;\n --button-accent-background: #{brand-colour(\"yellow\")} !important;\n } @else {\n --accent-font-base: #{brand-colour(\"white\")} !important;\n --accent-font-dark: #{brand-colour(\"white\")} !important;\n --accent-font-light: #{brand-colour(\"white\", 0.7)} !important;\n --accent-icon-light: #{brand-colour(\"white\", 0.45)} !important;\n --accent-link: #{brand-colour(\"white\")} !important;\n --accent-link-visited: #{brand-colour(\"white\")} !important;\n --accent-keyline: #{brand-colour(\"white\", 0.5)} !important;\n --accent-keyline-dark: #{brand-colour(\"white\", 0.8)} !important;\n --button-accent-text: #{brand-colour(\"white\")} !important;\n @if $colour == \"pink\" {\n --accent-background: #{brand-colour(\"maroon\")} !important;\n --accent-background-light: #{brand-colour(\"pastel-pink\")} !important;\n --button-accent-background: #{brand-colour(\"maroon\")} !important;\n } @else if $colour == \"orange\" {\n --accent-background: #{brand-colour(\"chestnut\")} !important;\n --accent-background-light: #{brand-colour(\"pastel-orange\")} !important;\n --button-accent-background: #{brand-colour(\"chestnut\")} !important;\n } @else if $colour == \"green\" {\n --accent-background: #{brand-colour(\"forest\")} !important;\n --accent-background-light: #{brand-colour(\"pastel-green\")} !important;\n --button-accent-background: #{brand-colour(\"forest\")} !important;\n } @else if $colour == \"blue\" {\n --accent-background: #{brand-colour(\"navy\")} !important;\n --accent-background-light: #{brand-colour(\"pastel-blue\")} !important;\n --button-accent-background: #{brand-colour(\"navy\")} !important;\n }\n }\n}\n\n@mixin colour-font(\n $colour,\n $important: false,\n $default-palette: colour.$colour-palette-default\n) {\n color: map.get($default-palette, $colour) if($important, !important, null);\n color: var(--#{$colour}) if($important, !important, null);\n}\n\n@mixin colour-background($colour, $important: false) {\n background-color: map.get(colour.$colour-palette-default, $colour)\n if($important, !important, null);\n background-color: var(--#{$colour}) if($important, !important, null);\n}\n\n@mixin colour-border(\n $colour,\n $width: \"\",\n $style: solid,\n $direction: \"\",\n $important: false\n) {\n @if $direction != \"\" {\n @if $width != \"\" {\n $property: border-#{$direction};\n border-#{$direction}: $width\n map.get(colour.$colour-palette-default, $colour)\n $style\n if($important, !important, null);\n border-#{$direction}: $width\n var(--#{$colour})\n $style\n if($important, !important, null);\n } @else {\n border-#{$direction}-color: map.get(\n colour.$colour-palette-default,\n $colour\n )\n if($important, !important, null);\n border-#{$direction}-color: var(--#{$colour})\n if($important, !important, null);\n }\n } @else {\n @if $width != \"\" {\n border: $width\n map.get(colour.$colour-palette-default, $colour)\n $style\n if($important, !important, null);\n border: $width var(--#{$colour}) $style if($important, !important, null);\n } @else {\n border-color: map.get(colour.$colour-palette-default, $colour)\n if($important, !important, null);\n border-color: var(--#{$colour}) if($important, !important, null);\n }\n }\n}\n\n@mixin colour-outline($colour, $width: \"\", $style: solid, $important: false) {\n @if $width != \"\" {\n outline: $width\n map.get(colour.$colour-palette-default, $colour)\n $style\n if($important, !important, null);\n outline: $width var(--#{$colour}) $style if($important, !important, null);\n } @else {\n outline-color: map.get(colour.$colour-palette-default, $colour)\n if($important, !important, null);\n outline-color: var(--#{$colour}) if($important, !important, null);\n }\n}\n\n@mixin colour-fill($colour, $important: false) {\n fill: map.get(colour.$colour-palette-default, $colour)\n if($important, !important, null);\n fill: var(--#{$colour}) if($important, !important, null);\n}\n\n%light {\n @include colour-css-vars;\n\n @media (prefers-contrast: more) {\n @include colour-css-vars-high-contrast;\n }\n\n .tna-template--high-contrast-theme & {\n @include colour-css-vars-high-contrast;\n }\n}\n\n@mixin light {\n @extend %light;\n}\n\n%dark {\n @include colour-css-vars-dark;\n\n @media (prefers-contrast: more) {\n @include colour-css-vars-high-contrast-dark;\n }\n\n .tna-template--high-contrast-theme & {\n @include colour-css-vars-high-contrast-dark;\n }\n}\n\n@mixin dark {\n @extend %dark;\n}\n\n%plain {\n .tna-template--system-theme & {\n @extend %light;\n\n @media (prefers-color-scheme: dark) {\n @include colour-css-vars-dark;\n }\n\n @media (prefers-contrast: more) and (prefers-color-scheme: dark) {\n @include colour-css-vars-high-contrast-dark;\n }\n }\n\n .tna-template--light-theme & {\n @include colour-css-vars;\n }\n\n .tna-template--dark-theme & {\n @include colour-css-vars-dark;\n }\n\n .tna-template--high-contrast-theme & {\n @include colour-css-vars-high-contrast;\n }\n\n .tna-template--high-contrast-theme.tna-template--dark-theme & {\n @include colour-css-vars-high-contrast-dark;\n }\n\n --background: var(--page-background);\n}\n\n@mixin plain {\n @extend %plain;\n}\n\n%contrast {\n --background: var(--contrast-background);\n --font-base: var(--contrast-font-base);\n --font-dark: var(--contrast-font-dark);\n --font-light: var(--contrast-font-light);\n --icon-light: var(--contrast-icon-light);\n --link: var(--contrast-link);\n --link-visited: var(--contrast-link-visited);\n --keyline: var(--contrast-keyline);\n --keyline-dark: var(--contrast-keyline-dark);\n --button-text: var(--contrast-button-text);\n --button-background: var(--contrast-button-background);\n --button-hover-text: var(--contrast-button-hover-text);\n --button-hover-background: var(--contrast-button-hover-background);\n\n @include colour-background(\"background\");\n\n @include colour-font(\"font-base\", false, colour.$colour-palette-dark);\n}\n\n@mixin contrast {\n @extend %contrast;\n}\n\n%contrast-on-mobile {\n @include media.on-mobile {\n --background: var(--contrast-background);\n --font-base: var(--contrast-font-base);\n --font-dark: var(--contrast-font-dark);\n --font-light: var(--contrast-font-light);\n --icon-light: var(--contrast-icon-light);\n --link: var(--contrast-link);\n --link-visited: var(--contrast-link-visited);\n --keyline: var(--contrast-keyline);\n --keyline-dark: var(--contrast-keyline-dark);\n --button-text: var(--contrast-button-text);\n --button-background: var(--contrast-button-background);\n --button-hover-text: var(--contrast-button-hover-text);\n --button-hover-background: var(--contrast-button-hover-background);\n\n @include colour-background(\"background\");\n\n @include colour-font(\"font-base\", false, colour.$colour-palette-dark);\n }\n}\n\n@mixin contrast-on-mobile {\n @extend %contrast-on-mobile;\n}\n\n%accent {\n --background: var(--accent-background);\n --font-base: var(--accent-font-base);\n --font-dark: var(--accent-font-dark);\n --font-light: var(--accent-font-light);\n --icon-light: var(--accent-icon-light);\n --link: var(--accent-link);\n --link-visited: var(--accent-link);\n --keyline: var(--accent-keyline);\n --keyline-dark: var(--accent-keyline-dark);\n\n @include colour-background(\"background\");\n\n @include colour-font(\"font-base\", false, colour.$colour-palette-dark);\n}\n\n@mixin accent {\n @extend %accent;\n}\n\n%tint {\n @include colour-background(\"background-tint\");\n @include colour-font(\"font-base\");\n}\n\n@mixin tint {\n @extend %tint;\n}\n\n%accent-background {\n @include colour-background(\"accent-background\");\n}\n\n@mixin accent-background {\n @extend %accent-background;\n}\n\n%accent-light {\n --background: var(--accent-background-light);\n --font-base: #{map.get(colour.$colour-palette-default, \"font-base\")};\n --font-dark: #{map.get(colour.$colour-palette-default, \"font-dark\")};\n --font-light: #{map.get(colour.$colour-palette-default, \"font-light\")};\n --icon-light: #{map.get(colour.$colour-palette-default, \"icon-light\")};\n // --link: #{map.get(colour.$colour-palette-default, \"link\")};\n // --link-visited: #{map.get(colour.$colour-palette-default, \"link-visited\")};\n --keyline: #{map.get(colour.$colour-palette-default, \"keyline\")};\n --keyline-dark: #{map.get(colour.$colour-palette-default, \"keyline-dark\")};\n --button-text: #{map.get(colour.$colour-palette-default, \"button-text\")};\n --button-background: #{map.get(\n colour.$colour-palette-default,\n \"button-background\"\n )};\n --button-hover-text: #{map.get(\n colour.$colour-palette-default,\n \"button-hover-text\"\n )};\n --button-hover-background: #{map.get(\n colour.$colour-palette-default,\n \"button-hover-background\"\n )};\n\n @include colour-background(\"background\");\n @include colour-font(\"font-base\");\n\n .tna-template--system-theme & {\n @media (prefers-color-scheme: dark) {\n --link: #{map.get(colour.$colour-palette-default, \"link\")};\n --link-visited: #{map.get(colour.$colour-palette-default, \"link-visited\")};\n }\n }\n\n .tna-template--dark-theme & {\n --link: #{map.get(colour.$colour-palette-default, \"link\")};\n --link-visited: #{map.get(colour.$colour-palette-default, \"link-visited\")};\n }\n}\n\n@mixin accent-light {\n @extend %accent-light;\n}\n\n@mixin on-high-contrast {\n .tna-template--high-contrast-theme & {\n @content;\n }\n\n .tna-template--system-theme & {\n @media (prefers-contrast: more) {\n @content;\n }\n }\n}\n\n@mixin on-forced-colours {\n @media (forced-colors: active) {\n @content;\n }\n}\n\n@mixin on-high-contrast-and-forced-colours {\n @include on-forced-colours {\n @content;\n }\n\n @include on-high-contrast {\n @content;\n }\n}\n","@use \"../tools/colour\";\n\n.tna-visually-hidden,\n.tna-\\!--visually-hidden {\n width: 1px !important;\n height: 1px !important;\n margin: 0 !important;\n padding: 0 !important;\n\n position: absolute !important;\n top: -9999px !important;\n left: -9999px !important;\n z-index: -1 !important;\n\n overflow: hidden !important;\n\n clip: rect(0, 0, 0, 0) !important;\n\n border: 0 !important;\n\n background-color: transparent !important;\n\n &::before,\n &::after {\n content: \"\\00a0\";\n }\n}\n\n@mixin focus-outline {\n @include colour.colour-outline(\"focus-outline\", 0.3125rem, solid);\n outline-offset: 0.125rem;\n}\n\n:focus {\n z-index: 9;\n\n @include focus-outline;\n}\n\n.tna-\\!--no-focus-style {\n &:focus {\n outline: none;\n }\n}\n","@use \"../tools/colour\";\n\n// :root {\n// @include colour.colour-css-vars;\n// }\n\n.tna-template {\n @include colour.colour-background(\"page-background\");\n\n &--system-theme {\n @include colour.colour-css-vars;\n\n @media (prefers-color-scheme: dark) {\n @include colour.colour-css-vars-dark;\n }\n\n @media (prefers-contrast: more) {\n @include colour.colour-css-vars-high-contrast;\n\n {\n background-image: none !important;\n }\n }\n\n @media (prefers-contrast: more) and (prefers-color-scheme: dark) {\n @include colour.colour-css-vars-high-contrast-dark;\n }\n }\n\n &--light-theme {\n @include colour.colour-css-vars;\n }\n\n &--dark-theme {\n @include colour.colour-css-vars-dark;\n }\n\n &--high-contrast-theme {\n @include colour.colour-css-vars-high-contrast;\n\n * {\n background-image: none !important;\n }\n\n &.tna-template--dark-theme {\n @include colour.colour-css-vars-high-contrast-dark;\n }\n }\n\n &--yellow-accent {\n @include colour.accent-css-vars(\"yellow\");\n }\n\n &--pink-accent {\n @include colour.accent-css-vars(\"pink\");\n }\n\n &--orange-accent {\n @include colour.accent-css-vars(\"orange\");\n }\n\n &--green-accent {\n @include colour.accent-css-vars(\"green\");\n }\n\n &--blue-accent {\n @include colour.accent-css-vars(\"blue\");\n }\n\n @media (prefers-reduced-motion) {\n * {\n animation: none !important;\n transition: none !important;\n }\n }\n}\n\n.tna-background {\n &-tint {\n @include colour.tint;\n }\n\n &-contrast {\n @include colour.contrast;\n }\n\n &-accent {\n @include colour.accent;\n }\n\n &-accent-light {\n @include colour.accent-light;\n }\n}\n\n.tna-border {\n &-keyline {\n @include colour.colour-border(\"keyline\", 1px);\n }\n\n &-keyline-dark {\n @include colour.colour-border(\"keyline-dark\", 1px);\n }\n}\n","@use \"../tools/media\";\n@use \"../variables/grid\";\n\n.tna-columns {\n column-gap: grid.$gutter-width;\n\n &--2 {\n column-count: 2;\n }\n\n &--3 {\n column-count: 3;\n }\n\n @include media.on-tiny {\n column-gap: grid.$gutter-width-tiny;\n }\n\n @include media.on-small {\n @for $i from 1 through 4 {\n &--#{$i}-small {\n column-count: $i;\n }\n }\n }\n\n @include media.on-tiny {\n @for $i from 1 through 4 {\n &--#{$i}-tiny {\n column-count: $i;\n }\n }\n }\n\n &__block {\n break-inside: avoid;\n }\n\n &:has(&__block:only-of-type) {\n column-count: 1;\n }\n}\n","$largest-container-width: 75.25rem !default;\n\n$gutter-width: 2rem !default;\n$gutter-width-tiny: 1rem !default;\n\n$column-count: 12;\n$column-count-medium: 6;\n$column-count-small: 4;\n$column-count-tiny: 2;\n","@use \"../variables/media\";\n\n// 0 ======= 320 = 480 ===== 768 == 1024 ========================== min-width/max-width (px)\n// \| . \| \| \|\n// \|-TINY----------\|-SMALL---\|-MED--\|-LARGE------------------------\n// \| . \| \| \|\n// \|<------------->\| \| \| on-tiny\n// \|<----------------------->\| \| on-mobile\n// \|<------------------------------>\| on-smaller-than-large\n// \| . \|<------->\| \| on-small\n// \| . \|<------------------------- on-larger-than-tiny\n// \| . \| \|<---->\| on-medium\n// \| . \| \|<--------------- on-larger-than-mobile\n// \| . \| \| \|<-------- on-large\n// \|<------->. \| \| \| Smallest device\n\n@mixin on-large() {\n @media #{media.$media-large} {\n @content;\n }\n}\n\n@mixin on-medium() {\n @media #{media.$media-medium} {\n @content;\n }\n}\n\n@mixin on-small() {\n @media #{media.$media-small} {\n @content;\n }\n}\n\n@mixin on-tiny() {\n @media #{media.$media-tiny} {\n @content;\n }\n}\n\n@mixin on-larger-than-mobile() {\n @media #{media.$media-gt-mobile} {\n @content;\n }\n}\n\n@mixin on-larger-than-tiny() {\n @media #{media.$media-gt-tiny} {\n @content;\n }\n}\n\n@mixin on-smaller-than-large() {\n @media #{media.$media-lt-large} {\n @content;\n }\n}\n\n@mixin on-mobile() {\n @media #{media.$media-mobile} {\n @content;\n }\n}\n\n@mixin on-print() {\n @media print {\n @content;\n }\n}\n","@use \"sass:map\";\n@use \"../variables/spacing\";\n@use \"../tools/media\";\n\n%space-above {\n margin-top: 2rem;\n\n &:first-child {\n margin-top: 0;\n }\n}\n\n@mixin space-above {\n @extend %space-above;\n}\n\n@function space($size) {\n @return map.get(spacing.$spacing, $size);\n}\n\n@function space-mobile($size) {\n @return map.get(spacing.$spacing-mobile, $size);\n}\n\n@mixin no-spacing-generator($suffix: \"\") {\n @if $suffix != \"\" {\n $suffix: \"-\" + $suffix;\n }\n @each $property in margin, padding {\n @each $direction in top, bottom {\n $combined-direction: \"\";\n @if $direction == top or $direction == bottom {\n $combined-direction: vertical;\n } @else if $direction == right or $direction == left {\n $combined-direction: horizontal;\n }\n @if $combined-direction {\n .tna-\\!--no-#{$property}-#{$direction}#{$suffix},\n .tna-\\!--no-#{$property}-#{$combined-direction}#{$suffix} {\n #{$property}-#{$direction}: 0 !important;\n }\n } @else {\n .tna-\\!--no-#{$property}-#{$direction}#{$suffix} {\n #{$property}-#{$direction}: 0 !important;\n }\n }\n }\n }\n}\n\n@mixin spacing-generator($suffix: \"\") {\n @each $property in margin, padding {\n @each $direction in top, bottom {\n @each $size, $amount in spacing.$spacing {\n @if $direction == all {\n .tna-\\!--#{$property}-#{$size} {\n #{$property}: #{$amount} !important;\n }\n } @else {\n $combined-direction: \"\";\n @if $direction == top or $direction == bottom {\n $combined-direction: vertical;\n } @else if $direction == right or $direction == left {\n $combined-direction: horizontal;\n }\n @if $combined-direction {\n .tna-\\!--#{$property}-#{$direction}-#{$size},\n .tna-\\!--#{$property}-#{$combined-direction}-#{$size} {\n #{$property}-#{$direction}: #{$amount} !important;\n }\n } @else {\n .tna-\\!--#{$property}-#{$direction}-#{$size} {\n #{$property}-#{$direction}: #{$amount} !important;\n }\n }\n }\n }\n }\n }\n\n @include media.on-mobile {\n @each $property in margin, padding {\n @each $direction in top, bottom {\n @each $size, $amount in spacing.$spacing-mobile {\n @if $direction == all {\n .tna-\\!--#{$property}-#{$size} {\n #{$property}: #{$amount} !important;\n }\n } @else {\n $combined-direction: \"\";\n @if $direction == top or $direction == bottom {\n $combined-direction: vertical;\n } @else if $direction == right or $direction == left {\n $combined-direction: horizontal;\n }\n @if $combined-direction {\n .tna-\\!--#{$property}-#{$direction}-#{$size},\n .tna-\\!--#{$property}-#{$combined-direction}-#{$size} {\n #{$property}-#{$direction}: #{$amount} !important;\n }\n } @else {\n .tna-\\!--#{$property}-#{$direction}-#{$size} {\n #{$property}-#{$direction}: #{$amount} !important;\n }\n }\n }\n }\n }\n }\n }\n}\n","@use \"sass:math\";\n@use \"colour\";\n@use \"../variables/typography\";\n\n@mixin relative-font-size($fontSizePx) {\n font-size: #{math.div($fontSizePx, typography.$relative-1rem-px)}rem;\n}\n\n@mixin interacted-text-decoration {\n text-decoration: underline;\n text-decoration-thickness: typography.$interactive-text-decoration-thickness;\n}\n\n@mixin main-font-weight {\n font-weight: typography.$main-font-weight;\n}\n\n@mixin main-font-weight-bold {\n font-weight: typography.$main-font-weight-bold;\n}\n\n@mixin main-font {\n font-family: typography.$main-font-family;\n @include main-font-weight;\n}\n\n@mixin heading-font {\n font-family: typography.$heading-font-family;\n font-weight: typography.$heading-font-weight;\n}\n\n@mixin detail-font-weight {\n font-weight: typography.$detail-font-weight;\n}\n\n@mixin detail-font-weight-bold {\n font-weight: typography.$detail-font-weight-bold;\n}\n\n@mixin detail-font {\n font-family: typography.$detail-font-family;\n @include detail-font-weight;\n}\n\n@mixin detail-font-small {\n @include detail-font;\n @include relative-font-size(14);\n text-transform: uppercase;\n line-height: #{math.div(typography.$relative-1rem-px, 14)};\n}\n","@use \"sass:math\";\n\n$use-local-fonts: false !default;\n\n$relative-1rem-px: 16; // 16px is always 1rem\n\n$body-font-size-px: 18 !default;\n$body-font-size-px-mobile: 17 !default;\n$body-line-height: #{math.div($relative-1rem-px, $body-font-size-px) * 2} !default; // 1.77777\n\n$interactive-text-decoration-thickness: 3.5px !default;\n\n$main-font: \"Open Sans\" !default;\n$main-font-family: $main-font, sans-serif !default;\n$main-font-weight: 400 !default;\n$main-font-weight-bold: 700 !default;\n\n$heading-font-family: supria-sans-condensed, \"Arial Narrow\", sans-serif !default;\n$heading-font-weight: 500 !default;\n\n$detail-font-family: \"Roboto Mono\", monospace !default;\n$detail-font-weight: 400 !default;\n$detail-font-weight-bold: 500 !default;\n","@use \"../utilities/typography\" as typographyUtilities;\n@use \"../tools/colour\";\n@use \"../tools/media\";\n@use \"../tools/spacing\";\n@use \"../tools/typography\";\n\n.tna-form {\n &__group {\n @include spacing.space-above;\n\n &--error {\n padding-left: 1rem;\n\n @include colour.colour-border(\"form-error\", 0.25rem, solid, left);\n }\n }\n\n &__fieldset {\n flex: 1;\n\n border: none;\n }\n\n &__group,\n &__fieldset {\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n gap: 0.5rem;\n }\n\n &__group--inline,\n &__group--inline &__fieldset {\n flex-direction: row;\n align-items: flex-start;\n\n @include media.on-mobile {\n flex-direction: column;\n }\n }\n\n &__group-contents {\n flex: 0 0 39%;\n }\n\n &__legend {\n margin-bottom: 0.5rem;\n }\n\n &__heading {\n margin: 0;\n\n @extend %heading;\n\n &--xl {\n @extend %heading-xl;\n }\n\n &--l {\n @extend %heading-l;\n }\n\n &--m {\n @extend %heading-m;\n }\n\n &--s {\n @extend %heading-s;\n }\n\n &--xs {\n font-size: 1em;\n @include typography.main-font;\n }\n }\n\n &__label {\n }\n\n &__hint {\n margin-top: 0;\n\n @include typography.relative-font-size(16);\n @include colour.colour-font(\"font-light\");\n }\n\n &__error-message {\n margin-top: 0;\n\n @include colour.colour-font(\"form-error\");\n @include typography.main-font-weight-bold;\n }\n}\n","@use \"../tools/colour\";\n@use \"../tools/media\";\n@use \"../tools/spacing\";\n@use \"../variables/typography\";\n\n.tna-template {\n min-width: 320px;\n width: 100%;\n height: 100%;\n\n /\n ------------------------------------------\n * Support ended with iOS 13 released on 19th\n * September 2019. Deprecate in the future if\n * iOS <13 share drops low enough.\n * https://caniuse.com/mdn-css_properties_-webkit-overflow-scrolling\n * ------------------------------------------\n /\n -webkit-overflow-scrolling: touch;\n\n font-size: #{typography.$relative-1rem-px}px;\n}\n\n.tna-template__body {\n min-height: 100%;\n margin: 0;\n padding: 0;\n\n &:has(.tna-header):has(#main-content[role=\"main\"]):has(.tna-footer) {\n display: flex;\n flex-direction: column;\n\n #main-content {\n flex: 1;\n }\n }\n}\n\nimg,\nsvg,\npicture,\nvideo,\ncanvas {\n max-width: 100%;\n height: auto;\n\n display: block;\n}\n\nvideo,\ncanvas {\n width: 100%;\n}\n\n[hidden] {\n display: none;\n}\n\nhr {\n margin: 0;\n\n border-width: 1px 0 0;\n @include colour.colour-border(\"keyline\");\n border-style: solid;\n}\n\n.tna-section {\n padding-top: 3rem;\n padding-bottom: 3rem;\n\n @include media.on-mobile {\n padding-top: 2rem;\n padding-bottom: 2rem;\n }\n}\n\n.tna-aside {\n padding: 2rem;\n\n @include spacing.space-above;\n\n @include media.on-mobile {\n padding: 1rem;\n }\n\n @include colour.on-high-contrast {\n @include colour.colour-border(\"keyline-dark\", 1px);\n }\n\n &--tight {\n padding: 1rem;\n }\n}\n","@use \"../tools/colour\";\n@use \"../tools/media\";\n@use \"../tools/spacing\";\n@use \"../tools/typography\";\n\n.tna-ul,\n.tna-ol {\n margin: 1rem 0 0;\n padding: 0 0 0 2rem;\n\n &:first-child {\n margin-top: 0;\n }\n\n li::marker {\n @include colour.colour-font(\"accent-background\");\n font-weight: 700;\n }\n\n &--plain {\n padding-left: 0;\n\n list-style: none;\n }\n\n .tna-ul,\n .tna-ol {\n margin-top: 0;\n }\n}\n\n@mixin stacked-dl {\n dt,\n dd {\n width: 100%;\n margin-left: 0;\n }\n\n dd {\n padding-left: 1rem;\n }\n\n &.tna-dl--plain {\n dt {\n padding-top: 0;\n padding-bottom: 0;\n\n .fa-solid {\n margin-top: 0;\n }\n }\n\n dd {\n margin-left: 0;\n padding-top: 0;\n }\n }\n\n &:not(.tna-dl--plain) {\n dt {\n @include colour.colour-background(\"background-tint\");\n }\n\n dd {\n background: transparent !important;\n\n margin-left: 0;\n }\n }\n}\n\n.tna-dl {\n margin: 1rem 0 0;\n\n display: flex;\n flex-wrap: wrap;\n\n &:first-child {\n margin-top: 0;\n }\n\n dt,\n dd {\n margin: 0;\n padding: 0.5rem 1rem;\n\n position: relative;\n\n box-sizing: border-box;\n\n word-wrap: break-word;\n }\n\n &--plain {\n dt {\n padding-top: 0;\n padding-left: 0;\n }\n\n dd {\n padding-top: 0;\n padding-right: 0;\n }\n }\n\n dt {\n width: 30%;\n\n @include typography.main-font-weight-bold;\n }\n\n dd {\n width: 70%;\n\n + dd {\n margin-left: 30%;\n }\n }\n\n &--icon-padding {\n dt {\n padding-left: 3rem !important;\n\n position: relative;\n\n .fa-solid {\n overflow: visible;\n\n position: absolute;\n top: 50%;\n left: 1rem;\n\n @include colour.colour-font(\"icon-light\");\n text-align: left;\n\n transform: translateY(-50%);\n }\n }\n }\n\n &--icon-padding#{&}--plain {\n dt {\n padding-left: 2rem !important;\n\n .fa-solid {\n margin-top: -0.25rem;\n\n left: 0;\n }\n }\n\n dd {\n padding-left: 2rem;\n }\n }\n\n &:not(&--plain) {\n dt:first-child,\n dd:nth-of-type(2n) + dt,\n dd:nth-of-type(2n + 1) {\n @include colour.colour-background(\"background-tint\");\n }\n }\n\n @include media.on-small {\n dt {\n width: 35%;\n }\n\n dd {\n width: 65%;\n\n + dd {\n margin-left: 35%;\n }\n }\n }\n\n &--stacked {\n @include stacked-dl;\n }\n\n @include media.on-tiny {\n @include stacked-dl;\n }\n\n @include colour.on-high-contrast-and-forced-colours {\n @include colour.colour-border(\"keyline-dark\", 1px, solid, bottom);\n\n dt,\n dd {\n background: transparent !important;\n\n @include colour.colour-border(\"keyline-dark\", 1px, solid, top);\n }\n }\n}\n","@use \"sass:map\";\n@use \"../tools/media\";\n@use \"../tools/spacing\";\n\n@mixin hide-on($suffix) {\n .tna-\\!--hide-on-#{$suffix} {\n display: none !important;\n }\n}\n\n@include spacing.no-spacing-generator;\n@include spacing.spacing-generator;\n\n@include media.on-large {\n @include spacing.no-spacing-generator(\"large\");\n @include hide-on(\"large\");\n}\n\n@include media.on-medium {\n @include spacing.no-spacing-generator(\"medium\");\n @include hide-on(\"medium\");\n}\n\n@include media.on-small {\n @include spacing.no-spacing-generator(\"small\");\n @include hide-on(\"small\");\n}\n\n@include media.on-tiny {\n @include spacing.no-spacing-generator(\"tiny\");\n @include hide-on(\"tiny\");\n}\n","@use \"sass:math\";\n@use \"sass:selector\";\n@use \"../tools/colour\";\n@use \"../tools/media\";\n@use \"../tools/spacing\";\n@use \"../tools/typography\";\n@use \"../variables/assets\";\n@use \"../variables/grid\";\n\n.tna-table {\n width: 100%;\n @include spacing.space-above;\n\n border-collapse: collapse;\n\n text-align: left;\n\n &:first-child {\n margin-top: 0;\n }\n\n &__caption {\n text-align: left;\n\n @include typography.main-font-weight-bold;\n }\n\n &__head {\n }\n\n &__header {\n }\n\n &__body {\n }\n\n &__row {\n }\n\n &__cell {\n }\n\n &__header,\n &__cell {\n padding: 0.25rem 1rem;\n\n @include colour.colour-border(\"keyline\", 1px, solid, bottom);\n\n &:first-child {\n padding-left: 0;\n }\n\n &:last-child {\n padding-right: 0;\n }\n }\n\n &__head &__header {\n @include colour.colour-border(\"keyline-dark\", 0.25rem, solid, bottom);\n }\n\n p {\n + p {\n margin-top: 0.25rem;\n }\n }\n}\n\n.tna-table-wrapper {\n width: 100%;\n @include spacing.space-above;\n padding-left: grid.$gutter-width;\n padding-right: grid.$gutter-width;\n\n position: relative;\n left: -#{grid.$gutter-width};\n\n overflow: auto;\n\n @include media.on-tiny {\n padding-left: grid.$gutter-width-tiny;\n padding-right: grid.$gutter-width-tiny;\n\n left: -#{grid.$gutter-width-tiny};\n }\n}\n","@use \"../../tools/media\";\n@use \"../../tools/spacing\";\n\n.tna-button-group {\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n gap: 1rem;\n\n @include spacing.space-above;\n\n @include media.on-tiny {\n flex-direction: column;\n align-items: stretch;\n }\n\n &--small {\n gap: 0.5rem;\n }\n}\n","@use \"sass:math\";\n@use \"../../tools/colour\";\n@use \"../../tools/media\";\n@use \"../../tools/typography\";\n@use \"../../utilities\";\n@use \"button-group\";\n\n.tna-button {\n padding: 0.25rem 1rem;\n\n display: inline-flex;\n align-items: baseline;\n justify-content: center;\n gap: 0.75rem;\n\n @include typography.relative-font-size(18);\n @include typography.main-font-weight-bold;\n line-height: #{math.div(16, 18) 2};\n text-decoration: none;\n text-align: center;\n text-wrap: balance;\n\n @include colour.colour-background(\"button-background\");\n\n @include colour.colour-border(\"button-background\", 0.25rem);\n\n cursor: pointer;\n\n &,\n &:link,\n &:visited {\n @include colour.colour-font(\"button-text\");\n }\n\n &:hover {\n @include colour.colour-font(\"button-hover-text\");\n text-decoration: none;\n\n background: transparent;\n }\n\n .fa-solid,\n .fa-brands {\n display: block;\n\n font-size: 0.9em;\n line-height: #{math.div(16, 18) * 2};\n }\n\n &--plain {\n @include typography.main-font-weight;\n\n background-color: transparent;\n\n border-color: transparent;\n\n &,\n &:link,\n &:visited {\n @include colour.colour-font(\"link\");\n }\n\n &:hover {\n @include typography.interacted-text-decoration;\n }\n }\n\n &--accent {\n @include colour.colour-background(\"button-accent-background\");\n\n @include colour.colour-border(\"button-accent-background\");\n\n &,\n &:link,\n &:visited {\n @include colour.colour-font(\"button-accent-text\");\n }\n\n &:hover {\n @include colour.colour-font(\"font-dark\");\n }\n }\n\n &--icon-right {\n flex-direction: row-reverse;\n }\n\n &--small,\n &-group--small & {\n padding: 0 0.5rem;\n\n @include typography.relative-font-size(14);\n line-height: 1.5rem;\n\n .fa-solid,\n .fa-brands {\n line-height: 2rem;\n }\n }\n\n @mixin icon-only {\n padding-right: 0;\n padding-left: 0;\n\n gap: 0;\n\n font-size: 0;\n line-height: 0;\n\n .fa-solid,\n .fa-brands {\n width: 2.5rem;\n\n @include typography.relative-font-size(18);\n }\n }\n\n @mixin icon-only-small {\n padding-right: 0;\n padding-left: 0;\n\n .fa-solid,\n .fa-brands {\n width: 2rem;\n\n @include typography.relative-font-size(18 * 0.9);\n }\n }\n\n &--icon-only {\n @include icon-only;\n }\n\n &--small#{&}--icon-only,\n &-group--small &--icon-only {\n @include icon-only-small;\n }\n\n @include media.on-mobile {\n &--icon-only-mobile {\n @include icon-only;\n }\n\n &--small#{&}--icon-only-mobile,\n &-group--small &--icon-only-mobile {\n @include icon-only-small;\n }\n }\n\n &--solid-hover {\n &:not(.tna-button--plain):hover {\n @include colour.colour-font(\"font-dark\");\n\n @include colour.colour-background(\"page-background\");\n }\n }\n\n .tna-background-accent & {\n &:hover {\n @include colour.colour-font(\"font-dark\");\n }\n }\n\n .tna-background-accent &--accent {\n @include colour.plain;\n\n @include colour.colour-background(\"page-background\");\n\n @include colour.colour-border(\"page-background\");\n\n &,\n &:link,\n &:visited {\n @include colour.colour-font(\"font-dark\");\n }\n\n &:hover {\n @include colour.colour-font(\"page-background\");\n\n @include colour.colour-background(\"font-dark\");\n }\n }\n}\n","@use \"sass:math\";\n@use \"../../variables/grid\";\n@use \"../../tools/media\";\n@use \"../../tools/grid\" as gridTools;\n@use \"../../utilities\";\n\n.tna-container {\n max-width: grid.$largest-container-width;\n width: 100%;\n margin-right: auto;\n margin-left: auto;\n padding-right: math.div(grid.$gutter-width, 2);\n padding-left: math.div(grid.$gutter-width, 2);\n\n box-sizing: border-box;\n\n display: flex;\n flex-wrap: wrap;\n justify-content: flex-start;\n align-items: stretch;\n\n &--no-padding,\n &--no-padding-all {\n max-width: grid.$largest-container-width - (grid.$gutter-width * 2);\n }\n\n &--max {\n max-width: none;\n }\n\n &--centred {\n justify-content: center;\n }\n}\n\n.tna-column {\n margin: 0;\n padding-right: math.div(grid.$gutter-width, 2);\n padding-left: math.div(grid.$gutter-width, 2);\n\n box-sizing: border-box;\n\n &--container {\n display: flex;\n flex-wrap: wrap;\n justify-content: stretch;\n align-items: stretch;\n }\n\n &--align-top {\n align-self: flex-start;\n }\n\n &--align-centre {\n align-self: center;\n }\n\n &--align-bottom {\n align-self: flex-end;\n }\n}\n\n@include gridTools.columns-generator(grid.$column-count);\n\n@include media.on-medium {\n @include gridTools.columns-generator(grid.$column-count-medium, \"medium\");\n}\n\n@include media.on-tiny {\n .tna-container {\n padding-right: math.div(grid.$gutter-width-tiny, 2);\n padding-left: math.div(grid.$gutter-width-tiny, 2);\n }\n\n .tna-column {\n padding-right: math.div(grid.$gutter-width-tiny, 2);\n padding-left: math.div(grid.$gutter-width-tiny, 2);\n }\n}\n\n@include media.on-small {\n @include gridTools.columns-generator(grid.$column-count-small, \"small\");\n}\n\n@include media.on-tiny {\n @include gridTools.columns-generator(grid.$column-count-tiny, \"tiny\");\n}\n\n.tna-container--no-padding,\n.tna-container--no-padding-all,\n.tna-container--no-padding-all > .tna-column,\n.tna-column--no-padding,\n.tna-column--container--no-padding-all,\n.tna-column--container--no-padding-all > .tna-column {\n padding-right: 0;\n padding-left: 0;\n}\n","@use \"sass:math\";\n@use \"../variables/grid\";\n\n@mixin columns-generator($count, $suffix: \"\") {\n @if $suffix != \"\" {\n $suffix: \"-\" + $suffix;\n }\n\n .tna-column {\n &--full#{$suffix} {\n width: 100%;\n flex: none;\n }\n\n @for $i from 1 through $count - 1 {\n $simplest-fraction-found: false;\n\n @for $j from math.div($count, 2) through 1 {\n @if (\n $count % $j == 0 and $i % $j == 0 and $simplest-fraction-found != true\n ) {\n &--width-#{math.div($i, $j)}-#{math.div($count, $j)}#{$suffix} {\n width: math.div(100%, $count) * $i;\n flex: none;\n }\n\n &--margin-right-#{math.div($i, $j)}-#{math.div($count, $j)}#{$suffix} {\n margin-right: math.div(100%, $count) * $i;\n }\n\n &--margin-left-#{math.div($i, $j)}-#{math.div($count, $j)}#{$suffix} {\n margin-left: math.div(100%, $count) * $i;\n }\n\n $simplest-fraction-found: true;\n }\n }\n\n @if $simplest-fraction-found != true {\n &--width-#{$i}-#{$count}#{$suffix} {\n width: math.div(100%, $count) * $i;\n flex: none;\n }\n\n &--margin-right-#{$i}-#{$count}#{$suffix} {\n margin-right: math.div(100%, $count) * $i;\n }\n\n &--margin-left-#{$i}-#{$count}#{$suffix} {\n margin-left: math.div(100%, $count) * $i;\n }\n }\n }\n\n @for $i from 1 through 3 {\n &--flex-#{$i}#{$suffix} {\n width: auto;\n\n flex: $i 0;\n }\n }\n\n @for $i from 1 through 4 {\n &--order-#{$i}#{$suffix} {\n order: $i;\n }\n }\n }\n}\n","@use \"../../tools/colour\";\n@use \"../../tools/typography\";\n@use \"../../tools/media\";\n@use \"../../utilities\";\n@use \"../button\";\n@use \"../grid\";\n\n.tna-footer {\n @include colour.contrast;\n\n padding-top: 1rem;\n padding-bottom: 3rem;\n\n .tna-logo {\n margin-top: 2rem;\n\n &__background {\n fill: transparent;\n }\n\n &__foreground {\n fill: currentColor;\n }\n }\n\n &__title {\n margin-top: 1rem;\n margin-bottom: 0;\n padding-top: 0;\n }\n\n &__address {\n font-style: normal;\n }\n\n &__meta {\n margin-top: 1rem;\n\n @include typography.relative-font-size(16);\n }\n\n &__social {\n margin-top: 2rem;\n\n &-items {\n display: flex;\n flex-wrap: wrap;\n gap: 1rem;\n align-items: flex-start;\n }\n\n &-item {\n &-link {\n min-width: calc(2rem + 4px);\n padding: 4px;\n\n display: block;\n\n text-align: center;\n line-height: 1;\n\n border: 0 transparent solid;\n border-width: 4px 0;\n\n .fa-solid,\n .fa-brands {\n font-size: 2rem;\n }\n\n &-text {\n }\n\n &:hover {\n @include colour.colour-border(\"link\", 4px, solid, bottom);\n }\n }\n }\n }\n\n &__mailing-list {\n margin-top: 2rem;\n padding: 1rem;\n\n @include typography.relative-font-size(16);\n\n @include colour.colour-border(\"keyline-dark\", 1px, dashed);\n\n background-color: rgb(255 255 255 / 10%);\n }\n\n &__navigation {\n &-block {\n padding-top: 2rem;\n\n &-heading {\n }\n\n &-items {\n }\n\n &-item {\n padding-top: 0.375rem;\n padding-bottom: 0.375rem;\n\n @include colour.colour-border(\"keyline\", 1px, solid, bottom);\n\n &-link {\n display: inline-block;\n\n text-decoration: none;\n text-wrap: balance;\n\n &:hover {\n @include typography.interacted-text-decoration;\n }\n\n .fa-solid {\n margin-left: 0.75rem;\n }\n }\n }\n }\n }\n\n &__legal {\n padding-top: 3rem;\n\n @include typography.relative-font-size(16);\n\n &-items {\n margin-bottom: 0;\n\n text-align: center;\n\n @include media.on-tiny {\n text-align: inherit;\n }\n }\n\n &-item {\n padding: 0.5rem;\n\n display: inline-block;\n\n @include media.on-tiny {\n display: block;\n }\n\n &-link {\n }\n }\n }\n\n hr {\n margin-top: 1.5rem;\n margin-bottom: 1rem;\n }\n\n &__licence {\n @include typography.relative-font-size(16);\n\n &.tna-container {\n align-items: center;\n }\n\n .tna-column {\n margin-top: 0.5rem;\n }\n }\n\n &__licence-logo {\n display: block;\n }\n\n &__govuk {\n text-align: center;\n\n &-link {\n display: inline-block;\n }\n\n &-logotype-crown {\n margin: 0 auto;\n display: block;\n }\n }\n\n @include media.on-mobile {\n padding-top: 0;\n padding-bottom: 2rem;\n }\n\n @include colour.on-high-contrast-and-forced-colours {\n @include colour.colour-border(\"keyline\", 1px, solid, top);\n\n &__navigation {\n &-block {\n &-items {\n @include colour.colour-border(\"keyline-dark\", 0.25rem, solid, top);\n }\n }\n }\n\n &__mailing-list {\n background-color: transparent;\n\n @include colour.colour-border(\"keyline-dark\", 1px, solid);\n }\n }\n}\n"]}
1	+ {"version":3,"sourceRoot":"","sources":["../../../../src/nationalarchives/tools/_colour.scss","../../../../src/nationalarchives/components/footer/footer.scss","../../../../src/nationalarchives/tools/_typography.scss","../../../../src/nationalarchives/variables/_typography.scss","../../../../src/nationalarchives/tools/_media.scss"],"names":[],"mappings":"AA4NA,YACE,yCACA,uCACA,uCACA,yCACA,yCACA,6BACA,6CACA,mCACA,6CACA,2CACA,uDACA,uDACA,mEAlJA,mCAPA,4BACA,uBC7EF,YAGE,iBACA,oBAEA,sBACE,gBAEA,kCACE,mBAGF,kCACE,kBAIJ,mBACE,gBACA,gBACA,cAGF,qBACE,kBAGF,kBACE,gBC5BF,eDiCA,oBACE,gBAEA,0BACE,aACA,eACA,SACA,uBAIA,8BACE,uBACA,YACA,YAEA,cAEA,kBACA,cAEA,6BACA,mBAEA,kCACE,YAEA,qBAEA,uCACE,kBAOJ,oCDyBF,gCAIA,oCCtBJ,0BACE,gBACA,aC/EF,eFkHI,0BAIA,sCCjCF,sCAIA,8BACE,iBAQA,mCACE,oBACA,uBDLF,2CAIA,uCCKE,wCACE,qBAEA,qBACA,kBAEA,8CC/DR,0BACA,0BC3CsC,MF6G9B,kDACE,mBAOV,mBACE,iBC3HF,eD+HE,yBACE,gBAEA,kBGpGJ,wBHiGE,yBAMI,oBAIJ,wBACE,cAEA,qBG9GJ,wBH2GE,wBAMI,eAQN,eACE,kBACA,oBAGF,qBC5JA,eD+JE,mCACE,mBAGF,iCACE,gBAIJ,0BACE,cAGF,mBACE,kBAEA,wBACE,qBAGF,kCACE,sBAEA,cGhIJ,wBHvDF,YA4LI,cACA,qBD2KF,8BCxWF,YDgGM,wCAIA,oCCiGE,oCDrGF,gCAIA,4CCuGF,0BACE,+BDzFA,yBAIA,sCAqOJ,+CA5PI,wCAIA,oCCiGE,uEDrGF,gCAIA,4CCuGF,6DACE,+BDzFA,yBAIA,qCA0OF,+BADF,wCAhQI,wCAIA,oCCiGE,gEDrGF,gCAIA,4CCuGF,sDACE,+BDzFA,yBAIA","file":"footer.css","sourcesContent":["@use \"sass:map\";\n@use \"../variables/colour\";\n@use \"../tools/media\";\n\n@function brand-colour($colour, $opacity: 1) {\n @return colour.brand-colour($colour, $opacity);\n}\n\n@mixin colour-css-vars() {\n @each $name, $value in colour.$colour-palette-default {\n --#{$name}: #{$value};\n }\n}\n\n@mixin colour-css-vars-dark() {\n @each $name, $value in colour.$colour-palette-dark {\n --#{$name}: #{$value};\n }\n}\n\n@mixin colour-css-vars-high-contrast() {\n @each $name, $value in colour.$colour-palette-high-contrast {\n --#{$name}: #{$value};\n }\n}\n\n@mixin colour-css-vars-high-contrast-dark() {\n @each $name, $value in colour.$colour-palette-high-contrast-dark {\n --#{$name}: #{$value};\n }\n}\n\n@mixin accent-css-vars($colour) {\n @if $colour == \"yellow\" {\n --accent-background: #{brand-colour(\"yellow\")} !important;\n --accent-background-light: #{brand-colour(\"cream\")} !important;\n --accent-font-base: #{brand-colour(\"black\")} !important;\n --accent-font-dark: #{brand-colour(\"black\")} !important;\n --accent-font-light: #{brand-colour(\"black\", 0.7)} !important;\n --accent-icon-light: #{brand-colour(\"black\", 0.45)} !important;\n --accent-link: #{brand-colour(\"black\")} !important;\n --accent-link-visited: #{brand-colour(\"black\")} !important;\n --accent-keyline: #{brand-colour(\"black\", 0.5)} !important;\n --accent-keyline-dark: #{brand-colour(\"black\", 0.8)} !important;\n --button-accent-background: #{brand-colour(\"yellow\")} !important;\n } @else {\n --accent-font-base: #{brand-colour(\"white\")} !important;\n --accent-font-dark: #{brand-colour(\"white\")} !important;\n --accent-font-light: #{brand-colour(\"white\", 0.7)} !important;\n --accent-icon-light: #{brand-colour(\"white\", 0.45)} !important;\n --accent-link: #{brand-colour(\"white\")} !important;\n --accent-link-visited: #{brand-colour(\"white\")} !important;\n --accent-keyline: #{brand-colour(\"white\", 0.5)} !important;\n --accent-keyline-dark: #{brand-colour(\"white\", 0.8)} !important;\n --button-accent-text: #{brand-colour(\"white\")} !important;\n @if $colour == \"pink\" {\n --accent-background: #{brand-colour(\"maroon\")} !important;\n --accent-background-light: #{brand-colour(\"pastel-pink\")} !important;\n --button-accent-background: #{brand-colour(\"maroon\")} !important;\n } @else if $colour == \"orange\" {\n --accent-background: #{brand-colour(\"chestnut\")} !important;\n --accent-background-light: #{brand-colour(\"pastel-orange\")} !important;\n --button-accent-background: #{brand-colour(\"chestnut\")} !important;\n } @else if $colour == \"green\" {\n --accent-background: #{brand-colour(\"forest\")} !important;\n --accent-background-light: #{brand-colour(\"pastel-green\")} !important;\n --button-accent-background: #{brand-colour(\"forest\")} !important;\n } @else if $colour == \"blue\" {\n --accent-background: #{brand-colour(\"navy\")} !important;\n --accent-background-light: #{brand-colour(\"pastel-blue\")} !important;\n --button-accent-background: #{brand-colour(\"navy\")} !important;\n }\n }\n}\n\n@mixin colour-font(\n $colour,\n $important: false,\n $default-palette: colour.$colour-palette-default\n) {\n color: map.get($default-palette, $colour) if($important, !important, null);\n color: var(--#{$colour}) if($important, !important, null);\n}\n\n@mixin colour-background($colour, $important: false) {\n background-color: map.get(colour.$colour-palette-default, $colour)\n if($important, !important, null);\n background-color: var(--#{$colour}) if($important, !important, null);\n}\n\n@mixin colour-border(\n $colour,\n $width: \"\",\n $style: solid,\n $direction: \"\",\n $important: false\n) {\n @if $direction != \"\" {\n @if $width != \"\" {\n $property: border-#{$direction};\n border-#{$direction}: $width\n map.get(colour.$colour-palette-default, $colour)\n $style\n if($important, !important, null);\n border-#{$direction}: $width\n var(--#{$colour})\n $style\n if($important, !important, null);\n } @else {\n border-#{$direction}-color: map.get(\n colour.$colour-palette-default,\n $colour\n )\n if($important, !important, null);\n border-#{$direction}-color: var(--#{$colour})\n if($important, !important, null);\n }\n } @else {\n @if $width != \"\" {\n border: $width\n map.get(colour.$colour-palette-default, $colour)\n $style\n if($important, !important, null);\n border: $width var(--#{$colour}) $style if($important, !important, null);\n } @else {\n border-color: map.get(colour.$colour-palette-default, $colour)\n if($important, !important, null);\n border-color: var(--#{$colour}) if($important, !important, null);\n }\n }\n}\n\n@mixin colour-outline($colour, $width: \"\", $style: solid, $important: false) {\n @if $width != \"\" {\n outline: $width\n map.get(colour.$colour-palette-default, $colour)\n $style\n if($important, !important, null);\n outline: $width var(--#{$colour}) $style if($important, !important, null);\n } @else {\n outline-color: map.get(colour.$colour-palette-default, $colour)\n if($important, !important, null);\n outline-color: var(--#{$colour}) if($important, !important, null);\n }\n}\n\n@mixin colour-fill($colour, $important: false) {\n fill: map.get(colour.$colour-palette-default, $colour)\n if($important, !important, null);\n fill: var(--#{$colour}) if($important, !important, null);\n}\n\n%light {\n @include colour-css-vars;\n\n @media (prefers-contrast: more) {\n @include colour-css-vars-high-contrast;\n }\n\n .tna-template--high-contrast-theme & {\n @include colour-css-vars-high-contrast;\n }\n}\n\n@mixin light {\n @extend %light;\n}\n\n%dark {\n @include colour-css-vars-dark;\n\n @media (prefers-contrast: more) {\n @include colour-css-vars-high-contrast-dark;\n }\n\n .tna-template--high-contrast-theme & {\n @include colour-css-vars-high-contrast-dark;\n }\n}\n\n@mixin dark {\n @extend %dark;\n}\n\n%plain {\n .tna-template--system-theme & {\n @extend %light;\n\n @media (prefers-color-scheme: dark) {\n @include colour-css-vars-dark;\n }\n\n @media (prefers-contrast: more) and (prefers-color-scheme: dark) {\n @include colour-css-vars-high-contrast-dark;\n }\n }\n\n .tna-template--light-theme & {\n @include colour-css-vars;\n }\n\n .tna-template--dark-theme & {\n @include colour-css-vars-dark;\n }\n\n .tna-template--high-contrast-theme & {\n @include colour-css-vars-high-contrast;\n }\n\n .tna-template--high-contrast-theme.tna-template--dark-theme & {\n @include colour-css-vars-high-contrast-dark;\n }\n\n --background: var(--page-background);\n}\n\n@mixin plain {\n @extend %plain;\n}\n\n%contrast {\n --background: var(--contrast-background);\n --font-base: var(--contrast-font-base);\n --font-dark: var(--contrast-font-dark);\n --font-light: var(--contrast-font-light);\n --icon-light: var(--contrast-icon-light);\n --link: var(--contrast-link);\n --link-visited: var(--contrast-link-visited);\n --keyline: var(--contrast-keyline);\n --keyline-dark: var(--contrast-keyline-dark);\n --button-text: var(--contrast-button-text);\n --button-background: var(--contrast-button-background);\n --button-hover-text: var(--contrast-button-hover-text);\n --button-hover-background: var(--contrast-button-hover-background);\n\n @include colour-background(\"background\");\n\n @include colour-font(\"font-base\", false, colour.$colour-palette-dark);\n}\n\n@mixin contrast {\n @extend %contrast;\n}\n\n%contrast-on-mobile {\n @include media.on-mobile {\n --background: var(--contrast-background);\n --font-base: var(--contrast-font-base);\n --font-dark: var(--contrast-font-dark);\n --font-light: var(--contrast-font-light);\n --icon-light: var(--contrast-icon-light);\n --link: var(--contrast-link);\n --link-visited: var(--contrast-link-visited);\n --keyline: var(--contrast-keyline);\n --keyline-dark: var(--contrast-keyline-dark);\n --button-text: var(--contrast-button-text);\n --button-background: var(--contrast-button-background);\n --button-hover-text: var(--contrast-button-hover-text);\n --button-hover-background: var(--contrast-button-hover-background);\n\n @include colour-background(\"background\");\n\n @include colour-font(\"font-base\", false, colour.$colour-palette-dark);\n }\n}\n\n@mixin contrast-on-mobile {\n @extend %contrast-on-mobile;\n}\n\n%accent {\n --background: var(--accent-background);\n --font-base: var(--accent-font-base);\n --font-dark: var(--accent-font-dark);\n --font-light: var(--accent-font-light);\n --icon-light: var(--accent-icon-light);\n --link: var(--accent-link);\n --link-visited: var(--accent-link);\n --keyline: var(--accent-keyline);\n --keyline-dark: var(--accent-keyline-dark);\n\n @include colour-background(\"background\");\n\n @include colour-font(\"font-base\", false, colour.$colour-palette-dark);\n}\n\n@mixin accent {\n @extend %accent;\n}\n\n%tint {\n @include colour-background(\"background-tint\");\n @include colour-font(\"font-base\");\n}\n\n@mixin tint {\n @extend %tint;\n}\n\n%accent-background {\n @include colour-background(\"accent-background\");\n}\n\n@mixin accent-background {\n @extend %accent-background;\n}\n\n%accent-light {\n --background: var(--accent-background-light);\n --font-base: #{map.get(colour.$colour-palette-default, \"font-base\")};\n --font-dark: #{map.get(colour.$colour-palette-default, \"font-dark\")};\n --font-light: #{map.get(colour.$colour-palette-default, \"font-light\")};\n --icon-light: #{map.get(colour.$colour-palette-default, \"icon-light\")};\n // --link: #{map.get(colour.$colour-palette-default, \"link\")};\n // --link-visited: #{map.get(colour.$colour-palette-default, \"link-visited\")};\n --keyline: #{map.get(colour.$colour-palette-default, \"keyline\")};\n --keyline-dark: #{map.get(colour.$colour-palette-default, \"keyline-dark\")};\n --button-text: #{map.get(colour.$colour-palette-default, \"button-text\")};\n --button-background: #{map.get(\n colour.$colour-palette-default,\n \"button-background\"\n )};\n --button-hover-text: #{map.get(\n colour.$colour-palette-default,\n \"button-hover-text\"\n )};\n --button-hover-background: #{map.get(\n colour.$colour-palette-default,\n \"button-hover-background\"\n )};\n\n @include colour-background(\"background\");\n @include colour-font(\"font-base\");\n\n .tna-template--system-theme & {\n @media (prefers-color-scheme: dark) {\n --link: #{map.get(colour.$colour-palette-default, \"link\")};\n --link-visited: #{map.get(colour.$colour-palette-default, \"link-visited\")};\n }\n }\n\n .tna-template--dark-theme & {\n --link: #{map.get(colour.$colour-palette-default, \"link\")};\n --link-visited: #{map.get(colour.$colour-palette-default, \"link-visited\")};\n }\n}\n\n@mixin accent-light {\n @extend %accent-light;\n}\n\n@mixin on-high-contrast {\n .tna-template--high-contrast-theme & {\n @content;\n }\n\n .tna-template--system-theme & {\n @media (prefers-contrast: more) {\n @content;\n }\n }\n}\n\n@mixin on-forced-colours {\n @media (forced-colors: active) {\n @content;\n }\n}\n\n@mixin on-high-contrast-and-forced-colours {\n @include on-forced-colours {\n @content;\n }\n\n @include on-high-contrast {\n @content;\n }\n}\n","@use \"../../tools/colour\";\n@use \"../../tools/typography\";\n@use \"../../tools/media\";\n\n.tna-footer {\n @include colour.contrast;\n\n padding-top: 1rem;\n padding-bottom: 3rem;\n\n .tna-logo {\n margin-top: 2rem;\n\n &__background {\n fill: transparent;\n }\n\n &__foreground {\n fill: currentColor;\n }\n }\n\n &__title {\n margin-top: 1rem;\n margin-bottom: 0;\n padding-top: 0;\n }\n\n &__address {\n font-style: normal;\n }\n\n &__meta {\n margin-top: 1rem;\n\n @include typography.relative-font-size(16);\n }\n\n &__social {\n margin-top: 2rem;\n\n &-items {\n display: flex;\n flex-wrap: wrap;\n gap: 1rem;\n align-items: flex-start;\n }\n\n &-item {\n &-link {\n width: calc(2rem + 8px);\n height: 2rem;\n padding: 4px;\n\n display: block;\n\n text-align: center;\n line-height: 1;\n\n border: 0 transparent solid;\n border-width: 4px 0;\n\n svg {\n height: 2rem;\n\n display: inline-block;\n\n path {\n fill: currentColor;\n }\n }\n\n &-text {\n }\n\n &:hover {\n @include colour.colour-border(\"link\", 4px, solid, bottom);\n }\n }\n }\n }\n\n &__mailing-list {\n margin-top: 2rem;\n padding: 1rem;\n\n @include typography.relative-font-size(16);\n\n @include colour.colour-border(\"keyline-dark\", 1px, dashed);\n\n background-color: rgb(255 255 255 / 10%);\n }\n\n &__navigation {\n &-block {\n padding-top: 2rem;\n\n &-heading {\n }\n\n &-items {\n }\n\n &-item {\n padding-top: 0.375rem;\n padding-bottom: 0.375rem;\n\n @include colour.colour-border(\"keyline\", 1px, solid, bottom);\n\n &-link {\n display: inline-block;\n\n text-decoration: none;\n text-wrap: balance;\n\n &:hover {\n @include typography.interacted-text-decoration;\n }\n\n .fa-solid {\n margin-left: 0.75rem;\n }\n }\n }\n }\n }\n\n &__legal {\n padding-top: 3rem;\n\n @include typography.relative-font-size(16);\n\n &-items {\n margin-bottom: 0;\n\n text-align: center;\n\n @include media.on-tiny {\n text-align: inherit;\n }\n }\n\n &-item {\n padding: 0.5rem;\n\n display: inline-block;\n\n @include media.on-tiny {\n display: block;\n }\n\n &-link {\n }\n }\n }\n\n hr {\n margin-top: 1.5rem;\n margin-bottom: 0.5rem;\n }\n\n &__licence {\n @include typography.relative-font-size(16);\n\n &.tna-container {\n align-items: center;\n }\n\n .tna-column {\n margin-top: 1rem;\n }\n }\n\n &__licence-logo {\n display: block;\n }\n\n &__govuk {\n text-align: center;\n\n &-link {\n display: inline-block;\n }\n\n &-logotype-crown {\n margin: 0 auto 0.125rem;\n\n display: block;\n }\n }\n\n @include media.on-mobile {\n padding-top: 0;\n padding-bottom: 2rem;\n }\n\n @include colour.on-high-contrast-and-forced-colours {\n @include colour.colour-border(\"keyline\", 1px, solid, top);\n\n &__navigation {\n &-block {\n &-items {\n @include colour.colour-border(\"keyline-dark\", 0.25rem, solid, top);\n }\n }\n }\n\n &__mailing-list {\n background-color: transparent;\n\n @include colour.colour-border(\"keyline-dark\", 1px, solid);\n }\n }\n}\n","@use \"sass:math\";\n@use \"colour\";\n@use \"../variables/typography\";\n\n@mixin relative-font-size($fontSizePx) {\n font-size: #{math.div($fontSizePx, typography.$relative-1rem-px)}rem;\n}\n\n@mixin main-font-weight {\n font-weight: typography.$main-font-weight;\n}\n\n@mixin main-font-weight-bold {\n font-weight: typography.$main-font-weight-bold;\n}\n\n@mixin main-font($bold: false) {\n font-family: typography.$main-font-family;\n @if $bold {\n @include main-font-weight-bold;\n } @else {\n @include main-font-weight;\n }\n font-optical-sizing: auto;\n font-style: normal;\n font-variation-settings: \"wdth\" 100;\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 @if $bold {\n font-weight: typography.$detail-font-weight-bold;\n } @else {\n font-weight: typography.$detail-font-weight;\n }\n font-optical-sizing: auto;\n font-style: normal;\n}\n\n@mixin detail-font-small {\n @include detail-font;\n @include relative-font-size(14);\n text-transform: uppercase;\n line-height: #{math.div(typography.$relative-1rem-px, 14)};\n}\n\n@mixin interacted-text-decoration {\n text-decoration: underline;\n text-decoration-thickness: typography.$interactive-text-decoration-thickness;\n}\n","@use \"sass:math\";\n\n$use-local-fonts: false !default;\n\n$relative-1rem-px: 16; // 16px is always 1rem\n\n$body-font-size-px: 18 !default;\n$body-font-size-px-mobile: 17 !default;\n$body-line-height: #{math.div($relative-1rem-px, $body-font-size-px) * 2} !default; // 1.77777\n\n$interactive-text-decoration-thickness: 3.5px !default;\n\n$main-font: \"Open Sans\" !default;\n$main-font-family: $main-font, sans-serif !default;\n$main-font-weight: 400 !default;\n$main-font-weight-bold: 700 !default;\n\n$heading-font-family: supria-sans-condensed, \"Arial Narrow\", sans-serif !default;\n$heading-font-weight: 500 !default;\n\n$detail-font-family: \"Roboto Mono\", monospace !default;\n$detail-font-weight: 400 !default;\n$detail-font-weight-bold: 500 !default;\n","@use \"../variables/media\";\n\n// 0 ======= 320 = 480 ===== 768 == 1024 ========================== min-width/max-width (px)\n// \| . \| \| \|\n// \|-TINY----------\|-SMALL---\|-MED--\|-LARGE------------------------\n// \| . \| \| \|\n// \|<------------->\| \| \| on-tiny\n// \|<----------------------->\| \| on-mobile\n// \|<------------------------------>\| on-smaller-than-large\n// \| . \|<------->\| \| on-small\n// \| . \|<------------------------- on-larger-than-tiny\n// \| . \| \|<---->\| on-medium\n// \| . \| \|<--------------- on-larger-than-mobile\n// \| . \| \| \|<-------- on-large\n// \|<------->. \| \| \| Smallest device\n\n@mixin on-large() {\n @media #{media.$media-large} {\n @content;\n }\n}\n\n@mixin on-medium() {\n @media #{media.$media-medium} {\n @content;\n }\n}\n\n@mixin on-small() {\n @media #{media.$media-small} {\n @content;\n }\n}\n\n@mixin on-tiny() {\n @media #{media.$media-tiny} {\n @content;\n }\n}\n\n@mixin on-larger-than-mobile() {\n @media #{media.$media-gt-mobile} {\n @content;\n }\n}\n\n@mixin on-larger-than-tiny() {\n @media #{media.$media-gt-tiny} {\n @content;\n }\n}\n\n@mixin on-smaller-than-large() {\n @media #{media.$media-lt-large} {\n @content;\n }\n}\n\n@mixin on-mobile() {\n @media #{media.$media-mobile} {\n @content;\n }\n}\n\n@mixin on-print() {\n @media print {\n @content;\n }\n}\n"]}

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

@@ -1,9 +1,6 @@
 @use "../../tools/colour";
 @use "../../tools/typography";
 @use "../../tools/media";
-@use "../../utilities";
-@use "../button";
-@use "../grid";
 .tna-footer {
   @include colour.contrast;
@@ -51,7 +48,8 @@
     &-item {
       &-link {
-        min-width: calc(2rem + 4px);
+        width: calc(2rem + 8px);
+        height: 2rem;
         padding: 4px;
         display: block;
@@ -62,9 +60,14 @@
         border: 0 transparent solid;
         border-width: 4px 0;
-        .fa-solid,
-        .fa-brands {
-          font-size: 2rem;
+        svg {
+          height: 2rem;
+          display: inline-block;
+          path {
+            fill: currentColor;
+          }
         }
         &-text {
@@ -153,7 +156,7 @@
   hr {
     margin-top: 1.5rem;
-    margin-bottom: 1rem;
+    margin-bottom: 0.5rem;
   }
   &__licence {
@@ -164,7 +167,7 @@
     }
     .tna-column {
-      margin-top: 0.5rem;
+      margin-top: 1rem;
     }
   }
@@ -180,7 +183,8 @@
     }
     &-logotype-crown {
-      margin: 0 auto;
+      margin: 0 auto 0.125rem;
       display: block;
     }
   }

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

@@ -45,120 +45,105 @@ const Template = ({
 export const Standard = Template.bind({});
 Standard.args = {
-  meta: "<p>Open today<br />09:00&mdash;19:00</p>",
+  meta: "<p>Open today<br>09:00&mdash;19:00</p>",
   social: [
     {
-      text: "Twitter",
-      href: "#",
-      brandIcon: "twitter",
+      href: "https://twitter.com/UKNatArchives",
+      icon: "twitter",
+      title: "Visit us on Twitter",
     },
     {
-      text: "YouTube",
-      href: "#",
-      brandIcon: "youtube",
+      href: "https://www.youtube.com/c/TheNationalArchivesUK",
+      icon: "youtube",
+      title: "Watch us on YouTube",
     },
     {
-      text: "Facebook",
-      href: "#",
-      brandIcon: "facebook",
+      href: "https://www.facebook.com/TheNationalArchives",
+      icon: "facebook",
+      title: "See us on Facebook",
     },
     {
-      text: "Flickr",
-      href: "#",
-      brandIcon: "flickr",
+      href: "https://www.flickr.com/photos/nationalarchives",
+      icon: "flickr",
+      title: "See our Flickr feed",
     },
     {
-      text: "Instagram",
-      href: "#",
-      brandIcon: "instagram",
+      href: "https://www.instagram.com/nationalarchivesuk/",
+      icon: "instagram",
+      title: "See us on Instagram",
     },
     {
-      text: "RSS",
-      href: "#",
+      href: "https://www.nationalarchives.gov.uk/rss/",
       icon: "rss",
+      title: "Read our RSS feed",
     },
   ],
   navigation: [
     {
-      title: "About us",
+      title: "Quick links",
       items: [
         {
-          text: "Our role",
-          href: "#",
+          text: "About us",
+          href: "https://www.nationalarchives.gov.uk/about/)",
         },
         {
-          text: "Our history",
-          href: "#",
+          text: "Contact us",
+          href: "https://www.nationalarchives.gov.uk/contact-us/)",
         },
         {
-          text: "Our collection",
-          href: "#",
+          text: "News",
+          href: "https://www.nationalarchives.gov.uk/about/news/)",
         },
         {
-          text: "Our people",
-          href: "#",
+          text: "Blog",
+          href: "https://blog.nationalarchives.gov.uk/)",
         },
         {
-          text: "How we are run",
-          href: "#",
+          text: "Podcasts and videos",
+          href: "https://media.nationalarchives.gov.uk/)",
         },
         {
-          text: "Our research and academic collaboration",
-          href: "#",
+          text: "Image library",
+          href: "https://images.nationalarchives.gov.uk/)",
         },
         {
-          text: "News",
-          href: "#",
+          text: "Press room",
+          href: "https://www.nationalarchives.gov.uk/about/press-room/)",
         },
         {
-          text: "Contact us",
-          href: "#",
+          text: "Jobs and careers",
+          href: "https://www.nationalarchives.gov.uk/about/jobs/)",
         },
         {
-          text: "Jobs & careers",
-          href: "#",
+          text: "British citizenship services",
+          href: "https://www.nationalarchives.gov.uk/contact-us/british-citizenship-services/)",
         },
         {
-          text: "Get involved",
-          href: "#",
+          text: "Historical Manuscripts Commission",
+          href: "https://www.nationalarchives.gov.uk/archives-sector/our-archives-sector-role/historical-manuscripts-commission/)",
         },
       ],
     },
     {
-      title: "Our websites help",
+      title: "Our other websites",
       items: [
         {
           text: "UK Government Web Archive",
-          href: "#",
-          newTab: true,
-        },
-        {
-          text: "Legislation.gov.uk",
-          href: "#",
-          newTab: true,
+          href: "https://www.nationalarchives.gov.uk/webarchive/",
         },
+        { text: "Legislation.gov.uk", href: "https://www.legislation.gov.uk/" },
         {
           text: "Find case law",
-          href: "#",
-          newTab: true,
+          href: "https://caselaw.nationalarchives.gov.uk/",
         },
         {
           text: "The Gazette",
-          href: "#",
+          href: "https://www.thegazette.co.uk/",
           newTab: true,
         },
-      ],
-    },
-    {
-      title: "Quick links",
-      items: [
-        {
-          text: "Press room",
-          href: "#",
-        },
         {
-          text: "Venue hire",
-          href: "#",
+          text: "The National Archives Trust",
+          href: "https://www.nationalarchives.gov.uk/about/the-national-archives-trust/",
         },
       ],
     },
@@ -167,23 +152,23 @@ Standard.args = {
   legal: [
     {
       text: "Accessibility statement",
-      href: "#",
+      href: "#/accessibility",
     },
     {
       text: "Freedom of information",
-      href: "#",
+      href: "#/freedom-of-information",
     },
     {
       text: "Terms and conditions",
-      href: "#",
+      href: "#/terms-and-conditions",
     },
     {
       text: "Privacy policy",
-      href: "#",
+      href: "#/privacy",
     },
     {
       text: "Cookies",
-      href: "#",
+      href: "#/cookies",
     },
   ],
   classes: "tna-footer--demo",

package/nationalarchives/components/footer/macro-options.json CHANGED Viewed

@@ -7,39 +7,41 @@
   },
   {
     "name": "social",
-    "type": "array",
+    "type": "object",
     "required": false,
     "description": "",
     "params": [
       {
-        "name": "text",
+        "name": "assetsPath",
         "type": "string",
-        "required": true,
-        "description": ""
-      },
-      {
-        "name": "href",
-        "type": "string",
-        "required": true,
-        "description": ""
-      },
-      {
-        "name": "icon",
-        "type": "string",
-        "required": true,
-        "description": ""
-      },
-      {
-        "name": "brandIcon",
-        "type": "string",
-        "required": true,
+        "required": false,
         "description": ""
       },
       {
-        "name": "title",
-        "type": "string",
+        "name": "items",
+        "type": "array",
         "required": false,
-        "description": ""
+        "description": "",
+        "params": [
+          {
+            "name": "href",
+            "type": "string",
+            "required": true,
+            "description": ""
+          },
+          {
+            "name": "icon",
+            "type": "string",
+            "required": true,
+            "description": ""
+          },
+          {
+            "name": "title",
+            "type": "string",
+            "required": true,
+            "description": ""
+          }
+        ]
       }
     ]
   },
@@ -55,6 +57,12 @@
         "required": true,
         "description": ""
       },
+      {
+        "name": "hideTitle",
+        "type": "boolean",
+        "required": false,
+        "description": ""
+      },
       {
         "name": "items",
         "type": "array",