378 lines
6.9 KiB
CSS
378 lines
6.9 KiB
CSS
/* Icons (made with Icomoon.io) */
|
|
|
|
@font-face {
|
|
font-family: 'feather';
|
|
font-weight: normal;
|
|
font-style: normal;
|
|
src: url('../fonts/feather/feather.eot?1gafuo');
|
|
src: url('../fonts/feather/feather.eot?1gafuo#iefix') format('embedded-opentype'), url('../fonts/feather/feather.woff2?1gafuo') format('woff2'), url('../fonts/feather/feather.ttf?1gafuo') format('truetype'), url('../fonts/feather/feather.woff?1gafuo') format('woff'), url('../fonts/feather/feather.svg?1gafuo#feather') format('svg');
|
|
}
|
|
|
|
.icon {
|
|
font-family: 'feather';
|
|
font-weight: normal;
|
|
font-style: normal;
|
|
font-variant: normal;
|
|
line-height: 1;
|
|
text-transform: none;
|
|
/* Better Font Rendering =========== */
|
|
-webkit-font-smoothing: antialiased;
|
|
-moz-osx-font-smoothing: grayscale;
|
|
speak: none;
|
|
}
|
|
|
|
.icon--arrow-left:before {
|
|
content: '\e901';
|
|
}
|
|
|
|
.icon--menu:before {
|
|
content: '\e903';
|
|
}
|
|
|
|
.icon--cross:before {
|
|
content: '\e117';
|
|
}
|
|
|
|
|
|
/* Menu styles */
|
|
|
|
.menu {
|
|
position: fixed;
|
|
top: 120px;
|
|
left: 0;
|
|
width: 300px;
|
|
height: calc(100vh - 120px);
|
|
background: #1c1d22;
|
|
}
|
|
|
|
.menu__wrap {
|
|
position: absolute;
|
|
top: 3.5em;
|
|
bottom: 0;
|
|
overflow: hidden;
|
|
width: 100%;
|
|
}
|
|
|
|
.menu__level {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
visibility: hidden;
|
|
overflow: hidden;
|
|
overflow-y: scroll;
|
|
width: calc(100% + 50px);
|
|
height: 100%;
|
|
margin: 0;
|
|
padding: 0;
|
|
list-style-type: none;
|
|
}
|
|
|
|
.menu__level:focus {
|
|
outline: none;
|
|
}
|
|
|
|
.menu__level--current {
|
|
visibility: visible;
|
|
}
|
|
|
|
.menu__item {
|
|
display: block;
|
|
width: calc(100% - 50px);
|
|
}
|
|
|
|
.menu__link {
|
|
font-weight: 600;
|
|
position: relative;
|
|
display: block;
|
|
padding: 1em 2.5em 1em 1.5em;
|
|
color: #bdbdbd;
|
|
-webkit-transition: color 0.1s;
|
|
transition: color 0.1s;
|
|
}
|
|
|
|
.menu__link[data-submenu]::after {
|
|
content: '\e904';
|
|
font-family: 'feather';
|
|
position: absolute;
|
|
right: 0;
|
|
padding: 0.25em 1.25em;
|
|
color: #2a2b30;
|
|
}
|
|
|
|
.menu__link:hover,
|
|
.menu__link:focus,
|
|
.menu__link[data-submenu]:hover::after,
|
|
.menu__link[data-submenu]:focus::after {
|
|
color: #5c5edc;
|
|
}
|
|
|
|
.menu__link--current::before {
|
|
content: '\00B7';
|
|
font-size: 1.5em;
|
|
line-height: 0;
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 0.5em;
|
|
height: 4px;
|
|
color: #5c5edc;
|
|
}
|
|
|
|
[class^='animate-'],
|
|
[class*=' animate-'] {
|
|
visibility: visible;
|
|
}
|
|
|
|
.animate-outToRight .menu__item {
|
|
-webkit-animation: outToRight 0.6s both cubic-bezier(0.7, 0, 0.3, 1);
|
|
animation: outToRight 0.6s both cubic-bezier(0.7, 0, 0.3, 1);
|
|
}
|
|
#random-image {
|
|
width:360px;
|
|
height:275px;
|
|
}
|
|
|
|
.titunotf {
|
|
text-align:center;
|
|
color:#a480ff;
|
|
font-size: 3rem;
|
|
padding: 10vh 1em 0;
|
|
}
|
|
|
|
.map {
|
|
width: 15rem;
|
|
height: 15rem;
|
|
}
|
|
|
|
@-webkit-keyframes outToRight {
|
|
to {
|
|
opacity: 0;
|
|
-webkit-transform: translate3d(100%, 0, 0);
|
|
transform: translate3d(100%, 0, 0);
|
|
}
|
|
}
|
|
|
|
@keyframes outToRight {
|
|
to {
|
|
opacity: 0;
|
|
-webkit-transform: translate3d(100%, 0, 0);
|
|
transform: translate3d(100%, 0, 0);
|
|
}
|
|
}
|
|
|
|
.animate-outToLeft .menu__item {
|
|
-webkit-animation: outToLeft 0.6s both cubic-bezier(0.7, 0, 0.3, 1);
|
|
animation: outToLeft 0.6s both cubic-bezier(0.7, 0, 0.3, 1);
|
|
}
|
|
|
|
@-webkit-keyframes outToLeft {
|
|
to {
|
|
opacity: 0;
|
|
-webkit-transform: translate3d(-100%, 0, 0);
|
|
transform: translate3d(-100%, 0, 0);
|
|
}
|
|
}
|
|
|
|
@keyframes outToLeft {
|
|
to {
|
|
opacity: 0;
|
|
-webkit-transform: translate3d(-100%, 0, 0);
|
|
transform: translate3d(-100%, 0, 0);
|
|
}
|
|
}
|
|
|
|
.animate-inFromLeft .menu__item {
|
|
-webkit-animation: inFromLeft 0.6s both cubic-bezier(0.7, 0, 0.3, 1);
|
|
animation: inFromLeft 0.6s both cubic-bezier(0.7, 0, 0.3, 1);
|
|
}
|
|
|
|
@-webkit-keyframes inFromLeft {
|
|
from {
|
|
opacity: 0;
|
|
-webkit-transform: translate3d(-100%, 0, 0);
|
|
transform: translate3d(-100%, 0, 0);
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
-webkit-transform: translate3d(0, 0, 0);
|
|
transform: translate3d(0, 0, 0);
|
|
}
|
|
}
|
|
|
|
@keyframes inFromLeft {
|
|
from {
|
|
opacity: 0;
|
|
-webkit-transform: translate3d(-100%, 0, 0);
|
|
transform: translate3d(-100%, 0, 0);
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
-webkit-transform: translate3d(0, 0, 0);
|
|
transform: translate3d(0, 0, 0);
|
|
}
|
|
}
|
|
|
|
.animate-inFromRight .menu__item {
|
|
-webkit-animation: inFromRight 0.6s both cubic-bezier(0.7, 0, 0.3, 1);
|
|
animation: inFromRight 0.6s both cubic-bezier(0.7, 0, 0.3, 1);
|
|
}
|
|
|
|
@-webkit-keyframes inFromRight {
|
|
from {
|
|
opacity: 0;
|
|
-webkit-transform: translate3d(100%, 0, 0);
|
|
transform: translate3d(100%, 0, 0);
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
-webkit-transform: translate3d(0, 0, 0);
|
|
transform: translate3d(0, 0, 0);
|
|
}
|
|
}
|
|
|
|
@keyframes inFromRight {
|
|
from {
|
|
opacity: 0;
|
|
-webkit-transform: translate3d(100%, 0, 0);
|
|
transform: translate3d(100%, 0, 0);
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
-webkit-transform: translate3d(0, 0, 0);
|
|
transform: translate3d(0, 0, 0);
|
|
}
|
|
}
|
|
|
|
.menu__breadcrumbs {
|
|
font-size: 0.65em;
|
|
line-height: 1;
|
|
position: relative;
|
|
padding: 2.5em 3.75em 1.5em 2.5em;
|
|
}
|
|
|
|
.menu__breadcrumbs a {
|
|
font-weight: bold;
|
|
display: inline-block;
|
|
cursor: pointer;
|
|
vertical-align: middle;
|
|
letter-spacing: 1px;
|
|
text-transform: uppercase;
|
|
color: #5c5edc;
|
|
}
|
|
|
|
.menu__breadcrumbs a:last-child {
|
|
pointer-events: none;
|
|
}
|
|
|
|
.menu__breadcrumbs a:hover,
|
|
.menu__breadcrumbs a:focus {
|
|
color: #8182e0;
|
|
}
|
|
|
|
.menu__breadcrumbs a:not(:last-child)::after {
|
|
content: '\e902';
|
|
font-family: 'feather';
|
|
display: inline-block;
|
|
padding: 0 0.5em;
|
|
color: #33353e;
|
|
}
|
|
|
|
.menu__breadcrumbs a:not(:last-child):hover::after,
|
|
.menu__breadcrumbs a:not(:last-child):focus::after {
|
|
color: #33353e;
|
|
}
|
|
|
|
.menu__back {
|
|
font-size: 1.05em;
|
|
position: absolute;
|
|
z-index: 100;
|
|
top: 0;
|
|
right: 2.25em;
|
|
margin: 0;
|
|
padding: 1.365em 0.65em 0 0;
|
|
cursor: pointer;
|
|
color: #2a2b30;
|
|
border: none;
|
|
background: none;
|
|
}
|
|
|
|
.menu__back--hidden {
|
|
pointer-events: none;
|
|
opacity: 0;
|
|
}
|
|
|
|
.menu__back:hover,
|
|
.menu__back:focus {
|
|
color: #fff;
|
|
outline: none;
|
|
}
|
|
|
|
|
|
/* Open and close buttons */
|
|
|
|
.action {
|
|
position: absolute;
|
|
display: block;
|
|
margin: 0;
|
|
padding: 0;
|
|
cursor: pointer;
|
|
border: none;
|
|
background: none;
|
|
}
|
|
|
|
.action:focus {
|
|
outline: none;
|
|
}
|
|
|
|
.action--open {
|
|
font-size: 1.5em;
|
|
top: 1em;
|
|
left: 1em;
|
|
display: none;
|
|
color: #fff;
|
|
position: fixed;
|
|
z-index: 1000;
|
|
}
|
|
|
|
.action--close {
|
|
font-size: 1.1em;
|
|
top: 1.25em;
|
|
right: 1em;
|
|
display: none;
|
|
color: #45464e;
|
|
}
|
|
|
|
@media screen and (max-width: 40em) {
|
|
.action--open,
|
|
.action--close {
|
|
display: block;
|
|
}
|
|
.menu {
|
|
z-index: 1000;
|
|
top: 0;
|
|
width: 100%;
|
|
height: 100vh;
|
|
-webkit-transform: translate3d(-100%, 0, 0);
|
|
transform: translate3d(-100%, 0, 0);
|
|
-webkit-transition: -webkit-transform 0.3s;
|
|
transition: transform 0.3s;
|
|
}
|
|
.menu--open {
|
|
-webkit-transform: translate3d(0, 0, 0);
|
|
transform: translate3d(0, 0, 0);
|
|
}
|
|
#random-image {
|
|
width: 90%;
|
|
height: auto;
|
|
}
|
|
.map {
|
|
max-width: 15rem;
|
|
width: 80%;
|
|
height: auto;
|
|
}
|
|
}
|
|
|
|
.subtitulo {
|
|
text-align:left;
|
|
color:#a480ff;
|
|
font-weight: bold;
|
|
} |