Last active
July 26, 2018 08:18
-
-
Save matt-barker/c91b559202fa152650effbe8758c3c95 to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!-- Border image hover effect code--> | |
<script> | |
$(document).ready(function() { | |
var divisor = 10, //set the strength of the effect (lower = more extreme) | |
borderSpeed = 500; //set the speed of the effect (lower = faster) | |
$('.border-image-start').closest('.sqs-block-code').addClass('border-image-code-block').next('.sqs-block-image').addClass('border-image-block'); | |
$('.border-image-start').closest('section').css({ | |
"overflow": "visible" | |
}); | |
$(window).ready(function() { | |
setTimeout(function() { | |
$('.border-image-block').each(function() { | |
var c = $(this).prev('.border-image-code-block').find('.border-image-start').css('color'); | |
$(this).find('img').before('<span class="border"></span>'); | |
$(this).find('.border').css({ | |
"border": "3px solid " + c | |
}) | |
}) | |
}, 500); | |
$('.border-image-block').hover(function() { | |
var width = $(this).width(), | |
height = $(this).height(); | |
$(this).mousemove(function(e) { | |
var offset = $(this).offset(), | |
relativeX = (e.pageX - offset.left), | |
relativeY = (e.pageY - offset.top), | |
distanceFromCenterX = relativeX - (width / 2), | |
distanceFromCenterY = relativeY - (height / 2), | |
distanceFromCenterXInv = (width / 2) - relativeX, | |
distanceFromCenterYInv = (width / 2) - relativeY, | |
shiftX = distanceFromCenterX / divisor, | |
shiftY = distanceFromCenterY / divisor, | |
shiftXInv = distanceFromCenterXInv / divisor, | |
shiftYInv = distanceFromCenterYInv / divisor; | |
$(this).find('.border').css({ | |
"-webkit-transform": "translate(" + shiftX + "px," + shiftY + "px)", | |
"-ms-transform": "translate(" + shiftX + "px," + shiftY + "px)", | |
"transform": "translate(" + shiftX + "px," + shiftY + "px)", | |
"transition": "transform 1.2s ease-out" | |
}) | |
$(this).find('img').css({ | |
"-webkit-transform": "translate(" + shiftXInv + "px," + shiftYInv + "px)", | |
"-ms-transform": "translate(" + shiftXInv + "px," + shiftYInv + "px)", | |
"transform": "translate(" + shiftXInv + "px," + shiftYInv + "px)", | |
"transition": "transform " + borderSpeed + "ms ease-out" | |
}) | |
}) | |
}, function() { | |
$(this).find('.border').css({ | |
"-webkit-transform": "translate(0px,0px)", | |
"-ms-transform": "translate(0px,0px)", | |
"transform": "translate(0px,0px)", | |
"transition": "transform 400ms ease-out" | |
}) | |
$(this).find('img').css({ | |
"-webkit-transform": "translate(0px,0px)", | |
"-ms-transform": "translate(0px,0px)", | |
"transform": "translate(0px,0px)", | |
"transition": "transform 400ms ease-out" | |
}) | |
}) | |
}) | |
$('.border-image-block').click(function() { | |
var uri = $(this).find('.image-overlay').attr('href'); | |
document.location.href = uri; | |
}); | |
}); //document.ready | |
</script> | |
<!--Title--> | |
<div class="title-wrapper" style="display:none"> | |
<div id="home-landing-1" > | |
<div class="title-container" style="transform: matrix(1, 0, 0, 1, 0, 0);"> | |
<div class="block-title intro-title"> | |
<div class="shape shape--1" data-parallax="0.06" data-skew="false" style="transform: matrix(1, 0, 0, 1, 0, 0);"><img src="/s/shape1.png"> | |
</div> | |
<div class="shape shape--2" data-parallax="0.08" data-skew="false" style="transform: matrix(1, 0, 0, 1, 0, 0);"><img src="/s/shape2.png"></div> | |
<div class="shape shape--3" data-parallax="0.07" data-skew="false" style="transform: matrix(1, 0, 0, 1, 0, 0);"><img src="/s/shape3.png"> | |
</div> | |
<div class="trophee" data-parallax="0.05" data-skew="false" style="transform: matrix(1, 0, 0, 1, 0, 0);"> | |
<img class="img-fluid" src="/s/iceburg.png"alt=""> | |
</div> | |
<div class="trophee__content"> | |
<span class="top-left" data-parallax="0.13" style="transform: matrix(1, 0, 0, 1, 0, 0);"> | |
<span>YOUR</span> | |
<span>CREATIVE</span> | |
<span>STUDIO</span> | |
</span> | |
<span class="main-text" data-parallax="0.09" style="transform: matrix(1, 0, 0, 1, 0, 0);">M</span> | |
<span class="main-text" data-parallax="0.1" style="transform: matrix(1, 0, 0, 1, 0, 0);">A</span> | |
<span class="main-text" data-parallax="0.11" style="transform: matrix(1, 0, 0, 1, 0, 0);">G</span> | |
<span class="main-text" data-parallax="0.1" style="transform: matrix(1, 0, 0, 1, 0, 0);">K</span> | |
<span class="bottom-right" data-parallax="0.12" style="transform: matrix(1, 0, 0, 1, 0, 0);"> | |
<span class="bottom-left-row"> | |
<span>2</span> | |
<span>0</span> | |
</span> | |
<span class="bottom-left-row"> | |
<span>1</span> | |
<span>8</span> | |
</span> | |
</span> | |
</div> | |
</div> | |
</div> | |
</div> | |
<div id="home-landing-2"> | |
<div class="title-clone"> | |
</div> | |
</div> | |
</div> | |
<script> | |
$(document).ready(function(){ | |
$('#home-landing-1,#home-landing-2').prependTo('#title'); | |
$('.title-container').clone().appendTo('.title-clone'); | |
$('#home-landing-2 .trophee img').remove(); | |
$('#home-landing-2 .trophee').prepend('<img class="img-fluid" src="/s/iceburg_blue.png">'); | |
$(window).scroll(function(){ | |
var t=(($(window).scrollTop())/3); | |
//console.log(t); | |
$('.title-container').css({'transform':'translate3d(0px,'+t+'px,0px)'}); | |
}); | |
var parallaxElements = $('#home-landing-1 [data-parallax],#home-landing-2 [data-parallax]') | |
$('#home-landing-1,#home-landing-2').mousemove(function(e){ | |
let x = e.pageX, | |
y = e.pageY, | |
w = $(window).outerWidth(), | |
h = $(window).outerHeight(), | |
xFromCenter = x-(w/2), | |
yFromCenter = y-(h/2); | |
parallaxElements.each(function(){ | |
if ($(this).attr('data-skew') != 'false') { | |
var m = $(this).attr('data-parallax'); | |
$(this).css({'transform':'translate(' +xFromCenter*m+ 'px,' +yFromCenter*m+ 'px) skewX(' +(xFromCenter/10)*m+ 'deg) skewY(' +(yFromCenter/10)*m+ 'deg)','transition':'200ms ease-out'}); | |
} else { | |
var m = $(this).attr('data-parallax'); | |
$(this).css({'transform':'translate(' +xFromCenter*m+ 'px,' +yFromCenter*m+ 'px)','transition':'200ms ease-out'}); | |
} | |
}); | |
});//mousemove | |
$('#home-landing-1,#home-landing-2').mouseleave(function(){ | |
parallaxElements.each(function(){ | |
$(this).css({'transform':'translate(0px,0px)','transition':'600ms ease-out'}); | |
}); | |
}); | |
}); | |
</script> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
//======================================================================================================= | |
//Version: 2.0.10 | |
//============================= | |
/* | |
Mobile Break Points: | |
@media screen and (max-width: 1600px) { | |
} | |
@media screen and (max-width: 768px) { | |
} | |
*/ | |
// | |
.menu--dark { | |
color: #000 !important; | |
} | |
.menu--light { | |
color: #fff !important; | |
} | |
::selection { | |
background: #02001e; | |
color: #fff; | |
} | |
.Main-content { | |
padding: 0px 17px !important; | |
} | |
// | |
// | |
// | |
// | |
//======================================================================================================= | |
//Fonts | |
//============================= | |
html { | |
font-size: 62.5%; | |
} | |
h1 { | |
font-family: neuzeit-grotesk,sans-serif; | |
font-size: 4.2rem; | |
line-height: 1; | |
font-weight: 900; | |
text-transform: uppercase; | |
color: #423e7d; | |
} | |
h2 { | |
font-family: neuzeit-grotesk,sans-serif; | |
font-size: 6rem; | |
line-height: 1; | |
font-weight: 900; | |
text-transform: uppercase; | |
color: #423e7d; | |
} | |
h3 { | |
font-family: bebas-neue,sans-serif; | |
font-size: 1.4rem; | |
font-weight: 300; | |
text-transform: uppercase; | |
letter-spacing: .4em; | |
color: #423e7d; | |
} | |
p { | |
font-family: neuzeit-grotesk,sans-serif; | |
font-size: 1.4rem; | |
line-height: 1.6; | |
color: #423e7d; | |
} | |
@media screen and (max-width: 1600px) { | |
h1 { | |
font-size: 8rem; | |
} | |
h2 { | |
font-size: 6rem; | |
} | |
h3 { | |
font-size: 1.1rem; | |
} | |
p { | |
font-size: 1.4rem; | |
} | |
} | |
@media screen and (max-width: 768px) { | |
h1 { | |
font-size: 6rem; | |
} | |
h2 { | |
font-size: 6rem; | |
} | |
h3 { | |
font-size: 1.1rem; | |
} | |
p { | |
font-size: 1.4rem; | |
} | |
} | |
.sqs-block-image .design-layout-stack .image-title p { | |
font-size: 1.8rem !important; | |
font-family: neuzeit-grotesk !important; | |
} | |
.sqs-block-image .design-layout-stack .image-subtitle p { | |
font-size: 1rem !important; | |
color: #000; | |
font-weight: 700; | |
font-family: neuzeit-grotesk !important; | |
} | |
#landing, #project-summary-01, #project-summary-02, #contact-form { | |
min-height: 100vh; | |
} | |
.large-spacer { | |
height: 15vh; | |
} | |
blockquote { | |
font-family: bebas-neue,sans-serif; | |
font-size: 1.4rem; | |
font-weight: 300; | |
text-transform: uppercase; | |
letter-spacing: .4em; | |
line-height: 1.5em; | |
} | |
// | |
// | |
// | |
// | |
//======================================================================================================= | |
//Link Hover | |
//============================= | |
.white > a { | |
position: relative; | |
display: inline-block; | |
color: #fff; | |
text-decoration: none; | |
} | |
.white > a:before, .white > a:after { | |
content: ''; | |
position: absolute; | |
width: 0%; | |
height: 2px; | |
top: 50%; | |
margin-top: -0.5px; | |
background: #ff2c75; | |
} | |
.white > a:before { | |
left: -2.5px; | |
} | |
.white > a:after { | |
right: 2.5px; | |
background: #ff2c75; | |
transition: width 0.8s cubic-bezier(0.22, 0.61, 0.36, 1); | |
} | |
.white > a:hover:before { | |
background: #ff2c75; | |
width: 100%; | |
transition: width 0.5s cubic-bezier(0.22, 0.61, 0.36, 1); | |
} | |
.white > a:hover:after { | |
background: transparent; | |
width: 100%; | |
transition: 0s; | |
} | |
//end | |
.black > a { | |
position: relative; | |
display: inline-block; | |
color: #02001e; | |
text-decoration: none; | |
} | |
.black > a:before, .black > a:after { | |
content: ''; | |
position: absolute; | |
width: 0%; | |
height: 2px; | |
top: 50%; | |
margin-top: -1px; | |
background: #02001e; | |
} | |
.black > a:before { | |
left: -2.5px; | |
} | |
.black > a:after { | |
right: 2.5px; | |
background: #02001e; | |
transition: width 0.8s cubic-bezier(0.22, 0.61, 0.36, 1); | |
} | |
.black > a:hover:before { | |
background: #02001e; | |
width: 100%; | |
transition: width 0.5s cubic-bezier(0.22, 0.61, 0.36, 1); | |
} | |
.black > a:hover:after { | |
background: transparent; | |
width: 100%; | |
transition: 0s; | |
} | |
//end | |
// | |
// | |
// | |
// | |
//======================================================================================================= | |
//NAV ITEMS | |
//============================= | |
.nav { | |
display: block; | |
text-align: center; | |
position: relative; | |
margin: auto; | |
width: 45%; | |
-webkit-transition: -webkit-transform .8s cubic-bezier(.7,0,.3,1); | |
transition: -webkit-transform .8s cubic-bezier(.7,0,.3,1); | |
transition: transform .8s cubic-bezier(.7,0,.3,1); | |
transition: transform .8s cubic-bezier(.7,0,.3,1),-webkit-transform .8s cubic-bezier(.7,0,.3,1); | |
z-index: 10; | |
} | |
.nav .nav__navbar { | |
list-style-type: none; | |
} | |
ul { | |
padding: 0px !important; | |
} | |
.nav .nav__navbar li { | |
display: block; | |
} | |
.nav .nav__navbar li.active a { | |
color: #fff; | |
} | |
.nav .nav__navbar li.active a:before { | |
-webkit-transform: scaleX(1); | |
transform: scaleX(1); | |
} | |
.nav .nav__navbar li.active a .mask { | |
-webkit-transform: translateX(-5px) skewX(12deg); | |
transform: translateX(-5px) skewX(12deg); | |
} | |
.nav .nav__navbar li { | |
margin-top: 25px; | |
} | |
.nav .nav__navbar li a { | |
color: #ff2c75; | |
font-size: 3rem; | |
line-height: 1.2; | |
text-transform: uppercase; | |
font-weight: 900; | |
font-family: neuzeit-grotesk,sans-serif; | |
letter-spacing: .1em; | |
-webkit-transition: color .8s cubic-bezier(.16,1.08,.38,.98); | |
transition: color .8s cubic-bezier(.16,1.08,.38,.98); | |
position: relative; | |
display: block; | |
} | |
.nav .nav__navbar li a:before { | |
content: ''; | |
display: block; | |
position: absolute; | |
background: #ff2c75; | |
top: 50%; | |
left: -10px; | |
right: -10px; | |
height: 5px; | |
margin-top: -3px; | |
border-radius: 3px; | |
-webkit-transform: scale(0); | |
transform: scale(0); | |
-webkit-transition: -webkit-transform .8s cubic-bezier(.16,1.08,.38,.98); | |
transition: -webkit-transform .8s cubic-bezier(.16,1.08,.38,.98); | |
transition: transform .8s cubic-bezier(.16,1.08,.38,.98); | |
transition: transform .8s cubic-bezier(.16,1.08,.38,.98),-webkit-transform .8s cubic-bezier(.16,1.08,.38,.98); | |
z-index: 10; | |
} | |
.nav .nav__navbar li.active a .mask+.mask { | |
-webkit-transform: translateX(20px) skewX(12deg); | |
transform: translateX(20px) skewX(12deg); | |
} | |
.nav .nav__navbar li a .mask+.mask { | |
text-align: center; | |
} | |
.nav .nav__navbar li a .mask { | |
overflow: hidden; | |
position: relative; | |
display: block; | |
text-align: center; | |
white-space: nowrap; | |
height: 28px; | |
-webkit-transition: -webkit-transform .8s cubic-bezier(.16,1.08,.38,.98); | |
transition: -webkit-transform .8s cubic-bezier(.16,1.08,.38,.98); | |
transition: transform .8s cubic-bezier(.16,1.08,.38,.98); | |
transition: transform .8s cubic-bezier(.16,1.08,.38,.98),-webkit-transform .8s cubic-bezier(.16,1.08,.38,.98); | |
} | |
.nav .nav__navbar li a .mask+.mask>span { | |
position: relative; | |
display: block; | |
-webkit-transform: translateY(-50%); | |
transform: translateY(-50%); | |
} | |
//Hover | |
.nav .nav__navbar li a:hover { | |
color: #fff; | |
} | |
.nav .nav__navbar li a:hover:before { | |
-webkit-transform: scale(1); | |
transform: scale(1); | |
} | |
.nav .nav__navbar li a:hover .mask { | |
-webkit-transform: translateX(-5px) skewX(12deg); | |
transform: translateX(-5px) skewX(12deg); | |
} | |
.nav .nav__navbar li a:hover .mask+.mask { | |
-webkit-transform: translateX(20px) skewX(12deg); | |
transform: translateX(20px) skewX(12deg); | |
} | |
// | |
// | |
// | |
// | |
//======================================================================================================= | |
//SPAN HOVER | |
//============================= | |
a, | |
button { | |
text-decoration: none; | |
outline: 0; | |
} | |
.link--container { | |
position: absolute; | |
top: 50%; | |
left: 50%; | |
transform: translate(-50%, -50%); | |
} | |
.multiline--link { | |
display: inline-block; | |
text-align: center; | |
color: #ff2c75; | |
position: relative; | |
font-size: 1.8rem; | |
font-family: bebas-neue, sans-serif; | |
letter-spacing: .4em; | |
padding-bottom: 6px; | |
} | |
.multiline--link>span { | |
display: block; | |
position: relative; | |
-webkit-transition: -webkit-transform .4s cubic-bezier(.7, 0, .3, 1); | |
transition: -webkit-transform .4s cubic-bezier(.7, 0, .3, 1); | |
transition: transform .4s cubic-bezier(.7, 0, .3, 1); | |
transition: transform .4s cubic-bezier(.7, 0, .3, 1), -webkit-transform .4s cubic-bezier(.7, 0, .3, 1); | |
z-index: 1; | |
} | |
.multiline--link>span+span { | |
margin-top: 6px; | |
} | |
.multiline--link>span:after { | |
content: ''; | |
display: block; | |
position: absolute; | |
height: 2px; | |
background: #ff2c75; | |
top: 50%; | |
margin-top: -1px; | |
left: 0; | |
right: 8px; | |
-webkit-transform: scaleX(0); | |
transform: scaleX(0); | |
-webkit-transform-origin: center right; | |
transform-origin: center right; | |
-webkit-transition: -webkit-transform .4s cubic-bezier(.7, 0, .3, 1); | |
transition: -webkit-transform .4s cubic-bezier(.7, 0, .3, 1); | |
transition: transform .4s cubic-bezier(.7, 0, .3, 1); | |
transition: transform .4s cubic-bezier(.7, 0, .3, 1), -webkit-transform .4s cubic-bezier(.7, 0, .3, 1); | |
} | |
.multiline--link>span:nth-child(1):after { | |
-webkit-transition-delay: 50ms; | |
transition-delay: 50ms; | |
} | |
.multiline--link>span:nth-child(2):after { | |
-webkit-transition-delay: .1s; | |
transition-delay: .1s; | |
} | |
.multiline--link>span:nth-child(3):after { | |
-webkit-transition-delay: .15s; | |
transition-delay: .15s; | |
} | |
.multiline--link:hover span:nth-child(2n+1) { | |
-webkit-transform: translateX(-10px); | |
transform: translateX(-10px); | |
} | |
.multiline--link:hover span { | |
-webkit-transform: translateX(10px); | |
transform: translateX(10px); | |
} | |
.multiline--link:hover span:after { | |
-webkit-transform: scaleX(1); | |
transform: scaleX(1); | |
-webkit-transform-origin: center left; | |
transform-origin: center left; | |
} | |
// | |
// | |
// | |
// | |
//======================================================================================================= | |
//NAV | |
//============================= | |
.logo-container { | |
position: fixed; | |
top: 45px; | |
left: 45px; | |
z-index: 999999; | |
font-weight: 700; | |
font-size: 0.75em; | |
color: #fff; | |
transform: translateX(0%) translateY(-50%) translateZ(1100px);; | |
transition: 400ms ease-in-out; | |
@media (max-width: 766px) { | |
top: 7%; | |
left: 5%; | |
} | |
} | |
.logo-container:hover { | |
color: #ff2c75; | |
} | |
.logo-container.open { | |
top: 5%; | |
left: 5%; | |
@media (max-width: 766px) { | |
top: 7%; | |
} | |
} | |
.navbar-toggle { | |
position: fixed; | |
left: 50px; | |
top: 50%; | |
width: 100px; | |
height: 140px; | |
z-index: 99999; | |
transform: translateX(-50%) translateY(-50%) translateZ(1200px); | |
@media (max-width: 766px) { | |
background: #02001e; | |
height: 50px; | |
width: 50px; | |
border-radius: 50px; | |
top: 7%; | |
left: 85%; | |
} | |
} | |
.icon { | |
width: 20px; | |
height: 12px; | |
position: relative; | |
top: 50%; | |
left: 45%; | |
-webkit-transform: rotate(0deg); | |
-moz-transform: rotate(0deg); | |
-o-transform: rotate(0deg); | |
transform: translateX(-50%) translateY(-50%) translateZ(1200px); | |
-webkit-transition: .5s ease-in-out; | |
-moz-transition: .5s ease-in-out; | |
-o-transition: .5s ease-in-out; | |
transition: .5s ease-in-out; | |
cursor: pointer; | |
} | |
.icon span { | |
display: block; | |
position: absolute; | |
height: 2px; | |
background: #ff2c75; | |
opacity: 1; | |
right: 0; | |
-webkit-transform: rotate(0deg); | |
-moz-transform: rotate(0deg); | |
-o-transform: rotate(0deg); | |
transform: rotate(0deg); | |
-webkit-transition: .25s ease-in-out; | |
-moz-transition: .25s ease-in-out; | |
-o-transition: .25s ease-in-out; | |
transition: .25s ease-in-out; | |
} | |
.icon span:nth-child(1) { | |
top: 0px; | |
width: 80%; | |
} | |
.icon span:nth-child(2) { | |
top: 6px; | |
width: 100%; | |
} | |
.icon span:nth-child(3) { | |
top: 12px; | |
width: 60%; | |
} | |
.icon.open span:nth-child(1) { | |
top: 6px; | |
width: 20px; | |
-webkit-transform: rotate(135deg); | |
-moz-transform: rotate(135deg); | |
-o-transform: rotate(135deg); | |
transform: rotate(135deg); | |
} | |
.icon.open span:nth-child(2) { | |
opacity: 0; | |
left: -60px; | |
width: 20px; | |
} | |
.icon.open span:nth-child(3) { | |
top: 6px; | |
width: 20px; | |
-webkit-transform: rotate(-135deg); | |
-moz-transform: rotate(-135deg); | |
-o-transform: rotate(-135deg); | |
transform: rotate(-135deg); | |
} | |
.navbar-toggle .txt { | |
position: absolute; | |
width: 140px; | |
height: 20px; | |
top: 50%; | |
left: 80%; | |
color: #ff2c75; | |
text-align: center; | |
font-size: 0.7rem; | |
text-transform: uppercase; | |
font-family: bebas-neue,sans-serif; | |
font-weight: 900; | |
letter-spacing: 0.2em; | |
transform: translate(-50%, -50%) rotate(-90deg); | |
transition: 400ms ease; | |
@media (max-width: 766px) { | |
display: none; | |
} | |
} | |
.navbar-toggle:hover .icon { | |
left: calc(45% - 7.5px); | |
width: 35px; | |
@media (max-width: 766px) { | |
left: 45% !important; | |
width: 20px; | |
} | |
} | |
.navbar-toggle .txt span { | |
display: inline-block; | |
-webkit-transition: -webkit-transform 400ms cubic-bezier(0.7, 0, 0.3, 1) 0ms; | |
-moz-transition: -moz-transform 400ms cubic-bezier(0.7, 0, 0.3, 1) 0ms; | |
transition: transform 400ms cubic-bezier(0.7, 0, 0.3, 1) 0ms; | |
} | |
.navbar-toggle:hover .txt span:nth-child(1) { | |
transform: translateY(-5px) !important; | |
} | |
.navbar-toggle:hover .txt span:nth-child(2) { | |
transform: translateY(5px) !important; | |
} | |
.navbar-toggle:hover .txt span:nth-child(3) { | |
transform: translateY(-2px) !important; | |
} | |
.navbar-toggle:hover .txt span:nth-child(4) { | |
transform: translateY(3px) !important; | |
} | |
.txt.open { | |
display: none; | |
} | |
.navbar-container { | |
position: fixed; | |
top: 0%; | |
left: -100%; | |
width: 100%; | |
height: 100vh; | |
background: #02001e; | |
z-index: 9999; | |
transition: 400ms ease-in-out; | |
transform: translateZ(1000px); | |
@media (max-width: 766px) { | |
left: -100%; | |
width: 100%; | |
} | |
} | |
.navbar-container.open { | |
left: 0%; | |
} | |
.navbar-overlay { | |
position: fixed; | |
top: 0%; | |
left: 0%; | |
width: 0px; | |
height: 100vh; | |
background: #02001e; | |
z-index: 9999; | |
transition: 400ms ease-in-out; | |
@media (max-width: 766px) { | |
display: none; | |
} | |
} | |
.navbar-toggle:hover~.navbar-overlay { | |
width: 140px; | |
} | |
.navbar-items { | |
position: absolute; | |
top: 50%; | |
left: 50%; | |
width: 40%; | |
color: #fff; | |
transform: translate(-50%, -50%); | |
text-align: center; | |
@media (max-width: 766px) { | |
top: 45%; | |
width: 80%; | |
} | |
} | |
.navbar-contact { | |
} | |
.navbar-contact a { | |
padding-top: 35px; | |
font-family: bebas-neue,sans-serif; | |
text-transform: uppercase; | |
font-size: 1rem; | |
letter-spacing: 0.4em; | |
line-height: 1.4em !important; | |
} | |
//SOCIAL ACCOUNTS | |
.social-accounts { | |
position: fixed; | |
top: 50%; | |
right: 25px; | |
width: 16px; | |
height: 42px; | |
z-index: 99999; | |
transform: translate(-50%,-50%); | |
@media (max-width: 766px) { | |
display: none; | |
} | |
} | |
.facebook { | |
float: left; | |
height: 26px; | |
width: 26px; | |
margin-bottom: 5px; | |
background-size: contain; | |
fill: #fff; | |
transition: 200ms ease-in-out; | |
} | |
.facebook:hover { | |
fill: #ff2c75; | |
} | |
.twitter { | |
float: left; | |
height: 26px; | |
width: 26px; | |
background-size: contain; | |
fill: #fff; | |
transition: 200ms ease-in-out; | |
} | |
.twitter:hover { | |
fill: #ff2c75; | |
} | |
.Index-page-scroll-indicator { | |
position: fixed; | |
bottom: 1.5%; | |
left: 72px; | |
z-index: 999; | |
overflow: visible; | |
@media (max-width: 766px) { | |
display: none !important; | |
} | |
} | |
.Index-page-scroll-indicator-text { | |
width: 100px; | |
text-align: center; | |
font-size: 0.6rem; | |
text-transform: uppercase; | |
font-family: bebas-neue,sans-serif; | |
//font-family: "Montserrat", sans-serif; | |
font-weight: 900; | |
letter-spacing: 0.6em; | |
transform: rotate(-90deg) !important; | |
margin-bottom: 50px; | |
} | |
//============================= | |
//NAVBAR END | |
//============================= | |
// | |
// | |
// | |
// | |
//======================================================================================================= | |
//BLOG | |
//============================= | |
section.blog-txt { | |
display: block; | |
overflow: auto; | |
width: 100%; | |
} | |
.blog-txt-item { | |
width: 100%; | |
max-width: 700px; | |
margin: auto; | |
padding-top: 5%; | |
padding-bottom: 5%; | |
} | |
.blog-txt-item h3 { | |
font-family: bebas-neue,sans-serif; | |
font-size: 1.4rem; | |
font-weight: 300; | |
text-transform: uppercase; | |
letter-spacing: .4em; | |
color: #fff; | |
} | |
.blog-txt-item h3 strong { | |
display: block; | |
font-family: neuzeit-grotesk,sans-serif; | |
font-size: 2.5rem; | |
line-height: 1; | |
font-weight: 900; | |
letter-spacing: 0em; | |
text-transform: uppercase; | |
color: #ff2c75; | |
} | |
.blog-txt-item p { | |
font-family: neuzeit-grotesk,sans-serif; | |
font-weight: 400; | |
font-style: normal; | |
font-size: 1.1rem; | |
line-height: 1.6em; | |
} | |
.blog-txt-item li { | |
font-family: neuzeit-grotesk,sans-serif; | |
font-weight: 400; | |
font-style: normal; | |
font-size: 1.1rem; | |
line-height: 1.6em; | |
color: #423e7d; | |
margin-left: 25px; | |
} | |
.BlogItem-title { | |
font-family: "neuzeit-grotesk" !important; | |
font-weight: 700; | |
font-style: normal; | |
font-size: 2.4rem; | |
line-height: 1em; | |
text-transform: none; | |
letter-spacing: 0em; | |
margin-top: 3% !important; | |
} | |
.BlogList-item-title { | |
font-family: "neuzeit-grotesk" !important; | |
font-weight: 700; | |
font-style: normal; | |
font-size: 1.4rem; | |
line-height: 1em; | |
text-transform: none; | |
letter-spacing: 0em; | |
} | |
.BlogList-item { | |
max-width: 450px; | |
margin: auto; | |
} | |
.sqs-dynamic-text p { | |
font-family: "neuzeit-grotesk" !important; | |
font-weight: 700; | |
font-style: normal; | |
font-size: 1.4rem !important; | |
line-height: 1em; | |
text-transform: none; | |
letter-spacing: 0em; | |
} | |
.image-subtitle p { | |
font-family: "DomainDisplay" !important; | |
font-weight: 300; | |
font-style: normal; | |
font-size: 0.95rem !important; | |
line-height: 1em; | |
text-transform: none; | |
letter-spacing: 0em; | |
} | |
.Main--blog-item { | |
background: #17143f !important; | |
} | |
.BlogItem-title { | |
display: none !important; | |
} | |
.Blog-meta-item--date { | |
display: none !important; | |
} | |
.BlogItem-share { | |
display: none !important; | |
} | |
//============================= | |
//BLOG END | |
//============================= | |
// | |
// | |
// | |
// | |
//======================================================================================================= | |
//HOMEPAGE | |
//============================= | |
//CSS | |
.intro__container { | |
position: fixed; | |
top: 0%; | |
left: 0%; | |
width: 100%; | |
height: 100vh; | |
overflow: hidden; | |
background: #f3f5f4; | |
} | |
section.intro__step.step__01, | |
section.intro__step.step__02, | |
section.intro__step.step__03 { | |
position: absolute; | |
top: 0%; | |
left: 0%; | |
width: 100%; | |
height: 100vh; | |
transform: translateZ(42px); | |
} | |
section.intro__step.step__01 { | |
z-index: 1; | |
} | |
section.intro__step.step__02 { | |
z-index: 2; | |
} | |
section.intro__step.step__03 { | |
z-index: 3; | |
} | |
//STEP 01 | |
.intro__step__txt.step__txt__01 { | |
position: absolute; | |
display: inline-block; | |
top: 150%; | |
left: 35%; | |
transform: translate(-50%, -50%); | |
} | |
.intro__step__txt.step__txt__01 span { | |
display: block; | |
font-family: neuzeit-grotesk, sans-serif; | |
font-size: 4.2rem; | |
font-style: italic; | |
line-height: 1; | |
font-weight: 900; | |
letter-spacing: 0em; | |
text-transform: uppercase; | |
text-align: left; | |
color: #ff2c75; | |
} | |
.intro__step__txt.step__txt__01 span+span { | |
display: block; | |
font-family: neuzeit-grotesk, sans-serif; | |
font-size: 4.2rem; | |
font-style: italic; | |
line-height: 1; | |
font-weight: 900; | |
letter-spacing: 0em; | |
text-transform: uppercase; | |
text-align: left; | |
color: #423e7d; | |
} | |
//STEP 02 | |
.intro__step__txt.step__txt__02 { | |
position: absolute; | |
display: inline-block; | |
top: 150%; | |
left: 65%; | |
transform: translate(-50%, -50%); | |
} | |
.intro__step__txt.step__txt__02 span { | |
display: block; | |
font-family: neuzeit-grotesk, sans-serif; | |
font-size: 4.2rem; | |
font-style: italic; | |
line-height: 1; | |
font-weight: 900; | |
letter-spacing: 0em; | |
text-transform: uppercase; | |
text-align: right; | |
color: #ff2c75; | |
} | |
.intro__step__txt.step__txt__02 span+span { | |
display: block; | |
font-family: neuzeit-grotesk, sans-serif; | |
font-size: 4.2rem; | |
font-style: italic; | |
line-height: 1; | |
font-weight: 900; | |
letter-spacing: 0em; | |
text-transform: uppercase; | |
text-align: right; | |
color: #423e7d; | |
} | |
//STEP 03 | |
.intro__step__txt.step__txt__03 { | |
position: absolute; | |
display: inline-block; | |
top: 150%; | |
left: 50%; | |
transform: translate(-50%, -50%) rotateX(10deg); | |
} | |
.intro__step__txt.step__txt__03 span { | |
display: block; | |
font-family: neuzeit-grotesk, sans-serif; | |
font-size: 4.2rem; | |
font-style: italic; | |
line-height: 1; | |
font-weight: 900; | |
letter-spacing: 0em; | |
text-transform: uppercase; | |
text-align: center; | |
color: #ff2c75; | |
} | |
.intro__step__txt.step__txt__03 span+span { | |
display: block; | |
font-family: neuzeit-grotesk, sans-serif; | |
font-size: 4.2rem; | |
font-style: italic; | |
line-height: 1; | |
font-weight: 900; | |
letter-spacing: 0em; | |
text-transform: uppercase; | |
text-align: center; | |
color: #423e7d; | |
} | |
//BACKGROUND | |
.intro__background { | |
position: fixed; | |
top: 0%; | |
left: 0%; | |
width: 100%; | |
height: 100vh; | |
pointer-events: none; | |
transform-style: preserve-3d; | |
transform-origin: 50% 50% -1px; | |
pointer-events: none; | |
perspective: 400px; | |
} | |
.intro__background__txt { | |
position: absolute; | |
top: 50%; | |
left: 50%; | |
width: 500%; | |
font-family: neuzeit-grotesk, sans-serif; | |
font-size: 30rem; | |
font-weight: 900; | |
text-align: center; | |
color: #000; | |
opacity: 0.025; | |
transform: translateX(-50%) translateY(-50%) translateZ(20px) rotateX(10deg); | |
transition: 2s ease-in-out; | |
} | |
// | |
// | |
// | |
// | |
// | |
#work-intro, #project-summary-section-01, #project-summary-section-02 { | |
background-color: #1f1b57; | |
} | |
// | |
// | |
// | |
// | |
// | |
.hero__title__top { | |
position: relative; | |
height: 50vh; | |
padding-top: 100vh; | |
overflow: hidden; | |
-webkit-transition: -webkit-transform 1.8s cubic-bezier(.7, 0, .3, 1); | |
transition: -webkit-transform 1.8s cubic-bezier(.7, 0, .3, 1); | |
transition: transform 1.8s cubic-bezier(.7, 0, .3, 1); | |
transition: transform 1.8s cubic-bezier(.7, 0, .3, 1), -webkit-transform 1.8s cubic-bezier(.7, 0, .3, 1); | |
} | |
.hero__title__bottom { | |
position: relative; | |
background: #1f1b57; | |
overflow: hidden; | |
text-align: center; | |
padding-top: 45vh; | |
padding-bottom: 30vh; | |
-webkit-transition: -webkit-transform 1.8s cubic-bezier(.7, 0, .3, 1); | |
transition: -webkit-transform 1.8s cubic-bezier(.7, 0, .3, 1); | |
transition: transform 1.8s cubic-bezier(.7, 0, .3, 1); | |
transition: transform 1.8s cubic-bezier(.7, 0, .3, 1), -webkit-transform 1.8s cubic-bezier(.7, 0, .3, 1); | |
} | |
//Title Container | |
.title__container { | |
display: -webkit-box; | |
display: -ms-flexbox; | |
display: flex; | |
-webkit-box-align: center; | |
-ms-flex-align: center; | |
align-items: center; | |
-webkit-box-pack: center; | |
-ms-flex-pack: center; | |
justify-content: center; | |
height: 100vh; | |
transform-style: preserve-3d; | |
transform-origin: 50% 50% 0px; | |
perspective: 200px; | |
pointer-events: none; | |
} | |
//HERO TITLE | |
.hero__title { | |
position: relative; | |
max-width: 350px; | |
min-width: 180px; | |
margin: 0 auto; | |
transform: translateZ(22px); | |
} | |
//Subtitle | |
.hero__title .subtitle { | |
top: 50px; | |
left: 40px; | |
font-size: 2rem; | |
position: absolute; | |
font-size: 1.4rem; | |
line-height: 1.2; | |
letter-spacing: .4em; | |
font-family: bebas-neue,sans-serif; | |
font-weight: 300; | |
text-transform: uppercase; | |
color: #423e7d; | |
} | |
.hero__title .subtitle>* { | |
display: block; | |
} | |
//Main Title | |
.hero__title .main>:first-child { | |
margin-left: 50%; | |
} | |
.hero__title .main>* { | |
max-width: 50%; | |
min-width: 50%; | |
} | |
.hero__title .main { | |
font-family: gilroy, sans-serif; | |
display: -webkit-box; | |
display: -ms-flexbox; | |
display: flex; | |
-ms-flex-wrap: wrap; | |
flex-wrap: wrap; | |
white-space: nowrap; | |
font-size: 10rem; | |
line-height: 1; | |
text-align: center; | |
font-weight: 900; | |
font-family: neuzeit-grotesk,sans-serif; | |
text-transform: uppercase; | |
color: #423e7d; | |
} | |
//Year | |
.hero__title .year { | |
position: absolute; | |
bottom: 50px; | |
right: 80px; | |
font-size: 2rem; | |
line-height: 1.2; | |
display: -webkit-box; | |
display: -ms-flexbox; | |
display: flex; | |
-ms-flex-wrap: wrap; | |
flex-wrap: wrap; | |
font-family: bebas-neue,sans-serif; | |
font-weight: 300; | |
text-transform: uppercase; | |
color: #423e7d; | |
} | |
.hero__title .year>* { | |
display: block; | |
min-width: 50%; | |
text-align: center; | |
} | |
//Title Duplicate | |
.title__duplicate { | |
position: absolute; | |
left: 0; | |
top: 0; | |
width: 100%; | |
color: #fff; | |
-webkit-transform: translateY(-50%); | |
transform: translateY(-50%); | |
} | |
.title__duplicate .hero__title .main { | |
color: #ff2c75; | |
} | |
.title__duplicate .hero__title .year { | |
color: #fff; | |
} | |
//Hero Title IMG | |
.hero__title__images { | |
position: absolute; | |
top: 0%; | |
left: 0%; | |
width: 100%; | |
height: 100vh; | |
} | |
//Home Pages | |
#homespacer { | |
height: 100vh; | |
} | |
// | |
// | |
// | |
//LARGE TITLE | |
.hero__title__top__flip { | |
position: relative; | |
height: 50vh; | |
background: #1f1b57; | |
overflow: hidden; | |
-webkit-transition: -webkit-transform 1.8s cubic-bezier(.7, 0, .3, 1); | |
transition: -webkit-transform 1.8s cubic-bezier(.7, 0, .3, 1); | |
transition: transform 1.8s cubic-bezier(.7, 0, .3, 1); | |
transition: transform 1.8s cubic-bezier(.7, 0, .3, 1), -webkit-transform 1.8s cubic-bezier(.7, 0, .3, 1); | |
} | |
.hero__title__bottom__flip { | |
position: relative; | |
overflow: hidden; | |
text-align: center; | |
padding-top: 45vh; | |
padding-bottom: 30vh; | |
-webkit-transition: -webkit-transform 1.8s cubic-bezier(.7, 0, .3, 1); | |
transition: -webkit-transform 1.8s cubic-bezier(.7, 0, .3, 1); | |
transition: transform 1.8s cubic-bezier(.7, 0, .3, 1); | |
transition: transform 1.8s cubic-bezier(.7, 0, .3, 1), -webkit-transform 1.8s cubic-bezier(.7, 0, .3, 1); | |
} | |
.hero__title .hero__content { | |
position: absolute; | |
top: 50%; | |
left: 50%; | |
-webkit-transform: translate(-50%, -50%); | |
transform: translate(-50%, -50%); | |
font-family: bebas-neue, sans-serif; | |
color: #423e7d; | |
pointer-events: none; | |
} | |
.hero__title .top__subtitle { | |
font-size: 1.2rem; | |
white-space: nowrap; | |
letter-spacing: 1em; | |
font-family: bebas-neue, sans-serif; | |
text-align: center; | |
display: block; | |
margin-bottom: 20px; | |
} | |
.hero__title .long__title { | |
font-family: gilroy, sans-serif; | |
display: -webkit-box; | |
display: -ms-flexbox; | |
display: flex; | |
-ms-flex-wrap: wrap; | |
flex-wrap: wrap; | |
font-weight: 900; | |
white-space: nowrap; | |
font-size: 10rem; | |
line-height: 1; | |
text-align: center; | |
} | |
.hero__title .long__title>* { | |
max-width: 33.333%; | |
min-width: 33.333%; | |
} | |
.hero__title .long__title>:nth-child(2) { | |
margin-right: 33.333%; | |
} | |
.hero__title .long__title>:nth-child(3) { | |
margin-left: 33.333%; | |
} | |
// | |
// | |
// | |
// | |
//======================================================================================================= | |
//PROJECTS | |
//============================= | |
//Image hover effect | |
.border-image-block { | |
cursor:pointer; | |
margin-bottom:1em; | |
.border { | |
content: ""; | |
display: block; | |
position: absolute; | |
left: 0; | |
right:0; | |
margin:auto; | |
top: -4%; | |
width: 86%; | |
height: 100%; | |
border: 3px solid blue; | |
box-sizing: border-box; | |
z-index: 1; | |
transition: transform 1.5s ease-out; | |
} | |
.image-card-wrapper { | |
position:relative; | |
padding-left:3em; | |
&:before,&:after { | |
content: ""; | |
width: 1px; | |
position: absolute; | |
left: 0; | |
top: 0; | |
display: block; | |
height: 100%; | |
} | |
&:before { | |
background: #423e7d; | |
} | |
&:after { | |
background: #fff; | |
transform: scale3d(0,0,1) translateZ(0); | |
transition: transform .51s ease; | |
transform-origin: top center; | |
} | |
} | |
} | |
.border-image-block:hover .image-card-wrapper:after { | |
transform: scaleX(1) translateZ(0); | |
} | |
.border-image-code-block { | |
display:none; | |
} | |
.sqs-block-image .design-layout-stack .image-card-wrapper { | |
margin-top: 12.5% !important; | |
} | |
.sqs-block-image .design-layout-stack .image-title p { | |
font-family: bebas-neue,sans-serif !important; | |
font-size: 0.9rem !important; | |
text-transform: uppercase; | |
letter-spacing: 0.4em; | |
color: #fff; | |
text-align: center !important; | |
} | |
.sqs-block-image .design-layout-stack .image-subtitle p { | |
font-family: neuzeit-grotesk,sans-serif !important; | |
font-weight: 700; | |
font-size: 1.75rem !important; | |
text-transform: uppercase; | |
line-height: 1.35; | |
color: #ff2c75; | |
text-align: center; | |
} | |
.sqs-gallery-block-stacked .image-wrapper { | |
margin: 0% !important; | |
} | |
// | |
// | |
// | |
// | |
//======================================================================================================= | |
//INTRO | |
//============================= | |
#work-intro { | |
height: 100vh; | |
} | |
.intro { | |
display: block; | |
width: 50%; | |
margin: auto; | |
overflow: auto; | |
padding-top: 10%; | |
padding-bottom: 10%; | |
} | |
.introlight h3 { | |
color: #02001e; | |
text-align: center; | |
} | |
.introlight h1 { | |
color: #1f1b57; | |
font-size: 5rem; | |
text-align: center; | |
} | |
.introlight p { | |
width: 40%; | |
margin: auto; | |
} | |
.introdark h3 { | |
color: #fff; | |
text-align: center; | |
} | |
.introdark h1 { | |
color: #ff2c75; | |
font-size: 5rem; | |
text-align: center; | |
} | |
.introdark p { | |
width: 50%; | |
margin: auto; | |
} | |
//Values | |
section.company__summary { | |
width: 80%; | |
overflow: auto; | |
margin: auto; | |
padding-top: 10%; | |
padding-bottom: 5%; | |
} | |
.company__value { | |
width: 41%; | |
margin: 10%; | |
text-align: center; | |
} | |
.company__value span { | |
display: block; | |
font-family: neuzeit-grotesk,sans-serif; | |
font-size: 2.2rem; | |
line-height: 1; | |
font-weight: 900; | |
text-transform: uppercase; | |
color: #ff2c75; | |
font-style: italic; | |
} | |
.company__value span+span { | |
display: block; | |
font-family: neuzeit-grotesk,sans-serif; | |
font-size: 2.2rem; | |
line-height: 1; | |
font-weight: 900; | |
text-transform: uppercase; | |
color: #423e7d; | |
font-style: italic; | |
} | |
.value__01, | |
.value__03 { | |
float: left; | |
} | |
.value__02 { | |
float: right; | |
} | |
.values__learn__more { | |
display: block; | |
width: 50%; | |
margin: auto; | |
text-align: center; | |
padding: 10% 0%; | |
} | |
// | |
// | |
// | |
// | |
//======================================================================================================= | |
//SERVICES | |
//============================= | |
section.services { | |
top: 0%; | |
left: 0%; | |
width: 100%; | |
height: 100%; | |
background: #17143f; | |
} | |
section.services .container { | |
height: 100vh; | |
width: 100% !important; | |
max-width: 100% !important; | |
margin-left: auto; | |
margin-right: auto; | |
position: relative; | |
background: #17143f; | |
} | |
section.services .container .service__item { | |
float: left; | |
width: 33%; | |
height: 100vh; | |
text-align: center; | |
background: pink; | |
-webkit-transition: opacity 1.2s cubic-bezier(.16, 1.08, .38, .98) 0s, -webkit-transform 1.2s cubic-bezier(.16, 1.08, .38, .98); | |
transition: opacity 1.2s cubic-bezier(.16, 1.08, .38, .98) 0s, -webkit-transform 1.2s cubic-bezier(.16, 1.08, .38, .98); | |
transition: transform 1.2s cubic-bezier(.16, 1.08, .38, .98), opacity 1.2s cubic-bezier(.16, 1.08, .38, .98) 0s; | |
transition: transform 1.2s cubic-bezier(.16, 1.08, .38, .98), opacity 1.2s cubic-bezier(.16, 1.08, .38, .98) 0s, -webkit-transform 1.2s cubic-bezier(.16, 1.08, .38, .98); | |
} | |
section.services .container .service__item:hover { | |
-webkit-transform: scale(.9) rotateX(5deg) skewY(-5deg) !important; | |
transform: scale(.9) rotateX(5deg) skewY(-5deg) !important; | |
} | |
section.services .container .service__item.serv__01 { | |
background: #1f1b57; | |
} | |
section.services .container .service__item.serv__02 { | |
background: #1f1b57; | |
} | |
section.services .container .service__item.serv__03 { | |
background: #1f1b57; | |
} | |
section.services .container .service__item .service__item__link { | |
position: relative; | |
top: 50%; | |
left: 50%; | |
transform: translate(-50%,-50%); | |
-webkit-transition: opacity 1.2s cubic-bezier(.16, 1.08, .38, .98), -webkit-transform 1.2s cubic-bezier(.16, 1.08, .38, .98); | |
transition: opacity 1.2s cubic-bezier(.16, 1.08, .38, .98), -webkit-transform 1.2s cubic-bezier(.16, 1.08, .38, .98); | |
transition: transform 1.2s cubic-bezier(.16, 1.08, .38, .98), opacity 1.2s cubic-bezier(.16, 1.08, .38, .98); | |
transition: transform 1.2s cubic-bezier(.16, 1.08, .38, .98), opacity 1.2s cubic-bezier(.16, 1.08, .38, .98), -webkit-transform 1.2s cubic-bezier(.16, 1.08, .38, .98); | |
} | |
section.services .container .service__item .service__item__link h2 { | |
color: #fff !important; | |
} | |
section.services .container .service__item:hover .service__item__link { | |
-webkit-transform: translateX(-50%) translateY(-50%) scale(1.15) rotateX(-5deg) skewY(5deg) !important; | |
transform: translateX(-50%) translateY(-50%) scale(1.15) rotateX(-5deg) skewY(5deg) !important; | |
} | |
// | |
// | |
// | |
// | |
//======================================================================================================= | |
//SERVICE FOOTER | |
//============================= | |
#service-cta { | |
min-height: 40vh !important; | |
padding-bottom: 0px !important; | |
} | |
.sqs-block-code { | |
padding: 0px !important; | |
} | |
.services-cta { | |
position: relative; | |
display: block; | |
top: 0%; | |
left: 0%; | |
width: 100%; | |
overflow: auto; | |
background: #02001e; | |
} | |
.service--container { | |
float: left; | |
height: 40vh; | |
display: block; | |
width: 33.333334%; | |
background: #02001e; | |
@media only screen and (max-width: 1600px) { | |
width: 100%; | |
height: 25vh; | |
} | |
} | |
.service--txt { | |
position: relative; | |
display: block; | |
width: 45%; | |
top: 50%; | |
left: 50%; | |
text-align: center; | |
transform: translate(-50%,-50%); | |
} | |
.service--txt span { | |
display: block; | |
color: #fff; | |
font-family: bebas-neue,sans-serif; | |
font-size: 0.95rem; | |
letter-spacing: 0.4em; | |
-webkit-transition: -webkit-transform .4s cubic-bezier(.7, 0, .3, 1); | |
transition: -webkit-transform .4s cubic-bezier(.7, 0, .3, 1); | |
transition: transform .4s cubic-bezier(.7, 0, .3, 1); | |
transition: transform .4s cubic-bezier(.7, 0, .3, 1), -webkit-transform .4s cubic-bezier(.7, 0, .3, 1); | |
} | |
.service--txt span+span { | |
display: block; | |
color: #ff2c75; | |
font-family: neuzeit-grotesk,sans-serif; | |
text-transform: uppercase; | |
font-weight: 900; | |
font-size: 2.5rem; | |
letter-spacing: 0em; | |
-webkit-transition: -webkit-transform .4s cubic-bezier(.7, 0, .3, 1); | |
transition: -webkit-transform .4s cubic-bezier(.7, 0, .3, 1); | |
transition: transform .4s cubic-bezier(.7, 0, .3, 1); | |
transition: transform .4s cubic-bezier(.7, 0, .3, 1), -webkit-transform .4s cubic-bezier(.7, 0, .3, 1); | |
} | |
//Hover | |
.service--txt span:after { | |
content: ''; | |
display: block; | |
position: absolute; | |
height: 2px; | |
background: #ff2c75; | |
top: 50%; | |
margin-top: -1px; | |
left: 0; | |
right: 8px; | |
-webkit-transform: scaleX(0); | |
transform: scaleX(0); | |
-webkit-transform-origin: center right; | |
transform-origin: center right; | |
-webkit-transition: -webkit-transform .4s cubic-bezier(.7, 0, .3, 1); | |
transition: -webkit-transform .4s cubic-bezier(.7, 0, .3, 1); | |
transition: transform .4s cubic-bezier(.7, 0, .3, 1); | |
transition: transform .4s cubic-bezier(.7, 0, .3, 1), -webkit-transform .4s cubic-bezier(.7, 0, .3, 1); | |
} | |
.service--txt>span:nth-child(1):after { | |
-webkit-transition-delay: 50ms; | |
transition-delay: 50ms; | |
} | |
.service--txt>span:nth-child(2):after { | |
-webkit-transition-delay: .1s; | |
transition-delay: .1s; | |
} | |
.service--txt:hover span:nth-child(2n+1) { | |
-webkit-transform: translateX(-10px); | |
transform: translateX(-10px); | |
} | |
.service--txt:hover span { | |
-webkit-transform: translateX(10px); | |
transform: translateX(10px); | |
} | |
.service--txt:hover span:after { | |
-webkit-transform: scaleX(1); | |
transform: scaleX(1); | |
-webkit-transform-origin: center left; | |
transform-origin: center left; | |
} | |
// | |
// | |
// | |
// | |
//======================================================================================================= | |
//FOOTER | |
//============================= | |
.footer { | |
width: 60%; | |
margin: auto; | |
} | |
.footer__left { | |
float: left; | |
width: 25%; | |
text-align: left; | |
font-family: bebas-neue,sans-serif; | |
font-size: 0.7rem; | |
font-weight: 300; | |
text-transform: uppercase; | |
letter-spacing: .4em; | |
color: rgba(255, 255, 255, 0.5); | |
transition: 2s ease-in-out; | |
} | |
.footer__middle { | |
float: left; | |
width: 50%; | |
text-align: center; | |
font-family: bebas-neue,sans-serif; | |
font-size: 0.95rem; | |
font-weight: 300; | |
text-transform: uppercase; | |
letter-spacing: .4em; | |
color: #fff; | |
} | |
.footer__right { | |
float: left; | |
width: 25%; | |
text-align: right; | |
font-family: bebas-neue,sans-serif; | |
font-size: 0.7rem; | |
font-weight: 300; | |
text-transform: uppercase; | |
letter-spacing: .4em; | |
color: rgba(255, 255, 255, 0.5); | |
transition: 2s ease-in-out; | |
} | |
.footer__right a { | |
transition: 0.5s ease-in-out; | |
} | |
.footer__right a:hover { | |
color: #ff2c75; | |
opacity: 1; | |
} | |
// | |
// | |
// | |
// | |
// | |
//STANDARD | |
.form-wrapper { | |
font-family: bebas-neue,sans-serif !important; | |
font-size: 1rem; | |
font-weight: 300; | |
text-transform: uppercase; | |
letter-spacing: .2em; | |
color: #423e7d; | |
} | |
.form-wrapper .field-list .field .field-element { | |
font-family: bebas-neue,sans-serif !important; | |
letter-spacing: .2em; | |
border-radius: 0px; | |
border: none; | |
border-bottom: thin solid #423e7d; | |
background: transparent; | |
} | |
.form-wrapper .field-list .field .field-element:focus { | |
background: transparent; | |
} | |
//LIGHTBOX | |
.sqs-modal-lightbox-content .lightbox-inner .lightbox-content { | |
background: #02001e; | |
} | |
.sqs-modal-lightbox-content .lightbox-inner .lightbox-content .form-wrapper .form-title { | |
font-size: 22px; | |
line-height: 1.2em; | |
margin-right: 22px; | |
color: #fff; | |
} | |
.sqs-modal-lightbox-content .lightbox-inner .lightbox-content .form-wrapper { | |
color: #423e7d; | |
} | |
.sqs-modal-lightbox-content .lightbox-inner .lightbox-content .form-wrapper .field-list .field .field-element { | |
color: #fff; | |
} | |
.sqs-modal-lightbox-content .lightbox-inner .lightbox-content .form-wrapper input[type=submit] { | |
padding: 0em 0em 0.25em 0em; | |
font-family: bebas-neue,sans-serif !important; | |
letter-spacing: .2em; | |
color: #fff; | |
background-color: transparent; | |
border-bottom: thin solid #fff; | |
font-size: 1.2rem; | |
line-height: 1em; | |
text-transform: uppercase; | |
text-align: center; | |
text-decoration: none; | |
cursor: pointer; | |
transition: 0.5s ease-in-out; | |
} | |
.sqs-modal-lightbox-content .lightbox-inner .lightbox-content .form-wrapper input[type=submit]:hover { | |
color: #ff2c75; | |
border-bottom: thin solid #ff2c75; | |
} | |
.sqs-modal-lightbox-content .lightbox-inner .lightbox-content .lightbox-close { | |
color: #fff; | |
} | |
body:not(.button-style-default).button-style-outline .sqs-editable-button, body:not(.button-style-default).button-style-outline .sqs-editable-button-color { | |
background-color: transparent; | |
color: #1f1b57; | |
border: none; | |
font-family: bebas-neue,sans-serif !important; | |
letter-spacing: .2em; | |
font-size: 1.1rem; | |
} | |
body:not(.button-style-default).button-style-outline .sqs-editable-button:hover, body:not(.button-style-default).button-style-outline .sqs-editable-button-color:hover { | |
background-color: #17143f; | |
color: #fff; | |
} | |
// | |
// | |
// | |
// | |
// | |
// | |
// | |
// | |
//======================================================================================================= | |
//PROJECT FRAMEWORK | |
//============================= | |
.project__infos { | |
position: relative; | |
padding-top: 30vh; | |
padding-bottom: 30vh; | |
text-align: center; | |
} | |
.container { | |
max-width: 1300px; | |
width: 80%; | |
margin-left: auto; | |
margin-right: auto; | |
position: relative; | |
} | |
.project__infos .subtitle { | |
text-transform: uppercase; | |
font-weight: 900; | |
font-family: gilroy, sans-serif; | |
color: #ff2c75; | |
font-size: 1.2rem; | |
letter-spacing: .1em; | |
display: block; | |
} | |
.project__infos .subtitle span { | |
color: #fff; | |
} | |
.project__infos .project__title { | |
color: #ff2c75; | |
margin: 10px auto; | |
font-size: 4.2rem; | |
text-transform: uppercase; | |
} | |
.project__infos .project__by__from { | |
max-width: 700px; | |
margin-left: auto; | |
margin-right: auto; | |
} | |
.project__infos .project__by__from>* { | |
display: inline; | |
font-family: bebas-neue, sans-serif; | |
color: #fff; | |
text-transform: uppercase; | |
letter-spacing: .4em; | |
font-size: 1.2rem; | |
} | |
.project__infos .project__by+.project__from:before { | |
content: '+'; | |
display: inline-block; | |
margin: 0 10px; | |
} | |
.project__infos .project__description { | |
color: #423e7d; | |
max-width: 400px; | |
margin: 60px auto; | |
} | |
//LINK | |
.link { | |
display: inline-block; | |
position: relative; | |
color: #ff2c75; | |
font-size: 1.4rem; | |
text-transform: uppercase; | |
font-family: bebas-neue, sans-serif; | |
padding-bottom: 5px; | |
letter-spacing: .1em; | |
} | |
.link>.link__txt.txt--off { | |
position: absolute; | |
top: 0%; | |
left: 50%; | |
color: #fff; | |
-webkit-transform: translateX(-50%); | |
transform: translateX(-50%); | |
} | |
.link>.link__txt.txt--off>* { | |
-webkit-transform: translateY(100%); | |
transform: translateY(100%); | |
} | |
.link>.link__txt { | |
display: block; | |
white-space: nowrap; | |
overflow: hidden; | |
z-index: 3; | |
} | |
.link .space { | |
display: inline-block; | |
width: 5px; | |
} | |
.link>.link__txt>:nth-child(1) { | |
-webkit-transition-delay: 10ms; | |
transition-delay: 10ms; | |
} | |
.link>.link__txt>:nth-child(2) { | |
-webkit-transition-delay: 20ms; | |
transition-delay: 20ms; | |
} | |
.link>.link__txt>:nth-child(3) { | |
-webkit-transition-delay: 30ms; | |
transition-delay: 30ms; | |
} | |
.link>.link__txt>:nth-child(4) { | |
-webkit-transition-delay: 40ms; | |
transition-delay: 40ms; | |
} | |
.link>.link__txt>:nth-child(5) { | |
-webkit-transition-delay: 50ms; | |
transition-delay: 50ms; | |
} | |
.link>.link__txt>:nth-child(6) { | |
-webkit-transition-delay: 60ms; | |
transition-delay: 60ms; | |
} | |
.link>.link__txt>:nth-child(7) { | |
-webkit-transition-delay: 70ms; | |
transition-delay: 70ms; | |
} | |
.link>.link__txt>:nth-child(8) { | |
-webkit-transition-delay: 80ms; | |
transition-delay: 80ms; | |
} | |
.link>.link__txt>:nth-child(9) { | |
-webkit-transition-delay: 90ms; | |
transition-delay: 90ms; | |
} | |
.link>.link__txt>:nth-child(10) { | |
-webkit-transition-delay: .1s; | |
transition-delay: .1s; | |
} | |
.link>.link__txt>:nth-child(11) { | |
-webkit-transition-delay: .11s; | |
transition-delay: .11s; | |
} | |
.link>.link__txt>:nth-child(12) { | |
-webkit-transition-delay: .12s; | |
transition-delay: .12s; | |
} | |
.link:hover>.link__txt.txt--off>* { | |
-webkit-transform: translateY(0); | |
transform: translateY(0); | |
} | |
.link:hover>.link__txt.txt--hover>* { | |
-webkit-transform: translateY(-100%); | |
transform: translateY(-100%); | |
} | |
.link>.link__txt>* { | |
display: inline-block; | |
-webkit-transition: -webkit-transform .4s ease; | |
transition: -webkit-transform .4s ease; | |
transition: transform .4s ease; | |
transition: transform .4s ease, -webkit-transform .4s ease; | |
} | |
//LINE | |
.link .line { | |
position: absolute; | |
top: 100%; | |
left: 0; | |
right: 0; | |
height: 2px; | |
background: #ff2c75; | |
-webkit-transition: all 150ms cubic-bezier(.7, 0, .3, 1); | |
transition: all 150ms cubic-bezier(.7, 0, .3, 1); | |
} | |
.link .line--hover { | |
opacity: 0; | |
background: #fff; | |
-webkit-transform: translateX(-50px); | |
transform: translateX(-50px); | |
} | |
.link:hover .line { | |
-webkit-transform: translateX(50px); | |
transform: translateX(50px); | |
opacity: 0; | |
} | |
.link:hover .line--hover { | |
-webkit-transform: translateX(0); | |
transform: translateX(0); | |
opacity: 1; | |
} | |
// | |
// | |
// | |
// | |
// | |
// | |
//PROJECT SCREENSHOTS | |
.project__screenshots { | |
position: relative; | |
padding-bottom: 30vh; | |
} | |
.project__screenshots .screenshot__container { | |
opacity: 1; | |
-webkit-transform: translateY(0) skewY(0) !important; | |
transform: translateY(0) skewY(0) !important; | |
} | |
.project__screenshots .screenshot__container { | |
-webkit-transform: translateY(200px) skewY(10deg); | |
transform: translateY(200px) skewY(10deg); | |
-webkit-transition: -webkit-transform 1.2s cubic-bezier(.16, 1.08, .38, .98); | |
transition: -webkit-transform 1.2s cubic-bezier(.16, 1.08, .38, .98); | |
transition: transform 1.2s cubic-bezier(.16, 1.08, .38, .98); | |
transition: transform 1.2s cubic-bezier(.16, 1.08, .38, .98), -webkit-transform 1.2s cubic-bezier(.16, 1.08, .38, .98); | |
} | |
.project__screenshots .visuel { | |
position: relative; | |
z-index: 2; | |
background: #423e7d; | |
overflow: hidden; | |
-webkit-transition: opacity 1.2s cubic-bezier(.16, 1.08, .38, .98) 0s, -webkit-transform 1.2s cubic-bezier(.16, 1.08, .38, .98); | |
transition: opacity 1.2s cubic-bezier(.16, 1.08, .38, .98) 0s, -webkit-transform 1.2s cubic-bezier(.16, 1.08, .38, .98); | |
transition: transform 1.2s cubic-bezier(.16, 1.08, .38, .98), opacity 1.2s cubic-bezier(.16, 1.08, .38, .98) 0s; | |
transition: transform 1.2s cubic-bezier(.16, 1.08, .38, .98), opacity 1.2s cubic-bezier(.16, 1.08, .38, .98) 0s, -webkit-transform 1.2s cubic-bezier(.16, 1.08, .38, .98); | |
} | |
.project__screenshots .visuel img { | |
position: absolute; | |
-webkit-transition: opacity 1.2s cubic-bezier(.16, 1.08, .38, .98), -webkit-transform 1.2s cubic-bezier(.16, 1.08, .38, .98); | |
transition: opacity 1.2s cubic-bezier(.16, 1.08, .38, .98), -webkit-transform 1.2s cubic-bezier(.16, 1.08, .38, .98); | |
transition: transform 1.2s cubic-bezier(.16, 1.08, .38, .98), opacity 1.2s cubic-bezier(.16, 1.08, .38, .98); | |
transition: transform 1.2s cubic-bezier(.16, 1.08, .38, .98), opacity 1.2s cubic-bezier(.16, 1.08, .38, .98), -webkit-transform 1.2s cubic-bezier(.16, 1.08, .38, .98); | |
width: 100%; | |
} | |
.img-fluid { | |
max-width: 100%; | |
height: auto; | |
display: block; | |
} | |
.project__screenshots .visuel:after { | |
content: ''; | |
display: block; | |
padding-bottom: 60.4%; | |
} | |
.project__screenshots .project__visuel--shadow { | |
position: absolute; | |
top: 0; | |
left: 0; | |
width: 100%; | |
height: 100%; | |
z-index: 0; | |
opacity: .5; | |
will-change: transform; | |
background: #02001e; | |
z-index: 1; | |
-webkit-transition: -webkit-transform 1.2s cubic-bezier(.16, 1.08, .38, .98); | |
transition: -webkit-transform 1.2s cubic-bezier(.16, 1.08, .38, .98); | |
transition: transform 1.2s cubic-bezier(.16, 1.08, .38, .98); | |
transition: transform 1.2s cubic-bezier(.16, 1.08, .38, .98), -webkit-transform 1.2s cubic-bezier(.16, 1.08, .38, .98); | |
} | |
//SCREENSHOT HOVER | |
.project__screenshots .container .project__screenshot:hover .visuel { | |
-webkit-transform: scale(.9) rotateX(5deg) skewY(-5deg) !important; | |
transform: scale(.9) rotateX(5deg) skewY(-5deg) !important; | |
} | |
.project__screenshots .container .project__screenshot:hover .visuel img { | |
-webkit-transform: scale(1.15) rotateX(-5deg) skewY(5deg) !important; | |
transform: scale(1.15) rotateX(-5deg) skewY(5deg) !important; | |
} | |
.project__screenshots .container .project__screenshot:hover .project__visuel--shadow { | |
-webkit-transform: translate(0, 40px) scale(.8) rotateX(-5deg) skewY(2deg) !important; | |
transform: translate(0, 40px) scale(.8) rotateX(-5deg) skewY(2deg) !important; | |
} | |
.project__screenshot+.project__screenshot { | |
margin-top: 10vh; | |
} | |
// | |
// | |
// | |
// | |
// | |
// | |
// | |
// | |
//PROJECT CTA | |
.project__home { | |
text-align: center; | |
} | |
//NEXT&PREV LINKS | |
.BlogItem-pagination-link--next { | |
width: 30%; | |
margin: 10%; | |
transition: 0.5s ease-in-out; | |
} | |
.BlogItem-pagination-link--next:hover { | |
margin-right: 8%; | |
font-style: italic !important; | |
} | |
.BlogItem-pagination-link--prev { | |
width: 30%; | |
margin: 10%; | |
transition: 0.5s ease-in-out; | |
} | |
.BlogItem-pagination-link--prev:hover { | |
margin-left: 8%; | |
font-style: italic !important; | |
} | |
.BlogItem-pagination-link-label { | |
font-family: bebas-neue,sans-serif; | |
font-size: 1rem; | |
font-weight: 300; | |
text-transform: uppercase; | |
letter-spacing: .4em; | |
color: #FFF; | |
} | |
.BlogItem-pagination-link-title { | |
font-family: neuzeit-grotesk,sans-serif; | |
font-size: 1.5rem; | |
line-height: 1; | |
font-weight: 900; | |
text-transform: uppercase; | |
color: #ff2c75; | |
} | |
// | |
// | |
// | |
// | |
// | |
// | |
// | |
// | |
//======================================================================================================= | |
//TEST | |
//============================= | |
.sqs-block-summary-v2 .summary-item { | |
width: 30% !important; | |
margin: 10% 10% 10% 10%; | |
overflow: visible; | |
@media only screen and (max-width: 1200px) { | |
width: 60% !important; | |
margin: 20% 20% 20% 20%; | |
} | |
} | |
.sqs-block-summary-v2 .summary-item.positioned:first-child { | |
width: 60% !important; | |
margin: 5% 20% 20% 20%; | |
} | |
.sqs-block-summary-v2 .summary-content { | |
position: absolute; | |
top: 90%; | |
left: 5%; | |
width: 90%; | |
opacity: 0; | |
transition: 0.5s ease-in-out; | |
-webkit-transform: scale(.9) rotateX(5deg) skewY(-5deg) !important; | |
transform: scale(.9) rotateX(5deg) skewY(-5deg) !important; | |
} | |
.sqs-block-summary-v2 .summary-item:hover .summary-content { | |
top: 60%; | |
opacity: 1; | |
} | |
.summary-title { | |
font-family: bebas-neue,sans-serif; | |
font-size: 1.1rem !important; | |
font-weight: 300; | |
text-transform: uppercase; | |
letter-spacing: .4em; | |
color: #FFF; | |
} | |
.summary-excerpt { | |
font-family: neuzeit-grotesk,sans-serif; | |
font-size: 2.5rem !important; | |
line-height: 1; | |
font-weight: 900; | |
text-transform: uppercase; | |
color: #ff2c75; | |
width: 90%; | |
} | |
.summary-excerpt p { | |
font-size: 2.5rem !important; | |
color: #ff2c75; | |
line-height: 0.5em !important; | |
} | |
.summary-excerpt strong { | |
font-size: 1.5rem !important; | |
color: #fff; | |
} | |
.summary-metadata-container .summary-metadata-container--below-content { | |
display: none !important; | |
} | |
.summary-metadata .summary-metadata-item--date { | |
display: none !important; | |
} | |
.summary-thumbnail-outer-container { | |
-webkit-transition: opacity 1.2s cubic-bezier(.16, 1.08, .38, .98) 0s, -webkit-transform 1.2s cubic-bezier(.16, 1.08, .38, .98); | |
transition: opacity 1.2s cubic-bezier(.16, 1.08, .38, .98) 0s, -webkit-transform 1.2s cubic-bezier(.16, 1.08, .38, .98); | |
transition: transform 1.2s cubic-bezier(.16, 1.08, .38, .98), opacity 1.2s cubic-bezier(.16, 1.08, .38, .98) 0s; | |
transition: transform 1.2s cubic-bezier(.16, 1.08, .38, .98), opacity 1.2s cubic-bezier(.16, 1.08, .38, .98) 0s, -webkit-transform 1.2s cubic-bezier(.16, 1.08, .38, .98); | |
} | |
.sqs-block-summary-v2 .summary-item:hover .summary-thumbnail-outer-container { | |
-webkit-transform: scale(.9) rotateX(5deg) skewY(-5deg) !important; | |
transform: scale(.9) rotateX(5deg) skewY(-5deg) !important; | |
opacity: 0.5; | |
} | |
// | |
// | |
// | |
// | |
// | |
// | |
//ERROR 404 | |
.error__404 { | |
position: fixed; | |
top: 5%; | |
right: 5%; | |
z-index: 10; | |
} | |
.error__404 span { | |
font-size: .8rem !important; | |
} | |
.wrap{ | |
position: relative; | |
} | |
iframe { | |
visibility: hidden; | |
} | |
canvas{ | |
background: #17143f; | |
position: absolute; | |
top: 0; | |
bottom: 0; | |
left: 0; | |
right: 0; | |
z-index: 5; | |
} | |
#overlay { | |
//overflow: hidden; | |
position: absolute; | |
z-index: 20; | |
width: 100%; | |
height: 100%; | |
color: white; | |
font-family: bebas-neue,sans-serif; | |
h1 { | |
font-size: 3em; | |
margin: 2em auto; | |
text-align: center; | |
color: #ff2c75; | |
opacity: 0; | |
@include transition-delay(2s); | |
@include transition-duration(1s); | |
&.active { | |
opacity: 1; | |
} | |
} | |
.score-total { | |
bottom: 1em; | |
left: 1em; | |
position: absolute; | |
} | |
.score-single, .message { | |
position: absolute; | |
} | |
.message { | |
text-shadow: 0 4px 0 rgb(50,50,50); | |
} | |
.score-single { | |
font-size: .8em; | |
} | |
.instruction { | |
text-align: center; | |
position: fixed; | |
width: 100%; | |
bottom: 2rem; | |
font-size: 3rem; | |
} | |
} | |
.animated{-webkit-animation-fill-mode:both;-moz-animation-fill-mode:both;-ms-animation-fill-mode:both;-o-animation-fill-mode:both;animation-fill-mode:both;-webkit-animation-duration:1s;-moz-animation-duration:1s;-ms-animation-duration:1s;-o-animation-duration:1s;animation-duration:1s;}.animated.hinge{-webkit-animation-duration:2s;-moz-animation-duration:2s;-ms-animation-duration:2s;-o-animation-duration:2s;animation-duration:2s;}@-webkit-keyframes tada { | |
0% {-webkit-transform: scale(1);} 10%, 20% {-webkit-transform: scale(0.9) rotate(-3deg);} | |
30%, 50%, 70%, 90% {-webkit-transform: scale(1.1) rotate(3deg);} | |
40%, 60%, 80% {-webkit-transform: scale(1.1) rotate(-3deg);} | |
100% {-webkit-transform: scale(1) rotate(0);} | |
} | |
@-webkit-keyframes tada { | |
0% {-webkit-transform: scale(1);} | |
10%, 20% {-webkit-transform: scale(0.9) rotate(-3deg);} | |
30%, 50%, 70%, 90% {-webkit-transform: scale(1.1) rotate(3deg);} | |
40%, 60%, 80% {-webkit-transform: scale(1.1) rotate(-3deg);} | |
90% {-webkit-transform: scale(1) rotate(0); opacity: 1;} | |
100% {opacity: 0;} | |
} | |
@keyframes tada { | |
0% {transform: scale(1);} | |
10%, 20% {transform: scale(0.9) rotate(-3deg);} | |
30%, 50%, 70%, 90% {transform: scale(1.1) rotate(3deg);} | |
40%, 60%, 80% {transform: scale(1.1) rotate(-3deg);} | |
100% {transform: scale(1) rotate(0);} | |
} | |
@-webkit-keyframes out { | |
0% {@include transform(translateY(0px));} | |
100% { | |
@include transform(translateY(-100px) scale(1.3)); | |
opacity: 0; | |
} | |
} | |
@keyframes out { | |
0% {@include transform(translateY(0px));} | |
100% { | |
opacity: 0; | |
@include transform(translateY(-100px) scale(1.3)); | |
} | |
} | |
.tada { | |
-webkit-animation-name: tada; | |
animation-name: tada; | |
} | |
.out { | |
-webkit-animation-name: out; | |
animation-name: out; | |
} | |
//Animated Elements | |
#title { | |
display:block; | |
.Index-page-content { | |
display:none; | |
} | |
} | |
#home-landing-1 { | |
margin: 0; | |
padding: 0; | |
box-sizing: border-box; | |
background:#f3f5f4; | |
position: relative; | |
height: 50vh; | |
overflow: hidden; | |
transition: transform 1.8s cubic-bezier(.7,0,.3,1),-webkit-transform 1.8s cubic-bezier(.7,0,.3,1); | |
.title-container { | |
display:flex; | |
align-items: center; | |
justify-content: center; | |
height: 100vh; | |
} | |
} | |
.block-title { | |
width:65%; | |
position: relative; | |
max-width: 400px; | |
margin: 0 auto; | |
@media(min-width:640px){ | |
width:60% | |
} | |
@media(min-width:900px){ | |
width:50% | |
} | |
@media(min-width:1200px){ | |
width:30%; | |
} | |
@media(min-width:1600px){ | |
width:25%; | |
} | |
.shape { | |
position: absolute; | |
z-index: 10; | |
opacity: 1!important; | |
display: block; | |
max-width: 300px; | |
margin: 0 auto; | |
.item__img { | |
transform-origin: 50% 50%; | |
} | |
img { | |
width:80%; | |
} | |
svg { | |
position: absolute; | |
top: 0; | |
left: 0; | |
width: 100%; | |
height: 100%; | |
display: block; | |
} | |
} | |
.shape--1 { | |
top:-5%; | |
left:100%; | |
width:75%; | |
z-index:-1 | |
} | |
.shape--2 { | |
top: 10%; | |
width: 50%; | |
left: -45%; | |
} | |
.shape--3 { | |
bottom: 0%; | |
width: 80%; | |
left: -50%; | |
} | |
.trophee__content { | |
position: absolute; | |
width:100%; | |
top: 50%; | |
left: 50%; | |
-webkit-transform: translate(-50%,-50%); | |
transform: translate(-50%,-50%); | |
color: #423e7d; | |
pointer-events: none; | |
display: flex; | |
flex-wrap: wrap; | |
align-items: center; | |
} | |
.top-left { | |
font-size: 1.2em; | |
line-height: 1.2; | |
letter-spacing: .2em; | |
width: 50%; | |
display: flex; | |
flex-direction: column; | |
span { | |
display: block; | |
padding-left: 3em; | |
} | |
} | |
.main-text { | |
font-size: 10em; | |
line-height: .9; | |
white-space: nowrap; | |
text-align: center; | |
font-weight: 900; | |
min-width: 50%; | |
max-width: 50%; | |
@media(min-width:640px){ | |
font-size:12em; | |
} | |
@media(min-width:768px){ | |
font-size:16em; | |
} | |
@media(min-width:1200px){ | |
font-size:16em; | |
} | |
@media(min-width:1600px){ | |
font-size:18em; | |
} | |
span { | |
max-width: 48%; | |
min-width: 48%; | |
&:first-child { | |
margin-left: 50%; | |
} | |
} | |
} | |
.bottom-right { | |
display: flex; | |
flex-direction: column; | |
flex-wrap: wrap; | |
font-size: 2em; | |
width: 50%; | |
align-items: center; | |
color:white; | |
.bottom-left-row { | |
display: flex; | |
flex-direction: row; | |
span { | |
display: block; | |
} | |
} | |
} | |
} | |
.trophee { | |
.img-fluid { | |
max-width: 100%; | |
height: auto; | |
display: block; | |
} | |
} | |
#home-landing-2 { | |
overflow: hidden; | |
background:#2c2869; | |
} | |
.title-clone { | |
transform: translateY(-50%); | |
.main-text { | |
color:#ff2c75; | |
} | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment