/* ============================================================================= podglad-rezerwacja.css — arkusz głównej strony formularza rezerwacji (podglad-rezerwacja.html) UWAGA — TUTAJ DEFINIUJEMY GLOBALNE ZMIENNE MOTYWU WLR: Blok :root poniżej zawiera wszystkie zmienne (kolory, --radius, --shadow), z których korzystają RÓWNIEŻ pozostałe arkusze tej witryny: - nav.css (górna nawigacja) - potwierdzenie-rezerwacji.css (strona „dziękujemy”) - blad-platnosci.css (strona błędu płatności) - legal-docs.css (regulamin / polityka prywatności) Każda zmiana wartości w :root WPŁYWA NA CAŁĄ STRONĘ — nie tylko na ten widok. Kolejność reguł poniżej została posortowana zgodnie z kolejnością wystąpień klas w pliku HTML (od góry do dołu), żeby łatwiej było skakać między HTML a CSS podczas dalszego utrzymania kodu. ========================================================================== */ /* ============================================================================= SEKCJA 1. GLOBALNE ZMIENNE MOTYWU (UŻYWANE PRZEZ CAŁĄ WITRYNĘ) ========================================================================== */ /* :root — globalne zmienne CSS dla całego serwisu WLR. Definiujemy je TU (a nie w nav.css), bo to jest „główny” arkusz strony koszyka i ładuje się jako pierwszy. Pozostałe arkusze (nav.css, potwierdzenie-rezerwacji.css, blad-platnosci.css, legal-docs.css) tylko z tych zmiennych korzystają — same ich nie redefiniują. Zmiana koloru --wlr-blue tutaj zmieni kolor linków i przycisków w CAŁEJ witrynie. */ :root{ --wlr-blue:#1eaae0; --wlr-blue-dark:#1690bd; --wlr-blue-light:#e7f6fc; --wlr-bg:#eef2f5; --wlr-card:#fff; --wlr-dark:#3a4250; --wlr-text:#2c3340; --wlr-text-soft:#6b7480; --wlr-text-faint:#9aa3ae; --wlr-border:#dfe5ea; --wlr-border-soft:#eaeef1; --wlr-amber:#e8920f; --wlr-amber-light:#fdf3e3; --wlr-green:#2b9d59; --wlr-green-light:#e6f5ec; --wlr-error:#d3434b; --radius:10px; --shadow:0 6px 22px rgba(40,55,75,.08); } /* ============================================================================= SEKCJA 2. RESET I TYPOGRAFIA STRONY ========================================================================== */ /* Klasyczny mini-reset — zerujemy marginesy i paddingi WSZĘDZIE, włącznie z border-box. Dzięki temu nie musimy przy każdym polu walczyć z domyślnym marginesem przeglądarki (a strona zawiera dziesiątki pól formularza). */ *{box-sizing:border-box;margin:0;padding:0;} /* — globalna typografia. Open Sans pasuje do brandbooka WLR; fallback Segoe UI / Roboto zapewnia spójny wygląd na Windows / Android, gdy Open Sans się nie załaduje. line-height 1.55 — komfortowe czytanie długich opisów (np. preview-note, wyjaśnień przy faktura/KSeF). antialiased — żeby tekst na jasnym tle --wlr-bg nie wyglądał „twardo” na macOS. */ body{font-family:"Open Sans","Segoe UI",Roboto,Helvetica,Arial,sans-serif; background:var(--wlr-bg);color:var(--wlr-text);line-height:1.55; -webkit-font-smoothing:antialiased;} /* Domyślny styl linków w treści — bez podkreślenia w stanie spoczynku (czyściej wygląda przy linkach „regulamin” w checkboxie), podkreślenie pojawia się dopiero przy hover dla afordancji. */ a{color:var(--wlr-blue);text-decoration:none;} a:hover{text-decoration:underline;} /* .wrap — kontener centralny CAŁEJ treści strony (poza górną nawigacją). Wystepuje raz, w okolicy linii 139 HTML:
obejmuje baner podglądu, kartę apartamentu, formularz i stopkę. max-width 880px — strona to formularz, więc trzymamy umiarkowaną szerokość czytelnej kolumny (zbyt szeroki formularz jest męczący). */ .wrap{max-width:880px;margin:0 auto;padding:28px 18px 64px;} /* ============================================================================= SEKCJA 3. BANER „PODGLĄD WIZUALNY” (informacja dla developerów / klienta) ========================================================================== */ /* .preview-note — niebieski baner na samej górze (linia ~141 HTML), informujący że to wersja demo z przykładowymi kwotami i kursami. Jasnoniebieski, ale CELOWO inny odcień niż --wlr-blue-light — chcemy wyraźnie odróżnić informacyjny baner od reszty UI w kolorach marki. */ .preview-note{background:#eef6ff;border:1px solid #b9dcf5;color:#1c5a86; font-size:.82rem;padding:9px 14px;border-radius:8px;margin-bottom:18px;} /* ============================================================================= SEKCJA 4. NAGŁÓWEK APARTAMENTU (
, linia ~147) ========================================================================== */ /* .apt-header — biała karta z dużym zdjęciem + nazwą + paskiem dat pobytu. overflow:hidden bo zdjęcie ma być przycięte do zaokrąglonych rogów karty (border-radius idzie z var(--radius), żeby spójnie z innymi .card). */ .apt-header{background:var(--wlr-card);border-radius:var(--radius); box-shadow:var(--shadow);overflow:hidden;margin-bottom:22px;} /* .apt-photo — duże zdjęcie apartamentu (linia ~148, „Apartament Chmielna I”). 270px to optymalna wysokość: dość duża żeby zrobić wrażenie, ale nie wypycha sekcji formularza poniżej linii zgięcia. object-fit:cover — zdjęcia mogą mieć różne proporcje, więc kadrujemy do prostokąta. background to fallback (jasnoszary) na czas ładowania obrazka. */ .apt-photo{width:100%;height:270px;object-fit:cover;display:block;background:#d4dde3;} /* .apt-body — padding wokół tytułu i paska dat, oddziela tekst od krawędzi karty i od zdjęcia powyżej. */ .apt-body{padding:20px 24px 22px;} /* .apt-name — H1 z nazwą apartamentu (linia ~151). Niebieski (--wlr-blue) bo to jest „bohater” widoku — nazwa rezerwowanego apartamentu, ma wpadać w oko. */ .apt-name{font-size:1.7rem;font-weight:700;color:var(--wlr-blue);line-height:1.2;} /* .apt-address — drugorzędna linijka z adresem („Warszawa, ul. Chmielna 35”). Stłumiony kolor, mniejszy font — pomocnicza informacja. */ .apt-address{color:var(--wlr-text-soft);font-size:.95rem;margin-top:3px;} /* .stay-bar — pasek pod nazwą apartamentu (linia ~158) z 4 kafelkami: Zameldowanie / Wymeldowanie / Goście / Długość pobytu. flex-wrap żeby na mniejszych ekranach kafelki przeszły do drugiego rzędu zamiast się ściskać do nieczytelnych szerokości. Górna kreska oddziela pasek od opisu apartamentu. */ .stay-bar{display:flex;flex-wrap:wrap;gap:14px;margin-top:18px;padding-top:16px; border-top:1px solid var(--wlr-border-soft);} /* .stay-item — pojedynczy kafelek paska (np. „Zameldowanie 7 lipca 2026”). flex:1 1 130px — każdy zajmuje równą część dostępnej szerokości, minimum 130px (zwija się do 1 lub 2 kolumn na mobile zamiast gnieść). */ .stay-item{flex:1 1 130px;} /* .stay-label — etykieta nad wartością („ZAMELDOWANIE”). uppercase + letter-spacing — typowy „eyebrow label” design pattern, wizualnie odróżnia label od wartości (te są większe i pogrubione). */ .stay-label{font-size:.72rem;text-transform:uppercase;letter-spacing:.06em; color:var(--wlr-text-soft);margin-bottom:2px;} /* .stay-value — sama wartość kafelka („7 lipca 2026”, „2 osoby”, „4 noce”). */ .stay-value{font-size:1.02rem;font-weight:600;} /* ============================================================================= SEKCJA 5. KOD RABATOWY (
, linia ~202) ========================================================================== */ /* .promo-toggle — przycisk-link „Mam kod rabatowy ⌄” (linia ~203). Wygląda jak link (kolor --wlr-blue, brak ramki), ale jest