.navbar { background: white; height: 80px; display: flex; justify-content: space-between; align-items: center; position: fixed; top: 0; left: 0; width: 100%; z-index: 2500; padding: 0 20px; box-shadow: none; transition: transform 0.1s cubic-bezier(0.4, 0, 0.2, 1); } .menu.active ~ .navbar { position: fixed; top: 0; width: 100%; z-index: 3000; background: white; } .navbar-hidden { transform: translateY(-120%) !important; } .nav-left { display: flex; align-items: center; position: relative; } .logo { position: relative; display: inline-block; top: 13.5px; left: 20px; z-index: 1000; } .nav-links { list-style: none; display: flex; gap: 30px; justify-content: center; flex-grow: 1; position: relative; right: 50px; } .nav-links li a { text-decoration: none; font-size: 18px; font-family: 'MonaSans', sans-serif; font-weight: 700; letter-spacing: 1px; color: rgb(30, 30, 30); padding: 6px 12px; display: block; position: relative; border-radius: 12px; top: 15px; transition: background 120ms ease-out, color 120ms ease-out, transform 120ms cubic-bezier(0.4, 0, 0.2, 1), box-shadow 120ms ease-out; } .nav-links a { position: relative; color: #1e1e1e; z-index: 1; transition: color 0.3s ease; } .nav-links a::before { content: ""; position: absolute; bottom: 0; left: 0; width: 100%; height: 100%; background: #e8f3fb; transform: scaleY(0); transform-origin: bottom; transition: transform 0.3s ease; z-index: -1; } .nav-links a:hover::before { transform: scaleY(1); } .nav-links a:hover { color: #000000; } @media screen and (max-width: 1024px) { .nav-links { display: none; } } .burger { display: flex; flex-direction: column; justify-content: space-between; align-items: flex-start; width: 35px; height: 28px; cursor: pointer; position: absolute; right: 20px; z-index: 4000; transition: transform 0.3s ease-in-out; } .burger span { display: block; height: 4px; background-color: #313135; border-radius: 8px; transition: 0.2s cubic-bezier(0.34, 1.56, 0.64, 1); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12); } .burger span:nth-child(1) { width: 50%; align-self: flex-start; } .burger span:nth-child(2) { width: 75%; align-self: flex-start; } .burger span:nth-child(3) { width: 120%; align-self: flex-start; } .burger span:not(:last-child) { margin-bottom: 6px; } .burger.active span:nth-child(1) { transform: translateY(10px) rotate(45deg); background: #1f1f1f; width: 120%; } .burger.active span:nth-child(2) { opacity: 0; } .burger.active span:nth-child(3) { transform: translateY(-10px) rotate(-45deg); background: #797979; } .menu { position: fixed; top: 79px; left: 0; width: 100%; background-color: #fff; padding: 15px 20px; opacity: 0; visibility: hidden; z-index: 3000; border-top: 1px solid #eeeeee; overflow-y: auto; transition: opacity 0.3s ease, visibility 0.3s ease; } .menu.active { opacity: 1; visibility: visible; } .menu a { display: block; opacity: 0; transform: translateX(-30px); color: black; font-family: 'MonaSans', sans-serif; font-size: 18px; font-weight: 700; padding: 13px 20px; text-decoration: none; white-space: nowrap; transition: opacity 0.25s ease-in-out 0.1s, transform 0.4s cubic-bezier(0.33, 1, 0.68, 1); } .menu.active a { opacity: 1; transform: translateX(0); } .menu.active a:nth-child(1) { transition-delay: 0.1s; } .menu.active a:nth-child(2) { transition-delay: 0.2s; } .menu.active a:nth-child(3) { transition-delay: 0.3s; } .menu.active a:nth-child(4) { transition-delay: 0.4s; } .menu.active a:nth-child(5) { transition-delay: 0.5s; } .menu a:hover { color: #5a5a5a; } @media screen and (max-width: 1025px) { .burger { display: flex; flex-direction: column; justify-content: space-between; align-items: center; width: 21px; height: 21px; top: 46px; position: absolute; cursor: pointer; left: 10px; z-index: 9999; } .logo { width: 120px; height: auto; max-height: 75px; position: relative; left: 60px; transition: transform 0.3s ease, filter 0.3s ease; } } .logo-img { width: 120px; max-height: 75px; height: auto; display: block; position: relative; transition: filter 0.25s ease-in-out; shape-rendering: geometricPrecision; text-rendering: geometricPrecision; image-rendering: auto; } .logo-img:hover { filter: grayscale(100%); } @media screen and (max-width: 1025px) { .navbar { position: fixed; top: 0; width: 100%; z-index: 2500; } } @media screen and (min-width: 1127px) { .menu, .burger { display: none; } } .menu-overlay { position: fixed; top: 0; left: 0; width: 100vw; height: 110vh; background: linear-gradient( to bottom, rgba(0, 0, 0, 0) 0px, rgba(0, 0, 0, 0) 80px, rgba(0, 0, 0, 0.5) 81px, rgba(0, 0, 0, 0.5) 100% ); opacity: 0; pointer-events: none; z-index: 2000; will-change: opacity; backface-visibility: hidden; } .menu.active ~ .menu-overlay { opacity: 1; pointer-events: auto; } body.menu-open { height: 100vh !important; overflow: hidden !important; position: fixed !important; width: 100%; } body.scroll-locked { overflow: hidden; position: relative; } #navbar-logo { content: url(../images/navbarlogo.svg); width: 125px; height: 40px; } @media screen and (max-width: 1025px) { .logo { position: absolute; right: 20px; top: 20px; left: auto !important; z-index: 9999; width: 30px; } #navbar-logo { content: url(../images/mobilenavbar.svg); height: 30px; width: auto; max-width: 85vw; top: 20px;; } } .topbar, .navbar { will-change: transform; backface-visibility: hidden; transform: translateZ(0); } @media (max-width: 1280px) { .navbar { transform: translateY(-30px) !important; top: 0 !important; } .topbar { transform: translateY(-100%) !important; } } .lang-dropdown-button:hover .lang-arrow { stroke: #3daded;; transform: rotate(180deg); transition: all 0.25s ease; } .language-switcher ul li { position: relative; padding: 10px 18px; cursor: pointer; font-family: MonaSans, sans-serif; font-size: 14px; border-radius: 6px; overflow: hidden; transition: all 0.3s ease; background-color: #fff; z-index: 0; } .language-switcher ul li::before { content: ""; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient(to right, #f3f4f6, #e5e7eb); z-index: -1; transition: left 0.4s ease; } .language-switcher ul li:hover::before { left: 0; } .language-switcher ul li:hover { color: #3daded;; transform: translateX(2px); } .lang-arrow { transition: all 0.25s ease; } .language-switcher { display: inline-block; position: relative; margin-left: 12px; } .language-switcher button { padding: 8px 14px; font-size: 14px; border: 1px solid #ddd; background-color: white; border-radius: 5px; cursor: pointer; } .world-icon { position: relative; top: 2px; left: 5px; fill: #89919D; transition: transform 0.2s ease, fill 0.2s ease; transform-origin: center; } .lang-dropdown-button:hover .world-icon { transform: scale(1.2) translateY(-2px); fill: #3daded;; } @media (max-width: 1024px) { .language-switcher { position: absolute !important; right: 10px !important; top: 10px !important; transform: translateX(0); max-width: calc(100vw - 20px); } .lang-dropdown-button { font-size: 12px !important; padding: 4px 10px !important; white-space: nowrap; top: 32px !important; } .language-switcher ul { top: 71px !important; right: 10px !important; min-width: 120px; font-size: 13px; } .language-switcher ul li { padding: 6px 12px; } }