<div class="switch-mode-blk">
<h5>Day / Night</h5>
<input class="container_toggle" type="checkbox" id="switch" name="mode">
<label for="switch"></label>
</div>
<div class="bg">
<div class="mountains">
<div class="mountain"></div>
<div class="mountain"></div>
<div class="mountain"></div>
<div class="mountain"></div>
<div class="mountain"></div>
<div class="mountain"></div>
<div class="mountain"></div>
<div class="mountain"></div>
<div class="mountain"></div>
</div>
<div class="sun"></div>
<div class="moon"></div>
<div class="zb-outer parking">
<div class="zb-flrs">
<div class="f10 rel">
<div class="zb-flr last-flr c-gls">
<div class="house-sparkle spark-right">
<div class="house-sparkle-dots"></div>
</div>
<i class="left-br"></i>
<i class="right-br"></i>
</div>
</div>
<div class="f9 rel">
<div class="zb-flr c-gls">
<div class="house-sparkle spark-right">
<div class="house-sparkle-dots"></div>
</div>
<i class="left-br"></i>
<i class="right-br"></i>
<div class="house-sparkle spark-right">
<div class="house-sparkle-dots"></div>
</div>
</div>
</div>
<div class="f8 rel">
<div class="zb-flr c-gls">
<div class="house-sparkle spark-right">
<div class="house-sparkle-dots"></div>
</div>
<i class="left-br"></i>
<span></span>
<i class="right-br"></i>
<div class="house-sparkle spark-right">
<div class="house-sparkle-dots"></div>
</div>
</div>
</div>
<div class="f7 rel">
<div class="zb-flr c-gls">
<div class="house-sparkle spark-right">
<div class="house-sparkle-dots"></div>
</div>
<i class="left-br"></i>
<i class="right-br"></i>
<div class="house-sparkle spark-right">
<div class="house-sparkle-dots"></div>
</div>
</div>
</div>
<div class="f6 rel">
<div class="zb-flr c-gls">
<div class="house-sparkle spark-right">
<div class="house-sparkle-dots"></div>
</div>
<i class="left-br"></i>
<i class="right-br"></i>
<div class="house-sparkle spark-right">
<div class="house-sparkle-dots"></div>
</div>
</div>
</div>
<div class="f5 rel">
<div class="zb-flr c-gls">
<div class="house-sparkle spark-right">
<div class="house-sparkle-dots"></div>
</div>
<i class="left-br"></i>
<span class="gls-corner-left"></span>
<i class="right-br"></i>
<div class="house-sparkle spark-right">
<div class="house-sparkle-dots"></div>
</div>
</div>
</div>
<div class="f4 rel">
<div class="zb-flr c-gls">
<div class="house-sparkle spark-right">
<div class="house-sparkle-dots"></div>
</div>
<i class="left-br"></i>
<i class="right-br"></i>
<div class="house-sparkle spark-right">
<div class="house-sparkle-dots"></div>
</div>
</div>
</div>
<div class="f3 rel">
<div class="zb-flr c-gls">
<div class="house-sparkle spark-right">
<div class="house-sparkle-dots"></div>
</div>
<i class="left-br"></i>
<i class="right-br"></i>
<div class="house-sparkle spark-right">
<div class="house-sparkle-dots"></div>
</div>
</div>
</div>
<div class="f2 rel">
<div class="zb-flr c-gls">
<div class="house-sparkle spark-right">
<div class="house-sparkle-dots"></div>
</div>
<i class="left-br"></i>
<i class="right-br"></i>
<div class="house-sparkle spark-right">
<div class="house-sparkle-dots"></div>
</div>
</div>
</div>
<div class="f1 rel">
<div class="house-sparkle spark-left">
<div class="house-sparkle-dots"></div>
</div>
<div class="zb-flr c-gls ">
<i class="left-br"></i>
<i class="right-br"></i>
</div>
<div class="house-sparkle spark-right">
<div class="house-sparkle-dots"></div>
</div>
</div>
</div>
</div>
<div class="rel full-ht">
<div class="zb-outer">
<div class="zb-flrs">
<div class="f10 rel">
<div class="zb-flr last-flr c-gls">
<div class="house-sparkle spark-right">
<div class="house-sparkle-dots"></div>
</div>
<i class="left-br"></i>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span class="gls-corner-left"></span>
<i class="right-br"></i>
</div>
</div>
<div class="f9 rel">
<div class="zb-flr c-gls">
<div class="house-sparkle spark-right">
<div class="house-sparkle-dots"></div>
</div>
<i class="left-br"></i>
<span class="gls-balcony"></span>
<span class="gls-balcony"></span>
<span class="gls-balcony"></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span class="gls-corner-left"></span>
<i class="right-br"></i>
<div class="house-sparkle spark-right">
<div class="house-sparkle-dots"></div>
</div>
</div>
</div>
<div class="f8 rel">
<div class="zb-flr c-gls">
<div class="house-sparkle spark-right">
<div class="house-sparkle-dots"></div>
</div>
<i class="left-br"></i>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span class="gls-open-right"></span>
<span></span>
<span class="gls-corner-left"></span>
<i class="right-br"></i>
<div class="house-sparkle spark-right">
<div class="house-sparkle-dots"></div>
</div>
</div>
</div>
<div class="f7 rel">
<div class="zb-flr c-gls">
<div class="house-sparkle spark-right">
<div class="house-sparkle-dots"></div>
</div>
<i class="left-br"></i>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span class="gls-corner-left"></span>
<i class="right-br"></i>
<div class="house-sparkle spark-right">
<div class="house-sparkle-dots"></div>
</div>
</div>
</div>
<div class="f6 rel">
<div class="zb-flr c-gls">
<div class="house-sparkle spark-right">
<div class="house-sparkle-dots"></div>
</div>
<i class="left-br"></i>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span class="gls-corner-left"></span>
<span class="gls-balcony"></span>
<span class="gls-balcony"></span>
<span class="gls-balcony"></span>
<i class="right-br"></i>
<div class="house-sparkle spark-right">
<div class="house-sparkle-dots"></div>
</div>
</div>
</div>
<div class="f5 rel">
<div class="zb-flr c-gls">
<div class="house-sparkle spark-right">
<div class="house-sparkle-dots"></div>
</div>
<i class="left-br"></i>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span class="gls-corner-left"></span>
<i class="right-br"></i>
<div class="house-sparkle spark-right">
<div class="house-sparkle-dots"></div>
</div>
</div>
</div>
<div class="f4 rel">
<div class="zb-flr c-gls">
<div class="house-sparkle spark-right">
<div class="house-sparkle-dots"></div>
</div>
<i class="left-br"></i>
<span></span>
<span></span>
<span class="gls-open-left"></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span class="gls-open-right"></span>
<span></span>
<span></span>
<i class="right-br"></i>
<div class="house-sparkle spark-right">
<div class="house-sparkle-dots"></div>
</div>
</div>
</div>
<div class="f3 rel">
<div class="zb-flr c-gls">
<div class="house-sparkle spark-right">
<div class="house-sparkle-dots"></div>
</div>
<i class="left-br"></i>
<span class="gls-balcony"></span>
<span></span>
<span class="op5"></span>
<span></span>
<span></span>
<span></span>
<span class="gls-a"></span>
<span class="gls-c"></span>
<span class="gls-b"></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<i class="right-br"></i>
<div class="house-sparkle spark-right">
<div class="house-sparkle-dots"></div>
</div>
</div>
</div>
<div class="f2 rel">
<div class="zb-flr c-gls">
<div class="house-sparkle spark-right">
<div class="house-sparkle-dots"></div>
</div>
<i class="left-br"></i>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span class="gls-balcony"></span>
<span class="gls-balcony">
</span>
<span class="gls-balcony"></span>
<i class="right-br"></i>
<div class="house-sparkle spark-right">
<div class="house-sparkle-dots"></div>
</div>
</div>
</div>
<div class="f1 rel">
<div class="house-sparkle spark-left">
<div class="house-sparkle-dots"></div>
</div>
<div class="zb-flr c-gls ">
<i class="left-br"></i>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<i class="right-br"></i>
</div>
<div class="house-sparkle spark-right">
<div class="house-sparkle-dots"></div>
</div>
</div>
</div>
<div class="zb-base">
<span class="left-base"></span>
<span></span>
<div class="zb-entrance"></div>
<span></span>
<span class="right-base"></span>
</div>
<div class="base-grd">
</div>
<div class="zb-grnd"></div>
</div>
<!-- end of tower -->
</div>
<!-- contruction -->
<div id="outerCraneContainer">
<div class="buildings">
<div class="building-bg"></div>
<div></div>
<div class="1"></div>
<div class="2"></div>
<div class="3"></div>
<div class="4"></div>
</div>
<div class="crane craneThree">
<div class="line lineOne"></div>
<div class="line lineTwo"></div>
<div class="line lineThree"></div>
<div class="stand"></div>
<div class="weight"></div>
<div class="cabin"></div>
<div class="arm"></div>
</div>
<div class="crane craneTwo">
<div class="line lineOne"></div>
<div class="line lineTwo"></div>
<div class="line lineThree"></div>
<div class="stand"></div>
<div class="weight"></div>
<div class="cabin"></div>
<div class="arm"></div>
</div>
<div class="crane craneOne">
<div class="line lineOne"></div>
<div class="line lineTwo"></div>
<div class="line lineThree"></div>
<div class="stand"></div>
<div class="weight"></div>
<div class="cabin"></div>
<div class="arm"></div>
</div>
</div>
<!-- end of constuction -->
<!-- south plaza -->
<div class="house south-plaza" id="house" data-rooms="6">
<div class="sp-left">
<div class="spleft-wall"></div>
</div>
<div class="sp-right">
<div class="spright-wall"></div>
</div>
<div class="house-wings first-flr" data-flip-key="wings">
<div class="house-left-wing">
<div class="house-window"></div>
<div class="house-window"></div>
<div class="house-window"></div>
<div class="house-sparkle">
<div class="house-sparkle-dots"></div>
</div>
</div>
<div class="house-right-wing">
<div class="house-window"></div>
<div class="house-window"></div>
<div class="house-window"></div>
<div class="house-sparkle">
<div class="house-sparkle-dots"></div>
</div>
</div>
<div class="house-roof north-plaza">
<div class="window-circle one"></div>
<div class="window-circle two"></div>
<div class="window-circle three"></div>
<div class="window-circle four"></div>
<div class="house-ledge"></div>
<div class="window-circle five"></div>
<div class="window-circle six"></div>
<div class="window-circle seven"></div>
<div class="window-circle eight"></div>
</div>
</div>
<div class="house-wings first-flr" data-flip-key="wings">
<div class="house-left-wing">
<div class="house-window"></div>
<div class="house-window"></div>
<div class="house-window"></div>
<div class="house-sparkle">
<div class="house-sparkle-dots"></div>
</div>
</div>
<div class="house-right-wing">
<div class="house-window"></div>
<div class="house-window"></div>
<div class="house-window"></div>
<div class="house-sparkle">
<div class="house-sparkle-dots"></div>
</div>
</div>
</div>
<div class="house-wings ground-flr" data-flip-key="wings">
<div class="house-left-wing">
<div class="house-sparkle">
<div class="house-sparkle-dots"></div>
</div>
</div>
<div class="house-right-wing">
<div class="house-sparkle">
<div class="house-sparkle-dots"></div>
</div>
</div>
</div>
<div class="sp-head">
<div class="sp-bowl"></div>
<div class="sp-head-one"></div>
<div class="sp-head-two"></div>
</div>
<div class="house-front" data-flip-key="front">
<div class="house-facade">
<div class="pillars"></div>
</div>
<div class="house-doorway">
<div class="house-stairs"></div>
<div class="house-door"></div>
</div>
<div class="house-gable">
<div class="house-roof">
<div class="southplaza-ledge"></div>
</div>
</div>
</div>
</div>
<!-- lake view -->
<div class="house north-plaza" id="house" data-rooms="6">
<div class="house-wings first-flr" data-flip-key="wings">
<div class="house-left-wing">
<div class="house-window"></div>
<div class="house-window"></div>
<div class="house-sparkle">
<div class="house-sparkle-dots"></div>
</div>
</div>
<div class="house-right-wing">
<div class="house-window"></div>
<div class="house-window"></div>
<div class="house-sparkle">
<div class="house-sparkle-dots"></div>
</div>
</div>
<div class="house-roof">
<div class="house-ledge"></div>
</div>
</div>
<div class="house-wings ground-flr" data-flip-key="wings">
<div class="house-left-wing">
<div class="house-window"></div>
<div class="house-window"></div>
<div class="house-sparkle">
<div class="house-sparkle-dots"></div>
</div>
</div>
<div class="house-right-wing">
<div class="house-window"></div>
<div class="house-window"></div>
<div class="house-sparkle">
<div class="house-sparkle-dots"></div>
</div>
</div>
</div>
<div class="house-front" data-flip-key="front">
<div class="house-chimney"></div>
<div class="house-facade"></div>
<div class="house-window">
<div class="house-sparkle">
<div class="house-sparkle-dots"></div>
</div>
</div>
<div class="house-doorway">
<div class="house-stairs"></div>
<div class="house-door"></div>
</div>
<div class="house-gable">
<div class="house-roof">
<div class="house-ledge"></div>
</div>
</div>
</div>
</div>
<!--end of lake view-->
<div class="z-wall">
<div class="container">
</div>
<div class="gate">
<div class="left">
<div class="panel"></div>
</div>
<div class="right">
<div class="panel"></div>
</div>
</div>
<div class="container">
</div>
</div>
<div class="z-logo">
<div class="z"><span>Z</span></div>
<div class="o"><span>O</span></div>
<div class="h"><span>H</span></div>
<div class="oo"><span>O</span></div>
</div>
<div class="trees">
<div class="tree blown">
<div class="branch"></div>
<div class="branch"></div>
<div class="trunk"></div>
<div class="shadow"></div>
</div>
<div class="tree blown">
<div class="branch"></div>
<div class="branch"></div>
<div class="trunk"></div>
<div class="shadow"></div>
</div>
<div class="tree blown">
<div class="branch"></div>
<div class="branch"></div>
<div class="trunk"></div>
<div class="shadow"></div>
</div>
<div class="tree blown">
<div class="branch"></div>
<div class="branch"></div>
<div class="trunk"></div>
<div class="shadow"></div>
</div>
<div class="tree blown">
<div class="branch"></div>
<div class="branch"></div>
<div class="trunk"></div>
<div class="shadow"></div>
</div>
<div class="tree-gap"></div>
<div class="tree blown">
<div class="branch"></div>
<div class="branch"></div>
<div class="trunk"></div>
<div class="shadow"></div>
</div>
<div class="tree blown">
<div class="branch"></div>
<div class="branch"></div>
<div class="trunk"></div>
<div class="shadow"></div>
</div>
<div class="tree blown">
<div class="branch"></div>
<div class="branch"></div>
<div class="trunk"></div>
<div class="shadow"></div>
</div>
<div class="tree blown">
<div class="branch"></div>
<div class="branch"></div>
<div class="trunk"></div>
<div class="shadow"></div>
</div>
<div class="tree blown">
<div class="branch"></div>
<div class="branch"></div>
<div class="trunk"></div>
<div class="shadow"></div>
</div>
<div class="tree blown">
<div class="branch"></div>
<div class="branch"></div>
<div class="trunk"></div>
<div class="shadow"></div>
</div>
</div>
</div>*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
.switch-mode-blk{
position: absolute;
right: 0;
bottom: 0;
margin: 20px;
z-index: 102;
display: flex;
align-items: center;
flex-direction: column;
justify-content: center;
h5{
text-shadow: 0 0 10px #fff;
margin-bottom: 5px
}
input[type=checkbox] {
height: 0;
width: 0;
visibility: hidden;
}
label {
cursor: pointer;
text-indent: -9999px;
width: 55px;
height: 30px;
background:#2196F3;
margin: 0 auto;
display: flex;
justify-content: center;
align-items: center;
-webkit-border-radius: 100px;
-moz-border-radius: 100px;
border-radius: 100px;
position: relative;
}
label:after {
content: '';
background: #fff;
width: 20px;
height: 20px;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
position: absolute;
top: 5px;
left: 4px;
-webkit-transition: ease-in-out 200ms;
-moz-transition: ease-in-out 200ms;
-ms-transition: ease-in-out 200ms;
-o-transition: ease-in-out 200ms;
transition: ease-in-out 200ms;
}
input:checked + label {
background: #074a7f;
}
input:checked + label:after {
left: calc(100% - 5px);
-webkit-transform: translateX(-100%);
-moz-transform: translateX(-100%);
-ms-transform: translateX(-100%);
-o-transform: translateX(-100%);
transform: translateX(-100%);
}
html.transition,
html.transition *,
html.transition *:before,
html.transition *:after {
-webkit-transition: ease-in-out 200ms !important;
-moz-transition: ease-in-out 200ms !important;
-ms-transition: ease-in-out 200ms !important;
-o-transition: ease-in-out 200ms !important;
transition: ease-in-out 200ms !important;
transition-delay: 0!important;
}
}
html[data-theme='dark'] {
.bg{
background: linear-gradient(180deg, #023480 20%, #797979 60%, #3a3737 62%);
transition: all ease 2s;
}
.zb-outer.parking .zb-flrs .zb-flr{
background-color: #757575;
background-image: radial-gradient(#414040 0.45px, #757575 0.45px);
background-size: 9px 9px;
transition: all ease 1s;
}
.sun{
opacity: 0;
visibility: hidden;
top: 200px;
transition: all ease-out 1s;
}
.moon{
opacity: 1;
bottom: 80vh;
transition: bottom ease 1s, opacity ease-out 1s;
}
.zb-outer {
.zb-flr.last-flr span {
background: linear-gradient(45deg, #00c9ff, #00657b);
transition: all ease 1s;
}
.zb-base{
transition: all ease 1s;
.zb-entrance{
background: #ffe9a6;
}
}
.base-grd {
background: #d4d4d4;
box-shadow: inset 0 0 10px 1px #333;
transition: all ease 1s;
}
.zb-flr {
background: #ababab;
transition: all ease 1s;
.gls-balcony:before {
background: #e0e1e4;
box-shadow: 5px 0px 0px 0px #e0e1e4;
transition: all ease 1s;
}
}
}
}
body{
height: 100%;
overflow: hidden;
position: relative;
.z-wall{
display: flex;
justify-content: space-between;
position: absolute;
left: 0;
bottom: 0;
width: 100%;
transform: scaleY(0.3) translateY(90px);
transform-origin: bottom;
z-index:11;
.gate{
width: 50%;
height: 200px;
position: relative;
text-align: center;
padding: 50px 0 0 0;
text-shadow: 0 0 30px rgba(255,255,255,0.8);
border-radius: 10px;
border-bottom: 2px solid #ddd;
}
.gate > .left{
width: 30%;
height: 200px;
background: rgb(175,114,103); /* Old browsers */
background: #7faac3;
position: absolute;
top: 0;
left: 0;
border: 10px solid #5a484b;
box-sizing: border-box;
transform: translateX(-30%);
&:before{
content: "";
position: absolute;
width: 6px;
height: 30px;
background: #000;
border-radius: 10px;
left: -12px;
}
&:after{
content: "";
position: absolute;
width: 6px;
height: 30px;
background: #000;
border-radius: 10px;
left: -12px;
bottom: 0px;
}
.panel{
content: "";
width: 70%;
height: 160px;
background: rgba(0,0,0,0.1);
border-top: 2px solid rgba(255,255,255,0.2);
border-left: 2px solid rgba(255,255,255,0.2);
border-right: 2px solid rgba(0,0,0,0.1);
border-bottom: 2px solid rgba(0,0,0,0.1);
position: absolute;
top: 8px;
left: 8px;
}
}
.gate > .right{
width: 30%;
height: 200px;
background: #7faac3;
position: absolute;
top: 0;
right: 0;
border: 10px solid #5a484b;
box-sizing: border-box;
z-index: 6;
&:before{
content: "";
position: absolute;
width: 6px;
height: 30px;
background: #000;
border-radius: 10px;
right: -12px;
}
&:after{
content: "";
position: absolute;
width: 6px;
height: 30px;
background: #000;
border-radius: 10px;
right: -12px;
bottom: 0px;
}
.panel{
content: "";
width: 70%;
height: 160px;
background: rgba(0,0,0,0.1);
position: absolute;
top: 8px;
left: 8px;
border-top: 2px solid rgba(255,255,255,0.2);
border-left: 2px solid rgba(255,255,255,0.2);
border-right: 2px solid rgba(0,0,0,0.1);
border-bottom: 2px solid rgba(0,0,0,0.1);
}
}
.container{
width: 100%;
background-color: #5f5f5f;
opacity: 1;
background-image: linear-gradient(30deg, #37373a 12%, transparent 12.5%, transparent 87%, #37373a 87.5%, #37373a), linear-gradient(150deg, #37373a 12%, transparent 12.5%, transparent 87%, #37373a 87.5%, #37373a), linear-gradient(30deg, #37373a 12%, transparent 12.5%, transparent 87%, #37373a 87.5%, #37373a), linear-gradient(150deg, #37373a 12%, transparent 12.5%, transparent 87%, #37373a 87.5%, #37373a), linear-gradient(60deg, #37373a77 25%, transparent 25.5%, transparent 75%, #37373a77 75%, #37373a77), linear-gradient(60deg, #37373a77 25%, transparent 25.5%, transparent 75%, #37373a77 75%, #37373a77);
background-size: 34px 60px;
background-position: 0 0, 0 0, 17px 30px, 17px 30px, 0 0, 17px 30px;
}
}
.z-logo{
position: absolute;
left: 30%;
bottom: 0;
z-index: 100;
display: flex;
>div{
width: 4px;
height: 80px;
background: #ccc;
margin: 0 10px;
>span{
display: inline-flex;
align-items:center;
justify-content: center;
width: 20px;
height: 20px;
border-radius: 2px;
color: #fff;
position: absolute;
left: 50%;
top: -10px;
transform: translate(-50%);
}
&.z > span{
background: #e62338;
transform: translate(-50%) rotate(
-15deg);
box-shadow: 2px -4px 0px 0px #fd5466;
}
&.o > span{
background: #00af4d;
transform: translate(-50%) rotate(
15deg);
box-shadow: -1px -3px 0px 0px #0ce56b;
}
&.h > span{
background: #0092cd;
transform: translate(-50%) rotate(
-15deg);
box-shadow: 2px -4px 0px 0px #23a0d3;
}
&.oo > span{
background: #feb400;
box-shadow: 1px -3px 0px 0px #ffc431;
}
}
}
/* TREES */
.trees{
position: absolute;
width: 100%;
height: auto;
left: 0;
bottom: 0;
z-index: 101;
display: flex;
justify-content: space-between;
.tree-gap{
width: 30%;
}
}
.tree {
background: darken(#408B0C, 5%);
box-shadow: inset 1em 0 0 #408B0C;
border-radius: 1em;
height: 5em;
width: 2em;
&:nth-child(4n) {
background: darken(#de8949, 5%);
box-shadow: inset 1em 0 0 #de8949;
}
.branch {
border: .2em solid #563D3D;
width: .8em;
height: .8em;
transform: rotate(45deg);
border-top: 0;
border-left: 0;
position: relative;
&:before, &:after {
content: '';
height: 0.175em;
width: 0.175em;
background-color: #563D3D;
border-radius: 50%;
position: absolute;
}
&:after {
right: -0.178125em;
top: -0.11875em;
}
&:before {
left: -0.11875em;
bottom: -0.178125em;
}
}
.branch:nth-child(1) {
position: absolute;
top: 35%;
left: 25%;
}
.branch:nth-child(2) {
position: absolute;
top: 60%;
left: 25%;
}
.shadow {
height: .5em;
width: 1.5em;
background: rgba(198, 198, 198, 0.5);
border-radius: 50%;
position: absolute;
bottom: -2.2em;
left: 10%;
z-index: -1;
transition: width 1s;
&.blown {
width: 2.5em;
}
}
.trunk {
background-color: #563D3D;
height: 5.5em;
width: .25em;
border-radius: 0.5em;
position: absolute;
bottom: -2em;
left: 42%;
}
transition: transform 1s;
&.blown {
transition: transform 1s;
transform: scale(.7) skewX(-5deg) !important;
.shadow {
width: 2.5em;
}
}
}
.bg{
width: 100%;
padding: 0 5%;
background: linear-gradient(180deg, #548fe8 20%, #ffffff 60%, #dcb05c 62%);
transition: all ease 2s;
}
/* MOUNTAINS */
$green : #408b0c;
$grey: #2e7d32;
.mountains {
position: absolute;
width: 100%;
height: 10em;
overflow: hidden;
left: 50%;
transform: translateX(-50%);
bottom: 36vh;
display: flex;
justify-content: space-between;
.mountain {
// position: absolute;
bottom: -4em;
height: 10em;
width: 10em;
transform: rotate(45deg);
border-top-left-radius: 14%;
border-top-right-radius: 80% 20%;
border-bottom-left-radius: 20% 80%;
// wow, firefox order matters
background: linear-gradient(45deg, darken($grey, 5%) 50%, transparent 50%) no-repeat,
linear-gradient(-45deg, transparent 50%, darken($grey, 5%) 50%) 0 90px no-repeat,
linear-gradient(135deg, $grey 57.5%, transparent 57.5%) no-repeat;
// background-size: 57.5%, 57.5%, 100%;
// larger mountains
&:nth-child(1), &:nth-child(5), &:nth-child(7), &:nth-child(10), &:nth-child(11) {
transform: rotate(45deg) scale(1.2);
}
// green mountains
&:nth-child(3), &:nth-child(7), &:nth-child(9) {
background: linear-gradient(45deg, darken($green, 5%) 50%, transparent 50%) no-repeat,
linear-gradient(-45deg, transparent 50%, darken($green, 5%) 50%) 0 90px no-repeat,
linear-gradient(135deg, $green 57.5%, transparent 57.5%) no-repeat;
// background-size: 57.5%, 57.5%, 100%;
}
}
}
.moon{
position: absolute;
bottom: 50vh;
right: 10vw;
width: 40px;
height: 40px;
border-radius: 100%;
background: #fff;
box-shadow: 2px 0px 15px 3px #fff;
opacity: 0;
transition: bottom ease 1s, opacity ease-out 1s;
&:before{
width: 40px;
height: 40px;
border-radius: 100%;
background: #fff;
box-shadow: 1px 1px 100px 40px #fff;
position: absolute;
left: 0;
top: 0;
}
&:after{
width: 10px;
height: 10px;
border-radius: 100%;
background: #adacaa;
box-shadow: 0px 0px 8px 8px #adacaa;
top: 50%;
left: 50%;
position: absolute;
transform: translate(-50%, -50%);
}
}
.sun{
position: absolute;
top: 10vh;
left: 10vw;
width: 40px;
height: 40px;
border-radius: 100%;
background: #f57c00;
box-shadow: 2px 0px 15px 3px #ff9800;
opacity: 1;
transition: top ease 1s, opacity 1s ease-out;
&:before{
width: 40px;
height: 40px;
border-radius: 100%;
background: #ff9800;
box-shadow: 1px 1px 100px 40px #ff9800;
position: absolute;
left: 0;
top: 0;
}
&:after{
width: 10px;
height: 10px;
border-radius: 100%;
background: #ffc107;
box-shadow: 0px 0px 8px 8px #ffc107;
top: 50%;
left: 50%;
position: absolute;
transform: translate(-50%, -50%);
}
}
.zb-outer.parking{
position: absolute;
left: -400px;
z-index: 11;
.zb-flrs{
.zb-flr{
background-color: #9e9e9e;
background-image: radial-gradient(#414040 0.45px, #9e9e9e 0.45px);
background-size: 9px 9px;
border: 1px solid #524f4f;
height: 40px;
border-top: 1px dashed #007004;
box-shadow: inset 6px 3px 10px #4d664e, inset 2px 2px 8px 0px #8bc34a;
transition: background ease 2s;
}
}
}
// lunch hall constrcution
#outerCraneContainer {
position: absolute;
left: 63%;
width: 53%;
height: 100%;
bottom: 5%;
// overflow: hidden;
display: flex;
justify-content: center;
transform: translateX(-50%);
z-index:1;
}
.buildings {
height: 84.9673202614379px;
width: 100%;
left: 0;
.building-bg{
background-color: #616161;
background-image: radial-gradient(#9e9e9e 0.5px, #616161 0.5px);
background-size: 10px 10px;
width: 85% !important;
height: 80% !important;
left: 0;
z-index: -1;
border-radius: 20% 100% 0 0;
}
}
.buildings div {
height: inherit;
width: 42.48366013071895px;
background: linear-gradient(
135deg, #4f4f5155 25%, transparent 25%) -4px 0/ 8px 8px, linear-gradient(
225deg, #4f4f51 25%, transparent 25%) -4px 0/ 8px 8px, linear-gradient(
315deg, #4f4f5155 25%, transparent 25%) 0px 0/ 8px 8px, linear-gradient(
45deg, #4f4f51 25%, #8e9eab 25%) 0px 0/ 8px 8px;
z-index: -1;
position: absolute;
bottom: 10%;
}
.buildings div:after {
content: '';
width: 80%;
height: 60%;
left: 10%;
bottom: 30%;
// background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAMAAAAGCAYAAAAG5SQMAAAAFElEQVQImWP4////fwYYIJKDEwAAfPsP8eFXG40AAAAASUVORK5CYII=") repeat;
position: absolute;
}
.buildings div:nth-of-type(1) {
width: 42.48366013071895px;
height: 21.241830065359476px;
right: 37%;
bottom: 0;
}
.buildings div:nth-of-type(1):after {
bottom: 11%;
}
.buildings div:nth-of-type(2) {
width: 48.552754435107374px;
height: 28.322440087145967px;
right: 30%;
bottom: 35%;
transform: rotate(180deg);
}
.buildings div:nth-of-type(2):after {
width: 60%;
left: 11%;
}
.buildings div:nth-of-type(3) {
width: 24.276377217553687px;
height: 37.76325344952796px;
left: 40%;
bottom: 35%;
}
.buildings div:nth-of-type(3):after {
bottom: 0;
width: 20%;
height: 85%;
left: 70%;
}
.buildings div:nth-of-type(4) {
width: 84.9673202614379px;
height: 21.241830065359476px;
left: 24%;
bottom: 20%;
}
.buildings div:nth-of-type(4):after {
background: none;
}
.buildings div:nth-of-type(5) {
width: 61.794414735591204px;
height: 67.97385620915033px;
left: 47%;
bottom: 10%;
}
.buildings div:nth-of-type(5):after {
bottom: 0;
width: 40%;
height: 85%;
left: 20%;
}
.crane,
.buildings {
position: absolute;
bottom: 0;
}
.crane div {
border-radius: 2px;
position: absolute;
}
.crane .line {
border: none;
background: #795548;
outline: 1px solid transparent;
z-index: 0;
}
.crane .lineOne {
width: 60%;
left: 11%;
top: 0;
}
.crane .lineTwo {
width: 19%;
right: 8%;
top: 0;
}
.crane .line.lineThree {
height: 30%;
top: 22%;
left: 9%;
}
.crane .line.lineThree:after {
content: "";
position: absolute;
height: 1.5em;
width: 9000%;
display: block;
bottom: 0;
left: -4500%;
border: solid 2px #757575;
background-color: #8e9eab;
}
.craneTwo .line.lineThree:after {
height: 0.1em;
}
.craneThree .line.lineThree:after {
height: 0.5em;
}
.stand {
height: 100%;
width: 5%;
right: 25%;
z-index: 1;
background: linear-gradient(to top, #ff6347, #f29b8b);
}
.craneTwo .stand {
background: linear-gradient(to top, #ff6347, #f19483);
}
.craneThree .stand {
background: linear-gradient(to top, #ff6347, #f08c7b);
}
.weight {
height: 20%;
width: 8%;
right: 4%;
top: 12%;
z-index: 2;
background: #607d8b;
border: 3px solid #546e7a!important;
border-right: 1px solid #455a64!important;
}
.craneTwo .weight {
background: #607d8b;
}
.craneThree .weight {
background: #607d8b;
}
.cabin {
height: 9%;
width: 12%;
right: 24%;
top: 20%;
z-index: 2;
background: #d9aca5;
border: 1px solid #b17272!important;
}
.cabin:after {
content: '';
position: absolute;
height: 10%;
width: 100%;
background: #fff;
display: block;
top: 60%;
left: 0;
}
.arm {
height: 7%;
width: 100%;
top: 15%;
z-index: 3;
background: #f88f7c;
}
.craneTwo .arm {
background: #f88773;
}
.craneThree .arm {
background: #f77f6b;
}
.crane div.arm {
border-top-left-radius: 10px;
}
.brick {
height: 6%;
width: 9%;
bottom: 0;
left: 40%;
background: #ff7359;
}
.brickTwo {
left: 48%;
}
.brickThree {
bottom: 5.5%;
left: 44%;
}
.craneOne {
width: 260px;
height: 169.9346405228758px;
left: -10%;
transform: scaleX(-1);
}
.craneOne div {
border: solid 1px #ff6347;
}
.craneOne .line {
height: 1px;
}
.craneOne .lineThree {
width: 1px;
}
.craneTwo {
width: 200px;
height: 130.718954248366px;
transform: scaleX(-1);
left: 40%;
z-index: -1;
}
.craneTwo div {
border: solid 1px #ff6347;
}
.craneTwo .line {
height: 0.769230769230769px;
}
.craneTwo .lineThree {
width: 0.714285714285714px;
-webkit-animation-delay: 3s;
animation-delay: 3s;
}
.craneTwo .cabin,
.craneTwo .arm,
.craneTwo .picker,
.craneTwo .weight {
-webkit-animation-delay: 3s;
animation-delay: 3s;
}
.craneThree {
width: 130px;
height: 84.9673202614379px;
left: 60%;
z-index: -1;
}
.craneThree div {
border: solid 1px #ff6347;
}
.craneThree .line {
height: 0.5px;
}
.craneThree .lineThree {
width: 0.5px;
-webkit-animation-delay: 1.5s;
animation-delay: 1.5s;
}
.craneThree .brickThree {
bottom: 5%;
}
.craneThree .brickOne,
.craneThree .brickTwo {
bottom: 0;
}
.craneThree .cabin,
.craneThree .arm,
.craneThree .picker,
.craneThree .weight {
-webkit-animation-delay: 1.5s;
animation-delay: 1.5s;
}
.crane {
perspective: 600px;
}
.lineOne {
transform-origin: right 0;
-webkit-animation: moveLineOne 12s infinite alternate;
animation: moveLineOne 12s infinite alternate;
}
.lineTwo {
transform-origin: top left;
-webkit-animation: moveLineTwo 12s infinite alternate;
animation: moveLineTwo 12s infinite alternate;
}
.lineThree {
transform-origin: right center;
-webkit-animation: moveLineThree 12s ease-in-out infinite alternate;
animation: moveLineThree 12s ease-in-out infinite alternate;
}
.cabin,
.arm,
.picker {
transform-origin: 80% center;
-webkit-animation: moveCrane 12s infinite alternate;
animation: moveCrane 12s infinite alternate;
}
.weight {
transform-origin: 0 center;
-webkit-animation: moveWeight 12s infinite alternate;
animation: moveWeight 12s infinite alternate;
}
html {
-ms-text-size-adjust: 100%;
-webkit-text-size-adjust: 100%;
-webkit-tap-highlight-color: transparent;
}
html,
body {
height: 100%;
}
* {
box-sizing: border-box;
}
body {
background: linear-gradient(to top, #ffa191, #ffc247);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-shadow: 1px 1px 1px rgba(0,0,0,0.004);
}
#content {
height: 100%;
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-family: Ubuntu;
color: #fff;
}
#content h1,
#content p {
margin: -8rem 0 0 1rem;
}
#content p {
margin-top: 0.5rem;
}
#license {
position: absolute;
bottom: 0;
right: 5px;
}
@-webkit-keyframes moveCrane {
0%, 20% {
transform: rotateY(0);
}
70%, 100% {
transform: rotateY(45deg);
}
}
@keyframes moveCrane {
0%, 20% {
transform: rotateY(0);
}
70%, 100% {
transform: rotateY(45deg);
}
}
@-webkit-keyframes moveWeight {
0%, 20% {
transform: rotateY(0) translateX(0);
}
70%, 100% {
transform: rotateY(45deg) translateX(-50%);
}
}
@keyframes moveWeight {
0%, 20% {
transform: rotateY(0) translateX(0);
}
70%, 100% {
transform: rotateY(45deg) translateX(-50%);
}
}
@-webkit-keyframes moveLineOne {
0%, 20% {
transform: rotateY(0) rotateZ(-10deg);
}
70%, 100% {
transform: rotateY(45deg) rotateZ(-10deg);
}
}
@keyframes moveLineOne {
0%, 20% {
transform: rotateY(0) rotateZ(-10deg);
}
70%, 100% {
transform: rotateY(45deg) rotateZ(-10deg);
}
}
@-webkit-keyframes moveLineTwo {
0%, 20% {
transform: rotateY(0) rotateZ(29deg);
}
70%, 100% {
transform: rotateY(15deg) rotateZ(29deg);
}
}
@keyframes moveLineTwo {
0%, 20% {
transform: rotateY(0) rotateZ(29deg);
}
70%, 100% {
transform: rotateY(15deg) rotateZ(29deg);
}
}
@-webkit-keyframes moveLineThree {
0% {
transform: translate(0, 0);
}
20% {
transform: translate(2500%, -18%);
}
60% {
transform: translate(11000%, -25%);
}
70% {
transform: translate(9100%, -25%);
height: 30%;
}
90%, 100% {
transform: translate(9100%, -15%);
height: 80%;
}
}
@keyframes moveLineThree {
0% {
transform: translate(0, 0);
}
20% {
transform: translate(2500%, -18%);
}
60% {
transform: translate(11000%, -25%);
}
70% {
transform: translate(9100%, -25%);
height: 30%;
}
90%, 100% {
transform: translate(9100%, -15%);
height: 80%;
}
}
// end of lunch hall construction
.full-ht{
height: 100vh;
width: 100%;
z-index:2;
transform: scale(.6);
transition: transform 3s ease;
transform-origin: bottom center;
}
.rel{
position: relative;
}
.f-ac-jc{
display: flex;
align-items: center;
justify-content: center;
}
.f{
display: flex;
}
.if{
display: inline-flex;
}
.f-ac{
align-items: center;
}
.f-jc{
justify-content: center;
}
.c-gls{
-webkit-clip-path: polygon(0 0, 100% 0, 99% 100%, 1% 100%);
clip-path: polygon(0 0, 100% 0, 99% 100%, 1% 100%);
}
.zb-outer{
display: flex;
flex-direction: column;
justify-content: flex-end;
max-width: 750px;
width: 100%;
height: 100%;
position: absolute;
left: 20%;
bottom: 0;
.base-grd{
position: relative;
width: 100%;
min-height: 40px;
background: #4a4848;
border-radius: 50%;
top: -20px;
left: 50%;
z-index: -2;
box-shadow: inset 0 0 10px 1px #fbfbfb;
border: 5px solid #333;
perspective: 400px;
transform: rotateX(20deg) translateX(-50%);
transform-origin: center;
animation: base-grd .4s 1 cubic-bezier(0.37, -0.1, 0.81, 2.95);
&:before{
content: "";
position: absolute;
left: -5px;
right: 0;
top: -10px;
width: 100%;
height: 40px;
border: 5px solid #ccc;
border-radius: 50%;
}
&:after{
content: "";
position: absolute;
left: -5px;
right: 0;
top: -7px;
width: 100%;
height: 40px;
border: 5px solid #333;
border-radius: 50%;
}
}
@keyframes base-grd{
from{
width: 0;
}
to{
width: 100%;
}
}
.zb-base{
position: relative;
display: flex;
align-self: center;
justify-content: space-between;
width: calc(100% - 340px);
clip-path: polygon(0 0, 100% 0, 99% 100%, 1% 100%);
>span{
display: inline-block;
width: 30px;
height: 65px;
background: #b3b3b3;
box-shadow: inset 2px -1px 14px 4px #333;
border: 2px solid #484848;
border-radius: 2px;
animation: pillar 0.4s 1 cubic-bezier(0.37, -0.1, 0.81, 2.95);
animation-delay: .5s;
}
@keyframes pillar{
from{
height: 0px;
}
to{
height: 65px;
}
}
.zb-entrance{
position: absolute;
left: 50%;
transform: translateX(-50%);
top: 0;
width: 220px;
height: 100%;
background: #8d8d8d;
border-bottom-left-radius: 6px;
border-bottom-right-radius: 6px;
z-index: -1;
}
.left-base{
perspective: 400px;
transform: rotateZ(-3deg);
height: 70px;
margin-top: -5px;
position: relative;
z-index: -1;
}
.right-base{
perspective: 400px;
transform: rotateZ(3deg);
height: 70px;
margin-top: -5px;
position: relative;
z-index: -1;
}
}
.zb-flrs{
display: flex;
align-items: center;
flex-direction: column;
animation: wing-roof-6-move 500ms 70ms cubic-bezier(0.1, 0, 0.3, 1);
animation-delay: 1s;
}
.f1{
width: calc(100% - 400px);
}
.f2{
width: calc(100% - 380px);
}
.f3{
width: calc(100% - 360px);
}
.f4{
width: calc(100% - 340px);
}
.f5{
width: calc(100% - 320px);
}
.f6{
width: calc(100% - 300px);
}
.f7{
width: calc(100% - 280px);
}
.f8{
width: calc(100% - 260px);
}
.f9{
width: calc(100% - 240px);
}
.f10{
width: calc(100% - 220px);
}
.zb-flr{
display: flex;
justify-content: space-between;
position: relative;
background: #403f3f;
padding: 2px 1px 1px;
perspective: 400px ;
transform: rotateX(-8deg);
margin-bottom: -1px;
&.last-flr{
height: 80px;
span{
height: 100%;
background: linear-gradient(45deg, #00a2ef, #63c7ef);
}
}
.op5{
opacity: .5;
}
.gls-a{
position: relative;
&:before{
content: "";
position: absolute;
width: 100%;
height: 25%;
background: #0462b3;
bottom: 0;
}
}
.gls-b{
position: relative;
&:before{
content: "";
position: absolute;
width: 100%;
height: 50%;
background: #0462b3;
bottom: 0;
}
}
.gls-c{
position: relative;
&:before{
content: "";
position: absolute;
width: 100%;
height: 75%;
background: #0462b3;
bottom: 0;
}
}
.left-br{
width: 1px;
height: 100%;
display: inline-block;
background: #333;
transform: rotate(-4deg);
position: absolute;
left: 1px;
top: 0;
z-index: 1;
}
.right-br{
width: 1px;
height: 100%;
display: inline-block;
background: #333;
transform: rotate(4deg);
position: absolute;
right: 1px;
top: 0;
z-index: 1;
}
>span{
display: inline-block;
width: 20px;
height: 50px;
background: #00a2ef;
position: relative;
transition: all ease 1s;
animation: wing-roof-6-move 500ms 70ms cubic-bezier(0.1, 0, 0.3, 1);
&:after{
content: "";
position: absolute;
left: 50%;
top: 0;
width: 1px;
height: 100%;
background: rgba(68, 67, 67, 0.26);
}
}
.gls-open-right{
perspective: 400px;
transform: rotateX(45deg) translate(12px, -13px);
border: 1px solid #545454;
z-index: 1;
}
.gls-open-left{
perspective: 400px;
transform: rotateX(45deg) translate(-10px, -13px);
border: 1px solid #545454;
z-index: 1;
}
.gls-balcony{
perspective: 400px;
transform: rotateX(-2deg) translate(0, 25px);
z-index: 1;
&:before{
content: "";
width: 100%;
height: 25px;
position: absolute;
top: -50%;
left: 0;
background: #868990;
box-shadow: 5px 0px 0px 0px #868990;
transition: all ease 1s;
}
&:after{
background: none;
}
i{
}
}
}
}
//sparks
.house-sparkle {
position: absolute;
height: 60px;
width: 60px;
border-radius: 50%;
border: 5px solid #224889;
top: 0;
display: none;
z-index: 1;
transform: translate(-50%,-50%);
&.spark-left{
left:0;
right: unset;
}
&.spark-right{
right:0;
left: unset;
}
}
.house-sparkle:before {
top: 0;
left: 0;
background-color: #65EBFF;
}
.house-sparkle:after {
bottom: 0;
right: 0;
background-color: #224889;
}
.house-sparkle:before, .house-sparkle:after,
.house-sparkle-dots:before,
.house-sparkle-dots:after {
position: absolute;
height: 10px;
width: 10px;
border-radius: 50%;
}
.house-sparkle-dots {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.house-sparkle-dots:before {
bottom: -15px;
right: 40px;
background-color: #A6CFFF;
}
@keyframes sparkle-6 {
from {
-webkit-transform: scale(1);
transform: scale(1);
opacity: 1;
}
to {
-webkit-transform: scale(2);
transform: scale(2);
opacity: 0;
border-width: 0;
}
}
@keyframes sparkle-dots-6 {
from {
-webkit-transform: scale(1);
transform: scale(1);
}
to {
-webkit-transform: scale(0);
transform: scale(0);
}
}
.house-sparkle {
-webkit-animation: sparkle-6 500ms cubic-bezier(0.1, 0, 0.3, 1) both;
animation: sparkle-6 500ms cubic-bezier(0.1, 0, 0.3, 1) both;
}
.house-sparkle:before, .house-sparkle:after,
.house-sparkle-dots:before,
.house-sparkle-dots:after {
-webkit-animation: sparkle-dots-6 500ms cubic-bezier(0.1, 0, 0.3, 1) both;
animation: sparkle-dots-6 500ms cubic-bezier(0.1, 0, 0.3, 1) both;
}
@keyframes sparkle-5 {
from {
-webkit-transform: scale(1);
transform: scale(1);
opacity: 1;
}
to {
-webkit-transform: scale(2);
transform: scale(2);
opacity: 0;
border-width: 0;
}
}
@keyframes sparkle-dots-5 {
from {
-webkit-transform: scale(1);
transform: scale(1);
}
to {
-webkit-transform: scale(0);
transform: scale(0);
}
}
.house-sparkle {
-webkit-animation: sparkle-5 500ms cubic-bezier(0.1, 0, 0.3, 1) both;
animation: sparkle-5 500ms cubic-bezier(0.1, 0, 0.3, 1) both;
}
.house-sparkle:before, .house-sparkle:after,
.house-sparkle-dots:before,
.house-sparkle-dots:after {
-webkit-animation: sparkle-dots-5 500ms cubic-bezier(0.1, 0, 0.3, 1) both;
animation: sparkle-dots-5 500ms cubic-bezier(0.1, 0, 0.3, 1) both;
}
@-webkit-keyframes sparkle-4 {
from {
-webkit-transform: scale(1);
transform: scale(1);
opacity: 1;
}
to {
-webkit-transform: scale(2);
transform: scale(2);
opacity: 0;
border-width: 0;
}
}
@keyframes sparkle-4 {
from {
-webkit-transform: scale(1);
transform: scale(1);
opacity: 1;
}
to {
-webkit-transform: scale(2);
transform: scale(2);
opacity: 0;
border-width: 0;
}
}
@-webkit-keyframes sparkle-dots-4 {
from {
-webkit-transform: scale(1);
transform: scale(1);
}
to {
-webkit-transform: scale(0);
transform: scale(0);
}
}
@keyframes sparkle-dots-4 {
from {
-webkit-transform: scale(1);
transform: scale(1);
}
to {
-webkit-transform: scale(0);
transform: scale(0);
}
}
.house-sparkle {
-webkit-animation: sparkle-4 500ms cubic-bezier(0.1, 0, 0.3, 1) both;
animation: sparkle-4 500ms cubic-bezier(0.1, 0, 0.3, 1) both;
}
.house-sparkle:before, .house-sparkle:after,
.house-sparkle-dots:before,
.house-sparkle-dots:after {
-webkit-animation: sparkle-dots-4 500ms cubic-bezier(0.1, 0, 0.3, 1) both;
animation: sparkle-dots-4 500ms cubic-bezier(0.1, 0, 0.3, 1) both;
}
@keyframes sparkle-3 {
from {
-webkit-transform: scale(1);
transform: scale(1);
opacity: 1;
}
to {
-webkit-transform: scale(2);
transform: scale(2);
opacity: 0;
border-width: 0;
}
}
@keyframes sparkle-dots-3 {
from {
-webkit-transform: scale(1);
transform: scale(1);
}
to {
-webkit-transform: scale(0);
transform: scale(0);
}
}
.house-sparkle {
-webkit-animation: sparkle-3 500ms cubic-bezier(0.1, 0, 0.3, 1) both;
animation: sparkle-3 500ms cubic-bezier(0.1, 0, 0.3, 1) both;
}
.house-sparkle:before, .house-sparkle:after,
.house-sparkle-dots:before,
.house-sparkle-dots:after {
-webkit-animation: sparkle-dots-3 500ms cubic-bezier(0.1, 0, 0.3, 1) both;
animation: sparkle-dots-3 500ms cubic-bezier(0.1, 0, 0.3, 1) both;
}
// animations
@keyframes wing-roof-6-move {
0% {
display: none!important;
}
50%{
display: none!important;
}
51%{
display: flex;
-webkit-transform-origin: bottom left;
transform-origin: bottom left;
}
65% {
-webkit-transform: translateY(-30px) rotate(-5deg);
transform: translateY(-30px) rotate(-5deg);
}
75% {
-webkit-transform-origin: bottom left;
transform-origin: bottom left;
-webkit-transform: none;
transform: none;
}
76% {
-webkit-transform-origin: bottom right;
transform-origin: bottom right;
}
85% {
-webkit-transform-origin: bottom right;
transform-origin: bottom right;
-webkit-transform: translateY(-10px) rotate(2deg);
transform: translateY(-10px) rotate(2deg);
}
100% {
-webkit-transform-origin: bottom right;
transform-origin: bottom right;
-webkit-transform: none;
transform: none;
}
}
@keyframes wing-roof-5-move {
from {
-webkit-transform-origin: bottom right;
transform-origin: bottom right;
}
25% {
-webkit-transform: translateY(-20px) rotate(10deg);
transform: translateY(-20px) rotate(10deg);
}
50% {
-webkit-transform-origin: bottom right;
transform-origin: bottom right;
-webkit-transform: none;
transform: none;
}
51% {
-webkit-transform-origin: bottom left;
transform-origin: bottom left;
}
75% {
-webkit-transform-origin: bottom left;
transform-origin: bottom left;
-webkit-transform: translateY(-10px) rotate(-2deg);
transform: translateY(-10px) rotate(-2deg);
}
to {
-webkit-transform-origin: bottom left;
transform-origin: bottom left;
-webkit-transform: none;
transform: none;
}
}
@keyframes wing-roof-4-move {
from {
-webkit-transform-origin: bottom left;
transform-origin: bottom left;
}
25% {
-webkit-transform: translateY(-15px) rotate(-10deg);
transform: translateY(-15px) rotate(-10deg);
}
50% {
-webkit-transform-origin: bottom left;
transform-origin: bottom left;
-webkit-transform: none;
transform: none;
}
51% {
-webkit-transform-origin: bottom right;
transform-origin: bottom right;
}
75% {
-webkit-transform-origin: bottom right;
transform-origin: bottom right;
-webkit-transform: translateY(-10px) rotate(2deg);
transform: translateY(-10px) rotate(2deg);
}
to {
-webkit-transform-origin: bottom right;
transform-origin: bottom right;
-webkit-transform: none;
transform: none;
}
}
@keyframes wing-roof-3-move {
from {
-webkit-transform-origin: bottom right;
transform-origin: bottom right;
}
25% {
-webkit-transform: translateY(-20px) rotate(10deg);
transform: translateY(-20px) rotate(10deg);
}
50% {
-webkit-transform-origin: bottom right;
transform-origin: bottom right;
-webkit-transform: none;
transform: none;
}
51% {
-webkit-transform-origin: bottom left;
transform-origin: bottom left;
}
75% {
-webkit-transform-origin: bottom left;
transform-origin: bottom left;
-webkit-transform: translateY(-10px) rotate(-2deg);
transform: translateY(-10px) rotate(-2deg);
}
to {
-webkit-transform-origin: bottom left;
transform-origin: bottom left;
-webkit-transform: none;
transform: none;
}
}
@keyframes front-roof-6-move {
from {
-webkit-transform-origin: bottom right;
transform-origin: bottom right;
}
25% {
-webkit-transform: translateY(-5px) rotate(5deg);
transform: translateY(-5px) rotate(5deg);
}
50% {
-webkit-transform-origin: bottom right;
transform-origin: bottom right;
-webkit-transform: none;
transform: none;
}
51% {
-webkit-transform-origin: bottom left;
transform-origin: bottom left;
}
75% {
-webkit-transform-origin: bottom left;
transform-origin: bottom left;
-webkit-transform: translateY(-2px) rotate(-1deg);
transform: translateY(-2px) rotate(-1deg);
}
to {
-webkit-transform-origin: bottom left;
transform-origin: bottom left;
-webkit-transform: none;
transform: none;
}
}
@keyframes front-roof-5-move {
from {
-webkit-transform-origin: bottom left;
transform-origin: bottom left;
}
25% {
-webkit-transform: translateY(-10px) rotate(-5deg);
transform: translateY(-10px) rotate(-5deg);
}
50% {
-webkit-transform-origin: bottom left;
transform-origin: bottom left;
-webkit-transform: none;
transform: none;
}
51% {
-webkit-transform-origin: bottom right;
transform-origin: bottom right;
}
75% {
-webkit-transform-origin: bottom right;
transform-origin: bottom right;
-webkit-transform: translateY(-5px) rotate(1deg);
transform: translateY(-5px) rotate(1deg);
}
to {
-webkit-transform-origin: bottom right;
transform-origin: bottom right;
-webkit-transform: none;
transform: none;
}
}
@keyframes front-roof-4-move {
from {
-webkit-transform-origin: bottom right;
transform-origin: bottom right;
}
25% {
-webkit-transform: translateY(-5px) rotate(10deg);
transform: translateY(-5px) rotate(10deg);
}
50% {
-webkit-transform-origin: bottom right;
transform-origin: bottom right;
-webkit-transform: none;
transform: none;
}
51% {
-webkit-transform-origin: bottom left;
transform-origin: bottom left;
}
75% {
-webkit-transform-origin: bottom left;
transform-origin: bottom left;
-webkit-transform: translateY(-2px) rotate(-2deg);
transform: translateY(-2px) rotate(-2deg);
}
to {
-webkit-transform-origin: bottom left;
transform-origin: bottom left;
-webkit-transform: none;
transform: none;
}
}
@keyframes front-roof-3-move {
from {
-webkit-transform-origin: bottom right;
transform-origin: bottom right;
}
25% {
-webkit-transform: translateY(-10px) rotate(-5deg);
transform: translateY(-10px) rotate(-5deg);
}
50% {
-webkit-transform-origin: bottom right;
transform-origin: bottom right;
-webkit-transform: none;
transform: none;
}
51% {
-webkit-transform-origin: bottom left;
transform-origin: bottom left;
}
75% {
-webkit-transform-origin: bottom left;
transform-origin: bottom left;
-webkit-transform: translateY(-5px) rotate(2deg);
transform: translateY(-5px) rotate(2deg);
}
to {
-webkit-transform-origin: bottom left;
transform-origin: bottom left;
-webkit-transform: none;
transform: none;
}
}
@keyframes house-6-move {
from {
-webkit-transform-origin: bottom center;
transform-origin: bottom center;
}
25% {
-webkit-transform: scale(0.95, 1.05);
transform: scale(0.95, 1.05);
}
50% {
-webkit-transform-origin: bottom center;
transform-origin: bottom center;
-webkit-transform: none;
transform: none;
}
51% {
-webkit-transform-origin: bottom center;
transform-origin: bottom center;
}
75% {
-webkit-transform-origin: bottom center;
transform-origin: bottom center;
-webkit-transform: scale(0.98, 1.02);
transform: scale(0.98, 1.02);
}
to {
-webkit-transform-origin: bottom center;
transform-origin: bottom center;
-webkit-transform: none;
transform: none;
}
}
@keyframes house-5-move {
from {
-webkit-transform-origin: bottom center;
transform-origin: bottom center;
}
25% {
-webkit-transform: scale(0.9, 1.2);
transform: scale(0.9, 1.2);
}
50% {
-webkit-transform-origin: bottom center;
transform-origin: bottom center;
-webkit-transform: none;
transform: none;
}
51% {
-webkit-transform-origin: bottom center;
transform-origin: bottom center;
}
75% {
-webkit-transform-origin: bottom center;
transform-origin: bottom center;
-webkit-transform: scale(0.95, 1.05);
transform: scale(0.95, 1.05);
}
to {
-webkit-transform-origin: bottom center;
transform-origin: bottom center;
-webkit-transform: none;
transform: none;
}
}
@keyframes house-4-move {
from {
-webkit-transform-origin: bottom center;
transform-origin: bottom center;
}
25% {
-webkit-transform: scale(0.9, 1.2);
transform: scale(0.9, 1.2);
}
50% {
-webkit-transform-origin: bottom center;
transform-origin: bottom center;
-webkit-transform: none;
transform: none;
}
51% {
-webkit-transform-origin: bottom center;
transform-origin: bottom center;
}
75% {
-webkit-transform-origin: bottom center;
transform-origin: bottom center;
-webkit-transform: scale(0.95, 1.05);
transform: scale(0.95, 1.05);
}
to {
-webkit-transform-origin: bottom center;
transform-origin: bottom center;
-webkit-transform: none;
transform: none;
}
}
@keyframes house-3-move {
from {
-webkit-transform-origin: bottom center;
transform-origin: bottom center;
}
25% {
-webkit-transform: scale(0.9, 1.2);
transform: scale(0.9, 1.2);
}
50% {
-webkit-transform-origin: bottom center;
transform-origin: bottom center;
-webkit-transform: none;
transform: none;
}
51% {
-webkit-transform-origin: bottom center;
transform-origin: bottom center;
}
75% {
-webkit-transform-origin: bottom center;
transform-origin: bottom center;
-webkit-transform: scale(0.95, 1.05);
transform: scale(0.95, 1.05);
}
to {
-webkit-transform-origin: bottom center;
transform-origin: bottom center;
-webkit-transform: none;
transform: none;
}
}
@keyframes facade-6-move {
from {
-webkit-transform-origin: bottom center;
transform-origin: bottom center;
}
25% {
-webkit-transform: scale(0.95, 1.05);
transform: scale(0.95, 1.05);
}
50% {
-webkit-transform-origin: bottom center;
transform-origin: bottom center;
-webkit-transform: none;
transform: none;
}
51% {
-webkit-transform-origin: bottom center;
transform-origin: bottom center;
}
75% {
-webkit-transform-origin: bottom center;
transform-origin: bottom center;
-webkit-transform: scale(0.98, 1.02);
transform: scale(0.98, 1.02);
}
to {
-webkit-transform-origin: bottom center;
transform-origin: bottom center;
-webkit-transform: none;
transform: none;
}
}
@keyframes facade-5-move {
from {
-webkit-transform-origin: bottom center;
transform-origin: bottom center;
}
25% {
-webkit-transform: scale(0.9, 1.05);
transform: scale(0.9, 1.05);
}
50% {
-webkit-transform-origin: bottom center;
transform-origin: bottom center;
-webkit-transform: none;
transform: none;
}
51% {
-webkit-transform-origin: bottom center;
transform-origin: bottom center;
}
75% {
-webkit-transform-origin: bottom center;
transform-origin: bottom center;
-webkit-transform: scale(0.95, 1.02);
transform: scale(0.95, 1.02);
}
to {
-webkit-transform-origin: bottom center;
transform-origin: bottom center;
-webkit-transform: none;
transform: none;
}
}
@keyframes facade-4-move {
from {
-webkit-transform-origin: bottom center;
transform-origin: bottom center;
}
25% {
-webkit-transform: scale(0.9, 1.05);
transform: scale(0.9, 1.05);
}
50% {
-webkit-transform-origin: bottom center;
transform-origin: bottom center;
-webkit-transform: none;
transform: none;
}
51% {
-webkit-transform-origin: bottom center;
transform-origin: bottom center;
}
75% {
-webkit-transform-origin: bottom center;
transform-origin: bottom center;
-webkit-transform: scale(0.95, 1.02);
transform: scale(0.95, 1.02);
}
to {
-webkit-transform-origin: bottom center;
transform-origin: bottom center;
-webkit-transform: none;
transform: none;
}
}
@keyframes facade-3-move {
from {
-webkit-transform-origin: bottom center;
transform-origin: bottom center;
}
25% {
-webkit-transform: scale(0.9, 1.05);
transform: scale(0.9, 1.05);
}
50% {
-webkit-transform-origin: bottom center;
transform-origin: bottom center;
-webkit-transform: none;
transform: none;
}
51% {
-webkit-transform-origin: bottom center;
transform-origin: bottom center;
}
75% {
-webkit-transform-origin: bottom center;
transform-origin: bottom center;
-webkit-transform: scale(0.95, 1.02);
transform: scale(0.95, 1.02);
}
to {
-webkit-transform-origin: bottom center;
transform-origin: bottom center;
-webkit-transform: none;
transform: none;
}
}
@keyframes chimney-6-move {
from {
-webkit-transform-origin: bottom center;
transform-origin: bottom center;
}
25% {
-webkit-transform: rotate(10deg) translateY(-15px);
transform: rotate(10deg) translateY(-15px);
}
50% {
-webkit-transform-origin: bottom center;
transform-origin: bottom center;
-webkit-transform: none;
transform: none;
}
51% {
-webkit-transform-origin: bottom center;
transform-origin: bottom center;
}
75% {
-webkit-transform-origin: bottom center;
transform-origin: bottom center;
-webkit-transform: rotate(-5deg) translateY(-5px);
transform: rotate(-5deg) translateY(-5px);
}
to {
-webkit-transform-origin: bottom center;
transform-origin: bottom center;
-webkit-transform: none;
transform: none;
}
}
@keyframes chimney-5-move {
from {
-webkit-transform-origin: bottom center;
transform-origin: bottom center;
}
25% {
-webkit-transform: rotate(-10deg) translateY(-15px);
transform: rotate(-10deg) translateY(-15px);
}
50% {
-webkit-transform-origin: bottom center;
transform-origin: bottom center;
-webkit-transform: none;
transform: none;
}
51% {
-webkit-transform-origin: bottom center;
transform-origin: bottom center;
}
75% {
-webkit-transform-origin: bottom center;
transform-origin: bottom center;
-webkit-transform: rotate(5deg) translateY(-5px);
transform: rotate(5deg) translateY(-5px);
}
to {
-webkit-transform-origin: bottom center;
transform-origin: bottom center;
-webkit-transform: none;
transform: none;
}
}
@keyframes chimney-4-move {
from {
-webkit-transform-origin: bottom center;
transform-origin: bottom center;
}
25% {
-webkit-transform: rotate(10deg) translateY(-15px);
transform: rotate(10deg) translateY(-15px);
}
50% {
-webkit-transform-origin: bottom center;
transform-origin: bottom center;
-webkit-transform: none;
transform: none;
}
51% {
-webkit-transform-origin: bottom center;
transform-origin: bottom center;
}
75% {
-webkit-transform-origin: bottom center;
transform-origin: bottom center;
-webkit-transform: rotate(-5deg) translateY(-5px);
transform: rotate(-5deg) translateY(-5px);
}
to {
-webkit-transform-origin: bottom center;
transform-origin: bottom center;
-webkit-transform: none;
transform: none;
}
}
@keyframes chimney-3-move {
from {
-webkit-transform-origin: bottom center;
transform-origin: bottom center;
}
25% {
-webkit-transform: rotate(-10deg) translateY(-15px);
transform: rotate(-10deg) translateY(-15px);
}
50% {
-webkit-transform-origin: bottom center;
transform-origin: bottom center;
-webkit-transform: none;
transform: none;
}
51% {
-webkit-transform-origin: bottom center;
transform-origin: bottom center;
}
75% {
-webkit-transform-origin: bottom center;
transform-origin: bottom center;
-webkit-transform: rotate(5deg) translateY(-5px);
transform: rotate(5deg) translateY(-5px);
}
to {
-webkit-transform-origin: bottom center;
transform-origin: bottom center;
-webkit-transform: none;
transform: none;
}
}
// lake view
$color-primary: #4d5158;
$color-roof: #58697d;
$color-ledge: #808286;
$color-window-left: #68a5d0;
$color-window-right: #3ca2ea;
$color-window: linear-gradient(to right, $color-window-left, $color-window-left 49.9%, $color-window-right 50%, $color-window-right);
$color-shadow: #E1EAFF;
$duration: 500ms;
$delay: 70ms;
$easing: cubic-bezier(.1, 0, .3, 1);
$parts: (
6: (
wings: 425px,
front: 150px,
),
5: (
wings: 355px,
front: 150px,
),
4: (
wings: 300px,
front: 125px,
),
3: (
wings: 240px,
front: 150px,
),
);
@each $rooms, $dimensions in $parts {
[data-rooms="#{$rooms}"] {
@each $part, $width in $dimensions {
.house-#{$part} {
width: $width;
left: calc(50% - #{$width / 2});
}
#{--#{$part}-width}: $width;
}
}
}
.house {
height: 350px;
display: flex;
flex-direction: column;
justify-content: flex-end;
position: absolute;
bottom: 90px;
transform: scale(.5);
transform-origin: bottom center;
&.north-plaza{
width: 40%;
right: 3%;
.house-wings{
width: 100%;
left: 0;
}
}
&.south-plaza{
left: -2%;
right: unset;
width: 70%;
.house-roof:before {
transform: skewX(
19deg);
}
.house-door{
width: 70%;
height: 75px;
left: 50%;
transform: translateX(-50%);
bottom: 10px;
}
.sp-left{
width: 110px;
height: 450px;
position: absolute;
left: -100px;
overflow: hidden;
&:before{
position: absolute;
top: 0;
right: 27px;
width: 55px;
height: 70px;
border: 5px solid #4d5158;
transform: skewX(38deg);
background: #ddd;
z-index: 1;
}
&:after{
width: 52px;
height: 380px;
border: 5px solid #4d5158;
right: 3px;
bottom: 2px;
z-index:1;
position: absolute;
background: #ccc;
}
.spleft-wall {
width: 55px;
height: 450px;
background-color: #7d888c;
opacity: 1;
background-image: linear-gradient(#9e9e9e 2px, transparent 2px), linear-gradient(90deg, #9e9e9e 2px, transparent 2px), linear-gradient(#9e9e9e 1px, transparent 1px), linear-gradient(90deg, #9e9e9e 1px, #7d888c 1px);
background-size: 50px 50px, 50px 50px, 10px 10px, 10px 10px;
background-position: -2px -2px, -2px -2px, -1px -1px, -1px -1px;
border-left: 5px solid #333;
}
}
.sp-right{
width: 110px;
height: 450px;
position: absolute;
right: -100px;
overflow: hidden;
&:before{
position: absolute;
top: 0;
right: 27px;
width: 55px;
height: 70px;
border: 5px solid #4d5158;
transform: skewX(-38deg);
background: #ddd;
z-index: 1;
}
&:after{
width: 52px;
height: 380px;
border: 5px solid #4d5158;
left: 3px;
bottom: 2px;
z-index:1;
position: absolute;
background: #ccc;
}
.spright-wall {
width: 55px;
height: 450px;
background-color: #7d888c;
opacity: 1;
background-image: linear-gradient(#9e9e9e 2px, transparent 2px), linear-gradient(90deg, #9e9e9e 2px, transparent 2px), linear-gradient(#9e9e9e 1px, transparent 1px), linear-gradient(90deg, #9e9e9e 1px, #7d888c 1px);
background-size: 50px 50px, 50px 50px, 10px 10px, 10px 10px;
background-position: -2px -2px, -2px -2px, -1px -1px, -1px -1px;
border-right: 5px solid #333;
left: 55px;
}
}
.sp-head{
position: absolute;
height: 140px;
width: 190px;
left: calc(50% - 100px);
top: -28px;
.sp-bowl{
position: absolute;
width: 90%;
height: 110px;
top: -110px;
left: 50%;
transform: translateX(-50%);
background: #607d8b;
z-index: -1;
background-image: radial-gradient( ellipse farthest-corner at 10px 10px , #5a5a5a, #5a5a5a 50%, #607d8b 50%);
background-size: 10px 10px;
border-top-left-radius: 100%;
border-top-right-radius: 100%;
border: 5px solid #37474f;
}
.sp-head-one{
border-top: 10px solid #4D5158;
border-radius: 10px;
width: 100%;
height: 100%;
left: 50%;
transform: translateX(-50%);
background-color: rgba(255,255,255,0);
background-size: 20px 20px;
background-image: repeating-linear-gradient(to right, #fafafa, #4d5158 10px, #607d8b 10px, #607d8b);
}
.sp-head-two{
border-top: 10px solid #4D5158;
border-radius: 10px;
width: 90%;
height: 40%;
left: 50%;
bottom: 195px;
transform: translateX(-50%);
background-color: rgba(255,255,255,0);
background-size: 14px 14px;
background-image: repeating-linear-gradient(to right, #9e9e9e, #4d5158 7px, #333 7px, #333);
}
}
.ground-flr{
.house-left-wing,.house-right-wing{
background-color: #4c646f;
background-image: linear-gradient(to right, #9e9e9e, #9e9e9e 6px, #4c5b62 10px, #4c646f );
background-size: 20px 100%;
border-top: 5px dotted #4d5158;
border-bottom: 10px dotted #4d5158;
}
}
.house-stairs{
width: 285px;
bottom: -30px;
left: 50%;
transform: translateX(-50%);
}
.house-wings{
width: 100%;
// min-width: 700px;
// max-width: 800px;
left: 0;
.house-left-wing{
transform:rotateY(20deg) translateZ(-30px);
}
.house-right-wing{
transform:rotateY(-20deg) translateZ(-30px);
}
}
.house-front{
height: 150px;
width: 200px;
left: calc(50% - 100px);
}
.house-gable{
position: absolute;
top: -20px;
}
.house-facade:before {
transform: skewY(
-20deg
);
}
.house-facade:after {
transform: skewY(
20deg
);
}
}
}
.house-wings.first-flr{
&:after{
display: none;
}
}
.house-label {
text-transform: uppercase;
font-weight: bold;
padding-left: calc(20px + 1ch);
font-size: 25px;
color: $color-primary;
margin: 30px 0 5px;
font-family: Arial Rounded MT Bold, Helvetica Neue, Helvetica, sans serif;
&:before, &:after {
position: absolute;
text-align: right;
left: 0;
top: 0;
padding: 0 .5ch;
will-change: transform;
}
&:before {
content: attr(data-prev-rooms);
}
&:after {
content: attr(data-rooms);
}
@for $i from 6 through 3 {
&[data-rooms="#{$i}"][data-rooms-delta^="-"] {
&:before {
animation: prev-label-up-#{$i} $duration $easing both;
}
&:after {
animation: label-up-#{$i} $duration * 2 $easing both;
}
}
&[data-rooms="#{$i}"]:not([data-rooms-delta^="-"]) {
&:before {
animation: prev-label-down-#{$i} $duration $delay $easing both;
}
&:after {
animation: label-down-#{$i} $duration * 2 $delay $easing both;
}
}
@keyframes prev-label-up-#{$i} {
from {
transform: translateY(0);
opacity: 1;
}
to {
transform: translateY(-100%) scale(1.5);
opacity: 0;
}
}
@keyframes prev-label-down-#{$i} {
from {
transform: translateY(0);
opacity: 1;
}
to {
transform: translateY(100%) scale(1.5);
opacity: 0;
}
}
@keyframes label-up-#{$i} {
from {
transform: translateY(100%);
opacity: 0;
}
50% {
transform: translateY(0) scale(1.5);
opacity: 1;
}
to {
transform: translateY(0);
opacity: 1;
}
}
@keyframes label-down-#{$i} {
from {
transform: translateY(-100%);
opacity: 0;
}
50% {
transform: translateY(0) scale(1.5);
opacity: 1;
}
to {
transform: translateY(0);
opacity: 1;
}
}
}
}
.house-wings {
height: 125px;
&:before {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: #8e9eab;
border: 5px solid $color-primary;
box-shadow: inset 0 15px $color-shadow;
}
&:after {
position: absolute;
bottom: 0;
left: 0;
height: 5px;
width: 100%;
background-color: $color-primary;
transform: scaleX(1.2)
}
> .house-roof {
height: 65px;
width: calc(100% + 40px);
left: -20px;
border-bottom: 5px solid $color-primary;
position: absolute;
bottom: 100%;
&.north-plaza{
width: 100%;
left: 0;
&:after {
transform: skewX(-30deg);
}
}
&:before, &:after {
position: absolute;
height: 100%;
width: 50%;
background-color: $color-roof;
border: 5px solid $color-primary;
border-bottom: none;
}
&:before {
left: 0;
transform-origin: bottom left;
transform: skewX(-30deg);
border-right: none;
}
&:after {
right: 0;
transform-origin: bottom right;
transform: skewX(30deg);
border-left: none;
}
&.north-plaza{
&:after {
width: 100%;
border-top: 5px solid #4d5158;
}
}
.window-circle {
position: absolute;
bottom: -50px;
width: 60px;
height: 60px;
background: #8e9eab;
border: 7px solid #e1eaff;
border-bottom: none;
border-right: 0;
z-index: 1;
transform: rotate(45deg);
&.one{
left: 2%;
}
&.two{
left: 12%;
}
&.three{
left: 23%;
}
&.four{
left: 34%;
}
&.five{
right: 2%;
}
&.six{
right: 12%;
}
&.seven{
right: 23%;
}
&.eight{
right: 34%;
}
&:before{
position: absolute;
display: inline-block;
left: 20%;
bottom: 20%;
width: 30px;
height: 30px;
background: linear-gradient(to right, #56ccf2, #2f80ed);
border-radius: 50%;
border: 3px solid #333;
}
}
}
.house-ledge {
position: absolute;
bottom: -15px;
width: 100%;
height: 15px;
border: 5px solid $color-primary;
background-color: $color-ledge;
}
}
.house-facade {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
box-shadow: 15px 0 rgba(darken($color-shadow, 20%), 0.2);
&:before, &:after {
position: absolute;
height: 100%;
width: 50%;
background-color: #fff;
top: 0;
border-top: 5px solid $color-primary;
box-shadow: inset 0 calc(var(--front-width) / 6) $color-shadow;
}
&:before {
left: 0;
transform-origin: top left;
transform: skewY(-40deg);
border-left: 5px solid $color-primary;
}
&:after {
right: 0;
transform-origin: top right;
transform: skewY(40deg);
border-right: 5px solid $color-primary;
}
}
$wing-roof-moves: (
6: (
(origin: bottom left, transform: translateY(-10px) rotate(-5deg)),
(origin: bottom right, transform: translateY(-5px) rotate(2deg)),
),
5: (
(origin: bottom right, transform: translateY(-20px) rotate(10deg)),
(origin: bottom left, transform: translateY(-10px) rotate(-2deg)),
),
4: (
(origin: bottom left, transform: translateY(-15px) rotate(-10deg)),
(origin: bottom right, transform: translateY(-10px) rotate(2deg)),
),
3: (
(origin: bottom right, transform: translateY(-20px) rotate(10deg)),
(origin: bottom left, transform: translateY(-10px) rotate(-2deg)),
),
);
$front-roof-moves: (
6: (
(origin: bottom right, transform: translateY(-5px) rotate(5deg)),
(origin: bottom left, transform: translateY(-2px) rotate(-1deg)),
),
5: (
(origin: bottom left, transform: translateY(-10px) rotate(-5deg)),
(origin: bottom right, transform: translateY(-5px) rotate(1deg)),
),
4: (
(origin: bottom right, transform: translateY(-5px) rotate(10deg)),
(origin: bottom left, transform: translateY(-2px) rotate(-2deg)),
),
3: (
(origin: bottom right, transform: translateY(-10px) rotate(-5deg)),
(origin: bottom left, transform: translateY(-5px) rotate(2deg)),
),
);
$house-moves: (
6: (
(transform: scale(.95, 1.05)),
(transform: scale(.98, 1.02)),
),
5: (
(transform: scale(.9, 1.2)),
(transform: scale(.95, 1.05)),
),
4: (
(transform: scale(.9, 1.2)),
(transform: scale(.95, 1.05)),
),
3: (
(transform: scale(.9, 1.2)),
(transform: scale(.95, 1.05)),
),
);
$facade-moves: (
6: (
(transform: scale(.95, 1.05)),
(transform: scale(.98, 1.02)),
),
5: (
(transform: scale(.9, 1.05)),
(transform: scale(.95, 1.02)),
),
4: (
(transform: scale(.9, 1.05)),
(transform: scale(.95, 1.02)),
),
3: (
(transform: scale(.9, 1.05)),
(transform: scale(.95, 1.02)),
),
);
$chimney-moves: (
6: (
(transform: rotate(10deg) translateY(-15px)),
(transform: rotate(-5deg) translateY(-5px)),
),
5: (
(transform: rotate(-10deg) translateY(-15px)),
(transform: rotate(5deg) translateY(-5px)),
),
4: (
(transform: rotate(10deg) translateY(-15px)),
(transform: rotate(-5deg) translateY(-5px)),
),
3: (
(transform: rotate(-10deg) translateY(-15px)),
(transform: rotate(5deg) translateY(-5px)),
),
);
$move-parts: (
wing-roof: $wing-roof-moves,
front-roof: $front-roof-moves,
house: $house-moves,
facade: $facade-moves,
chimney: $chimney-moves,
);
@function either($a, $b) {
@return if($a, $a, $b);
}
@each $part, $move-config in $move-parts {
@each $rooms, $moves in $move-config {
$move-1: nth($moves, 1);
$move-2: nth($moves, 2);
@keyframes #{$part}-#{$rooms}-move {
from {
transform-origin: either(map-get($move-1, origin), bottom center);
}
25% {
transform: map-get($move-1, transform);
}
50% {
transform-origin: either(map-get($move-1, origin), bottom center);
transform: none;
}
51% {
transform-origin: either(map-get($move-2, origin), bottom center);
}
75% {
transform-origin: either(map-get($move-2, origin), bottom center);
transform: map-get($move-2, transform);
}
to {
transform-origin: either(map-get($move-2, origin), bottom center);
transform: none;
}
}
}
}
@for $i from 6 through 3 {
[data-rooms="#{$i}"] {
.house-wings > .house-roof {
animation: wing-roof-#{$i}-move $duration $delay $easing;
}
.house-front > .house-gable {
animation: front-roof-#{$i}-move $duration $delay $easing;
}
.house-wings:before,
.house-left-wing,
.house-right-wing {
animation: house-#{$i}-move $duration $delay $easing;
}
.house-facade,
.house-front .house-window,
.house-doorway {
animation: facade-#{$i}-move $duration $delay $easing;
}
.house-chimney {
animation: chimney-#{$i}-move $duration $delay $easing;
}
}
}
.house-front {
position: absolute;
bottom: 0;
height: 260px;
> .house-window {
width: 60px;
height: 75px;
position: absolute;
left: calc(50% - 30px);
top: -10px;
[data-rooms="4"] &,
[data-rooms="3"] & {
border-bottom-left-radius: 50% 40%;
border-bottom-right-radius: 50% 40%;
&:after {
display: none;
}
}
[data-rooms="4"]:not([data-prev-rooms="3"]) &,
[data-rooms="3"]:not([data-prev-rooms="4"]) &,
[data-rooms="5"]:not([data-prev-rooms="6"]) &,
[data-rooms="6"]:not([data-prev-rooms="5"]) &,
{
> .house-sparkle {
display: block;
}
}
> .house-sparkle {
display: none;
}
}
.house-ledge {
height: 20px;
width: 20px;
position: absolute;
background: #000;
left: calc(50% - 10px);
background-color: $color-ledge;
border: 5px solid $color-primary;
transform: rotate(-45deg) translate(5px, -5px);
&:before, &:after {
position: absolute;
width: calc(var(--front-width) / 1.25);
height: calc(100% + 10px);
top: -5px;
background-color: $color-ledge;
border: 5px solid $color-primary;
}
&:before {
right: 100%;
border-right: none;
}
&:after {
left: 0;
transform-origin: left bottom;
transform: rotate(90deg) translate(-5px, 5px);
border-left: none;
}
}
}
.house-gable {
position: absolute;
bottom: calc(100% - 5px);
left: 0;
width: 100%;
height: 70px;
> .house-roof {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
transform: scaleY(0.9);
z-index: 1;
}
.southplaza-ledge{
background-color: #b2b2bd;
background-size: 10px 100%;
width: calc(100% + 30px);
height: 65px;
border-radius: 10%/100px 100px 0 0;
position: absolute;
left: 50%;
bottom: 30px;
transform: translateX(-50%);
border: 5px solid #4d5158;
}
}
.house-chimney {
width: 100px;
height: 80px;
position: absolute;
background-color: $color-primary;
left: 50%;
bottom: 100%;
transform: translateX(-50%);
z-index: 0;
}
.house-left-wing,
.house-right-wing {
position: absolute;
height: 100%;
width: calc(50% - var(--front-width) / 2);
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
}
.house-wings {
.house:not([data-rooms="6"]) & {
.house-window:first-child {
display: none;
}
}
.house[data-rooms="3"] & {
.house-window {
display: none;
}
}
.house[data-rooms="6"] &,
.house[data-rooms="5"]:not([data-prev-rooms="4"]) &,
.house[data-rooms="4"][data-prev-rooms="3"] &,
.house[data-rooms="3"] & {
.house-sparkle {
display: block;
}
}
}
.house-left-wing {
left: 0;
}
.house-right-wing {
right: 0;
flex-flow: row-reverse;
}
.house-sparkle {
position: absolute;
height: 90px;
width: 90px;
border-radius: 50%;
border: 5px solid $color-primary;
top: calc(50% - 45px);
left: calc(50% - 45px);
display: none;
// animation-iteration-count: infinite !important;
&:before {
top: 0;
left: 0;
background-color: $color-window-left;
}
&:after {
bottom: 0;
right: 0;
background-color: $color-primary;
}
}
.house-sparkle,
.house-sparkle-dots {
&:before, &:after {
position: absolute;
height: 10px;
width: 10px;
border-radius: 50%;
}
}
.house-sparkle-dots {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
&:before {
bottom: -15px;
right: 40px;
background-color: $color-roof;
}
}
.house[data-rooms="6"] {
.house-left-wing .house-sparkle {
left: calc(25% - 45px);
}
.house-right-wing .house-sparkle {
left: initial;
right: calc(25% - 45px);
}
}
@each $rooms in 6 5 4 3 {
@keyframes sparkle-#{$rooms} {
from {
transform: scale(1);
opacity: 1;
}
to {
transform: scale(2);
opacity: 0;
border-width: 0;
}
}
@keyframes sparkle-dots-#{$rooms} {
from {
transform: scale(1);
}
to {
transform: scale(0);
}
}
.house[data-rooms="#{$rooms}"] {
.house-sparkle {
animation: sparkle-#{$rooms} $duration $easing both;
}
.house-sparkle,
.house-sparkle-dots {
&:before, &:after {
animation: sparkle-dots-#{$rooms} $duration $easing both;
}
}
}
}
@keyframes windows-leave {
to {
width: 0;
}
}
.house-window {
height: 60px;
width: 30px;
border: 4px solid $color-primary;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
background-image: $color-window;
&:before {
height: 100%;
width: 5px;
left: calc(50% - 2.5px);
top: 0;
background-color: $color-primary;
}
&:after {
height: 10px;
width: calc(100% + 20px);
left: -10px;
bottom: 5px;
border-radius: 3px;
background-color: $color-ledge;
border: 3px solid $color-primary;
box-shadow: 0 5px $color-shadow;
}
}
.house-doorway {
width: 95px;
height: 90px;
position: absolute;
bottom: 0;
left: 50%;
transform: translate(-50%);
}
.house-stairs {
width: 100%;
position: absolute;
bottom: 0;
left: 0;
height: 15px;
border: 5px solid $color-primary;
z-index: 0;
box-shadow: 5px -5px $color-shadow;
&, &:before, &:after {
background-color: white;
}
&:before, &:after {
box-shadow: 5px -5px $color-shadow;
position: absolute;
height: 15px;
width: 100%;
border: 5px solid $color-primary;
}
&:before {
bottom: 100%;
transform: scaleX(.9);
z-index: 0;
}
&:after {
bottom: calc(200% + 5px);
transform: scaleX(.75);
z-index: 0;
}
}
.house-door {
position: absolute;
background-color: $color-primary;
width: 50%;
height: 55px;
left: 25%;
bottom: 35px;
border-top-left-radius: 2px;
border-top-right-radius: 2px;
}
body {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
background-color: #EFEFEF;
}
body, html {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
*, *:before, *:after {
box-sizing: border-box;
position: relative; // don't @ me
}
*:before, *:after {
content: '';
display: block;
}
// Styling input ranges is painful
// Styling Cross-Browser Compatible Range Inputs with Sass
// Github: https://github.com/darlanrod/input-range-sass
// Author: Darlan Rod https://github.com/darlanrod
// Version 1.4.1
// MIT License
$track-color: linear-gradient(to bottom, $color-ledge, $color-ledge 49.9%, darken($color-ledge, 5%) 50%, darken($color-ledge, 5%) 100%) !default;
$thumb-color: $color-primary !default;
$thumb-radius: 20px !default;
$thumb-height: 40px !default;
$thumb-width: 40px !default;
$track-width: 330px !default;
$track-height: 25px !default;
$track-shadow-color: rgba(0, 0, 0, .2) !default;
$track-border-width: 5px !default;
$track-border-color: $color-primary !default;
$track-radius: 25px !default;
@mixin track {
cursor: pointer;
height: $track-height;
transition: all .2s ease;
width: $track-width;
}
@mixin thumb {
background: $thumb-color;
border-radius: $thumb-radius;
cursor: pointer;
height: $thumb-height;
width: $thumb-width;
}
[type='range'] {
-webkit-appearance: none;
margin: $thumb-height / 2 0;
width: $track-width;
&:focus {
outline: 0;
&::-webkit-slider-runnable-track {
background: $track-color;
}
&::-ms-fill-lower {
background: $track-color;
}
&::-ms-fill-upper {
background: $track-color;
}
}
&::-webkit-slider-runnable-track {
@include track;
background: $track-color;
border: $track-border-width solid $track-border-color;
border-radius: $track-radius;
}
&::-webkit-slider-thumb {
@include thumb;
-webkit-appearance: none;
margin-top: ((-$track-border-width * 2 + $track-height) / 2) - ($thumb-height / 2);
}
&::-moz-range-track {
@include track;
background: $track-color;
border: $track-border-width solid $track-border-color;
border-radius: $track-radius;
}
&::-moz-range-thumb {
@include thumb;
}
&::-ms-track {
@include track;
background: transparent;
border-color: transparent;
border-width: ($thumb-height / 2) 0;
color: transparent;
}
&::-ms-fill-lower {
background: $track-color;
border: $track-border-width solid $track-border-color;
border-radius: $track-radius * 2;
}
&::-ms-fill-upper {
background: $track-color;
border: $track-border-width solid $track-border-color;
border-radius: $track-radius * 2;
}
&::-ms-thumb {
@include thumb;
margin-top: 0;
}
}
}
var checkbox = document.querySelector('input[name=mode]');
checkbox.addEventListener('change', function() {
if(this.checked) {
trans()
document.documentElement.setAttribute('data-theme', 'dark')
} else {
trans()
document.documentElement.setAttribute('data-theme', 'light')
}
})
let trans = () => {
document.documentElement.classList.add('transition');
window.setTimeout(() => {
document.documentElement.classList.remove('transition');
}, 1000)
}
External CSS
This Pen doesn't use any external CSS resources.