{"id":1376,"date":"2025-10-04T14:55:37","date_gmt":"2025-10-04T14:55:37","guid":{"rendered":"https:\/\/jacobs-tech.com\/?page_id=1376"},"modified":"2025-11-03T12:08:11","modified_gmt":"2025-11-03T12:08:11","slug":"construction-maintenance","status":"publish","type":"page","link":"https:\/\/suffix.com\/ar\/construction-maintenance","title":{"rendered":"\u0627\u0644\u0625\u0646\u0634\u0627\u0621 \u0648\u0627\u0644\u0635\u064a\u0627\u0646\u0629"},"content":{"rendered":"\t\t
\n\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 Fixed Background Parallax Scroll<\/title>\r\n <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\r\n <script>\r\n tailwind.config = {\r\n theme: {\r\n extend: {\r\n screens: {\r\n 'md': '768px', \/\/ Tablet\r\n 'lg': '1025px', \/\/ Laptop\r\n 'xl': '1367px', \/\/ Desktop (1367px and up)\r\n },\r\n fontFamily: {\r\n 'favorit': ['favorit-regular', 'sans-serif'],\r\n }\r\n }\r\n }\r\n }\r\n <\/script>\r\n <style>\r\n @font-face {\r\n font-family: 'favorit-regular';\r\n src: url('https:\/\/suffix.com\/wp-content\/themes\/jacobstech\/fonts\/favorit-regular.woff2') format('woff2'),\r\n url('https:\/\/suffix.com\/wp-content\/themes\/jacobstech\/fonts\/favorit-regular.woff') format('woff');\r\n font-weight: normal;\r\n font-style: normal;\r\n font-display: swap;\r\n }\r\n\r\n body {\r\n overflow-x: hidden;\r\n background-color: #0d0d0d;\r\n font-family: 'favorit-regular', sans-serif;\r\n }\r\n\r\n #parallax-bg { \r\n position: absolute;\r\n top: 0; \r\n left: 0; \r\n width: 100%; \r\n height: 100%; \r\n z-index: 1; \r\n overflow: hidden; \r\n background-color: #000; \r\n }\r\n\r\n #bg-image {\r\n background-image: url('https:\/\/suffix.com\/wp-content\/uploads\/2025\/09\/Construction-Maintenance_.jpg');\r\n background-size: cover;\r\n background-position: center center;\r\n width: 100%;\r\n height: 100%;\r\n will-change: filter, opacity;\r\n }\r\n\r\n #bg-overlay {\r\n position: absolute;\r\n top: 0;\r\n left: 0;\r\n width: 100%;\r\n height: 100%;\r\n background-color: #000000;\r\n opacity: 0.5;\r\n will-change: opacity;\r\n }\r\n\r\n #hero-content-scroll-area {\r\n position: relative;\r\n z-index: 10;\r\n min-height: 101vh; \r\n background-color: transparent;\r\n }\r\n\r\n #parallax-grid {\r\n position: sticky; \r\n top: 0; \r\n height: 100vh; \r\n display: flex;\r\n align-items: center;\r\n }\r\n\r\n #motion-content.no-transform {\r\n transform: none !important;\r\n }\r\n\r\n \/* Ensure right column content doesn't overflow *\/\r\n #motion-content {\r\n max-height: 70vh;\r\n overflow: visible;\r\n }\r\n\r\n @media (min-width: 1025px) {\r\n #motion-content {\r\n max-height: 60vh;\r\n }\r\n }\r\n\r\n @media (min-width: 1367px) {\r\n #motion-content {\r\n max-height: 55vh;\r\n }\r\n }\r\n <\/style>\r\n<\/head>\r\n<body class=\"bg-gray-900\">\r\n\r\n <!-- 1. FIXED PARALLAX BACKGROUND -->\r\n <div id=\"parallax-bg\">\r\n <div id=\"bg-image\">\r\n <div id=\"bg-overlay\"><\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <!-- 2. SCROLLABLE HERO CONTENT AREA -->\r\n <div id=\"hero-content-scroll-area\">\r\n \r\n <!-- The Grid that houses the two text columns -->\r\n <div id=\"parallax-grid\" class=\"container mx-auto max-w-7xl px-[30px] lg:px-[50px]\">\r\n <div id=\"grid-content\" class=\"w-full grid grid-cols-1 gap-[60px] mb-[3vh] md:mb-[4vh] \r\n lg:grid-cols-[45%_55%] lg:gap-12 lg:mb-[10vh] \r\n xl:grid-cols-[40%_60%] xl:gap-16 xl:mb-[12vh]\">\r\n \r\n <!-- LEFT COLUMN -->\r\n <div id=\"left-column\" class=\"flex items-center pt-[120px] lg:pt-0 lg:h-screen z-20 lg:pr-8\">\r\n <h1 class=\"text-white uppercase font-bold leading-none tracking-[0.09em] m-0 font-favorit\r\n text-[36px] \r\n md:text-[52px] \r\n lg:text-[52px] \r\n xl:text-[60px]\">\r\n Construction \r\n & Maintenance\r\n <\/h1>\r\n <\/div>\r\n\r\n <!-- RIGHT COLUMN -->\r\n <div id=\"motion-content\" class=\"text-white self-auto lg:self-end font-favorit\r\n text-[18px] leading-[1.6] font-normal\r\n md:text-[24px] md:leading-[1.5]\r\n lg:text-[22px] lg:leading-[1.5]\r\n xl:text-[26px] xl:leading-[1.5]\r\n max-w-none lg:max-w-full xl:max-w-[95%]\">\r\n <p class=\"mb-5 lg:mb-[25px] xl:mb-[30px]\">\r\n At Suffix Management, we are specialized in the design, construction, and maintenance of sports in Kuwait. With a team of expert engineers, architects, and project managers, we bring technical precision and global best practices to every field or court.\r\n \r\n <\/p>\r\n\t\t\t\t\t <p class=\"mb-5 lg:mb-[25px] xl:mb-[30px]\">\r\n From concept to completion, we oversee planning, structural development, installation of sports surfaces, lighting, seating, and technology integration. Our dedicated maintenance teams provide regular care, upgrades, and operational support, ensuring facilities remain safe, modern, and high-performing long after they are built.\r\n \r\n <\/p>\r\n \r\n <p class=\"mb-0\">\r\n\t\t\t\t\t Whether it\u2019s a stadium, training ground, or community sports hub, we deliver facilities in Kuwait that are built to last and managed for maximum efficiency, giving clients complete confidence in quality and sustainability.\r\n\t\t\t\t\t \r\n\t\t\t\t\t <\/p>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <!-- JAVASCRIPT SCROLL LOGIC -->\r\n <script>\r\n const MOTION_SPEED = 1.4;\r\n const VIEWPORT_EFFECT_END_RATIO = 0.65;\r\n const MAX_BLUR = 12;\r\n const MAX_OVERLAY_OPACITY = 0.95;\r\n\r\n const heroWrapper = document.getElementById('hero-content-scroll-area');\r\n const bgImage = document.getElementById('bg-image');\r\n const bgOverlay = document.getElementById('bg-overlay');\r\n const motionContent = document.getElementById('motion-content');\r\n\r\n const calculateEffectRatio = (rectTop) => {\r\n const viewportHeight = window.innerHeight;\r\n const effectRange = viewportHeight * VIEWPORT_EFFECT_END_RATIO; \r\n const scrollDistance = -rectTop; \r\n let ratio = scrollDistance \/ effectRange;\r\n return Math.max(0, Math.min(1, ratio));\r\n };\r\n\r\n const isMobileViewport = () => {\r\n return window.innerWidth <= 1024;\r\n };\r\n\r\n const handleScrollEffects = () => {\r\n if (!heroWrapper || !bgImage || !bgOverlay || !motionContent) {\r\n return;\r\n }\r\n\r\n const rect = heroWrapper.getBoundingClientRect();\r\n const scrollRatio = calculateEffectRatio(rect.top);\r\n\r\n \/\/ Background Effects (Blur and Overlay)\r\n const currentBlur = scrollRatio * MAX_BLUR;\r\n bgImage.style.filter = `blur(${currentBlur}px)`;\r\nconst baseOpacity = 0.85; \/\/ always visible from start\r\nconst currentOpacity = baseOpacity + (scrollRatio * (MAX_OVERLAY_OPACITY - baseOpacity));\r\n\r\n \/\/const currentOpacity = scrollRatio * MAX_OVERLAY_OPACITY;\r\n \/\/bgOverlay.style.opacity = currentOpacity;\r\n\r\n \/\/ Content Motion Effect (Right Column Lift)\r\n if (!isMobileViewport()) {\r\n const totalMovementRange = window.innerHeight * MOTION_SPEED;\r\n const currentLift = scrollRatio * totalMovementRange;\r\n \r\n motionContent.style.transition = 'transform 0.25s cubic-bezier(0.25, 0.1, 0.25, 1)'; \r\n motionContent.style.transform = `translateY(-${currentLift}px)`;\r\n motionContent.style.willChange = 'transform';\r\n motionContent.classList.remove('no-transform');\r\n } else {\r\n motionContent.style.transform = 'none';\r\n motionContent.style.willChange = 'auto';\r\n motionContent.classList.add('no-transform');\r\n }\r\n };\r\n\r\n window.addEventListener('scroll', handleScrollEffects);\r\n window.addEventListener('resize', handleScrollEffects);\r\n \r\n document.addEventListener('DOMContentLoaded', () => {\r\n handleScrollEffects();\r\n });\r\n <\/script>\r\n\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-c00d754 e-con-full e-flex e-con e-parent\" data-id=\"c00d754\" data-element_type=\"container\" data-settings=\"{"_ob_use_container_extras":"no","_ob_column_hoveranimator":"no","_ob_glider_is_slider":"no","_ob_column_has_pseudo":"no"}\">\n\t\t\t\t<div class=\"elementor-element elementor-element-6f42171 ob-has-background-overlay elementor-widget elementor-widget-spacer\" data-id=\"6f42171\" data-element_type=\"widget\" data-settings=\"{"_ob_spacerat_use":"no","_ob_perspektive_use":"no","_ob_widget_stalker_use":"no","_ob_poopart_use":"yes","_ob_shadough_use":"no","_ob_allow_hoveranimator":"no"}\" data-widget_type=\"spacer.default\">\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 class=\"elementor-element elementor-element-cbdc0ac ob-harakiri-inherit ob-has-background-overlay elementor-widget elementor-widget-heading\" data-id=\"cbdc0ac\" data-element_type=\"widget\" data-settings=\"{"_ob_use_harakiri":"yes","_ob_harakiri_writing_mode":"inherit","_ob_harakiri_text_clip":"none","_ob_perspektive_use":"no","_ob_widget_stalker_use":"no","_ob_poopart_use":"yes","_ob_shadough_use":"no","_ob_allow_hoveranimator":"no"}\" data-widget_type=\"heading.default\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">Some of Our Work<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-c09368c ob-has-background-overlay elementor-widget elementor-widget-spacer\" data-id=\"c09368c\" data-element_type=\"widget\" data-settings=\"{"_ob_spacerat_use":"no","_ob_perspektive_use":"no","_ob_widget_stalker_use":"no","_ob_poopart_use":"yes","_ob_shadough_use":"no","_ob_allow_hoveranimator":"no"}\" data-widget_type=\"spacer.default\">\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 class=\"elementor-element elementor-element-ba81b76 ob-has-background-overlay elementor-widget elementor-widget-jj_events_featured\" data-id=\"ba81b76\" data-element_type=\"widget\" data-settings=\"{"_ob_perspektive_use":"no","_ob_widget_stalker_use":"no","_ob_poopart_use":"yes","_ob_shadough_use":"no","_ob_allow_hoveranimator":"no"}\" data-widget_type=\"jj_events_featured.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<!-- DEBUG IDs: --><div class=\"jj-events-widget featured-3\" style=\"--jj-gap:32px; --jj-img-h:340px;\"><div class=\"luxury-grid featured-grid\"><div class=\"jj-no-results\">No events selected. Edit the widget to choose up to 3 events.<\/div><\/div><\/div>\t\t\t\t<\/div>\n\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>Fixed Background Parallax Scroll Construction & Maintenance At Suffix Management, we are specialized in the design, construction, and maintenance of sports in Kuwait. With a…<\/p>","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_header_footer","meta":{"_acf_changed":false,"_eb_attr":"","_customify_content_layout":"full-stretched","_customify_sidebar":"content","_customify_page_header_display":"default","_customify_disable_header":"","_customify_disable_header_top":"","_customify_disable_header_main":"","_customify_disable_header_bottom":"","_customify_disable_page_title":"","_customify_disable_content_vertical_padding":"","_customify_disable_footer_top":"","_customify_disable_footer_main":"","_customify_disable_footer_bottom":"","_customify_breadcrumb_display":"","_customify_header_transparent_display":"","footnotes":""},"class_list":["post-1376","page","type-page","status-publish","hentry"],"acf":[],"_links":{"self":[{"href":"https:\/\/suffix.com\/ar\/wp-json\/wp\/v2\/pages\/1376","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/suffix.com\/ar\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/suffix.com\/ar\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/suffix.com\/ar\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/suffix.com\/ar\/wp-json\/wp\/v2\/comments?post=1376"}],"version-history":[{"count":12,"href":"https:\/\/suffix.com\/ar\/wp-json\/wp\/v2\/pages\/1376\/revisions"}],"predecessor-version":[{"id":3571,"href":"https:\/\/suffix.com\/ar\/wp-json\/wp\/v2\/pages\/1376\/revisions\/3571"}],"wp:attachment":[{"href":"https:\/\/suffix.com\/ar\/wp-json\/wp\/v2\/media?parent=1376"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}