@biggive/components 202303031057.0.0 → 202303031447.0.0

package/dist/cjs/biggive-back-to-top_27.cjs.entry.js

@@ -513,7 +513,7 @@ const BiggiveImageFeature = class {
 };
 BiggiveImageFeature.style = biggiveImageFeatureCss;
 
-const biggiveMainMenuCss = "a{color:inherit;text-decoration:underline}a:hover{text-decoration:none}:host{display:block}*{margin:0;padding:0;box-sizing:border-box;font-family:\"Euclid Triangle\", sans-serif}a[class^=icon-],a[class*=icon-]{padding-left:20px;background-repeat:no-repeat;background-size:auto 10px;background-position:left center}a.icon-green{background-image:url(/assets/images/triangles-combined.svg)}a.icon-children{background-image:url(/assets/images/triangles-combined-children.svg)}a.icon-christmas{background-image:url(/assets/images/triangles-combined-christmas-challenge.svg)}a.icon-green-match{background-image:url(/assets/images/triangles-combined-green-match.svg)}a.icon-women-girls{background-image:url(/assets/images/triangles-combined-women-girls.svg)}a.icon-mental-health{background-image:url(/assets/images/triangles-combined-mental-health.svg)}a.icon-anchor-match{background-image:url(/assets/images/triangles-combined-anchor.svg)}a.icon-emergency{background-image:url(/assets/images/triangles-combined-emergency.svg)}.mobile-only{display:none !important}.row-top{padding:10px 30px;background-color:#2C089B;display:flex}.row-top .social-icon-wrap{margin-right:15px}.row-top .nav-secondary{margin-left:auto;display:grid}.row-top .nav-secondary ul{list-style:none;display:inline-flex;margin:auto}.row-top .nav-secondary li{border-right:1px solid #FFFFFF;height:fit-content;padding:0 10px}.row-top .nav-secondary li:last-child{border-right:0;padding-right:0}.row-top .nav-secondary li a{color:#FFFFFF;text-decoration:none}.row-top .social-icon-wrap{display:flex}.row-top .social-icon-wrap .social-icon-item{margin-right:15px}nav{top:0;left:0;width:100%;height:100%;height:70px;background:white;z-index:99;box-shadow:0 1px 2px rgba(0, 0, 0, 0.2)}nav .navbar{height:100%;width:100%;display:flex;align-items:center;justify-content:space-between;margin:auto;padding:0 50px}nav .navbar .nav-links{line-height:70px;height:100%}nav .navbar .nav-links .sidebar-logo{display:none}nav .navbar .nav-links .links{display:flex}nav .navbar .nav-links .links li{position:relative;display:flex;align-items:center;justify-content:space-between;list-style:none;padding:0 30px}nav .navbar .nav-links .links li a{height:100%;text-decoration:none;white-space:nowrap;color:black;font-size:17px;font-weight:500}nav .navbar .nav-links .links li .sub-menu{position:absolute;top:70px;left:0;line-height:40px;box-shadow:0 1px 2px rgba(0, 0, 0, 0.2);border-radius:0 0 4px 4px;display:none;z-index:2;background-color:inherit}nav .navbar .nav-links .links li .sub-menu li{padding:0 22px;border-bottom:1px solid rgba(255, 255, 255, 0.1)}nav .navbar .nav-links .links li .sub-menu a{color:black;font-size:15px;font-weight:500}nav .navbar .nav-links .links li .sub-menu .more .sub-sub-menu{position:absolute;top:0;left:100%;border-radius:0 4px 4px 4px;z-index:1;display:none}nav .navbar .nav-links .links li .arrow{margin-left:5px;text-align:center;display:inline-block;color:black;transition:all 0.3s ease}nav .navbar .nav-links .links li .arrow.transform-90{transform:rotate(90deg)}nav .navbar .logo{min-width:180px;width:180px}nav .navbar .logo a{font-size:30px;color:black;text-decoration:none;font-weight:600;display:grid}nav .navbar .bx-menu{display:none}@media (hover: hover){.row-top .nav-secondary li a:hover{border-bottom-color:#FFFFFF;color:#FFFFFF}nav .navbar .nav-links .links li .sub-menu .more:hover .sub-sub-menu{display:block}nav .navbar .nav-links .links li:hover .sub-menu-arrow{transform:rotate(90deg)}nav .navbar .nav-links .links li:hover .sub-menu{display:block;background-color:white}nav .navbar .nav-links .links li:hover .sub-menu .sub-sub-menu{background-color:white}}@media (max-width: 1200px){nav .navbar .logo{min-width:120px;width:120px}nav .navbar .nav-links .links li{padding:0 7px}nav .navbar .nav-links .links li a{font-size:15px}nav .navbar .nav-links .links li .sub-menu a{font-size:13px}}@media (max-width: 968px){.mobile-only{display:block !important}.row-top{display:none}nav{height:60px}nav .navbar{padding:0px 25px}nav .navbar .bx-menu{display:block;font-size:25px;color:black}nav .navbar .nav-links{position:fixed;top:0;left:-100%;display:block;max-width:450px;width:100%;background:white;line-height:40px;padding:20px;box-shadow:0 5px 10px rgba(0, 0, 0, 0.2);transition:all 0.5s ease;z-index:1000;overflow-y:scroll}nav .navbar .nav-links .sidebar-logo{display:flex;align-items:center;justify-content:space-between}nav .navbar .nav-links .sidebar-logo a{display:contents}nav .navbar .nav-links .sidebar-logo a #mobileLogo{width:130px}nav .navbar .nav-links .sidebar-logo #x{margin-right:15px}nav .navbar .nav-links .sidebar-logo i{font-size:25px;color:black}nav .navbar .nav-links .mobile-social-icon-wrap{margin-top:20px}nav .navbar .nav-links .links{display:block;margin-top:20px}nav .navbar .nav-links .links li{display:block;border-bottom:1px solid #e6e6e6}nav .navbar .nav-links .links li a{width:100%;display:block}nav .navbar .nav-links .links li .display-sub-menu{display:block !important}nav .navbar .nav-links .links li .sub-menu{position:relative;top:0;box-shadow:none;display:none}nav .navbar .nav-links .links li .sub-menu li{border-bottom:none}nav .navbar .nav-links .links li .sub-menu .sub-sub-menu{display:none;position:relative;left:0}nav .navbar .nav-links .links li .sub-menu .sub-sub-menu li{display:flex;align-items:center;justify-content:space-between}nav .navbar .nav-links .links li .sub-menu .more span{display:flex;align-items:center}nav .navbar .nav-links .links li .sub-menu .more .sub-sub-menu.display-sub-menu{position:initial}}@media (max-width: 968px) and (max-width: 370px){nav .navbar .nav-links{max-width:100%}}";
+const biggiveMainMenuCss = "a{color:inherit;text-decoration:underline}a:hover{text-decoration:none}:host{display:block !important}:host(.fixed){position:fixed;top:0;left:0;right:0;z-index:10}*{margin:0;padding:0;box-sizing:border-box;font-family:\"Euclid Triangle\", sans-serif}a[class^=icon-],a[class*=icon-]{padding-left:20px;background-repeat:no-repeat;background-size:auto 10px;background-position:left center}a.icon-green{background-image:url(/assets/images/triangles-combined.svg)}a.icon-children{background-image:url(/assets/images/triangles-combined-children.svg)}a.icon-christmas{background-image:url(/assets/images/triangles-combined-christmas-challenge.svg)}a.icon-green-match{background-image:url(/assets/images/triangles-combined-green-match.svg)}a.icon-women-girls{background-image:url(/assets/images/triangles-combined-women-girls.svg)}a.icon-mental-health{background-image:url(/assets/images/triangles-combined-mental-health.svg)}a.icon-anchor-match{background-image:url(/assets/images/triangles-combined-anchor.svg)}a.icon-emergency{background-image:url(/assets/images/triangles-combined-emergency.svg)}.mobile-only{display:none !important}.row-top{padding:10px 30px;background-color:#2C089B;display:flex}.row-top .social-icon-wrap{margin-right:15px}.row-top .nav-secondary{margin-left:auto;display:grid}.row-top .nav-secondary ul{list-style:none;display:inline-flex;margin:auto}.row-top .nav-secondary li{border-right:1px solid #FFFFFF;height:fit-content;padding:0 10px}.row-top .nav-secondary li:last-child{border-right:0;padding-right:0}.row-top .nav-secondary li a{color:#FFFFFF;text-decoration:none}.row-top .social-icon-wrap{display:flex}.row-top .social-icon-wrap .social-icon-item{margin-right:15px}nav{top:0;left:0;width:100%;height:100%;height:70px;background:white;z-index:99;box-shadow:0 1px 2px rgba(0, 0, 0, 0.2)}nav .navbar{height:100%;width:100%;display:flex;align-items:center;justify-content:space-between;margin:auto;padding:0 50px}nav .navbar .nav-links{line-height:70px;height:100%}nav .navbar .nav-links .sidebar-logo{display:none}nav .navbar .nav-links .links{display:flex}nav .navbar .nav-links .links li{position:relative;display:flex;align-items:center;justify-content:space-between;list-style:none;padding:0 30px}nav .navbar .nav-links .links li a{height:100%;text-decoration:none;white-space:nowrap;color:black;font-size:17px;font-weight:500}nav .navbar .nav-links .links li .sub-menu{position:absolute;top:70px;left:0;line-height:40px;box-shadow:0 1px 2px rgba(0, 0, 0, 0.2);border-radius:0 0 4px 4px;display:none;z-index:2;background-color:inherit}nav .navbar .nav-links .links li .sub-menu li{padding:0 22px;border-bottom:1px solid rgba(255, 255, 255, 0.1)}nav .navbar .nav-links .links li .sub-menu a{color:black;font-size:15px;font-weight:500}nav .navbar .nav-links .links li .sub-menu .more .sub-sub-menu{position:absolute;top:0;left:100%;border-radius:0 4px 4px 4px;z-index:1;display:none}nav .navbar .nav-links .links li .arrow{margin-left:5px;text-align:center;display:inline-block;color:black;transition:all 0.3s ease}nav .navbar .nav-links .links li .arrow.transform-90{transform:rotate(90deg)}nav .navbar .logo{min-width:180px;width:180px}nav .navbar .logo a{font-size:30px;color:black;text-decoration:none;font-weight:600;display:grid}nav .navbar .bx-menu{display:none}@media (hover: hover){.row-top .nav-secondary li a:hover{border-bottom-color:#FFFFFF;color:#FFFFFF}nav .navbar .nav-links .links li .sub-menu .more:hover .sub-sub-menu{display:block}nav .navbar .nav-links .links li:hover .sub-menu-arrow{transform:rotate(90deg)}nav .navbar .nav-links .links li:hover .sub-menu{display:block;background-color:white}nav .navbar .nav-links .links li:hover .sub-menu .sub-sub-menu{background-color:white}}@media (max-width: 1200px){nav .navbar .logo{min-width:120px;width:120px}nav .navbar .nav-links .links li{padding:0 7px}nav .navbar .nav-links .links li a{font-size:15px}nav .navbar .nav-links .links li .sub-menu a{font-size:13px}}@media (max-width: 968px){.mobile-only{display:block !important}.row-top{display:none}nav{height:60px}nav .navbar{padding:0px 25px}nav .navbar .bx-menu{display:block;font-size:25px;color:black}nav .navbar .nav-links{position:fixed;top:0;left:-100%;display:block;max-width:450px;width:100%;background:white;line-height:40px;padding:20px;box-shadow:0 5px 10px rgba(0, 0, 0, 0.2);transition:all 0.5s ease;z-index:1000;overflow-y:scroll}nav .navbar .nav-links .sidebar-logo{display:flex;align-items:center;justify-content:space-between}nav .navbar .nav-links .sidebar-logo a{display:contents}nav .navbar .nav-links .sidebar-logo a #mobileLogo{width:130px}nav .navbar .nav-links .sidebar-logo #x{margin-right:15px}nav .navbar .nav-links .sidebar-logo i{font-size:25px;color:black}nav .navbar .nav-links .mobile-social-icon-wrap{margin-top:20px}nav .navbar .nav-links .links{display:block;margin-top:20px}nav .navbar .nav-links .links li{display:block;border-bottom:1px solid #e6e6e6}nav .navbar .nav-links .links li a{width:100%;display:block}nav .navbar .nav-links .links li .display-sub-menu{display:block !important}nav .navbar .nav-links .links li .sub-menu{position:relative;top:0;box-shadow:none;display:none}nav .navbar .nav-links .links li .sub-menu li{border-bottom:none}nav .navbar .nav-links .links li .sub-menu .sub-sub-menu{display:none;position:relative;left:0}nav .navbar .nav-links .links li .sub-menu .sub-sub-menu li{display:flex;align-items:center;justify-content:space-between}nav .navbar .nav-links .links li .sub-menu .more span{display:flex;align-items:center}nav .navbar .nav-links .links li .sub-menu .more .sub-sub-menu.display-sub-menu{position:initial}}@media (max-width: 968px) and (max-width: 370px){nav .navbar .nav-links{max-width:100%}}";
 
 const BiggiveMainMenu = class {
   constructor(hostRef) {
@@ -563,7 +563,15 @@ const BiggiveMainMenu = class {
       });
     }
   }
+  setHeaderSize() {
+    document.body.style.paddingTop = this.host.offsetHeight + 'px';
+  }
   componentDidRender() {
+    this.host.classList.add('fixed');
+    window.addEventListener('resize', () => {
+      this.setHeaderSize();
+    });
+    this.setHeaderSize();
     const subMenuElements = this.host.querySelectorAll('.sub-menu');
     subMenuElements.forEach(subMenuElement => {
       var _a;

package/dist/collection/components/biggive-article-card/biggive-article-card.css

@@ -1,3 +1,6 @@
+/**
+ * @see brandColour in src/globals/brand-colour.ts . This and that should be updated together.
+ */
 a {
   color: inherit;
   text-decoration: underline;

package/dist/collection/components/biggive-back-to-top/biggive-back-to-top.css

@@ -1,3 +1,6 @@
+/**
+ * @see brandColour in src/globals/brand-colour.ts . This and that should be updated together.
+ */
 a {
   color: inherit;
   text-decoration: underline;

package/dist/collection/components/biggive-basic-card/biggive-basic-card.css

@@ -1,3 +1,6 @@
+/**
+ * @see brandColour in src/globals/brand-colour.ts . This and that should be updated together.
+ */
 a {
   color: inherit;
   text-decoration: underline;

package/dist/collection/components/biggive-beneficiary-icon/biggive-beneficiary-icon.css

@@ -1,3 +1,6 @@
+/**
+ * @see brandColour in src/globals/brand-colour.ts . This and that should be updated together.
+ */
 a {
   color: inherit;
   text-decoration: underline;

package/dist/collection/components/biggive-biography-card/biggive-biography-card.css

@@ -1,3 +1,6 @@
+/**
+ * @see brandColour in src/globals/brand-colour.ts . This and that should be updated together.
+ */
 a {
   color: inherit;
   text-decoration: underline;

package/dist/collection/components/biggive-boxed-content/biggive-boxed-content.css

@@ -1,3 +1,6 @@
+/**
+ * @see brandColour in src/globals/brand-colour.ts . This and that should be updated together.
+ */
 a {
   color: inherit;
   text-decoration: underline;

package/dist/collection/components/biggive-branded-image/biggive-branded-image.css

@@ -1,3 +1,6 @@
+/**
+ * @see brandColour in src/globals/brand-colour.ts . This and that should be updated together.
+ */
 a {
   color: inherit;
   text-decoration: underline;

package/dist/collection/components/biggive-button/biggive-button.css

@@ -1,3 +1,6 @@
+/**
+ * @see brandColour in src/globals/brand-colour.ts . This and that should be updated together.
+ */
 a {
   color: inherit;
   text-decoration: underline;

package/dist/collection/components/biggive-call-to-action/biggive-call-to-action.css

@@ -1,3 +1,6 @@
+/**
+ * @see brandColour in src/globals/brand-colour.ts . This and that should be updated together.
+ */
 a {
   color: inherit;
   text-decoration: underline;

package/dist/collection/components/biggive-campaign-card/biggive-campaign-card.css

@@ -1,3 +1,6 @@
+/**
+ * @see brandColour in src/globals/brand-colour.ts . This and that should be updated together.
+ */
 a {
   color: inherit;
   text-decoration: underline;

package/dist/collection/components/biggive-campaign-card-filter-grid/biggive-campaign-card-filter-grid.css

@@ -1,3 +1,6 @@
+/**
+ * @see brandColour in src/globals/brand-colour.ts . This and that should be updated together.
+ */
 a {
   color: inherit;
   text-decoration: underline;

package/dist/collection/components/biggive-campaign-highlights/biggive-campaign-highlights.css

@@ -1,3 +1,6 @@
+/**
+ * @see brandColour in src/globals/brand-colour.ts . This and that should be updated together.
+ */
 a {
   color: inherit;
   text-decoration: underline;

package/dist/collection/components/biggive-category-icon/biggive-category-icon.css

@@ -1,3 +1,6 @@
+/**
+ * @see brandColour in src/globals/brand-colour.ts . This and that should be updated together.
+ */
 a {
   color: inherit;
   text-decoration: underline;

package/dist/collection/components/biggive-footer/biggive-footer.css

@@ -1,3 +1,6 @@
+/**
+ * @see brandColour in src/globals/brand-colour.ts . This and that should be updated together.
+ */
 a {
   color: inherit;
   text-decoration: underline;

package/dist/collection/components/biggive-form-field-select/biggive-form-field-select.css

@@ -1,3 +1,6 @@
+/**
+ * @see brandColour in src/globals/brand-colour.ts . This and that should be updated together.
+ */
 a {
   color: inherit;
   text-decoration: underline;

package/dist/collection/components/biggive-form-field-select-option/biggive-form-field-select-option.css

@@ -1,3 +1,6 @@
+/**
+ * @see brandColour in src/globals/brand-colour.ts . This and that should be updated together.
+ */
 a {
   color: inherit;
   text-decoration: underline;

package/dist/collection/components/biggive-formatted-text/biggive-formatted-text.css

@@ -1,3 +1,6 @@
+/**
+ * @see brandColour in src/globals/brand-colour.ts . This and that should be updated together.
+ */
 a {
   color: inherit;
   text-decoration: underline;

package/dist/collection/components/biggive-grid/biggive-grid.css

@@ -1,3 +1,6 @@
+/**
+ * @see brandColour in src/globals/brand-colour.ts . This and that should be updated together.
+ */
 a {
   color: inherit;
   text-decoration: underline;

package/dist/collection/components/biggive-header/biggive-header.css

@@ -1,3 +1,6 @@
+/**
+ * @see brandColour in src/globals/brand-colour.ts . This and that should be updated together.
+ */
 a {
   color: inherit;
   text-decoration: underline;

package/dist/collection/components/biggive-heading/biggive-heading.css

@@ -1,3 +1,6 @@
+/**
+ * @see brandColour in src/globals/brand-colour.ts . This and that should be updated together.
+ */
 a {
   color: inherit;
   text-decoration: underline;

package/dist/collection/components/biggive-heading/biggive-heading.js

@@ -80,7 +80,7 @@ export class BiggiveHeading {
         "mutable": false,
         "complexType": {
           "original": "brandColour",
-          "resolved": "\"black\" | \"brand-1\" | \"brand-2\" | \"brand-3\" | \"brand-4\" | \"brand-5\" | \"brand-6\" | \"grey-dark\" | \"grey-light\" | \"primary\" | \"secondary\" | \"tertiary\" | \"white\"",
+          "resolved": "\"black\" | \"brand-1\" | \"brand-2\" | \"brand-3\" | \"brand-4\" | \"brand-5\" | \"brand-6\" | \"grey-dark\" | \"grey-extra-light\" | \"grey-light\" | \"grey-medium\" | \"primary\" | \"secondary\" | \"tertiary\" | \"white\"",
           "references": {
             "brandColour": {
               "location": "import",
@@ -203,7 +203,7 @@ export class BiggiveHeading {
         "mutable": false,
         "complexType": {
           "original": "brandColour",
-          "resolved": "\"black\" | \"brand-1\" | \"brand-2\" | \"brand-3\" | \"brand-4\" | \"brand-5\" | \"brand-6\" | \"grey-dark\" | \"grey-light\" | \"primary\" | \"secondary\" | \"tertiary\" | \"white\"",
+          "resolved": "\"black\" | \"brand-1\" | \"brand-2\" | \"brand-3\" | \"brand-4\" | \"brand-5\" | \"brand-6\" | \"grey-dark\" | \"grey-extra-light\" | \"grey-light\" | \"grey-medium\" | \"primary\" | \"secondary\" | \"tertiary\" | \"white\"",
           "references": {
             "brandColour": {
               "location": "import",

package/dist/collection/components/biggive-hero-image/biggive-hero-image.css

@@ -1,3 +1,6 @@
+/**
+ * @see brandColour in src/globals/brand-colour.ts . This and that should be updated together.
+ */
 a {
   color: inherit;
   text-decoration: underline;

package/dist/collection/components/biggive-icon-group/biggive-icon-group.css

@@ -1,3 +1,6 @@
+/**
+ * @see brandColour in src/globals/brand-colour.ts . This and that should be updated together.
+ */
 a {
   color: inherit;
   text-decoration: underline;

package/dist/collection/components/biggive-image/biggive-image.css

@@ -1,3 +1,6 @@
+/**
+ * @see brandColour in src/globals/brand-colour.ts . This and that should be updated together.
+ */
 a {
   color: inherit;
   text-decoration: underline;

package/dist/collection/components/biggive-image-feature/biggive-image-feature.css

@@ -1,3 +1,6 @@
+/**
+ * @see brandColour in src/globals/brand-colour.ts . This and that should be updated together.
+ */
 a {
   color: inherit;
   text-decoration: underline;

package/dist/collection/components/biggive-main-menu/biggive-main-menu.css

@@ -1,3 +1,6 @@
+/**
+ * @see brandColour in src/globals/brand-colour.ts . This and that should be updated together.
+ */
 a {
   color: inherit;
   text-decoration: underline;
@@ -7,7 +10,15 @@ a:hover {
 }
 
 :host {
-  display: block;
+  display: block !important;
+}
+
+:host(.fixed) {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  z-index: 10;
 }
 
 * {

package/dist/collection/components/biggive-main-menu/biggive-main-menu.js

@@ -46,7 +46,15 @@ export class BiggiveMainMenu {
       });
     }
   }
+  setHeaderSize() {
+    document.body.style.paddingTop = this.host.offsetHeight + 'px';
+  }
   componentDidRender() {
+    this.host.classList.add('fixed');
+    window.addEventListener('resize', () => {
+      this.setHeaderSize();
+    });
+    this.setHeaderSize();
     const subMenuElements = this.host.querySelectorAll('.sub-menu');
     subMenuElements.forEach(subMenuElement => {
       var _a;

package/dist/collection/components/biggive-misc-icon/biggive-misc-icon.css

@@ -1,3 +1,6 @@
+/**
+ * @see brandColour in src/globals/brand-colour.ts . This and that should be updated together.
+ */
 a {
   color: inherit;
   text-decoration: underline;

package/dist/collection/components/biggive-nav-group/biggive-nav-group.css

@@ -1,3 +1,6 @@
+/**
+ * @see brandColour in src/globals/brand-colour.ts . This and that should be updated together.
+ */
 a {
   color: inherit;
   text-decoration: underline;

package/dist/collection/components/biggive-nav-item/biggive-nav-item.css

@@ -1,3 +1,6 @@
+/**
+ * @see brandColour in src/globals/brand-colour.ts . This and that should be updated together.
+ */
 a {
   color: inherit;
   text-decoration: underline;

package/dist/collection/components/biggive-page-column/biggive-page-column.css

@@ -1,3 +1,6 @@
+/**
+ * @see brandColour in src/globals/brand-colour.ts . This and that should be updated together.
+ */
 a {
   color: inherit;
   text-decoration: underline;

package/dist/collection/components/biggive-page-columns/biggive-page-columns.css

@@ -1,3 +1,6 @@
+/**
+ * @see brandColour in src/globals/brand-colour.ts . This and that should be updated together.
+ */
 a {
   color: inherit;
   text-decoration: underline;

package/dist/collection/components/biggive-page-section/biggive-page-section.css

@@ -1,3 +1,6 @@
+/**
+ * @see brandColour in src/globals/brand-colour.ts . This and that should be updated together.
+ */
 a {
   color: inherit;
   text-decoration: underline;

package/dist/collection/components/biggive-popup/biggive-popup.css

@@ -1,3 +1,6 @@
+/**
+ * @see brandColour in src/globals/brand-colour.ts . This and that should be updated together.
+ */
 a {
   color: inherit;
   text-decoration: underline;

package/dist/collection/components/biggive-popup-standalone/biggive-popup-standalone.css

@@ -1,3 +1,6 @@
+/**
+ * @see brandColour in src/globals/brand-colour.ts . This and that should be updated together.
+ */
 a {
   color: inherit;
   text-decoration: underline;

package/dist/collection/components/biggive-progress-bar/biggive-progress-bar.css

@@ -1,3 +1,6 @@
+/**
+ * @see brandColour in src/globals/brand-colour.ts . This and that should be updated together.
+ */
 a {
   color: inherit;
   text-decoration: underline;

package/dist/collection/components/biggive-quote/biggive-quote.css

@@ -1,3 +1,6 @@
+/**
+ * @see brandColour in src/globals/brand-colour.ts . This and that should be updated together.
+ */
 a {
   color: inherit;
   text-decoration: underline;

package/dist/collection/components/biggive-search/biggive-search.css

@@ -1,3 +1,6 @@
+/**
+ * @see brandColour in src/globals/brand-colour.ts . This and that should be updated together.
+ */
 a {
   color: inherit;
   text-decoration: underline;

package/dist/collection/components/biggive-social-icon/biggive-social-icon.css

@@ -1,3 +1,6 @@
+/**
+ * @see brandColour in src/globals/brand-colour.ts . This and that should be updated together.
+ */
 a {
   color: inherit;
   text-decoration: underline;

package/dist/collection/components/biggive-tab/biggive-tab.css

@@ -1,3 +1,6 @@
+/**
+ * @see brandColour in src/globals/brand-colour.ts . This and that should be updated together.
+ */
 a {
   color: inherit;
   text-decoration: underline;

package/dist/collection/components/biggive-tabbed-content/biggive-tabbed-content.css

@@ -1,3 +1,6 @@
+/**
+ * @see brandColour in src/globals/brand-colour.ts . This and that should be updated together.
+ */
 a {
   color: inherit;
   text-decoration: underline;

package/dist/collection/components/biggive-table/biggive-table.css

@@ -1,3 +1,6 @@
+/**
+ * @see brandColour in src/globals/brand-colour.ts . This and that should be updated together.
+ */
 a {
   color: inherit;
   text-decoration: underline;

package/dist/collection/components/biggive-table/biggive-table.js

@@ -55,7 +55,7 @@ export class BiggiveTable {
         "mutable": false,
         "complexType": {
           "original": "brandColour",
-          "resolved": "\"black\" | \"brand-1\" | \"brand-2\" | \"brand-3\" | \"brand-4\" | \"brand-5\" | \"brand-6\" | \"grey-dark\" | \"grey-light\" | \"primary\" | \"secondary\" | \"tertiary\" | \"white\"",
+          "resolved": "\"black\" | \"brand-1\" | \"brand-2\" | \"brand-3\" | \"brand-4\" | \"brand-5\" | \"brand-6\" | \"grey-dark\" | \"grey-extra-light\" | \"grey-light\" | \"grey-medium\" | \"primary\" | \"secondary\" | \"tertiary\" | \"white\"",
           "references": {
             "brandColour": {
               "location": "import",
@@ -78,7 +78,7 @@ export class BiggiveTable {
         "mutable": false,
         "complexType": {
           "original": "brandColour",
-          "resolved": "\"black\" | \"brand-1\" | \"brand-2\" | \"brand-3\" | \"brand-4\" | \"brand-5\" | \"brand-6\" | \"grey-dark\" | \"grey-light\" | \"primary\" | \"secondary\" | \"tertiary\" | \"white\"",
+          "resolved": "\"black\" | \"brand-1\" | \"brand-2\" | \"brand-3\" | \"brand-4\" | \"brand-5\" | \"brand-6\" | \"grey-dark\" | \"grey-extra-light\" | \"grey-light\" | \"grey-medium\" | \"primary\" | \"secondary\" | \"tertiary\" | \"white\"",
           "references": {
             "brandColour": {
               "location": "import",
@@ -101,7 +101,7 @@ export class BiggiveTable {
         "mutable": false,
         "complexType": {
           "original": "brandColour",
-          "resolved": "\"black\" | \"brand-1\" | \"brand-2\" | \"brand-3\" | \"brand-4\" | \"brand-5\" | \"brand-6\" | \"grey-dark\" | \"grey-light\" | \"primary\" | \"secondary\" | \"tertiary\" | \"white\"",
+          "resolved": "\"black\" | \"brand-1\" | \"brand-2\" | \"brand-3\" | \"brand-4\" | \"brand-5\" | \"brand-6\" | \"grey-dark\" | \"grey-extra-light\" | \"grey-light\" | \"grey-medium\" | \"primary\" | \"secondary\" | \"tertiary\" | \"white\"",
           "references": {
             "brandColour": {
               "location": "import",
@@ -124,7 +124,7 @@ export class BiggiveTable {
         "mutable": false,
         "complexType": {
           "original": "brandColour",
-          "resolved": "\"black\" | \"brand-1\" | \"brand-2\" | \"brand-3\" | \"brand-4\" | \"brand-5\" | \"brand-6\" | \"grey-dark\" | \"grey-light\" | \"primary\" | \"secondary\" | \"tertiary\" | \"white\"",
+          "resolved": "\"black\" | \"brand-1\" | \"brand-2\" | \"brand-3\" | \"brand-4\" | \"brand-5\" | \"brand-6\" | \"grey-dark\" | \"grey-extra-light\" | \"grey-light\" | \"grey-medium\" | \"primary\" | \"secondary\" | \"tertiary\" | \"white\"",
           "references": {
             "brandColour": {
               "location": "import",

package/dist/collection/components/biggive-totalizer/biggive-totalizer.css

@@ -1,3 +1,6 @@
+/**
+ * @see brandColour in src/globals/brand-colour.ts . This and that should be updated together.
+ */
 a {
   color: inherit;
   text-decoration: underline;

package/dist/collection/components/biggive-totalizer-ticker-item/biggive-totalizer-ticker-item.css

@@ -1,3 +1,6 @@
+/**
+ * @see brandColour in src/globals/brand-colour.ts . This and that should be updated together.
+ */
 a {
   color: inherit;
   text-decoration: underline;

package/dist/collection/components/biggive-video/biggive-video.css

@@ -1,3 +1,6 @@
+/**
+ * @see brandColour in src/globals/brand-colour.ts . This and that should be updated together.
+ */
 a {
   color: inherit;
   text-decoration: underline;

package/dist/collection/components/biggive-video-feature/biggive-video-feature.css

@@ -1,3 +1,6 @@
+/**
+ * @see brandColour in src/globals/brand-colour.ts . This and that should be updated together.
+ */
 a {
   color: inherit;
   text-decoration: underline;

package/dist/components/biggive-main-menu.js

@@ -1,7 +1,7 @@
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
 import { d as defineCustomElement$2 } from './biggive-misc-icon2.js';
 
-const biggiveMainMenuCss = "a{color:inherit;text-decoration:underline}a:hover{text-decoration:none}:host{display:block}*{margin:0;padding:0;box-sizing:border-box;font-family:\"Euclid Triangle\", sans-serif}a[class^=icon-],a[class*=icon-]{padding-left:20px;background-repeat:no-repeat;background-size:auto 10px;background-position:left center}a.icon-green{background-image:url(/assets/images/triangles-combined.svg)}a.icon-children{background-image:url(/assets/images/triangles-combined-children.svg)}a.icon-christmas{background-image:url(/assets/images/triangles-combined-christmas-challenge.svg)}a.icon-green-match{background-image:url(/assets/images/triangles-combined-green-match.svg)}a.icon-women-girls{background-image:url(/assets/images/triangles-combined-women-girls.svg)}a.icon-mental-health{background-image:url(/assets/images/triangles-combined-mental-health.svg)}a.icon-anchor-match{background-image:url(/assets/images/triangles-combined-anchor.svg)}a.icon-emergency{background-image:url(/assets/images/triangles-combined-emergency.svg)}.mobile-only{display:none !important}.row-top{padding:10px 30px;background-color:#2C089B;display:flex}.row-top .social-icon-wrap{margin-right:15px}.row-top .nav-secondary{margin-left:auto;display:grid}.row-top .nav-secondary ul{list-style:none;display:inline-flex;margin:auto}.row-top .nav-secondary li{border-right:1px solid #FFFFFF;height:fit-content;padding:0 10px}.row-top .nav-secondary li:last-child{border-right:0;padding-right:0}.row-top .nav-secondary li a{color:#FFFFFF;text-decoration:none}.row-top .social-icon-wrap{display:flex}.row-top .social-icon-wrap .social-icon-item{margin-right:15px}nav{top:0;left:0;width:100%;height:100%;height:70px;background:white;z-index:99;box-shadow:0 1px 2px rgba(0, 0, 0, 0.2)}nav .navbar{height:100%;width:100%;display:flex;align-items:center;justify-content:space-between;margin:auto;padding:0 50px}nav .navbar .nav-links{line-height:70px;height:100%}nav .navbar .nav-links .sidebar-logo{display:none}nav .navbar .nav-links .links{display:flex}nav .navbar .nav-links .links li{position:relative;display:flex;align-items:center;justify-content:space-between;list-style:none;padding:0 30px}nav .navbar .nav-links .links li a{height:100%;text-decoration:none;white-space:nowrap;color:black;font-size:17px;font-weight:500}nav .navbar .nav-links .links li .sub-menu{position:absolute;top:70px;left:0;line-height:40px;box-shadow:0 1px 2px rgba(0, 0, 0, 0.2);border-radius:0 0 4px 4px;display:none;z-index:2;background-color:inherit}nav .navbar .nav-links .links li .sub-menu li{padding:0 22px;border-bottom:1px solid rgba(255, 255, 255, 0.1)}nav .navbar .nav-links .links li .sub-menu a{color:black;font-size:15px;font-weight:500}nav .navbar .nav-links .links li .sub-menu .more .sub-sub-menu{position:absolute;top:0;left:100%;border-radius:0 4px 4px 4px;z-index:1;display:none}nav .navbar .nav-links .links li .arrow{margin-left:5px;text-align:center;display:inline-block;color:black;transition:all 0.3s ease}nav .navbar .nav-links .links li .arrow.transform-90{transform:rotate(90deg)}nav .navbar .logo{min-width:180px;width:180px}nav .navbar .logo a{font-size:30px;color:black;text-decoration:none;font-weight:600;display:grid}nav .navbar .bx-menu{display:none}@media (hover: hover){.row-top .nav-secondary li a:hover{border-bottom-color:#FFFFFF;color:#FFFFFF}nav .navbar .nav-links .links li .sub-menu .more:hover .sub-sub-menu{display:block}nav .navbar .nav-links .links li:hover .sub-menu-arrow{transform:rotate(90deg)}nav .navbar .nav-links .links li:hover .sub-menu{display:block;background-color:white}nav .navbar .nav-links .links li:hover .sub-menu .sub-sub-menu{background-color:white}}@media (max-width: 1200px){nav .navbar .logo{min-width:120px;width:120px}nav .navbar .nav-links .links li{padding:0 7px}nav .navbar .nav-links .links li a{font-size:15px}nav .navbar .nav-links .links li .sub-menu a{font-size:13px}}@media (max-width: 968px){.mobile-only{display:block !important}.row-top{display:none}nav{height:60px}nav .navbar{padding:0px 25px}nav .navbar .bx-menu{display:block;font-size:25px;color:black}nav .navbar .nav-links{position:fixed;top:0;left:-100%;display:block;max-width:450px;width:100%;background:white;line-height:40px;padding:20px;box-shadow:0 5px 10px rgba(0, 0, 0, 0.2);transition:all 0.5s ease;z-index:1000;overflow-y:scroll}nav .navbar .nav-links .sidebar-logo{display:flex;align-items:center;justify-content:space-between}nav .navbar .nav-links .sidebar-logo a{display:contents}nav .navbar .nav-links .sidebar-logo a #mobileLogo{width:130px}nav .navbar .nav-links .sidebar-logo #x{margin-right:15px}nav .navbar .nav-links .sidebar-logo i{font-size:25px;color:black}nav .navbar .nav-links .mobile-social-icon-wrap{margin-top:20px}nav .navbar .nav-links .links{display:block;margin-top:20px}nav .navbar .nav-links .links li{display:block;border-bottom:1px solid #e6e6e6}nav .navbar .nav-links .links li a{width:100%;display:block}nav .navbar .nav-links .links li .display-sub-menu{display:block !important}nav .navbar .nav-links .links li .sub-menu{position:relative;top:0;box-shadow:none;display:none}nav .navbar .nav-links .links li .sub-menu li{border-bottom:none}nav .navbar .nav-links .links li .sub-menu .sub-sub-menu{display:none;position:relative;left:0}nav .navbar .nav-links .links li .sub-menu .sub-sub-menu li{display:flex;align-items:center;justify-content:space-between}nav .navbar .nav-links .links li .sub-menu .more span{display:flex;align-items:center}nav .navbar .nav-links .links li .sub-menu .more .sub-sub-menu.display-sub-menu{position:initial}}@media (max-width: 968px) and (max-width: 370px){nav .navbar .nav-links{max-width:100%}}";
+const biggiveMainMenuCss = "a{color:inherit;text-decoration:underline}a:hover{text-decoration:none}:host{display:block !important}:host(.fixed){position:fixed;top:0;left:0;right:0;z-index:10}*{margin:0;padding:0;box-sizing:border-box;font-family:\"Euclid Triangle\", sans-serif}a[class^=icon-],a[class*=icon-]{padding-left:20px;background-repeat:no-repeat;background-size:auto 10px;background-position:left center}a.icon-green{background-image:url(/assets/images/triangles-combined.svg)}a.icon-children{background-image:url(/assets/images/triangles-combined-children.svg)}a.icon-christmas{background-image:url(/assets/images/triangles-combined-christmas-challenge.svg)}a.icon-green-match{background-image:url(/assets/images/triangles-combined-green-match.svg)}a.icon-women-girls{background-image:url(/assets/images/triangles-combined-women-girls.svg)}a.icon-mental-health{background-image:url(/assets/images/triangles-combined-mental-health.svg)}a.icon-anchor-match{background-image:url(/assets/images/triangles-combined-anchor.svg)}a.icon-emergency{background-image:url(/assets/images/triangles-combined-emergency.svg)}.mobile-only{display:none !important}.row-top{padding:10px 30px;background-color:#2C089B;display:flex}.row-top .social-icon-wrap{margin-right:15px}.row-top .nav-secondary{margin-left:auto;display:grid}.row-top .nav-secondary ul{list-style:none;display:inline-flex;margin:auto}.row-top .nav-secondary li{border-right:1px solid #FFFFFF;height:fit-content;padding:0 10px}.row-top .nav-secondary li:last-child{border-right:0;padding-right:0}.row-top .nav-secondary li a{color:#FFFFFF;text-decoration:none}.row-top .social-icon-wrap{display:flex}.row-top .social-icon-wrap .social-icon-item{margin-right:15px}nav{top:0;left:0;width:100%;height:100%;height:70px;background:white;z-index:99;box-shadow:0 1px 2px rgba(0, 0, 0, 0.2)}nav .navbar{height:100%;width:100%;display:flex;align-items:center;justify-content:space-between;margin:auto;padding:0 50px}nav .navbar .nav-links{line-height:70px;height:100%}nav .navbar .nav-links .sidebar-logo{display:none}nav .navbar .nav-links .links{display:flex}nav .navbar .nav-links .links li{position:relative;display:flex;align-items:center;justify-content:space-between;list-style:none;padding:0 30px}nav .navbar .nav-links .links li a{height:100%;text-decoration:none;white-space:nowrap;color:black;font-size:17px;font-weight:500}nav .navbar .nav-links .links li .sub-menu{position:absolute;top:70px;left:0;line-height:40px;box-shadow:0 1px 2px rgba(0, 0, 0, 0.2);border-radius:0 0 4px 4px;display:none;z-index:2;background-color:inherit}nav .navbar .nav-links .links li .sub-menu li{padding:0 22px;border-bottom:1px solid rgba(255, 255, 255, 0.1)}nav .navbar .nav-links .links li .sub-menu a{color:black;font-size:15px;font-weight:500}nav .navbar .nav-links .links li .sub-menu .more .sub-sub-menu{position:absolute;top:0;left:100%;border-radius:0 4px 4px 4px;z-index:1;display:none}nav .navbar .nav-links .links li .arrow{margin-left:5px;text-align:center;display:inline-block;color:black;transition:all 0.3s ease}nav .navbar .nav-links .links li .arrow.transform-90{transform:rotate(90deg)}nav .navbar .logo{min-width:180px;width:180px}nav .navbar .logo a{font-size:30px;color:black;text-decoration:none;font-weight:600;display:grid}nav .navbar .bx-menu{display:none}@media (hover: hover){.row-top .nav-secondary li a:hover{border-bottom-color:#FFFFFF;color:#FFFFFF}nav .navbar .nav-links .links li .sub-menu .more:hover .sub-sub-menu{display:block}nav .navbar .nav-links .links li:hover .sub-menu-arrow{transform:rotate(90deg)}nav .navbar .nav-links .links li:hover .sub-menu{display:block;background-color:white}nav .navbar .nav-links .links li:hover .sub-menu .sub-sub-menu{background-color:white}}@media (max-width: 1200px){nav .navbar .logo{min-width:120px;width:120px}nav .navbar .nav-links .links li{padding:0 7px}nav .navbar .nav-links .links li a{font-size:15px}nav .navbar .nav-links .links li .sub-menu a{font-size:13px}}@media (max-width: 968px){.mobile-only{display:block !important}.row-top{display:none}nav{height:60px}nav .navbar{padding:0px 25px}nav .navbar .bx-menu{display:block;font-size:25px;color:black}nav .navbar .nav-links{position:fixed;top:0;left:-100%;display:block;max-width:450px;width:100%;background:white;line-height:40px;padding:20px;box-shadow:0 5px 10px rgba(0, 0, 0, 0.2);transition:all 0.5s ease;z-index:1000;overflow-y:scroll}nav .navbar .nav-links .sidebar-logo{display:flex;align-items:center;justify-content:space-between}nav .navbar .nav-links .sidebar-logo a{display:contents}nav .navbar .nav-links .sidebar-logo a #mobileLogo{width:130px}nav .navbar .nav-links .sidebar-logo #x{margin-right:15px}nav .navbar .nav-links .sidebar-logo i{font-size:25px;color:black}nav .navbar .nav-links .mobile-social-icon-wrap{margin-top:20px}nav .navbar .nav-links .links{display:block;margin-top:20px}nav .navbar .nav-links .links li{display:block;border-bottom:1px solid #e6e6e6}nav .navbar .nav-links .links li a{width:100%;display:block}nav .navbar .nav-links .links li .display-sub-menu{display:block !important}nav .navbar .nav-links .links li .sub-menu{position:relative;top:0;box-shadow:none;display:none}nav .navbar .nav-links .links li .sub-menu li{border-bottom:none}nav .navbar .nav-links .links li .sub-menu .sub-sub-menu{display:none;position:relative;left:0}nav .navbar .nav-links .links li .sub-menu .sub-sub-menu li{display:flex;align-items:center;justify-content:space-between}nav .navbar .nav-links .links li .sub-menu .more span{display:flex;align-items:center}nav .navbar .nav-links .links li .sub-menu .more .sub-sub-menu.display-sub-menu{position:initial}}@media (max-width: 968px) and (max-width: 370px){nav .navbar .nav-links{max-width:100%}}";
 
 const BiggiveMainMenu$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {
@@ -53,7 +53,15 @@ const BiggiveMainMenu$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLEle
       });
     }
   }
+  setHeaderSize() {
+    document.body.style.paddingTop = this.host.offsetHeight + 'px';
+  }
   componentDidRender() {
+    this.host.classList.add('fixed');
+    window.addEventListener('resize', () => {
+      this.setHeaderSize();
+    });
+    this.setHeaderSize();
     const subMenuElements = this.host.querySelectorAll('.sub-menu');
     subMenuElements.forEach(subMenuElement => {
       var _a;

package/dist/esm/biggive-back-to-top_27.entry.js

@@ -509,7 +509,7 @@ const BiggiveImageFeature = class {
 };
 BiggiveImageFeature.style = biggiveImageFeatureCss;
 
-const biggiveMainMenuCss = "a{color:inherit;text-decoration:underline}a:hover{text-decoration:none}:host{display:block}*{margin:0;padding:0;box-sizing:border-box;font-family:\"Euclid Triangle\", sans-serif}a[class^=icon-],a[class*=icon-]{padding-left:20px;background-repeat:no-repeat;background-size:auto 10px;background-position:left center}a.icon-green{background-image:url(/assets/images/triangles-combined.svg)}a.icon-children{background-image:url(/assets/images/triangles-combined-children.svg)}a.icon-christmas{background-image:url(/assets/images/triangles-combined-christmas-challenge.svg)}a.icon-green-match{background-image:url(/assets/images/triangles-combined-green-match.svg)}a.icon-women-girls{background-image:url(/assets/images/triangles-combined-women-girls.svg)}a.icon-mental-health{background-image:url(/assets/images/triangles-combined-mental-health.svg)}a.icon-anchor-match{background-image:url(/assets/images/triangles-combined-anchor.svg)}a.icon-emergency{background-image:url(/assets/images/triangles-combined-emergency.svg)}.mobile-only{display:none !important}.row-top{padding:10px 30px;background-color:#2C089B;display:flex}.row-top .social-icon-wrap{margin-right:15px}.row-top .nav-secondary{margin-left:auto;display:grid}.row-top .nav-secondary ul{list-style:none;display:inline-flex;margin:auto}.row-top .nav-secondary li{border-right:1px solid #FFFFFF;height:fit-content;padding:0 10px}.row-top .nav-secondary li:last-child{border-right:0;padding-right:0}.row-top .nav-secondary li a{color:#FFFFFF;text-decoration:none}.row-top .social-icon-wrap{display:flex}.row-top .social-icon-wrap .social-icon-item{margin-right:15px}nav{top:0;left:0;width:100%;height:100%;height:70px;background:white;z-index:99;box-shadow:0 1px 2px rgba(0, 0, 0, 0.2)}nav .navbar{height:100%;width:100%;display:flex;align-items:center;justify-content:space-between;margin:auto;padding:0 50px}nav .navbar .nav-links{line-height:70px;height:100%}nav .navbar .nav-links .sidebar-logo{display:none}nav .navbar .nav-links .links{display:flex}nav .navbar .nav-links .links li{position:relative;display:flex;align-items:center;justify-content:space-between;list-style:none;padding:0 30px}nav .navbar .nav-links .links li a{height:100%;text-decoration:none;white-space:nowrap;color:black;font-size:17px;font-weight:500}nav .navbar .nav-links .links li .sub-menu{position:absolute;top:70px;left:0;line-height:40px;box-shadow:0 1px 2px rgba(0, 0, 0, 0.2);border-radius:0 0 4px 4px;display:none;z-index:2;background-color:inherit}nav .navbar .nav-links .links li .sub-menu li{padding:0 22px;border-bottom:1px solid rgba(255, 255, 255, 0.1)}nav .navbar .nav-links .links li .sub-menu a{color:black;font-size:15px;font-weight:500}nav .navbar .nav-links .links li .sub-menu .more .sub-sub-menu{position:absolute;top:0;left:100%;border-radius:0 4px 4px 4px;z-index:1;display:none}nav .navbar .nav-links .links li .arrow{margin-left:5px;text-align:center;display:inline-block;color:black;transition:all 0.3s ease}nav .navbar .nav-links .links li .arrow.transform-90{transform:rotate(90deg)}nav .navbar .logo{min-width:180px;width:180px}nav .navbar .logo a{font-size:30px;color:black;text-decoration:none;font-weight:600;display:grid}nav .navbar .bx-menu{display:none}@media (hover: hover){.row-top .nav-secondary li a:hover{border-bottom-color:#FFFFFF;color:#FFFFFF}nav .navbar .nav-links .links li .sub-menu .more:hover .sub-sub-menu{display:block}nav .navbar .nav-links .links li:hover .sub-menu-arrow{transform:rotate(90deg)}nav .navbar .nav-links .links li:hover .sub-menu{display:block;background-color:white}nav .navbar .nav-links .links li:hover .sub-menu .sub-sub-menu{background-color:white}}@media (max-width: 1200px){nav .navbar .logo{min-width:120px;width:120px}nav .navbar .nav-links .links li{padding:0 7px}nav .navbar .nav-links .links li a{font-size:15px}nav .navbar .nav-links .links li .sub-menu a{font-size:13px}}@media (max-width: 968px){.mobile-only{display:block !important}.row-top{display:none}nav{height:60px}nav .navbar{padding:0px 25px}nav .navbar .bx-menu{display:block;font-size:25px;color:black}nav .navbar .nav-links{position:fixed;top:0;left:-100%;display:block;max-width:450px;width:100%;background:white;line-height:40px;padding:20px;box-shadow:0 5px 10px rgba(0, 0, 0, 0.2);transition:all 0.5s ease;z-index:1000;overflow-y:scroll}nav .navbar .nav-links .sidebar-logo{display:flex;align-items:center;justify-content:space-between}nav .navbar .nav-links .sidebar-logo a{display:contents}nav .navbar .nav-links .sidebar-logo a #mobileLogo{width:130px}nav .navbar .nav-links .sidebar-logo #x{margin-right:15px}nav .navbar .nav-links .sidebar-logo i{font-size:25px;color:black}nav .navbar .nav-links .mobile-social-icon-wrap{margin-top:20px}nav .navbar .nav-links .links{display:block;margin-top:20px}nav .navbar .nav-links .links li{display:block;border-bottom:1px solid #e6e6e6}nav .navbar .nav-links .links li a{width:100%;display:block}nav .navbar .nav-links .links li .display-sub-menu{display:block !important}nav .navbar .nav-links .links li .sub-menu{position:relative;top:0;box-shadow:none;display:none}nav .navbar .nav-links .links li .sub-menu li{border-bottom:none}nav .navbar .nav-links .links li .sub-menu .sub-sub-menu{display:none;position:relative;left:0}nav .navbar .nav-links .links li .sub-menu .sub-sub-menu li{display:flex;align-items:center;justify-content:space-between}nav .navbar .nav-links .links li .sub-menu .more span{display:flex;align-items:center}nav .navbar .nav-links .links li .sub-menu .more .sub-sub-menu.display-sub-menu{position:initial}}@media (max-width: 968px) and (max-width: 370px){nav .navbar .nav-links{max-width:100%}}";
+const biggiveMainMenuCss = "a{color:inherit;text-decoration:underline}a:hover{text-decoration:none}:host{display:block !important}:host(.fixed){position:fixed;top:0;left:0;right:0;z-index:10}*{margin:0;padding:0;box-sizing:border-box;font-family:\"Euclid Triangle\", sans-serif}a[class^=icon-],a[class*=icon-]{padding-left:20px;background-repeat:no-repeat;background-size:auto 10px;background-position:left center}a.icon-green{background-image:url(/assets/images/triangles-combined.svg)}a.icon-children{background-image:url(/assets/images/triangles-combined-children.svg)}a.icon-christmas{background-image:url(/assets/images/triangles-combined-christmas-challenge.svg)}a.icon-green-match{background-image:url(/assets/images/triangles-combined-green-match.svg)}a.icon-women-girls{background-image:url(/assets/images/triangles-combined-women-girls.svg)}a.icon-mental-health{background-image:url(/assets/images/triangles-combined-mental-health.svg)}a.icon-anchor-match{background-image:url(/assets/images/triangles-combined-anchor.svg)}a.icon-emergency{background-image:url(/assets/images/triangles-combined-emergency.svg)}.mobile-only{display:none !important}.row-top{padding:10px 30px;background-color:#2C089B;display:flex}.row-top .social-icon-wrap{margin-right:15px}.row-top .nav-secondary{margin-left:auto;display:grid}.row-top .nav-secondary ul{list-style:none;display:inline-flex;margin:auto}.row-top .nav-secondary li{border-right:1px solid #FFFFFF;height:fit-content;padding:0 10px}.row-top .nav-secondary li:last-child{border-right:0;padding-right:0}.row-top .nav-secondary li a{color:#FFFFFF;text-decoration:none}.row-top .social-icon-wrap{display:flex}.row-top .social-icon-wrap .social-icon-item{margin-right:15px}nav{top:0;left:0;width:100%;height:100%;height:70px;background:white;z-index:99;box-shadow:0 1px 2px rgba(0, 0, 0, 0.2)}nav .navbar{height:100%;width:100%;display:flex;align-items:center;justify-content:space-between;margin:auto;padding:0 50px}nav .navbar .nav-links{line-height:70px;height:100%}nav .navbar .nav-links .sidebar-logo{display:none}nav .navbar .nav-links .links{display:flex}nav .navbar .nav-links .links li{position:relative;display:flex;align-items:center;justify-content:space-between;list-style:none;padding:0 30px}nav .navbar .nav-links .links li a{height:100%;text-decoration:none;white-space:nowrap;color:black;font-size:17px;font-weight:500}nav .navbar .nav-links .links li .sub-menu{position:absolute;top:70px;left:0;line-height:40px;box-shadow:0 1px 2px rgba(0, 0, 0, 0.2);border-radius:0 0 4px 4px;display:none;z-index:2;background-color:inherit}nav .navbar .nav-links .links li .sub-menu li{padding:0 22px;border-bottom:1px solid rgba(255, 255, 255, 0.1)}nav .navbar .nav-links .links li .sub-menu a{color:black;font-size:15px;font-weight:500}nav .navbar .nav-links .links li .sub-menu .more .sub-sub-menu{position:absolute;top:0;left:100%;border-radius:0 4px 4px 4px;z-index:1;display:none}nav .navbar .nav-links .links li .arrow{margin-left:5px;text-align:center;display:inline-block;color:black;transition:all 0.3s ease}nav .navbar .nav-links .links li .arrow.transform-90{transform:rotate(90deg)}nav .navbar .logo{min-width:180px;width:180px}nav .navbar .logo a{font-size:30px;color:black;text-decoration:none;font-weight:600;display:grid}nav .navbar .bx-menu{display:none}@media (hover: hover){.row-top .nav-secondary li a:hover{border-bottom-color:#FFFFFF;color:#FFFFFF}nav .navbar .nav-links .links li .sub-menu .more:hover .sub-sub-menu{display:block}nav .navbar .nav-links .links li:hover .sub-menu-arrow{transform:rotate(90deg)}nav .navbar .nav-links .links li:hover .sub-menu{display:block;background-color:white}nav .navbar .nav-links .links li:hover .sub-menu .sub-sub-menu{background-color:white}}@media (max-width: 1200px){nav .navbar .logo{min-width:120px;width:120px}nav .navbar .nav-links .links li{padding:0 7px}nav .navbar .nav-links .links li a{font-size:15px}nav .navbar .nav-links .links li .sub-menu a{font-size:13px}}@media (max-width: 968px){.mobile-only{display:block !important}.row-top{display:none}nav{height:60px}nav .navbar{padding:0px 25px}nav .navbar .bx-menu{display:block;font-size:25px;color:black}nav .navbar .nav-links{position:fixed;top:0;left:-100%;display:block;max-width:450px;width:100%;background:white;line-height:40px;padding:20px;box-shadow:0 5px 10px rgba(0, 0, 0, 0.2);transition:all 0.5s ease;z-index:1000;overflow-y:scroll}nav .navbar .nav-links .sidebar-logo{display:flex;align-items:center;justify-content:space-between}nav .navbar .nav-links .sidebar-logo a{display:contents}nav .navbar .nav-links .sidebar-logo a #mobileLogo{width:130px}nav .navbar .nav-links .sidebar-logo #x{margin-right:15px}nav .navbar .nav-links .sidebar-logo i{font-size:25px;color:black}nav .navbar .nav-links .mobile-social-icon-wrap{margin-top:20px}nav .navbar .nav-links .links{display:block;margin-top:20px}nav .navbar .nav-links .links li{display:block;border-bottom:1px solid #e6e6e6}nav .navbar .nav-links .links li a{width:100%;display:block}nav .navbar .nav-links .links li .display-sub-menu{display:block !important}nav .navbar .nav-links .links li .sub-menu{position:relative;top:0;box-shadow:none;display:none}nav .navbar .nav-links .links li .sub-menu li{border-bottom:none}nav .navbar .nav-links .links li .sub-menu .sub-sub-menu{display:none;position:relative;left:0}nav .navbar .nav-links .links li .sub-menu .sub-sub-menu li{display:flex;align-items:center;justify-content:space-between}nav .navbar .nav-links .links li .sub-menu .more span{display:flex;align-items:center}nav .navbar .nav-links .links li .sub-menu .more .sub-sub-menu.display-sub-menu{position:initial}}@media (max-width: 968px) and (max-width: 370px){nav .navbar .nav-links{max-width:100%}}";
 
 const BiggiveMainMenu = class {
   constructor(hostRef) {
@@ -559,7 +559,15 @@ const BiggiveMainMenu = class {
       });
     }
   }
+  setHeaderSize() {
+    document.body.style.paddingTop = this.host.offsetHeight + 'px';
+  }
   componentDidRender() {
+    this.host.classList.add('fixed');
+    window.addEventListener('resize', () => {
+      this.setHeaderSize();
+    });
+    this.setHeaderSize();
     const subMenuElements = this.host.querySelectorAll('.sub-menu');
     subMenuElements.forEach(subMenuElement => {
       var _a;

package/dist/types/components/biggive-main-menu/biggive-main-menu.d.ts

@@ -12,6 +12,7 @@ export declare class BiggiveMainMenu {
    * init to still be seen, hence they're auto-added to the menu.
    */
   appendNavSecondaryLinks(): void;
+  setHeaderSize(): void;
   componentDidRender(): void;
   render(): any;
 }

package/dist/types/globals/brand-colour.d.ts

@@ -1 +1,7 @@
-export type brandColour = 'primary' | 'secondary' | 'tertiary' | 'brand-1' | 'brand-2' | 'brand-3' | 'brand-4' | 'brand-5' | 'brand-6' | 'black' | 'white' | 'grey-light' | 'grey-dark';
+/**
+ * @see $brandColours in src/globals/variables.scss . This and that should be updated together.
+ *
+ * @todo consider changing values to remove need for comments. Not doing right now to avoid possible semantic
+ * merge conflicts.
+ */
+export type brandColour = 'primary' | 'secondary' | 'tertiary' | 'brand-1' | 'brand-2' | 'brand-3' | 'brand-4' | 'brand-5' | 'brand-6' | 'white' | 'black' | 'grey-extra-light' | 'grey-light' | 'grey-medium' | 'grey-dark';