@nationalarchives/frontend 0.1.52 → 0.1.54

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":"AA0MA,6KACE,yCACA,uCACA,uCACA,yCACA,yCACA,6BACA,6CACA,mCACA,6CACA,2CACA,uDACA,uDACA,mEAvKA,4CALA,gCCuCA,wBDgJF,uEAEI,yCACA,uCACA,uCACA,yCACA,yCACA,6BACA,6CACA,mCACA,6CACA,2CACA,uDACA,uDACA,mEAhMF,4CALA,iCAiNF,gBACE,qCA7MA,4CALA,gCA6NF,6CACE,uCACA,qCACA,qCACA,uCACA,uCACA,2BACA,mCACA,iCACA,2CAjOA,4CALA,gCEtBE,8EFiEE,iDE1DJ,kBACE,2CAKA,SACA,kBACA,oBAEA,aACA,qBAEA,kBAGF,mBACE,WAEA,kBACA,MACA,QACA,UAEA,iBAGF,mBACE,WAEA,iBAGF,2BACE,aACA,cAEA,kBACA,QACA,UACA,UAEA,YACA,kBACA,mBACA,gBFQE,4CEHF,mBAEA,eAEA,iCFvCF,iCAKA,2CEyCA,gCACE,kBACA,kBACA,gBACA,yBAGF,uBACE,YACA,eACA,4BAGA,kBACA,MACA,QACA,UCnGF,eD0GA,iBACE,WACA,YAEA,kBACA,QACA,UAEA,qBACE,WACA,YAEA,iBAOF,uHAEE,aACA,eAEA,cAEA,kBACA,QACA,SF5FJ,gDEgGI,WAGF,4DACE,8CAGF,2DACE,+CAIA,mIAEE,cAIJ,yDACE,YAIJ,iBACE,kBACA,UAUF,yBACE,aFpIF,4CE+IA,mBACE,mBAGF,4CACE,kBACA,SDnHF,wBCuHE,kBACE,gBACA,UAEA,sBAGF,mBACE,QAYF,uBACE,WACA,eAEA,OAGF,iBACE,gBAEA,QAEA,qBACE,YAIJ,iBACE,QAMF,yBACE,gBACA,eAGF,4CACE,gBAMF,gBACE,iBFkKJ,8BE7JE,gDFtLE,+CCCJ,mDC2LI,iBF5LA,8CE8LE,aAGF,yBACE,aF2IN,+BEvJE,gDFtLE,+CCCJ,oDC2LI,iBF5LA,8CE8LE,aAGF,yBACE","file":"hero.css","sourcesContent":["@use \"sass:map\";\n@use \"sass:list\";\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@mixin colour-font($colour, $important: false) {\n  color: var(--#{$colour}, #{map.get(colour.$colour-palette-default, $colour)})\n    if($important, !important, null);\n}\n\n@mixin colour-background($colour, $important: false) {\n  background-color: var(\n      --#{$colour},\n      #{map.get(colour.$colour-palette-default, $colour)}\n    )\n    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        var(--#{$colour}, #{map.get(colour.$colour-palette-default, $colour)})\n        $style\n        if($important, !important, null);\n    } @else {\n      border-#{$direction}-color: var(\n          --#{$colour},\n          #{map.get(colour.$colour-palette-default, $colour)}\n        )\n        if($important, !important, null);\n    }\n  } @else {\n    @if $width != \"\" {\n      border: $width\n        var(--#{$colour}, #{map.get(colour.$colour-palette-default, $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\n      var(--#{$colour}, #{map.get(colour.$colour-palette-default, $colour)})\n      $style\n      if($important, !important, null);\n  } @else {\n    outline-color: var(\n        --#{$colour},\n        #{map.get(colour.$colour-palette-default, $colour)}\n      )\n      if($important, !important, null);\n  }\n}\n\n@mixin colour-fill($colour, $important: false) {\n  fill: var(--#{$colour}, #{map.get(colour.$colour-palette-default, $colour)})\n    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(\"black\")} !important;\n  --button-accent-background: #{colour.brand-colour(\"yellow\")} !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 \"../../tools/colour\";\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    position: absolute;\n    top: 0;\n    right: 0;\n    z-index: 5;\n\n    overflow: visible;\n  }\n\n  &__details {\n    width: 100%;\n\n    overflow: visible;\n  }\n\n  &__details-summary {\n    width: 1.5rem;\n    height: 1.5rem;\n\n    position: absolute;\n    top: spacing.space(0.5);\n    right: spacing.space(0.5);\n    z-index: 2;\n\n    font-size: 0;\n    text-align: center;\n    line-height: 1.5rem;\n    list-style: none;\n\n    @include colour.accent;\n\n    @include colour.colour-border(\"background\", 4px);\n    border-radius: 100%;\n\n    cursor: pointer;\n\n    &:hover {\n      @include colour.colour-font(\"background\");\n\n      @include colour.colour-background(\"font-base\");\n    }\n  }\n\n  &__details-summary-icon {\n    font-size: 1.25rem;\n    font-style: normal;\n    font-weight: 700;\n    text-transform: lowercase;\n  }\n\n  &__information {\n    width: 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    width: 100%;\n    height: 100%;\n\n    position: absolute;\n    inset: 0;\n    z-index: 1;\n\n    img {\n      width: 100%;\n      height: 100%;\n\n      object-fit: cover;\n    }\n  }\n\n  &__details[open] &__details-summary {\n    @include colour.contrast;\n\n    &::before,\n    &::after {\n      width: 1.5rem;\n      height: 0.125rem;\n\n      display: block;\n\n      position: absolute;\n      top: 50%;\n      left: 50%;\n\n      @include colour.colour-background(\"font-dark\");\n\n      content: \"\";\n    }\n\n    &::before {\n      transform: translate(-50%, -50%) rotate(45deg);\n    }\n\n    &::after {\n      transform: translate(-50%, -50%) rotate(-45deg);\n    }\n\n    &:hover {\n      &::before,\n      &::after {\n        height: 0.25rem;\n      }\n    }\n\n    &-icon {\n      font-size: 0;\n    }\n  }\n\n  &__inner {\n    position: relative;\n    z-index: 4;\n  }\n\n  &: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  &--shifted {\n    margin-bottom: spacing.space($shift-units - $padding-units-bottom);\n  }\n\n  &--shifted &__content-inner {\n    position: relative;\n    top: spacing.space($shift-units);\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      width: auto;\n      max-width: none;\n\n      left: 0;\n    }\n\n    &__image {\n      position: static;\n\n      order: 1;\n\n      img {\n        height: auto;\n      }\n    }\n\n    &__inner {\n      order: 3;\n    }\n\n    &__content {\n    }\n\n    &__content-inner {\n      padding-right: 0;\n      padding-left: 0;\n    }\n\n    &--shifted &__content-inner {\n      position: static;\n    }\n\n    &__heading {\n    }\n\n    &__body {\n      margin-top: spacing.space(1);\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  @if $bold {\n    @include main-font-weight-bold;\n  } @else {\n    @include main-font-weight;\n  }\n  font-optical-sizing: auto;\n  font-style: normal;\n  font-variation-settings: \"wdth\" 100;\n}\n\n@mixin heading-font {\n  font-family: typography.$heading-font-family;\n  font-weight: typography.$heading-font-weight;\n}\n\n@mixin detail-font($bold: false) {\n  font-family: typography.$detail-font-family;\n  @if $bold {\n    font-weight: typography.$detail-font-weight-bold;\n  } @else {\n    font-weight: typography.$detail-font-weight;\n  }\n  font-optical-sizing: auto;\n  font-style: normal;\n}\n\n@mixin detail-font-small {\n  @include detail-font;\n  @include relative-font-size(14);\n  text-transform: uppercase;\n  line-height: 1.1;\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  @include relative-font-size($font-size-default);\n  line-height: $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\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":"AA0MA,gUACE,yCACA,uCACA,uCACA,yCACA,yCACA,6BACA,6CACA,mCACA,6CACA,2CACA,uDACA,uDACA,mEAvKA,4CALA,gCCuCA,wBDgJF,uEAEI,yCACA,uCACA,uCACA,yCACA,yCACA,6BACA,6CACA,mCACA,6CACA,2CACA,uDACA,uDACA,mEAhMF,4CALA,iCAiNF,gBACE,qCA7MA,4CALA,gCA6NF,6CACE,uCACA,qCACA,qCACA,uCACA,uCACA,2BACA,mCACA,iCACA,2CAjOA,4CALA,gCEnBE,8EF8DE,iDEvDJ,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,2DAMA,iCF5CF,iCAKA,2CE8CA,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,SFhGJ,gDEqGE,4DACE,8CAGF,2DACE,+CAIA,mIAEE,cAIJ,yDACE,YAIJ,iBACE,kBACA,UAUF,yBACE,aFtIF,4CEiJA,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,gBAEA,QAEA,qBACE,YAIJ,iBACE,QAMF,yBACE,gBACA,eAMF,gBACE,gBAGF,0CACE,gBAGF,mCACE,gBACA,cACA,iBAGF,oCACE,WACA,mBAGF,0CACE,iBACA,qBFuGJ,8BElGE,gDFjPE,+CCCJ,mDCsPI,iBFvPA,8CEyPE,aAGF,yBACE,aFgFN,+BE5FE,gDFjPE,+CCCJ,oDCsPI,iBFvPA,8CEyPE,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@mixin colour-font($colour, $important: false) {\n  color: var(--#{$colour}, #{map.get(colour.$colour-palette-default, $colour)})\n    if($important, !important, null);\n}\n\n@mixin colour-background($colour, $important: false) {\n  background-color: var(\n      --#{$colour},\n      #{map.get(colour.$colour-palette-default, $colour)}\n    )\n    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        var(--#{$colour}, #{map.get(colour.$colour-palette-default, $colour)})\n        $style\n        if($important, !important, null);\n    } @else {\n      border-#{$direction}-color: var(\n          --#{$colour},\n          #{map.get(colour.$colour-palette-default, $colour)}\n        )\n        if($important, !important, null);\n    }\n  } @else {\n    @if $width != \"\" {\n      border: $width\n        var(--#{$colour}, #{map.get(colour.$colour-palette-default, $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\n      var(--#{$colour}, #{map.get(colour.$colour-palette-default, $colour)})\n      $style\n      if($important, !important, null);\n  } @else {\n    outline-color: var(\n        --#{$colour},\n        #{map.get(colour.$colour-palette-default, $colour)}\n      )\n      if($important, !important, null);\n  }\n}\n\n@mixin colour-fill($colour, $important: false) {\n  fill: var(--#{$colour}, #{map.get(colour.$colour-palette-default, $colour)})\n    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      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 &__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/hero.scss

@@ -1,4 +1,7 @@
+@use "sass:math";
+
 @use "../../tools/colour";
+@use "../../tools/grid";
 @use "../../tools/media";
 @use "../../tools/spacing";
 @use "../../tools/typography";
@@ -45,12 +48,12 @@ $shift-units: 5 !default;
   &__caption {
     width: 100%;
 
+    overflow: visible;
+
     position: absolute;
     top: 0;
     right: 0;
     z-index: 5;
-
-    overflow: visible;
   }
 
   &__details {
@@ -69,17 +72,19 @@ $shift-units: 5 !default;
     z-index: 2;
 
     font-size: 0;
-    text-align: center;
     line-height: 1.5rem;
-    list-style: none;
+    text-align: center;
 
-    @include colour.accent;
+    list-style: none;
 
-    @include colour.colour-border("background", 4px);
     border-radius: 100%;
 
     cursor: pointer;
 
+    @include colour.accent;
+
+    @include colour.colour-border("background", 4px);
+
     &:hover {
       @include colour.colour-font("background");
 
@@ -89,8 +94,8 @@ $shift-units: 5 !default;
 
   &__details-summary-icon {
     font-size: 1.25rem;
-    font-style: normal;
     font-weight: 700;
+    font-style: normal;
     text-transform: lowercase;
   }
 
@@ -111,9 +116,6 @@ $shift-units: 5 !default;
   }
 
   &__image {
-    width: 100%;
-    height: 100%;
-
     position: absolute;
     inset: 0;
     z-index: 1;
@@ -131,6 +133,8 @@ $shift-units: 5 !default;
 
     &::before,
     &::after {
+      content: "";
+
       width: 1.5rem;
       height: 0.125rem;
 
@@ -141,8 +145,6 @@ $shift-units: 5 !default;
       left: 50%;
 
       @include colour.colour-background("font-dark");
-
-      content: "";
     }
 
     &::before {
@@ -189,15 +191,55 @@ $shift-units: 5 !default;
   &__body {
   }
 
-  &--shifted {
+  &--shift {
     margin-bottom: spacing.space($shift-units - $padding-units-bottom);
   }
 
-  &--shifted &__content-inner {
+  &--shift &__content-inner {
     position: relative;
     top: spacing.space($shift-units);
   }
 
+  &--shift:not(#{&}--accent):not(#{&}--tint) &__content-inner {
+    @include colour.contrast;
+  }
+
+  &--split {
+  }
+
+  &--split:not(#{&}--accent):not(#{&}--tint) {
+    @include colour.contrast;
+  }
+
+  &--split &__figure {
+    min-height: clamp(15rem, #{math.div(100vw, 3)}, 50rem);
+    padding-top: spacing.space(2);
+    padding-bottom: spacing.space(2);
+
+    align-items: center;
+
+    box-sizing: border-box;
+  }
+
+  &--split &__information {
+    max-width: 50%;
+
+    box-sizing: border-box;
+  }
+
+  &--split &__image {
+    left: 50%;
+  }
+
+  &--split &__content {
+    width: 50%;
+    padding-right: grid.gutter-width();
+  }
+
+  &--split &__content-inner {
+    padding: 0;
+  }
+
   @include media.on-mobile {
     &__figure {
       min-height: auto;
@@ -219,7 +261,8 @@ $shift-units: 5 !default;
     &__details-summary-icon {
     }
 
-    &__information {
+    &__information,
+    &--split &__information {
       width: auto;
       max-width: none;
 
@@ -248,16 +291,32 @@ $shift-units: 5 !default;
       padding-left: 0;
     }
 
-    &--shifted &__content-inner {
-      position: static;
-    }
-
     &__heading {
     }
 
     &__body {
       margin-top: spacing.space(1);
     }
+
+    &--shift &__content-inner {
+      position: static;
+    }
+
+    &--split &__figure {
+      min-height: auto;
+      padding-top: 0;
+      padding-bottom: 0;
+    }
+
+    &--split &__content {
+      width: 100%;
+      padding-right: grid.gutter-width-half();
+    }
+
+    &--split &__content-inner {
+      padding-top: spacing.space(2);
+      padding-bottom: spacing.space(2);
+    }
   }
 
   @include colour.on-high-contrast-and-forced-colours {

package/nationalarchives/components/hero/hero.stories.js

@@ -4,7 +4,12 @@ import { within, userEvent, expect } from "@storybook/test";
 import { customViewports } from "../../../../.storybook/viewports";
 
 const argTypes = {
-  content: { control: "text" },
+  supertitle: { control: "text" },
+  title: { control: "text" },
+  headingLevel: { control: { type: "number", min: 1, max: 6 } },
+  headingSize: { control: "inline-radio", options: ["s", "m", "l", "xl"] },
+  body: { control: "text" },
+  text: { control: "text" },
   imageSrc: { control: { type: "file", accept: ".jpg" } },
   imageAlt: { control: "text" },
   imageWidth: { control: { type: "number", min: 1 } },
@@ -16,7 +21,10 @@ const argTypes = {
     control: "inline-radio",
     options: ["none", "contrast", "tint", "accent"],
   },
-  shifted: { control: "boolean" },
+  layout: {
+    control: "inline-radio",
+    options: ["plain", "shift", "split"],
+  },
   classes: { control: "text" },
   attributes: { control: "object" },
 };
@@ -33,7 +41,12 @@ export default {
 };
 
 const Template = ({
-  content,
+  supertitle,
+  title,
+  headingLevel,
+  headingSize,
+  body,
+  text,
   imageSrc,
   imageAlt,
   imageWidth,
@@ -42,13 +55,18 @@ const Template = ({
   imageSources,
   imageCaption,
   style,
-  shifted,
+  layout,
   classes,
   attributes,
 }) =>
   Hero({
     params: {
-      content,
+      supertitle,
+      title,
+      headingLevel,
+      headingSize,
+      body,
+      text,
       imageSrc,
       imageAlt,
       imageWidth,
@@ -57,7 +75,7 @@ const Template = ({
       imageSources,
       imageCaption,
       style,
-      shifted,
+      layout,
       classes,
       attributes,
     },
@@ -65,7 +83,8 @@ const Template = ({
 
 export const Standard = Template.bind({});
 Standard.args = {
-  content: `<h1 class="tna-heading-xl">Title</h1><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>`,
+  title: "Title",
+  text: "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
   imageSrc:
     "https://www.nationalarchives.gov.uk/wp-content/uploads/sites/24/2023/07/tna-building-compress.jpg",
   imageAlt: "The National Archives office",
@@ -106,18 +125,15 @@ LargeContent.parameters = {
   chromatic: { disableSnapshot: true },
 };
 LargeContent.args = {
-  content: `<hgroup class="tna-hgroup-xl">
-  <p class="tna-hgroup__supertitle">Focus on</p>
-  <h1 class="tna-hgroup__title">‘Not acceptable’: Gay Switchboard’s attempts to become a charity</h1>
-</hgroup>
-<p class="tna-large-paragraph">Switchboard LGBT+ Helpline is one of the oldest telephone help services for lesbian, gay, bisexual, transgender and queer people in the UK. Despite high demand for its support, prejudice and laws meant Switchboard’s journey to register as a charity was not easy.</p>`,
+  supertitle: "Focus on",
+  title: "‘Not acceptable’: Gay Switchboard’s attempts to become a charity",
+  body: `<p class="tna-large-paragraph">Switchboard LGBT+ Helpline is one of the oldest telephone help services for lesbian, gay, bisexual, transgender and queer people in the UK. Despite high demand for its support, prejudice and laws meant Switchboard’s journey to register as a charity was not easy.</p>`,
   imageSrc:
     "https://www.nationalarchives.gov.uk/wp-content/uploads/sites/24/2023/07/tna-building-compress.jpg",
   imageAlt: "The National Archives office",
   imageWidth: 499,
   imageHeight: 333,
   imageCaption: "An interesting photo by a famous photographer ©2023",
-  style: "accent",
 };
 
 export const Accent = Template.bind({});
@@ -125,11 +141,9 @@ Accent.parameters = {
   chromatic: { disableSnapshot: true },
 };
 Accent.args = {
-  content: `<hgroup class="tna-hgroup-xl">
-  <p class="tna-hgroup__supertitle">Supertitle</p>
-  <h1 class="tna-hgroup__title">Title</h1>
-</hgroup>
-<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>`,
+  supertitle: "Supertitle",
+  title: "Title",
+  text: "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
   imageSrc:
     "https://www.nationalarchives.gov.uk/wp-content/uploads/sites/24/2023/07/tna-building-compress.jpg",
   imageAlt: "The National Archives office",
@@ -144,11 +158,9 @@ Contrast.parameters = {
   chromatic: { disableSnapshot: true },
 };
 Contrast.args = {
-  content: `<hgroup class="tna-hgroup-xl">
-  <p class="tna-hgroup__supertitle">Supertitle</p>
-  <h1 class="tna-hgroup__title">Title</h1>
-</hgroup>
-<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>`,
+  supertitle: "Supertitle",
+  title: "Title",
+  text: "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
   imageSrc:
     "https://www.nationalarchives.gov.uk/wp-content/uploads/sites/24/2023/07/tna-building-compress.jpg",
   imageAlt: "The National Archives office",
@@ -163,11 +175,9 @@ Tint.parameters = {
   chromatic: { disableSnapshot: true },
 };
 Tint.args = {
-  content: `<hgroup class="tna-hgroup-xl">
-  <p class="tna-hgroup__supertitle">Supertitle</p>
-  <h1 class="tna-hgroup__title">Title</h1>
-</hgroup>
-<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>`,
+  supertitle: "Supertitle",
+  title: "Title",
+  text: "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
   imageSrc:
     "https://www.nationalarchives.gov.uk/wp-content/uploads/sites/24/2023/07/tna-building-compress.jpg",
   imageAlt: "The National Archives office",
@@ -179,7 +189,22 @@ Tint.args = {
 
 export const Shifted = Template.bind({});
 Shifted.args = {
-  content: `<h1 class="tna-heading-xl">Title</h1><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>`,
+  title: "Title",
+  text: "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
+  imageSrc:
+    "https://www.nationalarchives.gov.uk/wp-content/uploads/sites/24/2023/07/tna-building-compress.jpg",
+  imageAlt: "The National Archives office",
+  imageWidth: 499,
+  imageHeight: 333,
+  imageCaption: "An interesting photo by a famous photographer ©2023",
+  style: "accent",
+  layout: "shift",
+};
+
+export const Split = Template.bind({});
+Split.args = {
+  title: "Title",
+  text: "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
   imageSrc:
     "https://www.nationalarchives.gov.uk/wp-content/uploads/sites/24/2023/07/tna-building-compress.jpg",
   imageAlt: "The National Archives office",
@@ -187,7 +212,7 @@ Shifted.args = {
   imageHeight: 333,
   imageCaption: "An interesting photo by a famous photographer ©2023",
   style: "accent",
-  shifted: true,
+  layout: "split",
 };
 
 export const CaptionWithNoHeading = Template.bind({});
@@ -208,7 +233,8 @@ Sources.parameters = {
   chromatic: { disableSnapshot: true },
 };
 Sources.args = {
-  content: `<h1 class="tna-heading-xl">Title</h1><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>`,
+  title: "Title",
+  text: "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
   imageSrc:
     "https://www.nationalarchives.gov.uk/wp-content/uploads/sites/24/2023/07/tna-building-compress.jpg",
   imageAlt: "The National Archives office",
@@ -235,7 +261,9 @@ Mobile.parameters = {
   },
 };
 Mobile.args = {
-  content: `<h1 class="tna-heading-xl">Title</h1><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>`,
+  supertitle: "Supertitle",
+  title: "Title",
+  text: "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
   imageSrc:
     "https://www.nationalarchives.gov.uk/wp-content/uploads/sites/24/2023/07/tna-building-compress.jpg",
   imageAlt: "The National Archives office",

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

@@ -1,6 +1,37 @@
 [
   {
-    "name": "content",
+    "name": "supertitle",
+    "type": "string",
+    "required": false,
+    "description": "The smaller title to display above the main hero title."
+  },
+  {
+    "name": "title",
+    "type": "string",
+    "required": false,
+    "description": "The main title of the hero. If set, then `headingLevel` also needs to be set."
+  },
+  {
+    "name": "headingLevel",
+    "type": "number",
+    "required": false,
+    "description": "The heading level which represents an element from `<h1>` through to `<h6>`. Default is `1`."
+  },
+  {
+    "name": "headingSize",
+    "type": "string",
+    "required": false,
+    "default": "m",
+    "description": "The physical size of the hero title (`xl`, `l`, `m` or `s`). Default is `xl`."
+  },
+  {
+    "name": "body",
+    "type": "string",
+    "required": false,
+    "description": ""
+  },
+  {
+    "name": "text",
     "type": "string",
     "required": false,
     "description": ""
@@ -86,8 +117,8 @@
     "description": "The style of hero to use. This can be `contrast`, `tint` or `accent`."
   },
   {
-    "name": "shifted",
-    "type": "boolean",
+    "name": "style",
+    "type": "string",
     "required": false,
     "description": ""
   },

package/nationalarchives/components/hero/template.njk

@@ -6,10 +6,13 @@
 {%- elseif params.style == "accent" -%}
   {%- set containerClasses = containerClasses.concat('tna-hero--accent') -%}
 {%- endif -%}
-{%- if params.shifted -%}
-  {%- set containerClasses = containerClasses.concat('tna-hero--shifted') -%}
+{%- if params.layout == "shift" -%}
+  {%- set containerClasses = containerClasses.concat('tna-hero--shift') -%}
+{%- elseif params.layout == "split" -%}
+  {%- set containerClasses = containerClasses.concat('tna-hero--split') -%}
 {%- endif -%}
-<{{ 'header' if params.content else 'div' }} class="tna-hero {{ containerClasses | join(' ') }}" {%- for attribute, value in params.attributes %} {{ attribute }}="{{ value }}"{% endfor %}>
+{% set hasContent = params.title or params.body or params.text %}
+<{{ 'header' if hasContent else 'div' }} class="tna-hero {{ containerClasses | join(' ') }}" {%- for attribute, value in params.attributes %} {{ attribute }}="{{ value }}"{% endfor %}>
   <figure class="tna-hero__figure">
     {%- if params.imageCaption %}
     <figcaption class="tna-hero__caption">
@@ -30,14 +33,32 @@
       {%- endif %}
       <img src="{{ params.imageSrc }}" alt="{{ params.imageAlt }}" width="{{ params.imageWidth }}" height="{{ params.imageHeight }}">
     </picture>
-    {%- if params.content %}
+    {%- if hasContent %}
     <div class="tna-container tna-hero__inner">
       <div class="tna-column tna-column--width-2-3 tna-column--full-small tna-column--full-tiny tna-hero__content">
         <div class="tna-hero__content-inner">
-          {{ params.content | safe }}
+          {%- if params.title %}
+          {%- if params.supertitle %}
+          <hgroup class="tna-hgroup-{{ params.headingSize or 'xl' }} tna-hero__heading">
+            <h{{ params.headingLevel or "1" }} class="tna-hgroup__title">
+              <span class="tna-hgroup__supertitle{% if params.plainSupertitle %} tna-hgroup__supertitle--plain{% endif %}">{{ params.supertitle }}</span>
+              {{ params.title }}
+            </h{{ params.headingLevel or "1" }}>
+          </hgroup>
+          {%- else %}
+          <h{{ params.headingLevel or "1" }} class="tna-heading-{{ params.headingSize or 'xl' }} tna-hero__heading">
+            {{ params.title }}
+          </h{{ params.headingLevel or "1" }}>
+          {%- endif %}
+          {%- endif %}
+          {%- if params.text %}
+            <p>{{ params.text }}</p>
+          {%- else %}
+            {{ params.body | safe }}
+          {%- endif %}
         </div>
       </div>
     </div>
     {%- endif %}
   </figure>
-</{{ 'header' if params.content else 'div' }}>
+</{{ 'header' if hasContent else 'div' }}>