/* Codrops Shape Overlays
https://github.com/ykob/shape-overlays
*/
/* Fade effect */
.js body {
opacity: 0;
transition: opacity 0.3s;
}
.js body.render {
opacity: 1;
}
.demo-1 {
--color-text: #fff;
--color-bg: #111;
--color-link: #fff;
--color-link-hover: #2735da;
--color-info: #fff;
--color-main-bg: #171619;
--path-fill-1: #413f46;
--path-fill-2: #e6e5ea;
--path-fill-3: #cccccc;
--color-title: #fff;
--font-family-title: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
--font-size-title: 7vmax;
--font-weight-title: 700;
--color-menu: #171616;
--color-menu-hover: #ffffff;
--font-family-menu: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
--font-size-menu: 3vmax;
--font-weight-menu: 700;
--button-bg: #fff;
--button-circle: #6b6b6b;
--button-line: #222;
}
html {
font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
min-height: 100vh;
color: #57585c;
color: var(--color-text);
background-color: #fff;
background-color: var(--color-bg);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
main {
position: relative;
width: 100%;
min-height: 100vh;
background-color: var(--color-main-bg);
}
.global-menu {
width: 100vw;
height: 90vh;
display: flex;
justify-content: center;
align-items: center;
position: fixed;
top: 0;
left: 0;
pointer-events: none;
z-index: 100;
}
.global-menu__item {
color: var(--color-menu);
font-family: var(--font-family-menu);
font-size: var(--font-size-menu);
font-weight: var(--font-weight-menu);
opacity: 0;
transform: translateY(-100%);
pointer-events: none;
display: block;
margin: 0.25em 0;
transition: transform 0.3s, opacity 0.3s;
transition-timing-function: ease-in;
text-decoration:none
}
.global-menu__item:hover,
.global-menu__item:focus {
color: var(--color-menu-hover);
outline:none
}
.c-offcanvas.is-open .global-menu__item {
opacity: 1;
transform: translateY(0) rotate(0);
pointer-events: auto;
transition-timing-function: ease;
}
.global-menu__item:nth-of-type(1) {
transition-delay: 0s;
}
.c-offcanvas.is-open .global-menu__item:nth-of-type(1) {
transition-delay: 0.85s;
}
.global-menu__item:nth-of-type(2) {
transition-delay: 0.05s;
}
.c-offcanvas.is-open .global-menu__item:nth-of-type(2) {
transition-delay: 0.8s;
}
.global-menu__item:nth-of-type(3) {
transition-delay: 0.1s;
}
.c-offcanvas.is-open .global-menu__item:nth-of-type(3) {
transition-delay: 0.75s;
}
.global-menu__item:nth-of-type(4) {
transition-delay: 0.15s;
}
.c-offcanvas.is-open .global-menu__item:nth-of-type(4) {
transition-delay: 0.7s;
}
.shape-overlays {
width: 100vw;
height: 100vh;
pointer-events: none;
position: fixed;
top: 0;
left: 0;
z-index:5
}
.shape-overlays.is-opened {
pointer-events: auto;
}
.shape-overlays__path:nth-of-type(1) {
fill: var(--path-fill-1);
}
.shape-overlays__path:nth-of-type(2) {
fill: var(--path-fill-2);
}
.shape-overlays__path:nth-of-type(3) {
fill: var(--path-fill-3);
}
.shape-overlays__path:nth-of-type(4) {
fill: var(--path-fill-4);
}
@-webkit-keyframes intervalHamburgerBorder {
0% {
opacity: 1;
-webkit-transform: scale(1);
transform: scale(1);
}
80% {
-webkit-transform: scale(1.6);
transform: scale(1.6);
}
100% {
opacity: 0;
-webkit-transform: scale(1.6);
transform: scale(1.6);
}
}
@keyframes intervalHamburgerBorder {
0% {
opacity: 1;
-webkit-transform: scale(1);
transform: scale(1);
}
80% {
-webkit-transform: scale(1.6);
transform: scale(1.6);
}
100% {
opacity: 0;
-webkit-transform: scale(1.6);
transform: scale(1.6);
}
}
.hamburger {
width: 64px;
height: 64px;
display: block;
position: relative;
cursor: pointer;
position: absolute;
top: 2.25em;
right: 2.25em;
z-index: 110;
border-radius: 50%;
border:0;
background-color: var(--button-bg);
pointer-events: auto;
-webkit-tap-highlight-color: rgba(0,0,0,0);
}
.hamburger::after {
width: 64px;
height: 64px;
box-sizing: border-box;
content: '';
display: block;
position: absolute;
top: 0;
left: 0;
pointer-events: none;
border: 4px solid var(--button-circle);
border-radius: 50%;
-webkit-animation-duration: 1.2s;
animation-duration: 1.2s;
-webkit-animation-name: intervalHamburgerBorder;
animation-name: intervalHamburgerBorder;
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;
}
.hamburger__line {
width: 28px;
height: 2px;
overflow: hidden;
position: absolute;
z-index: 10;
}
.hamburger__line-in {
width: 84px;
height: 2px;
position: absolute;
top: 0;
left: 0;
}
.hamburger__line-in::before,
.hamburger__line-in::after {
width: 28px;
height: 2px;
content: '';
display: block;
position: absolute;
top: 0;
background-color: var(--button-line);
}
.hamburger__line-in::before {
left: -56px;
}
.hamburger__line-in::after {
left: 0;
}
.hamburger__line--01,
.hamburger__line--02,
.hamburger__line--03,
.hamburger__line--cross01,
.hamburger__line--cross02 {
left: 18px;
}
.hamburger__line--01 {
top: 24.6px;
}
.hamburger__line--02,
.hamburger__line--cross01,
.hamburger__line--cross02 {
top: 31px;
}
.hamburger__line--03 {
top: 37.4px;
}
.hamburger__line--cross01 {
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
.hamburger__line--cross02 {
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
}
.hamburger__line {
-webkit-transition-duration: 0.6s;
transition-duration: 0.6s;
-webkit-transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
}
.hamburger__line-in {
-webkit-transition-duration: 0.6s;
transition-duration: 0.6s;
-webkit-transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
}
.hamburger__line-in::before,
.hamburger__line-in::after {
-webkit-transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
-webkit-transition-property: -webkit-transform;
transition-property: -webkit-transform;
transition-property: transform;
transition-property: transform, -webkit-transform;
}
.hamburger__line-in--cross01,
.hamburger__line-in--cross02 {
-webkit-transform: translateX(-33.3%);
transform: translateX(-33.3%);
}
.hamburger__line-in--01 {
-webkit-transition-delay: 0.2s;
transition-delay: 0.2s;
}
.hamburger__line-in--02 {
-webkit-transition-delay: 0.25s;
transition-delay: 0.25s;
}
.hamburger__line-in--02::before,
.hamburger__line-in--02::after {
-webkit-transition-delay: 0.05s;
transition-delay: 0.05s;
}
.hamburger__line-in--03 {
-webkit-transition-delay: 0.3s;
transition-delay: 0.3s;
}
.hamburger__line-in--03::before,
.hamburger__line-in--03::after {
-webkit-transition-delay: 0.1s;
transition-delay: 0.1s;
}
.hamburger__line-in--cross01 {
-webkit-transition-delay: 0.0s;
transition-delay: 0.0s;
}
.hamburger__line-in--cross02 {
-webkit-transition-delay: 0.05s;
transition-delay: 0.05s;
}
.hamburger__line-in--cross02::before,
.hamburger__line-in--cross02::after {
-webkit-transition-delay: 0.1s;
transition-delay: 0.1s;
}
.hamburger.is-active .hamburger__line-in--01,
.hamburger.is-active .hamburger__line-in--02,
.hamburger.is-active .hamburger__line-in--03 {
-webkit-transform: translateX(33.3%);
transform: translateX(33.3%);
}
.hamburger.is-active .hamburger__line-in--cross01,
.hamburger.is-active .hamburger__line-in--cross02 {
-webkit-transform: translateX(0);
transform: translateX(0);
}
.hamburger.is-active .hamburger__line-in--01 {
-webkit-transition-delay: 0s;
transition-delay: 0s;
}
.hamburger.is-active .hamburger__line-in--02 {
-webkit-transition-delay: 0.05s;
transition-delay: 0.05s;
}
.hamburger.is-active .hamburger__line-in--03 {
-webkit-transition-delay: 0.1s;
transition-delay: 0.1s;
}
.hamburger.is-active .hamburger__line-in--cross01 {
-webkit-transition-delay: 0.25s;
transition-delay: 0.25s;
}
.hamburger.is-active .hamburger__line-in--cross02 {
-webkit-transition-delay: 0.3s;
transition-delay: 0.3s;
}
.hamburger:hover .hamburger__line-in::before,
.hamburger:hover .hamburger__line-in::after {
-webkit-transform: translateX(200%);
transform: translateX(200%);
}
.hamburger:hover .hamburger__line-in--01::before,
.hamburger:hover .hamburger__line-in--01::after,
.hamburger:hover .hamburger__line-in--02::before,
.hamburger:hover .hamburger__line-in--02::after,
.hamburger:hover .hamburger__line-in--03::before,
.hamburger:hover .hamburger__line-in--03::after {
-webkit-transition-duration: 1s;
transition-duration: 1s;
}
.hamburger:hover .hamburger__line-in--cross01::before,
.hamburger:hover .hamburger__line-in--cross01::after,
.hamburger:hover .hamburger__line-in--cross02::before,
.hamburger:hover .hamburger__line-in--cross02::after {
-webkit-transition-duration: 0s;
transition-duration: 0s;
}
.hamburger.is-active:hover .hamburger__line-in--cross01::before,
.hamburger.is-active:hover .hamburger__line-in--cross01::after,
.hamburger.is-active:hover .hamburger__line-in--cross02::before,
.hamburger.is-active:hover .hamburger__line-in--cross02::after {
-webkit-transition-duration: 1s;
transition-duration: 1s;
}
.hamburger.is-active:hover .hamburger__line-in--01::before,
.hamburger.is-active:hover .hamburger__line-in--01::after,
.hamburger.is-active:hover .hamburger__line-in--02::before,
.hamburger.is-active:hover .hamburger__line-in--02::after,
.hamburger.is-active:hover .hamburger__line-in--03::before,
.hamburger.is-active:hover .hamburger__line-in--03::after {
-webkit-transition-duration: 0s;
transition-duration: 0s;
}
.demo-title {
color: var(--color-title);
font-family: var(--font-family-title);
font-size: var(--font-size-title);
font-weight: var(--font-weight-title);
}
/*
Offcanvas
*/
.hamburger:focus {
outline:none;
background-color: #c04444;
}
.hamburger:focus::after {
-webkit-animation-name: none;
animation-name: none;
border-color: #fff;
}
.c-offcanvas-content-wrap {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background-color: var(--color-bg);
}
.c-offcanvas--demo-1 {
background:var(--path-fill-4);
height: 100%;
transform: translate3d(0,-100%,0);
}