Initial commit

scss/components/header.scss

@@ -0,0 +1,98 @@
+.header {
+    position: relative;
+    margin-bottom: gutter(6);
+    background: $brand-color-a;
+    color: $brand-white;
+    z-index: $z-mid;
+
+    @include breakpoint($sm) {
+        border: 0;
+    }
+}
+
+.header__inner {
+    padding: 40px 0;
+    overflow: auto;
+    overflow-x: hidden;
+
+    @include breakpoint($md) {
+        display: flex;
+        flex-wrap: wrap;
+        padding: 80px 0;
+    }
+}
+
+.header__content {
+    width: 100%;
+
+    @include breakpoint($md) {
+        @include span(8);
+        @include last();
+    }
+}
+
+.header__title {
+    @extend .h1;
+    margin-bottom: 5px;
+}
+
+.header__subtitle {
+    @extend .h2;
+    color: mix($brand-color-a, $brand-color-f);
+    margin-bottom: 25px;
+}
+
+.header__promo {
+    @include hex__outer;
+    display: none;
+
+    @include breakpoint($md) {
+        display: block;
+        @include span(4);
+        margin-bottom: gutter(8);
+    }
+}
+.header__promo__inner {
+    @include hex__middle;
+}
+.header__promo__media {
+    @include hex__inner;
+}
+
+.header__social {
+    display: flex;
+    justify-content: flex-end;
+    align-items: stretch;
+    margin-top: 10vh;
+}
+
+.header__social__item {
+    margin: 0;
+}
+
+.header__social__link {
+    font-size: 150%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    line-height: 1;
+    padding: 10px;
+    background: tint($brand-color-a, 50%);
+    color: mix($brand-color-a, $brand-color-f, 80%);
+
+    .header__social__item:nth-child(5n) & {
+        background: tint($brand-color-a, 30%);
+    }
+    .header__social__item:nth-child(even) & {
+        background: tint($brand-color-a, 40%);
+    }
+
+    &:hover {
+        background: tint($brand-color-a, 25%);
+
+        .header__social__item:nth-child(even) &,
+        .header__social__item:nth-child(5n) & {
+            background: tint($brand-color-a, 25%);
+        }
+    }
+}

scss/components/navigation.scss

@@ -0,0 +1,66 @@
+.navigation {
+    display: none;
+
+    @include breakpoint($sm) {
+        position: relative;
+        display: block;
+        width: 100%;
+        background: $brand-color-f;
+        color: $brand-white;
+        font-size: $font-size-small;
+        font-weight: $font-weight-bold;
+        letter-spacing: 1px;
+        line-height: 1.4;
+        z-index: $z-mid;
+
+        &::after {
+            position: absolute;
+            content: '';
+            top: 100%;
+            left: 50%;
+            width: 0;
+            height: 0;
+            border-style: solid;
+            border-width: 25px 45px 0 45px;
+            border-color: $brand-color-f transparent transparent transparent;
+            transform: translateX(-50%);
+        }
+    }
+}
+
+.navigation--fixed {
+    position: fixed;
+    top: 0;
+    z-index: $z-high;
+}
+
+.navigation__level-0 {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.navigation__item {
+    margin: 0;
+    flex-basis: 15%;
+    text-align: center;
+}
+
+.navigation__item--left {
+    margin-right: 20px;
+}
+
+.navigation__item--right {
+    margin-left: 20px;
+}
+
+.navigation__link {
+    display: block;
+    padding: 15px;
+    text-transform: uppercase;
+
+    &:hover,
+    &:focus {
+        color: $brand-color-a;
+    }
+}

scss/components/promo.scss

@@ -0,0 +1,101 @@
+.promo {
+    @include hex__outer;
+    color: $brand-white;
+	margin-bottom: 25%;
+	
+	@include breakpoint($sm) {
+		width: 33.333%;
+		margin-left: 0;
+		margin-bottom: 0;
+		
+		&:nth-of-type(5n-4) {
+			margin-left: 16.666%;
+		}
+	}
+    
+    
+    .hex-grid--offset & {
+
+        @include breakpoint($md) {
+            &:first-of-type {
+                margin-left: 25%;
+            }
+        
+            &:nth-of-type(5n-4) {
+                margin: 0;
+            }
+            
+            &:nth-of-type(7n-3) {
+                margin-left: 16.66667%;
+            }
+        }
+    }
+}
+.promo__inner {
+	@include hex__middle;
+}
+.promo__content {
+    @include hex__inner;
+	
+	&:hover, 
+    &:focus,
+    .promo--closed & {
+		.promo__title,
+		.promo__body {
+			transform: translate3d(0,0,0);
+		}
+    }
+}
+.promo__title, 
+.promo__body {
+    width: 100%;
+    padding: 5%;
+    box-sizing: border-box;
+    background-color: fade-out($brand-color-e, 0.1);
+    font-weight: 300;
+    transition: transform .2s ease-in-out, opacity .3s ease-in-out;
+}
+.promo__title {
+    margin-bottom: 0;
+    bottom: 55%;
+    padding-top: 50%;
+
+	@include breakpoint($sm) {
+        transform: translate3d(0,-100%,0);
+    }
+    
+    &::after {
+        content: '';
+        position: absolute;
+        bottom: 0;
+        left: 45%;
+        width: 10%;
+        text-align: center;
+        border-bottom: 1px solid #fff;
+    }
+}
+.promo__body {
+    top: 45%;
+    padding-bottom: 50%;
+    
+	@include breakpoint($sm) {
+        transform: translate3d(0,100%,0);
+    }
+}
+
+.promo__media {
+    mix-blend-mode: overlay;
+}
+
+@each $index, $color in $brand-colors {
+    .promo--theme-#{$index} {
+        .promo__content {
+            background-color: fade-out($color, 0.7);
+        }
+
+        .promo__title, 
+        .promo__body {
+            background-color: fade-out(shade($color, 15%), 0.2);
+        }
+    }
+}

scss/components/section.scss

@@ -0,0 +1,47 @@
+.section {
+    position: relative;
+    width: 100%;
+}
+
+.section__title {
+    @extend .h3;
+}
+
+.section--style-a {
+    float: left;
+    margin-top: 50px;
+
+    &:first-child {
+        margin-top: 0;
+    }
+
+    .section__block--a {
+        margin-bottom: 50px;
+    }
+
+	@include breakpoint($md) {
+        width: 100%;
+        margin-bottom: 5%;
+
+        + .section--style-a {
+            margin-top: -11.5%
+        }
+
+        .section__block--a {
+            @include span(3);
+            padding-top: 7vw;
+            margin-bottom: 0;
+        }
+
+        .section__block--b {
+            @include span(9);
+            @include last()
+        }
+    }
+
+    @include breakpoint($xl) {
+        .section__block--a {
+            padding-top: 100px;
+        }
+    }
+}