placeholder. Originally lived inline in * public/index.html; extracted here as the single source of truth. */ /* User avatar badge */ .avatar-badge { width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 0.875rem; color: white; background: linear-gradient(135deg,#15803D,#166534); cursor: pointer; transition: transform 0.2s; } .avatar-badge:hover { transform: scale(1.1); } /* User dropdown */ .user-dropdown { opacity: 0; pointer-events: none; transform: translateY(-5px); transition: all 0.25s ease; } .user-dropdown.open { opacity: 1; pointer-events: auto; transform: translateY(0); } /* Signup CTA kept in the bar below the xl breakpoint, next to the burger. Sized here rather than with responsive Tailwind classes so the button doesn't depend on a `npm run css:build` pass to look right. Narrow phones get a tighter button: logo + CTA + burger share roughly 288px at 320px wide, and the German label ("Registrieren") is the longest of the four locales. */ .nav-bar-cta { padding: 0.5rem 1rem; font-size: 0.875rem; line-height: 1.25rem; } @media (max-width: 380px) { .nav-bar-cta { padding: 0.4375rem 0.75rem; font-size: 0.8125rem; } } @media (min-width: 640px) { .nav-bar-cta { padding: 0.625rem 1.25rem; } } /* Under ~350px the wordmark plus the longest label ("Registrieren") no longer share the row: flexbox shrinks the logo and its text spills under the green pill. Trim the wordmark there instead. `overflow` is the safety net for anything narrower still (folding-phone cover screens), where clipping the brand beats overlapping it. */ #navbar .nav-brand { min-width: 0; overflow: hidden; } @media (max-width: 350px) { #navbar .nav-brand-text { font-size: 1.25rem; } } /* Mobile menu slide-in */ .mobile-menu { transform: translateX(100%); transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1); } .mobile-menu.open { transform: translateX(0); } .mobile-overlay { opacity: 0; pointer-events: none; transition: opacity 0.35s ease; } .mobile-overlay.open { opacity: 1; pointer-events: auto; } /* ─── Skip-link ───────────────────────────────────────────── Injected by shared-nav.js as the very first child of . Visually hidden until it receives keyboard focus (Tab from URL bar), then slides into view in the top-left corner. Pressing Enter activates it and shifts focus to whichever element is wearing the `id="main"` anchor (added programmatically when shared-nav mounts). */ .skip-link { position: absolute; left: 0.5rem; top: -48px; z-index: 100; padding: 0.5rem 1rem; background: #15803D; color: #fff; font-weight: 600; border-radius: 0.375rem; text-decoration: none; transition: top 0.15s ease; } .skip-link:focus, .skip-link:focus-visible { top: 0.5rem; outline: 2px solid #fff; outline-offset: 2px; }