@comicrelief/storybook 1.34.2 → 2.0.0

package/src/sass/base/components/media-block/js/media-block.js

@@ -0,0 +1,31 @@
+(function ($) {
+  // Activate lightcase
+  // Video lightcase
+  $('a[data-rel^=lightcase]').lightcase({
+    overlayOpacity: .95,
+    
+
+    iframe: {
+      width: "100%",
+      height: "100%",
+      frameborder: 0
+    },
+    
+    onFinish : {
+
+      custom: function() {
+
+        var caption = $(this).parent().find('.media-block__caption');
+
+        $('.lightcase-contentInner iframe').focus();
+
+        if (caption.length) {
+          lightcase.get('caption').html(caption.html());
+          $('#lightcase-caption').show();
+        }
+
+        lightcase.resize();
+      }
+    }
+  });
+})(jQuery);

package/src/sass/base/components/media-block/media-block.twig

@@ -0,0 +1,31 @@
+<div class="cw-region">
+  <article class="contextual-region block-content block-content--type-media-reference {{ modifier_class }} media-block clearfix">
+    <div class="media-block__image">
+      <div class="media media--blazy  media--responsive media--image">
+        <picture>
+          <img class="media__image media__element b-lazy b-responsive b-loaded" src="kss-assets/images/original-teaser-1170-658.jpg" alt="Video background" typeof="foaf:Image">
+        </picture>
+      </div>
+    </div>
+    <div class="media-block__content-wrapper">
+      <div class="media-block__content">
+        <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="play-icon" viewBox="0 0 40 40" xml:space="preserve">
+          <path d="M20,2c9.9,0,18,8.1,18,18s-8.1,18-18,18S2,29.9,2,20S10.1,2,20,2 M20,0C9,0,0,9,0,20s9,20,20,20
+            s20-9,20-20S31,0,20,0L20,0z"></path>
+          <path d="M15.8,14l10.3,6l-10.3,6V14 M13.8,10.6v18.8L30.1,20L13.8,10.6L13.8,10.6z"></path>
+        </svg>
+        <div class="cr-body">
+          <h4>Relive all the best bits of last Red Nose Day</h4>
+          <p class="font--yellow"><strong>20:20</strong></p>
+        </div>
+      </div>
+    </div>
+    <a class="media-block__link" data-rel="lightcase" href="https://www.youtube.com/embed/NW12S4-KB1I?autoplay=1">media block</a>
+    <div class="media-block__caption">
+      <div class="cr-body">
+        <p>Raymond used to work in a mine, with no time to go to school. Now, thanks to you, he’s getting an education. To help us change more lives, simply raise cash by having fun.</p>
+        <p><a class="btn btn--red" href="#">See how to join in</a></p>
+      </div>
+    </div>
+  </article>
+</div>

package/src/sass/base/components/meta-icons/_meta-icons.scss

@@ -0,0 +1,74 @@
+
+.block-cr-meta-icons {
+  height: 77px;
+}
+
+.meta-icons {
+  float: left;
+  @include breakpoint($desktop-nav-breakpoint) {
+    position: relative;
+    z-index: 10;
+    float: left;
+    height: 103px;
+    .icon {
+      width: 35px;
+      height: 100%;
+    }
+  }
+  .meta-icons__login {
+    display: inline-block;
+    text-decoration: none;
+  }
+  .meta-icons__login,
+  .meta-icons__magnify,
+  .meta-icons__esu-toggle {
+    width: 35px;
+    height: 76px;
+    margin: 0;
+    padding: 0;
+    border: none;
+    background-color: transparent;
+    display: inline-block;
+    @include breakpoint($screen-md) {
+      width: 46px;
+    }
+    @include breakpoint($desktop-nav-breakpoint) {
+      height: 103px;
+    }
+    &.active {
+      background-color: #f9f9f9;
+    }
+    &:focus {
+      outline: none;
+    }
+    span {
+      display: none;
+    }
+    .icon {
+      width: 25px;
+      height: 25px;
+      margin: 21px 4px;
+      transition-property: fill;
+      transition-duration: 150ms;
+      @include breakpoint($screen-md) {
+        width: 35px;
+        height: 35px;
+      }
+      @include breakpoint($desktop-nav-breakpoint) {
+        width: 20px;
+        height: 21px;
+        margin: 40px 12px;
+      }
+
+      fill: $colour-jasper-grey;
+    }
+    &:hover,
+    &:focus,
+    &.active {
+      .icon {
+        fill: $colour-black;
+        outline: none;
+      }
+    }
+  }
+}

package/src/sass/base/components/meta-icons/meta-icons.twig

@@ -0,0 +1,20 @@
+<div id="block-metaiconsblock" class="contextual-region block block-cr-meta-icons">
+  <div class="meta-icons">
+    <a role="button" class="meta-icons__magnify has-tooltip active" title="Search" href="#">
+      <svg class="icon">
+        <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-magnify"></use>
+      </svg>
+    </a>
+    <a role="button" href="https://my.rednoseday.com/user/login" target="_blank" class="meta-icons__login has-tooltip" title="Log in to your Giving Page">
+      <svg class="icon">
+        <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-login"></use>
+      </svg>
+    </a>
+    <a role="button" class="meta-icons__esu-toggle has-tooltip" title="Sign up for emails" href="#">
+      <svg class="icon">
+        <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#envelope"></use>
+      </svg>
+      <span>Get the latest</span>
+    </a>
+  </div>
+</div>

package/src/sass/base/components/navigation/SR18_logo_date_blacktext.svg

@@ -0,0 +1,90 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 21.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 288 130" style="enable-background:new 0 0 288 130;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#E52631;}
+	.st1{fill:#FFFFFF;}
+	.st2{fill:#29022C;}
+</style>
+<circle class="st0" cx="64.7" cy="65" r="63.7"/>
+<path class="st1" d="M107.3,63.3c-0.2,0-0.3-0.1-0.4-0.2c-0.1-0.1-0.2-0.3-0.2-0.5c-0.1-5.9-0.4-11.9-1-17.9c-1.7-0.2-3.3-0.5-5-0.7
+	c-0.2,0-0.3-0.1-0.4-0.3s-0.2-0.4-0.2-0.6c-0.1-1.5-0.3-3-0.4-4.5c0-0.2,0-0.4,0.1-0.5s0.2-0.2,0.4-0.2c5.5,0.8,10.9,1.9,16.4,3.1
+	c0.2,0,0.3,0.2,0.4,0.3s0.2,0.3,0.2,0.5c0.2,1.3,0.4,2.7,0.6,4c0,0.2,0,0.3-0.1,0.5c-0.1,0.1-0.2,0.2-0.4,0.1
+	c-1.7-0.3-3.3-0.6-5-0.9c0.7,5.6,1,11.3,1.1,17c0,0.2,0,0.3-0.2,0.5c-0.1,0.1-0.3,0.2-0.4,0.2L107.3,63.3z"/>
+<path class="st1" d="M31.7,63.2c-0.2,0-0.3-0.1-0.4-0.2c-0.1-0.1-0.2-0.3-0.2-0.5c0.1-8,0.5-15.9,1.3-24c0-0.2,0.1-0.4,0.2-0.5
+	c0.1-0.1,0.2-0.3,0.4-0.3c2.1-0.3,4.3-0.6,6.4-0.8c1.5-0.2,3-0.2,4.5,0c1.1,0.1,2.2,0.6,3.1,1.2c0.8,0.6,1.5,1.5,1.8,2.5
+	c0.4,1.2,0.6,2.6,0.5,3.9c-0.1,3-0.9,5.3-2.5,6.8s-3.7,2.2-6.7,2.3h-0.3l-2,0.1c-0.1,2.9-0.1,5.9-0.2,8.8c0,0.2-0.1,0.4-0.2,0.5
+	c-0.1,0.1-0.3,0.2-0.4,0.2H31.7z M38.2,48.1l2.5-0.2c1-0.1,2.9-0.2,3-2.9s-1.8-2.6-2.7-2.5l-2.5,0.2C38.4,44.5,38.2,46.3,38.2,48.1
+	L38.2,48.1z"/>
+<path class="st1" d="M94.6,63.2c-0.1,0-0.2-0.1-0.3-0.1c-0.1-0.1-0.2-0.2-0.2-0.3c-1.1-2.7-2.2-5.4-3.3-8.2l0,0l-0.2-0.3
+	c-0.1-0.1-0.2-0.2-0.3-0.3c-0.6-0.2-1.3-0.4-2-0.3h-1.1c0.1,3,0.1,5.9,0.1,8.9c0,0.2-0.1,0.4-0.2,0.6c-0.1,0.1-0.2,0.2-0.4,0.2H81
+	c-0.2,0-0.3-0.1-0.4-0.2c-0.1-0.2-0.2-0.4-0.2-0.6c0-8.6-0.2-17.2-0.6-25.7c0-0.2,0-0.4,0.1-0.5s0.2-0.2,0.4-0.2
+	c3.6,0.2,7.1,0.6,10.7,1c1.9,0.2,3.7,1.1,5,2.5c1.4,1.5,2.3,3.4,2.4,5.5c0.2,2.4-0.3,4.2-1.3,5.2c-0.3,0.3-0.6,0.5-0.9,0.7
+	c-0.4,0.2-0.8,0.4-1.2,0.6l-0.4,0.2l0.4,0.3c0.5,0.3,1,0.7,1.4,1.1c0.4,0.4,0.7,0.9,1,1.3c1.2,2.6,2.4,5.2,3.6,7.7
+	c0.1,0.3,0.1,0.5,0,0.8c-0.1,0.2-0.3,0.4-0.5,0.3L94.6,63.2z M86.9,47.7l2.9,0.2c0.9,0.1,2.9,0.2,2.8-2.5c0.1-1.6-1.1-2.9-2.7-3
+	c-0.1,0-0.2,0-0.3,0l-2.9-0.2C86.7,44,86.8,45.9,86.9,47.7L86.9,47.7z"/>
+<path class="st1" d="M35.7,92.8c-0.2,0-0.3-0.1-0.4-0.3C35.1,92.4,35,92.2,35,92c-0.7-8-1-16-1.2-24c0-0.2,0.1-0.4,0.2-0.5
+	c0.1-0.1,0.2-0.2,0.4-0.2c4.9,0.1,9.9,0.1,14.9,0.1c0.2,0,0.3,0.1,0.4,0.2c0.1,0.2,0.2,0.4,0.2,0.6c0,1.6,0,3.3,0,4.9
+	c0,0.2,0,0.4-0.2,0.6c-0.1,0.1-0.2,0.2-0.4,0.2c-2.9-0.1-5.7-0.1-8.6-0.2c0,1.2,0,2.5,0.1,3.7c2.5,0.1,5,0.2,7.5,0.3
+	c0.2,0,0.3,0.1,0.4,0.3c0.1,0.2,0.2,0.4,0.2,0.6c0,1.5,0.1,3,0.1,4.5c0,0.2,0,0.4-0.2,0.6c-0.1,0.1-0.2,0.2-0.4,0.2
+	c-2.5-0.1-4.9-0.3-7.4-0.4c0.1,1.2,0.1,2.5,0.2,3.7c3,0.3,6.1,0.5,9.1,0.6c0.2,0,0.3,0.1,0.4,0.3c0.1,0.2,0.2,0.4,0.2,0.6
+	c0.1,1.6,0.1,3.3,0.2,4.9c0,0.2,0,0.4-0.1,0.6c-0.1,0.1-0.2,0.2-0.4,0.2C45.6,94,40.7,93.5,35.7,92.8z"/>
+<path class="st1" d="M82.8,94.1c-0.2,0-0.3-0.1-0.4-0.2c-0.1-0.2-0.2-0.3-0.2-0.5c0.4-8.3,0.6-16.7,0.7-25.1c0-0.2,0.1-0.4,0.2-0.6
+	c0.1-0.1,0.2-0.2,0.4-0.2c5,0,9.9-0.1,14.9-0.2c0.2,0,0.3,0.1,0.4,0.2S99,67.8,99,68c0,1.5,0,3-0.1,4.6c0,0.2-0.1,0.4-0.2,0.6
+	c-0.1,0.1-0.3,0.2-0.4,0.2c-2.8,0.1-5.7,0.2-8.6,0.3c0,1.2,0,2.5-0.1,3.7c2.5-0.1,5-0.3,7.4-0.4c0.2,0,0.3,0.1,0.4,0.2
+	s0.2,0.3,0.2,0.5c-0.1,1.4-0.1,2.8-0.2,4.3c0,0.2-0.1,0.4-0.2,0.6s-0.2,0.3-0.4,0.3c-2.5,0.2-4.9,0.4-7.4,0.6
+	c-0.1,1.2-0.1,2.5-0.2,3.7c3-0.3,6-0.6,9.1-0.9c0.2,0,0.3,0,0.4,0.2s0.1,0.4,0.1,0.5c-0.1,1.5-0.3,3.1-0.4,4.6
+	c0,0.2-0.1,0.4-0.2,0.6c-0.1,0.1-0.3,0.3-0.4,0.3C92.8,93.2,87.8,93.7,82.8,94.1z"/>
+<path class="st1" d="M54.4,94.5c-0.2,0-0.3-0.1-0.4-0.3c-0.1-0.2-0.2-0.4-0.2-0.6c-0.3-8.4-0.4-16.9-0.5-25.4c0-0.2,0.1-0.4,0.2-0.6
+	c0.1-0.2,0.3-0.2,0.4-0.2h5.7c0.2,0,0.3,0.1,0.4,0.3c0.1,0.2,0.2,0.4,0.2,0.6c0,6.6,0,13.3,0.1,19.9c3,0.1,6.1,0.1,9.1,0
+	c0.2,0,0.3,0.1,0.4,0.2c0.1,0.2,0.2,0.4,0.2,0.6c0,1.7,0,3.3-0.1,5c0,0.2-0.1,0.4-0.2,0.6c-0.1,0.1-0.2,0.2-0.4,0.2
+	C64.4,94.8,59.4,94.8,54.4,94.5z"/>
+<path class="st1" d="M73,94.7c-0.1,0-0.3-0.1-0.3-0.2c-0.1-0.2-0.1-0.4-0.1-0.6c0.2-8.5,0.3-17,0.3-25.6c0-0.2,0-0.4,0.2-0.6
+	c0.1-0.1,0.2-0.2,0.3-0.2h5.8c0.1,0,0.3,0.1,0.3,0.2c0.1,0.2,0.2,0.4,0.2,0.6c0,8.5-0.2,16.9-0.5,25.3c0,0.2-0.1,0.4-0.2,0.6
+	c-0.1,0.1-0.2,0.2-0.3,0.2C76.7,94.5,74.9,94.6,73,94.7z"/>
+<path class="st1" d="M101.6,91.8c-0.1,0-0.3,0-0.4-0.2c-0.1-0.1-0.1-0.3-0.1-0.5c0.8-7.8,1.3-15.5,1.4-23.2c0-0.2,0.1-0.4,0.2-0.5
+	s0.3-0.2,0.4-0.2c5-0.1,9.9-0.2,14.9-0.3c0.2,0,0.3,0.1,0.4,0.2s0.2,0.3,0.2,0.4c0,1.3,0,2.6-0.1,3.9c0,0.2-0.1,0.4-0.2,0.5
+	s-0.2,0.2-0.4,0.2c-3,0.2-5.9,0.4-8.9,0.6c0,1.1-0.1,2.2-0.2,3.3c2.2-0.2,4.3-0.4,6.5-0.6c0.1,0,0.3,0,0.4,0.2
+	c0.1,0.1,0.1,0.3,0.1,0.5c-0.1,1.3-0.2,2.6-0.3,3.8c0,0.2-0.1,0.4-0.2,0.5s-0.2,0.2-0.4,0.3c-2.1,0.3-4.3,0.6-6.4,0.9
+	c-0.2,2.8-0.6,5.6-0.9,8.5c0,0.2-0.1,0.4-0.2,0.5s-0.2,0.2-0.4,0.3C105,91.2,103.3,91.6,101.6,91.8z"/>
+<path class="st1" d="M27.3,91.5c-0.1,0-0.2-0.1-0.3-0.2c-0.1-0.1-0.2-0.2-0.2-0.3L23,83.1l0,0l-0.2-0.3c-0.1-0.1-0.2-0.2-0.3-0.3
+	c-0.6-0.3-1.2-0.4-1.9-0.5l-1.1-0.2c0.3,2.6,0.6,5.1,0.9,7.7c0,0.2,0,0.3-0.1,0.5c-0.1,0.1-0.2,0.2-0.4,0.1c-1.7-0.3-3.4-0.7-5-1.1
+	c-0.2,0-0.3-0.1-0.4-0.3c-0.1-0.1-0.2-0.3-0.2-0.5c-1.2-6.8-1.8-13.7-2-20.7c0-0.2,0-0.3,0.1-0.4s0.2-0.2,0.4-0.2l10.5,0.2
+	c1.8,0,3.5,0.7,4.8,1.9c1.3,1.4,2.1,3.2,2.1,5.1c0.1,2.4-0.4,4.1-1.3,5c-0.3,0.3-0.5,0.5-0.9,0.7c-0.3,0.2-0.7,0.4-1.1,0.5l-0.4,0.1
+	l0.4,0.3c0.5,0.4,0.9,0.8,1.3,1.3c0.4,0.4,0.7,0.9,1,1.3l3.8,7.9c0.2,0.2,0.2,0.5,0.1,0.8c0,0.2-0.2,0.3-0.4,0.3l0,0
+	C30.9,92.1,29.1,91.8,27.3,91.5z M19.1,76.8l2.8,0.3c0.9,0.1,2.8,0.3,2.6-2.3s-2-2.6-2.9-2.7L18.8,72C18.9,73.6,19,75.2,19.1,76.8
+	L19.1,76.8z"/>
+<path class="st1" d="M20.1,63.7c-0.7,0-1.5,0-2.2-0.1s-1.5-0.2-2.2-0.3l-0.4-0.1l-0.4-0.1L14.7,63l0,0l-1-0.2l-0.8-0.2
+	c-0.1,0-0.2-0.1-0.3-0.2c-0.1-0.1-0.1-0.2-0.1-0.4c-0.1-1.7-0.2-3.5-0.2-5.2c0-0.2,0.1-0.5,0.3-0.7s0.4-0.2,0.6-0.1
+	c0.8,0.4,1.7,0.7,2.6,1l0.8,0.3c1.3,0.5,2.8,0.6,4.2,0.6c0.7,0,1.3-0.2,1.9-0.5c0.5-0.3,0.8-0.9,0.9-1.5c0-0.4-0.1-0.8-0.4-1
+	c-0.9-0.5-2-0.8-3-0.8l0,0c-2.8-0.4-4.8-0.7-5.7-1.6S13,50,13.3,48c0.3-2.2,1.3-4.3,2.9-5.9c1.7-1.7,3.9-2.8,6.3-3.2
+	c1.2-0.2,2.4-0.3,3.6-0.2c0.6,0,1.1,0.1,1.6,0.1c0.4,0,0.7,0.1,1.1,0.2c0.1,0,0.2,0.1,0.2,0.2c0.1,0.1,0.1,0.2,0.1,0.4
+	c0,1.9,0,3.8,0,5.6c0,0.3-0.1,0.6-0.3,0.8c-0.1,0.1-0.2,0.1-0.3,0.2c-0.1,0-0.2,0-0.3-0.1c-0.5-0.3-1-0.5-1.6-0.7s-1.2-0.4-1.8-0.6
+	c-1.1-0.3-2.2-0.3-3.3-0.2c-0.6,0.1-1.2,0.3-1.8,0.5c-0.5,0.3-0.8,0.7-0.9,1.3c-0.1,0.5,0.2,0.9,0.6,1.1c0.4,0.1,0.8,0.2,1.4,0.3
+	s1.3,0.2,1.9,0.3c2.7,0.3,4.4,0.7,5.3,1.8c1.1,1.4,1.6,3.2,1.4,5c0,1.2-0.3,2.5-0.7,3.7c-0.4,1-1,1.9-1.8,2.7
+	c-0.8,0.7-1.8,1.3-2.8,1.6C22.7,63.5,21.4,63.7,20.1,63.7z"/>
+<ellipse class="st1" cx="64.5" cy="49.3" rx="13.8" ry="14.1"/>
+<path class="st2" d="M142.3,45.9c2.6,0,3.8-0.9,4.4-2.8h3.4v18.3h-4.4V48.8h-3.4V45.9z"/>
+<path class="st2" d="M152.3,47.1v-3.9H166v3.4c-4.7,4.7-5.2,9.1-5.2,14.9H156c0.1-6.1,1.6-10.3,5.2-14.3L152.3,47.1z"/>
+<path class="st2" d="M165.4,52.2h7.5v3.7h-7.5V52.2z"/>
+<path class="st2" d="M188.3,57.8v3.7h-14v-3.1l5-4.1c2.8-2.3,4-3.5,4-5.4c0.1-1.2-0.7-2.2-1.8-2.4c-0.1,0-0.3,0-0.4,0
+	c-1.7,0-2.5,1.2-2.5,3c0,0.5,0.1,1,0.2,1.5l-4.3-0.1c-0.1-0.6-0.2-1.1-0.2-1.7c0-3.9,2.8-6.4,7-6.4c4.4,0,6.8,2.5,6.8,5.8
+	s-1.9,4.9-4.8,7.1l-2.5,2L188.3,57.8z"/>
+<path class="st2" d="M196.4,53.9c-0.5,0-0.9,0-1.4,0.1v-3.2c0.5,0.1,1,0.1,1.5,0.1c1.2,0.1,2.3-0.8,2.5-2c0.1-1.2-0.8-2.3-2-2.5
+	c-0.1,0-0.3,0-0.4,0c-1.8,0-2.8,1.4-2.8,3.4l-4.2-0.2c0-3.8,2.7-6.7,7.2-6.7c4.2,0,6.7,2.2,6.7,5.4c0.1,2-1.4,3.7-3.3,4
+	c2.2,0.2,3.8,2.1,3.8,4.3c0,3.3-2.8,5.3-7,5.3c-4.7,0-7.5-2.5-7.5-6.6l4.3,0.2c0.1,2,1.3,2.9,3.2,2.9c1.4,0,2.5-0.7,2.5-2.1
+	S197.9,53.9,196.4,53.9z"/>
+<path class="st2" d="M151.4,86.4L147.7,73h-0.1v13.4h-4.1V68.2h6.9l3.2,12.2h0.1l3.1-12.2h6.7v18.3H159V73h-0.1l-3.7,13.5
+	L151.4,86.4z"/>
+<path class="st2" d="M177.9,82.9c0,0.7,0.3,1,0.8,1c0.4,0,0.7-0.1,1.1-0.2v2.2c-0.8,0.6-1.8,0.9-2.7,0.8c-1.4,0.1-2.7-0.9-3-2.3
+	c-0.9,1.5-2.6,2.4-4.3,2.3c-2.6,0-4.2-1.3-4.2-3.5c0-2.5,1.9-3.5,4.7-4.1l3.6-0.6v-0.2c0.1-0.9-0.5-1.8-1.5-1.9c-0.1,0-0.3,0-0.4,0
+	c-1.1,0-2,0.8-2.1,1.8l-3.9-0.3c0.4-2.8,2.5-4.7,6.2-4.7c3.4,0,5.8,1.5,5.8,5L177.9,82.9z M173.8,80.7l-2.1,0.4
+	c-1.3,0.3-2.1,0.6-2.1,1.6c0,0.8,0.6,1.2,1.5,1.2c1.5,0,2.8-1.2,2.8-2.7c0-0.1,0-0.2,0-0.3L173.8,80.7L173.8,80.7z"/>
+<path class="st2" d="M190.6,77.7c-0.7-0.4-1.4-0.6-2.2-0.5c-1.7,0-2.9,1-2.9,3.2v6.1h-4.2V73.6h4.2v2.3c0.5-1.6,1.9-2.7,3.6-2.7
+	c0.6,0,1.3,0.2,1.8,0.5L190.6,77.7z"/>
+<path class="st2" d="M198.3,73.2c3.3-0.2,6.1,2.3,6.3,5.6l-3.5,0.3c-0.3-1.7-1.2-2.7-2.8-2.7s-2.8,1.1-2.8,3.6s1.1,3.6,2.8,3.6
+	s2.5-1,2.8-2.7l3.5,0.3c-0.2,3.3-3,5.8-6.3,5.6c-4,0-7-2.7-7-6.8c-0.1-3.6,2.7-6.7,6.4-6.8C197.9,73.2,198.1,73.2,198.3,73.2z"/>
+<path class="st2" d="M210.7,86.4h-4.2V68.2h4.2v7.4c0.8-1.5,2.5-2.4,4.2-2.3c3.5,0,4.6,2.4,4.6,5.2v8.1h-4.2v-7
+	c0-1.9-0.6-2.9-2.1-2.9s-2.5,1.3-2.5,3.4V86.4z"/>
+</svg>

package/src/sass/base/components/navigation/SR18_logo_date_whitetext.svg

@@ -0,0 +1,91 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 21.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 288 130" style="enable-background:new 0 0 288 130;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#E52631;}
+	.st1{fill:#FFFFFF;}
+</style>
+<circle class="st0" cx="64.7" cy="65" r="63.7"/>
+<path class="st1" d="M107.3,63.3c-0.2,0-0.3-0.1-0.4-0.2c-0.1-0.1-0.2-0.3-0.2-0.5c-0.1-5.9-0.4-11.9-1-17.9c-1.7-0.2-3.3-0.5-5-0.7
+	c-0.2,0-0.3-0.1-0.4-0.3c-0.1-0.2-0.2-0.4-0.2-0.6c-0.1-1.5-0.3-3-0.4-4.5c0-0.2,0-0.4,0.1-0.5c0.1-0.1,0.2-0.2,0.4-0.2
+	c5.5,0.8,10.9,1.9,16.4,3.1c0.2,0,0.3,0.2,0.4,0.3c0.1,0.1,0.2,0.3,0.2,0.5c0.2,1.3,0.4,2.7,0.6,4c0,0.2,0,0.3-0.1,0.5
+	c-0.1,0.1-0.2,0.2-0.4,0.1c-1.7-0.3-3.3-0.6-5-0.9c0.7,5.6,1,11.3,1.1,17c0,0.2,0,0.3-0.2,0.5c-0.1,0.1-0.3,0.2-0.4,0.2L107.3,63.3z
+	"/>
+<path class="st1" d="M31.7,63.2c-0.2,0-0.3-0.1-0.4-0.2c-0.1-0.1-0.2-0.3-0.2-0.5c0.1-8,0.5-15.9,1.3-24c0-0.2,0.1-0.4,0.2-0.5
+	c0.1-0.1,0.2-0.3,0.4-0.3c2.1-0.3,4.3-0.6,6.4-0.8c1.5-0.2,3-0.2,4.5,0c1.1,0.1,2.2,0.6,3.1,1.2c0.8,0.6,1.5,1.5,1.8,2.5
+	c0.4,1.2,0.6,2.6,0.5,3.9c-0.1,3-0.9,5.3-2.5,6.8s-3.7,2.2-6.7,2.3h-0.3l-2,0.1c-0.1,2.9-0.1,5.9-0.2,8.8c0,0.2-0.1,0.4-0.2,0.5
+	c-0.1,0.1-0.3,0.2-0.4,0.2L31.7,63.2z M38.2,48.1l2.5-0.2c1-0.1,2.9-0.2,3-2.9s-1.8-2.6-2.7-2.5l-2.5,0.2
+	C38.4,44.5,38.2,46.3,38.2,48.1L38.2,48.1z"/>
+<path class="st1" d="M94.6,63.2c-0.1,0-0.2-0.1-0.3-0.1c-0.1-0.1-0.2-0.2-0.2-0.3c-1.1-2.7-2.2-5.4-3.3-8.2l0,0l-0.2-0.3
+	c-0.1-0.1-0.2-0.2-0.3-0.3c-0.6-0.2-1.3-0.4-2-0.3h-1.1c0.1,3,0.1,5.9,0.1,8.9c0,0.2-0.1,0.4-0.2,0.6c-0.1,0.1-0.2,0.2-0.4,0.2H81
+	c-0.2,0-0.3-0.1-0.4-0.2c-0.1-0.2-0.2-0.4-0.2-0.6c0-8.6-0.2-17.2-0.6-25.7c0-0.2,0-0.4,0.1-0.5c0.1-0.1,0.2-0.2,0.4-0.2
+	c3.6,0.2,7.1,0.6,10.7,1c1.9,0.2,3.7,1.1,5,2.5c1.4,1.5,2.3,3.4,2.4,5.5c0.2,2.4-0.3,4.2-1.3,5.2c-0.3,0.3-0.6,0.5-0.9,0.7
+	c-0.4,0.2-0.8,0.4-1.2,0.6l-0.4,0.2l0.4,0.3c0.5,0.3,1,0.7,1.4,1.1c0.4,0.4,0.7,0.9,1,1.3c1.2,2.6,2.4,5.2,3.6,7.7
+	c0.1,0.3,0.1,0.5,0,0.8c-0.1,0.2-0.3,0.4-0.5,0.3L94.6,63.2z M86.9,47.7l2.9,0.2c0.9,0.1,2.9,0.2,2.8-2.5c0.1-1.6-1.1-2.9-2.7-3
+	c-0.1,0-0.2,0-0.3,0l-2.9-0.2C86.7,44,86.8,45.9,86.9,47.7L86.9,47.7z"/>
+<path class="st1" d="M35.7,92.8c-0.2,0-0.3-0.1-0.4-0.3C35.1,92.4,35,92.2,35,92c-0.7-8-1-16-1.2-24c0-0.2,0.1-0.4,0.2-0.5
+	c0.1-0.1,0.2-0.2,0.4-0.2c4.9,0.1,9.9,0.1,14.9,0.1c0.2,0,0.3,0.1,0.4,0.2c0.1,0.2,0.2,0.4,0.2,0.6c0,1.6,0,3.3,0,4.9
+	c0,0.2,0,0.4-0.2,0.6c-0.1,0.1-0.2,0.2-0.4,0.2c-2.9-0.1-5.7-0.1-8.6-0.2c0,1.2,0,2.5,0.1,3.7c2.5,0.1,5,0.2,7.5,0.3
+	c0.2,0,0.3,0.1,0.4,0.3c0.1,0.2,0.2,0.4,0.2,0.6c0,1.5,0.1,3,0.1,4.5c0,0.2,0,0.4-0.2,0.6c-0.1,0.1-0.2,0.2-0.4,0.2
+	c-2.5-0.1-4.9-0.3-7.4-0.4c0.1,1.2,0.1,2.5,0.2,3.7c3,0.3,6.1,0.5,9.1,0.6c0.2,0,0.3,0.1,0.4,0.3c0.1,0.2,0.2,0.4,0.2,0.6
+	c0.1,1.6,0.1,3.3,0.2,4.9c0,0.2,0,0.4-0.1,0.6c-0.1,0.1-0.2,0.2-0.4,0.2C45.6,94,40.7,93.5,35.7,92.8z"/>
+<path class="st1" d="M82.8,94.1c-0.2,0-0.3-0.1-0.4-0.2c-0.1-0.2-0.2-0.3-0.2-0.5c0.4-8.3,0.6-16.7,0.7-25.1c0-0.2,0.1-0.4,0.2-0.6
+	c0.1-0.1,0.2-0.2,0.4-0.2c5,0,9.9-0.1,14.9-0.2c0.2,0,0.3,0.1,0.4,0.2c0.1,0.1,0.2,0.3,0.2,0.5c0,1.5,0,3-0.1,4.6
+	c0,0.2-0.1,0.4-0.2,0.6c-0.1,0.1-0.3,0.2-0.4,0.2c-2.8,0.1-5.7,0.2-8.6,0.3c0,1.2,0,2.5-0.1,3.7c2.5-0.1,5-0.3,7.4-0.4
+	c0.2,0,0.3,0.1,0.4,0.2c0.1,0.1,0.2,0.3,0.2,0.5c-0.1,1.4-0.1,2.8-0.2,4.3c0,0.2-0.1,0.4-0.2,0.6c-0.1,0.2-0.2,0.3-0.4,0.3
+	c-2.5,0.2-4.9,0.4-7.4,0.6c-0.1,1.2-0.1,2.5-0.2,3.7c3-0.3,6-0.6,9.1-0.9c0.2,0,0.3,0,0.4,0.2c0.1,0.2,0.1,0.4,0.1,0.5
+	c-0.1,1.5-0.3,3.1-0.4,4.6c0,0.2-0.1,0.4-0.2,0.6c-0.1,0.1-0.3,0.3-0.4,0.3C92.8,93.2,87.8,93.7,82.8,94.1z"/>
+<path class="st1" d="M54.4,94.5c-0.2,0-0.3-0.1-0.4-0.3c-0.1-0.2-0.2-0.4-0.2-0.6c-0.3-8.4-0.4-16.9-0.5-25.4c0-0.2,0.1-0.4,0.2-0.6
+	c0.1-0.2,0.3-0.2,0.4-0.2h5.7c0.2,0,0.3,0.1,0.4,0.3c0.1,0.2,0.2,0.4,0.2,0.6c0,6.6,0,13.3,0.1,19.9c3,0.1,6.1,0.1,9.1,0
+	c0.2,0,0.3,0.1,0.4,0.2c0.1,0.2,0.2,0.4,0.2,0.6c0,1.7,0,3.3-0.1,5c0,0.2-0.1,0.4-0.2,0.6c-0.1,0.1-0.2,0.2-0.4,0.2
+	C64.4,94.8,59.4,94.8,54.4,94.5z"/>
+<path class="st1" d="M73,94.7c-0.1,0-0.3-0.1-0.3-0.2c-0.1-0.2-0.1-0.4-0.1-0.6c0.2-8.5,0.3-17,0.3-25.6c0-0.2,0-0.4,0.2-0.6
+	c0.1-0.1,0.2-0.2,0.3-0.2h5.8c0.1,0,0.3,0.1,0.3,0.2c0.1,0.2,0.2,0.4,0.2,0.6c0,8.5-0.2,16.9-0.5,25.3c0,0.2-0.1,0.4-0.2,0.6
+	c-0.1,0.1-0.2,0.2-0.3,0.2C76.7,94.5,74.9,94.6,73,94.7z"/>
+<path class="st1" d="M101.6,91.8c-0.1,0-0.3,0-0.4-0.2c-0.1-0.1-0.1-0.3-0.1-0.5c0.8-7.8,1.3-15.5,1.4-23.2c0-0.2,0.1-0.4,0.2-0.5
+	c0.1-0.1,0.3-0.2,0.4-0.2c5-0.1,9.9-0.2,14.9-0.3c0.2,0,0.3,0.1,0.4,0.2c0.1,0.1,0.2,0.3,0.2,0.4c0,1.3,0,2.6-0.1,3.9
+	c0,0.2-0.1,0.4-0.2,0.5c-0.1,0.1-0.2,0.2-0.4,0.2c-3,0.2-5.9,0.4-8.9,0.6c0,1.1-0.1,2.2-0.2,3.3c2.2-0.2,4.3-0.4,6.5-0.6
+	c0.1,0,0.3,0,0.4,0.2c0.1,0.1,0.1,0.3,0.1,0.5c-0.1,1.3-0.2,2.6-0.3,3.8c0,0.2-0.1,0.4-0.2,0.5c-0.1,0.1-0.2,0.2-0.4,0.3
+	c-2.1,0.3-4.3,0.6-6.4,0.9c-0.2,2.8-0.6,5.6-0.9,8.5c0,0.2-0.1,0.4-0.2,0.5c-0.1,0.1-0.2,0.2-0.4,0.3
+	C105,91.2,103.3,91.6,101.6,91.8z"/>
+<path class="st1" d="M27.3,91.5c-0.1,0-0.2-0.1-0.3-0.2c-0.1-0.1-0.2-0.2-0.2-0.3L23,83.1l0,0l-0.2-0.3c-0.1-0.1-0.2-0.2-0.3-0.3
+	c-0.6-0.3-1.2-0.4-1.9-0.5l-1.1-0.2c0.3,2.6,0.6,5.1,0.9,7.7c0,0.2,0,0.3-0.1,0.5c-0.1,0.1-0.2,0.2-0.4,0.1c-1.7-0.3-3.4-0.7-5-1.1
+	c-0.2,0-0.3-0.1-0.4-0.3c-0.1-0.1-0.2-0.3-0.2-0.5c-1.2-6.8-1.8-13.7-2-20.7c0-0.2,0-0.3,0.1-0.4c0.1-0.1,0.2-0.2,0.4-0.2l10.5,0.2
+	c1.8,0,3.5,0.7,4.8,1.9c1.3,1.4,2.1,3.2,2.1,5.1c0.1,2.4-0.4,4.1-1.3,5c-0.3,0.3-0.5,0.5-0.9,0.7c-0.3,0.2-0.7,0.4-1.1,0.5l-0.4,0.1
+	l0.4,0.3c0.5,0.4,0.9,0.8,1.3,1.3c0.4,0.4,0.7,0.9,1,1.3l3.8,7.9c0.2,0.2,0.2,0.5,0.1,0.8c0,0.2-0.2,0.3-0.4,0.3c0,0,0,0,0,0
+	C30.9,92.1,29.1,91.8,27.3,91.5z M19.1,76.8l2.8,0.3c0.9,0.1,2.8,0.3,2.6-2.3s-2-2.6-2.9-2.7L18.8,72C18.9,73.6,19,75.2,19.1,76.8
+	L19.1,76.8z"/>
+<path class="st1" d="M20.1,63.7c-0.7,0-1.5,0-2.2-0.1s-1.5-0.2-2.2-0.3l-0.4-0.1l-0.4-0.1l-0.2-0.1l0,0l-1-0.2l-0.8-0.2
+	c-0.1,0-0.2-0.1-0.3-0.2c-0.1-0.1-0.1-0.2-0.1-0.4c-0.1-1.7-0.2-3.5-0.2-5.2c0-0.2,0.1-0.5,0.3-0.7c0.2-0.2,0.4-0.2,0.6-0.1
+	c0.8,0.4,1.7,0.7,2.6,1l0.8,0.3c1.3,0.5,2.8,0.6,4.2,0.6c0.7,0,1.3-0.2,1.9-0.5c0.5-0.3,0.8-0.9,0.9-1.5c0-0.4-0.1-0.8-0.4-1
+	c-0.9-0.5-2-0.8-3-0.8h0c-2.8-0.4-4.8-0.7-5.7-1.6s-1.5-2.5-1.2-4.5c0.3-2.2,1.3-4.3,2.9-5.9c1.7-1.7,3.9-2.8,6.3-3.2
+	c1.2-0.2,2.4-0.3,3.6-0.2c0.6,0,1.1,0.1,1.6,0.1c0.4,0,0.7,0.1,1.1,0.2c0.1,0,0.2,0.1,0.2,0.2c0.1,0.1,0.1,0.2,0.1,0.4
+	c0,1.9,0,3.8,0,5.6c0,0.3-0.1,0.6-0.3,0.8c-0.1,0.1-0.2,0.1-0.3,0.2c-0.1,0-0.2,0-0.3-0.1c-0.5-0.3-1-0.5-1.6-0.7
+	c-0.6-0.2-1.2-0.4-1.8-0.6c-1.1-0.3-2.2-0.3-3.3-0.2c-0.6,0.1-1.2,0.3-1.8,0.5c-0.5,0.3-0.8,0.7-0.9,1.3c-0.1,0.5,0.2,0.9,0.6,1.1
+	c0.4,0.1,0.8,0.2,1.4,0.3c0.6,0.1,1.3,0.2,1.9,0.3c2.7,0.3,4.4,0.7,5.3,1.8c1.1,1.4,1.6,3.2,1.4,5c0,1.2-0.3,2.5-0.7,3.7
+	c-0.4,1-1,1.9-1.8,2.7c-0.8,0.7-1.8,1.3-2.8,1.6C22.7,63.5,21.4,63.7,20.1,63.7z"/>
+<ellipse class="st1" cx="64.5" cy="49.3" rx="13.8" ry="14.1"/>
+<path class="st1" d="M142.3,45.9c2.6,0,3.8-0.9,4.4-2.8h3.4v18.3h-4.4V48.8h-3.4V45.9z"/>
+<path class="st1" d="M152.3,47.1v-3.9H166v3.4c-4.7,4.7-5.2,9.1-5.2,14.9H156c0.1-6.1,1.6-10.3,5.2-14.3L152.3,47.1z"/>
+<path class="st1" d="M165.4,52.2h7.5v3.7h-7.5V52.2z"/>
+<path class="st1" d="M188.3,57.8v3.7h-14v-3.1l5-4.1c2.8-2.3,4-3.5,4-5.4c0.1-1.2-0.7-2.2-1.8-2.4c-0.1,0-0.3,0-0.4,0
+	c-1.7,0-2.5,1.2-2.5,3c0,0.5,0.1,1,0.2,1.5l-4.3-0.1c-0.1-0.6-0.2-1.1-0.2-1.7c0-3.9,2.8-6.4,7-6.4c4.4,0,6.8,2.5,6.8,5.8
+	s-1.9,4.9-4.8,7.1l-2.5,2L188.3,57.8z"/>
+<path class="st1" d="M196.4,53.9c-0.5,0-0.9,0-1.4,0.1v-3.2c0.5,0.1,1,0.1,1.5,0.1c1.2,0.1,2.3-0.8,2.5-2c0.1-1.2-0.8-2.3-2-2.5
+	c-0.1,0-0.3,0-0.4,0c-1.8,0-2.8,1.4-2.8,3.4l-4.2-0.2c0-3.8,2.7-6.7,7.2-6.7c4.2,0,6.7,2.2,6.7,5.4c0.1,2-1.4,3.7-3.3,4
+	c2.2,0.2,3.8,2.1,3.8,4.3c0,3.3-2.8,5.3-7,5.3c-4.7,0-7.5-2.5-7.5-6.6l4.3,0.2c0.1,2,1.3,2.9,3.2,2.9c1.4,0,2.5-0.7,2.5-2.1
+	S197.9,53.9,196.4,53.9z"/>
+<path class="st1" d="M151.4,86.4L147.7,73h-0.1v13.4h-4.1V68.2h6.9l3.2,12.2h0.1l3.1-12.2h6.7v18.3H159V73h-0.1l-3.7,13.5
+	L151.4,86.4z"/>
+<path class="st1" d="M177.9,82.9c0,0.7,0.3,1,0.8,1c0.4,0,0.7-0.1,1.1-0.2v2.2c-0.8,0.6-1.8,0.9-2.7,0.8c-1.4,0.1-2.7-0.9-3-2.3
+	c-0.9,1.5-2.6,2.4-4.3,2.3c-2.6,0-4.2-1.3-4.2-3.5c0-2.5,1.9-3.5,4.7-4.1l3.6-0.6v-0.2c0.1-0.9-0.5-1.8-1.5-1.9c-0.1,0-0.3,0-0.4,0
+	c-1.1,0-2,0.8-2.1,1.8l-3.9-0.3c0.4-2.8,2.5-4.7,6.2-4.7c3.4,0,5.8,1.5,5.8,5L177.9,82.9z M173.8,80.7l-2.1,0.4
+	c-1.3,0.3-2.1,0.6-2.1,1.6c0,0.8,0.6,1.2,1.5,1.2c1.5,0,2.8-1.2,2.8-2.7c0-0.1,0-0.2,0-0.3V80.7z"/>
+<path class="st1" d="M190.6,77.7c-0.7-0.4-1.4-0.6-2.2-0.5c-1.7,0-2.9,1-2.9,3.2v6.1h-4.2V73.6h4.2v2.3c0.5-1.6,1.9-2.7,3.6-2.7
+	c0.6,0,1.3,0.2,1.8,0.5L190.6,77.7z"/>
+<path class="st1" d="M198.3,73.2c3.3-0.2,6.1,2.3,6.3,5.6l-3.5,0.3c-0.3-1.7-1.2-2.7-2.8-2.7s-2.8,1.1-2.8,3.6s1.1,3.6,2.8,3.6
+	s2.5-1,2.8-2.7l3.5,0.3c-0.2,3.3-3,5.8-6.3,5.6c-4,0-7-2.7-7-6.8c-0.1-3.6,2.7-6.7,6.4-6.8C197.9,73.2,198.1,73.2,198.3,73.2z"/>
+<path class="st1" d="M210.7,86.4h-4.2V68.2h4.2v7.4c0.8-1.5,2.5-2.4,4.2-2.3c3.5,0,4.6,2.4,4.6,5.2v8.1h-4.2v-7
+	c0-1.9-0.6-2.9-2.1-2.9s-2.5,1.3-2.5,3.4V86.4z"/>
+</svg>

package/src/sass/base/components/navigation/_feature-nav.scss

@@ -0,0 +1,150 @@
+
+.main-nav__wrapper.main-nav--feature__wrapper {
+
+  .main-nav--feature__inner-wrapper {
+    float: right;
+  }
+  .main-nav__burger {
+    display: block;
+    float: left;
+    margin-left: 10px;
+    height: 77px;
+    border-right: 2px solid $colour-light-grey;
+    border-left: 2px solid $colour-light-grey;
+    
+    @include breakpoint($desktop-nav-breakpoint) {
+      position: relative;
+      z-index: 10;
+      float: left;
+      height: 104px;
+    }
+  }
+
+  .c-hamburger.main-nav-toggle {
+    float: right;
+    font-size: 16px;
+    @include breakpoint($screen-md) {
+      width: 125px;
+      text-indent: 0;
+      .c-hamburger__text {
+        top: 30px;
+
+        &:before {
+          content: "More";
+        }
+      }
+      &.is-active {
+        .c-hamburger__text {
+          &:before {
+            content: "Close";
+          }
+        }
+      }
+    }
+    @include breakpoint($desktop-nav-breakpoint) {
+      .c-hamburger__text {
+        top: 40px;
+      }
+    }
+  }
+
+  .main-nav--feature__featured-items {
+    display: none;
+    float: left;
+    margin-top: 16px;
+    @include breakpoint($desktop-nav-breakpoint) {
+      display: block;
+    }
+    li {
+      display: inline-block;
+      margin: 0 20px;
+      padding: 24px 0;
+      a {
+        transition: border 0.4s;
+        padding: 2px 8px;
+        text-decoration: none;
+        color: #333;
+        border-bottom: 3px solid transparent;
+        font-size: 16px;
+        line-height: 16px;
+        font-family: $body-font;
+      }
+      &.menu-item--active-trail a,
+      &.menu-item--active-trail a:hover,
+      a:hover {
+        border-bottom: 3px solid $colour-red;
+        background-color: transparent;
+      }
+    }
+  } 
+  .main-nav__items.main-nav--feature__items {
+    display: none;
+    &.menu-open {
+      display: block;
+      position: absolute;
+      top: 80px;
+      right: 0;
+      overflow: hidden;
+      margin: 0;
+      padding: 10px 0;
+      width: 100%;
+      height:auto;
+      z-index: 100;
+      text-align: right;
+      background-color: #051d37;
+
+      li,
+      li.item-open {
+        display: block;
+        position: relative;
+        padding: 0;
+        /* Main menu text */
+        a {
+          display: block;
+          padding: 10px 30px;
+          text-decoration: none;
+          color: $colour-white;
+          font-size: 20px;
+          line-height: 20px;
+          font-family: $body-font;
+        }
+        > ul {
+          display: none !important; // fallback in case there are more levels
+        }
+        &:hover {
+          background-color: #1e354b;
+          > a {
+            span.menu-item__text {
+              border: none;
+            }
+          }
+          > ul {
+            display: none !important; // fallback in case there are more levels
+          }
+        }
+        .font--red:hover,
+        .font--red {
+          color: $colour-red;
+        }  
+      }
+      @include breakpoint($screen-md) {
+        top: 80px;
+        width: auto;
+      }
+      @include breakpoint($desktop-nav-breakpoint) {
+        top: 107px;
+      }
+    }
+  }
+}
+
+#main-menu.main-nav--feature__items {
+  @include breakpoint($desktop-nav-breakpoint) {
+    // Override any prior jQuery animations from changing breakpoint
+    display: none !important;
+
+    &.menu-open {
+      display: block !important;
+    }
+  }
+}

package/src/sass/base/components/navigation/_footer-nav.scss

@@ -0,0 +1,37 @@
+
+.menu--footer {
+  margin: 15px 0 15px;
+  ul {
+    margin-left: 0;
+    text-align: center;
+    li {
+      display: inline-block;
+      margin: 10px 0;
+      a {
+        display: block;
+        margin: 0 5px 0 0;
+        padding: 0 15px 0 10px;
+        text-decoration: none;
+        color: $colour-white;
+        border-right: 1px solid $colour-white;
+        font-weight: 300;
+        font-family: $body-font;
+        transition: color 180ms;
+        
+        &:hover, &:focus {
+          color: $colour-smoke-grey;
+          text-decoration: underline;
+        }
+        &.is-active {
+          color: #c8c8c8;
+        }
+      }
+      &:last-child {
+        a {
+          margin: 0;
+          border-right: none;
+        }
+      }
+    }
+  }
+}

package/src/sass/base/components/navigation/_hamburger-menu-button.scss

@@ -0,0 +1,108 @@
+$button-width: 76px;                    // The width of the button area
+$button-height: 103px;                  // The height of the button area
+$bar-thickness: 3px;                    // The thickness of the button bars
+$button-pad: 25px;                      // The left/right padding between button area and bars.
+$button-bar-space: 5px;                 // The spacing between button bars
+$duration: 0.2s;                        // The transition duration
+
+.c-hamburger {
+  position: relative;
+  display: block;
+  overflow: hidden;
+  width: 65px;
+  height: 76px;
+  margin: 0;
+  padding: 0 20px;
+  cursor: pointer;
+  transition: background $duration;
+  text-align: left;
+  text-indent: -9999px;
+  border: none;
+  border-radius: 0;
+  background-color: transparent;
+  box-shadow: none;
+  @include breakpoint($desktop-nav-breakpoint) {
+    width: 140px;
+    height: 103px;
+    text-indent: 0;
+  }
+
+  -webkit-appearance: none;
+     -moz-appearance: none;
+          appearance: none;
+  &:hover {
+    span,
+    span::before,
+    span::after {
+      background-color: $colour-black;
+    }
+  }
+  span {
+    position: absolute;
+    top: 32px;
+    right: 15px;
+    display: block;
+    width: 36px;
+    height: 3px;
+    background-color: $colour-jasper-grey;
+
+    @include breakpoint($screen-md) {
+      top: 39px;
+    }
+
+    @include breakpoint($desktop-nav-breakpoint) {
+      top: 50px;
+      right: 20px;
+      &:before {
+        top: -9px;
+        height: 4px;
+      }
+      &:after {
+        bottom: -9px;
+        height: 4px;
+      }
+    }
+    &::before,
+    &::after {
+      position: absolute;
+      display: block;
+      width: 100%;
+      height: $bar-thickness;
+      content: "";
+      transition-delay: $duration, 0s;
+      transition-duration: $duration, $duration;
+      background-color: $colour-jasper-grey;
+    }
+  }
+  &.is-active {
+    background-color: #f9f9f9;
+    span {
+      background: none;
+      &:before {
+        top: 0;
+        transition-delay: 0s, $duration;
+        transform: rotate(45deg);
+        background-color: $colour-black;
+      }
+      &:after {
+        bottom: 0;
+        transition-delay: 0s, $duration;
+        transform: rotate(-45deg);
+        background-color: $colour-black;
+      }
+    }
+  }
+}
+.c-hamburger__text {
+  top: 37px;
+  position: absolute;
+  font-family: $body-font;
+}
+.c-hamburger span::before {
+  top: -$bar-thickness - $button-bar-space;
+  transition-property: top, transform;
+}
+.c-hamburger span::after {
+  bottom: -$bar-thickness - $button-bar-space;
+  transition-property: bottom, transform;
+}