/* ===================================================================== STOPKA TEKST NA CIEMNYM TLE JEST JASNY, NIE SZARY. Wszystkie kolory tekstu w tym pliku pochodzą z tokenów `--dm-stopka-tekst` i `--dm-stopka-prawa`, czyli z bieli o obniżonej nieprzezroczystości. Nie podmieniaj ich na wartości szare: hierarchia ma wynikać z jasności, nie z odejścia w szarość, która przy słabszym ekranie przestaje być czytelna. ===================================================================== */ /* * BIAŁY PASEK NAD STOPKĄ - 27.08.2026. * * Stopka miała 78 px marginesu górnego. Na stronie, która kończy się * sekcją z własnym tłem - a tak kończy się strona główna sklepu, bo * ostatnia jest „historia marki" na kremowym tle - ten margines rysował * między dwoma kolorowymi pasami biały pas bez treści. Wyglądał jak * miejsce, z którego coś wypadło. * * Odstęp przenosimy do TREŚCI i zdejmujemy go tam, gdzie ostatnia sekcja * ma własne tło i sama jest już zamknięciem strony. */ .dm-stopka { margin-top: 0; background: var(--dm-stopka-tlo); color: var(--dm-stopka-tekst); } body.dm main { padding-bottom: 7.8rem; } body.dm main:has( > *:last-child.dm-sekcja--historia ), body.dm main:has( > *:last-child#sekcja-newsletter ), body.dm main:has( + #sekcja-newsletter ), body.dm main:has( > *:last-child.dm-sekcja--kolekcje ) { padding-bottom: 0; } /* * ODSTĘPY W STOPCE - 27.08.2026. * * Kolumny odsunięte od siebie mocniej (4 → 6,4 rem), a pozycje wewnątrz * kolumny zbliżone (0,9 → 0,7 rem). To jedna zmiana o dwóch kierunkach * i tak ma być: dopóki odstęp między kolumnami był zbliżony do odstępu * między pozycjami, wszystko wyglądało jak jedna wielka lista. */ /* * KOLUMNY O SZEROKOŚCI TREŚCI, NIE RÓWNE (poprawka 1.09.2026). * * Cztery równe kolumny wyglądają na porządek, dopóki treść w nich jest * podobnej długości. Tutaj nie była. Zmierzone przy oknie 1920: * * kolumna szerokość najdłuższa pozycja niewykorzystane * marka 301 px 271 px 30 px * Biżuteria 301 px 70 px 231 px * Fotografia 301 px 165 px 136 px * Kontakt 301 px 147 px 154 px * * „Bransoletki" ma 70 px w kolumnie na 301 - reszta to pustka, którą * widać jako dziurę przed „Fotografią". Odstępy MIĘDZY TEKSTEM wychodziły * 295, 200 i 218 px, choć siatka miała wszędzie równe 64. Oko czyta * odległość między napisami, nie między krawędziami kolumn - i dlatego * równa siatka dawała nierówny obraz. * * `max-content` zwęża kolumny linków do ich treści, a `space-between` * rozkłada wolne miejsce równo między nimi. Odstępy widoczne są wtedy * takie same, bo liczone od końca napisu do początku następnego. * * Kolumna marki dostaje więcej miejsca (46rem zamiast 34), bo to ona ma * pochłonąć nadmiar - i przy okazji obie linie gałęzi mieszczą się * w jednym wierszu zamiast łamać się na dwa. * * `gap` zostaje jako MINIMUM: przy `space-between` odstęp nigdy nie zejdzie * poniżej tej wartości, choćby treść urosła. */ .dm-stopka__siatka { display: grid; grid-template-columns: minmax(34rem, 46rem) repeat(3, max-content); justify-content: space-between; gap: 3.2rem clamp(3.2rem, 4vw, 5.6rem); padding-top: 5.6rem; } /* * PONIŻEJ 62em WRACAMY DO RÓWNYCH KOLUMN. * * `max-content` nie zna szerokości ekranu - kolumna o treści szerszej * niż okno po prostu z niego wyjdzie i strona dostanie poziomy pasek * przewijania. Przy węższym ekranie treść i tak zawija się na mniej * kolumn, więc różnice długości przestają być widoczne. */ @media (max-width: 62em) { .dm-stopka__siatka { grid-template-columns: repeat(auto-fit, minmax(23rem, 1fr)); justify-content: stretch; } } /* --------------------------------------------------------------------- KOLUMNA MARKI --------------------------------------------------------------------- */ /* * KOLUMNA MARKI STOI NA ŚRODKU - 1.09.2026, wieczorna tura uwag. * * Znak, dwie linie gałęzi i hasło mają jedną oś pionową. Przy wyrównaniu * do lewej znak wisiał nad tekstem różnej długości i każda linia zaczynała * się w tym samym punkcie, ale kończyła gdzie indziej - blok wyglądał * na urwany po prawej. Kolumny z odnośnikami zostają przy lewej: to listy * do przebiegnięcia wzrokiem, a wyśrodkowana lista czyta się źle. * * Środkowana jest zawartość kolumny, nie cała stopka - kolumna marki * ma własną szerokość (34-46rem) i to w niej stoi oś. */ .dm-stopka__marka { text-align: center; } .dm-stopka__marka .dm-stopka__galezie, .dm-stopka__marka .dm-stopka__opis { margin-inline: auto; } .dm-stopka__logo { display: inline-block; line-height: 0; } /* * Płytka pod logo istnieje tylko dopóki logo ma własne, białe tło. * Po wgraniu wersji z przezroczystością klasa nie jest dokładana * i logo wchodzi wprost na czerń. */ .dm-logo__obraz--plytka { background: var(--dm-tekst-jasny); border-radius: var(--dm-r-karta); padding: 1.4rem 1.8rem; mix-blend-mode: normal; } .dm-stopka__logo .dm-logo__obraz { height: 7.8rem; width: auto; } .dm-stopka__opis { font-size: var(--dm-txt-akapit); line-height: 1.85; margin: 1.6rem 0 0; max-width: 32rem; } /* --------------------------------------------------------------------- DWIE LINIE GAŁĘZI POD ZNAKIEM POPRAWKA 1.09.2026: NAZWY GAŁĘZI NIE SĄ WERSALIKAMI. Pierwsza wersja pisała „autorska BIŻUTERIA z kamieni naturalnych" - z nazwą gałęzi kapitalikami i rozstrzeleniem liter. To był odruch przepisania składu z pisma właścicielki, w którym wersaliki służyły do WSKAZANIA słowa, nie do jego złożenia. Teraz to zwykłe zdanie: normalny tekst, normalny odstęp wierszy, nazwa gałęzi wyróżniona samym pogrubieniem. Wyróżnienie ma być na tyle mocne, żeby oko trafiło w nazwę, i na tyle ciche, żeby linia dała się przeczytać jak zdanie. `display: block` na całym akapicie i `inline` na częściach: linia ma się zawijać naturalnie, a nie łamać na trzy sztywne wiersze na wąskim ekranie. --------------------------------------------------------------------- */ /* * POPRAWKA 1.09.2026, druga tego dnia: bez pogrubień i bez wersalików. * * Pierwsza wersja miała nazwę gałęzi kapitalikami, druga - pogrubioną. * Obie próbowały ją WYRÓŻNIĆ, a to nie jest lista pozycji do przebiegnięcia * wzrokiem, tylko dwa zdania o tym, czym zajmuje się firma. Wyróżnienie * w środku zdania każe je czytać dwa razy. * * Zostaje jednolity tekst. Rozróżnienie niesie sama treść. * * ODSTĘP MIĘDZY LINIAMI ma być taki, jak między wierszami wewnątrz linii. * Przy `gap: .8rem` i interlinii 1,85 przerwa między dwoma zdaniami była * dwa razy większa niż między wierszami drugiego z nich - wyglądało to * na przypadkowo rozsunięty tekst, a nie na dwa akapity. */ .dm-stopka__galezie { margin-top: 1.8rem; display: flex; flex-direction: column; gap: .2rem; /* * 46rem, nie 34: przy węższej kolumnie oba zdania łamały się na dwa * wiersze, a drugie na trzy. Każde ma się zmieścić w jednej linii - * to zdanie o gałęzi, nie akapit. */ max-width: 46rem; } .dm-stopka__galaz { margin: 0; font-size: var(--dm-txt-akapit); line-height: 1.75; color: var(--dm-stopka-tekst); } .dm-stopka__galaz-przed, .dm-stopka__galaz-po, .dm-stopka__galaz-nazwa { color: var(--dm-stopka-tekst); font-weight: 400; } /* * NAZWA GAŁĘZI WERSALIKAMI I POGRUBIONA - 2.09.2026, decyzja właściciela. * * Wraca wyróżnienie zdjęte 1.09. Wtedy zdecydowaliśmy, że wyróżnienie * w środku zdania każe je czytać dwa razy; teraz ma być odwrotnie - * słowo „biżuteria" i „fotografia" ma być tym, w co oko trafia najpierw. * * INTERLINIA ZOSTAJE NIETKNIĘTA. Wersaliki są wyższe od małych liter, * więc kuszą, żeby rozsunąć wiersze; przy `line-height: 1.75` nie ma * takiej potrzeby, a zmiana rozsunęłaby oba zdania względem siebie - * odstęp między nimi był już raz strojony i ma zostać. */ .dm-stopka__galaz-nazwa { text-transform: uppercase; font-weight: 700; } /* * Hasło. Wersaliki z szerokim światłem - to podpis marki, nie zdanie * do czytania, więc rozstrzelenie tu pomaga zamiast przeszkadzać. */ .dm-stopka__haslo { margin: 2rem 0 0; font-size: var(--dm-txt-label); letter-spacing: .26em; text-transform: uppercase; color: var(--dm-tekst-jasny); } /* * ODSTĘP URÓSŁ RAZEM Z IKONAMI (4.09.2026). Znaki mają dziś 26 px zamiast * 18, a przy dawnym odstępie 1,2 rem stały prawie jeden przy drugim. */ .dm-stopka__spolecznosciowe { display: flex; align-items: center; gap: 1.8rem; margin-top: 1.6rem; } .dm-stopka__spolecznosciowe a { line-height: 0; color: var(--dm-tekst-jasny); opacity: .85; transition: opacity 200ms; } .dm-stopka__spolecznosciowe a:hover { opacity: 1; color: var(--dm-tekst-jasny); } /* --------------------------------------------------------------------- KOLUMNY Z ODNOŚNIKAMI --------------------------------------------------------------------- */ .dm-stopka__tytul { font-family: var(--dm-pismo-tyt); font-weight: 400; font-size: 1.9rem; line-height: 1.3; color: var(--dm-tekst-jasny); margin: 0 0 1.4rem; } /* * PISMO W STOPCE JEST TEJ SAMEJ WIELKOŚCI CO NA STRONIE. * * Do 27.08.2026 stopka miała pismo o stopień mniejsze od reszty serwisu * i przy ciemnym tle czytało się je wyraźnie gorzej. Ciemne tło * i tak zabiera czytelności - nie ma po co dokładać do tego mniejszego * kroju. Standard Brand Perspective mówi: tekst treściowy nie schodzi * poniżej 16 px. */ .dm-stopka__lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .7rem; font-size: var(--dm-txt-akapit); } /* * Punktor przy każdej pozycji. Kropka jest w kolorze tęczy z logo, * nie w kolorze tekstu - to jedyny akcent barwny w stopce. */ .dm-stopka__lista li { display: flex; align-items: baseline; gap: .9rem; } .dm-stopka__lista li::before { content: ""; flex: 0 0 auto; width: var(--dm-kropka); height: var(--dm-kropka); border-radius: 50%; background: var(--dm-akcent); transform: translateY(-.2rem); } .dm-stopka__lista a { color: var(--dm-stopka-tekst); transition: color 200ms; } .dm-stopka__lista a:hover { color: var(--dm-tekst-jasny); } /* --------------------------------------------------------------------- KOLUMNA KONTAKTOWA --------------------------------------------------------------------- */ .dm-stopka__dane { list-style: none; margin: 0 0 1.8rem; padding: 0; display: flex; flex-direction: column; gap: 1rem; font-size: var(--dm-txt-akapit); } .dm-stopka__dane li { display: flex; align-items: center; gap: 1rem; } .dm-stopka__dane svg { flex: 0 0 auto; opacity: .75; } .dm-stopka__dane a { color: var(--dm-stopka-tekst); transition: color 200ms; } .dm-stopka__dane a:hover { color: var(--dm-tekst-jasny); } .dm-stopka__kolumna--kontakt .dm-stopka__spolecznosciowe { margin: 0 0 2rem; } .dm-stopka__kolumna--kontakt .dm-stopka__lista { padding-top: .4rem; border-top: 1px solid var(--dm-stopka-linia); margin-top: 0; } .dm-stopka__kolumna--kontakt .dm-stopka__lista li { padding-top: .8rem; } /* --------------------------------------------------------------------- DOLNY PASEK --------------------------------------------------------------------- */ .dm-stopka__dol { border-top: 1px solid var(--dm-stopka-linia); margin-top: 3.4rem; padding: 2rem 0 3rem; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.8rem; /* * Prawa autorskie były w rozmiarze plakietki produktowej, czyli * najmniejszym na całej stronie. To jedyne miejsce, gdzie pada nazwisko * właścicielki - zasługuje na rozmiar, który da się przeczytać. */ font-size: var(--dm-txt-maly); color: var(--dm-stopka-prawa); } .dm-stopka__platnosci { display: flex; flex-wrap: wrap; gap: .8rem; } .dm-stopka__platnosci span { border: 1px solid var(--dm-stopka-linia); padding: .5rem 1rem; line-height: 1.4; }