{"id":1844,"date":"2025-10-22T12:51:28","date_gmt":"2025-10-22T10:51:28","guid":{"rendered":"https:\/\/www.maszkaron.pl\/?page_id=1844"},"modified":"2026-05-07T13:19:38","modified_gmt":"2026-05-07T11:19:38","slug":"nasze-prace-od-projetu-po-finalny-produkt","status":"publish","type":"page","link":"https:\/\/www.maszkaron.pl\/index.php\/nasze-prace-od-projetu-po-finalny-produkt\/","title":{"rendered":"Nasze prace od projetu po finalny produkt"},"content":{"rendered":"\t\t
\n\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
\n\t\t\t\t
\n\t\t\t\t\t\n\n\n \n \n \n Nasze prace od projektu po finalny produkt | Maszkaron<\/title>\n\n <link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\" \/>\n <link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin \/>\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Playfair+Display:ital,wght@0,400;0,600;0,700;1,400&family=Inter:wght@300;400;500;600&display=swap\" rel=\"stylesheet\" \/>\n\n <style>\n :root {\n --cream: #FAF7F2;\n --light-bg: #F2EAE0;\n --dark: #140C04;\n --dark-2: #1e1209;\n --gold: #C4982A;\n --gold-light: #E8C96A;\n --warm: #8B5E3C;\n --text: #2C1810;\n --muted: #6B5040;\n --ease-out: cubic-bezier(0.16, 1, 0.3, 1);\n }\n\n *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }\n html { scroll-behavior: smooth; }\n body {\n font-family: 'Inter', sans-serif;\n background: var(--cream);\n color: var(--text);\n overflow-x: hidden;\n -webkit-font-smoothing: antialiased;\n }\n img { display: block; max-width: 100%; }\n a { color: inherit; text-decoration: none; }\n\n .container { max-width: 1140px; margin: 0 auto; padding: 0 1.5rem; }\n\n .section-label {\n display: inline-block;\n font-size: .7rem;\n font-weight: 700;\n letter-spacing: .24em;\n color: var(--gold);\n text-transform: uppercase;\n margin-bottom: .85rem;\n }\n\n \/* \u2500\u2500 ANIMACJE \u2500\u2500 *\/\n .fade-up { opacity: 0; transform: translateY(36px); transition: opacity .7s var(--ease-out), transform .7s var(--ease-out); }\n .fade-in { opacity: 0; transition: opacity .8s var(--ease-out); }\n .in-view { opacity: 1 !important; transform: none !important; }\n .d1 { transition-delay: .06s; }\n .d2 { transition-delay: .14s; }\n .d3 { transition-delay: .22s; }\n .d4 { transition-delay: .30s; }\n\n \/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n HERO\n \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\n .page-hero {\n position: relative;\n background: var(--dark);\n padding: 9rem 1.5rem 7rem;\n overflow: hidden;\n }\n .hero-bg {\n position: absolute;\n inset: 0;\n background:\n radial-gradient(ellipse 65% 55% at 80% 35%, rgba(139,94,60,.28) 0%, transparent 65%),\n radial-gradient(ellipse 50% 65% at 10% 75%, rgba(196,152,42,.09) 0%, transparent 60%);\n pointer-events: none;\n }\n .hero-grain {\n position: absolute;\n inset: -50%;\n width: 200%; height: 200%;\n background-image: url(\"data:image\/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http:\/\/www.w3.org\/2000\/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'\/%3E%3C\/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='1'\/%3E%3C\/svg%3E\");\n opacity: .035; pointer-events: none;\n }\n \/* dekoracyjne linie w tle *\/\n .hero-lines {\n position: absolute;\n inset: 0;\n background-image: repeating-linear-gradient(\n -55deg, transparent, transparent 60px,\n rgba(196,152,42,.03) 60px, rgba(196,152,42,.03) 61px\n );\n pointer-events: none;\n }\n .page-hero-inner {\n position: relative;\n z-index: 2;\n max-width: 760px;\n }\n .breadcrumb {\n display: flex;\n align-items: center;\n gap: .5rem;\n font-size: .74rem;\n color: rgba(245,239,230,.38);\n letter-spacing: .05em;\n margin-bottom: 2rem;\n }\n .breadcrumb a { transition: color .2s; }\n .breadcrumb a:hover { color: var(--gold); }\n .breadcrumb .sep { color: rgba(245,239,230,.18); }\n\n .page-hero h1 {\n font-family: 'Playfair Display', serif;\n font-size: clamp(2.4rem, 5.5vw, 4.2rem);\n font-weight: 700;\n color: #fff;\n line-height: 1.13;\n margin-bottom: 1.3rem;\n }\n .page-hero h1 em {\n font-style: italic;\n background: linear-gradient(90deg, #C4982A, #E8C96A, #C4982A);\n background-size: 200%;\n -webkit-background-clip: text;\n -webkit-text-fill-color: transparent;\n background-clip: text;\n animation: shimmer 5s linear infinite;\n }\n @keyframes shimmer { to { background-position: 200% center; } }\n\n .page-hero-sub {\n font-size: 1.05rem;\n color: rgba(245,239,230,.58);\n line-height: 1.8;\n max-width: 580px;\n }\n\n .hero-stats {\n display: flex;\n flex-wrap: wrap;\n gap: 2.5rem;\n margin-top: 3rem;\n padding-top: 2.2rem;\n border-top: 1px solid rgba(196,152,42,.14);\n }\n .hero-stat .num {\n font-family: 'Playfair Display', serif;\n font-size: 2rem;\n font-weight: 700;\n color: var(--gold);\n line-height: 1;\n display: block;\n }\n .hero-stat .lbl {\n font-size: .78rem;\n color: rgba(245,239,230,.4);\n margin-top: .25rem;\n display: block;\n }\n\n \/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n FILTR \/ KATEGORIE\n \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\n .filter-bar {\n background: var(--dark-2);\n padding: 1.5rem;\n border-bottom: 1px solid rgba(196,152,42,.1);\n position: sticky;\n top: 0;\n z-index: 100;\n }\n .filter-inner {\n max-width: 1140px;\n margin: 0 auto;\n display: flex;\n align-items: center;\n gap: .65rem;\n flex-wrap: wrap;\n }\n .filter-btn {\n display: inline-flex;\n align-items: center;\n gap: .4rem;\n padding: .4rem .95rem;\n border-radius: 999px;\n font-size: .78rem;\n font-weight: 600;\n letter-spacing: .06em;\n cursor: pointer;\n border: 1px solid rgba(196,152,42,.25);\n background: transparent;\n color: rgba(245,239,230,.5);\n transition: all .22s;\n font-family: 'Inter', sans-serif;\n }\n .filter-btn:hover,\n .filter-btn.active {\n background: rgba(196,152,42,.12);\n border-color: var(--gold);\n color: var(--gold);\n }\n .filter-btn.active { background: rgba(196,152,42,.16); }\n\n \/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n SIATKA PROJEKT\u00d3W\n \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\n .portfolio-section {\n background: var(--cream);\n padding: 5rem 1.5rem 7rem;\n }\n .portfolio-grid {\n display: grid;\n grid-template-columns: repeat(3, 1fr);\n gap: 2rem;\n }\n\n \/* Wyr\u00f3\u017cniona karta (pierwsza \u2014 du\u017ca) *\/\n .project-card {\n background: #fff;\n border-radius: 20px;\n overflow: hidden;\n border: 1px solid rgba(196,152,42,.1);\n display: flex;\n flex-direction: column;\n transition: transform .35s var(--ease-out), box-shadow .35s;\n position: relative;\n }\n .project-card:hover {\n transform: translateY(-6px);\n box-shadow: 0 24px 64px rgba(139,94,60,.14);\n }\n .project-card.featured {\n grid-column: span 2;\n }\n\n \/* Obraz *\/\n .card-img {\n position: relative;\n overflow: hidden;\n background: #1a0d03;\n }\n .project-card.featured .card-img { aspect-ratio: 16\/9; }\n .project-card:not(.featured) .card-img { aspect-ratio: 4\/3; }\n\n .card-img img {\n width: 100%; height: 100%;\n object-fit: cover;\n display: block;\n transition: transform .65s var(--ease-out);\n }\n .project-card:hover .card-img img { transform: scale(1.05); }\n\n .card-img-overlay {\n position: absolute;\n inset: 0;\n background: linear-gradient(to top, rgba(20,12,4,.7) 0%, transparent 55%);\n pointer-events: none;\n }\n\n \/* Badge na obrazku *\/\n .card-badge {\n position: absolute;\n top: 1rem; left: 1rem;\n display: flex;\n gap: .4rem;\n flex-wrap: wrap;\n }\n .card-tag {\n display: inline-block;\n padding: .22rem .62rem;\n border-radius: 999px;\n font-size: .65rem;\n font-weight: 700;\n letter-spacing: .12em;\n text-transform: uppercase;\n background: rgba(20,12,4,.7);\n border: 1px solid rgba(196,152,42,.4);\n color: var(--gold);\n backdrop-filter: blur(6px);\n }\n\n \/* Placeholder karta *\/\n .card-img-placeholder {\n aspect-ratio: 4\/3;\n background: linear-gradient(135deg, #2a1505 0%, #1a0d03 100%);\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n gap: .7rem;\n color: rgba(196,152,42,.2);\n font-size: .72rem;\n letter-spacing: .1em;\n text-transform: uppercase;\n }\n .card-img-placeholder svg { width: 36px; height: 36px; }\n\n \/* Tre\u015b\u0107 karty *\/\n .card-body {\n padding: 1.6rem 1.75rem 2rem;\n display: flex;\n flex-direction: column;\n flex: 1;\n }\n .card-meta {\n font-size: .72rem;\n font-weight: 600;\n letter-spacing: .14em;\n color: var(--gold);\n text-transform: uppercase;\n margin-bottom: .6rem;\n }\n .card-title {\n font-family: 'Playfair Display', serif;\n font-size: 1.22rem;\n font-weight: 700;\n line-height: 1.3;\n color: var(--text);\n margin-bottom: .75rem;\n }\n .project-card.featured .card-title {\n font-size: 1.55rem;\n }\n .card-desc {\n font-size: .88rem;\n color: var(--muted);\n line-height: 1.8;\n flex: 1;\n margin-bottom: 1.4rem;\n }\n .card-footer {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: 1rem;\n padding-top: 1.1rem;\n border-top: 1px solid rgba(196,152,42,.1);\n }\n .card-specs {\n display: flex;\n gap: 1rem;\n flex-wrap: wrap;\n }\n .card-spec {\n font-size: .75rem;\n color: var(--muted);\n }\n .card-spec strong {\n display: block;\n font-size: .68rem;\n font-weight: 700;\n letter-spacing: .12em;\n text-transform: uppercase;\n color: rgba(196,152,42,.6);\n margin-bottom: .15rem;\n }\n\n .card-link {\n display: inline-flex;\n align-items: center;\n gap: .4rem;\n font-size: .82rem;\n font-weight: 600;\n color: var(--gold);\n letter-spacing: .04em;\n white-space: nowrap;\n transition: gap .2s;\n }\n .card-link:hover { gap: .7rem; }\n .card-link svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 2; }\n\n \/* Karta \u201eWkr\u00f3tce\" *\/\n .project-card.soon {\n border-style: dashed;\n border-color: rgba(196,152,42,.15);\n background: rgba(196,152,42,.02);\n }\n .project-card.soon:hover { transform: none; box-shadow: none; }\n .soon-inner {\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n text-align: center;\n padding: 3rem 1.75rem;\n gap: 1rem;\n flex: 1;\n min-height: 280px;\n }\n .soon-icon {\n width: 52px; height: 52px;\n border-radius: 50%;\n background: rgba(196,152,42,.08);\n border: 1px dashed rgba(196,152,42,.3);\n display: flex; align-items: center; justify-content: center;\n }\n .soon-icon svg { width: 22px; height: 22px; stroke: rgba(196,152,42,.4); fill: none; stroke-width: 1.5; }\n .soon-label {\n font-size: .72rem;\n font-weight: 700;\n letter-spacing: .2em;\n text-transform: uppercase;\n color: rgba(196,152,42,.4);\n }\n .soon-text {\n font-size: .85rem;\n color: var(--muted);\n line-height: 1.65;\n opacity: .6;\n }\n\n \/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n PROCES \u2014 pasek\n \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\n .process-strip {\n background: var(--dark-2);\n padding: 4.5rem 1.5rem;\n border-top: 1px solid rgba(196,152,42,.1);\n border-bottom: 1px solid rgba(196,152,42,.08);\n }\n .process-strip-inner {\n max-width: 1100px;\n margin: 0 auto;\n }\n .strip-head {\n text-align: center;\n margin-bottom: 3rem;\n }\n .strip-head h2 {\n font-family: 'Playfair Display', serif;\n font-size: clamp(1.6rem, 3vw, 2.3rem);\n color: var(--cream);\n margin-top: .4rem;\n }\n .steps-row {\n display: grid;\n grid-template-columns: repeat(4, 1fr);\n gap: 1rem;\n position: relative;\n }\n .steps-row::before {\n content: '';\n position: absolute;\n top: 22px;\n left: calc(12.5% + 22px);\n right: calc(12.5% + 22px);\n height: 1px;\n background: linear-gradient(90deg, rgba(196,152,42,.5), rgba(196,152,42,.08));\n }\n .strip-step {\n text-align: center;\n position: relative;\n }\n .strip-step-dot {\n width: 44px; height: 44px;\n border-radius: 50%;\n background: var(--dark);\n border: 2px solid var(--gold);\n color: var(--gold);\n font-family: 'Playfair Display', serif;\n font-size: 1.1rem;\n font-weight: 700;\n display: flex; align-items: center; justify-content: center;\n margin: 0 auto 1rem;\n transition: background .3s;\n }\n .strip-step:hover .strip-step-dot { background: var(--gold); color: var(--dark); }\n .strip-step h4 {\n font-family: 'Playfair Display', serif;\n font-size: .95rem;\n font-weight: 600;\n color: var(--cream);\n margin-bottom: .3rem;\n }\n .strip-step p {\n font-size: .8rem;\n color: rgba(245,239,230,.4);\n line-height: 1.6;\n }\n\n \/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n CTA\n \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\n .cta-section {\n background: var(--light-bg);\n padding: 6rem 1.5rem;\n text-align: center;\n position: relative;\n overflow: hidden;\n }\n .cta-section::before {\n content: '';\n position: absolute;\n top: -60px; left: 50%;\n transform: translateX(-50%);\n width: 600px; height: 600px;\n border-radius: 50%;\n background: radial-gradient(circle, rgba(196,152,42,.07) 0%, transparent 70%);\n pointer-events: none;\n }\n .cta-section h2 {\n font-family: 'Playfair Display', serif;\n font-size: clamp(1.8rem, 3.5vw, 2.8rem);\n font-weight: 700;\n color: var(--text);\n line-height: 1.2;\n margin-bottom: .9rem;\n position: relative;\n }\n .cta-section h2 em { font-style: italic; color: var(--gold); }\n .cta-section p {\n font-size: .97rem;\n color: var(--muted);\n line-height: 1.75;\n max-width: 520px;\n margin: 0 auto 2.2rem;\n position: relative;\n }\n .cta-btns {\n display: flex;\n gap: .9rem;\n justify-content: center;\n flex-wrap: wrap;\n position: relative;\n }\n .btn-gold {\n display: inline-flex; align-items: center; gap: .5rem;\n padding: .85rem 2rem;\n background: var(--gold);\n color: var(--dark);\n font-weight: 600; font-size: .88rem; letter-spacing: .04em;\n border-radius: 4px; border: none; cursor: pointer;\n transition: background .25s, transform .25s, box-shadow .25s;\n }\n .btn-gold:hover { background: var(--gold-light); transform: translateY(-2px); box-shadow: 0 10px 32px rgba(196,152,42,.35); }\n .btn-outline-dark {\n display: inline-flex; align-items: center; gap: .5rem;\n padding: .85rem 2rem;\n border: 1.5px solid rgba(196,152,42,.35);\n color: var(--gold); font-weight: 500; font-size: .88rem;\n border-radius: 4px; background: none; cursor: pointer;\n transition: all .25s;\n }\n .btn-outline-dark:hover { background: rgba(196,152,42,.08); border-color: var(--gold); }\n\n \/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n RESPONSYWNO\u015a\u0106\n \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\n @media (max-width: 960px) {\n .portfolio-grid { grid-template-columns: 1fr 1fr; }\n .project-card.featured { grid-column: span 2; }\n .steps-row { grid-template-columns: 1fr 1fr; }\n .steps-row::before { display: none; }\n }\n @media (max-width: 640px) {\n .page-hero { padding: 7rem 1.25rem 5rem; }\n .portfolio-section { padding: 3.5rem 1.25rem 5rem; }\n .portfolio-grid { grid-template-columns: 1fr; gap: 1.5rem; }\n .project-card.featured { grid-column: span 1; }\n .project-card.featured .card-img { aspect-ratio: 4\/3; }\n .hero-stats { gap: 1.5rem; }\n .steps-row { grid-template-columns: 1fr; }\n .process-strip { padding: 3.5rem 1.25rem; }\n }\n @media (max-width: 420px) {\n .cta-btns { flex-direction: column; align-items: stretch; }\n .cta-btns .btn-gold,\n .cta-btns .btn-outline-dark { justify-content: center; }\n }\n <\/style>\n<\/head>\n<body>\n\n <!-- \u25bc HEADER \u2014 wstaw tu zawarto\u015b\u0107 header.html \u25bc -->\n\n\n <!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n HERO\n \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\n <section class=\"page-hero\">\n <div class=\"hero-bg\"><\/div>\n <div class=\"hero-grain\"><\/div>\n <div class=\"hero-lines\"><\/div>\n <div class=\"page-hero-inner container\">\n\n <nav class=\"breadcrumb\" aria-label=\"\u015acie\u017cka nawigacji\">\n <a href=\"https:\/\/www.maszkaron.pl\/\">Maszkaron<\/a>\n <span class=\"sep\">\u203a<\/span>\n <span style=\"color:rgba(245,239,230,.6);\">Nasze prace<\/span>\n <\/nav>\n\n <span class=\"section-label\">Portfolio realizacji<\/span>\n <h1>Nasze prace<br>od projektu po<br><em>finalny produkt<\/em><\/h1>\n <p class=\"page-hero-sub\">\n Ka\u017cda realizacja zaczyna si\u0119 od projektu 3D i ko\u0144czy na gotowym elemencie w drewnie, MDF lub sklejce.\n Pokazujemy ca\u0142y proces \u2014 od modelu do wyko\u0144czenia.\n <\/p>\n\n <div class=\"hero-stats\">\n <div class=\"hero-stat\">\n <span class=\"num\">500+<\/span>\n <span class=\"lbl\">zrealizowanych projekt\u00f3w<\/span>\n <\/div>\n <div class=\"hero-stat\">\n <span class=\"num\">15<\/span>\n <span class=\"lbl\">lat do\u015bwiadczenia<\/span>\n <\/div>\n <div class=\"hero-stat\">\n <span class=\"num\">12<\/span>\n <span class=\"lbl\">kraj\u00f3w klient\u00f3w<\/span>\n <\/div>\n <\/div>\n\n <\/div>\n <\/section>\n\n\n <!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n FILTR KATEGORII\n \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\n <div class=\"filter-bar\">\n <div class=\"filter-inner\">\n <button class=\"filter-btn active\" data-filter=\"all\">Wszystkie<\/button>\n <button class=\"filter-btn\" data-filter=\"rzezby\">Rze\u017aby CNC<\/button>\n <button class=\"filter-btn\" data-filter=\"dekoracje\">Dekoracje<\/button>\n <button class=\"filter-btn\" data-filter=\"sakralne\">Sakralne<\/button>\n <button class=\"filter-btn\" data-filter=\"architektura\">Architektura<\/button>\n <\/div>\n <\/div>\n\n\n <!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n SIATKA PROJEKT\u00d3W\n \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\n <section class=\"portfolio-section\">\n <div class=\"container\">\n <div class=\"portfolio-grid\">\n\n <!-- \u2500\u2500\u2500 PROJEKT 1 \u2014 wyr\u00f3\u017cniony \u2500\u2500\u2500 -->\n <article class=\"project-card featured fade-in d1\" data-categories=\"rzezby sakralne\">\n <div class=\"card-img\">\n <img decoding=\"async\"\n src=\"https:\/\/www.maszkaron.pl\/wp-content\/uploads\/2026\/01\/prac-sw.png\"\n alt=\"Du\u017ce rze\u017aby CNC \u2013 \u015aw. Jan Pawe\u0142 II i \u015aw. Faustyna\"\n loading=\"eager\"\n \/>\n <div class=\"card-img-overlay\"><\/div>\n <div class=\"card-badge\">\n <span class=\"card-tag\">Rze\u017aby CNC<\/span>\n <span class=\"card-tag\">Sakralne<\/span>\n <span class=\"card-tag\">Drewno lipowe<\/span>\n <\/div>\n <\/div>\n <div class=\"card-body\">\n <div class=\"card-meta\">Frezowanie 3D CNC \u00b7 Projekt 3D \u00b7 Skan 3D<\/div>\n <h2 class=\"card-title\">\n Du\u017ce rze\u017aby CNC w drewnie:<br>\u015aw. Jan Pawe\u0142 II i \u015aw. Faustyna\n <\/h2>\n <p class=\"card-desc\">\n Dwie figury sakralne w drewnie lipowym, ok. 130 cm, wykonane na zam\u00f3wienie ko\u015bcio\u0142a.\n Projekt 3D, digitalizacja detali, podzia\u0142 technologiczny, frezowanie 3D CNC,\n klejenie warstwowe z pustk\u0105 wewn\u0119trzn\u0105. Punkt odniesienia: istniej\u0105ca rze\u017aba \u015aw. Antoniego.\n <\/p>\n <div class=\"card-footer\">\n <div class=\"card-specs\">\n <div class=\"card-spec\">\n <strong>Materia\u0142<\/strong>\n Drewno lipowe\n <\/div>\n <div class=\"card-spec\">\n <strong>Wysoko\u015b\u0107<\/strong>\n ok. 130 cm\n <\/div>\n <div class=\"card-spec\">\n <strong>Wyko\u0144czenie<\/strong>\n Polichromia\n <\/div>\n <\/div>\n <a href=\"https:\/\/www.maszkaron.pl\/index.php\/duze-rzezby-cnc-w-drewnie-sw-jan-pawel-ii-i-sw-faustyna\/\" class=\"card-link\">\n Czytaj wi\u0119cej\n <svg viewBox=\"0 0 24 24\"><path d=\"M5 12h14\"\/><path d=\"m12 5 7 7-7 7\"\/><\/svg>\n <\/a>\n <\/div>\n <\/div>\n <\/article>\n\n <!-- \u2500\u2500\u2500 PROJEKT 2 \u2014 placeholder \u2500\u2500\u2500 -->\n <article class=\"project-card soon fade-in d2\" data-categories=\"\">\n <div class=\"soon-inner\">\n <div class=\"soon-icon\">\n <svg viewBox=\"0 0 24 24\"><circle cx=\"12\" cy=\"12\" r=\"10\"\/><path d=\"M12 8v4l3 3\"\/><\/svg>\n <\/div>\n <div class=\"soon-label\">Wkr\u00f3tce<\/div>\n <p class=\"soon-text\">Kolejna realizacja jest w przygotowaniu.<br>Zagl\u0105daj regularnie.<\/p>\n <\/div>\n <\/article>\n\n <!-- \u2500\u2500\u2500 PROJEKT 3 \u2014 placeholder \u2500\u2500\u2500 -->\n <article class=\"project-card soon fade-in d3\" data-categories=\"\">\n <div class=\"soon-inner\">\n <div class=\"soon-icon\">\n <svg viewBox=\"0 0 24 24\"><circle cx=\"12\" cy=\"12\" r=\"10\"\/><path d=\"M12 8v4l3 3\"\/><\/svg>\n <\/div>\n <div class=\"soon-label\">Wkr\u00f3tce<\/div>\n <p class=\"soon-text\">Kolejna realizacja jest w przygotowaniu.<br>Zagl\u0105daj regularnie.<\/p>\n <\/div>\n <\/article>\n\n <!-- \u2500\u2500\u2500 PROJEKT 4 \u2014 placeholder \u2500\u2500\u2500 -->\n <article class=\"project-card soon fade-in d4\" data-categories=\"\">\n <div class=\"soon-inner\">\n <div class=\"soon-icon\">\n <svg viewBox=\"0 0 24 24\"><circle cx=\"12\" cy=\"12\" r=\"10\"\/><path d=\"M12 8v4l3 3\"\/><\/svg>\n <\/div>\n <div class=\"soon-label\">Wkr\u00f3tce<\/div>\n <p class=\"soon-text\">Kolejna realizacja jest w przygotowaniu.<br>Zagl\u0105daj regularnie.<\/p>\n <\/div>\n <\/article>\n\n <\/div>\n <\/div>\n <\/section>\n\n\n <!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n PROCES \u2014 pasek\n \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\n <section class=\"process-strip\">\n <div class=\"process-strip-inner\">\n <div class=\"strip-head fade-up\">\n <span class=\"section-label\">Jak pracujemy<\/span>\n <h2>Od projektu do gotowego elementu<\/h2>\n <\/div>\n <div class=\"steps-row\">\n <div class=\"strip-step fade-up d1\">\n <div class=\"strip-step-dot\">1<\/div>\n <h4>Projekt 3D<\/h4>\n <p>Kontrola proporcji, bry\u0142y i \u015bwiat\u0142ocienia zanim wejdziemy w materia\u0142<\/p>\n <\/div>\n <div class=\"strip-step fade-up d2\">\n <div class=\"strip-step-dot\">2<\/div>\n <h4>Technologia CNC<\/h4>\n <p>Podzia\u0142 na elementy, orientacje, strategie \u2014 planowane od pocz\u0105tku<\/p>\n <\/div>\n <div class=\"strip-step fade-up d3\">\n <div class=\"strip-step-dot\">3<\/div>\n <h4>Frezowanie 3D CNC<\/h4>\n <p>Precyzyjna obr\u00f3bka bry\u0142y i g\u0142\u0119bokich detali w drewnie, MDF lub sklejce<\/p>\n <\/div>\n <div class=\"strip-step fade-up d4\">\n <div class=\"strip-step-dot\">4<\/div>\n <h4>Monta\u017c i wyko\u0144czenie<\/h4>\n <p>Stabilna, trwa\u0142a ca\u0142o\u015b\u0107 gotowa do odbioru lub dostawy<\/p>\n <\/div>\n <\/div>\n <\/div>\n <\/section>\n\n\n <!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n CTA\n \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\n <section class=\"cta-section\">\n <div class=\"fade-up\">\n <h2>Masz projekt do <em>wyceny?<\/em><\/h2>\n <p>\n Pracujemy z architektami, projektantami, ko\u015bcio\u0142ami i klientami indywidualnymi\n z ca\u0142ej Polski i Europy. Bezp\u0142atna wycena dla ka\u017cdego zlecenia.\n <\/p>\n <div class=\"cta-btns\">\n <a href=\"https:\/\/www.maszkaron.pl\/index.php\/kontakt\/\" class=\"btn-gold\">\n Bezp\u0142atna wycena\n <svg width=\"15\" height=\"15\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M5 12h14\"\/><path d=\"m12 5 7 7-7 7\"\/><\/svg>\n <\/a>\n <a href=\"https:\/\/www.maszkaron.pl\/index.php\/kontakt\/\" class=\"btn-outline-dark\">\n Napisz do nas\n <\/a>\n <\/div>\n <\/div>\n <\/section>\n\n\n <!-- \u25bc FOOTER \u2014 wstaw tu zawarto\u015b\u0107 footer.html \u25bc -->\n\n\n <script>\n \/* \u2500\u2500 SCROLL REVEAL \u2500\u2500 *\/\n const revEls = document.querySelectorAll('.fade-up, .fade-in');\n const revObs = new IntersectionObserver(entries => {\n entries.forEach(e => {\n if (e.isIntersecting) { e.target.classList.add('in-view'); revObs.unobserve(e.target); }\n });\n }, { threshold: 0.1, rootMargin: '0px 0px -40px 0px' });\n revEls.forEach(el => revObs.observe(el));\n\n \/* \u2500\u2500 FILTR KATEGORII \u2500\u2500 *\/\n const filterBtns = document.querySelectorAll('.filter-btn');\n const cards = document.querySelectorAll('.project-card[data-categories]');\n\n filterBtns.forEach(btn => {\n btn.addEventListener('click', () => {\n filterBtns.forEach(b => b.classList.remove('active'));\n btn.classList.add('active');\n const filter = btn.dataset.filter;\n cards.forEach(card => {\n const cats = card.dataset.categories || '';\n const show = filter === 'all' || cats.includes(filter);\n card.style.display = show ? '' : 'none';\n });\n });\n });\n <\/script>\n\n<\/body>\n<\/html>\n\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>Nasze prace od projektu po finalny produkt | Maszkaron Maszkaron \u203a Nasze prace Portfolio realizacji Nasze praceod projektu pofinalny produkt Ka\u017cda realizacja zaczyna si\u0119 od projektu 3D i ko\u0144czy na gotowym elemencie w drewnie, MDF lub sklejce. Pokazujemy ca\u0142y proces \u2014 od modelu do wyko\u0144czenia. 500+ zrealizowanych projekt\u00f3w 15 lat do\u015bwiadczenia 12 kraj\u00f3w klient\u00f3w Wszystkie […]<\/p>\n","protected":false},"author":2,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"footnotes":""},"class_list":["post-1844","page","type-page","status-publish","hentry"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.maszkaron.pl\/index.php\/wp-json\/wp\/v2\/pages\/1844","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.maszkaron.pl\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.maszkaron.pl\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.maszkaron.pl\/index.php\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.maszkaron.pl\/index.php\/wp-json\/wp\/v2\/comments?post=1844"}],"version-history":[{"count":22,"href":"https:\/\/www.maszkaron.pl\/index.php\/wp-json\/wp\/v2\/pages\/1844\/revisions"}],"predecessor-version":[{"id":2147,"href":"https:\/\/www.maszkaron.pl\/index.php\/wp-json\/wp\/v2\/pages\/1844\/revisions\/2147"}],"wp:attachment":[{"href":"https:\/\/www.maszkaron.pl\/index.php\/wp-json\/wp\/v2\/media?parent=1844"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}