/* ========================================================================== Plombier — spis treści wpisu („Co znajdziesz w artykule?”) Wczytywane przez mu-plugin plombier-blog.php (tylko pojedyncze wpisy) -------------------------------------------------------------------------- ZAŁOŻENIA • Markup wstawia PHP (plmbr_blog_toc_content):
z paskiem tytułu w i listą
    . Zwijanie to natywne details/summary — zero JS, cały pasek klikalny. • KARTA I PASEK w języku bloków FAQ z tej samej wtyczki (faq.css) — decyzja usera 2026-08-31: biała karta z ramką #E4E6EA, granatowy tytuł, po najechaniu / otwarciu ciemna belka #010042 z białym tekstem, chevron tą samą maską SVG co w FAQ. Zmieniając tu wygląd belki, zajrzyj też do faq.css — mają zostać bliźniacze. • LISTA w środku wg wzoru z abeo-pro.pl (kropki z poświatą, podpunkty przy pionowej linii), w akcencie witryny #0986C0; H4 = trzeci poziom, dziedziczy styl podlisty. Montserrat dziedziczony. • Domyślnie ZWINIĘTY (bez atrybutu open) — decyzja z 2026-08-31. DLACZEGO GDZIENIEGDZIE JEST !important W Kustomizerze → Dodatkowy CSS zostaje globalna reguła ul, ol { margin: 0 !important; padding: 0 0 0 18px !important; } drukowana na końcu , czyli PO tym arkuszu. Bez !important i wyższej specyficzności nie da się ustawić wcięć i odstępów list spisu. Na linkach !important pilnuje text-decoration przed regułami motywu/Kustomizera. ========================================================================== */ .plmbr-toc { --plmbr-toc-accent: #0986c0; /* akcent witryny — kropki i hover listy */ --plmbr-toc-accent-45: rgba(9, 134, 192, .45); --plmbr-toc-accent-32: rgba(9, 134, 192, .32); --plmbr-toc-accent-14: rgba(9, 134, 192, .14); --plmbr-toc-ink: #010042; /* granat — tytuł i ciemna belka */ --plmbr-toc-on-ink: #ffffff; /* tekst i chevron na ciemnej belce */ --plmbr-toc-text: #5f6870; /* linki głównego poziomu */ --plmbr-toc-muted: #68727a; /* linki podpunktów */ --plmbr-toc-line: #e4e6ea; /* ramka — jak .plmbr-faq i tabele */ --plmbr-toc-outline: #0f1b2e; /* obrys karty — ciemna marka */ --plmbr-toc-bg: #ffffff; --plmbr-toc-radius: 12px; --plmbr-toc-pad-x: 20px; /* Ten sam chevron-maska co w faq.css — belki mają zostać bliźniacze. Kolor przez currentColor; wpisany stroke gra tylko w wariancie awaryjnym bez obsługi masek. */ --plmbr-toc-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23010042' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); /* Hamburger przed tytułem (jak w spisie na budrys.eu) — ta sama kreska co chevron (2.5, zaokrąglone końce), żeby ikonki były z jednej rodziny. */ --plmbr-toc-burger: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23010042' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='M4 6h16M4 12h16M4 18h16'/%3E%3C/svg%3E"); } /* -------------------------------------------------------------------------- 1. Karta — chrom jak blok FAQ (.plmbr-faq): biała, radius 12, bez cienia, ALE z obrysem 2px w ciemnej marce #0F1B2E zamiast szarej ramki 1px — spis ma się odróżniać od pól FAQ (uwaga usera 2026-08-31, wzór budrys.eu). Obrys zostaje też przy hover/otwarciu — zlewa się z ciemną belką. -------------------------------------------------------------------------- */ .plmbr-toc { margin: 32px 0 42px; padding: 0; border: 2px solid var(--plmbr-toc-outline); border-radius: var(--plmbr-toc-radius); background: var(--plmbr-toc-bg); overflow: hidden; /* ciemna belka tytułu musi trzymać się zaokrąglenia */ } /* -------------------------------------------------------------------------- 2. Pasek tytułu (summary) — zachowanie jak pytanie FAQ: po najechaniu, przy fokusie z klawiatury i przy OTWARTYM spisie ciemna belka #010042 z białym tekstem (tytuł, hamburger i chevron jadą na currentColor). W spoczynku zamiast bieli SUBTELNY gradient w kolorach marki (granat #0F1B2E → błękit #0986C0, ~7–14% krycia) — drugi wyróżnik względem FAQ (wybór usera 2026-08-31, wariant C). ⚠️ Stany hover/open nadpisują tło SKRÓTEM `background` — samo background-color zostawiłoby gradient-image na ciemnej belce. user-select:none — żeby dwuklik w pasek nie zaznaczał tytułu. -------------------------------------------------------------------------- */ .plmbr-toc > .plmbr-toc__bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px var(--plmbr-toc-pad-x); background: linear-gradient(135deg, rgba(15, 27, 46, .07) 0%, rgba(9, 134, 192, .09) 55%, rgba(9, 134, 192, .14) 100%); color: var(--plmbr-toc-ink); cursor: pointer; list-style: none; -webkit-user-select: none; user-select: none; transition: background-color .3s ease, color .3s ease; } .plmbr-toc > .plmbr-toc__bar:hover, .plmbr-toc > .plmbr-toc__bar:focus-visible, .plmbr-toc[open] > .plmbr-toc__bar { background: var(--plmbr-toc-ink); color: var(--plmbr-toc-on-ink); } /* zdejmujemy natywny trójkącik we wszystkich silnikach */ .plmbr-toc > .plmbr-toc__bar::-webkit-details-marker { display: none; } .plmbr-toc > .plmbr-toc__bar::marker { content: ""; } /* Obrys w currentColor — widoczny i na białym, i na ciemnym pasku. */ .plmbr-toc > .plmbr-toc__bar:focus-visible { outline: 2px solid currentColor; outline-offset: -4px; /* overflow:hidden karty ściąłby obrys na zewnątrz */ } /* Tytuł — typografia jak pytanie FAQ (18/700). flex + min-width:0: długi tytuł ma się zawijać, nie ściskać chevronu. color:inherit — biel na belce. */ .plmbr-toc > .plmbr-toc__bar .plmbr-toc__title { display: flex; align-items: center; gap: 10px; flex: 1 1 auto; min-width: 0; margin: 0; font-family: inherit; font-size: 18px; font-weight: 700; line-height: 1.45; letter-spacing: 0; color: inherit; text-align: left; text-transform: none; } /* Hamburger przed tytułem — maska w currentColor (granat → biel na belce), jak chevron. Wyróżnia spis na tle pytań FAQ. */ .plmbr-toc > .plmbr-toc__bar .plmbr-toc__title::before { content: ""; flex: 0 0 auto; width: 18px; height: 18px; background: var(--plmbr-toc-burger) no-repeat center / 18px 18px; } @supports ((-webkit-mask-image: url("#c")) or (mask-image: url("#c"))) { .plmbr-toc > .plmbr-toc__bar .plmbr-toc__title::before { background: currentColor; -webkit-mask: var(--plmbr-toc-burger) no-repeat center / 18px 18px; mask: var(--plmbr-toc-burger) no-repeat center / 18px 18px; } } /* -------------------------------------------------------------------------- 3. Chevron — ta sama maska SVG i wymiary co w FAQ (18px w pudełku 22×26, obrót o 180° po otwarciu). To ozdobnik (aria-hidden) — kontrolerem jest cały , więc klawiatura i czytniki mają natywną semantykę details. -------------------------------------------------------------------------- */ .plmbr-toc .plmbr-toc__toggle { flex: 0 0 auto; width: 22px; height: 26px; /* wariant awaryjny (brak obsługi masek): chevron w kolorze marki */ background: var(--plmbr-toc-chevron) no-repeat center / 18px 18px; transition: transform .3s ease, background-color .3s ease; } @supports ((-webkit-mask-image: url("#c")) or (mask-image: url("#c"))) { .plmbr-toc .plmbr-toc__toggle { background: currentColor; -webkit-mask: var(--plmbr-toc-chevron) no-repeat center / 18px 18px; mask: var(--plmbr-toc-chevron) no-repeat center / 18px 18px; } } .plmbr-toc[open] .plmbr-toc__toggle { transform: rotate(180deg); } /* -------------------------------------------------------------------------- 4. Lista główna -------------------------------------------------------------------------- */ .plmbr-toc .plmbr-toc__nav { padding: 0; } .plmbr-toc ol.plmbr-toc__list { margin: 0 !important; padding: 18px var(--plmbr-toc-pad-x) 20px !important; list-style: none !important; } .plmbr-toc .plmbr-toc__item { position: relative; margin: 0; padding: 0 0 0 26px; list-style: none !important; } .plmbr-toc .plmbr-toc__item::marker { content: "" !important; } .plmbr-toc ol.plmbr-toc__list > .plmbr-toc__item + .plmbr-toc__item { margin-top: 10px; } /* Kropka z poświatą przy punktach głównego poziomu. top W PIKSELACH, nie w em: li dziedziczy z artykułu 16px/1.8, więc pierwsza linia tekstu ma strut 28.8px i jej ŚRODEK wypada 14.4px od góry li (zmierzone na żywym podglądzie: 14.5px). Środek kropki 8px musi trafić w to samo miejsce → top 10.5px. Wartość w em (.5em = 8px) stawiała kropkę 2.5px za wysoko. */ .plmbr-toc ol.plmbr-toc__list > .plmbr-toc__item::before { content: ""; position: absolute; left: 2px; top: 10.5px; width: 8px; height: 8px; border-radius: 50%; background: var(--plmbr-toc-accent); box-shadow: 0 0 0 4px var(--plmbr-toc-accent-14); } /* Linki */ .plmbr-toc .plmbr-toc__item > a { color: var(--plmbr-toc-text); font-family: inherit; font-size: 15.5px; font-weight: 600; line-height: 1.55; text-decoration: none !important; text-underline-offset: 4px; transition: color .18s ease, text-decoration-color .18s ease; } .plmbr-toc .plmbr-toc__item > a:hover, .plmbr-toc .plmbr-toc__item > a:focus { color: var(--plmbr-toc-ink); text-decoration: underline !important; text-decoration-color: var(--plmbr-toc-accent); } .plmbr-toc .plmbr-toc__item > a:focus-visible { outline: 2px solid var(--plmbr-toc-accent-45); outline-offset: 2px; border-radius: 4px; } /* -------------------------------------------------------------------------- 5. Podpunkty (H3) — przy pionowej linii, z kreską zamiast kropki -------------------------------------------------------------------------- */ .plmbr-toc ol.plmbr-toc__sub { margin: 7px 0 0 !important; padding: 0 0 0 15px !important; border-left: 2px solid var(--plmbr-toc-accent-32); list-style: none !important; } .plmbr-toc .plmbr-toc__sub .plmbr-toc__item { margin: 6px 0 0; padding: 0 0 0 15px; } /* top jak przy kropce wyżej: środek linii tekstu 14.4px − połowa kreski. */ .plmbr-toc .plmbr-toc__sub .plmbr-toc__item::before { content: ""; position: absolute; left: -5px; top: 13.5px; width: 7px; height: 2px; border-radius: 999px; background: var(--plmbr-toc-accent); box-shadow: none; } .plmbr-toc .plmbr-toc__sub .plmbr-toc__item > a { color: var(--plmbr-toc-muted); font-size: 15px; font-weight: 500; } .plmbr-toc .plmbr-toc__sub .plmbr-toc__item > a:hover, .plmbr-toc .plmbr-toc__sub .plmbr-toc__item > a:focus { color: var(--plmbr-toc-ink); } /* Trzeci poziom (H4) — dziedziczy cały styl podlisty (linia, kreska, kolory), różni go tylko drobniejszy stopień pisma. */ .plmbr-toc .plmbr-toc__sub .plmbr-toc__sub .plmbr-toc__item > a { font-size: 14.5px; } /* -------------------------------------------------------------------------- 6. Rozwijanie — delikatne wejście listy -------------------------------------------------------------------------- */ @keyframes plmbr-toc-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } } .plmbr-toc[open] .plmbr-toc__nav { animation: plmbr-toc-in .2s ease; } /* -------------------------------------------------------------------------- 7. Kotwice i przewijanie Nagłówki dostają id z PHP — odrobina oddechu nad celem skoku. Smooth scroll tylko na wpisach (ten arkusz nie ładuje się nigdzie indziej) i tylko dla osób bez preferencji ograniczonego ruchu. -------------------------------------------------------------------------- */ .single.single-post h2[id], .single.single-post h3[id] { scroll-margin-top: 24px; } @media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } } /* -------------------------------------------------------------------------- 8. Mobile -------------------------------------------------------------------------- */ @media (max-width: 768px) { .plmbr-toc { --plmbr-toc-pad-x: 16px; margin: 26px 0 34px; } .plmbr-toc > .plmbr-toc__bar { padding: 15px var(--plmbr-toc-pad-x); gap: 12px; } /* jak pytanie FAQ na mobile: 16.5px + chevron 16px */ .plmbr-toc > .plmbr-toc__bar .plmbr-toc__title { font-size: 16.5px; } .plmbr-toc .plmbr-toc__toggle { width: 20px; height: 24px; background-size: 16px 16px; -webkit-mask-size: 16px 16px; mask-size: 16px 16px; } .plmbr-toc > .plmbr-toc__bar .plmbr-toc__title::before { width: 16px; height: 16px; background-size: 16px 16px; -webkit-mask-size: 16px 16px; mask-size: 16px 16px; } .plmbr-toc ol.plmbr-toc__list { padding: 16px var(--plmbr-toc-pad-x) 18px !important; } } /* -------------------------------------------------------------------------- 9. Dostępność i druk -------------------------------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { .plmbr-toc > .plmbr-toc__bar, .plmbr-toc .plmbr-toc__toggle { transition: none; } .plmbr-toc[open] .plmbr-toc__nav { animation: none; } } @media print { .plmbr-toc { break-inside: avoid; box-shadow: none; } .plmbr-toc .plmbr-toc__toggle { display: none; } .plmbr-toc .plmbr-toc__nav { display: block !important; } }