/** * agentsclub V2 - shared cockpit chrome (topbar, switcher, page wrap, panel) * * Extracted from v2-docs/{zadania,badanie-rynku-w-niszy}.html, which define * this chrome byte-for-byte identically. kurs.html (the lesson player) uses * its own `.top`/`.top-in` bar instead of `.topbar` - see player.css (built * separately, since the player has no switcher and a different progress * chrome entirely). * * Requires css/v2/tokens.css + css/v2/base.css loaded first. */ /* width:100% is load-bearing, not decorative: .wrap is a direct flex item of body (body{display:flex;flex-direction:column} in base.css, for the sticky-footer layout). A flex item's cross-axis auto margins (our margin:0 auto) suppress align-items:stretch, so without an explicit width the item shrinks to its content's intrinsic size instead of filling up to max-width - on wide content (zadania's task cards) that's invisible, but course.php's narrower head/modules content shrank .wrap to ~560px. */ .wrap{width:100%;max-width:880px;margin:0 auto;padding:0 24px} /* ---------- topbar ---------- */ .topbar{ position:sticky;top:0;z-index:20; background:color-mix(in srgb,var(--bg) 86%,transparent); backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px); border-bottom:1px solid var(--hair); transition:background-color .2s ease-out; } .topbar-in{ max-width:880px;margin:0 auto;padding:14px 24px; display:flex;align-items:center;gap:20px; } /* Wszystko po logo trzyma się PRAWEJ krawędzi, i to jest jedyna reguła, która o tym decyduje. Wcześniej robił to `margin-left:auto` na pasku sekcji - czyli prawa krawędź zależała od tego, czy akurat ten jeden element jest widoczny. Przestał być, gdy sekcje zeszły poniżej 720px do menu konta, i awatar przykleił się do logo. Auto-margines na logu nie ma tego problemu: pcha w prawo wszystko, co po nim zostało, niezależnie od tego, czy jest tego pięć elementów, czy jeden - a skład tego paska zmienia się i z punktem łamania, i z tym, czy ktoś jest zalogowany. Nie dokładaj drugiego `margin-left:auto` po prawej stronie: dwa automatyczne marginesy DZIELĄ wolną przestrzeń między siebie, więc zamiast przy krawędzi element ląduje mniej więcej pośrodku. Dokładnie dlatego zniknęła reguła `.topbar-auth .theme-btn{margin-left:auto}` z auth.css. */ .topbar-in > .wordmark-link{margin-right:auto} /* Wordmark agentsclub (rebranding 2026-10): Funnel Sans 700, odstęp -5%, małymi literami, czysta czerń. W ciemnym motywie czerń znikłaby na tle, więc tam znak bierze kolor tuszu. Bez podkreślenia i kursora z dawnego znaku agentsclub. */ .wordmark{ font-family:"Funnel Sans",system-ui,sans-serif; font-weight:700;font-size:17px;letter-spacing:-.05em;line-height:1; color:#000;display:inline-block;white-space:nowrap; padding-right:.05em; /* oddaje ujemny odstęp za ostatnią literą, znak jest optycznie wyśrodkowany */ } html.dark .wordmark, html[data-theme="dark"] .wordmark{color:var(--ink)} a.wordmark-link{text-decoration:none;color:inherit} .wordmark.wm-lg{font-size:24px} .wordmark.wm-sm{font-size:15px} /* ---------- section switcher (Warsztaty / Kurs / Zadania) ---------- Renamed from the mockups' `.nav` per the project's own markup convention (