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;
+        }
+    }
+}

scss/style.scss

@@ -0,0 +1,18 @@
+@import "../node_modules/susy/sass/susy";
+@import "../node_modules/breakpoint-sass/stylesheets/breakpoint";
+
+@import 'utilities/reset';
+@import 'utilities/variables';
+@import 'utilities/global';
+@import 'utilities/typography';
+@import 'utilities/fonts';
+@import 'utilities/icons';
+@import 'utilities/layout_utilities';
+@import 'utilities/color_utilities';
+@import 'utilities/monitor_mq';
+@import 'utilities/hex';
+
+@import 'components/header';
+@import 'components/navigation';
+@import 'components/promo';
+@import 'components/section';

scss/utilities/_color_utilities.scss

@@ -0,0 +1,49 @@
+@function dynamic-color($color, $lightness: 50, $dark-color: $text-color, $light-color: $brand-white) {
+     @if (lightness($color) > $lightness){
+        @return $dark-color; // Lighter background, return dark color
+    }
+    @else {
+         @return $light-color; // Darker background, return light color
+    }
+}
+@function paired-color($brand-color) {
+		$return-color: dynamic-color($brand-color) !default;
+
+    @if ($brand-color == $brand-color-d){
+        $return-color: $brand-color-a;
+    }
+    @if ($brand-color == $brand-color-e){
+        $return-color: $brand-color-b;
+    }
+    @if ($brand-color == $brand-color-f){
+        $return-color: $brand-color-c;
+    }
+
+		@return $return-color;
+}
+
+@function tint($color, $percentage) {
+  @return mix(#fff, $color, $percentage);
+}
+
+@function shade($color, $percentage) {
+  @return mix(#000, $color, $percentage);
+}
+
+@mixin placeholder($color) {
+	&:-moz-placeholder {
+		color: $color; // Firefox 4-18
+	}
+
+	&::-moz-placeholder {
+		color: $color; // Firefox 19+
+	}
+
+	&:-ms-input-placeholder {
+		color: $color; // Internet Explorer 10+
+	}
+
+	&::-webkit-input-placeholder {
+		color: $color; // Safari and Chrome
+	}
+}

scss/utilities/_global.scss

@@ -0,0 +1,59 @@
+* {
+	-webkit-tap-highlight-color: transparent;
+	word-wrap: break-word;
+	box-sizing: border-box;
+}
+
+html {
+	-webkit-overflow-scrolling: touch;
+
+    min-height: 100%;
+	margin-top: 0 !important;
+
+	background: $background-color;
+
+	overflow-x: hidden;
+
+    font-size: 100%;
+
+	-webkit-font-smoothing: antialiased;
+	-moz-osx-font-smoothing: grayscale;
+
+	// Disable iOS/WinMobile font size changes
+	@include breakpoint(max-width $breakpoint-xs-width-max) {
+		-webkit-text-size-adjust: 100%;
+		-ms-text-size-adjust: 100%;
+	}
+}
+
+.rtl {
+	text-align: right;
+
+	svg {
+        transform: scaleX(-1);
+	}
+}
+
+
+body {
+	color: $text-color;
+
+	font-family: $font-family-base;
+	font-size: $font-size-base;
+	font-weight: $font-weight-regular;
+	line-height: $line-height-base;
+}
+
+.content {
+	font-weight: $font-weight-light;
+}
+
+img {
+	max-width: 100%;
+}
+
+.container {
+	@include container;
+	width: $max-width;
+	padding: 0 40px;
+}

scss/utilities/_hex.scss

@@ -0,0 +1,61 @@
+.hex-grid {
+	@include breakpoint($sm) {
+		display: flex;
+		flex-wrap: wrap;
+		margin: 0 auto;
+		overflow: hidden;
+		padding-bottom: 6.6%
+	}
+}
+
+@mixin hex__outer {
+	position: relative;
+	visibility: hidden;
+	outline: 1px solid transparent;
+
+	&::after {
+		content:'';
+		display: block;
+		padding-bottom: 86.602%; // =  100 / tan(60) * 1.5
+	}
+}
+
+@mixin hex__middle {
+	position: absolute;
+	width: 92%;
+	padding-bottom: 106.232%; // width / sin(60)
+	margin: 0 1%;
+	overflow: hidden;
+	outline: 1px solid transparent;
+	transform: rotate3d(0,0,1,-60deg) skewY(30deg);
+
+	> * {
+		position: absolute;
+		visibility: visible;
+		outline: 1px solid transparent;
+	}
+}
+@mixin hex__inner {
+	display: block;
+	width: 100%;
+	height: 100%;
+	text-align: center;
+	overflow: hidden;
+	transform: skewY(-30deg) rotate3d(0,0,1,60deg);
+
+	img {
+		left: -100%;
+		right: -100%;
+		min-width: 100%;
+		height: 100%;
+		max-width: 200%;
+		margin: 0 auto;
+		transform: rotate3d(0,0,0,0deg);
+	}
+
+	> * {
+		position: absolute;
+		visibility: visible;
+		outline: 1px solid transparent;
+	}
+}

scss/utilities/_icons.scss

@@ -0,0 +1,104 @@
+$icons: (
+	flickr: "\eaa3",
+	flickr2: "\eaa4",
+	github: "\eab0",
+	lastfm: "\eacb",
+	envelope-o: "\f003",
+	twitter: "\f099",
+	facebook: "\f09a",
+	facebook-f: "\f09a",
+	pinterest: "\f0d2",
+	google-plus: "\f0d5",
+	envelope: "\f0e0",
+	linkedin: "\f0e1",
+	rss-square: "\f143",
+	youtube: "\f167",
+	xing: "\f168",
+	youtube-play: "\f16a",
+	dropbox: "\f16b",
+	instagram: "\f16d",
+	tumblr: "\f173",
+	foursquare: "\f180",
+	vk: "\f189",
+	weibo: "\f18a",
+	renren: "\f18b",
+	google: "\f1a0",
+	stumbleupon: "\f1a4",
+	delicious: "\f1a5",
+	digg: "\f1a6",
+	file-pdf-o: "\f1c1",
+	file-word-o: "\f1c2",
+	file-excel-o: "\f1c3",
+	file-powerpoint-o: "\f1c4",
+	vine: "\f1ca",
+	tencent-weibo: "\f1d5",
+	qq: "\f1d6",
+	wechat: "\f1d7",
+	weixin: "\f1d7",
+	paper-plane: "\f1d8",
+	send: "\f1d8",
+	paper-plane-o: "\f1d9",
+	send-o: "\f1d9",
+	pinterest-p: "\f231",
+	medium: "\f23a",
+	tripadvisor: "\f262",
+	vimeo: "\f27d",
+	snapchat-ghost: "\f2ac",
+	meetup: "\f2e0"
+);
+
+// For adding font icons to elements using CSS pseudo-elements
+// http://jaydenseric.com/blog/fun-with-sass-and-font-icons
+@mixin icon($position: before, $icon: false, $styles: true) {
+	
+    @if $position == both {
+        $position: 'before, &:after';
+    }
+    // Either a :before or :after pseudo-element, or both, defaulting to :before
+    &:#{$position} {
+        @if $icon {
+            // A particular icon has been specified
+            content: "#{map-get($icons, $icon)}";
+        }
+        @if $styles {
+            // Supportive icon styles required
+            vertical-align: middle;
+			text-transform: none;
+			font-weight: normal;
+			font-style: normal;
+			font-variant: normal;
+			font-family: '#{$icon-font}';
+			line-height: 1;
+
+			speak: none;
+			-webkit-font-smoothing: antialiased;
+			-moz-osx-font-smoothing: grayscale;
+        }
+        // Include any extra rules supplied for the pseudo-element
+        @content;
+    }
+}
+
+@font-face {
+	font-weight: normal;
+	font-style: normal;
+	font-family: '#{$icon-font}';
+	src:url('#{$directory-fonts}/#{$icon-font}/#{$icon-font}.eot?-gfwsty');
+	src:url('#{$directory-fonts}/#{$icon-font}/#{$icon-font}.eot?#iefix-gfwsty') format('embedded-opentype'),
+	url('#{$directory-fonts}/#{$icon-font}/#{$icon-font}.ttf?-gfwsty') format('truetype'),
+	url('#{$directory-fonts}/#{$icon-font}/#{$icon-font}.woff?-gfwsty') format('woff'),
+	url('#{$directory-fonts}/#{$icon-font}/#{$icon-font}.svg?-gfwsty##{$icon-font}') format('svg');
+}
+
+// Set the required styles on all icons
+[class^="icon--"],
+[class*=" icon--"] {
+    @include icon;
+}
+
+// Setup a class name for each icon
+@each $name, $char in $icons {
+    .icon--#{$name} {
+		@include icon(before, $name, false);
+    }
+}

scss/utilities/_layout_utilities.scss

@@ -0,0 +1,53 @@
+.visually-hidden {
+	position: absolute; 
+	overflow: hidden; 
+	clip: rect(0 0 0 0); 
+	height: 1px; 
+	width: 1px; 
+	margin: -1px; 
+	padding: 0; 
+	border: 0; 
+}
+
+@mixin hidden-xs { 
+	@include breakpoint(max-width $breakpoint-sm-width) {
+		display: none;
+	}
+}
+
+@mixin hidden-sm {
+	@include breakpoint($breakpoint-sm-width $breakpoint-sm-width-max) {
+		display: none;
+	}	
+}
+
+
+@mixin hidden-md {
+	@include breakpoint($breakpoint-md-width $breakpoint-md-width-max) {
+		display: none;
+	}	
+}
+
+@mixin hidden-lg {
+	@include breakpoint($breakpoint-lg-width) {
+		display: none;
+	}
+}
+
+@mixin with-rtl($padding-end: null) {
+	@content;
+
+	@if $padding-end != null {
+		padding-right: $padding-end;
+	}
+
+	.rtl & {
+		@include with-layout(rtl) {
+			@content;
+
+			@if $padding-end != null {
+				padding-left: $padding-end;
+			}
+		}
+	}
+}

scss/utilities/_monitor_mq.scss

@@ -0,0 +1,27 @@
+// for monitor-mq.js
+.monitor-mq {
+	display: block;
+	height: 1px;
+	overflow: hidden;
+	position: absolute;
+	top: -9999em;
+	left: -9999em;
+	// smallest
+	width: $sm;
+
+	@include breakpoint($md) {
+		width: $md;
+	}
+
+	@include breakpoint($lg) {
+		width: $lg;
+	}
+
+	@include breakpoint($xl) {
+		width: $xl;
+	}
+
+	@include breakpoint($xxl) {
+		width: $xxl;
+	}
+}

scss/utilities/_reset.scss

@@ -0,0 +1 @@
+/** * Eric Meyer's Reset CSS v2.0 (http://meyerweb.com/eric/tools/css/reset/) * http://cssreset.com */html, body, div, span, applet, object, iframe,h1, h2, h3, h4, h5, h6, p, blockquote, pre,a, abbr, acronym, address, big, cite, code,del, dfn, em, img, ins, kbd, q, s, samp,small, strike, strong, sub, sup, tt, var,b, u, i, center,dl, dt, dd, ol, ul, li,fieldset, form, label, legend,table, caption, tbody, tfoot, thead, tr, th, td,article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary,time, mark, audio, video {	margin: 0;	padding: 0;	border: 0;	font-size: 100%;	font: inherit;	vertical-align: baseline;}/* HTML5 display-role reset for older browsers */article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {	display: block;}body {	line-height: 1;}ol, ul {	list-style: none;}blockquote, q {	quotes: none;}blockquote:before, blockquote:after,q:before, q:after {	content: '';	content: none;}table {	border-collapse: collapse;	border-spacing: 0;}

scss/utilities/_typography.scss

@@ -0,0 +1,78 @@
+p {
+    margin-bottom: 15px;
+
+    &:last-child {
+        margin-bottom: 0;
+    }
+}
+
+a {
+    text-decoration: none;
+    color: inherit;
+
+    &[href^=tel] {
+        direction: ltr;
+        unicode-bidi: embed;
+    }
+}
+
+li {
+    margin-bottom: 5px;
+}
+
+.h1,
+.h2,
+.h3,
+.h4,
+.h5 {
+    display: block;
+    margin-bottom: 10px;
+    font-weight: $font-weight-regular;
+    font-family: $font-family-heading;
+    line-height: 1.2;
+}
+
+.h1 {
+    font-size: 30px;
+    font-size: calc(20px + 2vw);
+    
+    @include breakpoint($xl) {
+        font-size: 48px;
+    }
+}
+
+.h2 {
+    font-size: 22px;
+    font-size: calc(18px + 0.7vw);
+
+    @include breakpoint($xl) {
+        font-size: 28px;
+    }
+}
+.h3 {
+    font-size: 18px;
+    font-size: calc(16px + 0.6vw);
+    
+    @include breakpoint($xl) {
+        font-size: 24px;
+    }
+}
+.h4 {
+    font-size: 16px;
+    font-size: calc(16px + 0.5vw);
+    
+    @include breakpoint($lg) {
+        font-size: 22px;
+    }
+}
+.h5 {
+    font-size: 15px;
+    font-size: calc(15px + 0.25vw);
+    
+    @include breakpoint($lg) {
+        font-size: 18px;
+    }
+}
+.h6 {
+    font-size: $font-size-base;
+}

scss/utilities/_variables.scss

@@ -0,0 +1,86 @@
+$susy: (
+  columns: 12,
+  gutters: 1,
+  math: fluid,
+  output: float,
+  gutter-position: after
+  // debug: (image: show)
+);
+
+// break points
+$breakpoint-xs-width: 480px;
+$breakpoint-sm-width: 800px;
+$breakpoint-md-width: 1080px;
+$breakpoint-lg-width: 1200px;
+$breakpoint-xl-width: 1400px;
+$breakpoint-xxl-width: 1920px;
+
+//aliases
+$xs: $breakpoint-xs-width;
+$sm: $breakpoint-sm-width;
+$md: $breakpoint-md-width;
+$lg: $breakpoint-lg-width;
+$xl: $breakpoint-xl-width;
+$xxl: $breakpoint-xxl-width;
+
+$breakpoint-xxs-width-max: $xs - 1;
+$breakpoint-xs-width-max: $sm - 1;
+$breakpoint-sm-width-max: $md - 1;
+$breakpoint-md-width-max: $lg - 1;
+$breakpoint-lg-width-max: $xl - 1;
+$breakpoint-xl-width-max: $xxl - 1;
+
+$retina-query: (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi);
+
+$max-width: $xl;
+
+// Colors
+$brand-color-a: #0da8ad;
+$brand-color-b: #FFC56C;
+$brand-color-c: #003A6F;
+$brand-color-d: #FF5959;
+$brand-color-e: #814374;
+$brand-color-f: #323232;
+$brand-color-g: #777777;
+
+$brand-colors: (
+  a: $brand-color-a,
+  b: $brand-color-b,
+  c: $brand-color-c,
+  d: $brand-color-d,
+  e: $brand-color-e,
+  f: $brand-color-f
+);
+
+$brand-white: #FFF;
+$brand-black: #000;
+
+$text-color: #333 !default;
+$background-color: #f9f9f9;
+
+// Typography
+$font-family-sans-serif: 'Didact Gothic', Helvetica, Arial, sans-serif;
+$font-family-serif: 'Georgia Pro', Georgia, Times, serif;
+$font-family-mono: 'Anonymous Pro', 'Droid Sans Mono', 'DejaVu Sans Mono', Monaco, Consolas, 'Lucida Console', Courier, monospace;
+$font-family-base: $font-family-sans-serif;
+$font-family-heading: 'Ubuntu', $font-family-sans-serif;
+$icon-font: 'icomoon';
+$directory-fonts: './fonts';
+
+// Font Sizing
+$font-size-base: 16px;
+$line-height-base: 1.8;
+$font-size-small: 14px;
+
+$font-weight-bold: 700;
+$font-weight-medium: 500;
+$font-weight-regular: 400;
+$font-weight-light: 100;
+
+// z-index
+$z-below: 0;
+$z-base: 1;
+$z-small: 5;
+$z-mid: 10;
+$z-high: 100;
+$z-super: 1000;