/* A SENTINEL, SO THE BUNDLE COUNTS AS "ALREADY LOADED". site-nav.js injects this file when it cannot find a to it — a page that forgets the link still gets a correct nav. That check looked for the link by href, so the moment /game folded this file into bundle-game.css the link was gone, the check failed, and the browser fetched the whole stylesheet a second time: an extra request and the 48px nav jump the link exists to prevent. Asking the DOCUMENT whether the rules are in effect is the question that was always meant, and it is true either way. */ :root { --nz-site-nav: 1; } /* Numzi shared nav - appearance. This lives in a real stylesheet, linked from every page's , rather than being injected by site-nav.js at runtime. Injecting it meant the browser painted the nav at whatever size the page's own leftover CSS said (126px on game.html), then snapped it to 78px the moment the script ran, shoving the whole page up 48px. Loading it in the head means the first paint is already correct. It owns the bar completely, with !important, because pages still carry their own older nav rules at wildly different sizes. site-nav.js only fills in the links. */ nav { display: flex !important; align-items: center !important; justify-content: space-between !important; height: auto !important; min-height: 0 !important; max-height: none !important; overflow: visible !important; flex-wrap: wrap !important; gap: .4rem 1rem !important; padding: .4rem 1.5rem !important; background: var(--cream) !important; border-bottom: 3px solid var(--warm) !important; position: sticky !important; top: 0 !important; z-index: 100 !important; } nav .logo { line-height: 0 !important; } nav .logo img { height: 62px !important; width: auto !important; display: block !important; } /* Reserve the row height before the links exist, so filling them in shifts nothing. */ .nav-links { display: flex !important; gap: .45rem !important; align-items: center !important; flex-wrap: wrap !important; justify-content: flex-end !important; min-height: 62px !important; } .nav-links a { font-family: "Fredoka One", cursive !important; font-size: .9rem !important; text-decoration: none !important; padding: .34rem .8rem !important; border-radius: 10px !important; white-space: nowrap !important; line-height: 1.4 !important; } .nav-links a.plain { color: var(--brown) !important; background: none !important; box-shadow: none !important; } .nav-links a.active { outline: 2.5px solid var(--ink); outline-offset: 2px; } .nav-more-wrap { position: relative; display: none; } .nav-more-btn { font-family: "Fredoka One", cursive; font-size: .9rem; color: var(--ink); background: var(--kraft); border: 2.5px solid var(--ink); border-radius: 10px; padding: .28rem .8rem; cursor: pointer; box-shadow: 0 3px 0 var(--warm); } .nav-more-btn:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--warm); } .lbl-burger { display: none; } .nav-drop { position: absolute; right: 0; top: calc(100% + .45rem); background: var(--cream); border: 2.5px solid var(--ink); border-radius: 14px; box-shadow: 4px 4px 0 var(--warm); padding: .5rem; display: none; flex-direction: column; gap: .4rem; min-width: 200px; z-index: 300; } .nav-drop.open { display: flex; } .nav-drop a { display: block; text-align: left; } /* .is-on is set by site-nav.js once it has counted what is actually hidden. Both breakpoints require it, so the button can never appear over an empty menu — which is exactly what a logged-out visitor between 640px and 1060px would otherwise get now that Videos, Story Books and Activities have left the bar and nothing is left marked `nav-sec`. */ @media (max-width: 1060px) { .nav-links a.nav-sec { display: none !important; } .nav-more-wrap.is-on { display: block; } } @media (max-width: 640px) { nav { padding: .25rem 1rem !important; } nav .logo img { height: 42px !important; } .nav-links { min-height: 42px !important; } .nav-links > a { display: none !important; } .nav-more-wrap.is-on { display: block; } .lbl-more { display: none; } .lbl-burger { display: inline; } }