npm - @nationalarchives/frontend - Versions diffs - 0.1.20-prerelease → 0.1.22-prerelease - Mend

@nationalarchives/frontend 0.1.20-prerelease → 0.1.22-prerelease

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

Files changed (162) hide show

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

	@@ -1 +1 @@
1	- {"version":3,"sourceRoot":"","sources":["../../../../src/nationalarchives/utilities/_typography.scss","../../../../src/nationalarchives/tools/_colour.scss","../../../../src/nationalarchives/tools/_media.scss","../../../../src/nationalarchives/utilities/_a11y.scss","../../../../src/nationalarchives/tools/_spacing.scss","../../../../src/nationalarchives/utilities/_global.scss","../../../../src/nationalarchives/utilities/_overrides.scss","../../../../src/nationalarchives/tools/_typography.scss","../../../../src/nationalarchives/variables/_typography.scss","../../../../src/nationalarchives/variables/_grid.scss","../../../../src/nationalarchives/components/grid/grid.scss","../../../../src/nationalarchives/tools/_grid.scss","../../../../src/nationalarchives/components/hero/hero.scss"],"names":[],"mappings":"CAQQ,6CC+JR,0BACE,uCACA,uCACA,yCACA,6BACA,6CACA,mCACA,6CACA,2CACA,uDACA,uDACA,mEAhFA,yBAEA,4CAPA,4BACA,uBCnCA,wBDkIF,UAEI,uCACA,uCACA,yCACA,6BACA,6CACA,mCACA,6CACA,2CACA,uDACA,uDACA,mEAvGF,yBAEA,4CAPA,4BACA,wBAuHF,0DACE,qCACA,qCACA,uCACA,2BACA,2CACA,iCACA,2CA1HA,sBAEA,0CAPA,4BACA,uBAiJF,8BA7IE,yBAEA,gDA8IA,qBACA,kBACA,oCACA,aACA,wBACA,gBACA,wBACA,oBACA,0BAIA,0BAIA,gCElQF,qBACE,qBACA,sBACA,oBACA,qBAEA,6BACA,uBACA,wBACA,sBAEA,2BAEA,iCAEA,oBAEA,0CAEA,yDAEE,YClBJ,4EACE,mBAEA,8IACE,gBCDJ,MJKI,olCIDJ,cACE,gBACA,WACA,YAEA,kBACA,gBACA,iCAEA,eJ+EA,yBAEA,wCI7EA,2BJwBE,oCACA,oCACA,yDACA,+BACA,uCACA,sDACA,2DI5BF,4BJdE,olCIiBA,mCAHF,4BJRE,snCIeA,+BAPF,4BJFE,8/BIYE,8BACE,kCAIJ,+DAfF,4BJIE,kjCIgBF,2BJlCE,olCIsCF,0BJhCE,qnCIoCF,mCJ9BE,8/BIiCA,qCACE,iCAGF,4DJ/BA,ijCI0CF,6BJpCE,0BACA,qCACA,8CACA,oCACA,oCACA,mDACA,+BACA,uCACA,gDACA,qDACA,4CI8BF,2BJ5BE,oCACA,oCACA,yDACA,+BACA,uCACA,sDACA,2DASE,sCAEE,6BACA,wCACA,8CACA,+CIYN,6BJhCE,oCACA,oCACA,yDACA,+BACA,uCACA,sDACA,2DASE,sCAOE,6BACA,wCACA,8CACA,+CIWN,4BJpCE,oCACA,oCACA,yDACA,+BACA,uCACA,sDACA,2DASE,sCAYE,6BACA,wCACA,8CACA,+CIUN,2BJxCE,oCACA,oCACA,yDACA,+BACA,uCACA,sDACA,2DASE,sCAiBE,6BACA,wCACA,8CACA,+CISN,+BACE,gBACE,0BACA,4BAKN,oBACE,gBACA,SACA,UAEA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","file":"hero.css","sourcesContent":["@use \"sass:math\";\n@use \"../tools/colour\";\n@use \"../tools/media\";\n@use \"../tools/spacing\";\n@use \"../tools/typography\";\n@use \"../variables/assets\";\n@use \"../variables/grid\";\n\n@import \"https://use.typekit.net/hkj3kuz.css\";\n\n@font-face {\n font-family: \"Open Sans\";\n src: url(\"#{assets.$tna-font-path}/OpenSans-Medium.ttf\");\n font-weight: normal;\n font-style: normal;\n}\n\n@font-face {\n font-family: \"Open Sans\";\n src: url(\"#{assets.$tna-font-path}/OpenSans-Bold.ttf\");\n font-weight: bold;\n font-style: normal;\n}\n\n@font-face {\n font-family: \"Roboto Mono\";\n src: url(\"#{assets.$tna-font-path}/RobotoMono-Regular.ttf\");\n font-weight: normal;\n font-style: normal;\n}\n\n.tna-template {\n @include colour.colour-font(\"font-base\");\n @include typography.main-font;\n -moz-osx-font-smoothing: grayscale;\n -webkit-font-smoothing: antialiased;\n text-rendering: optimizeLegibility;\n -webkit-text-size-adjust: none;\n direction: ltr;\n}\n\n.tna-template__body {\n color: inherit;\n @include typography.relative-font-size(18);\n // line-height: 1.6;\n line-height: #{math.div(16, 18) * 2};\n}\n\nh1,\nh2,\nh3,\nh4,\nh5,\nh6,\nul,\nol {\n margin-top: 0;\n}\n\nh1,\nh2,\nh3,\nh4,\nh5,\nh6,\nstrong {\n @include typography.main-font-weight-bold;\n}\n\np {\n margin: 0 0 1.5rem;\n\n @include media.on-tiny {\n margin-bottom: 1rem;\n }\n\n &:last-child {\n margin-bottom: 0;\n }\n}\n\na {\n @include colour.colour-font(\"link\");\n text-decoration-thickness: 1.5px;\n\n &:visited {\n @include colour.colour-font(\"link-visited\");\n }\n\n &:hover,\n &:active {\n @include typography.interacted-text-decoration;\n }\n\n &.tna-chip {\n text-decoration: none;\n\n &,\n &:link,\n &:visited {\n @include colour.colour-font(\"font-dark\");\n }\n\n &:hover {\n @include typography.interacted-text-decoration;\n }\n }\n}\n\n.tna-ul,\n.tna-ol {\n margin-top: 0;\n margin-right: 0;\n margin-left: 0;\n padding: 0 0 0 2rem;\n\n @include spacing.space-below;\n\n li::marker {\n @include colour.colour-font(\"accent-background\");\n font-weight: 700;\n }\n\n &--plain {\n padding-left: 0;\n\n list-style: none;\n }\n}\n\n%chip {\n max-width: max-content;\n padding: 0.375em 0.5rem;\n\n display: block;\n\n @include colour.colour-font(\"font-dark\");\n @include typography.detail-font-small;\n line-height: 1;\n\n @include colour.accent;\n}\n\n.tna-chip {\n @extend %chip;\n}\n\n.tna-chip-list {\n padding-left: 0;\n\n display: flex;\n flex-wrap: wrap;\n gap: 1rem;\n\n list-style: none;\n\n @include spacing.space-below;\n\n &__item {\n }\n}\n\n%heading {\n @include colour.colour-font(\"font-dark\");\n @include typography.heading-font;\n\n a {\n display: inline-block;\n\n &::after {\n padding-left: 0.25rem;\n\n display: inline-block;\n\n font-weight: 700;\n\n content: \"\\203A\";\n }\n\n &:hover {\n &::after {\n padding-left: 0.5rem;\n }\n }\n }\n}\n\n%heading-xl {\n @include typography.relative-font-size(64);\n line-height: 1.2;\n\n @include media.on-medium {\n // @include typography.relative-font-size(42);\n @include typography.relative-font-size(50);\n }\n\n @include media.on-mobile {\n @include typography.relative-font-size(36);\n }\n}\n\n%heading-l {\n @include typography.relative-font-size(32);\n line-height: 1.4;\n\n @include media.on-medium {\n // @include typography.relative-font-size(26);\n @include typography.relative-font-size(28);\n }\n\n @include media.on-mobile {\n @include typography.relative-font-size(24);\n }\n}\n\n%heading-m {\n @include typography.relative-font-size(20);\n line-height: 1.6;\n}\n\n%heading-s {\n @include typography.relative-font-size(18);\n line-height: 1.6;\n}\n\n.tna-heading {\n @extend %heading;\n\n &--xl {\n @extend %heading-xl;\n }\n\n &--l {\n @extend %heading-l;\n }\n\n &--m {\n @extend %heading-m;\n }\n\n &--s {\n @extend %heading-s;\n }\n}\n\n.tna-hgroup {\n &__supertitle {\n margin: 0 0 0.5rem;\n\n @extend %chip;\n }\n\n &__title {\n margin: 0;\n\n display: block;\n\n @extend %heading;\n }\n\n &--xl &__title {\n @extend %heading-xl;\n }\n\n &--l &__title {\n @extend %heading-l;\n }\n\n &--m &__title {\n @extend %heading-m;\n }\n\n &--s &__title {\n @extend %heading-s;\n }\n}\n\n.tna-heading,\n.tna-hgroup {\n margin-top: 3rem;\n margin-bottom: 1rem;\n\n &:first-child {\n margin-top: 0;\n }\n\n &:last-child {\n margin-bottom: 0;\n }\n}\n\n.tna-blockquote {\n margin-top: 0;\n margin-right: 0;\n margin-left: 0;\n padding: 1rem 1rem 1rem 2rem;\n\n @include colour.colour-border(\"accent-background\", 0.35rem, solid, left);\n\n @include spacing.space-below;\n\n &__quote {\n font-weight: 700;\n }\n\n &__author {\n font-style: italic;\n\n .tna-blockquote & {\n margin: 1rem 0 0;\n }\n\n &::before {\n content: \"\\2014\" \" \";\n }\n }\n}\n\n.tna-scene-setter {\n @include typography.detail-font;\n @include colour.colour-font(\"font-dark\");\n @include typography.relative-font-size(30);\n line-height: math.div(50, 30);\n\n @include spacing.space-below;\n\n @include media.on-mobile {\n @include typography.relative-font-size(24);\n line-height: 2;\n }\n\n a {\n color: inherit;\n text-decoration-thickness: 2px;\n\n &:hover {\n text-decoration-thickness: 4.5px;\n }\n }\n}\n\n.tna-columns {\n column-gap: grid.$gutter-width;\n\n &--2 {\n column-count: 2;\n }\n\n &--3 {\n column-count: 3;\n }\n\n @include media.on-mobile {\n column-gap: grid.$gutter-width-mobile;\n }\n\n @include media.on-small {\n @for $i from 1 through 4 {\n &--#{$i}-small {\n column-count: $i;\n }\n }\n }\n\n @include media.on-tiny {\n @for $i from 1 through 4 {\n &--#{$i}-tiny {\n column-count: $i;\n }\n }\n }\n\n &__block {\n break-inside: avoid;\n }\n\n &:has(&__block:only-of-type) {\n column-count: 1;\n }\n}\n","@use \"sass:map\";\n@use \"../features\";\n@use \"../variables/colour\";\n@use \"../tools/media\";\n\n@function brand-colour($colour) {\n @return map.get(colour.$colour-palette-brand, $colour);\n}\n\n@mixin colour-css-vars() {\n @each $name, $value in colour.$colour-palette-default {\n --#{$name}: #{$value};\n }\n}\n\n@mixin colour-css-vars-dark() {\n @each $name, $value in colour.$colour-palette-dark {\n --#{$name}: #{$value};\n }\n}\n\n@mixin colour-css-vars-high-contrast() {\n @each $name, $value in colour.$colour-palette-high-contrast {\n --#{$name}: #{$value};\n }\n}\n\n@mixin colour-css-vars-high-contrast-dark() {\n @each $name, $value in colour.$colour-palette-high-contrast-dark {\n --#{$name}: #{$value};\n }\n}\n\n@mixin accent-css-vars($colour) {\n @if $colour == \"yellow\" {\n --accent: #{brand-colour(\"yellow\")} !important;\n --accent-background: #{brand-colour(\"yellow\")} !important;\n --accent-background-light: #{brand-colour(\"cream\")} !important;\n --accent-font-base: #{brand-colour(\"black\")} !important;\n --accent-font-dark: #{brand-colour(\"black\")} !important;\n --accent-font-light: #{rgba(brand-colour(\"black\"), 0.7)} !important;\n --accent-link: #{brand-colour(\"black\")} !important;\n --accent-link-visited: #{brand-colour(\"black\")} !important;\n --accent-keyline: #{rgba(brand-colour(\"black\"), 0.5)} !important;\n --accent-keyline-dark: #{rgba(brand-colour(\"black\"), 0.8)} !important;\n --button-accent-background: #{brand-colour(\"yellow\")} !important;\n } @else {\n --accent-font-base: #{brand-colour(\"white\")} !important;\n --accent-font-dark: #{brand-colour(\"white\")} !important;\n --accent-font-light: #{rgba(brand-colour(\"white\"), 0.7)} !important;\n --accent-link: #{brand-colour(\"white\")} !important;\n --accent-link-visited: #{brand-colour(\"white\")} !important;\n --accent-keyline: #{rgba(brand-colour(\"white\"), 0.5)} !important;\n --accent-keyline-dark: #{rgba(brand-colour(\"white\"), 0.8)} !important;\n\n @if $colour == \"black\" {\n // --accent: #{brand-colour(\"light-grey\")} !important;\n // --accent-background: #{brand-colour(\"black\")} !important;\n // --accent-background-light: #{brand-colour(\"light-grey\")} !important;\n // --button-accent-text: #{brand-colour(\"black\")} !important;\n // --button-accent-background: #{brand-colour(\"grey\")} !important;\n } @else {\n --button-accent-text: #{brand-colour(\"white\")} !important;\n @if $colour == \"pink\" {\n --accent: #{brand-colour(\"pink\")} !important;\n --accent-background: #{brand-colour(\"maroon\")} !important;\n --accent-background-light: #{brand-colour(\"pastel-pink\")} !important;\n --button-accent-background: #{brand-colour(\"maroon\")} !important;\n } @else if $colour == \"orange\" {\n --accent: #{brand-colour(\"orange\")} !important;\n --accent-background: #{brand-colour(\"chestnut\")} !important;\n --accent-background-light: #{brand-colour(\"pastel-orange\")} !important;\n --button-accent-background: #{brand-colour(\"chestnut\")} !important;\n } @else if $colour == \"green\" {\n --accent: #{brand-colour(\"green\")} !important;\n --accent-background: #{brand-colour(\"forest\")} !important;\n --accent-background-light: #{brand-colour(\"pastel-green\")} !important;\n --button-accent-background: #{brand-colour(\"forest\")} !important;\n } @else if $colour == \"blue\" {\n --accent: #{brand-colour(\"blue\")} !important;\n --accent-background: #{brand-colour(\"navy\")} !important;\n --accent-background-light: #{brand-colour(\"pastel-blue\")} !important;\n --button-accent-background: #{brand-colour(\"navy\")} !important;\n }\n }\n }\n}\n\n@mixin colour-font(\n $colour,\n $important: false,\n $default-palette: colour.$colour-palette-default\n) {\n color: map.get($default-palette, $colour) if($important, !important, null);\n color: var(--#{$colour}) if($important, !important, null);\n}\n\n@mixin colour-background($colour, $important: false) {\n background-color: map.get(colour.$colour-palette-default, $colour)\n if($important, !important, null);\n background-color: var(--#{$colour}) if($important, !important, null);\n}\n\n@mixin colour-border(\n $colour,\n $width: \"\",\n $style: solid,\n $direction: \"\",\n $important: false\n) {\n @if $direction != \"\" {\n @if $width != \"\" {\n $property: border-#{$direction};\n border-#{$direction}: $width\n map.get(colour.$colour-palette-default, $colour)\n $style\n if($important, !important, null);\n border-#{$direction}: $width\n var(--#{$colour})\n $style\n if($important, !important, null);\n } @else {\n border-#{$direction}-color: map.get(\n colour.$colour-palette-default,\n $colour\n )\n if($important, !important, null);\n border-#{$direction}-color: var(--#{$colour})\n if($important, !important, null);\n }\n } @else {\n @if $width != \"\" {\n border: $width\n map.get(colour.$colour-palette-default, $colour)\n $style\n if($important, !important, null);\n border: $width var(--#{$colour}) $style if($important, !important, null);\n } @else {\n border-color: map.get(colour.$colour-palette-default, $colour)\n if($important, !important, null);\n border-color: var(--#{$colour}) if($important, !important, null);\n }\n }\n}\n\n@mixin colour-outline($colour, $important: false) {\n outline-color: map.get(colour.$colour-palette-default, $colour)\n if($important, !important, null);\n outline-color: var(--#{$colour}) if($important, !important, null);\n}\n\n@mixin colour-fill($colour, $important: false) {\n fill: map.get(colour.$colour-palette-default, $colour)\n if($important, !important, null);\n fill: var(--#{$colour}) if($important, !important, null);\n}\n\n%fixed {\n @include colour-css-vars;\n\n @include colour-font(\"font-base\");\n}\n\n@mixin fixed {\n @extend %fixed;\n}\n\n%invert {\n --font-base: var(--contrast-font-base);\n --font-dark: var(--contrast-font-dark);\n --font-light: var(--contrast-font-light);\n --link: var(--contrast-link);\n --link-visited: var(--contrast-link-visited);\n --keyline: var(--contrast-keyline);\n --keyline-dark: var(--contrast-keyline-dark);\n --button-text: var(--contrast-button-text);\n --button-background: var(--contrast-button-background);\n --button-hover-text: var(--contrast-button-hover-text);\n --button-hover-background: var(--contrast-button-hover-background);\n\n @include colour-background(\"contrast-background\");\n\n @include colour-font(\"font-base\", false, colour.$colour-palette-dark);\n}\n\n@mixin invert {\n @extend %invert;\n}\n\n%invert-on-mobile {\n @include media.on-mobile {\n --font-base: var(--contrast-font-base);\n --font-dark: var(--contrast-font-dark);\n --font-light: var(--contrast-font-light);\n --link: var(--contrast-link);\n --link-visited: var(--contrast-link-visited);\n --keyline: var(--contrast-keyline);\n --keyline-dark: var(--contrast-keyline-dark);\n --button-text: var(--contrast-button-text);\n --button-background: var(--contrast-button-background);\n --button-hover-text: var(--contrast-button-hover-text);\n --button-hover-background: var(--contrast-button-hover-background);\n\n @include colour-background(\"contrast-background\");\n\n @include colour-font(\"font-base\", false, colour.$colour-palette-dark);\n }\n}\n\n@mixin invert-on-mobile {\n @extend %invert-on-mobile;\n}\n\n%accent {\n --font-base: var(--accent-font-base);\n --font-dark: var(--accent-font-dark);\n --font-light: var(--accent-font-light);\n --link: var(--accent-link);\n --link-visited: var(--accent-link-visited);\n --keyline: var(--accent-keyline);\n --keyline-dark: var(--accent-keyline-dark);\n\n @include colour-background(\"accent-background\");\n\n @include colour-font(\"font-base\", false, colour.$colour-palette-dark);\n}\n\n@mixin accent {\n @extend %accent;\n}\n\n%accent-background {\n @include colour-background(\"accent-background\");\n}\n\n@mixin accent-background {\n @extend %accent-background;\n}\n\n%light-accent-background {\n @include colour-background(\"accent-background-light\");\n\n --font-base: #{map.get(colour.$colour-palette-default, \"font-base\")};\n --font-dark: #{map.get(colour.$colour-palette-default, \"font-dark\")};\n --font-light: #{map.get(colour.$colour-palette-default, \"font-light\")};\n --link: #{map.get(colour.$colour-palette-default, \"font-dark\")};\n --link-visited: #{map.get(colour.$colour-palette-default, \"link-visited\")};\n --keyline: #{map.get(colour.$colour-palette-default, \"keyline\")};\n --keyline-dark: #{map.get(colour.$colour-palette-default, \"keyline-dark\")};\n --button-text: #{map.get(colour.$colour-palette-default, \"button-text\")};\n --button-background: #{map.get(\n colour.$colour-palette-default,\n \"button-background\"\n )};\n --button-hover-text: #{map.get(\n colour.$colour-palette-default,\n \"button-hover-text\"\n )};\n --button-hover-background: #{map.get(\n colour.$colour-palette-default,\n \"button-hover-background\"\n )};\n}\n\n@mixin light-accent-background {\n @extend %light-accent-background;\n}\n\n@mixin on-high-contrast {\n .tna-template--high-contrast-theme & {\n @content;\n }\n\n .tna-template--system-theme & {\n @media (prefers-contrast: more) {\n @content;\n }\n }\n}\n","@use \"../variables/media\";\n\n// 0 ======= 320 = 480 ===== 768 == 1024 ========================== min-width/max-width (px)\n// \| . \| \| \|\n// \|-TINY----------\|-SMALL---\|-MED--\|-LARGE------------------------\n// \| . \| \| \|\n// \|<------------->\| \| \| on-tiny\n// \|<----------------------->\| \| on-mobile\n// \|<------------------------------>\| on-smaller-than-large\n// \| . \|<------->\| \| on-small\n// \| . \|<------------------------- on-larger-than-tiny\n// \| . \| \|<---->\| on-medium\n// \| . \| \|<--------------- on-larger-than-mobile\n// \| . \| \| \|<-------- on-large\n// \|<------->. \| \| \| Smallest device\n\n@mixin on-large() {\n @media #{media.$media-large} {\n @content;\n }\n}\n\n@mixin on-medium() {\n @media #{media.$media-medium} {\n @content;\n }\n}\n\n@mixin on-small() {\n @media #{media.$media-small} {\n @content;\n }\n}\n\n@mixin on-tiny() {\n @media #{media.$media-tiny} {\n @content;\n }\n}\n\n@mixin on-larger-than-mobile() {\n @media #{media.$media-gt-mobile} {\n @content;\n }\n}\n\n@mixin on-larger-than-tiny() {\n @media #{media.$media-gt-tiny} {\n @content;\n }\n}\n\n@mixin on-smaller-than-large() {\n @media #{media.$media-lt-large} {\n @content;\n }\n}\n\n@mixin on-mobile() {\n @media #{media.$media-mobile} {\n @content;\n }\n}\n",".tna-visually-hidden {\n width: 1px !important;\n height: 1px !important;\n margin: 0 !important;\n padding: 0 !important;\n\n position: absolute !important;\n top: -9999px !important;\n left: -9999px !important;\n z-index: -1 !important;\n\n overflow: hidden !important;\n\n clip: rect(0, 0, 0, 0) !important;\n\n border: 0 !important;\n\n background-color: transparent !important;\n\n &::before,\n &::after {\n content: \"\\00a0\";\n }\n}\n","@use \"sass:map\";\n@use \"../variables/spacing\";\n\n%space-below {\n margin-bottom: 2rem;\n\n &:last-child {\n margin-bottom: 0;\n }\n}\n\n@mixin space-below {\n @extend %space-below;\n}\n\n@function spacing($size) {\n @return map.get(spacing.$spacing, $size);\n}\n\n@function spacing-mobile($size) {\n @return map.get(spacing.$spacing-mobile, $size);\n}\n","@use \"../features\";\n@use \"../tools/colour\";\n@use \"../tools/media\";\n@use \"../tools/spacing\";\n@use \"../variables/typography\";\n\n:root {\n @include colour.colour-css-vars;\n}\n\n.tna-template {\n min-width: 320px;\n width: 100%;\n height: 100%;\n\n overflow-x: hidden;\n overflow-y: auto;\n -webkit-overflow-scrolling: touch;\n\n font-size: #{typography.$base-font-size-px}px;\n\n @include colour.colour-background(\"page-background\");\n\n accent-color: var(--accent);\n\n &--system-theme {\n @include colour.colour-css-vars;\n\n @media (prefers-color-scheme: dark) {\n @include colour.colour-css-vars-dark;\n }\n\n @media (prefers-contrast: more) {\n @include colour.colour-css-vars-high-contrast;\n\n * {\n background-image: none !important;\n }\n }\n\n @media (prefers-contrast: more) and (prefers-color-scheme: dark) {\n @include colour.colour-css-vars-high-contrast-dark;\n }\n }\n\n &--light-theme {\n @include colour.colour-css-vars;\n }\n\n &--dark-theme {\n @include colour.colour-css-vars-dark;\n }\n\n &--high-contrast-theme {\n @include colour.colour-css-vars-high-contrast;\n\n * {\n background-image: none !important;\n }\n\n &.tna-template--dark-theme {\n @include colour.colour-css-vars-high-contrast-dark;\n }\n }\n\n @include colour.accent-css-vars(\"black\"); // TODO: Temp\n\n // &--black-accent {\n // @include colour.accent-css-vars(\"black\");\n // }\n\n &--yellow-accent {\n @include colour.accent-css-vars(\"yellow\");\n }\n\n &--pink-accent {\n @include colour.accent-css-vars(\"pink\");\n }\n\n &--orange-accent {\n @include colour.accent-css-vars(\"orange\");\n }\n\n &--green-accent {\n @include colour.accent-css-vars(\"green\");\n }\n\n &--blue-accent {\n @include colour.accent-css-vars(\"blue\");\n }\n\n @media (prefers-reduced-motion) {\n * {\n animation: none !important;\n transition: none !important;\n }\n }\n}\n\n.tna-template__body {\n min-height: 100%;\n margin: 0;\n padding: 0;\n\n overflow: auto;\n\n &:has(.tna-header):has(#main-content[role=\"main\"]):has(.tna-footer) {\n display: flex;\n flex-direction: column;\n\n #main-content[role=\"main\"] {\n flex: 1;\n }\n }\n}\n\nimg,\nsvg,\npicture,\nvideo,\ncanvas {\n max-width: 100%;\n\n display: block;\n}\n\nvideo,\ncanvas {\n width: 100%;\n}\n\n[hidden] {\n display: none;\n}\n\n:focus {\n // outline: 0.3125rem colour.$focus-colour solid;\n outline: 0.3125rem solid;\n @include colour.colour-outline(\"focus-outline\");\n outline-offset: 0.125rem;\n}\n\nhr {\n margin: 2rem 0;\n\n border-width: 1px 0 0;\n @include colour.colour-border(\"keyline\");\n border-style: solid;\n\n // @include colour.on-high-contrast {\n // border-style: solid;\n // }\n}\n\n.tna-section {\n padding-top: 3rem;\n padding-bottom: 3rem;\n\n @include media.on-mobile {\n padding-top: 2rem;\n padding-bottom: 2rem;\n }\n}\n\n.tna-aside {\n padding: 2rem;\n\n @include spacing.space-below;\n\n @include media.on-mobile {\n padding: 1rem;\n }\n\n @include colour.on-high-contrast {\n @include colour.colour-border(\"keyline-dark\", 1px);\n }\n}\n\n.tna-background--contrast {\n @include colour.invert;\n}\n\n.tna-background--accent {\n @include colour.accent;\n}\n\n.tna-background--accent-light {\n @include colour.light-accent-background;\n}\n","@use \"../variables/spacing\";\n@use \"../tools/media\";\n\n@mixin no-spacing-generator($suffix: \"\") {\n @if $suffix != \"\" {\n $suffix: \"-\" + $suffix;\n }\n\n @each $property in margin, padding {\n @each $direction in top, bottom {\n .tna-\\!--no-#{$property}-#{$direction}#{$suffix},\n .tna-\\!--no-#{$property}-vertical#{$suffix} {\n #{$property}-#{$direction}: 0 !important;\n }\n }\n }\n}\n\n@mixin overrides($spacing, $suffix: \"\") {\n @if $suffix != \"\" {\n $suffix: \"-\" + $suffix;\n }\n\n @each $property in margin, padding {\n @each $direction in top, bottom {\n @each $size, $amount in $spacing {\n .tna-\\!--#{$property}-#{$direction}-#{$size}#{$suffix},\n .tna-\\!--#{$property}-vertical-#{$size}#{$suffix} {\n #{$property}-#{$direction}: #{$amount} !important;\n }\n }\n }\n }\n}\n\n@include no-spacing-generator;\n@include overrides(spacing.$spacing);\n\n@include media.on-medium {\n @include no-spacing-generator(\"medium\");\n @include overrides(spacing.$spacing, \"medium\");\n}\n\n@include media.on-small {\n @include no-spacing-generator(\"small\");\n @include overrides(spacing.$spacing-mobile, \"small\");\n}\n\n@include media.on-tiny {\n @include no-spacing-generator(\"tiny\");\n @include overrides(spacing.$spacing-mobile, \"tiny\");\n}\n","@use \"sass:math\";\n@use \"../variables/typography\";\n\n@mixin relative-font-size($fontSizePx) {\n font-size: #{math.div($fontSizePx, typography.$base-font-size-px)}rem;\n}\n\n@mixin interacted-text-decoration {\n text-decoration: underline;\n text-decoration-thickness: typography.$interactive-text-decoration-thickness;\n}\n\n@mixin main-font-weight {\n font-weight: typography.$font-weight-main;\n}\n\n@mixin main-font-weight-bold {\n font-weight: typography.$font-weight-main-bold;\n}\n\n@mixin main-font {\n font-family: typography.$font-family-main;\n @include main-font-weight;\n}\n\n@mixin heading-font {\n font-family: typography.$font-family-heading;\n font-weight: typography.$font-weight-heading;\n}\n\n@mixin detail-font {\n font-family: typography.$font-family-detail;\n font-weight: typography.$font-weight-detail;\n}\n\n@mixin detail-font-small {\n @include detail-font;\n @include relative-font-size(14);\n text-transform: uppercase;\n line-height: #{math.div(typography.$base-font-size-px, 14)};\n // line-height: 1;\n}\n","$base-font-size-px: 16;\n\n$interactive-text-decoration-thickness: 3.5px;\n\n$font-family-main: \"Open Sans\", serif;\n// $font-weight-main: 500;\n$font-weight-main: normal;\n// $font-weight-main-bold: 700;\n$font-weight-main-bold: bold;\n\n$font-family-heading: supria-sans-condensed, \"Arial Narrow\", sans-serif;\n$font-weight-heading: 400;\n\n$font-family-detail: \"Roboto Mono\", monospace;\n// $font-weight-detail: 400;\n$font-weight-detail: normal;\n","$largest-container-width: 75.25rem !default;\n\n$gutter-width: 2rem !default;\n$gutter-width-mobile: 1.5rem !default;\n\n$column-count: 12 !default;\n$column-count-medium: 6 !default;\n$column-count-small: 4 !default;\n$column-count-tiny: 2 !default;\n","@use \"sass:math\";\n@use \"../../variables/grid\";\n@use \"../../tools/media\";\n@use \"../../tools/grid\" as tools;\n@use \"../../utilities\";\n\n.tna-container {\n max-width: grid.$largest-container-width;\n width: 100%;\n margin-right: auto;\n margin-left: auto;\n padding-right: math.div(grid.$gutter-width, 2);\n padding-left: math.div(grid.$gutter-width, 2);\n\n box-sizing: border-box;\n\n display: flex;\n flex-wrap: wrap;\n justify-content: stretch;\n align-items: stretch;\n\n &--no-padding,\n &--no-padding-all {\n max-width: grid.$largest-container-width - (grid.$gutter-width 2);\n }\n\n &--max {\n max-width: none;\n }\n}\n\n.tna-column {\n margin: 0;\n padding-right: math.div(grid.$gutter-width, 2);\n padding-left: math.div(grid.$gutter-width, 2);\n\n box-sizing: border-box;\n\n &--container {\n display: flex;\n flex-wrap: wrap;\n justify-content: stretch;\n align-items: stretch;\n }\n}\n\n@include tools.columns-generator(grid.$column-count);\n\n@include media.on-medium {\n @include tools.columns-generator(grid.$column-count-medium, \"medium\");\n}\n\n@include media.on-mobile {\n .tna-container {\n padding-right: math.div(grid.$gutter-width-mobile, 2);\n padding-left: math.div(grid.$gutter-width-mobile, 2);\n }\n\n .tna-column {\n padding-right: math.div(grid.$gutter-width-mobile, 2);\n padding-left: math.div(grid.$gutter-width-mobile, 2);\n }\n}\n\n@include media.on-small {\n @include tools.columns-generator(grid.$column-count-small, \"small\");\n}\n\n@include media.on-tiny {\n @include tools.columns-generator(grid.$column-count-tiny, \"tiny\");\n}\n\n.tna-container--no-padding,\n.tna-container--no-padding-all,\n.tna-container--no-padding-all > .tna-column,\n.tna-column--no-padding,\n.tna-column--container--no-padding-all,\n.tna-column--container--no-padding-all > .tna-column {\n padding-right: 0;\n padding-left: 0;\n}\n","@use \"sass:math\";\n@use \"../variables/grid\";\n\n@mixin columns-generator($count, $suffix: \"\") {\n @if $suffix != \"\" {\n $suffix: \"-\" + $suffix;\n }\n\n .tna-column {\n &--full#{$suffix} {\n width: 100%;\n flex: none;\n }\n\n @for $i from 1 through $count - 1 {\n $simplest-fraction-found: false;\n\n @for $j from math.div($count, 2) through 1 {\n @if (\n $count % $j == 0 and $i % $j == 0 and $simplest-fraction-found != true\n ) {\n &--width-#{math.div($i, $j)}-#{math.div($count, $j)}#{$suffix} {\n width: math.div(100%, $count) * $i;\n flex: none;\n }\n\n // .column--margin-right-#{math.div($i, $j)}-#{math.div($count, $j)}#{$suffix} {\n // margin-right: math.div(100%, $count) * $i;\n // }\n\n // .column--margin-left-#{math.div($i, $j)}-#{math.div($count, $j)}#{$suffix} {\n // margin-left: math.div(100%, $count) * $i;\n // }\n\n $simplest-fraction-found: true;\n }\n }\n\n @if $simplest-fraction-found != true {\n &--width-#{$i}-#{$count}#{$suffix} {\n width: math.div(100%, $count) * $i;\n flex: none;\n }\n\n // .column--margin-right-#{$i}-#{$count}#{$suffix} {\n // margin-right: math.div(100%, $count) * $i;\n // }\n\n // .column--margin-left-#{$i}-#{$count}#{$suffix} {\n // margin-left: math.div(100%, $count) * $i;\n // }\n }\n }\n\n @for $i from 1 through 3 {\n &--flex-#{$i}#{$suffix} {\n width: auto;\n\n flex: $i 0;\n }\n }\n\n @for $i from 1 through 4 {\n &--order-#{$i}#{$suffix} {\n order: $i;\n }\n }\n }\n}\n","@use \"../../tools/colour\";\n@use \"../../tools/media\";\n@use \"../../utilities\";\n@use \"../grid\";\n\n.tna-hero {\n min-height: min(35vw, 480px);\n // margin-bottom: 2rem;\n padding-top: 5rem;\n padding-bottom: 3rem;\n\n display: flex;\n align-items: flex-end;\n\n position: relative;\n\n @include colour.invert-on-mobile;\n\n &__image {\n width: 100%;\n height: 100%;\n\n position: absolute;\n inset: 0;\n z-index: 1;\n\n object-fit: cover;\n }\n\n picture#{&}__image img {\n width: 100%;\n height: 100%;\n\n object-fit: cover;\n }\n\n &__image-details {\n position: absolute;\n right: 1.25rem;\n bottom: 1.25rem;\n z-index: 3;\n\n @include colour.colour-font(\"font-base\");\n }\n\n &__image-details-summary {\n width: 2rem;\n height: 2rem;\n\n position: relative;\n z-index: 2;\n\n font-size: 0;\n text-align: center;\n line-height: 2rem;\n list-style: none;\n\n background-color: #fc0;\n\n border-radius: 1rem;\n\n cursor: pointer;\n }\n\n &__image-details-summary-icon {\n font-size: 1.25rem;\n font-style: normal;\n font-weight: 700;\n text-transform: lowercase;\n }\n\n &__image-information {\n width: 20rem;\n max-width: 45vw;\n padding: 0.5rem 1rem;\n\n position: absolute;\n right: 0;\n bottom: 2.5rem;\n z-index: 1;\n\n background-color: #fc0;\n }\n\n &__inner {\n position: relative;\n z-index: 2;\n }\n\n &__content {\n }\n\n &__content-inner {\n padding: 2.5rem 1.5rem;\n\n @include colour.colour-background(\"page-background\");\n }\n\n &__heading {\n margin-bottom: 0;\n }\n\n &__body {\n margin-top: 1.5rem;\n }\n\n @include media.on-mobile {\n padding: 0;\n\n display: block;\n\n &__image {\n height: 320px;\n\n position: static;\n }\n\n &__image-details {\n bottom: auto;\n top: 1.25rem;\n }\n\n &__image-details-summary {\n }\n\n &__image-details-summary-icon {\n }\n\n &__image-information {\n top: 2.5rem;\n bottom: auto;\n }\n\n &__inner {\n }\n\n &__content {\n }\n\n &__content-inner {\n padding: 1.5rem 0;\n\n background-color: transparent;\n }\n\n &__heading {\n }\n\n &__body {\n margin-top: 1rem;\n }\n }\n\n @include media.on-tiny {\n &__image {\n height: 240px;\n }\n }\n\n @include colour.on-high-contrast {\n &__content-inner {\n @include colour.colour-border(\"keyline-dark\", 1px);\n\n @include media.on-mobile {\n border: none;\n }\n }\n }\n}\n"]}
1	+ {"version":3,"sourceRoot":"","sources":["../../../../src/nationalarchives/utilities/_typography.scss","../../../../src/nationalarchives/tools/_colour.scss","../../../../src/nationalarchives/tools/_media.scss","../../../../src/nationalarchives/utilities/_a11y.scss","../../../../src/nationalarchives/utilities/_columns.scss","../../../../src/nationalarchives/variables/_grid.scss","../../../../src/nationalarchives/tools/_spacing.scss","../../../../src/nationalarchives/utilities/_global.scss","../../../../src/nationalarchives/utilities/_lists.scss","../../../../src/nationalarchives/tools/_typography.scss","../../../../src/nationalarchives/variables/_typography.scss","../../../../src/nationalarchives/utilities/_overrides.scss","../../../../src/nationalarchives/components/grid/grid.scss","../../../../src/nationalarchives/tools/_grid.scss","../../../../src/nationalarchives/components/hero/hero.scss"],"names":[],"mappings":"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T4VA,yBEtSA,wBFkSF,kBSxVE,iBTkWE,eAGF,oBACE,cACA,8BAEA,0BACE,gCYzWN,eACE,UPPwB,SOQxB,WACA,kBACA,iBACA,mBACA,kBAEA,sBAEA,aACA,eACA,2BACA,oBAEA,0DAEE,mBAGF,oBACE,eAGF,wBACE,uBAIJ,YACE,SACA,mBACA,kBAEA,sBAEA,uBACE,aACA,eACA,wBACA,oBCrCA,kBACE,WACA,UAUI,wBACE,oBACA,UAGF,+BACE,2BAGF,8BACE,0BAVF,uBACE,qBACA,UAGF,8BACE,4BAGF,6BACE,2BAVF,uBACE,UACA,UAGF,8BACE,iBAGF,6BACE,gBAVF,uBACE,qBACA,UAGF,8BACE,4BAGF,6BACE,2BAVF,wBACE,qBACA,UAGF,+BACE,4BAGF,8BACE,2BAVF,uBACE,UACA,UAGF,8BACE,iBAGF,6BACE,gBAVF,wBACE,qBACA,UAGF,+BACE,4BAGF,8BACE,2BAVF,uBACE,qBACA,UAGF,8BACE,4BAGF,6BACE,2BAVF,uBACE,UACA,UAGF,8BACE,iBAGF,6BACE,gBAVF,uBACE,qBACA,UAGF,8BACE,4BAGF,6BACE,2BAVF,yBACE,qBACA,UAGF,gCACE,4BAGF,+BACE,2BAwBN,oBACE,WAEA,SAHF,oBACE,WAEA,SAHF,oBACE,WAEA,SAKF,qBACE,MAFS,EACX,qBACE,MAFS,EACX,qBACE,MAFS,EACX,qBACE,MAFS,EXvCf,kDWdE,yBACE,WACA,UAUI,8BACE,qBACA,UAGF,qCACE,4BAGF,oCACE,2BAVF,8BACE,qBACA,UAGF,qCACE,4BAGF,oCACE,2BAVF,8BACE,UACA,UAGF,qCACE,iBAGF,oCACE,gBAVF,8BACE,qBACA,UAGF,qCACE,4BAGF,oCACE,2BAVF,8BACE,qBACA,UAGF,qCACE,4BAGF,oCACE,2BAwBN,2BACE,WAEA,SAHF,2BACE,WAEA,SAHF,2BACE,WAEA,SAKF,4BACE,MAFS,EACX,4BACE,MAFS,EACX,4BACE,MAFS,EACX,4BACE,MAFS,GX3Bf,wBUsBA,eACE,oBACA,mBAGF,YACE,oBACA,oBVnCF,kDWpBE,wBACE,WACA,UAUI,6BACE,UACA,UAGF,oCACE,iBAGF,mCACE,gBAVF,6BACE,UACA,UAGF,oCACE,iBAGF,mCACE,gBAVF,6BACE,UACA,UAGF,oCACE,iBAGF,mCACE,gBAwBN,0BACE,WAEA,SAHF,0BACE,WAEA,SAHF,0BACE,WAEA,SAKF,2BACE,MAFS,EACX,2BACE,MAFS,EACX,2BACE,MAFS,EACX,2BACE,MAFS,GX3Bf,wBW1BE,uBACE,WACA,UAUI,4BACE,UACA,UAGF,mCACE,iBAGF,kCACE,gBAwBN,yBACE,WAEA,SAHF,yBACE,WAEA,SAHF,yBACE,WAEA,SAKF,0BACE,MAFS,EACX,0BACE,MAFS,EACX,0BACE,MAFS,EACX,0BACE,MAFS,GDcjB,uNAME,gBACA,eE1EA,kBACE,2BACA,SACA,iBACA,oBAEA,aACA,qBAEA,kBAGF,mBACE,WAEA,kBACA,QACA,SACA,UAEA,iBAGF,mBACE,WAEA,iBAGF,2BACE,aACA,cAEA,kBACA,YACA,aACA,UAEA,YACA,kBACA,mBACA,gBbmFE,oBAIA,sCalFF,mBAEA,eAEA,iCboCF,wBAIA,yBAEA,kCanCA,gCACE,kBACA,kBACA,gBACA,yBAGF,uBACE,YACA,eACA,iCAEA,kBACA,QACA,SACA,UL5EF,eKmFA,iBACE,WACA,YAEA,kBACA,QACA,UAEA,qBACE,WACA,YAEA,iBAOF,uHAEE,aACA,eAEA,cAEA,kBACA,QACA,SbjBJ,sBAEA,kCamBI,WAGF,4DACE,8CAGF,2DACE,+CAIA,mIAEE,cAIJ,yDACE,YAIJ,iBACE,kBACA,UAMF,yBACE,ebrDF,yBAEA,wCakEE,mFAEE,kBACA,QAEA,WAGF,0CACE,UAEA,yBb/EJ,sBAEA,0CagFI,sBAGF,yCACE,UAEA,yBAEA,wBAGF,mDACE,mDZtIJ,wBYmJE,kBACE,UAEA,sBAEA,yBAGF,mBACE,kBACA,QAYF,uBACE,WACA,eAEA,ObtHA,2CAIA,uCauHF,iBACE,gBAEA,QAEA,qBACE,YAIJ,iBACE,QAEA,yBAMF,yBACE,eAEA,+BAMF,gBACE,iBAKF,sHb1IE,yBAIA,qCC9EJ,wBY8NI,oDbpJA,yBAIA,qCakJE,aAGF,4DACE,abyCJ,+BazDA,wGb1IE,yBAIA,sCC9EJ,oDY8NI,6CbpJA,yBAIA,qCakJE,aAGF,qDACE","file":"hero.css","sourcesContent":["@use \"sass:math\";\n@use \"../tools/colour\";\n@use \"../tools/media\";\n@use \"../tools/spacing\";\n@use \"../tools/typography\";\n@use \"../variables/assets\";\n@use \"../variables/grid\";\n@use \"../variables/typography\" as typographyVars;\n\n@import \"https://use.typekit.net/hkj3kuz.css\";\n\n@font-face {\n font-family: \"Open Sans\";\n src: url(\"#{assets.$tna-font-path}/OpenSans-Medium.ttf\");\n font-weight: normal;\n font-style: normal;\n // font-display: swap;\n}\n\n@font-face {\n font-family: \"Open Sans\";\n src: url(\"#{assets.$tna-font-path}/OpenSans-Bold.ttf\");\n font-weight: bold;\n font-style: normal;\n // font-display: swap;\n}\n\n@font-face {\n font-family: \"Roboto Mono\";\n src: url(\"#{assets.$tna-font-path}/RobotoMono-Regular.ttf\");\n font-weight: normal;\n font-style: normal;\n // font-display: swap;\n}\n\n.tna-template {\n @include colour.colour-font(\"font-base\");\n @include typography.main-font;\n -moz-osx-font-smoothing: grayscale;\n -webkit-font-smoothing: antialiased;\n text-rendering: optimizeLegibility;\n -webkit-text-size-adjust: none;\n direction: ltr;\n}\n\n.tna-template__body {\n color: inherit;\n @include typography.relative-font-size(typographyVars.$body-font-size-px);\n line-height: typographyVars.$body-line-height;\n\n @include media.on-mobile {\n @include typography.relative-font-size(\n typographyVars.$body-font-size-px-mobile\n );\n }\n}\n\nh1,\nh2,\nh3,\nh4,\nh5,\nh6,\nul,\nol {\n margin-top: 0;\n}\n\nh1,\nh2,\nh3,\nh4,\nh5,\nh6,\nstrong {\n @include typography.main-font-weight-bold;\n}\n\np {\n margin: 1rem 0 0;\n\n &:first-child {\n margin-top: 0;\n }\n}\n\na {\n @include colour.colour-font(\"link\");\n text-decoration-thickness: 1.5px;\n\n &:visited {\n @include colour.colour-font(\"link-visited\");\n }\n\n &:hover,\n &:active {\n @include typography.interacted-text-decoration;\n }\n}\n\nsmall {\n @include typography.relative-font-size(\n typographyVars.$body-font-size-px * 0.85\n );\n}\n\n.tna-chip-list {\n @include spacing.space-above;\n margin-bottom: 0;\n padding-left: 0;\n\n display: flex;\n flex-wrap: wrap;\n gap: 1rem;\n\n list-style: none;\n\n &__item {\n }\n}\n\n%chip {\n max-width: max-content;\n padding: 0.125em 0.25rem;\n\n display: block;\n\n @include typography.detail-font-small;\n line-height: 1;\n\n @include colour.accent;\n\n @include colour.colour-border(\"accent-background\", 0.125rem);\n}\n\n.tna-chip {\n @extend %chip;\n\n &--plain {\n color: inherit;\n\n background-color: transparent;\n\n border-color: transparent;\n }\n}\n\na.tna-chip {\n text-decoration: none;\n\n &,\n &:link,\n &:visited {\n @include colour.colour-font(\"font-dark\");\n }\n\n &:hover {\n @include typography.interacted-text-decoration;\n }\n\n &--plain {\n &,\n &:link,\n &:visited {\n color: inherit;\n }\n }\n}\n\n%heading {\n @include colour.colour-font(\"font-dark\");\n\n text-wrap: balance;\n\n &:not(.tna-heading--no-link-arrow) {\n a {\n display: inline-block;\n\n &::after {\n padding-left: 0.25rem;\n\n display: inline-block;\n\n font-weight: 700;\n\n content: \"\\203A\";\n }\n\n &:hover {\n &::after {\n padding-left: 0.5rem;\n }\n }\n }\n }\n}\n\n%heading-xl {\n @extend %heading;\n\n @include typography.heading-font;\n @include typography.relative-font-size(64);\n line-height: 1.2;\n\n @include media.on-medium {\n @include typography.relative-font-size(42);\n }\n\n @include media.on-mobile {\n @include typography.relative-font-size(36);\n }\n}\n\n%heading-l {\n @extend %heading;\n\n @include typography.heading-font;\n @include typography.relative-font-size(32);\n line-height: 1.3;\n\n @include media.on-medium {\n @include typography.relative-font-size(26);\n }\n\n @include media.on-mobile {\n @include typography.relative-font-size(24);\n }\n}\n\n%heading-m {\n @extend %heading;\n\n @include typography.main-font-weight-bold;\n @include typography.relative-font-size(22);\n line-height: 1.6;\n\n @include media.on-mobile {\n @include typography.relative-font-size(20);\n }\n}\n\n%heading-s {\n @extend %heading;\n\n @include typography.main-font-weight-bold;\n @include typography.relative-font-size(18);\n line-height: 1.6;\n}\n\n%headings-and-heading-groups {\n @include spacing.space-above;\n margin-bottom: 1rem;\n padding-top: 1rem;\n\n &:first-child {\n padding-top: 0;\n }\n\n &:last-child {\n margin-bottom: 0;\n padding-bottom: 0;\n }\n}\n\n.tna-heading {\n &-xl {\n @extend %heading-xl;\n @extend %headings-and-heading-groups;\n }\n\n &-l {\n @extend %heading-l;\n @extend %headings-and-heading-groups;\n }\n\n &-m {\n @extend %heading-m;\n @extend %headings-and-heading-groups;\n }\n\n &-s {\n @extend %heading-s;\n @extend %headings-and-heading-groups;\n }\n}\n\n.tna-hgroup {\n &-xl,\n &-l,\n &-m,\n &-s {\n @extend %headings-and-heading-groups;\n }\n\n &__supertitle {\n margin: 0 0 0.25rem;\n\n @extend %chip;\n }\n\n &__title {\n margin: 0;\n\n display: block;\n }\n\n &-xl &__title {\n @extend %heading-xl;\n }\n\n &-l &__title {\n @extend %heading-l;\n }\n\n &-m &__title {\n @extend %heading-m;\n }\n\n &-s &__title {\n @extend %heading-s;\n }\n}\n\n.tna-blockquote {\n @include spacing.space-above;\n margin-right: 0;\n margin-bottom: 0;\n margin-left: 0;\n padding: 1rem 1rem 1rem 2rem;\n\n @include colour.colour-border(\"accent-background\", 0.35rem, solid, left);\n\n &__quote {\n font-weight: 700;\n }\n\n &__author {\n font-style: italic;\n\n .tna-blockquote & {\n margin: 1rem 0 0;\n }\n\n &::before {\n content: \"\\2014\" \" \";\n }\n }\n}\n\n.tna-scene-setter {\n @include typography.detail-font;\n @include colour.colour-font(\"font-dark\");\n @include typography.relative-font-size(30);\n line-height: math.div(50, 30);\n\n @include spacing.space-above;\n\n @include media.on-mobile {\n @include typography.relative-font-size(24);\n line-height: 2;\n }\n\n a {\n color: inherit;\n text-decoration-thickness: 2px;\n\n &:hover {\n text-decoration-thickness: 4.5px;\n }\n }\n}\n","@use \"sass:map\";\n@use \"../variables/colour\";\n@use \"../tools/media\";\n\n@function brand-colour($colour, $opacity: 1) {\n @return colour.brand-colour($colour, $opacity);\n}\n\n@mixin colour-css-vars() {\n @each $name, $value in colour.$colour-palette-default {\n --#{$name}: #{$value};\n }\n}\n\n@mixin colour-css-vars-dark() {\n @each $name, $value in colour.$colour-palette-dark {\n --#{$name}: #{$value};\n }\n}\n\n@mixin colour-css-vars-high-contrast() {\n @each $name, $value in colour.$colour-palette-high-contrast {\n --#{$name}: #{$value};\n }\n}\n\n@mixin colour-css-vars-high-contrast-dark() {\n @each $name, $value in colour.$colour-palette-high-contrast-dark {\n --#{$name}: #{$value};\n }\n}\n\n@mixin accent-css-vars($colour) {\n @if $colour == \"yellow\" {\n --accent: #{brand-colour(\"yellow\")} !important;\n --accent-background: #{brand-colour(\"yellow\")} !important;\n --accent-background-light: #{brand-colour(\"cream\")} !important;\n --accent-font-base: #{brand-colour(\"black\")} !important;\n --accent-font-dark: #{brand-colour(\"black\")} !important;\n --accent-font-light: #{brand-colour(\"black\", 0.7)} !important;\n --accent-icon-light: #{brand-colour(\"black\", 0.45)} !important;\n --accent-link: #{brand-colour(\"black\")} !important;\n --accent-link-visited: #{brand-colour(\"black\")} !important;\n --accent-keyline: #{brand-colour(\"black\", 0.5)} !important;\n --accent-keyline-dark: #{brand-colour(\"black\", 0.8)} !important;\n --button-accent-background: #{brand-colour(\"yellow\")} !important;\n } @else {\n --accent-font-base: #{brand-colour(\"white\")} !important;\n --accent-font-dark: #{brand-colour(\"white\")} !important;\n --accent-font-light: #{brand-colour(\"white\", 0.7)} !important;\n --accent-icon-light: #{brand-colour(\"white\", 0.45)} !important;\n --accent-link: #{brand-colour(\"white\")} !important;\n --accent-link-visited: #{brand-colour(\"white\")} !important;\n --accent-keyline: #{brand-colour(\"white\", 0.5)} !important;\n --accent-keyline-dark: #{brand-colour(\"white\", 0.8)} !important;\n\n @if $colour == \"black\" {\n // --accent: #{brand-colour(\"light-grey\")} !important;\n // --accent-background: #{brand-colour(\"black\")} !important;\n // --accent-background-light: #{brand-colour(\"light-grey\")} !important;\n // --button-accent-text: #{brand-colour(\"black\")} !important;\n // --button-accent-background: #{brand-colour(\"grey\")} !important;\n } @else {\n --button-accent-text: #{brand-colour(\"white\")} !important;\n @if $colour == \"pink\" {\n --accent: #{brand-colour(\"pink\")} !important;\n --accent-background: #{brand-colour(\"maroon\")} !important;\n --accent-background-light: #{brand-colour(\"pastel-pink\")} !important;\n --button-accent-background: #{brand-colour(\"maroon\")} !important;\n } @else if $colour == \"orange\" {\n --accent: #{brand-colour(\"orange\")} !important;\n --accent-background: #{brand-colour(\"chestnut\")} !important;\n --accent-background-light: #{brand-colour(\"pastel-orange\")} !important;\n --button-accent-background: #{brand-colour(\"chestnut\")} !important;\n } @else if $colour == \"green\" {\n --accent: #{brand-colour(\"green\")} !important;\n --accent-background: #{brand-colour(\"forest\")} !important;\n --accent-background-light: #{brand-colour(\"pastel-green\")} !important;\n --button-accent-background: #{brand-colour(\"forest\")} !important;\n } @else if $colour == \"blue\" {\n --accent: #{brand-colour(\"blue\")} !important;\n --accent-background: #{brand-colour(\"navy\")} !important;\n --accent-background-light: #{brand-colour(\"pastel-blue\")} !important;\n --button-accent-background: #{brand-colour(\"navy\")} !important;\n }\n }\n }\n}\n\n@mixin colour-font(\n $colour,\n $important: false,\n $default-palette: colour.$colour-palette-default\n) {\n color: map.get($default-palette, $colour) if($important, !important, null);\n color: var(--#{$colour}) if($important, !important, null);\n}\n\n@mixin colour-background($colour, $important: false) {\n background-color: map.get(colour.$colour-palette-default, $colour)\n if($important, !important, null);\n background-color: var(--#{$colour}) if($important, !important, null);\n}\n\n@mixin colour-border(\n $colour,\n $width: \"\",\n $style: solid,\n $direction: \"\",\n $important: false\n) {\n @if $direction != \"\" {\n @if $width != \"\" {\n $property: border-#{$direction};\n border-#{$direction}: $width\n map.get(colour.$colour-palette-default, $colour)\n $style\n if($important, !important, null);\n border-#{$direction}: $width\n var(--#{$colour})\n $style\n if($important, !important, null);\n } @else {\n border-#{$direction}-color: map.get(\n colour.$colour-palette-default,\n $colour\n )\n if($important, !important, null);\n border-#{$direction}-color: var(--#{$colour})\n if($important, !important, null);\n }\n } @else {\n @if $width != \"\" {\n border: $width\n map.get(colour.$colour-palette-default, $colour)\n $style\n if($important, !important, null);\n border: $width var(--#{$colour}) $style if($important, !important, null);\n } @else {\n border-color: map.get(colour.$colour-palette-default, $colour)\n if($important, !important, null);\n border-color: var(--#{$colour}) if($important, !important, null);\n }\n }\n}\n\n@mixin colour-outline($colour, $width: \"\", $style: solid, $important: false) {\n @if $width != \"\" {\n outline: $width\n map.get(colour.$colour-palette-default, $colour)\n $style\n if($important, !important, null);\n outline: $width var(--#{$colour}) $style if($important, !important, null);\n } @else {\n outline-color: map.get(colour.$colour-palette-default, $colour)\n if($important, !important, null);\n outline-color: var(--#{$colour}) if($important, !important, null);\n }\n}\n\n@mixin colour-fill($colour, $important: false) {\n fill: map.get(colour.$colour-palette-default, $colour)\n if($important, !important, null);\n fill: var(--#{$colour}) if($important, !important, null);\n}\n\n%plain {\n .tna-template--system-theme & {\n @include colour-css-vars;\n\n @media (prefers-color-scheme: dark) {\n @include colour-css-vars-dark;\n }\n\n @media (prefers-contrast: more) {\n @include colour-css-vars-high-contrast;\n }\n\n @media (prefers-contrast: more) and (prefers-color-scheme: dark) {\n @include colour-css-vars-high-contrast-dark;\n }\n }\n\n .tna-template--light-theme & {\n @include colour-css-vars;\n }\n\n .tna-template--dark-theme & {\n @include colour-css-vars-dark;\n }\n\n .tna-template--high-contrast-theme & {\n @include colour-css-vars-high-contrast;\n }\n\n .tna-template--high-contrast-theme.tna-template--dark-theme & {\n @include colour-css-vars-high-contrast-dark;\n }\n\n --background: var(--page-background);\n}\n\n@mixin plain {\n @extend %plain;\n}\n\n%invert {\n --background: var(--contrast-background);\n --font-base: var(--contrast-font-base);\n --font-dark: var(--contrast-font-dark);\n --font-light: var(--contrast-font-light);\n --icon-light: var(--contrast-icon-light);\n --link: var(--contrast-link);\n --link-visited: var(--contrast-link-visited);\n --keyline: var(--contrast-keyline);\n --keyline-dark: var(--contrast-keyline-dark);\n --button-text: var(--contrast-button-text);\n --button-background: var(--contrast-button-background);\n --button-hover-text: var(--contrast-button-hover-text);\n --button-hover-background: var(--contrast-button-hover-background);\n\n @include colour-background(\"background\");\n\n @include colour-font(\"font-base\", false, colour.$colour-palette-dark);\n}\n\n@mixin invert {\n @extend %invert;\n}\n\n%invert-on-mobile {\n @include media.on-mobile {\n --background: var(--contrast-background);\n --font-base: var(--contrast-font-base);\n --font-dark: var(--contrast-font-dark);\n --font-light: var(--contrast-font-light);\n --icon-light: var(--contrast-icon-light);\n --link: var(--contrast-link);\n --link-visited: var(--contrast-link-visited);\n --keyline: var(--contrast-keyline);\n --keyline-dark: var(--contrast-keyline-dark);\n --button-text: var(--contrast-button-text);\n --button-background: var(--contrast-button-background);\n --button-hover-text: var(--contrast-button-hover-text);\n --button-hover-background: var(--contrast-button-hover-background);\n\n @include colour-background(\"background\");\n\n @include colour-font(\"font-base\", false, colour.$colour-palette-dark);\n }\n}\n\n@mixin invert-on-mobile {\n @extend %invert-on-mobile;\n}\n\n%accent {\n --background: var(--accent-background);\n --font-base: var(--accent-font-base);\n --font-dark: var(--accent-font-dark);\n --font-light: var(--accent-font-light);\n --icon-light: var(--accent-icon-light);\n --link: var(--accent-link);\n --link-visited: var(--accent-link-visited);\n --keyline: var(--accent-keyline);\n --keyline-dark: var(--accent-keyline-dark);\n\n @include colour-background(\"background\");\n\n @include colour-font(\"font-base\", false, colour.$colour-palette-dark);\n}\n\n@mixin accent {\n @extend %accent;\n}\n\n%tint-background {\n @include colour-background(\"background-tint\");\n}\n\n@mixin tint-background {\n @extend %tint-background;\n}\n\n%accent-background {\n @include colour-background(\"accent-background\");\n}\n\n@mixin accent-background {\n @extend %accent-background;\n}\n\n%light-accent-background {\n --background: var(--accent-background-light);\n --font-base: #{map.get(colour.$colour-palette-default, \"font-base\")};\n --font-dark: #{map.get(colour.$colour-palette-default, \"font-dark\")};\n --font-light: #{map.get(colour.$colour-palette-default, \"font-light\")};\n --link: #{map.get(colour.$colour-palette-default, \"font-dark\")};\n --link-visited: #{map.get(colour.$colour-palette-default, \"link-visited\")};\n --keyline: #{map.get(colour.$colour-palette-default, \"keyline\")};\n --keyline-dark: #{map.get(colour.$colour-palette-default, \"keyline-dark\")};\n --button-text: #{map.get(colour.$colour-palette-default, \"button-text\")};\n --button-background: #{map.get(\n colour.$colour-palette-default,\n \"button-background\"\n )};\n --button-hover-text: #{map.get(\n colour.$colour-palette-default,\n \"button-hover-text\"\n )};\n --button-hover-background: #{map.get(\n colour.$colour-palette-default,\n \"button-hover-background\"\n )};\n\n @include colour-background(\"background\");\n}\n\n@mixin light-accent-background {\n @extend %light-accent-background;\n}\n\n@mixin on-high-contrast {\n .tna-template--high-contrast-theme & {\n @content;\n }\n\n .tna-template--system-theme & {\n @media (prefers-contrast: more) {\n @content;\n }\n }\n}\n","@use \"../variables/media\";\n\n// 0 ======= 320 = 480 ===== 768 == 1024 ========================== min-width/max-width (px)\n// \| . \| \| \|\n// \|-TINY----------\|-SMALL---\|-MED--\|-LARGE------------------------\n// \| . \| \| \|\n// \|<------------->\| \| \| on-tiny\n// \|<----------------------->\| \| on-mobile\n// \|<------------------------------>\| on-smaller-than-large\n// \| . \|<------->\| \| on-small\n// \| . \|<------------------------- on-larger-than-tiny\n// \| . \| \|<---->\| on-medium\n// \| . \| \|<--------------- on-larger-than-mobile\n// \| . \| \| \|<-------- on-large\n// \|<------->. \| \| \| Smallest device\n\n@mixin on-large() {\n @media #{media.$media-large} {\n @content;\n }\n}\n\n@mixin on-medium() {\n @media #{media.$media-medium} {\n @content;\n }\n}\n\n@mixin on-small() {\n @media #{media.$media-small} {\n @content;\n }\n}\n\n@mixin on-tiny() {\n @media #{media.$media-tiny} {\n @content;\n }\n}\n\n@mixin on-larger-than-mobile() {\n @media #{media.$media-gt-mobile} {\n @content;\n }\n}\n\n@mixin on-larger-than-tiny() {\n @media #{media.$media-gt-tiny} {\n @content;\n }\n}\n\n@mixin on-smaller-than-large() {\n @media #{media.$media-lt-large} {\n @content;\n }\n}\n\n@mixin on-mobile() {\n @media #{media.$media-mobile} {\n @content;\n }\n}\n\n@mixin on-print() {\n @media print {\n @content;\n }\n}\n","@use \"../tools/colour\";\n\n.tna-visually-hidden {\n width: 1px !important;\n height: 1px !important;\n margin: 0 !important;\n padding: 0 !important;\n\n position: absolute !important;\n top: -9999px !important;\n left: -9999px !important;\n z-index: -1 !important;\n\n overflow: hidden !important;\n\n clip: rect(0, 0, 0, 0) !important;\n\n border: 0 !important;\n\n background-color: transparent !important;\n\n &::before,\n &::after {\n content: \"\\00a0\";\n }\n}\n\n:focus {\n z-index: 9;\n\n @include colour.colour-outline(\"focus-outline\", 0.3125rem, solid);\n outline-offset: 0.125rem;\n}\n\n.tna-\\!--no-focus-style {\n &:focus {\n outline: none;\n }\n}\n","@use \"../tools/media\";\n@use \"../variables/grid\";\n\n.tna-columns {\n column-gap: grid.$gutter-width;\n\n &--2 {\n column-count: 2;\n }\n\n &--3 {\n column-count: 3;\n }\n\n @include media.on-tiny {\n column-gap: grid.$gutter-width-tiny;\n }\n\n @include media.on-small {\n @for $i from 1 through 4 {\n &--#{$i}-small {\n column-count: $i;\n }\n }\n }\n\n @include media.on-tiny {\n @for $i from 1 through 4 {\n &--#{$i}-tiny {\n column-count: $i;\n }\n }\n }\n\n &__block {\n break-inside: avoid;\n }\n\n &:has(&__block:only-of-type) {\n column-count: 1;\n }\n}\n","$largest-container-width: 75.25rem !default;\n\n$gutter-width: 2rem !default;\n$gutter-width-tiny: 1rem !default;\n\n$column-count: 12;\n$column-count-medium: 6;\n$column-count-small: 4;\n$column-count-tiny: 2;\n","@use \"sass:map\";\n@use \"../variables/spacing\";\n\n%space-above {\n margin-top: 2rem;\n\n &:first-child {\n margin-top: 0;\n }\n}\n\n@mixin space-above {\n @extend %space-above;\n}\n\n@function spacing($size) {\n @return map.get(spacing.$spacing, $size);\n}\n\n@function spacing-mobile($size) {\n @return map.get(spacing.$spacing-mobile, $size);\n}\n","@use \"../tools/colour\";\n@use \"../tools/media\";\n@use \"../tools/spacing\";\n@use \"../variables/typography\";\n\n:root {\n @include colour.colour-css-vars;\n}\n\n.tna-template {\n min-width: 320px;\n width: 100%;\n height: 100%;\n\n /\n * ------------------------------------------\n * Support ended with iOS 13 released on 19th\n * September 2019. Deprecate in the future if\n * iOS <13 share drops low enough.\n * https://caniuse.com/mdn-css_properties_-webkit-overflow-scrolling\n * ------------------------------------------\n /\n -webkit-overflow-scrolling: touch;\n\n font-size: #{typography.$relative-1rem-px}px;\n\n @include colour.colour-background(\"page-background\");\n\n accent-color: var(--accent);\n\n &--system-theme {\n @include colour.colour-css-vars;\n\n @media (prefers-color-scheme: dark) {\n @include colour.colour-css-vars-dark;\n }\n\n @media (prefers-contrast: more) {\n @include colour.colour-css-vars-high-contrast;\n\n {\n background-image: none !important;\n }\n }\n\n @media (prefers-contrast: more) and (prefers-color-scheme: dark) {\n @include colour.colour-css-vars-high-contrast-dark;\n }\n }\n\n &--light-theme {\n @include colour.colour-css-vars;\n }\n\n &--dark-theme {\n @include colour.colour-css-vars-dark;\n }\n\n &--high-contrast-theme {\n @include colour.colour-css-vars-high-contrast;\n\n * {\n background-image: none !important;\n }\n\n &.tna-template--dark-theme {\n @include colour.colour-css-vars-high-contrast-dark;\n }\n }\n\n &--black-accent {\n @include colour.accent-css-vars(\"black\");\n }\n\n &--yellow-accent {\n @include colour.accent-css-vars(\"yellow\");\n }\n\n &--pink-accent {\n @include colour.accent-css-vars(\"pink\");\n }\n\n &--orange-accent {\n @include colour.accent-css-vars(\"orange\");\n }\n\n &--green-accent {\n @include colour.accent-css-vars(\"green\");\n }\n\n &--blue-accent {\n @include colour.accent-css-vars(\"blue\");\n }\n\n @media (prefers-reduced-motion) {\n * {\n animation: none !important;\n transition: none !important;\n }\n }\n}\n\n.tna-template__body {\n min-height: 100%;\n margin: 0;\n padding: 0;\n\n &:has(.tna-header):has(#main-content[role=\"main\"]):has(.tna-footer) {\n display: flex;\n flex-direction: column;\n\n #main-content[role=\"main\"] {\n flex: 1;\n }\n }\n}\n\nimg,\nsvg,\npicture,\nvideo,\ncanvas {\n max-width: 100%;\n\n display: block;\n}\n\nvideo,\ncanvas {\n width: 100%;\n}\n\n[hidden] {\n display: none;\n}\n\nhr {\n margin: 0;\n\n border-width: 1px 0 0;\n @include colour.colour-border(\"keyline\");\n border-style: solid;\n}\n\n.tna-section {\n padding-top: 3rem;\n padding-bottom: 3rem;\n\n @include media.on-mobile {\n padding-top: 2rem;\n padding-bottom: 2rem;\n }\n}\n\n.tna-aside {\n padding: 2rem;\n\n @include spacing.space-above;\n\n @include media.on-mobile {\n padding: 1rem;\n }\n\n @include colour.on-high-contrast {\n @include colour.colour-border(\"keyline-dark\", 1px);\n }\n\n &--tight {\n padding: 1rem;\n }\n}\n\n.tna-background {\n &--contrast {\n @include colour.invert;\n }\n\n &--accent {\n @include colour.accent;\n }\n\n &--accent-light {\n @include colour.light-accent-background;\n }\n\n &--tint {\n @include colour.tint-background;\n }\n}\n","@use \"../tools/colour\";\n@use \"../tools/media\";\n@use \"../tools/spacing\";\n@use \"../tools/typography\";\n\n.tna-ul,\n.tna-ol {\n margin: 1rem 0;\n padding: 0 0 0 2rem;\n\n &:first-child {\n margin-top: 0;\n }\n\n li::marker {\n @include colour.colour-font(\"accent-background\");\n font-weight: 700;\n }\n\n &--plain {\n padding-left: 0;\n\n list-style: none;\n }\n}\n\n.tna-dl {\n margin: 1rem 0;\n\n display: flex;\n flex-wrap: wrap;\n\n &:first-child {\n margin-top: 0;\n }\n\n dt,\n dd {\n margin: 0;\n padding: 0.5rem 1rem;\n\n position: relative;\n\n box-sizing: border-box;\n\n word-wrap: break-word;\n // word-break: break-all;\n }\n\n &--plain {\n dt {\n padding-left: 0;\n }\n\n dd {\n padding-right: 0;\n }\n }\n\n dt {\n width: 30%;\n\n @include typography.main-font-weight-bold;\n }\n\n dd {\n width: 70%;\n\n + dd {\n margin-left: 30%;\n }\n }\n\n &--icon-padding {\n dt {\n padding-left: 3rem !important;\n\n position: relative;\n\n .fa-solid {\n overflow: visible;\n\n position: absolute;\n top: 50%;\n left: 1rem;\n\n @include colour.colour-font(\"icon-light\");\n text-align: left;\n\n transform: translateY(-50%);\n }\n }\n }\n\n &--icon-padding#{&}--plain {\n dt {\n padding-left: 2rem !important;\n\n .fa-solid {\n left: 0;\n }\n }\n\n dd {\n padding-left: 2rem;\n }\n }\n\n &:not(&--plain) {\n dt:first-child,\n dd:nth-of-type(2n) + dt,\n dd:nth-of-type(2n + 1) {\n @include colour.colour-background(\"background-tint\");\n }\n }\n\n @include media.on-small {\n dt {\n width: 35%;\n }\n\n dd {\n width: 65%;\n\n + dd {\n margin-left: 35%;\n }\n }\n }\n\n @include media.on-tiny {\n dt,\n dd {\n width: 100%;\n margin-left: 0;\n }\n\n dd {\n padding-left: 1rem;\n }\n\n &--plain {\n dt {\n padding-bottom: 0;\n }\n\n dd {\n padding-top: 0;\n // padding-left: 2rem;\n\n + dt {\n // @include colour.colour-border(\"keyline\", 1px, solid, top);\n }\n }\n }\n\n &:not(&--plain) {\n dt {\n @include colour.colour-background(\"background-tint\");\n }\n\n dd {\n background: transparent !important;\n }\n }\n }\n\n @include colour.on-high-contrast {\n @include colour.colour-border(\"keyline-dark\", 1px, solid, bottom);\n\n dt,\n dd {\n // padding-left: 0;\n // padding-right: 0;\n\n background: transparent !important;\n\n @include colour.colour-border(\"keyline-dark\", 1px, solid, top);\n }\n }\n}\n","@use \"sass:math\";\n@use \"colour\";\n@use \"../variables/typography\";\n\n@mixin relative-font-size($fontSizePx) {\n font-size: #{math.div($fontSizePx, typography.$relative-1rem-px)}rem;\n}\n\n@mixin interacted-text-decoration {\n text-decoration: underline;\n text-decoration-thickness: typography.$interactive-text-decoration-thickness;\n}\n\n@mixin main-font-weight {\n font-weight: typography.$font-weight-main;\n}\n\n@mixin main-font-weight-bold {\n font-weight: typography.$font-weight-main-bold;\n}\n\n@mixin main-font {\n font-family: typography.$font-family-main;\n @include main-font-weight;\n}\n\n@mixin heading-font {\n font-family: typography.$font-family-heading;\n font-weight: typography.$font-weight-heading;\n}\n\n@mixin detail-font {\n font-family: typography.$font-family-detail;\n font-weight: typography.$font-weight-detail;\n}\n\n@mixin detail-font-small {\n @include colour.colour-font(\"font-dark\");\n @include detail-font;\n @include relative-font-size(14);\n text-transform: uppercase;\n line-height: #{math.div(typography.$relative-1rem-px, 14)};\n // line-height: 1;\n}\n","@use \"sass:math\";\n\n$relative-1rem-px: 16;\n\n$body-font-size-px: 18 !default;\n$body-font-size-px-mobile: 17 !default;\n$body-line-height: #{math.div(16, 18) * 2} !default; // 1.77777\n\n$interactive-text-decoration-thickness: 3.5px !default;\n\n$font-family-main: \"Open Sans\", sans-serif !default;\n$font-weight-main: normal !default; // Defined in utilities/_typography.scss\n$font-weight-main-bold: bold !default; // Defined in utilities/_typography.scss\n\n$font-family-heading: supria-sans-condensed, \"Arial Narrow\", sans-serif !default;\n$font-weight-heading: 500 !default;\n\n$font-family-detail: \"Roboto Mono\", monospace !default;\n$font-weight-detail: normal !default;\n","@use \"../variables/spacing\";\n@use \"../tools/media\";\n\n@mixin no-spacing-generator($suffix: \"\") {\n @if $suffix != \"\" {\n $suffix: \"-\" + $suffix;\n }\n\n @each $property in margin, padding {\n @each $direction in top, bottom {\n .tna-\\!--no-#{$property}-#{$direction}#{$suffix},\n .tna-\\!--no-#{$property}-vertical#{$suffix} {\n #{$property}-#{$direction}: 0 !important;\n }\n }\n }\n}\n\n@mixin overrides($spacing, $suffix: \"\") {\n @if $suffix != \"\" {\n $suffix: \"-\" + $suffix;\n }\n\n @each $property in margin, padding {\n @each $direction in top, bottom {\n @each $size, $amount in $spacing {\n .tna-\\!--#{$property}-#{$direction}-#{$size}#{$suffix},\n .tna-\\!--#{$property}-vertical-#{$size}#{$suffix} {\n #{$property}-#{$direction}: #{$amount} !important;\n }\n }\n }\n }\n}\n\n@include no-spacing-generator;\n@include overrides(spacing.$spacing);\n\n@include media.on-medium {\n @include no-spacing-generator(\"medium\");\n @include overrides(spacing.$spacing, \"medium\");\n}\n\n@include media.on-small {\n @include no-spacing-generator(\"small\");\n @include overrides(spacing.$spacing-mobile, \"small\");\n}\n\n@include media.on-tiny {\n @include no-spacing-generator(\"tiny\");\n @include overrides(spacing.$spacing-mobile, \"tiny\");\n}\n","@use \"sass:math\";\n@use \"../../variables/grid\";\n@use \"../../tools/media\";\n@use \"../../tools/grid\" as gridTools;\n@use \"../../utilities\";\n\n.tna-container {\n max-width: grid.$largest-container-width;\n width: 100%;\n margin-right: auto;\n margin-left: auto;\n padding-right: math.div(grid.$gutter-width, 2);\n padding-left: math.div(grid.$gutter-width, 2);\n\n box-sizing: border-box;\n\n display: flex;\n flex-wrap: wrap;\n justify-content: flex-start;\n align-items: stretch;\n\n &--no-padding,\n &--no-padding-all {\n max-width: grid.$largest-container-width - (grid.$gutter-width * 2);\n }\n\n &--max {\n max-width: none;\n }\n\n &--centred {\n justify-content: center;\n }\n}\n\n.tna-column {\n margin: 0;\n padding-right: math.div(grid.$gutter-width, 2);\n padding-left: math.div(grid.$gutter-width, 2);\n\n box-sizing: border-box;\n\n &--container {\n display: flex;\n flex-wrap: wrap;\n justify-content: stretch;\n align-items: stretch;\n }\n}\n\n@include gridTools.columns-generator(grid.$column-count);\n\n@include media.on-medium {\n @include gridTools.columns-generator(grid.$column-count-medium, \"medium\");\n}\n\n@include media.on-tiny {\n .tna-container {\n padding-right: math.div(grid.$gutter-width-tiny, 2);\n padding-left: math.div(grid.$gutter-width-tiny, 2);\n }\n\n .tna-column {\n padding-right: math.div(grid.$gutter-width-tiny, 2);\n padding-left: math.div(grid.$gutter-width-tiny, 2);\n }\n}\n\n@include media.on-small {\n @include gridTools.columns-generator(grid.$column-count-small, \"small\");\n}\n\n@include media.on-tiny {\n @include gridTools.columns-generator(grid.$column-count-tiny, \"tiny\");\n}\n\n.tna-container--no-padding,\n.tna-container--no-padding-all,\n.tna-container--no-padding-all > .tna-column,\n.tna-column--no-padding,\n.tna-column--container--no-padding-all,\n.tna-column--container--no-padding-all > .tna-column {\n padding-right: 0;\n padding-left: 0;\n}\n","@use \"sass:math\";\n@use \"../variables/grid\";\n\n@mixin columns-generator($count, $suffix: \"\") {\n @if $suffix != \"\" {\n $suffix: \"-\" + $suffix;\n }\n\n .tna-column {\n &--full#{$suffix} {\n width: 100%;\n flex: none;\n }\n\n @for $i from 1 through $count - 1 {\n $simplest-fraction-found: false;\n\n @for $j from math.div($count, 2) through 1 {\n @if (\n $count % $j == 0 and $i % $j == 0 and $simplest-fraction-found != true\n ) {\n &--width-#{math.div($i, $j)}-#{math.div($count, $j)}#{$suffix} {\n width: math.div(100%, $count) * $i;\n flex: none;\n }\n\n &--margin-right-#{math.div($i, $j)}-#{math.div($count, $j)}#{$suffix} {\n margin-right: math.div(100%, $count) * $i;\n }\n\n &--margin-left-#{math.div($i, $j)}-#{math.div($count, $j)}#{$suffix} {\n margin-left: math.div(100%, $count) * $i;\n }\n\n $simplest-fraction-found: true;\n }\n }\n\n @if $simplest-fraction-found != true {\n &--width-#{$i}-#{$count}#{$suffix} {\n width: math.div(100%, $count) * $i;\n flex: none;\n }\n\n &--margin-right-#{$i}-#{$count}#{$suffix} {\n margin-right: math.div(100%, $count) * $i;\n }\n\n &--margin-left-#{$i}-#{$count}#{$suffix} {\n margin-left: math.div(100%, $count) * $i;\n }\n }\n }\n\n @for $i from 1 through 3 {\n &--flex-#{$i}#{$suffix} {\n width: auto;\n\n flex: $i 0;\n }\n }\n\n @for $i from 1 through 4 {\n &--order-#{$i}#{$suffix} {\n order: $i;\n }\n }\n }\n}\n","@use \"../../tools/colour\";\n@use \"../../tools/media\";\n@use \"../../tools/typography\";\n@use \"../../utilities\";\n@use \"../grid\";\n\n.tna-hero {\n @include colour.invert-on-mobile;\n\n &__figure {\n min-height: min(35vw, 480px);\n margin: 0;\n padding-top: 8rem;\n padding-bottom: 4rem;\n\n display: flex;\n align-items: flex-end;\n\n position: relative;\n }\n\n &__caption {\n width: 100%;\n\n position: absolute;\n right: 0;\n bottom: 0;\n z-index: 5;\n\n overflow: visible;\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 right: 0.5rem;\n bottom: 0.5rem;\n z-index: 2;\n\n font-size: 0;\n text-align: center;\n line-height: 1.5rem;\n list-style: none;\n\n @include colour.accent;\n\n @include colour.colour-border(\"background\", 0.25rem);\n border-radius: 100%;\n\n cursor: pointer;\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-style: normal;\n font-weight: 700;\n text-transform: lowercase;\n }\n\n &__information {\n width: 50rem;\n max-width: 50vw;\n padding: 0.5rem 3.25rem 0.5rem 1rem;\n\n position: absolute;\n right: 0;\n bottom: 0;\n z-index: 1;\n\n @include colour.invert;\n\n @include typography.relative-font-size(16);\n }\n\n &__image {\n width: 100%;\n height: 100%;\n\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.invert;\n\n &::before,\n &::after {\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 content: \"\";\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 &__content {\n }\n\n &__content-inner {\n padding: 1.5rem;\n\n @include colour.colour-background(\"page-background\");\n }\n\n &__heading {\n }\n\n &__body {\n }\n\n &--tint .tna-hero__figure {\n // @include colour.colour-border(\"keyline-dark\", 1px, solid, top);\n // @include colour.colour-border(\"keyline-dark\", 1px, solid, bottom);\n\n &::before,\n &::after {\n position: absolute;\n inset: 0;\n\n content: \"\";\n }\n\n &::before {\n z-index: 2;\n\n background-color: colour.brand-colour(\"maroon\");\n @include colour.colour-background(\"accent-background\");\n\n mix-blend-mode: screen;\n }\n\n &::after {\n z-index: 3;\n\n background-color: colour.brand-colour(\"cream\");\n\n mix-blend-mode: multiply;\n }\n\n .tna-hero__image {\n filter: grayscale(1) contrast(1.75) brightness(1.2);\n }\n\n .tna-hero__content-inner {\n // @include colour.colour-border(\"keyline-dark\", 1px);\n\n @include media.on-mobile {\n // border: none;\n }\n }\n }\n\n @include media.on-mobile {\n &__figure {\n padding: 0;\n\n flex-direction: column;\n\n background-color: inherit;\n }\n\n &__caption {\n position: relative;\n order: 2;\n }\n\n &__details {\n }\n\n &__details-summary {\n }\n\n &__details-summary-icon {\n }\n\n &__information {\n width: auto;\n max-width: none;\n\n left: 0;\n\n @include colour.colour-border(\"keyline\", 1px, solid, bottom);\n }\n\n &__image {\n position: static;\n\n order: 1;\n\n img {\n height: auto;\n }\n }\n\n &__inner {\n order: 3;\n\n background-color: inherit;\n }\n\n &__content {\n }\n\n &__content-inner {\n padding: 2rem 0;\n\n background-color: transparent;\n }\n\n &__heading {\n }\n\n &__body {\n margin-top: 1rem;\n }\n }\n\n @include colour.on-high-contrast {\n &__information,\n &__content-inner {\n @include colour.colour-border(\"keyline-dark\", 1px);\n }\n\n @include media.on-mobile {\n &__information {\n // border-bottom: 0\n }\n\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"]}

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

@@ -1,144 +1,261 @@
 @use "../../tools/colour";
 @use "../../tools/media";
+@use "../../tools/typography";
 @use "../../utilities";
 @use "../grid";
 .tna-hero {
-  min-height: min(35vw, 480px);
-  // margin-bottom: 2rem;
-  padding-top: 5rem;
-  padding-bottom: 3rem;
+  @include colour.invert-on-mobile;
-  display: flex;
-  align-items: flex-end;
+  &__figure {
+    min-height: min(35vw, 480px);
+    margin: 0;
+    padding-top: 8rem;
+    padding-bottom: 4rem;
-  position: relative;
+    display: flex;
+    align-items: flex-end;
-  @include colour.invert-on-mobile;
+    position: relative;
+  }
-  &__image {
+  &__caption {
     width: 100%;
-    height: 100%;
     position: absolute;
-    inset: 0;
-    z-index: 1;
+    right: 0;
+    bottom: 0;
+    z-index: 5;
-    object-fit: cover;
+    overflow: visible;
   }
-  picture#{&}__image img {
+  &__details {
     width: 100%;
-    height: 100%;
-    object-fit: cover;
-  }
-  &__image-details {
-    position: absolute;
-    right: 1.25rem;
-    bottom: 1.25rem;
-    z-index: 3;
-    @include colour.colour-font("font-base");
+    overflow: visible;
   }
-  &__image-details-summary {
-    width: 2rem;
-    height: 2rem;
+  &__details-summary {
+    width: 1.5rem;
+    height: 1.5rem;
-    position: relative;
+    position: absolute;
+    right: 0.5rem;
+    bottom: 0.5rem;
     z-index: 2;
     font-size: 0;
     text-align: center;
-    line-height: 2rem;
+    line-height: 1.5rem;
     list-style: none;
-    background-color: #fc0;
+    @include colour.accent;
-    border-radius: 1rem;
+    @include colour.colour-border("background", 0.25rem);
+    border-radius: 100%;
     cursor: pointer;
+    &:hover {
+      @include colour.colour-font("background");
+      @include colour.colour-background("font-base");
+    }
   }
-  &__image-details-summary-icon {
+  &__details-summary-icon {
     font-size: 1.25rem;
     font-style: normal;
     font-weight: 700;
     text-transform: lowercase;
   }
-  &__image-information {
-    width: 20rem;
-    max-width: 45vw;
-    padding: 0.5rem 1rem;
+  &__information {
+    width: 50rem;
+    max-width: 50vw;
+    padding: 0.5rem 3.25rem 0.5rem 1rem;
     position: absolute;
     right: 0;
-    bottom: 2.5rem;
+    bottom: 0;
     z-index: 1;
-    background-color: #fc0;
+    @include colour.invert;
+    @include typography.relative-font-size(16);
+  }
+  &__image {
+    width: 100%;
+    height: 100%;
+    position: absolute;
+    inset: 0;
+    z-index: 1;
+    img {
+      width: 100%;
+      height: 100%;
+      object-fit: cover;
+    }
+  }
+  &__details[open] &__details-summary {
+    @include colour.invert;
+    &::before,
+    &::after {
+      width: 1.5rem;
+      height: 0.125rem;
+      display: block;
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      @include colour.colour-background("font-dark");
+      content: "";
+    }
+    &::before {
+      transform: translate(-50%, -50%) rotate(45deg);
+    }
+    &::after {
+      transform: translate(-50%, -50%) rotate(-45deg);
+    }
+    &:hover {
+      &::before,
+      &::after {
+        height: 0.25rem;
+      }
+    }
+    &-icon {
+      font-size: 0;
+    }
   }
   &__inner {
     position: relative;
-    z-index: 2;
+    z-index: 4;
   }
   &__content {
   }
   &__content-inner {
-    padding: 2.5rem 1.5rem;
+    padding: 1.5rem;
     @include colour.colour-background("page-background");
   }
   &__heading {
-    margin-bottom: 0;
   }
   &__body {
-    margin-top: 1.5rem;
+  }
+  &--tint .tna-hero__figure {
+    // @include colour.colour-border("keyline-dark", 1px, solid, top);
+    // @include colour.colour-border("keyline-dark", 1px, solid, bottom);
+    &::before,
+    &::after {
+      position: absolute;
+      inset: 0;
+      content: "";
+    }
+    &::before {
+      z-index: 2;
+      background-color: colour.brand-colour("maroon");
+      @include colour.colour-background("accent-background");
+      mix-blend-mode: screen;
+    }
+    &::after {
+      z-index: 3;
+      background-color: colour.brand-colour("cream");
+      mix-blend-mode: multiply;
+    }
+    .tna-hero__image {
+      filter: grayscale(1) contrast(1.75) brightness(1.2);
+    }
+    .tna-hero__content-inner {
+      // @include colour.colour-border("keyline-dark", 1px);
+      @include media.on-mobile {
+        // border: none;
+      }
+    }
   }
   @include media.on-mobile {
-    padding: 0;
+    &__figure {
+      padding: 0;
-    display: block;
+      flex-direction: column;
-    &__image {
-      height: 320px;
+      background-color: inherit;
+    }
-      position: static;
+    &__caption {
+      position: relative;
+      order: 2;
     }
-    &__image-details {
-      bottom: auto;
-      top: 1.25rem;
+    &__details {
     }
-    &__image-details-summary {
+    &__details-summary {
     }
-    &__image-details-summary-icon {
+    &__details-summary-icon {
+    }
+    &__information {
+      width: auto;
+      max-width: none;
+      left: 0;
+      @include colour.colour-border("keyline", 1px, solid, bottom);
     }
-    &__image-information {
-      top: 2.5rem;
-      bottom: auto;
+    &__image {
+      position: static;
+      order: 1;
+      img {
+        height: auto;
+      }
     }
     &__inner {
+      order: 3;
+      background-color: inherit;
     }
     &__content {
     }
     &__content-inner {
-      padding: 1.5rem 0;
+      padding: 2rem 0;
       background-color: transparent;
     }
@@ -151,17 +268,23 @@
     }
   }
-  @include media.on-tiny {
-    &__image {
-      height: 240px;
-    }
-  }
   @include colour.on-high-contrast {
+    &__information,
     &__content-inner {
       @include colour.colour-border("keyline-dark", 1px);
+    }
-      @include media.on-mobile {
+    @include media.on-mobile {
+      &__information {
+        // border-bottom: 0
+      }
+      &__inner {
+        @include colour.colour-border("keyline-dark", 1px);
+        border-top: 0;
+      }
+      &__content-inner {
         border: none;
       }
     }