npm - @nationalarchives/frontend - Versions diffs - 0.1.65 → 0.2.0 - Mend

@nationalarchives/frontend 0.1.65 → 0.2.0

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

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

	@@ -1 +1 @@
1	- {"version":3,"sourceRoot":"","sources":["../../../../src/nationalarchives/tools/_colour.scss","../../../../src/nationalarchives/components/global-header/global-header.scss","../../../../src/nationalarchives/tools/_typography.scss","../../../../src/nationalarchives/variables/_typography.scss","../../../../src/nationalarchives/tools/_media.scss"],"names":[],"mappings":"AAqLA,mBACE,yCACA,uCACA,uCACA,yCACA,yCACA,6BACA,6CACA,mCACA,6CACA,2CACA,uDACA,uDACA,mEACA,2CA7IA,4CAJA,gCC3CF,mBACE,iBAGA,wEDuCA,gCC/BA,6CACE,mBAIA,mCADF,+CAEI,oBAIJ,yBACE,oBAGF,iCACE,eAEA,aAGF,yBACE,aACA,qBACA,SAEA,qBAGE,0GDGJ,gCCGI,qCACE,qBD0CJ,sDCvCI,mBAKN,6BACE,cACA,eAEA,cAGF,mCACE,mBAEA,oBACA,yBClCF,YCcA,gDDbA,YCgBoB,IDlDpB,kBDyEA,8CACE,aAGF,8BACE,WACA,cAEA,cDjCF,gDCqCE,2EAEE,WAEA,cAEA,cAEA,kBACA,QACA,OAEA,yBAGF,sCACE,MAGF,qCACE,SAIJ,sCACE,YACA,UAEA,gBAEA,cAEA,kBAEA,YAEA,gBAEA,6BACA,sBAEA,eAGE,4EACE,SAEA,oFACE,YAEA,0BAGF,mFACE,eAEA,yBASR,+BACE,YACA,eAEA,kBAEA,UACA,gBAEA,gBAGF,oCACE,mBAGF,yCACE,gBACA,eAEA,cACA,sBAEA,oBACA,qBC9KF,oBFgEI,4DCoHF,wIDxIF,gCC8IE,+CClIF,0BACA,0BCpCsC,MF0KtC,mCACE,gBAEA,aACA,yBACA,SCpMF,oBDuME,gBAMF,wCACE,aACA,mBACA,QAEA,qBAEA,qIDxKF,yCC8KE,8CD9KF,gCEYA,0BACA,0BCpCsC,MF0MpC,4CACE,WAEA,qBAEA,iDACE,kBG7LN,kDHmME,+BACE,gBAGF,yCC/OF,eDmPE,8EACE,WAGF,kFACE,OACA,QAGF,gEACE,oBAGF,gEACE,SAGF,wEACE,eACA,kBAGF,iDACE,WACA,YAGF,0EACE,4BAGF,sEACE,kBAGF,iOAGE,aG7MJ,wBHkNE,yBACE,iBAGF,+EAEE,aACA,mBAGF,yBACE,SAGF,8CACE,aACA,mBAGF,4GAGE,YAGF,+BACE,aAEA,UAEA,sCD5PA,uGCkQF,oCACE,sBACA,uBAGF,yCACE,oBC3TJ,YCewB,IFgTtB,wFACE,mBAGF,6CACE,cAGF,6CACE,mBACA,iBAGF,mCACE,iBACA,oBAEA,4BG/SJ,kDHoTE,6BACE,WACA,YAGF,mCACE,oBAGF,+BACE,wBAEA,WAGF,yCACE,kBG9TJ,wBHmUE,6BACE,aACA,cAGF,mCACE,cAGF,+BACE,wBAEA,WAGF,yCACE,kBDuDJ,8BC7bF,mBD+DM,4DAwXJ,+BCvbF,mBD+DM,4DA8XJ,8BC9CE,sCACE,YAEA,cCnZJ,mBAiBA,YCYsB,IF0XlB,YAGF,8BACE","file":"global-header.css","sourcesContent":["@use \"sass:list\";\n@use \"sass:map\";\n@use \"../variables/borders\";\n@use \"../variables/colour\";\n@use \"../tools/media\";\n\n@function brand-colour($colour, $opacity: 1) {\n @return colour.brand-colour($colour, $opacity);\n}\n\n@mixin colour-css-vars($excludes...) {\n @each $name, $value in colour.$colour-palette-default {\n @if not list.index($excludes, $name) {\n --#{$name}: #{$value};\n }\n }\n}\n\n@mixin colour-css-vars-dark($excludes...) {\n @each $name, $value in colour.$colour-palette-dark {\n @if not list.index($excludes, $name) {\n --#{$name}: #{$value};\n }\n }\n}\n\n@mixin colour-css-vars-high-contrast($excludes...) {\n @each $name, $value in colour.$colour-palette-high-contrast {\n @if not list.index($excludes, $name) {\n --#{$name}: #{$value};\n }\n }\n}\n\n@mixin colour-css-vars-high-contrast-dark($excludes...) {\n @each $name, $value in colour.$colour-palette-high-contrast-dark {\n @if not list.index($excludes, $name) {\n --#{$name}: #{$value};\n }\n }\n}\n\n@function colour-var($colour) {\n @return var(\n --#{$colour},\n #{map.get(colour.$colour-palette-default, $colour)}\n );\n}\n\n@mixin colour-font($colour, $important: false) {\n color: colour-var($colour) if($important, !important, null);\n}\n\n@mixin colour-background($colour, $important: false) {\n background-color: colour-var($colour) if($important, !important, null);\n}\n\n@mixin colour-background-brand($brandColour, $important: false) {\n background-color: #{brand-colour($brandColour)} if($important, !important, null);\n}\n\n@mixin colour-border(\n $colour,\n $width: \"\",\n $style: solid,\n $direction: \"\",\n $important: false\n) {\n @if $direction != \"\" {\n @if $width != \"\" {\n border-#{$direction}: $width\n colour-var($colour)\n $style\n if($important, !important, null);\n } @else {\n border-#{$direction}-color: colour-var($colour)\n if($important, !important, null);\n }\n } @else {\n @if $width != \"\" {\n border: $width\n colour-var($colour)\n $style\n if($important, !important, null);\n } @else {\n border-color: var(\n --#{$colour},\n #{map.get(colour.$colour-palette-default, $colour)}\n )\n if($important, !important, null);\n }\n }\n}\n\n@mixin colour-outline($colour, $width: \"\", $style: solid, $important: false) {\n @if $width != \"\" {\n outline: $width colour-var($colour) $style if($important, !important, null);\n } @else {\n outline-color: colour-var($colour) if($important, !important, null);\n }\n}\n\n@mixin colour-fill($colour, $important: false) {\n fill: colour-var($colour) if($important, !important, null);\n}\n\n@mixin thick-keyline($direction: \"\") {\n @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\",\n borders.$thick-border-width,\n solid,\n $direction\n );\n } @else {\n @include colour-border(\"form-error\", borders.$thick-border-width, solid);\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\")\n%light {\n @include colour-css-vars(\"form-error\");\n\n @media (prefers-contrast: more) {\n @include colour-css-vars-high-contrast(\"form-error\");\n }\n}\n\n@mixin light {\n @extend %light;\n}\n\n%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\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 .tna-template--system-theme & {\n @media (prefers-color-scheme: dark) {\n --link: #{map.get(colour.$colour-palette-default, \"link\")};\n --link-visited: #{map.get(colour.$colour-palette-default, \"link-visited\")};\n }\n }\n\n .tna-template--dark-theme & {\n --link: #{map.get(colour.$colour-palette-default, \"link\")};\n --link-visited: #{map.get(colour.$colour-palette-default, \"link-visited\")};\n }\n\n @include colour-background(\"background\");\n @include colour-font(\"font-base\");\n}\n\n@mixin accent-light {\n @extend %accent-light;\n}\n\n// Remove accent and contrast values (except for \"form-error\")\n%plain {\n @include colour-css-vars(\"form-error\");\n\n @media (prefers-contrast: more) {\n @include colour-css-vars-high-contrast(\"form-error\");\n }\n\n .tna-template--system-theme & {\n @media (prefers-color-scheme: dark) {\n @include colour-css-vars-dark(\"form-error\");\n }\n\n @media (prefers-contrast: more) and (prefers-color-scheme: dark) {\n @include colour-css-vars-high-contrast-dark(\"form-error\");\n }\n }\n\n .tna-template--dark-theme & {\n @include colour-css-vars-dark(\"form-error\");\n\n @media (prefers-contrast: more) {\n @include colour-css-vars-high-contrast-dark(\"form-error\");\n }\n }\n\n @include colour-background(\"background\");\n}\n\n@mixin plain {\n @extend %plain;\n}\n\n%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-accent-text: #{colour.brand-colour(\"white\")} !important;\n --button-accent-background: #{colour.brand-colour(\"brown\")} !important;\n}\n\n@mixin yellow-accent {\n @extend %yellow-accent;\n}\n\n%accent-lighter-text {\n --accent-font-base: #{colour.brand-colour(\"white\")} !important;\n --accent-font-dark: #{colour.brand-colour(\"white\")} !important;\n --accent-font-light: #{colour.brand-colour(\"white\", 0.7)} !important;\n --accent-icon-light: #{colour.brand-colour(\"white\", 0.45)} !important;\n --accent-link: #{colour.brand-colour(\"white\")} !important;\n --accent-link-visited: #{colour.brand-colour(\"white\")} !important;\n --accent-keyline: #{colour.brand-colour(\"white\", 0.5)} !important;\n --accent-keyline-dark: #{colour.brand-colour(\"white\", 0.8)} !important;\n --button-accent-text: #{colour.brand-colour(\"white\")} !important;\n}\n\n%black-accent {\n --accent-background: #{colour.brand-colour(\"black\")} !important;\n --accent-background-light: #{colour.brand-colour(\"light-grey\")} !important;\n --accent-border: #{colour.brand-colour(\"black\")} !important;\n --accent-list-marker: #{colour.brand-colour(\"grey\")} !important;\n --button-accent-text: #{colour.brand-colour(\"black\")} !important;\n --button-accent-background: #{colour.brand-colour(\"grey\")} !important;\n}\n\n@mixin black-accent {\n @extend %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-accent-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-accent-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-accent-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-accent-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 \"sass:math\";\n@use \"../../tools/colour\";\n@use \"../../tools/grid\";\n@use \"../../tools/media\";\n@use \"../../tools/spacing\";\n@use \"../../tools/typography\";\n\n.tna-global-header {\n padding-top: spacing.space(1);\n\n @include colour.contrast;\n background: linear-gradient(\n 0deg,\n rgb(34 34 34 / 100%) 0%,\n rgb(0 0 0 / 100%) 100%\n );\n\n @include colour.colour-font(\"font-base\");\n\n .tna-template--dark-theme & {\n background: colour.brand-colour(\"black\");\n }\n\n .tna-template--system-theme & {\n @media (prefers-color-scheme: dark) {\n background: colour.brand-colour(\"black\");\n }\n }\n\n &__main {\n padding-bottom: spacing.space(1.5);\n }\n\n &__logo-wrapper {\n margin-top: spacing.space(0.5);\n\n display: flex;\n }\n\n &__logo {\n display: flex;\n align-items: flex-end;\n gap: spacing.space(1);\n\n text-decoration: none;\n\n &--link {\n &,\n &:link,\n &:visited {\n @include colour.colour-font(\"font-base\");\n }\n\n &:hover {\n text-decoration: none;\n\n @include colour.colour-outline(\"font-dark\", 0.3125rem, solid);\n outline-offset: 1px;\n }\n }\n }\n\n .tna-logo {\n width: 6.75rem;\n height: 6.75rem;\n\n flex-shrink: 0;\n }\n\n &__logo-strapline {\n padding-right: spacing.space(0.625);\n\n line-height: math.div(6.75rem, 3);\n text-transform: uppercase;\n\n @include typography.heading-font;\n @include typography.font-size(20);\n }\n\n &__navigation-button-wrapper {\n display: none;\n }\n\n &__hamburger {\n width: 2rem;\n height: 0.25rem;\n\n display: block;\n\n @include colour.colour-background(\"font-dark\");\n\n &::before,\n &::after {\n content: \"\";\n\n height: 0.25rem;\n\n display: block;\n\n position: absolute;\n right: 0;\n left: 0;\n\n background-color: inherit;\n }\n\n &::before {\n top: 0;\n }\n\n &::after {\n bottom: 0;\n }\n }\n\n &__navigation-button {\n height: 2rem;\n padding: 0;\n\n appearance: none;\n\n display: block;\n\n position: relative;\n\n font-size: 0;\n\n background: none;\n\n border: 0 transparent solid;\n border-width: 0.25rem 0;\n\n cursor: pointer;\n\n &--opened {\n .tna-global-header__hamburger {\n height: 0;\n\n &::before {\n top: 0.625rem;\n\n transform: rotate(-135deg);\n }\n\n &::after {\n bottom: 0.625rem;\n\n transform: rotate(135deg);\n }\n }\n }\n }\n\n &__navigation-wrapper {\n }\n\n &__navigation {\n height: 100%;\n margin: spacing.space(0.5) 0 0;\n\n position: relative;\n\n columns: 2;\n column-gap: spacing.space(2);\n\n list-style: none;\n }\n\n &__navigation-item {\n break-inside: avoid;\n }\n\n &__navigation-item-link {\n min-width: 15rem;\n height: math.div(6.75rem, 3);\n\n display: block;\n box-sizing: border-box;\n\n line-height: math.div(6.75rem, 3);\n text-decoration: none;\n\n @include typography.font-size(17);\n\n @include colour.colour-border(\"keyline\", 0.5px, solid, bottom);\n\n &,\n &:link,\n &:visited {\n @include colour.colour-font(\"font-base\");\n }\n\n &:hover {\n @include typography.interacted-text-decoration;\n }\n }\n\n &__top-navigation {\n padding: 0 0 spacing.space(0.5);\n\n display: flex;\n justify-content: flex-end;\n gap: spacing.space(1.5);\n\n @include typography.font-size(15);\n list-style: none;\n }\n\n &__top-navigation-item {\n }\n\n &__top-navigation-link {\n display: flex;\n align-items: center;\n gap: spacing.space(0.5);\n\n text-decoration: none;\n\n &,\n &:link,\n &:visited {\n @include colour.colour-font(\"font-light\");\n }\n\n &:hover {\n @include colour.colour-font(\"font-base\");\n @include typography.interacted-text-decoration;\n }\n\n svg {\n height: 1em;\n\n display: inline-block;\n\n path {\n fill: currentColor;\n }\n }\n }\n\n @include media.on-medium {\n &__navigation {\n column-gap: spacing.space(1);\n }\n\n &__navigation-item-link {\n @include typography.font-size(16);\n }\n\n &--collapse-on-medium &__navigation-wrapper {\n width: 100%;\n }\n\n &--collapse-on-medium &__top-navigation-wrapper {\n flex: 1;\n order: 2;\n }\n\n &--collapse-on-medium &__main {\n padding-bottom: spacing.space(1);\n }\n\n &--collapse-on-medium &__logo {\n gap: spacing.space(0.75);\n }\n\n &--collapse-on-medium &__logo-wrapper {\n margin-top: spacing.space(0.5);\n margin-bottom: spacing.space(0.5);\n }\n\n &--collapse-on-medium .tna-logo {\n width: 5rem;\n height: 5rem;\n }\n\n &--collapse-on-medium &__logo-strapline {\n line-height: math.div(5rem, 3);\n }\n\n &--collapse-on-medium &__navigation {\n margin-bottom: spacing.space(0.5);\n }\n\n &--collapse-on-medium &__navigation,\n &--collapse-on-medium &__navigation-item,\n &--collapse-on-medium &__navigation-item-link {\n height: auto;\n }\n }\n\n @include media.on-mobile {\n &__main {\n padding-bottom: 0;\n }\n\n &__logo-wrapper,\n &__navigation-button-wrapper {\n margin-top: 0;\n margin-bottom: spacing.space(1);\n }\n\n &__logo {\n gap: spacing.space(0.75);\n }\n\n &__navigation-button-wrapper {\n display: flex;\n align-items: center;\n }\n\n &__navigation,\n &__navigation-item,\n &__navigation-item-link {\n height: auto;\n }\n\n &__navigation {\n margin-top: 0;\n\n columns: 1;\n\n background-color: rgb(255 255 255 / 10%);\n\n @include colour.colour-border(\"keyline-dark\", 2px, solid, top);\n @include colour.colour-border(\"keyline-dark\", 2px, solid, bottom);\n }\n\n &__navigation-item {\n flex-direction: column;\n align-items: flex-start;\n }\n\n &__navigation-item-link {\n line-height: 1.75rem;\n @include typography.main-font-weight-medium;\n }\n\n &__navigation-item:last-child &__navigation-item-link {\n border-bottom: none;\n }\n\n &__navigation-item-contents {\n display: block;\n }\n\n &__navigation-item-children {\n margin-bottom: spacing.space(1);\n margin-left: spacing.space(1.5);\n }\n\n &__top-navigation {\n padding-top: spacing.space(1);\n padding-bottom: spacing.space(1);\n\n justify-content: flex-start;\n }\n }\n\n @include media.on-small {\n .tna-logo {\n width: 4rem;\n height: 4rem;\n }\n\n &__logo-strapline {\n line-height: 1.25rem;\n }\n\n &__navigation {\n width: calc(100% + #{grid.gutter-width-double()});\n\n left: -#{grid.gutter-width()};\n }\n\n &__navigation-item-link {\n padding: spacing.space(0.5) grid.gutter-width();\n }\n }\n\n @include media.on-tiny {\n .tna-logo {\n width: 3.5rem;\n height: 3.5rem;\n }\n\n &__logo-strapline {\n line-height: 1;\n }\n\n &__navigation {\n width: calc(100% + #{grid.gutter-width-tiny-double()});\n\n left: -#{grid.gutter-width-tiny()};\n }\n\n &__navigation-item-link {\n padding: spacing.space(0.5) grid.gutter-width-tiny();\n }\n }\n\n @include colour.on-high-contrast-and-forced-colours {\n @include colour.colour-border(\"keyline\", 1px, solid, bottom);\n }\n\n @include colour.on-forced-colours {\n &__navigation-button {\n height: auto;\n\n line-height: 2;\n @include typography.font-size(18);\n @include typography.main-font-weight-bold;\n\n border: none;\n }\n\n &__hamburger {\n display: none;\n }\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","@use \"sass:math\";\n@use \"../variables/media\";\n@use \"../variables/typography\";\n\n$smallest-large-device-em: #{math.div(\n media.$largest-medium-device-px + 1,\n typography.$relative-1rem-px\n )}em;\n$largest-medium-device-em: #{math.div(\n media.$largest-medium-device-px,\n typography.$relative-1rem-px\n )}em;\n$smallest-medium-device-em: #{math.div(\n media.$largest-small-device-px + 1,\n typography.$relative-1rem-px\n )}em;\n$largest-small-device-em: #{math.div(\n media.$largest-small-device-px,\n typography.$relative-1rem-px\n )}em;\n$smallest-small-device-em: #{math.div(\n media.$largest-tiny-device-px + 1,\n typography.$relative-1rem-px\n )}em;\n$largest-tiny-device-em: #{math.div(\n media.$largest-tiny-device-px,\n typography.$relative-1rem-px\n )}em;\n\n$media-large: \"(min-width: #{$smallest-large-device-em})\";\n$media-lt-large: \"(max-width: #{$largest-medium-device-em})\";\n$media-medium: \"(min-width: #{$smallest-medium-device-em}) and (max-width: #{$largest-medium-device-em})\";\n$media-gt-mobile: \"(min-width: #{$smallest-medium-device-em})\";\n$media-mobile: \"(max-width: #{$largest-small-device-em})\";\n$media-small: \"(min-width: #{$smallest-small-device-em}) and (max-width: #{$largest-small-device-em})\";\n$media-gt-tiny: \"(min-width: #{$smallest-small-device-em})\";\n$media-tiny: \"(max-width: #{$largest-tiny-device-em})\";\n\n// https://nationalarchives.github.io/design-system/styles/media/#media-queries\n@mixin on-large() {\n @media #{$media-large} {\n @content;\n }\n}\n\n@mixin on-medium() {\n @media #{$media-medium} {\n @content;\n }\n}\n\n@mixin on-small() {\n @media #{$media-small} {\n @content;\n }\n}\n\n@mixin on-tiny() {\n @media #{$media-tiny} {\n @content;\n }\n}\n\n@mixin on-larger-than-mobile() {\n @media #{$media-gt-mobile} {\n @content;\n }\n}\n\n@mixin on-larger-than-tiny() {\n @media #{$media-gt-tiny} {\n @content;\n }\n}\n\n@mixin on-smaller-than-large() {\n @media #{$media-lt-large} {\n @content;\n }\n}\n\n@mixin on-mobile() {\n @media #{$media-mobile} {\n @content;\n }\n}\n\n@mixin on-print() {\n @media print {\n @content;\n }\n}\n"]}
1	+ {"version":3,"sourceRoot":"","sources":["../../../../src/nationalarchives/tools/_colour.scss","../../../../src/nationalarchives/components/global-header/global-header.scss","../../../../src/nationalarchives/tools/_typography.scss","../../../../src/nationalarchives/variables/_typography.scss","../../../../src/nationalarchives/tools/_media.scss"],"names":[],"mappings":"AAyLA,mBACE,yCACA,uCACA,uCACA,yCACA,yCACA,6BACA,6CACA,mCACA,6CACA,2CACA,uDACA,uDACA,mEACA,2CAjJA,4CAJA,gCC3CF,mBACE,iBAGA,wEDuCA,gCC/BA,6CACE,mBAIA,mCADF,+CAEI,oBAIJ,yBACE,oBAGF,iCACE,eAEA,aAGF,yBACE,aACA,qBACA,SAEA,qBAGE,0GDGJ,gCCGI,qCACE,qBD0CJ,sDCvCI,mBAKN,6BACE,cACA,eAEA,cAGF,mCACE,mBAEA,oBACA,yBClCF,YCcA,gDDbA,YCgBoB,IDlDpB,kBDyEA,8CACE,aAGF,8BACE,WACA,cAEA,cDjCF,gDCqCE,2EAEE,WAEA,cAEA,cAEA,kBACA,QACA,OAEA,yBAGF,sCACE,MAGF,qCACE,SAIJ,sCACE,YACA,UAEA,gBAEA,cAEA,kBAEA,YAEA,gBAEA,6BACA,sBAEA,eAGE,4EACE,SAEA,oFACE,YAEA,0BAGF,mFACE,eAEA,yBASR,+BACE,YACA,eAEA,kBAEA,UACA,gBAEA,gBAGF,oCACE,mBAGF,yCACE,gBACA,eAEA,cACA,sBAEA,oBACA,qBC9KF,oBFgEI,4DCoHF,wIDxIF,gCC8IE,+CClIF,0BACA,0BCpCsC,MF0KtC,mCACE,gBAEA,aACA,yBACA,SCpMF,oBDuME,gBAMF,wCACE,aACA,mBACA,QAEA,qBAEA,qIDxKF,yCC8KE,8CD9KF,gCEYA,0BACA,0BCpCsC,MF0MpC,4CACE,WAEA,qBAEA,iDACE,kBG7LN,kDHmME,+BACE,gBAGF,yCC/OF,eDmPE,8EACE,WAGF,kFACE,OACA,QAGF,gEACE,oBAGF,gEACE,SAGF,wEACE,eACA,kBAGF,iDACE,WACA,YAGF,0EACE,4BAGF,sEACE,kBAGF,iOAGE,aG7MJ,wBHkNE,yBACE,iBAGF,+EAEE,aACA,mBAGF,yBACE,SAGF,8CACE,aACA,mBAGF,4GAGE,YAGF,+BACE,aAEA,UAEA,sCD5PA,uGCkQF,oCACE,sBACA,uBAGF,yCACE,oBC3TJ,YCewB,IFgTtB,wFACE,mBAGF,6CACE,cAGF,6CACE,mBACA,iBAGF,mCACE,iBACA,oBAEA,4BG/SJ,kDHoTE,6BACE,WACA,YAGF,mCACE,oBAGF,+BACE,wBAEA,WAGF,yCACE,kBG9TJ,wBHmUE,6BACE,aACA,cAGF,mCACE,cAGF,+BACE,wBAEA,WAGF,yCACE,kBD8BJ,8BCpaF,mBD+DM,4DA+VJ,+BC9ZF,mBD+DM,4DAqWJ,8BCrBE,sCACE,YAEA,cCnZJ,mBAiBA,YCYsB,IF0XlB,YAGF,8BACE","file":"global-header.css","sourcesContent":["@use \"sass:list\";\n@use \"sass:map\";\n@use \"../variables/borders\";\n@use \"../variables/colour\";\n@use \"../tools/media\";\n\n@function brand-colour($colour, $opacity: 1) {\n @return colour.brand-colour($colour, $opacity);\n}\n\n@mixin colour-css-vars($excludes...) {\n @each $name, $value in colour.$colour-palette-default {\n @if not list.index($excludes, $name) {\n --#{$name}: #{$value};\n }\n }\n}\n\n@mixin colour-css-vars-dark($excludes...) {\n @each $name, $value in colour.$colour-palette-dark {\n @if not list.index($excludes, $name) {\n --#{$name}: #{$value};\n }\n }\n}\n\n@mixin colour-css-vars-high-contrast($excludes...) {\n @each $name, $value in colour.$colour-palette-high-contrast {\n @if not list.index($excludes, $name) {\n --#{$name}: #{$value};\n }\n }\n}\n\n@mixin colour-css-vars-high-contrast-dark($excludes...) {\n @each $name, $value in colour.$colour-palette-high-contrast-dark {\n @if not list.index($excludes, $name) {\n --#{$name}: #{$value};\n }\n }\n}\n\n@function colour-var($colour) {\n @return var(\n --#{$colour},\n #{map.get(colour.$colour-palette-default, $colour)}\n );\n}\n\n@mixin colour-font($colour, $important: false) {\n color: colour-var($colour) if($important, !important, null);\n}\n\n@mixin colour-background($colour, $important: false) {\n background-color: colour-var($colour) if($important, !important, null);\n}\n\n@mixin colour-background-brand($brandColour, $important: false) {\n background-color: #{brand-colour($brandColour)} if($important, !important, null);\n}\n\n@mixin colour-border(\n $colour,\n $width: \"\",\n $style: solid,\n $direction: \"\",\n $important: false\n) {\n @if $direction != \"\" {\n @if $width != \"\" {\n border-#{$direction}: $width\n colour-var($colour)\n $style\n if($important, !important, null);\n } @else {\n border-#{$direction}-color: colour-var($colour)\n if($important, !important, null);\n }\n } @else {\n @if $width != \"\" {\n border: $width\n colour-var($colour)\n $style\n if($important, !important, null);\n } @else {\n border-color: var(\n --#{$colour},\n #{map.get(colour.$colour-palette-default, $colour)}\n )\n if($important, !important, null);\n }\n }\n}\n\n@mixin colour-outline($colour, $width: \"\", $style: solid, $important: false) {\n @if $width != \"\" {\n outline: $width colour-var($colour) $style if($important, !important, null);\n } @else {\n outline-color: colour-var($colour) if($important, !important, null);\n }\n}\n\n@mixin colour-fill($colour, $important: false) {\n fill: colour-var($colour) if($important, !important, null);\n}\n\n@mixin thick-keyline($direction: \"\") {\n @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 .tna-template--system-theme & {\n @media (prefers-color-scheme: dark) {\n --link: #{map.get(colour.$colour-palette-default, \"link\")};\n --link-visited: #{map.get(colour.$colour-palette-default, \"link-visited\")};\n }\n }\n\n .tna-template--dark-theme & {\n --link: #{map.get(colour.$colour-palette-default, \"link\")};\n --link-visited: #{map.get(colour.$colour-palette-default, \"link-visited\")};\n }\n\n @include colour-background(\"background\");\n @include colour-font(\"font-base\");\n}\n\n@mixin accent-light {\n @extend %accent-light;\n}\n\n%yellow-accent {\n --accent-background: #{colour.brand-colour(\"yellow\")} !important;\n --accent-background-light: #{colour.brand-colour(\"cream\")} !important;\n --accent-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 \"sass:math\";\n@use \"../../tools/colour\";\n@use \"../../tools/grid\";\n@use \"../../tools/media\";\n@use \"../../tools/spacing\";\n@use \"../../tools/typography\";\n\n.tna-global-header {\n padding-top: spacing.space(1);\n\n @include colour.contrast;\n background: linear-gradient(\n 0deg,\n rgb(34 34 34 / 100%) 0%,\n rgb(0 0 0 / 100%) 100%\n );\n\n @include colour.colour-font(\"font-base\");\n\n .tna-template--dark-theme & {\n background: colour.brand-colour(\"black\");\n }\n\n .tna-template--system-theme & {\n @media (prefers-color-scheme: dark) {\n background: colour.brand-colour(\"black\");\n }\n }\n\n &__main {\n padding-bottom: spacing.space(1.5);\n }\n\n &__logo-wrapper {\n margin-top: spacing.space(0.5);\n\n display: flex;\n }\n\n &__logo {\n display: flex;\n align-items: flex-end;\n gap: spacing.space(1);\n\n text-decoration: none;\n\n &--link {\n &,\n &:link,\n &:visited {\n @include colour.colour-font(\"font-base\");\n }\n\n &:hover {\n text-decoration: none;\n\n @include colour.colour-outline(\"font-dark\", 0.3125rem, solid);\n outline-offset: 1px;\n }\n }\n }\n\n .tna-logo {\n width: 6.75rem;\n height: 6.75rem;\n\n flex-shrink: 0;\n }\n\n &__logo-strapline {\n padding-right: spacing.space(0.625);\n\n line-height: math.div(6.75rem, 3);\n text-transform: uppercase;\n\n @include typography.heading-font;\n @include typography.font-size(20);\n }\n\n &__navigation-button-wrapper {\n display: none;\n }\n\n &__hamburger {\n width: 2rem;\n height: 0.25rem;\n\n display: block;\n\n @include colour.colour-background(\"font-dark\");\n\n &::before,\n &::after {\n content: \"\";\n\n height: 0.25rem;\n\n display: block;\n\n position: absolute;\n right: 0;\n left: 0;\n\n background-color: inherit;\n }\n\n &::before {\n top: 0;\n }\n\n &::after {\n bottom: 0;\n }\n }\n\n &__navigation-button {\n height: 2rem;\n padding: 0;\n\n appearance: none;\n\n display: block;\n\n position: relative;\n\n font-size: 0;\n\n background: none;\n\n border: 0 transparent solid;\n border-width: 0.25rem 0;\n\n cursor: pointer;\n\n &--opened {\n .tna-global-header__hamburger {\n height: 0;\n\n &::before {\n top: 0.625rem;\n\n transform: rotate(-135deg);\n }\n\n &::after {\n bottom: 0.625rem;\n\n transform: rotate(135deg);\n }\n }\n }\n }\n\n &__navigation-wrapper {\n }\n\n &__navigation {\n height: 100%;\n margin: spacing.space(0.5) 0 0;\n\n position: relative;\n\n columns: 2;\n column-gap: spacing.space(2);\n\n list-style: none;\n }\n\n &__navigation-item {\n break-inside: avoid;\n }\n\n &__navigation-item-link {\n min-width: 15rem;\n height: math.div(6.75rem, 3);\n\n display: block;\n box-sizing: border-box;\n\n line-height: math.div(6.75rem, 3);\n text-decoration: none;\n\n @include typography.font-size(17);\n\n @include colour.colour-border(\"keyline\", 0.5px, solid, bottom);\n\n &,\n &:link,\n &:visited {\n @include colour.colour-font(\"font-base\");\n }\n\n &:hover {\n @include typography.interacted-text-decoration;\n }\n }\n\n &__top-navigation {\n padding: 0 0 spacing.space(0.5);\n\n display: flex;\n justify-content: flex-end;\n gap: spacing.space(1.5);\n\n @include typography.font-size(15);\n list-style: none;\n }\n\n &__top-navigation-item {\n }\n\n &__top-navigation-link {\n display: flex;\n align-items: center;\n gap: spacing.space(0.5);\n\n text-decoration: none;\n\n &,\n &:link,\n &:visited {\n @include colour.colour-font(\"font-light\");\n }\n\n &:hover {\n @include colour.colour-font(\"font-base\");\n @include typography.interacted-text-decoration;\n }\n\n svg {\n height: 1em;\n\n display: inline-block;\n\n path {\n fill: currentColor;\n }\n }\n }\n\n @include media.on-medium {\n &__navigation {\n column-gap: spacing.space(1);\n }\n\n &__navigation-item-link {\n @include typography.font-size(16);\n }\n\n &--collapse-on-medium &__navigation-wrapper {\n width: 100%;\n }\n\n &--collapse-on-medium &__top-navigation-wrapper {\n flex: 1;\n order: 2;\n }\n\n &--collapse-on-medium &__main {\n padding-bottom: spacing.space(1);\n }\n\n &--collapse-on-medium &__logo {\n gap: spacing.space(0.75);\n }\n\n &--collapse-on-medium &__logo-wrapper {\n margin-top: spacing.space(0.5);\n margin-bottom: spacing.space(0.5);\n }\n\n &--collapse-on-medium .tna-logo {\n width: 5rem;\n height: 5rem;\n }\n\n &--collapse-on-medium &__logo-strapline {\n line-height: math.div(5rem, 3);\n }\n\n &--collapse-on-medium &__navigation {\n margin-bottom: spacing.space(0.5);\n }\n\n &--collapse-on-medium &__navigation,\n &--collapse-on-medium &__navigation-item,\n &--collapse-on-medium &__navigation-item-link {\n height: auto;\n }\n }\n\n @include media.on-mobile {\n &__main {\n padding-bottom: 0;\n }\n\n &__logo-wrapper,\n &__navigation-button-wrapper {\n margin-top: 0;\n margin-bottom: spacing.space(1);\n }\n\n &__logo {\n gap: spacing.space(0.75);\n }\n\n &__navigation-button-wrapper {\n display: flex;\n align-items: center;\n }\n\n &__navigation,\n &__navigation-item,\n &__navigation-item-link {\n height: auto;\n }\n\n &__navigation {\n margin-top: 0;\n\n columns: 1;\n\n background-color: rgb(255 255 255 / 10%);\n\n @include colour.colour-border(\"keyline-dark\", 2px, solid, top);\n @include colour.colour-border(\"keyline-dark\", 2px, solid, bottom);\n }\n\n &__navigation-item {\n flex-direction: column;\n align-items: flex-start;\n }\n\n &__navigation-item-link {\n line-height: 1.75rem;\n @include typography.main-font-weight-medium;\n }\n\n &__navigation-item:last-child &__navigation-item-link {\n border-bottom: none;\n }\n\n &__navigation-item-contents {\n display: block;\n }\n\n &__navigation-item-children {\n margin-bottom: spacing.space(1);\n margin-left: spacing.space(1.5);\n }\n\n &__top-navigation {\n padding-top: spacing.space(1);\n padding-bottom: spacing.space(1);\n\n justify-content: flex-start;\n }\n }\n\n @include media.on-small {\n .tna-logo {\n width: 4rem;\n height: 4rem;\n }\n\n &__logo-strapline {\n line-height: 1.25rem;\n }\n\n &__navigation {\n width: calc(100% + #{grid.gutter-width-double()});\n\n left: -#{grid.gutter-width()};\n }\n\n &__navigation-item-link {\n padding: spacing.space(0.5) grid.gutter-width();\n }\n }\n\n @include media.on-tiny {\n .tna-logo {\n width: 3.5rem;\n height: 3.5rem;\n }\n\n &__logo-strapline {\n line-height: 1;\n }\n\n &__navigation {\n width: calc(100% + #{grid.gutter-width-tiny-double()});\n\n left: -#{grid.gutter-width-tiny()};\n }\n\n &__navigation-item-link {\n padding: spacing.space(0.5) grid.gutter-width-tiny();\n }\n }\n\n @include colour.on-high-contrast-and-forced-colours {\n @include colour.colour-border(\"keyline\", 1px, solid, bottom);\n }\n\n @include colour.on-forced-colours {\n &__navigation-button {\n height: auto;\n\n line-height: 2;\n @include typography.font-size(18);\n @include typography.main-font-weight-bold;\n\n border: none;\n }\n\n &__hamburger {\n display: none;\n }\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","@use \"sass:math\";\n@use \"../variables/media\";\n@use \"../variables/typography\";\n\n$smallest-large-device-em: #{math.div(\n media.$largest-medium-device-px + 1,\n typography.$relative-1rem-px\n )}em;\n$largest-medium-device-em: #{math.div(\n media.$largest-medium-device-px,\n typography.$relative-1rem-px\n )}em;\n$smallest-medium-device-em: #{math.div(\n media.$largest-small-device-px + 1,\n typography.$relative-1rem-px\n )}em;\n$largest-small-device-em: #{math.div(\n media.$largest-small-device-px,\n typography.$relative-1rem-px\n )}em;\n$smallest-small-device-em: #{math.div(\n media.$largest-tiny-device-px + 1,\n typography.$relative-1rem-px\n )}em;\n$largest-tiny-device-em: #{math.div(\n media.$largest-tiny-device-px,\n typography.$relative-1rem-px\n )}em;\n\n$media-large: \"(min-width: #{$smallest-large-device-em})\";\n$media-lt-large: \"(max-width: #{$largest-medium-device-em})\";\n$media-medium: \"(min-width: #{$smallest-medium-device-em}) and (max-width: #{$largest-medium-device-em})\";\n$media-gt-mobile: \"(min-width: #{$smallest-medium-device-em})\";\n$media-mobile: \"(max-width: #{$largest-small-device-em})\";\n$media-small: \"(min-width: #{$smallest-small-device-em}) and (max-width: #{$largest-small-device-em})\";\n$media-gt-tiny: \"(min-width: #{$smallest-small-device-em})\";\n$media-tiny: \"(max-width: #{$largest-tiny-device-em})\";\n\n// https://nationalarchives.github.io/design-system/styles/media/#media-queries\n@mixin on-large() {\n @media #{$media-large} {\n @content;\n }\n}\n\n@mixin on-medium() {\n @media #{$media-medium} {\n @content;\n }\n}\n\n@mixin on-small() {\n @media #{$media-small} {\n @content;\n }\n}\n\n@mixin on-tiny() {\n @media #{$media-tiny} {\n @content;\n }\n}\n\n@mixin on-larger-than-mobile() {\n @media #{$media-gt-mobile} {\n @content;\n }\n}\n\n@mixin on-larger-than-tiny() {\n @media #{$media-gt-tiny} {\n @content;\n }\n}\n\n@mixin on-smaller-than-large() {\n @media #{$media-lt-large} {\n @content;\n }\n}\n\n@mixin on-mobile() {\n @media #{$media-mobile} {\n @content;\n }\n}\n\n@mixin on-print() {\n @media print {\n @content;\n }\n}\n"]}

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

	@@ -1 +1 @@
1	- {"version":3,"sourceRoot":"","sources":["../../../../src/nationalarchives/tools/_colour.scss","../../../../src/nationalarchives/tools/_media.scss","../../../../src/nationalarchives/components/header/header.scss","../../../../src/nationalarchives/tools/_typography.scss","../../../../src/nationalarchives/variables/_typography.scss"],"names":[],"mappings":"AAqLA,8BACE,yCACA,uCACA,uCACA,yCACA,yCACA,6BACA,6CACA,mCACA,6CACA,2CACA,uDACA,uDACA,mEACA,2CA7IA,4CAJA,gCCgCA,wBD6HF,0DAEI,yCACA,uCACA,uCACA,yCACA,yCACA,6BACA,6CACA,mCACA,6CACA,2CACA,uDACA,uDACA,mEACA,2CAxKF,4CAJA,iCE3CF,YAGE,kBAEA,wEAMA,sCACE,mBAIA,mCADF,wCAEI,oBAIJ,kBACE,gBACA,mBAEA,iBAKF,uBACE,qBChCF,eDmCE,kFFSF,gCEHE,6BACE,0BAGF,iCACE,gBAKF,oCACE,8BAIJ,kBACE,iBACA,oBAGF,2BACE,aACA,qBAEA,cACA,qBAGE,gHAGE,cAGF,mDACE,qBFcJ,sDEXI,mBAKN,sBACE,WACA,YAEA,qBAEA,cAGF,4BACE,cAEA,qBAEA,iBCjEF,YCcA,gDDbA,YCgBoB,IDlDpB,kBDqGE,yBAGF,+BACE,kBAEA,aAGF,uBACE,WACA,cAEA,cFlEF,gDEsEE,6DAEE,WAEA,cAEA,cAEA,kBACA,QACA,OAEA,yBAGF,+BACE,MAGF,8BACE,SAIJ,sCACE,YACA,UAEA,gBAEA,cAEA,kBAEA,YAEA,gBAEA,6BACA,sBAEA,eAGE,qEACE,SAEA,6EACE,YAEA,0BAGF,4EACE,eAEA,yBAMR,wBACE,aACA,8BACA,qBACA,8BAEA,kBACA,UAGF,kCACE,SACA,eAEA,aACA,yBACA,aAEA,cAEA,gBCxMF,oBD6MA,iCACE,cAGF,sCACE,aACA,mBAEA,qBAEA,+HF3KF,yCEmLI,8SFnLJ,gCGYA,0BACA,0BCpCsC,MFkNpC,gDACE,iBAIJ,8BACE,SACA,UAEA,aACA,iBACA,SAEA,mBAEA,gBAMF,kCACE,cAEA,qBAEA,kBAEA,cACA,qBCvPF,YCewB,IF4OtB,yCACE,WAEA,SAEA,kBACA,QACA,SACA,OFhOJ,gDEqOE,mHAGE,cAME,4GF9NF,kDEqOJ,kCACE,sCD9PF,kDCsQE,sBACE,WACA,YAGF,4BACE,sBDxOJ,wBC6OE,kBACE,iBACA,oBAIA,oCACE,gBACA,eAIJ,+BACE,cAEA,0CACE,eAIJ,wBACE,sBACA,oBAEA,mCACE,gBACA,eAGF,kDACE,aAEA,wDACE,aAKN,kCACE,iBAEA,2BFlSA,2DEuSF,iCACE,SACA,YAIA,+HFjUJ,yCEuUI,4CFvUJ,qCE4UE,8BACE,WAEA,sBACA,MAEA,sCF9TA,uGEoUF,6BACE,SAEA,cFvUA,wDE2UA,yCACE,gBAIJ,kCACE,cAEA,oBAEA,yCACE,QACA,YAEA,MACA,WAME,4GFhWJ,4DClBJ,kDC2XE,sBACE,WACA,YAGF,4BACE,oBAGF,yGAGE,mBAGF,+DAEE,kBAGF,kCACE,iCACA,iCD3YJ,wBCgZE,uEAEE,mBAGF,6BACE,kBAGF,sBACE,aACA,cAGF,4BACE,cAGF,kCACE,UAGF,kCACE,mBACA,iCF9BJ,8BEmCE,8BFjaE,4DAwXJ,+BEyCE,8BFjaE,4DA8XJ,8BE0CE,sCACE,YAEA,cC3eJ,mBAiBA,YCYsB,IFkdlB,YAGF,uBACE","file":"header.css","sourcesContent":["@use \"sass:list\";\n@use \"sass:map\";\n@use \"../variables/borders\";\n@use \"../variables/colour\";\n@use \"../tools/media\";\n\n@function brand-colour($colour, $opacity: 1) {\n @return colour.brand-colour($colour, $opacity);\n}\n\n@mixin colour-css-vars($excludes...) {\n @each $name, $value in colour.$colour-palette-default {\n @if not list.index($excludes, $name) {\n --#{$name}: #{$value};\n }\n }\n}\n\n@mixin colour-css-vars-dark($excludes...) {\n @each $name, $value in colour.$colour-palette-dark {\n @if not list.index($excludes, $name) {\n --#{$name}: #{$value};\n }\n }\n}\n\n@mixin colour-css-vars-high-contrast($excludes...) {\n @each $name, $value in colour.$colour-palette-high-contrast {\n @if not list.index($excludes, $name) {\n --#{$name}: #{$value};\n }\n }\n}\n\n@mixin colour-css-vars-high-contrast-dark($excludes...) {\n @each $name, $value in colour.$colour-palette-high-contrast-dark {\n @if not list.index($excludes, $name) {\n --#{$name}: #{$value};\n }\n }\n}\n\n@function colour-var($colour) {\n @return var(\n --#{$colour},\n #{map.get(colour.$colour-palette-default, $colour)}\n );\n}\n\n@mixin colour-font($colour, $important: false) {\n color: colour-var($colour) if($important, !important, null);\n}\n\n@mixin colour-background($colour, $important: false) {\n background-color: colour-var($colour) if($important, !important, null);\n}\n\n@mixin colour-background-brand($brandColour, $important: false) {\n background-color: #{brand-colour($brandColour)} if($important, !important, null);\n}\n\n@mixin colour-border(\n $colour,\n $width: \"\",\n $style: solid,\n $direction: \"\",\n $important: false\n) {\n @if $direction != \"\" {\n @if $width != \"\" {\n border-#{$direction}: $width\n colour-var($colour)\n $style\n if($important, !important, null);\n } @else {\n border-#{$direction}-color: colour-var($colour)\n if($important, !important, null);\n }\n } @else {\n @if $width != \"\" {\n border: $width\n colour-var($colour)\n $style\n if($important, !important, null);\n } @else {\n border-color: var(\n --#{$colour},\n #{map.get(colour.$colour-palette-default, $colour)}\n )\n if($important, !important, null);\n }\n }\n}\n\n@mixin colour-outline($colour, $width: \"\", $style: solid, $important: false) {\n @if $width != \"\" {\n outline: $width colour-var($colour) $style if($important, !important, null);\n } @else {\n outline-color: colour-var($colour) if($important, !important, null);\n }\n}\n\n@mixin colour-fill($colour, $important: false) {\n fill: colour-var($colour) if($important, !important, null);\n}\n\n@mixin thick-keyline($direction: \"\") {\n @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\",\n borders.$thick-border-width,\n solid,\n $direction\n );\n } @else {\n @include colour-border(\"form-error\", borders.$thick-border-width, solid);\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\")\n%light {\n @include colour-css-vars(\"form-error\");\n\n @media (prefers-contrast: more) {\n @include colour-css-vars-high-contrast(\"form-error\");\n }\n}\n\n@mixin light {\n @extend %light;\n}\n\n%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\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 .tna-template--system-theme & {\n @media (prefers-color-scheme: dark) {\n --link: #{map.get(colour.$colour-palette-default, \"link\")};\n --link-visited: #{map.get(colour.$colour-palette-default, \"link-visited\")};\n }\n }\n\n .tna-template--dark-theme & {\n --link: #{map.get(colour.$colour-palette-default, \"link\")};\n --link-visited: #{map.get(colour.$colour-palette-default, \"link-visited\")};\n }\n\n @include colour-background(\"background\");\n @include colour-font(\"font-base\");\n}\n\n@mixin accent-light {\n @extend %accent-light;\n}\n\n// Remove accent and contrast values (except for \"form-error\")\n%plain {\n @include colour-css-vars(\"form-error\");\n\n @media (prefers-contrast: more) {\n @include colour-css-vars-high-contrast(\"form-error\");\n }\n\n .tna-template--system-theme & {\n @media (prefers-color-scheme: dark) {\n @include colour-css-vars-dark(\"form-error\");\n }\n\n @media (prefers-contrast: more) and (prefers-color-scheme: dark) {\n @include colour-css-vars-high-contrast-dark(\"form-error\");\n }\n }\n\n .tna-template--dark-theme & {\n @include colour-css-vars-dark(\"form-error\");\n\n @media (prefers-contrast: more) {\n @include colour-css-vars-high-contrast-dark(\"form-error\");\n }\n }\n\n @include colour-background(\"background\");\n}\n\n@mixin plain {\n @extend %plain;\n}\n\n%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-accent-text: #{colour.brand-colour(\"white\")} !important;\n --button-accent-background: #{colour.brand-colour(\"brown\")} !important;\n}\n\n@mixin yellow-accent {\n @extend %yellow-accent;\n}\n\n%accent-lighter-text {\n --accent-font-base: #{colour.brand-colour(\"white\")} !important;\n --accent-font-dark: #{colour.brand-colour(\"white\")} !important;\n --accent-font-light: #{colour.brand-colour(\"white\", 0.7)} !important;\n --accent-icon-light: #{colour.brand-colour(\"white\", 0.45)} !important;\n --accent-link: #{colour.brand-colour(\"white\")} !important;\n --accent-link-visited: #{colour.brand-colour(\"white\")} !important;\n --accent-keyline: #{colour.brand-colour(\"white\", 0.5)} !important;\n --accent-keyline-dark: #{colour.brand-colour(\"white\", 0.8)} !important;\n --button-accent-text: #{colour.brand-colour(\"white\")} !important;\n}\n\n%black-accent {\n --accent-background: #{colour.brand-colour(\"black\")} !important;\n --accent-background-light: #{colour.brand-colour(\"light-grey\")} !important;\n --accent-border: #{colour.brand-colour(\"black\")} !important;\n --accent-list-marker: #{colour.brand-colour(\"grey\")} !important;\n --button-accent-text: #{colour.brand-colour(\"black\")} !important;\n --button-accent-background: #{colour.brand-colour(\"grey\")} !important;\n}\n\n@mixin black-accent {\n @extend %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-accent-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-accent-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-accent-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-accent-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 \"sass:math\";\n@use \"../variables/media\";\n@use \"../variables/typography\";\n\n$smallest-large-device-em: #{math.div(\n media.$largest-medium-device-px + 1,\n typography.$relative-1rem-px\n )}em;\n$largest-medium-device-em: #{math.div(\n media.$largest-medium-device-px,\n typography.$relative-1rem-px\n )}em;\n$smallest-medium-device-em: #{math.div(\n media.$largest-small-device-px + 1,\n typography.$relative-1rem-px\n )}em;\n$largest-small-device-em: #{math.div(\n media.$largest-small-device-px,\n typography.$relative-1rem-px\n )}em;\n$smallest-small-device-em: #{math.div(\n media.$largest-tiny-device-px + 1,\n typography.$relative-1rem-px\n )}em;\n$largest-tiny-device-em: #{math.div(\n media.$largest-tiny-device-px,\n typography.$relative-1rem-px\n )}em;\n\n$media-large: \"(min-width: #{$smallest-large-device-em})\";\n$media-lt-large: \"(max-width: #{$largest-medium-device-em})\";\n$media-medium: \"(min-width: #{$smallest-medium-device-em}) and (max-width: #{$largest-medium-device-em})\";\n$media-gt-mobile: \"(min-width: #{$smallest-medium-device-em})\";\n$media-mobile: \"(max-width: #{$largest-small-device-em})\";\n$media-small: \"(min-width: #{$smallest-small-device-em}) and (max-width: #{$largest-small-device-em})\";\n$media-gt-tiny: \"(min-width: #{$smallest-small-device-em})\";\n$media-tiny: \"(max-width: #{$largest-tiny-device-em})\";\n\n// https://nationalarchives.github.io/design-system/styles/media/#media-queries\n@mixin on-large() {\n @media #{$media-large} {\n @content;\n }\n}\n\n@mixin on-medium() {\n @media #{$media-medium} {\n @content;\n }\n}\n\n@mixin on-small() {\n @media #{$media-small} {\n @content;\n }\n}\n\n@mixin on-tiny() {\n @media #{$media-tiny} {\n @content;\n }\n}\n\n@mixin on-larger-than-mobile() {\n @media #{$media-gt-mobile} {\n @content;\n }\n}\n\n@mixin on-larger-than-tiny() {\n @media #{$media-gt-tiny} {\n @content;\n }\n}\n\n@mixin on-smaller-than-large() {\n @media #{$media-lt-large} {\n @content;\n }\n}\n\n@mixin on-mobile() {\n @media #{$media-mobile} {\n @content;\n }\n}\n\n@mixin on-print() {\n @media print {\n @content;\n }\n}\n","@use \"sass:math\";\n@use \"../../tools/colour\";\n@use \"../../tools/grid\";\n@use \"../../tools/media\";\n@use \"../../tools/spacing\";\n@use \"../../tools/typography\";\n\n.tna-header {\n @include colour.contrast;\n\n position: relative;\n\n background: linear-gradient(\n 0deg,\n rgb(34 34 34 / 100%) 0%,\n rgb(0 0 0 / 100%) 100%\n );\n\n .tna-template--dark-theme & {\n background: colour.brand-colour(\"black\");\n }\n\n .tna-template--system-theme & {\n @media (prefers-color-scheme: dark) {\n background: colour.brand-colour(\"black\");\n }\n }\n\n &__exit {\n padding-top: spacing.space(0.5);\n padding-bottom: spacing.space(0.5);\n\n text-align: right;\n\n @include colour.contrast;\n }\n\n &__exit-link {\n text-decoration: none;\n @include typography.font-size(16);\n\n &,\n &:link,\n &:visited {\n @include colour.colour-font(\"font-base\");\n }\n\n &:hover {\n text-decoration: underline;\n }\n\n .fa-solid {\n margin-left: spacing.space(0.5);\n }\n }\n\n &__contents {\n &.tna-container {\n justify-content: space-between;\n }\n }\n\n &__logo {\n padding-top: spacing.space(1.5);\n padding-bottom: spacing.space(1.5);\n }\n\n &__logo-contents {\n display: flex;\n align-items: flex-end;\n\n color: inherit;\n text-decoration: none;\n\n &--link {\n &,\n &:link,\n &:visited {\n color: inherit;\n }\n\n &:hover:not(:focus) {\n text-decoration: none;\n\n @include colour.colour-outline(\"font-dark\", 0.3125rem, solid);\n outline-offset: 1px;\n }\n }\n }\n\n .tna-logo {\n width: 6rem;\n height: 6rem;\n\n display: inline-block;\n\n flex-shrink: 0;\n }\n\n &__logo-strapline {\n margin: 0 spacing.space(0.75);\n\n display: inline-block;\n\n line-height: 2rem;\n @include typography.heading-font;\n @include typography.font-size(20);\n text-transform: uppercase;\n }\n\n &__navigation-toggle {\n align-self: center;\n\n display: none;\n }\n\n &__hamburger {\n width: 2rem;\n height: 0.25rem;\n\n display: block;\n\n @include colour.colour-background(\"font-dark\");\n\n &::before,\n &::after {\n content: \"\";\n\n height: 0.25rem;\n\n display: block;\n\n position: absolute;\n right: 0;\n left: 0;\n\n background-color: inherit;\n }\n\n &::before {\n top: 0;\n }\n\n &::after {\n bottom: 0;\n }\n }\n\n &__navigation-toggle-button {\n height: 2rem;\n padding: 0;\n\n appearance: none;\n\n display: block;\n\n position: relative;\n\n font-size: 0;\n\n background: none;\n\n border: 0 transparent solid;\n border-width: 0.25rem 0;\n\n cursor: pointer;\n\n &--opened {\n .tna-header__hamburger {\n height: 0;\n\n &::before {\n top: 0.625rem;\n\n transform: rotate(-135deg);\n }\n\n &::after {\n bottom: 0.625rem;\n\n transform: rotate(135deg);\n }\n }\n }\n }\n\n &__navigation {\n display: flex;\n flex-direction: column-reverse;\n align-items: flex-end;\n justify-content: space-between;\n\n position: relative;\n z-index: 2;\n }\n\n &__top-navigation-items {\n margin: 0;\n padding: spacing.space(1.25) 0;\n\n display: flex;\n justify-content: flex-end;\n gap: spacing.space(0.5) spacing.space(1.5);\n\n line-height: 1;\n\n list-style: none;\n\n @include typography.font-size(15);\n }\n\n &__top-navigation-item {\n display: block;\n }\n\n &__top-navigation-item-link {\n display: flex;\n align-items: center;\n\n text-decoration: none;\n\n &,\n &:link,\n &:visited {\n @include colour.colour-font(\"font-light\");\n }\n\n &:hover,\n &--selected {\n &,\n &:link,\n &:visited {\n @include colour.colour-font(\"font-base\");\n @include typography.interacted-text-decoration;\n }\n }\n\n .fa-solid {\n margin-right: spacing.space(0.375);\n }\n }\n\n &__navigation-items {\n margin: 0;\n padding: 0;\n\n display: flex;\n flex-wrap: nowrap;\n gap: spacing.space(2);\n\n white-space: nowrap;\n\n list-style: none;\n }\n\n &__navigation-item {\n }\n\n &__navigation-item-link {\n padding: spacing.space(0.5) 0;\n\n display: inline-block;\n\n position: relative;\n\n line-height: 2;\n text-decoration: none;\n\n @include typography.main-font-weight-medium;\n\n &::after {\n content: \"\";\n\n height: 0;\n\n position: absolute;\n right: 0;\n bottom: 0;\n left: 0;\n\n @include colour.colour-background(\"font-dark\");\n }\n\n &,\n &:link,\n &:visited {\n color: inherit;\n }\n\n &--selected {\n &,\n &:hover {\n &::after {\n @include colour.thick-keyline-dark(top);\n }\n }\n }\n }\n\n &.tna-background-accent {\n background: colour.colour-var(\"background\");\n }\n\n &.tna-background-accent &__navigation {\n @include colour.contrast-on-mobile;\n }\n\n @include media.on-medium {\n .tna-logo {\n width: 5rem;\n height: 5rem;\n }\n\n &__logo-strapline {\n line-height: 1.625rem;\n }\n }\n\n @include media.on-mobile {\n &__logo {\n padding-top: spacing.space(1);\n padding-bottom: spacing.space(1);\n }\n\n &__contents {\n &.tna-container {\n padding-right: 0;\n padding-left: 0;\n }\n }\n\n &__navigation-toggle {\n display: block;\n\n &.tna-column {\n padding-left: 0;\n }\n }\n\n &__navigation {\n flex-direction: column;\n align-items: stretch;\n\n &.tna-column {\n padding-right: 0;\n padding-left: 0;\n }\n\n .tna-template--js-enabled & {\n display: none;\n\n &--open {\n display: flex;\n }\n }\n }\n\n &__top-navigation-items {\n padding: spacing.space(0.5) spacing.space(1);\n\n justify-content: flex-start;\n\n @include colour.colour-border(\"keyline\", 1px, solid, bottom);\n }\n\n &__top-navigation-item {\n margin: 0;\n padding: spacing.space(0.5);\n }\n\n &__top-navigation-item-link {\n &,\n &:link,\n &:visited {\n @include colour.colour-font(\"font-light\");\n }\n\n &:hover {\n @include colour.colour-font(\"font-dark\");\n }\n }\n\n &__navigation-items {\n width: 100%;\n\n flex-direction: column;\n gap: 0;\n\n background-color: rgb(255 255 255 / 10%);\n\n @include colour.colour-border(\"keyline-dark\", 2px, solid, top);\n @include colour.colour-border(\"keyline-dark\", 2px, solid, bottom);\n }\n\n &__navigation-item {\n margin: 0;\n\n display: block;\n\n @include colour.colour-border(\"keyline\", 1px, solid, top);\n\n &:first-child {\n border-top: none;\n }\n }\n\n &__navigation-item-link {\n display: block;\n\n line-height: 1.75rem;\n\n &::after {\n width: 0;\n height: auto;\n\n top: 0;\n right: auto;\n }\n\n &--selected {\n &,\n &:hover {\n &::after {\n @include colour.colour-border(\"keyline\", 0.5rem, solid, left);\n }\n }\n }\n }\n }\n\n @include media.on-small {\n .tna-logo {\n width: 4rem;\n height: 4rem;\n }\n\n &__logo-strapline {\n line-height: 1.25rem;\n }\n\n &__logo.tna-column,\n &__navigation-item-link,\n &__navigation-toggle.tna-column {\n padding-right: grid.gutter-width();\n }\n\n &__logo.tna-column,\n &__navigation-item-link {\n padding-left: grid.gutter-width();\n }\n\n &__top-navigation-items {\n padding-right: calc(#{grid.gutter-width()} - 0.5rem);\n padding-left: calc(#{grid.gutter-width()} - 0.5rem);\n }\n }\n\n @include media.on-tiny {\n &__navigation-toggle.tna-column,\n &__logo.tna-column {\n padding-right: grid.gutter-width-tiny();\n }\n\n &__logo.tna-column {\n padding-left: grid.gutter-width-tiny();\n }\n\n .tna-logo {\n width: 3.5rem;\n height: 3.5rem;\n }\n\n &__logo-strapline {\n line-height: 1;\n }\n\n &__top-navigation-items {\n gap: 0.5rem;\n }\n\n &__navigation-item-link {\n padding-right: grid.gutter-width-tiny();\n padding-left: calc(#{grid.gutter-width-tiny()} + 0.5rem);\n }\n }\n\n @include colour.on-high-contrast-and-forced-colours {\n &,\n &__exit {\n @include colour.colour-border(\"keyline\", 1px, solid, bottom);\n }\n }\n\n @include colour.on-forced-colours {\n &__navigation-toggle-button {\n height: auto;\n\n line-height: 2;\n @include typography.font-size(18);\n @include typography.main-font-weight-bold;\n\n border: none;\n }\n\n &__hamburger {\n display: none;\n }\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"]}
1	+ {"version":3,"sourceRoot":"","sources":["../../../../src/nationalarchives/tools/_colour.scss","../../../../src/nationalarchives/tools/_media.scss","../../../../src/nationalarchives/components/header/header.scss","../../../../src/nationalarchives/tools/_typography.scss","../../../../src/nationalarchives/variables/_typography.scss"],"names":[],"mappings":"AAyLA,8BACE,yCACA,uCACA,uCACA,yCACA,yCACA,6BACA,6CACA,mCACA,6CACA,2CACA,uDACA,uDACA,mEACA,2CAjJA,4CAJA,gCCgCA,wBDiIF,0DAEI,yCACA,uCACA,uCACA,yCACA,yCACA,6BACA,6CACA,mCACA,6CACA,2CACA,uDACA,uDACA,mEACA,2CA5KF,4CAJA,iCE3CF,YAGE,kBAEA,wEAMA,sCACE,mBAIA,mCADF,wCAEI,oBAIJ,kBACE,gBACA,mBAEA,iBAKF,uBACE,qBChCF,eDmCE,kFFSF,gCEHE,6BACE,0BAGF,iCACE,gBAKF,oCACE,8BAIJ,kBACE,iBACA,oBAGF,2BACE,aACA,qBAEA,cACA,qBAGE,gHAGE,cAGF,mDACE,qBFcJ,sDEXI,mBAKN,sBACE,WACA,YAEA,qBAEA,cAGF,4BACE,cAEA,qBAEA,iBCjEF,YCcA,gDDbA,YCgBoB,IDlDpB,kBDqGE,yBAGF,+BACE,kBAEA,aAGF,uBACE,WACA,cAEA,cFlEF,gDEsEE,6DAEE,WAEA,cAEA,cAEA,kBACA,QACA,OAEA,yBAGF,+BACE,MAGF,8BACE,SAIJ,sCACE,YACA,UAEA,gBAEA,cAEA,kBAEA,YAEA,gBAEA,6BACA,sBAEA,eAGE,qEACE,SAEA,6EACE,YAEA,0BAGF,4EACE,eAEA,yBAMR,wBACE,aACA,8BACA,qBACA,8BAEA,kBACA,UAGF,kCACE,SACA,eAEA,aACA,yBACA,aAEA,cAEA,gBCxMF,oBD6MA,iCACE,cAGF,sCACE,aACA,mBAEA,qBAEA,+HF3KF,yCEmLI,8SFnLJ,gCGYA,0BACA,0BCpCsC,MFkNpC,gDACE,iBAIJ,8BACE,SACA,UAEA,aACA,iBACA,SAEA,mBAEA,gBAMF,kCACE,cAEA,qBAEA,kBAEA,cACA,qBCvPF,YCewB,IF4OtB,yCACE,WAEA,SAEA,kBACA,QACA,SACA,OFhOJ,gDEqOE,mHAGE,cAME,4GF9NF,kDEqOJ,kCACE,sCD9PF,kDCsQE,sBACE,WACA,YAGF,4BACE,sBDxOJ,wBC6OE,kBACE,iBACA,oBAIA,oCACE,gBACA,eAIJ,+BACE,cAEA,0CACE,eAIJ,wBACE,sBACA,oBAEA,mCACE,gBACA,eAGF,kDACE,aAEA,wDACE,aAKN,kCACE,iBAEA,2BFlSA,2DEuSF,iCACE,SACA,YAIA,+HFjUJ,yCEuUI,4CFvUJ,qCE4UE,8BACE,WAEA,sBACA,MAEA,sCF9TA,uGEoUF,6BACE,SAEA,cFvUA,wDE2UA,yCACE,gBAIJ,kCACE,cAEA,oBAEA,yCACE,QACA,YAEA,MACA,WAME,4GFhWJ,4DClBJ,kDC2XE,sBACE,WACA,YAGF,4BACE,oBAGF,yGAGE,mBAGF,+DAEE,kBAGF,kCACE,iCACA,iCD3YJ,wBCgZE,uEAEE,mBAGF,6BACE,kBAGF,sBACE,aACA,cAGF,4BACE,cAGF,kCACE,UAGF,kCACE,mBACA,iCFvDJ,8BE4DE,8BFjaE,4DA+VJ,+BEkEE,8BFjaE,4DAqWJ,8BEmEE,sCACE,YAEA,cC3eJ,mBAiBA,YCYsB,IFkdlB,YAGF,uBACE","file":"header.css","sourcesContent":["@use \"sass:list\";\n@use \"sass:map\";\n@use \"../variables/borders\";\n@use \"../variables/colour\";\n@use \"../tools/media\";\n\n@function brand-colour($colour, $opacity: 1) {\n @return colour.brand-colour($colour, $opacity);\n}\n\n@mixin colour-css-vars($excludes...) {\n @each $name, $value in colour.$colour-palette-default {\n @if not list.index($excludes, $name) {\n --#{$name}: #{$value};\n }\n }\n}\n\n@mixin colour-css-vars-dark($excludes...) {\n @each $name, $value in colour.$colour-palette-dark {\n @if not list.index($excludes, $name) {\n --#{$name}: #{$value};\n }\n }\n}\n\n@mixin colour-css-vars-high-contrast($excludes...) {\n @each $name, $value in colour.$colour-palette-high-contrast {\n @if not list.index($excludes, $name) {\n --#{$name}: #{$value};\n }\n }\n}\n\n@mixin colour-css-vars-high-contrast-dark($excludes...) {\n @each $name, $value in colour.$colour-palette-high-contrast-dark {\n @if not list.index($excludes, $name) {\n --#{$name}: #{$value};\n }\n }\n}\n\n@function colour-var($colour) {\n @return var(\n --#{$colour},\n #{map.get(colour.$colour-palette-default, $colour)}\n );\n}\n\n@mixin colour-font($colour, $important: false) {\n color: colour-var($colour) if($important, !important, null);\n}\n\n@mixin colour-background($colour, $important: false) {\n background-color: colour-var($colour) if($important, !important, null);\n}\n\n@mixin colour-background-brand($brandColour, $important: false) {\n background-color: #{brand-colour($brandColour)} if($important, !important, null);\n}\n\n@mixin colour-border(\n $colour,\n $width: \"\",\n $style: solid,\n $direction: \"\",\n $important: false\n) {\n @if $direction != \"\" {\n @if $width != \"\" {\n border-#{$direction}: $width\n colour-var($colour)\n $style\n if($important, !important, null);\n } @else {\n border-#{$direction}-color: colour-var($colour)\n if($important, !important, null);\n }\n } @else {\n @if $width != \"\" {\n border: $width\n colour-var($colour)\n $style\n if($important, !important, null);\n } @else {\n border-color: var(\n --#{$colour},\n #{map.get(colour.$colour-palette-default, $colour)}\n )\n if($important, !important, null);\n }\n }\n}\n\n@mixin colour-outline($colour, $width: \"\", $style: solid, $important: false) {\n @if $width != \"\" {\n outline: $width colour-var($colour) $style if($important, !important, null);\n } @else {\n outline-color: colour-var($colour) if($important, !important, null);\n }\n}\n\n@mixin colour-fill($colour, $important: false) {\n fill: colour-var($colour) if($important, !important, null);\n}\n\n@mixin thick-keyline($direction: \"\") {\n @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 .tna-template--system-theme & {\n @media (prefers-color-scheme: dark) {\n --link: #{map.get(colour.$colour-palette-default, \"link\")};\n --link-visited: #{map.get(colour.$colour-palette-default, \"link-visited\")};\n }\n }\n\n .tna-template--dark-theme & {\n --link: #{map.get(colour.$colour-palette-default, \"link\")};\n --link-visited: #{map.get(colour.$colour-palette-default, \"link-visited\")};\n }\n\n @include colour-background(\"background\");\n @include colour-font(\"font-base\");\n}\n\n@mixin accent-light {\n @extend %accent-light;\n}\n\n%yellow-accent {\n --accent-background: #{colour.brand-colour(\"yellow\")} !important;\n --accent-background-light: #{colour.brand-colour(\"cream\")} !important;\n --accent-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 \"sass:math\";\n@use \"../variables/media\";\n@use \"../variables/typography\";\n\n$smallest-large-device-em: #{math.div(\n media.$largest-medium-device-px + 1,\n typography.$relative-1rem-px\n )}em;\n$largest-medium-device-em: #{math.div(\n media.$largest-medium-device-px,\n typography.$relative-1rem-px\n )}em;\n$smallest-medium-device-em: #{math.div(\n media.$largest-small-device-px + 1,\n typography.$relative-1rem-px\n )}em;\n$largest-small-device-em: #{math.div(\n media.$largest-small-device-px,\n typography.$relative-1rem-px\n )}em;\n$smallest-small-device-em: #{math.div(\n media.$largest-tiny-device-px + 1,\n typography.$relative-1rem-px\n )}em;\n$largest-tiny-device-em: #{math.div(\n media.$largest-tiny-device-px,\n typography.$relative-1rem-px\n )}em;\n\n$media-large: \"(min-width: #{$smallest-large-device-em})\";\n$media-lt-large: \"(max-width: #{$largest-medium-device-em})\";\n$media-medium: \"(min-width: #{$smallest-medium-device-em}) and (max-width: #{$largest-medium-device-em})\";\n$media-gt-mobile: \"(min-width: #{$smallest-medium-device-em})\";\n$media-mobile: \"(max-width: #{$largest-small-device-em})\";\n$media-small: \"(min-width: #{$smallest-small-device-em}) and (max-width: #{$largest-small-device-em})\";\n$media-gt-tiny: \"(min-width: #{$smallest-small-device-em})\";\n$media-tiny: \"(max-width: #{$largest-tiny-device-em})\";\n\n// https://nationalarchives.github.io/design-system/styles/media/#media-queries\n@mixin on-large() {\n @media #{$media-large} {\n @content;\n }\n}\n\n@mixin on-medium() {\n @media #{$media-medium} {\n @content;\n }\n}\n\n@mixin on-small() {\n @media #{$media-small} {\n @content;\n }\n}\n\n@mixin on-tiny() {\n @media #{$media-tiny} {\n @content;\n }\n}\n\n@mixin on-larger-than-mobile() {\n @media #{$media-gt-mobile} {\n @content;\n }\n}\n\n@mixin on-larger-than-tiny() {\n @media #{$media-gt-tiny} {\n @content;\n }\n}\n\n@mixin on-smaller-than-large() {\n @media #{$media-lt-large} {\n @content;\n }\n}\n\n@mixin on-mobile() {\n @media #{$media-mobile} {\n @content;\n }\n}\n\n@mixin on-print() {\n @media print {\n @content;\n }\n}\n","@use \"sass:math\";\n@use \"../../tools/colour\";\n@use \"../../tools/grid\";\n@use \"../../tools/media\";\n@use \"../../tools/spacing\";\n@use \"../../tools/typography\";\n\n.tna-header {\n @include colour.contrast;\n\n position: relative;\n\n background: linear-gradient(\n 0deg,\n rgb(34 34 34 / 100%) 0%,\n rgb(0 0 0 / 100%) 100%\n );\n\n .tna-template--dark-theme & {\n background: colour.brand-colour(\"black\");\n }\n\n .tna-template--system-theme & {\n @media (prefers-color-scheme: dark) {\n background: colour.brand-colour(\"black\");\n }\n }\n\n &__exit {\n padding-top: spacing.space(0.5);\n padding-bottom: spacing.space(0.5);\n\n text-align: right;\n\n @include colour.contrast;\n }\n\n &__exit-link {\n text-decoration: none;\n @include typography.font-size(16);\n\n &,\n &:link,\n &:visited {\n @include colour.colour-font(\"font-base\");\n }\n\n &:hover {\n text-decoration: underline;\n }\n\n .fa-solid {\n margin-left: spacing.space(0.5);\n }\n }\n\n &__contents {\n &.tna-container {\n justify-content: space-between;\n }\n }\n\n &__logo {\n padding-top: spacing.space(1.5);\n padding-bottom: spacing.space(1.5);\n }\n\n &__logo-contents {\n display: flex;\n align-items: flex-end;\n\n color: inherit;\n text-decoration: none;\n\n &--link {\n &,\n &:link,\n &:visited {\n color: inherit;\n }\n\n &:hover:not(:focus) {\n text-decoration: none;\n\n @include colour.colour-outline(\"font-dark\", 0.3125rem, solid);\n outline-offset: 1px;\n }\n }\n }\n\n .tna-logo {\n width: 6rem;\n height: 6rem;\n\n display: inline-block;\n\n flex-shrink: 0;\n }\n\n &__logo-strapline {\n margin: 0 spacing.space(0.75);\n\n display: inline-block;\n\n line-height: 2rem;\n @include typography.heading-font;\n @include typography.font-size(20);\n text-transform: uppercase;\n }\n\n &__navigation-toggle {\n align-self: center;\n\n display: none;\n }\n\n &__hamburger {\n width: 2rem;\n height: 0.25rem;\n\n display: block;\n\n @include colour.colour-background(\"font-dark\");\n\n &::before,\n &::after {\n content: \"\";\n\n height: 0.25rem;\n\n display: block;\n\n position: absolute;\n right: 0;\n left: 0;\n\n background-color: inherit;\n }\n\n &::before {\n top: 0;\n }\n\n &::after {\n bottom: 0;\n }\n }\n\n &__navigation-toggle-button {\n height: 2rem;\n padding: 0;\n\n appearance: none;\n\n display: block;\n\n position: relative;\n\n font-size: 0;\n\n background: none;\n\n border: 0 transparent solid;\n border-width: 0.25rem 0;\n\n cursor: pointer;\n\n &--opened {\n .tna-header__hamburger {\n height: 0;\n\n &::before {\n top: 0.625rem;\n\n transform: rotate(-135deg);\n }\n\n &::after {\n bottom: 0.625rem;\n\n transform: rotate(135deg);\n }\n }\n }\n }\n\n &__navigation {\n display: flex;\n flex-direction: column-reverse;\n align-items: flex-end;\n justify-content: space-between;\n\n position: relative;\n z-index: 2;\n }\n\n &__top-navigation-items {\n margin: 0;\n padding: spacing.space(1.25) 0;\n\n display: flex;\n justify-content: flex-end;\n gap: spacing.space(0.5) spacing.space(1.5);\n\n line-height: 1;\n\n list-style: none;\n\n @include typography.font-size(15);\n }\n\n &__top-navigation-item {\n display: block;\n }\n\n &__top-navigation-item-link {\n display: flex;\n align-items: center;\n\n text-decoration: none;\n\n &,\n &:link,\n &:visited {\n @include colour.colour-font(\"font-light\");\n }\n\n &:hover,\n &--selected {\n &,\n &:link,\n &:visited {\n @include colour.colour-font(\"font-base\");\n @include typography.interacted-text-decoration;\n }\n }\n\n .fa-solid {\n margin-right: spacing.space(0.375);\n }\n }\n\n &__navigation-items {\n margin: 0;\n padding: 0;\n\n display: flex;\n flex-wrap: nowrap;\n gap: spacing.space(2);\n\n white-space: nowrap;\n\n list-style: none;\n }\n\n &__navigation-item {\n }\n\n &__navigation-item-link {\n padding: spacing.space(0.5) 0;\n\n display: inline-block;\n\n position: relative;\n\n line-height: 2;\n text-decoration: none;\n\n @include typography.main-font-weight-medium;\n\n &::after {\n content: \"\";\n\n height: 0;\n\n position: absolute;\n right: 0;\n bottom: 0;\n left: 0;\n\n @include colour.colour-background(\"font-dark\");\n }\n\n &,\n &:link,\n &:visited {\n color: inherit;\n }\n\n &--selected {\n &,\n &:hover {\n &::after {\n @include colour.thick-keyline-dark(top);\n }\n }\n }\n }\n\n &.tna-background-accent {\n background: colour.colour-var(\"background\");\n }\n\n &.tna-background-accent &__navigation {\n @include colour.contrast-on-mobile;\n }\n\n @include media.on-medium {\n .tna-logo {\n width: 5rem;\n height: 5rem;\n }\n\n &__logo-strapline {\n line-height: 1.625rem;\n }\n }\n\n @include media.on-mobile {\n &__logo {\n padding-top: spacing.space(1);\n padding-bottom: spacing.space(1);\n }\n\n &__contents {\n &.tna-container {\n padding-right: 0;\n padding-left: 0;\n }\n }\n\n &__navigation-toggle {\n display: block;\n\n &.tna-column {\n padding-left: 0;\n }\n }\n\n &__navigation {\n flex-direction: column;\n align-items: stretch;\n\n &.tna-column {\n padding-right: 0;\n padding-left: 0;\n }\n\n .tna-template--js-enabled & {\n display: none;\n\n &--open {\n display: flex;\n }\n }\n }\n\n &__top-navigation-items {\n padding: spacing.space(0.5) spacing.space(1);\n\n justify-content: flex-start;\n\n @include colour.colour-border(\"keyline\", 1px, solid, bottom);\n }\n\n &__top-navigation-item {\n margin: 0;\n padding: spacing.space(0.5);\n }\n\n &__top-navigation-item-link {\n &,\n &:link,\n &:visited {\n @include colour.colour-font(\"font-light\");\n }\n\n &:hover {\n @include colour.colour-font(\"font-dark\");\n }\n }\n\n &__navigation-items {\n width: 100%;\n\n flex-direction: column;\n gap: 0;\n\n background-color: rgb(255 255 255 / 10%);\n\n @include colour.colour-border(\"keyline-dark\", 2px, solid, top);\n @include colour.colour-border(\"keyline-dark\", 2px, solid, bottom);\n }\n\n &__navigation-item {\n margin: 0;\n\n display: block;\n\n @include colour.colour-border(\"keyline\", 1px, solid, top);\n\n &:first-child {\n border-top: none;\n }\n }\n\n &__navigation-item-link {\n display: block;\n\n line-height: 1.75rem;\n\n &::after {\n width: 0;\n height: auto;\n\n top: 0;\n right: auto;\n }\n\n &--selected {\n &,\n &:hover {\n &::after {\n @include colour.colour-border(\"keyline\", 0.5rem, solid, left);\n }\n }\n }\n }\n }\n\n @include media.on-small {\n .tna-logo {\n width: 4rem;\n height: 4rem;\n }\n\n &__logo-strapline {\n line-height: 1.25rem;\n }\n\n &__logo.tna-column,\n &__navigation-item-link,\n &__navigation-toggle.tna-column {\n padding-right: grid.gutter-width();\n }\n\n &__logo.tna-column,\n &__navigation-item-link {\n padding-left: grid.gutter-width();\n }\n\n &__top-navigation-items {\n padding-right: calc(#{grid.gutter-width()} - 0.5rem);\n padding-left: calc(#{grid.gutter-width()} - 0.5rem);\n }\n }\n\n @include media.on-tiny {\n &__navigation-toggle.tna-column,\n &__logo.tna-column {\n padding-right: grid.gutter-width-tiny();\n }\n\n &__logo.tna-column {\n padding-left: grid.gutter-width-tiny();\n }\n\n .tna-logo {\n width: 3.5rem;\n height: 3.5rem;\n }\n\n &__logo-strapline {\n line-height: 1;\n }\n\n &__top-navigation-items {\n gap: 0.5rem;\n }\n\n &__navigation-item-link {\n padding-right: grid.gutter-width-tiny();\n padding-left: calc(#{grid.gutter-width-tiny()} + 0.5rem);\n }\n }\n\n @include colour.on-high-contrast-and-forced-colours {\n &,\n &__exit {\n @include colour.colour-border(\"keyline\", 1px, solid, bottom);\n }\n }\n\n @include colour.on-forced-colours {\n &__navigation-toggle-button {\n height: auto;\n\n line-height: 2;\n @include typography.font-size(18);\n @include typography.main-font-weight-bold;\n\n border: none;\n }\n\n &__hamburger {\n display: none;\n }\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"]}

package/nationalarchives/components/hero/hero.css CHANGED Viewed

	@@ -1 +1 @@
1	- .tna-hero__information,.tna-hero__details[open] .tna-hero__details-summary,.tna-hero--split:not(.tna-background-accent,.tna-background-tint),.tna-hero--shift:not(.tna-background-accent,.tna-background-tint) .tna-hero__content-inner{--background: var(--contrast-background);--font-base: var(--contrast-font-base);--font-dark: var(--contrast-font-dark);--font-light: var(--contrast-font-light);--icon-light: var(--contrast-icon-light);--link: var(--contrast-link);--link-visited: var(--contrast-link-visited);--keyline: var(--contrast-keyline);--keyline-dark: var(--contrast-keyline-dark);--button-text: var(--contrast-button-text);--button-background: var(--contrast-button-background);--button-hover-text: var(--contrast-button-hover-text);--button-hover-background: var(--contrast-button-hover-background);--accent-list-marker: var(--accent-border);background-color:var(--background, #f4f4f4);color:var(--font-base, #343338)}@media(max-width: 48em){.tna-hero:not(.tna-background-accent,.tna-background-tint) .tna-hero__inner{--background: var(--contrast-background);--font-base: var(--contrast-font-base);--font-dark: var(--contrast-font-dark);--font-light: var(--contrast-font-light);--icon-light: var(--contrast-icon-light);--link: var(--contrast-link);--link-visited: var(--contrast-link-visited);--keyline: var(--contrast-keyline);--keyline-dark: var(--contrast-keyline-dark);--button-text: var(--contrast-button-text);--button-background: var(--contrast-button-background);--button-hover-text: var(--contrast-button-hover-text);--button-hover-background: var(--contrast-button-hover-background);--accent-list-marker: var(--accent-border);background-color:var(--background, #f4f4f4);color:var(--font-base, #343338)}}.tna-hero__details-summary{--background: var(--accent-background);--font-base: var(--accent-font-base);--font-dark: var(--accent-font-dark);--font-light: var(--accent-font-light);--icon-light: var(--accent-icon-light);--link: var(--accent-link);--link-visited: var(--accent-link);--keyline: var(--accent-keyline);--keyline-dark: var(--accent-keyline-dark);--accent-list-marker: var(--accent-font-base);--accent-border: var(--accent-font-dark);background-color:var(--background, #f4f4f4);color:var(--font-base, #343338)}.tna-hero--details-cutout .tna-hero__details::before{--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);--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);--button-accent-text: rgb(1, 1, 1);--button-accent-background: rgb(140, 150, 148);background-color:var(--background, #f4f4f4)}@media(prefers-contrast: more){.tna-hero--details-cutout .tna-hero__details::before{--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);--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);--button-accent-text: rgb(1, 1, 1);--button-accent-background: rgb(140, 150, 148)}}@media(prefers-color-scheme: dark){.tna-template--system-theme .tna-hero--details-cutout .tna-hero__details::before,.tna-hero--details-cutout .tna-template--system-theme .tna-hero__details::before{--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);--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);--button-accent-text: rgb(1, 1, 1);--button-accent-background: rgb(140, 150, 148)}}@media(prefers-contrast: more)and (prefers-color-scheme: dark){.tna-template--system-theme .tna-hero--details-cutout .tna-hero__details::before,.tna-hero--details-cutout .tna-template--system-theme .tna-hero__details::before{--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);--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);--button-accent-text: rgb(1, 1, 1);--button-accent-background: rgb(140, 150, 148)}}.tna-template--dark-theme .tna-hero--details-cutout .tna-hero__details::before,.tna-hero--details-cutout .tna-template--dark-theme .tna-hero__details::before{--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);--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);--button-accent-text: rgb(1, 1, 1);--button-accent-background: rgb(140, 150, 148)}@media(prefers-contrast: more){.tna-template--dark-theme .tna-hero--details-cutout .tna-hero__details::before,.tna-hero--details-cutout .tna-template--dark-theme .tna-hero__details::before{--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);--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);--button-accent-text: rgb(1, 1, 1);--button-accent-background: rgb(140, 150, 148)}}.tna-hero__figure{min-height:clamp(192px,40vw - 192px,50rem);margin:0;padding-top:160px;padding-bottom:32px;display:flex;align-items:flex-end;position:relative}.tna-hero__caption{width:100%;overflow:visible;position:absolute;top:0;right:0;z-index:5}.tna-hero__details{width:100%;overflow:visible}.tna-hero__details-summary{width:1.5rem;height:1.5rem;position:absolute;top:8px;right:8px;z-index:2;font-size:0;line-height:1.5rem;text-align:center;list-style:none;border-radius:100%;cursor:pointer;border:4px var(--background, #f4f4f4) solid}.tna-hero__details-summary:hover{color:var(--background, #f4f4f4);background-color:var(--font-base, #343338)}.tna-hero__details-summary-icon{font-size:1.25rem;font-weight:700;font-style:normal;text-transform:lowercase}.tna-hero__information{width:45rem;max-width:75vw;padding:10px 52px 10px 16px;position:absolute;top:0;right:0;z-index:1;font-size:1rem}.tna-hero__image{position:absolute;inset:0;z-index:1}.tna-hero__image img{width:100%;height:100%;object-fit:cover}.tna-hero__details[open] .tna-hero__details-summary::before,.tna-hero__details[open] .tna-hero__details-summary::after{content:"";width:1.5rem;height:.125rem;display:block;position:absolute;top:50%;left:50%;background-color:var(--font-dark, rgb(1, 1, 1))}.tna-hero__details[open] .tna-hero__details-summary::before{transform:translate(-50%, -50%) rotate(45deg)}.tna-hero__details[open] .tna-hero__details-summary::after{transform:translate(-50%, -50%) rotate(-45deg)}.tna-hero__details[open] .tna-hero__details-summary:hover::before,.tna-hero__details[open] .tna-hero__details-summary:hover::after{height:.25rem}.tna-hero__details[open] .tna-hero__details-summary-icon{font-size:0}.tna-hero__inner{position:relative;z-index:4}.tna-hero__content-inner{padding:32px;background-color:var(--background, #f4f4f4)}.tna-hero--split .tna-hero__figure{min-height:clamp(15rem,33.3333333333vw,50rem);padding-top:32px;padding-bottom:32px;align-items:center;box-sizing:border-box}.tna-hero--split .tna-hero__information{max-width:50%;box-sizing:border-box}.tna-hero--split .tna-hero__image{left:50%}.tna-hero--split .tna-hero__content{width:50%;padding-right:32px}.tna-hero--split .tna-hero__content-inner{padding:0}.tna-hero--shift{margin-bottom:48px}.tna-hero--shift .tna-hero__content-inner{position:relative;top:80px}.tna-hero--narrow .tna-hero__figure{min-height:max(96px,20rem);padding-top:48px;padding-bottom:48px}.tna-hero--details-cutout .tna-hero__details::before{content:"";width:3rem;height:3rem;position:absolute;top:0;right:0;z-index:1;border-radius:0% 0 0% 50%;background-color:var(--background, #f4f4f4)}.tna-hero--details-cutout .tna-hero__details[open]::before{display:none}@media(max-width: 48em){.tna-hero .tna-hero__figure{min-height:auto;padding:0;flex-direction:column}.tna-hero__caption{order:2}.tna-hero__information,.tna-hero--split .tna-hero__information{width:auto;max-width:none;left:0}.tna-hero__image{width:100%;position:static;order:1}.tna-hero__image img{height:auto}.tna-hero__inner{order:3}.tna-hero__content-inner{padding-right:0;padding-left:0}.tna-hero__body{margin-top:16px}.tna-hero--shift{margin-bottom:0}.tna-hero--shift .tna-hero__content-inner{position:static}.tna-hero--split .tna-hero__figure{min-height:auto;padding-top:0;padding-bottom:0}.tna-hero--split .tna-hero__content{width:100%;padding-right:16px}.tna-hero--split .tna-hero__content-inner{padding-top:32px;padding-bottom:32px}}@media(forced-colors: active){.tna-hero__information,.tna-hero__content-inner{border:1px var(--keyline-dark, #26262a) solid}}@media(forced-colors: active)and (max-width: 48em){.tna-hero__inner{border:1px var(--keyline-dark, #26262a) solid;border-top:0}.tna-hero__content-inner{border:none}}@media(prefers-contrast: more){.tna-hero__information,.tna-hero__content-inner{border:1px var(--keyline-dark, #26262a) solid}}@media(prefers-contrast: more)and (max-width: 48em){.tna-hero__inner{border:1px var(--keyline-dark, #26262a) solid;border-top:0}.tna-hero__content-inner{border:none}}/# sourceMappingURL=hero.css.map /
1	+ .tna-hero__information,.tna-hero__details[open] .tna-hero__details-summary,.tna-hero--split:not(.tna-background-accent,.tna-background-tint),.tna-hero--shift:not(.tna-background-accent,.tna-background-tint) .tna-hero__content-inner{--background: var(--contrast-background);--font-base: var(--contrast-font-base);--font-dark: var(--contrast-font-dark);--font-light: var(--contrast-font-light);--icon-light: var(--contrast-icon-light);--link: var(--contrast-link);--link-visited: var(--contrast-link-visited);--keyline: var(--contrast-keyline);--keyline-dark: var(--contrast-keyline-dark);--button-text: var(--contrast-button-text);--button-background: var(--contrast-button-background);--button-hover-text: var(--contrast-button-hover-text);--button-hover-background: var(--contrast-button-hover-background);--accent-list-marker: var(--accent-border);background-color:var(--background, #f4f4f4);color:var(--font-base, #343338)}@media(max-width: 48em){.tna-hero:not(.tna-background-accent,.tna-background-tint) .tna-hero__inner{--background: var(--contrast-background);--font-base: var(--contrast-font-base);--font-dark: var(--contrast-font-dark);--font-light: var(--contrast-font-light);--icon-light: var(--contrast-icon-light);--link: var(--contrast-link);--link-visited: var(--contrast-link-visited);--keyline: var(--contrast-keyline);--keyline-dark: var(--contrast-keyline-dark);--button-text: var(--contrast-button-text);--button-background: var(--contrast-button-background);--button-hover-text: var(--contrast-button-hover-text);--button-hover-background: var(--contrast-button-hover-background);--accent-list-marker: var(--accent-border);background-color:var(--background, #f4f4f4);color:var(--font-base, #343338)}}.tna-hero__details-summary{--background: var(--accent-background);--font-base: var(--accent-font-base);--font-dark: var(--accent-font-dark);--font-light: var(--accent-font-light);--icon-light: var(--accent-icon-light);--link: var(--accent-link);--link-visited: var(--accent-link);--keyline: var(--accent-keyline);--keyline-dark: var(--accent-keyline-dark);--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-hero__figure{min-height:clamp(192px,40vw - 192px,50rem);margin:0;padding-top:160px;padding-bottom:32px;display:flex;align-items:flex-end;position:relative}.tna-hero__caption{width:100%;overflow:visible;position:absolute;top:0;right:0;z-index:5}.tna-hero__details{width:100%;overflow:visible}.tna-hero__details-summary{width:1.5rem;height:1.5rem;position:absolute;top:8px;right:8px;z-index:2;font-size:0;line-height:1.5rem;text-align:center;list-style:none;border-radius:100%;cursor:pointer;border:4px var(--background, #f4f4f4) solid}.tna-hero__details-summary:hover{color:var(--background, #f4f4f4);background-color:var(--font-base, #343338)}.tna-hero__details-summary-icon{font-size:1.25rem;font-weight:700;font-style:normal;text-transform:lowercase}.tna-hero__information{width:45rem;max-width:75vw;padding:10px 52px 10px 16px;position:absolute;top:0;right:0;z-index:1;font-size:1rem}.tna-hero__image{position:absolute;inset:0;z-index:1}.tna-hero__image img{width:100%;height:100%;object-fit:cover}.tna-hero__details[open] .tna-hero__details-summary::before,.tna-hero__details[open] .tna-hero__details-summary::after{content:"";width:1.5rem;height:.125rem;display:block;position:absolute;top:50%;left:50%;background-color:var(--font-dark, rgb(1, 1, 1))}.tna-hero__details[open] .tna-hero__details-summary::before{transform:translate(-50%, -50%) rotate(45deg)}.tna-hero__details[open] .tna-hero__details-summary::after{transform:translate(-50%, -50%) rotate(-45deg)}.tna-hero__details[open] .tna-hero__details-summary:hover::before,.tna-hero__details[open] .tna-hero__details-summary:hover::after{height:.25rem}.tna-hero__details[open] .tna-hero__details-summary-icon{font-size:0}.tna-hero__inner{position:relative;z-index:4}.tna-hero__content-inner{padding:32px;background-color:var(--background, #f4f4f4)}.tna-hero--split .tna-hero__figure{min-height:clamp(15rem,33.3333333333vw,50rem);padding-top:32px;padding-bottom:32px;align-items:center;box-sizing:border-box}.tna-hero--split .tna-hero__information{max-width:50%;box-sizing:border-box}.tna-hero--split .tna-hero__image{left:50%}.tna-hero--split .tna-hero__content{width:50%;padding-right:32px}.tna-hero--split .tna-hero__content-inner{padding:0}.tna-hero--shift{margin-bottom:48px}.tna-hero--shift .tna-hero__content-inner{position:relative;top:80px}.tna-hero--narrow .tna-hero__figure{min-height:max(96px,20rem);padding-top:48px;padding-bottom:48px}@media(max-width: 48em){.tna-hero .tna-hero__figure{min-height:auto;padding:0;flex-direction:column}.tna-hero__caption{order:2}.tna-hero__information,.tna-hero--split .tna-hero__information{width:auto;max-width:none;left:0}.tna-hero__image{width:100%;position:static;order:1}.tna-hero__image img{height:auto}.tna-hero__inner{order:3}.tna-hero__content-inner{padding-right:0;padding-left:0}.tna-hero__body{margin-top:16px}.tna-hero--shift{margin-bottom:0}.tna-hero--shift .tna-hero__content-inner{position:static}.tna-hero--split .tna-hero__figure{min-height:auto;padding-top:0;padding-bottom:0}.tna-hero--split .tna-hero__content{width:100%;padding-right:16px}.tna-hero--split .tna-hero__content-inner{padding-top:32px;padding-bottom:32px}}@media(forced-colors: active){.tna-hero__information,.tna-hero__content-inner{border:1px var(--keyline-dark, #26262a) solid}}@media(forced-colors: active)and (max-width: 48em){.tna-hero__inner{border:1px var(--keyline-dark, #26262a) solid;border-top:0}.tna-hero__content-inner{border:none}}@media(prefers-contrast: more){.tna-hero__information,.tna-hero__content-inner{border:1px var(--keyline-dark, #26262a) solid}}@media(prefers-contrast: more)and (max-width: 48em){.tna-hero__inner{border:1px var(--keyline-dark, #26262a) solid;border-top:0}.tna-hero__content-inner{border:none}}/# sourceMappingURL=hero.css.map /

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

	@@ -1 +1 @@
1	- {"version":3,"sourceRoot":"","sources":["../../../../src/nationalarchives/tools/_colour.scss","../../../../src/nationalarchives/tools/_media.scss","../../../../src/nationalarchives/components/hero/hero.scss","../../../../src/nationalarchives/tools/_typography.scss"],"names":[],"mappings":"AAqLA,wOACE,yCACA,uCACA,uCACA,yCACA,yCACA,6BACA,6CACA,mCACA,6CACA,2CACA,uDACA,uDACA,mEACA,2CA7IA,4CAJA,gCCgCA,wBD6HF,4EAEI,yCACA,uCACA,uCACA,yCACA,yCACA,6BACA,6CACA,mCACA,6CACA,2CACA,uDACA,uDACA,mEACA,2CAxKF,4CAJA,iCAqMF,2BACE,uCACA,qCACA,qCACA,uCACA,uCACA,2BACA,mCACA,iCACA,2CACA,8CACA,yCA5MA,4CAJA,gCAwQF,qDA7SM,qkDAyCJ,4CAuQA,+BAHF,qDA7RM,+iDAqSF,mCADF,kKA5SI,unDAiTF,+DALF,kKA5RI,gmDAsSJ,8JAtTI,snDAyTF,+BAHF,8JAtSI,gmDEvBJ,kBACE,2CAKA,SACA,kBACA,oBAEA,aACA,qBAEA,kBAGF,mBACE,WAEA,iBAEA,kBACA,MACA,QACA,UAGF,mBACE,WAEA,iBAGF,2BACE,aACA,cAEA,kBACA,QACA,UACA,UAEA,YACA,mBACA,kBAEA,gBAEA,mBAEA,eFgBE,4CEVF,iCFpBF,iCAIA,2CEuBA,gCACE,kBACA,gBACA,kBACA,yBAGF,uBACE,YACA,eACA,4BAGA,kBACA,MACA,QACA,UCvFF,eD8FA,iBACE,kBACA,QACA,UAEA,qBACE,WACA,YAEA,iBAOF,uHAEE,WAEA,aACA,eAEA,cAEA,kBACA,QACA,SFzEJ,gDE8EE,4DACE,8CAGF,2DACE,+CAIA,mIAEE,cAIJ,yDACE,YAIJ,iBACE,kBACA,UAUF,yBACE,aF/GF,4CEiIA,mCACE,8CACA,iBACA,oBAEA,mBAEA,sBAGF,wCACE,cAEA,sBAGF,kCACE,SAGF,oCACE,UACA,mBAGF,0CACE,UAGF,iBACE,mBAGF,0CACE,kBACA,SAUF,oCACE,2BACA,iBACA,oBAIA,qDACE,WAGA,WACA,YAEA,kBACA,MACA,QACA,UAEA,0BFjMJ,4CEsMI,2DACE,aD3KN,wBCiLE,4BACE,gBACA,UAEA,sBAGF,mBACE,QAYF,+DAEE,WACA,eAEA,OAGF,iBACE,WAEA,gBAEA,QAEA,qBACE,YAIJ,iBACE,QAMF,yBACE,gBACA,eAMF,gBACE,gBAGF,iBACE,gBAGF,0CACE,gBAGF,mCACE,gBACA,cACA,iBAGF,oCACE,WACA,mBAGF,0CACE,iBACA,qBFiHJ,8BE5GE,gDFxQE,+CCEJ,mDC4QI,iBF9QA,8CEgRE,aAGF,yBACE,aF0FN,+BEtGE,gDFxQE,+CCEJ,oDC4QI,iBF9QA,8CEgRE,aAGF,yBACE","file":"hero.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\",\n borders.$thick-border-width,\n solid,\n $direction\n );\n } @else {\n @include colour-border(\"form-error\", borders.$thick-border-width, solid);\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\")\n%light {\n @include colour-css-vars(\"form-error\");\n\n @media (prefers-contrast: more) {\n @include colour-css-vars-high-contrast(\"form-error\");\n }\n}\n\n@mixin light {\n @extend %light;\n}\n\n%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\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 .tna-template--system-theme & {\n @media (prefers-color-scheme: dark) {\n --link: #{map.get(colour.$colour-palette-default, \"link\")};\n --link-visited: #{map.get(colour.$colour-palette-default, \"link-visited\")};\n }\n }\n\n .tna-template--dark-theme & {\n --link: #{map.get(colour.$colour-palette-default, \"link\")};\n --link-visited: #{map.get(colour.$colour-palette-default, \"link-visited\")};\n }\n\n @include colour-background(\"background\");\n @include colour-font(\"font-base\");\n}\n\n@mixin accent-light {\n @extend %accent-light;\n}\n\n// Remove accent and contrast values (except for \"form-error\")\n%plain {\n @include colour-css-vars(\"form-error\");\n\n @media (prefers-contrast: more) {\n @include colour-css-vars-high-contrast(\"form-error\");\n }\n\n .tna-template--system-theme & {\n @media (prefers-color-scheme: dark) {\n @include colour-css-vars-dark(\"form-error\");\n }\n\n @media (prefers-contrast: more) and (prefers-color-scheme: dark) {\n @include colour-css-vars-high-contrast-dark(\"form-error\");\n }\n }\n\n .tna-template--dark-theme & {\n @include colour-css-vars-dark(\"form-error\");\n\n @media (prefers-contrast: more) {\n @include colour-css-vars-high-contrast-dark(\"form-error\");\n }\n }\n\n @include colour-background(\"background\");\n}\n\n@mixin plain {\n @extend %plain;\n}\n\n%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-accent-text: #{colour.brand-colour(\"white\")} !important;\n --button-accent-background: #{colour.brand-colour(\"brown\")} !important;\n}\n\n@mixin yellow-accent {\n @extend %yellow-accent;\n}\n\n%accent-lighter-text {\n --accent-font-base: #{colour.brand-colour(\"white\")} !important;\n --accent-font-dark: #{colour.brand-colour(\"white\")} !important;\n --accent-font-light: #{colour.brand-colour(\"white\", 0.7)} !important;\n --accent-icon-light: #{colour.brand-colour(\"white\", 0.45)} !important;\n --accent-link: #{colour.brand-colour(\"white\")} !important;\n --accent-link-visited: #{colour.brand-colour(\"white\")} !important;\n --accent-keyline: #{colour.brand-colour(\"white\", 0.5)} !important;\n --accent-keyline-dark: #{colour.brand-colour(\"white\", 0.8)} !important;\n --button-accent-text: #{colour.brand-colour(\"white\")} !important;\n}\n\n%black-accent {\n --accent-background: #{colour.brand-colour(\"black\")} !important;\n --accent-background-light: #{colour.brand-colour(\"light-grey\")} !important;\n --accent-border: #{colour.brand-colour(\"black\")} !important;\n --accent-list-marker: #{colour.brand-colour(\"grey\")} !important;\n --button-accent-text: #{colour.brand-colour(\"black\")} !important;\n --button-accent-background: #{colour.brand-colour(\"grey\")} !important;\n}\n\n@mixin black-accent {\n @extend %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-accent-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-accent-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-accent-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-accent-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 \"sass:math\";\n@use \"../variables/media\";\n@use \"../variables/typography\";\n\n$smallest-large-device-em: #{math.div(\n media.$largest-medium-device-px + 1,\n typography.$relative-1rem-px\n )}em;\n$largest-medium-device-em: #{math.div(\n media.$largest-medium-device-px,\n typography.$relative-1rem-px\n )}em;\n$smallest-medium-device-em: #{math.div(\n media.$largest-small-device-px + 1,\n typography.$relative-1rem-px\n )}em;\n$largest-small-device-em: #{math.div(\n media.$largest-small-device-px,\n typography.$relative-1rem-px\n )}em;\n$smallest-small-device-em: #{math.div(\n media.$largest-tiny-device-px + 1,\n typography.$relative-1rem-px\n )}em;\n$largest-tiny-device-em: #{math.div(\n media.$largest-tiny-device-px,\n typography.$relative-1rem-px\n )}em;\n\n$media-large: \"(min-width: #{$smallest-large-device-em})\";\n$media-lt-large: \"(max-width: #{$largest-medium-device-em})\";\n$media-medium: \"(min-width: #{$smallest-medium-device-em}) and (max-width: #{$largest-medium-device-em})\";\n$media-gt-mobile: \"(min-width: #{$smallest-medium-device-em})\";\n$media-mobile: \"(max-width: #{$largest-small-device-em})\";\n$media-small: \"(min-width: #{$smallest-small-device-em}) and (max-width: #{$largest-small-device-em})\";\n$media-gt-tiny: \"(min-width: #{$smallest-small-device-em})\";\n$media-tiny: \"(max-width: #{$largest-tiny-device-em})\";\n\n// https://nationalarchives.github.io/design-system/styles/media/#media-queries\n@mixin on-large() {\n @media #{$media-large} {\n @content;\n }\n}\n\n@mixin on-medium() {\n @media #{$media-medium} {\n @content;\n }\n}\n\n@mixin on-small() {\n @media #{$media-small} {\n @content;\n }\n}\n\n@mixin on-tiny() {\n @media #{$media-tiny} {\n @content;\n }\n}\n\n@mixin on-larger-than-mobile() {\n @media #{$media-gt-mobile} {\n @content;\n }\n}\n\n@mixin on-larger-than-tiny() {\n @media #{$media-gt-tiny} {\n @content;\n }\n}\n\n@mixin on-smaller-than-large() {\n @media #{$media-lt-large} {\n @content;\n }\n}\n\n@mixin on-mobile() {\n @media #{$media-mobile} {\n @content;\n }\n}\n\n@mixin on-print() {\n @media print {\n @content;\n }\n}\n","@use \"sass:math\";\n\n@use \"../../tools/colour\";\n@use \"../../tools/grid\";\n@use \"../../tools/media\";\n@use \"../../tools/spacing\";\n@use \"../../tools/typography\";\n\n$padding-units-top: 10 !default;\n$padding-units-bottom: 2 !default;\n$padding-units-narrow: 3 !default;\n$shift-units: 5 !default;\n\n.tna-hero {\n &__figure {\n min-height: clamp(\n #{spacing.space($padding-units-top + $padding-units-bottom)},\n calc(40vw - #{spacing.space($padding-units-top + $padding-units-bottom)}),\n 50rem\n );\n margin: 0;\n padding-top: spacing.space($padding-units-top);\n padding-bottom: spacing.space($padding-units-bottom);\n\n display: flex;\n align-items: flex-end;\n\n position: relative;\n }\n\n &__caption {\n width: 100%;\n\n overflow: visible;\n\n position: absolute;\n top: 0;\n right: 0;\n z-index: 5;\n }\n\n &__details {\n width: 100%;\n\n overflow: visible;\n }\n\n &__details-summary {\n width: 1.5rem;\n height: 1.5rem;\n\n position: absolute;\n top: spacing.space(0.5);\n right: spacing.space(0.5);\n z-index: 2;\n\n font-size: 0;\n line-height: 1.5rem;\n text-align: center;\n\n list-style: none;\n\n border-radius: 100%;\n\n cursor: pointer;\n\n @include colour.accent;\n\n @include colour.colour-border(\"background\", 4px);\n\n &:hover {\n @include colour.colour-font(\"background\");\n\n @include colour.colour-background(\"font-base\");\n }\n }\n\n &__details-summary-icon {\n font-size: 1.25rem;\n font-weight: 700;\n font-style: normal;\n text-transform: lowercase;\n }\n\n &__information {\n width: 45rem;\n max-width: 75vw;\n padding: spacing.space(0.625) spacing.space(3.25) spacing.space(0.625)\n spacing.space(1);\n\n position: absolute;\n top: 0;\n right: 0;\n z-index: 1;\n\n @include colour.contrast;\n\n @include typography.font-size(16);\n }\n\n &__image {\n position: absolute;\n inset: 0;\n z-index: 1;\n\n img {\n width: 100%;\n height: 100%;\n\n object-fit: cover;\n }\n }\n\n &__details[open] &__details-summary {\n @include colour.contrast;\n\n &::before,\n &::after {\n content: \"\";\n\n width: 1.5rem;\n height: 0.125rem;\n\n display: block;\n\n position: absolute;\n top: 50%;\n left: 50%;\n\n @include colour.colour-background(\"font-dark\");\n }\n\n &::before {\n transform: translate(-50%, -50%) rotate(45deg);\n }\n\n &::after {\n transform: translate(-50%, -50%) rotate(-45deg);\n }\n\n &:hover {\n &::before,\n &::after {\n height: 0.25rem;\n }\n }\n\n &-icon {\n font-size: 0;\n }\n }\n\n &__inner {\n position: relative;\n z-index: 4;\n }\n\n &:not(.tna-background-accent, .tna-background-tint) &__inner {\n @include colour.contrast-on-mobile;\n }\n\n &__content {\n }\n\n &__content-inner {\n padding: spacing.space(2);\n\n @include colour.colour-background(\"background\");\n }\n\n &__heading {\n }\n\n &__body {\n }\n\n &--split {\n }\n\n &--split:not(.tna-background-accent, .tna-background-tint) {\n @include colour.contrast;\n }\n\n &--split &__figure {\n min-height: clamp(15rem, #{math.div(100vw, 3)}, 50rem);\n padding-top: spacing.space(2);\n padding-bottom: spacing.space(2);\n\n align-items: center;\n\n box-sizing: border-box;\n }\n\n &--split &__information {\n max-width: 50%;\n\n box-sizing: border-box;\n }\n\n &--split &__image {\n left: 50%;\n }\n\n &--split &__content {\n width: 50%;\n padding-right: grid.gutter-width();\n }\n\n &--split &__content-inner {\n padding: 0;\n }\n\n &--shift {\n margin-bottom: spacing.space($shift-units - $padding-units-bottom);\n }\n\n &--shift &__content-inner {\n position: relative;\n top: spacing.space($shift-units);\n }\n\n &--shift:not(.tna-background-accent, .tna-background-tint) &__content-inner {\n @include colour.contrast;\n }\n\n &--narrow {\n }\n\n &--narrow &__figure {\n min-height: max(#{spacing.space($padding-units-narrow * 2)}, 20rem);\n padding-top: spacing.space($padding-units-narrow);\n padding-bottom: spacing.space($padding-units-narrow);\n }\n\n &--details-cutout &__details {\n &::before {\n content: \"\";\n @include colour.plain;\n\n width: 3rem;\n height: 3rem;\n\n position: absolute;\n top: 0;\n right: 0;\n z-index: 1;\n\n border-radius: 0% 0 0% 50%;\n @include colour.colour-background(\"background\");\n }\n\n &[open] {\n &::before {\n display: none;\n }\n }\n }\n\n @include media.on-mobile {\n & &__figure {\n min-height: auto;\n padding: 0;\n\n flex-direction: column;\n }\n\n &__caption {\n order: 2;\n }\n\n &__details {\n }\n\n &__details-summary {\n }\n\n &__details-summary-icon {\n }\n\n &__information,\n &--split &__information {\n width: auto;\n max-width: none;\n\n left: 0;\n }\n\n &__image {\n width: 100%;\n\n position: static;\n\n order: 1;\n\n img {\n height: auto;\n }\n }\n\n &__inner {\n order: 3;\n }\n\n &__content {\n }\n\n &__content-inner {\n padding-right: 0;\n padding-left: 0;\n }\n\n &__heading {\n }\n\n &__body {\n margin-top: spacing.space(1);\n }\n\n &--shift {\n margin-bottom: 0;\n }\n\n &--shift &__content-inner {\n position: static;\n }\n\n &--split &__figure {\n min-height: auto;\n padding-top: 0;\n padding-bottom: 0;\n }\n\n &--split &__content {\n width: 100%;\n padding-right: grid.gutter-width-half();\n }\n\n &--split &__content-inner {\n padding-top: spacing.space(2);\n padding-bottom: spacing.space(2);\n }\n }\n\n @include colour.on-high-contrast-and-forced-colours {\n &__information,\n &__content-inner {\n @include colour.colour-border(\"keyline-dark\", 1px);\n }\n\n @include media.on-mobile {\n &__inner {\n @include colour.colour-border(\"keyline-dark\", 1px);\n border-top: 0;\n }\n\n &__content-inner {\n border: none;\n }\n }\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"]}
1	+ {"version":3,"sourceRoot":"","sources":["../../../../src/nationalarchives/tools/_colour.scss","../../../../src/nationalarchives/tools/_media.scss","../../../../src/nationalarchives/components/hero/hero.scss","../../../../src/nationalarchives/tools/_typography.scss"],"names":[],"mappings":"AAyLA,wOACE,yCACA,uCACA,uCACA,yCACA,yCACA,6BACA,6CACA,mCACA,6CACA,2CACA,uDACA,uDACA,mEACA,2CAjJA,4CAJA,gCCgCA,wBDiIF,4EAEI,yCACA,uCACA,uCACA,yCACA,yCACA,6BACA,6CACA,mCACA,6CACA,2CACA,uDACA,uDACA,mEACA,2CA5KF,4CAJA,iCAyMF,2BACE,uCACA,qCACA,qCACA,uCACA,uCACA,2BACA,mCACA,iCACA,2CACA,8CACA,yCACA,yCACA,qDACA,qDACA,iEApNA,4CAJA,gCEpCA,kBACE,2CAKA,SACA,kBACA,oBAEA,aACA,qBAEA,kBAGF,mBACE,WAEA,iBAEA,kBACA,MACA,QACA,UAGF,mBACE,WAEA,iBAGF,2BACE,aACA,cAEA,kBACA,QACA,UACA,UAEA,YACA,mBACA,kBAEA,gBAEA,mBAEA,eFgBE,4CEVF,iCFpBF,iCAIA,2CEuBA,gCACE,kBACA,gBACA,kBACA,yBAGF,uBACE,YACA,eACA,4BAGA,kBACA,MACA,QACA,UCvFF,eD8FA,iBACE,kBACA,QACA,UAEA,qBACE,WACA,YAEA,iBAOF,uHAEE,WAEA,aACA,eAEA,cAEA,kBACA,QACA,SFzEJ,gDE8EE,4DACE,8CAGF,2DACE,+CAIA,mIAEE,cAIJ,yDACE,YAIJ,iBACE,kBACA,UAUF,yBACE,aF/GF,4CEiIA,mCACE,8CACA,iBACA,oBAEA,mBAEA,sBAGF,wCACE,cAEA,sBAGF,kCACE,SAGF,oCACE,UACA,mBAGF,0CACE,UAGF,iBACE,mBAGF,0CACE,kBACA,SAUF,oCACE,2BACA,iBACA,oBDrJF,wBCyJE,4BACE,gBACA,UAEA,sBAGF,mBACE,QAYF,+DAEE,WACA,eAEA,OAGF,iBACE,WAEA,gBAEA,QAEA,qBACE,YAIJ,iBACE,QAMF,yBACE,gBACA,eAMF,gBACE,gBAGF,iBACE,gBAGF,0CACE,gBAGF,mCACE,gBACA,cACA,iBAGF,oCACE,WACA,mBAGF,0CACE,iBACA,qBFgHJ,8BE3GE,gDFhPE,+CCEJ,mDCoPI,iBFtPA,8CEwPE,aAGF,yBACE,aFyFN,+BErGE,gDFhPE,+CCEJ,oDCoPI,iBFtPA,8CEwPE,aAGF,yBACE","file":"hero.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 .tna-template--system-theme & {\n @media (prefers-color-scheme: dark) {\n --link: #{map.get(colour.$colour-palette-default, \"link\")};\n --link-visited: #{map.get(colour.$colour-palette-default, \"link-visited\")};\n }\n }\n\n .tna-template--dark-theme & {\n --link: #{map.get(colour.$colour-palette-default, \"link\")};\n --link-visited: #{map.get(colour.$colour-palette-default, \"link-visited\")};\n }\n\n @include colour-background(\"background\");\n @include colour-font(\"font-base\");\n}\n\n@mixin accent-light {\n @extend %accent-light;\n}\n\n%yellow-accent {\n --accent-background: #{colour.brand-colour(\"yellow\")} !important;\n --accent-background-light: #{colour.brand-colour(\"cream\")} !important;\n --accent-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 \"sass:math\";\n@use \"../variables/media\";\n@use \"../variables/typography\";\n\n$smallest-large-device-em: #{math.div(\n media.$largest-medium-device-px + 1,\n typography.$relative-1rem-px\n )}em;\n$largest-medium-device-em: #{math.div(\n media.$largest-medium-device-px,\n typography.$relative-1rem-px\n )}em;\n$smallest-medium-device-em: #{math.div(\n media.$largest-small-device-px + 1,\n typography.$relative-1rem-px\n )}em;\n$largest-small-device-em: #{math.div(\n media.$largest-small-device-px,\n typography.$relative-1rem-px\n )}em;\n$smallest-small-device-em: #{math.div(\n media.$largest-tiny-device-px + 1,\n typography.$relative-1rem-px\n )}em;\n$largest-tiny-device-em: #{math.div(\n media.$largest-tiny-device-px,\n typography.$relative-1rem-px\n )}em;\n\n$media-large: \"(min-width: #{$smallest-large-device-em})\";\n$media-lt-large: \"(max-width: #{$largest-medium-device-em})\";\n$media-medium: \"(min-width: #{$smallest-medium-device-em}) and (max-width: #{$largest-medium-device-em})\";\n$media-gt-mobile: \"(min-width: #{$smallest-medium-device-em})\";\n$media-mobile: \"(max-width: #{$largest-small-device-em})\";\n$media-small: \"(min-width: #{$smallest-small-device-em}) and (max-width: #{$largest-small-device-em})\";\n$media-gt-tiny: \"(min-width: #{$smallest-small-device-em})\";\n$media-tiny: \"(max-width: #{$largest-tiny-device-em})\";\n\n// https://nationalarchives.github.io/design-system/styles/media/#media-queries\n@mixin on-large() {\n @media #{$media-large} {\n @content;\n }\n}\n\n@mixin on-medium() {\n @media #{$media-medium} {\n @content;\n }\n}\n\n@mixin on-small() {\n @media #{$media-small} {\n @content;\n }\n}\n\n@mixin on-tiny() {\n @media #{$media-tiny} {\n @content;\n }\n}\n\n@mixin on-larger-than-mobile() {\n @media #{$media-gt-mobile} {\n @content;\n }\n}\n\n@mixin on-larger-than-tiny() {\n @media #{$media-gt-tiny} {\n @content;\n }\n}\n\n@mixin on-smaller-than-large() {\n @media #{$media-lt-large} {\n @content;\n }\n}\n\n@mixin on-mobile() {\n @media #{$media-mobile} {\n @content;\n }\n}\n\n@mixin on-print() {\n @media print {\n @content;\n }\n}\n","@use \"sass:math\";\n\n@use \"../../tools/colour\";\n@use \"../../tools/grid\";\n@use \"../../tools/media\";\n@use \"../../tools/spacing\";\n@use \"../../tools/typography\";\n\n$padding-units-top: 10 !default;\n$padding-units-bottom: 2 !default;\n$padding-units-narrow: 3 !default;\n$shift-units: 5 !default;\n\n.tna-hero {\n &__figure {\n min-height: clamp(\n #{spacing.space($padding-units-top + $padding-units-bottom)},\n calc(40vw - #{spacing.space($padding-units-top + $padding-units-bottom)}),\n 50rem\n );\n margin: 0;\n padding-top: spacing.space($padding-units-top);\n padding-bottom: spacing.space($padding-units-bottom);\n\n display: flex;\n align-items: flex-end;\n\n position: relative;\n }\n\n &__caption {\n width: 100%;\n\n overflow: visible;\n\n position: absolute;\n top: 0;\n right: 0;\n z-index: 5;\n }\n\n &__details {\n width: 100%;\n\n overflow: visible;\n }\n\n &__details-summary {\n width: 1.5rem;\n height: 1.5rem;\n\n position: absolute;\n top: spacing.space(0.5);\n right: spacing.space(0.5);\n z-index: 2;\n\n font-size: 0;\n line-height: 1.5rem;\n text-align: center;\n\n list-style: none;\n\n border-radius: 100%;\n\n cursor: pointer;\n\n @include colour.accent;\n\n @include colour.colour-border(\"background\", 4px);\n\n &:hover {\n @include colour.colour-font(\"background\");\n\n @include colour.colour-background(\"font-base\");\n }\n }\n\n &__details-summary-icon {\n font-size: 1.25rem;\n font-weight: 700;\n font-style: normal;\n text-transform: lowercase;\n }\n\n &__information {\n width: 45rem;\n max-width: 75vw;\n padding: spacing.space(0.625) spacing.space(3.25) spacing.space(0.625)\n spacing.space(1);\n\n position: absolute;\n top: 0;\n right: 0;\n z-index: 1;\n\n @include colour.contrast;\n\n @include typography.font-size(16);\n }\n\n &__image {\n position: absolute;\n inset: 0;\n z-index: 1;\n\n img {\n width: 100%;\n height: 100%;\n\n object-fit: cover;\n }\n }\n\n &__details[open] &__details-summary {\n @include colour.contrast;\n\n &::before,\n &::after {\n content: \"\";\n\n width: 1.5rem;\n height: 0.125rem;\n\n display: block;\n\n position: absolute;\n top: 50%;\n left: 50%;\n\n @include colour.colour-background(\"font-dark\");\n }\n\n &::before {\n transform: translate(-50%, -50%) rotate(45deg);\n }\n\n &::after {\n transform: translate(-50%, -50%) rotate(-45deg);\n }\n\n &:hover {\n &::before,\n &::after {\n height: 0.25rem;\n }\n }\n\n &-icon {\n font-size: 0;\n }\n }\n\n &__inner {\n position: relative;\n z-index: 4;\n }\n\n &:not(.tna-background-accent, .tna-background-tint) &__inner {\n @include colour.contrast-on-mobile;\n }\n\n &__content {\n }\n\n &__content-inner {\n padding: spacing.space(2);\n\n @include colour.colour-background(\"background\");\n }\n\n &__heading {\n }\n\n &__body {\n }\n\n &--split {\n }\n\n &--split:not(.tna-background-accent, .tna-background-tint) {\n @include colour.contrast;\n }\n\n &--split &__figure {\n min-height: clamp(15rem, #{math.div(100vw, 3)}, 50rem);\n padding-top: spacing.space(2);\n padding-bottom: spacing.space(2);\n\n align-items: center;\n\n box-sizing: border-box;\n }\n\n &--split &__information {\n max-width: 50%;\n\n box-sizing: border-box;\n }\n\n &--split &__image {\n left: 50%;\n }\n\n &--split &__content {\n width: 50%;\n padding-right: grid.gutter-width();\n }\n\n &--split &__content-inner {\n padding: 0;\n }\n\n &--shift {\n margin-bottom: spacing.space($shift-units - $padding-units-bottom);\n }\n\n &--shift &__content-inner {\n position: relative;\n top: spacing.space($shift-units);\n }\n\n &--shift:not(.tna-background-accent, .tna-background-tint) &__content-inner {\n @include colour.contrast;\n }\n\n &--narrow {\n }\n\n &--narrow &__figure {\n min-height: max(#{spacing.space($padding-units-narrow * 2)}, 20rem);\n padding-top: spacing.space($padding-units-narrow);\n padding-bottom: spacing.space($padding-units-narrow);\n }\n\n @include media.on-mobile {\n & &__figure {\n min-height: auto;\n padding: 0;\n\n flex-direction: column;\n }\n\n &__caption {\n order: 2;\n }\n\n &__details {\n }\n\n &__details-summary {\n }\n\n &__details-summary-icon {\n }\n\n &__information,\n &--split &__information {\n width: auto;\n max-width: none;\n\n left: 0;\n }\n\n &__image {\n width: 100%;\n\n position: static;\n\n order: 1;\n\n img {\n height: auto;\n }\n }\n\n &__inner {\n order: 3;\n }\n\n &__content {\n }\n\n &__content-inner {\n padding-right: 0;\n padding-left: 0;\n }\n\n &__heading {\n }\n\n &__body {\n margin-top: spacing.space(1);\n }\n\n &--shift {\n margin-bottom: 0;\n }\n\n &--shift &__content-inner {\n position: static;\n }\n\n &--split &__figure {\n min-height: auto;\n padding-top: 0;\n padding-bottom: 0;\n }\n\n &--split &__content {\n width: 100%;\n padding-right: grid.gutter-width-half();\n }\n\n &--split &__content-inner {\n padding-top: spacing.space(2);\n padding-bottom: spacing.space(2);\n }\n }\n\n @include colour.on-high-contrast-and-forced-colours {\n &__information,\n &__content-inner {\n @include colour.colour-border(\"keyline-dark\", 1px);\n }\n\n @include media.on-mobile {\n &__inner {\n @include colour.colour-border(\"keyline-dark\", 1px);\n border-top: 0;\n }\n\n &__content-inner {\n border: none;\n }\n }\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"]}

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

@@ -232,30 +232,6 @@ $shift-units: 5 !default;
     padding-bottom: spacing.space($padding-units-narrow);
   }
-  &--details-cutout &__details {
-    &::before {
-      content: "";
-      @include colour.plain;
-      width: 3rem;
-      height: 3rem;
-      position: absolute;
-      top: 0;
-      right: 0;
-      z-index: 1;
-      border-radius: 0% 0 0% 50%;
-      @include colour.colour-background("background");
-    }
-    &[open] {
-      &::before {
-        display: none;
-      }
-    }
-  }
   @include media.on-mobile {
     & &__figure {
       min-height: auto;

package/nationalarchives/components/index-grid/index-grid.css CHANGED Viewed

	@@ -1 +1 @@
1	- .tna-index-grid__item{--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-background-contrast .tna-index-grid__item{--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);--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);--button-accent-text: rgb(1, 1, 1);--button-accent-background: rgb(140, 150, 148);background-color:var(--background, #f4f4f4)}@media(prefers-contrast: more){.tna-background-contrast .tna-index-grid__item{--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);--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);--button-accent-text: rgb(1, 1, 1);--button-accent-background: rgb(140, 150, 148)}}@media(prefers-color-scheme: dark){.tna-template--system-theme .tna-background-contrast .tna-index-grid__item,.tna-background-contrast .tna-template--system-theme .tna-index-grid__item{--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);--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);--button-accent-text: rgb(1, 1, 1);--button-accent-background: rgb(140, 150, 148)}}@media(prefers-contrast: more)and (prefers-color-scheme: dark){.tna-template--system-theme .tna-background-contrast .tna-index-grid__item,.tna-background-contrast .tna-template--system-theme .tna-index-grid__item{--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);--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);--button-accent-text: rgb(1, 1, 1);--button-accent-background: rgb(140, 150, 148)}}.tna-template--dark-theme .tna-background-contrast .tna-index-grid__item,.tna-background-contrast .tna-template--dark-theme .tna-index-grid__item{--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);--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);--button-accent-text: rgb(1, 1, 1);--button-accent-background: rgb(140, 150, 148)}@media(prefers-contrast: more){.tna-template--dark-theme .tna-background-contrast .tna-index-grid__item,.tna-background-contrast .tna-template--dark-theme .tna-index-grid__item{--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);--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);--button-accent-text: rgb(1, 1, 1);--button-accent-background: rgb(140, 150, 148)}}.tna-index-grid,.tna-index-grid__items{margin-top:32px}.tna-index-grid:first-child,.tna-index-grid__items:first-child{margin-top:0}.tna-index-grid__items{margin-bottom:0;display:flex;gap:32px 0;list-style:none}.tna-index-grid__item{height:100%;display:flex;flex-direction:column;position:relative;text-decoration:none}@media(forced-colors: active){.tna-index-grid__item{border:1px var(--keyline-dark, #26262a) solid}}@media(prefers-contrast: more){.tna-index-grid__item{border:1px var(--keyline-dark, #26262a) solid}}.tna-index-grid__item-image{width:100%;height:auto}.tna-index-grid__item-content{padding:16px;flex:1}.tna-index-grid__item-label{position:absolute;top:8px;left:8px}.tna-index-grid__item-title{text-decoration:underline}.tna-index-grid__item:hover .tna-index-grid__item-title,.tna-index-grid__item:hover .tna-index-grid__item-title:link,.tna-index-grid__item:hover .tna-index-grid__item-title:visited{text-decoration:underline;text-decoration-thickness:3.5px}.tna-index-grid__item-subtitle{color:var(--font-light, rgb(1 1 1/0.58));font-size:1rem}/# sourceMappingURL=index-grid.css.map /
1	+ .tna-index-grid__item{--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-background-contrast .tna-index-grid__item{--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-index-grid,.tna-index-grid__items{margin-top:32px}.tna-index-grid:first-child,.tna-index-grid__items:first-child{margin-top:0}.tna-index-grid__items{margin-bottom:0;display:flex;gap:32px 0;list-style:none}.tna-index-grid__item{height:100%;display:flex;flex-direction:column;position:relative;text-decoration:none}@media(forced-colors: active){.tna-index-grid__item{border:1px var(--keyline-dark, #26262a) solid}}@media(prefers-contrast: more){.tna-index-grid__item{border:1px var(--keyline-dark, #26262a) solid}}.tna-index-grid__item-image{width:100%;height:auto}.tna-index-grid__item-content{padding:16px;flex:1}.tna-index-grid__item-label{position:absolute;top:8px;left:8px}.tna-index-grid__item-title{text-decoration:underline}.tna-index-grid__item:hover .tna-index-grid__item-title,.tna-index-grid__item:hover .tna-index-grid__item-title:link,.tna-index-grid__item:hover .tna-index-grid__item-title:visited{text-decoration:underline;text-decoration-thickness:3.5px}.tna-index-grid__item-subtitle{color:var(--font-light, rgb(1 1 1/0.58));font-size:1rem}/# sourceMappingURL=index-grid.css.map /