/** * 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); 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. */ .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. 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) { 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):hover, .mzc a:not(.mzc-cta):not(.mzc-btn):not(.mzc-btn-sot):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; } .mzc-verdict__title { margin: 0 0 14px; font-size: 21px; line-height: 1.25; font-weight: 700; } .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; } } /* ─────────────── 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; } .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; } }