/* ============================================================ NEW NAVBAR — CSS Link this file in , after any other global stylesheet, so these rules aren't overridden by older navbar CSS. e.g. ============================================================ */ .pr-header { background: #ffffff; border-bottom: 1px solid #ececec; position: relative; z-index: 1000; } .pr-header-inner { max-width: 1100px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; padding: 14px 22px; } .pr-logo { display: flex; align-items: center; gap: 10px; text-decoration: none; } .pr-logo-img { width: 34px; height: 34px; object-fit: contain; display: block; } .pr-logo-text { font-size: 16px; font-weight: 700; color: #1d1d1f; } .pr-nav { display: flex; align-items: center; gap: 28px; } .pr-nav a { font-size: 14px; font-weight: 500; color: #444444; text-decoration: none; transition: color .15s ease; } .pr-nav a:hover { color: #1d1235; text-decoration: none; } .pr-nav a.pr-nav-active { color: #6b4eff; font-weight: 700; } /* Hamburger button (hidden on desktop) */ .pr-hamburger { display: none; flex-direction: column; gap: 5px; background: none; border: none; cursor: pointer; padding: 6px; } .pr-hamburger span { display: block; width: 24px; height: 2px; background: #1d1d1f; border-radius: 2px; transition: transform .2s ease, opacity .2s ease; } /* "X" animation when menu is open */ .pr-hamburger.pr-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); } .pr-hamburger.pr-open span:nth-child(2) { opacity: 0; } .pr-hamburger.pr-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } /* Mobile layout */ @media (max-width: 860px) { .pr-nav { display: none; position: absolute; top: 100%; left: 0; right: 0; background: #ffffff; flex-direction: column; align-items: flex-start; gap: 0; box-shadow: 0 10px 24px rgba(0, 0, 0, 0.1); padding: 8px 0; } .pr-nav.pr-nav-open { display: flex; } .pr-nav a { width: 100%; box-sizing: border-box; padding: 13px 22px; border-bottom: 1px solid #f2f2f2; } .pr-hamburger { display: flex; } }