{"id":2056,"date":"2026-05-24T17:59:43","date_gmt":"2026-05-24T17:59:43","guid":{"rendered":"https:\/\/apbionet.org\/sc\/?page_id=2056"},"modified":"2026-05-24T22:10:25","modified_gmt":"2026-05-24T22:10:25","slug":"gallery","status":"publish","type":"page","link":"https:\/\/apbionet.org\/sc\/gallery\/","title":{"rendered":"Gallery"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"2056\" class=\"elementor elementor-2056\">\n\t\t\t\t<div class=\"elementor-element elementor-element-f6c944e e-flex e-con-boxed e-con e-parent\" data-id=\"f6c944e\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-9215285 elementor-widget elementor-widget-spacer\" data-id=\"9215285\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"spacer.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-spacer\">\n\t\t\t<div class=\"elementor-spacer-inner\"><\/div>\n\t\t<\/div>\n\t\t\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<div class=\"elementor-element elementor-element-a3d4116 e-flex e-con-boxed e-con e-parent\" data-id=\"a3d4116\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t<div class=\"elementor-element elementor-element-b5de146 e-con-full e-flex e-con e-child\" data-id=\"b5de146\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<h2 data-interaction-id=\"f295ca2\" class=\"e-heading-base\">GALLERY<\/h2>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-426b965 e-con-full e-flex e-con e-child\" data-id=\"426b965\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-4c9dac3 elementor-widget elementor-widget-html\" data-id=\"4c9dac3\" data-element_type=\"widget\" data-e-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@import url('https:\/\/fonts.googleapis.com\/css2?family=Montserrat:wght@400;500;700;800;900&display=swap');\r\n\r\n\/* Isolated Viewport Container *\/\r\n.gallery-snippet-container {\r\n  font-family: 'Montserrat', sans-serif !important;\r\n  max-width: 1000px;\r\n  margin: 2rem auto;\r\n  padding: 2rem 2rem 5rem 2rem; \/* Added bottom padding for the centered dock *\/\r\n  box-sizing: border-box;\r\n  position: relative;\r\n  background-color: #EFECE4 !important; \/* Premium warm canvas backdrop *\/\r\n}\r\n\r\n\/* 3D Viewport Track *\/\r\n.carousel-viewport {\r\n  position: relative;\r\n  width: 100%;\r\n  height: 460px;\r\n  perspective: 1200px;\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n}\r\n\r\n\/* Base Card Style: Premium Paper Blocks *\/\r\n.gallery-3d-card {\r\n  position: absolute;\r\n  width: 360px;\r\n  height: 440px;\r\n  border-radius: 12px !important; \/* Slightly rounded for a modern, cleaner premium finish *\/\r\n  background: #FFFFFF !important;\r\n  border: 1px solid rgba(10, 17, 40, 0.08) !important;\r\n  box-shadow: 0 10px 30px rgba(10, 17, 40, 0.03) !important;\r\n  padding: 20px;\r\n  box-sizing: border-box;\r\n  display: flex;\r\n  flex-direction: column;\r\n  transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.6s ease, border-color 0.4s ease !important;\r\n  opacity: 0;\r\n  pointer-events: none;\r\n  z-index: 0;\r\n}\r\n\r\n\/* Image Placeholder Box *\/\r\n.card-img-frame {\r\n  width: 100%;\r\n  height: 210px;\r\n  background-color: #EDEAE1 !important;\r\n  border-radius: 6px !important;\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  color: rgba(10, 17, 40, 0.35);\r\n  font-size: 0.85rem;\r\n  font-weight: 700;\r\n  text-transform: uppercase;\r\n  letter-spacing: 0.5px;\r\n  border: 1px solid rgba(10, 17, 40, 0.03);\r\n}\r\n\r\n\/* Card Content Details *\/\r\n.card-meta {\r\n  margin-top: 20px;\r\n  text-align: left;\r\n}\r\n\r\n.track-badge {\r\n  color: #F4B41A !important; \/* Varsity Gold Badge *\/\r\n  font-size: 0.75rem;\r\n  font-weight: 800;\r\n  letter-spacing: 1px;\r\n  text-transform: uppercase;\r\n  display: inline-block;\r\n  margin-bottom: 6px;\r\n}\r\n\r\n.card-meta h3 {\r\n  color: #0A1128 !important; \/* Deep Academic Navy Title *\/\r\n  margin: 0 0 10px 0 !important;\r\n  font-size: 1.3rem !important;\r\n  font-weight: 800 !important;\r\n  letter-spacing: -0.5px;\r\n}\r\n\r\n.card-meta p {\r\n  color: #5F6C7D !important; \/* Slate Grey Body Text *\/\r\n  font-size: 0.88rem !important;\r\n  line-height: 1.5 !important;\r\n  margin: 0;\r\n  font-weight: 500;\r\n}\r\n\r\n\/* ======================================================== *\/\r\n\/* 3D Transform States                                      *\/\r\n\/* ======================================================== *\/\r\n\r\n\/* Center Focus Card (Thick Gold Border Frame) *\/\r\n.gallery-3d-card.active-center {\r\n  opacity: 1;\r\n  pointer-events: auto;\r\n  z-index: 10;\r\n  transform: translateX(0) scale(1) rotateY(0) !important;\r\n  border: 2.5px solid #F4B41A !important; \/* Bold, prominent frame markup *\/\r\n  box-shadow: 0 25px 50px rgba(10, 17, 40, 0.08) !important;\r\n}\r\n\r\n\/* Left Skewed Card *\/\r\n.gallery-3d-card.pos-left {\r\n  opacity: 0.75;\r\n  pointer-events: auto;\r\n  z-index: 5;\r\n  transform: translateX(-220px) scale(0.88) rotateY(15deg) rotateX(2deg) !important; \r\n}\r\n\r\n\/* Right Skewed Card *\/\r\n.gallery-3d-card.pos-right {\r\n  opacity: 0.75;\r\n  pointer-events: auto;\r\n  z-index: 5;\r\n  transform: translateX(220px) scale(0.88) rotateY(-15deg) rotateX(2deg) !important;\r\n}\r\n\r\n\/* Hidden Cards Pool *\/\r\n.gallery-3d-card.pos-hidden-left { opacity: 0; transform: translateX(-350px) scale(0.7); }\r\n.gallery-3d-card.pos-hidden-right { opacity: 0; transform: translateX(350px) scale(0.7); }\r\n\r\n\r\n\/* ======================================================== *\/\r\n\/* NEW: Bold, Beautiful Centered Navigation Dock            *\/\r\n\/* ======================================================== *\/\r\n.navigation-dock-center {\r\n  position: absolute;\r\n  bottom: -10px;\r\n  left: 50%;\r\n  transform: translateX(-50%);\r\n  display: flex;\r\n  flex-direction: column;\r\n  align-items: center;\r\n  gap: 16px;\r\n  z-index: 20;\r\n  width: 100%;\r\n}\r\n\r\n\/* Horizontal Premium Arrow Row *\/\r\n.arrows-row {\r\n  display: flex;\r\n  gap: 12px;\r\n  background: #0A1128 !important; \/* High-prestige solid Navy background capsule *\/\r\n  padding: 8px 16px;\r\n  border-radius: 50px;\r\n  box-shadow: 0 10px 25px rgba(10, 17, 40, 0.15);\r\n}\r\n\r\n.dock-arrow-btn {\r\n  background: transparent;\r\n  border: none;\r\n  color: #FFFFFF; \/* High contrast crisp white icons *\/\r\n  font-size: 1rem;\r\n  font-weight: 900;\r\n  cursor: pointer;\r\n  width: 40px;\r\n  height: 40px;\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  border-radius: 50%;\r\n  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);\r\n}\r\n\r\n.dock-arrow-btn:hover {\r\n  background: #F4B41A !important; \/* Flips into striking Varsity Gold on hover *\/\r\n  color: #0A1128 !important; \/* Text switches to Navy contrast *\/\r\n  transform: scale(1.1);\r\n}\r\n\r\n\/* Bolder Dashed Progress Line Component *\/\r\n.dashed-progress-line {\r\n  display: flex;\r\n  gap: 8px;\r\n  align-items: center;\r\n}\r\n\r\n.progress-segment {\r\n  width: 20px;\r\n  height: 4px;\r\n  background: rgba(10, 17, 40, 0.15); \/* Light structural gray base rails *\/\r\n  border-radius: 10px;\r\n  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);\r\n}\r\n\r\n\/* Bold Active Gold Indicator Segment *\/\r\n.progress-segment.active {\r\n  background: #F4B41A !important;\r\n  width: 40px; \/* Expands wider gracefully for immediate structural depth feedback *\/\r\n  box-shadow: 0 2px 8px rgba(244, 180, 26, 0.4);\r\n}\r\n\r\n\/* Responsive Structural Breakdowns *\/\r\n@media(max-width: 768px) {\r\n  .carousel-viewport { height: 420px; }\r\n  .gallery-3d-card { width: 280px; height: 390px; }\r\n  .card-img-frame { height: 150px; }\r\n  .gallery-3d-card.pos-left { transform: translateX(-90px) scale(0.8) rotateY(10deg) !important; opacity: 0.4; }\r\n  .gallery-3d-card.pos-right { transform: translateX(90px) scale(0.8) rotateY(-10deg) !important; opacity: 0.4; }\r\n  .navigation-dock-center { bottom: -25px; }\r\n}\r\n<\/style>\r\n\r\n<div class=\"gallery-snippet-container\">\r\n\r\n  <div class=\"carousel-viewport\" id=\"carouselViewport\">\r\n    \r\n    <div class=\"gallery-3d-card\">\r\n      <div class=\"card-img-frame\"><span>[ Presentation Highlights ]<\/span><\/div>\r\n      <div class=\"card-meta\">\r\n        <span class=\"track-badge\">TRACK 01 \/\/ ORAL & POSTER<\/span>\r\n        <h3>Scientific Sessions<\/h3>\r\n        <p>Showcasing critical data milestones and oral research findings from emerging student scientists.<\/p>\r\n      <\/div>\r\n    <\/div>\r\n\r\n    <div class=\"gallery-3d-card\">\r\n      <div class=\"card-img-frame\"><span>[ Panel Discussion Highlights ]<\/span><\/div>\r\n      <div class=\"card-meta\">\r\n        <span class=\"track-badge\">TRACK 02 \/\/ MENTORSHIP<\/span>\r\n        <h3>Panel Discussions<\/h3>\r\n        <p>Snapshots of student dialogues with leading industry and academic experts across the Asia-Pacific region.<\/p>\r\n      <\/div>\r\n    <\/div>\r\n\r\n    <div class=\"gallery-3d-card\">\r\n      <div class=\"card-img-frame\"><span>[ Networking Highlights ]<\/span><\/div>\r\n      <div class=\"card-meta\">\r\n        <span class=\"track-badge\">TRACK 03 \/\/ COMMUNITY<\/span>\r\n        <h3>Peer Networking<\/h3>\r\n        <p>Moments of collaborative connection, certificate presentations, and social exchanges during coffee intervals.<\/p>\r\n      <\/div>\r\n    <\/div>\r\n\r\n    <div class=\"gallery-3d-card\">\r\n      <div class=\"card-img-frame\"><span>[ Host Landmark Venues ]<\/span><\/div>\r\n      <div class=\"card-meta\">\r\n        <span class=\"track-badge\">TRACK 04 \/\/ ARCHITECTURE<\/span>\r\n        <h3>Venues & Landmarks<\/h3>\r\n        <p>A look back at the grand auditoriums and prestigious regional computer science facilities hosting our assemblies.<\/p>\r\n      <\/div>\r\n    <\/div>\r\n\r\n  <\/div>\r\n\r\n  <div class=\"navigation-dock-center\">\r\n    <div class=\"arrows-row\">\r\n      <button class=\"dock-arrow-btn\" onclick=\"rotateCarousel(-1)\">\u276e<\/button>\r\n      <button class=\"dock-arrow-btn\" onclick=\"rotateCarousel(1)\">\u276f<\/button>\r\n    <\/div>\r\n    \r\n    <div class=\"dashed-progress-line\">\r\n      <div class=\"progress-segment\"><\/div>\r\n      <div class=\"progress-segment\"><\/div>\r\n      <div class=\"progress-segment\"><\/div>\r\n      <div class=\"progress-segment\"><\/div>\r\n    <\/div>\r\n  <\/div>\r\n\r\n<\/div>\r\n\r\n<script>\r\nlet currentIndex = 0;\r\nconst cards = document.querySelectorAll('.gallery-3d-card');\r\nconst segments = document.querySelectorAll('.progress-segment');\r\nconst totalCards = cards.length;\r\n\r\nfunction updateCarouselState() {\r\n  cards.forEach((card, index) => {\r\n    card.className = 'gallery-3d-card';\r\n    let offset = index - currentIndex;\r\n    \r\n    if (offset < -1 && offset < -parseInt(totalCards\/2)) offset += totalCards;\r\n    if (offset > 1 && offset > parseInt(totalCards\/2)) offset -= totalCards;\r\n\r\n    if (offset === 0) {\r\n      card.classList.add('active-center');\r\n    } else if (offset === 1) {\r\n      card.classList.add('pos-right');\r\n    } else if (offset === -1) {\r\n      card.classList.add('pos-left');\r\n    } else if (offset < -1) {\r\n      card.classList.add('pos-hidden-left');\r\n    } else if (offset > 1) {\r\n      card.classList.add('pos-hidden-right');\r\n    }\r\n  });\r\n\r\n  segments.forEach((seg, index) => {\r\n    seg.className = 'progress-segment';\r\n    if(index === currentIndex) {\r\n      seg.classList.add('active');\r\n    }\r\n  });\r\n}\r\n\r\nfunction rotateCarousel(direction) {\r\n  currentIndex += direction;\r\n  if (currentIndex >= totalCards) currentIndex = 0;\r\n  if (currentIndex < 0) currentIndex = totalCards - 1;\r\n  updateCarouselState();\r\n}\r\n\r\ndocument.addEventListener('DOMContentLoaded', updateCarouselState);\r\nsetTimeout(updateCarouselState, 200);\r\n<\/script>\t\t\t\t<\/div>\n\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>GALLERY [ Presentation Highlights ] TRACK 01 \/\/ ORAL &#038; POSTER Scientific Sessions Showcasing critical data milestones and oral research findings from emerging student scientists. [ Panel Discussion Highlights ] TRACK 02 \/\/ MENTORSHIP Panel Discussions Snapshots of student dialogues with leading industry and academic experts across the Asia-Pacific region. [ Networking Highlights ] TRACK [&hellip;]<\/p>\n","protected":false},"author":7,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"site-sidebar-layout":"no-sidebar","site-content-layout":"page-builder","ast-site-content-layout":"full-width-container","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"disabled","ast-breadcrumbs-content":"","ast-featured-img":"disabled","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"set","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"class_list":["post-2056","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/apbionet.org\/sc\/wp-json\/wp\/v2\/pages\/2056","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/apbionet.org\/sc\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/apbionet.org\/sc\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/apbionet.org\/sc\/wp-json\/wp\/v2\/users\/7"}],"replies":[{"embeddable":true,"href":"https:\/\/apbionet.org\/sc\/wp-json\/wp\/v2\/comments?post=2056"}],"version-history":[{"count":19,"href":"https:\/\/apbionet.org\/sc\/wp-json\/wp\/v2\/pages\/2056\/revisions"}],"predecessor-version":[{"id":2145,"href":"https:\/\/apbionet.org\/sc\/wp-json\/wp\/v2\/pages\/2056\/revisions\/2145"}],"wp:attachment":[{"href":"https:\/\/apbionet.org\/sc\/wp-json\/wp\/v2\/media?parent=2056"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}