.topbar { position: fixed; top: 0; left: 0; width: 100%; height: 30px; background: rgb(242 240 240 / 29%); box-shadow: 0 2px 1px rgb(0 0 0 / 5%); color: white; display: flex; align-items: center; justify-content: space-between; padding: 0 15px; font-size: 14px; font-weight: 500; transition: transform 0.1s cubic-bezier(0.4, 0, 0.2, 1); z-index: 3000; overflow: hidden; box-sizing: border-box; } .topbar.hidden { transform: translateY(-100%); } .topbar.hidden + .navbar { position: fixed; top: 0; transition: top 0.4s ease-in-out; z-index: 2500; } .topbar-left { flex-shrink: 0; padding-left: 10px; font-size: 10px; color: #564747; font-weight: 600; white-space: nowrap; font-family: "Montserrat", sans-serif ; } .topbar-right { display: flex; align-items: center; justify-content: flex-end; gap: 6px; padding-right: 0px; flex-shrink: 0; white-space: nowrap; overflow: hidden; margin-right: 45px; } .topbar-right a { display: flex; align-items: center; justify-content: center; min-width: 0; } .topbar-right img { width: 20px; height: auto; margin: 0 4px; display: inline-block; object-fit: contain; transition: transform 0.3s ease, opacity 0.3s ease; } .topbar-right a:hover img { transform: scale(0.9); opacity: 0.8; } @media screen and (max-width: 768px) { .topbar { font-size: 12px; height: 30px; padding: 0 8px; } .topbar-right { gap: 3px; padding-right: 15px; } .topbar-right img { width: 18px; } } @media (hover: none) and (pointer: coarse) { .topbar { visibility: hidden; } } @media (max-width: 1280px) { .topbar { visibility: hidden; } } @media (min-width: 1281px) { .topbar { visibility: visible; } }