/* ============================================================ Polpharma Biologics — NAVBAR + NAV MASK + GET IN TOUCH (_shared) Komponent globalny (Figma 3885:3085 dark / 4473:6892 light). Kształt tła (pigułki + gooey) generuje nav-shape.js. Maska koloru (system #2) — logika w nav-mask.js. Markup: _shared/nav/nav.html (wklejany 1:1 na początek ). ============================================================ */ :root { --nav-bg-blur: 15.1956px; /* Figma Background blur 30.39 ÷ 2 (wariant dark) */ --nav-stroke-light: #E5E5E5; /* border kształtu w wariancie light */ --nav-stroke-width: 2; /* SVG px; clip połówkuje → efektywnie 1px inside */ } .svg-defs { position: absolute; } /* ---------- NAV (site-level, fixed) ---------- */ .nav_component { position: fixed; top: 0; left: 0; right: 0; z-index: 50; display: flex; align-items: center; justify-content: space-between; padding: 1.5rem 2rem; } .nav_brand { display: flex; align-items: center; position: relative; } /* prawdziwe logo (SVG 176×28) — białe na navie / ciemne w masce (dwa pliki, theming = src) */ .nav_brand-logo { height: 1.75rem; width: auto; display: block; } /* ---------- Navigation Links (gooey) ---------- */ .nav_links-component { display: flex; align-items: center; gap: 0.625rem; /* 10px */ } /* motyw: ciemne tło strony */ .nav_links-component.is-dark-bg { --nav-link-color: var(--lab-white); --nav-shape-fill: var(--mist); --nav-shape-fill-opacity: 0.07; --nav-shape-stroke: none; } .nav_links-component.is-dark-bg .nav_menu-bg path.nav_menu-shape { filter: url(#navInnerShadow); } /* motyw: jasne tło strony */ .nav_links-component.is-light-bg { --nav-link-color: var(--deep-green); --nav-shape-fill: var(--lab-white); --nav-shape-fill-opacity: 1; --nav-shape-stroke: var(--nav-stroke-light); } .nav_links-component.is-light-bg .nav_menu-blur { display: none; } .nav_menu { position: relative; display: flex; align-items: center; gap: 0.625rem; /* 10px — od tego liczone są "fale" łączników */ height: 2.625rem; /* 42px */ flex-shrink: 0; } /* warstwa 1: backdrop blur przycięty do kształtu (clip-path z JS; tylko dark) */ .nav_menu-blur { position: absolute; inset: 0; -webkit-backdrop-filter: blur(var(--nav-bg-blur)); backdrop-filter: blur(var(--nav-bg-blur)); pointer-events: none; } /* warstwa 2: kształt Union */ .nav_menu-bg { position: absolute; inset: 0; height: 100%; display: block; overflow: visible; pointer-events: none; } .nav_menu-shape { fill: var(--nav-shape-fill); fill-opacity: var(--nav-shape-fill-opacity); stroke: var(--nav-shape-stroke); stroke-width: var(--nav-stroke-width); /* clip-path do własnego kształtu ustawia JS → stroke renderuje się inside */ } /* warstwa 3: linki — auto-szerokość z paddingu, kształt nadąża */ .nav_link { position: relative; display: flex; align-items: center; height: 100%; padding: 0 1.25rem; /* 20px — jak w Figmie */ color: var(--nav-link-color); text-decoration: none; white-space: nowrap; } .nav_link.is-drop { gap: 0.125rem; } .nav_link-arrow { width: 1.125rem; /* 18px */ height: 1.125rem; flex-shrink: 0; } /* btn - cta (identyczny w obu wariantach) */ .nav_cta { display: flex; align-items: center; justify-content: center; height: 2.625rem; /* 42px */ padding: 0.625rem 1.375rem; /* 10px 22px */ border-radius: 1.25rem; /* 20px */ background: var(--red); text-decoration: none; flex-shrink: 0; } /* ---------- NAV MASK (system #2: maska koloru na overlayu) ---------- Warstwa fixed nad bazowym nav; górna krawędź CLIP-PATH = krawędź jasnej sekcji (nav-mask.js, scrub 1:1). Kopia w środku stoi NIERUCHOMO. UWAGA: celowo clip-path, NIE overflow+kontr-transform — overflow: clip przepuszczał composited/fixed warstwy (ghost logo). */ .nav-mask_component { position: fixed; inset: 0; z-index: 51; /* nad bazowym nav (50); pod loaderem (100) */ pointer-events: none; clip-path: inset(100% 0% 0% 0%); /* start: nic nie widać (GSAP animuje) */ will-change: clip-path; } .nav-mask_inner { position: absolute; inset: 0; } /* kopia CIEMNA (jasne tła) — ABSOLUTE, nie fixed! (fixed uciekał spod clipu) */ .nav-mask_inner .nav_component.is-dark { position: absolute; } /* ---------- GET IN TOUCH (site-level, fixed) ---------- */ .contact-cta_component { position: fixed; right: 2rem; bottom: 2rem; z-index: 50; display: flex; align-items: center; gap: 0.5rem; padding: 0.875rem 1.5rem; border-radius: 9999px; background: rgba(255, 255, 255, 0.7); backdrop-filter: blur(8px); color: var(--deep-green); } .contact-cta_dots { width: 0.75rem; height: 0.75rem; background: radial-gradient(circle, var(--red) 0.125rem, transparent 0.125rem) 0 0 / 0.375rem 0.375rem; } .contact-cta_label { font-weight: 500; }