| @@ -0,0 +1,274 @@ | ||
| /*! fancyBox v2.1.5 fancyapps.com | fancyapps.com/fancybox/#license */ | ||
| .fancybox-wrap, | ||
| .fancybox-skin, | ||
| .fancybox-outer, | ||
| .fancybox-inner, | ||
| .fancybox-image, | ||
| .fancybox-wrap iframe, | ||
| .fancybox-wrap object, | ||
| .fancybox-nav, | ||
| .fancybox-nav span, | ||
| .fancybox-tmp | ||
| { | ||
| padding: 0; | ||
| margin: 0; | ||
| border: 0; | ||
| outline: none; | ||
| vertical-align: top; | ||
| } | ||
|
|
||
| .fancybox-wrap { | ||
| position: absolute; | ||
| top: 0; | ||
| left: 0; | ||
| z-index: 8020; | ||
| } | ||
|
|
||
| .fancybox-skin { | ||
| position: relative; | ||
| background: #f9f9f9; | ||
| color: #444; | ||
| text-shadow: none; | ||
| -webkit-border-radius: 4px; | ||
| -moz-border-radius: 4px; | ||
| border-radius: 4px; | ||
| } | ||
|
|
||
| .fancybox-opened { | ||
| z-index: 8030; | ||
| } | ||
|
|
||
| .fancybox-opened .fancybox-skin { | ||
| -webkit-box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5); | ||
| -moz-box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5); | ||
| box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5); | ||
| } | ||
|
|
||
| .fancybox-outer, .fancybox-inner { | ||
| position: relative; | ||
| } | ||
|
|
||
| .fancybox-inner { | ||
| overflow: hidden; | ||
| } | ||
|
|
||
| .fancybox-type-iframe .fancybox-inner { | ||
| -webkit-overflow-scrolling: touch; | ||
| } | ||
|
|
||
| .fancybox-error { | ||
| color: #444; | ||
| font: 14px/20px "Helvetica Neue",Helvetica,Arial,sans-serif; | ||
| margin: 0; | ||
| padding: 15px; | ||
| white-space: nowrap; | ||
| } | ||
|
|
||
| .fancybox-image, .fancybox-iframe { | ||
| display: block; | ||
| width: 100%; | ||
| height: 100%; | ||
| } | ||
|
|
||
| .fancybox-image { | ||
| max-width: 100%; | ||
| max-height: 100%; | ||
| } | ||
|
|
||
| #fancybox-loading, .fancybox-close, .fancybox-prev span, .fancybox-next span { | ||
| background-image: url('../images/fancybox_sprite.png'); | ||
| } | ||
|
|
||
| #fancybox-loading { | ||
| position: fixed; | ||
| top: 50%; | ||
| left: 50%; | ||
| margin-top: -22px; | ||
| margin-left: -22px; | ||
| background-position: 0 -108px; | ||
| opacity: 0.8; | ||
| cursor: pointer; | ||
| z-index: 8060; | ||
| } | ||
|
|
||
| #fancybox-loading div { | ||
| width: 44px; | ||
| height: 44px; | ||
| background: url('../images/fancybox_loading.gif') center center no-repeat; | ||
| } | ||
|
|
||
| .fancybox-close { | ||
| position: absolute; | ||
| top: -18px; | ||
| right: -18px; | ||
| width: 36px; | ||
| height: 36px; | ||
| cursor: pointer; | ||
| z-index: 8040; | ||
| } | ||
|
|
||
| .fancybox-nav { | ||
| position: absolute; | ||
| top: 0; | ||
| width: 40%; | ||
| height: 100%; | ||
| cursor: pointer; | ||
| text-decoration: none; | ||
| background: transparent url('../images/blank.gif'); /* helps IE */ | ||
| -webkit-tap-highlight-color: rgba(0,0,0,0); | ||
| z-index: 8040; | ||
| } | ||
|
|
||
| .fancybox-prev { | ||
| left: 0; | ||
| } | ||
|
|
||
| .fancybox-next { | ||
| right: 0; | ||
| } | ||
|
|
||
| .fancybox-nav span { | ||
| position: absolute; | ||
| top: 50%; | ||
| width: 36px; | ||
| height: 34px; | ||
| margin-top: -18px; | ||
| cursor: pointer; | ||
| z-index: 8040; | ||
| visibility: hidden; | ||
| } | ||
|
|
||
| .fancybox-prev span { | ||
| left: 10px; | ||
| background-position: 0 -36px; | ||
| } | ||
|
|
||
| .fancybox-next span { | ||
| right: 10px; | ||
| background-position: 0 -72px; | ||
| } | ||
|
|
||
| .fancybox-nav:hover span { | ||
| visibility: visible; | ||
| } | ||
|
|
||
| .fancybox-tmp { | ||
| position: absolute; | ||
| top: -99999px; | ||
| left: -99999px; | ||
| visibility: hidden; | ||
| max-width: 99999px; | ||
| max-height: 99999px; | ||
| overflow: visible !important; | ||
| } | ||
|
|
||
| /* Overlay helper */ | ||
|
|
||
| .fancybox-lock { | ||
| overflow: hidden !important; | ||
| width: auto; | ||
| } | ||
|
|
||
| .fancybox-lock body { | ||
| overflow: hidden !important; | ||
| } | ||
|
|
||
| .fancybox-lock-test { | ||
| overflow-y: hidden !important; | ||
| } | ||
|
|
||
| .fancybox-overlay { | ||
| position: absolute; | ||
| top: 0; | ||
| left: 0; | ||
| overflow: hidden; | ||
| display: none; | ||
| z-index: 8010; | ||
| background: url('../images/fancybox_overlay.png'); | ||
| } | ||
|
|
||
| .fancybox-overlay-fixed { | ||
| position: fixed; | ||
| bottom: 0; | ||
| right: 0; | ||
| } | ||
|
|
||
| .fancybox-lock .fancybox-overlay { | ||
| overflow: auto; | ||
| overflow-y: scroll; | ||
| } | ||
|
|
||
| /* Title helper */ | ||
|
|
||
| .fancybox-title { | ||
| visibility: hidden; | ||
| font: normal 13px/20px "Helvetica Neue",Helvetica,Arial,sans-serif; | ||
| position: relative; | ||
| text-shadow: none; | ||
| z-index: 8050; | ||
| } | ||
|
|
||
| .fancybox-opened .fancybox-title { | ||
| visibility: visible; | ||
| } | ||
|
|
||
| .fancybox-title-float-wrap { | ||
| position: absolute; | ||
| bottom: 0; | ||
| right: 50%; | ||
| margin-bottom: -35px; | ||
| z-index: 8050; | ||
| text-align: center; | ||
| } | ||
|
|
||
| .fancybox-title-float-wrap .child { | ||
| display: inline-block; | ||
| margin-right: -100%; | ||
| padding: 2px 20px; | ||
| background: transparent; /* Fallback for web browsers that doesn't support RGBa */ | ||
| background: rgba(0, 0, 0, 0.8); | ||
| -webkit-border-radius: 15px; | ||
| -moz-border-radius: 15px; | ||
| border-radius: 15px; | ||
| text-shadow: 0 1px 2px #222; | ||
| color: #FFF; | ||
| font-weight: bold; | ||
| line-height: 24px; | ||
| white-space: nowrap; | ||
| } | ||
|
|
||
| .fancybox-title-outside-wrap { | ||
| position: relative; | ||
| margin-top: 10px; | ||
| color: #fff; | ||
| } | ||
|
|
||
| .fancybox-title-inside-wrap { | ||
| padding-top: 10px; | ||
| } | ||
|
|
||
| .fancybox-title-over-wrap { | ||
| position: absolute; | ||
| bottom: 0; | ||
| left: 0; | ||
| color: #fff; | ||
| padding: 10px; | ||
| background: #000; | ||
| background: rgba(0, 0, 0, .8); | ||
| } | ||
|
|
||
| /*Retina graphics!*/ | ||
| @media only screen and (-webkit-min-device-pixel-ratio: 1.5), | ||
| only screen and (min--moz-device-pixel-ratio: 1.5), | ||
| only screen and (min-device-pixel-ratio: 1.5){ | ||
|
|
||
| #fancybox-loading, .fancybox-close, .fancybox-prev span, .fancybox-next span { | ||
| background-image: url('../images/fancybox_sprite@2x.png'); | ||
| background-size: 44px 152px; /*The size of the normal image, half the size of the hi-res image*/ | ||
| } | ||
|
|
||
| #fancybox-loading div { | ||
| background-image: url('../images/fancybox_loading@2x.gif'); | ||
| background-size: 24px 24px; /*The size of the normal image, half the size of the hi-res image*/ | ||
| } | ||
| } |
| @@ -0,0 +1,83 @@ | ||
| @media screen and (max-width: 1024px) { | ||
| #header .header-content { | ||
| width: 90%; } | ||
|
|
||
| .nav-toggle { | ||
| display: block; } | ||
|
|
||
| .navigation { | ||
| position: fixed; | ||
| background-color: #000; | ||
| width: 100%; | ||
| height: 100%; | ||
| top: 0; | ||
| left: 0; | ||
| z-index: 99999; | ||
| visibility: hidden; | ||
| opacity: 0; | ||
| -webkit-transition: opacity 0.5s, visibility 0s 0.5s; | ||
| transition: opacity 0.5s, visibility 0s 0.5s; } | ||
| .navigation .primary-nav { | ||
| position: relative; | ||
| top: 45%; | ||
| -moz-transform: translateY(-45%); | ||
| -ms-transform: translateY(-45%); | ||
| -webkit-transform: translateY(-45%); | ||
| transform: translateY(-45%); } | ||
| .navigation li { | ||
| display: block; | ||
| margin-bottom: 20px; } | ||
| .navigation a { | ||
| display: block; | ||
| font-size: 25px; | ||
| margin: 0; | ||
| text-align: center; } | ||
|
|
||
| .person { | ||
| margin: 0 auto 50px; } | ||
| .person-content { | ||
| text-align: center; } | ||
| .person .social-icons li { | ||
| display: inline-block; | ||
| float: none; | ||
| margin-bottom: 5px; } | ||
|
|
||
| .testimonials blockquote { | ||
| padding: 20px 5% 0; } | ||
| .testimonials p { | ||
| font-size: 26px; } | ||
|
|
||
| .flex-control-nav { | ||
| bottom: 20px; } } | ||
| @media screen and (max-width: 768px) { | ||
| .banner-text { | ||
| padding-top: 30%; } | ||
| .banner-text h1 { | ||
| font-size: 42px; } | ||
| .banner-text p { | ||
| font-size: 18px; } | ||
|
|
||
| .flexslider { | ||
| padding-bottom: 80px; } | ||
|
|
||
| .flex-control-nav { | ||
| width: 100%; } | ||
|
|
||
| .footer .footer-col { | ||
| margin-bottom: 50px; } } | ||
| @media screen and (max-width: 640px) { | ||
| .banner-text { | ||
| padding-top: 35%; } } | ||
| @media screen and (max-width: 480px) { | ||
| .banner-text { | ||
| padding-top: 45%; } | ||
| .banner-text h1 { | ||
| font-size: 32px; } } | ||
| @media screen and (max-width: 320px) { | ||
| .banner-text { | ||
| padding-top: 55%; } | ||
|
|
||
| .testimonials blockquote { | ||
| padding: 20px 5% 0; } | ||
| .testimonials p { | ||
| font-size: 26px; } } |
| @@ -0,0 +1,68 @@ | ||
| $(document).ready(function() { | ||
| // Header Scroll | ||
| $(window).on('scroll', function() { | ||
| var scroll = $(window).scrollTop(); | ||
|
|
||
| if (scroll >= 50) { | ||
| $('#header').addClass('fixed'); | ||
| } else { | ||
| $('#header').removeClass('fixed'); | ||
| } | ||
| }); | ||
|
|
||
| // Waypoints | ||
| $('.work').waypoint(function() { | ||
| $('.work').addClass('animated fadeIn'); | ||
| }, { | ||
| offset: '75%' | ||
| }); | ||
| $('.download').waypoint(function() { | ||
| $('.download .btn').addClass('animated tada'); | ||
| }, { | ||
| offset: '75%' | ||
| }); | ||
|
|
||
| // Fancybox | ||
| $('.work-box').fancybox(); | ||
|
|
||
| // Flexslider | ||
| $('.flexslider').flexslider({ | ||
| animation: "fade", | ||
| directionNav: false, | ||
| }); | ||
|
|
||
| // Page Scroll | ||
| var sections = $('section') | ||
| nav = $('nav[role="navigation"]'); | ||
|
|
||
| $(window).on('scroll', function () { | ||
| var cur_pos = $(this).scrollTop(); | ||
| sections.each(function() { | ||
| var top = $(this).offset().top - 76 | ||
| bottom = top + $(this).outerHeight(); | ||
| if (cur_pos >= top && cur_pos <= bottom) { | ||
| nav.find('a').removeClass('active'); | ||
| nav.find('a[href="#'+$(this).attr('id')+'"]').addClass('active'); | ||
| } | ||
| }); | ||
| }); | ||
| nav.find('a').on('click', function () { | ||
| var $el = $(this) | ||
| id = $el.attr('href'); | ||
| $('html, body').animate({ | ||
| scrollTop: $(id).offset().top - 75 | ||
| }, 500); | ||
| return false; | ||
| }); | ||
|
|
||
| // Mobile Navigation | ||
| $('.nav-toggle').on('click', function() { | ||
| $(this).toggleClass('close-nav'); | ||
| nav.toggleClass('open'); | ||
| return false; | ||
| }); | ||
| nav.find('a').on('click', function() { | ||
| $('.nav-toggle').toggleClass('close-nav'); | ||
| nav.toggleClass('open'); | ||
| }); | ||
| }); |
| @@ -0,0 +1,18 @@ | ||
| .btn { | ||
| background-color: $brand-color; | ||
| color: $white; | ||
| font-size: 13px; | ||
| font-weight: $semibold; | ||
| border: 0; | ||
| @include border-radius(2px); | ||
| display: inline-block; | ||
| text-transform: uppercase; | ||
| &:hover, | ||
| &:focus { | ||
| background-color: darken($brand-color, 5%); | ||
| color: $white; | ||
| } | ||
| &-large { | ||
| padding: 15px 40px; | ||
| } | ||
| } |
| @@ -0,0 +1,32 @@ | ||
| /* ========================================================================== | ||
| Typography | ||
| ========================================================================== */ | ||
| p { | ||
| font-size: $font-size; | ||
| line-height: $line-height; | ||
| color: $font-color; | ||
| } | ||
| h1 { | ||
| font-size: $h1-font-size; | ||
| color: $base-color; | ||
| } | ||
| h2 { | ||
| font-size: $h2-font-size; | ||
| color: $base-color; | ||
| } | ||
| h3 { | ||
| font-size: $h3-font-size; | ||
| color: $base-color; | ||
| font-weight: $light; | ||
| } | ||
| h4 { | ||
| font-size: $h4-font-size; | ||
| color: $base-color; | ||
| font-weight: $normal; | ||
| } | ||
| h5 { | ||
| font-size: $h5-font-size; | ||
| color: $base-color; | ||
| text-transform: uppercase; | ||
| font-weight: $bold; | ||
| } |
| @@ -0,0 +1,37 @@ | ||
| //Colors | ||
| $white: #fff; | ||
| $black: #000; | ||
| $base-color: #2d3033; | ||
| $font-color: #6c7279; | ||
| $brand-color: #e84545; | ||
| $accent-color: #2b2e4a; | ||
| $nav-color: rgba($white, .75); | ||
|
|
||
| //Typography | ||
| $font: "Raleway", sans-serif; | ||
| $font-secondary: "Open Sans", sans-serif; | ||
| $font-accent: "Cardo", Georgia, 'Times New Roman', serif; | ||
|
|
||
| $light: 300; | ||
| $normal: 400; | ||
| $medium: 500; | ||
| $semibold: 600; | ||
| $bold: 700; | ||
|
|
||
| $font-size: 14px; | ||
| $h1-font-size: 65px; | ||
| $h2-font-size: 40px; | ||
| $h3-font-size: 28px; | ||
| $h4-font-size: 22px; | ||
| $h5-font-size: 14px; | ||
| $nav-font-size: 13px; | ||
|
|
||
| $line-height: $font-size * 1.6; | ||
|
|
||
| // Breakpoints | ||
| $bp-small: 320px; | ||
| $bp-small-2: 480px; | ||
| $bp-small-3: 568px; | ||
| $bp-medium: 640px; | ||
| $bp-medium-2: 768px; | ||
| $bp-large: 1024px; |
| @@ -0,0 +1,121 @@ | ||
| @import "compass"; | ||
| @import "partials/variables"; | ||
|
|
||
| @media screen and (max-width: $bp-large) { | ||
| #header { | ||
| .header-content { | ||
| width: 90%; | ||
| } | ||
| } | ||
| .nav-toggle { | ||
| display: block; | ||
| } | ||
| .navigation { | ||
| position: fixed; | ||
| background-color: #000; | ||
| width: 100%; | ||
| height: 100%; | ||
| top: 0; | ||
| left: 0; | ||
| z-index: 99999; | ||
| visibility: hidden; | ||
| opacity: 0; | ||
| -webkit-transition: opacity 0.5s, visibility 0s 0.5s; | ||
| transition: opacity 0.5s, visibility 0s 0.5s; | ||
| .primary-nav { | ||
| position: relative; | ||
| top: 45%; | ||
| @include transform(translateY(-45%)); | ||
| } | ||
| li { | ||
| display: block; | ||
| margin-bottom: 20px; | ||
| } | ||
| a { | ||
| display: block; | ||
| font-size: 25px; | ||
| margin: 0; | ||
| text-align: center; | ||
| } | ||
| } | ||
| .person { | ||
| margin: 0 auto 50px; | ||
| &-content { | ||
| text-align: center; | ||
| } | ||
| .social-icons { | ||
| li { | ||
| display: inline-block; | ||
| float: none; | ||
| margin-bottom: 5px; | ||
| } | ||
| } | ||
| } | ||
| .testimonials { | ||
| blockquote { | ||
| padding: 20px 5% 0; | ||
| } | ||
| p { | ||
| font-size: 26px; | ||
| } | ||
| } | ||
| .flex-control-nav { | ||
| bottom: 20px; | ||
| } | ||
| } | ||
|
|
||
| @media screen and (max-width: $bp-medium-2) { | ||
| .banner-text { | ||
| padding-top: 30%; | ||
| h1 { | ||
| font-size: 42px; | ||
| } | ||
| p { | ||
| font-size: 18px; | ||
| } | ||
| } | ||
| .flexslider { | ||
| padding-bottom: 80px; | ||
| } | ||
| .flex-control-nav { | ||
| width: 100%; | ||
| } | ||
| .footer { | ||
| .footer-col { | ||
| margin-bottom: 50px; | ||
| } | ||
| } | ||
| } | ||
|
|
||
| @media screen and (max-width: $bp-medium) { | ||
| .banner-text { | ||
| padding-top: 35%; | ||
| } | ||
| } | ||
|
|
||
| @media screen and (max-width: $bp-small-3) { | ||
|
|
||
| } | ||
|
|
||
| @media screen and (max-width: $bp-small-2) { | ||
| .banner-text { | ||
| padding-top: 45%; | ||
| h1 { | ||
| font-size: 32px; | ||
| } | ||
| } | ||
| } | ||
|
|
||
| @media screen and (max-width: $bp-small) { | ||
| .banner-text { | ||
| padding-top: 55%; | ||
| } | ||
| .testimonials { | ||
| blockquote { | ||
| padding: 20px 5% 0; | ||
| } | ||
| p { | ||
| font-size: 26px; | ||
| } | ||
| } | ||
| } |
