/* ============================================================================= THE HEADER. One definition, every page. ----------------------------------------------------------------------------- This file exists because the site used to carry two headers. The homepage rendered its own markup against its own rules; every other page used the shared bar. They were meant to look identical, and a comment in each sheet said as much, but nothing enforced it and they drifted: by September the two bars had different item spacing, different type sizes and a posture pill that appeared on one and not the other. An instruction to keep two things in sync is not a mechanism. This is the mechanism. Every page that uses qntl_wpx_header() loads this file, and there is no second copy to fall out of step with. It declares no tokens and no global element rules, so it composes with the homepage's stylesheet and with wpx-system.css without either having to change for the other. It reads --hdr, --ink, --on-d and friends from whichever sheet is already there, with fallbacks for the values it cannot do without. ============================================================================= */ /* ---- tokens ---------------------------------------------------------------- Every custom property below is read, never declared. Two stylesheets supply them: wpx-system.css on the interior pages and the homepage's own inline sheet on the homepage. Those two name most things identically, which is why this composes at all, but the homepage does not declare --paper-3, --void, --hdr or --settle. Those four carry fallbacks rather than a redeclaration, because declaring them here would put a second set of tokens into the cascade and that is the class of bug this refactor exists to remove. */ .wpx-skip { position: absolute; left: -9999px; top: 0; z-index: 200; background: var(--paper-3, #FFFFFF); color: var(--on-l); padding: 12px 18px; font-weight: 600; border-radius: var(--r); } .wpx-skip:focus { left: 12px; top: 12px; } .wpx-btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 14px 26px; border-radius: var(--r); font-size: 14.5px; font-weight: 600; line-height: 1; letter-spacing: -.005em; text-decoration: none; border: 1px solid transparent; cursor: pointer; transition: background .18s ease, border-color .18s ease, color .18s ease, transform .18s var(--settle, .62s cubic-bezier(.22,.61,.36,1)); } .wpx-btn:active { transform: translateY(1px); } .wpx-btn--primary { background: var(--paper-3, #FFFFFF); color: var(--void, #070C15); border-color: var(--paper-3, #FFFFFF); } .wpx-btn--primary:hover { background: #fff; } .wpx-btn--ghost { background: transparent; color: var(--on-d); border-color: var(--line-d2); } .wpx-btn--ghost:hover { border-color: var(--on-d2); } .wpx-sec--l .wpx-btn--primary, .wpx-sec--l2 .wpx-btn--primary { background: var(--void, #070C15); color: var(--on-d); border-color: var(--void, #070C15); } .wpx-sec--l .wpx-btn--ghost, .wpx-sec--l2 .wpx-btn--ghost { color: var(--on-l); border-color: var(--line-l); } .wpx-sec--l .wpx-btn--ghost:hover, .wpx-sec--l2 .wpx-btn--ghost:hover { border-color: var(--on-l3); } /* ======================================================= header/footer === */ /* ONE NAV, ONE DEFINITION. The site had two headers: the homepage rendered its own from on-page anchors, every other page inherited a different theme nav. Both now come from qntl_wpx_header(), so they cannot drift apart again. The header is nearly invisible until you scroll. On a page that opens with a full-bleed plate, a solid bar across the top is a lid on the image. It earns its ground only once there is content behind it. */ /* ONE HEADER, NOT TWO THAT AGREE ABOUT THEIR CONTENTS. * * 2.5.0 gave every page the same nav ITEMS and left them looking different: * this header was 68px, transparent until scrolled, with a mint underline that * slides in; the homepage's was 64px, always solid, with a rounded hover panel * and a sky underline on the current item. Same list, two bars. A visitor * moving between pages still saw the chrome change under them, which is the * whole thing this file exists to stop. * * So these rules are now the homepage's header, ported. Height, ground, * blur, link treatment, current-page accent, the posture pill and the button * all match .nav in the homepage's stylesheet. The transparent-until-scrolled * behaviour is gone, deliberately: it was written when this header sat over a * full-bleed plate, and consistency across the site is worth more than that * one effect on one page. * * If either side changes, change both. They are two stylesheets because the * homepage carries global element rules that collide with this one, not * because they are meant to look different. */ .wpx-hdr { position: fixed; inset: 0 0 auto 0; z-index: 200; background: rgba(11, 18, 32, .88); -webkit-backdrop-filter: blur(14px) saturate(150%); backdrop-filter: blur(14px) saturate(150%); border-bottom: 1px solid var(--line-d); } .wpx-hdr__in { height: var(--hdr, 64px); display: flex; align-items: center; justify-content: space-between; gap: 24px; margin: 0 auto; /* The homepage's measure, not this stylesheet's. Its --max is 1400 and its gutter caps at 72, against 1480 and 76 here, which put the logo and the CTA twenty pixels apart between pages: subtle, and exactly the kind of shift you feel rather than see when you click through. The page grid below keeps its own wider measure; only the bar is pinned to the homepage's. */ max-width: 1400px; padding: 0 clamp(20px, 4.2vw, 72px); } .wpx-hdr__mark { flex: 0 0 auto; line-height: 0; min-width: 0; } .wpx-hdr__mark img { height: 26px; width: auto; max-width: 242px; object-fit: contain; object-position: left center; } .wpx-nav { display: flex; align-items: center; gap: 12px; margin-left: auto; } .wpx-nav a { color: var(--on-d2); text-decoration: none; font-size: 13px; font-weight: 500; padding: 8px 7px; border-radius: var(--r); white-space: nowrap; position: relative; transition: color .16s ease, background .16s ease; } .wpx-nav a:hover { color: var(--on-d); background: rgba(255, 255, 255, .05); } .wpx-nav a[aria-current="page"] { color: var(--on-d); } .wpx-nav a[aria-current="page"]::after { content: ''; position: absolute; left: 7px; right: 7px; bottom: 2px; height: 1px; background: var(--sky); } /* The posture pill, carried over so the two bars hold the same things as well as the same links. On an interior page it points home and scrolls. */ .wpx-hdr__stat { display: none; align-items: center; gap: 8px; flex: none; font-weight: 600; font-size: 9.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--on-d3); text-decoration: none; padding: 6px 2px; transition: color .16s ease; } .wpx-hdr__stat:hover { color: var(--on-d2); } .wpx-hdr__stat .wpx-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--em); box-shadow: 0 0 0 3px rgba(16, 185, 129, .16); } @media (min-width: 1180px) { .wpx-hdr__stat { display: flex; } } .wpx-hdr__cta { flex: 0 0 auto; margin-left: 6px; padding: 10px 19px; font-size: 13.5px; font-weight: 600; } /* The .wpx-subnav section strip was removed in 2.5.0 along with its markup. A second bar of links under the header reads as a second navigation no matter how small the type is, which is the problem this system was built to solve rather than one to reintroduce in a quieter font. The anchors it carried are in the bar itself now, and the product pages are in a dropdown. ---- the Products group -------------------------------------------------- The parent is a