, nie nagłówki — stopkowe „Menu/Dodatkowe" po H2 sekcji robiło przeskok H2→H4 w hierarchii dokumentu. */ .ob-footer__tytul { color: var(--biel); font-size: var(--fs-base); font-weight: 700; margin:0 0 1rem; } .ob-footer__kol ul { list-style: disc; margin:0; padding-left:1rem; display: flex; flex-direction: column; gap:.5rem; } .ob-footer__kol a { color: rgba(255,255,255,.88); font-size: var(--fs-sm); } @media (hover: hover) { .ob-footer__kol a:hover { color: var(--biel); } } /* logo w stopce jak we wzorcu: napis w wersji białej (filtr, ten sam plik) */ .ob-footer__logo { width: 285px; height: auto; margin-bottom:1rem; filter: brightness(0) invert(1); } /* przycisk „Wyznacz trasę": kolor tekstu przegrywał z regułą linków stopki */ .ob-footer__kol--logo a.ob-btn--jasny { color: var(--ziel-ciemna); } /* karta danych kontaktowych: biała, zaokrąglona, nachodzi na falę */ .ob-footer__kol--dane { background: var(--biel); color: var(--tekst); border-radius: var(--radius-lg); padding:1.5rem 1.5rem; margin-top:-9.5rem; box-shadow: var(--shadow-lg); position: relative; z-index: 2; } .ob-footer__kol--dane .ob-footer__tytul { color: var(--ziel-ciemna); } .ob-footer__kol--dane p { display: flex; gap:0.5rem; align-items: flex-start; font-size: var(--fs-sm); color: var(--tekst-mig); } .ob-footer__kol--dane a { color: var(--ziel-ciemna); font-weight: 600; } .ob-footer__kol--dane .ob-icon { color: var(--ziel); flex-shrink: 0; margin-top:0.25rem; } .ob-footer__dol { background: var(--ziel-ciemna); color: rgba(255,255,255,.85); } .ob-footer__dol-in { display: flex; justify-content: space-between; padding-block:1rem; font-size: var(--fs-xs); flex-wrap: wrap; gap:.5rem; } .ob-footer__dol a { color: var(--biel); font-weight: 600; } /* ========================================================================== RESPONSYWNOŚĆ ========================================================================== */ @media (max-width: 980px) { .ob-hero__in, .ob-intro__in, .ob-org__in, .ob-kontakt__in { grid-template-columns: 1fr; } .ob-budynki__grid { grid-template-columns: 1fr; } .ob-footer__in { grid-template-columns: 1fr 1fr; } .ob-header__nav-wrap { position: fixed; inset: 0 0 0 auto; width: min(80vw, 320px); background: var(--biel); transform: translateX(100%); visibility: hidden; transition: transform var(--t-base) var(--ease), visibility 0s var(--t-base); z-index: 200; border-left: 1px solid var(--c-border-light); overflow-y: auto; padding-top:4rem; } body.ob-menu-open .ob-header__nav-wrap { transform: translateX(0); visibility: visible; transition-delay: 0s; box-shadow: var(--shadow-lg); } .ob-header__nav-in { flex-direction: column; align-items: flex-start; gap:1.5rem; padding:1.5rem; } .ob-nav ul { flex-direction: column; gap:1rem; } .ob-social { margin-left:0; } .ob-burger { display: inline-flex; flex-direction: column; justify-content: center; gap:0.25rem; width: 44px; height: 44px; margin-left:auto; background: none; border: none; cursor: pointer; z-index: 210; position: relative; } .ob-burger span { display: block; width: 26px; height: 2px; background: var(--ziel-ciemna); transition: .3s; } body.ob-menu-open .ob-burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); } body.ob-menu-open .ob-burger span:nth-child(2) { opacity: 0; } body.ob-menu-open .ob-burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } .ob-header__kontakt .ob-header__tel { display: none; } } @media (max-width: 600px) { .ob-hero__right { grid-template-columns: 1fr 1fr; } .ob-hero__foto img { aspect-ratio: 5/6; } .ob-footer__in { grid-template-columns: 1fr; } .ob-header__top-in { min-height: 64px; } .ob-logo img { width: 100px; } } /* karta danych nie nachodzi na falę, gdy stopka jest jednokolumnowa */ @media (max-width: 980px) { .ob-footer__kol--dane { margin-top:0; } } /* kalendarz podstrona */ .ob-kalendarz { padding-block:3rem; text-align: center; } .ob-kalendarz__tytul { text-align: center; color: var(--tekst); } .ob-kalendarz__widget { max-width: 62rem; margin:0 auto; min-height: 480px; } .ob-strona { padding-block:3rem; } .ob-strona__tytul { color: var(--tekst); } .ob-strona__tresc { line-height: 1.8; } .ob-strona__tresc h2 { color: var(--ziel); font-size: var(--fs-lg); margin-top:2rem; } /* ========================================================================== STANY KOMPONENTÓW — brief pkt 5 Każdy klikalny element ma reakcję hover, widoczny focus dla klawiatury, docisk przy active. Stany są tokenowe, nie punktowe. ========================================================================== */ /* --- focus-visible: widoczny pierścień, ale tylko przy nawigacji klawiaturą. `:focus` bez `-visible` zostawiamy w spokoju — obrys po kliknięciu myszą irytuje, a nikomu nie pomaga. --- */ a:focus-visible, button:focus-visible, summary:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible { outline: 3px solid currentColor; outline-offset: 3px; border-radius: var(--radius-sm); } /* --- active: lekki docisk, ten sam na wszystkich przyciskach --- */ .ob-btn:active { transform: translateY(1px); } /* --- disabled --- */ .ob-btn[disabled], .ob-btn[aria-disabled="true"] { opacity: .5; cursor: not-allowed; pointer-events: none; } /* --- linki w treści odróżnialne od tekstu --- */ .ob-strona__tresc a, .ob-faq__a a { color: var(--c-brand-dark); text-decoration: underline; text-underline-offset: .18em; transition: color var(--t-fast) var(--ease); } @media (hover: hover) { .ob-strona__tresc a:hover, .ob-faq__a a:hover { color: var(--c-brand); } } /* --- karty: hover tylko tam, gdzie jest czym najechać --- */ @media (hover: hover) { /* Audyt: logo, telefon w nagłówku, ikona FB i odnośniki bez reakcji na najechanie. Delikatne przygaszenie — spójne, bez fajerwerków. */ .ob-logo:hover, .ob-logo:hover img { opacity: .8; } .ob-header__tel:hover { color: var(--ziel-ciemna); } .ob-social__fb:hover { background: var(--ziel); } .ob-footer__social a:hover { opacity: .8; } .ob-hero__kafel:hover { box-shadow: var(--shadow-md); } } .ob-logo img, .ob-header__tel, .ob-social__fb, .ob-hero__kafel { transition: opacity var(--t-base) var(--ease), background var(--t-base) var(--ease), color var(--t-base) var(--ease), box-shadow var(--t-base) var(--ease); } /* pole dotyku przycisku menu — zmierzone 38 px szerokości */ .ob-burger { min-width: 44px; min-height: 44px; } /* ========================================================================== RUCH — brief pkt 8. Szanujemy preferencję ograniczenia animacji. ========================================================================== */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; } } /* ========================================================================== DETALE (polish) — brief pkt 9 ========================================================================== */ ::selection { background: var(--c-brand); color: var(--c-on-brand); } /* Nagłówki: balans łamania (bez sierotki w ostatniej linii), proza: pretty */ h1, h2, h3, .ob-h2, .ob-hero__tytul { text-wrap: balance; } p, li { text-wrap: pretty; } /* Długi adres e-mail nie rozpycha układu */ .ob-kontakt__dane a, .ob-footer__kol--dane a { overflow-wrap: anywhere; } /* Ramki bez podanej wysokości mają zarezerwowane miejsce (zero CLS) */ iframe:not([height]):not([style*="height"]) { width: 100%; aspect-ratio: 16/10; min-height: 16rem; border: 0; } /* ========================================================================== TELEFON — brief pkt 7. Próg czytelności i cele dotykowe. ========================================================================== */ @media (max-width: 767px) { /* body min 16px, treść drugorzędna min 15px */ .ob-hero__tekst, .ob-intro__tresc p, .ob-budynek__opis, .ob-relaks__tekst p, .ob-kontakt__tresc p, .ob-hero__kafel span, .ob-intro__ikona, .ob-cennik__stawka, .ob-cennik__opis, .ob-cennik__nota, .ob-faq__a, .ob-footer__kol a, .ob-footer__dol-in, .ob-footer__kol--dane p { font-size: max(0.9375rem, var(--fs-small)); } /* cele dotykowe: odnośniki w stopce i menu */ .ob-footer__kol a, .ob-nav a { min-height: 44px; display: inline-flex; align-items: center; } /* pola formularza ≥16px — inaczej iOS przybliża stronę przy dotknięciu */ input, textarea, select { font-size: var(--fs-base); } } /* ========================================================================== NAPRAWY Z AUDYTU POMIAROWEGO (320–1440 px) Każda pozycja ma pod sobą zmierzoną przyczynę, nie domysł. ========================================================================== */ /* 1) H-SCROLL 10 px przy 320 px — PRZYCZYNA: panel menu ma stałą szerokość `min(80vw, 320px)`, a przy `transform: translateX(100%)` jego prawa krawędź wychodzi poza dokument. Zamykamy go w `overflow-x: clip` na body i ograniczamy szerokość panelu — bez zaklejania całego układu. */ body { overflow-x: clip; } @media (max-width: 980px) { .ob-header__nav-wrap { width: min(80vw, 300px); max-width: calc(100vw - 2.5rem); } } /* 2) CELE DOTYKOWE < 44 px — ikona Facebooka miała 30×30, logo 50×39. Pole dotyku powiększamy bez zmiany wyglądu ikony. */ .ob-social__fb { width: 44px; height: 44px; } .ob-social__fb svg { width: 16px; height: 16px; } .ob-logo { display: inline-flex; align-items: center; min-height: 44px; } .ob-header__tel { min-height: 44px; display: inline-flex; align-items: center; } .ob-footer__kol a, .ob-nav a, .ob-kontakt__dane a { min-height: 44px; display: inline-flex; align-items: center; } /* 3) KARTY BUDYNKÓW NIERÓWNEJ WYSOKOŚCI (446/417/472 px) — PRZYCZYNA: opisy mają różną długość, a karta rosła do treści. Zdjęcie stałej proporcji + opis rozpychający się do pełnej wysokości wyrównuje rząd. */ /* 4) KONTENERY NIEZGODNE (lewa krawędź 0 vs 321) — PRZYCZYNA: kontener wewnątrz panelu menu (poza ekranem) był liczony razem z resztą. Panel dostaje własny, węższy gutter i nie udaje kontenera treści. */ .ob-header__nav-in { padding-inline:var(--space-6); } /* ========================================================================== NAPRAWY — DRUGA TURA, po diagnozie przyczyn (nie objawów) ========================================================================== */ /* H-SCROLL 10 px przy 320 px — PRAWDZIWA PRZYCZYNA (zmierzona): panel menu jest `position: fixed` i odsunięty `translateX(256px)`. Element przesunięty transformem NADAL powiększa obszar przewijania dokumentu. `overflow-x: clip` na `body` tego nie łapie, bo panel jest `fixed` — zaczepia się o viewport, nie o body. Rozwiązanie: chowamy panel `visibility: hidden` gdy jest zamknięty (element ukryty nie tworzy obszaru przewijania), przywracamy przy otwarciu. Animacja zostaje płynna, bo `visibility` też jest w przejściu. */ @media (max-width: 980px) { .ob-header__nav-wrap { visibility: hidden; transition: transform var(--t-base) var(--ease), visibility 0s linear var(--t-base); } body.ob-menu-open .ob-header__nav-wrap { visibility: visible; transition: transform var(--t-base) var(--ease), visibility 0s; } } /* KARTY BUDYNKÓW 446/417/472 — PRAWDZIWA PRZYCZYNA: `align-items: stretch` działa na KARTĘ, ale wysokość rzędu w gridzie wyznacza najwyższa karta, a wewnątrz karty zdjęcie ma `aspect-ratio`, więc rośnie tylko opis. Karty były już `flex`, brakowało rozciągnięcia opisu do pełnej wysokości ORAZ ujednolicenia tytułów (2 wiersze vs 1). */ /* Podpis „Wykonanie: Arlek.pl" w stopce — odnośnik miał 48×16 px. To odnośnik w zdaniu, więc nie powiększamy pola do 44 px (zepsułoby wiersz), tylko dokładamy odstęp klikalny w pionie. */ .ob-footer__dol a { padding-block:var(--space-3); display: inline-block; } /* ========================================================================== NAPRAWY — TRZECIA TURA. Zmierzone, nie zgadnięte. ========================================================================== */ /* H-SCROLL — `visibility: hidden` NIE WYSTARCZYŁO: element ukryty tą własnością nadal zajmuje miejsce w układzie i nadal powiększa obszar przewijania. Zmierzone: panel `fixed`, prawa krawędź 576 px przy ekranie 320 px. Właściwe rozwiązanie: panel zamknięty ma `display: none`. Wtedy znika z układu całkowicie. Płynność otwierania zachowana, bo przy otwarciu wracamy do `display: block` i animujemy `transform` w następnej klatce (`@starting-style` obsługiwane, a bez niego menu po prostu wjeżdża). */ @media (max-width: 980px) { .ob-header__nav-wrap { display: none; } body.ob-menu-open .ob-header__nav-wrap { display: block; visibility: visible; } } /* KARTY 446/446/472 — zmierzone: zdjęcia równe (216 px), tytuły równe (58 px), różnią się WYŁĄCZNIE opisy (132 vs 158 px). Grid miał `grid-auto-rows: auto`, więc rząd nie wyrównywał wysokości. `1fr` na rzędach wyrównuje karty do najwyższej w rzędzie. */ /* H-SCROLL przy 320 px — PRZYCZYNA (zmierzona): kolumna zdjęcia w sekcji wprowadzenia ma sztywne `300px`, a przy ekranie 320 px i marginesach bocznych nie mieści się w kontenerze (prawa krawędź 330 px). Brief pkt 1: „brak sztywnych szerokości w px na elementach, które mają być elastyczne". Zamieniamy na `minmax()` — kolumna kurczy się razem z ekranem zamiast wypychać układ. */ /* Reguła minmax(0,300px) usunięta — była później w kaskadzie i po cichu zwężała ilustrację do 300 px. Siatkę ustawia definicja przy WPROWADZENIU. */ @media (max-width: 980px) { .ob-intro__in { grid-template-columns: minmax(0, 1fr); } } /* Dwie ikony pod wprowadzeniem: siatka 1fr 1fr przy 320 px daje kolumny węższe niż ikona + tekst, więc rząd wypycha układ. Poniżej 480 px układamy je jedna pod drugą. */ @media (max-width: 480px) { .ob-intro__ikony { grid-template-columns: minmax(0, 1fr); } } .ob-intro__ikona { min-width: 0; } .ob-intro__ikona span { min-width: 0; overflow-wrap: anywhere; } /* Telefon dostaje przeskalowaną wersję tła hero (ten sam kadr, mniej bajtów) */ @media (max-width: 768px) { .ob-hero { background: var(--ziel-hero) url("../img/31-800.jpg") center center / cover no-repeat; } } /* E-mail w karcie kontaktowej: mniejszy zamiast łamania po literze */ .ob-footer__kol--dane a { overflow-wrap: anywhere; font-size: var(--fs-xs); } /* Pasek Poradnik/Polityka z mu-pluginu — nasza stopka MA te odnośniki w kolumnie „Dodatkowe", więc dubel pod stopką chowamy. */ /* Ramki roomadmin rosną płynnie, gdy widget nadaje wysokość */ iframe[src*="roomadmin"] { transition: height .25s ease; } /* ========================================================================== BORUCZA — runda premium 13.08.2026 ========================================================================== */ /* Ikona na zielonym kwadracie ma być BIAŁA — nie zielona na zielonym. */ .ob-hero__kafel-ikona, .ob-intro__ikona .ob-icon, .ob-chip .ob-icon, .ob-social__fb, .ob-kontakt-karta__ikona { color: var(--biel); } .ob-hero__kafel-ikona svg, .ob-intro__ikona .ob-icon, .ob-kontakt-karta__ikona svg { stroke: currentColor; } /* kafle hero: ikona biała na zielonym kwadracie */ .ob-hero__kafel-ikona { background: var(--ziel); color: var(--biel); } /* ---------- delikatny ruch ---------- */ .ob-js .ob-anim { opacity: 0; transform: translateY(12px); transition: opacity var(--t-obraz) var(--ease), transform var(--t-obraz) var(--ease); transition-delay: var(--opoznienie, 0ms); } .ob-js .ob-anim--widoczny { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { .ob-js .ob-anim { opacity: 1; transform: none; transition: none; } } /* ---------- NAGŁÓWEK po przewinięciu ---------- */ .ob-header { transition: box-shadow var(--t-base) var(--ease); } .ob-header--zwiniety { box-shadow: var(--cien-md); } .ob-nav a[aria-current="page"] { color: var(--ziel-ciemna); } .ob-nav a[aria-current="page"]::after { right: 0; } /* ---------- CENNIK od nowa: dwie karty obok siebie ---------- */ .ob-cennik { background: var(--jasny); padding-block:var(--sekcja-y); } .ob-cennik__glowa { text-align: center; margin-bottom:2.25rem; } .ob-cennik__glowa .ob-h2 { margin-bottom:0.5rem; } .ob-cennik__pod { color: var(--tekst-mig); margin:0; } .ob-cennik__lista { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap:1.5rem; max-width: none; } .ob-cennik__poz { position: relative; background: var(--biel); border: 1px solid var(--c-border-light); border-radius: var(--radius-lg); padding:1.75rem; box-shadow: var(--cien-sm); display: flex; flex-direction: column; gap:.25rem; transition: box-shadow var(--t-base) var(--ease), transform var(--t-base) var(--ease), border-color var(--t-base) var(--ease); } @media (hover: hover) { .ob-cennik__poz:hover { box-shadow: var(--cien-lg); transform: translateY(-3px); border-color: var(--ziel); } } .ob-cennik__poz--polecany { border-color: var(--ziel); box-shadow: var(--cien-md); } .ob-cennik__polecamy { position: absolute; top: -.75rem; left: 1.6rem; background: var(--ziel-tekst); color: var(--biel); font-size: var(--fs-xs); font-weight: 800; letter-spacing: .07em; text-transform: uppercase; padding:0.25rem 0.75rem; border-radius: var(--radius-full-pill); } .ob-cennik__ikona { display: inline-flex; align-items: center; justify-content: center; width: 46px; height: 46px; border-radius: var(--radius-md); background: var(--ziel); color: var(--biel); margin-bottom:0.5rem; } .ob-cennik__nazwa { font-size: var(--fs-md); font-weight: 700; color: var(--ziel-ciemna); margin:0; } .ob-cennik__opis { display: block; font-size: var(--fs-sm); color: var(--tekst-mig); margin-bottom:1rem; } .ob-cennik__stawki { display: flex; flex-direction: column; gap:.5rem; margin-top:auto; } .ob-cennik__stawka { display: flex; justify-content: space-between; align-items: baseline; gap:1rem; padding:0.75rem 1rem; border-radius: var(--radius-md); background: var(--jasny); font-size: var(--fs-sm); color: var(--tekst-mig); margin:0; font-variant-numeric: tabular-nums; } .ob-cennik__stawka strong { color: var(--ziel-ciemna); font-size: var(--fs-md); font-weight: 800; white-space: nowrap; } .ob-cennik__nota { text-align: center; font-size: var(--fs-xs); color: var(--tekst-mig); margin-top:1.5rem; } .ob-cennik__cta { display: inline-flex; align-items: center; gap:.5rem; min-height: 44px; } .ob-cennik__stopka { text-align: center; margin-top:0.5rem; } @media (max-width: 860px) { .ob-cennik__lista { grid-template-columns: 1fr; } } /* ---------- REZERWACJA na tle: karta z nagłówkiem i krokami ---------- */ /* Rytm pionowy jest wspólny dla wszystkich sekcji. Mnożnik 1,1 dawał tu 97 px przy 88 px w pozostałych: różnica na tyle mała, że nie czytała się jako zamiar, a na tyle duża, że psuła regularność przewijania. */ .ob-rezerwacja { position: relative; background-size: cover; background-position: center; padding-block: var(--sekcja-y); } /* ⚠️ Przesłona 30 % u góry była za słaba: akapit „Proszę wybrać termin…" dawał 2,12 : 1, a punkty listy 4,09 : 1 przy progu 4,50. Mierzone z pikseli, bo tłem jest zdjęcie lasu, a nie kolor. */ .ob-rezerwacja::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(20, 34, 0, .62), rgba(20, 34, 0, .74)); } .ob-rezerwacja .ob-container { position: relative; } .ob-rezerwacja__in { display: grid; grid-template-columns: 1fr 1.05fr; gap:1.5rem; align-items: start; } .ob-rezerwacja__tekst { color: var(--biel); padding-top:.5rem; } .ob-rezerwacja__tekst .ob-h2 { color: var(--biel); } .ob-rezerwacja__lead { font-size: var(--fs-base); line-height: 1.7; } .ob-rezerwacja__punkty { list-style: none; margin:1.25rem 0 0; padding:0; display: flex; flex-direction: column; gap:.75rem; } .ob-rezerwacja__punkty li { display: flex; gap:.75rem; align-items: flex-start; font-size: var(--fs-sm); } .ob-rezerwacja__punkty .ob-icon { color: var(--biel); flex-shrink: 0; } .ob-rezerwacja__box { background: var(--biel); border-radius: var(--radius-lg); padding:1.75rem; box-shadow: var(--cien-xl); max-width: none; } .ob-rezerwacja__box .ob-h2 { font-size: var(--fs-lg); margin-bottom:.25rem; } .ob-rezerwacja__box-pod { color: var(--tekst-mig); font-size: var(--fs-sm); margin-bottom:1rem; } /* Miejsce na ramkę rezerwacji rezerwujemy Z GÓRY. Ramka wjeżdża dopiero po dojechaniu do sekcji i po wczytaniu rośnie do 248 px. Bez tej rezerwacji karta puchła w trakcie oglądania o 138 px, a treść pod spodem podskakiwała pod kursorem. Zmierzone na żywo. */ .ob-rezerwacja__widget { min-height: 248px; } /* Zajawka trzyma wysokość, dopóki nie ma czego pokazać, i sama znika, gdy skrypt wstawi ramkę w to samo miejsce. */ .ob-rezerwacja__zajawka { height: 248px; border-radius: var(--radius-md); background: linear-gradient(180deg, rgba(0,0,0,.03), rgba(0,0,0,.05)); } .ob-rezerwacja__tel { display: inline-flex; align-items: center; gap:.5rem; margin-top:1rem; color: var(--ziel-ciemna); font-weight: 700; min-height: 44px; } @media (max-width: 860px) { .ob-rezerwacja__in { grid-template-columns: 1fr; } } /* ---------- ORGANIZACJA WYDARZEŃ: zdjęcie + karta z liczbami ---------- */ .ob-org { background: var(--biel); padding-block:var(--sekcja-y); } .ob-org__in { display: grid; grid-template-columns: 1.05fr 1fr; gap:2rem; align-items: center; } .ob-org__foto { position: relative; border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--cien-xl); } .ob-org__foto img { border: 0; border-radius: 0; box-shadow: none; width: 100%; height: 100%; object-fit: cover; display: block; } .ob-org__plakietka { position: absolute; left: 1.2rem; bottom: 1.2rem; background: rgba(255, 255, 255, .95); color: var(--ziel-ciemna); border-radius: var(--radius-md); padding:0.75rem 1rem; box-shadow: var(--shadow-md); display: flex; gap:0.75rem; align-items: center; font-size: var(--fs-xs); font-weight: 700; } .ob-org__plakietka strong { font-size: var(--fs-lg); color: var(--ziel); } .ob-org__box { background: transparent; border-radius: 0; padding:0; box-shadow: none; } /* Duplikat reguły z linii 406, przebijał ją samą swoistością i pozycją niżej w arkuszu. Zostaje jedna definicja, ta z `flex-start`. */ .ob-org__box p { color: var(--tekst-mig); font-size: var(--fs-sm); line-height: 1.75; } /* Trzy kafle z liczbami: przy 320 px trzy kolumny nie mieszczą się (zmierzone: prawa krawędź 391 przy oknie 320). Poniżej 480 px układamy je w dwie kolumny, a najwęższy telefon dostaje jedną. */ .ob-org__liczby { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap:.75rem; margin:1.25rem 0; } .ob-org__liczba { min-width: 0; } .ob-org__liczba strong { overflow-wrap: anywhere; } @media (max-width: 520px) { .ob-org__liczby { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 360px) { .ob-org__liczby { grid-template-columns: minmax(0, 1fr); } } .ob-org__liczba { background: var(--jasny); border-radius: var(--radius-md); padding:1rem; text-align: center; } .ob-org__liczba strong { display: block; font-size: var(--fs-lg); color: var(--ziel); font-weight: 800; } .ob-org__liczba span { font-size: var(--fs-xs); color: var(--tekst-mig); } @media (max-width: 860px) { .ob-org__in { grid-template-columns: 1fr; } } /* ---------- FAQ: dwie kolumny pełnej szerokości ---------- */ .ob-faq__lista { max-width: none; } .ob-faq__kolumny { column-count: 2; column-gap:2.5rem; } .ob-faq__kolumny .ob-faq__poz { break-inside: avoid; page-break-inside: avoid; display: block; margin-bottom:.25rem; } @media (max-width: 900px) { .ob-faq__kolumny { column-count: 1; } } /* ---------- KONTAKT: karty danych ---------- */ .ob-kontakt__karty { display: grid; grid-template-columns: repeat(3, 1fr); gap:1rem; margin-top:1.5rem; } .ob-kontakt-karta { display: flex; flex-direction: column; gap:.25rem; background: var(--biel); border: 1px solid var(--c-border-light); border-radius: var(--radius-lg); padding:1.25rem; box-shadow: var(--cien-sm); transition: box-shadow var(--t-base) var(--ease), transform var(--t-base) var(--ease), border-color var(--t-base) var(--ease); } @media (hover: hover) { .ob-kontakt-karta:hover { box-shadow: var(--cien-lg); transform: translateY(-3px); border-color: var(--ziel); } } .ob-kontakt-karta__ikona { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: var(--radius-md); background: var(--ziel); color: var(--biel); margin-bottom:0.5rem; } .ob-kontakt-karta__etyk { font-size: var(--fs-xs); letter-spacing: .06em; text-transform: uppercase; color: var(--tekst-mig); } .ob-kontakt-karta__tresc { font-size: var(--fs-base); color: var(--ziel-ciemna); overflow-wrap: anywhere; } .ob-kontakt-karta__pod { font-size: var(--fs-xs); color: var(--tekst-mig); } @media (max-width: 860px) { .ob-kontakt__karty { grid-template-columns: 1fr; } } /* ---------- REGULAMIN i podstrony tekstowe ---------- */ .ob-strona__tresc { line-height: 1.85; } .ob-strona__tresc h2 { color: var(--ziel-ciemna); font-size: var(--fs-lg); margin-top:2.25rem; padding-top:1.25rem; border-top: 1px solid var(--c-border-light); } .ob-strona__tresc h3 { color: var(--ziel-ciemna); font-size: var(--fs-md); margin-top:1.5rem; } .ob-strona__tresc ul, .ob-strona__tresc ol { padding-left:1.25rem; } .ob-strona__tresc li { margin-bottom:.5rem; } .ob-strona__tresc li::marker { color: var(--ziel-tekst); } .ob-strona__tresc strong { color: var(--ziel-ciemna); } /* ---------- OPINIE: karuzela (te same reguły co u Rakowca, prefiks ob) ---------- */ .ob-opinie { background: var(--jasny); padding-block:var(--sekcja-y); } .ob-opinie__glowa { display: grid; grid-template-columns: auto 1fr auto; gap:0.5rem 1.25rem; align-items: center; background: var(--biel); border-radius: var(--radius-lg); box-shadow: var(--shadow-md); padding:1.5rem 1.5rem; } .ob-opinie__avatar { width: 56px; height: 56px; border-radius: 50%; grid-row: 1 / 3; object-fit: contain; background: var(--jasny); } .ob-opinie__tytul { margin:0; font-size: var(--fs-md); color: var(--ziel-ciemna); } .ob-opinie__ocena { display: flex; align-items: center; gap:.5rem; flex-wrap: wrap; margin:0.25rem 0 0; } .ob-opinie__ocena strong { font-size: var(--fs-lg); font-variant-numeric: tabular-nums; } .ob-gwiazdki { color: #fb8e28; letter-spacing: .05em; } .ob-opinie__liczba { color: var(--tekst-mig); font-size: var(--fs-xs); } .ob-opinie__zrodlo { grid-column: 2; margin:0.25rem 0 0; font-size: var(--fs-xs); color: var(--tekst-mig); } .ob-opinie__akcje { grid-row: 1 / 3; grid-column: 3; display: flex; flex-direction: column; gap:.5rem; } .ob-btn--google { background: #3c6df0; color: var(--biel); } .ob-btn--kontur-ciemny { background: transparent; color: var(--ziel-ciemna); border: 1px solid var(--c-border); } .ob-opinie-karuzela { position: relative; margin-top:1.5rem; } .ob-opinie-karuzela__tor { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(min(100%, 22rem), 1fr); gap:1.25rem; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding-bottom:0.5rem; } .ob-opinie-karuzela__tor::-webkit-scrollbar { display: none; } .ob-opinia { scroll-snap-align: start; background: var(--biel); border-radius: var(--radius-lg); box-shadow: var(--shadow-md); padding:1.5rem; margin:0; display: flex; flex-direction: column; gap:.75rem; } .ob-opinia__tekst { margin:0; font-size: var(--fs-sm); line-height: 1.7; } .ob-opinia__stopka { margin-top:auto; display: flex; gap:0.5rem; align-items: baseline; flex-wrap: wrap; } .ob-opinia__autor { font-weight: 700; color: var(--ziel-ciemna); } .ob-opinia__kiedy { font-size: var(--fs-xs); color: var(--tekst-mig); } .ob-opinie-karuzela__strzalka { position: absolute; top: 45%; z-index: 2; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--c-border); background: var(--biel); color: var(--ziel-ciemna); font-size: var(--fs-lg); line-height: 1; cursor: pointer; box-shadow: var(--shadow-sm); } .ob-opinie-karuzela__strzalka[data-krok="-1"] { left: -10px; } .ob-opinie-karuzela__strzalka[data-krok="1"] { right: -10px; } .ob-opinie-karuzela__kropki { display: flex; justify-content: center; gap:0.5rem; margin-top:1rem; } .ob-opinie-karuzela__kropka { width: 10px; height: 10px; padding:0; border: none; border-radius: 50%; background: var(--c-border); cursor: pointer; } .ob-opinie-karuzela__kropka.is-teraz { background: var(--ziel); transform: scale(1.25); } @media (max-width: 900px) { .ob-opinie__glowa { grid-template-columns: auto 1fr; } .ob-opinie__akcje { grid-row: auto; grid-column: 1 / -1; flex-direction: row; } .ob-opinie__akcje .ob-btn { flex: 1 1 auto; justify-content: center; } .ob-opinie-karuzela__strzalka { display: none; } } /* ---------- FORMULARZ (te same zasady co u Rakowca) ---------- */ .ob-form__pulapka { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } .ob-form label { display: block; margin-bottom:1rem; color: var(--tekst-mig); font-size: var(--fs-xs); } .ob-form input, .ob-form textarea { display: block; width: 100%; margin-top:.25rem; border: 1px solid var(--c-border-light); border-radius: var(--radius-md); padding:0.75rem 1rem; font-family: inherit; font-size: var(--fs-base); background: var(--biel); color: var(--tekst); min-height: 44px; } .ob-form input:focus, .ob-form textarea:focus { outline: none; border-color: var(--ziel); box-shadow: 0 0 0 3px rgba(103, 151, 27, .16); } .ob-form__row { display: grid; grid-template-columns: 1fr 1fr; gap:1rem; } .ob-form__zgoda { display: flex; gap:0.5rem; align-items: flex-start; font-size: var(--fs-xs); } .ob-form__zgoda input { width: 20px; height: 20px; min-height: 20px; margin:0; flex-shrink: 0; accent-color: var(--ziel); } .ob-form__odp { padding:1rem 1rem; border-radius: var(--radius-md); margin-bottom:1.25rem; font-size: var(--fs-sm); } .ob-form__odp--ok { background: rgba(103, 151, 27, .12); color: var(--ziel-ciemna); border: 1px solid rgba(103, 151, 27, .35); } .ob-form__odp--blad { background: rgba(192, 57, 43, .08); color: #a5332a; border: 1px solid rgba(192, 57, 43, .3); } .ob-form__nota { font-size: var(--fs-xs); color: var(--tekst-mig); } @media (max-width: 700px) { .ob-form__row { grid-template-columns: 1fr; } } /* Ikony social w stopce: pełne pole dotyku 44x44 (zmierzone 46 wys., <44 szer.) */ .ob-footer__social a { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%; background: rgba(255,255,255,.14); color: var(--biel); } @media (hover: hover) { .ob-footer__social a:hover { background: rgba(255,255,255,.26); } } /* Kalendarz/rezerwacja na podstronie */ .ob-kalendarz { padding-block:var(--sekcja-y); } .ob-kalendarz__tytul { text-align: left; } .ob-kalendarz__wstep { color: var(--tekst-mig); margin-bottom:1.5rem; } .ob-kalendarz__karta { background: var(--biel); border: 1px solid var(--c-border-light); border-radius: var(--radius-lg); box-shadow: var(--shadow-md); padding:1.5rem; } .ob-kalendarz__widget { min-height: 110px; overflow: visible; } .ob-kalendarz__widget iframe { display: block; width: 100%; border: 0; } .ob-kalendarz__cta { display: flex; gap:0.75rem; flex-wrap: wrap; margin-top:1.5rem; } /* Przycisk pod cennikiem: biały tekst na ciemnej zieleni (stara reguła robiła z niego ciemny podkreślony link — tekst znikał na tle). */ .ob-cennik__cta.ob-btn--rez { color: var(--biel); text-decoration: none; } /* Telefon: opisy kart cennika i nota miały 14 px (pomiar audytu) */ @media (max-width: 767px) { .ob-cennik__opis, .ob-cennik__nota, .ob-rezerwacja__box-pod, .ob-kontakt-karta__pod, .ob-org__liczba span { font-size: var(--fs-sm); } } /* ⚠️ ROZDĘCIE SIATKI (zmierzone: dokument 394 px przy oknie 390). Element siatki ma domyślnie `min-width: auto`, więc nie kurczy się poniżej swojej treści i wypycha układ w bok. Zdjęcie z lotu ptaka w sekcji „Organizacja wydarzeń" robiło dokładnie to. Poprawka u źródła: każdy element naszych siatek może się kurczyć. */ .ob-org__in > *, .ob-cennik__lista > *, .ob-rezerwacja__in > *, .ob-kontakt__karty > *, .ob-budynki__grid > *, .ob-hero__in > *, .ob-intro__in > * { min-width: 0; } .ob-org__foto img { max-width: 100%; } /* Telefon: punkty przy rezerwacji i podpisy kart mierzone na 15,0 px — próg czytelności zaczyna się dokładnie tam, więc podnosimy do 16 px. */ @media (max-width: 767px) { .ob-rezerwacja__punkty li, .ob-rezerwacja__lead, .ob-kontakt-karta__pod, .ob-cennik__opis { font-size: var(--fs-base); } } /* ========================================================================== WAGA STRONY NA TELEFONIE Pomiar (390 px): 2,6 MB przy budżecie 800 KB. Telefon pobierał pełne rozdzielczości teł i zdjęć. Poniżej te same kadry w wersji 800–960 px. ========================================================================== */ /* Wąski ekran = lżejszy kadr. Decyduje SZEROKOŚĆ OKNA, nie gęstość ekranu: `image-set` z wariantem 2x na telefonie z gęstym wyświetlaczem pobierał dokładnie ten duży plik, którego mieliśmy uniknąć (pomiar: waga strony spadła tylko o 21%). */ @media (max-width: 900px) { .ob-budynek__kadr, .ob-rezerwacja { background-image: var(--male, var(--duze)) !important; } .ob-intro__foto { background-image: url("../img/intro-las-mal.jpg"); } } /* Karuzela opinii: strzałki nachodziły na tekst kart (zmierzone na zrzucie). Wsuwamy je poza tor, a na wąskim ekranie chowamy — tam przewija się palcem. */ .ob-opinie-karuzela { padding-inline:2rem; } .ob-opinie-karuzela__strzalka[data-krok="-1"] { left: 0; } .ob-opinie-karuzela__strzalka[data-krok="1"] { right: 0; } /* Karty równej wysokości w rzędzie */ .ob-opinie-karuzela__tor { align-items: stretch; } .ob-opinia { height: 100%; } @media (max-width: 900px) { .ob-opinie-karuzela { padding-inline:0; } } /* Kropki karuzeli: kropka ma 10 px, ale palec potrzebuje 44 px. Powiększamy POLE DOTYKU przezroczystą obwódką — kropka wygląda tak samo, a trafia się w nią bez celowania. */ .ob-opinie-karuzela__kropka { width: 44px; height: 44px; background: transparent; position: relative; transform: none; } .ob-opinie-karuzela__kropka::before { content: ""; position: absolute; inset: 17px; border-radius: 50%; background: var(--c-border); transition: background var(--t-base) var(--ease), transform var(--t-base) var(--ease); } .ob-opinie-karuzela__kropka.is-teraz { background: transparent; transform: none; } .ob-opinie-karuzela__kropka.is-teraz::before { background: var(--ziel); transform: scale(1.3); } .ob-opinie-karuzela__kropki { gap:0; } /* ⚠️ SKACZĄCY NAGŁÓWEK (bounce przy przewijaniu) — USUNIĘTA PRZYCZYNA. Przyklejony nagłówek zmieniał WYSOKOŚĆ po przewinięciu (min-height i szerokość logo). Zmiana wysokości elementu `sticky` przesuwa treść pod nim, więc przy progu 60 px powstawała pętla: zwinięcie → treść skacze w górę → próg przestaje być przekroczony → rozwinięcie → i tak w kółko. Reguły zmieniające wymiary zostały usunięte; po przewinięciu zmienia się wyłącznie cień, który nie rusza układu. */ /* ========================================================================== BUDYNKI: zdjęcia mają być DUŻE i dobrze widoczne (uwaga Pawła 13.08). Trzy wąskie karty dawały kadr ~350×260 px. Teraz: dwie kolumny na biurku i pełna szerokość dla trzeciej karty, proporcja 3:2 zamiast 4:3, czyli kadr ponad dwa razy większy. ========================================================================== */ .ob-budynki__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap:1.75rem; } .ob-budynki__grid > :last-child { grid-column: 1 / -1; } .ob-budynek__kadr { aspect-ratio: 3/2; } .ob-budynki__grid > :last-child .ob-budynek__kadr { aspect-ratio: 21/9; } .ob-budynek__kolo { font-size: var(--fs-base); padding:0.5rem 1rem; } @media (max-width: 860px) { .ob-budynki__grid { grid-template-columns: minmax(0, 1fr); } .ob-budynki__grid > :last-child .ob-budynek__kadr { aspect-ratio: 3/2; } } /* ========================================================================== STOPKA BORUCZY od nowa: cztery kolumny, ciemna zieleń, pasek prawny. Zastępuje zieloną płachtę z falą i nachodzącą białą kartą kontaktową, w której dane łamały się w pół (uwaga Pawła 13.08). ========================================================================== */ .ob-footer { background: var(--ziel-ciemna); color: rgba(255, 255, 255, .80); padding-top:0; position: static; } .ob-footer__fala { display: none; } .ob-footer__gora { display: grid; grid-template-columns: 1.5fr .85fr .85fr 1.15fr; gap:2rem; padding-block:3rem 2.25rem; } .ob-footer__kol--marka { min-width: 0; } .ob-footer__logo { width: 240px; height: auto; margin-bottom:1rem; filter: brightness(0) invert(1); } .ob-footer__opis { font-size: var(--fs-sm); line-height: 1.7; } .ob-footer__tytul { color: var(--biel); font-weight: 700; font-size: var(--fs-sm); margin:0 0 1rem; } .ob-footer__kol ul { list-style: none; margin:0; padding:0; display: flex; flex-direction: column; gap:.5rem; } .ob-footer__kol a { color: rgba(255, 255, 255, .80); font-size: var(--fs-sm); transition: color var(--t-base) var(--ease); } @media (hover: hover) { .ob-footer__kol a:hover { color: var(--biel); } } .ob-footer__kol--dane { display: none; } .ob-footer__kol--kontakt { background: none; color: inherit; border-radius: 0; padding:0; margin:0; box-shadow: none; } /* ⚠️ `center`, nie `flex-start`. Odnośnik obok ma 44 px wysokości (pole dotyku) i tekst wyśrodkowany w tym polu, a ikona wisiała przyklejona do góry stałym marginesem 4 px. Rozjazd wynosił 9 px i było go widać przy każdej z trzech pozycji kontaktowych. Wszystkie trzy mieszczą się w jednym wierszu, więc środkowanie jest tu bezpieczne. */ .ob-footer__dana { display: flex; gap:0.5rem; align-items: center; font-size: var(--fs-sm); margin:0 0 .75rem; color: rgba(255, 255, 255, .80); } .ob-footer__dana .ob-icon { color: var(--biel); opacity: .75; flex-shrink: 0; } .ob-footer__dana a { color: rgba(255, 255, 255, .88); overflow-wrap: anywhere; } /* Jasna zieleń pod białym napisem dawała 3,49:1 (próg 4,5). Głębszy odcień tej samej barwy: 5,07:1, a na ciemnym tle stopki i tak wygląda jaśniej. */ .ob-footer__cta { margin-top:0.5rem; background: var(--ziel-tekst); color: var(--biel); } @media (hover: hover) { .ob-footer__cta:hover { background: var(--biel); color: var(--ziel-ciemna); } } .ob-footer__social { display: flex; gap:0.5rem; margin-top:1rem; } .ob-footer__social a { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%; background: rgba(255, 255, 255, .12); color: var(--biel); } @media (hover: hover) { .ob-footer__social a:hover { background: var(--ziel); } } .ob-footer__dol { background: rgba(0, 0, 0, .22); border-top: 1px solid rgba(255, 255, 255, .12); font-size: var(--fs-xs); } .ob-footer__dol-in { display: flex; justify-content: space-between; align-items: center; gap:1rem; flex-wrap: wrap; padding-block:1rem; } .ob-footer__prawne { display: flex; gap:1.25rem; flex-wrap: wrap; } .ob-footer__prawne a, .ob-footer__wyk a { color: rgba(255, 255, 255, .85); } .ob-footer__wyk a { font-weight: 700; color: var(--biel); } @media (max-width: 900px) { .ob-footer__gora { grid-template-columns: 1fr 1fr; } .ob-footer__kol--marka { grid-column: 1 / -1; } } /* ========================================================================== KONTAKT BORUCZY od nowa ========================================================================== */ .ob-kontakt { background: var(--jasny); padding-block:var(--sekcja-y); } .ob-kontakt__glowa { margin-bottom:1.75rem; } .ob-kontakt__lead { color: var(--tekst-mig); font-size: var(--fs-sm); line-height: 1.75; } .ob-kontakt__chipy { display: flex; flex-wrap: wrap; gap:.5rem; margin-top:1rem; } .ob-chip { display: inline-flex; align-items: center; gap:0.5rem; background: var(--biel); color: var(--ziel-ciemna); font-size: var(--fs-xs); font-weight: 600; padding:.5rem 1rem; border-radius: var(--radius-full-pill); box-shadow: 0 1px 4px rgba(0, 0, 0, .05); } .ob-chip .ob-icon { color: var(--ziel); } .ob-kontakt__in { display: grid; grid-template-columns: .95fr 1.05fr; gap:1.5rem; align-items: start; } .ob-kontakt__karty { display: grid; grid-template-columns: minmax(0, 1fr); gap:1rem; margin-top:0; } .ob-kontakt__mapa { background: var(--biel); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-md); } .ob-kontakt__mapa-ramka { line-height: 0; } .ob-kontakt__mapa-ramka iframe { display: block; width: 100%; border: 0; } .ob-kontakt__trasa { display: flex; align-items: center; gap:1rem; padding:1rem 1.25rem; color: var(--ziel-ciemna); border-top: 1px solid var(--c-border-light); transition: background var(--t-base) var(--ease); min-height: 44px; } .ob-kontakt__trasa-ikona { display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; border-radius: var(--radius-md); background: var(--ziel); color: var(--biel); flex-shrink: 0; } .ob-kontakt__trasa-tekst { display: flex; flex-direction: column; line-height: 1.35; } .ob-kontakt__trasa-tekst strong { font-size: var(--fs-base); } .ob-kontakt__trasa-tekst em { font-style: normal; font-size: var(--fs-xs); color: var(--tekst-mig); } .ob-kontakt__trasa-strzalka { margin-left:auto; color: var(--ziel); } @media (hover: hover) { .ob-kontakt__trasa:hover { background: var(--jasny); } } @media (max-width: 860px) { .ob-kontakt__in { grid-template-columns: minmax(0, 1fr); } } /* ========================================================================== TELEFON: stopka kompaktowa, menu dopracowane ========================================================================== */ @media (max-width: 700px) { .ob-footer__gora { grid-template-columns: repeat(2, minmax(0, 1fr)); gap:1.25rem 1rem; padding-block:2rem 1.5rem; } /* Marka i kontakt na całą szerokość, dwie listy odnośników obok siebie. Dzieci siatki NIE reagują na inline-block/width — kolumny ustawia się wyłącznie w grid-template-columns rodzica. */ .ob-footer__kol--marka, .ob-footer__kol--kontakt { grid-column: 1 / -1; } .ob-footer__logo { width: 200px; margin-bottom:.75rem; } .ob-footer__opis { font-size: var(--fs-sm); /* 13 px to plakietka, nie akapit */ line-height: 1.6; margin-bottom:0; } .ob-footer__kol ul { gap:0.5rem; } /* 44 px, nie 40: reguła celuje w każde `a` w kolumnie, więc przykrywała też przycisk CTA (.ob-btn ma 44). Pole dotykowe trzyma standard, zbitość robi mniejszy odstęp listy, nie niższe pola. */ .ob-footer__kol a { font-size: var(--fs-xs); min-height: 44px; display: inline-flex; align-items: center; } .ob-footer__tytul { margin-bottom:0.5rem; font-size: var(--fs-sm); } .ob-footer__dana { margin-bottom:.5rem; font-size: var(--fs-xs); } .ob-footer__dol-in { flex-direction: column; align-items: flex-start; gap:0.5rem; padding-block:1rem; font-size: var(--fs-xs); } .ob-footer__prawne { gap:1rem; } } /* Menu mobilne: pełny ekran, wygodne pozycje, wyraźny przycisk zamknięcia */ @media (max-width: 980px) { .ob-header__nav-wrap { width: min(86vw, 340px); padding-top:5rem; } .ob-header__nav-in { gap:1rem; padding:1.25rem 1.5rem 2rem; } .ob-nav ul { gap:.25rem; width: 100%; } .ob-nav li { width: 100%; border-bottom: 1px solid var(--c-border-light); } .ob-nav li:last-child { border-bottom: none; } .ob-nav a { width: 100%; min-height: 52px; font-size: var(--fs-base); letter-spacing: .02em; } .ob-nav a::after { display: none; } .ob-social { width: 100%; margin-top:1rem; padding-top:1rem; border-top: 1px solid var(--c-border-light); } body.ob-menu-open { overflow: hidden; } /* przyciemnienie tła pod otwartym menu */ .ob-header__nav-wrap { z-index: 200; } .ob-burger { z-index: 210; } } /* ========================================================================== PŁYWAJĄCY PASEK SPOŁECZNOŚCIOWY (zastępuje wtyczkę fuse social sidebar) Prawa krawędź, dokładnie tam, gdzie stał do tej pory. Pole dotykowe 48 px, pod paskiem ciasteczek (z-index 80 < 90), więc niczego nie zasłania. ========================================================================== */ .ob-rail { position: fixed; right: 0; top: 50%; transform: translateY(-50%); z-index: 80; display: flex; flex-direction: column; border-radius: var(--radius) 0 0 var(--radius); overflow: hidden; box-shadow: 0 6px 20px rgba(20, 34, 0, .18); } .ob-rail__poz { width: 48px; height: 48px; display: grid; place-items: center; background: var(--ziel); color: var(--biel); transition: background var(--t-base) var(--ease); } .ob-rail__poz + .ob-rail__poz { border-top: 1px solid rgba(255, 255, 255, .25); } @media (hover: hover) { .ob-rail__poz:hover { background: var(--ziel-ciemna); } } .ob-rail__poz:focus-visible { outline: 3px solid var(--ziel-ciemna); outline-offset: -3px; } /* Na telefonie pasek zakrywał początek odnośników w stopce (pełna szerokość tekstu = każda pozycja pionowa koliduje z czymś dotykowym). Ikony społecznościowe są w nagłówku i stopce, pasek to dodatek na szerokie ekrany. */ @media (max-width: 1023px) { .ob-rail { display: none; } } @media print { .ob-rail { display: none; } } /* ========================================================================== BUDYNKI: TRZY duże kadry obok siebie (uwaga Pawła 13.08) Poprzedni układ 2 + 1 dawał wprawdzie większe zdjęcia, ale rozbijał rytm: dwie karty w rzędzie i jedna pod spodem czytały się jak dwie sekcje. Wracamy do trzech kolumn, tyle że kadr jest wyższy (proporcja 4:5 zamiast 4:3), więc każde zdjęcie jest i tak większe niż w pierwotnej wersji. ========================================================================== */ .ob-budynki__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap:1.5rem; } .ob-budynki__grid > :last-child { grid-column: auto; } .ob-budynek__kadr { aspect-ratio: 4/5; } .ob-budynki__grid > :last-child .ob-budynek__kadr { aspect-ratio: 4/5; } /* Efekt inny niż w pozostałych sekcjach: kadr rozjaśnia się i delikatnie przybliża, a spod dolnej krawędzi wysuwa się ciemna toń, na której siada plakietka z metrażem. Zamiast samego cienia pod kartą, jak wszędzie. */ .ob-budynek { overflow: hidden; } .ob-budynek__kadr { position: relative; filter: saturate(.92) brightness(.97); transition: filter var(--t-obraz) var(--ease), background-size var(--t-obraz) var(--ease); } .ob-budynek__kadr::after { content: ""; position: absolute; inset: auto 0 0 0; height: 55%; background: linear-gradient(to top, rgba(20, 34, 0, .55), rgba(20, 34, 0, 0)); opacity: .75; transition: opacity var(--t-obraz) var(--ease); pointer-events: none; } .ob-budynek__kolo { position: absolute; left: 1rem; bottom: 1rem; z-index: 1; /* Pełne krycie, nie 94 %. Przez te 6 % przebijało zdjęcie pod spodem i zieleń napisu spadała do 3,89 : 1 przy progu 4,50. */ background: #fff; color: var(--ziel-ciemna); } @media (hover: hover) { .ob-budynek:hover .ob-budynek__kadr { filter: saturate(1.06) brightness(1.04); background-size: 112%; } .ob-budynek:hover .ob-budynek__kadr::after { opacity: .35; } .ob-budynek:hover .ob-budynek__kolo { background: var(--ziel-tekst); color: var(--biel); } } @media (max-width: 900px) { .ob-budynki__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 620px) { .ob-budynki__grid { grid-template-columns: minmax(0, 1fr); } .ob-budynek__kadr { aspect-ratio: 4/3; } } /* ========================================================================== ORGANIZACJA WYDARZEŃ: zdjęcie większe (uwaga Pawła 13.08) Kolumna zdjęcia była węższa od kolumny tekstu (1,05 : 1 przy gęstym akapicie obok), więc zdjęcie z lotu ptaka wychodziło małe. Odwracamy proporcję na korzyść zdjęcia i dajemy mu wysoki kadr. ========================================================================== */ .ob-org__in { grid-template-columns: 1.35fr 1fr; gap:2.5rem; } .ob-org__foto { aspect-ratio: 4/3; } .ob-org__foto img { height: 100%; } .ob-org__plakietka { left: 1.5rem; bottom: 1.5rem; } @media (max-width: 860px) { .ob-org__in { grid-template-columns: minmax(0, 1fr); } .ob-org__foto { aspect-ratio: 3/2; } } /* ========================================================================== MENU MOBILNE OD NOWA (uwagi Pawła 13.08) Było: wąska szuflada z prawej + ciemna nakładka na resztę strony. Jest: panel na cały ekran w barwach strony, bez przyciemniania niczego pod spodem. Pozycje jako duże wiersze na liniach włosowych, numer telefonu jako pełny przycisk, media społecznościowe na dole. Wjeżdża od prawej, pozycje pojawiają się kolejno z niewielkim opóźnieniem. ========================================================================== */ @media (max-width: 980px) { .ob-header__nav-wrap { position: fixed; inset: 0; width: 100%; max-width: none; background: var(--biel); transform: translateX(100%); visibility: hidden; transition: transform var(--t-panel) var(--ease), visibility 0s var(--t-panel); z-index: 300; padding:0; overflow-y: auto; overscroll-behavior: contain; display: flex; flex-direction: column; border: 0; box-shadow: none; } body.ob-menu-open .ob-header__nav-wrap { /* `display` MUSI być w regule z tą samą swoistością co ta wyżej (`body.ob-menu-open .ob-header__nav-wrap` = 0,0,2,1), inaczej wygrywa tamta i panel wraca do `block`, a wtedy `margin-top:auto` w stopce panelu nic nie robi. Zmierzone: display był `block`, przez co telefon i ikony stały tuż pod menu zamiast przy dolnej krawędzi. Lekcja: kaskada, zmierz, która reguła wygrywa. */ display: flex; flex-direction: column; transform: translateX(0); visibility: visible; transition-delay: 0s; box-shadow: none; } body.ob-menu-open { overflow: hidden; } /* pasek panelu: logo po lewej, krzyżyk po prawej — ten sam co w nagłówku, więc przycisk nie „przeskakuje" przy otwarciu */ .ob-header__nav-wrap::before { content: ""; display: block; height: 88px; flex-shrink: 0; } .ob-header__nav-wrap ul { flex-direction: column; gap:0; padding:.5rem 0 0; margin:0; list-style: none; } .ob-header__nav-wrap li { border-top: 1px solid var(--c-border-light); } .ob-header__nav-wrap li:first-child { border-top: 0; } .ob-header__nav-wrap li a { display: flex; align-items: center; min-height: 60px; padding-inline:var(--gutter); font-size: var(--fs-base); font-weight: 700; letter-spacing: .02em; width: 100%; opacity: 0; transform: translateY(6px); } body.ob-menu-open .ob-header__nav-wrap li a { animation: ob-poz var(--t-panel) var(--ease) forwards; animation-delay: calc(60ms + var(--i, 0) * 45ms); } /* strzałka na prawym końcu wiersza: czytelny sygnał „to jest do kliknięcia" */ .ob-header__nav-wrap li a::after { content: ""; margin-left:auto; width: .45rem; height: .45rem; border-right: 2px solid currentColor; border-top: 2px solid currentColor; transform: rotate(45deg); opacity: .35; } /* podkreślenie z wersji na biurko nie ma tu sensu */ .ob-header__nav-wrap a::before { display: none; } @keyframes ob-poz { to { opacity: 1; transform: none; } } } @media (max-width: 980px) and (prefers-reduced-motion: reduce) { .ob-header__nav-wrap { transition: none; } body.ob-menu-open .ob-header__nav-wrap li a { animation: none; opacity: 1; transform: none; } } /* Krzyżyk: ten sam przycisk co hamburger, tylko nad panelem i przemieniony w X. Dzięki temu palec trafia w to samo miejsce przy otwieraniu i zamykaniu, zamiast szukać drugiego przycisku w innym rogu. */ @media (max-width: 980px) { .ob-burger { position: relative; z-index: 320; } body.ob-menu-open .ob-burger span { background: var(--tekst); } } /* Panel mobilny Boruczy: kontener treści ograniczał pozycje do 180 px, więc wiersze menu były wąskim słupkiem przy lewej krawędzi. W panelu zdejmujemy z niego szerokość i marginesy — wiersz ma iść od krawędzi do krawędzi, bo to on jest polem dotykowym. */ .ob-nav__tel { display: none; } @media (max-width: 980px) { .ob-header__nav-in { max-width: none; width: 100%; padding:0; gap:0; flex-direction: column; align-items: stretch; flex: 1 1 auto; /* odstępnik u góry już zajął swoje, więc nie 100% */ min-height: 0; } .ob-nav { width: 100%; } .ob-nav ul { width: 100%; gap:0; padding:0; } .ob-nav__tel { display: inline-flex; align-items: center; justify-content: center; gap:0.5rem; margin:auto var(--gutter) .75rem; /* margin-top:auto spycha na dół */ min-height: 52px; border-radius: var(--radius-md); background: var(--ziel-tekst); color: var(--biel); font-weight: 800; font-size: var(--fs-base); } /* podpis „Nasze social media" na dole panelu, wyśrodkowany razem z ikonami */ .ob-social { width: auto; margin:0 var(--gutter) 1.5rem; padding-top:1.25rem; border-top: 1px solid var(--c-border-light); justify-content: center; } } /* Krzyżyk w rogu, nie na środku. Hamburger stoi w środkowej kolumnie nagłówka (logo | przycisk | rezerwacja), więc po otwarciu panelu X wypadał na środku górnej krawędzi i wyglądał jak pomyłka. Przy otwartym panelu przypinamy go do prawego górnego rogu. */ @media (max-width: 980px) { body.ob-menu-open .ob-burger { position: fixed; top: .875rem; right: var(--gutter); z-index: 320; } } /* ========================================================================== PRZYKLEJONY NAGŁÓWEK A SKOK DO ELEMENTU Nagłówek stoi na wierzchu, więc gdy przeglądarka przewija do kotwicy albo do pola formularza, ląduje ono DOKŁADNIE pod paskiem i jest zasłonięte. Widać to i na skokach z menu, i przy poprawianiu błędnie wypełnionego pola. `scroll-margin-top` mówi przeglądarce, żeby zostawiła nad elementem tyle miejsca, ile zajmuje pasek. ========================================================================== */ [id], input, textarea, select, summary, label, button, a[href^="#"] { scroll-margin-top:clamp(88px, 14vw, 200px); } /* ========================================================================== GALERIA (podstrona /galeria/) Zdjęcia klienta z 14.08.2026. Siatka o stałej proporcji kafla, żeby rząd nie skakał przy różnych kadrach (są i pionowe, i poziome). Kafel to odnośnik do wersji dużej, powiększanie obsługuje `[data-lightbox]`. ========================================================================== */ .ob-galeria-str { padding-block:var(--sekcja-y); background: var(--biel); } .ob-galeria-str__tytul { margin-bottom:.5rem; } .ob-galeria-str__wstep { color: var(--tekst-mig); margin-bottom:2rem; text-wrap: pretty; } .ob-galeria-str__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap:1rem; } .ob-galeria-str__poz { position: relative; display: block; aspect-ratio: 4 / 3; overflow: hidden; border-radius: var(--radius-md); background: var(--jasny); box-shadow: var(--shadow-sm); } .ob-galeria-str__poz img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform var(--t-obraz) var(--ease), filter var(--t-panel) var(--ease); } .ob-galeria-str__lupa { position: absolute; right: .625rem; bottom: .625rem; width: 38px; height: 38px; display: grid; place-items: center; border-radius: var(--radius-full-pill); background: rgba(255, 255, 255, .92); color: var(--ziel-tekst); opacity: 0; transform: translateY(6px); transition: opacity var(--t-base) var(--ease), transform var(--t-base) var(--ease); pointer-events: none; } @media (hover: hover) { .ob-galeria-str__poz:hover img { transform: scale(1.06); filter: brightness(1.04); } .ob-galeria-str__poz:hover .ob-galeria-str__lupa { opacity: 1; transform: none; } } /* na dotyku nie ma najechania, więc lupa jest widoczna od razu */ @media (hover: none) { .ob-galeria-str__lupa { opacity: .92; transform: none; } } .ob-galeria-str__poz:focus-visible { outline: 3px solid var(--ziel-tekst); outline-offset: 3px; } .ob-galeria-str__pusto { color: var(--tekst-mig); } @media (max-width: 980px) { .ob-galeria-str__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (max-width: 700px) { .ob-galeria-str__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap:0.5rem; } } /* ========================================================================== SZLIF 14.08: cztery drobiazgi, które składają się na wrażenie dopracowania ========================================================================== */ /* 1. Przyciski dziedziczą krój pisma. `