/* ── Navbar ── */ .navbar { position: fixed; top: 0; left: 0; right: 0; z-index: 1000; height: var(--nav-height); background: rgba(250,248,242,.96); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom: 1px solid transparent; transition: all var(--t); } .navbar.scrolled { background: rgba(250,248,242,.99); border-bottom-color: var(--border); box-shadow: var(--shadow-md); } .navbar__inner { max-width: var(--max-width); margin: 0 auto; padding: 0 24px; height: 100%; display: flex; align-items: center; justify-content: space-between; gap: 24px; } /* Logo */ .navbar__logo { display: flex; align-items: center; gap: 11px; flex-shrink: 0; transition: opacity var(--t-fast); } .navbar__logo:hover { opacity: .82; } .navbar__logo img { height: 46px; width: auto; object-fit: contain; } .navbar__logo-text { display: flex; flex-direction: column; line-height: 1.1; } .navbar__logo-name { font-family: var(--font-serif); font-size: 1.45rem; font-weight: 700; color: var(--dark); letter-spacing: .04em; } .navbar__logo-tagline { font-size: .62rem; font-weight: 500; letter-spacing: .18em; text-transform: uppercase; color: var(--sage-dark); } /* Nav links */ .navbar__links { display: flex; align-items: center; gap: 4px; flex: 1; justify-content: center; } .navbar__link { font-size: .78rem; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--medium); padding: 8px 14px; border-radius: var(--radius-full); transition: all var(--t-fast); position: relative; } .navbar__link::after { content: ''; position: absolute; bottom: 4px; left: 50%; transform: translateX(-50%); width: 0; height: 2px; background: var(--gold); border-radius: 2px; transition: width var(--t-fast); } .navbar__link:hover { color: var(--dark); } .navbar__link:hover::after { width: 55%; } /* CTA */ .navbar__cta { flex-shrink: 0; display: flex; align-items: center; gap: 10px; } .navbar__cta .btn { padding: 10px 22px; font-size: .76rem; } /* Instagram icon button (desktop navbar) */ .navbar__ig-link { display: flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 50%; color: var(--medium); transition: all var(--t-fast); background: transparent; border: 1.5px solid var(--border); } .navbar__ig-link:hover { color: var(--white); border-color: transparent; background: linear-gradient(135deg,#833ab4,#fd1d1d,#fcb045); transform: scale(1.08); } /* Hamburger */ .navbar__hamburger { display: none; flex-direction: column; justify-content: center; align-items: center; gap: 5px; width: 42px; height: 42px; border-radius: var(--radius-sm); transition: background var(--t-fast); z-index: 1001; } .navbar__hamburger:hover { background: var(--sage-pale); } .navbar__hamburger span { display: block; width: 24px; height: 2px; background: var(--dark); border-radius: 2px; transition: all var(--t); transform-origin: center; } .navbar__hamburger.active span:nth-child(1) { transform: translateY(7px) rotate(45deg); } .navbar__hamburger.active span:nth-child(2) { opacity:0; transform:scaleX(0); } .navbar__hamburger.active span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } /* Mobile overlay — też w , z-index niższy niż drawer */ .navbar__mobile-overlay { position: fixed; inset: 0; background: rgba(42,42,42,.5); z-index: 1040; opacity: 0; visibility: hidden; transition: all var(--t); -webkit-transform: translateZ(0); transform: translateZ(0); } .navbar__mobile-overlay.active { opacity:1; visibility:visible; } /* Mobile menu drawer —— żyje bezpośrednio w , nie w