74 lines
1.6 KiB
SCSS
74 lines
1.6 KiB
SCSS
nav.main-menu {
|
|
@apply absolute top-0 left-0 py-3 px-6 w-full flex gap-6 justify-between md:justify-end;
|
|
z-index: 48;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.nav-menu-toggle {
|
|
@apply w-12 h-12 md:w-16 md:h-16 bg-transparent bg-no-repeat bg-center;
|
|
background-image: url("../../../img/shapes-background/menu-toggle-background.svg");
|
|
img {
|
|
@apply w-6 h-6 md:w-8 md:h-8;
|
|
box-sizing: border-box;
|
|
}
|
|
}
|
|
.menu[open] {
|
|
@apply overflow-y-auto;
|
|
}
|
|
.menu {
|
|
@apply bg-lhoist pl-6 w-full h-screen fixed top-0 bottom-0 left-0 flex flex-col justify-between;
|
|
height: 100dvh;
|
|
box-sizing: border-box;
|
|
// &[open] {
|
|
// @apply block;
|
|
// }
|
|
|
|
.cta--close {
|
|
@apply absolute top-8 right-8 p-8;
|
|
}
|
|
|
|
&__main-links {
|
|
@apply list-none flex flex-col gap-6 md:h-full pt-24 md:pt-0 justify-center w-full pl-0 xl:pl-32;
|
|
li {
|
|
a {
|
|
@apply text-white text-5xl md:text-6xl lg:text-8xl xl:text-9xl text-zuume font-bold block;
|
|
text-decoration: none;
|
|
|
|
&:hover {
|
|
@apply text-lhoistdark;
|
|
}
|
|
}
|
|
&:nth-child(2) {
|
|
a {
|
|
@apply md:ml-16 flex flex-col md:flex-row items-start md:items-center gap-x-8;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
&__legal-mentions {
|
|
@apply md:absolute pt-20 bottom-8 right-8 flex flex-col md:flex-row gap-6 list-none;
|
|
padding-inline-start: 0;
|
|
a {
|
|
@apply text-white text-xl font-semibold;
|
|
text-decoration: none;
|
|
&:hover {
|
|
@apply text-lhoistdark;
|
|
}
|
|
}
|
|
}
|
|
.span-construction {
|
|
@apply text-5xl;
|
|
}
|
|
}
|
|
|
|
.page-container:has(.menu[open]) {
|
|
transform: none !important;
|
|
.main-menu .nav-menu-toggle {
|
|
pointer-events: none;
|
|
}
|
|
}
|
|
|
|
body:has(.menu[open]) {
|
|
overflow: hidden;
|
|
}
|