/* ============================================================================= RAMA · JEDYNE ŹRÓDŁO PRAWDY (2026-08-27) ----------------------------------------------------------------------------- Ten plik opisuje ramę całej witryny: kolory, ramkę na obrzeżach, belkę z logo i pasek stanu (godzina + język). Wcześniej te same reguły stały w ~20 plikach HTML w WEBSITE/ i drugi raz w WORKS/public/style_v2.css — dlatego strona główna i works miały inny odcień tła i inne proporcje ramki. OD TERAZ: zmiana tutaj = zmiana wszędzie. Plik jest linkowany JAKO OSTATNI w , więc wygrywa kaskadą z lokalnymi stylami stron; duplikaty w HTML-ach zostają jako martwy kod i można je sprzątać stopniowo, bez ryzyka. Do WORKS/ plik trafia kopią — `WEBSITE/sync-rama.command`. Nie edytuj kopii w WORKS/public/css/rama.css, zostanie nadpisana. ----------------------------------------------------------------------------- ZASADA SKALOWANIA (polecenie Jarka 2026-08-27): MNIEJSZY EKRAN → MNIEJSZA RAMKA I MNIEJSZE ODLEGŁOŚCI OD KRAWĘDZI, PRZY CZYM LOGO MA MIEĆ ODDECH. Realizacja: każdy odstęp to jedno `clamp(podłoga, prosta funkcja vw, sufit)`. Bez media query, bez progów, bez JS — czyli bez skoków. Zwężanie okna zmienia ramę płynnie, piksel po pikselu. Dwa punkty zaczepienia, między nimi linia prosta: · 3840 px (UHD) — wartości jak dotąd, bo UHD jest wzorcem (nie ruszamy); · ~900 px (iPad) — wartości takie, jak dziś wygląda strona główna na iPadzie. LOGO celowo maleje WOLNIEJ niż odstępy (60 → ~46 px na całej drodze, gdy ramka robi się dwa razy mniejsza). To jest ten „oddech": im ciaśniej robi się dokoła, tym większą część belki zajmuje monogram. ODSTĘPY PIONOWE MAJĄ DODATKOWO SUFIT LICZONY Z WYSOKOŚCI OKNA (`min(..., Nvh)`). Powód z sierpnia: na laptopie 1512×945 belka i pasek zabierały tyle samo pikseli co na 4K, czyli dwa razy większą część ekranu, i na treść galerii zostawało za mało. Sufit działa tylko na niskich oknach; na iPadzie w pionie (1112 px) nie dotyka niczego. ŚWIADOMIE NIE UŻYWAMY `zoom` — przy skalowaniu niecałkowitym hairline'y (1 px) wychodzą raz grube, raz szare. Tutaj zmieniają się wyłącznie odstępy. ========================================================================== */ /* ── POKRĘTŁA ──────────────────────────────────────────────────────────────── Chcesz grubszą ramkę? Zmień sufit w `--frame`. Wyższą belkę? Sufit w `--hdr-pv`. Pierwsza liczba to podłoga (najwęższy ekran), ostatnia — sufit (UHD). */ :root{ /* PALETA — kanoniczna dla całej witryny. works/ miał tu własne, lekko inne odcienie i to było widać jako „inny kolor strony" przy porównaniu obu. */ --cream: #F5F1E5; --cream-2: #EBE5D6; --ink: #1C1C1A; --mid: #6a6a5f; --accent: #4c4c44; --line: rgba(24,24,22,.5); --line-soft: rgba(24,24,22,.16); /* RAMKA na obrzeżach strony: 30 px na UHD → ~16 px na iPadzie → znika na telefonie */ --frame: clamp(12px, calc(0.476vw + 11.7px), 30px); /* BELKA Z LOGO — odstęp nad i pod logo */ --hdr-pv: clamp(11px, min(calc(0.31vw + 10px), 2.05vh), 22px); /* PASEK STANU (godzina · język) — odstęp nad i pod tekstem */ --stat-pv: clamp(9px, min(calc(0.22vw + 6.5px), 1.4vh), 15px); /* ODSTĘP OD LEWEJ I PRAWEJ KRAWĘDZI w belce i pasku stanu */ --edge-h: clamp(18px, calc(0.8vw + 11px), 42px); /* LOGO — maleje wolniej niż odstępy (patrz „oddech" wyżej) */ --logo-h: clamp(42px, calc(0.42vw + 44px), 60px); } /* ── RAMKA ─────────────────────────────────────────────────────────────────── */ .shell{ position:fixed; inset:var(--frame); border:1px solid var(--line); background:var(--cream); overflow:hidden; z-index:10; } .scroll{ position:absolute; inset:0; overflow-y:auto; overflow-x:hidden; } /* ── BELKA Z LOGO ──────────────────────────────────────────────────────────── */ .site-header{ background:var(--cream); border-bottom:1px solid var(--line); padding:var(--hdr-pv) var(--edge-h); } /* Dwie nazwy tej samej rzeczy: WEBSITE używa `.s-logo img`, works `.logo-img`. Ujednolicone tutaj, żeby logo miało jedną wysokość na całej witrynie. */ .s-logo img, .logo-img{ height:var(--logo-h); width:auto; display:block; } /* ── PASEK STANU (godzina · język) ─────────────────────────────────────────── */ .status, .site-footer{ background:var(--cream); border-top:1px solid var(--line); padding:var(--stat-pv) var(--edge-h); } /* ============================================================================= TELEFON — WARUNEK, NIE SAMA SZEROKOŚĆ (2026-08-27, po zgłoszeniu Jarka) ----------------------------------------------------------------------------- Do dziś stało tu samo `max-width:600px`. iPHONE POŁOŻONY NA BOK MA 844–932 px SZEROKOŚCI, więc w poziomie NIE ŁAPAŁ SIĘ w ten blok i dostawał układ dużego ekranu: ramkę przyklejoną do okna, przewijanie w `.scroll` (czyli Safari nigdy nie zwijał paska adresu) i zero marginesów bezpiecznych. Drugi warunek pyta więc nie o szerokość, tylko o to, CZYM się w to klika: palec (`hover:none` + `pointer:coarse`) na ekranie niższym niż 560 px to telefon położony na bok. iPad zostaje przy układzie z ramką — tam jest na nią miejsce. ----------------------------------------------------------------------------- ZASADA NADRZĘDNA (Jarek, 2026-08-27, druga tura): NA TELEFONIE STRONA MA BYĆ PEŁNOEKRANOWA. Cokolwiek stoi nieruchomo na wierzchu, psuje ten efekt — bo dopóki coś jest przyklejone, treść nie wjeżdża pod pasek adresu ani pod wyspę i Safari nie ma czego zwinąć. Zostaje więc DOKŁADNIE JEDEN element przyklejony: PRZYCISK MENU. Reszta jedzie razem z treścią: · belka z logo — `position:static`, odjeżdża w górę, treść wchodzi pod wyspę; · pasek stanu (godzina + PL/EN) — ZDJĘTY. Kontakt i przełącznik języka przeniesione do menu jako przyciski (`js/menu.js`, `.m-akcje` / `.m-lang`). I NADAL OBOWIĄZUJE, nie ruszać: 1. RAMKA ZNIKA (`--frame:0`). 2. SCROLLUJE SIĘ DOKUMENT, nie `.scroll` w `position:fixed` `.shell` — iOS Safari zwija pasek adresu WYŁĄCZNIE wtedy, gdy rusza się scroller dokumentu. 3. `100dvh` zamiast `100vh`. 4. `env(safe-area-inset-*)` — TŁO wchodzi pod wyspę i pod pasek adresu (celowo), ale tekst i klikalne rzeczy trzymają się od nich z daleka. ========================================================================== */ /* ── SAFARI NA IPHONIE SAM POWIEKSZAL TEKST W POZIOMIE ─────────────────────── 2026-08-29, zgloszenie Jarka: „w poziomie drukowane litery sa duzo za duze, w pionie jest ladnie". Piate podejscie — tym razem do PRZYCZYNY, nie do objawu. Cztery poprzednie proby kreciy rozmiarami w CSS i nie mogly pomoc, bo CSS byl poprawny. iOS Safari ma wlasny mechanizm — Text Autosizing: po polozeniu telefonu na bok MNOZY rozmiary fontow w blokach tekstu przez wspolczynnik liczony z szerokosci bloku wzgledem okna. Mnoznik jest ROZNY dla roznych blokow i tym wiekszy, im mniejszy font — dlatego wersaliki 9,5 px puchly mocniej niz opis 14,5 px obok i wychodzily prawie rowne. W pionie mechanizm sie nie wlacza; stad „w pionie jest ladnie". `text-size-adjust:100%` znaczy „nie poprawiaj mnie, pokaz dokladnie tyle, ile napisalem". NIE blokuje powiekszania dwoma palcami — to robi `none`, ktorego swiadomie nie uzywamy. Stoi tutaj, wiec obowiazuje na wszystkich ~30 stronach witryny naraz i zadna nowa strona nie zacznie od starego bledu. SKUTEK UBOCZNY DO ZAPAMIETANIA: wszystkie recznie zanizone rozmiary „na poziom" robily sie do tej pory wieksze niz w arkuszu. Po tej zmianie widac je tak, jak napisane — dlatego przy okazji wracaja do wartosci z pionu (patrz `.scope` w index.html). ────────────────────────────────────────────────────────────────────────── */ html{ -webkit-text-size-adjust:100%; text-size-adjust:100% } @media (max-width:600px), (hover:none) and (pointer:coarse) and (max-height:560px){ :root{ --frame:0px } html,body{ overflow:visible; height:auto; } body{ min-height:100dvh; overscroll-behavior-y:none; background:var(--cream); } /* POZIOMY OBSZAR PRZEWIJANIA PRZYCINA `html` (patrz „MENU STAŁO OBOK STRONY" niżej). `clip` byłoby czystsze, ale gdy druga oś jest `visible`, ta wartość zaraża i ją — i dokument przestaje się przewijać W OGÓLE (sprawdzone w works). `hidden` w tym samym miejscu zamienia drugą oś na `auto`, czyli dokładnie na to, czego chcemy: html zostaje głównym elementem przewijanym, a to jego ruch Safari wiąże z paskiem adresu. */ html{ overflow-x:hidden; } /* `position:relative` + `overflow-x:clip` — TO NIE KOSMETYKA, TO NAPRAWA ROZDMUCHANEGO VIEWPORTU (2026-08-29, zgloszenie Jarka z works: „menu jest jakby kolumna 50% strony", „opis i szukajka wchodza pod wyspe", „w poziomie menu na cala strone"). Szuflada czeka poza ekranem jako `translateX(103%)`. Odkad `.shell` nie jest zamknietym oknem, te 103% wchodzi do POZIOMEGO OBSZARU PRZEWIJANIA — a Safari na to nie odpowiada paskiem przewijania, tylko POSZERZA VIEWPORT UKLADU i pokazuje cala strone pomniejszona. Zmierzone w Chromium z emulacja iPhone'a (works): okno 393 px -> uklad 798 px, okno 852 px -> uklad 1256 px. Wszystko jedzie wtedy nie tam, gdzie powinno: karta zdjecia wychodzi poza ekran, `env(safe-area-inset-*)` opisuje inny obszar niz widac, a szuflada stoi obok strony jak druga kolumna. `html{overflow-x:hidden}` (wyzej) tego NIE lapie i nie zlapie: szuflada jest `position:absolute`, a przy `.shell` w `position:static` jej blokiem zawierajacym jest ICB — czyli `.shell` nie jest w ogole na jej drodze i nie ma czego przycinac. Dopiero `position:relative` wstawia `.shell` w ten lancuch. `clip`, nie `hidden`: `hidden` zrobiloby z `.shell` kontener przewijania. Sprawdzone po zmianie: uklad = okno, 393/852 px, w obu orientacjach. */ .shell{ position:relative; inset:auto; margin:0; border:0; overflow-x:clip; overflow-y:visible; min-height:100dvh; /* PEŁNA SZEROKOŚĆ — bez bocznego paddingu. Zdjęcia i film mają iść od krawędzi do krawędzi; od wyspy odsuwają się POJEDYNCZE ELEMENTY (belka, przycisk menu, `--hpad` treści), a nie całe pudełko. Wcześniej robił to `js/menu.js` na `.shell` i strona wyglądała na uciętą z obu stron (zgłoszenie Jarka). */ padding-left:0; padding-right:0; padding-bottom:env(safe-area-inset-bottom); } .scroll{ position:static; inset:auto; overflow:visible; height:auto; } /* ── LIGHTBOX GALERII JEDZIE Z DOKUMENTEM (2026-08-29) ───────────────────── Ten sam wzorzec, co nakładki w works — i z tego samego powodu. Sprawdzone na iPhonie: nakładka `position:fixed` na cały ekran sprawia, że Safari ROZWIJA dolny pasek (zasada „cokolwiek stoi nieruchomo na wierzchu, psuje pełny ekran"), a nakładka odklejona, ale wielkości widocznego pola, nie wchodzi pod wyspę ani pod pasek. Rozwiązanie: odklejona i CELOWO WIĘKSZA niż ekran — margines wchodzi pod wyspę i pod pasek, i daje zapas na piksel przewinięcia. Wysokość i padding (= margines) ustawia `js/lgrid.js`. Reguła siedzi TUTAJ, a nie w plikach galerii, bo `.lb{position:fixed;inset:0}` jest wklejone w