/* ============================================================================= 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 — stąd „identyfikacja i przycisk menu chowają się pod narożnikami". 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. Ten sam warunek stoi w `WORKS/public/style_v2.css` i działa tam od 24.08. Dalej obowiązuje wszystko, co już działało — NIE RUSZAĆ: 1. RAMKA ZNIKA. Na 390 px każdy piksel ramy to piksel zabrany zdjęciu. 2. SCROLLUJE SIĘ DOKUMENT, NIE PUDEŁKO W ŚRODKU. iOS Safari zwija pasek adresu WYŁĄCZNIE wtedy, gdy rusza się scroller dokumentu. 3. `100dvh` zamiast `100vh` — `vh` na iOS to wysokość przy ROZWINIĘTYM pasku. 4. `env(safe-area-inset-*)` — TŁO wchodzi pod wyspę i pod pasek adresu (to jest celowe i ma tak zostać, works tego nie ma i wygląda przez to gorzej), ale tekst i klikalne rzeczy trzymają się od nich z daleka. ========================================================================== */ @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; } .shell{ position:static; inset:auto; margin:0; border:0; overflow:visible; min-height:100dvh; /* pasek stanu wisi nad treścią — oddech, żeby nie zasłaniał końca strony */ padding-bottom:calc(38px + env(safe-area-inset-bottom)); } .scroll{ position:static; inset:auto; overflow:visible; height:auto; } /* Belka zostaje przyklejona do góry — ale do góry OKNA, nie pudełka. */ .site-header{ position:sticky; top:0; z-index:20; padding-left:max(var(--edge-h), env(safe-area-inset-left)); padding-right:max(var(--edge-h), env(safe-area-inset-right)); padding-top:calc(var(--hdr-pv) + env(safe-area-inset-top)); } /* ── PASEK STANU (Kontakt · PL/EN) ────────────────────────────────────────── Decyzja Jarka 2026-08-27: PRZYKLEJONY DO DOŁU OKNA, widoczny od wejścia, CHOWA SIĘ przy przewijaniu w dół i wraca przy przewijaniu w górę — jak pasek adresu Safari. Klasę `.pasek-schowany` zdejmuje i nakłada `js/scale.js`. `position:fixed` załatwia przy okazji drugą usterkę: w `index.html` `.status` stoi w HTML PRZED `.scroll`, więc jako element w zwykłym przepływie lądował NAD nagłówkiem („kontakt i en/pl na górze ponad nagłówkiem"). Wyjęty z przepływu — kolejność w HTML przestaje mieć jakiekolwiek znaczenie i nie trzeba ruszać dwudziestu plików stron. */ .status{ position:fixed; left:0; right:0; bottom:0; top:auto; z-index:25; padding-left:max(var(--edge-h), env(safe-area-inset-left)); padding-right:max(var(--edge-h), env(safe-area-inset-right)); padding-bottom:calc(var(--stat-pv) + env(safe-area-inset-bottom)); transition:transform .28s cubic-bezier(.2,.8,.2,1); will-change:transform; } .status.pasek-schowany{ transform:translateY(101%) } /* works nie ma paska stanu — tam tę rolę pełni stopka na końcu strony. */ .site-footer{ position:static; left:auto; right:auto; bottom:auto; padding-left:max(var(--edge-h), env(safe-area-inset-left)); padding-right:max(var(--edge-h), env(safe-area-inset-right)); padding-bottom:calc(var(--stat-pv) + env(safe-area-inset-bottom)); } .side{ display:none } /* pionowe napisy przy krawędziach */ /* ── MENU STAŁO OBOK STRONY JAK DRUGA KOLUMNA ─────────────────────────────── Szuflada czeka poza ekranem jako `transform:translateX(103%)`. Dopóki `.shell` była `position:fixed` z `overflow:hidden`, nikt tego nie widział. Odkąd `.shell` jest w zwykłym przepływie, a szuflada dalej `position:absolute`, te 103% weszło do POZIOMEGO obszaru przewijania dokumentu: przeciągnięcie palcem w bok odsłaniało menu jak drugą kolumnę obok treści. SELEKTORY SĄ DWUCZŁONOWE CELOWO. `js/menu.js` wstrzykuje swój