/* Voluntier shared nav + footer styles */ /* This file is linked in on every page so nav renders styled on first paint */ .nav { display: flex; align-items: center; justify-content: space-between; padding: 0 2.5rem; height: 58px; background: #fff; border-bottom: 1px solid #e0eaf5; position: fixed; top: 0; left: 0; right: 0; z-index: 100; } .nav-brand { display: flex; align-items: center; gap: 9px; text-decoration: none; } .nav-brand-text { font-size: 20px; font-weight: 700; color: #1a3c6e; letter-spacing: -0.3px; } .nav-brand-text span { color: #2979d4; } .nav-right { display: flex; align-items: center; gap: 0; } .nav-link { font-size: 14px; color: #2563a8; font-weight: 600; padding: 0 1.1rem; height: 58px; display: flex; align-items: center; border-bottom: 2.5px solid transparent; text-decoration: none; white-space: nowrap; } .nav-link.active { border-bottom-color: #1a3c6e; color: #1a3c6e; } .nav-link:hover { background: #f0f6ff; } .nav-signin { background: #2563a8; color: #fff; border: none; padding: 9px 22px; border-radius: 6px; font-size: 14px; font-weight: 700; cursor: pointer; margin-left: 1rem; text-decoration: none; white-space: nowrap; } .nav-signin:hover { background: #1a4f8a; } .nav-avatar-btn { display: flex; align-items: center; margin-left: 1rem; text-decoration: none; border-radius: 24px; border: 1.5px solid #e0eaf5; transition: border-color 0.15s; background: none; padding: 0; } .nav-avatar-btn:hover { border-color: #2563a8; background: #f0f6ff; } .nav-avatar-inner { display: flex; align-items: center; gap: 0.5rem; padding: 4px 10px 4px 4px; position: relative; } .nav-avatar-circle { width: 32px; height: 32px; border-radius: 50%; background: #1a3c6e; color: #fff; font-size: 11px; font-weight: 700; display: flex; align-items: center; justify-content: center; flex-shrink: 0; overflow: hidden; position: relative; } .nav-avatar-circle img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; border-radius: 50%; } .nav-avatar-name { font-size: 13px; font-weight: 700; color: #1a3c6e; max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .nav-msg-badge { position: absolute; top: 0; right: 6px; background: #e53e3e; color: #fff; font-size: 10px; font-weight: 800; border-radius: 10px; padding: 1px 5px; min-width: 16px; text-align: center; line-height: 14px; } .nav-hamburger { display: none; flex-direction: column; justify-content: center; gap: 5px; width: 36px; height: 36px; background: none; border: none; cursor: pointer; padding: 7px; margin-left: 0.5rem; border-radius: 6px; } .nav-hamburger span { display: block; width: 22px; height: 2px; background: #1a3c6e; border-radius: 2px; transition: all 0.2s; } .nav-hamburger:hover { background: #f0f6ff; } .nav-mobile-menu { display: none; position: fixed; top: 58px; left: 0; right: 0; background: #fff; border-bottom: 1px solid #e0eaf5; flex-direction: column; z-index: 99; box-shadow: 0 4px 12px rgba(26,60,110,0.1); } .nav-mobile-menu.open { display: flex; } .nav-mobile-link { padding: 14px 1.5rem; font-size: 15px; font-weight: 600; color: #2563a8; text-decoration: none; border-bottom: 1px solid #f0f4f8; } .nav-mobile-link.active { color: #1a3c6e; font-weight: 700; } .nav-mobile-link:hover { background: #f4f8fd; } .nav-mobile-signin { padding: 14px 1.5rem; font-size: 15px; font-weight: 700; color: #fff; background: #2563a8; text-decoration: none; text-align: center; margin: 0.75rem; border-radius: 8px; } .nav-mobile-dashboard { padding: 14px 1.5rem; font-size: 15px; font-weight: 700; color: #1a3c6e; text-decoration: none; text-align: center; margin: 0.75rem; border-radius: 8px; border: 1.5px solid #c0d4ee; background: #f0f6ff; } .footer { padding: 1.25rem 2.5rem; border-top: 1px solid #e0eaf5; display: flex; justify-content: space-between; align-items: center; background: #fff; flex-wrap: wrap; gap: 0.5rem; } .footer-brand { font-size: 14px; font-weight: 700; color: #1a3c6e; } .footer-brand span { color: #2979d4; } .footer p { font-size: 12px; color: #8a9fb8; } .footer-links { display: flex; gap: 1.25rem; } .footer-links a { font-size: 12px; color: #8a9fb8; text-decoration: none; font-weight: 600; } .footer-links a:hover { color: #2563a8; } body { padding-top: 58px; } @media (max-width: 640px) { .nav { padding: 0 1rem; } .nav-link { display: none; } .nav-signin { display: none; } .nav-avatar-name { display: none; } .nav-hamburger { display: flex; } .footer { flex-direction: column; text-align: center; padding: 1rem; } .footer-links { justify-content: center; } }