3D Rising Grid - White & Minimal<\/title>\n <style>\n \/* Import fontu Archivo *\/\n @import url('https:\/\/fonts.googleapis.com\/css2?family=Archivo:wght@400;700&display=swap');\n\n body, html {\n margin: 0;\n padding: 0;\n overflow: hidden;\n background: #ffffff; \/* Zmienione na bia\u0142e t\u0142o *\/\n }\n\n .grid60-wrap {\n width: 100%;\n height: 100vh;\n overflow: hidden;\n position: relative;\n perspective: 1500px;\n }\n\n .grid60-viewport {\n width: 100%;\n height: 100%;\n overflow: hidden;\n cursor: grab;\n user-select: none;\n }\n\n .grid60-viewport.is-dragging {\n cursor: grabbing;\n }\n\n .grid60-board {\n display: grid;\n \/* Definicja szeroko\u015bci kafelk\u00f3w - 400px *\/\n grid-template-columns: repeat(20, 400px);\n \/* Wysoko\u015b\u0107 obliczana dla proporcji 16:9 (400 \/ 16 * 9 = 225px) *\/\n grid-template-rows: repeat(20, 225px);\n gap: 60px; \n padding: 400px; \n width: max-content;\n height: max-content;\n transform-style: preserve-3d;\n will-change: transform;\n }\n\n .grid60-tile {\n position: relative;\n width: 100%;\n height: 100%;\n background: #f0f0f0; \/* Jasne t\u0142o startowe *\/\n border-radius: 0; \/* Bez zaokr\u0105gle\u0144 *\/\n overflow: hidden;\n z-index: 1;\n box-shadow: 0 10px 30px rgba(0,0,0,0.05); \/* Delikatny cie\u0144 na start *\/\n transition: \n transform 0.8s cubic-bezier(0.2, 1, 0.3, 1), \n box-shadow 0.8s cubic-bezier(0.2, 1, 0.3, 1);\n }\n\n \/* Zdj\u0119cie w tle *\/\n .tile-bg {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n background-size: cover;\n background-position: center;\n filter: grayscale(0%) brightness(1); \/* Jasne na start *\/\n transition: \n transform 1.2s cubic-bezier(0.2, 1, 0.3, 1),\n filter 0.8s cubic-bezier(0.2, 1, 0.3, 1);\n }\n\n \/* MOCNIEJSZY HOVER I POWI\u0118KSZENIE *\/\n .grid60-tile:hover {\n transform: scale(1.2) translateZ(80px); \/* Powi\u0119kszenie *\/\n box-shadow: 0 40px 80px rgba(0,0,0,0.4);\n z-index: 100;\n }\n\n \/* PRZYCIEMNIENIE GRAFIKI PO NAJECHANIU *\/\n .grid60-tile:hover .tile-bg {\n transform: scale(1.05); \/* Delikatny zoom zdj\u0119cia *\/\n filter: brightness(0.3); \/* Mocne przyciemnienie *\/\n }\n\n \/* EFEKT PO\u015aWIATY (GODLY GLOW) *\/\n .tile-glow {\n position: absolute;\n width: 600px;\n height: 600px;\n background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0) 70%);\n border-radius: 50%;\n transform: translate(-50%, -50%);\n pointer-events: none;\n opacity: 0;\n transition: opacity 0.4s ease;\n z-index: 2;\n }\n\n .grid60-tile:hover .tile-glow {\n opacity: 1;\n }\n\n \/* TRE\u015a\u0106 - BIA\u0141A *\/\n .grid60-tile-content {\n position: absolute;\n left: 30px;\n right: 30px;\n bottom: 40px;\n opacity: 0;\n transform: translateY(30px);\n transition: all 0.6s cubic-bezier(0.2, 1, 0.3, 1);\n transition-delay: 0.1s;\n pointer-events: none;\n z-index: 3;\n color: #ffffff; \/* Bia\u0142e napisy *\/\n font-family: 'Archivo', sans-serif;\n text-shadow: 0 1px 4px rgba(0,0,0,0.3); \/* Delikatny cie\u0144 dla czytelno\u015bci *\/\n }\n\n .grid60-tile:hover .grid60-tile-content {\n opacity: 1;\n transform: translateY(0);\n }\n\n .grid60-tile-title {\n margin: 0 0 10px 0;\n font-size: 22px;\n font-weight: 700;\n line-height: 1.2;\n text-transform: uppercase;\n letter-spacing: -0.01em;\n }\n\n .grid60-tile-lead {\n margin: 0;\n font-size: 14px;\n font-weight: 400;\n line-height: 1.6;\n opacity: 0.9;\n }\n\n @media (max-width: 767px) {\n .grid60-board {\n grid-template-columns: repeat(20, 280px);\n grid-template-rows: repeat(20, 157.5px); \/* 16:9 dla mobile *\/\n gap: 30px;\n padding: 200px;\n }\n }\n <\/style>\n<\/head>\n<body>\n\n<div class=\"grid60-wrap\">\n <div class=\"grid60-viewport\" id=\"grid60Viewport\">\n <div class=\"grid60-board\" id=\"grid60Board\"><\/div>\n <\/div>\n<\/div>\n\n<script>\n(function(){\n const board = document.getElementById('grid60Board');\n const viewport = document.getElementById('grid60Viewport');\n \n const total = 400; \n let html = '';\n\n for(let i = 0; i < total; i++){\n const imgId = 100 + i; \n html += `\n <div class=\"grid60-tile\">\n <div class=\"tile-bg\" style=\"background-image: url('https:\/\/picsum.photos\/seed\/${imgId}\/640\/360')\"><\/div>\n <div class=\"tile-glow\"><\/div>\n <div class=\"grid60-tile-content\">\n <h3 class=\"grid60-tile-title\">Creative Showcase ${i+1}<\/h3>\n <p class=\"grid60-tile-lead\">This is a showcase of our latest digital exploration. We combine cutting-edge technology with minimalist aesthetics to create unique experiences.<\/p>\n <\/div>\n <\/div>`;\n }\n board.innerHTML = html;\n\n \/\/ --- LOGIKA BEZW\u0141ADNO\u015aCI (INERTIA) ---\n let isDragging = false;\n let startX, startY;\n let scrollX = 0, scrollY = 0;\n let velX = 0, velY = 0;\n let targetX = 0, targetY = 0;\n\n \/\/ Centrowanie na start\n window.addEventListener('load', () => {\n scrollX = (viewport.scrollWidth - window.innerWidth) \/ 2;\n scrollY = (viewport.scrollHeight - window.innerHeight) \/ 2;\n targetX = scrollX;\n targetY = scrollY;\n });\n\n viewport.addEventListener('mousedown', (e) => {\n isDragging = true;\n viewport.classList.add('is-dragging');\n startX = e.pageX;\n startY = e.pageY;\n velX = 0;\n velY = 0;\n });\n\n window.addEventListener('mousemove', (e) => {\n if (!isDragging) return;\n const dx = e.pageX - startX;\n const dy = e.pageY - startY;\n targetX -= dx;\n targetY -= dy;\n startX = e.pageX;\n startY = e.pageY;\n velX = dx;\n velY = dy;\n });\n\n window.addEventListener('mouseup', () => {\n isDragging = false;\n viewport.classList.remove('is-dragging');\n });\n\n function update() {\n if (!isDragging) {\n targetX -= velX;\n targetY -= velY;\n velX *= 0.95; \/\/ Tarcie\n velY *= 0.95;\n }\n\n const maxScrollX = viewport.scrollWidth - window.innerWidth;\n const maxScrollY = viewport.scrollHeight - window.innerHeight;\n \n targetX = Math.max(0, Math.min(targetX, maxScrollX));\n targetY = Math.max(0, Math.min(targetY, maxScrollY));\n\n scrollX += (targetX - scrollX) * 0.1; \/\/ Smoothness\n scrollY += (targetY - scrollY) * 0.1;\n\n viewport.scrollLeft = scrollX;\n viewport.scrollTop = scrollY;\n\n requestAnimationFrame(update);\n }\n update();\n\n \/\/ --- LOGIKA PO\u015aWIATY (GODLY HOVER) ---\n board.addEventListener('mousemove', (e) => {\n const tile = e.target.closest('.grid60-tile');\n if (!tile) return;\n\n const glow = tile.querySelector('.tile-glow');\n const rect = tile.getBoundingClientRect();\n const x = e.clientX - rect.left;\n const y = e.clientY - rect.top;\n\n glow.style.left = `${x}px`;\n glow.style.top = `${y}px`;\n });\n\n})();\n<\/script>\n\n<\/body>\n<\/html>\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\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t\t\t\t<\/div>","protected":false},"excerpt":{"rendered":"<p>3D Rising Grid – White & Minimal<\/p>","protected":false},"author":2,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_canvas","meta":{"footnotes":""},"acf":[],"_links":{"self":[{"href":"https:\/\/www.spectar.pl\/en\/wp-json\/wp\/v2\/pages\/7398"}],"collection":[{"href":"https:\/\/www.spectar.pl\/en\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.spectar.pl\/en\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.spectar.pl\/en\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.spectar.pl\/en\/wp-json\/wp\/v2\/comments?post=7398"}],"version-history":[{"count":49,"href":"https:\/\/www.spectar.pl\/en\/wp-json\/wp\/v2\/pages\/7398\/revisions"}],"predecessor-version":[{"id":7987,"href":"https:\/\/www.spectar.pl\/en\/wp-json\/wp\/v2\/pages\/7398\/revisions\/7987"}],"wp:attachment":[{"href":"https:\/\/www.spectar.pl\/en\/wp-json\/wp\/v2\/media?parent=7398"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

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

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

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

\n\t\t\t

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

\n\t\t\t\t

\n\t\t\t\n\n\n \n \n 3D Rising Grid - White & Minimal<\/title>\n <style>\n \/* Import fontu Archivo *\/\n @import url('https:\/\/fonts.googleapis.com\/css2?family=Archivo:wght@400;700&display=swap');\n\n body, html {\n margin: 0;\n padding: 0;\n overflow: hidden;\n background: #ffffff; \/* Zmienione na bia\u0142e t\u0142o *\/\n }\n\n .grid60-wrap {\n width: 100%;\n height: 100vh;\n overflow: hidden;\n position: relative;\n perspective: 1500px;\n }\n\n .grid60-viewport {\n width: 100%;\n height: 100%;\n overflow: hidden;\n cursor: grab;\n user-select: none;\n }\n\n .grid60-viewport.is-dragging {\n cursor: grabbing;\n }\n\n .grid60-board {\n display: grid;\n \/* Definicja szeroko\u015bci kafelk\u00f3w - 400px *\/\n grid-template-columns: repeat(20, 400px);\n \/* Wysoko\u015b\u0107 obliczana dla proporcji 16:9 (400 \/ 16 * 9 = 225px) *\/\n grid-template-rows: repeat(20, 225px);\n gap: 60px; \n padding: 400px; \n width: max-content;\n height: max-content;\n transform-style: preserve-3d;\n will-change: transform;\n }\n\n .grid60-tile {\n position: relative;\n width: 100%;\n height: 100%;\n background: #f0f0f0; \/* Jasne t\u0142o startowe *\/\n border-radius: 0; \/* Bez zaokr\u0105gle\u0144 *\/\n overflow: hidden;\n z-index: 1;\n box-shadow: 0 10px 30px rgba(0,0,0,0.05); \/* Delikatny cie\u0144 na start *\/\n transition: \n transform 0.8s cubic-bezier(0.2, 1, 0.3, 1), \n box-shadow 0.8s cubic-bezier(0.2, 1, 0.3, 1);\n }\n\n \/* Zdj\u0119cie w tle *\/\n .tile-bg {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n background-size: cover;\n background-position: center;\n filter: grayscale(0%) brightness(1); \/* Jasne na start *\/\n transition: \n transform 1.2s cubic-bezier(0.2, 1, 0.3, 1),\n filter 0.8s cubic-bezier(0.2, 1, 0.3, 1);\n }\n\n \/* MOCNIEJSZY HOVER I POWI\u0118KSZENIE *\/\n .grid60-tile:hover {\n transform: scale(1.2) translateZ(80px); \/* Powi\u0119kszenie *\/\n box-shadow: 0 40px 80px rgba(0,0,0,0.4);\n z-index: 100;\n }\n\n \/* PRZYCIEMNIENIE GRAFIKI PO NAJECHANIU *\/\n .grid60-tile:hover .tile-bg {\n transform: scale(1.05); \/* Delikatny zoom zdj\u0119cia *\/\n filter: brightness(0.3); \/* Mocne przyciemnienie *\/\n }\n\n \/* EFEKT PO\u015aWIATY (GODLY GLOW) *\/\n .tile-glow {\n position: absolute;\n width: 600px;\n height: 600px;\n background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0) 70%);\n border-radius: 50%;\n transform: translate(-50%, -50%);\n pointer-events: none;\n opacity: 0;\n transition: opacity 0.4s ease;\n z-index: 2;\n }\n\n .grid60-tile:hover .tile-glow {\n opacity: 1;\n }\n\n \/* TRE\u015a\u0106 - BIA\u0141A *\/\n .grid60-tile-content {\n position: absolute;\n left: 30px;\n right: 30px;\n bottom: 40px;\n opacity: 0;\n transform: translateY(30px);\n transition: all 0.6s cubic-bezier(0.2, 1, 0.3, 1);\n transition-delay: 0.1s;\n pointer-events: none;\n z-index: 3;\n color: #ffffff; \/* Bia\u0142e napisy *\/\n font-family: 'Archivo', sans-serif;\n text-shadow: 0 1px 4px rgba(0,0,0,0.3); \/* Delikatny cie\u0144 dla czytelno\u015bci *\/\n }\n\n .grid60-tile:hover .grid60-tile-content {\n opacity: 1;\n transform: translateY(0);\n }\n\n .grid60-tile-title {\n margin: 0 0 10px 0;\n font-size: 22px;\n font-weight: 700;\n line-height: 1.2;\n text-transform: uppercase;\n letter-spacing: -0.01em;\n }\n\n .grid60-tile-lead {\n margin: 0;\n font-size: 14px;\n font-weight: 400;\n line-height: 1.6;\n opacity: 0.9;\n }\n\n @media (max-width: 767px) {\n .grid60-board {\n grid-template-columns: repeat(20, 280px);\n grid-template-rows: repeat(20, 157.5px); \/* 16:9 dla mobile *\/\n gap: 30px;\n padding: 200px;\n }\n }\n <\/style>\n<\/head>\n<body>\n\n<div class=\"grid60-wrap\">\n <div class=\"grid60-viewport\" id=\"grid60Viewport\">\n <div class=\"grid60-board\" id=\"grid60Board\"><\/div>\n <\/div>\n<\/div>\n\n<script>\n(function(){\n const board = document.getElementById('grid60Board');\n const viewport = document.getElementById('grid60Viewport');\n \n const total = 400; \n let html = '';\n\n for(let i = 0; i < total; i++){\n const imgId = 100 + i; \n html += `\n <div class=\"grid60-tile\">\n <div class=\"tile-bg\" style=\"background-image: url('https:\/\/picsum.photos\/seed\/${imgId}\/640\/360')\"><\/div>\n <div class=\"tile-glow\"><\/div>\n <div class=\"grid60-tile-content\">\n <h3 class=\"grid60-tile-title\">Creative Showcase ${i+1}<\/h3>\n <p class=\"grid60-tile-lead\">This is a showcase of our latest digital exploration. We combine cutting-edge technology with minimalist aesthetics to create unique experiences.<\/p>\n <\/div>\n <\/div>`;\n }\n board.innerHTML = html;\n\n \/\/ --- LOGIKA BEZW\u0141ADNO\u015aCI (INERTIA) ---\n let isDragging = false;\n let startX, startY;\n let scrollX = 0, scrollY = 0;\n let velX = 0, velY = 0;\n let targetX = 0, targetY = 0;\n\n \/\/ Centrowanie na start\n window.addEventListener('load', () => {\n scrollX = (viewport.scrollWidth - window.innerWidth) \/ 2;\n scrollY = (viewport.scrollHeight - window.innerHeight) \/ 2;\n targetX = scrollX;\n targetY = scrollY;\n });\n\n viewport.addEventListener('mousedown', (e) => {\n isDragging = true;\n viewport.classList.add('is-dragging');\n startX = e.pageX;\n startY = e.pageY;\n velX = 0;\n velY = 0;\n });\n\n window.addEventListener('mousemove', (e) => {\n if (!isDragging) return;\n const dx = e.pageX - startX;\n const dy = e.pageY - startY;\n targetX -= dx;\n targetY -= dy;\n startX = e.pageX;\n startY = e.pageY;\n velX = dx;\n velY = dy;\n });\n\n window.addEventListener('mouseup', () => {\n isDragging = false;\n viewport.classList.remove('is-dragging');\n });\n\n function update() {\n if (!isDragging) {\n targetX -= velX;\n targetY -= velY;\n velX *= 0.95; \/\/ Tarcie\n velY *= 0.95;\n }\n\n const maxScrollX = viewport.scrollWidth - window.innerWidth;\n const maxScrollY = viewport.scrollHeight - window.innerHeight;\n \n targetX = Math.max(0, Math.min(targetX, maxScrollX));\n targetY = Math.max(0, Math.min(targetY, maxScrollY));\n\n scrollX += (targetX - scrollX) * 0.1; \/\/ Smoothness\n scrollY += (targetY - scrollY) * 0.1;\n\n viewport.scrollLeft = scrollX;\n viewport.scrollTop = scrollY;\n\n requestAnimationFrame(update);\n }\n update();\n\n \/\/ --- LOGIKA PO\u015aWIATY (GODLY HOVER) ---\n board.addEventListener('mousemove', (e) => {\n const tile = e.target.closest('.grid60-tile');\n if (!tile) return;\n\n const glow = tile.querySelector('.tile-glow');\n const rect = tile.getBoundingClientRect();\n const x = e.clientX - rect.left;\n const y = e.clientY - rect.top;\n\n glow.style.left = `${x}px`;\n glow.style.top = `${y}px`;\n });\n\n})();\n<\/script>\n\n<\/body>\n<\/html>\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\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t\t\t\t<\/div>","protected":false},"excerpt":{"rendered":"<p>3D Rising Grid – White & Minimal<\/p>","protected":false},"author":2,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_canvas","meta":{"footnotes":""},"acf":[],"_links":{"self":[{"href":"https:\/\/www.spectar.pl\/en\/wp-json\/wp\/v2\/pages\/7398"}],"collection":[{"href":"https:\/\/www.spectar.pl\/en\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.spectar.pl\/en\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.spectar.pl\/en\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.spectar.pl\/en\/wp-json\/wp\/v2\/comments?post=7398"}],"version-history":[{"count":49,"href":"https:\/\/www.spectar.pl\/en\/wp-json\/wp\/v2\/pages\/7398\/revisions"}],"predecessor-version":[{"id":7987,"href":"https:\/\/www.spectar.pl\/en\/wp-json\/wp\/v2\/pages\/7398\/revisions\/7987"}],"wp:attachment":[{"href":"https:\/\/www.spectar.pl\/en\/wp-json\/wp\/v2\/media?parent=7398"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}