/* ========================================================================== Tokens (optional) ========================================================================== */ :root { --nav-bg: #1e3a5f; --nav-hover: #8d99ae; --nav-text: #fafafa; --subnav-bg: #919191; --btn-bg: #666; --btn-bg-hover: #555; --btn-bg-active: #444; --tooltip-bg: #333; --brand-accent: #e63946; --nav-height: 56px; } /* ========================================================================== Navbar (desktop default) ========================================================================== */ .navbar { display: flex; justify-content: flex-start; align-items: center; list-style: none; margin: 0; padding: 0; background-color: var(--nav-bg); position: fixed; top: 0; left: 0; width: 100%; z-index: 100; } /* If you have

children, this keeps spacing consistent */ .navbar li { display: flex; } /* Links */ .navbar a { display: inline-flex; align-items: center; gap: 8px; color: var(--nav-text); text-align: center; padding: 14px 16px; text-decoration: none; } .navbar a:hover { background-color: var(--nav-hover); } /* Active state for current nav item */ .nav-link.active { background-color: var(--brand-accent); } /* Push this item to the far right on desktop */ .settings-link { margin-left: auto; } /* Hamburger is hidden on desktop */ .hamburger-menu { display: none; } /* While auth state is unknown, hide only the bar */ html.nav-wait .navbar { visibility: hidden; } /* Auth state toggles (class applied to ) */ html.authed .auth-only { display: list-item; } html.authed #loginLink { display: none; } html.guest .auth-only { display: none; } html.guest #loginLink { display: list-item; } /* Focus styles for keyboard users */ .navbar a:focus-visible, .subNav-button:focus-visible, .hamburger-menu:focus-visible { outline: 2px solid #fff; outline-offset: 2px; } /* ========================================================================== Sub Navigation (tabbed content controller) ========================================================================== */ .subNav { display: flex; justify-content: center; align-items: center; list-style: none; margin: 15px auto; padding: 5px; background-color: var(--subnav-bg); position: relative; max-width: 650px; border-radius: 10px; box-shadow: 0 0 10px rgba(0, 0, 0, .1); } .subNav li { margin: 0 10px; } .subNav-button { color: #fff; background: var(--btn-bg); padding: 10px 15px; border: none; cursor: pointer; margin: 2px; border-radius: 5px; transition: background .2s ease-in-out; } .subNav-button:hover { background: var(--btn-bg-hover); } .subNav-button.active { background: var(--btn-bg-active); color: #fff; font-weight: bold; } /* Content sections toggled by .active */ .content-section { display: none; padding: 0; margin: 0; } .content-section.active { display: block; } /* ========================================================================== Tooltip ========================================================================== */ .tooltip-container { position: relative; display: inline-block; } .tooltip-container .tooltip-icon { display: inline-block; width: 24px; height: 24px; background-color: #3498db; border-radius: 50%; color: #fff; text-align: center; line-height: 24px; cursor: help; position: relative; /* for Chrome compatibility */ } .tooltip-container .mcTip { background-color: #495863; } .tooltip-container .tooltip-text { visibility: hidden; width: 150px; font-size: 1rem; background-color: var(--tooltip-bg); color: #fff; text-align: center; border-radius: 6px; padding: 5px; position: absolute; z-index: 1; top: 30px; left: 50%; transform: translateX(-50%); opacity: 0; transition: opacity .3s; } .tooltip-container:hover .tooltip-text { visibility: visible; opacity: 1; } /* Replace your current .navbar .svg-icon block with this */ .navbar .svg-icon { all: unset; /* ignore global img styles */ display: inline-block; width: 1.15em; /* scales with font-size */ height: 1.15em; vertical-align: middle; fill: currentColor; /* <- inherits text color */ } /* ========================================================================== Mobile (≤ 768px) ========================================================================== */ @media screen and (max-width:768px) { /* Hide navbar initially; it becomes a collapsible panel */ .navbar { display: none !important; flex-direction: column; width: 100%; position: relative; /* flows with doc */ left: 0; background-color: var(--nav-bg); transition: all .3s ease-in-out; } /* When toggled via .show (JS adds/removes this) */ .navbar.show { display: flex !important; padding-top: 0; } .navbar li { display: block; width: 100%; } .navbar li { display: block; width: 100%; } .navbar a { display: block; text-align: center; padding: 14px 16px; border-radius: 10px; margin: 0 8px; } /* Hamburger button visible on mobile */ .hamburger-menu { display: block; position: relative; font-size: 30px; cursor: pointer; background-color: var(--nav-bg); color: var(--nav-text); padding: 10px; border-radius: 5px; z-index: 200; margin-bottom: 5px; /* spacing above panel */ transition: margin .3s ease-in-out; } .hamburger-menu:hover { background-color: var(--nav-hover); } }