/* ========================================================================== * Złoty Pałac — warstwa pomostowa Elementor ↔ arkusz produkcyjny (Tailwind) * * Serwis żyje w dwóch trybach naraz: * * TRYB HTML — dokument to jeden widget HTML z markupem eksportu. * Kontenery Elementora mają zniknąć z układu. * TRYB NATYWNY — dokument to drzewo kontenerów i widgetów, a klasy Tailwinda * siedzą w polu „CSS Classes". Kontenery SĄ divami eksportu, * więc muszą zostać widoczne. Rozpoznaje je klasa `zp-el`. * * Kolejność ładowania: frontend.min.css → post-N.css → base-*.css → zp.css → * ten plik. Przy remisie specyficzności wygrywa więc to, co tutaj. * ========================================================================== */ /* -------------------------------------------------------------------------- * 1. TRYB HTML — kontenery Elementora znikają z układu * * UWAGA na specyficzność: Elementor ustawia display/max-width regułą * `.e-con > .e-con-inner` (0,2,0). Sama `.e-con-inner` (0,1,0) przegrywa — * i właśnie dlatego treść była kiedyś ściśnięta do 1140 px zamiast pełnej * szerokości. `:not(.zp-el)` wyłącza to dla dokumentów natywnych. * -------------------------------------------------------------------------- */ .e-con:not(.zp-el), .e-con:not(.zp-el) > .e-con-inner { display: contents; max-width: none; margin: 0; padding: 0; width: auto; } /* W edytorze kontenery muszą być widoczne i klikalne. */ body.elementor-editor-active .e-con, body.elementor-editor-active .e-con-inner, body.elementor-editor-active .e-con > .e-con-inner { display: revert-layer; max-width: revert-layer; margin: revert-layer; padding: revert-layer; width: revert-layer; } /* * Hero podstron — tło musi być klikalne tak samo jak na stronie głównej. * * Warstwa treści hero (`zp-parallaksa-tresc`) jest na podstronach * `absolute inset-0`, czyli przykrywa CAŁY hero — inaczej niż na stronie * głównej, gdzie treść to wyśrodkowany blok `relative z-10`. W edytorze * każde kliknięcie w zdjęcie trafiało więc w warstwę treści: panel pokazywał * pusty kontener bez wysokości („Edytuj Kontener”, minimalna wysokość 0), * a do samego tła nie dało się dojść myszką. * * Treść przepuszcza kliknięcia tam, gdzie nic nie ma; łapią je dopiero jej * własne elementy. Dzięki temu klik w zdjęcie zaznacza kontener tła i otwiera * Styl → Tło → Obrazek. * * TYLKO w edytorze — na froncie `pointer-events` zostaje domyślne, bo w treści * hero są odnośniki i przyciski. */ body.elementor-editor-active .zp-parallaksa-tresc { pointer-events: none; } body.elementor-editor-active .zp-parallaksa-tresc .elementor-element { pointer-events: auto; } /* -------------------------------------------------------------------------- * 2. TRYB NATYWNY — wygaszenie domyślnych stylów kontenera * * Elementor steruje kontenerem przez ZMIENNE (`.e-con{width:var(--width)}`), * więc zerujemy zmienne, a nie właściwości. Dzięki temu nie wchodzimy * w wyścig specyficzności z utility Tailwinda. * * NIE pisz tu `display: revert` ani `display: block` — reguła `.e-con.zp-el` * ma wagę (0,2,0) i zdusiłaby `.flex` oraz `.grid` (0,1,0) z arkusza * produkcyjnego. Dokładnie to zamieniło siatkę kontaktu w kolumnę kart. * -------------------------------------------------------------------------- */ /* * `--display` MUSI byc wyzej niz reszta. Elementor generuje dla KAZDEGO * kontenera regule w post-N.css: * .elementor-33 .elementor-element.elementor-element-XXXX{--display:flex} * czyli wage (0,3,0) - wiecej niz `.e-con.zp-el` (0,2,0). Bez tego kazdy *
i
stawal sie kontenerem flex, a jego dzieci kurczyly * sie do tresci: galeria zwezala sie z 1280 px do 112 px. * * Pulapka jest podstepna, bo pliki post-N.css sa cache'owane - /kontakt/ * wygladalo poprawnie tylko dlatego, ze mialo plik sprzed konwersji. * Reszta zmiennych zostaje na (0,2,0) CELOWO: dzieki temu ustawienia * wpisane przez redaktora w panelu (padding, margines) dalej wygrywaja. */ .e-con.zp-el.zp-el.zp-el { --display: block; } .e-con.zp-el { --width: auto; --height: auto; --min-height: auto; --content-width: none; --overflow: visible; --position: static; --z-index: auto; --border-radius: 0; --text-align: initial; --margin-top: 0px; --margin-right: 0px; --margin-bottom: 0px; --margin-left: 0px; --padding-top: 0px; --padding-right: 0px; --padding-bottom: 0px; --padding-left: 0px; --gap: normal; --row-gap: normal; --column-gap: normal; --flex-direction: row; --flex-wrap: nowrap; --flex-wrap-mobile: nowrap; --align-items: normal; --align-content: normal; --justify-content: normal; --flex-basis: auto; --flex-grow: 0; --flex-shrink: 1; min-width: auto; flex: revert; } .elementor-widget.zp-el { --gap: normal; --row-gap: normal; --column-gap: normal; --flex-direction: row; --align-items: normal; --align-content: normal; --justify-content: normal; } /* -------------------------------------------------------------------------- * 3. Przywrócenie utility, które Elementor bije specyficznością * * Dwie reguły Elementora są mocniejsze niż pojedyncza klasa Tailwinda: * `.e-con{display:var(--display)}` — remis (0,1,0), rozstrzyga kolejność * `.elementor-widget{position:relative}` — to samo * a przy `.e-con.zp-el` (0,2,0) po naszej stronie utility przegrywa na pewno. * * Dlatego te kilka właściwości powtarzamy jawnie z wagą (0,3,0). * Bez tego: hero traciło `flex`, a `absolute inset-0` w środku widgetu * zaczepiało się o wrapper widgetu (position:relative) zamiast o sekcję — * tło hero miało zero wysokości i strona była pusta. * -------------------------------------------------------------------------- */ .e-con.zp-el.flex, .elementor-widget.zp-el.flex { display: flex; } .e-con.zp-el.inline-flex, .elementor-widget.zp-el.inline-flex { display: inline-flex; } .e-con.zp-el.grid, .elementor-widget.zp-el.grid { display: grid; } .e-con.zp-el.block, .elementor-widget.zp-el.block { display: block; } .e-con.zp-el.inline-block, .elementor-widget.zp-el.inline-block{ display: inline-block; } .e-con.zp-el.contents, .elementor-widget.zp-el.contents { display: contents; } .e-con.zp-el.hidden, .elementor-widget.zp-el.hidden { display: none; } /* Widget bez klasy pozycjonującej nie może być kontekstem dla `absolute`. */ .elementor-widget.zp-el { position: static; } .e-con.zp-el.relative, .elementor-widget.zp-el.relative { position: relative; } .e-con.zp-el.absolute, .elementor-widget.zp-el.absolute { position: absolute; } .e-con.zp-el.fixed, .elementor-widget.zp-el.fixed { position: fixed; } .e-con.zp-el.sticky, .elementor-widget.zp-el.sticky { position: sticky; } /* -------------------------------------------------------------------------- * 4. Obraz * * Klasy zostają na wrapperze widgetu (tam działa `aspect-*`, `rounded-*`, * `overflow-hidden`), a przejmuje je przez `inherit`. * * `object-fit` i `object-position` nie dziedziczą się same z siebie, ale * `inherit` bierze wartość policzoną na rodzicu — a tam siedzi `object-cover` * z klasy Tailwinda (na divie nic nie robi, tutaj robi wszystko). * -------------------------------------------------------------------------- */ .elementor-widget-image > img { display: block; width: 100%; height: 100%; border-radius: inherit; object-fit: inherit; object-position: inherit; } /* Obrazy, które mają zachować własne proporcje (logo, ikony w treści). */ .elementor-widget-image.zp-img-auto > img { width: auto; height: auto; max-width: 100%; } /* * Elementor: `.elementor img{height:auto}` ma wagę (0,1,1), czyli więcej niż * `.h-full` (0,1,0). Bez tego każdy obrazek z `h-full` dostawał wysokość * z proporcji zamiast 100% rodzica — pasek parallax na /oferta/ miał 478 px * w kontenerze 540 px i `object-cover` kadrował inny fragment zdjęcia. */ .elementor img.h-full { height: 100%; } .elementor img.w-full { width: 100%; } .elementor img.h-auto { height: auto; } .elementor img.w-auto { width: auto; } /* -------------------------------------------------------------------------- * 5. Przycisk * * Skórka Elementora (szare tło, własny padding, radius 3 px) kłóci się * z klasami na wrapperze. Wygaszamy ją; ma być przezroczystą warstwą * rozpiętą na całym wrapperze, żeby klikalny był cały przycisk, a nie sam tekst. * -------------------------------------------------------------------------- */ .elementor-widget-button.zp-el { position: relative; } .elementor-widget-button > .elementor-button { background: none; border: 0; border-radius: inherit; color: inherit; font: inherit; letter-spacing: inherit; text-transform: inherit; text-align: inherit; fill: currentColor; display: block; padding: 0; position: static; } .elementor-widget-button > .elementor-button::after { content: ""; position: absolute; inset: 0; } .elementor-widget-button > .elementor-button:hover, .elementor-widget-button > .elementor-button:focus { background: none; color: inherit; } .elementor-widget-button > .elementor-button .elementor-button-content-wrapper, .elementor-widget-button > .elementor-button .elementor-button-text { display: inline; font: inherit; letter-spacing: inherit; } /* -------------------------------------------------------------------------- * 6. Znaczniki animacji w trybie natywnym * * W eksporcie stan początkowy animacji siedzi w atrybucie `style` * (`opacity:0;transform:translateY(40px)` z framer-motion). Kontener * Elementora nie ma pola na inline style — ma tylko CSS Classes — więc * konwerter przekłada te style na klasy, a stan początkowy ustawiamy tutaj. * * To nie jest kosmetyka: dopóki `style` był traktowany jak obcy atrybut, * KAŻDY blok treści zostawał jednym widgetem HTML (te wrappery siedzą na * szczycie każdej sekcji) i strona pozostawała nieedytowalna. * -------------------------------------------------------------------------- */ .zp-odslon { opacity: 0; transform: translateY(40px); } .zp-odslon-lewo { opacity: 0; transform: translateX(-40px); } .zp-odslon-prawo { opacity: 0; transform: translateX(40px); } .zp-odslon-hero { opacity: 0; transform: translateY(24px); } /* Warstwy parallaksy — pozycję nadaje zp.js, tu tylko punkt wyjścia. */ .zp-parallaksa-tlo { transform: none; } .zp-parallaksa-tresc { opacity: 1; } /* W edytorze treść ma być widoczna od razu — inaczej redaktor klika w pustkę. */ body.elementor-editor-active .zp-odslon, body.elementor-editor-active .zp-odslon-lewo, body.elementor-editor-active .zp-odslon-prawo, body.elementor-editor-active .zp-odslon-hero { opacity: 1; transform: none; } /* -------------------------------------------------------------------------- * 7. Widget HTML jest przezroczysty dla układu * * Widget HTML nie niesie żadnych klas — cały markup siedzi w środku. Jego * wrapper wchodził jednak do układu jako dodatkowy element: w kontenerze * `flex items-center` to on stawał się elementem flex i kurczył się do * treści, więc `w-full max-w-2xl` na dziecku liczyło się względem wąskiego * pudełka. Efekt: pastylki nawigacji w hero łamały się na dwa rzędy, * a sekcja rosła o kilkadziesiąt pikseli. * * `display: contents` usuwa wrapper z układu, zostawiając dokładnie DOM * eksportu. W edytorze musi być widoczny, inaczej nie da się go kliknąć. * -------------------------------------------------------------------------- */ body:not(.elementor-editor-active) .elementor-widget-html { display: contents; } /* -------------------------------------------------------------------------- * 8. Element semantyczny w widgecie dziedziczy typografię z wrappera * * Klasy Tailwinda siedzą na divie widgetu, a

/

jest jego dzieckiem. * Większość właściwości typograficznych dziedziczy się sama, ale Elementor * ustawia `.elementor-heading-title{line-height:1}` — nagłówek „Napisz do nas" * miał przez to 24 px zamiast 32 px, a karta formularza była o 8 px niższa. * * `font: inherit` przenosi rodzinę, rozmiar, wagę, styl i interlinię naraz. * -------------------------------------------------------------------------- */ .elementor-widget-heading.zp-el > .elementor-heading-title, .elementor-widget-text-editor.zp-el > p:only-child { font: inherit; line-height: inherit; letter-spacing: inherit; color: inherit; text-align: inherit; text-transform: inherit; margin: 0; } /* -------------------------------------------------------------------------- * 9. Widget tekstowy z oryginalnym markupem — wrapper przezroczysty * * Listy, daty, plakietki i linki tekstowe trafiają do widgetu Edytor tekstu * razem z całym swoim tagiem i klasami, żeby DOM został taki jak w eksporcie, * a redaktor dostał WYSIWYG zamiast okienka z kodem. Wrapper widgetu musi * wtedy zniknąć z układu — inaczej `

    ` przestaje * być elementem flex swojego rodzica. * -------------------------------------------------------------------------- */ body:not(.elementor-editor-active) .zp-przezroczysty { display: contents; } /* -------------------------------------------------------------------------- * 10. Blok "Do pobrania" w kartach oferty (projekt 1A, 2026-09-11) * * Pobrania przestają udawać akcje i wracają do roli linków: w karcie zostaje * JEDEN przycisk ("Zapytaj o wolny termin"), a pliki idą pod etykietą jako * lista ze strzałką i podkreśleniem. * * Geometria jest 1:1 z projektu (11 px / 0.12em / wersaliki dla etykiety, * odstęp 7 px w liście, 9 px między strzałką a tekstem, podkreślenie 3 px * pod linią bazową). Kolory z projektu (#8F6B2E, #2E2A26, #9A9187, #D9CCB4) * są ZMAPOWANE na tokeny serwisu, żeby karta nie wnosiła czterech nowych * hexów obok palety: strzałka `gold-dark`, etykieta `mocha`, tekst `ink`, * podkreślenie `gold` z alfą. * * Dlaczego CSS, a nie klasy utility: `zp.css` to zamrożony bundle z eksportu * i nie ma w nim `text-[11px]`, `tracking-[0.12em]` ani `underline-offset-3`. * Strzałka jest w `::before`, a nie w treści przycisku — redaktor edytuje * sam tekst i nie ma jak jej skasować. * -------------------------------------------------------------------------- */ /* Potrojona klasa, bo kontener Elementora ustawia `flex-direction: var(--flex-direction)` * i przy remisie wygrywa kolejnoscia. Ustawiamy i wlasciwosc, i zmienna. */ .zp-pobrania.zp-pobrania.zp-pobrania { display: flex; --flex-direction: column; flex-direction: column; --align-items: flex-start; align-items: flex-start; --gap: 7px; --row-gap: 7px; --column-gap: 0px; gap: 7px; margin-top: 20px; width: 100%; } .zp-pobrania-etykieta { font-size: 11px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-mocha, #8b7355); margin-bottom: 2px; } .zp-pobrania-etykieta p { margin: 0; } .elementor-widget-button.zp-pobranie { font-size: 14px; line-height: 1.5; /* Cel dotyku: sam wiersz ma 21 px, co na telefonie jest za mało. */ padding-block: 2px; } .zp-pobranie > .elementor-button { display: flex; align-items: baseline; gap: 9px; color: var(--color-ink, #1a1a1a); transition: color .3s ease; } .zp-pobranie > .elementor-button::before { content: "\2193"; color: var(--color-gold-dark, #8f6e3a); line-height: 1; } .zp-pobranie .elementor-button-text { text-decoration: underline; text-decoration-color: rgba(184, 148, 90, .45); text-underline-offset: 3px; } .zp-pobranie > .elementor-button:hover { color: var(--color-gold, #b8945a); } .zp-pobranie > .elementor-button:hover .elementor-button-text { text-decoration-color: currentColor; } /* -------------------------------------------------------------------------- * 6. Siatka sześciokolumnowa — sekcja „Atuty Złotego Pałacu" (2026-09-14) * -------------------------------------------------------------------------- * * `zp.css` jest zamrożonym bundlem Tailwinda z eksportu i zna wyłącznie * `lg:grid-cols-3`, `4` i `5`. Szósty atut („Brak dodatkowych kosztów") * potrzebuje szóstej kolumny, więc klasa powstaje tutaj — zgodnie z zasadą * „nowe style idą przez zp-wp.css, nie przez wymyślanie klas". * * Specyficzność (0,1,0), dokładnie jak oryginalne `lg:grid-cols-5`: Elementor * nie ustawia `grid-template-columns` na kontenerach (steruje tylko `--display` * i zmiennymi flexa), więc nie ma z czym przegrać i nie trzeba potrajać klasy. * * Breakpoint 64rem = `lg` w tym bundlu. */ @media (min-width: 64rem) { .lg\:grid-cols-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); } } /* * WYGENEROWANE — nie edytuj ręcznie. Źródło: zrob-nadpisania.py * * Duplikaty utility marginesowych z prefiksem `.zp-el`, żeby wygrywały * z regułami Elementora zerującymi marginesy jego elementów: * .e-con .elementor-widget.elementor-widget { margin: 0 } * .e-con { margin: var(--margin-block-end) } * Odstępy `space-y-*` w Tailwindzie v4 siedzą w `:where()`, czyli mają * specyficzność zero i przegrywają z czymkolwiek — tu dostają realny selektor. */ .zp-el.zp-el.zp-el.sr-only{clip-path:inset(50%);white-space:nowrap;border-width:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden} .zp-el.zp-el.zp-el.absolute{position:absolute} .zp-el.zp-el.zp-el.fixed{position:fixed} .zp-el.zp-el.zp-el.relative{position:relative} .zp-el.zp-el.zp-el.z-10{z-index:10} .zp-el.zp-el.zp-el.z-20{z-index:20} .zp-el.zp-el.zp-el.z-30{z-index:30} .zp-el.zp-el.zp-el.z-50{z-index:50} .zp-el.zp-el.zp-el.z-\[60\]{z-index:60} .zp-el.zp-el.zp-el.z-\[100\]{z-index:100} .zp-el.zp-el.zp-el.-mx-1{margin-inline:calc(var(--spacing)*-1)} .zp-el.zp-el.zp-el.mx-auto{margin-inline:auto} .zp-el.zp-el.zp-el.my-1\.5{margin-block:calc(var(--spacing)*1.5)} .zp-el.zp-el.zp-el.my-20{margin-block:calc(var(--spacing)*20)} .zp-el.zp-el.zp-el.mt-1{margin-top:calc(var(--spacing)*1)} .zp-el.zp-el.zp-el.mt-2{margin-top:calc(var(--spacing)*2)} .zp-el.zp-el.zp-el.mt-3{margin-top:calc(var(--spacing)*3)} .zp-el.zp-el.zp-el.mt-4{margin-top:calc(var(--spacing)*4)} .zp-el.zp-el.zp-el.mt-5{margin-top:calc(var(--spacing)*5)} .zp-el.zp-el.zp-el.mt-6{margin-top:calc(var(--spacing)*6)} .zp-el.zp-el.zp-el.mt-8{margin-top:calc(var(--spacing)*8)} .zp-el.zp-el.zp-el.mt-10{margin-top:calc(var(--spacing)*10)} .zp-el.zp-el.zp-el.mt-12{margin-top:calc(var(--spacing)*12)} .zp-el.zp-el.zp-el.mt-14{margin-top:calc(var(--spacing)*14)} .zp-el.zp-el.zp-el.mt-16{margin-top:calc(var(--spacing)*16)} .zp-el.zp-el.zp-el.mb-1{margin-bottom:calc(var(--spacing)*1)} .zp-el.zp-el.zp-el.mb-2{margin-bottom:calc(var(--spacing)*2)} .zp-el.zp-el.zp-el.mb-3{margin-bottom:calc(var(--spacing)*3)} .zp-el.zp-el.zp-el.mb-4{margin-bottom:calc(var(--spacing)*4)} .zp-el.zp-el.zp-el.mb-5{margin-bottom:calc(var(--spacing)*5)} .zp-el.zp-el.zp-el.mb-6{margin-bottom:calc(var(--spacing)*6)} .zp-el.zp-el.zp-el.mb-8{margin-bottom:calc(var(--spacing)*8)} .zp-el.zp-el.zp-el.mb-12{margin-bottom:calc(var(--spacing)*12)} .zp-el.zp-el.zp-el.mb-14{margin-bottom:calc(var(--spacing)*14)} .zp-el.zp-el.zp-el.mb-16{margin-bottom:calc(var(--spacing)*16)} .zp-el.zp-el.zp-el.mb-20{margin-bottom:calc(var(--spacing)*20)} .zp-el.zp-el.zp-el.ml-1{margin-left:calc(var(--spacing)*1)} .zp-el.zp-el.zp-el.ml-2{margin-left:calc(var(--spacing)*2)} .zp-el.zp-el.zp-el.ml-4{margin-left:calc(var(--spacing)*4)} .zp-el.zp-el.zp-el.line-clamp-2{-webkit-line-clamp:2;-webkit-box-orient:vertical;display:-webkit-box;overflow:hidden} .zp-el.zp-el.zp-el.line-clamp-3{-webkit-line-clamp:3;-webkit-box-orient:vertical;display:-webkit-box;overflow:hidden} .zp-el.zp-el.zp-el.block{display:block} .zp-el.zp-el.zp-el.flex{display:flex} .zp-el.zp-el.zp-el.grid{display:grid} .zp-el.zp-el.zp-el.hidden{display:none} .zp-el.zp-el.zp-el.inline-block{display:inline-block} .zp-el.zp-el.zp-el.inline-flex{display:inline-flex} .zp-el.zp-el.zp-el.h-1{height:calc(var(--spacing)*1)} .zp-el.zp-el.zp-el.h-1\.5{height:calc(var(--spacing)*1.5)} .zp-el.zp-el.zp-el.h-2{height:calc(var(--spacing)*2)} .zp-el.zp-el.zp-el.h-3{height:calc(var(--spacing)*3)} .zp-el.zp-el.zp-el.h-3\.5{height:calc(var(--spacing)*3.5)} .zp-el.zp-el.zp-el.h-6{height:calc(var(--spacing)*6)} .zp-el.zp-el.zp-el.h-7{height:calc(var(--spacing)*7)} .zp-el.zp-el.zp-el.h-8{height:calc(var(--spacing)*8)} .zp-el.zp-el.zp-el.h-9{height:calc(var(--spacing)*9)} .zp-el.zp-el.zp-el.h-10{height:calc(var(--spacing)*10)} .zp-el.zp-el.zp-el.h-12{height:calc(var(--spacing)*12)} .zp-el.zp-el.zp-el.h-14{height:calc(var(--spacing)*14)} .zp-el.zp-el.zp-el.h-16{height:calc(var(--spacing)*16)} .zp-el.zp-el.zp-el.h-20{height:calc(var(--spacing)*20)} .zp-el.zp-el.zp-el.h-24{height:calc(var(--spacing)*24)} .zp-el.zp-el.zp-el.h-72{height:calc(var(--spacing)*72)} .zp-el.zp-el.zp-el.h-80{height:calc(var(--spacing)*80)} .zp-el.zp-el.zp-el.h-96{height:calc(var(--spacing)*96)} .zp-el.zp-el.zp-el.h-\[50vh\]{height:50vh} .zp-el.zp-el.zp-el.h-\[55vh\]{height:55vh} .zp-el.zp-el.zp-el.h-\[60vh\]{height:60vh} .zp-el.zp-el.zp-el.h-\[65vh\]{height:65vh} .zp-el.zp-el.zp-el.h-\[72vh\]{height:72vh} .zp-el.zp-el.zp-el.h-auto{height:auto} .zp-el.zp-el.zp-el.h-full{height:100%} .zp-el.zp-el.zp-el.h-px{height:1px} .zp-el.zp-el.zp-el.max-h-\[85vh\]{max-height:85vh} .zp-el.zp-el.zp-el.max-h-\[720px\]{max-height:720px} .zp-el.zp-el.zp-el.max-h-\[820px\]{max-height:820px} .zp-el.zp-el.zp-el.min-h-\[152px\]{min-height:152px} .zp-el.zp-el.zp-el.min-h-\[160px\]{min-height:160px} .zp-el.zp-el.zp-el.min-h-\[200px\]{min-height:200px} .zp-el.zp-el.zp-el.min-h-\[320px\]{min-height:320px} .zp-el.zp-el.zp-el.min-h-\[380px\]{min-height:380px} .zp-el.zp-el.zp-el.min-h-\[420px\]{min-height:420px} .zp-el.zp-el.zp-el.min-h-\[440px\]{min-height:440px} .zp-el.zp-el.zp-el.min-h-screen{min-height:100vh} .zp-el.zp-el.zp-el.w-1{width:calc(var(--spacing)*1)} .zp-el.zp-el.zp-el.w-1\.5{width:calc(var(--spacing)*1.5)} .zp-el.zp-el.zp-el.w-1\/2{width:50%} .zp-el.zp-el.zp-el.w-2{width:calc(var(--spacing)*2)} .zp-el.zp-el.zp-el.w-3{width:calc(var(--spacing)*3)} .zp-el.zp-el.zp-el.w-3\.5{width:calc(var(--spacing)*3.5)} .zp-el.zp-el.zp-el.w-5{width:calc(var(--spacing)*5)} .zp-el.zp-el.zp-el.w-6{width:calc(var(--spacing)*6)} .zp-el.zp-el.zp-el.w-7{width:calc(var(--spacing)*7)} .zp-el.zp-el.zp-el.w-8{width:calc(var(--spacing)*8)} .zp-el.zp-el.zp-el.w-9{width:calc(var(--spacing)*9)} .zp-el.zp-el.zp-el.w-10{width:calc(var(--spacing)*10)} .zp-el.zp-el.zp-el.w-12{width:calc(var(--spacing)*12)} .zp-el.zp-el.zp-el.w-14{width:calc(var(--spacing)*14)} .zp-el.zp-el.zp-el.w-16{width:calc(var(--spacing)*16)} .zp-el.zp-el.zp-el.w-20{width:calc(var(--spacing)*20)} .zp-el.zp-el.zp-el.w-24{width:calc(var(--spacing)*24)} .zp-el.zp-el.zp-el.w-28{width:calc(var(--spacing)*28)} .zp-el.zp-el.zp-el.w-36{width:calc(var(--spacing)*36)} .zp-el.zp-el.zp-el.w-44{width:calc(var(--spacing)*44)} .zp-el.zp-el.zp-el.w-72{width:calc(var(--spacing)*72)} .zp-el.zp-el.zp-el.w-80{width:calc(var(--spacing)*80)} .zp-el.zp-el.zp-el.w-\[84vw\]{width:84vw} .zp-el.zp-el.zp-el.w-auto{width:auto} .zp-el.zp-el.zp-el.w-fit{width:fit-content} .zp-el.zp-el.zp-el.w-full{width:100%} .zp-el.zp-el.zp-el.w-max{width:max-content} .zp-el.zp-el.zp-el.w-px{width:1px} .zp-el.zp-el.zp-el.max-w-2xl{max-width:var(--container-2xl)} .zp-el.zp-el.zp-el.max-w-3xl{max-width:var(--container-3xl)} .zp-el.zp-el.zp-el.max-w-4xl{max-width:var(--container-4xl)} .zp-el.zp-el.zp-el.max-w-5xl{max-width:var(--container-5xl)} .zp-el.zp-el.zp-el.max-w-6xl{max-width:var(--container-6xl)} .zp-el.zp-el.zp-el.max-w-7xl{max-width:var(--container-7xl)} .zp-el.zp-el.zp-el.max-w-24{max-width:calc(var(--spacing)*24)} .zp-el.zp-el.zp-el.max-w-lg{max-width:var(--container-lg)} .zp-el.zp-el.zp-el.max-w-md{max-width:var(--container-md)} .zp-el.zp-el.zp-el.max-w-xl{max-width:var(--container-xl)} .zp-el.zp-el.zp-el.max-w-xs{max-width:var(--container-xs)} .zp-el.zp-el.zp-el.min-w-0{min-width:calc(var(--spacing)*0)} .zp-el.zp-el.zp-el.min-w-\[200px\]{min-width:200px} .zp-el.zp-el.zp-el.min-w-\[220px\]{min-width:220px} .zp-el.zp-el.zp-el.flex-1{flex:1} .zp-el.zp-el.zp-el.flex-shrink-0,.zp-el.zp-el.zp-el.shrink-0{flex-shrink:0} .zp-el.zp-el.zp-el.flex-col{flex-direction:column} .zp-el.zp-el.zp-el.flex-wrap{flex-wrap:wrap} .zp-el.zp-el.zp-el.items-baseline{align-items:baseline} .zp-el.zp-el.zp-el.items-center{align-items:center} .zp-el.zp-el.zp-el.items-end{align-items:flex-end} .zp-el.zp-el.zp-el.items-start{align-items:flex-start} .zp-el.zp-el.zp-el.justify-between{justify-content:space-between} .zp-el.zp-el.zp-el.justify-center{justify-content:center} .zp-el.zp-el.zp-el.justify-end{justify-content:flex-end} .zp-el.zp-el.zp-el.gap-0\.5{gap:calc(var(--spacing)*.5)} .zp-el.zp-el.zp-el.gap-1\.5{gap:calc(var(--spacing)*1.5)} .zp-el.zp-el.zp-el.gap-2{gap:calc(var(--spacing)*2)} .zp-el.zp-el.zp-el.gap-2\.5{gap:calc(var(--spacing)*2.5)} .zp-el.zp-el.zp-el.gap-3{gap:calc(var(--spacing)*3)} .zp-el.zp-el.zp-el.gap-4{gap:calc(var(--spacing)*4)} .zp-el.zp-el.zp-el.gap-5{gap:calc(var(--spacing)*5)} .zp-el.zp-el.zp-el.gap-6{gap:calc(var(--spacing)*6)} .zp-el.zp-el.zp-el.gap-8{gap:calc(var(--spacing)*8)} .zp-el.zp-el.zp-el.gap-12{gap:calc(var(--spacing)*12)} .zp-el.zp-el.zp-el.gap-16{gap:calc(var(--spacing)*16)} .zp-el.zp-el.zp-el.space-y-0>:not(:last-child){--tw-space-y-reverse:0;margin-block-start:calc(calc(var(--spacing)*0)*var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--spacing)*0)*calc(1 - var(--tw-space-y-reverse)))} .zp-el.zp-el.zp-el.space-y-0\.5>:not(:last-child){--tw-space-y-reverse:0;margin-block-start:calc(calc(var(--spacing)*.5)*var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--spacing)*.5)*calc(1 - var(--tw-space-y-reverse)))} .zp-el.zp-el.zp-el.space-y-2>:not(:last-child){--tw-space-y-reverse:0;margin-block-start:calc(calc(var(--spacing)*2)*var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--spacing)*2)*calc(1 - var(--tw-space-y-reverse)))} .zp-el.zp-el.zp-el.space-y-2\.5>:not(:last-child){--tw-space-y-reverse:0;margin-block-start:calc(calc(var(--spacing)*2.5)*var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--spacing)*2.5)*calc(1 - var(--tw-space-y-reverse)))} .zp-el.zp-el.zp-el.space-y-3>:not(:last-child){--tw-space-y-reverse:0;margin-block-start:calc(calc(var(--spacing)*3)*var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--spacing)*3)*calc(1 - var(--tw-space-y-reverse)))} .zp-el.zp-el.zp-el.space-y-4>:not(:last-child){--tw-space-y-reverse:0;margin-block-start:calc(calc(var(--spacing)*4)*var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--spacing)*4)*calc(1 - var(--tw-space-y-reverse)))} .zp-el.zp-el.zp-el.space-y-5>:not(:last-child){--tw-space-y-reverse:0;margin-block-start:calc(calc(var(--spacing)*5)*var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--spacing)*5)*calc(1 - var(--tw-space-y-reverse)))} .zp-el.zp-el.zp-el.space-y-6>:not(:last-child){--tw-space-y-reverse:0;margin-block-start:calc(calc(var(--spacing)*6)*var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--spacing)*6)*calc(1 - var(--tw-space-y-reverse)))} .zp-el.zp-el.zp-el.space-y-9>:not(:last-child){--tw-space-y-reverse:0;margin-block-start:calc(calc(var(--spacing)*9)*var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--spacing)*9)*calc(1 - var(--tw-space-y-reverse)))} .zp-el.zp-el.zp-el.space-y-14>:not(:last-child){--tw-space-y-reverse:0;margin-block-start:calc(calc(var(--spacing)*14)*var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--spacing)*14)*calc(1 - var(--tw-space-y-reverse)))} .zp-el.zp-el.zp-el.gap-x-4{column-gap:calc(var(--spacing)*4)} .zp-el.zp-el.zp-el.gap-x-6{column-gap:calc(var(--spacing)*6)} .zp-el.zp-el.zp-el.gap-y-1{row-gap:calc(var(--spacing)*1)} .zp-el.zp-el.zp-el.gap-y-1\.5{row-gap:calc(var(--spacing)*1.5)} .zp-el.zp-el.zp-el.gap-y-2{row-gap:calc(var(--spacing)*2)} .zp-el.zp-el.zp-el.gap-y-10{row-gap:calc(var(--spacing)*10)} .zp-el.zp-el.zp-el.self-start{align-self:flex-start} .zp-el.zp-el.zp-el.overflow-hidden{overflow:hidden} .zp-el.zp-el.zp-el.overflow-x-auto{overflow-x:auto} .zp-el.zp-el.zp-el.rounded{border-radius:.25rem} .zp-el.zp-el.zp-el.rounded-2xl{border-radius:var(--radius-2xl)} .zp-el.zp-el.zp-el.rounded-3xl{border-radius:var(--radius-3xl)} .zp-el.zp-el.zp-el.rounded-full{border-radius:3.40282e38px} .zp-el.zp-el.zp-el.rounded-lg{border-radius:var(--radius-lg)} .zp-el.zp-el.zp-el.rounded-sm{border-radius:var(--radius-sm)} .zp-el.zp-el.zp-el.rounded-xl{border-radius:var(--radius-xl)} .zp-el.zp-el.zp-el.p-4{padding:calc(var(--spacing)*4)} .zp-el.zp-el.zp-el.p-5{padding:calc(var(--spacing)*5)} .zp-el.zp-el.zp-el.p-6{padding:calc(var(--spacing)*6)} .zp-el.zp-el.zp-el.p-8{padding:calc(var(--spacing)*8)} .zp-el.zp-el.zp-el.px-1{padding-inline:calc(var(--spacing)*1)} .zp-el.zp-el.zp-el.px-2\.5{padding-inline:calc(var(--spacing)*2.5)} .zp-el.zp-el.zp-el.px-3{padding-inline:calc(var(--spacing)*3)} .zp-el.zp-el.zp-el.px-4{padding-inline:calc(var(--spacing)*4)} .zp-el.zp-el.zp-el.px-5{padding-inline:calc(var(--spacing)*5)} .zp-el.zp-el.zp-el.px-6{padding-inline:calc(var(--spacing)*6)} .zp-el.zp-el.zp-el.px-8{padding-inline:calc(var(--spacing)*8)} .zp-el.zp-el.zp-el.px-10{padding-inline:calc(var(--spacing)*10)} .zp-el.zp-el.zp-el.py-1{padding-block:calc(var(--spacing)*1)} .zp-el.zp-el.zp-el.py-1\.5{padding-block:calc(var(--spacing)*1.5)} .zp-el.zp-el.zp-el.py-2{padding-block:calc(var(--spacing)*2)} .zp-el.zp-el.zp-el.py-2\.5{padding-block:calc(var(--spacing)*2.5)} .zp-el.zp-el.zp-el.py-3{padding-block:calc(var(--spacing)*3)} .zp-el.zp-el.zp-el.py-3\.5{padding-block:calc(var(--spacing)*3.5)} .zp-el.zp-el.zp-el.py-4{padding-block:calc(var(--spacing)*4)} .zp-el.zp-el.zp-el.py-5{padding-block:calc(var(--spacing)*5)} .zp-el.zp-el.zp-el.py-6{padding-block:calc(var(--spacing)*6)} .zp-el.zp-el.zp-el.py-8{padding-block:calc(var(--spacing)*8)} .zp-el.zp-el.zp-el.py-10{padding-block:calc(var(--spacing)*10)} .zp-el.zp-el.zp-el.py-12{padding-block:calc(var(--spacing)*12)} .zp-el.zp-el.zp-el.py-16{padding-block:calc(var(--spacing)*16)} .zp-el.zp-el.zp-el.py-20{padding-block:calc(var(--spacing)*20)} .zp-el.zp-el.zp-el.py-24{padding-block:calc(var(--spacing)*24)} .zp-el.zp-el.zp-el.pt-0{padding-top:calc(var(--spacing)*0)} .zp-el.zp-el.zp-el.pt-1{padding-top:calc(var(--spacing)*1)} .zp-el.zp-el.zp-el.pt-4{padding-top:calc(var(--spacing)*4)} .zp-el.zp-el.zp-el.pt-8{padding-top:calc(var(--spacing)*8)} .zp-el.zp-el.zp-el.pt-16{padding-top:calc(var(--spacing)*16)} .zp-el.zp-el.zp-el.pt-24{padding-top:calc(var(--spacing)*24)} .zp-el.zp-el.zp-el.pb-0{padding-bottom:calc(var(--spacing)*0)} .zp-el.zp-el.zp-el.pb-1{padding-bottom:calc(var(--spacing)*1)} .zp-el.zp-el.zp-el.pb-2{padding-bottom:calc(var(--spacing)*2)} .zp-el.zp-el.zp-el.pb-10{padding-bottom:calc(var(--spacing)*10)} .zp-el.zp-el.zp-el.pb-12{padding-bottom:calc(var(--spacing)*12)} .zp-el.zp-el.zp-el.pb-14{padding-bottom:calc(var(--spacing)*14)} .zp-el.zp-el.zp-el.pb-20{padding-bottom:calc(var(--spacing)*20)} .zp-el.zp-el.zp-el.pb-24{padding-bottom:calc(var(--spacing)*24)} .zp-el.zp-el.zp-el.pl-4{padding-left:calc(var(--spacing)*4)} .zp-el.zp-el.zp-el.pl-6{padding-left:calc(var(--spacing)*6)} .zp-el.zp-el.zp-el.text-center{text-align:center} .zp-el.zp-el.zp-el.text-left{text-align:left} @media (hover:hover){.zp-el.zp-el.zp-el.group-hover\:block:is(:where(.group):hover *){display:block}} .zp-el.zp-el.zp-el.group-focus-visible\:block:is(:where(.group):focus-visible *){display:block} .zp-el.zp-el.zp-el.last\:pb-0:last-child{padding-bottom:calc(var(--spacing)*0)} @media (min-width:40rem){.zp-el.zp-el.zp-el.sm\:w-16{width:calc(var(--spacing)*16)}.zp-el.zp-el.zp-el.sm\:w-\[68vw\]{width:68vw}.zp-el.zp-el.zp-el.sm\:p-6{padding:calc(var(--spacing)*6)}.zp-el.zp-el.zp-el.sm\:px-6{padding-inline:calc(var(--spacing)*6)}} @media (min-width:48rem){.zp-el.zp-el.zp-el.md\:mx-auto{margin-inline:auto}.zp-el.zp-el.zp-el.md\:mt-16{margin-top:calc(var(--spacing)*16)}.zp-el.zp-el.zp-el.md\:mb-8{margin-bottom:calc(var(--spacing)*8)}.zp-el.zp-el.zp-el.md\:mb-10{margin-bottom:calc(var(--spacing)*10)}.zp-el.zp-el.zp-el.md\:mb-16{margin-bottom:calc(var(--spacing)*16)}.zp-el.zp-el.zp-el.md\:grid{display:grid}.zp-el.zp-el.zp-el.md\:hidden{display:none}.zp-el.zp-el.zp-el.md\:h-10{height:calc(var(--spacing)*10)}.zp-el.zp-el.zp-el.md\:h-24{height:calc(var(--spacing)*24)}.zp-el.zp-el.zp-el.md\:h-\[60vh\]{height:60vh}.zp-el.zp-el.zp-el.md\:w-10{width:calc(var(--spacing)*10)}.zp-el.zp-el.zp-el.md\:w-16{width:calc(var(--spacing)*16)}.zp-el.zp-el.zp-el.md\:w-24{width:calc(var(--spacing)*24)}.zp-el.zp-el.zp-el.md\:max-w-xl{max-width:var(--container-xl)}.zp-el.zp-el.zp-el.md\:gap-4{gap:calc(var(--spacing)*4)}.zp-el.zp-el.zp-el.md\:gap-6{gap:calc(var(--spacing)*6)}.zp-el.zp-el.zp-el.md\:gap-8{gap:calc(var(--spacing)*8)}.zp-el.zp-el.zp-el.md\:gap-12{gap:calc(var(--spacing)*12)}.zp-el.zp-el.zp-el.md\:space-y-20>:not(:last-child){--tw-space-y-reverse:0;margin-block-start:calc(calc(var(--spacing)*20)*var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--spacing)*20)*calc(1 - var(--tw-space-y-reverse)))}.zp-el.zp-el.zp-el.md\:gap-x-7{column-gap:calc(var(--spacing)*7)}.zp-el.zp-el.zp-el.md\:p-6{padding:calc(var(--spacing)*6)}.zp-el.zp-el.zp-el.md\:p-8{padding:calc(var(--spacing)*8)}.zp-el.zp-el.zp-el.md\:p-10{padding:calc(var(--spacing)*10)}.zp-el.zp-el.zp-el.md\:p-12{padding:calc(var(--spacing)*12)}.zp-el.zp-el.zp-el.md\:px-4{padding-inline:calc(var(--spacing)*4)}.zp-el.zp-el.zp-el.md\:px-7{padding-inline:calc(var(--spacing)*7)}.zp-el.zp-el.zp-el.md\:px-8{padding-inline:calc(var(--spacing)*8)}.zp-el.zp-el.zp-el.md\:px-10{padding-inline:calc(var(--spacing)*10)}.zp-el.zp-el.zp-el.md\:px-12{padding-inline:calc(var(--spacing)*12)}.zp-el.zp-el.zp-el.md\:py-7{padding-block:calc(var(--spacing)*7)}.zp-el.zp-el.zp-el.md\:py-12{padding-block:calc(var(--spacing)*12)}.zp-el.zp-el.zp-el.md\:py-16{padding-block:calc(var(--spacing)*16)}.zp-el.zp-el.zp-el.md\:py-24{padding-block:calc(var(--spacing)*24)}.zp-el.zp-el.zp-el.md\:py-28{padding-block:calc(var(--spacing)*28)}.zp-el.zp-el.zp-el.md\:pt-20{padding-top:calc(var(--spacing)*20)}.zp-el.zp-el.zp-el.md\:pb-16{padding-bottom:calc(var(--spacing)*16)}.zp-el.zp-el.zp-el.md\:pb-28{padding-bottom:calc(var(--spacing)*28)}.zp-el.zp-el.zp-el.md\:text-center{text-align:center}} @media (min-width:64rem){.zp-el.zp-el.zp-el.lg\:block{display:block}.zp-el.zp-el.zp-el.lg\:flex{display:flex}.zp-el.zp-el.zp-el.lg\:hidden{display:none}.zp-el.zp-el.zp-el.lg\:h-16{height:calc(var(--spacing)*16)}.zp-el.zp-el.zp-el.lg\:h-20{height:calc(var(--spacing)*20)}.zp-el.zp-el.zp-el.lg\:h-\[4\.5rem\]{height:4.5rem}.zp-el.zp-el.zp-el.lg\:w-40{width:calc(var(--spacing)*40)}.zp-el.zp-el.zp-el.lg\:w-52{width:calc(var(--spacing)*52)}.zp-el.zp-el.zp-el.lg\:justify-center{justify-content:center}.zp-el.zp-el.zp-el.lg\:gap-20{gap:calc(var(--spacing)*20)}.zp-el.zp-el.zp-el.lg\:gap-24{gap:calc(var(--spacing)*24)}.zp-el.zp-el.zp-el.lg\:gap-x-8{column-gap:calc(var(--spacing)*8)}.zp-el.zp-el.zp-el.lg\:p-10{padding:calc(var(--spacing)*10)}.zp-el.zp-el.zp-el.lg\:p-14{padding:calc(var(--spacing)*14)}.zp-el.zp-el.zp-el.lg\:px-12{padding-inline:calc(var(--spacing)*12)}.zp-el.zp-el.zp-el.lg\:py-20{padding-block:calc(var(--spacing)*20)}} .zp-el.zp-el.zp-el.no-scrollbar::-webkit-scrollbar{display:none} /* ========================================================================== * 8. Menu na gorze strony - czytelnosc (29.09.2026) * Stan "na gorze" to klasy bg-black/25 + backdrop-blur z header.php; na jasnych * zdjeciach hero dawalo to szary pasek i ginacy bialy tekst. Po przewinieciu zp.js * zdejmuje bg-black/25 i daje bg-ink/95 - ta regula wtedy juz nie dziala. * ========================================================================== */ header.fixed.bg-black\/25{background:linear-gradient(to bottom,rgba(17,15,13,.86),rgba(17,15,13,.74)) !important} header.fixed nav ul a.text-white\/90{color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.45)} header.fixed nav ul a.text-white\/90:hover{color:var(--color-gold,#b8945a)} /* ========================================================================== * 9. Duze ekrany i siatki galerii (29.09.2026) * a) Hero ma sztywne max-h-[720px] (strona glowna 820px). Na 4K dawalo to szpare * 3840x720 (5,3:1) - od 1600 px limit rosnie z szerokoscia, wiec proporcja * zostaje ~2,7:1 (wysokosc i tak trzyma h-[65vh] / h-[72vh]). * b) Siatki galerii (.zp-s-4a461437) mialy grid-auto-rows:minmax(200px,auto), * wiec wiersz rosl do naturalnej wysokosci zdjecia - uklad dzialal tylko dla * pionowych zdjec z telefonu. Stale wiersze + zdjecie absolutnie w kafelku: * kafelek przycina zdjecie (object-cover), a nie rozpycha siatke. * ========================================================================== */ @media (min-width:1600px){ .zp-el.zp-el.zp-el.zp-el.max-h-\[720px\]{max-height:40vw} .zp-el.zp-el.zp-el.zp-el.max-h-\[820px\]{max-height:44vw} } .zp-s-4a461437.zp-s-4a461437.zp-s-4a461437.zp-s-4a461437{grid-auto-rows:200px} @media (min-width:48rem){.zp-s-4a461437.zp-s-4a461437.zp-s-4a461437.zp-s-4a461437{grid-auto-rows:230px}} @media (min-width:64rem){.zp-s-4a461437.zp-s-4a461437.zp-s-4a461437.zp-s-4a461437{grid-auto-rows:260px}} .zp-s-4a461437 .zp-kafelek{position:relative} .zp-s-4a461437 .zp-kafelek > .elementor-widget-image{position:absolute !important;inset:0} .zp-s-4a461437 .zp-kafelek > .elementor-widget-image img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover} /* c) Telefon: Sala Srebrna ma 9 komorek (duzy 2x2 + 5) - w 2 kolumnach zostaje jedna * wolna; ostatni kafelek rozciagniety na cala szerokosc zamiast dziury. */ @media (max-width:47.99rem){#sala-srebrna .zp-s-4a461437 > :last-child{grid-column:span 2}} header.fixed nav ul a{white-space:nowrap} /* ========================================================================== * 10. "Glamour" - cieple, cukierkowe zdjecia (29.09.2026) * Zdjecia z sesji sa wierne, ale "surowe". Zamiast przerabiac pliki - gradacja w CSS * (odwracalna jednym usunieciem sekcji): jasniej, cieplej, pastelowe roze i zloto; * na hero mieka poswiata (soft-light) + dwa cieple rozswietlenia w rogach (screen), * a ciemne nakladki hero (widgety HTML w .zp-parallaksa-tlo) oslabione o 25%. * ========================================================================== */ .zp-tlo-natywne.zp-tlo-natywne{filter:brightness(1.09) saturate(1.26) contrast(1.05) sepia(.05)} .zp-parallaksa-tlo{isolation:isolate} .zp-parallaksa-tlo > .elementor-widget-html{opacity:.75} .zp-parallaksa-tlo::before,.zp-parallaksa-tlo::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:1} .zp-parallaksa-tlo::before{ background: radial-gradient(55% 60% at 88% 8%, rgba(255,222,190,.30) 0%, rgba(255,222,190,0) 70%), radial-gradient(45% 55% at 6% 92%, rgba(255,186,210,.21) 0%, rgba(255,186,210,0) 70%); mix-blend-mode:screen} .zp-parallaksa-tlo::after{ background: radial-gradient(120% 85% at 50% 18%, rgba(255,232,210,.48) 0%, rgba(255,232,210,0) 62%), linear-gradient(115deg, rgba(255,176,200,.30) 0%, rgba(255,214,170,.17) 48%, rgba(214,172,90,.30) 100%); mix-blend-mode:soft-light} .elementor-widget-image img,.zp-kafelek img{filter:brightness(1.04) saturate(1.22) contrast(1.04) sepia(.04);transition:filter .5s ease,transform .5s ease} .zp-kafelek:hover img{filter:brightness(1.09) saturate(1.3) contrast(1.05) sepia(.03)} /* ========================================================================== * 11. Formularz kontaktowy - Contact Form 7 (30.09.2026) * Pola maja klasy z eksportu (dokleja je filtr w functions.php); tu tylko to, co dodaje * CF7: otoczki pol, komunikaty pod polami i komunikat po wysylce - w kolorach strony. * Spinner CF7 nieuzywany (przycisk to