/* ============================================================================ ForNails — strona główna: domykanie siatki kategorii, czytelne logotypy marek i subtelne ożywienie. Wdrożone 20.08.2026 na zgłoszenie właściciela: 1. "ostatni kafel wisi sam w osobnym rzędzie" 2. "producentów daj większe, to czytelniejsze" 3. "ta strona nie żyje, nic się tam nie rusza" ZASADA BEZPIECZEŃSTWA TEGO PROJEKTU (nie zmieniać bez czytania): kontener GTM klienta zapętla żądania do martwego adresu i potrafi ZAMROZIĆ przejścia CSS na wartości startowej. W tym sklepie popsuło to już toast, mini-koszyk, menu i zakładki. Dlatego w całym pliku: - ZERO transition na opacity i visibility, - ruch wyłącznie na transform, - żaden element nie staje się widoczny dzięki animacji — animacja tylko przesuwa coś, co i tak jest w pełni widoczne. Gdy animacja nie ruszy, najgorsze co się dzieje to element stoi 22 px niżej. ============================================================================ */ /* --------------------------------------------------------------------------- 1. SIATKA KATEGORII — koniec osieroconego kafla, przy KAŻDEJ liczbie kategorii --------------------------------------------------------------------------- Stan zastany (fn-design-home.css): flex-wrap + justify-content:center, sztywno 6 / 4 / 2 kafle w rzędzie. Zmierzone na żywo 20.08 przy 13 kaflach: desktop 6+6+1, telefon 2x6+1 — czyli na obu szerokościach ostatni kafel zostawał sam. Wyśrodkowanie (poprawka z 13.08) nie rozwiązało problemu: pojedynczy kafel dalej czyta się jak błąd, tylko po środku. Poprawka jest CZYSTO ILOŚCIOWA, bez wpisywania dzisiejszej liczby kategorii: selektor :nth-child(Nn+1):last-child jest prawdziwy dokładnie wtedy, gdy ostatni kafel jest PIERWSZYM w swoim rzędzie, czyli został sam. Wtedy dostaje szerokość dwóch slotów i wygląda jak zamierzony, szerszy kafel domykający sekcję. Działa tak samo dla 13, 14, 19 i każdej innej liczby, którą da katalog — bez wracania do CSS. aspect-ratio 2.07 zamiast 1/1: kafel o szerokości dwóch slotów ma zachować TĘ SAMĄ wysokość co sąsiedzi z rzędu wyżej. Dokładna proporcja to (2*kolumna + odstęp) / kolumna, czyli 2 + odstęp/kolumna. Policzone dla realnych szerokości: 2,061 (1440 px) … 2,088 (1025 px) … 2,074 (telefon). Jedna wartość 2.07 mieści się w błędzie poniżej 1 %, czyli ~1,5 px — niewidoczne. --------------------------------------------------------------------------- */ @media (min-width: 1025px) { .fn-cat-tiles > .fn-cat-tile:nth-child(6n+1):last-child { flex-basis: calc(((100% - 5 * 14px) / 6) * 2 + 14px); aspect-ratio: 2.07 / 1; } } @media (min-width: 768px) and (max-width: 1024px) { .fn-cat-tiles > .fn-cat-tile:nth-child(4n+1):last-child { flex-basis: calc(((100% - 3 * 12px) / 4) * 2 + 12px); aspect-ratio: 2.07 / 1; } } @media (max-width: 767px) { .fn-cat-tiles > .fn-cat-tile:nth-child(2n+1):last-child { flex-basis: 100%; aspect-ratio: 2.07 / 1; } } /* KAFEL ZBIORCZY "Pozostałe kategorie" — ostatni kafel siatki. Zbiera najmniejsze kategorie katalogu (dziś: Zestawy 8 i Lakiery klasyczne 8), które w kaflu wielkości "Frezów" (326) świeciły pustką. Świadomie BEZ zdjęcia: zdjęcie jednej z kilku kategorii wprowadzałoby w błąd. Zamiast tego wypełnienie w kolorze marki, wymienione nazwy w środku i strzałka — czyta się jak zamierzony kafel domykający, a nie jak kafel, któremu czegoś brakuje. Ta sama wielkość, promień i ramka co pozostałe, więc siatka zostaje równa. */ .fn-cat-tile--wiecej { background: linear-gradient(158deg, #2E2321 0%, #43332F 100%); border-color: #2E2321; } .fn-cat-tile--wiecej .fn-cat-tile__body { top: 0; justify-content: center; gap: 7px; padding: 14px 14px 13px; } .fn-cat-tile--wiecej .fn-cat-tile__name { color: #FBF7F5; } .fn-cat-more__list { font-family: var(--fn-font-body, 'Poppins', sans-serif); font-size: 11px; line-height: 1.4; color: #CDBEB7; /* Zabezpieczenie na przyszłość: kafel zbiera do trzech kategorii, a ich nazwy bywają długie ("Dezynfekcja-Sterylizacja"). Przy 320 px kafel ma 116 px i lista mieści się w trzech wierszach — ucięcie po trzech gwarantuje, że licznik ze strzałką nigdy nie zostanie wypchnięty poza kafel. */ display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } .fn-cat-tile--wiecej .fn-cat-tile__count { color: var(--fn-gold, #C9A15A); text-shadow: none; } @media (max-width: 767px) { .fn-cat-more__list { font-size: 10.5px; } } /* --------------------------------------------------------------------------- 2. PASEK MAREK — logotypy czytelne z normalnej odległości --------------------------------------------------------------------------- PRAWDZIWA przyczyna nieczytelności, zmierzona 20.08, a nie zgadnięta: winna była nie tyle wysokość 38 px, co max-width 170 px. Wszystkie 29 plików mają dokładnie 120 px wysokości i bardzo różne szerokości (88–1071 px), więc szeroki wordmark był ścinany szerokością i spadał do groteskowo małej wysokości efektywnej: BIBLIOTEKA (proporcja 8,93:1) 170/8,93 = 19 px <- stąd "nieczytelne" Claresa (5,50:1) 170/5,50 = 31 px Saltec (5,30:1) = 32 px Na telefonie było jeszcze gorzej: max-width 110 px => BIBLIOTEKA 12 px. Nowe wartości: wysokość 60 px, max-width 264 px. To podnosi wysokość efektywną najgorszych przypadków o ok. 50 % (BIBLIOTEKA 19 -> 30 px, Claresa 31 -> 48 px), a większość marek dostaje pełne 60 px. Dlaczego akurat 60, a nie więcej: pliki źródłowe mają 120 px wysokości, więc 60 px CSS to dokładnie 1:1 na ekranie 2x. Powyżej 60 px zaczęlibyśmy powiększać bitmapę i logotypy zrobiłyby się miękkie. To jest sufit wynikający z materiału, nie z designu — gdyby Adrian dał logotypy wektorowe albo 240 px, można zejść wyżej. ŚCIANA: pasek nie robi się gęstszy, bo równolegle schodzi odstęp między markami (40 -> 30 px). Zestaw rośnie z 6453 px do ok. 6900 px, czyli 7 %. Czas przewijania 34 -> 38 s trzyma prędkość na dzisiejszym poziomie (~180 px/s), więc pasek nie zacznie "uciekać". ZERO nowych bajtów: to te same pliki, które już się ładują (webp ~3 kB). Białe, nieprzezroczyste tło plików nadal chowa mix-blend-mode: multiply z fn-marki-logo-kontrast.php — tego nie ruszam. --------------------------------------------------------------------------- */ .fn-brands-marquee { --fn-marquee-duration: 38s; --fn-item-pad: 30px; --fn-row-height: 84px; max-width: 1440px; } .fn-brand-logo { height: 60px !important; max-width: 264px !important; } /* Wordmark tekstowy (marka bez pliku logo) — urósł proporcjonalnie, żeby nie wyglądał na zgubiony obok większych logotypów. */ .fn-brand-word { font-size: 24px; } /* TELEFON — jeden próg zamiast dwóch. Wcześniej były dwa (782 i 420 px) i to drugi decydował o realnym telefonie: max-width 110 px dawało BIBLIOTECE 12 px wysokości efektywnej. Teraz jeden komplet wartości dla wszystkich telefonów: 44 px wysokości, 200 px szerokości. Najgorszy przypadek rośnie z 12 do 22 px (+82 %), typowa marka z 26 do 44 px. SZEROKOŚCI PASKA NA TELEFONIE CELOWO NIE ZMIENIAM — dwie próby i dlaczego obie odpadły (zapisuję, żeby nikt nie zaczynał od zera): 1. width:100vw + margin-left:calc(50% - 50vw). Zadziałało wizualnie, ale po wdrożeniu zmierzyłem body.scrollWidth 414 px przy ekranie 375 px — czyli realne poziome przewijanie, schowane dopiero przez overflow-x: clip wyżej w drzewie. Odrzucone. 2. margin-inline: -24px (skasowanie samego paddingu sekcji). Bezpieczne, ale bezskuteczne: pasek jest bezpośrednim dzieckiem grupy Gutenberga o układzie "constrained", a WordPress narzuca tam margin-left/right: auto z !important. Zmierzone: nawet styl inline nie przebija tej reguły. Przebicie wymagałoby własnego !important na marginesach sekcji — w dniu przełączenia domeny nie warto. Pasek zostaje przy 297 px z 375 px ekranu, czyli ok. 1,9 marki naraz. Do rozważenia po starcie, jeśli Adrian będzie chciał szerzej. */ @media (max-width: 782px) { .fn-brands-marquee { --fn-marquee-duration: 30s; --fn-item-pad: 12px; --fn-row-height: 66px; } .fn-brand-logo { height: 44px !important; max-width: 200px !important; } .fn-brand-word { font-size: 19px; } } /* Najwęższe telefony (320–360 px) — trochę mniej, żeby zawsze mieściły się dwie marki naraz i pasek nie wyglądał jak jeden wielki napis. */ @media (max-width: 360px) { .fn-brands-marquee { --fn-marquee-duration: 27s; --fn-item-pad: 10px; --fn-row-height: 60px; } .fn-brand-logo { height: 40px !important; max-width: 176px !important; } .fn-brand-word { font-size: 17px; } } /* --------------------------------------------------------------------------- 3. ŻYCIE NA STRONIE --------------------------------------------------------------------------- 3a. Wejście sekcji przy przewijaniu. Konstrukcja odporna na zamrożenie wątku (patrz nagłówek pliku): element NIE startuje ukryty. W spoczynku nie ma na nim żadnej reguły — klasę .fn-rise-in dokłada JS dopiero w chwili, gdy element wjeżdża w kadr, i sam ją zdejmuje po zakończeniu. Gdy JS nie wystartuje, gdy przeglądarka nie zna IntersectionObserver albo gdy animacja utknie — na ekranie jest po prostu treść bez ruchu. Nic nie może zniknąć. fill-mode: backwards, nie both. Przy "both" animacja trzymałaby transform: none po zakończeniu i ZABIŁABY podniesienie kafla na hover (animacja wygrywa w kaskadzie z regułą :hover). Przy "backwards" po zakończeniu transform wraca pod kontrolę CSS i hover działa normalnie. --------------------------------------------------------------------------- */ @media (prefers-reduced-motion: no-preference) { .fn-rise-in { animation-name: fn-rise; animation-duration: .62s; animation-timing-function: cubic-bezier(.22, .61, .36, 1); animation-fill-mode: backwards; animation-delay: var(--fn-rise-delay, 0s); } @keyframes fn-rise { from { transform: translate3d(0, 22px, 0); } to { transform: translate3d(0, 0, 0); } } /* 3b. Puls przy jedynej plakietce rabatu w "Produkcie dnia". Świadomie TYLKO tutaj, nie na wszystkich plakietkach -70 %/-60 % w promocjach: jeden pulsujący akcent to podkreślenie, osiem to jarmark. Skala 1,06 i 3 s — na tyle wolno, żeby czytało się jak oddech. */ .fn-pd-rabat { animation: fn-puls 3s ease-in-out infinite; transform-origin: center center; } @keyframes fn-puls { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.06); } } } /* 3c. Podniesienie kart produktu w "Nowościach" na najechanie. Zmierzone 20.08: te karty (blok WooCommerce, .wc-block-grid__product) miały wyłącznie transition na box-shadow i zero reakcji ruchem — w odróżnieniu od kafli kategorii i kart w Promocjach, które już się podnoszą. Stąd wrażenie, że pół strony nie reaguje. @media (hover: hover) — na dotyku hover potrafi się "zakleszczyć" po tapnięciu. O SELEKTORZE: pierwsza wersja używała .entry-content .wc-block-grid__product i po wdrożeniu zmierzyłem, że reguła NIE wchodzi. Powód: w fn-design-product-cards.php stoi .wc-block-grid__products .wc-block-grid__product z cieniem i transition na box-shadow — dokładnie ta sama waga selektora (0,2,0), a tamten arkusz wypada w dokumencie później, więc wygrywał remis. Dokładam .entry-content PRZED ich selektorem: waga rośnie do (0,3,0) i przestaje zależeć od kolejności arkuszy. Cień na hover zostaje ICH — dokładam wyłącznie ruch, żeby nie dublować stylu. */ @media (hover: hover) { .entry-content .wc-block-grid__products .wc-block-grid__product { transition: transform .28s ease, box-shadow .25s ease; } .entry-content .wc-block-grid__products .wc-block-grid__product:hover { transform: translate3d(0, -4px, 0); } /* 3d. Trzy duże kafle kategorii reagowały dotąd tylko cieniem i powiększeniem zdjęcia, a małe kafle pod nimi podnosiły się o 3 px. Wyrównuję, żeby cała sekcja zachowywała się jednakowo. Waga (0,3,0) bije bazowe .fn-cat-hero-tile:hover (0,2,0), więc nie zależy od kolejności arkuszy. */ .fn-cat-hero .fn-cat-hero-tile { transition: transform .3s ease, box-shadow .3s ease; } .fn-cat-hero .fn-cat-hero-tile:hover { transform: translate3d(0, -3px, 0); } }