/* ========================================================================== Nawigacja górna "Feedback" — wspólna dla landingu i podstron. Znaczniki: templates/_topnav.html. Zachowanie: static/js/nav.js. Reguły przeniesione tu z landing.css, żeby ten sam arkusz obsługiwał strony spod base.html (style.css) i landing (landing.css). Tokeny pochodzą z static/css/feedback-ds/tokens/*.css, więc tryb wysokiego kontrastu (przemapowanie tokenów w style.css / landing.css) działa bez wyjątków. W base.html linkowany PO style.css — celowo, żeby wygrywał specyficznością równorzędnych selektorów. ========================================================================== */ nav.topnav { display: flex; align-items: center; justify-content: space-between; gap: var(--space-5); padding: 16px 48px; } .topnav .logo { display: inline-flex; align-items: center; text-decoration: none; } .topnav .logo-img { display: block; height: 46px; width: auto; } .navlinks { display: flex; gap: 32px; font-size: 15px; font-weight: 600; list-style: none; margin: 0; padding: 0; } .navlinks a { color: var(--text-primary); text-decoration: none; } .navlinks a:hover { color: var(--rose-600); } .navauth { display: flex; align-items: center; gap: var(--space-5); } .navlogin { font-size: 15px; font-weight: 700; text-decoration: none; color: var(--text-primary); } .navlogin:hover { color: var(--rose-600); } /* Odpowiednik core/Button.jsx variant="primary" size="s" (patrz .fb-btn w landing.css) — powielone tu zamiast dołączane z landing.css, bo topnav.css ładują też podstrony spod base.html, które go nie mają. */ .nav-cta { display: inline-flex; align-items: center; justify-content: center; font-family: var(--font-body); font-size: var(--text-body-s); font-weight: 700; line-height: 1; padding: 8px 16px; border-radius: var(--radius-pill); border: var(--border-w) solid var(--brand-primary-hover); background: var(--brand-primary-hover); color: var(--white); text-decoration: none; transition: background var(--duration-base) var(--ease-standard), border-color var(--duration-base) var(--ease-standard); } .nav-cta:hover { background: var(--brand-primary-active); border-color: var(--brand-primary-active); color: var(--white); } /* --- Menu konta ---------------------------------------------------------- */ .topnav .nav-dropdown, .topnav .nav-account { position: relative; list-style: none; } .topnav .nav-dropdown-toggle { display: inline-flex; align-items: center; gap: var(--space-1); font-family: inherit; font-size: 15px; font-weight: 700; color: var(--text-primary); background: none; border: none; padding: 0; cursor: pointer; } .topnav .nav-dropdown-toggle:hover { color: var(--rose-600); } .topnav .nav-dropdown-caret { font-size: 11px; } .topnav .nav-dropdown-menu { position: absolute; right: 0; left: auto; top: calc(100% + var(--space-2)); z-index: 500; display: none; min-width: 220px; margin: 0; padding: var(--space-2); list-style: none; background: var(--surface-card); border: var(--border-w) solid var(--black); border-radius: var(--radius-m); box-shadow: var(--shadow-m); } /* Niewidzialny „mostek” zakrywający odstęp między przyciskiem a listą — bez niego wskaźnik myszy wypada poza .nav-dropdown w drodze do pozycji menu i menu zamyka się, zanim da się w coś kliknąć. */ .topnav .nav-dropdown-menu::before { content: ""; position: absolute; left: 0; right: 0; bottom: 100%; height: calc(var(--space-2) + var(--border-w)); } .topnav .nav-dropdown.open .nav-dropdown-menu { display: block; } /* Fallback dla myszy bez JS-a. Gdy nav.js wystartuje, dokłada .js-nav na i rozwijaniem sterują wtedy wyłącznie zdarzenia (klasa .open + aria-expanded). Inaczej sam :hover blokowałby zamknięcie menu kliknięciem przycisku. */ @media (hover: hover) { html:not(.js-nav) .topnav .nav-dropdown:hover .nav-dropdown-menu { display: block; } } .topnav .nav-dropdown-menu a, .topnav .nav-logout-btn { display: block; width: 100%; padding: var(--space-2) var(--space-3); border-radius: var(--radius-s); font-family: inherit; font-size: var(--text-body-s); font-weight: 600; text-align: left; text-decoration: none; color: var(--text-primary); background: none; border: none; cursor: pointer; } .topnav .nav-dropdown-menu a:hover, .topnav .nav-dropdown-menu a:focus-visible, .topnav .nav-logout-btn:hover, .topnav .nav-logout-btn:focus-visible { background: var(--surface-rose); color: var(--text-primary); } /* Wylogowanie musi być POST-em (CSRF), więc to