@nationalarchives/frontend 0.1.55 → 0.1.57

package/nationalarchives/components/hero/fixtures.json

@@ -195,18 +195,6 @@
       },
       "html": "<div class=\"tna-hero \"><figure class=\"tna-hero__figure\"><figcaption class=\"tna-hero__caption\"><details class=\"tna-hero__details\"><summary class=\"tna-hero__details-summary\" title=\"About this image\">About this <span class=\"tna-hero__details-summary-icon\">i</span>mage</summary><div class=\"tna-hero__information\">An interesting photo by a famous photographer ©2023</div></details></figcaption><picture class=\"tna-hero__image\"><img src=\"https://www.nationalarchives.gov.uk/wp-content/uploads/sites/24/2023/07/tna-building-compress.jpg\" alt=\"The National Archives office\" width=\"499\" height=\"333\"></picture></figure></div>"
     },
-    {
-      "name": "image with different type",
-      "options": {
-        "imageSrc": "https://upload.wikimedia.org/wikipedia/en/thumb/c/c8/Gov.uk_logo.svg/250px-Gov.uk_logo.svg.png",
-        "imageAlt": "The National Archives office",
-        "imageWidth": 499,
-        "imageHeight": 333,
-        "imageType": "image/png",
-        "imageCaption": "An interesting photo by a famous photographer ©2023"
-      },
-      "html": "<div class=\"tna-hero \"><figure class=\"tna-hero__figure\"><figcaption class=\"tna-hero__caption\"><details class=\"tna-hero__details\"><summary class=\"tna-hero__details-summary\" title=\"About this image\">About this <span class=\"tna-hero__details-summary-icon\">i</span>mage</summary><div class=\"tna-hero__information\">An interesting photo by a famous photographer ©2023</div></details></figcaption><picture class=\"tna-hero__image\"><img src=\"https://upload.wikimedia.org/wikipedia/en/thumb/c/c8/Gov.uk_logo.svg/250px-Gov.uk_logo.svg.png\" alt=\"The National Archives office\" width=\"499\" height=\"333\"></picture></figure></div>"
-    },
     {
       "name": "with alternative image sources",
       "options": {
@@ -222,7 +210,7 @@
           }
         ]
       },
-      "html": "<div class=\"tna-hero \"><figure class=\"tna-hero__figure\"><figcaption class=\"tna-hero__caption\"><details class=\"tna-hero__details\"><summary class=\"tna-hero__details-summary\" title=\"About this image\">About this <span class=\"tna-hero__details-summary-icon\">i</span>mage</summary><div class=\"tna-hero__information\">An interesting photo by a famous photographer ©2023</div></details></figcaption><picture class=\"tna-hero__image\"><source srcset=\"https://www.gstatic.com/webp/gallery/2.webp\" type=\"image/webp\" width=\"499\" height=\"333\"><source srcset=\"https://www.nationalarchives.gov.uk/wp-content/uploads/sites/24/2023/07/tna-building-compress.jpg\" type=\"image/jpeg\" width=\"499\" height=\"333\"><img src=\"https://www.nationalarchives.gov.uk/wp-content/uploads/sites/24/2023/07/tna-building-compress.jpg\" alt=\"The National Archives office\" width=\"499\" height=\"333\"></picture></figure></div>"
+      "html": "<div class=\"tna-hero \"><figure class=\"tna-hero__figure\"><figcaption class=\"tna-hero__caption\"><details class=\"tna-hero__details\"><summary class=\"tna-hero__details-summary\" title=\"About this image\">About this <span class=\"tna-hero__details-summary-icon\">i</span>mage</summary><div class=\"tna-hero__information\">An interesting photo by a famous photographer ©2023</div></details></figcaption><picture class=\"tna-hero__image\"><source srcset=\"https://www.gstatic.com/webp/gallery/2.webp\" type=\"image/webp\" width=\"499\" height=\"333\"><img src=\"https://www.nationalarchives.gov.uk/wp-content/uploads/sites/24/2023/07/tna-building-compress.jpg\" alt=\"The National Archives office\" width=\"499\" height=\"333\"></picture></figure></div>"
     },
     {
       "name": "with alternative image sources with media queries",
@@ -240,7 +228,7 @@
           }
         ]
       },
-      "html": "<div class=\"tna-hero \"><figure class=\"tna-hero__figure\"><figcaption class=\"tna-hero__caption\"><details class=\"tna-hero__details\"><summary class=\"tna-hero__details-summary\" title=\"About this image\">About this <span class=\"tna-hero__details-summary-icon\">i</span>mage</summary><div class=\"tna-hero__information\">An interesting photo by a famous photographer ©2023</div></details></figcaption><picture class=\"tna-hero__image\"><source srcset=\"https://www.gstatic.com/webp/gallery/2.webp\" type=\"image/webp\" width=\"499\" height=\"333\" media=\"(max-width: 48em)\"><source srcset=\"https://www.nationalarchives.gov.uk/wp-content/uploads/sites/24/2023/07/tna-building-compress.jpg\" type=\"image/jpeg\" width=\"499\" height=\"333\"><img src=\"https://www.nationalarchives.gov.uk/wp-content/uploads/sites/24/2023/07/tna-building-compress.jpg\" alt=\"The National Archives office\" width=\"499\" height=\"333\"></picture></figure></div>"
+      "html": "<div class=\"tna-hero \"><figure class=\"tna-hero__figure\"><figcaption class=\"tna-hero__caption\"><details class=\"tna-hero__details\"><summary class=\"tna-hero__details-summary\" title=\"About this image\">About this <span class=\"tna-hero__details-summary-icon\">i</span>mage</summary><div class=\"tna-hero__information\">An interesting photo by a famous photographer ©2023</div></details></figcaption><picture class=\"tna-hero__image\"><source srcset=\"https://www.gstatic.com/webp/gallery/2.webp\" type=\"image/webp\" width=\"499\" height=\"333\" media=\"(max-width: 48em)\"><img src=\"https://www.nationalarchives.gov.uk/wp-content/uploads/sites/24/2023/07/tna-building-compress.jpg\" alt=\"The National Archives office\" width=\"499\" height=\"333\"></picture></figure></div>"
     },
     {
       "name": "with alternative image sources with different width/heights",
@@ -259,7 +247,7 @@
           }
         ]
       },
-      "html": "<div class=\"tna-hero \"><figure class=\"tna-hero__figure\"><figcaption class=\"tna-hero__caption\"><details class=\"tna-hero__details\"><summary class=\"tna-hero__details-summary\" title=\"About this image\">About this <span class=\"tna-hero__details-summary-icon\">i</span>mage</summary><div class=\"tna-hero__information\">An interesting photo by a famous photographer ©2023</div></details></figcaption><picture class=\"tna-hero__image\"><source srcset=\"https://www.gstatic.com/webp/gallery/2.webp\" type=\"image/webp\" width=\"550\" height=\"404\"><source srcset=\"https://www.nationalarchives.gov.uk/wp-content/uploads/sites/24/2023/07/tna-building-compress.jpg\" type=\"image/jpeg\" width=\"499\" height=\"333\"><img src=\"https://www.nationalarchives.gov.uk/wp-content/uploads/sites/24/2023/07/tna-building-compress.jpg\" alt=\"The National Archives office\" width=\"499\" height=\"333\"></picture></figure></div>"
+      "html": "<div class=\"tna-hero \"><figure class=\"tna-hero__figure\"><figcaption class=\"tna-hero__caption\"><details class=\"tna-hero__details\"><summary class=\"tna-hero__details-summary\" title=\"About this image\">About this <span class=\"tna-hero__details-summary-icon\">i</span>mage</summary><div class=\"tna-hero__information\">An interesting photo by a famous photographer ©2023</div></details></figcaption><picture class=\"tna-hero__image\"><source srcset=\"https://www.gstatic.com/webp/gallery/2.webp\" type=\"image/webp\" width=\"550\" height=\"404\"><img src=\"https://www.nationalarchives.gov.uk/wp-content/uploads/sites/24/2023/07/tna-building-compress.jpg\" alt=\"The National Archives office\" width=\"499\" height=\"333\"></picture></figure></div>"
     },
     {
       "name": "with classes",

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

@@ -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":"AAiMA,gUACE,yCACA,uCACA,uCACA,yCACA,yCACA,6BACA,6CACA,mCACA,6CACA,2CACA,uDACA,uDACA,mEAxJA,4CAJA,gCCgCA,wBDuIF,uEAEI,yCACA,uCACA,uCACA,yCACA,yCACA,6BACA,6CACA,mCACA,6CACA,2CACA,uDACA,uDACA,mEAjLF,4CAJA,iCAiMF,gBACE,qCA9LA,4CAJA,gCA6MF,6CACE,uCACA,qCACA,qCACA,uCACA,uCACA,2BACA,mCACA,iCACA,2CAlNA,4CAJA,gCE1BE,8EF6DE,iDEtDJ,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,eFDE,4CEOF,iCFrCF,iCAIA,2CEwCA,gCACE,kBACA,gBACA,kBACA,yBAGF,uBACE,YACA,eACA,4BAGA,kBACA,MACA,QACA,UCxGF,eD+GA,iBACE,kBACA,QACA,UAEA,qBACE,WACA,YAEA,iBAOF,uHAEE,WAEA,aACA,eAEA,cAEA,kBACA,QACA,SF1FJ,gDE+FE,4DACE,8CAGF,2DACE,+CAIA,mIAEE,cAIJ,yDACE,YAIJ,iBACE,kBACA,UAUF,yBACE,aFhIF,4CE2IA,iBACE,mBAGF,0CACE,kBACA,SAcF,mCACE,8CACA,iBACA,oBAEA,mBAEA,sBAGF,wCACE,cAEA,sBAGF,kCACE,SAGF,oCACE,UACA,mBAGF,0CACE,UD7JF,wBCiKE,kBACE,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,qBFwFJ,8BEnFE,gDFxPE,+CCEJ,mDC4PI,iBF9PA,8CEgQE,aAGF,yBACE,aFiEN,+BE7EE,gDFxPE,+CCEJ,oDC4PI,iBF9PA,8CEgQE,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  @include colour-border(\n    \"keyline\",\n    borders.$thick-border-width,\n    solid,\n    $direction\n  );\n}\n\n@mixin thick-keyline-dark($direction) {\n  @include colour-border(\n    \"keyline-dark\",\n    borders.$thick-border-width,\n    solid,\n    $direction\n  );\n}\n\n@mixin thick-keyline-accent($direction) {\n  @include colour-border(\n    \"accent-background\",\n    borders.$thick-border-width,\n    solid,\n    $direction\n  );\n}\n\n@mixin thick-keyline-error($direction) {\n  @include colour-border(\n    \"form-error\",\n    borders.$thick-border-width,\n    solid,\n    $direction\n  );\n}\n\n@mixin thick-keyline-brand($direction, $brandColour) {\n  border-#{$direction}: borders.$thick-border-width #{brand-colour($brandColour)}\n    solid;\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// 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%contrast {\n  --background: var(--contrast-background);\n  --font-base: var(--contrast-font-base);\n  --font-dark: var(--contrast-font-dark);\n  --font-light: var(--contrast-font-light);\n  --icon-light: var(--contrast-icon-light);\n  --link: var(--contrast-link);\n  --link-visited: var(--contrast-link-visited);\n  --keyline: var(--contrast-keyline);\n  --keyline-dark: var(--contrast-keyline-dark);\n  --button-text: var(--contrast-button-text);\n  --button-background: var(--contrast-button-background);\n  --button-hover-text: var(--contrast-button-hover-text);\n  --button-hover-background: var(--contrast-button-hover-background);\n\n  @include colour-background(\"background\");\n\n  @include colour-font(\"font-base\");\n}\n\n@mixin contrast {\n  @extend %contrast;\n}\n\n%contrast-on-mobile {\n  @include media.on-mobile {\n    --background: var(--contrast-background);\n    --font-base: var(--contrast-font-base);\n    --font-dark: var(--contrast-font-dark);\n    --font-light: var(--contrast-font-light);\n    --icon-light: var(--contrast-icon-light);\n    --link: var(--contrast-link);\n    --link-visited: var(--contrast-link-visited);\n    --keyline: var(--contrast-keyline);\n    --keyline-dark: var(--contrast-keyline-dark);\n    --button-text: var(--contrast-button-text);\n    --button-background: var(--contrast-button-background);\n    --button-hover-text: var(--contrast-button-hover-text);\n    --button-hover-background: var(--contrast-button-hover-background);\n\n    @include colour-background(\"background\");\n\n    @include colour-font(\"font-base\");\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\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\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-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  --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 %black-accent;\n  @extend %accent-lighter-text;\n}\n\n%pink-accent {\n  --accent-background: #{colour.brand-colour(\"maroon\")} !important;\n  --accent-background-light: #{colour.brand-colour(\"pastel-pink\")} !important;\n  --button-accent-background: #{colour.brand-colour(\"maroon\")} !important;\n}\n\n@mixin pink-accent {\n  @extend %pink-accent;\n  @extend %accent-lighter-text;\n}\n\n%orange-accent {\n  --accent-background: #{colour.brand-colour(\"chestnut\")} !important;\n  --accent-background-light: #{colour.brand-colour(\"pastel-orange\")} !important;\n  --button-accent-background: #{colour.brand-colour(\"chestnut\")} !important;\n}\n\n@mixin orange-accent {\n  @extend %orange-accent;\n  @extend %accent-lighter-text;\n}\n\n%green-accent {\n  --accent-background: #{colour.brand-colour(\"forest\")} !important;\n  --accent-background-light: #{colour.brand-colour(\"pastel-green\")} !important;\n  --button-accent-background: #{colour.brand-colour(\"forest\")} !important;\n}\n\n@mixin green-accent {\n  @extend %green-accent;\n  @extend %accent-lighter-text;\n}\n\n%blue-accent {\n  --accent-background: #{colour.brand-colour(\"navy\")} !important;\n  --accent-background-light: #{colour.brand-colour(\"pastel-blue\")} !important;\n  --button-accent-background: #{colour.brand-colour(\"navy\")} !important;\n}\n\n@mixin blue-accent {\n  @extend %blue-accent;\n  @extend %accent-lighter-text;\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$shift-units: 5 !default;\n\n.tna-hero {\n  &--contrast {\n    @include colour.contrast;\n  }\n\n  &--tint {\n    @include colour.tint;\n  }\n\n  &--accent {\n    @include colour.accent;\n\n    .tna-hgroup__supertitle:not(.tna-hgroup__supertitle--plain) {\n      @include colour.contrast;\n\n      @include colour.colour-border(\"contrast-background\");\n    }\n  }\n\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.relative-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(#{&}--accent):not(#{&}--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  &--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(#{&}--accent):not(#{&}--tint) &__content-inner {\n    @include colour.contrast;\n  }\n\n  &--split {\n  }\n\n  &--split:not(#{&}--accent):not(#{&}--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  @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 relative-font-size($font-size-px) {\n  font-size: #{math.div($font-size-px, typography.$relative-1rem-px)}rem;\n}\n\n@mixin main-font-weight {\n  font-weight: typography.$main-font-weight;\n}\n\n@mixin main-font-weight-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 relative-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 relative-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 relative-font-size($font-size-medium);\n      }\n\n      @if $small-and-tiny-identical != true {\n        @include media.on-small {\n          @include relative-font-size($font-size-small);\n        }\n\n        @include media.on-tiny {\n          @include relative-font-size($font-size-tiny);\n        }\n      } @else {\n        @include media.on-mobile {\n          @include relative-font-size($font-size-small);\n        }\n      }\n    } @else {\n      @include media.on-smaller-than-large {\n        @include relative-font-size($font-size-medium);\n      }\n    }\n  }\n}\n"]}
+{"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":"AAiMA,gUACE,yCACA,uCACA,uCACA,yCACA,yCACA,6BACA,6CACA,mCACA,6CACA,2CACA,uDACA,uDACA,mEAxJA,4CAJA,gCCgCA,wBDuIF,uEAEI,yCACA,uCACA,uCACA,yCACA,yCACA,6BACA,6CACA,mCACA,6CACA,2CACA,uDACA,uDACA,mEAjLF,4CAJA,iCAiMF,gBACE,qCA9LA,4CAJA,gCA6MF,6CACE,uCACA,qCACA,qCACA,uCACA,uCACA,2BACA,mCACA,iCACA,2CAlNA,4CAJA,gCE1BE,8EF6DE,iDEtDJ,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,eFDE,4CEOF,iCFrCF,iCAIA,2CEwCA,gCACE,kBACA,gBACA,kBACA,yBAGF,uBACE,YACA,eACA,4BAGA,kBACA,MACA,QACA,UCxGF,eD+GA,iBACE,kBACA,QACA,UAEA,qBACE,WACA,YAEA,iBAOF,uHAEE,WAEA,aACA,eAEA,cAEA,kBACA,QACA,SF1FJ,gDE+FE,4DACE,8CAGF,2DACE,+CAIA,mIAEE,cAIJ,yDACE,YAIJ,iBACE,kBACA,UAUF,yBACE,aFhIF,4CE2IA,iBACE,mBAGF,0CACE,kBACA,SAcF,mCACE,8CACA,iBACA,oBAEA,mBAEA,sBAGF,wCACE,cAEA,sBAGF,kCACE,SAGF,oCACE,UACA,mBAGF,0CACE,UD7JF,wBCiKE,kBACE,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,qBF6FJ,8BExFE,gDFxPE,+CCEJ,mDC4PI,iBF9PA,8CEgQE,aAGF,yBACE,aFsEN,+BElFE,gDFxPE,+CCEJ,oDC4PI,iBF9PA,8CEgQE,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  @include colour-border(\n    \"keyline\",\n    borders.$thick-border-width,\n    solid,\n    $direction\n  );\n}\n\n@mixin thick-keyline-dark($direction) {\n  @include colour-border(\n    \"keyline-dark\",\n    borders.$thick-border-width,\n    solid,\n    $direction\n  );\n}\n\n@mixin thick-keyline-accent($direction) {\n  @include colour-border(\n    \"accent-border\",\n    borders.$thick-border-width,\n    solid,\n    $direction\n  );\n}\n\n@mixin thick-keyline-error($direction) {\n  @include colour-border(\n    \"form-error\",\n    borders.$thick-border-width,\n    solid,\n    $direction\n  );\n}\n\n@mixin thick-keyline-brand($direction, $brandColour) {\n  border-#{$direction}: borders.$thick-border-width #{brand-colour($brandColour)}\n    solid;\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// 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%contrast {\n  --background: var(--contrast-background);\n  --font-base: var(--contrast-font-base);\n  --font-dark: var(--contrast-font-dark);\n  --font-light: var(--contrast-font-light);\n  --icon-light: var(--contrast-icon-light);\n  --link: var(--contrast-link);\n  --link-visited: var(--contrast-link-visited);\n  --keyline: var(--contrast-keyline);\n  --keyline-dark: var(--contrast-keyline-dark);\n  --button-text: var(--contrast-button-text);\n  --button-background: var(--contrast-button-background);\n  --button-hover-text: var(--contrast-button-hover-text);\n  --button-hover-background: var(--contrast-button-hover-background);\n\n  @include colour-background(\"background\");\n\n  @include colour-font(\"font-base\");\n}\n\n@mixin contrast {\n  @extend %contrast;\n}\n\n%contrast-on-mobile {\n  @include media.on-mobile {\n    --background: var(--contrast-background);\n    --font-base: var(--contrast-font-base);\n    --font-dark: var(--contrast-font-dark);\n    --font-light: var(--contrast-font-light);\n    --icon-light: var(--contrast-icon-light);\n    --link: var(--contrast-link);\n    --link-visited: var(--contrast-link-visited);\n    --keyline: var(--contrast-keyline);\n    --keyline-dark: var(--contrast-keyline-dark);\n    --button-text: var(--contrast-button-text);\n    --button-background: var(--contrast-button-background);\n    --button-hover-text: var(--contrast-button-hover-text);\n    --button-hover-background: var(--contrast-button-hover-background);\n\n    @include colour-background(\"background\");\n\n    @include colour-font(\"font-base\");\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\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\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(\"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  --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 %black-accent;\n  @extend %accent-lighter-text;\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  --button-accent-background: #{colour.brand-colour(\"maroon\")} !important;\n}\n\n@mixin pink-accent {\n  @extend %pink-accent;\n  @extend %accent-lighter-text;\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  --button-accent-background: #{colour.brand-colour(\"chestnut\")} !important;\n}\n\n@mixin orange-accent {\n  @extend %orange-accent;\n  @extend %accent-lighter-text;\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  --button-accent-background: #{colour.brand-colour(\"forest\")} !important;\n}\n\n@mixin green-accent {\n  @extend %green-accent;\n  @extend %accent-lighter-text;\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  --button-accent-background: #{colour.brand-colour(\"navy\")} !important;\n}\n\n@mixin blue-accent {\n  @extend %blue-accent;\n  @extend %accent-lighter-text;\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\n%hide-on-print {\n  @media print {\n    display: none;\n  }\n}\n\n@mixin hide-on-print() {\n  @extend %hide-on-print;\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$shift-units: 5 !default;\n\n.tna-hero {\n  &--contrast {\n    @include colour.contrast;\n  }\n\n  &--tint {\n    @include colour.tint;\n  }\n\n  &--accent {\n    @include colour.accent;\n\n    .tna-hgroup__supertitle:not(.tna-hgroup__supertitle--plain) {\n      @include colour.contrast;\n\n      @include colour.colour-border(\"contrast-background\");\n    }\n  }\n\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.relative-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(#{&}--accent):not(#{&}--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  &--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(#{&}--accent):not(#{&}--tint) &__content-inner {\n    @include colour.contrast;\n  }\n\n  &--split {\n  }\n\n  &--split:not(#{&}--accent):not(#{&}--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  @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 relative-font-size($font-size-px) {\n  font-size: #{math.div($font-size-px, typography.$relative-1rem-px)}rem;\n}\n\n@mixin main-font-weight {\n  font-weight: typography.$main-font-weight;\n}\n\n@mixin main-font-weight-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 relative-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 relative-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 relative-font-size($font-size-medium);\n      }\n\n      @if $small-and-tiny-identical != true {\n        @include media.on-small {\n          @include relative-font-size($font-size-small);\n        }\n\n        @include media.on-tiny {\n          @include relative-font-size($font-size-tiny);\n        }\n      } @else {\n        @include media.on-mobile {\n          @include relative-font-size($font-size-small);\n        }\n      }\n    } @else {\n      @include media.on-smaller-than-large {\n        @include relative-font-size($font-size-medium);\n      }\n    }\n  }\n}\n"]}

package/nationalarchives/components/hero/macro-options.json

@@ -60,12 +60,6 @@
     "required": true,
     "description": ""
   },
-  {
-    "name": "imageType",
-    "type": "string",
-    "required": false,
-    "description": ""
-  },
   {
     "name": "imageSources",
     "type": "array",

package/nationalarchives/components/hero/template.njk

@@ -25,12 +25,11 @@
     </figcaption>
     {%- endif %}
     <picture class="tna-hero__image">
-      {%- if params.imageSources %}
-      {%- for source in params.imageSources %}
+    {%- if params.imageSources %}
+    {%- for source in params.imageSources %}
       <source srcset="{{ source.src }}" type="{{ source.type }}" width="{{ source.width if source.width else params.imageWidth }}" height="{{ source.height if source.height else params.imageHeight }}"{% if source.media %} media="{{ source.media }}"{% endif %}>
-      {%- endfor %}
-      <source srcset="{{ params.imageSrc }}" type="{{ params.imageType if params.imageType else 'image/jpeg' }}" width="{{ params.imageWidth }}" height="{{ params.imageHeight }}">
-      {%- endif %}
+    {%- endfor %}
+    {%- endif %}
       <img src="{{ params.imageSrc }}" alt="{{ params.imageAlt }}" width="{{ params.imageWidth }}" height="{{ params.imageHeight }}">
     </picture>
     {%- if hasContent %}

package/nationalarchives/components/index-grid/fixtures.json

@@ -42,10 +42,12 @@
     {
       "name": "heading options",
       "options": {
+        "supertitle": "List",
         "title": "My dogs",
         "headingLevel": 2,
         "headingSize": "xl",
         "headingHref": "#",
+        "hrefClasses": "test",
         "items": [
           {
             "href": "#/category-0",
@@ -77,7 +79,7 @@
         "columnsSmall": 2,
         "columnsTiny": 1
       },
-      "html": "<nav class=\"tna-index-grid \" aria-label=\"My dogs\"><div class=\"tna-container\"><div class=\"tna-column tna-column--width-2-3 tna-column--width-5-6-medium tna-column--full-small tna-column--full-tiny\"><h2 class=\"tna-heading-xl tna-index-grid__heading\"><a href=\"#\">My dogs</a></h2></div></div><ul class=\"tna-index-grid__items tna-container\"><li class=\"tna-index-grid__item-wrapper tna-column tna-column--width-1-3 tna-column--width-1-3-medium tna-column--width-1-2-small tna-column--full-tiny\"><a href=\"#/category-0\" class=\"tna-index-grid__item\" title=\"Category #101\"><img src=\"https://picsum.photos/id/237/800/600\" class=\"tna-index-grid__item-image\" width=\"800\" height=\"600\" alt=\"Photo of a puppy\"><span class=\"tna-index-grid__item-content\"><span class=\"tna-index-grid__item-title\">Category #101</span></span></a></li><li class=\"tna-index-grid__item-wrapper tna-column tna-column--width-1-3 tna-column--width-1-3-medium tna-column--width-1-2-small tna-column--full-tiny\"><a href=\"#/category-1\" class=\"tna-index-grid__item\" title=\"Category #102\"><img src=\"https://picsum.photos/id/237/800/600\" class=\"tna-index-grid__item-image\" width=\"800\" height=\"600\" alt=\"Photo of a puppy\"><span class=\"tna-index-grid__item-content\"><span class=\"tna-index-grid__item-title\">Category #102</span></span></a></li><li class=\"tna-index-grid__item-wrapper tna-column tna-column--width-1-3 tna-column--width-1-3-medium tna-column--width-1-2-small tna-column--full-tiny\"><a href=\"#/category-2\" class=\"tna-index-grid__item\" title=\"Category #103\"><img src=\"https://picsum.photos/id/237/800/600\" class=\"tna-index-grid__item-image\" width=\"800\" height=\"600\" alt=\"Photo of a puppy\"><span class=\"tna-index-grid__item-content\"><span class=\"tna-index-grid__item-title\">Category #103</span></span></a></li></ul></nav>"
+      "html": "<nav class=\"tna-index-grid \" aria-label=\"My dogs\"><div class=\"tna-container\"><div class=\"tna-column tna-column--width-2-3 tna-column--width-5-6-medium tna-column--full-small tna-column--full-tiny\"><hgroup class=\"tna-hgroup-xl tna-index-grid__heading\"><h2 class=\"tna-hgroup__title\"><span class=\"tna-hgroup__supertitle\">List</span>My dogs</h2></hgroup></div></div><ul class=\"tna-index-grid__items tna-container\"><li class=\"tna-index-grid__item-wrapper tna-column tna-column--width-1-3 tna-column--width-1-3-medium tna-column--width-1-2-small tna-column--full-tiny\"><a href=\"#/category-0\" class=\"tna-index-grid__item\" title=\"Category #101\"><img src=\"https://picsum.photos/id/237/800/600\" class=\"tna-index-grid__item-image\" width=\"800\" height=\"600\" alt=\"Photo of a puppy\"><span class=\"tna-index-grid__item-content\"><span class=\"tna-index-grid__item-title\">Category #101</span></span></a></li><li class=\"tna-index-grid__item-wrapper tna-column tna-column--width-1-3 tna-column--width-1-3-medium tna-column--width-1-2-small tna-column--full-tiny\"><a href=\"#/category-1\" class=\"tna-index-grid__item\" title=\"Category #102\"><img src=\"https://picsum.photos/id/237/800/600\" class=\"tna-index-grid__item-image\" width=\"800\" height=\"600\" alt=\"Photo of a puppy\"><span class=\"tna-index-grid__item-content\"><span class=\"tna-index-grid__item-title\">Category #102</span></span></a></li><li class=\"tna-index-grid__item-wrapper tna-column tna-column--width-1-3 tna-column--width-1-3-medium tna-column--width-1-2-small tna-column--full-tiny\"><a href=\"#/category-2\" class=\"tna-index-grid__item\" title=\"Category #103\"><img src=\"https://picsum.photos/id/237/800/600\" class=\"tna-index-grid__item-image\" width=\"800\" height=\"600\" alt=\"Photo of a puppy\"><span class=\"tna-index-grid__item-content\"><span class=\"tna-index-grid__item-title\">Category #103</span></span></a></li></ul></nav>"
     },
     {
       "name": "with body",

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

@@ -1 +1 @@
-.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: rgb(140, 150, 148);--accent-background-light: #ededed;--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: #f4f4f4;--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: #f4f4f4;--contrast-font-base: rgb(1, 1, 1);--contrast-font-dark: rgb(1, 1, 1);--contrast-font-light: rgb(1, 1, 1);--contrast-icon-light: rgb(1 1 1/0.45);--contrast-link: #34d;--contrast-link-visited: #848;--contrast-keyline: rgb(1, 1, 1);--contrast-keyline-dark: rgb(1, 1, 1);--contrast-button-text: rgb(255, 255, 255);--contrast-button-background: rgb(1, 1, 1);--contrast-button-hover-text: rgb(1, 1, 1);--contrast-button-hover-background: rgb(255, 255, 255);--accent-background: rgb(140, 150, 148);--accent-background-light: #ededed;--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: rgb(140, 150, 148);--accent-background-light: #ededed;--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(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: rgb(140, 150, 148);--accent-background-light: #ededed;--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: rgb(140, 150, 148);--accent-background-light: #ededed;--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(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: rgb(140, 150, 148);--accent-background-light: #ededed;--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__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);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 */
+.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: #ededed;--accent-border: rgb(140, 150, 148);--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: #f4f4f4;--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: #f4f4f4;--contrast-font-base: rgb(1, 1, 1);--contrast-font-dark: rgb(1, 1, 1);--contrast-font-light: rgb(1, 1, 1);--contrast-icon-light: rgb(1 1 1/0.45);--contrast-link: #34d;--contrast-link-visited: #848;--contrast-keyline: rgb(1, 1, 1);--contrast-keyline-dark: rgb(1, 1, 1);--contrast-button-text: rgb(255, 255, 255);--contrast-button-background: rgb(1, 1, 1);--contrast-button-hover-text: rgb(1, 1, 1);--contrast-button-hover-background: rgb(255, 255, 255);--accent-background: #afb6b5;--accent-background-light: #ededed;--accent-border: rgb(140, 150, 148);--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: #ededed;--accent-border: rgb(140, 150, 148);--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(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: #ededed;--accent-border: rgb(140, 150, 148);--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: #ededed;--accent-border: rgb(140, 150, 148);--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(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: #ededed;--accent-border: rgb(140, 150, 148);--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__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);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 */

package/nationalarchives/components/index-grid/index-grid.css.map

@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["../../../../src/nationalarchives/tools/_colour.scss","../../../../src/nationalarchives/tools/_spacing.scss","../../../../src/nationalarchives/components/index-grid/index-grid.scss","../../../../src/nationalarchives/tools/_typography.scss","../../../../src/nationalarchives/variables/_typography.scss"],"names":[],"mappings":"AAiKA,+CApJM,2/CAyCJ,4CA8GA,+BAHF,+CApIM,66CA4IF,mCADF,sJAnJI,uiDAwJF,+DALF,sJAnII,giDA6IJ,kJA7JI,siDAgKF,+BAHF,kJA7II,giDA4JN,sBACE,yCACA,uCACA,uCACA,yCACA,yCACA,6BACA,6CACA,mCACA,6CACA,2CACA,uDACA,uDACA,mEAxJA,4CAJA,gCCxCF,uCACE,gBAEA,+DACE,aCFF,uBAGE,gBAEA,aACA,WAEA,gBAGF,sBAGE,YAEA,aACA,sBAEA,kBAEA,qBF0XF,8BEpYA,sBFyDI,+CAqUJ,+BE9XA,sBFyDI,+CEpCJ,4BACE,WACA,YAGF,8BACE,aAEA,OAGF,4BACE,kBACA,QACA,SAGF,4BACE,0BAGE,qLCRJ,0BACA,0BC/BsC,MF8CtC,+BFvBA,yCG5CA","file":"index-grid.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  @include colour-border(\n    \"keyline\",\n    borders.$thick-border-width,\n    solid,\n    $direction\n  );\n}\n\n@mixin thick-keyline-dark($direction) {\n  @include colour-border(\n    \"keyline-dark\",\n    borders.$thick-border-width,\n    solid,\n    $direction\n  );\n}\n\n@mixin thick-keyline-accent($direction) {\n  @include colour-border(\n    \"accent-background\",\n    borders.$thick-border-width,\n    solid,\n    $direction\n  );\n}\n\n@mixin thick-keyline-error($direction) {\n  @include colour-border(\n    \"form-error\",\n    borders.$thick-border-width,\n    solid,\n    $direction\n  );\n}\n\n@mixin thick-keyline-brand($direction, $brandColour) {\n  border-#{$direction}: borders.$thick-border-width #{brand-colour($brandColour)}\n    solid;\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// 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%contrast {\n  --background: var(--contrast-background);\n  --font-base: var(--contrast-font-base);\n  --font-dark: var(--contrast-font-dark);\n  --font-light: var(--contrast-font-light);\n  --icon-light: var(--contrast-icon-light);\n  --link: var(--contrast-link);\n  --link-visited: var(--contrast-link-visited);\n  --keyline: var(--contrast-keyline);\n  --keyline-dark: var(--contrast-keyline-dark);\n  --button-text: var(--contrast-button-text);\n  --button-background: var(--contrast-button-background);\n  --button-hover-text: var(--contrast-button-hover-text);\n  --button-hover-background: var(--contrast-button-hover-background);\n\n  @include colour-background(\"background\");\n\n  @include colour-font(\"font-base\");\n}\n\n@mixin contrast {\n  @extend %contrast;\n}\n\n%contrast-on-mobile {\n  @include media.on-mobile {\n    --background: var(--contrast-background);\n    --font-base: var(--contrast-font-base);\n    --font-dark: var(--contrast-font-dark);\n    --font-light: var(--contrast-font-light);\n    --icon-light: var(--contrast-icon-light);\n    --link: var(--contrast-link);\n    --link-visited: var(--contrast-link-visited);\n    --keyline: var(--contrast-keyline);\n    --keyline-dark: var(--contrast-keyline-dark);\n    --button-text: var(--contrast-button-text);\n    --button-background: var(--contrast-button-background);\n    --button-hover-text: var(--contrast-button-hover-text);\n    --button-hover-background: var(--contrast-button-hover-background);\n\n    @include colour-background(\"background\");\n\n    @include colour-font(\"font-base\");\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\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\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-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  --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 %black-accent;\n  @extend %accent-lighter-text;\n}\n\n%pink-accent {\n  --accent-background: #{colour.brand-colour(\"maroon\")} !important;\n  --accent-background-light: #{colour.brand-colour(\"pastel-pink\")} !important;\n  --button-accent-background: #{colour.brand-colour(\"maroon\")} !important;\n}\n\n@mixin pink-accent {\n  @extend %pink-accent;\n  @extend %accent-lighter-text;\n}\n\n%orange-accent {\n  --accent-background: #{colour.brand-colour(\"chestnut\")} !important;\n  --accent-background-light: #{colour.brand-colour(\"pastel-orange\")} !important;\n  --button-accent-background: #{colour.brand-colour(\"chestnut\")} !important;\n}\n\n@mixin orange-accent {\n  @extend %orange-accent;\n  @extend %accent-lighter-text;\n}\n\n%green-accent {\n  --accent-background: #{colour.brand-colour(\"forest\")} !important;\n  --accent-background-light: #{colour.brand-colour(\"pastel-green\")} !important;\n  --button-accent-background: #{colour.brand-colour(\"forest\")} !important;\n}\n\n@mixin green-accent {\n  @extend %green-accent;\n  @extend %accent-lighter-text;\n}\n\n%blue-accent {\n  --accent-background: #{colour.brand-colour(\"navy\")} !important;\n  --accent-background-light: #{colour.brand-colour(\"pastel-blue\")} !important;\n  --button-accent-background: #{colour.brand-colour(\"navy\")} !important;\n}\n\n@mixin blue-accent {\n  @extend %blue-accent;\n  @extend %accent-lighter-text;\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:map\";\n@use \"sass:math\";\n@use \"../variables/spacing\";\n@use \"../variables/typography\";\n@use \"../tools/media\";\n\n@function space($size) {\n  @return #{$size * spacing.$spacing-unit-px}px;\n}\n\n%space-above {\n  margin-top: space(2);\n\n  &:first-child {\n    margin-top: 0;\n  }\n}\n\n%space-only-above {\n  margin: #{space(2)} 0 0;\n\n  &:first-child {\n    margin-top: 0;\n  }\n}\n\n@mixin space-above($zero-other-margins: false) {\n  @if $zero-other-margins {\n    @extend %space-only-above;\n  } @else {\n    @extend %space-above;\n  }\n}\n\n@mixin no-spacing-generator($suffix: \"\") {\n  @if $suffix != \"\" {\n    $suffix: \"-\" + $suffix;\n  }\n  @each $property in margin, padding {\n    @each $direction in top, bottom {\n      $combined-direction: \"\";\n      @if $direction == top or $direction == bottom {\n        $combined-direction: vertical;\n      } @else if $direction == right or $direction == left {\n        $combined-direction: horizontal;\n      }\n      @if $combined-direction {\n        .tna-\\!--no-#{$property}-#{$direction}#{$suffix},\n        .tna-\\!--no-#{$property}-#{$combined-direction}#{$suffix} {\n          #{$property}-#{$direction}: 0 !important;\n        }\n      } @else {\n        .tna-\\!--no-#{$property}-#{$direction}#{$suffix} {\n          #{$property}-#{$direction}: 0 !important;\n        }\n      }\n    }\n  }\n}\n\n@mixin spacing-generator($suffix: \"\") {\n  @each $property in margin, padding {\n    @each $direction in top, bottom {\n      @each $size, $amount in spacing.$spacing {\n        @if $direction == all {\n          .tna-\\!--#{$property}-#{$size} {\n            #{$property}: #{space($amount)} !important;\n          }\n        } @else {\n          $combined-direction: \"\";\n          @if $direction == top or $direction == bottom {\n            $combined-direction: vertical;\n          } @else if $direction == right or $direction == left {\n            $combined-direction: horizontal;\n          }\n          @if $combined-direction {\n            .tna-\\!--#{$property}-#{$direction}-#{$size},\n            .tna-\\!--#{$property}-#{$combined-direction}-#{$size} {\n              #{$property}-#{$direction}: #{space($amount)} !important;\n            }\n          } @else {\n            .tna-\\!--#{$property}-#{$direction}-#{$size} {\n              #{$property}-#{$direction}: #{space($amount)} !important;\n            }\n          }\n        }\n      }\n    }\n  }\n\n  @include media.on-mobile {\n    @each $property in margin, padding {\n      @each $direction in top, bottom {\n        @each $size, $amount in spacing.$spacing-mobile {\n          @if $direction == all {\n            .tna-\\!--#{$property}-#{$size} {\n              #{$property}: #{space($amount)} !important;\n            }\n          } @else {\n            $combined-direction: \"\";\n            @if $direction == top or $direction == bottom {\n              $combined-direction: vertical;\n            } @else if $direction == right or $direction == left {\n              $combined-direction: horizontal;\n            }\n            @if $combined-direction {\n              .tna-\\!--#{$property}-#{$direction}-#{$size},\n              .tna-\\!--#{$property}-#{$combined-direction}-#{$size} {\n                #{$property}-#{$direction}: #{space($amount)} !important;\n              }\n            } @else {\n              .tna-\\!--#{$property}-#{$direction}-#{$size} {\n                #{$property}-#{$direction}: #{space($amount)} !important;\n              }\n            }\n          }\n        }\n      }\n    }\n  }\n}\n","@use \"sass:math\";\n@use \"../../tools/colour\";\n@use \"../../tools/media\";\n@use \"../../tools/spacing\";\n@use \"../../tools/typography\";\n\n.tna-index-grid {\n  @include spacing.space-above;\n\n  &__heading {\n  }\n\n  &__items {\n    @include spacing.space-above;\n\n    margin-bottom: 0;\n\n    display: flex;\n    gap: spacing.space(2) 0;\n\n    list-style: none;\n  }\n\n  &__item {\n    @include colour.contrast;\n\n    height: 100%;\n\n    display: flex;\n    flex-direction: column;\n\n    position: relative;\n\n    text-decoration: none;\n\n    .tna-background-contrast & {\n      @include colour.plain;\n    }\n\n    @include colour.on-high-contrast-and-forced-colours {\n      @include colour.colour-border(\"keyline-dark\", 1px);\n    }\n  }\n\n  &__item-image {\n    width: 100%;\n    height: auto;\n  }\n\n  &__item-content {\n    padding: spacing.space(1);\n\n    flex: 1;\n  }\n\n  &__item-label {\n    position: absolute;\n    top: spacing.space(0.5);\n    left: spacing.space(0.5);\n  }\n\n  &__item-title {\n    text-decoration: underline;\n\n    .tna-index-grid__item:hover & {\n      &,\n      &:link,\n      &:visited {\n        @include typography.interacted-text-decoration;\n      }\n    }\n  }\n\n  &__item-subtitle {\n    @include colour.colour-font(\"font-light\");\n    @include typography.relative-font-size(16);\n  }\n}\n","@use \"sass:math\";\n@use \"../variables/typography\";\n@use \"colour\";\n@use \"media\";\n\n@mixin relative-font-size($font-size-px) {\n  font-size: #{math.div($font-size-px, typography.$relative-1rem-px)}rem;\n}\n\n@mixin main-font-weight {\n  font-weight: typography.$main-font-weight;\n}\n\n@mixin main-font-weight-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 relative-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 relative-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 relative-font-size($font-size-medium);\n      }\n\n      @if $small-and-tiny-identical != true {\n        @include media.on-small {\n          @include relative-font-size($font-size-small);\n        }\n\n        @include media.on-tiny {\n          @include relative-font-size($font-size-tiny);\n        }\n      } @else {\n        @include media.on-mobile {\n          @include relative-font-size($font-size-small);\n        }\n      }\n    } @else {\n      @include media.on-smaller-than-large {\n        @include relative-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"]}
+{"version":3,"sourceRoot":"","sources":["../../../../src/nationalarchives/tools/_colour.scss","../../../../src/nationalarchives/tools/_spacing.scss","../../../../src/nationalarchives/components/index-grid/index-grid.scss","../../../../src/nationalarchives/tools/_typography.scss","../../../../src/nationalarchives/variables/_typography.scss"],"names":[],"mappings":"AAiKA,+CApJM,ohDAyCJ,4CA8GA,+BAHF,+CApIM,s8CA4IF,mCADF,sJAnJI,gkDAwJF,+DALF,sJAnII,yjDA6IJ,kJA7JI,+jDAgKF,+BAHF,kJA7II,yjDA4JN,sBACE,yCACA,uCACA,uCACA,yCACA,yCACA,6BACA,6CACA,mCACA,6CACA,2CACA,uDACA,uDACA,mEAxJA,4CAJA,gCCxCF,uCACE,gBAEA,+DACE,aCFF,uBAGE,gBAEA,aACA,WAEA,gBAGF,sBAGE,YAEA,aACA,sBAEA,kBAEA,qBF+XF,8BEzYA,sBFyDI,+CA0UJ,+BEnYA,sBFyDI,+CEpCJ,4BACE,WACA,YAGF,8BACE,aAEA,OAGF,4BACE,kBACA,QACA,SAGF,4BACE,0BAGE,qLCRJ,0BACA,0BC/BsC,MF8CtC,+BFvBA,yCG5CA","file":"index-grid.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  @include colour-border(\n    \"keyline\",\n    borders.$thick-border-width,\n    solid,\n    $direction\n  );\n}\n\n@mixin thick-keyline-dark($direction) {\n  @include colour-border(\n    \"keyline-dark\",\n    borders.$thick-border-width,\n    solid,\n    $direction\n  );\n}\n\n@mixin thick-keyline-accent($direction) {\n  @include colour-border(\n    \"accent-border\",\n    borders.$thick-border-width,\n    solid,\n    $direction\n  );\n}\n\n@mixin thick-keyline-error($direction) {\n  @include colour-border(\n    \"form-error\",\n    borders.$thick-border-width,\n    solid,\n    $direction\n  );\n}\n\n@mixin thick-keyline-brand($direction, $brandColour) {\n  border-#{$direction}: borders.$thick-border-width #{brand-colour($brandColour)}\n    solid;\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// 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%contrast {\n  --background: var(--contrast-background);\n  --font-base: var(--contrast-font-base);\n  --font-dark: var(--contrast-font-dark);\n  --font-light: var(--contrast-font-light);\n  --icon-light: var(--contrast-icon-light);\n  --link: var(--contrast-link);\n  --link-visited: var(--contrast-link-visited);\n  --keyline: var(--contrast-keyline);\n  --keyline-dark: var(--contrast-keyline-dark);\n  --button-text: var(--contrast-button-text);\n  --button-background: var(--contrast-button-background);\n  --button-hover-text: var(--contrast-button-hover-text);\n  --button-hover-background: var(--contrast-button-hover-background);\n\n  @include colour-background(\"background\");\n\n  @include colour-font(\"font-base\");\n}\n\n@mixin contrast {\n  @extend %contrast;\n}\n\n%contrast-on-mobile {\n  @include media.on-mobile {\n    --background: var(--contrast-background);\n    --font-base: var(--contrast-font-base);\n    --font-dark: var(--contrast-font-dark);\n    --font-light: var(--contrast-font-light);\n    --icon-light: var(--contrast-icon-light);\n    --link: var(--contrast-link);\n    --link-visited: var(--contrast-link-visited);\n    --keyline: var(--contrast-keyline);\n    --keyline-dark: var(--contrast-keyline-dark);\n    --button-text: var(--contrast-button-text);\n    --button-background: var(--contrast-button-background);\n    --button-hover-text: var(--contrast-button-hover-text);\n    --button-hover-background: var(--contrast-button-hover-background);\n\n    @include colour-background(\"background\");\n\n    @include colour-font(\"font-base\");\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\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\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(\"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  --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 %black-accent;\n  @extend %accent-lighter-text;\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  --button-accent-background: #{colour.brand-colour(\"maroon\")} !important;\n}\n\n@mixin pink-accent {\n  @extend %pink-accent;\n  @extend %accent-lighter-text;\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  --button-accent-background: #{colour.brand-colour(\"chestnut\")} !important;\n}\n\n@mixin orange-accent {\n  @extend %orange-accent;\n  @extend %accent-lighter-text;\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  --button-accent-background: #{colour.brand-colour(\"forest\")} !important;\n}\n\n@mixin green-accent {\n  @extend %green-accent;\n  @extend %accent-lighter-text;\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  --button-accent-background: #{colour.brand-colour(\"navy\")} !important;\n}\n\n@mixin blue-accent {\n  @extend %blue-accent;\n  @extend %accent-lighter-text;\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:map\";\n@use \"sass:math\";\n@use \"../variables/spacing\";\n@use \"../variables/typography\";\n@use \"../tools/media\";\n\n@function space($size) {\n  @return #{$size * spacing.$spacing-unit-px}px;\n}\n\n%space-above {\n  margin-top: space(2);\n\n  &:first-child {\n    margin-top: 0;\n  }\n}\n\n%space-only-above {\n  margin: #{space(2)} 0 0;\n\n  &:first-child {\n    margin-top: 0;\n  }\n}\n\n@mixin space-above($zero-other-margins: false) {\n  @if $zero-other-margins {\n    @extend %space-only-above;\n  } @else {\n    @extend %space-above;\n  }\n}\n\n@mixin no-spacing-generator($suffix: \"\") {\n  @if $suffix != \"\" {\n    $suffix: \"-\" + $suffix;\n  }\n  @each $property in margin, padding {\n    @each $direction in top, bottom {\n      $combined-direction: \"\";\n      @if $direction == top or $direction == bottom {\n        $combined-direction: vertical;\n      } @else if $direction == right or $direction == left {\n        $combined-direction: horizontal;\n      }\n      @if $combined-direction {\n        .tna-\\!--no-#{$property}-#{$direction}#{$suffix},\n        .tna-\\!--no-#{$property}-#{$combined-direction}#{$suffix} {\n          #{$property}-#{$direction}: 0 !important;\n        }\n      } @else {\n        .tna-\\!--no-#{$property}-#{$direction}#{$suffix} {\n          #{$property}-#{$direction}: 0 !important;\n        }\n      }\n    }\n  }\n}\n\n@mixin spacing-generator($suffix: \"\") {\n  @each $property in margin, padding {\n    @each $direction in top, bottom {\n      @each $size, $amount in spacing.$spacing {\n        @if $direction == all {\n          .tna-\\!--#{$property}-#{$size} {\n            #{$property}: #{space($amount)} !important;\n          }\n        } @else {\n          $combined-direction: \"\";\n          @if $direction == top or $direction == bottom {\n            $combined-direction: vertical;\n          } @else if $direction == right or $direction == left {\n            $combined-direction: horizontal;\n          }\n          @if $combined-direction {\n            .tna-\\!--#{$property}-#{$direction}-#{$size},\n            .tna-\\!--#{$property}-#{$combined-direction}-#{$size} {\n              #{$property}-#{$direction}: #{space($amount)} !important;\n            }\n          } @else {\n            .tna-\\!--#{$property}-#{$direction}-#{$size} {\n              #{$property}-#{$direction}: #{space($amount)} !important;\n            }\n          }\n        }\n      }\n    }\n  }\n\n  @include media.on-mobile {\n    @each $property in margin, padding {\n      @each $direction in top, bottom {\n        @each $size, $amount in spacing.$spacing-mobile {\n          @if $direction == all {\n            .tna-\\!--#{$property}-#{$size} {\n              #{$property}: #{space($amount)} !important;\n            }\n          } @else {\n            $combined-direction: \"\";\n            @if $direction == top or $direction == bottom {\n              $combined-direction: vertical;\n            } @else if $direction == right or $direction == left {\n              $combined-direction: horizontal;\n            }\n            @if $combined-direction {\n              .tna-\\!--#{$property}-#{$direction}-#{$size},\n              .tna-\\!--#{$property}-#{$combined-direction}-#{$size} {\n                #{$property}-#{$direction}: #{space($amount)} !important;\n              }\n            } @else {\n              .tna-\\!--#{$property}-#{$direction}-#{$size} {\n                #{$property}-#{$direction}: #{space($amount)} !important;\n              }\n            }\n          }\n        }\n      }\n    }\n  }\n}\n","@use \"sass:math\";\n@use \"../../tools/colour\";\n@use \"../../tools/media\";\n@use \"../../tools/spacing\";\n@use \"../../tools/typography\";\n\n.tna-index-grid {\n  @include spacing.space-above;\n\n  &__heading {\n  }\n\n  &__items {\n    @include spacing.space-above;\n\n    margin-bottom: 0;\n\n    display: flex;\n    gap: spacing.space(2) 0;\n\n    list-style: none;\n  }\n\n  &__item {\n    @include colour.contrast;\n\n    height: 100%;\n\n    display: flex;\n    flex-direction: column;\n\n    position: relative;\n\n    text-decoration: none;\n\n    .tna-background-contrast & {\n      @include colour.plain;\n    }\n\n    @include colour.on-high-contrast-and-forced-colours {\n      @include colour.colour-border(\"keyline-dark\", 1px);\n    }\n  }\n\n  &__item-image {\n    width: 100%;\n    height: auto;\n  }\n\n  &__item-content {\n    padding: spacing.space(1);\n\n    flex: 1;\n  }\n\n  &__item-label {\n    position: absolute;\n    top: spacing.space(0.5);\n    left: spacing.space(0.5);\n  }\n\n  &__item-title {\n    text-decoration: underline;\n\n    .tna-index-grid__item:hover & {\n      &,\n      &:link,\n      &:visited {\n        @include typography.interacted-text-decoration;\n      }\n    }\n  }\n\n  &__item-subtitle {\n    @include colour.colour-font(\"font-light\");\n    @include typography.relative-font-size(16);\n  }\n}\n","@use \"sass:math\";\n@use \"../variables/typography\";\n@use \"colour\";\n@use \"media\";\n\n@mixin relative-font-size($font-size-px) {\n  font-size: #{math.div($font-size-px, typography.$relative-1rem-px)}rem;\n}\n\n@mixin main-font-weight {\n  font-weight: typography.$main-font-weight;\n}\n\n@mixin main-font-weight-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 relative-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 relative-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 relative-font-size($font-size-medium);\n      }\n\n      @if $small-and-tiny-identical != true {\n        @include media.on-small {\n          @include relative-font-size($font-size-small);\n        }\n\n        @include media.on-tiny {\n          @include relative-font-size($font-size-tiny);\n        }\n      } @else {\n        @include media.on-mobile {\n          @include relative-font-size($font-size-small);\n        }\n      }\n    } @else {\n      @include media.on-smaller-than-large {\n        @include relative-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/index-grid/index-grid.stories.js

@@ -2,10 +2,13 @@ import IndexGrid from "./template.njk";
 import macroOptions from "./macro-options.json";
 
 const argTypes = {
+  supertitle: { control: "text" },
   title: { control: "text" },
   headingLevel: { control: { type: "number", min: 1, max: 6 } },
   headingSize: { control: "inline-radio", options: ["s", "m", "l", "xl"] },
-  headingHref: { control: "text" },
+  href: { control: "text" },
+  hrefClasses: { control: "text" },
+  hrefAttributes: { control: "object" },
   body: { control: "text" },
   text: { control: "text" },
   items: { control: "object" },
@@ -29,10 +32,13 @@ export default {
 };
 
 const Template = ({
+  supertitle,
   title,
   headingLevel,
   headingSize,
-  headingHref,
+  href,
+  hrefClasses,
+  hrefAttributes,
   body,
   text,
   items,
@@ -45,10 +51,13 @@ const Template = ({
 }) =>
   IndexGrid({
     params: {
+      supertitle,
       title,
       headingLevel,
       headingSize,
-      headingHref,
+      href,
+      hrefClasses,
+      hrefAttributes,
       body,
       text,
       items,

package/nationalarchives/components/index-grid/macro-options.json

@@ -1,4 +1,10 @@
 [
+  {
+    "name": "supertitle",
+    "type": "string",
+    "required": false,
+    "description": "The smaller title to display above the main index grid title."
+  },
   {
     "name": "title",
     "type": "string",
@@ -19,10 +25,22 @@
     "description": "The physical size of the index grid title (`xl`, `l`, `m` or `s`)."
   },
   {
-    "name": "headingHref",
+    "name": "href",
+    "type": "string",
+    "required": false,
+    "description": "A URL to use as a link in the grids heading."
+  },
+  {
+    "name": "hrefClasses",
     "type": "string",
     "required": false,
-    "description": "A URL to use as a link in the grid’s heading."
+    "description": "Classes to add to the elements of the index grid that use `href`."
+  },
+  {
+    "name": "hrefAttributes",
+    "type": "object",
+    "required": false,
+    "description": "HTML attributes (for example data attributes) to add to the elements of the index grid that use `href`."
   },
   {
     "name": "body",
@@ -116,6 +134,12 @@
     "required": false,
     "description": ""
   },
+  {
+    "name": "plainSupertitle",
+    "type": "boolean",
+    "required": false,
+    "description": "Use a plain supertitle, removing the accented background colour."
+  },
   {
     "name": "classes",
     "type": "string",

package/nationalarchives/components/index-grid/template.njk

@@ -3,13 +3,26 @@
   {%- if params.headingLevel > 0 %}
   <div class="tna-container">
     <div class="tna-column tna-column--width-2-3 tna-column--width-5-6-medium tna-column--full-small tna-column--full-tiny">
+    {%- if params.supertitle %}
+      <hgroup class="tna-hgroup-{{ params.headingSize or 'l' }} tna-index-grid__heading">
+        <h{{ params.headingLevel }} class="tna-hgroup__title">
+          <span class="tna-hgroup__supertitle{% if params.plainSupertitle %} tna-hgroup__supertitle--plain{% endif %}">{{ params.supertitle }}</span>
+          {%- if params.href %}
+          <a href="{{ params.href }}" class="tna-index-grid__heading-link{% if params.hrefClasses %} {{ params.hrefClasses }}{% endif %}" {%- for attribute, value in params.hrefAttributes %} {{ attribute }}="{{ value }}"{% endfor %}>{{ params.title }}</a>
+          {%- else %}
+          {{ params.title }}
+          {%- endif %}
+        </h{{ params.headingLevel }}>
+      </hgroup>
+    {%- else %}
       <h{{ params.headingLevel }} class="tna-heading-{{ params.headingSize or 'l' }} tna-index-grid__heading">
-        {%- if params.headingHref %}
-        <a href="{{ params.headingHref }}">{{ params.title }}</a>
+        {%- if params.href %}
+        <a href="{{ params.href }}" class="tna-index-grid__heading-link{% if params.hrefClasses %} {{ params.hrefClasses }}{% endif %}" {%- for attribute, value in params.hrefAttributes %} {{ attribute }}="{{ value }}"{% endfor %}>{{ params.title }}</a>
         {%- else %}
         {{ params.title }}
         {%- endif %}
       </h{{ params.headingLevel }}>
+    {%- endif %}
       {%- if params.text %}
         <p>{{ params.text }}</p>
       {%- else %}