@nationalarchives/frontend 0.1.52 → 0.1.53

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' }}>

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: rgb(217, 217, 214);--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(255 255 255/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: 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 */