/** * Lukuro Reviews - Styles * * Arkusz cytuje WYLACZNIE nazwy `lukuro-*` - tak samo jak znaczniki, odkad warstwa * dual-class zeszla w `v2.31.0` (plan REV-STD-001). Do tego wydania renderer wypisywal * obok kazdej klasy jej stara nazwe z prefiksem pierwszego klienta; byl to zaczep dla * custom CSS konsumenta, nigdy dla tego pliku. * * KONTRAKT ZNACZNIKOW (2026-08-24). Ten arkusz NIE maluje przyciskow ani pol formularza - * robi to motyw, przez klasy `bricks-button` i `woocommerce-Input ... input-text`, ktore * wypisuje renderer. Reguly ponizej, ktore duplikuja wyglad kontrolki motywu, stoja * w `:where()`, czyli maja specyficznosc ZERO: witryna z Advanced Themerem wygrywa z nimi * bez `!important` i bez zaleznosci od kolejnosci enqueue, a witryna bez AT dostaje z nich * poprawny wyglad. Ten sam wzorzec niesie `trainings-account.css` po SZKOL-010. * * Zmierzone na instancji mitoterapii 2026-08-24 i wazne przy kazdej kolejnej powierzchni: * kontrolki na `/moje-konto/odzyskiwanie-hasla/` czerpia czesc wygladu (padding 14,16/28,12, * stopien 18,94 px, promien pola 13,33 px) z reguly `html .login-card .woocommerce-Button`, * czyli z KLASY GLOBALNEJ TEJ WITRYNY, ktora Bricks emituje wylacznie na tamtej stronie. * Tych wartosci nie da sie odziedziczyc na endpoincie wirtualnym i nie wolno ich cytowac - * dlatego fallback ponizej odtwarza je ze SKALI AT, nie z wartosci tamtej witryny. */ @layer lukuro.modules { /* Lokalne tokeny opinii wskazuja na globalna warstwe semantyczna (lukuro-tokens.css). Dark mode NIE jest jeszcze dowieziony: sloty to umozliwiaja, ale drugiego zestawu wartosci ani przelacznika w tej wersji nie ma. */ :root { /* Kolor marki w dwoch rolach: `primary` jako TLO przyciskow i granica, `primary-text` jako TRESC (hover odnosnikow, link oceny) - jeden token nie obsluzy obu, bo kolor dobrany pod tlo daje jako tekst 1.58:1. */ --lukuro-reviews-primary: var(--lukuro-color-primary, #111); --lukuro-reviews-primary-text: var(--lukuro-color-primary-text, #111); --lukuro-reviews-primary-hover: var(--at-primary-l-1, #059669); /* Gwiazdki: 3.80:1 wobec tla i 3.40:1 wobec gwiazdki pustej. Ocena niesie informacje (ile wypelnionych), wiec podlega SC 1.4.11 i nie moze opierac rozroznienia na samym odcieniu. Bazowy zolty dawal 1.06:1 wobec pustej. */ --lukuro-reviews-star-color: var(--lukuro-color-star, #b8952a); --lukuro-reviews-star-empty: var(--lukuro-color-star-empty, rgba(0, 0, 0, .05)); --lukuro-reviews-border: var(--lukuro-color-hairline, #e0e0e0); --lukuro-reviews-text: var(--lukuro-color-text, #222); --lukuro-reviews-text-muted: var(--lukuro-color-text-muted, #666); --lukuro-reviews-btn-default: var(--lukuro-color-text-muted, #666); --lukuro-reviews-success: var(--lukuro-color-success, #11b76b); /* Rola TEKSTOWA sukcesu, osobna od wypelnienia (2026-08-26). Slot wyzej opisuje kolor PLASZCZYZNY - u konsumenta zwykle zielen palety motywu - i jako pismo schodzi ponizej progu: na mitoterapii dawal 1,85:1 przy wymaganych 4,5:1, mimo ze liczba w komentarzu nizej mowila 7,20:1. Ta liczba dotyczyla FALLBACKU pakietu, ktory dziala wylacznie tam, gdzie konsument slotu nie podpial - czyli nigdzie u nas. Fallback tutaj to zielen Bricksa przyciemniona do 62% (ten sam ton, 6,08:1 na bieli, 5,39:1 na tincie 12%). */ --lukuro-reviews-success-text: var(--lukuro-color-success-text, #0a7041); /* Oba stany sa uzywane jako `color:`, wiec licza sie pod role tekstowa: 6.86:1 (blad) i 6.08:1 (sukces) na bieli. UWAGA - te liczby opisuja FALLBACKI pakietu i obowiazuja tylko tam, gdzie konsument nie podpial slotu. Podpiety slot moze byc dowolnie jasny: bazowe kolory stanow AT i palety Bricksa nadaja sie na wypelnienia, nie na tekst (`--bricks-text-success` daje 2.62:1). Dlatego sukces ma osobna zmienna tekstowa wyzej, a blad jej nie potrzebuje, bo slot `--lukuro-color-danger` u konsumentow prowadzi do czerwieni pisma, nie do wypelnienia. */ --lukuro-reviews-error: var(--lukuro-color-danger, #991b1b); /* Powierzchnie i krawedzie sekcji ida na kolor marki, a nie na neutralna szarosc. Powod nie jest estetyczny: witryna konsumenta i tak musiala to nadrobic wlasnym CSS-em (mitoterapia - 5 regul w Bricksie na `--at-space--*` i `--at-primary-t-6`), a te reguly Bricks emituje WYLACZNIE na stronach ze swoim elementem, wiec panel konta zostawal bez nich. Teraz niesie je arkusz modulu i dziala wszedzie. Tinta jest NIEPRZEZROCZYSTA (`color-mix` z powierzchnia, nie z `transparent`), zeby zagniezdzone odpowiedzi nie kumulowaly alfy i poziom czwarty nie robil sie ciemniejszy od pierwszego. Kontrast policzony na palecie mitoterapii (primary `#0ba1bf` na bieli -> tinta `rgb(231,246,249)`), bo to jedyna instalacja, na ktorej te wartosci daja sie zmierzyc: - tekst bazowy na tincie 7.66:1 (bylo 6.38:1 na `surface-alt` w 100%) AAA - tekst stonowany na tincie 5.57:1 (bylo 4.30:1, czyli PONIZEJ AA 4.5:1) AA Zmiana wiec kontrast POPRAWIA, a jedna pozycje wyciaga z niezdania. */ --lukuro-reviews-surface: var(--lukuro-color-surface, #fff); /* Tlo dymka odpowiedzi. Idzie na NEUTRALNA SZAROSC, nie na kolor marki (decyzja usera 2026-08-24: "tlo odpowiedzi jasniejsze i w szarosc bardziej a nie w primary"). Wczesniej bylo to 4% marki, czyli `#f5fbfc` na palecie mitoterapii - delikatne, ale wciaz turkusowe, przez co dymek czytal sie jako element firmowy zamiast jako tlo cudzej wypowiedzi. Mieszanka idzie z KOLOREM TEKSTU, a nie z ustalonym szarym: dzieki temu dziala w obie strony motywu. Na jasnym daje `#fbfbfb`, na ciemnym rozjasnia powierzchnie zamiast ja przyciemniac - gdyby stala tu wartosc `#fbfbfb`, w trybie ciemnym dymek bylby biala plama. Tinta zostaje NIEPRZEZROCZYSTA (`color-mix` z powierzchnia, nie z `transparent`), zeby zagniezdzone odpowiedzi nie kumulowaly alfy i poziom czwarty nie robil sie ciemniejszy od pierwszego. 2%, a nie 3%: przy 3% wychodzi `#f8f8f8`, czyli tlo CIEMNIEJSZE niz poprzednie `#f5fbfc` (jasnosc wzgledna 0,9409 wobec 0,9544), a user prosil o jasniejsze. 2% daje `#fbfbfb` i jasnosc 0,9626, czyli realnie wyzej niz punkt wyjscia. Kontrast ZMIERZONY na instancji po zmianie (nie policzony z zalozen): tlo dymka wychodzi `#fbfcfc` przy jasnosci wzglednej 0,9685 wobec 0,9544 poprzedniej tinty, czyli realnie jasniej. Tekst bazowy na dymku **14,93:1** (AAA), tekst stonowany **5,99:1** (AA). Sam dymek wobec bialej karty daje 1,03:1 - to celowo malo, bo dymek ma odcinac sie ksztaltem i wcieciem, a nie kontrastem plaszczyzn. Token niesie JEDNA role - tlo dymka - i nic wiecej go nie uzywa. */ --lukuro-reviews-tint: color-mix(in srgb, var(--lukuro-reviews-text, #222) 2%, var(--lukuro-reviews-surface, #fff)); /* Tlo POL DO PISANIA - formularza opinii, odpowiedzi i odpowiedzi zagniezdzonej. Trzy powierzchnie, jedna rola, wiec jedna wartosc: marka sprowadzona do 3% (decyzja usera 2026-08-26; wczesniej 6% - za ciezko jak na plaszczyzne, ktora ma wylacznie powiedziec "tu sie pisze"). To NIE jest `--lukuro-trainings-tint` - tamta zyje w module szkolen i liczy sie z `surface-alt`, ta z koloru marki. */ --lukuro-reviews-tint-soft: color-mix(in srgb, var(--lukuro-reviews-primary, #0ba1bf) 3%, var(--lukuro-color-surface, #fff)); /* Tlo CALEJ SEKCJI, gdy stoi jako karta (`lukuro-reviews--framed`, opcja, patrz koniec pliku). Sekcja jest POJEMNIKIEM, wiec bierze czysta powierzchnie, a nie tinte (decyzja usera 2026-08-26). Byla po drodze wersja z tinta (tekst 5%, zmierzone `#f5f6f7`, biala karta na tym 1,080:1) i zostala odrzucona z tego samego powodu, dla ktorego BIALY jest pojemnik modulu w szkoleniach: odcien niosa juz karty W SRODKU, wiec drugi odcien pod nimi robi z ekranu trzy warstwy tla zamiast jednej. Granice sekcji niesie ramka i wypelnienie, nie plaszczyzna. Token zostaje mimo tego, ze dzis oddaje sama powierzchnie: to jest SLOT tla sekcji. Konsument, ktory chce ja podbarwic, ma jedno miejsce do przestawienia i nie musi przepisywac reguly z `@media`. Nazwa NIE zawiera slowa "tint" wlasnie dlatego - token o nazwie `-tint-*` trzymajacy czysta biel klamalby przy pierwszym czytaniu, a arkusz ma juz dwa prawdziwe tinty (`-tint` dymka i `-tint-soft` pol do pisania) i nie potrzebuje trzeciego pozornego. */ --lukuro-reviews-section-bg: var(--lukuro-reviews-surface, #fff); --lukuro-reviews-border-brand: color-mix(in srgb, var(--lukuro-reviews-primary, #0ba1bf) 10%, transparent); --lukuro-reviews-rule: color-mix(in srgb, var(--lukuro-reviews-primary, #0ba1bf) 20%, transparent); /* Awatar ma DWA rozmiary w calej sekcji i sa one tokenem, bo geometria lacznika watku liczy sie z nich: pion lacznika stoi w osi awatara RODZICA. */ --lukuro-reviews-avatar: 32px; --lukuro-reviews-avatar-lg: 44px; /* Lacznik watku (wzorzec dyskusji). `elbow` to poziomy zasieg luku, czyli odleglosc od osi awatara rodzica do lewej krawedzi awatara odpowiedzi; z niej wylicza sie TAKZE wciecie kazdego poziomu, wiec obie rzeczy zmieniaja sie jedna wartoscia. */ --lukuro-reviews-elbow: 22px; /* Odstep w watku. Ta sama wartosc musi byc marginesem kontenera odpowiedzi, odstepem miedzy rodzenstwem I wzniosem luku - inaczej miedzy koncem pionu a poczatkiem luku zostaje przerwa dokladnie tej roznicy. Jedna zmienna zamyka to raz na zawsze. */ --lukuro-reviews-thread-gap: var(--at-space--xs, 0.875rem); /* Odstep miedzy awatarem a dymkiem. Osobny token, bo wchodzi do arytmetyki lacznika: os pionu zagniezdzonego liczy sie jako "odstep + polowa awatara" wstecz od krawedzi `-main`. Zmierzone, gdy byly to dwie niezalezne wartosci: na waskim ekranie odstep schodzil o polowe, a pion zostawal na pelnej i mijal awatar o 6,4 px. */ --lukuro-reviews-avatar-gap: var(--at-space--xs, 0.875rem); /* Promien luku jest MNIEJSZY od jego zasiegu i to jest cala roznica miedzy linia, ktora plynie, a cwiartka kola. Przy promieniu rownym zasiegowi luk nie ma ani prostego odcinka pionowego, ani poziomego - wyglada jak naroznik, nie jak linia prowadzaca do awatara. Te wartosci zostawiaja 16 px pionu i 8 px dobiegu do awatara. */ --lukuro-reviews-connector-radius: 14px; /* Linia ma 1 px i barwe RAMKI KARTY OPINII (decyzja usera 2026-08-24). Odwolanie do tokenu, a nie powtorzona wartosc: gdyby ramka kiedys drgnela, lacznik poszedlby za nia zamiast zostac sam. Wczesniej lacznik jechal na 22% barwy marki i czytal sie jako element firmowy - wyrazniejszy niz ramka, ktora otacza cala karte. Na 10% schodzi w szarosc i staje sie tym, czym ma byc: cienkim wloknem struktury pod trescia. */ --lukuro-reviews-connector: var(--lukuro-reviews-border-brand); --lukuro-reviews-connector-w: 1px; --lukuro-reviews-radius: 12px; --lukuro-reviews-radius-s: 8px; /* Promien SEKCJI jako karty. Musi byc WIEKSZY od promienia kart opinii - ramka o tym samym promieniu wokol kart o tym samym promieniu czyta sie jak podwojna obwodka, a nie jak jedno w drugim. */ --lukuro-reviews-radius-l: 16px; /* Cien sekcji stojacej jako karta - CELOWO na granicy widocznosci (wymaganie usera 2026-08-26, po korekcie "bardziej delikatny"). Wartosc rowna tej, ktora niesie modul szkolen (`--lukuro-trainings-shadow`), bo obie powierzchnie stoja jedna pod druga na tym samym ekranie panelu konta i roznica byla by widoczna jako niedopatrzenie. Wlasny token, a NIE cytowanie tamtego: moduly sa niezalezne, opinie dzialaja bez szkolen i odwrotnie, wiec zapozyczona zmienna zniknelaby przy opt-oucie tamtego modulu. */ --lukuro-reviews-shadow: 0 1px 1px rgba(0, 0, 0, .02), 0 3px 8px rgba(0, 0, 0, .02); --lukuro-reviews-transition: all 0.2s ease; } /* Container */ /** * `display: block` i `width: 100%` NIE sa kosmetyka - to jedyne, co trzyma sekcje w kolumnie. * * Konsument osadza sekcje w rozmaitych opakowaniach i czesc z nich jest kontenerem flex. * Zmierzone na panelu szkolen: modul stawia sekcje w golym `
`, a Bricks stylizuje * goly `section` jako `display: flex; align-items: center`. Korzen stawal sie wtedy * KURCZACYM SIE elementem flex, wiec jego szerokosc byla funkcja wlasnej TRESCI, nie ukladu: * ta sama sekcja mierzyla 519,5 / 777,4 / 925,8 px na trzech powierzchniach i stala 129,7 px * (a na widoku szkolenia 258,7 px) w prawo od kazdego innego bloku strony. * * `display: block` odbiera tez status elementu flex DZIECIOM korzenia. Wczesniej naglowek * i formularz kurczyly sie do szerokosci wlasnej tresci (262,5 px i 277 px przy sekcji * 777,4 px), przez co kreska pod naglowkiem konczyla sie na 34% szerokosci sekcji, a lista * pod spodem byla wyrazne szersza. To sa objawy 1, 2 i 3 z audytu - wszystkie z tej przyczyny. * * `max-width` NIE nalezy tutaj. Szerokosc kolumny zna konsument, nie modul; sztywne 800 px * dokladalo czwarta szerokosc do trzech, ktore strona juz miala. */ .lukuro-reviews { display: block; width: 100%; font-family: inherit; color: var(--lukuro-reviews-text); } /* Header */ /* Naglowek NIE ma kreski pod soba (decyzja usera 2026-08-24) i to jest wartosc domyslna pakietu, a nie zdjecie ustawione u konsumenta. Kreska byla pierwotnie objawem nr 2 audytu: naglowek jako kurczacy sie element flex konczyl ja na 34% szerokosci sekcji (262,5 px wobec 777,4 px). Naprawa szerokosci z `ffa8d4d` sprawila, ze kreska szla juz przez cala kolumne - i wtedy okazalo sie, ze jest po prostu zbedna: sekcje od tresci nad nia odcina odstep, a same opinie sa kartami z wlasnymi krawedziami. `width: 100%` zostaje jako asekuracja na wypadek opakowania, ktore mimo wszystko ustawi korzen na flex - bez niej naglowek kurczylby sie do szerokosci tytulu i licznik odjechalby od prawej krawedzi kolumny. */ .lukuro-reviews-header { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; width: 100%; gap: var(--at-space--xs, 0.875rem); margin-bottom: var(--at-space--s, 1.25rem); } /* Tytul sekcji ma DOMYSLNIE barwe i grubosc naglowkow (decyzja usera 2026-08-24). Wczesniej bral `--lukuro-reviews-text`, czyli kolor tekstu ciaglego, i czytal sie jak akapit ustawiony wiekszym stopniem, a nie jak naglowek sekcji. `--at-primary-d-5` nie jest tu wyborem estetycznym, tylko odwzorowaniem KONTRAKTU MOTYWU: `bricks-base.css` ma globalna regule `h1, h2, h3, h4, h5, h6, .h1 ... { color: var(--at-primary-d-5) }`, wiec to jest barwa, ktora motyw daje kazdemu naglowkowi. Tytul sekcji jest `h3`, wiec bez wlasnej deklaracji dostalby ja sam - modul deklaruje ja jawnie tylko po to, zeby pakiet BEZ Advanced Themera nie zostal z kolorem tekstu ciaglego. Wczesniej stal tu `--at-neutral-d-5` i to byl blad: ten token daje `rgb(30, 35, 35)`, podczas gdy naglowki motywu renderuja sie `rgb(2, 41, 49)` - zmierzone na powierzchni lekcji, czyli tam, gdzie nie stoi ani jedna regula custom CSS witryny. Zmylila mnie regula buildera u konsumenta, ktora dla tej sekcji uzywa tokenu neutralnego; ale ona opisuje wybor jednej witryny, a nie to, czym motyw rysuje naglowki. Grubosc jest literalem: AT nie ma tokenu wagi, a `--mito-heading--weight` to zmienna konkretnej witryny, na ktorej framework stac nie moze. `500` to wartosc, ktora ten token oddaje, i ta sama, ktora maja naglowki motywu (zmierzone). */ .lukuro-reviews-title { font-size: var(--at-text--l, 1.25rem); font-weight: 500; margin: 0; color: var(--at-primary-d-5, var(--lukuro-reviews-text, #222)); } /** * RYTM PODSUMOWANIA IDZIE SASIEDZTWEM, a nie marginesem konkretnego elementu (decyzja usera * 2026-08-26). W podsumowaniu moga stac trzy rzeczy i KAZDA jest warunkowa: tytul, zajawka * (`lede`) i statystyka (`show_summary`). Margines przypisany do jednej z nich rozjezdza sie * przy kazdej kombinacji, ktorej akurat nie sprawdzono. * * Zmierzone dwa razy, oba razy blednie, zanim regula trafila tutaj: * - margines na TYTULE, gdy nie bylo statystyki: wisial i odstep do formularza skladal sie * z dwoch zrodel - 8 px stad plus `--at-space--s` z naglowka, razem 28,00 px zamiast 20,00; * - ten sam margines po dolozeniu zajawki: trafial miedzy tytul a zajawke, a zajawka * przyklejala sie do gwiazdek na 0,00 px. * * `> :not(:last-child)` zamyka wszystkie kombinacje jedna regula: cokolwiek stoi w podsumowaniu, * dostaje odstep do NASTEPNEGO elementu, a ostatni nie dostaje nic - wiec odstep do tego, co * jest pod naglowkiem, niesie wylacznie `margin-bottom` naglowka. Jedno zrodlo, jak mialo byc. * * Warunek stoi w arkuszu, a nie w rendererze, i to jest wlasciwy podzial: renderer wypisuje * albo nie wypisuje kazdej z trzech rzeczy, ale to arkusz wie, co ich sasiedztwo znaczy * dla odstepow. */ .lukuro-reviews-summary > * { margin-block: 0; } .lukuro-reviews-summary > :not(:last-child) { margin-bottom: 0.5rem; } /* Zajawka sekcji. Marginesu WLASNEGO nie ma - rytm podsumowania niesie regula sasiedztwa wyzej. Stopien `--at-text--s` i kolor stonowany: to jest podpis pod tytulem, a nie tresc sekcji. `max-width` w jednostce `ch` liczy sie z SZEROKOSCI ZNAKU tego pisma, wiec wiersz zostaje czytelny takze wtedy, gdy konsument przestawi skale - inaczej niz `px`, ktore trzymaloby szerokosc kolumny, ale nie liczbe znakow w wierszu. */ .lukuro-reviews-lede { max-width: 65ch; color: var(--lukuro-reviews-text-muted); font-size: var(--at-text--s, 0.875rem); line-height: 1.5; } .lukuro-reviews-stats { display: flex; align-items: center; gap: 1rem; } .lukuro-reviews-average { display: flex; align-items: center; gap: 0.5rem; } /* Srednia ocena i licznik ida na skale AT (decyzja usera 2026-08-24) - byly ostatnimi wartosciami w naglowku sekcji na wlasnej skali arkusza (2rem i 0.875rem). WAGA JEST LITERALEM, a nie `var(--mito-heading--weight)`, mimo ze user podal wlasnie ten token. Powod jest kontraktowy: `--mito-*` to zmienna KONKRETNEJ witryny, a arkusz frameworka nie moze stac na czyms, czego u nastepnego konsumenta nie bedzie - to samo ustalenie, ktore zakazuje cytowania klas globalnych witryny. AT nie ma wlasnego tokenu wagi (sprawdzone na instancji: jest tylko `--at-mark-font-weight`, pusty), wiec zostaje liczba. `500` to dokladnie ta wartosc, ktora `--mito-heading--weight` oddaje na tej witrynie - efekt jest identyczny, zaleznosci nie ma. Kolor bierze `--at-neutral-d-5` z fallbackiem na wlasny token tekstu sekcji, zeby pakiet bez AT nie zostal z golym `inherit`. */ .lukuro-reviews-average-number { font-size: var(--at-text--l, 1.25rem); font-weight: 500; color: var(--at-neutral-d-5, var(--lukuro-reviews-text, #222)); } .lukuro-reviews-stars { display: flex; gap: 2px; } .lukuro-reviews-stars .star { font-size: 1.25rem; color: var(--lukuro-reviews-star-empty); } .lukuro-reviews-stars .star.filled { color: var(--lukuro-reviews-star-color); } .lukuro-reviews-count { color: var(--lukuro-reviews-text-muted); font-size: var(--at-text--s, 0.8125rem); } /** * Przycisk glowny. Wyglad nalezy do motywu (`bricks-button` + wariant `primary`); ponizsze * reguly sa WYLACZNIE fallbackiem dla witryny bez Advanced Themera, dlatego stoja * w `:where()`. Jeden selektor obsluguje wszystkie trzy role: otwarcie formularza, wysylke * opinii i wysylke odpowiedzi - kazda z nich nosi `lukuro-reviews__cta`. */ :where(.lukuro-reviews__cta) { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; min-height: 44px; padding: 10px 20px; border: none; border-radius: 999px; background: var(--lukuro-reviews-primary); color: var(--lukuro-color-on-primary, #fff); font-family: inherit; font-weight: 500; cursor: pointer; transition: opacity 0.15s ease; } :where(.lukuro-reviews__cta:hover) { color: var(--lukuro-color-on-primary, #fff); opacity: 0.88; } /* Stan wylaczenia zostaje regula o specyficznosci NIEZEROWEJ: motyw go nie zna, wiec nie ma z czym przegrywac, a przy `:where()` przegralby z wlasnym stanem bazowym wyzej. */ .lukuro-reviews button:disabled { opacity: 0.6; cursor: not-allowed; } /* Przegladarka bez JavaScriptu: formularz odslania regula w `