{"id":19636,"date":"2025-12-17T14:55:57","date_gmt":"2025-12-17T09:25:57","guid":{"rendered":"https:\/\/demo.vleafy.com\/ibc2\/?page_id=19636"},"modified":"2025-12-29T03:57:01","modified_gmt":"2025-12-28T22:27:01","slug":"impa-warriors","status":"publish","type":"page","link":"https:\/\/demo.vleafy.com\/ibc2\/impa-warriors\/","title":{"rendered":"IMPA Warriors"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"19636\" class=\"elementor elementor-19636\">\n\t\t\t\t<div class=\"elementor-element elementor-element-abb4ac9 e-con-full e-flex e-con e-parent \" data-id=\"abb4ac9\" data-element_type=\"container\">\t\t<div class=\"elementor-element elementor-element-e90fae3 elementor-widget elementor-widget-pxl_heading\" data-id=\"e90fae3\" data-element_type=\"widget\" data-widget_type=\"pxl_heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<div id=\"pxl-pxl_heading-e90fae3-8473\" class=\"pxl-heading pxl-heading--tcustom\">\n\t<div class=\"pxl-heading--inner\">\n\n\t\t\n\t<h3 class=\"pxl-item--title   pxl-color-style-1 wow fadeInUp\" data-wow-delay=\"300ms\">\n\n\n\tIMPA Warriors\t\t\t\n\t<\/h3>\n\n<\/div>\n<\/div>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-df807c5 elementor-widget elementor-widget-text-editor\" data-id=\"df807c5\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Dec 2025 to June 2026<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\r\n\t\t<div class=\"elementor-element elementor-element-eeeb6e3 e-flex e-con-boxed e-con e-parent \" data-id=\"eeeb6e3\" data-element_type=\"container\">\t\t\t<div class=\"e-con-inner\">\r\n\t\t\t\t<div class=\"elementor-element elementor-element-da7ac39 elementor-widget elementor-widget-html\" data-id=\"da7ac39\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<style>\r\n    .team-container {\r\n        max-width: 75%;\r\n        margin: 0 auto;\r\n    }\r\n\r\n    .team-member {\r\n        background: none;\r\n        border: none;\r\n        border-radius: 15px;\r\n        margin-bottom: 20px;\r\n        overflow: hidden;\r\n        transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);\r\n        cursor: pointer;\r\n        position: relative;\r\n    }\r\n\r\n    .team-member::before {\r\n        content: '';\r\n        position: absolute;\r\n        top: 0;\r\n        left: 0;\r\n        width: 0;\r\n        height: 100%;\r\n        background: linear-gradient(90deg, rgba(138, 43, 226, 0.2), rgba(255, 20, 147, 0.2));\r\n        transition: width 0.5s cubic-bezier(0.4, 0, 0.2, 1);\r\n        z-index: 0;\r\n        pointer-events: none;\r\n        border-radius: 15px;\r\n    }\r\n\r\n    .team-member:not(.active):hover::before {\r\n        width: 100%;\r\n    }\r\n\r\n    .team-member:hover {\r\n        border: 2px solid #8a2be2;\r\n        box-shadow: 0 8px 25px rgba(138, 43, 226, 0.3);\r\n        background: linear-gradient(145deg, rgba(138, 43, 226, 0.1), rgba(75, 0, 130, 0.1));\r\n    }\r\n\r\n    .team-member.active {\r\n        background: linear-gradient(145deg, rgba(138, 43, 226, 0.2), rgba(75, 0, 130, 0.2));\r\n        border: 2px solid #ff1493;\r\n        box-shadow: 0 15px 40px rgba(138, 43, 226, 0.4);\r\n    }\r\n\r\n    .member-header {\r\n        display: flex;\r\n        align-items: center;\r\n        padding: 25px 30px;\r\n        gap: 20px;\r\n        position: relative;\r\n        z-index: 2;\r\n        transition: all 0.4s ease;\r\n    }\r\n\r\n    \/* Photo hidden by default using width 0 *\/\r\n    .member-photo-small {\r\n        width: 0;\r\n        height: 100px;\r\n        border-radius: 10px;\r\n        background: linear-gradient(135deg, #1a1d3a, #2a2d4a);\r\n        border: 2px solid rgba(138, 43, 226, 0.4);\r\n        overflow: hidden;\r\n        opacity: 0;\r\n        flex-shrink: 0;\r\n        background-size: cover;\r\n        background-position: center;\r\n        transition: all 0.4s cubic-bezier(0.4,0,0.2,1);\r\n        margin-right: 15px; \/* spacing from text *\/\r\n    }\r\n\r\n    .member-photo-small::before {\r\n        content: 'PHOTO';\r\n        position: absolute;\r\n        top: 50%;\r\n        left: 50%;\r\n        transform: translate(-50%, -50%);\r\n        font-size: 0.7rem;\r\n        font-weight: 700;\r\n        color: rgba(255, 255, 255, 0.3);\r\n        transition: opacity 0.3s ease;\r\n        user-select: none;\r\n    }\r\n\r\n    \/* Show photo on hover or active *\/\r\n    .team-member:not(.active):hover .member-photo-small,\r\n    .team-member.active .member-photo-small {\r\n        width: 100px;\r\n        opacity: 1;\r\n    }\r\n\r\n    .team-member.active .member-photo-small {\r\n        width: 200px;\r\n        height: 200px;\r\n        border-radius: 15px;\r\n        border: 3px solid rgba(138, 43, 226, 0.5);\r\n    }\r\n\r\n    .member-number {\r\n        font-size: 1.6rem;\r\n        font-weight: 700;\r\n        color: #8a2be2;\r\n        min-width: 50px;\r\n        transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1), color 0.3s;\r\n        position: relative;\r\n        z-index: 2;\r\n        user-select: none;\r\n    }\r\n\r\n    .team-member.active .member-number {\r\n        color: #ff1493;\r\n    }\r\n\r\n    .member-basic-info {\r\n        flex: 1;\r\n        position: relative;\r\n        z-index: 2;\r\n        transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);\r\n    }\r\n\r\n    \/* Slide text right only on hover, not when active *\/\r\n.team-member:not(.active):hover .member-basic-info,\r\n.team-member:not(.active):hover .member-number {\r\n    transform: translateX(115px); \/* width + margin of small photo *\/\r\n}\r\n\r\n\/* Remove translation for active state, text will stay aligned naturally *\/\r\n.team-member.active .member-basic-info,\r\n.team-member.active .member-number {\r\n    transform: translateX(0);\r\n}\r\n    .member-name {\r\n        font-size: 2rem;\r\n        font-weight: 700;\r\n        color: #fff;\r\n        margin-bottom: 5px;\r\n        letter-spacing: 1px;\r\n    }\r\n\r\n    .member-designation {\r\n        font-size: 1.1rem;\r\n        color: rgba(255, 255, 255, 0.7);\r\n        letter-spacing: 0.5px;\r\n    }\r\n\r\n    .expand-icon {\r\n        width: 40px;\r\n        height: 40px;\r\n        border-radius: 50%;\r\n        background: rgba(138, 43, 226, 0.3);\r\n        display: flex;\r\n        align-items: center;\r\n        justify-content: center;\r\n        transition: all 0.3s;\r\n        position: relative;\r\n        z-index: 2;\r\n        flex-shrink: 0;\r\n        user-select: none;\r\n    }\r\n\r\n    .expand-icon::after {\r\n        content: '\u203a';\r\n        font-size: 2rem;\r\n        color: #fff;\r\n        font-weight: 700;\r\n        transform: rotate(90deg);\r\n        display: block;\r\n        transition: transform 0.3s;\r\n    }\r\n\r\n    .team-member.active .expand-icon {\r\n        background: linear-gradient(135deg, #8a2be2, #ff1493);\r\n    }\r\n\r\n    .team-member.active .expand-icon::after {\r\n        transform: rotate(-90deg);\r\n    }\r\n\r\n    .member-details {\r\n        max-height: 0;\r\n        overflow: hidden;\r\n        transition: max-height 0.5s cubic-bezier(0.4, 0, 0.2, 1);\r\n    }\r\n\r\n    .team-member.active .member-details {\r\n        max-height: 800px;\r\n    }\r\n\r\n    .details-content {\r\n        padding: 0 30px 40px 30px;\r\n        opacity: 0;\r\n        transform: translateY(-20px);\r\n        transition: all 0.4s ease 0.1s;\r\n    }\r\n\r\n    .team-member.active .details-content {\r\n        opacity: 1;\r\n        transform: translateY(0);\r\n    }\r\n\r\n    .performance-section {\r\n        max-width: 800px;\r\n    }\r\n\r\n    .performance-header {\r\n        background: rgba(138, 43, 226, 0.2);\r\n        border: 2px solid rgba(138, 43, 226, 0.4);\r\n        border-radius: 10px;\r\n        padding: 15px 25px;\r\n        margin-bottom: 30px;\r\n        text-align: center;\r\n    }\r\n\r\n    .performance-header h3 {\r\n        color: #fff;\r\n        font-size: 1.2rem;\r\n        font-weight: 600;\r\n        letter-spacing: 1px;\r\n    }\r\n\r\n    .performance-item {\r\n        display: grid;\r\n        grid-template-columns: 120px 1fr 80px;\r\n        gap: 20px;\r\n        align-items: center;\r\n        margin-bottom: 20px;\r\n        padding: 15px 0;\r\n        border-bottom: 1px solid rgba(138, 43, 226, 0.2);\r\n    }\r\n\r\n    .performance-item:last-child {\r\n        border-bottom: none;\r\n    }\r\n\r\n    .performance-title {\r\n        color: #fff;\r\n        font-weight: 600;\r\n        font-size: 1rem;\r\n        background: rgba(138, 43, 226, 0.2);\r\n        padding: 10px 20px;\r\n        border-radius: 8px;\r\n        text-align: center;\r\n    }\r\n\r\n    .performance-bar-container {\r\n        background: rgba(255, 255, 255, 0.1);\r\n        height: 12px;\r\n        border-radius: 20px;\r\n        overflow: hidden;\r\n        position: relative;\r\n    }\r\n\r\n    .performance-bar {\r\n        height: 100%;\r\n        background: linear-gradient(90deg, #8a2be2, #ff1493);\r\n        border-radius: 20px;\r\n        transition: width 0.8s cubic-bezier(0.4, 0, 0.2, 1) 0.3s;\r\n        width: 0;\r\n        position: relative;\r\n    }\r\n\r\n    .team-member.active .performance-bar {\r\n        animation: fillBar 0.8s cubic-bezier(0.4, 0, 0.2, 1) 0.3s forwards;\r\n    }\r\n\r\n    .performance-bar::after {\r\n        content: '';\r\n        position: absolute;\r\n        top: 0;\r\n        left: 0;\r\n        width: 100%;\r\n        height: 100%;\r\n        background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);\r\n        animation: shimmer 2s infinite;\r\n    }\r\n    \r\n    \r\n    .member-photo-small[style*=\"background-image\"]::before {\r\n    content: none;\r\n}\r\n\r\n    @keyframes shimmer {\r\n        0% { transform: translateX(-100%); }\r\n        100% { transform: translateX(100%); }\r\n    }\r\n\r\n    @keyframes fillBar {\r\n        from { width: 0; }\r\n    }\r\n\r\n    .performance-percentage {\r\n        color: #fff;\r\n        font-weight: 700;\r\n        font-size: 1.1rem;\r\n        text-align: center;\r\n        background: rgba(138, 43, 226, 0.3);\r\n        padding: 8px 15px;\r\n        border-radius: 8px;\r\n        min-width: 60px;\r\n    }\r\n\r\n    @media (max-width: 968px) {\r\n        .details-content { padding: 0 30px 40px 30px; }\r\n        .member-name { font-size: 1.8rem; }\r\n        .member-number { font-size: 1.3rem; min-width: 40px; }\r\n        .team-member.active .member-photo-small { width: 150px; height: 150px; }\r\n    }\r\n\r\n    @media (max-width: 568px) {\r\n        .member-header { padding: 20px; flex-wrap: wrap; }\r\n        .member-name { font-size: 1.5rem; }\r\n        .member-designation { font-size: 0.9rem; }\r\n        .performance-item { grid-template-columns: 1fr; gap: 10px; }\r\n        .performance-title, .performance-percentage { text-align: left; }\r\n        .details-content { padding: 0 20px 30px 20px; }\r\n        .team-member.active .member-photo-small { width: 120px; height: 120px; }\r\n        .member-photo-small { width: 60px; height: 60px; margin-right: 10px; }\r\n    }\r\n<\/style>\r\n\r\n<div class=\"team-container\" id=\"teamContainer\"><\/div>\r\n\r\n<script>\r\n    const teamData = [\r\n    { \r\n        id: 1, \r\n        name: \"Person One\", \r\n        designation: \"Designation, Company\", \r\n        photo: \"https:\/\/demo.vleafy.com\/ibc2\/wp-content\/uploads\/2024\/07\/home-3-listbox-1.png\",\r\n        performance: [\r\n            { title: \"Title\", percentage: 85 },\r\n            { title: \"Title\", percentage: 90 },\r\n            { title: \"Title\", percentage: 78 }\r\n        ] \r\n    },\r\n    { \r\n        id: 2, \r\n        name: \"Person Two\", \r\n        designation: \"Designation, Company\",\r\n        photo: \"https:\/\/demo.vleafy.com\/ibc2\/wp-content\/uploads\/2024\/07\/home-3-listbox-1.png\",\r\n        performance: [\r\n            { title: \"Title\", percentage: 92 },\r\n            { title: \"Title\", percentage: 88 },\r\n            { title: \"Title\", percentage: 95 }\r\n        ] \r\n    },\r\n    { \r\n        id: 3, \r\n        name: \"Person Three\", \r\n        designation: \"Designation, Company\",\r\n        photo: \"https:\/\/demo.vleafy.com\/ibc2\/wp-content\/uploads\/2024\/07\/home-3-listbox-1.png\",\r\n        performance: [\r\n            { title: \"Title\", percentage: 87 },\r\n            { title: \"Title\", percentage: 91 },\r\n            { title: \"Title\", percentage: 84 }\r\n        ] \r\n    },\r\n    { \r\n        id: 4, \r\n        name: \"Person Four\", \r\n        designation: \"Designation, Company\",\r\n        photo: \"https:\/\/demo.vleafy.com\/ibc2\/wp-content\/uploads\/2024\/07\/home-3-listbox-1.png\",\r\n        performance: [\r\n            { title: \"Title\", percentage: 89 },\r\n            { title: \"Title\", percentage: 93 },\r\n            { title: \"Title\", percentage: 86 }\r\n        ] \r\n    },\r\n    { \r\n        id: 5, \r\n        name: \"Person Five\", \r\n        designation: \"Designation, Company\",\r\n        photo: \"https:\/\/demo.vleafy.com\/ibc2\/wp-content\/uploads\/2024\/07\/home-3-listbox-1.png\",\r\n        performance: [\r\n            { title: \"Title\", percentage: 94 },\r\n            { title: \"Title\", percentage: 88 },\r\n            { title: \"Title\", percentage: 91 }\r\n        ] \r\n    }\r\n];\r\n\r\n\r\n    function toggleMember(element) {\r\n        const allMembers = document.querySelectorAll('.team-member');\r\n        const isActive = element.classList.contains('active');\r\n\r\n        allMembers.forEach(member => member.classList.remove('active'));\r\n\r\n        if (!isActive) {\r\n            element.classList.add('active');\r\n        }\r\n    }\r\n\r\n    function formatNumber(num) {\r\n        return num.toString().padStart(2, '0');\r\n    }\r\n\r\n    function renderTeamMembers() {\r\n    const container = document.getElementById('teamContainer');\r\n    container.innerHTML = '';\r\n\r\n    teamData.forEach(member => {\r\n        const performanceHTML = member.performance.map(perf => `\r\n            <div class=\"performance-item\">\r\n                <div class=\"performance-title\">${perf.title}<\/div>\r\n                <div class=\"performance-bar-container\">\r\n                    <div class=\"performance-bar\" style=\"width: ${perf.percentage}%;\"><\/div>\r\n                <\/div>\r\n                <div class=\"performance-percentage\">${perf.percentage}%<\/div>\r\n            <\/div>\r\n        `).join('');\r\n\r\n        const memberHTML = `\r\n            <div class=\"team-member\" onclick=\"toggleMember(this)\">\r\n                <div class=\"member-header\">\r\n                    <div class=\"member-photo-small\" style=\"background-image: url('${member.photo}');\"><\/div>\r\n                    <div class=\"member-number\">${formatNumber(member.id)}<\/div>\r\n                    <div class=\"member-basic-info\">\r\n                        <div class=\"member-name\">${member.name}<\/div>\r\n                        <div class=\"member-designation\">${member.designation}<\/div>\r\n                    <\/div>\r\n                    <div class=\"expand-icon\"><\/div>\r\n                <\/div>\r\n                <div class=\"member-details\">\r\n                    <div class=\"details-content\">\r\n                        <div class=\"performance-section\">\r\n                            <div class=\"performance-header\">\r\n                                <h3>Performance Parameters<\/h3>\r\n                            <\/div>\r\n                            ${performanceHTML}\r\n                        <\/div>\r\n                    <\/div>\r\n                <\/div>\r\n            <\/div>\r\n        `;\r\n\r\n        container.innerHTML += memberHTML;\r\n    });\r\n}\r\n\r\n\r\n    renderTeamMembers();\r\n<\/script>\r\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\r\n\t\t\t\t<\/div>\r\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>IMPA Warriors Dec 2025 to June 2026<\/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-19636","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/demo.vleafy.com\/ibc2\/wp-json\/wp\/v2\/pages\/19636","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/demo.vleafy.com\/ibc2\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/demo.vleafy.com\/ibc2\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/demo.vleafy.com\/ibc2\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/demo.vleafy.com\/ibc2\/wp-json\/wp\/v2\/comments?post=19636"}],"version-history":[{"count":0,"href":"https:\/\/demo.vleafy.com\/ibc2\/wp-json\/wp\/v2\/pages\/19636\/revisions"}],"wp:attachment":[{"href":"https:\/\/demo.vleafy.com\/ibc2\/wp-json\/wp\/v2\/media?parent=19636"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}