@nationalarchives/frontend 0.1.48 → 0.1.49

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (142) hide show
  1. package/nationalarchives/all.css +1 -1
  2. package/nationalarchives/all.css.map +1 -1
  3. package/nationalarchives/all.js +1 -1
  4. package/nationalarchives/all.js.map +1 -1
  5. package/nationalarchives/analytics.js +1 -1
  6. package/nationalarchives/analytics.js.map +1 -1
  7. package/nationalarchives/analytics.mjs +4 -4
  8. package/nationalarchives/components/breadcrumbs/breadcrumbs.css +1 -1
  9. package/nationalarchives/components/breadcrumbs/breadcrumbs.css.map +1 -1
  10. package/nationalarchives/components/breadcrumbs/breadcrumbs.scss +6 -5
  11. package/nationalarchives/components/button/_button-group.scss +2 -2
  12. package/nationalarchives/components/button/button.css +1 -1
  13. package/nationalarchives/components/button/button.css.map +1 -1
  14. package/nationalarchives/components/button/button.scss +4 -3
  15. package/nationalarchives/components/card/card.css +1 -1
  16. package/nationalarchives/components/card/card.css.map +1 -1
  17. package/nationalarchives/components/card/card.scss +25 -23
  18. package/nationalarchives/components/checkboxes/checkboxes.css +1 -1
  19. package/nationalarchives/components/checkboxes/checkboxes.css.map +1 -1
  20. package/nationalarchives/components/checkboxes/checkboxes.scss +6 -5
  21. package/nationalarchives/components/compound-filters/compound-filters.css +1 -1
  22. package/nationalarchives/components/compound-filters/compound-filters.css.map +1 -1
  23. package/nationalarchives/components/compound-filters/compound-filters.scss +3 -3
  24. package/nationalarchives/components/cookie-banner/cookie-banner.css +1 -1
  25. package/nationalarchives/components/cookie-banner/cookie-banner.css.map +1 -1
  26. package/nationalarchives/components/cookie-banner/cookie-banner.scss +2 -2
  27. package/nationalarchives/components/cookie-banner/fixtures.json +10 -10
  28. package/nationalarchives/components/cookie-banner/template.njk +1 -1
  29. package/nationalarchives/components/date-input/date-input.css +1 -1
  30. package/nationalarchives/components/date-input/date-input.css.map +1 -1
  31. package/nationalarchives/components/date-input/date-input.scss +3 -2
  32. package/nationalarchives/components/date-search/date-search.css +1 -1
  33. package/nationalarchives/components/date-search/date-search.css.map +1 -1
  34. package/nationalarchives/components/date-search/date-search.scss +2 -1
  35. package/nationalarchives/components/error-summary/error-summary.css +1 -1
  36. package/nationalarchives/components/error-summary/error-summary.css.map +1 -1
  37. package/nationalarchives/components/error-summary/error-summary.scss +2 -2
  38. package/nationalarchives/components/featured-records/featured-records.css +1 -1
  39. package/nationalarchives/components/featured-records/featured-records.css.map +1 -1
  40. package/nationalarchives/components/featured-records/featured-records.scss +5 -5
  41. package/nationalarchives/components/footer/fixtures.json +2 -2
  42. package/nationalarchives/components/footer/footer.css +1 -1
  43. package/nationalarchives/components/footer/footer.css.map +1 -1
  44. package/nationalarchives/components/footer/footer.scss +22 -21
  45. package/nationalarchives/components/footer/footer.stories.js +1 -1
  46. package/nationalarchives/components/footer/template.njk +3 -3
  47. package/nationalarchives/components/gallery/gallery.css +1 -1
  48. package/nationalarchives/components/gallery/gallery.css.map +1 -1
  49. package/nationalarchives/components/gallery/gallery.scss +10 -10
  50. package/nationalarchives/components/global-header/fixtures.json +1 -2
  51. package/nationalarchives/components/global-header/global-header.css +1 -1
  52. package/nationalarchives/components/global-header/global-header.css.map +1 -1
  53. package/nationalarchives/components/global-header/global-header.js +1 -1
  54. package/nationalarchives/components/global-header/global-header.js.map +1 -1
  55. package/nationalarchives/components/global-header/global-header.mjs +1 -1
  56. package/nationalarchives/components/global-header/global-header.scss +39 -34
  57. package/nationalarchives/components/global-header/global-header.stories.js +0 -1
  58. package/nationalarchives/components/global-header/macro-options.json +0 -6
  59. package/nationalarchives/components/global-header/template.njk +0 -3
  60. package/nationalarchives/components/grid/grid.css +1 -1
  61. package/nationalarchives/components/grid/grid.css.map +1 -1
  62. package/nationalarchives/components/grid/grid.scss +16 -16
  63. package/nationalarchives/components/header/header.css +1 -1
  64. package/nationalarchives/components/header/header.css.map +1 -1
  65. package/nationalarchives/components/header/header.js +1 -1
  66. package/nationalarchives/components/header/header.js.map +1 -1
  67. package/nationalarchives/components/header/header.mjs +1 -1
  68. package/nationalarchives/components/header/header.scss +45 -44
  69. package/nationalarchives/components/hero/hero.css +1 -1
  70. package/nationalarchives/components/hero/hero.css.map +1 -1
  71. package/nationalarchives/components/hero/hero.scss +15 -9
  72. package/nationalarchives/components/index-grid/index-grid.css +1 -1
  73. package/nationalarchives/components/index-grid/index-grid.css.map +1 -1
  74. package/nationalarchives/components/index-grid/index-grid.scss +4 -4
  75. package/nationalarchives/components/message/message.css +1 -1
  76. package/nationalarchives/components/message/message.css.map +1 -1
  77. package/nationalarchives/components/message/message.scss +3 -3
  78. package/nationalarchives/components/pagination/pagination.css +1 -1
  79. package/nationalarchives/components/pagination/pagination.css.map +1 -1
  80. package/nationalarchives/components/pagination/pagination.scss +9 -9
  81. package/nationalarchives/components/phase-banner/phase-banner.css +1 -1
  82. package/nationalarchives/components/phase-banner/phase-banner.css.map +1 -1
  83. package/nationalarchives/components/phase-banner/phase-banner.scss +3 -2
  84. package/nationalarchives/components/picture/picture.css +1 -1
  85. package/nationalarchives/components/picture/picture.css.map +1 -1
  86. package/nationalarchives/components/picture/picture.scss +18 -17
  87. package/nationalarchives/components/quick-filters/quick-filters.css +1 -1
  88. package/nationalarchives/components/quick-filters/quick-filters.css.map +1 -1
  89. package/nationalarchives/components/quick-filters/quick-filters.scss +2 -2
  90. package/nationalarchives/components/radios/radios.css +1 -1
  91. package/nationalarchives/components/radios/radios.css.map +1 -1
  92. package/nationalarchives/components/radios/radios.scss +6 -5
  93. package/nationalarchives/components/search-field/search-field.css +1 -1
  94. package/nationalarchives/components/search-field/search-field.css.map +1 -1
  95. package/nationalarchives/components/search-field/search-field.scss +1 -1
  96. package/nationalarchives/components/search-filters/search-filters.css +1 -1
  97. package/nationalarchives/components/search-filters/search-filters.css.map +1 -1
  98. package/nationalarchives/components/search-filters/search-filters.scss +10 -10
  99. package/nationalarchives/components/select/select.css +1 -1
  100. package/nationalarchives/components/select/select.css.map +1 -1
  101. package/nationalarchives/components/select/select.scss +3 -2
  102. package/nationalarchives/components/sensitive-image/sensitive-image.css +1 -1
  103. package/nationalarchives/components/sensitive-image/sensitive-image.css.map +1 -1
  104. package/nationalarchives/components/sensitive-image/sensitive-image.scss +2 -1
  105. package/nationalarchives/components/skip-link/skip-link.css +1 -1
  106. package/nationalarchives/components/skip-link/skip-link.css.map +1 -1
  107. package/nationalarchives/components/skip-link/skip-link.scss +2 -1
  108. package/nationalarchives/components/tabs/tabs.css +1 -1
  109. package/nationalarchives/components/tabs/tabs.css.map +1 -1
  110. package/nationalarchives/components/tabs/tabs.scss +4 -4
  111. package/nationalarchives/components/text-input/text-input.css +1 -1
  112. package/nationalarchives/components/text-input/text-input.css.map +1 -1
  113. package/nationalarchives/components/text-input/text-input.scss +2 -1
  114. package/nationalarchives/components/textarea/textarea.css +1 -1
  115. package/nationalarchives/components/textarea/textarea.css.map +1 -1
  116. package/nationalarchives/components/textarea/textarea.scss +4 -3
  117. package/nationalarchives/global-header-package.css +1 -1
  118. package/nationalarchives/global-header-package.css.map +1 -1
  119. package/nationalarchives/global-header-package.scss +243 -33
  120. package/nationalarchives/prototype-kit.css +1 -1
  121. package/nationalarchives/prototype-kit.css.map +1 -1
  122. package/nationalarchives/stories/utilities/colour-schemes/colour-themes.stories.js +16 -17
  123. package/nationalarchives/templates/fixtures.json +4 -4
  124. package/nationalarchives/tools/_grid.scss +25 -0
  125. package/nationalarchives/tools/_media.scss +44 -21
  126. package/nationalarchives/tools/_spacing.scss +14 -16
  127. package/nationalarchives/tools/_typography.scss +48 -4
  128. package/nationalarchives/utilities/_a11y.scss +2 -1
  129. package/nationalarchives/utilities/_areas.scss +7 -7
  130. package/nationalarchives/utilities/_colour.scss +8 -11
  131. package/nationalarchives/utilities/_columns.scss +3 -3
  132. package/nationalarchives/utilities/_forms.scss +3 -3
  133. package/nationalarchives/utilities/_lists.scss +8 -8
  134. package/nationalarchives/utilities/_reset.scss +5 -0
  135. package/nationalarchives/utilities/_tables.scss +10 -10
  136. package/nationalarchives/utilities/_typography.scss +49 -61
  137. package/nationalarchives/variables/_colour.scss +6 -6
  138. package/nationalarchives/variables/_grid.scss +3 -3
  139. package/nationalarchives/variables/_media.scss +0 -37
  140. package/nationalarchives/variables/_spacing.scss +14 -12
  141. package/nationalarchives/variables/_typography.scss +26 -4
  142. package/package.json +1 -1
@@ -1,2 +1,2 @@
1
- !function(t,e){"object"==typeof exports&&"object"==typeof module?module.exports=e():"function"==typeof define&&define.amd?define("TNAFrontend",[],e):"object"==typeof exports?exports.TNAFrontend=e():t.TNAFrontend=e()}(self,(()=>(()=>{"use strict";var t={d:(e,n)=>{for(var i in n)t.o(n,i)&&!t.o(e,i)&&Object.defineProperty(e,i,{enumerable:!0,get:n[i]})},o:(t,e)=>Object.prototype.hasOwnProperty.call(t,e),r:t=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(t,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(t,"__esModule",{value:!0})}},e={};function n(t){return n="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(t){return typeof t}:function(t){return t&&"function"==typeof Symbol&&t.constructor===Symbol&&t!==Symbol.prototype?"symbol":typeof t},n(t)}function i(t,e){for(var n=0;n<e.length;n++){var i=e[n];i.enumerable=i.enumerable||!1,i.configurable=!0,"value"in i&&(i.writable=!0),Object.defineProperty(t,o(i.key),i)}}function o(t){var e=function(t,e){if("object"!=n(t)||!t)return t;var i=t[Symbol.toPrimitive];if(void 0!==i){var o=i.call(t,"string");if("object"!=n(o))return o;throw new TypeError("@@toPrimitive must return a primitive value.")}return String(t)}(t);return"symbol"==n(e)?e:String(e)}t.r(e),t.d(e,{Header:()=>a});var a=function(){function t(e){var n=this;!function(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}(this,t),this.$module=e,this.$toggleButton=e&&e.querySelector(".tna-header__navigation-toggle-button"),this.$navigation=e&&e.querySelector(".tna-header__navigation"),this.$links=e&&this.$navigation&&this.$navigation.querySelectorAll("[tabindex='0']"),this.menuOpened=!1,this.mql=window.matchMedia("(max-width: 768px)"),this.$module&&this.$toggleButton&&this.$navigation&&(this.$toggleButton.removeAttribute("hidden"),this.syncState(),this.$toggleButton.addEventListener("click",(function(){return n.handleToggleNavigation()})),"addEventListener"in this.mql?this.mql.addEventListener("change",(function(){return n.syncState()})):this.mql.addListener((function(){return n.syncState()})),this.$navigation.addEventListener("keyup",(function(t){"Escape"===t.code&&(n.menuOpened=!1,n.syncState(),n.$toggleButton.focus())})))}var e,n;return e=t,(n=[{key:"handleToggleNavigation",value:function(){this.menuOpened=!this.menuOpened,this.syncState()}},{key:"syncState",value:function(){this.mql.matches?this.menuOpened?this.show():this.hide():this.show()}},{key:"show",value:function(){this.$navigation.classList.add("tna-header__navigation--open"),this.$navigation.hidden=!1,this.$navigation.setAttribute("aria-hidden","false"),this.$toggleButton.setAttribute("aria-expanded","true"),this.$toggleButton.setAttribute("title","Close menu"),this.$toggleButton.classList.add("tna-header__navigation-toggle-button--opened");for(var t=0;t<this.$links.length;t++)this.$links[t].setAttribute("tabindex","0")}},{key:"hide",value:function(){this.$navigation.classList.remove("tna-header__navigation--open"),this.$navigation.hidden=!0,this.$navigation.setAttribute("aria-hidden","true"),this.$toggleButton.setAttribute("aria-expanded","false"),this.$toggleButton.setAttribute("title","Open menu"),this.$toggleButton.classList.remove("tna-header__navigation-toggle-button--opened");for(var t=0;t<this.$links.length;t++)this.$links[t].setAttribute("tabindex","-1")}}])&&i(e.prototype,n),Object.defineProperty(e,"prototype",{writable:!1}),t}();return e})()));
1
+ !function(t,e){"object"==typeof exports&&"object"==typeof module?module.exports=e():"function"==typeof define&&define.amd?define("TNAFrontend",[],e):"object"==typeof exports?exports.TNAFrontend=e():t.TNAFrontend=e()}(self,(()=>(()=>{"use strict";var t={d:(e,n)=>{for(var i in n)t.o(n,i)&&!t.o(e,i)&&Object.defineProperty(e,i,{enumerable:!0,get:n[i]})},o:(t,e)=>Object.prototype.hasOwnProperty.call(t,e),r:t=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(t,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(t,"__esModule",{value:!0})}},e={};function n(t){return n="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(t){return typeof t}:function(t){return t&&"function"==typeof Symbol&&t.constructor===Symbol&&t!==Symbol.prototype?"symbol":typeof t},n(t)}function i(t,e){for(var n=0;n<e.length;n++){var i=e[n];i.enumerable=i.enumerable||!1,i.configurable=!0,"value"in i&&(i.writable=!0),Object.defineProperty(t,o(i.key),i)}}function o(t){var e=function(t,e){if("object"!=n(t)||!t)return t;var i=t[Symbol.toPrimitive];if(void 0!==i){var o=i.call(t,"string");if("object"!=n(o))return o;throw new TypeError("@@toPrimitive must return a primitive value.")}return String(t)}(t);return"symbol"==n(e)?e:String(e)}t.r(e),t.d(e,{Header:()=>a});var a=function(){function t(e){var n=this;!function(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}(this,t),this.$module=e,this.$toggleButton=e&&e.querySelector(".tna-header__navigation-toggle-button"),this.$navigation=e&&e.querySelector(".tna-header__navigation"),this.$links=e&&this.$navigation&&this.$navigation.querySelectorAll("[tabindex='0']"),this.menuOpened=!1,this.mql=window.matchMedia("(max-width: 48em)"),this.$module&&this.$toggleButton&&this.$navigation&&(this.$toggleButton.removeAttribute("hidden"),this.syncState(),this.$toggleButton.addEventListener("click",(function(){return n.handleToggleNavigation()})),"addEventListener"in this.mql?this.mql.addEventListener("change",(function(){return n.syncState()})):this.mql.addListener((function(){return n.syncState()})),this.$navigation.addEventListener("keyup",(function(t){"Escape"===t.code&&(n.menuOpened=!1,n.syncState(),n.$toggleButton.focus())})))}var e,n;return e=t,(n=[{key:"handleToggleNavigation",value:function(){this.menuOpened=!this.menuOpened,this.syncState()}},{key:"syncState",value:function(){this.mql.matches?this.menuOpened?this.show():this.hide():this.show()}},{key:"show",value:function(){this.$navigation.classList.add("tna-header__navigation--open"),this.$navigation.hidden=!1,this.$navigation.setAttribute("aria-hidden","false"),this.$toggleButton.setAttribute("aria-expanded","true"),this.$toggleButton.setAttribute("title","Close menu"),this.$toggleButton.classList.add("tna-header__navigation-toggle-button--opened");for(var t=0;t<this.$links.length;t++)this.$links[t].setAttribute("tabindex","0")}},{key:"hide",value:function(){this.$navigation.classList.remove("tna-header__navigation--open"),this.$navigation.hidden=!0,this.$navigation.setAttribute("aria-hidden","true"),this.$toggleButton.setAttribute("aria-expanded","false"),this.$toggleButton.setAttribute("title","Open menu"),this.$toggleButton.classList.remove("tna-header__navigation-toggle-button--opened");for(var t=0;t<this.$links.length;t++)this.$links[t].setAttribute("tabindex","-1")}}])&&i(e.prototype,n),Object.defineProperty(e,"prototype",{writable:!1}),t}();return e})()));
2
2
  //# sourceMappingURL=header.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"components/header/header.js","mappings":"CAAA,SAA2CA,EAAMC,GAC1B,iBAAZC,SAA0C,iBAAXC,OACxCA,OAAOD,QAAUD,IACQ,mBAAXG,QAAyBA,OAAOC,IAC9CD,OAAO,cAAe,GAAIH,GACA,iBAAZC,QACdA,QAAqB,YAAID,IAEzBD,EAAkB,YAAIC,GACvB,CATD,CASGK,MAAM,I,mBCRT,IAAIC,EAAsB,CCA1BA,EAAwB,CAACL,EAASM,KACjC,IAAI,IAAIC,KAAOD,EACXD,EAAoBG,EAAEF,EAAYC,KAASF,EAAoBG,EAAER,EAASO,IAC5EE,OAAOC,eAAeV,EAASO,EAAK,CAAEI,YAAY,EAAMC,IAAKN,EAAWC,IAE1E,ECNDF,EAAwB,CAACQ,EAAKC,IAAUL,OAAOM,UAAUC,eAAeC,KAAKJ,EAAKC,GCClFT,EAAyBL,IACH,oBAAXkB,QAA0BA,OAAOC,aAC1CV,OAAOC,eAAeV,EAASkB,OAAOC,YAAa,CAAEC,MAAO,WAE7DX,OAAOC,eAAeV,EAAS,aAAc,CAAEoB,OAAO,GAAO,G,2sBCLvD,IAAMC,EAAM,WACjB,SAAAA,EAAYC,GAAS,IAAAC,EAAA,M,4FAAAC,CAAA,KAAAH,GACnBI,KAAKH,QAAUA,EACfG,KAAKC,cACHJ,GAAWA,EAAQK,cAAc,yCACnCF,KAAKG,YACHN,GAAWA,EAAQK,cAAc,2BACnCF,KAAKI,OACHP,GACAG,KAAKG,aACLH,KAAKG,YAAYE,iBAAiB,kBACpCL,KAAKM,YAAa,EAClBN,KAAKO,IAAMC,OAAOC,WAAW,sBAExBT,KAAKH,SAAYG,KAAKC,eAAkBD,KAAKG,cAIlDH,KAAKC,cAAcS,gBAAgB,UACnCV,KAAKW,YACLX,KAAKC,cAAcW,iBAAiB,SAAS,kBAC3Cd,EAAKe,wBAAwB,IAE3B,qBAAsBb,KAAKO,IAC7BP,KAAKO,IAAIK,iBAAiB,UAAU,kBAAMd,EAAKa,WAAW,IAE1DX,KAAKO,IAAIO,aAAY,kBAAMhB,EAAKa,WAAW,IAG7CX,KAAKG,YAAYS,iBAAiB,SAAS,SAACG,GAC3B,WAAXA,EAAEC,OACJlB,EAAKQ,YAAa,EAClBR,EAAKa,YACLb,EAAKG,cAAcgB,QAEvB,IACF,C,QA+CC,O,EA/CArB,G,EAAA,EAAAd,IAAA,yBAAAa,MAED,WACEK,KAAKM,YAAcN,KAAKM,WACxBN,KAAKW,WACP,GAAC,CAAA7B,IAAA,YAAAa,MAED,WACMK,KAAKO,IAAIW,QACPlB,KAAKM,WACPN,KAAKmB,OAELnB,KAAKoB,OAGPpB,KAAKmB,MAET,GAAC,CAAArC,IAAA,OAAAa,MAED,WACEK,KAAKG,YAAYkB,UAAUC,IAAI,gCAC/BtB,KAAKG,YAAYoB,QAAS,EAC1BvB,KAAKG,YAAYqB,aAAa,cAAe,SAC7CxB,KAAKC,cAAcuB,aAAa,gBAAiB,QACjDxB,KAAKC,cAAcuB,aAAa,QAAS,cACzCxB,KAAKC,cAAcoB,UAAUC,IAC3B,gDAGF,IAAK,IAAIG,EAAI,EAAGA,EAAIzB,KAAKI,OAAOsB,OAAQD,IACtCzB,KAAKI,OAAOqB,GAAGD,aAAa,WAAY,IAE5C,GAAC,CAAA1C,IAAA,OAAAa,MAED,WACEK,KAAKG,YAAYkB,UAAUM,OAAO,gCAClC3B,KAAKG,YAAYoB,QAAS,EAC1BvB,KAAKG,YAAYqB,aAAa,cAAe,QAC7CxB,KAAKC,cAAcuB,aAAa,gBAAiB,SACjDxB,KAAKC,cAAcuB,aAAa,QAAS,aACzCxB,KAAKC,cAAcoB,UAAUM,OAC3B,gDAGF,IAAK,IAAIF,EAAI,EAAGA,EAAIzB,KAAKI,OAAOsB,OAAQD,IACtCzB,KAAKI,OAAOqB,GAAGD,aAAa,WAAY,KAE5C,M,oEAAC5B,CAAA,CAnFgB,G","sources":["webpack://TNAFrontend/webpack/universalModuleDefinition","webpack://TNAFrontend/webpack/bootstrap","webpack://TNAFrontend/webpack/runtime/define property getters","webpack://TNAFrontend/webpack/runtime/hasOwnProperty shorthand","webpack://TNAFrontend/webpack/runtime/make namespace object","webpack://TNAFrontend/./src/nationalarchives/components/header/header.mjs"],"sourcesContent":["(function webpackUniversalModuleDefinition(root, factory) {\n\tif(typeof exports === 'object' && typeof module === 'object')\n\t\tmodule.exports = factory();\n\telse if(typeof define === 'function' && define.amd)\n\t\tdefine(\"TNAFrontend\", [], factory);\n\telse if(typeof exports === 'object')\n\t\texports[\"TNAFrontend\"] = factory();\n\telse\n\t\troot[\"TNAFrontend\"] = factory();\n})(self, () => {\nreturn ","// The require scope\nvar __webpack_require__ = {};\n\n","// define getter functions for harmony exports\n__webpack_require__.d = (exports, definition) => {\n\tfor(var key in definition) {\n\t\tif(__webpack_require__.o(definition, key) && !__webpack_require__.o(exports, key)) {\n\t\t\tObject.defineProperty(exports, key, { enumerable: true, get: definition[key] });\n\t\t}\n\t}\n};","__webpack_require__.o = (obj, prop) => (Object.prototype.hasOwnProperty.call(obj, prop))","// define __esModule on exports\n__webpack_require__.r = (exports) => {\n\tif(typeof Symbol !== 'undefined' && Symbol.toStringTag) {\n\t\tObject.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });\n\t}\n\tObject.defineProperty(exports, '__esModule', { value: true });\n};","export class Header {\n constructor($module) {\n this.$module = $module;\n this.$toggleButton =\n $module && $module.querySelector(\".tna-header__navigation-toggle-button\");\n this.$navigation =\n $module && $module.querySelector(\".tna-header__navigation\");\n this.$links =\n $module &&\n this.$navigation &&\n this.$navigation.querySelectorAll(\"[tabindex='0']\");\n this.menuOpened = false;\n this.mql = window.matchMedia(\"(max-width: 768px)\");\n\n if (!this.$module || !this.$toggleButton || !this.$navigation) {\n return;\n }\n\n this.$toggleButton.removeAttribute(\"hidden\");\n this.syncState();\n this.$toggleButton.addEventListener(\"click\", () =>\n this.handleToggleNavigation(),\n );\n if (\"addEventListener\" in this.mql) {\n this.mql.addEventListener(\"change\", () => this.syncState());\n } else {\n this.mql.addListener(() => this.syncState());\n }\n\n this.$navigation.addEventListener(\"keyup\", (e) => {\n if (e.code === \"Escape\") {\n this.menuOpened = false;\n this.syncState();\n this.$toggleButton.focus();\n }\n });\n }\n\n handleToggleNavigation() {\n this.menuOpened = !this.menuOpened;\n this.syncState();\n }\n\n syncState() {\n if (this.mql.matches) {\n if (this.menuOpened) {\n this.show();\n } else {\n this.hide();\n }\n } else {\n this.show();\n }\n }\n\n show() {\n this.$navigation.classList.add(\"tna-header__navigation--open\");\n this.$navigation.hidden = false;\n this.$navigation.setAttribute(\"aria-hidden\", \"false\");\n this.$toggleButton.setAttribute(\"aria-expanded\", \"true\");\n this.$toggleButton.setAttribute(\"title\", \"Close menu\");\n this.$toggleButton.classList.add(\n \"tna-header__navigation-toggle-button--opened\",\n );\n\n for (let i = 0; i < this.$links.length; i++) {\n this.$links[i].setAttribute(\"tabindex\", \"0\");\n }\n }\n\n hide() {\n this.$navigation.classList.remove(\"tna-header__navigation--open\");\n this.$navigation.hidden = true;\n this.$navigation.setAttribute(\"aria-hidden\", \"true\");\n this.$toggleButton.setAttribute(\"aria-expanded\", \"false\");\n this.$toggleButton.setAttribute(\"title\", \"Open menu\");\n this.$toggleButton.classList.remove(\n \"tna-header__navigation-toggle-button--opened\",\n );\n\n for (let i = 0; i < this.$links.length; i++) {\n this.$links[i].setAttribute(\"tabindex\", \"-1\");\n }\n }\n}\n"],"names":["root","factory","exports","module","define","amd","self","__webpack_require__","definition","key","o","Object","defineProperty","enumerable","get","obj","prop","prototype","hasOwnProperty","call","Symbol","toStringTag","value","Header","$module","_this","_classCallCheck","this","$toggleButton","querySelector","$navigation","$links","querySelectorAll","menuOpened","mql","window","matchMedia","removeAttribute","syncState","addEventListener","handleToggleNavigation","addListener","e","code","focus","matches","show","hide","classList","add","hidden","setAttribute","i","length","remove"],"sourceRoot":""}
1
+ {"version":3,"file":"components/header/header.js","mappings":"CAAA,SAA2CA,EAAMC,GAC1B,iBAAZC,SAA0C,iBAAXC,OACxCA,OAAOD,QAAUD,IACQ,mBAAXG,QAAyBA,OAAOC,IAC9CD,OAAO,cAAe,GAAIH,GACA,iBAAZC,QACdA,QAAqB,YAAID,IAEzBD,EAAkB,YAAIC,GACvB,CATD,CASGK,MAAM,I,mBCRT,IAAIC,EAAsB,CCA1BA,EAAwB,CAACL,EAASM,KACjC,IAAI,IAAIC,KAAOD,EACXD,EAAoBG,EAAEF,EAAYC,KAASF,EAAoBG,EAAER,EAASO,IAC5EE,OAAOC,eAAeV,EAASO,EAAK,CAAEI,YAAY,EAAMC,IAAKN,EAAWC,IAE1E,ECNDF,EAAwB,CAACQ,EAAKC,IAAUL,OAAOM,UAAUC,eAAeC,KAAKJ,EAAKC,GCClFT,EAAyBL,IACH,oBAAXkB,QAA0BA,OAAOC,aAC1CV,OAAOC,eAAeV,EAASkB,OAAOC,YAAa,CAAEC,MAAO,WAE7DX,OAAOC,eAAeV,EAAS,aAAc,CAAEoB,OAAO,GAAO,G,2sBCLvD,IAAMC,EAAM,WACjB,SAAAA,EAAYC,GAAS,IAAAC,EAAA,M,4FAAAC,CAAA,KAAAH,GACnBI,KAAKH,QAAUA,EACfG,KAAKC,cACHJ,GAAWA,EAAQK,cAAc,yCACnCF,KAAKG,YACHN,GAAWA,EAAQK,cAAc,2BACnCF,KAAKI,OACHP,GACAG,KAAKG,aACLH,KAAKG,YAAYE,iBAAiB,kBACpCL,KAAKM,YAAa,EAClBN,KAAKO,IAAMC,OAAOC,WAAW,qBAExBT,KAAKH,SAAYG,KAAKC,eAAkBD,KAAKG,cAIlDH,KAAKC,cAAcS,gBAAgB,UACnCV,KAAKW,YACLX,KAAKC,cAAcW,iBAAiB,SAAS,kBAC3Cd,EAAKe,wBAAwB,IAE3B,qBAAsBb,KAAKO,IAC7BP,KAAKO,IAAIK,iBAAiB,UAAU,kBAAMd,EAAKa,WAAW,IAE1DX,KAAKO,IAAIO,aAAY,kBAAMhB,EAAKa,WAAW,IAG7CX,KAAKG,YAAYS,iBAAiB,SAAS,SAACG,GAC3B,WAAXA,EAAEC,OACJlB,EAAKQ,YAAa,EAClBR,EAAKa,YACLb,EAAKG,cAAcgB,QAEvB,IACF,C,QA+CC,O,EA/CArB,G,EAAA,EAAAd,IAAA,yBAAAa,MAED,WACEK,KAAKM,YAAcN,KAAKM,WACxBN,KAAKW,WACP,GAAC,CAAA7B,IAAA,YAAAa,MAED,WACMK,KAAKO,IAAIW,QACPlB,KAAKM,WACPN,KAAKmB,OAELnB,KAAKoB,OAGPpB,KAAKmB,MAET,GAAC,CAAArC,IAAA,OAAAa,MAED,WACEK,KAAKG,YAAYkB,UAAUC,IAAI,gCAC/BtB,KAAKG,YAAYoB,QAAS,EAC1BvB,KAAKG,YAAYqB,aAAa,cAAe,SAC7CxB,KAAKC,cAAcuB,aAAa,gBAAiB,QACjDxB,KAAKC,cAAcuB,aAAa,QAAS,cACzCxB,KAAKC,cAAcoB,UAAUC,IAC3B,gDAGF,IAAK,IAAIG,EAAI,EAAGA,EAAIzB,KAAKI,OAAOsB,OAAQD,IACtCzB,KAAKI,OAAOqB,GAAGD,aAAa,WAAY,IAE5C,GAAC,CAAA1C,IAAA,OAAAa,MAED,WACEK,KAAKG,YAAYkB,UAAUM,OAAO,gCAClC3B,KAAKG,YAAYoB,QAAS,EAC1BvB,KAAKG,YAAYqB,aAAa,cAAe,QAC7CxB,KAAKC,cAAcuB,aAAa,gBAAiB,SACjDxB,KAAKC,cAAcuB,aAAa,QAAS,aACzCxB,KAAKC,cAAcoB,UAAUM,OAC3B,gDAGF,IAAK,IAAIF,EAAI,EAAGA,EAAIzB,KAAKI,OAAOsB,OAAQD,IACtCzB,KAAKI,OAAOqB,GAAGD,aAAa,WAAY,KAE5C,M,oEAAC5B,CAAA,CAnFgB,G","sources":["webpack://TNAFrontend/webpack/universalModuleDefinition","webpack://TNAFrontend/webpack/bootstrap","webpack://TNAFrontend/webpack/runtime/define property getters","webpack://TNAFrontend/webpack/runtime/hasOwnProperty shorthand","webpack://TNAFrontend/webpack/runtime/make namespace object","webpack://TNAFrontend/./src/nationalarchives/components/header/header.mjs"],"sourcesContent":["(function webpackUniversalModuleDefinition(root, factory) {\n\tif(typeof exports === 'object' && typeof module === 'object')\n\t\tmodule.exports = factory();\n\telse if(typeof define === 'function' && define.amd)\n\t\tdefine(\"TNAFrontend\", [], factory);\n\telse if(typeof exports === 'object')\n\t\texports[\"TNAFrontend\"] = factory();\n\telse\n\t\troot[\"TNAFrontend\"] = factory();\n})(self, () => {\nreturn ","// The require scope\nvar __webpack_require__ = {};\n\n","// define getter functions for harmony exports\n__webpack_require__.d = (exports, definition) => {\n\tfor(var key in definition) {\n\t\tif(__webpack_require__.o(definition, key) && !__webpack_require__.o(exports, key)) {\n\t\t\tObject.defineProperty(exports, key, { enumerable: true, get: definition[key] });\n\t\t}\n\t}\n};","__webpack_require__.o = (obj, prop) => (Object.prototype.hasOwnProperty.call(obj, prop))","// define __esModule on exports\n__webpack_require__.r = (exports) => {\n\tif(typeof Symbol !== 'undefined' && Symbol.toStringTag) {\n\t\tObject.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });\n\t}\n\tObject.defineProperty(exports, '__esModule', { value: true });\n};","export class Header {\n constructor($module) {\n this.$module = $module;\n this.$toggleButton =\n $module && $module.querySelector(\".tna-header__navigation-toggle-button\");\n this.$navigation =\n $module && $module.querySelector(\".tna-header__navigation\");\n this.$links =\n $module &&\n this.$navigation &&\n this.$navigation.querySelectorAll(\"[tabindex='0']\");\n this.menuOpened = false;\n this.mql = window.matchMedia(\"(max-width: 48em)\");\n\n if (!this.$module || !this.$toggleButton || !this.$navigation) {\n return;\n }\n\n this.$toggleButton.removeAttribute(\"hidden\");\n this.syncState();\n this.$toggleButton.addEventListener(\"click\", () =>\n this.handleToggleNavigation(),\n );\n if (\"addEventListener\" in this.mql) {\n this.mql.addEventListener(\"change\", () => this.syncState());\n } else {\n this.mql.addListener(() => this.syncState());\n }\n\n this.$navigation.addEventListener(\"keyup\", (e) => {\n if (e.code === \"Escape\") {\n this.menuOpened = false;\n this.syncState();\n this.$toggleButton.focus();\n }\n });\n }\n\n handleToggleNavigation() {\n this.menuOpened = !this.menuOpened;\n this.syncState();\n }\n\n syncState() {\n if (this.mql.matches) {\n if (this.menuOpened) {\n this.show();\n } else {\n this.hide();\n }\n } else {\n this.show();\n }\n }\n\n show() {\n this.$navigation.classList.add(\"tna-header__navigation--open\");\n this.$navigation.hidden = false;\n this.$navigation.setAttribute(\"aria-hidden\", \"false\");\n this.$toggleButton.setAttribute(\"aria-expanded\", \"true\");\n this.$toggleButton.setAttribute(\"title\", \"Close menu\");\n this.$toggleButton.classList.add(\n \"tna-header__navigation-toggle-button--opened\",\n );\n\n for (let i = 0; i < this.$links.length; i++) {\n this.$links[i].setAttribute(\"tabindex\", \"0\");\n }\n }\n\n hide() {\n this.$navigation.classList.remove(\"tna-header__navigation--open\");\n this.$navigation.hidden = true;\n this.$navigation.setAttribute(\"aria-hidden\", \"true\");\n this.$toggleButton.setAttribute(\"aria-expanded\", \"false\");\n this.$toggleButton.setAttribute(\"title\", \"Open menu\");\n this.$toggleButton.classList.remove(\n \"tna-header__navigation-toggle-button--opened\",\n );\n\n for (let i = 0; i < this.$links.length; i++) {\n this.$links[i].setAttribute(\"tabindex\", \"-1\");\n }\n }\n}\n"],"names":["root","factory","exports","module","define","amd","self","__webpack_require__","definition","key","o","Object","defineProperty","enumerable","get","obj","prop","prototype","hasOwnProperty","call","Symbol","toStringTag","value","Header","$module","_this","_classCallCheck","this","$toggleButton","querySelector","$navigation","$links","querySelectorAll","menuOpened","mql","window","matchMedia","removeAttribute","syncState","addEventListener","handleToggleNavigation","addListener","e","code","focus","matches","show","hide","classList","add","hidden","setAttribute","i","length","remove"],"sourceRoot":""}
@@ -10,7 +10,7 @@ export class Header {
10
10
  this.$navigation &&
11
11
  this.$navigation.querySelectorAll("[tabindex='0']");
12
12
  this.menuOpened = false;
13
- this.mql = window.matchMedia("(max-width: 768px)");
13
+ this.mql = window.matchMedia("(max-width: 48em)");
14
14
 
15
15
  if (!this.$module || !this.$toggleButton || !this.$navigation) {
16
16
  return;
@@ -1,9 +1,10 @@
1
1
  @use "sass:math";
2
2
  @use "../../variables/colour" as colourVars; // TODO
3
- @use "../../variables/grid" as gridVars;
4
3
  @use "../../tools/colour";
5
- @use "../../tools/typography";
4
+ @use "../../tools/grid";
6
5
  @use "../../tools/media";
6
+ @use "../../tools/spacing";
7
+ @use "../../tools/typography";
7
8
 
8
9
  .tna-header {
9
10
  @include colour.contrast;
@@ -20,7 +21,7 @@
20
21
  );
21
22
  }
22
23
 
23
- .tna-template--system-theme {
24
+ .tna-template--system-theme & {
24
25
  @media (prefers-color-scheme: light) {
25
26
  background: linear-gradient(
26
27
  0deg,
@@ -31,8 +32,8 @@
31
32
  }
32
33
 
33
34
  &__exit {
34
- padding-top: 0.5rem;
35
- padding-bottom: 0.5rem;
35
+ padding-top: spacing.space(0.5);
36
+ padding-bottom: spacing.space(0.5);
36
37
 
37
38
  text-align: right;
38
39
 
@@ -54,7 +55,7 @@
54
55
  }
55
56
 
56
57
  .fa-solid {
57
- margin-left: 0.5rem;
58
+ margin-left: spacing.space(0.5);
58
59
  }
59
60
  }
60
61
 
@@ -65,8 +66,8 @@
65
66
  }
66
67
 
67
68
  &__logo {
68
- padding-top: 1.5rem;
69
- padding-bottom: 1.5rem;
69
+ padding-top: spacing.space(1.5);
70
+ padding-bottom: spacing.space(1.5);
70
71
  }
71
72
 
72
73
  &__logo-link {
@@ -100,7 +101,7 @@
100
101
  }
101
102
 
102
103
  &__logo-strapline {
103
- margin: 0 0.75rem;
104
+ margin: 0 spacing.space(0.75);
104
105
 
105
106
  display: inline-block;
106
107
 
@@ -198,11 +199,11 @@
198
199
 
199
200
  &__top-navigation-items {
200
201
  margin: 0;
201
- padding: 1.25rem 0;
202
+ padding: spacing.space(1.25) 0;
202
203
 
203
204
  display: flex;
204
205
  justify-content: flex-end;
205
- gap: 0.5rem 1.5rem;
206
+ gap: spacing.space(0.5) spacing.space(1.5);
206
207
 
207
208
  @include typography.relative-font-size(15);
208
209
  list-style: none;
@@ -237,7 +238,7 @@
237
238
  }
238
239
 
239
240
  .fa-solid {
240
- margin-right: 0.375rem;
241
+ margin-right: spacing.space(0.375);
241
242
  }
242
243
  }
243
244
 
@@ -247,7 +248,7 @@
247
248
 
248
249
  display: flex;
249
250
  flex-wrap: nowrap;
250
- gap: 2rem;
251
+ gap: spacing.space(2);
251
252
 
252
253
  list-style: none;
253
254
 
@@ -258,7 +259,7 @@
258
259
  }
259
260
 
260
261
  &__navigation-item-link {
261
- padding: 0.5rem 0;
262
+ padding: spacing.space(0.5) 0;
262
263
 
263
264
  display: inline-block;
264
265
 
@@ -314,8 +315,8 @@
314
315
 
315
316
  @include media.on-mobile {
316
317
  &__logo {
317
- padding-top: 1rem;
318
- padding-bottom: 1rem;
318
+ padding-top: spacing.space(1);
319
+ padding-bottom: spacing.space(1);
319
320
  }
320
321
 
321
322
  &__contents {
@@ -352,7 +353,7 @@
352
353
  }
353
354
 
354
355
  &__top-navigation-items {
355
- padding: 0.5rem 1rem;
356
+ padding: spacing.space(0.5) spacing.space(1);
356
357
 
357
358
  justify-content: flex-start;
358
359
 
@@ -361,7 +362,7 @@
361
362
 
362
363
  &__top-navigation-item {
363
364
  margin: 0;
364
- padding: 0.5rem;
365
+ padding: spacing.space(0.5);
365
366
  }
366
367
 
367
368
  &__top-navigation-item-link {
@@ -438,28 +439,28 @@
438
439
  &__logo.tna-column,
439
440
  &__navigation-item-link,
440
441
  &__navigation-toggle.tna-column {
441
- padding-right: gridVars.$gutter-width;
442
+ padding-right: grid.gutter-width();
442
443
  }
443
444
 
444
445
  &__logo.tna-column,
445
446
  &__navigation-item-link {
446
- padding-left: gridVars.$gutter-width;
447
+ padding-left: grid.gutter-width();
447
448
  }
448
449
 
449
450
  &__top-navigation-items {
450
- padding-right: gridVars.$gutter-width - 0.5rem;
451
- padding-left: gridVars.$gutter-width - 0.5rem;
451
+ padding-right: calc(#{grid.gutter-width()} - 0.5rem);
452
+ padding-left: calc(#{grid.gutter-width()} - 0.5rem);
452
453
  }
453
454
  }
454
455
 
455
456
  @include media.on-tiny {
456
457
  &__navigation-toggle.tna-column,
457
458
  &__logo.tna-column {
458
- padding-right: gridVars.$gutter-width-tiny;
459
+ padding-right: grid.gutter-width-tiny();
459
460
  }
460
461
 
461
462
  &__logo.tna-column {
462
- padding-left: gridVars.$gutter-width-tiny;
463
+ padding-left: grid.gutter-width-tiny();
463
464
  }
464
465
 
465
466
  .tna-logo {
@@ -476,27 +477,27 @@
476
477
  }
477
478
 
478
479
  &__navigation-item-link {
479
- padding-right: gridVars.$gutter-width-tiny;
480
- padding-left: gridVars.$gutter-width-tiny + 0.5rem;
480
+ padding-right: grid.gutter-width-tiny();
481
+ padding-left: calc(#{grid.gutter-width-tiny()} + 0.5rem);
481
482
  }
482
483
  }
483
484
 
484
- @include colour.on-high-contrast {
485
- &::after {
486
- @include colour.colour-border("keyline-dark");
487
- }
488
-
489
- @include media.on-larger-than-mobile {
490
- &__navigation-item-link {
491
- &:hover,
492
- &--selected {
493
- &,
494
- &:link,
495
- &:visited {
496
- @include colour.colour-border("keyline-dark");
497
- }
498
- }
499
- }
500
- }
501
- }
485
+ // @include colour.on-high-contrast {
486
+ // &::after {
487
+ // @include colour.colour-border("keyline-dark");
488
+ // }
489
+
490
+ // @include media.on-larger-than-mobile {
491
+ // &__navigation-item-link {
492
+ // &:hover,
493
+ // &--selected {
494
+ // &,
495
+ // &:link,
496
+ // &:visited {
497
+ // @include colour.colour-border("keyline-dark");
498
+ // }
499
+ // }
500
+ // }
501
+ // }
502
+ // }
502
503
  }
@@ -1 +1 @@
1
- .tna-hero__information,.tna-hero__details[open] .tna-hero__details-summary{--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);color:rgb(255 255 255/0.95);color:var(--font-base)}@media(max-width: 48em){.tna-hero{--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);color:rgb(255 255 255/0.95);color:var(--font-base)}}.tna-hero__details-summary{--background: var(--accent-background);--font-base: var(--accent-font-base);--font-dark: var(--accent-font-dark);--font-light: var(--accent-font-light);--icon-light: var(--accent-icon-light);--link: var(--accent-link);--link-visited: var(--accent-link);--keyline: var(--accent-keyline);--keyline-dark: var(--accent-keyline-dark);background-color:var(--background);color:rgb(255 255 255/0.95);color:var(--font-base)}.tna-hero__figure{min-height:clamp(12rem,40vw - 12rem,50rem);margin:0;padding-top:8rem;padding-bottom:4rem;display:flex;align-items:flex-end;position:relative}.tna-hero__caption{width:100%;position:absolute;right:0;bottom:0;z-index:5;overflow:visible}.tna-hero__details{width:100%;overflow:visible}.tna-hero__details-summary{width:1.5rem;height:1.5rem;position:absolute;right:.5rem;bottom:.5rem;z-index:2;font-size:0;text-align:center;line-height:1.5rem;list-style:none;border:4px solid;border:4px var(--background) solid;border-radius:100%;cursor:pointer}.tna-hero__details-summary:hover{color:var(--background);background-color:#343338;background-color:var(--font-base)}.tna-hero__details-summary-icon{font-size:1.25rem;font-style:normal;font-weight:700;text-transform:lowercase}.tna-hero__information{width:45rem;max-width:75vw;padding:.625rem 3.25rem .625rem 1rem;position:absolute;right:0;bottom:0;z-index:1;font-size:1rem}.tna-hero__image{width:100%;height:100%;position:absolute;inset:0;z-index:1}.tna-hero__image img{width:100%;height:100%;object-fit:cover}.tna-hero__details[open] .tna-hero__details-summary::before,.tna-hero__details[open] .tna-hero__details-summary::after{width:1.5rem;height:.125rem;display:block;position:absolute;top:50%;left:50%;background-color:#000;background-color:var(--font-dark);content:""}.tna-hero__details[open] .tna-hero__details-summary::before{transform:translate(-50%, -50%) rotate(45deg)}.tna-hero__details[open] .tna-hero__details-summary::after{transform:translate(-50%, -50%) rotate(-45deg)}.tna-hero__details[open] .tna-hero__details-summary:hover::before,.tna-hero__details[open] .tna-hero__details-summary:hover::after{height:.25rem}.tna-hero__details[open] .tna-hero__details-summary-icon{font-size:0}.tna-hero__inner{position:relative;z-index:4}.tna-hero__content-inner{padding:2rem;background-color:#f4f4f4;background-color:var(--page-background)}@media(max-width: 48em){.tna-hero__figure{min-height:auto;padding:0;flex-direction:column;background-color:inherit}.tna-hero__caption{position:relative;order:2}.tna-hero__information{width:auto;max-width:none;left:0;border-bottom:1px rgb(38 38 42/0.25) solid;border-bottom:1px var(--keyline) solid}.tna-hero__image{position:static;order:1}.tna-hero__image img{height:auto}.tna-hero__inner{order:3;background-color:inherit}.tna-hero__content-inner{padding:2rem 0;background-color:rgba(0,0,0,0)}.tna-hero__body{margin-top:1rem}}@media(forced-colors: active){.tna-hero__information,.tna-hero__content-inner{border:1px #26262a solid;border:1px var(--keyline-dark) solid}}@media(forced-colors: active)and (max-width: 48em){.tna-hero__inner{border:1px #26262a solid;border:1px var(--keyline-dark) solid;border-top:0}.tna-hero__content-inner{border:none}}.tna-template--high-contrast-theme .tna-hero__information,.tna-template--high-contrast-theme .tna-hero__content-inner{border:1px #26262a solid;border:1px var(--keyline-dark) solid}@media(max-width: 48em){.tna-template--high-contrast-theme .tna-hero__inner{border:1px #26262a solid;border:1px var(--keyline-dark) solid;border-top:0}.tna-template--high-contrast-theme .tna-hero__content-inner{border:none}}@media(prefers-contrast: more){.tna-template--system-theme .tna-hero__information,.tna-template--system-theme .tna-hero__content-inner{border:1px #26262a solid;border:1px var(--keyline-dark) solid}}@media(prefers-contrast: more)and (max-width: 48em){.tna-template--system-theme .tna-hero__inner{border:1px #26262a solid;border:1px var(--keyline-dark) solid;border-top:0}.tna-template--system-theme .tna-hero__content-inner{border:none}}/*# sourceMappingURL=hero.css.map */
1
+ .tna-hero__information,.tna-hero__details[open] .tna-hero__details-summary{--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);color:rgb(255 255 255/0.95);color:var(--font-base)}@media(max-width: 48em){.tna-hero{--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);color:rgb(255 255 255/0.95);color:var(--font-base)}}.tna-hero__details-summary{--background: var(--accent-background);--font-base: var(--accent-font-base);--font-dark: var(--accent-font-dark);--font-light: var(--accent-font-light);--icon-light: var(--accent-icon-light);--link: var(--accent-link);--link-visited: var(--accent-link);--keyline: var(--accent-keyline);--keyline-dark: var(--accent-keyline-dark);background-color:var(--background);color:rgb(255 255 255/0.95);color:var(--font-base)}.tna-hero__figure{min-height:clamp(192px,40vw - 192px,50rem);margin:0;padding-top:128px;padding-bottom:64px;display:flex;align-items:flex-end;position:relative}.tna-hero__caption{width:100%;position:absolute;right:0;bottom:0;z-index:5;overflow:visible}.tna-hero__details{width:100%;overflow:visible}.tna-hero__details-summary{width:1.5rem;height:1.5rem;position:absolute;right:8px;bottom:8px;z-index:2;font-size:0;text-align:center;line-height:1.5rem;list-style:none;border:4px solid;border:4px var(--background) solid;border-radius:100%;cursor:pointer}.tna-hero__details-summary:hover{color:var(--background);background-color:#343338;background-color:var(--font-base)}.tna-hero__details-summary-icon{font-size:1.25rem;font-style:normal;font-weight:700;text-transform:lowercase}.tna-hero__information{width:45rem;max-width:75vw;padding:10px 5.2px 10px 16px;position:absolute;right:0;bottom:0;z-index:1;font-size:1rem}.tna-hero__image{width:100%;height:100%;position:absolute;inset:0;z-index:1}.tna-hero__image img{width:100%;height:100%;object-fit:cover}.tna-hero__details[open] .tna-hero__details-summary::before,.tna-hero__details[open] .tna-hero__details-summary::after{width:1.5rem;height:.125rem;display:block;position:absolute;top:50%;left:50%;background-color:#010101;background-color:var(--font-dark);content:""}.tna-hero__details[open] .tna-hero__details-summary::before{transform:translate(-50%, -50%) rotate(45deg)}.tna-hero__details[open] .tna-hero__details-summary::after{transform:translate(-50%, -50%) rotate(-45deg)}.tna-hero__details[open] .tna-hero__details-summary:hover::before,.tna-hero__details[open] .tna-hero__details-summary:hover::after{height:.25rem}.tna-hero__details[open] .tna-hero__details-summary-icon{font-size:0}.tna-hero__inner{position:relative;z-index:4}.tna-hero__content-inner{padding:32px;background-color:#f4f4f4;background-color:var(--page-background)}@media(max-width: 48em){.tna-hero__figure{min-height:auto;padding:0;flex-direction:column;background-color:inherit}.tna-hero__caption{position:relative;order:2}.tna-hero__information{width:auto;max-width:none;left:0;border-bottom:1px rgb(38 38 42/0.25) solid;border-bottom:1px var(--keyline) solid}.tna-hero__image{position:static;order:1}.tna-hero__image img{height:auto}.tna-hero__inner{order:3;background-color:inherit}.tna-hero__content-inner{padding:32px 0;background-color:rgba(0,0,0,0)}.tna-hero__body{margin-top:16px}}@media(forced-colors: active){.tna-hero__information,.tna-hero__content-inner{border:1px #26262a solid;border:1px var(--keyline-dark) solid}}@media(forced-colors: active)and (max-width: 48em){.tna-hero__inner{border:1px #26262a solid;border:1px var(--keyline-dark) solid;border-top:0}.tna-hero__content-inner{border:none}}.tna-template--high-contrast-theme .tna-hero__information,.tna-template--high-contrast-theme .tna-hero__content-inner{border:1px #26262a solid;border:1px var(--keyline-dark) solid}@media(max-width: 48em){.tna-template--high-contrast-theme .tna-hero__inner{border:1px #26262a solid;border:1px var(--keyline-dark) solid;border-top:0}.tna-template--high-contrast-theme .tna-hero__content-inner{border:none}}@media(prefers-contrast: more){.tna-template--system-theme .tna-hero__information,.tna-template--system-theme .tna-hero__content-inner{border:1px #26262a solid;border:1px var(--keyline-dark) solid}}@media(prefers-contrast: more)and (max-width: 48em){.tna-template--system-theme .tna-hero__inner{border:1px #26262a solid;border:1px var(--keyline-dark) solid;border-top:0}.tna-template--system-theme .tna-hero__content-inner{border:none}}/*# sourceMappingURL=hero.css.map */
@@ -1 +1 @@
1
- {"version":3,"sourceRoot":"","sources":["../../../../src/nationalarchives/tools/_colour.scss","../../../../src/nationalarchives/tools/_media.scss","../../../../src/nationalarchives/components/hero/hero.scss","../../../../src/nationalarchives/tools/_typography.scss"],"names":[],"mappings":"AA6PA,2EACE,yCACA,uCACA,uCACA,yCACA,yCACA,6BACA,6CACA,mCACA,6CACA,2CACA,uDACA,uDACA,mEA1KA,mCAPA,4BACA,uBC/BA,wBD0NF,UAEI,yCACA,uCACA,uCACA,yCACA,yCACA,6BACA,6CACA,mCACA,6CACA,2CACA,uDACA,uDACA,mEAnMF,mCAPA,4BACA,wBAqNF,2BACE,uCACA,qCACA,qCACA,uCACA,uCACA,2BACA,mCACA,iCACA,2CAxNA,mCAPA,4BACA,uBEnFA,kBACE,2CACA,SACA,iBACA,oBAEA,aACA,qBAEA,kBAGF,mBACE,WAEA,kBACA,QACA,SACA,UAEA,iBAGF,mBACE,WAEA,iBAGF,2BACE,aACA,cAEA,kBACA,YACA,aACA,UAEA,YACA,kBACA,mBACA,gBFoFE,iBAIA,mCEnFF,mBAEA,eAEA,iCFiCF,wBAIA,yBAEA,kCEhCA,gCACE,kBACA,kBACA,gBACA,yBAGF,uBACE,YACA,eACA,qCAEA,kBACA,QACA,SACA,UC1EF,eDiFA,iBACE,WACA,YAEA,kBACA,QACA,UAEA,qBACE,WACA,YAEA,iBAOF,uHAEE,aACA,eAEA,cAEA,kBACA,QACA,SFpBJ,sBAEA,kCEsBI,WAGF,4DACE,8CAGF,2DACE,+CAIA,mIAEE,cAIJ,yDACE,YAIJ,iBACE,kBACA,UAMF,yBACE,aFxDF,yBAEA,wCCrCA,wBCuGE,kBACE,gBACA,UAEA,sBAEA,yBAGF,mBACE,kBACA,QAYF,uBACE,WACA,eAEA,OF5EA,2CAIA,uCE6EF,iBACE,gBAEA,QAEA,qBACE,YAIJ,iBACE,QAEA,yBAMF,yBACE,eAEA,+BAMF,gBACE,iBF8KJ,8BEzKE,gDFhGE,yBAIA,sCC7EJ,mDC+KI,iBFtGA,yBAIA,qCEoGE,aAGF,yBACE,aAZJ,sHFhGE,yBAIA,qCC7EJ,wBC+KI,oDFtGA,yBAIA,qCEoGE,aAGF,4DACE,aFsJJ,+BElKA,wGFhGE,yBAIA,sCC7EJ,oDC+KI,6CFtGA,yBAIA,qCEoGE,aAGF,qDACE","file":"hero.css","sourcesContent":["@use \"sass:map\";\n@use \"sass:list\";\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 accent-css-vars($colour) {\n @if $colour == \"yellow\" {\n --accent-background: #{brand-colour(\"yellow\")} !important;\n --accent-background-light: #{brand-colour(\"cream\")} !important;\n --accent-font-base: #{brand-colour(\"black\")} !important;\n --accent-font-dark: #{brand-colour(\"black\")} !important;\n --accent-font-light: #{brand-colour(\"black\", 0.7)} !important;\n --accent-icon-light: #{brand-colour(\"black\", 0.45)} !important;\n --accent-link: #{brand-colour(\"black\")} !important;\n --accent-link-visited: #{brand-colour(\"black\")} !important;\n --accent-keyline: #{brand-colour(\"black\", 0.5)} !important;\n --accent-keyline-dark: #{brand-colour(\"black\", 0.8)} !important;\n --button-accent-background: #{brand-colour(\"yellow\")} !important;\n } @else {\n --accent-font-base: #{brand-colour(\"white\")} !important;\n --accent-font-dark: #{brand-colour(\"white\")} !important;\n --accent-font-light: #{brand-colour(\"white\", 0.7)} !important;\n --accent-icon-light: #{brand-colour(\"white\", 0.45)} !important;\n --accent-link: #{brand-colour(\"white\")} !important;\n --accent-link-visited: #{brand-colour(\"white\")} !important;\n --accent-keyline: #{brand-colour(\"white\", 0.5)} !important;\n --accent-keyline-dark: #{brand-colour(\"white\", 0.8)} !important;\n --button-accent-text: #{brand-colour(\"white\")} !important;\n @if $colour == \"pink\" {\n --accent-background: #{brand-colour(\"maroon\")} !important;\n --accent-background-light: #{brand-colour(\"pastel-pink\")} !important;\n --button-accent-background: #{brand-colour(\"maroon\")} !important;\n } @else if $colour == \"orange\" {\n --accent-background: #{brand-colour(\"chestnut\")} !important;\n --accent-background-light: #{brand-colour(\"pastel-orange\")} !important;\n --button-accent-background: #{brand-colour(\"chestnut\")} !important;\n } @else if $colour == \"green\" {\n --accent-background: #{brand-colour(\"forest\")} !important;\n --accent-background-light: #{brand-colour(\"pastel-green\")} !important;\n --button-accent-background: #{brand-colour(\"forest\")} !important;\n } @else if $colour == \"blue\" {\n --accent-background: #{brand-colour(\"navy\")} !important;\n --accent-background-light: #{brand-colour(\"pastel-blue\")} !important;\n --button-accent-background: #{brand-colour(\"navy\")} !important;\n }\n }\n}\n\n@mixin colour-font(\n $colour,\n $important: false,\n $default-palette: colour.$colour-palette-default\n) {\n color: map.get($default-palette, $colour) if($important, !important, null);\n color: var(--#{$colour}) if($important, !important, null);\n}\n\n@mixin colour-background($colour, $important: false) {\n background-color: map.get(colour.$colour-palette-default, $colour)\n if($important, !important, null);\n background-color: var(--#{$colour}) if($important, !important, null);\n}\n\n@mixin colour-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 $property: border-#{$direction};\n border-#{$direction}: $width\n map.get(colour.$colour-palette-default, $colour)\n $style\n if($important, !important, null);\n border-#{$direction}: $width\n var(--#{$colour})\n $style\n if($important, !important, null);\n } @else {\n border-#{$direction}-color: map.get(\n colour.$colour-palette-default,\n $colour\n )\n if($important, !important, null);\n border-#{$direction}-color: var(--#{$colour})\n if($important, !important, null);\n }\n } @else {\n @if $width != \"\" {\n border: $width\n map.get(colour.$colour-palette-default, $colour)\n $style\n if($important, !important, null);\n border: $width var(--#{$colour}) $style if($important, !important, null);\n } @else {\n border-color: map.get(colour.$colour-palette-default, $colour)\n if($important, !important, null);\n border-color: var(--#{$colour}) if($important, !important, null);\n }\n }\n}\n\n@mixin colour-outline($colour, $width: \"\", $style: solid, $important: false) {\n @if $width != \"\" {\n outline: $width\n map.get(colour.$colour-palette-default, $colour)\n $style\n if($important, !important, null);\n outline: $width var(--#{$colour}) $style if($important, !important, null);\n } @else {\n outline-color: map.get(colour.$colour-palette-default, $colour)\n if($important, !important, null);\n outline-color: var(--#{$colour}) if($important, !important, null);\n }\n}\n\n@mixin colour-fill($colour, $important: false) {\n fill: map.get(colour.$colour-palette-default, $colour)\n if($important, !important, null);\n fill: var(--#{$colour}) if($important, !important, null);\n}\n\n@mixin thick-keyline($direction) {\n @include colour-border(\"keyline\", 5px, solid, $direction);\n}\n\n@mixin thick-keyline-dark($direction) {\n @include colour-border(\"keyline-dark\", 5px, solid, $direction);\n}\n\n@mixin thick-keyline-accent($direction) {\n @include colour-border(\"accent-background\", 5px, solid, $direction);\n}\n\n@mixin thick-keyline-error($direction) {\n @include colour-border(\"form-error\", 5px, solid, $direction);\n}\n\n@mixin thick-keyline-brand($direction, $brandColour) {\n border-#{$direction}: 5px #{brand-colour($brandColour)} solid;\n}\n\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 .tna-template--high-contrast-theme & {\n @include colour-css-vars-high-contrast(\"form-error\");\n }\n}\n\n@mixin light {\n @extend %light;\n}\n\n%dark {\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 .tna-template--high-contrast-theme & {\n @include colour-css-vars-high-contrast-dark(\"form-error\");\n }\n}\n\n@mixin dark {\n @extend %dark;\n}\n\n%plain {\n .tna-template--system-theme & {\n @extend %light;\n\n @media (prefers-color-scheme: dark) {\n @include colour-css-vars-dark;\n }\n\n @media (prefers-contrast: more) and (prefers-color-scheme: dark) {\n @include colour-css-vars-high-contrast-dark;\n }\n }\n\n .tna-template--light-theme & {\n @include colour-css-vars;\n }\n\n .tna-template--dark-theme & {\n @include colour-css-vars-dark;\n }\n\n .tna-template--high-contrast-theme & {\n @include colour-css-vars-high-contrast;\n }\n\n .tna-template--high-contrast-theme.tna-template--dark-theme & {\n @include colour-css-vars-high-contrast-dark;\n }\n\n --background: var(--page-background);\n}\n\n@mixin plain {\n @extend %plain;\n}\n\n%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\", false, colour.$colour-palette-dark);\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\", false, colour.$colour-palette-dark);\n }\n}\n\n@mixin contrast-on-mobile {\n @extend %contrast-on-mobile;\n}\n\n%accent {\n --background: var(--accent-background);\n --font-base: var(--accent-font-base);\n --font-dark: var(--accent-font-dark);\n --font-light: var(--accent-font-light);\n --icon-light: var(--accent-icon-light);\n --link: var(--accent-link);\n --link-visited: var(--accent-link);\n --keyline: var(--accent-keyline);\n --keyline-dark: var(--accent-keyline-dark);\n\n @include colour-background(\"background\");\n\n @include colour-font(\"font-base\", false, colour.$colour-palette-dark);\n}\n\n@mixin accent {\n @extend %accent;\n}\n\n%tint {\n @include colour-background(\"background-tint\");\n @include colour-font(\"font-base\");\n}\n\n@mixin tint {\n @extend %tint;\n}\n\n%accent-background {\n @include colour-background(\"accent-background\");\n}\n\n@mixin accent-background {\n @extend %accent-background;\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 // --link: #{map.get(colour.$colour-palette-default, \"link\")};\n // --link-visited: #{map.get(colour.$colour-palette-default, \"link-visited\")};\n --keyline: #{map.get(colour.$colour-palette-default, \"keyline\")};\n --keyline-dark: #{map.get(colour.$colour-palette-default, \"keyline-dark\")};\n --button-text: #{map.get(colour.$colour-palette-default, \"button-text\")};\n --button-background: #{map.get(\n colour.$colour-palette-default,\n \"button-background\"\n )};\n --button-hover-text: #{map.get(\n colour.$colour-palette-default,\n \"button-hover-text\"\n )};\n --button-hover-background: #{map.get(\n colour.$colour-palette-default,\n \"button-hover-background\"\n )};\n\n @include colour-background(\"background\");\n @include colour-font(\"font-base\");\n\n .tna-template--system-theme & {\n @media (prefers-color-scheme: dark) {\n --link: #{map.get(colour.$colour-palette-default, \"link\")};\n --link-visited: #{map.get(colour.$colour-palette-default, \"link-visited\")};\n }\n }\n\n .tna-template--dark-theme & {\n --link: #{map.get(colour.$colour-palette-default, \"link\")};\n --link-visited: #{map.get(colour.$colour-palette-default, \"link-visited\")};\n }\n}\n\n@mixin accent-light {\n @extend %accent-light;\n}\n\n@mixin on-high-contrast {\n .tna-template--high-contrast-theme & {\n @content;\n }\n\n .tna-template--system-theme & {\n @media (prefers-contrast: more) {\n @content;\n }\n }\n}\n\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 \"../variables/media\";\n\n// 0 ======= 320 = 480 ===== 768 == 1024 ========================== min-width/max-width (px)\n// | . | | |\n// |-TINY----------|-SMALL---|-MED--|-LARGE------------------------\n// | . | | |\n// |<------------->| | | on-tiny\n// |<----------------------->| | on-mobile\n// |<------------------------------>| on-smaller-than-large\n// | . |<------->| | on-small\n// | . |<------------------------- on-larger-than-tiny\n// | . | |<---->| on-medium\n// | . | |<--------------- on-larger-than-mobile\n// | . | | |<-------- on-large\n// |<------->. | | | Smallest device\n\n@mixin on-large() {\n @media #{media.$media-large} {\n @content;\n }\n}\n\n@mixin on-medium() {\n @media #{media.$media-medium} {\n @content;\n }\n}\n\n@mixin on-small() {\n @media #{media.$media-small} {\n @content;\n }\n}\n\n@mixin on-tiny() {\n @media #{media.$media-tiny} {\n @content;\n }\n}\n\n@mixin on-larger-than-mobile() {\n @media #{media.$media-gt-mobile} {\n @content;\n }\n}\n\n@mixin on-larger-than-tiny() {\n @media #{media.$media-gt-tiny} {\n @content;\n }\n}\n\n@mixin on-smaller-than-large() {\n @media #{media.$media-lt-large} {\n @content;\n }\n}\n\n@mixin on-mobile() {\n @media #{media.$media-mobile} {\n @content;\n }\n}\n\n@mixin on-print() {\n @media print {\n @content;\n }\n}\n","@use \"../../tools/colour\";\n@use \"../../tools/media\";\n@use \"../../tools/typography\";\n\n.tna-hero {\n @include colour.contrast-on-mobile;\n\n &__figure {\n min-height: clamp(12rem, calc(40vw - 12rem), 50rem);\n margin: 0;\n padding-top: 8rem;\n padding-bottom: 4rem;\n\n display: flex;\n align-items: flex-end;\n\n position: relative;\n }\n\n &__caption {\n width: 100%;\n\n position: absolute;\n right: 0;\n bottom: 0;\n z-index: 5;\n\n overflow: visible;\n }\n\n &__details {\n width: 100%;\n\n overflow: visible;\n }\n\n &__details-summary {\n width: 1.5rem;\n height: 1.5rem;\n\n position: absolute;\n right: 0.5rem;\n bottom: 0.5rem;\n z-index: 2;\n\n font-size: 0;\n text-align: center;\n line-height: 1.5rem;\n list-style: none;\n\n @include colour.accent;\n\n @include colour.colour-border(\"background\", 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: 0.625rem 3.25rem 0.625rem 1rem;\n\n position: absolute;\n right: 0;\n bottom: 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 &__content {\n }\n\n &__content-inner {\n padding: 2rem;\n\n @include colour.colour-background(\"page-background\");\n }\n\n &__heading {\n }\n\n &__body {\n }\n\n @include media.on-mobile {\n &__figure {\n min-height: auto;\n padding: 0;\n\n flex-direction: column;\n\n background-color: inherit;\n }\n\n &__caption {\n position: relative;\n order: 2;\n }\n\n &__details {\n }\n\n &__details-summary {\n }\n\n &__details-summary-icon {\n }\n\n &__information {\n width: auto;\n max-width: none;\n\n left: 0;\n\n @include colour.colour-border(\"keyline\", 1px, solid, bottom);\n }\n\n &__image {\n position: static;\n\n order: 1;\n\n img {\n height: auto;\n }\n }\n\n &__inner {\n order: 3;\n\n background-color: inherit;\n }\n\n &__content {\n }\n\n &__content-inner {\n padding: 2rem 0;\n\n background-color: transparent;\n }\n\n &__heading {\n }\n\n &__body {\n margin-top: 1rem;\n }\n }\n\n @include colour.on-high-contrast-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 \"colour\";\n@use \"../variables/typography\";\n\n@mixin relative-font-size($fontSizePx) {\n font-size: #{math.div($fontSizePx, typography.$relative-1rem-px)}rem;\n}\n\n@mixin main-font-weight {\n font-weight: typography.$main-font-weight;\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: #{math.div(typography.$relative-1rem-px, 14)};\n}\n\n@mixin interacted-text-decoration {\n text-decoration: underline;\n text-decoration-thickness: typography.$interactive-text-decoration-thickness;\n}\n"]}
1
+ {"version":3,"sourceRoot":"","sources":["../../../../src/nationalarchives/tools/_colour.scss","../../../../src/nationalarchives/tools/_media.scss","../../../../src/nationalarchives/components/hero/hero.scss","../../../../src/nationalarchives/tools/_typography.scss"],"names":[],"mappings":"AA6PA,2EACE,yCACA,uCACA,uCACA,yCACA,yCACA,6BACA,6CACA,mCACA,6CACA,2CACA,uDACA,uDACA,mEA1KA,mCAPA,4BACA,uBCRA,wBDmMF,UAEI,yCACA,uCACA,uCACA,yCACA,yCACA,6BACA,6CACA,mCACA,6CACA,2CACA,uDACA,uDACA,mEAnMF,mCAPA,4BACA,wBAqNF,2BACE,uCACA,qCACA,qCACA,uCACA,uCACA,2BACA,mCACA,iCACA,2CAxNA,mCAPA,4BACA,uBElFA,kBACE,2CAKA,SACA,kBACA,oBAEA,aACA,qBAEA,kBAGF,mBACE,WAEA,kBACA,QACA,SACA,UAEA,iBAGF,mBACE,WAEA,iBAGF,2BACE,aACA,cAEA,kBACA,UACA,WACA,UAEA,YACA,kBACA,mBACA,gBF+EE,iBAIA,mCE9EF,mBAEA,eAEA,iCF4BF,wBAIA,yBAEA,kCE3BA,gCACE,kBACA,kBACA,gBACA,yBAGF,uBACE,YACA,eACA,6BAGA,kBACA,QACA,SACA,UC/EF,eDsFA,iBACE,WACA,YAEA,kBACA,QACA,UAEA,qBACE,WACA,YAEA,iBAOF,uHAEE,aACA,eAEA,cAEA,kBACA,QACA,SF1BJ,yBAEA,kCE4BI,WAGF,4DACE,8CAGF,2DACE,+CAIA,mIAEE,cAIJ,yDACE,YAIJ,iBACE,kBACA,UAMF,yBACE,aF9DF,yBAEA,wCCdA,wBCsFE,kBACE,gBACA,UAEA,sBAEA,yBAGF,mBACE,kBACA,QAYF,uBACE,WACA,eAEA,OFlFA,2CAIA,uCEmFF,iBACE,gBAEA,QAEA,qBACE,YAIJ,iBACE,QAEA,yBAMF,yBACE,eAEA,+BAMF,gBACE,iBFwKJ,8BEnKE,gDFtGE,yBAIA,sCCtDJ,mDC8JI,iBF5GA,yBAIA,qCE0GE,aAGF,yBACE,aAZJ,sHFtGE,yBAIA,qCCtDJ,wBC8JI,oDF5GA,yBAIA,qCE0GE,aAGF,4DACE,aFgJJ,+BE5JA,wGFtGE,yBAIA,sCCtDJ,oDC8JI,6CF5GA,yBAIA,qCE0GE,aAGF,qDACE","file":"hero.css","sourcesContent":["@use \"sass:map\";\n@use \"sass:list\";\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 accent-css-vars($colour) {\n @if $colour == \"yellow\" {\n --accent-background: #{brand-colour(\"yellow\")} !important;\n --accent-background-light: #{brand-colour(\"cream\")} !important;\n --accent-font-base: #{brand-colour(\"black\")} !important;\n --accent-font-dark: #{brand-colour(\"black\")} !important;\n --accent-font-light: #{brand-colour(\"black\", 0.7)} !important;\n --accent-icon-light: #{brand-colour(\"black\", 0.45)} !important;\n --accent-link: #{brand-colour(\"black\")} !important;\n --accent-link-visited: #{brand-colour(\"black\")} !important;\n --accent-keyline: #{brand-colour(\"black\", 0.5)} !important;\n --accent-keyline-dark: #{brand-colour(\"black\", 0.8)} !important;\n --button-accent-background: #{brand-colour(\"yellow\")} !important;\n } @else {\n --accent-font-base: #{brand-colour(\"white\")} !important;\n --accent-font-dark: #{brand-colour(\"white\")} !important;\n --accent-font-light: #{brand-colour(\"white\", 0.7)} !important;\n --accent-icon-light: #{brand-colour(\"white\", 0.45)} !important;\n --accent-link: #{brand-colour(\"white\")} !important;\n --accent-link-visited: #{brand-colour(\"white\")} !important;\n --accent-keyline: #{brand-colour(\"white\", 0.5)} !important;\n --accent-keyline-dark: #{brand-colour(\"white\", 0.8)} !important;\n --button-accent-text: #{brand-colour(\"white\")} !important;\n @if $colour == \"pink\" {\n --accent-background: #{brand-colour(\"maroon\")} !important;\n --accent-background-light: #{brand-colour(\"pastel-pink\")} !important;\n --button-accent-background: #{brand-colour(\"maroon\")} !important;\n } @else if $colour == \"orange\" {\n --accent-background: #{brand-colour(\"chestnut\")} !important;\n --accent-background-light: #{brand-colour(\"pastel-orange\")} !important;\n --button-accent-background: #{brand-colour(\"chestnut\")} !important;\n } @else if $colour == \"green\" {\n --accent-background: #{brand-colour(\"forest\")} !important;\n --accent-background-light: #{brand-colour(\"pastel-green\")} !important;\n --button-accent-background: #{brand-colour(\"forest\")} !important;\n } @else if $colour == \"blue\" {\n --accent-background: #{brand-colour(\"navy\")} !important;\n --accent-background-light: #{brand-colour(\"pastel-blue\")} !important;\n --button-accent-background: #{brand-colour(\"navy\")} !important;\n }\n }\n}\n\n@mixin colour-font(\n $colour,\n $important: false,\n $default-palette: colour.$colour-palette-default\n) {\n color: map.get($default-palette, $colour) if($important, !important, null);\n color: var(--#{$colour}) if($important, !important, null);\n}\n\n@mixin colour-background($colour, $important: false) {\n background-color: map.get(colour.$colour-palette-default, $colour)\n if($important, !important, null);\n background-color: var(--#{$colour}) if($important, !important, null);\n}\n\n@mixin colour-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 $property: border-#{$direction};\n border-#{$direction}: $width\n map.get(colour.$colour-palette-default, $colour)\n $style\n if($important, !important, null);\n border-#{$direction}: $width\n var(--#{$colour})\n $style\n if($important, !important, null);\n } @else {\n border-#{$direction}-color: map.get(\n colour.$colour-palette-default,\n $colour\n )\n if($important, !important, null);\n border-#{$direction}-color: var(--#{$colour})\n if($important, !important, null);\n }\n } @else {\n @if $width != \"\" {\n border: $width\n map.get(colour.$colour-palette-default, $colour)\n $style\n if($important, !important, null);\n border: $width var(--#{$colour}) $style if($important, !important, null);\n } @else {\n border-color: map.get(colour.$colour-palette-default, $colour)\n if($important, !important, null);\n border-color: var(--#{$colour}) if($important, !important, null);\n }\n }\n}\n\n@mixin colour-outline($colour, $width: \"\", $style: solid, $important: false) {\n @if $width != \"\" {\n outline: $width\n map.get(colour.$colour-palette-default, $colour)\n $style\n if($important, !important, null);\n outline: $width var(--#{$colour}) $style if($important, !important, null);\n } @else {\n outline-color: map.get(colour.$colour-palette-default, $colour)\n if($important, !important, null);\n outline-color: var(--#{$colour}) if($important, !important, null);\n }\n}\n\n@mixin colour-fill($colour, $important: false) {\n fill: map.get(colour.$colour-palette-default, $colour)\n if($important, !important, null);\n fill: var(--#{$colour}) if($important, !important, null);\n}\n\n@mixin thick-keyline($direction) {\n @include colour-border(\"keyline\", 5px, solid, $direction);\n}\n\n@mixin thick-keyline-dark($direction) {\n @include colour-border(\"keyline-dark\", 5px, solid, $direction);\n}\n\n@mixin thick-keyline-accent($direction) {\n @include colour-border(\"accent-background\", 5px, solid, $direction);\n}\n\n@mixin thick-keyline-error($direction) {\n @include colour-border(\"form-error\", 5px, solid, $direction);\n}\n\n@mixin thick-keyline-brand($direction, $brandColour) {\n border-#{$direction}: 5px #{brand-colour($brandColour)} solid;\n}\n\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 .tna-template--high-contrast-theme & {\n @include colour-css-vars-high-contrast(\"form-error\");\n }\n}\n\n@mixin light {\n @extend %light;\n}\n\n%dark {\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 .tna-template--high-contrast-theme & {\n @include colour-css-vars-high-contrast-dark(\"form-error\");\n }\n}\n\n@mixin dark {\n @extend %dark;\n}\n\n%plain {\n .tna-template--system-theme & {\n @extend %light;\n\n @media (prefers-color-scheme: dark) {\n @include colour-css-vars-dark;\n }\n\n @media (prefers-contrast: more) and (prefers-color-scheme: dark) {\n @include colour-css-vars-high-contrast-dark;\n }\n }\n\n .tna-template--light-theme & {\n @include colour-css-vars;\n }\n\n .tna-template--dark-theme & {\n @include colour-css-vars-dark;\n }\n\n .tna-template--high-contrast-theme & {\n @include colour-css-vars-high-contrast;\n }\n\n .tna-template--high-contrast-theme.tna-template--dark-theme & {\n @include colour-css-vars-high-contrast-dark;\n }\n\n --background: var(--page-background);\n}\n\n@mixin plain {\n @extend %plain;\n}\n\n%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\", false, colour.$colour-palette-dark);\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\", false, colour.$colour-palette-dark);\n }\n}\n\n@mixin contrast-on-mobile {\n @extend %contrast-on-mobile;\n}\n\n%accent {\n --background: var(--accent-background);\n --font-base: var(--accent-font-base);\n --font-dark: var(--accent-font-dark);\n --font-light: var(--accent-font-light);\n --icon-light: var(--accent-icon-light);\n --link: var(--accent-link);\n --link-visited: var(--accent-link);\n --keyline: var(--accent-keyline);\n --keyline-dark: var(--accent-keyline-dark);\n\n @include colour-background(\"background\");\n\n @include colour-font(\"font-base\", false, colour.$colour-palette-dark);\n}\n\n@mixin accent {\n @extend %accent;\n}\n\n%tint {\n @include colour-background(\"background-tint\");\n @include colour-font(\"font-base\");\n}\n\n@mixin tint {\n @extend %tint;\n}\n\n%accent-background {\n @include colour-background(\"accent-background\");\n}\n\n@mixin accent-background {\n @extend %accent-background;\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 // --link: #{map.get(colour.$colour-palette-default, \"link\")};\n // --link-visited: #{map.get(colour.$colour-palette-default, \"link-visited\")};\n --keyline: #{map.get(colour.$colour-palette-default, \"keyline\")};\n --keyline-dark: #{map.get(colour.$colour-palette-default, \"keyline-dark\")};\n --button-text: #{map.get(colour.$colour-palette-default, \"button-text\")};\n --button-background: #{map.get(\n colour.$colour-palette-default,\n \"button-background\"\n )};\n --button-hover-text: #{map.get(\n colour.$colour-palette-default,\n \"button-hover-text\"\n )};\n --button-hover-background: #{map.get(\n colour.$colour-palette-default,\n \"button-hover-background\"\n )};\n\n @include colour-background(\"background\");\n @include colour-font(\"font-base\");\n\n .tna-template--system-theme & {\n @media (prefers-color-scheme: dark) {\n --link: #{map.get(colour.$colour-palette-default, \"link\")};\n --link-visited: #{map.get(colour.$colour-palette-default, \"link-visited\")};\n }\n }\n\n .tna-template--dark-theme & {\n --link: #{map.get(colour.$colour-palette-default, \"link\")};\n --link-visited: #{map.get(colour.$colour-palette-default, \"link-visited\")};\n }\n}\n\n@mixin accent-light {\n @extend %accent-light;\n}\n\n@mixin on-high-contrast {\n .tna-template--high-contrast-theme & {\n @content;\n }\n\n .tna-template--system-theme & {\n @media (prefers-contrast: more) {\n @content;\n }\n }\n}\n\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.tna-hero {\n @include colour.contrast-on-mobile;\n\n &__figure {\n min-height: clamp(\n #{spacing.space(12)},\n calc(40vw - #{spacing.space(12)}),\n 50rem\n );\n margin: 0;\n padding-top: spacing.space(8);\n padding-bottom: spacing.space(4);\n\n display: flex;\n align-items: flex-end;\n\n position: relative;\n }\n\n &__caption {\n width: 100%;\n\n position: absolute;\n right: 0;\n bottom: 0;\n z-index: 5;\n\n overflow: visible;\n }\n\n &__details {\n width: 100%;\n\n overflow: visible;\n }\n\n &__details-summary {\n width: 1.5rem;\n height: 1.5rem;\n\n position: absolute;\n right: spacing.space(0.5);\n bottom: 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(0.325) spacing.space(0.625)\n spacing.space(1);\n\n position: absolute;\n right: 0;\n bottom: 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 &__content {\n }\n\n &__content-inner {\n padding: spacing.space(2);\n\n @include colour.colour-background(\"page-background\");\n }\n\n &__heading {\n }\n\n &__body {\n }\n\n @include media.on-mobile {\n &__figure {\n min-height: auto;\n padding: 0;\n\n flex-direction: column;\n\n background-color: inherit;\n }\n\n &__caption {\n position: relative;\n order: 2;\n }\n\n &__details {\n }\n\n &__details-summary {\n }\n\n &__details-summary-icon {\n }\n\n &__information {\n width: auto;\n max-width: none;\n\n left: 0;\n\n @include colour.colour-border(\"keyline\", 1px, solid, bottom);\n }\n\n &__image {\n position: static;\n\n order: 1;\n\n img {\n height: auto;\n }\n }\n\n &__inner {\n order: 3;\n\n background-color: inherit;\n }\n\n &__content {\n }\n\n &__content-inner {\n padding: spacing.space(2) 0;\n\n background-color: transparent;\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-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"]}
@@ -1,15 +1,20 @@
1
1
  @use "../../tools/colour";
2
2
  @use "../../tools/media";
3
+ @use "../../tools/spacing";
3
4
  @use "../../tools/typography";
4
5
 
5
6
  .tna-hero {
6
7
  @include colour.contrast-on-mobile;
7
8
 
8
9
  &__figure {
9
- min-height: clamp(12rem, calc(40vw - 12rem), 50rem);
10
+ min-height: clamp(
11
+ #{spacing.space(12)},
12
+ calc(40vw - #{spacing.space(12)}),
13
+ 50rem
14
+ );
10
15
  margin: 0;
11
- padding-top: 8rem;
12
- padding-bottom: 4rem;
16
+ padding-top: spacing.space(8);
17
+ padding-bottom: spacing.space(4);
13
18
 
14
19
  display: flex;
15
20
  align-items: flex-end;
@@ -39,8 +44,8 @@
39
44
  height: 1.5rem;
40
45
 
41
46
  position: absolute;
42
- right: 0.5rem;
43
- bottom: 0.5rem;
47
+ right: spacing.space(0.5);
48
+ bottom: spacing.space(0.5);
44
49
  z-index: 2;
45
50
 
46
51
  font-size: 0;
@@ -72,7 +77,8 @@
72
77
  &__information {
73
78
  width: 45rem;
74
79
  max-width: 75vw;
75
- padding: 0.625rem 3.25rem 0.625rem 1rem;
80
+ padding: spacing.space(0.625) spacing.space(0.325) spacing.space(0.625)
81
+ spacing.space(1);
76
82
 
77
83
  position: absolute;
78
84
  right: 0;
@@ -148,7 +154,7 @@
148
154
  }
149
155
 
150
156
  &__content-inner {
151
- padding: 2rem;
157
+ padding: spacing.space(2);
152
158
 
153
159
  @include colour.colour-background("page-background");
154
160
  }
@@ -212,7 +218,7 @@
212
218
  }
213
219
 
214
220
  &__content-inner {
215
- padding: 2rem 0;
221
+ padding: spacing.space(2) 0;
216
222
 
217
223
  background-color: transparent;
218
224
  }
@@ -221,7 +227,7 @@
221
227
  }
222
228
 
223
229
  &__body {
224
- margin-top: 1rem;
230
+ margin-top: spacing.space(1);
225
231
  }
226
232
  }
227
233
 
@@ -1 +1 @@
1
- .tna-template--system-theme .tna-background-contrast .tna-index-grid__item,.tna-background-contrast .tna-template--system-theme .tna-index-grid__item{--page-background: #f4f4f4;--background-tint: #e4e4e4;--font-base: #343338;--font-dark: rgb(0, 0, 0);--font-light: rgb(0 0 0/0.58);--icon-light: rgb(52 51 56/0.45);--link: #0062a8;--link-visited: #4c2c92;--focus-outline: rgb(0, 176, 255);--keyline: rgb(38 38 42/0.25);--keyline-dark: #26262a;--input-foreground: rgb(0, 0, 0);--input-background: rgb(255, 255, 255);--input-border: rgb(0, 0, 0);--button-text: rgb(255, 255, 255);--button-background: rgb(0, 0, 0);--button-hover-text: rgb(0, 0, 0);--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(0, 0, 0);--contrast-button-background: rgb(255, 255, 255);--contrast-button-hover-text: rgb(255, 255, 255);--contrast-button-hover-background: rgb(0, 0, 0);--accent-background: #111;--accent-background-light: #ededed;--accent-font-base: rgb(255, 255, 255);--accent-font-dark: rgb(255, 255, 255);--accent-font-light: rgb(255 255 255/0.7);--accent-icon-light: rgb(255 255 255/0.45);--accent-link: rgb(255, 255, 255);--accent-link-visited: #b9f;--accent-keyline: rgb(255 255 255/0.5);--accent-keyline-dark: rgb(255 255 255/0.8);--button-accent-text: rgb(0, 0, 0);--button-accent-background: rgb(140, 150, 148)}@media(prefers-contrast: more){.tna-template--system-theme .tna-background-contrast .tna-index-grid__item,.tna-background-contrast .tna-template--system-theme .tna-index-grid__item{--page-background: rgb(255, 255, 255);--background-tint: #e4e4e4;--font-base: rgb(0, 0, 0);--font-dark: rgb(0, 0, 0);--font-light: rgb(0, 0, 0);--icon-light: rgb(0 0 0/0.75);--link: #34d;--link-visited: #848;--focus-outline: rgb(253, 63, 3);--keyline: rgb(0, 0, 0);--keyline-dark: rgb(0, 0, 0);--input-foreground: rgb(0, 0, 0);--input-background: rgb(255, 255, 255);--input-border: rgb(0, 0, 0);--button-text: rgb(255, 255, 255);--button-background: rgb(0, 0, 0);--button-hover-text: rgb(0, 0, 0);--button-hover-background: rgb(255, 255, 255);--contrast-background: #f4f4f4;--contrast-font-base: rgb(0, 0, 0);--contrast-font-dark: rgb(0, 0, 0);--contrast-font-light: rgb(0, 0, 0);--contrast-icon-light: rgb(255 255 255/0.45);--contrast-link: #34d;--contrast-link-visited: #848;--contrast-keyline: rgb(0, 0, 0);--contrast-keyline-dark: rgb(0, 0, 0);--contrast-button-text: rgb(255, 255, 255);--contrast-button-background: rgb(0, 0, 0);--contrast-button-hover-text: rgb(0, 0, 0);--contrast-button-hover-background: rgb(255, 255, 255);--accent-background: #111;--accent-background-light: #ededed;--accent-font-base: rgb(255, 255, 255);--accent-font-dark: rgb(255, 255, 255);--accent-font-light: rgb(255 255 255/0.7);--accent-icon-light: rgb(255 255 255/0.45);--accent-link: rgb(255, 255, 255);--accent-link-visited: #b9f;--accent-keyline: rgb(255 255 255/0.5);--accent-keyline-dark: rgb(255 255 255/0.8);--button-accent-text: rgb(0, 0, 0);--button-accent-background: rgb(140, 150, 148)}}.tna-template--high-contrast-theme .tna-template--system-theme .tna-background-contrast .tna-index-grid__item,.tna-background-contrast .tna-template--high-contrast-theme .tna-template--system-theme .tna-index-grid__item,.tna-template--system-theme .tna-template--high-contrast-theme .tna-background-contrast .tna-index-grid__item,.tna-background-contrast .tna-template--system-theme .tna-template--high-contrast-theme .tna-index-grid__item{--page-background: rgb(255, 255, 255);--background-tint: #e4e4e4;--font-base: rgb(0, 0, 0);--font-dark: rgb(0, 0, 0);--font-light: rgb(0, 0, 0);--icon-light: rgb(0 0 0/0.75);--link: #34d;--link-visited: #848;--focus-outline: rgb(253, 63, 3);--keyline: rgb(0, 0, 0);--keyline-dark: rgb(0, 0, 0);--input-foreground: rgb(0, 0, 0);--input-background: rgb(255, 255, 255);--input-border: rgb(0, 0, 0);--button-text: rgb(255, 255, 255);--button-background: rgb(0, 0, 0);--button-hover-text: rgb(0, 0, 0);--button-hover-background: rgb(255, 255, 255);--contrast-background: #f4f4f4;--contrast-font-base: rgb(0, 0, 0);--contrast-font-dark: rgb(0, 0, 0);--contrast-font-light: rgb(0, 0, 0);--contrast-icon-light: rgb(255 255 255/0.45);--contrast-link: #34d;--contrast-link-visited: #848;--contrast-keyline: rgb(0, 0, 0);--contrast-keyline-dark: rgb(0, 0, 0);--contrast-button-text: rgb(255, 255, 255);--contrast-button-background: rgb(0, 0, 0);--contrast-button-hover-text: rgb(0, 0, 0);--contrast-button-hover-background: rgb(255, 255, 255);--accent-background: #111;--accent-background-light: #ededed;--accent-font-base: rgb(255, 255, 255);--accent-font-dark: rgb(255, 255, 255);--accent-font-light: rgb(255 255 255/0.7);--accent-icon-light: rgb(255 255 255/0.45);--accent-link: rgb(255, 255, 255);--accent-link-visited: #b9f;--accent-keyline: rgb(255 255 255/0.5);--accent-keyline-dark: rgb(255 255 255/0.8);--button-accent-text: rgb(0, 0, 0);--button-accent-background: rgb(140, 150, 148)}.tna-background-contrast .tna-index-grid__item{--background: var(--page-background)}@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{--page-background: #222;--background-tint: #333;--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(0, 0, 0);--input-border: rgb(255, 255, 255);--form-error: #ff3d3d;--button-text: rgb(0, 0, 0);--button-background: rgb(255, 255, 255);--button-hover-text: rgb(255, 255, 255);--button-hover-background: rgb(0, 0, 0);--contrast-background: #111;--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(0, 0, 0);--contrast-button-background: rgb(255, 255, 255);--contrast-button-hover-text: rgb(255, 255, 255);--contrast-button-hover-background: rgb(0, 0, 0);--accent-background: #111;--accent-background-light: #ededed;--accent-font-base: rgb(255, 255, 255);--accent-font-dark: rgb(255, 255, 255);--accent-font-light: rgb(255 255 255/0.7);--accent-icon-light: rgb(255 255 255/0.45);--accent-link: rgb(255, 255, 255);--accent-link-visited: #b9f;--accent-keyline: rgb(255 255 255/0.5);--accent-keyline-dark: rgb(255 255 255/0.8);--button-accent-text: rgb(0, 0, 0);--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{--page-background: #111;--background-tint: #333;--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(0, 0, 0);--input-border: rgb(255, 255, 255);--form-error: #ff6161;--button-text: rgb(0, 0, 0);--button-background: rgb(255, 255, 255);--button-hover-text: rgb(255, 255, 255);--button-hover-background: rgb(0, 0, 0);--contrast-background: rgb(0, 0, 0);--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(0, 0, 0);--contrast-button-background: rgb(255, 255, 255);--contrast-button-hover-text: rgb(255, 255, 255);--contrast-button-hover-background: rgb(0, 0, 0);--accent-background: #111;--accent-background-light: #ededed;--accent-font-base: rgb(255, 255, 255);--accent-font-dark: rgb(255, 255, 255);--accent-font-light: rgb(255 255 255/0.7);--accent-icon-light: rgb(255 255 255/0.45);--accent-link: rgb(255, 255, 255);--accent-link-visited: #b9f;--accent-keyline: rgb(255 255 255/0.5);--accent-keyline-dark: rgb(255 255 255/0.8);--button-accent-text: rgb(0, 0, 0);--button-accent-background: rgb(140, 150, 148)}}.tna-template--light-theme .tna-background-contrast .tna-index-grid__item,.tna-background-contrast .tna-template--light-theme .tna-index-grid__item{--page-background: #f4f4f4;--background-tint: #e4e4e4;--font-base: #343338;--font-dark: rgb(0, 0, 0);--font-light: rgb(0 0 0/0.58);--icon-light: rgb(52 51 56/0.45);--link: #0062a8;--link-visited: #4c2c92;--focus-outline: rgb(0, 176, 255);--keyline: rgb(38 38 42/0.25);--keyline-dark: #26262a;--input-foreground: rgb(0, 0, 0);--input-background: rgb(255, 255, 255);--input-border: rgb(0, 0, 0);--form-error: #c00;--button-text: rgb(255, 255, 255);--button-background: rgb(0, 0, 0);--button-hover-text: rgb(0, 0, 0);--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(0, 0, 0);--contrast-button-background: rgb(255, 255, 255);--contrast-button-hover-text: rgb(255, 255, 255);--contrast-button-hover-background: rgb(0, 0, 0);--accent-background: #111;--accent-background-light: #ededed;--accent-font-base: rgb(255, 255, 255);--accent-font-dark: rgb(255, 255, 255);--accent-font-light: rgb(255 255 255/0.7);--accent-icon-light: rgb(255 255 255/0.45);--accent-link: rgb(255, 255, 255);--accent-link-visited: #b9f;--accent-keyline: rgb(255 255 255/0.5);--accent-keyline-dark: rgb(255 255 255/0.8);--button-accent-text: rgb(0, 0, 0);--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{--page-background: #222;--background-tint: #333;--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(0, 0, 0);--input-border: rgb(255, 255, 255);--form-error: #ff3d3d;--button-text: rgb(0, 0, 0);--button-background: rgb(255, 255, 255);--button-hover-text: rgb(255, 255, 255);--button-hover-background: rgb(0, 0, 0);--contrast-background: #111;--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(0, 0, 0);--contrast-button-background: rgb(255, 255, 255);--contrast-button-hover-text: rgb(255, 255, 255);--contrast-button-hover-background: rgb(0, 0, 0);--accent-background: #111;--accent-background-light: #ededed;--accent-font-base: rgb(255, 255, 255);--accent-font-dark: rgb(255, 255, 255);--accent-font-light: rgb(255 255 255/0.7);--accent-icon-light: rgb(255 255 255/0.45);--accent-link: rgb(255, 255, 255);--accent-link-visited: #b9f;--accent-keyline: rgb(255 255 255/0.5);--accent-keyline-dark: rgb(255 255 255/0.8);--button-accent-text: rgb(0, 0, 0);--button-accent-background: rgb(140, 150, 148)}.tna-template--high-contrast-theme .tna-background-contrast .tna-index-grid__item,.tna-background-contrast .tna-template--high-contrast-theme .tna-index-grid__item{--page-background: rgb(255, 255, 255);--background-tint: #e4e4e4;--font-base: rgb(0, 0, 0);--font-dark: rgb(0, 0, 0);--font-light: rgb(0, 0, 0);--icon-light: rgb(0 0 0/0.75);--link: #34d;--link-visited: #848;--focus-outline: rgb(253, 63, 3);--keyline: rgb(0, 0, 0);--keyline-dark: rgb(0, 0, 0);--input-foreground: rgb(0, 0, 0);--input-background: rgb(255, 255, 255);--input-border: rgb(0, 0, 0);--form-error: #c00;--button-text: rgb(255, 255, 255);--button-background: rgb(0, 0, 0);--button-hover-text: rgb(0, 0, 0);--button-hover-background: rgb(255, 255, 255);--contrast-background: #f4f4f4;--contrast-font-base: rgb(0, 0, 0);--contrast-font-dark: rgb(0, 0, 0);--contrast-font-light: rgb(0, 0, 0);--contrast-icon-light: rgb(255 255 255/0.45);--contrast-link: #34d;--contrast-link-visited: #848;--contrast-keyline: rgb(0, 0, 0);--contrast-keyline-dark: rgb(0, 0, 0);--contrast-button-text: rgb(255, 255, 255);--contrast-button-background: rgb(0, 0, 0);--contrast-button-hover-text: rgb(0, 0, 0);--contrast-button-hover-background: rgb(255, 255, 255);--accent-background: #111;--accent-background-light: #ededed;--accent-font-base: rgb(255, 255, 255);--accent-font-dark: rgb(255, 255, 255);--accent-font-light: rgb(255 255 255/0.7);--accent-icon-light: rgb(255 255 255/0.45);--accent-link: rgb(255, 255, 255);--accent-link-visited: #b9f;--accent-keyline: rgb(255 255 255/0.5);--accent-keyline-dark: rgb(255 255 255/0.8);--button-accent-text: rgb(0, 0, 0);--button-accent-background: rgb(140, 150, 148)}.tna-template--high-contrast-theme.tna-template--dark-theme .tna-background-contrast .tna-index-grid__item,.tna-background-contrast .tna-template--high-contrast-theme.tna-template--dark-theme .tna-index-grid__item{--page-background: #111;--background-tint: #333;--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(0, 0, 0);--input-border: rgb(255, 255, 255);--form-error: #ff6161;--button-text: rgb(0, 0, 0);--button-background: rgb(255, 255, 255);--button-hover-text: rgb(255, 255, 255);--button-hover-background: rgb(0, 0, 0);--contrast-background: rgb(0, 0, 0);--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(0, 0, 0);--contrast-button-background: rgb(255, 255, 255);--contrast-button-hover-text: rgb(255, 255, 255);--contrast-button-hover-background: rgb(0, 0, 0);--accent-background: #111;--accent-background-light: #ededed;--accent-font-base: rgb(255, 255, 255);--accent-font-dark: rgb(255, 255, 255);--accent-font-light: rgb(255 255 255/0.7);--accent-icon-light: rgb(255 255 255/0.45);--accent-link: rgb(255, 255, 255);--accent-link-visited: #b9f;--accent-keyline: rgb(255 255 255/0.5);--accent-keyline-dark: rgb(255 255 255/0.8);--button-accent-text: rgb(0, 0, 0);--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);color:rgb(255 255 255/0.95);color:var(--font-base)}.tna-index-grid,.tna-index-grid__items{margin-top:2rem}.tna-index-grid:first-child,.tna-index-grid__items:first-child{margin-top:0}.tna-index-grid__items{margin-bottom:0;display:flex;gap:2rem 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 #26262a solid;border:1px var(--keyline-dark) solid}}.tna-template--high-contrast-theme .tna-index-grid__item{border:1px #26262a solid;border:1px var(--keyline-dark) solid}@media(prefers-contrast: more){.tna-template--system-theme .tna-index-grid__item{border:1px #26262a solid;border:1px var(--keyline-dark) solid}}.tna-index-grid__item-image{width:100%;height:auto}.tna-index-grid__item-content{padding:1rem;flex:1}.tna-index-grid__item-label{position:absolute;top:.5rem;left:.5rem}.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:rgb(0 0 0/0.58);color:var(--font-light);font-size:1rem}/*# sourceMappingURL=index-grid.css.map */
1
+ .tna-template--system-theme .tna-background-contrast .tna-index-grid__item,.tna-background-contrast .tna-template--system-theme .tna-index-grid__item{--page-background: #f4f4f4;--background-tint: #e4e4e4;--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: #0062a8;--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: #101112;--accent-background-light: #ededed;--accent-font-base: rgb(255, 255, 255);--accent-font-dark: rgb(255, 255, 255);--accent-font-light: rgb(255 255 255/0.7);--accent-icon-light: rgb(255 255 255/0.45);--accent-link: rgb(255, 255, 255);--accent-link-visited: #b9f;--accent-keyline: rgb(255 255 255/0.5);--accent-keyline-dark: rgb(255 255 255/0.8);--button-accent-text: rgb(1, 1, 1);--button-accent-background: rgb(140, 150, 148)}@media(prefers-contrast: more){.tna-template--system-theme .tna-background-contrast .tna-index-grid__item,.tna-background-contrast .tna-template--system-theme .tna-index-grid__item{--page-background: rgb(255, 255, 255);--background-tint: #e4e4e4;--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: #101112;--accent-background-light: #ededed;--accent-font-base: rgb(255, 255, 255);--accent-font-dark: rgb(255, 255, 255);--accent-font-light: rgb(255 255 255/0.7);--accent-icon-light: rgb(255 255 255/0.45);--accent-link: rgb(255, 255, 255);--accent-link-visited: #b9f;--accent-keyline: rgb(255 255 255/0.5);--accent-keyline-dark: rgb(255 255 255/0.8);--button-accent-text: rgb(1, 1, 1);--button-accent-background: rgb(140, 150, 148)}}.tna-template--high-contrast-theme .tna-template--system-theme .tna-background-contrast .tna-index-grid__item,.tna-background-contrast .tna-template--high-contrast-theme .tna-template--system-theme .tna-index-grid__item,.tna-template--system-theme .tna-template--high-contrast-theme .tna-background-contrast .tna-index-grid__item,.tna-background-contrast .tna-template--system-theme .tna-template--high-contrast-theme .tna-index-grid__item{--page-background: rgb(255, 255, 255);--background-tint: #e4e4e4;--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: #101112;--accent-background-light: #ededed;--accent-font-base: rgb(255, 255, 255);--accent-font-dark: rgb(255, 255, 255);--accent-font-light: rgb(255 255 255/0.7);--accent-icon-light: rgb(255 255 255/0.45);--accent-link: rgb(255, 255, 255);--accent-link-visited: #b9f;--accent-keyline: rgb(255 255 255/0.5);--accent-keyline-dark: rgb(255 255 255/0.8);--button-accent-text: rgb(1, 1, 1);--button-accent-background: rgb(140, 150, 148)}.tna-background-contrast .tna-index-grid__item{--background: var(--page-background)}@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{--page-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);--form-error: #ff3d3d;--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: #101112;--accent-background-light: #ededed;--accent-font-base: rgb(255, 255, 255);--accent-font-dark: rgb(255, 255, 255);--accent-font-light: rgb(255 255 255/0.7);--accent-icon-light: rgb(255 255 255/0.45);--accent-link: rgb(255, 255, 255);--accent-link-visited: #b9f;--accent-keyline: rgb(255 255 255/0.5);--accent-keyline-dark: rgb(255 255 255/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{--page-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);--form-error: #ff6161;--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: #101112;--accent-background-light: #ededed;--accent-font-base: rgb(255, 255, 255);--accent-font-dark: rgb(255, 255, 255);--accent-font-light: rgb(255 255 255/0.7);--accent-icon-light: rgb(255 255 255/0.45);--accent-link: rgb(255, 255, 255);--accent-link-visited: #b9f;--accent-keyline: rgb(255 255 255/0.5);--accent-keyline-dark: rgb(255 255 255/0.8);--button-accent-text: rgb(1, 1, 1);--button-accent-background: rgb(140, 150, 148)}}.tna-template--light-theme .tna-background-contrast .tna-index-grid__item,.tna-background-contrast .tna-template--light-theme .tna-index-grid__item{--page-background: #f4f4f4;--background-tint: #e4e4e4;--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: #0062a8;--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);--form-error: #c00;--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: #101112;--accent-background-light: #ededed;--accent-font-base: rgb(255, 255, 255);--accent-font-dark: rgb(255, 255, 255);--accent-font-light: rgb(255 255 255/0.7);--accent-icon-light: rgb(255 255 255/0.45);--accent-link: rgb(255, 255, 255);--accent-link-visited: #b9f;--accent-keyline: rgb(255 255 255/0.5);--accent-keyline-dark: rgb(255 255 255/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{--page-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);--form-error: #ff3d3d;--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: #101112;--accent-background-light: #ededed;--accent-font-base: rgb(255, 255, 255);--accent-font-dark: rgb(255, 255, 255);--accent-font-light: rgb(255 255 255/0.7);--accent-icon-light: rgb(255 255 255/0.45);--accent-link: rgb(255, 255, 255);--accent-link-visited: #b9f;--accent-keyline: rgb(255 255 255/0.5);--accent-keyline-dark: rgb(255 255 255/0.8);--button-accent-text: rgb(1, 1, 1);--button-accent-background: rgb(140, 150, 148)}.tna-template--high-contrast-theme .tna-background-contrast .tna-index-grid__item,.tna-background-contrast .tna-template--high-contrast-theme .tna-index-grid__item{--page-background: rgb(255, 255, 255);--background-tint: #e4e4e4;--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);--form-error: #c00;--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: #101112;--accent-background-light: #ededed;--accent-font-base: rgb(255, 255, 255);--accent-font-dark: rgb(255, 255, 255);--accent-font-light: rgb(255 255 255/0.7);--accent-icon-light: rgb(255 255 255/0.45);--accent-link: rgb(255, 255, 255);--accent-link-visited: #b9f;--accent-keyline: rgb(255 255 255/0.5);--accent-keyline-dark: rgb(255 255 255/0.8);--button-accent-text: rgb(1, 1, 1);--button-accent-background: rgb(140, 150, 148)}.tna-template--high-contrast-theme.tna-template--dark-theme .tna-background-contrast .tna-index-grid__item,.tna-background-contrast .tna-template--high-contrast-theme.tna-template--dark-theme .tna-index-grid__item{--page-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);--form-error: #ff6161;--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: #101112;--accent-background-light: #ededed;--accent-font-base: rgb(255, 255, 255);--accent-font-dark: rgb(255, 255, 255);--accent-font-light: rgb(255 255 255/0.7);--accent-icon-light: rgb(255 255 255/0.45);--accent-link: rgb(255, 255, 255);--accent-link-visited: #b9f;--accent-keyline: rgb(255 255 255/0.5);--accent-keyline-dark: rgb(255 255 255/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);color:rgb(255 255 255/0.95);color:var(--font-base)}.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 #26262a solid;border:1px var(--keyline-dark) solid}}.tna-template--high-contrast-theme .tna-index-grid__item{border:1px #26262a solid;border:1px var(--keyline-dark) solid}@media(prefers-contrast: more){.tna-template--system-theme .tna-index-grid__item{border:1px #26262a solid;border:1px var(--keyline-dark) 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:rgb(1 1 1/0.58);color:var(--font-light);font-size:1rem}/*# sourceMappingURL=index-grid.css.map */