337 lines
6.8 KiB
CSS
337 lines
6.8 KiB
CSS
.primary-menu-container {
|
|
@apply mx-auto
|
|
bg-primary
|
|
text-white
|
|
min-w-full
|
|
relative
|
|
h-fit
|
|
py-0
|
|
lg:py-3
|
|
px-8
|
|
2xl:px-20
|
|
my-0
|
|
!pb-5;
|
|
|
|
.website_logo {
|
|
@apply hidden lg:block;
|
|
}
|
|
|
|
.tools-container {
|
|
@apply hidden lg:flex;
|
|
}
|
|
|
|
a {
|
|
@apply text-white;
|
|
}
|
|
|
|
nav#primary-menu-nav {
|
|
@apply max-w-screen-2xl lg:w-full mx-auto;
|
|
}
|
|
.logo {
|
|
@apply mr-12
|
|
w-[190px]
|
|
xl:w-[222px];
|
|
}
|
|
#primary-menu {
|
|
@apply flex
|
|
flex-col
|
|
lg:flex-row
|
|
lg:items-center
|
|
justify-around
|
|
lg:justify-between;
|
|
|
|
ul {
|
|
@apply flex flex-col lg:flex-row
|
|
gap-x-2
|
|
lg:gap-x-4
|
|
xl:gap-x-8
|
|
pr-0;
|
|
}
|
|
|
|
/* Highlight using list element */
|
|
li.current-page-parent > a,
|
|
li.current_page_item > a {
|
|
@apply font-medium
|
|
text-white
|
|
decoration-secondary
|
|
underline
|
|
underline-offset-8;
|
|
}
|
|
|
|
li.menu-item {
|
|
@apply font-medium
|
|
text-lg
|
|
text-center;
|
|
|
|
&:hover > button,
|
|
&:hover > a,
|
|
a:focus {
|
|
@apply cursor-pointer
|
|
underline
|
|
underline-offset-8
|
|
decoration-1
|
|
text-white;
|
|
}
|
|
a:focus {
|
|
text-decoration: none;
|
|
}
|
|
|
|
/* IF SUBMENU CHILD */
|
|
.menu-item-submenu-toggle {
|
|
&:hover,
|
|
&:focus {
|
|
@apply text-secondary;
|
|
}
|
|
@apply relative pr-4;
|
|
&:after {
|
|
@apply absolute right-0;
|
|
content: '▼';
|
|
position: absolute;
|
|
display: inline-block;
|
|
line-height: 0.5;
|
|
height: 10px;
|
|
top: calc(50% - 4px);
|
|
width: 10px;
|
|
margin-left: 20px;
|
|
transform-origin: center;
|
|
background-repeat: no-repeat;
|
|
background-size: contain;
|
|
transition: all 0.3s ease-out;
|
|
}
|
|
}
|
|
.menu-item-submenu-toggle[aria-expanded='false']:after {
|
|
transform: rotate(0deg);
|
|
}
|
|
.menu-item-submenu-toggle[aria-expanded='true']:after {
|
|
transform: rotate(180deg);
|
|
}
|
|
}
|
|
|
|
li.menu-item.has-page-icon {
|
|
@apply gap-4 font-normal tracking-wide;
|
|
button,
|
|
a {
|
|
@apply flex flex-row lg:flex-col items-center justify-start lg:justify-end gap-4 font-normal tracking-wide;
|
|
}
|
|
.page_icon {
|
|
@apply w-7 h-7 object-contain object-center;
|
|
transition: transform 0.3s ease-out;
|
|
}
|
|
|
|
&:hover > button > .page_icon,
|
|
&:hover > a > .page_icon {
|
|
transform: scale(1.2);
|
|
}
|
|
}
|
|
li.menu-item.menu-item-has-children:hover {
|
|
/* &:hover .page_icon {
|
|
transform: none;
|
|
} */
|
|
@screen lg {
|
|
.menu-item-submenu-toggle:after {
|
|
transform: rotate(180deg);
|
|
}
|
|
/* .sub-menu {
|
|
display: block;
|
|
} */
|
|
}
|
|
}
|
|
/* submenus */
|
|
li .sub-menu {
|
|
@apply bg-carhop-green-700
|
|
p-6
|
|
px-6
|
|
|
|
mx-auto
|
|
lg:mx-0
|
|
static
|
|
w-full
|
|
grid-cols-2
|
|
lg:absolute;
|
|
z-index: 999;
|
|
display: none;
|
|
left: 0;
|
|
top: 100%;
|
|
opacity: 0;
|
|
translate: 0 -30px;
|
|
transition:
|
|
translate 0.3s ease-out,
|
|
display 0.3s,
|
|
opacity 0.3s;
|
|
transition-behavior: allow-discrete;
|
|
|
|
&.sub-menu-open {
|
|
display: grid;
|
|
opacity: 1;
|
|
translate: 0 0;
|
|
|
|
@starting-style {
|
|
opacity: 0;
|
|
translate: 0 -30px;
|
|
}
|
|
}
|
|
li.current-menu-item {
|
|
a {
|
|
@apply no-underline;
|
|
.menu-item__title {
|
|
@apply !underline underline-offset-8 decoration-1 decoration-secondary;
|
|
}
|
|
}
|
|
}
|
|
|
|
li {
|
|
@apply max-w-3xl w-full lg:text-left;
|
|
border-bottom: 1px solid #fff;
|
|
|
|
&:nth-last-child(-n + 2),
|
|
&:last-child {
|
|
border-bottom: none;
|
|
}
|
|
|
|
&:nth-child(odd) {
|
|
@apply ml-auto;
|
|
}
|
|
|
|
.page_subtitle {
|
|
@apply opacity-80 font-light mt-1;
|
|
}
|
|
|
|
&.menu-item.has-page-icon a {
|
|
@apply flex gap-6 items-center justify-start flex-row p-6 py-8;
|
|
.page_icon {
|
|
@apply w-12 h-12;
|
|
}
|
|
}
|
|
.menu-item__content-inner {
|
|
transition: all 0.3s ease-out;
|
|
span {
|
|
@apply block;
|
|
}
|
|
}
|
|
&:hover {
|
|
@apply bg-black/10;
|
|
a {
|
|
@apply gap-12;
|
|
.page_icon {
|
|
transform: none !important;
|
|
}
|
|
@apply no-underline;
|
|
.menu-item__content-inner {
|
|
transform: translateX(4px);
|
|
}
|
|
.menu-item__title {
|
|
@apply !underline;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
> a::after {
|
|
transform: translateY(-2px) rotate(-90deg);
|
|
content: '';
|
|
display: inline-block;
|
|
height: 10px;
|
|
width: 10px;
|
|
margin-left: 20px;
|
|
background-image: url('../resources/img/arrow_down_white.svg');
|
|
background-repeat: no-repeat;
|
|
background-size: contain;
|
|
transition: all 0.3s ease-out;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
/* RESPONSIVE */
|
|
@media (max-width: 960px) {
|
|
.primary-menu-container {
|
|
@apply w-fit mx-0;
|
|
#primary-menu {
|
|
@apply mt-0
|
|
left-0
|
|
z-40
|
|
hidden;
|
|
|
|
/* min-height: 100vh; */
|
|
height: fit-content;
|
|
top: 0;
|
|
width: fit-content;
|
|
|
|
> ul {
|
|
@apply max-w-xs
|
|
mx-auto;
|
|
/* min-height: 96vh; */
|
|
padding-top: 5vh;
|
|
}
|
|
li.menu-item {
|
|
@apply mt-0
|
|
text-center
|
|
text-white
|
|
font-medium
|
|
py-8
|
|
text-lg
|
|
pb-2
|
|
lg:pb-0;
|
|
|
|
.sub-menu li {
|
|
@apply text-sm;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
/* BURGER MENU */
|
|
body:has(.nav-open) {
|
|
@apply max-h-screen
|
|
overflow-hidden;
|
|
|
|
/* #content,
|
|
footer,
|
|
.wpml-ls-statics-footer {
|
|
@apply !hidden;
|
|
} */
|
|
}
|
|
|
|
.cta_plain_secondary,
|
|
.switch_language {
|
|
/* @apply self-end; */
|
|
}
|
|
}
|
|
|
|
@media (max-width: 960px) and (hover: none) {
|
|
/* ul {
|
|
@apply w-max mx-auto;
|
|
} */
|
|
.primary-menu-container {
|
|
li.menu-item {
|
|
/* @apply mx-auto */
|
|
/* !text-left */
|
|
}
|
|
}
|
|
}
|
|
|
|
body:has(.primary-menu-container .sub-menu-open) {
|
|
main {
|
|
@apply relative;
|
|
|
|
&:after {
|
|
@apply absolute inset-0 bg-black/50 z-10;
|
|
backdrop-filter: blur(4px);
|
|
content: '';
|
|
display: block;
|
|
width: 100%;
|
|
height: 100%;
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
z-index: 10;
|
|
|
|
transition: all 0.3s ease-out;
|
|
@starting-style {
|
|
backdrop-filter: blur(0px);
|
|
background-color: transparent;
|
|
}
|
|
}
|
|
}
|
|
}
|