/* ================================================================= legal-docs.css — style dla dokumentów prawnych (regulamin.html, polityka-prywatnosci.html) Plik dziedziczy bazę po podglad-rezerwacja.css: - zmienne kolorów --wlr-blue, --wlr-blue-dark, --wlr-blue-light, --wlr-card, --wlr-text, --wlr-text-soft, --wlr-amber - zmienne --radius, --shadow - bazową typografię i kontener .wrap Dlatego TU dopisujemy WYŁĄCZNIE rzeczy specyficzne dla długich dokumentów prawnych: sticky przycisk powrotu, baner ostrzegawczy, karta tytułu, spis treści, karty paragrafów, boksy info/warn oraz arkusz wydruku. Kolejność reguł poniżej odpowiada kolejności wystąpienia elementów w regulamin.html (od góry strony w dół). ================================================================= */ /* ===== PRZYCISK POWROTU (sticky bar nad treścią) ===== */ /* .back-link — przycisk "← Wróć do rezerwacji" osadzony jako PIERWSZY element wewnątrz
w regulamin.html oraz polityka-prywatnosci.html. Dlaczego position:sticky? - Dokumenty prawne są bardzo długie (kilkanaście paragrafów §1–§14). Gość, który przejdzie do regulaminu np. z kroku płatności, musi mieć stały, łatwo dostępny sposób powrotu do rezerwacji na każdym etapie scrollowania — bez konieczności wracania na sam początek strony ani używania przycisku "wstecz" przeglądarki. - top:12px daje małą rezerwę od krawędzi okna, by przycisk nie dotykał paska adresu przeglądarki. - z-index:50 trzyma go nad kartami paragrafów (.doc-section ma box-shadow, ale nie ma własnego z-index). Layout: inline-flex + gap:8px pozwala na zgrabne ustawienie ikony SVG (.back-icon) obok tekstu "Wróć do rezerwacji". Padding 10/20 i font-weight 600 nadają mu wyraźną wagę CTA. Kolor: var(--wlr-blue) na białym tekście — spójność z resztą brandingu WLR (ten sam niebieski co przyciski w rezerwacji). box-shadow daje lekkie uniesienie nad treścią — sygnał, że element "pływa" nad dokumentem. */ .back-link{position:sticky;top:12px;z-index:50; display:inline-flex;align-items:center;gap:8px; margin-bottom:18px;padding:10px 20px; background:var(--wlr-blue);color:#fff; font-size:.95rem;font-weight:600; border-radius:8px;box-shadow:0 4px 12px rgba(40,55,75,.18); text-decoration:none;transition:background .15s,transform .1s;} /* Hover — ciemniejszy odcień niebieskiego (z bazy podglad-rezerwacja.css). color:#fff i text-decoration:none wymuszone, bo bazowy styl linków może je nadpisywać. */ .back-link:hover{background:var(--wlr-blue-dark);color:#fff;text-decoration:none;} /* Active — drobne wciśnięcie (1px w dół) daje haptyczne wrażenie kliknięcia. Bez zmiany koloru, bo hover już to zrobił. */ .back-link:active{transform:translateY(1px);} /* .back-icon — SVG strzałki wewnątrz .back-link. 22×22 px to rozmiar dobrany pod font-size .95rem, żeby ikona wizualnie pasowała wysokością do tekstu. flex:0 0 auto — ikona nie kurczy się ani nie rośnie, gdy tekst "Wróć do rezerwacji" zostałby przetłumaczony na dłuższy. */ .back-icon{width:22px;height:22px;flex:0 0 auto;} /* ===== BANER OSTRZEGAWCZY (info nad tytułem dokumentu) ===== */ /* .doc-banner — żółty box "Dokument do weryfikacji prawnej". Pojawia się BEZPOŚREDNIO pod przyciskiem powrotu, nad kartą tytułu. Dlaczego żółty (#fff7e6 + obwódka #f0c97a + tekst #8a5a00)? - Klasyczna kolorystyka "uwaga / informacja" — sygnał dla gościa i dla nas (devów/prawników), że treść regulaminu/polityki wymaga jeszcze weryfikacji prawnej przed produkcją. - Kolory zapisane na sztywno (nie przez zmienne) — to "stan przejściowy" dokumentu, ma znikać po przejściu audytu prawnego. Padding 12/16 i font-size .88rem trzymają go subtelnym, żeby nie konkurował wizualnie z właściwą treścią. */ .doc-banner{background:#fff7e6;border:1px solid #f0c97a;color:#8a5a00; padding:12px 16px;border-radius:8px;margin-bottom:22px;font-size:.88rem;} /* Pogrubione w banerze — "Dokument do weryfikacji prawnej." Wymuszamy display:block, żeby trafiło do osobnej linii nad resztą tekstu banera (układ "tytuł + opis"). */ .doc-banner b{display:block;margin-bottom:4px;} /* ===== KARTA TYTUŁU DOKUMENTU ===== */ /* .doc-title-card — biała karta zawierająca

z nazwą dokumentu ("Regulamin najmu apartamentów" / "Polityka prywatności") oraz .doc-meta z datą obowiązywania i wersją. Używa zmiennych z bazy: --wlr-card (tło), --radius, --shadow — żeby wizualnie pasować do innych kart na stronie rezerwacji. Padding 24/24/18 — większy z góry/boków, mniejszy z dołu, bo pod h1 leży tylko jedna linijka meta. */ .doc-title-card{background:var(--wlr-card);border-radius:var(--radius); box-shadow:var(--shadow);padding:24px 24px 18px;margin-bottom:22px;} /* Tytuł dokumentu (H1). 1.8rem to świadomy kompromis: na tyle duży, by wyróżnił się jako tytuł całego dokumentu, ale mniejszy niż klasyczne 2.2–2.5rem — bo dokument prawny ma być rzeczowy, nie marketingowy. line-height:1.2 — dla długich tytułów łamiących się na 2 linie (rzadkie, ale możliwe na wąskich ekranach). */ .doc-title-card h1{font-size:1.8rem;color:var(--wlr-blue);line-height:1.2;} /* .doc-meta — "Obowiązuje od: ... · Wersja 1.0". Stonowany kolor (--wlr-text-soft) i mała wielkość (.85rem) — to informacja drugorzędna względem samego tytułu. */ .doc-meta{color:var(--wlr-text-soft);font-size:.85rem;margin-top:6px;} /* ===== SPIS TREŚCI ===== */ /* .doc-toc — karta "Spis treści" z numerowaną listą linków kotwicznych do §1, §2, ... . Dlaczego ma tło --wlr-blue-light (jasnoniebieskie) zamiast --wlr-card (białego jak inne karty)? - Wizualnie odróżnia TOC od właściwych paragrafów. Gość od razu widzi: "to nawigacja, a niżej jest treść". - Mniejszy padding (16/22 zamiast 22/24) i brak box-shadow — mniej "ciężaru" wizualnego niż karty paragrafów. */ .doc-toc{background:var(--wlr-blue-light);border-radius:var(--radius); padding:16px 22px;margin-bottom:22px;} /* "Spis treści" jako H3 — celowo mniejszy niż H2 paragrafów (1.1rem), bo to tylko etykieta sekcji nawigacyjnej, nie tytuł równorzędny paragrafom regulaminu. */ .doc-toc h3{font-size:.95rem;margin-bottom:10px;color:var(--wlr-text);} /* Numerowana lista linków w TOC — wcięcie 22px, by widoczne były numery 1., 2., ... 14. */ .doc-toc ol{padding-left:22px;} /* Pozycja na liście TOC. .92rem — czytelne, ale mniejsze od głównej treści (.93rem), bo TOC ma być zwarty i mieścić wszystkie pozycje bez scrolla. */ .doc-toc li{margin-bottom:4px;font-size:.92rem;} /* Linki w TOC — kolor brand niebieski, bez podkreślenia w stanie spoczynkowym (czystszy wygląd listy). */ .doc-toc a{color:var(--wlr-blue);text-decoration:none;} /* Podkreślenie pojawia się dopiero przy hover — klasyczna informacja afordancyjna "to jest link". */ .doc-toc a:hover{text-decoration:underline;} /* ===== KARTY PARAGRAFÓW (§1, §2, ...) ===== */ /* .doc-section — biała karta każdego paragrafu (
). To "główny chleb" obu dokumentów — kart jest 12–14 sztuk pod sobą. Te same zmienne co .doc-title-card, więc tytuł i paragrafy wyglądają jak rodzina kart. scroll-margin-top:18px — KLUCZOWE dla linków kotwicznych z TOC. Bez tego, po kliknięciu w "§5. Anulowanie..." paragraf wskoczyłby tuż pod sticky .back-link i był zasłonięty. 18px to mały bufor, żeby tytuł §N był wyraźnie pod przyciskiem powrotu. */ .doc-section{background:var(--wlr-card);border-radius:var(--radius); box-shadow:var(--shadow);padding:22px 24px;margin-bottom:18px; scroll-margin-top:18px;} /* H2 paragrafu — "§1. Postanowienia ogólne i definicje" itd. 1.1rem to świadomy umiar: dokument prawny ma być rzeczowy, więc tytuły paragrafów nie krzyczą rozmiarem, ale wyróżniają się brandowym niebieskim (--wlr-blue) i pogrubieniem (domyślne dla h2). */ .doc-section h2{font-size:1.1rem;color:var(--wlr-blue);margin-bottom:12px;} /* H3 — podtytuły wewnątrz paragrafów (rzadko używane, ale gotowe). .98rem — minimalnie mniejsze od h2, większe od treści. margin-top:14px — odrywa H3 od poprzedniego akapitu. */ .doc-section h3{font-size:.98rem;margin-top:14px;margin-bottom:6px;} /* Treść akapitów i pozycji list w paragrafach. .93rem + line-height:1.65 to ZASADNICZA decyzja typograficzna tego pliku: dokumenty prawne to długie bloki tekstu, więc - rozmiar musi być lekko mniejszy niż 1rem (.93rem ≈ 14.9px), by linia nie była za długa i zmęczenie wzroku nie narastało, - line-height 1.65 daje "oddech" między liniami — zalecane dla tekstu prawnego i naukowego (1.5–1.7). Kolor --wlr-text — pełny kontrast czytania. */ .doc-section p,.doc-section li{font-size:.93rem;line-height:1.65; color:var(--wlr-text);} /* Odstęp między akapitami — 10px, czyli mniej niż przy zwykłych stronach, bo line-height już daje "wizualne oddychanie". */ .doc-section p{margin-bottom:10px;} /* Listy numerowane i punktowane wewnątrz paragrafu — wcięcie 22px na same numery/buletki, odstęp 12px od następnego bloku treści. */ .doc-section ol,.doc-section ul{padding-left:22px;margin-bottom:12px;} /* Pojedynczy item na liście pierwszego poziomu — 6px odstępu. Selektor > li (a nie ogólne li) — żeby NIE doliczać tego marginesu do itemów list zagnieżdżonych (te dostają oddzielne reguły niżej). */ .doc-section ol > li,.doc-section ul > li{margin-bottom:6px;} /* Listy zagnieżdżone (np. §1 pkt 2 ma wewnątrz listę definicji). margin-top:6px lekko je odsuwa od tekstu rodzica, margin-bottom:0 zamyka je płynnie — bo li-rodzic i tak ma swój margin. Bez tego dostawalibyśmy podwójny odstęp. */ .doc-section ol ol,.doc-section ul ul{margin-top:6px;margin-bottom:0;} /* ===== PLACEHOLDER (znaczniki [XX PLN] do uzupełnienia) ===== */ /* .placeholder — żółta plakietka oznaczająca wartość do uzupełnienia po decyzji biznesowej (np. [XXX PLN] w §7 regulaminu, gdzie opłata za zwierzę jeszcze nie została ustalona). Font monospace + żółte tło = wyraźny sygnał "ten fragment nie jest docelową treścią, musi zostać zastąpiony konkretem". Po wypełnieniu wszystkich placeholderów ta klasa może docelowo zniknąć z dokumentu — stąd komentarz "niewykorzystywany" w pierwotnej wersji pliku, ale na razie zostawiamy, bo §7 i §8 mają jeszcze placeholdery. */ .placeholder{background:#fff3cd;color:#7a5c00;padding:1px 6px;border-radius:4px; font-family:ui-monospace,Consolas,monospace;font-size:.88em;} /* ===== BOKSY INFO / WARN (wewnątrz paragrafów) ===== */ /* .box-info — niebieski box z lewą kreską (border-left 3px). Używany np. w §5 regulaminu jako "Wskazówka: dokładna polityka anulacji może różnić się ...". Dlaczego border-left zamiast pełnej ramki? - Wizualnie subtelniej, bardziej "edytorsko" (jak cytat/notka w tekście). Nie kradnie uwagi od głównej treści paragrafu. - Spójne z konwencjami dokumentacji technicznej. */ .box-info{background:var(--wlr-blue-light);border-left:3px solid var(--wlr-blue); padding:10px 14px;border-radius:6px;margin:10px 0;font-size:.9rem;} /* .box-warn — pomarańczowy odpowiednik .box-info dla ostrzeżeń. Używany w §7 regulaminu jako "Lista zakazów (podsumowanie): palenie, głośne imprezy ...". Kolor --wlr-amber (z bazy) sygnalizuje "uwaga, zakazy" mocniej niż neutralne info-blue. Reszta geometrii identyczna jak .box-info, żeby zachować rytm wizualny. */ .box-warn{background:#fdf3e3;border-left:3px solid var(--wlr-amber); padding:10px 14px;border-radius:6px;margin:10px 0;font-size:.9rem;} /* ===== ARKUSZ WYDRUKU (print) ===== */ /* @media print — co dzieje się, gdy gość drukuje regulamin/politykę lub zapisuje "Save as PDF" z poziomu przeglądarki. Dlaczego ukrywamy .back-link i .doc-banner? - back-link jest interaktywny — na papierze bezużyteczny, zajmuje miejsce i wygląda jak losowy niebieski prostokąt. - doc-banner ("Dokument do weryfikacji prawnej") to informacja dla nas, nie dla finalnego czytelnika papierowej kopii. body:white tło — drukarki nie marnują tonera na ewentualne tła. Karty (.doc-section/.doc-title-card/.doc-toc) tracą box-shadow (na papierze szary cień wygląda jak brud) i dostają cienką ramkę #ccc — żeby wciąż było widać, gdzie kończy się jedna sekcja a zaczyna kolejna. */ @media print{ .back-link,.doc-banner{display:none;} body{background:#fff;} .doc-section,.doc-title-card,.doc-toc{box-shadow:none;border:1px solid #ccc;} }