Product Catalogues - Tristar<\/title>\r\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Inter:wght@300;400;500;600;700&display=swap\" rel=\"stylesheet\">\r\n <link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.4.0\/css\/all.min.css\">\r\n <style>\r\n .tristar-cat-primary {\r\n --tristar-primary: #2563EB;\r\n --tristar-primary-dark: #1D4ED8;\r\n --tristar-bg-light: #F8FAFC;\r\n --tristar-bg-card: #FFFFFF;\r\n --tristar-text-primary: #1E293B;\r\n --tristar-text-secondary: #64748B;\r\n --tristar-border: #E2E8F0;\r\n --tristar-border-radius: 12px;\r\n --tristar-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);\r\n }\r\n \r\n .tristar-cat-wrapper {\r\n background: var(--tristar-bg-light);\r\n font-family: \"Inter\", sans-serif;\r\n padding: 15px;\r\n }\r\n \r\n .tristar-cat-container {\r\n max-width: 80%;\r\n margin: 0 auto;\r\n background: white;\r\n padding: 25px 20px;\r\n border-radius: var(--tristar-border-radius);\r\n box-shadow: var(--tristar-shadow);\r\n }\r\n\r\n .tristar-cat-header {\r\n text-align: center;\r\n margin-bottom: 30px;\r\n }\r\n\r\n .tristar-cat-heading {\r\n font-size: 32px;\r\n font-weight: 700;\r\n margin-bottom: 12px;\r\n }\r\n\r\n .tristar-cat-heading span:first-child {\r\n color: var(--tristar-primary);\r\n }\r\n\r\n .tristar-cat-subtitle {\r\n font-size: 16px;\r\n color: var(--tristar-text-secondary);\r\n max-width: 500px;\r\n margin: 0 auto;\r\n line-height: 1.5;\r\n }\r\n\r\n .tristar-cat-grid {\r\n display: grid;\r\n \r\n \/*grid-template-columns: repeat(3, 1fr); \/*PAGNINATION MODE*\/\r\n grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); \/*GRID MODE*\/\r\n gap: 20px;\r\n margin-bottom: 30px;\r\n }\r\n\r\n .tristar-cat-card {\r\n background: var(--tristar-bg-card);\r\n border-radius: var(--tristar-border-radius);\r\n box-shadow: var(--tristar-shadow);\r\n border: 1px solid var(--tristar-border);\r\n overflow: hidden;\r\n cursor: pointer;\r\n transition: transform 0.3s ease;\r\n display: flex;\r\n flex-direction: column;\r\n width: 100%;\r\n height: 360px;\r\n }\r\n\r\n .tristar-cat-card:hover {\r\n transform: translateY(-5px);\r\n }\r\n\r\n .tristar-cat-img-box {\r\n width: 100%;\r\n height: 250px;\r\n overflow: hidden;\r\n }\r\n\r\n .tristar-cat-img {\r\n width: 100%;\r\n height: 100%;\r\n object-fit: contain; \/* to show full - change from cover*\/\r\n object-position: bottom ; \/* adjust as needed: top \/ bottom \/ center\/ h% v% *\/\r\n transition: transform 0.3s ease;\r\n }\r\n\r\n .tristar-cat-card:hover .tristar-cat-img {\r\n transform: scale(1.15);\r\n }\r\n\r\n .tristar-cat-content {\r\n padding: 12px;\r\n flex: 1;\r\n display: flex;\r\n flex-direction: column;\r\n }\r\n\r\n .tristar-cat-title {\r\n font-size: 15px;\r\n font-weight: 600;\r\n margin-bottom: 6px;\r\n color: var(--tristar-text-primary);\r\n }\r\n\r\n .tristar-cat-desc {\r\n font-size: 12px;\r\n color: var(--tristar-text-secondary);\r\n line-height: 1.4;\r\n margin-bottom: 10px;\r\n flex-grow: 1;\r\n display: -webkit-box;\r\n -webkit-line-clamp: 2;\r\n -webkit-box-orient: vertical;\r\n overflow: hidden;\r\n }\r\n\r\n .tristar-cat-action {\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n gap: 6px;\r\n padding: 6px 10px;\r\n background: var(--tristar-primary);\r\n color: white;\r\n border-radius: 6px;\r\n font-size: 11px;\r\n font-weight: 500;\r\n transition: background 0.3s ease;\r\n margin-top: auto;\r\n }\r\n\r\n .tristar-cat-action:hover {\r\n background: var(--tristar-primary-dark);\r\n }\r\n\r\n .tristar-cat-pagination {\r\n display: flex;\r\n justify-content: center;\r\n align-items: center;\r\n gap: 10px;\r\n margin-top: 20px;\r\n }\r\n\r\n .tristar-cat-page-item {\r\n width: 34px;\r\n height: 34px;\r\n border-radius: 8px;\r\n background: white;\r\n border: 1px solid var(--tristar-border);\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n cursor: pointer;\r\n transition: all 0.3s ease;\r\n font-weight: 500;\r\n font-size: 14px;\r\n }\r\n\r\n .tristar-cat-page-item:hover {\r\n background: var(--tristar-primary);\r\n color: white;\r\n }\r\n\r\n .tristar-cat-page-item.active {\r\n background: var(--tristar-primary);\r\n color: white;\r\n }\r\n\r\n .tristar-cat-page-item.disabled {\r\n opacity: 0.5;\r\n cursor: not-allowed;\r\n }\r\n\r\n .tristar-cat-page-item.disabled:hover {\r\n background: white;\r\n color: inherit;\r\n }\r\n\r\n \/* Modal styles *\/\r\n .tristar-cat-modal-overlay {\r\n position: fixed;\r\n top: 0;\r\n left: 0;\r\n width: 100%;\r\n height: 100%;\r\n background: rgba(0, 0, 0, 0.7);\r\n display: none;\r\n justify-content: center;\r\n align-items: center;\r\n z-index: 10000;\r\n }\r\n\r\n .tristar-cat-modal-overlay.active {\r\n display: flex;\r\n }\r\n\r\n .tristar-cat-modal-box {\r\n background: white;\r\n width: 90%;\r\n height: 80%;\r\n border-radius: var(--tristar-border-radius);\r\n overflow: hidden;\r\n box-shadow: 0 25px 50px rgba(0, 0, 0, 0.3);\r\n }\r\n\r\n .tristar-cat-modal-header {\r\n padding: 15px 20px;\r\n border-bottom: 1px solid var(--tristar-border);\r\n display: flex;\r\n justify-content: space-between;\r\n align-items: center;\r\n }\r\n\r\n .tristar-cat-modal-title {\r\n font-size: 18px;\r\n font-weight: 600;\r\n }\r\n\r\n .tristar-cat-close-item {\r\n width: 36px;\r\n height: 36px;\r\n border-radius: 8px;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n cursor: pointer;\r\n border: 1px solid var(--tristar-border);\r\n transition: background 0.3s ease;\r\n }\r\n\r\n .tristar-cat-close-item:hover {\r\n background: #EF4444;\r\n color: white;\r\n }\r\n\r\n .tristar-cat-modal-frame {\r\n width: 100%;\r\n height: calc(100% - 60px);\r\n border: none;\r\n }\r\n\r\n \/* Responsive - MAJOR MOBILE IMPROVEMENTS *\/\r\n @media (max-width: 1024px) {\r\n .tristar-cat-grid {\r\n grid-template-columns: repeat(2, 1fr);\r\n }\r\n }\r\n\r\n @media (max-width: 768px) {\r\n .tristar-cat-container {\r\n padding: 15px;\r\n }\r\n \r\n .tristar-cat-heading {\r\n font-size: 28px;\r\n }\r\n \r\n .tristar-cat-subtitle {\r\n font-size: 14px;\r\n }\r\n \r\n .tristar-cat-grid {\r\n grid-template-columns: 1fr;\r\n gap: 20px;\r\n }\r\n \r\n \/* MAJOR FIX: Dramatically increased image height on mobile *\/\r\n .tristar-cat-card {\r\n height: auto;\r\n min-height: 380px; \/* Significantly increased minimum height *\/\r\n }\r\n \r\n \/* MAJOR FIX: Much larger image area on mobile *\/\r\n .tristar-cat-img-box {\r\n height: 240px; \/* DRAMATICALLY increased from 140px to 240px *\/\r\n }\r\n \r\n \/* Better text display *\/\r\n .tristar-cat-content {\r\n padding: 18px;\r\n }\r\n \r\n .tristar-cat-title {\r\n font-size: 18px;\r\n margin-bottom: 10px;\r\n }\r\n \r\n .tristar-cat-desc {\r\n font-size: 14px;\r\n line-height: 1.5;\r\n -webkit-line-clamp: 4; \/* Show more text lines *\/\r\n margin-bottom: 15px;\r\n }\r\n \r\n .tristar-cat-action {\r\n padding: 12px 16px;\r\n font-size: 14px;\r\n }\r\n }\r\n\r\n @media (max-width: 480px) {\r\n \/* EXTREME MOBILE OPTIMIZATION *\/\r\n .tristar-cat-card {\r\n min-height: 420px; \/* Even taller on very small screens *\/\r\n }\r\n \r\n \/* MAXIMUM IMAGE HEIGHT ON MOBILE *\/\r\n .tristar-cat-img-box {\r\n height: 280px; \/* MAXIMUM increase - images now take ~65% of card *\/\r\n }\r\n \r\n .tristar-cat-content {\r\n padding: 20px;\r\n }\r\n \r\n .tristar-cat-title {\r\n font-size: 20px;\r\n margin-bottom: 12px;\r\n }\r\n \r\n .tristar-cat-desc {\r\n font-size: 15px;\r\n line-height: 1.6;\r\n -webkit-line-clamp: 5; \/* Show maximum text *\/\r\n margin-bottom: 18px;\r\n }\r\n \r\n .tristar-cat-action {\r\n padding: 14px 18px;\r\n font-size: 15px;\r\n }\r\n \r\n \/* Improve header for mobile *\/\r\n .tristar-cat-heading {\r\n font-size: 24px;\r\n }\r\n \r\n .tristar-cat-subtitle {\r\n font-size: 13px;\r\n }\r\n }\r\n\r\n @media (max-width: 360px) {\r\n \/* Ultra-small device optimization *\/\r\n .tristar-cat-card {\r\n min-height: 400px;\r\n }\r\n \r\n .tristar-cat-img-box {\r\n height: 250px;\r\n }\r\n \r\n .tristar-cat-content {\r\n padding: 16px;\r\n }\r\n }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n <div class=\"tristar-cat-primary\">\r\n <div class=\"tristar-cat-wrapper\">\r\n <div class=\"tristar-cat-container\">\r\n <div class=\"tristar-cat-header\">\r\n <h2 class=\"tristar-cat-heading\">\r\n <span>Our Product<\/span>\r\n <span>Catalogues<\/span>\r\n <\/h2>\r\n <p class=\"tristar-cat-subtitle\">Browse our comprehensive range of industrial solutions and technical products<\/p>\r\n <\/div>\r\n\r\n <div class=\"tristar-cat-grid\" id=\"tristarCatGrid\">\r\n \r\n <\/div>\r\n\r\n <div class=\"tristar-cat-pagination\" id=\"tristarCatPagination\">\r\n \r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"tristar-cat-modal-overlay\" id=\"tristarCatModal\">\r\n <div class=\"tristar-cat-modal-box\">\r\n <div class=\"tristar-cat-modal-header\">\r\n <h3 class=\"tristar-cat-modal-title\" id=\"tristarCatModalTitle\">Catalogue<\/h3>\r\n <div class=\"tristar-cat-close-item\" id=\"tristarCatCloseItem\">\r\n <i class=\"fas fa-times\"><\/i>\r\n <\/div>\r\n <\/div>\r\n <iframe class=\"tristar-cat-modal-frame\" id=\"tristarCatModalFrame\"><\/iframe>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <script>\r\n \/\/ Catalogue data\r\n const tristarCatalogueItems = [\r\n {\r\n id: 1,\r\n title: \"A Family of Quality\",\r\n description: \"Complete range of our product families and solutions designed for industrial excellence and reliability.\",\r\n image: \"https:\/\/tristar.com.sg\/staging05\/wp-content\/uploads\/2025\/12\/Family-Quality-Catalogue-Cover-Page-2.png\",\r\n url: \"https:\/\/tristar.com.sg\/staging05\/wp-content\/uploads\/2025\/12\/Tri-Star-Brochure_A-Family-of-Quality_digital.pdf\",\r\n type: \"pdf\"\r\n },\r\n {\r\n id: 2,\r\n title: \"Fasteners\",\r\n description: \"Precision-engineered fasteners for secure, reliable connections across industrial and structural applications.\",\r\n image: \"https:\/\/tristar.com.sg\/staging05\/wp-content\/uploads\/2024\/04\/BN-Special2.jpg\",\r\n url: \"https:\/\/tristar.com.sg\/staging05\/wp-content\/uploads\/2025\/06\/SBN_Fasteners.pdf\",\r\n type: \"pdf\"\r\n },\r\n {\r\n id: 3,\r\n title: \"Cable Support Systems\",\r\n description: \"Explore our complete range of cable support solutions engineered for strength, flexibility, and reliability.\",\r\n image: \"https:\/\/tristar.com.sg\/staging05\/wp-content\/uploads\/2024\/04\/CSS-Steel3.jpg\",\r\n url: \"https:\/\/tristar.com.sg\/staging05\/wp-content\/uploads\/2025\/11\/CSS-BROCHURE-2017.pdf\",\r\n type: \"pdf\"\r\n },\r\n {\r\n id: 4,\r\n title: \"FRP\/GRP\",\r\n description: \"Discover corrosion-resistant FRP\/GRP cable support systems designed for durability in harsh environments.\",\r\n image: \"https:\/\/tristar.com.sg\/staging05\/wp-content\/uploads\/2024\/05\/CSS-FRP2.jpg\",\r\n url: \"https:\/\/tristar.com.sg\/staging05\/wp-content\/uploads\/2025\/06\/5.-Brochure-FRP-GRP-print.pdf\",\r\n type: \"pdf\"\r\n },\r\n {\r\n id: 5,\r\n title: \"Metal Framing\",\r\n description: \"Optimize your projects with versatile metal framing systems that deliver superior load-bearing capacity.\",\r\n image: \"https:\/\/tristar.com.sg\/staging05\/wp-content\/uploads\/2025\/11\/CSS-Metal-Framing-2.jpeg\",\r\n url: \"https:\/\/tristar.com.sg\/staging05\/wp-content\/uploads\/2025\/11\/CSS-Metal-Framing-Brochure.pdf\",\r\n type: \"pdf\"\r\n \r\n },\r\n {\r\n id: 6,\r\n title: \"Cathodic Protection\",\r\n description: \"Advanced cathodic protection solutions to safeguard your assets against corrosion and extend service life.\",\r\n image: \"https:\/\/tristar.com.sg\/staging05\/wp-content\/uploads\/2024\/04\/Dimet-AnodeSite.jpg\",\r\n url: \"https:\/\/tristar.com.sg\/staging05\/wp-content\/uploads\/2025\/06\/3.-Brochure-CP-Feb16-high-res-blue.pdf\",\r\n type: \"pdf\"\r\n },\r\n {\r\n id: 7,\r\n title: \"Hydraulic Bolting Solutions\",\r\n description: \"High-performance bolting tools designed for accuracy, safety, and efficiency in critical operations.\",\r\n image: \"https:\/\/tristar.com.sg\/staging05\/wp-content\/uploads\/2026\/03\/BT_LP-GAUGE.png\",\r\n url: \"https:\/\/tristar.com.sg\/staging05\/wp-content\/uploads\/2025\/11\/BT-BROCHURE-2023_revised.pdf\",\r\n type: \"pdf\"\r\n }\r\n ];\r\n\r\n \/\/ Pagination logic\r\n const tristarItemsPerPage = 3;\r\n let tristarCurrentPage = 1;\r\n const tristarTotalPages = Math.ceil(tristarCatalogueItems.length \/ tristarItemsPerPage);\r\n \r\n\r\n \/\/ NEW: turn pagination off\r\n const tristarPaginationEnabled = false; \/*true: PAGINATION ; false: GRID*\/\r\n\r\n \r\n const tristarCatGrid = document.getElementById('tristarCatGrid');\r\n const tristarCatPagination = document.getElementById('tristarCatPagination');\r\n\r\n function tristarRenderPage(page) {\r\n \/\/ Clear grid\r\n tristarCatGrid.innerHTML = '';\r\n \r\n \/\/ Calculate items to show (updated)\r\n \r\n const startIndex = tristarPaginationEnabled ? (page - 1) * tristarItemsPerPage : 0;\r\n const endIndex = tristarPaginationEnabled\r\n ? Math.min(startIndex + tristarItemsPerPage, tristarCatalogueItems.length)\r\n : tristarCatalogueItems.length;\r\n\r\n \r\n \/\/ Render items\r\n for (let i = startIndex; i < endIndex; i++) {\r\n const item = tristarCatalogueItems[i];\r\n const itemElement = document.createElement('div');\r\n itemElement.className = 'tristar-cat-card';\r\n itemElement.setAttribute('data-url', item.url);\r\n itemElement.setAttribute('data-title', item.title);\r\n if (item.type === 'pdf') {\r\n itemElement.setAttribute('data-pdf', item.url);\r\n } else {\r\n itemElement.setAttribute('data-type', item.type);\r\n }\r\n \r\n itemElement.innerHTML = `\r\n <div class=\"tristar-cat-img-box\">\r\n <img decoding=\"async\" src=\"${item.image}\" alt=\"${item.title}\" class=\"tristar-cat-img\">\r\n <\/div>\r\n <div class=\"tristar-cat-content\">\r\n <h3 class=\"tristar-cat-title\">${item.title}<\/h3>\r\n <p class=\"tristar-cat-desc\">${item.description}<\/p>\r\n <div class=\"tristar-cat-action\">\r\n <span>${item.type === 'external' ? 'View Online' : 'View PDF'}<\/span>\r\n <i class=\"fas ${item.type === 'external' ? 'fa-external-link-alt' : 'fa-arrow-right'}\"><\/i>\r\n <\/div>\r\n <\/div>\r\n `;\r\n \r\n tristarCatGrid.appendChild(itemElement);\r\n }\r\n \r\n\r\n \/\/ Update pagination (only if enabled)\r\n if (tristarPaginationEnabled) {\r\n tristarUpdatePagination();\r\n } else {\r\n \/\/ Hide pagination UI when disabled\r\n tristarCatPagination.style.display = 'none';\r\n }\r\n\r\n \r\n \/\/ Add click events to new items\r\n tristarAddItemClickEvents();\r\n }\r\n\r\n function tristarUpdatePagination() {\r\n \/\/ Clear pagination\r\n tristarCatPagination.innerHTML = '';\r\n \r\n \/\/ Previous item\r\n const prevItem = document.createElement('div');\r\n prevItem.className = `tristar-cat-page-item ${tristarCurrentPage === 1 ? 'disabled' : ''}`;\r\n prevItem.innerHTML = '<i class=\"fas fa-chevron-left\"><\/i>';\r\n if (tristarCurrentPage > 1) {\r\n prevItem.addEventListener('click', () => {\r\n tristarCurrentPage--;\r\n tristarRenderPage(tristarCurrentPage);\r\n });\r\n }\r\n tristarCatPagination.appendChild(prevItem);\r\n \r\n \/\/ Page numbers\r\n for (let i = 1; i <= tristarTotalPages; i++) {\r\n const pageItem = document.createElement('div');\r\n pageItem.className = `tristar-cat-page-item ${i === tristarCurrentPage ? 'active' : ''}`;\r\n pageItem.textContent = i;\r\n pageItem.addEventListener('click', () => {\r\n tristarCurrentPage = i;\r\n tristarRenderPage(tristarCurrentPage);\r\n });\r\n tristarCatPagination.appendChild(pageItem);\r\n }\r\n \r\n \/\/ Next item\r\n const nextItem = document.createElement('div');\r\n nextItem.className = `tristar-cat-page-item ${tristarCurrentPage === tristarTotalPages ? 'disabled' : ''}`;\r\n nextItem.innerHTML = '<i class=\"fas fa-chevron-right\"><\/i>';\r\n if (tristarCurrentPage < tristarTotalPages) {\r\n nextItem.addEventListener('click', () => {\r\n tristarCurrentPage++;\r\n tristarRenderPage(tristarCurrentPage);\r\n });\r\n }\r\n tristarCatPagination.appendChild(nextItem);\r\n }\r\n\r\n function tristarAddItemClickEvents() {\r\n const items = document.querySelectorAll('.tristar-cat-card');\r\n \r\n items.forEach(item => {\r\n item.addEventListener('click', function() {\r\n const url = this.getAttribute('data-pdf') || this.getAttribute('data-url');\r\n const title = this.getAttribute('data-title');\r\n const type = this.getAttribute('data-type');\r\n \r\n if (type === 'external') {\r\n window.open(url, '_blank');\r\n } else {\r\n document.getElementById('tristarCatModalFrame').src = url;\r\n document.getElementById('tristarCatModalTitle').textContent = title;\r\n document.getElementById('tristarCatModal').classList.add('active');\r\n }\r\n });\r\n });\r\n }\r\n\r\n \/\/ Close modal\r\n document.getElementById('tristarCatCloseItem').addEventListener('click', () => {\r\n document.getElementById('tristarCatModal').classList.remove('active');\r\n document.getElementById('tristarCatModalFrame').src = '';\r\n });\r\n \r\n \/\/ Close modal when clicking outside\r\n document.getElementById('tristarCatModal').addEventListener('click', (e) => {\r\n if (e.target === document.getElementById('tristarCatModal')) {\r\n document.getElementById('tristarCatModal').classList.remove('active');\r\n document.getElementById('tristarCatModalFrame').src = '';\r\n }\r\n });\r\n\r\n \/\/ Initialize\r\n tristarRenderPage(tristarCurrentPage);\r\n <\/script>\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Product Catalogues – Tristar Our Product Catalogues Browse our comprehensive range of industrial solutions and technical products Catalogue<\/p>\n","protected":false},"author":5,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"nf_dc_page":"","_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"footnotes":""},"class_list":["post-7671","page","type-page","status-publish","hentry"],"yoast_head":"\n<title>Catalogues - Tri-Star Group of Companies<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/tristar.com.sg\/staging05\/catalogues\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Catalogues - Tri-Star Group of Companies\" \/>\n<meta property=\"og:description\" content=\"Product Catalogues – Tristar Our Product Catalogues Browse our comprehensive range of industrial solutions and technical products Catalogue\" \/>\n<meta property=\"og:url\" content=\"https:\/\/tristar.com.sg\/staging05\/catalogues\/\" \/>\n<meta property=\"og:site_name\" content=\"Tri-Star Group of Companies\" \/>\n<meta property=\"article:modified_time\" content=\"2026-04-02T01:30:45+00:00\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data1\" content=\"1 minute\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/tristar.com.sg\\\/staging05\\\/catalogues\\\/\",\"url\":\"https:\\\/\\\/tristar.com.sg\\\/staging05\\\/catalogues\\\/\",\"name\":\"Catalogues - Tri-Star Group of Companies\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/tristar.com.sg\\\/staging05\\\/#website\"},\"datePublished\":\"2025-11-28T12:42:37+00:00\",\"dateModified\":\"2026-04-02T01:30:45+00:00\",\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/tristar.com.sg\\\/staging05\\\/catalogues\\\/\"]}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/tristar.com.sg\\\/staging05\\\/#website\",\"url\":\"https:\\\/\\\/tristar.com.sg\\\/staging05\\\/\",\"name\":\"Tri-Star Group of Companies\",\"description\":\"Leading Global Manufacturer and Supplier of Best in Class Fasteners, Cable Support Systems, Cathodic Protection Systems and Hydraulic Bolt Tensioning and Torquing Tools and Services\",\"publisher\":{\"@id\":\"https:\\\/\\\/tristar.com.sg\\\/staging05\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/tristar.com.sg\\\/staging05\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/tristar.com.sg\\\/staging05\\\/#organization\",\"name\":\"Tri-Star Group of Companies\",\"url\":\"https:\\\/\\\/tristar.com.sg\\\/staging05\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/tristar.com.sg\\\/staging05\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/tristar.com.sg\\\/staging05\\\/wp-content\\\/uploads\\\/2025\\\/12\\\/TSI-LOGO-PNG_S.png\",\"contentUrl\":\"https:\\\/\\\/tristar.com.sg\\\/staging05\\\/wp-content\\\/uploads\\\/2025\\\/12\\\/TSI-LOGO-PNG_S.png\",\"width\":1080,\"height\":989,\"caption\":\"Tri-Star Group of Companies\"},\"image\":{\"@id\":\"https:\\\/\\\/tristar.com.sg\\\/staging05\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/www.linkedin.com\\\/company\\\/tri-star-industries1\\\/\"]}]}<\/script>\n","yoast_head_json":{"title":"Catalogues - Tri-Star Group of Companies","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/tristar.com.sg\/staging05\/catalogues\/","og_locale":"en_US","og_type":"article","og_title":"Catalogues - Tri-Star Group of Companies","og_description":"Product Catalogues – Tristar Our Product Catalogues Browse our comprehensive range of industrial solutions and technical products Catalogue","og_url":"https:\/\/tristar.com.sg\/staging05\/catalogues\/","og_site_name":"Tri-Star Group of Companies","article_modified_time":"2026-04-02T01:30:45+00:00","twitter_card":"summary_large_image","twitter_misc":{"Est. reading time":"1 minute"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/tristar.com.sg\/staging05\/catalogues\/","url":"https:\/\/tristar.com.sg\/staging05\/catalogues\/","name":"Catalogues - Tri-Star Group of Companies","isPartOf":{"@id":"https:\/\/tristar.com.sg\/staging05\/#website"},"datePublished":"2025-11-28T12:42:37+00:00","dateModified":"2026-04-02T01:30:45+00:00","inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/tristar.com.sg\/staging05\/catalogues\/"]}]},{"@type":"WebSite","@id":"https:\/\/tristar.com.sg\/staging05\/#website","url":"https:\/\/tristar.com.sg\/staging05\/","name":"Tri-Star Group of Companies","description":"Leading Global Manufacturer and Supplier of Best in Class Fasteners, Cable Support Systems, Cathodic Protection Systems and Hydraulic Bolt Tensioning and Torquing Tools and Services","publisher":{"@id":"https:\/\/tristar.com.sg\/staging05\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/tristar.com.sg\/staging05\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/tristar.com.sg\/staging05\/#organization","name":"Tri-Star Group of Companies","url":"https:\/\/tristar.com.sg\/staging05\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/tristar.com.sg\/staging05\/#\/schema\/logo\/image\/","url":"https:\/\/tristar.com.sg\/staging05\/wp-content\/uploads\/2025\/12\/TSI-LOGO-PNG_S.png","contentUrl":"https:\/\/tristar.com.sg\/staging05\/wp-content\/uploads\/2025\/12\/TSI-LOGO-PNG_S.png","width":1080,"height":989,"caption":"Tri-Star Group of Companies"},"image":{"@id":"https:\/\/tristar.com.sg\/staging05\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.linkedin.com\/company\/tri-star-industries1\/"]}]}},"_links":{"self":[{"href":"https:\/\/tristar.com.sg\/staging05\/wp-json\/wp\/v2\/pages\/7671","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/tristar.com.sg\/staging05\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/tristar.com.sg\/staging05\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/tristar.com.sg\/staging05\/wp-json\/wp\/v2\/users\/5"}],"replies":[{"embeddable":true,"href":"https:\/\/tristar.com.sg\/staging05\/wp-json\/wp\/v2\/comments?post=7671"}],"version-history":[{"count":20,"href":"https:\/\/tristar.com.sg\/staging05\/wp-json\/wp\/v2\/pages\/7671\/revisions"}],"predecessor-version":[{"id":9323,"href":"https:\/\/tristar.com.sg\/staging05\/wp-json\/wp\/v2\/pages\/7671\/revisions\/9323"}],"wp:attachment":[{"href":"https:\/\/tristar.com.sg\/staging05\/wp-json\/wp\/v2\/media?parent=7671"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

\n\t\t\t\t\t\t

\n\t\t\t\t\t

\n\t\t\t

\n\t\t\t\t\t\t

\n\t\t\t\t

\n\t\t\t\t\t\r\n\r\n\r\n \r\n \r\n Product Catalogues - Tristar<\/title>\r\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Inter:wght@300;400;500;600;700&display=swap\" rel=\"stylesheet\">\r\n <link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.4.0\/css\/all.min.css\">\r\n <style>\r\n .tristar-cat-primary {\r\n --tristar-primary: #2563EB;\r\n --tristar-primary-dark: #1D4ED8;\r\n --tristar-bg-light: #F8FAFC;\r\n --tristar-bg-card: #FFFFFF;\r\n --tristar-text-primary: #1E293B;\r\n --tristar-text-secondary: #64748B;\r\n --tristar-border: #E2E8F0;\r\n --tristar-border-radius: 12px;\r\n --tristar-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);\r\n }\r\n \r\n .tristar-cat-wrapper {\r\n background: var(--tristar-bg-light);\r\n font-family: \"Inter\", sans-serif;\r\n padding: 15px;\r\n }\r\n \r\n .tristar-cat-container {\r\n max-width: 80%;\r\n margin: 0 auto;\r\n background: white;\r\n padding: 25px 20px;\r\n border-radius: var(--tristar-border-radius);\r\n box-shadow: var(--tristar-shadow);\r\n }\r\n\r\n .tristar-cat-header {\r\n text-align: center;\r\n margin-bottom: 30px;\r\n }\r\n\r\n .tristar-cat-heading {\r\n font-size: 32px;\r\n font-weight: 700;\r\n margin-bottom: 12px;\r\n }\r\n\r\n .tristar-cat-heading span:first-child {\r\n color: var(--tristar-primary);\r\n }\r\n\r\n .tristar-cat-subtitle {\r\n font-size: 16px;\r\n color: var(--tristar-text-secondary);\r\n max-width: 500px;\r\n margin: 0 auto;\r\n line-height: 1.5;\r\n }\r\n\r\n .tristar-cat-grid {\r\n display: grid;\r\n \r\n \/*grid-template-columns: repeat(3, 1fr); \/*PAGNINATION MODE*\/\r\n grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); \/*GRID MODE*\/\r\n gap: 20px;\r\n margin-bottom: 30px;\r\n }\r\n\r\n .tristar-cat-card {\r\n background: var(--tristar-bg-card);\r\n border-radius: var(--tristar-border-radius);\r\n box-shadow: var(--tristar-shadow);\r\n border: 1px solid var(--tristar-border);\r\n overflow: hidden;\r\n cursor: pointer;\r\n transition: transform 0.3s ease;\r\n display: flex;\r\n flex-direction: column;\r\n width: 100%;\r\n height: 360px;\r\n }\r\n\r\n .tristar-cat-card:hover {\r\n transform: translateY(-5px);\r\n }\r\n\r\n .tristar-cat-img-box {\r\n width: 100%;\r\n height: 250px;\r\n overflow: hidden;\r\n }\r\n\r\n .tristar-cat-img {\r\n width: 100%;\r\n height: 100%;\r\n object-fit: contain; \/* to show full - change from cover*\/\r\n object-position: bottom ; \/* adjust as needed: top \/ bottom \/ center\/ h% v% *\/\r\n transition: transform 0.3s ease;\r\n }\r\n\r\n .tristar-cat-card:hover .tristar-cat-img {\r\n transform: scale(1.15);\r\n }\r\n\r\n .tristar-cat-content {\r\n padding: 12px;\r\n flex: 1;\r\n display: flex;\r\n flex-direction: column;\r\n }\r\n\r\n .tristar-cat-title {\r\n font-size: 15px;\r\n font-weight: 600;\r\n margin-bottom: 6px;\r\n color: var(--tristar-text-primary);\r\n }\r\n\r\n .tristar-cat-desc {\r\n font-size: 12px;\r\n color: var(--tristar-text-secondary);\r\n line-height: 1.4;\r\n margin-bottom: 10px;\r\n flex-grow: 1;\r\n display: -webkit-box;\r\n -webkit-line-clamp: 2;\r\n -webkit-box-orient: vertical;\r\n overflow: hidden;\r\n }\r\n\r\n .tristar-cat-action {\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n gap: 6px;\r\n padding: 6px 10px;\r\n background: var(--tristar-primary);\r\n color: white;\r\n border-radius: 6px;\r\n font-size: 11px;\r\n font-weight: 500;\r\n transition: background 0.3s ease;\r\n margin-top: auto;\r\n }\r\n\r\n .tristar-cat-action:hover {\r\n background: var(--tristar-primary-dark);\r\n }\r\n\r\n .tristar-cat-pagination {\r\n display: flex;\r\n justify-content: center;\r\n align-items: center;\r\n gap: 10px;\r\n margin-top: 20px;\r\n }\r\n\r\n .tristar-cat-page-item {\r\n width: 34px;\r\n height: 34px;\r\n border-radius: 8px;\r\n background: white;\r\n border: 1px solid var(--tristar-border);\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n cursor: pointer;\r\n transition: all 0.3s ease;\r\n font-weight: 500;\r\n font-size: 14px;\r\n }\r\n\r\n .tristar-cat-page-item:hover {\r\n background: var(--tristar-primary);\r\n color: white;\r\n }\r\n\r\n .tristar-cat-page-item.active {\r\n background: var(--tristar-primary);\r\n color: white;\r\n }\r\n\r\n .tristar-cat-page-item.disabled {\r\n opacity: 0.5;\r\n cursor: not-allowed;\r\n }\r\n\r\n .tristar-cat-page-item.disabled:hover {\r\n background: white;\r\n color: inherit;\r\n }\r\n\r\n \/* Modal styles *\/\r\n .tristar-cat-modal-overlay {\r\n position: fixed;\r\n top: 0;\r\n left: 0;\r\n width: 100%;\r\n height: 100%;\r\n background: rgba(0, 0, 0, 0.7);\r\n display: none;\r\n justify-content: center;\r\n align-items: center;\r\n z-index: 10000;\r\n }\r\n\r\n .tristar-cat-modal-overlay.active {\r\n display: flex;\r\n }\r\n\r\n .tristar-cat-modal-box {\r\n background: white;\r\n width: 90%;\r\n height: 80%;\r\n border-radius: var(--tristar-border-radius);\r\n overflow: hidden;\r\n box-shadow: 0 25px 50px rgba(0, 0, 0, 0.3);\r\n }\r\n\r\n .tristar-cat-modal-header {\r\n padding: 15px 20px;\r\n border-bottom: 1px solid var(--tristar-border);\r\n display: flex;\r\n justify-content: space-between;\r\n align-items: center;\r\n }\r\n\r\n .tristar-cat-modal-title {\r\n font-size: 18px;\r\n font-weight: 600;\r\n }\r\n\r\n .tristar-cat-close-item {\r\n width: 36px;\r\n height: 36px;\r\n border-radius: 8px;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n cursor: pointer;\r\n border: 1px solid var(--tristar-border);\r\n transition: background 0.3s ease;\r\n }\r\n\r\n .tristar-cat-close-item:hover {\r\n background: #EF4444;\r\n color: white;\r\n }\r\n\r\n .tristar-cat-modal-frame {\r\n width: 100%;\r\n height: calc(100% - 60px);\r\n border: none;\r\n }\r\n\r\n \/* Responsive - MAJOR MOBILE IMPROVEMENTS *\/\r\n @media (max-width: 1024px) {\r\n .tristar-cat-grid {\r\n grid-template-columns: repeat(2, 1fr);\r\n }\r\n }\r\n\r\n @media (max-width: 768px) {\r\n .tristar-cat-container {\r\n padding: 15px;\r\n }\r\n \r\n .tristar-cat-heading {\r\n font-size: 28px;\r\n }\r\n \r\n .tristar-cat-subtitle {\r\n font-size: 14px;\r\n }\r\n \r\n .tristar-cat-grid {\r\n grid-template-columns: 1fr;\r\n gap: 20px;\r\n }\r\n \r\n \/* MAJOR FIX: Dramatically increased image height on mobile *\/\r\n .tristar-cat-card {\r\n height: auto;\r\n min-height: 380px; \/* Significantly increased minimum height *\/\r\n }\r\n \r\n \/* MAJOR FIX: Much larger image area on mobile *\/\r\n .tristar-cat-img-box {\r\n height: 240px; \/* DRAMATICALLY increased from 140px to 240px *\/\r\n }\r\n \r\n \/* Better text display *\/\r\n .tristar-cat-content {\r\n padding: 18px;\r\n }\r\n \r\n .tristar-cat-title {\r\n font-size: 18px;\r\n margin-bottom: 10px;\r\n }\r\n \r\n .tristar-cat-desc {\r\n font-size: 14px;\r\n line-height: 1.5;\r\n -webkit-line-clamp: 4; \/* Show more text lines *\/\r\n margin-bottom: 15px;\r\n }\r\n \r\n .tristar-cat-action {\r\n padding: 12px 16px;\r\n font-size: 14px;\r\n }\r\n }\r\n\r\n @media (max-width: 480px) {\r\n \/* EXTREME MOBILE OPTIMIZATION *\/\r\n .tristar-cat-card {\r\n min-height: 420px; \/* Even taller on very small screens *\/\r\n }\r\n \r\n \/* MAXIMUM IMAGE HEIGHT ON MOBILE *\/\r\n .tristar-cat-img-box {\r\n height: 280px; \/* MAXIMUM increase - images now take ~65% of card *\/\r\n }\r\n \r\n .tristar-cat-content {\r\n padding: 20px;\r\n }\r\n \r\n .tristar-cat-title {\r\n font-size: 20px;\r\n margin-bottom: 12px;\r\n }\r\n \r\n .tristar-cat-desc {\r\n font-size: 15px;\r\n line-height: 1.6;\r\n -webkit-line-clamp: 5; \/* Show maximum text *\/\r\n margin-bottom: 18px;\r\n }\r\n \r\n .tristar-cat-action {\r\n padding: 14px 18px;\r\n font-size: 15px;\r\n }\r\n \r\n \/* Improve header for mobile *\/\r\n .tristar-cat-heading {\r\n font-size: 24px;\r\n }\r\n \r\n .tristar-cat-subtitle {\r\n font-size: 13px;\r\n }\r\n }\r\n\r\n @media (max-width: 360px) {\r\n \/* Ultra-small device optimization *\/\r\n .tristar-cat-card {\r\n min-height: 400px;\r\n }\r\n \r\n .tristar-cat-img-box {\r\n height: 250px;\r\n }\r\n \r\n .tristar-cat-content {\r\n padding: 16px;\r\n }\r\n }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n <div class=\"tristar-cat-primary\">\r\n <div class=\"tristar-cat-wrapper\">\r\n <div class=\"tristar-cat-container\">\r\n <div class=\"tristar-cat-header\">\r\n <h2 class=\"tristar-cat-heading\">\r\n <span>Our Product<\/span>\r\n <span>Catalogues<\/span>\r\n <\/h2>\r\n <p class=\"tristar-cat-subtitle\">Browse our comprehensive range of industrial solutions and technical products<\/p>\r\n <\/div>\r\n\r\n <div class=\"tristar-cat-grid\" id=\"tristarCatGrid\">\r\n \r\n <\/div>\r\n\r\n <div class=\"tristar-cat-pagination\" id=\"tristarCatPagination\">\r\n \r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"tristar-cat-modal-overlay\" id=\"tristarCatModal\">\r\n <div class=\"tristar-cat-modal-box\">\r\n <div class=\"tristar-cat-modal-header\">\r\n <h3 class=\"tristar-cat-modal-title\" id=\"tristarCatModalTitle\">Catalogue<\/h3>\r\n <div class=\"tristar-cat-close-item\" id=\"tristarCatCloseItem\">\r\n <i class=\"fas fa-times\"><\/i>\r\n <\/div>\r\n <\/div>\r\n <iframe class=\"tristar-cat-modal-frame\" id=\"tristarCatModalFrame\"><\/iframe>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <script>\r\n \/\/ Catalogue data\r\n const tristarCatalogueItems = [\r\n {\r\n id: 1,\r\n title: \"A Family of Quality\",\r\n description: \"Complete range of our product families and solutions designed for industrial excellence and reliability.\",\r\n image: \"https:\/\/tristar.com.sg\/staging05\/wp-content\/uploads\/2025\/12\/Family-Quality-Catalogue-Cover-Page-2.png\",\r\n url: \"https:\/\/tristar.com.sg\/staging05\/wp-content\/uploads\/2025\/12\/Tri-Star-Brochure_A-Family-of-Quality_digital.pdf\",\r\n type: \"pdf\"\r\n },\r\n {\r\n id: 2,\r\n title: \"Fasteners\",\r\n description: \"Precision-engineered fasteners for secure, reliable connections across industrial and structural applications.\",\r\n image: \"https:\/\/tristar.com.sg\/staging05\/wp-content\/uploads\/2024\/04\/BN-Special2.jpg\",\r\n url: \"https:\/\/tristar.com.sg\/staging05\/wp-content\/uploads\/2025\/06\/SBN_Fasteners.pdf\",\r\n type: \"pdf\"\r\n },\r\n {\r\n id: 3,\r\n title: \"Cable Support Systems\",\r\n description: \"Explore our complete range of cable support solutions engineered for strength, flexibility, and reliability.\",\r\n image: \"https:\/\/tristar.com.sg\/staging05\/wp-content\/uploads\/2024\/04\/CSS-Steel3.jpg\",\r\n url: \"https:\/\/tristar.com.sg\/staging05\/wp-content\/uploads\/2025\/11\/CSS-BROCHURE-2017.pdf\",\r\n type: \"pdf\"\r\n },\r\n {\r\n id: 4,\r\n title: \"FRP\/GRP\",\r\n description: \"Discover corrosion-resistant FRP\/GRP cable support systems designed for durability in harsh environments.\",\r\n image: \"https:\/\/tristar.com.sg\/staging05\/wp-content\/uploads\/2024\/05\/CSS-FRP2.jpg\",\r\n url: \"https:\/\/tristar.com.sg\/staging05\/wp-content\/uploads\/2025\/06\/5.-Brochure-FRP-GRP-print.pdf\",\r\n type: \"pdf\"\r\n },\r\n {\r\n id: 5,\r\n title: \"Metal Framing\",\r\n description: \"Optimize your projects with versatile metal framing systems that deliver superior load-bearing capacity.\",\r\n image: \"https:\/\/tristar.com.sg\/staging05\/wp-content\/uploads\/2025\/11\/CSS-Metal-Framing-2.jpeg\",\r\n url: \"https:\/\/tristar.com.sg\/staging05\/wp-content\/uploads\/2025\/11\/CSS-Metal-Framing-Brochure.pdf\",\r\n type: \"pdf\"\r\n \r\n },\r\n {\r\n id: 6,\r\n title: \"Cathodic Protection\",\r\n description: \"Advanced cathodic protection solutions to safeguard your assets against corrosion and extend service life.\",\r\n image: \"https:\/\/tristar.com.sg\/staging05\/wp-content\/uploads\/2024\/04\/Dimet-AnodeSite.jpg\",\r\n url: \"https:\/\/tristar.com.sg\/staging05\/wp-content\/uploads\/2025\/06\/3.-Brochure-CP-Feb16-high-res-blue.pdf\",\r\n type: \"pdf\"\r\n },\r\n {\r\n id: 7,\r\n title: \"Hydraulic Bolting Solutions\",\r\n description: \"High-performance bolting tools designed for accuracy, safety, and efficiency in critical operations.\",\r\n image: \"https:\/\/tristar.com.sg\/staging05\/wp-content\/uploads\/2026\/03\/BT_LP-GAUGE.png\",\r\n url: \"https:\/\/tristar.com.sg\/staging05\/wp-content\/uploads\/2025\/11\/BT-BROCHURE-2023_revised.pdf\",\r\n type: \"pdf\"\r\n }\r\n ];\r\n\r\n \/\/ Pagination logic\r\n const tristarItemsPerPage = 3;\r\n let tristarCurrentPage = 1;\r\n const tristarTotalPages = Math.ceil(tristarCatalogueItems.length \/ tristarItemsPerPage);\r\n \r\n\r\n \/\/ NEW: turn pagination off\r\n const tristarPaginationEnabled = false; \/*true: PAGINATION ; false: GRID*\/\r\n\r\n \r\n const tristarCatGrid = document.getElementById('tristarCatGrid');\r\n const tristarCatPagination = document.getElementById('tristarCatPagination');\r\n\r\n function tristarRenderPage(page) {\r\n \/\/ Clear grid\r\n tristarCatGrid.innerHTML = '';\r\n \r\n \/\/ Calculate items to show (updated)\r\n \r\n const startIndex = tristarPaginationEnabled ? (page - 1) * tristarItemsPerPage : 0;\r\n const endIndex = tristarPaginationEnabled\r\n ? Math.min(startIndex + tristarItemsPerPage, tristarCatalogueItems.length)\r\n : tristarCatalogueItems.length;\r\n\r\n \r\n \/\/ Render items\r\n for (let i = startIndex; i < endIndex; i++) {\r\n const item = tristarCatalogueItems[i];\r\n const itemElement = document.createElement('div');\r\n itemElement.className = 'tristar-cat-card';\r\n itemElement.setAttribute('data-url', item.url);\r\n itemElement.setAttribute('data-title', item.title);\r\n if (item.type === 'pdf') {\r\n itemElement.setAttribute('data-pdf', item.url);\r\n } else {\r\n itemElement.setAttribute('data-type', item.type);\r\n }\r\n \r\n itemElement.innerHTML = `\r\n <div class=\"tristar-cat-img-box\">\r\n <img decoding=\"async\" src=\"${item.image}\" alt=\"${item.title}\" class=\"tristar-cat-img\">\r\n <\/div>\r\n <div class=\"tristar-cat-content\">\r\n <h3 class=\"tristar-cat-title\">${item.title}<\/h3>\r\n <p class=\"tristar-cat-desc\">${item.description}<\/p>\r\n <div class=\"tristar-cat-action\">\r\n <span>${item.type === 'external' ? 'View Online' : 'View PDF'}<\/span>\r\n <i class=\"fas ${item.type === 'external' ? 'fa-external-link-alt' : 'fa-arrow-right'}\"><\/i>\r\n <\/div>\r\n <\/div>\r\n `;\r\n \r\n tristarCatGrid.appendChild(itemElement);\r\n }\r\n \r\n\r\n \/\/ Update pagination (only if enabled)\r\n if (tristarPaginationEnabled) {\r\n tristarUpdatePagination();\r\n } else {\r\n \/\/ Hide pagination UI when disabled\r\n tristarCatPagination.style.display = 'none';\r\n }\r\n\r\n \r\n \/\/ Add click events to new items\r\n tristarAddItemClickEvents();\r\n }\r\n\r\n function tristarUpdatePagination() {\r\n \/\/ Clear pagination\r\n tristarCatPagination.innerHTML = '';\r\n \r\n \/\/ Previous item\r\n const prevItem = document.createElement('div');\r\n prevItem.className = `tristar-cat-page-item ${tristarCurrentPage === 1 ? 'disabled' : ''}`;\r\n prevItem.innerHTML = '<i class=\"fas fa-chevron-left\"><\/i>';\r\n if (tristarCurrentPage > 1) {\r\n prevItem.addEventListener('click', () => {\r\n tristarCurrentPage--;\r\n tristarRenderPage(tristarCurrentPage);\r\n });\r\n }\r\n tristarCatPagination.appendChild(prevItem);\r\n \r\n \/\/ Page numbers\r\n for (let i = 1; i <= tristarTotalPages; i++) {\r\n const pageItem = document.createElement('div');\r\n pageItem.className = `tristar-cat-page-item ${i === tristarCurrentPage ? 'active' : ''}`;\r\n pageItem.textContent = i;\r\n pageItem.addEventListener('click', () => {\r\n tristarCurrentPage = i;\r\n tristarRenderPage(tristarCurrentPage);\r\n });\r\n tristarCatPagination.appendChild(pageItem);\r\n }\r\n \r\n \/\/ Next item\r\n const nextItem = document.createElement('div');\r\n nextItem.className = `tristar-cat-page-item ${tristarCurrentPage === tristarTotalPages ? 'disabled' : ''}`;\r\n nextItem.innerHTML = '<i class=\"fas fa-chevron-right\"><\/i>';\r\n if (tristarCurrentPage < tristarTotalPages) {\r\n nextItem.addEventListener('click', () => {\r\n tristarCurrentPage++;\r\n tristarRenderPage(tristarCurrentPage);\r\n });\r\n }\r\n tristarCatPagination.appendChild(nextItem);\r\n }\r\n\r\n function tristarAddItemClickEvents() {\r\n const items = document.querySelectorAll('.tristar-cat-card');\r\n \r\n items.forEach(item => {\r\n item.addEventListener('click', function() {\r\n const url = this.getAttribute('data-pdf') || this.getAttribute('data-url');\r\n const title = this.getAttribute('data-title');\r\n const type = this.getAttribute('data-type');\r\n \r\n if (type === 'external') {\r\n window.open(url, '_blank');\r\n } else {\r\n document.getElementById('tristarCatModalFrame').src = url;\r\n document.getElementById('tristarCatModalTitle').textContent = title;\r\n document.getElementById('tristarCatModal').classList.add('active');\r\n }\r\n });\r\n });\r\n }\r\n\r\n \/\/ Close modal\r\n document.getElementById('tristarCatCloseItem').addEventListener('click', () => {\r\n document.getElementById('tristarCatModal').classList.remove('active');\r\n document.getElementById('tristarCatModalFrame').src = '';\r\n });\r\n \r\n \/\/ Close modal when clicking outside\r\n document.getElementById('tristarCatModal').addEventListener('click', (e) => {\r\n if (e.target === document.getElementById('tristarCatModal')) {\r\n document.getElementById('tristarCatModal').classList.remove('active');\r\n document.getElementById('tristarCatModalFrame').src = '';\r\n }\r\n });\r\n\r\n \/\/ Initialize\r\n tristarRenderPage(tristarCurrentPage);\r\n <\/script>\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Product Catalogues – Tristar Our Product Catalogues Browse our comprehensive range of industrial solutions and technical products Catalogue<\/p>\n","protected":false},"author":5,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"nf_dc_page":"","_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"footnotes":""},"class_list":["post-7671","page","type-page","status-publish","hentry"],"yoast_head":"\n<title>Catalogues - Tri-Star Group of Companies<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/tristar.com.sg\/staging05\/catalogues\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Catalogues - Tri-Star Group of Companies\" \/>\n<meta property=\"og:description\" content=\"Product Catalogues – Tristar Our Product Catalogues Browse our comprehensive range of industrial solutions and technical products Catalogue\" \/>\n<meta property=\"og:url\" content=\"https:\/\/tristar.com.sg\/staging05\/catalogues\/\" \/>\n<meta property=\"og:site_name\" content=\"Tri-Star Group of Companies\" \/>\n<meta property=\"article:modified_time\" content=\"2026-04-02T01:30:45+00:00\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data1\" content=\"1 minute\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/tristar.com.sg\\\/staging05\\\/catalogues\\\/\",\"url\":\"https:\\\/\\\/tristar.com.sg\\\/staging05\\\/catalogues\\\/\",\"name\":\"Catalogues - Tri-Star Group of Companies\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/tristar.com.sg\\\/staging05\\\/#website\"},\"datePublished\":\"2025-11-28T12:42:37+00:00\",\"dateModified\":\"2026-04-02T01:30:45+00:00\",\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/tristar.com.sg\\\/staging05\\\/catalogues\\\/\"]}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/tristar.com.sg\\\/staging05\\\/#website\",\"url\":\"https:\\\/\\\/tristar.com.sg\\\/staging05\\\/\",\"name\":\"Tri-Star Group of Companies\",\"description\":\"Leading Global Manufacturer and Supplier of Best in Class Fasteners, Cable Support Systems, Cathodic Protection Systems and Hydraulic Bolt Tensioning and Torquing Tools and Services\",\"publisher\":{\"@id\":\"https:\\\/\\\/tristar.com.sg\\\/staging05\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/tristar.com.sg\\\/staging05\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/tristar.com.sg\\\/staging05\\\/#organization\",\"name\":\"Tri-Star Group of Companies\",\"url\":\"https:\\\/\\\/tristar.com.sg\\\/staging05\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/tristar.com.sg\\\/staging05\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/tristar.com.sg\\\/staging05\\\/wp-content\\\/uploads\\\/2025\\\/12\\\/TSI-LOGO-PNG_S.png\",\"contentUrl\":\"https:\\\/\\\/tristar.com.sg\\\/staging05\\\/wp-content\\\/uploads\\\/2025\\\/12\\\/TSI-LOGO-PNG_S.png\",\"width\":1080,\"height\":989,\"caption\":\"Tri-Star Group of Companies\"},\"image\":{\"@id\":\"https:\\\/\\\/tristar.com.sg\\\/staging05\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/www.linkedin.com\\\/company\\\/tri-star-industries1\\\/\"]}]}<\/script>\n","yoast_head_json":{"title":"Catalogues - Tri-Star Group of Companies","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/tristar.com.sg\/staging05\/catalogues\/","og_locale":"en_US","og_type":"article","og_title":"Catalogues - Tri-Star Group of Companies","og_description":"Product Catalogues – Tristar Our Product Catalogues Browse our comprehensive range of industrial solutions and technical products Catalogue","og_url":"https:\/\/tristar.com.sg\/staging05\/catalogues\/","og_site_name":"Tri-Star Group of Companies","article_modified_time":"2026-04-02T01:30:45+00:00","twitter_card":"summary_large_image","twitter_misc":{"Est. reading time":"1 minute"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/tristar.com.sg\/staging05\/catalogues\/","url":"https:\/\/tristar.com.sg\/staging05\/catalogues\/","name":"Catalogues - Tri-Star Group of Companies","isPartOf":{"@id":"https:\/\/tristar.com.sg\/staging05\/#website"},"datePublished":"2025-11-28T12:42:37+00:00","dateModified":"2026-04-02T01:30:45+00:00","inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/tristar.com.sg\/staging05\/catalogues\/"]}]},{"@type":"WebSite","@id":"https:\/\/tristar.com.sg\/staging05\/#website","url":"https:\/\/tristar.com.sg\/staging05\/","name":"Tri-Star Group of Companies","description":"Leading Global Manufacturer and Supplier of Best in Class Fasteners, Cable Support Systems, Cathodic Protection Systems and Hydraulic Bolt Tensioning and Torquing Tools and Services","publisher":{"@id":"https:\/\/tristar.com.sg\/staging05\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/tristar.com.sg\/staging05\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/tristar.com.sg\/staging05\/#organization","name":"Tri-Star Group of Companies","url":"https:\/\/tristar.com.sg\/staging05\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/tristar.com.sg\/staging05\/#\/schema\/logo\/image\/","url":"https:\/\/tristar.com.sg\/staging05\/wp-content\/uploads\/2025\/12\/TSI-LOGO-PNG_S.png","contentUrl":"https:\/\/tristar.com.sg\/staging05\/wp-content\/uploads\/2025\/12\/TSI-LOGO-PNG_S.png","width":1080,"height":989,"caption":"Tri-Star Group of Companies"},"image":{"@id":"https:\/\/tristar.com.sg\/staging05\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.linkedin.com\/company\/tri-star-industries1\/"]}]}},"_links":{"self":[{"href":"https:\/\/tristar.com.sg\/staging05\/wp-json\/wp\/v2\/pages\/7671","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/tristar.com.sg\/staging05\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/tristar.com.sg\/staging05\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/tristar.com.sg\/staging05\/wp-json\/wp\/v2\/users\/5"}],"replies":[{"embeddable":true,"href":"https:\/\/tristar.com.sg\/staging05\/wp-json\/wp\/v2\/comments?post=7671"}],"version-history":[{"count":20,"href":"https:\/\/tristar.com.sg\/staging05\/wp-json\/wp\/v2\/pages\/7671\/revisions"}],"predecessor-version":[{"id":9323,"href":"https:\/\/tristar.com.sg\/staging05\/wp-json\/wp\/v2\/pages\/7671\/revisions\/9323"}],"wp:attachment":[{"href":"https:\/\/tristar.com.sg\/staging05\/wp-json\/wp\/v2\/media?parent=7671"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}