/* ========================================================================= Klaczno.pl - motyw zbudowany na wzorcu Bitterroot Bunkhouse (Showit), wskazanym przez Danusie 5.08.2026. System wyciagniety z oryginalu, nie z oka: kanwa 1200 px, DWA kolory, CZTERY style tekstu. title Carefree Serif Semibold 100 px lh 1 UPPERCASE heading Paso Robles (skrypt) 45 px lh 0.8 capitalize subheading Montserrat 700 14 px 0.2em UPPERCASE paragraph Poppins 400 16 px lh 1.4 FONTY: ze wzorca wziety jest UKLAD, kroje sa wlasne. Stan po 7.08.2026: DUZE SLOWO -> BRIGHTWALL, pismo odreczne (Envato, licencja Danusi) naglowki sekcji, nazwy domow, naglowki kart WSZYSTKO INNE -> GOOGLE SANS FLEX, font marki Danusi proza, etykiety, wersaliki nad tytulami, liczby Oba pliki lezą u nas w assets/fonts. Zero polaczen do Google Fonts. TO JEST UKLAD Z JEJ GRAFIK W CANVIE, nie wymysl: duze slowo pedzlem, mniejszy tekst wersalikami. Motyw mial to przez trzy dni ODWROTNIE - wielkie wersaliki grotesku, a pismo odreczne zepchniete do malego nadtytulu - i wtedy post na Facebooku i strona wygladaly jak z dwoch roznych firm. Po drodze bylo szesc podejsc i warto pamietac, czego dowiodly: 1. Bodoni Moda + Ms Madi + Poppins - najblizej wzorca, ale NIECZYTELNE. 2. Playfair Display - czytelne, ale strona przestala przypominac wzorzec. 3. Instrument Serif - trafione co do proporcji. 4. Roboto - kroj z jej grafik w Canvie, ale JEDNA plaska wariacja na cala strone. 5. Google Sans Flex na tytulach - jedna rodzina, trzy osie zamiast jednej wagi. 6. Brightwall na tytulach, Google Sans Flex na reszcie - stan obecny. Pomiar, ktory kiedys rozstrzygnal proporcje i wciaz sie przydaje: we wzorcu napis "ABOUT THE CABIN" ma 620 px przy stopniu 100 px. Playfair dawal 920 px (+48%), Roboto Bold 905 px (+46%), Instrument Serif 649 px (+5%). Wniosek: przy migracji na wzorcu decyduja PROPORCJE, nie ksztalt liter, i da sie je zmierzyc zamiast zgadywac. KOLORY tez sa wlasne, nie z wzorca: granat #2D2A6C prosto z sygnetu logo. ========================================================================= */ /* ========================================================================= GOOGLE SANS FLEX - jeden plik, trzy osie, siedem ról na stronie. Plik jest wyciety z pelnej wersji wariacyjnej z ~/Library/Fonts skryptem `narzedzia/podzbior-google-sans-flex.py`. Z szesciu osi oryginalu zostaly trzy: wght 400-800 grubosc kreski wdth 55-100 SZEROKOSC liter - tego Roboto nie mial w ogole opsz 9-144 stopien optyczny: rysunek litery inny dla 12 px, inny dla 100 px Osie sa PRZYCIETE do zakresow, ktorych strona faktycznie uzywa. To nie jest tylko oszczednosc (208 kB -> 97 kB): dolna granica wagi 400 sprawia, ze cienkich wag po prostu NIE DA SIE wlaczyc, ani z CSS, ani z panelu. Zasada „nic ponizej 400" jest wtedy pilnowana przez plik, nie przez czyjas pamiec. Osiami sterujemy przez zwykle wlasciwosci CSS - `font-weight` (wght) i `font-stretch` (wdth) - a nie przez `font-variation-settings`, bo ta ostatnia nadpisuje wszystkie osie na raz i pierwsza pomylka gasi pozostale. `opsz` ustawia sie sama z `font-optical-sizing: auto`, czyli dokladnie tak, jak os stopnia optycznego byla pomyslana: rysunek dobiera sie do stopnia pisma. PO CO TO WSZYSTKO: kazda rola ma wlasna wariacje jednej rodziny. Pytania FAQ i srodtytuly ida wezsze (wdth 82), liczby jeszcze wezsze (75), a male etykiety - odwrotnie - PELNA szerokoscia i lzejsza kreska, bo wersaliki 13 px czyta sie inaczej niz naglowek 40 px. To jest cala roznica miedzy „jeden font na stronie" a „jeden font, ktory umie sie zachowac inaczej w kazdym miejscu". Waskiej skrajnosci (wdth 62) juz nie uzywamy - byla pod wielkie wersaliki, ktore zastapilo pismo odreczne. Zostaje w pliku, bo nic nie kosztuje, a przy nastepnym pomysle na naglowki bedzie pod reka. ========================================================================= */ @font-face { font-family: 'Google Sans Flex'; src: url('../fonts/google-sans-flex-klaczno.woff2') format('woff2-variations'), url('../fonts/google-sans-flex-klaczno.woff2') format('woff2'); font-weight: 400 800; font-stretch: 55% 100%; font-style: normal; font-display: swap; } /* Brightwall: font z Envato, licencja Danusi. W oryginale NIE MIAL polskich znakow (brakowalo ĄĆĘŁŃŚŹŻ i malych) - dorobione ze skladowych, ktore byly w pliku: glifow `acute`, `ogonek` i `dotaccent`. Odstepy akcentow zdjete z gotowych zlozen autora (aacute, oacute, Aacute, Oacute), zeby zachowac jego rytm. Kreska w L dorysowana, bo w foncie nie bylo jej w zadnej postaci. Skrypt Danusi: [[polskie_znaki.py]] w katalogu roboczym sesji. */ @font-face { font-family: 'Brightwall'; src: url('../fonts/Brightwall-Regular-PL.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: 'Brightwall'; src: url('../fonts/Brightwall-Italic-PL.woff2') format('woff2'); font-weight: 400; font-style: italic; font-display: swap; } :root { /* DWA KOLORY, ale juz wlasne, nie z wzorca. Granat #2D2A6C jest wziety wprost z sygnetu logo Klaczna i to samo tlo dziala w materialach robionych w Canvie. Uklad zostaje z Bitterroot, paleta przechodzi na marke, zeby post na Facebooku i strona byly z jednego swiata. Kontrast granatu na jasnym: 11,18:1. */ --ciemny: #2d2a6c; --kremowy: #f2f1ea; --czern: #1b1940; /* Tekst drugoplanowy MUSI byc ciemniejszy niz linie. Wersja na 50% dawala kontrast 3,02:1 przy wymaganych 4,5:1 - stad osobne tokeny na TEKST i na LINIE. */ --ciemny-tekst: #6a6893; /* 4,62:1 na jasnym */ --kremowy-tekst: #9d9bb4; /* 4,69:1 na granacie */ --ciemny-50: rgba(45, 42, 108, .5); --ciemny-20: rgba(45, 42, 108, .2); --ciemny-10: rgba(45, 42, 108, .1); --kremowy-50: rgba(242, 241, 234, .5); --kremowy-20: rgba(242, 241, 234, .2); --kremowy-10: rgba(242, 241, 234, .1); /* JEDNA rodzina na wszystko oprocz podpisow odrecznych. Rozne role roznia sie osiami, nie krojem - patrz blok o osiach na gorze pliku. Skrypt to BRIGHTWALL, ten sam co w materialach z Canvy - Danusia ma na niego licencje Envato. Plik nie mial polskich znakow, wiec zostaly dorobione. */ --font: 'Google Sans Flex', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --skrypt: 'Brightwall', 'Snell Roundhand', cursive; /* SZEROKOSCI. Nazwane, zeby nie rozjechaly sie po pliku na przypadkowe liczby. Regula jest prosta i odwrotna do intuicji: im WIEKSZY stopien pisma, tym WEZSZE litery. Duzy napis ma stac slupem, maly ma byc otwarty. */ --w-tytul: 62%; /* wielkie naglowki - waski slup jak we wzorcu */ --w-srodek: 82%; /* srodtytuly, pytania FAQ, cytaty */ --w-liczba: 75%; /* liczby wyrozniane: cena, ocena, numer pozycji */ --w-normal: 100%; /* proza, etykiety, wszystko male */ /* kanwa wzorca */ --kanwa: 1200px; --marg: 40px; } /* --- baza ----------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; scroll-padding-top: 90px; -webkit-text-size-adjust: 100%; } body { margin: 0; background: var(--kremowy); color: var(--ciemny); font-family: var(--font); font-optical-sizing: auto; font-size: 17px; font-weight: 400; line-height: 1.55; overflow-x: hidden; -webkit-font-smoothing: antialiased; } img, svg, video, iframe { max-width: 100%; display: block; } img { height: auto; } p { margin: 0 0 1.1em; } p:last-child { margin-bottom: 0; } a { color: inherit; } .sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } .skip-link { position: absolute; left: -9999px; top: 0; z-index: 999; background: var(--ciemny); color: var(--kremowy); padding: 12px 20px; } .skip-link:focus { left: 0; } :focus-visible { outline: 2px solid currentColor; outline-offset: 4px; } .wrap { width: min(100% - 2 * var(--marg), var(--kanwa)); margin-inline: auto; } /* ========================================================================= Cztery style tekstu. Poza nimi nie ma nic wiecej. ========================================================================= */ /* CYFRY. Liczby czyta sie inaczej niz slowa: wszedzie, gdzie licza sie liczby, wymuszamy cyfry rownej wysokosci, a w kolumnach danych dodatkowo o jednakowej szerokosci, zeby staly w pionie. Zostaje z czasow Playfaira, ktory domyslnie dawal cyfry tekstowe - ale kosztuje jedna linijke i chroni przed powtorka. */ .tytul, .tytul-maly, .proza h2, .faq summary, .kontakt-dane .wartosc, .odleglosci b, .spis-nr, .ocena b, .proza ol > li::before { font-variant-numeric: lining-nums; font-feature-settings: 'lnum' 1; } .metryka dd, .odleglosci b, .kontakt-dane .wartosc { font-variant-numeric: lining-nums tabular-nums; font-feature-settings: 'lnum' 1, 'tnum' 1; } /* 1. TYTUL - PISMO ODRECZNE. ZMIANA Z 7.08.2026, wskazana przez Danusie na czterech zrzutach z rzedu: naglowki sekcji, nazwy domow i naglowki kart maja isc odrecznie. To nie jest wymiana kroju dla samej wymiany, tylko odwrocenie ukladu na TEN, ktory Danusia od dawna stosuje w swoich grafikach w Canvie: duze slowo -> pedzlowy skrypt (Brightwall) mniejszy tekst -> wersaliki grotesku Motyw mial to na odwrot - wielkie wersaliki grotesku, a skrypt zepchniety do malego nadtytulu - i przez to strona i post na Facebooku byly z dwoch swiatow. Wersalikow NIE WLACZAMY - pismo odreczne w kapitalikach przestaje wygladac jak pismo. ============================================================================ POPRAWKA 7.08.2026 (druga tego dnia), po uwadze Danusi: „ten pisany font ma za duze naglowki", „tu nachodzi na siebie". Oba objawy maja jedno zrodlo i oba dalo sie ROZSTRZYGNAC POMIAREM zamiast dobierania na oko. 1. STOPIEN. Poprzednia wersja PODNIOSLA stopien pisma, bo wysokosc wersalika w Brightwallu to 0,68 firetu wobec 0,72 w grotesku. To byla ZLA MIARA. W pedzlowym skrypcie masy nie robi wersalik, tylko swasze - a te siegaja 1,494 firetu nad linie pisma. Wlasciwa miara to WYSOKOSC RYSUNKU: napis „Dwa domy," przy stopniu 100 px Brightwall rysunek 183 px grotesk WERSALIKAMI rysunek 76 px <- to zastapilismy Czyli przy tym samym stopniu skrypt niesie 2,4 razy wieksza mase. Stad wrazenie, ze naglowki spuchly. Stopien schodzi z 5,6rem na 3,6rem: rysunek ma wtedy 105 px, czyli wciaz o 38% wiecej obecnosci niz stary grotesk (bo ma byc gwiazda strony), ale juz nie krzyczy. 2. INTERLINIA. Liczona na RASTRZE, nie na obrysach - zliczane sa piksele, w ktorych kreska jednego wiersza LEZY NA kresce drugiego (stopien 64 px): para wierszy lh 1,32 1,45 1,60 1,90 Niezapominajka/i Slonecznik 203 150 ~65 4 Kaszuby zaczynaja/sie za furtka 173 104 ~44 0 Dwa domy,/dwa kwiaty 85 68 ~41 0 Pelne rozejscie wymaga 1,9, ale to juz nie interlinia tylko przepasc. 1,6 zostawia lekkie musniecie swasza o petle - a tak wlasnie SKLADA SIE pismo pedzlowe. Kolizji z obrazka Danusi („Dwa domy, / dwa kwiaty") nie ma. 3. WYSTAWANIE POZA WIERSZ. Przy interlinii 1,6 linia pisma stoi 1,3735 firetu od gory pola wiersza, a rysunek siega 1,494 w gore i 0,486 w dol. Czyli 0,12 firetu wystaje NAD pole i 0,26 POD nie - i to jest powod, dla ktorego ogony „bylismy" siadaly na akapicie w szpicy. Oddajemy to WYPELNIENIEM, nie marginesem: wypelnienie sie nie skleja z marginesem sasiada, wiec rezerwacja miejsca zostaje niezalezna od tego, co stoi nizej. */ .tytul { font-family: var(--skrypt); font-weight: 400; font-size: clamp(2rem, 5vw, 3.6rem); line-height: 1.6; text-transform: none; letter-spacing: 0; padding: .14em 0 .26em; /* rezerwa na rysunek wychodzacy poza pole wiersza */ margin: 0 0 .18em; } /* Male tytuly (naglowki kart) tez ida odrecznie, ale nie moga zejsc za nisko - Brightwall ponizej ~22 px zaczyna sie zlewac. Dolna granica trzyma to nad ta wartoscia. Interlinia moze byc nizsza niz w duzych tytulach, bo te naglowki sa jednowierszowe; wypelnienie na ogony zostaje. */ .tytul-maly { font-size: clamp(1.5rem, 2.2vw, 1.8rem); line-height: 1.4; } /* 2. KICKER - to, co bylo skryptem: krotka etykieta nad tytulem. Po odwroceniu idzie wersalikami grotesku, czyli tak jak w jej grafikach podpisy pod duzym slowem. Kolor przygaszony, zeby nie konkurowal z tytulem. */ .kicker { font-family: var(--font); font-weight: 700; font-stretch: var(--w-normal); font-size: 13px; letter-spacing: .12em; line-height: 1.5; text-transform: uppercase; color: var(--ciemny-tekst); margin: 0; } .blok-ciemny .kicker, .na-ciemnym .kicker, .blok-foto .kicker { color: var(--kremowy-tekst); } /* Pismo odreczne jako osobna klasa zostaje - uzywa jej podpis w powiekszeniu. Ta sama poprawka co w `.tytul`: nizszy stopien i interlinia z pomiaru rastra, nie 1,05 (przy 1,05 wiersze siedzialy jeden na drugim). */ .skrypt { font-family: var(--skrypt); font-weight: 400; font-size: clamp(1.4rem, 2.6vw, 2.1rem); line-height: 1.5; padding: .12em 0 .24em; margin: 0; } .skrypt-maly { font-size: clamp(1.15rem, 1.9vw, 1.45rem); } /* 3. ETYKIETA - rozstrzelone wersaliki 13 px. Tu idziemy DOKLADNIE ODWROTNIE niz w tytule: pelna szerokosc i waga 600 zamiast 700. Wersaliki w tym stopniu pisma sa najtrudniejsze do czytania na calej stronie, bo nie maja wydluzen gornych ani dolnych, po ktorych oko rozpoznaje ksztalt slowa. Wszystko, co je otwiera - szerokosc, swiatlo miedzy literami, lzejsza kreska - pracuje na czytelnosc. Stopien optyczny schodzi przy tym sam do ~13 i font podaje rysunek liter przewidziany na maly stopien. */ .etyk, .menu a, .lnk, .btn, .metryka dt, .stopka-h, .okruszki { font-family: var(--font); font-weight: 600; font-stretch: var(--w-normal); font-size: 13px; letter-spacing: .1em; line-height: 1.3; text-transform: uppercase; } /* Przyciski i odnosniki niosa akcje, wiec zostaja przy 700. */ .btn, .lnk { font-weight: 700; } /* 4. TEKST */ .tresc { font-size: 17px; line-height: 1.55; } .tresc-przygaszony { color: var(--ciemny-tekst); } .blok-ciemny .tresc-przygaszony, .na-ciemnym .tresc-przygaszony { color: var(--kremowy-tekst); } /* WYROZNIENIE W PROZIE. Do 7.08.2026 nie bylo go nigdzie i akapity czytalo sie jak sciane - uwaga Danusi z tego dnia. Wyroznienie niesie WAGA I KOLOR na raz, nie sama waga. Powod jest praktyczny: proza drugoplanowa stoi w przygaszonym `--ciemny-tekst`, wiec samo pogrubienie w tym samym kolorze ledwie odstaje. Wyciagniecie frazy do pelnego atramentu robi z niej to, czym ma byc: miejsce, w ktorym oko zatrzymuje sie przy przegladaniu i od razu ma odpowiedz („bez doplaty", „drewno w cenie"). Jedna fraza na akapit. Dwie to juz nie jest wyroznienie, tylko druga sciana. */ .tresc b, .tresc strong, .proza b, .proza strong, .odp b, .odp strong, .ramka b, .ramka strong { font-weight: 700; color: var(--ciemny); } .blok-ciemny b, .blok-ciemny strong, .na-ciemnym b, .na-ciemnym strong, .blok-foto b, .blok-foto strong { color: var(--kremowy); } /* ========================================================================= IKONY Zestaw Lucide, sciezki 1:1 z pliku zrodlowego (kl_icon_paths w functions.php). GDZIE WCHODZA: tam, gdzie kotwicza CALA GRUPE - naglowek listy wyposazenia, wiersz danych kontaktowych, sposob rezerwacji, fakt w hero. Ikona ma tam powiedziec „to jest o kuchni" zanim ktos przeczyta slowo „Kuchnia". GDZIE NIE WCHODZA: przy kazdym wierszu z osobna. Ta sama ikona trzy razy pod soba przestaje byc kotwica i robi sie wypunktowaniem, czyli szumem. Dlatego pod naglowkiem „Kuchnia" jest szesc pozycji i ANI JEDNEJ ikony wiecej. Nie wchodza tez tam, gdzie by KLAMALY: przy wi-fi, ktorego w standardzie nie ma. Kreska 1.5 zamiast domyslnych 2 - ikona ma miec ciezar etykiety obok ktorej stoi, a nie przekrzykiwac ja. Skala: 13 px w linii tekstu, 15 px w przycisku naglowka, 16 px przy etykiecie grupy, 22 px w kontrolkach galerii, 24 px hamburger. ========================================================================= */ .ico { flex: none; } /* Etykieta z ikona. Ikona jest przygaszona wzgledem napisu: wiedzie oko do wiersza, ale to napis niesie tresc. Na `baseline` ikona siadalaby na linii pisma i wisiala za wysoko przy wersalikach - stad wyrownanie do srodka. */ .etyk-ico { display: inline-flex; align-items: center; gap: 9px; } .etyk-ico .ico { color: var(--ciemny-tekst); } .blok-ciemny .etyk-ico .ico, .na-ciemnym .etyk-ico .ico, .blok-foto .etyk-ico .ico { color: var(--kremowy-tekst); } /* --- odnosnik z szewronem, jedyny wzor linku we wzorcu ------------------- */ .lnk { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: inherit; transition: gap .2s ease; } .lnk svg { width: 13px; height: 13px; flex: none; } .lnk:hover { gap: 16px; } /* --- przycisk: pigulka -------------------------------------------------- ZMIANA 7.08.2026, decyzja Danusi: „prostokaty ostre buttons zamien na pills". Wczesniej przyciski byly ostrymi prostokatami, bo wzorzec Bitterroot takie ma. Wypelnienie w poziomie idzie z 34 na 38 px. Nie dla samej ozdoby: w pigulce skrajne piksele pola to juz luk, wiec przy tym samym wypelnieniu napis stoi optycznie blizej krawedzi niz w prostokacie i przycisk wyglada na ciasny. Zaokraglenie 999px zamiast konkretnej wartosci - promien ma isc za wysokoscia przycisku, a ta zmienia sie z wypelnieniem i stopniem pisma w pasku. */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 17px 38px; border: 1px solid currentColor; border-radius: 999px; text-decoration: none; cursor: pointer; background: transparent; color: inherit; transition: background-color .25s ease, color .25s ease; } .btn svg { width: 13px; height: 13px; } .btn-pelny { background: var(--ciemny); color: var(--kremowy); border-color: var(--ciemny); } .btn-pelny:hover { background: transparent; color: var(--ciemny); } .btn-jasny { background: var(--kremowy); color: var(--ciemny); border-color: var(--kremowy); } .btn-jasny:hover { background: transparent; color: var(--kremowy); } .btn-obrys:hover { background: var(--ciemny); color: var(--kremowy); } .na-ciemnym .btn-obrys:hover { background: var(--kremowy); color: var(--ciemny); } /* Przycisk Booking.com w ich wlasnej barwie, ze znakiem slownym z assets/img. Znak jest lokalny, zeby strona nie odpytywala ich serwera. */ .btn-booking { background: #003580; color: #fff; border-color: #003580; gap: 12px; padding: 15px 30px; } /* Na granatowym bloku firmowy blekit Bookinga daje 1,10:1 i przycisk przepada. Tam odwracamy go na jasne tlo, co jest zgodne z ich wlasnym znakiem. */ .btn-booking:hover { background: #00224f; border-color: #00224f; color: #fff; } .blok-ciemny .btn-booking, .blok-foto .btn-booking, .na-ciemnym .btn-booking { background: var(--kremowy); border-color: var(--kremowy); color: #003580; } .blok-ciemny .btn-booking svg, .blok-foto .btn-booking svg, .na-ciemnym .btn-booking svg { color: #003580; } .blok-ciemny .btn-booking:hover, .blok-foto .btn-booking:hover, .na-ciemnym .btn-booking:hover { background: #fff; border-color: #fff; color: #00224f; } .btn-booking .btn-booking-znak { display: inline-flex; align-items: center; } .btn-booking svg { width: auto; height: 14px; color: #fff; transform: translateY(-1px); } /* Blok na zdjeciu. We wzorcu sekcja "jak zarezerwowac" lezy na fotografii, a ramki maja cienki obrys na wpol przezroczysty. Plaska czern gubila glebie. */ .blok-foto { position: relative; isolation: isolate; background: var(--ciemny); color: var(--kremowy); } .blok-foto-tlo { position: absolute; inset: 0; z-index: -2; } .blok-foto-tlo img { width: 100%; height: 100%; object-fit: cover; } .blok-foto::after { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(27, 25, 64,.86) 0%, rgba(27, 25, 64,.74) 45%, rgba(27, 25, 64,.88) 100%); } .blok-foto .ramka { border-color: var(--kremowy-50); backdrop-filter: blur(2px); } /* --- bloki ---------------------------------------------------------------- */ .blok { padding: clamp(52px, 6.4vw, 82px) 0; } .blok-ciemny { background: var(--ciemny); color: var(--kremowy); } .blok-kremowy { background: var(--kremowy); color: var(--ciemny); } .kreska { height: 2px; background: currentColor; opacity: .85; border: 0; margin: 0; } /* ========================================================================= Naglowek i nawigacja Pasek jest KREMOWY na kazdej podstronie, takze nad hero. Powod: logo Klaczna to czarny logotyp z kolorowym tulipanem kaszubskim, wiec na ciemnym tle albo znika, albo trzeba je odbarwic. Kolorowe logo wygrywa z przezroczystym paskiem. ========================================================================= */ .naglowek { position: sticky; top: 0; z-index: 100; background: var(--kremowy); color: var(--ciemny); border-bottom: 1px solid var(--ciemny-20); transition: box-shadow .3s ease; } .naglowek.przyklejony { box-shadow: 0 6px 24px rgba(45, 42, 108, .13); } .naglowek-in { display: flex; align-items: center; gap: 20px; min-height: 82px; } .logo { flex: none; line-height: 0; } .logo img { height: 44px; width: auto; } #menu-glowne { margin-left: auto; } .menu { display: flex; align-items: center; gap: 30px; list-style: none; margin: 0; padding: 0; } .menu li { margin: 0; position: relative; } .menu a { text-decoration: none; padding: 6px 0; display: block; } .menu a:hover { text-decoration: underline; text-underline-offset: 6px; } .menu .current-menu-item > a, .menu .current_page_item > a { text-decoration: underline; text-underline-offset: 6px; } .menu .sub-menu { position: absolute; top: 100%; left: -18px; min-width: 230px; z-index: 5; background: var(--kremowy); border: 1px solid var(--ciemny-20); list-style: none; margin: 12px 0 0; padding: 8px; opacity: 0; visibility: hidden; transition: .18s ease; box-shadow: 0 12px 30px rgba(45, 42, 108, .16); } .menu li:hover > .sub-menu, .menu li:focus-within > .sub-menu { opacity: 1; visibility: visible; } .menu .sub-menu a { padding: 10px 12px; } /* przycisk Zadzwon w pasku - zawsze widoczny, takze na telefonie */ .naglowek-cta { flex: none; margin-left: 4px; order: 5; } .naglowek-cta .btn { padding: 13px 27px; } .naglowek-cta .btn svg { width: 15px; height: 15px; } .naglowek-cta .nr { display: none; } /* Kontrolki kwadratowe ida za przyciskami w kolo: hamburger, znaki spolecznosciowe, powrot na gore i sterowanie galeria. Zostawienie ostrego kwadratu obok pigulki wygladaloby na niedokonczona zmiane, a nie na decyzje. */ /* Stopka menu rozwijanego. Na desktopie menu jest paskiem, wiec blok jest ukryty - te same rzeczy stoja juz w naglowku i w stopce strony. Pokazuje sie dopiero razem z panelem, ponizej 1000 px (regula nizej). */ .menu-stopka { display: none; } .menu-toggle { display: none; width: 46px; height: 46px; flex: none; border-radius: 50%; background: transparent; border: 1px solid var(--ciemny-20); color: inherit; cursor: pointer; align-items: center; justify-content: center; } .menu-toggle-x { display: none; } .menu-toggle[aria-expanded="true"] .menu-toggle-x { display: block; } .menu-toggle[aria-expanded="true"] .menu-toggle-ico:first-child { display: none; } /* ========================================================================= HERO Wersja z 5.08 miala nad zdjeciem OSIEM rzeczy na raz: skrypt, dwuwierszowy tytul, drugi skrypt, przycisk, odnosnik, etykiete z lewej, etykiete z prawej i przewijany pasek na dole. Kazda z nich zabierala uwage osobno, a wszystkie staly na najruchliwszym kadrze w calym serwisie - bocian ze skrzydlami dokladnie pod napisem. Werdykt Danusi 7.08: „hero jest tragiczne, za duzo sie dzieje". Co zostalo zrobione: - jeden tor czytania zamiast trzech. Napis schodzi w DOL i do LEWEJ, do krawedzi kanwy. Gora kadru zostaje pusta, czyli bocian jest zdjeciem, a nie tlem pod literami. - dwie boczne etykiety zdjete. Niosly to samo, co pierwsze zdanie pod tytulem. - przewijany pasek zdjety. Powtarzal nazwe wsi cztery razy, ruszal sie i nic nie wnosil. - okragly „welon" pod napisem zdjety. Byl protezą pod wlosowe kreski didone. Grotesk go nie potrzebuje, a rozmyta plama nad woda widac. - zamiast tego jeden gradient od dolu: mocny tam, gdzie stoi tekst, przezroczysty tam, gdzie jest zdjecie. - na dole trzy fakty, ktore ludzie i tak sprawdzaja pierwsze. Zostalo piec elementow zamiast osmiu i jeden kierunek czytania zamiast trzech. ========================================================================= */ .hero { position: relative; isolation: isolate; color: var(--kremowy); overflow: hidden; } .hero-foto { position: absolute; inset: 0; z-index: -2; } /* Kadr jest wyzszy niz okno hero, wiec cos trzeba obciac. Obcinamy GORE nieba, nie dol z pomostem: bocian idzie wtedy o kilkadziesiat pikseli wyzej i przestaje przechodzic przez napis, a pomost prowadzi w gleb kadru dokladnie pod paskiem faktow, ktory i tak jest przycmiony. */ .hero-foto img { width: 100%; height: 100%; object-fit: cover; object-position: center bottom; } /* Przycmienie zdjecia. Ciezar niesie gradient OD LEWEJ, nie od dolu, i to jest caly pomysl: tekst stoi w lewej kolumnie, wiec przyciemniamy lewa kolumne, a prawa strona kadru - niebo, bocian, tafla - zostaje jasna. Wartosci sa POLICZONE, nie dobrane okiem. Metoda: odtworzyc kadr na kanwie razem z gradientami, wziac obrys kazdego napisu i zmierzyc NAJJASNIEJSZE tlo pod nim (98. centyl), czyli przypadek najgorszy dla kremowych liter. Do tego druga liczba, ktora pilnuje, zeby leczenie nie bylo gorsze od choroby: srednia jasnosc prawej polowy kadru wzgledem zdjecia bez gradientu. kicker 7,09:1 tytul 5,22 i 7,09:1 zdanie 8,75:1 fakty 10,63:1 zdjecie po prawej zachowane w 75% PISMO ODRECZNE ZMIENILO RACHUNEK. Pedzlowy skrypt ma kreske cienka jak wlos i nie ma sie za czym schowac - przy stopniu 115 px pierwszy wiersz siegal w jasna tafle jeziora i schodzil na 2,23:1. Rozwiazaniem nie bylo dalsze gaszenie zdjecia (przy 4,31:1 ze zdjecia zostawalo juz tylko 68%), tylko ZBICIE STOPNIA PISMA, zeby napis konczyl sie tam, gdzie kadr jest ciemny: 115 px napis 768 px, konczy sie na 888 3,16:1 90 px napis 598 px, konczy sie na 718 5,22:1 <- wybrane 77 px napis 512 px, konczy sie na 632 6,95:1 Czyli o czytelnosci napisu na fotografii decyduje nie tylko przycmienie, ale i to, DOKAD napis siega. Dwie odrzucone proby, obie zmierzone: - pierwsza wersja z 7.08 dawala podpisowi odrecznemu 2,23:1; - wersja z mocnym gradientem od dolu wyciagala podpis na 4,48:1, ale zostawiala ze zdjecia 69% i bocian robil sie szara plama. Kontrast byl wtedy w papierach, a hero i tak wygladalo zle. Pedzlowy skrypt ma kreske cienka jak wlos, wiec prog dla duzego tekstu (3:1) jest tu za niski - celujemy w 4,5:1 tak samo jak przy prozie. */ .hero::after { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(27, 25, 64,0) 0%, rgba(27, 25, 64,.1) 42%, rgba(27, 25, 64,.66) 100%), linear-gradient(90deg, rgba(27, 25, 64,.8) 0%, rgba(27, 25, 64,.62) 42%, rgba(27, 25, 64,.2) 70%, rgba(27, 25, 64,0) 92%); } .hero-in { min-height: min(86vh, 820px); display: flex; flex-direction: column; justify-content: flex-end; padding: clamp(90px, 14vw, 170px) 0 clamp(30px, 3.4vw, 44px); } /* Szerokosc ograniczamy KAZDEMU ELEMENTOWI OSOBNO, nie calemu lockupowi. Wspolny `max-width` na rodzicu lamal tez przycisk i podpis odreczny, bo one nie maja z czym konkurowac o miejsce - tylko wiersz prozy ma. */ /* Na fotografii etykieta 13 px nie ma sie za czym schowac, wiec dostaje stopien wyzej i pelny kremowy, bez przygaszenia, ktore ma na jasnym tle. */ .hero-lockup .kicker { margin-bottom: 10px; font-size: 14px; letter-spacing: .14em; color: var(--kremowy); } .hero-lockup .tytul { /* Hero dostaje stopien wyzszy niz reszta strony, ale i tak schodzi z 5,6rem: „Niezapominajka" w Brightwallu ma 6,62 razy tyle pikseli, ile wynosi stopien pisma, wiec przy 70 px napis konczy sie 127 px WCZESNIEJ niz przy 89,6 px. To poprawia takze kontrast, ktory tu byl policzony: napis konczacy sie na 718 px mial 5,22:1, bo siegal w jasna tafle jeziora. Krotszy napis konczy sie tam, gdzie gradient jest jeszcze gesty. Przy 390 px ekranu zostaje 342 px toru, wiec stopien moze dojsc do 51 px; 7,6vw daje 30 px i napis ma zapas. */ font-size: clamp(2.2rem, 7.6vw, 4.4rem); line-height: 1.5; margin: 0; } .hero-lockup .tytul span { display: block; } .hero-lead { max-width: 38ch; margin: clamp(16px, 2vw, 24px) 0 0; font-size: clamp(16px, 1.35vw, 18px); line-height: 1.55; } /* Przyciski pod nazwami domow. Bez tej reguly oba odnosniki sa elementami liniowymi i sklejaja sie ze soba - stad wrazenie rozjechanego ukladu. */ .hero-cta { display: flex; flex-wrap: wrap; gap: 14px 28px; align-items: center; margin-top: clamp(24px, 2.8vw, 34px); } .hero-cta .lnk:hover { text-decoration: underline; text-underline-offset: 5px; } /* Trzy fakty na dole. To jedyne miejsce w hero, gdzie ikona ma co robic: stoi ZAMIAST slowa („jezioro", „las", „dom"), a nie obok niego. */ .hero-fakty { list-style: none; margin: clamp(34px, 4.5vw, 58px) 0 0; padding: 20px 0 0; border-top: 1px solid var(--kremowy-50); display: flex; flex-wrap: wrap; gap: 14px clamp(28px, 5vw, 64px); } .hero-fakty li { display: flex; align-items: center; gap: 11px; } .hero-fakty .ico { width: 19px; height: 19px; opacity: .85; } /* ========================================================================= WOLNE TERMINY - pas zaraz pod hero Trzy kolumny o roznej wadze: tekst niesie najwiecej, ceny sa spisem, akcje stoja z prawej. Przy zwezaniu schodza w slup w tej samej kolejnosci, bo taki jest tor czytania: co, za ile, jak zapytac. Odstepy w pionie mniejsze niz w zwyklym `.blok` - to jest PAS, a nie sekcja, i ma nie odpychac tresci, ktora idzie pod nim. ========================================================================= */ .wolne-terminy { padding: clamp(34px, 3.6vw, 48px) 0; } .wolne-terminy-in { display: grid; grid-template-columns: 1.25fr .9fr auto; gap: clamp(26px, 4vw, 58px); align-items: start; } .wolne-terminy .tytul-maly { margin: 6px 0 12px; } .wolne-terminy .tresc { max-width: 44ch; } .wolne-terminy-ceny { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--kremowy-20); } /* SIATKA, nie flex z zawijaniem. Wersja na flex-wrap lamala sie na telefonie INACZEJ w kazdym wierszu (dluzsza nazwa spychala cene do nowej linii, krotsza nie) i pas wygladal na rozjechany. W siatce kazdy wiersz ma ten sam uklad: nazwa i liczba osob w lewej kolumnie, cena zawsze w prawej. */ .wolne-terminy-ceny li { display: grid; grid-template-columns: 1fr auto; grid-template-rows: auto auto; column-gap: 14px; align-items: baseline; padding: 12px 0; border-bottom: 1px solid var(--kremowy-20); } .wolne-terminy-ceny a { font-family: var(--font); font-weight: 700; font-stretch: var(--w-srodek); font-size: 1.15rem; text-decoration: none; grid-column: 1; grid-row: 1; } .wolne-terminy-ceny li > .drobne { grid-column: 1; grid-row: 2; } .wolne-terminy-cena { grid-column: 2; grid-row: 1 / span 2; align-self: center; } .wolne-terminy-ceny a:hover { text-decoration: underline; text-underline-offset: 5px; } .wolne-terminy-ceny b { font-family: var(--font); font-weight: 700; font-stretch: var(--w-liczba); font-size: 1.3rem; line-height: 1; font-variant-numeric: lining-nums tabular-nums; } .wolne-terminy-ceny .drobne { font-size: 12px; color: var(--kremowy-tekst); } /* Cena i „za dobę" to JEDNA informacja, wiec lamia sie razem albo wcale. Bez tego „za dobę" zjezdzalo samo do nastepnego wiersza i wygladalo jak osobna pozycja spisu. */ .wolne-terminy-cena { display: inline-flex; align-items: baseline; gap: 6px; white-space: nowrap; } .wolne-terminy-akcje { display: flex; flex-direction: column; gap: 16px; align-items: flex-start; } .wolne-terminy-akcje .btn { white-space: nowrap; } @media (max-width: 1000px) { .wolne-terminy-in { grid-template-columns: 1fr 1fr; } .wolne-terminy-akcje { grid-column: 1 / -1; flex-direction: row; align-items: center; } } @media (max-width: 700px) { .wolne-terminy-in { grid-template-columns: 1fr; } .wolne-terminy-akcje { flex-direction: column; align-items: stretch; } } /* --- kalendarz zajetosci w pasie wolnych terminow ------------------------ */ /* Kalendarz stoi na granacie, wiec wszystko trzyma sie dwoch tonow: kremowy = wolne, przekreslony kremowy-tekst na wpol przezroczystym tle = zajete. Zadnych zieleni i czerwieni - paleta ma dwa kolory. Dni minione ida przygaszone bez przekreslenia: nie sa „zajete", po prostu juz byly. */ .kalendarz { margin-top: clamp(28px, 3.4vw, 40px); padding-top: clamp(22px, 2.6vw, 30px); border-top: 1px solid var(--kremowy-20); } .kalendarz-legenda { display: flex; align-items: center; gap: 10px; margin: 0 0 18px; color: var(--kremowy-tekst); } .kal-znacznik { display: inline-grid; place-items: center; width: 26px; height: 26px; background: var(--kremowy-10); text-decoration: line-through; font-size: 13px; font-variant-numeric: lining-nums; } .kalendarz-domy { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); gap: clamp(24px, 3.5vw, 44px); } .kal-dom > .tytul-maly { margin: 0 0 10px; } .kal-miesiace { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr)); gap: 16px; } /* Dom bez wpisanych terminow: zdanie zamiast siatki. Stoi w tym samym stopniu co dopisek pod kalendarzem, zeby nie udawalo kolejnej tabelki. */ .kal-brak { max-width: 42ch; margin: 0; font-size: 14px; } .kal { width: 100%; border-collapse: collapse; font-variant-numeric: lining-nums tabular-nums; } .kal caption { text-align: left; padding-bottom: 8px; font-weight: 700; font-stretch: var(--w-normal); font-size: 12px; letter-spacing: .09em; text-transform: uppercase; color: var(--kremowy-tekst); } .kal th { padding: 3px 0; font-weight: 600; font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--kremowy-tekst); } .kal td { text-align: center; padding: 5px 0; font-size: 14px; } .kal td.pusty { padding: 0; } .kal td.zajety { background: var(--kremowy-10); color: var(--kremowy-tekst); text-decoration: line-through; } .kal td.miniony { color: var(--kremowy-tekst); } /* Dzisiejszy dzien: cienka obwodka zamiast koloru - dziala tez na zajetym. */ .kal td.dzis { box-shadow: inset 0 0 0 1px var(--kremowy); } .kalendarz-dopisek { max-width: 62ch; margin: 18px 0 0; font-size: 14px; } /* ========================================================================= Blok "o domach" - trojkolumnowy kolaz z przesunieciem ========================================================================= */ /* Odstep miedzy tytulem a etykieta obok niego jest WIEKSZY, niz sugerowalaby sama kompozycja: pole tekstowe naglowka konczy sie na obrysie ostatniej litery, a w pismie odrecznym za ta litera ciagnie sie jeszcze swasz. Przy 28 px etykieta „NA PIECHOTE I NA ROWERZE" siadala na ogonie slowa „wsiadania". */ .naglowek-bloku { display: flex; align-items: flex-start; justify-content: flex-start; gap: 46px; flex-wrap: wrap; margin-bottom: clamp(30px, 3.6vw, 48px); padding-left: clamp(0px, 4.8vw, 58px); } .naglowek-bloku .kicker { padding-top: 1.5em; max-width: 26ch; text-align: left; } .naglowek-bloku.srodek { justify-content: center; text-align: center; padding-left: 0; } .kolaz { display: grid; grid-template-columns: 334fr 375fr 334fr; gap: 38px; align-items: start; } .kolaz figure, .kolaz div { margin: 0; } .kolaz img { width: 100%; object-fit: cover; } .kolaz-a img { aspect-ratio: 334 / 252; } .kolaz-a p { margin-top: 37px; } .kolaz-b img { aspect-ratio: 375 / 462; } .kolaz-c { padding-top: 14px; } .kolaz-c img { aspect-ratio: 334 / 278; margin-top: 33px; } .pod-kolazem { display: flex; justify-content: flex-end; margin-top: 40px; } /* --- trzy odnosniki z fotografia z boku -------------------------------- */ .trojka { display: grid; grid-template-columns: 165px repeat(3, 1fr); gap: 28px 46px; align-items: start; padding-top: 46px; } .trojka > img { aspect-ratio: 165 / 177; object-fit: cover; } .trojka h3 { margin: 0 0 .35em; } .trojka p { margin: 0 0 20px; } /* --- ramki (jak rezerwacja we wzorcu) ---------------------------------- */ .ramki { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 268px), 1fr)); gap: 27px; } .ramka { border: 1px solid var(--kremowy-50); padding: 39px 23px 40px; display: flex; flex-direction: column; min-height: 307px; } .ramka h3 { margin: 0 0 22px; } .ramka p { margin: 0 0 26px; } .ramka .lnk { margin-top: auto; } /* Dwa odnosniki do portalu, po jednym na dom. Marginesu `auto` nie daje sie pojedynczym odnosnikom, tylko calej liscie - inaczej pierwszy z nich zepchnalby drugi poza ramke. */ .ramka-portale { list-style: none; margin: auto 0 0; padding: 0; display: grid; gap: 14px; } .ramka-portale .lnk { margin-top: 0; } /* Nazwa portalu idzie ICH znakiem slownym. Trzy rzeczy trzeba tu przypilnowac: 1. `.lnk svg` robi z kazdego rysunku kwadrat 13x13 px - znak slowny ma proporcje 6:1 i zostalby zgnieciony w kwadrat. Stad `width: auto`. 2. Znak musi siedziec w JEDNYM elemencie z nazwa domu, bo `.lnk:hover` rozsuwa odstepy z 10 na 16 px. Gdyby stal osobno, przy najechaniu „na" odjezdzalo by od znaku i wiersz sie rozjezdza. 3. Wysokosc 12 px daje wersalik znaku ~9,6 px wobec naszych ~9,3 px, czyli oba napisy stoja w tym samym stopniu optycznym. */ /* `flex-wrap` jest tu zabezpieczeniem, nie ozdoba: przy 320 px suma nazwy domu (~150 px), znaku (72 px) i szewronu przekracza swiatlo ramki, a zaden z tych elementow nie umie sie skurczyc. Bez zawijania strona wychodzi poza ekran i - jak juz raz bylo w metryce - zaden pojedynczy element tego nie zglosi, bo przepelnienie siedzi w SUMIE. */ .portal-etykieta { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 7px; min-width: 0; } .znak-booking { display: inline-flex; align-items: center; } .znak-booking svg { width: auto; height: 12px; } .blok-kremowy .ramka { border-color: var(--ciemny-20); } /* --- platnosci ---------------------------------------------------------- */ .platnosci { margin-top: 30px; padding-top: 26px; border-top: 1px solid var(--ciemny-20); } .platnosci h3 { margin: 0 0 12px; } .platnosci .metryka { margin-top: 18px; } /* Znak BLIK-a w wierszu platnosci. Stoi ZAMIAST slowa „BLIK", wiec ma jego `alt`. Plytka jest czarna, bo plik jest w wersji na ciemne tlo - na kremowym sam napis by zniknal. `border-radius` zdejmuje z niej twardosc prostokata, a `vertical-align: middle` sadza ja na srodku wersalikow etykiety zamiast na linii pisma, gdzie wisialaby za wysoko. */ .znak-blik { display: inline-block; vertical-align: middle; margin: -2px 8px 0 0; } .znak-blik img { display: block; height: 22px; width: auto; border-radius: 5px; } .platnosci .konto { font-family: var(--font); font-weight: 600; font-stretch: var(--w-normal); font-size: 15px; letter-spacing: .04em; font-variant-numeric: lining-nums tabular-nums; } /* --- cennik ------------------------------------------------------------- */ .cennik-uklad { display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(30px, 5vw, 66px); align-items: start; } .cennik-uklad .metryka dd { font-weight: 600; } .cennik-uklad .dom-akcje { margin-top: 26px; } .cena-od { display: flex; align-items: baseline; gap: 9px; margin: 24px 0 0; } .cena-od b { font-family: var(--font); font-weight: 700; font-stretch: var(--w-liczba); line-height: 1; font-size: clamp(2rem, 3vw, 2.6rem); font-variant-numeric: lining-nums; } .cena-od .etyk { color: var(--ciemny-tekst); font-size: 12px; } .blok-ciemny .cena-od .etyk, .na-ciemnym .cena-od .etyk { color: var(--kremowy-tekst); } /* --- ocena: liczba czytelna, nie ozdobna ------------------------------- */ .ocena { display: flex; align-items: baseline; gap: 14px; margin: 0; text-align: left; } .ocena b { font-family: var(--font); font-weight: 700; font-stretch: var(--w-liczba); line-height: 1; font-size: clamp(2.4rem, 3.8vw, 3.2rem); } .ocena span { font-family: var(--font); font-weight: 700; font-stretch: var(--w-normal); font-size: 12px; letter-spacing: .09em; line-height: 1.35; text-transform: uppercase; } /* --- opinie gosci ------------------------------------------------------- */ .opinie { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: clamp(28px, 4vw, 54px); } .opinia { margin: 0; display: flex; flex-direction: column; } .opinia blockquote { margin: 0 0 18px; } .opinia blockquote p { font-family: var(--font); font-weight: 600; font-stretch: var(--w-srodek); font-size: clamp(1.15rem, 1.8vw, 1.4rem); line-height: 1.45; margin: 0; } .opinia blockquote p::before { content: '\201E'; } .opinia blockquote p::after { content: '\201D'; } .opinia figcaption { margin-top: auto; color: var(--ciemny-tekst); font-size: 12px; } .opinie-zrodlo { margin: clamp(30px, 4vw, 44px) 0 0; color: var(--ciemny-tekst); font-size: 12px; letter-spacing: .06em; } /* PLAKIETKA BOOKING TRAVELLER REVIEW AWARDS. POWIEKSZONA 10.08.2026 na uwage Danusi („sa mega male, prawie ich nie widac"). Trzymalam je krotko - 300 px na podstronie, 132 px na karcie - w obawie, ze obcy firmowy blekit przejmie uklad. Obawa byla zle wywazona: przy 132 px liczba w plakietce miala 12 px, czyli mniej niz nasz najdrobniejszy podpis, a wlasnie ta liczba jest jedynym powodem, dla ktorego plakietka tam wisi. Ocena 10 na 10 to najmocniejszy dowod, jaki mamy - schowany dowod nie pracuje wcale. Teraz 420 px na podstronie (liczba ~39 px) i 210 px na karcie (~19 px). Reszta napisow w plakietce zostaje drobna i tak ma byc: to certyfikat, czyta sie z niego liczbe, a nie akapit. */ .nagroda { margin: clamp(30px, 4vw, 44px) 0 0; display: flex; flex-direction: column; align-items: flex-start; gap: 12px; } .nagroda img { width: 100%; max-width: 420px; height: auto; border: 1px solid var(--kremowy-20); } .nagroda figcaption { color: var(--kremowy-tekst); font-size: 12px; } /* Wariant na karcie domu: karta stoi na KREMOWYM tle, wiec podpis musi przejsc na ciemny token, inaczej bylby kremowy na kremowym. Uklad w wiersz - plakietka obok podpisu - bo w karcie liczy sie kazdy wiersz wysokosci. */ .nagroda-karta { flex-direction: row; align-items: center; gap: 16px; margin: 22px 0 0; padding-top: 20px; border-top: 1px solid var(--ciemny-20); } .nagroda-karta img { max-width: 210px; border-color: var(--ciemny-20); } .nagroda-karta figcaption { color: var(--ciemny-tekst); line-height: 1.35; } /* Ponizej 560 px kolumna karty ma ok. 313 px swiatla, a plakietka z podpisem obok potrzebuje 210 + 16 + 130. Nie miesci sie, wiec podpis schodzi pod plakietke - i wtedy plakietka moze byc jeszcze wieksza niz na desktopie, bo ma cala szerokosc karty. */ @media (max-width: 560px) { .nagroda-karta { flex-direction: column; align-items: flex-start; gap: 12px; } .nagroda-karta img { max-width: 260px; } } /* Gdy plakietka stoi obok zrodla opinii, oba maja ten sam odstep od gory i tworza jeden wiersz stopki sekcji zamiast dwoch osobnych bloczkow. */ .opinie-zrodlo + .nagroda { margin-top: 22px; } /* --- metryka domu: wiersze etykieta / wartosc --------------------------- */ .metryka { margin: 0; border-top: 1px solid currentColor; } .metryka > div { display: flex; justify-content: space-between; align-items: baseline; gap: 22px; padding: 13px 0; border-bottom: 1px solid currentColor; } .blok-kremowy .metryka, .blok-kremowy .metryka > div { border-color: var(--ciemny-20); } .blok-ciemny .metryka, .blok-ciemny .metryka > div { border-color: var(--kremowy-20); } /* `min-width: min-content` - etykieta nie kurczy sie ponizej swojego najdluzszego slowa, wiec przestaje malowac sie poza wlasnym boksem na waskim ekranie (audyt 10.08.2026: DT 80>60 przy 393 px). Wartosc po prawej dalej sie zawija, bo ma `min-width: 0`. */ .metryka dt { margin: 0; font-size: 12px; color: var(--ciemny-tekst); min-width: min-content; } /* Bez tego etykieta na ciemnym bloku dawalaby 2,25:1 przy wymaganych 4,5:1. */ .blok-ciemny .metryka dt, .na-ciemnym .metryka dt { color: var(--kremowy-tekst); } .metryka dd { margin: 0; text-align: right; font-size: 16px; } /* ========================================================================= Domy: naprzemienne rozklady ========================================================================= */ .dom-blok { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(30px, 4.5vw, 62px); align-items: center; padding: clamp(38px, 5vw, 64px) 0; border-top: 1px solid var(--ciemny-20); } .dom-blok:last-of-type { border-bottom: 1px solid var(--ciemny-20); } .dom-blok:nth-of-type(even) .dom-blok-foto { order: 2; } .dom-blok-foto a { display: block; } .dom-blok-foto img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; } .dom-blok-foto figcaption { margin-top: 12px; font-size: 15px; line-height: 1.45; color: var(--ciemny-tekst); } .dom-blok .etyk { display: block; margin-bottom: 14px; color: var(--ciemny-tekst); } .dom-blok .tytul { margin-bottom: .2em; font-size: clamp(1.8rem, 3.4vw, 2.7rem); } /* Logotyp domu na karcie (tlo kremowe, wiec wersja z czarnym napisem). Wysokosc jest mniejsza niz na szpicy: tam znak jest tytulem CALEJ strony, tutaj jednym z dwoch elementow w wierszu obok zdjecia. */ .dom-znak { margin: 0 0 .5em; line-height: 0; } .dom-znak a { display: inline-block; } .dom-znak img { height: clamp(38px, 4.4vw, 60px); width: auto; } .dom-blok .tresc { max-width: 46ch; } .dom-akcje { display: flex; flex-wrap: wrap; gap: 26px; align-items: center; margin-top: 28px; } /* --- wyposazenie -------------------------------------------------------- */ /* Wyposazenie: to jest lista, po ktorej ludzie WODZA PALCEM, a nie proza. Trzy kolumny zamiast czterech (wiersz jest szerszy, wiec mniej pozycji sie lamie), a kazda pozycja dostaje wlasny wiersz z kreska pod spodem. Kreska jest tu wazniejsza niz odstep: przy samym odstepie pozycja dwuwierszowa i tak skleja sie z nastepna, bo odstep miedzy wierszami JEDNEJ pozycji jest podobny do odstepu miedzy pozycjami. Kreska mowi „to juz koniec tej pozycji" niezaleznie od tego, ile ma wierszy. */ .wyposazenie { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: clamp(30px, 4vw, 54px); } .wyp-grupa { border-top: 2px solid currentColor; padding-top: 16px; } .wyp-grupa h3 { margin: 0 0 4px; } .wyp-grupa ul { list-style: none; margin: 0; padding: 0; } .wyp-grupa li { margin: 0; padding: 11px 0; font-size: 17px; line-height: 1.45; border-bottom: 1px solid var(--ciemny-10); } .blok-ciemny .wyp-grupa li, .na-ciemnym .wyp-grupa li { border-bottom-color: var(--kremowy-20); } /* --- spis (atrakcje) ----------------------------------------------------- */ .spis { border-top: 1px solid var(--ciemny-20); } .spis-poz { display: grid; grid-template-columns: 4.5rem 1fr 1.2fr; gap: clamp(16px, 3vw, 42px); padding: 26px 0; border-bottom: 1px solid var(--ciemny-20); align-items: baseline; } .spis-nr { font-family: var(--font); font-weight: 700; font-stretch: var(--w-liczba); font-size: 1.7rem; color: var(--ciemny-tekst); } /* Pozycje spisu ida GROTESKIEM, choc nosza klase `.tytul-maly`. Powod jest ten sam, ktory panel od ikon zapisal dla piktogramow: dwanascie nazw miejsc jedna pod druga to nie akcent, tylko tapeta - a obok kazdej stoi numer grotesku, wiec wiersz i tak jest z dwoch swiatow. Skrypt zostaje na naglowku sekcji („Na caly dzien"), ktory te liste otwiera. */ .spis-poz h3 { margin: 0; padding: 0; font-family: var(--font); font-weight: 700; font-stretch: var(--w-srodek); font-size: clamp(1.15rem, 1.7vw, 1.35rem); line-height: 1.3; } .spis-poz p { margin: 0; } .odleglosci { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--ciemny-20); max-width: 560px; } .odleglosci li { display: flex; justify-content: space-between; align-items: baseline; gap: 20px; padding: 15px 0; border-bottom: 1px solid var(--ciemny-20); } .odleglosci b { font-family: var(--font); font-weight: 700; font-stretch: var(--w-liczba); font-size: 1.7rem; } /* --- galeria ------------------------------------------------------------- */ .galeria { display: grid; grid-template-columns: repeat(6, 1fr); gap: 16px; grid-auto-flow: dense; } .galeria figure { margin: 0; grid-column: span 2; align-self: start; } .galeria .g-el { display: block; overflow: hidden; background: var(--ciemny-10); } .galeria img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s cubic-bezier(.2,.7,.3,1); } .galeria .g-el:hover img { transform: scale(1.04); } /* Rzedy musza sie schodzic, wiec KAZDY kafel ma te sama wysokosc. Kafel szeroki jest dwa razy szerszy, wiec jego proporcja to 8/3, a nie 16/9 - przy 16/9 byl wyzszy od sasiadow i siatka sie rozjezdzala. Kadry pionowe zostaja w proporcji 4/3 (przycina je, ale w powiekszeniu widac caly kadr), zeby nie wybijaly rzedu w gore. */ .galeria figure .g-el { aspect-ratio: 4 / 3; } .galeria figure.szeroka { grid-column: span 4; } .galeria figure.szeroka .g-el { aspect-ratio: 8 / 3; } .galeria figure.pion .g-el { aspect-ratio: 4 / 3; } .galeria figcaption { margin-top: 10px; font-size: 15px; line-height: 1.45; color: var(--ciemny-tekst); } .blok-ciemny .galeria figcaption { color: var(--kremowy-tekst); } /* ADNOTACJA PRZY ZDJECIU - gdy kadr nie zgadza sie ze stanem faktycznym (taras Slonecznika jest juz zadaszony, zdjecia sa sprzed zadaszenia). Stoi w OSOBNYM wierszu, nie doklejona przecinkiem do podpisu. Powod jest taki, ze to nie jest ciag dalszy podpisu: podpis mowi, CO widac na zdjeciu, a adnotacja prostuje, czego na nim NIE widac. Sklejone w jedno zdanie czytaloby sie jak opis kadru i przeleciałoby oku bez zatrzymania. Stopien nizszy i kursywa zamiast pogrubienia: to ma byc widoczne, ale nie ma krzyczec „uwaga, problem" - zadaszenie jest ULEPSZENIEM, wiec ta linijka dodaje otuchy, a nie ostrzega. ZADNEGO `opacity`. Pierwsza wersja miala .9 „zeby bylo dyskretniej" i to jest dokladnie ten blad, ktory ten projekt popelnil juz raz przy podpisach cen. Policzone: przygaszenie do 90% zbija adnotacje z 4,62:1 na 3,81:1 na jasnym bloku i z 4,69:1 na 4,11:1 na granatowym, czyli ponizej progu w obu miejscach. Roznice w hierarchii niesie stopien pisma i kursywa, a nie krycie. */ .foto-uwaga { display: block; margin-top: 3px; font-size: 13px; font-style: italic; line-height: 1.35; } /* --- pas ze zdjeciem ----------------------------------------------------- */ .pas-foto { position: relative; margin: 0; } .pas-foto img { width: 100%; height: clamp(300px, 44vw, 600px); object-fit: cover; } .pas-foto figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 90px 24px 26px; background: linear-gradient(transparent, rgba(27, 25, 64,.66)); color: var(--kremowy); text-align: center; font-family: var(--font); font-weight: 600; font-stretch: var(--w-srodek); font-size: clamp(1.15rem, 1.9vw, 1.5rem); line-height: 1.35; } /* --- FAQ ----------------------------------------------------------------- */ .faq { max-width: 900px; border-top: 1px solid var(--ciemny-20); } .faq details { border-bottom: 1px solid var(--ciemny-20); } .faq summary { cursor: pointer; list-style: none; position: relative; padding: 24px 52px 24px 0; font-family: var(--font); font-weight: 700; font-stretch: var(--w-srodek); font-size: clamp(1.35rem, 2.2vw, 1.7rem); line-height: 1.3; } .faq summary::-webkit-details-marker { display: none; } .faq summary::after { content: ''; position: absolute; right: 6px; top: calc(24px + .65em); width: 15px; height: 1px; background: currentColor; } .faq summary::before { content: ''; position: absolute; right: 13px; top: calc(24px + .65em - 7px); width: 1px; height: 15px; background: currentColor; transition: transform .2s ease; } .faq details[open] summary::before { transform: scaleY(0); } .faq .odp { padding: 0 44px 26px 0; max-width: 66ch; color: var(--ciemny-tekst); } /* --- proza --------------------------------------------------------------- */ .proza { max-width: 68ch; } .proza h2 { font-family: var(--font); font-weight: 700; font-stretch: var(--w-srodek); font-size: clamp(1.4rem, 2.5vw, 1.95rem); line-height: 1.2; margin: 2em 0 .7em; } .proza h2:first-child { margin-top: 0; } .proza ol { counter-reset: p; list-style: none; padding: 0; margin: 0 0 1.2em; } .proza ol > li { counter-increment: p; position: relative; padding-left: 3.2rem; margin-bottom: 1em; } .proza ol > li::before { content: counter(p, decimal-leading-zero); position: absolute; left: 0; top: -.1em; font-family: var(--font); font-weight: 700; font-stretch: var(--w-liczba); font-size: 1.45rem; color: var(--ciemny-tekst); } .proza ul { list-style: none; padding: 0; margin: 0 0 1.2em; } .proza ul > li { position: relative; padding-left: 1.5rem; margin-bottom: .5em; } .proza ul > li::before { content: ''; position: absolute; left: 0; top: .62em; width: 7px; height: 1px; background: currentColor; } /* WYROZNIENIE W PROZIE (motto „Gosc w dom, Bog w dom", zasada o zwierzakach). ZDJETE Z PISMA ODRECZNEGO 7.08.2026 na wyrazne wskazanie Danusi: „tu nie moze byc odreczne". Miala racje i widac to na pomiarze: to nie jest DUZE SLOWO, tylko CALE ZDANIE lamiace sie na trzy wiersze. Pedzlowy skrypt sklada sie przy interlinii 1,6, a w trzech wierszach prozy taka interlinia rozrywa akapit; przy ciasnej wiersze wchodza jeden w drugi (zmierzone: 1,59 firetu potrzeba, zeby „B" z gornego wiersza nie usiadlo na „b" z dolnego). Regula do zapamietania: pismo odreczne dostaje SLOWO albo HASLO, nigdy zdanie. Krój i stopien sa te same co w cytatach gosci - to ta sama rola na stronie (cudze zdanie wyjete z toku), wiec nie mnozymy stylow. */ /* --- Misiek i Freddy przy zasadzie o zwierzakach ------------------------- */ /* Dwa kadry obok siebie i zdanie pod nimi. Kadry maja ROZNE proporcje (pies pionowy, kot poziomy), wiec zamiast je przycinac do wspolnego prostokata, wyrownujemy je WYSOKOSCIA - pion i poziom obok siebie wygladaja wtedy jak dwa zdjecia z jednego albumu, a nie jak siatka. `.proza` ma max-width 68ch, wiec blok sam trzyma sie szerokosci tekstu. */ .zwierzaki { margin: 30px 0 34px; } .zwierzaki figure { margin: 0; } /* Kadr psa jest PIONOWY, kota POZIOMY. Przy wspolnej wysokosci 260 px przycinanie ucinalo Miskowi czolo i uszy, czyli cala twarz - a to jest zdjecie, ktore ma dzialac wlasnie mordka. Stad wyzsze pole i wyrownanie kadru do GORY: pies zachowuje glowe, kot traci tylko kawalek podlogi. */ .zwierzaki img { width: 100%; height: 330px; object-fit: cover; object-position: 50% 22%; } .zwierzaki figcaption { margin-top: 8px; font-family: var(--font); font-weight: 700; font-stretch: var(--w-normal); font-size: 12px; letter-spacing: .09em; text-transform: uppercase; color: var(--ciemny-tekst); } .zwierzaki-podpis { margin-top: 18px; } @media (min-width: 620px) { .zwierzaki { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; } .zwierzaki-podpis { grid-column: 1 / -1; margin-top: 4px; } } @media (max-width: 619px) { .zwierzaki figure + figure { margin-top: 16px; } .zwierzaki img { height: 300px; } } .notka { border-left: 2px solid currentColor; padding: 4px 0 4px 26px; margin: 34px 0; font-family: var(--font); font-weight: 600; font-stretch: var(--w-srodek); font-size: clamp(1.15rem, 1.8vw, 1.4rem); line-height: 1.5; } /* --- zwierzaki gospodarzy (Misiek i Freddy, /o-nas/) --------------------- */ /* Dwa kadry obok siebie wewnatrz prozy. Ida na szerokosc kolumny tekstu (proza ma max 68ch), nie na cala kanwe - to wtracenie w opowiesci, nie osobna galeria. Podpis pod para, nie pod kazdym kadrem osobno, bo imiona sa juz w figcaption. */ .zwierzaki { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 22px; margin: 26px 0 8px; } .zwierzaki figure { margin: 0; } .zwierzaki img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; } .zwierzaki figcaption { margin-top: 8px; font-size: 14px; color: var(--ciemny-tekst); } .zwierzaki-podpis { grid-column: 1 / -1; margin: 4px 0 0; font-size: 15px; } @media (max-width: 520px) { .zwierzaki { grid-template-columns: 1fr; } .zwierzaki img { aspect-ratio: 4 / 3; } } /* --- formularz ----------------------------------------------------------- */ .form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; margin-bottom: 28px; } .form-grid p { margin: 0; } .form-grid .fw { grid-column: 1 / -1; } .kl-form label { display: block; margin-bottom: 9px; font-family: var(--font); font-weight: 700; font-stretch: var(--w-normal); font-size: 12px; letter-spacing: .09em; text-transform: uppercase; color: var(--ciemny-tekst); } /* GRANICA POL: `--ciemny-tekst`, nie `--ciemny-20` (audyt 10.08.2026). Pole nie ma ani tla, ani ramki - cala informacja „tu sie pisze" siedzi w jednej kresce u dolu. Na `--ciemny-20` zlewa sie ona z tlem do 1,45:1, przy progu 3:1 z WCAG 1.4.11 dla elementow nietekstowych. `--ciemny-tekst` ma policzone 4,62:1 i jest juz tokenem tej strony, wiec nic nie dokladamy. `--ciemny-50` NIE wystarczy - wychodzi 2,79:1. */ .kl-form input[type="text"], .kl-form input[type="email"], .kl-form input[type="tel"], .kl-form select, .kl-form textarea { width: 100%; padding: 12px 0; font: inherit; font-size: 16px; color: inherit; background: transparent; border: 0; border-bottom: 1px solid var(--ciemny-tekst); border-radius: 0; transition: border-color .2s ease, border-bottom-width .15s ease; } .blok-ciemny .kl-form input, .blok-ciemny .kl-form select, .blok-ciemny .kl-form textarea { border-bottom-color: var(--kremowy-tekst); } /* FOKUS. Do 10.08.2026 bylo tu samo `outline: none` plus zmiana koloru kreski o 1 px - a sama zmiana barwy nie spelnia WCAG 2.4.11 (widocznosc fokusu) i znika dla osoby nierozrozniajacej odcieni. Teraz kreska GRUBIEJE do 3 px, czyli fokus widac ksztaltem, nie tylko kolorem. Pole nie skacze, bo nadmiarowe 2 px odbieramy z dolnego wypelnienia. */ .kl-form input:focus-visible, .kl-form select:focus-visible, .kl-form textarea:focus-visible { border-bottom-color: currentColor; border-bottom-width: 3px; padding-bottom: 10px; outline: none; } .kl-form input:focus, .kl-form select:focus, .kl-form textarea:focus { border-bottom-color: currentColor; } .kl-form textarea { resize: vertical; min-height: 120px; } /* SELECT. `appearance: none` zdejmuje systemowa strzalke, wiec pole „Ktory dom?" wygladalo do 10.08.2026 jak zwykly wiersz tekstu - nic nie mowilo, ze to lista do rozwiniecia. Strzalka wraca jako tlo (szewron w kolorze `--ciemny-tekst`, ten sam rysunek co w reszcie serwisu), a `padding-right` robi jej miejsce. */ .kl-form select { appearance: none; padding-right: 28px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%236a6893' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 2px center; background-size: 16px 16px; } .blok-ciemny .kl-form select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23b9b7cc' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); } /* PLACEHOLDER. Bez wlasnej reguly kazda przegladarka daje swoj szary, zwykle ponizej 4,5:1. `--ciemny-tekst` ma policzone 4,62:1. */ .kl-form ::placeholder { color: var(--ciemny-tekst); opacity: 1; } .blok-ciemny .kl-form ::placeholder { color: var(--kremowy-tekst); } .zgoda label { display: flex; gap: 12px; align-items: flex-start; font-family: var(--font); font-weight: 400; font-stretch: var(--w-normal); font-size: 14px; letter-spacing: 0; text-transform: none; color: var(--ciemny-tekst); } .zgoda input { margin-top: .25em; flex: none; width: 16px; height: 16px; accent-color: var(--ciemny); } .pole-info { display: block; margin-top: 8px; font-size: 14px; line-height: 1.4; color: var(--ciemny-tekst); } .blok-ciemny .pole-info, .na-ciemnym .pole-info { color: var(--kremowy-tekst); } .kl-hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; opacity: 0; } /* Do 5.08.2026 oba komunikaty wygladaly IDENTYCZNIE: to samo tlo, ten sam padding, ta sama kreska z lewej. Gosc, ktoremu wiadomosc nie przeszla, widzial dokladnie to samo pudelko co ten, ktoremu przeszla. Rozroznienie niesie ksztalt i slowo, ikona jest tylko wzmocnieniem - paleta ma dwa kolory, wiec zielen i czerwien odpadaja. */ .form-ok, .form-err { padding: 18px 22px; margin-bottom: 26px; font-size: 16px; } .form-ok { background: var(--ciemny-10); border-left: 2px solid currentColor; } .form-err { background: transparent; border: 1px solid var(--ciemny); } .form-ok .etyk, .form-err .etyk { display: inline-flex; align-items: center; gap: 10px; margin: 0 0 8px; } .form-ok p:last-child, .form-err p:last-child { margin: 0; } /* --- kontakt -------------------------------------------------------------- */ .kontakt-uklad { display: grid; grid-template-columns: .8fr 1.2fr; gap: clamp(34px, 5vw, 76px); align-items: start; } .kontakt-dane { list-style: none; margin: 0 0 30px; padding: 0; border-top: 1px solid var(--ciemny-20); } .kontakt-dane li { margin: 0; padding: 20px 0; border-bottom: 1px solid var(--ciemny-20); } .kontakt-dane .etyk { display: block; margin-bottom: 8px; font-size: 12px; color: var(--ciemny-tekst); } /* `display: block` wyzej ma wieksza wage niz `.etyk-ico`, wiec ikona wyladowalaby w osobnym wierszu nad etykieta. Ta linijka przywraca uklad w jednym wierszu. */ .kontakt-dane .etyk-ico { display: flex; } .kontakt-dane .wartosc { font-family: var(--font); font-weight: 700; font-stretch: var(--w-srodek); font-size: 1.65rem; line-height: 1.25; } .kontakt-dane .wartosc a { text-decoration: none; } .kontakt-dane .wartosc a:hover { text-decoration: underline; text-underline-offset: 5px; } .kontakt-dane .drobne { display: block; margin-top: 6px; font-size: 14px; color: var(--ciemny-tekst); } .mapa { border: 0; width: 100%; aspect-ratio: 3 / 2; filter: grayscale(.35) contrast(1.05); } /* --- szpica podstrony ----------------------------------------------------- */ .szpica { background: var(--ciemny); color: var(--kremowy); padding: clamp(52px, 7vw, 92px) 0 clamp(46px, 6vw, 72px); text-align: center; } .szpica .okruszki { color: var(--kremowy-tekst); margin: 0 0 22px; } .szpica .okruszki a { text-decoration: none; } .szpica .okruszki a:hover { text-decoration: underline; text-underline-offset: 4px; } .szpica .kicker { margin-bottom: 12px; } /* LOGOTYP DOMU ZAMIAST NAPISANEGO TYTULU (10.08.2026). Niezapominajka i Slonecznik maja WLASNE znaki: kwiat plus nazwa pisana, z materialow Danusi. Skoro dom ma swoj logotyp, to on jest jego nazwa - odwzorowywanie jej naszym Brightwallem bylo powtarzaniem tej samej rzeczy dwoma charakterami pisma. ZADNEGO FILTRA. Pierwsza wersja odwracala caly znak przez `brightness(0) invert(1)` i kwiat robil sie bialy razem z napisem. Danusia: „kwiatek musi byc w kolorze, napis awers" - i ma racje, bo kwiat kaszubski jest tu jedynym nosnikiem koloru marki. Wariant na ciemne tlo jest wiec przygotowany PIKSELOWO w `narzedzia/zdjecia-2026-08.py` (funkcja `logotypy_na_ciemne`), tak samo jak autor zrobil to w gotowym `kłącznopl logo WHITE.png`: napis i kontury na biel, platki bez zmian. Zmierzone na granacie: kontrast kwiatu 7,45:1 (Niezapominajka) i 6,71:1 (Slonecznik). */ .szpica-znak { margin: 0; line-height: 0; } .szpica-znak img { display: inline-block; width: auto; height: clamp(52px, 8.5vw, 92px); } .szpica-logo .tresc { margin-top: 26px; } /* Szpica dostaje stopien nizszy niz naglowki w tresci. Powod: stoi wysrodkowana na pelnej kanwie, wiec przy 3,6rem napis „Kaszuby zaczynaja sie za furtka" rozciagal sie na cale 1200 px i zjadal cala gorna polowe ekranu. Do tego `max-width` na 20 znakow, zeby dlugie tytuly lamaly sie w slup zamiast w jeden bardzo dlugi wiersz. */ .szpica .tytul { font-size: clamp(1.9rem, 4.4vw, 3.1rem); max-width: 20ch; margin-inline: auto; } .szpica .tresc { max-width: 58ch; margin: 22px auto 0; color: var(--kremowy-tekst); } /* --- strona domu ---------------------------------------------------------- */ .dom-glowne { margin: 0 0 clamp(30px, 4vw, 52px); } .dom-glowne img { width: 100%; height: clamp(300px, 48vw, 620px); object-fit: cover; } .dom-glowne figcaption { margin-top: 12px; font-size: 15px; line-height: 1.45; color: var(--ciemny-tekst); } .dom-wstep { display: grid; grid-template-columns: 1.15fr .85fr; gap: clamp(30px, 5vw, 70px); align-items: start; } .rezerwacja { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(30px, 5vw, 70px); align-items: center; } .rezerwacja-akcje { display: flex; flex-wrap: wrap; gap: 20px; align-items: center; } /* --- aktualnosci ---------------------------------------------------------- */ .wpisy { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: clamp(24px, 3vw, 38px); } .wpis { border-top: 1px solid var(--ciemny-20); padding-top: 20px; } .wpis-data { margin-bottom: 12px; font-family: var(--font); font-weight: 700; font-stretch: var(--w-normal); font-size: 12px; letter-spacing: .09em; text-transform: uppercase; color: var(--ciemny-tekst); } .wpis-foto { display: block; margin-bottom: 16px; } .galeria .g-el, .kolaz a { display: block; } .wpis-foto img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; } .wpis h3 { margin: 0 0 12px; } .wpis h3 a { text-decoration: none; } /* --- wezwanie ------------------------------------------------------------- */ .wezwanie { text-align: center; } .wezwanie .tytul { max-width: 18ch; margin-inline: auto; } .wezwanie .tresc { max-width: 50ch; margin: 24px auto 0; color: var(--kremowy-tekst); } .wezwanie-akcje { display: flex; flex-wrap: wrap; gap: 20px; justify-content: center; align-items: center; margin-top: 34px; } /* --- stopka --------------------------------------------------------------- */ .stopka { background: var(--kremowy); color: var(--ciemny); border-top: 2px solid var(--ciemny); } .stopka-in { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: clamp(32px, 5vw, 68px); padding: clamp(50px, 6.5vw, 84px) 0 46px; } .stopka-logo img { height: 46px; width: auto; margin-bottom: 20px; } .stopka-marka .tresc { max-width: 36ch; color: var(--ciemny-tekst); } .stopka-h { margin: 0 0 20px; color: var(--ciemny-tekst); font-size: 12px; } .stopka a { text-decoration: none; } .stopka a:hover { text-decoration: underline; text-underline-offset: 5px; } .stopka-lista, .stopka-menu { list-style: none; margin: 0; padding: 0; } .stopka-lista li { margin-bottom: 15px; font-size: 16px; } .stopka-lista .drobne { display: block; font-size: 14px; color: var(--ciemny-tekst); } .stopka-menu li { margin-bottom: 10px; font-size: 16px; } .social { display: flex; gap: 12px; margin-top: 22px; } /* 44 px, nie 40 - dolny prog celu dotykowego (audyt 10.08.2026). */ .social a { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--ciemny-20); } .social a:hover { background: var(--ciemny); color: var(--kremowy); } .stopka-dol { background: var(--ciemny); color: var(--kremowy-tekst); } /* DOLNY PASEK, PRZEBUDOWANY 10.08.2026 („ten uklad tutaj jest brzydki"). Co bylo nie tak: trzy rownorzedne akapity o tym samym stopniu (11 px), tej samej wadze (700) i tym samym rozstrzeleniu (0,2em). Na szerokim ekranie rozjezdzaly sie w trzy kolumny o roznej wysokosci, na waskim skladaly sie w piec wysrodkowanych wierszy nie do odroznienia od siebie. Wersalik z duzym swiatlem nie ma ksztaltu slowa, wiec pieciu takich wierszy pod soba nikt nie czyta - oglada sie je jako szara plame. Co to naprawia: 1. DWIE GRUPY zamiast trzech akapitow (nasze informacje / podpis wykonawcy), wiec na szerokim ekranie sa dwa bloki, a nie trzy nierowne kolumny. 2. TRZY STOPNIE PISMA zamiast jednego: 10 px na drobne, 11 px na dokumenty, 14 px na nazwe wykonawcy. Dopiero roznica stopnia robi hierarchie - sam kolor jej nie udzwignal. 3. Rozstrzelenie zeszlo z 0,2em na 0,15em, a przy 14-punktowej nazwie do 0,06em: im wiekszy stopien, tym mniej swiatla miedzy literami. 4. `min-width: 0` na obu grupach. Bez tego przy 320 px wiersz „POLITYKA PRYWATNOSCI - REGULAMIN" wychodzil poza ekran, bo elementy pozycjonowane flexem nie kurcza sie ponizej swojej tresci. */ .stopka-dol-in { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 30px; padding: 22px 0; font-family: var(--font); font-weight: 700; font-stretch: var(--w-normal); font-size: 11px; letter-spacing: .15em; line-height: 1.4; text-transform: uppercase; } .stopka-dol-in > * { min-width: 0; } .stopka-dol p { margin: 0; } .stopka-dol a { color: var(--kremowy); text-decoration: none; } .stopka-dol-info { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 20px; } .stopka-copy { font-size: 10px; letter-spacing: .17em; } /* Odnosniki prawne. Podkreslone, bo to jedyne miejsce w stopce, gdzie odnosnik musi byc widoczny jako odnosnik - dokumentu szuka sie wzrokiem, a nie klika przypadkiem. */ .stopka-prawne a { text-decoration: underline; text-underline-offset: 4px; } /* PODPIS WYKONAWCY jako trzywierszowa sygnatura, nie jako zdanie w pasku: maly nadpis, nazwa duzo wieksza i grubsza, dopisek znowu maly. Uklad wprost od Danusi (10.08.2026): „strona wykonana przez ENTER kolejna linijka silvery bird pogrubiony ale bez podkreslenia". Podkreslenia nie ma w spoczynku, ale WRACA przy najechaniu i przy skupieniu: bez tego nic nie mowi, ze nazwa jest klikalna, a wymog widocznosci skupienia (WCAG 2.4.7) nie znika przez to, ze podkreslenia nie chcemy na stale. Ciezar, ktory wczesniej niosla kreska pod napisem, przejely wiec stopien pisma i waga. */ .stopka-autor { text-align: right; line-height: 1.5; } .stopka-autor-wstep { display: block; font-size: 9px; letter-spacing: .18em; } .stopka-autor a { display: block; margin: 3px 0 2px; font-size: 14px; font-weight: 800; letter-spacing: .06em; text-decoration: none; } .stopka-autor a:hover, .stopka-autor a:focus-visible { text-decoration: underline; text-underline-offset: 5px; } .stopka-autor-dopisek { display: block; font-size: 9px; letter-spacing: .14em; } /* Ponizej 700 px obie grupy schodza pod siebie i wtedy podpis trzeba oddzielic od naszych dokumentow, inaczej robi sie jeden slup piaciu wierszy. ODDZIELA GO SAMO SWIATLO, NIE KRESKA. Probowalam kreski (34 px, kremowy-20) i wyszla o dwa piksele pod podkresleniami „Polityka prywatnosci" i „Regulamin" - czytala sie jak trzecie podkreslenie, a nie jak granica. W pasku tej wielkosci linijka i tak jest za drobna, zeby cokolwiek rozdzielic; 30 px odstepu robi to bez dokladania kreski. PULAPKA, NA KTORA SIE NADZIALAM: odstep MUSI isc przez `gap` kontenera, a nie przez `margin-top` podpisu. `.stopka-dol p { margin: 0 }` ma specyficznosc 0-1-1, a `.stopka-autor` 0-1-0 - zerowanie wygrywa niezaleznie od kolejnosci i od tego, ze siedzi poza zapytaniem medialnym. Margines po prostu nie dzialal i wiersze siadaly sobie na glowie. */ @media (max-width: 700px) { .stopka-dol-in { justify-content: center; text-align: center; gap: 30px 0; padding: 24px 0 26px; } .stopka-dol-info { justify-content: center; width: 100%; } .stopka-autor { text-align: center; width: 100%; } } /* Dwa plywajace guziki stoja w JEDNEJ kolumnie przy prawej krawedzi: WhatsApp na dole (jest wazniejszy - to wejscie w rozmowe), a „do gory" nad nim. Gdyby staly obok siebie, zielony znak czytalby sie jak czesc nawigacji. Wysokosc guzika WhatsAppa (68) plus odstep (12) daje dolna krawedz guzika powrotu. */ .do-gory { position: fixed; right: 24px; bottom: 104px; z-index: 90; width: 46px; height: 46px; border-radius: 50%; background: var(--ciemny); color: var(--kremowy); display: grid; place-items: center; opacity: 0; visibility: hidden; transition: .25s ease; border: 1px solid var(--kremowy-20); } .do-gory svg { transform: rotate(180deg); width: 17px; height: 17px; } .do-gory.widoczny { opacity: 1; visibility: visible; } /* BANER ZGODY NA CIASTECZKA ANALITYCZNE. Pas przy DOLNEJ krawedzi, nie okno na cala strone: nie blokuje tresci i nie kaze niczego klikac, zeby w ogole zobaczyc oferte. Zgoda na licznik odwiedzin nie jest na tyle wazna sprawa, zeby zaslaniac nia dom nad jeziorem. OBA PRZYCISKI SA ROWNE. „Nie zgadzam sie" ma ten sam stopien, ta sama wage i to samo pole co „Zgadzam sie" - rozny jest tylko wypelnienie kontra obrys, bo jeden z nich musi byc pierwszy w kolejnosci czytania. Przygaszona odmowa to najczestsza sztuczka w takich banerach i nie robimy jej. Plywajace guziki chowaja sie na czas baneru (`body.zgoda-widoczna`) - inaczej zielone kolko WhatsAppa wisialoby nad pasem, w ktorym trzeba cos wybrac. */ .zgoda-baner { position: fixed; left: 0; right: 0; bottom: 0; z-index: 120; background: var(--ciemny); color: var(--kremowy); border-top: 1px solid var(--kremowy-20); box-shadow: 0 -8px 30px rgba(27, 25, 64,.22); } .zgoda-baner[hidden] { display: none; } .zgoda-in { width: min(100% - 2 * var(--marg), var(--kanwa)); margin-inline: auto; padding: 18px 0; display: flex; align-items: center; gap: 20px 34px; flex-wrap: wrap; } .zgoda-in > div:first-child { flex: 1 1 320px; min-width: 0; } .zgoda-tytul { margin: 0 0 4px; font-family: var(--font); font-weight: 700; font-stretch: var(--w-normal); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--kremowy-tekst); } .zgoda-tresc { margin: 0; font-size: 14.5px; line-height: 1.5; max-width: 68ch; } .zgoda-tresc a { color: var(--kremowy); text-decoration: underline; text-underline-offset: 4px; } .zgoda-akcje { display: flex; gap: 12px; flex: 0 0 auto; } .zgoda-akcje .btn { padding: 13px 24px; } /* Na ciemnym pasie obrys musi byc kremowy, inaczej „Nie zgadzam sie" znika. */ .zgoda-akcje .btn-obrys { border-color: var(--kremowy); color: var(--kremowy); } .zgoda-akcje .btn-obrys:hover { background: var(--kremowy); color: var(--ciemny); } .zgoda-akcje .btn-pelny { background: var(--kremowy); color: var(--ciemny); border-color: var(--kremowy); } .zgoda-akcje .btn-pelny:hover { background: transparent; color: var(--kremowy); } body.zgoda-widoczna .wa-plyw, body.zgoda-widoczna .do-gory { opacity: 0; visibility: hidden; } @media (max-width: 560px) { .zgoda-in { padding: 16px 0; gap: 14px; } .zgoda-akcje { width: 100%; } /* Na telefonie oba przyciski dziela szerokosc po rowno - zeby odmowa nie byla wezsza od zgody nawet o piksel. */ .zgoda-akcje .btn { flex: 1 1 0; justify-content: center; padding: 13px 10px; } } /* PLYWAJACY WHATSAPP. Od 10.08.2026 stoi tu ICH OFICJALNY ZNAK z pliku, a nie nasze kolko z konturowa sluchawka. ZADNEGO TLA, OBRYSU ANI CIENIA W CSS - znak ma to wszystko w sobie: bialy pierscien odkleja go od kazdego tla (sprawdzone na kremowym i na granacie), a cien jest wrysowany w plik. Dolozenie naszego kolka pod spodem dalo by dwa pierscienie jeden w drugim. ROZMIAR 68, A NIE 56 JAK PRZY NASZYM KOLKU: w kadrze znaku sama zielen zajmuje niecale 69%, reszta to pierscien i cien. Przy 56 px zielone kolo mialo by 38 px i guzik czytalby sie jak drobiazg. Przy 68 px wychodzi 47 px zieleni plus pierscien, czyli mniej wiecej ta sama obecnosc, co poprzednio. Pole dotyku to caly kwadrat, wiec 68 (i 60 na telefonie) z zapasem lapie sie w wymagane 44 px. Obrys skupienia jest ZIELONY, nie granatowy: granat znika na ciemnych blokach, a ta zielen ma 3,67:1 na kremowym i 4,03:1 na granacie, czyli widac ja na obu tlach strony. */ .wa-plyw { position: fixed; right: 24px; bottom: 24px; z-index: 91; width: 68px; height: 68px; border-radius: 50%; display: block; transition: transform .2s ease; } .wa-plyw img { width: 100%; height: 100%; display: block; } .wa-plyw:hover { transform: translateY(-2px) scale(1.04); } .wa-plyw:focus-visible { outline: 3px solid #128c7e; outline-offset: 2px; } /* Menu na telefonie jest pelnoekranowe - zielone kolko wisialoby nad nim. */ body.menu-otwarte .wa-plyw, body.menu-otwarte .do-gory { opacity: 0; visibility: hidden; } /* Gdy dolny pasek stopki wjezdza w kadr, oba guziki schodza. Powod nie jest estetyczny tylko taki, ze w tym momencie robia sie zbedne: pod spodem leza juz oba telefony, mail i cale menu strony, a plywajace kolka zaslanialyby podpisy. Wczesniej rozwiazywal to zapas 92 px pustego granatu na dole paska i to wlasnie ta dziura wygladala na bląd. */ body.stopka-w-kadrze .wa-plyw, body.stopka-w-kadrze .do-gory { opacity: 0; visibility: hidden; } /* Na waskich ekranach guziki schodza blizej krawedzi, zeby nie zjadaly tresci. */ @media (max-width: 560px) { .wa-plyw { right: 14px; bottom: 14px; width: 60px; height: 60px; } .do-gory { right: 20px; bottom: 86px; width: 44px; height: 44px; } /* prog celu dotykowego */ } @media (prefers-reduced-motion: reduce) { .wa-plyw { transition: none; } .wa-plyw:hover { transform: none; } } /* --- 404 ------------------------------------------------------------------ */ .pusto { text-align: center; padding: clamp(70px, 10vw, 130px) 0; } .pusto .akcje { display: flex; flex-wrap: wrap; gap: 20px; justify-content: center; margin-top: 34px; } /* --- lightbox ------------------------------------------------------------- */ .lb { position: fixed; inset: 0; z-index: 200; background: rgba(27, 25, 64,.96); display: none; align-items: center; justify-content: center; padding: 64px 20px 84px; } .lb.otwarty { display: flex; } .lb img { max-width: min(1300px, 93vw); max-height: 80vh; object-fit: contain; } .lb-podpis { position: absolute; left: 0; right: 0; bottom: 28px; margin: 0; text-align: center; padding: 0 24px; color: var(--kremowy); font-family: var(--font); font-weight: 500; font-size: 1.05rem; line-height: 1.4; } .lb button { position: absolute; background: transparent; color: var(--kremowy); border: 1px solid var(--kremowy-20); width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; cursor: pointer; } .lb button:hover { background: var(--kremowy-10); } .lb-zamknij { top: 20px; right: 20px; } .lb-prev { left: 20px; top: 50%; margin-top: -23px; } .lb-next { right: 20px; top: 50%; margin-top: -23px; } /* ========================================================================= Responsywnosc. Wzorzec lamie sie przy 768. ========================================================================= */ @media (min-width: 1180px) { .naglowek-cta .nr { display: inline; } .naglowek-cta .btn > span:first-of-type { display: none; } } @media (max-width: 1040px) { /* Kolaz schodzi od razu do jednej kolumny, w kolejnosci opowiesci. Dwie kolumny z przerzuceniem wysokiego kadru na gore mieszaly narracje. */ .kolaz { grid-template-columns: 1fr; gap: 30px; } .kolaz-a p { margin-top: 20px; } .kolaz-b img { aspect-ratio: 3 / 2; } .kolaz-c { padding-top: 0; } .kolaz-c img { margin-top: 20px; } .trojka { grid-template-columns: repeat(3, 1fr); gap: 28px; } .trojka > img { grid-column: 1 / -1; aspect-ratio: 21 / 9; } .ramka { min-height: 0; } .kontakt-uklad, .dom-wstep, .rezerwacja, .cennik-uklad { grid-template-columns: 1fr; } .spis-poz { grid-template-columns: 3rem 1fr; } .spis-poz p { grid-column: 2; } } /* Menu poziome i przycisk Zadzwon przestaja sie miescic obok siebie kolo 1000 px. Ponizej tego progu menu chowa sie pod hamburgera. PRZEBUDOWA 8.08.2026, po uwadze Danusi „menu jak w kazdej ai stronie". Poprzednio hamburger otwieral wysuwana liste 12px pod paskiem - wzor, ktory wyglada identycznie na kazdej stronie z generatora. Teraz otwiera sie PELNY EKRAN w jezyku tego serwisu: - granat i kremowe litery, jak ciemne bloki na stronie, - pozycje wielkimi WASKIMI wersalikami (wdth 62, ten sam slup co tytuly sprzed zmiany na pismo odreczne), - kazda pozycja z numerem 01-06, jak spis atrakcji na /okolica/. Pasek na gorze zostaje kremowy z logo i X - logo Klaczna na granacie znika, a tak caly czas widac, gdzie sie jest i jak wyjsc. */ @media (max-width: 1000px) { .menu-toggle { display: flex; order: 6; } .naglowek-cta { order: 5; margin-left: auto; } #menu-glowne { margin-left: 0; } #menu-glowne { position: fixed; inset: 82px 0 0; z-index: 99; background: var(--ciemny); color: var(--kremowy); display: none; padding: clamp(20px, 6vh, 56px) 24px 40px; overflow-y: auto; } #menu-glowne.otwarte { display: block; } body.menu-otwarte { overflow: hidden; } .menu { flex-direction: column; align-items: stretch; gap: 0; margin: 0 auto; max-width: 620px; counter-reset: poz; } .menu li { border-bottom: 1px solid var(--kremowy-20); } .menu > li { counter-increment: poz; } .menu a { display: flex; align-items: baseline; gap: 18px; padding: 17px 0; font-weight: 700; font-stretch: var(--w-tytul); font-size: clamp(1.5rem, 6.4vw, 2.1rem); letter-spacing: .02em; line-height: 1.15; } .menu a:hover, .menu .current-menu-item > a, .menu .current_page_item > a { text-underline-offset: 8px; } .menu > li > a::before { content: counter(poz, decimal-leading-zero); font-size: 12px; font-stretch: var(--w-normal); font-weight: 700; letter-spacing: .12em; color: var(--kremowy-tekst); flex: none; } .menu .sub-menu { position: static; opacity: 1; visibility: visible; border: 0; background: transparent; box-shadow: none; margin: 0; padding: 0 0 12px 44px; } .menu .sub-menu a { font-size: 14px; font-stretch: var(--w-normal); padding: 8px 0; } .menu .sub-menu a::before { content: none; } /* STOPKA PANELU: telefon, WhatsApp, znaki spolecznosciowe. Panel konczyl sie ostatnim odnosnikiem i nic wiecej sie w nim nie dalo zrobic - a to jedyny ekran, na ktorym gosc ma cala nawigacje przed oczami. Przycisk jest JASNY, bo panel stoi na granacie, i pelnej szerokosci, bo to najwazniejsza akcja w calym menu. */ .menu-stopka { display: block; max-width: 620px; margin: 30px auto 0; } .menu-stopka .btn { width: 100%; background: var(--kremowy); color: var(--ciemny); border-color: var(--kremowy); } .menu-stopka .btn:hover { background: transparent; color: var(--kremowy); } .menu-stopka .lnk { display: inline-flex; margin-top: 20px; color: var(--kremowy); } .menu-stopka .social { margin-top: 24px; } .menu-stopka .social a { border-color: var(--kremowy-20); color: var(--kremowy); } .menu-stopka .social a:hover { background: var(--kremowy); color: var(--ciemny); } } @media (max-width: 880px) { :root { --marg: 24px; } .dom-blok { grid-template-columns: 1fr; } .dom-blok:nth-of-type(even) .dom-blok-foto { order: 0; } /* NAGLOWKI SEKCJI NA TELEFONIE - WYSRODKOWANE (10.08.2026, uwaga Danusi). Na desktopie tytul i etykieta stoja OBOK SIEBIE i to ma sens: tworza wiersz, ktory otwiera sekcje. Na telefonie nie miesza sie obok, wiec zawijaly sie na dwa bloki - tytul z lewej, etykieta gdzies z prawej - i wygladalo to jak dwie niezalezne rzeczy, ktore przypadkiem sasiaduja. W slupie ustawiamy je jedno pod drugim i na srodku: etykieta staje sie wtedy podtytulem, czyli tym, czym jest. */ .naglowek-bloku { flex-direction: column; align-items: center; gap: 8px; padding-left: 0; text-align: center; } .naglowek-bloku .kicker { text-align: center; padding-top: 0; max-width: 30ch; } } @media (max-width: 700px) { /* ===================================================================== HERO NA TELEFONIE - ROZDZIELONY (10.08.2026, „na mobile uklad jest zly"). Do tej pory tekst lezal NA zdjeciu, tak jak na desktopie, i byl to blad dajacy sie zmierzyc: kicker „DWA DOMY NAD JEZIOREM" 74% obrysu liter ponizej 4,5:1 „Niezapominajka" 25% „i Slonecznik" 35% (na desktopie cala kolumna: 2,8%) Powod jest strukturalny, nie kosmetyczny. Na desktopie chroni tekst gradient OD LEWEJ, bo tekst stoi w lewej kolumnie, a zdjecie zostaje jasne po prawej. Na 393 px tekst zajmuje CALA szerokosc, wiec ten sam zabieg nie ma gdzie dzialac - a dokladnie pod napisem siedzi bialy bocian, czyli najjasniejszy obiekt w calym kadrze. Testowane pomiarem cztery warianty. Samo wzmacnianie gradientu schodzilo z 74% na 34% przy kickerze, ale placilo za to jasnoscia zdjecia (0,52 -> 0,40) i bocian robil sie szara plama - czyli leczenie gorsze od choroby. Dlatego zdjecie PRZESTAJE byc tlem tekstu: jest osobnym pasem u gory, w calosci widoczne i niczym nieprzykryte, a lockup schodzi pod nie na lity granat. Kontrast kazdego napisu wynosi wtedy 11,18:1 z definicji, bez zadnego gradientu, a bociana widac pierwszy raz w calosci. ===================================================================== */ .hero { display: flex; flex-direction: column; background: var(--ciemny); } .hero::after { content: none; } /* gradient niepotrzebny */ .hero-foto { position: relative; inset: auto; z-index: 0; height: 46vh; min-height: 260px; max-height: 380px; } /* 40% zamiast `bottom`: przy niskim pasie kadrowanie od dolu ucinalo bocianowi skrzydla, a to on jest tu cala trescia zdjecia. */ .hero-foto img { height: 100%; object-position: center 40%; } .hero-in { min-height: 0; justify-content: flex-start; padding: 30px 0 34px; } .hero-lockup .kicker { margin-bottom: 8px; color: var(--kremowy-tekst); } .hero-lead { font-size: 15px; margin-top: 12px; } .hero-cta { margin-top: 20px; gap: 12px 22px; } .hero-fakty { margin-top: 26px; padding-top: 16px; gap: 10px 22px; } /* TRZY DROGI DALEJ NA TELEFONIE. Trzy pozycje szly jedna za druga bez zadnej granicy i zlewaly sie w jeden ciag tekstu - nie bylo widac, gdzie konczy sie „Gospodarze", a zaczyna „Dla gosci". Kreska miedzy nimi robi z tego trzy osobne drzwi, a wysrodkowanie ustawia je w jednej osi z naglowkiem sekcji. Akapity sa krotkie (dwa, trzy wiersze), wiec srodek ich nie psuje; przy dluzszej prozie zostawilabym wyrownanie do lewej. */ .trojka { grid-template-columns: 1fr; padding-top: 34px; text-align: center; gap: 0; } .trojka > img { aspect-ratio: 16 / 9; margin-bottom: 30px; } .trojka > div { padding: 26px 0; } .trojka > div + div { border-top: 1px solid var(--ciemny-20); } .trojka h3 { margin-bottom: 10px; } .trojka .lnk { justify-content: center; } .form-grid { grid-template-columns: 1fr; } /* STOPKA NA TELEFONIE - WYSRODKOWANA (10.08.2026, uwaga Danusi). Na desktopie stopka ma trzy kolumny i wyrownanie do lewej jest naturalne, bo to kolumny buduja porzadek. Na telefonie schodza jedna pod druga i wyrownanie do lewej zostawia po prawej rwana krawedz, a przy krotkich wpisach („O nas", „Galeria") wyglada to na niedokonczone. W slupie srodek jest jedyna osia, ktora cokolwiek porzadkuje. */ .stopka-in { grid-template-columns: 1fr; gap: 36px; text-align: center; } .stopka-logo img { margin-inline: auto; } .stopka-marka .tresc { margin-inline: auto; } .stopka .social { justify-content: center; } /* tylko stopka STRONY, nie menu */ /* Dolny pasek jest wysrodkowany i opisany wyzej, przy `.stopka-dol-in`. BYL TU KIEDYS `padding-bottom: 92px` na zapas pod plywajacy WhatsApp - i to wlasnie ta dziura sprawiala, ze koniec strony wygladal na zepsuty. Zapas jest niepotrzebny, odkad oba plywajace guziki chowaja sie, gdy dolny pasek wjedzie w kadr (`body.stopka-w-kadrze`, app.js). */ .galeria { grid-template-columns: repeat(4, 1fr); } .galeria figure.szeroka { grid-column: span 4; } .galeria figure.szeroka .g-el { aspect-ratio: 16 / 6; } .hero-lockup { max-width: none; } .hero-fakty { gap: 12px 26px; } .hero-fakty li { font-size: 12px; } /* METRYKA NA TELEFONIE (10.08.2026). Bylo `flex-direction: column`, czyli KAZDY wiersz lamal sie na dwie linie: etykieta u gory, wartosc pod nia. Przy dziesieciu wierszach na dom robilo to dwadziescia linii i metryka zamieniala sie w sciane, przez ktora trzeba przescrollowac, zeby dojsc do ceny i przyciskow. Teraz wiersz zostaje wierszem: etykieta z lewej, wartosc z prawej, obie w jednej linii. Dluga wartosc (np. „prysznic na parterze, toaleta na pietrze") zawija sie sama pod siebie, bo ma `min-width: 0` i wlasna kolumne - ale zawija sie TYLKO ona, a nie wszystkie wiersze na zapas. */ .metryka > div { align-items: start; gap: 14px; padding: 11px 0; } /* `flex: 0 1 auto` + `min-width: 0` po OBU stronach, nie tylko przy wartosci. Pierwsza wersja miala przy etykiecie `flex: 0 0 auto` i przy 320 px dlugi wiersz cennika („Sezon, maj do wrzesnia" obok „300 zl za dobe") wypychal wartosc poza ekran: strona miala 337 px przy oknie 320. Zaden pojedynczy element sie przy tym nie skarzyl, bo przepelnienie siedzialo w SUMIE dwoch nieskurczalnych kolumn. */ /* POPRAWKA 10.08.2026 (audyt): `min-width: 0` na ETYKIECIE bylo o krok za daleko. Chronilo przed przepelnieniem calego wiersza, ale pozwalalo etykiecie skurczyc sie PONIZEJ wlasnego tekstu - i wtedy napis malowal sie poza swoim boksem (zmierzone: DT 80 > 60 px przy oknie 393). `min-content` to szerokosc najdluzszego SLOWA etykiety, czyli minimum, przy ktorym napis jeszcze sie miesci. Rowna sie to kilkudziesieciu pikselom, a nie calej etykiecie, wiec stara pulapka nie wraca: kurczy sie WARTOSC po prawej (dalej `min-width: 0`) i to ona sie zawija. Sprawdzone po zmianie przy 320 i 393 px: zero przepelnienia elementow I zero przepelnienia dokumentu. */ .metryka dt { flex: 0 1 auto; min-width: min-content; padding-top: 2px; } .metryka dd { flex: 1 1 auto; min-width: 0; text-align: right; font-size: 15px; } } /* METRYKA NA BARDZO WASKIM EKRANIE (do 360 px). Przy 320 px sa wiersze, ktorych po prostu nie da sie zmiescic w jednej linii: „Zaliczka przy rezerwacji" obok „30% ceny pobytu" potrzebuje 297 px przy 284 px swiatla. Wczesniejsze rozwiazania byly skrajne - albo etykieta kurczyla sie ponizej wlasnego tekstu (napis wychodzil poza boks), albo KAZDY z jedenastu wierszy lamal sie na dwie linie i metryka robila sie sciana. `flex-wrap: wrap` jest srodkiem: lamie sie TYLKO ten wiersz, ktory naprawde nie wchodzi, reszta zostaje jednowierszowa. Zawinieta wartosc bierze cala szerokosc i zostaje przy prawej krawedzi, wiec kolumna liczb sie nie rozjezdza. */ @media (max-width: 360px) { .metryka > div { flex-wrap: wrap; gap: 2px 14px; } .metryka dd { flex-basis: auto; } } /* ========================================================================= PASEK NAGLOWKA NA TELEFONIE - naprawa z 7.08.2026, znaleziona POMIAREM. Objaw: przy 375 px `scrollWidth` wynosil 469 przy `clientWidth` 375. Przycisk „Zadzwon" byl uciety prawa krawedzia, a hamburger stal CALY poza ekranem - czyli na najwezszych telefonach nie dalo sie otworzyc menu. Rachunek, ktory to tlumaczy (375 px, margines 24 px = 327 px toru): logo 200 + odstep 20 + przycisk 160 + odstep 4 + hamburger 46 = 430 px Trzy elementy o stalej szerokosci w jednym wierszu, zaden sie nie kurczy. Czego NIE robimy: nie chowamy przycisku z telefonem. Telefon jest tu glowna droga rezerwacji (goscie dzwonia do Pani Basi), wiec to hamburger i logo maja ustapic miejsca, nie przycisk. Zmniejszamy wiec logo i margines strony, a przycisk skracamy tylko o tyle, zeby napis zostal czytelny. ========================================================================= */ /* PASEK NA TELEFONIE: dwa identyczne kolka - sluchawka i hamburger. Wersja posrednia (pigulka z napisem „Zadzwon" kurczona progami 560/400) wygladala na kazdej szerokosci inaczej i na zrzutach z 8.08 wyszla jako znieksztalcony pionowy owal. Jedna forma na caly zakres jest spokojniejsza: para kolek czyta sie jako komplet kontrolek, a napis zostaje w dokumencie dla czytnika ekranu (odnosnik `tel:` musi miec nazwe). */ @media (max-width: 700px) { .naglowek-cta { margin-left: 0; } .naglowek-cta .btn { width: 44px; height: 44px; padding: 0; gap: 0; } .naglowek-cta .btn > span { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } .naglowek-cta .btn svg { width: 17px; height: 17px; } .menu-toggle { width: 44px; height: 44px; } } @media (max-width: 560px) { :root { --marg: 18px; } .naglowek-in { gap: 10px; min-height: 68px; } .logo img { height: 32px; } #menu-glowne { inset: 68px 0 0; } /* PASEK NAGLOWKA: logo z lewej, oba kolka DOCISNIETE DO PRAWEJ. Wczesniejsza wersja zerowala tu `margin-left`, przez co znikal odstep rozpychajacy - logo, sluchawka i hamburger sklejaly sie w lewym rogu, a prawa polowa paska stala pusta. `margin-left: auto` na PIERWSZEJ z kontrolek odsuwa cala grupe do prawej krawedzi. */ .naglowek-cta { margin-left: auto; order: 5; } .menu-toggle { order: 6; margin-left: 0; } } @media (max-width: 520px) { .galeria { grid-template-columns: repeat(2, 1fr); gap: 12px; } .galeria figure, .galeria figure.szeroka { grid-column: span 2; } .galeria figure .g-el, .galeria figure.szeroka .g-el { aspect-ratio: 4 / 3; } .btn { width: 100%; } /* Wyjatek dla paska: kolko sluchawki ma STALE 44 px. `width: auto` bylo tu pulapka - stalo w arkuszu za regula 44 px z bloku ≤700 i ja nadpisywalo, przycisk kurczyl sie do gologo znaku (19 px szerokosci przy 44 wysokosci). */ .naglowek-cta .btn { width: 44px; } .dom-akcje, .wezwanie-akcje, .rezerwacja-akcje, .pusto .akcje { gap: 16px; } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; } } @media print { .naglowek, .stopka-dol, .do-gory { display: none !important; } body { background: #fff; color: #000; font-size: 12pt; } }