747 lines
24 KiB
CSS
747 lines
24 KiB
CSS
@import url("https://fonts.googleapis.com/css?family=Heebo:400,500,800,900&display=swap");
|
|
:root {
|
|
--bg: #efdece;
|
|
}
|
|
|
|
h4 {
|
|
color: white;
|
|
margin: 0;
|
|
padding-top: 20px;
|
|
text-align: center;
|
|
}
|
|
|
|
canvas {
|
|
position: absolute;
|
|
z-index: 1;
|
|
opacity: 0.6;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.dynamicCursor {
|
|
max-width: 50px;
|
|
min-width: 18px;
|
|
transition: width 0s;
|
|
background: transparent !important;
|
|
border: 2px solid white !important;
|
|
}
|
|
|
|
@-webkit-keyframes in {
|
|
from {
|
|
opacity: 0;
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
@keyframes in {
|
|
from {
|
|
opacity: 0;
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
body {
|
|
padding: 0;
|
|
background: #a92913;
|
|
padding: 0;
|
|
margin: 0;
|
|
box-shadow: 50vw 0 #381313 inset;
|
|
height: 100vh;
|
|
font-family: 'Heebo', sans-serif;
|
|
-webkit-user-select: none;
|
|
/* Chrome all / Safari all */
|
|
-moz-user-select: none;
|
|
/* Firefox all */
|
|
-ms-user-select: none;
|
|
/* IE 10+ */
|
|
user-select: none;
|
|
/* Likely future */
|
|
}
|
|
body .phone {
|
|
position: absolute;
|
|
left: 0;
|
|
right: 0;
|
|
margin: auto;
|
|
top: 50%;
|
|
-webkit-transform: translateY(-50%);
|
|
transform: translateY(-50%);
|
|
}
|
|
body .guitar {
|
|
width: 85px;
|
|
height: 175px;
|
|
z-index: 10;
|
|
position: absolute;
|
|
transition: all 0.7s 0.3s cubic-bezier(0.5, 0.005, 0.075, 0.985), transform 0.1s 0.7s, -webkit-transform 0.1s;
|
|
left: 92px;
|
|
-webkit-transform: scale(1.8);
|
|
transform: scale(1.8);
|
|
top: 130px;
|
|
background-size: 1920px !important;
|
|
background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/217233/gt.png);
|
|
-webkit-animation: guitar2 0.5s 0s steps(23, end) forwards;
|
|
animation: guitar2 0.5s 0s steps(23, end) forwards;
|
|
}
|
|
@-webkit-keyframes guitar {
|
|
0% {
|
|
background-position: 0 0;
|
|
-webkit-transform: scale(1.8);
|
|
transform: scale(1.8);
|
|
}
|
|
10% {
|
|
-webkit-transform: scale(1.8);
|
|
transform: scale(1.8);
|
|
}
|
|
100% {
|
|
background-position: -1840px 0;
|
|
-webkit-transform: scale(1.8);
|
|
transform: scale(1.8);
|
|
}
|
|
}
|
|
@keyframes guitar {
|
|
0% {
|
|
background-position: 0 0;
|
|
-webkit-transform: scale(1.8);
|
|
transform: scale(1.8);
|
|
}
|
|
10% {
|
|
-webkit-transform: scale(1.8);
|
|
transform: scale(1.8);
|
|
}
|
|
100% {
|
|
background-position: -1840px 0;
|
|
-webkit-transform: scale(1.8);
|
|
transform: scale(1.8);
|
|
}
|
|
}
|
|
@-webkit-keyframes guitar2 {
|
|
0% {
|
|
background-position: -1840px 0;
|
|
-webkit-transform: scale(1.8);
|
|
transform: scale(1.8);
|
|
}
|
|
10% {
|
|
-webkit-transform: scale(1.8);
|
|
transform: scale(1.8);
|
|
}
|
|
100% {
|
|
background-position: 0 0;
|
|
-webkit-transform: scale(1.8);
|
|
transform: scale(1.8);
|
|
}
|
|
}
|
|
@keyframes guitar2 {
|
|
0% {
|
|
background-position: -1840px 0;
|
|
-webkit-transform: scale(1.8);
|
|
transform: scale(1.8);
|
|
}
|
|
10% {
|
|
-webkit-transform: scale(1.8);
|
|
transform: scale(1.8);
|
|
}
|
|
100% {
|
|
background-position: 0 0;
|
|
-webkit-transform: scale(1.8);
|
|
transform: scale(1.8);
|
|
}
|
|
}
|
|
body .phone {
|
|
opacity: 0;
|
|
-webkit-animation: in 1s .5s forwards;
|
|
animation: in 1s .5s forwards;
|
|
width: 245px;
|
|
height: 489px;
|
|
-webkit-perspective: 900;
|
|
perspective: 900;
|
|
border-radius: 24px;
|
|
overflow: hidden;
|
|
border-radius: 40px;
|
|
box-shadow: 0 0 40px 10px rgba(0, 0, 0, 0.3);
|
|
-webkit-box-reflect: below 4px linear-gradient(to top, white -120%, rgba(255, 255, 255, 0) 25%);
|
|
}
|
|
body .phone.open .guitar {
|
|
-webkit-animation: guitar 0.5s 0s steps(23, end) forwards;
|
|
animation: guitar 0.5s 0s steps(23, end) forwards;
|
|
}
|
|
body .phone.open .phone_inner__nav {
|
|
left: 170px;
|
|
}
|
|
body .phone.open .phone_inner__nav h3 {
|
|
opacity: 0;
|
|
}
|
|
body .phone.open .phone_inner__cube {
|
|
-webkit-transform: rotateY(90deg);
|
|
transform: rotateY(90deg);
|
|
left: 50px;
|
|
}
|
|
body .phone.open .phone_inner__cube h2 {
|
|
opacity: 0;
|
|
-webkit-transform: translateZ(50px);
|
|
transform: translateZ(50px);
|
|
}
|
|
body .phone_frame {
|
|
width: 245px;
|
|
height: 489px;
|
|
position: absolute;
|
|
z-index: 2;
|
|
background: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/217233/frameIphone.png");
|
|
pointer-events: none;
|
|
}
|
|
body .phone_inner {
|
|
width: 225px;
|
|
height: 475px;
|
|
position: relative;
|
|
left: 10px;
|
|
top: 6px;
|
|
overflow: hidden;
|
|
-webkit-transform-style: preserve-3D;
|
|
transform-style: preserve-3D;
|
|
background: #ada59c;
|
|
}
|
|
body .phone_inner__nav {
|
|
position: absolute;
|
|
z-index: 2;
|
|
text-transform: uppercase;
|
|
text-align: center;
|
|
width: 100%;
|
|
font-weight: 400;
|
|
transition: all 0.5s cubic-bezier(0.615, 0, 0.28, 1.005);
|
|
top: 39px;
|
|
left: 0;
|
|
}
|
|
body .phone_inner__nav h3 {
|
|
margin: 0;
|
|
font-size: 9px;
|
|
opacity: 1;
|
|
transition: all 0.5s cubic-bezier(0.615, 0, 0.28, 1.005);
|
|
}
|
|
body .phone_inner__nav .menu {
|
|
width: 18px;
|
|
height: 2px;
|
|
background: #111114;
|
|
position: absolute;
|
|
left: 16px;
|
|
}
|
|
body .phone_inner__nav .menu:after {
|
|
content: '';
|
|
display: block;
|
|
position: relative;
|
|
top: 2px;
|
|
width: 18px;
|
|
height: 2px;
|
|
background: #111114;
|
|
}
|
|
body .phone_inner__nav .menu:before {
|
|
content: '';
|
|
display: block;
|
|
position: relative;
|
|
top: 9px;
|
|
width: 10px;
|
|
height: 2px;
|
|
background: #111114;
|
|
}
|
|
body .phone_inner__cube {
|
|
-webkit-transform-style: preserve-3D;
|
|
transform-style: preserve-3D;
|
|
height: 100%;
|
|
position: relative;
|
|
left: 0;
|
|
transition: all 0.509s cubic-bezier(0.615, 0, 0.28, 1.005);
|
|
}
|
|
body .phone_inner__cube .shadow img {
|
|
position: absolute;
|
|
width: 210px;
|
|
top: 90px;
|
|
left: 20px;
|
|
}
|
|
body .phone_inner__cube h1 {
|
|
text-transform: uppercase;
|
|
margin: 0;
|
|
-webkit-transform-origin: 0 50%;
|
|
transform-origin: 0 50%;
|
|
position: absolute;
|
|
line-height: 0;
|
|
left: 47px;
|
|
letter-spacing: 3px;
|
|
top: 92px;
|
|
color: #c6bdad;
|
|
font-size: 55px;
|
|
text-shadow: 0 0 1px #bdb5ad;
|
|
-webkit-transform-style: preserve-3D;
|
|
transform-style: preserve-3D;
|
|
}
|
|
body .phone_inner__cube h1:nth-of-type(1) {
|
|
-webkit-transform: rotate(90deg) translateZ(-0.9583333333px);
|
|
transform: rotate(90deg) translateZ(-0.9583333333px);
|
|
}
|
|
body .phone_inner__cube h1:nth-of-type(2) {
|
|
-webkit-transform: rotate(90deg) translateZ(-0.9166666667px);
|
|
transform: rotate(90deg) translateZ(-0.9166666667px);
|
|
}
|
|
body .phone_inner__cube h1:nth-of-type(3) {
|
|
-webkit-transform: rotate(90deg) translateZ(-0.875px);
|
|
transform: rotate(90deg) translateZ(-0.875px);
|
|
}
|
|
body .phone_inner__cube h1:nth-of-type(4) {
|
|
-webkit-transform: rotate(90deg) translateZ(-0.8333333333px);
|
|
transform: rotate(90deg) translateZ(-0.8333333333px);
|
|
}
|
|
body .phone_inner__cube h1:nth-of-type(5) {
|
|
-webkit-transform: rotate(90deg) translateZ(-0.7916666667px);
|
|
transform: rotate(90deg) translateZ(-0.7916666667px);
|
|
}
|
|
body .phone_inner__cube h1:nth-of-type(6) {
|
|
-webkit-transform: rotate(90deg) translateZ(-0.75px);
|
|
transform: rotate(90deg) translateZ(-0.75px);
|
|
}
|
|
body .phone_inner__cube h1:nth-of-type(7) {
|
|
-webkit-transform: rotate(90deg) translateZ(-0.7083333333px);
|
|
transform: rotate(90deg) translateZ(-0.7083333333px);
|
|
}
|
|
body .phone_inner__cube h1:nth-of-type(8) {
|
|
-webkit-transform: rotate(90deg) translateZ(-0.6666666667px);
|
|
transform: rotate(90deg) translateZ(-0.6666666667px);
|
|
}
|
|
body .phone_inner__cube h1:nth-of-type(9) {
|
|
-webkit-transform: rotate(90deg) translateZ(-0.625px);
|
|
transform: rotate(90deg) translateZ(-0.625px);
|
|
}
|
|
body .phone_inner__cube h1:nth-of-type(10) {
|
|
-webkit-transform: rotate(90deg) translateZ(-0.5833333333px);
|
|
transform: rotate(90deg) translateZ(-0.5833333333px);
|
|
}
|
|
body .phone_inner__cube h1:nth-of-type(11) {
|
|
-webkit-transform: rotate(90deg) translateZ(-0.5416666667px);
|
|
transform: rotate(90deg) translateZ(-0.5416666667px);
|
|
}
|
|
body .phone_inner__cube h1:nth-of-type(12) {
|
|
-webkit-transform: rotate(90deg) translateZ(-0.5px);
|
|
transform: rotate(90deg) translateZ(-0.5px);
|
|
}
|
|
body .phone_inner__cube h1:nth-of-type(13) {
|
|
-webkit-transform: rotate(90deg) translateZ(-0.4583333333px);
|
|
transform: rotate(90deg) translateZ(-0.4583333333px);
|
|
}
|
|
body .phone_inner__cube h1:nth-of-type(14) {
|
|
-webkit-transform: rotate(90deg) translateZ(-0.4166666667px);
|
|
transform: rotate(90deg) translateZ(-0.4166666667px);
|
|
}
|
|
body .phone_inner__cube h1:nth-of-type(15) {
|
|
-webkit-transform: rotate(90deg) translateZ(-0.375px);
|
|
transform: rotate(90deg) translateZ(-0.375px);
|
|
}
|
|
body .phone_inner__cube h1:nth-of-type(16) {
|
|
-webkit-transform: rotate(90deg) translateZ(-0.3333333333px);
|
|
transform: rotate(90deg) translateZ(-0.3333333333px);
|
|
}
|
|
body .phone_inner__cube h1:nth-of-type(17) {
|
|
-webkit-transform: rotate(90deg) translateZ(-0.2916666667px);
|
|
transform: rotate(90deg) translateZ(-0.2916666667px);
|
|
}
|
|
body .phone_inner__cube h1:nth-of-type(18) {
|
|
-webkit-transform: rotate(90deg) translateZ(-0.25px);
|
|
transform: rotate(90deg) translateZ(-0.25px);
|
|
}
|
|
body .phone_inner__cube h1:nth-of-type(19) {
|
|
-webkit-transform: rotate(90deg) translateZ(-0.2083333333px);
|
|
transform: rotate(90deg) translateZ(-0.2083333333px);
|
|
}
|
|
body .phone_inner__cube h1:nth-of-type(20) {
|
|
-webkit-transform: rotate(90deg) translateZ(-0.1666666667px);
|
|
transform: rotate(90deg) translateZ(-0.1666666667px);
|
|
}
|
|
body .phone_inner__cube h1:nth-of-type(21) {
|
|
-webkit-transform: rotate(90deg) translateZ(-0.125px);
|
|
transform: rotate(90deg) translateZ(-0.125px);
|
|
}
|
|
body .phone_inner__cube h1:nth-of-type(22) {
|
|
-webkit-transform: rotate(90deg) translateZ(-0.0833333333px);
|
|
transform: rotate(90deg) translateZ(-0.0833333333px);
|
|
}
|
|
body .phone_inner__cube h1:nth-of-type(23) {
|
|
-webkit-transform: rotate(90deg) translateZ(-0.0416666667px);
|
|
transform: rotate(90deg) translateZ(-0.0416666667px);
|
|
}
|
|
body .phone_inner__cube h1:nth-of-type(24) {
|
|
-webkit-transform: rotate(90deg) translateZ(0px);
|
|
transform: rotate(90deg) translateZ(0px);
|
|
}
|
|
body .phone_inner__cube h1:nth-of-type(25) {
|
|
-webkit-transform: rotate(90deg) translateZ(0.0416666667px);
|
|
transform: rotate(90deg) translateZ(0.0416666667px);
|
|
}
|
|
body .phone_inner__cube h1:nth-of-type(26) {
|
|
-webkit-transform: rotate(90deg) translateZ(0.0833333333px);
|
|
transform: rotate(90deg) translateZ(0.0833333333px);
|
|
}
|
|
body .phone_inner__cube h1:nth-of-type(27) {
|
|
-webkit-transform: rotate(90deg) translateZ(0.125px);
|
|
transform: rotate(90deg) translateZ(0.125px);
|
|
}
|
|
body .phone_inner__cube h1:nth-of-type(28) {
|
|
-webkit-transform: rotate(90deg) translateZ(0.1666666667px);
|
|
transform: rotate(90deg) translateZ(0.1666666667px);
|
|
}
|
|
body .phone_inner__cube h1:nth-of-type(29) {
|
|
-webkit-transform: rotate(90deg) translateZ(0.2083333333px);
|
|
transform: rotate(90deg) translateZ(0.2083333333px);
|
|
}
|
|
body .phone_inner__cube h1:nth-of-type(30) {
|
|
-webkit-transform: rotate(90deg) translateZ(0.25px);
|
|
transform: rotate(90deg) translateZ(0.25px);
|
|
}
|
|
body .phone_inner__cube h1:nth-of-type(31) {
|
|
-webkit-transform: rotate(90deg) translateZ(0.2916666667px);
|
|
transform: rotate(90deg) translateZ(0.2916666667px);
|
|
}
|
|
body .phone_inner__cube h1:nth-of-type(32) {
|
|
-webkit-transform: rotate(90deg) translateZ(0.3333333333px);
|
|
transform: rotate(90deg) translateZ(0.3333333333px);
|
|
}
|
|
body .phone_inner__cube h1:nth-of-type(33) {
|
|
-webkit-transform: rotate(90deg) translateZ(0.375px);
|
|
transform: rotate(90deg) translateZ(0.375px);
|
|
}
|
|
body .phone_inner__cube h1:nth-of-type(34) {
|
|
-webkit-transform: rotate(90deg) translateZ(0.4166666667px);
|
|
transform: rotate(90deg) translateZ(0.4166666667px);
|
|
}
|
|
body .phone_inner__cube h1:nth-of-type(35) {
|
|
-webkit-transform: rotate(90deg) translateZ(0.4583333333px);
|
|
transform: rotate(90deg) translateZ(0.4583333333px);
|
|
}
|
|
body .phone_inner__cube h1:nth-of-type(36) {
|
|
-webkit-transform: rotate(90deg) translateZ(0.5px);
|
|
transform: rotate(90deg) translateZ(0.5px);
|
|
}
|
|
body .phone_inner__cube h1:nth-of-type(37) {
|
|
-webkit-transform: rotate(90deg) translateZ(0.5416666667px);
|
|
transform: rotate(90deg) translateZ(0.5416666667px);
|
|
}
|
|
body .phone_inner__cube h1:nth-of-type(38) {
|
|
-webkit-transform: rotate(90deg) translateZ(0.5833333333px);
|
|
transform: rotate(90deg) translateZ(0.5833333333px);
|
|
}
|
|
body .phone_inner__cube h1:nth-of-type(39) {
|
|
-webkit-transform: rotate(90deg) translateZ(0.625px);
|
|
transform: rotate(90deg) translateZ(0.625px);
|
|
}
|
|
body .phone_inner__cube h1:nth-of-type(40) {
|
|
-webkit-transform: rotate(90deg) translateZ(0.6666666667px);
|
|
transform: rotate(90deg) translateZ(0.6666666667px);
|
|
}
|
|
body .phone_inner__cube h1:nth-of-type(41) {
|
|
-webkit-transform: rotate(90deg) translateZ(0.7083333333px);
|
|
transform: rotate(90deg) translateZ(0.7083333333px);
|
|
}
|
|
body .phone_inner__cube h1:nth-of-type(42) {
|
|
-webkit-transform: rotate(90deg) translateZ(0.75px);
|
|
transform: rotate(90deg) translateZ(0.75px);
|
|
}
|
|
body .phone_inner__cube h1:nth-of-type(43) {
|
|
-webkit-transform: rotate(90deg) translateZ(0.7916666667px);
|
|
transform: rotate(90deg) translateZ(0.7916666667px);
|
|
}
|
|
body .phone_inner__cube h1:nth-of-type(44) {
|
|
-webkit-transform: rotate(90deg) translateZ(0.8333333333px);
|
|
transform: rotate(90deg) translateZ(0.8333333333px);
|
|
}
|
|
body .phone_inner__cube h1:nth-of-type(45) {
|
|
-webkit-transform: rotate(90deg) translateZ(0.875px);
|
|
transform: rotate(90deg) translateZ(0.875px);
|
|
}
|
|
body .phone_inner__cube h1:nth-of-type(46) {
|
|
-webkit-transform: rotate(90deg) translateZ(0.9166666667px);
|
|
transform: rotate(90deg) translateZ(0.9166666667px);
|
|
}
|
|
body .phone_inner__cube h1:nth-of-type(47) {
|
|
-webkit-transform: rotate(90deg) translateZ(0.9583333333px);
|
|
transform: rotate(90deg) translateZ(0.9583333333px);
|
|
}
|
|
body .phone_inner__cube h1:nth-of-type(48) {
|
|
-webkit-transform: rotate(90deg) translateZ(1px);
|
|
transform: rotate(90deg) translateZ(1px);
|
|
}
|
|
body .phone_inner__cube h1:nth-of-type(49) {
|
|
-webkit-transform: rotate(90deg) translateZ(1.0416666667px);
|
|
transform: rotate(90deg) translateZ(1.0416666667px);
|
|
}
|
|
body .phone_inner__cube h1:nth-of-type(50) {
|
|
-webkit-transform: rotate(90deg) translateZ(1.0833333333px);
|
|
transform: rotate(90deg) translateZ(1.0833333333px);
|
|
}
|
|
body .phone_inner__cube h1:nth-of-type(51) {
|
|
-webkit-transform: rotate(90deg) translateZ(1.125px);
|
|
transform: rotate(90deg) translateZ(1.125px);
|
|
}
|
|
body .phone_inner__cube h1:nth-of-type(52) {
|
|
-webkit-transform: rotate(90deg) translateZ(1.1666666667px);
|
|
transform: rotate(90deg) translateZ(1.1666666667px);
|
|
}
|
|
body .phone_inner__cube h1:nth-of-type(53) {
|
|
-webkit-transform: rotate(90deg) translateZ(1.2083333333px);
|
|
transform: rotate(90deg) translateZ(1.2083333333px);
|
|
}
|
|
body .phone_inner__cube h1:nth-of-type(54) {
|
|
-webkit-transform: rotate(90deg) translateZ(1.25px);
|
|
transform: rotate(90deg) translateZ(1.25px);
|
|
}
|
|
body .phone_inner__cube h1:nth-of-type(55) {
|
|
-webkit-transform: rotate(90deg) translateZ(1.2916666667px);
|
|
transform: rotate(90deg) translateZ(1.2916666667px);
|
|
}
|
|
body .phone_inner__cube h1:nth-of-type(56) {
|
|
-webkit-transform: rotate(90deg) translateZ(1.3333333333px);
|
|
transform: rotate(90deg) translateZ(1.3333333333px);
|
|
}
|
|
body .phone_inner__cube h1:nth-of-type(57) {
|
|
-webkit-transform: rotate(90deg) translateZ(1.375px);
|
|
transform: rotate(90deg) translateZ(1.375px);
|
|
}
|
|
body .phone_inner__cube h1:nth-of-type(58) {
|
|
-webkit-transform: rotate(90deg) translateZ(1.4166666667px);
|
|
transform: rotate(90deg) translateZ(1.4166666667px);
|
|
}
|
|
body .phone_inner__cube h1:nth-of-type(59) {
|
|
-webkit-transform: rotate(90deg) translateZ(1.4583333333px);
|
|
transform: rotate(90deg) translateZ(1.4583333333px);
|
|
}
|
|
body .phone_inner__cube h1:nth-of-type(60) {
|
|
-webkit-transform: rotate(90deg) translateZ(1.5px);
|
|
transform: rotate(90deg) translateZ(1.5px);
|
|
}
|
|
body .phone_inner__cube h1:nth-of-type(61) {
|
|
-webkit-transform: rotate(90deg) translateZ(1.5416666667px);
|
|
transform: rotate(90deg) translateZ(1.5416666667px);
|
|
}
|
|
body .phone_inner__cube h1:nth-of-type(62) {
|
|
-webkit-transform: rotate(90deg) translateZ(1.5833333333px);
|
|
transform: rotate(90deg) translateZ(1.5833333333px);
|
|
}
|
|
body .phone_inner__cube h1:nth-of-type(63) {
|
|
-webkit-transform: rotate(90deg) translateZ(1.625px);
|
|
transform: rotate(90deg) translateZ(1.625px);
|
|
}
|
|
body .phone_inner__cube h1:nth-of-type(64) {
|
|
-webkit-transform: rotate(90deg) translateZ(1.6666666667px);
|
|
transform: rotate(90deg) translateZ(1.6666666667px);
|
|
}
|
|
body .phone_inner__cube h1:nth-of-type(65) {
|
|
-webkit-transform: rotate(90deg) translateZ(1.7083333333px);
|
|
transform: rotate(90deg) translateZ(1.7083333333px);
|
|
}
|
|
body .phone_inner__cube h1:nth-of-type(66) {
|
|
-webkit-transform: rotate(90deg) translateZ(1.75px);
|
|
transform: rotate(90deg) translateZ(1.75px);
|
|
}
|
|
body .phone_inner__cube h1:nth-of-type(67) {
|
|
-webkit-transform: rotate(90deg) translateZ(1.7916666667px);
|
|
transform: rotate(90deg) translateZ(1.7916666667px);
|
|
}
|
|
body .phone_inner__cube h1:nth-of-type(68) {
|
|
-webkit-transform: rotate(90deg) translateZ(1.8333333333px);
|
|
transform: rotate(90deg) translateZ(1.8333333333px);
|
|
}
|
|
body .phone_inner__cube h1:nth-of-type(69) {
|
|
-webkit-transform: rotate(90deg) translateZ(1.875px);
|
|
transform: rotate(90deg) translateZ(1.875px);
|
|
}
|
|
body .phone_inner__cube h1:nth-of-type(70) {
|
|
-webkit-transform: rotate(90deg) translateZ(1.9166666667px);
|
|
transform: rotate(90deg) translateZ(1.9166666667px);
|
|
}
|
|
body .phone_inner__cube h1:nth-of-type(71) {
|
|
-webkit-transform: rotate(90deg) translateZ(1.9583333333px);
|
|
transform: rotate(90deg) translateZ(1.9583333333px);
|
|
}
|
|
body .phone_inner__cube h1:nth-of-type(72) {
|
|
-webkit-transform: rotate(90deg) translateZ(2px);
|
|
transform: rotate(90deg) translateZ(2px);
|
|
}
|
|
body .phone_inner__cube h1:nth-of-type(73) {
|
|
-webkit-transform: rotate(90deg) translateZ(2.0416666667px);
|
|
transform: rotate(90deg) translateZ(2.0416666667px);
|
|
}
|
|
body .phone_inner__cube h1:nth-of-type(74) {
|
|
-webkit-transform: rotate(90deg) translateZ(2.0833333333px);
|
|
transform: rotate(90deg) translateZ(2.0833333333px);
|
|
}
|
|
body .phone_inner__cube h1:nth-of-type(75) {
|
|
-webkit-transform: rotate(90deg) translateZ(2.125px);
|
|
transform: rotate(90deg) translateZ(2.125px);
|
|
}
|
|
body .phone_inner__cube h1:nth-of-type(76) {
|
|
-webkit-transform: rotate(90deg) translateZ(2.1666666667px);
|
|
transform: rotate(90deg) translateZ(2.1666666667px);
|
|
}
|
|
body .phone_inner__cube h1:nth-of-type(77) {
|
|
-webkit-transform: rotate(90deg) translateZ(2.2083333333px);
|
|
transform: rotate(90deg) translateZ(2.2083333333px);
|
|
}
|
|
body .phone_inner__cube h1:nth-of-type(78) {
|
|
-webkit-transform: rotate(90deg) translateZ(2.25px);
|
|
transform: rotate(90deg) translateZ(2.25px);
|
|
}
|
|
body .phone_inner__cube h1:nth-of-type(79) {
|
|
-webkit-transform: rotate(90deg) translateZ(2.2916666667px);
|
|
transform: rotate(90deg) translateZ(2.2916666667px);
|
|
}
|
|
body .phone_inner__cube h1:nth-of-type(80) {
|
|
-webkit-transform: rotate(90deg) translateZ(2.3333333333px);
|
|
transform: rotate(90deg) translateZ(2.3333333333px);
|
|
}
|
|
body .phone_inner__cube h1:nth-of-type(81) {
|
|
-webkit-transform: rotate(90deg) translateZ(2.375px);
|
|
transform: rotate(90deg) translateZ(2.375px);
|
|
}
|
|
body .phone_inner__cube h1:nth-of-type(82) {
|
|
-webkit-transform: rotate(90deg) translateZ(2.4166666667px);
|
|
transform: rotate(90deg) translateZ(2.4166666667px);
|
|
}
|
|
body .phone_inner__cube h1:nth-of-type(83) {
|
|
-webkit-transform: rotate(90deg) translateZ(2.4583333333px);
|
|
transform: rotate(90deg) translateZ(2.4583333333px);
|
|
}
|
|
body .phone_inner__cube h1:nth-of-type(84) {
|
|
-webkit-transform: rotate(90deg) translateZ(2.5px);
|
|
transform: rotate(90deg) translateZ(2.5px);
|
|
}
|
|
body .phone_inner__cube h1:nth-of-type(85) {
|
|
-webkit-transform: rotate(90deg) translateZ(2.5416666667px);
|
|
transform: rotate(90deg) translateZ(2.5416666667px);
|
|
}
|
|
body .phone_inner__cube h1:nth-of-type(86) {
|
|
-webkit-transform: rotate(90deg) translateZ(2.5833333333px);
|
|
transform: rotate(90deg) translateZ(2.5833333333px);
|
|
}
|
|
body .phone_inner__cube h1:nth-of-type(87) {
|
|
-webkit-transform: rotate(90deg) translateZ(2.625px);
|
|
transform: rotate(90deg) translateZ(2.625px);
|
|
}
|
|
body .phone_inner__cube h1:nth-of-type(88) {
|
|
-webkit-transform: rotate(90deg) translateZ(2.6666666667px);
|
|
transform: rotate(90deg) translateZ(2.6666666667px);
|
|
}
|
|
body .phone_inner__cube h1:nth-of-type(89) {
|
|
-webkit-transform: rotate(90deg) translateZ(2.7083333333px);
|
|
transform: rotate(90deg) translateZ(2.7083333333px);
|
|
}
|
|
body .phone_inner__cube h1:nth-of-type(90) {
|
|
-webkit-transform: rotate(90deg) translateZ(2.75px);
|
|
transform: rotate(90deg) translateZ(2.75px);
|
|
}
|
|
body .phone_inner__cube h1:nth-of-type(91) {
|
|
-webkit-transform: rotate(90deg) translateZ(2.7916666667px);
|
|
transform: rotate(90deg) translateZ(2.7916666667px);
|
|
}
|
|
body .phone_inner__cube h1:nth-of-type(92) {
|
|
-webkit-transform: rotate(90deg) translateZ(2.8333333333px);
|
|
transform: rotate(90deg) translateZ(2.8333333333px);
|
|
}
|
|
body .phone_inner__cube h1:nth-of-type(93) {
|
|
-webkit-transform: rotate(90deg) translateZ(2.875px);
|
|
transform: rotate(90deg) translateZ(2.875px);
|
|
}
|
|
body .phone_inner__cube h1:nth-of-type(94) {
|
|
-webkit-transform: rotate(90deg) translateZ(2.9166666667px);
|
|
transform: rotate(90deg) translateZ(2.9166666667px);
|
|
}
|
|
body .phone_inner__cube h1:nth-of-type(95) {
|
|
-webkit-transform: rotate(90deg) translateZ(2.9583333333px);
|
|
transform: rotate(90deg) translateZ(2.9583333333px);
|
|
}
|
|
body .phone_inner__cube h1:nth-of-type(96) {
|
|
-webkit-transform: rotate(90deg) translateZ(3px);
|
|
transform: rotate(90deg) translateZ(3px);
|
|
}
|
|
body .phone_inner__cube h1:nth-of-type(97) {
|
|
-webkit-transform: rotate(90deg) translateZ(3.0416666667px);
|
|
transform: rotate(90deg) translateZ(3.0416666667px);
|
|
}
|
|
body .phone_inner__cube h1:nth-of-type(98) {
|
|
-webkit-transform: rotate(90deg) translateZ(3.0833333333px);
|
|
transform: rotate(90deg) translateZ(3.0833333333px);
|
|
}
|
|
body .phone_inner__cube h1:nth-of-type(99) {
|
|
-webkit-transform: rotate(90deg) translateZ(3.125px);
|
|
transform: rotate(90deg) translateZ(3.125px);
|
|
}
|
|
body .phone_inner__cube h1:nth-of-type(100) {
|
|
-webkit-transform: rotate(90deg) translateZ(3.1666666667px);
|
|
transform: rotate(90deg) translateZ(3.1666666667px);
|
|
}
|
|
body .phone_inner__cube h2 {
|
|
font-size: 20px;
|
|
font-weight: 500;
|
|
position: absolute;
|
|
bottom: 14px;
|
|
line-height: 20px;
|
|
left: 24px;
|
|
width: 100px;
|
|
opacity: 1;
|
|
-webkit-transform: translateZ(0);
|
|
transform: translateZ(0);
|
|
transition: all 0.5s cubic-bezier(0.615, 0, 0.28, 1.005);
|
|
}
|
|
body .phone_inner__cube .logo {
|
|
position: absolute;
|
|
z-index: auto;
|
|
top: 64px;
|
|
left: 20px;
|
|
}
|
|
body .phone_inner__cube .logo img {
|
|
width: 50px;
|
|
-ms-interpolation-mode: nearest-neighbor;
|
|
image-rendering: -moz-crisp-edges;
|
|
image-rendering: pixelated;
|
|
mix-blend-mode: darken;
|
|
}
|
|
body .phone_inner__cube ul {
|
|
padding: 0;
|
|
margin: 0 0 0 30px;
|
|
}
|
|
body .phone_inner__cube ul li {
|
|
list-style-type: none;
|
|
text-transform: uppercase;
|
|
font-weight: 900;
|
|
margin: 0 0 4px 0;
|
|
color: #111008;
|
|
cursor: pointer;
|
|
transition: all .2s;
|
|
}
|
|
body .phone_inner__cube ul li:hover {
|
|
color: #a23426;
|
|
}
|
|
body .phone_inner__cube ul li.active {
|
|
color: #a23426;
|
|
}
|
|
body .phone_inner__cube ul.small {
|
|
font-size: 7px;
|
|
margin-top: 80px;
|
|
}
|
|
body .phone_inner__cube ul.small li {
|
|
margin: 0 0 6px 0;
|
|
}
|
|
body .phone_inner__cube ul.big {
|
|
margin-top: 157px;
|
|
}
|
|
body .phone_inner__cube .face--left, body .phone_inner__cube .face--front {
|
|
width: 100%;
|
|
height: 100%;
|
|
-webkit-transform-style: preserve-3D;
|
|
transform-style: preserve-3D;
|
|
background: linear-gradient(to right, #f0ece5, var(--bg) 6%, var(--bg)), var(--bg);
|
|
position: absolute;
|
|
transform-style: preserve-3D;
|
|
}
|
|
body .phone_inner__cube .face--left {
|
|
-webkit-transform: rotateY(-90deg) translateX(-150px);
|
|
transform: rotateY(-90deg) translateX(-150px);
|
|
width: 150px;
|
|
-webkit-transform-origin: 0 0;
|
|
transform-origin: 0 0;
|
|
z-index: -1;
|
|
}
|