/* ============================================================ site-topnav.css — the one munotes navbar Markup lives in includes/site-topnav.php. Moved out of resource-modern-shell.css (2026-07-31) so the standalone home template can load the navbar without pulling in the whole resource-hub shell. Every rule is scoped to .mn-res-topnav rather than to .mn-res-content, so the bar styles itself in any page it lands in. Descendants keep two classes of specificity on purpose: resource-modern-shell.css carries a `.mn-res-content a` rule that would otherwise win and repaint the links. ============================================================ */ /* Published so page layouts can offset themselves below the bar instead of hardcoding its height. Anything positioned at the top of the viewport on a page that renders the bar should start at this. */ :root { --mn-topnav-h: 61px; } /* Some pages make a flex row: the signed-in workspace does (body.mn-standalone-page{display:flex} in committee-control-center.css). The bar is body's first child there, so without this it becomes a flex item sitting BESIDE the content rather than a row above it, and the fixed sidebar paints straight over it. Claim a full row and let the rest wrap under. */ body > .mn-res-topnav { flex: 0 0 100%; width: 100%; } body:has(> .mn-res-topnav) { flex-wrap: wrap; } /* Self-sufficient outside the shell: the home page's own reset does this, but the bar must not depend on any host page's reset. */ .mn-res-topnav, .mn-res-topnav *, .mn-res-topnav *::before, .mn-res-topnav *::after { box-sizing: border-box; } .mn-res-topnav a { color: inherit; text-decoration: none; } .mn-res-topnav { position: sticky; top: 0; z-index: 100; background: #0b1d4e; border-bottom: 1px solid rgba(255, 255, 255, 0.09); /* All three type metrics are pinned, not inherited. Pinning only the family was not enough: the home page hands down 16px/24px and the resource shell hands down 17.12px/27.05px, which grew the search box by 4px and made the whole bar 61px on one page and 63.5px on the other. Nothing about this bar may depend on the page it lands in. */ font-family: 'Lora', Georgia, Cambria, serif; font-size: 16px; line-height: 1.5; } .mn-res-topnav .mn-res-topnav-inner { max-width: 1280px; margin: 0 auto; min-height: 60px; display: flex; align-items: center; gap: 28px; padding: 12px 32px; } .mn-res-topnav .mn-res-brand { display: flex; align-items: center; gap: 0.6rem; flex-shrink: 0; } .mn-res-topnav .mn-res-brand-logo img { width: 30px; height: 30px; border-radius: 7px; background: #fff; object-fit: contain; display: block; } .mn-res-topnav .mn-res-brand-text { display: flex; flex-direction: column; line-height: 1.15; font-weight: 600; font-size: 17px; color: #fff; } .mn-res-topnav .mn-res-brand-sub { font-size: 10.5px; font-weight: 500; color: #8fa9d6; letter-spacing: 0.02em; } .mn-res-topnav .mn-res-nav { display: flex; align-items: center; gap: 2px; min-width: 0; overflow-x: auto; scrollbar-width: none; } .mn-res-topnav .mn-res-nav::-webkit-scrollbar { display: none; } .mn-res-topnav .mn-res-nav a { padding: 7px 11px; border-radius: 6px; font-size: 13.5px; font-weight: 500; color: #c2d4f0; white-space: nowrap; transition: background 0.15s ease, color 0.15s ease; } .mn-res-topnav .mn-res-nav a:hover { color: #fff; background: rgba(255, 255, 255, 0.08); } .mn-res-topnav .mn-res-nav a.active { color: #fff; background: rgba(255, 255, 255, 0.14); font-weight: 600; } /* 36px, not 42px. At 42 it was the tallest thing in the row below 860px and pushed the bar to 63px there while desktop stayed 61px, so --mn-topnav-h was wrong on phones and the workspace sidebar stuck 2px too high. At 36 it clears the row's 60px min-height at both mobile paddings (36+24=60, 36+20=56), so the bar is 61px at every width. */ .mn-res-topnav .mn-res-nav-toggle { display: none; align-items: center; justify-content: center; width: 36px; height: 36px; margin: 0 0 0 auto; padding: 0; border: none; border-radius: 8px; background: rgba(255, 255, 255, 0.08); color: #fff; font-family: inherit; cursor: pointer; flex-shrink: 0; } /* Navbar right cluster: search, auth. Values taken from the course-page redesign mockup. The logo stays our own favicon tile. */ .mn-res-topnav .mn-res-topnav-actions { flex: 1; display: flex; justify-content: flex-end; align-items: center; gap: 10px; min-width: 0; } /* Fixed height, not padding plus whatever the input's line box works out to. This is the tallest thing in the row, so it, not inherited type, is what decided the bar's height. At 36px it stays inside the row's 60px min-height, which makes that min-height the single thing setting the bar's height. */ .mn-res-topnav .mn-res-search { display: flex; align-items: center; gap: 8px; flex: 0 1 260px; min-width: 0; height: 36px; margin: 0; padding: 0 12px; border: 1px solid rgba(255, 255, 255, 0.16); border-radius: 8px; background: rgba(255, 255, 255, 0.07); color: #8fa9d6; } .mn-res-topnav .mn-res-search svg { flex-shrink: 0; display: block; } .mn-res-topnav .mn-res-search input { border: 0; outline: 0; margin: 0; padding: 0; background: transparent; font-family: inherit; font-size: 13px; /* Explicit: profile-foundation.css sets input{line-height:inherit} and the home page leaves the UA's `normal`, so this line box differed by 4px between the two. */ line-height: 1.2; color: #fff; width: 100%; min-width: 0; } .mn-res-topnav .mn-res-search input::placeholder { color: #8fa9d6; } /* Chrome draws its own clear button on type=search; it lands on the navy. */ .mn-res-topnav .mn-res-search input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; } .mn-res-topnav .mn-res-topnav-link { padding: 8px 12px; font-size: 13px; color: #c2d4f0; white-space: nowrap; text-decoration: none; } .mn-res-topnav .mn-res-topnav-link:hover { color: #fff; } .mn-res-topnav .mn-res-topnav-cta { padding: 8px 14px; border-radius: 8px; background: #fff; color: #0b1d4e; font-size: 13px; font-weight: 600; white-space: nowrap; text-decoration: none; } .mn-res-topnav .mn-res-topnav-cta:hover { background: #e8f0fe; } /* Shared Docs and Events stay in the DOM for the mobile menu but are off the desktop row, which is what buys the search field its full width. */ .mn-res-topnav .mn-res-nav-extra { display: none; } /* Mobile: collapse nav links into a dropdown behind the hamburger */ @media (max-width: 860px) { .mn-res-topnav .mn-res-nav-toggle { display: inline-flex; } .mn-res-topnav .mn-res-nav { position: absolute; top: 100%; left: 0; right: 0; flex-direction: column; align-items: stretch; gap: 0.1rem; background: #0b1d4e; padding: 0.5rem 1rem 1rem; border-bottom: 1px solid rgba(255, 255, 255, 0.08); box-shadow: 0 14px 26px rgba(0, 0, 0, 0.28); max-height: 0; overflow: hidden; opacity: 0; pointer-events: none; transition: max-height 0.25s ease, opacity 0.2s ease; } .mn-res-topnav.is-open .mn-res-nav { max-height: 78vh; overflow-y: auto; opacity: 1; pointer-events: auto; } .mn-res-topnav .mn-res-nav a { padding: 0.75rem 0.85rem; font-size: 1rem; } } /* Must sit after the .mn-res-nav-extra rule above, not in the block with the hamburger: same specificity, so source order decides and the extras stayed hidden. */ @media (max-width: 860px) { .mn-res-topnav .mn-res-nav-extra { display: block; } } @media (max-width: 1050px) { .mn-res-topnav .mn-res-search { display: none; } } @media (max-width: 640px) { .mn-res-topnav .mn-res-topnav-inner { gap: 10px; padding: 10px 16px; } .mn-res-topnav .mn-res-topnav-actions { flex: 0 0 auto; gap: 6px; } .mn-res-topnav .mn-res-topnav-link { padding: 8px 6px; } .mn-res-topnav .mn-res-topnav-cta { padding: 8px 11px; } }