/** * fraction-compare.css — „Groszek czy orzech": porównanie dwóch frakcji * po parametrach doboru. * * Wymaga tokens.css i base.css. Wszystko pod prefiksem * .dc-fraction-compare__, nic stąd nie wycieka na cudze znaczniki. Jedyny * wyjątek to .dc-icon (rejestr), dostrajana wyłącznie w selektorze potomnym * pod prefiksem sekcji. * * BEZ OBWÓDKI .dc-ring — makieta nie rysuje jej tu w żadnej z dwóch wersji * (inaczej niż w reviews-summary i first-burn na tej samej stronie). * Warstwy, której nie ma w makiecie, nie dokładamy; reguła 21 rozstrzyga * spór o ZAPIS obwódki, a nie o jej obecność. * * JEDEN UKŁAD, NIE DWA. Sekcja jest prawdziwą tabelą (reguła 19 — patrz * docblock fraction-compare.php) wyświetlaną ZAWSZE jako dwie karty obok * siebie, po jednej na frakcję. Do 2026-08-30 miała drugi, tabelaryczny * układ powyżej zmierzonego progu 1200 px; próg zdjęty, bo szeroka tabela * z dwoma wierszami zdań czytała się jak arkusz, a nie jak wybór. * Konstrukcja pozostaje ta sama, co pod progiem w origin.css: * chowany wzrokowo, jako siatka kart, jako karta, etykieta * kolumny przy każdej wartości z atrybutu data-label. * * CO ZNIKŁO RAZEM Z PROGIEM: blok @media, proporcje torów liczone * z długości najdłuższej wartości i przepisana wprost technika .dc-sr-only. * Ostatnia wraca do base.css: bez warunku medialnego wystarczy klasa * .dc-sr-only na (reguła 8 — utility użyte bez modyfikacji), więc * w tym pliku nie ma już ani jednej wartości spoza tokenów. */ /* ========================================================================== 1. NAGŁÓWEK SEKCJI Wyśrodkowany i ograniczony do 640 px — --dc-measure-lg trafia w makietę dokładnie. Odstęp pod nagłówkiem 36 -> --dc-space-32. ========================================================================== */ /* .dc-fraction-compare nie ma tu żadnej deklaracji — szerokość i marginesy boczne daje .dc-container, pionowy oddech .dc-section, obie z base.css bez modyfikacji (reguła 8). Klasa zostaje w znaczniku jako nazwa bloku. */ .dc-fraction-compare__header { max-width: var(--dc-measure-lg); margin-inline: auto; margin-block-end: var(--dc-space-32); text-align: center; } /* Nadtytuł: jedna czwórka z design-audit.md C.8 (partia 6) — 12 / 600 / --dc-tracking-widest, odstęp 14 do h2 (makieta ma 12, scalone). Kolor --dc-accent-strong, nie --dc-accent-text: złoty TEKST niosący znaczenie bierze wariant o wyższym kontraście (reguła J). */ .dc-fraction-compare__eyebrow { margin-block-end: var(--dc-space-14); font-size: var(--dc-text-sm); font-weight: var(--dc-weight-medium); letter-spacing: var(--dc-tracking-widest); text-transform: uppercase; color: var(--dc-accent-strong); } /* Makietowe clamp(28px, 3.4vw, 38px) to --dc-display-4 co do pasma (clamp(26px, 3.2vw, 34px); sufit 38 jest jednym z trzech, które ten token scala). Krój, waga i trakt przychodzą z base.css. */ .dc-fraction-compare__heading { font-size: var(--dc-display-4); } /* ========================================================================== 2. STRUKTURA TABELI jest SIATKĄ KART, pojedynczą kartą. display: grid na elementach tabeli zachowuje semantykę table/row/cell dla czytnika ekranu — sprawdzone snapshotem dostępności — a jednocześnie pozwala ułożyć wiersze obok siebie. Ta sama technika co w origin.css. Samo zostaje z domyślnym display: table, a wypada z toku przez .dc-sr-only, więc siatka nie musi go omijać. Siatka bez breakpointu (reguła 9): makietowe minmax(320px) trafia w --dc-grid-min-lg co do piksela, odstęp 22 w --dc-space-22. min(..., 100%) chroni przed przepełnieniem przy 390 px — sam auto-fit zwija liczbę kolumn, nie ich minimalną szerokość. ========================================================================== */ .dc-fraction-compare__table { width: 100%; } .dc-fraction-compare__table tbody { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(var(--dc-grid-min-lg), 100%), 1fr)); gap: var(--dc-space-22); } /* ========================================================================== 3. KARTA FRAKCJI (wiersz tabeli) Scalenia z makiety: promień 22 trafia w --dc-radius-22 bez scalania, padding 34 -> --dc-space-32, tło .62 -> --dc-surface-glass (.86; skala .5/.86 — mocniejsze szkło, bo karta niesie listę, nie pojedynczy akapit), szkło blur(36) saturate(190%) = --dc-blur-xl co do cyfry, obwódka biel .7 -> --dc-border-subtle, cień 0 16px 44px .14 -> --dc-shadow-lg + inset .95 -> --dc-shadow-inset-top (reguła 13). Cień o stopień NIŻSZY niż panel sekcji (--dc-shadow-lg, nie -xl): to karta rzędu drugiego, a nie panel — design-audit.md, C.4. align-content: start — treść zbiera się u góry, więc karta z krótszymi wartościami nie rozciąga swoich wierszy, tylko kończy się wcześniej. Wysokość i tak wyrównuje siatka, bo oba są w tym samym rzędzie. NAJAZD KURSOREM ZDJĘTY. Makieta unosi kartę o 6 px i pogłębia cień. Dwa powody, oba twarde: design-audit.md C.2 (hover to wyłącznie kolor, zero translate — uniesienie zniknęło w partii 1 audytu ze wszystkich sekcji, które je miały) oraz reguła 14: karta nie jest odnośnikiem, klikalny jest w niej wyłącznie odnośnik wyboru, więc reakcja całej karty na kursor obiecywałaby kliknięcie, którego nie ma. ========================================================================== */ .dc-fraction-compare__table tr { display: grid; align-content: start; padding: var(--dc-space-32); border: var(--dc-border) solid var(--dc-border-subtle); border-radius: var(--dc-radius-22); background-color: var(--dc-surface-glass); -webkit-backdrop-filter: var(--dc-blur-xl); backdrop-filter: var(--dc-blur-xl); box-shadow: var(--dc-shadow-lg), var(--dc-shadow-inset-top); } /* ========================================================================== 4. NAGŁÓWEK KARTY — NAZWA FRAKCJI I ROZMIAR ZIARNA Nazwa po lewej, plakietka rozmiaru przy prawej krawędzi karty (space-between), odcięte od listy parametrów cienką linią — jak w makiecie. ========================================================================== */ /* font-weight: 400 na samej komórce — przeglądarka domyślnie pogrubia , który czytnik ekranu widzi niezależnie od tego, jak wygląda karta. Wartość po prawej i pogrubiona, etykieta po lewej i przygaszona — układ z makiety. align-items: baseline, żeby dwuwierszowa wartość („zasypowy, piec kaflowy, koza") równała się z etykietą pierwszym wierszem, a nie środkiem. Scalenia: 13,5 px etykiety -> --dc-text-base, 14 px wartości -> --dc-text-md, padding 12 -> --dc-space-12, odstęp 14 -> --dc-space-14. ========================================================================== */ .dc-fraction-compare__cell--value { display: flex; align-items: baseline; justify-content: space-between; gap: var(--dc-space-14); padding-block: var(--dc-space-12); border-block-end: var(--dc-border) solid var(--dc-border-line); font-size: var(--dc-text-md); font-weight: var(--dc-weight-bold); line-height: var(--dc-leading-snug); text-align: right; color: var(--dc-text); } .dc-fraction-compare__cell--value::before { content: attr(data-label); flex: none; font-size: var(--dc-text-base); font-weight: var(--dc-weight-medium); text-align: left; color: var(--dc-text-subtle); } /* Ostatni parametr nie dostaje linii — pod nim jest już odnośnik wyboru, a dwie kreski jedna nad drugą zrobiłyby z niego stopkę karty. Selektor pyta o NASTĘPNIKA, a nie o :last-of-type. Powód jest konkretny i kosztował jeden render: komórka wyboru też jest
, a pogrubienie ma nieść wyłącznie nazwa frakcji w środku. Ten sam reset co w origin. Odstęp pod nagłówkiem 18 -> --dc-space-18. */ .dc-fraction-compare__cell--name { display: flex; align-items: center; justify-content: space-between; gap: var(--dc-space-12); padding-block-end: var(--dc-space-18); margin-block-end: var(--dc-space-6); border-block-end: var(--dc-border) solid var(--dc-border-line); font-weight: 400; text-align: left; } /* Makietowe 24 px / 800 trafiają w --dc-text-6xl i --dc-weight-black bez scalania; trakt -.01em to --dc-tracking-snug. */ .dc-fraction-compare__name { font-family: var(--dc-font-display); font-size: var(--dc-text-6xl); font-weight: var(--dc-weight-black); letter-spacing: var(--dc-tracking-snug); color: var(--dc-text); } /* Plakietka rozmiaru — jeden przepis tagu złotego z design-audit.md C.8: wysokość 26 (-> --dc-space-28), promień pigułki, a10 + 1 px a30, 10 / 700 / --dc-tracking-wide, --dc-accent-strong. Makieta miała tu DWA wyglądy tej samej rzeczy: pełne złoto z ciemnym tekstem przy groszku i czarną pigułkę ze złotym tekstem przy orzechu. C.8 dopuszcza jeden wygląd na rodzaj, a pełne złoto jest w systemie zarezerwowane dla flagi „bestseller" — rozmiar ziarna nie wyróżnia przecież jednej frakcji nad drugą, więc obie dostają identyczną plakietkę. BEZ text-transform: uppercase — jedyne odstępstwo od przepisu tagu. Wersaliki są w nim dla SŁÓW („SEZONOWE", „CERTYFIKAT"). Tutaj treścią jest symbol jednostki, a „8–25 MM" to nie ta sama jednostka co „8–25 mm" — megametr zamiast milimetra — i czyta się jak literówka. Trakt i waga zostają, bo one kształtu jednostki nie zmieniają. */ .dc-fraction-compare__size { display: inline-flex; flex: none; align-items: center; height: var(--dc-space-28); padding-inline: var(--dc-space-10); border: var(--dc-border) solid var(--dc-accent-a30); border-radius: var(--dc-radius-pill); background-color: var(--dc-accent-a10); font-size: var(--dc-text-2xs); font-weight: var(--dc-weight-bold); letter-spacing: var(--dc-tracking-wide); white-space: nowrap; color: var(--dc-accent-strong); } /* ========================================================================== 5. WIERSZ PARAMETRU — ETYKIETA I WARTOŚĆ Etykieta to CSS-owy ::before z atrybutu data-label — czysto wizualne dopowiedzenie: prawdziwe powiązanie wartości z nazwą parametru niesie już w
, więc `td:last-of-type` trafia w NIĄ, a nie w ostatni parametr — linia zostawała na swoim miejscu. :has(+ …) mówi wprost to, o co chodzi: „parametr, po którym stoi wybór". Ten sam selektor jest już w projekcie przy stanie błędu pola (design-audit.md, partia 6). */ .dc-fraction-compare__cell--value:has(+ .dc-fraction-compare__cell--choice) { border-block-end: none; } /* ========================================================================== 6. ODNOŚNIK WYBORU — DÓŁ KARTY Własna komórka („Wybór"), ostatnia w wierszu, więc w karcie ląduje na dole sama z siebie (patrz docblock fraction-compare.php). Odnośnik z grotem wg reguły 22: rusza się sam grot, obrys nie rośnie. ========================================================================== */ .dc-fraction-compare__cell--choice { margin-block-start: var(--dc-space-16); text-align: left; } .dc-fraction-compare__link { display: inline-flex; align-items: center; gap: var(--dc-space-8); padding-block-end: var(--dc-space-2); border-block-end: var(--dc-border-heavy) solid var(--dc-accent); font-family: var(--dc-font-display); font-size: var(--dc-text-lg); font-weight: var(--dc-weight-bold); color: var(--dc-text); text-decoration: none; transition: gap var(--dc-duration-base) var(--dc-ease); } .dc-fraction-compare__link:hover { gap: var(--dc-space-14); } /* Ujemny margines o różnicę gapów, w tym samym przejściu — bez niego obrys odnośnika rośnie o 6 px, a o tym, w którą stronę, decyduje wyrównanie rodzica, nie CSS odnośnika (reguła 22, pomiar z 2026-08-30). */ .dc-fraction-compare__link .dc-icon { transition: margin-inline-end var(--dc-duration-base) var(--dc-ease); } .dc-fraction-compare__link:hover .dc-icon { margin-inline-end: calc(var(--dc-space-8) - var(--dc-space-14)); } /* Wzmianka zamiast odnośnika na karcie tej właśnie frakcji. Stoi w tej samej komórce co odnośnik, więc obie karty kończą się na tej samej wysokości, choć jedna z nich nie ma dokąd prowadzić. */ .dc-fraction-compare__current { display: inline-block; font-size: var(--dc-text-base); color: var(--dc-text-subtle); }