/* ================================================================= TryVinci – Navigation ================================================================= */ .tv-nav { position: fixed; top: 0; left: 0; right: 0; z-index: 100; transition: background 0.4s ease, padding 0.4s ease, color 0.4s ease, box-shadow 0.4s ease; padding: 2rem 0; color: #fff; background: linear-gradient(to bottom, rgba(0,0,0,.55), transparent); } /* Scrolled state – set via JS */ .tv-nav[data-scrolled="true"], .tv-nav[data-mobile-open="true"], .tv-nav[data-page="inner"] { background: rgba(255,255,255,.92); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); box-shadow: 0 1px 8px rgba(0,0,0,.08); padding: 1rem 0; color: #18181b; } .tv-nav__inner { max-width: 80rem; margin: 0 auto; padding: 0 1.5rem; display: flex; align-items: center; justify-content: space-between; } /* ---- Logo ---- */ .tv-nav__logo { display: flex; align-items: center; gap: 0.75rem; text-decoration: none; color: inherit; position: relative; z-index: 1; } /* Specyficzność 0,2,0 — musi wygrać z WooCommerce `.woocommerce-page img` (0,1,1; height:auto/max-width:100%) na stronach sklepowych (produkt/ checkout/order-received/moje konto), inaczej logo renderuje się w pełnym rozmiarze (81×84px) i rozpycha header. Ten sam wzorzec co fix logo UE (.tv-nav__eu .tv-nav__eu-img) poniżej. */ .tv-nav .tv-nav__logo-img { height: 2rem; width: auto; max-width: none; object-fit: contain; } /* Show white logo by default (transparent nav), dark logo when scrolled */ .tv-nav__logo-img--dark { display: none; } .tv-nav__logo-img--white { display: block; } .tv-nav[data-scrolled="true"] .tv-nav__logo-img--dark, .tv-nav[data-mobile-open="true"] .tv-nav__logo-img--dark, .tv-nav[data-page="inner"] .tv-nav__logo-img--dark { display: block; } .tv-nav[data-scrolled="true"] .tv-nav__logo-img--white, .tv-nav[data-mobile-open="true"] .tv-nav__logo-img--white, .tv-nav[data-page="inner"] .tv-nav__logo-img--white { display: none; } .tv-nav__logo-text { font-size: 1.5rem; line-height: 1; color: inherit; } .tv-nav__logo-try { font-weight: 900; } .tv-nav__logo-vinci { font-weight: 600; } /* ── Brand: logo TryVinci + logo UE obok siebie ── */ .tv-nav__brand { display: flex; align-items: center; gap: 0.75rem; min-width: 0; } /* Logo „Dofinansowane przez UE" — ZAWSZE biały kafel pod logotypem, żeby czarny tekst był czytelny niezależnie od tła headera. */ .tv-nav__eu { display: inline-flex; align-items: center; flex-shrink: 0; background: #ffffff; padding: 5px; /* symetryczne światło ochronne */ border-radius: 4px; line-height: 0; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.18); } /* Specyficzność 0,2,0 — musi wygrać z WooCommerce `.woocommerce-page img` (0,1,1; height:auto/max-width:100%) na stronach sklepowych (logowanie/koszyk/ checkout/moje konto), inaczej logo UE renderuje się w pełnym rozmiarze. */ /* Stały box obrazka = DOTYCHCZASOWY footprint kafla (height × szerokość liczona ze starego aspektu 2.339) — kafel nie zmienia wymiarów. Plik PNG przycięty do właściwego logo (bez wbudowanego pustego pola), więc object-fit:contain wypełnia szerokość kafla, zostawiając tylko niewielkie symetryczne światło (góra/dół przez białe tło kafla; boki przez padding). Proporcje logo zachowane — bez rozciągania. */ .tv-nav__eu .tv-nav__eu-img { display: block; height: 1.75rem; /* 28px — mobile (bez zmian) */ width: 65.5px; /* = 28 × 2.339 → footprint jak dotychczas */ object-fit: contain; object-position: center; max-width: none; /* neutralizuje .woocommerce-page img max-width */ } @media (min-width: 768px) { .tv-nav__eu { padding: 6px; } .tv-nav__eu .tv-nav__eu-img { height: 2.125rem; /* 34px — desktop (bez zmian) */ width: 79.5px; /* = 34 × 2.339 → footprint jak dotychczas */ } } /* ---- Desktop links ---- */ .tv-nav__links { display: none; list-style: none; gap: 2.5rem; align-items: center; font-size: 0.75rem; font-weight: 900; } @media (min-width: 768px) { .tv-nav__links { display: flex; } } .tv-nav__links a { text-decoration: none; color: inherit; opacity: .8; transition: color .2s, opacity .2s; } .tv-nav__links a:hover { color: #EF6A23; opacity: 1; } /* When scrolled: links slightly muted */ .tv-nav[data-scrolled="true"] .tv-nav__links a, .tv-nav[data-page="inner"] .tv-nav__links a { opacity: 1; color: #52525b; } .tv-nav[data-scrolled="true"] .tv-nav__links a:hover, .tv-nav[data-page="inner"] .tv-nav__links a:hover { color: #EF6A23; } /* ---- CTA button ---- */ .tv-nav__cta { display: inline-flex; align-items: center; gap: 0.5rem; background: #EF6A23; color: #fff !important; opacity: 1 !important; padding: 0.75rem 2rem; border-radius: 9999px; font-size: 0.75rem; font-weight: 900; text-decoration: none; border: 1px solid rgba(239,106,35,.5); box-shadow: 0 8px 20px rgba(239,106,35,.25); transition: transform .2s, box-shadow .2s; margin-left: 1rem; white-space: nowrap; } .tv-nav__cta:hover { transform: scale(1.05); box-shadow: 0 12px 28px rgba(239,106,35,.35); } .tv-nav__cta:active { transform: scale(0.97); } /* ---- Hamburger ---- */ .tv-nav__hamburger { display: flex; align-items: center; justify-content: center; background: none; border: none; cursor: pointer; color: inherit; padding: 0.5rem; position: relative; z-index: 1; } @media (min-width: 768px) { .tv-nav__hamburger { display: none; } } /* ---- Mobile menu ---- Pełnoekranowy, NIEprzezroczysty panel. Renderowany poza