/** * JDEV Mam Serce — standard kontrolek na zwykłych stronach portalu * * Ładowany na CAŁYM froncie, w odróżnieniu od ms-frontend.css, który wchodzi * tylko na strony podopiecznych, checkout i strony z shortcodami wtyczki. * Dlatego reguły dla stron treściowych (kontakt, konta bankowe, o fundacji) * muszą mieszkać tutaj — w tamtym pliku po prostu tam nie docierają. * * Trzymaj ten plik malutki: to jest wspólny mianownik dla całego portalu, * a nie miejsce na style konkretnych widoków. */ /* ══════════════════════════════════════════════════════════════════════ JEDNO MIEJSCE STEROWANIA WYSOKOŚCIĄ KONTROLEK CAŁEGO PORTALU ══════════════════════════════════════════════════════════════════════ Chcesz inną wysokość? Zmień --ms-control-h niżej i tyle. Nic więcej nie trzeba ruszać: ms-frontend.css i ms-legacy.css tylko z niej czytają (ms-legacy ma alias --ms-h: var(--ms-control-h)). Ten plik jest jedynym arkuszem wtyczki ładowanym na CAŁYM froncie, dlatego zmienna mieszka właśnie tutaj — inaczej nie byłaby widoczna na stronach treściowych. ══════════════════════════════════════════════════════════════════════ */ /* ── Wysokość kontrolek ────────────────────────────────────────────────── Zakładki przełącznika (waluty na /konta-bankowe/, telefon/e-mail/adres na /kontakt/, dane fundacji na /o-fundacji/) miały 37,27px zamiast 47px. Powód był podwójny: box-sizing: content-box, przez co ramka doklejała się na zewnątrz, oraz wysokość wyliczana z line-height (25,28px, czyli 16px razy mnożnik 1,58) plus padding. Ułamek piksela dawał do tego rozmytą krawędź, bo element nie trafiał w siatkę pikseli ekranu. Teraz wysokość jest podana wprost, ramka mieści się w środku, a tekst centrujemy flexem, żeby line-height nie doliczał się do wysokości. display: flex, NIE inline-flex. Przy inline-flex szerokość zakładki zaczyna zależeć od długości tekstu i zakładki robią się nierówne (zmierzone: 66,59 / 60,98 / 44,60 zamiast równych 84,45). */ :root { --ms-control-h: 45px; /* wysokość każdego pola, kafelka i przycisku */ --ms-row-gap: 12px; /* odstęp między kontrolkami w wierszu 2 */ --ms-divider-gap: 15px; /* odstęp nad i pod poziomą linią */ /* Wiersz 2 to kilka kontrolek jedna pod drugą. Na komputerze są dwa rzędy (Imię i Nazwisko obok siebie, e-mail pod nimi), na telefonie trzy, bo pola układają się w słupek. Zamiast wpisywać dwie wysokości, podajemy LICZBĘ RZĘDÓW, a wysokość liczy się sama. Zmiana --ms-control-h nadal przestawia wszystko jedną liczbą. */ --ms-row2-rows: 2; --ms-row2-h: calc( var(--ms-control-h) * var(--ms-row2-rows) + var(--ms-row-gap) * (var(--ms-row2-rows) - 1) ); /* Wysokość całej karty kroku. Liczona z tych samych składników co rytm, plus miejsce na blok dolny (zgody z polityką prywatności). Karta ma wtedy tę samą wysokość w każdym kroku, więc nic nie skacze. */ /* Padding KAŻDEJ białej karty w portalu, we wszystkie cztery strony. Wcześniej ta zmienna sterowała tylko górą i dołem karty kroku i miała 28px, podczas gdy reszta kart portalu stała na 40px z palety YOOtheme. Karta z kwotami wyłamywała się więc z rytmu na obu ekranach: komputer pozostałe karty 40 40 40 40, karta kwot 28 40 28 40 telefon pozostałe karty 14 14 14 14, karta kwot 28 14 28 14 Teraz jest jedna liczba i czyta z niej także reguła #tm-main .uk-card-body w ms-legacy.css. Wartość mobilna niżej. */ --ms-card-pad: 40px; --ms-cta-gap: 25px; /* odstęp: wiersz 2 → przycisk, liczony RAZ */ /* Wiersz zgody ma tę samą wysokość co pola i przyciski. Skakanie kroków rozwiązuje STAŁA wysokość (height, nie min-height) w ms-legacy.css, a nie obniżanie zgód — obniżone wyłamywały się z reszty kontrolek. */ --ms-consent-h: var(--ms-control-h); --ms-bottom-gap: 12px; /* odstęp: przycisk → blok pod nim */ /* Miejsce na blok pod przyciskiem: tekst o polityce prywatności ma trzy linijki plus odstęp nad nim. Zmierzone na żywo, nie zgadywane — przy 150px zostawało 110px pustki pod tekstem. */ --ms-card-bottom: 78px; /* ══════════════════════════════════════════════════════════════════ WYSOKOŚĆ KARTY KROKU — jedna liczba dla całego przepływu ══════════════════════════════════════════════════════════════════ Każdy krok ma dostać ten sam prostokąt: krok kwot, krok danych, krok zgód i krok podziękowania. Bez tego każdy brał wysokość skądinąd — krok 1 z treści, checkout ze sztywnego 494px wpisanego w szablonie YOOtheme, podziękowanie znów z treści. 422px to zmierzona wysokość kroku 1 (tytuł 45 + linia 1 + kwoty 172 + pasek postępu 118 + padding 2×28). To najwyższy z kroków, więc treść mieści się wszędzie. Jeśli dojdzie albo zniknie wiersz w którymkolwiek kroku, przemierz najwyższy i popraw TĘ liczbę. Nic innego nie trzeba ruszać. */ --ms-card-h: 422px;} /* ── Padding kart: trzy progi, dokładnie takie jak w palecie YOOtheme ───── Motyw daje .uk-card-body padding 25px, a powyżej 1200px podnosi go do 40px. Gdyby zmienna miała tylko dwie wartości (40 i 14), to w zakresie 960–1200px karta kwot dostałaby 40px w pionie przy 25px na bokach, czyli powstałby nowy rozjazd zamiast starego. Dlatego progi są te same. */ @media (max-width: 1199px) { :root { --ms-card-pad: 25px; } } @media (max-width: 960px) { :root { --ms-card-pad: 14px; /* ── Wspólna wysokość kroku na telefonie ────────────────────────── Na komputerze wysokość karty bierze się z uk-height-match, czyli z sąsiedniej kolumny ze zdjęciem. Na telefonie kolumny stoją jedna pod drugą, więc nie ma się do czego dopasować i każdy krok miał swoją wysokość: krok 1 (kwoty) 399px naturalnie krok 2a (dane) 334,5px krok 2b (zgody) 334,5px 400px to zaokrąglony najwyższy z nich. Karta musi pomieścić najwyższy krok, inaczej treść by z niej wystawała. Nie dokładamy tu żadnej nowej reguły — wszystkie cztery kroki już czytają --ms-card-h, więc wystarczy podać jej inną wartość poniżej 960px. Dzięki temu nie ma ryzyka, że nowy selektor pobije coś wypracowanego wcześniej. Jeśli w którymś kroku przybędzie wiersz, przemierz najwyższy i popraw TĘ liczbę. */ /* 380px po scisnieciu paska postepu: krok 1 potrzebuje teraz 378px zamiast 399px. Zaokraglone w gore do 380. */ --ms-card-h: 380px; /* ── Pasek postępu na telefonie ────────────────────────────────── „Zebraliśmy / Potrzebujemy" plus pasek procentowy zajmowały 94px, czyli 23,5% całej karty kroku 1. Rozkład: 4 wiersze tekstu po 22px 44px odstęp pod kwotami 25px pasek procentowy 25px Ścieśniamy wszystkie trzy składniki, zamiast rozpychać krok 2 pustką do wysokości kroku 1. Reguły korzystające z tych zmiennych siedzą w ms-frontend.css. */ --ms-progress-font: 17px; --ms-progress-line: 19px; --ms-progress-gap: 10px; --ms-progress-bar-h: 20px; } } /* ── Jedna reguła paddingu dla KAŻDEJ białej karty ─────────────────────── Klasa podwojona (.uk-card-body.uk-card-body) daje specyficzność 0,2,0, czyli więcej niż .uk-card-body motywu, i wystarcza bez !important oraz bez podpierania się ID. Wcześniej ta reguła stała w ms-legacy.css jako #tm-main .uk-card-body i obowiązywała tylko poniżej 960px. Przez ID pomijała stopkę, która leży poza #tm-main — karta „zebraliśmy" miała przez to 25px, gdy pozostałe miały 14px. Teraz łapie wszystkie karty na stronie. */ .uk-card-body.uk-card-body { padding: var(--ms-card-pad); } /* Selektor musi być mocniejszy niż motywowy `.uk-subnav-pill > * > :first-child` (specyficzność 0,2,1), który ustawia padding 5px 10px. Sama klasa zakładki przegrywała z nim i reguła nie miała żadnego efektu. */ .uk-subnav-pill > * > .fs-switcher__nav-item-link, .fs-switcher__nav .fs-switcher__nav-item-link { align-items: center !important; box-sizing: border-box !important; display: flex !important; height: var(--ms-control-h) !important; justify-content: center !important; line-height: normal !important; min-height: var(--ms-control-h) !important; padding-bottom: 0 !important; padding-top: 0 !important; } /* ── Pola i przyciski motywu też słuchają wspólnej zmiennej ────────────── Motyw ustawia `.uk-input, .uk-select { height: 47px }` na sztywno w theme.1.css. Dopóki tego nie przejmiemy, zmiana --ms-control-h ruszała zakładki i kontrolki wtyczki, ale pola i przyciski zostawały na 47px — czyli „jedno miejsce sterowania" byłoby nieprawdą. Wykluczenia są celowe: uk-button-small / -large — mają być mniejsze albo większe z zamysłu uk-button-text — to link udający przycisk, bez tła i ramki uk-icon-button — kwadratowa ikona (36px), siedzi wewnątrz pola Textarea świadomie pominięta: ma rosnąć z treścią. */ .uk-input, .uk-select:not([multiple]):not([size]), .uk-button:not(.uk-button-small):not(.uk-button-large):not(.uk-button-text):not(.uk-icon-button) { box-sizing: border-box; height: var(--ms-control-h); } /* ── Ramka a wyśrodkowanie napisu ──────────────────────────────────────── Paleta YOOtheme ma button-line-height 45px, czyli tyle co CAŁA wysokość przycisku. Ale ramka (button-border-width 3px) zabiera 6px, więc na tekst zostaje 39px. Napis liczony na 45px w przestrzeni 39px schodzi w dół. Zmierzone na „Rozwiń listę" przed poprawką: tekst 14,5px od górnej krawędzi i 9px od dolnej, czyli 5,5px za nisko. Przyciski z serduszkiem tego nie odczuwały, bo mają układ flex, który centruje niezależnie od line-height — dlatego wada była widoczna tylko na części przycisków. Odejmujemy ramkę z obu stron. Nie ruszamy display, żeby nie zmienić szerokości ani zawijania żadnego przycisku w portalu. UWAGA: --ms-btn-border musi się zgadzać z button-border-width w palecie. Zmieniasz ramkę w Customizerze → zmień tutaj tę jedną liczbę. */ .uk-button:not(.uk-button-small):not(.uk-button-large):not(.uk-button-text):not(.uk-icon-button) { line-height: calc(var(--ms-control-h) - 2 * var(--ms-btn-border)); } /* Przycisk „Wpłać darowiznę" w checkoucie dostaje z motywu padding 0 40px (reguła .woocommerce-checkout-review-order button w theme.1.css), która specyficznością bije .uk-button z jego 0 25px. Zmierzone: 40px na kroku 2 przy 25px w każdym innym miejscu. Wracamy do wartości z .uk-button. */ #place_order { font-size: var(--ms-btn-font); padding-left: var(--ms-btn-pad-x); padding-right: var(--ms-btn-pad-x); } /* Wcześniej poniżej 640px wiersz 2 dostawał trzeci rząd, bo pola billing rozjeżdżały się w słupek. Wizualizacja od grafika pokazuje je parami także na telefonie i tak jest teraz ustawione (patrz ms-frontend.css), więc liczba rzędów jest wszędzie taka sama. */ /* ── Kafelki uk-tile ───────────────────────────────────────────────────── Te dwie reguły mieszkały w ms-legacy.css, który ładuje się wyłącznie na stronach podopiecznych i checkoucie. Na zwykłych stronach (np. /kontakt/) kafelki nie dostawały ani zaokrąglenia, ani cienia, ani przycięcia zawartości do zaokrąglonych rogów. Przeniesione tutaj, bo ten arkusz idzie na cały front. */ .uk-tile { border-radius: 15px; box-shadow: 0 0 8px 0 rgba(108, 67, 97, 0.15); } .uk-tile-default.uk-tile { overflow: hidden; } /* ══════════════════════════════════════════════════════════════════════ STANDARD PRZYCISKU Z SERDUSZKIEM — JEDNO MIEJSCE NA CAŁY PORTAL ══════════════════════════════════════════════════════════════════════ Przedtem ten sam przycisk „Wpłać darowiznę" wyglądał inaczej w każdym miejscu, bo opisywały go TRZY osobne reguły w dwóch plikach: lista zbiórek font 24px, czerwień #d61836, serce absolutnie na 17px pasek sticky font 16px, czerwień #df1238, serce absolutnie na 17px karta wpłaty font 16px, czerwień #df1238, serce absolutnie na 22px checkout serce jako element flex, wyśrodkowane razem z tekstem Do tego reguła mobilna .tm-page .uk-button zerowała padding do 10px, więc na telefonie serce wchodziło w tekst — a ponieważ ms-legacy.css ładuje się jako ostatni, wygrywała z padding-left: 52px z frontendu. Teraz jest jeden mechanizm i jeden zestaw liczb. ── Dlaczego serce jest elementem flex, a nie position: absolute ────── Wersja absolutna wymagała trzech rzeczy naraz: position: relative na przycisku, padding-left na tyle duży, żeby tekst nie wszedł pod ikonę, oraz top: calc(50% - połowa ikony) do wyśrodkowania w pionie. Każda z nich mogła zostać nadpisana osobno i dokładnie to się działo. Jako element flex serce po prostu stoi obok tekstu: nie potrzebuje ani paddingu, ani pozycjonowania, ani liczenia pionu, a cała grupa serce plus napis jest wyśrodkowana sama z siebie. ── Jak dodać serduszko nowemu przyciskowi ─────────────────────────── Dopisz mu klasę ms-btn-heart (w YOOtheme: pole „Class" elementu). Nie trzeba dopisywać nic do tego pliku. ══════════════════════════════════════════════════════════════════════ */ :root { /* Czerwień przycisków. Jedna dla całego portalu. Wcześniej krążyły dwie: #d61836 z palety YOOtheme (strony treściowe, lista zbiórek) i #df1238 dodana przeze mnie w checkoucie. Zostaje ta z palety motywu. */ /* #d61836 to ta sama wartość co button-primary-background w palecie. Trzymamy ją tutaj wyłącznie dla elementów, które NIE są przyciskiem UIkit i przez to nie dostają koloru z palety: #place_order z WooCommerce oraz stary, ręcznie wklejany pasek sticky. */ --ms-btn-bg: #d61836; --ms-btn-bg-hover: #b91430; /* 30px to button-border-radius z palety. Przy przycisku wysokim na 45px przeglądarka i tak przycina promień do połowy wysokości, więc 30px i dawne 999px wyglądają identycznie — ale ta liczba zgadza się z paletą, więc zmiana w Customizerze będzie widoczna wszędzie. Zmienna jest potrzebna, bo #place_order z WooCommerce oraz stary pasek sticky nie są przyciskami UIkit i nic z palety nie dostają. */ --ms-btn-radius: 30px; /* = button-border-width z palety. Używane do odjęcia ramki przy wyśrodkowaniu napisu w pionie, patrz reguła line-height niżej. */ --ms-btn-border: 3px; /* = padding boczny z .uk-button w palecie. Trzymamy go jako zmienną, bo motyw sam sobie przeczy: .uk-button daje 0 25px, ale .woocommerce-checkout-review-order button daje 0 40px i wygrywa specyficznością. Przez to przycisk kroku 2 miał 40px, a każdy inny przycisk w portalu 25px. Reguła przywracająca jest niżej. */ --ms-btn-pad-x: 25px; /* Rozmiar liter w przycisku. 22px to button-font-size z palety, a wartość mobilna niżej, w bloku @media razem z paddingiem kart. Zmienna jest potrzebna z dwóch powodów: 1. na telefonie świadomie schodzimy poniżej palety, 2. motyw sam sobie przeczy — .uk-button ma 22px, ale .woocommerce-checkout-review-order button obniża do 16px i wygrywa specyficznością, przez co przycisk kroku 2 był mniejszy od reszty. Reguła #place_order niżej przywraca właściwą wartość. Zmieniasz button-font-size w Customizerze → popraw tutaj 22px. */ --ms-btn-font: 22px; --ms-heart-size: 23px; --ms-heart-gap: 12px; /* odstęp serce → napis */ --ms-heart-url: url(/wp-content/uploads/2021/03/serce_pomagam-biel.svg); } /* Lista przycisków niosących serduszko. Selektory są wypisane dwa razy (raz dla przycisku, raz dla ikony), bo CSS nie pozwala trzymać listy selektorów w zmiennej. Dodając nowe miejsce, dopisz je w OBU listach albo — prościej — nadaj elementowi klasę ms-btn-heart. */ /* ── Co ta reguła robi, a czego CELOWO nie robi ────────────────────────── Dokłada wyłącznie to, czego UIkit nie ma: układ flex z odstępem na ikonę. Wszystko inne bierze z palety YOOtheme, bo paleta jest źródłem, a ten plik ma tylko uzupełniać braki. Odczytane z palety tego portalu (theme_mods_yootheme): button-font-size 22px button-line-height 45px ← zgadza się z --ms-control-h button-border-radius 30px ← przy 45px daje pełną pigułkę button-border-width 3px button-primary-background #D61836 Stały tu wcześniej font-size, line-height i padding boczny, przez co przyciski z serduszkiem miały 16px zamiast 22px z palety, a zmiana rozmiaru w Customizerze nie dawała na nich żadnego efektu. Zdjęte: padding 0 25px i tak przychodzi z palety, a przy display:flex line-height nie ma wpływu na wysokość. Font na telefonie nadpisuje JEDNA reguła w ms-legacy.css (.tm-page .uk-button:not(.ms-amount-btn)), sterowana --ms-btn-font. */ .ms-btn-heart, .single_add_to_cart_button.button.alt, .okok a.uk-button.uk-button-primary, button#place_order, .uk-ms-sticky .ms-btn-submit, .ms-sticky-cta .ms-btn-submit, .ms-donation-amount-box .ms-btn-submit { align-items: center; display: flex; gap: var(--ms-heart-gap); justify-content: center; } .ms-btn-heart::before, .single_add_to_cart_button.button.alt::before, .okok a.uk-button.uk-button-primary::before, button#place_order::before, .uk-ms-sticky .ms-btn-submit::before, .ms-sticky-cta .ms-btn-submit::before, .ms-donation-amount-box .ms-btn-submit::before { animation: beatHeart2 1.8s infinite; background: var(--ms-heart-url) no-repeat center / contain; content: ""; /* flex: 0 0 auto — ikona nie może się skurczyć, gdy napis jest długi. */ flex: 0 0 auto; height: var(--ms-heart-size); width: var(--ms-heart-size); } /* Klatki animacji mieszkały w ms-legacy.css razem z martwym zestawem „heartbeat", którego nic nie używało. Przeniesione tutaj, żeby standard był kompletny w jednym pliku. */ @keyframes beatHeart2 { 0% { transform: scale(1); } 20% { transform: scale(1.1); } 30% { transform: scale(1); } 50% { transform: scale(1.1); } 70% { transform: scale(1); } 100% { transform: scale(1); } } /* ══════════════════════════════════════════════════════════════════════ ROZMIAR LITER W PRZYCISKU NA TELEFONIE ══════════════════════════════════════════════════════════════════════ Ten blok stoi na SAMYM KOŃCU pliku i to jest celowe. Zmienne CSS mają tę samą specyficzność, więc przy remisie wygrywa ta zapisana później. Gdy nadpisanie stało wyżej niż :root ze standardem przycisku, bazowe 22px kasowało je i na telefonie przyciski zostawały w rozmiarze z komputera. Zmieniasz tę jedną liczbę i schodzą wszystkie przyciski naraz: te z serduszkiem, „Rozwiń listę" oraz przycisk checkoutu. Komputer zostaje przy palecie YOOtheme. ══════════════════════════════════════════════════════════════════════ */ @media (max-width: 960px) { :root { --ms-btn-font: 16px; } } /* ══════════════════════════════════════════════════════════════════════ LICZNIK ZEBRANEJ KWOTY W STOPCE ══════════════════════════════════════════════════════════════════════ Szablon ustawia stopce `#footer#0 .el-meta { font-size: 55px }`. Na komputerze to wygląda dobrze, ale na telefonie kwota nie mieści się w karcie ani na ekranie. Zmierzone na 375px przy kwocie 60 921 953,75: szerokość napisu 351,7px szerokość kontenera 317px prawa krawędź 380,7px, czyli 5,7px POZA ekranem Reguła szablonu ma w selektorze ID, ale celuje w rodzica (.el-meta), a kwota siedzi w osobnym . Nadanie spanowi własnego rozmiaru bije zwykłe dziedziczenie, więc nie trzeba tu ani !important, ani podpierania się ID. clamp() zamiast sztywnej liczby, bo kwota rośnie z każdą wpłatą i za rok może mieć o cyfrę więcej. Przy 375px wychodzi 30px, czyli napis ma około 192px przy 317px miejsca — zapas starczy na kilka cyfr. Powyżej 688px szerokości ekranu wraca pełne 55px z szablonu. ══════════════════════════════════════════════════════════════════════ */ .footer-amount .ms-amount { font-size: clamp(30px, 8vw, 55px); } /* ══════════════════════════════════════════════════════════════════════ NAGŁÓWEK MOBILNY — tytuł nie nachodzi na logo ani na hamburger ══════════════════════════════════════════════════════════════════════ Zmierzone na 375px, zbiórka „Oliwier, Tatiana, Amelia Lewandowscy": logo (.uk-navbar-left) 35 → 91,9 tytuł (.uk-navbar-center) 17,6 → 357,4 ← nachodzi hamburger (.uk-navbar-right) 310 → 340 Tytuł zaczynał się PRZED logo (kolizja 74,3px) i kończył pod hamburgerem. Przyczyna leży w UIkit: .uk-navbar-center ma position: absolute i jest wyśrodkowany względem CAŁEGO paska (left: 50% plus transform), więc nie wie nic o sąsiadach. Przy krótkim tytule to nie przeszkadza, przy długim wjeżdża na oba. Tytuł skracamy do dwóch linijek. Pełna nazwa i tak stoi w nagłówku H1 na samej stronie, więc nic nie ginie. Dotyczy wyłącznie nagłówka mobilnego (.tm-header-mobile), więc układ na komputerze zostaje nietknięty. ══════════════════════════════════════════════════════════════════════ */ /* WYCOFANE 2026-08-17: wpinanie środka navbara w układ flex (position: static, flex: 1 1 auto). Kolizja faktycznie znikała, ale logo kurczyło się z 56,9px do 29,9px — ściskał się sam obrazek, więc flex: 0 0 auto na kolumnie tego nie cofało. Za duża ingerencja jak na jeden przypadek długiego tytułu. Zostawiamy centrowanie UIkit i ograniczamy tylko szerokość środka. Wyliczenie 190px (navbar ma 345px, środek na 187,5px): środek zaczyna się na 187,5 − W/2, musi minąć logo (92px) → W < 191 środek kończy się na 187,5 + W/2, musi minąć hamburger (310) → W < 245 Ciaśniejszy z warunków daje 190px. Powyżej tej szerokości tytuł zawija się do drugiej linijki zamiast wchodzić na sąsiadów. :not(:only-child) powtórzone za UIkit — bez tego selektory mają tę samą specyficzność (0,2,0), a theme.1.css ładuje się po tym pliku i wygrywa remis. Zmierzone: reguła bez tego nie dawała żadnego efektu. */ .tm-header-mobile .uk-navbar-center:not(:only-child) { /* 170px, nie wyliczone 190px: przy 190 zostawał 0,6px odstępu od logo, czyli optycznie zero. 170 daje po 10px luzu z każdej strony. */ max-width: 170px; } .ms-smart-title-mobile { -webkit-box-orient: vertical; -webkit-line-clamp: 2; display: -webkit-box; line-height: 1.15; overflow: hidden; text-align: center; } /* ── Wpłaty ze skarbonki: stan obok daty ────────────────────────────── Wpłata z puszki jest widoczna od razu, ale do sumy zbiórki wchodzi dopiero po zaksięgowaniu w banku. Bursztyn = czeka, zieleń = policzone. Podpis siada obok daty, w tej samej linijce, mniejszym stopniem. */ .donation-item .date { align-items: center; flex-wrap: nowrap; gap: 6px; } .donation-item .date > span:first-child { white-space: nowrap; } .donation-item .ms-donation-info, .ms-donation-info { flex: 0 0 auto; line-height: 0; margin-left: 6px; } .ms-donation-info svg path { fill: currentColor; } .ms-donation-info svg circle { stroke: currentColor; } /* Strona podziękowania: wybrany kanał udostępniania (spotkanie 6.09.2026). Ten sam zielony co zaznaczone zgody w formularzu wpłaty. */ .ms-share-wybor .el-item > a { cursor: pointer; } .ms-share-wybor .el-item.ms-share-wybrany > a { border-color: #89AC43 !important; background-color: #F2F7E9 !important; box-shadow: 0 0 0 1px #89AC43 inset; } /* Kontakt: kolumna z mapą zwężała się po kliknięciu zakładki „Adres” (spotkanie 6.09.2026, zgłoszenie 15.08). Zmierzone przy 1440 px: wiersz 1240 px na „telefon”, 1175 px na „Adres”. Przyczyna: wiersz siedzi w kontenerze .uk-flex, więc jego szerokość szła za treścią aktywnej zakładki. Wiersz z przełącznikiem zawsze wypełnia kontener. */ .uk-container.uk-flex > .uk-grid.tm-grid-expand:has(.fs-switcher) { flex: 1 1 auto; min-width: 0; } /* Podziękowanie: „Udostępnij zbiórkę” przy ~1024 px łamało się na dwie linie i tekst wychodził poza przycisk o stałej wysokości 45 px. Jedna linia, czcionka i odstępy skalują się z szerokością (22 px na dużym ekranie jak dotąd). */ .ms-share-button a.el-content { white-space: nowrap; } @media (min-width: 960px) { /* Tylko obok zdjęcia, gdzie karta jest wąska. Na telefonie karta ma cały ekran. */ .ms-share-button a.el-content { font-size: clamp(16px, 1.75vw, 22px); padding-left: clamp(12px, 1.4vw, 25px); padding-right: clamp(12px, 1.4vw, 25px); } }