/* ========================= TOPBAR (WIZYTÓWKA NAD NAV) — WSPÓLNA DLA WSZYSTKICH STRON ========================= */ html.has-topbar { --navbar-h: clamp(60px, 8vw, 80px); /* Szersza (wyższa) belka */ --topbar-h: 44px; /* Motyw domyślny (nadpisywany przez klasy na ) */ --topbar-bg: linear-gradient(135deg, rgba(10, 10, 10, 0.94) 0%, rgba(18, 18, 18, 0.92) 100%); --topbar-text: rgba(255, 255, 255, 0.92); --topbar-icon: rgba(255, 255, 255, 0.92); --topbar-border: rgba(255, 255, 255, 0.12); --topbar-pill-bg: rgba(255, 255, 255, 0.06); --topbar-pill-border: rgba(255, 255, 255, 0.14); --topbar-pill-bg-hover: rgba(255, 255, 255, 0.10); --topbar-pill-border-hover: rgba(255, 255, 255, 0.20); --topbar-focus: rgba(255, 255, 255, 0.75); --topbar-shadow: 0 10px 30px rgba(0, 0, 0, 0.35); } /* Motywy (opcjonalnie) */ html.has-topbar.topbar-theme-beige { --topbar-bg: linear-gradient(135deg, rgba(252, 248, 241, 0.96) 0%, rgba(245, 236, 223, 0.96) 100%); --topbar-text: rgba(11, 26, 23, 0.92); --topbar-icon: rgba(6, 79, 61, 0.92); --topbar-border: rgba(160, 120, 80, 0.18); --topbar-pill-bg: rgba(6, 79, 61, 0.06); --topbar-pill-border: rgba(6, 79, 61, 0.14); --topbar-pill-bg-hover: rgba(6, 79, 61, 0.10); --topbar-pill-border-hover: rgba(6, 79, 61, 0.20); --topbar-focus: rgba(6, 79, 61, 0.65); --topbar-shadow: 0 8px 26px rgba(17, 12, 8, 0.10); } html.has-topbar.topbar-theme-mint { --topbar-bg: linear-gradient(135deg, rgba(6, 79, 61, 0.92) 0%, rgba(58, 155, 133, 0.88) 100%); --topbar-text: rgba(255, 255, 255, 0.94); --topbar-icon: rgba(255, 255, 255, 0.94); --topbar-border: rgba(255, 255, 255, 0.16); --topbar-pill-bg: rgba(255, 255, 255, 0.08); --topbar-pill-border: rgba(255, 255, 255, 0.18); --topbar-pill-bg-hover: rgba(255, 255, 255, 0.12); --topbar-pill-border-hover: rgba(255, 255, 255, 0.26); --topbar-focus: rgba(255, 255, 255, 0.85); --topbar-shadow: 0 8px 26px rgba(0, 0, 0, 0.14); } /* Brak “skakania”: padding-top animujemy razem z chowaniem topbara */ html.has-topbar body { padding-top: calc(var(--navbar-h) + var(--topbar-h)); transition: padding-top 240ms ease; } html.has-topbar.topbar-hidden body { padding-top: var(--navbar-h); } /* Wizytówka jako fixed – nie zajmuje miejsca w layoucie */ html.has-topbar .topbar { position: fixed; top: 0; left: 0; right: 0; height: var(--topbar-h); display: flex; align-items: center; background: var(--topbar-bg); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border-bottom: 1px solid var(--topbar-border); box-shadow: var(--topbar-shadow); z-index: 99999; transform: translateY(0); opacity: 1; transition: transform 240ms ease, opacity 180ms ease; will-change: transform, opacity; } html.has-topbar.topbar-hidden .topbar { transform: translateY(-100%); opacity: 0; pointer-events: none; } /* Kontener topbara — używa też .navbar-container dla idealnego wyrównania */ html.has-topbar .topbar-container.navbar-container { height: 100% !important; display: flex !important; align-items: center !important; justify-content: space-between !important; gap: clamp(0.75rem, 2vw, 1.25rem) !important; color: var(--topbar-text); font-size: 0.92rem; line-height: 1.2; font-weight: 600; letter-spacing: 0.2px; } html.has-topbar .topbar-left, html.has-topbar .topbar-right { display: flex; align-items: center; gap: clamp(0.75rem, 2vw, 1.25rem); min-width: 0; } html.has-topbar .topbar-left { flex: 1 1 auto; } html.has-topbar .topbar-right { flex: 0 0 auto; justify-content: flex-end; } html.has-topbar .topbar-item { display: inline-flex; align-items: center; gap: 0.5rem; white-space: nowrap; } html.has-topbar .topbar-left .topbar-item span { overflow: hidden; text-overflow: ellipsis; max-width: min(42vw, 520px); } html.has-topbar .topbar-item i { color: var(--topbar-icon); font-size: 0.95em; } /* Linki tel/mail — “normalny tekst” bez obramówek */ html.has-topbar .topbar-link { color: inherit; text-decoration: none; padding: 0; border: 0; background: transparent; border-radius: 0; transition: opacity 0.2s ease; } html.has-topbar .topbar-link:hover { text-decoration: underline; opacity: 0.95; } html.has-topbar .topbar-link:focus-visible, html.has-topbar .topbar-social a:focus-visible { outline: 2px solid var(--topbar-focus); outline-offset: 2px; } html.has-topbar .topbar-social { display: inline-flex; align-items: center; gap: 0.75rem; } html.has-topbar .topbar-social a { color: var(--topbar-icon); text-decoration: none; display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 999px; background: var(--topbar-pill-bg); border: 1px solid var(--topbar-pill-border); transition: background 0.2s ease, transform 0.2s ease, border-color 0.2s ease; } html.has-topbar .topbar-social a:hover { background: var(--topbar-pill-bg-hover); transform: translateY(-1px); border-color: var(--topbar-pill-border-hover); } /* Na średnich szerokościach chowamy e-mail (zostaje adres+tel+social) */ @media (max-width: 62em) { html.has-topbar .topbar-container.navbar-container { font-size: 0.88rem; } html.has-topbar .topbar-left a.topbar-link[href^="mailto:"] { display: none; } } /* Navbar przesuwa się w górę, gdy topbar znika */ html.has-topbar nav.navbar { transition: top 240ms ease !important; } html.has-topbar:not(.topbar-hidden) nav.navbar { top: var(--topbar-h) !important; } html.has-topbar.topbar-hidden nav.navbar { top: 0 !important; } /* Mobile: wizytówka ukryta */ @media (max-width: 48em) { html.has-topbar { --topbar-h: 0px; } html.has-topbar .topbar { display: none !important; } } @media (prefers-reduced-motion: reduce) { html.has-topbar body, html.has-topbar .topbar, html.has-topbar nav.navbar { transition: none !important; } }