{"id":12,"date":"2026-01-29T11:59:08","date_gmt":"2026-01-29T10:59:08","guid":{"rendered":"https:\/\/montaview.pl\/?page_id=12"},"modified":"2026-01-29T12:30:00","modified_gmt":"2026-01-29T11:30:00","slug":"montaview","status":"publish","type":"page","link":"https:\/\/montaview.pl\/","title":{"rendered":"Montaview"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"12\" class=\"elementor elementor-12\">\n\t\t\t\t<div class=\"elementor-element elementor-element-23d5717 e-con-full e-flex e-con e-parent\" data-id=\"23d5717\" data-element_type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-c21ecbd elementor-widget elementor-widget-html\" data-id=\"c21ecbd\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!DOCTYPE html>\n<html lang=\"pl\">\n<head>\n    <meta charset=\"UTF-8\">\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n    <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\n    <script src=\"https:\/\/unpkg.com\/lucide@latest\"><\/script>\n    <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Playfair+Display:ital,wght@0,400;0,700;1,400&family=Montserrat:wght@300;400;700&display=swap\" rel=\"stylesheet\">\n    <style>\n        body, html {\n            margin: 0;\n            padding: 0;\n            overflow: hidden;\n            background-color: #0c0a09;\n            width: 100%;\n            height: 100%;\n        }\n        .font-serif { font-family: 'Playfair Display', serif; }\n        .font-sans { font-family: 'Montserrat', sans-serif; }\n        \n        #montea-hero {\n            position: relative;\n            width: 100%;\n            height: 100vh;\n            height: 100svh;\n            overflow: hidden;\n            touch-action: none;\n        }\n\n        \/* Stylizacja Logo przez CSS dla pe\u0142nej kontroli *\/\n        .nav-logo {\n            height: 40px !important; \/* Powi\u0119kszone 2x z 20px na mobilce *\/\n            width: auto;\n            transition: height 0.3s ease;\n        }\n\n        @media (min-width: 1024px) {\n            #montea-hero { cursor: none; }\n            .nav-logo {\n                height: 44px !important; \/* Desktop zostaje na poziomie 44px *\/\n            }\n        }\n\n        .bg-layer {\n            position: absolute;\n            inset: -10%;\n            background-size: cover;\n            background-position: center;\n            will-change: transform, clip-path;\n        }\n\n        #base-layer {\n            background-image: url('http:\/\/montaview.pl\/wp-content\/uploads\/2026\/01\/Gemini_Generated_Image_ip2otkip2otkip2o-scaled.jpeg');\n            filter: blur(20px) brightness(0.4);\n            z-index: 1;\n        }\n\n        #reveal-layer {\n            background-image: url('http:\/\/montaview.pl\/wp-content\/uploads\/2026\/01\/Gemini_Generated_Image_ip2otkip2otkip2o-scaled.jpeg');\n            z-index: 2;\n            clip-path: circle(0px at -1000px -1000px);\n            -webkit-clip-path: circle(0px at -1000px -1000px);\n        }\n\n        #mouse-circle {\n            position: absolute;\n            width: 300px;\n            height: 300px;\n            border: 1px solid rgba(255, 255, 255, 0.1);\n            border-radius: 50%;\n            pointer-events: none;\n            z-index: 20;\n            mix-blend-mode: screen;\n            background: radial-gradient(circle, rgba(255, 255, 255, 0.05) 0%, transparent 70%);\n            transform: translate(-50%, -50%);\n            display: none;\n        }\n\n        @media (min-width: 768px) {\n            #mouse-circle { width: 440px; height: 440px; }\n        }\n\n        #snow-canvas {\n            position: absolute;\n            inset: 0;\n            z-index: 30;\n            pointer-events: none;\n        }\n\n        .content-layer {\n            position: relative;\n            z-index: 40;\n            pointer-events: none;\n            display: flex;\n            flex-direction: column;\n            justify-content: center;\n            align-items: center;\n            height: 100%;\n            padding: 0 1.5rem;\n        }\n\n        .pointer-events-auto {\n            pointer-events: auto;\n        }\n\n        .text-shadow-premium {\n            text-shadow: 0 2px 10px rgba(0,0,0,0.5);\n        }\n    <\/style>\n<\/head>\n<body>\n\n<section id=\"montea-hero\" class=\"font-serif\">\n    <!-- 1. Warstwy t\u0142a -->\n    <div id=\"base-layer\" class=\"bg-layer\"><\/div>\n    <div id=\"reveal-layer\" class=\"bg-layer\">\n        <div class=\"absolute inset-0 bg-black\/10\"><\/div>\n    <\/div>\n\n    <!-- 2. Kursor \/ \u015awiat\u0142o -->\n    <div id=\"mouse-circle\"><\/div>\n\n    <!-- 3. \u015anieg -->\n    <canvas id=\"snow-canvas\"><\/canvas>\n\n    <!-- 4. Nawigacja -->\n    <nav class=\"absolute top-0 w-full z-50 flex justify-between items-center px-6 md:px-12 py-6 md:py-10\">\n        <div class=\"flex items-center\">\n            <!-- Logo kontrolowane przez klas\u0119 .nav-logo w CSS -->\n            <img decoding=\"async\" src=\"http:\/\/montaview.pl\/wp-content\/uploads\/2026\/01\/LogoWhite.png\" alt=\"Montea\" class=\"nav-logo object-contain\">\n        <\/div>\n        \n        <div class=\"hidden lg:flex space-x-12 text-white\/70 text-[10px] uppercase tracking-[0.4em] font-light font-sans\">\n            <a href=\"#\" class=\"hover:text-white transition-colors\">O nas<\/a>\n            <a href=\"#\" class=\"hover:text-white transition-colors\">Inwestycja<\/a>\n            <a href=\"#\" class=\"hover:text-white transition-colors\">Galeria<\/a>\n            <a href=\"#\" class=\"hover:text-white transition-colors\">Kontakt<\/a>\n        <\/div>\n\n        <div class=\"flex items-center gap-4 md:gap-6 text-white\/60\">\n            <i data-lucide=\"instagram\" class=\"hover:text-white cursor-pointer transition-colors w-5 h-5\"><\/i>\n            <button class=\"border border-white\/10 p-2 hover:bg-white hover:text-black transition-all\">\n                <i data-lucide=\"menu\" class=\"w-5 h-5\"><\/i>\n            <\/button>\n        <\/div>\n    <\/nav>\n\n    <!-- 5. Tre\u015b\u0107 g\u0142\u00f3wna -->\n    <div class=\"content-layer text-center\">\n        <div class=\"max-w-4xl w-full\">\n            <div class=\"flex flex-col items-center mb-6 md:mb-8\">\n                <span class=\"text-white\/90 uppercase tracking-[0.6em] md:tracking-[0.8em] text-[10px] md:text-[12px] font-bold mb-3 md:mb-4 font-sans text-shadow-premium\">\n                    MONTEA\n                <\/span>\n                <div class=\"w-12 md:w-16 h-px bg-white\/30\"><\/div>\n            <\/div>\n            \n            <div class=\"space-y-4 md:space-y-6\">\n                <h1 class=\"text-3xl sm:text-4xl md:text-7xl text-white font-light tracking-tight leading-[1.1] text-shadow-premium\">\n                    Inwestycja, kt\u00f3ra oddycha g\u00f3rskim spokojem\n                <\/h1>\n                <p class=\"text-white\/60 text-xs md:text-base font-light tracking-[0.05em] italic max-w-2xl mx-auto leading-relaxed\">\n                    delikatna, \u201ealpejska\u201d elegancja z w\u0142osko-francuskim vibe\u2019em.\n                <\/p>\n            <\/div>\n            \n            <div class=\"mt-10 md:mt-12 flex flex-col sm:flex-row gap-4 justify-center items-center uppercase tracking-[0.2em] md:tracking-[0.3em] text-[10px] font-sans\">\n                <button class=\"w-full sm:w-auto bg-white\/95 text-black px-10 md:px-16 py-4 hover:bg-white transition-colors pointer-events-auto shadow-2xl font-bold\">\n                    Zapytaj o szczeg\u00f3\u0142y\n                <\/button>\n                <button class=\"w-full sm:w-auto border border-white\/30 text-white px-10 md:px-16 py-4 hover:bg-white\/10 transition-colors backdrop-blur-md pointer-events-auto\">\n                    Ods\u0142o\u0144\n                <\/button>\n            <\/div>\n        <\/div>\n    <\/div>\n\n    <!-- 6. Stopka \/ Info -->\n    <div class=\"absolute bottom-6 md:bottom-12 w-full z-50 px-6 md:px-12 flex flex-row justify-between items-end text-white\/40 text-[8px] md:text-[9px] uppercase tracking-[0.3em] font-light font-sans\">\n        <div class=\"flex items-center gap-2 md:gap-3\">\n            <i data-lucide=\"phone\" class=\"w-3 h-3 md:w-3.5 md:h-3.5\"><\/i>\n            <span class=\"hover:text-white transition-colors pointer-events-auto\">+48 733 003 652<\/span>\n        <\/div>\n        \n        <div class=\"hidden sm:flex flex-col items-center opacity-40 animate-pulse\">\n            <span class=\"mb-2\">Odkryj<\/span>\n            <i data-lucide=\"chevron-down\" class=\"w-4 h-4\"><\/i>\n        <\/div>\n\n        <div class=\"text-right\">\n            Tatry 2026\n        <\/div>\n    <\/div>\n\n    <!-- Gradientowe nak\u0142adki dla lepszego kontrastu -->\n    <div class=\"absolute inset-0 pointer-events-none bg-gradient-to-b from-black\/40 via-transparent to-black\/40 z-10\"><\/div>\n<\/section>\n\n<script>\n    lucide.createIcons();\n\n    const hero = document.getElementById('montea-hero');\n    const canvas = document.getElementById('snow-canvas');\n    const revealLayer = document.getElementById('reveal-layer');\n    const baseLayer = document.getElementById('base-layer');\n    const mouseCircle = document.getElementById('mouse-circle');\n    const ctx = canvas.getContext('2d');\n\n    let mouseX = -1000;\n    let mouseY = -1000;\n    let isMobile = window.innerWidth < 1024;\n\n    function resize() {\n        canvas.width = window.innerWidth;\n        canvas.height = window.innerHeight;\n        isMobile = window.innerWidth < 1024;\n    }\n    window.addEventListener('resize', resize);\n    resize();\n\n    function updatePosition(x, y) {\n        mouseX = x;\n        mouseY = y;\n\n        const radius = isMobile ? 150 : 220;\n\n        revealLayer.style.clipPath = `circle(${radius}px at ${mouseX}px ${mouseY}px)`;\n        revealLayer.style.webkitClipPath = `circle(${radius}px at ${mouseX}px ${mouseY}px)`;\n\n        mouseCircle.style.display = 'block';\n        mouseCircle.style.left = `${mouseX}px`;\n        mouseCircle.style.top = `${mouseY}px`;\n        mouseCircle.style.width = `${radius * 2}px`;\n        mouseCircle.style.height = `${radius * 2}px`;\n\n        const px = (mouseX - window.innerWidth \/ 2) * 0.005;\n        const py = (mouseY - window.innerHeight \/ 2) * 0.005;\n        revealLayer.style.transform = `translate(${px}px, ${py}px) scale(1.1)`;\n        baseLayer.style.transform = `translate(${-px}px, ${-py}px) scale(1.1)`;\n    }\n\n    hero.addEventListener('mousemove', (e) => {\n        const rect = hero.getBoundingClientRect();\n        updatePosition(e.clientX - rect.left, e.clientY - rect.top);\n    });\n\n    hero.addEventListener('touchstart', (e) => {\n        const rect = hero.getBoundingClientRect();\n        const touch = e.touches[0];\n        updatePosition(touch.clientX - rect.left, touch.clientY - rect.top);\n    }, { passive: true });\n\n    hero.addEventListener('touchmove', (e) => {\n        const rect = hero.getBoundingClientRect();\n        const touch = e.touches[0];\n        updatePosition(touch.clientX - rect.left, touch.clientY - touch.top);\n    }, { passive: true });\n\n    const particles = [];\n    const particleCount = isMobile ? 60 : 100;\n\n    class Snowflake {\n        constructor() { this.reset(); }\n        reset() {\n            this.x = Math.random() * canvas.width;\n            this.y = Math.random() * canvas.height;\n            this.radius = Math.random() * (isMobile ? 1 : 1.2) + 0.4;\n            this.speedX = Math.random() * 0.2 - 0.1;\n            this.speedY = Math.random() * 0.3 + 0.1;\n            this.opacity = Math.random() * 0.4 + 0.2;\n            this.vx = 0;\n            this.vy = 0;\n        }\n        update() {\n            this.y += this.speedY + this.vy;\n            this.x += this.speedX + this.vx;\n\n            const dx = mouseX - this.x;\n            const dy = mouseY - this.y;\n            const distance = Math.sqrt(dx * dx + dy * dy);\n            const radius = isMobile ? 150 : 220;\n\n            if (distance < radius) {\n                const force = (radius - distance) \/ radius;\n                this.vx -= dx * force * 0.004;\n                this.vy -= dy * force * 0.004;\n            }\n            this.vx *= 0.96;\n            this.vy *= 0.96;\n\n            if (this.y > canvas.height) {\n                this.y = -10;\n                this.x = Math.random() * canvas.width;\n            }\n        }\n        draw() {\n            ctx.beginPath();\n            ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2);\n            ctx.fillStyle = `rgba(255, 255, 255, ${this.opacity})`;\n            ctx.fill();\n        }\n    }\n\n    for (let i = 0; i < particleCount; i++) particles.push(new Snowflake());\n\n    function animate() {\n        ctx.clearRect(0, 0, canvas.width, canvas.height);\n        particles.forEach(p => { p.update(); p.draw(); });\n        requestAnimationFrame(animate);\n    }\n    animate();\n<\/script>\n\n<\/body>\n<\/html>\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>O nas Inwestycja Galeria Kontakt MONTEA Inwestycja, kt\u00f3ra oddycha g\u00f3rskim spokojem delikatna, \u201ealpejska\u201d elegancja z w\u0142osko-francuskim vibe\u2019em. Zapytaj o szczeg\u00f3\u0142y Ods\u0142o\u0144 +48 733 003 652 Odkryj Tatry 2026<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_canvas","meta":{"footnotes":""},"class_list":["post-12","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/montaview.pl\/index.php?rest_route=\/wp\/v2\/pages\/12","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/montaview.pl\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/montaview.pl\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/montaview.pl\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/montaview.pl\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=12"}],"version-history":[{"count":16,"href":"https:\/\/montaview.pl\/index.php?rest_route=\/wp\/v2\/pages\/12\/revisions"}],"predecessor-version":[{"id":30,"href":"https:\/\/montaview.pl\/index.php?rest_route=\/wp\/v2\/pages\/12\/revisions\/30"}],"wp:attachment":[{"href":"https:\/\/montaview.pl\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=12"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}