/* ============================================================ KWFoto.pl — PODSTRONA OFERTY ŚLUBNEJ ============================================================ Ten arkusz obowiązuje TYLKO w tym podfolderze. Fundamenty (paleta, kroje, `.wrap`, `.label`, `.reveal`, `.clip-reveal`, nagłówek, stopka, FAQ, sekcja kontaktu, przyciski `.ig-btn`) przychodzą z `../style.css`, który ładuje się PRZED tym plikiem i którego przy pracy nad ofertą NIE RUSZAMY. Tutaj siedzi wyłącznie to, czego na stronie głównej nie ma: okładka, sekcje oferty z fakturą papieru, pakiety, zakres, przebieg, kalkulator wyceny i pasek postępu na dole. Zasady, które przenoszą się z całego projektu: • półpauza „–", nigdy długa pauza; • zero poziomego przewijania — sprawdzane na 360, 375 i 1280 px; • stan oznaczamy obrysem albo tłem, nigdy samym `opacity` (przygaszony tekst zjeżdża wtedy pod próg kontrastu WCAG AA); • wszystko musi być czytelne przy `prefers-reduced-motion`. ============================================================ */ /* ============================================================ OKŁADKA — wstęp na cały ekran ============================================================ Bez okienek ze zdjęciami: kadr w tle jest tylko głębią, a treść to marka, tytuł i jedno zdanie w cienkiej złotej ramie, jak wytłoczenie na płótnie. ------------------------------------------------------------ */ .of-hero { position: relative; min-height: 62vh; display: flex; align-items: center; justify-content: center; text-align: center; overflow: hidden; padding: clamp(6rem, 14vh, 9rem) clamp(1.4rem, 5vw, 4rem) clamp(3rem, 8vh, 5rem); } .of-hero-bg { position: absolute; inset: 0; z-index: 0; } .of-hero-bg img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 42%; filter: saturate(0.9) contrast(0.97) brightness(0.72); } .of-hero-shade { position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(to bottom, rgba(10, 12, 13, 0.72) 0%, rgba(10, 12, 13, 0.34) 42%, var(--bg) 100%), radial-gradient(75% 62% at 50% 50%, rgba(6, 7, 8, 0) 0%, rgba(6, 7, 8, 0.5) 100%); } .of-hero-in { position: relative; z-index: 2; max-width: 44rem; } .of-hero h1 { font-size: clamp(1.9rem, 4.4vw, 3.1rem); font-weight: 400; letter-spacing: 0.04em; line-height: 1.3; margin: 0.5rem 0 1.2rem; color: #f6f2e8; text-shadow: 0 2px 14px rgba(0, 0, 0, 0.8); } /* ------------------------------------------------------------ MOZAIKA ZDJĘĆ — szuflada z kadrami przy lewej krawędzi ------------------------------------------------------------ Pas przewija się razem ze stroną (`position: absolute`, rozpięty od góry do dołu ), a treść jedzie obok — dlatego dostaje wcięcie o jego szerokość. DWA STANY: zwinięty to jedna kolumna kadrów (`--pas-min`), rozsunięty — cztery (`--pas` w `body.szuflada-otwarta`). Rozsuwa go złota strzałka (`.mozaika-uchwyt`). Przy rozsuwaniu treść (
) ustępuje jej miejsca marginesem, żeby oferta nie chowała się pod kolażem — wszystko na jednej krzywej `--plynnie`, więc ruch czyta się jak jeden gest. Kafelki mają PROPORCJE SWOICH ZDJĘĆ — pion zostaje pionem, poziom poziomem. Kolumny układa `oferta.js` metodą murarską (kolejny kadr idzie do najkrótszej kolumny), więc pas jest wypełniony bez dziur, a rytm nieregularny. TRZY WARSTWY, każda z innego powodu: 1. `.mozaika` — pudełko na całą wysokość strony, BEZ przycinania; 2. `.mozaika-klip` — to ono przycina (`overflow: hidden`), żeby kolumny mogły płynąć poza swój zakres i nie wystawały ani nad stronę, ani pod stopkę (a przy okazji nie rozciągały obszaru przewijania); 3. `.mozaika-lupa` — powiększony kadr; stoi POZA warstwą przycinającą, bo ma się kłaść na treści, i pokazuje OSTRE zdjęcie z `img/`, a nie rozciągnięty kafelek z `img/mini/`. ------------------------------------------------------------ */ body.oferta { /* DWIE szerokości, bo pas ma dwa stany: --pas-min zwinięty (jedna kolumna) — tyle miejsca rezerwuje treść; --pas bieżący; po rozsunięciu rośnie i treść ustępuje mu miejsca, żeby oferta nie chowała się za szufladą. --plynnie wspólna krzywa i czas dla wszystkiego, co się przy tym rusza: szuflady, uchwytu, złotej linii i marginesu treści. Długa i miękka (bez odbicia), bo ruch ma być ledwie zauważalny. */ /* ⚠️ FUNDAMENTEM JEST SZEROKOŚĆ KOLUMNY, nie szerokość pasa. Kolumny mają STAŁĄ szerokość, a szuflada je ODSŁANIA, zamiast dzielić między nie ten sam pas. Dzięki temu przy rozsuwaniu kadr nie zmienia rozmiaru ani o piksel — po prostu zza krawędzi wyjeżdżają kolejne trzy kolumny. Wcześniej cztery kolumny dzieliły się szerokością pasa, więc w chwili kliknięcia kafelek malał z 86 px do 19 px i przez całą sekundę rósł z powrotem; to było właśnie to „dziwne" przy rozsuwaniu. 8 px to podwójne wcięcie warstwy przycinającej, 3 × 4 px to odstępy. */ /* ⚠️ Dolna granica 72 px nie jest kosmetyką. Przy czystym `5.6vw` w oknie 900 px kolumna schodziła do 50 px: kadry robiły się znaczkami, a że pas sięga całej strony, mieściło się ich w kolumnie o połowę więcej — czyli więcej elementów po to, żeby wyglądało gorzej. Górna granica trzyma pas w ryzach na monitorze 27". */ --kol: clamp(72px, 5.6vw, 104px); --pas-min: calc(var(--kol) + 8px); --pas: var(--pas-min); --plynnie: 1.05s cubic-bezier(0.22, 1, 0.32, 1); position: relative; /* punkt odniesienia dla pasa */ padding-left: var(--pas-min); } /* ⚠️ TRZY KOLUMNY (od 2026-08-24; wcześniej cztery). Rachunek szerokości: trzy kolumny + dwie szczeliny po 4 px + 4 px wyściółki z każdej strony `.mozaika-klip` = `--kol * 3 + 16`. Przy czterech było `* 4 + 20`. Liczba kolumn stoi też w `KOLUMN` w `oferta.js` — te dwie wartości muszą się zgadzać, bo arkusz rezerwuje miejsce, a skrypt buduje kolumny. */ body.oferta.szuflada-otwarta { --pas: calc(var(--kol) * 3 + 16px); } /* Treść ustępuje rozsuniętej szufladzie — inaczej lewa krawędź kart pakietów i kalkulatora chowałaby się pod kolażem. Przesuwamy JEDEN element (
), więc przy zamykaniu wszystko wraca dokładnie tam, gdzie było. */ body.oferta main { padding-left: calc(var(--pas) - var(--pas-min)); transition: padding-left var(--plynnie); } /* ⚠️ NAGŁÓWEK IDZIE PRZEZ CAŁĄ SZEROKOŚĆ. Wcześniej zaczynał się dopiero za pasem kadrów (`left: var(--pas-min)`), więc lewy skrawek strony zostawał bez paska, a logo stało w dziwnym miejscu. Teraz pasek jest jedną belką od krawędzi do krawędzi, a mozaika przewija się pod nim — nagłówek ma `z-index: 120`, pas 60, więc kolejność jest właściwa bez żadnej dodatkowej reguły. ⚠️ CHOWA SIĘ PRZY PRZEWIJANIU W DÓŁ — tak samo jak na stronie głównej (klasę `head-hidden` dokłada wspólny `script.js`). Do 2026-08-24 podstrona tę klasę unieważniała, żeby menu stało zawsze pod ręką; oddaliśmy ekran treści, bo sekcje mają się mieścić w całości. Belka wraca przy pierwszym ruchu w górę, więc droga do reszty serwisu jest jeden gest stąd. ⚠️ Sekcje dostają `scroll-margin-top` w bloku „ODDECH SEKCJI" niżej — inaczej skok w górę wsuwałby początek sekcji pod wracającą belkę. */ body.oferta .site-head { left: 0; } /* pasek postępu trzyma się szerokości ZWINIĘTEJ — inaczej podskakiwałby przy każdym rozsunięciu szuflady */ body.oferta .pasek { left: var(--pas-min); } .mozaika { position: absolute; left: 0; top: 0; bottom: 0; z-index: 60; /* nad treścią, pod nagłówkiem (120) */ width: var(--pas); /* DELIKATNIE PRZEZROCZYSTA już w stanie zwiniętym: przez szczeliny między kadrami prześwituje film, a rozmycie trzyma to w ryzach, żeby prześwit nie robił się nerwowy. */ background: rgba(7, 9, 10, 0.62); backdrop-filter: blur(14px) saturate(1.04); -webkit-backdrop-filter: blur(14px) saturate(1.04); border-right: 1px solid rgba(200, 176, 138, 0.18); transition: width var(--plynnie), background var(--plynnie), backdrop-filter var(--plynnie), box-shadow var(--plynnie); } /* ROZSUNIĘTA SZUFLADA: tło robi się szybą — przyciemnia i rozmywa to, co pod nią zostało (film i treść), a cień od prawej krawędzi odkleja ją od strony. Stąd wrażenie, że kolaż unosi się nad stroną. */ body.szuflada-otwarta .mozaika { background: rgba(7, 9, 10, 0.44); backdrop-filter: blur(22px) saturate(1.06); -webkit-backdrop-filter: blur(22px) saturate(1.06); box-shadow: 26px 0 60px rgba(0, 0, 0, 0.5); } /* ZŁOTA STRZAŁKA — uchwyt szuflady. Siedzi na krawędzi pasa, w połowie wysokości okna, i obraca się o 180° po rozsunięciu. */ .mozaika-uchwyt { position: fixed; top: 50%; left: calc(var(--pas) - 15px); z-index: 66; /* nad linią (65), pod nagłówkiem (120) */ width: 30px; height: 30px; display: grid; place-items: center; margin: 0; padding: 0; transform: translateY(-50%); border: 1px solid rgba(200, 176, 138, 0.55); border-radius: 50%; background: rgba(10, 12, 13, 0.92); box-shadow: 0 6px 20px rgba(0, 0, 0, 0.55); transition: left var(--plynnie), border-color 0.4s, background 0.4s; } .mozaika-uchwyt svg { width: 9px; height: 15px; fill: none; stroke: var(--gold); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform var(--plynnie); } .mozaika-uchwyt:hover { border-color: var(--gold); background: rgba(20, 17, 12, 0.95); } body.szuflada-otwarta .mozaika-uchwyt svg { transform: rotate(180deg); } .mozaika-klip { position: absolute; inset: 0; overflow: hidden; display: flex; gap: 4px; padding: 4px; } /* ⚠️ KOLUMNA NIC NIE ROBI POZA TRZYMANIEM SZEROKOŚCI. Był tu wcześniej dryf (`transform: translate3d(0, var(--dryf), 0)`) i perspektywa pod wygięcie pasa — jedno i drugie cofnięte na życzenie. Pas ma stać spokojnie i przewijać się razem ze stroną. */ .mozaika-kol { /* STAŁA szerokość — patrz komentarz przy `--kol` na górze pliku */ flex: 0 0 var(--kol); min-width: 0; display: flex; flex-direction: column; gap: 4px; } /* ⚠️ KOLAŻ: KAŻDY KADR W SWOJEJ PROPORCJI (2026-08-24). Wcześniej stało tu sztywne `aspect-ratio: 4 / 5` — wszystkie kafelki miały ten sam pionowy format i pas wyglądał jak siatka, a nie jak rozłożone odbitki. Teraz proporcję każdego kadru wpisuje skrypt w `--ar` (zmierzoną z prawdziwego pliku, `proporcje` w bloku 2 `oferta.js`), a `4 / 5` zostaje tylko jako wartość zapasowa na czas przed pomiarem. ⚠️ WYSOKOŚĆ NADAL WYNIKA Z SZEROKOŚCI, a nie jest wpisywana w pikselach — i to zostaje. Rozwiązuje najbrzydszą rzecz w starej wersji: przy rozsuwaniu szuflady kafelki z wpisaną wysokością robiły się płaskimi pasami, żeby na końcu podskoczyć do nowego układu. Kafelek rośnie w proporcji przez całą animację i nic nie przeskakuje. */ .mozaika-kafel { position: relative; flex: none; aspect-ratio: var(--ar, 4 / 5); overflow: hidden; /* wyraźnie zaokrąglone rogi — kadry mają czytać się jak osobne odbitki ułożone obok siebie, a nie jak jedna pocięta płachta */ border-radius: 10px; background: #101315; } .mozaika-kafel img { display: block; width: 100%; height: 100%; object-fit: cover; filter: saturate(0.88) brightness(0.7); transition: filter 0.6s var(--ease); } .mozaika-kafel.is-pod img { filter: saturate(1) brightness(0.95); } /* SEDNO EFEKTU — kadr pod kursorem wypływa na treść. Przejście obejmuje też `left/top/width/height`, więc przy przesuwaniu kursora po pasie powiększenie PŁYNIE od kadru do kadru zamiast przeskakiwać. Zaczep (`--zaczep`) ustawia skrypt: przy lewej krawędzi kadr rośnie w prawo. */ .mozaika-lupa { position: absolute; z-index: 70; margin: 0; overflow: hidden; border-radius: 4px; opacity: 0; transform: scale(0.92); transform-origin: var(--zaczep, center); pointer-events: none; /* nie odbiera najazdu kafelkom pod spodem */ box-shadow: 0 22px 60px rgba(0, 0, 0, 0.75), 0 0 0 1px rgba(200, 176, 138, 0.5); transition: opacity 0.5s var(--ease), transform 0.65s var(--ease), left 0.55s var(--ease), top 0.55s var(--ease), width 0.55s var(--ease), height 0.55s var(--ease); } .mozaika-lupa.is-on { opacity: 1; transform: scale(1); } .mozaika-lupa img { display: block; width: 100%; height: 100%; object-fit: cover; } /* ZŁOTA LINIA między pasem kadrów a treścią. Przyklejona do okna, więc towarzyszy całej stronie, i WYPEŁNIA SIĘ OD DOŁU w miarę przewijania — przy okazji jest dyskretnym wskaźnikiem postępu. Robi to gradient sterowany zmienną `--postep` (0–1) z oferta.js: poniżej progu złoto, powyżej ledwie widoczny ślad, a styk rozmyty o kilka procent, żeby granica nie ciachała. */ .mozaika-linia { position: fixed; top: 0; bottom: 0; left: calc(var(--pas) - 1px); transition: left var(--plynnie); width: 2px; z-index: 65; /* nad pasem (60), pod nagłówkiem (120) */ pointer-events: none; background: linear-gradient(to top, rgba(200, 176, 138, 0.85) 0%, rgba(200, 176, 138, 0.85) calc(var(--postep, 0) * 100%), rgba(200, 176, 138, 0.1) calc(var(--postep, 0) * 100% + 4%), rgba(200, 176, 138, 0.1) 100%); box-shadow: 0 0 10px rgba(200, 176, 138, 0.25); } /* ------------------------------------------------------------ FILM — nieruchome tło całej strony ------------------------------------------------------------ Film STOI W MIEJSCU (`position: fixed`), a strona jedzie po nim jak szyby nasuwane jedna na drugą: każda kolejna sekcja jest ciemniejsza i mocniej rozmywa to, co pod nią (patrz „SEKCJE OFERTY" niżej). ⚠️ Kadr jest PANORAMĄ na cały ekran — `object-fit: cover` przycina go do proporcji okna, a winieta u góry i u dołu wyprowadza obraz w ciemność, żeby nie kończył się twardą krawędzią pod nagłówkiem i nad stopką. ------------------------------------------------------------ */ /* ⚠️ PLAKAT JEST TŁEM RAMKI, nie atrybutem `poster` na wideo. Dzięki temu telefon — który filmu nie pobiera — dostaje tę samą rolkę co komputer: przeciągnięcie zmienia plakat i kartę pary, a odnośniki do galerii działają tak samo. Ścieżkę wpisuje `oferta.js` przy każdej zmianie reportażu. */ /* ⚠️ `background-color`, NIE SKRÓT `background` — i to nie jest drobiazg stylistyczny, tylko naprawa błędu z 2026-08-26. Stało tu: background-size: cover; background-position: 50% 45%; background: #07090a; ← SKRÓT, i to PO tamtych dwóch `background` jest SKRÓTEM: ustawia wszystkie własności tła naraz, a te, których nie wymieniono, cofa do wartości początkowych. Kolor zapisany po `background-size` kasował więc `cover` (→ `auto`) i `50% 45%` (→ `0% 0%`), a przy okazji przywracał `repeat`. Zdjęcie leżało w naturalnym rozmiarze, przyklejone do lewego górnego rogu i KAFELKOWANE. Nie było tego widać, dopóki na wierzchu leciał film z `object-fit: cover` — błąd wyszedł dopiero po wyłączeniu filmu, gdy plakat stał się tym, co widać. Zmierzone przed poprawką: `background-size: auto`, `background-position: 0% 0%`, `background-repeat: repeat`. To ta sama pułapka, co przy `transition` w kartach pakietów (§7.17 w `NOWY-WATEK.md`): SKRÓT WYMAZUJE TO, CZEGO NIE WYMIENIA. */ .film-tlo { position: fixed; inset: 0; z-index: 0; /* pod całą treścią */ background-color: #07090a; background-size: cover; background-position: 50% 45%; background-repeat: no-repeat; overflow: hidden; } .film-tlo-v { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 45%; } /* WINIETA: ciemniej u góry i u dołu plus lekkie ściemnienie rogów. Bez tego biały tytuł potrafi wpaść na jasną klatkę i zniknąć. */ /* DWA ELEMENTY WIDEO leżą na sobie i przenikają się przy zmianie reportażu. Ten pod spodem jest przezroczysty, więc widać przez niego plakat — i to on łapie moment, zanim kolejny film będzie gotowy. */ .film-tlo-v { opacity: 0; transition: opacity 0.9s var(--ease); } .film-tlo-v.is-on { opacity: 1; } /* ============================================================ ROLKA JEDZIE ZA PALCEM (2026-09-02) ============================================================ Przewracanie reportaży gestem działało od dawna, ale było PROGOWE: palec sunął po nieruchomej okładce i po 60 px reportaż przeskakiwał. Nic nie pokazywało, że gest jest zauważany ani ile jeszcze brakuje — a to jedyny sygnał, po którym poznaje się, że okładkę w ogóle da się przewracać. Dziś kadr idzie dokładnie za palcem i gaśnie w miarę odsuwania, a po puszczeniu albo wyjeżdża z ekranu (kolejny reportaż), albo wraca na miejsce. Ten sam mechanizm, te same progi i te same czasy co w obu podglądach kadru i w galerii aktu — cztery miejsca w serwisie, w których przesuwa się palcem, mają reagować identycznie. ⚠️ CO SIĘ RUSZA, ZALEŻY OD EKRANU — i dlatego reguła obejmuje OBA elementy naraz. Na komputerze reportażem jest tło na cały ekran (`.film-tlo`), na telefonie tło jest schowane (`display: none`) i reportażem jest kafelek (`.rolka`). Element, którego w danym układzie nie widać, nic nie kosztuje. ⚠️ WINIETA I ZASŁONA JADĄ W PRZECIWNĄ STRONĘ. Obie leżą WEWNĄTRZ `.film-tlo`, ale należą do okna, nie do zdjęcia: winieta ma trzymać biały tytuł na czytelnym tle, a zasłona odpowiada za ciemnienie przy przewijaniu. Bez cofnięcia przejechałyby razem z kadrem i tytuł na moment straciłby swoje tło. ⚠️ `transform`, NIE `translate` — osobną właściwość `translate` zajmuje już przesuwanie kafelka po zdjęciu („KAFELEK DA SIĘ PRZESUNĄĆ" w `oferta.js`), a dwie rzeczy nie mogą pisać po jednej właściwości (pułapka §7.17). Obie składają się bez kolizji. ⚠️ PRZEJŚCIE TYLKO NA CZAS DOJECHANIA — założone na stałe dokładałoby opóźnienie między palcem a kadrem, a to czyta się jak zacinanie. Czasy (190/240 ms w `oferta.js`) muszą się mieścić w 0,24 s. ============================================================ */ /* 🔴 TŁO JEST OSOBNĄ WARSTWĄ I JEDZIE INACZEJ NIŻ KAFELEK (2026-09-03). Zgłoszenie: „hero dziwnie przeskakuje, robi animację jakby urywał zdjęcie". I dokładnie tak było: `.film-tlo` przesuwało się o **55% szerokości okna**, a jest wielkości DOKŁADNIE jednego ekranu — więc z drugiej strony odsłaniało goły, ciemny kadr strony. Zamiast przesunięcia widać było urwaną krawędź zdjęcia. Dziś zdjęcie leży na własnej warstwie (`::before`), która ma 8% ZAPASU poza kadrem (`scale(1.08)`) i przesuwa się tylko o UŁAMEK drogi kafelka. Rachunek jest zamknięty: zapas na stronę to 4% szerokości, a maksymalny ruch to 0,55 × 0,07 ≈ **3,85%** — czyli mniej niż zapas i krawędź nie ma prawa się pokazać. Tło daje delikatny ruch w tle (paralaksa), kafelek jedzie całą drogę, a razem czyta się to jak głębia, nie jak urwanie. ⚠️ ZDJĘCIE WPISUJE `oferta.js` W ZMIENNĄ `--tlo-obraz`, nie w `background-image` samego `.film-tlo` — inaczej nie dałoby się go ruszać niezależnie od warstwy. ⚠️ TO KASUJE DAWNE COFANIE WINIETY I ZASŁONY. Skoro `.film-tlo` już się nie rusza, jego dzieci nie mają czego nadrabiać — a odejmowanie ruchu od ruchu było najkruchszą częścią tamtej wersji. ⚠️ `scale` NIE ZMIENIA KADROWANIA w sposób, który by szkodził: tło i tak jest `cover` i było przycinane; 8% to zapas, nie przybliżenie treści. */ .film-tlo::before { content: ""; position: absolute; inset: 0; background-image: var(--tlo-obraz, none); background-size: cover; background-position: 50% 45%; background-repeat: no-repeat; transform: translateX(calc(var(--rolka-przes, 0px) * 0.07)) scale(1.08); opacity: var(--rolka-kryc, 1); } /* Film w tle (dziś wyłączony) jedzie razem ze zdjęciem, nie osobno. */ .film-tlo-v { transform: translateX(calc(var(--rolka-przes, 0px) * 0.07)) scale(1.08); } .rolka { transform: translateX(var(--rolka-przes, 0px)); /* ⚠️ KRYCIE SPADA RAZEM Z ODSUNIĘCIEM: kadr nie tylko odjeżdża, ale i gaśnie. Bez tego wygląda, jakby zaciął się na krawędzi ekranu, a nie jakby z niego wychodził. */ opacity: var(--rolka-kryc, 1); } html.rolka-ciagnie .film-tlo::before, html.rolka-ciagnie .film-tlo-v, html.rolka-ciagnie .rolka { transition: none; } html.rolka-dojezdza .film-tlo::before, html.rolka-dojezdza .film-tlo-v, html.rolka-dojezdza .rolka { transition: transform 0.24s var(--ease), opacity 0.24s var(--ease); } .film-winieta { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(to bottom, rgba(6, 7, 8, 0.82) 0%, rgba(6, 7, 8, 0.28) 22%, rgba(6, 7, 8, 0.18) 62%, rgba(6, 7, 8, 0.88) 100%), radial-gradient(84% 74% at 50% 46%, rgba(6, 7, 8, 0) 0%, rgba(6, 7, 8, 0.55) 100%); } /* ZASŁONA — narasta przy przewijaniu. Ciemność i rozmycie liczy oferta.js (`--ciemnosc`, `--rozmycie`), więc film gaśnie stopniowo, zamiast znikać pod pierwszą sekcją. ⚠️ Rozmycie robi `backdrop-filter` na JEDNEJ warstwie — gdyby `filter` siedział na samym wideo, przeglądarka rasteryzowałaby każdą klatkę osobno. */ .film-zaslona { position: absolute; inset: 0; pointer-events: none; background: rgba(6, 7, 8, var(--ciemnosc, 0)); backdrop-filter: blur(var(--rozmycie, 0px)); -webkit-backdrop-filter: blur(var(--rozmycie, 0px)); } /* ------------------------------------------------------------ DYM — stan wyjściowy ------------------------------------------------------------ Wspólny arkusz daje dymowi krycie 0,8; tutaj startuje od zera i narasta dopiero od sekcji „Co dostajecie" — krycie wpisuje `oferta.js` (blok 5) wprost w element. Ta reguła istnieje po to, żeby przed pierwszą klatką skryptu dym nie mrugnął nad okładką. ⚠️ Bez `transition`: krycie zmienia się co klatkę przewijania, a przejście ciągnęłoby się za nim o pół sekundy. ------------------------------------------------------------ */ body.oferta #fog { opacity: 0; } /* ------------------------------------------------------------ OKŁADKA — sama treść na tle filmu ------------------------------------------------------------ ⚠️ `svh`, nie `vh`: na telefonie pasek adresu chowa się przy przewijaniu i `100vh` byłoby wyższe niż widoczny kadr. Sekcja jest PRZEZROCZYSTA — kadr pod nią to `.film-tlo`. ------------------------------------------------------------ */ .of-hero.of-hero--okladka { position: relative; z-index: 1; height: 100svh; background: none; /* treść siada w PRAWYM dolnym rogu kadru: po lewej stoi szuflada z kadrami, więc tytuł i przycisk mają swój własny róg. `.of-hero` domyślnie centruje w obu osiach, więc nadpisujemy obie. */ display: flex; align-items: flex-end; justify-content: flex-end; text-align: right; overflow: hidden; /* ⚠️ RUCH W BOK NALEŻY DO ROLKI, W PIÓN — DO PRZEGLĄDARKI (2026-09-02). Odkąd kadr jedzie za palcem, przeglądarka nie może zabierać ruchu poziomego na własne gesty (cofanie karty): przerywa go wtedy `pointercancel` w połowie drogi. `pan-y` oddaje jej przewijanie strony, a `pinch-zoom` zostawia szczypanie — powiększenie strony to ustawienie dostępności, a nie ozdobnik. */ touch-action: pan-y pinch-zoom; /* ⚠️ Prawy margines jest CELOWO szerszy od lewego i od dolnego. Tekst wyrównany do prawej dotyka krawędzi każdą linijką — przy wcięciu równym reszcie strony wyglądał, jakby wypadał za kadr. Odsuwamy go na tyle, żeby najdłuższy wiersz tytułu miał pod sobą oddech, ale nie tak daleko, by wjechał na środek — stąd górny sufit 9rem. Zmierzone: 63 px przy oknie 900 px, 90 px przy 1280 px, 134 px przy 1920 px. */ padding: clamp(4.6rem, 9.5vh, 6rem) clamp(2rem, 7vw, 9rem) clamp(4.6rem, 10vh, 6.5rem) clamp(1.4rem, 4vw, 3.4rem); } .okladka { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: flex-end; gap: clamp(0.5rem, 1.4vh, 0.95rem); max-width: 42rem; text-shadow: 0 2px 22px rgba(0, 0, 0, 0.65); } /* marka i „przewiń" mają wcięcie na rozstrzelone litery — przy wyrównaniu do prawej trzeba je przenieść na drugą stronę, inaczej napis odstaje */ .okladka-marka { padding-left: 0; padding-right: 0.5em; } .okladka-cta { margin-top: clamp(0.4rem, 1.4vh, 0.9rem); } .okladka-marka { font-family: var(--nav); font-size: 0.7rem; letter-spacing: 0.5em; text-transform: uppercase; color: var(--gold); padding-left: 0.5em; } .okladka-kreska { display: block; width: 3.2rem; height: 1px; background: rgba(200, 176, 138, 0.5); } .okladka .label { margin: 0; } .okladka-h { font-family: var(--serif); font-weight: 400; font-size: clamp(1.7rem, 3.6vw, 2.9rem); line-height: 1.22; letter-spacing: 0.02em; color: #f6f2e8; text-shadow: 0 2px 18px rgba(0, 0, 0, 0.8); } .okladka-p { color: rgba(240, 236, 226, 0.9); font-size: clamp(0.88rem, 1.2vw, 1rem); max-width: 30rem; text-shadow: 0 1px 10px rgba(0, 0, 0, 0.8); } /* ------------------------------------------------------------ ROLKA REPORTAŻY — karta pary na okładce ------------------------------------------------------------ Do trzech filmów jeden po drugim; przy każdym wachlarz kadrów z sesji tej pary, imiona, data, miejsce i odnośnik do pełnej galerii. Pod spodem kropki ze strzałkami — jak w mediach społecznościowych. ⚠️ Karta stoi w LEWYM DOLNYM ROGU okładki, a tytuł w prawym. To nie kwestia gustu: mozaika zajmuje lewą krawędź, tytuł prawą, a między nimi zostaje pas, w którym karta nikomu nie wchodzi w drogę. Wskaźnik „przewiń w dół" siedzi pośrodku i też ma spokój. ⚠️ Kropki i strzałki chowa SKRYPT (atrybut `hidden`), gdy dostępny jest tylko jeden reportaż — nie ma wtedy czego przełączać. ------------------------------------------------------------ */ /* ⚠️ KARTA UROSŁA (2026-08-26, druga tura). Odkąd w tle nie leci film, tylko `plakat.webp`, okładka jest ZDJĘCIEM Z WEJŚCIEM DO REPORTAŻU — a wejście ma być widać. Karta ma teraz do 23 rem zamiast 18,5, wachlarz do 13,5 rem zamiast 11, a odbitki do 6,8 rem zamiast 5,4. ⚠️ Rosnąc, karta musi zmieścić wachlarz: rozstaw odbitek stoi w tablicy `UKLAD` w `oferta.js` (blok 3) W PIKSELACH i został podniesiony razem z nią. Zmieniając rozmiar tutaj, przelicz tamto — inaczej odbitki albo zlepią się w stos, albo wyjdą poza kartę. */ .rolka { position: absolute; /* Podstawowe położenie — obowiązuje do 1200 px. Odsunięcie kafelka od krawędzi robi dopiero szeroki ekran (blok „OD 1201 px" niżej). */ left: clamp(1.2rem, 3vw, 2.6rem); bottom: clamp(4.6rem, 10vh, 6.5rem); z-index: 3; width: clamp(16.5rem, 26vw, 23rem); text-align: left; /* ⚠️ `translate`, NIE `transform` — kafelek da się przesunąć po zdjęciu (`oferta.js`, blok „KAFELEK DA SIĘ PRZESUNĄĆ"), a osobna właściwość nie wejdzie w drogę niczemu, co ktoś kiedyś dołoży przez `transform` (pułapka 17). Przejście działa przy PUSZCZENIU i przy zmianie okna; w trakcie ciągnięcia musi zniknąć, bo kafelek ma iść za palcem jeden do jednego, a nie doganiać go z opóźnieniem. */ translate: var(--przes-x, 0px) var(--przes-y, 0px); transition: translate 0.45s var(--ease); /* ⚠️ `pointer`, NIE `grab`. Kafelek jest drugim wyjściem z okładki do galerii — klik jest tu główną akcją, a przesuwanie drobiazgiem. Otwarta dłoń w spoczynku mówiła „przeciągnij mnie" o elemencie, którego zadaniem jest „kliknij mnie": najgłośniejszy sygnał dostawała najmniej ważna funkcja. Że kafelek da się chwycić, mówi teraz uchwyt w rogu (`.rolka-karta::after`), a `grabbing` wraca na czas ciągnięcia. */ cursor: pointer; /* ⚠️ ZAZNACZANIE TEKSTU WYŁĄCZONE NA STAŁE, NIE DOPIERO PRZY CIĄGNIĘCIU. Przeciągnięcie kafelka po imionach pary zostawiało za sobą niebieską plamę zaznaczenia. Kusi, żeby wyłączyć to klasą `.ciagniemy`, ale jest na to za późno: przeglądarka zaczyna zaznaczać od PIERWSZEGO piksela ruchu, a klasa wchodzi dopiero po progu 6 px — i dopisane wtedy `user-select: none` NIE KASUJE zaznaczenia, które już powstało. Kosztem jest niemożność zaznaczenia myszą imion i daty na komputerze; kafelek jest jednym wielkim odnośnikiem, więc to zachowanie kontrolki, nie akapitu. Na telefonie reguła wraca do `auto` (blok responsywności). */ user-select: none; -webkit-user-select: none; } .rolka.ciagniemy { transition: none; cursor: grabbing; } .rolka:focus-visible { outline: 1px solid var(--gold); outline-offset: 12px; } /* ---- ZDJĘCIE W KAFELKU — NA KAŻDYM EKRANIE (2026-08-26) ---- Do tej pory to „okno" istniało wyłącznie na telefonie, bo na komputerze reportaż był tłem całej strony. Dziś tłem jest zdjęcie, a kafelek jest miniaturą galerii — i ma być duży na każdym ekranie, nie tylko w telefonie. ⚠️ Proporcja 3:2 pod ZDJĘCIE. Wracając z filmem, wróć do 16/9 — inaczej wideo dostanie czarne pasy albo zostanie przycięte. ⚠️ To ten sam plik, który leży w tle strony (`plakat.webp`), więc druga warstwa nie kosztuje ani jednego żądania. */ /* ---- KILKA ZDJĘĆ W KAFELKU ---- Duże zdjęcie plus pasek kadrów — miniatura galerii ma pokazywać, że za kliknięciem stoi WIĘCEJ NIŻ JEDEN kadr. ⚠️ SIATKA, NIE WACHLARZ. Poprzednik — pięć odbitek rzuconych jedna na drugą — stał na `position: absolute`, więc nie zgłaszał rodzicowi swojej wysokości: pudełko miało 160 px, odbitki rozkładały się na 205 i wchodziły 11 px w imiona pary. Siatka zajmuje dokładnie tyle, ile zajmuje; nachodzenie przestaje być możliwe z definicji. ⚠️ CAŁY BLOK WYCHODZI POZA WYŚCIÓŁKĘ KARTY — ujemne marginesy równe `--karta-pad`. Kafelek ma być miniaturą, a każdy piksel oddany na margines to piksel zabrany zdjęciom. Marginesy MUSZĄ równać się wyściółce, stąd jedna zmienna zamiast dwóch osobnych `clamp`. ⚠️ Zaokrąglenie tylko u GÓRY i o piksel mniejsze niż karty — inaczej między rogiem zdjęcia a rogiem karty zostaje jasny sierp. ⚠️ Duże zdjęcie to `plakat.webp`, TEN SAM, który leży w tle strony — nie kosztuje ani jednego żądania. Płacimy tylko za kadry w pasku. */ .rolka-kadry { display: grid; gap: 4px; margin: calc(-1 * var(--karta-pad)) calc(-1 * var(--karta-pad)) var(--karta-pad); border-radius: 13px 13px 0 0; overflow: hidden; } .rolka-okno { position: relative; aspect-ratio: 3 / 2; background-color: #0b0d0e; background-size: cover; background-position: center; } .rolka-okno[hidden] { display: none; } /* pasek kadrów — na komputerze trzy w rzędzie pod dużym zdjęciem */ .rolka-mini { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; } .rolka-mini-kadr { aspect-ratio: 3 / 2; background-color: #0b0d0e; background-size: cover; background-position: center; transition: opacity 0.5s var(--ease); } /* najazd na kafelek rozjaśnia pasek — sygnał, że to jedna całość */ .rolka-mini-kadr { opacity: 0.78; } .rolka-karta:hover .rolka-mini-kadr, .rolka-karta:focus-within .rolka-mini-kadr { opacity: 1; } .rolka-karta { --karta-pad: clamp(1rem, 1.8vw, 1.35rem); position: relative; /* punkt zaczepienia pola dotyku niżej */ padding: var(--karta-pad); border: 1px solid rgba(200, 176, 138, 0.28); border-radius: 14px; background: rgba(8, 10, 11, 0.42); backdrop-filter: blur(14px) saturate(1.05); -webkit-backdrop-filter: blur(14px) saturate(1.05); box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5); transition: border-color 0.45s var(--ease), box-shadow 0.45s var(--ease); } /* ---- CAŁA KARTA JEST KLIKALNA — TAKŻE NA KOMPUTERZE (2026-08-26) ---- Wcześniej pole dotyku rozpychaliśmy tylko na telefonie. Odkąd okładka jest zdjęciem, a karta pary JEDYNYM wejściem do reportażu, ograniczanie kliknięcia do podkreślonego napisu było zwykłą przeszkodą. ⚠️ Nie przez zagnieżdżenie karty w drugim `` — dwa odnośniki jeden w drugim to nieprawidłowy HTML. Zamiast tego ROZPYCHAMY POLE DOTYKU istniejącego odnośnika „Zobacz pełen reportaż" na całą kartę: w drzewie zostaje jeden link, z jedną nazwą, a kliknięcie łapie też imiona i datę. ⚠️ Napis zostaje widoczny — jest jedyną informacją, że karta gdzieś prowadzi. ⚠️ Przeciągnięcie rolki startuje teraz na linku, więc ZUŻYTY GEST GASI NAJBLIŻSZE KLIKNIĘCIE (`podepnijGest` w `oferta.js`) — bez tego przesunięcie myszą kończyłoby się otwarciem galerii. */ .rolka-cta::after { content: ""; position: absolute; inset: 0; border-radius: inherit; } /* ---- UCHWYT: „ten kafelek da się chwycić" BEZ ANI JEDNEGO SŁOWA ---- Sześć kropek w prawym dolnym rogu karty, wchodzą po najechaniu. ⚠️ TO ZNAK, NIE UCHWYT — `pointer-events: none`. Przeciąganie działa z KAŻDEGO punktu kafelka i tak ma zostać; gdyby kropki przejęły zdarzenia, zrobiłby się z nich jedyny punkt chwytu, a przy okazji dziura w polu kliknięcia rozpychanym przez `.rolka-cta::after`. ⚠️ PSEUDOELEMENT, NIE ELEMENT W DRZEWIE. Czytnik ekranu nie ma tu czego ogłaszać, a `::after` nie dokłada węzła, którego trzeba by pilnować przy przebudowie kafelka (`zbudujMini`). ⚠️ NIE DOKŁADA WYSOKOŚCI — leży `absolute` w wyściółce, która i tak tam jest. Kafelek ma nad zgięciem 93 px zapasu i nie ma z czego oddawać (pułapka 36 działa i w tę stronę: co nie jest w układzie, nic nie waży). ⚠️ Napisu tu celowo NIE MA. Instrukcja obsługi ozdoby stanęłaby obok „Zobacz pełen reportaż" i konkurowała z jedyną rzeczą, po którą ten kafelek na okładce stoi. */ .rolka-karta::after { content: ""; position: absolute; right: calc(var(--karta-pad) - 3px); bottom: calc(var(--karta-pad) - 3px); width: 12px; height: 18px; /* ⚠️ KROPKI ŚWIECĄ, NIE SĄ TYLKO ZŁOTE (2026-08-28). Sam `--gold` przy kryciu 0,5 gubił się na jasnym zdjęciu pod spodem — kafelek leży przecież na fotografii, a nie na jednolitym tle. Złoto idzie więc pełną mocą, a pod spodem stoi druga, rozmyta warstwa tych samych kropek jako poświata (`drop-shadow`), która odkleja je od zdjęcia niezależnie od tego, co akurat jest w kadrze. */ background-image: radial-gradient(circle at 1.5px 1.5px, var(--gold) 1.6px, transparent 1.8px); background-size: 6px 6px; filter: drop-shadow(0 0 4px rgba(200, 176, 138, 0.85)) drop-shadow(0 1px 2px rgba(0, 0, 0, 0.7)); opacity: 0; transition: opacity 0.35s var(--ease); pointer-events: none; } .rolka:hover .rolka-karta::after, .rolka:focus-within .rolka-karta::after { opacity: 0.92; } .rolka.ciagniemy .rolka-karta::after { opacity: 1; } /* karta odpowiada na najazd tak jak każdy inny przycisk na tej stronie */ .rolka-karta:hover, .rolka-karta:focus-within { border-color: rgba(200, 176, 138, 0.6); box-shadow: 0 26px 62px rgba(0, 0, 0, 0.58), 0 0 30px rgba(200, 176, 138, 0.16); } /* ⚠️ `.rolka-wachlarz` / `.rolka-kadr` USUNIĘTE 2026-08-26. Pięć odbitek rzuconych jedna na drugą wyglądało dobrze, ale: NACHODZIŁO NA IMIONA (pudełko 160 px, odbitki 205 px — 11 px zachodzenia), WAŻYŁO 5 MB (`kadr-1..5.webp` po ~1 MB) i dawało miniaturę galerii wielkości znaczka. Zastąpiło je jedno zdjęcie na całą szerokość kafelka (`.rolka-okno` wyżej), które nic nie kosztuje, bo leży już w tle strony. */ .rolka-para { display: flex; align-items: baseline; gap: 0.55rem; font-family: var(--serif); font-size: clamp(1.15rem, 1.8vw, 1.45rem); color: var(--ink); line-height: 1.25; } .rolka-nr { font-family: var(--nav); font-size: 0.62rem; letter-spacing: 0.2em; color: var(--gold); flex: none; } .rolka-meta { margin-top: 0.25rem; font-family: var(--nav); font-size: 0.58rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-dim); } .rolka-cta { display: inline-flex; align-items: center; gap: 0.5rem; margin-top: clamp(0.6rem, 1.2vh, 0.9rem); color: var(--ink); text-decoration: none; font-family: var(--nav); font-size: 0.6rem; letter-spacing: 0.2em; text-transform: uppercase; border-bottom: 1px solid var(--gold); padding-bottom: 0.35rem; transition: color 0.35s; } .rolka-cta i { font-style: normal; color: var(--gold); transition: transform 0.5s var(--ease); } .rolka-cta:hover { color: var(--gold); } .rolka-cta:hover i { transform: translateX(5px); } /* ---- kropki i strzałki: NA ŚRODKU KADRU ---- ⚠️ Celowo NIE w karcie pary. Kropki przełączają cały ekran — film, plakat, kartę i odnośnik do galerii — więc gdyby siedziały w rogu przy karcie, wyglądałyby na jej część. Na środku czytają się jak sterowanie całością. Karta zostaje w lewym dolnym rogu, tytuł w prawym, sterowanie NA ŚRODKU U DOŁU — jak pod postem w mediach społecznościowych. ⚠️ Centrujemy MARGINESAMI, nie `translateX(-50%)`: wskaźnik „przewiń w dół" obok robi to samo i z tego samego powodu — te elementy bywają zerowane przez `body.loaded .rise { transform: none }`, a wtedy wyśrodkowanie transformem znika i element ucieka w prawo. ⚠️ Siedzi 5,6rem nad dolną krawędzią, czyli NAD wskaźnikiem „przewiń w dół" (ten stoi na 2,2rem). Dwie rzeczy w tym samym miejscu by się zjadły. */ .rolka-ster { position: absolute; left: 0; right: 0; margin: 0 auto; width: max-content; /* ⚠️ ODLEGŁOŚĆ LICZONA OD WSKAŹNIKA „przewiń w dół", nie od dna okna. Oba elementy są wyśrodkowane i stoją jeden nad drugim, więc mierzy się tu odstęp MIĘDZY NIMI, a nie dwie niezależne wartości. Wskaźnik zajmuje 2,2 rem od dołu (jego `bottom`) plus ~3,4 rem własnej wysokości — to jego strefa; `clamp` niżej to czysta przerwa nad nią. Zmierzone przed poprawką: 23 px prześwitu, czyli kropki siedziały praktycznie na napisie. Po zmianie przy oknie 900 px: ~70 px. */ bottom: calc(2.2rem + 3.4rem + clamp(2.2rem, 4.6vh, 3.4rem)); z-index: 4; display: flex; align-items: center; justify-content: center; gap: 0.9rem; padding: 0.5rem 0.9rem; border-radius: 999px; background: rgba(8, 10, 11, 0.34); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); } .rolka-strzalka { width: 30px; height: 30px; padding: 0; flex: none; display: grid; place-items: center; border: 1px solid rgba(200, 176, 138, 0.45); border-radius: 50%; background: rgba(10, 12, 13, 0.7); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); transition: border-color 0.35s, background 0.35s; } .rolka-strzalka svg { width: 12px; height: 8px; fill: none; stroke: var(--gold); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } .rolka-strzalka:hover { border-color: var(--gold); background: rgba(20, 17, 12, 0.9); } /* ⚠️ WĄSKI KOMPUTER (861–1200 px): sterowanie WYJEŻDŻA NAD TYTUŁ. Zmierzone przy oknie 1000 px: tytuł zajmuje x 440–920, a wyśrodkowane sterowanie x 475–595 — czyli siedziałoby dosłownie na napisie. Wyżej niż 1200 px tytuł zaczyna się dopiero na 849 px i problemu nie ma. Zwężenie tytułu nic by nie dało: żeby zwolnić środek, musiałby zejść do 19rem i łamać się na cztery wiersze. Lepiej podnieść pasek niż zepsuć nagłówek. */ @media (min-width: 861px) and (max-width: 1200px) { .rolka-ster { bottom: 50%; } } /* ============================================================ STRZAŁKI PRZY KRAWĘDZIACH OKŁADKI (2026-09-03) ============================================================ Ta sama rzecz co `.lb-arrow` na stronie głównej i `.pg-strz` w galerii reportażu: przyciskiem jest CAŁA krawędź kadru, a nie kółko przy brzegu. Trzy miejsca w serwisie, w których przewraca się zdjęcia, mają wyglądać i reagować identycznie. ⚠️ TYLKO OD 861 px. Na telefonie okładka jest kolumną (tytuł → kafelek → kropki), a pas na całą wysokość leżałby na kafelku i na przycisku pakietów, połykając ich stuknięcia. Tam przewraca się palcem. 🔴 `z-index: 2` — POD KAFELKIEM (`.rolka` ma 3), a nie nad nim. Pierwsza wersja stała nad wszystkim i zmierzone wyszło, że przy 1280 px lewy pas zabierał **77 px szerokości karty pary** (x 118–195), a prawy **26 px przycisku „Wybierzcie swój pakiet"**. Obie strzałki KRADŁY WIĘC KLIKNIĘCIA elementom, które są głównymi drogami dalej — karta prowadzi do galerii, przycisk do pakietów. Pas leży teraz pod nimi: w miejscu nakładania wygrywa treść, a strzałce zostaje to, co i tak jest gołym zdjęciem. ⚠️ SZEWRON TRZYMA SIĘ KRAWĘDZI EKRANU, nie środka pasa (`justify-items`). Wyśrodkowany wpadał na kartę przy węższym oknie: karta zaczyna się ok. 107 px od brzegu przy 900 px szerokości, a środek pasa wypadał na 116 px — czyli szewron chowałby się ZA kartą. Przy krawędzi jest zawsze widoczny, niezależnie od szerokości okna, i tam też szuka go oko. ⚠️ Pas kończy się nad sterowaniem i nad wskaźnikiem „przewiń w dół": `bottom` zostawia im miejsce, żeby strzałka nie przechwytywała kliknięć w kropki. ⚠️ Znak ma własny cień, bo leży na zdjęciu — na jasnym kadrze biały szewron bez cienia znika. Ta sama zasada co w obu galeriach. ============================================================ */ .hero-strz { position: absolute; top: var(--glowa, 66px); bottom: clamp(4.6rem, 10vh, 6.5rem); width: clamp(72px, 8vw, 120px); display: none; /* włącza dopiero próg komputera */ place-items: center; padding: 0 clamp(10px, 1.4vw, 22px); border: 0; background: none; color: var(--ink); cursor: pointer; /* ⚠️ 1, NIE 2 — `.okladka` (tytuł i przycisk pakietów) ma DOKŁADNIE 2, a przy równym `z-index` wygrywa to, co stoi później w kodzie: pasy stoją po tytule, więc zabierały przyciskowi 13 px prawej krawędzi. Drabinka jest teraz jednoznaczna: karta 3 > tytuł 2 > pasy 1. */ z-index: 1; transition: color 0.35s, background 0.35s; } .hero-strz[hidden] { display: none; } .hero-strz--lewo { left: 0; justify-items: start; } .hero-strz--prawo { right: 0; justify-items: end; } .hero-chev { width: clamp(20px, 2.2vw, 28px); height: auto; overflow: visible; } .hero-chev path { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 2px 10px rgba(0, 0, 0, 0.95)); } /* 🔴 PASY DOPIERO OD 1201 px, NIE OD 861 (poprawione 2026-09-03). Zmierzone przy 900 px: pas zajmuje lewą krawędź, a kafelek zaczyna się 107 px od brzegu — czyli DOKŁADNIE na szewronie. Odsunięcie kafelka w prawo rozwiązywało jedno i psuło drugie: kafelek wchodził wtedy **109 px na akapit pod tytułem** i zasłaniał początek zdania (przy 1280 px odstęp wynosi 160 px, przy 900 px miejsca po prostu nie ma). Na wąskim komputerze zostają więc kropki ze strzałkami — dokładnie jak na telefonie — a pasy przy krawędziach wchodzą tam, gdzie okładka jest naprawdę szeroka. */ @media (min-width: 1201px) { .hero-strz:not([hidden]) { display: grid; } /* ⚠️ KAFELEK ODSUNIĘTY OD KRAWĘDZI — robi miejsce strzałce. Wcześniej zaczynał się ok. 42 px od brzegu, a pas ma przy 1280 px 102 px: kafelek zaczynał się w połowie strzałki i zasłaniał szewron. Zmierzone po zmianie: 26 px czystego odstępu przy 1280 px, 48 px przy 1920 px, a do akapitu pod tytułem zostaje 160 px. ⚠️ Środkowy człon w `vw`, bo pas też jest `clamp`-em i musi rosnąć razem z nim. */ .rolka { left: clamp(7rem, 10vw, 10.5rem); } } .hero-strz:hover, .hero-strz:focus-visible { color: var(--gold); } /* winieta pod kursorem pokazuje, dokąd sięga pas — jak w podglądzie kadru */ .hero-strz--lewo:hover, .hero-strz--lewo:focus-visible { background: linear-gradient(to right, rgba(0, 0, 0, 0.4), transparent); } .hero-strz--prawo:hover, .hero-strz--prawo:focus-visible { background: linear-gradient(to left, rgba(0, 0, 0, 0.4), transparent); } /* ⚠️ MAŁE STRZAŁKI PRZY KROPKACH ZNIKAJĄ DOKŁADNIE TAM, GDZIE POJAWIAJĄ SIĘ PASY — czyli od 1201 px, a nie od 861. Dwa komplety strzałek robiące to samo to szum; ZERO kompletów to gorzej niż szum. Próg musi być ten sam co przy `.hero-strz`, inaczej w przedziale 861–1200 px nie byłoby żadnych. */ @media (min-width: 1201px) { .rolka-strzalka { display: none; } } /* ⚠️ ODSTĘP 1.25rem, NIE 0.55rem (2026-09-05): pole dotyku każdej kropki (`::before` niżej) ma 25 × 31 px, więc przy ciaśniejszym odstępie pola sąsiednich kropek nachodziły na siebie — Lighthouse zgłaszał „touch targets do not have sufficient size or spacing". Same kropki zostają po 7 px; rośnie tylko powietrze między nimi. */ .rolka-kropki { display: flex; align-items: center; gap: 1.25rem; } .rolka-kropka { position: relative; width: 7px; height: 7px; padding: 0; border: 1px solid rgba(200, 176, 138, 0.6); border-radius: 50%; background: none; transition: background 0.3s, transform 0.3s var(--ease); } /* pole dotyku 25 × 31 px przy kropce 7 px — ten sam zabieg co w pasku postępu (2026-09-05: w poziomie −9px zamiast −7px, bo próg to 24 px w OBU osiach) */ .rolka-kropka::before { content: ""; position: absolute; inset: -12px -9px; } .rolka-kropka.is-on { background: var(--gold); transform: scale(1.35); } /* ============================================================ SEKCJE OFERTY — faktura papieru ============================================================ Jedyna rzecz, która została po porzuconej koncepcji „oferta jako album": PAPIER bez ani jednego pliku graficznego. Dwa gęste rastry włókien (pion i poziom) plus miękkie światło od górnej krawędzi — wszystko na bardzo niskim kryciu, ma się czytać jako papier, a nie jako deseń. Ziarno (`.grain` ze wspólnego arkusza) leży nad tym i dokłada resztę. Włos u góry sekcji zastępuje dawną krawędź kartki: sekcje czytają się jak kolejne arkusze, a nie jak jedna długa płaszczyzna. ------------------------------------------------------------ */ .of-sec { position: relative; z-index: 1; /* nad filmem (0) */ background: repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.013) 0 1px, transparent 1px 3px), repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.009) 0 1px, transparent 1px 4px), radial-gradient(120% 70% at 50% 0%, rgba(255, 255, 255, 0.035), transparent 62%), rgba(10, 12, 13, var(--krycie, 0.97)); backdrop-filter: blur(var(--rozm, 0px)); -webkit-backdrop-filter: blur(var(--rozm, 0px)); box-shadow: inset 0 1px 0 rgba(200, 176, 138, 0.1); } /* co druga sekcja odrobinę jaśniejsza — rytm bez twardych linii */ .of-sec--alt { background: repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.014) 0 1px, transparent 1px 3px), repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.01) 0 1px, transparent 1px 4px), radial-gradient(120% 70% at 50% 0%, rgba(255, 255, 255, 0.04), transparent 62%), rgba(15, 18, 20, var(--krycie, 0.97)); } /* sekcja kontaktu ma własne zdjęcie w tle i zostaje nieprzezroczysta */ .outro { position: relative; z-index: 1; } /* ------------------------------------------------------------ ODDECH SEKCJI — jedna sekcja ma się mieścić w jednym ekranie ------------------------------------------------------------ ⚠️ TO JEST GŁÓWNE POKRĘTŁO WYSOKOŚCI CAŁEJ OFERTY. Sekcje przewija się skokami (kropki paska, strzałki, odnośniki `#…`), więc każda, która jest wyższa od okna, ląduje obcięta — raz od dołu, raz od góry. Marginesy idą więc od WYSOKOŚCI OKNA (`vh`), nie od szerokości: na niskim ekranie kurczą się same, zamiast spychać treść poza kadr. Do 2026-08-24 stało tu `clamp(3.4rem, 9vh, 5.5rem)` — przy oknie 950 px dawało 85 px u góry i 85 u dołu, czyli 171 px oddechu w każdej z sześciu sekcji. Zmierzone po zmianie: 41 + 41. ⚠️ Wysokość, w której trzeba się zmieścić, to NIE `100vh`: u góry stoi nagłówek (~66 px), u dołu pasek postępu (~50 px). Realny kadr to `100vh − 116 px` i pod ten próg dobrane są liczby niżej. ------------------------------------------------------------ */ .of-sec .wrap { padding-top: clamp(1.7rem, 4.2vh, 2.9rem); padding-bottom: clamp(1.7rem, 4.2vh, 2.9rem); } .of-title { font-size: clamp(1.5rem, 2.8vw, 2.1rem); margin: 0.2rem 0 clamp(0.85rem, 2.1vh, 1.4rem); } /* wspólny `.label` ma stały margines 1.4rem — na podstronie liczy się każdy piksel wysokości, więc i on schodzi razem z oknem */ body.oferta .label { margin-bottom: clamp(0.6rem, 1.6vh, 1rem); } /* ⚠️ SKOK DO SEKCJI MUSI OMINĄĆ NAGŁÓWEK. `scrollIntoView({block:"start"})` stawia górną krawędź sekcji na y=0, a tam siedzi belka menu — przy skoku W GÓRĘ (belka wtedy wraca) pierwsze 66 px sekcji chowa się pod nią. `--glowa` wpisuje `oferta.js` po zmierzeniu paska; 4.2rem to bezpieczna wartość zapasowa na wypadek wyłączonego JS. */ body.oferta main > section { scroll-margin-top: var(--glowa, 4.2rem); } /* ⚠️ KOTWICA STAREGO ADRESU. Do 2026-08-26 kalkulator był osobną sekcją `#kalkulator` i pod ten adres linkuje galeria reportażu — a mogą też linkować wyniki wyszukiwania. Po scaleniu sekcji id musiałoby zniknąć, więc zostaje jako punkt zerowej wielkości na początku sekcji: skok pod `#kalkulator` ląduje dokładnie tam, gdzie skok pod `#pakiety`, i to jest właściwe zachowanie — po scaleniu jedno i drugie to ten sam ekran. */ .kotwica { display: block; position: absolute; top: 0; left: 0; width: 1px; height: 1px; scroll-margin-top: var(--glowa, 4.2rem); } /* ============================================================ PAKIETY ============================================================ */ /* ------------------------------------------------------------ PAKIETY — dwie grupy, pięć kart ------------------------------------------------------------ Zwykły układ, nic się nie rusza samo. ⚠️ DWIE GRUPY (2026-08-26, wieczorem): po lewej **Foto** — trzy pakiety, po prawej **Foto + Wideo** — dwa najwyższe, w których ruchomy obraz jest już w cenie. Wcześniej stało tu pięć równorzędnych kart bez żadnego podziału i nie było widać, gdzie kończy się sama fotografia. ⚠️ SZEROKOŚĆ KARTY JEST TA SAMA W OBU GRUPACH i nie bierze się z żadnego pomiaru — wychodzi z jednego równania: 5 kart + 3 odstępy wewnątrz grup + 1 przerwa MIĘDZY grupami = 100% stąd `--karta`. Grupy dostają z tego swoje szerokości (`3 karty + 2 odstępy` i `2 karty + 1 odstęp`), a karty w środku dzielą je po równo (`flex: 1 1 0`). ⚠️ `--karta` WOLNO UŻYĆ WYŁĄCZNIE w `flex-basis` bezpośredniego dziecka `.pak-scena`. Siedzi w nim `100%`, a procent rozwiązuje się dopiero w miejscu użycia — wstawiony w kartę liczyłby się od `.pak-karty` zamiast od sceny i cały rachunek by się rozjechał. ⚠️ To FLEX, nie GRID — i nadal po to, żeby niepełny rząd nie wyglądał na pomyłkę składu. Poniżej 1360 px grupy schodzą jedna pod drugą i wtedy karty w obu liczą się już od szerokości grupy. ⚠️ Odstęp w PIONIE jest większy niż w poziomie: znacznik „najczęściej wybierany" wystaje 11 px ponad kartę i przy równym odstępie dotykałby rzędu wyżej. ⚠️ `--ile` USUNIĘTE. Liczba kart w rzędzie nie jest już jedną zmienną, bo rząd nie jest jeden — układ opisuje `--karta` i progi niżej. ⚠️ KARUZELA USUNIĘTA (2026-08-20). Karty jechały wokół pionowej osi — środkowa płasko, sąsiednie odchylone i cofnięte w głąb. Cofnięte na życzenie: pakiety mają być widoczne wszystkie naraz, obok siebie. ------------------------------------------------------------ */ .pak-scena { --odstep: clamp(1rem, 2.2vw, 1.6rem); /* ⚠️ PRZERWA MIĘDZY PÓŁKAMI KOSZTUJE SZEROKOŚĆ KART, a te płacą wysokością. Odstęp i kreska mają tę samą wartość (włos stoi wtedy pośrodku przerwy), ale idą od `vw`, żeby na wąskim ekranie same się skurczyły. Zmierzone przy 1366 px: przerwa 77 px zabierała każdej karcie 6 px szerokości i podnosiła stan A o 39 px, bo punkty list zaczynały się łamać. Przy 55 px to 2 px na kartę i sekcja wraca na swoje. */ --zakladki: clamp(8.5rem, 13vw, 12.5rem); position: relative; display: grid; grid-template-columns: var(--zakladki) minmax(0, 1fr); gap: clamp(1.2rem, 2.4vw, 2.4rem); align-items: start; } /* ---- ZAKŁADKI ZAMIAST DWÓCH PÓŁEK OBOK SIEBIE (2026-08-28) ---- ⚠️ `--karta`, `--grupa-odstep` i `--grupa-kreska` USUNIĘTE. Nie ma już wspólnego rzędu pięciu kart ani przerwy między półkami, więc nie ma czego liczyć jednym równaniem. Naraz widać JEDNĄ półkę — trzy karty zamiast pięciu — dzięki czemu każda jest szersza, listy łamią się rzadziej, a sekcja przestała wychodzić poza kadr. ⚠️ To PRZYCISKI, nie odnośniki: nie prowadzą pod żaden adres, tylko przełączają widok. `role="tablist"` i `aria-selected` są po to, żeby czytnik ekranu ogłosił to jako wybór, a nie jako dwa niezależne guziki. */ .pak-zakladki { display: flex; flex-direction: column; gap: 0.5rem; } .pak-zakladka { display: flex; flex-direction: column; gap: 0.15rem; padding: clamp(0.7rem, 1.5vh, 1rem) clamp(0.8rem, 1.2vw, 1.1rem); text-align: left; border: 1px solid var(--line); border-radius: 12px; background: rgba(255, 255, 255, 0.03); color: var(--ink-dim); transition: border-color 0.4s var(--ease), color 0.4s var(--ease), background 0.4s var(--ease); } .pak-zakladka-nazwa { font-family: var(--nav); font-size: 0.62rem; letter-spacing: 0.22em; text-transform: uppercase; } .pak-zakladka-ile { font-family: var(--serif); font-style: italic; font-size: 0.78rem; letter-spacing: 0.02em; opacity: 0.72; } .pak-zakladka:hover { border-color: rgba(200, 176, 138, 0.45); color: var(--ink); } /* ⚠️ Stan wybrany niesie OBRYS I TŁO, nie samo przygaszenie pozostałych — alfa przy tekście zbija kontrast razem z tłem (NOWY-WATEK §7.14). */ .pak-zakladka.is-on { border-color: rgba(200, 176, 138, 0.65); background: rgba(200, 176, 138, 0.1); color: var(--ink); } .pak-zakladka.is-on .pak-zakladka-ile { opacity: 0.9; } .pak-zakladka:focus-visible { outline: 1px solid var(--gold); outline-offset: 3px; } /* ---- OPCJA KAMERALNA POD PAKIETAMI (2026-08-28) ---- Jedno zdanie o ślubie cywilnym i małym przyjęciu. Ma być ZNALEZIONE przez tych, którzy go szukają, i przeoczone przez tych, którzy szukają pełnego reportażu — dlatego jest szeptem: mniejszy stopień, przygaszony kolor, złoty włos z lewej zamiast ramki. ⚠️ WŁOS Z BOKU, NIE RAMKA. Ramka zrobiłaby z tego kartę, a karta stanęłaby w jednym rzędzie znaczeniowym z pakietami — czyli dokładnie to, czego ten układ ma uniknąć. Włos mówi „przypis", nie „oferta". ⚠️ Kwota jest w ``, nie w osobnym, dużym napisie: ma być czytelna dla robota i dla szukającego, a nie krzyczeć ceną obok 8 900 zł. */ .pak-mini { margin-top: clamp(0.7rem, 1.6vh, 1.1rem); padding-left: clamp(0.8rem, 1.6vw, 1.2rem); border-left: 1px solid rgba(200, 176, 138, 0.35); max-width: 54rem; font-size: clamp(0.8rem, 1vw, 0.9rem); line-height: 1.6; color: var(--ink-dim); } /* ⚠️ ETYKIETA W LINII, nie nad tekstem — osobny wiersz kosztowałby ~20 px za jedno słowo, a ta sekcja walczy o każde 20 (NOWY-WATEK §7.28). Kropka rozdzielająca jest pseudoelementem, żeby nie stała w drzewie dostępności: czytnik ma przeczytać „Kameralnie. Sam ślub cywilny…". */ .pak-mini-tyt { font-family: var(--nav); font-size: 0.55rem; letter-spacing: 0.26em; text-transform: uppercase; color: var(--gold); white-space: nowrap; } .pak-mini-tyt::after { content: "·"; margin: 0 0.5em 0 0.7em; opacity: 0.7; } .pak-mini strong { color: var(--ink); font-weight: 400; } /* W wycenie znika razem z resztą stanu A — tam jest już wybrany pakiet. */ .kalk.ma-pakiet .pak-mini { display: none; } /* Nieaktywna półka znika. ⚠️ Własna reguła `display` bije atrybut `hidden`, stąd ta linijka (NOWY-WATEK §7.5). W DRZEWIE ZOSTAJE — dane strukturalne czytają wszystkie pięć kart, i to `textContent`, a nie pomiar układu, więc ukrycie im nie szkodzi. */ .pak-grupa[hidden] { display: none; } .pak-grupa { display: flex; flex-direction: column; min-width: 0; } /* ⚠️ WŁOS MIĘDZY PÓŁKAMI I SZEROKOŚCI GRUP USUNIĘTE (2026-08-28). Kreska, cieplejsze tło i dwie etykiety miały rozdzielić dwie oferty stojące w JEDNYM rzędzie pięciu kart. Rzędu już nie ma — półki nie stoją obok siebie, tylko jedna pod drugą w zakładkach, więc rozdzielać nie ma czego. Zostaje cieplejsze tło kart po stronie wideo: to nadal jest droższa półka i ma się różnić, nawet gdy widać ją samą. */ .pak-grupa--wideo .pak { background: linear-gradient(155deg, rgba(200, 176, 138, 0.08), rgba(255, 255, 255, 0.014)); border-color: rgba(200, 176, 138, 0.24); } .pak-karty { display: flex; flex-wrap: wrap; align-items: stretch; gap: clamp(1.4rem, 2.6vh, 2.1rem) var(--odstep); flex: 1; /* karty w obu grupach kończą równo */ } .pak-karty > .pak { flex: 1 1 0; min-width: 0; max-width: 100%; } /* ------------------------------------------------------------ NAGŁÓWKI GRUP — pakietów i dodatków ------------------------------------------------------------ Jeden wzór na dwa miejsca: nad kolumną pakietów („Foto", „Foto + Wideo") i nad każdą grupą dodatków („W dniu ślubu", „Film i sesje", „Pamiątki"). Ma to być etykieta, nie nagłówek — mały krój nawigacyjny, szeroka spacja i włos, który biegnie do końca grupy i gaśnie. Tyle wystarczy, żeby oko złapało podział; wszystko więcej robiłoby z tego drugi poziom tytułów. ------------------------------------------------------------ */ /* ⚠️ `.pak-grupa-nazwa` USUNIĘTE 2026-08-28 — etykiety półek zastąpiły zakładki. Wzór został sam dla grup dodatków. */ .kalk-grupa-nazwa { display: flex; align-items: center; gap: 0.75rem; margin: 0 0 clamp(0.5rem, 1.2vh, 0.85rem); font-family: var(--nav); font-size: 0.58rem; letter-spacing: 0.26em; text-transform: uppercase; color: var(--ink-dim); white-space: nowrap; } /* ⚠️ Etykieta grupy dodatków NIE MA włosa za tekstem — ma go z boku (`.kalk-grupa` niżej). Dwa włosy na jednej grupie, poziomy i pionowy, zaczynają wyglądać jak tabela. */ .kalk-grupa-nazwa { color: var(--gold); opacity: 0.85; } /* Złoto na droższej półce przeniosło się z etykiety na zakładkę — patrz `.pak-zakladka.is-on` wyżej. */ .pak { position: relative; display: flex; flex-direction: column; padding: clamp(1.15rem, 2.2vw, 1.7rem); background: linear-gradient(155deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.012)); border: 1px solid var(--line); border-radius: 16px; box-shadow: 0 20px 50px rgba(0, 0, 0, 0.35); } /* wyróżniony pakiet — złoty obrys zamiast innego tła, żeby nie krzyczał */ .pak--top { border-color: rgba(200, 176, 138, 0.55); } /* ------------------------------------------------------------ NAJAZD NA PAKIET — karta zapala się złotem i wychodzi z ekranu ------------------------------------------------------------ Cztery rzeczy naraz, każda w swojej warstwie: 1. karta unosi się i rośnie o 3,5% (`translate` + `scale`), 2. obrys robi się złoty, a pod kartą zapala się aura (`box-shadow`), 3. `::before` kładzie na tle ciepłą złotą poświatę od góry, 4. `::after` przeciąga po karcie POŁYSK — wąski pas światła, wracający co kilka sekund, żeby złoto „mieniło się", a nie tylko świeciło. ⚠️ NAJWAŻNIEJSZE: RUCH IDZIE PRZEZ `scale` I `translate`, NIE PRZEZ `transform`. Karty mają klasę `.reveal` ze wspólnego arkusza, a ta odsłania je właśnie `transform`-em (`translateY(34px)` → `none`). Gdyby najazd też sięgnął po `transform`, obie rzeczy pisałyby po tej samej właściwości i najazd w trakcie odsłaniania zerwałby wejście karty w pół drogi. `scale` i `translate` to osobne właściwości — składają się z `transform` zamiast się z nim bić. ⚠️ DLATEGO TEŻ `transition` POWTARZA TU WPIS Z `.reveal` (opacity i transform, 1,1 s z opóźnieniem `--d`). `transition` to skrót — nasza reguła stoi w późniejszym arkuszu i wymazałaby tamten wpis w całości, a razem z nim schodkowe wchodzenie kart. Ruch najazdu ma za to opóźnienie zerowe: karta ma odpowiadać od razu, a nie po `--d`. ⚠️ `z-index: 2` przy najeździe — bez tego powiększona karta wchodziłaby POD sąsiednią, bo w rzędzie wygrywa kolejność w drzewie. ⚠️ Ten sam stan dostaje `:focus-within` — do „Dopasuj ten pakiet" da się dojść tabulatorem i wtedy też trzeba widzieć, na której karcie się stoi. ------------------------------------------------------------ */ .pak { transition: opacity 1.1s var(--ease) var(--d, 0s), transform 1.1s var(--ease) var(--d, 0s), scale 0.55s var(--ease), translate 0.55s var(--ease), box-shadow 0.55s var(--ease), border-color 0.5s var(--ease); } /* poświata na tle karty — pod tekstem, nad tłem */ .pak::before { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background: radial-gradient(125% 85% at 50% 0%, rgba(200, 176, 138, 0.2), transparent 62%); opacity: 0; transition: opacity 0.55s var(--ease); } /* połysk — wąski pas światła przeciągany w poprzek karty. Ruch robi `background-position`, więc pas jest sam z siebie przycięty do prostokąta karty; nie trzeba `overflow: hidden`, które ucięłoby wystający znacznik „najczęściej wybierany". */ .pak::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background: linear-gradient(104deg, transparent 40%, rgba(238, 222, 190, 0.13) 47%, rgba(255, 248, 233, 0.26) 50%, rgba(238, 222, 190, 0.13) 53%, transparent 60%); background-size: 280% 100%; background-position: 150% 0; opacity: 0; transition: opacity 0.4s var(--ease); } .pak:hover, .pak:focus-within { scale: 1.035; translate: 0 -8px; z-index: 2; border-color: rgba(200, 176, 138, 0.78); box-shadow: 0 30px 68px rgba(0, 0, 0, 0.55), /* karta odrywa się od tła */ 0 0 0 1px rgba(200, 176, 138, 0.32), /* cienki złoty kant */ 0 0 30px rgba(200, 176, 138, 0.26), /* bliska łuna */ 0 0 88px rgba(200, 176, 138, 0.12); /* daleka, ledwie widoczna */ } .pak:hover::before, .pak:focus-within::before { opacity: 1; } .pak:hover::after, .pak:focus-within::after { opacity: 1; animation: pakPolysk 3.6s var(--ease) infinite; } @keyframes pakPolysk { 0% { background-position: 150% 0; } 55%, 100% { background-position: -50% 0; } } /* tekst też się ociepla — sama karta bez tego wygląda, jakby zapaliła się rama, a treść w środku została w cieniu */ .pak-name, .pak-price { transition: color 0.45s var(--ease), text-shadow 0.45s var(--ease); } .pak:hover .pak-name, .pak:focus-within .pak-name { color: #fdf8ee; text-shadow: 0 0 22px rgba(200, 176, 138, 0.35); } .pak:hover .pak-price, .pak:focus-within .pak-price { color: #e6cfa0; } .pak:hover .pak-cta, .pak:focus-within .pak-cta { color: var(--gold); } .pak:hover .pak-cta i, .pak:focus-within .pak-cta i { transform: translateX(5px); } .pak-tag { position: absolute; top: -0.7rem; left: 50%; transform: translateX(-50%); padding: 0.25rem 0.9rem; background: var(--gold); color: #14110c; border-radius: 999px; font-size: 0.56rem; letter-spacing: 0.2em; text-transform: uppercase; white-space: nowrap; } .pak-name { font-family: var(--serif); font-size: clamp(1.3rem, 2.2vw, 1.65rem); color: var(--ink); line-height: 1.2; } .pak-price { font-family: var(--nav); font-size: 0.78rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold); margin: 0.35rem 0 0.7rem; } .pak-note { color: #b3ada1; font-size: 0.88rem; line-height: 1.5; margin-bottom: 0.85rem; } .pak-list { list-style: none; margin: 0 0 1rem; padding-top: 0.85rem; border-top: 1px solid var(--line); /* lista rośnie, przycisk zostaje równo na dole każdej karty */ flex: 1; } /* ⚠️ Pięć pozycji razy pięć kart to najgrubszy kawałek sekcji „Pakiety" — 0,17 rem odstępu mniej na wierszu ścina karcie ~20 px, a całej sekcji tyle samo (karty stoją w rzędzie). Poniżej 1,45 wiersze zaczynają się zlewać. */ .pak-list li { position: relative; padding-left: 1.15rem; margin-bottom: 0.38rem; color: #b7b1a5; font-size: 0.88rem; line-height: 1.45; } .pak-list li::before { content: ""; position: absolute; left: 0; top: 0.62em; width: 5px; height: 5px; border-radius: 50%; background: var(--gold); opacity: 0.75; } .pak-cta { display: inline-flex; align-items: center; gap: 0.6rem; align-self: flex-start; color: var(--ink); text-decoration: none; font-family: var(--nav); font-size: 0.66rem; letter-spacing: 0.22em; text-transform: uppercase; border-bottom: 1px solid var(--gold); padding-bottom: 0.45rem; transition: color 0.35s; } .pak-cta i { font-style: normal; color: var(--gold); transition: transform 0.5s var(--ease); } .pak-cta:hover { color: var(--gold); } .pak-cta:hover i { transform: translateX(5px); } /* ⚠️ CAŁA KARTA JEST POLEM KLIKNIĘCIA, nie sam napis na dole. Nakładka `::after` rozpycha pole dotyku etykiety na całą kartę — ta sama sztuczka co przy `.rolka-cta` na okładce. Powód jest ten sam: `