/* =========================================================================== SHARED · CAMPAIGN LANDING-PAGE CHROME (.lp-nav / .lp-foot) --------------------------------------------------------------------------- Loaded by layouts/base-w-lp.njk ONLY — never listed in a page's `sharedCSS`. That is deliberate: the chrome and the layout are one unit, so switching a page back to `layouts/base-w.njk` drops this sheet with it and there is no orphaned stylesheet to remember to remove. DESIGN NOTE — why this is not just `.w-nav` with the menu deleted. .w-nav is sticky, 68px tall, and carries a theme-adaptive skin driven by base.js reading `data-nav-surface` off each section. All three are costs on a page whose job is one conversion: · sticky — permanently rents ~68px of a 667px mobile viewport for a control nobody on paid traffic is hunting for. · adaptive — needs every section to declare a surface, which is a maintenance contract for a page that will be cloned per campaign. · logo swap — the light/dark logo pair exists for the adaptive skin. This header is static, always-dark, and has exactly two targets. Uses only --w-* foundation tokens. No raw brand hex. =========================================================================== */ /* The page body is dark by default (`data-theme="dark"` on ), but the landing page's own first section owns its background. Setting it here keeps the strip above the hero and the gap below the last section from flashing the UA white during a slow paint. */ .lp-body{background:var(--w-bg)} /* --------------------------------------------------------------------------- HEADER Matches .w-nav's 68px height and --w-container-pad inline padding so a page swapped between the two layouts does not shift vertically by a few pixels. --------------------------------------------------------------------------- */ .lp-nav{ position:relative;z-index:10; display:flex;align-items:center;justify-content:space-between;gap:var(--w-s-4); height:68px;padding:0 var(--w-container-pad); background:transparent; border-bottom:1px solid rgba(255,255,255,0.08); } .lp-nav__logo{display:inline-flex;align-items:center;flex:none;text-decoration:none} .lp-nav__logo img{height:30px;width:auto;display:block} /* Slightly smaller than the hero CTA — the header button is the safety net for a reader who scrolled back up, not the primary ask. */ .lp-nav__cta{padding:11px 20px;font-size:var(--w-fs-xs)} @media(max-width:520px){ .lp-nav{height:60px} .lp-nav__logo img{height:24px} .lp-nav__cta{padding:10px 16px} /* The arrow is decoration at this width and it is what pushes the label to wrap. Drop the glyph, keep the words. */ .lp-nav__cta .w-icon{display:none} } /* --------------------------------------------------------------------------- FOOTER Legal-only. Privacy and Terms are load-bearing, not decorative: Google Ads, Meta and LinkedIn all reject destination URLs with no reachable privacy policy, so these links are an ad-policy requirement. --------------------------------------------------------------------------- */ .lp-foot{background:var(--w-bg-deep);border-top:1px solid var(--w-line)} .lp-foot__inner{ width:100%;max-width:var(--w-container);margin-inline:auto; padding:var(--w-s-6) var(--w-container-pad); display:flex;align-items:center;flex-wrap:wrap;gap:var(--w-s-4) var(--w-s-6); } .lp-foot__logo{display:inline-flex;align-items:center;flex:none;text-decoration:none;opacity:.75; transition:opacity var(--w-dur) var(--w-ease)} .lp-foot__logo:hover{opacity:1} .lp-foot__logo img{height:22px;width:auto;display:block} .lp-foot__copy{font-size:var(--w-fs-xs);color:var(--w-text-3)} /* margin-left:auto pushes legal to the far edge on desktop and collapses harmlessly to 0 once the row wraps on mobile. */ .lp-foot__legal{margin-left:auto;display:flex;flex-wrap:wrap;gap:var(--w-s-5)} .lp-foot__legal a{font-size:var(--w-fs-xs);color:var(--w-text-3);text-decoration:none; transition:color var(--w-dur) var(--w-ease)} .lp-foot__legal a:hover{color:var(--w-text)} .lp-foot__legal a:focus-visible{outline:none;box-shadow:0 0 0 3px var(--w-focus);border-radius:4px} @media(max-width:640px){ .lp-foot__inner{flex-direction:column;align-items:flex-start;gap:var(--w-s-4)} .lp-foot__legal{margin-left:0} }