/** * PackPlus V2 — Navigation * * Light, paper-toned nav belonging to the real brand system: the * actual PackPlus logo on the left, editorial link list, one green * primary CTA. Visible by default — navigation.js only layers a * transient entrance animation and a compact state after scroll; it * never controls whether the nav is present or usable. */ .pp-nav { position: fixed; top: 0; left: 0; right: 0; z-index: var(--pp-z-nav); height: var(--pp-nav-height); display: flex; align-items: center; background: color-mix(in srgb, var(--pp-paper) 92%, transparent); border-bottom: 1px solid transparent; transition: height var(--pp-duration-fast) var(--pp-ease-standard), background-color var(--pp-duration-fast) var(--pp-ease-standard), border-color var(--pp-duration-fast) var(--pp-ease-standard); } .pp-nav--compact { height: var(--pp-nav-height-compact); background: color-mix(in srgb, var(--pp-white) 97%, transparent); border-bottom-color: var(--pp-line); } .pp-nav__inner { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: var(--pp-gutter); padding: 0 var(--pp-gutter); } .pp-nav__mark { display: flex; align-items: center; } .pp-nav__mark img { height: 34px; width: auto; transition: height var(--pp-duration-fast) var(--pp-ease-standard); } .pp-nav--compact .pp-nav__mark img { height: 28px; } /* Desktop primary links — hidden on mobile in favor of the
disclosure. */ .pp-nav__links { display: flex; align-items: center; gap: 2rem; margin: 0 auto 0 2.5rem; padding: 0; list-style: none; } .pp-nav__links a { color: var(--pp-text); text-decoration: none; opacity: 0.72; transition: opacity var(--pp-duration-fast) var(--pp-ease-standard); } .pp-nav__links a:hover, .pp-nav__links a.is-active { opacity: 1; } .pp-nav__links a.is-active { color: var(--pp-green-dark); } .pp-nav__cta { flex-shrink: 0; } /* Mobile navigation disclosure. Native
/ so the menu works with zero JavaScript; navigation.js only layers on closing the panel after a link is chosen. Hidden on desktop, where .pp-nav__links already exposes the same anchors inline. */ .pp-nav__mobile { display: none; } .pp-nav__mobile-summary { list-style: none; cursor: pointer; background: none; border: 1px solid var(--pp-line); color: var(--pp-text); padding: 0.55rem 1.1rem; } .pp-nav__mobile-summary::-webkit-details-marker { display: none; } .pp-nav__mobile[open] .pp-nav__mobile-summary { border-color: var(--pp-text); } /* * Fixed to the viewport rather than positioned relative to
: * the
element only sizes to its content, so a * left:0/right:0 panel positioned against it would be pinned to the * summary button's own width, not the full nav width. */ .pp-nav__mobile-panel { position: fixed; top: var(--pp-nav-height); left: 0; right: 0; margin: 0; padding: 1.25rem var(--pp-gutter) 1.5rem; list-style: none; background: var(--pp-white); border-top: 1px solid var(--pp-line); border-bottom: 1px solid var(--pp-line); } .pp-nav__mobile-panel li + li { margin-top: 1rem; } .pp-nav__mobile-panel a { display: block; color: var(--pp-text); text-decoration: none; font-size: 1.1rem; font-weight: 600; letter-spacing: -0.01em; } .pp-nav__mobile-panel a.is-active { color: var(--pp-green-dark); } /* * WordPress admin-bar offset. The nav is fixed to the viewport (top: 0), * so it otherwise renders directly underneath the admin bar rather than * being pushed down by it — 's margin-top only repositions the * document flow, not other position:fixed elements. `body_class()` (see * templates/partials/document-head.php) adds "admin-bar" for us; these * rules mirror WordPress core's own 32px / 46px admin-bar breakpoint so * the nav (and the mobile panel anchored to its height) never sits * partly behind it. */ body.admin-bar .pp-nav { top: 32px; } body.admin-bar .pp-nav__mobile-panel { top: calc(var(--pp-nav-height) + 32px); } @media screen and (max-width: 782px) { body.admin-bar .pp-nav { top: 46px; } body.admin-bar .pp-nav__mobile-panel { top: calc(var(--pp-nav-height) + 46px); } }