{"id":50582,"date":"2024-08-18T19:53:27","date_gmt":"2024-08-18T19:53:27","guid":{"rendered":"http:\/\/155.0.14.112\/?page_id=50582"},"modified":"2026-08-25T09:18:05","modified_gmt":"2026-08-25T09:18:05","slug":"locations","status":"publish","type":"page","link":"https:\/\/www.nipa.ac.zm\/index.php\/locations\/","title":{"rendered":"locations"},"content":{"rendered":"\t\t
\n\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\n\n\n \n \n Library Locations \u2726 NIPA<\/title>\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Playfair+Display:wght@400;600;700;800&family=Inter:wght@300;400;500;600;700;800&display=swap\" rel=\"stylesheet\" \/>\n <link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.5.0\/css\/all.min.css\" \/>\n <style>\n * {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n }\n\n body {\n font-family: \"Inter\", sans-serif;\n min-height: 100vh;\n display: flex;\n justify-content: center;\n align-items: center;\n padding: 24px;\n background: #f0f4f2;\n background-image:\n radial-gradient(ellipse at 10% 20%, rgba(244, 111, 54, 0.04) 0%, transparent 60%),\n radial-gradient(ellipse at 90% 80%, rgba(2, 111, 61, 0.04) 0%, transparent 50%),\n radial-gradient(ellipse at 50% 50%, rgba(244, 111, 54, 0.02) 0%, transparent 70%);\n transition: background 0.6s ease;\n cursor: default;\n }\n\n \/* Floating particles *\/\n .particle {\n position: fixed;\n width: 4px;\n height: 4px;\n background: rgba(244, 111, 54, 0.15);\n border-radius: 50%;\n pointer-events: none;\n animation: floatParticle 20s infinite linear;\n }\n\n .particle:nth-child(1) { top: 10%; left: 5%; animation-delay: 0s; width: 6px; height: 6px; }\n .particle:nth-child(2) { top: 30%; left: 95%; animation-delay: 3s; width: 4px; height: 4px; }\n .particle:nth-child(3) { top: 60%; left: 2%; animation-delay: 6s; width: 5px; height: 5px; }\n .particle:nth-child(4) { top: 80%; left: 90%; animation-delay: 9s; width: 3px; height: 3px; }\n .particle:nth-child(5) { top: 50%; left: 50%; animation-delay: 12s; width: 7px; height: 7px; }\n\n @keyframes floatParticle {\n 0% { transform: translate(0, 0) scale(0); opacity: 0; }\n 10% { opacity: 1; }\n 90% { opacity: 1; }\n 100% { transform: translate(100px, -200px) scale(1); opacity: 0; }\n }\n\n .card {\n background: rgba(255, 255, 255, 0.92);\n backdrop-filter: blur(20px) saturate(1.2);\n -webkit-backdrop-filter: blur(20px) saturate(1.2);\n border-radius: 24px;\n border: 1px solid rgba(255, 255, 255, 0.6);\n box-shadow: \n 0 20px 60px rgba(0, 0, 0, 0.04),\n 0 8px 24px rgba(0, 0, 0, 0.02),\n inset 0 1px 0 rgba(255, 255, 255, 0.8);\n width: 100%;\n max-width: 840px;\n padding: 36px 40px 30px;\n animation: cardFadeIn 0.8s ease forwards;\n position: relative;\n transition: all 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);\n z-index: 1;\n }\n\n @keyframes cardFadeIn {\n 0% { opacity: 0; transform: translateY(30px) scale(0.97); }\n 100% { opacity: 1; transform: translateY(0) scale(1); }\n }\n\n .card:hover {\n box-shadow: \n 0 30px 80px rgba(244, 111, 54, 0.10),\n 0 15px 40px rgba(244, 111, 54, 0.05),\n 0 0 100px rgba(244, 111, 54, 0.04),\n inset 0 1px 0 rgba(255, 255, 255, 0.9);\n transform: translateY(-6px) scale(1.005);\n border-color: rgba(244, 111, 54, 0.08);\n transition: all 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);\n }\n\n \/* Animated gradient border - FIXED *\/\n .card::before {\n content: '';\n position: absolute;\n inset: -2px;\n border-radius: 26px;\n background: linear-gradient(135deg, \n rgba(244, 111, 54, 0.3), \n rgba(2, 111, 61, 0.15), \n rgba(244, 111, 54, 0.3),\n rgba(3, 152, 85, 0.1),\n rgba(244, 111, 54, 0.3)\n );\n background-size: 300% 300%;\n z-index: -1;\n animation: gradientBorder 6s ease-in-out infinite;\n opacity: 0;\n padding: 2px;\n -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);\n -webkit-mask-composite: xor;\n mask-composite: exclude;\n transition: opacity 0.8s ease;\n pointer-events: none;\n }\n\n .card:hover::before {\n opacity: 1;\n animation: gradientBorder 4s ease-in-out infinite;\n }\n\n @keyframes gradientBorder {\n 0%, 100% { background-position: 0% 50%; }\n 50% { background-position: 100% 50%; }\n }\n\n \/* Decorative top line *\/\n .card::after {\n content: '';\n position: absolute;\n top: 0;\n left: 50%;\n transform: translateX(-50%);\n width: 120px;\n height: 3px;\n background: linear-gradient(90deg, transparent, #026F3D, #039855, transparent);\n border-radius: 0 0 4px 4px;\n transition: all 0.8s ease;\n z-index: 2;\n }\n\n .card:hover::after {\n width: 180px;\n background: linear-gradient(90deg, transparent, #f46f36, #026F3D, #f46f36, transparent);\n box-shadow: 0 0 40px rgba(244, 111, 54, 0.15);\n }\n\n \/* Header *\/\n .header {\n display: flex;\n align-items: center;\n gap: 18px;\n margin-bottom: 22px;\n animation: fadeSlideUp 0.7s ease 0.1s both;\n position: relative;\n z-index: 3;\n }\n\n @keyframes fadeSlideUp {\n 0% { opacity: 0; transform: translateY(20px); }\n 100% { opacity: 1; transform: translateY(0); }\n }\n\n .header-icon-wrapper {\n position: relative;\n flex-shrink: 0;\n cursor: pointer;\n }\n\n .header-icon-wrapper::before {\n content: '';\n position: absolute;\n inset: -8px;\n border-radius: 18px;\n background: linear-gradient(135deg, rgba(244, 111, 54, 0.08), rgba(2, 111, 61, 0.08));\n filter: blur(20px);\n animation: iconGlowPulse 4s ease-in-out infinite;\n transition: all 0.6s ease;\n z-index: 0;\n }\n\n .header-icon-wrapper:hover::before {\n background: linear-gradient(135deg, rgba(244, 111, 54, 0.15), rgba(2, 111, 61, 0.10));\n filter: blur(30px);\n transform: scale(1.2);\n }\n\n @keyframes iconGlowPulse {\n 0%, 100% { opacity: 0.3; transform: scale(1); }\n 50% { opacity: 0.8; transform: scale(1.1); }\n }\n\n .header-icon {\n width: 52px;\n height: 52px;\n background: linear-gradient(145deg, #026F3D, #039855);\n border-radius: 16px;\n display: flex;\n align-items: center;\n justify-content: center;\n color: #fff;\n font-size: 24px;\n box-shadow: 0 8px 24px rgba(2, 111, 61, 0.2);\n position: relative;\n z-index: 1;\n transition: all 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);\n }\n\n .header-icon:active {\n transform: scale(0.9);\n transition: all 0.1s ease;\n }\n\n .header-icon-wrapper:hover .header-icon {\n transform: scale(1.1) rotate(-6deg);\n box-shadow: \n 0 12px 40px rgba(244, 111, 54, 0.35),\n 0 0 60px rgba(244, 111, 54, 0.08);\n transition: all 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);\n }\n\n .header-text h1 {\n font-family: \"Playfair Display\", serif;\n font-size: 28px;\n font-weight: 700;\n color: #0d1a16;\n line-height: 1.1;\n transition: color 0.4s ease;\n }\n\n .header-text h1 span {\n background: linear-gradient(135deg, #026F3D, #039855);\n -webkit-background-clip: text;\n -webkit-text-fill-color: transparent;\n background-clip: text;\n transition: all 0.4s ease;\n }\n\n .header:hover .header-text h1 span {\n background: linear-gradient(135deg, #f46f36, #d45a2a);\n -webkit-background-clip: text;\n -webkit-text-fill-color: transparent;\n background-clip: text;\n }\n\n .header-text .sub {\n font-size: 11px;\n font-weight: 600;\n color: #1a2e2a;\n letter-spacing: 1.2px;\n text-transform: uppercase;\n transition: color 0.4s ease;\n }\n\n .header-text .sub .accent {\n color: #f46f36;\n }\n\n \/* Description *\/\n .description {\n font-size: 13px;\n line-height: 1.8;\n color: #1a2e2a;\n margin-bottom: 26px;\n padding: 16px 20px;\n background: linear-gradient(135deg, rgba(2, 111, 61, 0.03), rgba(244, 111, 54, 0.01));\n border-radius: 12px;\n border-left: 4px solid #026F3D;\n transition: all 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);\n animation: fadeSlideUp 0.7s ease 0.15s both;\n position: relative;\n overflow: hidden;\n cursor: pointer;\n z-index: 3;\n }\n\n .description::before {\n content: '';\n position: absolute;\n inset: 0;\n background: radial-gradient(circle at 0% 50%, rgba(244, 111, 54, 0.03), transparent 70%);\n opacity: 0;\n transition: opacity 0.6s ease;\n pointer-events: none;\n }\n\n .description:active {\n transform: scale(0.98);\n transition: all 0.1s ease;\n }\n\n .description:hover {\n background: linear-gradient(135deg, rgba(244, 111, 54, 0.04), rgba(2, 111, 61, 0.02));\n border-left-color: #f46f36;\n transform: translateX(6px) scale(1.005);\n box-shadow: \n 0 8px 40px rgba(244, 111, 54, 0.06),\n 0 0 60px rgba(244, 111, 54, 0.02);\n transition: all 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);\n }\n\n .description:hover::before {\n opacity: 1;\n }\n\n .description strong {\n color: #026F3D;\n font-weight: 700;\n transition: color 0.4s ease;\n }\n\n .description:hover strong {\n color: #f46f36;\n }\n\n \/* Location Grid *\/\n .location-grid {\n display: grid;\n grid-template-columns: repeat(2, 1fr);\n gap: 18px;\n margin-bottom: 26px;\n animation: fadeSlideUp 0.7s ease 0.25s both;\n position: relative;\n z-index: 3;\n }\n\n .location-card {\n padding: 18px 20px;\n background: rgba(255, 255, 255, 0.7);\n backdrop-filter: blur(10px);\n -webkit-backdrop-filter: blur(10px);\n border-radius: 14px;\n border: 1px solid rgba(2, 111, 61, 0.06);\n transition: all 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);\n position: relative;\n overflow: hidden;\n opacity: 0;\n animation: cardReveal 0.6s ease forwards;\n cursor: pointer;\n z-index: 3;\n }\n\n .location-card:nth-child(1) { animation-delay: 0.3s; }\n .location-card:nth-child(2) { animation-delay: 0.4s; }\n .location-card:nth-child(3) { animation-delay: 0.5s; }\n .location-card:nth-child(4) { animation-delay: 0.6s; }\n\n @keyframes cardReveal {\n 0% { opacity: 0; transform: translateY(20px) scale(0.96); }\n 100% { opacity: 1; transform: translateY(0) scale(1); }\n }\n\n \/* Click ripple effect *\/\n .location-card .ripple {\n position: absolute;\n border-radius: 50%;\n background: rgba(244, 111, 54, 0.15);\n transform: scale(0);\n animation: rippleAnim 0.8s ease-out forwards;\n pointer-events: none;\n z-index: 10;\n }\n\n @keyframes rippleAnim {\n 0% { transform: scale(0); opacity: 1; }\n 100% { transform: scale(4); opacity: 0; }\n }\n\n \/* Premium glow layers - FIXED *\/\n .location-card::before {\n content: '';\n position: absolute;\n inset: 0;\n background: radial-gradient(circle at center, rgba(244, 111, 54, 0.06), transparent 70%);\n opacity: 0;\n transition: opacity 0.6s ease;\n pointer-events: none;\n z-index: 0;\n }\n\n .location-card::after {\n content: '';\n position: absolute;\n inset: -3px;\n border-radius: 16px;\n background: linear-gradient(135deg, \n rgba(244, 111, 54, 0.08), \n rgba(2, 111, 61, 0.04), \n rgba(244, 111, 54, 0.08)\n );\n z-index: -2;\n opacity: 0;\n transition: all 0.6s ease;\n filter: blur(20px);\n pointer-events: none;\n }\n\n .location-card:hover {\n background: rgba(255, 248, 245, 0.9);\n border-color: rgba(244, 111, 54, 0.2);\n transform: translateY(-6px) scale(1.02);\n box-shadow: \n 0 12px 50px rgba(244, 111, 54, 0.10),\n 0 0 80px rgba(244, 111, 54, 0.04),\n 0 0 120px rgba(244, 111, 54, 0.02);\n transition: all 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);\n }\n\n .location-card:active {\n transform: scale(0.96);\n transition: all 0.1s ease;\n }\n\n .location-card:hover::before {\n opacity: 1;\n transition: opacity 0.6s ease;\n }\n\n .location-card:hover::after {\n opacity: 1;\n transform: scale(1.04);\n transition: all 0.6s ease;\n }\n\n .location-card * {\n position: relative;\n z-index: 2;\n }\n\n .location-card .location-name {\n font-family: \"Playfair Display\", serif;\n font-size: 17px;\n font-weight: 700;\n color: #0d1a16;\n display: flex;\n align-items: center;\n gap: 10px;\n margin-bottom: 4px;\n transition: all 0.4s ease;\n }\n\n .location-card:hover .location-name {\n color: #026F3D;\n transition: all 0.4s ease;\n }\n\n .location-card .location-name .icon-wrap {\n display: inline-flex;\n width: 32px;\n height: 32px;\n background: rgba(2, 111, 61, 0.06);\n border-radius: 8px;\n align-items: center;\n justify-content: center;\n transition: all 0.5s ease;\n }\n\n .location-card:hover .location-name .icon-wrap {\n background: rgba(244, 111, 54, 0.08);\n box-shadow: 0 0 20px rgba(244, 111, 54, 0.05);\n transform: rotate(-3deg);\n }\n\n .location-card .location-name i {\n color: #026F3D;\n font-size: 14px;\n transition: all 0.5s ease;\n }\n\n .location-card:hover .location-name i {\n color: #f46f36;\n transform: scale(1.2) rotate(-6deg);\n filter: drop-shadow(0 0 12px rgba(244, 111, 54, 0.15));\n }\n\n .location-card .location-address {\n font-size: 12px;\n color: #1a2e2a;\n line-height: 1.5;\n padding-left: 42px;\n font-weight: 500;\n transition: color 0.4s ease;\n }\n\n .location-card .location-address i {\n color: #026F3D;\n font-size: 10px;\n margin-right: 6px;\n transition: all 0.5s ease;\n }\n\n .location-card:hover .location-address i {\n color: #f46f36;\n transform: scale(1.2) translateX(-2px);\n filter: drop-shadow(0 0 10px rgba(244, 111, 54, 0.1));\n }\n\n .location-card .location-tag {\n display: inline-block;\n font-size: 8px;\n font-weight: 700;\n text-transform: uppercase;\n letter-spacing: 0.6px;\n padding: 3px 12px;\n border-radius: 20px;\n background: rgba(2, 111, 61, 0.06);\n color: #026F3D;\n margin-top: 6px;\n margin-left: 42px;\n transition: all 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);\n user-select: none;\n }\n\n .location-card:hover .location-tag {\n background: rgba(244, 111, 54, 0.10);\n color: #f46f36;\n transform: scale(1.04);\n box-shadow: 0 0 25px rgba(244, 111, 54, 0.04);\n }\n\n \/* Featured Card *\/\n .location-card.featured {\n background: linear-gradient(135deg, rgba(2, 111, 61, 0.04), rgba(2, 111, 61, 0.01));\n border-color: rgba(2, 111, 61, 0.10);\n }\n\n .location-card.featured:hover {\n background: linear-gradient(135deg, rgba(244, 111, 54, 0.05), rgba(2, 111, 61, 0.02));\n border-color: #f46f36;\n box-shadow: \n 0 12px 50px rgba(244, 111, 54, 0.12),\n 0 0 80px rgba(244, 111, 54, 0.05);\n }\n\n .location-card.featured .location-name {\n color: #026F3D;\n }\n\n .location-card.featured .location-tag {\n background: rgba(2, 111, 61, 0.10);\n color: #026F3D;\n }\n\n .location-card.featured:hover .location-name {\n color: #f46f36;\n }\n\n .location-card.featured:hover .location-tag {\n background: rgba(244, 111, 54, 0.12);\n color: #f46f36;\n }\n\n \/* American Corner *\/\n .location-card.american {\n background: linear-gradient(135deg, rgba(2, 111, 61, 0.03), rgba(244, 111, 54, 0.02));\n border-color: rgba(2, 111, 61, 0.06);\n border-left: 3px solid #026F3D;\n }\n\n .location-card.american:hover {\n background: linear-gradient(135deg, rgba(244, 111, 54, 0.05), rgba(2, 111, 61, 0.02));\n border-color: #f46f36;\n border-left-color: #f46f36;\n box-shadow: \n 0 12px 50px rgba(244, 111, 54, 0.08),\n 0 0 60px rgba(244, 111, 54, 0.03);\n }\n\n .location-card.american .location-name .icon-wrap {\n background: rgba(244, 111, 54, 0.06);\n }\n\n .location-card.american:hover .location-name .icon-wrap {\n background: rgba(244, 111, 54, 0.10);\n box-shadow: 0 0 30px rgba(244, 111, 54, 0.05);\n }\n\n \/* Footer *\/\n .footer {\n display: flex;\n justify-content: center;\n align-items: center;\n flex-wrap: wrap;\n gap: 16px;\n padding-top: 18px;\n border-top: 2px solid rgba(2, 111, 61, 0.04);\n animation: fadeSlideUp 0.7s ease 0.7s both;\n transition: all 0.5s ease;\n position: relative;\n z-index: 3;\n }\n\n .footer:hover {\n border-top-color: rgba(244, 111, 54, 0.10);\n transition: all 0.5s ease;\n }\n\n .status-badge {\n display: flex;\n align-items: center;\n gap: 10px;\n font-size: 12px;\n font-weight: 600;\n color: #1a2e2a;\n background: rgba(255, 255, 255, 0.7);\n backdrop-filter: blur(10px);\n padding: 6px 18px 6px 12px;\n border-radius: 30px;\n border: 1px solid rgba(2, 111, 61, 0.06);\n transition: all 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);\n position: relative;\n overflow: hidden;\n cursor: pointer;\n z-index: 3;\n }\n\n .status-badge:active {\n transform: scale(0.95);\n transition: all 0.1s ease;\n }\n\n .status-badge::before {\n content: '';\n position: absolute;\n inset: -2px;\n border-radius: 30px;\n background: linear-gradient(135deg, rgba(244, 111, 54, 0.10), transparent, rgba(244, 111, 54, 0.10));\n z-index: -1;\n opacity: 0;\n transition: opacity 0.6s ease;\n filter: blur(12px);\n }\n\n .status-badge:hover {\n background: rgba(255, 248, 245, 0.9);\n border-color: #f46f36;\n transform: scale(1.04);\n box-shadow: \n 0 8px 40px rgba(244, 111, 54, 0.08),\n 0 0 60px rgba(244, 111, 54, 0.03);\n transition: all 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);\n }\n\n .status-badge:hover::before {\n opacity: 1;\n }\n\n .status-dot {\n width: 8px;\n height: 8px;\n border-radius: 50%;\n background: #039855;\n display: inline-block;\n animation: pulse 2s ease-in-out infinite;\n transition: all 0.5s ease;\n box-shadow: 0 0 12px rgba(2, 111, 61, 0.15);\n }\n\n .status-badge:hover .status-dot {\n background: #f46f36;\n box-shadow: 0 0 30px rgba(244, 111, 54, 0.4);\n animation-duration: 1s;\n }\n\n @keyframes pulse {\n 0%, 100% { opacity: 1; transform: scale(1); }\n 50% { opacity: 0.4; transform: scale(0.8); }\n }\n\n .footer .info {\n font-size: 12px;\n font-weight: 500;\n color: #1a2e2a;\n transition: all 0.4s ease;\n cursor: default;\n }\n\n .footer .info i {\n color: #026F3D;\n margin-right: 6px;\n transition: all 0.5s ease;\n }\n\n .footer:hover .info i {\n color: #f46f36;\n transform: scale(1.15) rotate(-5deg);\n filter: drop-shadow(0 0 12px rgba(244, 111, 54, 0.1));\n }\n\n .footer .divider {\n color: #c5d9d1;\n font-size: 14px;\n transition: color 0.4s ease;\n }\n\n .footer:hover .divider {\n color: #f46f36;\n }\n\n \/* Responsive *\/\n @media (max-width: 768px) {\n .card {\n padding: 26px 24px 22px;\n border-radius: 18px;\n }\n\n .header-text h1 {\n font-size: 22px;\n }\n\n .header-icon {\n width: 44px;\n height: 44px;\n font-size: 20px;\n border-radius: 12px;\n }\n\n .location-grid {\n grid-template-columns: 1fr 1fr;\n gap: 14px;\n }\n\n .description {\n font-size: 12px;\n padding: 14px 16px;\n }\n\n .particle {\n display: none;\n }\n }\n\n @media (max-width: 600px) {\n .card {\n padding: 20px 16px 16px;\n border-radius: 14px;\n }\n\n .header {\n gap: 14px;\n margin-bottom: 18px;\n }\n\n .header-text h1 {\n font-size: 18px;\n }\n\n .header-icon {\n width: 38px;\n height: 38px;\n font-size: 16px;\n border-radius: 10px;\n }\n\n .header-text .sub {\n font-size: 9px;\n }\n\n .description {\n font-size: 11px;\n padding: 12px 14px;\n margin-bottom: 20px;\n }\n\n .location-grid {\n grid-template-columns: 1fr;\n gap: 12px;\n margin-bottom: 20px;\n }\n\n .location-card {\n padding: 14px 16px;\n }\n\n .location-card .location-name {\n font-size: 15px;\n }\n\n .location-card .location-address {\n font-size: 11px;\n padding-left: 42px;\n }\n\n .location-card .location-tag {\n font-size: 7px;\n padding: 2px 10px;\n margin-left: 42px;\n }\n\n .footer {\n gap: 12px;\n padding-top: 16px;\n }\n\n .status-badge {\n font-size: 10px;\n padding: 4px 14px 4px 10px;\n }\n\n .footer .info {\n font-size: 10px;\n }\n\n .footer .divider {\n display: none;\n }\n\n .particle {\n display: none;\n }\n }\n\n @media (max-width: 400px) {\n .card {\n padding: 16px 12px 14px;\n border-radius: 12px;\n }\n\n .header-text h1 {\n font-size: 16px;\n }\n\n .header-icon {\n width: 34px;\n height: 34px;\n font-size: 14px;\n border-radius: 8px;\n }\n\n .description {\n font-size: 10px;\n padding: 10px 12px;\n border-left-width: 3px;\n }\n\n .location-card {\n padding: 12px 14px;\n }\n\n .location-card .location-name {\n font-size: 14px;\n gap: 8px;\n }\n\n .location-card .location-name .icon-wrap {\n width: 28px;\n height: 28px;\n }\n\n .location-card .location-address {\n font-size: 10px;\n padding-left: 36px;\n }\n\n .location-card .location-tag {\n font-size: 6px;\n padding: 1px 8px;\n margin-left: 36px;\n }\n\n .status-badge {\n font-size: 9px;\n padding: 3px 12px 3px 8px;\n }\n\n .status-dot {\n width: 6px;\n height: 6px;\n }\n\n .footer .info {\n font-size: 9px;\n }\n\n .particle {\n display: none;\n }\n }\n <\/style>\n<\/head>\n<body>\n\n <!-- Floating Particles -->\n <div class=\"particle\"><\/div>\n <div class=\"particle\"><\/div>\n <div class=\"particle\"><\/div>\n <div class=\"particle\"><\/div>\n <div class=\"particle\"><\/div>\n\n <div class=\"card\">\n <!-- Header -->\n <div class=\"header\">\n <div class=\"header-icon-wrapper\">\n <div class=\"header-icon\">\n <i class=\"fas fa-map-marker-alt\"><\/i>\n <\/div>\n <\/div>\n <div class=\"header-text\">\n <h1>Library <span>Locations<\/span><\/h1>\n <div class=\"sub\"><span class=\"accent\">\u2726<\/span> NIPA LIBRARY SERVICES <span class=\"accent\">\u2726<\/span><\/div>\n <\/div>\n <\/div>\n\n <!-- Description -->\n <div class=\"description\" id=\"description\">\n <strong>National Institute of Public Administration (NIPA)<\/strong> operates a library at each of its three campuses, in Lusaka and Ndola to support training, research and consultancy services offered by the Institute. The main library is located at the Main Campus in Lusaka and houses both physical and digital resources on courses offered by the institute as well as other resources on general knowledge and fiction.\n <br \/><br \/>\n The <strong>American Corner<\/strong> is housed within the Main Campus Library on the first floor providing information about the United States, policy, culture and values; English language learning; alumni activities, and information about study in the U.S.\n <br \/><br \/>\n <strong>Burma Campus<\/strong> library is located at Burma Campus in Lusaka with a smaller collection that covers various courses offered there as well as books on general knowledge and fiction.\n <br \/><br \/>\n <strong>Ndola Campus<\/strong> library is located at Ndola Campus in Ndola with a small collection of books and computers.\n <\/div>\n\n <!-- Location Grid -->\n <div class=\"location-grid\">\n <!-- Main Campus -->\n <div class=\"location-card featured\" data-location=\"main\">\n <div class=\"location-name\">\n <span class=\"icon-wrap\"><i class=\"fas fa-building\"><\/i><\/span>\n Main Campus Library\n <\/div>\n <div class=\"location-address\">\n <i class=\"fas fa-map-pin\"><\/i> Plot 4810, Dushambe Road, Lusaka\n <\/div>\n <span class=\"location-tag\">\u2726 Main Library<\/span>\n <\/div>\n\n <!-- American Corner -->\n <div class=\"location-card american\" data-location=\"american\">\n <div class=\"location-name\">\n <span class=\"icon-wrap\"><i class=\"fas fa-flag-usa\"><\/i><\/span>\n American Corner\n <\/div>\n <div class=\"location-address\">\n <i class=\"fas fa-map-pin\"><\/i> First Floor, Main Campus Library\n <\/div>\n <span class=\"location-tag\">\u2726 Information & Culture<\/span>\n <\/div>\n\n <!-- Burma Campus -->\n <div class=\"location-card\" data-location=\"burma\">\n <div class=\"location-name\">\n <span class=\"icon-wrap\"><i class=\"fas fa-university\"><\/i><\/span>\n Burma Campus Library\n <\/div>\n <div class=\"location-address\">\n <i class=\"fas fa-map-pin\"><\/i> Burma Road, Lusaka\n <\/div>\n <span class=\"location-tag\">\u2726 Branch Library<\/span>\n <\/div>\n\n <!-- Ndola Campus -->\n <div class=\"location-card\" data-location=\"ndola\">\n <div class=\"location-name\">\n <span class=\"icon-wrap\"><i class=\"fas fa-university\"><\/i><\/span>\n Ndola Campus Library\n <\/div>\n <div class=\"location-address\">\n <i class=\"fas fa-map-pin\"><\/i> Plot No. 117-118, off Monkey Foundation, Ndola\n <\/div>\n <span class=\"location-tag\">\u2726 Branch Library<\/span>\n <\/div>\n <\/div>\n\n <!-- Footer -->\n <div class=\"footer\">\n <span class=\"status-badge\" id=\"statusBadge\">\n <span class=\"status-dot\"><\/span>\n All Locations Open\n <\/span>\n <span class=\"divider\">\u2022<\/span>\n <span class=\"info\">\n <i class=\"far fa-clock\"><\/i> Mon\u2013Fri: 09:00\u201317:00\n <\/span>\n <\/div>\n <\/div>\n\n <script>\n \/\/ Ripple effect on location cards\n document.querySelectorAll('.location-card').forEach(card => {\n card.addEventListener('click', function(e) {\n const rect = this.getBoundingClientRect();\n const x = e.clientX - rect.left;\n const y = e.clientY - rect.top;\n \n const ripple = document.createElement('span');\n ripple.className = 'ripple';\n ripple.style.left = x + 'px';\n ripple.style.top = y + 'px';\n ripple.style.width = '20px';\n ripple.style.height = '20px';\n \n this.appendChild(ripple);\n \n setTimeout(() => {\n ripple.remove();\n }, 800);\n });\n });\n\n \/\/ Status badge toggle\n document.getElementById('statusBadge').addEventListener('click', function() {\n const dot = this.querySelector('.status-dot');\n const text = this.childNodes[2];\n \n if (text.textContent.trim() === 'All Locations Open') {\n text.textContent = ' Limited Hours ';\n dot.style.background = '#f46f36';\n this.style.borderColor = '#f46f36';\n this.style.boxShadow = '0 8px 40px rgba(244, 111, 54, 0.15)';\n } else {\n text.textContent = ' All Locations Open ';\n dot.style.background = '#039855';\n this.style.borderColor = 'rgba(2, 111, 61, 0.06)';\n this.style.boxShadow = 'none';\n }\n });\n\n \/\/ Description click feedback\n document.getElementById('description').addEventListener('click', function() {\n this.style.transition = 'all 0.1s ease';\n this.style.transform = 'scale(0.98)';\n setTimeout(() => {\n this.style.transform = 'scale(1)';\n this.style.transition = 'all 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94)';\n }, 100);\n });\n\n \/\/ Card click feedback with smooth recovery\n document.querySelectorAll('.location-card').forEach(card => {\n card.addEventListener('mousedown', function() {\n this.style.transition = 'all 0.1s ease';\n this.style.transform = 'scale(0.96)';\n });\n \n card.addEventListener('mouseup', function() {\n this.style.transform = 'scale(1.02)';\n setTimeout(() => {\n this.style.transform = '';\n this.style.transition = 'all 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94)';\n }, 150);\n });\n \n card.addEventListener('mouseleave', function() {\n if (this.style.transform === 'scale(0.96)') {\n this.style.transform = '';\n this.style.transition = 'all 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94)';\n }\n });\n });\n\n \/\/ Header icon click feedback\n document.querySelector('.header-icon-wrapper').addEventListener('click', function() {\n const icon = this.querySelector('.header-icon');\n icon.style.transition = 'all 0.1s ease';\n icon.style.transform = 'scale(0.85)';\n setTimeout(() => {\n icon.style.transform = 'scale(1.1) rotate(-6deg)';\n setTimeout(() => {\n icon.style.transform = '';\n icon.style.transition = 'all 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94)';\n }, 200);\n }, 150);\n });\n <\/script>\n\n<\/body>\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Library Locations \u2726 NIPA Library Locations \u2726 NIPA LIBRARY SERVICES \u2726 National Institute of Public Administration (NIPA) operates a library at each of its three campuses, in Lusaka and Ndola to support training, research and consultancy services offered by the Institute. The main library is located at the Main Campus in Lusaka and houses both […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-50582","page","type-page","status-publish","hentry"],"rttpg_featured_image_url":null,"rttpg_author":{"display_name":"tharrison","author_link":"https:\/\/www.nipa.ac.zm\/index.php\/author\/tharrison\/"},"rttpg_comment":0,"rttpg_category":null,"rttpg_excerpt":"Library Locations \u2726 NIPA Library Locations \u2726 NIPA LIBRARY SERVICES \u2726 National Institute of Public Administration (NIPA) operates a library at each of its three campuses, in Lusaka and Ndola to support training, research and consultancy services offered by the Institute. The main library is located at the Main Campus in Lusaka and houses both…","_links":{"self":[{"href":"https:\/\/www.nipa.ac.zm\/index.php\/wp-json\/wp\/v2\/pages\/50582","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.nipa.ac.zm\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.nipa.ac.zm\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.nipa.ac.zm\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.nipa.ac.zm\/index.php\/wp-json\/wp\/v2\/comments?post=50582"}],"version-history":[{"count":25,"href":"https:\/\/www.nipa.ac.zm\/index.php\/wp-json\/wp\/v2\/pages\/50582\/revisions"}],"predecessor-version":[{"id":55745,"href":"https:\/\/www.nipa.ac.zm\/index.php\/wp-json\/wp\/v2\/pages\/50582\/revisions\/55745"}],"wp:attachment":[{"href":"https:\/\/www.nipa.ac.zm\/index.php\/wp-json\/wp\/v2\/media?parent=50582"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}