/* ═══════════════════════════════════════════════════════ ICDMIS 2026 — NAVBAR STYLES Scope: topbar, #navbar, #mobileNav, .nav-*, .mob-*, .nav-flags Dependencies: Merriweather, Source Sans 3, Roboto Mono (Google Fonts) Add to : ════════════════════════════════════════════════════════ */ /* ── Local design tokens (won't conflict if page uses different names) ── */ :root { --nav-blue-dark: #0b2a5c; --nav-blue-mid: #1a4a8a; --nav-blue-main: #1e5cb3; --nav-blue-pale: #e8f0fb; --nav-blue-bg: #f0f5fc; --nav-white: #ffffff; --nav-text-dark: #0d1f3c; --nav-text-body: #3d4f6e; --nav-text-muted: #6b7fa3; --nav-border: #c5d5ee; --nav-border-lt: #dce8f7; --nav-shadow-sm: 0 2px 12px rgba(11,42,92,.10); --nav-shadow-md: 0 6px 28px rgba(11,42,92,.16); --nav-radius: 10px; } /* Shared button used inside the navbar */ .btn { display: inline-flex; align-items: center; gap: 8px; padding: 14px 32px; border-radius: 6px; font-size: 1rem; font-weight: 600; font-family: 'Source Sans 3', sans-serif; cursor: pointer; transition: all .25s; border: 2px solid transparent; text-decoration: none; } .btn-primary { background: var(--nav-blue-main); color: var(--nav-white); border-color: var(--nav-blue-main); } .btn-primary:hover { background: var(--nav-blue-dark); border-color: var(--nav-blue-dark); color: var(--nav-white); transform: translateY(-2px); box-shadow: var(--nav-shadow-md); } .btn-white { background: var(--nav-white); color: var(--nav-blue-dark); border-color: var(--nav-white); } .btn-white:hover { background: var(--nav-blue-pale); transform: translateY(-2px); } /* ── TOPBAR ───────────────────────────────────────────── */ #topbar { background: var(--nav-blue-dark); padding: 8px 0; font-size: .88rem; color: rgba(255,255,255,.75); font-family: 'Source Sans 3', sans-serif; } .topbar-inner { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 8px; } .topbar-inner a { color: rgba(255,255,255,.85); margin-left: 20px; text-decoration: none; } .topbar-inner a:hover { color: var(--nav-white); } /* ── NAVBAR ───────────────────────────────────────────── */ #navbar { position: sticky; top: 0; z-index: 1000; background: var(--nav-white); border-bottom: 3px solid var(--nav-blue-main); box-shadow: var(--nav-shadow-sm); } .nav-inner { display: flex; align-items: center; justify-content: space-between; height: 72px; } /* Logo */ .nav-logo { display: flex; align-items: center; gap: 10px; text-decoration: none; } .logo-img { height: 40px; width: auto; } .nav-logo-top { font-family: 'Merriweather', serif; font-size: 1.55rem; font-weight: 900; color: var(--nav-blue-dark); } .nav-logo-top span { color: var(--nav-blue-main); } .nav-logo-sub { font-size: .72rem; color: var(--nav-text-muted); letter-spacing: .05em; text-transform: uppercase; } /* Menu list */ .nav-menu { display: flex; list-style: none; height: 100%; align-items: stretch; margin: 0; padding: 0; } .nav-item { position: relative; display: flex; align-items: center; } .nav-item > a, .nav-item > .nav-drop-btn { display: flex; align-items: center; gap: 5px; font-size: 1rem; font-weight: 600; color: var(--nav-text-dark); padding: 0 16px; height: 100%; border-bottom: 3px solid transparent; margin-bottom: -3px; transition: color .2s, border-color .2s, background .2s; cursor: pointer; /* reset button defaults */ background: none; border-top: none; border-left: none; border-right: none; font-family: 'Source Sans 3', sans-serif; text-decoration: none; } .nav-item > a:hover, .nav-item > .nav-drop-btn:hover, .nav-item.active > a, .nav-item.active > .nav-drop-btn { color: var(--nav-blue-main); border-bottom-color: var(--nav-blue-main); background: var(--nav-blue-bg); } .caret { font-size: .65rem; margin-top: 1px; transition: transform .2s; } .nav-item:hover .caret { transform: rotate(180deg); } /* Dropdown */ .dropdown { position: absolute; top: calc(100% + 3px); left: 0; background: var(--nav-white); border: 1px solid var(--nav-border); border-top: 3px solid var(--nav-blue-main); border-radius: 0 0 var(--nav-radius) var(--nav-radius); min-width: 250px; box-shadow: var(--nav-shadow-md); opacity: 0; pointer-events: none; transform: translateY(8px); transition: opacity .22s, transform .22s; z-index: 200; } .nav-item:hover .dropdown { opacity: 1; pointer-events: all; transform: translateY(0); } .dropdown a { display: block; padding: 13px 22px; font-size: 1rem; font-weight: 500; color: var(--nav-text-body); border-bottom: 1px solid var(--nav-border-lt); transition: background .18s, color .18s, padding .18s; text-decoration: none; } .dropdown a:last-child { border-bottom: none; } .dropdown a:hover { background: var(--nav-blue-pale); color: var(--nav-blue-main); padding-left: 28px; } /* CTA area */ .nav-cta { display: flex; gap: 10px; align-items: center; padding-left: 12px; } /* Flags */ .nav-flags { display: flex; align-items: center; gap: 6px; margin-left: 10px; } .flag-wave { height: 18px; width: auto; border-radius: 2px; animation: flagWave 2.5s infinite ease-in-out; } .flag-wave:nth-child(2) { animation-delay: .3s; } @keyframes flagWave { 0% { transform: rotate(0deg) translateY(0); } 25% { transform: rotate(2deg) translateY(-1px); } 50% { transform: rotate(0deg) translateY(0); } 75% { transform: rotate(-2deg) translateY(1px); } 100% { transform: rotate(0deg) translateY(0); } } /* Hamburger */ .hamburger { display: none; flex-direction: column; gap: 5px; cursor: pointer; background: none; border: none; padding: 4px; } .hamburger span { display: block; width: 26px; height: 2.5px; background: var(--nav-blue-dark); border-radius: 2px; transition: .3s; } /* ── MOBILE NAV OVERLAY ───────────────────────────────── */ #mobileNav { position: fixed; inset: 0; z-index: 9999; background: var(--nav-blue-dark); display: flex; flex-direction: column; padding: 80px 32px 40px; transform: translateX(100%); transition: transform .35s ease; overflow-y: auto; font-family: 'Source Sans 3', sans-serif; } #mobileNav.open { transform: translateX(0); } #closeNav { position: absolute; top: 22px; right: 28px; background: none; border: none; color: var(--nav-white); font-size: 2rem; cursor: pointer; } .mob-link { font-family: 'Merriweather', serif; font-size: 1.5rem; color: var(--nav-white); padding: 14px 0; border-bottom: 1px solid rgba(255,255,255,.1); display: block; text-decoration: none; } .mob-link:hover { color: #7bc8ff; } .mob-sub { padding-left: 22px; font-size: 1.1rem; } /* ── CONTAINER helper (only if your pages don't already define it) ── */ /* Remove this block if your page already has .container defined */ .container { max-width: 1240px; margin: 0 auto; padding: 0 32px; } /* ═══════════════════════════════════════════════════════ RESPONSIVE ════════════════════════════════════════════════════════ */ /* Tablet portrait */ @media (max-width: 860px) { .nav-menu, .nav-cta { display: none; } .hamburger { display: flex; } } /* Mobile */ @media (max-width: 600px) { .container { padding: 0 18px; } .topbar-inner span { display: none; } .nav-flags { margin-left: 6px; } .flag-wave { height: 15px; } }