/* Canonical site header — the single source of truth for the nav bar on every * page of every network. Loaded LAST in on purpose: each page still * carries its own historical header CSS, and this file settles the geometry so * the networks cannot drift apart again. * * Before this existed the same header rendered seven different ways on mobile * (nav 82.6 / 86.2 / 86.6 / 92 / 114.2 / 121.4 / 129 px tall, logo 24 or 32 px, * link text 10.4 or 16 px, three padding variants, x1/geo still fixed while the * rest were static) and two ways on desktop (54 vs 58.6 px). * * What stays per-page: nav background/blur and theme colours, which links the * network actually has, and everything below the header. * * When adding a network: link this file, do not copy header rules into the page. * * The landing origin (stake-manager.net) has its own docroot and serves this * file through an nginx alias — a missing alias there answers with the landing * HTML instead of a 404, which Cloudflare then caches as if it were the CSS. */ /* ------------------------------------------------------------- desktop */ /* The absolute-positioned desktop layout needs real width: at 800-1024px the * five SOL links, the switcher and the wallet button overlap each other (still * true at 1100). Below 1160px everything uses the stacked flow layout. */ @media (min-width: 1160px) { .nav { position: fixed; top: 0; left: 0; right: 0; z-index: 1000; display: flex; align-items: center; justify-content: center; height: 64px; padding: 0 40px; } .nav .logo { position: absolute; left: 40px; display: flex; align-items: center; } .nav .logo-icon, .nav .logo img, .nav .logo svg { width: 32px; height: 32px; } .net-switch { position: absolute; left: 88px; top: 50%; transform: translateY(-50%); } .net-switch .net-opt { padding: 4px 10px; font-size: 11px; line-height: 1.4; } /* the size has to sit on the list as well as the link: the
  • line box is * what actually sets the row height, and pages disagreed about it */ .nav-links { display: flex; align-items: center; gap: 32px; list-style: none; margin: 0; padding: 0; font-size: 14px; } .nav-links li { font-size: inherit; line-height: 1.2; } .nav-links a { font-size: 14px; line-height: 1.2; } .nav-right { position: absolute; right: 40px; display: flex; align-items: center; gap: 12px; } .theme-toggle { width: 40px; height: 40px; font-size: 18px; } /* the nav is fixed, so the page has to clear it by exactly its height */ .container { padding-top: 96px; } } /* -------------------------------------------------------------- mobile */ @media (max-width: 1159px) { .nav { position: static; height: auto; padding: 10px 14px; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px 12px; } .nav .logo, .net-switch, .nav-right { position: static; transform: none; } .nav .logo { order: 1; display: flex; align-items: center; } .nav .logo-icon, .nav .logo img, .nav .logo svg { width: 28px; height: 28px; } .net-switch { order: 2; } .net-switch .net-opt { padding: 4px 9px; font-size: 10px; line-height: 1.4; } .nav-right { order: 3; margin-left: auto; gap: 8px; } .theme-toggle { width: 34px; height: 34px; font-size: 16px; } /* links drop to their own full-width row under the logo/switcher */ .nav-links { order: 4; width: 100%; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; /* the gap absorbs the links' own padding below, so the row keeps the spacing it had while each link grows a tappable box around itself */ gap: 2px 6px; list-style: none; margin: 0; padding: 0; font-size: 12px; } .nav-links li { font-size: inherit; line-height: 1.3; } /* A finger is not a cursor. These links were 16px tall — measured, not guessed — which is a third of what a thumb can reliably hit, and on this breakpoint they ARE the site's navigation. Padding makes the target 38px without moving the text: the gap above was reduced by what was added here, so the row looks the same and stops missing. */ .nav-links a { font-size: 12px; line-height: 1.3; display: inline-block; padding: 10px 8px; } /* Same for the network switcher: 22px of height on the control that changes which chain you are looking at. */ .net-switch .net-opt { padding: 9px 10px; line-height: 1.4; } /* nav is in the flow here, so no clearance is needed */ .container { padding-top: 18px; } }