/* Kroje pisma z własnego serwera. Wygenerowane przez tools/fonty-lokalne.py, nie poprawiaj ręcznie. Rodziny 'X zapasowy' mają miary policzone z POMIARU w przeglądarce, osobno dla grubości lekkiej i pogrubionej, żeby zajmowały tyle samo miejsca co krój właściwy. Podmiana po wczytaniu nie rusza układu. */ @font-face { font-family: 'Figtree'; font-style: italic; font-weight: 400 600; font-display: swap; src: url(../fonts/figtree-italic-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Figtree'; font-style: italic; font-weight: 400 600; font-display: swap; src: url(../fonts/figtree-italic-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Figtree'; font-style: normal; font-weight: 400 800; font-display: swap; src: url(../fonts/figtree-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Figtree'; font-style: normal; font-weight: 400 800; font-display: swap; src: url(../fonts/figtree-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Figtree zapasowy'; font-weight: 1 600; src: local('Arial'), local('Helvetica'), local('Liberation Sans'); size-adjust: 99.61%; ascent-override: 95.37%; descent-override: 25.1%; line-gap-override: 0.0%; } @font-face { font-family: 'Figtree zapasowy'; font-weight: 601 1000; src: local('Arial Bold'), local('Helvetica Bold'), local('Liberation Sans Bold'), local('Arial'); size-adjust: 97.63%; ascent-override: 97.31%; descent-override: 25.61%; line-gap-override: 0.0%; } /* ========================================================================= ZIELONY FRYZJER Zalozenie: to nie jest strona uslugowa "jak kazda". Firma strzyze rosliny w ksztalty, wiec caly uklad ma pokazywac FORME i SYLWETKE, a nie kafle z ikonami. Stad: - zero zdjecia na cala szerokosc z ciemna zaslona pod bialym napisem - zero kafli z cieniem i duzym zaokragleniem - kadry PIONOWE, bo material klienta to piony i to one pokazuja roslinę od ziemi po czubek - cienkie linie i numeracja zamiast pudelek - papier zamiast czystej bieli, ciemna zielen ze znaku jako kotwica Barwy zmierzone na znaku klienta, nie dobrane pod branze. Skala trzymana przy wzorcu arlek.pl: H1 do 44 px. ========================================================================= */ :root { /* --- barwy ze znaku firmowego --- */ --zf-zielen: #00722C; --zf-zielen-glebia: #005421; --zf-ciemna: #06381A; --zf-limonka: #87CA2B; /* --- papier i tekst --- */ /* Biel, nie bez. Papier #f7f5ef ciagnal cala strone w szarosc: pierwszy ekran mial nasycenie 0,125 przy 0,323 na starej stronie i tylko 1,9% barw innych niz zielen (stara: 23,4%). Kolor ma isc ze zdjec, a tlo ma go nie tlumic. */ --zf-papier: #ffffff; --zf-papier-2: #f1f7ee; /* chlodna, bardzo jasna zielen zamiast bezu */ --zf-cieply: #E8A33D; /* akcent ciepły: gradienty, plamy, dekoracja */ /* Ten sam akcent na TEKSCIE mial 2,16:1 na bieli przy progu 4,5 (numery w spisie uslug, bramka niewidoczne.py 19.08). Ciemniejszy ton trzyma charakter i przechodzi na obu tlach: 5,28 na bieli, 4,85 na papierze. */ --zf-cieply-tekst: #96600C; --zf-biel: #ffffff; --zf-tekst: #1b2119; --zf-tekst-2: #4d5a4a; --zf-linia: rgba(4, 48, 15, .16); --zf-linia-slaba: rgba(4, 48, 15, .08); --zf-linia-jasna: rgba(255, 255, 255, .18); /* --- odstepy, siatka 8 px --- */ --space-1: .25rem; --space-2: .5rem; --space-3: .75rem; --space-4: 1rem; --space-5: 1.5rem; --space-6: 2rem; --space-7: 2.5rem; --space-8: 3rem; --space-10: 4rem; --space-12: 5.5rem; --sekcja: clamp(3.5rem, 6vw, 6rem); --px: clamp(1.25rem, 4vw, 3.5rem); /* --- szerokosci: JEDEN system --- */ --w-tresc: 76rem; /* --- typografia --- */ /* Jedna rodzina na cala strone. Krój Fraunces z osiami SOFT i WONK byl charakterny, ale meczyl w czytaniu. Charakter niesie uklad i kreska ciecia, nie dziwny krzywy krój. */ --font-tyt: 'Figtree', 'Figtree zapasowy', system-ui, -apple-system, 'Segoe UI', sans-serif; --font-tekst: 'Figtree', 'Figtree zapasowy', system-ui, -apple-system, 'Segoe UI', sans-serif; --fs-h1: clamp(2rem, 1.5rem + 2vw, 2.75rem); /* max 44 px */ --fs-h2: clamp(1.6rem, 1.35rem + 1.1vw, 2.1rem); --fs-h3: clamp(1.12rem, 1.05rem + .32vw, 1.3rem); --fs-tekst: clamp(1rem, .97rem + .12vw, 1.075rem); --fs-maly: .875rem; --fs-nad: .74rem; --lh-ciasny: 1.16; --lh-sredni: 1.45; --lh-luzny: 1.68; /* --- barwy tekstu na ciemnym tle: byly rozsiane po arkuszu jako hexy --- */ --zf-na-ciemnym: #c3d2bc; --zf-na-ciemnym-mocny: #dfe7da; --zf-na-ciemnym-slaby: #b9c9b2; --zf-na-zielonym: #e2f0dc; --zf-ciemna-2: #0a3d16; /* --- promienie: jeden system --- */ --r: 6px; --r-duzy: 14px; --r-pelny: 999px; /* --- cienie: skala, jeden kierunek swiatla --- */ --cien-sm: 0 6px 18px -14px rgba(4, 48, 15, .55); --cien-md: 0 14px 30px -26px rgba(4, 48, 15, .75); --cien-lg: 0 24px 48px -30px rgba(4, 48, 15, .85); /* --- czasy: trzy, nie siedem --- */ --dur-szybko: 160ms; --dur-wolno: 320ms; --dur-obraz: 600ms; --ease: cubic-bezier(.25, 1, .5, 1); --dur: 200ms; } /* ---------------------------------------------------------------- reset */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; background: var(--zf-papier); color: var(--zf-tekst); font-family: var(--font-tekst); font-size: var(--fs-tekst); line-height: var(--lh-luzny); overflow-x: clip; -webkit-font-smoothing: antialiased; } body.zf-blokada { position: fixed; width: 100%; overflow: hidden; } img, svg, iframe { max-width: 100%; } img { height: auto; display: block; } h1, h2, h3, h4 { font-family: var(--font-tyt); font-weight: 700; line-height: var(--lh-ciasny); letter-spacing: -.015em; margin: 0; text-wrap: balance; } p { margin: 0 0 var(--space-4); text-wrap: pretty; } p:last-child { margin-bottom: 0; } a { color: var(--zf-zielen); text-underline-offset: 3px; } a:hover { color: var(--zf-zielen-glebia); } ul, ol { margin: 0 0 var(--space-4); padding-left: 1.15em; } :focus-visible { outline: 3px solid var(--zf-zielen); outline-offset: 3px; } .zf-skip { position: absolute; left: -9999px; top: 0; z-index: 200; background: var(--zf-ciemna); color: #fff; padding: var(--space-3) var(--space-5); } .zf-skip:focus { left: 0; color: #fff; } .container { width: 100%; max-width: var(--w-tresc); margin-inline: auto; padding-inline: var(--px); } /* Nadtytul: maly, rozstrzelony, z krotka kreska. Powtarza sie w kazdej sekcji i trzyma strone razem bez uzywania pudelek. */ .zf-nadtytul { display: flex; align-items: center; gap: var(--space-3); margin: 0 0 var(--space-4); font-size: var(--fs-nad); font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--zf-zielen); } .zf-nadtytul::before { content: ""; width: 2px; height: 14px; background: var(--zf-limonka); transform: rotate(45deg); flex: none; } .zf-nadtytul--jasny { color: var(--zf-limonka); } .zf-nadtytul--jasny::before { background: var(--zf-limonka); } /* --------------------------------------------------------- pasek gorny */ /* (pasek serwisowy jest teraz czescia naglowka — patrz nizej) */ /* ----------------------------------------------------------- naglowek */ /* Dwupoziomowy. Poziom 1: linia serwisowa, chowa sie po przewinieciu. Poziom 2: znak + haslo, menu numerowane, ciemna czapka telefonu dobita do prawej krawedzi OKNA. Znak systemu: ukosna kreska ciecia. */ .zf-snip { display: inline-block; width: 2px; height: 14px; background: var(--zf-limonka); transform: rotate(45deg); flex: none; } .zf-head { position: sticky; top: 0; z-index: 90; background: var(--zf-papier); transition: box-shadow var(--dur-wolno) var(--ease); } .zf-head--scroll { box-shadow: var(--cien-md); } .zf-head__top { height: 40px; overflow: hidden; border-bottom: 1px solid var(--zf-linia-slaba); transition: height var(--dur-wolno) var(--ease), opacity 200ms var(--ease); } .zf-head--scroll .zf-head__top { height: 0; opacity: 0; border-bottom-color: transparent; } .zf-head__toprow { height: 40px; display: flex; align-items: center; justify-content: space-between; gap: var(--space-5); font-size: .75rem; letter-spacing: .06em; color: var(--zf-tekst-2); } .zf-head__toprow a { color: var(--zf-tekst-2); text-decoration: none; transition: color var(--dur) var(--ease); } .zf-head__toprow a:hover { color: var(--zf-zielen); } .zf-head__topgrupa { display: flex; align-items: center; gap: var(--space-4); } .zf-head__topkropka { color: var(--zf-linia); } .zf-head__main { position: relative; border-bottom: 1px solid var(--zf-linia); } /* Zywa nitka pod headerem: limonka -> zielen -> zloto hortensji. */ .zf-head__main::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 3px; z-index: 3; background: linear-gradient(90deg, var(--zf-limonka) 0%, var(--zf-zielen) 45%, var(--zf-cieply) 100%); } /* Bar na pelnej szerokosci. Lewe wciecie liczone ta sama formula, ktora centruje .container — logo licuje z trescia sekcji co do piksela. Procent liczy sie od szerokosci body, wiec zadnego vw i zadnego rozjazdu od paska przewijania (50vw dawalo +14 px). */ .zf-head__bar { position: relative; height: 96px; display: flex; align-items: stretch; gap: clamp(1.25rem, 2.5vw, 2rem); padding-left: max(var(--px), calc((100% - var(--w-tresc)) / 2 + var(--px))); transition: height var(--dur-wolno) var(--ease); } /* Pasek glowny NIE zmienia wysokosci. Wczesniej kurczyl sie 96 -> 80 px, a linia serwisowa 40 -> 0 px, wiec nawigacja skakala o 47 px naraz. Teraz rusza sie wylacznie linia serwisowa: jeden ruch, 40 px. */ /* kreska ciecia przecinajaca linie naglowka pod znakiem: slad nozyc */ .zf-head__bar::after { content: ""; position: absolute; z-index: 2; left: max(var(--px), calc((100% - var(--w-tresc)) / 2 + var(--px))); bottom: -10px; width: 2px; height: 20px; background: var(--zf-limonka); transform: rotate(45deg); } /* znak + haslo: nazwa firmy siedzi w samym znaku, wiec obok stoi WYLACZNIE haslo klienta, w dwoch wierszach i pol stopnia grubiej niz reszta */ .zf-marka { display: flex; align-items: center; gap: var(--space-4); align-self: center; text-decoration: none; color: inherit; margin-right: auto; } .zf-marka__znak { width: 56px; height: 56px; object-fit: contain; flex: none; transition: width var(--dur-wolno) var(--ease), height var(--dur-wolno) var(--ease); } .zf-marka__haslo { display: block; font-family: var(--font-tyt); font-weight: 600; font-size: 1.06rem; line-height: 1.25; color: var(--zf-ciemna); padding-left: var(--space-4); border-left: 1px solid var(--zf-linia); white-space: nowrap; } .zf-marka__haslo span { display: block; } /* menu numerowane: rzemieslniczy spis tresci. Numery z licznika CSS, wiec dopisanie pozycji w panelu nie wymaga zmian w kodzie. */ .zf-nav { margin-left: 0; align-self: stretch; } .zf-nav__lista { display: flex; height: 100%; list-style: none; margin: 0; padding: 0; counter-reset: zfnav; } .zf-nav__lista > li { position: relative; display: flex; align-items: center; counter-increment: zfnav; } .zf-nav__lista > li > a { position: relative; display: flex; align-items: baseline; gap: 7px; padding: 8px 13px; font-size: .8rem; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; text-decoration: none; color: var(--zf-ciemna); white-space: nowrap; transition: color var(--dur) var(--ease); } .zf-nav__lista > li > a::before { content: counter(zfnav, decimal-leading-zero); font-family: var(--font-tyt); font-style: italic; font-weight: 400; font-size: .7rem; letter-spacing: 0; color: var(--zf-zielen); } /* podkreslenie: limonkowa kreska rosnie od lewej, jak prowadzone ciecie */ .zf-nav__lista > li > a::after { content: ""; position: absolute; left: 13px; right: 13px; bottom: 26px; height: 2px; background: var(--zf-limonka); transform: scaleX(0); transform-origin: left; transition: transform var(--dur-wolno) var(--ease); bottom: calc(50% - 17px); } .zf-nav__lista > li > a:hover { color: var(--zf-zielen); } .zf-nav__lista > li > a:hover::after { transform: scaleX(1); } .zf-nav__lista > li.current-menu-item > a, .zf-nav__lista > li.current_page_item > a, .zf-nav__lista > li.current-menu-ancestor > a, .zf-nav__lista > li.current_page_ancestor > a { color: var(--zf-zielen); } .zf-nav__lista > li.current-menu-item > a::after, .zf-nav__lista > li.current_page_item > a::after, .zf-nav__lista > li.current-menu-ancestor > a::after, .zf-nav__lista > li.current_page_ancestor > a::after { transform: scaleX(1); background: var(--zf-zielen); } /* biezaca pozycja tez reaguje na najechanie — inaczej hover "nic nie zmienia" */ .zf-nav__lista > li.current-menu-item > a:hover, .zf-nav__lista > li.current_page_item > a:hover, .zf-nav__lista > li.current-menu-ancestor > a:hover, .zf-nav__lista > li.current_page_ancestor > a:hover { color: var(--zf-ciemna); } .zf-nav__lista > li.current-menu-item > a:hover::after, .zf-nav__lista > li.current_page_item > a:hover::after, .zf-nav__lista > li.current-menu-ancestor > a:hover::after, .zf-nav__lista > li.current_page_ancestor > a:hover::after { background: var(--zf-limonka); } /* dropdown: papier, zielona krawedz gorna, hover z kreska ciecia */ .zf-nav__lista .sub-menu { position: absolute; top: 100%; left: 0; z-index: 99; min-width: 16.5rem; list-style: none; margin: 0; padding: var(--space-1) 0; background: var(--zf-papier); border: 1px solid var(--zf-linia); border-top: 2px solid var(--zf-zielen); opacity: 0; visibility: hidden; transform: translateY(8px); transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease), visibility 0s linear var(--dur); } .zf-nav__lista > li:hover > .sub-menu, .zf-nav__lista > li:focus-within > .sub-menu { opacity: 1; visibility: visible; transform: translateY(0); transition-delay: 0s; } .zf-nav__lista .sub-menu a { position: relative; display: block; padding: 12px 22px 12px 24px; font-size: .9rem; font-weight: 500; text-decoration: none; color: var(--zf-ciemna); transition: color var(--dur) var(--ease), padding-left var(--dur) var(--ease); } .zf-nav__lista .sub-menu li + li a { border-top: 1px solid var(--zf-linia-slaba); } .zf-nav__lista .sub-menu a::before { content: ""; position: absolute; left: 14px; top: 50%; width: 2px; height: 12px; margin-top: -6px; background: var(--zf-limonka); transform: rotate(45deg) translateX(-6px); opacity: 0; transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease); } .zf-nav__lista .sub-menu a:hover { color: var(--zf-zielen); padding-left: 32px; } .zf-nav__lista .sub-menu a:hover::before { opacity: 1; transform: rotate(45deg) translateX(0); } /* czapka telefonu: ciemny blok dobity do prawej krawedzi okna. Naglowek konczy sie akcentem, nie powietrzem. */ .zf-tel { display: flex; flex-direction: column; justify-content: center; gap: 2px; padding-left: 26px; padding-right: max(30px, var(--px)); background: var(--zf-zielen); border-left: 3px solid var(--zf-limonka); color: #fff; text-decoration: none; transition: background var(--dur) var(--ease); } .zf-tel:hover { background: var(--zf-ciemna); color: #fff; } .zf-tel__nad { font-size: .64rem; font-weight: 600; letter-spacing: .22em; text-transform: uppercase; color: rgba(247, 245, 239, .72); } .zf-tel__nr { font-family: var(--font-tyt); font-weight: 600; font-size: 1.18rem; letter-spacing: .02em; color: #fff; white-space: nowrap; } .zf-burger { display: none; align-self: center; width: 46px; height: 46px; padding: 0; background: none; border: 1px solid var(--zf-linia); cursor: pointer; color: var(--zf-ciemna); } .zf-burger__kreski { display: block; width: 20px; margin: 0 auto; } .zf-burger__kreski span { display: block; height: 2px; background: currentColor; transition: transform var(--dur) var(--ease), opacity var(--dur) var(--ease); } .zf-burger__kreski span + span { margin-top: 5px; } .zf-burger[aria-expanded="true"] .zf-burger__kreski span:nth-child(1) { transform: translateY(7px) rotate(45deg); } .zf-burger[aria-expanded="true"] .zf-burger__kreski span:nth-child(2) { opacity: 0; } .zf-burger[aria-expanded="true"] .zf-burger__kreski span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } /* menu mobilne: pelnoekranowa nakladka na papierze, ciemna stopka z telefonem */ .zf-mob { position: fixed; inset: 0; z-index: 100; background: var(--zf-papier); display: flex; flex-direction: column; transform: translateX(100%); visibility: hidden; transition: transform var(--dur-wolno) var(--ease), visibility 0s linear 300ms; } .zf-mob--otwarte { transform: translateX(0); visibility: visible; transition-delay: 0s; } .zf-mob__top { display: flex; align-items: center; justify-content: space-between; padding: var(--space-4) var(--px); border-bottom: 1px solid var(--zf-linia); } .zf-mob__top img { width: 46px; height: 46px; object-fit: contain; } .zf-mob__zamknij { width: 46px; height: 46px; display: grid; place-items: center; background: none; border: 1px solid var(--zf-linia); color: var(--zf-ciemna); cursor: pointer; font-size: 20px; line-height: 1; } .zf-mob__nav { flex: 1; overflow-y: auto; padding: var(--space-6) var(--px); } .zf-mob__lista { list-style: none; margin: 0; padding: 0; counter-reset: zfmob; } .zf-mob__lista > li { counter-increment: zfmob; } .zf-mob__lista > li > a { display: flex; align-items: baseline; gap: 14px; padding: 15px 0; border-bottom: 1px solid var(--zf-linia-slaba); font-family: var(--font-tyt); font-weight: 500; font-size: 1.55rem; text-decoration: none; color: var(--zf-ciemna); } .zf-mob__lista > li > a::before { content: counter(zfmob, decimal-leading-zero); font-style: italic; font-weight: 400; font-size: .8rem; color: var(--zf-zielen); } .zf-mob__lista .sub-menu { list-style: none; margin: 0; padding: 0; } .zf-mob__lista .sub-menu a { display: block; padding: 11px 0 11px 38px; font-size: 1rem; text-decoration: none; color: var(--zf-tekst-2); border-bottom: 1px solid var(--zf-linia-slaba); } .zf-mob__stopka { padding: var(--space-5) var(--px) var(--space-6); background: var(--zf-ciemna); border-top: 3px solid var(--zf-limonka); display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); } .zf-mob__tel { font-family: var(--font-tyt); font-weight: 600; font-size: 1.35rem; color: #fff; text-decoration: none; } .zf-mob__social { display: flex; gap: var(--space-4); } .zf-mob__social a { display: inline-flex; align-items: center; min-height: 44px; font-size: .82rem; letter-spacing: .08em; text-transform: uppercase; color: rgba(247, 245, 239, .85); text-decoration: none; } .zf-mob__social a:hover { color: var(--zf-limonka); } /* ------------------------------------------------------------- przyciski */ .zf-btn { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; min-height: 50px; padding: 0 var(--space-6); font-family: var(--font-tekst); font-size: .98rem; font-weight: 600; letter-spacing: .01em; text-decoration: none; border: 1px solid transparent; transition: background var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease); } .zf-btn--glowny { background: var(--zf-zielen); color: #fff; } .zf-btn--glowny:hover { background: var(--zf-ciemna); color: #fff; } .zf-btn--pusty { border-color: var(--zf-zielen); color: var(--zf-zielen); } .zf-btn--pusty:hover { background: var(--zf-zielen); color: #fff; } .zf-btn--jasny { background: var(--zf-limonka); color: var(--zf-ciemna); } .zf-btn--jasny:hover { background: #fff; color: var(--zf-ciemna); } .zf-btn--pusty-jasny { border-color: var(--zf-linia-jasna); color: #fff; } .zf-btn--pusty-jasny:hover { border-color: #fff; background: rgba(255,255,255,.1); color: #fff; } .zf-link-strzalka { display: inline-flex; align-items: center; gap: .5rem; min-height: 44px; font-size: .95rem; font-weight: 600; text-decoration: none; color: var(--zf-zielen); border-bottom: 1px solid transparent; } .zf-link-strzalka .zf-ikona { transition: transform var(--dur) var(--ease); } .zf-link-strzalka:hover { border-bottom-color: var(--zf-limonka); } .zf-link-strzalka:hover .zf-ikona { transform: translateX(4px); } /* ==================================================== PIERWSZY EKRAN ==== Papier z mgielka gradientu, znak wodny „topiary", tresc po lewej, pion 3:4 w LUKOWEJ ramie z passe-partout po prawej. Luk cytuje wneke wycieta w bukszpanowej bryle klienta. Pasek miejscowosci zamyka ekran. ======================================================================= */ .zf-hero { position: relative; overflow: clip; border-bottom: 1px solid var(--zf-linia); /* Kolor w tle zamiast czystej bieli: zloto hortensji przy zdjeciu, limonka za tekstem, zielen przy ziemi. Wyrazne (10-16%), nie mgielka — uwaga Pawla: "hero musi byc bardziej zywe, cos w tle, kolor". */ background: radial-gradient(52rem 34rem at 86% 18%, rgba(232, 163, 61, .16), transparent 62%), radial-gradient(44rem 30rem at 4% 4%, rgba(135, 202, 43, .14), transparent 58%), radial-gradient(60rem 26rem at 50% 106%, rgba(0, 114, 44, .12), transparent 66%), var(--zf-papier); } /* znak wodny: nazwa rzemiosla konturem, 13% zieleni */ .zf-hero::before { content: 'topiary'; position: absolute; z-index: 0; top: -18px; right: -24px; font-family: var(--font-tyt); font-style: italic; font-weight: 400; font-size: clamp(110px, 15vw, 196px); line-height: 1; letter-spacing: .01em; color: transparent; -webkit-text-stroke: 1.5px rgba(0, 114, 44, .22); pointer-events: none; } @supports not (-webkit-text-stroke: 1px black) { .zf-hero::before { color: rgba(0, 114, 44, .05); } } .zf-hero__in { position: relative; z-index: 1; display: grid; /* Fotografia dostaje wiekszosc: bylo 7fr tekst / 5fr zdjecie i ogrod zajmowal 42% ekranu. Stara strona miala kwiaty na cala szerokosc i dlatego czytala sie "ogrodowo". */ grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(2rem, 4.5vw, 4rem); align-items: center; min-height: 560px; padding-top: var(--space-8); padding-bottom: var(--space-8); } .zf-kicker { display: flex; align-items: center; gap: 12px; font-size: .75rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--zf-zielen); margin: 0 0 var(--space-5); } .zf-hero__tyt { font-size: clamp(1.95rem, 1.4rem + 1.9vw, 2.75rem); /* sufit 44 px */ line-height: 1.12; letter-spacing: -.01em; color: var(--zf-ciemna); margin-bottom: var(--space-5); } /* jedno slowo w italiku z WONK: podpis rzemieslnika w srodku tytulu */ .zf-hero__tyt em { font-weight: 600; color: var(--zf-zielen); } .zf-hero__lead { font-size: 1.12rem; line-height: 1.65; color: var(--zf-tekst-2); margin-bottom: var(--space-7); } .zf-hero__akcje { display: flex; align-items: center; gap: var(--space-4) var(--space-7); flex-wrap: wrap; } .zf-cta-tel { display: flex; flex-direction: column; gap: 1px; } .zf-cta-tel__nad { font-size: .68rem; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--zf-tekst-2); } .zf-cta-tel__nr { display: inline-flex; align-items: center; min-height: 44px; font-family: var(--font-tyt); font-weight: 600; font-size: 1.38rem; color: var(--zf-ciemna); text-decoration: none; background-image: linear-gradient(var(--zf-limonka), var(--zf-limonka)); background-repeat: no-repeat; background-position: 0 100%; background-size: 0 2px; transition: background-size var(--dur-wolno) var(--ease), color var(--dur) var(--ease); } .zf-cta-tel__nr:hover { color: var(--zf-zielen); background-size: 100% 2px; } .zf-fakty { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-5); margin: var(--space-8) 0 0; padding: var(--space-5) 0 0; border-top: 1px solid var(--zf-linia); } .zf-fakty dt { font-size: .68rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--zf-zielen); margin-bottom: 4px; } .zf-fakty dd { margin: 0; font-size: .95rem; color: var(--zf-ciemna); } /* kolumna wizualna: lukowa rama z passe-partout jak plansza botaniczna */ .zf-hero__wizual { position: relative; justify-self: end; width: min(100%, 430px); } .zf-hero__rama { position: relative; z-index: 1; margin: 0; background: #fffdf7; border: 1px solid rgba(232, 163, 61, .35); border-radius: var(--r-pelny) var(--r-pelny) 0 0; padding: 14px; box-shadow: var(--cien-md); } .zf-hero__rama img, .zf-hero__foto { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; object-position: center 20%; border-radius: var(--r-pelny) var(--r-pelny) 0 0; } .zf-hero__podpis { margin-top: 12px; font-size: .68rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--zf-tekst-2); text-align: right; } /* limonkowy luk za rama: pojedyncza kreska, nie ornament */ .zf-hero__luk { position: absolute; z-index: 0; left: -52px; bottom: -34px; width: 220px; height: 220px; pointer-events: none; } /* pieczec ze znakiem: spina kolumne wizualna z trescia */ .zf-hero__pieczec { position: absolute; z-index: 2; left: -42px; bottom: 52px; width: 88px; height: 88px; display: grid; place-items: center; background: var(--zf-papier); border: 1px solid var(--zf-linia); border-radius: 50%; } .zf-hero__pieczec img { width: 62px; height: 62px; object-fit: contain; } /* pasek miejscowosci: przewijana linia, pauza po najechaniu */ .zf-pas { position: relative; z-index: 1; display: flex; align-items: stretch; border-top: 0; background: var(--zf-zielen); color: #fff; } .zf-pas__etykieta { flex: none; display: flex; align-items: center; padding: 0 22px 0 var(--px); font-size: .68rem; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--zf-ciemna); border-right: 0; background: var(--zf-limonka); white-space: nowrap; } .zf-pas__okno { display: flex; overflow: hidden; gap: 30px; flex: 1 1 auto; -webkit-mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent); mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent); } .zf-pas__tor { display: flex; align-items: center; gap: 30px; flex: none; min-width: max-content; list-style: none; /* zero wlasnych marginesow — odstep na styku torow robi gap OKNA, ten sam co gap wewnatrz toru, wiec miedzy miastami jest ROWNO */ padding: 15px 0; margin: 0; animation: zf-marquee 38s linear infinite; } .zf-pas:hover .zf-pas__tor { animation-play-state: paused; } .zf-pas__tor li { font-size: .82rem; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: #fff; white-space: nowrap; } .zf-pas__tor li.zf-snip { height: 12px; } @keyframes zf-marquee { from { transform: translateX(0); } to { transform: translateX(calc(-100% - 30px)); } } /* ------------------------------------------------- delikatne tla sekcji Zostala TYLKO mgielka: miekkie plamy swiatla, zero rysowanych linii. Kreski (pionowe linie, konturowe spirale) usuniete 17.08 na uwage Pawla: przeszkadzaly w czytaniu. Sekcje odznaczaja sie plaska naprzemienna tonacja bialy / papier-2. */ .zf-bg-mgla { position: relative; isolation: isolate; } .zf-bg-mgla::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(58rem 34rem at 82% -12%, rgba(135, 202, 43, .10), transparent 62%), radial-gradient(46rem 30rem at -8% 108%, rgba(0, 114, 44, .07), transparent 64%); } /* wejscie hero: sekwencja tylko przy braku preferencji ograniczenia ruchu */ @media (prefers-reduced-motion: no-preference) { @keyframes zf-up { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } } .zf-hero__tresc > * { animation: zf-up .55s var(--ease) both; } .zf-hero__tresc > *:nth-child(1) { animation-delay: .05s; } .zf-hero__tresc > *:nth-child(2) { animation-delay: .13s; } .zf-hero__tresc > *:nth-child(3) { animation-delay: .21s; } .zf-hero__tresc > *:nth-child(4) { animation-delay: .29s; } .zf-hero__tresc > *:nth-child(5) { animation-delay: .37s; } .zf-hero__wizual { animation: zf-up .65s .25s var(--ease) both; } } /* ====================================================== KATALOG FORM ==== */ .zf-formy { /* Bylo: ciemna zielen tuz pod hero — caly pierwszy widok ciazyl. Zdjecia roslin graja mocniej na jasnym; ciemna zostaje stopka. */ background: var(--zf-papier-2); color: var(--zf-tekst); padding-block: var(--sekcja); } .zf-formy__glowa { margin-bottom: var(--space-8); } .zf-formy__tyt { font-size: var(--fs-h2); color: var(--zf-ciemna); margin-bottom: var(--space-3); } .zf-formy__lead { font-size: 1.05rem; line-height: var(--lh-sredni); color: var(--zf-tekst-2); } /* Dla kogo: wyliczenie klienta jednym rzedem, kropki jako separatory. Bez ramek i kafli — to ma czytac sie jak podpis pod tekstem sekcji. */ .zf-formy__dla { list-style: none; margin: var(--space-4) 0 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-4); font-size: var(--fs-maly); font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--zf-zielen); } .zf-formy__dla li { display: flex; align-items: center; gap: var(--space-4); } .zf-formy__dla li:not(:last-child)::after { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--zf-limonka); } .zf-formy__lista { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-5); } .zf-forma { margin: 0; } .zf-forma__ramka { aspect-ratio: 3 / 4; overflow: hidden; background: #dfe8d9; border-radius: var(--r); } .zf-forma__foto { width: 100%; height: 100%; object-fit: cover; object-position: center top; transition: transform var(--dur-obraz) var(--ease), filter var(--dur-obraz) var(--ease); } .zf-forma:hover .zf-forma__foto { transform: scale(1.04); } .zf-forma__opis { display: block; padding-top: var(--space-4); border-top: 1px solid var(--zf-linia); margin-top: var(--space-4); } .zf-forma__nr { display: block; color: var(--zf-cieply-tekst); font-family: var(--font-tyt); font-size: .82rem; letter-spacing: .12em; color: var(--zf-zielen); margin-bottom: var(--space-1); } .zf-forma__tytul { font-size: 1.12rem; color: var(--zf-ciemna); margin-bottom: var(--space-2); } .zf-forma__zdanie { font-size: .93rem; line-height: var(--lh-sredni); color: var(--zf-tekst-2); margin: 0; } /* =========================================================== USLUGI ==== */ .zf-uslugi { padding-block: var(--sekcja); background: var(--zf-biel); } .zf-uslugi__glowa { margin-bottom: var(--space-7); } .zf-uslugi__tyt { font-size: var(--fs-h2); color: var(--zf-ciemna); } .zf-uslugi__lista { border-top: 1px solid var(--zf-linia); } .zf-usluga { display: grid; grid-template-columns: 5.5rem minmax(0, 1fr) auto; gap: var(--space-6); align-items: start; padding-block: var(--space-7); border-bottom: 1px solid var(--zf-linia); transition: background var(--dur) var(--ease); } .zf-usluga:hover { background: var(--zf-papier-2); } .zf-usluga__nr { display: flex; flex-direction: column; gap: var(--space-3); color: var(--zf-zielen); } .zf-usluga__nr span { font-family: var(--font-tyt); font-size: 1.15rem; letter-spacing: .08em; color: var(--zf-cieply-tekst); } .zf-usluga__tyt { font-size: var(--fs-h3); margin-bottom: var(--space-3); color: var(--zf-ciemna); } .zf-usluga__tyt a { display: inline-flex; align-items: center; min-height: 44px; color: inherit; text-decoration: none; } .zf-usluga__tyt a:hover { color: var(--zf-zielen); } .zf-usluga__punkty { list-style: none; margin: 0; padding: 0; columns: 2; column-gap: var(--space-6); color: var(--zf-tekst-2); line-height: var(--lh-sredni); } .zf-usluga__punkty li { position: relative; padding-left: 1.1rem; margin-bottom: var(--space-2); break-inside: avoid; } .zf-usluga__punkty li::before { content: ""; position: absolute; left: 0; top: .68em; width: 6px; height: 6px; background: var(--zf-limonka); } .zf-usluga__wiecej { align-self: center; } /* ============================================================ O NAS ==== */ .zf-onas { padding-block: var(--sekcja); /* sekcja odznacza sie od bialych sasiadow */ background: var(--zf-papier-2); border-block: 1px solid var(--zf-linia-slaba); } .zf-onas__in { display: grid; grid-template-columns: minmax(0, .82fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 4.5rem); /* stretch, nie center — zdjecie i tekst konczą sie na tej samej linii */ align-items: stretch; } .zf-onas__foto { display: flex; } .zf-onas__foto img { width: 100%; height: 100%; object-fit: cover; } .zf-onas__tresc { display: flex; flex-direction: column; } /* Justowanie robilo rzeki bialych dziur miedzy slowami — najlepiej widac to w trzecim akapicie sekcji o firmie na 1440 px („Panstwa. Zadbamy, aby Panstwa rosliny nabraly nowego,"). Tresc lewo-wyrownana, tak jak w calym serwisie. `text-wrap: pretty` zdejmuje sieroty na koncu akapitu. */ .zf-onas__tresc .zf-proza { text-align: left; text-wrap: pretty; } .zf-onas__tresc .zf-btn { margin-top: auto; align-self: flex-start; } .zf-onas__foto img { width: 100%; } .zf-onas__tyt { font-size: var(--fs-h2); margin-bottom: var(--space-4); color: var(--zf-ciemna); } .zf-onas__tresc .zf-btn { margin-top: var(--space-6); } .zf-proza { line-height: var(--lh-luzny); } .zf-proza h2 { font-size: var(--fs-h2); margin: var(--space-8) 0 var(--space-3); color: var(--zf-ciemna); } .zf-proza h3 { font-size: var(--fs-h3); margin: var(--space-6) 0 var(--space-2); color: var(--zf-zielen); } .zf-proza h2:first-child, .zf-proza h3:first-child { margin-top: 0; } .zf-proza ul { padding-left: 0; list-style: none; } .zf-proza ul li { position: relative; padding-left: 1.15rem; margin-bottom: var(--space-2); } .zf-proza ul li::before { content: ""; position: absolute; left: 0; top: .7em; width: 6px; height: 6px; background: var(--zf-limonka); } /* ======================================================== REALIZACJE ==== */ .zf-realizacje { padding-block: var(--sekcja); } .zf-realizacje__glowa { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: var(--space-4); margin-bottom: var(--space-6); } .zf-realizacje__tyt { font-size: var(--fs-h2); color: var(--zf-ciemna); } .zf-galeria { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-3); } .zf-galeria__kafel { position: relative; margin: 0; aspect-ratio: 4 / 3; overflow: hidden; background: var(--zf-papier-2); border-radius: var(--r); } /* Kadr wiodacy zajmuje cztery pola, ale trzyma TE SAMA proporcje co reszta, wiec rzedy nie skacza wysokoscia. */ .zf-galeria__kafel--duzy { grid-column: span 2; grid-row: span 2; } .zf-galeria__kafel img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-obraz) var(--ease); } .zf-galeria__kafel::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 55%, rgba(4, 48, 15, .28)); opacity: 0; transition: opacity var(--dur) var(--ease); } .zf-galeria__kafel:hover img { transform: scale(1.045); } .zf-galeria__kafel:hover::after { opacity: 1; } /* =========================================================== OBSZAR ==== */ .zf-obszar { padding-block: var(--sekcja); background: var(--zf-papier-2); border-block: 1px solid var(--zf-linia); } .zf-obszar__nazwy { font-family: var(--font-tyt); font-size: clamp(1.3rem, 1.05rem + 1.1vw, 1.85rem); line-height: 1.5; color: var(--zf-ciemna); margin-bottom: var(--space-4); } .zf-obszar__m { white-space: nowrap; } .zf-obszar__kropka { color: var(--zf-limonka); margin-inline: .5rem; } .zf-obszar__tekst { color: var(--zf-tekst-2); line-height: var(--lh-sredni); } /* ============================================================== CTA ==== */ .zf-cta { background: var(--zf-zielen); color: #fff; padding-block: var(--sekcja); } .zf-cta__in { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-6); } .zf-cta__tyt { font-size: var(--fs-h2); color: #fff; margin-bottom: var(--space-2); } .zf-cta__lead { color: var(--zf-na-zielonym); line-height: var(--lh-sredni); margin: 0; } .zf-cta__zakres { margin: var(--space-3) 0 0; color: #fff; font-weight: 600; } .zf-cta__akcje { display: flex; flex-wrap: wrap; gap: var(--space-3); } /* ==================================================== PARTNERZY ========= Znak partnera obok opisu wspolpracy. Znak w bialym polu, zeby ciemna zielen jego logo nie zlewala sie z tlem sekcji. */ .zf-part { padding-block: var(--sekcja); background: var(--zf-papier-2); } .zf-part__glowa { margin-bottom: var(--space-8); } .zf-part__tyt { font-size: var(--fs-h2); color: var(--zf-ciemna); } .zf-partner { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: var(--space-8); align-items: start; } .zf-partner + .zf-partner { margin-top: var(--space-8); } .zf-partner__znak { background: #fff; border-radius: var(--r); padding: var(--space-4); box-shadow: var(--cien-sm); display: grid; place-items: center; } .zf-partner__znak img { width: 100%; height: auto; display: block; border-radius: calc(var(--r) - 4px); } .zf-partner__nazwa { font-size: var(--fs-h3); color: var(--zf-ciemna); margin-bottom: var(--space-1); } .zf-partner__adres { color: var(--zf-tekst-2); margin-bottom: var(--space-4); } .zf-partner__tresc .zf-proza p { margin-bottom: var(--space-3); } .zf-partner__tresc .zf-link-strzalka { margin-top: var(--space-4); } @media (max-width: 767px) { .zf-partner { grid-template-columns: 1fr; gap: var(--space-5); } .zf-partner__znak { width: 168px; } } /* ================================================= TYTUL PODSTRONY ==== */ .zf-tytul { position: relative; background: var(--zf-papier); border-bottom: 1px solid var(--zf-linia); isolation: isolate; } .zf-tytul__in { padding-block: clamp(2.5rem, 5vw, 4rem); } .zf-tytul--foto { background: var(--zf-ciemna); border-bottom: 0; } .zf-tytul--foto .zf-tytul__in { padding-block: clamp(3.5rem, 7vw, 6rem); color: #fff; } .zf-tytul__foto { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; } .zf-tytul__zaslona { position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(4,48,15,.86) 0%, rgba(4,48,15,.62) 55%, rgba(4,48,15,.42) 100%); } .zf-tytul__h1 { font-size: var(--fs-h1); color: var(--zf-ciemna); } .zf-tytul--foto .zf-tytul__h1 { color: #fff; } .zf-tytul--foto .zf-nadtytul { color: var(--zf-limonka); } .zf-tresc { padding-block: var(--sekcja); } /* ============================================================= MAPA ==== */ .zf-mapa { margin-top: var(--space-8); border: 1px solid var(--zf-linia); } .zf-mapa iframe { display: block; width: 100%; height: 420px; border: 0; } /* ============================================================== 404 ==== */ .zf-404 { padding-block: var(--space-12); } .zf-404__kod { font-family: var(--font-tyt); font-size: 3.4rem; font-weight: 600; color: var(--zf-limonka); margin: 0; line-height: 1; } .zf-404__tyt { font-size: var(--fs-h1); margin: var(--space-4) 0 var(--space-3); color: var(--zf-ciemna); } .zf-404__lead { color: var(--zf-tekst-2); line-height: var(--lh-sredni); } .zf-404__linki { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-6); } /* =========================================================== STOPKA ==== */ .zf-stopka { background: var(--zf-ciemna); color: var(--zf-na-ciemnym); } .zf-stopka__in { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-8); padding-block: var(--space-10); } .zf-stopka__znak { width: 76px; height: 76px; object-fit: contain; } .zf-stopka__haslo { margin: var(--space-5) 0 0; font-family: var(--font-tyt); font-size: 1.15rem; color: #fff; line-height: var(--lh-sredni); } .zf-stopka__tyt { font-family: var(--font-tekst); font-size: var(--fs-nad); font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--zf-limonka); margin-bottom: var(--space-4); } .zf-stopka__adres { font-style: normal; line-height: var(--lh-sredni); margin-bottom: var(--space-3); } .zf-stopka__link, .zf-stopka__menu a, .zf-stopka__social a { display: inline-flex; align-items: center; gap: .45rem; min-height: 44px; color: var(--zf-na-ciemnym); text-decoration: none; transition: color var(--dur) var(--ease); } .zf-stopka__link { display: flex; } .zf-stopka__link:hover, .zf-stopka__menu a:hover, .zf-stopka__social a:hover { color: var(--zf-limonka); } .zf-stopka__menu { list-style: none; margin: 0; padding: 0; } .zf-stopka__social { display: flex; flex-wrap: wrap; gap: var(--space-5); margin-top: var(--space-4); } .zf-stopka__dol { border-top: 1px solid var(--zf-linia-jasna); font-size: var(--fs-maly); } .zf-stopka__dol-in { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3); padding-block: var(--space-5); } .zf-stopka__dol a { display: inline-flex; align-items: center; min-height: 24px; color: var(--zf-na-ciemnym); } .zf-stopka__dol a:hover { color: var(--zf-limonka); } /* ------------------------------------------ plywajaca sluchawka --------- */ .zf-telefon-mobile { position: fixed; right: var(--space-4); bottom: var(--space-4); z-index: 80; display: none; align-items: center; justify-content: center; width: 56px; height: 56px; background: var(--zf-zielen); color: #fff; border-radius: 50%; /* bialy pierscien: na zielonej sekcji CTA kolo zlewalo sie z tlem */ box-shadow: 0 0 0 2px rgba(255, 255, 255, .88), var(--cien-md); opacity: 0; transform: translateY(12px); pointer-events: none; transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease); } .zf-telefon-mobile--widoczna { opacity: 1; transform: translateY(0); pointer-events: auto; } /* -------------------------------------------------------------- cookies */ /* Pasek ciasteczek ma byc przypisem, nie sekcja strony. Na komputerze waska karta w rogu, na telefonie jedna linia u dolu. */ .zf-cookies { position: fixed; z-index: 95; left: var(--space-5); bottom: var(--space-5); right: auto; max-width: 27rem; display: flex; align-items: center; gap: var(--space-4); padding: var(--space-3) var(--space-4); background: var(--zf-ciemna); color: var(--zf-na-ciemnym); font-size: .78rem; line-height: 1.4; box-shadow: var(--cien-lg); transform: translateY(calc(100% + var(--space-5))); transition: transform var(--dur-wolno) var(--ease); } .zf-cookies--widoczny { transform: translateY(0); } .zf-cookies__tekst { margin: 0; } .zf-cookies__tekst a { color: var(--zf-limonka); } .zf-cookies__ok { flex: none; min-height: 34px; padding: 0 var(--space-4); font-size: .78rem; background: var(--zf-limonka); color: var(--zf-ciemna); font-family: inherit; font-size: .9rem; font-weight: 600; border: 0; cursor: pointer; transition: background var(--dur) var(--ease); } .zf-cookies__ok:hover { background: #fff; } /* ------------------------------------------------------------ animacje */ .zf-anim { opacity: 0; transform: translateY(14px); transition: opacity var(--dur-wolno) var(--ease), transform var(--dur-wolno) var(--ease); } .zf-anim--widoczny { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; scroll-behavior: auto !important; } .zf-anim { opacity: 1; transform: none; } } /* ========================================================================== TABLET ========================================================================== */ @media (max-width: 1259px) { /* Czapka telefonu ZOSTAJE, tylko chudnie. Wczesniej znikala calkiem przy 1259 px, a plywajaca sluchawka pojawia sie dopiero przy 999 — miedzy tymi wartosciami, czyli na typowym laptopie, w naglowku nie bylo ZADNEGO sposobu na zadzwonienie (zmierzone na 1000, 1100, 1200, 1259). */ .zf-tel { padding-inline: var(--space-5); } .zf-tel__nad { display: none; } .zf-tel__nr { font-size: 1rem; } .zf-head__bar { gap: clamp(.75rem, 1.6vw, 1.25rem); } .zf-nav__lista { gap: clamp(.15rem, .8vw, .7rem); } .zf-nav__lista a { font-size: .74rem; letter-spacing: .06em; } /* Haslo przy znaku zabiera ~250 px. Na laptopie wazniejsze jest, zeby zmiescily sie menu i telefon — haslo i tak stoi w hero oraz w stopce. */ .zf-marka__haslo { display: none; } .zf-marka__znak { width: 48px; height: 48px; } } @media (max-width: 1099px) { .zf-formy__lista { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-6); } } @media (max-width: 999px) { /* linia serwisowa na dotyku: odnosniki maja miec pole 44 px */ .zf-head__top { height: auto; min-height: 44px; } .zf-head__toprow { height: auto; min-height: 44px; } .zf-head__toprow a { display: inline-flex; align-items: center; min-height: 44px; } .zf-head--scroll .zf-head__top { min-height: 0; height: 0; } .zf-burger { display: flex; align-items: center; justify-content: center; margin-left: auto; /* pasek ma wciecie tylko z lewej, wiec bez tego przycisk dotykal prawej krawedzi ekranu */ margin-right: var(--px); } .zf-nav { display: none; } .zf-tel { display: none; } /* Na tablecie kolumna ma 704 px, a zdjecie od klienta 535 px — rozciagniete na pelna szerokosc widocznie miekło. Zdjecie i tekst obok siebie: kadr schodzi do ~300 px, czyli ponizej rozdzielczosci pliku, i jest ostry. Jedna kolumna dopiero na telefonie. */ .zf-onas__in { grid-template-columns: minmax(0, .78fr) minmax(0, 1fr); gap: var(--space-6); } /* Tablet: ramka trzyma proporcje zdjecia zamiast rozciagac sie do wysokosci tekstu. Przy rozciaganiu `object-fit: cover` powiekszal kadr o 44 procent (296x370 w polu 296x532) i bylo to widac. */ /* srodek, nie gora: przy proporcji 4:5 zdjecie jest nizsze od tekstu, a pusty pas pod spodem wygladal jak niedokonczony uklad */ .zf-onas__foto { aspect-ratio: 4 / 5; align-self: center; } .zf-onas__foto img { height: 100%; } .zf-usluga { grid-template-columns: 3.5rem minmax(0, 1fr); gap: var(--space-4); } .zf-usluga__wiecej { grid-column: 2; } .zf-stopka__in { grid-template-columns: 1fr 1fr; gap: var(--space-7); } .zf-stopka__kol--marka { grid-column: 1 / -1; } .zf-telefon-mobile { display: flex; } .zf-stopka__dol a { min-height: 44px; } /* plywajaca sluchawka zaslania prawy rog dolnego paska stopki ("Wykonanie: Arlek.pl" bylo pod kolem na 768 px; przy 72 px brzegi stykaly sie co do piksela — 92 daje realny przeswit) */ .zf-stopka__dol-in { padding-right: 92px; } .zf-proza li > a[href^="tel:"], .zf-proza li > a[href^="mailto:"] { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; } } /* ========================================================================== TELEFON ========================================================================== */ @media (max-width: 939px) { .zf-hero__in { grid-template-columns: 1fr; min-height: 0; gap: var(--space-6); } /* Na telefonie ogrod otwiera strone — jak na starej, gdzie kwiaty byly pierwszym, co sie widzialo. Przy zdjeciu POD tekstem pierwszy ekran telefonu byl czysto tekstowy, a 70% ruchu to telefony. */ .zf-hero__wizual { order: -1; justify-self: center; width: min(100%, 420px); margin-left: 0; } .zf-hero__rama img { max-height: 54svh; } .zf-hero__podpis { text-align: left; } .zf-hero::before { top: auto; bottom: 180px; right: -30px; } } @media (max-width: 640px) { .zf-marka__haslo { font-size: .88rem; padding-left: var(--space-3); } .zf-marka__znak { width: 46px; height: 46px; } .zf-head__topgrupa:last-child { display: none; } .zf-hero__wizual { margin-left: 34px; width: min(calc(100% - 34px), 320px); } .zf-hero__pieczec { left: -34px; width: 72px; height: 72px; } .zf-hero__pieczec img { width: 52px; height: 52px; } .zf-pas__etykieta { padding: 0 14px 0 var(--px); } .zf-fakty { grid-template-columns: 1fr; gap: var(--space-4); } .zf-formy__lista { grid-template-columns: 1fr; gap: var(--space-7); } .zf-forma__ramka { aspect-ratio: 4 / 3; } .zf-usluga__punkty { columns: 1; } .zf-galeria { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2); } .zf-galeria__kafel--duzy { grid-column: 1 / -1; grid-row: auto; } .zf-stopka__in { grid-template-columns: 1fr; } .zf-cta__in { flex-direction: column; align-items: flex-start; } .zf-cta__akcje { width: 100%; } .zf-cta__akcje .zf-btn { flex: 1 1 100%; } .zf-mapa iframe { height: 320px; } .zf-cookies { left: 0; right: 0; bottom: 0; max-width: none; gap: var(--space-3); padding: var(--space-2) var(--px); padding-right: 76px; font-size: .72rem; line-height: 1.35; transform: translateY(110%); } /* prog z CLAUDE.md: pasek na telefonie do 80 px wysokosci */ .zf-cookies__tekst { max-height: 2.7em; overflow: hidden; } .zf-cookies__ok { min-height: 32px; padding-inline: var(--space-3); font-size: .72rem; } } /* ============================================ IKONY SPOLECZNOSCIOWE ==== Przyklejone do lewej krawedzi okna, tylko na duzym ekranie. Na telefonie zabralyby miejsce obok plywajacej sluchawki. ======================================================================= */ .zf-social-bok { position: fixed; left: 0; top: 50%; z-index: 70; transform: translateY(-50%); display: flex; flex-direction: column; } .zf-social-bok a { display: flex; align-items: center; justify-content: center; width: 46px; height: 46px; background: var(--zf-ciemna); color: #fff; border-bottom: 1px solid rgba(255, 255, 255, .12); transition: background var(--dur) var(--ease), width var(--dur) var(--ease); } .zf-social-bok a:last-child { border-bottom: 0; } .zf-social-bok a:hover { background: var(--zf-zielen); width: 54px; color: #fff; } /* ================================================= W PRZYGOTOWANIU ===== PELNY EKRAN na podstronie w trybie prezentacji. To nie jest nakladka nad trescia ani pasek nad trescia — to CALA zawartosc podstrony. Powod: przy pasku klient oglada niedopracowana podstrone i ocenia ja jako wersje koncowa (Pawel, RUTECKI 16.08.2026). Wysokosc w `svh`, nie `vh` — na iOS pasek adresu zmienia `vh` w trakcie przewijania i sekcja skacze. ======================================================================= */ .zf-budowa { display: flex; align-items: center; min-height: calc(100svh - 136px); padding-block: var(--sekcja); } .zf-budowa__in { position: relative; } .zf-budowa__tyt { font-size: clamp(1.9rem, 1.3rem + 2.4vw, 2.75rem); color: var(--zf-ciemna); margin-bottom: var(--space-5); } .zf-budowa__lead { font-size: 1.08rem; line-height: var(--lh-sredni); color: var(--zf-tekst-2); margin-bottom: var(--space-8); } .zf-budowa__punkty { list-style: none; margin: 0 0 var(--space-8); padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-6); border-top: 1px solid var(--zf-linia); padding-top: var(--space-6); } .zf-budowa__punkty li { display: flex; flex-direction: column; gap: var(--space-2); } .zf-budowa__punkty strong { font-size: .95rem; font-weight: 700; color: var(--zf-ciemna); } .zf-budowa__punkty span:last-child { font-size: .9rem; line-height: var(--lh-sredni); color: var(--zf-tekst-2); } .zf-budowa__akcje { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4) var(--space-7); } .zf-budowa__znak { position: absolute; right: 0; top: 0; width: 72px; height: 72px; object-fit: contain; opacity: .5; } @media (max-width: 899px) { .zf-budowa { min-height: calc(100svh - 116px); } .zf-budowa__punkty { grid-template-columns: 1fr; gap: var(--space-5); } .zf-budowa__znak { position: static; margin-bottom: var(--space-6); opacity: .7; } .zf-budowa__in { display: flex; flex-direction: column; } .zf-budowa__znak { order: -1; } } @media (max-width: 999px) { .zf-social-bok { display: none; } } /* ================================================= HERO Z WIDEO ========= Film ogrodu gra na KAZDEJ szerokosci (Pawel 17.08: hero ze zdjeciem wygladalo mobilnie jak poprzednia wersja strony). Telefon dostaje wariant 720 px ~0,5 MB — dobor pliku robi JS, nie CSS. ======================================================================= */ .zf-hero__tlo { display: none; } .zf-hero--wideo .zf-hero__tlo { display: block; position: absolute; inset: 0; z-index: 0; } .zf-hero__film { width: 100%; height: 100%; object-fit: cover; object-position: center 62%; } /* rama ze zdjeciem i znak wodny schodza — film JEST ogrodem */ .zf-hero--wideo .zf-hero__wizual, .zf-hero--wideo::before { display: none; } .zf-hero--wideo { background: var(--zf-ciemna); border-bottom: 0; } /* tekst na filmie: jasny. Jasniejsza limonka: zwykla miala 4,32:1 na klatce filmu przy progu 4,5. */ .zf-hero--wideo .zf-kicker { color: #A9E15E; } .zf-hero--wideo .zf-kicker .zf-snip { background: var(--zf-limonka); } .zf-hero--wideo .zf-hero__tyt { color: #fff; } .zf-hero--wideo .zf-hero__tyt em { color: var(--zf-limonka); } .zf-hero--wideo .zf-hero__lead { color: rgba(255, 255, 255, .94); } .zf-hero--wideo .zf-fakty { border-top-color: rgba(255, 255, 255, .28); } .zf-hero--wideo .zf-fakty dt { color: #A9E15E; } .zf-hero--wideo .zf-fakty dd { color: #fff; } .zf-hero--wideo .zf-cta-tel__nad { color: rgba(255, 255, 255, .75); } .zf-hero--wideo .zf-cta-tel__nr { color: #fff; } .zf-hero--wideo .zf-cta-tel__nr:hover { color: var(--zf-limonka); } .zf-hero--wideo .zf-btn--glowny { background: var(--zf-limonka); color: var(--zf-ciemna); } .zf-hero--wideo .zf-btn--glowny:hover { background: #fff; color: var(--zf-ciemna); } @media (min-width: 940px) { /* Gradient od lewej: czytelnosc tekstu na filmie. Zmierzone na najjasniejszej klatce: przy .82/.55 bialy lead mial 3,45:1, a limonkowy kicker 2,48:1. Wzmocnione do progu AA. */ .zf-hero__cien { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(6, 56, 26, .92) 0%, rgba(6, 56, 26, .78) 46%, rgba(6, 56, 26, .16) 74%, transparent 90%), linear-gradient(180deg, rgba(6, 56, 26, .30) 0%, transparent 32%); } .zf-hero--wideo .zf-hero__in { /* tekst w strefie mocnego gradientu — kolumna wezsza, film szerszy */ grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); min-height: clamp(540px, 62vh, 660px); } } @media (max-width: 939px) { /* Telefon: tekst lezy WPROST na filmie, wiec zaslona pionowa i mocna u gory, gdzie stoi naglowek. Wysokosc trzymana z dala od 100svh — pas miejscowosci ma wystawac i zapraszac do przewijania. */ .zf-hero__cien { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(6, 56, 26, .90) 0%, rgba(6, 56, 26, .74) 52%, rgba(6, 56, 26, .52) 100%); } .zf-hero--wideo .zf-hero__in { min-height: min(74svh, 600px); align-content: center; } /* Etykiety faktow: limonka miala 3,38:1 na jasnej trawie u dolu kadru (prog 4,5). Na telefonie biel — jak wartosci obok. */ .zf-hero--wideo .zf-fakty dt { color: #fff; } } /* Przy prefers-reduced-motion JS nie ustawia src —