Skip to content

Instantly share code, notes, and snippets.

@riix

riix/dailycssdesign-day1.markdown

Created June 5, 2018 02:35
Show Gist options
  • Save riix/4f0e272b345036b43b09f1fe86434679 to your computer and use it in GitHub Desktop.
Save riix/4f0e272b345036b43b09f1fe86434679 to your computer and use it in GitHub Desktop.
Download ZIP
dailycssdesign - day1
Raw
index.html
<div class="frame"></div>
<div class="fill-width">
<div class="rotate">
<div class="shape">
<div class="fill shape-fill"></div>
</div>
</div>
<div class="rect rect--1"></div>
<div class="rect rect--2"></div>
<div class="stripe stripe--1"></div>
<div class="stripe stripe--2"></div>
</div>
<div class="square square--1">
<div class="fill square__shadow"></div>
<div class="fill square__shape"></div>
</div>
<div class="square square--2">
<div class="fill square__shadow"></div>
<div class="fill square__shape"></div>
</div>
<h1 class="center">Challenge accepted</h1>
Raw
script.babel
jQuery(function($) {
$('.fill-width').tilt({
reset: false,
max: 35,
perspective: 1000,
scale: 1,
});
});
Raw
scripts
<script src="https://cdnjs.cloudflare.com/ajax/libs/tilt.js/1.2.1/tilt.jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
Raw
style.less
body {
background-color: #330b56;
}
.frame {
background-color: #0e117d;
background-image: repeating-linear-gradient(45deg, #0e117d, #410948 50px, #ef52c2 50px, #f376a8 100px);
}
.fill-width {
z-index: 1;
}
.shape {
width: 500px;
height: 500px;
width: 50vmin;
height: 50vmin;
position: relative;
overflow: hidden;
}
.shape-fill {
background-image: linear-gradient(to right, #9c0bf8, #f05dba);
background-image: linear-gradient(to right, #9c0bf8, #46e5ff);
animation: rotate 50s linear reverse infinite;
}
.rotate {
transform-style: preserve-3d;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%) rotate(0);
animation: rotateTranslate 100s linear infinite;
}
@keyframes rotate {
to {
transform: rotate(360deg);
}
}
@keyframes rotateTranslate {
to {
transform: translate(-50%, -50%) rotate(360deg);
}
}
.rect {
position: absolute;
width: 200px;
height: 30px;
background-color: #fff;
transform: translateZ(10px);
z-index: 1;
}
.rect--1 {
left: 10%;
top: 37%;
}
.rect--2 {
right: 15%;
bottom: 50%;
transform: translateZ(20px);
width: 100px;
height: 10px;
box-shadow: 0 6px 30px rgba(0,0,0,0.2);
}
h1 {
padding: 5px 40px;
white-space: nowrap;
pointer-events: none;
background-color: rgba(120, 80, 255, 0.3);
z-index: 2;
}
@supports (mix-blend-mode: screen) {
h1 {
mix-blend-mode: screen;
background-color: #005dff;
}
}
.stripe {
width: 10%;
height: 4px;
background-color: #fff;
transform: translateZ(-100px);
position: absolute;
z-index: 1;
}
.stripe--1 {
bottom: 20%;
left: 28%;
}
.stripe--2 {
top: 30%;
right: 36%;
width: 5%;
}
.square {
position: absolute;
width: 5%;
box-shadow: 0 20px 40px rgba(0,0,0,0.3);
z-index: 2;
}
.square:after {
content: "";
display: block;
padding-bottom: 100%;
}
.square__shape {
background-image: linear-gradient(to bottom right, #f05eb8, #9100ff);
}
.square__shadow {
box-shadow: 0 0 100px #9100ff;
opacity: 0.15;
}
.square--1 {
left: 12%;
top: 15%;
}
.square--2 {
right: 12%;
bottom: 15%;
width: 12%;
transform: rotate(180deg);
box-shadow: 0 -20px 40px rgba(0,0,0,0.3);
}
@media (-moz-touch-enabled: 0), (pointer: fine) {
.square {
transition: transform 2s;
}
.square__shadow {
transition: opacity 2s;
}
.square:hover {
transform: scale(1.1) rotate(20deg);
}
.square:hover .square__shadow {
opacity: 1;
}
}
@media (max-width: 900px) {
h1 {
font-size: 50px;
}
}
@media (max-width: 600px) {
.frame {
top: 20px;
right: 20px;
bottom: 20px;
left: 20px;
}
h1 {
white-space: normal;
width: 100%;
text-align: center;
line-height: 1;
}
.shape {
width: 80vmin;
height: 80vmin;
}
.rect--1 {
left: -5%;
top: 22%;
height: 14px;
width: 30%;
}
.rect--2 {
bottom: 11%;
}
.square--1 {
left: auto;
right: 16%;
top: 17%;
width: 14%;
}
.square--2 {
right: auto;
left: 12%;
bottom: 15%;
width: 20%;
}
}
h1{font-size:80px;line-height:1.18;font-family:"Montserrat", sans-serif;margin:0}@media (max-width: 600px){h1{font-size:50px;white-space:normal}}@media (max-width: 460px){h1{font-size:36px}}*{-webkit-tap-highlight-color:transparent;-webkit-tap-highlight-color:transparent}:-moz-focusring{outline:none}*,*:before,*:after{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}body{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}img{max-width:100%}a{text-decoration:none}code{white-space:pre}html,body{height:100%;overflow:hidden}body{color:#fff;background-color:#1b1b1b;font-family:"Montserrat", sans-serif;margin:0}body.is-dark{color:#000}a{color:inherit;cursor:pointer}@media (-moz-touch-enabled: 0), (pointer: fine){a{-webkit-transition:color 0.12s;-o-transition:color 0.12s;-moz-transition:color 0.12s;transition:color 0.12s}a:hover{color:#ff3b7d}}a:active{-webkit-transition:none;-o-transition:none;-moz-transition:none;transition:none;color:#d40047}.inline{display:inline-block}.middle{display:inline-block;vertical-align:middle}.uc{text-transform:uppercase;letter-spacing:0.18em}.no-select{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.fill{position:absolute;top:0;right:0;bottom:0;left:0;overflow:hidden}.fill-scroll{overflow-y:auto;-webkit-overflow-scrolling:touch;position:absolute;top:0;right:0;bottom:0;left:0}.fill-width{position:absolute;top:0;left:0;width:100%;height:100%;overflow:hidden}.center{position:absolute;top:50%;left:50%;-webkit-transform:translate(-50%, -50%);-moz-transform:translate(-50%, -50%);-ms-transform:translate(-50%, -50%);-o-transform:translate(-50%, -50%);transform:translate(-50%, -50%)}.frame{position:absolute;top:80px;right:80px;bottom:80px;left:80px}.at:before{content:'@'}.corner{position:absolute;z-index:50;width:500px;height:500px;background:-webkit-radial-gradient(center, circle, rgba(0,0,0,0.12), rgba(0,0,0,0.001) 50%);background:-moz-radial-gradient(center, circle, rgba(0,0,0,0.12), rgba(0,0,0,0.001) 50%);background:-o-radial-gradient(center, circle, rgba(0,0,0,0.12), rgba(0,0,0,0.001) 50%);background:radial-gradient(circle at center, rgba(0,0,0,0.12), rgba(0,0,0,0.001) 50%);pointer-events:none}.corner--top{top:-166.66667px}.corner--bottom{bottom:-166.66667px}.corner--left{left:-166.66667px}.corner--right{right:-166.66667px}.primary{color:#00bc7e}.secondary{color:#ff3b7d}.tertiary{color:#2876c6}.dark-gray{color:#999}.warning{color:#e8b549}.positive{color:#00bc7e}.error{color:#ff3b7d}.bg-secondary{background-color:#ff3b7d;color:#fff}.bg-warning{background-color:#e8b549 !important;color:#fff}.bg-error{background-color:#ff3b7d !important;color:#fff}.bg-dark{background-color:rgba(0,0,0,0.8);color:#fff}@-webkit-keyframes fadeIn{from{opacity:0}to{opacity:1}}@-moz-keyframes fadeIn{from{opacity:0}to{opacity:1}}@-o-keyframes fadeIn{from{opacity:0}to{opacity:1}}@keyframes fadeIn{from{opacity:0}to{opacity:1}}.hl-fadeIn{-webkit-animation:fadeIn 1s;-moz-animation:fadeIn 1s;-o-animation:fadeIn 1s;animation:fadeIn 1s}.hl-fadeStaggerChildren>*:nth-child(1){-webkit-animation:fadeIn 0.5s;-moz-animation:fadeIn 0.5s;-o-animation:fadeIn 0.5s;animation:fadeIn 0.5s}.hl-fadeStaggerChildren>*:nth-child(2){-webkit-animation:fadeIn 0.7s;-moz-animation:fadeIn 0.7s;-o-animation:fadeIn 0.7s;animation:fadeIn 0.7s}.hl-fadeStaggerChildren>*:nth-child(3){-webkit-animation:fadeIn 0.9s;-moz-animation:fadeIn 0.9s;-o-animation:fadeIn 0.9s;animation:fadeIn 0.9s}.hl-fadeStaggerChildren>*:nth-child(4){-webkit-animation:fadeIn 1.1s;-moz-animation:fadeIn 1.1s;-o-animation:fadeIn 1.1s;animation:fadeIn 1.1s}.hl-fadeStaggerChildren>*:nth-child(5){-webkit-animation:fadeIn 1.3s;-moz-animation:fadeIn 1.3s;-o-animation:fadeIn 1.3s;animation:fadeIn 1.3s}.hl-fadeStaggerChildren>*:nth-child(6){-webkit-animation:fadeIn 1.5s;-moz-animation:fadeIn 1.5s;-o-animation:fadeIn 1.5s;animation:fadeIn 1.5s}.hl-fadeStaggerChildren>*:nth-child(7){-webkit-animation:fadeIn 1.7s;-moz-animation:fadeIn 1.7s;-o-animation:fadeIn 1.7s;animation:fadeIn 1.7s}.hl-fadeStaggerChildren>*:nth-child(8){-webkit-animation:fadeIn 1.9s;-moz-animation:fadeIn 1.9s;-o-animation:fadeIn 1.9s;animation:fadeIn 1.9s}.hl-fadeStaggerChildren>*:nth-child(9){-webkit-animation:fadeIn 2.1s;-moz-animation:fadeIn 2.1s;-o-animation:fadeIn 2.1s;animation:fadeIn 2.1s}.hl-fadeStaggerChildren>*:nth-child(10){-webkit-animation:fadeIn 2.3s;-moz-animation:fadeIn 2.3s;-o-animation:fadeIn 2.3s;animation:fadeIn 2.3s}.hl-fadeStaggerChildren>*:nth-child(11){-webkit-animation:fadeIn 2.5s;-moz-animation:fadeIn 2.5s;-o-animation:fadeIn 2.5s;animation:fadeIn 2.5s}.hl-fadeStaggerChildren>*:nth-child(12){-webkit-animation:fadeIn 2.7s;-moz-animation:fadeIn 2.7s;-o-animation:fadeIn 2.7s;animation:fadeIn 2.7s}.hl-fadeStaggerChildren>*:nth-child(13){-webkit-animation:fadeIn 2.9s;-moz-animation:fadeIn 2.9s;-o-animation:fadeIn 2.9s;animation:fadeIn 2.9s}.hl-fadeStaggerChildren>*:nth-child(14){-webkit-animation:fadeIn 3.1s;-moz-animation:fadeIn 3.1s;-o-animation:fadeIn 3.1s;animation:fadeIn 3.1s}.hl-fadeStaggerChildren>*:nth-child(15){-webkit-animation:fadeIn 3.3s;-moz-animation:fadeIn 3.3s;-o-animation:fadeIn 3.3s;animation:fadeIn 3.3s}.hl-fadeStaggerChildren>*:nth-child(16){-webkit-animation:fadeIn 3.5s;-moz-animation:fadeIn 3.5s;-o-animation:fadeIn 3.5s;animation:fadeIn 3.5s}.hl-fadeStaggerChildren>*:nth-child(17){-webkit-animation:fadeIn 3.7s;-moz-animation:fadeIn 3.7s;-o-animation:fadeIn 3.7s;animation:fadeIn 3.7s}.hl-fadeStaggerChildren>*:nth-child(18){-webkit-animation:fadeIn 3.9s;-moz-animation:fadeIn 3.9s;-o-animation:fadeIn 3.9s;animation:fadeIn 3.9s}.hl-fadeStaggerChildren>*:nth-child(19){-webkit-animation:fadeIn 4.1s;-moz-animation:fadeIn 4.1s;-o-animation:fadeIn 4.1s;animation:fadeIn 4.1s}@-webkit-keyframes rotate{from{-webkit-transform:rotate(0deg);transform:rotate(0deg)}to{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}@-moz-keyframes rotate{from{-moz-transform:rotate(0deg);transform:rotate(0deg)}to{-moz-transform:rotate(360deg);transform:rotate(360deg)}}@-o-keyframes rotate{from{-o-transform:rotate(0deg);transform:rotate(0deg)}to{-o-transform:rotate(360deg);transform:rotate(360deg)}}@keyframes rotate{from{-webkit-transform:rotate(0deg);-moz-transform:rotate(0deg);-o-transform:rotate(0deg);transform:rotate(0deg)}to{-webkit-transform:rotate(360deg);-moz-transform:rotate(360deg);-o-transform:rotate(360deg);transform:rotate(360deg)}}@-webkit-keyframes swipeIndicator{0%,20%{-webkit-transform:translateX(0);transform:translateX(0)}30%{-webkit-transform:translateX(4px);transform:translateX(4px)}40%{-webkit-transform:translateX(-2px);transform:translateX(-2px)}50%{-webkit-transform:translateX(2px);transform:translateX(2px)}60%{-webkit-transform:translateX(0);transform:translateX(0)}}@-moz-keyframes swipeIndicator{0%,20%{-moz-transform:translateX(0);transform:translateX(0)}30%{-moz-transform:translateX(4px);transform:translateX(4px)}40%{-moz-transform:translateX(-2px);transform:translateX(-2px)}50%{-moz-transform:translateX(2px);transform:translateX(2px)}60%{-moz-transform:translateX(0);transform:translateX(0)}}@-o-keyframes swipeIndicator{0%,20%{-o-transform:translateX(0);transform:translateX(0)}30%{-o-transform:translateX(4px);transform:translateX(4px)}40%{-o-transform:translateX(-2px);transform:translateX(-2px)}50%{-o-transform:translateX(2px);transform:translateX(2px)}60%{-o-transform:translateX(0);transform:translateX(0)}}@keyframes swipeIndicator{0%,20%{-webkit-transform:translateX(0);-moz-transform:translateX(0);-o-transform:translateX(0);transform:translateX(0)}30%{-webkit-transform:translateX(4px);-moz-transform:translateX(4px);-o-transform:translateX(4px);transform:translateX(4px)}40%{-webkit-transform:translateX(-2px);-moz-transform:translateX(-2px);-o-transform:translateX(-2px);transform:translateX(-2px)}50%{-webkit-transform:translateX(2px);-moz-transform:translateX(2px);-o-transform:translateX(2px);transform:translateX(2px)}60%{-webkit-transform:translateX(0);-moz-transform:translateX(0);-o-transform:translateX(0);transform:translateX(0)}}.btn{color:#fff;background:transparent;border:none;font-weight:bold;min-width:180px;padding:10px 40px;cursor:pointer;outline:0;font-weight:700;font-size:16px;position:relative}.btn__top,.btn__bottom,.btn__right,.btn__left{position:absolute;background-color:#fff;background-color:currentColor;-webkit-transition:opacity 0.3s, -webkit-transform 0.3s;transition:opacity 0.3s, -webkit-transform 0.3s;-o-transition:opacity 0.3s, -o-transform 0.3s;-moz-transition:transform 0.3s, opacity 0.3s, -moz-transform 0.3s;transition:transform 0.3s, opacity 0.3s;transition:transform 0.3s, opacity 0.3s, -webkit-transform 0.3s, -moz-transform 0.3s, -o-transform 0.3s;will-change:transform, opacity;opacity:0}.btn__top,.btn__bottom{position:absolute;left:0;width:100%;height:1px;-webkit-transform:scale(0, 1);-moz-transform:scale(0, 1);-ms-transform:scale(0, 1);-o-transform:scale(0, 1);transform:scale(0, 1)}.btn__top{top:0}.btn__bottom{bottom:0}.btn__left,.btn__right{position:absolute;top:0;width:1px;height:100%;-webkit-transform:scale(1, 0);-moz-transform:scale(1, 0);-ms-transform:scale(1, 0);-o-transform:scale(1, 0);transform:scale(1, 0)}.btn__left{left:0}.btn__right{right:0}@media (-moz-touch-enabled: 0), (pointer: fine){.btn{-webkit-transition:background-color 0.12s, color 0.12s;-o-transition:background-color 0.12s, color 0.12s;-moz-transition:background-color 0.12s, color 0.12s;transition:background-color 0.12s, color 0.12s}.btn:hover .btn__top,.btn:hover .btn__bottom,.btn:hover .btn__left,.btn:hover .btn__right{opacity:0.4;-webkit-transform:scale(1);-moz-transform:scale(1);-ms-transform:scale(1);-o-transform:scale(1);transform:scale(1)}.btn:hover .btn__bottom{-webkit-transition-delay:0.15s;-moz-transition-delay:0.15s;-o-transition-delay:0.15s;transition-delay:0.15s}.btn:hover .btn__left{-webkit-transition-delay:0.1s;-moz-transition-delay:0.1s;-o-transition-delay:0.1s;transition-delay:0.1s}.btn:hover .btn__right{-webkit-transition-delay:0.2s;-moz-transition-delay:0.2s;-o-transition-delay:0.2s;transition-delay:0.2s}}.btn:active .btn__top,.btn:active .btn__bottom,.btn:active .btn__left,.btn:active .btn__right,.btn.active .btn__top,.btn.active .btn__bottom,.btn.active .btn__left,.btn.active .btn__right{opacity:1;-webkit-transform:scale(1);-moz-transform:scale(1);-ms-transform:scale(1);-o-transform:scale(1);transform:scale(1)}@media (-moz-touch-enabled: 0), (pointer: fine){.btn:active,.btn.active{-webkit-transition:background-color 0.12s;-o-transition:background-color 0.12s;-moz-transition:background-color 0.12s;transition:background-color 0.12s}.btn:active:hover,.btn.active:hover{background-color:rgba(255,255,255,0.1)}}.faqs{max-width:700px;margin:0 auto}.faq{position:relative;margin-bottom:60px}.question{position:absolute;left:0;top:0;width:180px;padding-right:40px;margin:0}.answer{padding-left:180px;line-height:1.6}@media (max-width: 940px){.faqs{max-width:none;margin:0;padding:0 40px}.faq{margin-bottom:100px}.question{position:static;width:auto;padding-right:0}.answer{padding-left:0}}@media (max-width: 600px){.faqs{padding:0 20px}.faq{margin-bottom:80px}}@media (max-width: 460px){.faqs{padding:0 10px}}.header{overflow:hidden;position:absolute;top:0;left:0;width:100%;height:100%}.day-list{list-style:none;font-size:0;max-width:1500px;margin:0 auto;padding:0 0 40px}.day-list>li{width:33.33%;display:inline-block;vertical-align:top;padding:20px}@media (max-width: 940px){.day-list>li{padding:2px}}@media (max-width: 380px){.day-list>li{width:50%}}@media (max-width: 940px){.day-list{padding:5px}}.day-list__link{display:block;position:relative;-webkit-backface-visibility:hidden;-moz-backface-visibility:hidden;backface-visibility:hidden;-webkit-transform-style:preserve-3d;-moz-transform-style:preserve-3d;transform-style:preserve-3d}.day-list__link:active{opacity:0.8}.day-list__title{position:absolute;bottom:0;left:0;right:0;font-size:16px;text-align:center;margin:0;font-weight:bold;opacity:0;padding:10px 0}.day-list__image{position:relative;z-index:1;-webkit-backface-visibility:hidden;-moz-backface-visibility:hidden;backface-visibility:hidden;-webkit-transform-style:preserve-3d;-moz-transform-style:preserve-3d;transform-style:preserve-3d;-moz-background-size:cover;-o-background-size:cover;background-size:cover;background-position:center;opacity:0;-webkit-transition:opacity 1s;-o-transition:opacity 1s;-moz-transition:opacity 1s;transition:opacity 1s}.day-list__image--loaded{opacity:1}.day-list__image:after{content:'';display:block;padding-bottom:56.2%}@media (max-width: 940px){.day-list__image:after{padding-bottom:100%}}@media screen and (min-width: 940px) and (-moz-touch-enabled: 0), screen and (min-width: 940px) and (pointer: fine){.day-list__link{-webkit-transition:-webkit-transform 0.36s cubic-bezier(0.46, 0.01, 0.05, 1.01);transition:-webkit-transform 0.36s cubic-bezier(0.46, 0.01, 0.05, 1.01);-o-transition:-o-transform 0.36s cubic-bezier(0.46, 0.01, 0.05, 1.01);-moz-transition:transform 0.36s cubic-bezier(0.46, 0.01, 0.05, 1.01), -moz-transform 0.36s cubic-bezier(0.46, 0.01, 0.05, 1.01);transition:transform 0.36s cubic-bezier(0.46, 0.01, 0.05, 1.01);transition:transform 0.36s cubic-bezier(0.46, 0.01, 0.05, 1.01), -webkit-transform 0.36s cubic-bezier(0.46, 0.01, 0.05, 1.01), -moz-transform 0.36s cubic-bezier(0.46, 0.01, 0.05, 1.01), -o-transform 0.36s cubic-bezier(0.46, 0.01, 0.05, 1.01)}.day-list__title{-webkit-transition:opacity 0.28s 0.08s, -webkit-transform 0.28s 0.08s;transition:opacity 0.28s 0.08s, -webkit-transform 0.28s 0.08s;-o-transition:opacity 0.28s 0.08s, -o-transform 0.28s 0.08s;-moz-transition:opacity 0.28s 0.08s, transform 0.28s 0.08s, -moz-transform 0.28s 0.08s;transition:opacity 0.28s 0.08s, transform 0.28s 0.08s;transition:opacity 0.28s 0.08s, transform 0.28s 0.08s, -webkit-transform 0.28s 0.08s, -moz-transform 0.28s 0.08s, -o-transform 0.28s 0.08s}.day-list__link:hover{-webkit-transform:translate3d(0, -14px, 0);-moz-transform:translate3d(0, -14px, 0);transform:translate3d(0, -14px, 0)}.day-list__link:hover .day-list__title{opacity:1;-webkit-transform:translate3d(0, 34px, 0);-moz-transform:translate3d(0, 34px, 0);transform:translate3d(0, 34px, 0);color:#fff}}.loading{position:fixed;left:50%;top:50%;-webkit-transform:translate(-50%, -50%);-moz-transform:translate(-50%, -50%);-ms-transform:translate(-50%, -50%);-o-transform:translate(-50%, -50%);transform:translate(-50%, -50%);z-index:70;background-color:#1b1b1b;width:150px;height:150px;line-height:150px;text-align:center;font-family:sans-serif;-webkit-box-shadow:0 10px 20px rgba(0,0,0,0.1);-moz-box-shadow:0 10px 20px rgba(0,0,0,0.1);box-shadow:0 10px 20px rgba(0,0,0,0.1);text-transform:uppercase;letter-spacing:0.1em}.main-frame{position:absolute;left:0;top:0;width:100%;height:100%;-webkit-animation:fadeIn 1s;-moz-animation:fadeIn 1s;-o-animation:fadeIn 1s;animation:fadeIn 1s}.menu{position:absolute;bottom:0;left:0;right:0;z-index:50}.menu-items{padding:0;margin:0;list-style:none}.menu-item{position:absolute;bottom:0;font-weight:700;font-size:16px}.menu-item--previous{left:0}.menu-item--next{right:0}.menu-item__link{padding:30px 40px;display:block}.menu-item__text,.menu-item__arrow{display:inline-block;vertical-align:middle}.menu-item__arrow{height:1px;width:80px;background-color:#fff;background-color:currentColor;position:relative}.menu-item__arrow:after{content:'';display:block;position:absolute;top:50%;border:5px solid transparent;margin-top:-5px}.menu-item__arrow--left{margin-right:5px}.menu-item__arrow--left:after{border-right:7px solid;left:-7px}.menu-item__arrow--right{margin-left:5px}.menu-item__arrow--right:after{border-left:7px solid;right:-7px}@media (-moz-touch-enabled: 0), (pointer: fine){.menu-item__text,.menu-item__arrow{-webkit-transition:-webkit-transform 0.5s cubic-bezier(0.42, 0.01, 0.17, 1.38);transition:-webkit-transform 0.5s cubic-bezier(0.42, 0.01, 0.17, 1.38);-o-transition:-o-transform 0.5s cubic-bezier(0.42, 0.01, 0.17, 1.38);-moz-transition:transform 0.5s cubic-bezier(0.42, 0.01, 0.17, 1.38), -moz-transform 0.5s cubic-bezier(0.42, 0.01, 0.17, 1.38);transition:transform 0.5s cubic-bezier(0.42, 0.01, 0.17, 1.38);transition:transform 0.5s cubic-bezier(0.42, 0.01, 0.17, 1.38), -webkit-transform 0.5s cubic-bezier(0.42, 0.01, 0.17, 1.38), -moz-transform 0.5s cubic-bezier(0.42, 0.01, 0.17, 1.38), -o-transform 0.5s cubic-bezier(0.42, 0.01, 0.17, 1.38)}.menu-item__link:hover .menu-item__arrow{-webkit-transform:translateX(10px);-moz-transform:translateX(10px);-ms-transform:translateX(10px);-o-transform:translateX(10px);transform:translateX(10px)}.menu-item__link:hover .menu-item__text{-webkit-transform:translateX(6px);-moz-transform:translateX(6px);-ms-transform:translateX(6px);-o-transform:translateX(6px);transform:translateX(6px);-webkit-transition-duration:0.8s;-moz-transition-duration:0.8s;-o-transition-duration:0.8s;transition-duration:0.8s}.menu-item--previous .menu-item__link:hover .menu-item__arrow{-webkit-transform:translateX(-10px);-moz-transform:translateX(-10px);-ms-transform:translateX(-10px);-o-transform:translateX(-10px);transform:translateX(-10px)}.menu-item--previous .menu-item__link:hover .menu-item__text{-webkit-transform:translateX(-6px);-moz-transform:translateX(-6px);-ms-transform:translateX(-6px);-o-transform:translateX(-6px);transform:translateX(-6px)}}@media (max-width: 600px){.menu-item__link{padding:30px 10px}.menu-item__arrow{width:40px}}.scroll-fade{opacity:0;-webkit-transition:opacity 1.5s;-o-transition:opacity 1.5s;-moz-transition:opacity 1.5s;transition:opacity 1.5s}.scroll-fade--active{opacity:1}.intro{position:absolute;top:40px;left:40px;z-index:50}.title{font-weight:700;font-size:32px;line-height:1;margin:0}.description{position:absolute;top:50%;left:25px;opacity:0.2;-webkit-transform-origin:0 0;-moz-transform-origin:0 0;-ms-transform-origin:0 0;-o-transform-origin:0 0;transform-origin:0 0;-webkit-transform:rotate(-90deg) translate(-50%, 10px);-moz-transform:rotate(-90deg) translate(-50%, 10px);-ms-transform:rotate(-90deg) translate(-50%, 10px);-o-transform:rotate(-90deg) translate(-50%, 10px);transform:rotate(-90deg) translate(-50%, 10px);z-index:50;font-size:14px;font-weight:700;text-transform:uppercase;letter-spacing:0.1em;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}@media (-moz-touch-enabled: 0), (pointer: fine){.description{-webkit-transition:opacity 0.3s;-o-transition:opacity 0.3s;-moz-transition:opacity 0.3s;transition:opacity 0.3s}.description:hover{opacity:0.4}}.day{position:absolute;top:40px;right:40px;z-index:50;text-align:right}.day__label{font-weight:700;font-size:32px;line-height:1;margin:0}.day__stripe{width:50px;height:3px;background-color:#fff;background-color:currentColor;display:inline-block;margin:3px 0}.day__instagram{font-size:0.55em}@media (max-width: 600px){.intro{top:10px;left:10px}.description{opacity:0;left:0}.day{top:10px;right:10px}.title,.day__label{font-size:25px}}.why{position:absolute;z-index:50;font-size:16px;display:-webkit-box;display:-webkit-flex;display:-moz-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-webkit-flex-direction:column;-moz-box-orient:vertical;-moz-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-pack:center;-webkit-justify-content:center;-moz-box-pack:center;-ms-flex-pack:center;justify-content:center;pointer-events:none;color:inherit}.why__button{position:absolute;color:inherit;background:transparent;border:none;font-weight:bold;left:50%;-webkit-transform:translateX(-50%);-moz-transform:translateX(-50%);-ms-transform:translateX(-50%);-o-transform:translateX(-50%);transform:translateX(-50%);min-width:180px;padding:10px 40px;bottom:20px;cursor:pointer;outline:0;z-index:51;font-weight:700;font-size:16px}.why__button__top,.why__button__bottom,.why__button__right,.why__button__left{position:absolute;background-color:#fff;background-color:currentColor;-webkit-transition:opacity 0.3s, -webkit-transform 0.3s;transition:opacity 0.3s, -webkit-transform 0.3s;-o-transition:opacity 0.3s, -o-transform 0.3s;-moz-transition:transform 0.3s, opacity 0.3s, -moz-transform 0.3s;transition:transform 0.3s, opacity 0.3s;transition:transform 0.3s, opacity 0.3s, -webkit-transform 0.3s, -moz-transform 0.3s, -o-transform 0.3s;will-change:transform, opacity;opacity:0}.why__button__top,.why__button__bottom{position:absolute;left:0;width:100%;height:1px;-webkit-transform:scale(0, 1);-moz-transform:scale(0, 1);-ms-transform:scale(0, 1);-o-transform:scale(0, 1);transform:scale(0, 1)}.why__button__top{top:0}.why__button__bottom{bottom:0}.why__button__left,.why__button__right{position:absolute;top:0;width:1px;height:100%;-webkit-transform:scale(1, 0);-moz-transform:scale(1, 0);-ms-transform:scale(1, 0);-o-transform:scale(1, 0);transform:scale(1, 0)}.why__button__left{left:0}.why__button__right{right:0}@media (-moz-touch-enabled: 0), (pointer: fine){.why__button{-webkit-transition:background-color 0.12s, color 0.12s;-o-transition:background-color 0.12s, color 0.12s;-moz-transition:background-color 0.12s, color 0.12s;transition:background-color 0.12s, color 0.12s}.why__button:hover .why__button__top,.why__button:hover .why__button__bottom,.why__button:hover .why__button__left,.why__button:hover .why__button__right{opacity:0.4;-webkit-transform:scale(1);-moz-transform:scale(1);-ms-transform:scale(1);-o-transform:scale(1);transform:scale(1)}.why__button:hover .why__button__bottom{-webkit-transition-delay:0.15s;-moz-transition-delay:0.15s;-o-transition-delay:0.15s;transition-delay:0.15s}.why__button:hover .why__button__left{-webkit-transition-delay:0.1s;-moz-transition-delay:0.1s;-o-transition-delay:0.1s;transition-delay:0.1s}.why__button:hover .why__button__right{-webkit-transition-delay:0.2s;-moz-transition-delay:0.2s;-o-transition-delay:0.2s;transition-delay:0.2s}}.why__button:active .why__button__top,.why__button:active .why__button__bottom,.why__button:active .why__button__left,.why__button:active .why__button__right,.why__button.active .why__button__top,.why__button.active .why__button__bottom,.why__button.active .why__button__left,.why__button.active .why__button__right{opacity:1;-webkit-transform:scale(1);-moz-transform:scale(1);-ms-transform:scale(1);-o-transform:scale(1);transform:scale(1)}@media (-moz-touch-enabled: 0), (pointer: fine){.why__button:active,.why__button.active{-webkit-transition:background-color 0.12s;-o-transition:background-color 0.12s;-moz-transition:background-color 0.12s;transition:background-color 0.12s}.why__button:active:hover,.why__button.active:hover{background-color:rgba(255,255,255,0.1)}}@media (max-width: 600px){.why__button{font-size:0;min-width:0}.why__button:before{content:'?';font-weight:700;font-size:16px}}.why__overlay{color:#404040;max-width:780px;margin:0 auto;padding:120px;position:relative;z-index:51;display:none}.why__text{opacity:0;-webkit-animation:fadeIn 1s 0.4s forwards;-moz-animation:fadeIn 1s 0.4s forwards;-o-animation:fadeIn 1s 0.4s forwards;animation:fadeIn 1s 0.4s forwards}.why__text:nth-of-type(2){-webkit-animation-delay:0.5s;-moz-animation-delay:0.5s;-o-animation-delay:0.5s;animation-delay:0.5s}.why__text:nth-of-type(3){-webkit-animation-delay:0.6s;-moz-animation-delay:0.6s;-o-animation-delay:0.6s;animation-delay:0.6s}.why__text:nth-of-type(4){-webkit-animation-delay:0.65s;-moz-animation-delay:0.65s;-o-animation-delay:0.65s;animation-delay:0.65s}.why__text:nth-of-type(5n){-webkit-animation-delay:0.7s;-moz-animation-delay:0.7s;-o-animation-delay:0.7s;animation-delay:0.7s}.why__title{max-width:400px;margin-bottom:40px}.why__bg{background-color:#fff;opacity:0;-webkit-transform-origin:50% 100%;-moz-transform-origin:50% 100%;-ms-transform-origin:50% 100%;-o-transform-origin:50% 100%;transform-origin:50% 100%;-webkit-transition:opacity 0.2s,-webkit-transform 0.4s 0.05s cubic-bezier(0.68, 0, 0.16, 1.2);transition:opacity 0.2s,-webkit-transform 0.4s 0.05s cubic-bezier(0.68, 0, 0.16, 1.2);-o-transition:opacity 0.2s,-o-transform 0.4s 0.05s cubic-bezier(0.68, 0, 0.16, 1.2);-moz-transition:transform 0.4s 0.05s cubic-bezier(0.68, 0, 0.16, 1.2),opacity 0.2s,-moz-transform 0.4s 0.05s cubic-bezier(0.68, 0, 0.16, 1.2);transition:transform 0.4s 0.05s cubic-bezier(0.68, 0, 0.16, 1.2),opacity 0.2s;transition:transform 0.4s 0.05s cubic-bezier(0.68, 0, 0.16, 1.2),opacity 0.2s,-webkit-transform 0.4s 0.05s cubic-bezier(0.68, 0, 0.16, 1.2),-moz-transform 0.4s 0.05s cubic-bezier(0.68, 0, 0.16, 1.2),-o-transform 0.4s 0.05s cubic-bezier(0.68, 0, 0.16, 1.2)}.why.open{pointer-events:all}.why.open .why__bg{-webkit-transform:scale(1) !important;-moz-transform:scale(1) !important;-ms-transform:scale(1) !important;-o-transform:scale(1) !important;transform:scale(1) !important;opacity:1}.why.open .why__overlay{display:block}@media (max-height: 550px), (max-width: 780px){.why{display:block}.why:after{content:'';position:absolute;display:block;bottom:80px;left:0;width:100%;height:60px;background:-webkit-gradient(linear, left bottom, left top, from(#fff), to(rgba(255,255,255,0)));background:-webkit-linear-gradient(bottom, #fff, rgba(255,255,255,0));background:-moz-linear-gradient(bottom, #fff, rgba(255,255,255,0));background:-o-linear-gradient(bottom, #fff, rgba(255,255,255,0));background:linear-gradient(to top, #fff, rgba(255,255,255,0));z-index:51;pointer-events:none;opacity:0;-webkit-transition:opacity 0.1s;-o-transition:opacity 0.1s;-moz-transition:opacity 0.1s;transition:opacity 0.1s}.why.open:after{-webkit-transition:opacity 0.5s 0.6s;-o-transition:opacity 0.5s 0.6s;-moz-transition:opacity 0.5s 0.6s;transition:opacity 0.5s 0.6s;opacity:1}.why__overlay{position:absolute;top:0;right:0;bottom:0;left:0;overflow-y:auto;-webkit-overflow-scrolling:touch;bottom:80px;padding:20px 20px 40px;max-width:none}.why__bg{top:0;left:0;right:0}}.frontpage,.frontpage>body{overflow-y:auto;height:auto}.frontpage .why__content{max-width:650px;margin:280px auto 100px;text-align:center;line-height:1.4}@media (max-width: 940px){.frontpage .why__content{margin:240px 0 80px;padding:0 40px;text-align:left}}@media (max-width: 600px){.frontpage .why__content{margin:180px 0 50px;padding:0 20px;text-align:left}}@media (max-width: 460px){.frontpage .why__content{padding:0 10px}}.frontpage .why__title{margin:0 auto;font-size:36px;max-width:none;line-height:1.1}.frontpage .why__title:after{content:'';display:block;width:50px;height:2px;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;background-color:rgba(255,255,255,0.2);margin:26px auto 24px}@media (max-width: 940px){.frontpage .why__title:after{margin:26px 0}}@media (max-width: 460px){.frontpage .why__title:after{margin:20px 0;width:40px}}@media (max-width: 600px){.frontpage .why__title{font-size:30px}}@media (max-width: 460px){.frontpage .why__title{font-size:26px;margin:0 auto 20px}}.frontpage .why__text{-webkit-animation-delay:0s;-moz-animation-delay:0s;-o-animation-delay:0s;animation-delay:0s}.frontpage .description{display:none}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment