/* * Lucca — shared nav normalization (render-blocking) * -------------------------------------------------- * These rules must apply on FIRST PAINT, so they live in a stylesheet linked * from each page's rather than in the deferred lucca-nav-drawer.js. * Injecting them late caused a visible reflow of the nav on every page load * (links resizing 14.5px sentence-case -> 11.5px caps). * * Everything here is cross-page normalization only. Per-page nav colors and * layout (e.g. the transparent hero nav on about/lucca) stay in their pages. */ /* Identical nav content box on every page. Most pages draw `border-bottom:1px` inside the nav's 84px border-box, leaving an 83px content box; index draws its hairline on the sticky wrapper instead, so its content box was the full 84px. That centred every nav item 0.5px lower on index than everywhere else — a half-pixel shift that re-rasterises the text and reads as a shimmer when navigating index <-> another page. Force the 1px border box everywhere... */ .nav, .lk-nav { box-sizing: border-box !important; border-bottom-width: 1px !important; border-bottom-style: solid !important; } /* ...and default that border to invisible at ZERO specificity (:where) so any page that deliberately draws a visible hairline still wins. */ :where(.nav, .lk-nav) { border-bottom-color: transparent; } /* Primary nav links — refined letterspaced caps. !important because some pages (about.html) scope these with higher specificity (.nav .nav-links a) that would otherwise win. */ .nav-links, .nav-links a, .nav-explore, .lk-nav-links, .lk-nav-links a, .lk-explore { text-transform: uppercase !important; letter-spacing: .16em !important; font-size: 11.5px !important; font-weight: 600 !important; } /* Fixed line-height so a nav link occupies the same box on every page (pages inherited different line-heights: 16px vs body 1.6). */ .nav-links a, .lk-nav-links a, .nav-explore, .lk-explore { line-height: 16px !important; } /* Uniform spacing between the Explore dropdown and the Download button. Pages ranged from 14px to 32px, which shifted the whole right cluster. */ .nav-right, .lk-nav-right { gap: 24px !important; } /* Uniform primary-nav Download button. index used 14.5px/12px padding while every other page used 13px/11px — a 10px width and 6px height difference that visibly shifted when navigating between pages. */ .nav-right .nav-download, .nav-right .cta.nav-download, .nav-right .nav-dl, .lk-nav-right .lk-dl { font-size: 13px !important; padding: 11px 20px !important; line-height: 16px !important; } .nav-right .nav-download svg, .nav-right .cta.nav-download svg, .nav-right .nav-dl svg, .lk-nav-right .lk-dl svg { width: 15px !important; height: 15px !important; } /* Same outer box on every page. Some pages draw a 1px hairline border and others none, which made the button 2px wider/taller and shifted the whole right cluster. Force a 1px border box everywhere and pin the height... */ .nav-right .nav-download, .nav-right .cta.nav-download, .nav-right .nav-dl, .lk-nav-right .lk-dl { box-sizing: border-box !important; height: 40px !important; border-width: 1px !important; border-style: solid !important; } /* ...defaulting that border to invisible at LOW specificity, so pages that deliberately style a visible hairline (index, features) still win. */ .nav-download, .nav-dl, .lk-dl { border-color: transparent; } /* Uniform subnav height wherever a subnav exists, so the masthead is the same height on every page and navigating between them doesn't shift content. */ .subnav-in { height: 40px !important; padding-top: 0 !important; padding-bottom: 0 !important; align-items: center !important; } /* Uniform primary-nav height. This rule used to live in a