/* ═══════════════════════════════════════════════════════════ INFERCON — PROFESSIONAL COMPACT NAVBAR OVERRIDE Drop this AFTER main.css in your to apply changes. ═══════════════════════════════════════════════════════════ */ /* ── Core variables ──────────────────────────────────────── */ :root { --nav-h: 76px; /* navbar height */ --nav-bg: #ffffff; --nav-bg-scroll: rgba(255, 255, 255, 0.97); --nav-border: rgba(226, 232, 240, 0.9); --nav-shadow: 0 1px 0 var(--nav-border), 0 4px 16px rgba(15,23,42,0.05); --nav-shadow-scroll: 0 1px 0 var(--nav-border), 0 8px 28px rgba(15,23,42,0.09); --nav-link-color: #1e293b; --nav-link-active: #2563eb; --nav-accent: #2563eb; --nav-logo-h: 48px; /* logo height */ --nav-btn-bg: #2563eb; --nav-btn-bg-h: #1d4ed8; --nav-font: "Poppins", sans-serif; --nav-radius: 7px; } /* ── Wrapper ─────────────────────────────────────────────── */ .header { position: sticky; top: 0; z-index: 1000; } .navbar { padding-top: 0 !important; padding-bottom: 0 !important; min-height: var(--nav-h); height: var(--nav-h); background-color: var(--nav-bg) !important; border-bottom: 1px solid var(--nav-border) !important; box-shadow: var(--nav-shadow) !important; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); animation: navbar-enter 400ms ease-out both; transition: box-shadow 0.25s ease, background-color 0.25s ease; } .navbar.fixed-top { background: var(--nav-bg-scroll) !important; box-shadow: var(--nav-shadow-scroll) !important; } @keyframes navbar-enter { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: translateY(0); } } /* ── Container alignment ─────────────────────────────────── */ .navbar > .container { height: var(--nav-h); display: flex; align-items: center; } /* ── Logo ────────────────────────────────────────────────── */ .navbar-brand { display: flex; align-items: center; padding: 0; margin-right: 32px; flex-shrink: 0; } .navbar-brand img, .navbar .navbar-brand .logo-display, .navbar .navbar-brand .logo-scrolled { height: var(--nav-logo-h) !important; width: auto !important; max-height: var(--nav-logo-h) !important; object-fit: contain; display: block; } .navbar .navbar-brand .logo-display { display: block; } .navbar .navbar-brand .logo-scrolled { display: none; } .navbar.fixed-top .navbar-brand .logo-display { display: none; } .navbar.fixed-top .navbar-brand .logo-scrolled { display: block; } /* ── Nav links ───────────────────────────────────────────── */ @media (min-width: 992px) { .navbar .navbar-nav { align-items: center; gap: 0; } .navbar .nav-item .nav-link { font-family: var(--nav-font); font-size: 0.88rem !important; font-weight: 600 !important; letter-spacing: 0.025em !important; color: var(--nav-link-color) !important; text-transform: none; padding: 0 16px !important; height: var(--nav-h); line-height: var(--nav-h); display: flex; align-items: center; position: relative; transition: color 160ms ease; white-space: nowrap; margin-right: 0 !important; } /* Animated underline accent — gradient bar that grows from centre */ .navbar .nav-item .nav-link::before { content: ""; position: absolute; bottom: 0; left: 50%; right: 50%; height: 3px; background: linear-gradient(90deg, transparent 0%, var(--nav-accent) 30%, #60a5fa 50%, var(--nav-accent) 70%, transparent 100%); border-radius: 3px 3px 0 0; opacity: 0; transition: left 220ms ease, right 220ms ease, opacity 180ms ease; } /* Glowing dot at centre bottom on hover */ .navbar .nav-item .nav-link::after { content: ""; position: absolute; bottom: -2px; left: 50%; transform: translateX(-50%) scale(0); width: 6px; height: 6px; border-radius: 50%; background: var(--nav-accent); box-shadow: 0 0 8px 2px rgba(37,99,235,0.5); opacity: 0; transition: transform 200ms ease 100ms, opacity 200ms ease 100ms; } .navbar .nav-item .nav-link:hover, .navbar .nav-item .nav-link.active { color: var(--nav-link-active) !important; } .navbar .nav-item .nav-link:hover::before, .navbar .nav-item .nav-link.active::before { left: 12px; right: 12px; opacity: 1; } .navbar .nav-item .nav-link:hover::after, .navbar .nav-item .nav-link.active::after { transform: translateX(-50%) scale(1); opacity: 1; } /* ── Right section ── */ .header-nav-right { display: flex; align-items: center; gap: 10px; margin-left: 16px; flex-shrink: 0; } /* Phone link */ .nav-phone-link { display: inline-flex; align-items: center; gap: 6px; font-family: var(--nav-font); font-size: 0.84rem !important; font-weight: 700; color: #1a3a6e; text-decoration: none; letter-spacing: 0.02em; white-space: nowrap; padding: 6px 12px; border: 1px solid rgba(37, 99, 235, 0.18); border-radius: var(--nav-radius); background: rgba(37, 99, 235, 0.04); transition: background 160ms ease, border-color 160ms ease, color 160ms ease; } .nav-phone-link i { color: var(--nav-accent); font-size: 0.75rem; } .nav-phone-link:hover { background: rgba(37, 99, 235, 0.1); border-color: rgba(37, 99, 235, 0.35); color: var(--nav-accent); } /* Brochure CTA button */ .navbar .header-btn { padding-top: 0 !important; } .navbar .header-btn .theme-btn, .navbar.fixed-top .header-btn .theme-btn { background: var(--nav-btn-bg) !important; color: #ffffff !important; border: none; border-radius: var(--nav-radius) !important; padding: 9px 18px !important; font-family: var(--nav-font); font-size: 0.84rem !important; font-weight: 700 !important; letter-spacing: 0.06em !important; display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; cursor: pointer; box-shadow: 0 2px 10px rgba(37, 99, 235, 0.22); transition: background 160ms ease, transform 160ms ease, box-shadow 160ms ease; } .navbar .header-btn .theme-btn:hover { background: var(--nav-btn-bg-h) !important; transform: translateY(-1px); box-shadow: 0 6px 18px rgba(37, 99, 235, 0.3); } .navbar .header-btn .theme-btn:active { transform: translateY(0); } /* Show header-btn at 992px+ even below 1199px */ .navbar .header-btn { display: flex !important; align-items: center; } } /* ── Divider between nav links and right zone (subtle) ────── */ @media (min-width: 992px) { .header-nav-right::before { content: ""; display: block; width: 1px; height: 22px; background: rgba(148, 163, 184, 0.35); margin-right: 4px; } } /* ── Mobile navbar ───────────────────────────────────────── */ @media (max-width: 991px) { .navbar { height: var(--nav-h) !important; min-height: var(--nav-h) !important; padding: 0 !important; position: fixed !important; top: 0; left: 0; right: 0; } .navbar > .container { height: var(--nav-h) !important; padding-left: 16px; padding-right: 16px; display: flex !important; align-items: center !important; justify-content: space-between !important; flex-wrap: nowrap !important; } .navbar-brand img, .navbar .navbar-brand .logo-display, .navbar .navbar-brand .logo-scrolled { height: 36px !important; max-height: 36px !important; } /* Hide desktop collapse */ .navbar-collapse { display: none !important; } /* Toggler */ .mobile-menu-right { display: flex; align-items: center; } button.navbar-toggler { font-size: 1.4rem !important; padding: 6px !important; margin: 0; background: transparent; border: none; cursor: pointer; border-radius: 6px; transition: background 150ms ease; } button.navbar-toggler:hover { background: rgba(15,23,42,0.06); } button.navbar-toggler:focus { outline: none; box-shadow: none; } .navbar-toggler-icon { width: 22px !important; height: 22px !important; } } @media (max-width: 575px) { .navbar-brand img, .navbar .navbar-brand .logo-display, .navbar .navbar-brand .logo-scrolled { height: 30px !important; max-height: 30px !important; } } /* ── Reduced-motion ──────────────────────────────────────── */ @media (prefers-reduced-motion: reduce) { .navbar, .navbar .nav-item .nav-link, .navbar .nav-item .nav-link::before, .navbar .nav-item .nav-link::after, .navbar .header-btn .theme-btn { animation: none !important; transition: none !important; } }