- {
box-sizing: border-box;
}
body {
font-family: 'Montserrat'; line-height: 1.5; -webkit-font-smoothing: antialiased;
}
ul {
list-style-type: none; padding: 0; margin: 0;
}
.nav {
position: fixed; z-index: 1; top: 0; left: 0; width: 100px; -webkit-backface-visibility: hidden; backface-visibility: hidden;
} .nav__list {
display: flex; flex-flow: column wrap; height: 85vh; -webkit-transform: translate(0, -100%); transform: translate(0, -100%); transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
} .nav__list--active {
-webkit-transform: translate(0, 0); transform: translate(0, 0);
} .nav__item {
flex: 1; position: relative;
} .nav__link {
display: flex; justify-content: center; align-items: center; position: absolute; height: 100%; width: 100%; top: 0; left: 0; text-decoration: none; font-size: 24px; background: #2b3033; transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
} .nav__link:hover {
background: #272b2e;
} @media (max-width: 640px) {
.nav { width: 70px; } .nav__list { height: 90vh; }
}
.panel {
min-height: 10vh; display: flex; align-items: center; justify-content: center; overflow: hidden;
} .panel__wrapper {
padding: 7vh 7vw; -webkit-perspective: 1000px; perspective: 1000px;
} .panel__content {
will-change: transform; -webkit-transform: scale(0.7) rotateX(-230deg); transform: scale(0.7) rotateX(-230deg); -webkit-transform-origin: center 80%; transform-origin: center 80%; opacity: 0; transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
} .panel__content--active {
-webkit-transform: none; transform: none; opacity: 1;
} .panel__headline {
font-weight: 700; opacity: 0.8; font-size: 48px; margin: 0 0 25px 0;
} .panel p {
margin: 0 0 25px 0; color: #1a1a1a; font-size: 24px; max-width: 800px;
} .panel p:last-child {
margin-bottom: 0;
} .panel__block {
height: 3px; background: rgba(0, 0, 0, 0.2); margin: 0 0 25px 0;
} @media (max-width: 640px) {
.panel__headline { font-size: 36px; } .panel__wrapper { padding: 10vh 10vw; } .panel p { font-size: 16px; }
}
.c-blue {
color: #5fc7ea;
}
.c-red {
color: #e68568;
}
.c-green {
color: #68e6ac;
}
.c-yellow {
color: #e6d068;
}
.b-blue {
background: #ff6670;
}
.b-red {
background: #ffd000;
}
.b-green {
background: #77a88d;
}
.b-yellow {
background: #678f8d;
}