/** * Monazo SOT — style sekcji treściowych (kroki, FAQ, werdykt). * * Zasady spójne z widgetem: * - żadnego własnego font-family — typografia dziedziczy z motywu, * - wszystko zakresowane pod .mzc, żeby nie wyciekać na resztę strony, * - kontrolki odhaczania są ukryte, dopóki addon ich nie odsłoni. * * KOLORY POCHODZĄ Z `tokens.css`. Nazwy `--mzc-*` zostają jako aliasy, bo * konsumuje je 400 linii reguł niżej — przepisywanie ich wszystkich byłoby * zmianą bez wartości i z ryzykiem. Tryb ciemny działa automatycznie: tokeny * przełącza `data-scheme` na , a te aliasy tylko je przenoszą. */ .mzc { --mzc-ink: var(--mz-ink); --mzc-ink-soft: var(--mz-ink-soft); --mzc-muted: var(--mz-muted); --mzc-line: var(--mz-line); --mzc-line-soft: var(--mz-inset); --mzc-paper: var(--mz-paper); --mzc-green: var(--mz-green); --mzc-green-ink: var(--mz-green-ink); --mzc-green-wash: var(--mz-green-wash); --mzc-green-line: var(--mz-green-line); --mzc-amber-wash: var(--mz-amber-wash); --mzc-amber-line: var(--mz-amber-line); --mzc-amber-ink: var(--mz-amber-ink); --mzc-red-line: var(--mz-red-line); --mzc-red-ink: var(--mz-red-ink); --mzc-radius: var(--mz-radius-sm); /* Dołożone w 0.29.0 pod przycisk w werdykcie — te same wartości, których używa `.mz-sot .cta`. Mostek, nie nowa barwa: przestrzeń `.mzc` przepuszcza tokeny globalne pod własnymi nazwami, żeby treść nie zależała wprost od arkusza widgetu. */ --mzc-on-green: var(--mz-on-green); --mzc-inset: var(--mz-inset); margin: 1.6em 0; color: var(--mzc-ink); line-height: 1.6; } .mzc * { box-sizing: border-box; } /* Reset przycisków — odpowiednik `.mz-sot button` z arkusza widgetu. Bez niego motyw maluje `button:hover` (w trybie ciemnym na biało) i przycisk kodu przestawał być identyczny z tym w widgecie. Kolory interaktywne trzymamy pod kontrolą wtyczki po OBU stronach, inaczej ten sam element wygląda inaczej zależnie od tego, w którym szablonie stoi. */ .mzc button { color: inherit; background: none; border: 0; font-family: inherit; letter-spacing: normal; } /* Marginesy akapitów TYLKO w kontenerach treści redakcyjnej. Wcześniejsza reguła zbiorcza „.mzc p” miała wyższą specyficzność (klasa + element) niż reguły jednoklasowe i po cichu nadpisywała ich marginesy — m.in. tytuł kroku dostawał 12px od dołu i przestawał być wyśrodkowany w pionie względem checkboxa i plakietki. */ /* Marginesy dotyczą akapitów NAJWYŻSZEGO poziomu sekcji. Selektor z „>” jest tu istotny: akapit wewnątrz boxu (.mzc-note__body) ma własny margines 0 — bez tego box rozciągał się o dodatkowe 12px na dole. */ .mzc-p, .mzc-step__inner > p, .mzc-verdict__body > p, .mzc-faq__inner > p { margin: 0 0 1rem; } /* Box i jego treść: żadnych odziedziczonych marginesów w środku. */ .mzc .mzc-note__body { margin: 0; } .mzc-step__inner > :last-child, .mzc-verdict__body > :last-child, .mzc-faq__inner > :last-child { margin-bottom: 0; } /* ─────────────── Pasek postępu (odsłania go addon) ─────────────── */ .mzc-progress { background: var(--mzc-paper); border: 1px solid var(--mzc-line); border-radius: var(--mzc-radius); padding: 14px 16px; margin-bottom: 16px; } .mzc-progress__head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 10px; } .mzc-progress__label { font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--mzc-muted); } .mzc-progress__count { font-size: 14px; color: var(--mzc-ink); font-variant-numeric: tabular-nums; } .mzc-progress__track { height: 6px; border-radius: 999px; background: var(--mzc-line-soft); overflow: hidden; } .mzc-progress__fill { display: block; height: 100%; background: var(--mzc-green); border-radius: 999px; transition: width .25s ease; } .mzc-progress__hint { margin: 8px 0 0; font-size: 12.5px; color: var(--mzc-muted); } .mzc-progress__hint:empty { display: none; } /* ─────────────── Lista kroków ─────────────── */ /* Timeline: pionowa oś z numerami kroków po lewej stronie kart. */ .mzc-steplist { list-style: none; margin: 0; padding: 0 0 0 48px; display: flex; flex-direction: column; gap: 14px; position: relative; } .mzc-steplist::before { content: ""; position: absolute; left: 16px; top: 16px; bottom: 16px; width: 2px; background: var(--mzc-line); border-radius: 2px; } .mzc-step__num { position: absolute; left: -48px; top: 15px; z-index: 1; width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%; background: var(--mzc-green); color: var(--mz-on-green); font-weight: 700; font-size: 14.5px; line-height: 1; box-shadow: 0 0 0 4px var(--mzc-paper); } .mzc-step { position: relative; } .mzc-step__card { display: block; background: var(--mzc-paper); border: 1px solid var(--mzc-line); border-radius: var(--mzc-radius); padding: 18px 20px; transition: border-color .18s; } /* Odhaczony krok NIE zmienia tła — zielona płachta ciągnęła wzrok na to, co już zrobione, zamiast na następny krok. Stan niesie obwódka i tytuł. */ /* Odhaczony krok NIE zmienia ramki. Zielony kontur na całej karcie ciągnął wzrok do rzeczy już zrobionej — a lista kroków ma prowadzić do następnej. Sygnałem zostaje zielony tytuł (reguła niżej) i wypełniony kwadrat po lewej; tło zostaje, bo odróżnia kartę odhaczoną od tła strony. */ /* * Akcent w nagłówku sekcji kroków — JEDYNA reguła dotycząca tego nagłówka. * * Sam `

` nie ma klasy i nie dostaje od nas ani rozmiaru, ani wagi, ani * marginesów: to należy do motywu. Kolorujemy wyłącznie drugą część zdania, * bo to jest treść, nie forma — czytelnik ma zobaczyć, że dalej jest * instrukcja, a nie kolejny akapit. * * `color` dziedziczy resztę (rozmiar, krój, waga) z nagłówka, więc `` * nie potrzebuje niczego poza barwą. */ .mzc-steps__accent { color: var(--mzc-green); } .mzc-step[data-done="true"] .mzc-step__card { background: var(--mzc-paper); } .mzc-step__head { display: flex; align-items: center; gap: 11px; flex-wrap: nowrap; } .mzc-step__head::-webkit-details-marker { display: none; } .mzc-step--acc .mzc-step__head { cursor: pointer; list-style: none; } /* Elementy nagłówka wyrównujemy do środka wiersza — patrz reguła .mzc-step__head. */ .mzc-step__check { flex: none; align-self: center; appearance: none; background: none; border: 0; padding: 0; cursor: pointer; line-height: 0; } .mzc-step__box { display: block; width: 24px; height: 24px; border-radius: 7px; border: 2px solid var(--mz-line-2); background: var(--mzc-paper); transition: border-color .15s, background .15s; } .mzc-step__check:hover .mzc-step__box { border-color: var(--mzc-green); } .mzc-step__check:focus-visible .mzc-step__box { outline: 2px solid var(--mzc-ink); outline-offset: 2px; } /* Ptaszek jako MASKA, nie obrazek tła: obrazek niósł kolor wpisany na sztywno (biały), więc nie mógł pójść za `--mz-on-green`, który w trybie ciemnym jest ciemny. Maska maluje się kolorem tła elementu, czyli tokenem. Kształt z rodziny Monazo („potwierdzenie”), grubość 2.0 jak reszta ikon. */ .mzc-step[data-done="true"] .mzc-step__box { border-color: var(--mzc-green); background: var(--mzc-green); position: relative; } .mzc-step[data-done="true"] .mzc-step__box::after { content: ""; position: absolute; inset: 0; background: var(--mz-on-green); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.8 12.8l4.4 4.4 10-10.9'/%3E%3C/svg%3E") center / 15px 15px no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.8 12.8l4.4 4.4 10-10.9'/%3E%3C/svg%3E") center / 15px 15px no-repeat; } /* Tytuł zajmuje resztę wiersza i jest wyśrodkowany w pionie — przy jednej linii równo z checkboxem, przy dwóch nadal symetrycznie względem checkboxa i plakietki. */ .mzc-step__title { margin: 0; font-size: 17px; line-height: 1.35; font-weight: 700; /* basis 0 + grow = tytuł zajmuje CAŁĄ wolną szerokość wiersza niezależnie od długości tekstu; max-width/width neutralizują ewentualne limity z motywu. */ flex: 1 1 0; min-width: 0; max-width: none; width: auto; align-self: center; } /* * Tytuł odhaczonego kroku: zieleń STAŁA, jedna w obu motywach. * * `!important` jest tu decyzją, nie obejściem — dokładnie tym samym argumentem * co przy `.mzc-step__badge--warning` wyżej: to SYGNAŁ STANU (czytelnik widzi, * że ten krok ma odhaczony), nie element dekoracyjny. Sam token jest poprawny * w obu motywach, bo `--mz-green` celowo nie zmienia się w ciemnym; w jasnym * reguła wygrywała, w ciemnym przegrywała z regułą spoza tej wtyczki, malującą * akapity wyłącznie przy `data-scheme="dark"`. * * NIE podnosić tego przez `.mzc .mzc …` — patrz uwaga przy `.mzc-code__btn` * niżej: klasa `.mzc` NIGDY nie zagnieżdża się sama w sobie (każdy blok ma ją * na swoim kontenerze najwyższego poziomu), więc taki selektor nie pasuje do * niczego i reguła po cichu przestaje istnieć. */ .mzc-step[data-done="true"] .mzc-step__title { color: var(--mzc-green) !important; } /* Odstęp od tytułu jest stały; tytuł rośnie do pełnej dostępnej szerokości. */ .mzc-step__badge { flex: none; align-self: center; margin-left: 15px; font-size: 12px; padding: 4px 10px; border-radius: 10px; white-space: nowrap; } /* Plakietka kwoty: sam kontur. Wypełnienie zielenią konkurowało z checkboxem i przyciskiem CTA o uwagę w tym samym wierszu. */ .mzc-step__badge--money { background: transparent; border: 1px solid var(--mzc-green); color: var(--mzc-green); font-weight: 600; } /* Bez wypełnienia — tak samo jak `money` i `warning`. Wypełniona plakietka obok dwóch konturowych miała inny ciężar i wyglądała na aktywną. */ .mzc-step__badge--neutral { background: transparent; border: 1px solid var(--mzc-line); color: var(--mzc-muted); } /* * Wariant „ważne”: bursztyn STAŁY, jeden w obu motywach. * * `!important` na barwie i konturze jest tu decyzją, nie obejściem: tokeny * `--mzc-amber-*` ściemniają się razem z kartą w trybie ciemnym, a ta plakietka * ma zachować dokładnie ten sam odcień niezależnie od motywu — to ostrzeżenie, * nie element dekoracyjny. Bez `!important` reguła tokenowa wygrywała * kolejnością. * * Kontur bez wypełnienia, tak jak `money` i `neutral`, żeby trzy plakietki * obok siebie miały ten sam ciężar. */ .mzc-step__badge--warning { background: transparent; border: 1px solid #ffc000 !important; color: #ffc000 !important; font-weight: 600; } /* Typografia kroków: akapity 17px, listy o stopień mniej (16px). */ .mzc-step__body { font-size: 17px; } .mzc-step__inner > p { font-size: 17px; } .mzc-step__inner > .mzc-list { font-size: 15.5px; } .mzc-step__inner { padding-top: 12px; } .mzc-step--acc .mzc-step__body { overflow: hidden; } /* Prefiks `.mzc` PODNOSI SPECYFICZNOŚĆ: to akapit, więc selektor motywu `.entry-content p` (0,0,1,1) bił samą klasę (0,0,1,0) i narzucał swój rozmiar pisma. Ten sam zabieg co przy `.mzc .mzc-note__body`. */ .mzc .mzc-step__timing { display: inline-flex; align-items: center; gap: 7px; margin: 12px 0 0; font-size: 12px; color: var(--mzc-muted); background: var(--mzc-line-soft); border: 1px solid var(--mzc-line); border-radius: 10px; padding: 4px 10px; } /* ─────────────── Paleta klocków ─────────────── */ /* Bez przedrostka .mzc — sekcje tekstowe układu renderują listy poza wrapperem, a i tak muszą mieć punktory (panel WP oraz część motywów resetuje list-style). */ ul.mzc-list { list-style: disc; } ol.mzc-list { list-style: decimal; } .mzc-list { margin: 0 0 12px; padding-left: 22px; } .mzc-list li { margin-bottom: .5rem; } /* Numery i punktory w kolorze akcentu; treść pozycji zostaje w kolorze tekstu. */ .mzc-list li::marker { color: var(--mzc-green); font-weight: 500; } /* Odnośniki w treści — wygląd 1:1 z motywem, ustawiony WPROST (te same deklaracje co `.mz-sot a` w arkuszu widgetu; jeden link w całym serwisie). Wyłączone są przyciski CTA, bo to elementy interfejsu, nie odnośniki w zdaniu. LISTA WYJĄTKÓW MUSI ROSNĄĆ RAZEM Z PRZYCISKAMI. Selektor ma trzy `:not()`, czyli wagę (0,4,1) — bije każdą regułę przycisku zapisaną jako `.mzc a.klasa` (0,2,1). Nowy przycisk pominięty na tej liście dostanie wygląd odnośnika w zdaniu i żadna reguła obok tego nie naprawi. Tak wyszło w 0.29.2 z `.mzc-verdict__cta`. Wartości biorą zmienne motywu, każda z zapasem — kroki renderują się także w kreatorze w kokpicie, gdzie `--cs-*` nie istnieją. */ .mzc a:not(.mzc-cta):not(.mzc-btn):not(.mzc-btn-sot):not(.mzc-verdict__cta) { display: inline; padding-bottom: .1em; background: linear-gradient(to right, currentColor 0%, currentColor 98%); background-size: 100% 1px; background-repeat: no-repeat; background-position: var(--mz-link-pos); color: var(--mz-link-ink); font-size: inherit; /* `!important`, bo motyw ustawia wagę odnośników selektorem o wyższej specyficzności niż ten — a odnośnik ma wyglądać tak samo wszędzie. */ font-weight: 600 !important; text-decoration: none; transition: .25s; } .mzc a:not(.mzc-cta):not(.mzc-btn):not(.mzc-btn-sot):not(.mzc-verdict__cta):hover, .mzc a:not(.mzc-cta):not(.mzc-btn):not(.mzc-btn-sot):not(.mzc-verdict__cta):focus { background-size: 0 1px; color: var(--mz-link-ink); text-decoration: none; } .mzc-list .mzc-list { margin: 6px 0 0; } /* Notki bez konturu w OBU motywach: barwna obwódka na ciemnym tle rysowała się mocniej niż wypełnienie i box wyglądał na obramowany bez powodu. Wariant odróżnia samo tło. */ .mzc-note { border-radius: 10px; padding: 12px 14px; margin: 0 0 12px; font-size: 14px; } .mzc-note__body { margin: 0; } .mzc-note__label { letter-spacing: .02em; } .mzc-note--important { background: var(--mz-red-wash); border: 0; } .mzc-note--important .mzc-note__label { color: var(--mzc-red-ink); } .mzc-note--info { background: var(--mzc-line-soft); border: 0; } .mzc-note--info .mzc-note__label { color: var(--mzc-ink-soft); } .mzc-note--tip { background: var(--mzc-amber-wash); border: 0; } .mzc-note--tip .mzc-note__label { color: var(--mzc-amber-ink); } .mzc-acc { border: 1px solid var(--mzc-line); border-radius: 10px; padding: 0; margin: 0 0 12px; background: var(--mzc-paper); } .mzc-acc__sum { cursor: pointer; padding: 11px 14px; font-weight: 600; font-size: 14.5px; list-style: none; display: flex; align-items: center; gap: 12px; } .mzc-acc__sum::-webkit-details-marker { display: none; } .mzc-acc__txt { flex: 1; min-width: 0; } .mzc-acc__body { padding: 0 14px 13px; font-size: 14.5px; color: var(--mzc-ink-soft); } .mzc-ctawrap { margin: 14px 0 12px; } /* Jeden wygląd przycisku dla klocka „przycisk” (.mzc-cta) i przycisku wstawianego w treści (.mzc-btn) — inaczej dwie ścieżki dawałyby dwa różne CTA na stronie. Selektory z nazwą elementu, żeby przebić style linków z motywu. */ .mzc a.mzc-cta, .mzc a.mzc-btn-sot, .mzc a.mzc-btn { display: inline-flex; align-items: center; gap: 9px; background: var(--mzc-green); color: var(--mz-on-green); font-weight: 700; font-size: 15.5px; line-height: 1.25; text-decoration: none; padding: 13px 22px; border-radius: 10px; box-shadow: none; transition: opacity .16s, transform .12s; } .mzc a.mzc-cta:hover, .mzc a.mzc-btn-sot:hover, .mzc a.mzc-btn:hover { opacity: .8; color: var(--mz-on-green); text-decoration: none; } .mzc a.mzc-cta:active, .mzc a.mzc-btn-sot:active, .mzc a.mzc-btn:active { transform: translateY(1px); } .mzc a.mzc-cta:focus-visible, .mzc a.mzc-btn-sot:focus-visible, .mzc a.mzc-btn:focus-visible { outline: 2px solid var(--mzc-ink); outline-offset: 3px; } /* Przycisk wstawiony w akapicie potrzebuje własnego oddechu. */ /* Przycisk wstawiony w akapicie ma stać w OSOBNEJ linii — display:flex robi z niego blok, a fit-content zachowuje szerokość dopasowaną do treści. */ .mzc a.mzc-btn-sot, .mzc a.mzc-btn { display: flex; width: fit-content; margin: 14px 0; } .mzc-code { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 0 0 12px; } /* Ikona kalendarza przy terminie — ta sama co przy dacie w stopce widgetu. */ .mzc-step__timing-ico { width: 14px; height: 14px; flex: none; color: var(--mzc-muted); display: block; } .mzc-code__label { font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--mzc-muted); } /* Jeden przycisk kodu w całym serwisie — wygląd 1:1 z `.brow__code` w widgecie. Dwa różne przyciski do tej samej czynności na jednej stronie kazałyby czytelnikowi zgadywać, czy robią to samo. */ /* Prefiks `.mzc` KONIECZNY: reset `.mzc button` ma (0,1,1) i bez niego przebiłby `color` tego przycisku, gasząc tekst na zieleni. */ .mzc .mzc-code__btn { display: inline-flex; align-items: center; gap: 8px; appearance: none; cursor: pointer; background: var(--mzc-green); border: 0; color: var(--mz-on-green); border-radius: var(--mz-radius-xs); padding: 4px 11px; font-size: 13.5px; font-weight: 700; letter-spacing: .04em; transition: transform .2s var(--mz-ease); } /* Stany jawnie, z prefiksem — dokładnie jak `.mz-sot .brow__code:hover`. Kolor musi zostać przy tokenie, inaczej motyw przemaluje tekst. UWAGA NA SELEKTOR: `.mzc .mzc …` (ze spacją) wymaga DWÓCH zagnieżdżonych elementów z klasą `.mzc`. Takiego zagnieżdżenia w tych szablonach nie ma — `.mzc` stoi na kontenerze najwyższego poziomu każdego bloku (`mzc-steps`, `mzc-faq`, `mzc-verdict`, `mzc-loose`, `mzc-ph`), a te są rodzeństwem, nigdy nie leżą jeden w drugim. Reguła z takim selektorem jest MARTWA i nikt tego nie zauważy, bo CSS nie zgłasza błędu. Do podniesienia specyficzności służy podwojenie klasy BEZ spacji (`.mzc.mzc`), które dopasowuje ten sam element. */ .mzc .mzc-code__btn:hover, .mzc .mzc-code__btn:focus, .mzc.mzc .mzc-code__btn:focus-visible { transform: translateY(-1px); color: var(--mz-on-green); background: var(--mzc-green); } .mzc .mzc-code__btn:focus-visible { outline: 2px solid var(--mzc-green); outline-offset: 2px; } .mzc-code__ico { width: 14px; height: 14px; flex: none; display: block; } /* Potwierdzenie: przygaszenie zamiast zmiany barw — kontrast zostaje. */ .mzc .mzc-code__btn.is-copied { filter: brightness(.92); transform: none; } /* ─────────────── FAQ ─────────────── */ .mzc-faq__list { display: flex; flex-direction: column; gap: 10px; } .mzc-faq__item { background: var(--mzc-paper); border: 1px solid var(--mzc-line); border-radius: var(--mzc-radius); } .mzc-faq__q { cursor: pointer; padding: 16px 20px; font-weight: 700; font-size: 16.5px; line-height: 1.4; list-style: none; display: flex; align-items: center; gap: 16px; } .mzc-faq__q::-webkit-details-marker { display: none; } .mzc-faq__qtxt { flex: 1; min-width: 0; } .mzc-faq__a { padding: 0 20px 18px; color: var(--mzc-ink-soft); font-size: 15px; } /* ─────────────── Werdykt ─────────────── */ .mzc-verdict { background: var(--mzc-paper); border: 1px solid var(--mzc-line); border-radius: var(--mzc-radius); padding: 20px 22px; } /* * Nadtytuł „Werdykt Monazo” — stały, nad nagłówkiem z kreatora. * * WERSALIKI ustawiamy CSS-em (`text-transform`), nie w treści szablonu: tekst * w źródle zostaje normalnym zdaniem, więc czytniki ekranu przeczytają go * naturalnie, a wyszukiwarka nie zobaczy krzyku. */ /* * Nagłówek werdyktu — tekst po lewej, logo po prawej. * * `align-items: flex-start`, żeby logo trzymało się GÓRNEJ krawędzi niezależnie * od tego, na ile wierszy złamie się tytuł. Wyśrodkowanie w pionie odjeżdżałoby * przy długim nagłówku. * * `min-width: 0` na kolumnie tekstowej — bez tego długie słowo w tytule * rozpycha siatkę i wypycha logo poza kartę. */ .mzc-verdict__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; } .mzc-verdict__headtext { min-width: 0; } /* Logo: kwadrat o stałej wielkości, bez tła i obramowania — znak stoi samodzielnie, tak samo jak w nagłówku widgetu po poprawce z 0.27.2. `flex: none`, żeby nie kurczyło się przy długim tytule. */ .mzc-verdict__logo { flex: none; width: 44px; height: 44px; border-radius: 10px; object-fit: contain; display: block; } .mzc-verdict__eyebrow { margin: 0 0 6px; font-size: 11.5px; font-weight: 500; letter-spacing: .09em; text-transform: uppercase; color: var(--mzc-green); } /* * BARWA MARKI W TRYBIE CIEMNYM — samo `!important` NIE WYSTARCZY. * * Motyw maluje akapity regułą: * html[data-scheme="dark"] .entry-content p { color:#ddd !important } * czyli specyficzność (0,2,2) ORAZ `!important`. Gdy obie strony mają * `!important`, rozstrzyga specyficzność — pojedyncza klasa (0,1,0) przegrywa, * choćby z `!important`. Tak wyglądało pierwsze podejście i dlatego nie * działało. * * `.mzc.mzc-verdict` — DWIE KLASY BEZ SPACJI, bo sekcja niesie obie naraz * (`
`). Z klasą dziecka daje (0,3,0), a trzy * klasy biją dwie niezależnie od liczby elementów po drugiej stronie. * * Zapis ze spacją (`.mzc .mzc-verdict`) NIE ZADZIAŁAŁBY: `.mzc` nigdy nie * zagnieżdża się samo w sobie — patrz pułapka przy `.mzc-code__btn`. * * `!important` jest tu decyzją, nie obejściem: to znak marki, sygnał czyja to * opinia, a nie element dekoracyjny. */ .mzc.mzc-verdict .mzc-verdict__eyebrow { color: var(--mzc-green) !important; } /* * Tytuł przykleja się do nadtytułu. * * Motyw nadaje nagłówkom `margin-top: 28px` selektorem o wyższej wadze niż * pojedyncza klasa, więc samo `margin: 0 …` przegrywało i między „WERDYKT * MONAZO” a nagłówkiem wchodziła luka. Te dwa wiersze są jedną całością — * nadtytuł bez przylegającego tytułu traci sens. * * Odstęp NAD sekcją zapewnia margines bloku w Gutenbergu i własny padding * `.mzc-verdict`, więc zerowanie tego marginesu niczego nie spłaszcza. */ .mzc-verdict__title { margin: 0 0 14px !important; font-size: 21px; line-height: 1.25; font-weight: 700; } /* * Ocena — te same barwy i proporcje co plakietka w nagłówku widgetu * (`.mz-sot .rating`), tylko w jednym wierszu z podpisem. * * Nie da się użyć tamtych reguł wprost: żyją pod `.mz-sot`, a werdykt * renderuje się w przestrzeni `.mzc`. Wartości są przepisane świadomie — * przy zmianie wyglądu oceny trzeba dotknąć obu miejsc. */ .mzc-verdict__rating { display: flex; align-items: baseline; gap: 5px; margin: -6px 0 16px; font-size: 14px; } .mzc-verdict__rating-lead { color: var(--mzc-muted); } .mzc-verdict__star { color: var(--mzc-green); line-height: 1; display: inline-flex; align-self: center; } .mzc-verdict__star svg { width: 16px; height: 16px; display: block; } .mzc-verdict__score { color: var(--mzc-green); font-weight: 500; font-size: 16px; letter-spacing: .02em; } .mzc-verdict__max { color: var(--mzc-muted); font-size: 11px; } /* * Przycisk werdyktu — WŁASNA nazwa, nie `.mzc-cta`. * * Ta druga JEST ZAJĘTA: to klocek „przycisk” w treści redakcyjnej * (`parts/content-blocks.php`), stylowany regułą `.mzc a.mzc-cta` o wyższej * specyficzności. Pierwsze podejście używało tej nazwy i po cichu dziedziczyło * cudze wartości — przycisk wychodził węższy, mniej zaokrąglony i mniejszą * czcionką, mimo poprawnie zapisanych reguł. * * SELEKTOR Z NAZWĄ ELEMENTU (`a.…`), tak samo jak w regule klocka i z tego * samego powodu: motywy stylizują odnośniki i bez tego przebijają pojedynczą * klasę. * * Wartości odwzorowują `.mz-sot .cta` z widgetu — reguł stamtąd nie da się użyć * wprost, bo żyją pod `.mz-sot`, a blok treści osadzony bez widgetu w ogóle nie * ładuje `widget.css`. Przy zmianie wyglądu przycisku trzeba dotknąć obu miejsc. */ .mzc a.mzc-verdict__cta, .mzc .mzc-verdict__cta { display: flex; align-items: center; justify-content: center; gap: 9px; width: 100%; margin-top: 20px; text-decoration: none; cursor: pointer; background: var(--mzc-green); color: var(--mzc-on-green); font-weight: 700; font-size: 16px; line-height: 1.25; letter-spacing: -.01em; padding: 16px 22px; border-radius: 14px; border: 0; box-shadow: none; transition: opacity .16s, transform .12s ease; } .mzc a.mzc-verdict__cta:hover { opacity: .8; color: var(--mzc-on-green); text-decoration: none; } .mzc a.mzc-verdict__cta:active { transform: translateY(1px); } .mzc a.mzc-verdict__cta:focus-visible { outline: 2px solid var(--mzc-ink); outline-offset: 2px; } .mzc .mzc-verdict__cta svg { width: 17px; height: 17px; } /* Oprawa „promocja zakończona” — nieklikalna, więc renderowana jako ``. Stąd drugi selektor bez `a.` w regule bazowej wyżej. */ .mzc .mzc-verdict__cta--off { background: var(--mzc-inset); color: var(--mzc-muted); cursor: default; } .mzc-verdict__body { font-size: 15.5px; } /* Dostępność: opis tylko dla czytników ekranu (gdyby motyw nie definiował). */ .mzc .screen-reader-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(1px, 1px, 1px, 1px); clip-path: inset(50%); white-space: nowrap; } @media (max-width: 600px) { .mzc-steplist { padding-left: 38px; } .mzc-steplist::before { left: 13px; } .mzc-step__num { left: -38px; top: 14px; width: 28px; height: 28px; font-size: 13px; } .mzc-step__card { padding: 15px 16px; } .mzc-step__title { font-size: 16px; } /* * NAGŁÓWEK KROKU W DWÓCH RZĘDACH — plakietka schodzi pod tytuł. * * W jednym wierszu (układ z szerokiego ekranu) tytuł, plakietka i strzałka * dzieliły między siebie ~300 px. Tytuł łamał się po dwóch–trzech słowach, * a plakietka z dłuższą treścią („6% w skali roku”) wchodziła na niego, * bo ma `white-space: nowrap` i nie ma jak się skrócić. * * Siatka zamiast zawijania flexa, bo pozycje muszą być JAWNE: zawijanie * przeniosłoby też strzałkę, a ta ma zostać przy tytule jako uchwyt * rozwijania. Tytuł dostaje całą przestrzeń między checkboxem a strzałką. * * Trzecia kolumna i drugi rząd powstają tylko wtedy, gdy mają zawartość — * krok bez strzałki albo bez plakietki wygląda tak jak dotąd. * * ZMIENIAMY WYŁĄCZNIE UKŁAD. Rozmiary, barwy, obramowania i odstępy * wewnętrzne zostają te same co na szerokim ekranie. */ .mzc-step__head { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; column-gap: 11px; row-gap: 8px; } .mzc-step__check { grid-column: 1; grid-row: 1; } .mzc-step__title { grid-column: 2; grid-row: 1; } .mzc-step__head > .mzc-chev { grid-column: 3; grid-row: 1; } /* Pod tytułem, wyrównana do jego lewej krawędzi — stąd start od drugiej kolumny i wyzerowany `margin-left`, który w układzie jednowierszowym odsuwał ją od tytułu. Margines kroku ROZWIJANEGO zerujemy osobno, niżej — jego reguła stoi w pliku PO tym bloku, a media query nie podnosi specyficzności, więc nadpisanie musi być po niej. */ .mzc-step__badge { grid-column: 2 / -1; grid-row: 2; justify-self: start; margin-left: 0; } } /* ─────────────── Strzałka akordeonów (FAQ + treść) ─────────────── Maska SVG zamiast znaku „+/−”: skaluje się ostro, dziedziczy kolor i płynnie obraca się przy otwieraniu. */ .mzc .mzc-chev { flex: none; width: 26px; height: 26px; color: var(--mzc-muted); background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center / 26px 26px no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center / 26px 26px no-repeat; transition: transform .3s cubic-bezier(.4, 0, .2, 1), color .2s; } .mzc-acc .mzc-chev { width: 22px; height: 22px; -webkit-mask-size: 22px 22px; mask-size: 22px 22px; } .mzc-faq__item[open] > .mzc-faq__q .mzc-chev, .mzc-acc[open] > .mzc-acc__sum .mzc-chev { transform: rotate(180deg); color: var(--mzc-green-ink); } .mzc-faq__q:hover .mzc-chev, .mzc-acc__sum:hover .mzc-chev { color: var(--mzc-ink); } /* Płynne rozwijanie: wysokość animuje JS, tu tylko przycięcie treści. */ .mzc-faq__a, .mzc-acc__body { overflow: hidden; } /* ─────────────── Nagłówek sekcji FAQ ─────────────── */ .mzc-faq__head { text-align: center; margin-bottom: 22px; } .mzc-faq__title { margin: 0 0 8px; font-size: 30px; font-weight: 800; line-height: 1.2; } .mzc-faq__accent { color: var(--mzc-green); } .mzc-faq__lead { margin: 0; font-size: 15px; color: var(--mzc-muted); } @media (max-width: 600px) { .mzc-faq__title { font-size: 24px; } .mzc-faq__q { padding: 14px 16px; font-size: 15.5px; gap: 10px; } .mzc-faq__a { padding: 0 16px 16px; } .mzc .mzc-chev { width: 22px; height: 22px; -webkit-mask-size: 22px 22px; mask-size: 22px 22px; } } @media (prefers-reduced-motion: reduce) { .mzc .mzc-chev { transition: none; } } /* Padding treści na wewnętrznym elemencie — animowany kontener musi być „goły”, inaczej wysokość skacze w trakcie animacji i widać klatkowanie. */ .mzc-faq__a { padding: 0; } .mzc-faq__inner { padding: 0 20px 18px; } .mzc-acc__body { padding: 0; } .mzc-acc__inner { padding: 0 14px 13px; } /* Krok zwinięty: strzałka po prawej, obrót przy rozwinięciu. */ .mzc-step--acc .mzc-step__head .mzc-chev { margin-left: 4px; } .mzc-step--acc .mzc-step__badge { margin-left: 15px; } /* * Na wąskim ekranie plakietka stoi w osobnym rzędzie siatki, więc odstęp od * tytułu jest zbędny — a przy krokach rozwijanych odsuwał ją o 15 px od lewej * krawędzi tekstu, podczas gdy kroki bez strzałki miały równo. * * MUSI STAĆ TUTAJ, nie w bloku z resztą reguł mobilnych wyżej: reguła bazowa * ma dwie klasy i leży w pliku PÓŹNIEJ, a `@media` nie podnosi specyficzności. * Nadpisanie o równej wadze wygrywa wyłącznie wtedy, gdy jest za nią. */ @media (max-width: 600px) { .mzc-step--acc .mzc-step__badge { margin-left: 0; } } .mzc-step__card[open] > .mzc-step__head .mzc-chev { transform: rotate(180deg); color: var(--mzc-green-ink); } .mzc-step--acc .mzc-step__head:hover .mzc-chev { color: var(--mzc-ink); } @media (max-width: 600px) { .mzc-faq__inner { padding: 0 16px 16px; } } /* Puste miejsce w podglądzie kreatora — pokazuje szkielet dokumentu. Renderowane WYŁĄCZNIE w trybie podglądu, nigdy na froncie. */ .mzc-ph { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; border: 1px dashed var(--mz-line-2); border-radius: 10px; padding: 14px 16px; background: var(--mzc-line-soft); } .mzc-ph__tag { font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--mzc-muted); border: 1px solid var(--mz-line-2); border-radius: 999px; padding: 2px 8px; } .mzc-ph__title { font-size: 14px; color: var(--mzc-ink-soft); } .mzc-ph__hint { font-size: 12.5px; color: var(--mzc-muted); } /* Box wstawiony w sekcji tekstowej układu — sam wrapper, bez marginesów .mzc. */ .mzc-loose { margin: 0 0 12px; } /* Strzałka w przycisku wstawianym w treści (klocek CTA ma ją w markupie). */ .mzc a.mzc-btn-sot::after, .mzc a.mzc-btn::after { content: "\2192"; font-weight: 700; } /* Kroki na węższych ekranach: akapit 16px, listy 15px (reguła „o stopień mniej”). */ @media (max-width: 1000px) { .mzc-step__body { font-size: 16px; } .mzc-step__inner > p { font-size: 16px; } .mzc-step__inner > .mzc-list { font-size: 14.5px; } }